/* ============================================================
   机宇Agent · 主题 v5「暗场霓虹」
   在 core.css 之后加载：接管配色 + 追加特效层
   配色：近黑底 + 青(var(--signal)) → 紫(var(--accent-3)) 双色信号
   ============================================================ */
html, body{background:var(--paper);color:var(--ink)}::selection{background:color-mix(in srgb,var(--signal) 26%,transparent);color:#fff}html :focus-visible{outline:2px solid var(--signal);outline-offset:3px}/* ── 背景层：极光画布 + 网格 + 颗粒 ── */
.fx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--paper)}html .fx-aurora{position:absolute;inset:0;width:100%;height:100%;opacity:1}html .fx-bg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(1000px 620px at 18% 8%,color-mix(in srgb,var(--signal) 5%,transparent),transparent 62%),radial-gradient(900px 560px at 82% 22%,color-mix(in srgb,var(--signal-2) 5%,transparent),transparent 60%),radial-gradient(1200px 800px at 50% 110%,var(--vignette),transparent 70%)}html .fx-grid{
  /* 背景只留极淡点阵。原来的网格线 + 跟指针的光斑撤了——
     参考站(lovable / base44)走纯净底色，任何自主动效都在跟正文抢眼睛 */
  z-index:2;position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(var(--film),.05) 1px,transparent 0);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 88%);
}
html .nav, html main, html .foot, html .fx-progress{position:relative;z-index:1}
/* 上面这条是为了把内容抬到 .fx-bg 之上，但顺手把顶栏也压成了 relative/z-1 —— 跟 main 同层、又排在 main 前面，结果顶栏被正文盖住，sticky 也失效了。单独还回去。 */
html .nav{position:sticky;top:0;z-index:80}/* 顶部滚动进度 */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:90;background:transparent;pointer-events:none}html .fx-progress i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px color-mix(in srgb,var(--signal) 50%,transparent)}/* ── 顶栏 ── */
.nav{
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  border-bottom:1px solid transparent;
}html .nav.is-stuck{border-bottom-color:var(--hair);background:color-mix(in srgb,var(--paper) 88%,transparent)}html .nav-links a[aria-current]{color:var(--signal)}html .mark i{background:currentColor;box-shadow:0 0 8px color-mix(in srgb,var(--signal) 50%,transparent)}html .wordmark:hover .mark i{background:var(--signal)}/* ── 字：渐变标题 + 微光扫过 ── */
.grad-text, html .grad-text .motion-word{
  background:var(--grad);background-size:230% 100%;background-position:12% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:gradShift 7s var(--e-out) infinite;
}@keyframes gradShift{0%,100%{background-position:12% 0}50%{background-position:76% 0}
}/* 逐词切分后每个词是独立盒子，渐变要落在词上，否则整行变透明 */
.grad-text .motion-word-mask{background:none}html .shine{position:relative;display:inline-block}html .shine::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(var(--film),.55) 50%,transparent 65%);
  background-size:220% 100%;mix-blend-mode:overlay;
  animation:shine 5.5s var(--e-out) infinite;
}@keyframes shine{0%{background-position:180% 0}55%,100%{background-position:-60% 0}}html .eyebrow{color:var(--ink-hi);letter-spacing:.2em}html .eyebrow::before{background:linear-gradient(90deg,var(--signal),transparent)}html .lead{color:var(--ink-2)}/* ── 按钮：发光主按钮 + 描边幽灵键 ── */
.btn{
  border:0;color:var(--btn-ink);background:var(--grad);
  box-shadow:0 10px 30px color-mix(in srgb,var(--signal) 22%,transparent);
  position:relative;overflow:hidden;
}html .btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(var(--film),.45) 50%,transparent 70%);
  background-size:220% 100%;transform:translateX(-30%);opacity:0;
  transition:opacity var(--t) var(--e-out);
}html .btn:hover{background:var(--grad);box-shadow:0 14px 40px color-mix(in srgb,var(--signal) 34%,transparent)}html .btn:hover::after{opacity:1;animation:shine 1.1s var(--e-out)}html .btn-ghost{
  background:var(--inset);color:var(--ink);border:1px solid var(--hair-2);box-shadow:none;
}html .btn-ghost::after{display:none}/* ── 卡片：玻璃壳 + 流光描边 ── */
.cd, html .sc, html .tc, html .api, html .mc-card, html .icell, html .rule-cell, html .two-col > div, html .card{
  background:var(--lift),var(--card);
  border-color:var(--hair);box-shadow:var(--elev);
}/* 1px 缝隙矩阵在暗场里空格会露底，改成独立卡 + 真实间距 */
.grid, html .sc-grid, html .tgrid, html .apis, html .two-col, html .rules-grid, html .insight-grid{
  background:transparent;border:0;gap:14px;border-radius:0;overflow:visible;
}html .cd, html .sc, html .tc, html .api, html .two-col > div, html .icell, html .rule-cell{
  border:1px solid var(--hair);border-radius:var(--r-l);overflow:hidden;
}/* 流光描边：鼠标进入时沿边缘跑一圈 */
.beam{position:relative;isolation:isolate}html .beam::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;opacity:0;
  background:conic-gradient(from var(--beam-angle,0deg),transparent 0deg,var(--signal) 24deg,var(--signal-2) 52deg,transparent 84deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:opacity .3s var(--e-out);
}html .beam:hover::before{opacity:1}/* 卡内追光 */
.spot{position:relative;overflow:hidden}html .spot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px 220px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--signal) 13%,transparent),transparent 70%);
  transition:opacity .3s var(--e-out);
}html .spot:hover::after{opacity:1}/* ── 细节：分隔线、标签、序号 ── */
.hair, html .band{border-color:var(--hair);background:var(--hair)}html .stats, html .rail, html .kpi, html .meta-row, html .steps-nav, html .mc-facts, html .hnums, html .dw-stat, html .facts{border-color:var(--hair)}html .stats div, html .rail div, html .kpi div, html .meta-row div, html .steps-nav a, html .hnums div, html .facts div{border-color:var(--hair)}html .stats b, html .rail b, html .kpi b{color:var(--ink)}html .stats div:first-child b, html .rail div:first-child b, html .mc-fact b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}html .cd-tags span, html .sc-tags span, html .tc-badge, html .dw-tags span, html .row-tags span, html .pill, html .hitem-top .kind, html .api-badge{
  border-color:var(--hair-2);background:var(--inset);color:var(--ink-2);
}html .cd-tags .more, html .tc-badge.is-on{border-color:var(--signal-line);color:var(--signal);background:var(--signal-wash)}html .mono, html .idx, html .cd-no, html .step-no, html .sc-no{color:var(--ink-3)}html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t, html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3, html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3, html .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2, html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2, html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2{color:var(--signal)}html .seg, html .tabs, html .field{background:rgba(var(--film),.03);border-color:var(--hair)}html .seg button[aria-pressed="true"], html .tabs button[aria-selected="true"], html .pill[aria-pressed="true"]{
  background:var(--grad);color:var(--btn-ink);border-color:transparent;box-shadow:0 6px 20px color-mix(in srgb,var(--signal) 24%,transparent);
}html .seg button[aria-pressed="true"] b, html .tabs button[aria-selected="true"] b{color:rgba(7,19,16,.62)}html .field:focus-within{border-color:var(--signal-line);box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 10%,transparent)}html .field input, html .lane-search{color:var(--ink)}/* 首屏索引条 */
.ix-row{border-color:var(--hair)}html .ix-row::before{background:var(--grad)}html .ix-row:hover{color:var(--ink)}/* 图片：暗场里压一层，hover 才还原 */
.cd-shot img, html .mc-shot img, html .row-shot img, html .feat-shot img{filter:var(--shot-filter)}html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-shot img, html .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .mc-shot img, html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .row-shot img{filter:var(--shot-filter-hover)}html .cd-shot::after, html .mc-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--shot-scrim);
}/* 暗场块：在整站暗色下改成「更深 + 极光晕」 */
.band-dark{background:var(--void);position:relative;overflow:hidden}html .band-dark::before{
  content:"";position:absolute;left:50%;top:-40%;width:120%;height:180%;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--signal-2) 16%,transparent),transparent 70%),
             radial-gradient(closest-side,color-mix(in srgb,var(--signal) 12%,transparent),transparent 72%);
  background-position:30% 40%,72% 60%;background-repeat:no-repeat;background-size:60% 70%,55% 65%;
  pointer-events:none;
}html .band-dark .btn{background:var(--grad);color:var(--btn-ink)}html .band-dark .btn-ghost{background:rgba(var(--film),.04);border-color:var(--hair-2);color:var(--ink)}/* 跑马灯 */
.marquee{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}html .marquee-track{display:flex;gap:44px;width:max-content;animation:marq 34s linear infinite}html .marquee span{color:var(--ink-3);font-size:13px;white-space:nowrap;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em}html .marquee span i{font-style:normal;color:var(--signal);margin-right:8px}@keyframes marq{to{transform:translateX(-50%)}}html .marquee:hover .marquee-track{animation-play-state:paused}/* 抽屉 / 弹层 */
.dw-panel, html .sh-panel{background:var(--void-2);border-color:var(--hair)}html .dw::backdrop, html .sh-drawer::backdrop{background:rgba(3,4,6,.72)}html .dw-start, html .sh-start{background:var(--grad);color:var(--btn-ink)}html .dw-note{border-left-color:var(--signal);background:var(--signal-wash);color:var(--ink-2)}/* 页脚 */
.foot{border-top-color:var(--hair)}html .foot-end{border-top-color:var(--hair)}@media (prefers-reduced-motion:reduce){html .fx-grain, html .shine::after, html .marquee-track{animation:none}html .fx-aurora{opacity:.5}
}


