:root{
  /* ── 调色板（统一在这里调）──
     2026-10-26 适配天气开关：底/面从暖米白整体微微调冷（带一点天空蓝调的纸感），
     文字与强调色不动，对比度只升不降。 */
  --bg:#F2F2EF;            /* 页面底：冷纸白（微天空蓝调） */
  --bg-grad:#F9ECD2;       /* 顶部渐隐：奶油暖白（浅色=日光天空，渐到冷纸白；深色对应夜空） */
  --bg-fade:78vh;          /* 渐变带长度：浅色拉到近整屏才读得出「日光→纸面」；深色走默认 320px */
  --frost:url(#frost-texture-strong);  /* 浅色底要浓颗粒才读得出磨砂；深色沿用原参数 */
  /* 页面场景背景（body::before 整层）。浅色主题 = uiverse chase2k25/giant-pug-85 的
     金→蓝→紫 145° 渐变叠磨砂颗粒；原色 alpha 只有 .95 太压字，按 .55 叠在纸白底上，
     既保住渐变方向与三色，又让正文/辅助字仍过 AA。深色主题在下面单独给一份夜空场景。 */
  /* 浅色场景：giant-pug-85 的金→蓝→紫渐变 + 纸白底（不叠琥珀暖雾——暖黄压在冷调渐变上会发浑） */
  --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);
  --surface:#FAFAF7;       /* 卡片面：冷白 */
  --surface-2:#F0F1ED;     /* 次级面：浅冷灰白 */
  --surface-3:#EAEBE5;     /* 代码 / 表头底 */
  --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 达标，勿再调浅） */
  --mute-on-scene:#5C3F26; /* 直接落在渐变磨砂场景层上的弱化文字：--mute 在彩色底只有 3.0–3.3:1，
                              改用这个深一档的棕（场景层上 5.3:1 起） */
  --nav-ink:#533C26;       /* 导航未选中项：--ink-2 在场景层 4.0:1 不达标，改用此色（5.7:1 起） */
  --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,.30);   /* 页面顶部的大范围暖雾（浅色=日光晕，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);     /* 参考文献虚线下划线 */
}

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

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:
    radial-gradient(900px 420px at 50% -160px,var(--warm-haze),transparent 70%),
    linear-gradient(180deg,var(--bg-grad) 0%,var(--bg) 320px);
  background-color:var(--bg);
  background-attachment:fixed;
  line-height:1.8;
  font-size:16px;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── 磨砂颗粒背景层（uiverse chase2k25/giant-pug-85 移植，颗粒滤镜版）──
   组件原版是金→蓝→紫渐变整块滤噪；这里保留站点自身的主题渐变
   （暖雾 + 顶部渐隐，变量随 data-theme 自动切换），只移植其招牌的
   SVG 噪声滤镜（feTurbulence + feSpecularLighting + feBlend overlay，
   定义由 site.js ⑥ 注入，id=frost-texture）。滤镜只挂在本层，
   不挂 body——挂 body 会把全部文字内容一起"磨砂"掉。
   z-index:-1 垫底；颗粒若过强可在此层加 opacity 微调。 */
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-on-scene);letter-spacing:.4px}

