/* ==========================================================================
   Toastie — site styles
   Palette is taken from the mascot himself: the mint of his artwork, toast
   crust, dark ink, with blush as the only other accent. The variable names
   (--gold, --sky, ...) are kept from the original template.
   ========================================================================== */

:root {
  /* Toastie: toast crust and corgi fur, on the mint of his artwork */
  --cream:        #F3FAF6;
  --surface:      #FFFFFF;
  --gold:         #D98B3A;
  --gold-deep:    #8A4E12;
  --brown:        #2F2418;
  --brown-soft:   #62533F;
  --sky:          #BFE6D5;
  --sky-soft:     #DDF2E8;
  --blush:        #EFA3A3;
  --line:         #D8EADF;
  --shadow-1:     rgba(47, 36, 24, 0.07);
  --shadow-2:     rgba(47, 36, 24, 0.14);
  --nav-bg:       rgba(243, 250, 246, 0.88);
  --focus:        #2F2418;

  --radius:       18px;
  --radius-lg:    26px;
  --ease:         cubic-bezier(.2, .7, .2, 1);

  --step-0:       1rem;
  --step-1:       1.125rem;
  --step-2:       clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --step-3:       clamp(1.7rem, 1.3rem + 1.9vw, 2.5rem);
  --step-4:       clamp(2.3rem, 1.6rem + 3.2vw, 3.9rem);
}

/* Single-theme on purpose: the warm beige is the brand, and it's the ground
   the mascot's own artwork was drawn against. Every colour is set explicitly
   so the page holds up regardless of the viewer's system theme. */
:root { color-scheme: light; }

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-1);
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }

p { margin: 0; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brown);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* in-page links land below the sticky header instead of underneath it */
[id] { scroll-margin-top: 88px; }

.eyebrow {
  font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease);
}

.btn--primary {
  background: var(--brown);
  color: var(--cream);
  box-shadow: 0 2px 4px var(--shadow-1), 0 10px 22px -14px var(--shadow-2);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-1), 0 16px 28px -14px var(--shadow-2);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--brown);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--gold); background: var(--surface); }

.btn--small {
  min-height: 42px;
  padding: 8px 18px;
  font-size: 0.95rem;
  background: var(--gold);
  color: #2A1C0C;
}
.btn--small:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: transparent;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  margin-right: auto;
}
.nav__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.nav__links {
  display: flex;
  gap: 22px;
  font-size: 0.98rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--brown-soft);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__links a:hover { color: var(--brown); border-bottom-color: var(--gold); }

/* menu button: only shown on narrow screens, and only when scripts run */
.nav__toggle {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  color: var(--brown);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 800px) {
  /* scripts on: the links move into a panel under the bar, behind the button */
  html.js .nav__toggle { display: inline-flex; }
  html.js .nav__links { display: none; }
  html.js .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 4px clamp(16px, 4vw, 40px) 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px var(--shadow-2);
  }
  html.js .nav.is-open .nav__links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
  }
  html.js .nav.is-open .nav__links a:last-child { border-bottom-color: transparent; }
  html.js .nav.is-open {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* scripts off: nothing to open a panel with, so the links stay in the
     header and wrap onto a second row */
  html:not(.js) .nav { flex-wrap: wrap; }
  html:not(.js) .nav__links { order: 5; flex-basis: 100%; flex-wrap: wrap; gap: 4px 18px; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  overflow: hidden;          /* the glow bleeds off-edge; don't let it scroll the page */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 96px);
}

/* soft sky wash behind the mascot — she sits in the page, not in a box */
.hero__glow {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 46%;
  translate: 0 -50%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--sky-soft) 0%, transparent 66%);
  pointer-events: none;
}

.hero__copy > * + * { margin-top: 18px; }

.lede {
  max-width: 46ch;
  color: var(--brown-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px !important;
}

/* --------------------------------------------------------------- mascot -- */

/* The mascot is the original artwork. His eyes and tail are cut out of that
   same image as feathered sprites layered back on top, so they can move while
   everything else stays exactly as drawn. The base has the tail painted out,
   and a thin strip of the toast's left edge sits above the tail, so the tail
   wags from behind the bread. Sprite positions are percentages of the
   1254x1254 source, so the whole thing scales as one picture. */

.mascot {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mascot__base {
  width: 100%;
  height: auto;
  display: block;
}

.mascot__part {
  position: absolute;
  display: block;
  height: auto;
}

.mascot__tail {
  left: 4.386%;
  top: 43.461%;
  width: 22.727%;
  transform-origin: 87.72% 55.43%; /* pivots where the tail meets the toast */
  animation: tail-sway 1.6s ease-in-out infinite alternate;
}
.mascot__edge {
  left: 23.126%;
  top: 43.461%;
  width: 6.38%;
}
.mascot.is-paused .mascot__tail { animation-play-state: paused; }

/* Each eye is one unit — the eye crop plus the socket that closes over it —
   and the gaze moves the unit, so the lid can never drift off the eye.
   --gaze-x / --gaze-y run -1..1; the percentages are of the unit itself. */
.mascot__eyeunit {
  position: absolute;
  transform: translate(calc(var(--gaze-x, 0) * 4.4%), calc(var(--gaze-y, 0) * 3.2%));
  transition: transform .45s var(--ease);
}
.mascot__eyeunit--l { left: 51.037%; top: 30.144%; width: 10.526%; aspect-ratio: 132 / 110; }
.mascot__eyeunit--r { left: 68.182%; top: 25.678%; width: 8.373%; aspect-ratio: 105 / 100; }
.mascot__eye {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Blink. Each socket is a window sitting exactly over one eye, masked with a
   soft radial falloff so its edge melts into her face instead of ending on a
   hard ellipse. Inside it, the lid — a strip of her own brow fur with the lash
   line along its bottom — parks just above the window and slides down to
   close. Nothing is replaced or redrawn: the eye underneath is the original
   artwork, simply covered. */
.mascot__socket {
  position: absolute;
  overflow: hidden;
  /* closest-side makes 100% the inscribed ellipse (the eye's own outline);
     without it the gradient reaches the box corners and the mask is nearly
     a rectangle. opaque past the iris, only the outer rim fades into fur. */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 84%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 84%, rgba(0,0,0,0) 100%);
}
/* positioned inside the eye unit, measured from the artwork */
.mascot__socket--l { left: 12.879%; top: 15.455%; width: 74.242%; height: 68.182%; }
.mascot__socket--r { left: 14.286%; top: 15%; width: 71.429%; height: 70%; }

.mascot__lid {
  position: absolute;
  left: 0;
  top: -100%;                 /* parked directly above the eye, out of sight */
  width: 100%;
  height: 100%;
  transform: translateY(0);
  transition: transform .21s cubic-bezier(.25,.1,.3,1);   /* reopening: softer */
}
.mascot.is-blinking .mascot__lid {
  transform: translateY(100%);
  transition: transform .13s cubic-bezier(.4,0,.8,.6);    /* closing: quicker */
}

@keyframes tail-sway {
  from { transform: rotate(4deg); }
  to   { transform: rotate(-4deg); }
}

/* no cursor to follow (touch): let her look around on her own */
@keyframes idle-gaze {
  0%, 16%   { transform: translate(0, 0); }
  26%, 44%  { transform: translate(3.4%, 1.8%); }
  54%, 72%  { transform: translate(-3.2%, -1.2%); }
  82%, 100% { transform: translate(0, 0); }
}
.mascot--idle .mascot__eyeunit { animation: idle-gaze 11s ease-in-out infinite; }

/* ------------------------------------------------------------- sections -- */

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 88px) clamp(20px, 5vw, 48px);
}

