:root{--bg:#000;--card:#0b0b0b;--mag:#ff2bd6;--cyan:#16f2ff;--lime:#b6ff1c;--line:#1d1d1d}
html,body{background:#000;color:#e8e8e8;font-family:'JetBrains Mono',monospace;margin:0}
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.35;pointer-events:none}
#root{position:relative;z-index:1}
.title{font-family:'Rubik Mono One',sans-serif;letter-spacing:-.02em;line-height:.9;
 background:repeating-linear-gradient(90deg,var(--mag) 0 3px,transparent 3px 5px),repeating-linear-gradient(0deg,var(--cyan) 0 2px,#000 2px 4px);
 -webkit-background-clip:text;background-clip:text;color:transparent;animation:fill 6s linear infinite;background-size:200% 100%,100% 200%}
@keyframes fill{to{background-position:200% 0,0 200%}}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;transition:.2s}
.card:hover{border-color:#333;box-shadow:0 0 0 1px #ff2bd622,0 0 30px #ff2bd611}
.drop{border:2px dashed var(--cyan);animation:pulse 2s ease-in-out infinite}
.drop.over{border-color:var(--lime);background:#b6ff1c0d}
@keyframes pulse{50%{border-color:var(--mag)}}
.chip{border:1px solid #333;padding:6px 10px;border-radius:999px;font-size:12px;cursor:pointer;user-select:none;transition:.15s}
.chip.on{border-color:var(--lime);color:#000;background:var(--lime);font-weight:800}
.big{background:#000;border:2px solid var(--mag);color:#fff;font-family:'Rubik Mono One';box-shadow:0 0 24px #ff2bd666,inset 0 0 20px #16f2ff33;animation:glow 1.6s ease-in-out infinite}
.big:disabled{opacity:.4;animation:none}
@keyframes glow{50%{box-shadow:0 0 44px #ff2bd6aa,inset 0 0 30px #16f2ff66}}
input[type=range]{accent-color:var(--mag);width:100%}
.btn{border:1px solid #333;padding:6px 12px;border-radius:3px;font-size:12px}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.fadein{animation:fi .6s both}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}