@keyframes vinyl-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vinyl-spin{animation:2s linear infinite vinyl-rotate}.vinyl-paused{animation-play-state:paused}:root{--primary:#2a6900;--primary-container:#84fb42;--primary-dim:#235b00;--on-primary:#d5ffb9;--on-primary-container:#245c00;--secondary:#8a2ab9;--secondary-container:#eec2ff;--secondary-dim:#7c18ac;--on-secondary:#feeeff;--on-secondary-container:#7303a3;--tertiary:#725800;--tertiary-container:#fec700;--on-tertiary-container:#574300;--background:#f6f6f6;--surface:#f6f6f6;--surface-lowest:#fff;--surface-low:#f0f1f1;--surface-container:#e7e8e8;--surface-high:#e1e3e3;--surface-highest:#dbdddd;--on-background:#2d2f2f;--on-surface:#2d2f2f;--on-surface-variant:#5a5c5c;--outline:#767777;--outline-variant:#acadad;--error:#b02500;--error-container:#f95630;--success:#2a6900;--warning:#fec700;--info:#1cb0f6;--radius-sm:8px;--radius-md:16px;--radius-lg:32px;--radius-xl:48px;--radius-full:9999px;--shadow-ambient:0 20px 40px #2d2f2f0f;--shadow-sm:0 2px 8px #0000000a;--shadow-glow-a:0 10px 30px #2a69004d;--shadow-glow-b:0 10px 30px #8a2ab94d;--transition-speed:.2s}.material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24}:focus-visible{outline:3px solid var(--primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}.view{opacity:0;transition:opacity .15s}.view--active,.view--visible{opacity:1}.view--visible>:first-child{animation:.25s both view-enter}@keyframes view-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.nav-btn--active{box-shadow:0 2px 8px #0000000a;color:#2a6900!important;background:#84fb42!important}.mode-btn--active{box-shadow:0 2px 8px #0000000a;color:#fff!important;background:#2a6900!important}.midi-status:before{content:"";background:var(--outline-variant);border-radius:50%;flex-shrink:0;width:7px;height:7px;margin-right:7px;display:inline-block}.midi-status.connected{color:var(--primary);border-color:var(--primary);animation:2s ease-in-out infinite pulse-connected}.midi-status.connected:before{background:var(--primary)}.midi-status.disconnected{color:var(--error);border-color:var(--error)}.midi-status.disconnected:before{background:var(--error)}.midi-status.no-midi{color:var(--outline);border-color:var(--outline-variant)}.midi-status.no-midi:before{background:var(--outline)}@keyframes pulse-connected{0%,to{box-shadow:0 0 4px #2a690033}50%{box-shadow:0 0 10px #2a690059,0 0 18px #2a69001a}}input[type=range]{appearance:none;cursor:pointer;background:0 0}input[type=range]::-webkit-slider-track{background:var(--surface-high);border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--on-surface);border:none;border-radius:4px;width:20px;height:12px}input[type=range][orient=vertical]{writing-mode:vertical-lr;direction:rtl}.fader[orient=vertical]{width:28px;height:100px}.fader[orient=vertical]::-webkit-slider-track{background:var(--surface-high);border-radius:9999px;width:6px;height:100%}.fader[orient=vertical]::-webkit-slider-thumb{background:var(--surface-lowest);border:2px solid var(--surface-high);border-radius:5px;width:22px;height:10px;box-shadow:0 2px 6px #0000001a}.fader.accent-primary::-webkit-slider-thumb{border-color:var(--primary-container)}.fader.accent-secondary::-webkit-slider-thumb{border-color:var(--secondary-container)}.knob[orient=vertical]{width:28px;height:60px}.knob[orient=vertical]::-webkit-slider-track{background:var(--surface-high);border-radius:3px;width:6px;height:100%}.knob[orient=vertical]::-webkit-slider-thumb{border-radius:4px;width:18px;height:10px}.knob.accent-primary::-webkit-slider-thumb{background:var(--primary)}.knob.accent-secondary::-webkit-slider-thumb{background:var(--secondary)}.crossfader-section__input::-webkit-slider-track{background:var(--surface-high);border-radius:9999px;height:6px}.crossfader-section__input::-webkit-slider-thumb{background:var(--on-surface);border-radius:4px;width:14px;height:24px}.practice-empty-state[hidden]{display:none}.lesson-panel{transition:max-height .3s,opacity .3s,padding .3s}.lesson-panel--collapsed{opacity:0;padding:0;overflow:hidden;max-height:0!important}.lesson-phase{flex-direction:column;gap:10px;display:flex}.phase-badge{text-transform:uppercase;letter-spacing:.12em;border-radius:var(--radius-full);width:fit-content;padding:3px 14px;font-size:11px;font-weight:800;display:inline-block}.lesson-phase--watch .phase-badge{color:var(--info);background:#1cb0f61f}.lesson-phase--imagine .phase-badge{color:var(--secondary);background:#eec2ff66}.lesson-phase--do .phase-badge{color:var(--primary);background:#84fb4233}.lesson-instruction{color:var(--on-surface);font-size:16px;font-weight:500;line-height:1.6}.lesson-hint{color:var(--on-surface-variant);font-size:12px;font-style:italic}.lesson-meta{color:var(--on-surface-variant);font-variant-numeric:tabular-nums;font-size:12px;font-weight:500}.imagine-timer{background:var(--surface-high);border-radius:2px;height:4px;margin-top:6px;overflow:hidden}.imagine-timer__bar{background:linear-gradient(90deg, var(--secondary), var(--secondary-container));transform-origin:0;border-radius:2px;height:100%;animation:linear forwards imagine-countdown}@keyframes imagine-countdown{0%{width:100%}to{width:0%}}.lesson-target{background:var(--surface-container);border-radius:var(--radius-sm);border:1px solid var(--outline-variant);align-items:center;gap:10px;width:fit-content;padding:8px 14px;display:flex}.lesson-target__label{text-transform:uppercase;letter-spacing:.08em;color:var(--on-surface-variant);font-size:11px;font-weight:700}.lesson-target__value{color:var(--primary);font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.lesson-session-start{flex-direction:column;gap:12px;display:flex}.lesson-title{text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface);font-size:15px;font-weight:800}.lesson-session-list{flex-direction:column;gap:6px;list-style:none;display:flex}.lesson-session-item{color:var(--on-surface);align-items:center;gap:10px;padding:6px 0;font-size:13px;display:flex}.lesson-session-num{color:var(--on-surface-variant);background:var(--surface-container);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:700;display:flex}.lesson-session-name{flex:1;font-weight:500}.lesson-session-cat{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}.lesson-start-btn{align-self:flex-start;margin-top:6px}.lesson-score{text-align:center;flex-direction:column;align-items:center;gap:6px;padding:10px;display:flex}.lesson-score__value{font-variant-numeric:tabular-nums;font-size:40px;font-weight:900}.lesson-score--perfect .lesson-score__value{color:var(--success)}.lesson-score--good .lesson-score__value{color:var(--info)}.lesson-score--ok .lesson-score__value{color:var(--warning)}.lesson-score--miss .lesson-score__value{color:var(--error)}.lesson-score__label{text-transform:uppercase;letter-spacing:.1em;color:var(--on-surface-variant);font-size:12px;font-weight:700}.lesson-score__perfect{color:var(--success);text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:800;animation:.3s score-pop}@keyframes score-pop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.lesson-score__breakdown{color:var(--on-surface-variant);font-variant-numeric:tabular-nums;gap:14px;font-size:11px;font-weight:500;display:flex}.lesson-complete{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.lesson-complete__title{text-transform:uppercase;letter-spacing:.1em;color:var(--on-surface-variant);font-size:13px;font-weight:700}.lesson-complete__score{color:var(--primary);font-variant-numeric:tabular-nums;font-size:48px;font-weight:900}.lesson-complete__pb{color:var(--success);text-transform:uppercase;font-size:13px;font-weight:800;animation:.4s score-pop}.lesson-complete__stats{color:var(--on-surface-variant);font-size:12px;font-weight:500}.lesson-complete__hint{color:var(--on-surface-variant);margin-top:4px;font-size:12px;font-style:italic}.lesson-progress-bar{background:var(--surface-high);border-radius:3px;height:6px;margin:4px 0;overflow:hidden}.lesson-progress-bar__fill{background:linear-gradient(90deg, var(--primary), var(--primary-container));border-radius:3px;height:100%;transition:width .3s}.lesson-highlight{z-index:1;animation:1.5s ease-in-out infinite highlight-pulse;position:relative}.lesson-highlight--target:after{content:"";border:2px dashed var(--primary);border-radius:var(--radius-sm);pointer-events:none;opacity:.5;position:absolute;inset:-4px}.lesson-highlight--arrow:before{content:"▸";color:var(--primary);pointer-events:none;font-size:14px;animation:1s ease-in-out infinite arrow-bounce;position:absolute;top:50%;left:-16px;transform:translateY(-50%)}@keyframes highlight-pulse{0%,to{box-shadow:0 0 8px #2a690033}50%{box-shadow:0 0 16px #2a690066,0 0 24px #2a69001a}}@keyframes arrow-bounce{0%,to{transform:translateY(-50%)translate(0)}50%{transform:translateY(-50%)translate(4px)}}.feedback-hit{transition:box-shadow 50ms;box-shadow:0 0 12px #2a690099,0 0 24px #2a690033!important}.feedback-hot{transition:box-shadow 50ms;box-shadow:0 0 10px #fec70080,0 0 20px #fec70026!important}.feedback-warm{transition:box-shadow 50ms;box-shadow:0 0 8px #ff8c0066,0 0 16px #ff8c0026!important}.feedback-cold{transition:box-shadow 50ms;box-shadow:0 0 8px #b0250066,0 0 16px #b0250026!important}.toast{z-index:8000;border:1px solid var(--outline-variant);border-radius:var(--radius-md);color:var(--on-surface);pointer-events:none;opacity:0;text-align:center;-webkit-backdrop-filter:blur(12px);max-width:400px;box-shadow:var(--shadow-ambient);background:#ffffffeb;padding:12px 24px;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;transition:opacity .3s,transform .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(20px)}.toast--visible{opacity:1;transform:translate(-50%)translateY(0)}.toast--exiting{opacity:0;transform:translate(-50%)translateY(20px)}.error-overlay{z-index:10000;opacity:0;background:#f6f6f6f5;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .3s;display:flex;position:fixed;inset:0}.error-overlay--visible{opacity:1}.error-overlay__title{text-transform:uppercase;letter-spacing:.1em;color:var(--error);font-size:20px;font-weight:800}.error-overlay__message{color:var(--on-surface-variant);text-align:center;max-width:420px;font-size:14px;line-height:1.6}.error-overlay__btn{border-color:var(--outline-variant);color:var(--on-surface);border-radius:var(--radius-full);background:var(--surface-lowest);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--outline-variant);transition:all var(--transition-speed) ease;margin-top:12px;padding:8px 24px;font-family:Plus Jakarta Sans,sans-serif;font-size:13px;font-weight:700}.error-overlay__btn:hover{border-color:var(--on-surface);background:var(--surface-container)}.startup-overlay{z-index:9500;cursor:pointer;opacity:0;background:#f6f6f6fa;justify-content:center;align-items:center;transition:opacity .4s;display:flex;position:fixed;inset:0}.startup-overlay--visible{opacity:1}.startup-overlay__content{text-align:center}.startup-overlay__title{letter-spacing:.08em;text-transform:lowercase;color:var(--primary);margin-bottom:16px;font-size:48px;font-weight:900}.startup-overlay__subtitle{color:var(--on-surface-variant);letter-spacing:.06em;font-size:14px;font-weight:500;animation:2s ease-in-out infinite pulse-subtle}@keyframes pulse-subtle{0%,to{opacity:.4}50%{opacity:1}}.min-width-overlay--visible{display:flex!important}.session-complete__icon{color:var(--tertiary-container);font-size:64px}.session-complete__title{color:var(--on-surface);font-size:32px;font-weight:900}.session-complete__score{color:var(--primary);font-variant-numeric:tabular-nums;font-size:64px;font-weight:900}.session-complete__label{text-transform:uppercase;letter-spacing:.1em;color:var(--on-surface-variant);margin-top:-16px;font-size:13px;font-weight:700}.session-complete__metrics{gap:24px;display:flex}.session-complete__metric{flex-direction:column;align-items:center;gap:4px;display:flex}.session-complete__metric-value{color:var(--primary);font-size:24px;font-weight:900}.session-complete__metric-label{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant);font-size:11px;font-weight:700}.session-complete__streak{background:var(--tertiary-container);color:var(--on-tertiary-container);border-radius:var(--radius-full);align-items:center;gap:8px;padding:8px 20px;font-size:15px;font-weight:800;display:flex}.session-complete__actions{gap:12px;margin-top:8px;display:flex}.btn{text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--outline-variant);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-speed) ease;background:var(--surface-lowest);color:var(--on-surface);padding:8px 20px;font-family:Plus Jakarta Sans,sans-serif;font-size:13px;font-weight:700}.btn:hover{background:var(--surface-container);border-color:var(--outline)}.btn--play{background:var(--primary);color:#fff;border-color:var(--primary);padding:10px 24px;font-weight:800}.btn--play:hover{background:var(--primary-dim);border-color:var(--primary-dim)}.waveform-display--a.drop-active{box-shadow:inset 0 0 24px #2a69000f,0 0 16px #2a69001a;border:2px dashed var(--primary)!important}.waveform-display--b.drop-active{box-shadow:inset 0 0 24px #8a2ab90f,0 0 16px #8a2ab91a;border:2px dashed var(--secondary)!important}.demo-tracks-btn:disabled{opacity:.6;cursor:not-allowed}.fader-track{background:var(--surface-container-high,#e1e3e3);border-radius:9999px;justify-content:center;align-items:center;width:28px;height:120px;display:flex;position:relative}.fader-track .fader{appearance:none;writing-mode:vertical-lr;cursor:pointer;direction:rtl;background:0 0;width:28px;height:100px}.fader-track .fader::-webkit-slider-track{background:0 0;border-radius:9999px;width:8px}.fader-track .fader::-webkit-slider-thumb{-webkit-appearance:none;background:var(--surface-container-lowest,#fff);border:2px solid var(--outline-variant,#acadad);cursor:grab;border-radius:6px;width:24px;height:12px;box-shadow:0 2px 6px #00000026}.knob-rotary-container{background:var(--surface-container-high,#e1e3e3);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex;position:relative;box-shadow:inset 0 2px 4px #0000000d}.knob-rotary-container .knob{appearance:none;cursor:pointer;opacity:0;z-index:2;background:0 0;border-radius:50%;width:48px;height:48px;position:absolute;inset:0}.knob-rotary-container:after{content:"";background:var(--primary,#2a6900);border-radius:50%;width:6px;height:6px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.deck--b .knob-rotary-container:after{background:var(--secondary,#8a2ab9)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--primary:#84fb42;--primary-container:#1d5200;--primary-dim:#6de030;--on-primary:#0d3900;--on-primary-container:#a5ff6e;--secondary:#d9a5ff;--secondary-container:#5e0089;--secondary-dim:#c88af5;--on-secondary:#3a0057;--on-secondary-container:#eec2ff;--tertiary:#fec700;--tertiary-container:#4a3800;--on-tertiary-container:#ffe08a;--background:#1a1c1c;--surface:#1a1c1c;--surface-lowest:#111313;--surface-low:#1e2020;--surface-container:#252727;--surface-high:#2f3131;--surface-highest:#3a3c3c;--on-background:#e2e3e3;--on-surface:#e2e3e3;--on-surface-variant:#c0c1c1;--outline:#9a9b9b;--outline-variant:#454747;--error:#ff7a56;--error-container:#8c1d00;--success:#84fb42;--shadow-ambient:0 20px 40px #0000004d;--shadow-sm:0 2px 8px #0003;--shadow-glow-a:0 10px 30px #84fb4233;--shadow-glow-b:0 10px 30px #d9a5ff33}}[data-theme=dark]{--primary:#84fb42;--primary-container:#1d5200;--primary-dim:#6de030;--on-primary:#0d3900;--on-primary-container:#a5ff6e;--secondary:#d9a5ff;--secondary-container:#5e0089;--secondary-dim:#c88af5;--on-secondary:#3a0057;--on-secondary-container:#eec2ff;--tertiary:#fec700;--tertiary-container:#4a3800;--on-tertiary-container:#ffe08a;--background:#1a1c1c;--surface:#1a1c1c;--surface-lowest:#111313;--surface-low:#1e2020;--surface-container:#252727;--surface-high:#2f3131;--surface-highest:#3a3c3c;--on-background:#e2e3e3;--on-surface:#e2e3e3;--on-surface-variant:#c0c1c1;--outline:#8a8b8b;--outline-variant:#454747;--error:#ff7a56;--error-container:#8c1d00;--success:#84fb42;--shadow-ambient:0 20px 40px #0000004d;--shadow-sm:0 2px 8px #0003;--shadow-glow-a:0 10px 30px #84fb4233;--shadow-glow-b:0 10px 30px #d9a5ff33}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .toast{background:#252727eb}:root:not([data-theme=light]) .error-overlay{background:#1a1c1cf5}:root:not([data-theme=light]) .startup-overlay{background:#1a1c1cfa}}[data-theme=dark] .toast{background:#252727eb}[data-theme=dark] .error-overlay{background:#1a1c1cf5}[data-theme=dark] .startup-overlay{background:#1a1c1cfa}