.section__head { max-width: 58ch; }
.section__head > * + * { margin-top: 12px; }
.section__lede { color: var(--brown-soft); }

/* Sections fade up as they scroll into view — but only once scripts are
   known to be running. With scripts off nothing is ever hidden. If scripts
   are on but app.js never arrives (or dies before it can reveal anything),
   the safety animation shows everything after a moment regardless. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }
html.js:not(.reveal-ok) .reveal { animation: reveal-safety 0s 2.5s forwards; }
@keyframes reveal-safety { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ her voice -- */

/* four quotes: 2x2 so no card is ever left alone on a row */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 34px;
}
@media (max-width: 560px) {
  .quotes { grid-template-columns: 1fr; }
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: space-between;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px var(--shadow-1), 0 18px 30px -20px var(--shadow-2);
}
.quote-card__text { font-size: var(--step-1); }
.quote-card__tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

/* -------------------------------------------------------- say something -- */

.say {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--sky-soft);
  border-radius: var(--radius-lg);
}
.say__copy > * + * { margin-top: 14px; }
.say__copy .btn { margin-top: 26px; }

.bubble {
  position: relative;
  margin: 0;
  padding: 30px 30px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px var(--shadow-1), 0 20px 34px -24px var(--shadow-2);
}
/* little tail on the speech bubble */
.bubble::after {
  content: "";
  position: absolute;
  left: 38px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  rotate: 45deg;
}

.bubble__text {
  margin: 0;
  font-size: var(--step-2);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.32;
  text-wrap: balance;
  min-height: 3.6em;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.bubble__text.is-swapping { opacity: 0; transform: translateY(6px); }

.bubble__by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  color: var(--brown-soft);
}
.bubble__by img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ----------------------------------------------------------- tagging her -- */

.threads {
  display: grid;
  /* min() keeps the track from forcing a horizontal scroll on narrow phones */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-top: 34px;
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow-1);
}
.thread__label {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

.msg { display: flex; gap: 12px; }
.msg__who {
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--brown-soft);
  margin-bottom: 3px;
}
.msg__text { font-size: 1.02rem; }

.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
}
.avatar--img { object-fit: cover; }

/* --------------------------------------------------------------- notice -- */

.notice {
  padding: clamp(26px, 4vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
}
.notice > * + * { margin-top: 14px; }
.notice p { color: var(--brown-soft); max-width: 72ch; font-size: 1rem; }

/* --------------------------------------------------------------- footer -- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px clamp(20px, 5vw, 48px) 64px;
  border-top: 1px solid var(--line);
}
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.footer__name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; }
.footer__line { font-size: 0.9rem; color: var(--brown-soft); max-width: 42ch; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.95rem;
}
.footer__links a {
  color: var(--brown-soft);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.footer__links a:hover { color: var(--brown); border-bottom-color: var(--gold); }

.footer__legal {
  flex-basis: 100%;
  max-width: 82ch;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--brown-soft);
}
.footer__legal a { color: var(--brown); }

.nav__links a[aria-current="page"] { color: var(--brown); border-bottom-color: var(--gold); }

/* ----------------------------------------------------------------- gate -- */

/* hidden unless the head script decided the visitor hasn't agreed yet;
   with scripts off there is no class, so the site stays reachable */
.gate { display: none; }
html.needs-gate .gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;                /* the card centres itself with auto margins… */
  overflow-y: auto;             /* …and the overlay scrolls when it can't fit */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(51, 37, 22, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html.needs-gate body { overflow: hidden; }

.gate__card {
  width: min(520px, 100%);
  margin: auto;                 /* centred when there's room, never clipped at the top */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px var(--shadow-2);
  animation: gate-in .3s var(--ease);
}
@keyframes gate-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.gate__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.gate__card h2 { font-size: var(--step-3); }
.gate__text { color: var(--brown-soft); }
.gate__text a { color: var(--brown); }
.gate__hint { font-size: 0.85em; }

.gate__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.gate__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brown);
}
.gate__card .btn { align-self: flex-start; }
.gate__card .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* narrow phones: tighter card, full-width button */
@media (max-width: 480px) {
  .gate__card { gap: 12px; }
  .gate__card .btn { align-self: stretch; }
  .gate__avatar { width: 52px; height: 52px; }
}
/* short viewports (landscape phones): drop the avatar so the controls fit */
@media (max-height: 560px) {
  .gate__avatar { display: none; }
  .gate__card { gap: 10px; padding: 18px 22px; }
  .gate__card h2 { font-size: var(--step-2); }
}

/* ----------------------------------------------------------------- docs -- */

.docs {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 88px);
}
.docs__head { max-width: 60ch; }
.docs__head > * + * { margin-top: 12px; }
.docs__updated {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--brown-soft);
}

.docs__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 40px;
}

.docs__toc {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
}
.docs__toc a {
  color: var(--brown-soft);
  text-decoration: none;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.docs__toc a:hover { color: var(--brown); border-left-color: var(--gold); }

.docs__prose { max-width: 68ch; }
.docs__prose section + section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.docs__prose h2 { font-size: var(--step-2); }
.docs__prose h2 + * { margin-top: 14px; }
.docs__prose p + p,
.docs__prose p + ul,
.docs__prose ul + p { margin-top: 12px; }
.docs__prose p,
.docs__prose li { color: var(--brown-soft); }
.docs__prose strong { color: var(--brown); font-weight: 700; }
.docs__prose ul { list-style: disc; padding-left: 1.2em; }
.docs__prose li + li { margin-top: 8px; }
.docs__prose a { color: var(--brown); }
.docs__prose code {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brown);
  /* contract addresses are one long unbroken word: let them wrap on phones */
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  .docs__body { grid-template-columns: 1fr; margin-top: 28px; }
  .docs__toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .docs__toc a { border-left: 0; padding: 8px 0; border-bottom: 2px solid var(--line); }
  .docs__toc a:hover { border-bottom-color: var(--gold); }
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 8px;
    text-align: left;
  }
  .mascot { order: -1; max-width: 320px; }
  .hero__glow { right: 50%; translate: 50% -50%; top: 24%; width: min(560px, 96vw); }
  .say { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .nav { gap: 12px; padding-inline: 16px; }
  .nav__brand span { display: none; }
  .mascot { max-width: 260px; }
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  html.js .reveal:not(.is-in) { opacity: 1; transform: none; animation: none; }

  /* she holds still: the rule above would otherwise park the tail at the end
     of its swing instead of where it was drawn */
  .mascot__tail,
  .mascot--idle .mascot__eyeunit { animation: none !important; transform: none !important; }
}

