@property --col-left{syntax: "<length>"; inherits: true; initial-value: 240px;}@property --col-right{syntax: "<length>"; inherits: true; initial-value: 280px;}:root{--pad: 10px;--gap: 20px;--edge: 3px;--hair: 1px;--h-header: 38px;--rail: 28px;--w-left: 240px;--w-right: 280px;--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;--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)}: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);--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);--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:hover .face{color:var(--plate-text)}.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}.plate{background:var(--plate);border-radius:var(--edge);box-shadow:inset 0 1px 3px #0009;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}.plate-key{color:var(--plate-dim);flex:none;width:8ch}.plate-val{color:var(--plate-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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:hover:not(:disabled) .face{color:var(--plate-text)}.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)}.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:hover .face{color:var(--plate-text)}.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-radius:var(--edge);background:var(--seam-lit);transition:transform var(--dur) var(--ease)}.toggle[aria-pressed=true] .toggle-thumb{transform:translate(calc(var(--rail) / 2));background:var(--accent);box-shadow:0 0 8px -1px var(--accent)}.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 .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-radius:var(--edge);background:var(--chassis-inset);box-shadow:inset 0 0 0 var(--hair) var(--seam)}.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}#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-right{margin-left:auto;width:var(--w-right);display:flex;align-items:center;justify-content:space-between;gap:var(--pad);min-width:0}.header-link{background:none;border:none;padding:0;cursor:pointer;min-width:0}.header-link .face,.header .mark{color:var(--plate-dim);transition:color var(--dur) var(--ease)}.header-link:hover .face{color:var(--plate-text)}.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(6,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)}.zone-dock{flex:none;display:flex;align-items:center;gap:var(--gap);min-width:0}.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:hover .face{color:var(--plate-text)}.stage-switch-btn[aria-pressed=true] .face{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.tonic-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--hair)}.tonic-btn{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}.tonic-btn .face{color:var(--plate-dim);text-align:center;transition:color var(--dur) var(--ease)}.tonic-btn:hover .face{color:var(--plate-text)}.tonic-btn[aria-pressed=true] .face{color:var(--accent);box-shadow:inset 0 1px 3px #0009,inset 0 0 12px -4px var(--accent)}.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}.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}.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(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-slot:hover .picker-label{color:var(--plate-text)}.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)}