/* ============================================================
   REACTOR · Components (见 course/DESIGN-SYSTEM.md §4)
   ============================================================ */

/* ── 4.1 Nameplate 铭牌 ── */
.nameplate{display:flex;align-items:center;gap:calc(var(--u)*1.5);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2)}
.nameplate .tag{display:inline-flex;align-items:center;gap:.4em;
  padding:.2em .55em;border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--accent)}
.nameplate .rule{flex:1;height:1px;background:
  repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px)}
.nameplate .rev{color:var(--text-mute)}

/* ── 4.3 Glass panel 玻璃面板（暴露结构：四角螺丝孔）── */
.glass{position:relative;background:color-mix(in srgb,var(--panel) 90%,transparent);
  border:1px solid var(--glass-brd);border-radius:var(--radius-panel);
  padding:calc(var(--u)*3.5)}
.glass::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--glass-hi),transparent)}
/* 四角螺丝孔 */
.glass.bolted::after{content:"";position:absolute;inset:8px;pointer-events:none;border-radius:2px;
  background:
    radial-gradient(circle 2px at 0 0,var(--line-2) 98%,transparent) 0 0/8px 8px no-repeat,
    radial-gradient(circle 2px at 100% 0,var(--line-2) 98%,transparent) 100% 0/8px 8px no-repeat,
    radial-gradient(circle 2px at 0 100%,var(--line-2) 98%,transparent) 0 100%/8px 8px no-repeat,
    radial-gradient(circle 2px at 100% 100%,var(--line-2) 98%,transparent) 100% 100%/8px 8px no-repeat}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);padding:.7em 1.1em;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn-primary{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent) inset,
             0 0 16px color-mix(in srgb,var(--accent-glow) 30%,transparent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.btn .arrow{font-family:var(--font-mono)}

/* ── 4.8 Callout 旁注块（三型）── */
.callout{position:relative;border-left:2px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  padding:calc(var(--u)*2) calc(var(--u)*2.5);border-radius:0 var(--radius) var(--radius) 0;
  margin:calc(var(--u)*3) 0;font-size:.96rem}
.callout .co-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.5em}
.callout.myth   {--accent:var(--red);--accent-glow:var(--red-glow)}
.callout.intuit {--accent:var(--blue);--accent-glow:var(--blue-glow)}
.callout.applied{--accent:var(--yellow);--accent-glow:var(--yellow-glow)}

/* ── 4.4 LED readout 读出屏 ── */
.readout{font-family:var(--font-mono);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:calc(var(--u)*1.5) calc(var(--u)*2);color:var(--accent);
  text-shadow:0 0 8px color-mix(in srgb,var(--accent-glow) 40%,transparent);position:relative;overflow:hidden}
.readout::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,color-mix(in srgb,var(--text) 8%,transparent) 2px 3px)}
:root[data-theme="light"] .readout{text-shadow:none}
.readout .big{font-size:1.8rem;font-weight:700;letter-spacing:.04em}

/* ── 4.5 Toggle bank 拨杆组（主题/参数切换）── */
.toggle-bank{display:inline-flex;gap:2px;border:1px solid var(--line-2);
  border-radius:var(--radius);padding:2px;background:var(--bg-2)}
.toggle-bank button{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);background:transparent;border:0;
  padding:.45em .7em;cursor:pointer;border-radius:1px;transition:.15s}
.toggle-bank button[aria-pressed="true"]{color:var(--bg);background:var(--accent)}

/* ── Module frame（交互模块的仪器外壳）── */
.module{position:relative;border:1px solid var(--line);border-radius:var(--radius-panel);
  background:var(--bg-2);margin:calc(var(--u)*4) 0;overflow:hidden}
/* engineering registration ticks in the corners */
.module::before,.module::after{content:"";position:absolute;width:12px;height:12px;z-index:2;
  border:1px solid var(--accent);opacity:.55;pointer-events:none}
