:root {
  --color-surface: #29282b;
  --color-surface-alt: #37363a;
  --color-surface-deep: #48474c;
  --color-ink: #c6c4cf;
  --color-ink-soft: #9692a5;
  --color-ink-muted: #7a758a;
  --color-line: #454449;
  --color-primary: #856fd3;
  --color-primary-ink: #121118;
  --color-primary-soft: #363243;
  --color-accent: #cbe817;
  --color-accent-ink: #121118;
  --color-highlight: #464b27;
  --color-focus: #d4f50a;
  --color-contrast-surface: #f5f5f6;
  --color-contrast-ink: #37353b;
  --color-contrast-line: #cbcbcd;
  --color-contrast-accent: #65740c;
  --overlay-scrim: linear-gradient(180deg, rgba(245, 245, 246, 0.35) 0%, rgba(245, 245, 246, 0.72) 55%, rgba(245, 245, 246, 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: 10.4px;
  --text-sm: 13.9px;
  --text-base: 16px;
  --text-lg: 21.3px;
  --text-xl: 28.4px;
  --text-2xl: 37.9px;
  --text-3xl: 50.5px;
  --text-4xl: 67.3px;
  --text-display: clamp(51px, 10.4vw, 133px);
  --text-figure: clamp(42px, 7.5vw, 96px);
  --weight-heading: 690;
  --weight-body: 400;
  --leading-body: 1.67;
  --leading-heading: 1.21;
  --tracking-heading: -0.001em;
  --radius-sm: 10px;
  --radius-md: 11px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --shadow-1: 0 0 0 1px rgba(203, 232, 23, 0.35);
  --shadow-2: 0 0 28px rgba(203, 232, 23, 0.35);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --container: 1120px;
  --measure: 72ch;
  --gutter: 32px;
  --section-y: 90px;
  --section-y-lg: 126px;
}

/* ============================================================
   reset / 基础
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 128px;
}

body {
  margin: 0;
  min-height: 100vh;
  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.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 420px at 12% -6%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
    radial-gradient(620px 380px at 92% 4%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 72%);
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
hr { border: 0; margin: 0; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--color-highlight); color: var(--color-accent); }

:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.pg-skip {
  position: absolute;
  left: var(--space-2);
  top: -80px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: var(--shadow-2);
  transition: top 160ms ease;
}
.pg-skip:focus { top: var(--space-2); text-decoration: none; }

/* ============================================================
   排版工具
   ============================================================ */
.pg-display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.pg-figure-num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.pg-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pg-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}

.pg-lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

.pg-body { max-width: var(--measure); }
.pg-body p + p { margin-top: var(--space-2); }

.pg-note {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.pg-title-xl { font-size: var(--text-2xl); }
.pg-title-lg { font-size: var(--text-xl); }
.pg-title-md { font-size: var(--text-lg); }

.pg-em {
  font-style: normal;
  color: var(--color-ink);
  font-weight: var(--weight-heading);
}

/* ============================================================
   容器与节奏
   ============================================================ */
.pg-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, var(--gutter));
}

.pg-section { position: relative; padding-block: var(--section-y); }
.pg-section--lg { padding-block: var(--section-y-lg); }
.pg-section--sm { padding-block: var(--space-6); }
.pg-section--flush-top { padding-block-start: 0; }

.pg-hairline {
  display: block;
  height: var(--border-thin);
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--color-line) 10%, var(--color-line) 90%, transparent 100%);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 0 14px -6px var(--color-primary);
}
.pg-hairline--offset { width: 68%; margin-inline-start: 11%; }
.pg-hairline--short { width: 42%; }

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

.pg-offset-right { margin-inline-start: auto; }
.pg-narrow { max-width: 760px; }
.pg-wide { max-width: 1280px; }

/* ============================================================
   面板 / 标签
   ============================================================ */
.pg-panel {
  position: relative;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 16%, transparent),
    0 18px 34px -28px color-mix(in srgb, var(--color-primary) 85%, transparent);
}
.pg-panel--flat { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-line) 80%, transparent); }
.pg-panel--accent {
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 26%, transparent),
    0 22px 40px -30px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
