/* ==================================================================
   Natural Memory — site.css

   设计系统见项目根目录 DESIGN.md（设计动作的产物，写在动效之前）。
   本文件按 motion-web skill 重建：

   调色    data/visual-bank.json → p-07「Bold Black + Signal Accent」
           纯黑地面 #000000 · 骨白 #fffef4 · 次级 #9a9a92 · 三级 #5c5c56
           信号色 #00ff6a —— 每页只出现一次（原型原文：one per page max）
           渐变全部删除（获奖站 15/15 都不用渐变做背景）

   字体    两个家族（获奖站中位数 2）：
           Archivo Variable（wght 100–900 · wdth 62–125%）—— 显示、正文拉丁、全部数字
           Geist Mono —— 标签、代码、字段名
           中文回落系统 CJK，不额外加载 CJK 字体

   字阶    落差就是设计（page-design.md §4）：
           mega 200px / display 104px 对 body 14px = 14× / 7.4×
           中文大字与拉丁大字参数不同（§4 明确点名）：
             拉丁 .dsp--lat  lh .90  ls -.045em  700  stretch 92%
             中文 .dsp        lh 1.28 ls -.005em  500

   版面    全幅页面、逐元素 measure（获奖站 15/15 都没有 body 全局 max-width）
           间距不是常数：tight / normal / wide 三档按语义给
   ================================================================== */

/* ---------- 1. 字体 ---------- */
@font-face {
  font-family: "Archivo Variable"; font-style: normal; font-weight: 100 900;
  font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
}

/* ---------- 2. 令牌 ---------- */
:root {
  /* 颜色 · p-07 —— 三个灰 + 一个信号色，不再有别的色相 */
  --canvas:        #000000;
  --canvas-soft:   #0e0e0e;                     /* 悬停/激活面 */
  --canvas-card:   #000000;                     /* 卡片与地面同色：层次只靠发丝线 */
  --canvas-mid:    #262623;                     /* 轨道底 */
  --hairline:      #1f1f1c;
  --btn-border:    rgba(255, 255, 255, .28);
  --ink:           #fffef4;                     /* 骨白，不是纯白 */
  --ink-hover:     #ffffff;
  --on-primary:    #000000;
  --body:          #9a9a92;
  --mute:          #5c5c56;
  --signal:        #00ff6a;                     /* 每页只用一次：首屏画布里那颗目标记录 */

  /* 圆角：p-07 是硬边原型，圆角压到最小 */
  --r-sm: 2px;
  --r-pill: 9999px;

  /* 间距 —— 4px 基数 */
  --sp-xxs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;

  /* 版式 */
  --font-sans: "Archivo Variable", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* 字阶 —— mega ÷ body = 14×，display ÷ body = 7.4× */
  --fs-mega:       clamp(72px, 12vw, 200px);
  --fs-display:    clamp(44px, 7vw, 104px);
  --fs-display-xl: var(--fs-display);
  --fs-display-lg: clamp(32px, 4.6vw, 64px);
  --fs-display-md: clamp(26px, 3.2vw, 44px);
  --fs-display-sm: 24px;
  --fs-display-xs: 18px;
  --fs-lede:       1.125rem;
  --fs-body:       0.875rem;                    /* 14px */
  --fs-small:      0.875rem;                    /* 连续正文：不为了「看起来精致」压到 13px */
  --fs-label:      0.75rem;                     /* 12px，标签/注释/字段名 */

  --lh-lat:     .90;                            /* 拉丁巨字 */
  --lh-cjk:     1.28;                           /* 中文巨字：行高更大、负字距要收 */
  --ls-lat:     -.045em;
  --ls-cjk:     -.005em;
  --ls-display: var(--ls-cjk);
  --font-stretch-display: 92%;

  /* 版面 */
  --container: 1440px;                          /* 内层栅格上限，不是 body 的 max-width */
  --measure:      62ch;
  --measure-wide: 88ch;
  --nav-h: 66px;

  /* 段落留白 —— 三档，按「两块该不该被读成一组」给 */
  --band-tight: clamp(48px, 6vw, 80px);
  --band:       clamp(80px, 10vw, 152px);
  --band-wide:  clamp(120px, 16vw, 248px);

  /* 动效令牌（motion-tokens.md） */
  --dur-fast:  160ms;
  --dur-std:   300ms;
  --dur-med:   460ms;
  --dur-slow:  700ms;
  --dur-cine:  1200ms;
  --ease-exp:   cubic-bezier(.16, 1, .3, 1);
  --ease-sharp: cubic-bezier(.65, 0, .45, 1);
  --ease-circ:  cubic-bezier(0, .55, .45, 1);
  --ease-in-expo: cubic-bezier(.7, 0, .84, 0);
  --ease:       var(--ease-exp);                /* 兼容旧引用 */
}

/* ---------- 3. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
  font-synthesis-weight: none;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--on-primary); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* 行内代码 */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--ink);
  background: var(--canvas-soft);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}
/* pre 必须显式指定：UA 样式表给的是 font-family: monospace，
   不覆盖的话代码块会掉回浏览器默认等宽字体（此前全站就是这样）。 */
pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.75;
  tab-size: 2;
}
pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.wrap--narrow { max-width: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--sp-lg); top: var(--sp-lg); z-index: 99;
  background: var(--ink); color: var(--on-primary);
  padding: var(--sp-sm) var(--sp-lg);
}

/* ---------- 4. 排版：落差就是设计 ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 500; color: var(--ink); }

/* 中文大字：行高放大、负字距收回，层级靠字重（page-design.md §4） */
.dsp {
  font-size: var(--fs-display); line-height: var(--lh-cjk);
  letter-spacing: var(--ls-cjk); font-weight: 500;
}
/* 拉丁/数字巨字：同一量级但可以收紧 */
.dsp--lat {
  font-size: var(--fs-display); line-height: var(--lh-lat);
  letter-spacing: var(--ls-lat); font-weight: 700;
  font-stretch: var(--font-stretch-display);
  font-variant-numeric: tabular-nums;
}
/* 超巨：只给真正的头号数字。数字是拉丁字形，可以推到 200px 而不变成一块黑体方块 ——
   这正好绕开 page-design §4 说的「中文大字过大就成实心块」的问题，
   所以移动端撑住 display ÷ body 落差的是它，不是中文标题。 */
.mega {
  font-size: clamp(84px, 26vw, 200px); line-height: .86; letter-spacing: -.05em;
  font-weight: 700; font-stretch: 88%; color: var(--ink);
  font-variant-numeric: tabular-nums; display: block;
}
.mega--cjk { font-size: var(--fs-display); line-height: var(--lh-cjk); letter-spacing: var(--ls-cjk); font-weight: 500; font-stretch: 100%; }

.h1 { font-size: var(--fs-display); line-height: var(--lh-cjk); letter-spacing: var(--ls-cjk); }
.h2 { font-size: var(--fs-display-md); line-height: 1.16; letter-spacing: -.012em; }
.h3 { font-size: var(--fs-display-sm); line-height: 1.3; letter-spacing: -.008em; }
.doc__h { font-size: clamp(56px, 10.5vw, 100px); line-height: 1.14; letter-spacing: var(--ls-cjk); }

strong, b { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.lede, .lede2 { font-size: var(--fs-lede); line-height: 1.65; color: var(--body); max-width: var(--measure); }
.small  { font-size: var(--fs-small); line-height: 1.65; color: var(--body); max-width: var(--measure-wide); }
.tiny   { font-size: var(--fs-label); line-height: 1.6; color: var(--mute); max-width: 96ch; }
.mono   { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.4px; }
.src    { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.2px; color: var(--mute); }

/* 签名式眉标：等宽大写 + 正字距 */
.eyebrow, .kicker, .shead__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
  display: block;
}
.arrow { color: var(--mute); padding-inline: 6px; }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.serif-it { color: var(--ink); }

