/* ==========================================================================
   Little Orchid — landing stylesheet
   Every token below is transcribed from the shipping Flutter app:
     lib/core/theme/app_theme.dart        colour, type, radii, shadows
     lib/widgets/orchid_widgets.dart      PaperTexturePainter, SectionLabel
     lib/widgets/memory_heat.dart         heat ramp
     lib/features/handwriting/…           田字格 geometry
     web/index.html                       the loader, already CSS
   Shadows are teal (#123B3A), never grey. Material elevation is 0 everywhere:
   depth is a tinted shadow plus a 1px hairline.
   ========================================================================== */

/* ---------- 楷体 — the bundled MOE script, subset to this page ------------ */
@font-face {
  font-family: "OrchidKai";
  src: url("../fonts/orchid-kai-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3000-303F, U+3200-4DBF, U+4E00-9FFF, U+F900-FAFF,
    U+FE30-FE4F, U+FF00-FFEF;
}
@font-face {
  font-family: "OrchidKai";
  src: url("../fonts/orchid-kai-medium-subset.woff2") format("woff2");
  font-weight: 500 900; /* the app bundles two real weights and maps 500–900 to Medium */
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3000-303F, U+3200-4DBF, U+4E00-9FFF, U+F900-FAFF,
    U+FE30-FE4F, U+FF00-FFEF;
}

:root {
  /* brand tokens — OrchidColors, app_theme.dart:5-15 */
  --ink: #123b3a;
  --deep-ink: #082a2a;
  --paper: #f7f1e3;
  --paper-bright: #fffcf4;
  --vermilion: #e35236;
  --sun: #f4cf45;
  --jade: #67b99a;
  --cobalt: #3569c8;
  --lilac: #bfa8e8;
  --coral: #ff8e71;
  --mist: #dce9e2;

  /* Vermilion is the brand accent and stays #E35236 for every rule, fill and
     border. As TEXT below ~18px it fails WCAG AA on both grounds — 3.37:1 on
     cream, 4.4:1 on the night surface — so small accent copy uses --accent-ink
     instead: vermilion darkened toward deepInk by day (4.6:1 on cream) and coral
     by night (the same swap the app makes for its handwriting hint ink,
     handwriting_pad.dart:617-631). */
  --accent-ink: #b74a34;

  /* The 写字 skill card is accented with the ink itself, which is right on cream
     and invisible at night: #123B3A on the dark --surface-bright #16332F is
     1.1:1, so the glyph and the card's dot vanish. It lightens within its own
     hue the way --accent-ink lightens to coral. */
  --ink-accent: var(--ink);

  /* semantic — OrchidPalette.light, app_theme.dart:84-91 */
  --surface: var(--paper);
  --surface-bright: var(--paper-bright);
  --on-surface: var(--deep-ink);
  --on-surface-muted: var(--ink);
  --fill: var(--mist);
  --contrast-panel: var(--deep-ink);

  /* radii actually used in the app */
  --r-tile: 20px;
  --r-card: 26px;
  --r-pad: 28px;
  --r-panel: 30px;
  --r-garden: 38px;
  --r-hero: 42px;
  --r-pill: 999px;

  /* shadows — all #123B3A, opacities lifted from the ARGB constants */
  --sh-hero: 0 20px 38px rgba(18, 59, 58, 0.192); /* 0x31123B3A */
  --sh-panel: 0 18px 34px rgba(18, 59, 58, 0.141); /* 0x24123B3A */
  --sh-pad: 0 12px 24px rgba(18, 59, 58, 0.082); /* 0x15123B3A */
  --sh-seal: 0 6px 12px rgba(18, 59, 58, 0.2); /* 0x33123B3A */
  --sh-lift: 0 12px 24px rgba(18, 59, 58, 0.16);

  /* type — Georgia display + Avenir Next UI, Kai first for Han */
  --kai: "OrchidKai", "Noto Serif SC", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", serif;
  --display: Georgia, "Times New Roman", "Noto Serif SC", serif;
  --ui: "Avenir Next", "Avenir", "Segoe UI Variable Text", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
    Consolas, monospace;

  /* Curves.easeOutCubic / easeInOutCubic — the app's only two curves */
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-io: cubic-bezier(0.645, 0.045, 0.355, 1);

  --gutter: clamp(20px, 5vw, 76px);
  --rule: rgba(18, 59, 58, 0.14);
  --hairline: rgba(18, 59, 58, 0.08);
}

/* Dark mode is explicit. The website and the app both open on the cream day
   palette; a visitor can opt into the night palette with the masthead switch. */
:root[data-theme="dark"] {
  --surface: #0e211f;
  --surface-bright: #16332f;
  --on-surface: #f3eddc;
  --on-surface-muted: #b9ccc4;
  --fill: #204b46;
  --contrast-panel: #1c433e;
  --rule: rgba(185, 204, 196, 0.18);
  --hairline: rgba(185, 204, 196, 0.12);
  --accent-ink: var(--coral);
  --ink-accent: var(--mist);
}

/* ---------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 500 17px/1.55 var(--ui);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 360ms var(--ease), color 360ms var(--ease);
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2.5px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--sun);
  color: var(--deep-ink);
}
.zh {
  font-family: var(--kai);
}
.skip {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 99;
  padding: 12px 20px;
  color: var(--deep-ink);
  background: var(--sun);
  border-radius: var(--r-pill);
  font-weight: 800;
  transition: top 180ms var(--ease);
}
.skip:focus {
  top: 12px;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------- the paper ground ----
   PaperTexturePainter, orchid_widgets.dart:52-110 — a staggered dot weave,
   a warm sun wash top-right, a cool jade wash bottom-left, and a single
   1.2px vermilion orbit. Rows every 38px, columns every 43px, odd rows
   offset +17px, dot radius .65px, ink at 3.5% alpha.
   -------------------------------------------------------------------------- */
.paper {
  position: relative;
  isolation: isolate;
}
/* One page-wide layer, not one per section. Painted per-section it repeats the
   washes at every band and leaves a hard seam on each boundary, which the app
   never shows — PaperPage paints the texture once behind the whole screen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(
      circle at 88% 6%,
      rgba(244, 207, 69, 0.2),
      transparent 46%
    ),
    radial-gradient(circle at 6% 82%, rgba(103, 185, 154, 0.11), transparent 38%),
    radial-gradient(
      circle at 0.65px 0.65px,
      rgba(18, 59, 58, 0.035) 0.65px,
      transparent 0.65px
    ),
    radial-gradient(
      circle at 0.65px 0.65px,
      rgba(18, 59, 58, 0.035) 0.65px,
      transparent 0.65px
    );
  background-size: 100% 100%, 100% 100%, 43px 76px, 43px 76px;
  background-position: 0 0, 0 0, 14px 18px, 31.5px 56px;
  pointer-events: none;
}
:root[data-theme="dark"] body::before {
  background-image: radial-gradient(
      circle at 88% 6%,
      rgba(244, 207, 69, 0.09),
      transparent 46%
    ),
    radial-gradient(
      circle at 6% 82%,
      rgba(103, 185, 154, 0.1),
      transparent 38%
    ),
    radial-gradient(
      circle at 0.65px 0.65px,
      rgba(185, 204, 196, 0.05) 0.65px,
      transparent 0.65px
    ),
    radial-gradient(
      circle at 0.65px 0.65px,
      rgba(185, 204, 196, 0.05) 0.65px,
      transparent 0.65px
    );
}

/* ------------------------------------------------ botanical atmosphere --
   Six real genera from the app become oversized field-guide specimens behind
   the editorial bands. They are deliberately attached to stems and leaves:
   floating flower stickers would lose the revised botanical silhouette. */
main {
  position: relative;
  isolation: isolate;
}
.paper > .wrap,
.ticker {
  position: relative;
  z-index: 2;
}
.flora-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.flora {
  position: absolute;
  display: block;
  width: clamp(180px, 22vw, 360px);
  opacity: 0.12;
  filter: saturate(0.84) drop-shadow(0 18px 32px rgba(18, 59, 58, 0.12));
  transform-origin: 50% 82%;
  animation: botanical-drift 15s var(--ease-io) infinite alternate;
}
.flora svg {
  width: 100%;
  overflow: visible;
}
.flora--one {
  top: 6%;
  right: -8%;
  rotate: 9deg;
}
.flora--two {
  top: 21%;
  left: -9%;
  rotate: -12deg;
  animation-delay: -4s;
}
.flora--three {
  top: 38%;
  right: -11%;
  rotate: 8deg;
  animation-delay: -8s;
}
.flora--four {
  top: 55%;
  left: -8%;
  rotate: -5deg;
  animation-delay: -2s;
}
.flora--five {
  top: 72%;
  right: -10%;
  rotate: 14deg;
  animation-delay: -10s;
}
.flora--six {
  top: 88%;
  left: -9%;
  rotate: -9deg;
  animation-delay: -6s;
}
:root[data-theme="dark"] .flora {
  opacity: 0.16;
  filter: saturate(0.92) drop-shadow(0 20px 38px rgba(0, 0, 0, 0.24));
}
@keyframes botanical-drift {
  from {
    translate: 0 -8px;
  }
  to {
    translate: 0 12px;
  }
}
@media (max-width: 760px) {
  .flora {
    width: 220px;
    opacity: 0.09;
  }
  .flora--one,
  .flora--three,
  .flora--five {
    right: -110px;
  }
  .flora--two,
  .flora--four,
  .flora--six {
    left: -110px;
  }
}
/* the vermilion orbit — a stroked oval at 5.5% alpha, top-right */
.orbit {
  position: absolute;
  top: -30%;
  right: -18%;
  z-index: -1;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  border: 1.2px solid rgba(227, 82, 54, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

/* ------------------------------------------------------------- layout ---- */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band {
  position: relative;
  padding-block: clamp(72px, 11vh, 148px);
  /* the header is sticky at 76px; without this an in-page link lands under it */
  scroll-margin-top: 88px;
}
.band + .band {
  border-top: 1px solid var(--rule);
}

/* SectionLabel, orchid_widgets.dart:113-154 —
   a 30x2 vermilion rule, 10px gap, uppercased 11px/w800/1.3px label. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(20px, 3vw, 34px);
  color: var(--on-surface-muted);
  font: 800 11px/1.2 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 30px;
  height: 2px;
  background: var(--vermilion);
}
.eyebrow--plain {
  color: var(--accent-ink);
}
.eyebrow--plain::before {
  display: none;
}

/* displayLarge / displayMedium — Georgia w700, −2.6/58em and −1.8/40em */
.d1 {
  font: 700 clamp(40px, 7.6vw, 92px) / 0.94 var(--display);
  letter-spacing: -0.0448em;
  color: var(--on-surface);
}
.d2 {
  font: 700 clamp(31px, 4.4vw, 54px) / 1 var(--display);
  letter-spacing: -0.045em;
  color: var(--on-surface);
  text-wrap: balance;
}
.h3 {
  font: 800 clamp(21px, 2vw, 30px) / 1.08 var(--ui);
  letter-spacing: -0.037em;
  color: var(--on-surface);
}
.h4 {
  font: 800 20px/1.2 var(--ui);
  letter-spacing: -0.015em;
}
.lede {
  max-width: 62ch;
  color: var(--on-surface-muted);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}
/* `p` has its margin reset, so consecutive ledes would otherwise run together */
.lede + .lede,
.lede + .note,
.small + .small {
  margin-top: 1em;
}
.small {
  color: var(--on-surface-muted);
  font-size: 15px;
  line-height: 1.5;
}
.meta {
  color: var(--on-surface-muted);
  font: 800 11px/1.4 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.num {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- buttons --
   Vermilion is the accent; SUN is the CTA (deepInk label). FilledButton is
   54px min height / 16px 22px padding / fully round. app_theme.dart:272-300. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 16px 24px;
  color: var(--deep-ink);
  background: var(--sun);
  border-radius: var(--r-pill);
  font: 800 15px/1 var(--ui);
  letter-spacing: 0.2px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(244, 207, 69, 0.42);
}
.btn:active {
  transform: translateY(0);
}
.btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.62;
}
.btn--ghost {
  min-height: 52px;
  padding: 14px 22px;
  color: var(--on-surface);
  background: none;
  border: 1.5px solid var(--on-surface-muted);
}
.btn--ghost:hover {
  color: var(--deep-ink);
  background: var(--on-surface-muted);
  box-shadow: none;
}
:root[data-theme="dark"] .btn--ghost:hover {
  color: var(--surface);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* MetricPill, orchid_widgets.dart:156-243 — 14/11 padding, r18, .12 border */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  font: 800 12px/1 var(--ui);
  letter-spacing: 0.3px;
}
.pill i {
  width: 8px;
  height: 8px;
  background: var(--jade);
  border-radius: 50%;
}

/* PremiumMark, orchid_widgets.dart:287-330 — sun fill, deepInk 12px w800 */
.plus {
  display: inline-block;
  padding: 5px 9px;
  color: var(--deep-ink);
  background: var(--sun);
  border-radius: var(--r-pill);
  font: 800 12px/1 var(--ui);
  letter-spacing: 0.8px;
}

/* The app's own mark, shown as the tile a home screen shows — assets/img/
   icon-192.png, built by tools/build_icons.py. It replaces the vermilion 李
   seal that used to stand here: the site's masthead and the icon a child taps
   should be the same object, and no glyph can stand in for the orchid.
   Radius is 22.4% of the side, the squircle proportion iOS masks an icon to. */
.mark {
  flex: none;
  width: 58px;
  height: 58px;
  /* The tile's ground is the same deep ink as the night surface, so without a
     ring the flower floats on the masthead with no icon around it. */
  border: 1px solid var(--rule);
  border-radius: 13px;
  box-shadow: var(--sh-seal);
}
.mark--sm {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

/* --------------------------------------------------------------- header --
   The nav is annotated the way the product annotates a character: a small 楷体
   label riding above the English one, like 注音 over a glyph. It is always
   present — revealed-on-hover text shifts the row and reads as a gimmick —
   and only its ink changes on hover and for the section being read. */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}
.top[data-stuck="true"] {
  border-bottom-color: var(--rule);
}
.doc-page .top {
  border-bottom-color: transparent;
}
.top__in {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  height: 74px;
}
/* reading progress — a 2px vermilion hairline welded to the header's bottom edge */
.top__rail {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  overflow: hidden;
}
.top__rail i {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: var(--vermilion);
  transition: width 120ms linear;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.brand__zh {
  font: 500 22px/1 var(--kai);
  letter-spacing: 0.04em;
}
.brand__en {
  display: block;
  margin-top: 5px;
  color: var(--on-surface-muted);
  font: 800 9px/1 var(--ui);
  letter-spacing: 0.18em;
}
.nav {
  display: flex;
  gap: clamp(12px, 1.8vw, 26px);
}
.nav a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding-bottom: 7px;
}
.nav__zh {
  font: 500 10px/1 var(--kai);
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  opacity: 0.5;
  transition: opacity 200ms var(--ease);
}
.nav__en {
  font: 800 11.5px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  transition: color 200ms var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1.5px;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.nav a:hover .nav__zh,
.nav a[aria-current] .nav__zh {
  opacity: 1;
}
.nav a:hover .nav__en,
.nav a[aria-current] .nav__en {
  color: var(--on-surface);
}
.nav a:hover::after,
.nav a[aria-current]::after {
  transform: scaleX(1);
}

/* the header CTA sits in a 74px bar, so it is not the 54px page button */
.btn--sm {
  min-height: 42px;
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A compact day/night instrument, not an unlabelled icon. The moving sun and
   moon share one 20px well so the masthead never changes width on toggle. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 13px 8px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-bright) 72%, transparent);
  color: var(--on-surface-muted);
  font: 800 10px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
    background 360ms var(--ease), transform 180ms var(--ease);
}
.theme-toggle:hover {
  color: var(--on-surface);
  border-color: color-mix(in srgb, var(--vermilion) 58%, var(--rule));
  transform: translateY(-1px);
}
.theme-toggle__icons {
  position: relative;
  width: 20px;
  height: 20px;
}
.theme-toggle__icons svg {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 240ms var(--ease), transform 360ms var(--ease);
}
.theme-toggle__moon {
  opacity: 0;
  transform: rotate(-18deg) scale(0.72);
}
:root[data-theme="dark"] .theme-toggle__sun {
  opacity: 0;
  transform: rotate(36deg) scale(0.72);
}
:root[data-theme="dark"] .theme-toggle__moon {
  opacity: 1;
  transform: none;
}
@media (max-width: 700px) {
  .theme-toggle {
    width: 42px;
    justify-content: center;
    padding: 0;
  }
  .theme-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ----------------------------------------------------------- menu button -- */
.burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border-radius: 50%;
  color: var(--on-surface);
}
.burger__lines {
  display: grid;
  gap: 5px;
  width: 20px;
}
.burger__lines i {
  display: block;
  height: 1.6px;
  background: currentColor;
  transition: transform 240ms var(--ease), opacity 200ms var(--ease);
}
.burger[aria-expanded="true"] .burger__lines i:first-child {
  transform: translateY(3.3px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__lines i:last-child {
  transform: translateY(-3.3px) rotate(-45deg);
}

/* ------------------------------------------------------------ menu sheet --
   A full-height paper sheet under the masthead, not a dropdown: on a phone the
   nav is the page for a moment, so the items are set at reading size. */
.sheet {
  position: fixed;
  inset: 74px 0 0;
  z-index: 35;
  display: flex;
  padding-block: clamp(18px, 4vh, 40px) clamp(24px, 5vh, 48px);
  background: var(--surface);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
/* `display: flex` above outranks the UA's `[hidden] { display: none }`, so
   without this the closed sheet stays in the layout: an invisible fixed overlay
   over the whole page that eats every click and answers with one of its own nav
   links. The attribute is the only thing holding the sheet shut before JS runs. */
.sheet[hidden] {
  display: none;
}
.sheet[data-open="true"] {
  opacity: 1;
}
/* the destinations sit at the top, the CTA and the legal pair at the very
   bottom — a sheet with everything bunched under the masthead reads unfinished */
.sheet__in {
  display: grid;
  align-content: space-between;
  gap: clamp(22px, 5vh, 46px);
  flex: 1;
}
.sheet__nav {
  display: grid;
  border-top: 1px solid var(--hairline);
}
.sheet__nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(13px, 2.2vh, 20px) 2px;
  border-bottom: 1px solid var(--hairline);
}
.sheet__nav .num {
  color: var(--accent-ink);
  font: 800 11px/1 var(--ui);
  font-style: normal;
  letter-spacing: 0.1em;
}
.sheet__nav b {
  font: 500 19px/1 var(--kai);
  letter-spacing: 0.06em;
}
.sheet__nav span {
  margin-left: auto;
  font: 700 clamp(21px, 6vw, 30px) / 1 var(--display);
  letter-spacing: -0.01em;
}
.sheet__nav a[aria-current] span {
  color: var(--accent-ink);
}
.sheet__foot {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.sheet__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--on-surface-muted);
  font: 700 12px/1.4 var(--ui);
}
body[data-menu="open"] {
  overflow: hidden;
}

@media (max-width: 1040px) {
  .nav {
    display: none;
  }
  .burger {
    display: grid;
  }
}
@media (max-width: 520px) {
  .top__cta {
    display: none;
  }
}

/* ------------------------------------------------------------- legal bar --
   Privacy and Terms are one pair of documents; the bar makes the other one a
   single click from either, which a footer link never quite manages. */
.docbar {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface-bright) 55%, transparent);
}
.docbar__in {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  min-height: 52px;
  flex-wrap: wrap;
}
.docbar__nav {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  margin-right: auto;
}
.docbar__nav a {
  position: relative;
  padding-block: 6px;
  color: var(--on-surface-muted);
  font: 800 12px/1 var(--ui);
  letter-spacing: 0.06em;
  transition: color 180ms var(--ease);
}
.docbar__nav a:hover {
  color: var(--on-surface);
}
.docbar__nav a[aria-current] {
  color: var(--on-surface);
}
.docbar__nav a[aria-current]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--vermilion);
}
.docbar__k {
  color: var(--accent-ink);
}
@media (max-width: 620px) {
  .docbar__meta {
    display: none;
  }
}