nav{margin-top:20px;display:flex;gap:8px;font-size:14.5px;flex-wrap:wrap}
nav a{
  color:var(--nav-ink);  /* 场景层（金蓝紫渐变磨砂）上实测 5.7:1；--ink-2 在彩色底只有 4.0，不能直接用 */
  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 保持原样。 */
/* 悬浮横幅（uiverse light-cheetah-20 的骨架 + 站点自家琥珀/棕配色）：
   浅色=深琥珀→暖棕渐变白字（最差 4.9:1）；深色在暗色主题块里换成
   导航选中胶囊同款「琥珀底+深棕字」（8:1），全站观感统一 */
:root{
  --banner-1:#A06328;
  --banner-2:#7A4A1E;
  --banner-text:#FFFFFF;
  --banner-text-dim:rgba(255,255,255,.92);
  --banner-text-faint:rgba(255,255,255,.85);
  --banner-dot:rgba(255,255,255,.5);
  --banner-pill-bg:rgba(255,255,255,.16);
  --banner-pill-border:rgba(255,255,255,.45);
  --banner-shadow:0 6px 16px -6px rgba(140,90,40,.55);
  --banner-shadow-hover:0 10px 22px -6px rgba(140,90,40,.65);
  --btn-shadow:0 4px 12px -4px rgba(140,90,40,.5);
  --btn-shadow-hover:0 8px 18px -6px rgba(140,90,40,.6);
}
a.note{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:34px 22px 19px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  margin:16px 0 14px;
  box-shadow:var(--shadow-md);
  position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease),background-color .3s var(--ease);
}
/* 元信息行 = 悬浮在卡顶的蓝色渐变横幅（uiverse 卡的 banner 块） */
a.note .m{
  position:absolute;
  left:14px;right:14px;top:-13px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 10px;
  padding:5px 12px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--banner-1),var(--banner-2));
  box-shadow:var(--banner-shadow);
  font-size:12px;
  color:var(--banner-text-dim);
  letter-spacing:.3px;
  transition:box-shadow .25s var(--ease);
}
a.note:hover,
a.note:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--shadow-xl);
  border-color:var(--line-strong);
}
a.note:hover .m,
a.note:focus-visible .m{box-shadow:var(--banner-shadow-hover)}
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），这里只管行内元素在蓝底上的呈现 */
/* 「2026-10-14」这类纯日期：等宽 + 横幅主文字色，读起来像档案索引 */
a.note .m > span:not([class]){
  font-family:var(--num);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1px;
  color:var(--banner-text);
}
/* 标签靠右，日期留在左端 —— 一眼能看出「哪天空、归哪类」 */
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(--banner-text-faint);
}

/* ── 标签 ── */
.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)}
/* 横幅里的标签：半透明 pill（浅色=白、深色=深棕，跟随横幅文字色），覆盖上面的默认/hover 琥珀样式（含 .amber 变体） */
a.note .m .tag,
a.note:hover .m .tag,
a.note:focus-visible .m .tag,
.tile-kicker .tag,
.tile:hover .tile-kicker .tag,
.tile:focus-visible .tile-kicker .tag,
.lead-kicker .tag,
.lead-story:hover .lead-kicker .tag,
.lead-story:focus-visible .lead-kicker .tag{
  background:var(--banner-pill-bg);
  border-color:var(--banner-pill-border);
  color:var(--banner-text);
  font-weight:500;
}
.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:32px 14px 14px;margin:14px 0 13px}
  a.note .t{font-size:15.5px}
  a.note .x{font-size:13.5px;line-height:1.75}
  a.note .m{left:10px;right:10px}
  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 用户明确要求保留弹跳）。
     上一条 `*{transition:none!important}` 优先度 (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"]{
  /* ── 底 / 面：层级方向与浅色一致（卡片比页面亮）──
     2026-10-26 适配天气开关：向开关夜空 #1D1F2C 系靠（深蓝黑），
     文字与强调色不动；页面底更暗更中性，对比度只升不降。 */
  --bg:#16171F;             /* 页面底：夜空近黑（对 --ink 约 16:1） */
  --bg-grad:#1C1E29;        /* 顶部渐隐：比 --bg 亮一档 */
  --surface:#1E2029;        /* 卡片面 */
  --surface-2:#252733;      /* 次级面 */
  --surface-3:#2C2F3D;      /* 代码 / 表头底 */
  --surface-hover:#232531;  /* 卡片 hover 面 */
  --row-hover:#212330;      /* 表格行 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-ink:#CDB79A;       /* 深色导航未选中项：沿用原 --ink-2 的深色值（夜空场景层上 7.4:1） */
  /* 直接坐在深色场景层上的弱化文字：浅色给的是深棕 #5C3F26，压在夜空底上只有 ~1.4:1（几乎不可见），
     深色必须反向给浅色值。取 --body 档 #DFCEB8（对夜空底 9.6–11.6:1）——用户两次反馈偏暗，
     5:1 虽过 AA 但叠上磨砂颗粒的明暗扰动后观感仍吃力，直接提到正文级亮度。 */
  --mute-on-scene:#DFCEB8;
  --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);

  /* ── 暖光晕（跟随提亮后的琥珀 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);

  /* ── 卡顶横幅/按钮：换成导航选中胶囊同款琥珀底深棕字（#2A1B0C on #E0AB6A 8:1） ── */
  --frost:url(#frost-texture);   /* 深色底原颗粒已看得见，保持原强度，不受浅色加强影响 */
  /* 深色场景：沿用「夜空」构图（顶部暖雾 + 渐隐到深底），不套 giant-pug 的金蓝紫渐变 */
  --scene-bg:
    radial-gradient(1200px 560px at 50% -200px,var(--warm-haze),transparent 72%),
    linear-gradient(180deg,var(--bg-grad) 0%,var(--bg) var(--bg-fade,320px)),
    var(--bg);
  --banner-1:#F5CB93;
  --banner-2:#E0AB6A;
  --banner-text:#2A1B0C;
  --banner-text-dim:rgba(42,27,12,.92);
  --banner-text-faint:rgba(42,27,12,.85);
  --banner-dot:rgba(42,27,12,.5);
  --banner-pill-bg:rgba(42,27,12,.14);
  --banner-pill-border:rgba(42,27,12,.40);
  --banner-shadow:0 6px 16px -6px rgba(240,185,107,.35);
  --banner-shadow-hover:0 10px 22px -6px rgba(240,185,107,.45);
  --btn-shadow:0 4px 12px -4px rgba(240,185,107,.35);
  --btn-shadow-hover:0 8px 18px -6px rgba(240,185,107,.45);

  /* ── 阴影：深底上暖棕阴影不可见，改纯黑 ── */
  --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}