.pg-panel--soft { background: var(--color-primary-soft); }
.pg-panel--deep { background: var(--color-surface-deep); }

.pg-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.pg-panel__title { font-size: var(--text-lg); }
.pg-panel__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.06em; }
.pg-panel__body { color: var(--color-ink-soft); }

.pg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-primary) 45%, var(--color-line));
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pg-tag--accent {
  border-color: color-mix(in srgb, var(--color-accent) 62%, var(--color-line));
  background: color-mix(in srgb, var(--color-highlight) 70%, transparent);
  color: var(--color-accent);
}

.pg-index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
}

/* ============================================================
   反相区块 / 表格
   ============================================================ */
.pg-contrast {
  border: var(--border-thin) solid var(--color-contrast-line);
  border-radius: var(--radius-lg);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}
.pg-contrast .pg-panel__head,
.pg-contrast .pg-panel__body,
.pg-contrast .pg-note,
.pg-contrast .pg-mono,
.pg-contrast .pg-index { color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent); }
.pg-contrast .pg-panel__head { border-bottom-color: var(--color-contrast-line); }
.pg-contrast .pg-figure-num,
.pg-contrast .pg-num { color: var(--color-contrast-accent); }
.pg-contrast a { color: var(--color-contrast-accent); }
.pg-contrast .pg-tag {
  border-color: var(--color-contrast-line);
  background: color-mix(in srgb, var(--color-contrast-accent) 12%, transparent);
  color: var(--color-contrast-accent);
}

.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.pg-table caption {
  text-align: left;
  padding-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
}
.pg-table th,
.pg-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-thin) solid var(--color-line);
}
.pg-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  background: var(--color-surface-alt);
}
.pg-table tbody tr:last-child th,
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-contrast .pg-table th,
.pg-contrast .pg-table td { border-bottom-color: var(--color-contrast-line); }
.pg-contrast .pg-table th { background: transparent; color: var(--color-contrast-ink); }

/* ============================================================
   按钮 / 面包屑
   ============================================================ */
.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 12px 20px;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.pg-btn:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-ink); }
.pg-btn--primary {
  background: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-accent));
  color: var(--color-primary-ink);
  box-shadow: var(--shadow-1);
}
.pg-btn--primary:hover { color: var(--color-primary-ink); background: color-mix(in srgb, var(--color-primary) 88%, var(--color-accent)); }
.pg-btn--accent {
  background: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-ink));
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-2);
}
.pg-btn--accent:hover { color: var(--color-accent-ink); background: color-mix(in srgb, var(--color-accent) 86%, var(--color-focus)); }
.pg-btn--ghost { background: transparent; }
.pg-btn--ghost:hover { background: var(--color-primary-soft); }

.pg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.pg-crumbs a { color: var(--color-ink-soft); }
.pg-crumbs a:hover { color: var(--color-ink); }
.pg-crumbs [aria-current="page"] { color: var(--color-ink); }
.pg-crumbs__sep { color: color-mix(in srgb, var(--color-line) 90%, transparent); }

/* ============================================================
   折叠面板
   ============================================================ */
.pg-fold {
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
  overflow: hidden;
}
.pg-fold + .pg-fold { margin-top: var(--space-1); }
.pg-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 14px var(--space-2);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  list-style: none;
}
.pg-fold summary::-webkit-details-marker { display: none; }
.pg-fold summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-accent);
}
.pg-fold[open] summary::after { content: "–"; }
.pg-fold[open] summary { border-bottom: var(--border-thin) solid var(--color-line); }
.pg-fold summary:hover { background: var(--color-primary-soft); }
.pg-fold__body {
  padding: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* ============================================================
   图片容器（页面阶段放置占位）
   ============================================================ */
.pg-figure {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.pg-figure--wide { aspect-ratio: 21 / 9; }
.pg-figure--band { aspect-ratio: 32 / 9; }
.pg-figure--tall { aspect-ratio: 3 / 4; }
.pg-figure--square { aspect-ratio: 1 / 1; }
.pg-figure--auto { aspect-ratio: auto; }

.pg-figure__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}
.pg-figure--auto .pg-figure__media { height: auto; }

.pg-figure__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  pointer-events: none;
}