/* ======================================================================
   2026-09-16 — site sections, PFP Studio, Points
   ====================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #2A1C0C;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge--soft { background: var(--sky-soft); color: var(--brown-soft); margin-left: 10px; font-size: 0.6rem; }

/* alternating section grounds so the long page has rhythm */
.section--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.section--alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* --- homepage: studio teaser --- */
.teaser {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
  background: var(--sky-soft);
  border-radius: var(--radius-lg);
}
.teaser__copy > * + * { margin-top: 14px; }
.teaser__copy .btn { margin-top: 22px; }
.teaser__demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.demo-avatar {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #FCE9CF, #D98B3A);
  box-shadow: 0 2px 4px var(--shadow-1), 0 14px 24px -18px var(--shadow-2);
}
.demo-avatar--sky { background: linear-gradient(160deg, #EAF6F0, #BFE6D5); }
.demo-avatar--blush { background: linear-gradient(160deg, #FBE9E9, #E89B9B); }
.demo-avatar__face { position: absolute; left: 50%; top: 42%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,252,246,.85); transform: translate(-50%, -50%); }
.demo-avatar__pet { position: absolute; width: 58%; height: auto; }
.demo-avatar--beside .demo-avatar__pet { right: -6%; bottom: -8%; }
.demo-avatar--corner .demo-avatar__pet { left: -14%; bottom: -12%; width: 66%; transform: scaleX(-1); }
.demo-avatar--shoulder .demo-avatar__pet { right: 6%; top: 34%; width: 42%; }
.teaser__label { grid-column: 1 / -1; font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown-soft); text-align: center; }

/* --- homepage: mood + points teaser cards --- */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.mood, .points-teaser {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow-1);
}
.mood__text { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: var(--step-2); line-height: 1.3; margin-top: 10px; }
.mood__note, .points-teaser p { color: var(--brown-soft); font-size: 0.95rem; margin-top: 10px; }
.points-teaser .btn { margin-top: 16px; }

/* --- homepage: spotlight + what's growing --- */
.spotlight-empty {
  margin-top: 28px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
}
.spotlight-empty img { width: 120px; height: auto; margin: 0 auto 12px; }
.spotlight-empty h3 { font-family: 'Fredoka', system-ui, sans-serif; font-size: var(--step-2); font-weight: 600; }
.spotlight-empty p { color: var(--brown-soft); max-width: 52ch; margin: 10px auto 0; }
.spotlight-empty .btn { margin-top: 18px; }

.growing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.growing__col { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.growing__col h3 { font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.growing__col ul { margin-top: 12px; display: grid; gap: 8px; }
.growing__col li { padding-left: 18px; position: relative; color: var(--brown-soft); font-size: 0.98rem; }
.growing__col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.growing__col--now li::before { background: #7DB88A; }
.growing__col--planned li::before { background: var(--sky); }

/* --- studio page --- */
.studio { max-width: 1080px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 88px); }
.studio__head { max-width: 62ch; }
.studio__head > * + * { margin-top: 12px; }
.studio__privacy { padding: 12px 16px; background: var(--sky-soft); border-radius: 12px; color: var(--brown-soft); font-size: 0.98rem; }
.studio__privacy strong { color: var(--brown); }
.studio__points { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; font-size: 0.98rem; }
.studio__points a { color: var(--brown); }

.studio__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: clamp(24px, 4vw, 44px); margin-top: 36px; align-items: start; }
.stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--line); box-shadow: 0 2px 4px var(--shadow-1), 0 20px 34px -24px var(--shadow-2); }
.stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stage canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.stage__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--brown-soft); background: var(--cream); pointer-events: none; }
.stage__empty img { width: min(46%, 240px); height: auto; }
.stage__hint { margin-top: 10px; font-size: 0.9rem; color: var(--brown-soft); }

