/* ============================================================
 * multi-agent-collab · CONVERGENCE 设计系统
 * 信号青 x 琥珀 x 深底。六流汇一板：差异可见，规矩同一。
 * ============================================================ */

/* ── 变量 ─────────────────────────────────────────────────── */
:root{
  /* 表面 */
  --bg:#05070C;
  --panel:rgba(9,15,24,.66);
  --panel-solid:#0A1119;
  --line:rgba(70,224,255,.14);
  --line2:rgba(70,224,255,.3);
  --line-top:rgba(70,224,255,.22);      /* 卡片上边高光，抬出层次 */

  /* 语义色 */
  --cy:#46E0FF;            /* 信号青（主） */
  --cy-soft:rgba(70,224,255,.55);
  --am:#FFB84D;            /* 人类指令 */
  --rd:#FF5A5A;            /* 失联 */

  /* 文字：--tx3 已从 #4E6577 提到 #6B869B，
     在 #05070C 底上约 5.8:1，满足 WCAG AA（正文级） */
  --tx:#DFF1FA;
  --tx2:#8FA9BC;
  --tx3:#6B869B;

  --c-cld:#FF8A50;  --c-cdx:#37D67A;  --c-opc:#53C8FF;
  --c-pi0:#B79CFF;  --c-tr4:#6E9BFF;  --c-wb0:#D9F24A;

  --sans:'Sora','PingFang SC','HarmonyOS Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --mono:'PlexMono','SFMono-Regular',Consolas,'Courier New','Microsoft YaHei',monospace;

  /* 间距刻度：全站只用这一套，别的地方不许再写裸像素 */
  --s1:8px;   --s2:12px;  --s3:16px;  --s4:20px;  --s5:24px;  --s6:28px;
  --s7:32px;  --s8:40px;  --s9:48px;  --s10:64px; --s11:80px; --s12:112px;

  --ease:cubic-bezier(.22,.8,.28,1);
  --dur:.28s;
  --pre-dur:900ms;         /* 幕布进度动画时长；与 ui.js 的 PRELOAD_MIN 保持一致 */
  --acc:var(--cy);         /* 当前章节强调色，由 ui.js 随滚动写入（取自各 section 的 data-acc） */
  --head-h:62px;
}

/* ── 基础 ─────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:not(.js) .rv{opacity:1!important;transform:none!important}
body{
  background:var(--bg);color:var(--tx);font-family:var(--mono);
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;   /* 数字等宽，时钟/计数器不抖 */
}
::selection{background:rgba(70,224,255,.28);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--mono);color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
.mono{font-family:var(--mono)}
code{font-family:var(--mono);font-size:.9em;color:var(--cy);background:rgba(70,224,255,.06);padding:.08em .4em;border:1px solid var(--line)}
/* 代码块里的 <code> 是块级容器，不该继承上面那套「行内代码」的
   青字 + 底色 + 边框（会渲染成嵌套青框，字号还被 0.9em 缩掉一成） */
.code pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}

/* 可访问性：只用键盘时的统一焦点环 */
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 跳到正文：默认移出视口，聚焦时才出现 */
.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:12px;top:12px;padding:10px 16px;background:var(--cy);color:#02141C;font-size:12px}

/* 全局细网格 + 顶部辉光 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 71px,rgba(70,224,255,.022) 71px 72px),
    repeating-linear-gradient(90deg,transparent 0 71px,rgba(70,224,255,.022) 71px 72px);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at 50% 0%,rgba(70,224,255,.045),transparent 55%);
}
.vignette{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(ellipse 125% 100% at 50% 42%,transparent 55%,rgba(0,0,0,.48))}
.grain{position:fixed;inset:0;z-index:61;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70}
#progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cy),var(--acc));transition:background .4s linear}

/* 幕布期间锁滚动，避免读者在幕后翻页 */
html.js body.is-booting{overflow:hidden}

/* 光标 */
.c-dot,.c-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:80;border-radius:50%;transform:translate(-50%,-50%)}
.c-dot{width:5px;height:5px;background:var(--cy)}
.c-ring{width:30px;height:30px;border:1px solid var(--line2);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s}
.c-ring.hot{width:50px;height:50px;border-color:var(--am)}
@media (pointer:coarse){.c-dot,.c-ring{display:none}}

/* ── 氛围光斑 ───────────────────────────────────────────────
 * HTML 里一直有 .orb-* 三个空 div，但从来没写过样式（零高度不可见）。
 * 补成三团缓慢漂移的柔光，给深底加一点体积感，不抢正文。
 * 不加 filter:blur() —— 径向渐变本身就是柔的，大尺寸 blur 只会
 * 白白拖慢光栅化（实测首屏绘制因此慢了一截）。
 */
.orb{position:fixed;z-index:0;pointer-events:none;border-radius:50%;opacity:.5;will-change:transform}
.orb-a{width:46vw;height:46vw;max-width:660px;max-height:660px;top:-12vw;left:-8vw;
  background:radial-gradient(circle at 50% 50%,rgba(70,224,255,.17),rgba(70,224,255,.06) 45%,transparent 72%);
  animation:orbA 26s var(--ease) infinite alternate}
.orb-b{width:38vw;height:38vw;max-width:540px;max-height:540px;top:32%;right:-10vw;
  background:radial-gradient(circle at 50% 50%,rgba(167,139,255,.14),rgba(167,139,255,.05) 45%,transparent 72%);
  animation:orbB 32s var(--ease) infinite alternate}
.orb-c{width:34vw;height:34vw;max-width:480px;max-height:480px;bottom:-10vw;left:24%;
  background:radial-gradient(circle at 50% 50%,rgba(255,184,77,.1),rgba(255,184,77,.035) 45%,transparent 72%);
  animation:orbC 38s var(--ease) infinite alternate}
