/* ==========================================================================
   Shikishi（色紙）主题样式
   外观体系分两条正交轴：
   1. :root 的基础变量 = mashiro（真白）皮肤，即设计稿的素色纸感
   2. [data-skin="…"] = YAML 构建期角色皮肤；[data-color-mode] = 访客日/夜模式
   ========================================================================== */

:root,
[data-skin="mashiro"] {
  --canvas: #e9e6e1;
  --paper: #fbfaf7;
  --paper-2: #f2eee8;
  --ink: #292827;
  --muted: #77716a;
  --line: #d1cbc3;
  --coral: #df756b;
  /* 珊瑚的深字变体：正文纸底 5.4 / 纸-2 底 4.9（AA 达标）。
     规则：读的文字用 --coral-text，符号/边框/背景/52px 展示字保留 --coral */
  --coral-text: #a84b41;
  --coral-pale: #f2c2b8;
  --ice: #98b8c6;
  --ice-pale: #dce8eb;
  --yellow: #e5c477;
  --green: #abc19f;
  --dark: #222223;
  --head-subtle: #d7d4ce;   /* rail 深色头部里的副标题文字 */
  --hover-tint: #f2f5f0;    /* 条目行悬停底色 */
  --nav-hover-shade: rgb(0 0 0 / 4%); /* 顶栏只做中性明度变化，不随皮肤偏色 */
  --syntax-comment: #8a8378;
  --syntax-keyword: #b05a50;
  --syntax-string: #6a8a5f;
  --syntax-number: #5d7f8f;
  --syntax-attr: #8a6d3b;
  --syntax-deletion: #b05a50;
  --syntax-deletion-bg: #f2c2b8;
  --serif: Georgia, "Songti SC", "STSong", serif;
  --sans: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
  /* 动画体系（V5）：全站过渡只引用这三档时长 + 统一缓动。
     fast = 文字/图标染色；mid = 底色/阴影/浮层；slow = 预留给轮播等大组件 */
  --dur-fast: 150ms;
  --dur-mid: 250ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

[data-color-mode="dark"] {
  --canvas: #111315;
  --paper: #1a1c1f;
  --paper-2: #22252a;
  --ink: #e9e6df;
  --muted: #aaa49b;
  --line: #464950;
  --coral: #e58b81;
  --coral-text: #f0aaa2;
  --coral-pale: #5b3533;
  --ice: #88adbd;
  --ice-pale: #263a43;
  --yellow: #c9aa61;
  --green: #8eaa85;
  --dark: #0d0f11;
  --head-subtle: #bbb7b0;
  --hover-tint: #252b28;
  --nav-hover-shade: rgb(255 255 255 / 5%);
  --syntax-comment: #aaa49b;
  --syntax-keyword: #ef9b91;
  --syntax-string: #a9c59e;
  --syntax-number: #96bccd;
  --syntax-attr: #d7b57b;
  --syntax-deletion: #ef9b91;
  --syntax-deletion-bg: #4d2d2d;
}

* { box-sizing: border-box; }
::selection { background: var(--coral-pale); color: var(--ink); }
/* 键盘可见焦点环（鼠标点击不出现）；搜索输入框单独豁免，聚焦态由搜索条图标染色提示 */
:focus-visible { outline: 2px solid var(--coral-text); outline-offset: 2px; }
html { color-scheme: light; background: var(--canvas); }
/* 锚点/目录点击平滑滚动；系统设了减弱动态则保持瞬移（V4） */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* 减弱动态用户的全局保险：所有过渡/动画压到近零（V5） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
[data-color-mode="dark"] { color-scheme: dark; }
/* body 背景让给 ::before 背景板层（B1）；canvas 底色由 html 承担 */
body { margin: 0; color: var(--ink); background: transparent; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* 皮肤背景板：固定视口底层的画板，纸面（.journal/.rail 自带实色）浮于其上。
   皮肤未设置 --skin-bg 时 background:none，这层等于不存在；
   夜间模式自动调暗（站长拍板：不做第二套暗色背景图） */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--skin-bg, none) center / cover no-repeat; pointer-events: none; }
[data-color-mode="dark"] body::before { filter: brightness(.55) saturate(.9); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* 纯文字/描边染色的 hover 统一挂 fast 过渡（V5：此前这些悬停是瞬变） */
.pagination a, .cloud-item, .article-tags a, .article-nav a, .article-back,
.rail-profile-links a, .rail-profile-progress, .pdf-embed a, .search-bar button,
.rail-nav a { transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); }

/* ---- 整体骨架：左侧导航轨 + 主区 ---- */
.blog-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); width: min(1600px, 100%); min-height: 100vh; margin: 0 auto; }
/* sticky + 固定视口高：长页面滚动时导航与个人卡片保持可见，rail 内容超高时自身滚动
   100dvh 覆盖触屏浏览器动态工具栏（721-960px 平板区间），不支持 dvh 的浏览器回退 100vh */
