:root{--bg-base: #0a0a0f;--bg-surface: #141420;--bg-panel: #1a1a2e;--bg-control: #222238;--bg-elevated: #2a2a44;--text-primary: #e0e0e8;--text-secondary: #8888a0;--text-dim: #808098;--accent-amber: #f0a030;--accent-amber-dim: #805818;--accent-cyan: #00d4ff;--accent-cyan-dim: #006880;--accent-red: #ff3040;--accent-red-dim: #801820;--accent-green: #30ff60;--accent-green-dim: #188030;--led-on: #f0a030;--led-off: #332200;--led-active: #00d4ff;--led-record: #ff3040;--step-inactive: #222238;--step-active: #f0a030;--step-current: #00d4ff;--step-accent: #ff6040;--knob-bg: #1a1a2e;--knob-track: #333350;--knob-indicator: #f0a030;--font-display: "Courier New", "Consolas", monospace;--font-label: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-size-xs: .625rem;--font-size-sm: .75rem;--font-size-md: .875rem;--font-size-lg: 1rem;--font-size-xl: 1.25rem;--font-size-display: 1.75rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-8: 48px;--radius-sm: 3px;--radius-md: 6px;--radius-lg: 12px;--shadow-inset: inset 0 1px 3px rgba(0,0,0,.5);--shadow-elevated: 0 4px 12px rgba(0,0,0,.4);--shadow-glow-amber: 0 0 8px rgba(240,160,48,.3);--shadow-glow-cyan: 0 0 8px rgba(0,212,255,.3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-base);color:var(--text-primary);font-family:var(--font-label);font-size:var(--font-size-md);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}p,li,.modal-body,.lesson-explanation,.tour-steps{-webkit-user-select:text;user-select:text}button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}button:disabled{cursor:wait;opacity:.55}.panel{background:var(--bg-panel);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-elevated);border:1px solid var(--bg-elevated)}.panel-title{font-family:var(--font-label);font-weight:600;font-size:var(--font-size-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3);border-bottom:1px solid var(--bg-control);padding-bottom:var(--space-2)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--bg-control);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--bg-elevated)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}#transport-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);background:var(--bg-surface);border-bottom:1px solid var(--bg-control);position:sticky;top:0;z-index:100;height:56px;min-width:0}.transport-left{display:flex;gap:var(--space-2)}.transport-btn{width:40px;height:40px;border:1px solid var(--bg-elevated);border-radius:var(--radius-md);background:var(--bg-control);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.transport-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.transport-btn.active{color:var(--accent-cyan);border-color:var(--accent-cyan-dim);box-shadow:var(--shadow-glow-cyan)}.transport-center{display:flex;align-items:center;gap:var(--space-5);min-width:0}.transport-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.transport-display>label{font-size:var(--font-size-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.transport-right{display:flex;align-items:center;min-width:0}@media(max-width:1400px){#transport-bar{flex-wrap:wrap;height:auto}.transport-center{order:3;flex:1 1 100%;overflow-x:auto;padding-bottom:3px}.transport-right{overflow-x:auto;padding-bottom:3px}}.complexity-toggle{display:flex;background:var(--bg-control);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--bg-elevated)}.complexity-btn{padding:var(--space-1) var(--space-3);border:none;background:transparent;color:var(--text-dim);font-family:var(--font-label);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.1em;cursor:pointer;transition:all .15s ease}.complexity-btn:hover{color:var(--text-secondary)}.complexity-btn.active{background:var(--accent-amber);color:var(--bg-base)}#instrument-area{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);max-width:1200px;margin:0 auto}.instrument-panel{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--bg-elevated);overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);background:var(--bg-surface);border-bottom:1px solid var(--bg-control)}.panel-header h2{font-family:var(--font-display);font-size:var(--font-size-sm);font-weight:400;color:var(--accent-amber);letter-spacing:.15em}.panel-controls{display:flex;gap:var(--space-2)}.panel-body{padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.drum-selector{display:flex;align-items:center;gap:var(--space-4)}.drum-controls{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 0}.synth-controls{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.step-row{display:flex;gap:var(--space-1);padding:var(--space-2) 0}.step-row step-button:nth-child(4n+1){margin-left:var(--space-2)}.step-row step-button:first-child{margin-left:0}.hint-overlay{z-index:50;pointer-events:none}.hint-text{font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--accent-amber);text-align:center;animation:hintPulse 1.5s ease-in-out infinite;background:#0a0a0fe6;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--accent-amber-dim)}@keyframes hintPulse{0%,to{opacity:.6}50%{opacity:1}}#shortcuts-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-panel);border:1px solid var(--bg-elevated);border-radius:var(--radius-lg);padding:var(--space-5);z-index:200;box-shadow:0 8px 32px #0009;min-width:300px}#shortcuts-panel h3{font-family:var(--font-display);color:var(--accent-amber);margin-bottom:var(--space-4);font-weight:400;letter-spacing:.1em}#shortcuts-panel dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4)}#shortcuts-panel dt{font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--accent-cyan);background:var(--bg-control);padding:2px 6px;border-radius:var(--radius-sm);text-align:center}#shortcuts-panel dd{font-size:var(--font-size-sm);color:var(--text-secondary);display:flex;align-items:center}@media(max-width:768px){#transport-bar{flex-wrap:wrap;height:auto;gap:var(--space-2);padding:var(--space-2)}.transport-center{order:3;width:100%;justify-content:center;gap:var(--space-3)}.step-row{flex-wrap:wrap;gap:2px}.step-row step-button{width:calc(25% - 2px)}.synth-controls,.drum-controls{justify-content:center}}@media(min-width:769px)and (max-width:1024px){#instrument-area{padding:var(--space-3)}}.header-widget{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.header-widget>label{font-size:var(--font-size-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.retro-select{background:var(--bg-control);color:var(--accent-amber);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);padding:4px 8px;font-family:var(--font-display);font-size:var(--font-size-xs);cursor:pointer;outline:none}.retro-select:focus{border-color:var(--accent-amber)}.retro-select.mini{padding:2px 6px;font-size:.65rem}.scope-container{background:#050508;border:1px solid #1a2a1a;border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 0 6px #30ff6026;display:flex;align-items:center}#master-scope{display:block}.nav-btn{background:var(--bg-control);color:var(--text-primary);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);padding:5px 10px;font-family:var(--font-label);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.05em;cursor:pointer;transition:all .15s ease;margin-right:var(--space-2)}.nav-btn:hover{background:var(--bg-elevated);color:var(--accent-cyan)}.nav-btn.highlight{background:#f0a03026;border-color:var(--accent-amber);color:var(--accent-amber)}.nav-btn.highlight:hover{background:var(--accent-amber);color:var(--bg-base)}.sub-bar{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-4);background:#10101c;border-bottom:1px solid var(--bg-control);overflow-x:auto}.bar-label{font-size:var(--font-size-xs);font-weight:600;color:var(--accent-amber);white-space:nowrap;letter-spacing:.05em}.gen-btn{background:var(--bg-control);color:var(--text-secondary);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);padding:3px 8px;font-size:.7rem;font-family:var(--font-label);cursor:pointer;white-space:nowrap;transition:all .12s ease}.gen-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.scale-lock-widget{display:flex;align-items:center;gap:var(--space-1);margin-left:auto;font-size:var(--font-size-xs);color:var(--text-dim)}.panel-title-group{display:flex;align-items:center;gap:var(--space-2)}.panel-badge{font-size:.6rem;padding:2px 6px;background:var(--bg-control);color:var(--accent-cyan);border-radius:var(--radius-sm);font-weight:700;letter-spacing:.08em}.panel-badge.acid{color:#ff6040;background:#ff60401f}.panel-badge.fx{color:#30ff60;background:#30ff601f}.panel-subtitle{font-size:var(--font-size-xs);color:var(--text-dim);margin-left:var(--space-2)}.info-btn,.why-btn{background:transparent;border:1px solid var(--bg-elevated);color:var(--text-secondary);border-radius:var(--radius-sm);padding:3px 8px;font-size:.68rem;cursor:pointer;transition:all .15s ease}.info-btn:hover{color:var(--accent-cyan);border-color:var(--accent-cyan-dim)}.why-btn:hover{color:var(--accent-amber);border-color:var(--accent-amber-dim)}.drum-voice-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--bg-surface)}.drum-quick-pads{display:flex;gap:4px}.drum-pad{width:34px;height:34px;background:var(--bg-control);color:var(--text-primary);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);font-family:var(--font-display);font-size:.75rem;font-weight:700;cursor:pointer;transition:all .1s}.drum-pad:active{background:var(--accent-amber);color:var(--bg-base);transform:scale(.94)}.sequencer-container{display:flex;flex-direction:column;gap:4px}.seq-label{font-size:.65rem;color:var(--text-dim);font-family:var(--font-display);letter-spacing:.05em}.fx-rack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}.mixer-section{padding:0 var(--space-4) var(--space-4)}.mixer-heading{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2);color:var(--accent-cyan);font-family:var(--font-display);font-size:var(--font-size-sm)}.mixer-heading span{color:var(--text-secondary);font-family:var(--font-label);font-size:var(--font-size-xs)}.mixer-strips{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2)}.mixer-strip{min-width:150px;display:flex;align-items:center;justify-content:space-around;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--bg-control);border-radius:var(--radius-sm);background:var(--bg-surface)}.mixer-strip h3{align-self:flex-start;color:var(--accent-amber);font-family:var(--font-display);font-size:var(--font-size-xs);letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg)}.mixer-strip-knobs{display:flex;gap:var(--space-2);align-items:center}@media(max-width:768px){.mixer-section{padding:0 var(--space-2) var(--space-2)}.mixer-heading{align-items:flex-start;flex-direction:column;gap:2px}}.fx-unit{background:var(--bg-surface);border:1px solid var(--bg-control);border-radius:var(--radius-sm);padding:var(--space-3)}.fx-unit-title{font-family:var(--font-display);font-size:.75rem;color:var(--accent-cyan);margin-bottom:var(--space-2);letter-spacing:.08em;border-bottom:1px solid var(--bg-control);padding-bottom:3px}.fx-knobs{display:flex;justify-content:space-around;align-items:center}#modal-container{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center}.modal-dialog{background:var(--bg-panel);border:1px solid var(--bg-elevated);border-radius:var(--radius-md);max-width:680px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 16px 48px #000c;padding:var(--space-5);animation:modalIn .2s ease-out}@keyframes modalIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bg-control);padding-bottom:var(--space-3);margin-bottom:var(--space-4)}.modal-header h3{font-family:var(--font-display);color:var(--accent-amber);font-weight:400;letter-spacing:.05em}.modal-close{background:transparent;border:none;color:var(--text-dim);font-size:1.5rem;cursor:pointer;padding:0 var(--space-2)}.modal-close:hover{color:var(--text-primary)}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-3)}.compare-card{background:var(--bg-surface);border:1px solid var(--bg-control);border-radius:var(--radius-sm);padding:var(--space-3)}.compare-card h4{color:var(--accent-cyan);font-size:.85rem;margin-bottom:4px}.compare-card p{font-size:.75rem;color:var(--text-secondary);margin-bottom:var(--space-3);line-height:1.4}.compare-play-btn{background:var(--bg-control);color:var(--text-primary);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);padding:4px 10px;font-size:.72rem;cursor:pointer;width:100%}.compare-play-btn:hover{background:var(--accent-cyan-dim);color:#fff}.lesson-dialog{position:fixed;bottom:24px;right:24px;width:380px;background:var(--bg-panel);border:1px solid var(--accent-amber);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:0 10px 30px #000c,0 0 20px #f0a03033;z-index:500;display:flex;flex-direction:column;gap:var(--space-2);animation:modalIn .25s ease-out}.lesson-header{display:flex;justify-content:space-between;align-items:center}.lesson-badge{font-size:.65rem;font-weight:700;padding:2px 6px;background:var(--accent-amber);color:var(--bg-base);border-radius:var(--radius-sm);letter-spacing:.05em}.lesson-close{background:transparent;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer}.lesson-instruction{font-size:.95rem;color:var(--text-primary);font-weight:600}.lesson-explanation{font-size:.8rem;color:var(--text-secondary);line-height:1.4}.lesson-actions{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2)}.lesson-btn{padding:4px 12px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;cursor:pointer;border:none}.lesson-btn.primary{background:var(--accent-amber);color:var(--bg-base)}.lesson-btn.secondary{background:var(--bg-control);color:var(--text-secondary)}.lesson-hint{font-size:.7rem;color:var(--accent-amber);font-style:italic}.lesson-target-highlight{outline:2px solid #f0a030!important;outline-offset:4px;box-shadow:0 0 15px #f0a03080!important;animation:targetPulse 1.5s ease-in-out infinite!important}@keyframes targetPulse{0%,to{outline-color:#f0a030}50%{outline-color:#00d4ff;box-shadow:0 0 20px #00d4ffb3}}.pattern-bank-strip{display:flex;gap:3px;background:var(--bg-control);padding:2px;border-radius:var(--radius-sm);border:1px solid var(--bg-elevated)}.pat-btn{background:transparent;border:none;color:var(--text-dim);font-family:var(--font-display);font-size:.75rem;font-weight:700;padding:3px 7px;border-radius:2px;cursor:pointer;transition:all .1s}.pat-btn:hover{color:var(--text-primary);background:var(--bg-elevated)}.pat-btn.active{background:var(--accent-cyan);color:var(--bg-base);box-shadow:0 0 8px #00d4ff66}.pat-btn.queued{background:var(--accent-amber);color:var(--bg-base);animation:hintPulse .5s infinite alternate}.drum-grid-container{display:flex;flex-direction:column;gap:4px}.drum-lane-row{display:flex;align-items:center;gap:var(--space-2)}.drum-lane-head{width:80px;height:36px;background:var(--bg-surface);border:1px solid var(--bg-control);border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:0 4px;flex-shrink:0;transition:all .1s}.drum-lane-head strong{font-size:.75rem;color:var(--accent-amber);font-family:var(--font-display);line-height:1}.drum-lane-head span{font-size:.55rem;color:var(--text-dim);text-transform:uppercase;margin-top:2px}.drum-lane-head:active{background:var(--accent-amber);color:var(--bg-base);transform:scale(.96)}.drum-lane-steps{display:flex;gap:3px;flex-grow:1}.drum-lane-steps step-button:nth-child(4n+1){margin-left:4px}.drum-lane-steps step-button:first-child{margin-left:0}.pitch-nudge-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg-surface);border:1px solid var(--bg-control);border-radius:var(--radius-sm);margin-bottom:var(--space-2);flex-wrap:wrap}.nudge-title{font-size:.7rem;font-family:var(--font-display);color:var(--accent-amber);margin-right:auto;letter-spacing:.05em}.nudge-btn{background:var(--bg-control);color:var(--text-primary);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);padding:3px 8px;font-size:.68rem;font-family:var(--font-display);font-weight:600;cursor:pointer;transition:all .1s}.nudge-btn:hover{background:var(--bg-elevated);color:var(--accent-cyan)}.nudge-btn:active{transform:scale(.94)}.nudge-btn.accent-nudge:hover{color:#ff3040;border-color:#ff3040}.nudge-btn.slide-nudge:hover{color:#00d4ff;border-color:#00d4ff}.panel-badge.poly{color:#00d4ff;background:#00d4ff1f}.panel-badge.fm{color:#f0a030;background:#f0a0301f}.panel-badge.sampler{color:#ff00ea;background:#ff00ea1f}#machine-rack-nav{display:flex;align-items:center;gap:4px;padding:6px var(--space-4);background:#0d0d16;border-bottom:1px solid var(--bg-control);overflow-x:auto}.rack-nav-label{font-size:.65rem;font-family:var(--font-display);color:var(--text-dim);margin-right:4px;white-space:nowrap}.rack-tab{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--bg-control);border-radius:var(--radius-sm);padding:4px 10px;font-size:.68rem;font-family:var(--font-display);font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s}.rack-tab:hover{background:var(--bg-control);color:var(--text-primary)}.rack-tab.active{background:var(--accent-amber);color:var(--bg-base);border-color:var(--accent-amber);box-shadow:0 0 10px #f0a0304d}.vu-meter-rack{display:flex;gap:4px;background:#050508;border:1px solid #202030;border-radius:var(--radius-sm);padding:2px 4px;align-items:center}.vu-meter-unit{display:flex;flex-direction:column;align-items:center}.vu-label{font-size:.55rem;font-family:var(--font-display);color:var(--text-dim);line-height:1}.vu-face{width:44px;height:22px;background:#fdfae6;border:1px solid #1a1a24;border-radius:2px 2px 0 0;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #0006}.vu-needle{position:absolute;bottom:-2px;left:50%;width:1.5px;height:20px;background:#111;transform-origin:bottom center;transform:rotate(-45deg);transition:transform .04s ease-out;box-shadow:0 0 1px #00000080}.vu-scale{position:absolute;top:2px;left:2px;right:2px;height:4px;border-top:1px dashed #884400;border-right:8px solid #cc1111}.sampler-pad-matrix{display:flex;gap:6px;margin:var(--space-3) 0;flex-wrap:wrap}.sp-pad{padding:8px 14px;background:#1a1a2e;border:1px solid #2e2e4a;border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-display);font-size:.75rem;font-weight:700;cursor:pointer;box-shadow:0 2px 4px #0006;transition:all .08s}.sp-pad:hover{background:#252542;border-color:#ff00ea;color:#ff00ea}.sp-pad:active{background:#ff00ea;color:#050508;transform:scale(.94)}.tour-card{position:fixed;top:70px;left:50%;transform:translate(-50%);width:90%;max-width:520px;background:var(--bg-panel);border:2px solid var(--accent-amber);border-radius:var(--radius-md);box-shadow:0 12px 36px #000000d9,0 0 25px #f0a0304d;padding:var(--space-4);z-index:900;animation:modalIn .25s ease-out}.tour-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bg-control);padding-bottom:6px;margin-bottom:var(--space-3)}.tour-header h4{font-family:var(--font-display);color:var(--accent-amber);font-size:.85rem;letter-spacing:.05em;margin:0}.tour-steps{display:flex;flex-direction:column;gap:8px;font-size:.8rem;color:var(--text-secondary);line-height:1.4}.tour-step strong{color:var(--accent-cyan)}.tour-shortcuts{margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--font-size-xs);line-height:1.55}.tour-step kbd{background:var(--bg-control);padding:1px 4px;border-radius:2px;border:1px solid var(--bg-elevated);font-family:monospace}.lesson-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.lesson-choice{display:flex;flex-direction:column;gap:6px;padding:var(--space-4);text-align:left;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--bg-control);border-radius:var(--radius-md);cursor:pointer}.lesson-choice:hover{border-color:var(--accent-amber);background:var(--bg-control)}.lesson-choice strong{color:var(--accent-amber)}.lesson-choice span{color:var(--text-secondary);font-size:var(--font-size-sm);line-height:1.4}#status-toast{position:fixed;left:50%;bottom:20px;z-index:2000;max-width:min(90vw,520px);transform:translate(-50%,16px);padding:9px 14px;border:1px solid var(--accent-cyan-dim);border-radius:var(--radius-md);background:#141420f5;color:var(--text-primary);box-shadow:var(--shadow-elevated);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}#status-toast.visible{opacity:1;transform:translate(-50%)}@media(max-width:768px){#transport-bar{align-items:flex-start;overflow:hidden}.transport-left{flex:0 0 auto}.transport-right{flex:1 1 240px;min-width:0;overflow-x:auto;padding-bottom:3px}.transport-center{justify-content:flex-start;min-width:0;overflow-x:auto;padding-bottom:3px}.vu-meter-rack,.scope-container{display:none}#instrument-area{padding:var(--space-2)}.instrument-panel,.panel-body,.panel-title-group{min-width:0}.panel-header{align-items:flex-start;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2)}.panel-title-group{flex:1 1 220px;align-items:flex-start;flex-wrap:wrap}.panel-subtitle{flex-basis:100%;margin-left:0;line-height:1.35}.panel-controls{flex:1 1 auto;flex-wrap:wrap}.panel-body{padding:var(--space-2)}.drum-grid-container,.step-row,piano-keys{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}.drum-lane-row{width:max-content}.drum-lane-steps{flex-grow:0}.step-row{flex-wrap:nowrap;padding-bottom:var(--space-3)}.step-row step-button{flex:0 0 38px;width:38px}.pitch-nudge-bar{align-items:stretch}.nudge-title{flex-basis:100%}.compare-grid,.lesson-picker{grid-template-columns:1fr}.lesson-dialog{left:var(--space-2);right:var(--space-2);bottom:var(--space-2);width:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}