@keyframes orbA{from{transform:translate3d(0,0,0)}to{transform:translate3d(6vw,4vh,0)}}
@keyframes orbB{from{transform:translate3d(0,0,0)}to{transform:translate3d(-5vw,-5vh,0)}}
@keyframes orbC{from{transform:translate3d(0,0,0)}to{transform:translate3d(4vw,-3vh,0)}}

/* ── 关键词跑马灯 ───────────────────────────────────────────
 * 同样是「有标记没样式」的老问题：两行裸文字横着溢出到屏幕外。
 * 补成无限滚动条：两组内容首尾相接，位移 -50% 即可无缝循环；
 * 两端用 mask 渐隐，不出现硬切边。
 */
.marquee{position:relative;margin-top:var(--s10);padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee-group span{display:inline-flex;align-items:center;padding:0 var(--s4);font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--tx2);white-space:nowrap}
.marquee-group i{font-style:normal;color:var(--cy);opacity:.6;font-size:10px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── 预加载幕布 ─────────────────────────────────────────────
 * 环形进度 + 阶段文字 + 六个信号点。无 JS 时整块不渲染：
 * 否则页面会被永远关在幕布后面（html.js 由 JS 第一时间打上）。
 */
#preloader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:26px 30px;transition:opacity .6s var(--ease),visibility .6s var(--ease)}
html:not(.js) #preloader{display:none}
body.is-loaded #preloader{opacity:0;visibility:hidden;pointer-events:none}
body.is-loaded #preloader .pre-mid{transform:translateY(-10px)}
#preloader::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 46%,rgba(70,224,255,.07),transparent 70%);
  animation:preGlow 3.4s var(--ease) infinite;
}
@keyframes preGlow{0%,100%{opacity:.55}50%{opacity:1}}

.pre-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);font-size:11px;letter-spacing:.2em;color:var(--tx3);position:relative;z-index:1}
.pre-brand{display:inline-flex;align-items:center;gap:10px;min-width:0}
.pre-brand svg{width:16px;height:16px;flex:none;animation:preSpin 9s linear infinite}
@keyframes preSpin{to{transform:rotate(360deg)}}
.pre-ver{color:var(--tx3);white-space:nowrap}

.pre-mid{display:flex;flex-direction:column;align-items:center;gap:var(--s6);position:relative;z-index:1;transition:transform .6s var(--ease)}
.pre-ring{position:relative;width:148px;height:148px}
.pre-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.pr-track{fill:none;stroke:rgba(70,224,255,.1);stroke-width:2}
/* 进度环/进度条/信号点全部交给 CSS 动画：它们跑在合成器线程上，
   即使主线程正忙着解析脚本（实测能卡住 1.8 秒），视觉也照样在走。
   JS 只负责最后一跳（body.is-loaded）与文案。 */
.pr-fill{
  fill:none;stroke:var(--cy);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  filter:drop-shadow(0 0 7px rgba(70,224,255,.6));
  animation:prRing var(--pre-dur,900ms) linear forwards;
}
@keyframes prRing{to{stroke-dashoffset:29.4}}          /* 先走到 91%，剩下的等 JS 收尾 */
.pre-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;font-size:44px;font-weight:500;color:var(--cy);line-height:1;text-shadow:0 0 24px rgba(70,224,255,.4)}
.pre-count em{font-style:normal;font-size:.34em;color:var(--tx3);align-self:flex-end;margin-bottom:6px}
.pre-stage{font-size:11px;letter-spacing:.2em;color:var(--tx2);min-height:1.6em;transition:opacity .25s}
.pre-dots{display:flex;gap:14px}
.pre-dots i{width:9px;height:9px;border-radius:2px;background:rgba(70,224,255,.1);box-shadow:inset 0 0 0 1px var(--line2);animation:prDot 160ms linear forwards}
.pre-dots i:nth-child(1){animation-delay:0ms}
.pre-dots i:nth-child(2){animation-delay:130ms}
.pre-dots i:nth-child(3){animation-delay:260ms}
.pre-dots i:nth-child(4){animation-delay:390ms}
.pre-dots i:nth-child(5){animation-delay:520ms}
.pre-dots i:nth-child(6){animation-delay:650ms}
@keyframes prDot{to{background:var(--cy);box-shadow:0 0 12px rgba(70,224,255,.9)}}

.pre-bottom{display:flex;flex-direction:column;gap:var(--s3);font-size:10px;letter-spacing:.16em;color:var(--tx3);position:relative;z-index:1}
.pre-hint{overflow-wrap:anywhere}
.pre-bar{display:block;height:1px;background:var(--line);position:relative;overflow:hidden}
.pre-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cy),var(--am));animation:prBar var(--pre-dur,900ms) linear forwards}
@keyframes prBar{to{transform:scaleX(.91)}}

/* 掀幕：所有进度一次性归位到 100%，幕布淡出 */
body.is-loaded .pr-fill{animation:none;stroke-dashoffset:0}
body.is-loaded .pre-bar i{animation:none;transform:scaleX(1)}
body.is-loaded .pre-dots i{animation:none;background:var(--cy);box-shadow:0 0 12px rgba(70,224,255,.9)}

/* ── 顶栏 ─────────────────────────────────────────────────── */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:26px;padding:14px 30px;border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
.site-head.solid{background:rgba(5,7,12,.82);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;flex:none;min-width:0}
.brand svg{width:20px;height:20px;flex:none;transition:transform .5s var(--ease)}
/* 品牌标记 = logo 的简化版（六条连线 + 六边形黑板核心），
   与 favicon、预加载幕布上的那枚是同一个形状 —— 三处必须一致 */