/* ── 可读性收尾（按对比度实测调） ── */
html h1{color:var(--accent-o)}html h2{color:var(--ink-hi)}
html .lead{color:var(--ink-2)}
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t,html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2{color:var(--signal-text)}
html .cd-tags .more,html .tc-badge.is-on{color:var(--signal-text);border-color:var(--signal-line)}
html .nav-links a[aria-current]{color:var(--signal-text)}
html .mono,html .idx,html .cd-no,html .step-no,html .sc-no{color:var(--ink-3)}


html .cd,html .sc,html .tc,html .api,html .mc-card,html .two-col > div,
html .icell,html .rule-cell,html .hitem,html .row,html .prow{
  /* 上浮用 top 而不是 transform/translate：GSAP 的入场动画会在元素上写内联
     transform 和 translate:none，把 CSS 里的位移整个盖掉。top 它不碰，
     而且 relative 偏移不参与布局，不会挤动周围。 */
  position:relative;top:0;
  transition:background .18s var(--e-out),border-color .18s var(--e-out),
             box-shadow .18s var(--e-out),top .18s var(--e-out),
             padding-left .2s var(--e-out);
}

/* ── 卡片 ── 均匀铺满的青色玻璃层（不用上深下浅的渐变，
   否则大卡片下半截几乎没变化，就是之前"看不出来"的主因） */
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .two-col > div:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .icell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .rule-cell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  background:linear-gradient(0deg,color-mix(in srgb,var(--signal) 13%,transparent),color-mix(in srgb,var(--signal) 13%,transparent)),var(--card);
  border-color:color-mix(in srgb,var(--signal) 62%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--signal) 26%,transparent),
             0 0 30px -8px color-mix(in srgb,var(--signal) 34%,transparent),
             0 16px 38px rgba(0,0,0,.52);
  top:-3px;
}

/* ── 列表行 ── 左侧青色标记条 + 青色薄底 + 青色内描边 */
html .hitem,html .row,html .prow{border-radius:var(--r-m);overflow:hidden}
html .hitem::before,html .row::before,html .prow::before{
  content:"";position:absolute;left:0;top:50%;bottom:50%;width:3px;z-index:2;
  background:var(--signal);border-radius:0 3px 3px 0;opacity:0;
  box-shadow:0 0 14px color-mix(in srgb,var(--signal) 60%,transparent);
  transition:top .22s var(--e-out),bottom .22s var(--e-out),opacity .18s var(--e-out);
}
html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover::before,html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover::before,html .prow:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover::before{opacity:1;top:8%;bottom:8%}
html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .prow:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  background:color-mix(in srgb,var(--signal) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--signal) 34%,transparent);
  padding-left:14px;
}

/* ── 文字跟着走：标题转青、次要信息提亮、箭头右移 ── */
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t,html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html .prow:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .pname b{color:var(--signal-text)}
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .mono,html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-no,html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .mono,
html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .mono,html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .sc-no,html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .mono{color:var(--ink-2)}
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-go .arw,html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .hgo .arw,
html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .row-go .arw,html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .tc-go .arw,
html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .sc-go .arw,html .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .api-go .arw{transform:translateX(5px)}

/* ── 卡内追光：只留一层很淡的雾，不要形成看得出边界的光圈。
   位置指示已经由底色/描边/上浮承担，这里不需要再抢戏。 ── */
html .spot::after{
  background:radial-gradient(420px 300px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--signal) 10%,transparent),transparent 78%);
}

/* ── 菜单项 / 抽屉条目 / 侧栏 ── */
html .dw-list a,html .sh-list a,html .ix-row,html .side-button,html .trail a,html .hrail button{
  position:relative;transition:background .16s var(--e-out),color .16s var(--e-out),padding-left .18s var(--e-out);
}
html .dw-list a:hover,html .sh-list a:hover,html .side-button:hover,
html .trail a:hover,html .hrail button:hover{
  background:color-mix(in srgb,var(--signal) 13%,transparent);color:var(--ink-hi);
  box-shadow:inset 3px 0 0 var(--signal);
}
html .nav-links a:hover{background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--ink-hi)}
html .btn-ghost:hover{background:color-mix(in srgb,var(--signal) 13%,transparent);border-color:color-mix(in srgb,var(--signal) 62%,transparent);color:var(--ink-hi)}

/* ── 工作台同款 ── */
html .v4-rail-item:hover,html .v4-side-view:hover,html .v4-button:hover,
html .v4-row:hover,html .v6-row:hover{background:color-mix(in srgb,var(--signal) 13%,transparent);color:var(--ink-hi)}
html .v4-side-view:hover,html .v4-rail-item:hover{box-shadow:inset 3px 0 0 var(--signal)}
html .v4-button:hover{border-color:color-mix(in srgb,var(--signal) 62%,transparent)}

/* ── 通栏带这类组件原本只有发丝线、没有底色，
      深色下靠暗底自然分层，浅色下就跟纸糊在一起。给它们接上面色。 ── */
html .steps-nav,html .stats,html .rail,html .kpi,html .meta-row,html .hnums,html .facts,
html .mc-facts,html .dw-stat{background:var(--card)}
html .steps-nav a:hover,html .rail div:hover{background:var(--hover-surface)}

/* 工具条、下拉、分段控件：浅色下要比纸沉一档才看得出是控件 */
html .cs-sel,html .cs-view,html .theme-sw,html .seg,html .tabs{background:var(--card)}
html .cs-tablewrap{background:var(--card);box-shadow:var(--elev)}
html .cs-table th{background:var(--wash)}
html .dt-card{box-shadow:var(--elev)}
html .dt-facts > div{background:var(--card)}

/* hover 不能只靠亮度：浅色下 10% 蓝压在白面上亮度只差 1.05，
   靠色相 + 左侧标记条来指位，两套主题一致 */
html .steps-nav a,html .rail div,html .nav-links a,html .cs-nav button,html .dt-nav a{position:relative}
html .steps-nav a:hover,html .rail div:hover{
  background:var(--hover-surface);box-shadow:inset 3px 0 0 var(--signal);color:var(--ink-hi);
}
html .nav-links a:hover{box-shadow:inset 0 -2px 0 var(--signal)}