/* ── 主题开关（uiverse 天气开关） ──
   移植自 uiverse.io/Galahhad/strong-squid-82（MIT License）：白天天空蓝轨道 + 云，
   夜晚夜空 + 星 + 月，开 = 深色、关 = 浅色。
   结构（.theme-switch 一整棵）由 site.js ① 注入，脚本未执行时整颗不显示，避免死控件。
   原版用 checkbox:checked 驱动，这里没有 checkbox，全部状态由
   [aria-checked="true"] 后代选择器驱动。
   定位在 header 右上角：header 已有 position:relative，absolute 不占文档流，
   不会打乱 h1 / p / nav 的现有排版。
   减少动效：全局 @media(prefers-reduced-motion:reduce) 的
   *{transition:none!important} 已覆盖开关全部过渡，切换即直切。 */
.theme-btn{
  display:none;
  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）──
   变量与结构照搬原版，仅三处适配：
   ① 尺寸体系是 em：--toggle-size 16px 时轨道 90×40（原版 30px 太大）；
   ② 状态选择器 :checked 换成 .theme-btn[aria-checked="true"] 后代选择器；
   ③ 窄屏降到 14px（78.75×35），避免盖住标题。 */
.theme-btn .theme-switch{
  --toggle-size:16px;                 /* 尺寸基准：轨道 5.625em×2.5em = 90×40 */
  --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);       /* em 体系的尺寸开关：后代全部继承 */
}
.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 拼出云群 */
  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%);
}

/* 窄屏降到 14px（轨道 78.75×35），避免开关盖住标题 */
@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 .32s var(--ease),
               border-color .32s var(--ease),
               color .32s var(--ease),
               box-shadow .32s var(--ease),
               outline-color .32s 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}

