/* ==========================================================================
 * math-viz — BoardUI skin (pure static, no build step)
 *
 * BoardUI semantic tokens, flattened to plain CSS custom properties.
 * Primitive values: Tailwind v4 defaults as shipped in
 * boardui-templates-replica/node_modules/tailwindcss/theme.css, plus the
 * four BoardUI overrides from styles/theme.css (@theme):
 *   neutral-100 #f7f7f7, neutral-200 #ebebeb, neutral-925 #121212,
 *   blue-400 #3392ff.
 * Semantic mappings: light = theme.css :root, dark = theme.css .dark,
 * applied here via @media (prefers-color-scheme: dark) because this site
 * switches on the OS setting (same behaviour as before).
 * Typography: BoardUI composite utilities from styles/typography.css —
 * each rule below copies one composite's size + weight + line-height +
 * letter-spacing as a set, never re-stacked by hand.
 * Radii: cards/panels rounded-3xl (24px), notification-style callouts
 * rounded-2xl (16px), buttons rounded-2lg (10px), pills rounded-full.
 * Icons: @remixicon/react paths inlined as SVG (see index.html).
 * ========================================================================== */

:root {
  /* ----- primitives ------------------------------------------------------ */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-50: oklch(98.5% 0 none);
  --color-neutral-100: #f7f7f7;
  --color-neutral-200: #ebebeb;
  --color-neutral-300: oklch(87% 0 none);
  --color-neutral-400: oklch(70.8% 0 none);
  --color-neutral-500: oklch(55.6% 0 none);
  --color-neutral-600: oklch(43.9% 0 none);
  --color-neutral-700: oklch(37.1% 0 none);
  --color-neutral-800: oklch(26.9% 0 none);
  --color-neutral-900: oklch(20.5% 0 none);
  --color-neutral-925: #121212;
  --color-neutral-950: oklch(14.5% 0 none);
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: #3392ff;
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
  --color-accent-50: var(--color-blue-50);
  --color-accent-100: var(--color-blue-100);
  --color-accent-200: var(--color-blue-200);
  --color-accent-300: var(--color-blue-300);
  --color-accent-400: var(--color-blue-400);
  --color-accent-500: var(--color-blue-500);
  --color-accent-600: var(--color-blue-600);
  --color-accent-700: var(--color-blue-700);
  --color-accent-800: var(--color-blue-800);
  --color-accent-900: var(--color-blue-900);
  --color-accent-950: var(--color-blue-950);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-950: oklch(25.8% 0.092 26.042);
  --color-teal-100: oklch(95.3% 0.051 180.801);
  --color-teal-400: oklch(77.7% 0.152 181.912);
  --color-teal-500: oklch(70.4% 0.14 182.503);
  --color-teal-600: oklch(60% 0.118 184.704);
  --color-teal-700: oklch(51.1% 0.096 186.391);
  --color-teal-800: oklch(43.7% 0.078 188.216);
  --color-teal-950: oklch(27.7% 0.046 192.524);
  --color-lime-100: oklch(96.7% 0.067 122.328);
  --color-lime-200: oklch(93.8% 0.127 124.321);
  --color-lime-300: oklch(89.7% 0.196 126.665);
  --color-lime-400: oklch(84.1% 0.238 128.85);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-lime-600: oklch(64.8% 0.2 131.684);
  --color-lime-800: oklch(45.3% 0.124 130.933);
  --color-lime-950: oklch(27.4% 0.072 132.109);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-950: oklch(27.1% 0.105 12.094);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-950: oklch(27.9% 0.077 45.635);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-950: oklch(28.6% 0.066 53.813);

  /* ----- semantic tokens, light (theme.css :root) ------------------------ */
  --color-foreground-icon-primary: var(--color-neutral-950);
  --color-foreground-icon-secondary: var(--color-neutral-500);
  --color-foreground-icon-tertiary: var(--color-neutral-400);
  --color-foreground-icon-quaternary: var(--color-neutral-300);
  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-error-primary: var(--color-red-500);
  --color-text-white: var(--color-white);
  --color-background-full: var(--color-white);
  --color-background-primary-default: var(--color-white);
  --color-background-primary-hover: var(--color-neutral-100);
  --color-background-primary-active: var(--color-neutral-200);
  --color-background-secondary-default: var(--color-neutral-100);
  --color-background-secondary-hover: var(--color-neutral-200);
  --color-background-tertiary-default: var(--color-neutral-200);
  --color-background-tertiary-hover: var(--color-neutral-300);
  --color-background-tertiary-error: var(--color-red-100);
  --color-border-button-default: var(--color-neutral-200);
  --color-border-button-hover: var(--color-neutral-300);
  --color-border-button-active: var(--color-neutral-400);
  --color-border-error-default: var(--color-red-500);
  --color-separator-border: var(--color-neutral-200);
  --color-border-focus-ring: var(--color-accent-500);
  --color-state-success-text: var(--color-lime-800);
  --color-state-success-base: var(--color-lime-200);
  --color-control-indicator-background: var(--color-white);
  --color-button-ghost-background: var(--color-accent-100);
  --color-button-ghost-hover: var(--color-accent-200);
  --color-button-ghost-active: var(--color-accent-300);
  --color-button-ghost-foreground: var(--color-accent-700);
  --color-badge-neutral-background: var(--color-neutral-200);
  --color-badge-new-background: var(--color-accent-100);
  --color-badge-new-text: var(--color-accent-600);
  --color-notification-information-background: var(--color-blue-100);
  --color-notification-information-foreground: var(--color-blue-600);
  --color-notification-success-background: var(--color-lime-100);
  --color-notification-success-foreground: var(--color-lime-600);
  --color-notification-error-background: var(--color-rose-100);
  --color-notification-error-foreground: var(--color-rose-600);
  --color-status-lime-background: var(--color-lime-200);
  --color-status-lime-text: var(--color-lime-800);
  --color-status-yellow-background: var(--color-yellow-200);
  --color-status-yellow-text: var(--color-yellow-800);
  --color-status-rose-background: var(--color-rose-200);
  --color-status-rose-text: var(--color-rose-800);
  --color-status-blue-background: var(--color-blue-200);
  --color-status-blue-text: var(--color-blue-800);
  --color-chart-track: var(--color-neutral-200);
  --color-chart-cursor: var(--color-neutral-300);
  --color-chart-1: var(--color-teal-400);
  --color-chart-1-active: var(--color-teal-500);
  --gradient-button-primary-default: linear-gradient(180deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
  --gradient-button-primary-hover: linear-gradient(180deg, var(--color-accent-400) 0%, var(--color-accent-500) 100%);
  --gradient-button-primary-active: linear-gradient(180deg, var(--color-accent-600) 0%, var(--color-accent-700) 100%);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-card: 0 1px 1px 0 rgb(0 0 0 / 0.05);
  --shadow-dropdown: 0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02);

  /* ----- legacy aliases (kept: inline SVG + JS read these names) --------- */
  --bg: var(--color-background-secondary-default);
  --panel: var(--color-background-primary-default);
  --panel-2: var(--color-background-secondary-default);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border-button-default);
  --line-soft: var(--color-separator-border);
  --r: var(--color-red-600);
  --r-soft: var(--color-red-100);
  --phi: var(--color-teal-600);
  --phi-soft: var(--color-teal-100);
  --theta: var(--color-accent-600);
  --theta-soft: var(--color-accent-100);
  --diam: var(--color-amber-700);
  --diam-soft: var(--color-amber-100);
  --ok: var(--color-status-lime-text);
  --ok-soft: var(--color-status-lime-background);
  --bad: var(--color-notification-error-foreground);
  --bad-soft: var(--color-notification-error-background);
  --scene-a: var(--color-background-secondary-default);
  --scene-b: var(--color-background-primary-default);
  --shadow: var(--shadow-card);
}

