/* ==========================================================================
   Bordewise 基础样式 base.css · M0（M3 并入线上站点）
   视觉与 www.dxyy.hk 现站同源：token 同名同值（token.css），组件按策划案 §5/§8.4 新建
   硬约束（§0 九条 + §5.2 偏离声明）：
     * 内容列一律 1180px 居中（继承 index.html L157，不再出现 1420px 宽内容区）
     * 卡片列表 .deck 单列等宽堆叠（继承 L161），hover 不做列宽重排
     * 卡内内容全部水平居中（偏移 0px；letter-spacing 与等值 text-indent 成对出现）
     * 装饰遮罩一律 at 50% 对称，禁单侧渐变压字（继承 L93-L98 / L172-L175）
     * 直角 0-4px、1px 金线族、tabular-nums、零阴影零圆角（§5.2「像同一个人做的」）
     * .rv 淡入上移 26px + html.snap 停动画（继承 L40-L42 / L314-L324）
   断点（§5.1 L657）：1900+ / 1440 / 1180 / 860 / 640 / 480
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink-900);color:var(--paper);font-family:var(--sans);
  font-size:clamp(15px,.35vw + 14px,17px);line-height:1.75;letter-spacing:.02em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;   /* §5.3 L708 */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#06090F}                        /* 继承 L33 */
:focus-visible{outline:none;box-shadow:0 0 0 1px var(--gold-dim),0 0 0 2px var(--gold)} /* §8.4 金色 ring */

/* 内容列：§5.1 L652 → 1180px；继承 index.html L34（那处是 1420px，本站收紧） */
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:860px}
.deco{pointer-events:none}

/* --------------------------------------------------------------------------
   grain 噪点 + .rv 动效（继承 index.html L38-L42，逐值沿用）
   -------------------------------------------------------------------------- */
.grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* --------------------------------------------------------------------------
   header（继承 index.html L45-L82 结构与吸顶行为；右侧新增 .lang 与 .badge-fresh）
   -------------------------------------------------------------------------- */
header{position:fixed;inset:0 0 auto;z-index:800;padding:clamp(14px,2vw,30px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent}
header.stuck{padding-block:12px;background:rgba(5,8,15,.72);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand .seal{width:clamp(34px,3.4vw,44px);aspect-ratio:1;border:1px solid var(--gold);display:grid;place-items:center;
  font-family:var(--serif);font-size:clamp(17px,1.7vw,23px);color:var(--gold);position:relative;flex:0 0 auto}
.brand .seal::after{content:"";position:absolute;inset:3px;border:1px solid var(--gold-dim)}  /* 继承 L54 */
.brand .wm{line-height:1.1}
.brand .wm b{display:block;font-family:var(--serif);font-weight:600;letter-spacing:.3em;
  font-size:clamp(15px,1.5vw,20px);color:var(--paper)}
.brand .wm i{display:block;font-style:normal;font-size:9px;letter-spacing:.42em;color:var(--gold);
  text-transform:uppercase;margin-top:4px;opacity:.85}
nav{display:flex;gap:clamp(14px,2.4vw,44px);align-items:baseline;flex:1 1 auto;justify-content:center}
nav a{font-size:13px;letter-spacing:.26em;color:rgba(233,238,246,.72);position:relative;padding-block:6px;
  transition:color .4s var(--ease)}
nav a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--gold);
  transform:translateX(-50%);transition:width .45s var(--ease)}
nav a:hover,nav a.on{color:var(--paper)}
nav a:hover::after,nav a.on::after{width:100%}
.hd-right{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex:0 0 auto}