/* 正文区的小节节奏：统一用 48px 上留白，避免各页内联边距不一致 */
#doc h2, #doc h3, #doc h4 { margin-top: var(--sp-3xl); }
#doc > *:first-child, .card h2, .card h3, .card h4,
.panel h2, .panel h3, .panel h4, .ex h3 { margin-top: 0; }
#doc > p + h2, #doc > p + h3 { margin-top: var(--sp-3xl); }
#doc > p { margin: 0 0 var(--sp-lg); }
#doc > p.small, #doc > p.tiny { margin-bottom: var(--sp-md); }

/* ---------- 5. 顶栏（nav-bar: padding 12 24） ---------- */
.site {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
}
.site.is-stuck { border-bottom-color: var(--hairline); }

.topbar {
  display: flex; align-items: center; gap: var(--sp-lg);
  height: var(--nav-h); max-width: var(--container); margin-inline: auto;
  padding-inline: var(--sp-xl);
}
.topbar__spacer { flex: 1 1 auto; }

.brand { display: flex; align-items: center; gap: var(--sp-sm); flex: none; }
.brand__mark { width: 22px; height: 22px; flex: none; }
.brand__mark .dim { fill: var(--canvas-mid); }
.brand__mark .on { fill: var(--ink); }
.brand__name { font-size: 14px; line-height: 20px; color: var(--ink); }

/* 药丸：整个交互形状系统 */
.pill, .chip, .kbd {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  color: var(--ink);
  white-space: nowrap;
}
.pill { height: 28px; padding: 0 var(--sp-md); font-size: 12px; letter-spacing: 1.2px; font-family: var(--font-mono); }
.pill--acc { border-color: var(--ink); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; }

.crumb { display: flex; align-items: baseline; gap: var(--sp-sm); min-width: 0; }
.crumb__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.crumb__t { font-size: 14px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--ink); }

/* ---------- 6. 骨架：侧栏 + 内容（容器 1200px） ---------- */
.shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-4xl);
  max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-xl);
  overflow-x: clip;
}
.side {
  position: sticky; top: var(--nav-h); align-self: start;
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  padding: var(--sp-2xl) 0 var(--sp-3xl);
  border-right: 1px solid var(--hairline);
}
.side__in { padding-right: var(--sp-lg); }
.side, .side__in, .side__list, .side__a { min-width: 0; }

.side__grp {
  margin: var(--sp-xl) 0 var(--sp-sm); padding-left: var(--sp-md);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute);
}
.side__grp:first-child { margin-top: 0; }
.side__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-xxs); }
/* ex-app-shell-row：active 用 primary 作为指示条 */
.side__a {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-sm);
  align-items: baseline; padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-sm); border-left: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
}
.side__a:hover { background: var(--canvas-soft); }
.side__a.is-on { background: var(--canvas-soft); border-left-color: var(--ink); }
.side__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.side__t { font-size: 14px; line-height: 20px; color: var(--body); }
.side__a:hover .side__t { color: var(--ink); }
.side__a.is-on .side__t { color: var(--ink); }
.side__a.is-on .side__n { color: var(--ink); }

/* hero / content band */
.doc { position: relative; min-width: 0; max-width: 100%; padding: var(--band) 0 var(--band-tight); }
/* 页眉：标题左、头号数字右 —— 非对称分栏，不是居中标题块 */
.doc__hd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-xl) clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: var(--band-tight); padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--hairline);
}
.doc__hd > .kicker { grid-column: 1 / -1; }
.doc__h { margin-top: var(--sp-lg); }
.doc__lede {
  margin: var(--sp-xl) 0 0; max-width: var(--measure);
  font-size: var(--fs-lede); line-height: 1.6; color: var(--body);
}
/* 头号数字：文档页自己先把最强的那条数字说出来 */
.doc__figure { margin: 0; text-align: right; display: grid; gap: var(--sp-md); justify-items: end; }
.doc__figure .mega { color: var(--ink); }
.doc__figure .mega small { font-size: .30em; letter-spacing: -.01em; margin-left: .04em; font-weight: 500; }
.doc__figure-n {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.2px;
  color: var(--mute); max-width: 30ch; line-height: 1.8;
}

/* 文档页的章节标题不能停在 24px：页面标题 100px、正文 14px，
   章节标题落在中间会让层级整个塌掉。片段里写的是 class="h3"，这里按上下文提上来。 */
#doc h2 { font-size: var(--fs-display-md); line-height: 1.14; letter-spacing: -.012em; }

@media (max-width: 900px) {
  .doc__hd { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .doc__figure { text-align: left; justify-items: start; margin-top: var(--sp-xl); }
  .doc__figure .mega { font-size: clamp(98px, 26vw, 140px); }
}

/* ---------- 7. 按钮：轮廓胶囊为常态，白色实底仅作极少数例外 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  background: transparent;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 14px; line-height: 20px; font-weight: 400;
  transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
}
.btn:hover { background: var(--canvas-soft); border-color: var(--ink); }
.btn--pri { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
.btn--pri:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-primary); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; }

.chip { height: 28px; padding: 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--body); }
.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.kbd { min-width: 26px; height: 26px; padding: 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--body); }

/* ---------- 8. 卡片：8px 圆角 · #191919 · 发丝线 · 零阴影 ---------- */
.grid { display: grid; gap: var(--sp-lg); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

.card {
  background: var(--canvas-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--sp-xl);
}
.card--flat { background: var(--canvas-card); }
/* 极性翻转：白底近黑字，规范里的 featured/active 处理 */
.card--acc { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
.card--acc .eyebrow, .card--acc .h3, .card--acc strong, .card--acc .small, .card--acc .tiny { color: var(--on-primary); }
.card--warn { background: var(--canvas-card); }

/* ---------- 9. KPI / 数值（mono 计数器，规范里的 metric counter） ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.kpi { background: var(--canvas-card); padding: var(--sp-xl); display: grid; gap: var(--sp-md); align-content: start; }
.kpi__k { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.kpi__v { font-family: var(--font-mono); font-size: 24px; line-height: 32px; color: var(--ink); letter-spacing: -.02em; }
.kpi__v--long { font-size: 20px; line-height: 28px; }
.kpi__v .to { color: var(--ink); }
.kpi__v .mid { color: var(--mute); }
.kpi__d { font-size: 14px; line-height: 20px; color: var(--mute); }

.statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.stat { background: var(--canvas-card); padding: var(--sp-xl); display: grid; gap: var(--sp-sm); align-content: start; }
.stat__k { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.stat__v { font-family: var(--font-mono); font-size: 28px; line-height: 32px; color: var(--ink); letter-spacing: -.02em; }
.stat__v small { font-size: 12px; letter-spacing: 1.2px; color: var(--mute); margin-left: var(--sp-xs); }
.stat--acc .stat__v { color: var(--ink); }
.stat__d { font-size: 14px; line-height: 20px; color: var(--mute); }

.mini { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.mini > div { background: var(--canvas-card); display: flex; justify-content: space-between; gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); }
.mini span { font-size: 14px; line-height: 20px; color: var(--body); }
.mini b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.mini--lg > div { display: block; padding: var(--sp-lg); }
.mini--lg span { font-size: 16px; line-height: 24px; }

/* ---------- 10. 导航卡片 / 作者 ---------- */
.navcard {
  display: grid; gap: var(--sp-sm); align-content: start;
  background: var(--canvas-card); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--sp-xl);
  transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
}
.navcard:hover { background: var(--canvas-soft); border-color: var(--btn-border); }
.navcard__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.navcard__t { font-size: 20px; line-height: 28px; color: var(--ink); letter-spacing: -.01em; }
.navcard__d { font-size: 14px; line-height: 20px; color: var(--mute); }
.navcard--acc { border-color: var(--btn-border); }

.authorcard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xl); }
.authorcard__k { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.authorcard__a { font-size: 16px; line-height: 24px; color: var(--ink); border-bottom: 1px solid var(--btn-border); }
.authorcard__a:hover { border-bottom-color: var(--ink); }
.authorcard__v { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--body); }

