:root {
  --cream: #FFF9F1;
  --ink: #5B4640;
  --soft: #7E5B53;
  --out: #7A5650;
  --hot: #E2557A;
  --pink: #FFD6E0;
  --lav: #E3D8FB;
  --butter: #FFEFB8;
  --card: #FFFFFF;
  --dot: #F6E2D6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #2A2124; --ink: #FBEFE9; --soft: #E3CFC8; --out: #C9A9A0; --hot: #FF8FAB;
    --pink: #5A3442; --lav: #3E3557; --butter: #4D4329; --card: #352A2E; --dot: #3A2E31;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--cream);
  background-image: radial-gradient(var(--dot) 3px, transparent 3.5px);
  background-size: 44px 44px;
  color: var(--ink);
  font-family: "Fredoka", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  line-height: 1.6;
}
main { max-width: 760px; margin: 0 auto; padding: 40px 16px 72px; }
a { color: var(--hot); font-weight: 600; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 10px; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); }
h2 { font-size: 1.35rem; margin-top: 30px; }
p, li { color: var(--soft); }
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.top img { width: 56px; height: 56px; border-radius: 14px; border: 3px solid var(--out); }
.top a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.25rem; }
.card {
  background: var(--card);
  border: 3px solid var(--out);
  border-radius: 28px;
  padding: 22px 24px;
  box-shadow: 0 7px 0 rgba(122, 86, 80, 0.16);
  margin: 18px 0;
}
.hero { text-align: center; }
.hero .icon { width: 132px; height: 132px; border-radius: 30px; border: 4px solid var(--out); box-shadow: 0 8px 0 rgba(122, 86, 80, 0.18); }
.hero .tag { color: var(--hot); font-size: 1.25rem; font-weight: 600; margin: 4px 0 18px; }
.pill {
  display: inline-block; padding: 12px 24px; border-radius: 999px; border: 3px solid var(--out);
  background: var(--pink); color: var(--ink); text-decoration: none; font-weight: 700; margin: 6px 4px;
}
.pill.alt { background: var(--lav); }
.shots { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x mandatory; }
.shots img { width: 200px; height: auto; border-radius: 22px; border: 3px solid var(--out); flex: 0 0 auto; scroll-snap-align: start; }
.mallow { display: block; width: 220px; max-width: 60%; margin: 24px auto 0; }
.faq b { display: block; color: var(--ink); margin-bottom: 4px; }
.small { font-size: 0.92rem; }
footer { text-align: center; margin-top: 40px; font-size: 0.92rem; color: var(--soft); }
footer a { margin: 0 8px; }
ul { padding-left: 1.2em; }