/* ═══════════════════════════════════════════════════════════════════════
   prose.css — dsh-auto-memory 技术报告版式系统
   ★ 令牌/动效/组件全部同源于主页本体 docs/landing/index.html 第 13–260 行
     （蓝白底 · Manrope + Space Grotesk + JetBrains Mono · 圆角阶梯 ·
      按钮高光扫过 · 毛玻璃导航 · 日/月图标交叉淡出）
   ★ 此前那套借自 DeepSeek 官网的独立审美（其 c-* 前缀自定义属性）已整套删除，零残留。
   ★ 字体由页面自己引 Google Fonts：
     Space+Grotesk / Manrope / JetBrains+Mono（与主页同一行 URL）
   ★ 页面需在 </body> 前加一行：<script src="assets/theme.js" defer></script>
     （主题切换 + 语言切换 + 可选滚动揭示，无第三方依赖）
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1 · 令牌表
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── 间距刻度 ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 56px;
  --sp-9: 80px; --sp-10: 120px;

  /* ── 圆角阶梯 ── */
  --r-sm: 8px; --r-input: 10px; --r-media: 12px; --r-panel: 16px; --r-card: 24px; --r-pill: 999px;

  /* ── 栏宽：页宽容器 > 陈列宽 > 成文列宽 ── */
  --shell-w: 1110px;
  --prose-w: 800px;
  --col-w: 640px;
  --toc-w: 250px;
  --toc-gap: 60px;

  /* ── 字号 / 行高（成文标准） ── */
  --fs-body: 16px;
  --lh-body: 1.8;

  /* ── 字体栈（CJK 回退栈保留） ── */
  --font-sans: 'Manrope', system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, Menlo, monospace;
  --sans: var(--font-sans);
  --mono: var(--font-mono);
}

/* ── 动效令牌（照抄主页） ── */
:root {
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms;
  --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out; --ease-linear: linear;
  --distance-micro: 4px; --distance-small: 6px; --distance-base: 8px; --distance-medium: 12px;
  --blur-small: 2px; --blur-medium: 3px;
}

