:root{--page:#f1f0ec;--body:#e3e2dd;--body-edge:#cbcac4;--ink:#1b1b1b;--muted:#84837d;--orange:#ff5a1f;--display:#0a0a0a;--key-light:#f4f3ef;--key-mid:#c9c8c2;--key-dark:#2e2e2e;--mono:"Space Mono", ui-monospace, monospace;--sans:"Space Grotesk", system-ui, sans-serif;font-family:var(--sans);color:var(--ink);background:var(--page)}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--page);-webkit-user-select:none;user-select:none;min-height:100vh;margin:0;padding:20px}button{font:inherit;color:inherit}.device{background:var(--body);max-width:1440px;box-shadow:inset 0 1px 0 #fffc, 0 0 0 1px var(--body-edge), 0 24px 48px -24px #00000059;border-radius:14px;flex-direction:column;gap:16px;margin:0 auto;padding:16px 18px 18px;display:flex}.cap{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-size:9px}.tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--ink);color:var(--ink);white-space:nowrap;border-radius:2px;padding:3px 6px;font-size:10px;line-height:1}.tag.dark{background:var(--ink);color:var(--body)}.tag.orange{background:var(--orange);border-color:var(--orange);color:#fff}.led{background:#9a9993;border-radius:50%;flex:none;width:6px;height:6px}.on>.led{background:var(--orange);box-shadow:0 0 6px var(--orange)}.topbar{align-items:center;gap:18px;min-height:40px;display:flex}.brand{flex-direction:column;line-height:1;display:flex}.brand .name{letter-spacing:-.02em;font-size:26px;font-weight:500}.brand .jp{color:var(--orange);letter-spacing:.1em;margin-top:3px;font-size:11px}.tags{gap:4px;display:flex}.inst-row{gap:6px;display:flex}.inst-row .opt{text-transform:uppercase;letter-spacing:.06em;width:auto;height:28px;padding:0 12px;font-size:12px}.hint-text{min-width:0;font-family:var(--mono);color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;overflow:hidden}.grille{opacity:.8;background-image:radial-gradient(circle,#9d9c96 1.3px,#0000 1.6px);background-size:6px 6px;border-radius:4px;flex:none;width:160px;height:40px}.upper{align-items:stretch;gap:18px;display:flex}.display{background:var(--display);color:#eee;border-radius:8px;flex:1;grid-template-columns:150px 1fr 190px;gap:16px;min-width:0;height:132px;padding:14px 16px;display:grid;position:relative;box-shadow:inset 0 2px 8px #000c,0 0 0 3px #bdbcb6,0 1px 0 4px #fff9}.display .cap{color:#6a6a6a}.display{--screen:var(--orange)}.disp-col{flex-direction:column;gap:4px;min-width:0;display:flex}.disp-col.right{text-align:right;align-items:flex-end}.digits{font-family:var(--mono);color:#f2f2f2;font-size:40px;font-weight:700;line-height:1}.disp-name,.disp-value{font-family:var(--mono);color:var(--screen);text-transform:lowercase;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:15px;overflow:hidden}.disp-value{color:#f2f2f2;font-size:26px;font-weight:700;line-height:1.1}.disp-foot{align-items:center;gap:12px;margin-top:auto;display:flex}.scope-wrap{min-width:0;position:relative}#scope{width:100%;height:100%;display:block;position:absolute;inset:0}.voices{gap:3px;display:flex}.voices i{background:#2a2a2a;width:7px;height:7px}.voices i.rel{background:#7a3a20}.voices i.on{background:var(--screen)}#start-hint{font-family:var(--mono);color:#bbb;background:#0a0a0ae0;border-radius:8px;justify-content:center;align-items:center;gap:10px;font-size:12px;display:flex;position:absolute;inset:0}.side{align-items:flex-end;gap:18px;display:flex}.ctl-group{flex-direction:column;gap:6px;display:flex}.bank-row{grid-template-columns:repeat(4,34px);gap:8px;display:grid}.bank-row .opt{text-transform:uppercase;justify-content:center;width:34px;padding:0 6px}.patch-grid{grid-template-columns:repeat(4,34px);gap:8px;display:grid}.patch-grid .key{width:34px;height:30px;font-family:var(--mono);font-size:12px}.patch-grid .key.on{background:var(--orange);color:#fff;box-shadow:inset 0 1px #ffffff4d,0 3px #c63d0c,0 4px 8px #0003}.store{width:100%;height:26px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:10px}.store.armed{animation:.6s step-end infinite blink}@keyframes blink{50%{background:var(--key-dark)}}.knobs{align-items:flex-end;gap:16px;display:flex}.key{cursor:pointer;background:var(--key-light);color:var(--ink);border:none;border-radius:6px;place-items:center;transition:transform 50ms,box-shadow 50ms;display:grid;box-shadow:inset 0 1px #ffffffe6,0 3px #b4b3ad,0 4px 8px #0000002e}.key.dark{background:var(--key-dark);color:#eee;box-shadow:inset 0 1px #ffffff1f,0 3px #141414,0 4px 8px #00000040}.key.orange{background:var(--orange);color:#fff;box-shadow:inset 0 1px #ffffff4d,0 3px #c63d0c,0 4px 8px #0003}.key:active{transform:translateY(3px);box-shadow:0 1px 2px #0003}.key.small{width:34px;height:30px;font-size:18px;line-height:1}.key:focus-visible,.knob:focus-visible,.track:focus-visible,.opt:focus-visible,.sw:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.ctl{flex-direction:column;align-items:center;gap:8px;display:flex}.knob{cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 35% 30%,#fff,#dddcd7 60%,#c4c3bd);border-radius:50%;width:46px;height:46px;position:relative;box-shadow:0 3px #a6a59f,0 5px 10px #00000040,inset 0 -2px 3px #00000014}.knob.big{width:62px;height:62px}.knob .indicator{background:var(--ink);transform-origin:50% 18px;border-radius:2px;width:3px;height:30%;margin-left:-1.5px;position:absolute;top:5px;left:50%}.knob.big .indicator{transform-origin:50% 26px;background:var(--orange)}.panel{--panel-bg:#dcdbd6;background:#dcdbd6;border-radius:8px;flex-wrap:wrap;gap:0;padding:4px 0;display:flex;box-shadow:inset 0 1px 2px #00000014}.section{border-right:1px solid var(--body-edge);flex-direction:column;gap:10px;padding:10px 14px 14px;display:flex}.section:last-child{border-right:none}.section-head{display:flex}.section-body{flex:1;align-items:flex-end;gap:10px;display:flex}.fader .track{cursor:ns-resize;touch-action:none;background:repeating-linear-gradient(#0000 0 9px,#b9b8b2 9px 10px) 50%/26px 100% no-repeat;width:26px;height:120px;position:relative}.fader .track:before{content:"";background:var(--panel-bg);position:absolute;inset:0 6px}.fader .groove{background:#1b1b1b;border-radius:2px;width:4px;margin-left:-2px;position:absolute;top:4px;bottom:4px;left:50%;box-shadow:inset 0 1px 2px #0009}.fader .cap-knob{width:26px;height:20px;left:0;bottom:calc(var(--v) * (100% - 20px));background:linear-gradient(#fbfaf7,#e0dfda);border-radius:3px;position:absolute;box-shadow:0 2px #a6a59f,0 3px 6px #00000040}.fader .cap-knob:after{content:"";background:var(--cap,var(--orange));height:2px;position:absolute;top:9px;left:4px;right:4px}.fader .track.grab .cap-knob{background:linear-gradient(#fff,#eae9e4)}.select .opts{flex-direction:column;justify-content:flex-end;gap:5px;height:120px;display:flex}.opt{white-space:nowrap;cursor:pointer;background:var(--key-light);min-width:52px;height:22px;font-family:var(--mono);text-transform:lowercase;border:none;border-radius:4px;align-items:center;gap:6px;padding:0 7px;font-size:10px;display:flex;box-shadow:0 2px #b4b3ad,0 3px 5px #0000001f}.opt:active{transform:translateY(2px);box-shadow:0 0 #0000}.switch .sw{cursor:pointer;background:var(--key-mid);border:none;border-radius:6px;place-items:center;width:36px;height:36px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff80,0 3px #a09f99,0 4px 8px #0000002e}.switch .sw:active{transform:translateY(3px);box-shadow:0 1px 2px #0003}.switch .sw.on{background:var(--key-dark)}.kb-row{align-items:stretch;gap:18px;display:flex}.kb-col{flex-direction:column;flex:1;gap:10px;min-width:0;display:flex}.ribbon{cursor:ew-resize;touch-action:none;background:linear-gradient(#262626,#1b1b1b);border-radius:4px;justify-content:center;align-items:center;height:28px;display:flex;position:relative;box-shadow:inset 0 1px 3px #0009,0 0 0 3px #bdbcb6}.ribbon .cap{color:#666;pointer-events:none}.ribbon-dot{background:var(--orange);width:14px;height:14px;box-shadow:0 0 10px var(--orange);pointer-events:none;border-radius:50%;margin:-7px 0 0 -7px;display:none;position:absolute;top:50%}.ribbon.touch .ribbon-dot{display:block}.scope-wrap.pen{cursor:crosshair;touch-action:none}.oct-ctl{flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;display:flex}.oct-buttons{flex-direction:column;gap:10px;display:flex}.keyboard{touch-action:none;background:#1b1b1b;border-radius:6px;flex:1;height:150px;padding:0;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 3px #bdbcb6}.pkey{cursor:pointer;position:relative}.pkey.white{background:linear-gradient(#e9e8e4,#f6f5f2 85%,#dddcd7);border-right:1px solid #b9b8b2;border-radius:0 0 5px 5px;height:100%}.pkey.black{z-index:1;background:linear-gradient(#3a3a3a,#262626);border-radius:0 0 4px 4px;height:60%;position:absolute;top:0;transform:translate(-50%);box-shadow:inset 0 -4px #161616,0 2px 4px #0006}.pkey.sounding.white{background:linear-gradient(#ffd3c0,#ffe6db)}.pkey.sounding.black{background:linear-gradient(#a8492a,#8a3a20)}.pkey.down.white,.pkey.down.black{background:var(--orange)}.pkey.down.black{box-shadow:inset 0 -2px #c63d0c}.pkey .oct,.pkey .hint{text-align:center;font-family:var(--mono);text-transform:uppercase;pointer-events:none;font-size:9px;position:absolute;left:0;right:0}.pkey .oct{color:var(--muted);bottom:8px}.pkey .hint{color:#b5b4ae;bottom:22px}.pkey.black .hint{color:#6e6e6e;bottom:8px}.pkey.down .oct,.pkey.down .hint{color:#fff}@media (width<=1100px){.upper{flex-direction:column}.side{justify-content:space-between}}@media (width<=640px){body{padding:0}.device{border-radius:0;padding:12px 16px 16px}.grille,.tags,.hint-text{display:none}.display{grid-template-columns:1fr 1fr;height:auto}.scope-wrap{grid-area:2/1/auto/-1;height:60px}.section{border-right:none;border-bottom:1px solid var(--body-edge);width:100%}.section-body{flex-wrap:wrap}.pkey .hint{display:none}}.select.many .opts{grid-template-columns:repeat(2,52px);align-content:end;height:auto;display:grid}.knobctl .knob{width:44px;height:44px}.knobctl .knob .indicator{transform-origin:50% 17px;height:12px}body[data-instrument=moog] .panel{background:linear-gradient(#232323,#1a1a1a);border-left:10px solid #6b4528;border-right:10px solid #6b4528;border-image:linear-gradient(#7a5233,#5a3820) 1;box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #111}body[data-instrument=moog] .section{border-right-color:#333}body[data-instrument=moog] .panel .cap{color:#9a9993}body[data-instrument=moog] .panel .tag.dark{background:var(--key-light);color:var(--ink);border-color:var(--key-light)}body[data-instrument=moog] .panel .knob .indicator{background:var(--orange)}body[data-instrument=moog] .panel .switch .sw{background:#3a3a3a;box-shadow:inset 0 1px #ffffff1a,0 3px #0e0e0e,0 4px 8px #0006}body[data-instrument=moog] .panel .switch .sw.on{background:#555}body[data-instrument=moog] .section-body{align-items:center}body[data-instrument=cs80] .panel{--panel-bg:#2b2724;background:var(--panel-bg);box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #151311}body[data-instrument=cs80] .section{border-right-color:#3d3833}body[data-instrument=cs80] .panel .cap{color:#a39e96}body[data-instrument=cs80] .panel .tag.dark{background:var(--cap,var(--orange));border-color:var(--cap,var(--orange));color:#111}body[data-instrument=cs80] .section[data-group=sub]{--cap:#f2c94c}body[data-instrument=cs80] .section[data-group=i]{--cap:#ff5a1f}body[data-instrument=cs80] .section[data-group=ii]{--cap:#4a9eff}body[data-instrument=cs80] .section[data-group=mix]{--cap:#bdbcb6}body[data-instrument=cs80] .section[data-group=ring]{--cap:#5dd39e}body[data-instrument=cs80] .section[data-group=touch]{--cap:#c86bfa}body[data-instrument=cs80] .fader .cap-knob:after{height:4px;top:8px}body[data-instrument=cs80] .switch .sw{background:#3a3632;box-shadow:inset 0 1px #ffffff1a,0 3px #0e0d0c,0 4px 8px #0006}body[data-instrument=cmi] .display{--screen:#5dff8a}body[data-instrument=cmi] .display .digits,body[data-instrument=cmi] .display .disp-value{color:var(--screen);text-shadow:0 0 8px #5dff8a73}body[data-instrument=cmi] .display .disp-name{text-shadow:0 0 8px #5dff8a73}body[data-instrument=cmi] .panel{--panel-bg:#ebe5d6;background:var(--panel-bg)}body[data-instrument=cmi] .section{border-right-color:#d3ccba}body[data-instrument=cmi] .panel .knob .indicator{background:#1f7a3c}body[data-mode=groove] .side,body[data-mode=groove] .kb-row{display:none}body[data-mode=groove] .display{--screen:#3fe0c5}body[data-mode=groove] .display .digits{color:var(--screen)}body[data-mode=groove] .panel{--panel-bg:#ecebe6;background:var(--panel-bg);padding:14px}.groove{flex:1;grid-template-columns:170px auto 1fr auto;align-items:start;gap:22px;display:grid}.g-col{flex-direction:column;gap:8px;display:flex}.g-group{justify-content:flex-start;gap:8px;width:100%;height:30px}.g-group b{font-size:12px}.g-group-ctl{flex-direction:column;gap:8px;margin-top:8px;display:flex}.g-choose{grid-template-columns:26px minmax(0,1fr) 26px;align-items:center;gap:4px;display:grid}.g-choose .cap{grid-column:1/-1}.g-choose .opt{justify-content:center;width:26px;min-width:26px;padding:0;font-size:14px}.g-value{font-family:var(--mono);text-align:center;white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.g-wide{width:100%;height:32px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.g-wide.armed{animation:.6s step-end infinite blink}.g-hint{white-space:normal;line-height:1.5}.g-pads{grid-template-columns:repeat(3,66px);gap:10px;display:grid}.g-pad{touch-action:none;flex-direction:column;justify-content:space-between;align-items:flex-start;width:66px;height:60px;padding:6px 8px;display:flex}.g-pad .num{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1}.g-pad .name{font-family:var(--mono);text-transform:uppercase;color:var(--muted);white-space:nowrap;font-size:9px}.g-pad.sel{outline:2px solid var(--orange);outline-offset:2px}.g-pad.hit{background:var(--orange);color:#fff;transform:translateY(3px);box-shadow:0 1px 2px #0003}.g-pad.hit .name{color:#fff}.g-pad.empty .num{color:#c4c3bd}.g-params{grid-template-columns:repeat(4,60px);gap:12px 8px;display:grid}.g-transport{gap:14px}.g-knobs{align-items:flex-end;gap:12px;display:flex}.g-knobs .x .knob{background:radial-gradient(circle at 35% 30%, #ff9a6e, var(--orange) 60%, #d9420f)}.g-knobs .x .knob .indicator{background:#fff}.g-knobs .y .knob{background:radial-gradient(circle at 35% 30%,#5a5a5a,#2b2b2b 60%,#161616)}.g-knobs .y .knob .indicator{background:#fff}.g-switches{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.g-switches .select .opts{height:auto}.g-fader .track{height:96px}.g-buttons{gap:10px;display:flex}.g-buttons .key{width:76px;height:44px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.groove.playing .g-play{color:var(--ink);background:#3fe0c5;box-shadow:inset 0 1px #fff6,0 3px #23a08b,0 4px 8px #0003}.groove.recording .g-rec{animation:.6s step-end infinite blink}.g-steps{flex-direction:column;grid-column:1/-1;gap:8px;display:flex}.g-pages{gap:6px;display:flex}.g-step-row{grid-template-columns:repeat(16,1fr);gap:6px;display:grid}.g-step{cursor:pointer;background:var(--key-light);border:none;border-radius:5px;place-items:center;height:36px;display:grid;box-shadow:0 2px #b4b3ad,0 3px 5px #0000001f}.g-step.beat{background:#dddcd6}.g-step:active{box-shadow:none;transform:translateY(2px)}.g-step.has .led{background:#e7b7a3}.g-step.on .led{background:var(--orange);box-shadow:0 0 6px var(--orange)}.g-step.now{box-shadow:0 2px #23a08b,0 0 0 2px #3fe0c5}@media (width<=1100px){.groove{grid-template-columns:1fr 1fr}}@media (width<=640px){.groove{grid-template-columns:1fr}.g-step-row{grid-template-columns:repeat(8,1fr)}}.pedalboard{background:#cfcec8;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px;display:grid;box-shadow:inset 0 1px 3px #0000001f}.pedal{--pedal:var(--orange);background:var(--key-light);border-top:4px solid var(--pedal);border-radius:8px;grid-template-rows:auto 1fr;grid-template-columns:1fr auto;gap:10px 14px;padding:12px 14px;display:grid;box-shadow:inset 0 1px #fff,0 3px #b4b3ad,0 5px 10px #00000026}.pedal-head{grid-column:1/-1;align-items:center;gap:8px;display:flex}.pedal-name{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:700}.pedal-led{background:#8a8984;border-radius:50%;width:8px;height:8px;margin-left:auto;transition:background .1s,box-shadow .1s}.pedal.on .pedal-led{background:var(--pedal);box-shadow:0 0 8px var(--pedal)}.pedal-knobs{flex-wrap:wrap;align-items:flex-start;gap:10px;display:flex}.pedal-knobs .knob{width:38px;height:38px}.pedal-knobs .knob .indicator{transform-origin:50% 14px;height:10px}.pedal.on .pedal-knobs .knob .indicator{background:var(--pedal)}.pedal-foot{flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;display:flex}.footswitch{cursor:pointer;background:radial-gradient(circle at 35% 30%,#f2f2f2,#a9a8a3 55%,#7b7a75);border:none;border-radius:50%;width:46px;height:46px;transition:transform 50ms,box-shadow 50ms;box-shadow:0 0 0 4px #2e2e2e,0 4px 0 4px #141414,0 6px 12px 4px #00000040}.footswitch:active{transform:translateY(3px);box-shadow:0 0 0 4px #2e2e2e,0 1px 0 4px #141414}.footswitch:focus-visible,.pedal-mini:focus-visible{outline:2px solid var(--orange);outline-offset:6px}.pedal-mini{border:1px solid var(--ink);cursor:pointer;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:0 0;border-radius:4px;padding:2px 6px;font-size:9px}.pedal-mini.on{background:var(--ink);color:var(--key-light)}@media (width<=1100px){.pedalboard{grid-template-columns:1fr}}.learn-btn{border:1px solid var(--ink);cursor:pointer;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:0 0;border-radius:4px;padding:3px 8px;font-size:10px}.learn-btn.on{background:var(--orange);border-color:var(--orange);color:#fff;animation:.9s step-end infinite blink}[data-param],[data-target]{position:relative}.cc-badge{background:var(--ink);color:var(--key-light);font-family:var(--mono);pointer-events:none;z-index:2;border-radius:3px;padding:0 3px;font-size:8px;line-height:12px;position:absolute;top:-6px;right:-4px}body.learning [data-param],body.learning [data-target]{outline:1px dashed var(--orange);outline-offset:2px;cursor:crosshair;border-radius:4px}body.learning [data-param] *,body.learning [data-target] *{cursor:crosshair}body.learning .learn-sel{outline:2px solid var(--orange);background:#ff5a1f1f}body[data-instrument=op1] .display{--screen:#f4f3ef}body[data-instrument=op1] .panel{background:#e9e8e4;padding:14px}.op1{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;width:100%;display:grid}.op1-synth,.op1-tape{flex-direction:column;gap:14px;min-width:0;display:flex}.op1-engines{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.op1-eng{cursor:pointer;background:var(--key-light);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;border:none;border-radius:6px;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 6px;font-size:9px;display:flex;box-shadow:inset 0 1px #fff,0 2px #b4b3ad}.op1-eng.on{background:var(--key-dark);color:#f4f3ef;box-shadow:inset 0 1px #ffffff1a,0 2px #111}.op1-eng .glyph{width:22px;height:16px;display:block;position:relative}.g-fm:before,.g-fm:after{content:"";border-radius:50%;position:absolute}.g-fm:before{background:#3d7bff;width:12px;height:12px;top:2px;left:2px}.g-fm:after{background:#2bd17e;width:6px;height:6px;top:0;right:1px}.g-cluster{background:linear-gradient(90deg,#3d7bff 0 3px,#0000 3px 6px,#2bd17e 6px 9px,#0000 9px 12px,#ff5a1f 12px 15px,#0000 15px 18px,#bbb 18px 21px,#0000 21px)}.g-string{background:linear-gradient(#0000 7px,#bbb 7px 9px,#0000 9px)}.g-string:after{content:"";background:#ff5a1f;border-radius:50%;width:6px;height:6px;position:absolute;top:5px;left:5px}.g-pulse{border:2px solid #3d7bff;border-bottom:none;margin-left:4px;width:10px!important}.g-digital{clip-path:polygon(0 100%,0 60%,25% 60%,25% 30%,50% 30%,50% 0,75% 0,75% 45%,100% 45%,100% 100%);background:repeating-linear-gradient(90deg,#2bd17e 0 4px,#0000 4px 6px)}.g-phase{border:2px solid #ff5a1f;border-left-color:#0000;border-radius:50%}.op1-encoders{grid-template-columns:repeat(4,1fr);justify-items:center;gap:8px;display:grid}.op1-enc{gap:6px}.op1-enc .knob{width:62px;height:62px}.op1-enc .knob .indicator{transform-origin:50% 26px;height:18px}.op1-enc.c0 .knob{background:radial-gradient(circle at 35% 30%,#8fb2ff,#3d7bff 60%,#2456c9)}.op1-enc.c1 .knob{background:radial-gradient(circle at 35% 30%,#8ff0bd,#2bd17e 60%,#17995a)}.op1-enc.c2 .knob{background:radial-gradient(circle at 35% 30%,#fff,#f0efea 60%,#c9c8c2)}.op1-enc.c3 .knob{background:radial-gradient(circle at 35% 30%,#ffa27d,#ff5a1f 60%,#cc3f0c)}.op1-enc.c0 .knob .indicator,.op1-enc.c1 .knob .indicator,.op1-enc.c3 .knob .indicator{background:#fff}.op1-enc.small .knob{width:38px;height:38px}.op1-enc.small .knob .indicator{transform-origin:50% 14px;height:10px;top:5px}.op1-val{font-family:var(--mono);color:var(--ink);white-space:nowrap;min-height:12px;font-size:10px}.op1-mod{flex-wrap:wrap;gap:14px;display:flex}.op1-group{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.op1-group-row{align-items:flex-start;gap:10px;display:flex}.op1-select{flex-direction:column;gap:4px;display:flex}.op1-select .opt{min-width:52px}.tape-view{cursor:pointer;background:#0a0a0a;border-radius:6px;width:100%;height:116px;display:block}.tape-tracks{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.tape-strip{background:var(--key-light);border-top:3px solid var(--track);border-radius:6px;flex-direction:column;align-items:center;gap:8px;padding:8px 4px;display:flex;box-shadow:inset 0 1px #fff,0 2px #b4b3ad}.tape-strip.muted{opacity:.55}.tape-arm{border:2px solid var(--ink);width:30px;height:30px;font-family:var(--mono);cursor:pointer;background:0 0;border-radius:50%;font-weight:700}.tape-arm.on{background:var(--track);border-color:var(--track);color:#111}.tape-knobs{gap:8px;display:flex}.tape-knobs .knob{width:32px;height:32px}.tape-knobs .knob .indicator{transform-origin:50% 11px;height:8px;top:4px}.tape-btns{gap:4px;display:flex}.tape-btns .pedal-mini{padding:2px 4px}.tape-transport{flex-wrap:wrap;align-items:flex-start;gap:8px;display:flex}.tape-btn{width:40px;height:34px;font-size:15px}.tape-btn.wide{width:auto;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:0 12px;font-size:10px}.tape-btn.rec{color:#ff5a1f}.tape-btn.on{background:var(--key-dark);color:#f4f3ef}.tape-btn.rec.on{background:var(--orange);color:#fff;animation:.8s step-end infinite blink}.tape-bars{flex-flow:wrap;width:148px}.tape-bars .opt{justify-content:center;width:24px;min-width:24px;padding:0}.tape-bars .cap{width:100%}@media (width<=1100px){.op1{grid-template-columns:1fr}}@media (width<=640px){.op1-engines{grid-template-columns:repeat(3,1fr)}.op1-encoders,.tape-tracks{grid-template-columns:repeat(2,1fr)}}.g-reset{align-items:center;gap:6px;min-height:22px;display:flex}.g-reset-choose{align-items:center;gap:6px;display:flex}.g-reset-choose[hidden]{display:none}@media (width<=640px){.topbar{flex-wrap:wrap;gap:10px 12px}.brand{flex:1}.inst-row{scrollbar-width:none;order:3;width:100%;padding-bottom:4px;overflow-x:auto}.inst-row::-webkit-scrollbar{display:none}.inst-row .opt{flex:none}#start-hint{text-align:center;flex-wrap:wrap;padding:12px;line-height:1.6}.groove{gap:18px}.g-groups{order:1;grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.g-groups>.cap,.g-groups>.g-group-ctl{grid-column:1/-1}.g-group{flex-direction:column;justify-content:center;gap:2px;height:40px;padding:0}.g-group .led{display:none}.g-group span:last-child{font-size:9px}.g-pads{order:2;grid-template-columns:repeat(3,1fr);gap:8px}.g-pad{width:auto;height:68px}.g-transport{order:3}.g-steps{order:4}.g-params-col{order:5}.g-params{grid-template-columns:repeat(4,1fr)}.g-buttons .key{flex:1;width:auto;height:48px}.g-knobs{justify-content:space-between}.g-step{height:40px}}