.pg-figure__label {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  color: var(--color-contrast-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.pg-figure__cap {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.06em;
}

.pg-figure__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: var(--border-thin) dashed color-mix(in srgb, var(--color-line) 88%, transparent);
  border-radius: inherit;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--color-surface-deep) 40%, transparent) 12px 13px),
    var(--color-surface-alt);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}

/* ============================================================
   章节目录 / 显现 / 返回顶部
   ============================================================ */
.pg-toc {
  display: grid;
  gap: 2px;
  border-left: var(--border-thin) solid var(--color-line);
  padding-left: var(--space-2);
}
.pg-toc__link {
  display: block;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
}
.pg-toc__link:hover { color: var(--color-ink); background: var(--color-primary-soft); text-decoration: none; }
.pg-toc__link.is-active,
.pg-toc__link[aria-current="true"] {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-highlight) 60%, transparent);
  box-shadow: inset var(--border-thick) 0 0 0 var(--color-accent);
}

.pg-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms ease, transform 480ms ease;
}
.pg-reveal.is-in { opacity: 1; transform: none; }

.pg-totop {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 48%, var(--color-line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface-alt) 92%, transparent);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: var(--shadow-1);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease, border-color 200ms ease;
}
.pg-totop:hover { border-color: var(--color-focus); }
.pg-totop[data-show] { opacity: 1; visibility: visible; transform: none; }

/* ============================================================
   头部
   ============================================================ */
.pg-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--color-surface) 94%, #000);
  border-bottom: var(--border-thin) solid var(--color-line);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent),
    0 20px 40px -34px color-mix(in srgb, #000 90%, transparent);
  backdrop-filter: blur(8px);
}

.pg-header__top { border-bottom: var(--border-thin) solid var(--color-line); }
.pg-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 66px;
  padding-block: var(--space-1);
}

.pg-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  min-width: 0;
}
.pg-brand:hover { text-decoration: none; }

.pg-brand__mark {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(142deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 40%, var(--color-accent)) 100%);
  box-shadow: var(--shadow-1), 0 0 22px -8px var(--color-primary);
}
.pg-brand__mark::after {
  content: "";
  position: absolute;
  inset: 8px 8px 8px auto;
  width: 3px;
  border-radius: 2px;
  background: var(--color-accent-ink);
  opacity: 0.75;
}

.pg-brand__text { display: flex; flex-direction: column; min-width: 0; }
.pg-brand__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.pg-brand__sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pg-header__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.pg-dot {
  flex: none;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
  animation: pg-breathe 2.8s ease-in-out infinite;
}

@keyframes pg-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.78); }
}

.pg-header__stamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.pg-header__search {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-primary) 45%, var(--color-line));
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.pg-header__search:hover {
  text-decoration: none;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pg-header__bottom { position: relative; }

.pg-header__bottom-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
}

.pg-nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: 8px 12px;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
}
.pg-nav__bars { display: flex; flex-direction: column; gap: 3px; width: 16px; }
.pg-nav__bars i {
  display: block;
  height: var(--border-thick);
  border-radius: 2px;
  background: var(--color-accent);
}
.pg-nav__bars i:nth-child(2) { width: 72%; }
.pg-nav__toggle[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }

.pg-nav { flex: 1 1 auto; min-width: 0; }
.pg-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
}
.pg-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 15px 15px 13px;
  border-bottom: var(--border-thick) solid transparent;
  color: var(--color-ink-soft);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.pg-nav__link:hover {
  text-decoration: none;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-primary-soft) 70%, transparent);
}
.pg-nav__link[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
  box-shadow: 0 0 20px -8px var(--color-accent);
}

.pg-scrollline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--border-thin) * -1);
  height: var(--border-thick);
  background: color-mix(in srgb, var(--color-line) 70%, transparent);
  pointer-events: none;
}
.pg-scrollline i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--color-focus);
  box-shadow: 0 0 14px var(--color-accent);
}