/* ── 主题变量：浅色为基准，深色为可选（照抄主页） ── */
:root, [data-theme="light"] {
  --bg: #eef2f7; --bg-elev: #ffffff; --bg-soft: #e2e8f0; --bg-code: #0f172a;
  --fg: #0f172a; --fg-dim: #334155; --muted: #64748b;
  --accent: #2563eb; --accent-2: #3b82f6; --accent-3: #60a5fa; --accent-glow: rgba(37, 99, 235, 0.2);
  --cyan: #2563eb; --teal: #0d9488; --green: #15803d; --purple: #6d28d9;
  --border: rgba(15, 23, 42, 0.1); --border-strong: rgba(15, 23, 42, 0.2);
  --card: rgba(255, 255, 255, 0.7); --card-hover: rgba(15, 23, 42, 0.03); --shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  --neu-dark: #dce3ed; --neu-light: #ffffff;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0a0d14; --bg-elev: #0f1320; --bg-soft: #141828; --bg-code: #05070d;
  --fg: #e8ecf3; --fg-dim: #b8c0d0; --muted: #6a7590;
  --accent: #3b82f6; --accent-2: #60a5fa; --accent-3: #93c5fd; --accent-glow: rgba(59, 130, 246, 0.35);
  --cyan: #38bdf8; --teal: #4dd0c1; --green: #98c379; --purple: #c678dd;
  --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.15);
  --card: rgba(255, 255, 255, 0.02); --card-hover: rgba(255, 255, 255, 0.045); --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --neu-dark: #0c0f17; --neu-light: #141828;
  color-scheme: dark;
}
/* ── prefers-color-scheme 兜底：html 上没有 data-theme 时（无脚本 / 未引 theme.js）跟随系统 ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0d14; --bg-elev: #0f1320; --bg-soft: #141828; --bg-code: #05070d;
    --fg: #e8ecf3; --fg-dim: #b8c0d0; --muted: #6a7590;
    --accent: #3b82f6; --accent-2: #60a5fa; --accent-3: #93c5fd; --accent-glow: rgba(59, 130, 246, 0.35);
    --cyan: #38bdf8; --teal: #4dd0c1; --green: #98c379; --purple: #c678dd;
    --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.15);
    --card: rgba(255, 255, 255, 0.02); --card-hover: rgba(255, 255, 255, 0.045); --shadow: 0 4px 20px rgba(0,0,0,0.3);
    --neu-dark: #0c0f17; --neu-light: #141828;
    color-scheme: dark;
  }
}
:root { interpolate-size: allow-keywords; }

/* ══════════════════════════════════════════════════════════════════════
   2 · 基础
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  /* 数字一律等宽，表格/时间戳/指标列不跳动 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
  /* CJK × 拉丁混排的光学间距 */
  text-autospace: normal;
  /* 标点挤压：先给可回退的 normal，再给更激进的 trim-start */
  text-spacing-trim: normal;
  text-spacing-trim: trim-start;
  /* 行首禁则 / 行尾禁则 */
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  overflow-x: hidden;
  tab-size: 4;
  transition: background-color var(--duration-slow), color var(--duration-slow);
}
/* 噪点质感层（照抄主页 body::before）；正文容器抬到其上，文字不被压暗 */
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.03; pointer-events: none; z-index: 1; mix-blend-mode: overlay;
}
.nav-blur, .pnav, .phero, .nhero, .pgrid, .prose > *, .afterword, .prelated, .nlead, .nlist, .nidx, .pfoot {
  position: relative; z-index: 2;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::selection { background: var(--accent); color: white; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ── 字体工具类（与主页同名同族） ── */
.font-display { font-family: var(--font-display); letter-spacing: -0.025em; }
.font-mono { font-family: var(--font-mono); }
.accent { color: var(--accent); }
.gradient-text {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   3 · 排版基元（中文像中文、英文像英文）
   ══════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; }
/* 标题平衡折行，正文段落只求末行不孤儿 */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.prose p, .prose li, blockquote, figcaption, .pabstract, .afterword p { hanging-punctuation: allow-end; }

/* ══════════════════════════════════════════════════════════════════════
   4 · 容器与栅格
   ══════════════════════════════════════════════════════════════════════ */
.wrap, .pwrap { width: min(100% - 48px, var(--shell-w)); margin-inline: auto; }
@media (min-width: 900px) { .wrap, .pwrap { width: min(100% - 96px, var(--shell-w)); } }

.pgrid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .pgrid { grid-template-columns: var(--toc-w) minmax(0, 1fr); column-gap: var(--toc-gap); }
}
/* 正文列（契约：.pgrid > .particle 为文章正文列）。刻意只声明 min-width，
   不掺定位/背景/滤镜 —— 索引页另有同名装饰层，互不干扰。 */
.particle { min-width: 0; }
/* 正文保持成文列宽 */
.particle > * { max-width: var(--col-w); margin-inline: auto; }
/* figure / 表格 / 代码块允许越出正文列宽，铺满陈列列 */
.particle > figure,
.particle > .tbl,
.particle > pre,
.particle > p:has(> img:only-child),
.particle > .bleed { max-width: none; }

/* ══════════════════════════════════════════════════════════════════════
   5 · 导航（毛玻璃 · 与主页同构）
   ══════════════════════════════════════════════════════════════════════ */
.nav-blur, .pnav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav-in, .pnav-in {
  width: min(100% - 48px, var(--shell-w)); margin-inline: auto;
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
@media (min-width: 900px) { .nav-in, .pnav-in { width: min(100% - 96px, var(--shell-w)); } }

.nav-brand, .pnav-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--fg); font-weight: 700; letter-spacing: -0.02em;
  font-family: var(--font-display); font-size: 15px;
}
.nav-brand i, .pnav-brand i {
  width: 24px; height: 24px; border-radius: 7px; display: block; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.nav-brand svg, .pnav-brand svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--fg); }