.author { display: grid; gap: var(--sp-sm); }
.author__a { display: inline-flex; align-items: baseline; gap: var(--sp-sm); }
.author__k { font-size: 14px; line-height: 20px; color: var(--mute); white-space: nowrap; }
.author__v { font-family: var(--font-mono); font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--btn-border); }
.author__a:hover .author__v { border-bottom-color: var(--ink); }

/* ---------- 11. 表格（ex-data-table-cell：表头 mono 大写、内容 body-sm） ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--canvas-card); }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th {
  text-align: left; background: var(--canvas-soft);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute);
  padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.dtable td { padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--hairline); color: var(--body); font-size: 14px; line-height: 20px; vertical-align: baseline; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tr:hover td { background: var(--canvas-soft); }
.dtable td.n { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.dtable td.acc { color: var(--ink); }
.dtable td.bad { color: var(--mute); }

.gt { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.gt__h, .gt__r { display: grid; gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); background: var(--canvas-card); align-items: baseline; }
.gt__h { background: var(--canvas-soft); }
.gt__h span { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.gt--4 .gt__h, .gt--4 .gt__r { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .75fr) minmax(0, 1.5fr); }
.gt--3 .gt__h, .gt--3 .gt__r { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.95fr); }
.gt__r:hover { background: var(--canvas-soft); }
.gt__k { font-size: 16px; line-height: 24px; color: var(--ink); }
.gt__v { font-size: 14px; line-height: 20px; color: var(--body); }
.gt__who { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.gt__who--acc { color: var(--ink); }
.gt__why { font-size: 14px; line-height: 22px; color: var(--mute); }
.scrollx { overflow-x: auto; border-radius: var(--r-sm); }
.scrollx > .gt { min-width: 720px; }

/* ---------- 12. 键值 / 容量 ---------- */
.kv { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.kv__r { background: var(--canvas-card); display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); }
.kv__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.kv__v { font-family: var(--font-mono); font-size: 14px; color: var(--body); word-break: break-all; }

.cap { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.cap__r { background: var(--canvas-card); display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
.cap__k { font-size: 16px; line-height: 24px; color: var(--body); }
.cap__k small { display: block; color: var(--mute); font-size: 14px; line-height: 20px; }
.cap__v { font-family: var(--font-mono); font-size: 16px; text-align: right; color: var(--ink); }
.cap__r--hi .cap__v { color: var(--ink); }

.pagemap { display: grid; grid-template-columns: repeat(64, 1fr); gap: 2px; }
.pagemap i { aspect-ratio: 1; background: var(--canvas-mid); border-radius: 1px; }
.pagemap i.on { background: var(--ink); }

/* ---------- 13. 账本 / 显存 ---------- */
.ledger { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.ledger__h, .ledger__r { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, .9fr); gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
.ledger__h { background: var(--canvas-soft); }
.ledger__h span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.ledger__r { background: var(--canvas-card); }
.ledger__r:hover { background: var(--canvas-soft); }
.ledger__k { font-size: 16px; line-height: 24px; color: var(--body); }
.ledger__b, .ledger__n { font-family: var(--font-mono); font-size: 14px; color: var(--mute); }
.ledger__n { color: var(--ink); }
.ledger__d { font-family: var(--font-mono); font-size: 14px; text-align: right; color: var(--ink); }
.ledger__d.t-ok, .ledger__d.t-warn, .ledger__d.t-bad, .ledger__d.t-mute { color: var(--body); }
.ledger__d.t-bad, .ledger__d.t-mute { color: var(--mute); }

.vram { display: grid; gap: var(--sp-lg); }
.vram__row { display: grid; gap: var(--sp-sm); }
.vram__top { display: flex; justify-content: space-between; gap: var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.vram__top b { color: var(--ink); }
.vram__track { position: relative; height: 20px; background: var(--canvas-mid); border-radius: var(--r-pill); overflow: hidden; }
.vram__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill); transition: width 700ms cubic-bezier(.16,1,.3,1); }
.vram__fill--base { background: repeating-linear-gradient(115deg, var(--mute) 0 3px, transparent 3px 7px); }
.vram__fill--nm2 { background: var(--ink); }
.vram__mark { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--btn-border); }
.vram__card { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }

/* ---------- 14. 条形对比（单色明度阶梯，不用彩色编码） ---------- */
.bars { display: grid; gap: var(--sp-xl); }
.barset { display: grid; gap: var(--sp-sm); }
.barset__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); }
.barset__t { font-size: 16px; line-height: 24px; color: var(--ink); }
.barset__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }

.bar { display: grid; grid-template-columns: 108px minmax(0, 1fr) 108px; gap: var(--sp-md); align-items: center; }
.bar__l { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.bar__track { position: relative; height: 6px; background: var(--canvas-mid); border-radius: var(--r-pill); overflow: hidden; }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill); transition: width 700ms cubic-bezier(.16,1,.3,1); }
.bar--base .bar__fill { background: repeating-linear-gradient(115deg, var(--mute) 0 3px, transparent 3px 7px); }
.bar--a .bar__fill { background: var(--mute); }
.bar--rag .bar__fill { background: var(--mute); }
.bar--nm2 .bar__fill { background: var(--ink); }
.bar__v { font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: right; }
.bar__v small { color: var(--mute); display: block; font-size: 12px; letter-spacing: 1.2px; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-lg); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.legend i { width: 14px; height: 6px; border-radius: var(--r-pill); display: block; }
.legend i.l-base { background: repeating-linear-gradient(115deg, var(--mute) 0 3px, transparent 3px 7px); }
.legend i.l-a { background: var(--mute); }
.legend i.l-rag { background: var(--mute); }
.legend i.l-nm2 { background: var(--ink); }

.gap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.gap__c { background: var(--canvas-card); padding: var(--sp-xl); display: grid; gap: var(--sp-sm); }
.gap__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.gap__v { font-family: var(--font-mono); font-size: clamp(28px, 4vw, 40px); line-height: 1; letter-spacing: -.02em; }
.gap__c--recall .gap__v { color: var(--body); }
.gap__c--answer .gap__v { color: var(--ink); }
.gap__n { font-size: 14px; line-height: 20px; color: var(--mute); }

/* ---------- 15. 标签页（药丸） ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-sm); max-width: 100%; }
.tab {
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid var(--btn-border); border-radius: var(--r-pill);
  color: var(--body); font-size: 14px; line-height: 20px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-exp), color var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
}
.tab:hover { background: var(--canvas-soft); color: var(--ink); }
.tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
.panel { display: none; }
.panel.is-on { display: block; }

/* ---------- 16. 机制：步进器 / 流程图 / 记录 ---------- */
.flow { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--sp-2xl); align-items: start; }
.steps { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.step {
  background: var(--canvas-card); text-align: left; width: 100%;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg); align-items: center;
  transition: background var(--dur-fast) var(--ease-exp);
}
.step:hover { background: var(--canvas-soft); }
.step__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.step__l { font-size: 14px; line-height: 20px; color: var(--body); }
.step.is-on { background: var(--canvas-soft); }
.step.is-on .step__l { color: var(--ink); }
.step.is-on .step__i { color: var(--ink); }
.step.is-past .step__l { color: var(--mute); }

