*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}:root{--bg:#03040a;--text:#eaf6ff;--accent-cyan:#22e6ff;--accent-mag:#ff2e9a;--accent-blue:#3b6dff;--accent-org:#ffb347;--muted:#9fb6c9}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.scene{--ground:0%;position:fixed;inset:0;height:100vh;width:100vw;overflow:hidden;background:linear-gradient(180deg,#0b0a18,#0d0b1e 46%,#070612 72%,#04030a);--scene-brightness:1;--neon-glow:0;--flash:0;--pulse-mult:1;--scene-speed:1;--parallax-x:0px;--parallax-y:0px}.scene .neon,.scene .neonfront{position:absolute;bottom:var(--ground);left:0;right:0;height:calc(100% - var(--ground));filter:brightness(calc(var(--scene-brightness) + var(--flash))) saturate(calc(1 + var(--neon-glow) * .5));will-change:filter,transform}.scene .neon{transform:translate(calc(var(--parallax-x) * .5),calc(var(--parallax-y) * .5))}.scene .neonfront{z-index:4}.scene .neon .facade,.scene .neon .line,.scene .neonfront .facade,.scene .neonfront .line{--halo:calc(var(--neon-glow) * 14px + var(--flash) * 10px)}.scene .facade{position:absolute;bottom:0;border-radius:2px;mix-blend-mode:screen;border:1px solid currentColor;background:color-mix(in srgb,currentColor 17%,transparent);box-shadow:0 0 16px 0 currentColor,0 0 var(--halo,0px) 0 currentColor,inset 0 0 34px color-mix(in srgb,currentColor 45%,transparent);will-change:transform,opacity}.scene .line{position:absolute;bottom:0;mix-blend-mode:screen;border-radius:3px;background:currentColor;box-shadow:0 0 9px 0 currentColor,0 0 20px 1px currentColor,0 0 var(--halo,0px) 1px currentColor;will-change:transform,opacity}.scene .neonfront .line{box-shadow:0 0 14px 1px currentColor,0 0 34px 2px currentColor,0 0 var(--halo,0px) 2px currentColor}.scene .neonfront .facade{box-shadow:0 0 22px 0 currentColor,0 0 var(--halo,0px) 0 currentColor,inset 0 0 46px color-mix(in srgb,currentColor 50%,transparent)}.scene .bokeh{filter:blur(6px);opacity:.55!important}.scene .c-cyan{color:#22e6ff}.scene .c-mag{color:#ff2a9d}.scene .c-blue{color:#3b6dff}.scene .c-org{color:#ff8a1e}@keyframes drift{0%,to{transform:translate(0)}50%{transform:translate(var(--ax,0px),var(--ay,0px))}}@keyframes pulse{0%,to{opacity:var(--omax,.9)}50%{opacity:var(--omin,.5)}}.scene .cityband{position:absolute;left:0;bottom:var(--ground);display:flex;align-items:flex-end;height:calc(100% - var(--ground));width:200%}.scene .cityband .track{display:flex;align-items:flex-end;width:50%;height:100%;justify-content:space-around}.scene .b{position:relative;background:linear-gradient(180deg,#0a0a12,#050509);border-top:1px solid rgba(120,150,210,.12)}.scene .far{filter:blur(2px);opacity:.85;animation:scroll calc(140s / var(--scene-speed)) linear infinite}.scene .near{opacity:1;animation:scroll calc(90s / var(--scene-speed)) linear infinite;z-index:2}.scene .far .track{transform:translate(calc(var(--parallax-x) * .4),calc(var(--parallax-y) * .4))}.scene .near .track{transform:translate(var(--parallax-x),var(--parallax-y))}@keyframes scroll{to{transform:translate(-50%)}}.scene .billboards{position:absolute;inset:0;pointer-events:none;overflow:hidden}.scene .billboard{position:absolute;will-change:transform,opacity}.scene .billboard:before{content:"";position:absolute;inset:-14px;z-index:-1;background:radial-gradient(closest-side,rgba(3,4,10,.6),transparent 75%);filter:blur(8px)}.scene .billboard pre{margin:0;font-family:Courier New,ui-monospace,monospace;font-size:18px;line-height:15px;white-space:pre;letter-spacing:0;color:#dde6f0;font-weight:700;text-shadow:0 0 3px var(--tint),0 0 10px var(--tint),0 0 24px var(--tint)}.scene .fog{position:absolute;top:-5%;bottom:-5%;width:32%;left:14%;mix-blend-mode:screen;z-index:0;background:linear-gradient(90deg,transparent,rgba(70,100,170,.2),transparent);filter:blur(48px) brightness(calc(var(--scene-brightness) + var(--flash) * .5));animation:fog calc(34s / var(--scene-speed)) ease-in-out infinite}.scene .fog.two{left:54%;width:36%;background:linear-gradient(90deg,transparent,rgba(150,55,140,.18),transparent);animation-duration:calc(46s / var(--scene-speed));animation-direction:reverse}@keyframes fog{50%{transform:translate(8%)}}.scene .rain{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}.scene .drop{position:absolute;width:1px;height:50px;background:linear-gradient(to bottom,#fff0,#fff);left:var(--l);top:var(--start);opacity:var(--op);animation:rainfall calc(var(--dur-base) / var(--scene-speed)) linear var(--delay) infinite}@keyframes rainfall{0%{top:var(--start);opacity:var(--op)}to{top:var(--end);opacity:0}}.scene .cityfront{position:absolute;inset:0;z-index:5;pointer-events:none}.scene .bf{position:absolute;bottom:0;background:#010106;border-top:1px solid rgba(120,150,210,.1);box-shadow:0 -1px #96b4ff0f,0 0 40px 10px #000000d9}.scene .vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 240px 70px #000000e6;z-index:7}.scene.reduce-motion .facade,.scene.reduce-motion .line,.scene.reduce-motion .far,.scene.reduce-motion .near,.scene.reduce-motion .fog,.scene.reduce-motion .drop{animation:none!important}@media (prefers-reduced-motion: reduce){.scene .facade,.scene .line,.scene .far,.scene .near,.scene .fog,.scene .drop{animation:none!important}}.knob,.xy,.keys,.wk,.bk{touch-action:none}.pad,.pad-trigger{touch-action:manipulation}.glass{position:relative;border-radius:24px;background:linear-gradient(160deg,#0a0e182e,#060a1461);border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px #ffffffc7,inset 0 0 0 1px #ffffff12,inset 0 0 26px #c8e1ff1a,0 22px 55px #0009}.glass:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 20%,transparent 80%,rgba(255,255,255,.07))}.ptitle{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#9fb6c9;margin:0 0 12px}.col{padding:20px 18px;display:flex;flex-direction:column;gap:20px}.col{gap:14px;overflow-y:auto;overflow-x:hidden}.col::-webkit-scrollbar{width:7px}.col::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:7px}.col .ptitle{margin:0 0 8px}.subpanel{display:flex;flex-direction:column;gap:9px}.subpanel+.subpanel{padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}.subrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.accordion-header{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0 0 8px;padding:0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:#9fb6c9;font-size:11px;letter-spacing:3px;text-transform:uppercase;transition:color .12s}.accordion-header:hover{color:#dffdfa}.accordion-header:focus-visible{outline:1px solid rgba(0,255,213,.55);outline-offset:3px;border-radius:4px}.accordion-label{flex:1;min-width:0}.accordion-chevron{flex:0 0 auto;font-size:10px;line-height:1;color:#7f96a9;transition:color .12s}.accordion-header:hover .accordion-chevron{color:#bfe}.accordion-body{display:flex;flex-direction:column;gap:9px;overflow:hidden;max-height:1200px;opacity:1;transition:max-height .28s ease,opacity .2s ease,margin .2s ease;will-change:max-height}.subpanel.collapsed>.accordion-body{max-height:0;opacity:0;margin:0;pointer-events:none}.col .knrow,.fxgrid .knrow{gap:10px}.col .kn,.compact .kn{width:50px;gap:5px}.col .knob,.compact .knob{width:46px;height:46px}.col .knob i,.compact .knob i{top:4px;height:15px;transform-origin:50% 17px}.col .knob:after,.compact .knob:after{top:13%}.col .kn small,.compact .kn small{font-size:8px;letter-spacing:.5px}.col .seg button{font-size:10px;padding:6px 0;border-radius:8px}.tog{font-size:11px}.topbar-brand{display:block;text-align:center;width:100%;padding:0 0 6px;white-space:nowrap}.topbar-controls{display:flex;align-items:center;gap:12px;width:100%;flex-wrap:wrap;row-gap:8px}.topbar-left{display:flex;align-items:center}.topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto}.topbar>.texturesbtn,.topbar>.fxbtn{flex-shrink:0}.topbar-controls>.texturesbtn,.topbar-controls>.fxbtn{flex-shrink:0}.master-wrap,.tempo-wrap{display:flex;align-items:center;gap:8px}.master-wrap small,.tempo-wrap small{font-size:9px;letter-spacing:1px;color:#9fb6c9;text-transform:uppercase}.tempo-wrap .bpm{font-size:15px;font-weight:700;color:#dffdfa;min-width:46px;text-align:center;text-shadow:0 0 8px rgba(0,255,213,.4)}.tapbtn{font:inherit;font-size:11px;color:#cfe;background:#ffffff12;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:7px 12px;cursor:pointer}.tapbtn:active{background:#00ffd533;border-color:#00ffd580}.tapbtn.on{background:#ffb34738;border-color:#ffb3478c;color:#fff3e3;box-shadow:inset 0 0 12px #ffb3474d}.stage{flex-direction:column;gap:12px}.arpstrip{width:min(100%,760px);display:flex;align-items:center;gap:12px;padding:9px 14px;flex-wrap:wrap}.arpstrip .ptitle{margin:0}.arpstrip .seg{flex-wrap:wrap}.arpstrip .seg button{padding:5px 9px;flex:initial}.arpstrip .field{display:flex;align-items:center;gap:6px;font-size:11px;color:#cfe}.arpstrip .num{font:inherit;width:42px;font-size:11px;color:#cfe;text-align:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:4px}.brand{font-weight:700;letter-spacing:2px;font-size:14px;color:#dffdfa;text-shadow:0 0 12px rgba(0,255,213,.6)}.preset-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.preset-select{font:inherit;font-size:12px;color:#dffdfa;cursor:pointer;line-height:1;padding:7px 26px 7px 12px;max-width:180px;background:#081016b8;background-image:linear-gradient(45deg,transparent 50%,#22e6ff 50%),linear-gradient(135deg,#22e6ff 50%,transparent 50%);background-position:calc(100% - 14px) 53%,calc(100% - 9px) 53%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;border:1px solid rgba(0,255,213,.5);border-radius:10px;box-shadow:0 0 10px #00ffd533,inset 0 0 8px #00ffd514;-webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s}.preset-select:hover{border-color:#00ffd5cc;box-shadow:0 0 14px #00ffd559}.preset-select:focus{outline:none;border-color:#00ffd5e6;box-shadow:0 0 16px #00ffd580}.preset-select option,.preset-select optgroup{background:#0a141b;color:#dffdfa}.preset-select optgroup{color:#9fb6c9;font-style:normal;font-weight:700}.preset-bar .presetnav,.preset-bar .presetbtn{padding:7px 9px;font-size:11px;min-width:30px;text-align:center}.preset-bar .presetbtn{letter-spacing:1px}.preset-bar .presetnav:hover,.preset-bar .presetbtn:hover{background:#00ffd524;border-color:#00ffd580;color:#dffdfa}.bpmnav{padding:5px 8px;font-size:11px;min-width:26px;text-align:center}.bpmnav:hover{background:#00ffd524;border-color:#00ffd580;color:#dffdfa}.knrow{display:flex;gap:14px;flex-wrap:wrap}.kn{display:flex;flex-direction:column;align-items:center;gap:7px;width:62px}.knob{width:58px;height:58px;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 28%,rgba(255,255,255,.13),rgba(255,255,255,.02) 62%,transparent);border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 3px 4px #ffffffbf,inset 0 -12px 18px #0006,inset 0 0 0 1px #ffffff0f,0 6px 16px #00000080,0 0 18px var(--kg,rgba(0,255,213,.4))}.knob:after{content:"";position:absolute;left:26%;top:14%;width:34%;height:26%;border-radius:50%;background:radial-gradient(closest-side,#fffffff2,#fff0);filter:blur(.5px);pointer-events:none}.label{display:none}.knob i{position:absolute;left:50%;top:5px;width:3px;height:19px;border-radius:3px;background:var(--kc,#22e6ff);box-shadow:0 0 8px var(--kc,#22e6ff);transform:translate(-50%) rotate(var(--rot,0deg));transform-origin:50% 22px}.kn small{font-size:9px;letter-spacing:1px;color:#aeb9c8;text-transform:uppercase}.seg{display:flex;gap:6px}.seg button{flex:1;font:inherit;font-size:11px;color:#cfe;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 0;cursor:pointer}.seg button.on{background:#00ffd52e;border-color:#00ffd573;color:#dffdfa;box-shadow:inset 0 0 12px #00ffd54d}.tog{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#cfe}.switch{width:46px;height:24px;border-radius:999px;background:#00ffd540;border:1px solid rgba(0,255,213,.4);position:relative;cursor:pointer;transition:background .15s,border-color .15s}.switch:after{content:"";position:absolute;right:3px;top:2px;width:18px;height:18px;border-radius:50%;background:#bff8ef;box-shadow:0 0 10px #00ffd5cc;transition:transform .15s,background .15s,box-shadow .15s}.switch.off{background:#ffffff14;border-color:#ffffff2e}.switch.off:after{transform:translate(-22px);background:#8090a4;box-shadow:none}.tog{cursor:pointer}.xy{aspect-ratio:1;border-radius:16px;position:relative;--glow:rgba(255,46,154,.3);background:linear-gradient(140deg,#ffffff12,#ffffff03);overflow:hidden}.xy:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/100% 25%,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/25% 100%}.xy .dot{position:absolute;width:18px;height:18px;border-radius:50%;left:62%;top:38%;background:#ff2e9a;box-shadow:0 0 16px #ff2e9a,0 0 30px #ff2e9a}.sampleoverlay{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease}.sampleoverlay.open{position:static;inset:auto;opacity:1;visibility:visible;flex:1 1 0;min-height:0;width:100%}.stage.textures-open .wave{height:80px;min-height:80px;flex:0 0 80px}.samplepanel{width:min(100%,760px);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 18px;background:#080a10e0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:inset 0 1px #ffffff8c,0 0 0 1px #ffb3472e,0 8px 32px #000000b3!important;--glow:rgba(255,179,71,.3);pointer-events:auto;transform:translateY(10px) scale(.99);transition:transform .2s ease}.sampleoverlay.open .samplepanel{transform:translateY(0) scale(1)}.samplepanel:before{display:none}.samplepanel::-webkit-scrollbar{width:7px}.samplepanel::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:7px}.samplepanel .sample-sub{margin:4px 0 0}.samplepanel .ptitle{color:#c8dff0;letter-spacing:2px}.samplepanel .pad-label{color:#ffe8cc}.samplepanel .pad-status{color:#b0c4d8}.samplepanel .sample-attr{color:#8fa5bc}.sample-banner{display:none;font-size:11px;letter-spacing:1px;color:#ffd9a8;text-transform:uppercase}.sample-banner.show{display:block}.sample-banner.err{color:#ff8d8d}.padgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.pad{position:relative;aspect-ratio:1.35;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:inherit;color:#ffe8cc;text-align:center;padding:6px;background:linear-gradient(160deg,#ffffff14,#ffffff05);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px #fff6,0 4px 12px #0006;transition:background .15s,border-color .15s,box-shadow .15s,transform .08s}.pad:active{transform:translateY(1px)}.pad:focus-visible{outline:2px solid rgba(0,255,213,.7);outline-offset:2px}.pad-label{font-size:11px;font-weight:700;letter-spacing:.4px;line-height:1.15}.pad-status{font-size:9px;letter-spacing:.5px;color:#9fb6c9;min-height:11px}.pad-trigger{appearance:none;-webkit-appearance:none;font:inherit;font-size:12px;line-height:1;width:32px;height:22px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:#ffe8cc;border:1px solid rgba(255,179,71,.5);border-radius:8px;background:#ffb3471f;transition:background .12s,border-color .12s,box-shadow .12s}.pad-trigger:hover{background:#ffb3473d;border-color:#ffb347bf}.pad-trigger:focus-visible{outline:2px solid rgba(255,179,71,.8);outline-offset:2px}.pad-trigger[disabled]{opacity:.35;cursor:default;box-shadow:none}.pad.active .pad-trigger{background:#ffb3476b;border-color:#ffb347d9;color:#fff;box-shadow:0 0 10px #ffb3478c}.pad.active{background:linear-gradient(160deg,#ffb34752,#ffb3471a);border-color:#ffb34799;color:#fff3e3;box-shadow:inset 0 0 16px #ffb34759,0 0 18px #ffb3478c}.pad.active .pad-status{color:#ffd9a8}.pad.selected{border-color:#00ffd5bf;box-shadow:inset 0 0 0 1px #00ffd58c,0 0 16px #00ffd580}.pad.active.selected{box-shadow:inset 0 0 0 1px #00ffd599,inset 0 0 16px #ffb3474d,0 0 20px #00ffd58c}.pad.loading{opacity:.5;cursor:progress}.pad.loading .pad-status{color:#9fb6c9}.pad.error{opacity:.55;cursor:not-allowed;border-color:#ff5a5a80}.pad.error .pad-status{color:#ff8d8d}.pad.empty{cursor:default;opacity:.3;background:#ffffff05;border-style:dashed}.sample-knobs,.sample-grain-knobs{justify-content:center;gap:18px}.sample-attr{margin:6px 0 0;font-size:9px;line-height:1.5;letter-spacing:.3px;color:#9fb6c9;text-align:center}.keys-wrap{display:flex;flex-direction:column;gap:0}.keys-wrap.stacked{gap:10px}.keys{position:relative;height:120px;display:flex;gap:0}.wk{flex:1;border-radius:0 0 7px 7px;position:relative;margin:0 1px;cursor:pointer;user-select:none;background:linear-gradient(180deg,#c8e6ff47,#a0c8f024 60%,#78aad238);border:1px solid rgba(255,255,255,.36);border-top:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px #fffc,inset 0 0 18px #b4dcff1a,inset 0 -6px 10px #000a1e1f,0 3px 8px #00000061;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.fx-reduced .wk,.fx-reduced .bk{backdrop-filter:none;-webkit-backdrop-filter:none}.wk:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(155deg,rgba(255,255,255,.18) 0%,transparent 22%,transparent 78%,rgba(255,255,255,.06) 100%)}.wk .k{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;color:#b4ebffe6;text-shadow:0 1px 4px rgba(0,0,0,.55),0 0 6px rgba(0,200,220,.35)}.bk{position:absolute;top:0;width:4%;height:64%;border-radius:0 0 5px 5px;z-index:4;cursor:pointer;user-select:none;background:linear-gradient(180deg,#0e1424b8,#060a16d9);border:1px solid rgba(255,255,255,.18);border-top:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px #ffffff4d,inset 0 -2px 4px #00000080,0 5px 10px #0009;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-size:9px;font-weight:700;color:#a0d2f0cc;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.wk.active{background:linear-gradient(180deg,#00ffd56b,#00d2be42 55%,#00b4a552);border-top-color:#00ffd5e6;box-shadow:inset 0 1px #00ffd5f2,inset 0 0 22px #00ffd54d,0 0 20px #00ffd5a6,0 3px 8px #00000061}.wk.active .k{color:#dffdfa;text-shadow:0 0 8px rgba(0,255,213,.9)}.bk.active{background:linear-gradient(180deg,#00c8b48c,#00786ead);border-top-color:#00ffd5d9;box-shadow:inset 0 1px #00ffd5cc,inset 0 0 14px #00ffd540,0 0 18px #00ffd5cc,0 5px 10px #00000080}.about-panel{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}.about-panel::-webkit-scrollbar{width:7px}.about-panel::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:7px}.about-panel ul{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:4px}.about-panel a{color:#22e6ff;text-decoration:none}.about-panel a:hover{text-decoration:underline}.ui{position:fixed;inset:0;z-index:20;display:grid;grid-template-columns:300px 1fr 300px;grid-template-rows:auto 1fr auto;gap:16px;padding:16px;font-family:Segoe UI,system-ui,sans-serif;color:#eaf6ff}.ui *{box-sizing:border-box}.ui>*{min-width:0}.ui .left{grid-row:1 / span 3;--glow:rgba(0,255,213,.2)}.ui .right{grid-row:1 / span 3;--glow:rgba(255,46,154,.2)}.topbar{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:0;padding:10px 16px}.stage{grid-column:2;grid-row:2;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}.wave{width:min(100%,760px);height:clamp(170px,38vh,320px);--glow:rgba(0,255,213,.3);display:flex;align-items:center;justify-content:center;padding:14px;transition:height .2s ease,flex .2s ease}.wave svg{width:100%;height:100%}.wave canvas.scope{width:100%;height:100%;display:block}.stage.textures-open{align-items:flex-start;justify-content:flex-start}.bottom{grid-column:2;grid-row:3;padding:14px 16px 16px}@media (max-width: 1100px),(max-height: 600px){.ui{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;gap:12px;padding:12px}.ui .topbar{grid-column:auto;grid-row:auto;order:1;flex:0 0 auto}.ui .stage{grid-column:auto;grid-row:auto;order:2;flex:0 0 auto;min-height:0}.ui .bottom{grid-column:auto;grid-row:auto;order:3;flex:0 0 auto}.ui .left{grid-column:auto;grid-row:auto;order:4;flex:0 0 auto}.ui .right{grid-column:auto;grid-row:auto;order:5;flex:0 0 auto}.ui .col{overflow:visible;width:100%}.wave,.arpstrip{width:100%}.topbar-controls{justify-content:center;row-gap:10px}.topbar-right{margin-left:0;flex-wrap:wrap;justify-content:center}.topbar-left{flex-wrap:wrap;justify-content:center}.preset-bar{justify-content:center}.col .knob,.compact .knob{width:58px;height:58px}.col .kn,.compact .kn{width:62px}.col .knob i,.compact .knob i{top:5px;height:19px;transform-origin:50% 22px}.seg button,.col .seg button{padding:11px 0;font-size:12px}.tapbtn{padding:10px 14px;font-size:12px}.switch{width:54px;height:28px}.switch:after{width:22px;height:22px}.switch.off:after{transform:translate(-26px)}.keys{height:150px}}@media (orientation: portrait) and (max-width: 820px){.keys-wrap.stacked .keys{height:130px}.keys-wrap.stacked .bk{width:7%}}