/* 语言切换（§6.2：三枚短标签、不用国旗、竖线分隔、整组 1px 金框、直角） */
.lang{display:flex;align-items:center;border:1px solid var(--line);padding:8px 12px}
.lang a{font-size:11px;letter-spacing:.28em;color:rgba(233,238,246,.5);padding:0 8px;position:relative}
.lang a:first-child{padding-left:0}
.lang a:last-child{padding-right:0}
.lang a + a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:var(--line-soft)}
.lang a:hover{color:var(--paper)}
.lang a[aria-current="true"]{color:var(--gold-hi)}
.lang a[aria-current="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;height:1px;background:var(--gold)}

/* 新鲜度徽标（§4.4：超时切「更新延迟」且不许隐藏；用 --warn，不抢金色） */
.badge-fresh{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  padding:7px 11px;background:rgba(5,8,15,.5);font-size:11px;letter-spacing:.28em;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.badge-fresh::before{content:"";width:6px;height:6px;background:var(--ok);transform:rotate(45deg);flex:0 0 auto}
.badge-fresh time{color:var(--gold-hi)}
.badge-fresh .over{color:var(--warn)}
.badge-fresh.is-overdue{border-color:rgba(217,161,91,.42)}
.badge-fresh.is-overdue::before{background:var(--warn)}
.nojson .badge-fresh{color:var(--muted)}                                /* §8.1 JS-1 降级 */

/* 汉堡与抽屉（继承 index.html L67-L82；M0 只留结构，P1 出交互） */
.hn{width:46px;height:46px;flex:0 0 auto;border:1px solid var(--line);display:none;place-items:center;
  cursor:pointer;background:rgba(5,8,15,.55)}
.hn i{display:block;width:18px;height:1px;background:var(--gold);position:relative}

/* --------------------------------------------------------------------------
   hero（继承 index.html L85-L132 四层背景 + 文字组件，逐值沿用）
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(120px,16vh,190px) clamp(90px,12vh,140px);overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:-4%;z-index:-3;overflow:hidden;
  background:radial-gradient(120% 85% at 76% 12%,#1B3557 0%,rgba(11,31,58,.6) 38%,transparent 70%),
             radial-gradient(90% 70% at 8% 96%,#0E2138 0%,transparent 62%),
             linear-gradient(178deg,#070C17 0%,#05080F 62%,#04060C 100%);
  animation:breathe 26s var(--ease) infinite alternate}
@keyframes breathe{to{transform:scale(1.07) translate3d(1.2%,-1%,0)}}
.hero .mesh{position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(60px,7vw,116px) clamp(60px,7vw,116px);
  mask-image:radial-gradient(85% 65% at 50% 34%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(85% 65% at 50% 34%,#000 0%,transparent 78%)} /* §0 #5：at 50% 对称 */
#dust{position:absolute;inset:0;z-index:-1;opacity:.75}
.hero .arc{position:absolute;right:-14vw;top:-8vh;width:64vw;aspect-ratio:1;border-radius:50%;z-index:-2;
  border:1px solid var(--line);box-shadow:inset 0 0 120px rgba(200,166,104,.06)}
.hero .arc::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid var(--gold-dim);
  animation:spin 44s linear infinite}
.hero .arc::before{content:"";position:absolute;inset:26%;border-radius:50%;border:1px dashed rgba(143,184,222,.14);
  animation:spin 66s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.kicker{display:inline-flex;align-items:center;gap:14px;font-size:clamp(10px,.7vw,12px);letter-spacing:.42em;
  color:var(--gold);text-transform:uppercase;margin:0 0 clamp(20px,3vh,34px)}
.kicker::before{content:"";width:clamp(28px,4vw,64px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
h1{margin:0;font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:.05em;
  font-size:clamp(34px,7.4vw,96px);color:#FCFAF5;text-wrap:balance;overflow-wrap:break-word}
h1 .lite{color:rgba(233,238,246,.5);font-size:.42em;display:block;letter-spacing:.36em;margin-bottom:.7em;font-weight:400}
h1 em{font-style:normal;color:var(--gold-hi);position:relative}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;
  animation:draw 1.4s .9s var(--ease) forwards}
@keyframes draw{to{transform:scaleX(1)}}
h2{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:.14em;font-size:clamp(24px,3.6vw,54px);
  line-height:1.3;color:#FCFAF5;text-wrap:balance;overflow-wrap:break-word;text-align:center}
h3{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:.28em;text-indent:.28em;   /* 居中补偿 */
  font-size:clamp(20px,2.4vw,34px);color:#FCFAF5;text-align:center}
.tri{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,26px);
  margin-top:clamp(26px,4.4vh,52px)}
.tri b{font-family:var(--serif);font-weight:500;font-size:clamp(14px,1.5vw,21px);letter-spacing:.2em;
  color:rgba(233,238,246,.9)}
.tri s{text-decoration:none;color:var(--gold);opacity:.7;font-size:12px}
.tri small{font-size:clamp(10px,.8vw,13px);letter-spacing:.34em;color:var(--muted);text-transform:uppercase}
.scroll{position:absolute;left:var(--pad);bottom:clamp(24px,5vh,54px);display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.4em;color:rgba(233,238,246,.42)}
.scroll u{text-decoration:none;display:block;width:clamp(34px,4vw,72px);height:1px;background:rgba(233,238,246,.22);
  position:relative;overflow:hidden}
.scroll u::after{content:"";position:absolute;inset:0;width:40%;background:var(--gold);
  animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(250%)}}

/* --------------------------------------------------------------------------
   section 框架 + 水印（继承 index.html L136-L160 / L218-L220）
   -------------------------------------------------------------------------- */
section{position:relative}
.tag{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.4em;color:var(--gold);
  text-transform:uppercase;margin-bottom:clamp(18px,2.6vh,30px)}
.tag b{font-family:var(--serif);font-size:clamp(30px,4.2vw,58px);letter-spacing:.14em;
  color:rgba(233,238,246,.14);font-weight:600;text-transform:none;line-height:1}
.tag::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sect{padding-block:clamp(56px,9vh,120px)}                                    /* §5.1 L656 */
.sect .wrap{position:relative;z-index:1}
.wmk{position:absolute;left:50%;transform:translateX(-50%);bottom:-.06em;z-index:0;
  font-family:var(--serif);font-weight:600;line-height:1;font-size:clamp(110px,20vw,340px);
  color:rgba(200,166,104,.05);pointer-events:none;text-align:center}          /* §0 #7 */
.lede{max-width:76ch;margin:clamp(14px,2vw,26px) auto 0;text-align:center;color:var(--muted)}
.note{font-size:11px;letter-spacing:.14em;color:var(--muted);text-align:center;margin:12px 0 0} /* §8.4 */

/* --------------------------------------------------------------------------
   数据自证带 .stats（继承 index.html L143-L153，逐值沿用；第 4 格为「N 分钟前」）
   -------------------------------------------------------------------------- */
.stats{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(11,31,58,.42),transparent 85%)}
.stats .row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(30px,4.4vw,68px) clamp(12px,2vw,30px);text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.stat n{display:block;font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(32px,5.2vw,80px);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FCF3DC 0%,#C8A668 52%,#8A6A2E 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-hi)}
.stat n sup{-webkit-text-fill-color:var(--gold)}
@supports not (background-clip:text){.stat n{color:var(--gold-hi)}}
.stat p{margin:clamp(10px,1.4vw,18px) 0 0;font-size:clamp(10px,.75vw,13px);letter-spacing:.3em;color:var(--muted)}
.stat s{text-decoration:none;display:block;margin-top:8px;font-size:10px;letter-spacing:.24em;color:var(--gold)}

/* --------------------------------------------------------------------------
   .deck 等宽堆叠 + .board 卡（继承 index.html L161-L212；卡内居中 0px 偏移）
   -------------------------------------------------------------------------- */
.deck{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(14px,2.2vh,30px)}  /* §0 #3 */
.board{position:relative;overflow:hidden;cursor:pointer;isolation:isolate;min-height:clamp(300px,40vh,500px);
  border:1px solid var(--line);background:var(--ink-card);
  transition:min-height .7s var(--ease),box-shadow .6s var(--ease)}
.board::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 115% at 50% 46%,rgba(4,7,13,.16) 0%,rgba(4,7,13,.4) 58%,rgba(4,7,13,.72) 100%),
             linear-gradient(0deg,rgba(4,7,13,.66) 0%,rgba(4,7,13,.12) 44%,rgba(4,7,13,.28) 100%),
             radial-gradient(92% 120% at 50% 118%,rgba(200,166,104,.28),transparent 62%)}
.board:hover,.board:focus{box-shadow:0 0 0 1px rgba(200,166,104,.42),0 26px 60px -30px rgba(200,166,104,.35)}
.board .in{position:absolute;inset:clamp(20px,3vw,52px) clamp(20px,3vw,52px) calc(clamp(20px,3vw,52px) + 34px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.board .no{order:-1;font-family:var(--serif);font-size:clamp(26px,3.2vw,50px);line-height:1;
  color:rgba(233,238,246,.16);font-weight:600;letter-spacing:.1em;text-indent:.1em;
  margin-bottom:clamp(6px,1vw,14px)}
.board .ico{width:clamp(38px,3.6vw,56px);margin:0 auto clamp(8px,1.2vw,16px);display:block;opacity:.92}
.board .ico path,.board .ico circle,.board .ico rect,.board .ico line{stroke:var(--gold);fill:none;
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}                 /* §0 #8 */
.board .en{font-size:10px;letter-spacing:.42em;text-indent:.42em;color:var(--gold);margin:10px 0 0;
  text-transform:uppercase;text-align:center}
.board .pill{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(14px,2vw,24px);
  max-width:min(100%,760px)}
.pill span{font-size:clamp(10px,.75vw,12.5px);letter-spacing:.18em;color:rgba(233,238,246,.86);
  border:1px solid var(--line);padding:7px 14px;background:rgba(5,8,15,.5)}
.board .go{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(14px,2.4vw,30px);
  width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;
  background:rgba(5,8,15,.42);transition:.55s var(--ease)}
.board:hover .go,.board:focus .go{background:var(--gold);border-color:var(--gold)}
.board:hover .go svg,.board:focus .go svg{stroke:#06090F;transform:translateY(2px)}
.board .go svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:1.3;transition:.5s var(--ease)}
.deck>.act{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(18px,3vw,44px);
  padding:clamp(10px,1.6vw,20px) 0 clamp(2px,.6vw,8px);margin-top:clamp(6px,1.4vw,16px);
  border-top:1px solid var(--line)}
.deck>.act a,.act a{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;color:var(--muted);
  transition:color .4s var(--ease)}
.deck>.act a::before,.act a::before{content:"";width:clamp(16px,2vw,30px);height:1px;background:var(--gold);
  transition:width .5s var(--ease)}
.deck>.act a:hover,.act a:hover{color:var(--paper)}
.deck>.act a:hover::before,.act a:hover::before{width:clamp(34px,4.4vw,64px)}
.act{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(18px,3vw,44px)}

/* 能力矩阵（§8.1 新组件 .caps-grid：3 列 → 860 以下 2 列 → 480 以下 1 列；格内纵向居中） */
.caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(26px,4vh,52px)}
.cap-cell{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  border:1px solid var(--line);background:rgba(5,8,15,.5);padding:clamp(18px,2.2vw,32px) 16px;
  transition:.5s var(--ease)}
.cap-cell:hover{border-color:var(--gold);transform:translateY(-3px)}
.cap-cell svg{width:26px;height:26px;color:var(--gold);fill:none;stroke:currentColor;
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.cap-cell h4{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(15px,1.3vw,21px);
  letter-spacing:.2em;text-indent:.2em;color:#FCFAF5;text-align:center}
.cap-cell p{margin:0;font-size:12px;letter-spacing:.16em;color:var(--muted);text-align:center}
.caps-note{margin:8px 0 0;font-size:10px;letter-spacing:.2em;color:var(--muted);text-align:center}
.nojson .caps-note{color:rgba(233,238,246,.4)}
.mini-seal{width:clamp(34px,3.4vw,44px);aspect-ratio:1;border:1px solid var(--gold);display:grid;
  place-items:center;font-family:var(--serif);font-size:clamp(15px,1.6vw,22px);color:var(--gold);
  margin:0 auto 10px;position:relative}
.mini-seal::after{content:"";position:absolute;inset:3px;border:1px solid var(--gold-dim)}

/* chips（继承 index.html L221-L227） */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.4vw,20px);margin-top:clamp(22px,3vh,40px)}
.chip{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--line);
  padding:clamp(12px,1.4vw,18px) clamp(14px,1.8vw,26px);text-align:center;
  font-size:clamp(11px,.85vw,14px);letter-spacing:.2em;color:rgba(233,238,246,.82);
  background:rgba(5,8,15,.5);transition:.5s var(--ease)}
.chip:hover{border-color:var(--gold);color:#FCFAF5;transform:translateY(-3px)}
.chip i{width:6px;height:6px;background:var(--gold);flex:0 0 auto;transform:rotate(45deg)}
.chip a{display:flex;align-items:center;gap:12px}
a.chip{cursor:pointer}

/* --------------------------------------------------------------------------
   .stage 舞台 + 工作流 SVG（继承 index.html L235-L255；场景图 1472×400）
   -------------------------------------------------------------------------- */
.stage{border:1px solid var(--line);background:radial-gradient(120% 100% at 50% 120%,rgba(27,53,87,.6),transparent 60%),#060A12;
  padding:clamp(14px,2.4vw,40px) 0;min-height:clamp(320px,34vw,420px);display:flex;align-items:center;
  position:relative;overflow:visible}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 62% 8%,rgba(143,184,222,.1),transparent 58%),
             radial-gradient(48% 76% at 66% 98%,rgba(200,166,104,.16),transparent 60%)}
.stage svg{position:relative;width:100%;height:auto;display:block}
figcaption{margin-top:12px;font-size:11px;letter-spacing:.2em;color:var(--muted);text-align:center}
.belt{stroke:#132A47;stroke-width:6}
.belt-t{stroke:var(--gold-dim);stroke-width:1.4;stroke-dasharray:14 16;animation:belt 3.6s linear infinite}
@keyframes belt{to{stroke-dashoffset:-300}}
.node{fill:var(--ice);opacity:.5;animation:blink 2.4s var(--ease) infinite}
.node:nth-of-type(2){animation-delay:.4s}.node:nth-of-type(3){animation-delay:.8s}
.node:nth-of-type(4){animation-delay:1.2s}.node:nth-of-type(5){animation-delay:1.6s}
.node:nth-of-type(6){animation-delay:2s}
@keyframes blink{0%,100%{opacity:.18}50%{opacity:.9}}
.glow{filter:drop-shadow(0 0 8px rgba(200,166,104,.55))}

/* --------------------------------------------------------------------------
   收束区 + 页脚（继承 index.html L258-L278；页脚三行按 §4.5）
   -------------------------------------------------------------------------- */
.close{position:relative;min-height:clamp(420px,72vh,720px);display:flex;align-items:center;justify-content:center;
  text-align:center;border-top:1px solid var(--line);overflow:hidden;isolation:isolate;
  padding-block:clamp(70px,12vh,140px) 0}
.close .wrap{width:100%}
.close .bg{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(70% 60% at 50% 108%,rgba(200,166,104,.22),transparent 62%),
             linear-gradient(180deg,#04060C,#0B1F3A 130%)}
.close .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(84vw,760px);aspect-ratio:1;
  border:1px solid var(--line);border-radius:50%;z-index:-1;animation:spin 90s linear infinite}
.close .ring::after{content:"";position:absolute;inset:14%;border:1px solid var(--gold-dim);border-radius:50%}
.close h2 em{font-style:normal;color:var(--gold-hi)}
.close .en{margin-top:clamp(14px,2vw,26px);font-size:clamp(10px,.85vw,13px);letter-spacing:.42em;
  color:rgba(233,238,246,.4);text-transform:uppercase;text-align:center}
.rule{width:clamp(40px,8vw,120px);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:clamp(24px,3.4vw,44px) auto}
.foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,2.4vw,40px);
  padding:clamp(22px,3vw,40px) var(--pad);position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;
  border-top:1px solid var(--line);font-size:10px;letter-spacing:.34em;
  color:rgba(233,238,246,.34);text-transform:uppercase}
.foot a{border-bottom:1px solid var(--gold-dim);transition:color .4s var(--ease),border-color .4s var(--ease)}
.foot a:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* 小链接带（§4.5 L640：二级链接一行，居中、10px、金色 hover，不做四栏页脚） */
.footlite{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(12px,2vw,28px);
  padding:14px var(--pad);border-top:1px solid var(--line-soft);font-size:10px;letter-spacing:.3em;
  color:rgba(233,238,246,.34);text-transform:uppercase}
.footlite a:hover{color:var(--gold)}

/* --------------------------------------------------------------------------
   新增组件族（§5.2 偏离声明：直角 0-4px / 1px 金线 / 居中 / 零阴影 / tabular-nums）
   -------------------------------------------------------------------------- */
/* 面包屑（§8.3 工具页首屏） */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:11px;letter-spacing:.26em;
  color:var(--muted);padding-block:clamp(80px,10vh,120px) 14px;text-align:center;justify-content:center}
