html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

:root {
  color-scheme: light;
  --ink: #333;
  --paper: #fff;
  --surface: #fbfbf8;
  --muted: #737373;
  --line: #e5e5e5;
  --line-strong: #a6a6a0;
  --cyan: #151515;
  --brand-cyan: #4bffff;
  --blue: #151515;
  --pink: #151515;
  --yellow: #151515;
  --white: #ffffff;
  --max-width: 1440px;
  --gutter: 48px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius: 4px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(20, 20, 18, .06);
  --shadow-md: 0 12px 32px rgba(20, 20, 18, .10);
  --font-cn: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-hero: var(--font-cn);
  --font-en: var(--font-cn);
  --font-display: var(--font-en), var(--font-cn);
  --font-body: var(--font-cn), var(--font-en);

  /* shadcn/ui-compatible semantic aliases */
  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--paper);
  --card-foreground: var(--ink);
  --primary: var(--ink);
  --primary-foreground: var(--paper);
  --secondary: var(--cyan);
  --secondary-foreground: var(--paper);
  --muted-foreground: var(--muted);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--cyan);
  --title-size: 48px;
  --title-leading: 56px;
  --body-size: 16px;
  --body-leading: 26px;
  --caption-size: 12px;
  --caption-leading: 18px;
}

[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --ink: #fafafa;
  --paper: #171717;
  --surface: #1d1d1b;
  --muted: #a3a3a3;
  --line: #525252;
  --line-strong: #696962;
  --cyan: #f3f3ed;
  --brand-cyan: #4bffff;
  --blue: #f3f3ed;
  --pink: #f3f3ed;
  --yellow: #f3f3ed;
  --primary-foreground: var(--paper);
  --secondary-foreground: var(--paper);
  --white: #111111;
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .16);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-leading); text-rendering: optimizeLegibility; font-kerning: normal; line-break: strict; overflow-wrap: break-word; }
html[lang^="en"] body { font-family: var(--font-en), var(--font-cn); }
html[lang^="zh"] body { font-family: var(--font-cn), var(--font-en); }
h1, h2, h3, .intro-title, .content-title { font-family: var(--font-hero); font-weight: 600; }
p, li, label, input, textarea, select, button, nav, .meta, .eyebrow, .card-kicker { text-spacing: trim-start allow-end ideograph-alpha ideograph-numeric; hanging-punctuation: first allow-end last; }
body, p, li, .content-body, .intro-note, .card-description { word-spacing: .06em; }
button, input, textarea, select { font-family: inherit; }
button, a { font: inherit; color: inherit; }
a { text-decoration: none; }
button { border: 0; background: none; cursor: pointer; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --ink: #fafafa; --paper: #171717; --surface: #1d1d1b; --muted: #a3a3a3; --line: #525252; --line-strong: #696962; --cyan: #f3f3ed; --brand-cyan: #4bffff; --blue: #f3f3ed; --pink: #f3f3ed; --yellow: #f3f3ed; --white: #111111; --primary-foreground: var(--paper); --secondary-foreground: var(--paper); }
}
@media (max-width: 800px) { :root { --gutter: 24px; } }
@media (max-width: 359px) { :root { --gutter: 16px; } }