*{box-sizing:border-box;margin:0;padding:0}:root{--panel: #26231e;--panel-2: #1c1a16;--plate: #1a1814;--plate-edge: #0e0d0a;--ink: #d8d2c4;--ink-dim: #8d8778;--accent: #e8862a;--accent-dim: #94551c}html,body,#root{height:100%}body{background:radial-gradient(ellipse at 50% 0%,#34302a,#14120e 75%);font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:auto}.app{min-height:100%;display:flex;padding:18px;gap:10px;max-width:1180px;margin:0 auto}.cheek{width:26px;min-width:26px;border-radius:6px;background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 2px,transparent 2px 7px),linear-gradient(90deg,#2c1d10,#55381e 45%,#3a2413);background-color:#4a2f19;box-shadow:inset 0 0 6px #0009,0 3px 10px #00000080}.app-body{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.preset-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 14px;background:linear-gradient(180deg,#2e2a24,#201d18);border:1px solid var(--plate-edge);border-radius:6px;box-shadow:inset 0 1px #ffffff0d,0 2px 8px #0006}.preset-brand{display:flex;flex-direction:column;line-height:1.1;margin-right:4px}.brand-name{font-size:22px;font-weight:800;letter-spacing:3px;color:var(--accent);text-shadow:0 1px 2px rgba(0,0,0,.7)}.brand-sub{font-size:8px;letter-spacing:2.6px;color:var(--ink-dim)}.preset-groups{display:flex;gap:14px;flex-wrap:wrap;flex:1}.preset-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.preset-cat{font-size:9px;letter-spacing:1.5px;color:var(--accent);border-bottom:1px solid var(--accent-dim);padding-bottom:1px;margin-right:2px}.preset-chip{background:linear-gradient(180deg,#3a352d,#23201b);border:1px solid #0e0d0a;color:var(--ink);font-size:10.5px;padding:3px 8px;border-radius:3px;cursor:pointer}.preset-chip:hover{border-color:var(--accent-dim)}.preset-chip.active{background:linear-gradient(180deg,#b96a22,#8f4d15);color:#fff;box-shadow:0 0 0 1px #e8862a66}.preset-user-wrap{display:inline-flex;align-items:center}.preset-del{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:12px;padding:0 2px}.preset-del:hover{color:#e05c4a}.preset-save-btn,.preset-save button{background:linear-gradient(180deg,#3a352d,#23201b);border:1px solid var(--accent-dim);color:var(--accent);font-size:10px;letter-spacing:1px;padding:5px 10px;border-radius:3px;cursor:pointer}.preset-save{display:flex;gap:6px}.preset-save input{background:#14120e;border:1px solid #4a453d;color:var(--ink);font-size:11px;padding:4px 8px;border-radius:3px;width:130px;outline:none}.preset-save input:focus{border-color:var(--accent-dim)}.panel{background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2b2822 0%,var(--panel) 45%,#1e1b17 100%);border:1px solid #100e0b;border-radius:8px;padding:12px;box-shadow:inset 0 1px #ffffff0f,inset 0 -2px 8px #00000073,0 6px 22px #00000080;display:flex;flex-direction:column;gap:10px}.panel-row{display:flex;gap:10px;align-items:stretch}.section{background:linear-gradient(180deg,#201d18,var(--plate));border:1px solid var(--plate-edge);border-radius:5px;box-shadow:inset 0 1px #ffffff0a;padding:6px 10px 10px;flex:1;display:flex;flex-direction:column}.section-title{text-align:center;font-size:9px;letter-spacing:2.4px;color:var(--ink-dim);border-bottom:1px solid #35312a;padding:3px 0 5px;margin-bottom:8px;text-transform:uppercase}.section-body{flex:1;display:flex;gap:8px;justify-content:space-around;align-items:flex-start}.sec-controllers .section-body{align-items:center;gap:14px}.sec-oscbank{flex:2.4}.sec-modifiers{flex:1.6}.sec-modifiers .section-body{align-items:center;gap:14px}.sec-output{flex:1.4}.sec-output .section-body{align-items:center;justify-content:center;gap:18px}.sec-env .section-body{position:relative;gap:16px;align-items:center}.knob{display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none}.knob-svg{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}.knob-label{font-size:8.5px;letter-spacing:1.2px;color:var(--ink-dim);margin-top:2px;text-align:center;white-space:nowrap}.knob-value{font-size:9px;color:var(--accent);font-variant-numeric:tabular-nums;min-height:11px;text-align:center;white-space:nowrap}.knob-spacer{width:46px}.toggle{width:30px;height:15px;border-radius:8px;position:relative;cursor:pointer;background:linear-gradient(180deg,#141210,#2a2721);border:1px solid #0b0a08;box-shadow:inset 0 1px 3px #0009;margin:6px auto 0}.toggle-nub{position:absolute;top:1px;left:1px;width:18px;height:11px;border-radius:6px;background:linear-gradient(180deg,#c8c2b4,#8d8778);transition:transform .08s ease;box-shadow:0 1px 2px #00000080}.toggle.on .toggle-nub{transform:translate(10px);background:linear-gradient(180deg,#f0b26a,#d07a22)}.segmented{display:flex;margin:4px 0;border:1px solid #0b0a08;border-radius:3px;overflow:hidden;background:#141210;justify-content:center}.seg{background:linear-gradient(180deg,#34302a,#201d18);color:var(--ink-dim);border:none;border-right:1px solid #0b0a08;font-size:9px;padding:3px 6px;cursor:pointer;letter-spacing:.5px}.seg:last-child{border-right:none}.seg:hover{color:var(--ink)}.seg.active{background:linear-gradient(180deg,#c47a2e,#96571a);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}.wave-select{display:flex;flex-direction:column;gap:3px;margin:2px 0 4px}.wave-btn{width:42px;height:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#2a2721,#1a1814);border:1px solid #0b0a08;border-radius:3px;color:var(--ink-dim);cursor:pointer}.wave-btn:hover{color:var(--ink)}.wave-btn.active{color:var(--accent);border-color:var(--accent-dim);background:linear-gradient(180deg,#33291c,#20180f);box-shadow:inset 0 0 5px #e8862a40}.osc-col{display:flex;flex-direction:column;align-items:center;padding:0 8px;border-right:1px solid #35312a}.osc-col:last-child{border-right:none}.osc-head{font-size:9px;letter-spacing:2px;color:var(--accent);margin-bottom:4px}.osc-knobs{display:flex;gap:4px}.ctl-col{display:flex;flex-direction:column;align-items:center;gap:3px}.ctl-label{font-size:8px;letter-spacing:1.4px;color:var(--ink-dim);margin-top:4px}.attack-label{position:absolute}.release-note{position:absolute;bottom:2px;right:8px;font-size:7.5px;color:#6b6558;letter-spacing:1px}.flt-col{display:flex;flex-direction:column;align-items:center}.mixer-col{display:flex;flex-direction:column;gap:6px}.wheels{display:flex;gap:10px;align-items:flex-end}.modwheel-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}.modwheel{width:14px;height:74px;border-radius:7px;position:relative;cursor:ns-resize;touch-action:none;background:linear-gradient(90deg,#141210,#2c2923,#141210);border:1px solid #0b0a08;box-shadow:inset 0 1px 4px #000000b3}.modwheel.pitch:after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:#e8862a8c;pointer-events:none}.modwheel-thumb{position:absolute;left:1px;width:10px;height:22px;border-radius:5px;background:linear-gradient(180deg,#c8c2b4,#6b6558);box-shadow:0 1px 3px #0009;transition:bottom .03s linear}.modwheel.pitch .modwheel-thumb{transition:none}.modwheel-label{font-size:8px;letter-spacing:1.4px;color:var(--ink-dim)}.midi-zone{display:flex;align-items:center;gap:6px;min-width:0}.midi-dot{width:8px;height:8px;border-radius:50%;flex:none;border:1px solid #0b0a08;background:#3a352d}.midi-dot.on{background:radial-gradient(circle at 35% 30%,#b7e07a,#5a9a2a);box-shadow:0 0 7px #8cc850b3}.midi-dot.idle{background:radial-gradient(circle at 35% 30%,#8d8778,#565248)}.midi-dot.off{background:#2a1512}.midi-text{font-size:9px;color:var(--ink-dim);letter-spacing:.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}.preset-save-btn.panic{color:#e05c4a;border-color:#6b2a20}.output-col{display:flex;flex-direction:column;align-items:center;gap:8px}.power-led{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a2020,#2a0d0d);border:1px solid #0b0a08;box-shadow:inset 0 1px 2px #0009}.power-led.lit{background:radial-gradient(circle at 35% 30%,#ffb35c,#d1651a 60%,#7c3c0f);box-shadow:0 0 10px #e8862acc,inset 0 1px 2px #fff6}.scope-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}.scope{background:#0d0c0a;border:2px solid #0b0a08;border-radius:4px;box-shadow:inset 0 0 8px #000c}.scope-label{font-size:7.5px;letter-spacing:2px;color:var(--ink-dim)}.scope-stack{display:flex;flex-direction:column;align-items:center;gap:2px}.latency{font-size:8px;letter-spacing:.5px;color:#6b6558;font-variant-numeric:tabular-nums;min-height:10px}.kbd-zone{display:flex;flex-direction:column;gap:6px}.kbd-info{display:flex;justify-content:space-between;padding:0 4px}.kbd-oct{font-size:10px;color:var(--accent);letter-spacing:1px}.kbd-help{font-size:9.5px;color:var(--ink-dim);letter-spacing:.6px}.keyboard{display:flex;height:110px;background:linear-gradient(180deg,#171511,#0d0c0a);border:1px solid #0b0a08;border-radius:0 0 6px 6px;padding:0 6px 8px;box-shadow:inset 0 3px 8px #00000080;touch-action:none}.wk-wrap{flex:1;position:relative}.wk{position:absolute;top:4px;right:1px;bottom:0;left:1px;background:linear-gradient(180deg,#efe9da,#d9d2c0 85%,#b3ab97);border:1px solid #8d8778;border-radius:0 0 4px 4px;box-shadow:inset 0 -4px 6px #0000001f;display:flex;align-items:flex-end;justify-content:center}.wk.active{background:linear-gradient(180deg,#e8b06a,#d08a35);box-shadow:inset 0 0 8px #783c0080}.wk-name{font-size:8px;color:#6b6558;padding-bottom:4px}.bk{position:absolute;z-index:2;top:4px;left:62%;width:74%;height:62%;background:linear-gradient(180deg,#3a3730,#14120f 70%,#0a0908);border:1px solid #000;border-radius:0 0 3px 3px;box-shadow:0 3px 4px #0000008c,inset 0 1px #ffffff1f}.bk.active{background:linear-gradient(180deg,#c47a2e,#7c4a12)}.power-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:radial-gradient(ellipse at center,#1e1b16e0,#080706f5);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.power-box{text-align:center}.power-title{font-size:64px;font-weight:800;letter-spacing:10px;color:var(--accent);text-shadow:0 2px 18px rgba(232,134,42,.35),0 1px 2px rgba(0,0,0,.8)}.power-sub{font-size:11px;letter-spacing:6px;color:var(--ink-dim);margin:8px 0 36px}.power-btn{font-size:16px;letter-spacing:3px;font-weight:700;color:#fff;padding:14px 42px;border-radius:6px;cursor:pointer;background:linear-gradient(180deg,#d67927,#9c5614);border:1px solid #6b3a0c;box-shadow:0 4px 18px #d6792766,inset 0 1px #ffffff4d}.power-btn:hover{filter:brightness(1.1)}.power-btn:active{transform:translateY(1px)}.power-hint{margin-top:16px;font-size:10px;color:var(--ink-dim);letter-spacing:1px}.power-error{margin-top:10px;font-size:11px;color:#e05c4a;max-width:340px;word-break:break-word}@media(max-width:1000px){.app{flex-wrap:wrap}.cheek{display:none}.panel-row{flex-wrap:wrap}.section{min-width:300px}}