/* ============================================================
   ch13「语言通神」章节专属样式
   境界：结丹三层·语言通神 · 靛蓝 #2563EB
   Boss：幻觉之影 · 暗蓝灰 #475569
   导师：高斯老祖（avatar_king.jpg）
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   崩塌冲突：赤红 var(--ch-boss)
   第一刻痕（自回归失神）：靛蓝微光 #60A5FA
   第二刻痕（长上下文遗忘）：赤红 #DC2626
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   贯穿机制：幻账(幻觉之影记账) / 推理天平(准确vs创造) / 排除刻痕(此路不通录)
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：靛蓝 ---------- */
:root, :root[data-theme="light"] {
  --accent: #2563EB;
  --accent-ink: #1D4ED8;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --glass-line: rgba(37, 99, 235, 0.22);
  --glow: 0 0 18px rgba(37, 99, 235, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #60A5FA;
  --accent-ink: #2563EB;
  --accent-soft: rgba(37, 99, 235, 0.16);
  --glass-line: rgba(96, 165, 250, 0.22);
  --glow: 0 0 22px rgba(37, 99, 235, 0.34);
  --on-accent: #0A0F1A;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #475569;          /* 幻觉之影 · 暗蓝灰 */
  --ch-boss-ink: #94A3B8;      /* 影灰 */
  --ch-boss-soft: rgba(71, 85, 105, 0.26);
  --ch-boss-line: rgba(71, 85, 105, 0.50);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金 */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-conflict: var(--ch-boss);      /* 崩塌冲突赤红 */
  --ch-conflict-soft: rgba(239, 68, 68, 0.14);
  --ch-conflict-ink: #DC2626;
  --ch-indigo: #2563EB;        /* 靛蓝 · 境界色 */
  --ch-indigo-soft: rgba(37, 99, 235, 0.14);
  --ch-indigo-ink: #1D4ED8;
  /* 三条贯穿机制色 */
  --debt-red: var(--ch-boss);         /* 幻账赤红光页 */
  --debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #60A5FA;       /* 排除刻痕靛蓝微光 */
  --carve-soft: rgba(96, 165, 250, 0.14);
  --balance-acc: #2563EB;      /* 推理天平 准确性 靛蓝 */
  --balance-cre: var(--ch-amber);      /* 推理天平 创造性 金 */
  /* LLM 能力四象 */
  --cap-mem: #94A3B8;          /* 记忆 灰 */
  --cap-reason: #2563EB;       /* 推理 靛蓝（涌现） */
  --cap-trans: #06B6D4;        /* 翻译 青 */
  --cap-code: #10B981;         /* 编程 翠 */
  /* token / 采样 */
  --tok-hot: var(--ch-boss);          /* 高概率赤红 */
  --tok-warm: var(--ch-amber);         /* 中概率金 */
  --tok-cold: #60A5FA;         /* 低概率靛蓝 */
  --temp-low: #06B6D4;         /* 低温青（确定） */
  --temp-high: var(--ch-boss);        /* 高温赤（随机） */
  --greedy: #94A3B8;           /* 贪心解码灰 */
  --sample: #2563EB;           /* 采样靛蓝 */
  /* 架构三相 */
  --arch-enc: #38BDF8;         /* Encoder-only 天蓝 */
  --arch-encdec: var(--ch-amber);      /* Encoder-Decoder 琥珀 */
  --arch-dec: #2563EB;         /* Decoder-only 靛蓝 */
  /* ICL 三档 */
  --icl-zero: #94A3B8;
  --icl-one: #06B6D4;
  --icl-few: #2563EB;
  /* CoT */
  --cot-direct: var(--ch-boss);       /* 直接答 红 */
  --cot-chain: #10B981;        /* 思维链 翠 */
  /* RAG 流水线 */
  --rag-query: #06B6D4;        /* 查询 青 */
  --rag-retrieve: #2563EB;     /* 检索 靛蓝 */
  --rag-augment: #A855F7;      /* 增强 紫 */
  --rag-generate: var(--ch-epiphany);     /* 生成 金 */
  /* LoRA */
  --lora-full: var(--ch-boss);        /* 全量微调 红（贵） */
  --lora-low: #10B981;         /* LoRA 翠（省） */
  --lora-rank: var(--ch-epiphany);        /* rank 金 */
  --anomaly-crack: var(--ch-boss);    /* 崩塌裂纹红 */
  /* S9 Boss */
  --boss-face: #475569;        /* 影脸灰蓝 */
  --answer-correct: #2563EB;   /* 正解靛蓝光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  --jindan-gold: #FCD34D;      /* 金丹金 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
}

/* ---------- 开场（opening） ---------- */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
  background: radial-gradient(ellipse at center, var(--ch-bg-warm, #0E1430) 0%, var(--ch-bg-warm) 70%);
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--accent-soft), 0 0 24px var(--ch-indigo-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--balance-acc);
  background: rgba(37,99,235,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #balance-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #balance-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-indigo-ink); }
#carve-list p { font-size: 0.8rem; color: var(--carve-mark); margin: var(--sp-1) 0; }
#balance-list p { font-size: 0.8rem; color: var(--ch-boss-ink); margin: var(--sp-1) 0; }
.option.excluded { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(71,85,105,0.16); }
.sim-range, input[type="range"], .knob-range, select { accent-color: var(--accent); }
.btn-warn { border-color: var(--ch-warn); color: var(--ch-warn); }
.btn-warn:hover { background: rgba(239,68,68,0.12); }

/* ---------- 通用 knob 旋钮 ---------- */
.knob-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.knob-unit {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-width: 120px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.knob-unit:hover { border-color: var(--accent); }
.knob-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.1em; }
.knob-select {
  padding: 4px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1); font-family: var(--font-mono); font-size: 0.82rem;
  cursor: pointer;
}
.knob-select:focus { border-color: var(--accent); outline: none; }
/* 通用 toggle 按钮组 */
.toggle-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; margin: var(--sp-1) 0; }
.toggle-btn {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-2);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.toggle-btn:hover { border-color: var(--accent); color: var(--text-1); }
.toggle-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }

/* ============================================================
   S0 语言之门 · 能力预测挑战器
   ============================================================ */
.cmp-capability-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--ch-boss-ink);
  padding: var(--sp-2); letter-spacing: 0.06em; font-style: italic;
}
.cap-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cap-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.cap-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.cap-card.guessed { opacity: 1; border-color: var(--debt-red); background: var(--debt-soft); }
.cap-card.guessed.correct { border-color: var(--ch-indigo); background: var(--ch-indigo-soft); }
.cap-card .cc-icon { font-size: 1.3rem; }
.cap-card .cc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.cap-card .cc-hint { font-size: 0.62rem; color: var(--text-3); }
.cap-card[data-cap="mem"] { border-left: 3px solid var(--cap-mem); }
.cap-card[data-cap="reason"] { border-left: 3px solid var(--cap-reason); }
.cap-card[data-cap="trans"] { border-left: 3px solid var(--cap-trans); }
.cap-card[data-cap="code"] { border-left: 3px solid var(--cap-code); }
.conflict-popup {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.conflict-popup .cp-title { font-weight: 600; color: var(--debt-red); margin-bottom: 4px; }
.conflict-popup.right { border-color: var(--ch-indigo); background: var(--ch-indigo-soft); }
.conflict-popup.right .cp-title { color: var(--ch-indigo-ink); }
.debt-account {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
  font-size: 0.82rem; color: var(--text-2); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.debt-account .acct-line { margin: var(--sp-1) 0; }
.debt-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.capability-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-indigo);
  border-radius: var(--r-sm); background: var(--ch-indigo-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.capability-map h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); text-align: center; }
