:root{--bg:#0e0d12;--panel:#18161f;--line:#2c2836;--flame:#ff6b2b;--pink:#ff2b8a;--cyan:#2bd9ff;--text:#ece6d9}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Mono',monospace;
background-image:radial-gradient(circle at 15% -10%,rgba(255,107,43,.18),transparent 40%),radial-gradient(circle at 100% 110%,rgba(255,43,138,.14),transparent 45%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px);min-height:100vh}
.display{font-family:'Unbounded',sans-serif}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.btn{border:1px solid var(--line);background:#221f2b;border-radius:9px;padding:6px 10px;font-size:12px;transition:transform .12s,border-color .12s,background .12s;cursor:pointer;color:var(--text)}
.btn:hover{transform:translateY(-1px);border-color:var(--flame)}
.btn.on{background:var(--flame);color:#140a04;border-color:var(--flame);font-weight:600}
.btn.pink{background:linear-gradient(135deg,var(--pink),var(--flame));color:#fff;border:none;font-weight:600}
.tool{width:52px;height:52px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--line);background:#1d1a25;cursor:pointer;transition:.15s;color:var(--text)}
.tool small{font-size:8px;margin-top:2px;letter-spacing:.05em;text-transform:uppercase}
.tool.on{border-color:var(--flame);box-shadow:0 0 0 2px rgba(255,107,43,.35),0 0 18px rgba(255,107,43,.35);color:var(--flame)}
input[type=range]{width:100%;accent-color:var(--flame)}
.lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.6}
.stage{border-radius:12px;transition:box-shadow .2s}
.stage.edit{box-shadow:0 0 0 2px var(--flame),0 0 30px rgba(255,107,43,.3)}
.thumb{flex:0 0 auto;width:84px;border-radius:7px;border:2px solid transparent;cursor:pointer;opacity:.75}
.thumb.on{border-color:var(--flame);opacity:1}
.spin{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.scroll::-webkit-scrollbar{height:6px;width:6px}.scroll::-webkit-scrollbar-thumb{background:#3a3446;border-radius:4px}
.fxcard{border:1px solid var(--line);border-radius:10px;padding:8px 4px;font-size:11px;text-align:center;cursor:pointer;background:#1f1c28}
.fxcard.on{border-color:var(--flame);background:#2a1d18}