/* ----------------------------------------------------------------- hero --
   The product name 小兰华文 is set as a four-character annotated specimen:
   generous enough to read the bundled 楷体, compact enough to leave air for
   the revised orchid spray beside it. */
.hero {
  position: relative;
  padding-block: clamp(44px, 7vh, 96px) clamp(56px, 8vh, 104px);
  overflow: clip;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  padding-bottom: clamp(28px, 4vw, 52px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: end;
}
@media (max-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
.hero__sub {
  /* Block, so its line boxes are sized by its own strut. Left inline, the h1's
     much larger default strut opens a gap between the two lines on a phone. */
  display: block;
  margin-top: clamp(22px, 2.6vw, 34px);
  font: 700 clamp(26px, 3vw, 40px) / 1.04 var(--display);
  letter-spacing: -0.045em;
  color: var(--vermilion);
}
.hero__lede {
  margin-top: 20px;
}
.hero__actions {
  margin-top: clamp(26px, 3vw, 38px);
}
.hero__note {
  margin-top: 16px;
  color: var(--on-surface-muted);
  font-size: 14px;
}

/* 注音 — PinyinText, pinyin_text.dart. Ruby is 46% of the glyph, w600,
   vermilion at 85%; the ruby band keeps its height so every glyph on a line
   shares one baseline. */
.zhuyin {
  display: flex;
  flex-wrap: wrap;
  gap: 0.06em;
  align-items: flex-end;
  font-family: var(--kai);
  line-height: 1;
}
.zhuyin > span {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zhuyin rt,
.zhuyin .rt {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--accent-ink);
  /* ruby = 46% of the glyph; the band keeps its height even for punctuation so
     every glyph on a line shares one baseline. pinyin_text.dart:229-273 */
  font: 600 0.46em/1 var(--ui);
  height: 1.5em; /* 1.5 x its own size = rubySize * 1.5 */
  letter-spacing: 0;
  white-space: nowrap;
}
.zhuyin .han {
  font-weight: 500;
  line-height: 1.18;
}
/* The wordmark is display-sized, so the annotation is set tighter than the
   reading ratio — at 46% a 118px glyph would carry a 54px syllable. */
.hero__wordmark {
  font-size: clamp(58px, 10vw, 138px);
  letter-spacing: 0.015em;
  filter: drop-shadow(0 12px 22px rgba(18, 59, 58, 0.08));
}
.hero__wordmark .rt {
  color: var(--vermilion);
  font-size: 0.23em;
  height: 1.75em;
}

/* the scroll cue — a settled hint, not a looping bounce */
.cue {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(34px, 4.4vw, 62px);
  color: var(--on-surface-muted);
}
.cue svg {
  width: 12px;
  height: 26px;
  animation: cue 2.6s var(--ease-io) infinite;
}
.cue:hover svg {
  animation-play-state: paused;
}
@keyframes cue {
  0%,
  62%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  30% {
    transform: translateY(5px);
    opacity: 1;
  }
}

/* the hero panel — radius 42, 2px accent rim, teal shadow, clipped spray */
.slab {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 2.4vw, 30px);
  color: #fff;
  background: var(--contrast-panel);
  border: 2px solid rgba(227, 82, 54, 0.55);
  border-radius: var(--r-hero);
  box-shadow: var(--sh-hero);
}
.slab__spray {
  position: absolute;
  top: -86px;
  right: -100px;
  width: 430px;
  opacity: 0.31;
  pointer-events: none;
  transform: rotate(8deg);
}
@media (max-width: 1000px) {
  .slab__spray {
    top: -112px;
    right: -104px;
  }
}
.slab__stamp {
  position: absolute;
  right: -0.16em;
  bottom: -0.3em;
  color: rgba(255, 255, 255, 0.035);
  font: 900 260px/0.8 var(--kai);
  pointer-events: none;
  user-select: none;
}
.slab__in {
  position: relative;
}
.slab__greet {
  font: 700 clamp(30px, 3.1vw, 43px) / 1.02 var(--display);
  letter-spacing: -0.045em;
  color: #fff;
}
.slab__line {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.5;
}
/* the inner practice ticket — paperBright, radius 28 */
.ticket {
  margin-top: clamp(20px, 2vw, 26px);
  padding: 24px;
  color: var(--deep-ink);
  background: var(--paper-bright);
  border-radius: var(--r-pad);
}
/* The ticket is a hard-coded light surface in BOTH themes (it is the app's
   paperBright card). Any muted utility class used inside it must therefore take a
   fixed dark ink — resolving --on-surface-muted here paints night-mode cream text
   onto cream paper. */
.ticket .small,
.ticket .meta,
.ticket .lede {
  color: rgba(18, 59, 58, 0.82);
}
.ticket__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.ticket__k {
  font: 800 11px/1.2 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink);
}
.ticket__v {
  margin-top: 8px;
  font: 700 26px/1.06 var(--display);
  letter-spacing: -0.04em;
}
.ticket__cta {
  width: 100%;
  margin-top: 20px;
}
.ticket__plant {
  flex: none;
  width: 74px;
}

