/* 图纸主题（2026-10，由网关页提炼，全站共用）
   只做四件事：令牌重映射（淡蓝灰底、蓝黑字）、章节结构（顶线 + 序号 + 对位十字）、
   文字入场特效、偶发闪烁。网关页另有自己的插画与镜头推进，不在这里。
   色值全部来自 site.css 的 :root；这里只引用 var()。 */

/* ── 令牌重映射：页面里所有用 --ink/--gy/--tint 的地方自动换成新配色 ── */
body.sheet{--paper:var(--wash);--paper2:var(--white);--ink:var(--bb);--sub:var(--bb);--mut:var(--bbm);--gy:var(--bbm);--ptext:var(--bbm);--tint:var(--white);--edge:var(--wash);--ln:var(--lnc);--ln2:var(--wash2);--phair:var(--wash2);background:var(--paper);color:var(--bb)}
body.sheet header{background:var(--white);backdrop-filter:none}
body.sheet .hero{background:transparent}

/* ── 图纸：页边竖线 + 每节顶部十字对位标（宽屏） ── */
@media(min-width:1180px){
  body.sheet{background-image:linear-gradient(var(--lnc),var(--lnc)),linear-gradient(var(--lnc),var(--lnc));background-size:1px 100%,1px 100%;background-position:calc(50% - 550px) 0,calc(50% + 550px) 0;background-repeat:no-repeat}
  body.sheet section{position:relative}
  body.sheet section + section::before,body.sheet section + section::after{content:"";position:absolute;top:-7px;width:13px;height:13px;pointer-events:none;background:linear-gradient(var(--bb),var(--bb)) center/100% 1px no-repeat,linear-gradient(var(--bb),var(--bb)) center/1px 100% no-repeat}
  body.sheet section + section::before{left:calc(50% - 556px)}
  body.sheet section + section::after{left:calc(50% + 544px)}
}

/* 章节头：序号 + 一根整宽细线，进入时从左画到右（脚本插入，纯装饰） */
.sx-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);font-family:var(--mono);font-size:var(--f2);letter-spacing:var(--s0);color:var(--bbm)}
.sx-head b{color:var(--bb)}
.sx-head i{flex:1;height:1px;background:var(--bb);transform-origin:left}
html.fx .sx-head i{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.7,0,.2,1) .1s}
html.fx .sx-head.in i{transform:scaleX(1)}
.cta-sec .sx-head{justify-content:center}

/* ── 文字特效：标题升起 / 翻转 / 斜滑轮换，导语逐句由浅到深，标签打字，小标题字距收拢 ── */
html.fx [data-tx] .tw{white-space:nowrap}
html.fx [data-tx] .ch{display:inline-block}
html.fx .tx-rise .ch{opacity:0;transform:translateY(.55em);color:var(--wash2);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1),color 1.1s ease;transition-delay:calc(var(--k) * var(--st,18ms))}
html.fx .tx-flip .ch{opacity:0;transform:perspective(400px) rotateX(-88deg);transform-origin:50% 100%;color:var(--wash2);transition:opacity .4s ease,transform .9s cubic-bezier(.2,.8,.2,1),color 1.2s ease;transition-delay:calc(var(--k) * var(--st,28ms))}
html.fx .tx-slide .ch{opacity:0;transform:translateX(-.7em) skewX(-14deg);color:var(--cy);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.8,.2,1),color 1.4s ease;transition-delay:calc(var(--k) * var(--st,12ms))}
html.fx :is(.tx-rise,.tx-flip,.tx-slide).in .ch{opacity:1;transform:none;color:inherit}
html.fx .tx-type .ch{opacity:0}
html.fx .tx-type.in .ch{opacity:1;transition:opacity 0s linear;transition-delay:calc(var(--k) * var(--st,30ms))}
html.fx .tx-spread{opacity:0;letter-spacing:.45em;transition:opacity .8s ease,letter-spacing 1.2s cubic-bezier(.2,.8,.2,1)}
html.fx .tx-spread.in{opacity:1;letter-spacing:0}
html.fx .tx-tone .ph{opacity:.1;color:var(--wash2);transition:opacity .9s ease,color 1.4s ease;transition-delay:calc(var(--k) * var(--st,70ms))}
html.fx .tx-tone.in .ph{opacity:1;color:inherit}
/* 标题里的 <em>：荧光笔式叠色，进入后从左刷过去 */
body.sheet :is(h1,h2) em{font-style:normal;background:linear-gradient(color-mix(in srgb,var(--or) 50%,transparent),color-mix(in srgb,var(--or) 50%,transparent)) left 88%/100% 40% no-repeat;transition:background-size .9s cubic-bezier(.7,0,.2,1) .5s}
html.fx body.sheet :is(h1,h2)[data-tx]:not(.in) em{background-size:0% 40%}