.preview { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.preview__circle { flex: none; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 1px var(--line); }
.preview__circle canvas { display: block; width: 100%; height: 100%; }
.preview__title { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; }
.preview__text { color: var(--brown-soft); font-size: 0.92rem; margin-top: 4px; }

.control { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.control legend { padding: 0 6px; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; }
.control__row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.control__row--wrap { flex-wrap: wrap; }
.control__row--slider label { min-width: 44px; font-size: 0.92rem; color: var(--brown-soft); }
.control__row input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--brown); }
.control__note { margin-top: 10px; font-size: 0.88rem; color: var(--brown-soft); }
.control--actions { background: var(--cream); }
.btn--icon { min-height: 40px; min-width: 40px; padding: 6px 12px; font-size: 1.1rem; background: var(--surface); border-color: var(--line); color: var(--brown); }
.btn--icon:hover { border-color: var(--gold); }
.btn--file { position: relative; overflow: hidden; }
.btn--file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn--file:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--brown); font-family: 'Karla', system-ui, sans-serif; font-size: 0.95rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.nudge { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
.frames { gap: 8px 14px; }
.frame-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.frame-opt input { accent-color: var(--brown); width: 18px; height: 18px; }
.frame-opt span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); }
.swatch--cream { background: #FFF6DF; } .swatch--sky { background: #C1E8D8; } .swatch--gold { background: #D98B3A; }
.status { min-height: 1.4em; margin-top: 12px; font-size: 0.92rem; color: var(--brown-soft); }
.status--error { color: #A23B2A; }
.status--ok { color: #3E7A4B; }

.result { margin-top: 40px; }
.result__card { padding: clamp(24px, 4vw, 40px); background: var(--sky-soft); border-radius: var(--radius-lg); }
.result__card h2 { margin-top: 8px; }
.result__grid { display: grid; grid-template-columns: 256px 1fr; gap: 28px; align-items: start; margin-top: 20px; }
.result__grid img { width: 256px; height: 256px; border-radius: 50%; box-shadow: 0 2px 4px var(--shadow-1), 0 20px 34px -24px var(--shadow-2); }
.result__actions > * + * { margin-top: 12px; }
.result__actions label { display: block; font-size: 0.92rem; color: var(--brown-soft); }
.result__actions textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.98rem; resize: vertical; background: var(--surface); color: var(--brown); }

.studio__notes { margin-top: 44px; max-width: 68ch; }
.studio__notes h2 { font-size: var(--step-2); }
.studio__notes ul { margin-top: 12px; list-style: disc; padding-left: 1.2em; color: var(--brown-soft); display: grid; gap: 8px; }
.studio__notes a { color: var(--brown); }

/* --- points page --- */
/* Potato Points (points.html, js/points.js). Cream ground, warm gold, chocolate type, rounded cards; the mascot
   leads. Motion is decorative only: short shine sweeps and sparkles with long pauses, paused offscreen or in a
   hidden tab (.is-onscreen / .pts-paused, set by points.js), and replaced by static badges for reduced motion. */
.points {
  --pts-gold-hi: #FBE3A8; --pts-gold-lo: #B27A26;
  --pts-silver-hi: #F7F8FA; --pts-silver-lo: #A7AFBA;
  --pts-bronze-hi: #F8DAC0; --pts-bronze-lo: #A9663A;
  --pts-mine: #FCEFD2;
  --pts-ok: #2F7A45; --pts-ok-bg: #EAF4EC; --pts-ok-line: #BFDCC6;
  --pts-warn: #8A3A2A; --pts-warn-bg: #FBEDEA; --pts-warn-line: #EDC3C3;
  --pts-shadow: 0 1px 2px var(--shadow-1), 0 16px 34px -26px var(--shadow-2);
}
.pts-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pts-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.btn .pts-ico { width: 1.1em; height: 1.1em; }
.pts-muted { color: var(--brown-soft); }
.pts-small { font-size: .88rem; font-family: 'Karla', system-ui, sans-serif; font-weight: 400; }
.pts-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pts-actions--quiet .btn { min-height: 44px; padding: 8px 16px; font-size: .92rem; }
.pts-tile { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); color: var(--gold-deep); }
.pts-tile .pts-ico { width: 24px; height: 24px; }
.pts-tile--gold { background: linear-gradient(145deg, var(--pts-gold-hi), var(--gold)); border-color: #E7C27A; color: #3B2408; }
.pts-h { display: flex; align-items: center; gap: 12px; }

/* hero */
.pts-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(20px, 5vw, 56px); }
.pts-hero__text { max-width: 62ch; }
.pts-hero__text > * + * { margin-top: 12px; }
.pts-hero__sub { font-family: 'Fredoka', system-ui, sans-serif; font-size: var(--step-2); font-weight: 500; line-height: 1.3; color: var(--gold-deep); }
.pts-hero__lede { color: var(--brown-soft); max-width: 52ch; }
.pts-fine { display: flex; align-items: flex-start; gap: 10px; max-width: 64ch; margin-top: 18px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; line-height: 1.5; color: var(--brown-soft); }
.pts-fine .pts-ico { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-deep); }
.pts-fine strong { color: var(--brown); }
.pts-fine a { color: var(--brown); font-weight: 700; white-space: nowrap; }
.pts-hero__art { position: relative; width: clamp(130px, 24vw, 230px); aspect-ratio: 240 / 217; }
.pts-hero__art img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(51, 37, 22, .13)); }
.pts-hero__halo { position: absolute; inset: 4% -6% -4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 219, 156, .9), rgba(247, 219, 156, 0)); }
.pts-hero__coin { position: absolute; padding: 3px; border-radius: 50%; color: var(--pts-gold-lo); background: #FDEFCB; box-shadow: 0 4px 10px var(--shadow-1); }
.pts-hero__coin--a { width: 32px; height: 32px; left: -8%; top: 30%; }
.pts-hero__coin--b { width: 24px; height: 24px; right: -2%; bottom: 14%; }
.pts-hero__spark { position: absolute; width: 18px; height: 18px; right: 10%; top: 2%; color: var(--gold); }

.pts-devnote { margin-top: 22px; padding: 10px 14px; border-radius: 12px; border: 1.5px dashed var(--gold); background: repeating-linear-gradient(45deg, rgba(217, 160, 82, .09) 0 10px, transparent 10px 20px); font-size: .92rem; }

/* the one "Coming soon" notice */
.pts-soon { margin-top: 30px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; padding: clamp(22px, 4vw, 34px); border-radius: var(--radius-lg); background: linear-gradient(135deg, #FFF7E6, var(--surface) 60%); border: 1px solid var(--line); border-top: 4px solid var(--gold); box-shadow: var(--pts-shadow); }
.pts-soon__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(145deg, var(--pts-gold-hi), var(--gold)); color: #3B2408; }
.pts-soon__icon .pts-ico { width: 30px; height: 30px; }
.pts-soon__body > * + * { margin-top: 10px; }
.pts-soon h2 { font-size: var(--step-2); }
.pts-soon p { max-width: 60ch; }
.pts-soon a:not(.btn) { color: var(--brown); font-weight: 700; }
.pts-soon .pts-actions { margin-top: 16px; }
.pts-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-family: 'Space Mono', monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.pts-chip .pts-ico { width: 14px; height: 14px; }
.pts-chip--soon { background: #FDEBC4; color: #6A4410; }

.pts-mode { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: 14px; background: var(--sky-soft); border: 1px solid var(--sky); font-size: .95rem; }
.pts-mode--error { background: var(--pts-warn-bg); border-color: var(--pts-warn-line); }
.pts-mode__btn { min-height: 44px; padding: 6px 16px; font-size: .92rem; }
.pts-banner { margin-top: 22px; padding: 12px 16px; border-radius: 14px; background: var(--sky-soft); border: 1px solid var(--sky); font-size: .98rem; }
.pts-banner--ok { background: var(--pts-ok-bg); border-color: var(--pts-ok-line); }
.pts-banner--error { background: var(--pts-warn-bg); border-color: var(--pts-warn-line); }
.pts-banner--party { display: flex; align-items: center; gap: 12px; }
.pts-party__art { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--gold); background: var(--cream); }
.pts-party__n { font-family: 'Fredoka', system-ui, sans-serif; font-size: 1.15rem; margin-right: 2px; }

/* cards and sections */
.pts-card { margin-top: 28px; padding: clamp(20px, 4vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--pts-shadow); }
.pts-tasks, .pts-board, .pts-about { margin-top: clamp(40px, 6vw, 60px); }
.pts-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.pts-section-head h2, .pts-about > h2 { font-size: var(--step-2); }

/* account: profile, summary, completed tasks, controls */
.pts-account > * + * { margin-top: 16px; }
.pts-profile { display: flex; align-items: center; gap: 16px; }
.pts-profile__ring { flex: none; padding: 3px; border-radius: 50%; background: linear-gradient(145deg, var(--pts-gold-hi), var(--gold) 55%, var(--pts-gold-lo)); }
.pts-profile__av { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--surface); object-fit: cover; font-size: 1.5rem; }
.pts-who { min-width: 0; }
.pts-who h2 { font-size: var(--step-2); overflow-wrap: anywhere; }
.pts-who p { overflow-wrap: anywhere; }
.pts-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 0; }
.pts-stat { min-width: 0; padding: 12px 14px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); }
.pts-stat dt { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--brown-soft); }
.pts-stat dt .pts-ico { width: 16px; height: 16px; color: var(--gold-deep); }
.pts-stat dd { margin: 4px 0 0; font-family: 'Fredoka', system-ui, sans-serif; font-size: var(--step-2); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pts-done { display: grid; gap: 8px; }
.pts-done li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 10px 14px; border-radius: 12px; background: var(--pts-ok-bg); }
.pts-done__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.pts-done__title .pts-ico { width: 18px; height: 18px; color: var(--pts-ok); }
.pts-done__meta { font-family: 'Space Mono', monospace; font-size: .8rem; color: var(--brown-soft); white-space: nowrap; }
.pts-check { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; cursor: pointer; min-height: 44px; padding-top: 10px; }
.pts-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--brown); }
.pts-confirm { padding: 16px; border-radius: 14px; background: var(--pts-warn-bg); border: 1px solid var(--pts-warn-line); }
.pts-confirm > * + * { margin-top: 12px; }

