@font-face{font-family:Array;src:url(/fonts/array-400.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/fonts/satoshi-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}:root{--desk: #141415;--desk-dot: #232325;--body-grey: #e2e1dc;--panel-grey: #eae9e4;--panel-lo: #d8d7d0;--edge: #c4c3ba;--well: #1c1c1e;--well-edge: #323234;--ink: #1d1d1b;--ink-soft: #6e6d66;--bone: #efeada;--bone-dim: #8f8e86;--control: #2c2c2a;--accent: #ff4d00;--accent-deep: #cc3d00;--led: #ff6a2b;--radius-lg: 10px;--radius-md: 6px;--radius-sm: 3px;--font-display: "Array", "Arial Narrow", sans-serif;--font-text: "Satoshi", system-ui, sans-serif;--font-mono: "IBM Plex Mono", monospace;--ease-snap: cubic-bezier(.2, .9, .3, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{min-height:100%}body{background-color:var(--desk);background-image:radial-gradient(var(--desk-dot) 1px,transparent 1px);background-size:24px 24px;color:var(--bone);font-family:var(--font-text);user-select:none;-webkit-user-select:none}#scrim{position:fixed;inset:0;display:grid;place-content:center;text-align:center;cursor:pointer;background:var(--desk);z-index:10;gap:.9rem}#scrim h1{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,3.8rem);font-weight:700;letter-spacing:.3em;margin-right:-.3em;color:var(--accent)}#scrim p{color:var(--bone-dim);font-family:var(--font-mono);font-size:.8rem}#scrim .scrim-help{font-size:.68rem;color:#5c5b55}#scrim.hidden{display:none}.mobile-block{position:fixed;inset:0;z-index:100;display:grid;place-content:center;text-align:center;padding:1.6rem;background:var(--desk);background-image:radial-gradient(var(--desk-dot) 1px,transparent 1px);background-size:24px 24px}.mobile-block .mb-card{max-width:22rem}.mobile-block h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,13vw,2.6rem);letter-spacing:.16em;margin-right:-.16em;color:var(--accent);margin-bottom:1.3rem}.mobile-block .mb-lead{font-family:var(--font-text);color:var(--bone);font-size:1.08rem;margin-bottom:.6rem}.mobile-block .mb-sub{font-family:var(--font-text);color:var(--bone-dim);font-size:.92rem;line-height:1.55}.mobile-block .mb-sub strong{color:var(--bone)}.mobile-block .mb-links{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}.mobile-block .mb-links a{font-family:var(--font-mono);font-size:.78rem;color:var(--accent);text-decoration:none;border:1px solid var(--well-edge);border-radius:var(--radius-sm);padding:.55rem .95rem}.mobile-block .mb-links a:hover{border-color:var(--accent)}#app{display:grid;place-items:center}html,body{height:100%;overflow:hidden}#app{height:100vh;padding:0}.device{background:var(--body-grey);border:1px solid #b5b4ab;border-radius:var(--radius-lg);box-shadow:0 1px #ffffff80 inset,0 -1px #00000014 inset,0 24px 60px -18px #000000bf;color:var(--ink);width:1180px;padding:clamp(14px,2vw,24px);display:grid;gap:clamp(10px,1.3vw,16px)}.panel{background:var(--panel-grey);border:1px solid var(--edge);border-radius:var(--radius-md);overflow:hidden}.panel-head{display:flex;align-items:center;gap:8px;padding:6px 10px 5px;border-bottom:1px solid var(--edge)}.panel-head h2{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);flex:1}.panel-head h2:before{content:"";display:inline-block;width:7px;height:7px;border-radius:1px;margin-right:8px;vertical-align:baseline;background:var(--control)}.panel-body{padding:10px 12px 12px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.knob-row{display:flex;gap:10px;align-items:flex-end}.knob{display:grid;justify-items:center;gap:3px}.knob-dial{position:relative;width:56px;height:56px;cursor:ns-resize;touch-action:none;border-radius:50%;outline:none}.knob-sm .knob-dial{width:44px;height:44px}.knob-lg .knob-dial{width:76px;height:76px}.knob-dial:focus-visible{box-shadow:0 0 0 2px var(--panel-grey),0 0 0 4px var(--accent)}.knob-arc{position:absolute;inset:0;width:100%;height:100%}.knob-arc-track,.knob-arc-fill{fill:none;stroke-width:3;stroke-linecap:butt}.knob-arc-track{stroke:#1d1d1b24}.knob-arc-fill{stroke:var(--control);stroke-dasharray:0 1000;transition:stroke .12s}.knob-cap{position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f2f1ec,#e6e5e0 55%,#d4d3cc);border:1px solid #b8b7ae;box-shadow:0 1px #ffffffb3 inset,0 2px 4px #14120c4d;transition:transform .04s linear}.knob-line{position:absolute;left:calc(50% - 1.5px);top:8%;width:3px;height:36%;border-radius:1px;background:var(--control);transition:background .12s}.knob-active .knob-line{background:var(--accent)}.knob-dial.knob-active .knob-arc-fill{stroke:var(--accent)}.knob-label{font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}.knob-readout{font-family:var(--font-mono);font-size:.62rem;font-weight:500;background:var(--well);color:var(--led);border-radius:3px;padding:1px 6px;min-width:40px;text-align:center}.seg{display:inline-flex;gap:3px;padding:3px;background:var(--panel-lo);border:1px solid var(--edge);border-radius:var(--radius-sm)}.seg-btn{font-family:var(--font-text);font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:var(--panel-grey);border:1px solid var(--edge);border-radius:2px;padding:4px 8px;cursor:pointer;box-shadow:0 1px #0000001f;transition:transform .05s var(--ease-snap)}.seg-btn:hover{color:var(--ink)}.seg-btn:active{transform:translateY(1px);box-shadow:none}.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.seg-on{background:var(--control);color:var(--bone);border-color:var(--control)}.power{width:32px;height:22px;border-radius:3px;border:1px solid var(--edge);background:var(--panel-grey);box-shadow:0 1px #0000001f;cursor:pointer;display:grid;place-items:center;transition:transform .05s var(--ease-snap)}.power:active{transform:translateY(1px)}.power:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.power-dot{width:8px;height:8px;border-radius:50%;background:#1d1d1b2e;box-shadow:0 1px 1px #00000040 inset;transition:background .12s}.power-on .power-dot{background:var(--accent);box-shadow:none}.piano-shell{background:var(--well);border:1px solid var(--well-edge);border-radius:var(--radius-md);padding:10px}.piano-2up{display:grid;gap:8px}.piano{position:relative;display:flex;height:clamp(70px,9vw,105px);touch-action:none}.key-w{flex:1;position:relative;background:var(--bone);border:1px solid #b9b2a0;border-radius:0 0 3px 3px;margin-right:2px;cursor:pointer;transition:background .05s}.key-w:last-child{margin-right:0}.key-b{position:absolute;top:0;width:7%;height:58%;background:#232325;border:1px solid #0c0c0d;border-radius:0 0 2px 2px;z-index:2;cursor:pointer}.key-w.key-down{background:var(--accent);border-color:var(--accent-deep)}.key-b.key-down{background:var(--accent-deep);border-color:var(--accent-deep)}.key-hint{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.58rem;color:var(--ink-soft);pointer-events:none}.key-b .key-hint{color:var(--bone-dim)}.key-down .key-hint{color:var(--bone)}.brand-row{display:flex;align-items:center;gap:14px;padding:2px 4px}.brand{font-size:1rem;font-weight:700;letter-spacing:.28em;margin-right:-.28em;color:var(--ink)}.brand b{color:var(--accent)}.brand-sub{font-family:var(--font-mono);font-size:.58rem;color:var(--ink-soft);flex:1}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,12px)}.device[data-layout=l] .module-grid{grid-template-columns:repeat(5,1fr)}.device[data-layout=l] .piano-2up{grid-template-columns:10fr 12fr;align-items:end}.device[data-layout=l] .manual-upper{order:2}.device[data-layout=l] .piano{width:100%!important}.device[data-layout=l] .fx-rack{grid-template-columns:repeat(6,1fr)}.device[data-layout=p] .module-grid{grid-template-columns:repeat(2,1fr)}.device[data-layout=p] .fx-rack{grid-template-columns:repeat(3,1fr)}.device[data-layout=p] .seq-grid{grid-template-columns:repeat(8,1fr)}.device[data-layout=p] .seq-strip{flex-direction:column;align-items:stretch}.device[data-layout=p] .seq-transport{justify-content:center}.device[data-layout=p] .brand-row{flex-wrap:wrap}.device[data-layout=p] .preset-slot{flex-basis:100%;flex-wrap:wrap;order:3}.device[data-layout=p] .preset-name{min-width:0;flex:1}.device[data-layout=p] .piano-row{flex-direction:column}.device[data-layout=p] .oct-ctl{flex-direction:row;justify-content:center;padding:8px}.device[data-layout=p] .oct-ctl .seg-btn{width:auto}.preset-slot{flex:1;display:flex;align-items:center;gap:8px;min-height:44px}.preset-browser{position:relative;display:flex;align-items:center;gap:6px}.preset-name{font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--led);background:var(--well);border:1px solid var(--well-edge);border-radius:3px;padding:6px 14px;min-width:220px;text-align:center;cursor:pointer}.preset-name em{font-style:normal;color:var(--bone-dim);text-transform:uppercase;font-size:.58rem;margin-right:8px}.preset-name:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.preset-list{position:fixed;z-index:50;overflow-y:auto;background:var(--well);border:1px solid var(--well-edge);border-radius:var(--radius-md);box-shadow:0 18px 40px -10px #000000b3;padding:10px;display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:2px 14px;align-content:start;width:min(720px,92vw);max-height:60vh;overflow:auto}.preset-list.hidden{display:none}.preset-cat{grid-column:1 / -1;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);margin-top:6px;border-bottom:1px solid var(--well-edge);padding-bottom:2px}.preset-item{font-family:var(--font-mono);font-size:.7rem;color:var(--bone);background:none;border:none;border-radius:2px;padding:4px 8px;text-align:left;cursor:pointer}.preset-item:hover{background:var(--well-edge)}.preset-item-on{color:var(--led)}.preset-del{background:none;border:none;color:var(--bone-dim);font-family:var(--font-mono);font-size:.68rem;margin-left:8px;cursor:pointer;padding:0 4px}.preset-del:hover{color:var(--accent)}.save-share{position:relative;display:flex;gap:6px}.save-form{position:absolute;top:calc(100% + 8px);right:0;z-index:5;display:flex;gap:6px;background:var(--well);border:1px solid var(--well-edge);border-radius:var(--radius-sm);padding:8px;box-shadow:0 14px 30px -8px #0009}.save-form.hidden{display:none}.save-input{font-family:var(--font-mono);font-size:.72rem;color:var(--bone);background:var(--desk);border:1px solid var(--well-edge);border-radius:2px;padding:5px 8px;width:170px;outline:none}.save-input:focus{border-color:var(--accent)}.rec-midi{display:flex;gap:6px}.rec-btn{display:inline-flex;align-items:center;gap:6px}.rec-dot{width:7px;height:7px;border-radius:50%;background:#1d1d1b40;transition:background .15s}.rec-live{color:var(--bone);background:var(--accent-deep);border-color:var(--accent-deep)}.rec-live .rec-dot{background:var(--bone);animation:rec-pulse 1.1s ease-in-out infinite}@keyframes rec-pulse{50%{opacity:.35}}.fx-rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(8px,1vw,12px);background:var(--panel-lo);border:1px solid var(--edge);border-radius:var(--radius-md);padding:8px}.fx-mod{background:var(--panel-grey);border:1px solid var(--edge);border-radius:var(--radius-sm);padding:8px 10px;display:grid;gap:6px;justify-items:center}.fx-mod-head{display:flex;align-items:center;justify-content:space-between;width:100%}.fx-mod-head h3{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}.fx-mod-head h3:before{content:"";display:inline-block;width:6px;height:6px;border-radius:1px;margin-right:6px;background:var(--control)}.seq-strip{display:flex;gap:12px;align-items:center;background:var(--panel-lo);border:1px solid var(--edge);border-radius:var(--radius-md);padding:8px 10px}.seq-transport{display:flex;align-items:center;gap:8px}.seq-play{min-width:52px}.seq-grid{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:4px}.seq-cell{position:relative;height:44px;border:1px solid var(--edge);border-radius:var(--radius-sm);background:var(--panel-grey);box-shadow:0 1px #0000001f;cursor:pointer;touch-action:none;display:grid;place-items:center;transition:transform .05s var(--ease-snap),background .08s}.seq-beat{border-color:#a6a59c}.seq-cell:active{transform:translateY(1px)}.seq-cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.seq-on{background:var(--control);border-color:var(--control)}.seq-note{font-family:var(--font-mono);font-size:.56rem;font-weight:500;color:var(--bone);pointer-events:none}.seq-lit{background:var(--accent);border-color:var(--accent-deep)}.seq-lit .seq-note{color:var(--bone)}.piano-row{display:flex;gap:10px;align-items:stretch}.oct-ctl{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:var(--well);border:1px solid var(--well-edge);border-radius:var(--radius-md);padding:10px 8px}.oct-ctl .seg-btn{width:100%}.oct-readout{font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--led)}.piano-slot{flex:1;display:grid}.piano-slot .piano-shell{width:100%}.toast-host{position:fixed;bottom:22px;left:50%;transform:translate(-50%);z-index:20;display:grid;gap:8px;justify-items:center}.toast{font-family:var(--font-mono);font-size:.72rem;color:var(--bone);background:var(--well);border:1px solid var(--well-edge);border-radius:4px;padding:8px 16px;box-shadow:0 10px 28px -6px #0009;opacity:0;translate:0 8px;transition:opacity .25s,translate .25s var(--ease-snap)}.toast-in{opacity:1;translate:0 0}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}