/* ============================================================
   ch12「预训练范式：大规模知识的炼丹术」章节专属样式
   境界：结丹二层·预训成丹 · 翠金 var(--opt-correct)
   Boss：过拟合之雾 · 灰绿 #6B7280
   导师：高斯老祖
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   崩塌冲突：赤红 var(--ch-boss)
   第一刻痕（背题不学）：过拟合雾灰 #6B7280
   第二刻痕（小模型无能）：暗红 #DC2626
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：翠金 ---------- */
:root, :root[data-theme="light"] {
  --accent: #059669;
  --accent-ink: #047857;
  --accent-soft: rgba(5, 150, 105, 0.12);
  --glass-line: rgba(5, 150, 105, 0.22);
  --glow: 0 0 18px rgba(5, 150, 105, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #34D399;
  --accent-ink: #10B981;
  --accent-soft: rgba(16, 185, 129, 0.16);
  --glass-line: rgba(52, 211, 153, 0.22);
  --glow: 0 0 22px rgba(16, 185, 129, 0.34);
  --on-accent: #04120F;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #6B7280;          /* 过拟合之雾 · 灰绿 */
  --ch-boss-ink: #9CA3AF;      /* 雾灰亮 */
  --ch-boss-soft: rgba(107, 114, 128, 0.22);
  --ch-boss-line: rgba(107, 114, 128, 0.42);
  --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-emerald: #059669;       /* 翠金 · 境界色 */
  --ch-emerald-soft: rgba(5, 150, 105, 0.14);
  --ch-emerald-ink: #047857;
  /* 三条贯穿机制色 */
  --debt-red: var(--ch-boss);         /* 雾账赤红光页 */
  --debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #34D399;       /* 排除刻痕翠金微光 */
  --carve-soft: rgba(52, 211, 153, 0.14);
  --scale-data: #059669;       /* 规模天平 · 数据量翠金 */
  --scale-param: #6B7280;      /* 规模天平 · 参数量雾灰 */
  /* 预训练四因素色 */
  --factor-arch: #A78BFA;      /* 模型架构紫 */
  --factor-data: #059669;      /* 数据质量翠金（正解） */
  --factor-compute: #06B6D4;   /* 计算量青 */
  --factor-seed: #94A3B8;      /* 随机种子灰（陪跑） */
  /* 范式对比 */
  --paradigm-old: var(--ch-boss);     /* 传统单任务红 */
  --paradigm-new: #059669;     /* 预训练+微调翠金 */
  /* BERT / GPT */
  --bert-bidir: #059669;       /* BERT 双向翠金 */
  --gpt-causal: var(--ch-amber);       /* GPT 因果金 */
  --mask-token: var(--ch-epiphany);       /* [MASK] 掩码金 */
  /* Tokenizer */
  --tok-bpe: #06B6D4;          /* BPE 青 */
  --tok-wordpiece: #A78BFA;    /* WordPiece 紫 */
  --tok-unigram: var(--ch-amber);      /* Unigram 金 */
  /* Scaling Laws */
  --scale-model: #059669;      /* 模型规模翠金 */
  --scale-data2: #06B6D4;      /* 数据量青 */
  --scale-compute: var(--ch-amber);    /* 计算量金 */
  --chinchilla-opt: var(--ch-epiphany);   /* Chinchilla 最优金 */
  /* 涌现 */
  --emerge-threshold: var(--ch-epiphany); /* 涌现阈值金 */
  --emerge-none: #475569;      /* 无能力灰 */
  --emerge-sudden: var(--ch-boss);    /* 突然涌现红 */
  /* 基础设施 */
  --infra-gpu: #06B6D4;        /* GPU 青 */
  --infra-time: #A78BFA;       /* 时间紫 */
  --infra-cost: var(--ch-amber);       /* 成本金 */
  --infra-fp16: #34D399;       /* 混合精度翠 */
  --infra-accum: var(--ch-epiphany);      /* 梯度累积金 */
  /* S9 Boss */
  --boss-face: #6B7280;        /* 雾脸灰绿 */
  --answer-correct: #059669;   /* 正解翠金光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  --jindan-gold: #FCD34D;      /* 金丹金 */
  /* 选项/状态色 */
  --opt-correct: #059669;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #10B981;
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
}

/* ---------- 导师高斯老祖对话框变体 ---------- */
.dlg.gauss {
  border-left-color: var(--accent);
  box-shadow: var(--shadow), 0 0 18px var(--accent-soft);
}
.dlg.gauss .who {
  background: var(--accent); color: var(--on-accent);
}
.dlg.gauss .avatar {
  border-color: var(--accent);
}
.dlg.gauss p {
  color: var(--text-1);
}

/* ---------- 开场（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, #0A1A14) 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-emerald-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--scale-data);
  background: rgba(5,150,105,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-emerald-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-alchemy-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;
}
.factor-silhouettes {
  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);
}
.factor-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;
}
.factor-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.factor-card.guessed { opacity: 1; }
.factor-card.guessed.correct { border-color: var(--factor-data); background: var(--ch-emerald-soft); box-shadow: 0 0 12px var(--ch-emerald-soft); }
.factor-card.guessed.wrong { border-color: var(--debt-red); background: var(--debt-soft); }
.factor-card .fc-icon { font-size: 1.3rem; }
.factor-card .fc-name { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--text-1); }
.factor-card .fc-tag { font-size: 0.62rem; color: var(--text-3); }
.factor-card[data-factor="arch"] { border-left: 3px solid var(--factor-arch); }
.factor-card[data-factor="data"] { border-left: 3px solid var(--factor-data); }
.factor-card[data-factor="compute"] { border-left: 3px solid var(--factor-compute); }
.factor-card[data-factor="seed"] { border-left: 3px solid var(--factor-seed); }
.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.correct-pop { border-color: var(--factor-data); background: var(--ch-emerald-soft); color: var(--ch-emerald-ink); }
.conflict-popup .cp-title { font-weight: 600; color: var(--debt-red); margin-bottom: 4px; }
.conflict-popup.correct-pop .cp-title { color: var(--ch-emerald-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; }
.paradigm-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-emerald);
  border-radius: var(--r-sm); background: var(--ch-emerald-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.paradigm-map h4 { font-size: 0.85rem; color: var(--ch-emerald-ink); margin-bottom: var(--sp-2); text-align: center; }
.paradigm-flow { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; justify-content: center; }
.paradigm-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;
}
.paradigm-node.lit { opacity: 1; border-color: var(--ch-emerald); color: var(--ch-emerald-ink); background: var(--ch-emerald-soft); }
.paradigm-node.key { border-color: var(--ch-epiphany); color: var(--ch-epiphany-ink); background: var(--ch-epiphany-soft); }
.paradigm-arrow { color: var(--text-3); font-size: 0.9rem; }

/* ============================================================
   S1 范式对比器 · 传统 vs 预训练
   ============================================================ */
.cmp-paradigm-compare { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.compare-col {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.compare-col[data-paradigm="old"] { border-top: 3px solid var(--paradigm-old); }
.compare-col[data-paradigm="new"] { border-top: 3px solid var(--paradigm-new); }
.compare-col h4 { font-size: 0.82rem; margin-bottom: var(--sp-1); text-align: center; }
.compare-col[data-paradigm="old"] h4 { color: var(--paradigm-old); }
.compare-col[data-paradigm="new"] h4 { color: var(--paradigm-new); }
.compare-flow { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.flow-step {
  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.72rem; text-align: center; color: var(--text-2);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.flow-step.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.compare-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.compare-canvas-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.compare-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); }
.compare-toggle { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-1); }
.compare-metric {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-1);
}
.compare-metric-cell {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center;
}
.compare-metric-cell .cmc-label { font-size: 0.62rem; color: var(--text-3); }
.compare-metric-cell .cmc-value { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-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);
}