.bm-link{stroke:var(--cy);stroke-width:7.6;stroke-linecap:round;fill:none;opacity:.92}
.bm-core{fill:var(--cy);stroke:none}
.brand:hover svg{transform:rotate(90deg)}
.brand b{font-family:var(--sans);font-weight:800;font-size:14.5px;letter-spacing:.02em;white-space:nowrap}
.brand span{font-size:10px;letter-spacing:.22em;color:var(--cy-soft);border:1px solid var(--line2);padding:3px 8px;white-space:nowrap}
.site-nav{display:flex;gap:3px;margin-left:auto;font-size:11px;letter-spacing:.12em;color:var(--tx2)}
.site-nav a{display:flex;gap:7px;align-items:baseline;padding:6px 11px;border:1px solid transparent;transition:.25s}
.site-nav a i{font-style:normal;font-size:9px;color:var(--tx3)}
.site-nav a:hover,.site-nav a.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 32%,transparent);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.site-nav a.on i{color:var(--acc)}
.head-meta{margin-left:14px;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.16em;color:var(--tx3);white-space:nowrap}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px rgba(70,224,255,.9);animation:blink 2.4s infinite;flex:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.burger{display:none;flex:none;margin-left:auto;background:none;border:1px solid var(--line2);width:38px;height:38px;cursor:pointer;position:relative;transition:border-color .25s,background .25s}
.burger:hover{border-color:var(--cy);background:rgba(70,224,255,.06)}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--cy);transition:.3s var(--ease)}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){bottom:14px}
.burger.open span:nth-child(1){top:18px;transform:rotate(45deg)}
.burger.open span:nth-child(2){bottom:18px;transform:rotate(-45deg)}
/* visibility 用 0s 延迟切换（关闭时延后 0.35s 让淡出看得见）：
   若让 visibility 也走 0.35s 过渡，打开瞬间它仍是 hidden，
   同步调用的 focus() 会失败 —— 焦点根本进不了菜单 */
.menu{position:fixed;inset:0;z-index:49;background:rgba(5,7,12,.96);backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 30px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.menu.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s linear 0s}
.menu-nav{display:flex;flex-direction:column;width:100%}
.menu a{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:20px;font-weight:600;font-family:var(--sans);transition:color .25s,padding-left .25s}
.menu a:hover{color:var(--cy);padding-left:6px}
.menu a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--cy)}
.menu a span{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:400;letter-spacing:.14em}

/* 侧索引 */
/* 侧索引：命中区撑到 ~44px（视觉尺寸不变），并移出 Tab 序 ——
   它与顶栏导航指向完全相同的 7 个章节，不该让键盘用户多穿 7 个站 */
.side-index{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:0}
.side-index button{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:9px;flex-direction:row-reverse;padding:15px 0;transition:transform .3s var(--ease)}
.side-index button:active{transform:scale(1.12)}
.side-index .si-num{font-family:var(--mono);font-size:10px;color:var(--tx3);transition:color .25s}
.side-index .si-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--tx3);opacity:0;transform:translateX(6px);transition:.3s var(--ease)}
.side-index button::before{content:'';width:12px;height:1px;background:var(--tx3);transition:.3s var(--ease)}
.side-index button.on .si-num,.side-index button.on .si-label{color:var(--acc);opacity:1;transform:none}
.side-index button.on::before{width:20px;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.side-index button:hover .si-label{opacity:1;transform:none}

/* ── 章节 ─────────────────────────────────────────────────── */
.sec{padding:var(--s12) 0;position:relative}
.sec-head{display:flex;align-items:baseline;gap:12px;font-size:11px;letter-spacing:.22em;color:var(--tx2);margin-bottom:var(--s8)}
.sec-head .code{color:var(--acc);font-weight:600;letter-spacing:.12em;transition:color .4s linear}
.sec-head .en{color:var(--tx3)}
.sec-head .cn{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;color:var(--tx);display:inline-flex;align-items:baseline;gap:12px}
.sec-head .cn::before{content:'·';color:var(--tx3);letter-spacing:0}
.sec-head::after{content:'';flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 12px);margin-left:8px;transform:translateY(-2px)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.statement{font-family:var(--sans);font-size:clamp(30px,5vw,56px);line-height:1.16;font-weight:800;letter-spacing:-.01em;margin-bottom:var(--s7);text-wrap:balance}
.statement .st-line{display:block}
.statement em{font-style:normal;color:var(--acc);transition:color .4s linear}
.lede{color:var(--tx2);max-width:780px;font-size:15px;text-wrap:pretty}
.lede strong{color:var(--tx)}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;padding:13px 22px;border:1px solid var(--line2);color:var(--tx);transition:transform var(--dur) var(--ease),border-color var(--dur),color var(--dur),box-shadow var(--dur),background var(--dur);white-space:nowrap}
.btn::before{content:'▸';color:var(--cy);font-size:10px}
.btn-solid{background:var(--cy);border-color:var(--cy);color:#02141C;font-weight:600}
.btn-solid::before{color:#02141C}
.btn-solid:hover{box-shadow:0 0 30px rgba(70,224,255,.35);transform:translateY(-2px)}
.btn:hover{border-color:var(--cy);color:var(--cy);background:rgba(70,224,255,.05);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--tx2)}
.btn-ghost::before{color:var(--tx3)}
.btn-ghost:hover{border-color:var(--cy);color:var(--cy)}
.btn-ghost:hover::before{color:var(--cy)}
.btn:active,.btn-solid:active{transform:translateY(0) scale(.98)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 数据条 */
.strip{display:flex;flex-wrap:wrap;gap:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s10)}
.strip span{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;font-size:11.5px;letter-spacing:.12em;color:var(--tx3)}
.strip span + span{border-left:1px solid var(--line)}
.strip b{color:var(--cy);font-weight:600;font-size:14px;font-family:var(--mono)}
.strip i{font-style:normal;color:var(--am)}

/* ── HERO：汇流画布 ───────────────────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:128px 0 0;overflow:hidden;position:relative}
#heroScene{position:absolute;inset:0;width:100%;height:100%;z-index:1;cursor:crosshair}
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,7,12,.95) 22%,rgba(5,7,12,.62) 44%,rgba(5,7,12,0) 64%)}
.no-webgl #heroScene{display:none}
.hero-wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px;align-items:center;position:relative;z-index:3}
.hero-copy{min-width:0}          /* 网格子项默认 min-width:auto，长串代码会把列撑破 */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;color:var(--tx2);border:1px solid var(--line2);padding:8px 16px;margin-bottom:var(--s6);background:rgba(5,7,12,.6)}
.hero-title{font-family:var(--sans);font-size:clamp(30px,4.9vw,60px);line-height:1.14;font-weight:800;letter-spacing:-.015em;margin-bottom:var(--s6);word-break:keep-all}
.hero-title .ht-row{display:block;overflow:hidden}
/* 渐进增强：默认不位移，JS 失效时 H1 照样看得见（原来默认 translateY(110%)
   又被 .ht-row 的 overflow:hidden 裁掉，禁用 JS 时首屏标题整块消失）。
   初始位移改由 .js 提供，再靠 body.is-loaded 复位。 */