.nav-links, .pnav-links { display: flex; align-items: center; gap: 28px; }

.nav-link, .pnav-links a:not(.pnav-cta) {
  color: var(--fg-dim); font-size: 13.5px; transition: color 0.2s; position: relative;
  background: transparent; border: none; cursor: pointer; text-decoration: none;
}
.nav-link:hover, .pnav-links a:not(.pnav-cta):hover { color: var(--accent); }
.nav-link::after, .pnav-links a:not(.pnav-cta)::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.nav-link.is-active { color: var(--accent); }
.nav-link.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after, .pnav-links a:not(.pnav-cta):hover::after { transform: scaleX(1); }
}
/* 兼容旧类名 .pnav-cta：一律按 ghost 药丸呈现 */
.pnav-cta {
  padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  color: var(--fg); font-size: 13px; text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.pnav-cta:hover { border-color: var(--accent); color: var(--accent); background: var(--card-hover); }
@media (hover: hover) and (pointer: fine) { .pnav-cta:hover { transform: translateY(-1px); } }
@media (max-width: 720px) { .pnav-links a:not(.pnav-cta) { display: none; } }
@media (max-width: 860px) { .nav-links .nav-link { display: none; } }

/* 语言切换 */
.lang-switch { background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 3px; display: inline-flex; }
.lang-switch button {
  padding: 4px 11px; border-radius: 999px; font-size: 11px; color: var(--muted);
  transition: all 0.2s; font-family: var(--font-mono); font-weight: 600;
  background: transparent; border: none; cursor: pointer;
}
.lang-switch button.is-on, .lang-switch button.active { background: var(--accent); color: white; }

/* 主题按钮 */
#theme-toggle { position: relative; }
#theme-toggle > svg {
  position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  transition:
    opacity var(--duration-fast) var(--ease-in-out),
    rotate var(--duration-fast) var(--ease-in-out),
    filter var(--duration-fast) var(--ease-in-out);
}
:root[data-theme="light"] #theme-icon-moon,
:root[data-theme="dark"] #theme-icon-sun { opacity: 0; rotate: -90deg; filter: blur(var(--blur-small)); }
:root[data-theme="light"] #theme-icon-sun,
:root[data-theme="dark"] #theme-icon-moon { opacity: 1; rotate: 0deg; filter: blur(0); }
.theme-toggle-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card);
  transition: all 0.2s; color: var(--fg-dim); cursor: pointer; flex-shrink: 0;
}
.theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle-btn svg { stroke: currentColor; }

/* ══════════════════════════════════════════════════════════════════════
   6 · 按钮（高光扫过 · 与主页同手感）
   ══════════════════════════════════════════════════════════════════════ */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.7rem 1.4rem; border-radius: var(--r-sm);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition:
    scale var(--duration-quick) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-smooth-out),
    filter var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-smooth-out);
}
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%); transition: transform 0.6s;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 40px var(--accent-glow); }
.btn-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--fg); }
.btn-ghost:hover { background: var(--card-hover); border-color: var(--accent); color: var(--accent); }
.btn-primary:active, .btn-ghost:active { scale: 0.97; }
.btn-primary[disabled], .btn-ghost[disabled] { opacity: 0.5; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-2px); }
  .btn-ghost:hover { transform: translateY(-1px); }
}

/* ══════════════════════════════════════════════════════════════════════
   7 · 卡片与装饰（同气质）
   ══════════════════════════════════════════════════════════════════════ */
.glass-card {
  background: var(--card); border: 1px solid var(--border); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-panel); position: relative; overflow: hidden; box-shadow: var(--shadow);
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    scale var(--duration-quick) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
[data-theme="light"] .glass-card { background: var(--bg-elev); }
.glass-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.glass-card:hover { background: var(--card-hover); border-color: var(--border-strong); }
.glass-card:hover::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .glass-card:hover { transform: translateY(-4px); } }

