:root{
  /* ── 暖色调色板（统一在这里调） ── */
  --bg:#FBF3E9;            /* 页面底：暖米色 */
  --bg-grad:#FDF7EF;       /* 顶部渐隐用的更浅米白 */
  --surface:#FFF8F0;       /* 卡片面：米白 */
  --surface-2:#F9EEE1;     /* 次级面：浅燕麦 */
  --surface-3:#F4E7D6;     /* 代码 / 表头底 */
  --ink:#3E2A1B;           /* 主文字：深暖棕（对 #FFF8F0 约 11.9:1） */
  --ink-2:#6B5238;         /* 次级文字（约 6.3:1） */
  --body:#57402C;          /* 正文（约 8.6:1） */
  --gray:#7A6148;          /* 辅助文字（约 5.0:1，AA 达标） */
  --mute:#7E6549;          /* 弱化文字（卡片底 5.2:1 / 页面底 5.0:1，AA 达标，勿再调浅） */
  --brown:#8B5E3C;         /* 暖棕：标题线、次级强调 */
  --amber:#E0A458;         /* 琥珀：装饰性强调（描边、色条、hover） */
  --amber-deep:#8F5A1B;    /* 琥珀深色版：凡是“文字色”都用它（琥珀底上 5.1:1，米白上 5.5:1） */
  --amber-soft:#FBEFDC;    /* 标签 / 高亮底 */
  --line:#EADCCB;          /* 分隔线 */
  --line-strong:#DFCBB2;   /* 卡片描边 */
  --shadow-sm:0 1px 2px rgba(80,52,28,.05);
  --shadow-md:0 6px 18px -6px rgba(80,52,28,.14),0 2px 6px rgba(80,52,28,.05);
  --shadow-lg:0 14px 34px -10px rgba(80,52,28,.22),0 4px 10px rgba(80,52,28,.06);
  --shadow-xl:0 24px 48px -16px rgba(80,52,28,.28),0 8px 18px rgba(80,52,28,.08);  /* 卡片 hover 的浮起阴影 */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 等宽数字（日期 / 序号 / 计数） */
  --num:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;

  /* ── 列表页精修新增（v2） ── */
  --amber-2:#C98B3F;       /* 琥珀第二档：色条中段、序号描边（装饰用，不作文字色） */
  --amber-edge:#F0D9B8;    /* 琥珀软底上的描边（替代原先散落的 #F0D5B0 / #F0D9B8） */
  --warm-glow:rgba(224,164,88,.20);   /* 卡片 hover 的暖光晕 */
  --warm-haze:rgba(224,164,88,.16);   /* 页面顶部的大范围暖雾（body 背景） */
  --warm-ring:rgba(139,94,60,.26);    /* hover 阴影的暖棕扩散 */
  --surface-hover:#FFFCF6; /* 卡片 hover 面（替代原先硬编码） */
  --row-hover:#FFFBF4;     /* 表格行 hover 面（替代原先硬编码） */
  --num-ink:#94704F;       /* 卡片序号：装饰性索引数字（对卡片底 4.0:1，仅装饰，不承载信息） */

  /* ── 深色模式配套：原硬编码色值统一变量化（浅色取值与改造前完全一致） ── */
  --code-ink:#6E4426;      /* 行内代码文字（对 #F4E7D6 约 6.9:1） */
  --code-pre-ink:#5B3D25;  /* 代码块文字（对 #F9EEE1 约 8.6:1） */
  --quote-ink:#6B4A2B;     /* 引用块文字（对 #FBEFDC 约 7.0:1） */
  --nav-on-1:#9C6A3E;      /* 导航选中胶囊渐变·起 */
  --nav-on-2:#8B5E3C;      /* 导航选中胶囊渐变·止（= --brown 当前值，独立变量以便深色单独反相） */
  --nav-on-ink:#FFFFFF;    /* 导航选中胶囊文字 */
  --nav-on-shadow:0 2px 8px -2px rgba(139,94,60,.5);
  --nav-bar-glow:0 0 8px -1px rgba(224,164,88,.55);
  --sel-bg:rgba(224,164,88,.32);      /* 文本选中底 */
  --ref-line:rgba(143,90,27,.55);     /* 参考文献虚线下划线 */

  /* ── 场景背景层（与主站同一套语言，2026-10-26 同步）──
     浅色 = giant-pug-85 的金→蓝→紫 145° 渐变叠纸白底；深色块里单独给夜空场景。
     --frost 决定用哪一份 SVG 滤镜：浅色要浓度高的那份才读得出磨砂。 */
  --scene-bg:
    linear-gradient(145deg,
      rgba(169,140,76,.42) 0%,
      rgba(108,149,214,.44) 52%,
      rgba(124,43,117,.40) 100%),
    var(--bg);
  --frost:url(#frost-texture-strong);
  --bg-fade:78vh;

  /* 直接落在渐变磨砂场景层上的弱化文字。--mute 在彩色底上只有 3:1 出头，
     这里单独给一档深棕（对场景层 6.0–6.4:1）。**深色块必须反向给浅色值，漏了会隐形。** */
  --mute-on-scene:#5C3F26;
  --nav-ink:var(--ink-2);             /* 导航未选中项；深色块单独给值 */
}

*{box-sizing:border-box;margin:0;padding:0}

/* ── 全局防横向溢出（窄屏下长英文/长串不撑破视口） ── */
img,svg{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* ── 滚动条：暖色细条，跟随主题变量自动适配深色 ── */
html{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-strong);
  border-radius:99px;
  border:3px solid var(--bg);       /* 内边距做出"悬浮细条"观感 */
}
::-webkit-scrollbar-thumb:hover{background:var(--amber-2)}
::-webkit-scrollbar-corner{background:transparent}

body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;
  color:var(--body);
  background-color:var(--bg);
  line-height:1.8;
  font-size:16px;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── 场景背景层（2026-10-26 与主站同步）──────────────────────────
   原来背景直接画在 body 上，没法单独加滤镜（挂 body 会把所有文字一起磨砂掉）。
   改为固定定位的伪元素层承载渐变 + 磨砂颗粒，body 只留纯色兜底。
   滤镜由 assets/nav.js 注入：浅色 #frost-texture-strong、深色 #frost-texture，
   按 data-theme 由 --frost 变量分流（两份滤镜不能共用，强度要各调各的）。 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--scene-bg);
  filter:var(--frost,url(#frost-texture));
}

::selection{background:var(--sel-bg);color:var(--ink)}  /* 选中态用半透明琥珀，与文字保持 11:1 以上 */

.wrap{max-width:860px;margin:0 auto;padding:56px 24px 88px}

/* ── 页头 ── */
header{
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:38px;
  position:relative;
}
/* 标题装饰线：与导航指示条区分开，仅作页头点缀 */
header::after{
  content:"";position:absolute;left:0;bottom:-1px;width:40px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--brown));
  opacity:.45;
}
.site-title{
  font-size:clamp(22px,4vw,28px);
  line-height:1.45;
  color:var(--ink);
  font-weight:650;
  letter-spacing:.2px;
  text-wrap:balance;
}
h1{
  font-size:clamp(22px,4vw,28px);
  line-height:1.45;
  color:var(--ink);
  font-weight:650;
  letter-spacing:.2px;
  text-wrap:balance;
}
header p{margin-top:10px;font-size:14px;color:var(--mute);letter-spacing:.4px}

