/* =============================================================================
   LANDING — the front page (2026-10-28, the "legend" rebuild)
   =============================================================================
   The page is one day in the grove: a fixed sky behind everything changes
   from dawn to night with the scroll (landing/grove.js writes --sky-top,
   --sky-bottom, the sun's place and --night). Sections sit on that sky.

   The sky is an illustration, so it is the same in light and dark theme, and
   the text that sits directly on it uses the page's own fixed inks below
   (owner, 2026-10-28: "change the colours as you like" for this page). Cards
   keep the app's clay tokens and follow the theme like every other screen.

   Motion: JS adds .lg--motion only when motion is allowed; every
   hidden-until-revealed state is scoped to it. base.css shortens all CSS
   animations to nothing for the OS setting and the calmer-animations switch.
   ============================================================================= */

.lg {
  --lg-ink: #1d2b22;
  --lg-ink-soft: #4b5b4d;
  --lg-accent: #c2410c;
  --lg-gold: #ffd166;
  --lg-moon: #fbf6e6;
  --lg-moon-soft: #d9d3ee;
  --lg-forest: #1f5b3d;
  --lg-forest-2: #2f7d52;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  color: var(--lg-ink);
}
.lg h1, .lg h2, .lg h3 { margin: 0; color: var(--lg-ink); }
.lg p { margin: 0; color: var(--lg-ink-soft); }
/* Full-bleed sections are 100vw; the app shell clips the spare edge, so the
   page never scrolls sideways (on <body> it would propagate to the viewport). */
html.is-landing .app { overflow-x: clip; }
html.is-landing .main { padding-bottom: 0; }

.lg-full { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); }
.lg-wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--s-4); }
.lg-band.lg-wrap { padding-inline: 0; }
.lg-band { display: flex; flex-direction: column; gap: var(--s-5); }
.lg-head { display: flex; flex-direction: column; gap: var(--s-2); max-width: 46rem; }
.lg-head h2, .lg-tree__text h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.lg-head p { font-size: var(--t-lg); }

.words .word { display: inline-block; }
.word--accent { color: var(--lg-accent); }
.lg--motion .word--wait, .lg--motion .lg-char--wait { opacity: 0; }

/* Scroll reveal: rise in, staggered by --d. */
.lg--motion [data-reveal] {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition: opacity 0.8s ease-out var(--d, 0ms), transform 0.9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms);
}
.lg--motion [data-reveal].is-in { opacity: 1; transform: none; }
/* A redraw in the other language appears in place, without rising again. */
.lg--instant [data-reveal] { transition: none !important; }

/* =============================================================================
   THE SKY (fixed, behind everything) AND THE PARTICLES
   ============================================================================= */

.grove-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top, #ffc4a0) 0%, var(--sky-bottom, #fff0de) 100%);
  overflow: hidden;
}
.grove-sun {
  position: absolute;
  left: var(--sun-x, 10vw);
  top: var(--sun-y, 70vh);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  translate: -50% -50%;
  opacity: var(--sun-o, 1);
  background: radial-gradient(circle at 40% 38%, #fffbe6 0 22%, #ffe27a 45%, #ffc93d 70%);
  box-shadow: 0 0 60px 24px rgba(255, 214, 110, 0.55), 0 0 180px 80px rgba(255, 220, 140, 0.35);
}
/* Towards evening the sun warms to orange. */
.grove-sun::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 40% 38%, #ffd2a1 0 20%, #ff9a4d 55%, #f0612e 80%);
  opacity: var(--sun-warm, 0);
}
.grove-moon {
  position: absolute;
  right: 12vw;
  top: 13vh;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  opacity: var(--night, 0);
  background: radial-gradient(circle at 34% 34%, #fffdf3 0 40%, #efe7cc 75%);
  box-shadow:
    inset -14px -10px 0 rgba(180, 170, 140, 0.25),
    0 0 50px 16px rgba(240, 236, 210, 0.35);
}
.grove-stars {
  position: absolute;
  inset: 0;
  opacity: var(--night, 0);
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 140px 80px, #fff, transparent),
    radial-gradient(2px 2px at 90px 190px, #fffbe0, transparent),
    radial-gradient(1.3px 1.3px at 210px 140px, #fff, transparent),
    radial-gradient(1.8px 1.8px at 260px 40px, #e8f0ff, transparent),
    radial-gradient(1.1px 1.1px at 40px 250px, #fff, transparent);
  background-size: 300px 280px;
}
.grove-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2.2px 2.2px at 70px 60px, #fff, transparent),
    radial-gradient(1.6px 1.6px at 230px 210px, #fffbe0, transparent),
    radial-gradient(1.4px 1.4px at 170px 20px, #fff, transparent);
  background-size: 360px 330px;
}
.lg--motion .grove-stars::after { animation: lg-twinkle 3.2s ease-in-out infinite; }

.grove-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* =============================================================================
   HERO — a meadow at dawn
   ============================================================================= */

.lg-hero {
  --mx: 0;
  --my: 0;
  --sy: 0;
  min-height: min(94vh, 900px);
  margin-top: calc(-1 * var(--s-5));
  padding: var(--s-6) 0 230px;
  display: flex;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}
.lg-hero__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--s-6);
  cursor: default;
}
.lg-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }

.lg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px rgba(120, 70, 30, 0.12);
  font-weight: 800;
  font-size: var(--t-sm);
  color: var(--lg-forest);
  backdrop-filter: blur(6px);
}
.lg-kicker__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #34c06a;
  box-shadow: 0 0 0 0 rgba(52, 192, 106, 0.6);
}
.lg--motion .lg-kicker__dot { animation: lg-ping 1.8s ease-out infinite; }

.lg-title {
  font-size: clamp(2.7rem, 6.6vw, 5.3rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--lg-forest) !important;
}
.lg-word { display: inline-block; white-space: nowrap; position: relative; }
.lg-char { display: inline-block; }
.lg-word--accent { color: var(--lg-accent); }
/* A hand-drawn underline swoosh under the accent words. */
.lg-title .lg-word--accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 50 4, 120 2, 197 9' fill='none' stroke='%23f4a62a' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left center;
}
.lg--motion .lg-title .lg-word--accent::after { animation: lg-draw 0.9s cubic-bezier(.6, 0, .3, 1) 1.2s both; }