/* ----- semantic tokens, dark (theme.css .dark, OS setting) -------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-foreground-icon-primary: var(--color-neutral-50);
    --color-foreground-icon-tertiary: var(--color-neutral-600);
    --color-foreground-icon-quaternary: var(--color-neutral-700);
    --color-text-primary: var(--color-neutral-50);
    --color-text-tertiary: var(--color-neutral-600);
    --color-text-error-primary: var(--color-red-400);
    --color-background-full: var(--color-neutral-925);
    --color-background-primary-default: var(--color-neutral-800);
    --color-background-primary-hover: color-mix(in srgb, var(--color-neutral-700) 60%, transparent);
    --color-background-primary-active: var(--color-neutral-800);
    --color-background-secondary-default: var(--color-neutral-900);
    --color-background-secondary-hover: var(--color-neutral-800);
    --color-background-tertiary-default: var(--color-neutral-800);
    --color-background-tertiary-hover: var(--color-neutral-700);
    --color-background-tertiary-error: color-mix(in srgb, var(--color-red-950) 60%, transparent);
    --color-border-button-default: var(--color-neutral-700);
    --color-border-button-hover: var(--color-neutral-500);
    --color-border-button-active: var(--color-neutral-600);
    --color-border-error-default: var(--color-red-400);
    --color-separator-border: var(--color-neutral-800);
    --color-control-indicator-background: var(--color-white);
    --color-button-ghost-background: var(--color-accent-900);
    --color-button-ghost-hover: var(--color-accent-800);
    --color-button-ghost-active: var(--color-accent-700);
    --color-button-ghost-foreground: var(--color-accent-300);
    --color-badge-neutral-background: var(--color-neutral-800);
    --color-badge-new-background: var(--color-accent-950);
    --color-badge-new-text: var(--color-accent-400);
    --color-notification-information-background: color-mix(in srgb, var(--color-blue-800) 50%, transparent);
    --color-notification-information-foreground: var(--color-blue-300);
    --color-notification-success-background: color-mix(in srgb, var(--color-lime-800) 50%, transparent);
    --color-notification-success-foreground: var(--color-lime-300);
    --color-notification-error-background: color-mix(in srgb, var(--color-rose-800) 50%, transparent);
    --color-notification-error-foreground: var(--color-rose-300);
    --color-status-lime-background: color-mix(in srgb, var(--color-lime-950) 60%, transparent);
    --color-status-lime-text: var(--color-lime-500);
    --color-status-yellow-background: color-mix(in srgb, var(--color-yellow-950) 60%, transparent);
    --color-status-yellow-text: var(--color-yellow-500);
    --color-status-rose-background: color-mix(in srgb, var(--color-rose-950) 60%, transparent);
    --color-status-rose-text: var(--color-rose-500);
    --color-status-blue-background: color-mix(in srgb, var(--color-blue-950) 60%, transparent);
    --color-status-blue-text: var(--color-blue-300);
    --color-chart-track: var(--color-neutral-800);
    --color-chart-cursor: var(--color-neutral-700);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.12), 0 1px 3px 0 rgb(0 0 0 / 0.16);
    --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.12), 0 4px 6px -1px rgb(0 0 0 / 0.18);
    --shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.18);
    --shadow-card: 0 1px 1px 0 rgb(0 0 0 / 0.14);
    --shadow-dropdown: 0 1px 1px 0 rgb(0 0 0 / 0.14), 0 4px 4px 0 rgb(0 0 0 / 0.1);

    /* legacy aliases, dark */
    --bg: var(--color-background-full);
    --panel: var(--color-background-primary-default);
    --panel-2: var(--color-background-secondary-default);
    --ink: var(--color-text-primary);
    --muted: var(--color-text-secondary);
    --line: var(--color-border-button-default);
    --line-soft: var(--color-separator-border);
    --r: var(--color-red-400);
    --r-soft: color-mix(in srgb, var(--color-red-950) 60%, transparent);
    --phi: var(--color-teal-400);
    --phi-soft: color-mix(in srgb, var(--color-teal-950) 60%, transparent);
    --theta: var(--color-blue-400);
    --theta-soft: color-mix(in srgb, var(--color-blue-950) 60%, transparent);
    --diam: var(--color-amber-400);
    --diam-soft: color-mix(in srgb, var(--color-amber-950) 60%, transparent);
    --ok: var(--color-status-lime-text);
    --ok-soft: var(--color-status-lime-background);
    --bad: var(--color-notification-error-foreground);
    --bad-soft: var(--color-notification-error-background);
    --scene-a: var(--color-background-secondary-default);
    --scene-b: var(--color-background-full);
    --shadow: var(--shadow-card);
  }
}