.map-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.map-node {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.7rem; text-align: center; color: var(--text-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.map-node.lit { opacity: 1; border-color: var(--ch-indigo); color: var(--ch-indigo-ink); background: var(--ch-indigo-soft); }

/* ============================================================
   S1 token 生成可视化器
   ============================================================ */
.cmp-token-gen { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.prompt-input-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.prompt-input-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.prompt-input-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.prompt-input-row input[type="text"] {
  flex: 1; min-width: 200px; padding: 6px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1); font-family: var(--font-mono); font-size: 0.85rem;
}
.prompt-input-row input[type="text"]:focus { border-color: var(--accent); outline: none; }
.token-gen-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.token-gen-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.token-gen-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.gen-text-box {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.92rem; color: var(--text-1);
  min-height: 44px; line-height: 1.7; word-break: break-all;
}
.gen-text-box .tok { display: inline-block; transition: all 300ms cubic-bezier(0.22,1,0.36,1); }
.gen-text-box .tok.new { color: var(--ch-indigo-ink); text-shadow: 0 0 8px var(--ch-indigo-soft); }
.temp-slider-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.temp-slider-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.temp-slider-row { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.78rem; color: var(--text-2); }
.temp-slider-row input[type="range"] { flex: 1; max-width: 280px; }
.temp-track {
  height: 8px; border-radius: 4px; margin: var(--sp-1) 0;
  background: linear-gradient(to right, var(--temp-low), var(--accent), var(--temp-high));
}

/* ============================================================
   S2 解码策略实验台
   ============================================================ */
.cmp-decode-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.decode-params-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.decode-params-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.decode-param-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: 0.78rem; color: var(--text-2); }
.decode-param-row label { min-width: 110px; font-family: var(--font-mono); }
.decode-param-row input[type="range"] { flex: 1; max-width: 220px; }
.decode-param-row .dp-val { min-width: 50px; font-family: var(--font-mono); color: var(--accent-ink); text-align: right; }
.decode-strategy-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-1); }
.strategy-btn[data-strat="greedy"].active { border-color: var(--greedy); color: var(--greedy); }
.strategy-btn[data-strat="topk"].active { border-color: var(--sample); color: var(--sample); }
.strategy-btn[data-strat="topp"].active { border-color: var(--rag-augment); color: var(--rag-augment); }
.decode-output-zone, .decode-dist-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.decode-output-zone h4, .decode-dist-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.decode-output-zone canvas, .decode-dist-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.decode-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-1); }
.decode-compare-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2);
  min-height: 50px;
}
.decode-compare-cell .dcc-label { font-size: 0.68rem; color: var(--text-3); margin-bottom: 4px; }
.decode-compare-cell.greedy { border-left: 3px solid var(--greedy); }
.decode-compare-cell.sample { border-left: 3px solid var(--sample); }

/* ============================================================
   S3 第一崩塌 · 幻觉之影
   ============================================================ */
