:root{--text:#1d1d1f;--text-secondary:#6e6e73;--text-h:#1d1d1f;--bg:#f5f5f7;--surface:#fff;--border:#00000014;--divider:#0000001a;--accent:#0071e3;--accent-hover:#0077ed;--accent-bg:#0071e31a;--danger:#ff3b30;--scale-root-color:#ff9f0a;--shadow-sm:0 1px 2px #0000000a, 0 1px 1px #00000008;--shadow-md:0 4px 16px #00000014, 0 1px 3px #0000000f;--shadow-lg:0 12px 32px #0000001f, 0 2px 8px #0000000f;--fretboard-bg:#fbfaf8;--fretboard-line:#00000038;--fretboard-inlay:#00000024;--inset-shadow-dark:#00000026;--inset-shadow-light:#ffffffb3;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--radius-card:20px;--control-height:36px;--sidebar-width:232px;--bottom-tabs-height:62px;--mobile-metronome-height:60px;--stage-sticky-top:0px;--stage-reserve-height:340px;--fret-wood-dark:#241511;--fret-wood-mid:#3c2418;--fret-wood-light:#5a3823;--fret-wood-bass-dark:#9c7840;--fret-wood-bass-mid:#ceab68;--fret-wood-bass-light:#e8cb92;--fret-binding:#ede3ce;--fret-metal-light:#e8e4dc;--fret-metal-dark:#7a766e;--fret-inlay-pearl:#f4f1e8;--fret-nut:#efe9d8;--sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;--heading:var(--sans);--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;font:17px/1.47059 var(--sans);letter-spacing:-.01em;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}:root[data-theme=dark]{--text:#f5f5f7;--text-secondary:#98989d;--text-h:#f5f5f7;--bg:#000;--surface:#1c1c1e;--border:#ffffff14;--divider:#ffffff1f;--accent:#0a84ff;--accent-hover:#3395ff;--accent-bg:#0a84ff29;--danger:#ff453a;--scale-root-color:#ff9f0a;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 16px #00000073;--shadow-lg:0 12px 32px #0000008c;--fretboard-bg:#232325;--fretboard-line:#ffffff38;--fretboard-inlay:#ffffff29;--inset-shadow-dark:#0009;--inset-shadow-light:#ffffff12;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit}body{background:var(--bg);overscroll-behavior-y:contain;margin:0;overflow-x:hidden}#root{width:100%;min-height:100svh}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:600}h1{letter-spacing:-.015em;margin:0 0 4px;font-size:40px}@media (width<=1024px){h1{font-size:30px}}h2{letter-spacing:-.01em;margin:0 0 8px;font-size:19px;line-height:1.2}p{margin:0}code{font-family:var(--mono);color:var(--text-h);background:var(--border);border-radius:6px;padding:3px 7px;font-size:14px;display:inline-flex}button,input,select{font-family:inherit}@media (width<=480px){input[type=text],input[type=number],input[type=password],input[type=email],input[type=search],textarea,select{font-size:16px!important}.chord-input input{font-size:18px!important}}select{height:var(--control-height);box-sizing:border-box}button{text-align:center;justify-content:center;align-items:center;display:inline-flex}.icon-circle-button{border:1px solid var(--border);background:var(--surface);width:37px;height:37px;color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);border-radius:50%;font-size:16px;transition:background .15s,transform .12s,color .15s,border-color .15s}.icon-circle-button:hover{background:var(--border)}.icon-circle-button:active{transform:scale(.94)}.icon-circle-button.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.mode-toggle{background:#7878801f;border-radius:8px;grid-auto-columns:1fr;grid-auto-flow:column;gap:2px;width:max-content;margin:0 0 20px;padding:0;display:inline-grid}.mode-toggle button{height:var(--control-height);box-sizing:border-box;letter-spacing:-.005em;cursor:pointer;min-width:96px;color:var(--text);white-space:nowrap;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:0 16px;font-size:14px;font-weight:590;transition:background .15s,box-shadow .15s,color .15s;display:flex}.mode-toggle button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f,0 1px 1px #00000014}.mode-toggle.wrap{gap:var(--space-2);background:0 0;flex-wrap:wrap;width:auto;max-width:100%;display:flex}.mode-toggle.wrap button{border:1px solid var(--border);background:var(--surface);border-radius:999px;flex:none;min-width:0}.mode-toggle.wrap button:hover{background:#7878801f}.mode-toggle.wrap button.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);box-shadow:none}.language-toggle{margin:0}.language-toggle button{letter-spacing:.02em;padding:7px 12px;font-size:12px;font-weight:700}.audio-input-settings{flex-direction:column;display:flex}.audio-input-settings .settings-field+.settings-field{margin-top:16px}.audio-input-gain-slider{width:100%;accent-color:var(--accent)}.audio-input-meter{background:var(--bg);border:1px solid var(--border);border-radius:999px;width:100%;height:10px;overflow:hidden}.audio-input-meter-fill{background:var(--accent);height:100%;transition:width 50ms linear}.audio-input-meter-fill.clipping{background:var(--danger)}.audio-input-test-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;text-transform:none;letter-spacing:normal;border-radius:999px;align-self:flex-start;margin-top:8px;padding:6px 14px;font-size:12px;font-weight:590}.audio-input-test-btn:hover{background:#78788024}.audio-input-error{color:var(--danger);opacity:1;margin-top:4px;display:block}.keyboard-shortcuts-settings{flex-direction:column;gap:4px;width:100%;display:flex}.shortcut-category{flex-direction:column;gap:2px;margin-top:6px;display:flex}.shortcut-category-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0 0 2px;font-size:11px;font-weight:650}.shortcut-row{flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;display:flex}.shortcut-row-label{color:var(--text);text-transform:none;letter-spacing:normal;flex:140px;font-size:13px;font-weight:500}.shortcut-row-key{border:1px solid var(--border);background:var(--bg);min-width:92px;color:var(--text);cursor:pointer;text-align:center;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:590}.shortcut-row-key:hover{background:#78788024}.shortcut-row-key.recording{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}.shortcut-row-reset{width:26px;height:26px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;display:flex}.shortcut-row-reset:hover{background:#78788024}.shortcut-row-error{color:var(--danger);flex-basis:100%;font-size:11px}.shortcut-actions-row{margin-top:8px}.shortcut-reset-all{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:590}.shortcut-reset-all:hover{background:#78788024}.settings-panel{position:relative}.settings-gear{font-size:27px}.settings-drawer-scrim{z-index:60;opacity:0;pointer-events:none;background:#00000052;transition:opacity .22s;position:fixed;inset:0}.settings-drawer-scrim.open{opacity:1;pointer-events:auto}.settings-drawer{z-index:61;gap:var(--space-3);background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);width:min(380px,100vw);max-height:calc(100svh - 160px);padding:var(--space-2) var(--space-4) var(--space-3);box-shadow:var(--shadow-lg);pointer-events:none;border-bottom-left-radius:20px;flex-direction:column;transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.settings-drawer.open{pointer-events:auto;transform:translate(0)}.settings-drawer-header{justify-content:space-between;align-items:center;display:flex}.settings-drawer-title{margin:0}.settings-drawer-close{width:26px;height:26px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;line-height:1;transition:background .15s;display:flex}.settings-drawer-close:hover{background:#78788024}.settings-drawer-body{flex-direction:column;gap:4px;display:flex}.settings-drawer-body>.settings-field{text-transform:none;letter-spacing:normal;color:var(--text);flex-flow:wrap;align-items:center;gap:12px;padding:7px 0;font-size:13px;font-weight:590}.settings-drawer-body>.settings-field+.settings-field{border-top:1px solid var(--border);margin-top:0}.settings-drawer-body>.settings-field>.settings-field-label{flex:0 0 92px}.settings-drawer-body>.settings-field select,.settings-drawer-body>.settings-field input[type=text],.settings-drawer-body>.settings-field input[type=password]{flex:140px;width:auto;min-width:140px}.settings-drawer-body>.settings-field .settings-attribution{flex-basis:100%}.settings-drawer-body .audio-input-settings .settings-field{text-transform:uppercase;letter-spacing:.02em;color:var(--text-secondary);border-top:none;flex-flow:column;align-items:stretch;padding:0;font-size:12px;font-weight:590}.settings-drawer-body .audio-input-settings .settings-field select{width:100%}.settings-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:8px;font-size:12px;font-weight:590;display:flex}.settings-field+.settings-field{margin-top:16px}.settings-field .mode-toggle{margin:0}.settings-field select,.settings-field input[type=text],.settings-field input[type=password]{text-transform:none;letter-spacing:normal;border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:9px;padding:8px 10px;font-size:13px;font-weight:500}.youtube-api-key-input{-webkit-text-security:disc}.settings-drawer-subtitle{border-top:1px solid var(--border);margin:4px 0 0;padding-top:12px;font-size:13px}.settings-field select:focus,.settings-field input[type=text]:focus,.settings-field input[type=password]:focus{border-color:var(--accent);outline:none}.settings-attribution{text-transform:none;letter-spacing:normal;color:var(--text-secondary);opacity:.75;font-size:10px;font-weight:400;line-height:1.4}.instrument-icon-image{width:1em;height:1em;display:block}.bass-icon-image{object-fit:contain;width:1em;height:1em;display:block}.instrument-toggle{max-width:100%;margin:0}.instrument-toggle button{white-space:nowrap;align-items:center;gap:4px;min-width:0;padding:7px 11px;font-size:12px;font-weight:590;display:flex}.instrument-toggle-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}.instrument-toggle-icon svg,.instrument-toggle-icon img{width:16px;height:16px;display:block}.guitar-tuner{background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);border:1px solid var(--border);width:100%;max-width:360px;box-shadow:var(--shadow-sm);text-align:center;border-radius:22px;flex-direction:column;align-items:center;gap:16px;margin:0 auto;padding:16px;display:flex}.guitar-tuner-screen{background:radial-gradient(120% 140% at 50% 0,#1c1e1c 0%,#0a0b0a 70%);border:1px solid #000;border-radius:14px;flex-direction:column;align-items:center;gap:10px;width:100%;padding:20px 16px 16px;transition:box-shadow .2s;display:flex;position:relative;box-shadow:inset 0 2px 6px #0009,inset 0 0 0 1px #ffffff0a}.guitar-tuner-screen.zone-in-tune{box-shadow:inset 0 2px 6px #0009,inset 0 0 0 1px #ffffff0a,0 0 18px #34c75959}.guitar-tuner-note-row{justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.guitar-tuner-note{letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#4a4f4a;text-shadow:none;font-size:76px;font-weight:800;line-height:1;transition:color .15s,text-shadow .15s}.zone-off .guitar-tuner-note{color:#ff453a;text-shadow:0 0 18px #ff453aa6}.zone-close .guitar-tuner-note{color:#ffd60a;text-shadow:0 0 18px #ffd60a99}.zone-in-tune .guitar-tuner-note{color:#34ff6b;text-shadow:0 0 20px #34ff6bbf}.guitar-tuner-flat-arrow,.guitar-tuner-sharp-arrow{color:#3a3d3a;font-size:22px;font-weight:700;transition:color .15s,text-shadow .15s}.guitar-tuner-flat-arrow.active,.guitar-tuner-sharp-arrow.active{color:#ff453a;text-shadow:0 0 10px #ff453ab3}.guitar-tuner-meter{justify-content:center;align-items:flex-end;gap:3px;width:100%;height:26px;padding:0 4px;display:flex}.guitar-tuner-segment{background:#2a2c2a;border-radius:2px;flex:1 1 0;min-width:0;height:40%;transition:height .12s,background .12s,box-shadow .12s}.guitar-tuner-segment.center{background:#4a4f4a;height:100%}.guitar-tuner-segment.lit{background:#ff453a;height:85%;box-shadow:0 0 6px #ff453a8c}.guitar-tuner-segment.lit:nth-child(5),.guitar-tuner-segment.lit:nth-child(6),.guitar-tuner-segment.lit:nth-child(7),.guitar-tuner-segment.lit:nth-child(8),.guitar-tuner-segment.lit:nth-child(9),.guitar-tuner-segment.lit:nth-child(10),.guitar-tuner-segment.lit:nth-child(11){background:#ffd60a;box-shadow:0 0 6px #ffd60a8c}.guitar-tuner-segment.center.lit,.zone-in-tune .guitar-tuner-segment.lit{background:#34ff6b;height:100%;box-shadow:0 0 8px #34ff6bb3}.guitar-tuner-frequency{color:#6b706b;font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:13px}.guitar-tuner-in-tune-badge{letter-spacing:.03em;text-transform:uppercase;color:#34ff6b;opacity:0;height:16px;font-size:12px;font-weight:700;line-height:16px;transition:opacity .18s}.guitar-tuner-in-tune-badge.visible{opacity:1}.guitar-tuner-status{height:32px;color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:13px;line-height:16px;display:-webkit-box;overflow:hidden}.guitar-tuner-toggle{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:980px;padding:10px 24px;font-size:15px;font-weight:590}.tuner-bar{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--text);cursor:pointer;border-radius:980px;align-items:center;gap:6px;width:100%;min-width:0;padding:5px 8px 5px 9px;transition:background .15s;display:inline-flex;position:relative}.tuner-bar:hover{background:#7878801f}.tuner-bar:active{background:#7878802e}.tuner-bar-icon{flex-shrink:0;font-size:13px;line-height:1}.tuner-bar-label{text-align:start;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:12px;font-weight:590;overflow:hidden}.tuner-bar-chevron{color:var(--text-secondary);flex-shrink:0;font-size:14px;transition:transform .15s}.tuner-bar:hover .tuner-bar-chevron{transform:translate(2px)}.tuner-drawer-scrim{z-index:40;opacity:0;pointer-events:none;background:#00000052;transition:opacity .22s;position:fixed;inset:0}.tuner-drawer-scrim.open{opacity:1;pointer-events:auto}.tuner-drawer{z-index:41;gap:var(--space-3);background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);width:min(360px,100vw);max-height:calc(100svh - 160px);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-lg);pointer-events:none;border-bottom-left-radius:20px;flex-direction:column;transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.tuner-drawer.open{pointer-events:auto;transform:translate(0)}.tuner-drawer-header{justify-content:space-between;align-items:center;display:flex}.tuner-drawer-title{margin:0}.tuner-drawer-close{width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;line-height:1;transition:background .15s;display:flex}.tuner-drawer-close:hover{background:#78788024}.tuner-drawer-body{justify-content:center;display:flex}.tuner-drawer-body .guitar-tuner{background:0 0;border:none;max-width:100%;padding:0}@media (width<=480px){.tuner-drawer{left:50%;right:auto;top:calc(env(safe-area-inset-top,0px) + 12px);max-height:calc(100svh - env(safe-area-inset-top,0px) - 100px);border-left:none;border:1px solid var(--border);opacity:0;border-radius:20px;width:min(340px,100vw - 32px);transition:transform .22s,opacity .22s;transform:translate(-50%,-16px)}.tuner-drawer.open{opacity:1;transform:translate(-50%)}}.info-tooltips-toggle-group{display:inline-flex;position:relative}.info-tooltips-toggle-glyph{display:block}button.info-tooltips-toggle.active{background:var(--surface);border-color:var(--border);color:var(--accent)}button.info-tooltips-toggle.active:hover{background:var(--border)}.app-shell{height:100svh;display:flex;overflow:hidden}.app-drawer-area{display:block}.app-drawer-trigger{top:calc(var(--space-4) + env(safe-area-inset-top,0px));z-index:42;border:1px solid var(--border);background:var(--surface);width:44px;height:44px;box-shadow:var(--shadow-sm);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;transition:background .15s,transform .12s,opacity .15s;display:flex;position:fixed;left:20px}.app-drawer-trigger:hover{background:var(--border)}.app-drawer-trigger:active{transform:scale(.94)}.app-drawer-trigger-bar{background:var(--text);border-radius:1px;width:18px;height:2px}.app-drawer-scrim{z-index:40;background:#00000052;transition:opacity .22s;position:fixed;inset:0}.app-drawer{width:var(--sidebar-width);z-index:41;background:var(--surface);border-right:1px solid var(--border);padding:var(--space-6) var(--space-3);gap:var(--space-6);box-shadow:var(--shadow-lg);flex-direction:column;transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;left:0}.app-drawer-header{justify-content:space-between;align-items:center;gap:var(--space-2);padding:0 0 0 var(--space-3);display:flex}.app-drawer-close{width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;line-height:1;transition:background .15s;display:flex}.app-drawer-close:hover{background:#78788024}.app-sidebar-brand{align-items:center;gap:var(--space-2);padding:0 var(--space-3);display:flex}.app-sidebar-brand-icon{justify-content:center;align-items:center;font-size:22px;line-height:1;display:inline-flex}.app-sidebar-brand-text{letter-spacing:-.01em;color:var(--text);font-size:15px;font-weight:650}.app-sidebar-nav{gap:var(--space-1);flex-direction:column;display:flex}.app-nav-item{justify-content:flex-start;align-items:center;gap:var(--space-3);width:100%;padding:10px var(--space-3);color:var(--text);letter-spacing:-.005em;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:12px;font-size:15px;font-weight:590;transition:background .15s,color .15s;display:flex}.app-nav-item-icon{flex-shrink:0;justify-content:center;align-items:center;width:22px;font-size:17px;display:inline-flex}.app-nav-item:hover{background:#7878801f}.app-nav-item.active{background:var(--accent-bg);color:var(--accent)}.app-sidebar-top-controls{align-items:center;gap:var(--space-2);padding:0 var(--space-3);flex-wrap:wrap;display:flex}.app-sidebar-metronome{min-height:0;padding:0 var(--space-3);align-items:stretch;gap:var(--space-2);flex-direction:row;margin-top:auto;display:flex;overflow-y:auto}.app-sidebar-metronome>*{flex:1 1 0;min-width:0}.app-mobile-brand,.app-mobile-settings{display:none}.app-mobile-settings-icons{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.app-content{flex-direction:column;flex:1;min-width:0;height:100svh;display:flex;overflow:hidden}.app-section-content{min-height:0;padding:60px var(--space-8) var(--space-2) 72px;flex:auto;overflow-y:auto}.app-stage-anchor{border-top:1px solid var(--border);background:var(--bg);padding:var(--space-2) var(--space-8) var(--space-2);flex:none}.app-bottom-tabs,.app-mobile-metronome{display:none}@media (width<=899px){.app-drawer-trigger,.app-drawer-scrim,.app-drawer{display:none}.app-content{padding-bottom:calc(var(--bottom-tabs-height) + var(--mobile-metronome-height) + env(safe-area-inset-bottom,0px))}.app-section-content{padding:60px var(--space-4) var(--space-4)}.app-stage-anchor{padding:var(--space-2) var(--space-4)}.app-mobile-settings{top:calc(var(--space-4) + env(safe-area-inset-top,0px));right:var(--space-4);z-index:6;flex-direction:column;align-items:flex-end;gap:6px;display:flex;position:fixed}.app-mobile-metronome{justify-content:center;align-items:stretch;gap:var(--space-2);padding:var(--space-2) var(--space-4);left:0;right:0;bottom:calc(var(--bottom-tabs-height) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);z-index:5;flex-direction:row;min-height:0;max-height:70vh;display:flex;position:fixed;overflow-y:auto}.app-mobile-metronome>*{flex:1 1 0;min-width:0;max-width:220px}.app-bottom-tabs{height:calc(var(--bottom-tabs-height) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:5;display:flex;position:fixed;bottom:0;left:0;right:0}.app-bottom-tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:2px;padding-top:14px;font-size:11px;font-weight:590;display:flex}.app-bottom-tab-icon{justify-content:center;align-items:center;font-size:19px;line-height:1;display:inline-flex}.app-bottom-tab.active{color:var(--accent)}}@media (width<=480px){.app-bottom-tab[data-section=songs]{display:none}.app-mobile-brand{top:calc(var(--space-4) + env(safe-area-inset-top,0px));left:var(--space-4);z-index:6;align-items:center;display:flex;position:fixed}.app-mobile-settings-icons{flex-direction:row}.app-section-content{padding-top:150px}.app-content{padding-bottom:calc(var(--bottom-tabs-height) + 60px + env(safe-area-inset-bottom,0px))}.app-mobile-metronome .metronome-bar,.app-mobile-metronome .tuner-bar{box-sizing:border-box;width:100%;height:44px}}.fretboard-scroll{justify-content:center;max-width:100%;padding:0 36px;display:flex;position:relative}.fretboard-scroll-quiz{padding:0 4px}.fretboard-svg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:auto;max-width:100%;height:auto;display:block}.fretboard-svg-pannable{touch-action:pan-y;cursor:grab}.fretboard-svg-pannable:active{cursor:grabbing}.fretboard-page-btn{z-index:2;border:1px solid var(--border);background:var(--surface);width:44px;height:44px;color:var(--text);cursor:pointer;box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;font-size:17px;line-height:1;transition:background .15s,transform .12s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.fretboard-page-btn:hover{background:var(--border)}.fretboard-page-btn:active{transform:translateY(-50%)scale(.92)}.fretboard-page-prev{left:6px}.fretboard-page-next{right:6px}.fretboard-wood{filter:drop-shadow(0 6px 14px #00000059)}.fretboard-binding{fill:var(--fret-binding)}.fretboard-sheen{pointer-events:none;mix-blend-mode:overlay}.fret-wire{filter:drop-shadow(.5px 0 #00000059)}.nut-bar{filter:drop-shadow(0 1px 1px #0000004d)}.string-line{stroke:#00000026;stroke-width:.5px}.fret-inlay{filter:drop-shadow(0 1px 1.5px #0006)}.fret-number{fill:var(--text-secondary);font-size:14.5px;font-weight:500}.string-label{fill:var(--text-secondary);font-size:14.5px;font-weight:590}.mute-open-marker{fill:var(--danger);font-size:18px;font-weight:700}.chord-dot{stroke:#00000026;stroke-width:1px;transition:cx .3s,cy .3s,x .3s,y .3s,fill .2s}.chord-dot-label{fill:#fff;pointer-events:none;font-size:14.5px;font-weight:600;transition:x .3s,y .3s}.chord-dot-label-open{fill:var(--fret-inlay-pearl)}.fretboard-capo-bar{fill:url(#capo-rubber);stroke:#1c1c1e;stroke-width:1.5px;filter:drop-shadow(0 2px 4px #0000008c)}.fretboard-capo-sheen{fill:#fff;opacity:.55}.fretboard-capo-label{fill:var(--text-secondary);font-size:13px;font-weight:700}.voice-leading-dot{stroke:#00000026;stroke-width:1px;transition:cx .35s,cy .35s,fill .2s}.voice-leading-dot-label{transition:x .35s,y .35s}.voice-leading-pivot-ring{stroke:var(--voice-leading-pivot-color,#ffd60a);stroke-width:2px;opacity:.6;transition:cx .35s,cy .35s}.lick-dot{stroke:#0003;stroke-width:1px}.lick-dot-label{fill:#fff;pointer-events:none;font-size:12px;font-weight:700}.lick-technique-glyph{fill:#fff;pointer-events:none;font-size:11px;font-style:italic;font-weight:700}.playable-note{cursor:pointer}.playable-note.playing .lick-dot{transform-box:fill-box;transform-origin:50%;transform:scale(1.25)}.lick-dot-playing-ring{stroke:var(--lick-marker-color,#a2845e);stroke-width:2px;opacity:.55;pointer-events:none;animation:.4s ease-out lick-note-pulse}@keyframes lick-note-pulse{0%{r:14px;opacity:.8}to{r:22px;opacity:0}}.playable-note:hover .chord-dot,.playable-note:focus-visible .chord-dot,.playable-note:hover .lick-dot,.playable-note:focus-visible .lick-dot{transform-box:fill-box;transform-origin:50%;transform:scale(1.12)}.playable-note:focus-visible{outline:none}.playable-note:focus-visible .chord-dot,.playable-note:focus-visible .lick-dot{stroke:var(--accent);stroke-width:2px}.landing-note-ring{stroke-width:2.5px;stroke-dasharray:4 3;opacity:.85}.landing-note-label{fill:var(--text-secondary);pointer-events:none;font-size:11px;font-weight:700}.playable-note:hover .landing-note-ring,.playable-note:focus-visible .landing-note-ring{opacity:1;stroke-width:3.5px}.heat-map-dot{pointer-events:none}.heat-map-scale{fill:var(--accent)}.heat-map-passing{fill:#af52de}.heat-map-avoid{fill:var(--danger);filter:drop-shadow(0 0 4px var(--danger))}.roadmap-line{stroke:var(--text-secondary);stroke-width:1.5px;stroke-dasharray:3 2;opacity:.6}.roadmap-pin{stroke:var(--fretboard-bg);stroke-width:1.5px}.roadmap-label-connector{stroke:var(--text-secondary);stroke-width:1px;opacity:.5}.roadmap-chord-label{fill:var(--text);pointer-events:none;font-size:17px;font-weight:700}.roadmap-chord-label-halo{fill:none;stroke:var(--fretboard-bg,var(--surface));stroke-width:4px;stroke-linejoin:round;paint-order:stroke;pointer-events:none;font-size:17px;font-weight:700}.roadmap-transition-label{fill:var(--text-secondary);pointer-events:none;font-size:13px;font-weight:600}.roadmap-transition-label-halo{fill:none;stroke:var(--fretboard-bg,var(--surface));stroke-width:4px;stroke-linejoin:round;paint-order:stroke;pointer-events:none;font-size:13px;font-weight:600}.drill-dot{stroke:#00000026;stroke-width:1px}.drill-dot-all,.drill-dot-start{fill:var(--accent)}.drill-dot-current{fill:var(--danger)}.drill-dot-next{fill:none;stroke:var(--accent);stroke-width:2px;stroke-dasharray:3 2}.drill-dot-past{fill:var(--text-secondary)}.drill-dot-label{fill:#fff;pointer-events:none;font-size:14px;font-weight:700}.drill-dot-current-ring{stroke:var(--danger);stroke-width:2px;opacity:.55;pointer-events:none;animation:.4s ease-out lick-note-pulse}.fretboard-action{transition:opacity .2s}.fretboard-action-dot{stroke:#00000026;stroke-width:1px}.fretboard-action-arrow{fill:none;stroke-width:2.5px;stroke-linecap:round}.fretboard-action-hammeron .fretboard-action-arrow,.fretboard-action-pulloff .fretboard-action-arrow{stroke-dasharray:5 3}.fretboard-action-target-ring{fill:none;stroke-width:2.5px;opacity:.7}.fretboard-bend-label{fill:var(--technique-action-color,#ff2d55);pointer-events:none;font-size:12px;font-weight:700}.scale-dot{fill:var(--text-secondary);stroke:#00000026;stroke-width:1px;opacity:.85}.scale-dot-root{fill:var(--scale-root-color,var(--accent));stroke:#00000026;stroke-width:1px}.scale-dot-blue{fill:#0a84ff;stroke:#00000026;stroke-width:1px}.scale-dot-label{fill:#fff;pointer-events:none;font-size:11px;font-weight:700}.scale-dot-side-from{stroke:#a855f7;stroke-width:2.5px}.scale-dot-side-to{stroke:#34c759;stroke-width:2.5px}.quiz-hit-target{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.quiz-hit-target-touch{fill:#0000;pointer-events:all}.quiz-hit-target-dot{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:2px;opacity:.9;transition:fill-opacity .15s,opacity .15s}.quiz-hit-target:hover .quiz-hit-target-dot,.quiz-hit-target:focus-visible .quiz-hit-target-dot,.quiz-hit-target:active .quiz-hit-target-dot{fill-opacity:.34;opacity:1}.quiz-reveal-dot{fill:var(--accent);opacity:.5;pointer-events:none}.quiz-reveal-dot.correct{fill:#34c759;opacity:.75}.quiz-reveal-dot.incorrect{fill:#ffb020;opacity:.85}.quiz-feedback-correct,.quiz-feedback-incorrect{pointer-events:none;fill:none;stroke-width:4px;animation:.6s ease-out quiz-feedback-pulse}.quiz-feedback-correct{stroke:#34c759}.quiz-feedback-incorrect{stroke:var(--danger)}@keyframes quiz-feedback-pulse{0%{r:12px;opacity:1}to{r:26px;opacity:0}}.piano-keyboard{flex-direction:column;gap:0;max-width:100%;display:flex}.piano-panel{background:linear-gradient(115deg,#ffffff1a 0%,#fff0 20% 60%,#ffffff0d 78%,#fff0 92%),linear-gradient(#46464a 0%,#2a2a2d 45%,#1c1c1e 80%,#151516 100%);border:1px solid #0a0a0b;border-bottom:none;border-radius:12px 12px 0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;display:flex;box-shadow:inset 0 1px #ffffff1f,inset 0 -3px 5px #0000008c,0 4px 10px #00000059}.piano-keyboard-connector{background:linear-gradient(#0c0c0d 0%,#1a1a1c 45%,#0c0c0d 100%);border-left:1px solid #0a0a0b;border-right:1px solid #0a0a0b;height:7px;box-shadow:inset 0 2px 3px #000000b3,inset 0 -1px #ffffff14}.piano-panel-sound,.piano-panel-metronome{align-items:stretch;gap:6px;display:flex}.piano-panel-volume{align-items:center;gap:6px;display:flex}.piano-panel-volume-icon{appearance:none;cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:2px;display:flex}.piano-panel-volume-icon:hover{background:#ffffff14}.piano-panel-slider{appearance:none;cursor:pointer;background:linear-gradient(#111 0%,#000 100%);border-radius:999px;width:80px;height:4px;box-shadow:inset 0 1px 2px #000000b3}.piano-panel-slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(#666669 0%,#313133 100%);border:1px solid #050506;border-radius:50%;width:14px;height:14px;box-shadow:inset 0 1px #fff3,0 1px 2px #00000080}.piano-panel-slider::-moz-range-thumb{background:linear-gradient(#666669 0%,#313133 100%);border:1px solid #050506;border-radius:50%;width:14px;height:14px;box-shadow:inset 0 1px #fff3,0 1px 2px #00000080}.piano-panel-transport{border-radius:999px;padding:6px 10px}.piano-panel-transport .piano-panel-btn-icon{font-size:13px}.piano-panel-chevron{appearance:none;color:#e8e8ea;cursor:pointer;background:linear-gradient(#58585c 0%,#3a3a3d 55%,#29292b 100%);border:1px solid #050506;border-radius:5px;min-width:26px;font-size:15px;line-height:1;transition:transform 50ms,box-shadow 50ms;box-shadow:inset 0 1px #ffffff26,0 2px 2px #0006}.piano-panel-chevron:hover{background:linear-gradient(#666669 0%,#444447 55%,#313133 100%)}.piano-panel-chevron:active{transform:translateY(1px);box-shadow:inset 0 2px 3px #00000080}.piano-panel-lcd{background:linear-gradient(#1a2b1c 0%,#0e1c10 100%);border:1px solid #060a06;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;min-width:128px;padding:3px 10px;display:flex;box-shadow:inset 0 2px 4px #0009}.piano-panel-lcd-value{letter-spacing:.03em;text-align:center;color:#7cff8c;text-shadow:0 0 6px #7cff8c8c;white-space:nowrap;font-family:Courier New,ui-monospace,monospace;font-size:12px;font-weight:700}.piano-panel-buttons{flex-wrap:wrap;gap:6px;display:flex}.piano-panel-lcd-clickable{cursor:pointer}.piano-panel-lcd-clickable:hover{box-shadow:inset 0 2px 4px #0009,0 0 0 1px #7cff8c59}.piano-panel-bpm-input{appearance:none;letter-spacing:.03em;text-align:center;color:#7cff8c;text-shadow:0 0 6px #7cff8c8c;background:0 0;border:none;outline:none;width:52px;font-family:Courier New,ui-monospace,monospace;font-size:12px;font-weight:700}.piano-panel-bpm-input::-webkit-inner-spin-button{appearance:none;margin:0}.piano-panel-bpm-input::-webkit-outer-spin-button{appearance:none;margin:0}.piano-panel-btn{appearance:none;color:#e8e8ea;cursor:pointer;background:linear-gradient(#4a4a4d 0%,#313133 55%,#232325 100%);border:1px solid #050506;border-radius:999px;align-items:center;gap:6px;padding:6px 12px 6px 8px;font-size:11px;font-weight:600;transition:background .15s,transform 50ms,box-shadow 50ms;display:flex;box-shadow:inset 0 1px #ffffff1f,0 2px 2px #0006}.piano-panel-btn:hover:not(:disabled){background:linear-gradient(#565659 0%,#3a3a3d 55%,#29292b 100%)}.piano-panel-btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 3px #00000080}.piano-panel-btn:disabled{cursor:default;opacity:.55}.piano-panel-led{background:#4a1414;border-radius:50%;flex-shrink:0;width:7px;height:7px;transition:background .15s,box-shadow .15s;box-shadow:inset 0 0 1px #0009}.piano-panel-btn.active .piano-panel-led{background:#34c759;box-shadow:0 0 5px 1px #34c759}.piano-panel-btn.warn .piano-panel-led{background:var(--danger);box-shadow:0 0 5px 1px var(--danger)}.piano-panel-btn-icon{font-size:12px;line-height:1}.piano-panel-btn-label{white-space:nowrap}@media (width<=640px){.piano-panel{justify-content:center}.piano-panel-btn-label{display:none}}.piano-key.midi-held{box-shadow:inset 0 0 0 3px var(--accent)}.piano-keyboard-viewport{max-width:100%;position:relative}.piano-keyboard-scroll{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;cursor:grab;scrollbar-width:thin;touch-action:pan-x;overflow:auto hidden}.piano-keyboard-scroll:active{cursor:grabbing}.piano-keyboard-keys{display:flex;position:relative}.piano-white-key-col{scroll-snap-align:start;flex-shrink:0;position:relative}.piano-key{appearance:none;cursor:pointer;touch-action:none;font:inherit;-webkit-user-select:none;user-select:none;border:none;padding:0;transition:background-color .12s,transform 80ms}.piano-key.disabled{cursor:default}.piano-key-white{background:#fdfdfb;border:1px solid #cfcfd2;border-top:none;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;width:100%;height:100%;padding-bottom:8px;transition:transform 50ms cubic-bezier(.3,.9,.4,1),box-shadow 50ms,background-color .12s;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 2px #0000001f}.piano-key-white:after{content:"";pointer-events:none;background:linear-gradient(#ffffffa6 0%,#fff0 18%,#00000005 88%,#00000014 100%);transition:background 50ms;position:absolute;inset:0}.piano-key-white:hover:not(.disabled){background:var(--accent-bg)}.piano-key-white:active:not(.disabled),.piano-key-white.active{transform-origin:bottom;transform:translateY(2px)scaleY(.985);box-shadow:inset 0 2px 3px #0000002e}.piano-key-white:active:not(.disabled):after,.piano-key-white.active:after{background:linear-gradient(#00000024 0%,#00000005 45%,#ffffff1f 100%)}.piano-key-middle-c{border-top:2px solid var(--accent)}.piano-key-white:focus-visible,.piano-key-black:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.piano-key-black{z-index:1;border:1px solid var(--surface);background:#1c1c1e;border-radius:0 0 3px 3px;justify-content:center;align-items:flex-end;padding-bottom:6px;transition:transform 50ms cubic-bezier(.3,.9,.4,1),box-shadow 50ms,background-color .12s;display:flex;position:absolute;top:0;overflow:hidden;box-shadow:0 3px 3px #00000059}.piano-key-black:after{content:"";pointer-events:none;background:linear-gradient(#ffffff38 0%,#fff0 25%,#00000040 100%);transition:background 50ms;position:absolute;inset:0}.piano-key-black:hover:not(.disabled){background:var(--accent)}.piano-key-black:active:not(.disabled),.piano-key-black.active{transform-origin:bottom;transform:translateY(1.5px)scaleY(.96);box-shadow:inset 0 2px 3px #0006}.piano-key-black:active:not(.disabled):after,.piano-key-black.active:after{background:linear-gradient(#0000004d 0%,#ffffff0d 100%)}.piano-key-black-label{color:#ffffffd9;pointer-events:none;font-size:8px;font-weight:700}.piano-key-label{color:var(--text-secondary);pointer-events:none;flex-direction:column;align-items:center;gap:2px;font-size:9px;font-weight:600;display:flex}.piano-key-label-middle-c{color:var(--accent);font-weight:700}.piano-key-white.active .piano-key-label{color:#fff;text-shadow:0 1px 2px #00000073}.piano-key-finger{background:var(--accent);color:#fff;pointer-events:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:700;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.piano-key-hint{color:var(--text-secondary);pointer-events:none;letter-spacing:.02em;background:#78788038;border-radius:3px;padding:1px 3px;font-size:8px;font-weight:700;position:absolute;top:4px;left:4px}.piano-key-white.active .piano-key-hint{color:#fff;background:#ffffff59}.piano-key-hint-black{color:#fffc;background:#ffffff1f}.piano-key-c-dot{background:var(--accent);opacity:.6;border-radius:50%;width:5px;height:5px}.piano-key-label-middle-c .piano-key-c-dot{opacity:1}.piano-keyboard-nav{z-index:2;border:1px solid var(--border);background:var(--surface);width:32px;height:32px;color:var(--text);cursor:pointer;opacity:.6;box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;font-size:15px;line-height:1;transition:opacity .15s,background .15s,transform .12s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.piano-keyboard-nav:hover{opacity:1;background:var(--border)}.piano-keyboard-nav:active{transform:translateY(-50%)scale(.92)}.piano-keyboard-nav-left{left:4px}.piano-keyboard-nav-right{right:4px}.stage-legend-reserve{align-items:center;min-height:20px;display:flex}.bpm-wheel{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background:radial-gradient(circle at 35% 30%,#fff,#e4e4e8 70%,#d4d4d9 100%);border-radius:50%;flex-shrink:0;width:128px;height:128px;position:relative;box-shadow:inset 0 1px 2px #ffffffe6,inset 0 -2px 6px #00000014,0 2px 8px #0000001f}.bpm-wheel:active{cursor:grabbing}.bpm-wheel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.bpm-wheel-center{cursor:pointer;background:#fafafa;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:72px;height:72px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 3px #0000001f,0 1px 1px #fff9}.bpm-wheel-value{letter-spacing:-.02em;color:#1d1d1f;font-size:24px;font-weight:700;line-height:1.1}.bpm-wheel-unit{letter-spacing:.06em;color:#8e8e93;font-size:11px;font-weight:600}:root[data-theme=dark] .bpm-wheel{background:radial-gradient(circle at 35% 30%,#48484a,#2c2c2e 70%,#1c1c1e 100%);box-shadow:inset 0 1px 2px #ffffff14,inset 0 -2px 6px #0006,0 2px 8px #0006}:root[data-theme=dark] .bpm-wheel-center{background:#1c1c1e;box-shadow:inset 0 1px 3px #00000080,0 1px 1px #ffffff0a}:root[data-theme=dark] .bpm-wheel-value{color:#f5f5f7}.metronome{box-sizing:border-box;border:1px solid var(--border);background:linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);width:100%;box-shadow:var(--shadow-md);border-radius:20px;margin:0;padding:16px}.metronome-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;font-size:12px;font-weight:650}.metronome-top-row{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:10px;display:flex}.metronome-top-left{flex-direction:column;gap:10px;min-width:0;display:flex}.metronome-beats{background:var(--bg);border:1px solid var(--border);border-radius:10px;gap:8px;width:fit-content;min-height:14px;padding:3px 9px;display:flex}.metronome-beat-dot{background:#7878802e;border:none;border-radius:50%;width:12px;height:12px;transition:background 60ms,transform 60ms,box-shadow 60ms;box-shadow:inset 0 1px 2px #0000001f}.metronome-beat-dot.accent{background:#78788052}.metronome-beat-dot.active{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);transform:scale(1.2)}.metronome-beat-dot.accent.active{background:var(--metronome-accent-beat,#34c759);box-shadow:0 0 0 3px color-mix(in srgb, var(--metronome-accent-beat,#34c759) 25%, transparent)}.metronome-control-grid{grid-template-columns:1fr 1fr;align-items:end;gap:8px;margin-bottom:6px;display:grid}.metronome-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;flex-direction:column;gap:4px;font-size:10px;font-weight:650;display:flex}.metronome-field input,.metronome-field select{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:9px;padding:5px 8px;font-size:13px;font-weight:500;transition:border-color .15s;box-shadow:inset 0 1px 2px #0000000a}.metronome-field input:focus,.metronome-field select:focus{border-color:var(--accent);outline:none}.metronome-field input[type=number]{width:70px}.metronome-volume-row{border-top:1px solid var(--border);align-items:center;gap:10px;margin-top:8px;padding-top:8px;display:flex}.metronome-volume-icon{border:1px solid var(--border);background:var(--bg);width:30px;height:30px;color:var(--text);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;line-height:1;transition:background .15s,transform .12s;display:flex;position:relative}.metronome-volume-icon:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.metronome-volume-icon:hover{background:var(--border)}.metronome-volume-icon:active{transform:scale(.96)}.metronome-volume-icon.muted{color:var(--danger)}.metronome-volume-slider[type=range]{appearance:none;cursor:pointer;background:0 0;flex:1;height:4px}.metronome-volume-slider[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,70%), var(--border) var(--fill,70%), var(--border) 100%);border-radius:999px;height:4px}.metronome-volume-slider[type=range]::-moz-range-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,70%), var(--border) var(--fill,70%), var(--border) 100%);border-radius:999px;height:4px}.metronome-volume-slider[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(#fdfdfd,#d8d8dc);border:1px solid #00000026;border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 1px 3px #00000059,inset 0 1px #fffc}.metronome-volume-slider[type=range]::-moz-range-thumb{cursor:pointer;background:linear-gradient(#fdfdfd,#d8d8dc);border:1px solid #00000026;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #00000059,inset 0 1px #fffc}.metronome-tap,.metronome-toggle{letter-spacing:-.005em;background:var(--border);color:var(--text);cursor:pointer;border:1px solid #0000;border-radius:980px;width:100%;height:30px;padding:0 16px;font-size:13px;font-weight:590;transition:background .15s,transform .12s,box-shadow .15s}.metronome-tap:hover,.metronome-toggle:hover{background:#78788038}.metronome-tap:active,.metronome-toggle:active{transform:scale(.96)}.metronome-toggle{background:var(--accent);color:#fff;width:100%;height:28px;box-shadow:var(--shadow-sm);margin-top:6px;font-size:14px}.metronome-toggle:hover{background:var(--accent-hover)}.metronome-toggle:active{transform:scale(.98)}.metronome-toggle.running{background:var(--danger)}.metronome-toggle.running:hover{background:var(--danger);opacity:.9}.metronome-drum-section{border-top:1px solid var(--border);flex-direction:column;gap:4px;margin-top:6px;padding-top:6px;display:flex}.metronome-source-switch{background:var(--bg);border:1px solid var(--border);border-radius:980px;gap:4px;width:fit-content;padding:3px;display:flex}.metronome-source-pill{letter-spacing:-.005em;height:22px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:980px;padding:0 11px;font-size:11px;font-weight:600;transition:background .15s,color .15s}.metronome-source-pill:hover{color:var(--text)}.metronome-source-pill.active{background:var(--accent);color:#fff}.metronome-style-field{max-width:220px}.metronome-fill-toggle{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;width:fit-content;font-size:12px;font-weight:600;display:inline-flex}.metronome-fill-toggle input{opacity:0;width:0;height:0;position:absolute}.metronome-fill-track{background:#7878803d;border-radius:999px;flex-shrink:0;width:34px;height:20px;transition:background .2s;position:relative}.metronome-fill-thumb{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s cubic-bezier(.2,.8,.3,1);position:absolute;top:2px;left:2px;box-shadow:0 2px 5px #00000047}.metronome-fill-toggle input:checked+.metronome-fill-track{background:#34c759}.metronome-fill-toggle input:checked+.metronome-fill-track .metronome-fill-thumb{transform:translate(14px)}.metronome-fill-toggle input:focus-visible+.metronome-fill-track{outline:2px solid var(--accent);outline-offset:2px}.metronome-mixer{flex-direction:column;gap:3px;display:flex}.metronome-mixer-channel{background:var(--bg);border:1px solid var(--border);border-radius:10px;align-items:center;gap:8px;padding:3px 8px;display:flex}.metronome-mixer-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;width:36px;font-size:10px;font-weight:650}.metronome-mixer-fader[type=range]{appearance:none;cursor:pointer;background:0 0;flex:1;height:4px}.metronome-mixer-fader[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,80%), var(--border) var(--fill,80%), var(--border) 100%);border-radius:999px;height:4px}.metronome-mixer-fader[type=range]::-moz-range-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,80%), var(--border) var(--fill,80%), var(--border) 100%);border-radius:999px;height:4px}.metronome-mixer-fader[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(#fdfdfd,#d8d8dc);border:1px solid #00000026;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 1px 3px #00000059,inset 0 1px #fffc}.metronome-mixer-fader[type=range]::-moz-range-thumb{cursor:pointer;background:linear-gradient(#fdfdfd,#d8d8dc);border:1px solid #00000026;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #00000059,inset 0 1px #fffc}.metronome-mixer-mute{cursor:pointer;opacity:.6;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:13px;line-height:1;transition:opacity .15s,background .15s;display:flex;position:relative}.metronome-mixer-mute:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.metronome-mixer-mute:hover{opacity:1;background:var(--border)}.metronome-mixer-mute.muted{opacity:1}.metronome-bar{background:var(--surface);border:1px solid var(--border);width:100%;min-width:0;box-shadow:var(--shadow-sm);color:var(--text);cursor:pointer;border-radius:980px;align-items:center;gap:6px;padding:5px 8px 5px 9px;transition:background .15s,border-color .15s;display:inline-flex;position:relative}.metronome-bar:hover{background:#7878801f}.metronome-bar:active{background:#7878802e}.metronome-bar-icon{color:var(--text-secondary);flex-shrink:0;align-items:center;display:inline-flex}.metronome-bar.running{border-color:var(--accent)}.metronome-bar.running .metronome-bar-icon{color:var(--accent)}.metronome-bar-bpm{color:var(--text);letter-spacing:-.01em;white-space:nowrap;text-align:start;flex:1;font-size:12px;font-weight:650}.metronome-bar-bpm-unit{color:var(--text-secondary);text-transform:uppercase;font-size:9px;font-weight:590}.metronome-bar-chevron{color:var(--text-secondary);flex-shrink:0;font-size:14px;transition:transform .15s}.metronome-bar:hover .metronome-bar-chevron{transform:translate(2px)}.metronome-drawer-scrim{z-index:40;opacity:0;pointer-events:none;background:#00000052;transition:opacity .22s;position:fixed;inset:0}.metronome-drawer-scrim.open{opacity:1;pointer-events:auto}.metronome-drawer{z-index:41;gap:var(--space-2);background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);width:min(380px,100vw);padding:var(--space-2) var(--space-4);box-shadow:var(--shadow-lg);pointer-events:none;border-bottom-left-radius:20px;flex-direction:column;transition:transform .26s cubic-bezier(.4,0,.2,1),max-height .2s;display:flex;position:fixed;top:0;right:0;transform:translate(100%)}.metronome-drawer.expanded{max-height:calc(100svh - 64px);overflow-y:auto}.metronome-drawer.open{pointer-events:auto;transform:translate(0)}.metronome-drawer>*{flex-shrink:0}.metronome-drawer-header{justify-content:space-between;align-items:center;display:flex}.metronome-drawer-title{margin:0}.metronome-drawer-close{width:26px;height:26px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;line-height:1;transition:background .15s;display:flex}.metronome-drawer-close:hover{background:#78788024}.metronome-drawer-body .metronome{box-shadow:none;background:0 0;border:none;border-radius:0;padding:0}@media (width<=480px){.metronome-drawer{left:50%;right:auto;top:calc(env(safe-area-inset-top,0px) + 12px);border-left:none;border:1px solid var(--border);opacity:0;border-radius:20px;width:min(340px,100vw - 32px);transition:transform .22s,opacity .22s,max-height .2s;transform:translate(-50%,-16px)}.metronome-drawer.open{opacity:1;transform:translate(-50%)}}.chord-input{flex-direction:column;flex:260px;gap:8px;width:100%;max-width:320px;display:flex}.chord-input label{color:var(--text-secondary);letter-spacing:-.005em;font-size:13px;font-weight:590}.chord-input input{height:var(--control-height);box-sizing:border-box;letter-spacing:-.01em;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);border-radius:14px;outline:none;padding:0 14px;font-size:18px;font-weight:500;transition:box-shadow .18s,border-color .18s}.chord-input input::placeholder{color:var(--text-secondary);opacity:.55;font-size:15px;font-weight:400}.chord-input input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}.compose-empty-state{flex-direction:column;gap:10px;margin:12px 0 20px;display:flex}.compose-empty-hint{color:var(--text-secondary);letter-spacing:-.005em;font-size:13px}.compose-empty-examples{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.compose-empty-examples-label{color:var(--text-secondary);letter-spacing:-.005em;font-size:13px;font-weight:590}.compose-empty-example-chip{letter-spacing:-.005em;border:1px dashed var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:980px;padding:7px 16px;font-size:14px;font-weight:590;transition:background .15s,border-color .15s,transform .12s}.compose-empty-example-chip:hover{border-color:var(--accent);background:#7878801f}.compose-empty-example-chip:active{transform:scale(.96)}.info-tooltip{align-items:center;display:inline-flex}.info-tooltip-trigger{width:16px;height:16px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-inline-start:4px;padding:0;font-size:14px;line-height:1;transition:color .15s,background .15s;display:inline-flex}.info-tooltip-trigger:hover,.info-tooltip-trigger:focus-visible{color:var(--accent);background:var(--accent-bg);outline:none}.info-tooltip-bubble{z-index:70;color:#f8f9fa;pointer-events:none;opacity:0;background:#0f172a;border:1px solid #ffffff1a;border-radius:8px;max-width:240px;padding:7px 10px;font-size:12.5px;font-weight:500;line-height:1.5;transition:opacity .12s;position:fixed;box-shadow:0 4px 14px #00000040}.info-tooltip-bubble.visible{opacity:1}.capo-input{flex-direction:row;flex:none;align-items:center;gap:6px;display:flex}.capo-input-label-row{align-items:center;display:inline-flex}.capo-input label{color:var(--text-secondary);letter-spacing:-.005em;white-space:nowrap;font-size:13px;font-weight:590}.capo-input input{width:44px;height:var(--control-height);box-sizing:border-box;border:1px solid var(--border);background:var(--surface);color:var(--text);text-align:center;appearance:textfield;border-radius:10px;outline:none;padding:0 8px;font-size:16px;font-weight:500;transition:box-shadow .18s,border-color .18s}.capo-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.capo-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.capo-input input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}.chord-chips{flex-direction:column;gap:12px;margin:12px 0 20px;display:flex}.chord-chips-row{flex-wrap:wrap;gap:8px;display:flex}.chord-chip{letter-spacing:-.005em;color:var(--text);cursor:pointer;background:#7878801f;border:none;border-radius:980px;padding:7px 16px;font-size:14px;font-weight:590;transition:background .15s,transform .12s}.chord-chip:hover{background:#78788038}.chord-chip:active{transform:scale(.96)}.chord-chip.active{color:#fff;box-shadow:var(--shadow-sm)}.chord-chip.invalid{border:1px dashed var(--danger);color:var(--danger);background:0 0}.chord-chip.invalid.active{color:var(--danger);background:0 0}.chord-chips-nav{align-items:center;gap:14px;display:flex}.chord-chips-nav-button{letter-spacing:-.005em;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer;border:none;border-radius:980px;padding:9px 18px;font-size:14px;font-weight:590;transition:transform .12s,background .12s}.chord-chips-nav-button:hover:not(:disabled){background:var(--border)}.chord-chips-nav-button:active:not(:disabled){transform:scale(.96)}.chord-chips-nav-button:disabled{opacity:.35;cursor:not-allowed}.chord-chips-nav-label{color:var(--text-secondary);font-size:14px;font-weight:500}.position-controls{flex-direction:column;gap:10px;margin:4px 0 20px;display:flex}.position-controls-nav{align-items:center;gap:14px;display:flex}.position-controls button{letter-spacing:-.005em;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer;border:none;border-radius:980px;padding:9px 18px;font-size:14px;font-weight:590;transition:transform .12s,box-shadow .12s,background .12s}.position-controls-nav button:hover:not(:disabled){background:var(--border)}.position-controls-nav button:active:not(:disabled){transform:scale(.96)}.position-controls-nav button:disabled{opacity:.35;cursor:not-allowed}.position-label{color:var(--text-secondary);font-size:14px;font-weight:500}.position-chips{flex-wrap:wrap;gap:6px;display:flex}.position-chip{min-width:26px;height:26px;color:var(--text);cursor:pointer;background:#7878801f;border:none;border-radius:980px;padding:0 8px;font-size:12px;font-weight:590;transition:background .15s,transform .12s}.position-chip:hover{background:#78788038}.position-chip:active{transform:scale(.9)}.position-chip.active{color:#fff;box-shadow:var(--shadow-sm)}.display-options-menu{display:inline-block}.display-options-heatmap{margin-top:2px}.display-options-trigger{background-color:var(--surface);height:36px;color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:980px;align-items:center;gap:6px;padding:0 16px;font-size:14px;font-weight:590;transition:background-color .15s,transform .12s;display:inline-flex}.display-options-trigger:hover{background-color:var(--border)}.display-options-trigger:active{transform:scale(.96)}.display-options-trigger.active{background-color:var(--accent-bg);color:var(--accent)}.display-options-divider{background:var(--border);height:1px;margin:2px 0}.display-options-drawer-scrim{z-index:40;opacity:0;pointer-events:none;background:#00000052;transition:opacity .22s;position:fixed;inset:0}.display-options-drawer-scrim.open{opacity:1;pointer-events:auto}.display-options-drawer{z-index:41;gap:var(--space-3);background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);width:min(380px,100vw);max-height:calc(100svh - 160px);padding:var(--space-2) var(--space-4) var(--space-3);box-shadow:var(--shadow-lg);pointer-events:none;border-bottom-left-radius:20px;flex-direction:column;transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.display-options-drawer.open{pointer-events:auto;transform:translate(0)}.display-options-drawer-header{justify-content:space-between;align-items:center;display:flex}.display-options-drawer-title{margin:0}.display-options-drawer-close{width:26px;height:26px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;line-height:1;transition:background .15s;display:flex}.display-options-drawer-close:hover{background:#78788024}.display-options-drawer-body{flex-direction:column;gap:4px;display:flex}.display-options-drawer-body .settings-field{text-transform:none;letter-spacing:normal;color:var(--text);flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;font-size:13px;font-weight:590}.display-options-drawer-body .settings-field+.settings-field{border-top:1px solid var(--border);margin-top:0}.display-options-drawer-body .settings-field select{width:auto;min-width:120px}.saved-progressions-menu{display:inline-block}.saved-progressions-trigger{background-color:var(--surface);height:36px;color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:980px;align-items:center;gap:6px;padding:0 16px;font-size:14px;font-weight:590;transition:background-color .15s,transform .12s;display:inline-flex}.saved-progressions-trigger:hover{background-color:var(--border)}.saved-progressions-trigger:active{transform:scale(.96)}.saved-progressions-trigger.active{background-color:var(--accent-bg);color:var(--accent)}.saved-progressions-drawer-scrim{z-index:40;opacity:0;pointer-events:none;background:#00000052;transition:opacity .22s;position:fixed;inset:0}.saved-progressions-drawer-scrim.open{opacity:1;pointer-events:auto}.saved-progressions-drawer{z-index:41;gap:var(--space-3);background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);width:min(400px,100vw);max-height:calc(100svh - 120px);padding:var(--space-2) var(--space-4) var(--space-3);box-shadow:var(--shadow-lg);pointer-events:none;border-bottom-left-radius:20px;flex-direction:column;transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.saved-progressions-drawer.open{pointer-events:auto;transform:translate(0)}.saved-progressions-drawer-header{justify-content:space-between;align-items:center;display:flex}.saved-progressions-drawer-title{margin:0}.saved-progressions-drawer-close{width:26px;height:26px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;line-height:1;transition:background .15s;display:flex}.saved-progressions-drawer-close:hover{background:#78788024}.saved-progressions-drawer-body{gap:var(--space-4);flex-direction:column;display:flex}.saved-progressions-section{flex-direction:column;gap:8px;display:flex}.saved-progressions-section-title{text-transform:uppercase;letter-spacing:.02em;color:var(--text-secondary);font-size:12px;font-weight:590}.saved-progressions-save-row{gap:8px;display:flex}.saved-progressions-save-row input{height:var(--control-height);box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:12px;outline:none;flex:1;padding:0 12px;font-size:14px}.saved-progressions-save-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.saved-progressions-action-row{flex-wrap:wrap;gap:8px;display:flex}.saved-progressions-save-row button,.saved-progressions-action-row button{height:var(--control-height);background:var(--accent-bg);color:var(--accent);cursor:pointer;white-space:nowrap;border:none;border-radius:980px;padding:0 14px;font-size:13px;font-weight:590;transition:background .15s,transform .12s}.saved-progressions-save-row button:hover:not(:disabled),.saved-progressions-action-row button:hover:not(:disabled){background:var(--accent);color:#fff}.saved-progressions-save-row button:active:not(:disabled),.saved-progressions-action-row button:active:not(:disabled){transform:scale(.96)}.saved-progressions-save-row button:disabled,.saved-progressions-action-row button:disabled{opacity:.4;cursor:default}.saved-progressions-divider{background:var(--border);height:1px}.saved-progressions-empty{color:var(--text-secondary);margin:0;font-size:13px}.saved-progressions-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.saved-progressions-list-item{border-radius:12px;align-items:center;gap:4px;padding:4px;display:flex}.saved-progressions-list-item:hover{background:#78788014}.saved-progressions-favorite{color:#f5a623;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;width:28px;height:28px;font-size:16px}.saved-progressions-favorite:hover{background:#78788024}.saved-progressions-item-main{cursor:pointer;text-align:start;background:0 0;border:none;flex-direction:column;flex:1;align-items:flex-start;gap:1px;min-width:0;padding:2px 6px;display:flex}.saved-progressions-item-name{color:var(--text);font-size:13px;font-weight:590}.saved-progressions-item-text{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:12px;overflow:hidden}.saved-progressions-item-main.recent .saved-progressions-item-text{color:var(--text);font-size:13px}.saved-progressions-icon-button{width:26px;height:26px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;font-size:14px}.saved-progressions-icon-button:hover{color:var(--text);background:#78788024}.heat-map-legend{color:var(--text-secondary);flex-wrap:wrap;align-items:center;gap:14px;margin:-10px 0 20px;font-size:12px;font-weight:500;display:flex}.heat-map-legend-item{align-items:center;gap:6px;display:inline-flex}.heat-map-legend-swatch{border-radius:50%;flex-shrink:0;display:inline-block}.legend-chord{opacity:1;background:#34c759;width:15px;height:15px}.legend-scale{background:var(--accent);opacity:.65;width:12px;height:12px}.legend-passing{opacity:.75;background:#af52de;width:10px;height:10px}.legend-avoid{background:var(--danger);opacity:1;width:11px;height:11px;filter:drop-shadow(0 0 3px var(--danger))}.playback-controls{align-items:center;gap:20px;margin:0 0 20px;display:flex}.autoplay-switch{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:14px;font-weight:500;display:inline-flex}.autoplay-switch input{opacity:0;width:0;height:0;position:absolute}.switch-track{background:#7878803d;border-radius:999px;flex-shrink:0;width:44px;height:26px;transition:background .2s;position:relative}.switch-thumb{background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .2s cubic-bezier(.2,.8,.3,1);position:absolute;top:2px;left:2px;box-shadow:0 2px 5px #00000047}.autoplay-switch input:checked+.switch-track{background:#34c759}.autoplay-switch input:checked+.switch-track .switch-thumb{transform:translate(18px)}.autoplay-switch input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:2px}.play-button{height:var(--control-height);box-sizing:border-box;letter-spacing:-.005em;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:980px;padding:0 20px;font-size:14px;font-weight:590;transition:background .15s,transform .12s}.play-button:hover:not(:disabled){background:var(--accent-hover)}.play-button:active:not(:disabled){transform:scale(.96)}.play-button:disabled{opacity:.35;cursor:not-allowed}.scale-analysis-panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:14px;max-width:560px;margin:0 0 20px;padding:12px 16px}.scale-analysis-title{color:var(--text);margin:0 0 4px;font-size:14px}.scale-analysis-title strong{font-weight:650}.scale-analysis-scales{color:var(--text-secondary);margin:0;font-size:13px}.scale-analysis-borrowed{color:var(--text-secondary);margin:6px 0 0;font-size:12px}.scale-analysis-borrowed-chord{font-weight:650}.scale-analysis-borrowed-chord.usage-borrowed{color:#34c759}.scale-analysis-borrowed-chord.usage-clash{color:var(--danger)}.scale-analysis-emphasized{color:var(--accent);font-weight:700}.scale-degree-strip{flex-wrap:wrap;gap:6px;margin:8px 0 10px;display:flex}.scale-degree-cell{flex-direction:column;align-items:center;gap:1px;min-width:34px;display:flex}.scale-degree-number{color:var(--text-secondary);font-size:10px;font-weight:590;line-height:1.2}.scale-degree-note-ring{width:28px;height:28px;color:var(--text);background:#7878801a;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:650;display:flex}.scale-degree-roman{color:var(--text-secondary);font-size:10px;font-weight:590;line-height:1.2}.scale-degree-cell.usage-diatonic .scale-degree-note-ring{background:color-mix(in srgb, #007aff 18%, var(--bg));color:#0060df;border-color:#007aff}.scale-degree-cell.usage-borrowed .scale-degree-note-ring{background:color-mix(in srgb, #34c759 18%, var(--bg));color:#248a3d;border-color:#34c759}.scale-degree-cell.usage-clash .scale-degree-note-ring{border-color:var(--danger);background:color-mix(in srgb, var(--danger) 18%, var(--bg));color:var(--danger)}.position-roadmap-panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:16px;max-width:none;margin:0 0 20px;padding:20px 22px}.position-roadmap-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0 0 16px;font-size:13px;font-weight:650}.position-roadmap-chain{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.position-roadmap-step-group{align-items:center;gap:12px;display:inline-flex}.position-roadmap-step{background:color-mix(in srgb, var(--chord-color) 14%, var(--bg));border:1px solid color-mix(in srgb, var(--chord-color) 30%, var(--border));border-radius:14px;flex-direction:column;align-items:center;gap:3px;min-width:68px;padding:10px 18px;display:inline-flex}.position-roadmap-chord{letter-spacing:-.01em;color:var(--text);align-items:center;gap:7px;font-size:21px;font-weight:700;display:inline-flex}.position-roadmap-swatch{background:var(--chord-color);border-radius:50%;flex-shrink:0;width:10px;height:10px;box-shadow:0 0 0 1px #00000026}.position-roadmap-position{color:var(--text-secondary);font-size:12px;font-weight:590}.position-roadmap-transition{color:var(--text-secondary);white-space:nowrap;background:#7878801f;border-radius:999px;align-items:center;gap:5px;padding:6px 12px;font-size:13px;font-weight:650;display:inline-flex}.position-roadmap-transition:before{content:"→";font-size:15px;line-height:1}.position-roadmap-transition.slide{color:var(--danger);background:color-mix(in srgb, var(--danger) 14%, transparent)}.position-roadmap-transition.shift{color:var(--accent);background:var(--accent-bg)}.tension-meter{max-width:320px;margin:0 0 20px}.tension-meter-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.tension-meter-title-row{align-items:center;display:inline-flex}.tension-meter-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:11px;font-weight:590}.tension-meter-label{font-size:12px;font-weight:650}.tension-meter-track{background:#78788029;border-radius:999px;height:8px;overflow:hidden}.tension-meter-fill{border-radius:999px;height:100%;transition:width .25s,background .25s}.tension-meter-label.resolution,.tension-meter-fill.resolution{color:#34c759;background:#34c759}.tension-meter-label.relaxed,.tension-meter-fill.relaxed{color:#30b0c7;background:#30b0c7}.tension-meter-label.medium,.tension-meter-fill.medium{color:#ff9500;background:#ff9500}.tension-meter-label.high,.tension-meter-fill.high{color:#ff3b30;background:#ff3b30}.note-info-panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:14px;align-items:flex-start;gap:14px;max-width:480px;margin:0 0 20px;padding:14px 16px;display:flex}.note-info-dot{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;font-weight:700;display:flex}.note-info-text{flex-direction:column;gap:2px;display:flex}.note-info-title{color:var(--text);margin:0;font-size:15px;font-weight:590}.note-info-degree{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;margin:0;font-size:12px;font-weight:590}.note-info-reason{color:var(--text-secondary);margin:4px 0 0;font-size:13px;line-height:1.4}.insights-panel{min-width:0}.insights-panel-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--space-3);font-size:12px;font-weight:650}.insights-panel .landing-notes-hint{color:var(--text-secondary);margin:0 0 16px;font-size:14px}.tension-with-chord-label{position:relative}.compose-now-playing{letter-spacing:-.01em;color:var(--accent);pointer-events:none;white-space:nowrap;font-size:30px;font-weight:700;position:absolute;top:0;left:calc(50vw - 72px);transform:translate(-50%)}.compose-now-playing:before{content:"";background:var(--bg);box-shadow:inset 2px 2px 4px var(--inset-shadow-dark), inset -2px -2px 4px var(--inset-shadow-light);z-index:-1;border-radius:10px;position:absolute;inset:-3px -14px}@media (width<=899px){.compose-now-playing{left:calc(50vw - var(--space-4))}}.training-handoff{display:inline-flex}.training-handoff-open{height:var(--control-height);box-sizing:border-box;border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:0 16px;font-size:13px;font-weight:590;display:inline-flex}.training-handoff-open:hover{filter:brightness(1.08)}.training-handoff-open:disabled{opacity:.4;cursor:default;filter:none}.training-handoff-panel{gap:var(--space-2);padding:var(--space-3);border:1px solid var(--accent);background:var(--accent-bg);border-radius:12px;flex-direction:column;display:flex}.training-handoff-header{color:var(--accent);justify-content:space-between;align-items:center;font-size:13px;font-weight:700;display:flex}.training-handoff-cancel{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:12px;font-weight:590}.training-handoff-cancel:hover{color:var(--text)}.training-handoff-groups{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.training-handoff-groups li{justify-content:space-between;align-items:center;gap:var(--space-2);color:var(--text);background:var(--surface);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:590;display:flex}.training-handoff-groups button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:16px;line-height:1}.training-handoff-groups button:hover{color:var(--danger)}.training-handoff-hint{color:var(--text-secondary);margin:0;font-size:12px}.training-handoff-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.training-handoff-actions button{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:590}.training-handoff-actions button:hover{background:#78788024}.training-handoff-actions button:disabled{opacity:.4;cursor:default}.training-handoff-send{border-color:var(--accent)!important;background:var(--accent)!important;color:#fff!important}.training-handoff-send:hover{filter:brightness(1.08)}.training-handoff-send:disabled{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important}.compose-view{max-width:720px}.compose-view .subtitle{margin-top:0;margin-bottom:var(--space-6);color:var(--text-secondary);font-size:17px}.compose-view>*+*{margin-top:var(--space-5)}.compose-input-row{align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.compose-sounding-progression{color:var(--text-secondary);margin:0;font-size:15px}.compose-transpose{align-items:center;gap:8px;display:flex}.compose-transpose-button{border:1px solid var(--border);background:var(--surface);width:32px;height:32px;color:var(--text);cursor:pointer;border-radius:999px;font-size:17px;font-weight:600;line-height:1;transition:background .15s,border-color .15s}.compose-transpose-button:hover{background:#78788024}.compose-transpose-button:disabled{opacity:.35;cursor:default;background:var(--surface)}.compose-transpose-key{color:var(--text-secondary);text-align:center;min-width:84px;font-size:13px;font-weight:590}.compose-toggle-row{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.compose-toggle-row .mode-toggle{margin:0}.compose-piano-inversion-summary{letter-spacing:.01em;color:var(--text);font-variant-numeric:tabular-nums;margin:0;font-size:20px;font-weight:700}.compose-smooth-toggle-row{align-items:center;display:inline-flex}.compose-smooth-toggle{height:var(--control-height);box-sizing:border-box;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:0 14px;font-size:12px;font-weight:590;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.compose-smooth-toggle:hover{background:#78788024}.compose-smooth-toggle.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.compose-smooth-hint{color:var(--text-secondary);margin:0;font-size:13px}.emotion-description{text-transform:none;letter-spacing:normal;color:var(--text-secondary);white-space:normal;max-width:260px;font-size:11px;font-weight:400}.lick-notation{background:var(--bg);border:1px solid var(--border);border-radius:14px;justify-content:flex-start;padding:8px;display:flex;overflow-x:auto}.lick-notation svg{max-width:none;height:auto}.lick-library-panel{flex-direction:column;gap:16px;margin:0 0 20px;display:flex}.lick-library-filters{flex-wrap:wrap;gap:14px;display:flex}.lick-library-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:6px;font-size:11px;font-weight:590;display:flex}.lick-library-field select{border:1px solid var(--border);background:var(--bg);color:var(--text);text-transform:none;letter-spacing:normal;border-radius:9px;padding:8px 10px;font-size:14px;font-weight:500}.lick-library-field select:focus{border-color:var(--accent);outline:none}.lick-library-list{flex-direction:column;gap:8px;max-height:260px;display:flex;overflow-y:auto}.lick-library-empty{color:var(--text-secondary);margin:0;font-size:14px}.lick-library-item{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;text-align:start;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;transition:border-color .15s,background .15s;display:flex}.lick-library-item:hover{border-color:var(--accent)}.lick-library-item.active{border-color:var(--technique-action-color,#ff2d55);background:color-mix(in srgb, var(--technique-action-color,#ff2d55) 10%, var(--bg))}.lick-library-item-title{font-size:13px;font-weight:590}.lick-library-item-tags{gap:6px;display:flex}.lick-library-tag{color:var(--text-secondary);white-space:nowrap;background:#78788024;border-radius:999px;padding:3px 8px;font-size:10.5px;font-weight:590}.lick-library-detail{border-top:1px solid var(--border);flex-direction:column;gap:12px;padding-top:12px;display:flex}.lick-library-controls{align-items:center;gap:14px;display:flex}.lick-library-tempo button{font-variant-numeric:tabular-nums}.lick-meta{flex-wrap:wrap;gap:6px;margin:0;display:flex}.lick-meta-tag{color:var(--text-secondary);background:#7878801f;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:590}.lick-motif-row{flex-wrap:wrap;gap:6px;display:flex}.lick-motif-chip{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:590;transition:background .15s,color .15s,border-color .15s}.lick-motif-chip:hover{background:var(--border)}.lick-motif-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.lick-legend{color:var(--text-secondary);margin:0;font-size:12px}.phrase-builder-panel{flex-direction:column;gap:16px;margin:0 0 20px;display:flex}.phrase-section{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:14px;padding:14px 16px}.phrase-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.phrase-section-title{margin:0;font-size:14px}.phrase-buttons{flex-wrap:wrap;gap:8px;display:flex}.phrase-buttons .play-button{padding:7px 14px;font-size:13px}.phrase-bar-list{flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none;display:flex}.phrase-bar{flex-wrap:wrap;align-items:baseline;gap:10px;font-size:13px;display:flex}.phrase-bar-label{color:var(--text-secondary);flex-shrink:0;min-width:170px;font-weight:590}.phrase-note-list{flex-wrap:wrap;gap:6px;display:inline-flex}.phrase-note{color:var(--text);background:#7878801f;border-radius:999px;padding:2px 8px;font-weight:590;transition:background .15s,color .15s,transform .15s}.phrase-note.playing{background:var(--accent);color:#fff;transform:scale(1.1)}.solo-coach-panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:14px;max-width:560px;margin:0 0 20px;padding:14px 16px}.solo-coach-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.solo-coach-title{margin:0;font-size:14px}.solo-coach-subject{color:var(--text-secondary);margin:6px 0 0;font-size:12px}.solo-coach-result{align-items:flex-start;gap:14px;margin-top:12px;display:flex}.solo-coach-score{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:17px;font-weight:700;display:flex}.solo-coach-score.good{background:#34c759}.solo-coach-score.ok{background:#ff9500}.solo-coach-score.weak{background:#ff3b30}.solo-coach-feedback{flex-direction:column;gap:4px;display:flex}.solo-coach-item{color:var(--text);margin:0;font-size:13px}.solo-coach-item.good{color:#34c759;font-weight:590}.improvise-view{max-width:760px}.improvise-view .subtitle{margin-top:0;margin-bottom:var(--space-6);color:var(--text-secondary);font-size:17px}.improvise-view>*+*{margin-top:var(--space-5)}.improvise-tabs{margin:0}.improvise-top-controls+.improvise-tabs{margin-top:var(--space-6)}.improvise-top-controls{gap:var(--space-6);flex-wrap:wrap;display:flex}.improvise-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:6px;font-size:11px;font-weight:590;display:flex}.improvise-field select{border:1px solid var(--border);background:var(--bg);color:var(--text);text-transform:none;letter-spacing:normal;border-radius:9px;padding:8px 10px;font-size:14px;font-weight:500}.improvise-field select:focus{border-color:var(--accent);outline:none}.exercise-drawer-backdrop{z-index:20;background:#0000004d;position:fixed;inset:0}.exercise-drawer{z-index:21;background:var(--surface);width:min(420px,100vw);box-shadow:var(--shadow-lg);flex-direction:column;gap:16px;padding:20px;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.exercise-drawer-inline{width:100%;max-width:640px;box-shadow:none;background:0 0;padding:0;position:static}.exercise-drawer-header{justify-content:space-between;align-items:center;display:flex}.exercise-drawer-title{margin:0}.exercise-drawer-close{background:var(--border);width:32px;height:32px;color:var(--text);cursor:pointer;border:none;border-radius:50%;font-size:18px}.exercise-drawer-filters{flex-wrap:wrap;gap:14px;display:flex}.exercise-drawer-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:6px;font-size:12px;font-weight:590;display:flex}.exercise-drawer-field select{border:1px solid var(--border);background:var(--bg);color:var(--text);text-transform:none;letter-spacing:normal;border-radius:9px;padding:7px 9px;font-size:14px;font-weight:500}.exercise-drawer-field select:focus{border-color:var(--accent);outline:none}.exercise-drawer-list{flex-direction:column;gap:12px;display:flex}.exercise-drawer-empty{color:var(--text-secondary);font-size:14px}.exercise-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:14px}.exercise-card-header{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.exercise-card-title{margin:0;font-size:15px}.exercise-card-difficulty{color:var(--text-secondary);background:#78788029;border-radius:999px;flex-shrink:0;padding:3px 8px;font-size:11px;font-weight:590}.exercise-card-source{color:var(--text-secondary);margin:4px 0 0;font-size:12px;font-style:italic}.exercise-card-description{color:var(--text);margin:6px 0 0;font-size:13px;line-height:1.4}.exercise-card-footer{justify-content:space-between;align-items:center;margin-top:10px;display:flex}.exercise-card-bpm{color:var(--text-secondary);font-size:12px;font-weight:590}.practice-drill-panel{background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow-sm);border-radius:14px;margin:0 0 20px;padding:14px 16px}.practice-drill-header{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.practice-drill-title{margin:0}.practice-drill-meta{color:var(--text-secondary);margin:2px 0 0;font-size:12px}.practice-drill-timer{font-variant-numeric:tabular-nums;color:var(--text);font-weight:590}.practice-drill-exit{border:1px solid var(--border);background:var(--bg);color:var(--danger);cursor:pointer;border-radius:999px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:590}.practice-drill-controls{flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;display:flex}.practice-drill-controls .mode-toggle{margin:0}.practice-drill-controls .metronome-toggle{width:auto;margin:0;padding:0 20px}.practice-drill-hear{border:1px solid var(--border);background:var(--bg);height:33px;color:var(--text);cursor:pointer;border-radius:980px;padding:0 14px;font-size:13px;font-weight:590;transition:background .15s,color .15s,border-color .15s}.practice-drill-hear:hover{background:#78788024}.practice-drill-hear.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.practice-drill-reset-timer{border:1px solid var(--border);background:var(--bg);width:33px;height:33px;color:var(--text);cursor:pointer;border-radius:999px;font-size:16px;line-height:1;transition:background .15s,transform .12s;position:relative}.practice-drill-reset-timer:hover:not(:disabled){background:#78788024}.practice-drill-reset-timer:active:not(:disabled){transform:scale(.92)}.practice-drill-reset-timer:disabled{opacity:.4;cursor:default}.practice-drill-hint{color:var(--text-secondary);margin:10px 0 0;font-size:11px}.ear-training-backdrop{z-index:30;background:#0006;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.ear-training-modal{background:var(--surface);width:min(720px,100%);max-height:90vh;box-shadow:var(--shadow-lg);border-radius:20px;flex-direction:column;gap:16px;padding:22px;display:flex;overflow-y:auto}.ear-training-modal-inline{width:100%;max-width:720px;max-height:none;box-shadow:none;background:0 0;border-radius:0;padding:0}.ear-training-start-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:16px;max-width:480px;padding:24px;display:flex}.ear-training-start-copy{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.5}.ear-training-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.ear-training-timer-inline{text-align:right;color:#007aff;font-variant-numeric:tabular-nums;margin-top:6px;font-size:20px;font-weight:700;line-height:1}.ear-training-timer-inline.danger{color:#ff3b30}.ear-training-title{margin:0}.ear-training-exit{border:1px solid var(--border);background:var(--bg);color:var(--danger);cursor:pointer;border-radius:980px;padding:7px 16px;font-size:13px;font-weight:590;transition:background .15s,transform .12s}.ear-training-exit:hover{background:var(--border)}.ear-training-exit:active{transform:scale(.96)}.ear-training-controls{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.ear-training-controls .mode-toggle{margin:0}.ear-training-mode-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:6px;font-size:12px;font-weight:590;display:flex}.ear-training-mode-field select{border:1px solid var(--border);background:var(--bg);color:var(--text);text-transform:none;letter-spacing:normal;border-radius:9px;padding:7px 9px;font-size:14px;font-weight:500}.ear-training-mode-field select:focus{border-color:var(--accent);outline:none}.ear-training-scoreboard{background:var(--bg);border:1px solid var(--border);color:var(--text-secondary);border-radius:12px;flex-wrap:wrap;gap:18px;padding:10px 14px;font-size:13px;display:flex}.ear-training-scoreboard strong{color:var(--text);font-size:14px}.ear-training-score-detail{font-size:11px}.ear-training-prompt{color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:12px;margin:0;padding:10px 14px;font-size:15px;font-weight:590;transition:background .2s,border-color .2s}.ear-training-prompt.correct{background:color-mix(in srgb, #34c759 16%, var(--bg));border-color:#34c759}.ear-training-prompt.incorrect{background:color-mix(in srgb, var(--danger) 14%, var(--bg));border-color:var(--danger)}.ear-training-reveal{color:var(--text-secondary);margin:-4px 0 0;padding:0 14px;font-size:13px;font-weight:590}.ear-training-actions{align-items:center;gap:12px;display:flex}.ear-training-progress-label{color:var(--text-secondary);font-size:12px;font-weight:590}.ear-training-trailing{align-items:center;gap:12px;margin-left:auto;display:flex}.ear-training-skip{background:var(--border);color:var(--text);cursor:pointer;border:none;border-radius:980px;padding:9px 16px;font-size:13px;font-weight:590;transition:background .15s,transform .12s}.ear-training-skip:hover{background:#78788038}.ear-training-skip:active{transform:scale(.96)}.ear-training-next{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:980px;padding:9px 16px;font-size:13px;font-weight:590;transition:background .15s,transform .12s}.ear-training-next:hover{background:var(--accent);color:#fff}.ear-training-next:active{transform:scale(.96)}.ear-training-summary{background:var(--bg);border:1px solid var(--border);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex}.ear-training-summary h3{margin:0}.ear-training-summary-stats{color:var(--text-secondary);flex-wrap:wrap;justify-content:center;gap:20px;font-size:14px;display:flex}.ear-training-summary-stats strong{color:var(--text);font-size:18px}.ear-training-choices{flex-wrap:wrap;gap:8px;display:flex}.ear-training-choice{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:980px;padding:9px 16px;font-size:13px;font-weight:590;transition:background .15s,border-color .15s,transform .12s}.ear-training-choice:hover:not(:disabled){background:#78788024}.ear-training-choice:active:not(:disabled){transform:scale(.96)}.ear-training-choice:disabled{cursor:default}.ear-training-choice.correct{color:#fff;background:#34c759;border-color:#34c759}.ear-training-choice.incorrect{background:var(--danger);border-color:var(--danger);color:#fff}.ear-training-instrument{justify-content:center;margin:4px 0 12px;display:flex}.ear-training-mic-disclosure{border-top:1px solid var(--border);margin-top:8px;padding-top:8px}.ear-training-mic-disclosure>summary{cursor:pointer;color:var(--text-secondary);list-style:revert;font-size:.85rem}.ear-training-mic-disclosure[open]>summary{margin-bottom:6px}.ear-training-explainer{margin:2px 0 4px}.ear-training-explainer>summary{cursor:pointer;color:var(--accent);list-style:revert;font-size:.85rem;font-weight:600}.ear-training-explainer>summary:hover{text-decoration:underline}.ear-training-explainer p{background:var(--bg);border:1px solid var(--border);color:var(--text-secondary);border-radius:10px;margin:8px 0 0;padding:10px 12px;font-size:.85rem;line-height:1.5}.practice-stats-bar{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}@media (width<=720px){.practice-stats-bar{grid-template-columns:repeat(2,1fr)}}.practice-stat{background:var(--bg);border:1px solid var(--border);text-align:center;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;padding:10px 12px;display:flex}.practice-stat-value{color:var(--text);font-variant-numeric:tabular-nums;font-size:20px;font-weight:650}.practice-stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:11px;font-weight:590}.practice-stat.live{border-color:var(--accent);background:var(--accent-bg)}.practice-stat.live .practice-stat-value{color:var(--accent)}.practice-stat-recommend{font:inherit;cursor:default;transition:background .15s,border-color .15s,transform .12s}.practice-stat-recommend.actionable{cursor:pointer}.practice-stat-recommend.actionable:hover{background:#78788024}.practice-stat-recommend.actionable:active{transform:scale(.97)}.practice-stat-recommend-title{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:13px;line-height:1.25;overflow:hidden}.guitar-notation{background:var(--bg);border:1px solid var(--border);border-radius:14px;justify-content:center;padding:8px;display:flex}.guitar-notation svg{max-width:100%;height:auto}.guitar-practice-trainer{align-items:center;gap:var(--space-5);text-align:center;flex-direction:column;max-width:420px;margin:0 auto;display:flex}.trainer-subtitle{color:var(--text-secondary);margin:0;font-size:14px}.trainer-controls{align-items:center;gap:12px;display:flex}.trainer-controls button{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:9px;padding:7px 14px;font-size:13px;font-weight:590}.trainer-controls button:disabled{opacity:.4;cursor:default}.trainer-target{min-width:96px;font-size:15px;font-weight:590}.trainer-tuner-bar{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.trainer-tuner-track{background:#78788029;border-radius:999px;width:100%;height:10px;position:relative}.trainer-tuner-center{background:var(--border);width:2px;position:absolute;top:-4px;bottom:-4px;left:50%;transform:translate(-50%)}.trainer-tuner-needle{background:var(--accent);border-radius:999px;width:8px;transition:left 80ms linear,background .15s;position:absolute;top:-3px;bottom:-3px;transform:translate(-50%)}.trainer-tuner-needle.matched{background:#34c759}.trainer-status{color:var(--text);min-height:20px;margin:0;font-size:14px}.trainer-clarity{color:var(--text-secondary);margin:0;font-size:12px}.trainer-toggle{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:980px;padding:10px 24px;font-size:15px;font-weight:590}.rhythm-game-panel{flex-direction:column;gap:16px;display:flex}.rhythm-game-intro{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.5}.rhythm-game-header{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.rhythm-game-title{margin:0}.rhythm-game-meta{color:var(--text-secondary);margin:2px 0 0;font-size:12px}.rhythm-game-exit{border:1px solid var(--border);background:var(--bg);color:var(--danger);cursor:pointer;border-radius:999px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:590}.rhythm-game-scoreboard{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.rhythm-game-stat{background:var(--bg);border:1px solid var(--border);text-align:center;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:10px 12px;transition:border-color .15s,background .15s;display:flex}.rhythm-game-stat.hot{background:color-mix(in srgb, #ff9500 12%, var(--bg));border-color:#ff9500}.rhythm-game-stat-value{color:var(--text);font-variant-numeric:tabular-nums;font-size:20px;font-weight:650}.rhythm-game-stat.hot .rhythm-game-stat-value{color:#ff9500}.rhythm-game-stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:11px;font-weight:590}.rhythm-game-actions{align-items:center;gap:12px;display:flex}.rhythm-game-mic-status{color:var(--text-secondary);font-size:12px}.rhythm-game-summary{background:var(--bg);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:8px;padding:14px 16px;display:flex}.rhythm-game-summary-line{color:var(--text);margin:0;font-size:14px;font-weight:590}.rhythm-game-hint{color:var(--text-secondary);margin:0;font-size:11px}.bending-panel{gap:var(--space-4);flex-direction:column;display:flex}.bending-session{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--bg);border:1px solid var(--border);border-radius:16px;flex-direction:column;display:flex}.bending-primary-actions{gap:10px;display:flex}.bending-toggle-btn{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:980px;padding:10px 28px;font-size:15px;font-weight:600}.bending-toggle-btn:hover{background:var(--accent);color:#fff}.bending-error{color:var(--danger);margin:0;font-size:13px}.bending-meta{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-wrap:wrap;justify-content:center;gap:12px;font-size:12px;font-weight:590;display:flex}.bending-tab-line{font-variant-numeric:tabular-nums;align-items:baseline;gap:10px;display:flex}.bending-tab-text{color:var(--text);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:26px;font-weight:700}.bending-tab-arrow{color:var(--text-secondary);font-size:14px;font-weight:600}.bending-distance-badge{background:var(--accent-bg);color:var(--accent);text-transform:uppercase;letter-spacing:.02em;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}.bending-svg{width:100%;max-width:420px;height:auto}.bending-fret-line{stroke:var(--border);stroke-width:1px}.bending-start-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2px}.bending-start-dot-label{fill:#fff;pointer-events:none;font-size:10px;font-weight:700}.bending-target-ring{fill:none;stroke:var(--accent);stroke-width:2px;stroke-dasharray:4 3;transition:fill .15s,stroke .15s,filter .15s}.bending-target-ring.success{fill:#34c75940;stroke:#34c759;stroke-dasharray:none;filter:drop-shadow(0 0 4px #34c759)drop-shadow(0 0 8px #34c759)}.bending-note-label{fill:var(--text);font-size:13px;font-weight:700}.bending-fret-label{fill:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:10px;font-weight:600}.bending-guide-arc{fill:none;stroke:var(--border);stroke-width:2px;stroke-dasharray:3 4}.bending-live-dot{stroke:var(--surface);stroke-width:2px;transition:fill 80ms linear}.bending-live-dot.success{filter:drop-shadow(0 0 5px #34c759)}.bending-state-label{text-transform:uppercase;letter-spacing:.03em;margin:0;font-size:14px;font-weight:700}.bending-hold-bar{background:var(--surface);border:1px solid var(--border);border-radius:999px;width:100%;max-width:300px;height:6px;overflow:hidden}.bending-hold-fill{background:#34c759;height:100%;transition:width 60ms linear}.bending-skip-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:590}.bending-skip-btn:hover{background:#78788024}.bending-complete{flex-direction:column;align-items:center;gap:10px;display:flex}.bending-complete p{color:var(--text);margin:0;font-size:15px;font-weight:600}.bending-again-btn{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:980px;padding:7px 18px;font-size:13px;font-weight:590}.bending-again-btn:hover{background:var(--accent);color:#fff}.bending-score{color:var(--text-secondary);margin:0;font-size:13px;font-weight:590}.solo-opener-panel{gap:var(--space-4);flex-direction:column;display:flex}.solo-opener-controls{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.solo-opener-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:4px;font-size:11px;font-weight:590;display:flex}.solo-opener-field-label{height:13px;line-height:13px;display:block}.solo-opener-field select{text-transform:none;letter-spacing:normal;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;min-width:140px;margin:0;padding:9px 11px;font-size:14px;font-weight:500}.solo-opener-shuffle{border:1px solid var(--border);background:var(--surface);color:var(--text);text-transform:none;letter-spacing:normal;cursor:pointer;border-radius:10px;justify-content:flex-start;padding:9px 16px;font-size:14px;font-weight:600}.solo-opener-shuffle:hover{background:var(--bg)}.solo-opener-card{padding:var(--space-4);border:1px solid var(--border);background:var(--surface);border-radius:14px}.solo-opener-prompt-lead{margin:0 0 var(--space-2);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);font-size:12px;font-weight:700}.solo-opener-prompt-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.solo-opener-prompt-list li{color:var(--text);font-size:18px;font-weight:650;line-height:1.35}.solo-opener-prompt-key{min-width:84px;text-transform:uppercase;letter-spacing:.03em;color:var(--accent);margin-inline-end:var(--space-2);font-size:11px;font-weight:700;display:inline-block}.solo-opener-status{color:var(--text-secondary);margin:0;font-size:13px;font-weight:590}.solo-opener-hint{color:var(--text-secondary);margin:0;font-size:13px}.piano-practice-start-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:16px;max-width:480px;padding:24px;display:flex}.piano-practice-start-copy{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.5}.piano-practice-panel{flex-direction:column;gap:16px;display:flex}.piano-practice-header{justify-content:space-between;align-items:center;display:flex}.piano-practice-title{margin:0}.piano-practice-controls{flex-wrap:wrap;gap:10px;display:flex}.piano-practice-coming-soon{background:var(--bg);border:1px dashed var(--border);color:var(--text-secondary);border-radius:12px;margin:0;padding:14px;font-size:14px}.falling-notes-panel{gap:var(--space-4);flex-direction:column;display:flex}.falling-notes-controls{align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.falling-notes-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:4px;font-size:11px;font-weight:590;display:flex}.falling-notes-field select{text-transform:none;letter-spacing:normal;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;min-width:160px;padding:9px 11px;font-size:14px;font-weight:500}.falling-notes-midi-btn{border:1px solid var(--border);background:var(--surface);height:36px;color:var(--text);cursor:pointer;border-radius:980px;padding:0 16px;font-size:13px;font-weight:590}.falling-notes-midi-btn:hover:not(:disabled){background:#78788024}.falling-notes-midi-btn:disabled{opacity:.6;cursor:default}.falling-notes-midi-status{color:var(--text-secondary);margin:0;font-size:12px;font-weight:590}.falling-notes-midi-status.connected{color:#34c759}.falling-notes-stage{max-width:100%;position:relative;overflow-x:auto}.falling-notes-lane{background:var(--bg);border:1px solid var(--border);border-bottom:none;border-radius:12px 12px 0 0;position:relative;overflow:hidden}.falling-note-block{background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);border-radius:5px;justify-content:center;align-items:center;font-size:9px;font-weight:700;transition:background-color .1s,border-color .1s,opacity .15s;display:flex;position:absolute}.falling-note-block.black{background:var(--accent);color:#fff;z-index:1}.falling-note-block.hit{color:#fff;background:#34c759;border-color:#34c759}.falling-note-block.miss{background:var(--danger);border-color:var(--danger);color:#fff;opacity:.6}.falling-notes-hit-line{background:var(--text);opacity:.4;height:2px;position:absolute;left:0;right:0}.falling-notes-keyboard{border-radius:0 0 8px 8px;display:flex;position:relative;overflow:hidden}.falling-key-col{flex-shrink:0;position:relative}.falling-key{appearance:none;cursor:pointer;border:none;padding:0;transition:background-color 80ms,transform 50ms}.falling-key-white{background:#fdfdfb;border:1px solid #cfcfd2;border-radius:0 0 4px 4px;width:100%;height:100%}.falling-key-white:hover{background:var(--accent-bg)}.falling-key-white.target{background:var(--accent-bg);border-color:var(--accent)}.falling-key-white.hit{background:#34c759}.falling-key-white.miss{background:var(--danger)}.falling-key-black{z-index:2;border:1px solid var(--surface);background:#1c1c1e;border-radius:0 0 3px 3px;position:absolute;top:0}.falling-key-black.target{background:var(--accent)}.falling-key-black.hit{background:#34c759}.falling-key-black.miss{background:var(--danger)}.falling-key:active{transform:translateY(1px)}.falling-notes-score{color:var(--text-secondary);margin:0;font-size:14px;font-weight:590}.falling-notes-complete{color:var(--text);margin:0;font-size:15px;font-weight:700}.chord-rhythm-panel{gap:var(--space-4);flex-direction:column;display:flex}.chord-rhythm-controls{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.chord-rhythm-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:4px;font-size:11px;font-weight:590;display:flex}.chord-rhythm-field-label{height:13px;line-height:13px;display:block}.chord-rhythm-field select,.chord-rhythm-field input,.chord-rhythm-generated{text-transform:none;letter-spacing:normal;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;min-width:140px;margin:0;padding:9px 11px;font-size:14px;font-weight:500}.chord-rhythm-generated{color:var(--text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chord-rhythm-field .mode-toggle,.chord-rhythm-field .play-button{text-transform:none;letter-spacing:normal}.chord-rhythm-lane{background:var(--bg);border:1px solid var(--border);border-radius:12px;height:200px;position:relative;overflow:hidden}.chord-rhythm-block{color:#fff;border:1px solid;border-radius:8px;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex;position:absolute;transform:translate(-50%)}@keyframes chord-rhythm-pulse{0%{box-shadow:0 0 0 4px #fff3}to{box-shadow:0 0 0 11px #ffffff80}}.chord-rhythm-block.landed:not(.hit):not(.miss),.chord-rhythm-chip.landed:not(.hit):not(.miss){animation:.55s ease-in-out infinite alternate chord-rhythm-pulse}.chord-rhythm-block.hit,.chord-rhythm-chip.hit{box-shadow:0 0 0 6px #34c75959}.chord-rhythm-block.miss,.chord-rhythm-chip.miss{box-shadow:0 0 0 6px #ff453a4d}.chord-rhythm-hit-zone{pointer-events:none;background:#ffffff08;border-top:1px dashed #ffffff24;border-bottom:1px dashed #ffffff24;height:56px;transition:background-color .12s,border-color .12s;position:absolute;top:122px;left:0;right:0}.chord-rhythm-hit-zone.active{background:#ffd60a24;border-color:#ffd60a8c}.chord-rhythm-hitline{background:var(--text);opacity:.4;height:2px;transition:background-color .12s,opacity .12s,box-shadow .12s;position:absolute;top:150px;left:0;right:0}.chord-rhythm-hitline.active{opacity:1;background:#ffd60a;box-shadow:0 0 10px 2px #ffd60a99}.chord-rhythm-timeline{background:var(--bg);border:1px solid var(--border);border-radius:12px;height:90px;position:relative;overflow:hidden}.chord-rhythm-hit-zone.timeline{border:none;border-left:1px dashed #ffffff24;border-right:1px dashed #ffffff24;width:56px;height:auto;inset:0 auto 0 calc(50% - 28px)}.chord-rhythm-playhead{background:var(--text);opacity:.4;width:2px;transition:background-color .12s,opacity .12s,box-shadow .12s;position:absolute;top:8px;bottom:8px;left:50%}.chord-rhythm-playhead.active{opacity:1;background:#ffd60a;box-shadow:0 0 10px 2px #ffd60a99}.chord-rhythm-chip{color:#fff;border:1px solid;border-radius:8px;justify-content:center;align-items:center;width:64px;height:40px;font-size:15px;font-weight:700;display:flex;position:absolute}.chord-rhythm-chip.landed{box-shadow:0 0 0 6px #ffffff47}.chord-rhythm-score{color:var(--text-secondary);margin:0;font-size:14px;font-weight:590}.chord-rhythm-complete{color:var(--text);margin:0;font-size:15px;font-weight:700}.guitar-chord-rhythm-panel{gap:var(--space-4);flex-direction:column;display:flex}.guitar-chord-rhythm-controls{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.guitar-chord-rhythm-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:4px;font-size:11px;font-weight:590;display:flex}.guitar-chord-rhythm-field-label{height:13px;line-height:13px;display:block}.guitar-chord-rhythm-field .mode-toggle,.guitar-chord-rhythm-field .play-button{text-transform:none;letter-spacing:normal}.guitar-chord-rhythm-field input[type=text]{height:var(--control-height);box-sizing:border-box;letter-spacing:-.005em;text-transform:none;border:1px solid var(--border);background:var(--surface);min-width:160px;color:var(--text);box-shadow:var(--shadow-sm);border-radius:10px;outline:none;padding:0 12px;font-size:15px;font-weight:500;transition:box-shadow .18s,border-color .18s}.guitar-chord-rhythm-field input[type=text]::placeholder{color:var(--text-secondary);opacity:.55;font-weight:400}.guitar-chord-rhythm-field input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}.guitar-chord-rhythm-field select{border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);border-radius:10px;padding:0 10px;font-size:14px;font-weight:590}.guitar-chord-rhythm-groups{align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.guitar-chord-rhythm-group{align-items:flex-end;gap:var(--space-2);display:flex}.guitar-chord-rhythm-remove-group{height:var(--control-height);width:var(--control-height);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;border-radius:8px;font-size:16px;line-height:1}.guitar-chord-rhythm-remove-group:hover{color:var(--danger)}.guitar-chord-rhythm-add-group{height:var(--control-height);border:1px solid var(--border);background:var(--surface);color:var(--text);text-transform:none;letter-spacing:normal;cursor:pointer;border-radius:999px;padding:0 14px;font-size:13px;font-weight:590}.guitar-chord-rhythm-add-group:hover{background:#78788024}.guitar-chord-rhythm-add-group:disabled{opacity:.4;cursor:default}.guitar-chord-rhythm-preview-label{margin:0 0 var(--space-2);text-transform:uppercase;letter-spacing:.02em;color:var(--text-secondary);font-size:12px;font-weight:590}.guitar-chord-rhythm-lane{background:var(--bg);border:1px solid var(--border);border-radius:12px;height:200px;position:relative;overflow:hidden}.guitar-chord-rhythm-block{color:#fff;border:1px solid;border-radius:8px;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex;position:absolute;transform:translate(-50%)}@keyframes guitar-chord-rhythm-pulse{0%{box-shadow:0 0 0 4px #fff3}to{box-shadow:0 0 0 11px #ffffff80}}.guitar-chord-rhythm-block.landed:not(.hit):not(.miss),.guitar-chord-rhythm-chip.landed:not(.hit):not(.miss){animation:.55s ease-in-out infinite alternate guitar-chord-rhythm-pulse}.guitar-chord-rhythm-block.hit,.guitar-chord-rhythm-chip.hit{box-shadow:0 0 0 6px #34c75959}.guitar-chord-rhythm-block.miss,.guitar-chord-rhythm-chip.miss{box-shadow:0 0 0 6px #ff453a4d}.guitar-chord-rhythm-hit-zone{pointer-events:none;background:#ffffff08;border-top:1px dashed #ffffff24;border-bottom:1px dashed #ffffff24;height:56px;transition:background-color .12s,border-color .12s;position:absolute;top:122px;left:0;right:0}.guitar-chord-rhythm-hit-zone.active{background:#ffd60a24;border-color:#ffd60a8c}.guitar-chord-rhythm-hitline{background:var(--text);opacity:.4;height:2px;transition:background-color .12s,opacity .12s,box-shadow .12s;position:absolute;top:150px;left:0;right:0}.guitar-chord-rhythm-hitline.active{opacity:1;background:#ffd60a;box-shadow:0 0 10px 2px #ffd60a99}.guitar-chord-rhythm-timeline{background:var(--bg);border:1px solid var(--border);border-radius:12px;height:90px;position:relative;overflow:hidden}.guitar-chord-rhythm-hit-zone.timeline{border:none;border-left:1px dashed #ffffff24;border-right:1px dashed #ffffff24;width:56px;height:auto;inset:0 auto 0 calc(50% - 28px)}.guitar-chord-rhythm-playhead{background:var(--text);opacity:.4;width:2px;transition:background-color .12s,opacity .12s,box-shadow .12s;position:absolute;top:8px;bottom:8px;left:50%}.guitar-chord-rhythm-playhead.active{opacity:1;background:#ffd60a;box-shadow:0 0 10px 2px #ffd60a99}.guitar-chord-rhythm-chip{color:#fff;border:1px solid;border-radius:8px;justify-content:center;align-items:center;width:64px;height:40px;font-size:15px;font-weight:700;display:flex;position:absolute}.guitar-chord-rhythm-hint{color:#ffd60a;margin:0;font-size:13px;font-weight:590}.guitar-chord-rhythm-mic-status{color:var(--text-secondary);margin:0;font-size:13px;font-weight:590;transition:color .12s}.guitar-chord-rhythm-mic-status.good{color:#34c759}.guitar-chord-rhythm-mic-status.bad{color:var(--danger)}@keyframes guitar-chord-rhythm-mismatch-pulse{0%{box-shadow:0 0 0 2px #ff453a40}to{box-shadow:0 0 0 7px #ff453a73}}.guitar-chord-rhythm-block.mic-mismatch,.guitar-chord-rhythm-chip.mic-mismatch{animation:.4s ease-in-out infinite alternate guitar-chord-rhythm-mismatch-pulse}.guitar-chord-rhythm-score{color:var(--text-secondary);margin:0;font-size:14px;font-weight:590}.guitar-chord-rhythm-complete{color:var(--text);margin:0;font-size:15px;font-weight:700}.scale-practice-panel{gap:var(--space-4);flex-direction:column;display:flex}.scale-practice-controls{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.scale-practice-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:4px;font-size:11px;font-weight:590;display:flex}.scale-practice-field-label{text-align:center;height:13px;line-height:13px;display:block}.scale-practice-field-label.align-start{text-align:left}.scale-practice-field .mode-toggle,.scale-practice-field .play-button,.scale-practice-field .scale-practice-stepper,.scale-practice-field .scale-practice-switch{text-transform:none;letter-spacing:normal}.scale-practice-stepper{height:var(--control-height);box-sizing:border-box;border:1px solid var(--border);background:var(--surface);min-width:168px;box-shadow:var(--shadow-sm);border-radius:10px;align-items:stretch;display:inline-flex;overflow:hidden}.scale-practice-stepper-btn{width:32px;color:var(--text);cursor:pointer;background:0 0;border:none;flex:none;transition:background .15s,color .15s}.scale-practice-stepper-btn:hover:not(:disabled){background:#78788024}.scale-practice-stepper-btn:disabled{opacity:.3;cursor:default}.scale-practice-stepper-label{color:var(--text);white-space:nowrap;flex:auto;justify-content:center;align-items:center;padding:0 4px;font-size:14px;font-weight:590;display:flex}.scale-practice-switch{height:var(--control-height);box-sizing:border-box;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:14px;font-weight:590;display:inline-flex}.scale-practice-switch input{opacity:0;width:0;height:0;position:absolute}.scale-practice-switch-track{background:#7878803d;border-radius:999px;flex-shrink:0;width:44px;height:26px;transition:background .2s;position:relative}.scale-practice-switch-thumb{background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .2s cubic-bezier(.2,.8,.3,1);position:absolute;top:2px;left:2px;box-shadow:0 2px 5px #00000047}.scale-practice-switch input:checked+.scale-practice-switch-track{background:#34c759}.scale-practice-switch input:checked+.scale-practice-switch-track .scale-practice-switch-thumb{transform:translate(18px)}.scale-practice-switch input:focus-visible+.scale-practice-switch-track{outline:2px solid var(--accent);outline-offset:2px}.scale-practice-switch input:disabled+.scale-practice-switch-track{opacity:.4;cursor:not-allowed}.scale-practice-field select{height:var(--control-height);line-height:var(--control-height);box-sizing:border-box;text-transform:none;border:1px solid var(--border);background-color:var(--surface);min-width:120px;color:var(--text);box-shadow:var(--shadow-sm);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);background-position:calc(100% - 17px),calc(100% - 12px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;border-radius:10px;outline:none;padding:0 30px 0 10px;font-size:14px;font-weight:590}.scale-practice-field select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}.scale-practice-field select.scale-practice-select-narrow{text-align:center;text-align-last:center;width:64px;min-width:64px;padding:0 22px}.scale-practice-score{color:var(--text-secondary);margin:0;font-size:14px;font-weight:590}.scale-practice-mic-status{color:var(--text-secondary);margin:0;font-size:13px;font-weight:590}.scale-practice-complete{color:var(--text);margin:0;font-size:15px;font-weight:700}.scale-practice-transition-legend{align-items:center;gap:var(--space-4);color:var(--text-secondary);font-size:13px;font-weight:590;display:flex}.scale-practice-legend-item{align-items:center;gap:6px;display:inline-flex}.scale-practice-legend-swatch{box-sizing:border-box;border:2.5px solid;border-radius:50%;width:12px;height:12px}.scale-practice-legend-swatch-from{border-color:#a855f7}.scale-practice-legend-swatch-to{border-color:#34c759}.scale-practice-hint{color:var(--text-secondary);margin:0;font-size:13px}.practice-view{max-width:900px}.practice-view .subtitle{margin-top:0;margin-bottom:var(--space-6);color:var(--text-secondary);font-size:17px}.practice-view>*+*{margin-top:var(--space-5)}.practice-tabs{flex-wrap:wrap;margin:0}.practice-stats-bar+.practice-tabs{margin-top:10px}.practice-drills{gap:var(--space-5);flex-direction:column;display:flex}@media (width<=899px){.studies-layout{flex-direction:column}.studies-rail{flex:auto;width:100%}}@media (width<=899px){.studies-layout{flex-direction:column}.studies-rail{flex:auto;width:100%}}.scales-view{max-width:900px}.scales-controls{align-items:flex-end;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.scales-controls .mode-toggle{margin:0}.scales-field{color:var(--text-secondary);flex-direction:column;gap:4px;font-size:12px;font-weight:590;display:flex}.scales-field select,.scales-field input{color:var(--text);border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:6px 10px;font-size:14px;font-weight:590}.scales-field input[type=number]{width:70px}.scales-position-nav{align-items:center;gap:var(--space-3);display:flex}.scales-position-nav button{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:10px;padding:8px 14px;font-size:14px;font-weight:590}.scales-position-nav button:disabled{opacity:.4;cursor:default}.scales-practice{gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border);flex-direction:column;display:flex}.scales-loop-fields{gap:var(--space-4);display:flex}.scales-practice-buttons{gap:var(--space-3);flex-wrap:wrap;display:flex}.scales-finish-btn{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:999px;align-self:flex-start;padding:8px 16px;font-size:13px;font-weight:590}.scales-badges{gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.scales-badge{background:color-mix(in srgb, var(--scale-root-color) 16%, var(--bg));border:1px solid color-mix(in srgb, var(--scale-root-color) 35%, var(--border));color:var(--text);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:650}.technique-masters-view{gap:var(--space-5);flex-direction:column;max-width:720px;display:flex}.technique-masters-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:6px;max-width:260px;font-size:12px;font-weight:590;display:flex}.technique-masters-field select{border:1px solid var(--border);background:var(--bg);color:var(--text);text-transform:none;letter-spacing:normal;border-radius:9px;padding:8px 10px;font-size:14px;font-weight:500}.technique-masters-field select:focus{border-color:var(--accent);outline:none}.technique-masters-list{flex-direction:column;gap:14px;display:flex}.technique-masters-empty{color:var(--text-secondary);font-size:14px}.technique-masters-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:16px}.technique-masters-card-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.technique-masters-card-title{margin:0;font-size:16px}.technique-masters-focus{background:var(--accent-bg);color:var(--accent);white-space:nowrap;border-radius:999px;flex-shrink:0;padding:4px 10px;font-size:11px;font-weight:590}.technique-masters-description{color:var(--text);margin:8px 0 0;font-size:13px;line-height:1.5}.technique-masters-routine{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}.technique-masters-routine-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px;font-size:11px;font-weight:590}.technique-masters-routine p{color:var(--text);margin:0;font-size:13px;line-height:1.5}.technique-masters-visualize{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding-top:12px;display:flex}.technique-masters-visualize-btn{border:1px solid var(--technique-action-color,#ff2d55);color:var(--technique-action-color,#ff2d55);cursor:pointer;background:0 0;border-radius:9px;padding:7px 14px;font-size:13px;font-weight:590;transition:background .15s,color .15s}.technique-masters-visualize-btn.active{background:var(--technique-action-color,#ff2d55);color:#fff}.technique-masters-visualize-controls{align-items:center;gap:10px;display:flex}.technique-masters-visualize-controls button{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:9px;padding:6px 12px;font-size:13px;font-weight:590}.technique-masters-step-count{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:12px}.technique-masters-visualize-hint{color:var(--text-secondary);margin:8px 0 0;font-size:12px}.circle-of-fifths-diagram{width:100%;max-width:340px;height:auto;margin:0 auto;display:block}.circle-segment{fill:var(--surface);stroke:var(--bg);stroke-width:1.5px;cursor:pointer;transition:fill .15s}.circle-segment:hover{fill:color-mix(in srgb, var(--accent) 14%, var(--surface))}.circle-segment-minor{fill:color-mix(in srgb, var(--text-secondary) 10%, var(--surface))}.circle-segment-minor:hover{fill:color-mix(in srgb, var(--accent) 16%, var(--surface))}.circle-segment.selected{fill:var(--accent)}.circle-segment.selected.circle-segment-minor{fill:color-mix(in srgb, var(--accent) 55%, var(--surface))}.circle-segment.neighbor-iv,.circle-segment.neighbor-v{fill:color-mix(in srgb, var(--accent) 30%, var(--surface))}.circle-label-major{fill:var(--text);pointer-events:none;font-size:15px;font-weight:650}.circle-segment.selected~.circle-label-major,text.circle-label-major{fill:var(--text)}.circle-label-minor{fill:var(--text-secondary);pointer-events:none;font-size:11px;font-weight:590}.circle-degree-tag{fill:var(--accent);pointer-events:none;font-size:12px;font-weight:700}@media (width<=899px){.studies-layout{flex-direction:column}.studies-rail{flex:auto;width:100%}}.circle-of-fifths-view{max-width:900px}.circle-difficulty-badge{text-transform:uppercase;letter-spacing:.02em;border-radius:999px;width:max-content;margin:4px 0 0;padding:3px 10px;font-size:11px;font-weight:650;display:inline-block}.circle-difficulty-badge.beginner{background:color-mix(in srgb, #34c759 16%, var(--bg));color:#248a3d}.circle-difficulty-badge.intermediate{background:color-mix(in srgb, #ff9500 16%, var(--bg));color:#b06400}.circle-difficulty-badge.advanced{background:color-mix(in srgb, var(--danger) 16%, var(--bg));color:var(--danger)}.circle-diagram-wrap{align-items:flex-start;gap:var(--space-5);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.circle-controls{gap:var(--space-3);flex-direction:column;flex:220px;min-width:220px;display:flex}.circle-field{color:var(--text-secondary);flex-direction:column;gap:4px;font-size:12px;font-weight:590;display:flex}.circle-field select{color:var(--text);border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:6px 10px;font-size:14px;font-weight:590}.circle-key-summary{color:var(--text-secondary);margin:0;font-size:13px;line-height:1.5}.circle-exercise{gap:var(--space-3);margin-top:var(--space-4);flex-direction:column;display:flex}.circle-finish-btn{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:999px;align-self:flex-start;padding:8px 16px;font-size:13px;font-weight:590}@media (width<=899px){.studies-layout{flex-direction:column}.studies-rail{flex:auto;width:100%}}.harmony-view{max-width:900px}.harmony-demo{gap:var(--space-3);margin-top:var(--space-4);flex-direction:column;display:flex}.harmony-demo-controls{align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;display:flex}.harmony-demo-controls .mode-toggle{margin:0}.harmony-field{color:var(--text-secondary);flex-direction:column;gap:4px;font-size:12px;font-weight:590;display:flex}.harmony-field select{color:var(--text);border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:6px 10px;font-size:14px;font-weight:590}.harmony-chord-readout{color:var(--accent);margin:0;font-size:20px;font-weight:700}.harmony-demo-hint{color:var(--text-secondary);margin:0;font-size:12px}.harmony-diatonic-row,.harmony-progression-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.harmony-diatonic-chip,.harmony-progression-chip{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:8px 12px;transition:background .15s,border-color .15s;display:flex}.harmony-diatonic-chip:hover,.harmony-progression-chip:hover{background:#78788024}.harmony-diatonic-chip.active,.harmony-progression-chip.active{background:var(--accent-bg);border-color:var(--accent)}.harmony-diatonic-roman{color:var(--text);font-size:16px;font-weight:700}.harmony-diatonic-fn{text-transform:uppercase;letter-spacing:.02em;color:var(--text-secondary);font-size:10px;font-weight:590}.harmony-diatonic-chip.fn-tonic .harmony-diatonic-fn{color:#34c759}.harmony-diatonic-chip.fn-subdominant .harmony-diatonic-fn{color:#ff9500}.harmony-diatonic-chip.fn-dominant .harmony-diatonic-fn{color:var(--danger)}.harmony-progression-chordtext{color:var(--text-secondary);font-size:12px}.harmony-quiz{gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-4);border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;display:flex}.harmony-quiz-prompt{color:var(--text);margin:0;font-size:15px;font-weight:590}.harmony-quiz-notes{gap:var(--space-3);grid-template-columns:repeat(6,1fr);max-width:420px;display:grid}.harmony-quiz-note{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:8px;padding:10px 4px;font-size:13px;font-weight:650;transition:background .15s,border-color .15s,transform .12s}.harmony-quiz-note:hover:not(:disabled){background:#78788024}.harmony-quiz-note.picked{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.harmony-quiz-note.correct{color:#fff;background:#34c759;border-color:#34c759}.harmony-quiz-note.incorrect{background:var(--danger);border-color:var(--danger);color:#fff}.harmony-quiz-note.missed{color:#34c759;background:0 0;border-style:dashed;border-color:#34c759}.harmony-quiz-submit{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:999px;align-self:flex-start;padding:8px 16px;font-size:13px;font-weight:590}.harmony-quiz-submit:disabled{opacity:.4;cursor:default}.song-video-player{gap:var(--space-3);flex-direction:column;display:flex}.song-video-input-row{flex-direction:column;gap:6px;display:flex}.song-video-label{color:var(--text-secondary);font-size:13px;font-weight:590}.song-gp-import-row{align-items:center;gap:10px;display:flex}.song-yt-suggestion{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:center;gap:10px;padding:10px;display:flex}.song-yt-suggestion-thumb{object-fit:cover;border-radius:8px;flex-shrink:0;width:64px;height:48px}.song-yt-suggestion-info{flex-direction:column;flex:1;gap:2px;min-width:0;font-size:13px;display:flex}.song-yt-suggestion-info strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.song-yt-suggestion-info span{color:var(--text-secondary);font-size:12px}.song-video-input-group{gap:8px;display:flex}.song-video-input-group input{border:1px solid var(--border);background:var(--surface);min-width:0;color:var(--text);border-radius:12px;flex:1;padding:12px 14px;font-size:15px}.song-video-input-group input:focus{border-color:var(--accent);outline:none}.song-video-error{color:var(--danger);margin:0;font-size:13px}.song-video-frame-wrap{width:100%;box-shadow:var(--shadow-md);background:#000;border-radius:14px;padding-top:56.25%;position:relative;overflow:hidden}.song-video-frame,.song-video-frame-wrap iframe{border:none;width:100%;height:100%;position:absolute;inset:0}.song-video-layout{gap:var(--space-4);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;display:grid}@media (width<=720px){.song-video-layout{grid-template-columns:1fr}}.song-chord-timeline{background:var(--bg);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:8px;min-width:0;padding:14px;display:flex}.song-chord-mark-row{align-items:center;gap:8px;display:flex}.song-chord-mark-time{font-variant-numeric:tabular-nums;color:var(--text-secondary);flex-shrink:0;font-size:13px;font-weight:650}.song-chord-mark-row input{border:1px solid var(--border);background:var(--surface);min-width:0;color:var(--text);border-radius:9px;flex:1;padding:8px 10px;font-size:14px}.song-chord-mark-row input:focus{border-color:var(--accent);outline:none}.song-chord-hint{color:var(--text-secondary);margin:0;font-size:11px}.song-listen-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.song-listen-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:980px;padding:7px 14px;font-size:13px;font-weight:590}.song-listen-btn:hover:not(:disabled){background:#78788024}.song-listen-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.song-listen-btn:disabled{opacity:.5;cursor:default}.song-listen-guess{color:var(--text);align-items:center;gap:8px;font-size:13px;font-weight:590;display:flex}.song-listen-use{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:590}.song-listen-use:hover{background:var(--accent);color:#fff}.song-chord-list{flex-direction:column;gap:4px;max-height:260px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.song-chord-entry{border-radius:9px;align-items:center;gap:8px;padding:6px 8px;transition:background .15s;display:flex}.song-chord-entry.active{background:var(--accent-bg)}.song-chord-entry-time{font-variant-numeric:tabular-nums;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:2px 4px;font-size:12px}.song-chord-entry-time:hover{color:var(--accent)}.song-chord-entry-chord{color:var(--text);flex:1;font-size:15px;font-weight:650}.song-chord-entry.active .song-chord-entry-chord{color:var(--accent)}.song-chord-entry-remove{width:22px;height:22px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;font-size:15px;line-height:1}.song-chord-entry-remove:hover{color:var(--danger);background:#78788029}.song-chord-clear{border:1px solid var(--border);background:var(--surface);color:var(--danger);cursor:pointer;border-radius:999px;align-self:flex-start;padding:6px 12px;font-size:12px;font-weight:590}.song-chord-clear:hover{background:#78788024}.song-chord-list-actions{gap:8px;display:flex}.song-chord-export{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;align-self:flex-start;padding:6px 12px;font-size:12px;font-weight:590}.song-chord-export:hover{background:#78788024}.song-chord-import-row{border-top:1px solid var(--border);align-items:center;gap:10px;padding-top:8px;display:flex}.song-chord-file-input{display:none}.song-chord-import-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:590}.song-chord-import-btn:hover{background:#78788024}.song-chord-import-hint{color:var(--text-secondary);font-size:11px}.song-sync-panel{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding-top:8px;display:flex}.song-sync-sequence{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:9px;padding:8px 10px;font-size:14px}.song-sync-sequence:focus{border-color:var(--accent);outline:none}.song-sync-controls{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.song-sync-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:4px;font-size:11px;font-weight:590;display:flex}.song-sync-field input,.song-sync-field select{text-transform:none;letter-spacing:normal;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:9px;width:80px;padding:7px 9px;font-size:13px;font-weight:500}.song-sync-field input:focus,.song-sync-field select:focus{border-color:var(--accent);outline:none}.studies-view{max-width:900px}.studies-view .subtitle{margin-top:0;margin-bottom:var(--space-6);color:var(--text-secondary);font-size:17px}.studies-layout{align-items:flex-start;gap:var(--space-5);display:flex}.studies-rail{gap:var(--space-4);padding:var(--space-4);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:16px;flex-direction:column;flex:0 0 220px;display:flex}.studies-progress{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:12px;font-weight:650}.studies-stage-group{flex-direction:column;gap:2px;display:flex}.studies-stage-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px;font-size:11px;font-weight:650}.studies-lesson-btn{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:flex-start;align-items:center;gap:8px;padding:8px 10px;font-size:14px;font-weight:590;display:flex}.studies-lesson-btn:hover{background:#7878801f}.studies-lesson-btn.active{background:var(--accent-bg);color:var(--accent)}.studies-lesson-check{border:1px solid var(--border);text-align:center;border-radius:50%;flex-shrink:0;width:16px;height:16px;font-size:11px;line-height:14px}.studies-lesson-check.done{border-color:var(--accent);background:var(--accent);color:#fff}.studies-lesson{min-width:0;padding:var(--space-5) var(--space-6);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:16px;flex:auto}.studies-lesson-header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.studies-lesson-header h2{margin:0}.studies-complete-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;flex-shrink:0;padding:8px 16px;font-size:13px;font-weight:590}.studies-complete-btn.done{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}.studies-lesson-description{margin:var(--space-4) 0 0;color:var(--text-secondary);line-height:1.5}.studies-exercise{margin-top:var(--space-4)}.studies-load-exercise-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:590}.studies-nav{justify-content:space-between;gap:var(--space-3);margin-top:var(--space-6);display:flex}.studies-nav button{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:590}.studies-nav button:disabled{opacity:.4;cursor:default}@media (width<=899px){.studies-layout{flex-direction:column}.studies-rail{flex:auto;width:100%}}.circle-quiz{gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-4);border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;display:flex}.circle-quiz-prompt{color:var(--text);margin:0;font-size:15px;font-weight:590}.circle-quiz-options{gap:var(--space-2);flex-wrap:wrap;display:flex}.circle-quiz-choice{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:980px;padding:9px 16px;font-size:14px;font-weight:590;transition:background .15s,border-color .15s,transform .12s}.circle-quiz-choice:hover:not(:disabled){background:#78788024}.circle-quiz-choice:active:not(:disabled){transform:scale(.96)}.circle-quiz-choice:disabled{cursor:default}.circle-quiz-choice.correct{color:#fff;background:#34c759;border-color:#34c759}.circle-quiz-choice.incorrect{background:var(--danger);border-color:var(--danger);color:#fff}.circle-quiz-feedback{align-items:center;gap:var(--space-3);display:flex}.circle-quiz-result{font-size:14px;font-weight:650}.circle-quiz-result.correct{color:#34c759}.circle-quiz-result.incorrect{color:var(--danger)}.circle-quiz-next{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:590}.ear-training-mic-answer{background:var(--bg);border:1px dashed var(--border);border-radius:12px;flex-direction:column;gap:6px;padding:10px 14px;display:flex}.ear-training-mic-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.ear-training-mic-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:12px;font-weight:590}.ear-training-mic-toggle{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:980px;padding:7px 14px;font-size:13px;font-weight:590;transition:background .15s,border-color .15s,color .15s,transform .12s}.ear-training-mic-toggle:hover{background:#78788024}.ear-training-mic-toggle:active{transform:scale(.96)}.ear-training-mic-toggle.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.ear-training-mic-status{color:var(--text-secondary);margin:0;font-size:12px}.chords-by-ear-view{max-width:900px}.cbe-strategy-text{white-space:pre-line}.cbe-demo{gap:var(--space-3);margin-top:var(--space-4);flex-direction:column;display:flex}.cbe-controls{align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;display:flex}.cbe-controls .mode-toggle{margin:0}.cbe-field{color:var(--text-secondary);flex-direction:column;gap:4px;font-size:12px;font-weight:590;display:flex}.cbe-field select{color:var(--text);border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:6px 10px;font-size:14px;font-weight:590}.cbe-readout{color:var(--accent);margin:0;font-size:18px;font-weight:700}.cbe-hint{color:var(--text-secondary);margin:0;font-size:12px}.cbe-chip-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.cbe-chip{border:1px solid var(--border);background:var(--bg);border-radius:10px;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:8px 12px;transition:background .15s,border-color .15s;display:flex}button.cbe-chip{cursor:pointer}button.cbe-chip:hover{background:#78788024}.cbe-chip.active{background:var(--accent-bg);border-color:var(--accent)}.cbe-chip-roman{color:var(--text);font-size:15px;font-weight:700}.cbe-chip-text{color:var(--text-secondary);font-size:12px}.cbe-drill{gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-4);border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;display:flex}.cbe-drill-key{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:12px;font-weight:590}.cbe-drill-key strong{color:var(--text);text-transform:none}.cbe-fret-row{flex-wrap:wrap;gap:6px;display:flex}.cbe-fret-btn{border:1px solid var(--border);background:var(--bg);min-width:40px;color:var(--text);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:13px;font-weight:650;transition:background .15s,border-color .15s,color .15s;display:flex}.cbe-fret-btn:hover:not(:disabled){background:#78788024}.cbe-fret-num{color:var(--text-secondary);font-size:10px;font-weight:590}.cbe-fret-btn.picked{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.cbe-fret-btn.correct{color:#fff;background:#34c759;border-color:#34c759}.cbe-fret-btn.incorrect{background:var(--danger);border-color:var(--danger);color:#fff}.cbe-sequence-slots{gap:var(--space-3);flex-wrap:wrap;display:flex}.cbe-sequence-slot{flex-direction:column;gap:6px;min-width:130px;display:flex}.cbe-sequence-slot-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;margin:0;font-size:11px;font-weight:590}.cbe-sequence-slot-options{flex-direction:column;gap:4px;display:flex}.circle-quiz-choice.selected{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.cbe-sequence-freetext{gap:var(--space-2);flex-direction:column;display:flex}.cbe-sequence-input{color:var(--text);border:1px solid var(--border);background:var(--bg);border-radius:10px;padding:10px 12px;font-size:16px;font-weight:590}.cbe-sequence-chip{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;align-items:center;padding:6px 12px;font-size:14px;font-weight:650;display:inline-flex}.cbe-sequence-chip.correct{color:#fff;background:#34c759;border-color:#34c759}.cbe-sequence-chip.incorrect{background:var(--danger);border-color:var(--danger);color:#fff}.cbe-sequence-submit{align-self:flex-start}.cbe-mini-chord-row{gap:var(--space-3);flex-wrap:wrap;display:flex}.cbe-mini-chord{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;transition:background .15s,border-color .15s;display:flex}.cbe-mini-chord:hover{background:#78788024}.cbe-mini-chord.active{background:var(--accent-bg);border-color:var(--accent)}.cbe-mini-chord-degree{color:var(--text);font-size:15px;font-weight:700}.cbe-mini-chord-svg{display:block}.cbe-mini-chord-text{color:var(--text-secondary);font-size:11px;font-weight:590}.staff-notation{border:1px solid var(--border);background:#fff;border-radius:14px;justify-content:center;padding:8px;display:flex}.staff-notation svg{max-width:100%;height:auto}.grand-staff{flex-direction:column;align-items:center;gap:4px;display:flex}.piano-view{max-width:900px}.studies-section .subtitle{margin-top:0;margin-bottom:var(--space-5);color:var(--text-secondary);font-size:17px}.studies-course-tabs{gap:var(--space-2);margin:0 0 var(--space-2);flex-wrap:wrap;display:flex}.studies-course-tabs button{height:var(--control-height);border:1px solid var(--border);background:var(--surface);color:var(--text);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;border-radius:999px;padding:0 14px;font-size:14px;font-weight:590;transition:background .15s,border-color .15s,color .15s}.studies-course-tabs button:hover{background:#7878801f}.studies-course-tabs button.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.tab-viewer{flex-direction:column;gap:12px;display:flex}.tab-viewer-upload{background:var(--accent);color:#fff;cursor:pointer;border-radius:980px;align-self:flex-start;align-items:center;gap:10px;padding:10px 20px;font-size:14px;font-weight:590;display:inline-flex}.tab-viewer-upload input[type=file]{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.tab-viewer-status{color:var(--text-secondary);margin:0;font-size:13px}.tab-viewer-error{color:var(--danger)}.tab-viewer-meta{color:var(--text);font-size:15px}.tab-viewer-artist{color:var(--text-secondary);font-weight:400}.tab-viewer-surface{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:100%;min-height:200px;overflow-x:auto}.tab-pdf-importer{flex-direction:column;gap:12px;display:flex}.tab-pdf-hint{color:var(--text-secondary);font-size:13px}.tab-pdf-upload-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.tab-pdf-file-input{display:none}.tab-pdf-upload-btn,.tab-pdf-play-btn,.tab-pdf-stop-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;flex-shrink:0;padding:8px 16px;font-size:13px;font-weight:590}.tab-pdf-play-btn,.tab-pdf-stop-btn{width:110px;height:var(--control-height);white-space:nowrap}.tab-pdf-upload-btn:hover,.tab-pdf-play-btn:hover:not(:disabled),.tab-pdf-stop-btn:hover:not(:disabled){background:#78788024}.tab-pdf-play-btn{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.tab-pdf-stop-btn{border-color:var(--danger);color:var(--danger);background:#ff3b301a}.tab-pdf-play-btn:disabled,.tab-pdf-stop-btn:disabled{opacity:.6;cursor:default}.tab-pdf-filename{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;max-width:220px;font-size:13px;overflow:hidden}.tab-pdf-status{color:var(--text-secondary);margin:0;font-size:13px}.tab-pdf-error{color:var(--danger);margin:0;font-size:13px}.tab-pdf-ocr-progress{flex-direction:column;gap:6px;display:flex}.tab-pdf-progress-track{background:#78788029;border-radius:999px;height:6px;overflow:hidden}.tab-pdf-progress-fill{background:var(--accent);height:100%;transition:width .2s}.tab-pdf-review{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding-top:8px;display:flex}.tab-pdf-ocr-note{color:var(--text-secondary);background:#ff9f0a1a;border-radius:10px;margin:0;padding:8px 10px;font-size:12px}.tab-pdf-review-label{color:var(--text-secondary);font-size:12px;font-weight:590}.tab-pdf-rows-textarea{font-family:var(--mono);white-space:pre;border:1px solid var(--border);background:var(--bg);color:var(--text);resize:vertical;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.5;overflow-x:auto}.tab-pdf-ready{border-top:1px solid var(--border);flex-direction:column;gap:10px;padding-top:8px;display:flex}.tab-pdf-controls{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.tab-pdf-speed-field{color:var(--text-secondary);flex-direction:column;gap:4px;font-size:12px;font-weight:590;display:flex}.tab-pdf-speed-field select{height:var(--control-height)}.tab-pdf-tuning-note{color:var(--text-secondary);margin:0;font-size:12px}.tab-upload-panel{flex-direction:column;gap:12px;display:flex}.tab-upload-panel-upload{background:var(--accent);color:#fff;cursor:pointer;border-radius:980px;align-self:flex-start;align-items:center;gap:10px;padding:10px 20px;font-size:14px;font-weight:590;display:inline-flex}.tab-upload-panel-upload input[type=file]{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.tab-upload-panel-error{color:var(--danger);margin:0;font-size:13px}.songs-view{max-width:640px}.songs-view .subtitle{margin-top:0;margin-bottom:var(--space-6);color:var(--text-secondary);font-size:17px}.songs-view>*+*{margin-top:var(--space-5)}.songs-mode-field{color:var(--text-secondary);flex-direction:column;gap:6px;font-size:13px;font-weight:590;display:flex}.songs-mode-field select{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:6px 12px;font-size:15px;font-weight:500}.songs-mode-field select:focus{border-color:var(--accent);outline:none}.songs-search-field{flex-direction:column;gap:6px;display:flex}.songs-search-field label{color:var(--text-secondary);font-size:13px;font-weight:590}.songs-search-field input{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 14px;font-size:17px}.songs-search-field input:focus{border-color:var(--accent);outline:none}.songs-destinations{gap:var(--space-3);flex-direction:column;display:flex}.songs-destinations-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:12px;font-weight:650}.songs-destination-card{background:var(--surface);border:1px solid var(--border);min-height:44px;box-shadow:var(--shadow-sm);color:var(--text);border-radius:14px;justify-content:space-between;align-items:center;padding:14px 18px;font-size:15px;font-weight:590;text-decoration:none;transition:background .15s,transform .12s;display:flex}.songs-destination-card:hover{background:var(--accent-bg);color:var(--accent)}.songs-destination-card:active{transform:scale(.99)}.songs-destination-arrow{color:var(--text-secondary);font-size:16px}.songs-empty-hint{color:var(--text-secondary);font-size:15px}.vocal-training-view{gap:var(--space-4);flex-direction:column;display:flex}.vocal-controls{gap:var(--space-3);flex-wrap:wrap;display:flex}.vocal-field{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;gap:4px;font-size:11px;font-weight:590;display:flex}.vocal-field select{text-transform:none;letter-spacing:normal;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;min-width:120px;padding:9px 11px;font-size:14px;font-weight:500}.vocal-field select:focus{border-color:var(--accent);outline:none}.vocal-session{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--bg);border:1px solid var(--border);border-radius:16px;flex-direction:column;display:flex}.vocal-toggle-btn{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:980px;padding:10px 28px;font-size:15px;font-weight:600}.vocal-toggle-btn:hover{background:var(--accent);color:#fff}.vocal-error{color:var(--danger);margin:0;font-size:13px}.vocal-target{flex-direction:column;align-items:center;gap:2px;display:flex}.vocal-target-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:590}.vocal-target-note{color:var(--text);font-size:44px;font-weight:700;line-height:1.1}.vocal-meter{background:var(--surface);border:1px solid var(--border);border-radius:999px;width:100%;max-width:420px;height:14px;position:relative;overflow:hidden}.vocal-meter-zone{background:#34c75940;position:absolute;top:0;bottom:0}.vocal-meter-center{background:var(--border);width:1px;position:absolute;top:0;bottom:0;left:50%}.vocal-meter-needle{background:var(--accent);border-radius:999px;width:4px;transition:left 60ms linear;position:absolute;top:-3px;bottom:-3px;transform:translate(-50%)}.vocal-meter-needle.matched{background:#34c759}.vocal-hold-bar{background:var(--surface);border:1px solid var(--border);border-radius:999px;width:100%;max-width:420px;height:6px;overflow:hidden}.vocal-hold-fill{background:#34c759;height:100%;transition:width 80ms linear}.vocal-sequence{flex-wrap:wrap;justify-content:center;gap:6px;max-width:480px;display:flex}.vocal-seq-note{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:999px;padding:4px 9px;font-size:12px;font-weight:600}.vocal-seq-note.current{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}.vocal-seq-note.done{color:#34c759;border-color:#34c759}.vocal-skip-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:590}.vocal-skip-btn:hover{background:#78788024}.vocal-complete{flex-direction:column;align-items:center;gap:10px;display:flex}.vocal-complete p{color:var(--text);margin:0;font-size:15px;font-weight:600}.vocal-again-btn{border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:980px;padding:7px 18px;font-size:13px;font-weight:590}.vocal-again-btn:hover{background:var(--accent);color:#fff}.vocal-score{color:var(--text-secondary);margin:0;font-size:13px;font-weight:590}.note-color-legend{width:100%;color:var(--text-secondary);flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin:0;font-size:12px;font-weight:500;display:flex}.note-color-legend-item{align-items:center;gap:6px;display:inline-flex}.note-color-legend-swatch{border-radius:50%;flex-shrink:0;width:11px;height:11px}.no-positions{color:var(--danger);margin:8px 0 0;font-size:14px}