.flow__detail { position: sticky; top: calc(var(--nav-h) + var(--sp-lg)); }
.flow__stage { margin: 0 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.flow__title { margin: 0 0 var(--sp-md); font-size: 24px; line-height: 32px; letter-spacing: -.02em; }
.flow__body { margin: 0; color: var(--body); font-size: 14px; line-height: 22px; min-height: 88px; }
.flow__io { margin: var(--sp-lg) 0 0; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--mute); }
.flow__meta { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); display: grid; gap: var(--sp-sm); }
.flow__meta div { display: flex; justify-content: space-between; gap: var(--sp-lg); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.flow__meta b { color: var(--ink); font-weight: 400; }

.dgm { width: 100%; height: auto; display: block; overflow: visible; }
.dgm__box { fill: var(--canvas-card); stroke: var(--hairline); }
.dgm__box--acc { stroke: var(--btn-border); }
.dgm__n { font-family: var(--font-mono); font-size: 9px; fill: var(--mute); letter-spacing: 1px; }
.dgm__l { font-size: 12px; fill: var(--ink); }
.dgm__s { font-family: var(--font-mono); font-size: 9px; fill: var(--mute); }
.dgm__a { stroke: var(--btn-border); stroke-width: 1; fill: none; }
.dgm__rule { stroke: var(--hairline); stroke-width: 1; }
.dgm__note { font-family: var(--font-mono); font-size: 9.5px; fill: var(--mute); letter-spacing: .6px; }
.dgm__note:first-of-type { fill: var(--ink); }

.rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.rec__f { background: var(--canvas-card); padding: var(--sp-md) var(--sp-lg); display: grid; gap: var(--sp-xxs); }
.rec__f:hover { background: var(--canvas-soft); }
.rec__k { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.rec__d { font-size: 12px; line-height: 16px; color: var(--mute); }

.recjson { display: grid; gap: 1px; }
.recjson__r { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-sm) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.recjson__r:last-child { border-bottom: 0; }
.recjson__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.recjson__v { font-size: 14px; line-height: 20px; color: var(--ink); word-break: break-word; overflow-wrap: anywhere; }

.states { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.state { background: var(--canvas-card); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
.state__s { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.state--mute .state__s, .state--bad .state__s { color: var(--mute); }
.state--warn .state__s { color: var(--body); }
.state__d { font-size: 14px; line-height: 20px; color: var(--body); }

/* ---------- 17. 提示块 / 声明 / 局限 ---------- */
.callout {
  background: var(--canvas-card);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-sm);
  padding: var(--sp-xl);
}
.callout--warn { border-color: var(--hairline); }
.callout__t { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 14px; line-height: 20px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); }
.callout__b { margin: 0; font-size: 16px; line-height: 26px; color: var(--body); max-width: 78ch; }

.claims { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.claim { background: var(--canvas-card); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); align-items: center; }
.claim:hover { background: var(--canvas-soft); }
.claim__x { font-family: var(--font-mono); font-size: 14px; color: var(--mute); }
.claim__t { font-size: 16px; line-height: 24px; color: var(--mute); text-decoration: line-through; text-decoration-color: var(--canvas-mid); }
.claim__s { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.claims--loose .claim__s { display: none; }

.lims { display: grid; gap: var(--sp-xl); }
.lim { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-md); }
.lim__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); padding-top: 3px; }
.lim__t { font-size: 20px; line-height: 28px; margin-bottom: var(--sp-sm); }
.lim__d { margin: 0; font-size: 14px; line-height: 22px; color: var(--mute); max-width: 76ch; }

.quote { border-left: 1px solid var(--btn-border); padding: var(--sp-xs) 0 var(--sp-xs) var(--sp-xl); margin: 0; }
.quote q { font-size: 24px; line-height: 34px; letter-spacing: -.02em; color: var(--ink); display: block; }
.quote cite { display: block; margin-top: var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); font-style: normal; }

.checks { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.check { background: var(--canvas-card); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
.check__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.check__t { font-size: 14px; line-height: 20px; color: var(--body); }

.road { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.road__r { background: var(--canvas-card); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
.road__r:hover { background: var(--canvas-soft); }
.road__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.road__t { font-size: 14px; line-height: 20px; color: var(--body); }

/* ---------- 18. 复现：代码块（规范：Canvas Mid 用作代码底） ---------- */
.code { background: var(--canvas-mid); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); }
.code__t { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.copy {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px;
  padding: var(--sp-xs) var(--sp-md);
  background: transparent; border: 1px solid var(--btn-border); border-radius: var(--r-pill);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-exp);
}
.copy:hover { background: var(--canvas-card); }
.copy.is-done { border-color: var(--ink); }
.code pre { margin: 0; padding: var(--sp-xl); overflow-x: auto; }
.code code { font-family: var(--font-mono); font-size: 14px; line-height: 24px; color: var(--ink); white-space: pre; background: none; padding: 0; }
.code code .k { color: var(--ink); }
.code code .c { color: var(--mute); }

/* ---------- 19. 实测样例 ---------- */
.examples { display: grid; gap: var(--sp-xl); }
.ex { background: var(--canvas-card); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.ex__hd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-xl); border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); }
.ex__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--ink); }
.ex__q { margin: 0; padding: var(--sp-xl) var(--sp-xl) var(--sp-md); font-size: 24px; line-height: 32px; letter-spacing: -.02em; color: var(--ink); }
.ex__exp { margin: 0; padding: 0 var(--sp-xl) var(--sp-xl); font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--mute); word-break: break-word; }
.ex__exp span { color: var(--mute); margin-right: var(--sp-sm); }
.ex__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.ex__col { padding: var(--sp-xl); min-width: 0; }
.ex__col + .ex__col { border-left: 1px solid var(--hairline); }
.ex__col--nm { background: rgba(255, 255, 255, .015); }
.ex__lab { margin: 0 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.ex__col--nm .ex__lab { color: var(--ink); }
.ex__ans { margin: 0 0 var(--sp-md); font-size: 14px; line-height: 22px; color: var(--body); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ex__meta { margin: 0; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: 1.2px; color: var(--mute); }
.v--ok { color: var(--ink); }
.v--no { color: var(--mute); }
.ex__ev { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.ex__evt { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.ex__evr { display: grid; gap: var(--sp-xs); padding: var(--sp-sm) 0; border-bottom: 1px solid var(--hairline); }
.ex__evr:last-child { border-bottom: 0; padding-bottom: 0; }
.ex__evk { font-family: var(--font-mono); font-size: 14px; color: var(--ink); word-break: break-word; }
.ex__evv { font-size: 14px; line-height: 20px; color: var(--body); word-break: break-word; }
.ex__evs { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); word-break: break-all; }

/* ---------- 20. 上一节 / 下一节 ---------- */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); margin-top: var(--sp-4xl); padding-top: var(--sp-xl); border-top: 1px solid var(--hairline); }
.pn__a {
  display: grid; gap: var(--sp-sm); padding: var(--sp-lg) var(--sp-xl); position: relative;
  background: var(--canvas-card); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
}
.pn__a:hover { background: var(--canvas-soft); border-color: var(--btn-border); }
.pn__a--next { text-align: right; }
.pn__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.pn__t { font-size: 20px; line-height: 28px; color: var(--ink); }
.pn__a .kbd { position: absolute; top: var(--sp-lg); right: var(--sp-lg); }
.pn__a--prev .kbd { right: auto; left: var(--sp-lg); }
.pn__x { display: block; }

/* ---------- 21. 页脚（footer band: padding 48 24） ---------- */
.footer { border-top: 1px solid var(--hairline); padding: var(--sp-3xl) 0; }
.footer__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1.15fr); gap: var(--sp-3xl); align-items: start; }
.footer__col--wide { min-width: 0; }
.footer__h { margin: 0 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.footer__note { margin: 0; font-size: 14px; line-height: 22px; color: var(--body); max-width: 64ch; }
.footer__meta { margin: var(--sp-lg) 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
.readout { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.readout > span {
  display: inline-flex; align-items: center; padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute);
}

/* ---------- 22. JS 渲染内容的淡入（只淡入，不位移 —— B2 的底线） ---------- */
.reveal { opacity: 0; transition: opacity var(--dur-std) var(--ease-exp); }
.reveal.is-in { opacity: 1; }

/* 分带标题：眉标 + 标题的间距走令牌，不再用行内 style */
.band__k { margin: 0 0 var(--sp-lg); }
.band__k + .h2, .band__k + .h3 { margin-bottom: var(--sp-2xl); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .bar__fill, .vram__fill { transition: none; }
  /* B8：关掉动效时直接呈现终态，不允许有任何内容因为「还没入场」而消失 */
  .js .arr-wipe { clip-path: none !important; }
  .js .arr-num, .js .arr-cards > *, .js .teaser .dgm > g:not(.dgm__a) {
    opacity: 1 !important; transform: none !important;
  }
  .js .teaser .dgm__a path { stroke-dashoffset: 0 !important; }
  .rst__b { opacity: 1 !important; }
  .pal__box { animation: none; }
  .hero__cue { animation: none; opacity: .6; }
  #doc h2.is-flash, #doc h3.is-flash { animation: none; box-shadow: inset 3px 0 0 var(--ink); }
  /* 交叉淡入淡出全部关掉后，页面仍然是完整的一帧 */
}

/* ---------- 23. 响应式（<768：hero 96→48，网格 1 列） ---------- */
@media (min-width: 1120px) {
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  /* 顶栏在窄屏必须能收：给导航一个可横向滚动的弹性列，
     否则 7 个胶囊 + 检索按钮 + 状态胶囊会把整行撑出视口。 */
  .topbar { gap: var(--sp-sm); }
  .topbar__spacer { display: none; }
  .topnav {
    flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .brand__name { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side {
    position: static; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--hairline);
    padding: var(--sp-lg) 0;
  }
  .side__in { display: flex; gap: var(--sp-sm); overflow-x: auto; padding-right: 0; scrollbar-width: none; }
  .side__in::-webkit-scrollbar { display: none; }
  .side__grp { display: none; }
  .side__list { display: flex; gap: var(--sp-sm); }
  .side__a { grid-template-columns: auto auto; white-space: nowrap; padding: var(--sp-sm) var(--sp-md); border-left: 0; border: 1px solid var(--hairline); border-radius: var(--r-pill); }
  .side__a.is-on { border-color: var(--ink); }
  .g-2-1 { grid-template-columns: minmax(0, 1fr); }
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .authorcard { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr; }
  .crumb { display: none; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__detail { position: static; }
}
@media (max-width: 768px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 84px minmax(0, 1fr) 84px; gap: var(--sp-sm); }
  .ledger__h { display: none; }
  .ledger__r { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-xs) var(--sp-md); }
  .ledger__b { grid-column: 1 / -1; }
  .ledger__d { text-align: left; }
  .cap__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
  .cap__v { text-align: left; }
  .state { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
  .gap { grid-template-columns: 1fr; }
  .ex__grid { grid-template-columns: 1fr; }
  .ex__col + .ex__col { border-left: 0; border-top: 1px solid var(--hairline); }
  .pn { grid-template-columns: 1fr; }
  .pn__a--next { text-align: left; }
  .recjson__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xxs); }
  .tabs { width: 100%; }
  .tab { flex: 1 1 auto; text-align: center; }
  .doc { padding-top: var(--sp-3xl); }
  .scrollx > .gt { min-width: 0; }
  .gt--4 .gt__h, .gt--3 .gt__h { display: none; }
  .gt--4 .gt__r, .gt--3 .gt__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); padding: var(--sp-lg) var(--sp-md); }
  .tbl-wrap, .scrollx {
    background-image: linear-gradient(to left, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40px);
    background-repeat: no-repeat; background-position: right center; background-size: 40px 100%;
  }
  :root { --band-tight: 40px; --band: 64px; --band-wide: 88px; }
}

