:root{--steel-0:#0a0c0f;--steel-1:#14171d;--steel-2:#1b1f26;--steel-3:#2a3039;--phosphor:#ffb020;--phosphor-hot:#ffd063;--silkscreen:#d8d1bc;--muted:#6f7683;--gate-red:#e5483c;--dub-green:#2f9e63;--dub-gold:#e0a428;--mono:ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--steel-0);height:100%;color:var(--silkscreen);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,sans-serif}body{justify-content:center;display:flex}button{cursor:pointer;font-family:inherit}button:focus-visible{outline:2px solid var(--phosphor-hot);outline-offset:2px}#app{background:var(--steel-1);width:min(100vw,440px);height:100dvh;padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 12px);grid-template-rows:auto auto minmax(0,1fr);gap:8px;display:grid;position:relative}@media (width>=700px){body{align-items:center;padding:24px 0}#app{border:1px solid var(--steel-3);border-radius:18px;height:min(100dvh - 48px,880px)}}.tab-bar{align-items:center;gap:4px;display:flex}.tab-button{border:1px solid var(--steel-3);background:var(--steel-2);min-width:0;min-height:42px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;touch-action:none;border-radius:9px;flex:1 1 0;padding:0 2px;font-size:.55rem;font-weight:700;overflow:hidden}.tab-button.is-active{color:var(--phosphor);background:#ffb02014;box-shadow:inset 0 0 0 1px #ffb02066,0 0 12px #ffb0201f}.tab-divider{background:var(--steel-3);flex:none;width:1px;height:26px}.tab-button--board{background:0 0;border-style:dashed}.tab-button--board.is-active{color:var(--silkscreen);background:#d8d1bc12;box-shadow:inset 0 0 0 1px #d8d1bc59}.tab-panel{min-height:0}.tab-panel[hidden]{display:none}.panel-siren{grid-template-rows:minmax(0,1fr) auto auto auto auto;gap:10px;display:grid}.wordmark{letter-spacing:.02em;color:var(--phosphor);font-size:1.35rem;font-style:italic;font-weight:800}.wordmark span{color:var(--silkscreen);margin-left:.35em;font-weight:650}.wordmark-large{font-size:2.4rem}.scope-badge{pointer-events:none;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:.58rem;position:absolute;top:8px;right:10px}.scope-brand{color:var(--phosphor);font-style:italic;font-weight:800}.scope-axis{pointer-events:none;text-transform:uppercase;letter-spacing:.18em;color:#d8d1bc73;font-size:.55rem;font-weight:600;position:absolute}.scope-axis-x{text-align:center;bottom:6px;left:0;right:0}.scope-axis-y{writing-mode:vertical-rl;align-items:center;display:flex;top:0;bottom:0;left:6px;transform:rotate(180deg)}.trim{background:linear-gradient(90deg, var(--gate-red) 0 33.3%, var(--dub-gold) 33.3% 66.6%, var(--dub-green) 66.6% 100%);opacity:.8;border-radius:2px;height:3px}.scope{border:1px solid var(--steel-3);background:#0b0d08;border-radius:12px;position:relative;overflow:hidden;box-shadow:inset 0 2px 12px #000000b3}.scope canvas{width:100%;height:100%;position:absolute;inset:0}.scope:after{content:"";pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,#0000 55%,#00000073);position:absolute;inset:0}.control-label{text-transform:uppercase;letter-spacing:.16em;color:var(--silkscreen);opacity:.75;text-align:center;white-space:nowrap;font-size:.6rem;font-weight:600}.control-label--wrap{white-space:normal;min-width:0;line-height:1.5}.chip--square{flex-direction:column;flex:0 0 56px;align-self:flex-end;gap:4px;width:56px;height:52px;font-size:.52rem}.level-bar{border:1px solid var(--steel-3);background:var(--steel-2);touch-action:none;border-radius:7px;height:22px;position:relative;overflow:hidden}.level-bar-fill{border-right:2px solid var(--phosphor);background:#ffb02052;position:absolute;inset:0 auto 0 0}.level-bar--wide{flex:1;height:40px}.fader-row{grid-template-columns:repeat(6,1fr);gap:5px;display:grid}.fader{touch-action:none;flex-direction:column;align-items:center;gap:5px;display:flex}.fader-track{border:1px solid var(--steel-3);background:var(--steel-2);border-radius:8px;width:16px;height:128px;position:relative}.fader-fill{background:#ffb02038;border-radius:8px;position:absolute;inset:auto 0 0}.fader--global .fader-fill{background:#d8d1bc24}.fader-cap{border:1px solid var(--steel-3);background:linear-gradient(#2c323c,#1b1f26);border-radius:5px;width:34px;height:20px;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);box-shadow:0 2px 6px #00000080}.fader-cap:after{content:"";background:var(--phosphor);border-radius:1px;height:2px;position:absolute;top:50%;left:5px;right:5px;transform:translateY(-50%)}.fader--global .fader-cap:after{background:var(--silkscreen)}.fader.is-active .fader-cap{border-color:var(--phosphor-dim)}.fader-value{font-family:var(--mono);color:var(--phosphor);min-height:1em;font-size:.65rem}.fader--global .fader-value{color:var(--silkscreen)}.voice-row{align-items:flex-end;gap:8px;display:flex}.chip{border:1px solid var(--steel-3);background:var(--steel-2);width:100%;min-height:44px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;touch-action:none;border-radius:9px;justify-content:center;align-items:center;gap:7px;font-size:.6rem;font-weight:600;display:flex}.chip-led{background:#3a3325;border-radius:50%;width:9px;height:9px}.chip--echo.is-on{color:var(--silkscreen);border-color:var(--phosphor-dim)}.chip--echo.is-on .chip-led{background:var(--phosphor);box-shadow:0 0 8px var(--phosphor)}.segmented{flex-direction:column;flex:1;gap:4px;display:flex}.segmented-row{background:var(--steel-2);border:1px solid var(--steel-3);border-radius:9px;gap:3px;padding:3px;display:flex}.segment{min-height:44px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;touch-action:none;background:0 0;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;font-size:.62rem;font-weight:600;display:flex}.segment svg{width:26px;height:15px}.segment.is-active{color:var(--phosphor);background:#ffb02014;box-shadow:inset 0 0 0 1px #ffb02066,0 0 12px #ffb0201f}.segmented-inline{flex-direction:row;flex:none;align-items:center;gap:8px}.segmented-inline .segment{min-height:34px;padding:0 12px}.selector-row{gap:10px;display:flex}.gate-row{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.gate-cell{flex-direction:column;gap:6px;display:flex}.gate{color:#f0a49b;text-transform:uppercase;letter-spacing:.1em;touch-action:none;background:linear-gradient(#38140f,#260d0a);border:1px solid #572019;border-radius:14px;justify-content:center;align-items:center;gap:9px;min-height:84px;font-size:1.05rem;font-weight:700;transition:background 60ms linear;display:flex;position:relative;overflow:hidden}.gate-scope{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.gate>span{position:relative}.gate-led{background:#57221c;border-radius:50%;width:10px;height:10px}.gate.is-on{background:linear-gradient(180deg, var(--gate-red), #b3271d);color:#2a0c09;box-shadow:0 0 26px #e5483c73,inset 0 1px #ffffff40}.gate.is-on .gate-led{background:var(--phosphor-hot);box-shadow:0 0 8px var(--phosphor-hot)}.gate-cell-bottom{gap:6px;display:flex}.hold,.sel{border:1px solid var(--steel-3);background:var(--steel-2);min-width:0;min-height:34px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;touch-action:none;border-radius:9px;flex:1;justify-content:center;align-items:center;gap:5px;font-size:.55rem;font-weight:600;display:flex}.sel-led{background:#3a3325;border-radius:50%;width:8px;height:8px}.sel.is-on{color:var(--phosphor);border-color:var(--phosphor-dim)}.sel.is-on .sel-led{background:var(--phosphor);box-shadow:0 0 8px var(--phosphor)}.gate-cell.is-selected .gate{box-shadow:inset 0 0 0 1px #ffb02059}.hold-led{background:#1d3327;border-radius:50%;width:8px;height:8px}.hold.is-on{color:var(--silkscreen);border-color:#2f9e6380}.hold.is-on .hold-led{background:var(--dub-green);box-shadow:0 0 10px #2f9e63b3}.arm-overlay{z-index:10;background:var(--steel-0);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:fixed;inset:0}.arm-overlay-hint{text-transform:uppercase;letter-spacing:.22em;color:var(--muted);font-size:.75rem}.panel-inst{grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;gap:10px;display:grid}.fx-sends{gap:8px;display:flex}.send-group{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.send-group .level-bar{height:34px}.keybar{touch-action:none;grid-template-columns:repeat(10,1fr);gap:4px;min-height:0;display:grid}.key{border:1px solid var(--steel-3);background:var(--steel-2);touch-action:none;border-radius:8px;position:relative}.key-label{text-align:center;text-transform:uppercase;letter-spacing:.05em;width:100%;color:var(--muted);pointer-events:none;font-size:.58rem;font-weight:600;position:absolute;bottom:10px;left:0}.key.is-on{border-color:var(--phosphor);background:#ffb0202e}.key.is-on .key-label{color:var(--phosphor)}.inst-controls{align-items:flex-end;gap:8px;display:flex}.note-select{flex-direction:column;flex:1;gap:4px;display:flex}.note-select-row{align-items:center;gap:8px;display:flex}.note-select .level-bar{flex:1;height:40px}.note-select .fader-value{text-align:center;min-width:24px}.inst-level-row{align-items:center;gap:10px;display:flex}.tap-pad{border:1px solid var(--steel-3);background:var(--steel-2);color:var(--silkscreen);text-transform:uppercase;letter-spacing:.2em;touch-action:none;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;display:flex}.tap-pad.is-hit{border-color:var(--phosphor);background:#ffb0201f}.tap-pad .tap-bpm{font-size:.8rem}.chip--run{min-height:auto}.panel-tape{flex-direction:column;gap:12px;display:flex}.tape-cell{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex}.tape-pad{text-transform:uppercase;letter-spacing:.22em;touch-action:none;border-radius:14px;flex:1;font-size:1.1rem;font-weight:700}.tape-pad--red{color:#f0a49b;background:linear-gradient(#38140f,#260d0a);border:1px solid #572019}.tape-pad--red.is-on{background:linear-gradient(180deg, var(--gate-red), #b3271d);color:#2a0c09;box-shadow:0 0 26px #e5483c73}.tape-pad--amber{border:1px solid var(--steel-3);background:var(--steel-2);color:var(--silkscreen)}.tape-pad--amber.is-on{border-color:var(--phosphor);color:var(--phosphor);background:#ffb02029;box-shadow:0 0 22px #ffb02040}.sub-controls{grid-template-columns:1fr 96px;gap:10px;display:grid}.gate-side{flex-direction:column;gap:6px;display:flex}.gate-side .hold,.gate-side .chip{flex:1;align-self:stretch;width:auto;height:auto}.soundboard{flex-direction:column;gap:10px;height:100%;display:flex}.pad-grid{touch-action:pan-y;overscroll-behavior:contain;flex:1;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(72px,1fr);gap:8px;min-height:0;display:grid;overflow-y:auto}.pad{border:1px solid var(--steel-3);background:var(--steel-2);color:var(--silkscreen);text-transform:uppercase;letter-spacing:.1em;touch-action:none;border-radius:12px;min-height:60px;padding:4px;font-size:.7rem;font-weight:600}.pad:disabled{color:var(--muted);opacity:.55}.pad-state{color:var(--muted);margin-left:6px}.pad.is-hit{border-color:var(--phosphor);color:var(--phosphor-hot);background:#ffb02047}.board-controls{align-items:center;gap:10px;display:flex}.board-controls .chip{flex:0 0 96px;width:96px;min-height:40px}@media (prefers-reduced-motion:reduce){.gate{transition:none}}