.hero-title .ht-line{display:block;transition:transform 1s var(--ease);transition-delay:var(--d,0s);text-wrap:balance}
html.js .hero-title .ht-line{transform:translateY(110%)}
body.is-loaded .hero-title .ht-line{transform:none}
/* 描边字给一层极低透明度填充：保住镂空感，同时兜住可读性与高对比模式 */
.hero-title .ht-outline{-webkit-text-stroke:1.5px rgba(223,241,250,.75);color:rgba(223,241,250,.07)}
@media (forced-colors:active){
  .hero-title .ht-outline{color:CanvasText;-webkit-text-stroke:0}
}
.hero-sub{color:var(--tx2);max-width:600px;font-size:15.5px;margin-bottom:var(--s7);text-wrap:pretty}
.hero-sub strong{color:var(--tx)}
.hero-sub code{white-space:nowrap}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* 右侧：共享黑板卡片（DOM 渲染，画布只画汇聚流与锁定框） */
.board-card{
  position:relative;z-index:3;
  background:linear-gradient(180deg,rgba(10,17,25,.94),rgba(7,12,18,.88));
  border:1px solid var(--line2);border-top-color:var(--line-top);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 0 1px rgba(70,224,255,.06);
  transition:border-color var(--dur),box-shadow var(--dur);
}
.board-card:hover{border-color:rgba(70,224,255,.42);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(70,224,255,.12)}
.bc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.bc-title{font-size:12px;letter-spacing:.1em;color:var(--tx2)}
.bc-title b{color:var(--cy);font-weight:600}
.bc-live{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;color:var(--cy)}
.bc-rows{list-style:none}
/* 三块板各给一个身份色（与第 05 章拓扑图的图例呼应） */
.bc-row{--slot:var(--cy);display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .45s var(--ease)}
.bc-row[data-slot="worklog"]{--slot:#A78BFF}
.bc-row[data-slot="inbox"]{--slot:var(--am)}
.bc-row:hover{background:rgba(70,224,255,.045)}
.bc-row::before{content:'';width:3px;height:20px;flex:none;background:var(--slot);opacity:.5;transition:opacity .45s,box-shadow .45s}
.bc-row:hover::before{opacity:.8}
.bc-row.flash{background:rgba(70,224,255,.09)}
.bc-row.flash::before{opacity:1;box-shadow:0 0 12px var(--slot)}
.bc-k{font-size:12px;color:var(--slot);letter-spacing:.04em;min-width:88px}
.bc-v{font-size:12px;color:var(--tx3);letter-spacing:.03em}
.bc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 18px;font-size:10px;letter-spacing:.14em;color:var(--tx3)}
.bc-conv{display:inline-flex;align-items:center;gap:10px}
.bc-conv::before{content:'';width:26px;height:1px;background:repeating-linear-gradient(90deg,var(--line2) 0 4px,transparent 4px 8px)}
.bc-hint{color:var(--am);border:1px dashed rgba(255,184,77,.4);padding:5px 10px;background:rgba(255,184,77,.05)}

/* HUD 角标 + 控制台日志 */
.hud{position:absolute;z-index:3;font-size:10px;letter-spacing:.14em;color:var(--tx3);pointer-events:none;font-family:var(--mono)}
.hud b{color:var(--cy-soft);font-weight:500}
.hud-tl{top:86px;left:34px}
.hud-tr{top:86px;right:34px;text-align:right}
.hud-br{bottom:20px;right:34px;text-align:right}
.console-log{position:absolute;left:34px;bottom:20px;z-index:3;width:min(430px,52vw);font-size:10.5px;line-height:2;color:var(--tx3);pointer-events:none;font-family:var(--mono)}
.console-log div{opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.console-log div.show{opacity:1;transform:none}
.console-log .t{color:var(--tx3)}
.console-log .ok{color:var(--cy)}
.console-log .hu{color:var(--am)}

/* ── 三支柱卡 ─────────────────────────────────────────────── */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:var(--s9) 0 var(--s10)}
.pcard{position:relative;background:var(--panel);border:1px solid var(--line);border-top-color:var(--line-top);padding:28px 26px;backdrop-filter:blur(8px);transition:transform .35s var(--ease),border-color .35s;overflow:hidden}
.pcard::before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(70,224,255,.08),transparent 65%);opacity:0;transition:opacity .35s}
.pcard:hover{transform:translateY(-5px);border-color:var(--line2)}
.pcard:hover::before{opacity:1}
.pcard-i{font-family:var(--mono);font-size:11px;color:var(--cy);letter-spacing:.14em}
.pcard h3{font-family:var(--sans);font-size:19px;font-weight:700;margin:12px 0 10px;letter-spacing:-.005em}
.pcard p{color:var(--tx2);font-size:14px;line-height:1.75;text-wrap:pretty}
.pcard p b{color:var(--tx)}

