/* ==========================================================================
   帝国裁决席 · 法则（codex）
   codex.css —— 法则三个页面共用：codex-route（概览 + 百科）/ codex-learn（学习）/ codex-lab（试验台）

   命名约定（前缀一律避开 site.css 的通用类 .hero .wrap .entry .act .sec .card .btn …）：
     .cx-…       概览与路线视图
     .cx-wk-…    百科正文（左侧目录 + 连续正文）
     .mg-…       学习模式（十二节拍舞台）
     .cx-lab-…   试验台（两个实验）
   状态类只有 .on / .done / .ghost 三个，不加前缀。

   加载顺序：site.css 之后。几处曾经与 site.css 同名叠加的组件（.btn / .foot / .foot-nav /
   .sec / .cap / .panel），这里把叠加后的实际值写全，保证抽离前后渲染一致。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.cx-body { margin: 0; color: #ece6db; font-family: var(--serif); }
/* 页面级类用 cx-body--，不与区块类同名（曾经 body.cx-lab 白吃了 .cx-lab 的 padding） */
body.cx-body--route { padding-top: 68px; background: #06080b; }
body.cx-body--learn { padding-top: 68px; background: #05070a; overflow-x: hidden; }
body.cx-body--lab { background: #06080b; }
/* 原先页面里是裸的 a{color:inherit}；:where() 保持同样的特异性，不压过 site.css 的组件链接样式 */
:where(.cx-body--route) a { color: inherit; }

/* ---------------------------------------------------------------- 概览 · 两把尺 */
.cx-w { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* 入口开场（2026-10-24）：以太场 + 从序章开始。按住画面以太会聚来（assets/js/fx.js 的 [data-fx-aether]） */
.cx-gate {
  position: relative; min-height: 78svh; display: grid; place-items: center; text-align: center;
  overflow: hidden; cursor: crosshair; touch-action: none; user-select: none;
  background: radial-gradient(70% 70% at 50% 45%, #0b131a, #05080b 80%);
}
.cx-gate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-gate-in { position: relative; z-index: 1; padding: 120px 24px 60px; pointer-events: none; }
.cx-gate-k { font-family: var(--serif); font-size: 13px; letter-spacing: .5em; color: rgba(159, 194, 212, .7); margin: 0 0 20px; }
.cx-gate-k i { font-family: var(--display-latin); font-size: 16px; letter-spacing: .06em; }
.cx-gate h1 {
  font-family: var(--serif); font-weight: 200; font-size: clamp(56px, 7vw, 110px);
  letter-spacing: .5em; padding-left: .5em; color: var(--ice); text-shadow: 0 0 40px rgba(159, 194, 212, .4); margin: 0;
}
.cx-gate-s { font-family: var(--serif); font-weight: 300; font-size: clamp(15px, 1.3vw, 18px); line-height: 2.2; letter-spacing: .12em; color: rgba(159, 194, 212, .9); margin: 26px 0 0; }
.cx-gate-go {
  display: inline-block; pointer-events: auto; margin-top: 40px; padding: 4px 2px 10px;
  font-family: var(--serif); font-size: 16px; letter-spacing: .32em; color: var(--ice);
  border-bottom: 1px solid rgba(236, 242, 246, .6); transition: .4s var(--ease);
}
.cx-gate-go:hover { color: #fff; border-color: #fff; text-shadow: 0 0 18px rgba(220, 238, 246, .75); }
.cx-gate-ix { display: inline-block; pointer-events: auto; margin: 22px 0 0 0; font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: rgba(232, 208, 155, .75); text-decoration: none; border-bottom: 1px solid rgba(232, 208, 155, .25); padding-bottom: 4px; transition: color .3s, border-color .3s; }
.cx-gate-ix:hover { color: #f5e9cf; border-color: rgba(245, 233, 207, .7); }
.cx-gate-in > .cx-gate-ix { display: table; margin-left: auto; margin-right: auto; }
.cx-gate-hint { font-family: var(--serif); font-size: 12.5px; letter-spacing: .3em; color: rgba(111, 230, 216, .55); margin: 26px 0 0; }

/* 两把尺（2026-10-24 重做）：一把往上量（底子：三根竖尺 Ⅰ–Ⅴ），一把往外量（威胁：一根横尺，宗师与天灾之间断开）。
   选一个例子：竖尺升起，指针滑到实战那一格；跨级的例子在横尺上方拉出一道弧。只动 transform 与 opacity。 */
.cx-scales { padding: clamp(80px, 12vh, 130px) 0 clamp(70px, 10vh, 110px); text-align: center; border-top: 1px solid rgba(201, 169, 97, .14); }
.cx-scales .cx-k { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(232, 208, 155, .75); margin: 0 0 18px; }
.cx-scales h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: .3em; text-indent: .3em; color: var(--ice); margin: 0 0 22px; }
.cx-scales .cx-s { font-family: var(--serif); font-size: 15px; line-height: 2.1; letter-spacing: .1em; color: rgba(214, 226, 234, .72); margin: 0 auto; }
.cx-rulers { display: grid; grid-template-columns: auto 1fr; gap: clamp(50px, 7vw, 110px); align-items: end; max-width: 1080px; margin: clamp(50px, 8vh, 80px) auto 0; padding: 0 clamp(20px, 4vw, 48px); text-align: left; }
.cx-r-lab { display: flex; align-items: baseline; gap: 12px; margin: 0 0 26px; }
.cx-r-lab b { font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: .3em; color: var(--ice); }
.cx-r-lab i { font-family: var(--display-latin); font-style: italic; font-size: 16px; color: var(--frost); }
/* 往上量 */
.cx-cols { display: flex; gap: 52px; padding-left: 30px; }
.cx-col { display: flex; flex-direction: column; align-items: center; --lv: 0; }
.cx-col-track { position: relative; width: 1px; height: 230px; background: rgba(159, 194, 212, .2); }
.cx-col-fill { position: absolute; left: -1px; bottom: 0; width: 3px; height: 100%; background: linear-gradient(0deg, rgba(232, 208, 155, .35), #f5e9cf); box-shadow: 0 0 12px rgba(232, 208, 155, .5); transform-origin: bottom; transform: scaleY(var(--lv)); transition: transform 1s cubic-bezier(.3, .7, .2, 1); }
.cx-tick { position: absolute; left: -5px; width: 11px; height: 1px; background: rgba(159, 194, 212, .4); }
.cx-tick em { position: absolute; right: 18px; top: -9px; font-family: var(--display-latin); font-style: normal; font-size: 14px; color: rgba(159, 194, 212, .45); transition: color .6s; }
.cx-col-glyph { width: 40px; height: 40px; margin-top: 18px; fill: none; stroke: rgba(159, 194, 212, .45); stroke-width: 1.4; transition: stroke .6s; }
.cx-col-glyph .cx-dot { fill: rgba(159, 194, 212, .45); stroke: none; }
.cx-col-name { font-family: var(--serif); font-size: 14px; letter-spacing: .3em; text-indent: .3em; color: rgba(214, 226, 234, .5); margin-top: 8px; transition: color .6s; }
.cx-col.is-on .cx-col-glyph { stroke: rgba(232, 208, 155, .9); }
.cx-col.is-on .cx-col-glyph .cx-dot { fill: #f5e9cf; }
.cx-col.is-on .cx-col-name { color: #f5e9cf; }
/* 往外量 */
.cx-out { padding-bottom: 66px; }
.cx-track { position: relative; height: 1px; margin: 150px 30px 0 0; background: linear-gradient(90deg, rgba(159, 194, 212, .35) 0 77%, transparent 77% 87%, rgba(232, 208, 155, .55) 87%); }
.cx-stop { position: absolute; top: 0; width: 0; }
.cx-stop i { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #0b1016; border: 1px solid rgba(159, 194, 212, .55); transition: background .6s, border-color .6s; }
.cx-stop em { position: absolute; left: -40px; width: 80px; top: 18px; text-align: center; font-family: var(--serif); font-style: normal; font-size: 15px; letter-spacing: .2em; text-indent: .2em; color: rgba(214, 226, 234, .5); transition: color .6s; }
.cx-stop--cal i { left: -5px; top: -5px; width: 11px; height: 11px; border-color: rgba(232, 208, 155, .8); }
.cx-stop--cal em { font-size: 20px; color: rgba(245, 233, 207, .7); }
.cx-stop.is-base i { border-color: rgba(232, 208, 155, .9); }
.cx-stop.is-base em::after { content: '底子'; position: absolute; left: 0; right: 0; top: 30px; font-size: 11px; letter-spacing: .3em; color: rgba(232, 208, 155, .6); }
.cx-stop.is-at i { background: #f5e9cf; border-color: #f5e9cf; }
.cx-stop.is-at em { color: #f5e9cf; }
.cx-break { position: absolute; left: 82%; top: -9px; width: 14px; height: 18px; border-left: 1px solid rgba(214, 226, 234, .5); border-right: 1px solid rgba(214, 226, 234, .5); transform: skewX(-24deg); }
.cx-break::after { content: '换一把尺'; position: absolute; left: 50%; top: 26px; transform: skewX(24deg) translateX(-50%); white-space: nowrap; font-family: var(--serif); font-size: 11px; letter-spacing: .2em; color: rgba(214, 226, 234, .4); }
.cx-needle { position: absolute; left: 0; top: 0; width: 100%; height: 0; transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); }
.cx-needle i { position: absolute; left: 0; top: -54px; width: 1px; height: 54px; background: linear-gradient(180deg, transparent, #f5e9cf); }
.cx-needle i::before { content: ''; position: absolute; left: -5px; top: -6px; width: 9px; height: 9px; background: #f5e9cf; transform: rotate(45deg); box-shadow: 0 0 14px rgba(245, 233, 207, .8); }
.cx-jump { position: absolute; top: -110px; height: 110px; border: 1px dashed rgba(232, 208, 155, .55); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: 0; transition: opacity .6s .5s; pointer-events: none; }
.cx-jump em { position: absolute; left: 0; right: 0; top: -30px; text-align: center; font-family: var(--serif); font-style: normal; font-size: 13px; letter-spacing: .26em; color: rgba(232, 208, 155, .9); }
.cx-rulers.is-jump .cx-jump { opacity: 1; }
.cx-cap { font-family: var(--serif); font-size: 15px; line-height: 2; letter-spacing: .08em; color: rgba(214, 226, 234, .85); margin: 78px 0 0; min-height: 2em; }
/* 例子 */
.cx-exs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1000px; margin: 40px auto 0; padding: 0 20px; }
.cx-ex { font-family: var(--serif); font-size: 14px; letter-spacing: .12em; color: rgba(214, 226, 234, .7); background: transparent; border: 1px solid rgba(159, 194, 212, .22); border-radius: 999px; padding: 10px 20px; cursor: pointer; transition: color .3s, border-color .3s, background .3s; }
.cx-ex:hover { color: #fff; border-color: rgba(214, 226, 234, .5); }
.cx-ex.is-on { color: #0b1016; background: #f5e9cf; border-color: #f5e9cf; }
.cx-scales .cx-eq { font-family: var(--serif); font-size: 13px; letter-spacing: .14em; line-height: 2; color: rgba(214, 226, 234, .5); margin: 40px auto 0; max-width: 32em; }
@media (max-width: 760px) {
  .cx-rulers { grid-template-columns: 1fr; gap: 50px; }
  .cx-cols { justify-content: center; padding-left: 20px; gap: 40px; }
  .cx-stop em { font-size: 12px; letter-spacing: 0; text-indent: 0; }
  .cx-stop--cal em { font-size: 15px; }
  .cx-jump em { font-size: 12px; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------- 概览 · 三元入口 */
.cx-fork { padding: clamp(60px, 9vh, 100px) 0 clamp(70px, 10vh, 100px); }
.cx-fork h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .14em;
  color: #fdf8ef; text-align: center; margin: 0 0 12px;
}
.cx-fork p.cx-sub {
  font-family: var(--serif); font-size: 12.5px; line-height: 2; color: rgba(244, 238, 228, .5);
  text-align: center; margin: 0 0 clamp(28px, 4vh, 44px);
}
/* 关系图（2026-10-25 第三版，作者选 B）：以太在正中，三条路是三根往外的辐条，一圈是一阶，徽记在第五圈；
   最外隔开一圈是天灾——它包住所有路，不在任何一条路的顶上。读到哪一阶，那根辐条就从中心亮到哪一圈。
   悬停：辐条与刻度点亮，徽记散开、器物在圆窗里显出，下方说明换成这条路。只动 transform / opacity / stroke。 */
.cx-orbit { position: relative; width: min(820px, 94vw); aspect-ratio: 800 / 760; margin: 0 auto; }
.cx-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cx-tiers circle { fill: none; stroke: rgba(159, 194, 212, .1); stroke-width: 1; }
.cx-tiers text { font-family: var(--display-latin); font-size: 12px; fill: rgba(159, 194, 212, .38); }
.cx-cal circle { fill: none; stroke: rgba(159, 194, 212, .16); stroke-width: 1; stroke-dasharray: 2 6; }
.cx-cal path { stroke: rgba(159, 194, 212, .12); stroke-width: 1; }
.cx-orbit.is-open .cx-cal circle { stroke: rgba(232, 208, 155, .6); stroke-dasharray: none; }
.cx-orbit.is-open .cx-cal path { stroke: rgba(232, 208, 155, .45); }
.cx-cal { transform-origin: 0 0; transition: transform 1.5s cubic-bezier(.5, 0, .2, 1); }
.cx-spoke line { stroke-width: 1; fill: none; transition: stroke .5s var(--ease); }
.sp-base { stroke: rgba(159, 194, 212, .22); }
.sp-lit { stroke: rgba(232, 208, 155, .85); stroke-width: 1.6; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1); }
/* 读完的路：辐条全亮，往天灾那一圈的虚线也亮起来，徽记带一圈光 */
.cx-spoke.is-done .sp-out { stroke: rgba(232, 208, 155, .45); }
.cx-node.is-done .cx-glyph { box-shadow: 0 0 0 1px rgba(232, 208, 155, .35), 0 0 30px rgba(232, 208, 155, .28); }
.cx-node.is-done .cx-name b { color: #f5e9cf; }
.cx-node.is-new .cx-glyph { animation: cx-newlit 2.6s 1.4s ease-out both; }
@keyframes cx-newlit { 0% { box-shadow: 0 0 0 1px rgba(232, 208, 155, .35), 0 0 0 rgba(245, 233, 207, 0); } 40% { box-shadow: 0 0 0 1px rgba(245, 233, 207, .9), 0 0 70px rgba(245, 233, 207, .7); } 100% { box-shadow: 0 0 0 1px rgba(232, 208, 155, .35), 0 0 30px rgba(232, 208, 155, .28); } }
/* 三条路都读完：整张图高亮 */
.cx-orbit.is-all .cx-tiers circle { stroke: rgba(232, 208, 155, .2); }
.cx-orbit.is-all .cx-tiers text { fill: rgba(232, 208, 155, .6); }
.cx-orbit.is-all .cx-core { transform: scale(1.5); }
.cx-orbit.is-all .cx-cal circle { stroke: rgba(245, 233, 207, .85); }
.sp-out { stroke: rgba(159, 194, 212, .14); stroke-dasharray: 2 7; }
.sp-dot { fill: #0b1016; stroke: rgba(159, 194, 212, .45); stroke-width: 1; transition: fill .5s, stroke .5s; }
.sp-dot.is-lit { fill: #f5e9cf; stroke: #f5e9cf; }
.cx-orbit[data-on=arcane] .sp-arcane .sp-base, .cx-orbit[data-on=martial] .sp-martial .sp-base, .cx-orbit[data-on=divine] .sp-divine .sp-base { stroke: rgba(214, 226, 234, .7); }
.cx-orbit[data-on=arcane] .sp-arcane .sp-out, .cx-orbit[data-on=martial] .sp-martial .sp-out, .cx-orbit[data-on=divine] .sp-divine .sp-out { stroke: rgba(232, 208, 155, .5); }
.cx-orbit[data-on=arcane] .sp-arcane .sp-dot, .cx-orbit[data-on=martial] .sp-martial .sp-dot, .cx-orbit[data-on=divine] .sp-divine .sp-dot { stroke: rgba(214, 226, 234, .9); }
.cx-core { animation: cx-breathe 3.6s ease-in-out infinite; }
@keyframes cx-breathe { 50% { opacity: .55; } }
/* 以太（中心，回序章） */
.cx-aether { position: absolute; width: 0; height: 0; text-decoration: none; }
.cx-aether::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; }
.cx-aether span { position: absolute; left: 16px; top: 12px; white-space: nowrap; font-family: var(--serif); font-size: 13px; letter-spacing: .4em; text-indent: .4em; color: rgba(143, 243, 230, .6); transition: color .3s; }
.cx-aether:hover span { color: #8ff3e6; }
/* 三条路的徽记 */
.cx-node { position: absolute; width: 0; height: 0; text-decoration: none; color: inherit; }
.cx-node::before { content: ''; position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; } /* 命中区 */
.cx-glyph, .cx-win { position: absolute; border-radius: 50%; }
.cx-glyph {
  left: -42px; top: -42px; width: 84px; height: 84px; overflow: visible; background: #0a0e13;
  fill: none; stroke: rgba(214, 226, 234, .66); stroke-width: 1;
  transition: transform .7s var(--out), opacity .5s var(--out);
}
.cx-glyph .cx-dot { fill: rgba(232, 208, 155, .9); stroke: none; }
.cx-node.is-done .cx-glyph { stroke: rgba(232, 208, 155, .8); }
.cx-win {
  left: -88px; top: -88px; width: 176px; height: 176px;
  background-repeat: no-repeat; background-size: auto 170%; background-color: #05080b;
  box-shadow: 0 0 0 1px rgba(232, 208, 155, .4), 0 0 40px rgba(232, 208, 155, .14);
  opacity: 0; transform: scale(.5); transition: opacity .5s var(--out), transform .7s var(--out);
}
.cx-node:hover .cx-win, .cx-node:focus-visible .cx-win { opacity: 1; transform: none; }
.cx-node:hover .cx-glyph, .cx-node:focus-visible .cx-glyph { transform: scale(2.1); opacity: 0; }
.cx-name { position: absolute; top: -26px; display: flex; flex-direction: column; white-space: nowrap; transition: transform .7s var(--out); }
.cx-node.side-l .cx-name { right: 60px; align-items: flex-end; }
.cx-node.side-r .cx-name { left: 60px; align-items: flex-start; }
.cx-node.side-l:hover .cx-name { transform: translateX(-46px); }
.cx-node.side-r:hover .cx-name { transform: translateX(46px); }
.cx-name b { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .28em; color: var(--ice); line-height: 1.2; }
.cx-node.side-l .cx-name b { margin-right: -.28em; }
.cx-name i { font-family: var(--display-latin); font-style: italic; font-size: 16px; color: var(--frost); }
.cx-node:focus-visible { outline: none; }
.cx-node:focus-visible .cx-win { box-shadow: 0 0 0 2px rgba(232, 208, 155, .8); }
/* 天灾（最外一圈的顶端） */
.cx-calbtn { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.cx-calbtn b, .cx-calbtn span { position: absolute; left: -100px; width: 200px; text-align: center; white-space: nowrap; }
.cx-calbtn b { top: -15px; font-family: var(--serif); font-weight: 300; font-size: 24px; letter-spacing: .5em; text-indent: .5em; color: rgba(214, 226, 234, .5); background: radial-gradient(closest-side, #0a0e13 60%, transparent); padding: 4px 0; }
.cx-calbtn span { top: 26px; font-family: var(--serif); font-size: 12px; letter-spacing: .3em; text-indent: .3em; color: rgba(214, 226, 234, .4); }
button.cx-calbtn { cursor: pointer; touch-action: none; }
button.cx-calbtn::before { content: ''; position: absolute; left: -90px; top: -36px; width: 180px; height: 90px; } /* 命中区 */
button.cx-calbtn b { color: #f5e9cf; text-shadow: 0 0 18px rgba(245, 233, 207, .5); }
button.cx-calbtn span { color: rgba(232, 208, 155, .8); }
button.cx-calbtn:focus-visible { outline: none; }
button.cx-calbtn:focus-visible b { text-decoration: underline; text-underline-offset: 8px; }
/* 按住：三根辐条一路亮到最外一圈，三个徽记暗下，外圈刻度转一格 */
.cx-orbit.is-holding .sp-out, .cx-orbit.is-holding .sp-base { stroke: rgba(245, 233, 207, .9); stroke-dasharray: none; transition: stroke 1.2s; }
.cx-orbit.is-holding .cx-node { opacity: .25; transition: opacity 1.2s; }
.cx-orbit.is-holding .cx-cal { transform: rotate(36deg); }
/* 说明区：悬停哪条路就讲哪条路 */
.cx-legend { max-width: 34em; margin: 10px auto 0; padding: 0 20px; text-align: center; min-height: 128px; }
.cx-lg-t { font-family: var(--serif); font-weight: 300; font-size: 22px; letter-spacing: .3em; color: var(--ice); margin: 0 0 10px; }
.cx-lg-t i { font-family: var(--display-latin); font-size: 17px; letter-spacing: 0; color: var(--frost); margin-left: 12px; }
.cx-lg-l { font-family: var(--serif); font-size: 14.5px; line-height: 2; color: rgba(214, 226, 234, .75); margin: 0; }
.cx-lg-m { font-family: var(--serif); font-size: 12.5px; letter-spacing: .24em; color: rgba(232, 208, 155, .75); margin: 10px 0 0; }

/* 展开（全屏，fixed）：地平线从印的高度横贯 → 上下两半分开 → 远景与「天灾」 */
.cx-unfold { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.cx-uf-top, .cx-uf-bot { position: absolute; left: 0; right: 0; background: #06090c; opacity: 0; transition: opacity .35s, transform 1.1s .55s cubic-bezier(.7, 0, .2, 1); }
.cx-uf-top { top: 0; height: var(--y); }
.cx-uf-bot { top: var(--y); bottom: 0; }
.cx-uf-line { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; margin-top: -.5px; background: linear-gradient(90deg, transparent, #f5e9cf 20%, #fff 50%, #f5e9cf 80%, transparent); box-shadow: 0 0 18px rgba(245, 233, 207, .8); transform: scaleX(0); transition: transform .55s cubic-bezier(.6, 0, .2, 1), opacity .6s 1.3s; }
.cx-uf-far { position: absolute; inset: 0; background: linear-gradient(180deg, #070b10 0, #0e1822 calc(var(--y) - 60px), #142231 var(--y), #05080b 100%); opacity: 0; transition: opacity .3s .5s; }
.cx-uf-far svg { position: absolute; left: 0; right: 0; top: calc(var(--y) - 22vh); width: 100%; height: 22vh; fill: #0b131b; }
.cx-uf-far p { position: absolute; left: 0; right: 0; top: calc(var(--y) * .4); margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(10px); transition: opacity .8s 1.2s, transform .8s 1.2s var(--out); }
.cx-uf-far b { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 80px); letter-spacing: .5em; text-indent: .5em; color: #f5e9cf; }
.cx-uf-far span { font-family: var(--serif); font-size: 14px; letter-spacing: .4em; color: rgba(214, 226, 234, .65); }
.cx-unfold.is-go .cx-uf-top, .cx-unfold.is-go .cx-uf-bot { opacity: 1; }
.cx-unfold.is-go .cx-uf-line { transform: none; opacity: 0; }
.cx-unfold.is-go .cx-uf-far { opacity: 1; }
.cx-unfold.is-go .cx-uf-top { transform: translateY(-100%); }
.cx-unfold.is-go .cx-uf-bot { transform: translateY(100%); }
.cx-unfold.is-go .cx-uf-far p { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .cx-core { animation: none; } }

/* ---------------------------------------------------------------- 路线视图 */
.cx-rt { max-width: 1080px; margin: 0 auto; padding: clamp(36px, 5vh, 60px) clamp(20px, 4vw, 48px) 130px; }
.cx-rt-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid rgba(201, 169, 97, .2); margin-bottom: 26px;
}
.cx-rt-back { font-family: var(--serif); font-size: 11.5px; letter-spacing: .2em; color: rgba(244, 238, 228, .45); text-decoration: none; transition: .3s; }
.cx-rt-back:hover { color: #e8d09b; }
.cx-rt-name { font-family: var(--serif); font-size: clamp(17px, 1.8vw, 22px); letter-spacing: .22em; color: #fdf8ef; }
.cx-rt-route { font-family: var(--latin); font-size: 9px; letter-spacing: .24em; color: rgba(201, 169, 97, .6); }

.cx-dirs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 44px); }
.cx-dir {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .1);
  background: transparent; font-family: var(--serif); font-size: 11.5px; letter-spacing: .12em;
  color: rgba(244, 238, 228, .5); transition: .3s; text-decoration: none;
}
.cx-dir:hover { border-color: rgba(201, 169, 97, .55); color: #e8d09b; }
.cx-dir.on { border-color: rgba(232, 208, 155, .85); background: rgba(201, 169, 97, .14); color: #fff; }
.cx-dir .cx-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(201, 169, 97, .7); margin-left: 7px; vertical-align: middle; }
.cx-dir.done .cx-dot { background: #e8d09b; box-shadow: 0 0 8px rgba(232, 208, 155, .9); }

.cx-stagehead { margin-bottom: clamp(26px, 4vh, 40px); }
.cx-sh-no { font-family: var(--latin); font-size: 10px; letter-spacing: .3em; color: rgba(201, 169, 97, .6); margin: 0 0 10px; }
.cx-sh-t {
  font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.8vw, 38px); letter-spacing: .1em;
  color: #fdf8ef; margin: 0 0 8px; line-height: 1.3;
}
.cx-sh-e { font-style: normal; font-family: var(--latin); font-size: 9px; letter-spacing: .3em; color: rgba(201, 169, 97, .55); }

/* 正文小节。原先同时吃到 site.css 的 .sec（padding / position），这里写全 */
.cx-sec { position: relative; padding: clamp(26px, 3.6vh, 38px) 0; border-top: 1px solid rgba(201, 169, 97, .12); }
.cx-sec h3 { font-family: var(--latin); font-size: 9.5px; letter-spacing: .3em; color: rgba(201, 169, 97, .62); margin: 0 0 14px; font-weight: 400; }
.cx-sec p { font-family: var(--serif); font-size: clamp(13px, 1.15vw, 14.5px); line-height: 2.1; color: rgba(244, 238, 228, .68); margin: 0 0 12px; }
.cx-sec p:last-child { margin-bottom: 0; }
.cx-sec .cx-lead { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.95; color: rgba(244, 238, 228, .9); }
.cx-sec ul { margin: 0; padding-left: 18px; }
.cx-sec li { font-family: var(--serif); font-size: 13px; line-height: 2.05; color: rgba(244, 238, 228, .6); margin-bottom: 6px; }
.cx-todo { color: rgba(198, 108, 90, .6) !important; font-size: 12px !important; }

.cx-demo {
  border: 1px solid rgba(201, 169, 97, .18); border-radius: 12px; padding: 18px;
  background: radial-gradient(70% 60% at 50% 40%, #0a0f14, #06080b 72%); margin: 14px 0;
}
.cx-demo-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cx-demo-h b { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: .1em; color: #e8d09b; }
.cx-demo-h span { font-family: var(--latin); font-size: 8px; letter-spacing: .2em; color: rgba(201, 169, 97, .45); }
.cx-demo-body {
  min-height: 150px; display: grid; place-items: center; text-align: center;
  font-family: var(--serif); font-size: 12px; color: rgba(244, 238, 228, .4); line-height: 1.9;
}

/* 阶末动作条 */
.cx-foot { margin-top: clamp(30px, 4vh, 46px); display: grid; gap: 12px; }
.cx-foot-nav { display: flex; gap: 10px; flex-wrap: wrap; }

/* 按钮。原先同时吃到 site.css 的 .btn（min-width / backdrop-filter / hover 位移），这里写全 */
.cx-btn {
  display: inline-block; align-items: center; justify-content: center; gap: 11px;
  min-width: 172px; padding: 11px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(201, 169, 97, .34); background: rgba(201, 169, 97, .05);
  font-family: var(--serif); font-size: 12px; letter-spacing: .18em; color: #e8d09b;
  transition: .35s; text-decoration: none; backdrop-filter: blur(10px);
}
.cx-btn:hover { border-color: rgba(232, 208, 155, .9); background: rgba(201, 169, 97, .14); color: #fff; transform: translateY(-2px); }
.cx-btn.ghost { border-color: rgba(255, 255, 255, .12); background: transparent; color: rgba(244, 238, 228, .5); }
.cx-btn.ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.cx-btn.done { border-color: rgba(232, 208, 155, .6); color: #fdf8ef; }

.cx-hint {
  border: 1px dashed rgba(201, 169, 97, .3); border-radius: 10px; padding: 14px 18px;
  font-family: var(--serif); font-size: 12px; line-height: 1.9; color: rgba(244, 238, 228, .62);
}
.cx-hint[hidden] { display: none; }
.cx-hint .cx-acts { display: flex; gap: 10px; margin-top: 10px; }

@media (max-width: 760px) {
  .cx-glyph { left: -26px; top: -26px; width: 52px; height: 52px; }
  .cx-win { left: -56px; top: -56px; width: 112px; height: 112px; }
  .cx-node.side-l .cx-name { right: 34px; } .cx-node.side-r .cx-name { left: 34px; }
  .cx-name { top: -18px; } .cx-name b { font-size: 18px; letter-spacing: .14em; } .cx-name i { font-size: 13px; }
  .cx-calbtn b { font-size: 17px; } .cx-calbtn span { top: 18px; font-size: 11px; letter-spacing: .1em; }
  .cx-aether span { font-size: 11px; top: 8px; left: 10px; }
}

/* ---------------------------------------------------------------- 百科正文 */
.cx-wk {
  max-width: 1120px; margin: 0 auto; padding: clamp(20px, 3vh, 36px) clamp(18px, 4vw, 44px) 120px;
  display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: start;
}
.cx-wk-side { position: sticky; top: 104px; display: grid; gap: 2px; border-left: 1px solid rgba(201, 169, 97, .16); padding-left: 2px; }
.cx-wk-nav {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; text-decoration: none; border-radius: 0 6px 6px 0;
  transition: .3s; border-left: 2px solid transparent; margin-left: -3px;
}
.cx-wk-nav:hover { background: rgba(201, 169, 97, .05); }
.cx-wk-nav.on { border-left-color: #e8d09b; background: rgba(201, 169, 97, .09); }
.cx-wk-no { font-family: var(--latin); font-size: 9.5px; letter-spacing: .14em; color: rgba(201, 169, 97, .5); width: 18px; }
.cx-wk-nav.on .cx-wk-no { color: #e8d09b; }
.cx-wk-t { font-family: var(--serif); font-size: 12.5px; letter-spacing: .08em; color: rgba(244, 238, 228, .55); }
.cx-wk-nav.on .cx-wk-t { color: #fdf8ef; }
.cx-wk-main { min-width: 0; }
.cx-wk-head { max-width: 660px; }
.cx-wk-tier { font-family: var(--latin); font-size: 9.5px; letter-spacing: .3em; color: rgba(201, 169, 97, .55); margin: 0 0 12px; }
.cx-wk-head h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 42px); letter-spacing: .1em;
  color: #fdf8ef; margin: 0 0 10px; line-height: 1.28;
}
.cx-wk-badge { font-family: var(--serif); font-size: 12px; letter-spacing: .22em; color: rgba(232, 208, 155, .8); margin: 0 0 22px; }
.cx-wk-lead {
  font-family: var(--serif); font-size: clamp(14.5px, 1.4vw, 17px); line-height: 2.15;
  color: rgba(244, 238, 228, .8); margin: 0 0 clamp(26px, 4vh, 44px);
}
.cx-wk-fig {
  position: relative; width: 100%; background-size: cover; background-position: center; margin: 0 0 clamp(30px, 5vh, 56px);
  overflow: hidden; border-radius: 2px;
  background: radial-gradient(80% 70% at 40% 40%, rgba(201, 169, 97, .055), transparent 70%);
}
.cx-wk-fig::before { content: ''; display: block; padding-top: 38%; }
.cx-wk-fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #05070a 0%, transparent 14%, transparent 86%, #05070a 100%),
              linear-gradient(180deg, #05070a 0%, transparent 12%, transparent 88%, #05070a 100%);
}
.cx-wk-fig.cx-narrow::before { padding-top: 30%; }

.cx-wk-cap {
  max-width: 660px; font-family: var(--serif); font-size: 11px; letter-spacing: .18em;
  color: rgba(244, 238, 228, .3); margin: -24px 0 clamp(30px, 5vh, 52px); padding-left: 2px;
}

/* 目录开关：留在正文顶部，随正文滚走，不吸顶（吸顶会压住正文）。
   收起后正文占满，按钮仍在正文顶部，展开/收起来回都靠它。 */
.cx-wk-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 18px;
  width: auto; margin: 0 0 18px; cursor: pointer;
  border: 1px solid rgba(201, 169, 97, .3); border-radius: 999px; background: rgba(201, 169, 97, .05);
  font-family: var(--serif); font-size: 11.5px; letter-spacing: .16em; color: rgba(232, 208, 155, .85);
  transition: border-color .3s, color .3s, background .3s;
}
.cx-wk-toggle:hover { border-color: rgba(232, 208, 155, .8); color: #fff; }

.cx-wk.cx-side-off { grid-template-columns: minmax(0, 1fr); }
.cx-wk.cx-side-off .cx-wk-side { display: none; }
.cx-wk-sec { max-width: 660px; padding: clamp(24px, 3.4vh, 34px) 0; border-top: 1px solid rgba(201, 169, 97, .11); }
.cx-wk-sec h2 {
  font-family: var(--serif); font-weight: 500; font-size: 15px; letter-spacing: .16em;
  color: rgba(232, 208, 155, .85); margin: 0 0 14px;
}
.cx-wk-sec p { font-family: var(--serif); font-size: clamp(13.5px, 1.2vw, 15px); line-height: 2.15; color: rgba(244, 238, 228, .72); margin: 0; }
.cx-wk-foot {
  max-width: 660px; margin-top: clamp(30px, 5vh, 48px); padding-top: 24px; border-top: 1px solid rgba(201, 169, 97, .16);
  display: flex; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 860px) {
  .cx-wk { grid-template-columns: 1fr; gap: 18px; }
  .cx-wk-side {
    position: static; display: flex; overflow-x: auto; border-left: 0; border-bottom: 1px solid rgba(201, 169, 97, .16);
    padding: 0 0 10px; gap: 6px;
  }
  .cx-wk-nav { border-left: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; margin: 0; white-space: nowrap; }
  .cx-wk-nav.on { border-bottom-color: #e8d09b; }
}

/* ---------------------------------------------------------------- 学习模式 */
.mg-top {
  position: sticky; top: 68px; z-index: 20; background: rgba(5, 7, 10, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201, 169, 97, .14);
}
.mg-topin {
  max-width: 1120px; margin: 0 auto; padding: 12px clamp(18px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.mg-top a { font-family: var(--serif); font-size: 11.5px; letter-spacing: .18em; color: rgba(244, 238, 228, .45); text-decoration: none; transition: .3s; }
.mg-top a:hover { color: #e8d09b; }

/* ---------------------------------------------------------------- 学习 / 百科 模式切换（两页共用）
   放在 .mg-top a 之后：模式条位于顶栏内部，旧页里它靠顺序压过顶栏链接的字号，这里保持同样的顺序。 */
.mg-mode { display: flex; align-items: center; gap: 0; justify-content: center; width: 100%; padding: 0 0 10px; }
.mg-mode a {
  padding: 9px 26px; font-family: var(--serif); font-size: 12.5px; letter-spacing: .16em; text-decoration: none;
  color: rgba(244, 238, 228, .42); border: 1px solid rgba(255, 255, 255, .1); transition: .3s;
}
.mg-mode a:first-child { border-radius: 999px 0 0 999px; }
.mg-mode a:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
.mg-mode a.on { color: #fdf8ef; border-color: rgba(232, 208, 155, .85); background: rgba(201, 169, 97, .16); }
.mg-mode a:not(.on):hover { color: #e8d09b; border-color: rgba(201, 169, 97, .5); }

.mg-mid { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: #fdf8ef; }
.mg-chips { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 0 10px; }
.mg-chip {
  padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--serif); font-size: 11px; letter-spacing: .1em; color: rgba(244, 238, 228, .45);
  cursor: pointer; transition: .3s; background: transparent;
}
.mg-chip:hover { border-color: rgba(201, 169, 97, .6); color: #e8d09b; }
.mg-chip.on { border-color: rgba(232, 208, 155, .85); background: rgba(201, 169, 97, .14); color: #fff; }
.mg-chip.done .d { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #e8d09b; margin-left: 6px; vertical-align: middle; }
.mg-entry { max-width: 720px; margin: 0 auto; padding: clamp(70px, 11vh, 120px) clamp(20px, 4vw, 44px); text-align: center; }
.mg-entry h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 50px); letter-spacing: .14em; color: #fdf8ef; margin: 0 0 8px; }
.mg-en { font-family: var(--latin); font-size: 10px; letter-spacing: .4em; color: rgba(201, 169, 97, .65); margin: 0 0 26px; }
.mg-entry p { font-family: var(--serif); font-size: 14px; line-height: 2.1; color: rgba(244, 238, 228, .6); max-width: 30em; margin: 0 auto 34px; }
.mg-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mg-stage { max-width: 1120px; margin: 0 auto; padding: clamp(30px, 5vh, 56px) clamp(18px, 4vw, 44px) 60px; }
.mg-scene { width: 100%; max-width: 960px; margin: 0 auto; }
#sv { width: 100%; height: auto; display: block; user-select: none; }
.mg-say { max-width: 660px; margin: clamp(20px, 3vh, 30px) auto 0; text-align: center; min-height: 76px; }
.mg-say .h { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 25px); letter-spacing: .1em; color: #fdf8ef; margin: 0 0 14px; }
.mg-say .p { font-family: var(--serif); font-size: clamp(14px, 1.3vw, 16.5px); line-height: 2.05; color: rgba(244, 238, 228, .78); margin: 0; }
.mg-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; min-height: 42px; }
.mg-act {
  padding: 11px 24px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(201, 169, 97, .38);
  background: rgba(201, 169, 97, .05); font-family: var(--serif); font-size: 12.5px; letter-spacing: .16em;
  color: #e8d09b; transition: .35s; text-decoration: none; display: inline-block;
}
.mg-act:hover { border-color: rgba(232, 208, 155, .9); background: rgba(201, 169, 97, .14); color: #fff; }
.mg-act.ghost { border-color: rgba(255, 255, 255, .12); color: rgba(244, 238, 228, .5); background: transparent; }
.mg-act.ghost:hover { color: #fff; }
.mg-detail { max-width: 660px; margin: 18px auto 0; border: 1px solid rgba(201, 169, 97, .2); border-radius: 10px; padding: 16px 20px; display: none; }
.mg-detail.on { display: block; }
.mg-detail p { font-family: var(--serif); font-size: 12.5px; line-height: 2; color: rgba(244, 238, 228, .6); margin: 0; }

/* ---------------------------------------------------------------- 试验台 */
.cx-lab-w { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 48px); }
.cx-lab { padding: clamp(60px, 9vh, 100px) 0; border-top: 1px solid rgba(201, 169, 97, .14); }
.cx-lab:first-of-type { border-top: 0; }
.cx-lab-head { max-width: 640px; margin-bottom: clamp(28px, 4vh, 44px); }
.cx-lab-k { font-family: var(--latin); font-size: 9.5px; letter-spacing: .4em; color: rgba(201, 169, 97, .6); margin: 0 0 12px; }
.cx-lab-t { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .12em; color: #fdf8ef; margin: 0 0 14px; }
.cx-lab-s { font-family: var(--serif); font-size: 13px; line-height: 2.05; color: rgba(244, 238, 228, .55); margin: 0; }
.cx-lab-body { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
#cv {
  width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(201, 169, 97, .16);
  background: radial-gradient(72% 62% at 50% 48%, #0a0f14, #05070a 72%); cursor: pointer;
}
#shield {
  width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(201, 169, 97, .16);
  background: radial-gradient(70% 60% at 50% 50%, #0a0f14, #05070a 72%);
}
/* 右栏。原先同时吃到 site.css 的 .panel（卡片底 / 边框 / 阴影），这里写全 */
.cx-lab-panel {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; gap: 16px;
}
/* 打法按钮。原先同时吃到 site.css 的 .btn（min-width / 居中 / backdrop-filter / hover 位移） */
.cx-lab-btn {
  display: grid; align-items: center; justify-content: center; gap: 4px;
  min-width: 172px; width: 100%; padding: 12px 16px; border-radius: 9px; cursor: pointer; text-align: left;
  border: 1px solid rgba(201, 169, 97, .28); background: rgba(201, 169, 97, .04);
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .14em; color: rgba(244, 238, 228, .75);
  transition: .3s; backdrop-filter: blur(10px);
}
.cx-lab-btn:hover { border-color: rgba(201, 169, 97, .7); background: rgba(201, 169, 97, .1); color: #fff; transform: translateY(-2px); }
.cx-lab-btn.on { border-color: rgba(232, 208, 155, .9); background: rgba(201, 169, 97, .16); color: #fff; }
.cx-lab-btn small { font-family: var(--serif); font-size: 10.5px; letter-spacing: .04em; color: rgba(244, 238, 228, .4); }
.cx-lab-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cx-lab-ro { border: 1px solid rgba(255, 255, 255, .07); border-radius: 8px; padding: 11px 13px; background: rgba(255, 255, 255, .02); }
.cx-lab-ro span { display: block; font-family: var(--latin); font-size: 8px; letter-spacing: .22em; color: rgba(201, 169, 97, .55); margin-bottom: 5px; }
.cx-lab-ro b { font-family: var(--serif); font-weight: 500; font-size: 16px; color: #fdf8ef; }
.cx-lab-bar { height: 3px; background: rgba(255, 255, 255, .07); border-radius: 2px; overflow: hidden; }
.cx-lab-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a961, #e8d09b); transition: width .12s; }
.cx-lab-res { font-family: var(--serif); font-size: 12.5px; line-height: 1.9; min-height: 52px; color: rgba(232, 208, 155, .85); margin: 0; }
/* 注脚。原先同时吃到 site.css 的 .cap（字距 / 大写），这里写全 */
.cx-lab-cap {
  font-family: var(--serif); font-size: 11px; line-height: 1.85; color: rgba(244, 238, 228, .34);
  letter-spacing: .2em; text-transform: uppercase; margin: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06);
}
.cx-lab-warn { font-family: var(--serif); font-size: 11.5px; letter-spacing: .06em; color: rgba(198, 108, 90, .8); margin: 0; min-height: 16px; }
.cx-lab-reset {
  padding: 9px 18px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(198, 108, 90, .45);
  background: rgba(198, 108, 90, .06); font-family: var(--serif); font-size: 11.5px; letter-spacing: .18em;
  color: #d68c78; transition: .3s;
}
.cx-lab-reset:hover { border-color: rgba(226, 150, 130, .9); color: #f2c4b4; }
@media (max-width: 880px) { .cx-lab-body { grid-template-columns: 1fr; } }