:root {
  --color-surface: #f9f9f9;
  --color-surface-alt: #f0f0f1;
  --color-surface-deep: #e4e4e5;
  --color-ink: #464753;
  --color-ink-soft: #6a6b7b;
  --color-ink-muted: #787887;
  --color-line: #d9d9db;
  --color-primary: #4247bd;
  --color-primary-ink: #ffffff;
  --color-primary-soft: #dfe0f1;
  --color-accent: #dd3822;
  --color-accent-ink: #ffffff;
  --color-highlight: #f4d6d2;
  --color-focus: #d72b13;
  --color-contrast-surface: #151621;
  --color-contrast-ink: #e4e4e7;
  --color-contrast-line: #43434d;
  --color-contrast-accent: #e04c38;
  --overlay-scrim: linear-gradient(180deg, rgba(21, 22, 33, 0.35) 0%, rgba(21, 22, 33, 0.72) 55%, rgba(21, 22, 33, 0.92) 100%);
  --font-heading: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12.2px;
  --text-sm: 14.6px;
  --text-base: 16px;
  --text-lg: 19.2px;
  --text-xl: 23.0px;
  --text-2xl: 27.6px;
  --text-3xl: 33.2px;
  --text-4xl: 39.8px;
  --text-display: clamp(34px, 5.3vw, 68px);
  --text-figure: clamp(28px, 3.8vw, 49px);
  --weight-heading: 642;
  --weight-body: 400;
  --leading-body: 1.78;
  --leading-heading: 1.17;
  --tracking-heading: 0.002em;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 1px;
  --shadow-1: 0 1px 0 rgba(70, 71, 83, 0.12);
  --shadow-2: 0 2px 0 rgba(70, 71, 83, 0.18);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --container: 1320px;
  --measure: 73ch;
  --gutter: 24px;
  --section-y: 73px;
  --section-y-lg: 102px;
}

/* ============ 1. Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, hr { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
hr { border: 0; }

/* ============ 2. 基础与中文排版 ============ */
body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: 0.012em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: color-mix(in srgb, var(--color-contrast-surface) 84%, var(--color-ink));
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--color-primary); text-decoration-thickness: var(--border-thin); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: calc(var(--border-thin) * 2); }
strong, b { font-weight: 642; }
code, kbd, samp { font-family: var(--font-mono); }
:focus-visible {
  outline: calc(var(--border-thin) * 2) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============ 3. 骨架与容器 ============ */
#main-content { display: block; min-height: 60vh; }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--measure) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--space-6); }
.section--lg { padding-block: var(--section-y-lg); }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: calc(var(--border-thin) * 4) solid color-mix(in srgb, var(--color-contrast-surface) 82%, var(--color-ink));
  margin-bottom: var(--space-4);
}
.sec-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-primary);
}
.sec-title { font-size: var(--text-2xl); }
.sec-desc {
  margin-top: var(--space-1);
  max-width: var(--measure);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* ============ 4. 分隔语言 ============ */
.rule { border-top: calc(var(--border-thin) * 4) solid color-mix(in srgb, var(--color-contrast-surface) 82%, var(--color-ink)); }
.rule--double {
  height: calc(var(--border-thin) * 5);
  border-top: var(--border-thin) solid var(--color-line);
  border-bottom: var(--border-thin) solid var(--color-line);
  background: transparent;
}

/* ============ 5. 栅格 ============ */
.grid { display: grid; gap: var(--space-3); }
.grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ============ 6. 头部：侧边导览轨道 ============ */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 120;
  transform: translateY(-260%);
  padding: 10px 18px;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 60; }

.rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 236px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-inline-end: var(--border-thin) solid var(--color-contrast-line);
  z-index: 95;
  scrollbar-width: thin;
}
.rail__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) 20px var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
}
.brand {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}
.brand__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--color-contrast-ink);
}
.brand__cn {
  margin-inline-start: 4px;
  font-family: var(--font-mono);
  font-size: 0.56em;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-contrast-accent);
  vertical-align: 0.22em;
}
.brand__tagline {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-contrast-ink) 58%, transparent);
}
.rail__close {
  display: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: var(--border-thin) solid var(--color-contrast-line);
  border-radius: var(--radius-md);
  color: var(--color-contrast-ink);
  transition: border-color 180ms ease, color 180ms ease;
}
.rail__close:hover { border-color: var(--color-contrast-accent); color: var(--color-contrast-accent); }
.rail__close-mark { position: relative; display: block; width: 14px; height: 14px; }
.rail__close-mark::before,
.rail__close-mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: var(--border-thin);
  background: currentColor;
}
.rail__close-mark::before { transform: rotate(45deg); }
.rail__close-mark::after { transform: rotate(-45deg); }