.module::before{top:6px;left:6px;border-right:0;border-bottom:0}
.module::after{bottom:6px;right:6px;border-left:0;border-top:0}
.module>.module-head{display:flex;align-items:center;gap:calc(var(--u)*1.5);
  padding:calc(var(--u)*1.5) calc(var(--u)*2);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);background:var(--panel)}
.module>.module-head::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px var(--accent-glow),0 0 12px var(--accent-glow);
  animation:led-pulse 2.4s ease-in-out infinite;flex:none}
.module>.module-head .fig{color:var(--accent)}
.module>.module-head .spacer{flex:1}
.module .module-body{padding:calc(var(--u)*3)}
.module .controls{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2.5) calc(var(--u)*4);
  align-items:flex-end;margin-bottom:calc(var(--u)*2)}
.control{display:flex;flex-direction:column;gap:.5em;min-width:150px}
.control label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);display:flex;justify-content:space-between}
.control label .val{color:var(--accent)}
.control input[type=range]{-webkit-appearance:none;appearance:none;height:3px;
  background:var(--line-2);border-radius:2px;outline:none}
.control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--accent);cursor:pointer;
  box-shadow:0 0 8px var(--accent-glow)}
.control input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 8px var(--accent-glow)}
.module canvas{width:100%;background:var(--bg-2);border-radius:var(--radius)}
.module .legend{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2);margin-top:var(--u);
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-2)}
.module .legend .k{display:inline-flex;align-items:center;gap:.4em}
.module .legend .k::before{content:"";width:10px;height:2px;background:var(--_k,currentColor)}
.noscript-fallback{padding:calc(var(--u)*3);color:var(--text-2);font-size:.9rem}

/* ── Hero（首页/课程头）── */
.hero{padding-block:calc(var(--u)*8) calc(var(--u)*5)}
.hero .kicker{margin-bottom:calc(var(--u)*2)}
.hero .lede{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--text-2);max-width:60ch;
  margin-top:calc(var(--u)*3)}

/* ── 面包屑 / 前后节点 ── */
.prereq-row{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.5);align-items:center;
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-2)}
.prereq-row a{padding:.3em .6em;border:1px solid var(--line);border-radius:var(--radius)}

/* ── 卡片网格（分支页/案例）── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:calc(var(--u)*2)}
.card{border:1px solid var(--line);border-radius:var(--radius-panel);padding:calc(var(--u)*2.5);
  background:var(--card);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .num{font-family:var(--font-mono);font-size:.7rem;color:var(--accent);letter-spacing:.12em}
.card h3{margin:.4em 0 .3em}
.card p{font-size:.86rem;color:var(--text-2);margin:0}

.theme-toggle{gap:.5em;padding:.55em .8em}
.theme-toggle .tt-label{letter-spacing:.1em}

@media (max-width:720px){
  /* 移动端 header 恒为一行(用户裁决,禁折行):LED+REACTOR 居左,三个导航链接与
     明暗按钮同排靠右。手段=收紧 brand 字号/LED 尺寸 + 压 nav gap/字距 +
     明暗按钮只留 ◑ 藏文字。触摸目标≥40px:nav 链接与按钮给 min-height:40px,
     并把 header padding-block 压到 6px 抵消,保持 header 不臃肿。 */
  .site-head{flex-wrap:nowrap;gap:8px;padding-block:6px}
  .site-head .brand{flex:0 0 auto;font-size:.82rem;gap:6px}
  .site-head .brand .glyph-strip{gap:4px}
  .site-head .brand .glyph-strip .led{width:5px;height:5px}
  .site-head nav{margin-left:auto;flex:0 1 auto;min-width:0;gap:10px}
  .site-head nav a{font-size:.62rem;letter-spacing:.02em;white-space:nowrap;
    min-height:40px;display:inline-flex;align-items:center}
  .theme-toggle{padding:.5em;min-width:40px;min-height:40px;justify-content:center;gap:0}
  .theme-toggle .tt-label{display:none}
  .module .controls{gap:var(--u) calc(var(--u)*2)}
  /* 正文移动端保持自然左对齐(用户裁决 2026-07-22:不要 justify 硬撑满,
     中文字距被强行拉开很难看)。左右留白相等靠 .wrap 的对称 padding 保证,
     右缘的『锯齿』是中文整字换行的自然形态,接受即可。 */
}