/* ============================================================
   S2 MLM 实验台 · BERT 掩码语言模型
   ============================================================ */
.cmp-mlm-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.mlm-input-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.mlm-input-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.mlm-sentence {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; padding: var(--sp-2);
}
.mlm-token {
  padding: 4px 8px; 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-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.mlm-token:hover { border-color: var(--mask-token); }
.mlm-token.masked {
  border-color: var(--mask-token); color: var(--mask-token); background: var(--ch-epiphany-soft);
  box-shadow: 0 0 8px var(--ch-epiphany-soft);
}
.mlm-token.predicted {
  border-color: var(--bert-bidir); color: var(--bert-bidir); background: var(--ch-emerald-soft);
}
.mlm-attention-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.mlm-attention-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.mlm-attention-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.mlm-prediction {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); margin-top: var(--sp-1);
}
.pred-cand {
  padding: var(--sp-1) 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.72rem; text-align: center;
  color: var(--text-2); cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.pred-cand:hover { border-color: var(--accent); color: var(--text-1); }
.pred-cand.revealed { border-color: var(--bert-bidir); color: var(--bert-bidir); background: var(--ch-emerald-soft); }
.pred-cand .pc-prob { font-size: 0.62rem; color: var(--text-3); display: block; }

/* ============================================================
   S3 第一崩塌 · 过拟合之雾
   ============================================================ */
.cmp-overfit-rift { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.overfit-replay-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--anomaly-crack, var(--ch-conflict)); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06);
}
.overfit-replay-zone h4 { font-size: 0.82rem; color: var(--ch-warn); margin-bottom: var(--sp-1); }
.overfit-replay-zone input[type="range"] { max-width: 320px; }
.overfit-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); }
.overfit-metrics { margin-top: var(--sp-1); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); font-size: 0.76rem; }
.overfit-metric { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.overfit-metric .om-label { font-size: 0.68rem; color: var(--text-3); }
.overfit-metric .om-value { font-family: var(--font-mono); color: var(--text-1); }
.fog-diagnosis {
  margin-top: var(--sp-1); 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);
}
.rootcause-zone {
  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);
}
.rootcause-zone h4 { font-size: 0.82rem; color: var(--ch-boss-ink); margin-bottom: var(--sp-2); }
.rootcause-formula {
  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.76rem; color: var(--text-2);
  line-height: 1.6;
}
.rootcause-formula .rf-highlight { color: var(--debt-red); font-weight: 600; }
@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 自回归生成器 · GPT
   ============================================================ */
