:root{--bg: #07090e;--bg-panel: #0d1118;--bg-panel-2: #10151e;--bg-inset: #090c12;--bg-cell: #0b0f16;--bg-cell-hover: #131926;--border: #1b2230;--border-bright: #2a3349;--border-faint: #141a26;--text: #e6ebf4;--text-dim: #8b94a9;--text-faint: #545d72;--amber: #ffb454;--amber-dim: #b87f3a;--cyan: #45d7ec;--cyan-dim: #2d8d9b;--magenta: #ff5fa8;--magenta-dim: #b04275;--green: #5dde8d;--red: #ff5d5d;--glow-amber: 0 0 10px rgba(255, 180, 84, .45);--glow-cyan: 0 0 10px rgba(69, 215, 236, .45);--glow-magenta: 0 0 10px rgba(255, 95, 168, .45);--glow-green: 0 0 12px rgba(93, 222, 141, .5);--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--r-1: 3px;--r-2: 6px;--r-3: 10px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}input{font-family:inherit;color:inherit}::selection{background:#ffb45440}#app{height:100vh;display:flex;flex-direction:column}.workspace{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 304px;min-height:0;border-top:1px solid var(--border-faint)}.seq-area{min-width:0;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:inset 0 1px #ffffff06}.panel-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border-faint)}.panel-title{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}.panel-body{padding:12px}.transport{display:flex;align-items:center;gap:14px;padding:10px 16px;background:linear-gradient(180deg,#0e1219,#0a0d13);border-bottom:1px solid var(--border);flex-wrap:nowrap;min-height:64px}.logo{display:flex;align-items:baseline;gap:7px;margin-right:4px;user-select:none}.logo-mark{font-size:19px;font-weight:700;letter-spacing:.22em;color:var(--text)}.logo-mark .logo-dot{color:var(--amber)}.logo-sub{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}.t-group{display:flex;align-items:center;gap:10px;padding:0 12px;border-left:1px solid var(--border-faint);height:44px}.t-group:first-of-type{border-left:none}.t-spacer{flex:1}.btn-play{width:46px;height:44px;border-radius:var(--r-2);background:linear-gradient(180deg,#161c28,#0e1218);border:1px solid var(--border-bright);display:flex;align-items:center;justify-content:center;transition:box-shadow .15s ease,border-color .15s ease}.btn-play:hover{border-color:#3a455f}.btn-play svg{width:16px;height:16px;fill:var(--text-dim);transition:fill .15s ease}.btn-play.playing{border-color:var(--green);box-shadow:var(--glow-green),inset 0 0 12px #5dde8d1f}.btn-play.playing svg{fill:var(--green)}.readout{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:ns-resize;user-select:none;padding:2px 6px;border-radius:var(--r-1)}.readout:hover .readout-value{border-bottom-color:var(--amber)}.readout-value{font-family:var(--font-mono);font-size:19px;font-weight:500;color:var(--text);border-bottom:1px solid transparent;line-height:1.15;transition:border-color .12s ease}.readout-value input{width:64px;background:var(--bg-inset);border:1px solid var(--amber);border-radius:var(--r-1);font-family:var(--font-mono);font-size:16px;text-align:center;padding:1px 2px;outline:none}.readout-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}.seg{display:flex;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-2);overflow:hidden}.seg button{font-family:var(--font-mono);font-size:11px;padding:6px 11px;color:var(--text-faint);transition:color .12s,background .12s}.seg button.active{background:#1a2130;color:var(--amber)}.proj{display:flex;align-items:center;gap:8px}.proj-name{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-1);padding:6px 10px;font-size:12px;width:150px;outline:none;transition:border-color .12s}.proj-name:focus{border-color:var(--border-bright)}.btn-ghost{padding:7px 11px;border:1px solid var(--border);border-radius:var(--r-1);background:var(--bg-panel-2);color:var(--text-dim);font-size:11.5px;font-weight:500;transition:color .12s,border-color .12s;white-space:nowrap}.btn-ghost:hover{color:var(--text);border-color:var(--border-bright)}.btn-ghost:disabled{opacity:.55;cursor:default}.btn-ghost.rendering{color:var(--amber);border-color:var(--amber-dim);animation:pulse-opacity 1.1s ease-in-out infinite}@keyframes pulse-opacity{0%,to{opacity:1}50%{opacity:.45}}.menu-anchor{position:relative}.menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--bg-panel-2);border:1px solid var(--border-bright);border-radius:var(--r-2);box-shadow:0 12px 32px #0000008c;padding:5px;z-index:60}.menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:7px 9px;border-radius:var(--r-1);font-size:12px;color:var(--text-dim)}.menu-item:hover{background:#1a2130;color:var(--text)}.menu-item .mi-del{font-size:10px;color:var(--text-faint);padding:2px 5px;border-radius:3px}.menu-item .mi-del:hover{color:var(--red);background:#ff5d5d1a}.menu-sep{height:1px;background:var(--border-faint);margin:5px 3px}.menu-empty{padding:8px 9px;font-size:11.5px;color:var(--text-faint);font-style:italic}.menu-confirm{display:flex;align-items:center;gap:8px;padding:7px 9px;font-size:11.5px;color:var(--amber)}.menu-confirm button{padding:3px 9px;border:1px solid var(--border-bright);border-radius:var(--r-1);font-size:11px;color:var(--text-dim)}.menu-confirm button.danger{color:var(--amber);border-color:var(--amber-dim)}.spectrum-wrap{display:flex;align-items:center;height:44px;padding:0 2px}canvas.spectrum{width:168px;height:40px;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-1)}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;user-select:none;width:48px}.knob{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#1d2433,#11151e 70%);border:1px solid var(--border-bright);position:relative;cursor:ns-resize;box-shadow:inset 0 2px 4px #00000080,0 1px #ffffff0a}.knob-dial{position:absolute;inset:0}.knob-dial:after{content:"";position:absolute;left:50%;top:2.5px;width:2px;height:9px;margin-left:-1px;border-radius:1px;background:var(--knob-accent, var(--text-dim));box-shadow:0 0 5px var(--knob-accent, transparent)}.knob-label{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}.knob-value{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);white-space:nowrap}.fader-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;user-select:none}.fader{position:relative;width:28px;height:104px;cursor:ns-resize}.fader-track{position:absolute;left:50%;top:4px;bottom:4px;width:5px;margin-left:-2.5px;border-radius:3px;background:var(--bg-inset);border:1px solid var(--border)}.fader-fill{position:absolute;left:50%;bottom:4px;width:5px;margin-left:-2.5px;border-radius:3px;background:linear-gradient(180deg,var(--fader-accent, var(--text-dim)),transparent);opacity:.55;pointer-events:none}.fader-cap{position:absolute;left:50%;width:24px;height:13px;margin-left:-12px;border-radius:3px;background:linear-gradient(180deg,#2a3247,#161b27 45%,#1d2433 55%,#10141d);border:1px solid var(--border-bright);box-shadow:0 2px 5px #0009;pointer-events:none}.fader-cap:after{content:"";position:absolute;left:4px;right:4px;top:5.5px;height:1px;background:var(--fader-accent, var(--text-dim))}.led-btn{font-size:9px;font-weight:700;letter-spacing:.08em;padding:4px 0;width:26px;text-align:center;border-radius:var(--r-1);border:1px solid var(--border);background:var(--bg-inset);color:var(--text-faint);transition:all .12s ease}.led-btn:hover{border-color:var(--border-bright);color:var(--text-dim)}.led-btn.on-mute{background:#ff5d5d29;border-color:var(--red);color:var(--red);box-shadow:0 0 8px #ff5d5d59}.led-btn.on-solo{background:#ffb45429;border-color:var(--amber);color:var(--amber);box-shadow:var(--glow-amber)}.overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#05070ad1;backdrop-filter:blur(3px);transition:opacity .3s ease}.overlay.hiding{opacity:0;pointer-events:none}.overlay-logo{font-size:38px;font-weight:700;letter-spacing:.3em;color:var(--text);text-shadow:0 0 24px rgba(255,180,84,.35)}.overlay-logo .logo-dot{color:var(--amber)}.overlay-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim)}.overlay-btn{display:flex;align-items:center;gap:12px;padding:14px 30px;border-radius:var(--r-3);border:1px solid var(--amber-dim);background:linear-gradient(180deg,#1a1610,#12100b);color:var(--amber);font-size:14px;font-weight:600;letter-spacing:.06em;box-shadow:var(--glow-amber);transition:transform .12s ease,box-shadow .12s ease}.overlay-btn:hover{transform:scale(1.04);box-shadow:0 0 22px #ffb45499}.overlay-btn svg{width:15px;height:15px;fill:var(--amber)}.overlay-hint{font-size:11px;color:var(--text-faint)}.grid-panel .panel-body{padding:10px 12px 12px}.seq-rows{display:flex;flex-direction:column;gap:5px}.lane{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:center}.lane-label{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;padding:4px 6px;border-radius:var(--r-1);border-left:2px solid transparent;transition:background .12s,border-color .12s}.lane-label:hover{background:var(--bg-cell-hover)}.lane-label.selected{border-left-color:var(--lane-accent, var(--amber));background:var(--bg-panel-2);color:var(--text)}.lane-dot{width:6px;height:6px;border-radius:50%;background:var(--lane-accent, var(--amber));box-shadow:0 0 5px var(--lane-accent, var(--amber));flex-shrink:0}.cells{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}.cell{position:relative;height:30px;border-radius:var(--r-1);background:var(--bg-cell);border:1px solid var(--border-faint);cursor:pointer;transition:background .08s ease,border-color .08s ease}.cell:hover{background:var(--bg-cell-hover);border-color:var(--border-bright)}.cell.beat-start{border-left-color:var(--border-bright)}.cell.on{background:color-mix(in srgb,var(--lane-accent, var(--amber)) calc(var(--vel, 1) * 78%),var(--bg-cell));border-color:var(--lane-accent, var(--amber));box-shadow:0 0 calc(var(--vel, 1) * 9px) color-mix(in srgb,var(--lane-accent, var(--amber)) 55%,transparent)}.cell.playhead{border-color:#fff4d6d9;box-shadow:inset 0 0 0 1px #fff4d680}.cell.on.playhead{background:color-mix(in srgb,var(--lane-accent, var(--amber)) 96%,white);box-shadow:0 0 14px var(--lane-accent, var(--amber))}.ruler{display:grid;grid-template-columns:86px 1fr;gap:10px;margin-bottom:7px}.ruler-cells{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}.ruler-tick{font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);text-align:center;padding:1px 0 3px;border-radius:2px;user-select:none}.ruler-tick.beat{color:var(--text-dim)}.ruler-tick.playhead{color:#fff3d8;background:#ffdca01f;box-shadow:0 0 8px #ffd28c40}.pitch-wrap{display:grid;grid-template-columns:86px 1fr;gap:10px}.pitch-labels{display:flex;flex-direction:column;gap:2px}.prow-label{height:18px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);user-select:none}.prow-label.scale-root{color:var(--track-accent, var(--cyan))}.pitch-rows{display:flex;flex-direction:column;gap:2px}.prow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}.prow.scale-root .pcell{background:color-mix(in srgb,var(--track-accent, var(--cyan)) 5%,var(--bg-cell))}.prow.in-scale .pcell{background:color-mix(in srgb,var(--track-accent, var(--cyan)) 2%,var(--bg-cell))}.pcell{position:relative;height:18px;border-radius:2px;background:var(--bg-cell);border:1px solid var(--border-faint);cursor:pointer;transition:background .08s ease}.pcell:hover{background:var(--bg-cell-hover);border-color:var(--border-bright)}.pcell.beat-start{border-left-color:var(--border-bright)}.pcell.on{background:color-mix(in srgb,var(--track-accent, var(--cyan)) calc(var(--vel, 1) * 82%),var(--bg-cell));border-color:var(--track-accent, var(--cyan));box-shadow:0 0 calc(var(--vel, 1) * 7px) color-mix(in srgb,var(--track-accent, var(--cyan)) 50%,transparent);z-index:1}.pcell.tail{background:color-mix(in srgb,var(--track-accent, var(--cyan)) 28%,var(--bg-cell));border-color:color-mix(in srgb,var(--track-accent, var(--cyan)) 45%,var(--border-faint))}.pcell.playhead{border-color:#fff4d6b3}.pcell.on.playhead{background:color-mix(in srgb,var(--track-accent, var(--cyan)) 96%,white)}.tabs{display:flex;gap:4px}.tab{padding:5px 13px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);border:1px solid transparent;border-radius:var(--r-1);opacity:.65;transition:all .12s}.tab:hover{color:var(--text-dim);opacity:1}.tab.active{color:var(--tab-accent, var(--cyan));border-color:color-mix(in srgb,var(--tab-accent, var(--cyan)) 45%,transparent);background:color-mix(in srgb,var(--tab-accent, var(--cyan)) 8%,transparent);opacity:1}.minikeys{display:flex;align-items:center;gap:10px;padding:8px 12px}.minikeys-octave{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);white-space:nowrap}.mk-keys{position:relative;display:flex;gap:2px;flex:1;max-width:460px;height:42px}.mk-white{flex:1;position:relative;background:linear-gradient(180deg,#1c2231,#141926);border:1px solid var(--border-bright);border-radius:0 0 3px 3px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);user-select:none}.mk-black{position:absolute;top:0;width:7%;height:56%;background:#05070b;border:1px solid var(--border-bright);border-radius:0 0 2px 2px;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;font-family:var(--font-mono);font-size:7.5px;color:var(--text-faint);user-select:none}.mk-white.held,.mk-black.held{background:var(--mk-accent, var(--cyan));color:#06121a;border-color:var(--mk-accent, var(--cyan));box-shadow:0 0 10px var(--mk-accent, var(--cyan))}.minikeys-hint{font-size:9.5px;color:var(--text-faint);white-space:nowrap}.fx-panel{border-left:1px solid var(--border);background:var(--bg-panel);overflow-y:auto;display:flex;flex-direction:column}.fx-track-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--border-faint);position:sticky;top:0;background:var(--bg-panel);z-index:5}.fx-track-dot{width:8px;height:8px;border-radius:50%;background:var(--fx-accent, var(--amber));box-shadow:0 0 7px var(--fx-accent, var(--amber))}.fx-track-name{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.fx-track-kind{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-left:auto}.fx-section{padding:11px 14px 13px;border-bottom:1px solid var(--border-faint)}.fx-section-title{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:9px;display:flex;align-items:center;gap:8px}.fx-knobs{display:flex;flex-wrap:wrap;gap:8px 4px;justify-content:flex-start}.fxslot{border:1px solid var(--border-faint);border-radius:var(--r-2);background:var(--bg-inset);margin-bottom:8px;overflow:hidden}.fxslot-head{display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:pointer}.fxslot-name{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}.fxslot.enabled .fxslot-name{color:var(--text)}.fx-led{width:8px;height:8px;border-radius:50%;background:#1d2433;border:1px solid var(--border-bright);transition:all .15s;flex-shrink:0}.fxslot.enabled .fx-led{background:var(--fx-accent, var(--amber));border-color:var(--fx-accent, var(--amber));box-shadow:0 0 7px var(--fx-accent, var(--amber))}.fxslot-body{display:flex;flex-wrap:wrap;gap:6px 2px;padding:2px 7px 9px}.fxslot:not(.enabled) .fxslot-body{opacity:.45}.sel{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-1);color:var(--text-dim);font-family:var(--font-mono);font-size:10.5px;padding:4px 6px;outline:none;cursor:pointer}.sel:hover{border-color:var(--border-bright);color:var(--text)}.mixer{display:flex;align-items:stretch;gap:2px;padding:10px 16px 12px;background:linear-gradient(180deg,#0b0e15,#090c11);border-top:1px solid var(--border);overflow-x:auto}.mixer-strip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 9px 7px;border-radius:var(--r-2);border:1px solid transparent;min-width:64px;cursor:pointer;transition:background .12s,border-color .12s,opacity .15s}.mixer-strip:hover{background:var(--bg-panel)}.mixer-strip.selected{border-color:var(--strip-accent, var(--amber));background:var(--bg-panel)}.mixer-strip.dimmed{opacity:.38}.strip-label{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:5px;user-select:none}.strip-btns{display:flex;gap:4px}.strip-db{font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint)}.mixer-divider{width:1px;background:var(--border-faint);margin:6px 8px;flex-shrink:0}.viewport-note{display:none;position:fixed;bottom:12px;left:50%;transform:translate(-50%);background:var(--bg-panel-2);border:1px solid var(--border-bright);border-radius:var(--r-2);padding:8px 14px;font-size:11px;color:var(--text-dim);z-index:80;gap:10px;align-items:center}.viewport-note button{color:var(--amber);font-size:11px}@media(max-width:1279px){.workspace{grid-template-columns:minmax(0,1fr)}.fx-panel{border-left:none;border-top:1px solid var(--border);max-height:300px}.workspace{display:flex;flex-direction:column;overflow-y:auto}.seq-area{overflow-y:visible}.spectrum-wrap{display:none}}@media(max-width:1023px){.viewport-note.visible{display:flex}.cell{height:24px}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#1d2433;border-radius:5px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#2a3349}