:root {
  --content-max: 1240px;
  --content-gutter: 32px;
  --content-max-tablet: 760px;
  --content-gutter-tablet: 20px;
  --content-gutter-mobile: 16px;
  --ink-950: #101923;
  --ink-900: #1b2835;
  --ink-700: #40515f;
  --ink-500: #647583;
  --paper-50: #ffffff;
  --paper-100: #f6f9fc;
  --paper-200: #e8eef5;
  --line: rgba(16, 25, 35, .14);
  --line-strong: rgba(16, 25, 35, .26);
  --blue-600: #146fb3;
  --blue-700: #0d5792;
  --blue-100: #e8f4ff;
  --hero-overlay: rgba(8, 20, 37, .58);
  /* the hero artwork and its orb layers are content-hashed by
     scripts/build_hero_layers.py; the home template injects the URLs from
     layers.json, so a regenerate never needs a CSS edit. The raw source is the
     fallback for the (broken) case where layers.json cannot be read. */
  --hero-art: url("../images/kandinsky-composition-viii.jpg");
  --hero-accent: #146fb3;
  --hero-accent-ink: #ffffff;
  --lens-r: 76px;
  --mx: -400px;
  --my: -400px;
  --white: #fff;
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: Arial, "Helvetica Neue", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* Semantic roles keep page-specific styles on one type spine while allowing
     Chinese long-form copy to use the platform's native YaHei rendering. */
  --font-interface: var(--sans);
  --font-reading: var(--sans);
  --font-cjk: "Microsoft YaHei", "微软雅黑", "PingFang SC", var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-control: 6px;
  --radius-card: 10px;
  --radius-panel: 18px;
  --shadow-soft: 0 18px 45px rgba(20, 45, 68, .08);
  --shadow-card: 0 10px 24px rgba(17, 45, 76, .05), 0 2px 5px rgba(17, 45, 76, .03);
  --shadow-card-hover: 0 18px 38px rgba(17, 45, 76, .09), 0 4px 10px rgba(17, 45, 76, .04);
  --shadow-overlay: 0 30px 80px rgba(8, 20, 37, .24), 0 8px 24px rgba(8, 20, 37, .14);
  --page-start: 88px;
  --page-start-mobile: 76px;
  --section-start: 32px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}