/* ----- base --------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-background-secondary-default);
  color: var(--color-text-primary);
  /* BoardUI font-sans: Inter first, CJK fallbacks kept from the old stack. */
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  /* text-headline-regular: 16 / 22 / 400 */
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1140px; margin: 0 auto; padding: 26px 16px 70px; }
/* Entry page only: narrower column. */
body.home .wrap { max-width: 720px; padding: 48px 20px; }
/* h1: text-display-4-semibold 32 / 44 / 600, sans (no more serif). */
h1 {
  font-size: 32px; line-height: 44px; font-weight: 600; letter-spacing: 0;
  margin: 0;
}
/* h2: text-title-2-semibold 20 / 26 / 600 */
h2 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: 0; margin: 0 0 10px; }
/* h3: text-title-3-semibold 18 / 26 / 600 */
h3 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: 0; margin: 0; }
p { margin: 0 0 12px; }
/* .lead: text-headline-regular 16 / 22 / 400, secondary text */
.lead { color: var(--color-text-secondary); margin-top: 12px; max-width: 46em; }
.lead strong { color: var(--color-text-primary); }
section { margin-top: 44px; }
/* .sec-note: text-body-regular 14 / 20 / 400 */
.sec-note { color: var(--color-text-secondary); max-width: 48em; font-size: 14px; line-height: 20px; font-weight: 400; }
:focus-visible { outline: none; }