nav{margin-top:20px;display:flex;gap:8px;font-size:14.5px;flex-wrap:wrap}
nav a{
  color:var(--ink-2);
  text-decoration:none;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  background:transparent;
  border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
nav a:hover{color:var(--amber-deep);background:var(--amber-soft);border-color:var(--line-strong);transform:translateY(-1px)}
nav a:focus-visible{outline:2px solid var(--brown);outline-offset:2px}
nav a.on{
  color:var(--nav-on-ink);
  font-weight:600;
  background:linear-gradient(180deg,var(--nav-on-1),var(--nav-on-2));
  border-color:transparent;
  box-shadow:var(--nav-on-shadow);
  position:relative;
}
/* 选中项下方的琥珀指示条：随当前页移动，从中心向两侧展开 */
nav a.on::after{
  content:"";
  position:absolute;left:11px;right:11px;bottom:-10px;height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--amber),var(--amber-2),var(--brown));
  box-shadow:var(--nav-bar-glow);
  transform-origin:50% 50%;
  animation:nav-bar-in .34s var(--ease) both;
}
@keyframes nav-bar-in{
  from{transform:scaleX(.2);opacity:0}
  to{transform:scaleX(1);opacity:1}
}

/* ── 区块标题 ── */
h2{
  font-size:17px;
  color:var(--ink);
  font-weight:650;
  margin:44px 0 18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  letter-spacing:.3px;
  display:flex;align-items:center;gap:10px;
}
h2::before{
  content:"";width:6px;height:6px;border-radius:2px;flex:none;
  background:var(--amber);transform:rotate(45deg);
}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
h3{font-size:15.5px;color:var(--ink);font-weight:650;margin:28px 0 10px;letter-spacing:.2px}

/* ── 笔记卡片（列表页） ──
   .note 同时被 /、/notes/、/works/、/project/ 复用：
   只有 <a class="note"> 才是可点击卡片，div.note 是正文提示框，
   因此所有外观规则都限定在 a.note 上，div.note 保持原样。 */
a.note{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:20px 22px 19px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;               /* 裁住左上角的暖光晕，圆角不变形 */
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease),background-color .3s var(--ease);
}
/* 左侧色条：常驻但很淡，悬停时点亮成琥珀→棕色三段渐变 */
a.note::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--amber),var(--amber-2) 55%,var(--brown));
  opacity:.32;
  transition:opacity .22s var(--ease),width .22s var(--ease);
}
/* 左上角暖光晕：只在悬停/聚焦时浮出 */
a.note::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(180px 130px at 0% 0%,var(--warm-glow),transparent 72%);
  opacity:0;
  transition:opacity .28s var(--ease);
  pointer-events:none;
}
a.note:hover,
a.note:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--shadow-xl),0 0 0 3px var(--warm-ring);
  border-color:var(--line-strong);
  background:var(--surface-hover);
}
a.note:hover::before,
a.note:focus-visible::before{opacity:1;width:4px}
a.note:hover::after,
a.note:focus-visible::after{opacity:1}
a.note:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
a.note:active{transform:translateY(0);box-shadow:var(--shadow-md);transition-duration:.06s}

/* 标题：16.5px / 650，与 14px 摘要拉开明显层级 */
a.note .t{
  position:relative;
  font-size:16.5px;
  color:var(--ink);
  font-weight:650;
  line-height:1.55;
  letter-spacing:.1px;
  text-wrap:pretty;
  transition:color .2s var(--ease);
}
a.note:hover .t,
a.note:focus-visible .t{color:var(--brown)}

/* 元信息行：日期(等宽·左) · 序号(等宽) · 标签(右) —— 栅格保证日期与标签分列两端 */
a.note .m{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 12px;
  margin-top:7px;
  font-size:12.5px;
  color:var(--mute);
  letter-spacing:.2px;
}
/* 「2026-10-14」这类纯日期：等宽 + 稍深的棕，读起来像档案索引 */
a.note .m > span:not([class]){
  font-family:var(--num);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1px;
  color:var(--ink-2);
}
/* 标签靠右，日期留在左端 —— 一眼能看出「哪天空、归哪类」 */
a.note .m .tag{margin-left:auto}

/* 摘要：14px，行高 1.8，颜色比标题浅一档 */
a.note .x{
  position:relative;
  margin-top:9px;
  font-size:14px;
  color:var(--ink-2);
  line-height:1.8;
  text-wrap:pretty;
}

/* 卡片序号（可选，加在 .m 里：<span class="n">01</span>）——
   紧跟日期，与日期同属“索引区”，所以 margin-right:auto 把标签推到最右 */
a.note .m .n{
  margin-right:auto;
  font-family:var(--num);
  font-variant-numeric:tabular-nums;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.8px;
  color:var(--num-ink);
}

/* ── 标签 ── */
.tag{
  display:inline-block;
  font-size:12px;
  line-height:1.6;
  padding:2px 10px;
  border-radius:var(--radius-pill);
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink-2);
  letter-spacing:.3px;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.tag.amber{background:var(--amber-soft);border-color:var(--amber-edge);color:var(--amber-deep);font-weight:500}
a.tag:hover,
a.note:hover .tag,
a.note:focus-visible .tag{background:var(--amber-soft);border-color:var(--amber-edge);color:var(--amber-deep)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ── 列表页小节：计数徽标（可选，加在 h2 之后） ── */
.count{
  font-family:var(--num);
  font-variant-numeric:tabular-nums;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--amber-deep);
  background:var(--amber-soft);
  border:1px solid var(--amber-edge);
  border-radius:var(--radius-pill);
  padding:1px 9px;
  line-height:1.7;
}

/* ── 页脚 ── */
footer{
  margin-top:60px;
  padding:24px 4px 0;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--mute);
  line-height:1.95;
  letter-spacing:.2px;
}


/* ── 备案号（工信部要求：全站页脚可见并链接 beian.miit.gov.cn） ── */
footer .icp{
  display:inline-block;
  margin-top:4px;
  color:var(--mute);
  text-decoration:none;
  border-bottom:1px dotted var(--line);
  transition:color .18s ease, border-color .18s ease;
}
footer .icp:hover{color:currentColor;border-bottom-color:currentColor;filter:brightness(1.25)}

/* ── 文章页 ── */
.backlink{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:20px;
  font-size:13.5px;
  color:var(--mute);
  text-decoration:none;
  padding:5px 12px 5px 10px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.backlink:hover{color:var(--amber-deep);background:var(--amber-soft);border-color:var(--amber-edge);transform:translateX(-2px)}
.backlink:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.post-meta{margin-top:12px;font-size:13px;color:var(--mute);display:flex;gap:14px;flex-wrap:wrap;align-items:center}

p{margin-bottom:15px}
ul,ol{margin:0 0 15px 1.25em}
li{margin-bottom:8px}
li::marker{color:var(--brown)}

a{color:var(--brown);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--amber-deep)}