.cmp-hallucination { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.halluc-replay-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--anomaly-crack); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06);
}
.halluc-replay-zone h4 { font-size: 0.82rem; color: var(--ch-warn); margin-bottom: var(--sp-1); }
.halluc-replay-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-1); }
.halluc-qa-box {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-1); line-height: 1.7;
}
.halluc-qa-box .hq-q { color: var(--accent-ink); }
.halluc-qa-box .hq-a { color: var(--text-1); margin-top: 4px; }
.halluc-qa-box .hq-a.halluc { color: var(--debt-red); border-left: 2px solid var(--debt-red); padding-left: 8px; }
.halluc-qa-box .hq-a.fact { color: var(--ch-ok); border-left: 2px solid var(--ch-ok); padding-left: 8px; }
.halluc-diagnosis {
  margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--ch-boss-line); border-radius: var(--r-xs);
  background: var(--ch-boss-soft); font-size: 0.78rem; color: var(--ch-boss-ink); font-style: italic;
  animation: shatterIn 500ms cubic-bezier(0.22,1,0.36,1);
}
.exclude-mark {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-size: 0.82rem; color: var(--ch-epiphany-ink);
  font-style: italic; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes shatterIn {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   S4 ICL 实验台
   ============================================================ */
.cmp-icl-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.icl-shot-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.icl-shot-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.icl-shot-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.shot-btn[data-shot="zero"].active { border-color: var(--icl-zero); color: var(--icl-zero); }
.shot-btn[data-shot="one"].active { border-color: var(--icl-one); color: var(--icl-one); }
.shot-btn[data-shot="few"].active { border-color: var(--icl-few); color: var(--icl-few); }
.icl-examples {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2);
  min-height: 60px; margin-bottom: var(--sp-2);
}
.icl-examples .ex-line { margin: 2px 0; }
.icl-examples .ex-tag { color: var(--accent-ink); }
.icl-test-zone, .icl-format-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.icl-test-zone h4, .icl-format-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.icl-test-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-1); font-size: 0.78rem; }
.icl-test-row .it-input { font-family: var(--font-mono); color: var(--text-1); }
.icl-test-row .it-arrow { color: var(--text-3); }
.icl-test-row .it-output { font-family: var(--font-mono); font-weight: 600; padding: 2px 8px; border-radius: var(--r-xs); }
.icl-test-row .it-output.pos { color: var(--ch-ok); background: rgba(34,197,94,0.10); }
.icl-test-row .it-output.neg { color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.icl-acc-bar {
  margin-top: var(--sp-1); height: 10px; border: 1px solid var(--glass-line); border-radius: 5px;
  background: var(--bg-elev); overflow: hidden;
}
.icl-acc-fill { height: 100%; background: var(--accent); transition: width 500ms cubic-bezier(0.22,1,0.36,1); }
.format-break-btn {
  padding: 6px 14px; border: 1px solid var(--ch-conflict); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--ch-conflict-ink); font-family: var(--font-mono); font-size: 0.76rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.format-break-btn:hover { background: var(--ch-conflict-soft); }
.format-break-btn.broken { background: var(--ch-conflict-soft); border-color: var(--ch-conflict); }

/* ============================================================
   S5 CoT 推理器
   ============================================================ */
.cmp-cot-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cot-mode-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.cot-btn[data-mode="direct"].active { border-color: var(--cot-direct); color: var(--cot-direct); }
.cot-btn[data-mode="chain"].active { border-color: var(--cot-chain); color: var(--cot-chain); }
.cot-q-zone, .cot-output-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cot-q-zone h4, .cot-output-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.cot-q-box {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-1);
}
.cot-step {
  padding: var(--sp-1) var(--sp-2); margin-bottom: 2px; border-left: 2px solid var(--cot-chain);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2);
  background: var(--bg-elev); opacity: 0; transform: translateX(-6px);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.cot-step.show { opacity: 1; transform: translateX(0); }
.cot-step.final { border-left-color: var(--ch-ok); color: var(--ch-ok); font-weight: 600; }
.cot-step.wrong { border-left-color: var(--cot-direct); color: var(--cot-direct); }
.cot-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cot-canvas-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S6 RAG 流水线可视化
   ============================================================ */
.cmp-rag-pipeline { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.rag-pipeline-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.rag-pipeline-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.rag-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); align-items: center; }
.rag-stage {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5;
}
.rag-stage.lit { opacity: 1; box-shadow: var(--glow); }
.rag-stage[data-stage="query"] { border-top: 3px solid var(--rag-query); }
.rag-stage[data-stage="query"].lit { border-color: var(--rag-query); background: rgba(6,182,212,0.10); }
.rag-stage[data-stage="retrieve"] { border-top: 3px solid var(--rag-retrieve); }
.rag-stage[data-stage="retrieve"].lit { border-color: var(--rag-retrieve); background: rgba(37,99,235,0.10); }
.rag-stage[data-stage="augment"] { border-top: 3px solid var(--rag-augment); }
.rag-stage[data-stage="augment"].lit { border-color: var(--rag-augment); background: rgba(168,85,247,0.10); }
.rag-stage[data-stage="generate"] { border-top: 3px solid var(--rag-generate); }
.rag-stage[data-stage="generate"].lit { border-color: var(--rag-generate); background: rgba(251,191,36,0.10); }
.rag-stage .rs-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.rag-stage .rs-desc { font-size: 0.62rem; color: var(--text-3); margin-top: 2px; }
.rag-arrow { text-align: center; color: var(--text-3); font-size: 1rem; }
.rag-compare-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.rag-compare-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.rag-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.rag-compare-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem; color: var(--text-2); min-height: 70px;
}
.rag-compare-cell .rcc-label { font-size: 0.68rem; color: var(--text-3); margin-bottom: 4px; font-family: var(--font-mono); }
.rag-compare-cell.norag { border-left: 3px solid var(--cot-direct); }
.rag-compare-cell.withrag { border-left: 3px solid var(--rag-generate); }
.rag-compare-cell .rcc-ans { font-family: var(--font-mono); color: var(--text-1); }
.rag-compare-cell .rcc-tag { font-size: 0.64rem; margin-top: 4px; }
.rag-compare-cell .rcc-tag.halluc { color: var(--debt-red); }
.rag-compare-cell .rcc-tag.grounded { color: var(--ch-ok); }

