:root{
  --bg:#0d1117; --bg-elev:#161b22; --bg-elev2:#1c2230;
  --border:#30363d; --border-soft:#21262d;
  --text:#e6edf3; --muted:#8b949e;
  --primary:#3b82f6; --primary-soft:#1d4ed8; --primary-glow:rgba(59,130,246,.25);
  --accent:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --radius:14px; --maxw:1160px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.7;-webkit-font-smoothing:antialiased;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:32px 32px}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
code{background:var(--bg-elev2);padding:2px 6px;border-radius:6px;font-size:.9em;color:#a5d6ff}

/* ===== 顶栏 ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(13,17,23,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:19px;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.brand span{color:var(--muted);font-weight:600;font-size:14px}
.nav-links{display:flex;gap:22px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--text)}

/* ===== 窄屏汉堡按钮（默认藏起来，只在 .nav-js + ≤860px 时出现）=====
   .nav-js 是 renderSiteHeader() 里那段脚本自己加的类 ⇒ 脚本没跑 = 不启用折叠菜单。
   开/关状态用三条杠 ↔ X 的**形状**区分，不用颜色（阿君辨色困难）。 */
.nav-burger{display:none;flex:none;width:40px;height:36px;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;
  cursor:pointer;transition:border-color .16s}
.nav-burger:hover{border-color:var(--primary)}
.nav-burger-bar{display:block;width:16px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .2s ease,opacity .2s ease}
.nav.is-open .nav-burger-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav-burger-bar:nth-child(2){opacity:0}
.nav.is-open .nav-burger-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;font-weight:600;font-size:15px;transition:.18s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-soft));color:#fff;box-shadow:0 6px 20px var(--primary-glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px var(--primary-glow)}
.btn-ghost{background:var(--bg-elev);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--primary);color:#fff}

