:root{--ink:#1b1b1b;--cream:#fff4d6;--yellow:#ffd93d;--pink:#ff8fb1;--blue:#74c0fc;--green:#8ce99a;--purple:#d0bfff;--red:#c92a2a;color:var(--ink);background:var(--cream);font-family:Nunito,system-ui,sans-serif}*,:before,:after{box-sizing:border-box}body{background-color:var(--cream);background-image:radial-gradient(#1b1b1b12 2.5px,#0000 2.5px);background-size:28px 28px;min-height:100vh;margin:0;font-weight:600;line-height:1.45}main{max-width:760px;margin:0 auto;padding:24px 16px 48px}h1,h2,h3{letter-spacing:.04em;margin:0;font-family:Bangers,Nunito,sans-serif;font-weight:400}.hero{text-align:center;margin-bottom:20px}.hero h1{text-shadow:4px 4px 0 var(--pink);-webkit-text-stroke:2px var(--ink);color:var(--yellow);paint-order:stroke fill;font-size:clamp(3.4rem,14vw,5.5rem);line-height:1}.tag{max-width:30ch;margin:8px auto 0;font-size:1.15rem;font-weight:800}.mascot{transform-origin:50% 100%;width:110px;height:110px;animation:1.8s ease-in-out infinite hop}.mascot.busy{animation-duration:.7s}.mascot .eyes{transform-origin:60px 55px;animation:4s infinite blink}@keyframes hop{0%,to{transform:translateY(0)scale(1)}45%{transform:translateY(-14px)scale(.97,1.04)}55%{transform:translateY(-14px)}90%{transform:translateY(0)scale(1.06,.94)}}@keyframes blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}.panel{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff;border-radius:22px;margin:24px 0;padding:22px}form.panel{gap:18px;display:grid;transform:rotate(-.6deg)}label{gap:6px;font-size:1.05rem;font-weight:800;display:grid}input,textarea{font:inherit;color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:14px;width:100%;padding:12px 14px;font-weight:600}textarea{resize:vertical;min-height:84px}input:focus-visible,textarea:focus-visible,.btn:focus-visible,a:focus-visible{outline:4px solid var(--blue);outline-offset:2px}.at{background:var(--cream);border:3px solid var(--ink);border-radius:14px;align-items:center;padding-left:14px;display:flex}.at b{font-size:1.3rem}.at input{background:0 0;border:0;border-radius:0 14px 14px 0}.at:focus-within{outline:4px solid var(--blue);outline-offset:2px}.at input:focus-visible{outline:none}.btn{font:inherit;letter-spacing:.05em;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);min-height:44px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:8px 22px;font-family:Bangers,sans-serif;font-size:1.35rem;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)rotate(-1deg)}.btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.btn.ghost{background:#fff}.btn.big{background:var(--pink);padding:10px 34px;font-size:1.8rem}.btn:disabled{opacity:.55;cursor:not-allowed}.error{border:3px solid var(--red);color:var(--red);background:#ffe3e3;border-radius:12px;margin:0;padding:10px 14px;font-weight:800}.loading{text-align:center}.loading h2{margin:8px 0 14px;font-size:2rem}.steps{text-align:left;gap:8px;max-width:360px;margin:0 auto;padding:0;list-style:none;display:grid}.steps li{opacity:.45;align-items:center;gap:10px;font-weight:800;display:flex}.steps li.now,.steps li.done{opacity:1}.tick{border:3px solid var(--ink);background:#fff;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-weight:800;display:grid}.steps .done .tick{background:var(--green)}.steps .now .tick{background:var(--yellow);animation:.9s infinite pulse}@keyframes pulse{50%{transform:scale(1.18)}}.hint{margin:16px 0 0;font-size:.95rem}.results-title{text-align:center;margin-top:8px;font-size:clamp(2.2rem,9vw,3.4rem)}.results-title span{color:var(--pink);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}.sub{text-align:center;margin:4px 0 0}.cards{gap:28px;margin:28px 0;padding:0;list-style:none;display:grid}.card{text-align:center;background:var(--c);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);animation:.5s cubic-bezier(.34,1.56,.64,1) both pop;animation-delay:calc(var(--i) * .12s);border-radius:22px;justify-items:center;gap:6px;padding:26px 20px 20px;display:grid;position:relative}.card:nth-child(odd){transform:rotate(-1deg)}.card:nth-child(2n){transform:rotate(1deg)}@keyframes pop{0%{opacity:0;transform:scale(.6)rotate(-6deg)}}.rank{border:3px solid var(--ink);background:#fff;border-radius:12px;padding:0 12px;font-family:Bangers,sans-serif;font-size:1.6rem;position:absolute;top:-16px;left:-10px;transform:rotate(-6deg)}.avatar{border:4px solid var(--ink);object-fit:cover;box-shadow:4px 4px 0 var(--ink);background:#fff;border-radius:50%;display:block}.avatar.fallback{place-items:center;font-family:Bangers,sans-serif;display:grid}.card h3{overflow-wrap:anywhere;margin-top:8px;font-size:1.7rem}.handle{color:var(--ink);font-weight:800}.pill{border:3px solid var(--ink);background:#fff;border-radius:999px;padding:0 12px;font-size:.9rem;font-weight:800}.bio{-webkit-line-clamp:3;overflow-wrap:anywhere;-webkit-box-orient:vertical;margin:6px 0 0;font-size:.95rem;display:-webkit-box;overflow:hidden}.bio.post b{letter-spacing:.04em;font-family:Bangers,sans-serif;font-weight:400}.why{border:3px solid var(--ink);background:#fff;border-radius:16px;margin:12px 0 6px;padding:10px 14px;font-weight:800;position:relative}.why:before{content:"";border-left:3px solid var(--ink);border-top:3px solid var(--ink);background:#fff;width:18px;height:18px;position:absolute;top:-12px;left:50%;transform:translate(-50%)rotate(45deg)}.actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px;display:flex}.actions.center{margin-top:18px}.share{text-align:center;background:var(--blue)}.share h2{font-size:2.4rem}.share p{margin:4px 0 14px}.preview{border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;border-radius:16px;overflow:hidden}.preview img{width:100%;height:auto;display:block}.skeleton{aspect-ratio:16/9;place-items:center;font-weight:800;display:grid}.note{border:3px solid var(--ink);background:#fff;border-radius:12px;padding:8px 12px;font-weight:800;margin:16px 0 0!important}.support{text-align:center;background:var(--green)}.support h2{font-size:2.2rem}.support p{margin:4px 0 0}footer{text-align:center;opacity:.8;margin-top:36px;font-weight:800}@media (width>=700px){.cards{grid-template-columns:1fr 1fr}.cards .card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:100%;max-width:50%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}