:root{--ink:#0f0b1f;--fox:#ff7a3d;--sakura:#ff4fa3;--cyan:#4ff0ff;--glass:rgba(255,255,255,.05)}
html,body{background:var(--ink);color:#f3eaff;font-family:'Bricolage Grotesque',sans-serif;min-height:100%}
body{background:radial-gradient(ellipse at 15% 0%,rgba(255,122,61,.22),transparent 50%),radial-gradient(ellipse at 90% 30%,rgba(255,79,163,.16),transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(79,240,255,.08),transparent 60%),var(--ink);background-attachment:fixed}
.display{font-family:'Bungee',cursive;letter-spacing:.02em}
.mono{font-family:'JetBrains Mono',monospace}
.neon{background:linear-gradient(90deg,var(--fox),var(--sakura));-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,90,120,.55))}
.glass{background:var(--glass);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);border-radius:18px}
.lift{transition:transform .25s,box-shadow .25s}.lift:hover{transform:translateY(-4px);box-shadow:0 12px 40px -10px var(--c,#ff7a3d)}
.pill{border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;transition:.2s;cursor:pointer}
.pill.on{background:var(--fox);border-color:var(--fox);color:#1a0d05;font-weight:700}
.btn{background:linear-gradient(90deg,var(--fox),var(--sakura));color:#1a0610;font-weight:800;border-radius:12px;padding:.7rem 1.2rem;transition:.2s}
.btn:hover{filter:brightness(1.15);box-shadow:0 0 24px rgba(255,79,163,.5)}
.btn:disabled{opacity:.5}
.ghost{border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:.4rem .8rem;font-size:.85rem}
.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
input,select,textarea{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.55rem .75rem;color:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fox)}
select option{background:#1a1430}
.fox{display:inline-block;transition:transform .3s}.fox:hover{animation:wag .5s ease-in-out 2}
@keyframes wag{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.rise{animation:rise .6s both}@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.track{height:6px;background:rgba(255,255,255,.08);border-radius:9px;position:relative;overflow:hidden}
.runner{position:absolute;top:-14px;animation:run 1.6s linear infinite;font-size:20px}
@keyframes run{from{left:-10%}to{left:105%}}
.burst{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);pointer-events:none;animation:burst .8s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.embers{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(2px 2px at 20% 80%,#ff7a3d,transparent),radial-gradient(1.5px 1.5px at 70% 60%,#ff4fa3,transparent),radial-gradient(2px 2px at 40% 30%,#ffb36b,transparent),radial-gradient(1px 1px at 85% 85%,#4ff0ff,transparent),radial-gradient(1.5px 1.5px at 10% 40%,#ff7a3d,transparent);background-size:400px 400px;animation:float 40s linear infinite;opacity:.6}
@keyframes float{to{background-position:0 -1600px}}
#root{position:relative;z-index:1}