/* ── 内容区落在纸上、自己没有底色的，统一给面色 ──
   深色下暗底本身就分层，浅色下不给面就全糊在一起 */
/* ── 左侧目录轨：容器本身要有面色 ──
   之前只有选中项带底，整条轨浮在纸上，浅色下跟背景分不开。
   四个页面统一做成面板：面色 + 描边 + 圆角 + 一级阴影。 */
html .hrail,html .trail,html .cs-rail-in,html .sh-rail-in,html .mn-rail-in{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-l);
  box-shadow:var(--elev);
}
html .hrail,html .trail{padding:10px 8px}
html .cs-rail-in,html .sh-rail-in{padding:14px 10px 18px}
html .mn-rail-in{padding:16px 14px 18px}
/* 目录成了面板，原来那条贴左的细线就多余了；缩进也交给面板的内边距 */
html .mn-side ul{border-left:0}
html .mn-sec,html .mn-sub{padding-left:10px;margin-left:0}
/* 轨成了面板，列之间那条竖分隔线就多余了 */
html .cs-rail,html .sh-rail{border-right:0}
html .cs-rail,html .sh-rail{padding:22px 0 22px 18px}
html .hrail button,html .trail a{border-radius:var(--r-s)}
html .hitem{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-l);
  padding:clamp(20px,2.6vw,30px);margin-bottom:12px;box-shadow:var(--elev)}
html .hitem:last-child{margin-bottom:0}
html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{border-color:color-mix(in srgb,var(--signal) 55%,transparent);box-shadow:var(--elev-2)}
html .hnums{border-color:var(--hair);background:transparent}

/* ══ 暗场块：白站里的黑色段落 ══
   组件层是从暗场版来的，那边整页就是暗的、不需要反白规则；
   搬到浅色主题后，段内文字仍取 --ink（近黑），黑字压黑底直接看不见。 */
html .band-dark,
html .band-dark h1,html .band-dark h2,html .band-dark h3,html .band-dark h4{color:var(--void-ink)}
html .band-dark .lead,html .band-dark p{color:var(--void-ink-2)}
html .band-dark .eyebrow{color:var(--void-ink-2)}
html .band-dark .eyebrow::before{background:var(--void-hair)}
html .band-dark .hair,html .band-dark .ix-row{border-color:var(--void-hair)}
html .band-dark .btn{background:var(--grad);border-color:transparent;color:var(--btn-ink)}
html .band-dark .btn-ghost{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--void-ink);
}
html .band-dark .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
html .band-dark .mono,html .band-dark .idx{color:var(--void-ink-2)}
html .band-dark .feat-list a,html .band-dark .feat-list li{color:var(--void-ink)}
html .band-dark .feat-list small,html .band-dark .feat-list .dim{color:var(--void-ink-2)}

/* ── 定点特效：只在固定的几个锚点上，不在大面积背景里 ── */

/* eyebrow 前面那条短横 —— 加一个缓慢的光点走过，2.4s 一轮，只在这一小段里 */
html .eyebrow::before{position:relative;overflow:hidden}
html .eyebrow{position:relative}
html .eyebrow::after{
  content:"";position:absolute;left:0;top:50%;width:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  background-size:8px 100%;background-repeat:no-repeat;
  animation:browSweep 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes browSweep{
  0%,12%{background-position:-8px 0;opacity:0}
  30%{opacity:.9}
  70%{opacity:.9}
  88%,100%{background-position:22px 0;opacity:0}
}

/* 站标那三条线：悬停才逐条点亮，平时完全静止 */
html .wordmark:hover .mark i:nth-child(1){animation:markPop .34s var(--e-out) both}
html .wordmark:hover .mark i:nth-child(2){animation:markPop .34s var(--e-out) .06s both}
html .wordmark:hover .mark i:nth-child(3){animation:markPop .34s var(--e-out) .12s both}
@keyframes markPop{from{transform:scaleX(.4);opacity:.5}to{transform:scaleX(1);opacity:1}}

/* 主按钮：悬停时一道光扫过，只发生在按钮内部 */
html .btn:not(.btn-ghost){position:relative;overflow:hidden}
html .btn:not(.btn-ghost)::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  background-size:220% 100%;background-position:-60% 0;
}
html .btn:not(.btn-ghost):hover::after{opacity:1;animation:btnShine .75s var(--e-out)}
@keyframes btnShine{to{background-position:160% 0}}

@media(prefers-reduced-motion:reduce){
  html .eyebrow::after,
  html .wordmark:hover .mark i,
  html .btn:not(.btn-ghost):hover::after{animation:none}
  html .eyebrow::after{opacity:0}
}

/* ══ 背景：滚动驱动的色晕 + 首屏 01 字流 ══
   自主播放的动画不管多慢多淡，都在跟正文抢注意力 —— 读一段字的功夫，
   余光里的东西一直在爬。改成把位移绑到滚动量：滚就动，停就完全静止，
   空闲时 canvas 主动退出 rAF，一帧都不跑。
   首屏另有一层很淡的 01 字流，滚出首屏淡没并停表，正文区一个字都没有。 */
html .fx-aurora{
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.18) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.18) 100%);
}
@media(prefers-reduced-motion:reduce){html .fx-aurora{opacity:.5}}


/* ══ 页头 hero：原来只写在帮助中心页的内联样式里，
   其余栏目页照抄了这套 class 却拿不到样式，标题会撑成默认大小、
   两栏也不成立。收到公共层，全站共用一份。 ══ */
.th{padding-block:calc((var(--sec-gap) + 4px) / 2) calc(var(--sec-gap) / 2)}
/* 右栏的说明文字与左栏（眉标 + 标题）上下居中对齐。
   原来是 end（底对齐），左栏比右栏高，说明就被顶到偏上的位置。
   880px 以下转单列，说明在标题下方，改回顶对齐。 */
.th-grid,.hero-grid{display:block}
.th h1{margin:22px 0 0;font-size:clamp(23px,2.8vw,38px);line-height:1.1;text-wrap:wrap}
.th .lead{max-width:24em}


/* ══ 左目录 + 右正文：帮助中心先用的这套，安装页也改成同一套，
   不再用横排的步骤条。同样收到公共层，两页共用一份。 ══ */
.tmain{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,5vw,64px);
  padding-block:calc(var(--sec-gap) / 2) calc(var(--sec-gap) * 2);border-top:1px solid var(--hair)}
.trail{position:sticky;top:calc(var(--nav) + 24px);align-self:start;
  max-height:calc(100svh - var(--nav) - 48px);overflow:auto;scrollbar-width:thin}
.trail .eyebrow{margin-bottom:14px}
.trail a{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--hair);color:var(--ink-2);font-size:13.5px;
  transition:padding-left var(--t) var(--e-out),color var(--t-fast) var(--e-out)}
.trail a:hover{color:var(--ink);padding-left:8px}
.trail a .mono{color:var(--ink-3);font-size:11px}
@media(max-width:880px){
  .tmain{grid-template-columns:minmax(0,1fr)}
  .trail{position:static;display:flex;flex-wrap:wrap;gap:8px;max-height:none;overflow:visible}
  .trail a{border:1px solid var(--hair);border-radius:999px;padding:6px 12px}
}


/* ══ 面与边：参考站的做法是「白面 + 0.5px 细边 + 大圆角 + 几乎看不见的影」，
   靠边界而不是靠阴影分层。 ══ */
html .hrail,html .trail,html .cs-rail-in,html .sh-rail-in,html .mn-rail-in,
html .card,html .tc,html .cd{border-radius:18px}
html .tc,html .cd,html .card{border:1px solid var(--hair)}

/* ══ 每栏的大标题走橙色（原来标题下那行说明小字的颜色）。
   说明小字已整站去掉，颜色让给标题；眉标和二级标题留黑。 ══ */