/* ------------------------------------------------------- number marquee --
   Data as ornament. The figures are counted from the shipped bundle. */
.ticker {
  overflow: hidden;
  padding-block: 18px;
  border-block: 1px solid var(--rule);
  background: var(--surface-bright);
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: slide 46s linear infinite;
}
.ticker:hover .ticker__track {
  animation-play-state: paused;
}
.ticker__track > ul {
  display: flex;
  flex: none;
  gap: 0;
}
.ticker li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-inline: clamp(20px, 2.4vw, 38px);
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.ticker b {
  font: 700 25px/1 var(--display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.ticker span {
  color: var(--on-surface-muted);
  font: 800 10px/1.2 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.ticker em {
  font-family: var(--kai);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: var(--accent-ink);
}
@keyframes slide {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ------------------------------------------------------ section headings -- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(34px, 4.5vw, 66px);
}
@media (max-width: 900px) {
  .head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
.head__zh {
  display: block;
  margin-bottom: 12px;
  font: 500 clamp(20px, 1.8vw, 26px) / 1.2 var(--kai);
  color: var(--accent-ink);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------- 听说读写 skill cards -- */
.skills {
  display: grid;
  /* Six modes: 3+3 at desktop, 2+2+2 at tablet, stacked on a phone. auto-fit
     lands on four columns at ~1250px and orphans two cards on the second row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
@media (max-width: 1000px) {
  .skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .skills {
    grid-template-columns: 1fr;
  }
}
.skill {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 292px;
  padding: 24px;
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.skill::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0.18);
  transform-origin: left;
  opacity: 0.72;
  transition: transform 420ms var(--ease), opacity 220ms var(--ease);
}
.skill:hover::after {
  transform: scaleX(1);
  opacity: 1;
}
.skill:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px
    color-mix(in srgb, var(--accent, var(--ink)) 20%, transparent);
}
.skill__glyph {
  font: 500 clamp(64px, 6vw, 88px) / 1 var(--kai);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.skill__name {
  margin-top: 16px;
  font: 800 19px/1.2 var(--ui);
  letter-spacing: -0.015em;
}
.skill__zh {
  margin-top: 10px;
  font: 500 15px/1.6 var(--kai);
  color: var(--on-surface);
}
.skill__hint {
  margin-top: auto;
  padding-top: 18px;
  color: var(--on-surface-muted);
  font-size: 14px;
  line-height: 1.5;
}
.skill__dot {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 50%;
}

/* --------------------------------------------- two-up editorial figures --
   Top-aligned: both halves are content stacks with their own heading, and
   centring them floats the shorter one away from the section head. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 72px);
  align-items: start;
}
@media (max-width: 940px) {
  .duo {
    grid-template-columns: 1fr;
  }
}
.card {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-pad);
}
.note {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--vermilion);
  color: var(--on-surface-muted);
  font-size: 15px;
  line-height: 1.55;
}
.prose p + p {
  margin-top: 1em;
}
.prose strong {
  color: var(--on-surface);
  font-weight: 800;
}

/* the 楷体 vs sans comparison */
.faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.face {
  padding: 20px;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
}
.face--kai {
  border-color: var(--jade);
  background: color-mix(in srgb, var(--jade) 8%, transparent);
}
.face b {
  display: block;
  font-weight: 500;
  font-size: clamp(60px, 8vw, 104px);
  line-height: 1.1;
}
.face--kai b {
  font-family: var(--kai);
}
.face--sans b {
  /* deliberately unset: whatever this device would reach for on its own */
  font-family: sans-serif;
}
.face span {
  display: block;
  margin-top: 10px;
  color: var(--on-surface-muted);
  font: 800 10px/1.3 var(--ui);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* --------------------------------------------------- 田字格 writing pad --
   handwriting_pad.dart:412-425 — surfaceBright, radius 28, teal shadow,
   the border turns jade on completion. */
.pad {
  position: relative;
  padding: 18px;
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pad);
  box-shadow: var(--sh-pad);
  transition: border-color 320ms var(--ease);
}
.pad[data-done="true"] {
  border-color: var(--jade);
}
.pad canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  touch-action: none;
}
.pad__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.pad__count {
  margin-left: auto;
  color: var(--on-surface-muted);
  font: 800 11px/1 var(--ui);
  letter-spacing: 1.2px;
  font-variant-numeric: tabular-nums;
}
.chip {
  padding: 6px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font: 800 12px/1.3 var(--ui);
  transition: background 180ms var(--ease), color 180ms var(--ease),
    border-color 180ms var(--ease);
}
.chip[aria-pressed="true"] {
  color: var(--deep-ink);
  background: var(--sun);
  border-color: var(--sun);
}
.chip__zh {
  font-family: var(--kai);
  font-weight: 500;
}

/* radical + card readout beside the pad */
.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.readout > div {
  flex: 1 1 130px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--fill) 45%, transparent);
  border-radius: var(--r-tile);
}
.readout dt {
  color: var(--on-surface-muted);
  font: 800 10px/1.2 var(--ui);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.readout dd {
  margin: 8px 0 0;
  font: 800 17px/1.25 var(--ui);
}
.readout dd .zh {
  font-weight: 500;
  font-size: 22px;
}

/* -------------------------------------------------- 记忆热度 heat ramp --
   memory_heat.dart:6-16 — cobalt → jade → sun → coral → vermilion, and the
   band cuts land where Progress already reports them. */
.ramp {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    #3569c8,
    #67b99a 25%,
    #f4cf45 50%,
    #ff8e71 75%,
    #e35236
  );
}
.bands {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.bands li {
  padding-top: 12px;
  border-top: 2px solid var(--band, var(--rule));
}
.bands b {
  display: block;
  font: 500 17px/1.2 var(--kai);
}
.bands span {
  display: block;
  margin-top: 6px;
  color: var(--on-surface-muted);
  font: 800 9.5px/1.3 var(--ui);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.bands i {
  display: block;
  margin-top: 5px;
  color: var(--on-surface-muted);
  font: 800 11px/1 var(--mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .bands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 8px;
  }
}

/* heat-tinted character tiles — library_screen.dart:955-1080, radius 20,
   the 0–100 score in the corner at w900, the heat bar flush to the bottom */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
.tile {
  position: relative;
  overflow: hidden;
  padding: 12px 10px 14px;
  text-align: center;
  background: var(--tint);
  border-radius: var(--r-tile);
}
.tile__rt {
  /* The tile ground is a heat tint that runs to vermilion, so accent-coloured
     ruby on it tops out near 2:1. This is the app's own rule applied to the
     annotation as well as the score: "a vermilion number on a vermilion wash is
     the one combination guaranteed to be unreadable" (memory_heat.dart:62-89). */
  color: color-mix(in srgb, var(--on-surface) 82%, transparent);
  font: 600 11px/1 var(--ui);
}
.tile__ch {
  margin-top: 4px;
  font: 500 40px/1.1 var(--kai);
}
.tile__score {
  position: absolute;
  top: 7px;
  right: 9px;
  font: 900 11px/1 var(--ui);
  font-variant-numeric: tabular-nums;
}
.tile__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  background: var(--heat);
}
.tile--unmet {
  background: var(--surface-bright);
  border: 1px solid var(--rule);
}

/* The species rail is a botanical specimen index. It uses the pot colour as
   the active rule, matching the level accents in the revised app artwork. */
.species {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.species button {
  position: relative;
  min-width: 0;
  padding: 14px 12px 13px;
  text-align: left;
  background: color-mix(in srgb, var(--surface-bright) 80%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease),
    background 260ms var(--ease), box-shadow 200ms var(--ease);
}
.species button:nth-child(1) { --species-accent: #e35236; }
.species button:nth-child(2) { --species-accent: #3569c8; }
.species button:nth-child(3) { --species-accent: #67b99a; }
.species button:nth-child(4) { --species-accent: #edae34; }
.species button:nth-child(5) { --species-accent: #bfa8e8; }
.species button:nth-child(6) { --species-accent: #ff8e71; }
.species button:hover {
  transform: translateY(-3px);
  border-color: var(--species-accent);
}
.species button[aria-pressed="true"] {
  border-color: var(--species-accent);
  background: color-mix(in srgb, var(--species-accent) 14%, var(--surface-bright));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--species-accent) 16%, transparent);
}
.species i {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 20px;
  color: var(--deep-ink);
  background: var(--species-accent);
  border-radius: var(--r-pill);
  font: 900 9px/1 var(--ui);
  font-style: normal;
  letter-spacing: 0.08em;
}
.species span,
.species b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.species span {
  margin-top: 10px;
  font: 500 16px/1.1 var(--kai);
}
.species b {
  margin-top: 5px;
  color: var(--on-surface-muted);
  font: 800 9px/1.2 var(--ui);
  letter-spacing: 0.04em;
}
@media (max-width: 940px) {
  .species {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .species {
    display: flex;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .species::-webkit-scrollbar {
    display: none;
  }
  .species button {
    flex: 0 0 132px;
    scroll-snap-align: start;
  }
}

/* -------------------------------------------------------- growth ladder -- */
.grow {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.6vw, 64px);
  align-items: start;
}
.grow > * {
  min-width: 0;
}
@media (max-width: 940px) {
  .grow {
    grid-template-columns: 1fr;
  }
}
.grow__stage {
  --species-accent: var(--vermilion);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 530px;
  padding: clamp(44px, 5vw, 68px) clamp(20px, 3vw, 40px) clamp(26px, 3vw, 40px);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--species-accent) 23%, transparent), transparent 38%),
    linear-gradient(145deg, #082a2a, #123b3a 70%, #0a312f);
  border: 1px solid color-mix(in srgb, var(--species-accent) 72%, transparent);
  border-radius: var(--r-garden);
  box-shadow: var(--sh-panel);
  transition: border-color 320ms var(--ease), background 420ms var(--ease);
}
.grow__stage::after {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--species-accent) 28%, transparent);
  border-radius: 50%;
  opacity: 0.7;
  transform: translateY(-10%);
}
.grow__stage svg {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18));
}
.grow__species {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.68);
}
.grow__label {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  text-align: center;
}
.grow__label b {
  display: block;
  font: 500 26px/1.1 var(--kai);
  color: #fff;
}
.grow__label span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.66);
  font: 800 10px/1.3 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.grow__label i {
  display: block;
  margin-top: 12px;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.82);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.5;
}
.slider {
  width: 100%;
  margin-top: 22px;
  accent-color: var(--vermilion);
}
.garden-progress {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}
.garden-progress b {
  color: var(--on-surface);
}
input[type="range"] {
  height: 7px;
  cursor: grab;
}
.rungs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, auto);
  gap: 6px;
  margin-top: 24px;
  padding: 0 0 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--rule) transparent;
}
.rungs li {
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font: 500 12px/1.3 var(--kai);
  color: var(--on-surface-muted);
  text-align: center;
  white-space: nowrap;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
    background 180ms var(--ease), transform 180ms var(--ease);
}
.rungs li[data-on="true"] {
  color: var(--on-surface);
  border-color: color-mix(in srgb, var(--species-accent, var(--jade)) 52%, var(--rule));
  background: color-mix(in srgb, var(--species-accent, var(--jade)) 10%, transparent);
}
.rungs li[data-current="true"] {
  color: var(--deep-ink);
  background: var(--sun);
  border-color: var(--sun);
  transform: translateY(-2px);
}

