@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Rubik:wght@400;500;700&display=swap");
:root { --ink:#1C1A2E; --cream:#FFF8EC; --coral:#FF4D3D; --yolk:#FFC531; --muted:#5B5870; --link:#1F5FD9; }
* { box-sizing: border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Rubik, system-ui, sans-serif; font-size:17px; line-height:1.5; }
main { max-width:560px; margin:0 auto; padding:32px 20px 56px; }
main.center { text-align:center; }
h1 { font-family:Fredoka, sans-serif; font-weight:700; font-size:36px; line-height:1.1; margin:20px 0 10px; }
h2 { font-family:Fredoka, sans-serif; font-weight:600; font-size:22px; margin:28px 0 6px; }
p { margin:0 0 12px; } .muted { color:var(--muted); font-size:15px; }
a { color:var(--link); }
.logo { height:36px; } .tock { width:180px; height:180px; }
.card { background:#fff; border:2.5px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink); padding:18px; margin:20px 0; }
.code { font-family:Fredoka, sans-serif; font-weight:700; font-size:44px; letter-spacing:.12em; direction:ltr; }
.btn { display:flex; align-items:center; justify-content:center; height:56px; border-radius:14px; background:var(--coral); color:var(--ink); border:2.5px solid var(--ink); box-shadow:0 4px 0 var(--ink); font-weight:700; text-decoration:none; margin:16px 0; }
[hidden] { display:none !important; }