.lg-lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; max-width: 34rem; color: var(--lg-ink) !important; }
.lg-note { font-size: var(--t-sm); }

.lg-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lg-cta--center { justify-content: center; }
.lg-cta .btn {
  min-height: 60px;
  padding-inline: 30px;
  font-size: 1.06rem;
  text-decoration: none;
  border-radius: 999px;
}
.lg-magnet { translate: var(--tx, 0px) var(--ty, 0px); transition: translate 0.25s cubic-bezier(.2, .8, .2, 1), transform 0.2s; }

/* A slow light sweep across the main buttons. */
.lg-shine { position: relative; overflow: hidden; isolation: isolate; }
.lg-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
}
.lg--motion .lg-shine::after { animation: lg-shine 4s ease-in-out 1.6s infinite; }

.lg-tour {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-weight: 800;
  color: var(--lg-ink);
  cursor: pointer;
}
.lg-tour__play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding-left: 3px;
  background: linear-gradient(150deg, #ff7a59, #e8456b);
  color: #fff;
  box-shadow: 0 8px 20px rgba(232, 69, 107, 0.4);
}
.lg--motion .lg-tour__play { animation: lg-ping-rose 2.2s ease-out infinite; }
.lg-tour:hover .lg-tour__play { transform: scale(1.08); }

/* Hazel with a turning sunburst behind her. */
.lg-hero__art { position: relative; display: grid; place-items: center; min-height: 420px; }
.lg-halo {
  position: absolute;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 246, 214, 0.95) 0 28%, rgba(255, 226, 150, 0.45) 46%, transparent 68%),
    repeating-conic-gradient(from 0deg, rgba(255, 236, 170, 0.35) 0deg 8deg, transparent 8deg 22deg);
  mask: radial-gradient(circle, #000 40%, transparent 70%);
}
.lg--motion .lg-halo { animation: lg-spin 60s linear infinite; }
.lg-hazel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  height: auto;
  cursor: pointer;
  filter: drop-shadow(14px 22px 24px rgba(90, 50, 20, 0.25));
  translate: calc(var(--mx) * -14px) calc(var(--my) * -10px);
  transition: translate 0.35s ease-out;
}
.lg-float {
  position: absolute;
  z-index: 3;
  font-size: 2.6rem;
  line-height: 1;
  translate: calc(var(--mx) * var(--depth, 24px)) calc(var(--my) * var(--depth, 24px));
  transition: translate 0.4s ease-out;
  pointer-events: none;
}
.lg-float .art, .lg .art { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
.lg-float--a { left: 0; top: 12%; --depth: 34px; font-size: 3.1rem; }
.lg-float--b { right: 4%; top: 2%; --depth: 22px; }
.lg-float--c { left: 8%; bottom: 8%; --depth: 40px; font-size: 2.2rem; }
.lg-float--d { right: 10%; top: 42%; --depth: 18px; font-size: 2.2rem; }
.lg-float--e { left: 36%; top: -4%; --depth: 46px; font-size: 2.4rem; }
.lg-float--f { right: -2%; bottom: 14%; --depth: 30px; font-size: 2.8rem; }
.lg-float--g { left: 18%; top: 44%; --depth: 52px; font-size: 1.9rem; }
.lg--motion .lg-float > .art { animation: lg-bob 4.6s ease-in-out infinite; }
.lg--motion .lg-float--b > .art { animation-duration: 5.3s; animation-delay: -1s; }
.lg--motion .lg-float--c > .art { animation-duration: 3.9s; animation-delay: -2s; }
.lg--motion .lg-float--d > .art { animation-duration: 5.8s; animation-delay: -3s; }
.lg--motion .lg-float--e > .art { animation-duration: 4.8s; animation-delay: -1.5s; }
.lg--motion .lg-float--f > .art { animation-duration: 5.5s; animation-delay: -0.5s; }
.lg--motion .lg-float--g > .art { animation: lg-buzz 6s ease-in-out infinite; }

/* Three hills, each sinking at its own speed as the hero scrolls away. */
.lg-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: 1; pointer-events: none; }
.lg-hill { position: absolute; left: -3%; width: 106%; bottom: 0; height: 100%; }
.lg-hill--far { fill: #bfe2b2; translate: calc(var(--mx) * -8px) calc(var(--sy) * 0.18px); }
.lg-hill--mid { fill: #86c896; translate: calc(var(--mx) * -18px) calc(var(--sy) * 0.1px); }
.lg-hill--mid .lg-trees { fill: #3f8f5e; }
.lg-hill--near { fill: #4fae74; translate: calc(var(--mx) * -30px) 0; }

.lg-meadow { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.grove-plant {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: calc(2.8rem * var(--s, 1));
  translate: -50% -88%;
  transform-origin: 50% 100%;
}
.grove-plant .art { width: 1em; height: 1em; display: block; }
.lg--motion .grove-plant.is-grown { animation: lg-sway var(--sway, 3s) ease-in-out infinite; }

.lg-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--lg-forest);
  font-weight: 800;
  font-size: var(--t-sm);
  box-shadow: 0 8px 20px rgba(20, 60, 30, 0.18);
  pointer-events: none;
  transition: opacity 0.5s;
}
.lg-hint.is-gone { opacity: 0 !important; }

/* =============================================================================
   THE RIBBON
   ============================================================================= */

.lg-ribbon { height: 150px; margin-block: calc(-1 * var(--s-6)) calc(-1 * var(--s-4)); z-index: 2; }
.lg-ribbon__row {
  position: absolute;
  left: -5%;
  width: 110%;
  top: 50%;
  overflow: hidden;
  padding: 14px 0;
  box-shadow: 0 14px 30px rgba(20, 50, 30, 0.22);
}
.lg-ribbon__row--front {
  rotate: -2.5deg;
  translate: 0 -50%;
  background: linear-gradient(90deg, var(--lg-forest), var(--lg-forest-2), var(--lg-forest));
  color: var(--lg-moon);
}
.lg-ribbon__row--back {
  rotate: 2deg;
  translate: 0 -40%;
  background: var(--lg-gold);
  color: #4a3200;
}
.lg-ribbon__track { display: flex; width: max-content; gap: 44px; padding-right: 44px; }
.lg--motion .lg-ribbon__row--front .lg-ribbon__track { animation: lg-marquee 30s linear infinite; }
.lg--motion .lg-ribbon__row--back .lg-ribbon__track { animation: lg-marquee 38s linear infinite reverse; }
.lg-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lg-ribbon__row--back .lg-ribbon__item { font-size: 1.1rem; font-weight: 800; }
.lg-ribbon__star { color: #c2410c; }

/* =============================================================================
   THE STORY FRAME — a turning rainbow edge around the player
   ============================================================================= */

.lg-storyframe {
  position: relative;
  padding: 5px;
  border-radius: 40px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px rgba(40, 60, 90, 0.18);
}
.lg-storyframe::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from 0deg, #ff8fab, #ffd166, #7bd389, #6cb6ff, #b69cff, #ff8fab);
}
.lg--motion .lg-storyframe::before { animation: lg-spin 9s linear infinite; }
.lg-storyframe .story {
  padding: 14px;
  border-radius: 35px;
  background: var(--clay-surface);
}
.lg-storyframe .story__frame { box-shadow: none; padding: 0; }

/* =============================================================================
   THE STORY PLAYER (landing/story.js)
   ============================================================================= */

.story { display: flex; flex-direction: column; gap: var(--s-3); }

.story__frame {
  position: relative;
  border-radius: var(--r-clay);
  box-shadow: var(--clay);
  background: var(--clay-surface);
  padding: 10px;
}

.story__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-clay) - 8px);
  overflow: hidden;
  container-type: inline-size;
  background: var(--clay-surface-2);
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 5cqi 6cqi 4cqi;
  /* The skill's clay, fading into the surface, with a few soft light spots. */
  background:
    radial-gradient(circle at 14% 78%, rgba(255, 255, 255, 0.55) 0 2.2cqi, transparent 2.4cqi),
    radial-gradient(circle at 86% 22%, rgba(255, 255, 255, 0.45) 0 1.4cqi, transparent 1.6cqi),
    radial-gradient(circle at 72% 88%, rgba(255, 255, 255, 0.4) 0 0.9cqi, transparent 1cqi),
    radial-gradient(ellipse at 50% 120%, var(--clay-tint, var(--clay-reading)) 0%, transparent 70%),
    linear-gradient(180deg, var(--clay-surface) 0%, var(--clay-tint, var(--clay-surface-2)) 160%);
}
.scene__text {
  margin: 0;
  font-size: clamp(1.05rem, 3.6cqi, 2.3rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink);
  max-width: 34ch;
}
.scene .word--accent { color: var(--clay-tint-ink, var(--accent)); }
.scene__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqi;
  min-height: 0;
}