@media print{
  body{background:#fff;color:#000}
  body::before{display:none}   /* 打印不要磨砂颗粒层 */
  .wrap{max-width:none;padding:0}
  nav,.backlink{display:none}
  a.note,.note,.figure,.card,table,blockquote{box-shadow:none}
  a.note::before,a.note::after{display:none}
  a{color:#000;text-decoration:underline}
  .ctx-link{box-shadow:none;border-left-color:#000}
}

/* ═══════════════════════════════════════════════════════════════════════
   v3 改版（2026-10-23）：杂志式首页 / 阅读页右侧目录 / 卡片滚动浮现
   原则：只追加，不改上面任何既有规则；颜色一律走既有变量，深色模式自动继承。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ① 杂志式首页 ───────────────────────────────────────────────── */

/* 头条：通栏大卡，序号 + 栏目行 + 大标题 + 导语 */
.lead-story{
  display:block;
  position:relative;
  padding:44px 32px 28px;
  margin-top:16px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  text-decoration:none;
  color:inherit;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .3s var(--ease);
}
.lead-story:hover,
.lead-story:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-xl);
  border-color:var(--amber-edge);
}
.lead-story:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

/* kicker = 悬浮在卡顶的蓝色渐变横幅（与 a.note .m 同款） */
.lead-kicker{
  position:absolute;
  left:16px;right:16px;top:-13px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:5px 12px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--banner-1),var(--banner-2));
  box-shadow:var(--banner-shadow);
  font-size:12px;color:var(--banner-text-dim);letter-spacing:.3px;
  transition:box-shadow .25s var(--ease);
}
.lead-story:hover .lead-kicker,
.lead-story:focus-visible .lead-kicker{box-shadow:var(--banner-shadow-hover)}
.lead-kicker > span:not([class]){
  font-family:var(--num);
  font-variant-numeric:tabular-nums;
  color:var(--banner-text);
}
.lead-index{
  font-family:var(--num);font-size:13px;font-weight:600;
  letter-spacing:1.2px;color:var(--banner-text-faint);
}
.lead-dot{width:3px;height:3px;border-radius:50%;background:var(--banner-dot);flex:none}

.lead-title{
  font-size:clamp(21px,3.2vw,27px);
  line-height:1.42;
  font-weight:650;
  color:var(--ink);
  letter-spacing:.1px;
  text-wrap:balance;
  transition:color .2s var(--ease);
}
.lead-story:hover .lead-title,
.lead-story:focus-visible .lead-title{color:var(--brown)}

.lead-deck{
  margin:12px 0 0;
  max-width:60ch;
  font-size:15px;
  line-height:1.85;
  color:var(--ink-2);
  text-wrap:pretty;
}
.lead-more{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:18px;
  padding:9px 16px;
  border-radius:8px;
  background:var(--banner-1);
  box-shadow:var(--btn-shadow);
  font-size:12px;font-weight:600;letter-spacing:.4px;
  color:var(--banner-text);
  transition:box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.lead-more .arw{transition:transform .25s var(--ease)}
.lead-story:hover .lead-more .arw{transform:translateX(4px)}
.lead-story:hover .lead-more{background:var(--banner-2);box-shadow:var(--btn-shadow-hover)}

/* 次级栏目：两列杂志栅格（顶部留白给悬浮横幅） */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-top:26px}

.tile{
  display:flex;
  flex-direction:column;
  position:relative;
  padding:34px 20px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease),background-color .3s var(--ease);
}
.tile:hover,
.tile:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--line-strong);
  background:var(--surface-hover);
}
.tile:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

