:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;--bg:#090b0f;--surface:#12151b;--surface-raised:#191d25;--border:#2a303b;--text:#f1f3f7;--muted:#9da6b5;--lime:#c8ff64;--cyan:#50d9e8;--violet:#a98cff;--danger:#ff7b72;--success:#77d690;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px}body{background:radial-gradient(circle at 80% 0%, #192124 0, transparent 30rem), var(--bg);min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:focus-visible{outline-offset:3px;outline:3px solid #fff}button:disabled{cursor:not-allowed;opacity:.42}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);background:#090b0fe6;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px clamp(16px,3vw,44px);display:flex}.brand{letter-spacing:-.02em;font-weight:700}.brand-mark{width:32px;height:32px;color:var(--lime);background:#252b1d;border:1px solid #53622e;border-radius:8px;place-items:center;margin-right:10px;display:inline-grid}.status-group{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.audio-status,.save-status{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:6px 9px;font-size:.75rem}.audio-status--playing{color:var(--lime);border-color:#52662d}.save-status--error,.audio-status--error{color:var(--danger)}main{flex:1;width:min(1440px,100%);margin:0 auto;padding:clamp(22px,4vw,52px) clamp(12px,3vw,44px) 48px}.hero{justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;display:flex}h1,h2,p{margin-top:0}h1{letter-spacing:-.055em;max-width:800px;margin-bottom:0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.02}h2{letter-spacing:-.035em;margin-bottom:12px;font-size:clamp(1.35rem,2vw,1.8rem)}.kicker,.label{color:var(--lime);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-family:Space Mono,monospace;font-size:.74rem;font-weight:700}.lesson-progress{width:min(240px,30vw);color:var(--muted);text-align:right;font-family:Space Mono,monospace;font-size:.75rem}.lesson-progress progress{width:100%;height:5px;accent-color:var(--lime);margin-top:9px;display:block}.notice{color:#ffd6ac;background:#261d17;border:1px solid #6a4830;border-radius:10px;margin-bottom:16px;padding:13px 16px}.workspace{grid-template-columns:minmax(820px,1.65fr) minmax(300px,.65fr);align-items:start;gap:20px;display:grid}.sequencer-card,.teacher-card{border:1px solid var(--border);background:#12151bf5;border-radius:16px;box-shadow:0 18px 60px #00000038}.sequencer-card{min-width:0;overflow:hidden}.teacher-card{padding:clamp(20px,3vw,32px);position:sticky;top:20px}.teacher-card>p:not(.kicker){color:#c3c9d3;line-height:1.65}.transport{border-bottom:1px solid var(--border);align-items:center;gap:24px;min-height:92px;padding:16px 20px;display:flex}.transport h2{margin:0}.transport .label{color:var(--muted);margin-bottom:3px}.tempo{align-items:baseline;gap:6px;margin-left:auto;display:flex}.tempo strong{font:700 1.45rem Space Mono,monospace}.tempo span{color:var(--muted);font:500 .66rem Space Mono,monospace}.transport-actions{gap:7px;display:flex}.icon-button,.track-switches button{border:1px solid var(--border);background:var(--surface-raised);min-height:44px;color:var(--text);cursor:pointer;border-radius:9px}.icon-button{padding:0 12px}.icon-button span{margin-left:5px;font-size:.82rem}.play-button{color:var(--lime);background:#202719;border-color:#536930}.step-grid{padding:20px;overflow:hidden}.step-numbers,.track-row{grid-template-columns:118px repeat(16,minmax(40px,1fr));gap:4px;display:grid}.step-numbers{color:#707988;text-align:center;margin-bottom:6px;font:500 .66rem Space Mono,monospace}.track-row{margin-bottom:10px}.track-header{justify-content:space-between;align-items:center;gap:5px;min-width:0;padding-right:7px;display:flex}.track-header strong{text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;overflow:hidden}.track-switches{gap:3px;display:flex}.track-switches button{width:44px;min-height:44px;padding:0;font:700 .65rem Space Mono,monospace}.track-switches button.is-active{border-color:var(--lime);color:var(--lime)}.step{color:#081012;cursor:pointer;background:#1b1f27;border:1px solid #303641;border-radius:7px;min-width:0;height:44px;padding:0;position:relative}.step[aria-disabled=true]{cursor:help;opacity:.42}.step--beat{background:#252a33;border-color:#3d4551}.step-grid--plain .step--beat{background:#1b1f27;border-color:#303641}.step--active{border-color:#0000;box-shadow:inset 0 0 0 1px #ffffff2e}.step--kick{background:var(--lime)}.step--clap{background:var(--violet)}.step--closedHat{background:var(--cyan)}.step--playing:after{content:"";pointer-events:none;border-top:2px solid #fff;position:absolute;inset:-4px -2px}.step--answer:not(.step--active){border:2px dashed var(--lime);background:#262c1e}.step--target{border:2px solid var(--lime);animation:1.2s ease-in-out infinite target-pulse}.step--correct{box-shadow:inset 0 0 0 3px var(--success)}.step--extra{box-shadow:inset 0 0 0 3px var(--danger)}.step--missing{border:2px dashed var(--danger)}.grid-message{border-left:3px solid var(--cyan);color:#d7f8f8;background:#48d3d614;margin:0 20px 18px;padding:10px 12px;font-size:.9rem}.locked-note{color:var(--muted);margin:0;padding:0 20px 20px;font-size:.78rem}.primary-button,.secondary-button{cursor:pointer;border-radius:10px;width:100%;min-height:48px;margin-top:16px;padding:10px 16px;font-weight:700}.primary-button{border:1px solid var(--lime);background:var(--lime);color:#11150c}.secondary-button{border:1px solid var(--border);background:var(--surface-raised);color:var(--text)}.concept,.prompt,.feedback{border:1px solid var(--border);background:#171b22;border-radius:10px;margin-top:18px;padding:15px}.concept{flex-direction:column;gap:6px;display:flex}.concept span{color:var(--lime);font-family:Space Mono,monospace}.prompt{color:var(--lime);gap:10px;line-height:1.45;display:flex}.feedback{border-left:3px solid var(--danger)}.feedback--passed{border-left-color:var(--success)}.feedback>p,.feedback li{color:#c5cbd5;font-size:.88rem;line-height:1.5}.feedback ul{padding-left:20px}.feedback .hint{color:var(--lime)}.feedback-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.feedback-actions .secondary-button{margin-top:0}.choice-list{margin-top:16px}.choice-list .secondary-button{text-align:left}.pattern-choice{letter-spacing:.06em;font-family:Space Mono,monospace}.choice-message{color:var(--lime);margin-top:12px;line-height:1.5}.recovery-card{border:1px solid var(--danger);background:#24191b;border-radius:14px;margin-bottom:20px;padding:20px}.recovery-card p{color:#d8c4c7}.recovery-actions{gap:10px;display:flex}.recovery-actions button{width:auto;margin-top:0}footer{border-top:1px solid var(--border);color:#747d8b;text-align:center;padding:18px;font-size:.72rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@keyframes target-pulse{50%{box-shadow:0 0 0 5px #c8ff6429}}@media (width<=1280px){.workspace{grid-template-columns:1fr}.teacher-card{position:static}}@media (width<=760px){.topbar{align-items:flex-start}.brand-mark{display:none}.status-group{max-width:55%}.audio-status,.save-status{font-size:.67rem}main{padding-top:26px}.hero{align-items:flex-start}.lesson-progress{width:100px}.transport{z-index:4;background:#12151b;flex-wrap:wrap;gap:12px;position:sticky;top:0}.tempo{margin-left:auto}.transport-actions{order:3;grid-template-columns:repeat(4,1fr);width:100%;display:grid}.icon-button{min-width:0;padding:0 7px}.icon-button span{display:none}.step-grid{padding:16px}.step-numbers{display:none}.track-row{border-bottom:1px solid #242a33;grid-template-columns:repeat(4,minmax(44px,1fr));gap:7px;padding-bottom:18px}.track-header{grid-column:1/-1;min-height:36px;padding-right:0}.step{min-width:44px;height:44px}.teacher-card{padding:22px 18px calc(22px + env(safe-area-inset-bottom));order:-1}.recovery-actions,.feedback-actions{flex-direction:column;grid-template-columns:1fr}.recovery-actions button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}