/* ── 对比表 ───────────────────────────────────────────────── */
.compare{border:1px solid var(--line);border-top-color:var(--line-top);background:var(--panel)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:170px 1fr 1fr}
.cmp-head{font-size:10.5px;letter-spacing:.16em;color:var(--tx3);border-bottom:1px solid var(--line)}
.cmp-head span,.cmp-row span{padding:15px 20px;border-right:1px solid var(--line)}
.cmp-head span:last-child,.cmp-row span:last-child{border-right:none}
.cmp-head .cmp-hi{color:var(--cy)}
.cmp-row{border-bottom:1px solid var(--line);font-size:14px}
.cmp-row:last-child{border-bottom:none}
.cmp-k{font-family:var(--mono);font-size:11.5px!important;color:var(--tx2);letter-spacing:.06em}
.cmp-a{color:var(--tx3)}
.cmp-b{color:var(--tx);background:rgba(70,224,255,.04)}

/* ── 统计 + 事故日志 ──────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:var(--s9) 0 var(--s1)}
.stat{background:var(--panel);border:1px solid var(--line);border-top-color:var(--line-top);padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.stat b{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;font-family:var(--mono);font-size:clamp(30px,3.4vw,42px);font-weight:500;color:var(--cy);line-height:1.05;letter-spacing:-.01em;text-shadow:0 0 22px rgba(70,224,255,.18)}
.stat b em{font-style:normal;font-size:.5em;color:var(--am);padding:0 .06em}
.stat-cap{margin:0;font-size:12.5px;color:var(--tx2);letter-spacing:.04em;line-height:1.6;text-wrap:pretty}
.incidents{margin-top:var(--s9);border:1px solid var(--line);border-top-color:var(--line-top);background:var(--panel)}
.inc-head,.inc-row{display:grid;grid-template-columns:1fr 56px 1fr}
.inc-head{font-size:10.5px;letter-spacing:.16em;color:var(--tx3);border-bottom:1px solid var(--line)}
.inc-head span{padding:13px 20px}
.inc-row{border-bottom:1px solid var(--line);font-size:14px;transition:background .25s}
.inc-row:hover{background:rgba(70,224,255,.028)}
.inc-row:hover .inc-rule{background:rgba(70,224,255,.06)}
.inc-row:last-child{border-bottom:none}
.inc-sym{padding:18px 20px;color:var(--tx3)}
.inc-arrow{display:flex;align-items:center;justify-content:center;color:var(--am);border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:14px}
.inc-rule{padding:18px 20px;color:var(--tx);background:rgba(70,224,255,.035)}
.inc-rule b{color:var(--cy);font-weight:500}

/* ── 交规卡 + 应答机信号条 ────────────────────────────────── */
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s9)}
.rule{position:relative;background:var(--panel);border:1px solid var(--line);border-top-color:var(--line-top);padding:30px 28px;transition:border-color .35s,transform .35s var(--ease)}
.rule:hover{border-color:var(--line2);transform:translateY(-4px)}
.rule-r{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--am)}
.rule h3{font-family:var(--sans);font-size:20px;font-weight:700;margin:12px 0 12px;letter-spacing:-.005em}
.rule p{color:var(--tx2);font-size:14px;text-wrap:pretty}
.rule p b{color:var(--tx)}
.hb-demo{margin-top:var(--s9);border:1px solid var(--line);border-top-color:var(--line-top);background:var(--panel);padding:26px 28px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hb-dots{display:flex;gap:26px;flex-wrap:wrap}
.hb-cell{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;color:var(--tx3);letter-spacing:.08em}
.hb-dot{width:11px;height:11px;border-radius:50%;background:var(--cy);position:relative;box-shadow:0 0 10px rgba(70,224,255,.7)}
.hb-dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--cy);animation:hb 2.2s var(--ease) infinite}
.hb-cell:nth-child(2) .hb-dot::after{animation-delay:.5s}
.hb-cell:nth-child(3) .hb-dot::after{animation-delay:1s}
.hb-cell:nth-child(4) .hb-dot::after{animation-delay:1.5s}
@keyframes hb{0%{transform:scale(.4);opacity:.9}80%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.hb-dot.dead{background:var(--rd);box-shadow:none}
.hb-dot.dead::after{display:none}
.hb-cell.dead{color:var(--rd)}
.hb-note{flex:1;min-width:240px;font-size:13.5px;color:var(--tx2);text-wrap:pretty}
.hb-note b{color:var(--tx)}

/* ── 第 04 章：指挥台（列表两列 + 满宽产品大图） ──────────────
 * 旧版是「左列表 / 右小图」双栏，产品截图被压到 ~540px 宽，
 * 1440px 宽的看板缩到 0.38 倍，里面的文字只剩 5px —— 等于没放。
 * 改成列表两列在上、看板满宽在下，截图按设计宽度接近 1:1 呈现。
 */
.board-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s8);margin-top:var(--s8)}
.board-list li{display:flex;gap:14px;font-size:14.5px;color:var(--tx2);text-wrap:pretty}
.board-list li:last-child{grid-column:1 / -1}
.board-list b{color:var(--tx)}
.bl-i{flex:none;width:32px;height:32px;border:1px solid var(--line2);background:rgba(70,224,255,.05);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--cy);transition:border-color .3s,color .3s,background .3s}
.board-list li:hover .bl-i{border-color:var(--acc);color:var(--acc);background:rgba(70,224,255,.09)}

.board-figure{margin:var(--s8) 0 0;border:1px solid var(--line2);border-top-color:var(--line-top);background:var(--panel-solid);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.bf-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(9,15,24,.5)}
.bf-bar i{width:9px;height:9px;border-radius:50%;opacity:.75;flex:none}
.bf-bar i:nth-child(1){background:var(--rd)}.bf-bar i:nth-child(2){background:var(--am)}.bf-bar i:nth-child(3){background:var(--cy)}
.bf-bar span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx3);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-zoom{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;position:relative;line-height:0}
.bf-zoom img{width:100%;height:auto}
.bf-zoom-tag{position:absolute;right:10px;bottom:10px;font-size:10px;letter-spacing:.1em;color:var(--tx2);background:rgba(5,7,12,.78);border:1px solid var(--line2);padding:5px 10px;opacity:0;transform:translateY(4px);transition:.3s var(--ease);line-height:1.6}
.bf-zoom:hover .bf-zoom-tag,.bf-zoom:focus-visible .bf-zoom-tag{opacity:1;transform:none}
@media (pointer:coarse){.bf-zoom-tag{opacity:1;transform:none}}
.bf-cap{padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--tx3);letter-spacing:.05em;border-top:1px solid var(--line)}