/* task cards: coming soon · available · verifying · completed · could not verify */
.pts-task { position: relative; margin-top: 16px; padding: clamp(18px, 3.5vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--pts-shadow); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.pts-task__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
.pts-task__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); color: var(--gold-deep); }
.pts-task__icon .pts-ico { width: 26px; height: 26px; }
.pts-task__icon--x { background: #FFFFFF; color: #000000; }
.pts-task h3 { font-size: 1.3rem; }
.pts-task__text p { margin-top: 2px; }
.pts-coins { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 8px; border-radius: 999px; background: linear-gradient(145deg, #FCE7B8, #F3C979); color: #3B2408; box-shadow: inset 0 0 0 1px rgba(178, 122, 38, .28); font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; white-space: nowrap; }
.pts-coins .pts-ico { width: 22px; height: 22px; color: #8A5A16; }
.pts-coins .pts-num { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.pts-coins .pts-unit { font-family: 'Karla', system-ui, sans-serif; font-size: .8rem; font-weight: 700; opacity: .75; }
.pts-task__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pts-status { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: .98rem; font-weight: 700; color: var(--brown-soft); }
.pts-status .pts-ico { width: 20px; height: 20px; }
.pts-task__note { margin-top: 12px; font-size: .86rem; line-height: 1.55; color: var(--brown-soft); max-width: 70ch; }
.pts-task__note a { color: var(--brown); font-weight: 700; }
.pts-task[data-state="soon"] { background: linear-gradient(180deg, var(--surface), #FBF5E8); }
.pts-task[data-state="soon"] .pts-status { color: #6A4410; }
.pts-task[data-state="soon"] .pts-coins, .pts-task[data-state="ineligible"] .pts-coins { filter: saturate(.55); opacity: .8; }
.pts-task[data-state="available"] .pts-status { font-weight: 500; }
.pts-task[data-state="soon"] .pts-task__action .btn, .pts-task[data-state="ineligible"] .pts-task__action .btn { background: transparent; color: var(--brown-soft); border-color: var(--line); box-shadow: none; opacity: 1; }
.pts-task[data-state="verifying"] .pts-task__action .btn, .pts-task[data-state="loading"] .pts-task__action .btn { opacity: .82; cursor: progress; }
.pts-task[data-state="verifying"] .pts-status, .pts-task[data-state="loading"] .pts-status { color: var(--brown); }
.pts-task[data-state="done"] { border-color: var(--pts-ok-line); background: linear-gradient(180deg, #F5FAF5, var(--surface)); }
.pts-task[data-state="done"] .pts-status { color: var(--pts-ok); }
.pts-task[data-state="done"] .pts-coins { background: var(--pts-ok-bg); color: var(--pts-ok); box-shadow: inset 0 0 0 1px var(--pts-ok-line); }
.pts-task[data-state="done"] .pts-coins .pts-ico { color: var(--pts-ok); }
.pts-task[data-state="failed"], .pts-task[data-state="unavailable"] { border-color: var(--pts-warn-line); }
.pts-task[data-state="failed"] .pts-status, .pts-task[data-state="unavailable"] .pts-status { color: var(--pts-warn); }
.pts-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pts-burst__coin { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; padding: 1px; border-radius: 50%; color: var(--pts-gold-lo); background: #FDEBC4; opacity: 0; }

/* the PFP task (hidden until X confirms it is allowed) */
.pts-steps { list-style: decimal; padding-left: 1.3em; display: grid; gap: 6px; color: var(--brown-soft); font-size: .98rem; }
.pts-steps--small { font-size: .9rem; }
.pts-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: flow; list-style: none; padding: 0; margin: 16px 0 0; }
.pts-flow li { counter-increment: flow; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); text-align: center; font-family: 'Fredoka', system-ui, sans-serif; font-size: .95rem; color: var(--brown-soft); }
.pts-flow li::before { content: counter(flow) '. '; }
.pts-flow li.is-current { border-color: var(--brown); color: var(--brown); background: var(--cream); }
.pts-flow li.is-done { border-color: var(--pts-ok-line); background: var(--pts-ok-bg); color: var(--pts-ok); }
.pts-flow li.is-done::before { content: '✓ '; }
.pts-pane { margin-top: 14px; }
.pts-pane > * + * { margin-top: 12px; }
.pts-label { display: block; font-size: .92rem; color: var(--brown-soft); }
.pts-pane textarea, .pts-verify input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream); color: var(--brown); font: inherit; font-size: 16px; }
.pts-pane textarea:focus-visible, .pts-verify input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pts-verify { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.pts-consent { padding: 16px; border-radius: 14px; background: var(--sky-soft); border: 1px solid var(--sky); }
.pts-consent > * + * { margin-top: 10px; }
.pts-state { min-height: 1.5em; margin-top: 12px; font-weight: 700; font-size: 1rem; }
.pts-state--ok { color: var(--pts-ok); }
.pts-state--warn { color: var(--pts-warn); }
.pts-state:empty { display: none; }
.pts-inline { min-height: 40px; padding: 6px 16px; margin-left: 6px; font-size: .9rem; vertical-align: middle; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* leaderboard */
.pts-rule { margin-top: 6px; font-size: .95rem; }
.pts-featured { margin-top: 20px; }
.pts-featured:empty { display: none; }
img.pts-row__av, img.pts-place__av, img.pts-profile__av { background: #F3E6CC; }     /* while X's picture loads */
.pts-av--mono { background: var(--tone, #F4DDA8); color: #4A3016; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; line-height: 1; }
.pts-you { display: inline-block; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--brown); color: var(--cream); font-family: 'Space Mono', monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }

/* podium: 2nd, 1st, 3rd across on wide screens; 1st above 2nd and 3rd on phones. Only for distinct places. */
.pts-podium { list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "second first third"; align-items: end; gap: clamp(12px, 2vw, 22px); }
.pts-podium--solo { grid-template-columns: minmax(0, 380px); grid-template-areas: "first"; justify-content: center; }
.pts-place { position: relative; display: grid; justify-items: center; align-content: end; gap: 6px; min-width: 0; padding: 44px 16px 22px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--pts-shadow); }
.pts-place--1 { grid-area: first; min-height: 314px; padding: 56px 20px 28px; border-color: #EFD39A; background: radial-gradient(120% 70% at 50% 0%, #FFF2D0, var(--surface) 72%); box-shadow: 0 0 0 1px rgba(217, 160, 82, .35), 0 24px 48px -24px rgba(217, 160, 82, .7), 0 0 70px -24px rgba(247, 219, 156, .95); }
.pts-place--2 { grid-area: second; min-height: 264px; border-color: #DDE1E7; background: radial-gradient(120% 60% at 50% 0%, #F6F7F9, var(--surface) 70%); }
.pts-place--3 { grid-area: third; min-height: 236px; border-color: #EBCFB9; background: radial-gradient(120% 60% at 50% 0%, #FBEFE5, var(--surface) 70%); }
.pts-place.is-me { background: linear-gradient(180deg, var(--pts-mine), var(--surface)); }
.pts-place__ring { padding: 3px; border-radius: 50%; background: var(--line); }
.pts-place--1 .pts-place__ring { padding: 4px; background: linear-gradient(145deg, var(--pts-gold-hi), var(--gold) 55%, var(--pts-gold-lo)); box-shadow: 0 10px 22px -10px rgba(178, 122, 38, .65); }
.pts-place--2 .pts-place__ring { background: linear-gradient(145deg, var(--pts-silver-hi), var(--pts-silver-lo)); }
.pts-place--3 .pts-place__ring { background: linear-gradient(145deg, var(--pts-bronze-hi), var(--pts-bronze-lo)); }
.pts-place__av { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--surface); object-fit: cover; font-size: 1.7rem; }
.pts-place--1:not(.pts-place--joint) .pts-place__av { width: 96px; height: 96px; font-size: 2.2rem; }
.pts-place__label { margin-top: 6px; font-family: 'Space Mono', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.pts-place--2 .pts-place__label { color: #5D6570; }
.pts-place--3 .pts-place__label { color: #8C5128; }
.pts-place__who { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; max-width: 100%; min-width: 0; }
.pts-place__handle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Fredoka', system-ui, sans-serif; font-size: 1.08rem; font-weight: 600; color: var(--brown); text-decoration: none; }
.pts-place--1:not(.pts-place--joint) .pts-place__handle { font-size: 1.3rem; }
.pts-place__handle:hover { text-decoration: underline; }
.pts-place__pts { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; max-width: 100%; font-family: 'Fredoka', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pts-place__pts .pts-ico { width: 18px; height: 18px; align-self: center; color: var(--gold-deep); }
.pts-place__pts .pts-num { font-size: 1.25rem; font-weight: 600; }
.pts-place--1:not(.pts-place--joint) .pts-place__pts .pts-num { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.pts-place__pts .pts-unit { font-family: 'Karla', system-ui, sans-serif; font-size: .82rem; color: var(--brown-soft); }

/* badges: a gold crown with a potato gem for 1st; pearl-silver and bronze ribbons for 2nd and 3rd */
.pts-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.pts-badge__disc { position: relative; z-index: 1; overflow: hidden; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #FFFBF2; box-shadow: 0 6px 14px -6px rgba(51, 37, 22, .45); }
.pts-badge--gold .pts-badge__disc { width: 58px; height: 58px; background: radial-gradient(circle at 35% 28%, #FFF3CF, #F2C66E 46%, #C68A30); color: #4F2F08; }
.pts-badge--gold .pts-ico { width: 32px; height: 32px; }
.pts-badge--silver .pts-badge__disc { background: radial-gradient(circle at 35% 28%, #FFFFFF, #E4E7EC 48%, #A9B1BC); color: #3F4650; }
.pts-badge--bronze .pts-badge__disc { background: radial-gradient(circle at 35% 28%, #FCE7D6, #E2A679 48%, #A9663A); color: #4A2A12; }
.pts-badge__num { font-family: 'Fredoka', system-ui, sans-serif; font-size: 1.3rem; font-weight: 600; line-height: 1; }
.pts-badge__tails { position: absolute; left: 50%; top: 50%; width: 42px; height: 30px; transform: translate(-50%, 4px); }
.pts-badge__tails::before, .pts-badge__tails::after { content: ''; position: absolute; top: 0; width: 15px; height: 28px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.pts-badge__tails::before { left: 3px; transform: rotate(16deg); }
.pts-badge__tails::after { right: 3px; transform: rotate(-16deg); }
.pts-badge--silver .pts-badge__tails::before, .pts-badge--silver .pts-badge__tails::after { background: linear-gradient(#E3E6EB, #9EA7B3); }
.pts-badge--bronze .pts-badge__tails::before, .pts-badge--bronze .pts-badge__tails::after { background: linear-gradient(#EDB690, #A9663A); }
.pts-badge__shine { position: absolute; inset: -30%; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%); transform: translateX(-120%); pointer-events: none; }
.pts-sparkle { position: absolute; width: 16px; height: 16px; color: #E7B04C; opacity: 0; pointer-events: none; }
.pts-sparkle--a { top: 16px; left: 20%; }
.pts-sparkle--b { top: 40px; right: 18%; width: 12px; height: 12px; }
.pts-sparkle--c { top: 104px; left: 14%; width: 10px; height: 10px; }

/* joint leaders: everyone sharing first place gets the same card */
.pts-joint { padding: clamp(18px, 3vw, 28px); border-radius: var(--radius-lg); background: radial-gradient(120% 80% at 50% 0%, #FFF2D0, var(--surface) 70%); border: 1px solid #EFD39A; box-shadow: 0 0 0 1px rgba(217, 160, 82, .22), 0 22px 46px -30px rgba(217, 160, 82, .6); }
.pts-joint__head { display: flex; align-items: center; gap: 14px; }
.pts-joint__head .pts-badge { position: static; transform: none; }
.pts-joint__head .pts-badge__disc { width: 52px; height: 52px; }
.pts-joint__head h3 { font-size: var(--step-2); }
.pts-joint__grid { list-style: none; margin: 16px 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 30px 14px; }
.pts-place--joint { grid-area: auto; min-height: 0; padding: 38px 12px 18px; }
.pts-place--joint .pts-badge__disc { width: 42px; height: 42px; }
.pts-place--joint .pts-badge--gold .pts-ico { width: 24px; height: 24px; }
.pts-joint__more { margin-top: 16px; }

/* the full list */
.pts-rows { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.pts-rows[hidden] { display: none; }
.pts-row { display: grid; grid-template-columns: minmax(3.4em, max-content) 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pts-row.is-me { background: var(--pts-mine); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pts-row__rank { display: inline-flex; align-items: center; gap: 4px; font-family: 'Space Mono', monospace; font-size: .88rem; color: var(--gold-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pts-row__rank .pts-ico { width: 16px; height: 16px; }
.pts-row__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font-size: 1.05rem; }
.pts-row__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pts-row__handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--brown); text-decoration: none; }
.pts-row__handle:hover { text-decoration: underline; }
.pts-row__pts { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pts-row__pts .pts-unit { font-family: 'Karla', system-ui, sans-serif; font-size: .8rem; font-weight: 500; color: var(--brown-soft); }
.pts-me { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: var(--pts-mine); border: 1px solid var(--gold); font-weight: 700; }
.pts-me .pts-ico { width: 18px; height: 18px; color: var(--gold-deep); }
.pts-pager { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* loading, empty, error: three different looks */
.pts-skel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(12px, 2vw, 22px); padding-top: 30px; }
.pts-skel__card { display: block; height: 200px; border-radius: 24px; background: linear-gradient(180deg, #F2E6CE, #F7EFDF); }
.pts-skel__card--tall { height: 250px; }
.pts-skel__row { height: 60px; border-radius: 16px; background: #F2E7D2; }
.pts-empty { display: grid; justify-items: center; gap: 10px; padding: clamp(24px, 5vw, 40px) 20px; text-align: center; border-radius: var(--radius-lg); border: 1.5px dashed #E4CFA6; background: var(--surface); }
.pts-empty__art { width: 150px; height: auto; filter: drop-shadow(0 12px 16px rgba(51, 37, 22, .1)); }
.pts-empty h3 { font-size: var(--step-2); }
.pts-empty p { max-width: 46ch; }
.pts-empty .btn { margin-top: 6px; }
html:not(.js) .pts-featured, html:not(.js) .pts-rows { display: none; }     /* no script, no board: the notice above says why */
.pts-board-error { display: grid; justify-items: start; gap: 10px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--pts-warn-bg); border: 1px solid var(--pts-warn-line); }
.pts-board-error h3 { font-size: 1.25rem; }

/* how points work */
.pts-facts { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pts-facts li { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.pts-facts h3 { font-size: 1.1rem; }
.pts-facts p { margin-top: 4px; font-size: .95rem; color: var(--brown-soft); }
.pts-about__more { margin-top: 16px; }
.pts-about__more a { color: var(--brown); font-weight: 700; }

/* motion: restrained, paused offscreen and in hidden tabs; static badges when reduced motion is on */
@keyframes pts-shine { 0% { transform: translateX(-120%); } 11% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
@keyframes pts-twinkle { 0%, 72%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(18deg); } 88% { opacity: 0; transform: scale(.6) rotate(36deg); } }
@keyframes pts-glint { 0%, 82%, 100% { transform: scale(1) rotate(0deg); } 90% { transform: scale(1.3) rotate(15deg); } }
@keyframes pts-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pts-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes pts-pop { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes pts-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .pts-board.is-onscreen .pts-badge__shine { animation: pts-shine 7.5s ease-in-out 1s infinite; }
  .pts-board.is-onscreen .pts-badge--silver .pts-badge__shine { animation-delay: 3.5s; }
  .pts-board.is-onscreen .pts-badge--bronze .pts-badge__shine { animation-delay: 6s; }
  .pts-board.is-onscreen .pts-place--joint:nth-child(3n+2) .pts-badge__shine { animation-delay: 3.2s; }
  .pts-board.is-onscreen .pts-place--joint:nth-child(3n) .pts-badge__shine { animation-delay: 5.4s; }
  .pts-board.is-onscreen .pts-sparkle { animation: pts-twinkle 6.5s ease-in-out infinite; }
  .pts-board.is-onscreen .pts-sparkle--b { animation-delay: 1.3s; }
  .pts-board.is-onscreen .pts-sparkle--c { animation-delay: 2.6s; }
  .pts-hero.is-onscreen .pts-hero__coin--a { animation: pts-float 6s ease-in-out infinite; }
  .pts-hero.is-onscreen .pts-hero__coin--b { animation: pts-float 7s ease-in-out -2s infinite; }
  .pts-hero.is-onscreen .pts-hero__spark { animation: pts-glint 6s ease-in-out 1s infinite; }
  .pts-skel__card, .pts-skel__row { animation: pts-pulse 1.4s ease-in-out infinite; }
  .pts-task.is-celebrating .pts-coins { animation: pts-pop .7s var(--ease); }
  .pts-task[data-state="verifying"] .pts-status .pts-ico, .pts-task[data-state="loading"] .pts-status .pts-ico { animation: pts-pulse 1.4s ease-in-out infinite; }
  .pts-task.is-celebrating .pts-status .pts-ico { animation: pts-pop .7s var(--ease) .15s both; }
  .pts-burst__coin { animation: pts-burst 1s cubic-bezier(.2, .7, .2, 1) both; }
  .pts-paused .pts-badge__shine, .pts-paused .pts-sparkle, .pts-paused .pts-hero__coin, .pts-paused .pts-hero__spark,
  .pts-paused .pts-skel__card, .pts-paused .pts-skel__row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .pts-sparkle { opacity: .75; }
  .pts-badge__shine { display: none; }
}

@media (max-width: 719px) {
  .pts-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "first first" "second third"; align-items: stretch; gap: 36px 12px; }
  .pts-place--1 { min-height: 0; }
  .pts-place--2, .pts-place--3 { min-height: 0; padding: 40px 10px 18px; }
  .pts-place__av { width: 62px; height: 62px; font-size: 1.45rem; }
  .pts-place--1:not(.pts-place--joint) .pts-place__av { width: 86px; height: 86px; }
  .pts-place--2 .pts-place__handle, .pts-place--3 .pts-place__handle { font-size: .98rem; }
  .pts-place--2 .pts-place__pts .pts-num, .pts-place--3 .pts-place__pts .pts-num { font-size: 1.08rem; }
  .pts-joint__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 10px; }
  .pts-place--joint { padding: 32px 8px 14px; }
  .pts-place--joint .pts-place__av { width: 56px; height: 56px; font-size: 1.3rem; }
  .pts-place--joint .pts-place__handle { font-size: .95rem; }
  .pts-place--joint .pts-place__pts .pts-num { font-size: 1.05rem; }
  .pts-skel { grid-template-columns: 1fr 1fr; }
  .pts-skel__card { height: 150px; }
  .pts-skel__card--tall { grid-column: 1 / -1; grid-row: 1; height: 190px; }
  .pts-facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pts-hero { grid-template-columns: minmax(0, 1fr) 96px; align-items: start; column-gap: 12px; row-gap: 0; }
  .pts-hero__text { display: contents; }
  .pts-hero__text > * { grid-column: 1; }
  .pts-hero__text > .pts-hero__lede, .pts-hero__text > .pts-fine { grid-column: 1 / -1; }
  .pts-hero__art { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 96px; }
  .pts-hero__coin--a { width: 24px; height: 24px; }
  .pts-hero__coin--b { width: 20px; height: 20px; }
  .pts-hero h1 { font-size: clamp(2rem, 9vw, 2.4rem); }
}
@media (max-width: 560px) {
  .pts-soon { grid-template-columns: 1fr; }
  .pts-soon__icon { width: 52px; height: 52px; }
  .pts-summary { grid-template-columns: 1fr 1fr; }
  .pts-summary .pts-stat:first-child { grid-column: 1 / -1; }
  .pts-task__top { grid-template-columns: auto minmax(0, 1fr); }
  .pts-task__top .pts-coins { grid-column: 2; justify-self: start; }
  .pts-task__action, .pts-task__action .btn { width: 100%; }
  .pts-verify { grid-template-columns: 1fr; }
  .pts-verify .btn, .pts-actions .btn { width: 100%; }
  .pts-row { grid-template-columns: minmax(2.4em, max-content) 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .pts-row__av { width: 36px; height: 36px; }
  .pts-row__handle { font-size: 1rem; }
}
@media (max-width: 340px) {
  .pts-podium { grid-template-columns: 1fr; grid-template-areas: "first" "second" "third"; }
  .pts-joint__grid { grid-template-columns: 1fr; }
}

/* --- responsive --- */
@media (max-width: 900px) {
  .studio__grid { grid-template-columns: 1fr; }
  .teaser { grid-template-columns: 1fr; }
  .growing { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cards2 { grid-template-columns: 1fr; }
  .result__grid { grid-template-columns: 1fr; }
  .result__grid img { margin: 0 auto; }
}
@media (max-width: 420px) {
  .nudge { grid-template-columns: repeat(4, 36px); }
  .teaser__demo { gap: 8px; }
}
/* short landscape screens (phones turned sideways): keep the square stage
   inside the viewport so the photo and the controls are both reachable */
@media (min-width: 640px) and (max-height: 560px) and (orientation: landscape) {
  .stage { max-width: min(560px, 74vh); }
  .studio__grid { grid-template-columns: minmax(0, auto) minmax(280px, 1fr); }
}
/* the header's X button must stay on one line even at 200% text size */
.nav .btn--small { white-space: nowrap; }
/* fieldsets default to min-inline-size: min-content and refuse to shrink; the
   control rows wrap instead, so a narrow column never overflows the viewport */
.control { min-inline-size: 0; }
.control__row { flex-wrap: wrap; }
@media (min-width: 640px) and (max-height: 560px) and (orientation: landscape) {
  .studio__grid { grid-template-columns: min(560px, 74vh) minmax(0, 1fr); }
}
/* the hidden attribute must beat any display rule (the stage's empty state is
   display:flex, and .result / .stage__empty are toggled with `hidden`) */
[hidden] { display: none !important; }

/* ------------------------------------------------------- homepage ants --- */
/* three tiny decorative visitors (js/ants.js). two overlays, no layout, no
   pointer events; the picture layer is clipped by the mascot's rounded box.
   legs and antennae are posed by the script, so nothing animates in CSS */
.potatchi-ants { position: absolute; pointer-events: none; display: block; overflow: visible; }
.potatchi-ants--image { inset: 0; width: 100%; height: 100%; overflow: hidden; }
.potatchi-ants--page { top: 0; left: 0; z-index: 5; }
.potatchi-ants[hidden] { display: none !important; }
.potatchi-ant { fill: #4A3423; stroke: #4A3423; }
.potatchi-ant__seg { fill: url(#potatchi-ant-seg); stroke: none; }
.potatchi-ant__sheen { fill: #FFFFFF; stroke: none; opacity: 0.16; }
.potatchi-ant__shadow { fill: url(#potatchi-ant-shadow); stroke: none; }
.potatchi-ant__leg path, .potatchi-ant__antenna path { fill: none; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.potatchi-ant__antenna path { stroke-width: 0.7; }
@media (prefers-reduced-motion: reduce) { .potatchi-ants { display: none !important; } }

/* Telegram links in the community section (2026-09-18) */
.telegram-links { text-align: center; margin-top: 40px; }
.telegram-links__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
.telegram-links__row .btn { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 14px 18px; }
.telegram-links__hint { display: block; font-size: .8rem; font-weight: 400; opacity: .75; }
.telegram-links__note { margin: 16px auto 0; max-width: 46ch; font-size: .9rem; color: var(--ink-soft, inherit); }

/* launch-section: added by launch/site-launch-section.mjs */
.launch { max-width: 640px; margin: 0 auto; padding: clamp(20px, 4vw, 30px); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius); text-align: center; }
.launch__eyebrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.launch__pill { font-family: 'Space Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--gold-deep); }
.launch__title { margin-top: 6px; font-size: var(--step-2); }
.launch__label { margin-top: 6px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.launch__address { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.launch__code { max-width: 100%; padding: 10px 14px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.88rem; line-height: 1.6; color: var(--brown); background: var(--cream); border: 1px solid var(--line); border-radius: 12px; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; word-break: break-all; }
.launch__copy { min-height: 44px; }
.launch__status { min-height: 1.3em; margin-top: 6px; font-size: 0.85rem; color: var(--brown-soft); }
.launch__icons { display: flex; justify-content: center; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.launch__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.launch__icon img { width: 28px; height: 28px; border-radius: 8px; }
.launch__icon:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 16px var(--shadow-1); }
.launch__icon:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.launch__icon::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 5px 9px; font-size: .75rem; line-height: 1.3; color: var(--surface); background: var(--brown); border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 2; }
.launch__icon:hover::after, .launch__icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.launch__stats { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.launch__stat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.launch__stat-list dt { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brown-soft); }
.launch__stat-list dd { margin: 2px 0 0; font-family: 'Fredoka', ui-rounded, system-ui, sans-serif; font-size: 1.15rem; color: var(--brown); font-variant-numeric: tabular-nums; }
.launch__stat-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-top: 8px; font-size: .8rem; color: var(--brown-soft); }
.launch__more { color: var(--gold-deep); white-space: nowrap; }
.launch__note { margin: 14px auto 0; max-width: 62ch; font-size: .8rem; line-height: 1.55; color: var(--brown-soft); }
.launch__note a { color: var(--gold-deep); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--surface); border: 1px solid var(--line); color: var(--brown-soft); }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill[data-state="live"] { color: #2F7A45; border-color: #BFDCC6; }
.status-pill[data-state="delayed"] { color: #8A5A16; border-color: #EBD3A6; }
.status-pill[data-state="unavailable"] { color: #A33B3B; border-color: #EDC3C3; }
@media (max-width: 420px) { .launch__code { font-size: .8rem; } .launch__stat-list dd { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .launch__icon, .launch__icon::after { transition: none; } .launch__icon:hover { transform: none; } }
/* launch-section: end */