.scene .art { width: 1em; height: 1em; display: block; }

/* Controls sit on the stage's corner, like the badge in the reference. */
.story__ctls {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  display: flex;
  gap: var(--s-2);
}
.story__ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--clay-surface);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: var(--t-sm);
  box-shadow: var(--clay-sm);
  cursor: pointer;
}
.story__ctl:active { box-shadow: var(--clay-pressed); }
.story__ctl[aria-pressed='true'].story__ctl--sound { background: var(--clay-reading); }
.story__ctlart { width: 20px; height: 20px; font-size: 18px; }

/* Chapter tabs: the active one fills like a progress bar. */
.story__tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}
.story__tab {
  --p: 0;
  position: relative;
  overflow: hidden;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--clay-surface);
  color: var(--ink);
  box-shadow: var(--clay-sm);
  font: inherit;
  font-weight: 800;
  font-size: var(--t-sm);
  cursor: pointer;
  padding: 0 var(--s-2);
}
.story__tablabel { position: relative; z-index: 1; }
.story__fill {
  position: absolute;
  inset: 0;
  background: var(--clay-tint, var(--clay-reading));
  transform-origin: left center;
  transform: scaleX(var(--p));
}
.story__tab[aria-selected='true'] { color: var(--clay-tint-ink, var(--ink)); box-shadow: var(--clay-pressed); }
.story__tab.is-done .story__fill { opacity: 0.55; }
.story__tab:focus-visible { outline: 3px solid var(--clay-primary-deep); outline-offset: 3px; }

/* The little tick-mark timeline under the tabs. */
.story__ticks {
  height: 8px;
  margin: 0 6px;
  background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 9px);
  border-radius: 4px;
  opacity: 0.8;
}

/* --- scene pieces ------------------------------------------------------------------ */

.sc-char { width: 22cqi; flex: none; }
.sc-char .art { width: 100%; height: auto; }
.sc-char--right { position: absolute; right: 0; bottom: 0; width: 19cqi; }
.sc-char--left { align-self: flex-end; }

.sc-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 15cqi;
  aspect-ratio: 1;
  border-radius: 3.4cqi;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-size: 8.5cqi;
}
.sc-tile.is-right { box-shadow: var(--clay-sm), 0 0 0 0.6cqi var(--clay-reading-ink); }
.sc-badge {
  position: absolute;
  top: -1.6cqi;
  right: -1.6cqi;
  display: grid;
  place-items: center;
  width: 5cqi;
  height: 5cqi;
  border-radius: 50%;
  background: var(--clay-primary-btn);
  color: var(--clay-primary-ink);
  font-weight: 900;
  font-size: 2.6cqi;
  box-shadow: var(--clay-sm);
  opacity: 0;
}
.is-right > .sc-badge { opacity: 1; }
.sc-badge--inline { position: static; opacity: 1; }