.rail { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow-y: auto; border-right: 1px solid var(--ink); background: var(--paper-2); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* 桌面端不显示深色头部块：品牌由 journal-bar 承担，副标题挪到 rail 底部；
   深色块在页面左上角抢视觉重心（移动端仍保留作顶栏，见 840 档） */
.rail-head { display: none; padding: 24px 20px 21px; color: var(--paper); background: var(--dark); }
.rail-head strong { display: block; font-size: 16px; font-weight: 500; letter-spacing: .02em; }
.rail-head span { display: block; margin-top: 12px; color: var(--head-subtle); font: 11px/1.5 var(--serif); }
.rail-nav-shell { display: contents; }
.rail-nav { padding: 15px 0 0; }
.rail-nav-scrollbar { display: none; }
.rail-nav a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border-left: 3px solid transparent; color: var(--muted); font-size: 13px; }
.rail-nav a:hover, .rail-nav a.active { border-left-color: var(--coral); color: var(--ink); background: var(--paper); }
/* 图标列：本地 Tabler Icons outline，16px 等尺寸、随文字色 */
.rail-ico { display: flex; align-items: center; justify-content: center; color: var(--ink); }
.rail-count { color: var(--muted); font: 10px var(--mono); }
.rail-divider { height: 1px; margin: 17px 20px; background: var(--line); }
.rail-stat { display: grid; gap: 2px; padding: 0 20px; color: var(--muted); text-align: center; font: 10px/1.8 var(--mono); }
.rail-stat strong { color: var(--ink); font-weight: 500; }
.rail-profile { display: flex; flex-direction: column; margin: auto 20px 21px; }
.rail-profile-details { order: 1; }
.rail-profile-head { order: 2; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.rail-profile img { width: 38px; height: 38px; display: block; border: 1px solid var(--ink); border-radius: 50%; object-fit: cover; }
.rail-profile strong { display: block; font-size: 11px; font-weight: 500; }
.rail-profile span { display: block; margin-top: 3px; color: var(--muted); font: 9px var(--mono); }
.rail-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; text-align: center; }
.rail-profile-stats strong { font: 500 13px var(--mono); }
.rail-profile-stats span { margin-top: 2px; font-size: 8px; }
.rail-profile-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 13px; color: var(--muted); font: 9px var(--mono); }
.rail-profile-links a { display: block; width: 100%; text-align: center; }
.rail-profile-links a:hover { color: var(--coral-text); }
/* 设计稿中为 div，主题实现为可点击回顶的 button，故补充按钮样式重置 */
.rail-profile-progress { display: flex; justify-content: center; gap: 7px; width: 100%; margin-top: 14px; padding: 7px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font: 9px var(--mono); }
.rail-profile-progress:hover { color: var(--coral-text); }
.rail-color-modes { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.rail-color-modes-label { color: var(--muted); font: 8px var(--mono); letter-spacing: .08em; }
.color-mode-dot { width: 12px; height: 12px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; cursor: pointer; opacity: .5; transition: opacity var(--dur-mid), transform var(--dur-mid), box-shadow var(--dur-mid); }
.color-mode-dot--system { background: linear-gradient(135deg, #fff 0 48%, #202124 52% 100%); }
.color-mode-dot--light { background: #fff; }
.color-mode-dot--dark { background: #202124; }
.color-mode-dot:hover { opacity: .85; }
.color-mode-dot.active { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px var(--coral); }
/* 切换器同一份 DOM 有两份：rail-head 内是移动端副本，桌面隐藏 */
.rail-head .rail-color-modes { display: none; }
/* 副标题落点（桌面端 rail-head 隐藏后由 rail-profile 底部呈现） */
.rail-subtitle { margin-top: 12px; color: var(--muted); text-align: center; font: 8px/1.6 var(--mono); letter-spacing: .06em; }

/* ---- 主区（journal） ---- */
.journal { min-width: 0; min-height: 100vh; background: var(--paper); }
.journal-inner { width: min(1120px, calc(100% - 96px)); margin: 0 auto; padding: 33px 0 48px; }
.journal-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.journal-brand { display: flex; align-items: baseline; gap: 12px; }
.journal-brand strong { font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.journal-brand span { color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }

/* ---- 首页：刊头 ---- */
.masthead { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 34px; align-items: end; padding: 48px 0 34px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 13px; color: var(--coral-text); font: 10px var(--mono); letter-spacing: .1em; }
.masthead h1 { max-width: 680px; margin: 0; font: 500 clamp(28px, 3vw, 34px)/1.3 var(--serif); letter-spacing: 0; }
.masthead h1 span, .masthead h1 em { display: block; }
.masthead h1 em { color: var(--coral); font-style: normal; font-weight: 600; }
.masthead-copy { max-width: 680px; margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.masthead-meta { padding-left: 17px; border-left: 2px solid var(--coral); }
.masthead-meta span, .masthead-meta small { display: block; color: var(--muted); font: 9px/1.6 var(--mono); }
.masthead-meta strong { display: block; margin: 4px 0 8px; font: 20px var(--serif); }

/* ---- 首页：近期推荐轮播卡 ---- */
.featured { --featured-summary-lines: 2; display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(280px, .93fr); min-height: 292px; margin-top: 29px; border: 1px solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 var(--ice-pale); }
/* 图片绝对定位铺满：卡片高度由文字列驱动，图片固有尺寸不再把卡片撑高 */
.featured-image { position: relative; min-height: 292px; overflow: hidden; border-right: 1px solid var(--ink); }
.featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 55% 25%; filter: saturate(.94); }
.featured-copy { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 25px 26px 23px; }
.featured-label { color: var(--coral-text); font: 9px var(--mono); letter-spacing: .08em; }
.featured-copy h2 { margin: 20px 0 10px; font-size: 27px; line-height: 1.22; font-weight: 500; }
/* 摘要是推荐卡的编辑导语：复用原 CTA 的珊瑚渐变，不干扰标题层级；
   字符 500 只兜底异常内容，视觉截断由 line-clamp 按实际排版行数完成。 */
.featured-copy .featured-summary { max-width: none; margin: 0; padding: 8px 11px; overflow: hidden; border-left: 3px solid var(--coral); background: linear-gradient(90deg, color-mix(in srgb, var(--coral) 28%, transparent), color-mix(in srgb, var(--coral) 10%, transparent) 58%, transparent); color: var(--muted); font-size: 12px; line-height: 1.8; }
.featured-summary-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--featured-summary-lines); line-clamp: var(--featured-summary-lines); }
.featured-meta { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font: 9px var(--mono); }
.featured-meta strong { color: var(--ink); font-weight: 500; }

/* ---- 首页：近期推荐轮播轨道 ---- */
/* viewport 右/下各留 8px 内边距：卡片的 ice-pale 浮层投影（8px 8px 0）不被 overflow 裁掉；
   左侧 40px 是上一张卡的 peek 区（overflow 裁剪线在 padding 盒外缘，padding 区内容仍可见） */
.picks-viewport { margin-top: 18px; padding: 0 8px 8px 40px; overflow: hidden; outline: none; touch-action: pan-y; }
.picks-viewport:focus-visible { outline: 1px solid var(--coral); outline-offset: 3px; }
.picks-track { display: flex; gap: 16px; transition: transform var(--dur-slow) var(--ease); will-change: transform; }
/* 拖拽跟手期关掉过渡，松手后由 JS 重新落位 */
.picks-track.is-dragging { transition: none; }
/* 首尾克隆卡走完一帧后，无感归位到对应的真实卡 */
.picks-track.is-instant { transition: none; }
/* 卡宽 = 内容宽 - 56px，配合左 padding：左侧露上一张约 24px、右侧露下一张约 48px（peek） */
.picks-card { flex: 0 0 calc(100% - 56px); margin-top: 0; user-select: none; }
/* 克隆只负责首尾过渡，不是第二份可交互内容 */
.picks-card[data-picks-clone] { pointer-events: none; }
/* 单篇推荐没有轮换也没有邻居：收回 peek 留白，卡片占满（此时 controls 整块不渲染，
   键盘/拖拽逻辑在 JS 侧以 cards.length < 2 自然停摆） */
.picks:has(.picks-track > :only-child) .picks-viewport { padding-left: 0; }
.picks:has(.picks-track > :only-child) .picks-card { flex-basis: 100%; }
/* 鼠标按住图片会触发原生拖图，与滑动手势打架 */
.picks-card img { -webkit-user-drag: none; }
.picks-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.picks-dots { display: flex; gap: 0; }
/* 视觉圆点仍为 8px，button 本体扩到 WCAG 2.5.8 要求的 24px 命中区。 */
.picks-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.picks-dot::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; transition: background var(--dur-fast), border-color var(--dur-fast); }
.picks-dot:hover::before { border-color: var(--coral-text); }
.picks-dot[aria-current="true"]::before { border-color: var(--coral); background: var(--coral); }
.picks-dot:disabled { cursor: not-allowed; opacity: .45; }
/* 细进度条 = 自动轮换倒计时，CSS 动画与 JS 计时同为 5.5s，任一暂停源触发时两边同步冻结 */
.picks-progress { position: relative; flex: 1; height: 2px; background: var(--line); }
.picks-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--coral); }
.picks-progress span.is-running { animation: picks-progress 5.5s linear forwards; }
.picks-progress span.is-paused { animation-play-state: paused; }
@keyframes picks-progress { from { width: 0; } to { width: 100%; } }
.picks-counter { min-width: 43px; color: var(--muted); text-align: right; font: 9px var(--mono); letter-spacing: .04em; }
.picks-toggle { flex: 0 0 auto; display: inline-grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 1px solid var(--ink); background: transparent; color: var(--muted); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); }
.picks-toggle-icon { grid-area: 1 / 1; width: 15px; height: 15px; }
.picks-toggle-icon--play { display: none; }
.picks-toggle.is-paused .picks-toggle-icon--pause { display: none; }
.picks-toggle.is-paused .picks-toggle-icon--play { display: block; }
/* reduced-motion / JS 初始化失败时按钮不可操作；用中性短横线表示关闭，避免 ▶ 暗示仍可播放。 */
.picks-toggle:disabled .picks-toggle-icon { display: none; }
.picks-toggle:disabled::before { content: ""; width: 9px; height: 1px; background: currentColor; }
.picks-toggle:hover { border-color: var(--coral-text); color: var(--coral-text); }
.picks-toggle:focus-visible { outline: 1px solid var(--muted); outline-offset: 2px; }
.picks-toggle:disabled { border-color: var(--line); background: transparent; color: var(--muted); cursor: not-allowed; opacity: .7; }