.feature-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0;
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .glass-card:hover .feature-icon { background: var(--accent); color: #fff; transform: rotate(-5deg) scale(1.05); box-shadow: 0 8px 24px var(--accent-glow); }
}
@keyframes pulse-glow { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:0.8;transform:scale(1.05)} }
.badge-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); font-size: 11.5px; font-family: var(--font-mono); font-weight: 500;
}
.badge-pill .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: pulse-glow 2s ease-in-out infinite; }

/* ── 滚动揭示（可选）：只有 theme.js 就位才会启用隐藏，绝不会把内容锁死 ── */
.reveal { transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-smooth-out); }
.js-reveal .reveal { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-small)); }
.js-reveal .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-delay-1 { transition-delay: calc(var(--duration-stagger) * 1); }
.reveal-delay-2 { transition-delay: calc(var(--duration-stagger) * 2); }
.reveal-delay-3 { transition-delay: calc(var(--duration-stagger) * 3); }
.reveal-delay-4 { transition-delay: calc(var(--duration-stagger) * 4); }

/* ── 统一按压反馈（用 scale 属性，避免与内联 transform 打架） ── */
.btn-primary:active, .btn-ghost:active, .lang-switch button:active,
.theme-toggle-btn:active, .glass-card:active, .pcard:active { scale: 0.97; }

/* ══════════════════════════════════════════════════════════════════════
   8 · 文章头部
   ══════════════════════════════════════════════════════════════════════ */
.phero {
  padding: var(--sp-9) 0 var(--sp-8);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg)) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .phero { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg-elev)) 0%, var(--bg) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .phero { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg-elev)) 0%, var(--bg) 100%); }
}
.phero-in { max-width: var(--prose-w); }
.ptitle {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.875rem, 4.4vw, 2.75rem); line-height: 1.18; letter-spacing: -0.03em;
  margin: 0 0 var(--sp-4); color: var(--fg); text-wrap: balance;
}
.psub { font-size: 1.0625rem; font-weight: 400; line-height: 1.7; color: var(--fg-dim); margin: 0 0 var(--sp-5); max-width: var(--col-w); text-wrap: pretty; }
.pmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--muted);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.pmeta .tagline { color: var(--accent); font-weight: 600; }
.pmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; flex-shrink: 0; }
.pabstract {
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-media); background: var(--card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 0.9375rem; line-height: 1.8; color: var(--fg-dim); text-wrap: pretty;
}
[data-theme="light"] .pabstract { background: var(--bg-elev); }
.pabstract strong { color: var(--fg); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   9 · 正文 .prose
   ══════════════════════════════════════════════════════════════════════ */
.prose { padding: var(--sp-9) 0 var(--sp-10); color: var(--fg); line-height: var(--lh-body); }
.prose p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--sp-5); }
.prose h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.25rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; margin: var(--sp-9) 0 var(--sp-5); scroll-margin-top: 96px; }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.022em; margin: var(--sp-8) 0 var(--sp-4); scroll-margin-top: 96px; }
.prose h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.014em; margin: var(--sp-7) 0 var(--sp-3); scroll-margin-top: 96px; }
.prose h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.008em; margin: var(--sp-6) 0 var(--sp-2); }
.prose > :first-child { margin-top: 0; }
.prose strong { font-weight: 600; color: var(--fg); }
.prose em { font-style: italic; }
.prose a {
  color: var(--fg); text-decoration: underline; text-decoration-style: dashed;
  text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong);
  transition: color var(--duration-quick) var(--ease-out), text-decoration-color var(--duration-quick) var(--ease-out);
}
.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); text-decoration-style: solid; }
.prose a[target="_blank"]::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 2px;
  background: currentColor; vertical-align: middle;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 3h8v8M13 3L3 13' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 3h8v8M13 3L3 13' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
}
.prose ul, .prose ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-5); }
.prose li { font-size: var(--fs-body); line-height: 1.75; margin-bottom: var(--sp-2); }
.prose li::marker { color: var(--accent); }
.prose li > ul, .prose li > ol { margin-top: var(--sp-2); margin-bottom: 0; }
.prose hr { border: none; height: 1px; background: var(--border); margin: var(--sp-8) auto; }
.prose blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  border-left: 3px solid var(--accent); color: var(--fg-dim);
  font-style: normal; line-height: 1.9; letter-spacing: 0.01em;
}
.prose blockquote p { margin-bottom: var(--sp-3); }
.prose blockquote p:last-child { margin-bottom: 0; }