.cmp-gpt-generator { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.gpt-prompt-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.gpt-prompt-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.gpt-prompt-input {
  width: 100%; padding: var(--sp-2); 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;
  resize: vertical; min-height: 48px;
}
.gpt-prompt-input:focus { border-color: var(--accent); outline: none; }
.gpt-gen-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-1); }
.gpt-output-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.gpt-output-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.gpt-tokens { display: flex; gap: 4px; flex-wrap: wrap; padding: var(--sp-2); min-height: 60px; }
.gpt-token {
  padding: 3px 7px; border: 1px solid var(--gpt-causal); border-radius: var(--r-xs);
  background: rgba(245,158,11,0.10); font-family: var(--font-mono); font-size: 0.74rem; color: var(--gpt-causal);
  opacity: 0; transform: translateY(6px); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.gpt-token.shown { opacity: 1; transform: none; }
.gpt-token.prompt { border-color: var(--text-3); color: var(--text-2); background: var(--bg-elev); }
.attention-compare-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.attention-compare-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.attention-compare-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.attention-legend { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-1); font-size: 0.74rem; color: var(--text-2); }
.attention-legend .lg-bert { color: var(--bert-bidir); }
.attention-legend .lg-gpt { color: var(--gpt-causal); }

/* ============================================================
   S5 分词器实验台 · Tokenizer
   ============================================================ */
.cmp-tokenizer-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.tok-input-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.tok-input-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.tok-text-input {
  width: 100%; padding: var(--sp-2); 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;
}
.tok-text-input:focus { border-color: var(--accent); outline: none; }
.tok-compare-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.tok-compare-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.tok-method-row {
  display: flex; gap: 4px; flex-wrap: wrap; padding: var(--sp-1) 0; margin-bottom: var(--sp-1);
  border-bottom: 1px solid var(--glass-line);
}
.tok-method-label {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; min-width: 80px;
}
.tok-method-row[data-method="bpe"] .tok-method-label { color: var(--tok-bpe); }
.tok-method-row[data-method="wordpiece"] .tok-method-label { color: var(--tok-wordpiece); }
.tok-method-row[data-method="unigram"] .tok-method-label { color: var(--tok-unigram); }
.tok-piece {
  padding: 2px 6px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-1);
  display: inline-block; margin: 1px;
}
.tok-method-row[data-method="bpe"] .tok-piece { border-color: var(--tok-bpe); color: var(--tok-bpe); }
.tok-method-row[data-method="wordpiece"] .tok-piece { border-color: var(--tok-wordpiece); color: var(--tok-wordpiece); }
.tok-method-row[data-method="unigram"] .tok-piece { border-color: var(--tok-unigram); color: var(--tok-unigram); }
.tok-method-row .tok-piece.continuation { border-style: dashed; }
.tok-vocab-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.tok-vocab-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.tok-vocab-zone input[type="range"] { max-width: 320px; }
.tok-vocab-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); }
.tok-vocab-readout { margin-top: var(--sp-1); font-size: 0.76rem; color: var(--text-2); font-family: var(--font-mono); }

/* ============================================================
   S6 Scaling Laws 曲线追踪器
   ============================================================ */
.cmp-scaling-tracker { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.scaling-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.scaling-canvas-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.scaling-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); }
.scaling-legend { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-1); font-size: 0.74rem; }
.scaling-legend .lg-model { color: var(--scale-model); }
.scaling-legend .lg-data { color: var(--scale-data2); }
.scaling-legend .lg-compute { color: var(--scale-compute); }
.scaling-legend .lg-chinchilla { color: var(--chinchilla-opt); }
.scaling-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%;
}
.scaling-knob {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.scaling-knob h5 { font-size: 0.78rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.scaling-knob input[type="range"] { width: 100%; }
.scaling-knob .sk-val { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-2); }
.chinchilla-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--chinchilla-opt); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.chinchilla-zone h4 { font-size: 0.82rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-1); }
.chinchilla-ratio {
  display: flex; align-items: center; gap: var(--sp-2); justify-content: center; font-family: var(--font-mono); font-size: 0.9rem;
}
.chinchilla-ratio .cr-data { color: var(--scale-data2); }
.chinchilla-ratio .cr-param { color: var(--scale-param); }
.chinchilla-ratio .cr-opt { color: var(--chinchilla-opt); font-weight: 700; }

