@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap";: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:#454747;--outline:#5e6060;--outline-variant:#8a8b8b;--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}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:3px solid var(--primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}.transport-btn:focus-visible,.pad-btn:focus-visible{outline-color:var(--primary-container)}body{background:var(--background);color:var(--on-background);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Plus Jakarta Sans,sans-serif;font-size:15px;line-height:1.5;overflow:hidden}#app{background:var(--background);grid-template-rows:64px 1fr;grid-template-areas:"topbar""content";gap:0;height:100vh;display:grid}.glow-a{box-shadow:0 0 12px #2a690033,0 0 24px #2a690014}.glow-b{box-shadow:0 0 12px #8a2ab933,0 0 24px #8a2ab914}.glow-a-strong{box-shadow:0 0 18px #2a690066,0 0 36px #2a690026}.glow-b-strong{box-shadow:0 0 18px #8a2ab966,0 0 36px #8a2ab926}.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)}.btn--transport{border:2px solid var(--outline-variant);color:var(--on-surface);background:0 0}.btn--transport:hover{border-color:var(--on-surface);background:var(--surface-container)}.btn--load{color:var(--on-surface-variant);border-radius:var(--radius-sm);background:0 0;border-color:#0000}.btn--load:hover{background:var(--surface-container);color:var(--on-surface)}.btn--deck-a,.btn--accent-a{border-color:var(--primary);color:var(--primary)}.btn--deck-a:hover,.btn--accent-a:hover{background:#84fb4226;box-shadow:0 0 12px #2a690033}.btn--deck-b,.btn--accent-b{border-color:var(--secondary);color:var(--secondary)}.btn--deck-b:hover,.btn--accent-b:hover{background:#eec2ff4d;box-shadow:0 0 12px #8a2ab933}.btn--ghost{border-color:var(--outline-variant);color:var(--on-surface-variant);background:0 0}.btn--ghost:hover{border-color:var(--on-surface);color:var(--on-surface);background:var(--surface-container)}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}label{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant);font-size:12px;font-weight:700}.deck-badge{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);padding:2px 10px;font-size:11px;font-weight:800;display:inline-block}.deck-badge--a{color:var(--primary);background:#84fb4233}.deck-badge--b{color:var(--secondary);background:#eec2ff66}.pad-btn{border-radius:var(--radius-sm);border:2px solid var(--outline-variant);background:var(--surface-lowest);width:36px;height:36px;color:var(--on-surface);cursor:pointer;transition:all var(--transition-speed) ease;font-family:Plus Jakarta Sans,sans-serif;font-size:13px;font-weight:700}.pad-btn--a{border-color:var(--primary);color:var(--primary)}.pad-btn--a:hover,.pad-btn--a:active{background:#84fb4226}.pad-btn--b{border-color:var(--secondary);color:var(--secondary)}.pad-btn--b:hover,.pad-btn--b:active{background:#eec2ff4d}.btn,.mode-btn,input[type=range]{transition:all var(--transition-speed) ease}.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{z-index:9999;background:var(--background);flex-direction:column;justify-content:center;align-items:center;gap:8px;display:none;position:fixed;inset:0}.min-width-overlay--visible{display:flex}.min-width-overlay p{text-transform:uppercase;letter-spacing:.1em;color:var(--on-surface);font-size:18px;font-weight:800}.min-width-overlay span{color:var(--on-surface-variant);font-size:13px}.practice-empty-state{text-align:center;color:var(--on-surface);flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;padding:48px 24px;display:flex}.practice-empty-state[hidden]{display:none}.demo-tracks-btn{color:var(--on-primary);background:var(--primary);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-speed) ease;border:none;align-items:center;gap:6px;margin-top:16px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:700;display:inline-flex}.demo-tracks-btn:hover{background:var(--primary-dim);box-shadow:var(--shadow-glow-a)}.demo-tracks-btn:disabled{opacity:.6;cursor:not-allowed}.settings-select{color:var(--on-surface);background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-speed) ease;padding:6px 12px;font-family:inherit;font-size:13px;font-weight:500}.settings-select:hover{border-color:var(--primary)}.drop-active{transition:all var(--transition-speed) ease}@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}.top-bar{background:var(--surface-lowest);border-radius:0 0 var(--radius-md) var(--radius-md);height:64px;box-shadow:var(--shadow-ambient);z-index:10;grid-area:topbar;justify-content:space-between;align-items:center;padding:0 20px;display:flex}.top-bar__brand{align-items:baseline;gap:10px;display:flex}.top-bar__brand .top-bar__title{color:var(--primary);letter-spacing:.04em;font-size:20px;font-weight:900}.top-bar__logo{width:auto;height:24px}.top-bar__subtitle{color:var(--on-surface-variant);font-size:13px;font-weight:500}.top-bar__right{align-items:center;gap:12px;display:flex}.streak-badge{background:var(--tertiary-container);border-radius:var(--radius-full);color:var(--on-tertiary-container);border:none;align-items:center;gap:4px;padding:4px 14px;font-size:13px;font-weight:800;display:flex}.streak-badge .streak-icon{color:var(--on-tertiary-container);font-size:18px}.streak-badge .streak-count{font-variant-numeric:tabular-nums}.midi-status{color:var(--on-surface-variant);border:2px solid var(--outline-variant);border-radius:var(--radius-full);align-items:center;padding:4px 14px;font-size:12px;font-weight:600;display:flex}.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}}.top-bar__nav{background:var(--surface-container);border-radius:var(--radius-full);gap:0;padding:3px;display:flex}.nav-btn{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);cursor:pointer;color:var(--on-surface-variant);transition:all var(--transition-speed) ease;background:0 0;border:none;align-items:center;gap:5px;padding:6px 14px;font-family:Plus Jakarta Sans,sans-serif;font-size:11px;font-weight:700;display:flex}.nav-btn .material-symbols-outlined{font-size:18px}.nav-btn:hover{color:var(--on-surface)}.nav-btn--active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.mode-btn{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);cursor:pointer;color:var(--on-surface-variant);transition:all var(--transition-speed) ease;background:0 0;border:none;align-items:center;gap:6px;padding:6px 16px;font-family:Plus Jakarta Sans,sans-serif;font-size:12px;font-weight:700;display:flex}.mode-btn:hover{color:var(--on-surface)}.mode-btn--active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.top-bar__settings-btn{border-radius:var(--radius-full);cursor:pointer;width:36px;height:36px;color:var(--on-surface-variant);transition:all var(--transition-speed) ease;background:0 0;border:none;justify-content:center;align-items:center;display:flex}.top-bar__settings-btn:hover{background:var(--surface-container);color:var(--on-surface)}.top-bar__settings-btn .material-symbols-outlined{font-size:22px}.waveforms{background:var(--background);grid-area:waveforms;grid-template-columns:1fr 1fr;gap:8px;min-height:0;padding:8px;display:grid}.waveform-card{background:var(--surface-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-ambient);flex-direction:column;padding:12px 16px;display:flex;position:relative;overflow:hidden}.waveform-card__label{opacity:.08;pointer-events:none;letter-spacing:.02em;font-size:28px;font-weight:900;position:absolute;top:10px;left:16px}.waveform-card__label--a{color:var(--primary)}.waveform-card__label--b{color:var(--secondary)}.waveform-card__canvas{border-radius:var(--radius-sm);background:var(--surface-low);flex:1;width:100%;margin:0;padding:0;display:block}.waveform-display--a .waveform-card__canvas{box-shadow:inset 0 0 20px #2a69000a,inset 0 1px #ffffff80,inset 0 -1px #00000008}.waveform-display--b .waveform-card__canvas{box-shadow:inset 0 0 20px #8a2ab90a,inset 0 1px #ffffff80,inset 0 -1px #00000008}.waveform-card__info{justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;display:flex}.waveform-card__name{color:var(--on-surface-variant);text-overflow:ellipsis;white-space:nowrap;max-width:60%;font-weight:500;overflow:hidden}.waveform-card__bpm{color:var(--primary);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.waveform-card__time{color:var(--on-surface-variant);font-variant-numeric:tabular-nums;font-weight:600}.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}.mixer{background:var(--background);grid-area:mixer;grid-template-columns:1fr auto 1fr;gap:8px;padding:0 8px 8px;display:grid}.deck{background:var(--surface-lowest);border-radius:var(--radius-xl);box-shadow:var(--shadow-ambient);flex-direction:column;gap:8px;padding:16px 20px;display:flex}.deck--a{border-left:4px solid var(--primary-container)}.deck--b{border-left:4px solid var(--secondary-container)}.deck__header{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.deck__badge{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);padding:2px 12px;font-size:11px;font-weight:800;display:inline-block}.deck__badge--a{color:var(--primary);background:#84fb4233}.deck__badge--b{color:var(--secondary);background:#eec2ff66}.deck__load-btn{text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface-variant);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-speed) ease;background:0 0;border:none;align-items:center;gap:6px;padding:4px 8px;font-family:Plus Jakarta Sans,sans-serif;font-size:12px;font-weight:600;display:flex}.deck__load-btn .material-symbols-outlined{font-size:18px}.deck__load-btn:hover{background:var(--surface-container);color:var(--on-surface)}.deck__controls{justify-content:center;gap:16px;display:flex}.deck__knobs{flex-direction:row;justify-content:center;gap:12px;display:flex}.deck__faders{flex-direction:row;justify-content:center;gap:16px;display:flex}.knob-group{flex-direction:column;align-items:center;gap:6px;display:flex}.knob-group__label{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant);font-size:11px;font-weight:700}.knob-group input[type=range][orient=vertical]{writing-mode:vertical-lr;direction:rtl;width:28px;height:80px}.knob-group input[type=range][orient=vertical]::-webkit-slider-track{background:var(--surface-high);border-radius:3px;width:6px;height:100%}.knob-group input[type=range][orient=vertical]::-webkit-slider-thumb{border-radius:4px;width:20px;height:12px}.deck--a .knob-group input[type=range]::-webkit-slider-thumb{background:var(--primary)}.deck--b .knob-group input[type=range]::-webkit-slider-thumb{background:var(--secondary)}.fader-group{flex-direction:column;align-items:center;gap:6px;display:flex}.fader-group__label{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant);font-size:11px;font-weight:700}.fader-group input[type=range][orient=vertical]{writing-mode:vertical-lr;direction:rtl;width:28px;height:100px}.fader-group input[type=range][orient=vertical]::-webkit-slider-track{background:var(--surface-high);border-radius:3px;width:6px;height:100%}.fader-group input[type=range][orient=vertical]::-webkit-slider-thumb{border-radius:4px;width:20px;height:12px}.deck--a .fader-group input[type=range]::-webkit-slider-thumb{background:var(--primary)}.deck--b .fader-group input[type=range]::-webkit-slider-thumb{background:var(--secondary)}.deck__transport{flex-direction:row;justify-content:center;gap:8px;margin-top:8px;display:flex}.transport-btn{border-radius:var(--radius-md);border:2px solid var(--outline-variant);background:var(--surface-lowest);width:44px;height:44px;color:var(--on-surface);cursor:pointer;transition:all var(--transition-speed) ease;justify-content:center;align-items:center;font-family:Plus Jakarta Sans,sans-serif;display:flex}.transport-btn .material-symbols-outlined{font-size:22px}.transport-btn:hover{background:var(--surface-container);border-color:var(--outline)}.transport-btn:active{transform:scale(.95)}.transport-btn--play{border:none}.transport-btn--a.transport-btn--play{background:var(--primary);color:#fff}.transport-btn--a.transport-btn--play:hover{background:var(--primary-dim)}.transport-btn--b.transport-btn--play{background:var(--secondary);color:#fff}.transport-btn--b.transport-btn--play:hover{background:var(--secondary-dim)}.transport-btn--a{border-color:var(--primary);color:var(--primary)}.transport-btn--a:hover{background:#84fb421a}.transport-btn--b{border-color:var(--secondary);color:var(--secondary)}.transport-btn--b:hover{background:#eec2ff33}.deck__pads{grid-template-columns:1fr 1fr;justify-items:center;gap:6px;margin-top:8px;display:grid}.crossfader-section{background:var(--surface-lowest);border-radius:var(--radius-xl);min-width:180px;box-shadow:var(--shadow-ambient);flex-direction:column;justify-content:center;align-items:center;padding:16px 24px;display:flex}.crossfader-section__label{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant);margin-bottom:8px;font-size:12px;font-weight:700}.crossfader-section__input{width:100%;height:24px}.crossfader-section__input::-webkit-slider-track{border-radius:var(--radius-full);background:var(--surface-high);height:6px}.crossfader-section__input::-webkit-slider-thumb{background:var(--on-surface);border-radius:4px;width:14px;height:24px}.crossfader-section__markers{width:100%;color:var(--on-surface-variant);justify-content:space-between;margin-top:6px;font-size:11px;font-weight:700;display:flex}.crossfader-section__markers span:first-child{color:var(--primary)}.crossfader-section__markers span:last-child{color:var(--secondary)}.lesson-panel{background:var(--surface-lowest);border-radius:var(--radius-lg) var(--radius-lg) 0 0;flex-direction:column;grid-area:lessons;max-height:280px;transition:max-height .3s,opacity .3s,padding .3s;display:flex;overflow:hidden;box-shadow:0 -8px 24px #2d2f2f0f}.lesson-panel--collapsed{opacity:0;max-height:0;padding:0}.lesson-panel__header{background:var(--surface-container);border-radius:var(--radius-lg) var(--radius-lg) 0 0;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.lesson-panel__header h2{text-transform:uppercase;letter-spacing:.08em;color:var(--on-surface);font-size:14px;font-weight:800}.lesson-panel__progress{color:var(--on-surface-variant);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}.lesson-panel__content{flex:1;padding:16px 20px;font-size:15px;overflow-y:auto}.lesson-panel__placeholder{color:var(--on-surface-variant);font-size:13px;font-style:italic}.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}.view{opacity:0;grid-area:content;min-height:0;transition:opacity .15s;overflow-y:auto}.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)}}#view-learn,#view-stats,#view-profile,#view-settings,#view-session-complete{flex-direction:column;display:flex}#view-practice{grid-template-rows:auto 1fr auto auto;grid-template-areas:"modes""waveforms""mixer""lessons";gap:0;display:grid}.practice-modes{background:var(--surface-container);border-radius:var(--radius-full);grid-area:modes;justify-self:center;gap:0;margin:8px 0 0;padding:3px;display:flex}.learn-dashboard{max-width:640px;margin:0 auto;padding:32px 24px}.learn-header{text-align:center;margin-bottom:32px}.learn-header__title{color:var(--on-surface);margin-bottom:6px;font-size:24px;font-weight:900}.learn-header__subtitle{color:var(--on-surface-variant);font-size:14px;font-weight:500}.learn-path{flex-direction:column;align-items:center;gap:0;display:flex}.learn-path__connector{background:var(--surface-high);border-radius:2px;width:4px;height:24px}.learn-node{background:var(--surface-lowest);border-radius:var(--radius-xl);width:100%;box-shadow:var(--shadow-ambient);transition:all var(--transition-speed) ease;cursor:pointer;align-items:center;gap:16px;padding:16px 20px;display:flex}.learn-node:hover{transform:translateY(-1px);box-shadow:0 24px 48px #2d2f2f14}.learn-node:active{box-shadow:var(--shadow-ambient);transform:translateY(0)}.learn-node--locked{cursor:default;opacity:.7}.learn-node__icon{border-radius:var(--radius-full);background:var(--surface-container);width:48px;height:48px;color:var(--on-surface-variant);flex-shrink:0;justify-content:center;align-items:center;display:flex}.learn-node__icon .material-symbols-outlined{font-size:24px}.learn-node__icon--active{background:var(--primary);color:#fff}.learn-node__icon--locked{background:var(--surface-high);color:var(--outline)}.learn-node--complete .learn-node__icon{color:var(--primary);background:#84fb4233}.learn-node__info{flex:1}.learn-node__info h3{color:var(--on-surface);margin-bottom:2px;font-size:15px;font-weight:700}.learn-node__info p{color:var(--on-surface-variant);font-size:13px;font-weight:500}.learn-node--locked .learn-node__info h3{color:var(--outline)}.learn-node--locked .learn-node__info p{color:var(--outline-variant)}.learn-node__badge{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);flex-shrink:0;padding:4px 12px;font-size:11px;font-weight:800}.learn-node__badge--complete{color:var(--primary);background:#84fb4233}.learn-node__badge--active{background:var(--primary);color:#fff}.learn-node__badge--locked{background:var(--surface-high);color:var(--outline)}.stats-page{max-width:720px;margin:0 auto;padding:32px 24px}.stats-page__title{color:var(--on-surface);margin-bottom:24px;font-size:24px;font-weight:900}.stats-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px;display:grid}.stat-card{background:var(--surface-lowest);border-radius:var(--radius-xl);box-shadow:var(--shadow-ambient);flex-direction:column;align-items:center;gap:6px;padding:24px;display:flex}.stat-card__value{color:var(--primary);font-size:36px;font-weight:900}.stat-card__label{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant);font-size:12px;font-weight:700}.stats-section{background:var(--surface-lowest);border-radius:var(--radius-xl);box-shadow:var(--shadow-ambient);padding:24px}.stats-section h3{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface);margin-bottom:16px;font-size:15px;font-weight:800}.skill-bars{flex-direction:column;gap:14px;display:flex}.skill-bar{flex-direction:column;gap:6px;display:flex}.skill-bar__label{color:var(--on-surface-variant);font-size:12px;font-weight:700}.skill-bar__track{background:var(--surface-high);border-radius:var(--radius-full);height:8px;overflow:hidden}.skill-bar__fill{background:linear-gradient(90deg, var(--primary-dim), var(--primary-container));border-radius:var(--radius-full);height:100%;transition:width .5s}.skill-bar__fill--b{background:linear-gradient(90deg, var(--secondary-dim), var(--secondary-container))}.profile-page{flex-direction:column;gap:20px;max-width:640px;margin:0 auto;padding:32px 24px;display:flex}.profile-card{background:var(--surface-lowest);border-radius:var(--radius-xl);box-shadow:var(--shadow-ambient);flex-direction:column;align-items:center;gap:8px;padding:32px;display:flex}.profile-card__avatar{border-radius:var(--radius-full);width:80px;height:80px;color:var(--primary);background:#84fb4226;justify-content:center;align-items:center;margin-bottom:8px;display:flex}.profile-card__name{color:var(--on-surface);font-size:22px;font-weight:900}.profile-card__level{color:var(--on-surface-variant);font-size:13px;font-weight:600}.profile-stats{grid-template-columns:1fr 1fr 1fr;gap:12px;display:grid}.profile-stat{background:var(--surface-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-ambient);flex-direction:column;align-items:center;gap:4px;padding:20px;display:flex}.profile-stat__value{color:var(--primary);font-size:28px;font-weight:900}.profile-stat__label{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant);font-size:11px;font-weight:700}.profile-achievements{background:var(--surface-lowest);border-radius:var(--radius-xl);box-shadow:var(--shadow-ambient);padding:24px}.profile-achievements h3{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface);margin-bottom:12px;font-size:15px;font-weight:800}.profile-achievements__empty{color:var(--on-surface-variant);font-size:13px;font-style:italic}.settings-page{max-width:640px;margin:0 auto;padding:32px 24px}.settings-page__title{color:var(--on-surface);margin-bottom:24px;font-size:24px;font-weight:900}.settings-section{background:var(--surface-lowest);border-radius:var(--radius-xl);box-shadow:var(--shadow-ambient);margin-bottom:16px;padding:24px}.settings-section__title{text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface);align-items:center;gap:8px;margin-bottom:16px;font-size:14px;font-weight:800;display:flex}.settings-section__title .material-symbols-outlined{color:var(--primary);font-size:20px}.settings-row{border-bottom:1px solid var(--surface-container);justify-content:space-between;align-items:center;padding:10px 0;display:flex}.settings-row:last-of-type{border-bottom:none}.settings-row__label{color:var(--on-surface);font-size:14px;font-weight:600}.settings-row__value{color:var(--on-surface-variant);font-size:14px;font-weight:500}.settings-hint{color:var(--outline);margin-top:12px;font-size:12px;line-height:1.5}.session-complete-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:100%;padding:48px 24px;display:flex}.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}