.sc-caption {
  padding: 1.2cqi 2.4cqi;
  border-radius: 2.4cqi;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-weight: 800;
  font-size: 2.6cqi;
  color: var(--clay-tint-ink, var(--ink));
  white-space: nowrap;
}
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqi;
  padding: 1cqi 2.2cqi;
  border-radius: 999px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-weight: 800;
  font-size: 2.3cqi;
  color: var(--ink);
}
.sc-chip .art { font-size: 3.2cqi; }
.sc-chip.is-good { background: var(--clay-reading); color: var(--clay-reading-ink); }

.sc-row { display: flex; align-items: center; gap: 3cqi; }

/* garden */
.sc-garden { width: 100%; justify-content: center; gap: 6cqi; }
.sc-potwrap { display: flex; flex-direction: column; align-items: center; }
.sc-plant { font-size: 13cqi; height: 14cqi; display: flex; align-items: flex-end; position: relative; z-index: 1; margin-bottom: -2cqi; }
.sc-pot {
  width: 20cqi;
  height: 10cqi;
  border-radius: 1.5cqi 1.5cqi 6cqi 6cqi;
  background: linear-gradient(180deg, var(--soil-mound), var(--soil-speck));
  box-shadow: var(--clay-sm);
}
.sc-drops { display: flex; flex-direction: column; gap: 1.6cqi; font-size: 5.5cqi; }
.sc-drop { opacity: 0.22; filter: grayscale(0.6); }
.sc-drop.is-full { opacity: 1; filter: none; }

/* listening */
.sc-listen { flex-direction: column; gap: 3cqi; width: 100%; }
.sc-speaker {
  position: relative;
  display: grid;
  place-items: center;
  width: 12cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-size: 6.5cqi;
}
.sc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.5cqi solid var(--clay-listening-ink);
  opacity: 0;
}
.sc-tiles { display: flex; gap: 3cqi; }
.sc-pointer { position: absolute; left: 0; top: 0; font-size: 6cqi; opacity: 0; z-index: 4; pointer-events: none; }
.sc-fly { position: absolute; left: 50%; top: 45%; font-size: 7cqi; opacity: 0; z-index: 4; }

/* speaking */
.sc-speak { flex-direction: column; gap: 2.6cqi; width: 100%; align-items: flex-start; padding-left: 4cqi; }
.sc-mic {
  display: grid;
  place-items: center;
  width: 12cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm), 0 0 0 1cqi var(--clay-speaking);
  font-size: 6.5cqi;
}
.sc-wave { display: flex; align-items: center; gap: 0.9cqi; height: 10cqi; }
.sc-bar {
  width: 1.3cqi;
  height: 100%;
  border-radius: 1cqi;
  background: var(--clay-speaking-ink);
  transform: scaleY(0.2);
  opacity: 0.85;
}

/* reading */
.sc-read { gap: 4cqi; width: 100%; justify-content: center; }
.sc-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqi;
  padding: 3cqi 4cqi;
  border-radius: 3cqi;
  background: var(--clay-surface);
  box-shadow: var(--clay);
}
.sc-book__line { font-size: 3.6cqi; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sc-word { padding: 0.2cqi 0.6cqi; border-radius: 1cqi; transition: background-color 0.15s, color 0.15s; }
.sc-word.is-lit { background: var(--clay-writing); color: var(--clay-writing-ink); }
.sc-book__pics { display: flex; gap: 3cqi; font-size: 8cqi; min-height: 8cqi; }
.sc-fruit { opacity: 0; }

/* writing */
.sc-write { flex-direction: column; gap: 3cqi; width: 100%; }
.sc-slots, .sc-bank { display: flex; gap: 2cqi; justify-content: center; min-height: 8cqi; }
.sc-slot {
  display: grid;
  place-items: center;
  min-width: 14cqi;
  height: 8cqi;
  border-radius: 2cqi;
  border: 0.35cqi dashed var(--clay-writing-ink);
  opacity: 0.85;
}
.sc-slot.is-full { border-style: solid; border-color: transparent; }
.sc-wordtile {
  display: grid;
  place-items: center;
  min-width: 12cqi;
  height: 7cqi;
  padding: 0 2cqi;
  border-radius: 2cqi;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-weight: 900;
  font-size: 3.4cqi;
  color: var(--ink);
  position: relative;
  z-index: 2;
}
.sc-done { display: flex; align-items: center; gap: 2cqi; font-size: 8cqi; opacity: 0; }
.sc-done .sc-badge { width: 5.5cqi; height: 5.5cqi; font-size: 3cqi; }

/* stickers */
.sc-stickers { gap: 5cqi; width: 100%; justify-content: flex-start; padding-left: 6cqi; }
.sc-book--grid {
  display: grid;
  grid-template-columns: repeat(3, 10cqi);
  gap: 2cqi;
  padding: 3cqi;
}
.sc-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 2.4cqi;
  box-shadow: var(--clay-pressed);
  font-size: 3.6cqi;
  font-weight: 900;
  color: var(--ink-soft);
}
.sc-cell.is-full { box-shadow: none; font-size: 7cqi; }
.sc-chip--sun { font-size: 2.8cqi; }
.sc-chip--sun b { font-size: 4cqi; color: var(--clay-writing-ink); display: inline-block; }

/* =============================================================================
   THE TREE — the level ladder, grown by scrolling (landing/tree.js)
   ============================================================================= */

.lg-tree { height: 300vh; }
.lg-tree--still { height: auto; }
.lg-tree__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 70px;
}
.lg-tree--still .lg-tree__stick { position: static; height: auto; padding-block: var(--s-6); }
.lg-tree__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.lg-tree__text { display: flex; flex-direction: column; gap: var(--s-4); }
.lg-tree__text > p:not(.lg-fine) { font-size: var(--t-lg); }
.lg-fine { font-size: var(--t-xs); max-width: 36rem; }