/* ============================================================
   S7 第二崩塌 · 涌现之谜
   ============================================================ */
.cmp-emergence-rift { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.emergence-replay-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft);
}
.emergence-replay-zone h4 { font-size: 0.82rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-1); }
.emergence-replay-zone input[type="range"] { max-width: 320px; }
.emergence-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); }
.emergence-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-1); }
.emergence-task {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; cursor: pointer;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.6;
}
.emergence-task:hover { opacity: 1; border-color: var(--accent); }
.emergence-task.active { opacity: 1; border-color: var(--ch-epiphany); background: var(--ch-epiphany-soft); }
.emergence-task .et-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.emergence-task .et-status { font-size: 0.62rem; color: var(--text-3); margin-top: 2px; }
.emergence-task.emerged .et-status { color: var(--emerge-sudden); }
.emergence-diagnosis {
  margin-top: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--ch-conflict); border-radius: var(--r-xs);
  background: var(--ch-conflict-soft); font-size: 0.78rem; color: var(--ch-conflict-ink); font-style: italic;
  animation: shatterIn 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S8 训练配置计算器 · 炼丹炉
   ============================================================ */
.cmp-infra-calculator { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.infra-param-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.infra-param-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.param-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.param-opt {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.6;
}
.param-opt:hover { opacity: 1; border-color: var(--accent); transform: translateY(-1px); }
.param-opt.chosen { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.param-opt .po-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.param-opt .po-desc { font-size: 0.62rem; color: var(--text-3); margin-top: 2px; }
.infra-result-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.infra-result-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.infra-result-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.infra-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-1); }
.infra-metric {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center;
}
.infra-metric[data-kind="gpu"] { border-top: 3px solid var(--infra-gpu); }
.infra-metric[data-kind="time"] { border-top: 3px solid var(--infra-time); }
.infra-metric[data-kind="cost"] { border-top: 3px solid var(--infra-cost); }
.infra-metric .im-label { font-size: 0.62rem; color: var(--text-3); }
.infra-metric .im-value { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-1); }
.infra-tech-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.infra-tech-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.tech-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.tech-btn[data-tech="fp16"].active { border-color: var(--infra-fp16); color: var(--infra-fp16); }
.tech-btn[data-tech="accum"].active { border-color: var(--infra-accum); color: var(--infra-accum); }
.tech-btn[data-tech="zero"].active { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   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-emerald-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-emerald-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); }
.stele-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft);
}
.stele-zone h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); text-align: center; }
.stele-line {
  padding: var(--sp-1) 0; font-family: var(--font-serif); font-size: 0.92rem; color: var(--text-1);
  text-align: center; line-height: 1.8; opacity: 0.4; transition: all 600ms cubic-bezier(0.22,1,0.36,1);
}
.stele-line.lit { opacity: 1; color: var(--ch-emerald-ink); text-shadow: 0 0 12px var(--ch-emerald-soft); }
.knowledge-graph-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.knowledge-graph-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.knowledge-graph-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.graph-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.graph-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;
}
.graph-node.lit { opacity: 1; border-color: var(--ch-emerald); color: var(--ch-emerald-ink); background: var(--ch-emerald-soft); box-shadow: 0 0 8px var(--ch-emerald-soft); }
.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-emerald-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-emerald-ink); border: 1px solid var(--ch-emerald); background: var(--ch-emerald-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-emerald-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; }
  .factor-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .compare-row { grid-template-columns: 1fr; }
  .compare-metric { grid-template-columns: 1fr; }
  .mlm-prediction { grid-template-columns: repeat(2, 1fr); }
  .overfit-metrics { grid-template-columns: 1fr; }
  .scaling-controls { grid-template-columns: 1fr; }
  .emergence-tasks { grid-template-columns: 1fr; }
  .param-grid { grid-template-columns: 1fr; }
  .infra-metrics { grid-template-columns: 1fr; }
  .graph-nodes { 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); }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved.active { animation: none; }
  .rb-arrow { animation: none; }
  .conflict-popup, .debt-account, .paradigm-map, .exclude-mark, .fog-diagnosis, .rootcause-zone,
  .chinchilla-zone, .emergence-diagnosis, .carve-emergence, .fog-collapse, .stele-zone,
  .knowledge-graph-zone, .stele-line, .graph-node { animation: none; }
  .factor-card:hover, .param-opt:hover { transform: none; }
}