.rail__list { list-style: none; margin: 0; padding: 0; }
.rail__item { border-bottom: var(--border-thin) solid var(--color-contrast-line); }
.rail__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 20px 15px 17px;
  border-inline-start: 3px solid transparent;
  color: color-mix(in srgb, var(--color-contrast-ink) 74%, transparent);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.rail__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-contrast-ink) 46%, transparent);
  transition: color 180ms ease;
}
.rail__label { min-width: 0; }
.rail__link:hover {
  background: color-mix(in srgb, var(--color-contrast-ink) 8%, transparent);
  color: var(--color-contrast-ink);
}
.rail__link:hover .rail__num { color: var(--color-contrast-accent); }
.rail__link[aria-current="page"] {
  border-inline-start-color: var(--color-contrast-accent);
  background: color-mix(in srgb, var(--color-contrast-accent) 14%, transparent);
  color: var(--color-primary-ink);
}
.rail__link[aria-current="page"] .rail__num { color: var(--color-contrast-accent); }

.rail__foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 14px 20px;
  background: var(--color-contrast-surface);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.rail__ver { letter-spacing: 0.16em; color: var(--color-contrast-accent); }
.rail__status { display: block; margin-top: 4px; color: color-mix(in srgb, var(--color-contrast-ink) 52%, transparent); }

.topbar { display: none; }
.topbar__brand {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-contrast-ink);
  text-decoration: none;
}
.topbar__cn {
  margin-inline-start: 3px;
  font-family: var(--font-mono);
  font-size: 0.56em;
  letter-spacing: 0.14em;
  color: var(--color-contrast-accent);
  vertical-align: 0.24em;
}
.topbar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: var(--border-thin) solid var(--color-contrast-line);
  border-radius: var(--radius-md);
  color: var(--color-contrast-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  transition: border-color 180ms ease, color 180ms ease;
}
.topbar__toggle:hover { border-color: var(--color-contrast-accent); color: var(--color-contrast-accent); }
.topbar__bars {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 10px;
  background: linear-gradient(currentColor, currentColor) center / 100% var(--border-thin) no-repeat;
}
.topbar__bars::before,
.topbar__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--border-thin);
  background: currentColor;
}
.topbar__bars::before { top: 0; }
.topbar__bars::after { bottom: 0; }
.topbar__label { white-space: nowrap; }

html[data-nav-lock] { overflow: hidden; }
html[data-nav-lock]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--color-contrast-surface) 68%, transparent);
}

/* ============ 7. 通用按钮与标签 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary { background: var(--color-primary); color: var(--color-primary-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--color-primary) 82%, var(--color-contrast-surface)); }
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--accent:hover { background: color-mix(in srgb, var(--color-accent) 82%, var(--color-contrast-surface)); }
.btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-contrast-surface); border-color: var(--color-contrast-surface); color: var(--color-contrast-ink); }
.btn--quiet { padding-inline: 0; color: var(--color-primary); }
.btn--quiet:hover { text-decoration: underline; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.chip--accent { background: var(--color-highlight); color: var(--color-accent); }
.chip--solid { background: var(--color-contrast-surface); color: var(--color-contrast-ink); }

.copy-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: var(--border-thin) dashed var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  transition: border-color 160ms ease, color 160ms ease;
}
.copy-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ============ 8. 面包屑 ============ */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: var(--space-3);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs li::after { content: "/"; color: var(--color-line); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--color-ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }

/* ============ 9. 卡片与图录 ============ */
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: border-color 160ms ease;
}
.card:hover { border-color: var(--color-primary); }
.card__media { border-bottom: var(--border-thin) solid var(--color-line); }
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  padding: var(--space-3);
}
.card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.card__title { font-size: var(--text-lg); }
.card__meta {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ============ 10. 图片容器（统一切图比例） ============ */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-deep);
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-scrim);
  pointer-events: none;
}
.media__overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-3);
  color: var(--color-contrast-ink);
}
.media__overlay .card__num,
.media__overlay .chip { color: var(--color-contrast-accent); background: color-mix(in srgb, var(--color-contrast-surface) 70%, transparent); }
.media__cap {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ============ 11. 正文、表格、强调 ============ */
.prose {
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}
.prose > * + * { margin-top: var(--space-3); }
.prose h2 { margin-top: var(--space-6); font-size: var(--text-xl); }
.prose h3 { margin-top: var(--space-4); font-size: var(--text-lg); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: var(--space-1); }
.prose code {
  padding: 2px 6px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: 0.92em;
}

.ledger { list-style: none; border-top: var(--border-thin) solid var(--color-line); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.ledger__key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}
.ledger__val { color: var(--color-ink); }

.quote {
  position: relative;
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  background: var(--color-highlight);
  border-inline-start: calc(var(--border-thin) * 4) solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-contrast-surface) 78%, var(--color-ink));
}
.quote::before {
  content: "\201C";
  position: absolute;
  left: 14px;
  top: 10px;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-accent);
}