/* kicker = 悬浮在卡顶的蓝色渐变横幅（与 a.note .m 同款） */
.tile-kicker{
  position:absolute;
  left:12px;right:12px;top:-12px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:4px 11px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--banner-1),var(--banner-2));
  box-shadow:var(--banner-shadow);
  font-size:11.5px;color:var(--banner-text-dim);letter-spacing:.3px;
  transition:box-shadow .25s var(--ease);
}
.tile:hover .tile-kicker,
.tile:focus-visible .tile-kicker{box-shadow:var(--banner-shadow-hover)}
/* 日期走等宽字，延续"档案索引"的观感 */
.tile-kicker > span:not([class]){
  font-family:var(--num);font-variant-numeric:tabular-nums;color:var(--banner-text);
}
.tile-n{
  margin-left:auto;
  font-family:var(--num);font-weight:600;
  letter-spacing:1px;color:var(--banner-text-faint);
}
.tile-title{
  font-size:15.5px;line-height:1.58;font-weight:650;color:var(--ink);
  text-wrap:pretty;
  transition:color .2s var(--ease);
}
.tile:hover .tile-title,
.tile:focus-visible .tile-title{color:var(--brown)}
.tile-deck{
  margin:9px 0 0;
  font-size:13.5px;line-height:1.78;color:var(--ink-2);
  text-wrap:pretty;
}

/* 项目带：一大一小，做出栏目的轻重对比 */
.strip{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-top:26px}
.tile.lg{padding:40px 26px 22px}
.tile.lg .tile-title{font-size:19px;line-height:1.5}
.tile.lg .tile-deck{font-size:14px}

@media(max-width:700px){
  .mosaic,.strip{grid-template-columns:1fr}
  .lead-story{padding:40px 20px 20px}
  .lead-deck{margin-top:10px;font-size:14px;line-height:1.8}
  .tile{padding:32px 16px 16px}
  .tile.lg{padding:36px 20px 18px}
  .tile.lg .tile-title{font-size:16.5px}
}

/* ── ② 阅读页：正文 + 右侧目录 ────────────────────────────────────
   结构（5 篇笔记页）：article.post > .post-head / .toc / .post-main
   1100px 以下不显示目录：短文章线性读即可，避免把正文往下推。 */

.post{display:block}
.toc{display:none}

@media(min-width:1100px){
  /* 正文 720 + 间距 64 + 目录 232 = 1016，加上 wrap 左右内边距 48 */
  .wrap:has(.post){max-width:1064px}

  .post{
    display:grid;
    grid-template-columns:minmax(0,1fr) 232px;
    grid-template-areas:"head head" "body toc";
    column-gap:64px;
    align-items:start;
  }
  .post-head{grid-area:head;min-width:0}
  .post-main{grid-area:body;min-width:0}
  .toc{
    grid-area:toc;
    display:block;
    position:sticky;
    top:32px;
    align-self:start;
    max-height:calc(100vh - 64px);
    overflow:auto;
    padding-right:2px;
  }
}

.toc-t{
  margin:0 0 14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:2.4px;
  color:var(--num-ink);
}
.toc-list{
  list-style:none;
  margin:0;
  padding:0;
  border-left:1px solid var(--line);
  counter-reset:toc;
}
.toc-list li{margin:0;counter-increment:toc}
.toc-list a{
  display:block;
  margin-left:-1px;
  padding:6px 0 6px 13px;
  border-left:2px solid transparent;
  font-size:13px;
  line-height:1.62;
  color:var(--mute);
  text-decoration:none;
  transition:color .2s var(--ease),border-color .2s var(--ease),padding-left .2s var(--ease);
}
/* 目录序号：装饰性索引，与卡片序号同一套等宽字 */
.toc-list a::before{
  content:counter(toc,decimal-leading-zero);
  margin-right:8px;
  font-family:var(--num);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--num-ink);
}
.toc-list a:hover{color:var(--amber-deep);padding-left:16px}
.toc-list a.on{
  color:var(--ink);
  font-weight:600;
  border-left-color:var(--amber);
}
.toc-list a.on::before{color:var(--amber-deep)}