.d1,.d2,.th h1,.ch h1,.hero h1{
  color:var(--accent-o);font-weight:640;letter-spacing:-.035em;
}
.d1 .grad-text,.th h1 .grad-text,.hero h1 .grad-text{
  background:none;-webkit-text-fill-color:currentColor;color:inherit;
}


/* ══ 三团漂移色晕关掉：改用纯净底色（参考站的做法），不留任何自主动效 ══ */
html .fx-rule{display:none}
html .fx-bg::before{display:none}


/* ══ 首屏与正文之间的分隔线：统一加，但不做成横穿全栏的死线。
   宽度取「标题那一列」的量级（56% 左右）而不是整行，右端淡出，
   看着像一条收笔而不是一道栏杆。 ══ */
.th::after,.hero::after,.cs-head::after{
  content:"";display:block;height:1px;margin-top:var(--sec-gap);
  width:min(56%,620px);
  background:linear-gradient(90deg,var(--hair-2),var(--hair) 62%,transparent);
}
/* 案例页首屏下面紧接筛选工具条，线再短一档，只做收笔 */
.cs-head::after{width:min(34%,360px)}
/* 原来各写各的：帮助中心/安装页在容器上加 border-top，
   现在由上面这条统一承担，撤掉重复的横线 */
html .tmain{border-top:0}


/* ══ 小字的第二强调色 ══
   蓝色管「可点／标签」，黄色管「序号／计数」——两种角色分开，
   不是随机上色。浅色用 amber-700（白底 5.4:1），深色用 yellow-400。 */
/* 这些类都定义在各页的页内 <style> 里，页内样式在公共层之后加载，
   所以要用 html 前缀把权重提上来才压得住。 */
html .mn-n,html .mf-k,html .sf-k,html .cd-foot .mono,html .pk-f .mono,
html .mn-dur,html .mf-d{color:var(--accent-y)}
html .mf-k{background:color-mix(in srgb,var(--accent-y) 12%,transparent)}
html .sf-l.is-on .sf-k{color:inherit}


/* ══ 标题下的说明小字已整站去掉，橙色改由大标题承担。
   复盘里 #v4-page-subtitle 由脚本写入，删元素会报错，这里只隐藏。
   .v9-goal 是文件卡的正文，不是页标题的说明，留下来但回到正文色。 */
html #v4-page-subtitle{display:none}
html .v9-goal{color:var(--ink-2)}


/* ══ 步骤条：一条轴，STEP 1→2→… 顺时针折返，点一段看一段。
   必看手册的「上手步骤」和复盘的四段内容共用这一套。 ══ */
/* ── 上手步骤：一条轴，STEP 1→2→… 顺时针折返。
   用同一个网格排，列位置统一，折返后下一行的第一个正好落在
   上一行最后一个的正下方（分行容器做不到这点，右边缘对不齐）。 ── */
.sf{margin-top:18px}
.sf-rail{display:grid;justify-content:start;
  column-gap:28px;row-gap:30px;
  padding:2px 0 18px;border-bottom:1px solid var(--hair)}
.sf-l{position:relative;min-width:0;display:flex;
  flex-direction:column;align-items:flex-start;gap:3px;padding:9px 13px;
  border:1px solid var(--hair);border-radius:10px;background:var(--card);
  color:var(--ink-2);font-size:12.5px;line-height:1.45;cursor:pointer;
  white-space:normal;text-align:left;
  transition:border-color .15s,color .15s,background .15s}
