@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url(/assets/fonts/fredoka-500.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(/assets/fonts/fredoka-600.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url(/assets/fonts/nunito-600.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-700.woff2) format("woff2")}

:root{
  --paper:#fff8ec;--dot:#e4cfb0;--ink:#1a1a1a;--muted:#6b6459;--line:#e2d3bb;--white:#fff;
  --pink:#ef65a5;--pink-deep:#d94b8e;--pink-soft:#ffd1e6;--yellow:#ffdd3a;--butter:#fff1a8;--link:#c2185b;--ok:#2f8f4e;--bad:#c0392b;
  --display:"Fredoka",system-ui,sans-serif;--body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font-family:var(--body);font-weight:600;line-height:1.5;
  background-color:var(--paper);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.4px);background-size:16px 16px;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
[hidden]{display:none!important}

/* header / footer */
.site-header{display:flex;align-items:center;gap:16px;max-width:1080px;width:100%;margin:0 auto;padding:18px 20px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:600;font-size:24px}
.brand img{width:38px;height:38px}
.nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav a{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700}
.nav a:hover,.nav a[aria-current="page"]{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)}
.site-footer{margin-top:auto;padding:28px 20px;text-align:center;color:var(--muted);font-size:14px}
.site-footer a{color:var(--muted);margin:0 8px}
main{width:100%;max-width:1080px;margin:0 auto;padding:12px 20px 48px}

@media (max-width:520px){.site-header{gap:8px;padding:14px 16px}.brand{font-size:20px}.brand img{width:32px;height:32px}.nav{gap:2px}.nav a{padding:6px 9px;font-size:14px}main{padding:8px 16px 40px}}

/* building blocks */
.card{background:var(--white);border:1.5px solid var(--ink);border-radius:22px;box-shadow:3px 4px 0 var(--ink);padding:24px}
.stack{display:flex;flex-direction:column;gap:14px}
.narrow{max-width:460px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0}
h1{font-size:clamp(32px,5vw,52px)}
h2{font-size:26px}
h3{font-size:20px}
.muted{color:var(--muted)}
.small{font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 18px;border-radius:16px;border:1.5px solid var(--ink);
  background:var(--white);font-family:var(--display);font-weight:600;font-size:17px;cursor:pointer;text-decoration:none;color:var(--ink);
  box-shadow:2px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 4px 0 var(--ink)}
.btn:active:not(:disabled){transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.btn-pink{background:var(--pink);color:var(--white)}
.btn-yellow{background:var(--yellow)}
.btn-auto{width:auto}
.link-btn{background:none;border:0;padding:0;color:var(--link);font-weight:700;cursor:pointer;text-decoration:underline}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:14px}
.input{width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--ink);background:var(--white);font-size:17px}
.code-input{text-align:center;font-family:var(--display);font-size:30px;letter-spacing:10px;padding:12px 8px}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.divider::before,.divider::after{content:"";flex:1;border-top:1.5px dashed var(--line)}
.notice{padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);font-size:15px}
.notice.ok{border-color:var(--ok);background:#eaf7ee}
.notice.bad{border-color:var(--bad);background:#fdeceb}
.notice.yellow{border-color:var(--ink);background:var(--butter)}
.mascot-tile{display:block;width:100%;aspect-ratio:1123/1000;object-fit:cover;object-position:center 78%;border:1.5px solid var(--ink);border-radius:20px;box-shadow:3px 4px 0 var(--ink);background:var(--pink)}

/* account */
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}
.credit-count{display:flex;gap:14px}
.credit-box{flex:1;padding:14px;border-radius:16px;border:1.5px solid var(--line);text-align:center}
.credit-box b{display:block;font-family:var(--display);font-size:40px;line-height:1}
.credit-box.paid{background:var(--butter);border-color:var(--ink)}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pack{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:16px}
.pack .price{font-family:var(--display);font-size:28px}
.pack .per{font-size:13px;color:var(--muted)}
.pack.best{background:var(--pink-soft)}
.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.history li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1.5px dashed var(--line);font-size:15px}
.history .plus{color:var(--ok)}
.history .minus{color:var(--muted)}

/* home placeholder */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:20px 0 40px}
@media (max-width:780px){.hero{grid-template-columns:1fr}}

/* simple pages */
.prose{max-width:720px;margin:0 auto}
.prose h2{margin-top:28px}
.prose p,.prose li{font-weight:600}