/* ============ 12. 筛选与折叠面板 ============ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.filter-bar__label {
  margin-inline-end: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
}
.filter-btn {
  padding: 6px 12px;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.panel {
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.panel + .panel { margin-top: calc(var(--border-thin) * -1); border-radius: 0; }
.panel:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.panel:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  text-align: start;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  transition: background-color 160ms ease;
}
.panel__head:hover { background: var(--color-surface-deep); }
.panel__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-primary);
}
.panel__icon {
  flex: 0 0 auto;
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  transition: transform 200ms ease, color 200ms ease;
}
.panel[data-open] .panel__icon { transform: rotate(45deg); color: var(--color-accent); }
.panel__body { display: none; padding: var(--space-3); }
.panel[data-open] .panel__body { display: block; animation: fade-in 120ms ease both; }

/* ============ 13. 动效 ============ */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes filter-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rail-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }
.is-filter-in { animation: filter-in 160ms ease both; }

/* ============ 14. 页脚：反色区块 ============ */
.site-footer {
  position: relative;
  margin-top: var(--section-y-lg);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-top: calc(var(--border-thin) * 4) solid var(--color-contrast-accent);
}
.footer__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.footer__index {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.footer__index-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--color-contrast-ink) 45%, transparent);
}
.footer__tags {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: var(--border-thin) solid var(--color-contrast-line);
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 80%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.tag:hover {
  border-color: var(--color-contrast-accent);
  background: color-mix(in srgb, var(--color-contrast-accent) 16%, transparent);
  color: var(--color-primary-ink);
}
.tag__num { color: var(--color-contrast-accent); }

.footer__version {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--space-8);
  align-items: end;
  padding-block: var(--section-y);
}
.version__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--color-contrast-ink) 48%, transparent);
}
.version__value {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-figure);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--color-primary-ink);
}
.version__track {
  display: flex;
  list-style: none;
  margin-bottom: var(--space-4);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}
.version__step {
  position: relative;
  flex: 1 1 0;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-contrast-ink) 40%, transparent);
}
.version__step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--border-thin) * -1);
  height: calc(var(--border-thin) * 3);
  background: transparent;
}
.version__step.is-done::before { background: color-mix(in srgb, var(--color-contrast-accent) 55%, transparent); }
.version__step.is-now::before { background: var(--color-contrast-accent); }
.version__step.is-now .version__step-num { color: var(--color-contrast-accent); }

.footer__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-4);
}
.footer__meta-item { border-top: var(--border-thin) solid var(--color-contrast-line); padding-top: var(--space-1); }
.footer__meta-item dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-contrast-ink) 44%, transparent);
}
.footer__meta-item dd {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--color-contrast-ink);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3) var(--space-6);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}
.footer__legal {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-contrast-ink) 56%, transparent);
}
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.footer__contact a { color: var(--color-contrast-ink); text-decoration: none; }
.footer__contact a:hover { color: var(--color-contrast-accent); text-decoration: underline; }
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: var(--border-thin) solid var(--color-contrast-line);
  border-radius: var(--radius-md);
  color: var(--color-contrast-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.to-top:hover {
  border-color: var(--color-contrast-accent);
  background: color-mix(in srgb, var(--color-contrast-accent) 18%, transparent);
  color: var(--color-primary-ink);
}

/* ============ 15. 工具类 ============ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ 16. 响应式 ============ */
@media (min-width: 1024px) {
  body { padding-inline-start: 236px; }
}

@media (max-width: 1023px) {
  body { padding-block-start: 56px; }
  .skip-link { top: 64px; }

  .topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: 56px;
    padding-inline: var(--gutter);
    background: var(--color-contrast-surface);
    color: var(--color-contrast-ink);
    border-bottom: var(--border-thin) solid var(--color-contrast-line);
  }
  .rail {
    inset: 0 0 auto 0;
    width: 100%;
    max-height: 88vh;
    transform: translateY(-101%);
    transition: transform 200ms ease;
    border-inline-end: 0;
    border-bottom: var(--border-thin) solid var(--color-contrast-line);
  }
  .rail[data-open] { transform: translateY(0); }
  .rail[data-open] .rail__head { animation: rail-drop 200ms ease both; }
  .rail__close { display: inline-flex; }
  .rail__foot { position: static; }
  html[data-nav-lock]::before { background: color-mix(in srgb, var(--color-contrast-surface) 62%, transparent); }

  .grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-3, .col-4 { grid-column: span 6; }
  .col-6, .col-8 { grid-column: span 12; }

  .footer__version { grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-6); }
  .footer__base { padding-block: var(--space-3) var(--space-4); }
  .site-footer { margin-top: var(--section-y); }
}

@media (max-width: 640px) {
  .col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 12; }
  .sec-head { flex-direction: column; gap: var(--space-1); }
  .ledger__row { grid-template-columns: 1fr; gap: 4px; }
  .quote { padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); }
  .footer__tags { gap: 6px; }
  .footer__index { align-items: flex-start; gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .rail { transition: none; }
}