.sf-l:hover{border-color:var(--signal-line);color:var(--ink)}
.sf-l.is-on{border-color:transparent;background:var(--nav-active);color:#fff}
.sf-k{flex:none;font-size:10px;letter-spacing:.08em;opacity:.7}
.sf-l.is-on .sf-k{opacity:.9}
.sf-t{min-width:0;font-weight:560}

/* 连接线画在格子上：行内指向下一个，行末指向正下方 */
.sf-l::after{content:"";position:absolute;pointer-events:none;
  border-color:var(--hair-2);border-style:solid;border-width:0}
.sf-l[data-link="right"]::after{top:50%;right:-22px;width:16px;height:0;
  border-top-width:1px;transform:translateY(-50%)}
.sf-l[data-link="left"]::after{top:50%;left:-22px;width:16px;height:0;
  border-top-width:1px;transform:translateY(-50%)}
.sf-l[data-link="down"]::after{left:50%;bottom:-24px;width:0;height:16px;
  border-left-width:1px;transform:translateX(-50%)}
/* 箭头尖 */
.sf-l[data-link]::before{content:"";position:absolute;pointer-events:none;
  width:5px;height:5px;border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.sf-l[data-link="right"]::before{top:50%;right:-24px;transform:translateY(-50%) rotate(-45deg)}
.sf-l[data-link="left"]::before{top:50%;left:-24px;transform:translateY(-50%) rotate(135deg)}
.sf-l[data-link="down"]::before{left:50%;bottom:-26px;transform:translateX(-50%) rotate(45deg)}

.sf-body{padding-top:20px}
.sf-body[hidden]{display:none}
.sf-body > h3{margin:0 0 10px}
@media(max-width:820px){
  .sf-rail{row-gap:22px}
  .sf-l[data-link="right"]::after,.sf-l[data-link="left"]::after,
  .sf-l[data-link="right"]::before,.sf-l[data-link="left"]::before{display:none}
}


/* ══ 顶栏右侧：退出按钮与主题切换器形状统一 ══
   两个挨在一起，一个 6px 直角一个 999px 胶囊，看着像两套控件。
   都走胶囊，高度本来就一致（32px）。 */
html .nav-right .btn,html .nav-right .btn-sm{border-radius:999px}


/* ══ 小图标 ══
   统一用 mask + currentColor 画，跟着文字颜色和主题走，
   不用往每个模板里塞 SVG 标签。 */
.ic-b::before{content:"";flex:none;display:inline-block;
  width:1em;height:1em;margin-right:.5em;vertical-align:-.12em;
  background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

.ic-pick::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h10M4%2018h6%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h10M4%2018h6%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}
.ic-book::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5A2.5%202.5%200%200%201%206.5%203H20v15H6.5A2.5%202.5%200%200%200%204%2020.5z%22%2F%3E%3Cpath%20d%3D%22M4%205.5v15%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2011h6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5A2.5%202.5%200%200%201%206.5%203H20v15H6.5A2.5%202.5%200%200%200%204%2020.5z%22%2F%3E%3Cpath%20d%3D%22M4%205.5v15%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2011h6%22%2F%3E%3C%2Fsvg%3E")}
.ic-skill::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%203.5a2%202%200%201%201%203%200V6h2.5a2%202%200%200%201%202%202v2.5h2.5a2%202%200%201%201%200%203H18V16a2%202%200%200%201-2%202h-2.5v2.5a2%202%200%201%201-3%200V18H8a2%202%200%200%201-2-2v-2.5H3.5a2%202%200%201%201%200-3H6V8a2%202%200%200%201%202-2h2.5z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%203.5a2%202%200%201%201%203%200V6h2.5a2%202%200%200%201%202%202v2.5h2.5a2%202%200%201%201%200%203H18V16a2%202%200%200%201-2%202h-2.5v2.5a2%202%200%201%201-3%200V18H8a2%202%200%200%201-2-2v-2.5H3.5a2%202%200%201%201%200-3H6V8a2%202%200%200%201%202-2h2.5z%22%2F%3E%3C%2Fsvg%3E")}
.ic-down::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%22%2F%3E%3Cpath%20d%3D%22m7%2011%205%205%205-5%22%2F%3E%3Cpath%20d%3D%22M4%2020h16%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%22%2F%3E%3Cpath%20d%3D%22m7%2011%205%205%205-5%22%2F%3E%3Cpath%20d%3D%22M4%2020h16%22%2F%3E%3C%2Fsvg%3E")}
.ic-key::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22M12.5%2012H21%22%2F%3E%3Cpath%20d%3D%22M17%2012v3.5M20%2012v2.5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22M12.5%2012H21%22%2F%3E%3Cpath%20d%3D%22M17%2012v3.5M20%2012v2.5%22%2F%3E%3C%2Fsvg%3E")}
.ic-star::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.6%205.6%206%20.8-4.4%204.2%201.1%206L12%2016.8%206.7%2019.6l1.1-6L3.4%209.4l6-.8z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.6%205.6%206%20.8-4.4%204.2%201.1%206L12%2016.8%206.7%2019.6l1.1-6L3.4%209.4l6-.8z%22%2F%3E%3C%2Fsvg%3E")}
.ic-image::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.5%22%20r%3D%221.6%22%2F%3E%3Cpath%20d%3D%22m4.5%2018%205-5%204%203.5%202.5-2%203.5%203.5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.5%22%20r%3D%221.6%22%2F%3E%3Cpath%20d%3D%22m4.5%2018%205-5%204%203.5%202.5-2%203.5%203.5%22%2F%3E%3C%2Fsvg%3E")}
.ic-bot::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%2211%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M12%204.5V8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223.5%22%20r%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M9%2013h.01M15%2013h.01%22%2F%3E%3Cpath%20d%3D%22M9.5%2016.2h5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%2211%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M12%204.5V8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223.5%22%20r%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M9%2013h.01M15%2013h.01%22%2F%3E%3Cpath%20d%3D%22M9.5%2016.2h5%22%2F%3E%3C%2Fsvg%3E")}

/* 图标统一规则：只挂左侧目录/筛选栏的顶层项，正文标题一律不挂 —— 用 .ic-b .ic-xxx 写在标签上 */
html .trail a::before{margin-right:.45em}

/* ══ 正文里的段落标题：只留一行「序号 + 目录里的那个名字」 ══
   原来一段要起三次头——眉标「01 / 挑选 Agent」、大标题「先挑一个 Agent」、
   再一句说明。三行说的是同一件事，读者要连读三遍才知道这段是什么。
   现在统一成一行，用的就是左侧目录里的那个标题，正文中不再另起名字。 */
html .sec-h{display:flex;align-items:baseline;gap:12px;margin:0 0 clamp(14px,1.8vw,18px)}
html .sec-n{flex:none;font-size:13px;color:var(--accent-y);letter-spacing:.06em}
html .sec-h h2{margin:0;font-size:clamp(19px,2vw,24px);font-weight:640;
  letter-spacing:-.03em;line-height:1.25;color:var(--ink-hi)}
html .sec-x{color:var(--ink-3);font-size:12px}


/* ══ 全站大卡片统一抬起来（药丸/徽章/分段控件不在内，抬起来会碎） ══ */
html .dt-card,
html .cd, html .sc, html .tc, html .api, html .icell, html .rule-cell,
html .two-col > div, html .hitem,
html .cs-tablewrap, html .ac,
html .mn-ov, html .mf-mod, html .mn-disclaimer, html .mn-note,
html .tgrid, html .tguides, html .hs-l, html .stats,
html .hrail, html .trail, html .cs-rail-in, html .sh-rail-in, html .mn-rail-in,
html .pk, html .pk-f, html .cd-foot, html .sh-card, html .dw-origin,
html .v9-card, html .wb-card, html .step-card{
  box-shadow:var(--card-elev)}

html .cd, html .ac, html .hitem, html .mf-mod{
  transition:box-shadow .2s var(--e-out),transform .2s var(--e-out),border-color .2s var(--e-out)}
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .ac:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .mf-mod:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  box-shadow:var(--card-elev-hi);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){
  html .cd:hover, html .ac:hover, html .hitem:hover, html .mf-mod:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   ① 剩余各页的卡片补上抬升（赚钱案例页不动）
   ② 卡片之间拉开距离，阴影不粘在一起
   ③ 悬停从蓝/青改成黄，浅色暗色各一套
   ══════════════════════════════════════════════════════════════ */

/* ① 之前没覆盖到的面 */
html .tabs, html .dw-meta,
html .v6-card, html .v6-block, html .v6-scene, html .v6-kpi,
html .v7-tk, html .v7-is, html .v8-card, html .v8-basis, html .v9,
html .side-button, html .reference, html .package-preview{
  box-shadow:var(--card-elev)}

/* ② 卡片网格间距：10~12px 时 40px 模糊的阴影会互相压住，看起来是一整片 */
html .grid{gap:18px}
html .pick-grid,html .pick-one{gap:18px}
html .feed{gap:18px}
html .v6-grid,html .v7-grid{gap:18px}

/* ③ 悬停统一黄色 —— 边框、内描边、底纹、标题一起换，
      只换边框会出现「黄框配蓝底蓝字」的割裂。 */
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html .icell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .rule-cell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .two-col > div:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html .ac:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .mf-mod:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .hs-l:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html .v6-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .v6-block:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .v8-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .v7-tk:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  border-color:var(--card-line-hover);
  background:linear-gradient(0deg,var(--card-wash-hover),var(--card-wash-hover)),var(--card);
  box-shadow:var(--card-elev-hi)}

html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover, html .prow:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  border-color:var(--card-line-hover);
  background:var(--card-wash-hover);
  box-shadow:inset 0 0 0 1px var(--card-line-hover),var(--card-elev-hi)}

html .sf-l:hover{border-color:var(--card-line-hover);color:var(--ink)}

/* 悬停时的标题／链接文字跟着走黄，别留蓝字 */
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t, html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-au, html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-go,
html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3, html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3, html .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .h-t, html .ac:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .ac-n{
  color:var(--card-ink-hover)}

/* ══════════════════════════════════════════════════════════════
   ① 眉标前那截短线：蓝 → 近黑
      用 --ink-hi 而不是写死 #000，暗色下它是白的；
      写死黑色在深底上等于没有。
   ② 目录条目已经有 01/02 编号，图标是重复信息，去掉
   ③ 目录条目之间的分隔线去掉
   ══════════════════════════════════════════════════════════════ */
html .eyebrow::before{background:linear-gradient(90deg,var(--ink-hi),transparent)}
/* 暗场块里维持原样：那里底色本来就深，另有一套灰线 */
html .band-dark .eyebrow::before{background:var(--void-hair)}

html .trail a.ic-b::before,
html .hrail .ic-b::before,
html .cs-rail-in .ic-b::before,
html .sh-rail-in .ic-b::before,
html .mn-rail-in .ic-b::before{display:none}

html .trail a{border-bottom:0}

/* ══════════════════════════════════════════════════════════════
   ① 眉标那条短线上还盖着一层蓝色微光（2.4s 走一轮的光点），
      上次只改了 ::before 的底色，这层 ::after 还是 --signal。
   ② 目录：左右内距做成显式对称，列宽收窄，
      去掉悬停时推左内距的位移——那会让左右空白一悬停就不等。
   ══════════════════════════════════════════════════════════════ */
html .eyebrow::after{
  background:linear-gradient(90deg,transparent,var(--ink-hi),transparent);
  background-size:8px 100%;background-repeat:no-repeat}
html .band-dark .eyebrow::after{
  background:linear-gradient(90deg,transparent,var(--void-ink-2),transparent);
  background-size:8px 100%;background-repeat:no-repeat}

html .tmain{grid-template-columns:172px minmax(0,1fr)}
html .hrail,html .trail{padding:12px 12px}
html .trail .eyebrow{margin-bottom:12px}
html .trail a{padding:8px 0}
html .trail a:hover{padding-left:0;color:var(--ink-hi)}
@media(max-width:900px){
  html .tmain{grid-template-columns:1fr}
  html .trail a:hover{padding-left:0}
}

/* ══════════════════════════════════════════════════════════════
   install / hotspots / login 额外引了 content.css，且在 skin.css
   之后加载。里面 `main .eyebrow{color:var(--brand)}`（--brand 就是
   蓝色 --signal）同级特异性下后来者胜，把眉标又染回蓝色；
   一批 `main .x:hover{border-color:var(--brand-line)}` 同理。
   这里用 `html main .x`（多一个元素选择器）把特异性抬高压过去。
   ══════════════════════════════════════════════════════════════ */