/* ============================================================
   W11a · Module kit 扩容（presets / stepper / tabs / compare /
   annot / miniTable）+ 三段式 explorable + provenance/timeline/quiz
   动画纪律：只有 opacity/transform 参与过渡；发光一律静态阴影。
   ============================================================ */

/* ── presets 场景预设 chip 组 ── */
.preset-bank{display:flex;flex-wrap:wrap;gap:6px}
.preset-bank button{display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:.5em .8em;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.preset-bank button .pk{color:var(--accent)}
.preset-bank button:hover{border-color:var(--accent);color:var(--text)}
.preset-bank button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* ── stepper 分步演示器 ── */
.stepper-bar{display:flex;align-items:center;gap:calc(var(--u)*2);margin-top:calc(var(--u)*2);
  padding:calc(var(--u)*1.5);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.stepper-bar .step-btn{padding:.5em .9em;font-size:.66rem}
.stepper-bar .step-btn:disabled{opacity:.35;cursor:default}
.stepper-bar .step-btn:disabled:hover{border-color:var(--line-2);color:var(--text)}
.step-dots{display:flex;gap:7px;align-items:center;flex:1;justify-content:center}
.step-dots .dot{width:8px;height:8px;padding:0;border:1px solid var(--line-2);border-radius:50%;
  background:transparent;cursor:pointer;transition:background .15s,border-color .15s}
.step-dots .dot.done{background:var(--line-2)}
.step-dots .dot.cur{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 6px var(--accent-glow)} /* 静态发光，不做关键帧 */
.step-counter{font-size:.7rem;color:var(--text-2);letter-spacing:.08em}

/* ── tabs 面板切换 ── */
.tab-bar{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:calc(var(--u)*2)}
.tab-bar button{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);background:transparent;border:0;border-bottom:2px solid transparent;
  padding:.7em 1em;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}
.tab-bar button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ── compare A/B 并排画布 / 并排文本 ── */
.compare-duo{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2)}
.duo-cell .label{margin-bottom:6px}
.duo-cell canvas{width:100%}
.duo-text{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3)}
.duo-text>div{min-width:0}

/* ── annot 画布标注层 ── */
.annot-wrap{position:relative}
.annot-layer{position:absolute;inset:0;pointer-events:none;font-family:var(--font-mono)}
.annot-pin{position:absolute;display:flex;align-items:center;gap:6px}
.annot-pin .led{width:8px;height:8px;flex:none}
.annot-pin.left{flex-direction:row-reverse;transform:translateX(-100%)}
.annot-pin.up{flex-direction:column-reverse;align-items:flex-start;transform:translateY(-100%)}
.annot-pin.down{flex-direction:column;align-items:flex-start}
.annot-bubble{font-size:.64rem;letter-spacing:.06em;color:var(--text);
  background:color-mix(in srgb,var(--bg) 85%,transparent);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:.25em .5em;white-space:nowrap}
.annot-box{position:absolute;border:1px dashed var(--accent);border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.annot-box .annot-tag{position:absolute;top:-1.7em;left:-1px;font-size:.62rem;letter-spacing:.08em;
  color:var(--accent);white-space:nowrap}

/* ── miniTable 紧凑数据表 ── */
.mini-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.72rem}
.mini-table th{text-align:left;padding:.5em .8em;color:var(--text-2);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;border-bottom:1px solid var(--line-2)}
.mini-table td{padding:.45em .8em;border-bottom:1px solid var(--line);color:var(--text-2)}
.mini-table tr.hi td{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* ── opt-group 选项组（quiz 判分 + explorable 预测共用）── */
.opt-group{margin-bottom:calc(var(--u)*2)}
.opt-q{font-family:var(--font-sans);font-size:1rem;margin-bottom:10px}
.opt-list{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;align-items:center;gap:10px;text-align:left;font:inherit;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--line-2)}
.opt .led{flex:none}
.opt.sel{border-color:var(--accent)}
.opt.ok{--accent:var(--green);--accent-glow:var(--green-glow);border-color:var(--green)}
.opt.no{--accent:var(--red);--accent-glow:var(--red-glow);border-color:var(--red)}
.opt-expl{margin-top:10px;font-size:.84rem;color:var(--text-2);display:none}
.opt-expl .t-ok{color:var(--green)}
.opt-expl .t-no{color:var(--red)}