code{
  font-family:var(--mono);
  font-size:13.5px;
  background:var(--surface-3);
  border:1px solid var(--line);
  padding:1.5px 6px;
  border-radius:5px;
  color:var(--code-ink);
  word-break:break-word;
}
pre{
  margin:0 0 18px;
  padding:16px 18px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--radius-sm);
  overflow-x:auto;
  line-height:1.7;
  box-shadow:var(--shadow-sm);
}
pre code{background:none;border:none;padding:0;font-size:13px;color:var(--code-pre-ink)}

blockquote{
  margin:0 0 18px;
  padding:16px 20px;
  background:var(--amber-soft);
  border-left:3px solid var(--amber);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:14.5px;
  color:var(--quote-ink);
}
blockquote p:last-child{margin-bottom:0}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14.5px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
th{color:var(--ink);font-weight:600;background:var(--surface-2);font-size:13.5px;letter-spacing:.3px}
tbody tr{transition:background-color .18s var(--ease)}
tbody tr:hover td{background:var(--row-hover)}

strong{color:var(--ink);font-weight:650}

.figure{
  margin:26px 0 28px;
  padding:16px 14px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
.figure:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.figure img{display:block;width:100%;height:auto;border-radius:6px}

/* ── 课题页 ── */
.lead{
  margin-top:28px;
  padding:24px 26px;
  background:linear-gradient(180deg,var(--surface-hover),var(--surface));
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--radius-md);
  font-size:16.5px;
  color:var(--ink);
  line-height:1.85;
  box-shadow:var(--shadow-md);
}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px 18px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);border-color:var(--line-strong)}
.card .k{font-size:12px;color:var(--mute);letter-spacing:.7px}
.card .v{
  font-size:30px;font-weight:650;color:var(--ink);margin:10px 0 2px;
  font-variant-numeric:tabular-nums;font-family:var(--mono);letter-spacing:-.5px;
}
.card .v small{font-size:14px;font-weight:400;color:var(--gray);margin-left:2px;letter-spacing:0}
.card .d{font-size:12.5px;color:var(--mute);line-height:1.65;margin-top:8px}
.sub{margin-top:10px;font-size:14px;color:var(--mute);letter-spacing:.5px}
.page-title{
  margin-top:32px;font-size:clamp(22px,4vw,28px);line-height:1.45;color:var(--ink);
  font-weight:650;letter-spacing:.2px;border:none;padding:0;text-wrap:balance;
}
.ui-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 12px}
.figure.ui{margin:0;padding:12px 10px}
.refs{margin:16px 0 10px;padding-left:1.4em;font-size:14px;line-height:1.9}
.refs li{margin-bottom:10px;color:var(--ink-2);word-break:break-word}
.refs a{color:var(--amber-deep);text-decoration:none;border-bottom:1px dotted var(--ref-line)}
.refs a:hover{border-bottom-style:solid;border-bottom-color:var(--amber-deep)}

/* ── 提示框 / 信息清单（课题页） ── */
.warn{
  margin:18px 0;
  padding:16px 18px;
  background:var(--amber-soft);
  border:1px solid var(--amber-edge);
  border-left:3px solid var(--amber);
  border-radius:var(--radius-sm);
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
}
.warn strong{color:var(--ink)}

.meta{
  margin:18px 0 4px;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.meta dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;font-size:14px}
.meta dt{color:var(--mute);white-space:nowrap}
.meta dd{color:var(--ink);font-weight:500}
@media(max-width:640px){.meta dl{grid-template-columns:1fr;gap:2px 0}.meta dd{margin-bottom:10px}}