/* 截图放大 */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(3,5,9,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);animation:lbIn .28s var(--ease)}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:100%;max-height:100%;width:auto;border:1px solid var(--line2);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lb-close{position:absolute;top:18px;right:18px;background:rgba(5,7,12,.85);border:1px solid var(--line2);color:var(--tx2);font-size:11px;letter-spacing:.14em;padding:9px 14px;cursor:pointer;transition:.25s}
.lb-close:hover{border-color:var(--cy);color:var(--cy)}
.lb-close:active{transform:scale(.96)}
body.lb-open{overflow:hidden}

/* ── 拓扑舞台 ─────────────────────────────────────────────── */
.topo-stage{margin-top:var(--s9);border:1px solid var(--line);border-top-color:var(--line-top);background:radial-gradient(ellipse 80% 90% at 50% 40%,rgba(70,224,255,.05),transparent 70%),var(--panel-solid);overflow:hidden}
.topo-view{position:relative;height:clamp(340px,44vw,540px)}
#topoScene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#topoScene:active{cursor:grabbing}
.topo-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.topo-label{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--tx);white-space:nowrap;transform:translate(-50%,-50%);will-change:transform;opacity:0;transition:opacity .5s var(--ease);text-shadow:0 1px 6px rgba(5,7,12,.92),0 0 12px rgba(5,7,12,.7)}
.topo-label.in{opacity:1}
.topo-label i{width:8px;height:8px;border-radius:50%;flex:none}
.topo-label u{text-decoration:none;font-size:9px;letter-spacing:.1em;color:var(--tx3)}
.topo-label.is-center{font-size:12px;color:var(--cy)}
.topo-label.is-human{color:var(--am)}
.topo-label.is-human u{color:rgba(255,184,77,.75)}
.topo-cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--tx3);letter-spacing:.07em}
.topo-legend{display:flex;gap:18px;flex-wrap:wrap}
.topo-legend i{font-style:normal;display:inline-flex;align-items:center;gap:7px}
.topo-legend i::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cy)}
.topo-legend .lg-am::before{background:var(--am)}
.topo-legend .lg-bb::before{background:#fff}

/* ── 安装标签页 ───────────────────────────────────────────── */
.tabs{margin-top:var(--s9);border:1px solid var(--line);border-top-color:var(--line-top);background:var(--panel)}
.tab-bar{display:flex;border-bottom:1px solid var(--line)}
.tab{flex:1;background:none;border:none;color:var(--tx3);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;padding:17px 10px;cursor:pointer;transition:.25s;border-bottom:2px solid transparent;position:relative}
.tab i{font-style:normal;color:var(--tx3);margin-right:8px}
.tab.is-on{color:var(--cy);border-bottom-color:var(--cy);background:rgba(70,224,255,.04)}
.tab.is-on i{color:var(--cy)}
.tab:hover{color:var(--tx2)}
.tab:active{background:rgba(70,224,255,.08)}
.tabpanel{display:none}
.tabpanel.is-on{display:block}
.tabpanel-notes{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.tabpanel-notes li{font-size:13px;color:var(--tx3);padding-left:18px;position:relative}
.tabpanel-notes li::before{content:'▸';position:absolute;left:0;color:var(--cy)}
.tabpanel-notes b{color:var(--tx2)}
.checks{border:1px solid var(--line);padding:20px 22px;background:rgba(70,224,255,.03)}
.checks .ac-title{font-size:10.5px;letter-spacing:.16em;color:var(--tx3);margin-bottom:12px}
.checks ol{padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--tx2)}
.checks b{color:var(--cy);font-weight:500}
.code{border:1px solid var(--line);border-top-color:var(--line-top);background:#070C12;margin:14px 0}
.code-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--tx3);letter-spacing:.1em}
.code-bar i{width:8px;height:8px;border-radius:50%;flex:none}
.code-bar i:nth-child(1){background:var(--rd)}.code-bar i:nth-child(2){background:var(--am)}.code-bar i:nth-child(3){background:var(--cy)}
.code-bar .fname{margin-left:8px}
.code-bar .copy{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--tx2);font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:5px 12px;cursor:pointer;transition:.25s}
.code-bar .copy:hover{border-color:var(--cy);color:var(--cy)}
.code-bar .copy:active{transform:scale(.96)}
.code pre{padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.85;color:var(--tx)}
.code .c{color:var(--tx3)}.code .p{color:var(--cy)}.code .s{color:#8FE3A8}.code .m{color:var(--am)}
.cmd-table{width:100%;border-collapse:collapse;font-size:14px}
.cmd-table th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--tx3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.cmd-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--tx2);vertical-align:top;transition:background .2s}
.cmd-table tbody tr:hover td{background:rgba(70,224,255,.035)}
.cmd-table tr:last-child td{border-bottom:none}
.cmd-table td.cmd{font-family:var(--mono);font-size:12.5px;color:var(--tx);white-space:nowrap;cursor:copy;transition:color .2s}
.cmd-table td.cmd:hover{color:var(--acc)}
.cmd-table td.cmd::after{content:'⧉';margin-left:10px;color:var(--tx3);font-size:11px}
.cmd-table td.cmd.copied{color:var(--cy)}
.cmd-table td.cmd.copied::after{content:'✓ 已复制'}
.bounds{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s7)}
.bound{border:1px solid var(--line);border-top-color:var(--line-top);padding:22px 24px;background:var(--panel);transition:border-color .3s var(--ease)}
.bound:hover{border-color:var(--line2)}
.bound h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;margin-bottom:14px}
.bound.fit h4{color:var(--cy)}.bound.think h4{color:var(--am)}
.bound ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--tx2)}
.bound li{padding-left:16px;position:relative}
.bound li::before{content:'—';position:absolute;left:0;color:var(--tx3)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s11)}
.site-foot{border-top:1px solid var(--line);margin-top:var(--s12);padding:30px 0 34px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--tx3)}
.site-foot a:hover{color:var(--cy)}
.foot-mid{margin:0 auto}
.to-top{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--tx2);font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:8px 14px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:.25s}
.to-top:hover{border-color:var(--cy);color:var(--cy)}
.to-top:active{transform:scale(.96)}
.file-note{display:none;position:fixed;left:16px;bottom:16px;z-index:55;max-width:340px;background:rgba(10,17,25,.94);border:1px solid var(--line2);padding:14px 16px;font-size:12px;color:var(--tx2);line-height:1.6;backdrop-filter:blur(10px)}
body.from-file .file-note{display:block}
.file-note b{display:block;color:var(--am);font-size:12.5px;margin-bottom:4px}

