:root{--bg: #070a14;--bg-card: rgba(14, 19, 38, .55);--bg-card-solid: #0e1326;--line: rgba(128, 144, 210, .14);--line-bright: rgba(140, 160, 235, .3);--text-dim: #8d97b8;--text: #c3cce6;--text-bright: #eef1fb;--accent: #7c5cff;--accent-2: #19d3da;--grad: linear-gradient(135deg, var(--accent), var(--accent-2));--hot: #ff5d73;--ok: #3ddc97;--radius: 16px;--mono: ui-monospace, "Cascadia Mono", Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 55% at 18% -10%,rgba(124,92,255,.16),transparent 60%),radial-gradient(ellipse 70% 50% at 85% 110%,rgba(25,211,218,.1),transparent 60%),radial-gradient(ellipse 45% 35% at 70% 25%,rgba(64,84,180,.12),transparent 70%)}#viz{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%}#app{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:20px clamp(14px,3vw,32px) 110px;display:flex;flex-direction:column;gap:18px}#topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:8px 2px}#brand{display:flex;align-items:baseline;gap:12px}#brand-mark{align-self:center;width:14px;height:14px;border-radius:50%;background:var(--grad);box-shadow:0 0 18px #7c5cffcc}#brand h1{margin:0;font-family:Georgia,Iowan Old Style,Times New Roman,serif;font-size:21px;font-weight:600;letter-spacing:.38em;color:var(--text-bright);text-shadow:0 0 24px rgba(124,92,255,.45)}#brand-sub{font-family:Georgia,Iowan Old Style,Times New Roman,serif;font-style:italic;font-size:12px;letter-spacing:.12em;color:var(--text-dim)}#transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.big-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;border:1px solid var(--line-bright);background:linear-gradient(160deg,#7c5cff38,#19d3da1a) var(--bg-card-solid);color:var(--text-bright);font-size:15px;font-weight:650;letter-spacing:.22em;cursor:pointer;transition:box-shadow .4s ease,transform .15s ease,border-color .4s ease}.big-btn:hover{box-shadow:0 0 26px #7c5cff66}.big-btn:active{transform:scale(.97)}.big-btn:disabled{opacity:.55;cursor:wait}.big-btn.active{border-color:#19d3daa6;box-shadow:0 0 30px #19d3da59}.big-btn:focus-visible,.mini-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}#play-icon{font-size:13px}.mini-btn{padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:#7c8cc814;color:var(--text-dim);font-size:11px;letter-spacing:.08em;cursor:pointer;transition:color .2s,border-color .2s}.mini-btn:hover{color:var(--text-bright);border-color:var(--line-bright)}#debug{position:fixed;right:16px;bottom:16px;z-index:5;width:min(330px,calc(100vw - 32px));padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 40px #00000073;font-family:var(--mono);font-size:11px}.debug-head{display:flex;align-items:center;gap:8px}.debug-title{flex:1;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim)}.debug-body{margin-top:10px}.meter-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}.meter-label{width:34px;color:var(--text-dim);letter-spacing:.1em}.meter-track{position:relative;flex:1;height:10px;border-radius:5px;background:#080b16e6;border:1px solid var(--line);overflow:hidden}.meter-fill{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left center;transform:scaleX(0);background:var(--grad);transition:background .3s}.meter-fill.rms{opacity:.8}.meter-fill.hot{background:linear-gradient(90deg,var(--accent),var(--hot))}.meter-mark{position:absolute;top:-1px;bottom:-1px;width:1px;background:#ffffff59}.meter-value{width:44px;text-align:right;color:var(--text)}.debug-grid{display:grid;grid-template-columns:auto auto;gap:3px 14px;margin-top:8px;color:var(--text-dim)}.debug-grid b{font-weight:500;text-align:right;color:var(--text)}.debug-grid .ok{color:var(--ok)}.debug-grid .bad{color:var(--hot)}#resume-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#04060cc7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hidden{display:none!important}#hint{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);opacity:.7}#global-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mini-btn.ctl{padding:9px 14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;border-radius:10px}.mini-btn.ctl:disabled{opacity:.4;cursor:not-allowed}#evolve-btn:not(:disabled){border-color:#7c5cff80;color:var(--text-bright);animation:breathe 7s ease-in-out infinite}@keyframes breathe{0%,to{box-shadow:0 0 #7c5cff00}50%{box-shadow:0 0 16px #7c5cff59}}#rec-btn.rec-active{color:var(--hot);border-color:#ff5d738c;animation:rec-pulse 2.2s ease-in-out infinite;font-variant-numeric:tabular-nums}@keyframes rec-pulse{0%,to{box-shadow:0 0 #ff5d7300}50%{box-shadow:0 0 14px #ff5d7366}}#save-btn.save-failed{color:var(--hot);border-color:#ff5d738c}#stems-btn.active-mode{color:var(--accent-2);border-color:#19d3da80}#ab-wrap{display:inline-flex;align-items:center;gap:6px}#ab-wrap .mini-btn.ctl{padding:9px 11px}#ab-wrap .slot-set{color:var(--accent-2);border-color:#19d3da73}#ab-slider{width:90px;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;background:linear-gradient(90deg,#7c5cff99,#19d3da99);outline:none;cursor:ew-resize}#ab-slider:disabled{opacity:.3;cursor:default}#ab-slider::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text-bright);border:1px solid var(--line-bright);box-shadow:0 0 8px #7c5cff99}#ab-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--text-bright);border:1px solid var(--line-bright)}#ab-slider:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}.select-wrap{display:inline-flex;align-items:center;gap:7px}.select-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding:8px 26px 8px 12px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(45deg,transparent 49%,var(--text-dim) 50%,transparent 60%) no-repeat right 14px top 60%/ 5px 5px,linear-gradient(-45deg,transparent 49%,var(--text-dim) 50%,transparent 60%) no-repeat right 10px top 60% / 5px 5px,#7c8cc814;color:var(--text);font-family:var(--mono);font-size:12px;cursor:pointer}select:hover{border-color:var(--line-bright)}select:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}select option,select optgroup{background:var(--bg-card-solid);color:var(--text)}#flow{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:12px 16px;overflow-x:auto}.flow-strip{display:flex;align-items:stretch;gap:0;min-width:max-content;margin:0 auto;width:fit-content}.flow-chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:86px;padding:9px 12px 8px;border:1px solid var(--line);border-radius:12px;background:#0a0e1cb3;transition:border-color .4s,opacity .4s}.flow-chip.src{border-color:#19d3da59}.flow-chip.post{border-color:#7c5cff4d}.flow-chip.fx.bypassed{opacity:.38}.flow-chip-label{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--text-bright)}.flow-chip-sub{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}.flow-move{display:flex;gap:4px;margin-top:3px}.flow-move-btn{width:20px;height:16px;display:grid;place-items:center;font-size:8px;color:var(--text-dim);background:#7c8cc81a;border:1px solid transparent;border-radius:5px;cursor:pointer;transition:color .2s,background .2s}.flow-move-btn:hover:not(:disabled){color:var(--accent-2);background:#19d3da1f}.flow-move-btn:disabled{opacity:.25;cursor:default}.flow-move-btn:focus-visible{outline:1px solid var(--accent-2)}.flow-cable{width:40px;flex:0 0 auto;align-self:center;height:24px}.flow-cable svg{width:100%;height:100%;display:block}.cable-core{fill:none;stroke:#8ca0eb40;stroke-width:1.4}.cable-pulse{fill:none;stroke:var(--accent-2);stroke-width:1.4;stroke-dasharray:4 14;stroke-linecap:round;opacity:calc(.2 + var(--signal, 0) * .8);animation:cable-flow 2.6s linear infinite}@keyframes cable-flow{to{stroke-dashoffset:-18}}#rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:14px}.module{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px 16px 16px;transition:border-color .5s,opacity .5s;overflow:hidden}.module:before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}.module:hover{border-color:var(--line-bright)}.module.bypassed .knob-row{opacity:.35}.module-field{border-color:#19d3da4d;background:radial-gradient(ellipse 120% 90% at 0% 0%,rgba(25,211,218,.07),transparent 60%),var(--bg-card)}.module-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}.module-titles h2{margin:0;font-size:13px;font-weight:650;letter-spacing:.28em;color:var(--text-bright)}.module-tag{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}.bypass-toggle{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-dim);cursor:pointer;transition:all .3s}.bypass-toggle[aria-pressed=true]{color:var(--accent-2);border-color:#19d3da73;box-shadow:0 0 10px #19d3da2e}.bypass-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.select-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}.knob-row{display:flex;flex-wrap:wrap;gap:10px 6px;justify-content:flex-start;transition:opacity .5s}.knob{display:flex;flex-direction:column;align-items:center;width:72px;user-select:none;-webkit-user-select:none}.knob-svg{width:56px;height:56px;touch-action:none;cursor:ns-resize;border-radius:50%}.knob-svg:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}.knob-track{fill:none;stroke:#8090d22e;stroke-width:3.5;stroke-linecap:round}.knob-value{fill:none;stroke:var(--accent-2);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(25,211,218,.55));transition:stroke-dashoffset .12s linear}.knob-needle{stroke:var(--text-bright);stroke-width:2;stroke-linecap:round;transform-box:view-box;transform-origin:50% 50%;transition:transform .12s linear}.knob-cap{fill:#0b1022;stroke:#8ca0eb59;stroke-width:1}.knob.dragging .knob-cap{stroke:var(--accent-2)}.knob-label{margin-top:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}.knob-readout{font-family:var(--mono);font-size:10px;color:var(--text);min-height:14px}@media(max-width:720px){#brand-sub{display:none}#app{padding-bottom:240px}.big-btn{padding:12px 22px}#topbar,#transport{justify-content:center}.knob{width:64px}#rack{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.cable-pulse,#evolve-btn:not(:disabled),#rec-btn.rec-active{animation:none}}