:root{
  --bg:#06080d; --panel:rgba(15,22,35,.62); --border:rgba(120,180,255,.14);
  --cyan:#22d3ee; --magenta:#e879f9; --gold:#fbbf24; --text:#e2e8f0; --dim:#64748b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;overflow:hidden;}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 30% 10%,#0a1628 0%,#06080d 60%);pointer-events:none;z-index:0;}
.glass{background:var(--panel);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);}
.mono{font-family:'JetBrains Mono',monospace;}
.glow-cyan{box-shadow:0 0 24px rgba(34,211,238,.35),0 0 4px rgba(34,211,238,.6);}
.glow-text{text-shadow:0 0 12px rgba(34,211,238,.5);}
.pulse-dot{width:8px;height:8px;border-radius:99px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.rung{transition:all .25s cubic-bezier(.2,.8,.2,1);cursor:pointer;}
.rung:hover{transform:translateX(4px);border-color:rgba(34,211,238,.4);}
.rung.active{border-color:var(--cyan);background:linear-gradient(90deg,rgba(34,211,238,.12),transparent);}
.rung.active .ring{border-color:var(--cyan);box-shadow:0 0 12px rgba(34,211,238,.6);}
.rung.locked{opacity:.5}
.seg{transition:all .2s;cursor:pointer;}
.seg.active{background:rgba(34,211,238,.15);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(34,211,238,.4);}
input[type=range]{-webkit-appearance:none;height:4px;background:rgba(148,163,184,.2);border-radius:99px;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:99px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);cursor:pointer;}
.scroll::-webkit-scrollbar{width:6px;height:6px;}
.scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:99px;}
.toast{animation:slideUp .4s cubic-bezier(.2,.8,.2,1);}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
canvas{display:block;}
.btn{transition:all .2s;border:1px solid var(--border);cursor:pointer;}
.btn:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#0ea5e9);color:#06080d;font-weight:600;border:none;cursor:pointer;}
.btn-primary:hover{filter:brightness(1.15);box-shadow:0 0 24px rgba(34,211,238,.4);}
.btn-pro{background:linear-gradient(135deg,var(--magenta),#a855f7);color:#fff;font-weight:600;border:none;cursor:pointer;}
.btn-pro:hover{filter:brightness(1.15);box-shadow:0 0 24px rgba(232,121,249,.4);}
.chip{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(34,211,238,.1);color:var(--cyan);border:1px solid rgba(34,211,238,.25);display:inline-flex;align-items:center;gap:4px;}
.chip-pro{background:rgba(232,121,249,.1);color:var(--magenta);border-color:rgba(232,121,249,.3);}
.chip-gold{background:rgba(251,191,36,.1);color:var(--gold);border-color:rgba(251,191,36,.3);}
.chip-dim{background:rgba(100,116,139,.1);color:var(--dim);border-color:rgba(100,116,139,.25);}
.modal-bg{background:rgba(4,8,16,.7);backdrop-filter:blur(8px);}
.fade-in{animation:fadeIn .35s ease-out;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ring-grad{background:conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--cyan));}