:root, [data-theme="night"] {
  --bg: #07080b;
  --bg-2: #0d0f14;
  --ink: #ece7da;
  --text: #ece7da;
  --text-dim: #9d988c;
  --text-faint: #6c685f;
  --hot: #ff5a1f;
  --hot-2: #7fd8ff;
  --line: rgb(236 231 218 / 0.14);
  --line-strong: rgb(236 231 218 / 0.3);
  --panel: rgb(7 8 11 / 0.78);
}
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --r-1: 6px;
  --r-2: 12px;
  --r-pill: 999px;
  --t-fast: 160ms;
  --t-mid: 320ms;
  --t-slow: 700ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pitch: 9px;
  --font-ui: "Atkinson Hyperlegible Next", "Noto Sans SC", system-ui, sans-serif;
  --font-dot: "Doto", "Atkinson Hyperlegible Next", monospace;
  --font-zh: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}
.matrix-caption { font-family: var(--font-dot); font-size: 15px; line-height: 1.3; font-weight: 900; letter-spacing: 0.06em;  }
.headline { font-family: var(--font-ui); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;  }
.title { font-family: var(--font-ui); font-size: 21px; line-height: 1.3; font-weight: 600;   }
.body { font-family: var(--font-ui); font-size: 17px; line-height: 1.6; font-weight: 400;   }
.ui { font-family: var(--font-ui); font-size: 15px; line-height: 1.2; font-weight: 500;   }
.small { font-family: var(--font-ui); font-size: 13px; line-height: 1.4; font-weight: 400;   }
.label { font-family: var(--font-ui); font-size: 12px; line-height: 1; font-weight: 500;   }
.zh-title { font-family: var(--font-zh); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; font-weight: 700;   }