/* ---- 首页：条目列表 ---- */
.section-line { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 48px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.section-line h1, .section-line h2 { margin: 0; font-size: 16px; font-weight: 500; }
.section-line span { color: var(--muted); font: 9px var(--mono); }
.entry-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px; gap: 16px; align-items: center; min-height: 92px; padding-left: 12px; border-bottom: 1px solid var(--line); transition: background var(--dur-mid), box-shadow var(--dur-mid); }
/* 带缩略图的条目行：标题与 meta 之间插入 160×100 图片列（8:5 裁切）。
   meta 轨道固定 150px——写 auto 会随属性文字伸缩，把缩略图列挤得逐行漂移 */
.entry-row--thumb { grid-template-columns: 48px minmax(0, 1fr) 160px 150px; }
.entry-thumb { width: 160px; height: 100px; overflow: hidden; border: 1px solid var(--ink); }
.entry-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* 悬停不做位移（padding 变化会触发文字重排换行）：内嵌色条 + 底色，零布局抖动；
   色条画在 padding-left 腾出的 12px 留白带内，不与编号文字重叠 */
.entry-row:hover { background: var(--hover-tint); box-shadow: inset 3px 0 0 var(--coral); }
.entry-no { color: var(--coral-text); font: 11px var(--mono); }
.entry-title { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
.entry-excerpt { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* meta 固定三行：日期 / 字数+时长（必有值）/ 分类+UPDATED（可空但占位）。
   不自动折行，折行会把"UPDATED 05—27"这类整体语义切碎（极端窄列以省略号兜底） */
.entry-meta { max-width: 100%; color: var(--muted); text-align: right; font: 9px/1.9 var(--mono); }
.entry-meta strong { display: block; color: var(--ink); font-weight: 500; white-space: nowrap; }
.entry-meta span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 可空行用不换行空格占位：三行等高，各行日期与缩略图的相对位置逐行一致 */
.entry-meta-sub:empty::after { content: "\a0"; }
.index-footer { display: flex; justify-content: space-between; gap: 15px; padding-top: 19px; color: var(--muted); font: 9px var(--mono); }
.pagination { display: flex; justify-content: center; gap: 12px; margin-top: 18px; color: var(--muted); font: 10px var(--mono); }
.pagination a, .pagination span { min-width: 14px; text-align: center; }
.pagination a:hover, .pagination .current { color: var(--coral-text); }

/* ---- 文章页 ---- */
.article-top { display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: end; padding: 58px 0 30px; border-bottom: 1px solid var(--ink); }
.article-top h1 { max-width: 750px; margin: 0; font-size: 42px; line-height: 1.12; font-weight: 500; }
.article-lede { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.article-meta-line { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; color: var(--muted); font: 9px var(--mono); }
.article-meta-line strong { color: var(--ink); font-weight: 500; }
.article-layout { display: grid; grid-template-columns: 154px minmax(0, 690px) 154px; gap: 32px; justify-content: center; padding-top: 35px; }
.article-aside { color: var(--muted); font: 9px/1.7 var(--mono); }
/* 两侧 aside 跟随滚动：长文中目录高亮始终可见；目录超高时自身细滚动条 */
.article-layout .article-aside { position: sticky; top: 21px; align-self: start; max-height: calc(100vh - 42px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.article-aside strong { display: block; margin-bottom: 9px; color: var(--ink); font-weight: 500; }
/* 目录折叠容器：桌面锁定展开态（summary 退化为纯标签，不可点） */
.toc-fold summary { display: block; margin-bottom: 9px; color: var(--ink); font-weight: 500; list-style: none; cursor: default; pointer-events: none; }
.toc-fold summary::-webkit-details-marker { display: none; }
.article-aside a { display: block; padding: 5px 0; border-left: 2px solid transparent; }
/* 通用 hover 的右移必须排除目录链接：本规则（类+伪类+元素）优先级高于 .toc-link 基础规则，
   不排除会把目录的 padding-left 从 1em 压回 7px，V4 的零位移设计失效（复审实锤） */
.article-aside a:not(.toc-link):hover { padding-left: 7px; border-left-color: var(--coral); color: var(--ink); }
.article-body { min-width: 0; }
.article-hero { height: 286px; overflow: hidden; margin-bottom: 29px; border: 1px solid var(--ink); box-shadow: 7px 7px 0 var(--coral-pale); }
.article-hero img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 54% 22%; }
/* ==========================================================================
   prose 正文系统：Markdown 渲染产物的完整排版规则。
   只作用于模板中包裹 page.content 的 .prose 容器，
   不波及布局层（hero / 文末导航 / 评论区自有样式）。
   ========================================================================== */
.prose { font-size: 16px; line-height: 1.95; overflow-wrap: break-word; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 23px; }
/* 首行缩进 2 字符（站长偏好，中式书版惯例）：只管 prose 直属段落，
   引用/列表/图注内段落天然豁免；整段只有一张图时不缩（图会跟着偏右） */
.prose > p { text-indent: 2em; }
.prose > p:has(> img:only-child) { text-indent: 0; }

/* 标题层级：衬线大章（h2）→ 无衬线小节（h3/h4）→ 兜底（h5/h6）
   正文 h1（不少存量文章用 # 一级标题）降级为略大于 h2 的衬线，不与文章大标题抢戏 */
.prose h1 { margin: 46px 0 18px; font: 500 28px/1.2 var(--serif); }
.prose h2 { margin: 42px 0 16px; font: 500 24px/1.2 var(--serif); }
.prose h3 { margin: 34px 0 12px; font-size: 18px; font-weight: 500; line-height: 1.3; }
/* h4 曾用 12px mono 眉标（D19 设计发挥），比正文还小，站长验收否决，退回常规字号（V7） */
.prose h4 { margin: 28px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.prose h5, .prose h6 { margin: 24px 0 8px; font-size: 16px; font-weight: 600; }
/* 锚点跳转不被 sticky 元素盖住标题（840 顶栏档在媒体查询里加大） */
.prose [id] { scroll-margin-top: 24px; }

/* 正文链接：hairline 下划线，悬停染珊瑚——与无样式正文文字明确区分 */
.prose a { color: var(--ink); border-bottom: 1px solid var(--line); transition: color var(--dur-fast), border-color var(--dur-fast); }
.prose a:hover { color: var(--coral-text); border-bottom-color: var(--coral-text); }

/* 列表：收敛缩进，marker 用珊瑚呼应 entry-no 的编号语言 */
.prose ul, .prose ol { margin: 0 0 23px; padding-left: 26px; }
.prose li { margin: 6px 0; line-height: 1.9; }
.prose li > ul, .prose li > ol { margin: 6px 0; }
.prose ul li::marker { color: var(--coral); }
.prose ol li::marker { color: var(--coral-text); font: 500 13px var(--mono); }
/* GFM 任务清单（ul.task-list + checkbox） */
.prose .task-list { list-style: none; padding-left: 8px; }
.prose .task-list input[type="checkbox"] { margin-right: 8px; accent-color: var(--coral); }

/* 图与图注：清零浏览器默认的 1em 40px 边距（曾把手机图片挤到 246px）。
   不用 width:100%——小图（徽章/计数器）强制放大即糊；大图经 max-width 收到列宽即视觉全宽，小图原尺寸居中 */
.prose img { max-width: 100%; height: auto; }
.prose figure:not(.highlight) { margin: 29px 0; }
.prose figure:not(.highlight) img { display: block; margin: 0 auto; max-width: 100%; border: 1px solid var(--line); }
.prose figure:not(.highlight) figcaption { margin-top: 8px; color: var(--muted); font: 10px var(--mono); text-align: center; }

/* 分割线：hairline，替代浏览器默认的 3D 凹槽 */
.prose hr { height: 1px; margin: 40px 0; border: 0; background: var(--line); }

.prose blockquote { margin: 31px 0; padding: 13px 18px; border-left: 3px solid var(--ice); background: var(--ice-pale); color: var(--ink); font: 16px/1.8 var(--serif); }
.prose blockquote p { margin: 0 0 10px; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { padding: 2px 5px; background: var(--paper-2); font: 12px var(--mono); }
.prose kbd { padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--paper-2); font: 11px var(--mono); }
.prose mark { padding: 1px 3px; background: var(--yellow); }

/* 定义列表与脚注（section.footnotes） */
.prose dt { font-weight: 600; }
.prose dd { margin: 4px 0 12px 20px; }
.prose sup { line-height: 0; }
.prose .footnotes { color: var(--muted); font-size: 13px; }

/* 媒体嵌入宽度约束 */
.prose iframe, .prose video, .prose embed { max-width: 100%; }

.prose table:not(.highlight table) { display: block; max-width: 100%; margin: 0 0 23px; overflow-x: auto; border-collapse: collapse; font-size: 13px; }
.prose table:not(.highlight table) th, .prose table:not(.highlight table) td { padding: 6px 12px; border: 1px solid var(--line); }
.prose table:not(.highlight table) th { background: var(--paper-2); font-weight: 500; }

/* MathJax 公式只在 JS 确认真正超过所在正文宽度后启用局部横滚。
   不能给全部行内公式直接挂 overflow-x:auto：字形的亚像素舍入常让 scrollWidth 比
   clientWidth 多 2–3px，连 $q$ 都会出现滚动条并被裁坏。 */
mjx-container[display="true"] { display: block; max-width: 100%; padding: 3px 0; }
mjx-container.is-scrollable-math { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
mjx-container:not([display="true"]).is-scrollable-math { display: inline-block; }
mjx-container.is-scrollable-math::-webkit-scrollbar { height: 4px; }
mjx-container.is-scrollable-math::-webkit-scrollbar-track { background: transparent; }
mjx-container.is-scrollable-math::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
mjx-container.is-scrollable-math::-webkit-scrollbar-button { display: none; }
/* assistive-mml 是读屏器使用的隐藏 MathML 树；只有滚动行内容器需要钉宽，避免它的
   绝对定位宽度被计入 scrollable overflow 形成幻影横滚条。 */
mjx-container:not([display="true"]).is-scrollable-math mjx-assistive-mml { width: 1px !important; }
.article-end { display: flex; justify-content: space-between; gap: 15px; margin-top: 38px; padding: 17px 0; border-top: 1px solid var(--ink); color: var(--muted); font: 9px var(--mono); }
.article-back { padding: 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font: 9px var(--mono); }
.article-back:hover { color: var(--coral-text); border-color: var(--coral-text); }
.article-details { margin-top: 27px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font: 9px/1.8 var(--mono); overflow-wrap: anywhere; }
/* 上行 overflow-wrap：百分号编码的"本文链接"是不可断词长串（实测 ≈718px 撑破 375px 手机），
   anywhere 允许在任意字符间断行；属性可继承，对作者/标签等短内容无副作用 */
.article-details strong { color: var(--ink); font-weight: 500; }
.article-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.article-tags a { color: var(--coral-text); }
.article-tags a:hover { text-decoration: underline; }
.article-copyright { margin-top: 15px; padding: 11px 12px; border-left: 2px solid var(--ice); background: var(--ice-pale); }
.article-nav { display: flex; justify-content: space-between; gap: 15px; margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--line); }
.article-nav a:hover { color: var(--coral-text); }

/* ---- 文章目录（Hexo toc() 助手输出的 .toc 结构） ---- */
.article-aside ol.toc, .article-aside .toc ol { list-style: none; margin: 0; padding: 0; }
.article-aside .toc ol { padding-left: 10px; }
.article-aside .toc-link { display: block; padding: 5px 0 5px 1em; text-indent: -1em; border-left: 2px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
/* hover/active 零位移：竖线淡入 + 文字染色（此前的整组右移体感像意外抖动，V4） */
.article-aside .toc-link:hover, .article-aside .toc-link.active { border-left-color: var(--coral); color: var(--ink); }

/* ---- 代码块（Hexo highlight.js 服务端高亮，纸感配色） ---- */
.prose figure.highlight { --code-preview-lines: 10; position: relative; margin: 0 0 23px; border: 1px solid var(--line); background: var(--paper-2); overflow-x: auto; font: 12px/1.75 var(--mono); }
/* JS 增强（V3）：表格包进 .highlight-body，折叠时只裁代码区，展开条留在外面 */
.prose figure.highlight .highlight-body { overflow-x: auto; }
.prose figure.highlight--folded { overflow: hidden; }
/* 桌面预览 10 行、手机预览 5 行；额外计入代码单元格上下各 12px 的内边距。 */
.prose figure.highlight--folded .highlight-body { max-height: calc(var(--code-preview-lines) * 1.75em + 24px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 1.75em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.75em), transparent); }
.highlight-copy { position: absolute; top: 0; right: 0; z-index: 1; padding: 3px 10px; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--muted); cursor: pointer; font: 9px var(--mono); opacity: 0; transition: opacity var(--dur-fast), color var(--dur-fast); }
.prose figure.highlight:hover .highlight-copy, .highlight-copy:focus-visible { opacity: 1; }
/* 触摸设备没有 hover，复制按钮常显（半透明弱化存在感，避免长期遮挡代码右上角）；
   点击目标同时垫到 ≥24px（WCAG 2.5.8 目标尺寸下限），原 3px padding 只有约 17px 高 */
@media (hover: none) { .highlight-copy { opacity: 0.65; padding: 7px 12px; } .highlight-copy:focus-visible { opacity: 1; } }
.highlight-copy:hover { color: var(--coral-text); }
/* visually-hidden：读屏可及、视觉隐藏（复制结果播报节点等） */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.highlight-expand { display: block; width: 100%; padding: 5px 0; border: 0; border-top: 1px solid var(--line); background: var(--paper); color: var(--muted); cursor: pointer; text-align: center; font: 9px var(--mono); transition: color var(--dur-fast); }
.highlight-expand[hidden] { display: none; }
.highlight-expand:hover { color: var(--coral-text); }
.prose figure.highlight table { width: 100%; margin: 0; border-collapse: collapse; }
.prose figure.highlight td.gutter { padding: 12px 4px 12px 12px; border-right: 1px solid var(--line); color: var(--muted); text-align: right; user-select: none; width: 1%; }
.prose figure.highlight td.code { padding: 12px 14px; }
.prose figure.highlight pre { margin: 0; background: transparent; }
.prose figure.highlight figcaption { padding: 8px 14px 0; color: var(--muted); font-size: 10px; }
.prose figure.highlight .line { min-height: 1em; }
/* highlight.js token 配色：日/夜分别保持纸面上的可读对比 */
.highlight .comment, .highlight .quote { color: var(--syntax-comment); font-style: italic; }
.highlight .keyword, .highlight .selector-tag, .highlight .built_in, .highlight .tag { color: var(--syntax-keyword); }
.highlight .string, .highlight .regexp, .highlight .addition { color: var(--syntax-string); }
.highlight .number, .highlight .literal, .highlight .link, .highlight .meta { color: var(--syntax-number); }
.highlight .title, .highlight .function_, .highlight .name, .highlight .section, .highlight .type { color: var(--ink); font-weight: 500; }
.highlight .attr, .highlight .attribute, .highlight .variable, .highlight .template-variable, .highlight .symbol { color: var(--syntax-attr); }
.highlight .deletion { color: var(--syntax-deletion); background: var(--syntax-deletion-bg); }

/* ---- 评论区 ---- */
.article-comments { margin-top: 45px; }
.article-comments .giscus { margin-top: 22px; }

/* ==========================================================================
   站点内容组件：供独立页面（prose: false）的自带 HTML 使用。
   置于 prose 规则之后，与正文规则互不纠缠。
   ========================================================================== */
/* 友链卡片（source/links）：直角、hairline、纸底，悬停染墨框 + 冰蓝硬阴影 */
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-top: 28px; }
.friend-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); background: var(--paper-2); transition: border-color var(--dur-mid), box-shadow var(--dur-mid), background var(--dur-mid); }
.friend-card:hover { border-color: var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ice-pale); }
.friend-card:hover .friend-body strong { color: var(--coral-text); }
.friend-avatar { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--ink); object-fit: cover; }
.friend-body { min-width: 0; }
.friend-body strong { display: block; font-size: 14px; font-weight: 500; transition: color var(--dur-mid); }
.friend-motto { display: block; margin-top: 3px; color: var(--muted); font: 10px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-farewell { margin-top: 34px; color: var(--muted); text-align: center; font: italic 12px/1.8 var(--serif); }

/* 工具目录（source/tools）：entry-row 的编号条目语言，CSS 计数器自动编号 */
.tool-list { counter-reset: tool; margin-top: 28px; }
.tool-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 15px 0 15px 12px; border-bottom: 1px solid var(--line); transition: background var(--dur-mid), box-shadow var(--dur-mid); }
/* 编号为装饰：第二条声明用 alt 语法对读屏静音（不支持的引擎回落第一条，仅视觉不变） */
.tool-row::before { counter-increment: tool; content: counter(tool, decimal-leading-zero); content: counter(tool, decimal-leading-zero) / ""; color: var(--coral-text); font: 11px var(--mono); }
/* 悬停与 entry-row 同标准：不做位移（padding 变化触发文字重排），内嵌色条 + 底色，
   色条画在 padding-left 腾出的 12px 留白带内 */