.tree-box {
  position: relative;
  height: min(76vh, 660px);
  aspect-ratio: 400 / 600;
  justify-self: center;
}
.tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tree-bark-a { stop-color: #6e4122; }
.tree-bark-b { stop-color: #b27a44; }
.tree-ground { fill: rgba(40, 90, 50, 0.22); }
.tree-trunk, .tree-branch {
  fill: none;
  stroke: url(#bark);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.tree-trunk { stroke-width: 24; }
.tree-branch { stroke-width: 12; }
.tree-crown {
  --k: 0;
  fill: #5fbf7d;
  opacity: calc(var(--k) * 0.95);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(var(--k));
}
.tree-crown circle:nth-child(odd) { fill: #4aa96a; }

.tree-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
  transition: opacity 0.4s, filter 0.4s;
}
.lg--motion .tree-node:not(.is-lit) { opacity: 0.35; filter: grayscale(1); }
.tree-node__art {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 2.1rem;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.tree-node.is-lit .tree-node__art { box-shadow: var(--clay-sm), 0 0 0 4px var(--lg-gold), 0 0 28px 6px rgba(255, 209, 102, 0.55); }
.tree-node__cefr {
  /* "Pre-A2" sits near the edge of the tree on a phone and broke in two. */
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--lg-forest);
  color: #fff;
  font-weight: 900;
  font-size: var(--t-xs);
}
.tree-leaf {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  font-size: 1.9rem;
  opacity: 0;
  scale: 0.2;
  transition: opacity 0.4s, scale 0.5s cubic-bezier(.3, 1.5, .5, 1);
}
.tree-leaf.is-on { opacity: 1; scale: 1; }
.lg--motion .tree-leaf.is-on .art { animation: lg-sway 3.4s ease-in-out infinite; }

.tree-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: 30px;
  background: var(--clay-surface);
  box-shadow: var(--clay);
}
.tree-card__art {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  font-size: 2.8rem;
  background: var(--clay-reading);
  box-shadow: var(--clay-sm);
}
.tree-card__who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tree-card__name { font-size: 1.6rem; font-weight: 900; color: var(--ink); line-height: 1; }
.tree-card__cefr {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--lg-gold);
  color: #4a3200;
  font-weight: 900;
}
.tree-card small { color: var(--ink-soft); }
.tree-card__meter { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.tree-card__meter small { font-weight: 700; }
.tree-card__band { font-size: 1.5rem; font-weight: 900; color: var(--clay-primary-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tree-card__bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--clay-pressed, #eee); box-shadow: var(--clay-pressed); overflow: hidden; }
.tree-card__bar span {
  --p: 0;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f4a62a, #34c06a);
  transform-origin: left center;
  transform: scaleX(var(--p));
}

/* =============================================================================
   SKILLS — four clay islands that tilt toward the pointer
   ============================================================================= */

.lg-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.lg-skill {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 280px;
  padding: 26px 24px;
  border-radius: 34px;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 22px 40px rgba(60, 40, 30, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.25s ease-out, box-shadow 0.3s;
}
.lg-skill[data-skill='speaking'] { background: linear-gradient(160deg, #ffe4ec, #ffbfd2); --ink-s: #8e1f45; }
.lg-skill[data-skill='listening'] { background: linear-gradient(160deg, #e2f1ff, #b6d8ff); --ink-s: #1a4f82; }
.lg-skill[data-skill='reading'] { background: linear-gradient(160deg, #e0f7e8, #a9e4c0); --ink-s: #1b5a35; }
.lg-skill[data-skill='writing'] { background: linear-gradient(160deg, #fff4cf, #ffdc85); --ink-s: #6e4703; }
.lg--motion .lg-skill[data-reveal].is-in { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.25s ease-out, opacity 0.8s ease-out var(--d, 0ms); }
.lg-skill:hover { box-shadow: 0 30px 60px rgba(60, 40, 30, 0.24), inset 0 2px 0 rgba(255, 255, 255, 0.8); }
.lg-skill b { font-size: 1.45rem; font-weight: 900; color: var(--ink-s); margin-top: auto; }
.lg-skill__text { color: #2a2420; line-height: 1.45; }
.lg-skill__icon { font-size: 4.4rem; transform: translateZ(50px); width: max-content; }
.lg--motion .lg-skill__icon .art { animation: lg-bob 4.4s ease-in-out infinite; }
.lg--motion .lg-skill:nth-child(2) .lg-skill__icon .art { animation-delay: -1.1s; }
.lg--motion .lg-skill:nth-child(3) .lg-skill__icon .art { animation-delay: -2.2s; }
.lg--motion .lg-skill:nth-child(4) .lg-skill__icon .art { animation-delay: -3.3s; }
.lg-skill__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.65), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.lg-skill:hover .lg-skill__glare { opacity: 1; }

/* =============================================================================
   TESTS BETWEEN LEVELS — the path up, and the certificate at the top
   ============================================================================= */

.lg-cert__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: center; }
.lg-cert__side { display: flex; flex-direction: column; gap: var(--s-5); }
.lg-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; position: relative; }
.lg-path::before {
  content: '';
  position: absolute;
  left: 33px;
  top: 30px;
  bottom: 30px;
  border-left: 4px dashed rgba(47, 125, 82, 0.35);
}
.lg-path__level {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.lg-path__level b { font-size: 1.15rem; font-weight: 900; color: var(--lg-forest); }
.lg-path__art {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.9rem;
  background: var(--clay-reading);
  box-shadow: var(--clay-pressed);
}
.lg-path__test {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 52px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--t-sm);
  color: var(--clay-listening-ink);
  background: var(--clay-listening);
  box-shadow: var(--clay-sm);
}
.lg-path__test .art { width: 1.3em; height: 1.3em; }
.lg-path__test--final {
  margin-left: 40px;
  padding: 8px 18px;
  font-size: 1rem;
  color: #6e4703;
  background: linear-gradient(160deg, #fff4cf, #ffd166);
  box-shadow: var(--clay-sm), 0 0 0 4px rgba(255, 209, 102, 0.35);
}
.lg-cert__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg-cert__points li { display: flex; gap: 10px; align-items: baseline; color: var(--lg-ink-soft); line-height: 1.45; }
.lg-cert__points li > span { color: var(--lg-forest-2); font-weight: 900; }
.lg-cert__card { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.lg-cert__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(60, 40, 30, 0.2), 0 0 0 1px rgba(236, 217, 168, 0.8);
  transition: transform 0.5s cubic-bezier(.3, 1.3, .5, 1);
}
.lg--motion .lg-cert__card[data-reveal] img { transform: rotate(-2deg); }
.lg--motion .lg-cert__card[data-reveal].is-in img { transform: rotate(-1.2deg); }
.lg--motion .lg-cert__card:hover img { transform: rotate(0deg) scale(1.015); }
.lg-cert__card figcaption { text-align: center; color: var(--lg-ink-soft); font-size: var(--t-sm); font-weight: 700; }
@media (max-width: 880px) {
  .lg-cert__grid { grid-template-columns: 1fr; }
  .lg-cert__card { order: -1; }
}

/* =============================================================================
   THREE DROPS A DAY — a drop travels and waters each pot
   ============================================================================= */

.lg-day__row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.lg-day__track {
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 56px;
  border-top: 4px dashed rgba(47, 125, 82, 0.4);
}
.lg-day__drop { position: absolute; left: 0; top: 0; font-size: 2.4rem; opacity: 0; translate: 0 0; z-index: 2; }
.lg-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: 30px;
  background: var(--clay-surface);
  box-shadow: var(--clay);
}
.lg-step h3 { font-size: 1.3rem; font-weight: 900; color: var(--ink); }
.lg-step p { color: var(--ink-soft); }
.lg-step__pot {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-top: -2px;
  border-radius: 50%;
  font-size: 3rem;
  background: var(--clay-reading);
  box-shadow: var(--clay-pressed);
  transition: box-shadow 0.4s;
}
.lg--motion .lg-step:not(.is-hit) .lg-step__plant { filter: grayscale(1); opacity: 0.45; }
.lg-step.is-hit .lg-step__pot { box-shadow: var(--clay-sm), 0 0 0 5px rgba(52, 192, 106, 0.35), 0 0 30px rgba(52, 192, 106, 0.45); }
.lg-step__plant { transition: filter 0.4s, opacity 0.4s; }
.lg-step__num {
  position: absolute;
  right: -6px;
  top: -6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--clay-primary-btn), var(--clay-primary-deep));
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: var(--clay-sm);
}

/* =============================================================================
   THE VAULT — the grown-ups' corner locks itself
   ============================================================================= */

.lg-vault {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border-radius: 36px;
  background: radial-gradient(circle at 15% 20%, #6a52c9 0%, transparent 55%), linear-gradient(150deg, #2a2156, #3f2f8f);
  box-shadow: 0 30px 60px rgba(40, 20, 90, 0.35);
  transition: box-shadow 0.6s;
}
.lg-vault.is-locked { box-shadow: 0 30px 60px rgba(40, 20, 90, 0.35), 0 0 0 4px rgba(124, 230, 160, 0.6); }
.lg-vault h2 { color: #fff !important; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900; }
.lg-vault p { color: var(--lg-moon-soft) !important; margin-top: var(--s-2); }
.lg-vault__side { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.lg-vault__lock {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 34px;
  font-size: 4rem;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 12px 30px rgba(0, 0, 0, 0.25);
}
.lg-vault__dots { display: flex; gap: 10px; }
.lg-vault__dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); }
.lg-vault__dot.is-on { background: var(--lg-gold); border-color: var(--lg-gold); box-shadow: 0 0 12px rgba(255, 209, 102, 0.8); }
.lg-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.lg-fact {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 800;
  font-size: var(--t-sm);
}

/* =============================================================================
   NIGHT — the close and the footer, under the stars
   ============================================================================= */

.lg-night { padding: 160px 0 var(--s-5); margin-top: var(--s-6); }
.lg-close { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); }
.lg-close__char { width: 170px; filter: drop-shadow(0 0 30px rgba(255, 220, 140, 0.35)); }
.lg-close__char .art { width: 100%; height: auto; }
.lg-close__title {
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lg-moon) !important;
  text-shadow: 0 0 40px rgba(255, 220, 150, 0.35);
}
.lg-close__title .lg-word--accent { color: var(--lg-gold); text-shadow: 0 0 30px rgba(255, 209, 102, 0.7); }
.lg-close > p { color: var(--lg-moon-soft) !important; font-size: var(--t-lg); }
.lg-night .btn:not(.btn--primary) { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.lg-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
  margin-top: 120px;
  padding-top: var(--s-5);
  padding-bottom: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--lg-moon-soft);
  font-size: var(--t-sm);
}
.lg-footer a { color: var(--lg-moon-soft); }
/* The version, on a line of its own under the links. */
.lg-footer__version { flex-basis: 100%; text-align: center; opacity: 0.8; font-size: var(--t-xs); }

.lg-burst { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.lg-burst__bit { position: absolute; font-size: 1.7rem; }
.lg-burst__bit .art { width: 1em; height: 1em; display: block; }

/* --- the top bar while signed out ------------------------------------------- */

.topbar__badge { height: 40px; width: auto; display: block; }
.topbar--public .topbar__link { text-decoration: none; }

/* =============================================================================
   KEYFRAMES
   ============================================================================= */

@keyframes lg-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(5deg); } }
@keyframes lg-buzz {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(30px, -20px) rotate(12deg); }
  50% { transform: translate(60px, 6px) rotate(-6deg); }
  75% { transform: translate(24px, 22px) rotate(8deg); }
}
@keyframes lg-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes lg-spin { to { transform: rotate(360deg); } }
@keyframes lg-marquee { to { transform: translateX(-50%); } }
@keyframes lg-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes lg-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lg-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes lg-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 192, 106, 0.6); } 100% { box-shadow: 0 0 0 12px rgba(52, 192, 106, 0); } }
@keyframes lg-ping-rose { 0% { box-shadow: 0 8px 20px rgba(232, 69, 107, 0.4), 0 0 0 0 rgba(232, 69, 107, 0.45); } 100% { box-shadow: 0 8px 20px rgba(232, 69, 107, 0.4), 0 0 0 16px rgba(232, 69, 107, 0); } }

/* =============================================================================
   NARROWER SCREENS
   ============================================================================= */

@media (max-width: 899.98px) {
  .lg-skills { grid-template-columns: repeat(2, 1fr); }
  .lg-tree__grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .lg-tree__text { gap: var(--s-2); }
  .lg-tree__text > p:not(.lg-fine), .lg-fine { display: none; }
  .tree-box { height: 46svh; }
  .lg-tree__stick { align-items: flex-start; padding-top: 84px; }
  .lg-tree__text h2 { font-size: 1.6rem; }
  .tree-card { padding: var(--s-3) var(--s-4); }
  .lg-tree--still .lg-fine { display: block; }
}
@media (max-width: 700px) {
  .lg { gap: var(--s-7); }
  .lg-hero { padding: var(--s-5) 0 200px; min-height: 0; margin-top: 0; }
  .lg-hero__grid { grid-template-columns: 1fr; text-align: center; gap: var(--s-2); }
  .lg-hero__copy { align-items: center; }
  .lg-hero__art { order: -1; min-height: 0; }
  .lg-hazel { max-width: 230px; }
  .lg-float { font-size: 1.8rem; }
  .lg-cta { justify-content: center; }
  .lg-ribbon__item { font-size: 1.2rem; }
  .lg-ribbon { height: 120px; }
  .lg-day__row { grid-template-columns: 1fr; }
  .lg-day__track { display: none; }
  .lg-vault { grid-template-columns: 1fr; text-align: center; padding: var(--s-5); }
  .lg-facts { justify-content: center; }
  .tree-node__art { width: 46px; height: 46px; font-size: 1.5rem; }
  .tree-card { grid-template-columns: auto 1fr; }
  .tree-card__art { width: 56px; height: 56px; font-size: 2rem; border-radius: 18px; }
  .tree-card__meter { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; width: 100%; }
  .lg-night { padding-top: 100px; }

  /* A phone gets a taller stage and smaller chapter tabs in two rows. */
  .lg-storyframe { border-radius: 30px; }
  .lg-storyframe .story { padding: 8px; border-radius: 26px; }

  .story__stage { aspect-ratio: 4 / 5; }
  .scene { padding: 7cqi 6cqi 6cqi; }
  .scene__text { font-size: clamp(1.15rem, 6.4cqi, 1.6rem); padding-right: 22cqi; }
  .scene__visual { flex-wrap: wrap; }
  .story__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story__ctls { top: 16px; right: 16px; }
  .story__ctltext { display: none; }

  .sc-char { width: 30cqi; }
  .sc-char--right { width: 28cqi; }
  .sc-tile { width: 25cqi; border-radius: 6cqi; font-size: 14cqi; }
  .sc-tiles { gap: 4cqi; }
  .sc-speaker, .sc-mic { width: 20cqi; font-size: 11cqi; }
  .sc-caption { font-size: 4.6cqi; padding: 2cqi 4cqi; border-radius: 4cqi; }
  .sc-chip { font-size: 4.2cqi; padding: 2cqi 4cqi; }
  .sc-chip .art { font-size: 5.6cqi; }
  .sc-wave { height: 16cqi; gap: 1.5cqi; }
  .sc-bar { width: 2.2cqi; }
  .sc-garden { flex-wrap: nowrap; gap: 4cqi; }
  .sc-plant { font-size: 22cqi; height: 24cqi; }
  .sc-pot { width: 32cqi; height: 16cqi; }
  .sc-drops { font-size: 9cqi; }
  .sc-read { flex-direction: column; gap: 2cqi; }
  .sc-read .sc-char { width: 26cqi; align-self: center; }
  .sc-book__line { font-size: 5.2cqi; white-space: normal; text-align: center; }
  .sc-book__pics { font-size: 13cqi; }
  .sc-slot { min-width: 22cqi; height: 13cqi; border-radius: 3cqi; }
  .sc-wordtile { min-width: 20cqi; height: 11cqi; font-size: 5.6cqi; border-radius: 3cqi; }
  .sc-done { font-size: 13cqi; }
  .sc-badge { width: 8cqi; height: 8cqi; font-size: 4.4cqi; }
  .sc-pointer { font-size: 10cqi; }
  .sc-fly { font-size: 12cqi; }
  .sc-stickers { flex-direction: column; padding-left: 0; gap: 4cqi; }
  .sc-book--grid { grid-template-columns: repeat(3, 17cqi); }
  .sc-cell.is-full { font-size: 11cqi; }
  .sc-chip--sun { font-size: 4.4cqi; }
  .sc-chip--sun b { font-size: 6cqi; }
  .sc-stickers .sc-char--right { display: none; }
  .sc-speak { align-items: center; padding-left: 0; }
  .sc-speak .sc-char--right { width: 24cqi; }
}
@media (max-width: 480px) {
  .lg-skills { grid-template-columns: 1fr; }
  .lg-skill { min-height: 0; }
  .lg-cta .btn { width: 100%; }
  .topbar__badge { height: 34px; }
}

/* =============================================================================
   The sign-in / sign-up scene (screens/auth.js, 2026-10-29): the front page's
   dawn — sky, sun, hills, a character — around a clay card with the forms.
   No scroll effects; under reduced motion everything is still.
   ============================================================================= */
html.is-scene .app { overflow-x: clip; }
html.is-scene .main { padding-bottom: 0; }

.auth-scene {
  --as-sky-top: #ffd9b8;
  --as-sky-mid: #ffe9cf;
  --as-sky-low: #e6f4dc;
  --as-ink: #1d2b22;
  --as-ink-soft: #4b5b4d;
  --as-accent: #c2410c;
  --as-forest: #1f5b3d;
  --as-hill-far: #bfe2b2;
  --as-hill-mid: #86c896;
  --as-hill-near: #4fae74;
  --as-trees: #3f8f5e;
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * var(--s-5));
  min-height: calc(100vh - 80px);
  padding: var(--s-7) var(--s-4) 190px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--as-sky-top) 0%, var(--as-sky-mid) 45%, var(--as-sky-low) 100%);
  color: var(--as-ink);
}
:root[data-theme='dark'] .auth-scene {
  --as-sky-top: #1c2340;
  --as-sky-mid: #2a3157;
  --as-sky-low: #20352c;
  --as-ink: #f3efe3;
  --as-ink-soft: #c9cfc4;
  --as-accent: #ffb26b;
  --as-forest: #9fe0b5;
  --as-hill-far: #2b4a3a;
  --as-hill-mid: #23402f;
  --as-hill-near: #1b3326;
  --as-trees: #2f5a41;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .auth-scene {
    --as-sky-top: #1c2340;
    --as-sky-mid: #2a3157;
    --as-sky-low: #20352c;
    --as-ink: #f3efe3;
    --as-ink-soft: #c9cfc4;
    --as-accent: #ffb26b;
    --as-forest: #9fe0b5;
    --as-hill-far: #2b4a3a;
    --as-hill-mid: #23402f;
    --as-hill-near: #1b3326;
    --as-trees: #2f5a41;
  }
}