/* ----------------------------------------------------- privacy evidence -- */
.claim {
  padding: clamp(24px, 3vw, 44px);
  color: #fff;
  background: var(--contrast-panel);
  border-radius: var(--r-garden);
  box-shadow: var(--sh-panel);
}
.claim__big {
  font: 700 clamp(27px, 3.4vw, 46px) / 1.06 var(--display);
  letter-spacing: -0.045em;
  color: #fff;
  text-wrap: balance;
}
.claim code {
  padding: 2px 7px;
  color: var(--sun);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font: 600 0.82em/1.4 var(--mono);
  /* `nowrap` kept this one token intact but pushed the page 20px wide at 360px.
     `anywhere` only breaks when there is genuinely no room. */
  overflow-wrap: anywhere;
}
.claim__lede {
  margin-top: 20px;
  max-width: 64ch;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}
.evidence {
  display: grid;
  /* six cells: 3+3 at desktop, never 4+2 with a dead cell */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 3vw, 40px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-tile);
  overflow: hidden;
}
@media (max-width: 1060px) {
  .evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .evidence {
    grid-template-columns: 1fr;
  }
}
.evidence > div {
  padding: 20px;
  background: var(--contrast-panel);
}
.evidence dt {
  color: var(--sun);
  font: 800 10px/1.3 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.evidence dd {
  margin: 10px 0 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}
.evidence dd b {
  font-weight: 800;
}

/* ------------------------------------------------------ curriculum table -- */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface-bright);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}
caption {
  padding: 20px 22px 0;
  color: var(--on-surface-muted);
  font-size: 14px;
  text-align: left;
}
th,
td {
  padding: 15px 20px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
th:first-child,
td:first-child {
  text-align: left;
}
thead th {
  color: var(--on-surface-muted);
  font: 800 10px/1.3 var(--ui);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody th {
  font: 800 16px/1 var(--ui);
}
tbody td {
  font-weight: 600;
}
tfoot th,
tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--on-surface);
  font-weight: 800;
}
tbody tr:hover td,
tbody tr:hover th {
  background: color-mix(in srgb, var(--sun) 12%, transparent);
}