.tool-row:hover { background: var(--hover-tint); box-shadow: inset 3px 0 0 var(--coral); }
.tool-name { display: block; font-size: 15px; font-weight: 500; }
.tool-intro { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* ---- 归档页：年份分组 ---- */
.archive-year { display: flex; align-items: baseline; gap: 10px; margin-top: 36px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.archive-year span { font: 500 22px var(--serif); }

/* ---- 标签云 / 分类索引 ---- */
.cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; padding: 30px 0 14px; border-bottom: 1px solid var(--line); }
.cloud-item { color: var(--coral-text); font: 12px var(--mono); }
.cloud-item:hover { text-decoration: underline; }
.cloud-item span { margin-left: 4px; color: var(--muted); font-size: 9px; }
/* 权重档（w1 冷 → w4 热）：字号与 coral 浓度同步递进（V6；w4 色值经复审修正） */
.cloud-item--w1 { color: color-mix(in srgb, var(--coral-text) 55%, var(--muted)); font-size: 11px; }
.cloud-item--w2 { color: color-mix(in srgb, var(--coral-text) 80%, var(--muted)); font-size: 13px; }
.cloud-item--w3 { color: var(--coral-text); font-size: 16px; font-weight: 500; }
/* w4 原用 --coral：亮色模式下比 w3 的 --coral-text 更浅更亮，权重最高反而颜色最飘
   （纸面对比仅 ≈2.9:1）。改取 coral-text 与 coral 的 8:2 混合：暖度保留、
   深度拉回 w3 同档（≈5:1），"最热"由 20px/600 的字号字重收顶 */
.cloud-item--w4 { color: color-mix(in srgb, var(--coral-text) 80%, var(--coral)); font-size: 20px; font-weight: 600; }
.cloud-item--category { color: var(--ink); font-size: 14px; }
.cloud-item--category:hover { color: var(--coral-text); }
/* # 前缀是符号且属 h1 大字（对比过 3.0 大字线），按规则保留展示珊瑚 */
.section-line .accent { color: var(--coral); }

/* ---- 独立页面 ---- */
.article-top--page { display: block; padding: 48px 0 24px; }
.page-content { padding-top: 28px; }

/* ---- 内嵌 PDF（{% pdf %} tag） ---- */
.pdf-embed { display: flex; flex-direction: column; gap: 6px; margin: 23px 0; }
.pdf-embed iframe { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--ink); background: var(--paper-2); }
.pdf-embed a { color: var(--muted); font: 9px var(--mono); }
.pdf-embed a:hover { color: var(--coral-text); }

