:root{--bg: #0e0e0e;--surface: #171717;--border: #272727;--text: #ddd;--text-dim: #5a5a5a;--text-muted: #363636;--accent: #3b9eff;--accent-dim: #112a50;--on: #3bda7e;--on-dim: #163328;--danger: #ff6b3b;--radius: 0}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:14px;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.ctrl-header__status{font-size:9px;font-family:monospace;color:var(--text-dim);text-align:center}.ctrl-header__status.ws-connected{color:var(--on)}.ctrl-header__status.ws-error{color:var(--danger)}.relay-row{display:flex;gap:6px;align-items:center}.relay-row .sp-input{flex:1;min-width:0}.relay-row .action-btn{width:auto;flex:0 0 auto;min-height:26px;padding:3px 14px}.relay-row .action-btn.active{color:var(--danger);border-color:var(--danger)}.ctrl-main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.ctrl-nav{flex-shrink:0;display:flex;gap:1px;background:var(--surface);border-bottom:1px solid var(--border)}.ctrl-nav__tab{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;padding:9px 18px;transition:color .1s}.ctrl-nav__tab:hover,.ctrl-nav__tab.active{color:var(--text)}.ctrl-views{display:flex;flex:1;min-height:0;overflow:hidden}.ctrl-panel[data-side=video]{--stage-accent: oklch(.72 .18 200);--stage-accent-dim: oklch(.72 .18 200 / .12)}.ctrl-panel[data-side=audio]{--stage-accent: oklch(.74 .17 230);--stage-accent-dim: oklch(.74 .17 230 / .12)}.ctrl-panel[data-side=sound]{--stage-accent: oklch(.75 .18 145);--stage-accent-dim: oklch(.75 .18 145 / .12)}.ctrl-panel[data-side=visual]{--stage-accent: oklch(.7 .18 300);--stage-accent-dim: oklch(.7 .18 300 / .12)}.ctrl-panel[data-side=harmony]{--stage-accent: oklch(.78 .15 90);--stage-accent-dim: oklch(.78 .15 90 / .12)}.ctrl-panel[data-side=json]{--stage-accent: oklch(.7 .02 250);--stage-accent-dim: oklch(.7 .02 250 / .12)}.ctrl-panel{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden}.ctrl-panel:last-child{border-right:none}.ctrl-panel__hdr{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border);border-top:2px solid var(--stage-accent, var(--accent));user-select:none}.ctrl-panel__name{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--stage-accent, var(--text-dim))}.ctrl-panel__body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--border) transparent}@media (max-width: 700px){.ctrl-views{flex-direction:column;overflow-y:auto}.ctrl-panel{height:auto;border-right:none;border-bottom:1px solid var(--border)}}.sp-section{border-bottom:1px solid var(--border)}.sp-section__hdr{padding:6px 12px;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);background:var(--surface);border-bottom:1px solid var(--border)}.sp-section__body{padding:8px 12px;display:flex;flex-direction:column;gap:7px}.sp-row{display:grid;grid-template-columns:1fr auto;grid-auto-rows:auto;align-items:center;gap:3px 8px}.sp-row__lbl{grid-column:1 / 2;grid-row:1 / 2;font-size:9px;font-family:monospace;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-row>:not(.sp-row__lbl):not(output){grid-column:1 / -1;grid-row:2 / 3;width:100%}.sp-select{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:0;color:var(--text);font-size:11px;font-family:monospace;padding:3px 6px;height:26px}.sp-select:focus{outline:1px solid var(--accent);border-color:var(--accent)}.sp-input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:0;color:var(--text);font-size:11px;font-family:monospace;padding:3px 6px;height:26px}.sp-input:focus{outline:1px solid var(--accent);border-color:var(--accent)}.sp-range-wrap{display:contents}.sp-range-wrap output{grid-column:2 / 3;grid-row:1 / 2;font-size:9px;font-family:monospace;color:var(--stage-accent, var(--text));min-width:24px;text-align:right;justify-self:end}.sp-range-wrap input[type=range]{grid-column:1 / -1;grid-row:2 / 3;width:100%;min-width:0}.ctrl-cards{display:flex;flex-direction:column}.note-monitor{flex-shrink:0}.json-note{padding:10px 12px;font-size:10px;line-height:1.5;color:var(--text-muted);border-bottom:1px solid var(--border)}.json-area{flex:1;min-height:220px;width:100%;box-sizing:border-box;resize:vertical;background:var(--bg);border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:monospace;font-size:11px;line-height:1.5;padding:10px 12px;white-space:pre;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.json-area:focus{outline:1px solid var(--accent);outline-offset:-1px}.json-btns{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border)}.json-status{font-size:10px;font-family:monospace;color:var(--text-dim);margin-left:auto}.group{background:transparent;border-bottom:1px solid var(--border)}.group__header{display:flex;align-items:center;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--bg);gap:8px;cursor:pointer;user-select:none;position:sticky;top:0;z-index:1}.group__header:hover h2{filter:brightness(1.3)}.group__header h2{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--stage-accent, var(--text));flex:1}.group__chevron:after{content:"▾";font-size:10px;color:var(--text-muted);display:inline-block;transition:transform .18s ease}.group__body{overflow:hidden}.group.collapsed .group__chevron:after{transform:rotate(-90deg)}.group.collapsed .group__header{border-bottom:none}.btn-reset{font-size:9px;font-family:monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:0;padding:2px 7px;min-height:22px;cursor:pointer}.btn-reset:hover{color:var(--danger);border-color:var(--danger)}.section-body{overflow:hidden;display:flex;flex-direction:column;gap:12px}.section-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;font-size:9px;font-weight:700;letter-spacing:.22em;color:var(--accent);text-transform:uppercase;padding:14px 2px 4px;margin-bottom:12px;border-bottom:1px solid var(--border)}.section-hdr:hover{color:#fff}.section-hdr__chevron:after{content:"▾";font-size:11px;display:inline-block;transition:transform .18s ease}.collapsible-section.collapsed .section-hdr__chevron:after{transform:rotate(-90deg)}.ctrl--select{display:flex}.ctrl--select select{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:0;color:var(--stage-accent, var(--text));font-size:11px;font-family:monospace;padding:3px 8px;min-height:28px;cursor:pointer;appearance:auto}.ctrl--select select:focus{outline:1px solid var(--stage-accent, var(--accent));border-color:var(--stage-accent, var(--accent))}.row{display:grid;grid-template-columns:1fr auto;grid-auto-rows:auto;align-items:center;padding:6px 12px 8px;gap:3px 8px;position:relative}.row__label{grid-column:1 / 2;grid-row:1 / 2;font-size:10px;font-family:monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row>.ctrl--bool,.row>.ctrl--enum,.row>.ctrl--select,.row>.ctrl--text,.row>.action-btn{grid-column:1 / -1;grid-row:2 / 3;width:100%}.row>.ctrl--bool .toggle,.row>.ctrl--select select,.row>.ctrl--text input{flex:1;width:100%}.row__label[data-hint]{cursor:help}.row__label[data-hint]:after{content:attr(data-hint);position:absolute;left:12px;bottom:calc(100% + 4px);z-index:100;max-width:260px;padding:6px 8px;background:var(--bg);color:var(--text);font-family:monospace;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.4;white-space:normal;border:1px solid var(--border, #333);border-radius:3px;box-shadow:0 4px 16px #0009;pointer-events:none;opacity:0;transform:translateY(2px);transition:opacity .12s ease,transform .12s ease}.row__label[data-hint]:hover:after,.row__label[data-hint]:focus-visible:after{opacity:1;transform:translateY(0)}.ctrl--range{display:contents}.ctrl--range output{grid-column:2 / 3;grid-row:1 / 2;font-size:9px;font-family:monospace;color:var(--stage-accent, var(--text));min-width:30px;text-align:right;align-self:center;justify-self:end}.ctrl--range input[type=range]{grid-column:1 / -1;grid-row:2 / 3;width:100%;min-width:0}.ctrl--bool{display:flex}.toggle{font-size:10px;font-weight:700;font-family:monospace;letter-spacing:.1em;padding:3px 14px;border-radius:0;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);min-height:28px;min-width:56px;transition:background .1s,color .1s,border-color .1s}.toggle.on{background:var(--on-dim);border-color:var(--on);color:var(--on)}.ctrl--enum{display:flex;flex-wrap:wrap;gap:3px}.seg-btn{flex:1 1 auto;font-size:10px;font-family:monospace;letter-spacing:.06em;padding:3px 9px;border-radius:0;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);min-height:28px;transition:background .1s,color .1s,border-color .1s}.seg-btn.active{background:var(--stage-accent-dim, var(--accent-dim));border-color:var(--stage-accent, var(--accent));color:var(--stage-accent, var(--accent))}.seg-btn:hover:not(.active){border-color:var(--text-dim);color:var(--text)}.ctrl--text{display:flex}.ctrl--text input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:0;color:var(--text);font-size:11px;font-family:monospace;padding:3px 8px;min-height:28px}.ctrl--text input:focus{outline:1px solid var(--stage-accent, var(--accent));border-color:var(--stage-accent, var(--accent))}.action-btn{background:var(--bg);border:1px solid var(--border);border-radius:0;color:var(--text-dim);cursor:pointer;font-size:10px;font-family:monospace;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;min-height:28px;width:100%;text-align:center;transition:color .1s,border-color .1s}.action-btn:hover{color:var(--text);border-color:var(--text-dim)}.fill-btns{display:flex;gap:4px;margin-top:2px}.fill-btns .action-btn{flex:1;width:auto}@media (max-width: 480px){.row{grid-template-columns:72px 1fr}}.monitor{--color-ink: #e8e6e0;--color-dim: #6f6c64;--color-hair: rgba(232, 230, 224, .18);--accent-l: .65;--accent-c: .15;--accent-h: 200;--color-accent: oklch( var(--accent-l, .65) var(--accent-c, .15) var(--accent-h, 200) );--color-white: #fff;--font-mono: "IBM Plex Mono", monospace;--font-display: "Space Mono", monospace;--text-2xs: 9px;--text-xs: 9.5px;--text-sm: 11px;--text-base: 13px;--text-lg: 30px;--tracking-tight: .04em;--tracking-base: .16em;--tracking-wide: .24em;--tracking-wider: .28em;--tracking-widest: .34em;--dur-snap: .12s;--dur-short: .35s;--dur-long: .8s;--ease: ease;--ease-linear: linear;--spectrum-l: .65;--spectrum-c: .2;--spectrum-h: 0;--huebar-h: 6px;--huemark-h: 14px;--huemark-w: 2px;--huehist-h: 34px;transition:--accent-l var(--dur-snap) var(--ease-linear),--accent-c var(--dur-snap) var(--ease-linear),--accent-h var(--dur-snap) var(--ease-linear);padding:12px;border-bottom:1px solid #272727;font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--tracking-base);text-transform:uppercase;color:var(--color-ink)}.monitor .panel__label{margin-bottom:7px;color:var(--color-dim);font-size:var(--text-xs);letter-spacing:var(--tracking-widest)}.monitor .panel__value{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:var(--tracking-tight);line-height:1;color:var(--color-ink)}.monitor .panel__unit{font-size:var(--text-base);font-weight:400;color:var(--color-dim);margin-left:4px}.monitor .sig__hdr{color:var(--color-dim);font-size:var(--text-2xs);letter-spacing:var(--tracking-widest);margin-bottom:3px;margin-top:2px}.monitor .sig__sub{font-size:8px;font-family:monospace;color:var(--color-dim);opacity:.6;letter-spacing:.03em;margin-bottom:7px;line-height:1.5}.monitor .sig__divider{height:1px;background:var(--color-hair);margin:9px 0}.monitor .sig__key-row{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--color-ink);margin-bottom:5px}.monitor .sig__dot{width:5px;height:5px;border-radius:50%;background:var(--color-dim);flex-shrink:0;transition:background var(--dur-short) var(--ease),box-shadow var(--dur-short) var(--ease)}.monitor .sig__dot.is-on{background:#3bda7e;box-shadow:0 0 6px #3bda7e}.monitor .sig__note-row{display:flex;align-items:baseline;gap:5px;margin-bottom:2px}.monitor .sig__numeral{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--color-ink);min-width:3ch}.monitor .sig__sep{color:var(--color-dim);font-size:var(--text-xs)}.monitor .sig__notename{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--color-accent)}.monitor .sig__quality{font-size:var(--text-2xs);color:var(--color-dim);letter-spacing:var(--tracking-wider);min-height:1em;margin-bottom:2px}.monitor .sig__sparks{display:flex;flex-direction:column;gap:2px}.monitor .sig__sparks--labelled{gap:3px}.monitor .spark-row{display:flex;align-items:center;gap:6px}.monitor .spark-row__lbl{font-size:7px;letter-spacing:.12em;color:var(--color-dim);width:22px;flex-shrink:0}.monitor .spark{display:block;width:100%;height:18px}.monitor .spark-row .spark{flex:1;min-width:0}.monitor .sig__row{display:flex;align-items:center;gap:6px;margin-bottom:5px;height:10px}.monitor .sig__lbl{font-size:8px;letter-spacing:.14em;color:var(--color-dim);width:22px;flex-shrink:0}.monitor .meter{flex:1;height:2px;background:#e8e6e01a;position:relative;overflow:visible}.monitor .meter__fill{position:absolute;left:0;top:0;height:100%;width:0%;background:#e8e6e080;transition:width .08s linear}.monitor .meter__fill--accent{background:var(--color-accent);box-shadow:0 0 4px var(--color-accent)}.monitor .sig__val{font-family:var(--font-display);font-size:8px;letter-spacing:.02em;color:var(--color-ink);width:64px;text-align:right;flex-shrink:0;opacity:.7}.monitor .sig__val--wide{width:32px}.monitor .sig__status-lbl{font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--color-ink);opacity:.8}.monitor .sig__row--pos .meter{height:1px;background:var(--color-hair)}.monitor .pos-track{flex:1;height:1px;background:var(--color-hair);position:relative}.monitor .pos-track__marker{position:absolute;top:-4px;left:50%;width:1px;height:9px;background:#e8e6e0b3;transform:translate(-50%);transition:left .08s linear}.monitor .huebar{position:relative;width:100%;height:var(--huebar-h);margin-top:10px;border:1px solid var(--color-hair);background:linear-gradient(in oklch 90deg,oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 0)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 60)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 120)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 180)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 240)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 300)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 360)))}.monitor .huebar__marker{position:absolute;top:-4px;width:var(--huemark-w);height:var(--huemark-h);background:var(--color-white);box-shadow:0 0 6px var(--color-white);left:var(--hue-marker-pos);transition:--hue-marker-pos var(--dur-snap) var(--ease-linear)}.monitor .huehist{display:flex;align-items:flex-start;gap:1px;height:var(--huehist-h);margin-top:9px;background:linear-gradient(in oklch 90deg,oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 0)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 60)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 120)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 180)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 240)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 300)),oklch(var(--spectrum-l) var(--spectrum-c) calc(var(--spectrum-h) + 360)))}.monitor .huehist__bar{flex:1;min-height:0;background:#111}.monitor .huehist-labels{display:flex;gap:1px;margin-top:3px;margin-bottom:4px}.monitor .huehist-labels__lbl{flex:1;font-size:5px;text-align:center;color:var(--color-dim);overflow:hidden;white-space:nowrap;letter-spacing:0}.monitor .v-meta{font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);color:var(--color-dim);margin-top:6px}.monitor .v-meta b{color:var(--color-ink);font-weight:600}.monitor .chroma{display:flex;gap:4px;height:100px;padding:8px 0 4px}.monitor .chroma--flex{display:flex}.monitor .chroma__cell{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;min-width:0}.monitor .chroma__bar{width:100%;height:0%;min-height:1px;transition:height 80ms linear}.monitor .chroma__lbl{margin-top:4px;text-align:center;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;color:var(--color-dim)}.monitor .synth-pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}.monitor .synth-pill{padding:2px 8px;border:1px solid currentColor;border-radius:0;font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.05em;color:var(--color-ink);transition:opacity .1s linear;min-width:22px;text-align:center}.monitor .chroma-ring{display:block;width:100%;max-width:140px;aspect-ratio:1;margin:4px auto 8px}.monitor .note-grid{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}.monitor .note-grid__hdr{display:grid;grid-template-columns:14px repeat(12,1fr);gap:2px}.monitor .note-grid__hdr-lbl{font-size:6px;letter-spacing:0;color:var(--color-dim);text-align:center;line-height:1}.monitor .note-grid__row{display:grid;grid-template-columns:14px repeat(12,1fr);gap:2px}.monitor .note-grid__oct{font-size:6px;color:var(--color-dim);text-align:center;line-height:11px;flex-shrink:0}.monitor .note-grid__cell{height:11px;border-radius:0;background:#e8e6e0;opacity:.06;transition:opacity .08s linear}.monitor .score-bars{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.monitor .score-bar{display:flex;align-items:center;gap:6px}.monitor .score-bar__lbl{font-family:var(--font-mono);font-size:7px;letter-spacing:.08em;color:var(--color-dim);width:30px;flex-shrink:0;text-align:right;overflow:hidden;text-overflow:clip;white-space:nowrap}.monitor .score-bar--winner .score-bar__lbl{color:var(--color-ink)}.monitor .score-bar__track{flex:1;height:4px;background:#e8e6e014;position:relative;overflow:hidden}.monitor .score-bar__track--dual{height:6px}.monitor .score-bar__fill{position:absolute;left:0;top:0;height:100%;width:0%;transition:width .08s linear}.monitor .score-bar__fill--raw{top:0;height:50%;opacity:.5}.monitor .score-bar--winner .score-bar__fill{box-shadow:0 0 4px currentColor}.monitor .score-bar--sticky-zone .score-bar__fill{opacity:.6}.monitor .sticky-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--color-dim);margin-left:6px;vertical-align:middle;transition:background .2s}.monitor .sticky-dot.is-on{background:oklch(.75 .2 60);box-shadow:0 0 5px oklch(.75 .2 60)}.monitor .chord-spark-wrap{width:100%;height:28px;margin-bottom:4px}.monitor .chord-spark-wrap .spark{height:28px}input[type=range]{-webkit-appearance:none;appearance:none;height:12px;background:transparent;cursor:pointer;padding:0;margin:0}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#ffffff14;border-radius:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2px;height:10px;margin-top:-4px;background:var(--stage-accent, var(--accent));border-radius:0;box-shadow:0 0 4px var(--stage-accent, var(--accent))}input[type=range]::-moz-range-track{height:2px;background:#ffffff14;border-radius:0}input[type=range]::-moz-range-thumb{width:2px;height:10px;background:var(--stage-accent, var(--accent));border:none;border-radius:0;box-shadow:0 0 4px var(--stage-accent, var(--accent))}.vbox-grid{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.vbox-cell{display:flex;align-items:center;gap:4px;min-width:0}.vbox-cell__lbl{font-size:8px;font-family:monospace;letter-spacing:.06em;color:var(--text-dim);width:8px;flex-shrink:0}.vbox-cell__val{font-size:8px;font-family:monospace;color:var(--text-muted);width:20px;text-align:right;flex-shrink:0}.vbox-cell input[type=range]{flex:1;min-width:0}.folder-btn{flex:1;min-width:0;height:26px;padding:3px 6px;font-size:11px;letter-spacing:0;text-transform:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-btn:focus-visible{outline:1px solid var(--accent);border-color:var(--accent)}