/* Grok Bot Style — generated from tokens.json */
:root, [data-theme="light"] {
  --canvas: #ffffff;
  --paper: #f9f8f6;
  --chip: #f2f1ef;
  --line: #d5d9e2;
  --line-strong: #8a8d93;
  --ink: #0a0a0a;
  --ink-soft: #555555;
  --ink-muted: #7d8187;
  --on-ink: #ffffff;
  --amber: #ff9800;
  --orange: #ff6700;
  --red: #e02135;
  --pink: #e02a88;
  --purple: #804ee0;
  --blue: #0e74e0;
  --teal: #00a592;
  --green: #009957;
  --coral: #fe5667;
  --coral-deep: #510c13;
  --azure: #1084fe;
  --azure-deep: #052a50;
  --violet: #9159fc;
  --violet-deep: #2d1c50;
  --jade: #00bda6;
  --jade-deep: #003c34;
  --success: var(--jade-deep);
  --success-soft: #e3f5f1;
  --danger: var(--red);
  --danger-soft: #fde9eb;
  --focus: var(--blue);
  --plate: rgba(255, 255, 255, 0.92);
  --scrim: rgba(10, 10, 10, 0.04);
  --shadow-ring: 0 0 0 1px rgba(37, 37, 37, 0.1);
  --shadow-pop: 0 4px 12px rgba(10, 10, 10, 0.08), 0 24px 48px rgba(10, 10, 10, 0.12);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-40: 160px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 9999px;
  --content-width: 1024px;
  --reading-width: 680px;
  --header-height: 64px;
  --video-landscape: 1920px;
  --video-portrait: 1080px;
  --font-sans: "Geist", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Noto Sans TC", ui-monospace, "Cascadia Mono", monospace;
}
.display-xl { font-family: var(--font-sans); font-size: 92px; line-height: 0.98; font-weight: 500; letter-spacing: -0.01em; }
.display { font-family: var(--font-sans); font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -0.01em; }
.title { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 500; letter-spacing: -0.01em; }
.heading { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 500; }
.lead { font-family: var(--font-sans); font-size: 18px; line-height: 29px; font-weight: 400; }
.card-title { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.video-title { font-family: var(--font-sans); font-size: 120px; line-height: 0.98; font-weight: 500; letter-spacing: -0.01em; }
.video-headline { font-family: var(--font-sans); font-size: 72px; line-height: 1.05; font-weight: 500; letter-spacing: -0.01em; }
.video-body { font-family: var(--font-sans); font-size: 48px; line-height: 1.35; font-weight: 400; }
.video-subtitle { font-family: var(--font-sans); font-size: 44px; line-height: 1.4; font-weight: 500; }
.video-name { font-family: var(--font-sans); font-size: 40px; line-height: 1.2; font-weight: 500; }
.video-role { font-family: var(--font-sans); font-size: 28px; line-height: 1.3; font-weight: 400; }
.video-tag { font-family: var(--font-mono); font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: 0.04em; }