*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1814;--surface: #252320;--surface2: #2e2b27;--border: #3a3630;--text: #c8c0b0;--text-dim: #6b6560;--radius: 4px;--osc-color: #d4960a;--filter-color: #7eb8c4;--adsr-color: #9b8ab4;--lfo-color: #6aad7a;--era-accent: #d4960a;--era-accent-2: #8b5e3c;--module-accent-height: 0px;--panel-chrome: none;--label-spacing: .8px;--label-shadow: none}[data-era=moog]{--era-accent: #d4960a;--era-accent-2: #8b5e3c}[data-era=arp]{--era-accent: #d9622b;--era-accent-2: #4a4038}[data-era=oberheim]{--era-accent: #9b6bc2;--era-accent-2: #453a54}[data-era=sequential]{--era-accent: #4a90c4;--era-accent-2: #6b4a2f}[data-layers="1"],[data-layers="2"],[data-layers="3"],[data-layers="4"]{--panel-chrome: 1px solid var(--border)}[data-layers="2"],[data-layers="3"],[data-layers="4"]{--module-accent-height: 2px}[data-layers="3"],[data-layers="4"]{--label-spacing: 1.4px;--label-shadow: 0 1px 0 rgba(0,0,0,.6)}[data-layers="4"]{--surface: #2a251e;--surface2: #332d24;--border: #4a4035;--osc-color: #e0a010;--filter-color: #5aaec0;--adsr-color: #8b7aa8;--lfo-color: #5a9e6a}body[data-skin=skeuomorphic]{background:repeating-linear-gradient(115deg,rgba(255,255,255,.015) 0px,rgba(255,255,255,.015) 1px,transparent 1px,transparent 4px),var(--bg)}body[data-skin=skeuomorphic] .module{background-color:#241f18;background-image:radial-gradient(circle at 4px 4px,#7a7062 0%,#2a251d 55%,transparent 60%),radial-gradient(circle at calc(100% - 4px) 4px,#7a7062 0%,#2a251d 55%,transparent 60%),radial-gradient(circle at 4px calc(100% - 4px),#7a7062 0%,#2a251d 55%,transparent 60%),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#7a7062 0%,#2a251d 55%,transparent 60%),repeating-linear-gradient(95deg,rgba(0,0,0,.05) 0px,rgba(0,0,0,.05) 1px,transparent 1px,transparent 4px),linear-gradient(180deg,#2e2820,#211c16);background-repeat:no-repeat;background-size:8px 8px,8px 8px,8px 8px,8px 8px,cover,cover;border-radius:6px;box-shadow:inset 0 1px #ffffff14,inset 0 -2px 3px #0000008c,inset 1px 0 #ffffff08,inset -1px 0 #00000059,0 2px 5px #0006}body[data-skin=skeuomorphic] .knob{position:relative;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)) drop-shadow(0 1px 0 rgba(255,255,255,.06))}body[data-skin=skeuomorphic] .knob:before{content:"";position:absolute;top:8%;right:8%;bottom:8%;left:8%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffffff14,#ffffff14 2deg,#0000001f 2deg,#0000001f 4deg),radial-gradient(circle at 35% 28%,#4a4236,#241f18 55%,#100d09);box-shadow:inset 0 1px 1px #ffffff26,inset 0 -2px 3px #0009}body[data-skin=skeuomorphic] input[type=range]{background-image:linear-gradient(to right,var(--track-color) var(--pct, 50%),transparent var(--pct, 50%)),linear-gradient(180deg,#100d09,#201a13 45%,#100d09);background-size:100% 5px,100% 100%;background-position:center,center;box-shadow:inset 0 1px 3px #000000b3,inset 0 -1px #ffffff0d;border-radius:3px}body[data-skin=skeuomorphic] input[type=range]::-webkit-slider-thumb{width:10px;height:24px;border-radius:2px;background:linear-gradient(180deg,#d8cdb6,#a89a7c 45%,#6b6048);box-shadow:0 0 0 1px #14110d,inset 0 1px #fff6,0 2px 3px #0009}body[data-skin=skeuomorphic] input[type=range]::-moz-range-thumb{width:10px;height:24px;border-radius:2px;border:none;background:linear-gradient(180deg,#d8cdb6,#a89a7c 45%,#6b6048);box-shadow:0 0 0 1px #14110d,inset 0 1px #fff6}body[data-skin=skeuomorphic] input[type=range]::-moz-range-track{background:linear-gradient(180deg,#100d09,#201a13 45%,#100d09);box-shadow:inset 0 1px 3px #000000b3}body[data-skin=skeuomorphic] .tog-btn{background:linear-gradient(180deg,#35302a,#221d17);border-color:#4a4234;box-shadow:inset 0 1px #ffffff14,0 1px 2px #00000080}body[data-skin=skeuomorphic] .tog-btn.active{box-shadow:inset 0 2px 3px #0009,inset 0 -1px #ffffff0d;transform:translateY(1px)}body[data-skin=skeuomorphic] .module-header .mod-name{text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.04)}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;font-size:13px;height:100vh;display:flex;flex-direction:column;overflow:hidden}header{padding:10px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;flex-shrink:0;background:var(--surface)}.logo{font-size:17px;font-weight:800;letter-spacing:.5px;color:#d8cdb6;padding:5px 14px;border-radius:3px;background:linear-gradient(180deg,#383127,#221d17);border:1px solid #4a4234;box-shadow:inset 0 1px #ffffff12,0 1px 2px #00000080;text-shadow:0 1px 0 rgba(0,0,0,.75),0 -1px 0 rgba(255,255,255,.07)}.tagline{color:var(--text-dim);font-size:12px;letter-spacing:.2px}.status-pill{margin-left:auto;background:var(--surface2);border:1px solid var(--border);border-radius:100px;padding:3px 10px;font-size:11px;color:var(--text-dim);transition:all .3s}.status-pill.active{border-color:var(--lfo-color);color:var(--lfo-color)}.master-vol{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim)}.master-vol input[type=range]{width:80px;--track-color: var(--text)}.reset-btn{background:none;border:1px solid var(--border);border-radius:100px;padding:3px 10px;font-size:11px;color:var(--text-dim);cursor:pointer;transition:color .2s,border-color .2s}.reset-btn:hover{color:#c0392b;border-color:#c0392b}.header-btn{background:none;border:1px solid var(--border);border-radius:100px;padding:3px 10px;font-size:11px;color:var(--text-dim);cursor:pointer;transition:color .2s,border-color .2s}.header-btn:hover{color:var(--era-accent);border-color:var(--era-accent)}.header-btn:disabled{opacity:.35;cursor:default}.header-btn:disabled:hover{color:var(--text-dim);border-color:var(--border)}.transport-bar{display:flex;align-items:stretch;gap:10px;padding:7px 20px;background:linear-gradient(180deg,#221d17,#1c1813);border-bottom:1px solid var(--border);box-shadow:inset 0 1px #ffffff0a,0 2px 4px #00000059;flex-shrink:0}.tr-play{display:flex;align-items:center;gap:8px;padding:0 16px;min-width:96px;font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--text);background:linear-gradient(180deg,#34302a,#262220);border:1px solid #4a4234;border-radius:var(--radius);box-shadow:inset 0 1px #ffffff0f,0 1px 2px #00000080;cursor:pointer;transition:color .15s,border-color .15s,box-shadow .15s}.tr-play:hover{border-color:#6a5e48}.tr-play .tr-play-glyph{font-size:13px;color:var(--lfo-color);transition:color .15s}.tr-play.playing{color:#e8c98a;border-color:var(--era-accent);box-shadow:inset 0 1px #ffffff0f,0 0 10px #d4960a59}.tr-play.playing .tr-play-glyph{color:#e07a52}.tr-readout{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 12px;background:#161310;border:1px solid var(--border);border-radius:var(--radius);box-shadow:inset 0 1px 3px #0000008c}.tr-readout-label{font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim)}.tr-readout-val{font-family:var(--font-mono, monospace);font-size:14px;font-weight:700;color:var(--osc-color);text-shadow:0 0 6px rgba(212,150,10,.3)}.tr-pos{min-width:92px}.tr-pos .tr-readout-val{letter-spacing:1px}.tr-tempo-edit{display:flex;align-items:baseline;gap:4px}.tr-tempo-edit input[type=number]{width:46px;background:none;border:none;padding:0;font-family:var(--font-mono, monospace);font-size:14px;font-weight:700;color:var(--osc-color);text-shadow:0 0 6px rgba(212,150,10,.3);-moz-appearance:textfield}.tr-tempo-edit input::-webkit-outer-spin-button,.tr-tempo-edit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tr-tempo-edit input:focus{outline:none;color:#f0d28a}.tr-unit{font-size:8.5px;letter-spacing:1px;color:var(--text-dim)}.tr-tap{padding:0 13px;font-size:11px;letter-spacing:.5px;color:var(--text-dim);background:linear-gradient(180deg,#2a2622,#211d19);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:color .15s,border-color .15s}.tr-tap:hover{color:var(--text)}.tr-tap:active{color:var(--lfo-color);border-color:var(--lfo-color)}.tr-metro{margin-left:auto}.tr-toggle{display:flex;align-items:center;gap:7px;padding:0 13px;font-size:11px;letter-spacing:.5px;color:var(--text-dim);background:linear-gradient(180deg,#2a2622,#211d19);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:color .15s,border-color .15s}.tr-toggle:hover{color:var(--text)}.tr-toggle-dot{width:8px;height:8px;border-radius:50%;background:#1a1714;box-shadow:inset 0 1px 2px #000000b3;transition:background .15s,box-shadow .15s}.tr-toggle.active{color:var(--lfo-color);border-color:var(--lfo-color)}.tr-toggle.active .tr-toggle-dot{background:var(--lfo-color);box-shadow:0 0 7px var(--lfo-color)}main{flex:1;display:grid;grid-template-columns:1fr 360px;grid-template-rows:minmax(0,1.15fr) minmax(0,.56fr);min-height:0;overflow:hidden}main.battle-active{grid-template-rows:minmax(0,1.15fr) minmax(0,.9fr)}.main-content{grid-column:1 / -1;grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.stage-region{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.rack{display:flex;align-items:stretch;border-bottom:1px solid var(--border);flex:1;min-height:0;background:var(--bg)}.rack-rows{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr minmax(220px,.55fr);grid-template-rows:minmax(min-content,1fr) minmax(min-content,1fr) min-content;grid-template-areas:"osc  filter adsr fx" "osc2 noise  eq   fx" "lfo  lfo    lfo  fx";gap:2px;background:#0d0b07;overflow-x:hidden;overflow-y:auto}.osc{grid-area:osc}.filter{grid-area:filter}.adsr{grid-area:adsr}.osc2{grid-area:osc2}.noise{grid-area:noise}.eq{grid-area:eq}.lfo{grid-area:lfo}.fx{grid-area:fx}.rack-cheek{width:26px;flex-shrink:0;background:repeating-linear-gradient(180deg,#0000002e,#0000,#ffffff0a 4px,#0000 7px),linear-gradient(95deg,#6b4a30,#855b38 45%,#6a4730);box-shadow:inset 0 0 14px #00000073,inset -2px 0 3px #0006}.rack-cheek-left{box-shadow:inset 0 0 14px #00000073,inset 2px 0 3px #0006}.module{background:var(--surface);padding:5px 10px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 110px;grid-auto-rows:min-content;align-content:start;column-gap:10px;overflow:hidden;box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #00000073,inset 1px 0 #ffffff06,inset -1px 0 #0000004d;--track-color: #888}.module-header{grid-column:1 / -1}.module>.btn-group,.module>.knob-bank{grid-column:1}.module>.mod-canvas{grid-column:2;grid-row:2 / 99;align-self:stretch}.module-band{grid-template-columns:minmax(0,1fr) 140px}.band-controls{grid-column:1;display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px}.band-group{display:flex;flex-direction:column;gap:4px}.band-controls>.tr-toggle{margin-bottom:3px}.band-controls>.knob-bank{flex:0 1 220px;margin:0;gap:14px}.module-strip{grid-template-columns:minmax(0,1fr);grid-template-rows:min-content min-content minmax(0,1fr);align-content:stretch}.module-strip>.knob-bank{grid-row:2}.module-strip>.mod-canvas{grid-column:1;grid-row:3;height:64px;align-self:end;margin-top:6px}.module:after{content:"";position:absolute;top:0;left:0;right:0;height:var(--module-accent-height, 0px);transition:height .6s ease}.osc{--track-color: var(--osc-color)}.osc2{--track-color: #d99a4e}.noise{--track-color: #b8b0a0}.filter{--track-color: var(--filter-color)}.adsr{--track-color: var(--adsr-color)}.lfo{--track-color: var(--lfo-color)}.fx{--track-color: #f472b6}.osc:after{background:var(--osc-color)}.osc2:after{background:#d99a4e}.noise:after{background:#b8b0a0}.filter:after{background:var(--filter-color)}.adsr:after{background:var(--adsr-color)}.lfo:after{background:var(--lfo-color)}.fx:after{background:#f472b6}.osc2 .mod-tag{color:#d99a4e;background:#d99a4e1f}.noise .mod-tag{color:#b8b0a0;background:#b8b0a01f}.eq{--track-color: #7fd4c4}.eq:after{background:#7fd4c4}.eq .mod-tag{color:#7fd4c4;background:#7fd4c41f}.osc2 .tog-btn.active{background:#d99a4e26;border-color:#d99a4e;color:#d99a4e}.noise .tog-btn.active{background:#b8b0a026;border-color:#b8b0a0;color:#b8b0a0}.module-header{display:flex;align-items:baseline;gap:7px;margin-bottom:2px}.signal-led{width:6px;height:6px;border-radius:50%;background:var(--era-accent);align-self:center;opacity:.15;flex-shrink:0}.mod-tag{font-size:9px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;padding:2px 5px;border-radius:3px}.osc .mod-tag{color:var(--osc-color);background:#d4960a1f}.filter .mod-tag{color:var(--filter-color);background:#7eb8c41f}.adsr .mod-tag{color:var(--adsr-color);background:#9b8ab41f}.lfo .mod-tag{color:var(--lfo-color);background:#6aad7a1f}.mod-name{font-size:13px;font-weight:600;color:var(--text)}.mod-subtitle{font-size:11px;color:var(--text-dim);margin-left:auto}.ctrl{margin-bottom:10px}.ctrl:last-of-type{margin-bottom:0}.ctrl-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.ctrl-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--label-spacing, .8px);text-shadow:var(--label-shadow, none);transition:letter-spacing .4s ease}.ctrl-val{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--track-color)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;width:100%;height:22px;border-radius:2px;background-image:linear-gradient(to right,var(--track-color) var(--pct, 50%),var(--surface2) var(--pct, 50%));background-size:100% 5px;background-position:center;background-repeat:no-repeat;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:22px;border-radius:2px;background:var(--text);box-shadow:0 0 0 2px var(--track-color),0 1px 4px #00000080;transition:box-shadow .12s;cursor:ew-resize}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--track-color),0 1px 6px #00000080}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--track-color),0 0 10px var(--track-color)}input[type=range]:active::-webkit-slider-thumb{transform:scaleX(1.5);box-shadow:0 0 0 4px var(--track-color),0 1px 8px #0009}input[type=range]::-moz-range-track{height:5px;border-radius:2px;background:var(--surface2)}input[type=range]::-moz-range-progress{height:5px;border-radius:2px;background:var(--track-color)}input[type=range]::-moz-range-thumb{width:5px;height:22px;border-radius:2px;border:none;background:var(--text);box-shadow:0 0 0 2px var(--track-color);cursor:ew-resize}.knob-bank{display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:start;gap:8px;margin:1px 0}.ctrl-knob{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:0}.ctrl[hidden]{display:none}.ctrl-knob>input[type=range]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.ctrl-knob .ctrl-row{flex-direction:column;align-items:center;gap:0;margin-bottom:0}.ctrl-knob .ctrl-label{font-size:9px}.ctrl-knob .ctrl-val{font-size:11px}.knob-bank-col{flex-direction:column;align-items:stretch;gap:6px}.knob-bank-col .ctrl-knob{flex-direction:row;align-items:center;gap:10px}.knob-bank-col .knob{width:38px;height:38px;flex-shrink:0}.knob-bank-col .ctrl-knob .ctrl-row{flex:1;min-width:0;flex-direction:row;justify-content:space-between;align-items:baseline}.knob{width:44px;height:44px;cursor:grab;touch-action:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}.knob:active{cursor:grabbing}.knob-svg{width:100%;height:100%;display:block}.knob-tick{stroke:var(--border);stroke-width:1.5}.knob-track{fill:none;stroke:var(--surface2);stroke-width:3;stroke-linecap:round}.knob-arc{fill:none;stroke:var(--track-color);stroke-width:3;stroke-linecap:round}.knob-body{fill:url(#knob-skirt)}.knob-ring{fill:none;stroke:var(--track-color);stroke-width:2;opacity:.85}.knob-pointer{stroke:#e8e0d0;stroke-width:2.5;stroke-linecap:round}.ctrl-knob:has(>input:focus-visible) .knob-arc{filter:drop-shadow(0 0 4px var(--track-color))}.ctrl-knob:has(>input:focus-visible) .knob-ring{stroke-width:3;opacity:1}@media (prefers-reduced-motion: reduce){.knob{transition:none}}.btn-group{display:flex;gap:3px;margin-bottom:3px;flex-wrap:wrap}.tog-btn{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:3px 5px;cursor:pointer;color:var(--text-dim);font-size:11px;font-weight:600;text-align:center;transition:all .12s;display:flex;flex-direction:column;align-items:center;gap:3px}.tog-btn[hidden]{display:none}.tog-btn:hover:not(.active){border-color:var(--text-dim);color:var(--text)}.osc .tog-btn.active{background:#d4960a26;border-color:var(--osc-color);color:var(--osc-color)}.filter .tog-btn.active{background:#7eb8c426;border-color:var(--filter-color);color:var(--filter-color)}.lfo .tog-btn.active{background:#6aad7a26;border-color:var(--lfo-color);color:var(--lfo-color)}.wave-svg{width:34px;height:13px;display:block}.mod-canvas{display:block;width:100%;height:100%;min-height:46px;background:var(--bg);border-radius:5px}.presets-bar{display:flex;align-items:center;gap:6px;padding:6px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.clips-bar{display:none}body[data-stage=seq] .clips-bar,body[data-stage=roll] .clips-bar{display:flex}.tracks-bar[hidden]{display:none}.presets-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-right:4px;white-space:nowrap}.presets-bar select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;padding:3px 6px;height:26px;min-width:130px;max-width:200px;cursor:pointer;outline:none}.presets-bar select:focus{border-color:var(--era-accent)}.preset-btn{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-size:11px;padding:0 10px;height:26px;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s}.preset-btn:hover{background:var(--border);border-color:var(--text-dim)}.preset-btn:disabled{opacity:.35;cursor:default}.preset-btn-danger:not(:disabled){color:#e07070;border-color:#6a3030}.preset-btn-danger:not(:disabled):hover{background:#3a1c1c;border-color:#e07070}.preset-btn.recording{color:#f87171;border-color:#f87171;background:#f871711f;animation:rec-pulse 1.1s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion: reduce){.preset-btn.recording{animation:none}}.presets-divider{width:1px;height:18px;background:var(--border);margin:0 2px;flex-shrink:0}.preset-name-input{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;padding:3px 8px;height:26px;width:160px;outline:none}.preset-name-input::placeholder{color:var(--text-dim)}.preset-name-input:focus{border-color:var(--era-accent)}.lower-row{border-bottom:1px solid var(--border);flex:0 0 auto;min-height:0;display:flex;flex-direction:column}body[data-stage=seq] .lower-row,body[data-stage=roll] .lower-row,body[data-stage=help] .lower-row{flex:1}.lower-tabs{display:flex;gap:1px;flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--border)}.lower-tab{padding:6px 16px;font-size:9px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-dim);background:var(--surface);border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}.lower-tab:hover{color:var(--text)}.lower-tab.active{color:var(--era-accent);border-bottom-color:var(--era-accent)}.lower-views{flex:1;min-height:0;position:relative}.lower-view{height:100%;min-height:0;display:none}.lower-view.active{display:flex}body[data-stage=seq] .keys-row,body[data-stage=roll] .keys-row,body[data-stage=help] .keys-row{display:none}.scope-wrap{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;min-width:0}.scope-col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.diagnosis{margin-top:6px;padding:5px 9px;font-size:10.5px;line-height:1.4;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);flex-shrink:0}.diagnosis-warn{border-color:var(--era-accent);color:var(--text)}.diagnosis-ok{border-color:var(--filter-color, #7eb8c4);color:var(--text-dim)}.section-label{font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}#scope-canvas,#spectrum-canvas{flex:1;min-height:0;background:#0f0e0c;border-radius:7px;display:block;width:100%;border:3px solid #100d0a;box-shadow:inset 0 0 18px #000000e6,inset 0 0 2px #78c88c1f,0 0 0 1px #2a251e,0 1px 3px #00000080}.seq{background:var(--surface);flex-direction:column;padding:10px 14px 12px;gap:8px;overflow:hidden}.seq-toolbar{display:flex;align-items:center;gap:14px;flex-shrink:0}.seq-toolbar .section-label{margin-bottom:0}.seq-ctrl{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim)}.seq-ctrl select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:3px;padding:2px 4px;font:inherit}.seq-ctrl input[type=range]{width:80px}.seq-btn{margin-left:auto;padding:3px 12px;font-size:10px;letter-spacing:.5px;color:var(--text-dim);background:var(--surface2);border:1px solid var(--border);border-radius:3px;cursor:pointer;transition:color .15s,border-color .15s}.seq-btn:hover{color:#c0392b;border-color:#c0392b}.practice-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex:1;text-align:center;padding:12px}.practice-target-name{font-size:15px;font-weight:700;letter-spacing:.5px;color:var(--text)}.practice-meter{width:min(420px,90%);height:14px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;overflow:hidden}.practice-meter-fill{height:100%;width:0%;background:var(--era-accent);border-radius:6px;transition:width .15s ease,background .2s ease}.practice-meter-fill.nailed{background:#4ade80}.practice-meter-label{font-size:11px;font-weight:700;color:var(--text-dim);letter-spacing:.5px}.practice-hint{max-width:480px;font-size:11px;color:var(--text-dim);line-height:1.5}.mixer-strips{display:flex;gap:14px;align-items:stretch;overflow-x:auto;flex:1;padding:4px 2px 8px}.channel-strip{display:flex;flex-direction:column;align-items:center;gap:8px;width:76px;flex-shrink:0;padding:10px 6px;background:var(--surface2);border:1px solid var(--border);border-radius:6px}.channel-strip.active{border-color:var(--era-accent)}.channel-master{background:var(--bg)}.channel-name{width:100%;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--text);background:none;border:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px}.channel-name:hover{color:var(--era-accent)}.channel-name-static{cursor:default;color:var(--text-dim)}.channel-pan-ctrl{margin:0}.channel-meter{width:14px;height:90px;background:var(--bg);border:1px solid var(--border);border-radius:3px;display:flex;align-items:flex-end;overflow:hidden}.channel-meter-fill{width:100%;height:0%;background:var(--era-accent);transition:height .08s linear}.channel-fader{width:100%}.channel-buttons{display:flex;gap:4px}.channel-btn{width:22px;height:20px;font-size:10px;font-weight:700;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:3px;cursor:pointer}.channel-btn:hover{color:var(--text)}.channel-mute-btn.active{color:#e07070;border-color:#e07070;background:#e0707026}.channel-solo-btn.active{color:#e0c060;border-color:#e0c060;background:#e0c06026}#view-help{overflow-y:auto}.help-body{overflow-y:auto;flex:1;min-height:0;padding-right:4px}.help-body h4{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--era-accent);margin:16px 0 6px}.help-body h4:first-child{margin-top:0}.help-body p,.help-body li{font-size:12px;line-height:1.6;color:var(--text-dim)}.help-body p{margin:0 0 8px}.help-body ul{margin:0 0 8px;padding-left:18px}.help-body li{margin-bottom:4px}.help-body li strong{color:var(--text)}.help-body code{background:var(--surface2);border-radius:3px;padding:1px 4px;font-size:11px}.help-gated{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim)}.help-grid{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;margin:0 0 10px}.help-grid dt{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap}.help-grid dd{font-size:12px;color:var(--text-dim);margin:0}.seq-ruler{display:grid;grid-template-columns:38px repeat(var(--steps, 16),1fr);gap:2px;height:16px;flex-shrink:0}.seq-ruler-cell{display:flex;align-items:center;font-family:var(--font-mono, monospace);font-size:9px;font-weight:700;color:var(--text-dim);border-left:1px solid #332c22}.seq-ruler-cell.playhead{color:var(--lfo-color)}.seq-grid{flex:1;min-height:0;display:grid;grid-template-columns:38px repeat(var(--steps, 16),1fr);grid-auto-rows:1fr;gap:2px;overflow:auto;align-content:stretch}.seq-auto{display:grid;grid-template-columns:38px repeat(var(--steps, 16),1fr);gap:2px;height:46px;margin-top:5px;flex-shrink:0}.seq-auto-label{align-self:center;font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}.seq-auto-cell{position:relative;background:#16130f;border-radius:2px;cursor:ns-resize;display:flex;align-items:flex-end;overflow:hidden}.seq-auto-cell.beat{border-left:1px solid #4a4234}.seq-auto-cell:hover{background:#201a13}.seq-auto-fill{width:100%;min-height:2px;background:linear-gradient(180deg,var(--filter-color, #7eb8c4),color-mix(in srgb,var(--filter-color, #7eb8c4) 45%,transparent));border-radius:2px 2px 0 0;pointer-events:none}.seq-auto-cell.empty .seq-auto-fill{min-height:0}.seq-rowlabel{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-family:var(--font-mono, monospace);font-size:8px;color:var(--text-dim);white-space:nowrap}.seq-rowlabel.accidental{opacity:.4}.seq-rowlabel.drum-first,.seq-cell.drum-first,.seq-rowlabel.seq-accentlabel,.seq-cell.seq-accentcell{border-top:2px solid #4a4234}.seq-cell{border:1px solid var(--border);border-radius:2px;background:#14110d;cursor:pointer;padding:0;min-height:9px;transition:background .08s,box-shadow .08s}.seq-cell.row-c{background:#1b1712}.seq-cell.beat{border-left:1px solid #4a4234}.seq-cell:hover{background:#2a241b}.seq-cell.on{background:var(--era-accent);box-shadow:inset 0 0 4px #0006,0 0 6px #d4960a66}.seq-cell.playhead{box-shadow:inset 0 0 0 1px var(--lfo-color)}.seq-drumcell.on{background:var(--filter-color, #7eb8c4);box-shadow:inset 0 0 4px #0006,0 0 6px #7eb8c466}.seq-accentcell.on{background:#e0706f;box-shadow:inset 0 0 4px #0006,0 0 6px #e0706f66}.seq-cell.on.playhead{background:#f0d28a;box-shadow:inset 0 0 0 1px var(--lfo-color),0 0 8px #d4960a99}.teach-panel{grid-column:2;grid-row:2;background:var(--surface);border-left:1px solid var(--border);border-top:1px solid var(--border);padding:14px 18px;display:flex;flex-direction:column;gap:8px;overflow:hidden}.teach-panel .section-label{margin-bottom:0}.teach-tabs{display:flex;gap:2px;flex-shrink:0;border-bottom:1px solid var(--border)}.teach-tab{padding:5px 12px;font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}.teach-tab:hover{color:var(--text)}.teach-tab.active{color:var(--era-accent);border-bottom-color:var(--era-accent)}.teach-view{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:hidden}.teach-view[hidden]{display:none}.teach-view#teach-view-history{overflow-y:auto}#teach-title{font-size:16px;font-weight:700;color:var(--text);line-height:1.25}#teach-body{font-size:13px;line-height:1.65;color:var(--text-dim);flex:1;overflow-y:auto}#teach-canvas{display:block;width:100%;height:124px;background:var(--bg);border-radius:5px;flex-shrink:0}.keys-row{background:var(--surface);padding:14px 20px;display:grid;grid-template-columns:auto auto 1.4fr;align-items:center;gap:28px;flex-shrink:0;flex:1;min-height:0}.keys-row>.keys-left{grid-column:1;justify-self:start;align-self:center}.keys-row>.boss-panel{grid-column:2;justify-self:center;align-self:center}.keys-row>.scope-wrap{grid-column:3;align-self:stretch}.kb-wrap{position:relative;height:136px;flex-shrink:0;-webkit-user-select:none;user-select:none}.key{position:absolute;border-radius:0 0 5px 5px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.3px;transition:background .05s,box-shadow .05s;user-select:none;-webkit-user-select:none;touch-action:none}.play-hint{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--era-accent, #f59e0b);animation:play-hint-pulse 1.4s ease-in-out infinite}.play-hint.hidden{display:none}@keyframes play-hint-pulse{0%,to{opacity:.35}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.play-hint{animation:none;opacity:.8}}.key.white{width:36px;height:136px;background:#e8e4da;border:1px solid #a09890;border-top:none;z-index:1;color:#8a8070;padding-bottom:6px}.key.white:hover{background:#ddd8cc}.key.white.pressed{background:#c8c2b4;box-shadow:inset 0 3px #00000026}.key.black{width:23px;height:84px;background:#1a1712;border:1px solid #2a2520;border-top:none;z-index:2;color:#44403a;padding-bottom:4px}.key.black:hover{background:#22201a}.key.black.pressed{background:#2a251e;box-shadow:inset 0 2px #00000080}.kb-info{display:none;font-size:11px;color:var(--text-dim);line-height:1.7}.boss-panel{display:none;flex-direction:column;align-items:center;gap:7px;padding:9px 22px 11px;background:var(--surface);border-radius:7px;box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #00000073,0 2px 10px #0006,0 0 0 1px color-mix(in srgb,var(--era-accent) 45%,transparent),0 0 14px color-mix(in srgb,var(--era-accent) 18%,transparent)}.battle-active .boss-panel{display:flex;animation:boss-enter .5s cubic-bezier(.2,1.3,.4,1) both}@keyframes boss-enter{0%{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}.boss-panel.boss-struck{transform:scale(1.035);box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #00000073,0 2px 10px #0006,0 0 0 2px color-mix(in srgb,var(--era-accent) 80%,transparent),0 0 26px color-mix(in srgb,var(--era-accent) 55%,transparent);transition:transform .09s ease,box-shadow .09s ease}.boss-panel-header{display:flex;align-items:center;gap:8px}.boss-tag{color:var(--era-accent);background:color-mix(in srgb,var(--era-accent) 14%,transparent)}.boss-panel-name{font-size:18px;font-weight:700;color:var(--era-accent);font-family:var(--font-mono, monospace);letter-spacing:.06em;text-transform:uppercase}.boss-svg-wrap svg{width:238px;height:187px;display:block}.kk{display:inline-block;background:var(--surface2);border:1px solid var(--border);border-bottom-width:2px;border-radius:3px;padding:1px 5px;font-size:10px;font-family:monospace;color:var(--text)}.boss-corrupted{animation:boss-glitch .4s infinite;filter:hue-rotate(120deg) saturate(3) brightness(.7)}@keyframes boss-glitch{0%,90%,to{transform:translate(0);filter:hue-rotate(120deg) saturate(3) brightness(.7)}92%{transform:translate(-3px);filter:hue-rotate(160deg) saturate(4) brightness(.6)}95%{transform:translate(2px);filter:hue-rotate(80deg) saturate(5) brightness(.8)}}@keyframes boss-svg-glitch{0%,89%{transform:translate(0);filter:hue-rotate(0deg) saturate(1) brightness(1)}90%{transform:translate(calc(var(--gi, 0) * 5px));filter:hue-rotate(calc(var(--gi, 0) * 120deg)) saturate(calc(1 + var(--gi, 0) * 4)) brightness(calc(1 - var(--gi, 0) * .3))}95%{transform:translate(calc(var(--gi, 0) * -4px),calc(var(--gi, 0) * 1px));filter:hue-rotate(calc(var(--gi, 0) * -60deg)) saturate(calc(1 + var(--gi, 0) * 2))}to{transform:translate(0);filter:none}}.boss-svg-active{animation:boss-svg-glitch .5s infinite}.boss-svg-restored{animation:none;filter:grayscale(.5) opacity(.7);transition:filter .8s ease,opacity .8s ease}.boss-restored{animation:none;filter:none;transition:filter .8s ease,transform .8s ease}.boss-zap-overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:500;opacity:0;transition:opacity .08s ease}.boss-zap-overlay.active{opacity:1}.boss-zap-bolt{fill:none;stroke:#eafcff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--era-accent)) drop-shadow(0 0 8px var(--era-accent))}.boss-zap-glow{fill:none;stroke:var(--era-accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.35;filter:blur(3px)}.boss-hp-bar{height:6px;width:238px;background:var(--surface2);border-radius:3px;overflow:hidden}.boss-hp-fill{height:100%;background:var(--era-accent);border-radius:2px;transition:width .3s ease;width:100%}.boss-hud-taunt{font-size:12px;color:var(--text-dim);font-style:italic;text-align:center;max-width:238px;line-height:1.4}@media (prefers-reduced-motion: reduce){.battle-active .boss-panel{animation:none}.boss-panel.boss-struck{transform:none}}.boss-preview-btn{margin-top:6px;padding:4px 12px;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--era-accent);background:linear-gradient(180deg,#2a2622,#211d19);border:1px solid var(--era-accent);border-radius:var(--radius);cursor:pointer;transition:color .15s,box-shadow .15s}.boss-preview-btn:hover{color:#f0d28a;box-shadow:0 0 8px #d4960a59}.teach-history-head{margin-bottom:2px}.stage-intro-pioneer{font-weight:600;color:var(--era-accent);font-size:13px}.stage-intro-sep,.stage-intro-instrument{color:var(--text-dim);font-size:13px}.stage-intro-fact{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--text-dim)}.era-workspaces{margin-top:14px;padding-top:10px;border-top:1px solid var(--border)}.era-swatches,.era-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.era-swatch,.era-preset-btn{padding:4px 12px;font-size:11px;font-weight:600;color:var(--text-dim);background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:color .12s,border-color .12s}.era-swatch:hover,.era-preset-btn:hover{color:var(--text);border-color:var(--era-accent)}.era-swatch.active{color:var(--era-accent);border-color:var(--era-accent);box-shadow:0 0 6px #0000004d inset}.module.locked{opacity:.45;pointer-events:none}.mod-lock{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgba(0,0,0,.15) 6px,rgba(0,0,0,.15) 8px);border-radius:inherit;z-index:10}.module.locked .mod-lock{display:block}.lore-btn{background:none;border:none;padding:0 0 0 4px;font-size:13px;color:var(--text-dim);cursor:pointer;pointer-events:auto;position:relative;z-index:11;transition:color .15s;line-height:1}.lore-btn:hover{color:var(--era-accent)}.module.active-stage:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--era-accent);animation:pulse-accent 2s ease-in-out infinite}@keyframes pulse-accent{0%,to{opacity:1}50%{opacity:.4}}.boss-transition-overlay:not([hidden]){display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;background:#080604c7;z-index:200}.boss-transition-card{max-width:460px;margin:0 20px;padding:28px 32px;background:var(--surface);border:1px solid var(--era-accent);border-radius:8px;text-align:center;box-shadow:0 12px 48px #0009}.boss-transition-tag{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--era-accent);margin-bottom:6px}.boss-transition-card h2{font-size:22px;color:var(--text);margin-bottom:6px}.boss-transition-corrupted{font-size:12px;color:var(--text-dim);font-style:italic;margin-bottom:14px}.boss-transition-line{font-size:13px;line-height:1.6;color:var(--text-dim);margin-bottom:10px}.boss-transition-btn{margin-top:8px;padding:10px 28px;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--bg);background:var(--era-accent);border:none;border-radius:var(--radius);cursor:pointer}.boss-transition-btn:hover{filter:brightness(1.1)}.graduation-banner{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--era-accent);border-radius:8px;padding:24px 32px;text-align:center;z-index:100;box-shadow:0 8px 32px #0009}.graduation-banner.visible{display:block}.graduation-banner h2{color:var(--era-accent);font-size:20px;margin-bottom:8px}.graduation-banner p{color:var(--text-dim);font-size:13px}.battle-active .boss-panel{display:flex}.battle-active .kb-info{display:none}.battle-active{box-shadow:inset 0 0 0 2px var(--era-accent),inset 0 0 40px #0006;animation:battle-enter .6s ease forwards}@keyframes battle-enter{0%{box-shadow:inset 0 0 0 4px var(--era-accent),inset 0 0 60px #0009}to{box-shadow:inset 0 0 0 2px var(--era-accent),inset 0 0 40px #0006}}.battle-active .module.active-stage{background:color-mix(in srgb,var(--surface) 85%,var(--era-accent) 15%)}.battle-vs{display:none;position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--era-accent) 40%,var(--era-accent) 60%,transparent 100%);animation:vs-pulse 2s ease-in-out infinite}.battle-active .module.active-stage .battle-vs{display:block}@keyframes vs-pulse{0%,to{opacity:.8}50%{opacity:.3}}@media (max-width: 1180px){.rack-rows{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:minmax(min-content,1fr);grid-template-areas:"osc  filter" "osc2 noise" "adsr eq" "lfo  lfo" "fx   fx"}.module-strip{grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:none;align-content:start}.module-strip>.knob-bank{grid-row:auto}.module-strip>.mod-canvas{grid-column:2;grid-row:2 / 99;margin-top:0;height:100%;align-self:stretch}.module-strip .knob-bank-col{flex-direction:row;flex-wrap:wrap;align-items:start}.module-strip .knob-bank-col .ctrl-knob{flex-direction:column;gap:3px}.module-strip .knob-bank-col .knob{width:44px;height:44px}.module-strip .knob-bank-col .ctrl-knob .ctrl-row{flex:none;flex-direction:column;justify-content:center;align-items:center}.keys-row{grid-template-columns:1fr;grid-auto-rows:auto;justify-items:center;gap:14px;overflow-y:auto}.keys-row>.keys-left,.keys-row>.boss-panel,.keys-row>.scope-wrap{grid-column:1;justify-self:center}.keys-row>.scope-wrap{width:100%;max-width:480px}}@media (max-width: 820px){body{height:auto;min-height:100vh;overflow-y:auto;overflow-x:hidden}header,.transport-bar,.presets-bar,.seq-toolbar{flex-wrap:wrap;row-gap:8px}main{display:block;height:auto;overflow:visible}.main-content{display:block;height:auto;overflow:visible}.rack{height:auto}.rack-rows{overflow:visible;height:auto;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:min-content;grid-template-areas:"osc" "filter" "adsr" "osc2" "noise" "eq" "lfo" "fx"}.module-band .band-controls>.tr-toggle{padding:0 8px}.module-band .btn-group .tog-btn{padding:2px 4px;font-size:10px}.module-band .band-controls{gap:6px 10px}.module-band{grid-template-columns:minmax(0,1fr) 60px}.stage-region{height:auto;overflow:visible}.lower-row,body[data-stage=seq] .lower-row{height:auto}.keys-row{height:auto;overflow:visible}.teach-panel{height:auto;max-height:none;overflow:visible;border-left:none}.module{grid-template-columns:minmax(0,1fr)}.module>.mod-canvas{grid-column:1;grid-row:auto;align-self:auto}.knob-bank{flex-wrap:wrap;row-gap:10px}.lower-tabs{flex-wrap:wrap}.mod-canvas{height:96px}#scope-canvas,#spectrum-canvas{flex:none;height:140px}}