/* ============================================================
   S7 第二崩塌 · 长上下文之壁
   ============================================================ */
.cmp-longctx { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.longctx-replay-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--anomaly-crack); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06);
}
.longctx-replay-zone h4 { font-size: 0.82rem; color: var(--ch-warn); margin-bottom: var(--sp-1); }
.longctx-replay-zone input[type="range"] { max-width: 320px; }
.longctx-replay-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-1); }
.longctx-metrics { margin-top: var(--sp-1); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); font-size: 0.76rem; }
.longctx-metric { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.longctx-metric .lm-label { font-size: 0.68rem; color: var(--text-3); }
.longctx-metric .lm-value { font-family: var(--font-mono); color: var(--text-1); }
.longctx-diagnosis {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); animation: shatterIn 600ms cubic-bezier(0.22,1,0.36,1);
}
.longctx-diagnosis h4 { font-size: 0.82rem; color: var(--ch-boss-ink); margin-bottom: var(--sp-2); }
.longctx-diagnosis .ld-text { font-size: 0.8rem; color: var(--text-2); line-height: 1.6; }
.longctx-diagnosis .ld-text b { color: var(--debt-red); }

/* ============================================================
   S8 LoRA 可视化器
   ============================================================ */
.cmp-lora-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.lora-compare-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.lora-compare-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.lora-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.lora-compare-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center;
}
.lora-compare-cell.full { border-left: 3px solid var(--lora-full); }
.lora-compare-cell.lora { border-left: 3px solid var(--lora-low); }
.lora-compare-cell .lcc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.lora-compare-cell .lcc-params { font-family: var(--font-mono); font-size: 1.1rem; margin: 4px 0; }
.lora-compare-cell.full .lcc-params { color: var(--lora-full); }
.lora-compare-cell.lora .lcc-params { color: var(--lora-low); }
.lora-compare-cell .lcc-desc { font-size: 0.66rem; color: var(--text-3); }
.lora-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.lora-canvas-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.lora-canvas-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.lora-rank-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.lora-rank-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.lora-rank-row { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.78rem; color: var(--text-2); }
.lora-rank-row input[type="range"] { flex: 1; max-width: 240px; }
.lora-rank-readout { margin-top: var(--sp-1); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); }
.lora-rank-readout b { color: var(--lora-rank); }

