:root{--bg:#121214;--panel:#1c1c20;--line:#2c2c33;--mag:#ff3d8b;--cy:#3df5ff;--tx:#e8e6ef;--dim:#8a8796}
html,body{background:var(--bg);color:var(--tx);font-family:'Bricolage Grotesque',sans-serif;margin:0}
.mono{font-family:'JetBrains Mono',monospace}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:50;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 10% 0%,rgba(255,61,139,.12),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(61,245,255,.09),transparent 50%)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.drop{border:2px dashed var(--line);transition:.2s}
.drop.over,.drop:hover{border-color:var(--cy);box-shadow:0 0 24px rgba(61,245,255,.15)}
.btn{background:#26262c;border:1px solid var(--line);border-radius:8px;padding:6px 12px;transition:.15s}
.btn:hover{border-color:var(--cy);color:var(--cy)}
.go{background:var(--mag);color:#121214;font-weight:800;border-radius:10px;padding:12px 22px;box-shadow:0 0 28px rgba(255,61,139,.5);transition:.2s}
.go:hover{transform:translateY(-1px);box-shadow:0 0 40px rgba(255,61,139,.75)}
.go:disabled{opacity:.35;box-shadow:none;transform:none}
.wiggle{animation:wig .4s infinite alternate}
@keyframes wig{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
.strip{background:repeating-linear-gradient(90deg,#000 0 10px,#333 10px 18px);height:10px;animation:scroll 1s linear infinite}
@keyframes scroll{to{background-position:-18px 0}}
input[type=range]{accent-color:var(--mag)}
select{background:#26262c;border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.marker{position:absolute;top:-4px;width:4px;height:calc(100% + 8px);border-radius:2px;cursor:pointer;transform:translateX(-2px)}
.marker .tip{display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);width:72px;border:2px solid currentColor;border-radius:6px;background:#000}
.marker:hover .tip{display:block}