html main .eyebrow{color:var(--ink-hi)}

/* content.css 里的卡片悬停：蓝 → 黄 */
html main .row-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html main .choice-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html main .install-flow a:hover,
html main .api-link:hover,
html main .tutorial-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html main .check:hover,
html main .radio:hover,
html main .skill-resource-links > a:hover{
  border-color:var(--card-line-hover);
  background:var(--card-wash-hover)}

html main .tutorial-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{box-shadow:var(--card-elev-hi)}
html main .skill-card:target{
  border-color:var(--card-line-hover);
  box-shadow:0 0 0 3px var(--card-wash-hover)}

/* ══ 目录：标题居中、卡片按最长条目收窄 ══
   最长的「02 按领域配置 API」文字宽 115px，
   152 - 12*2 内距 - 1*2 边框 = 126px 内容区，留 11px 余量。 */
html .trail .eyebrow{display:flex;justify-content:center;gap:8px}
html .tmain{grid-template-columns:152px minmax(0,1fr)}
@media(max-width:900px){
  html .tmain{grid-template-columns:1fr}
  html .trail .eyebrow{justify-content:flex-start}
}

/* ══ content.css 不只改了眉标颜色，字号/字重/字距/display 全改了：
      12px / 750 / .12em / block，而不引 content.css 的页面是
      11.5px / 常规 / .2em / inline-flex。短线的粗细位置跟着字号走，
      所以两边看起来不一样。这里把排版一并对回去。 ══ */
html main .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:400;letter-spacing:.2em;
  color:var(--ink-hi)}
/* 目录里的仍然居中（.trail .eyebrow 类数更多，display 由它决定） */
html .trail .eyebrow{display:flex;justify-content:center;gap:8px}

/* ══ 眉标短线与流动光点合并到同一个伪元素 ══
   原来线是 ::before（flex 子元素，跟着对齐走），
   光点是 ::after（absolute left:0，钉死在最左）。
   目录标题居中后线移到中间、光点还在左边，就断成两截。
   改成 ::before 自己叠两层背景：底层是线，上层是走动的光点，
   位置绑在一起，左对齐/居中都不会分家。
   光点用 --paper：浅色下是近白点走过黑线，暗色下是近黑点走过白线，
   两个主题都看得见，不用各写一套。 ══ */
html .eyebrow::before{
  background-image:
    linear-gradient(90deg,transparent,var(--paper),transparent),
    linear-gradient(90deg,var(--ink-hi),transparent);
  background-size:8px 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:-8px 0,0 0;
  animation:browSweep2 2.8s ease-in-out infinite;
}
html .eyebrow::after{display:none}

@keyframes browSweep2{
  0%,12%   {background-position:-8px 0,0 0}
  88%,100% {background-position:22px 0,0 0}
}

/* 暗场块沿用它自己那套灰线，不要黑白反转 */
html .band-dark .eyebrow::before{
  background-image:
    linear-gradient(90deg,transparent,var(--void-ink-2),transparent),
    linear-gradient(90deg,var(--void-hair),transparent)}

@media (prefers-reduced-motion: reduce){
  html .eyebrow::before{animation:none;background-position:-8px 0,0 0}
}

/* ══ 目录标题改回左对齐，和下面的条目左边缘对齐 ══ */
html .trail .eyebrow{justify-content:flex-start}

/* ══ 目录三处修正 ══
   ① 悬停色块铺满卡片内宽：条目补横向内距 8px、再用等量负外距拉回去，
      文字位置不动，但左侧那条 3px 色条落进内距里，不再压住「01」。
   ② 卡片再收窄：152 → 144，内距 12 → 10（最长条目文字 115px，
      内容区 144-20-2 = 122px，仍有余量）。
   ③ 左右不对称的真凶是 overflow:auto 预留的滚动条槽——
      目录只有 2~4 条，永远用不到，改成 visible，两侧就等宽了。 ══ */
html .trail{overflow:visible;max-height:none;padding:10px 10px}
html .tmain{grid-template-columns:144px minmax(0,1fr)}
html .trail a{padding:8px 8px;margin-inline:-8px;border-radius:8px}
html .trail a:hover{padding-left:8px}
@media(max-width:900px){
  html .tmain{grid-template-columns:1fr}
  html .trail{overflow:visible}
  html .trail a{margin-inline:0}
}

/* ══════════════════════════════════════════════════════════════
   ① 主按钮 / 选中页签：蓝 → 黄
   ② 按钮不再拉满整行，收成内容宽度并允许换行
   ③ 卡片粘连修正：.tgrid 本来是「1px 间隙 + 灰底」拼成的一整块面板，
      .tc 只是里面的格子（无边框无圆角）。我之前又给容器加了阴影，
      于是整块浮起、内部却糊在一起。改成拆开：容器去掉底色边框阴影，
      间距拉开，每张 .tc 自己带边框圆角和立体。
   ══════════════════════════════════════════════════════════════ */

/* ① 黄 */
html main .btn.primary{
  background:var(--btn-y);border-color:var(--btn-y-line);color:var(--btn-y-ink)}
html main .btn.primary:hover{
  background:var(--btn-y);border-color:var(--btn-y-line);color:var(--btn-y-ink);
  filter:brightness(1.06)}
html .tguides .tabs button[aria-selected="true"]{color:var(--btn-y-line)}
html .tguides .tabs button[aria-selected="true"] b{
  color:var(--btn-y-line);background:var(--btn-y-wash)}
html main .tab.on{border-bottom-color:var(--btn-y-line);color:var(--btn-y-line)}
html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3{color:var(--btn-y-line)}

/* ② 按钮收短 + 允许换行 */
html main .btn.primary,html main .compact-btn{
  width:auto;max-width:100%;
  white-space:normal;text-align:center;line-height:1.45;
  padding:11px 20px;height:auto;min-height:44px}

/* ③ 拆开粘连的卡片 */
html .tgrid{
  background:none;border:0;border-radius:0;overflow:visible;
  gap:18px;box-shadow:none}
html .tc{
  background:var(--card);border:1px solid var(--hair);border-radius:16px;
  box-shadow:var(--card-elev);
  transition:box-shadow .2s var(--e-out),transform .2s var(--e-out),border-color .2s var(--e-out)}
html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  box-shadow:var(--card-elev-hi);transform:translateY(-2px);
  border-color:var(--card-line-hover);background:var(--card)}
/* 这三个是容器/控件，不该自己浮起来 */
html .tguides,html .tabs{box-shadow:none}
@media (prefers-reduced-motion: reduce){html .tc:hover{transform:none}}

/* ══ ① 按钮再收短：给上限宽度，超出就换行成两行 ══ */
html main .btn.primary,html main .compact-btn{max-width:14em}

/* ══ ② 卡片悬停彻底去蓝 ══
   skin.css 里 .cd/.sc/.tc/.api 那组悬停底纹用的是 --signal，
   这里连同 .card / .release-card 一起收进黄色那一套。 */
/* .card / .release-card 是纯容器——站内没有一个是 <a> 或 <button>。
   悬浮整块变色会让人以为能点，交互反馈交给卡片里的按钮。 */
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html .icell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .rule-cell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .two-col > div:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html .ac:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .mf-mod:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html .hs-l:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  background:linear-gradient(0deg,var(--card-wash-hover),var(--card-wash-hover)),var(--card);
  border-color:var(--card-line-hover);
  box-shadow:var(--card-elev-hi)}
html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t,html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-au,html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-go,
html .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,html .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,html .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .h-t,html .ac:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .ac-n{color:var(--card-ink-hover)}
html .release-log summary:hover{color:var(--card-ink-hover)}