/* ============================================================
   页脚
   ============================================================ */
.pg-footer {
  position: relative;
  z-index: 1;
  margin-top: var(--section-y);
  padding-block: var(--space-8) var(--space-4);
  background: var(--color-surface);
  border-top: var(--border-thin) solid var(--color-line);
  box-shadow:
    0 -1px 0 0 color-mix(in srgb, var(--color-primary) 34%, transparent),
    0 -26px 48px -42px var(--color-accent);
  font-size: var(--text-sm);
}

.pg-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: var(--space-6) var(--gutter);
  align-items: start;
}

.pg-footer__col { min-width: 0; }

.pg-footer__brand {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.pg-footer__lede {
  max-width: 46ch;
  color: var(--color-ink-soft);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}

.pg-footer__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.pg-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px var(--space-2);
}
.pg-footer__links a {
  display: inline-block;
  padding: 3px 0;
  border-bottom: var(--border-thin) solid transparent;
  color: var(--color-ink-soft);
  text-decoration: none;
}
.pg-footer__links a:hover {
  text-decoration: none;
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.pg-footer__facts { display: grid; gap: 8px; }
.pg-footer__facts--tight { margin-top: var(--space-2); }
.pg-footer__facts li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
}
.pg-footer__key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}
.pg-footer__val { color: var(--color-ink-soft); word-break: break-word; }

.pg-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}
.pg-footer__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.pg-footer__legal a { color: var(--color-ink-soft); text-decoration: none; }
.pg-footer__legal a:hover { color: var(--color-accent); text-decoration: none; }
.pg-footer__sep { color: color-mix(in srgb, var(--color-line) 90%, transparent); }
.pg-footer__copy { color: var(--color-ink-muted); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  .pg-col-3, .pg-col-4, .pg-col-5 { grid-column: span 6; }
  .pg-col-7, .pg-col-8, .pg-col-9 { grid-column: span 12; }
  .pg-col-start-2, .pg-col-start-4, .pg-col-start-6, .pg-col-start-7 { grid-column-start: auto; }
  .pg-footer__grid { grid-template-columns: 1fr 1fr; }
  .pg-footer__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .pg-header__stamp { display: none; }

  .pg-nav__toggle { display: inline-flex; }

  .pg-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    display: none;
    max-height: min(72vh, 540px);
    overflow-y: auto;
    padding: var(--space-2) clamp(20px, 4vw, var(--gutter)) var(--space-3);
    border-bottom: var(--border-thick) solid var(--color-accent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-alt) 97%, #000);
    box-shadow: 0 26px 44px -30px #000, 0 0 26px -14px var(--color-accent);
  }
  .pg-nav[data-open] { display: block; }

  .pg-nav__list { flex-direction: column; gap: 2px; }
  .pg-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 13px 14px;
    border-bottom: var(--border-thin) solid var(--color-line);
    border-left: var(--border-thick) solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
  }
  .pg-nav__link[aria-current="page"] {
    border-bottom-color: var(--color-line);
    border-left-color: var(--color-accent);
    background: var(--color-primary-soft);
    box-shadow: none;
  }

  .pg-section { padding-block: var(--space-6); }
  .pg-section--lg { padding-block: var(--space-8); }
}

@media (max-width: 740px) {
  .pg-header__meta { gap: var(--space-1); }
  .pg-brand__sub { display: none; }
  .pg-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .pg-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-footer__bottom { flex-direction: column; align-items: flex-start; }
  .pg-col-3, .pg-col-4, .pg-col-5, .pg-col-6 { grid-column: span 12; }
  .pg-grid { gap: var(--space-3); }
  .pg-display { letter-spacing: -0.02em; }
}

@media (max-width: 420px) {
  .pg-footer__links { grid-template-columns: 1fr; }
  .pg-footer__facts li { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   动效降级
   ============================================================ */
@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;
  }
  .pg-reveal { opacity: 1; transform: none; }
  .pg-totop { transform: none; }
}

@media print {
  .pg-header, .pg-footer, .pg-totop, .pg-scrollline { display: none !important; }
  body { background: #fff; color: #000; }
}