/* ---- 搜索浮层 ---- */
.search-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; background: rgba(41, 40, 39, .45); }
.search-overlay[hidden] { display: none; }
.search-panel { width: min(560px, 100%); border: 1px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ice-pale); }
.search-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ink); }
.search-bar > span { color: var(--coral); font-size: 16px; }
.search-bar input { flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font: 14px var(--sans); }
.search-bar:focus-within > span { color: var(--coral-text); }
.search-bar button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.search-bar button:hover { color: var(--coral-text); }
.search-results { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.search-results a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.search-results a:hover { background: var(--hover-tint); }
.search-results strong { display: block; font-size: 13px; font-weight: 500; }
.search-results span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.6; word-break: break-all; }
.search-hint { padding: 12px 16px; color: var(--muted); font: 9px var(--mono); }

/* ---- 加密文章（hexo-blog-encrypt 注入的 DOM，覆盖为纸感样式） ---- */
#hexo-blog-encrypt { margin: 30px 0; }
#hexo-blog-encrypt .hbe-input { font: 14px var(--mono); }
#hexo-blog-encrypt .hbe-input-field-xray { color: var(--ink); border-bottom-color: var(--ink); }
#hexo-blog-encrypt .hbe-input-field-xray:focus { border-bottom-color: var(--coral); }
#hexo-blog-encrypt .hbe-input-label-content-xray { color: var(--muted); }
#hexo-blog-encrypt .hbe-input-field-xray:focus ~ .hbe-input-label-xray .hbe-input-label-content-xray { color: var(--coral-text); }
/* xray 的可见"框线"其实是 SVG graphic 描边，插件默认绿 #84AF9B 与纸感色系无关，归并到主题变量 */
#hexo-blog-encrypt .hbe-graphic-xray { stroke: var(--muted); }
#hexo-blog-encrypt .hbe-input-field-xray:focus ~ .hbe-graphic-xray { stroke: var(--coral); }
/* "Encrypt again" 重加密按钮：插件默认蓝色渐变 + 立体阴影 + 右侧折角，覆盖为纸感（V9）。
   按钮文案是插件 JS 写死的英文，纯 CSS 改不了，改文案需在解密事件监听里加 JS */
