:root{--bg: #e9e9e7;--body: #0c0c0d;--gap: #050505;--cap: #262628;--cap-hi: #323235;--module: #1a1a1c;--ink: #f2f2f2;--ink-dim: rgba(242, 242, 242, .5);--line: rgba(255, 255, 255, .16);--accent: #ff5a1f;--black: #000;--page-ink: #1b1b1d;--page-dim: rgba(27, 27, 29, .6);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--page-ink);font:14px/1.5 -apple-system,Inter,system-ui,sans-serif;min-height:100vh}main{max-width:1500px;margin:0 auto;padding:32px 16px}.hint{color:var(--page-dim);font-size:13px;max-width:1100px;margin:28px auto 0}.hint b{color:var(--page-ink);font-weight:600}#device{position:relative;width:100%;aspect-ratio:2000 / 833;container-type:inline-size;background-size:100% 100%}#device:before{content:"";position:absolute;left:2.8%;top:6.2%;width:93.5%;height:80.6%;border-radius:1.6cqw;background:linear-gradient(180deg,#1a1a1c,var(--body) 6%,var(--body) 94%,#050506);box-shadow:0 0 0 1px #000,inset 0 1px #ffffff14,0 1.6cqw 3cqw -1cqw #00000073,0 .3cqw .6cqw #0000004d}.grid{position:absolute;left:4.3%;top:9.84%;width:86.45%;height:73.3%;display:grid;grid-template-columns:repeat(34,1fr);grid-template-rows:repeat(6,1fr);background:var(--gap);border-radius:.6cqw}.cell{position:relative;display:grid;place-items:center;user-select:none;-webkit-user-select:none;touch-action:none}.btn{width:60%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;color:var(--ink);font-size:1.35cqw;line-height:1;text-align:center}.btn small{display:block;font-size:.62cqw;color:var(--ink-dim);margin-top:.2cqw;letter-spacing:.02em}.btn i{position:absolute;bottom:8%;font: .6cqw/1 ui-monospace,Menlo,monospace;color:var(--ink-dim)}.speaker{background:var(--body);border-radius:.5cqw;margin:3%}.speaker i{width:80%;height:80%;border-radius:50%;background:radial-gradient(circle,#000 30%,transparent 36%) 0 0 / 7.5% 9.5%,#1d1d1f;-webkit-mask:radial-gradient(closest-side,#000 92%,transparent);mask:radial-gradient(closest-side,#000 92%,transparent);opacity:.9}.module{background:var(--module);margin:2%;border-radius:.7cqw;box-shadow:inset 0 1px #ffffff0d}.module.light{background:var(--cap)}.screen{background:#000;padding:4%;box-shadow:inset 0 0 1.4cqw #000,inset 0 0 0 .4cqw #050505}.screen canvas,.screen .machine{width:100%;height:100%;image-rendering:pixelated;border-radius:.2cqw}.screen .machine{display:none}.screen .machine svg{width:100%;height:100%;display:block}.screen.synth canvas{display:none}.screen.synth .machine{display:block}.big{width:93.5%;aspect-ratio:2 / 1;margin:0 0 0 2.8%;background:#000;border-radius:10px;padding:14px;box-shadow:0 0 0 1px #000,0 10px 30px #00000059}.big canvas,.big .machine{width:100%;height:100%;display:block}.big .machine{display:none}.big .machine svg{width:100%;height:100%;display:block}.big.synth canvas{display:none}.big.synth .machine{display:block}.big{position:relative}.big .name{display:none;position:absolute;right:18px;bottom:12px;font:13px/1 ui-monospace,Menlo,monospace;color:#ffffff8c;white-space:pre}.big.synth .name{display:block}.screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(115deg,#ffffff1a,#fff0 35%,#fff0 70%,#ffffff0d)}.knob{--turn: 0deg;--knob: #e9e9e9;width:52%;aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--knob),#fff 18%),var(--knob) 55%,color-mix(in srgb,var(--knob),#000 25%));box-shadow:0 0 0 .35cqw #070708,0 .35cqw .7cqw #000000b3,inset 0 .1cqw .1cqw #ffffff40;cursor:ns-resize}.knob b{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(var(--turn))}.knob b:before{content:"";position:absolute;left:50%;top:8%;width:4%;height:12%;margin-left:-2%;border-radius:1cqw;background:color-mix(in srgb,var(--knob),#000 55%)}.knob.small{--knob: #3a3a3d;width:40%;cursor:default}.e0 .knob{--knob: #2c3550}.e0 .knob b:before{background:#9db0e6}.e1 .knob{--knob: #5f6064}.e2 .knob{--knob: #a9aaad}.e3 .knob{--knob: #ececec}.key{cursor:pointer}.key:before{content:"";position:absolute;top:5%;right:5%;bottom:5%;left:5%;border-radius:26%;background:linear-gradient(180deg,var(--cap-hi),var(--cap));box-shadow:inset 0 1px #ffffff12,0 .15cqw .25cqw #000c}.key>*{position:relative}.key:active:before,.key.down:before{filter:brightness(.82);box-shadow:inset 0 .2cqw .4cqw #0009}.key.lit .btn{color:#fff;text-shadow:0 0 .6cqw rgba(255,255,255,.7)}.key.lit:before{box-shadow:inset 0 0 0 .12cqw #ffffff8c,0 .15cqw .25cqw #000c}.key.off{opacity:.45;cursor:default}.track{--level: 0}.track:before{box-shadow:inset 0 0 calc(var(--level) * 1.2cqw) rgba(255,90,31,calc(var(--level) * .9)),0 .15cqw .25cqw #000c}.keybed{background:var(--gap)}.key.black{z-index:1}.key.black .btn{width:46%}.rec{color:#ff4040}.step:before{background:var(--cap-step, var(--cap))}.step em{position:absolute;top:22%;width:13%;aspect-ratio:1;border-radius:50%;background:#00000059}.step.on em{background:#fff;box-shadow:0 0 0 .1cqw #00000080,0 0 .5cqw #ffffffe6}.step.comp:before{box-shadow:inset 0 0 0 .15cqw var(--accent)}.step.here em{background:var(--accent);box-shadow:0 0 .8cqw var(--accent)}.step.sel:before{box-shadow:inset 0 0 0 .25cqw var(--accent)}.white.drill small,.key.owned .btn{color:var(--accent)}#device.skinned{background-image:url(/skin.png)}#device.skinned:before{display:none}#device.skinned .cell,#device.skinned .grid{background:transparent;box-shadow:none}#device.skinned .key:before{display:none}#device.skinned .btn{border-color:transparent;color:transparent}#device.skinned .btn small,#device.skinned .btn i{color:transparent}#device.skinned .knob{background:none;box-shadow:none}#device.skinned .lit .btn,#device.skinned .down .btn,#device.skinned .step.on .btn{border-color:#fff}#device.skinned .screen{background:#000}#menu{position:fixed;top:16px;right:16px;width:400px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;z-index:10;background:#181818eb;color:#eee;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px #00000073;font:12px/1.35 ui-monospace,Menlo,monospace}#menu.hidden{display:none}#menu header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}#menu button{font:inherit;color:inherit;background:#333;border:0;border-radius:6px;padding:4px 8px;cursor:pointer}#menu button:hover{background:#444}#menu .actions{display:flex;gap:6px;margin-bottom:10px}#menu .actions .play{background:#ff5a1f;color:#000}#menu section{border-top:1px solid #333;padding:8px 0}#menu .row{display:grid;grid-template-columns:96px 1fr 38px;align-items:center;gap:6px;margin:3px 0}#menu output{text-align:right;color:#aaa}#menu input[type=range]{width:100%;accent-color:#ff5a1f}#menu .track-row{display:grid;grid-template-columns:78px 1fr 54px 34px 30px 30px 24px;align-items:center;gap:5px;margin:3px 0}#menu .track-row .name{text-align:left;background:transparent;padding:3px 4px}#menu .track-row.sel .name{background:#ff5a1f;color:#000}#menu .track-row select{font:inherit;background:#333;color:#eee;border:0;border-radius:6px;padding:3px;min-width:0}#menu .track-row .fixed{color:#888;padding-left:4px}#menu .track-row .mute.on{background:#ff5a1f;color:#000}#menu .punch-lab small{color:#888}#menu .lab-row{display:grid;grid-template-columns:1fr 64px 26px 26px 48px 48px 26px;align-items:center;gap:5px;margin:3px 0;border-radius:6px}#menu .lab-row canvas{width:64px;height:32px;image-rendering:pixelated;background:#000}#menu .lab-row.own span:after{content:" ●";color:#ff5a1f}#menu .lab-row.drop{outline:1px dashed #ff5a1f}#menu .lab-row button.on{background:#ff5a1f;color:#000}#menu .lab-row.tuned span:before{content:"≡ ";color:#ff5a1f}#menu .lab-tune{margin:2px 0 8px 12px;padding-left:8px;border-left:1px solid #333}#menu .lab-tune button{margin-top:4px}#menu .lab-status{color:#aaa;margin:4px 0 0;min-height:1em}#menu details{border-top:1px solid #333;padding-top:8px}#menu summary{cursor:pointer;color:#aaa}#menu ul{padding-left:16px;margin:6px 0 0}#menu li{margin:3px 0}#menu b{color:#fff}@media (max-width: 700px){#menu{left:16px;right:16px;width:auto}}