:root{--font-ui:-apple-system, "Segoe UI", Inter, Roboto, sans-serif;--font-mono:ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;--radius-sm:.3rem;--radius-md:.55rem;--radius-lg:.9rem;--space-1:.4rem;--space-2:.7rem;--space-3:1rem;--space-4:1.5rem;color-scheme:dark;--bg:#14171c;--bg-elevated:#191d24;--surface:#1d222b;--surface-2:#262c37;--border:#333b48;--border-strong:#454f60;--text:#edeff2;--text-dim:#8b93a4;--text-faint:#5c6577;--accent:#e0973f;--accent-strong:#f2ac57;--accent-soft:#e0973f29;--accent-contrast:#1a1305;--signal:#3ddc84;--signal-dim:#2a9d63;--danger:#ef5875;--focus-ring:#6fb4ff;--shadow:0 8px 24px #00000059;--canvas-bg:#171b22;--canvas-grid:#2a3140;--canvas-grid-text:#6b7484;--canvas-clip:#131720;--canvas-clip-selected:#232a36;--canvas-clip-border:#3a4252;--canvas-waveform:#3ddc84;--canvas-waveform-selected:#57e89c;--canvas-playhead:#ef5875;--canvas-envelope:#e0973f}[data-theme=light]{color-scheme:light;--bg:#f1f2f5;--bg-elevated:#f8f8fa;--surface:#fff;--surface-2:#eef0f4;--border:#d7dbe3;--border-strong:#b9bfcb;--text:#1a1d24;--text-dim:#576074;--text-faint:#8991a3;--accent:#b96f19;--accent-strong:#96590f;--accent-soft:#b96f191f;--accent-contrast:#fffaf2;--signal:#1b8f52;--signal-dim:#15703f;--danger:#c72e4f;--focus-ring:#1c6fd9;--shadow:0 8px 24px #1e222c1f;--canvas-bg:#fff;--canvas-grid:#e4e7ed;--canvas-grid-text:#8890a0;--canvas-clip:#f4f5f8;--canvas-clip-selected:#eaf0fb;--canvas-clip-border:#c7cdda;--canvas-waveform:#1b8f52;--canvas-waveform-selected:#147a44;--canvas-playhead:#c72e4f;--canvas-envelope:#b96f19}*{box-sizing:border-box;margin:0;padding:0}@media (prefers-reduced-motion:no-preference){#status,button,.theme-toggle__thumb{transition:background-color .15s,border-color .15s,color .15s,transform .1s}}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}#app{max-width:1240px;padding:var(--space-3) var(--space-3) var(--space-4);margin:0 auto}header{margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.brand{align-items:center;gap:.6rem;display:flex}.brand-mark{border-radius:var(--radius-sm);flex-shrink:0;width:1.75rem;height:1.75rem;display:block}h1{letter-spacing:-.01em;color:var(--text);font-size:1.15rem;font-weight:650}h1 .brand-sub{color:var(--text-faint);letter-spacing:.04em;text-transform:uppercase;font-size:.7rem;font-weight:500;display:block}.controls,.toolbar{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.toolbar{margin-bottom:var(--space-2);padding:var(--space-1) 0}.toolbar-actions[hidden]{display:none!important}#edit-menu-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}button{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;font-size:.85rem;font-family:var(--font-ui);padding:.45rem .85rem;font-weight:500}button:hover:not(:disabled){background:var(--border);border-color:var(--border-strong)}button:disabled{opacity:.4;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}#play-btn{color:var(--signal);border-color:var(--signal-dim)}#play-btn.active{background:#3ddc8424}input[type=range]{vertical-align:middle;width:100px;accent-color:var(--accent)}input[type=number]{background:var(--surface-2);width:64px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-family:var(--font-mono);padding:.3rem .4rem}#time-display{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-dim);text-align:right;min-width:84px;font-size:.9rem}.theme-toggle{background:var(--surface-2);border:1px solid var(--border);cursor:pointer;color:var(--text-dim);border-radius:999px;align-items:center;gap:.4rem;padding:.2rem;font-size:.75rem;display:inline-flex}.theme-toggle__track{background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;width:2.1rem;height:1.15rem;position:relative;inset:0}.theme-toggle__thumb{background:var(--accent);width:.95rem;height:.95rem;box-shadow:0 0 0 2px var(--accent-soft);border-radius:50%;position:absolute;top:1px;left:1px}[data-theme=light] .theme-toggle__thumb{transform:translate(.95rem)}.theme-toggle span.label{padding-right:.35rem;font-weight:500}.status{min-height:1.25rem;margin:0 0 var(--space-2);color:var(--text-faint);font-size:.8rem;line-height:1.4}.status:empty{display:none}.timeline-row{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--space-2);background:var(--canvas-bg);box-shadow:var(--shadow);align-items:stretch;min-height:220px;display:flex;overflow:hidden}.track-headers{border-right:1px solid var(--border);background:var(--surface);flex-shrink:0;width:148px;overflow:hidden}.track-header{border-bottom:1px solid var(--border);box-sizing:border-box;flex-direction:column;justify-content:center;gap:.25rem;padding:.35rem .5rem;display:flex}.track-header.armed{background:#ef587514}.track-header__name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;font-weight:600;overflow:hidden}.track-header__btns{gap:.25rem;display:flex}.track-chip{min-width:1.5rem;padding:.15rem .4rem;font-size:.65rem;font-weight:700}.track-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}.track-chip.on.solo{border-color:var(--signal);color:var(--signal);background:#3ddc8429}.track-chip.on.arm,.track-chip--danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:#ef58752e}.track-header.drag-over,.add-track-btn.drag-over{outline:2px solid var(--signal);outline-offset:-2px;background:#3ddc841f}.track-header--placeholder{color:var(--text-faint);border-bottom:1px solid var(--border);justify-content:center;align-items:center;font-size:.72rem;display:flex}.add-track-btn{box-sizing:border-box;border:none;border-top:1px dashed var(--border-strong);background:var(--surface-2);width:100%;color:var(--text-dim);cursor:pointer;border-radius:0;justify-content:center;align-items:center;margin:0;font-size:.75rem;font-weight:600;display:flex}.add-track-btn:hover{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent)}.timeline-scroll{flex:1;min-width:0;position:relative;overflow:auto hidden}.timeline-spacer{min-height:100px;position:relative}.timeline-viewport{width:100%;height:100%;position:sticky;top:0;left:0}.timeline-canvas{cursor:crosshair;width:100%;display:block}#record-btn.active,#record-btn.on{border-color:var(--danger);color:var(--danger);background:#ef58752e}.ctx-menu{z-index:1000;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);min-width:200px;box-shadow:var(--shadow);flex-direction:column;gap:.1rem;padding:.3rem;display:flex;position:fixed}.ctx-menu[hidden]{display:none!important}.ctx-menu__item{text-align:left;border-radius:var(--radius-sm);width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;gap:1.5rem;padding:.4rem .55rem;font-size:.82rem;font-weight:500;display:flex}.ctx-menu__item:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-strong)}.ctx-menu__item:disabled{opacity:.4;cursor:not-allowed}.ctx-menu__shortcut{font-family:var(--font-mono);color:var(--text-faint);font-size:.7rem}.ctx-menu__sep{background:var(--border);height:1px;margin:.25rem .35rem}.export-wrap{position:relative}.export-popover{z-index:900;width:min(280px,100vw - 2rem);padding:var(--space-2);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow);flex-direction:column;gap:.55rem;display:flex;position:absolute;top:calc(100% + .4rem);right:0}.export-popover[hidden]{display:none!important}.export-popover__row{grid-template-columns:4.2rem 1fr;align-items:center;gap:.5rem;display:grid}.export-popover__row label{color:var(--text-dim);font-size:.75rem}.export-popover select,.export-popover input[type=text]{background:var(--surface-2);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-family:var(--font-ui);padding:.35rem .45rem}.export-popover__go{background:var(--accent-soft);border-color:var(--accent);width:100%;color:var(--accent-strong);margin-top:.15rem;font-weight:600}.app-hint{margin-top:var(--space-2)}.hint{color:var(--text-faint);font-size:.75rem;line-height:1.5}label{color:var(--text-dim);align-items:center;gap:.4rem;font-size:.8rem;display:inline-flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=640px){#app{padding:var(--space-2)}header{flex-direction:column;align-items:stretch}.controls,.toolbar{gap:var(--space-1)}input[type=range]{width:76px}.export-popover{left:0;right:auto}}