:root{color-scheme:light;--paper: #eeede9;--silver: #d9dbda;--ivory: #eeebd8;--charcoal: #252725;--surface: var(--paper);--ink: var(--charcoal);--muted: #686b66;--line: #d1d1ca;--key-gray: #b8bab8;--key-yellow: #edbd43;--key-red: #df554c;--oled: #d4e6df;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono: "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}input,textarea,[contenteditable=true]{user-select:text;-webkit-user-select:text}button,input,select{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #886320;outline-offset:5px}.pad:focus-visible,.function:focus-visible,#stick:focus-visible,[data-direction]:focus-visible{outline:3px solid #886320;outline-offset:3px;filter:brightness(1.06)}a{color:inherit;text-underline-offset:4px}main{max-width:1160px;margin:auto;padding:0 48px}.page-header{display:flex;justify-content:space-between;align-items:center;padding:32px 0;font-size:12px}h1{font-size:15px;letter-spacing:-.04em;margin:0;font-weight:750}h1 span{color:var(--muted);font-weight:400;margin-left:12px;letter-spacing:0}.page-header a{text-decoration:none;color:var(--muted)}.instrument-stage{padding:clamp(32px,7vh,80px) 0 58px}.instrument{position:relative;width:min(100%,900px);aspect-ratio:900 / 540;margin:auto;container-type:inline-size;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:none}.instrument button,.instrument input{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.shell{position:absolute;inset:0;border-radius:3.2cqw;background:linear-gradient(110deg,#c1c4c3,#f4f4ef 6%,#bfc2c0 96%,#969b98);border:1px solid #acb0ac;padding:1.1cqw 1.15cqw 2cqw;box-shadow:0 1.2cqw 0 -.1cqw #aaaeaa,0 1.35cqw .2cqw -.1cqw #898e88,0 1.8cqw 1.5cqw -.5cqw #575b5545,0 5cqw 6cqw -2cqw #55594a50,inset 0 2px 2px #fff}.faceplate{position:relative;height:100%;border:1px solid #959c9660;border-radius:2.25cqw;background:linear-gradient(115deg,#f2f3ed,#e6e8e1 30%,#d7dbd5);box-shadow:inset 0 1px 2px #fff,0 1px 1px #fff9}.faceplate:after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.09;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}.edge{position:absolute;inset:-1cqw 0 auto;height:2cqw}#power{position:absolute;z-index:1;left:8%;width:3.3cqw;height:2.3cqw;min-height:14px;border:1px solid #93483a;border-radius:.4cqw;background:repeating-linear-gradient(90deg,#d35546 0 3px,#b7463b 3px 4px)}.jack,.usb{position:absolute;top:.3cqw;background:#343835;box-shadow:inset 0 1px 2px #000}.jack{left:38%;width:2.2cqw;height:1.3cqw;border-radius:50%}.usb{left:45%;width:4cqw;height:1cqw;border-radius:.3cqw}.wordmark{position:absolute;top:5.5%;left:5.4%;font-family:"Arial Black",var(--font);font-size:3.7cqw;font-weight:950;letter-spacing:-.2cqw;color:#1d2220}.speaker{position:absolute;width:22cqw;height:22cqw;left:3.5%;top:20%}.speaker i{position:absolute;width:.8cqw;height:.8cqw;border-radius:50%;background:#293027;box-shadow:inset 0 .12cqw .1cqw #111,0 .08cqw .08cqw #ffffed;transform:translate(-50%,-50%)}.joystick-base{position:absolute;left:7.3%;top:64%;width:14cqw;height:14cqw}.direction-dots{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#343a32 0 30%,transparent 34%) center top / 1.2cqw 1.2cqw no-repeat}.direction-dots:before{content:"";position:absolute;left:50%;top:50%;width:.65cqw;height:.65cqw;background:#343a32;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 -6.4cqw #343a32,4.5cqw -4.5cqw #343a32,6.4cqw 0 #343a32,4.5cqw 4.5cqw #343a32,0 6.4cqw #343a32,-4.5cqw 4.5cqw #343a32,-6.4cqw 0 #343a32,-4.5cqw -4.5cqw #343a32}#stick{position:absolute;inset:15%;border-radius:50%;border:.25cqw solid #b9b8a1;background:radial-gradient(ellipse at 50% 25%,#d9d7bf,#e8e5ce 53%,#f7f3dc 64%,#c3bfa5 72%,#908c72);box-shadow:0 .9cqw .3cqw -.05cqw #34392d,0 1.3cqw 1.3cqw #3a3c304a,inset 0 .2cqw .2cqw #fff9;touch-action:none;transform:translate(var(--jx, 0),var(--jy, 0))}#stick.pressed{margin-top:.35cqw;box-shadow:0 .45cqw .2cqw #34392d,0 .6cqw .8cqw #3a3c304a}.model-mark{position:absolute;left:4.2%;bottom:3%;width:23%;text-align:center;font-size:1.05cqw;line-height:1.4;font-weight:500;letter-spacing:-.01em}.model-mark b{font-weight:700}.wheel-housing{position:absolute;left:-2.2cqw;top:46%;width:2.3cqw;height:9.5cqw;border-radius:.6cqw;background:#242b23;box-shadow:inset 0 0 4px #000;padding:.6cqw .3cqw}#wheel{appearance:none;writing-mode:vertical-lr;direction:rtl;width:1.7cqw;height:8.3cqw;margin:0;background:repeating-linear-gradient(0deg,#333a30 0 .3cqw,#7a8172 .3cqw .5cqw,#505846 .5cqw .7cqw);border-radius:.3cqw;cursor:ns-resize}#wheel::-webkit-slider-thumb{appearance:none;width:1.7cqw;height:1cqw;background:#b9bca7;border:1px solid #565c4d;border-radius:2px}#wheel::-moz-range-thumb{width:1.7cqw;height:1cqw;background:#b9bca7;border:1px solid #565c4d}.oled{position:absolute;top:5.4%;left:30.6%;width:15%;height:23%;padding:1cqw;border:.65cqw solid #242a26;border-radius:1cqw;background:#101413;color:var(--oled);box-shadow:0 1px 1px #fff,inset 0 0 1cqw #000;font-family:var(--mono);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.oled>div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#oledPixels{position:absolute;width:90%;height:auto;aspect-ratio:2;top:50%;left:5%;transform:translateY(-50%);image-rendering:pixelated;background:#101413}.oled-top,.oled-bottom{display:flex;justify-content:space-between;font-size:.8cqw;white-space:nowrap}#displayMain{font-size:3.5cqw;line-height:1.1;font-weight:600;letter-spacing:-.15cqw;white-space:nowrap}#displayMain.long{font-size:1.5cqw;letter-spacing:-.04cqw;white-space:normal;overflow-wrap:anywhere}#displayDetail{font-size:.85cqw;white-space:nowrap;overflow:hidden}#displayTracks{display:flex;gap:.3cqw}#displayTracks i{width:.6cqw;height:.6cqw;border:1px solid var(--oled);border-radius:50%}#displayTracks i.filled{background:var(--oled)}.function-keys{position:absolute;top:5.4%;left:47.5%;right:3.7%;height:23%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.35cqw}.function{--cap: var(--key-gray);display:grid;place-items:center;min-height:0;min-width:0;background:linear-gradient(145deg,#ffffff35,transparent 60%),var(--cap);border:1px solid #787c6b50;border-radius:1.1cqw;box-shadow:0 .6cqw #74776b,0 .9cqw .8cqw #2e342c35,inset 0 .2cqw .2cqw #ffffff80,inset -.25cqw -.3cqw .4cqw #00000015;padding:0;touch-action:none}.function.sound{--cap: var(--key-yellow)}.function.mode{--cap: var(--key-red)}.function svg{width:45%;height:55%;fill:none;stroke:#f9f9ed;stroke-width:3;stroke-linejoin:round;stroke-linecap:square;filter:drop-shadow(0 1px 0 #0001)}.function.active{filter:brightness(1.045) saturate(1.02)}.function.pressed{transform:translateY(.4cqw);box-shadow:0 .2cqw #74776b,inset 0 1px 2px #fff6}.chord-keys{position:absolute;inset:32% 3.7% 5% 30.6%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:31% 1fr;gap:1.4cqw 1.1cqw}.pad{position:relative;grid-column:span 2;background:linear-gradient(140deg,#f5f2de,#ece9d4 55%,#dedcc7);border:1px solid #b3b49b;border-radius:1cqw;box-shadow:0 .65cqw #a3a58f,0 .95cqw .65cqw #36422c40,inset .25cqw .25cqw .3cqw #ffffef,inset -.3cqw -.4cqw .4cqw #aaad964a;touch-action:none;padding:0}.pad:before{content:"";position:absolute;inset:.9cqw .85cqw .7cqw;border-right:1px solid #a9ab9140;border-bottom:1px solid #a9ab9140;border-radius:.3cqw;box-shadow:1px 1px #ffffe899}.pad.upper{grid-column:calc(var(--column) * 4 - 3) / span 4;grid-row:1}.pad.lower{grid-column:calc(var(--column) * 3 - 2) / span 3;grid-row:2}.pad.held{translate:0 .45cqw;box-shadow:0 .2cqw #a3a58f,0 .4cqw .4cqw #36422c30,inset .2cqw .2cqw .3cqw #ffffef;background:linear-gradient(140deg,#e6e3cb,#dfddc6)}.pad span{position:absolute;bottom:1.5cqw;left:0;right:0;font:1.5cqw var(--mono);color:#626953;opacity:0}.show-labels .pad span{opacity:1}.mic{position:absolute;left:25%;bottom:4%;width:.65cqw;height:.65cqw;background:#3f473b;border-radius:50%;box-shadow:0 1px 1px #fff}.powered-off .oled{color:transparent}.powered-off #displayTracks{visibility:hidden}.powered-off #power{background:#8c6a61}.performance-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;padding:16px 0}.performance-bar p{margin:0;color:var(--muted)}.label-toggle{display:flex;gap:8px;align-items:center;color:var(--muted);white-space:nowrap}.landscape-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;background:#f6f5ef;color:var(--muted);font-size:11px;padding:8px 10px}.landscape-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}input[type=checkbox],input[type=range]{accent-color:#69735c}.keyboard-guide{display:flex;gap:24px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:11px;padding:12px 0 32px}.keyboard-guide span{display:flex;gap:4px;align-items:center}.keyboard-guide button{margin-left:auto;border:0;background:none;color:var(--muted);font-size:11px;padding:8px 0}kbd{display:inline-block;padding:3px 5px;border:1px solid #cecec5;border-bottom-width:2px;border-radius:4px;font:10px var(--mono);color:#6a6e62;background:#f6f5ef}.companion{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}summary{cursor:pointer;padding:22px 0;font-size:13px;font-weight:600}summary span{margin-left:16px;font-size:12px;font-weight:400;color:var(--muted)}.companion-content{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;padding:12px 0 40px}h2{font-size:16px;letter-spacing:-.02em;margin:0 0 20px}h3{font-size:12px;margin:24px 0 12px}h3 span{color:var(--muted);float:right;font-weight:400}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fields label,.loop-toolbar label{display:flex;flex-direction:column;gap:8px;font-size:11px;color:var(--muted)}select,.companion button{border:1px solid #c9cbc1;background:#f6f5f0;min-height:38px;border-radius:6px;padding:8px 10px;font-size:12px;color:var(--ink)}select{width:100%}input[type=range]{width:100%;min-height:30px}input[type=file]{width:100%;font-size:11px}.effects{display:grid;grid-template-columns:1fr 1fr;gap:8px}.effects button{display:flex;justify-content:space-between;gap:8px;text-align:left}.effects button span{color:var(--muted);font:10px var(--mono)}.effects button[aria-pressed=true]{background:#e0e4d6;border-color:#8b9678}.sound-fields{margin-top:16px}.note{font-size:12px;color:var(--muted);line-height:1.65}.preset-row,.button-row{display:flex;gap:8px}.preset-row select{width:72px}#midiOutput{margin-top:8px}.direction-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.direction-controls button{touch-action:none}.direction-controls button span{display:block;font-size:10px;color:var(--muted);margin-top:4px}.loop-section{grid-column:1 / -1}.loop-toolbar{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.loop-tracks{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:16px}.loop-track{border:1px solid var(--line);border-radius:8px;padding:12px}.loop-track.selected{border-color:#79836a}.loop-track button{width:100%}.loop-track p{font:10px var(--mono);color:var(--muted);margin:10px 0}.loop-track input{width:100%}.sequence{display:grid;grid-template-columns:repeat(16,1fr);gap:5px;margin-bottom:12px}.sequence button{padding:0;min-width:0;font:11px var(--mono)}.sequence .filled{background:#e6dfba}.sequence .current{outline:2px solid #79836a;outline-offset:1px}.guide{grid-column:1 / -1}.guide dl{display:grid;grid-template-columns:180px 1fr;gap:12px 24px;font-size:12px;line-height:1.7}.guide dt{font-weight:600}.guide dd{margin:0;color:var(--muted)}footer{padding:24px 0 32px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between}@media(hover:hover){.pad:hover{filter:brightness(1.025)}.companion button:hover{border-color:#7e8772}.function:hover{filter:brightness(1.04)}}@media(max-width:700px){main{padding:0 24px}.page-header{padding:24px 0}h1 span{display:block;margin:4px 0 0;font-size:11px}.instrument-stage{padding:64px 0 48px}.keyboard-guide{gap:12px}.keyboard-guide button{margin-left:0}.companion-content{grid-template-columns:1fr;gap:32px}summary span{display:block;margin:8px 0 0 15px}.loop-tracks{grid-template-columns:repeat(3,1fr)}.sequence{grid-template-columns:repeat(8,1fr)}.guide dl{grid-template-columns:1fr;gap:4px}.guide dd{margin-bottom:12px}footer{gap:16px;line-height:1.6}footer span{text-align:right}.performance-bar{align-items:start;font-size:11px}.companion button,select{min-height:44px}.loop-toolbar{display:grid;grid-template-columns:1fr 1fr}}html:fullscreen{background:var(--surface)}html:fullscreen main{width:100%;max-width:none;min-height:100dvh;padding:0}html:fullscreen .page-header,html:fullscreen .performance-bar,html:fullscreen .keyboard-guide,html:fullscreen .companion,html:fullscreen footer{display:none}html:fullscreen .instrument-stage{display:grid;min-height:100dvh;padding:0;place-items:center}html:fullscreen .instrument{width:min(100vw,166.6667dvh)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}