:root{--accent:#a855f7;--accent2:#22d3ee;--bg:#05010f}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:#e9e6ff;font-family:'Syne',sans-serif}
.mono{font-family:'IBM Plex Mono',monospace}
.glass{background:rgba(20,10,45,.55);border:1px solid rgba(255,255,255,.14)}
.blur-on .glass{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.win{box-shadow:0 20px 60px rgba(0,0,0,.6)}
.win.focused{box-shadow:0 0 0 1px var(--accent),0 0 40px -6px var(--accent),0 20px 60px rgba(0,0,0,.6)}
.anim-on .pop{animation:pop .22s cubic-bezier(.2,1.4,.5,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.anim-on .toast{animation:slide .35s ease}
@keyframes slide{from{transform:translateX(120%)}to{transform:none}}
.orb{background:radial-gradient(circle at 30% 30%,#fff,var(--accent2) 25%,var(--accent) 60%,#1a0533);box-shadow:0 0 24px var(--accent)}
.anim-on .orb.spin{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.blackhole{animation:bh 1s ease-in forwards}
@keyframes bh{to{transform:scale(0) rotate(720deg);opacity:0}}
.dicon:hover .dimg{box-shadow:0 0 20px var(--accent)}
.btn{padding:.35rem .8rem;border-radius:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);transition:.15s}
.btn:hover{background:var(--accent);color:#000}
input,textarea,select{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);border-radius:.5rem;color:#eee;padding:.4rem .6rem;outline:none}
input:focus,textarea:focus{border-color:var(--accent)}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}