/* ── ③ 卡片滚动浮现 ──────────────────────────────────────────────
   JS 给元素加 .reveal 后才隐藏，脚本没跑/被禁用时内容照常可见。
   用 animation + backwards 而不是 transition：结束后不留 transform，
   不干扰卡片自身的 hover 位移。 */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0}
  .reveal.in{
    opacity:1;
    animation:reveal-up .66s var(--ease) backwards;
    animation-delay:calc(var(--d,0) * 70ms);
  }
}
@keyframes reveal-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ── ④ 打印：目录与动效一律不参与 ── */
@media print{
  .toc{display:none!important}
  .reveal,.reveal.in{opacity:1!important;animation:none!important}
  .lead-story,.tile{box-shadow:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   v4.1 增补（2026-10-25）：文章底部导航 / 代码块复制按钮
   原则同上：只追加，不改上面任何既有规则；颜色一律走既有变量，深色模式自动继承。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ⑤ 文章底部导航（上一篇 / 下一篇 / 返回列表）──
   结构放在 .post-main 末尾：≥1100px 时落在正文栏内，宽度与正文一致；
   深浅两套与打印态全部走既有变量。 */
.post-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:36px 0 0;
}
.post-nav a{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease),background-color .3s var(--ease);
}
.post-nav a:hover,
.post-nav a:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--line-strong);
  background:var(--surface-hover);
}
.post-nav a:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.post-nav .pn-k{
  font-size:11px;
  font-weight:600;
  letter-spacing:1.2px;
  color:var(--mute);
}
.post-nav .pn-t{
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.post-nav a:hover .pn-t,
.post-nav a:focus-visible .pn-t{color:var(--brown)}
.post-nav .next{text-align:right}
@media(max-width:640px){
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left}
}

/* ── ⑥ 代码块复制按钮 ──
   JS 把每个 <pre> 包进 .copywrap（相对定位）并在右上角挂按钮；
   脚本未执行时没有按钮，pre 排版不变。触屏没有 hover，按钮常显。 */
.copywrap{position:relative}
.copy-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:1;
  padding:4px 12px;
  font-size:12px;
  font-family:inherit;
  letter-spacing:.5px;
  color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:6px;
  cursor:pointer;
  opacity:0;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .2s var(--ease),color .2s var(--ease),
             background-color .2s var(--ease),border-color .2s var(--ease);
}
.copywrap:hover .copy-btn,
.copy-btn:focus-visible,
.copy-btn.ok{opacity:1}
.copy-btn:hover{color:var(--amber-deep);background:var(--amber-soft);border-color:var(--amber-edge)}
.copy-btn:focus-visible{outline:2px solid var(--brown);outline-offset:2px}
.copy-btn.ok{color:var(--amber-deep);background:var(--amber-soft);border-color:var(--amber-edge)}
@media(hover:none){.copy-btn{opacity:1}}
@media print{.copy-btn{display:none}}

/* ═══════════════════════════════════════════════════════════════════════
   v4.2 改版（2026-10-27）：顶部导航条
   页头从「大标题 hero + 下方导航胶囊」改为吸顶悬浮胶囊条：
   左侧站名 + 副标题小字，右侧导航链接 + 主题开关，滚动时吸顶磨砂。
   原则同前：只追加，不改上面任何既有规则；颜色一律走既有变量，深色模式自动继承。
   ═══════════════════════════════════════════════════════════════════════ */

/* 内容区顶距收紧：上边距由导航条自己提供 */
.wrap{padding-top:14px}
@media(max-width:640px){.wrap{padding-top:10px}}

/* ── 吸顶胶囊条 ──
   半透明 surface + backdrop blur：磨砂玻璃叠在 body::before 的渐变颗粒层上；
   color-mix 与 :has 同代特性，站点已在用，不支持时退化为不透明卡片面。 */
header.topbar{
  position:sticky;
  top:12px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:30px;
  padding:9px 12px 9px 20px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--surface) 84%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
  backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:var(--shadow-md);
}
/* 旧页头的 40px 装饰线在胶囊条上不再适用 */
header.topbar::after{display:none}
/* 打印：回文档流、去玻璃质感（nav 本体已由既有打印规则隐藏） */
@media print{
  header.topbar{position:static;background:none;border:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 12px;margin-bottom:20px}
  header.topbar .brand-sub{display:none}
}