/* ── quiz 计分条 ── */
.quiz-score{display:flex;align-items:center;gap:12px;margin-top:calc(var(--u)*2);
  padding-top:calc(var(--u)*1.5);border-top:1px solid var(--line)}
.quiz-score .leds{display:flex;gap:6px}
.quiz-score .led.q-ok{--accent:var(--green);--accent-glow:var(--green-glow)}
.quiz-score .led.q-no{--accent:var(--red);--accent-glow:var(--red-glow)}
.quiz-score .qs-text{font-size:.72rem;color:var(--text-2)}

/* ── explorable 三段式：预测→操作→揭示 ── */
.phase-tag{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:calc(var(--u)*1.5)}
.phase-tag .led{width:7px;height:7px}
.predict-gate{border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel);
  padding:calc(var(--u)*2);margin-bottom:calc(var(--u)*2)}
.predict-gate .opt-group{margin-bottom:0}
.stage{position:relative;margin-bottom:calc(var(--u)*2)}
.stage .stage-inner{transition:opacity .3s}
.stage:not(.armed) .stage-inner{opacity:.28;pointer-events:none;user-select:none}
.shutter{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);text-align:center;padding:0 16px;transition:opacity .3s}
.stage.armed .shutter{opacity:0;pointer-events:none}
.reveal-panel{margin-top:calc(var(--u)*1.5);border-left:2px solid var(--accent);
  padding:calc(var(--u)*1.5) calc(var(--u)*2);border-radius:0 var(--radius) var(--radius) 0;
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.rv-row{display:flex;gap:12px;align-items:baseline;margin-bottom:6px;font-size:.92rem}
.rv-row .label{flex:none}
.rv-verdict{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.74rem;margin:8px 0 10px}
.rv-verdict .led{width:7px;height:7px}
.rv-verdict.ok{color:var(--green)}
.rv-verdict.ok .led{--accent:var(--green);--accent-glow:var(--green-glow)}
.rv-verdict.no{color:var(--red)}
.rv-verdict.no .led{--accent:var(--red);--accent-glow:var(--red-glow)}
.rv-read{font-size:.92rem}
.rv-plain{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.rv-plain .label{color:var(--accent);display:block;margin-bottom:6px}
.rv-plain-body{font-size:.9rem;color:var(--text-2)}

/* ── explorable steps：证据抽屉 ── */
.ev{margin-top:calc(var(--u)*2);border-top:1px dashed var(--line);padding-top:calc(var(--u)*1.5)}
.ev-toggle{font-size:.62rem;padding:.4em .7em}
.ev-body{display:none;margin-top:calc(var(--u)*1.5);font-size:.86rem;color:var(--text-2)}
.ev.open .ev-body{display:block}

/* ── explorable cards：卡片细节抽屉 ── */
.card .card-more{margin-top:10px;background:none;border:0;cursor:pointer;color:var(--accent);padding:0;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.card .card-detail{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:.82rem;color:var(--text-2)}
.card.open .card-detail{display:block}

/* ── explorable matrix：atlas 表 + 十字联动高亮 ── */
.atlas-table{width:100%;border-collapse:collapse;font-size:.86rem}
.atlas-table th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);text-align:left;padding:.6em .9em;border-bottom:1px solid var(--line-2);font-weight:500}
.atlas-table td{padding:.6em .9em;border-bottom:1px solid var(--line);color:var(--text-2);
  transition:background .15s,color .15s}
.atlas-table tr.hl-row>*{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.atlas-table .hl-col{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.atlas-table tr.pinned>*{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.atlas-table tr.pinned td{color:var(--text)}

/* ── provenance：翻卡 ── */
.prov-card{position:relative;min-height:180px;border:1px solid var(--line);border-radius:var(--radius-panel);
  background:var(--card);cursor:pointer;text-align:left;font:inherit;color:inherit;perspective:900px}
.prov-card .fc-inner{position:relative;width:100%;height:100%;min-height:178px;
  transition:transform .55s cubic-bezier(.5,0,.2,1);transform-style:preserve-3d}
.prov-card .fc-face{position:absolute;inset:0;backface-visibility:hidden;padding:16px;
  display:flex;flex-direction:column;gap:8px}
.prov-card .fc-front-text{font-family:var(--font-sans);font-size:.98rem;line-height:1.5}
.prov-card .fc-flip-hint{margin-top:auto;opacity:.55}
.prov-card .fc-back{transform:rotateY(180deg);background:var(--panel);
  border-radius:var(--radius-panel);overflow:visible}
.prov-card .fc-back-text{font-size:.86rem;line-height:1.55}
.prov-card .fc-quote-btn{align-self:flex-start;margin-top:auto;font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:none;
  border:1px solid var(--line-2);border-radius:var(--radius);padding:.4em .7em;cursor:pointer;
  transition:border-color .15s}
.prov-card .fc-quote-btn:hover{border-color:var(--accent)}
.prov-card .fc-quote{display:none;margin:8px 0 0;padding:10px 12px;border-left:2px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);font-size:.82rem;line-height:1.6}

.prov-card.q-open .fc-quote{display:block}
.prov-card .fc-cite{display:block;margin-top:8px}

/* ── provenance：对照高亮 + 证据链 ── */
.contrast{margin-top:calc(var(--u)*3);transition:opacity .3s}
.prov-chain{margin-top:calc(var(--u)*3);transition:opacity .3s}
.contrast.locked,.prov-chain.locked{opacity:.35;pointer-events:none}
.contrast-row{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.7}
.ct-tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding-top:.35em}
.ct-a{color:var(--red)}
.ct-b{color:var(--green)}
mark.hl-a{background:color-mix(in srgb,var(--red) 20%,transparent);color:var(--text);
  padding:.06em .28em;border-radius:var(--radius)}
mark.hl-b{background:color-mix(in srgb,var(--green) 20%,transparent);color:var(--text);
  padding:.06em .28em;border-radius:var(--radius)}
.ct-note{margin-top:10px;opacity:.8}
.chain-track{display:flex;overflow-x:auto;padding-bottom:6px}
.chain-node{flex:0 0 auto;min-width:132px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  text-align:left;font:inherit;background:transparent;border:0;border-left:2px solid var(--line);
  padding:8px 14px 8px 10px;cursor:pointer;color:var(--text-2);transition:border-color .15s,color .15s}
.chain-node .cy{font-family:var(--font-mono);font-size:.8rem;color:var(--accent)}
.chain-node .cn-t{font-size:.76rem;max-width:150px}
.chain-node.cur{border-left-color:var(--accent);color:var(--text)}
.chain-node.past{opacity:.7}
.chain-node.myth{--accent:var(--red);--accent-glow:var(--red-glow)}
.chain-detail{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius-panel);
  background:var(--panel);padding:calc(var(--u)*2);min-height:64px}

/* ── timeline：可拖动时间轴 ── */
.tl-track{position:relative;display:flex;overflow-x:auto;padding:0 0 12px;
  border-bottom:1px solid var(--line);cursor:grab}
.tl-track.dragging{cursor:grabbing;user-select:none}
.tl-node{flex:0 0 auto;min-width:120px;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:6px 14px 6px 0;font:inherit;color:var(--text-2);position:relative}
.tl-node .led{position:absolute;left:0;bottom:-19px}
.tl-node .tl-date{font-family:var(--font-mono);font-size:.8rem;color:var(--accent)}
.tl-node .tl-title{font-size:.78rem;margin-top:4px;max-width:150px}
.tl-node.past{opacity:.65}
.tl-node.cur{color:var(--text)}
.tl-node.cur .tl-date{text-shadow:0 0 8px color-mix(in srgb,var(--accent-glow) 45%,transparent)}
:root[data-theme="light"] .tl-node.cur .tl-date{text-shadow:none}
.tl-more{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.tl-more-btn{font-size:.62rem;padding:.4em .7em}
.tl-more-body{display:none;margin-top:10px;font-size:.86rem;color:var(--text-2)}
.tl-more.open .tl-more-body{display:block}

@media (max-width:720px){
  .compare-duo,.duo-text{grid-template-columns:1fr}
  .stepper-bar{flex-wrap:wrap;gap:var(--u)}
  .contrast-row{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .prov-card .fc-inner,.stage .stage-inner,.shutter,.contrast,.prov-chain{transition:none}
}

/* ============================================================
   W11b · 招牌定制模拟器升级
   （predict 门直接复用上方 explorable 三段式的样式类；
    这里只补 stepper 讲解面板与「当前杠杆」聚焦高亮。
    动画纪律不变：只有颜色/阴影参与 .15s 过渡，无布局位移。）
   ============================================================ */

/* ── step-note：stepper 讲解面板 / 分步论证的旁白框 ── */
.step-note{margin-top:calc(var(--u)*2);border:1px solid var(--line);border-radius:var(--radius-panel);
  background:var(--panel);padding:calc(var(--u)*2);font-size:.88rem;color:var(--text-2);line-height:1.7}
.step-note .label{color:var(--accent);display:block;margin-bottom:8px}
.step-note p{margin:.35em 0}
.step-note .case-line{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}

/* ── lever-focus：stepper 正在讲解的那根滑块（box-shadow 假 padding，零布局位移）── */
.control.lever-focus{background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent);border-radius:var(--radius);
  transition:background .15s,box-shadow .15s}
.control.lever-focus label{color:var(--accent)}


/* ===== steps 堆叠式论证链(v2):LED 脊柱依次点亮 ===== */
.steps-stack{display:flex;flex-direction:column}
.step-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 14px;position:relative;
  padding:0 0 20px;opacity:.55;transition:opacity .35s}
.step-row.lit{opacity:1}
.step-spine{position:relative;display:flex;justify-content:center;padding-top:5px}
.step-row:not(:last-child) .step-spine::after{content:"";position:absolute;top:22px;bottom:-2px;
  left:50%;width:2px;transform:translateX(-50%);background:var(--line);transition:background .35s}
.step-row.lit:not(:last-child) .step-spine::after{background:color-mix(in srgb,var(--accent) 55%,var(--line))}
.step-row .step-k{color:var(--accent);margin-bottom:6px}
.step-row .read{font-size:.94rem}

/* 移动端导航精简(用户裁决):只留 品牌 · 天赋树(返回) · 明暗切换 */
@media (max-width:720px){
  .site-head nav a[href="/lesson/N00.html"],
  .site-head nav a[href="/atlas.html"]{display:none}
  .site-head nav a{font-size:.72rem;letter-spacing:.08em}
}


/* 页脚署名:回主站的出口 */
.foot-by{display:inline-flex;align-items:center;gap:.6em;flex-wrap:wrap}
.foot-by a{color:var(--text-2);border-bottom:1px solid var(--line-2);padding-bottom:1px;
  transition:color .15s,border-color .15s}
.foot-by a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.foot-by .sep{color:var(--text-mute)}


/* 语言切换:与主题按钮同形制的胶囊 */
.lang-toggle{gap:.45em;padding:.55em .8em;text-decoration:none}
.lang-toggle:hover{text-decoration:none}
.lang-toggle .tt-label{letter-spacing:.1em;font-weight:700}
@media (max-width:720px){
  /* 手机 header 只留 品牌 · 天赋树 · 语言 · 明暗 */
  .lang-toggle{padding:.5em .55em}
  .lang-toggle .tt-glyph{display:none}
}