/* 行内代码：accent 淡染 chip */
.prose code {
  font-family: var(--font-mono); font-size: 0.875em; padding: 0.14em 0.42em; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--fg));
}
/* 代码块：主页深色终端卡片（--bg-code 两套主题都是深色） */
.prose pre, pre {
  background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--r-media);
  padding: var(--sp-5) var(--sp-6); margin: var(--sp-5) 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: #e8ecf3;
  box-shadow: var(--shadow);
}
.prose pre code, pre code {
  background: none; border: none; padding: 0; border-radius: 0;
  font-size: inherit; line-height: inherit; color: inherit; white-space: pre;
}
.tok-kw{color:#60a5fa}.tok-str{color:#98c379}.tok-com{color:#64748b;font-style:italic}.tok-fn{color:#61afef}.tok-num{color:#d19a66}.tok-cls{color:#e5c07b}.tok-mod{color:#c678dd}

/* ── 图片与图注 ── */
.prose figure, figure { margin: var(--sp-8) 0; }
.prose figure img, .prose > p img { width: 100%; border-radius: var(--r-media); }
.prose figcaption, .prose > p:has(> img) + small, figcaption {
  display: block; margin-top: var(--sp-3); text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty;
}

/* ── 图表（figure > .figbox > img） ── */
.figbox {
  border: 1px solid var(--border); border-radius: var(--r-panel); padding: var(--sp-5);
  background: #ffffff; overflow: hidden; box-shadow: var(--shadow);
}
/* 图形 SVG 自带白色画布，故 figbox 在两套主题下都保持白底，避免深色下出现暗底白图 */
.figbox > img, .figbox img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-4); font-size: 13px; color: var(--fg-dim); font-family: var(--font-mono); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; border-radius: 2px; display: block; }