.auth-scene__sun {
  position: absolute;
  left: 6%;
  top: 46%;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffbe8 0 30%, #ffe08a 60%, #ffc95c 100%);
  box-shadow: 0 0 70px 30px rgba(255, 214, 120, 0.45);
  z-index: 0;
}
:root[data-theme='dark'] .auth-scene__sun { background: radial-gradient(circle at 40% 38%, #fffdf2 0 40%, #e9e3cc 100%); box-shadow: 0 0 60px 18px rgba(240, 235, 210, 0.25); }

.auth-scene__hills { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 1; pointer-events: none; }
.auth-hill { position: absolute; left: -3%; width: 106%; bottom: 0; height: 100%; }
.auth-hill--far { fill: var(--as-hill-far); }
.auth-hill--mid { fill: var(--as-hill-mid); }
.auth-hill--mid .auth-trees { fill: var(--as-trees); }
.auth-hill--near { fill: var(--as-hill-near); }

.auth-scene__grid {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: var(--s-7);
  align-items: start;
}
.auth-scene__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-top: var(--s-4); }
.auth-scene__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px rgba(120, 70, 30, 0.12);
  font-weight: 800;
  font-size: var(--t-sm);
  color: #1f5b3d;
}
.auth-scene__dot { width: 10px; height: 10px; border-radius: 50%; background: #34c06a; }
.auth-scene--motion .auth-scene__dot { animation: lg-ping 1.8s ease-out infinite; }
.auth-scene__title {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--as-forest);
}
.auth-scene__title .word--accent { color: var(--as-accent); }
.auth-scene__lead { margin: 0; max-width: 32rem; font-size: var(--t-lg, 1.15rem); color: var(--as-ink-soft); }
.auth-scene__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-scene__fact {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(80, 60, 30, 0.1);
  font-weight: 800;
  font-size: var(--t-sm);
  color: #1f5b3d;
}

