/* ============================================================
   ch03「机器学习导论：感知初现」章节专属样式
   境界：炼气三层·感知初现 · 紫罗兰 #8B5CF6
   Boss：过拟合之影 · 影紫灰 #9D8EC9
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   过拟合警示：赤红 var(--ch-boss)
   本命灵模：紫晶 #8B5CF6 / 记忆之痕暗紫裂纹
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：紫罗兰 ---------- */
:root, :root[data-theme="light"] {
  --accent: #7C3AED;
  --accent-ink: #6D28D9;
  --accent-soft: rgba(139, 92, 246, 0.12);
  --glass-line: rgba(139, 92, 246, 0.22);
  --glow: 0 0 18px rgba(139, 92, 246, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #A78BFA;
  --accent-ink: #8B5CF6;
  --accent-soft: rgba(139, 92, 246, 0.16);
  --glass-line: rgba(167, 139, 250, 0.22);
  --glow: 0 0 22px rgba(139, 92, 246, 0.34);
  --on-accent: #1A0F2E;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #9D8EC9;          /* 过拟合之影 · 影紫灰 */
  --ch-boss-ink: #C4B5FD;      /* 影紫白 */
  --ch-boss-soft: rgba(157, 142, 201, 0.22);
  --ch-boss-line: rgba(157, 142, 201, 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-violet: #8B5CF6;        /* 紫罗兰 · 境界色 */
  --ch-violet-soft: rgba(139, 92, 246, 0.14);
  --ch-violet-ink: #7C3AED;
  /* 三条贯穿机制色 */
  --shadow-debt: var(--ch-boss);      /* 拟合债赤红光页 */
  --shadow-debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #8B5CF6;       /* 排除刻痕紫罗兰微光 */
  --carve-soft: rgba(139, 92, 246, 0.14);
  --model-scar: #8B5CF6;       /* 本命灵模紫晶 */
  --model-crack: #7F1D1D;      /* 记忆之痕暗紫红裂纹 */
  --scar-heal: #C4B5FD;        /* 伤痕愈合紫光 */
  /* ML 分层功能色 */
  --layer-supervised: #8B5CF6; /* 监督学习紫 */
  --layer-unsupervised: #06B6D4; /* 无监督青 */
  --layer-rl: var(--ch-amber);         /* 强化学习琥珀 */
  --layer-eval: #10B981;       /* 评估翠 */
  --layer-regular: #A78BFA;    /* 正则化浅紫 */
  --layer-pipeline: var(--ch-epiphany);   /* 流水线金 */
  /* S0 五场景色 */
  --case-spam: var(--ch-boss);        /* 垃圾邮件红 */
  --case-rec: #8B5CF6;         /* 推荐紫 */
  --case-face: #06B6D4;        /* 人脸青 */
  --case-alphago: var(--ch-epiphany);     /* AlphaGo金 */
  --case-car: #10B981;         /* 自动驾驶绿 */
  /* S1 训练 */
  --train-curve: #8B5CF6;      /* 训练曲线紫 */
  --data-point: #C4B5FD;       /* 数据点浅紫 */
  --perfect-glow: var(--ch-epiphany);     /* 满分之印金光 */
  /* S3 试炼 */
  --train-acc: #10B981;        /* 训练准确率绿 */
  --test-acc: var(--ch-boss);         /* 测试准确率红 */
  --cm-tp: #10B981;            /* TP绿 */
  --cm-tn: #38BDF8;            /* TN蓝 */
  --cm-fp: var(--ch-amber);            /* FP橙 */
  --cm-fn: var(--ch-boss);            /* FN红 */
  /* S4 假设殿 */
  --hypo-curve: #8B5CF6;       /* 假设曲线紫 */
  --nfl-bar: #A78BFA;          /* NFL柱紫 */
  --rl-reward: var(--ch-epiphany);        /* RL奖励金 */
  --rl-punish: var(--ch-boss);        /* RL惩罚红 */
  /* S5 诊断 */
  --bias-color: #3B82F6;       /* 偏差蓝 */
  --variance-color: #8B5CF6;   /* 方差紫 */
  --noise-color: #6B7280;      /* 噪声灰 */
  --lc-train: #8B5CF6;         /* 学习曲线训练紫 */
  --lc-val: var(--ch-amber);           /* 学习曲线验证橙 */
  /* S6 交叉验证 */
  --fold-color: #8B5CF6;       /* 折紫 */
  --fold-train: #06B6D4;       /* 训练折青 */
  --fold-val: var(--ch-epiphany);         /* 验证折金 */
  /* S7 正则化 */
  --l1-color: var(--ch-boss);         /* L1红 */
  --l2-color: #3B82F6;         /* L2蓝 */
  --lambda-low: var(--ch-boss);       /* λ小红 */
  --lambda-mid: #10B981;       /* λ中绿 */
  --lambda-high: var(--ch-amber);      /* λ大橙 */
  /* S8 评估 */
  --roc-curve: #8B5CF6;        /* ROC曲线紫 */
  --roc-area: rgba(139, 92, 246, 0.18); /* AUC面积 */
  --roc-diagonal: #6B7280;     /* 瞎猜对角线灰 */
  --residual-pos: var(--ch-epiphany);     /* 正残差金 */
  --residual-neg: var(--ch-boss);     /* 负残差红 */
  /* S9 Boss */
  --shadow-face: #9D8EC9;      /* 影脸紫灰 */
  --answer-correct: #8B5CF6;   /* 正解紫光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  /* 选项/状态色 */
  --opt-correct: #10B981;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #10B981;
  --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, #140A2A 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-violet-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--model-crack);
  background: rgba(127,29,29,0.18); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #model-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #model-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-violet-ink); }
#carve-list p { font-size: 0.8rem; color: var(--ch-violet); margin: var(--sp-1) 0; }
#model-list p { font-size: 0.8rem; color: var(--ch-violet-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); }

/* ---------- 通用滑块行 ---------- */
.complexity-row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.complexity-row input[type="range"] { flex: 1; }
.cmp-label { font-size: 0.82rem; color: var(--text-3, #94A3B8); white-space: nowrap; min-width: 3.5rem; }

/* ============================================================
   S0 模式之门 · 机器学习依赖预测挑战器
   ============================================================ */
.cmp-pattern-gate { 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;
}
.case-silhouettes {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.case-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: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.case-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.case-card.guessed { opacity: 1; border-color: var(--shadow-debt); background: var(--shadow-debt-soft); }
.case-card .cc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.case-card .cc-icon { font-size: 1.2rem; }
.case-card .cc-real { font-size: 0.62rem; color: var(--ch-violet-ink); margin-top: 2px; display: none; }
.case-card.guessed .cc-real { display: block; }
.case-card[data-case="spam"] { border-left: 3px solid var(--case-spam); }
.case-card[data-case="rec"] { border-left: 3px solid var(--case-rec); }
.case-card[data-case="face"] { border-left: 3px solid var(--case-face); }
.case-card[data-case="alphago"] { border-left: 3px solid var(--case-alphago); }
.case-card[data-case="car"] { border-left: 3px solid var(--case-car); }
.conflict-popup {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--shadow-debt);
  border-radius: var(--r-sm); background: var(--shadow-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(--shadow-debt); margin-bottom: 4px; }
.shadow-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);
}
.shadow-account .acct-line { margin: var(--sp-1) 0; }
.shadow-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.ml-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-violet);
  border-radius: var(--r-sm); background: var(--ch-violet-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.ml-map h4 { font-size: 0.85rem; color: var(--ch-violet-ink); margin-bottom: var(--sp-2); text-align: center; }
.map-nodes { display: grid; grid-template-columns: repeat(5, 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-violet); color: var(--ch-violet-ink); background: var(--ch-violet-soft); }
.timeline-stream {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.timeline-stream h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.tl-track { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.tl-node {
  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.68rem; color: var(--text-2);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5;
}
.tl-node.lit { opacity: 1; border-color: var(--ch-violet); color: var(--ch-violet-ink); background: var(--ch-violet-soft); }
.tl-node .tl-year { font-size: 0.6rem; color: var(--text-3); display: block; }

/* ============================================================
   S1 训灵坛 · 范式抉择 + 复杂度滑块
   ============================================================ */
.cmp-training-altar { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.paradigm-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.para-btn {
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); color: var(--text-1); font-size: 0.9rem; cursor: pointer;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); text-align: center;
}
.para-btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow); }
.para-btn.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.training-bench {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; flex-direction: column; gap: var(--sp-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.training-bench canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.acc-display { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.acc-cell {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 120px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.acc-cell.perfect { border-color: var(--perfect-glow); box-shadow: 0 0 16px rgba(251,191,36,0.3); }
.acc-cell .ac-label { font-size: 0.7rem; color: var(--text-3); font-family: var(--font-mono); }
.acc-cell .ac-value { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--accent-ink); }
.acc-cell.perfect .ac-value { color: var(--perfect-glow); }
.model-forge {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-violet); border-radius: var(--r-sm);
  background: var(--ch-violet-soft); text-align: center;
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
.model-forge .mf-name { font-family: var(--font-mono); font-size: 1rem; color: var(--ch-violet-ink); font-weight: 600; }
.model-forge .mf-desc { font-size: 0.78rem; color: var(--text-2); margin-top: var(--sp-1); }

/* ============================================================
   S2 万象阁 · 特征工程 + 无监督
   ============================================================ */
.cmp-feature-forge { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.fe-bench, .unsup-chamber {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.fe-bench h4, .unsup-chamber h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.fe-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.fe-step {
  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;
}
.fe-step:hover { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.fe-step.done { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.fe-step .fs-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); display: block; }
.fe-step .fs-desc { font-size: 0.65rem; color: var(--text-3); margin-top: 2px; display: block; }
.fe-bench canvas, .unsup-chamber canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.fe-warn {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-xs);
  background: rgba(239,68,68,0.10); color: var(--ch-warn); font-size: 0.78rem; font-style: italic;
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.unsup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.unsup-btn {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1); font-size: 0.78rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.unsup-btn:hover { border-color: var(--layer-unsupervised); transform: translateY(-2px); }
.unsup-btn.lit { border-color: var(--layer-unsupervised); background: rgba(6,182,212,0.12); color: var(--layer-unsupervised); box-shadow: 0 0 12px rgba(6,182,212,0.2); }
.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);
}

/* ============================================================
   S3 试炼场 · 天平 + 混淆矩阵 + 四指标
   ============================================================ */
.cmp-trial-balance { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.balance-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.balance-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.balance-ctrl { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); flex-wrap: wrap; }
.confusion-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-conflict); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.04); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.confusion-zone h4 { font-size: 0.85rem; color: var(--ch-warn); margin-bottom: var(--sp-2); }
.cm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.cm-cell {
  padding: var(--sp-3); border: 2px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); text-align: center; min-height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.cm-cell.cm-tl { border-color: var(--cm-tp); }
.cm-cell.cm-tr { border-color: var(--cm-fp); }
.cm-cell.cm-bl { border-color: var(--cm-fn); }
.cm-cell.cm-br { border-color: var(--cm-tn); }
.cm-cell.filled { box-shadow: 0 0 12px rgba(139,92,246,0.2); }
.cm-cell .cm-name { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; }
.cm-cell.cm-tl .cm-name { color: var(--cm-tp); }
.cm-cell.cm-tr .cm-name { color: var(--cm-fp); }
.cm-cell.cm-bl .cm-name { color: var(--cm-fn); }
.cm-cell.cm-br .cm-name { color: var(--cm-tn); }
.cm-cell .cm-desc { font-size: 0.7rem; color: var(--text-3); }
.cm-cell .cm-count { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--text-1); }
.cm-samples {
  display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; padding: var(--sp-2);
}
.cm-sample {
  width: 28px; height: 28px; border: 1px solid var(--glass-line); border-radius: 50%;
  background: var(--bg-sunk); display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.cm-sample:hover { border-color: var(--accent); transform: scale(1.1); }
.cm-sample.cat { color: var(--cm-tp); }
.cm-sample.dog { color: var(--cm-tn); }
.cm-sample.placed { opacity: 0.3; cursor: default; transform: none; }
.metrics-zone {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.metric-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.metric-cell.lit { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.metric-cell .mc-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.metric-cell .mc-formula { font-size: 0.62rem; color: var(--text-3); font-family: var(--font-mono); }
.metric-cell .mc-value { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--accent-ink); }

/* ============================================================
   S4 假设殿 · 假设空间球 + NFL + 强化学习
   ============================================================ */
.cmp-hypothesis-hall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.hypothesis-zone, .nfl-zone, .rl-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.hypothesis-zone h4, .nfl-zone h4, .rl-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.hypothesis-zone canvas, .rl-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.nfl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.nfl-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center;
  display: flex; flex-direction: column; gap: 4px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.nfl-card .nc-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.nfl-bar { height: 6px; border: 1px solid var(--glass-line); border-radius: 3px; background: var(--bg-sunk); overflow: hidden; }
.nfl-bar .nb-fill { height: 100%; background: var(--nfl-bar); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.nfl-card .nc-score { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-ink); }
.nfl-card.winner { border-color: var(--ch-ok); box-shadow: 0 0 10px rgba(16,185,129,0.2); }
.rl-ctrl { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-2); flex-wrap: wrap; }

/* ============================================================
   S5 诊断台 · 学习曲线 + 偏差-方差推导
   ============================================================ */
.cmp-diagnosis-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.lc-zone, .bv-zone, .verify-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.lc-zone h4, .bv-zone h4, .verify-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.lc-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.diag-verdict {
  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-size: 0.82rem; color: var(--text-2); min-height: 32px;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.diag-verdict.high-variance { border-color: var(--variance-color); color: var(--variance-color); background: var(--ch-violet-soft); }
.diag-verdict.high-bias { border-color: var(--bias-color); color: var(--bias-color); background: rgba(59,130,246,0.10); }
.bv-slots { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.bv-slot {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; align-items: center; gap: var(--sp-2); min-height: 50px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.bv-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.bv-slot.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.bv-slot .bs-num { font-size: 0.65rem; color: var(--text-3); min-width: 50px; font-family: var(--font-mono); }
.bv-slot .bs-content { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink); flex: 1; }
.bv-fragments { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.bv-frag {
  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.72rem; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.bv-frag:hover { border-color: var(--accent); transform: translateY(-2px); }
.bv-frag.placed { opacity: 0.4; cursor: default; transform: none; }
.bv-formula {
  margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-family: var(--font-mono); font-size: 0.85rem; color: var(--ch-epiphany-ink);
  text-align: center; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.verify-zone { border-color: var(--ch-conflict); background: rgba(239,68,68,0.04); }
.verify-readout {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.8rem; color: var(--text-2); min-height: 40px; margin-bottom: var(--sp-2);
  font-style: italic;
}
.verify-readout.healed { border-color: var(--ch-ok); color: var(--ch-ok); background: rgba(16,185,129,0.10); }

/* ============================================================
   S6 折折磨室 · K-fold
   ============================================================ */
.cmp-cv-chamber { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.kfold-zone, .stratified-zone, .truth-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.kfold-zone h4, .stratified-zone h4, .truth-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.kfold-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.kfold-table {
  margin-top: var(--sp-2); width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.75rem;
}
.kfold-table th, .kfold-table td { padding: 4px 8px; border: 1px solid var(--glass-line); text-align: center; }
.kfold-table th { background: var(--bg-elev); color: var(--accent-ink); }
.kfold-table td.fold-train { color: var(--fold-train); }
.kfold-table td.fold-val { color: var(--fold-val); font-weight: 600; }
.strat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.strat-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center;
}
.strat-cell.bad { border-color: var(--ch-warn); background: rgba(239,68,68,0.06); }
.strat-cell.good { border-color: var(--ch-ok); background: rgba(16,185,129,0.06); }
.strat-cell .sc-name, .strat-cell .strat-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); display: block; }
.strat-cell .sc-desc { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; display: block; }
.truth-zone { border-color: var(--ch-conflict); background: rgba(239,68,68,0.04); }
.truth-compare { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.tc-cell {
  padding: var(--sp-3); border: 2px solid var(--ch-conflict); border-radius: var(--r-sm);
  background: var(--bg-elev); text-align: center; min-width: 120px;
}
.tc-cell .tc-label { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); display: block; }
.tc-cell .tc-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--ch-warn); }
.tc-arrow { font-size: 1.5rem; color: var(--text-3); }

/* ============================================================
   S7 正则之泉 · L1/L2 + λ
   ============================================================ */
.cmp-regularization-spring { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.lock-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.lock-btn {
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; gap: 4px;
}
.lock-btn[data-lock="l1"]:hover { border-color: var(--l1-color); transform: translateY(-2px); }
.lock-btn[data-lock="l2"]:hover { border-color: var(--l2-color); transform: translateY(-2px); }
.lock-btn.selected[data-lock="l1"] { border-color: var(--l1-color); background: rgba(239,68,68,0.12); box-shadow: 0 0 14px rgba(239,68,68,0.2); }
.lock-btn.selected[data-lock="l2"] { border-color: var(--l2-color); background: rgba(59,130,246,0.12); box-shadow: 0 0 14px rgba(59,130,246,0.2); }
.lock-btn .lb-name { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; color: var(--text-1); }
.lock-btn .lb-desc { font-size: 0.7rem; color: var(--text-3); }
.lambda-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; flex-direction: column; gap: var(--sp-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.lambda-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.scar-zone {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--model-crack); border-radius: var(--r-sm);
  background: rgba(127,29,29,0.06); text-align: center; font-style: italic; color: var(--model-crack);
  font-size: 0.82rem; transition: all 600ms cubic-bezier(0.22,1,0.36,1);
}
.scar-zone.healed { border-color: var(--scar-heal); background: var(--ch-violet-soft); color: var(--scar-heal); }
.scar-zone.overfit { border-color: var(--ch-conflict); background: rgba(239,68,68,0.10); color: var(--ch-conflict); }

/* ============================================================
   S8 评估殿 · ROC + 回归
   ============================================================ */
.cmp-evaluation-hall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.eval-tabs { display: flex; gap: var(--sp-1); justify-content: center; }
.eval-tab {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-2); font-size: 0.82rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.eval-tab:hover { border-color: var(--accent); }
.eval-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.roc-zone, .reg-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.roc-zone canvas, .reg-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.roc-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.roc-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.roc-cell.roc-auc { border-color: var(--roc-curve); background: var(--roc-area); }
.roc-cell .rc-label { font-size: 0.68rem; color: var(--text-3); font-family: var(--font-mono); }
.roc-cell .rc-value { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--accent-ink); }
.roc-cell.roc-auc .rc-value { color: var(--roc-curve); }
.reg-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }

/* ============================================================
   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(--shadow-debt);
  border-radius: var(--r-sm); background: var(--shadow-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(--shadow-debt); 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-violet-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-violet-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);
}
@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); }
}

/* ============================================================
   S10 尾声 · 流水之门
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.pipeline-zone, .graph-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.pipeline-zone h4, .graph-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.pipe-slots { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.pipe-slot {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.pipe-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.pipe-slot.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.pipe-slot .ps-num { font-size: 0.65rem; color: var(--text-3); min-width: 50px; font-family: var(--font-mono); }
.pipe-slot .ps-content { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink); flex: 1; }
.pipe-frags { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.pipe-frag {
  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.72rem; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.pipe-frag:hover { border-color: var(--accent); transform: translateY(-2px); }
.pipe-frag.placed { opacity: 0.4; cursor: default; transform: none; }
.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); }
.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: var(--ch-epiphany-soft);
}
.realm-glow {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--ch-epiphany-ink); letter-spacing: 0.2em;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--accent-soft); }
  50% { box-shadow: 0 0 32px rgba(139,92,246,0.4); }
}
.realm-achieved { 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; }
  .case-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .map-nodes { grid-template-columns: repeat(2, 1fr); }
  .paradigm-choice { grid-template-columns: 1fr; }
  .fe-steps { grid-template-columns: 1fr; }
  .unsup-grid { grid-template-columns: 1fr; }
  .cm-grid { grid-template-columns: 1fr 1fr; }
  .metrics-zone { grid-template-columns: repeat(2, 1fr); }
  .nfl-grid { grid-template-columns: repeat(2, 1fr); }
  .strat-grid { grid-template-columns: 1fr; }
  .lock-choice { grid-template-columns: 1fr; }
  .roc-readout { grid-template-columns: 1fr; }
  .reg-metrics { grid-template-columns: repeat(2, 1fr); }
  .truth-compare { flex-direction: column; }
  .acc-display { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .conflict-popup, .shadow-account, .ml-map, .timeline-stream, .exclude-mark, .training-bench,
  .model-forge, .fe-warn, .confusion-zone, .metrics-zone, .nfl-card, .lc-zone, .bv-zone, .verify-zone,
  .kfold-zone, .stratified-zone, .truth-zone, .lambda-zone, .roc-zone, .reg-zone,
  .carve-emergence, .fog-collapse, .bv-formula, .pipe-slot, .pipe-frag, .bv-frag,
  .tl-node, .cm-sample { animation: none; }
  .case-card:hover, .fe-step:hover, .para-btn:hover, .lock-btn:hover { transform: none; }
}