/* ----- panel: BoardUI card (rounded-3xl + border-button-default) ---------- */
.panel {
  background: var(--color-background-primary-default);
  border: 1px solid var(--color-border-button-default);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}
.prob { padding: 20px 22px 10px; margin-top: 22px; }
/* prob-tag: BoardUI badge, pill form (caption-1-semibold 12 / 16 / 600) */
.prob-tag {
  display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.15px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-button-default);
  border-radius: 999px; padding: 2px 12px; margin-bottom: 6px;
}
/* KaTeX output is untouched: only the wrapper's overflow rules stay. */
.formula { text-align: center; overflow-x: auto; overflow-y: hidden; padding: 10px 2px; }
.formula .katex-display { margin: 0; padding: 2px 0; }
.formula .katex { font-size: 1.06em; }
@media (max-width: 640px) {
  .formula { text-align: left; }
  .formula .katex-display { text-align: left; }
  .formula .katex { font-size: 0.8em; }
}
/* Math variable glyphs keep their italic serif face (content, not UI type). */
.v { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; }
.v-r { color: var(--r); } .v-phi { color: var(--phi); } .v-theta { color: var(--theta); }

/* ----- stage: 3D scene + controls ----------------------------------------- */
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 880px) { .stage-grid { grid-template-columns: 1fr; } }
#scene-wrap {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, var(--scene-a), var(--scene-b));
  border: 1px solid var(--color-border-button-default);
  height: min(64vh, 580px); min-height: 360px;
}
#scene-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.scene-hint {
  position: absolute; left: 12px; bottom: 10px;
  /* text-caption-1-medium 12 / 16 / 500 */
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.15px;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  padding: 3px 10px; border-radius: 999px; pointer-events: none;
}
#err-overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 20px; text-align: center; color: var(--bad); font-size: 14px; background: var(--panel-2);
}
.controls { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.ctl { display: grid; grid-template-columns: 86px 1fr 64px; align-items: center; gap: 10px; }
/* .ctl .name: text-headline-semibold 16 / 22 / 600 */
.ctl .name { font-weight: 600; font-size: 16px; line-height: 22px; display: flex; align-items: center; gap: 7px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-r { background: var(--r); } .dot-phi { background: var(--phi); } .dot-theta { background: var(--theta); }
.dot-diam { background: var(--diam); }
.ctl output { font-family: Georgia, serif; font-weight: 700; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
/* Slider: BoardUI slider track (h-1.5, rounded-full, tertiary fill + inset
 * shadow) + size-5 white thumb with border-button-default. The per-variable
 * accent fill comes from accent-color (Chrome/Firefox paint the filled
 * portion); custom track/thumb keep the BoardUI look. */
input[type="range"] { width: 100%; height: 30px; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.acc-r { accent-color: var(--r); } .acc-phi { accent-color: var(--phi); } .acc-theta { accent-color: var(--theta); }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: var(--color-background-tertiary-default);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.06);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--color-control-indicator-background);
  border: 1px solid var(--color-border-button-default);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: var(--color-background-tertiary-default);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.06);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-control-indicator-background);
  border: 1px solid var(--color-border-button-default);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