/* ==================================================================
   24. 发布页版式（layout: release）
   按研究/模型发布页的通行骨架：发布头 → teaser → 关键数字 → 摘要 →
   发布清单 → 结果预览 → 深入阅读 → 边界 → 引用。
   规范约束：页面表面只用 canvas，band 之间用 divider-hairline 分隔，
   不引入第二种页面底色。
   ================================================================== */
.release { min-width: 0; }

/* 段落留白不是常数（page-design.md §6）：三档按语义给，
   紧的地方两块属于一组，宽的地方是留给观众的呼吸。 */
.band { padding: var(--band) 0; }
.band + .band { border-top: 1px solid var(--hairline); }
.band--hero { padding-top: var(--band-tight); padding-bottom: var(--band-wide); }
.band--tight { padding: var(--band-tight) 0; }
.band--wide { padding: var(--band-wide) 0; }
.band--teaser { padding: var(--band-tight) 0 var(--band); }
.band--stats { padding: var(--band) 0; }
.band--alt { /* 命名钩子：p-07 只有一种地面，不分带换底 */ }

.wrap--narrow { max-width: 820px; }

/* 顶栏快速导航（胶囊行） */
.topnav { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.topnav__a {
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid transparent; border-radius: var(--r-pill);
  color: var(--mute); font-size: 13px; line-height: 20px;
  transition: color var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
}
.topnav__a:hover { color: var(--ink); border-color: var(--hairline); }
.topnav__a.is-on { border-color: var(--btn-border); color: var(--ink); }

/* 侧栏返回发布页 */
.side__back {
  display: inline-flex; align-items: center;
  margin: 0 0 var(--sp-xl) var(--sp-md);
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--btn-border); border-radius: var(--r-pill);
  font-size: 12px; line-height: 20px; letter-spacing: 1.2px; font-family: var(--font-mono);
  color: var(--body);
  transition: background var(--dur-fast) var(--ease-exp), color var(--dur-fast) var(--ease-exp);
}
.side__back:hover { background: var(--canvas-soft); color: var(--ink); }

/* 发布头 */
.release__badge { margin-bottom: var(--sp-xl); color: var(--mute); }
.release__h1 { margin: 0 0 var(--sp-xl); max-width: 20ch; }
.release__byline {
  margin: 0 0 var(--sp-xl);
  font-size: 14px; line-height: 20px; color: var(--body);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-sm);
}
.release__byline a { color: var(--ink); border-bottom: 1px solid var(--btn-border); }
.release__byline a:hover { border-bottom-color: var(--ink); }
.release__by { color: var(--mute); }
.release__sep { color: var(--canvas-mid); }
.release__lede { max-width: 68ch; margin: 0 0 var(--sp-2xl); }

.linkrow { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; }

/* Teaser 全宽图 */
.teaser {
  margin: 0;
  background: var(--canvas-card);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--sp-xl);
}
.teaser .dgm { width: 100%; height: auto; }
.teaser__cap {
  margin-top: var(--sp-lg); padding-top: var(--sp-md);
  border-top: 1px solid var(--hairline);
  font-size: 14px; line-height: 22px; color: var(--mute); max-width: 92ch;
}
.teaser__k {
  display: inline-block; margin-right: var(--sp-sm);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink);
}