/* ── 表格（.tbl > table） ── */
.tbl {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: var(--sp-5) 0; border: 1px solid var(--border); border-radius: var(--r-media);
  background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
[data-theme="light"] .tbl { background: var(--bg-elev); }
.tbl table, .prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .prose th {
  text-align: left; font-weight: 500; background: var(--bg-soft); color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap;
  text-transform: uppercase;
}
.tbl th, .tbl td, .prose th, .prose td {
  line-height: 1.5; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); color: var(--fg); vertical-align: top;
}
.tbl tbody tr:last-child td, .prose tbody tr:last-child td { border-bottom: none; }
.tbl a, .prose table a { color: var(--accent); text-decoration: none; }
.tbl a:hover, .prose table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose td.num, .tbl td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.prose td.hi, .tbl td.hi { color: var(--accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .tbl tbody tr:hover td, .prose tbody tr:hover td { background: var(--card-hover); }
}

/* ══════════════════════════════════════════════════════════════════════
   10 · 目录
   ══════════════════════════════════════════════════════════════════════ */
.ptoc { display: none; }
@media (min-width: 1024px) { .ptoc { display: block; } }
.ptoc-list {
  position: sticky; top: 96px; list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ptoc-list a {
  display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted);
  text-decoration: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out);
}
.ptoc-list a:hover { color: var(--fg); background: var(--card-hover); }
.ptoc-list a.on, .ptoc-list a.is-active {
  color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════
   11 · 「写在后面的话」
   ══════════════════════════════════════════════════════════════════════ */
.afterword { max-width: var(--col-w); margin: var(--sp-10) auto 0; padding-top: var(--sp-8); border-top: 1px solid var(--border); }
.afterword h2 { font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.022em; margin: 0 0 var(--sp-5); }
.afterword blockquote {
  border: none; padding: 0; margin: 0 0 var(--sp-5); font-style: normal;
  font-size: 1.0625rem; line-height: 1.9; color: var(--accent); letter-spacing: 0.04em;
}
.afterword p { font-size: var(--fs-body); line-height: 1.9; color: var(--fg-dim); margin: 0 0 var(--sp-4); }
.afterword .sign { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════
   12 · 相关报告（.relgrid / 旧名 .prelated-*）
   ══════════════════════════════════════════════════════════════════════ */
.prelated { padding: var(--sp-9) 0 var(--sp-10); }
.prelated-in { border-top: 1px solid var(--border); padding-top: var(--sp-9); }
.relgrid, .prelated-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 768px) { .relgrid, .prelated-grid { grid-template-columns: repeat(3, 1fr); } }
.pcard {
  display: flex; flex-direction: column; padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-decoration: none; color: inherit;
  transition: transform var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
[data-theme="light"] .pcard { background: var(--bg-elev); }
.pcard:hover { border-color: var(--accent); box-shadow: 0 12px 40px var(--accent-glow); }
@media (hover: hover) and (pointer: fine) { .pcard:hover { transform: translateY(-4px); } }
.kind {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent); white-space: nowrap;
}
.pcard .kind { margin-bottom: var(--sp-3); }
.pcard h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.014em; margin: 0 0 var(--sp-2); }
.pcard p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }
.pcard .go, .go { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: var(--sp-4); }
.pcard:hover .go { text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   13 · news 索引页
   ══════════════════════════════════════════════════════════════════════ */
.nhero {
  padding: var(--sp-9) 0 var(--sp-8);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg)) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .nhero { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg-elev)) 0%, var(--bg) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nhero { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg-elev)) 0%, var(--bg) 100%); }
}
.nhero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 var(--sp-4); }
.nhero p { font-size: 1.0625rem; line-height: 1.75; color: var(--fg-dim); margin: 0; max-width: var(--col-w); text-wrap: pretty; }

.nlead { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); padding: var(--sp-9) 0 var(--sp-8); }
@media (min-width: 860px) { .nlead { grid-template-columns: 1.05fr 1fr; align-items: center; } }
.nlead .cover {
  display: block; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden;
  background: #ffffff; box-shadow: var(--shadow);
  transition: transform var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.nlead .cover:hover { border-color: var(--accent); box-shadow: 0 12px 40px var(--accent-glow); }
@media (hover: hover) and (pointer: fine) { .nlead .cover:hover { transform: translateY(-4px); } }
.nlead .kind { font-size: 13px; }
.nlead h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 1.875rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; margin: var(--sp-3) 0 var(--sp-4); }
.nlead h2 a { color: inherit; text-decoration: none; }
.nlead h2 a:hover { color: var(--accent); }
.nlead p { font-size: var(--fs-body); line-height: 1.75; color: var(--fg-dim); margin: 0 0 var(--sp-5); text-wrap: pretty; }

.nlist { border-top: 1px solid var(--border); }
.nrow {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-3); border-bottom: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: background-color var(--duration-fast) var(--ease-out);
}
@media (min-width: 768px) { .nrow { grid-template-columns: 132px 1fr 120px; gap: var(--sp-5); align-items: baseline; } }
.nrow:hover { background: var(--card-hover); }
.nrow .date { font-family: var(--font-mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nrow h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.016em; margin: 0 0 var(--sp-2); }
.nrow h3 a { color: inherit; text-decoration: none; }
.nrow h3 a:hover { color: var(--accent); }
.nrow p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; text-wrap: pretty; }
.nrow .kind { font-size: 12.5px; white-space: nowrap; margin-bottom: 0; }