input[type="range"]:focus-visible::-webkit-slider-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 2px var(--color-border-focus-ring);
}
/* .ctl small: text-caption-1-regular 12 / 16 / 400 */
.ctl small { grid-column: 2 / 4; color: var(--color-text-secondary); font-size: 12px; line-height: 16px; font-weight: 400; margin-top: -6px; }
.readout { border-top: 1px dashed var(--line); padding-top: 12px; }
.readout .coords { font-family: Georgia, "Times New Roman", serif; font-size: 15.5px; font-variant-numeric: tabular-nums; }
/* Badge: status pill (BoardUI status tokens), rounded-full.
 * text-body-semibold 14 / 20 / 600 */
.badge {
  display: inline-block; font-weight: 600; font-size: 14px; line-height: 20px;
  border-radius: 999px; padding: 3px 14px; margin: 6px 0 4px;
}
.badge-in { background: var(--color-status-lime-background); color: var(--color-status-lime-text); }
.badge-on { background: var(--color-status-blue-background); color: var(--color-status-blue-text); }
.badge-out { background: var(--color-status-rose-background); color: var(--color-status-rose-text); }
/* Meter: BoardUI progress track (rounded-full, border-button-default) + fill.
 * Fill color is set inline by JS (var(--r) / var(--bad)); track is h-2 (lg). */
.meter { position: relative; height: 8px; border-radius: 999px; background: var(--color-border-button-default); margin: 12px 0 4px; }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--r); transition: width 0.08s linear; }
.meter-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--color-text-primary); }
/* .meter-labels: text-caption-1-regular 12 / 16 / 400 */
.meter-labels { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Button: BoardUI Button medium (h-9, rounded-2lg 10px, text-body-medium
 * 14 / 20 / 500), secondary variant by default; focus ring per AGENTS.md. */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 2px; white-space: nowrap; height: 36px; padding: 8px 12px;
  border: 1px solid var(--color-border-button-default);
  background: var(--color-background-primary-default);
  color: var(--color-text-primary);
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
  border-radius: 10px; box-shadow: var(--shadow-xs);
  cursor: pointer; outline: none;
}
.btn:hover { background: var(--color-background-primary-hover); border-color: var(--color-border-button-hover); }
.btn:active { background: var(--color-background-primary-active); border-color: var(--color-border-button-active); transform: translateY(1px); }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--color-background-full), 0 0 0 4px var(--color-border-focus-ring); }
/* Primary: accent-500 -> accent-600 gradient (theme.css gradient tokens). */
.btn.primary {
  background: var(--gradient-button-primary-default);
  color: var(--color-text-white); border-color: transparent;
}
.btn.primary:hover { background: var(--gradient-button-primary-hover); border-color: transparent; }
.btn.primary:active { background: var(--gradient-button-primary-active); border-color: transparent; }
/* Pressed toggles read as "on" via the same primary gradient. */
.btn[aria-pressed="true"] {
  background: var(--gradient-button-primary-default);
  color: var(--color-text-white); border-color: transparent;
}
.btn[aria-pressed="true"]:hover { background: var(--gradient-button-primary-hover); border-color: transparent; }
/* .btn-group-label: text-caption-1-semibold 12 / 16 / 600 */
.btn-group-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.15px; color: var(--color-text-secondary); margin-bottom: -4px; }
.diam-legend { border-top: 1px dashed var(--line); padding-top: 12px; font-size: 14px; line-height: 20px; font-weight: 400; }
.diam-legend .row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.diam-legend .row b { white-space: nowrap; }

/* ----- explainer sections --------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.fig-panel { padding: 16px; }
.fig-panel svg { display: block; width: 100%; height: auto; }
/* .fig-cap: text-body-2-regular 13 / 18 / 400 */
.fig-cap { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--color-text-secondary); margin-top: 8px; }
/* Callouts: BoardUI notification card (rounded-2xl + border-button-default)
 * with a soft status-tinted fill. */
