/* 文章与 Markdown 阅读页样式：仅在文章详情和 Markdown 预览器加载。 */
/* 从 site.css 迁移，保持原始规则顺序。 */

/* v8.6：文章详情页深色阅读体验优化 */
.article-reader.markdown-body{
  line-height:1.84;
}
.article-toc{
  color:var(--text);
}
.article-toc h3{
  color:var(--text);
}
.article-toc nav a{
  display:block;
  padding:4px 0;
  color:var(--muted);
  transition:color .16s ease, transform .16s ease;
}
.article-toc nav a:hover{
  color:var(--accent);
  transform:translateX(2px);
}

body.dark .article-toc{
  background:rgba(14,27,45,.88);
  border-color:rgba(125,211,252,.20);
}
body.dark .article-toc h3{
  color:#eef7ff;
}
body.dark .article-toc nav a{
  color:#b8cce4;
}
body.dark .article-toc nav a:hover{
  color:#7dd3fc;
}

body.dark .article-reader.markdown-body{
  background:rgba(14,27,45,.92);
  color:#d8e7f7;
  border-color:rgba(125,211,252,.18);
}
body.dark .markdown-body,
body.dark .markdown-body p,
body.dark .markdown-body li{
  color:#d8e7f7;
}
body.dark .markdown-body h1,
body.dark .markdown-body h2,
body.dark .markdown-body h3,
body.dark .markdown-body h4{
  color:#f4f9ff;
  border-color:rgba(148,163,184,.26);
}
body.dark .markdown-body a{
  color:#7dd3fc;
}
body.dark .markdown-body a:hover{
  color:#bae6fd;
}
body.dark .markdown-body strong{
  color:#ffffff;
}
body.dark .markdown-body em{
  color:#c8ddf4;
}
body.dark .markdown-body code{
  background:rgba(15,23,42,.92);
  color:#bfdbfe;
  border-color:rgba(125,211,252,.22);
}
body.dark .markdown-body pre{
  background:#08111f;
  color:#dbeafe;
  border:1px solid rgba(125,211,252,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.dark .markdown-body pre code{
  color:inherit;
}
body.dark .markdown-body blockquote{
  background:rgba(56,189,248,.08);
  color:#d2e6fb;
  border-left-color:#38bdf8;
}
body.dark .markdown-body table th{
  background:rgba(30,48,76,.86);
  color:#f4f9ff;
}
body.dark .markdown-body table td{
  color:#d8e7f7;
  border-color:rgba(148,163,184,.26);
}
body.dark .markdown-body hr{
  border-top-color:rgba(148,163,184,.24);
}

/* v9.5：深色模式组件回归深色 + Markdown 阅读区重编排 */

/* 深色模式下，所有文章/列表/卡片容器必须跟随深色主题，不再残留羊皮纸色 */
body.dark .container,
body.dark .page-grid,
body.dark .section,
body.dark .article-list{
  color:var(--text);
}
body.dark .card,
body.dark .post-card,
body.dark .featured-card,
body.dark .small-friend,
body.dark .toolbar-panel,
body.dark .article-toc,
body.dark .friend-detail-hero{
  background:rgba(17,28,46,.84) !important;
  background-color:rgba(17,28,46,.84) !important;
  border-color:#243449 !important;
  color:#e6f0ff;
}
body.dark .post-card p{
  color:#a8bad1;
}
body.dark .post-thumb,
body.dark .page-hero,
body.dark .hero-banner,
body.dark .friend-cover{
  background-color:#101d31 !important;
}
body.dark .post-thumb.cover-mode-contain,
body.dark .page-hero.cover-mode-contain{
  background-color:#101d31 !important;
}
body.dark .tag,
body.dark .pill,
body.dark .btn{
  background:rgba(19,43,66,.72) !important;
  background-color:rgba(19,43,66,.72) !important;
  border-color:#2b4360 !important;
  color:#cfe6ff !important;
}
body.dark .searchbox,
body.dark input,
body.dark textarea,
body.dark select{
  background:#0f1a2b !important;
  border-color:#334155 !important;
  color:#e6f0ff !important;
}
body.dark .section-head,
body.dark .section-head h2,
body.dark .logo{
  color:#e6f0ff !important;
}

/* Markdown 正文：浅色羊皮纸阅读感 */
.prose,
.article-content,
.article-body,
.markdown-body,
.post-content{
  color:#3f2f22;
}
.prose h1,.prose h2,.prose h3,.prose h4,
.article-content h1,.article-content h2,.article-content h3,.article-content h4,
.article-body h1,.article-body h2,.article-body h3,.article-body h4,
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,
.post-content h1,.post-content h2,.post-content h3,.post-content h4{
  color:#3b2a1e;
  letter-spacing:.01em;
}
.prose p,.article-content p,.article-body p,.markdown-body p,.post-content p,
.prose li,.article-content li,.article-body li,.markdown-body li,.post-content li{
  color:#4f3c2c;
}
.prose a,.article-content a,.article-body a,.markdown-body a,.post-content a{
  color:#8f5f2a;
  border-bottom:1px solid rgba(143,95,42,.32);
}
.prose blockquote,.article-content blockquote,.article-body blockquote,.markdown-body blockquote,.post-content blockquote{
  margin:1.4em 0;
  padding:14px 18px;
  border-left:4px solid #b7793b;
  background:rgba(246,220,181,.50);
  color:#5e4632;
  border-radius:0 14px 14px 0;
}
.prose code,.article-content code,.article-body code,.markdown-body code,.post-content code{
  background:#f1d6ab;
  color:#71431e;
  border:1px solid rgba(183,121,59,.22);
  border-radius:7px;
  padding:.14em .38em;
  font-size:.92em;
}
.prose pre,.article-content pre,.article-body pre,.markdown-body pre,.post-content pre{
  background:#2f251f !important;
  color:#f3e6d4 !important;
  border:1px solid rgba(143,95,42,.42);
  border-radius:16px;
  padding:18px 20px;
  overflow:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.prose pre code,.article-content pre code,.article-body pre code,.markdown-body pre code,.post-content pre code{
  background:transparent !important;
  color:inherit !important;
  border:0;
  padding:0;
}
.prose table,.article-content table,.article-body table,.markdown-body table,.post-content table{
  border:1px solid rgba(217,189,148,.82);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,242,220,.58);
}
.prose th,.article-content th,.article-body th,.markdown-body th,.post-content th{
  background:#ead2ae;
  color:#3f2f22;
}
.prose td,.prose th,
.article-content td,.article-content th,
.article-body td,.article-body th,
.markdown-body td,.markdown-body th,
.post-content td,.post-content th{
  border-color:rgba(217,189,148,.82);
}
.prose hr,.article-content hr,.article-body hr,.markdown-body hr,.post-content hr{
  border:0;
  border-top:1px solid rgba(217,189,148,.82);
  margin:2em 0;
}

/* Markdown 正文：深色阅读感，去掉浅绿/突兀代码块 */
body.dark .prose,
body.dark .article-content,
body.dark .article-body,
body.dark .markdown-body,
body.dark .post-content{
  color:#dbeafe;
}
body.dark .prose h1,body.dark .prose h2,body.dark .prose h3,body.dark .prose h4,
body.dark .article-content h1,body.dark .article-content h2,body.dark .article-content h3,body.dark .article-content h4,
body.dark .article-body h1,body.dark .article-body h2,body.dark .article-body h3,body.dark .article-body h4,
body.dark .markdown-body h1,body.dark .markdown-body h2,body.dark .markdown-body h3,body.dark .markdown-body h4,
body.dark .post-content h1,body.dark .post-content h2,body.dark .post-content h3,body.dark .post-content h4{
  color:#f0f7ff !important;
}
body.dark .prose p,body.dark .article-content p,body.dark .article-body p,body.dark .markdown-body p,body.dark .post-content p,
body.dark .prose li,body.dark .article-content li,body.dark .article-body li,body.dark .markdown-body li,body.dark .post-content li{
  color:#c7d9ee !important;
}
body.dark .prose a,body.dark .article-content a,body.dark .article-body a,body.dark .markdown-body a,body.dark .post-content a{
  color:#7dd3fc !important;
  border-bottom:1px solid rgba(125,211,252,.32);
}
body.dark .prose blockquote,body.dark .article-content blockquote,body.dark .article-body blockquote,body.dark .markdown-body blockquote,body.dark .post-content blockquote{
  background:rgba(19,43,66,.66) !important;
  border-left-color:#38bdf8 !important;
  color:#cfe6ff !important;
}
body.dark .prose code,body.dark .article-content code,body.dark .article-body code,body.dark .markdown-body code,body.dark .post-content code{
  background:#172033 !important;
  color:#bae6fd !important;
  border:1px solid #2b4360 !important;
}
body.dark .prose pre,body.dark .article-content pre,body.dark .article-body pre,body.dark .markdown-body pre,body.dark .post-content pre{
  background:#08111f !important;
  color:#dbeafe !important;
  border:1px solid #243449 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 32px rgba(0,0,0,.22);
}
body.dark .prose pre code,body.dark .article-content pre code,body.dark .article-body pre code,body.dark .markdown-body pre code,body.dark .post-content pre code{
  background:transparent !important;
  color:inherit !important;
  border:0 !important;
}
body.dark .prose table,body.dark .article-content table,body.dark .article-body table,body.dark .markdown-body table,body.dark .post-content table{
  background:rgba(15,26,43,.76) !important;
  border-color:#243449 !important;
}
body.dark .prose th,body.dark .article-content th,body.dark .article-body th,body.dark .markdown-body th,body.dark .post-content th{
  background:#172033 !important;
  color:#e6f0ff !important;
}
body.dark .prose td,body.dark .prose th,
body.dark .article-content td,body.dark .article-content th,
body.dark .article-body td,body.dark .article-body th,
body.dark .markdown-body td,body.dark .markdown-body th,
body.dark .post-content td,body.dark .post-content th{
  border-color:#243449 !important;
}
body.dark .prose hr,body.dark .article-content hr,body.dark .article-body hr,body.dark .markdown-body hr,body.dark .post-content hr{
  border-top-color:#243449 !important;
}

/* highlight.js / Chroma 常见 token 兜底：避免浅绿背景块 */
body.dark .chroma,
body.dark .highlight,
body.dark .highlight pre,
body.dark pre.chroma{
  background:#08111f !important;
  color:#dbeafe !important;
}
body.dark .chroma .k,body.dark .highlight .k{color:#93c5fd !important}
body.dark .chroma .s,body.dark .highlight .s{color:#a7f3d0 !important;background:transparent !important}
body.dark .chroma .c,body.dark .highlight .c{color:#7e91aa !important;background:transparent !important}
body.dark .chroma .n,body.dark .highlight .n{color:#dbeafe !important;background:transparent !important}
body.dark .chroma span,
body.dark .highlight span{
  background:transparent !important;
}


/* v9.6：文章目录折叠，给 Markdown 正文让出空间 */
.article-shell{
  grid-template-columns:minmax(0,1fr) 72px !important;
  gap:18px !important;
}
.article-shell[data-toc-state="expanded"]{
  grid-template-columns:minmax(0,1fr) 240px !important;
}
.article-reader{
  max-width:960px;
  width:100%;
  justify-self:center;
}
.article-toc{
  padding:12px !important;
  width:72px;
  min-height:64px;
  transition:width .2s ease, padding .2s ease, opacity .2s ease;
}
.article-shell[data-toc-state="expanded"] .article-toc{
  width:240px;
  padding:18px !important;
}
.toc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.toc-head h3{
  margin:0;
  white-space:nowrap;
  font-size:15px;
}
.toc-toggle{
  border:1px solid var(--border);
  background:rgba(246,220,181,.72);
  color:var(--accent-2);
  border-radius:999px;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.article-shell[data-toc-state="collapsed"] .article-toc h3{
  writing-mode:vertical-rl;
  letter-spacing:.12em;
  margin:0 auto;
}
.article-shell[data-toc-state="collapsed"] .toc-head{
  flex-direction:column;
}
.article-shell[data-toc-state="collapsed"] .toc-body{
  display:none;
}
.article-shell[data-toc-state="expanded"] .toc-body{
  display:block;
  margin-top:12px;
}
.article-shell[data-toc-state="expanded"] .article-toc a{
  line-height:1.55;
}
body.dark .toc-toggle{
  background:rgba(19,43,66,.86) !important;
  border-color:#2b4360 !important;
  color:#cfe6ff !important;
}
@media (max-width: 980px){
  .article-shell{
    grid-template-columns:1fr !important;
  }
  .article-toc{
    display:none !important;
  }
}

/* v9.8：进一步增宽 Markdown 阅读区 */
.article-shell{
  grid-template-columns:minmax(0,1fr) 56px !important;
  gap:14px !important;
}
.article-shell[data-toc-state="expanded"]{
  grid-template-columns:minmax(0,1fr) 210px !important;
  gap:18px !important;
}
.article-reader{
  max-width:1120px !important;
  width:100%;
  padding-left:42px !important;
  padding-right:42px !important;
}
.article-toc{
  width:56px !important;
}
.article-shell[data-toc-state="expanded"] .article-toc{
  width:210px !important;
}
.markdown-body{
  font-size:17.5px;
}
.markdown-body p,
.markdown-body li{
  line-height:1.82;
}

/* 宽屏再给正文多一点空间，但不拉到难读的程度 */
@media (min-width: 1380px){
  .article-reader{
    max-width:1180px !important;
  }
}

/* 小平板/窄桌面也尽量正文优先 */
@media (min-width: 761px) and (max-width: 1100px){
  .article-shell{
    grid-template-columns:minmax(0,1fr) 52px !important;
    gap:12px !important;
  }
  .article-shell[data-toc-state="expanded"]{
    grid-template-columns:minmax(0,1fr) 190px !important;
  }
  .article-reader{
    max-width:none !important;
    padding-left:30px !important;
    padding-right:30px !important;
  }
  .article-toc{
    width:52px !important;
  }
  .article-shell[data-toc-state="expanded"] .article-toc{
    width:190px !important;
  }
}

/* 手机端也稍微吃满屏幕，但保留一点呼吸感 */
@media (max-width: 760px){
  .container{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .article-reader{
    max-width:none !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}
@media (max-width: 420px){
  .container{
    padding-left:6px !important;
    padding-right:6px !important;
  }
  .article-reader{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

/* 文章封面：取消历史遮罩与白边，保持原图展示策略。 */
.article-cover-hero{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden!important;
  padding:0!important;
  min-height:270px!important;
}
.article-cover-hero::before,
.article-cover-hero::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  background:none!important;
  pointer-events:none!important;
}
body.dark .article-cover-hero::before,
body.dark .article-cover-hero::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  background:none!important;
}
.article-cover-hero.cover-mode-contain{
  background-size:contain!important;
  background-position:center!important;
  background-color:transparent!important;
}
body.dark .article-cover-hero.cover-mode-contain{
  background-color:transparent!important;
}
@media(max-width:820px){
  .article-cover-hero{
    min-height:210px!important;
    border-radius:22px!important;
    margin-bottom:22px!important;
  }
}
@media(max-width:430px){
  .article-cover-hero{
    min-height:178px!important;
    border-radius:18px!important;
  }
}

/* 真实封面图片不使用 cover，避免裁切和比例失真。 */
.article-cover-hero.article-cover-actual-image{
  display:block!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background-image:none!important;
  background-color:transparent!important;
}
.article-cover-hero.article-cover-actual-image::before,
.article-cover-hero.article-cover-actual-image::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  background:none!important;
}
.article-cover-img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  outline:0!important;
  margin:0!important;
  padding:0!important;
}

/* 文章详情的可读区域统一为液态玻璃，保留页面场景并避免文字直接压在背景上。 */
body[data-page-section="posts"] .article-intro,
body[data-page-section="posts"] .article-reader,
body[data-page-section="posts"] .article-toc{
  border:1px solid rgba(235,246,255,.34)!important;
  background:linear-gradient(135deg,rgba(244,251,255,.22),rgba(108,146,181,.16) 52%,rgba(23,49,80,.24))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 48px rgba(4,13,27,.18)!important;
  backdrop-filter:blur(16px) saturate(128%);
  -webkit-backdrop-filter:blur(16px) saturate(128%);
}
body.dark[data-page-section="posts"] .article-intro,
body.dark[data-page-section="posts"] .article-reader,
body.dark[data-page-section="posts"] .article-toc{
  border-color:rgba(171,207,239,.28)!important;
  background:linear-gradient(135deg,rgba(35,66,103,.38),rgba(8,23,46,.28) 54%,rgba(6,15,31,.38))!important;
  box-shadow:inset 0 1px 0 rgba(212,236,255,.18),0 18px 48px rgba(0,0,0,.26)!important;
}
@media(max-width:760px){
  body[data-page-section="posts"] .article-intro,
  body[data-page-section="posts"] .article-reader,
  body[data-page-section="posts"] .article-toc{backdrop-filter:blur(11px) saturate(120%);-webkit-backdrop-filter:blur(11px) saturate(120%)}
}

/* 长文正文略比外围玻璃更实，保证连续阅读时的对比度。 */
body[data-page-section="posts"] .article-reader{background:linear-gradient(135deg,rgba(244,251,255,.42),rgba(108,146,181,.34) 52%,rgba(23,49,80,.44))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 18px 48px rgba(4,13,27,.26)!important;}
body.dark[data-page-section="posts"] .article-reader{background:linear-gradient(135deg,rgba(35,66,103,.64),rgba(8,23,46,.54) 54%,rgba(6,15,31,.64))!important;box-shadow:inset 0 1px 0 rgba(212,236,255,.28),0 18px 48px rgba(0,0,0,.38)!important;}

/* 阅读页收口：目录作为正文外缘工具，下载和后续阅读不再各占一张大卡。 */
body[data-page-section="posts"] .article-intro{
  padding-right:156px !important;
}
.article-intro-download{
  position:absolute;
  right:34px;
  bottom:25px;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--article-line-strong, var(--border));
  border-radius:999px;
  background:color-mix(in srgb, var(--article-surface-strong, var(--panel)) 82%, transparent);
  color:var(--article-ink, var(--text));
  font:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.article-intro-download:hover,
.article-intro-download:focus-visible{
  transform:translateY(-2px);
  border-color:var(--article-accent, var(--accent));
  background:color-mix(in srgb, var(--article-accent-soft, var(--soft-blue)) 76%, transparent);
  outline:none;
}
.article-shell{
  grid-template-columns:minmax(0,1120px) 56px !important;
  justify-content:center;
  gap:14px !important;
}
.article-shell[data-toc-state="expanded"]{
  grid-template-columns:minmax(0,1120px) 210px !important;
  gap:14px !important;
}
.article-shell .article-reader{
  max-width:none !important;
  justify-self:stretch;
}
.article-shell .article-toc{
  align-self:start;
}
.article-explore{
  width:min(900px,100%);
  margin:26px auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.article-explore__sequence,
.article-explore__related{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.article-explore__step,
.article-explore__related-item{
  min-width:0;
  max-width:270px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid var(--article-line, var(--border));
  border-radius:10px;
  color:var(--article-ink, var(--text));
  background:color-mix(in srgb, var(--article-surface, var(--panel)) 66%, transparent);
  box-shadow:none;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.article-explore__step{flex:0 1 250px;}
.article-explore__related-item{flex:0 1 200px;}
.article-explore__step--next{justify-content:flex-end;text-align:right;}
.article-explore__step:hover,
.article-explore__step:focus-visible,
.article-explore__related-item:hover,
.article-explore__related-item:focus-visible{
  transform:translateY(-2px);
  border-color:var(--article-line-strong, var(--accent));
  background:var(--article-surface-strong, var(--panel));
  outline:none;
}
.article-explore__step span:not(.article-explore__arrow),
.article-explore__related-item > span:last-child{min-width:0;display:grid;gap:3px;}
.article-explore small,
.article-explore__index{color:var(--article-muted, var(--muted));font-size:11px;font-weight:750;}
.article-explore strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.3;}
.article-explore__arrow{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:999px;background:var(--article-accent-soft, var(--soft-blue));color:var(--article-accent, var(--accent));}
.article-explore__arrow .ui-icon{display:grid;place-items:center;}
.article-explore__index{flex:0 0 auto;letter-spacing:.08em;}
@media(max-width:980px){
  body[data-page-section="posts"] .article-intro{padding-right:34px !important;padding-bottom:78px !important;}
  .article-intro-download{right:34px;bottom:25px;}
  .article-shell,
  .article-shell[data-toc-state="expanded"]{grid-template-columns:minmax(0,1fr) !important;}
}
@media(max-width:720px){
  .article-explore__sequence,
  .article-explore__related{justify-content:stretch;}
  .article-explore__step,
  .article-explore__related-item{flex:1 1 100%;max-width:none;}
  .article-explore__related-item{padding:12px 14px;}
}
@media(max-width:520px){
  body[data-page-section="posts"] .article-intro{padding-right:18px !important;padding-left:18px !important;}
  .article-intro-download{right:18px;bottom:18px;}
}

/* 宽屏下目录完全游离于正文玻璃之外。
   展开、收起共用同一个右侧锚点，避免收起时回流到正文网格中。 */
@media(min-width:981px){
  .article-shell,
  .article-shell[data-toc-state="expanded"],
  .article-shell[data-toc-state="collapsed"]{
    position:relative;
    display:block !important;
  }
  .article-shell > .article-toc{
    position:absolute !important;
    z-index:4;
    top:18px;
    /* 容器有 34px 内边距；这里跨过它并保留随视口微调的场景间隙。 */
    left:calc(100% + clamp(52px, 4vw, 68px));
    margin:0;
    align-self:auto;
  }
  .article-shell[data-toc-state="expanded"] > .article-toc{
    width:210px !important;
  }
}

/* 正文独立居中；两侧保留等宽场景空间，右侧空间承托目录。
   展开/收起目录只改变侧栏，不改变正文的宽度和水平位置。 */
@media(min-width:981px){
  body[data-page-section="posts"] main.container:has(.article-shell){
    --reader-rail-width:210px;
    --reader-rail-gap:22px;
    --reader-edge:18px;
    width:min(1120px, calc(100% - 2 * (var(--reader-rail-width) + var(--reader-rail-gap) + var(--reader-edge)))) !important;
    max-width:1120px !important;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
  }
  .article-shell,
  .article-shell[data-toc-state="expanded"],
  .article-shell[data-toc-state="collapsed"]{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}
@media(min-width:981px) and (max-width:1279px){
  body[data-page-section="posts"] main.container:has(.article-shell){
    --reader-rail-width:160px;
    --reader-rail-gap:16px;
  }
}

/* 嵌套目录树：层级用枝干和缩进表达，而非一串平铺链接。 */
.article-toc .toc-tree ul{
  margin:0;
  padding:0;
  list-style:none;
}
.article-toc .toc-tree li{
  position:relative;
  min-width:0;
}
.article-toc .toc-tree li > a{
  position:relative;
  overflow:hidden;
  display:block;
  padding:6px 2px 6px 14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.article-toc .toc-tree > ul > li > a::before,
.article-toc .toc-tree li > ul > li > a::before{
  position:absolute;
  top:50%;
  left:0;
  width:7px;
  height:1px;
  background:color-mix(in srgb, var(--article-line-strong, var(--border)) 82%, transparent);
  content:"";
}
.article-toc .toc-tree > ul > li > a::after{
  position:absolute;
  top:50%;
  left:0;
  width:5px;
  height:5px;
  border:1px solid var(--article-accent, var(--accent));
  border-radius:50%;
  background:var(--article-surface, var(--panel));
  content:"";
  transform:translateY(-50%);
}
.article-toc .toc-tree li > ul{
  margin-left:7px;
  padding-left:12px;
  border-left:1px solid color-mix(in srgb, var(--article-line, var(--border)) 72%, transparent);
}
.article-toc .toc-tree li > ul > li:last-child::after{
  position:absolute;
  bottom:0;
  left:-13px;
  width:1px;
  height:50%;
  background:var(--page-bg, transparent);
  content:"";
}

/* 嵌套 ul 已提供每层树枝缩进；旧版平铺目录的 li 外边距不能再次叠加。
   仅作用于阅读页目录树，保留卡片尺寸、字重和原有树枝间距。 */
html body .article-toc .toc-tree li{
  margin-left:0!important;
}
html body .article-toc .toc-tree li > a{
  white-space:normal;
  overflow-wrap:anywhere;
  text-overflow:clip;
}
/* Narrow desktop rails need space for all six heading levels. Keep the same
   tree and connector styling, with a smaller branch step only in this range. */
@media(min-width:981px) and (max-width:1200px){
  .article-toc .toc-tree li > ul{margin-left:5px;padding-left:7px}
  .article-toc .toc-tree li > ul > li:last-child::after{left:-8px}
}

/* 画册式详情页：一层阅读底板，封面、标题与正文沿同一条阅读轴。 */
html body main.container:has([data-article-layout="album"]) :is(.article-intro.article-heading,.article-reader){
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;
}
html body main.container:has([data-article-layout="album"]) .article-shell{padding:0!important}
html body main.container:has([data-article-layout="album"]) .article-reading-divider{
  width:100%;height:0;margin:26px 0 28px;border:0;border-top:2px solid rgba(55,82,108,.48);
}
html body.dark main.container:has([data-article-layout="album"]) .article-reading-divider{border-top-color:rgba(186,210,235,.5)}
html body main.container:has([data-article-layout="album"]) .article-reading-divider + .article-shell{margin-top:0}
html body[data-page-section="posts"] .article-intro.article-heading{
  --heading-text:#162d42;--heading-muted:#486176;--heading-rule:rgba(55,82,108,.18);
  display:block;overflow:visible;position:relative;margin:18px 0 0;min-height:0;box-sizing:border-box;
}
html body.dark .article-intro.article-heading{--heading-text:#eef4fb;--heading-muted:#c0d2e5;--heading-rule:rgba(186,210,235,.18)}
.article-heading__cover{position:relative;margin:0;text-align:center;--cover-max-height:520px}
.article-heading__cover img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--cover-max-height);margin:0 auto;object-fit:contain;border-radius:8px;box-shadow:0 8px 24px rgba(5,15,27,.12)}
.article-heading__cover[data-cover-state="loading"]{min-height:clamp(160px,20vw,260px)}
.article-heading__cover[data-cover-state="loading"] img{opacity:0}
.article-heading__cover-loading,.article-heading__cover-error{display:none;color:var(--heading-muted);font-size:12px;line-height:1.6}
.article-heading__cover[data-cover-state="loading"] .article-heading__cover-loading{display:block;position:absolute;inset:0;align-content:center}
.article-heading__cover[data-cover-state="error"]{min-height:140px;display:grid;place-items:center}
.article-heading__cover[data-cover-state="error"] img{display:none}
.article-heading__cover[data-cover-state="error"] .article-heading__cover-error{display:block}
.article-heading__main{min-width:0;margin-top:28px;color:var(--heading-text)}
.article-heading__eyebrow{display:block;margin-bottom:10px;color:var(--heading-muted);font-size:11px;font-weight:700;letter-spacing:.16em}
html body .article-intro.article-heading h1{margin:10px 0 0;color:var(--heading-text);font-size:32px!important;line-height:1.3;overflow-wrap:anywhere}
.article-heading__summary{position:relative;margin:14px 0 0;color:var(--heading-muted);font-size:15px;line-height:1.8;overflow-wrap:anywhere}
.article-heading__summary-source{display:block}
.article-heading__summary.is-typing .article-heading__summary-source{opacity:0}
.article-heading__summary-visual{position:absolute;inset:0;pointer-events:none;user-select:none}
.article-heading__cursor{display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:currentColor;animation:articleSummaryCursor .7s step-end infinite}
@keyframes articleSummaryCursor{50%{opacity:0}}
.article-heading .meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;padding:0;border:0;font-size:12px;line-height:1.6}
/* Keep legacy metadata styles from overriding this page's foreground. */
html body .article-heading .meta-row,
html body .article-heading .meta-row span,
html body .article-heading .meta-row a{color:var(--heading-muted)!important}
.article-heading .meta-row > *{min-width:0;overflow-wrap:anywhere}
.article-heading .meta-row .meta-icon-item{gap:5px;flex-wrap:wrap}
.article-heading .meta-row .views{margin-left:0}
html body .article-heading .meta-row a:is(:hover,:focus-visible){color:var(--heading-text)!important}
.article-heading__footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:18px;color:var(--heading-muted);font-size:12px}
.article-heading__tags{display:flex;flex-wrap:wrap;gap:8px 12px;min-width:0}
html body .article-heading__tags .tag{margin:0;padding:0;min-width:0;overflow-wrap:anywhere;font-size:12px;color:var(--heading-muted)!important;background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important;transform:none!important}
html body .article-heading__tags .tag:is(:hover,:focus-visible){color:var(--heading-text)!important;text-decoration:underline}
html body .article-heading .article-intro-download{position:static;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin:0 0 0 auto;min-height:44px;padding:6px 0;font-size:12px;font-weight:500;color:var(--heading-muted);background:transparent;border:0;border-radius:0;box-shadow:none;transform:none}
html body .article-heading .article-intro-download:is(:hover,:focus-visible){color:var(--heading-text);background:transparent;transform:none;text-decoration:underline}
.article-heading .article-intro-download .ui-icon{--ui-icon-size:16px}
.article-heading :is(a,button):focus-visible{outline:2px solid var(--heading-muted);outline-offset:4px}
@media(max-width:600px){
  html:root body main.container:has([data-article-layout="album"]){padding-left:20px!important;padding-right:20px!important}
  .article-heading__cover{--cover-max-height:50svh}
  .article-heading__main{margin-top:20px}
  html body .article-intro.article-heading h1{font-size:26px!important}
  .article-heading__eyebrow{font-size:10px;margin-bottom:7px}
  .article-heading .article-intro-download{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.article-heading__cursor{animation:none}}

/* 右侧轨道与正文等高，目录在轨道内吸顶，到正文末尾停止，不遮挡后续阅读。 */
@media(min-width:981px){
  html:has(.article-toc-rail),body:has(.article-toc-rail){overflow-x:clip}
  /* Match tools/Markdown's stable gutter, including direct article loads. */
  html:has(.article-toc-rail){scrollbar-gutter:stable}
  body[data-page-section="posts"] main.container:has(.article-toc-rail){overflow:visible!important}
  .article-toc-rail{position:absolute;top:18px;bottom:0;left:calc(100% + 34px + var(--reader-rail-gap,22px));width:var(--reader-rail-width,210px)}
  html body .article-shell[data-toc-state="expanded"] .article-toc-rail > .article-toc{width:100%!important}
  html body .article-toc-rail > .article-toc{
    position:sticky!important;top:96px;left:auto;margin:0;
    display:flex;flex-direction:column;
    max-height:calc(100dvh - 120px);min-height:0;box-sizing:border-box;
    overflow:hidden;
  }
  .article-toc-rail .toc-head{flex:0 0 auto}
  .article-toc-rail .toc-body{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
}
@media(max-width:980px){.article-toc-rail{display:none}}

/* A sticky navigation surface must not move its own pointer hit area on hover. */
html body .article-toc,
html body .article-toc:hover,
html body .article-toc:focus-visible{
  transform:none;
}
html body .article-toc nav a,
html body .article-toc nav a:hover{
  transform:none;
}