:root{--ground:#0e1013;--panel:#15181d;--panel-edge:#23272e;--frame:#6f6879;--accent:#c96f4a;--cool:#6f8fd6;--text:#d8dbe0;--text-dim:#8b9098;--good:#7fb069;--bad:#d05c5c;--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{background:var(--ground);height:100%;color:var(--text);font-family:var(--sans);overscroll-behavior:none;margin:0}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.app{grid-template:"bar bar""viewport panel"1fr"status status"/1fr 320px;height:100dvh;display:grid}.bar{border-bottom:1px solid var(--panel-edge);background:var(--panel);flex-wrap:wrap;grid-area:bar;align-items:center;gap:.75rem;padding:.5rem .9rem;display:flex}.bar h1{letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin:0 .5rem 0 0;font-size:.82rem;font-weight:600}.bar .spacer{flex:1}.viewport{grid-area:viewport;min-width:0;min-height:0;position:relative}#stage{touch-action:none;width:100%;height:100%;display:block}.panel{border-left:1px solid var(--panel-edge);background:var(--panel);grid-area:panel;padding:.6rem .9rem 2rem;overflow-y:auto}.status{border-top:1px solid var(--panel-edge);background:var(--panel);font-family:var(--mono);color:var(--text-dim);grid-area:status;min-height:1.9rem;padding:.4rem .9rem;font-size:.72rem}.status[data-tone=good]{color:var(--good)}.status[data-tone=bad]{color:var(--bad)}button,select,input[type=number]{font:inherit;color:var(--text);border:1px solid var(--panel-edge);background:#1c2027;border-radius:3px;padding:.28rem .55rem;font-size:.76rem}button{cursor:pointer}button:hover{border-color:var(--frame)}button:active{background:#232830}button.primary{border-color:var(--accent);color:var(--accent)}label.inline{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}input#seed{width:7ch;font-family:var(--mono)}.ctl-group{margin-bottom:1.1rem}.ctl-group.is-empty{display:none}.ctl-group h3{letter-spacing:.16em;text-transform:uppercase;color:var(--frame);border-bottom:1px solid var(--panel-edge);margin:0 0 .5rem;padding-bottom:.25rem;font-size:.66rem}.ctl-row{grid-template-columns:1fr auto;gap:.15rem .5rem;margin-bottom:.55rem;transition:opacity .12s;display:grid}.ctl-row.is-dim{opacity:.32}.ctl-label{cursor:help;font-size:.74rem}.ctl-value{color:var(--accent);font-size:.7rem}.ctl-input{grid-column:1/-1;width:100%}input[type=range]{-webkit-appearance:none;appearance:none;background:var(--panel-edge);outline-offset:3px;border-radius:2px;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:grab;border-radius:50%;width:12px;height:12px}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:grab;border:0;border-radius:50%;width:12px;height:12px}input[type=color]{background:0 0;height:22px;padding:1px}input[type=checkbox]{accent-color:var(--accent);justify-self:start}.hud{pointer-events:none;position:absolute;bottom:.9rem;left:.9rem}.readout{border:1px solid var(--panel-edge);backdrop-filter:blur(6px);background:#15181dd1;border-radius:4px;align-items:center;gap:.85rem;padding:.6rem .9rem;display:flex}.readout-dial{flex:none;width:84px;height:84px}.readout-ticks line{stroke:var(--panel-edge)}.readout-track{fill:none;stroke:#20242b;stroke-width:4px}.readout-arc{fill:none;stroke:var(--good);stroke-width:4px;stroke-linecap:round;transition:stroke-dasharray .24s,stroke .24s}.readout-arc.is-warn{stroke:var(--accent)}.readout-arc.is-bad{stroke:var(--bad)}.readout-fps{fill:var(--text);font:600 22px/1 var(--mono);text-anchor:middle}.readout-unit{fill:var(--text-dim);font:8px/1 var(--mono);letter-spacing:.18em;text-anchor:middle}.readout-table{grid-template-columns:auto auto;gap:.05rem .65rem;margin:0;font-size:.68rem;display:grid}.readout-table dt{color:var(--frame)}.readout-table dd{color:var(--text);margin:0}.ctl-mod{opacity:.42;grid-column:1/-1;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:.25rem;margin-top:.2rem;transition:opacity .14s;display:grid}.ctl-mod:hover,.ctl-mod.is-on{opacity:1}.ctl-mod.is-on{border-left:2px solid var(--cool);padding-left:.3rem}.ctl-mod select,.ctl-mod input{padding:.05rem .15rem;font-size:.62rem}.mod-channel{min-width:4.6rem}.mod-reducer{min-width:3.4rem;display:none}.ctl-mod.is-spectrum .mod-reducer{display:inline-block}.ctl-mod:not(.is-on) .mod-reducer,.ctl-mod:not(.is-on) .mod-target,.ctl-mod:not(.is-on) .mod-time{visibility:hidden}.mod-time{width:2.4rem}.mod-time::-webkit-slider-thumb{background:var(--cool);width:8px;height:8px}.mod-target::-webkit-slider-thumb{background:var(--cool)}.ctl-row.is-routed .ctl-value{color:var(--cool)}.ctl-row.is-locked{opacity:.28}.ctl-row.is-locked .ctl-input{pointer-events:none}.readout-signal{opacity:.45;flex:none;width:132px;height:60px;transition:opacity .2s}.readout.has-signal .readout-signal{opacity:1}.readout-bin{fill:var(--cool)}.readout-rule{stroke:var(--panel-edge);stroke-width:.6px}.readout-chan-track{fill:#20242b}.readout-chan{fill:var(--accent)}.readout-chan-label{fill:var(--frame);font:5px/1 var(--mono);letter-spacing:.08em}.transport{align-items:center;gap:.5rem;display:flex}.transport audio{max-width:210px;height:26px}.transport input[type=file],.bar>input[type=file]{display:none}.bar label.file,.transport label.file{color:var(--text);border:1px solid var(--panel-edge);cursor:pointer;background:#1c2027;border-radius:3px;padding:.28rem .55rem;font-size:.76rem}.bar label.file:hover,.transport label.file:hover{border-color:var(--frame)}@media (width<=900px){.app{grid-template:"bar""viewport"1fr"panel""status"/1fr}.viewport{min-height:42dvh}.panel{border-left:0;border-top:1px solid var(--panel-edge);max-height:38dvh}.bar h1{width:100%;margin-bottom:.2rem}.readout{gap:.6rem;padding:.45rem .6rem}.readout-signal{display:none}.transport audio{max-width:140px}.readout-dial{width:62px;height:62px}.readout-table{font-size:.62rem}}