:root{--akds-bg-primary:var(--bg-primary,#151a1f);--akds-bg-secondary:var(--bg-secondary,#1b2026);--akds-bg-tertiary:var(--bg-tertiary,#222832);--akds-surface-2:var(--surface-2,#222832);--akds-surface-3:var(--surface-3,#2a3140);--akds-text-primary:var(--text-primary,#d1d5db);--akds-text-secondary:var(--text-secondary,#aeb6c2);--akds-text-muted:var(--text-muted,#778199);--akds-border-color:var(--border-color,#232a35);--akds-accent-primary:var(--accent-primary,#5a7ba6);--akds-accent-secondary:var(--accent-secondary,#7f9cc2);--akds-accent-success:var(--accent-success,#5aa68f);--akds-accent-warning:var(--accent-warning,#c2a46b);--akds-accent-danger:var(--accent-danger,#c27f8c);--akds-accent-primary-rgb:var(--accent-primary-rgb,90,123,166);--akds-accent-success-rgb:var(--accent-success-rgb,90,166,143);--akds-accent-warning-rgb:var(--accent-warning-rgb,194,164,107);--akds-accent-danger-rgb:var(--accent-danger-rgb,194,127,140);--akds-font-size-xs:var(--font-size-xs,.75rem);--akds-font-size-sm:var(--font-size-sm,.85rem);--akds-font-size-md:var(--font-size-md,1rem);--akds-font-size-lg:var(--font-size-lg,1.05rem);--akds-font-size-xl:var(--font-size-xl,1.35rem);--akds-font-weight-medium:var(--font-weight-medium,500);--akds-font-weight-semibold:var(--font-weight-semibold,600);--akds-line-height-normal:var(--line-height-normal,1.45);--akds-spacing-xs:var(--spacing-xs,3px);--akds-spacing-sm:var(--spacing-sm,6px);--akds-spacing-md:var(--spacing-md,10px);--akds-spacing-lg:var(--spacing-lg,14px);--akds-spacing-xl:var(--spacing-xl,18px);--akds-spacing-2xl:var(--spacing-2xl,22px);--akds-spacing-3xl:var(--spacing-3xl,28px);--akds-radius-sm:var(--border-radius-sm,5px);--akds-radius-md:var(--border-radius-md,8px);--akds-radius-lg:var(--border-radius-lg,10px);--akds-radius-xl:var(--border-radius-xl,12px);--akds-control-sm:var(--control-sm,32px);--akds-control-md:var(--control-md,36px);--akds-icon-xl:var(--icon-xl,24px);--akds-z-modal:var(--z-modal,2000);--akds-z-tooltip:var(--z-tooltip,3000);--akds-shadow-md:var(--shadow-md,0 3px 8px #00000052);--akds-shadow-lg:var(--shadow-lg,0 6px 16px #00000059);--akds-shadow-notation:var(--shadow-notation,0 2px 8px #00000042,inset 0 1px 0 #ffffff0f);--akds-shadow-notation-hover:var(--shadow-notation-hover,0 3px 10px #0000004d,inset 0 1px 0 #ffffff14);--akds-transition-fast:var(--transition-fast,all .12s ease);--akds-transition-smooth:var(--transition-smooth,all .18s cubic-bezier(.4,0,.2,1));--akds-transition-bounce:var(--transition-bounce,transform .22s cubic-bezier(.22,1,.36,1));--akds-transition-button:var(--transition-button,all .16s cubic-bezier(.4,0,.2,1));--akds-transform-hover-scale:var(--transform-hover-scale,none);--akds-transform-active-scale:var(--transform-active-scale,none);--akds-gradient-purple:var(--gradient-purple,linear-gradient(180deg,#667eea1f,#764ba21f));--akds-gradient-notation-bg:var(--gradient-notation-bg,var(--akds-gradient-purple));--akds-gradient-notation-bg-hover:var(--gradient-notation-bg-hover,linear-gradient(180deg,#667eea2e,#764ba22e));--akds-gradient-primary:var(--gradient-primary,linear-gradient(180deg,rgba(var(--akds-accent-primary-rgb),.14),rgba(var(--akds-accent-primary-rgb),.12)));--akds-chordpro-background:var(--color-background,var(--akds-bg-primary));--akds-chordpro-surface:var(--color-surface,var(--akds-surface-2));--akds-chordpro-surface-alt:var(--color-surface-alt,var(--akds-surface-3));--akds-chordpro-border:var(--color-border,var(--akds-border-color));--akds-chordpro-text:var(--color-text,var(--akds-text-primary));--akds-chordpro-text-muted:var(--color-text-muted,var(--akds-text-muted));--akds-chordpro-primary:var(--color-primary,var(--akds-accent-primary));--akds-chordpro-chord:var(--akds-accent-primary);--akds-chordpro-bracket:var(--akds-text-muted);--akds-chordpro-directive:var(--akds-accent-primary);--akds-chordpro-section:var(--akds-text-primary);--akds-chordpro-comment:var(--akds-text-muted);--akds-chordpro-warning:var(--akds-accent-warning);--akds-chordpro-error:var(--akds-accent-danger);--akds-chordpro-selection:rgba(var(--akds-accent-primary-rgb),.3)}.btn{appearance:none;border:1px solid var(--akds-border-color);background:var(--akds-surface-2);color:var(--akds-text-primary);border-radius:var(--akds-radius-md);cursor:pointer;transition:var(--akds-transition-button);justify-content:center;align-items:center;gap:.4rem;padding:10px 14px;font-size:.95rem;font-weight:600;line-height:1.2;text-decoration:none;display:inline-flex}.btn:hover{background:var(--akds-surface-3)}.btn:focus-visible{outline:2px solid var(--akds-accent-primary);outline-offset:2px}.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed}.btn-sm{border-radius:var(--akds-radius-sm);padding:6px 10px;font-size:.85rem}.btn-xs{border-radius:var(--akds-radius-sm);padding:4px 8px;font-size:.78rem}.btn-primary{background:var(--akds-accent-primary);color:#0b0d10;border-color:#0000}.btn-primary:hover{filter:brightness(1.05)}.btn-secondary{background:var(--akds-surface-2);color:var(--akds-text-secondary)}.btn-secondary:hover{background:var(--akds-surface-3);color:var(--akds-text-primary)}.btn-outline-primary{color:var(--akds-accent-primary);border-color:var(--akds-accent-primary);background:0 0}.btn-outline-primary:hover{background:#ffffff0a}.btn-ghost{border-color:var(--akds-border-color);background:0 0}.btn-ghost:hover{background:var(--akds-surface-3)}.btn-link{color:var(--akds-accent-primary);background:0 0;border-color:#0000;text-decoration:none}.btn-link:hover{color:var(--akds-accent-secondary);background:#ffffff0a;text-decoration:none}.btn-success{background:var(--akds-accent-success);border-color:var(--akds-accent-success);color:#0b0d10}.btn-success:hover{filter:brightness(1.05)}.btn-danger{background:var(--akds-accent-danger);border-color:var(--akds-accent-danger);color:#0b0d10}.btn-danger:hover{filter:brightness(1.05)}.form-actions{gap:var(--akds-spacing-md);margin-top:var(--akds-spacing-xl);padding-top:var(--akds-spacing-xl);border-top:1px solid var(--akds-border-color);justify-content:flex-end;display:flex}.modal-overlay{z-index:var(--akds-z-modal);padding:var(--akds-spacing-xl);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0009;justify-content:center;align-items:center;animation:.2s ease-out modalFadeIn;display:flex;position:fixed;inset:0}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--akds-surface-2);border-radius:var(--akds-radius-xl);width:100%;max-width:600px;max-height:90vh;box-shadow:var(--akds-shadow-md);border:1px solid var(--akds-border-color);z-index:calc(var(--akds-z-modal) + 1);padding:0;animation:.2s ease-out modalSlideIn;position:relative;overflow:hidden}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-content-small,.modal-content-sm{max-width:400px}.modal-content-md{max-width:600px}.modal-content-lg{max-width:640px}.modal-content-xl{width:92vw;max-width:1600px}.modal-overlay-nested{z-index:calc(var(--akds-z-modal,2000) + 100)}.modal-content-nested{z-index:1}.modal-footer{padding:var(--akds-spacing-md)var(--akds-spacing-lg);border-top:1px solid var(--akds-border-color);background:#ffffff08;box-shadow:inset 0 1px #0003}.modal-header{justify-content:space-between;align-items:center;gap:var(--akds-spacing-md);padding:var(--akds-spacing-sm)var(--akds-spacing-lg);min-height:var(--akds-control-md);background:#ffffff08;border-bottom:1px solid #ffffff14;display:flex;box-shadow:inset 0 -1px #0003}.modal-header h2,.modal-header h3{color:#fff;font-weight:var(--akds-font-weight-semibold);letter-spacing:.01em;margin:0;line-height:1.15}.modal-header h2{font-size:var(--akds-font-size-xl)}.modal-header h3{font-size:var(--akds-font-size-lg)}.modal-close-btn{font-size:var(--akds-font-size-xl);color:#fff;cursor:pointer;padding:var(--akds-spacing-sm);border-radius:var(--akds-radius-md);transition:var(--akds-transition-fast);width:var(--akds-control-md);height:var(--akds-control-md);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.modal-close-btn:hover{background:var(--akds-surface-3);color:var(--akds-text-primary)}.modal-body{max-height:calc(90vh - 120px);padding:12px;overflow-y:auto}.modal-content:not(:has(.modal-header)) .modal-body{padding:12px}@media (max-width:768px){.modal-overlay{padding:var(--akds-spacing-md)}.modal-content{border-radius:var(--akds-radius-xl);max-height:95vh}.modal-header{padding:var(--akds-spacing-sm)var(--akds-spacing-lg);min-height:var(--akds-control-md)}.modal-header h2{font-size:var(--akds-font-size-lg)}.modal-header h3{font-size:var(--akds-font-size-md)}.modal-body{max-height:calc(95vh - 100px);padding:12px}.modal-close-btn{width:var(--akds-control-md);height:var(--akds-control-md);font-size:var(--akds-font-size-xl)}}@media (max-width:480px){.modal-overlay{padding:var(--akds-spacing-sm)}.modal-content{border-radius:var(--akds-radius-lg);max-height:98vh}.modal-header{padding:var(--akds-spacing-md)var(--akds-spacing-lg)var(--akds-spacing-sm)}.modal-header h2{font-size:var(--akds-font-size-lg)}.modal-header h3{font-size:var(--akds-font-size-md)}.modal-body{max-height:calc(98vh - 80px);padding:12px}.modal-close-btn{width:var(--akds-control-sm);height:var(--akds-control-sm);font-size:var(--akds-font-size-xl)}}.modal-content:focus{outline:none}.modal-overlay[aria-hidden=true]{display:none}.modal-body.loading{justify-content:center;align-items:center;min-height:200px;display:flex}.modal-body.loading:before{content:"";width:var(--akds-control-md);height:var(--akds-control-md);border:3px solid var(--akds-border-color);border-top:3px solid var(--akds-accent-primary);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.notification-container{top:var(--akds-spacing-xl);right:var(--akds-spacing-xl);z-index:var(--akds-z-tooltip);gap:var(--akds-spacing-sm);pointer-events:none;flex-direction:column;width:100%;max-width:400px;display:flex;position:fixed}.notification{background:var(--akds-bg-secondary);border:1px solid var(--akds-border-color);border-radius:var(--akds-radius-lg);box-shadow:var(--akds-shadow-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;padding:0;animation:.3s ease-out notificationSlideIn;position:relative;overflow:hidden}@keyframes notificationSlideIn{0%{opacity:0;transform:translate(100%)translateY(-10px)}to{opacity:1;transform:translate(0)translateY(0)}}.notification:before{content:"";background:var(--akds-accent-primary);width:4px;position:absolute;top:0;bottom:0;left:0}.notification-success:before{background:var(--akds-accent-success)}.notification-error:before{background:var(--akds-accent-danger)}.notification-warning:before{background:var(--akds-accent-warning)}.notification-info:before{background:var(--akds-accent-primary)}.notification-content{padding:var(--akds-spacing-lg);align-items:center;gap:var(--akds-spacing-md);display:flex}.notification-icon{font-size:var(--akds-font-size-lg);width:var(--akds-icon-xl);height:var(--akds-icon-xl);color:#0b0d10;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.notification-success .notification-icon{background:var(--akds-accent-success)}.notification-error .notification-icon{background:var(--akds-accent-danger)}.notification-warning .notification-icon{background:var(--akds-accent-warning)}.notification-info .notification-icon{background:var(--akds-accent-primary)}.notification-message{color:var(--akds-text-primary);font-size:var(--akds-font-size-md);font-weight:var(--akds-font-weight-medium);line-height:var(--akds-line-height-normal);flex-grow:1}.notification-close{color:var(--akds-text-secondary);font-size:var(--akds-font-size-xl);cursor:pointer;padding:var(--akds-spacing-xs);border-radius:var(--akds-radius-sm);transition:var(--akds-transition-fast);width:var(--akds-control-sm);height:var(--akds-control-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.notification-close:hover{background:var(--akds-bg-primary);color:var(--akds-text-primary);transform:scale(1.1)}@media (prefers-color-scheme:dark){.notification{background:#1e1e1ef2;border-color:#ffffff1a}}@media (max-width:768px){.notification-container{top:var(--akds-spacing-lg);right:var(--akds-spacing-lg);left:var(--akds-spacing-lg);max-width:none}.notification-content{padding:var(--akds-spacing-md)}.notification-message{font-size:var(--akds-font-size-sm)}.notification-icon{font-size:var(--akds-font-size-md);width:20px;height:20px}}@media (max-width:480px){.notification-container{top:var(--akds-spacing-md);right:var(--akds-spacing-md);left:var(--akds-spacing-md)}.notification-content{padding:var(--akds-spacing-sm)var(--akds-spacing-md);gap:var(--akds-spacing-sm)}.notification-message{font-size:var(--akds-font-size-xs)}.notification-close{width:var(--akds-icon-xl);height:var(--akds-icon-xl);font-size:var(--akds-font-size-lg)}}.notification.removing{animation:.3s ease-in forwards notificationSlideOut}@keyframes notificationSlideOut{0%{opacity:1;max-height:100px;margin-bottom:var(--akds-spacing-sm);transform:translate(0)translateY(0)}to{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translate(100%)translateY(-10px)}}.notification.timed:after{content:"";background:var(--akds-accent-primary);height:2px;animation:linear notificationProgress;position:absolute;bottom:0;left:0}.notification-success.timed:after{background:var(--akds-accent-success);animation-duration:4s}.notification-error.timed:after{background:var(--akds-accent-danger);animation-duration:6s}.notification-warning.timed:after{background:var(--akds-accent-warning);animation-duration:5s}.notification-info.timed:after{background:var(--akds-accent-primary);animation-duration:4s}@keyframes notificationProgress{0%{width:100%}to{width:0%}}.notation-toggle{background:var(--akds-gradient-notation-bg);border-radius:var(--akds-radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:var(--akds-transition-smooth);-webkit-user-select:none;user-select:none;box-shadow:var(--akds-shadow-notation);border:1px solid #667eea4d;align-items:center;gap:0;padding:0;display:inline-flex;position:relative;overflow:hidden}.notation-toggle:before{content:"";background:var(--akds-gradient-purple);border-radius:var(--akds-radius-lg);width:50%;height:100%;transition:var(--akds-transition-smooth);z-index:1;position:absolute;top:0;left:0;box-shadow:0 3px 8px #667eea66,inset 0 1px #ffffff4d}.notation-toggle:hover{background:var(--akds-gradient-notation-bg-hover);transform:var(--akds-transform-hover-scale);box-shadow:var(--akds-shadow-notation-hover);border-color:#667eea80}.notation-toggle:active{transform:var(--akds-transform-active-scale)}.notation-toggle-button{padding:var(--akds-spacing-md)var(--akds-spacing-lg);border-radius:var(--akds-radius-lg);color:#fffc;transition:var(--akds-transition-smooth);font-size:var(--akds-font-size-md);font-weight:var(--akds-font-weight-medium);z-index:2;text-shadow:0 1px 2px #0003;flex:1;justify-content:center;align-items:center;display:flex;position:relative}.notation-toggle[data-active=flat]:before{transform:translate(0)}.notation-toggle[data-active=sharp]:before{transform:translate(100%)}.notation-toggle-button.active{color:#fff;font-weight:var(--akds-font-weight-semibold);text-shadow:0 2px 4px #0000004d;transform:scale(1.05)}.notation-toggle[data-active=flat]:before,.notation-toggle[data-active=sharp]:before{transition:var(--akds-transition-bounce)}.notation-toggle-button.active{animation:.3s ease-out activeSlide}@keyframes activeSlide{0%{opacity:.8;transform:scale(.9)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@media (prefers-color-scheme:light){.notation-toggle{background:linear-gradient(145deg,#667eea14,#764ba214);border:1px solid #667eea33;box-shadow:0 4px 12px #667eea26,inset 0 1px #fff9}.notation-toggle:before{background:var(--akds-gradient-purple);box-shadow:0 3px 8px #667eea4d,inset 0 1px #fff6}.notation-toggle:hover{background:var(--akds-gradient-notation-bg);border-color:#667eea66;box-shadow:0 6px 16px #667eea40,inset 0 1px #ffffffb3}.notation-toggle-button{color:#667eeacc;text-shadow:0 1px 2px #ffffff4d}.notation-toggle-button.active{color:#fff;font-weight:var(--akds-font-weight-semibold);text-shadow:0 2px 4px #0006}}.chord-pro-editor{flex-direction:column;flex:1;gap:.5rem;min-height:0;display:flex}.chord-pro-editor__surface{background:var(--akds-chordpro-surface);flex:auto;min-height:0;position:relative}.chord-pro-editor__surface:before{content:"";height:calc(11.2em + 1.5rem);min-height:140px;display:block}.chord-pro-highlight,.chord-pro-textarea{width:100%;height:100%;padding:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;font-size:.85rem;line-height:1.4;position:absolute;inset:0}.chord-pro-highlight{color:var(--akds-chordpro-text);white-space:pre-wrap;word-break:break-word;pointer-events:none;scrollbar-width:none;overflow:hidden}.chord-pro-highlight--scroll{overflow:auto}.chord-pro-highlight::-webkit-scrollbar{width:0;height:0}.chord-pro-highlight__content{will-change:transform;min-width:100%;min-height:100%}.chord-pro-textarea{color:#0000;caret-color:var(--akds-chordpro-text);-webkit-text-fill-color:transparent;resize:none;scrollbar-width:none;touch-action:manipulation;background:0 0;border:none;outline:none}.chord-pro-textarea::-webkit-scrollbar{width:0;height:0}.chord-pro-textarea:focus{box-shadow:none;background:0 0;border-color:#0000}.chord-pro-textarea::placeholder{color:#0000}.chord-pro-textarea::selection{background:var(--akds-chordpro-selection)}.chord-pro-line{min-height:1.4em}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.chord-pro-line--section{font-weight:var(--akds-font-weight-semibold)}.chord-pro-line--comment{font-style:italic}.chord-pro-line--empty .cp-token--text{color:var(--akds-chordpro-text-muted)}.cp-token--text{color:var(--akds-chordpro-text)}.cp-token--chord{color:var(--akds-chordpro-chord);font-weight:var(--akds-font-weight-semibold)}.cp-token--chord-bracket{color:var(--akds-chordpro-bracket);opacity:.6}.cp-token--directive{color:var(--akds-chordpro-directive);font-weight:var(--akds-font-weight-semibold)}.cp-token--directive-brace{color:var(--akds-chordpro-bracket);opacity:.6}.cp-token--section{color:var(--akds-chordpro-section);font-weight:var(--akds-font-weight-semibold)}.cp-token--comment{color:var(--akds-chordpro-comment)}.cp-token--warning{color:var(--akds-chordpro-warning);-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.cp-token--error{color:var(--akds-chordpro-error);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.chord-pro-help{background:var(--akds-chordpro-surface-alt);border-top:1px solid var(--akds-chordpro-border);flex-shrink:0;padding:.75rem}.chord-pro-help details summary{cursor:pointer;color:var(--akds-chordpro-primary);padding:.4rem 0;font-size:.9rem;font-weight:600}.help-content{margin-top:.75rem;font-size:.8rem;line-height:1.3}.help-content h4{color:var(--akds-chordpro-text);margin:.75rem 0 .4rem;font-size:.85rem}.help-content ul{color:var(--akds-chordpro-text-muted);margin:.4rem 0 .75rem 1.25rem}.help-content pre{background:var(--akds-chordpro-surface);color:var(--akds-chordpro-text);border-radius:4px;padding:.6rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;font-size:.75rem;overflow-x:auto}.no-diagrams{text-align:center;padding:var(--akds-spacing-3xl);color:var(--akds-text-secondary)}.no-diagrams p{margin:0;font-size:1rem}