/* 发布清单 */
.rel__k { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.rel__v { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 28px; line-height: 32px; letter-spacing: -.02em; color: var(--ink); }
.rel__v small { font-size: 12px; letter-spacing: 1.2px; color: var(--mute); margin-left: var(--sp-xs); }
.rel__d { margin: 0; font-size: 14px; line-height: 22px; color: var(--mute); }

/* 正文内链接 */
.linku { color: var(--ink); border-bottom: 1px solid var(--btn-border); }
.linku:hover { border-bottom-color: var(--ink); }

/* ==================================================================
   24. 抵达编排 —— 三种不同的抵达方式，不是全页统一 fade-up

   design-slop B2：所有区块都 `opacity 0→1, translateY 20px` 会让页面变成
   一串相同的到达，读者到第三节就学会了无视它。所以这里只保留三处入场，
   而且**三处的手势互不相同**（擦除 / 数字冲入 / 侧向错峰），
   其余内容一律「本来就在那儿」。

   初始隐藏态全部写在 .js 下：脚本挂了内容不会被藏起来。
   ================================================================== */

/* 1 · 编辑式擦除：给「一句结论」用（choreography-arc 的 editorial 弧） */
.js .arr-wipe {
  clip-path: inset(0 0 106% 0);
  transition: clip-path var(--dur-slow) cubic-bezier(.77, 0, .18, 1);
}
.arr-wipe.is-in { clip-path: inset(0 0 -2% 0); }

/* 2 · 数字冲入：只给头号数字，带一点点压缩再回弹 */
.js .arr-num {
  opacity: 0; transform: translateY(16px) scale(.982);
  transform-origin: 0 70%;
  transition: opacity var(--dur-slow) var(--ease-exp), transform var(--dur-slow) var(--ease-sharp);
}
.arr-num.is-in { opacity: 1; transform: none; }

/* 3 · 侧向错峰：只给一处列表，手势是从装订线推出来，不是往上浮 */
.js .arr-cards > * {
  opacity: 0; transform: translateX(-12px);
  transition: opacity var(--dur-med) var(--ease-circ), transform var(--dur-med) var(--ease-circ);
}
.js .arr-cards.is-in > * { opacity: 1; transform: none; }
.js .arr-cards.is-in > *:nth-child(1) { transition-delay: 0ms; }
.js .arr-cards.is-in > *:nth-child(2) { transition-delay: 60ms; }
.js .arr-cards.is-in > *:nth-child(3) { transition-delay: 120ms; }
.js .arr-cards.is-in > *:nth-child(4) { transition-delay: 180ms; }
.js .arr-cards.is-in > *:nth-child(5) { transition-delay: 240ms; }
.js .arr-cards.is-in > *:nth-child(6) { transition-delay: 300ms; }

/* 读取路径图：连接线自左向右绘出，环节随后依次点亮 —— 这一处是内容自己的
   语法（一条路径本来就是按顺序被走完的），所以保留，且它的手势与上面三种都不同 */
.js .teaser .dgm__a path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-exp);
}
.js .teaser.is-in .dgm__a path { stroke-dashoffset: 0; }
.js .teaser.is-in .dgm__a path:nth-child(1) { transition-delay: 60ms; }
.js .teaser.is-in .dgm__a path:nth-child(2) { transition-delay: 130ms; }
.js .teaser.is-in .dgm__a path:nth-child(3) { transition-delay: 200ms; }
.js .teaser.is-in .dgm__a path:nth-child(4) { transition-delay: 270ms; }
.js .teaser.is-in .dgm__a path:nth-child(5) { transition-delay: 340ms; }
.js .teaser.is-in .dgm__a path:nth-child(6) { transition-delay: 410ms; }
.js .teaser.is-in .dgm__a path:nth-child(7) { transition-delay: 480ms; }
.js .teaser .dgm > g:not(.dgm__a) { opacity: 0; transition: opacity var(--dur-med) var(--ease-exp); }
.js .teaser.is-in .dgm > g:not(.dgm__a) { opacity: 1; }
.js .teaser.is-in .dgm > g:nth-child(2) { transition-delay: 120ms; }
.js .teaser.is-in .dgm > g:nth-child(3) { transition-delay: 200ms; }
.js .teaser.is-in .dgm > g:nth-child(4) { transition-delay: 280ms; }
.js .teaser.is-in .dgm > g:nth-child(5) { transition-delay: 360ms; }
.js .teaser.is-in .dgm > g:nth-child(6) { transition-delay: 440ms; }
.js .teaser.is-in .dgm > g:nth-child(7) { transition-delay: 520ms; }
.js .teaser.is-in .dgm > g:nth-child(8) { transition-delay: 600ms; }
.js .teaser.is-in .dgm > g:nth-child(9) { transition-delay: 680ms; }

/* ==================================================================
   25. 重启实验装置
   ================================================================== */
.band--rst { padding-top: var(--sp-4xl); }
.rst__lede { margin-bottom: var(--sp-2xl); }

.rst {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--canvas-card);
  overflow: hidden;
}

/* --- 顶部控制条 --- */
.rst__head {
  display: flex; align-items: center; gap: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.rst__file {
  margin-left: auto; color: var(--mute); text-transform: none;
  letter-spacing: 0; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.seg {
  display: inline-flex; padding: var(--sp-xxs);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--canvas);
}
.seg__b {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--mute);
  font: inherit; font-size: 13px; letter-spacing: .01em;
  padding: var(--sp-xs) var(--sp-lg); border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-exp), background-color var(--dur-fast) var(--ease-exp);
}
.seg__b:hover { color: var(--body); }
.seg__b.is-on { background: var(--ink); color: var(--on-primary); }
.seg__b.is-on[data-v="before"] { background: var(--canvas-mid); color: var(--ink); }
.seg__b:focus-visible { outline: 2px solid var(--btn-border); outline-offset: 2px; }

.rst__play { padding: var(--sp-xs) var(--sp-lg); font-size: 13px; }
.rst__play::before {
  content: ""; width: 0; height: 0; margin-right: var(--sp-sm);
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  display: inline-block; vertical-align: 1px;
}
.rst__play.is-playing::before { border-left-width: 6px; border-right: 6px solid currentColor; border-top-width: 6px; border-bottom-width: 6px; }

/* --- 主体两栏 --- */
.rst__grid {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 0;
}

/* --- 左栏：情境 + 状态 --- */
.rst__aside {
  padding: var(--sp-xl);
  border-right: 1px solid var(--hairline);
  background: var(--canvas);
  min-width: 0;
}
.rst__k {
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mute);
}
.rst__k + .rst__quote { margin-bottom: var(--sp-xl); }
.rst__quote {
  margin: 0; padding: 0 0 0 var(--sp-md);
  border-left: 1px solid var(--btn-border);
  font-size: 14px; line-height: 22px; color: var(--body);
  text-wrap: pretty;
}
.rst__quote--q { color: var(--ink); }

.rst__gauges { display: grid; gap: var(--sp-xl); }
.rst__g { display: grid; gap: var(--sp-sm); }
.rst__gt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md); }
.rst__gt > span { font-size: 13px; color: var(--mute); }
.rst__gt > b { font-size: 15px; letter-spacing: 1px; color: var(--ink); font-weight: 400; }
.rst__gt > b small { font-size: 11px; color: var(--mute); letter-spacing: 1px; }
.rst__track {
  position: relative; height: 4px; border-radius: var(--r-pill);
  background: var(--canvas-mid); overflow: hidden;
}
.rst__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: var(--r-pill); background: var(--mute);
  transition: width var(--dur-slow) var(--ease-exp), background-color var(--dur-std) var(--ease-exp);
}
.rst__fill--store { background: var(--ink); }
.rst__hint { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .6px; color: var(--mute); text-wrap: pretty; }

/* --- 右栏：四个节拍 --- */
.rst__beats { list-style: none; margin: 0; padding: 0; min-width: 0; }
.rst__b {
  position: relative;
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--sp-lg);
  padding: var(--sp-xl);
  border-bottom: 1px solid var(--hairline);
  opacity: .28;
  transition: opacity var(--dur-med) var(--ease-exp), background-color var(--dur-med) var(--ease-exp);
}
.rst__b:last-child { border-bottom: 0; }
.rst__b.is-on { opacity: 1; background: var(--canvas-soft); }
.rst__b.is-past { opacity: .62; }
.rst__i {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px;
  color: var(--mute); padding-top: 3px;
}
.rst__b.is-on .rst__i { color: var(--ink); }
.rst__bt { margin: 0 0 var(--sp-sm); font-size: 16px; line-height: 22px; color: var(--ink); }
.rst__bd { margin: 0; font-size: 13px; line-height: 21px; color: var(--mute); text-wrap: pretty; }
/* 字段表始终参与布局：用 max-height 做展开动画在窄屏会截断较长的行，
   而且会造成跳动，所以层级只用节拍自身的透明度表达。 */