#hexo-blog-encrypt .hbe-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: auto; padding: 7px 16px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 500 11px var(--mono); letter-spacing: .04em; text-align: center; text-indent: 0; text-shadow: none; box-shadow: none; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
#hexo-blog-encrypt .hbe-button-icon { flex: 0 0 auto; width: 13px; height: 13px; }
#hexo-blog-encrypt .hbe-button:hover { border-color: var(--coral-text); background: color-mix(in srgb, var(--coral-pale) 34%, transparent); color: var(--coral-text); }
#hexo-blog-encrypt .hbe-button:active { top: 0; box-shadow: none; }
#hexo-blog-encrypt .hbe-button::after { content: none; }

/* ---- 页脚 ---- */
.site-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 45px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font: 8px/1.7 var(--mono); }
.site-footer span:last-child { text-align: right; }

/* ---- 响应式：平板 ---- */
@media (max-width: 960px) {
  .blog-shell { grid-template-columns: 185px minmax(0, 1fr); }
  .journal-inner { width: min(100% - 56px, 820px); }
  .article-layout { grid-template-columns: 120px minmax(0, 1fr); }
  .article-layout .article-aside:last-child { display: none; }
}

/* ---- 文章页桌面 rail 收起为 64px 图标条，hover/focus 揭幕展开 ----
   grid 轨道固定 64px，rail 从 64px 裁切揭开到 216px，覆盖正文但不推挤正文。
   内部横向与垂直内容始终维持最终几何，只按节奏淡入；图标和底部头像不参与重排。 */