/* ------------------------------------------------------------- pricing --- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
}
.plan--plus {
  border: 2px solid var(--sun);
  box-shadow: var(--sh-pad);
}
.plan__k {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 11px/1 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.plan__v {
  margin-top: 14px;
  font: 700 34px/1 var(--display);
  letter-spacing: -0.045em;
}
.plan__v small {
  font: 800 12px/1 var(--ui);
  letter-spacing: 1px;
  color: var(--on-surface-muted);
  text-transform: uppercase;
}
.plan ul {
  margin: 22px 0 26px;
  display: grid;
  gap: 11px;
}
.plan li {
  position: relative;
  padding-left: 24px;
  color: var(--on-surface-muted);
  font-size: 15px;
  line-height: 1.45;
}
.plan li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 11px;
  height: 2px;
  background: var(--jade);
}
.plan--plus li::before {
  background: var(--vermilion);
}
.plan__foot {
  margin-top: auto;
}

/* ------------------------------------------------------------------ faq -- */
.faq {
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 24px 0;
  cursor: pointer;
  font: 800 clamp(17px, 1.5vw, 21px) / 1.35 var(--ui);
  letter-spacing: -0.018em;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--vermilion);
  font: 400 26px/0.7 var(--display);
  transition: transform 180ms var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq summary b {
  flex: none;
  width: 2.4ch;
  color: var(--accent-ink);
  font: 800 12px/1.6 var(--mono);
  font-variant-numeric: tabular-nums;
}
.faq__a {
  max-width: 74ch;
  padding: 0 0 26px 3.2ch;
  color: var(--on-surface-muted);
  line-height: 1.62;
}
.faq__a p + p {
  margin-top: 0.9em;
}