/* ── 响应式 ── */
@media(max-width:760px){
  .ui-row{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  .card .v{font-size:26px}
}
@media(max-width:640px){
  .wrap{padding:34px 18px 60px}
  h1,.site-title,.page-title{font-size:21px}
  nav{gap:6px;font-size:14px}
  nav a{padding:5px 11px}
  nav a.on::after{left:11px;right:11px;bottom:-8px}
  a.note{padding:16px 16px 16px 20px}
  a.note .t{font-size:15.5px}
  a.note .x{font-size:13.5px;line-height:1.75}
  a.note .m .tag{margin-left:auto}
  .figure{padding:12px 10px 8px}
  .lead{padding:18px 18px;font-size:15.5px}
  th,td{padding:9px 10px}
}


/* ── 阅读页排版精修（t-content）──
   只对 article 页生效：/notes/<slug>/ 的正文容器是 .wrap 且页内存在 .post-meta。
   不新增 class 到页面（除 .ctx-link），全部由既有结构派生。 */
.page-title{
  margin-top:24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.page-title::after{
  content:"";position:absolute;left:0;bottom:-2px;width:56px;height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--amber),var(--brown));
}
.post-meta{
  padding:14px 0 6px;
  margin-top:0;
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}
/* 正文宽度：长文行宽收紧一档，只作用于带 .post-meta 的阅读页 */
.wrap:has(.post-meta){max-width:760px}
@media(max-width:640px){.wrap:has(.post-meta){max-width:none}}
h2{scroll-margin-top:20px}
/* 触屏/窄屏关闭 body 固定背景：fixed attachment 会让滚动逐帧重绘整页背景，是移动端滚动卡顿的主要来源 */
@media(max-width:820px),(pointer:coarse){
  body{background-attachment:scroll}
}
/* 表格在窄屏的最小可读性：允许横向滚动而非挤压 */
@media(max-width:480px){
  .wrap:has(.post-meta) table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── 无障碍 / 动效偏好 ── */
:focus-visible{outline:2px solid var(--brown);outline-offset:2px;border-radius:4px}
.note:focus-visible{outline:2px solid var(--brown);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  a.note:hover,.card:hover,.figure:hover,.note:hover{transform:none}
  /* 光晕不淡入，直接以静态色出现在悬停态，避免动效 */
  a.note::after{display:none}
  a.note:hover{background:var(--surface-hover)}
  /* 天气开关豁免（2026-10-26 与主站同步）：
     用户系统关掉「显示动画效果」时浏览器报 reduce，上面的 *{transition:none!important}
     会连开关自己的弹跳过渡一起杀掉、变成直切。类选择器 (0,2,0) 压过 * (0,0,0)。 */
  .theme-btn .theme-switch__container,
  .theme-btn .theme-switch__sun-moon-container,
  .theme-btn .theme-switch__moon,
  .theme-btn .theme-switch__stars-container{transition:var(--transition)!important}
  .theme-btn .theme-switch__circle-container,
  .theme-btn .theme-switch__clouds{transition:var(--circle-transition)!important}
}

/* ═══════════════════════════════════════════════
   深色模式：暖棕深色调
   只做覆盖，不动 :root 原值；浅色主题逐字保持不变
   ═══════════════════════════════════════════════ */
html[data-theme="dark"]{
  /* ── 底 / 面：层级方向与浅色一致（卡片比页面亮） ── */
  --bg:#14100B;             /* 页面底：暖近黑（对 --ink 15.51:1） */
  --bg-grad:#1B1510;        /* 顶部渐隐：比 --bg 亮一档 */
  --surface:#1E1810;        /* 卡片面 */
  --surface-2:#261E15;      /* 次级面 */
  --surface-3:#2E2519;      /* 代码 / 表头底 */
  --surface-hover:#251D14;  /* 卡片 hover 面 */
  --row-hover:#231B12;      /* 表格行 hover 面 */

  /* ── 文字：暖米白阶梯，非纯白 ── */
  --ink:#F2E7D8;            /* 主文字（最差 11.86:1） */
  --ink-2:#CDB79A;          /* 次级文字（最差 7.47:1） */
  --body:#DFCEB8;           /* 正文（最差 9.79:1） */
  --gray:#B49A78;           /* 辅助文字（最差 6.13:1，AA 达标） */
  --mute:#AC9270;           /* 弱化文字（最差 5.55:1，AA 达标，勿再调暗） */

  /* ── 强调：琥珀提亮后继续当点缀 ── */
  --brown:#C68E52;          /* 暖棕：链接 / 焦点环 / 标题线（最差 5.78:1，AA 达标） */
  --amber:#F0B96B;          /* 琥珀：装饰性强调（对页面底 10.69:1） */
  --amber-2:#DCA35A;        /* 色条中段（对页面底 8.24:1） */
  --amber-deep:#EBC48D;     /* 琥珀文字色专用（最差 8.83:1） */
  --amber-soft:#342719;     /* 标签 / 高亮底 */
  --amber-edge:#5F4931;     /* 琥珀软底上的描边 */
  --line:#3B2E21;           /* 分隔线 */
  --line-strong:#4E3C2B;    /* 卡片描边 */
  --num-ink:#9B7A58;        /* 序号（仅装饰，4.21:1，不承载信息） */

  /* ── 硬编码变量化后的深色取值 ── */
  --code-ink:#D6B891;
  --code-pre-ink:#DFC5A4;
  --quote-ink:#E4D0AE;
  --nav-on-1:#F5CB93;       /* 选中胶囊反相为琥珀底深棕字 */
  --nav-on-2:#E0AB6A;
  --nav-on-ink:#2A1B0C;
  --nav-on-shadow:0 2px 10px -2px rgba(240,185,107,.35);
  --nav-bar-glow:0 0 10px -1px rgba(240,185,107,.70);
  --sel-bg:rgba(240,185,107,.30);
  --ref-line:rgba(240,185,107,.65);

  /* ── 场景背景层·深色（2026-10-26 同步）──
     夜空构图：顶部暖雾 + 渐隐到深底。渐变带长度走默认 320px（浅色那份拉到了 78vh）。 */
  --scene-bg:
    radial-gradient(1200px 560px at 50% -200px,var(--warm-haze),transparent 72%),
    linear-gradient(180deg,var(--bg-grad) 0%,var(--bg) 320px),
    var(--bg);
  --frost:url(#frost-texture);        /* 深色底用柔的那份，浅色加强不影响它 */
  /* 漏了这行深色副标题会沿用浅色深棕、压在夜空底上只有 1.5:1（几乎不可见）。
     取 --body 档，实测 9.57–11.61:1。 */
  --mute-on-scene:#DFCEB8;
  --nav-ink:#CDB79A;

  /* ── 暖光晕（跟随提亮后的琥珀 rgb(240,185,107)） ── */
  --warm-glow:rgba(240,185,107,.16);
  --warm-haze:rgba(240,185,107,.10);
  --warm-ring:rgba(240,185,107,.22);

  /* ── 阴影：深底上暖棕阴影不可见，改纯黑 ── */
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 6px 18px -6px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.25);
  --shadow-lg:0 14px 34px -10px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.30);
}

/* 深色下：SVG 图纸铺暖米"纸面"
   —— 7 张配图内部无背景矩形、文字为深藏青 #16324F，直接落深底会整张消失。
      给 <img> 本身铺纸面后，SVG 内部对比度与浅色模式完全一致（#16324F on #FDF6EC = 12.21:1）。 */
html[data-theme="dark"] .figure img{
  background:#FDF6EC;
  padding:10px;
  border-radius:6px;
}

/* ── 主题基础设施 ──
   color-scheme 影响浏览器原生滚动条、表单控件与默认画布底色。
   未落定时交给系统；一旦 JS 写入 data-theme 就锁定。 */