@media (min-width: 841px) {
  .blog-shell--slimrail { grid-template-columns: 64px minmax(0, 1fr); }
  /* 文章页 rail 是连接在页面左缘的揭幕层，不是浮卡：外层只裁切可见宽度，
     内部始终按最终 216px 排版，文字不会在 64→216px 期间逐帧换行。 */
  .blog-shell--slimrail .rail { width: 64px; overflow-x: hidden; transition: width var(--dur-mid) var(--ease); }
  /* 鼠标点击会保留普通 focus，但不应锁住展开态；键盘 focus-visible 仍可持续揭幕。 */
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) { width: 216px; z-index: 20; }
  .blog-shell--slimrail .rail-nav,
  .blog-shell--slimrail .rail-stat { width: 216px; flex: 0 0 auto; }
  /* 上下两条骨架线共用同一方向：左端固定在 rail x=20，向右揭开。 */
  .blog-shell--slimrail .rail-divider {
    width: 176px;
    flex: 0 0 auto;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-mid) var(--ease);
  }
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-divider { transform: scaleX(1); }
  .blog-shell--slimrail .rail-stat { white-space: nowrap; }

  /* 个人资料区始终保留展开态的最终几何，但文章 rail 中把头像行排在最后并贴底。
     次要块只在头像上方淡入，不再通过 display 插拔改变高度，因此头像坐标不受文字影响。 */
  .blog-shell--slimrail .rail-profile {
    width: 192px;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding-top: 0;
    border-top: 0;
  }
  .blog-shell--slimrail .rail-profile-details .rail-profile-stats { margin-top: 0; }
  .blog-shell--slimrail .rail-profile-head {
    position: relative;
    flex: 0 0 auto;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 0;
  }
  /* 下分割线与上分割线同锚点、同方向；几何宽度固定，避免 left/width 双插值
     让运动看起来既像平移又像拉伸。 */
  .blog-shell--slimrail .rail-profile-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    width: 176px;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-mid) var(--ease);
  }
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-profile-head::before {
    transform: scaleX(1);
  }
  .blog-shell--slimrail .rail-profile-head > div { min-width: 0; }

  /* 展开与内容显现采用重叠节奏：揭幕共 250ms，文字延迟 80ms 后淡入；
     收起时文字立即先淡出，visibility 等淡出结束后才关闭交互。 */
  .blog-shell--slimrail .rail-label,
  .blog-shell--slimrail .rail-count,
  .blog-shell--slimrail .rail-profile-head > div,
  .blog-shell--slimrail .rail-stat {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  /* 详情内含链接、模式按钮等交互元素；收起时延后关闭 visibility，避免不可见控件进入 Tab 序。 */
  .blog-shell--slimrail .rail-profile-details {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
  }
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-label,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-count,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-profile-head > div,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-stat,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-profile-details {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 80ms, 80ms, 80ms;
  }
  /* 图标对齐：两态共用同一 grid 与 padding，图标列中心 = 3(border)+17(padding)+13(半列宽)
     = 33px，恰为 64px 收起条的视觉中心；动画中途标签被挤压时不得换行撑高行高 */
  .blog-shell--slimrail .rail-nav a { padding-left: 17px; overflow: hidden; }
  .blog-shell--slimrail .rail-label { white-space: nowrap; }
  /* 头像与图标同线：两态左缘恒为 14px（中心 33px），不再单独居中 */
  .blog-shell--slimrail .rail-profile { margin-right: 10px; margin-left: 14px; }
}

/* 减少动态效果时连同重叠节奏的延迟一起取消，展开后立即得到完整可读内容。 */
@media (min-width: 841px) and (prefers-reduced-motion: reduce) {
  .blog-shell--slimrail .rail-profile-details {
    transition-delay: 0s !important;
  }
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-label,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-count,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-profile-head > div,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-stat,
  .blog-shell--slimrail .rail:is(:hover, :has(:focus-visible)) .rail-profile-details {
    transition-delay: 0s !important;
  }
}

/* ---- 响应式：结构层（rail 折叠为顶部导航；只动骨架，不动排版密度） ---- */
@media (max-width: 840px) {
  /* 窄屏展示隐藏页面滚动条，但不关闭页面滚动；滚轮/触摸/键盘仍可正常移动页面。 */
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .blog-shell { display: block; }
  .rail { position: sticky; top: 0; z-index: 5; display: block; min-height: 0; height: auto; overflow-y: visible; border-right: 0; border-bottom: 0; }
  .rail-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; }
  .rail-head strong { font-size: 13px; }
  .rail-head span { margin: 0; font-size: 10px; }
  /* 横滑导航：原生滚动条隐藏，位置指示器覆盖在标签内部、底部分隔线上方。
     哪边还有内容哪边渐隐，无可滚余量时完全不遮（D6）。 */
  .rail-nav-shell { position: relative; display: block; }
  .rail-nav { display: flex; overflow-x: auto; padding: 0; background: var(--paper-2); scrollbar-width: none; }
  .rail-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .rail-nav-scrollbar { position: absolute; z-index: 2; right: 0; bottom: 1px; left: 0; display: block; height: 3px; overflow: hidden; background: transparent; cursor: ew-resize; opacity: 0; pointer-events: none; transition: opacity var(--dur-mid) var(--ease); touch-action: none; }
  .rail-nav-scrollbar-thumb { display: block; width: var(--rail-nav-thumb-width, 0); height: 100%; background: color-mix(in srgb, var(--muted) 68%, transparent); transform: translateX(var(--rail-nav-thumb-x, 0)); }
  .rail-nav-shell.has-nav-overflow:hover .rail-nav-scrollbar,
  .rail-nav-shell.has-nav-overflow.is-dragging .rail-nav-scrollbar { opacity: 1; pointer-events: auto; }
  .rail-nav.is-dragging, .rail-nav.is-dragging a { cursor: grabbing; user-select: none; }
  .rail-nav.nav--more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  .rail-nav.nav--more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 26px); mask-image: linear-gradient(to right, transparent, #000 26px); }
  .rail-nav.nav--more-left.nav--more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
  /* 菜单不足一屏时用弹性尾项补齐底线；真正溢出时它收为 0，不改变 scrollWidth。 */
  .rail-nav::after { content: ""; flex: 1 0 0; min-width: 0; border-bottom: 1px solid var(--ink); }
  .rail-nav a { position: relative; flex: 0 0 auto; grid-template-columns: auto 1fr auto; min-height: 39px; padding: 0 13px; border-top: 2px solid transparent; border-right: 0; border-bottom: 1px solid var(--ink); border-left: 0; font-size: 11px; }
  /* 悬停只是次级预览：整块轻微变色，不借用当前页的珊瑚顶线。 */
  .rail-nav a:hover { border-top-color: transparent; border-bottom-color: var(--ink); border-left: 0; background: var(--nav-hover-shade); }
  /* 当前页的珊瑚线移到顶部；底边留空，像编辑器标签一样与下方页面连通。 */
  .rail-nav a.active { border-top-color: var(--coral); border-bottom-color: transparent; border-left: 0; background: var(--paper); }
  .rail-divider, .rail-stat, .rail-profile { display: none; }
  /* 色彩模式圆点挪进顶栏右侧：rail-head 是深底，描边改浅色 */
  .rail-head .rail-color-modes { display: flex; gap: 10px; margin-top: 0; }
  .rail-head .rail-color-modes-label { display: none; }
  .rail-head .color-mode-dot { position: relative; width: 16px; height: 16px; border-color: var(--head-subtle); }
  .rail-head .color-mode-dot.active { box-shadow: 0 0 0 2px var(--dark), 0 0 0 3px var(--coral); }
  /* 视觉圆点保持 16px，伪元素把命中区外扩 6px（≈28px 触点） */
  .rail-head .color-mode-dot::before { content: ""; position: absolute; inset: -6px; }
  .journal { min-height: calc(100svh - 111px); }
  /* rail 顶栏化后 aside 的 sticky 会钻到顶栏后面，此档起回归文档流 */
  .article-layout .article-aside { position: static; max-height: none; overflow: visible; }
  /* 锚点跳转偏移加大：sticky 顶栏（head+nav ≈ 85-111px）会盖住跳转目标 */
  .prose [id] { scroll-margin-top: 130px; }
}

