@font-face { font-family: "Archivo Black"; src: url(/fonts/ArchivoBlack-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Archivo"; font-weight: 600; src: url(/fonts/Archivo-SemiBold.ttf) format("truetype"); font-display: swap; }
:root { --paper: #FFF1D6; --ink: #111111; --pink: #FF5C8A; --yellow: #FFD23F; --white: #FFFFFF; --muted: #6B6457; }
* { box-sizing: border-box; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-weight: 600;
       min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
       background-image: radial-gradient(rgba(17,17,17,.10) 1px, transparent 1.2px); background-size: 14px 14px; }
main { width: 100%; max-width: 460px; text-align: center; display: grid; gap: 18px; }
.logo { font-family: "Archivo Black"; font-size: 34px; line-height: 1.05; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.logo .c { color: var(--yellow); } .logo .b { color: var(--pink); }
h1 { font-family: "Archivo Black"; font-size: 30px; }
p { font-size: 17px; line-height: 1.4; }
.card { background: var(--white); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 22px 18px; display: grid; gap: 14px; }
.badge { width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--ink); background: #7BE0AD;
         display: grid; place-items: center; font-family: "Archivo Black"; font-size: 44px; }
.btn { display: block; font-family: "Archivo Black"; font-size: 18px; color: var(--ink); text-decoration: none; padding: 14px 10px;
       border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--pink); }
.btn.alt { background: var(--white); }
.small { font-size: 14px; color: var(--muted); }
.small a { color: var(--ink); }
[hidden] { display: none !important; }