.synth-cabinet{--wood-1:#7a4a2a;--wood-2:#4e2c16;--panel:#161311;--panel-hi:#221d1a;--ink:#efe8d6;--ink-dim:#a39a86;--amber:#ffb028;--orange:#e8742c;--focus:#fff;box-sizing:border-box;background:radial-gradient(ellipse at 50% 0, color-mix(in oklab, var(--foreground) 7%, var(--background)), var(--background) 70%);flex:1 0 auto;justify-content:center;padding:2rem 1.5rem;display:flex}body{margin:0}.synth{box-sizing:border-box;width:min(100%,46rem);height:max-content;color:var(--ink);background:repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--panel-hi), var(--panel));border-image:repeating-linear-gradient(100deg,#00000024 0 2px,#0000 2px 9px,#ffffff0d 9px 10px,#0000 10px 17px) 1/0 1.5rem;border-radius:4px;align-content:start;gap:1rem;padding:1rem 1.25rem 1.25rem;font-family:Helvetica Neue,Arial Narrow,Arial,sans-serif;display:grid;position:relative;box-shadow:inset 0 1px #ffffff1a,inset 0 -2px #00000080,0 24px 50px #0009}.synth-row{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem 1rem;display:flex}.synth-header{flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;display:flex}.synth-name{text-transform:uppercase;letter-spacing:.3em;margin:0;font:800 1.4rem/1 Arial Narrow,Arial,sans-serif}.synth-name span{color:var(--amber)}.synth-tagline{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.24em;margin:0;font-size:.65rem}.lcd{background:#0b0a07;border-radius:3px;flex:1;align-content:center;gap:.3rem;height:3rem;padding:.4rem .9rem;display:grid;box-shadow:inset 0 2px 5px #000,0 0 0 2px #1d1914,0 1px 0 2px #ffffff0f}.lcd-line{text-overflow:ellipsis;color:var(--amber);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;text-shadow:0 0 6px #ffb0288c;margin:0;font:600 .78rem/1.1 ui-monospace,SF Mono,Menlo,monospace;overflow:hidden}.lcd-dim{color:#a8721d;text-shadow:none}.synth:not([data-power]) .lcd-line{color:#2a2418;text-shadow:none}.lcd-bar{flex:1;align-items:stretch;gap:.5rem;min-width:14rem;display:flex}.lcd-button{width:3rem;color:var(--ink);cursor:pointer;background:linear-gradient(#2c2722,#181512);border-radius:4px;place-items:center;font-size:.9rem;display:grid;box-shadow:inset 0 1px #ffffff1f,0 2px 3px #0009}.lcd-button:active{transform:translateY(1px)}.lcd-button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.synth-power{align-items:center;gap:.9rem;margin-left:auto;display:flex}.synth-power-note{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;font-weight:700}.section{gap:.6rem;min-width:0;margin:0;display:grid}.legend{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.22em;margin:0;font:700 .6rem/1 Arial Narrow,Arial,sans-serif}.group{flex-wrap:wrap;align-items:flex-end;gap:.75rem;display:flex}.group+.group{margin-top:1.4rem}.knob{--knob-size:2.75rem;justify-items:center;gap:1rem;padding-top:.9rem;display:inline-grid;position:relative}.knob[data-size=sm]{--knob-size:2.5rem}.knob[data-size=lg]{--knob-size:3.5rem}.knob-control{width:var(--knob-size);aspect-ratio:1;touch-action:none;cursor:ns-resize;position:relative}.knob-control[data-disabled]{cursor:not-allowed}.knob-thumb{pointer-events:none;border-radius:50%;position:absolute;inset:12%;box-shadow:0 6px 8px #000000a6,inset 0 1px #ffffff59,inset 0 -3px 4px #0006,0 0 0 3px #0a0908,0 0 0 4px #ffffff1a}.knob-thumb:after{content:"";background:var(--pointer,#f4f1ea);border-radius:2px;width:3px;height:32%;position:absolute;top:7%;left:50%;translate:-50%}.knob[data-cap=black] .knob-thumb{background:radial-gradient(circle at 32% 28%, #ffffff38, transparent 45%), repeating-conic-gradient(from 0deg, #1f1c1a 0 4deg, #0e0d0c 4deg 8deg)}.knob[data-cap=ivory]{--pointer:#1a1613}.knob[data-cap=ivory] .knob-thumb{background:radial-gradient(circle at 32% 28%, #ffffffb3, transparent 50%), repeating-conic-gradient(from 0deg, #e9e1cb 0 4deg, #cfc6ad 4deg 8deg)}.knob[data-cap=orange] .knob-thumb{background:radial-gradient(circle at 32% 28%, #fff6, transparent 50%), repeating-conic-gradient(from 0deg, var(--orange) 0 4deg, #c25a1c 4deg 8deg)}.knob-control[data-dragging] .knob-thumb{filter:brightness(1.1)}.knob-mark{pointer-events:none;position:absolute;inset:0}.knob-tick{background:var(--ink-dim);width:1px;height:5px;position:absolute;top:0;left:50%;translate:-50%}.knob-mark[data-active] .knob-tick{background:var(--amber)}.knob-numeral{font-variant-numeric:tabular-nums;color:var(--ink-dim);rotate:calc(var(--knob-mark-angle) * -1);font-size:.6rem;line-height:1;position:absolute;top:-1.1rem;left:50%;translate:-50%}.knob-label{color:var(--ink);text-transform:uppercase;letter-spacing:.18em;white-space:nowrap;font:700 .6rem/1 Arial Narrow,Arial,sans-serif}.fader{--strip-h:4.5rem;justify-items:center;gap:1.1rem;display:inline-grid}.fader-control{width:2.5rem;height:var(--strip-h);position:relative}.fader-control:before,.fader-control:after{pointer-events:none;content:"";background:repeating-linear-gradient(180deg, var(--ink-dim) 0 1px, transparent 1px calc(100% / 10));width:.3rem;position:absolute;top:0;bottom:0}.fader-control:before{left:0}.fader-control:after{right:0}.fader-track{background:#050403;border-radius:2px;width:.25rem;height:100%;margin-inline:auto;position:relative;box-shadow:inset 0 1px 3px #000,0 0 0 3px #0e0c0b,0 1px 0 3px #ffffff1a}.fader-thumb{background:linear-gradient(#0000 calc(50% - 1px),#f4f1ea calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(#5a5650,#2b2926 14%,#1b1a18 60%,#0f0e0d);border-radius:3px;width:1.9rem;height:2.4rem;position:absolute;box-shadow:0 6px 8px #000000a6,inset 0 1px #ffffff59,inset 1px 0 #ffffff14,inset -1px 0 #0009}.fader-thumb:before{content:"";position:absolute;inset:-.5rem}.fader-control[data-dragging] .fader-thumb{filter:brightness(1.25)}.lamp{background:radial-gradient(circle at 35% 30%,#5a3a10,#2a1a08);border-radius:50%;width:.7rem;height:.7rem;display:block;box-shadow:inset 0 1px 2px #000,0 0 0 2px #0e0c0b,0 1px 0 2px #ffffff1f}.lamp[data-on]{background:radial-gradient(circle at 35% 30%, #fff3c4, var(--amber) 45%, #b8680a);box-shadow:0 0 0 2px #0e0c0b,0 0 8px 2px #ffb028a6,inset 0 -1px 2px #0000004d}.selector{justify-content:center;gap:.35rem;display:flex}.rocker,.power{color:var(--ink);text-transform:uppercase;letter-spacing:.14em;cursor:pointer;background:0 0;border:0;justify-items:center;gap:.5rem;padding:0;font:700 .6rem/1 Arial Narrow,Arial,sans-serif;display:grid}.rocker:after{content:"";background:linear-gradient(#f2efe6 0 48%,#9c978c 52%);border-radius:3px;order:1;width:1.5rem;height:1.9rem;box-shadow:0 0 0 3px #0e0c0b,0 4px 5px #0009,inset 0 1px #fff}.rocker[aria-pressed=true]:after{background:linear-gradient(#9c978c 0 52%,#f2efe6 56%);box-shadow:0 0 0 3px #0e0c0b,0 1px 2px #0009,inset 0 -1px #fff}.rocker .lamp{order:0}.rocker{grid-template-rows:auto auto auto;min-width:2.6rem}.power{background:linear-gradient(#4a423a,#2d2722);border-radius:4px;grid-auto-flow:column;gap:.7rem;padding:.55rem 1rem;transform:translateY(-2px);box-shadow:0 3px #0a0908,0 5px 6px #00000080,inset 0 1px #ffffff2e}.power[aria-pressed=true]{transform:none;box-shadow:0 1px #0a0908,inset 0 2px 6px #0009}.rocker:focus-visible,.power:focus-visible,.piano-key:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.fader-thumb:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.knob-thumb:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.piano{background:#0d0b0a;border-radius:4px;width:100%;height:6.5rem;padding-top:4px;display:block;position:relative;box-shadow:0 0 0 3px #3a322b,0 8px 14px #00000080}.piano-key{border:0;position:absolute;top:4px}.piano-key[data-color=white]{background:linear-gradient(#fffdf6,#e6dfcc);border:1px solid #1a1613;border-radius:0 0 3px 3px;height:calc(100% - 4px);box-shadow:inset 0 -5px 4px #00000024}.piano-key[data-color=black]{z-index:1;background:linear-gradient(#2e2a27,#050403);border-radius:0 0 3px 3px;height:60%;box-shadow:0 3px 4px #0009,inset 0 -3px 2px #ffffff1f}.piano-key[data-active]{filter:brightness(.82)sepia(.4)}.synth:not([data-power]) .lamp[data-on]{background:radial-gradient(circle at 35% 30%,#5a3a10,#2a1a08);box-shadow:inset 0 1px 2px #000,0 0 0 2px #0e0c0b}.synth:not([data-power]) .knob-thumb,.synth:not([data-power]) .fader-thumb{filter:brightness(.7)}@media (prefers-reduced-motion:no-preference){.power,.rocker:after{transition:transform 80ms linear,box-shadow 80ms linear}}