/* ══════════════════════════════════════════════════════════
   悬停配色统一：由 scan_blue.py 扫出全部带蓝的 :hover 规则，
   逐条生成同选择器的黄色覆盖（前缀 html body 提权，压过
   页内 <style>——它们在 skin.css 之后加载）。
   只搬颜色类属性，transform / 圆角等仍由原规则负责。
   ══════════════════════════════════════════════════════════ */
html body .nav-links .ndp-i:hover b{color:var(--card-ink-hover)}
html body .btn-ghost:hover{border-color:var(--card-line-hover)}
html body .theme-sw button:hover{background:var(--card-wash-hover)}
html body .btn:hover{background:var(--btn-y);box-shadow:0 14px 40px var(--card-wash-hover)}
html body .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t,
html body .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html body .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html body .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html body .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html body .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2{color:var(--card-line-hover)}
html body .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t,
html body .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html body .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html body .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html body .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html body .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2{color:var(--card-ink-hover)}
html body /* ── 卡片 ── 均匀铺满的青色玻璃层（不用上深下浅的渐变， 否则大卡片下半截几乎没变化，就是之前"看不出来"的主因） */ html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .two-col > div:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .icell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .rule-cell:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{background:linear-gradient(0deg,var(--card-wash-hover),var(--card-wash-hover)),var(--card);border-color:var(--card-line-hover);box-shadow:0 0 0 1px var(--card-wash-hover),
             0 0 30px -8px var(--card-wash-hover),
             0 16px 38px rgba(0,0,0,.52)}
html body .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .prow:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{background:var(--card-wash-hover);box-shadow:inset 0 0 0 1px var(--card-wash-hover)}
html body /* ── 文字跟着走：标题转青、次要信息提亮、箭头右移 ── */ html .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t,
html body .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html body .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3,
html body .mc-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html body .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html body .row:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h2,
html body .prow:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .pname b{color:var(--card-ink-hover)}
html body .dw-list a:hover,
html body .sh-list a:hover,
html body .side-button:hover,
html body .trail a:hover,
html body .hrail button:hover{background:var(--card-wash-hover);box-shadow:inset 3px 0 0 var(--card-line-hover)}
html body .nav-links a:hover{background:var(--card-wash-hover)}
html body .btn-ghost:hover{background:var(--card-wash-hover);border-color:var(--card-line-hover)}
html body /* ── 工作台同款 ── */ html .v4-rail-item:hover,
html body .v4-side-view:hover,
html body .v4-button:hover,
html body .v4-row:hover,
html body .v6-row:hover{background:var(--card-wash-hover)}
html body .v4-side-view:hover,
html body .v4-rail-item:hover{box-shadow:inset 3px 0 0 var(--card-line-hover)}
html body .v4-button:hover{border-color:var(--card-line-hover)}
html body .steps-nav a:hover,
html body .rail div:hover{box-shadow:inset 3px 0 0 var(--card-line-hover)}
html body .nav-links a:hover{box-shadow:inset 0 -2px 0 var(--card-line-hover)}
html body .hitem:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{border-color:var(--card-line-hover)}
html body .sf-l:hover{border-color:var(--card-line-hover)}
html body main .row-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{border-color:var(--card-line-hover);background:var(--card-wash-hover)}
html body main .btn:hover{border-color:var(--card-line-hover);background:var(--card-wash-hover)}
html body main .btn.primary:hover{background:var(--card-line-hover);border-color:var(--card-line-hover)}
html body main .btn-link:hover{color:var(--card-line-hover)}
html body main .check:hover{border-color:var(--card-line-hover);background:var(--card-wash-hover)}
html body main .radio:hover{border-color:var(--card-line-hover)}
html body main .choice-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{border-color:var(--card-line-hover);background:var(--card-wash-hover)}
html body main .install-flow a:hover{border-color:var(--card-line-hover);background:var(--card-wash-hover)}
html body main .api-link:hover{border-color:var(--card-line-hover);background:var(--card-wash-hover)}
html body main .primary-link:hover{border-color:var(--card-line-hover);background:var(--card-line-hover)}
html body main .command-box button:hover{background:var(--card-wash-hover)}
html body main .prompt-box button:hover{background:var(--card-wash-hover)}
html body main .tutorial-card:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{border-color:var(--card-line-hover)}
html body main .tutorial-step-links a:hover{background:var(--card-wash-hover)}
html body .api-link.tutorial:hover{border-color:var(--card-line-hover);background:var(--card-wash-hover);color:var(--card-line-hover)}
html body .release-log summary:hover{color:var(--card-line-hover)}
html body .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover h3{color:var(--card-line-hover)}
html body .sh-nav button:hover:not(:disabled){box-shadow:inset 3px 0 0 var(--card-line-hover)}
html body .sh-srcs .pill:hover:not(:disabled){border-color:var(--card-line-hover)}
html body .link-reset:hover{color:var(--card-ink-hover)}
html body .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{border-color:var(--card-line-hover)}
html body .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-au{color:var(--card-ink-hover)}
html body .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-t{color:var(--card-ink-hover)}
html body .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .cd-go{color:var(--card-ink-hover)}
html body .dw-list a:hover .arw{color:var(--card-line-hover)}
html body .lane-search:hover,
html body .lane-search:focus{border-color:var(--card-line-hover)}
html body .opportunity-card:hover{border-color:var(--card-line-hover)}
html body .button:hover{border-color:var(--card-line-hover)}
html body .button.primary:hover{background:var(--card-line-hover);border-color:var(--card-line-hover)}
html body .sample-row:not(.head):hover{background:var(--card-wash-hover)}
html body .comment-item[href]:hover q{color:var(--card-line-hover)}
html body .reference:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{border-color:var(--card-line-hover);background:var(--card-wash-hover)}
html body .option-button:hover{border-color:var(--card-line-hover)}
html body .totop:hover{border-color:var(--card-line-hover);color:var(--card-ink-hover)}
html body .ai-src a:hover{color:var(--card-ink-hover);border-bottom-color:var(--card-line-hover)}
html body .ac:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover .ac-go{color:var(--card-ink-hover)}
html body .cs-nav button:hover{box-shadow:inset 3px 0 0 var(--card-line-hover)}
html body .cs-table tbody tr:hover .r-name{color:var(--card-ink-hover)}
html body .cs-pager button:hover:not(:disabled){background:var(--card-wash-hover);border-color:var(--card-line-hover);color:var(--card-ink-hover)}

/* ══ 修正：主按钮悬停不能被通用 .btn:hover 的淡黄底冲掉渐变 ══
   content.css 的 `main .btn:hover` 生成覆盖后比 `.btn.primary` 更具体，
   会把渐变替换成平铺色（background-image 变 none）。这里补回。 */
html body main .btn.primary,
html body main .btn.primary:hover,
html body .btn.primary,
html body .btn.primary:hover{
  background:var(--btn-y);
  border-color:var(--btn-y-line);
  color:var(--btn-y-ink)}
html body main .btn.primary:hover,
html body .btn.primary:hover{filter:brightness(1.05)}

/* 卡片悬停的边框也一并压实（原规则里 border-color 不带蓝，没被生成器搬过来） */
html body .tc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html body .cd:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,html body .sc:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover,
html body .api:is(a,button,[role="button"],[onclick],[data-open],[data-sq-open]):hover{
  border-color:var(--card-line-hover)}

/* ══ 安装按钮：居中，并放宽到两行以内 ══
   14em 时可用宽度约 11 个汉字，24 字的「生成视频扩展安装口令，
   复制给智能助手完成一键安装」会折成三行。放到 17em ≈ 14 字/行，
   两个按钮都落在两行。 */
html body main .btn.primary,
html body main .compact-btn,
html body .btn.primary{
  max-width:17em;margin-inline:auto}
html body main .release-card form,
html body .release-card form{display:flex;justify-content:center}