/* --------------------------------------------------------------- footer -- */
.foot {
  padding-block: clamp(52px, 7vw, 92px) 30px;
  border-top: 1px solid var(--rule);
}
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(28px, 3vw, 56px);
}
.foot__cols h2 {
  margin-bottom: 16px;
  color: var(--on-surface-muted);
  font: 800 10px/1.2 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.foot__cols li + li {
  margin-top: 10px;
}
.foot__cols a {
  font-size: 15px;
  color: var(--on-surface-muted);
  transition: color 180ms var(--ease);
}
.foot__cols a:hover {
  color: var(--on-surface);
}
.foot__wordmark {
  display: grid;
  grid-template-columns: repeat(2, 1em);
  gap: 0.02em 0.08em;
  width: max-content;
  font: 500 clamp(44px, 6vw, 78px) / 0.88 var(--kai);
  letter-spacing: 0;
}
.foot__wordmark span {
  display: block;
}
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(44px, 6vw, 78px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.foot__legal {
  max-width: 92ch;
  margin-top: 26px;
  color: var(--on-surface-muted);
  font-size: 13px;
  line-height: 1.6;
}
.foot__legal a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------ documents -- */
/* A single 78ch column on a 1440px page reads as a broken layout — acres of
   empty paper either side of a thin strip. The masthead and the reading column
   keep a comfortable measure, but the page now uses its width: a sticky
   contents rail sits beside the prose, which is what a long legal document
   actually needs. */
.doc {
  padding-block: clamp(36px, 5vw, 64px) clamp(60px, 8vw, 110px);
}
.doc__head {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(26px, 4vw, 72px);
  align-items: end;
}
@media (max-width: 900px) {
  .doc__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
.doc__head .doc__box {
  margin-top: 0;
}
.doc__head .doc__intro {
  max-width: 52ch;
}
@media (max-width: 900px) {
  .doc__head .doc__box {
    margin-top: 26px;
  }
}
.doc__body {
  display: grid;
  grid-template-columns: minmax(190px, 232px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 52px);
}
.doc__main {
  max-width: 74ch;
  /* a single `1fr` track is `minmax(auto, 1fr)` and refuses to shrink below its
     content's min-content width — a long <code> token or a table then blows the
     grid wider than the viewport. min-width:0 here and minmax(0,1fr) below. */
  min-width: 0;
}
.doc__main > section:first-child {
  margin-top: 0;
}
@media (max-width: 900px) {
  .doc__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
.doc h1 {
  font: 700 clamp(34px, 5.4vw, 62px) / 0.98 var(--display);
  letter-spacing: -0.045em;
}
.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.doc__intro {
  margin-top: 28px;
  font-size: clamp(17px, 1.3vw, 19.5px);
  line-height: 1.6;
  color: var(--on-surface-muted);
}
.doc section {
  margin-top: clamp(40px, 5vw, 64px);
  scroll-margin-top: 96px;
}
.doc h2 {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font: 800 clamp(21px, 2.1vw, 28px) / 1.16 var(--ui);
  letter-spacing: -0.03em;
}
.doc h2 b {
  flex: none;
  color: var(--accent-ink);
  font: 800 12px/1.9 var(--mono);
  font-variant-numeric: tabular-nums;
}
.doc h3 {
  margin-top: 30px;
  font: 800 17.5px/1.35 var(--ui);
}
.doc p,
.doc li {
  margin-top: 14px;
  color: var(--on-surface-muted);
  line-height: 1.66;
}
.doc li {
  position: relative;
  padding-left: 22px;
}
.doc li::before {
  content: "";
  position: absolute;
  top: 0.66em;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--vermilion);
}
.doc ul {
  margin-top: 6px;
}
.doc strong {
  color: var(--on-surface);
  font-weight: 800;
}
.doc a:not(.btn) {
  color: var(--on-surface);
  text-decoration: underline;
  text-decoration-color: var(--vermilion);
  text-underline-offset: 3px;
}
.doc code {
  padding: 2px 6px;
  background: color-mix(in srgb, var(--fill) 55%, transparent);
  border-radius: 5px;
  font: 600 0.86em/1.4 var(--mono);
  /* android.permission.INTERNET has no break opportunity of its own */
  overflow-wrap: anywhere;
}
/* Kept as a real table — `display:block` would strip its row/cell semantics in
   some screen readers. These cells are prose and wrap down to a phone. */
.doc table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}
.doc__box {
  margin-top: 24px;
  padding: 22px 24px;
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--jade);
  border-radius: 0 var(--r-tile) var(--r-tile) 0;
}
.doc__box p:first-child {
  margin-top: 0;
}
.doc__box--warn {
  border-left-color: var(--vermilion);
}
.doc__toc {
  position: sticky;
  top: 100px;
  padding: 20px 22px;
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  border-radius: var(--r-tile);
}
.doc__toc ol {
  margin-top: 12px;
  counter-reset: t;
}
.doc__toc li {
  padding-left: 0;
  margin-top: 0;
  counter-increment: t;
}
.doc__toc li + li {
  margin-top: 7px;
}
.doc__toc a {
  display: flex;
  gap: 9px;
  align-items: baseline;
  color: var(--on-surface-muted);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: color 180ms var(--ease);
}
.doc__toc a::before {
  content: counter(t, decimal-leading-zero);
  flex: none;
  color: var(--accent-ink);
  font: 800 10.5px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
}
.doc__toc li::before {
  display: none;
}
.doc__toc a:hover {
  color: var(--on-surface);
}
.doc__toc a[aria-current="true"] {
  color: var(--on-surface);
  font-weight: 800;
}
@media (max-width: 900px) {
  .doc__toc {
    position: static;
    margin-bottom: 34px;
  }
  .doc__toc ol {
    columns: 2;
    column-gap: 26px;
  }
  .doc__toc li {
    break-inside: avoid;
  }
  .doc__toc li + li {
    margin-top: 8px;
  }
}
@media (max-width: 560px) {
  .doc__toc ol {
    columns: 1;
  }
}
.doc table {
  min-width: 0;
  margin-top: 20px;
}
.doc td,
.doc th {
  padding: 13px 14px;
  text-align: left;
  font-size: 14.5px;
  vertical-align: top;
  /* the attribution table carries bare URLs, which have no break opportunity and
     would otherwise force the table wider than a phone */
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .doc td,
  .doc th {
    padding: 11px 9px;
    font-size: 13.5px;
  }
}
.doc tbody td {
  color: var(--on-surface-muted);
  font-weight: 500;
}

/* -------------------------------------------------- OrchidReveal motion --
   orchid_widgets.dart:328-368 — 720ms easeOutCubic, opacity 0→1,
   translateY(4.5%) and scale .985→1. It settles; it never loops. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* above the fold on load: present, not animated — keeps LCP off the transition */
[data-reveal].is-now {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .ticker__track {
    animation: none;
  }
}
@media print {
  .top,
  .ticker,
  .orbit,
  .skip {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ------------------------------------------------------------ store row --- */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(30px, 3.4vw, 46px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 110px;
}

/* ========================================== 间隔复习 — the forgetting curve ===
   A first-week explanatory graph: the navy field, cyan percentages, coral
   resets and yellow review arrows follow the visual grammar of a classroom
   diagram without pretending the illustrative dates are an FSRS schedule. */
.curve {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 38px);
  color: #f7f1e3;
  background:
    radial-gradient(circle at 82% -18%, rgba(244, 207, 69, 0.13), transparent 37%),
    linear-gradient(145deg, #233a50 0%, #1d3549 52%, #183342 100%);
  border: 1px solid rgba(91, 220, 205, 0.3);
  border-radius: clamp(28px, 4vw, 46px);
  box-shadow: 0 32px 76px rgba(20, 45, 57, 0.25);
}
.curve::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.19;
  background-image: var(--noise);
  pointer-events: none;
}
.curve__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px clamp(28px, 5vw, 64px);
  align-items: end;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
.curve .meta,
.curve .small,
.curve__stats dt,
.curve__ctl label {
  color: rgba(247, 241, 227, 0.64);
}
.curve__read {
  margin-top: 10px;
  font: 700 clamp(27px, 3.4vw, 46px) / 0.98 var(--display);
  letter-spacing: -0.05em;
}
.curve__target-note {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 11px;
  align-items: end;
  min-width: 190px;
  padding: 14px 16px;
  color: rgba(247, 241, 227, 0.68);
  background: rgba(7, 28, 38, 0.24);
  border: 1px solid rgba(247, 241, 227, 0.12);
  border-radius: 16px;
}
.curve__target-note span,
.curve__target-note small {
  font: 800 9px/1.2 var(--ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.curve__target-note strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--sun);
  font: 800 34px/0.9 var(--display);
}
.curve__stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.curve__stats > div {
  padding: 13px 16px;
  background: rgba(7, 28, 38, 0.18);
  border: 1px solid rgba(247, 241, 227, 0.1);
  border-radius: 16px;
}
.curve__stats dt {
  font: 800 9.5px/1.3 var(--ui);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.curve__stats dd {
  margin: 7px 0 0;
  font: 700 clamp(22px, 2.7vw, 30px) / 1 var(--display);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.curve__stats > div:nth-child(1) dd {
  color: rgba(247, 241, 227, 0.68);
}
.curve__stats > div:nth-child(2) dd {
  color: var(--coral);
}
.curve__stats > div:nth-child(3) dd {
  color: var(--sun);
}
.curve__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(91, 220, 205, 0.24);
  border-radius: clamp(22px, 3vw, 32px);
  background:
    radial-gradient(ellipse at 58% 108%, rgba(91, 220, 205, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(7, 28, 38, 0.13));
  box-shadow: inset 0 0 90px rgba(5, 23, 32, 0.2);
}
.curve__svg {
  display: block;
  width: 100%;
  height: clamp(430px, 54vw, 560px);
}
.curve__live {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(247, 241, 227, 0.46);
  font-size: 8px;
}
.curve__live i {
  width: 6px;
  height: 6px;
  background: var(--coral);
  border-radius: 50%;
}
.cv-grid {
  stroke: rgba(192, 224, 224, 0.11);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cv-grid--axis {
  stroke: rgba(247, 241, 227, 0.52);
}
.cv-percent,
.cv-day,
.cv-axis-title,
.cv-event-label,
.cv-threshold-label,
.cv-point-value,
.cv-result {
  font-family: var(--ui);
  font-weight: 800;
}
.cv-percent {
  fill: #4ed9d0;
  font-size: 15px;
}
.cv-day {
  fill: #4ed9d0;
  font-size: 14px;
}
.cv-axis-title {
  fill: rgba(247, 241, 227, 0.82);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.cv-event-label {
  fill: var(--sun);
  font-size: 16px;
  letter-spacing: 0.03em;
}
.cv-event-arrow {
  stroke: var(--sun);
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.cv-threshold {
  stroke: var(--sun);
  stroke-width: 1;
  stroke-dasharray: 5 7;
  opacity: 0.72;
  vector-effect: non-scaling-stroke;
}
.cv-threshold-label {
  fill: var(--sun);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.cv-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cv-line--forgotten {
  stroke: rgba(224, 225, 218, 0.62);
  stroke-width: 3;
}
.cv-line--reviewed {
  stroke: var(--coral);
  stroke-width: 4.5;
}
.cv-reset {
  stroke: var(--coral);
  stroke-width: 3;
  stroke-dasharray: 7 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.cv-review-point {
  fill: var(--coral);
  stroke: #1d3549;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.cv-point-value {
  fill: var(--sun);
  font-size: 11px;
}
.cv-result {
  font-size: 12px;
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: #1d3549;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.cv-result--reviewed {
  fill: var(--coral);
}
.cv-result--forgotten {
  fill: rgba(224, 225, 218, 0.72);
}
.curve__ctl {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
  margin-top: clamp(18px, 2vw, 26px);
}
.curve__ctl label {
  font: 800 10px/1.2 var(--ui);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.curve__ctl input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent;
}
.curve__ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--sun), var(--jade));
  border-radius: 3px;
}
.curve__ctl input[type="range"]::-webkit-slider-thumb {
  width: 19px;
  height: 19px;
  margin-top: -8px;
  appearance: none;
  background: var(--paper-bright);
  border: 4px solid var(--vermilion);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
.curve__ctl input[type="range"]::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--sun), var(--jade));
  border: 0;
  border-radius: 3px;
}
.curve__ctl input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--paper-bright);
  border: 4px solid var(--vermilion);
  border-radius: 50%;
}
.curve__ctl output {
  min-width: 4.2ch;
  color: var(--sun);
  font: 800 16px/1 var(--ui);
  font-variant-numeric: tabular-nums;
}
.curve > .small {
  position: relative;
  z-index: 2;
  max-width: 72ch;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .curve {
    padding: 18px;
  }
  .curve__top {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .curve__target-note {
    width: 100%;
    min-width: 0;
  }
  .curve__stats {
    grid-column: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  .curve__stats > div {
    min-width: 0;
    padding: 10px 8px;
  }
  .curve__stats dt {
    font-size: 7.5px;
    letter-spacing: 0.7px;
  }
  .curve__stats dd {
    font-size: 19px;
  }
  .cv-event-label {
    font-size: 10px;
    letter-spacing: 0;
  }
  .curve__ctl {
    grid-template-columns: 1fr auto;
  }
  .curve__ctl label {
    grid-column: 1 / -1;
  }
  .curve__svg {
    height: 500px;
  }
  .curve__live {
    right: 12px;
    bottom: 9px;
  }
}

/* ======================================= search-led parent guides ========= */
.hero__topic {
  display: block;
  width: fit-content;
  margin-bottom: clamp(18px, 2.2vw, 28px);
  color: var(--accent-ink);
  font: 800 11px/1.2 var(--ui);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.intent {
  background:
    radial-gradient(circle at 92% 8%, rgba(244, 207, 69, 0.1), transparent 32%),
    var(--surface);
}
.search_paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.search_path {
  position: relative;
  min-height: 280px;
  padding: clamp(24px, 3vw, 38px);
  color: var(--on-surface);
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--vermilion);
  border-radius: var(--r-card);
  box-shadow: var(--sh-pad);
  transition:
    transform 220ms var(--ease),
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}
.search_path:nth-child(2) {
  border-top-color: var(--jade);
}
.search_path:hover {
  color: var(--on-surface);
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--vermilion) 48%, var(--hairline));
  box-shadow: 0 24px 52px rgba(18, 59, 58, 0.14);
}
.search_path h3 {
  max-width: 18ch;
  margin-top: 20px;
  font: 700 clamp(25px, 2.6vw, 36px) / 1.04 var(--display);
  letter-spacing: -0.035em;
}
.search_path p {
  max-width: 58ch;
  margin-top: 18px;
  color: var(--on-surface-muted);
  line-height: 1.65;
}
.search_path__link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  color: var(--accent-ink);
  font: 800 12px/1 var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.search_path__link i {
  font-style: normal;
  transition: transform 180ms var(--ease);
}
.search_path:hover .search_path__link i {
  transform: translateX(4px);
}

.guide {
  overflow: clip;
}
.guide_hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(54px, 8vw, 116px);
  background:
    radial-gradient(circle at 88% 14%, rgba(244, 207, 69, 0.2), transparent 28%),
    radial-gradient(circle at 8% 86%, rgba(53, 150, 152, 0.12), transparent 30%),
    var(--surface);
  border-bottom: 1px solid var(--rule);
}
.guide_hero--tingxie {
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 127, 112, 0.14), transparent 30%),
    radial-gradient(circle at 7% 90%, rgba(103, 185, 154, 0.13), transparent 31%),
    var(--surface);
}
.guide_hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  gap: clamp(42px, 7vw, 104px);
  align-items: end;
  margin-top: clamp(44px, 6vw, 78px);
}
.guide_crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--on-surface-muted);
}
.guide_crumbs a:hover {
  color: var(--accent-ink);
}
.guide_crumbs i {
  font-style: normal;
  opacity: 0.42;
}
.guide_hero h1 {
  max-width: 14ch;
  font: 700 clamp(48px, 7vw, 94px) / 0.93 var(--display);
  letter-spacing: -0.055em;
}
.guide_hero__lede {
  max-width: 60ch;
  margin-top: 28px;
  color: var(--on-surface-muted);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.55;
}
.guide_hero .actions {
  margin-top: 32px;
}
.guide_snapshot {
  position: relative;
  padding: clamp(24px, 3vw, 38px);
  color: #f7f1e3;
  background: var(--contrast-panel);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-card);
  box-shadow: 0 30px 70px rgba(18, 59, 58, 0.2);
}
.guide_snapshot::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(244, 207, 69, 0.22);
  border-radius: calc(var(--r-card) - 10px);
  pointer-events: none;
}
.guide_snapshot > .meta {
  color: rgba(247, 241, 227, 0.58);
}
.guide_snapshot dl {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}
.guide_snapshot dl > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: baseline;
  padding-top: 17px;
  border-top: 1px solid rgba(247, 241, 227, 0.14);
}
.guide_snapshot dt {
  color: var(--sun);
  font: 800 22px/1 var(--ui);
}
.guide_snapshot dd {
  color: rgba(247, 241, 227, 0.76);
  font-size: 14px;
  line-height: 1.45;
}