/* ── 品牌区：站名 + 副标题（副标题超长省略，不撑破胶囊） ── */
.topbar .brand{display:flex;flex-direction:column;min-width:0;gap:1px}
.topbar .brand-name{font-size:16.5px;line-height:1.35;margin:0}
.topbar .site-title{font-size:16.5px;line-height:1.35}
.topbar .brand-name a,
.topbar .site-title a{color:var(--ink);text-decoration:none;letter-spacing:.2px}
.topbar .brand-name a:hover,
.topbar .site-title a:hover{color:var(--amber-deep)}
.topbar .brand-sub{
  margin:0;
  font-size:11.5px;
  line-height:1.45;
  color:var(--mute);
  letter-spacing:.4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── 导航：右对齐文字链接；选中项从「琥珀实心胶囊」改为「墨色文字 + 琥珀指示条」，
   指示条收进胶囊内部、贴住文字下方；入场动画与辉光沿用旧规则 ── */
.topbar nav{margin:0 0 0 auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.topbar nav a{
  padding:8px 12px;
  font-size:14px;
  color:var(--nav-ink);
}
.topbar nav a:hover{transform:none}   /* 条内空间有限，hover 不再上浮 */
.topbar nav a.on{
  color:var(--ink);
  background:transparent;
  box-shadow:none;
}
.topbar nav a.on::after{
  left:12px;right:12px;
  bottom:2px;
  height:2.5px;
}

/* ── 主题开关：从绝对定位改为条内 flex 项（site.js 只按 class 找它，不受影响） ──
   必须保持定位上下文：旧版 .theme-btn::after{inset:-9px} 是 44×44 点击热区层，
   若这里写 position:static，伪元素会锚到 sticky topbar、放大成盖住整条导航的
   隐形点击层（2026-10-28 线上事故：点导航全部变成切主题）。relative + 热区收
   到 -6px（102×52 仍 ≥44×44），到最近导航链接留 8px 缓冲。 */
.topbar .theme-btn{position:relative;flex:none;align-self:center}
.topbar .theme-btn::after{inset:-6px}

/* ── 布局联动 ── */
/* 条高 ≈ 61px + top 12px：锚点跳转与右侧目录的吸顶位置都要让出这段高度 */
h2{scroll-margin-top:86px}
.toc{top:88px}

/* ── 窄屏：第一行站名 + 开关，第二行导航；副标题收起 ── */
@media(max-width:640px){
  header.topbar{top:8px;flex-wrap:wrap;row-gap:2px;padding:8px 10px 8px 14px;border-radius:var(--radius-lg)}
  .topbar .brand{flex:1 1 100%}
  .topbar .brand-sub{display:none}
  .topbar .brand-name,.topbar .site-title{font-size:15.5px}
  .topbar nav{margin-left:-6px;gap:0}
  .topbar nav a{padding:7px 10px;font-size:13.5px}
  .topbar nav a.on::after{left:10px;right:10px;bottom:1px}
  .topbar .theme-btn{margin-left:auto}
  h2{scroll-margin-top:108px}
  .toc{top:108px}
}

/* ═══ v4.3 回到顶部（2026-10-28）══════════════════════════════════
   滚过 480px 浮现的圆形玻璃按钮（注入见 site.js ⑥）。观感与 topbar
   同一套配方：surface 84% 磨砂 + line-strong 描边 + shadow-md；层级
   压在 topbar(60) 之下。显示/隐藏只动 opacity+transform，无伪元素、
   无热区放大层（2026-10-28 开关热区事故的直接教训）。 */
.totop{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:55;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--surface) 84%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
  backdrop-filter:blur(14px) saturate(1.35);
  color:var(--ink);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease;
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{color:var(--amber-deep);border-color:var(--amber-deep);
  transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.totop:active{transform:translateY(0)}
.totop svg{display:block}
.totop:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
@media(max-width:640px){
  .totop{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
}
@media print{.totop{display:none}}

/* v4.4 首页瓦片通栏（第 6 篇笔记入列后 mosaic 尾行补位） */
.tile.wide{grid-column:1/-1}