html{color-scheme:light dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

/* ── 主题切换按钮 ──
   定位在 header 右上角。header 已有 position:relative，按钮 absolute 不占文档流，
   不会打乱 h1 / p / nav 的现有排版。JS 未执行时不显示，避免"点了没反应"的死按钮。
   减少动效：开关的弹跳**刻意不受** prefers-reduced-motion 影响——系统关掉动画的用户
   也要看到滑块滑动，否则控件像"坏了"（用户明确反馈过"没有过渡"）。
   页面级配色过渡才尊重 reduce：那时 nav.js 不挂 .theme-anim，颜色直切。 */
.theme-btn{
  display:none;                     /* JS 注入开关 DOM 后（.ws-ready）才显示 */
  position:absolute;top:2px;right:0;
  margin:0;padding:0;
  border:0;background:none;
  cursor:pointer;outline:none;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.theme-btn.ws-ready{display:inline-block}

/* 点击热区扩到 44×44（WCAG 2.5.8 只要求 ≥24，此处按移动端手感给足） */
.theme-btn::after{content:"";position:absolute;inset:-9px}

.theme-btn:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

/* ── 天气开关本体（移植自 uiverse Galahhad/strong-squid-82，MIT；2026-10-26 与主站同步）──
   变量与结构照搬原版，仅三处适配：
   ① 尺寸体系是 em：--toggle-size 16px 时轨道 90×40（原版 30px 太大）；
   ② 状态选择器 :checked 换成 .theme-btn[aria-checked="true"] 后代选择器；
   ③ 窄屏降到 14px（78.75×35），避免盖住标题。 */
.theme-btn .theme-switch{
  --toggle-size:16px;
  --container-width:5.625em;
  --container-height:2.5em;
  --container-radius:6.25em;
  --container-light-bg:#3D7EAE;       /* 白天：天空蓝 */
  --container-night-bg:#1D1F2C;       /* 夜晚：夜空深蓝 */
  --circle-container-diameter:3.375em;
  --sun-moon-diameter:2.125em;
  --sun-bg:#ECCA2F;
  --moon-bg:#C4C9D1;
  --spot-color:#959DB1;
  --circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color:#fff;
  --clouds-color:#F3FDFF;
  --back-clouds-color:#AACADF;
  --transition:.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition:.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display:block;
  font-size:var(--toggle-size);
}
.theme-btn .theme-switch,
.theme-btn .theme-switch *,
.theme-btn .theme-switch *::before,
.theme-btn .theme-switch *::after{
  box-sizing:border-box;margin:0;padding:0;
}

.theme-btn .theme-switch__container{
  width:var(--container-width);
  height:var(--container-height);
  background-color:var(--container-light-bg);
  border-radius:var(--container-radius);
  overflow:hidden;
  cursor:pointer;
  box-shadow:0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition:var(--transition);
  position:relative;
}

.theme-btn .theme-switch__container::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  box-shadow:0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius:var(--container-radius)
}

.theme-btn .theme-switch__circle-container{
  width:var(--circle-container-diameter);
  height:var(--circle-container-diameter);
  background-color:rgba(255, 255, 255, 0.1);
  position:absolute;
  left:var(--circle-container-offset);
  top:var(--circle-container-offset);
  border-radius:var(--container-radius);
  box-shadow:inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display:flex;
  transition:var(--circle-transition);
  pointer-events:none;
}

.theme-btn .theme-switch__sun-moon-container{
  pointer-events:auto;
  position:relative;
  z-index:2;
  width:var(--sun-moon-diameter);
  height:var(--sun-moon-diameter);
  margin:auto;
  border-radius:var(--container-radius);
  background-color:var(--sun-bg);
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter:drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow:hidden;
  transition:var(--transition);
}

.theme-btn .theme-switch__moon{
  transform:translateX(100%);
  width:100%;
  height:100%;
  background-color:var(--moon-bg);
  border-radius:inherit;
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition:var(--transition);
  position:relative;
}

.theme-btn .theme-switch__spot{
  position:absolute;
  top:0.75em;
  left:0.312em;
  width:0.75em;
  height:0.75em;
  border-radius:var(--container-radius);
  background-color:var(--spot-color);
  box-shadow:0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-btn .theme-switch__spot:nth-of-type(2){
  width:0.375em; height:0.375em; top:0.937em; left:1.375em;
}

.theme-btn .theme-switch__spot:nth-last-of-type(3){
  width:0.25em; height:0.25em; top:0.312em; left:0.812em;
}

.theme-btn .theme-switch__clouds{
  width:1.25em;
  height:1.25em;
  background-color:var(--clouds-color);
  border-radius:var(--container-radius);
  position:absolute;
  bottom:-0.625em;
  left:0.312em;
  box-shadow:0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition:0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-btn .theme-switch__stars-container{
  position:absolute;
  color:var(--stars-color);
  top:-100%;
  left:0.312em;
  width:2.75em;
  height:auto;
  transition:var(--transition);
}

/* —— 动作态：原版用 :checked，这里全部换成 aria-checked 后代选择器 —— */
.theme-btn[aria-checked="true"] .theme-switch__container{
  background-color:var(--container-night-bg);
}
.theme-btn[aria-checked="true"] .theme-switch__circle-container{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-btn[aria-checked="true"] .theme-switch__circle-container:hover{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}
.theme-btn .theme-switch__circle-container:hover{
  left:calc(var(--circle-container-offset) + 0.187em);
}
.theme-btn[aria-checked="true"] .theme-switch__moon{
  transform:translate(0);
}
.theme-btn[aria-checked="true"] .theme-switch__clouds{
  bottom:-4.062em;
}
.theme-btn[aria-checked="true"] .theme-switch__stars-container{
  top:50%;
  transform:translateY(-50%);
}

@media(max-width:640px){
  .theme-btn{top:0}
  .theme-btn .theme-switch{--toggle-size:14px}
}

/* ── 主题切换过渡 ──
   只在切换的 ~320ms 内由 JS 挂上 .theme-anim，避免常驻全局 transition 拖慢 hover。
   用 no-preference 正向包裹，而不是在 reduce 块里加 !important 覆盖：
   html.theme-anim * 的优先级 (0,1,0) 会压过现有 *{transition:none!important} 的 (0,0,0)，
   正向包裹从源头不生成规则，且完全不改动现有 @media(prefers-reduced-motion:reduce) 块。 */
@media (prefers-reduced-motion: no-preference){
  html.theme-anim,
  html.theme-anim *,
  html.theme-anim *::before,
  html.theme-anim *::after{
    transition:background-color .28s var(--ease),
               border-color .28s var(--ease),
               color .28s var(--ease),
               box-shadow .28s var(--ease),
               outline-color .28s var(--ease) !important;
  }

  /* 开关豁免：上面这份 !important 属性表不含 left/transform，
     会把天气开关自己的弹跳过渡顶掉、变成直切（2026-10-26 修复，与主站一致）。
     开关各部件的过渡必须原样保留：轨道/日月/月亮/星星走 --transition(.5s 弹跳)，
     滑块与云走 --circle-transition(.3s)。 */
  html.theme-anim .theme-btn .theme-switch__container,
  html.theme-anim .theme-btn .theme-switch__sun-moon-container,
  html.theme-anim .theme-btn .theme-switch__moon,
  html.theme-anim .theme-btn .theme-switch__stars-container{
    transition:var(--transition) !important;
  }
  html.theme-anim .theme-btn .theme-switch__circle-container,
  html.theme-anim .theme-btn .theme-switch__clouds{
    transition:var(--circle-transition) !important;
  }
}


/* ── 支线笔记回链（t-content）──
   深浅两套都走既有变量，不引入新色值；深色模式变量映射与打印态天然继承。 */
.ctx-link{
  margin:36px 0 0;
  padding:14px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--radius-sm);
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.ctx-link p{margin:0}
.ctx-link a{color:var(--amber-deep);font-weight:600}
.ctx-link + footer{margin-top:28px}



/* ═══════════════════════════════════════════════
   bishe 单页补充（仅 /var/www/bishe 使用）
   —— 页面主体复用站点既有类名，下面只补本页特有的
      纵向节奏与几个小元件，不引入新色值。
   ═══════════════════════════════════════════════ */

/* 页头右侧的操作区：主题按钮 + 返回主站 */
.hd-tools{
  position:absolute;top:0;right:0;
  display:flex;align-items:center;gap:8px;
}
.theme-btn{position:static;top:auto;right:auto}
.hd-link{
  display:inline-flex;align-items:center;
  font-size:13px;line-height:1.7;
  padding:5px 12px;
  color:var(--ink-2);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:transparent;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.hd-link:hover{color:var(--amber-deep);background:var(--amber-soft);border-color:var(--amber-edge)}

/* 图谱容器：SVG 自带纸面色，深色模式下不依赖 .figure img 的兜底规则 */
.figure svg{display:block;width:100%;height:auto;border-radius:6px;background:#FDF6EC;padding:10px}

/* 指标卡的补充说明（比 .d 再弱一档，用于口径注释） */
.card .d em{font-style:normal;color:var(--ink-2)}

/* 判定链路的三段时间轴 */
.tl{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:20px 0 6px;
  list-style:none;
}
.tl li{
  position:relative;
  padding:14px 16px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}
.tl li::before{
  content:"";position:absolute;left:16px;top:0;width:28px;height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--amber),var(--brown));
}
.tl .tt{display:block;font-size:12px;color:var(--mute);letter-spacing:.6px;margin-top:6px}
.tl .tv{display:block;font-size:20px;font-weight:650;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums;margin:2px 0 4px}
.tl .td{display:block;font-size:12.5px;color:var(--mute);line-height:1.7}
.tl .tv small{font-size:12px;font-weight:400;color:var(--gray);margin-left:2px}

/* 两栏并排的图（数据链路 + 分层放一起会让 460px 图过大，故单独成行） */
.figure.wide{margin-top:24px}

/* 结论清单：左对齐的短条目，比 ul 更紧凑 */
.facts{list-style:none;margin:16px 0 8px;display:grid;gap:10px}
.facts li{
  position:relative;
  padding:12px 16px 12px 40px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:14.5px;
  color:var(--body);
  line-height:1.8;
  box-shadow:var(--shadow-sm);
}
.facts li::before{
  content:"";position:absolute;left:16px;top:19px;
  width:7px;height:7px;border-radius:2px;
  background:var(--amber);transform:rotate(45deg);
}
.facts b{color:var(--ink);font-weight:650}

/* 章节末尾的落款式小注 */
.sign{
  margin:34px 0 0;
  padding-top:16px;
  border-top:1px dashed var(--line-strong);
  font-size:13px;
  color:var(--mute);
  line-height:1.9;
}

@media(max-width:760px){
  .tl{grid-template-columns:1fr}
  /* 窄屏工具行落到 nav 下方单独一行。原来 flex-start 是为「开关 + 返回主站」两件并列排的，
     但子站 8 页都没有 .hd-link（死样式），开关单独左对齐会孤零零挂在左下；
     天气开关比旧图标宽一倍（79px），右对齐才不显孤立。2026-10-26 */
  .hd-tools{position:static;margin-top:16px;justify-content:flex-end}
  header{padding-bottom:16px}
}
@media(max-width:520px){
  .facts li{padding:11px 14px 11px 34px}
  .facts li::before{left:13px;top:17px}
}

/* ═══════════════════════════════════════════════
   bishe 移动端修正：表格与图不许撑破视口
   —— 窄屏时给表格与图各自一个可横向滚动的容器，
      避免整页被撑宽（整页横向滚动是这里最糟的体验）。
   ═══════════════════════════════════════════════ */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 20px;
  border-radius:var(--radius-sm);
}
.table-scroll table{margin-bottom:0}
/* 桌面端不出现滚动条，表格宽度照旧 */
@media(min-width:761px){
  .table-scroll{overflow:visible}
}

@media(max-width:760px){
  /* 图：等比缩到容器内，绝不溢出 */
  .figure svg{width:100%;height:auto}
  .figure.wide{padding:10px 8px}
  /* 表格：允许横向滚动，列不至于被压成每行一个字 */
  table{min-width:560px}
  .table-scroll{
    box-shadow:0 1px 0 var(--line);
    border:1px solid var(--line);
    background:var(--surface);
  }
  .table-scroll table{border:none;box-shadow:none;border-radius:0}
  .table-scroll::-webkit-scrollbar{height:8px}
  /* 表格滚动提示：右侧渐隐，暗示还有内容 */
  .table-scroll{position:relative}
}

@media(max-width:520px){
  .hd-tools{gap:6px}
  .hd-link{font-size:12.5px;padding:4px 10px}
  h2{font-size:16px;margin-top:36px}
  .facts li{font-size:14px}
  .tl .tv{font-size:18px}
}

/* ═══════════════════════════════════════════════
   窄屏（≤640px）：表格改成「字段名 → 值」卡片式排列
   —— 三列表格在手机上只能横向拖动，看第三列要先滑一下；
      这里把每行改成一条竖排记录，信息一条不少，且不用横滑。
      字段名来自每个 <td> 的 data-label（由页面静态生成）。
   ═══════════════════════════════════════════════ */
@media(max-width:640px){
  .table-scroll{
    border:none;background:transparent;box-shadow:none;
    overflow:visible;border-radius:0;
  }
  .table-scroll table{
    min-width:0;display:block;border:none;background:transparent;box-shadow:none;
  }
  .table-scroll thead{display:none}
  .table-scroll tbody{display:block}
  .table-scroll tr{
    display:block;
    margin-bottom:12px;
    padding:12px 15px 10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-left:3px solid var(--amber);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);
  }
  .table-scroll td{
    display:block;
    padding:0;
    border-bottom:none;
    font-size:14px;
    line-height:1.75;
    word-break:break-word;
  }
  .table-scroll td + td{margin-top:7px}
  .table-scroll td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:11px;
    letter-spacing:.4px;
    color:var(--mute);
    margin-bottom:1px;
  }
  /* 第一列当卡片标题 */
  .table-scroll td:first-child{
    font-size:14.5px;
    font-weight:650;
    color:var(--ink);
    letter-spacing:0;
    margin-bottom:5px;
  }
  .table-scroll td:first-child::before{display:none}
  .table-scroll td.cell-status{padding-top:2px}
  .table-scroll tr:hover td{background:transparent}
}

/* ═══════════════════════════════════════════════════════════════
   多页面站点（方案 A，2026-10-23）新增样式
   沿用上方暖色变量，不引入第二套调色板
   ═══════════════════════════════════════════════════════════════ */

/* ── 顶部导航：8 个页面，窄屏收成两行 ── */
nav a[aria-current="page"]{background:linear-gradient(180deg,var(--nav-on-1),var(--nav-on-2));border-color:transparent;color:var(--nav-on-ink);box-shadow:var(--nav-on-shadow)}
nav a[aria-current="page"]::after{opacity:1}

/* ── 页首面包屑 ── */
.crumb{font-size:12.5px;color:var(--mute);letter-spacing:.3px;margin-top:14px}
.crumb a{color:var(--mute);text-decoration:none;border-bottom:1px dotted var(--line-strong)}
.crumb a:hover{color:var(--amber-deep);border-bottom-color:var(--amber-deep)}
.crumb span{margin:0 6px;opacity:.6}

/* ── 首页：双按钮 ── */
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 8px}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 20px;border-radius:var(--radius-pill);
  font-size:14.5px;font-weight:600;letter-spacing:.3px;
  text-decoration:none;border:1px solid var(--line-strong);
  color:var(--ink);background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--ink)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-sm);transition-duration:.06s}