.rst__data {
  margin: var(--sp-md) 0 0; display: grid; gap: var(--sp-xs);
  font-family: var(--font-mono); font-size: 12px; line-height: 19px;
  letter-spacing: .4px; color: var(--body);
}
.rst__d { display: flex; gap: var(--sp-sm); }
.rst__d > i { font-style: normal; color: var(--mute); min-width: 132px; flex: 0 0 auto; }
.rst__d > span { min-width: 0; word-break: break-word; }

/* --- 底部：模型输出 --- */
.rst__out {
  padding: var(--sp-xl);
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
  transition: opacity var(--dur-slow) var(--ease-exp);
}
.rst__out.is-idle { opacity: .38; }
.rst__outhead {
  display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-md);
}
.rst__outhead > .mono { color: var(--mute); }
.rst__verdict { margin-left: auto; letter-spacing: 1.4px; }
.rst__verdict.is-ok { color: var(--ink); }
.rst__verdict.is-bad { color: var(--mute); }
.rst__resp {
  margin: 0; font-size: 22px; line-height: 32px; letter-spacing: -.01em;
  color: var(--ink); text-wrap: pretty;
  min-height: 32px;
}
/* 「答对了」这一帧不再用信号色：p-07 原型写明 one per page max，
   而信号色已经用在首屏画布里那颗目标记录上（accent 属于插图）。
   这里的含义由 ✓ 字形承担，跟「修复前 / 修复后」的对比一样，靠文字不靠颜色。 */
.rst.is-payoff .rst__resp { color: var(--ink); }
.rst.is-payoff .rst__verdict::before { content: ""; }
.rst__kv {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm);
  margin-top: var(--sp-lg); min-height: 26px;
}
.rst__kv > span {
  display: inline-flex; align-items: baseline; gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--mute);
}
.rst__kv > span b { font-weight: 400; color: var(--body); }
.rst__kv > span.is-hot { border-color: var(--btn-border); }
.rst__kv > span.is-hot b { color: var(--ink); }

.rst__note { margin-top: var(--sp-xl); max-width: 88ch; }

@media (max-width: 1080px) {
  .rst__grid { grid-template-columns: minmax(0, 1fr); }
  .rst__aside { border-right: 0; border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 768px) {
  .rst__head { gap: var(--sp-md); }
  /* 出处路径是证据本身，窄屏不截断，换行显示 */
  .rst__file { margin-left: 0; width: 100%; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }
  .rst__aside, .rst__b, .rst__out { padding: var(--sp-lg); }
  .rst__b { grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-md); }
  .rst__d { flex-direction: column; gap: 0; }
  .rst__d > i { min-width: 0; }
  .rst__resp { font-size: 18px; line-height: 26px; }
}

@media (max-width: 768px) {
  .band { padding: var(--band-tight) 0; }
  .release__h1 { max-width: none; }
  .release__lede { margin-bottom: var(--sp-xl); }
  .linkrow .btn { flex: 1 1 auto; justify-content: center; }
  .teaser { padding: var(--sp-lg); }
  .rel__v { font-size: 24px; line-height: 28px; }
}

/* ==================================================================
   29. 首屏：地址空间（本页的招牌机制）
   版面取舍来自 page-design §1/§3：
     · hero **不是**「徽标 + 标题 + 副标题 + 两个按钮」的文字块，
       它就是这个机制本身，字被排进场景里（左上元信息 / 中间标题 / 右下读数）
     · 不居中、没有按钮对、没有置顶徽标 —— A1 的四个特征一个都不占
   机制层见 assets/js/space.js；机制借用 press-stack 的「进度从文档读回来」，
   皮（配色 / 字体 / 结构）全部是本项目自己的。
   ================================================================== */
.hero { position: relative; height: 150vh; background: var(--canvas); }
.hero__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__cv { position: absolute; inset: 0; display: block; }

.hero__layer {
  position: relative; z-index: 1;
  height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 3.2vw, 44px) clamp(20px, 4vw, 56px) clamp(22px, 3.6vw, 48px);
  pointer-events: none;
}
.hero__row { display: flex; min-width: 0; }
.hero__row--top { justify-content: space-between; align-items: baseline; gap: var(--sp-xl); }
.hero__row--mid { align-items: flex-end; justify-content: space-between; gap: clamp(24px, 5vw, 72px); }
.hero__row--bot { justify-content: space-between; align-items: flex-end; gap: clamp(24px, 5vw, 72px); }

.hero__geo { text-align: right; }
.hero__h { max-width: 14ch; margin: 0; font-size: clamp(56px, 15vw, 132px); }

/* 第一屏里的头号数字：读者不用滚三屏才知道这页在说什么 */
.hero__fig { margin: 0; display: grid; gap: var(--sp-md); justify-items: end; text-align: right; max-width: 34ch; }
.hero__fig-row { display: flex; align-items: baseline; gap: var(--sp-md); }
.hero__fig-v {
  font-size: clamp(38px, 4.4vw, 84px); line-height: .95;
  letter-spacing: -.04em; font-weight: 700; font-stretch: 92%;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hero__fig-v small { font-size: .38em; font-weight: 500; letter-spacing: 0; margin-left: .04em; }
.hero__fig-a { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--mute); }
.hero__fig-n {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .8px;
  line-height: 1.8; color: var(--mute);
}
.hero__lede-wrap { max-width: 44ch; min-width: 0; }
.hero__lede { margin: 0 0 var(--sp-md); font-size: var(--fs-lede); line-height: 1.6; color: var(--body); }
.hero__byline { margin: 0; color: var(--mute); }

.hero__hud { display: grid; gap: var(--sp-xs); min-width: 250px; max-width: 34ch; text-align: right; }
.hero__hud-i { color: var(--mute); }
.hero__hud-n { font-size: 1rem; line-height: 1.4; color: var(--ink); }
.hero__hud-v { color: var(--mute); }
.hero__hud-track { display: block; height: 1px; margin-top: var(--sp-sm); background: var(--hairline); }
.hero__hud-track > i { display: block; height: 100%; width: 0; background: var(--ink); }

.hero__cue {
  position: absolute; left: 50%; bottom: clamp(22px, 3.6vw, 48px);
  transform: translateX(-50%);
  margin: 0; color: var(--mute); white-space: nowrap;
  animation: cue 2.6s var(--ease-exp) infinite;
}
@keyframes cue { 0%, 100% { opacity: .30; } 45% { opacity: .95; } }

/* reduced-motion / 窄屏：不下降，就是一帧静态的地址空间 */
.space--still .hero { height: auto; }
.space--still .hero__pin { position: relative; height: 100vh; min-height: 560px; }
.space--still .hero__cue { display: none; }

@media (max-width: 900px) {
  .hero { height: auto; }
  .hero__pin { position: relative; height: auto; min-height: 92vh; padding-block: var(--sp-4xl); }
  .hero__layer { grid-template-rows: auto auto auto; gap: var(--sp-3xl); }
  .hero__row--mid { align-items: flex-start; flex-direction: column; }
  .hero__fig { justify-items: start; text-align: left; max-width: none; }
  .hero__fig-v { font-size: clamp(52px, 15vw, 84px); }
  .hero__row--bot { flex-direction: column; align-items: flex-start; gap: var(--sp-xl); }
  .hero__hud { text-align: left; min-width: 0; }
  .hero__geo, .hero__cue { display: none; }
}

/* ==================================================================
   26. 全站检索（命令面板）
   ================================================================== */
