@property --col-left{syntax: "<length>"; inherits: true; initial-value: 300px;}@property --col-right{syntax: "<length>"; inherits: true; initial-value: 300px;}:root{--pad: 10px;--gap: 20px;--edge: 3px;--hair: 1px;--h-header: 38px;--rail: 28px;--ctl: 84px;--ctl-long: 140px;--fader-long: 132px;--cap: 12px;--mini: 16px;--w-left: 300px;--w-right: 300px;--hit: 6px;--t-label: .6875rem;--t-plate: .8125rem;--t-mark: 1.0625rem;--lh-label: 1.2;--lh-plate: 1.45;--ls-label: .08em;--ls-mark: .14em;--dur: .14s;--dur-mark: 15s;--ease: cubic-bezier(.16, 1, .3, 1);--accent: var(--role-chord);--focus: var(--role-chord);--plate: oklch(.13 .014 155);--plate-text: oklch(.93 .038 155);--plate-dim: oklch(.6 .03 155);--plate-rule: oklch(.24 .018 155);--plate-good: oklch(.84 .19 152);--plate-bad: oklch(.64 .21 25);--dur-cool: 60s;--tone-l: .32;--tone-c: .12}:root,:root[data-theme=dark]{color-scheme:dark;--chassis: oklch(.21 .008 72);--chassis-raised: oklch(.26 .008 72);--chassis-inset: oklch(.16 .008 72);--seam: oklch(.34 .01 72);--seam-lit: oklch(.46 .014 72);--label: oklch(.6 .012 72);--label-strong: oklch(.8 .012 72);--role-chord: oklch(.8 .165 72);--role-char: oklch(.68 .23 340);--role-color: oklch(.78 .135 210);--role-out: oklch(.45 .01 72);--hue-12: oklch(.72 .175 12);--hue-42: oklch(.78 .17 42);--hue-72: oklch(.8 .165 72);--hue-102: oklch(.82 .17 102);--hue-132: oklch(.82 .16 132);--hue-162: oklch(.82 .145 162);--hue-192: oklch(.8 .115 192);--hue-222: oklch(.75 .13 222);--hue-252: oklch(.7 .15 252);--hue-282: oklch(.68 .18 282);--hue-312: oklch(.72 .2 312);--hue-342: oklch(.75 .17 342);--tone-strong: oklch(.5 .014 72);--tone-mid: oklch(.38 .011 72);--tone-weak: oklch(.15 .006 72);--shade: oklch(0 0 0 / .35);--shade-deep: oklch(0 0 0 / .45)}:root[data-theme=light]{color-scheme:light;--chassis: oklch(.86 .012 72);--chassis-raised: oklch(.91 .01 72);--chassis-inset: oklch(.79 .014 72);--seam: oklch(.68 .016 72);--seam-lit: oklch(.55 .02 72);--label: oklch(.4 .02 72);--label-strong: oklch(.24 .024 72);--role-chord: oklch(.62 .15 65);--role-char: oklch(.52 .21 340);--role-color: oklch(.56 .12 215);--role-out: oklch(.62 .01 72);--hue-12: oklch(.54 .19 12);--hue-42: oklch(.58 .17 42);--hue-72: oklch(.62 .15 72);--hue-102: oklch(.6 .15 102);--hue-132: oklch(.58 .15 132);--hue-162: oklch(.58 .13 162);--hue-192: oklch(.58 .1 192);--hue-222: oklch(.55 .13 222);--hue-252: oklch(.52 .17 252);--hue-282: oklch(.5 .19 282);--hue-312: oklch(.54 .2 312);--hue-342: oklch(.56 .19 342);--tone-strong: oklch(1 .004 72);--tone-mid: oklch(.96 .008 72);--tone-weak: oklch(.7 .018 72);--shade: oklch(.3 .01 72 / .18);--shade-deep: oklch(.3 .01 72 / .26)}*{box-sizing:border-box;min-width:0;min-height:0}html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--chassis);color:var(--label)}button,input,select{font:inherit;color:inherit}:focus-visible{outline:var(--hair) solid var(--role-color);outline-offset:var(--hair)}@font-face{font-family:Michroma;src:url(/fonts/michroma.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:Chakra Petch;src:url(/fonts/chakra-petch-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:block}@font-face{font-family:Chakra Petch;src:url(/fonts/chakra-petch-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:block}@font-face{font-family:Departure Mono;src:url(/fonts/departure-mono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}:root{--font-mark: "Michroma", ui-sans-serif, system-ui, sans-serif;--font-panel: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;--font-plate: "Departure Mono", ui-monospace, "Cascadia Mono", Menlo, monospace}body{font-family:var(--font-panel);font-size:var(--t-label);line-height:var(--lh-label);-webkit-font-smoothing:antialiased}.mark{font-family:var(--font-mark);font-size:var(--t-mark);letter-spacing:var(--ls-mark);text-transform:uppercase}.label{font-family:var(--font-panel);font-size:var(--t-label);font-weight:500;line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}.label-strong{color:var(--label-strong);font-weight:600}.mono{font-family:var(--font-plate);font-size:var(--t-plate);line-height:var(--lh-plate);letter-spacing:0;text-transform:none}.raised{background:var(--chassis-raised);border:var(--hair) solid var(--seam);border-radius:var(--edge);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade)}.well{background:var(--chassis-inset);border:var(--hair) solid var(--seam);border-radius:var(--edge);box-shadow:inset 0 1px 2px var(--shade-deep)}.lit{box-shadow:0 0 0 var(--hair) currentColor,0 0 10px -2px currentColor}.face{display:block;background:var(--plate);border-radius:var(--edge);box-shadow:inset 0 1px 3px #0009;color:var(--plate-text);padding:var(--pad);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.role-chord-tone{color:var(--role-chord)}.role-characteristic{color:var(--role-char)}.role-color{color:var(--role-color)}.role-outside{color:var(--role-out)}.dot{display:inline-block;width:var(--hit);height:var(--hit);border-radius:50%;background:currentColor;flex:none}.dot-lit{box-shadow:0 0 6px -1px currentColor}.stack{display:flex;flex-direction:column;gap:var(--pad);min-height:0}.row{display:flex;align-items:center;gap:var(--pad);min-width:0}.grow{flex:1 1 auto;min-width:0;min-height:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.panel{position:relative;display:flex;flex-direction:column;min-height:0;flex:none}.panel-head{display:flex;align-items:center;gap:var(--pad);padding:var(--hair);cursor:pointer;user-select:none}.chip{padding:0;border:none;background:none;cursor:pointer;min-width:0}.chip .face{text-align:center;color:var(--plate-dim);transition:color var(--dur) var(--ease)}.chip-toggle{flex:none}.chip-toggle .face{display:flex;align-items:center;justify-content:center}.glyph{width:calc(1em * var(--lh-label));height:calc(1em * var(--lh-label));display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;transform:rotate(var(--corner-rot, 0deg));transition:transform var(--dur) var(--ease)}.chip-toggle[aria-expanded=false] .glyph{--corner-rot: -90deg}.panel{transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.panel[data-focused=true]{border-color:var(--focus);box-shadow:inset 0 0 16px -6px var(--focus),0 1px 0 var(--shade)}.panel[data-focused=true] .panel-head .face{color:var(--focus)}.panel-shutter{display:grid;grid-template-rows:1fr;min-height:0;transition:grid-template-rows var(--dur) var(--ease)}.panel[data-collapsed=true] .panel-shutter{grid-template-rows:0fr}.panel-clip{overflow:hidden;min-height:0;visibility:visible;transition:visibility 0s linear 0s}.panel[data-collapsed=true] .panel-clip{visibility:hidden;transition:visibility 0s linear var(--dur)}.panel-body{padding:var(--pad);display:flex;flex-direction:column;gap:var(--pad);min-height:0;opacity:1;transition:opacity var(--dur) var(--ease)}.panel[data-bypassed=true] .panel-body{opacity:.5}.plate{background:var(--plate);border:var(--hair) solid var(--seam);border-radius:var(--edge);box-shadow:inset 0 1px 3px #0009,0 1px 0 var(--shade);padding:var(--pad);font-family:var(--font-plate);font-size:var(--t-plate);line-height:var(--lh-plate);color:var(--plate-text);min-height:0;overflow:hidden}.plate-dim{color:var(--plate-dim)}.plate-row{display:flex;gap:var(--pad);min-width:0}.tape-defs{position:absolute;width:0;height:0;overflow:hidden}.label-row{height:var(--ctl)}.label-slot{display:flex;flex:none;align-items:center;justify-content:center;min-width:0}.tape{display:block;overflow:visible;pointer-events:none}.wave{display:flex;flex-direction:column;gap:var(--pad);min-width:0}.wave-plot{height:var(--ctl);min-width:0;overflow:hidden;background:var(--plate);border-radius:var(--edge);box-shadow:inset 0 1px 3px var(--shade-deep);touch-action:none}.wave-canvas{display:block;width:100%;height:100%;color:var(--accent);cursor:col-resize}.samples{display:flex;flex-direction:column;gap:var(--pad);min-width:0;border-radius:var(--edge);outline:var(--hair) dashed transparent;outline-offset:calc(var(--pad) / 2);transition:outline-color var(--dur) var(--ease)}.samples[data-over=true]{outline-color:var(--accent)}.samples-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.samples-row{gap:calc(var(--pad) / 2)}.samples-drop{flex:none;border:0;padding:0;background:none;color:var(--plate-dim);cursor:pointer}.samples-drop:hover{color:var(--plate-bad)}.plate-stack{display:flex;flex-direction:column;justify-content:center;height:calc(var(--plate-lines, 1) * var(--t-plate) * var(--lh-plate));min-width:0}.plate-values{display:flex;align-items:center;justify-content:space-evenly;gap:var(--pad);min-width:0}.plate-values-single{flex:1 1 auto;justify-content:center}.plate-value{color:var(--plate-text);white-space:nowrap}.plate-value-large{font-size:calc(var(--plate-lines, 1) * var(--t-plate) * var(--lh-plate));line-height:1}.plate-key{color:var(--plate-dim);flex:none;width:8ch;transition:color var(--dur) var(--ease)}.plate-key[data-lit=true]{color:var(--accent)}.sync-dot{flex:none;align-self:center;width:calc(var(--t-plate) / 2);height:calc(var(--t-plate) / 2);border-radius:50%;background:var(--plate-text);animation:sync-cool var(--dur-cool) linear forwards}.sync-dot[data-down=true]{background:var(--plate-bad);box-shadow:0 0 6px -1px var(--plate-bad);animation:none}@keyframes sync-cool{0%{background:var(--plate-good);box-shadow:0 0 6px -1px var(--plate-good)}to{background:var(--plate-text);box-shadow:0 0 6px -1px transparent}}@media(prefers-reduced-motion:reduce){.sync-dot{animation-duration:var(--dur-cool)!important}}.plate-val{color:var(--plate-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ticker{position:relative;display:block;overflow:hidden;white-space:nowrap;min-width:0}.ticker-measure{position:absolute;top:0;left:0;visibility:hidden;white-space:pre;pointer-events:none}.ticker-track,.ticker-shake{display:inline-flex;white-space:nowrap}.ticker-line{display:inline-block;white-space:pre}.ticker[data-running=true]>.ticker-track,.ticker[data-running=true] .ticker-scan .ticker-track{animation:ticker-run var(--ticker-dur) linear var(--ticker-delay) infinite}.ticker-scan{position:absolute;inset:0;overflow:hidden;background:var(--plate);pointer-events:none}.ticker-scan-a{clip-path:inset(24% 0 64% 0)}.ticker-scan-b{clip-path:inset(62% 0 26% 0)}.ticker-scan-a .ticker-shake{animation:ticker-shake-a 2.7s steps(1) var(--ticker-delay) infinite}.ticker-scan-b .ticker-shake{animation:ticker-shake-b 3.9s steps(1) var(--ticker-delay) infinite}@keyframes ticker-run{0%{transform:translate(0)}to{transform:translate(calc(var(--ticker-shift) * -1))}}@keyframes ticker-shake-a{0%,90%{transform:translate(0)}91%{transform:translate(1px)}93%{transform:translate(0)}95%{transform:translate(-1px)}96%,to{transform:translate(0)}}@keyframes ticker-shake-b{0%,82%{transform:translate(0)}83%{transform:translate(-1px)}84%{transform:translate(0)}97%{transform:translate(1px)}98%,to{transform:translate(0)}}.btn{display:inline-flex;align-items:center;padding:var(--hair);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-raised);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade);cursor:pointer;min-width:0;transition:transform var(--dur) var(--ease)}.btn .face{color:var(--plate-dim);transition:color var(--dur) var(--ease)}.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 3px var(--shade-deep)}.btn:disabled{cursor:default}.btn:disabled .face{color:var(--role-out)}.btn[data-armed=true] .face{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.btn[data-size=large]{padding:calc(var(--pad) / 2) var(--pad);min-width:var(--ctl);justify-content:center}.btn[data-size=large] .face{text-align:center}.btn[data-glow=true]{transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.btn[data-glow=true] .face{color:var(--accent);text-shadow:0 0 6px currentColor}.btn[data-glow=true][data-armed=true]{border-color:var(--accent);background:var(--chassis-inset);box-shadow:inset 0 1px 3px var(--shade-deep),0 0 18px -5px var(--accent)}.btn[data-glow=true][data-armed=true] .face{box-shadow:none;text-shadow:0 0 8px currentColor,0 0 22px currentColor;animation:btn-pulse 1.6s var(--ease) infinite}@keyframes btn-pulse{0%,to{opacity:1}50%{opacity:.72}}@media(prefers-reduced-motion:reduce){.btn[data-glow=true][data-armed=true] .face{animation:none}}.toggle{display:inline-flex;align-items:center;gap:var(--pad);cursor:pointer;background:none;border:none;padding:0;min-width:0}.toggle .face{color:var(--plate-dim);transition:color var(--dur) var(--ease)}.toggle-track{width:var(--rail);height:calc(var(--rail) / 2);border-radius:var(--edge);border:var(--hair) solid var(--seam);background:var(--chassis-inset);box-shadow:inset 0 1px 2px var(--shade-deep);position:relative;flex:none}.toggle-thumb{position:absolute;inset:var(--hair) auto var(--hair) var(--hair);width:calc(var(--rail) / 2 - var(--hair) * 4);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--seam-lit);transition:transform var(--dur) var(--ease)}.toggle-track{transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.toggle[aria-pressed=true] .toggle-track{background:var(--accent);box-shadow:inset 0 1px 2px #00000059,0 0 12px -3px var(--accent)}.toggle[aria-pressed=true] .toggle-thumb{transform:translate(calc(var(--rail) / 2));background:var(--chassis-raised)}.toggle-vertical{flex-direction:column}.toggle-vertical .toggle-track{width:calc(var(--rail) / 2);height:var(--rail)}.toggle-vertical .toggle-thumb{inset:auto var(--hair) var(--hair) var(--hair);width:auto;height:calc(var(--rail) / 2 - var(--hair) * 4)}.toggle-vertical[aria-pressed=true] .toggle-thumb{transform:translateY(calc(var(--rail) / -2))}.listbox-trigger{position:relative;display:flex;align-items:center;width:100%;padding:var(--hair);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-raised);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade);cursor:pointer;text-align:left;min-width:0}.listbox-trigger[data-driving=true]{border-color:var(--focus);box-shadow:inset 0 0 16px -6px var(--focus),0 1px 0 var(--shade)}.listbox-trigger .face{flex:1 1 auto;font-family:var(--font-plate);font-size:var(--t-plate);text-transform:none;letter-spacing:0;margin-right:var(--rail)}.listbox-caret{position:absolute;top:0;right:0;width:var(--rail);height:100%;display:flex;align-items:center;justify-content:center;color:var(--seam-lit);pointer-events:none}.meter{display:flex;gap:var(--hair);height:var(--hit);align-items:stretch}.meter-seg{flex:1 1 0;border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-inset)}.meter-seg[data-on=true]{background:currentColor;box-shadow:0 0 6px -2px currentColor}.meter-row{display:grid;grid-template-columns:11ch 1fr 5ch;gap:var(--pad);align-items:center}.meter-label{font-family:var(--font-plate);font-size:var(--t-plate);color:var(--plate-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meter-value{font-family:var(--font-plate);font-size:var(--t-plate);color:var(--plate-text);text-align:right}.surface-rows{display:flex;flex-direction:column;gap:var(--pad);min-width:0}.surface-row{display:flex;align-items:flex-end;gap:var(--pad);min-width:0}.slot{display:contents}.surface-row-center{justify-content:center}.surface-row-end{justify-content:flex-end}.surface-row-between{justify-content:space-between}.surface-row-evenly{justify-content:space-evenly}.surface-row-top{align-items:flex-start}.surface-row-middle{align-items:center}.fader{position:relative;height:var(--ctl);flex:none;cursor:ns-resize;touch-action:none}.fader-small{width:var(--cap)}.fader-medium{width:var(--rail)}.fader-horizontal{cursor:ew-resize}.fader-horizontal.fader-small{width:var(--ctl);height:var(--cap)}.fader-horizontal.fader-medium{width:var(--fader-long);height:var(--rail)}.fader-track{position:absolute;left:50%;top:0;bottom:0;width:var(--hit);transform:translate(-50%);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--plate);box-shadow:inset 0 1px 3px #0009}.fader-lit{position:absolute;left:50%;bottom:0;width:var(--hit);transform:translate(-50%);border-radius:var(--edge);background:var(--accent);box-shadow:0 0 8px -2px var(--accent)}.fader-cap{position:absolute;left:50%;border-radius:var(--edge);background:var(--chassis-raised);border:var(--hair) solid var(--seam);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade)}.fader-small .fader-cap{width:var(--cap);height:var(--cap);transform:translate(-50%,50%)}.fader-medium .fader-cap{width:var(--rail);height:calc(var(--cap) * .6);transform:translate(-50%,50%)}.fader-horizontal .fader-track{inset:50% 0 auto;width:auto;height:var(--hit);transform:translateY(-50%)}.fader-horizontal .fader-lit{left:0;top:50%;bottom:auto;height:var(--hit);transform:translateY(-50%)}.fader-horizontal .fader-cap{top:50%}.fader-horizontal.fader-small .fader-cap{width:var(--cap);height:var(--cap);transform:translate(-50%,-50%)}.fader-horizontal.fader-medium .fader-cap{width:calc(var(--cap) * .6);height:var(--rail);transform:translate(-50%,-50%)}.rotary{width:var(--ctl);height:var(--ctl);flex:none;cursor:ns-resize;touch-action:none}.rotary-step{cursor:ew-resize}.rotary-face{width:100%;height:100%;display:block;overflow:visible}.rotary-track{fill:none;stroke:var(--plate);stroke-width:1;stroke-linecap:butt}.rotary-halo,.rotary-tick-halo{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:butt;opacity:.3}.rotary-lit{fill:none;stroke:var(--accent);stroke-width:1;stroke-linecap:butt}.knob-shadow{fill:#00000073}.knob-body{stroke:none}.knob-body-top{stop-color:var(--seam-lit)}.knob-body-bottom{stop-color:var(--chassis-inset)}.knob-face-top{stop-color:var(--chassis-raised)}.knob-face-bottom{stop-color:var(--chassis)}.knob-pointer{stroke:var(--label-strong);stroke-width:1.5;stroke-linecap:round}.rotary-tick{stroke:var(--seam);stroke-width:1.5;stroke-linecap:butt}.rotary-tick[data-on=true]{stroke:var(--accent)}.chip-group{display:grid;gap:var(--hair);min-width:0}.group-chip{padding:var(--hair);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-raised);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade);cursor:pointer;min-width:0}.group-chip .face{color:var(--plate-dim);text-align:center;transition:color var(--dur) var(--ease)}.group-chip[aria-pressed=true] .face{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.chip-group-mini .group-chip .face{padding:calc(var(--pad) / 2);font-size:var(--t-label);line-height:var(--lh-label);min-width:var(--mini)}.chain-strip .chain-add{background:var(--chassis-inset);box-shadow:inset 0 1px 2px var(--shade-deep)}.chain-strip .chain-add .face{color:var(--role-out)}.chain-strip .chain-drop{background:var(--chassis-inset);box-shadow:inset 0 1px 2px var(--shade-deep)}.chain-strip .chain-drop:disabled{cursor:default}.chain-strip .chain-drop:disabled .face{color:var(--role-out)}.chain-cell{display:flex;flex-direction:column;align-items:center;gap:var(--hair);min-width:0}.chain-cell .group-chip{width:100%}.chain-strip .chain-add,.chain-strip .chain-drop{align-self:start}.joystick{position:relative;width:var(--ctl-long);height:var(--rail);flex:none;min-width:0;border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--plate);box-shadow:inset 0 1px 3px #0009,0 1px 0 var(--shade);cursor:ew-resize;touch-action:none}.joystick-rail{position:absolute;left:var(--pad);right:var(--pad);top:50%;height:var(--hair);transform:translateY(-50%);background:var(--plate-rule)}.joystick-pin{position:absolute;top:50%;left:50%;width:var(--hit);height:calc(var(--rail) - var(--pad));transform:translate(-50%,-50%);border-radius:var(--edge);background:var(--accent);box-shadow:0 0 10px -2px var(--accent);transition:left var(--dur) var(--ease),top var(--dur) var(--ease)}.joystick[data-held=true] .joystick-pin{transition:none}.joystick-vertical{width:var(--rail);height:var(--ctl-long);cursor:ns-resize}.joystick-vertical .joystick-rail{left:50%;right:auto;top:var(--pad);bottom:var(--pad);width:var(--hair);height:auto;transform:translate(-50%)}.joystick-vertical .joystick-pin{width:calc(var(--rail) - var(--pad));height:var(--hit)}.keys{position:relative;display:flex;gap:var(--hair);height:calc(var(--ctl) * .64);flex:1 1 auto;min-width:0}.key{padding:0;border:var(--hair) solid var(--seam);border-radius:var(--edge);cursor:pointer;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.key-natural{flex:1 1 0;min-width:0;background:var(--plate);box-shadow:inset 0 1px 3px #0009}.key-accidental{position:absolute;top:0;height:62%;z-index:1;background:var(--plate-text);box-shadow:0 1px 0 var(--shade)}.key-natural[aria-pressed=true]{background:var(--accent);box-shadow:inset 0 0 12px -3px #0009}.key-accidental[aria-pressed=true]{background:var(--accent);box-shadow:0 0 10px -2px var(--accent)}#app[data-mode=play]{--accent: var(--hue-72);--focus-left: var(--hue-162);--focus-right: var(--hue-342);--focus-dock: var(--hue-252)}#app[data-mode=arrange]{--accent: var(--hue-192);--focus-left: var(--hue-282);--focus-right: var(--hue-102);--focus-dock: var(--hue-12)}#app[data-mode=edit]{--accent: var(--hue-312);--focus-left: var(--hue-42);--focus-right: var(--hue-222);--focus-dock: var(--hue-132)}.zone-left{--focus: var(--focus-left)}.zone-right{--focus: var(--focus-right)}.zone-dock{--focus: var(--focus-dock)}#app{height:100dvh;padding:var(--gap);gap:var(--gap);display:flex;flex-direction:column;min-width:0}.header{flex:none;min-height:var(--h-header);display:flex;align-items:center;gap:var(--pad);min-width:0}.header-logo{flex:none;min-width:0}.header-logo .plate{padding:calc(var(--pad) / 2) var(--pad);display:flex;align-items:center}.header-logo .logo{display:block;height:calc(var(--t-plate) * var(--lh-plate));width:auto;border-radius:calc(var(--edge) / 2)}.header-project{flex:none;width:var(--w-left);min-width:0}.header-project .plate{padding:calc(var(--pad) / 2) var(--pad)}.header-right{margin-left:auto;flex:none;display:flex;align-items:center;gap:var(--pad)}.header-link{background:none;border:none;padding:0;cursor:pointer;min-width:0}.header-link .face{color:var(--plate-dim);transition:color var(--dur) var(--ease)}.header-link[aria-pressed=true] .face{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.header .mark{text-shadow:0 0 6px currentColor,0 0 22px currentColor;transition:color var(--dur-mark) linear,text-shadow var(--dur-mark) linear}.main{flex:1 1 auto;min-height:0;min-width:0;display:grid;gap:var(--gap);grid-template-columns:var(--col-left) var(--col-stage) var(--col-right);--col-left: var(--w-left);--col-right: var(--w-right);--col-stage: minmax(0, 1fr);transition:--col-left var(--dur) var(--ease),--col-right var(--dur) var(--ease)}.main[data-left=closed]{--col-left: var(--rail)}.main[data-right=closed]{--col-right: var(--rail)}.zone{display:flex;flex-direction:column;gap:var(--gap);min-height:0;min-width:0}.zone-left{--w-open: var(--w-left)}.zone-right{--w-open: var(--w-right)}.zone-clip{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;visibility:visible;transition:visibility 0s linear 0s}.zone[data-closed=true] .zone-clip{visibility:hidden;transition:visibility 0s linear var(--dur)}.zone-stack{display:flex;flex-direction:column;gap:var(--gap);width:var(--w-open);height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}.zone-stack::-webkit-scrollbar{display:none}.col-head{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--hair);padding:var(--hair);flex:none;overflow:hidden}.col-head[data-closed=true]{grid-template-columns:1fr}.col-head[data-closed=true] .chip-facet{display:none}.chip[aria-pressed=true] .face{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.chip-facet:disabled{cursor:default}.chip-facet:disabled .face{background:var(--chassis-inset);box-shadow:none}.zone-dock{flex:none;display:flex;align-items:flex-end;gap:var(--gap);min-width:0}.zone-dock[data-closed=true] .chip-toggle{width:var(--rail)}.dock-shutter{flex:1 1 auto;min-width:0;display:grid;grid-template-rows:1fr;min-height:0;transition:grid-template-rows var(--dur) var(--ease)}.zone-dock[data-closed=true] .dock-shutter{grid-template-rows:0fr}.dock-clip{overflow:hidden;min-height:0;visibility:visible;transition:visibility 0s linear 0s}.zone-dock[data-closed=true] .dock-clip{visibility:hidden;transition:visibility 0s linear var(--dur)}.dock-row{display:flex;gap:var(--gap);min-width:0}.dock-row>.panel{flex:1 1 0;min-width:0}.stage-switch{display:flex;gap:var(--hair);flex:none;padding:var(--hair);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-inset);box-shadow:inset 0 1px 2px var(--shade-deep)}.stage-switch-btn{padding:0;border:none;background:none;cursor:pointer;min-width:0}.stage-switch-btn .face{color:var(--plate-dim);transition:color var(--dur) var(--ease)}.stage-switch-btn[aria-pressed=true] .face{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.stage-switch-btn:disabled{cursor:default}.stage-switch-btn:disabled .face{color:var(--role-out)}.list-rows{display:flex;flex-direction:column;min-height:0}.list-row{display:flex;align-items:center;gap:var(--pad);font-family:var(--font-plate);font-size:var(--t-plate);line-height:var(--lh-plate);color:var(--plate-text);white-space:nowrap;min-width:0}.list-row-dim{color:var(--plate-dim)}.list-row-num{margin-left:auto;color:var(--plate-dim);flex:none}.evidence-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);min-height:0}.lane-row{align-items:center}.lane-pick{flex:1 1 auto;display:flex;align-items:center;padding:calc(var(--pad) / 2) var(--pad);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-raised);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade);cursor:pointer;min-width:0}.lane-pick .face{color:var(--plate-dim);transition:color var(--dur) var(--ease)}.lane-pick[aria-pressed=true]{border-color:var(--accent)}.lane-pick[aria-pressed=true] .face{color:var(--accent)}.lane-level{flex:none;width:var(--ctl);min-width:0;accent-color:var(--accent)}.stage-frame{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0}.idle-face{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;padding:var(--pad)}.idle-mount{position:absolute;inset:var(--pad);border:var(--hair) solid var(--seam);border-radius:var(--edge);box-shadow:inset 0 1px 2px var(--shade-deep);background:var(--chassis-inset)}.idle-screw{position:absolute;width:var(--hit);height:var(--hit);border-radius:50%;background:var(--chassis);box-shadow:inset 0 1px 1px var(--shade-deep),0 0 0 var(--hair) var(--seam)}.idle-screw-tl{top:var(--pad);left:var(--pad)}.idle-screw-tr{top:var(--pad);right:var(--pad)}.idle-screw-bl{bottom:var(--pad);left:var(--pad)}.idle-screw-br{bottom:var(--pad);right:var(--pad)}.idle-plate{position:relative;z-index:1;min-width:0;max-width:48ch}.scope-face{display:flex;padding:var(--pad);color:var(--accent);background:var(--plate);border-radius:var(--edge);box-shadow:inset 0 1px 3px #0009,inset 0 0 24px -6px #000c;min-width:0;min-height:0}.scope-canvas{display:block;flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0}.board-face{display:flex;flex-direction:column;justify-content:center;gap:var(--pad);padding:var(--pad);min-width:0;min-height:0}.board-row{display:flex;justify-content:center;gap:var(--hair);height:var(--ctl);min-width:0}.board-key,.board-slot{flex:0 0 calc((100% - (var(--board-cols, 10) - 1) * var(--hair)) / var(--board-cols, 10));min-width:0}.board-key{display:flex;flex-direction:column;justify-content:space-between;padding:var(--hair);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-raised);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade);cursor:pointer;touch-action:none}.board-key[data-role=chord-tone]{background:var(--tone-strong)}.board-key[data-role=characteristic]{background:var(--tone-mid)}.board-key[data-role=outside]{background:var(--tone-weak);box-shadow:inset 0 1px 3px var(--shade-deep)}.board-bind{text-align:center;color:var(--label-strong);overflow:hidden;min-width:0}.board-key .board-cap{padding:calc(var(--pad) / 2) 0;text-align:center;background:oklch(var(--tone-l) var(--tone-c) var(--tone-h, 155));color:var(--plate-text);transition:color var(--dur) var(--ease)}.board-key[aria-pressed=true] .board-cap{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.tones-readout .key{cursor:default}.picker{position:absolute;inset:var(--pad);z-index:30;display:flex;flex-direction:column;gap:var(--gap);padding:var(--pad);border-radius:var(--edge);border:var(--hair) solid var(--seam);background:var(--chassis-inset);box-shadow:inset 0 1px 2px var(--shade-deep);min-height:0;min-width:0}.picker-rows{flex:1 1 auto;display:grid;grid-template-rows:repeat(var(--picker-rows, 5),1fr);gap:var(--pad);min-height:0}.picker-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center;min-width:0}.picker-slot{display:flex;align-items:center;gap:var(--pad);padding:0;border:none;background:none;cursor:pointer;min-width:0}.picker-slot-right{flex-direction:row-reverse}.picker-num{flex:none;font-family:var(--font-plate);font-size:var(--t-plate);color:var(--accent);transition:color var(--dur) var(--ease)}.picker-label{flex:1 1 auto;display:flex;align-items:center;gap:var(--pad);font-family:var(--font-plate);font-size:var(--t-plate);color:var(--plate-dim);min-width:0;transition:color var(--dur) var(--ease)}.picker-slot-right .picker-label{flex-direction:row-reverse}.picker-field{position:relative;flex:1 1 auto;display:flex;min-width:0}.picker-name{flex:1 1 auto;width:100%;border:none;background:var(--plate);color:var(--plate-text);caret-color:transparent;min-width:0}.picker-name::placeholder{color:var(--plate-dim)}.picker-caret{position:absolute;top:50%;font-family:var(--font-plate);font-size:var(--t-plate);width:1ch;height:calc(var(--t-plate) * var(--lh-plate));transform:translateY(-50%);background:var(--accent);pointer-events:none;animation:caret-blink 1.06s steps(1) infinite}@keyframes caret-blink{0%,49.9%{opacity:.65}50%,to{opacity:0}}.picker-slot[aria-pressed=true] .picker-label{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 14px -4px var(--accent)}.picker-slot[data-cursor=true] .picker-label{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 0 var(--hair) var(--accent),inset 0 0 18px -4px var(--accent)}.picker-slot[data-cursor=true] .picker-num{box-shadow:inset 0 1px 3px #0009,inset 0 0 0 var(--hair) var(--accent)}.picker-foot{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--pad)}.picker-page{flex:none;font-family:var(--font-plate);font-size:var(--t-plate);color:var(--plate-text)}.picker-prev .glyph{--corner-rot: 90deg}.picker-next .glyph{--corner-rot: -90deg}.picker-prev:disabled,.picker-next:disabled{cursor:default}.picker-prev:disabled .face,.picker-next:disabled .face{color:var(--role-out)}.timeline-face{display:flex;flex-direction:column;min-height:0;min-width:0}.timeline-views{flex:none;padding:var(--pad) var(--pad) 0}.roll{position:relative;display:flex;flex-direction:column;gap:var(--pad);padding:var(--pad);min-height:0;min-width:0;overflow:hidden}.roll-ruler{position:relative;flex:none;height:calc(var(--t-label) * var(--lh-label));border-bottom:var(--hair) solid var(--seam);overflow:hidden}.roll-tick{position:absolute;top:0;bottom:0;left:0;border-left:var(--hair) solid var(--seam);padding-left:calc(var(--pad) / 2)}.roll-bar{color:var(--plate-dim)}.roll-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;background:var(--chassis);border-radius:var(--edge);box-shadow:inset 0 1px 2px var(--shade-deep);touch-action:none}.roll-canvas{display:block;width:100%;height:100%;cursor:crosshair}.roll-marquee{position:absolute;display:none;border:var(--hair) solid var(--accent);background:color-mix(in oklch,var(--accent) 14%,transparent);pointer-events:none}.roll-marquee[data-live=true]{display:block}.roll-head{position:absolute;top:0;bottom:0;left:0;width:var(--hair);background:var(--accent);box-shadow:0 0 8px -1px var(--accent);pointer-events:none}.grid{position:relative;display:flex;flex-direction:column;gap:var(--pad);padding:var(--pad);min-height:0;min-width:0;overflow:hidden}.grid-bar{flex:none}.grid-rows{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--hair);min-height:0;overflow-y:auto}.grid-row{flex:none;display:flex;align-items:center;gap:var(--pad);min-width:0}.grid-name{flex:none;width:calc(var(--ctl) - var(--gap));color:var(--plate-dim)}.grid-cells{flex:1 1 auto;display:grid;gap:var(--hair);min-width:0}.grid-cell{height:var(--rail);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-inset);box-shadow:inset 0 1px 2px var(--shade-deep);cursor:pointer;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.grid-cell[data-beat=true]{border-color:var(--seam-lit)}.grid-cell[aria-pressed=true]{background:var(--accent);box-shadow:0 0 12px -3px var(--accent)}.lane{flex:none;display:flex;flex-direction:column;gap:var(--pad);min-width:0}.lane-bar{flex:none}.lane-band{position:relative;flex:none;height:var(--ctl);min-width:0;overflow:hidden;background:var(--chassis-inset);border-radius:var(--edge);box-shadow:inset 0 1px 2px var(--shade-deep);touch-action:none}.band-canvas{display:block;width:100%;height:100%;cursor:ns-resize}.timeline{position:relative;display:flex;flex-direction:column;gap:var(--pad);padding:var(--pad);min-height:0;min-width:0;overflow:hidden}.timeline-ruler{position:relative;flex:none;height:calc(var(--t-label) * var(--lh-label));border-bottom:var(--hair) solid var(--seam)}.timeline-tick{position:absolute;top:0;bottom:0;border-left:var(--hair) solid var(--seam);padding-left:calc(var(--pad) / 2)}.timeline-bar{color:var(--plate-dim)}.timeline-rows{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--hair);min-height:0;overflow-y:auto}.timeline-lane{position:relative;flex:none;height:var(--rail);background:var(--chassis-inset);border-radius:var(--edge);box-shadow:inset 0 1px 2px var(--shade-deep)}.timeline-clip{position:absolute;top:var(--hair);bottom:var(--hair);display:flex;align-items:center;padding:0 calc(var(--pad) / 2);border:var(--hair) solid var(--seam);border-radius:var(--edge);background:var(--chassis-raised);box-shadow:inset 0 1px 0 var(--seam-lit),0 1px 0 var(--shade);cursor:pointer;min-width:0;overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.timeline-clip .face{color:var(--plate-dim);transition:color var(--dur) var(--ease)}.timeline-clip[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 1px 0 var(--seam-lit),0 0 14px -5px var(--accent)}.timeline-clip[aria-pressed=true] .face{color:var(--accent)}.timeline-clip[data-quiet=true]{opacity:.45}.timeline-head{position:absolute;top:var(--pad);bottom:var(--pad);width:var(--hair);background:var(--accent);box-shadow:0 0 10px -1px var(--accent);pointer-events:none}.loading{height:100dvh;background:#555}.landing{height:100dvh;display:grid;grid-template-columns:2fr 1fr;gap:var(--pad);padding:var(--pad);background:var(--chassis);min-height:0}.landing-view{border-radius:var(--edge);border:var(--hair) solid var(--seam);min-width:0;min-height:0}.landing-gate{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:var(--pad);padding:var(--pad);border-radius:var(--edge);border:var(--hair) solid var(--seam);min-width:0;min-height:0;overflow-y:auto}.landing-mount{display:flex;justify-content:center;min-width:0}.landing-panel{display:flex;flex-direction:column;gap:var(--pad);min-width:0}.landing-note{color:var(--label);text-align:center}