.btn-primary{
  background:linear-gradient(180deg,var(--nav-on-1),var(--nav-on-2));
  border-color:transparent;color:var(--nav-on-ink);
  box-shadow:var(--nav-on-shadow);
}
.btn-primary:hover{color:var(--nav-on-ink);box-shadow:var(--shadow-lg)}
.btn:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

/* ── 「本页状态」提示条：待补充 / 预期 vs 实测 ── */
.status{
  display:flex;gap:10px;align-items:flex-start;
  margin:20px 0 24px;padding:12px 16px;
  font-size:13.5px;line-height:1.7;color:var(--ink-2);
  background:var(--surface-2);border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm);
}
.status::before{
  content:"待补充";flex:none;
  font-size:11.5px;font-weight:700;letter-spacing:.6px;
  color:var(--amber-deep);background:var(--amber-soft);
  border:1px solid var(--amber-edge);border-radius:var(--radius-pill);
  padding:2px 9px;margin-top:1px;
}
.status.done::before{content:"已定"}

/* ── 两栏对照（双 MCU 分工等） ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.duo > div{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:18px 20px;box-shadow:var(--shadow-sm);
}
.duo h3{margin:0 0 8px;font-size:14.5px}
.duo ul{font-size:13.5px;line-height:1.8;margin:0 0 0 1.1em}
.duo li{margin-bottom:5px}

/* ── 占位框：图表 / 截图位 ── */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:190px;margin:18px 0 10px;padding:24px;
  text-align:center;font-size:13.5px;color:var(--mute);line-height:1.7;
  background:
    repeating-linear-gradient(45deg,transparent 0 9px,var(--surface-2) 9px 18px),
    var(--surface);
  border:1px dashed var(--line-strong);border-radius:var(--radius-md);
}
.ph b{color:var(--ink-2);font-size:14px}
.ph small{font-size:12px;color:var(--mute);opacity:.85}