.crumbs a:hover{color:var(--gold)}
.crumbs s{text-decoration:none;color:var(--gold);opacity:.6}

/* 输入框 / 下拉 / 代码块（§5.2 规则 3） */
.field{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0}
.field label{font-size:11px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.field .hint{font-size:11px;letter-spacing:.16em;color:var(--muted)}
input[type=text],input[type=search],input[type=number],select,textarea{
  font:inherit;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--paper);
  background:var(--ink-inset);border:1px solid var(--line);border-radius:0;
  padding:12px 14px;min-width:min(320px,80vw);text-align:center}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 1px var(--gold-dim)}
select{appearance:none;text-align:center;text-align-last:center}
.seg{display:inline-flex;border:1px solid var(--line)}
.seg button{font:inherit;font-size:11px;letter-spacing:.26em;color:var(--muted);background:transparent;
  border:0;border-left:1px solid var(--line-soft);padding:10px 14px;cursor:pointer;border-radius:0}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"],.seg button:hover{color:var(--gold-hi);background:rgba(200,166,104,.10)}
pre,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}
pre,.formula{background:var(--ink-inset);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:clamp(12px,1.6vw,20px);margin:14px auto;max-width:1180px;overflow-x:auto;
  font-size:13px;letter-spacing:.04em;color:var(--paper);text-align:left}
