:root{--ink:#17221d;--soft:#657169;--green:#0b7658;--gold:#c89c48;--paper:#f7f5ef;--white:#fff;--line:#dedfd9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.78 system-ui,"Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.container{width:min(1140px,calc(100% - 36px));margin:auto}.site-head{background:#fffc;border-bottom:1px solid var(--line);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}.head-inner{height:72px;display:flex;align-items:center;gap:28px}.logo{font:700 24px Georgia,"Songti SC",serif;letter-spacing:-1px}.logo i{font-style:normal;color:var(--green)}.nav{display:flex;gap:22px;margin-left:auto;color:#45524b;font-size:14px}.head-search{display:flex;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px}.head-search input{border:0;outline:0;background:transparent;padding:6px 10px;width:190px}.head-search button{border:0;border-radius:50%;background:var(--ink);color:#fff;width:32px;height:32px}.hero{padding:86px 0 66px;text-align:center;background:radial-gradient(circle at 50% -20%,#dce9df 0,transparent 54%)}.hero .eyebrow{color:var(--green);font-weight:700;letter-spacing:.18em}.hero h1{font:700 clamp(48px,8vw,86px)/1.04 Georgia,"Songti SC",serif;margin:14px 0 8px}.hero h2{margin:0;font-size:22px;font-weight:500}.hero p{color:var(--soft);margin:10px 0 30px}.big-search{width:min(660px,100%);margin:auto;display:flex;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px;box-shadow:0 18px 50px #25413312}.big-search input{flex:1;border:0;outline:0;padding:12px;font-size:16px;min-width:0}.big-search button{border:0;border-radius:10px;padding:0 22px;background:var(--green);color:#fff;font-weight:700}.section{padding:52px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-head h2{font:700 28px Georgia,"Songti SC",serif;margin:0}.section-head a{color:var(--green);font-size:14px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.category-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;min-height:140px;transition:.2s}.category-card:hover{transform:translateY(-3px);border-color:#9dbbae}.category-card b{font-size:18px}.category-card p{color:var(--soft);font-size:14px}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.article-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;display:flex;flex-direction:column}.article-card .thumb{width:100%;height:auto;max-height:520px;display:block;object-fit:contain;background:#eef3f0}.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:6px}.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);font-size:14px;text-decoration:none}.pager .pg:hover{border-color:var(--green);color:var(--green)}.pager .pg.current{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}.pager .pg.disabled{opacity:.45}.pager .pg.gap{border:0;background:none;min-width:16px;padding:0}.article-card .text{padding:20px;display:flex;flex-direction:column;flex:1}.article-card h3{font-size:19px;line-height:1.45;margin:7px 0 10px}.article-card p{color:var(--soft);font-size:14px;margin:0 0 18px}.meta{margin-top:auto;color:#7d8882;font-size:12px;display:flex;gap:9px}.chip{display:inline-flex;color:var(--green);font-size:12px;font-weight:700}.topic-strip{display:flex;gap:10px;flex-wrap:wrap}.topic-strip a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px}.page-hero{padding:56px 0 34px;border-bottom:1px solid var(--line)}.page-hero h1{font:700 40px/1.2 Georgia,"Songti SC",serif;margin:6px 0}.page-hero p{color:var(--soft);max-width:760px}.breadcrumbs{font-size:13px;color:var(--soft);padding-top:22px}.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(0,260px);gap:72px;align-items:start;padding:36px 0 70px}.article-title{font:700 clamp(34px,5vw,54px)/1.2 Georgia,"Songti SC",serif;margin:10px 0 18px}.lead{font-size:19px;color:#526158;border-left:3px solid var(--gold);padding-left:18px}.article-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--soft);font-size:13px;padding:16px 0 28px;border-bottom:1px solid var(--line)}.prose{font-size:17px;line-height:1.9;padding-top:20px}.prose h2{font:700 29px/1.35 Georgia,"Songti SC",serif;margin:2em 0 .7em}.prose h3{font-size:21px;margin-top:1.8em}.prose p{margin:1em 0}.prose blockquote{margin:1.5em 0;padding:12px 20px;background:#edf3ef;border-left:4px solid var(--green)}.prose pre{overflow:auto;background:#15221c;color:#e9f2ed;border-radius:12px;padding:18px;line-height:1.55}.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px}.prose img{display:block;border-radius:12px;margin:24px auto}.prose video{display:block;width:100%;max-width:100%;border-radius:12px;margin:24px auto;background:#000}.source-card,.aside-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:28px}.source-card h2,.aside-card h2{font-size:17px;margin-top:0}.source-card .button{display:inline-flex;background:var(--ink);color:#fff;border-radius:9px;padding:9px 14px;margin-top:8px}.aside-card{position:sticky;top:95px;margin:0}.aside-card a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}.aside-card a:last-child{border-bottom:0}.empty{text-align:center;padding:60px;color:var(--soft)}.pagination{display:flex;justify-content:center;gap:8px;padding-top:28px}.pagination a{background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:8px}.site-foot{background:var(--ink);color:#d7e0db;padding:48px 0;margin-top:30px}.foot-grid{display:flex;justify-content:space-between;gap:30px}.site-foot p{color:#9caf9f;font-size:14px}.site-foot a{color:#d7e0db}.copyright{border-top:1px solid #ffffff1f;margin-top:28px;padding-top:20px;font-size:12px;color:#91a198}@media(max-width:860px){.nav{display:none}.head-search{margin-left:auto}.head-search input{display:none}.article-grid,.category-grid{grid-template-columns:1fr 1fr}.article-layout{grid-template-columns:minmax(0,1fr);gap:30px}.aside-card{position:static}.hero{padding:58px 0}.foot-grid{display:block}}@media(max-width:580px){.article-grid,.category-grid{grid-template-columns:1fr}.head-inner{height:62px}.hero h2{font-size:18px}.big-search button{padding:0 15px}.page-hero h1{font-size:34px}.article-layout{padding-top:20px}.prose{font-size:16px}}

/* —— 移动端分类选择器（此前手机端完全没有分类入口） —— */
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;width:40px;height:38px;font-size:17px;line-height:1;color:var(--ink);cursor:pointer}
.mobile-bar{display:none;border-bottom:1px solid var(--line);background:#fff;padding:10px 0}
.mobile-bar-label{display:block;font-size:12px;font-weight:700;color:var(--soft);letter-spacing:.06em;margin-bottom:6px}
.cat-select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:15px;background:var(--paper);color:var(--ink)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.mobile-bar .chip-row{margin-top:10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
.chip-link{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;white-space:nowrap;color:#45524b}
.chip-link small{color:var(--green);font-weight:700}
.chip-link:hover{border-color:#9dbbae;color:var(--green);background:#f3faf6}
/* —— 库入口卡片 —— */
.libraries{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.library-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;min-height:132px;display:flex;flex-direction:column;gap:4px;transition:.2s}
.library-card:hover{transform:translateY(-3px);border-color:#9dbbae}
.library-card b{font-size:18px}
.library-card p{color:var(--soft);font-size:14px;margin:0 0 auto}
/* —— 作者库 —— */
.author-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.author-grid.wide{grid-template-columns:repeat(3,1fr)}
.author-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:3px;transition:.2s}
.author-card:hover{transform:translateY(-3px);border-color:#9dbbae}
.author-card .avatar{border-radius:50%;margin-bottom:6px}
.author-card b{font-size:16px}
.author-card p{margin:0;color:var(--soft);font-size:13px}
.author-card small{color:#8b968f;font-size:12px;line-height:1.6}
/* —— 标签云 —— */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;color:#37443d}
.tag-pill b{color:var(--green);font-size:12px}
.tag-pill:hover{border-color:#9dbbae;background:#f3faf6;color:var(--green)}
/* —— 列表页横向入口条 —— */
.hub-strip{margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.hub-strip-title{font-size:13px;font-weight:700;color:var(--soft);display:inline-block;margin:0 12px 10px 0;vertical-align:middle}
.hub-more{display:inline-block;color:var(--green);font-size:13px;margin-left:8px}
.article-tags{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.aside-card .aside-more{color:var(--green);font-weight:700;border-bottom:0}
.topic-strip a small{color:var(--green);font-size:11px;font-weight:700}
/* —— 响应式 —— */
@media(max-width:980px){.author-grid,.author-grid.wide{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .nav-toggle{display:block;margin-left:8px}
  .mobile-bar{display:block}
  .mobile-bar:not(.open){display:none}
  .libraries{grid-template-columns:1fr}
  .head-search{margin-left:auto}
}
@media(max-width:580px){.author-grid,.author-grid.wide{grid-template-columns:1fr}.tag-pill{font-size:13px;padding:8px 13px}}

/* —— 文中提及与引用：原作者的「看这篇教程」以前只是纯文字，现在挂成站内链接 —— */
.ref-block{margin-top:28px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#f7fbf9}
.ref-block.back{margin-top:14px;background:var(--white)}
.ref-head{font-size:15px;margin:0 0 6px}
.ref-note{margin:0 0 14px;color:var(--soft);font-size:13px;line-height:1.65}
.ref-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ref-list li{border-left:3px solid var(--green);padding-left:12px}
.ref-list li.ext{border-left-color:#d8ded9}
.ref-list a.ref-link{font-weight:700;font-size:15px;display:block;color:var(--ink)}
.ref-list a.ref-link:hover{color:var(--green)}
.ref-list small{display:block;color:var(--soft);font-size:12.5px;margin-top:3px;line-height:1.6}
.ref-list li.ext a{font-size:13.5px;color:#5a675f;word-break:break-all}
.ref-inline{border-bottom:1px dashed var(--green);color:var(--green);font-weight:700}
.ref-inline:hover{background:#e9f6ef}

/* —— 移动端排版修复（2026-09-24）——
   起因：手机上正文右侧被切掉。实测 390px 视口下文档宽 493px，正文容器 473px。
   根因：.article-layout 是 grid，移动端只写成「1fr」，而 1fr 隐含 min-width:auto，
        子项无法收缩到内容最小宽度以下，于是把网格列顶宽、整页横向溢出。
        溢出后手机浏览器又会触发「字号自动放大」，同一段文字时大时小，看起来更乱。
   处理：网格列改 minmax(0,1fr) 并给子项 min-width:0；关掉字号自动放大；
        标题在窄屏降一档；顶栏分类栏默认收起，避免固定占掉屏幕上四分之一。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.article-layout>*{min-width:0}
.article-layout aside,.article-layout .aside-card{min-width:0}
.prose{overflow-wrap:break-word;word-break:break-word}
.prose a{word-break:break-word}
.prose pre{max-width:100%;overflow-x:auto}
.ref-list li.ext a{word-break:break-word}
/* 胶囊默认 nowrap，遇到「引用列表」里的长标题会撑破容器（实测 431px > 390px 视口）。
   引用区块与标签区的胶囊允许折行，并限制不超过容器宽。 */
.chip-link{max-width:100%}
.ref-block .chip-link,.article-tags .chip-link{white-space:normal;overflow-wrap:anywhere;text-align:left}
.ref-block .chip-row,.article-tags .chip-row{flex-wrap:wrap}
@media(max-width:860px){
  /* 展开时才占屏；收起后只剩 62px 的品牌条固定 */
  .mobile-bar{padding:12px 0}
}
@media(max-width:580px){
  .article-title{font-size:25px;line-height:1.34;margin:8px 0 14px}
  .lead{font-size:17px;padding-left:14px}
  .prose{font-size:16px;line-height:1.85}
  .prose h2{font-size:22px;margin:1.6em 0 .6em}
  .prose h3{font-size:19px}
  .breadcrumbs{font-size:12px;line-height:1.6}
  .article-meta{gap:10px;font-size:12.5px;padding:14px 0 22px}
  .ref-block{padding:15px 16px}
  .ref-list a.ref-link{font-size:14.5px}
}

/* —— 内嵌 X 引用卡片：v2 改版只产出了 HTML 没写样式，原样渲染等于裸奔，按 X 引用卡重做。
   整卡是一张 <a>，必须用 .prose 前缀压过正文样式（.prose a 绿色下划线、.prose img 块级自动边距会把卡片拆散）。 —— */
.embedded-tweet-group{display:flex;flex-direction:column;gap:14px;margin:22px 0}
.prose .embedded-tweet-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .2s;color:var(--ink);text-decoration:none;cursor:pointer}
.prose .embedded-tweet-card:hover{border-color:#9dbbae}
.prose .embedded-tweet-author{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prose .embedded-tweet-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);margin:0}
.prose .embedded-tweet-avatar.fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-weight:700;font-size:16px;margin:0}
.prose .embedded-tweet-author>div{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.prose .embedded-tweet-author b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prose .embedded-tweet-author span{font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prose .embedded-tweet-author em{margin-left:auto;font-style:normal;font-size:12px;color:#8b968f;border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap;flex:none}
.prose .embedded-tweet-media{display:block;width:100%;border-radius:12px;border:1px solid var(--line);margin:2px 0 10px}
.prose .embedded-tweet-copy h3{font-size:15px;font-weight:700;margin:0 0 4px;line-height:1.5}
.prose .embedded-tweet-copy p{margin:0 0 8px;font-size:14px;color:#45524b;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prose .embedded-tweet-cta{color:var(--green);font-weight:700;font-size:13px}
@media(max-width:580px){.embedded-tweet-card{padding:12px 13px}.embedded-tweet-author em{display:none}}

/* 文末附注区（核验说明 + 用户反馈）。
   此前是两块独立的 aside 卡片、贴在标题下方，视觉上像并排的公告栏，
   读者会当成免责声明整块跳过。现在合成一个 .notes 容器：
   左侧一条竖线是共同的语言，块与块之间只用细分隔线，读起来是一段连贯的「关于本文」，
   而不是两个互不相干的方框。位置也移到了正文之后。 */
.notes{margin:28px 0 24px;padding:4px 0 4px 18px;border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
.note-item{padding:12px 18px 12px 16px;background:var(--white);border:1px solid var(--line);border-left:0;border-radius:0 12px 12px 0}
.note-item+.note-item{margin-top:10px}
.note-item .note-head{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.4}
.note-item p{margin:0;font-size:14px;line-height:1.75;color:var(--ink)}
.note-item small{display:block;margin-top:8px;font-size:12px;line-height:1.6;color:var(--soft)}
.note-item.feedback{border-left:0;background:#f7fbf9}
@media(max-width:580px){.notes{padding-left:12px;margin:22px 0 20px}.note-item{padding:11px 13px}}

.preview-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0;padding:14px 18px;border:1px solid #e2b64d;border-radius:14px;background:#fff8df;color:#624600}.preview-banner b{color:#8a5a00}.preview-banner span{flex:1;min-width:240px}.preview-banner a{font-weight:700;color:#087f5b}
.digest-cover{margin:0 0 32px}.digest-cover img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line);background:#f7f4ec}

/* —— 正文表格（2026-09-26）——
   对比节的表格在手机上被压成「一列一个字竖排」的乱码样子：根因是单元格没有最小宽度，
   浏览器为凑 max-width:100% 把列宽压到极限，加上表格本来就是浏览器默认的无边框裸样式。
   处理：渲染层（index.php wrapTables）给每个表格外包 .table-wrap，横向滚动交给容器；
   单元格给最小宽度 + 横竖分割线 + 表头底色 + 斑马纹，窄屏放不下时整表左右拖动，
   首列（项目名）吸附在左侧不跟着滚，拖动时始终知道每行说的是哪个项目。 —— */
.table-wrap{margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--white);border:1px solid var(--line);border-radius:14px}
.prose .table-wrap table{width:100%;max-width:none;overflow:visible;margin:0;border-collapse:separate;border-spacing:0;font-size:14.5px;line-height:1.7}
.prose .table-wrap th,.prose .table-wrap td{padding:11px 14px;text-align:left;vertical-align:top;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.prose .table-wrap tr>*:last-child{border-right:0}
.prose .table-wrap tbody tr:last-child th,.prose .table-wrap tbody tr:last-child td{border-bottom:0}
.prose .table-wrap thead th{background:#eef3ef;font-weight:700;border-bottom:2px solid #c8d3cb;white-space:nowrap}
.prose .table-wrap tbody tr:nth-child(even) th,.prose .table-wrap tbody tr:nth-child(even) td{background:#fafbf7}
.prose .table-wrap td a{word-break:break-all}
@media(max-width:720px){
  .prose .table-wrap table{font-size:13.5px}
  .prose .table-wrap th,.prose .table-wrap td{min-width:9.5em;padding:10px 12px}
  .prose .table-wrap th:first-child,.prose .table-wrap td:first-child{position:sticky;left:0;z-index:2;min-width:7em;background:var(--white)}
  .prose .table-wrap thead th:first-child{z-index:3;background:#eef3ef}
}

/* —— 列表卡封面整块可点（2026-09-26）——
   此前卡片里只有标题是链接，手机上的习惯是点图进详情，点封面却没反应。
   现在封面也包进 <a>；图与标题指向同一地址，对读者是冗余链接，
   所以 aria-hidden + tabindex=-1 不进无障碍树、不进 Tab 序，避免读屏念两遍。 —— */
.thumb-link{display:block;overflow:hidden}
.thumb-link:hover{opacity:.92}
.thumb-link .thumb{transition:transform .25s ease}
.thumb-link:hover .thumb{transform:scale(1.02)}

/* —— 文章头部「解读视频」区块（2026-09-27）——
   原先原视频链接写在正文末尾，读者要读完全篇才知道这篇文章在解读哪条视频。
   现在提到标题下方：封面 + 视频标题 + 平台/频道/时长 + 出处声明。
   封面用采集时本地化的缩略图（与 og:image 同源），所以不会出现外链图裂。 —— */
.video-ref{display:flex;gap:18px;align-items:flex-start;margin:2px 0 26px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#f7fbf9}
.video-ref-cover{flex:0 0 208px;display:block;border-radius:12px;overflow:hidden;line-height:0;box-shadow:0 2px 10px rgba(23,34,29,.08)}
.video-ref-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.video-ref-cover:hover{opacity:.92}
.video-ref-body{min-width:0;flex:1}
.video-ref-kicker{display:inline-block;font-size:12px;letter-spacing:.08em;color:var(--green);background:#e8f4ef;border:1px solid #d3e8df;border-radius:999px;padding:2px 10px}
.video-ref-title{display:block;margin:9px 0 6px;font-size:17px;font-weight:600;color:var(--ink);line-height:1.5;text-decoration:none;overflow-wrap:anywhere}
.video-ref-title:hover{color:var(--green);text-decoration:underline}
.video-ref-meta{margin:0;font-size:13px;color:var(--soft)}
.video-ref-note{margin:8px 0 0;font-size:12.5px;color:#8a958e;line-height:1.6}
@media(max-width:640px){
  .video-ref{flex-direction:column;gap:12px;padding:14px}
  .video-ref-cover{flex:none;width:100%}
  .video-ref-title{font-size:16px}
}