.auth-scene__char { position: relative; align-self: center; width: min(320px, 70%); margin-top: var(--s-2); }
.auth-scene__char img, .auth-scene__char .art { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(12px 18px 20px rgba(90, 50, 20, 0.22)); }
.auth-scene__char--register { width: min(260px, 60%); }
.auth-scene__halo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 214, 0.9) 0 30%, rgba(255, 226, 150, 0.35) 52%, transparent 70%);
}
.auth-scene--motion .auth-scene__char img,
.auth-scene--motion .auth-scene__char .art { animation: auth-float 5.5s ease-in-out infinite; }
@keyframes auth-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }

.auth-float { position: absolute; z-index: 1; font-size: 2.2rem; line-height: 1; pointer-events: none; }
.auth-float .art { width: 1em; height: 1em; }
.auth-float--a { left: 44%; top: 10%; }
.auth-float--b { right: 4%; top: 6%; font-size: 1.8rem; }
.auth-float--c { left: 3%; top: 22%; font-size: 1.7rem; }
.auth-float--d { right: 46%; bottom: 210px; font-size: 2rem; }
.auth-scene--motion .auth-float > .art { animation: lg-bob 4.8s ease-in-out infinite; }
.auth-scene--motion .auth-float--b > .art { animation-duration: 5.6s; animation-delay: -1s; }
.auth-scene--motion .auth-float--c > .art { animation-duration: 4.2s; animation-delay: -2s; }
.auth-scene--motion .auth-float--d > .art { animation-duration: 6s; animation-delay: -3s; }

.auth-scene__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-clay, 28px);
  background: var(--clay-surface);
  box-shadow: var(--clay);
  color: var(--ink);
}
.auth-scene--motion .auth-scene__card { animation: auth-rise 0.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes auth-rise { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Two pressed-in tabs: sign in / create an account. */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  box-shadow: var(--clay-pressed);
}
.auth-tabs__tab {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.auth-tabs__tab[aria-selected='true'] { background: var(--clay-surface); color: var(--clay-primary-deep); box-shadow: var(--clay-sm); }
.auth-tabs__tab:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

@media (max-width: 860px) {
  .auth-scene { padding: var(--s-5) var(--s-4) 160px; }
  .auth-scene__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .auth-scene__side { align-items: center; text-align: center; padding-top: 0; }
  .auth-scene__facts { justify-content: center; }
  .auth-scene__char { order: -1; width: 150px; margin: 0; }
  .auth-scene__char--register { width: 130px; }
  .auth-scene__lead { font-size: 1rem; }
  .auth-scene__sun { width: 96px; left: auto; right: 6%; top: 3%; }
  .auth-float--a, .auth-float--c, .auth-float--d { display: none; }
  .auth-scene__card { padding: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-scene *, .auth-scene { animation: none !important; }
}