.json-inline{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ice)}

/* 表格（§4.2 全部硬规则：thead 金色 uppercase、单元格居中、仅描述列左对齐 ≤42ch、
   行分隔 1px --line-soft、无斑马纹无外框无 hover 变色、空值 em dash 由数据层写死） */
.table-scroll{overflow-x:auto;border-left:1px solid var(--line)}
table.data-table{width:100%;max-width:1180px;margin:0 auto;border-collapse:collapse;font-size:14px}
table.data-table thead th{letter-spacing:.3em;font-size:11px;color:var(--gold);text-transform:uppercase;
  font-weight:500;padding:12px 10px;text-align:center;border-bottom:1px solid var(--line)}
table.data-table td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;font-family:var(--mono);color:var(--paper)}
table.data-table td.desc,table.data-table th.desc{text-align:left;max-width:42ch;font-family:var(--sans)}
table.data-table tr:hover td{background:rgba(200,166,104,.06)}
table.data-table tr:hover td:first-child{box-shadow:inset 1px 0 0 var(--gold)}  /* hover 仅左缘 1px 金线 */

/* 结果区（§8.3 工具页右栏） */
.result-hero{font-family:var(--serif);font-weight:600;font-size:clamp(28px,6vw,64px);color:var(--gold-hi);
  text-align:center;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1.2}
