:root{--bg:#0f0a1a;--lime:#c6ff3d;--pink:#ff4fd8;--glass:rgba(255,255,255,.05);--line:rgba(255,255,255,.12)}
html,body{background:var(--bg);color:#efe9ff;font-family:'Bricolage Grotesque',sans-serif;min-height:100%}
body{background:radial-gradient(circle at 15% 10%,rgba(255,79,216,.18),transparent 40%),radial-gradient(circle at 90% 70%,rgba(198,255,61,.12),transparent 45%),repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.03) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.03) 39px 40px),var(--bg);background-attachment:fixed}
.display{font-family:'Fraunces',serif}
.mono{font-family:'IBM Plex Mono',monospace}
.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);border-radius:1rem}
.glow{box-shadow:0 0 30px rgba(198,255,61,.25)}
.btn{background:var(--lime);color:#0f0a1a;font-weight:800;border-radius:999px;padding:.7rem 1.4rem;transition:transform .15s,box-shadow .15s}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px rgba(198,255,61,.4)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn2{border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-size:.85rem;transition:all .15s}
.btn2:hover{border-color:var(--pink);color:var(--pink)}
.chip{border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.8rem;cursor:pointer}
.chip.on{background:var(--pink);color:#0f0a1a;border-color:var(--pink);font-weight:700}
.slot{aspect-ratio:1;border:2px dashed rgba(198,255,61,.35);border-radius:.9rem;position:relative;overflow:hidden;cursor:pointer;transition:all .2s}
.slot:hover,.slot.over{border-color:var(--pink);background:rgba(255,79,216,.08)}
.slot img{width:100%;height:100%;object-fit:cover}
input,textarea,select{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:.7rem;padding:.6rem .8rem;color:#fff;width:100%;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--lime)}
input[type=range]{padding:0;accent-color:var(--pink)}
.rise{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bubble{animation:bub 1.2s infinite}
@keyframes bub{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.1)}}
.masonry{columns:2;column-gap:1rem}
@media(min-width:768px){.masonry{columns:3}}
.masonry>*{break-inside:avoid;margin-bottom:1rem}
.confetti{position:fixed;top:-10px;width:8px;height:14px;z-index:99;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.hov .acts{opacity:0;transition:opacity .2s}.hov:hover .acts{opacity:1}
@media(hover:none){.hov .acts{opacity:1}}