:root{--page-bg:#eef1f3;--panel-silver-light:#f2f3f1;--panel-silver:#c9ccca;--panel-silver-dark:#969b9c;--control-face:#d7d8d5;--control-edge:#74797b;--ink:#191b1d;--muted-ink:#555a5d;--inset-dark:#17191a;--accent-red:#d52024;--accent-red-glow:#d5202473;--panel-radius:10px;--control-radius:4px;--touch-target:44px;--room-bg:#0a0c0d;--room-bg-lift:#191e20;--room-floor:#050708;--rim-light:#ffffff8c;--bezel-light:#e4e6e4;--bezel-dark:#9ca1a1;--bezel-darker:#7f8586;--groove:#00000038;--highlight:#ffffffb3;--key-white:#f7f8f5;--key-black:#1b1e1f;--display-ink:#f0f3ef;--led-off:#3a3e3f;--led-hot:#ff8a8d;--accent-red-bloom:#d52024b3;--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");--panel-max-width:1480px;--zone-padding-block:clamp(14px, 1.6vw, 22px);--zone-padding-inline:clamp(14px, 2vw, 28px);--label-size:.6875rem;--shadow-panel:0 40px 80px -20px #000000d9, 0 12px 28px #0000008c, 0 2px 4px #00000073;--shadow-control:0 1px 1px #0000004d, 0 3px 6px #00000038;--shadow-control-inset:inset 0 1px 0 #fff9;--shadow-control-pressed:inset 0 3px 6px #00000059;--shadow-knob:0 3px 6px #00000052, 0 8px 16px -4px #00000042;--shadow-knob-lift:0 5px 9px #00000057, 0 12px 22px -4px #0000004d;--transition-fast:.12s ease;--font-condensed:"Arial Narrow", "Roboto Condensed", Inter, system-ui, sans-serif}@media (prefers-reduced-motion:reduce){:root{--transition-fast:0s;--accent-red-glow:#d5202433}}.stage{place-items:center;min-height:100vh;padding:clamp(12px,3vw,40px);display:grid;position:relative}.stage:after{content:"";pointer-events:none;background:radial-gradient(90% 75% at 50% 42%,#0000 40%,#0000008c 100%);position:fixed;inset:0}.panel-shell{width:100%;max-width:var(--panel-max-width);border-radius:calc(var(--panel-radius) + 5px);box-shadow:var(--shadow-panel), inset 0 1px 0 var(--rim-light), inset 0 -1px 0 #0009;background:linear-gradient(#dfe2e0 0%,#a9aeae 12%,#6e7476 55%,#40474a 100%);padding:7px;position:relative}.panel-shell:after{content:"";pointer-events:none;filter:blur(14px);background:radial-gradient(at 50% 0,#d2dce117,#0000 70%);height:130px;position:absolute;top:100%;left:6%;right:6%}.panel-shell__screw{z-index:1;background:radial-gradient(circle at 35% 30%,#eceeec,#9aa09e 55%,#666c6d 100%);border-radius:50%;width:11px;height:11px;position:absolute;box-shadow:inset 0 -1px 1px #00000073,inset 0 1px 1px #fff9,0 1px 2px #00000080}.panel-shell__screw:before{content:"";background:linear-gradient(90deg,#0000 42%,#0000008c 42% 58%,#0000 58%),linear-gradient(#0000 42%,#0000008c 42% 58%,#0000 58%);position:absolute;inset:2px}.panel-shell__screw--tl{top:12px;left:12px;transform:rotate(18deg)}.panel-shell__screw--tr{top:12px;right:12px;transform:rotate(-42deg)}.panel-shell__screw--bl{bottom:12px;left:12px;transform:rotate(63deg)}.panel-shell__screw--br{bottom:12px;right:12px;transform:rotate(-11deg)}.panel{border-radius:var(--panel-radius);border:1px solid var(--panel-silver-dark);background:repeating-linear-gradient(90deg, #ffffff0d 0 1px, #0000000a 1px 3px), linear-gradient(105deg, #ffffff47 0%, #ffffff0f 18%, #00000008 42%, #ffffff1f 64%, #0000000f 100%), linear-gradient(180deg, var(--panel-silver-light) 0%, var(--panel-silver) 55%, var(--panel-silver-dark) 140%);width:100%;box-shadow:inset 0 1px 0 var(--highlight), inset 0 -2px 4px #0000002e, 0 1px 2px #00000073;position:relative;overflow:hidden}.panel:before{content:"";z-index:0;pointer-events:none;background-image:var(--noise);opacity:.28;mix-blend-mode:overlay;position:absolute;inset:0}.zone{z-index:1;padding:var(--zone-padding-block) var(--zone-padding-inline);align-items:center;gap:clamp(18px,2.4vw,40px);display:flex;position:relative}.zone+.zone{border-top:1px solid var(--groove);box-shadow:inset 0 1px 0 var(--highlight), inset 0 2px 3px -2px #0000004d}.zone__divider{background:var(--groove);width:1px;box-shadow:1px 0 0 var(--highlight);align-self:stretch}.control-label{font-size:var(--label-size);letter-spacing:.12em;color:var(--ink);text-transform:uppercase;white-space:nowrap;font-weight:700}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.zone--sound{justify-content:space-between}.brand{flex-direction:column;gap:14px;display:flex}.brand__name{letter-spacing:.04em;color:var(--ink);text-shadow:0 1px 0 var(--highlight);margin:0;font-size:clamp(1.6rem,2.6vw,2.2rem);font-style:italic;font-weight:800}.waveform{flex-direction:column;gap:6px;display:flex}.knob-row{align-items:flex-start;gap:clamp(16px,2.2vw,36px);display:flex}.segmented{border-radius:var(--control-radius);border:1px solid var(--control-edge);background:linear-gradient(180deg, #0c0e0f, var(--inset-dark));box-shadow:inset 0 3px 6px #000000b3, inset 0 -1px 1px #ffffff14, 0 1px 0 var(--highlight);gap:3px;padding:3px;display:inline-flex}.segmented__option{min-height:34px;color:var(--muted-ink);font-size:var(--label-size);letter-spacing:.1em;cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:1px solid #0000;border-radius:3px;padding:0 16px;font-weight:700}.segmented__option:hover{color:var(--ink)}.segmented__option[aria-pressed=true]{background:linear-gradient(180deg, #eef0ee 0 8%, var(--bezel-light) 22%, var(--control-face) 60%, var(--bezel-dark) 100%);border-color:var(--control-edge);color:var(--ink);box-shadow:var(--shadow-control), var(--shadow-control-inset), inset 0 -2px 3px #0000002e}.knob{flex:none;justify-items:center;gap:6px;width:96px;display:grid}.knob--sm{width:80px}.knob__label{font-size:var(--label-size);letter-spacing:.1em;color:var(--ink);text-transform:uppercase;text-align:center;white-space:nowrap;font-weight:700}.knob__dial{cursor:ns-resize;touch-action:none;border-radius:50%;outline:none;width:76px;height:76px;position:relative}.knob--sm .knob__dial{width:58px;height:58px}.knob__dial:focus-visible{box-shadow:0 0 0 3px var(--accent-red-glow)}.knob__ticks{position:absolute;inset:-8px}.knob__tick{position:absolute;inset:0}.knob__tick:before{content:"";background:var(--ink);border-radius:1px;width:2px;height:8px;margin-left:-1px;position:absolute;top:0;left:50%;box-shadow:0 1px #ffffff8c}.knob__well{background:radial-gradient(circle,#0000001f 72%,#0000 100%);border-radius:50%;position:absolute;inset:-2px}.knob__body{transition:transform var(--transition-fast);border-radius:50%;position:absolute;inset:0}.knob__grip{border:1px solid var(--control-edge);box-shadow:var(--shadow-control), inset 0 -2px 4px #0000002e;transition:box-shadow var(--transition-fast);background:conic-gradient(from 210deg,#e4e6e4,#c3c7c5 18%,#e8eae8 38%,#b8bdbb 55%,#e4e6e4 74%,#c3c7c5 90%,#e4e6e4);border-radius:50%;position:absolute;inset:0}.knob__cap{background:linear-gradient(#ffffff38,#00000014);border-radius:50%;position:absolute;inset:20%;box-shadow:inset 0 1px #ffffff73,0 1px 1px #0000001f}.knob__indicator{position:absolute;inset:0}.knob__indicator:before{content:"";background:var(--ink);border-radius:1px;width:2px;height:20%;margin-left:-1px;position:absolute;top:7px;left:50%}.knob__dial.is-active .knob__indicator:before{background:var(--accent-red)}.knob__gloss{pointer-events:none;background:radial-gradient(65% 50% at 32% 20%,#ffffff73,#0000 60%);border-radius:50%;position:absolute;inset:0}.knob__dial:hover .knob__grip,.knob__dial.is-active .knob__grip{box-shadow:var(--shadow-knob), inset 0 -2px 4px #0000002e}.knob__readout{white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.04em;width:100%;height:1.1em;color:var(--muted-ink);font-size:.6875rem;line-height:1.1;display:block;overflow:hidden}.knob.is-disabled{opacity:.45}.knob.is-disabled .knob__dial{cursor:default}.zone--transport{justify-content:space-between}.control-group{flex-direction:column;align-items:center;gap:8px;display:flex}.transport-button,.panel-button,.step__button{background:linear-gradient(180deg, #eef0ee 0 6%, var(--bezel-light) 18%, var(--control-face) 55%, var(--bezel-dark) 88%, var(--bezel-darker) 100%);box-shadow:var(--shadow-control), var(--shadow-control-inset), inset 0 -2px 3px #0000002e, inset 1px 0 0 #ffffff4d, inset -1px 0 0 #0000001f;position:relative}.transport-button:after,.panel-button:after,.step__button:after{content:"";border-radius:inherit;pointer-events:none;background-image:var(--noise);opacity:.12;mix-blend-mode:overlay;position:absolute;inset:0}.transport-button{width:150px;height:var(--touch-target);border:1px solid var(--control-edge);border-radius:var(--control-radius);cursor:pointer;transition:filter var(--transition-fast), box-shadow var(--transition-fast)}.transport-button:hover{filter:brightness(1.05)}.transport-button:active,.transport-button[aria-pressed=true]{background:linear-gradient(180deg, var(--bezel-dark), var(--control-face) 70%, var(--bezel-light));box-shadow:var(--shadow-control-pressed)}.transport-button:active{transform:translateY(2px)}.led{background:radial-gradient(circle at 38% 32%, #4a4f50, var(--led-off) 70%);border:1px solid #00000073;border-radius:50%;display:inline-block;position:relative;box-shadow:inset 0 1px 2px #0000008c,0 1px #ffffff73}.led:before{content:"";pointer-events:none;background:#ffffff73;border-radius:50%;width:34%;height:30%;position:absolute;top:12%;left:22%}.led--transport{width:10px;height:10px}.led--small{width:9px;height:9px}.led.is-on{background:radial-gradient(circle at 38% 32%, var(--led-hot), var(--accent-red) 58%);box-shadow:0 0 10px 3px var(--accent-red-glow), 0 0 22px 6px var(--accent-red-bloom), inset 0 1px 1px #ffffff73}.led.is-on:before{background:#ffffffbf}.tempo-display{border-radius:var(--control-radius);border:1px solid var(--control-edge);background:repeating-linear-gradient(180deg, #ffffff08 0 1px, transparent 1px 3px), linear-gradient(180deg, #0c0e0f, var(--inset-dark));width:10.5rem;box-shadow:inset 0 3px 10px #000000d9, inset 0 -1px 2px #ffffff14, 0 1px 0 var(--highlight);justify-content:center;align-items:baseline;gap:8px;padding:10px 0;display:flex;position:relative;overflow:hidden}.tempo-display:after{content:"";pointer-events:none;background:linear-gradient(118deg,#ffffff1a 0%,#ffffff08 28%,#0000 46%);position:absolute;inset:0}.tempo-display__value{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.14em;width:2.4em;color:var(--display-ink);text-shadow:0 0 10px #f0f3ef4d;font-size:2rem;font-weight:700;display:inline-block}.tempo-display__unit{letter-spacing:.2em;color:var(--muted-ink);font-size:.85rem}.panel-button{min-width:var(--touch-target);min-height:var(--touch-target);border:1px solid var(--control-edge);border-radius:var(--control-radius);color:var(--ink);font-variant-numeric:tabular-nums;cursor:pointer;transition:filter var(--transition-fast), box-shadow var(--transition-fast);justify-content:center;align-items:center;padding:0 14px;font-size:1.05rem;font-weight:700;display:inline-flex}.panel-button:hover:not(:disabled){filter:brightness(1.06)}.panel-button:active:not(:disabled){box-shadow:var(--shadow-control-pressed);transform:translateY(2px)}.panel-button:disabled{opacity:.45;cursor:default}.panel-button:focus-visible,.transport-button:focus-visible,.segmented__option:focus-visible,.step__button:focus-visible,.key:focus-visible{outline:2px solid var(--accent-red);outline-offset:2px}.panel-button--toggle .dot{background:radial-gradient(circle at 38% 32%, #4a4f50, var(--led-off) 70%);border-radius:50%;width:9px;height:9px;box-shadow:inset 0 1px 2px #0000008c,0 1px #fff6}.panel-button--toggle[aria-pressed=true]{background:linear-gradient(180deg, var(--bezel-dark), var(--control-face) 70%, var(--bezel-light));box-shadow:var(--shadow-control-pressed)}.panel-button--toggle[aria-pressed=true] .dot{background:radial-gradient(circle at 38% 32%, var(--led-hot), var(--accent-red) 58%);box-shadow:0 0 10px 3px var(--accent-red-glow), 0 0 20px 5px var(--accent-red-bloom)}.transpose{gap:8px;display:flex}.panel-button--value{font-variant-numeric:tabular-nums;width:3.25rem;padding:0}.zone--sequencer{flex-direction:column;align-items:stretch;gap:14px;padding-top:0}.sequencer__header{margin:0 calc(-1 * var(--zone-padding-inline));padding:10px var(--zone-padding-inline);background:linear-gradient(180deg, #2b2f30, var(--inset-dark));color:var(--display-ink);font-size:var(--label-size);letter-spacing:.28em;text-transform:uppercase;box-shadow:inset 0 4px 6px -3px #000c, inset 0 -1px 0 #ffffff1a, 0 1px 0 var(--highlight);font-weight:700}.sequencer__grid{align-items:stretch;display:flex}.step-group{flex:1 1 0;justify-content:center;gap:clamp(8px,1.6vw,24px);display:flex}.step-group+.step-group{border-left:1px solid var(--groove);box-shadow:inset 1px 0 0 var(--highlight)}.step{justify-items:center;gap:5px;display:grid}.step__number{font-variant-numeric:tabular-nums;height:1em;color:var(--muted-ink);font-size:.8125rem;line-height:1}.step__button{width:var(--touch-target);height:var(--touch-target);border:1px solid var(--control-edge);border-radius:var(--control-radius);cursor:pointer;transition:filter var(--transition-fast), box-shadow var(--transition-fast)}.step__button:hover{filter:brightness(1.06)}.step__button:active{box-shadow:var(--shadow-control-pressed);transform:translateY(2px)}.step__button.is-selected,.step__button.is-selected.is-playing{box-shadow:var(--shadow-control), var(--shadow-control-inset), inset 0 -2px 3px #0000002e, inset 0 0 0 2px var(--ink)}.step__button.is-playing .step__playhead{border:2px solid var(--accent-red);box-shadow:0 0 10px 2px var(--accent-red-glow), 0 0 20px 6px var(--accent-red-bloom);border-radius:6px;position:absolute;inset:-4px}.step__dot{background:radial-gradient(circle at 38% 32%, #4a4f50, var(--led-off) 70%);border:1px solid #0006;border-radius:50%;width:8px;height:8px;position:relative;box-shadow:inset 0 1px 2px #0000008c,0 1px #fff6}.step__dot.is-on{background:radial-gradient(circle at 38% 32%, var(--led-hot), var(--accent-red) 58%);box-shadow:0 0 7px 2px var(--accent-red-glow), 0 0 16px 4px var(--accent-red-bloom)}.step__flags{white-space:nowrap;text-align:center;letter-spacing:.14em;height:.75rem;color:var(--muted-ink);font-size:.6875rem;font-weight:700;line-height:.75rem;overflow:hidden}.zone--editor{justify-content:space-between;gap:clamp(16px,2vw,36px)}.zone--editor.is-locked{opacity:.75}.editor-controls{align-items:flex-end;gap:clamp(12px,1.6vw,26px);display:flex}.editor-control{grid-template-rows:auto var(--touch-target) 9px;place-items:center;gap:6px;display:grid}.editor-control__octave{gap:8px;display:flex}.octave-meter{justify-content:center;align-items:center;gap:6px;display:flex}.keyboard{flex:480px;min-width:336px;height:132px;position:relative}.keyboard__whites{height:100%;display:flex}.keyboard__blacks{pointer-events:none;position:absolute;inset:0}.key{cursor:pointer;transition:filter var(--transition-fast);padding:0}.key__label{letter-spacing:.02em;font-variant-numeric:tabular-nums;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:.75rem;font-weight:700;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.key--white{border:1px solid var(--control-edge);background:linear-gradient(90deg, #0000001a 0 1px, transparent 1px calc(100% - 1px), #0000000f calc(100% - 1px)), linear-gradient(180deg, #fff, var(--key-white) 70%, #d9dcd6);transition:filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);border-radius:0 0 3px 3px;flex:1;position:relative;box-shadow:inset 0 -4px 6px #0000001a,inset 1px 0 #fffc,0 2px 3px #0003}.key--white:after{content:"";pointer-events:none;background:linear-gradient(#0000000a,#00000029);border-radius:0 0 3px 3px;height:7px;position:absolute;bottom:0;left:0;right:0}.key--white .key__label{color:#2b2e30}.key--white:hover:not(:disabled){filter:brightness(.96)}.key--white:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 -2px 4px #00000029,inset 0 3px 5px #00000024}.key--white.is-selected{box-shadow:inset 0 -4px 6px #0000001a, inset 1px 0 0 #fffc, 0 2px 3px #0003, inset 0 0 0 2px var(--accent-red)}.key--black{left:calc(var(--key-position) * (100% / 14) - 17px);background:linear-gradient(180deg, #4a5052 0 5%, #34393a 22%, var(--key-black) 70%, #0e1112 100%);pointer-events:auto;width:34px;height:58%;transition:filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);border:1px solid #000;border-radius:0 0 3px 3px;position:absolute;top:0;box-shadow:0 5px 9px #0000008c,inset 0 1px #ffffff1f,inset -2px 0 3px #00000080}.key--black .key__label{color:#f2f3f0;font-size:.6875rem;bottom:5px}.key--black:hover:not(:disabled){filter:brightness(1.3)}.key--black:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 4px #00000080,inset 0 2px 4px #0009}.key--black.is-selected{box-shadow:0 5px 9px #0000008c, inset -2px 0 3px #00000080, inset 0 0 0 2px var(--accent-red)}.key:disabled{cursor:default;opacity:.75}@media (width<=1100px){.zone{flex-wrap:wrap;justify-content:center}.zone--sound,.zone--transport{row-gap:20px}.sequencer__grid{flex-wrap:wrap;justify-content:center}.step-group{flex:none}.zone--editor{flex-direction:column;align-items:center}}@media (width<=640px){.zone{gap:16px}.brand__name{text-align:center}.knob-row{flex-wrap:wrap;justify-content:center}.zone__divider{display:none}.sequencer__grid{grid-template-columns:repeat(2,auto);justify-content:center;display:grid}.step-group+.step-group{box-shadow:none;border-left:none;padding-left:0}.keyboard{flex:auto;width:100%;min-width:0}.editor-controls{flex-wrap:wrap;justify-content:center}}@media (prefers-reduced-motion:reduce){.knob__body,.knob__grip,.knob__indicator,.panel-button,.transport-button,.segmented__option,.step__button,.key,.key--white,.key--black{transition:none}}:root{font-family:var(--font-condensed);color:var(--ink);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.3}*{box-sizing:border-box}body{background:var(--noise), radial-gradient(ellipse 120% 80% at 50% 8%, var(--room-bg-lift), transparent 60%), linear-gradient(180deg, var(--room-bg) 0%, var(--room-floor) 100%);background-blend-mode:soft-light, normal, normal;background-attachment:fixed;min-height:100vh;margin:0;overflow-x:hidden}button{font-family:inherit}