/* ── 偶发闪烁：只改透明度与颜色，不用滤镜，开销很小 ── */
.nfx-blink{animation:nfx-blink .9s steps(1) both}
@keyframes nfx-blink{0%{opacity:1}6%{opacity:.2}9%{opacity:1}13%{opacity:.45}16%{opacity:1}52%{opacity:1}55%{opacity:.55}58%{opacity:1}}
.nfx-glow{animation:nfx-glow 1s steps(1) both}
@keyframes nfx-glow{0%{color:var(--cy)}10%{color:inherit}16%{color:var(--cy)}44%{color:var(--cy)}50%{color:inherit}}
.nfx-edge{animation:nfx-edge 1s steps(1) both}
@keyframes nfx-edge{0%{background:var(--cy)}12%{background:var(--bb)}18%{background:var(--cy)}44%{background:var(--bb)}}

/* ── 栏头：导航序号随首屏滚动点亮；下滑过两个模块后向左收拢成「T● + 菜单」，再隐藏；上滑出现 ── */
header.gw-hd{transition:transform .55s cubic-bezier(.7,0,.2,1)}
html.hd-hide header.gw-hd{transform:translateY(-101%)}
.gw-hd .nav{position:relative}
.gw-hd .brand{position:relative;z-index:2;background:var(--white);box-shadow:var(--s3) 0 0 var(--white)}
.gw-hd .hd-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cy);transform-origin:left;transform:scaleX(var(--hp,0));pointer-events:none}
.gw-hd .wmk{display:inline-block}
.gw-hd .roll{display:inline-flex;flex-direction:column;height:1.5em;overflow:hidden;vertical-align:middle}
.gw-hd .roll>span{display:block;line-height:1.5em;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.gw-hd a:hover .roll>span,.gw-hd a:focus-visible .roll>span{transform:translateY(-100%)}
.gw-hd .nb{position:relative}
.gw-hd .nb::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s1);height:2px;background:var(--bb);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.gw-hd .nb:hover::after,.gw-hd .ni.lit .nb::after{transform:scaleX(1);transform-origin:left}
.gw-hd .ni.lit .nb::after{background:var(--cy)}
.gw-hd .ni::before{content:attr(data-n);position:absolute;left:var(--s1);top:var(--s3);font-family:var(--mono);font-size:var(--f0);color:var(--bbm);transition:color .3s ease}
.gw-hd .ni.lit::before{color:var(--cy)}
.gw-hd .gather{transform-origin:left center}
.gw-hd .hd-menu{display:none}
@media(min-width:980px){
  .gw-hd .hd-menu{display:inline-flex;align-items:center;gap:var(--s2);position:absolute;z-index:3;left:var(--hm,140px);top:50%;transform:translate(-12px,-50%);opacity:0;pointer-events:none;font-family:var(--mono);font-size:var(--f3);letter-spacing:var(--s0);color:var(--bb);background:var(--white);border:1px solid var(--bb);padding:var(--s1) var(--s3);cursor:pointer;transition:opacity .35s ease,transform .35s ease}
  .gw-hd .hd-menu i{width:var(--s2);height:var(--s2);background:var(--cy);transform:rotate(45deg)}
  .gw-hd.hd-compact .hd-menu{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
  .gw-hd.hd-open .gather{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
}

/* ── 光标：菱形，只在鼠标移动时计算（不再画拖尾） ── */
html.fx-cursor,html.fx-cursor *{cursor:none!important}
.tp-cur{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:250;transform:translate3d(-100px,-100px,0)}
.tp-cur i{position:absolute;left:0;top:0;width:var(--s3);height:var(--s3);margin:calc(var(--s3) * -.5) 0 0 calc(var(--s3) * -.5);background:var(--cy);transform:rotate(45deg);transition:width .3s ease,height .3s ease,margin .3s ease,background .3s ease}
.tp-cur.hov i{width:var(--s7);height:var(--s7);margin:calc(var(--s7) * -.5) 0 0 calc(var(--s7) * -.5);background:transparent;border:1.5px solid var(--cy)}
@media (hover:none),(pointer:coarse){.tp-cur{display:none}}

@media (prefers-reduced-motion:reduce){
  html.fx [data-tx] .ch,html.fx [data-tx] .ph,html.fx .tx-spread{opacity:1;transform:none;color:inherit;letter-spacing:normal;transition:none}
  [class*="nfx-"]{animation:none!important}
  header.gw-hd{transition:none}
}
html.fx-cursor :is(input,textarea,select,[contenteditable]){cursor:auto!important}

/* ── 大标题：与网关页同一套矢量处理——描线、锚点、构造线、叠色块、尺寸线（脚本生成的 SVG，原文保留在 h1 里给读屏与搜索） ── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hl-h1{margin-bottom:0}
.hl-h1 .hl{display:block;width:min(100%,var(--hlw,640px));height:auto;overflow:visible}
@media(min-width:1180px){.hl-h1 .hl{margin-left:calc(var(--s7) * -1)}}
.hl .g{fill:var(--bbm);fill-opacity:var(--fill,1);stroke:var(--bb);stroke-width:5;transition:fill-opacity .25s linear}
.hl .g.key{fill:var(--bb)}
.hl .cl{fill:none;stroke:var(--wash2);stroke-width:3;stroke-dasharray:10 12}
.hl .nd{fill:var(--wash);stroke:var(--bb);stroke-width:4}
.hl .ha{mix-blend-mode:multiply}
.hl .ov-o{fill:var(--or);fill-opacity:.42;stroke:none}
.hl .ov-b{fill:var(--cy);fill-opacity:.26;stroke:none}
.hl .ha-c{fill-opacity:.2;transform-box:fill-box;transform-origin:center;animation:tp-pulse 7s ease-in-out infinite}
.hl .ha-ring{fill:none;stroke:var(--or);stroke-width:14;stroke-dasharray:30 70;transform-box:fill-box;transform-origin:center;animation:tp-spin 50s linear infinite}
.hl .ha-sq{transform-box:fill-box;transform-origin:center;animation:tp-spin 60s linear infinite reverse}
.hl .ha-bar{transform-box:fill-box;transform-origin:left;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.hl .ha-arc{fill:none;stroke:var(--cy);stroke-width:8}
.hl .ha-dim{fill:none;stroke:var(--bbm);stroke-width:6}
.hl .ha-t{font-family:var(--mono);fill:var(--bbm)}
.hl .ha-reg{fill:none;stroke:var(--bb);stroke-width:8}
.hl .ha-mk{fill:var(--or)}
@keyframes tp-pulse{50%{transform:scale(1.08)}}
@keyframes tp-spin{to{transform:rotate(360deg)}}
@keyframes tp-draw{to{stroke-dashoffset:0}}
@keyframes tp-pop{to{opacity:1}}
html.fx .hl-h1 .hl{--fill:0}
html.fx .hl-h1 .hl.drawn{--fill:1}
html.fx .hl-h1 .hl .g{stroke-dasharray:1;stroke-dashoffset:1;animation:tp-draw 1.3s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--i,0) * 60ms + 150ms)}
html.fx .hl-h1 .hl.drawn .g{animation:none;stroke-dashoffset:0}
html.fx .hl-h1 .hl .nd{opacity:0;animation:tp-pop .35s ease forwards;animation-delay:calc(var(--i,0) * 60ms + 700ms)}
html.fx .hl-h1 .hl.drawn .nd{animation:none;opacity:1}
html.fx .hl-h1 .hl:not(.drawn) .ha-bar{transform:scaleX(0)}
html.fx .hl-h1 .hl:not(.drawn) :is(.ha-c,.ha-ring,.ha-sq,.ha-mk){opacity:0}
.hl-h1 .hl :is(.ha-c,.ha-ring,.ha-sq,.ha-mk){transition:opacity .8s ease .3s}
html.fx .hl-h1 .hl .d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .4s}
html.fx .hl-h1.in .hl .d{stroke-dashoffset:0}
.nfx-fill{animation:nfx-fill .9s steps(1) both}
@keyframes nfx-fill{0%{fill:var(--cy)}10%{fill:var(--bb)}16%{fill:var(--cy)}30%{fill:var(--or)}34%{fill:var(--cy)}60%{fill:var(--cy)}64%{fill:var(--bb)}}
@media (prefers-reduced-motion:reduce){.hl .ha-c,.hl .ha-ring,.hl .ha-sq{animation:none}}
/* 英文导航词更长：980–1180px 之间原本会把右侧「Run the numbers」挤出屏幕，收紧间距与字号 */
@media(min-width:980px) and (max-width:1180px){html[lang^="en"] .nav .nb{padding:var(--s2) var(--s2);font-size:var(--f4)}html[lang^="en"] .nav .ut{padding:var(--s2) var(--s1)}}
body.sheet h2{text-wrap:balance}

/* ── 板块切换联动（seam-fx.js）：接缝线、读数、扫描带、序号闪亮、卡片依次轻弹、交接压暗 ── */
body.sheet section,main.gw > section{position:relative}
.sx-seam{position:fixed;left:0;right:0;top:46vh;height:0;z-index:150;pointer-events:none}
.sx-seam-l{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cy) 18%,var(--cy) 82%,transparent);transform:scaleX(0);transform-origin:left;opacity:0}
.sx-seam.up .sx-seam-l{transform-origin:right}
.sx-seam.go .sx-seam-l{animation:sx-seam 1.1s cubic-bezier(.7,0,.2,1) forwards}
@keyframes sx-seam{0%{transform:scaleX(0);opacity:1}45%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.sx-seam-a,.sx-seam-b{position:absolute;top:-6px;width:13px;height:13px;opacity:0;background:linear-gradient(var(--cy),var(--cy)) center/100% 2px no-repeat,linear-gradient(var(--cy),var(--cy)) center/2px 100% no-repeat}
.sx-seam-a{left:var(--s4)}
.sx-seam-b{right:var(--s4)}
.sx-seam.go :is(.sx-seam-a,.sx-seam-b){animation:sx-x .9s cubic-bezier(.3,1.6,.4,1) forwards}
@keyframes sx-x{0%{opacity:0;transform:scale(.3) rotate(45deg)}30%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.sx-seam-t{display:none;position:absolute;top:var(--s2);font-family:var(--mono);font-size:var(--f1);letter-spacing:var(--s0);color:var(--cy);opacity:0;white-space:nowrap}
@media(min-width:1300px){.sx-seam-t{display:block;left:calc(50% - 640px)}}
.sx-seam.go .sx-seam-t{animation:sx-txt 1.2s steps(1) forwards}
@keyframes sx-txt{0%{opacity:0}10%{opacity:1}14%{opacity:.3}18%{opacity:1}82%{opacity:1}100%{opacity:0}}
.sx-scan{position:absolute;left:0;right:0;height:100vh;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--cy) 8%,transparent) 75%,color-mix(in srgb,var(--cy) 40%,transparent) 99%,transparent) 0 -180px/100% 180px no-repeat;mix-blend-mode:multiply;animation:sx-scan .95s cubic-bezier(.6,0,.4,1) forwards}
.sx-scan.up{animation-direction:reverse}
@keyframes sx-scan{to{background-position:0 calc(100% + 180px)}}
.sx-boot :is(.sx-head b,.sec-head .sec-idx){animation:sx-num .9s steps(1) both}
@keyframes sx-num{0%{color:var(--cy)}15%{color:var(--bb)}25%{color:var(--cy)}70%{color:var(--cy)}100%{color:var(--bb)}}
.sx-boot :is(.sx-head i,.sec-rule){background-image:linear-gradient(90deg,transparent,var(--cy),transparent);background-size:30% 100%;background-repeat:no-repeat;animation:sx-run .9s linear both}
@keyframes sx-run{from{background-position:-40% 0}to{background-position:140% 0}}
.sx-pop{animation:sx-card .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--pk,0) * 80ms)}
@keyframes sx-card{0%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 2px var(--cy);translate:0 -3px}100%{box-shadow:0 0 0 0 transparent;translate:0 0}}
.sx-out{animation:sx-out .6s ease}
@keyframes sx-out{40%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.sx-seam,.sx-scan{display:none}.sx-pop,.sx-out,.sx-boot *{animation:none!important}}