.result-table{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:18px auto;
  max-width:760px}
.result-table div{padding:14px 10px;text-align:center;border-left:1px solid var(--line-soft)}
.result-table div:first-child{border-left:0}
.result-table b{display:block;font-family:var(--mono);font-size:15px;color:var(--paper);
  font-variant-numeric:tabular-nums}
.result-table span{display:block;margin-top:6px;font-size:10px;letter-spacing:.26em;color:var(--muted);
  text-transform:uppercase}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,2.4vw,32px);
  margin-top:clamp(20px,3vh,40px)}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(5,8,15,.5);
  padding:12px 20px;font-size:11px;letter-spacing:.3em;color:var(--paper);text-transform:uppercase;
  cursor:pointer;border-radius:0;transition:.45s var(--ease)}
.btn:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(200,166,104,.10)}
.btn.primary{border-color:var(--gold);color:var(--gold-hi)}
.btn.primary:hover{background:var(--gold);color:#06090F}

/* 两栏工具页布局（§5.1 L653） */
.tool-grid{display:grid;grid-template-columns:minmax(0,468px) minmax(0,660px);
  gap:clamp(20px,3vw,52px);justify-content:center;align-items:start;margin-top:clamp(20px,3vh,40px)}

/* 来源与更新模块（§4.4 DOM 与样式，逐条实现） */
.srcmeta{max-width:1180px;margin:clamp(30px,5vh,64px) auto 0;border:1px solid var(--line);
  background:rgba(5,8,15,.5);padding:clamp(16px,2.4vw,32px);text-align:left}
.srcmeta-h{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:11px;letter-spacing:.4em;
  color:var(--gold);text-transform:uppercase}
.srcmeta-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.srcmeta dl{display:grid;grid-template-columns:120px 1fr;gap:0;margin:0}
.srcmeta dt,.srcmeta dd{padding:10px 0;border-top:1px solid var(--line-soft);margin:0}
.srcmeta dt{font-size:11px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.srcmeta dd{color:var(--paper);font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.srcmeta dd .ago{color:var(--muted);margin-left:8px}
.srcmeta dd a{border-bottom:1px solid var(--gold-dim)}
.srcmeta dd a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.srcmeta-dcl{margin:16px 0 0;font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* --------------------------------------------------------------------------
   响应式（§5.1 L657 断点；继承 index.html L281-L312 的降级顺序）
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  header{padding-block:14px}
  nav{display:none}
  .hn{display:grid}
  .stats .row{grid-template-columns:repeat(2,1fr)}
  .stat{padding-block:clamp(26px,4.6vw,44px)}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(odd){border-right:1px solid var(--line)}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .caps-grid{grid-template-columns:repeat(2,1fr)}
  .tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .board{min-height:clamp(320px,46vh,460px)}
  .board .no{font-size:clamp(26px,7vw,40px)}
  .stage{overflow-x:auto}
  .stage svg{min-width:720px}
  #dust{display:none}
  .lang{display:none}
  .srcmeta dl{grid-template-columns:1fr}
  .srcmeta dt{padding-bottom:0;border-top:0}
}
@media (max-width:640px){
  .caps-grid{grid-template-columns:1fr}
  .result-table{grid-template-columns:1fr}
  .result-table div{border-left:0;border-top:1px solid var(--line-soft)}
  .result-table div:first-child{border-top:0}
  /* §4.2 L574：小屏表格转卡片，td::before 打金色标签，仍居中 */
  table.data-table thead{display:none}
  table.data-table tr{display:block;border-bottom:1px solid var(--line)}
  table.data-table td{display:block;border-bottom:0;text-align:center}
  table.data-table td::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.28em;
    color:var(--gold);text-transform:uppercase;margin-bottom:4px}
  table.data-table td.desc{text-align:center;max-width:none}
}
@media (max-width:480px){
  body{line-height:1.7}
  .hero{padding-block:132px 96px}
  h1{letter-spacing:.01em}
  h1 .lite{letter-spacing:.2em}
  .tri{gap:10px}
  .tri b{font-size:14px;letter-spacing:.16em}
  .tri s{display:none}
  .stat n{font-size:clamp(30px,11vw,46px)}
  .board .in{inset:18px 14px 52px}
  .chip{width:100%;justify-content:center}
  .deck>.act{flex-direction:column;gap:12px;padding-block:20px}
}
@media (max-height:760px){.hero .caps-grid{display:none}}   /* §8.1 L987 矮屏让位给数据带 */
@media (min-width:1900px){
  h1{font-size:clamp(80px,5.4vw,124px)}
  .hero .arc{right:-6vw;width:46vw}
}
@media (hover:none){
  .board:hover,.board:focus{min-height:inherit;box-shadow:0 0 0 1px rgba(200,166,104,.3)}
  .cap-cell:hover,.chip:hover{transform:none}
}

/* --------------------------------------------------------------------------
   截图 QA 约定 html.snap（继承 index.html L314-L324；新站自检脚本沿用同族）
   -------------------------------------------------------------------------- */
html.snap #dust{display:none}
html.snap .hero .bg,html.snap .hero .arc::after,html.snap .hero .arc::before,html.snap .close .ring,
html.snap .belt-t,html.snap .node,html.snap .scroll u::after{animation:none!important}
html.snap .rv{opacity:1!important;transform:none!important}
html.snap .wrap{transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
/* 打印（§5.2 规则 6：白底黑字，gold → #7A5C25，隐藏装饰） */
@media print{
  body{background:#fff;color:#111}
  :root{--gold:#7A5C25;--gold-hi:#7A5C25;--paper:#111;--muted:#555;--ink-900:#fff;--ink-card:#fff;
        --ink-inset:#fff;--line:rgba(122,92,37,.4);--line-soft:rgba(0,0,0,.12)}
  .grain,.hero .bg,.hero .mesh,.hero .arc,#dust,.close .bg,.close .ring,.wmk,.scroll{display:none!important}
  header{position:static}
}