@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(./ibm-plex-mono-400-BJoXLJYV.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(./ibm-plex-mono-500-C820gu2e.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(./ibm-plex-mono-600-DpGnXj3s.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(./inter-400-8kRkwJBP.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(./inter-400-8kRkwJBP.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(./inter-400-8kRkwJBP.woff2) format("woff2")}:root{--bg: #0a0e13;--bg-raise: #0d1219;--bg-hover: #121a24;--line: rgba(148, 166, 190, .14);--line-strong: rgba(148, 166, 190, .3);--ink: #dfe8f1;--ink-dim: #8fa0b4;--ink-faint: #5d6e82;--cyan: #4fd8ff;--cyan-dim: rgba(79, 216, 255, .55);--amber: #ffc45e;--amber-dim: rgba(255, 196, 94, .5);--green: #6ef0b4;--red: #ff7466;--mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;--sans: "Inter", system-ui, -apple-system, sans-serif;--radius: 5px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{display:flex;flex-direction:column;height:100%;min-height:100vh}button{font-family:var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}.app-header{display:flex;align-items:center;gap:18px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}.wordmark{display:flex;align-items:baseline;gap:10px;user-select:none}.wordmark .mark{font-weight:600;font-size:15px;letter-spacing:.22em}.wordmark .mark .epi{color:var(--cyan)}.wordmark .sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase}.readouts{display:flex;gap:0;margin-left:auto;align-items:stretch;flex-wrap:wrap}.readout{display:flex;flex-direction:column;gap:2px;padding:2px 14px;border-left:1px solid var(--line);min-width:86px}.readout .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}.readout .v{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}.readout .v.accent{color:var(--cyan)}.readout .v.amber{color:var(--amber)}.readout .v .unit{color:var(--ink-faint);font-size:10px}.state-chip{display:inline-flex;align-items:center;gap:7px}.state-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);transition:background .25s,box-shadow .25s}.state-dot.run{background:var(--cyan);box-shadow:0 0 8px var(--cyan-dim)}.state-dot.audio{background:var(--amber);box-shadow:0 0 8px var(--amber-dim)}.state-dot.draw{background:var(--green);box-shadow:0 0 8px #6ef0b480}.app-main{flex:1;display:grid;gap:10px;padding:10px;grid-template-columns:minmax(0,7fr) minmax(340px,4fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"machine side";min-height:0}.side-col{grid-area:side;display:grid;gap:10px;grid-template-rows:minmax(140px,1.1fr) minmax(150px,1fr) auto;min-height:0}#machineCanvas{touch-action:none;cursor:crosshair}.panel{position:relative;display:flex;flex-direction:column;background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);min-height:0;min-width:0}.panel.machine{grid-area:machine}.panel-head{display:flex;align-items:baseline;gap:10px;padding:8px 12px 6px;user-select:none}.panel-head .idx{font-family:var(--mono);font-size:10px;color:var(--ink-faint)}.panel-head .name{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}.panel-head .spacer{flex:1}.panel-head .meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}.panel-head .meta b{color:var(--ink-dim);font-weight:500}.panel-body{position:relative;flex:1;min-height:0}canvas.fill{position:absolute;inset:0;width:100%;height:100%;display:block}.panel:after{content:"";position:absolute;inset:3px;border:1px solid transparent;pointer-events:none;background:linear-gradient(var(--line-strong),var(--line-strong)) top left / 9px 1px,linear-gradient(var(--line-strong),var(--line-strong)) top left / 1px 9px,linear-gradient(var(--line-strong),var(--line-strong)) top right / 9px 1px,linear-gradient(var(--line-strong),var(--line-strong)) top right / 1px 9px,linear-gradient(var(--line-strong),var(--line-strong)) bottom left / 9px 1px,linear-gradient(var(--line-strong),var(--line-strong)) bottom left / 1px 9px,linear-gradient(var(--line-strong),var(--line-strong)) bottom right / 9px 1px,linear-gradient(var(--line-strong),var(--line-strong)) bottom right / 1px 9px;background-repeat:no-repeat;opacity:.7}.machine-toolbar{display:flex;align-items:center;gap:8px;padding:0 12px 10px;flex-wrap:wrap}.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.seg button{border:0;border-radius:0;padding:5px 12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);background:transparent;transition:background .15s,color .15s}.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:#4fd8ff1f;color:var(--cyan)}.tool-btn{padding:5px 12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:background .15s,color .15s,border-color .15s}.tool-btn:hover{background:var(--bg-hover);color:var(--ink)}.tool-btn.on{border-color:#4fd8ff80;color:var(--cyan)}.tool-btn.danger:hover{border-color:#ff746699;color:var(--red)}.toolbar-spacer{flex:1}.speed-wrap{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}.speed-wrap .lab{font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase}.speed-wrap input[type=range]{width:118px;flex:0 0 auto}input[type=range]{-webkit-appearance:none;appearance:none;height:22px;width:100%;min-width:0;background:transparent;cursor:ew-resize}input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-strong);border-radius:1px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4.5px;border-radius:2px;background:var(--ink);border:1px solid var(--bg);transition:background .15s}input[type=range]:hover::-webkit-slider-thumb{background:var(--cyan)}input[type=range]::-moz-range-track{height:2px;background:var(--line-strong);border-radius:1px}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:2px;background:var(--ink);border:1px solid var(--bg)}input[type=range]:hover::-moz-range-thumb{background:var(--cyan)}.app-footer{border-top:1px solid var(--line);padding:8px 16px 10px;display:flex;flex-direction:column;gap:7px}.presets-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.presets-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-right:4px;user-select:none}.presets-divider{width:1px;height:22px;background:var(--line)}.preset-btn{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px 5px;min-width:64px;transition:background .15s,border-color .15s}.preset-btn canvas{display:block}.preset-btn .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);transition:color .15s}.preset-btn:hover{background:var(--bg-hover);border-color:var(--line-strong)}.preset-btn:hover .lbl{color:var(--ink-dim)}.preset-btn.on{border-color:#4fd8ff8c;background:#4fd8ff14}.preset-btn.on .lbl{color:var(--cyan)}.hint-line{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;color:var(--ink-faint);user-select:none}.hint-line .key{color:var(--ink-dim);border:1px solid var(--line);border-radius:3px;padding:0 5px;margin-right:4px}.hint-line button{border:0;padding:0;font-family:var(--mono);font-size:10px;color:var(--ink-dim);text-decoration:underline dotted}.hint-line button:hover{color:var(--cyan)}.audio-controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding:2px 12px 10px;align-items:center;min-width:0}.transport{grid-row:1 / span 3;width:92px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:var(--radius);border:1px solid var(--line);transition:border-color .2s,background .2s}.transport .glyph{display:inline-flex;align-items:center;justify-content:center}.transport .tlabel{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}.transport:hover{border-color:var(--line-strong);background:var(--bg-hover)}.transport.on{border-color:#ffc45e99;background:#ffc45e14}.transport.on .tlabel{color:var(--amber)}.transport.on .glyph svg path,.transport.on .glyph svg rect{fill:var(--amber)}.slider-row{display:grid;grid-template-columns:92px minmax(0,1fr) 74px;gap:10px;align-items:center;min-width:0}.slider-row .lab{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);user-select:none}.slider-row .val{font-family:var(--mono);font-size:11px;color:var(--ink-dim);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.slider-row .val.amber{color:var(--amber)}.slider-row .val.cyan{color:var(--cyan)}.help-overlay{position:fixed;inset:0;background:#06090dd1;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:40;opacity:0;pointer-events:none;transition:opacity .18s}.help-overlay.open{opacity:1;pointer-events:auto}.help-card{width:min(520px,calc(100vw - 48px));max-height:calc(100vh - 80px);overflow:auto;background:var(--bg-raise);border:1px solid var(--line-strong);border-radius:var(--radius);padding:22px 26px}.help-card h2{margin:0 0 4px;font-size:13px;letter-spacing:.2em;text-transform:uppercase}.help-card .sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-bottom:16px}.help-card table{width:100%;border-collapse:collapse}.help-card td{padding:5px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-dim)}.help-card td:first-child{width:130px;font-family:var(--mono);font-size:11px;color:var(--ink)}.help-card .close-hint{margin-top:14px;font-family:var(--mono);font-size:10px;color:var(--ink-faint)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}@media (max-width: 1120px){#app{height:auto;min-height:100vh}.app-main{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"machine" "side"}.panel.machine .panel-body{min-height:clamp(340px,52vh,560px)}.side-col{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.panel.spectrum{grid-column:1 / -1}.panel.spectrum .panel-body{min-height:200px}.panel.recon .panel-body{min-height:220px}}@media (max-width: 720px){.app-main{padding:8px;gap:8px}.panel.machine .panel-body{min-height:clamp(300px,48vh,520px)}.side-col{grid-template-columns:minmax(0,1fr)}.panel.spectrum .panel-body{min-height:180px}.panel.recon .panel-body{min-height:210px}.readouts{width:100%}.readout{min-width:0;padding:2px 10px}.app-header{gap:10px;padding:8px 12px}.transport{width:74px;height:56px}.slider-row{grid-template-columns:76px 1fr 66px}}@media (prefers-reduced-motion: reduce){.state-dot{transition:none}}