:root{--bg:#06070d;--bg2:#0b0e1a;--panel:#10142400;--line:#8296dc24;--text:#d8ddf0;--dim:#7a82a6;--cyan:#22e4ff;--purple:#9b6bff;--magenta:#ff3fb4;--gold:#ffc857;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:radial-gradient(1200px 600px at 50% -10%, #14193a 0%, transparent 60%), radial-gradient(900px 500px at 90% 110%, #1a0f2e 0%, transparent 60%), var(--bg);height:100%;color:var(--text);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;margin:0;font-family:Bahnschrift,Yu Gothic UI,Segoe UI,system-ui,sans-serif}button{font:inherit;color:inherit}#app{grid-template-rows:auto auto minmax(240px,1fr) auto auto;gap:10px;max-width:1500px;min-height:100vh;margin:0 auto;padding:10px 18px 12px;display:grid}.top{justify-content:space-between;align-items:center;display:flex}.logo{letter-spacing:.32em;color:#aeb6da;align-items:center;gap:10px;font-size:14px;display:flex}.logo b{color:var(--cyan);font-weight:600}.logo-mark{background:conic-gradient(var(--cyan), var(--purple), var(--magenta), var(--gold), var(--cyan));border-radius:50%;width:18px;height:18px;box-shadow:0 0 14px #22e4ff73}.status{color:var(--dim);letter-spacing:.08em;gap:18px;font:12px/1 ui-monospace,Consolas,monospace;display:flex}.stage{min-height:0}.scope{grid-template-columns:1fr 320px;gap:12px;height:100%;display:grid}.scope-main,.scope-spec{border:1px solid var(--line);background:linear-gradient(#0e1224e6,#060810e6);border-radius:14px;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #0009}.scope canvas{width:100%;height:100%;position:absolute;inset:0}.scope-tag{letter-spacing:.2em;color:var(--dim);font:10px/1 ui-monospace,Consolas,monospace;position:absolute;top:10px;left:14px}.scope-side{grid-template-rows:1fr auto auto;gap:8px;min-height:0;display:grid}.meter{border:1px solid var(--line);background:#0b0e1a;border-radius:5px;height:10px;position:relative;overflow:hidden}.meter-bar{width:var(--level,0%);background:linear-gradient(90deg, #1fb6d0, var(--cyan) 70%, var(--gold) 92%);position:absolute;inset:0 auto 0 0}.meter.hot .meter-bar{background:linear-gradient(90deg, #1fb6d0, var(--gold) 70%, var(--magenta))}.meter-hold{top:0;bottom:0;left:var(--hold,0%);background:#fff;width:2px;position:absolute}.meter-ceil{top:0;bottom:0;left:var(--ceil,100%);background:var(--magenta);width:1px;position:absolute}.meter-text{color:var(--dim);letter-spacing:.06em;font-size:11px;line-height:1}.rack{flex-wrap:wrap;gap:10px;display:flex}.panel{border:1px solid var(--line);border-top:2px solid color-mix(in srgb, var(--accent) 70%, transparent);background:linear-gradient(#111629,#0b0e1c);border-radius:12px;flex:auto;padding:8px 12px 9px}.panel-head{align-items:center;gap:8px;min-height:22px;margin:0 0 6px;display:flex}.panel h2{letter-spacing:.22em;color:var(--accent);margin:0;font-size:10px;font-weight:600}.panel-body{align-items:flex-start;gap:14px;display:flex}.knob{--accent:var(--cyan);flex-direction:column;align-items:center;gap:3px;width:64px;display:flex}.knob-dial{cursor:ns-resize;touch-action:none;outline:none;width:56px;height:56px;position:relative}.knob-dial svg{position:absolute;inset:0;transform:rotate(135deg)}.knob-track,.knob-arc{fill:none;stroke-width:3px;stroke-linecap:round}.knob-track{stroke:#8296dc29}.knob-arc{stroke:var(--accent);filter:drop-shadow(0 0 3px var(--accent))}.knob-cap{background:radial-gradient(circle at 35% 28%,#4a5274 0%,#262b45 38%,#141829 75%,#0c0f1c 100%);border-radius:50%;position:absolute;inset:9px;box-shadow:0 5px 10px #000000b3,inset 0 1px #ffffff14,inset 0 -2px 4px #00000080}.knob-mark{background:var(--accent);width:3px;height:11px;box-shadow:0 0 6px var(--accent);border-radius:2px;margin-left:-1.5px;position:absolute;top:4px;left:50%}.knob-dial:focus-visible .knob-cap,.knob.active .knob-cap{box-shadow:0 5px 10px #000000b3, 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent)}.knob-label{letter-spacing:.14em;color:#9aa2c6;font-size:9.5px}.knob-value{color:var(--text);font-size:11px;line-height:1}.wave-row{grid-template-columns:repeat(2,54px);gap:6px;display:grid}.wave-btn{border:1px solid var(--line);color:var(--dim);letter-spacing:.12em;cursor:pointer;background:#0c1020;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:5px 0 4px;font-size:9px;display:flex}.wave-btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linejoin:round;width:28px;height:18px}.wave-btn:hover{color:var(--text)}.wave-btn.on{color:var(--cyan);border-color:color-mix(in srgb, var(--cyan) 55%, transparent);box-shadow:inset 0 0 12px #22e4ff2e}.panic{color:#ff8fd0;letter-spacing:.16em;cursor:pointer;background:#1a0d1c;border:1px solid #ff3fb466;border-radius:8px;align-self:center;padding:8px 12px;font-size:10px}.panic:hover{background:#2a1029}.keyboard{flex-direction:column;gap:6px;display:flex}.kb-bar{color:var(--dim);align-items:center;gap:8px;font-size:11px;display:flex}.kb-oct{border:1px solid var(--line);cursor:pointer;background:#0c1020;border-radius:6px;width:26px;height:22px;font-size:10px}.kb-oct-label{text-align:center;min-width:70px;color:var(--text)}.kb-hint{margin-left:auto}.kb-keys{touch-action:none;height:110px;position:relative}.key{cursor:pointer;position:absolute;top:0}.key.white{background:linear-gradient(#c9cee0,#eef1fa 70%,#d6dbea);border:1px solid #05060a;border-radius:0 0 6px 6px;height:100%;box-shadow:inset 0 -3px #00000040}.key.white span{text-align:center;color:#6a7090;width:100%;font-size:9px;position:absolute;bottom:6px}.key.black{z-index:1;background:linear-gradient(#1a1d2c,#2b3046 85%,#12141f);border-radius:0 0 4px 4px;height:62%;box-shadow:0 3px 5px #0009}.key.white.on{background:linear-gradient(#7ff0ff,#c9f9ff);box-shadow:0 0 18px #22e4ff99}.key.black.on{background:linear-gradient(#0a7d90,#22e4ff);box-shadow:0 0 14px #22e4ffb3}.start{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;background:#04050ad1;place-content:center;justify-items:center;gap:10px;display:grid;position:fixed;inset:0}.start-btn{color:var(--cyan);letter-spacing:.12em;cursor:pointer;background:#0c1426;border:1px solid #22e4ff80;border-radius:999px;padding:14px 30px;font-size:15px;box-shadow:0 0 30px #22e4ff40}.start p{color:var(--dim);margin:0;font-size:12px}.panel.osc .panel-body{flex-direction:column;gap:8px}.panel.osc.off .panel-body{opacity:.38}.power{border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);cursor:pointer;background:#0b0e1a;border-radius:50%;width:14px;height:14px;padding:0}.power.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}.panel.osc .wave-row{grid-template-columns:repeat(5,1fr);gap:4px}.panel.osc .wave-btn.on{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 55%, transparent)}.knob-row{gap:4px;display:flex}.knob.sm{width:48px}.knob.sm .knob-dial{width:42px;height:42px}.knob.sm .knob-cap{inset:7px}.knob.sm .knob-mark{height:8px;top:3px}.knob.sm .knob-label{letter-spacing:.1em;font-size:8.5px}.knob.sm .knob-value{font-size:10px}.knob.disabled{opacity:.35}.group{flex-direction:column;gap:4px;display:flex}.group+.group{border-left:1px solid var(--line);padding-left:12px}.group-label{letter-spacing:.16em;color:var(--dim);font-size:9px}.group-body{gap:4px;display:flex}.col{flex-direction:column;gap:6px;display:flex}.seg{gap:3px;display:flex}.seg-btn{border:1px solid var(--line);min-width:34px;color:var(--dim);letter-spacing:.08em;cursor:pointer;background:#0c1020;border-radius:6px;flex-direction:column;align-items:center;gap:1px;padding:4px 6px;font-size:9.5px;display:flex}.seg-btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linejoin:round;width:22px;height:14px}.seg-btn:hover{color:var(--text)}.seg-btn.on{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 55%, transparent);box-shadow:0 0 10px color-mix(in srgb, var(--accent) 18%, transparent) inset}.panel .col .seg{flex-wrap:wrap;max-width:120px}.top{gap:16px}.top .status{margin-right:4px}.master{border:1px solid var(--line);border-top:2px solid color-mix(in srgb, var(--gold) 70%, transparent);background:linear-gradient(#121730,#0b0e1c);border-radius:10px;align-items:center;gap:10px;padding:2px 10px;display:flex}.master-label{letter-spacing:.22em;color:var(--gold);font-size:10px;font-weight:600}.master .knob.sm{flex-direction:row;gap:6px;width:auto}.master .knob.sm .knob-dial{width:36px;height:36px}.master .knob.sm .knob-cap{inset:6px}.master .panic{padding:6px 10px}.panel.fx{padding:8px 12px 10px}.panel.fx.off .panel-body{opacity:.38}.panel.fx .panel-head{margin-bottom:4px}#presetbar{flex:1;justify-content:center;min-width:0;display:flex}.presetbar{flex-wrap:wrap;align-items:center;gap:6px;display:flex;position:relative}.pb-btn{border:1px solid var(--line);color:#b9c0de;cursor:pointer;white-space:nowrap;background:#0c1020;border-radius:7px;height:28px;padding:0 10px;font-size:11.5px}.pb-btn:hover:not(:disabled){color:var(--text);border-color:#8296dc59}.pb-btn:disabled{opacity:.35;cursor:default}.pb-nav{width:28px;padding:0;font-size:10px}.pb-play{color:var(--cyan);border-color:#22e4ff59;min-width:74px}.pb-play.on{background:#0a2430;box-shadow:0 0 12px #22e4ff40}.pb-select-wrap{position:relative}.pb-select{width:230px;height:30px;color:var(--text);letter-spacing:.02em;background:#10142a;border:1px solid #9b6bff73;border-radius:8px;padding:0 26px 0 10px;font-size:13px}.pb-select optgroup{color:var(--dim)}.pb-dirty{color:var(--gold);visibility:hidden;font-size:12px;position:absolute;top:6px;right:26px}.pb-dirty.on{visibility:visible}.pb-sep{background:var(--line);width:1px;height:20px;margin:0 4px}.pb-saverow{z-index:5;background:#10142a;border:1px solid #9b6bff73;border-radius:10px;gap:6px;padding:8px;display:flex;position:absolute;top:36px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0009}.pb-saverow[hidden]{display:none}.pb-name{border:1px solid var(--line);width:220px;height:28px;color:var(--text);font:inherit;background:#0b0e1a;border-radius:7px;padding:0 8px;font-size:12.5px}.pb-msg{white-space:nowrap;color:var(--cyan);pointer-events:none;z-index:6;background:#10142a;border-radius:6px;padding:3px 10px;font-size:11.5px;position:absolute;top:38px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0009}.pb-msg:empty{display:none}.pb-msg.err{color:var(--magenta)}.toolrow{border:1px solid var(--line);color:#b9c0de;background:linear-gradient(90deg,#9b6bff12,#ff3fb40a 60%,#0000);border-radius:10px;align-items:center;gap:12px;min-height:36px;padding:3px 10px 3px 4px;font-size:11.5px;display:flex}.tr-tabs{border:1px solid var(--line);background:#080b16;border-radius:8px;gap:2px;padding:2px;display:flex}.tr-tab{height:24px;color:var(--dim);letter-spacing:.2em;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:0 10px;font-size:10.5px;position:relative}.tr-tab.on{color:var(--purple);background:#1a1536}.tr-tab[data-t=auto].on{color:var(--gold)}.tr-dot{vertical-align:1px;background:#2a3050;border-radius:50%;width:6px;height:6px;margin-left:6px;display:inline-block}.tr-dot.on{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:1.6s ease-in-out infinite tr-pulse}@keyframes tr-pulse{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.tr-dot.on{animation:none}}.tr-panel{flex:1;min-width:0}.tr-panel[hidden]{display:none}.randombar,.autobar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.ab-play{color:var(--gold);border-color:#ffc85773;min-width:70px}.ab-play.on{background:#2a2210;box-shadow:0 0 12px #ffc85740}.autobar .ab-mode.on{color:var(--text);background:#241e10;border-color:#ffc85799;box-shadow:inset 0 0 8px #ffc85733}.rb-field{white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.rb-type,.rb-seed{border:1px solid var(--line);height:26px;color:var(--text);font:inherit;background:#0c1020;border-radius:7px;font-size:12px}.rb-type{padding:0 6px}.rb-seed{letter-spacing:.08em;width:84px;padding:0 8px}.rb-amount{width:96px;accent-color:var(--magenta)}.rb-amount-v{width:34px;color:var(--text);font-variant-numeric:tabular-nums}.rb-chips{gap:3px;display:inline-flex}.rb-chip,.rb-all{border:1px solid var(--line);height:24px;color:var(--dim);letter-spacing:.06em;cursor:pointer;background:#0b0e1a;border-radius:6px;padding:0 7px;font-size:10.5px}.rb-chip.on{color:var(--text);background:#1a1536;border-color:#9b6bff99;box-shadow:inset 0 0 8px #9b6bff40}.rb-all.on{color:var(--purple)}.rb-go{color:var(--magenta);border-color:#ff3fb473;font-size:12px}.rb-go:hover{box-shadow:0 0 12px #ff3fb44d}.rb-aud input{accent-color:var(--cyan);margin:0}.rb-info{text-align:right;min-width:0;color:var(--dim);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.stage{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(250px,300px);gap:8px 10px;display:grid}.display{display:contents}.disp{background:#03040a;border:1px solid #1d2340;border-radius:8px;min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #000000e6,inset 0 0 70px #000000f2,0 1px #ffffff09}.disp canvas{width:100%;height:100%;position:absolute;inset:0}.disp-wave{background:linear-gradient(#788cc829,#788cc829) 50%/100% 1px no-repeat,repeating-linear-gradient(90deg,#0000 0 calc(12.5% - 1px),#788cc812 calc(12.5% - 1px) 12.5%),repeating-linear-gradient(0deg,#0000 0 calc(25% - 1px),#788cc812 calc(25% - 1px) 25%),radial-gradient(120% 90%,#071019 0%,#03040a 70%)}.disp-glow{pointer-events:none;border-radius:inherit;opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 46px #22e4ff47,inset 0 0 2px #22e4ff80}.disp-tag{pointer-events:none;color:var(--dim);align-items:baseline;gap:10px;font-size:11px;display:flex;position:absolute;top:9px;left:12px}.disp-tag b{color:#e9fbff;letter-spacing:.02em;font-size:15px;font-weight:600}.spec-tag b{color:#d6c6ff;font-size:13px}.disp-mod{grid-template-rows:repeat(3,minmax(0,1fr));display:grid}.mm-row{min-height:0;position:relative}.mm-row+.mm-row{border-top:1px solid #151a30}.mm-tag{color:var(--dim);pointer-events:none;align-items:baseline;gap:8px;font-size:10px;display:flex;position:absolute;top:5px;left:9px}.mm-tag b{color:var(--accent);letter-spacing:.08em;font-weight:600}.sigpath{grid-column:1/-1;align-items:center;gap:6px;min-height:30px;display:flex}.sp-oscs{border:1px dashed #22e4ff2e;border-radius:7px;gap:3px;padding:2px;display:flex}.sp-block{--lv:0;border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);background:color-mix(in srgb, var(--accent) calc(var(--lv) * 30%), #080b16);height:24px;color:color-mix(in srgb, var(--accent) 45%, var(--text));font:inherit;letter-spacing:.06em;white-space:nowrap;border-radius:5px;align-items:center;gap:6px;padding:0 9px;font-size:10.5px;display:inline-flex}.sp-block i{background:var(--accent);width:6px;height:6px;opacity:calc(.25 + var(--lv) * .75);box-shadow:0 0 calc(var(--lv) * 10px) var(--accent);border-radius:50%}button.sp-block{cursor:pointer}button.sp-block:hover{border-color:color-mix(in srgb, var(--accent) 70%, transparent)}.sp-block.off{opacity:.38;background:#080b16;border-style:dashed}.sp-arrow{background:#8296dc4d;flex:6px;min-width:6px;height:1px;position:relative}.sp-arrow:after{content:"";border:3.5px solid #0000;border-left:5px solid #8296dc80;border-right:0;position:absolute;top:-3px;right:-1px}.sp-out{letter-spacing:.06em;color:#e9e4ff;flex:0 0 300px;align-items:center;gap:8px;font-size:10.5px;display:flex}.sp-out .meter{flex:1}.sp-out .meter-text{min-width:112px;color:var(--dim);white-space:nowrap;font-size:11px}.knob-ghost{fill:var(--gold);opacity:0}.knob.ghosted .knob-ghost{opacity:1;filter:drop-shadow(0 0 2px var(--gold))}.panel.osc .panel-head .wave-row{gap:3px;margin-left:auto;display:flex}.panel.osc .panel-head .wave-btn{border-radius:6px;justify-content:center;width:30px;height:22px;padding:0}.panel.osc .panel-head .wave-btn span{display:none}.panel.osc .panel-head .wave-btn svg{width:20px;height:14px}.panel-head h2{white-space:nowrap}.keyboard{flex-direction:row;align-items:stretch;gap:10px}.kb-bar{flex-direction:column;justify-content:center;align-items:stretch;gap:6px;width:118px}.kb-bar>.kb-oct-row{justify-content:space-between;align-items:center;display:flex}.kb-hint{margin:0;font-size:10px;line-height:1.45}.kb-keys{flex:1;height:92px}.key.white.lit:not(.on){background:linear-gradient(180deg, color-mix(in srgb, var(--cyan) calc(var(--vel,.8) * 55%), #c9cee0), #eef1fa 85%);box-shadow:0 0 calc(4px + var(--vel,.8) * 14px) #22e4ff80}.key.black.lit:not(.on){background:linear-gradient(180deg, #08303a, color-mix(in srgb, var(--cyan) calc(var(--vel,.8) * 80%), #1a1d2c));box-shadow:0 0 calc(4px + var(--vel,.8) * 10px) #22e4ff8c}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}@media (max-width:1439px){.top .status{display:none}.pb-select{width:190px}.pb-btn{padding:0 8px}.logo{letter-spacing:.2em}.sp-out{flex-basis:220px}}