/* ---- 响应式：手机紧凑层（字号、卡片、文章排版的移动化） ---- */
@media (max-width: 720px) {
  .journal-inner { width: calc(100% - 34px); padding: 21px 0 40px; }
  .journal-bar { padding-bottom: 11px; }
  .journal-brand { display: block; }
  .journal-brand span { display: block; margin-top: 3px; }
  .masthead { display: block; padding: 34px 0 25px; }
  .masthead h1 { font-size: 26px; }
  .masthead-copy { max-width: 470px; margin-top: 17px; }
  .masthead-meta { display: flex; align-items: baseline; gap: 11px; margin-top: 22px; padding: 0 0 0 11px; border-left: 2px solid var(--coral); }
  .masthead-meta strong { margin: 0; font-size: 17px; }
  .masthead-meta small { margin-left: auto; }
  /* 纵向卡片仍要撑满轮播轨道的统一高度：顶部图片/标题靠上，meta 由正文列的 auto margin 锚到底部。 */
  .featured { --featured-summary-lines: 2; display: flex; flex-direction: column; margin-top: 22px; box-shadow: 5px 5px 0 var(--ice-pale); }
  /* 窄屏 peek 收窄：邻居露边约 24px */
  .picks-card { flex-basis: calc(100% - 40px); margin-top: 0; }
  .featured-image { height: 190px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--ink); }
  .featured-copy { flex: 1 1 auto; padding: 19px; }
  .featured-copy h2 { margin-top: 14px; font-size: 22px; }
  .featured-meta { margin-top: auto; }
  .section-line { margin-top: 37px; }
  .entry-row, .entry-row--thumb { grid-template-columns: 29px minmax(0, 1fr); gap: 8px; min-height: 0; padding: 15px 0; }
  /* 手机端保留有图文章的缩略图，并从右侧小图改为正文下方的纵向通栏图。 */
  .entry-row--thumb .entry-thumb { grid-column: 2; width: 100%; height: auto; aspect-ratio: 8 / 5; margin-top: 5px; }
  .entry-row:hover { box-shadow: none; }
  .tool-row { grid-template-columns: 29px minmax(0, 1fr); gap: 8px; padding: 15px 0; }
  .tool-row:hover { box-shadow: none; }
  .entry-meta { grid-column: 2; text-align: left; }
  .entry-title { font-size: 14px; }
  .index-footer { font-size: 8px; }
  .pagination { margin-top: 16px; }
  .article-top { display: block; padding: 38px 0 25px; }
  .article-top h1 { font-size: 31px; }
  .article-lede { margin-top: 17px; }
  .article-meta-line { margin-top: 14px; }
  .article-layout { display: block; padding-top: 24px; }
  /* aside 的 static 回退已在 840 结构层处理；目录变成可折叠纸盒（初始收起由 JS 摘 open 实现）
     纵向 padding 挂在 summary 上：整个盒头都是点击区（挂容器上时点 padding 不触发开合） */
  .article-aside--toc .toc-fold { margin-bottom: 25px; padding: 0 14px; border: 1px solid var(--line); background: var(--paper-2); }
  .toc-fold summary { margin: 0; padding: 10px 0; cursor: pointer; pointer-events: auto; }
  /* 半角 + / −（U+2212）：mono 字体栈自带码位，全角字符会落到 CJK 兜底字体、基线不齐 */
  .toc-fold summary::after { content: "+"; float: right; color: var(--muted); }
  .toc-fold[open] summary::after { content: "\2212"; }
  .toc-fold[open] { padding-bottom: 10px; }
  .article-hero { height: 190px; margin-bottom: 24px; box-shadow: 5px 5px 0 var(--coral-pale); }
  .prose { font-size: 15px; line-height: 1.9; }
  .prose figure.highlight { --code-preview-lines: 5; }
  .prose h1 { font-size: 24px; }
  .prose h2 { margin-top: 34px; font-size: 21px; }
  /* 标题阶梯与桌面同比例收窄（桌面 = 正文 +2/+1/+0）：V7 只收了 h3 没覆盖 h4，
     17px 的 h4 在手机上反超 16px 的 h3（复审实锤层级倒置）；h5/h6 跟随正文 15px */
  .prose h3 { font-size: 17px; }
  .prose h4 { font-size: 16px; }
  .prose h5, .prose h6 { font-size: 15px; }
  /* blockquote 字号是显式声明不随容器继承缩小，需手动跟随，否则引用比正文还大 */
  .prose blockquote { font-size: 15px; }
  .article-end { margin-top: 25px; }
  .article-details { margin-top: 22px; }
  .site-footer { display: block; margin-top: 33px; }
  .site-footer span { display: block; }
  .site-footer span:last-child { margin-top: 8px; text-align: left; }
}