:root{--bg:#fff8e7;--ink:#2b2d42;--primary:#ff5d8f;--secondary:#3a86ff;--accent:#ffbe0b;--good:#06d6a0;--bad:#ef476f;--radius:18px;--shadow:0 6px 0 rgba(0,0,0,.15);--font:"Trebuchet MS","Comic Sans MS",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 var(--font);min-height:100vh;
  background-image:radial-gradient(circle at 10% 10%,rgba(255,190,11,.18) 0 120px,transparent 121px),radial-gradient(circle at 92% 30%,rgba(58,134,255,.14) 0 160px,transparent 161px),radial-gradient(circle at 20% 90%,rgba(255,93,143,.14) 0 140px,transparent 141px);
  background-attachment:fixed}
body.noscroll{overflow:hidden}
h1,h2,h3{line-height:1.15;margin:.2em 0 .4em}
h1{font-size:clamp(2rem,6vw,3.2rem)}h2{font-size:clamp(1.5rem,4vw,2.1rem)}
a{color:var(--secondary);font-weight:700}
.wrap{max-width:1000px;margin:0 auto;padding:20px 16px 60px;position:relative;z-index:1}
.muted{opacity:.7}
.hidden{display:none!important}

/* nav */
.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 4px 0 rgba(0,0,0,.15)}
.topnav .brand{font-weight:900;font-size:1.25rem;color:#fff;text-decoration:none;margin-right:auto;text-shadow:0 2px 0 rgba(0,0,0,.2);white-space:nowrap}
.topnav a.nl{color:#fff;text-decoration:none;font-weight:800;padding:7px 14px;border-radius:999px;transition:transform .15s,background .15s}
.topnav a.nl:hover{background:rgba(255,255,255,.25);transform:translateY(-2px) rotate(-2deg)}
.topnav a.nl.active{background:#fff;color:var(--primary)}
.topnav .chip{background:rgba(255,255,255,.9);border-radius:999px;padding:4px 12px;font-weight:800;white-space:nowrap}
.topnav .nbtn{border:0;background:rgba(0,0,0,.2);color:#fff;font:inherit;font-weight:800;border-radius:999px;padding:7px 14px;cursor:pointer}
@media(max-width:560px){.topnav{gap:2px;padding:6px 8px}.topnav .brand{width:100%;text-align:center}.topnav a.nl,.topnav .nbtn{padding:6px 10px;font-size:.95rem}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:900;font-size:1.1rem;color:#fff;background:var(--primary);padding:12px 22px;min-height:48px;border-radius:999px;box-shadow:var(--shadow);text-decoration:none;transition:transform .12s,box-shadow .12s,filter .12s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.btn-blue{background:var(--secondary)}.btn-green{background:var(--good)}.btn-yellow{background:var(--accent);color:var(--ink)}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-sm{font-size:.95rem;padding:7px 14px;min-height:36px}
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:3px solid var(--ink)}
.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}

/* forms */
label{font-weight:800;display:block;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;font:inherit;font-size:1.1rem;padding:12px 14px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);min-height:48px}
input:focus,select:focus,textarea:focus{outline:4px solid rgba(58,134,255,.4)}
.err{background:#ffe3ea;color:#a1123a;border:2px solid var(--bad);border-radius:12px;padding:8px 12px;font-weight:700;margin:10px 0}
.err:empty{display:none}

/* toasts */
#toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,420px);pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:#fff;padding:12px 18px;border-radius:16px;font-weight:800;box-shadow:var(--shadow);animation:pop .35s both;text-align:center;width:100%}
.toast.good{background:var(--good);color:#073b2e}.toast.bad{background:var(--bad)}
.toast.out{opacity:0;transform:translateY(-10px);transition:.3s}
#confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9500}

/* floating emoji decor */
.floaties{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.floaties span{position:absolute;font-size:2.4rem;opacity:.35;animation:bob 5s ease-in-out infinite}
@media(max-width:600px){.floaties span{font-size:1.8rem;opacity:.25}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.legal-foot{text-align:center;padding:24px 16px;font-size:.9rem;opacity:.75}.legal-foot a{color:inherit}
.legal h1{margin-top:0}.legal h2{margin:22px 0 6px}.legal p,.legal li{line-height:1.6}