.guide_layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  gap: clamp(48px, 7vw, 104px);
  padding-block: clamp(64px, 9vw, 132px);
}
.guide_toc {
  align-self: start;
  position: sticky;
  top: 112px;
  padding-top: 8px;
}
.guide_toc nav {
  display: grid;
  margin-top: 18px;
  border-top: 1px solid var(--rule);
}
.guide_toc a {
  padding-block: 11px;
  color: var(--on-surface-muted);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.3;
}
.guide_toc a:hover {
  color: var(--accent-ink);
}
.guide_prose {
  min-width: 0;
}
.guide_standfirst {
  color: var(--on-surface);
  font: 500 clamp(21px, 2.2vw, 30px) / 1.46 var(--display);
  letter-spacing: -0.02em;
}
.guide_prose > section {
  padding-top: clamp(64px, 8vw, 108px);
  scroll-margin-top: 90px;
}
.guide_prose h2 {
  max-width: 20ch;
  margin-top: 15px;
  font: 700 clamp(34px, 4.2vw, 56px) / 0.98 var(--display);
  letter-spacing: -0.045em;
}
.guide_prose h2 + p,
.guide_prose p + p,
.guide_prose ul + p,
.guide_prose ol + p,
.guide_prose p + ul,
.guide_prose p + ol {
  margin-top: 20px;
}
.guide_prose section > p:not(.eyebrow),
.guide_prose section > ul:not(.source_links, .guide_checklist),
.guide_prose section > ol {
  color: var(--on-surface-muted);
  font-size: 17px;
  line-height: 1.76;
}
.guide_prose strong {
  color: var(--on-surface);
}
.guide_cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  padding: 1px;
  background: var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}
