:root{--bg:#0a0a0c;--panel:#16161a;--panel-hi:#1f1f26;--line:#2c2c36;--text:#d8d8e0;--text-dim:#7a7a8a;--accent:#5ad1c8;--warn:#e8b04b;--ok:#7fd15a;--mod-osc:#4a7fd1;--mod-filter:#d15a7f;--mod-env:#7fd15a;--mod-lfo:#d1a24a;--mono:"SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,sans-serif}.keyboard{-webkit-user-select:none;user-select:none;touch-action:none;display:flex}.key-slot{display:block;position:relative}.key.white{border:1px solid var(--line);width:34px;height:120px;color:var(--text-dim);font:10px var(--mono);cursor:pointer;background:linear-gradient(#e8e8ee,#c4c4cc);border-radius:0 0 3px 3px;justify-content:center;align-items:flex-end;padding-bottom:6px;display:flex}.key.white.held{background:linear-gradient(180deg, var(--accent), #3aa89f)}.key.black{z-index:2;cursor:pointer;background:linear-gradient(#2a2a32,#101014);border:1px solid #000;border-radius:0 0 3px 3px;width:18px;height:74px;position:absolute;top:0;right:-9px}.key.black.held{background:linear-gradient(180deg, var(--accent), #2a8a83)}.knob-panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px}.knob-panel-title{font:11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:10px}.knob-panel-grid{flex-wrap:wrap;gap:14px;display:flex}.knob{flex-direction:column;align-items:center;width:64px;display:flex}.knob svg{cursor:ns-resize;touch-action:none}.knob-track{fill:none;stroke:var(--line);stroke-width:4px}.knob-fill{fill:none;stroke:var(--accent);stroke-width:4px;stroke-linecap:round}.knob-pointer{stroke:var(--text);stroke-width:2px;stroke-linecap:round}.knob-label{font:9px var(--mono);text-transform:uppercase;color:var(--text-dim);text-align:center;margin-top:2px}.knob-value{font:10px var(--mono);color:var(--text)}.selector{flex-direction:column;gap:4px;min-width:84px;display:flex}.selector select{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:10px var(--mono);border-radius:3px;padding:4px}.rack{background:var(--panel);border:1px solid var(--line);border-radius:6px}.cord{fill:none;stroke-width:2px}.cord-audio{stroke:var(--accent)}.cord-control{stroke:var(--mod-lfo);stroke-dasharray:4 3}.rack-node{cursor:pointer}.rack-node rect{stroke:var(--line);stroke-width:1px;fill:var(--panel-hi)}.rack-node text{font:10px var(--mono);fill:var(--text);text-transform:uppercase;letter-spacing:.05em;pointer-events:none}.rack-node.selected rect{stroke:var(--accent);stroke-width:2px}.kind-osc rect{fill:var(--mod-osc)}.kind-filter rect{fill:var(--mod-filter)}.kind-env rect{fill:var(--mod-env)}.kind-lfo rect{fill:var(--mod-lfo)}.kind-output rect{fill:#3a3a44}.app{grid-template-columns:340px 1fr;height:100vh;display:grid}.lesson-panel{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;padding:24px;display:flex;overflow-y:auto}.lesson-part{font:10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.lesson-title{align-items:baseline;gap:10px;margin:6px 0 4px;font-size:20px;display:flex}.lesson-num{font:13px var(--mono);color:var(--text-dim)}.lesson-blurb{color:var(--text-dim);margin:0 0 16px;font-size:13px}.lesson-prose p{font-size:13.5px;line-height:1.6}.lesson-tasks{margin-top:auto;padding-top:20px}.lesson-tasks-title{font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:8px}.task{color:var(--text-dim);align-items:flex-start;gap:8px;padding:7px 0;font-size:13px;display:flex}.task.done{color:var(--ok)}.task-mark{font:12px var(--mono)}.lesson-nav{gap:8px;margin-top:16px;display:flex}.lesson-nav button{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);cursor:pointer;border-radius:4px;flex:1;padding:9px}.lesson-nav button:disabled{opacity:.35;cursor:default}.stage{flex-direction:column;align-items:flex-start;gap:20px;padding:28px;display:flex;overflow-y:auto}.panels{flex-wrap:wrap;gap:16px;display:flex}.scope-label{font:9px var(--mono);text-transform:uppercase;color:var(--text-dim);margin-bottom:4px}.gate{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;height:100vh;display:flex}.gate-start{background:var(--accent);color:#06110f;font:13px var(--mono);cursor:pointer;border:0;border-radius:4px;margin-top:8px;padding:12px 40px}.gate-note{color:var(--text-dim);font-size:12px}.gate-error{background:var(--panel);border:1px solid var(--line);font:11px var(--mono);color:var(--warn);white-space:pre-wrap;text-align:left;max-width:600px;padding:12px}.challenge{background:var(--panel);border:1px solid var(--line);border-radius:6px;width:380px;padding:14px}.challenge.matched{border-color:var(--ok)}.challenge-title{font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--warn)}.challenge-tabs{gap:6px;margin:8px 0 0;display:flex}.challenge-tab{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--panel-hi);color:var(--text-dim);border:1px solid var(--line);cursor:pointer;border-radius:4px;padding:4px 10px}.challenge-tab.active{color:var(--text);border-color:var(--accent)}.challenge-tab.matched{color:var(--ok)}.challenge-text{margin:6px 0 12px;font-size:13px;line-height:1.5}.challenge-meter{background:var(--panel-hi);border-radius:3px;height:6px;overflow:hidden}.challenge-fill{background:var(--accent);height:100%;transition:width .2s}.challenge.matched .challenge-fill{background:var(--ok)}.challenge-score{font:10px var(--mono);color:var(--text-dim);margin-top:6px}.gate-choices{gap:12px;display:flex}.gate-start.gate-alt{background:var(--panel-hi);color:var(--text);border:1px solid var(--accent)}.demo-strip{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:18px;display:flex}.demo-strip-label{font:10px var(--mono);color:var(--text-dim);text-transform:uppercase}.demo-btn{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);cursor:pointer;border-radius:4px;padding:6px 12px}.demo-btn.playing{border-color:var(--accent);color:var(--accent)}.demo-error{font:10px var(--mono);color:var(--warn)}.mode-toggle{z-index:20;background:var(--panel-hi);color:var(--text);border:1px solid var(--accent);font:11px var(--mono);cursor:pointer;border-radius:4px;padding:7px 14px;position:fixed;top:12px;right:14px}.freeplay-bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.freeplay-bar input{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);border-radius:4px;padding:6px 10px}.freeplay-bar button{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);cursor:pointer;border-radius:4px;padding:6px 12px}.freeplay-bar button:disabled{opacity:.35;cursor:default}.patch-chip{border-color:var(--accent)!important}.menu{max-width:720px;margin:0 auto;padding:40px 24px 60px}.menu-title{margin:0 0 18px;font-size:22px}.menu-actions{align-items:center;gap:12px;margin-bottom:24px;display:flex}.menu-resume{background:var(--accent);color:#06211e;cursor:pointer;border:0;border-radius:6px;padding:10px 18px;font:600 14px system-ui}.menu-freeplay{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:10px 18px;font:600 14px system-ui}.menu-complete{font:12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ok)}.menu-part{font:10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:22px 0 4px}.menu-rows{margin:0;padding:0;list-style:none}.menu-row{box-sizing:border-box;text-align:left;border:0;border-bottom:1px solid var(--line);width:100%;color:var(--text);cursor:pointer;background:0 0;grid-template-columns:18px 26px 1fr;align-items:baseline;gap:2px 10px;padding:9px 4px;font-family:inherit;font-size:14px;display:grid}button.menu-row:hover{background:var(--panel-hi)}.menu-mark{font:12px var(--mono);color:var(--text-dim)}.menu-done .menu-mark{color:var(--ok)}.menu-frontier .menu-mark{color:var(--accent)}.menu-num{font:11px var(--mono);color:var(--text-dim)}.menu-blurb{color:var(--text-dim);grid-column:3;font-size:12px}.menu-soon{cursor:default;opacity:.45}.menu-soon-tag{font:9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--warn);grid-column:3}.mode-bar{gap:8px;display:flex}.sample-drop{background:var(--panel);border:1px dashed var(--line);color:var(--text-dim);border-radius:6px;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;font-size:12px;display:flex}.sample-drop-pick{color:var(--accent);cursor:pointer;text-decoration:underline}.sample-drop-starter{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);cursor:pointer;border-radius:4px;padding:4px 10px}.sample-drop-loaded{font:11px var(--mono);color:var(--ok)}.sample-drop-error{font:11px var(--mono);color:var(--warn)}.preset-strip{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.preset-btn{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);cursor:pointer;border-radius:4px;padding:4px 10px}.preset-btn:hover{border-color:var(--accent);color:var(--accent)}.preset-btn.active{background:var(--accent);color:#06211e;border-color:var(--accent)}.preset-btn.active:hover{color:#06211e}.bypass-strip{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.bypass-toggle{font:11px var(--mono);cursor:pointer;border:1px solid var(--line);border-radius:4px;padding:4px 10px}.bypass-toggle.on{background:var(--accent);color:#06211e}.bypass-toggle.off{background:var(--panel-hi);color:var(--text-dim)}.macro-knob{cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;flex-direction:column;align-items:center;gap:4px;display:flex}.macro-knob-dial{border:3px solid var(--accent);background:var(--panel-hi);width:72px;height:72px;font:16px var(--mono);color:var(--text);border-radius:50%;justify-content:center;align-items:center;display:flex}.macro-knob-label{font:10px var(--mono);text-transform:uppercase;color:var(--text-dim)}.transport{background:var(--panel);border:1px solid var(--line);font:12px var(--mono);border-radius:6px;align-items:center;gap:14px;padding:8px 12px;display:flex}.transport-play{background:var(--accent);color:#06211e;font:600 12px var(--mono);cursor:pointer;border:0;border-radius:4px;padding:6px 14px}.transport-line{color:var(--text-dim);min-width:70px}.transport-bpm{color:var(--text);align-items:center;gap:6px;display:flex}.transport-bpm button{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);cursor:pointer;font:12px var(--mono);border-radius:3px;padding:2px 8px}.stepgrid{background:var(--panel);border:1px solid var(--line);border-radius:6px;flex-direction:column;gap:4px;padding:12px;display:flex}.stepgrid-row{align-items:center;gap:3px;display:flex}.stepgrid-label{font:10px var(--mono);text-transform:uppercase;color:var(--text-dim);width:52px}.step{border:1px solid var(--line);background:var(--panel-hi);cursor:pointer;border-radius:3px;width:26px;height:26px;padding:0}.step.beat{border-color:var(--text-dim)}.step.on{background:var(--accent)}.step.playhead{outline:2px solid var(--warn);outline-offset:-2px}.ch14-studio{flex-direction:column;gap:10px;display:flex}.tracker{font:11px var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:6px;max-height:320px;padding:10px;overflow-y:auto}.tracker-header{gap:8px;margin-bottom:4px;display:flex}.tracker-thead{color:var(--text-dim);padding:1px 4px}.tracker-line{gap:8px;display:flex}.tracker-line.playhead{background:#e8b04b26}.tracker-lnum{color:var(--text-dim);width:20px}.tracker-cell{color:var(--text);font:11px var(--mono);cursor:pointer;background:0 0;border:0;padding:1px 4px}.tracker-cell:hover{background:var(--panel-hi)}.ch15-both{flex-direction:column;gap:10px;display:flex}.timeline{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px;overflow-x:auto}.timeline-track{min-width:100%;height:56px;position:relative}.tl-block{box-sizing:border-box;background:var(--accent);border:1px solid var(--line);color:#06211e;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:4px;flex-direction:column;justify-content:space-between;height:44px;padding:3px 4px;display:flex;position:absolute;top:6px;overflow:hidden}.tl-block.muted{background:var(--panel-hi);color:var(--text-dim);border-style:dashed}.tl-label{font:10px var(--mono);text-transform:uppercase;white-space:nowrap}.tl-buttons{gap:3px;display:flex}.tl-block button{color:inherit;font:9px var(--mono);cursor:pointer;background:#0000002e;border:0;border-radius:2px;padding:1px 4px}.tl-playhead{background:var(--warn);pointer-events:none;width:2px;position:absolute;top:0;bottom:0}.tl-playhead.playing{box-shadow:0 0 4px var(--warn)}.ch16-arrange{flex-direction:column;gap:10px;display:flex}.autolane-wrap{flex-direction:column;gap:4px;display:flex}.autolane-label{font:10px var(--mono);color:var(--text-dim);text-transform:uppercase}.autolane{background:var(--panel);border:1px solid var(--line);cursor:crosshair;border-radius:6px;align-items:flex-end;gap:2px;height:96px;padding:8px;display:flex}.auto-col{background:var(--mod-lfo);width:14px;min-height:2px}.ch17-auto,.ch18-studio{flex-direction:column;gap:10px;display:flex}.ch18-controls{background:var(--panel);border:1px solid var(--line);border-radius:6px;gap:24px;padding:10px 12px;display:flex}.ch18-ctl{font:10px var(--mono);text-transform:uppercase;color:var(--text-dim);flex-direction:column;gap:4px;display:flex}.ch18-ctl input[type=range]{width:160px;accent-color:var(--accent);cursor:pointer}.ch19-studio{flex-direction:column;gap:10px;display:flex}.studio-hint{font:11px var(--mono);color:var(--accent);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 12px}.ch20-explorer{flex-direction:column;gap:10px;display:flex}.export-panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;display:flex}.export-btn{background:var(--accent);color:#06211e;font:600 12px var(--mono);cursor:pointer;border:0;border-radius:4px;padding:6px 14px}.import-drop{border:1px dashed var(--line);color:var(--text-dim);border-radius:6px;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;font-size:12px;display:flex}.import-pick{color:var(--accent);cursor:pointer;text-decoration:underline}.import-starter{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);cursor:pointer;border-radius:4px;padding:4px 10px}.export-error{font:11px var(--mono);color:var(--warn)}.inspect-list{flex-wrap:wrap;gap:6px;display:flex}.inspect-row{background:var(--panel-hi);color:var(--text);border:1px solid var(--line);font:11px var(--mono);cursor:pointer;border-radius:4px;padding:5px 10px}.inspect-row:hover{border-color:var(--accent);color:var(--accent)}.inspect-row-active{border-color:var(--accent);color:var(--accent);background:var(--panel)}.page-step{letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:8px;font-size:12px}.page-step .page-title{text-transform:none;letter-spacing:normal}input.numeric-entry{text-align:center;font:inherit;color:inherit;background:0 0;border:none;border-bottom:1px solid #0000;outline:none;padding:0}input.numeric-entry:focus{border-bottom-color:var(--accent)}input.knob-value{font:10px var(--mono);color:var(--text);width:6ch}input.macro-knob-entry{font:16px var(--mono);color:var(--text);width:3ch}input.transport-bpm-entry{width:4ch}input.ch18-entry{width:3ch}.studio{flex-direction:column;gap:12px;padding:12px;display:flex}.studio-bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.studio-name{width:160px}.studio-body{align-items:flex-start;gap:14px;display:flex}.studio-rail{flex-direction:column;gap:4px;min-width:200px;display:flex}.studio-row{cursor:pointer;border:1px solid #0000;border-radius:4px;align-items:center;gap:8px;padding:4px 8px;display:flex}.studio-row-active{border-color:currentColor}.studio-row-kind{opacity:.6;font-size:.85em}.studio-row-remove{margin-left:auto}.studio-add-row{gap:6px;margin-top:6px;display:flex}.studio-main{flex-direction:column;flex:1;gap:10px;display:flex}.studio-mixer{align-items:flex-end;gap:12px;display:flex}.studio-savepatch{gap:6px;display:flex}.studio-note{opacity:.7;max-width:480px;font-size:.85em}