/* ===== Hero ===== */
.hero{padding:84px 24px 64px;text-align:center}
.hero-tag{display:inline-block;font-size:13px;color:var(--primary);background:var(--primary-glow);border:1px solid rgba(59,130,246,.4);padding:5px 14px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:46px;line-height:1.2;font-weight:800;letter-spacing:-.5px}
.hero .lead{max-width:680px;margin:20px auto 0;color:var(--muted);font-size:17px}
.cta{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== 区块 ===== */
.section{padding:56px 0}
.section-title{font-size:28px;font-weight:800;margin-bottom:8px;text-align:center}
.section-sub{text-align:center;color:var(--muted);margin-bottom:36px}
.install-steps{max-width:760px;margin:0 auto;padding-left:22px;counter-reset:step}
.install-steps li{margin:0 0 14px;padding-left:6px;color:var(--text)}
.install-steps li::marker{color:var(--primary);font-weight:700}
.install-steps code{background:var(--bg-elev2);padding:2px 7px;border-radius:6px;font-size:.88em;color:#a5d6ff;white-space:nowrap}
.muted{color:var(--muted);font-size:13px;margin-top:10px}
.install-tip{margin:18px auto 0;max-width:760px;text-align:center;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.3);border-left:3px solid var(--primary);border-radius:8px;padding:14px 22px;font-size:14.5px;color:var(--text);line-height:1.7}
.install-tip strong{color:var(--primary);font-weight:700}
.install-tip code{background:var(--bg-elev2);padding:2px 8px;border-radius:6px;font-size:.92em;color:#a5d6ff;font-weight:600;border:1px solid var(--border-soft)}

/* ===== 功能卡片 ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--radius);padding:24px;transition:.18s}
.card:hover{border-color:var(--border);transform:translateY(-3px)}
.card .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:22px;background:var(--bg-elev2);margin-bottom:14px;border:1px solid var(--border-soft)}
.card h3{font-size:17px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14px}

/* ===== 三步 ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--radius);padding:24px;position:relative}
.step .num{counter-increment:step;font-size:13px;color:var(--primary);font-weight:700}
.step .num::before{content:"0" counter(step);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary-glow);border:1px solid rgba(59,130,246,.4);margin-right:10px;font-weight:800}
.step h3{margin:14px 0 6px;font-size:17px}
.step p{color:var(--muted);font-size:14px}

/* ===== CTA 横幅 ===== */
.cta-band{background:linear-gradient(135deg,var(--bg-elev),var(--bg-elev2));border:1px solid var(--border-soft);border-radius:20px;padding:48px;text-align:center;margin:24px auto}
.cta-band h2{font-size:26px;margin-bottom:10px}
.cta-band p{color:var(--muted);max-width:560px;margin:0 auto 22px}

/* ===== 页脚 ===== */
.footer{border-top:1px solid var(--border-soft);padding:30px 0;color:var(--muted);font-size:13px;text-align:center;margin-top:40px}
.footer a{color:var(--primary)}

/* ===== 知识库 /docs ===== */
.docs{display:grid;grid-template-columns:240px minmax(0,1fr) 220px;gap:36px;padding:36px 24px 60px;max-width:1280px;margin:0 auto;align-items:start}
.docs-side{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}
.docs-toc{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}
.docs-toc-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:10px;padding-left:2px}
.docs-toc-nav a{display:block;padding:5px 10px;border-radius:7px;color:var(--muted);font-size:13px;margin-bottom:2px;border-left:2px solid transparent;line-height:1.5;transition:.15s}
.docs-toc-nav a:hover{background:var(--bg-elev);color:var(--text)}
.docs-toc-nav a.active{background:var(--bg-elev2);color:#fff;border-left-color:var(--primary)}
.docs-toc-link.lvl4{padding-left:22px;font-size:12.5px}
.docs-toc-link.lvl5{padding-left:34px;font-size:12px;opacity:.85}
.docs-search{width:100%;padding:9px 12px;background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;margin-bottom:16px;outline:none}
.docs-search:focus{border-color:var(--primary)}
.toc-link{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;color:var(--muted);font-size:14px;margin-bottom:2px;border-left:2px solid transparent}
.toc-link:hover{background:var(--bg-elev);color:var(--text)}
.toc-link.active{background:var(--bg-elev2);color:#fff;border-left-color:var(--primary)}
/* 两级目录：分类行（可折叠）+ 缩进的子页。
   层级靠"缩进 + 引导线 + 字号 + 字重 + 三角"表达，不只靠颜色（阿君辨色偏弱）。
   ★ 三角那一列对所有一级项都占位（无子页的留空），保证分类名左边缘齐平 —— 否则
     "有子页/无子页"两类分类名会差 15px，看着像两个层级 */
.toc-link .toc-caret{flex:0 0 11px;width:11px;font-size:10px;line-height:1;opacity:.75;transition:transform .15s;cursor:pointer;text-align:center}
.toc-link .toc-caret:hover{opacity:1}
.toc-link .toc-caret.collapsed{transform:rotate(-90deg)}
.toc-link .toc-caret.is-empty{visibility:hidden;cursor:default}
.toc-link .toc-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toc-group{font-weight:600}
.toc-sub{border-left:1px solid var(--border);margin:2px 0 8px 22px;padding-left:10px}
.toc-sub.collapsed{display:none}
.toc-link.lvl2{padding:5px 8px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.doc-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.doc-breadcrumb a{color:var(--primary)}
.doc-breadcrumb span{color:var(--text)}
.doc-meta{color:var(--muted);font-size:14px;margin-bottom:28px}
.doc-pager{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--border-soft)}
.doc-pager-link{flex:1;padding:12px 16px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;text-decoration:none;transition:.15s}
.doc-pager-link:hover{border-color:var(--primary);color:#fff}
.doc-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:36px}
.doc-index-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-elev);color:var(--text);text-decoration:none;transition:.15s}
.doc-index-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.doc-index-card span{font-size:15px;font-weight:600}
.doc-index-card small{font-size:12px;color:var(--muted)}
.docs-main{min-width:0;max-width:880px}
.docs-main h1{font-size:32px;margin-bottom:10px}
.docs-main h2{font-size:23px;margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border-soft);scroll-margin-top:80px}
.docs-main h3{font-size:17px;margin:18px 0 8px;scroll-margin-top:80px}
.docs-main h4{font-size:15px;margin:14px 0 6px;color:var(--text);scroll-margin-top:80px}
.docs-main h5{font-size:14px;margin:12px 0 6px;color:var(--muted);scroll-margin-top:80px}
.docs-main p{color:var(--muted);margin-bottom:12px;font-size:15px}
.docs-main ul{margin:0 0 14px 20px;color:var(--muted);font-size:15px}
.docs-main li{margin-bottom:6px}
.docs-main ol{margin:0 0 14px 20px;color:var(--muted);font-size:15px}
.docs-main strong,.docs-main em{color:#c9d1d9}
.docs-main p a,.docs-main li a,.docs-main blockquote a{color:var(--primary);background:var(--primary-glow);border:1px solid rgba(59,130,246,.3);padding:1px 9px;border-radius:6px;font-weight:500;transition:.15s;display:inline-inline;line-height:1.8}
.docs-main p a:hover,.docs-main li a:hover,.docs-main blockquote a:hover{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.55)}
.docs-main blockquote{background:var(--bg-elev);border-left:3px solid var(--primary);padding:10px 16px;border-radius:0 8px 8px 0;color:var(--muted);font-size:13px;margin:14px 0}
.docs-main img,.docs-main video,.docs-main iframe{max-width:100%;border-radius:8px;margin:14px auto;display:block;border:1px solid var(--border-soft);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.docs-main video{background:#000}
.docs-main iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}
.shot{background:repeating-linear-gradient(45deg,var(--bg-elev),var(--bg-elev) 12px,var(--bg-elev2) 12px,var(--bg-elev2) 24px);border:1px dashed var(--border);border-radius:12px;padding:40px;text-align:center;color:var(--muted);font-size:14px;margin:14px 0}
.tag{display:inline-block;font-size:12px;padding:2px 9px;border-radius:6px;background:var(--bg-elev2);border:1px solid var(--border);color:var(--muted);margin-right:6px}
.tag.green{color:var(--accent);border-color:rgba(34,197,94,.4)}
.tag.blue{color:var(--primary);border-color:rgba(59,130,246,.4)}

/* ===== 下载页：时间轴 ===== */
.timeline{position:relative;margin-top:8px;padding-left:28px}
.timeline::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 22px 0}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;border:3px solid var(--bg-elev);box-shadow:0 0 0 1px var(--border)}
.tl-dot.plugin{background:var(--primary)}
.tl-dot.library{background:var(--accent)}
.tl-dot.site{background:#a855f7}
.tl-dot.other{background:var(--muted)}
.tl-body{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:12px 16px}
.tl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tl-ver{font-weight:700;color:#e6edf3;font-size:15px}
.tl-date{font-size:12px;color:var(--muted)}
.tl-tag{font-size:12px;padding:1px 8px;border-radius:6px;border:1px solid var(--border);color:var(--muted)}
.tl-tag.plugin{color:var(--primary);border-color:rgba(59,130,246,.4)}
.tl-tag.library{color:var(--accent);border-color:rgba(34,197,94,.4)}
.tl-tag.site{color:#c084fc;border-color:rgba(168,85,247,.4)}
.tl-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.tl-body .tl-content{margin-top:2px}
.tl-body .tl-title{margin:0 0 6px;color:var(--text);font-weight:600;font-size:13.5px;line-height:1.6}
.tl-body .tl-title:empty{display:none}
.tl-body .tl-title + ul.tl-changes{margin-top:2px}
.tl-body ul.tl-changes{margin:6px 0 0;padding:0;list-style:none}
.tl-body ul.tl-changes li{position:relative;padding:3px 0 3px 18px;color:var(--muted);font-size:13px;line-height:1.7;border:0;background:transparent;margin:0}
.tl-body ul.tl-changes li::before{content:'';position:absolute;left:4px;top:13px;width:5px;height:5px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.18)}
.tl-body .tl-plain{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.tl-body .tl-plain + .tl-plain{margin-top:4px}
/* 历史版本折叠：默认收起，点击展开 */
.tl-item{cursor:default}
.tl-item.tl-collapsed{cursor:pointer}
.tl-item.tl-collapsed .tl-body .tl-content{display:none}
.tl-toggle{font-size:10px;color:var(--muted);transition:transform .2s;margin-left:auto}
.tl-item.tl-collapsed .tl-toggle{transform:rotate(0deg)}
.tl-item:not(.tl-collapsed) .tl-toggle{transform:rotate(90deg)}
.dl-btn{margin-top:14px;display:inline-block}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .docs{grid-template-columns:220px minmax(0,1fr)}
  .docs-toc{display:none}
}
@media (max-width:860px){
  .grid,.steps{grid-template-columns:minmax(0,1fr)}
  .docs{grid-template-columns:minmax(0,1fr);gap:20px}
  .docs-side{position:static;max-height:none}
  .docs-toc{display:none}
  .hero h1{font-size:34px}
  .nav-links{gap:14px}

  /* ★ 20260917a：窄屏把 6 条链接收进汉堡菜单（原先在这里会被 flex 压成「一字一行」）。
     下面每条都带 .nav-js 前缀 —— 那个类是页眉脚本加的，脚本没跑就整段不生效，
     导航退回上面 .nav-links{gap:14px} 的老行为（能点，只是挤），不会更差。 */
  .nav-js .nav-burger{display:inline-flex}
  .nav-js .nav-links{
    position:absolute;top:100%;left:0;right:0;   /* .nav 是 position:sticky，本身就是定位上下文 */
    flex-direction:column;gap:0;font-size:15px;
    background:rgba(13,17,23,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    box-shadow:0 14px 30px rgba(0,0,0,.4);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .24s ease,visibility 0s linear .24s}
  /* ★★ 这里必须是 `.nav-js.is-open`（同元素复合，无空格）。
     写成 `.nav-js .nav.is-open` 会永远不匹配 —— nav-js / nav / is-open 三个类都挂在
     同一个 <header> 上，中间加空格就变成「后代」关系，而它没有这样的后代。
     症状特别隐蔽：面板照常开合（is-open 加得上）、链接也确实竖排了（那是 .nav-js .nav-links
     的功劳），但 max-height 一直是 0 ⇒ 展开后面板高 1px，内容全被裁掉、点不中。
     ★ 教训：断言「CSS 里有这条规则」是**测不出**这种错的，必须断言**计算值**。 */
  .nav-js.is-open .nav-links{
    max-height:min(72vh,460px);overflow-y:auto;visibility:visible;
    transition:max-height .24s ease,visibility 0s}
  .nav-js .nav-links a{padding:14px 24px;border-top:1px solid var(--border-soft)}
  .nav-js .nav-links a:first-child{border-top:none}

  /* ★ 顺带修掉一个会让**整页**横向溢出的既有问题（本次量汉堡菜单时发现）：
     安装步骤里的 Windows 长路径被 .install-steps code{white-space:nowrap} 撑到 420px 宽，
     375px 手机上一整页都能左右拖（实测溢出 47px），而且会把 position:fixed 的元素
     （下载页的浮出条）宽度也带歪 —— fixed 元素吃的是初始包含块，它跟着布局视口一起变宽。
     只有窄屏才放开换行：桌面端长路径保持单行更好看。 */
  .install-steps code,.install-tip code,.muted{white-space:normal;overflow-wrap:anywhere}

  /* ★ 顺带修掉第二个窄屏横向溢出（同样本次量汉堡菜单时发现）：使用说明页 /docs 在
     ≤375px 下能左右拖 16px，根因是两处叠加 ——
       ① 上面那条 `.docs{grid-template-columns:1fr}` 覆盖掉了 1080px 断点里的 minmax(0,1fr)。
          `1fr` 等价于 `minmax(auto,1fr)`，auto 的最小值是内容的 **min-content 宽**
          ⇒ 列宽由最长的不可断 token 决定（文档里的 `C:\Users\你的用户名\AppData\Roaming\...`
          把列撑到 366px，而可用宽度只有 327px）。已就地改成 minmax(0,1fr)。
       ② 该长 token 本身没有换行点。overflow-wrap 是**可继承**属性，写在 .docs-main 上
          即可覆盖其中所有后代（全文件没有任何地方把它重置为 normal，已核对）。
          用 anywhere 而不是 break-word：只有 anywhere 会参与 min-content 计算，
          能同时把 ① 遗留下来的固有宽度一并压掉；对中文段落零影响（中文本就处处可断）。 */
  .docs-main{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  .nav-js .nav-links{transition:none}
}

/* ===== 暗色滚动条（2026-09-21 阿君：「滚动条太丑了，换下暗色调，主体保持一致」）=====
   背景：使用说明改成两级后，左侧是 8 分类 + 44 子页，侧栏要滚 1700px，
        默认那条又白又宽，跟整站的暗色底完全脱节。
   ★ 两套写法必须都写，缺一套就会有浏览器「没变」：
       · Edge / Chrome / Safari → ::-webkit-scrollbar 系列
       · Firefox                → scrollbar-width / scrollbar-color
   ★ 配色全部取 :root 变量，跟卡片/边框同一套色，不另造颜色。
   ★ 只是装饰，不承载任何状态 —— «不能只靠颜色表达» 这条纪律在这里本来就不适用：
     滚动条位置本身就是第二通道。 */
*{scrollbar-width:thin;scrollbar-color:#3a4149 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
/* 透明描边 + background-clip:padding-box ⇒ 视觉上只剩 6px 的拇指，比实心 10px 细一圈 */
::-webkit-scrollbar-thumb{
  background:#3a4149;border:2px solid transparent;border-radius:6px;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:#4a525c;background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--primary);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* 侧栏滚动条再细一点（它的高度最长，最显眼） */
.docs-side::-webkit-scrollbar,.docs-toc::-webkit-scrollbar{width:8px}
.docs-side::-webkit-scrollbar-thumb,.docs-toc::-webkit-scrollbar-thumb{border-width:2px}