:root{--cream: #e7dec9;--cream-2: #ddd2b8;--ivory: #f2ecdc;--panel-line: #c3b693;--mil-grey: #41463f;--mil-grey-2: #2c302b;--mil-grey-3: #20231f;--steel: #8b8f86;--steel-light: #c8ccc2;--accent: #d8421f;--accent-2: #e8852a;--accent-3: #2f9e8f;--accent-warn: #e0b020;--ink: #1d1c18;--ink-soft: #4a463c;--ink-on-dark: #ece6d6;--strip-1: var(--accent);--strip-2: var(--accent-2);--strip-3: var(--accent-warn);--strip-4: var(--accent-3);--font-display: "Arial Narrow", "Oswald", "Roboto Condensed", sans-serif;--font-legend: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;--fs-title: .82rem;--fs-label: .62rem;--fs-value: .66rem;--fs-section: .72rem;--tracking-stencil: .14em;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--radius: 3px;--panel-bg: linear-gradient(180deg, var(--ivory), var(--cream-2));--panel-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 6px rgba(0, 0, 0, .12) inset, 0 2px 4px rgba(0, 0, 0, .28);--bezel-shadow: 0 1px 2px rgba(0, 0, 0, .5);--knob-face: radial-gradient(circle at 35% 30%, #5a5f57, #2a2d28 70%);--knob-rim: #15170f;--knob-indicator: var(--ivory);--knob-track: #b7ac8c;--knob-track-active: var(--accent)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(circle at 50% -10%,#3a3f38,#1a1c18 70%) fixed,var(--mil-grey-3);color:var(--ink);font-family:var(--font-legend);-webkit-font-smoothing:antialiased}#app{max-width:1280px;margin:0 auto;padding:var(--sp-3)}#topbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);background:linear-gradient(180deg,var(--mil-grey),var(--mil-grey-2));border:1px solid #000;border-radius:var(--radius);box-shadow:var(--bezel-shadow)}#topbar h1{font-family:var(--font-display);letter-spacing:var(--tracking-stencil);text-transform:uppercase;font-size:1.1rem;color:var(--ink-on-dark);margin:0}#preset-bar{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}#preset-status{font-size:var(--fs-value);color:var(--accent-2);min-width:8ch}#panic-btn{background:linear-gradient(180deg,var(--accent),#7a1f0e)}#topbar h1:before{content:"";display:inline-block;width:10px;height:18px;margin-right:8px;vertical-align:-3px;background:var(--accent);box-shadow:14px 0 0 var(--accent-2),28px 0 0 var(--accent-warn)}#start-overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);background:#0a0c09db;backdrop-filter:blur(3px)}#start-overlay[hidden]{display:none}#start-audio{font-family:var(--font-display);letter-spacing:var(--tracking-stencil);text-transform:uppercase;font-size:1.1rem;color:var(--ink-on-dark);background:linear-gradient(180deg,var(--accent-2),var(--accent));border:2px solid #000;border-radius:var(--radius);padding:16px 40px;cursor:pointer;box-shadow:0 4px #000}#start-audio:active{transform:translateY(2px);box-shadow:0 2px #000}#start-hint,.fatal{color:var(--steel-light);font-size:.8rem}.fatal{max-width:30ch;text-align:center}#synth-root{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-3);align-items:start}.panel{display:block;background:var(--panel-bg);border:1px solid var(--panel-line);border-radius:var(--radius);box-shadow:var(--panel-shadow);overflow:hidden}.panel-header{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);background:linear-gradient(180deg,var(--mil-grey),var(--mil-grey-2));border-bottom:2px solid #000}.panel-strip{width:26px;height:8px;border-radius:1px}.panel-strip[data-accent="1"]{background:var(--strip-1)}.panel-strip[data-accent="2"]{background:var(--strip-2)}.panel-strip[data-accent="3"]{background:var(--strip-4)}.panel-strip[data-accent="4"]{background:var(--strip-3)}.panel-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-stencil);font-size:var(--fs-section);color:var(--ink-on-dark)}.panel-body{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3)}.knob{display:inline-flex;flex-direction:column;align-items:center;width:56px;cursor:ns-resize;outline:none;user-select:none;touch-action:none}.knob:focus-visible{outline:2px solid var(--accent-3);outline-offset:2px;border-radius:var(--radius)}.knob-svg{width:52px;height:52px}.knob-track-bg{stroke:var(--knob-track);stroke-width:4}.knob-track-active{stroke:var(--knob-track-active);stroke-width:4}.knob-cap{fill:var(--knob-face);stroke:var(--knob-rim);stroke-width:1.5}.knob-indicator{stroke:var(--knob-indicator);stroke-width:2.5;stroke-linecap:round}.knob-label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-top:2px;text-align:center}.knob-readout{font-size:var(--fs-value);color:var(--ink);font-variant-numeric:tabular-nums}.slider{display:inline-flex;flex-direction:column;align-items:center;width:44px;outline:none;user-select:none;touch-action:none}.slider:focus-visible{outline:2px solid var(--accent-3);outline-offset:2px;border-radius:var(--radius)}.slider-track{position:relative;width:10px;height:90px;background:var(--mil-grey-3);border:1px solid #000;border-radius:2px;cursor:ns-resize}.slider-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:0 0 2px 2px}.slider-handle{position:absolute;left:-4px;right:-4px;height:8px;margin-bottom:-4px;background:linear-gradient(180deg,var(--steel-light),var(--steel));border:1px solid #000;border-radius:2px}.slider-label{font-size:var(--fs-label);text-transform:uppercase;color:var(--ink-soft);margin-top:4px}.slider-readout{font-size:var(--fs-value);color:var(--ink);font-variant-numeric:tabular-nums}.ctl{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}.ctl-label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}.ctl select,.ctl button{font-family:var(--font-legend);font-size:var(--fs-value);color:var(--ink-on-dark);background:linear-gradient(180deg,var(--mil-grey),var(--mil-grey-2));border:1px solid #000;border-radius:2px;padding:3px 6px}.ctl select{min-width:96px}.scope{width:100%;height:64px;background:#0c0f0b;border:1px solid #000;border-radius:2px;display:block}.transport{display:flex;gap:var(--sp-2);align-items:center;width:100%;margin-bottom:var(--sp-2)}.btn{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-value);color:var(--ink-on-dark);background:linear-gradient(180deg,var(--mil-grey),var(--mil-grey-2));border:1px solid #000;border-radius:2px;padding:5px 12px;cursor:pointer}.btn[data-active=true]{background:linear-gradient(180deg,var(--accent-2),var(--accent))}.seq-row{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--sp-1);width:100%}.step{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;background:var(--cream);border:1px solid var(--panel-line);border-radius:2px}.step[data-current=true]{box-shadow:0 0 0 2px var(--accent-3)}.step-toggle{width:100%;height:16px;border:1px solid #000;border-radius:2px;background:var(--mil-grey-3);cursor:pointer}.step-toggle[data-on=true]{background:linear-gradient(180deg,var(--accent-2),var(--accent))}.step input[type=range]{width:100%;accent-color:var(--accent)}.step-num{font-size:var(--fs-label);color:var(--ink-soft);font-variant-numeric:tabular-nums}#keyboard-panel{grid-column:1 / -1}.keyboard{position:relative;display:flex;flex:1 1 100%;width:100%;height:120px;user-select:none;touch-action:none}.kbd-info{flex:1 1 100%}.key-white{position:relative;flex:1;background:linear-gradient(180deg,#f6f2e6,#e3dac4);border:1px solid #000;border-radius:0 0 3px 3px;cursor:pointer}.key-white[data-down=true]{background:linear-gradient(180deg,var(--accent-2),var(--accent))}.key-black{position:absolute;top:0;width:60%;height:62%;background:linear-gradient(180deg,#2a2d28,#111);border:1px solid #000;border-radius:0 0 3px 3px;transform:translate(-50%);cursor:pointer;z-index:2}.key-black[data-down=true]{background:linear-gradient(180deg,var(--accent),#7a1f0e)}.kbd-info{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-2);font-size:var(--fs-value);color:var(--ink-on-dark)}