/* ============================================================
   S9 Boss 战 · 幻觉之影
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.boss-figure { width: 100%; display: flex; justify-content: center; margin-bottom: var(--sp-2); }
#s9-boss-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--bg-elev); }
.q-progress-bar { width: 100%; height: 6px; border: 1px solid var(--glass-line); border-radius: 3px; background: var(--bg-sunk); margin-bottom: var(--sp-2); overflow: hidden; }
.q-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.debt-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.debt-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--debt-red); font-style: normal; }
.q-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); margin-bottom: var(--sp-2); }
.q-text { font-size: 0.95rem; color: var(--text-1); margin-bottom: var(--sp-2); }
.q-account { font-size: 0.78rem; color: var(--ch-boss-ink); font-style: italic; padding: var(--sp-1) var(--sp-2); border-left: 2px solid var(--ch-boss-line); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.q-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-size: 0.85rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.q-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.q-option.correct { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); }
.q-option.eliminated { opacity: 0.3; cursor: default; text-decoration: line-through; border-color: var(--answer-eliminated); background: rgba(71,85,105,0.16); transform: none; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; min-height: 32px;
  margin-bottom: var(--sp-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.right { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); }
.q-feedback.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); font-style: italic; }
.carve-emergence {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--carve-mark); border-radius: var(--r-sm);
  background: var(--carve-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); }
.carve-emergence .carve-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence .carve-item.lit {
  border-color: var(--carve-mark); color: var(--ch-indigo-ink);
  background: var(--carve-soft); box-shadow: 0 0 8px var(--carve-soft);
}
.carve-emergence .carve-item.net {
  border-color: var(--net-gold); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.fog-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--breakthrough); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-style: italic; color: var(--ch-epiphany-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S10 顿悟 · 语言通神 + 知识图谱
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.inscription-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.inscription-zone h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.inscription-text {
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-1); line-height: 1.8;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev);
}
.inscription-text .it-line { margin: var(--sp-1) 0; }
.inscription-text .it-line .it-key { color: var(--ch-epiphany-ink); font-weight: 600; }
.kg-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.kg-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.kg-canvas-zone { width: 100%; display: flex; justify-content: center; }
.kg-canvas-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.puzzle-area { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.puzzle-piece {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: default;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.3;
}
.puzzle-piece.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.puzzle-piece .pp-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece .pp-tag { font-size: 0.62rem; color: var(--text-3); }
.depth-readout { padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); text-align: center; min-height: 28px; }

/* ---------- 境界达成（结丹三层圆满）---------- */
.realm-achieved {
  margin-top: var(--sp-3); text-align: center; padding: var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--ch-indigo-soft), var(--ch-epiphany-soft));
}
.realm-breakthrough {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-2); flex-wrap: wrap;
}
.rb-stage {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  opacity: 0; transition: all 800ms cubic-bezier(0.22,1,0.36,1);
}
.rb-from { color: var(--ch-indigo-ink); border: 1px solid var(--ch-indigo); background: var(--ch-indigo-soft); }
.rb-to {
  color: var(--jindan-gold); border: 1px solid var(--jindan-gold);
  background: rgba(252,211,77,0.16);
  text-shadow: 0 0 16px rgba(252,211,77,0.6);
}
.rb-arrow {
  font-size: 1.4rem; color: var(--ch-epiphany); opacity: 0;
  animation: arrowPulse 1.6s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(6px); opacity: 1; }
}
.rb-stage.show { opacity: 1; }
.rb-stage.glow { box-shadow: 0 0 32px rgba(252,211,77,0.5); }
.realm-glow {
  font-family: var(--font-mono); font-size: 1.05rem; color: var(--ch-epiphany-ink); letter-spacing: 0.2em;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--ch-indigo-soft); }
  50% { box-shadow: 0 0 40px rgba(252,211,77,0.4); }
}
.realm-achieved.active { animation: realmGlow 3s ease-in-out infinite; }

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .option-grid { grid-template-columns: 1fr; }
  .cap-cards { grid-template-columns: repeat(2, 1fr); }
  .map-nodes { grid-template-columns: repeat(2, 1fr); }
  .rag-stages { grid-template-columns: 1fr 1fr; }
  .rag-compare-row, .decode-compare-row, .lora-compare-row { grid-template-columns: 1fr; }
  .longctx-metrics { grid-template-columns: 1fr; }
  .puzzle-area { grid-template-columns: repeat(2, 1fr); }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
  .realm-breakthrough { gap: var(--sp-1); }
  .decode-param-row label { min-width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved.active { animation: none; }
  .rb-arrow { animation: none; }
  .conflict-popup, .debt-account, .capability-map, .exclude-mark, .halluc-diagnosis,
  .longctx-diagnosis, .carve-emergence, .fog-collapse, .inscription-zone, .kg-zone, .puzzle-piece,
  .cot-step, .rag-stage, .map-node { animation: none; }
  .cap-card:hover, .q-option:hover { transform: none; }
}