/* ══ 步骤箭头改用与教程箭头相同的字形 ══
   原来步骤是 CSS 画的：16px 细线 + 5px 折角，1px、--hair-2，
   比教程那个 15px 的「→」字形（--ink-3）细得多也短。
   直接换成同一个字形，粗细长度自然一致，且不用两套实现。
   列间距本来就都是 28px，字形在缺口里居中即可。 */
html .sf-l[data-link]::after{
  content:"→";border:0;width:28px;height:auto;
  font-size:15px;line-height:1;color:var(--ink-3);
  text-align:center;font-family:inherit}
html .sf-l[data-link]::before{display:none}
html .sf-l[data-link="right"]::after{
  top:50%;right:-28px;left:auto;bottom:auto;transform:translateY(-50%)}
html .sf-l[data-link="left"]::after{
  content:"←";top:50%;left:-28px;right:auto;bottom:auto;transform:translateY(-50%)}
html .sf-l[data-link="down"]::after{
  content:"↓";left:50%;bottom:-30px;top:auto;right:auto;transform:translateX(-50%)}
@media(max-width:820px){
  html .sf-l[data-link="right"]::after,html .sf-l[data-link="left"]::after{display:none}
}

/* ══════════════════════════════════════════════════════════════
   按钮统一改用配色试验区 B7 的第 3 档（315deg，右下 → 左上）。
   只管按钮：.btn / .btn.primary / 抽屉的开始按钮 / 新手引导那两个。
   .btn-ghost 是描边按钮，用 :not() 摘出去，别被填成实心。
   ══════════════════════════════════════════════════════════════ */
:root{
  --btn-b7:linear-gradient(315deg,#FBA95E 0%,#FA8F2C 100%);
  --btn-b7-ink:#332103;
  --btn-b7-glow:rgba(228,120,20,.26);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --btn-b7:linear-gradient(315deg,#ED8C3A 0%,#E17214 100%);
    --btn-b7-ink:#1B1204;
    --btn-b7-glow:rgba(225,114,20,.30);
  }
}
:root[data-theme="dark"]{
  --btn-b7:linear-gradient(315deg,#ED8C3A 0%,#E17214 100%);
  --btn-b7-ink:#1B1204;
  --btn-b7-glow:rgba(225,114,20,.30);
}
html .btn:not(.btn-ghost),
html body .btn:not(.btn-ghost),
html main .btn.primary:not(.btn-ghost),
html body main .btn.primary:not(.btn-ghost),
html body .btn.primary:not(.btn-ghost),
html .band-dark .btn:not(.btn-ghost),
html .dw-start,html .sh-start,
html .st-go,
html .tour-b.pri{
  background:var(--btn-b7);
  background-image:var(--btn-b7);
  color:var(--btn-b7-ink);
  border-color:transparent;
  box-shadow:0 6px 18px var(--btn-b7-glow);
}
html .btn:not(.btn-ghost):hover,
html body .btn:not(.btn-ghost):hover,
html main .btn.primary:not(.btn-ghost):hover,
html body main .btn.primary:not(.btn-ghost):hover,
html body .btn.primary:not(.btn-ghost):hover,
html .dw-start:hover,html .sh-start:hover,
html .st-go:hover,
html .tour-b.pri:hover{
  background:var(--btn-b7);
  background-image:var(--btn-b7);
  color:var(--btn-b7-ink);
  border-color:transparent;
  box-shadow:0 10px 26px var(--btn-b7-glow);
  filter:brightness(1.05);
}

/* ══════════════════════════════════════════════════════════════
   收尾：剩下的「实心黄」一起转到按钮那档橙。
   只动填充面，不动文字——标题、章节号、大数字那类渐变字仍是金黄
   （.grad-text / .stats b / .ac-rev b 都靠 background-clip:text，
   这里刻意不碰）。
   ══════════════════════════════════════════════════════════════ */

/* 主题切换的选中格 */
html .theme-sw button[aria-pressed="true"],
html body .theme-sw button[aria-pressed="true"]{
  background:var(--btn-b7);background-image:var(--btn-b7);color:var(--btn-b7-ink)}

/* 顶部滚动进度条 · 站标三点悬停 */
html .fx-progress i{background:var(--btn-b7)}
html .wordmark:hover .mark i{background:var(--btn-b7)}

/* 分段控件 / 页签 / 胶囊的选中态 */
html .seg button[aria-pressed="true"],
html .tabs button[aria-selected="true"],
html .pill[aria-pressed="true"],
html .sh-srcs .pill[aria-pressed="true"],
html .sh-top[aria-pressed="true"]{
  background:var(--btn-b7);background-image:var(--btn-b7);
  color:var(--btn-b7-ink);border-color:transparent}
html .seg button[aria-pressed="true"] b,
html .tabs button[aria-selected="true"] b,
html .tguides .tabs button[aria-selected="true"],
html .tguides .tabs button[aria-selected="true"] b,
html .sh-srcs .pill[aria-pressed="true"] b{color:var(--btn-b7-ink);opacity:.72}

/* 行首那条竖指示线 */
html .ix-row::before,
html .hitem::before,html .row::before,html .prow::before{background:var(--btn-b7)}

/* 步骤条选中：手册页是描边写法，这里只给别处兜底 */
html .sf-l.is-on{background:var(--btn-b7);color:var(--btn-b7-ink)}

/* 数据条 · 分页当前页 */
html .mc-bfill,html .ac-score-b i,html .r-bar i{background:var(--btn-b7)}
html .cs-pager button[aria-current="page"]{
  background:var(--btn-b7);background-image:var(--btn-b7);
  color:var(--btn-b7-ink);border-color:transparent}

/* 手册页：卡片序号圆点 · 新手引导的进度点 */
html .st-n{background:var(--btn-b7);background-image:var(--btn-b7);color:var(--btn-b7-ink)}
html .tour-dots i.on{background:var(--btn-b7)}

/* content.css 里那批（它排在 skin.css 后面加载，选择器要再重一档才压得住） */
html body main .dot.done,html body main .dot.now,
html body main .warning-mark,
html body main .api-badge.required,
html body main .tutorial-step-number,
html body main .primary-link,
html body main .primary-link:hover{
  background:var(--btn-b7);background-image:var(--btn-b7);
  color:var(--btn-b7-ink);border-color:transparent}

/* 每日热点自带的一套（.button 不是 .btn，是另一套类名） */
html body .global-nav a.active::after,
html body .daily-meta i{background:var(--btn-b7)}
html body .button.primary,
html body .button.primary:hover{
  background:var(--btn-b7);background-image:var(--btn-b7);
  color:var(--btn-b7-ink);border-color:transparent}

/* ══════════════════════════════════════════════════════════════
   全站竖向节奏统一到一个量 --sec-gap。
   规则：板块之间那条分隔线，线上和线下各留一个 --sec-gap，前后对称；
   没有线的（比如安装页的 .tsec）就直接留两个。
   ══════════════════════════════════════════════════════════════ */
:root{--sec-gap:clamp(20px,2.2vw,26px)}

/* ══ 标题层级：从上到下必须一级比一级小 ══
   段落标题收成 19px 之后，下面几级没跟着降，出现了倒挂——
   「04 图文教程」19px，底下挂着的「网络访问」反而 20px，
   「02 按领域配置 API」19px，底下的「调研与获客」22px。
   这里把段内分组和卡片标题并成一把梯子，接在段落标题下面：
   窄屏 23 / 19 / 16.5 / 15，宽屏 38 / 24 / 19.5 / 17。 */
html{--h-sub:clamp(16.5px,1.65vw,19.5px);   /* 段内分组：网络访问、调研与获客 */
     --h-card:clamp(15px,1.5vw,17px)}       /* 卡片标题：TikHub、教程卡、发布卡 */
html main .tsec h2,
html main .domain-panel-head h3,
html main .api-group-head h3{font-size:var(--h-sub)}
html main .api-card h4,
html main .install-wrap .api-card h4,
html main .install-wrap h3.sec,
html main .tc h3{font-size:var(--h-card)}