:root {
  color-scheme: light;
  --page: #f4f1e9;
  --surface: #fffefa;
  --surface-soft: #ece9df;
  --surface-raised: #ffffff;
  --ink: #252a27;
  --ink-muted: #626b66;
  --ink-weak: #7c837c;
  --line: #dad8ce;
  --line-strong: #b8b8aa;
  --accent: #496b58;
  --accent-hover: #31503f;
  --accent-soft: #e3eadf;
  --highlight: #d6b76c;
  --player: #172824;
  --player-ink: #f5f1e4;
  --player-progress: #d4e78c;
  --success: #347653;
  --success-soft: #e4f0e7;
  --warning: #9a641f;
  --warning-soft: #fbf0dd;
  --danger: #a34436;
  --danger-soft: #f8e8e4;
  --info: #3b6477;
  --info-soft: #e8f0f3;
  --focus: #31503f;
  --shadow-1: 0 1px 2px rgb(37 42 39 / 5%);
  --shadow-2: 0 10px 32px rgb(37 42 39 / 9%);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --page-max: 1280px;
  --reading-max: 780px;
  --font-sans: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --motion-fast: 140ms;
  --motion-normal: 200ms;
}
:where([hidden]) { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font: 16px/1.55 var(--font-sans); }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { color: var(--player-ink); background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}