/* 降级 */
.no-webgl #heroScene{display:none}
.no-webgl #topoScene{display:none}
.no-webgl .topo-view{height:clamp(200px,28vw,320px)}
.no-webgl .topo-stage{background:radial-gradient(ellipse 70% 80% at 50% 40%,rgba(70,224,255,.08),transparent 70%),var(--panel-solid)}

/* ══════════════════════════════════════════════════════════
 * 响应式
 * ══════════════════════════════════════════════════════════ */

/* ≤1120：收紧间距，侧索引在窄一点的桌面就让位 */
@media (max-width:1120px){
  .site-head{gap:18px;padding:14px 22px}
  .site-nav a{padding:6px 8px}
  .side-index{display:none}
}

/* ≤980：单列化，导航换成汉堡 */
@media (max-width:980px){
  .site-nav{display:none}
  .head-meta{display:none}
  .burger{display:block}
  .hero{padding-top:var(--s11)}
  .hero-wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .hero::after{background:linear-gradient(180deg,rgba(5,7,12,.72) 0%,rgba(5,7,12,.9) 52%,rgba(5,7,12,.96) 100%)}
  .board-card{margin-top:34px;max-width:560px}
  .console-log{width:calc(100% - 68px)}
  /* 单列之后 eyebrow 上移到 padding-top，三个 HUD 角标都会压到它 —— 一起收掉 */
  .hud-tl,.hud-tr,.hud-br{display:none}
  .board-list{grid-template-columns:1fr;gap:var(--s4)}
  .board-list li:last-child{grid-column:auto}
  .marquee{margin-top:var(--s9)}
  .cards-3{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .rules-grid{grid-template-columns:1fr}
  .bounds{grid-template-columns:1fr}
  .tab{font-size:10.5px;letter-spacing:.02em}
}

/* ≤680：紧凑排版 */
@media (max-width:680px){
  .wrap{padding:0 20px}
  .site-head{padding:12px 20px;gap:14px}
  .sec{padding:var(--s11) 0}
  .sec-head{margin-bottom:var(--s5)}
  .hero{padding-top:var(--s11)}
  .hero-title{margin-bottom:var(--s5)}
  .hero-sub{font-size:14.5px;margin-bottom:var(--s6)}
  .strip{gap:var(--s2) 0;margin-top:var(--s9)}
  /* 折行后行首元素仍带左边框会变成两条悬空竖线（.strip span + span 只按
     DOM 顺序加分隔线，不知道元素换行了）—— 小屏直接去掉竖线，靠间距分组 */
  .strip span{padding:10px 0;font-size:11.5px;letter-spacing:.06em}
  .strip span + span{border-left:none;padding-left:14px}
  .strip b{font-size:13px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--s8) 0 var(--s1)}
  .stat{padding:18px 16px;gap:10px}
  .stat b{font-size:clamp(24px,6.6vw,30px)}
  .stat-cap{font-size:11.5px;line-height:1.55}
  .statement{margin-bottom:var(--s5)}
  .lede{font-size:14px}
  .cards-3{margin:var(--s8) 0 var(--s9);gap:14px}
  .pcard{padding:24px 22px}
  .marquee{margin-top:var(--s8);padding:12px 0}
  .marquee-group span{font-size:10.5px;padding:0 var(--s3);letter-spacing:.12em}
  .orb{opacity:.34}
  .orb-a,.orb-b,.orb-c{filter:blur(54px)}
  .cmp-head,.cmp-row{grid-template-columns:104px 1fr 1fr}
  .cmp-head span,.cmp-row span{padding:12px 10px;font-size:12px}
  .inc-head{display:none}
  .inc-row{grid-template-columns:1fr}
  .inc-arrow{border:none;padding:6px 20px;justify-content:flex-start}
  .inc-sym,.inc-rule{border-bottom:1px dashed var(--line)}
  .rules-grid{margin-top:var(--s8)}
  .rule{padding:26px 22px}
  .hb-demo{margin-top:var(--s8);padding:22px 20px;gap:var(--s4)}
  .hb-dots{gap:18px}
  .hb-note{min-width:0;font-size:13px}
  .board-list{margin-top:var(--s6);gap:var(--s4)}
  .board-list li{font-size:13.5px;gap:12px}
  .bl-i{width:30px;height:30px;font-size:10.5px}
  .board-figure{margin-top:var(--s6)}
  .bf-bar span{font-size:10.5px}
  .bf-cap{font-size:11.5px;padding:10px 12px}
  .topo-view{height:420px}
  .topo-label{font-size:10px}
  .topo-label u{display:none}
  .topo-cap{font-size:11px;gap:8px;padding:12px 16px}
  .tabs{margin-top:var(--s8)}
  /* 三个标签横排要 458px，390px 屏只有 348px 可用 —— 横排要么挤成 8px 字，
     要么被裁掉第三个。改成带左侧色条的选项列表：照样一眼看出选中哪个。 */
  .tab-bar{flex-direction:column}
  .tab{flex:none;width:100%;text-align:left;padding:14px 16px;font-size:11px;letter-spacing:.06em;border-bottom:1px solid var(--line);border-left:2px solid transparent}
  .tab:last-child{border-bottom:none}
  /* 标签是自成一体的控件，选中态用固定的青，不跟章节强调色走
     （否则从第 06 章滚回第 01 章，选中 tab 的颜色会跟着变） */
  .tab.is-on{border-bottom-color:var(--line);border-left-color:var(--cy);background:rgba(70,224,255,.05);color:var(--cy)}
  .tab.is-on i{color:var(--cy)}
  /* 窄屏代码块改折行：原来 409–547px 的内容塞进 348px 只能硬截断，
     而隐藏式滚动条不给任何提示，读者会以为内容坏了 */
  .code pre{font-size:12px;padding:14px 16px;white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
  .cmd-table{font-size:12.5px}
  .cmd-table td.cmd{white-space:normal;font-size:11.5px}
  .bounds{margin-top:var(--s5);gap:14px}
  .bound{padding:20px 18px}
  .cta-row{margin-top:var(--s8);gap:10px}
  .btn{padding:12px 18px}
  .site-foot{margin-top:var(--s11);gap:12px}
  .foot-mid{margin:0;order:3;width:100%}
  .pre-top{font-size:9.5px;letter-spacing:.12em}
  .pre-ring{width:124px;height:124px}
  .pre-count{font-size:38px}
  .pre-mid{gap:var(--s4)}
  .pre-dots{gap:12px}
  .pre-dots i{width:8px;height:8px}
  .file-note{max-width:calc(100% - 32px);font-size:11.5px}
  .lb-close{top:12px;right:12px;padding:8px 12px}
}

/* ≤380：小屏手机，优先级最低的一律让位 */
@media (max-width:380px){
  .brand span{display:none}
  .brand b{font-size:13.5px}
  .brand svg{width:18px;height:18px}
  .board-card{margin-top:var(--s5)}
  .bc-head,.bc-row,.bc-foot{padding-left:14px;padding-right:14px}
  .bc-k{min-width:74px;font-size:11.5px}
  .bc-v{font-size:11.5px}
  .strip span{padding:10px 12px}
  .stat-grid{grid-template-columns:1fr}
}

/* 矮屏（横放手机 / 小笔记本）：hero 别强占满屏 */
@media (max-height:680px) and (min-width:981px){
  .hero{min-height:auto;padding:var(--s12) 0 var(--s8)}
}

/* 按平台安装配置器 */
.install-config{margin-top:40px;padding:30px;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:12px}
.install-config-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.install-kicker{font-size:10px;letter-spacing:.14em;color:var(--am);margin:0 0 9px}
.install-config h3{font-size:23px;font-weight:600;letter-spacing:-.02em;margin:0}
.install-clear{border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--tx2);padding:10px 13px;font-size:11px;white-space:nowrap;cursor:pointer}
.install-clear:hover{border-color:var(--cy);color:var(--cy)}
.install-clear:disabled{opacity:.45;cursor:default}
.platform-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;padding:0;margin:0;min-width:0}
.platform-search-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--tx2);margin:0 0 8px}
.platform-search-label span{font-size:10px;color:var(--tx3)}
.platform-search{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:rgba(0,0,0,.3);color:var(--tx);font:inherit;font-size:12px;margin-bottom:18px}
.platform-search::placeholder{color:var(--tx3)}
.platform-option[hidden],#platform-empty[hidden]{display:none}
.platform-option{display:flex;align-items:center;gap:12px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.15);cursor:pointer;transition:border-color .2s,background .2s}
.platform-option:hover{border-color:rgba(70,224,255,.5)}
.platform-option:has(input:checked){border-color:var(--cy);background:rgba(70,224,255,.06)}
.platform-option:focus-within{outline:2px solid var(--cy);outline-offset:3px}
.platform-option input{width:17px;height:17px;accent-color:var(--cy);flex-shrink:0;cursor:pointer}
.platform-option span{min-width:0}
.platform-option strong{display:block;color:var(--tx);font-size:13px;font-weight:600}
.platform-option small{display:block;color:var(--tx3);font-size:11px;margin-top:5px}
.install-summary{font-size:13px;line-height:1.8;color:var(--tx2);margin:20px 0 0}
.install-files{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--tx2)}
.install-files summary{cursor:pointer;line-height:1.8}
.install-files summary span{color:var(--cy);margin-left:8px}
.install-files ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;padding:0;margin:18px 0;list-style:none;font-size:11px;color:var(--tx3);overflow-wrap:anywhere}
.install-files li::before{content:'+ ';color:var(--cy)}
.install-files p{margin:12px 0 0;color:var(--tx3);line-height:1.8}
.prompt-block pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:480px;overflow-y:auto}
.bf-cap a{color:var(--cy);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){
  .install-config{padding:20px 16px}
  .install-config-head{gap:12px}
  .install-config h3{font-size:19px}
  .platform-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .platform-option{padding:13px 10px;gap:8px}
  .platform-option strong{font-size:11.5px}
  .platform-option small{font-size:10px}
  .install-files ul{grid-template-columns:1fr}
  .prompt-block pre{max-height:440px;overflow-y:auto}
}

/* 降低动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .orb{animation:none}
  .marquee-track{animation:none}          /* 停下即可，内容仍然读得到 */
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* 打印：去掉氛围层与暗底，省墨 */
@media print{
  body{background:#fff;color:#111}
  body::before,body::after,.vignette,.grain,.c-dot,.c-ring,#preloader,#progress,
  .site-head,.side-index,.hero::after{display:none!important}
  .board-card,.board-figure,.tabs,.code{box-shadow:none;background:#fff;border-color:#bbb}
  .bf-zoom-tag,.lb-close{display:none}
  .board-list,.stat-grid,.cards-3,.rules-grid,.bounds{break-inside:avoid}
}