/* ── 卡片网格（实验分组等） ── */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:20px 0}

/* ── 步骤流程条（横向；子元素用 div，避免与 ul/li 默认样式冲突） ── */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0 8px}
.steps > div{
  counter-increment:st;position:relative;
  padding:14px 12px 12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
  font-size:13px;line-height:1.7;color:var(--ink-2);
  word-break:keep-all;
}
.steps > div::before{
  content:counter(st);display:block;
  font-family:var(--num);font-size:12px;font-weight:700;
  color:var(--amber-deep);margin-bottom:6px;letter-spacing:.5px;
}
.steps > div > b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}
.steps > div > small{display:block;font-size:12px;line-height:1.75;color:var(--mute)}
.steps > div::after{
  content:"";position:absolute;right:-7px;top:50%;
  width:7px;height:1px;background:var(--line-strong);
}
.steps > div:last-child::after{display:none}

/* ── 状态机分支框 ── */
.sm{
  margin:18px 0;padding:18px 20px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  font-family:var(--mono);font-size:13px;line-height:1.95;
  color:var(--ink-2);overflow-x:auto;white-space:pre;
  /* 右侧渐隐，提示还有内容可以横向滑动 */
  background-image:linear-gradient(to right,transparent calc(100% - 24px),var(--surface));
  background-repeat:no-repeat;
}
.sm .ok{color:var(--amber-deep);font-weight:700}
.sm .no{color:var(--gray)}

/* ── 关键结论条（页内小结） ── */
.takeaway{
  margin:22px 0 6px;padding:16px 20px;
  background:var(--amber-soft);border:1px solid var(--amber-edge);
  border-left:3px solid var(--amber);border-radius:var(--radius-sm);
  font-size:14px;line-height:1.8;color:var(--ink);
}
.takeaway b{color:var(--amber-deep)}