.callout { background: var(--r-soft); border: 1px solid var(--color-border-button-default); border-radius: 16px; padding: 16px 18px; }
.callout p:last-child { margin-bottom: 0; }
.callout-diam { background: var(--diam-soft); border: 1px solid var(--color-border-button-default); border-radius: 16px; padding: 16px 18px; }
.callout-diam p:last-child { margin-bottom: 0; }
.range-rows { display: flex; flex-direction: column; gap: 14px; }
.range-row {
  display: grid; grid-template-columns: 150px 190px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 18px;
}
@media (max-width: 880px) { .range-row { grid-template-columns: 1fr; gap: 6px; } }
/* .range-name: text-headline-semibold 16 / 22 / 600 */
.range-name { font-weight: 600; font-size: 16px; line-height: 22px; display: flex; align-items: center; gap: 8px; }
/* .range-why: text-body-regular 14 / 20 / 400 */
.range-why { color: var(--color-text-secondary); font-size: 14px; line-height: 20px; font-weight: 400; }
.range-why strong { color: var(--color-text-primary); }
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { padding: 18px 20px 10px; }
.step-head { display: flex; align-items: baseline; gap: 12px; }
/* Step number seal: primary gradient disc, white numeral. */
.step-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gradient-button-primary-default); color: var(--color-text-white);
  font-weight: 700; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(5px);
}
/* .step p: text-body-regular 14 / 20 / 400 */
.step p { color: var(--color-text-secondary); margin: 6px 0 2px 40px; font-size: 14px; line-height: 20px; font-weight: 400; }
@media (max-width: 560px) { .step p { margin-left: 0; } }
/* .answer: text-title-2-semibold 20 / 26 / 600 */
.answer {
  text-align: center; font-weight: 600;
  font-size: 20px; line-height: 26px;
  padding: 8px 0 4px;
}
.quiz-q { padding: 18px 20px; margin-bottom: 14px; }
.quiz-q h3 { margin-bottom: 10px; }
/* Quiz options: BoardUI radio/secondary-button selected states.
 * Correct = status-lime, wrong = status-rose (tokens, both themes).
 * BoardUI buttons are whitespace-nowrap, but quiz options carry long
 * Chinese sentences: options must wrap (and grow taller) on narrow
 * screens instead of overflowing the row. */
.opt { white-space: normal; height: auto; min-height: 36px; text-align: left; }
.opt.correct { background: var(--color-status-lime-background); border-color: var(--color-lime-600); color: var(--color-status-lime-text); font-weight: 700; }
.opt.wrong { background: var(--color-status-rose-background); border-color: var(--color-rose-600); color: var(--color-status-rose-text); }
/* .feedback: text-body-2-regular 13 / 18 / 400 */
.feedback { min-height: 1.7em; font-size: 13px; line-height: 18px; font-weight: 400; margin-top: 10px; color: var(--color-text-secondary); }
.feedback.good { color: var(--color-state-success-text); font-weight: 700; }
/* .mantra: text-title-2-semibold 20 / 26 / 600, centred panel */
.mantra {
  text-align: center; font-weight: 600;
  font-size: 20px; line-height: 26px;
  padding: 26px 18px; margin-top: 44px;
}
.mantra span { color: var(--r); }
/* footer: text-caption-1-regular 12 / 16 / 400 */
footer { margin-top: 26px; color: var(--color-text-tertiary); font-size: 12px; line-height: 16px; font-weight: 400; text-align: center; }

/* ----- entry page ----------------------------------------------------------- */
body.home h1 { font-size: 24px; line-height: 34px; font-weight: 600; letter-spacing: 0; margin: 0 0 8px; }
body.home .sub { color: var(--color-text-secondary); margin: 0 0 32px; }
.item {
  position: relative; display: block;
  background: var(--color-background-primary-default);
  border: 1px solid var(--color-border-button-default);
  border-radius: 24px; box-shadow: var(--shadow-card);
  padding: 20px 52px 20px 20px; text-decoration: none; color: inherit; margin-bottom: 14px;
  outline: none;
}
.item:hover { border-color: var(--color-border-button-hover); background: var(--color-background-primary-hover); box-shadow: var(--shadow-sm); }
.item:focus-visible { box-shadow: 0 0 0 2px var(--color-background-full), 0 0 0 4px var(--color-border-focus-ring); }
/* .item .tag: BoardUI "new" badge (accent-100 / accent-600), pill form */
.item .tag {
  display: inline-flex; align-items: center;
  background: var(--color-badge-new-background); color: var(--color-badge-new-text);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.15px;
  border-radius: 999px; padding: 2px 8px;
}
.item h2 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: 0; margin: 6px 0 4px; }
.item p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 20px; font-weight: 400; }
.item .arrow {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--color-foreground-icon-tertiary);
  flex: none; pointer-events: none;
}
.item:hover .arrow { color: var(--color-accent-600); }