.palbtn {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  height: 30px; padding: 0 var(--sp-md);
  appearance: none; cursor: pointer; flex: none;
  background: transparent; color: var(--mute);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font: inherit; font-size: 13px;
  transition: color var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
}
.palbtn:hover { color: var(--ink); border-color: var(--btn-border); }
.palbtn:focus-visible { outline: 2px solid var(--btn-border); outline-offset: 2px; }
.palbtn .kbd { min-width: 20px; height: 20px; font-size: 11px; }

html.pal-open { overflow: hidden; }

.pal { position: fixed; inset: 0; z-index: 80; }
.pal__mask {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}
.pal__box {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  margin: 12vh auto 0;
  background: var(--canvas-card);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
  animation: palIn var(--dur-fast) var(--ease-exp);
}
@keyframes palIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.pal__hd {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
}
.pal__ico {
  width: 12px; height: 12px; flex: none;
  border: 1.5px solid var(--mute); border-radius: 50%;
  position: relative;
}
.pal__ico::after {
  content: ""; position: absolute; right: -5px; bottom: -4px;
  width: 6px; height: 1.5px; background: var(--mute);
  transform: rotate(45deg);
}
.pal__in {
  flex: 1 1 auto; min-width: 0;
  appearance: none; background: transparent; border: 0; outline: 0;
  color: var(--ink); font: inherit; font-size: 16px; letter-spacing: -.005em;
  padding: var(--sp-sm) 0;
}
.pal__in::placeholder { color: var(--mute); }

.pal__list { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.pal__i {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--sp-lg); align-items: baseline;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
  color: inherit;
}
.pal__i:last-child { border-bottom: 0; }
.pal__i.is-cur { background: var(--canvas-soft); }
.pal__i-n { color: var(--mute); font-size: 11px; }
.pal__i.is-cur .pal__i-n { color: var(--ink); }
.pal__i-b { display: grid; gap: var(--sp-xs); min-width: 0; }
.pal__i-h { font-size: 15px; line-height: 22px; color: var(--body); }
.pal__i.is-cur .pal__i-h { color: var(--ink); }
.pal__i-t {
  font-size: 13px; line-height: 20px; color: var(--mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pal__i-g { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; color: var(--mute); }
.pal__i mark { background: transparent; color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.pal__none { margin: 0; padding: var(--sp-xl) var(--sp-lg); font-size: 14px; color: var(--mute); }
.pal__ft {
  display: flex; align-items: center; gap: var(--sp-lg);
  padding: var(--sp-sm) var(--sp-lg);
  border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--mute);
}
.pal__ft .kbd { min-width: 20px; height: 20px; font-size: 11px; }
.pal__n { margin-left: auto; }

/* 检索跳转后闪一下目标标题 */
#doc h2.is-flash, #doc h3.is-flash {
  animation: flash 1700ms var(--ease);
}
@keyframes flash {
  0%, 100% { box-shadow: inset 3px 0 0 transparent; }
  12%      { box-shadow: inset 3px 0 0 var(--ink); }
  70%      { box-shadow: inset 3px 0 0 var(--ink); }
}

/* ==================================================================
   27. 剂量曲线（NM2.1 页）
   ================================================================== */
.dose {
  margin: var(--sp-xl) 0 var(--sp-2xl);
  padding: var(--sp-xl);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--canvas-card);
}
.dose__hd { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: baseline; margin-bottom: var(--sp-lg); }
.dose__hd .mono { color: var(--ink); text-transform: none; letter-spacing: .6px; font-size: 12px; }
.dose__x, .dose__r {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: var(--sp-lg); align-items: center;
}
.dose__x { margin-bottom: var(--sp-md); }
.dose__x > span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px;
  color: var(--mute); text-align: center;
}
.dose__x > span.is-pick { color: var(--ink); }
.dose__r { padding: var(--sp-md) 0; border-top: 1px solid var(--hairline); }
.dose__l { font-size: 14px; line-height: 20px; color: var(--body); display: grid; gap: var(--sp-xxs); }
.dose__l small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; color: var(--mute); }
.dose__cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-xl); }
.dose__c { display: grid; gap: var(--sp-sm); justify-items: center; }
.dose__bar {
  width: 100%; height: 6px; border-radius: var(--r-pill);
  background: var(--canvas-mid); overflow: hidden;
}
.dose__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--mute); }
.dose__c.is-pick .dose__fill { background: var(--ink); }
.dose__c b { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .6px; color: var(--mute); }
.dose__c.is-pick b { color: var(--ink); }
.dose__note { margin: var(--sp-lg) 0 0; color: var(--body); max-width: 88ch; }
.dose__src { margin: var(--sp-sm) 0 0; color: var(--mute); }

/* ==================================================================
   28. 真实评测台账
   ================================================================== */
.ledger-bar { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin: var(--sp-2xl) 0 var(--sp-lg); }
.ledger-bar .seg { flex-wrap: wrap; }
.ledger-count {
  display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: baseline;
  padding-bottom: var(--sp-lg); border-bottom: 1px solid var(--hairline);
}
.ledger-count .mono { color: var(--ink); text-transform: none; letter-spacing: .6px; }
.ledger { display: grid; }
.lg { padding: var(--sp-xl) 0; border-bottom: 1px solid var(--hairline); }
.lg:last-child { border-bottom: 0; }
.lg__hd { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; margin-bottom: var(--sp-md); }
.lg__i { color: var(--mute); font-size: 11px; }
.lg__id { margin-left: auto; }
.lg__exp { margin: 0 0 var(--sp-sm); font-size: 14px; line-height: 22px; color: var(--mute); }
.lg__exp > span { margin-right: var(--sp-md); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; }
.lg__exp code { color: var(--body); }
.lg__rep {
  margin: 0 0 var(--sp-md); font-size: 13px; line-height: 21px; color: var(--body);
  padding-left: var(--sp-md); border-left: 1px solid var(--btn-border);
  word-break: break-word;
}
.lg__meta { margin: 0; font-size: 11px; letter-spacing: .6px; color: var(--mute); }
.lg__meta b { font-weight: 400; color: var(--body); }

/* 发布页上「NM2.1」那一段的紧凑对照 */
.nm21grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
.nm21grid > div { padding: var(--sp-xl); border-right: 1px solid var(--hairline); }
.nm21grid > div:last-child { border-right: 0; }
.nm21grid .rel__v { font-size: 30px; line-height: 34px; }
.nm21grid .rel__v em { font-style: normal; color: var(--mute); font-size: 20px; margin-right: var(--sp-sm); }

/* 头号数字（money frame）：整页唯一一个 .mega，放在 ~60% 滚动深度收网 */
.money {
  margin-top: var(--band-tight);
  padding: var(--band-tight) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.money__row {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: clamp(14px, 3vw, 44px); margin: var(--sp-lg) 0 0;
}
.money .mega { color: var(--ink); }
.money .mega small { font-size: .34em; letter-spacing: -.02em; margin-left: .03em; font-weight: 500; }
.money__from {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.2px;
  color: var(--mute); max-width: 34ch; line-height: 1.8;
}
.money__cap { margin: var(--sp-xl) 0 0; max-width: var(--measure); font-size: var(--fs-small); line-height: 1.7; color: var(--body); }

@media (max-width: 1080px) {
  .dose__x, .dose__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); }
  .dose__x .dose__x0 { display: none; }
  .dose__x > span { text-align: left; }
  .nm21grid { grid-template-columns: minmax(0, 1fr); }
  .nm21grid > div { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .nm21grid > div:last-child { border-bottom: 0; }
}
@media (max-width: 768px) {
  .palbtn__t { display: none; }
  .pal__box { margin-top: 6vh; max-height: 82vh; }
  .pal__i { grid-template-columns: 26px minmax(0, 1fr); }
  .pal__i-g { display: none; }
  .dose, .lg { padding-left: 0; padding-right: 0; }
  .dose { padding: var(--sp-lg); }
}