:root{--y:#FFFC00;--ink:#111;--red:#f23c57;--blue:#0eadff}
*{box-sizing:border-box}
body{margin:0;font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);min-height:100vh;
background:radial-gradient(circle at 20% 10%,#fffb8a,transparent 40%),radial-gradient(circle at 90% 90%,#ffb3cf,transparent 45%),repeating-linear-gradient(45deg,#fff9c9 0 14px,#fff4b0 14px 28px)}
.mono{font-family:'JetBrains Mono',monospace}
.phone{max-width:430px;margin:0 auto;min-height:100vh;background:#fff;box-shadow:0 0 0 3px #111,10px 10px 0 #111;position:relative;display:flex;flex-direction:column}
@media(min-width:500px){.phone{margin:20px auto;min-height:calc(100vh - 40px);border-radius:28px;overflow:hidden}}
.ghost{animation:bob 2s ease-in-out infinite;display:inline-block}
@keyframes bob{50%{transform:translateY(-5px) rotate(-6deg)}}
.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.toast{animation:drop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{transform:translate(-50%,-120%)}to{transform:translate(-50%,0)}}
.rise{animation:rise .4s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.btn{border:2.5px solid #111;box-shadow:3px 3px 0 #111;font-weight:800;border-radius:14px;transition:.1s}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}
input[type=range]{accent-color:#111;width:100%}
.dot{animation:blink 1s infinite}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.2}}
.confetti{position:fixed;top:-10px;width:9px;height:14px;animation:fall 1.6s linear forwards;z-index:99}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}