/* ── 页内接力导航（上一页 / 下一页） ── */
.pager{
  display:flex;justify-content:space-between;gap:12px;
  margin:44px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;flex-wrap:wrap;
}
.pager a{
  color:var(--brown);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.pager a:hover{color:var(--amber-deep)}
.pager a.next{margin-left:auto}

/* ── 首页页面索引（8 张卡片） ── */
.site-map{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0 8px}
.site-map a{
  display:block;padding:16px 18px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.site-map a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.site-map a:active{transform:translateY(-1px) scale(.985);box-shadow:var(--shadow-sm);transition-duration:.06s}
.site-map a:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.site-map .n{
  font-family:var(--num);font-size:11.5px;color:var(--num-ink);
  letter-spacing:1px;margin-bottom:4px;
}
.site-map .t{display:block;font-size:15px;font-weight:650;color:var(--ink);margin-bottom:4px}
.site-map .d{display:block;font-size:13px;color:var(--mute);line-height:1.7}

/* ── 首页 hero 区收窄一点，让首屏更稳 ── */
.hero-lead{font-size:17px}

@media(max-width:760px){
  .duo{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .site-map{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps > div::after{display:none}
  .sm{font-size:12px;padding:14px 14px}
  .cta .btn{flex:1 1 auto;justify-content:center}
}

/* ── 参考文献序号（方案 A · about 页） ── */
.ref-num{color:var(--mute);font-family:var(--num);font-size:12.5px;margin-right:2px}
.refs li:target{background:var(--amber-soft);border-radius:4px}

/* ── 卡片内的待补充小标（单行，带小圆点，区分于表格里的 .status 徽标） ── */
.status-line{
  display:flex;align-items:center;gap:7px;
  margin:10px 0 0;font-size:12.5px;color:var(--mute);
}
.status-line::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);
}
/* ── 滚动进入淡入（配合 IntersectionObserver；无 JS 时不生效） ── */
html.rise-ready .rise{opacity:0;transform:translateY(10px)}
html.rise-ready .rise.rise-in{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
@media(prefers-reduced-motion:reduce){
  html.rise-ready .rise{opacity:1;transform:none}
}

/* ── 窄屏（≤760px）细化：状态机与表格在手机上换一种呈现方式 ── */
@media(max-width:760px){
  /* 状态机 pre：窄屏禁止横向滚动，允许换行，字号再降一档 */
  .sm{font-size:11.5px;line-height:1.8;padding:14px 12px}
  /* 流程条：手机上改为上下堆叠，箭头朝下 */
  .steps{grid-template-columns:1fr;gap:8px}
  .steps > div{padding:12px 14px}
  .steps > div::after{
    left:50%;right:auto;top:auto;bottom:-8px;
    width:1px;height:8px;transform:translateX(-.5px);
  }
  .steps > div:last-child::after{display:none}
}

/* ══════════════════════════════════════════════════
   窄屏兜底（≤640px）：任何元素都不许超出视口宽度
   —— 上面历史样式里有针对旧页面的固定宽度/负边距，
      对新站点的卡片、示意图、按钮也一并兜住。
   ══════════════════════════════════════════════════ */
@media(max-width:640px){
  /* 状态机分支框：ASCII 图竖线必须对齐，不能换行，只能整体等比缩放。
     text-scale 由页面脚本按「最长行宽 ÷ 可用宽度」写进 --sm-scale。 */
  .sm{
    font-size:11px;line-height:1.65;padding:10px 8px;
    overflow-x:hidden;white-space:pre;
  }
  .sm code{
    display:block;text-align:left;
    white-space:pre;transform-origin:top left;
    transform:scale(var(--sm-scale,1));
    transform-origin:top left;
  }
  /* 所有示意图与内嵌 SVG 等比缩放 */
  .figure,.figure.wide,.figure img,.figure svg{max-width:100%}
  .figure.wide{padding:10px 8px}
  .figure img,.figure svg{width:100%;height:auto;display:block}
  /* 指标卡容器（首页三张延迟卡）：窄屏改单列 */
  .tl{grid-template-columns:1fr}
  /* 卡片、facts、指标卡、按钮组：一律收进容器 */
  .card,.facts li,.meta,.takeaway,.warn,.note{
    max-width:100%;box-sizing:border-box;overflow-wrap:break-word;
  }
  /* facts 条：左侧图标位固定，右侧留足内边距，文字不越界 */
  .facts li{padding-left:34px;padding-right:18px}
  .facts li::before{left:13px}
  .cta{flex-direction:column}
  .cta .btn{width:100%;justify-content:center}
  .site-map{grid-template-columns:1fr}
}


/* ══════════════════════════════════════════════════
   窄屏兜底（≤640px）：一切内容都收在视口内，绝不横向滚动
   —— 上面的历史样式里有针对旧笔记页的负边距/固定宽度，
      对新站点的卡片、示意图、按钮不适用，这里统一兜住。
   ══════════════════════════════════════════════════ */
@media(max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  .wrap,.wrap *{box-sizing:border-box}
  /* 任何可能出血的元素都收回来 */
  .lead,.note,.takeaway,.warn,.figure,.figure.wide,.meta,.card,.metrics,.facts,.cta,.site-map,.steps,.grid2,.duo,.table-scroll,.sm,.pager{
    margin-left:0;margin-right:0;width:auto;max-width:100%;
  }
  /* 首屏结论框按整宽重排 */
  .lead{padding:18px 18px;font-size:15px;line-height:1.85}
  /* 示意图等比缩放 */
  .figure img,.figure svg{width:100%;height:auto;display:block}
  .figure{padding:12px 10px 8px}
  .figure.wide{padding:10px 8px}
  /* 指标卡改单列 */
  .metrics{grid-template-columns:1fr;gap:12px;margin-top:20px}
  /* facts 条：左侧图标位固定，右侧留足内边距 */
  .facts li{padding-left:34px;padding-right:18px}
  .facts li::before{left:13px}
  /* 按钮组竖排整宽 */
  .cta{flex-direction:column}
  .cta .btn{width:100%;justify-content:center}
  /* 站点导览单列 */
  .site-map{grid-template-columns:1fr}
  /* 状态机分支框：按最长行收缩字号，尽量不横滑 */
  .sm{font-size:12px;line-height:1.75;padding:12px 10px;overflow-x:auto}
}

/* ═══════════════════════════════════════════════════════════════
   导航交互增强（2026-10-24）
   起因：点导航只有「文字换个颜色」，看不出点中了哪一项，也没有位移反馈。
   做法：① 一个实体胶囊 .nav-pill 承载「当前页」，按 aria-current="page" 定位，
         并由 assets/nav.js 让它在换页时从「上一次点的位置」滑到当前位置；
        ② 悬停给一条琥珀下划预告线，按下轻微缩放 —— 点击有明确的触觉反馈；
        ③ 无 JS / 脚本失败时退回原来的渐变胶囊（nav a[aria-current]），完全可用；
        ④ prefers-reduced-motion 时胶囊直接跳位，不做过渡。
   颜色全部复用既有变量（--nav-on-1/2、--nav-on-ink、--nav-on-shadow、
   --nav-bar-glow），深浅两套主题自动跟随，不在此处另起色值。
   ═══════════════════════════════════════════════════════════════ */

nav{position:relative}

/* 实体胶囊：由 assets/nav.js 创建、定位；未加 .nav-pill-live 时无过渡（首帧直接就位，不闪） */
.nav-pill{
  position:absolute;left:0;top:0;
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg,var(--nav-on-1),var(--nav-on-2));
  box-shadow:var(--nav-on-shadow);
  pointer-events:none;
  opacity:0;
  z-index:0;
  will-change:transform,width,height;
  transition:none;
  /* 兜底底色：万一 linear-gradient 在这台机器/这个浏览器上没画出来（截图里出现过
     「白字压在浅底上、胶囊看不见」），至少还有一块实色底托住 --nav-on-ink 的白字。
     选 --nav-on-2 的深端（#8B5E3C 系）而不是浅端，保证白字对比度 >= 4.5:1。 */
  background-color:var(--nav-on-2);
}
.nav-pill.nav-pill-live{
  transition:transform .36s var(--ease),width .36s var(--ease),height .36s var(--ease),opacity .18s var(--ease);
}
/* 胶囊正下方的琥珀光带（原来是每个链接各自的 ::after，现在只留一条跟着胶囊走） */
.nav-pill::after{
  content:"";position:absolute;left:11px;right:11px;bottom:-9px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--amber),var(--amber-2),var(--brown));
  box-shadow:var(--nav-bar-glow);
}

/* JS 接管后：链接自己的底色交还给胶囊，文字浮到胶囊之上 */
nav.nav-pill-on a{
  position:relative;z-index:1;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
nav.nav-pill-on a::after{content:none}
nav.nav-pill-on a[aria-current="page"]{
  background:transparent;border-color:transparent;box-shadow:none;
  color:var(--nav-on-ink);
  font-weight:600;
}
nav.nav-pill-on a:not([aria-current="page"]):hover{
  background:var(--amber-soft);
  border-color:var(--amber-edge);
  color:var(--amber-deep);
}

/* 悬停：文字下方一条琥珀下划线，从中间展开（当前页不画，避免与胶囊光带重复） */
nav a{position:relative}
nav a::before{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;
  background:var(--amber);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .22s var(--ease);
}
nav a:hover::before{transform:scaleX(1)}
nav.nav-pill-on a[aria-current="page"]::before{content:none}
nav a:focus-visible{outline:2px solid var(--brown);outline-offset:2px}

/* 按下：轻微回缩，给出「确实按到了」的反馈 */
nav a:active{transform:translateY(0) scale(.96);transition-duration:.06s}

/* 触屏设备没有真正的悬停，别让 hover 样式粘住 */
@media(hover:none){
  nav a:hover::before{transform:scaleX(0)}
  nav.nav-pill-on a:not([aria-current="page"]):hover{
    background:transparent;border-color:transparent;color:var(--ink-2);
  }
}

/* 减少动效：胶囊不做滑动，按下也不缩放 */
@media(prefers-reduced-motion:reduce){
  .nav-pill, .nav-pill.nav-pill-live{transition:opacity .01s linear}
  .btn:active,.site-map a:active{transform:none}
  nav a:active{transform:none}
  nav a::before{transition:none}
}

/* 打印：胶囊是屏幕上的装饰，纸上不要；当前页靠浏览器/无 JS 时的渐变底表达 */
@media print{
  .nav-pill{display:none}
  nav a::before{display:none}
  /* 磨砂场景层是 fixed + filter 的装饰层：打印时既没意义又会按页重复渲染，
     还要额外扣一层滤镜开销。纸面统一纯白字黑。2026-10-26 与主站对齐。 */
  body::before{display:none}
  body{background:#fff;color:#000}
}