.nidx { padding: var(--sp-9) 0 var(--sp-10); }
.nidx h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.022em; margin: 0 0 var(--sp-6); }

/* ══════════════════════════════════════════════════════════════════════
   14 · 页脚
   ══════════════════════════════════════════════════════════════════════ */
.pfoot { border-top: 1px solid var(--border); padding: var(--sp-8) 0 var(--sp-9); font-size: 13.5px; color: var(--muted); }
.pfoot .row { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; justify-content: space-between; }
.pfoot p { margin: 0; }
.pfoot .row + p { margin-top: var(--sp-5); font-size: 13px; }
.pfoot a { color: var(--fg-dim); text-decoration: none; transition: color var(--duration-quick) var(--ease-out); }
.pfoot a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   15 · FAQ（原生 details，保留无脚本回退）
   ══════════════════════════════════════════════════════════════════════ */
details { border: 1px solid var(--border); border-radius: var(--r-input); padding: 1.1rem 1.35rem; background: var(--card); transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
[data-theme="light"] details { background: var(--bg-elev); }
details[open] { border-color: var(--accent); }
summary { font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--fg); cursor: pointer; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 22px; color: var(--accent); transition: transform var(--duration-fast) var(--ease-in-out); font-weight: 300; flex-shrink: 0; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--fg-dim); margin-top: 0.75rem; line-height: 1.8; }
details::details-content {
  block-size: 0; overflow: hidden; content-visibility: hidden;
  transition: block-size var(--duration-fast) var(--ease-smooth-out), content-visibility var(--duration-fast) allow-discrete;
}
details[open]::details-content { block-size: auto; content-visibility: visible; }

/* ══════════════════════════════════════════════════════════════════════
   15.5 · 外壳补层：导航品牌字标 / 页脚栅格
   —— 文章页与索引页共用的一层。页面若自带同名规则（写在 <link> 之后）
      自然覆盖本层；页面若不自带，本层保证外壳不缺件。取值同源主页。
   ══════════════════════════════════════════════════════════════════════ */
.brand-logo { width: 24px; height: 24px; display: block; flex: none; color: var(--accent); }
.brand-logo svg { width: 100%; height: 100%; display: block; }
.brand-logo .brain-path { stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-logo:hover .brain-path { stroke: var(--accent); }
@keyframes pulse-soft { 0% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -30 } }
.brand-logo .pulse { stroke: var(--accent); stroke-width: 1.4; fill: none; stroke-dasharray: 3 2; animation: pulse-soft 4s linear infinite; }
.brand-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
@media (max-width: 760px) { .nav-opt { display: none; } }

.pfoot-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 860px) { .pfoot-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); } }
.pfoot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.pfoot-brand .brand-logo { width: 28px; height: 28px; }
.pfoot-name { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg); }
.pfoot-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
.pfoot-desc { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.pfoot .col-title {
  margin-bottom: var(--sp-3); font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.pfoot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pfoot .nav-link { font-size: 13.5px; }
.pfoot-base {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════
   16 · 响应式 / 降低动效 / 打印
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .phero, .nhero { padding: var(--sp-7) 0 var(--sp-6); }
  .prose { padding: var(--sp-7) 0 var(--sp-9); }
  .pabstract { padding: var(--sp-4) var(--sp-5); }
  .prose pre, pre { padding: var(--sp-4) var(--sp-5); font-size: 12px; }
  .figbox { padding: var(--sp-3); }
  .particle > * { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js-reveal .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .badge-pill .dot { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .nav-blur, .pnav, .ptoc, .prelated, .pfoot { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .pgrid { grid-template-columns: 1fr; }
  .glass-card, .tbl, .figbox { box-shadow: none; }
}