:root{--alu-hi:#e6e8e7;--alu-lo:#b9bdbe;--ink:#17191c;--ink-soft:#3c4046;--bezel:#18191b;--amber:#ffb04a;--cap-freq:#c9472c;--cap-mod:#2f63a8;--cap-level:#ece8dc;--cap-time:#e2b437;--cap-shape:#2c2e32;--slot-a:#e2702b;--slot-b:#e8bd2c;--slot-c:#3b7cc4;--slot-d:#63a64c;--sans:"Helvetica Neue", Helvetica, Arial, sans-serif;--mono:"SF Mono", ui-monospace, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:#d9d5cc;font-family:var(--sans);-webkit-font-smoothing:antialiased;background:radial-gradient(120% 90% at 50% 0,#2c2926 0%,#161514 55%,#0e0d0c 100%) fixed}kbd{color:#e9e4d8;min-width:1.5em;font:600 .8em/1.4 var(--sans);text-align:center;background:#24221f;border:1px solid #55524c;border-bottom-width:2px;border-radius:4px;padding:1px 5px;display:inline-block}button{font:inherit;cursor:pointer}.studio{flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:100vh;padding:16px;display:flex}.case{border-radius:14px;grid-template-columns:22px minmax(0,1fr) 22px;width:min(1320px,100%);display:grid;overflow:hidden;box-shadow:0 30px 60px #0000008c,0 4px 12px #00000080}.cheek{background:repeating-linear-gradient(176deg,#00000024 0 2px,#0000 2px 9px),repeating-linear-gradient(181deg,#ffdcb40d 0 1px,#0000 1px 13px),linear-gradient(90deg,#321c10,#6a4027 45%,#4b2b19 70%,#2c180d)}.instrument{background:#121213;flex-direction:column;min-width:0;display:flex}.panel{color:var(--ink);background:repeating-linear-gradient(90deg, #ffffff0d 0 1px, #00000009 1px 2px, transparent 2px 4px), linear-gradient(180deg, var(--alu-hi), var(--alu-lo));border-bottom:3px solid #0b0b0c;padding:14px 18px 18px}.panel-head{border-bottom:2px solid var(--ink);justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;padding-bottom:10px;display:flex}.brand{flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0;display:flex}.wordmark{letter-spacing:.2em;font-size:32px;font-style:italic;font-weight:800;line-height:1}.stripes{gap:3px;display:inline-flex}.stripes i{width:7px;height:24px;transform:skew(-18deg)}.stripes i:first-child{background:var(--slot-a)}.stripes i:nth-child(2){background:var(--slot-b)}.stripes i:nth-child(3){background:var(--slot-c)}.stripes i:nth-child(4){background:var(--slot-d)}.tagline{letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);font-size:11px;font-weight:700}.head-controls{flex-shrink:0;align-items:center;gap:18px;display:flex}.init{border:1.5px solid var(--ink);color:var(--ink);letter-spacing:.18em;text-transform:uppercase;background:0 0;border-radius:4px;padding:6px 10px;font-size:10px;font-weight:800}.init:hover{background:#0000000f}.synth{flex-direction:column;gap:10px;display:flex}.synth-row{flex-wrap:wrap;gap:10px;display:flex}.module{background:#ffffff12;border:1.5px solid #17191ca6;border-radius:5px;flex-direction:column;min-width:0;margin:0;padding:7px 8px;display:flex}.module-title{border-bottom:1.5px solid var(--ink);letter-spacing:.2em;text-transform:uppercase;margin:0 0 6px;padding-bottom:4px;font-size:10.5px;font-weight:800}.module-body{flex:1;align-items:flex-start;gap:8px;display:flex}.module-note{letter-spacing:.04em;max-width:34em;color:var(--ink-soft);margin:6px 0 0;font-size:9px;font-weight:600;line-height:1.35}.module.narrow .module-body{justify-content:center}.group{flex-direction:column;gap:2px;display:flex}.group+.group{border-left:1px solid #17191c40;padding-left:6px}.group-label{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;font-size:8.5px;font-weight:800}.group-row{gap:0;display:flex}.switches{flex-direction:column;gap:10px;padding-right:2px;display:flex}.vslider{flex-direction:column;align-items:center;width:36px;display:flex}.vslider-body{gap:1px;padding:8px 0 6px;display:flex}.vslider-scale{height:104px;font:700 7px/12px var(--sans);color:var(--ink-soft);text-align:right;flex-direction:column;justify-content:space-between;margin:-6px 0;display:flex}.vslider-slot{touch-action:none;cursor:ns-resize;outline:none;width:24px;height:92px;position:relative}.vslider-slot:before{content:"";background:#0e0f10;border-radius:3px;position:absolute;inset:-4px 9px;box-shadow:inset 0 1px 2px #000000e6,0 1px #fff9}.vslider-cap{background:var(--cap-level);cursor:grab;border-radius:2px;width:22px;height:14px;position:absolute;left:50%;transform:translate(-50%,50%);box-shadow:inset 0 1px #ffffff80,inset 0 -2px #00000040,0 3px 4px #00000073}.vslider-cap[data-cap=freq]{background:var(--cap-freq)}.vslider-cap[data-cap=mod]{background:var(--cap-mod)}.vslider-cap[data-cap=time]{background:var(--cap-time)}.vslider-cap[data-cap=shape]{background:var(--cap-shape)}.vslider-cap:after{content:"";background:var(--ink);height:2px;margin-top:-1px;position:absolute;top:50%;left:3px;right:3px}.vslider-cap[data-cap=freq]:after,.vslider-cap[data-cap=mod]:after,.vslider-cap[data-cap=shape]:after{background:#f3efe4}.vslider-slot:focus-visible .vslider-cap{outline:2px solid var(--slot-c);outline-offset:2px}.vslider-label{letter-spacing:.02em;text-align:center;text-transform:uppercase;flex-direction:column;align-items:center;width:100%;min-height:24px;font-size:7.5px;font-weight:800;line-height:1.15;display:flex}.vslider-label small{letter-spacing:.04em;color:var(--ink-soft);font-size:7px;font-weight:700}.switch{flex-direction:column;gap:3px;display:flex}.switch-label{letter-spacing:.14em;text-transform:uppercase;font-size:8.5px;font-weight:800}.switch-label sup{color:var(--cap-freq);margin-left:1px}.switch-body{gap:4px;display:flex}.switch-slot{background:#0e0f10;border:none;border-radius:3px;width:12px;padding:0;position:relative;box-shadow:inset 0 1px 2px #000000e6,0 1px #fff9}.switch-bat{background:linear-gradient(#f2f2ef,#a9acad);border-radius:2px;height:11px;transition:top 70ms ease-out;position:absolute;left:1px;right:1px;box-shadow:0 1px 2px #0009}.switch-opts{flex-direction:column;padding-top:2px;display:flex}.switch-opts button{height:13px;color:var(--ink-soft);letter-spacing:.08em;text-align:left;background:0 0;border:none;padding:0 2px;font-size:8px;font-weight:700;line-height:13px}.switch-opts button[data-on]{color:var(--ink);font-weight:900}.push{flex-direction:column;align-items:center;gap:4px;padding-top:18px;display:flex}.push-cap{touch-action:none;border:none;border-radius:50%;width:26px;height:26px;box-shadow:0 0 0 3px #2a2c2f,0 0 0 4px #8c9092,0 3px 0 4px #00000059}.push-cap[data-color=red]{background:radial-gradient(circle at 38% 32%,#ff8a6e,#c8321d 55%,#7a1508)}.push-cap[data-color=black]{background:radial-gradient(circle at 38% 32%,#6a6c70,#26272a 60%,#0e0e0f)}.push-cap:active{filter:brightness(.85);transform:translateY(1px)}.push-cap:focus-visible{outline:2px solid var(--slot-c);outline-offset:4px}.push-label{letter-spacing:.1em;text-align:center;text-transform:uppercase;max-width:54px;font-size:8px;font-weight:800;line-height:1.2}.power{flex-shrink:0;align-items:center;gap:10px;display:flex}.power-label{letter-spacing:.22em;text-transform:uppercase;font-size:10.5px;font-weight:800}.lamp{background:radial-gradient(circle at 35% 30%,#6b2a22,#2b0d0a);border-radius:50%;width:14px;height:14px;box-shadow:inset 0 1px 2px #0009,0 0 0 2px #2a2c2f,0 0 0 3px #8c9092}.lamp[data-state=on]{background:radial-gradient(circle at 35% 30%,#ffd2b8,#ff3b1f 45%,#a3130a);box-shadow:0 0 10px 2px #ff3c1e8c,0 0 0 2px #2a2c2f,0 0 0 3px #8c9092}.lamp[data-state=starting]{animation:.5s steps(2,end) infinite lamp-blink}.lamp[data-state=error]{background:radial-gradient(circle at 35% 30%,#ffe9a6,#e8a21c 50%,#8a5a05)}@keyframes lamp-blink{50%{background:radial-gradient(circle at 35% 30%,#ffd2b8,#ff3b1f 45%,#a3130a)}}.rocker{background:#1a1b1d;border:none;border-radius:5px;width:32px;height:42px;padding:3px;box-shadow:inset 0 2px 4px #000000b3,0 1px #ffffff80}.rocker-face{color:#e9e4d8;background:linear-gradient(#4a4c50,#2b2c2f 50%,#1e1f21);border-radius:3px;flex-direction:column;justify-content:space-between;height:100%;padding:2px 0;font-size:10px;font-weight:800;transition:background 80ms,box-shadow 80ms;display:flex;box-shadow:0 3px #0b0b0c}.rocker[data-on] .rocker-face{background:linear-gradient(#1e1f21,#2b2c2f 50%,#4a4c50);box-shadow:0 -3px #0b0b0c}.rocker:focus-visible{outline:2px solid var(--slot-c);outline-offset:2px}.module.monitor{flex:320px}.module.monitor .module-body{align-items:stretch}.scope{background:linear-gradient(180deg, #232427, var(--bezel));border-radius:8px;flex-direction:column;flex:200px;gap:4px;min-width:160px;padding:8px 8px 6px;display:flex;box-shadow:inset 0 1px #ffffff14,0 2px #ffffff80}.scope-screen{border-radius:6px;width:100%;height:110px;display:block;box-shadow:0 0 0 2px #0a0a0b}.scope-label{letter-spacing:.2em;text-transform:uppercase;color:#8f9497;font-size:8.5px;font-weight:700}.readout{flex-direction:column;flex:140px;min-width:130px;display:flex}.readout-note{color:var(--amber);font:600 28px/1.2 var(--mono);text-shadow:0 0 8px #ff962899;text-align:center;background:#140d06;border-radius:4px;padding:6px 10px;box-shadow:inset 0 2px 6px #000c}.readout-status{height:4.2em;color:var(--ink-soft);margin-top:8px;font-size:11px;line-height:1.4;overflow:hidden}.readout-status[data-state=error]{color:#9b1c0e;font-weight:700}.octave{flex-direction:column;gap:6px;display:flex}.octave-ctl{align-items:center;gap:4px;display:flex}.octave-ctl button{color:#e9e4d8;background:linear-gradient(#3a3c40,#1d1e20);border:none;border-radius:4px;align-items:center;gap:4px;padding:4px 6px;font-size:9px;display:inline-flex;box-shadow:0 2px #0b0b0c}.octave-ctl button:active{transform:translateY(1px);box-shadow:0 1px #0b0b0c}.octave-ctl kbd{border-color:#6a6760;min-width:0;padding:0 3px;font-size:9px}.octave-val{min-width:2.4em;font:700 13px var(--mono);text-align:center}.keybed{background:linear-gradient(#161617,#0b0b0c);padding:0 16px 18px}.keybed:before{content:"";background:linear-gradient(#7a1d1a,#4a0f0d);height:5px;margin:0 -16px;display:block}.kbd{touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;height:clamp(120px,13vw,180px);display:flex;position:relative}.key{position:relative}.key.white{background:linear-gradient(#d9d3c3 0%,#f6f2e7 8%,#ece6d6 82%,#d5cdb9 100%);border:1px solid #77725f;border-top:none;border-radius:0 0 6px 6px;flex:1 1 0;min-width:0;box-shadow:inset 0 -5px #cfc7b1,inset 0 1px #fffdf6}.key.white+.key.white{margin-left:-1px}.key.white[data-held]{box-shadow:inset 0 -2px 0 var(--slot-a), inset 0 6px 8px #0000002e;background:linear-gradient(#c9c2b0 0%,#e4ddcc 10%,#ddd5c2 100%)}.key.black{z-index:2;background:linear-gradient(#121213 0%,#2c2c2f 75%,#1b1b1d 90%,#0b0b0c 100%);border-radius:0 0 4px 4px;height:62%;position:absolute;top:0;box-shadow:0 3px 4px #0000008c,inset 0 -6px #0a0a0b,inset 1px 0 #3a3a3d}.key.black[data-held]{box-shadow:0 1px 2px #0000008c, inset 0 -2px 0 var(--slot-a), inset 1px 0 0 #3a3a3d;background:linear-gradient(#121213 0%,#333336 85%,#232326 100%)}.legend,.oct{pointer-events:none;white-space:nowrap;position:absolute;left:50%;transform:translate(-50%)}.legend{color:#6b6556;font-size:clamp(9px,1vw,12px);font-weight:700;bottom:12px}.key.black .legend{color:#b9b4a6;bottom:10px}.oct{letter-spacing:.06em;color:#a39b88;font-size:clamp(8px,.8vw,10px);font-weight:700;bottom:32px}.hint{color:#8f8b84;text-align:center;max-width:1280px;margin:0;font-size:13px;line-height:1.9}@media (width<=760px){.panel{padding:12px 10px 14px}.case{grid-template-columns:10px minmax(0,1fr) 10px}.keybed{padding:0 6px 12px}.keybed:before{margin:0 -6px}.tagline{display:none}.module-body{flex-wrap:wrap}}