:root{--sky:#5CCFF5;--deep:#1BB0D8;--mint:#C9F7EA;--pink:#FCD5D5;--ink:#111}
*{box-sizing:border-box}
body{margin:0;font-family:'Fredoka',sans-serif;background:
radial-gradient(circle at 20% 10%,#8fe0fa 0,transparent 40%),
radial-gradient(circle at 80% 90%,#3fc0ea 0,transparent 45%),var(--sky);min-height:100vh;color:var(--ink)}
.phone{max-width:430px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.hdr{background:var(--deep);color:#fff;padding:18px 20px;border-bottom:3px solid var(--ink);position:relative}
.chunk{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
button.chunk:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.field{width:100%;background:#7fdcf7;border:3px solid var(--ink);border-radius:999px;padding:10px 16px;font:600 18px 'Fredoka';color:var(--ink)}
.field::placeholder{color:#1f4f60}
.pop{animation:pop .35s cubic-bezier(.3,1.6,.6,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.rise{animation:rise .5s ease both}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
.wiggle{animation:wig 1s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.conf{position:fixed;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall 1.8s linear forwards;z-index:100}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}