.guide_cards > div {
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface-bright);
}
.guide_cards b {
  display: block;
  color: var(--on-surface);
  font: 800 16px/1.3 var(--ui);
}
.guide_cards p {
  margin-top: 11px;
  color: var(--on-surface-muted);
  font-size: 14px;
  line-height: 1.58;
}
.guide_cards--wide > div {
  min-height: 176px;
}
.guide_callout {
  margin-block: 30px;
  padding: clamp(24px, 3.4vw, 40px);
  background: color-mix(in srgb, var(--jade) 14%, var(--surface-bright));
  border-left: 3px solid var(--jade);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.guide_callout > strong {
  display: block;
  margin-top: 15px;
  font: 700 clamp(24px, 3vw, 36px) / 1.05 var(--display);
  letter-spacing: -0.03em;
}
.guide_callout > p:last-child {
  margin-top: 13px;
  color: var(--on-surface-muted);
  line-height: 1.6;
}
.guide_steps {
  display: grid;
  gap: 0;
  margin-top: 30px;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
  border-top: 1px solid var(--rule);
}
.guide_steps li {
  counter-increment: guide-step;
  display: grid;
  grid-template-columns: 38px minmax(150px, 0.42fr) 1fr;
  gap: 18px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.guide_steps li::before {
  content: counter(guide-step, decimal-leading-zero);
  color: var(--vermilion);
  font: 800 11px/1.4 var(--ui);
  letter-spacing: 0.08em;
}
.guide_steps b {
  color: var(--on-surface);
  line-height: 1.45;
}
.guide_steps span {
  color: var(--on-surface-muted);
  font-size: 15px;
  line-height: 1.58;
}
.guide_checklist,
.source_links {
  display: grid;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}
.guide_checklist li,
.source_links li {
  position: relative;
  padding: 18px 4px 18px 28px;
  color: var(--on-surface-muted);
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.62;
}
.guide_checklist li::before,
.source_links li::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 3px;
  width: 10px;
  height: 2px;
  background: var(--vermilion);
}
.source_links a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 30%, transparent);
  text-underline-offset: 4px;
}
.source_links a:hover {
  text-decoration-color: currentColor;
}
.guide_cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-top: 42px;
  padding: clamp(26px, 4vw, 46px);
  color: #f7f1e3;
  background: var(--contrast-panel);
  border-radius: var(--r-card);
  box-shadow: 0 30px 68px rgba(18, 59, 58, 0.18);
}
.guide_cta h2 {
  margin-top: 13px;
  color: #f7f1e3;
  font-size: clamp(30px, 3.8vw, 48px);
}
.guide_cta p:not(.meta) {
  max-width: 48ch;
  margin-top: 14px;
  color: rgba(247, 241, 227, 0.7);
}
.guide_cta .meta {
  color: rgba(247, 241, 227, 0.56);
}
.guide_faq {
  margin-top: 30px;
}

@media (max-width: 940px) {
  .guide_hero__grid {
    grid-template-columns: 1fr;
  }
  .guide_snapshot {
    max-width: 620px;
  }
  .guide_layout {
    grid-template-columns: 1fr;
  }
  .guide_toc {
    position: static;
    padding: 20px;
    background: var(--surface-bright);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
  }
  .guide_toc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide_toc a:nth-child(odd) {
    padding-right: 16px;
  }
}
@media (max-width: 680px) {
  .search_paths,
  .guide_cards {
    grid-template-columns: 1fr;
  }
  .search_path {
    min-height: 0;
  }
  .guide_hero h1 {
    font-size: clamp(44px, 13vw, 66px);
  }
  .guide_snapshot dl > div {
    grid-template-columns: 64px 1fr;
  }
  .guide_toc nav {
    grid-template-columns: 1fr;
  }
  .guide_toc a:nth-child(odd) {
    padding-right: 0;
  }
  .guide_steps li {
    grid-template-columns: 30px 1fr;
  }
  .guide_steps li span {
    grid-column: 2;
  }
  .guide_cta {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .guide_cta .btn {
    width: 100%;
  }
}