/* ============================================================
   ch16「性能分析与优化方法」章节专属样式
   境界：结丹五层·性能度量 · 度量金 #D4A853
   Boss：测量之谬 · 雾灰 #9AA7BD
   顿悟：度量金辉 #D4A853（理解发生之处/金光裂纹/顿悟脉冲）
   点缀：算力金 #D4A853（ch16专属点缀色）
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：度量金 ---------- */
:root, :root[data-theme="light"] {
  --accent: #D4A853;
  --accent-ink: #A8843E;
  --accent-soft: rgba(212, 168, 83, 0.12);
  --glass-line: rgba(212, 168, 83, 0.22);
  --glow: 0 0 18px rgba(212, 168, 83, 0.28);
  --on-accent: #1A1306;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #E0B85E;
  --accent-ink: #D4A853;
  --accent-soft: rgba(212, 168, 83, 0.16);
  --glass-line: rgba(212, 168, 83, 0.20);
  --glow: 0 0 22px rgba(212, 168, 83, 0.34);
  --on-accent: #1A1306;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #9AA7BD;          /* 测量之谬 · 雾灰 */
  --ch-boss-ink: #5C6878;
  --ch-boss-soft: rgba(154, 167, 189, 0.18);
  --ch-boss-line: rgba(154, 167, 189, 0.38);
  --ch-epiphany: #D4A853;      /* 顿悟度量金（理解发生之处） */
  --ch-epiphany-soft: rgba(212, 168, 83, 0.16);
  --ch-epiphany-ink: #A8843E;
  --ch-gold: #D4A853;          /* 度量金 */
  --ch-gold-soft: rgba(212, 168, 83, 0.14);
  --ch-gold-ink: #A8843E;
  --ch-measure: #D4A853;       /* 度量主色（ch16点缀色） */
  --ch-measure-soft: rgba(212, 168, 83, 0.14);
  --ch-measure-ink: #A8843E;
  /* 性能公式/Amdahl/Gustafson/Roofline 各功能色 */
  --curve-amdahl: #D4A853;     /* Amdahl加速曲线（金） */
  --curve-gustafson: #60A5FA;  /* Gustafson加速曲线（蓝） */
  --ceiling-line: #DC2626;     /* 天花板线（警示红虚线） */
  --time-flow: #0EA5E9;        /* 时间流光带色 */
  --simulate-pulse: #D4A853;   /* 模拟脉冲色 */
  --amdahl-formula: #10B981;   /* Amdahl公式投射色（翠绿） */
  --knob-p: #D4A853;           /* 串行比例p旋钮（金） */
  --knob-n: #60A5FA;           /* 处理器数n旋钮（蓝） */
  --knob-target: #D4A853;      /* 优化目标旋钮（金） */
  --knob-multiplier: #A78BFA;  /* 优化倍数旋钮（紫） */
  --knob-scenario: #0EA5E9;    /* 场景切换旋钮（蓝） */
  --roofline-compute: #D4A853; /* 算力屋顶水平金线 */
  --roofline-bandwidth: #0EA5E9; /* 带宽屋顶斜向蓝线 */
  --roofline-ridge: var(--ch-epiphany);   /* 屋脊点金色标记 */
  --roofline-kernel: #60A5FA;  /* kernel标记蓝色光点 */
  --power-curve: var(--ch-boss);      /* 功耗曲线（红） */
  --edp-curve: #10B981;        /* EDP曲线（绿） */
  --layer-app: #1E3A5F;        /* 应用层色（暗蓝） */
  --layer-algo: #0E7490;       /* 算法层色（青） */
  --layer-os: #0891B2;         /* OS/运行时层色 */
  --layer-isa: #0EA5E9;        /* ISA层色（蓝） */
  --layer-microarch: #A78BFA;  /* 微架构层色（紫） */
  --layer-circuit: #D4A853;    /* 电路层色（金） */
  --layer-device: var(--ch-amber);     /* 器件层色（金主色） */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #7F1D1D;
  --mask-gold: #D4A853;        /* 跑分面具金色碎片贴花 */
  --gold-crack: #D4A853;       /* 金光裂纹粒子 */
  --crack-projection: #D4A853; /* 刻痕投影（金微光） */
  --particle-flow: #60A5FA;    /* 并行光流粒子色 */
  --particle-chain: #DC2626;   /* 串行锁链粒子色 */
  --particle-ceiling: #D4A853; /* 天花板堆积粒子色 */
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-dontcare: #D4A853;
  --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, #101828 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-measure-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--mask-gold);
  background: rgba(212,168,83,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #mask-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #mask-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#mask-crack-list p { font-size: 0.8rem; color: var(--mask-gold); 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(127,29,29,0.16); }
.sim-range, input[type="range"], .knob-range { 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-range { width: 120px; }
.knob-val { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); }
.knob-val b { color: var(--accent); font-size: 1rem; }

/* ============================================================
   S0 跑分神殿预测挑战器
   ============================================================ */
.cmp-temple-predictor { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-panel { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--accent-ink);
  padding: var(--sp-2); letter-spacing: 0.1em;
}
.pedestal-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); width: 100%; }
.pedestal {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; font-size: 0.78rem; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.pedestal:hover { border-color: var(--accent); transform: translateY(-2px); }
.pedestal.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.pedestal.revealed { transform: rotateY(180deg); transition: transform 800ms cubic-bezier(0.22,1,0.36,1); }
.pedestal .ped-name { font-family: var(--font-mono); font-weight: 600; }
.pedestal .ped-score { font-size: 0.7rem; color: var(--text-3); }
.pedestal.winner { border-color: var(--ch-ok); background: rgba(34,197,94,0.12); color: var(--ch-ok); }
.pedestal.loser { opacity: 0.5; }
.dual-axis-panel { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); 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); }
.axis-response, .axis-throughput { display: flex; flex-direction: column; gap: var(--sp-1); }
.axis-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.05em; }
.processor-marks { width: 100%; min-height: 40px; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); transition: all 600ms cubic-bezier(0.22,1,0.36,1); }
.proc-mark {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 0.75rem; background: var(--bg-sunk);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); white-space: nowrap;
}
.proc-mark.fast { border-color: var(--ch-ok); color: var(--ch-ok); }
.proc-mark.slow { border-color: var(--ch-warn); color: var(--ch-warn); opacity: 0.6; }
.axis-comparison {
  padding: var(--sp-2); border: 1px solid var(--accent); border-radius: var(--r-xs);
  background: var(--accent-soft); font-size: 0.82rem; color: var(--accent-ink);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

.fallacy-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);
}
.fallacy-account .acct-line { margin: var(--sp-1) 0; }
.fallacy-account .acct-line b { color: var(--ch-boss); font-style: normal; }

/* ============================================================
   S1 CPU性能公式三旋钮实验台
   ============================================================ */
.cmp-cpu-formula-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.predict-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.predict-question { text-align: center; font-size: 1rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.predict-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.predict-opt {
  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.88rem; 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;
}
.predict-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.predict-opt.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.predict-opt.correct { border-color: var(--ch-ok); background: rgba(34,197,94,0.12); color: var(--ch-ok); }
.predict-opt.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.predict-feedback {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: 0.85rem; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.predict-feedback.right { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.predict-feedback.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }

.triple-knob-bench { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.cpu-time-display { text-align: center; font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent-ink); margin: var(--sp-2) 0; }
.cpu-time-display b { color: var(--accent); font-size: 1.4rem; }
.control-chart { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.control-readout { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 24px; }

.formula-assembly { 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); }
.formula-tokens { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.formula-token {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: grab; font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none; min-height: 36px;
  display: flex; align-items: center;
}
.formula-token:hover { border-color: var(--accent); box-shadow: var(--glow); }
.formula-token.dragging { opacity: 0.5; cursor: grabbing; }
.formula-token.placed { opacity: 0.3; cursor: default; }
.formula-slot {
  width: 100%; min-height: 60px; padding: var(--sp-2); border: 2px dashed var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.1rem; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.formula-slot.over { border-color: var(--accent); background: var(--accent-soft); }
.slot-drop { color: var(--text-3); font-style: italic; }
.slot-filled { color: var(--accent-ink); }
.verify-light {
  margin-top: var(--sp-2); text-align: center; font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--text-3); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.verify-light.lit { color: var(--ch-ok); border-color: var(--ch-ok); background: rgba(34,197,94,0.10); box-shadow: 0 0 16px rgba(34,197,94,0.3); }

.mips-trap { 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); }
.proc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-2) 0; }
.proc-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem;
  display: flex; flex-direction: column; gap: 4px;
}
.proc-card .proc-name { font-weight: 600; color: var(--text-1); font-size: 0.9rem; }
.proc-card .proc-params { color: var(--text-3); font-size: 0.72rem; }
.proc-card .proc-time b { color: var(--ch-ok); font-size: 1rem; }
.proc-card .proc-mips b { color: var(--accent); font-size: 1rem; }
.proc-card.winner { border-color: var(--ch-ok); background: rgba(34,197,94,0.08); }
.proc-card.loser { border-color: var(--ch-warn); background: rgba(239,68,68,0.06); opacity: 0.7; }
.trap-conclusion {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.10); font-size: 0.85rem; color: var(--ch-warn);
  animation: riftOpen 400ms 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);
}

/* ============================================================
   S2 Amdahl-Gustafson加速曲线追踪器
   ============================================================ */
.cmp-amdahl-tracker { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dual-knob-bench { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.speedup-display { text-align: center; font-family: var(--font-mono); font-size: 1rem; color: var(--accent-ink); margin: var(--sp-2) 0; }
.speedup-display b { color: var(--accent); font-size: 1.3rem; }
.speedup-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.ceiling-readout { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ceiling-line); min-height: 24px; }

.formula-derivation { 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); }
.derive-steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.derive-step {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.85rem;
  display: flex; align-items: center; gap: var(--sp-2); transition: all 400ms cubic-bezier(0.22,1,0.36,1);
  opacity: 0.4;
}
.derive-step.active { opacity: 1; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.derive-step.done { opacity: 1; border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.derive-step .step-num { font-size: 0.75rem; color: var(--text-3); min-width: 30px; }
.derive-step .step-formula { flex: 1; }

.gustafson-flip { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); animation: flipIn 800ms cubic-bezier(0.22,1,0.36,1); }
@keyframes flipIn {
  from { opacity: 0; transform: perspective(800px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(800px) rotateY(0deg); }
}
.gustafson-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.assumption-compare {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--curve-gustafson); border-radius: var(--r-sm);
  background: rgba(96,165,250,0.10); font-size: 0.82rem; color: var(--curve-gustafson);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S3 基准场·均值陷阱
   ============================================================ */
.cmp-mean-trap { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.benchmark-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.benchmark-stone {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: pointer; transition: all 300ms 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.4;
}
.benchmark-stone:hover { border-color: var(--accent); }
.benchmark-stone.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.benchmark-stone .bench-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; }
.benchmark-stone .bench-ratio { font-size: 0.72rem; color: var(--text-3); }

.ratio-data { 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); }
.ratio-values { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-1); }
.ratio-val {
  padding: var(--sp-1); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 0.78rem; text-align: center; background: var(--bg-elev);
}

.mean-calc { 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); }
.mean-toggle { display: flex; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-2); }
.mean-toggle .btn { min-width: 110px; }
.mean-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.mean-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.95rem; color: var(--accent-ink);
  text-align: center; margin-bottom: var(--sp-2);
}
.mean-result b { color: var(--accent); font-size: 1.2rem; }
.reciprocal-check {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.10); font-size: 0.82rem; color: var(--ch-warn);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.reciprocal-check.consistent { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }

/* ============================================================
   S4 计数室·硬件之眼
   ============================================================ */
.cmp-counter-room { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.counter-windows { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.counter-window {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: pointer; 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.5;
}
.counter-window:hover { border-color: var(--accent); }
.counter-window.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.counter-window .cw-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; }
.counter-window .cw-val { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); }
.counter-window .cw-desc { font-size: 0.68rem; color: var(--text-3); }

.cpi-breakdown { 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); }
.cpi-bars { display: flex; flex-direction: column; gap: var(--sp-1); }
.cpi-bar-row { display: flex; align-items: center; gap: var(--sp-2); }
.cpi-bar-row .cpi-label { min-width: 100px; font-size: 0.78rem; color: var(--text-2); }
.cpi-bar { flex: 1; height: 18px; border: 1px solid var(--glass-line); border-radius: 9px; background: var(--bg-elev); overflow: hidden; }
.cpi-fill { height: 100%; width: 0; transition: width 800ms cubic-bezier(0.22,1,0.36,1); }
.cpi-fill.base { background: var(--ch-ok); }
.cpi-fill.l1-miss { background: var(--knob-p); }
.cpi-fill.l2-miss { background: var(--power-curve); }
.cpi-fill.branch { background: var(--layer-microarch); }
.cpi-fill.other { background: var(--text-3); }
.cpi-bar-row .cpi-val { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink); min-width: 50px; text-align: right; }
.cpi-readout { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); text-align: center; }

.real-measure { 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); }
.measure-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.measure-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem;
  display: flex; flex-direction: column; gap: 4px;
}
.measure-card .mc-name { font-weight: 600; color: var(--text-1); }
.measure-card .mc-cache { color: var(--ch-warn); }
.measure-card .mc-cpi { color: var(--accent-ink); }

/* ============================================================
   S5 瓶颈渊CPUlator三旋钮实验台
   ============================================================ */
.cmp-bottleneck-cpulater { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.scenario-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.scenario-toggle .btn { min-width: 180px; }
.scenario-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.time-flow-chart { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.flow-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

.target-toggle { display: flex; gap: var(--sp-1); }
.target-toggle .btn { padding: 4px 10px; font-size: 0.78rem; min-height: 32px; }
.target-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.simulate-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent-ink);
  text-align: center; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.simulate-result b { color: var(--accent); font-size: 1.2rem; }
.amdahl-callback { width: 100%; padding: var(--sp-3); border: 1px solid var(--amdahl-formula); border-radius: var(--r-sm); background: rgba(16,185,129,0.10); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.amdahl-formula { font-family: var(--font-mono); font-size: 0.95rem; color: var(--amdahl-formula); text-align: center; }
.bottleneck-readout { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; text-align: center; }

/* ============================================================
   S6 能效塔·功耗之墙
   ============================================================ */
.cmp-power-wall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.freq-slider-row { display: flex; align-items: center; gap: var(--sp-2); }
.freq-slider-row input[type="range"] { flex: 1; }
.power-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.power-metrics { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; padding: var(--sp-2); border-top: 1px solid var(--glass-line); }
.thermal-warning {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--power-curve); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.12); font-size: 0.85rem; color: var(--power-curve);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.edp-annotation {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--edp-curve); border-radius: var(--r-sm);
  background: rgba(16,185,129,0.10); font-size: 0.85rem; color: var(--edp-curve);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.tops-compare { 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); }
.tops-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.tops-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); text-align: center; font-family: var(--font-mono); font-size: 0.78rem;
  display: flex; flex-direction: column; gap: 4px;
}
.tops-card .tc-name { font-weight: 600; color: var(--text-1); }
.tops-card .tc-tops { color: var(--accent); font-size: 1rem; }
.tops-card .tc-scene { color: var(--text-3); font-size: 0.7rem; }

/* ============================================================
   S7 三角阵·PPA之衡
   ============================================================ */
.cmp-ppa-triangle { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.triangle-area { width: 100%; display: flex; justify-content: center; padding: var(--sp-2); }
.ppa-triangle { width: 100%; max-width: 380px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); cursor: crosshair; }
.vertex-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.vertex-btn {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); cursor: pointer; font-family: var(--font-mono); font-size: 0.82rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 44px;
}
.vertex-btn:hover { border-color: var(--accent); }
.vertex-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }

.scenario-deploy { 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); }
.deploy-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.deploy-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); text-align: center; cursor: pointer;
  font-size: 0.82rem; transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.deploy-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.deploy-card.placed { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.deploy-card .dc-name { font-weight: 600; }
.deploy-card .dc-target { font-size: 0.72rem; color: var(--text-3); }
.opp-cost {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.10); font-size: 0.82rem; color: var(--ch-warn);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S8 方法阁·系统之道
   ============================================================ */
.cmp-methodology { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-layers { display: flex; flex-direction: column; gap: 4px; }
.stack-layer {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 50px;
}
.stack-layer:hover { border-color: var(--accent); transform: translateX(4px); }
.stack-layer.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.stack-layer .sl-name { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; }
.stack-layer .sl-detail { font-size: 0.75rem; color: var(--text-3); text-align: right; }
.stack-layer[data-layer="app"] { border-left: 4px solid var(--layer-app); }
.stack-layer[data-layer="algo"] { border-left: 4px solid var(--layer-algo); }
.stack-layer[data-layer="os"] { border-left: 4px solid var(--layer-os); }
.stack-layer[data-layer="isa"] { border-left: 4px solid var(--layer-isa); }
.stack-layer[data-layer="microarch"] { border-left: 4px solid var(--layer-microarch); }
.stack-layer[data-layer="circuit"] { border-left: 4px solid var(--layer-circuit); }
.stack-layer[data-layer="device"] { border-left: 4px solid var(--layer-device); }

.mirrors { 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); }
.mirror-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.mirror-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); text-align: center; font-size: 0.78rem;
  display: flex; flex-direction: column; gap: 4px;
}
.mirror-card[data-mirror="sim"] { border-color: var(--knob-scenario); background: rgba(14,165,233,0.08); }
.mirror-card[data-mirror="fpga"] { border-color: var(--edp-curve); background: rgba(16,185,129,0.08); }
.mirror-card[data-mirror="analytic"] { border-color: var(--accent); background: var(--accent-soft); }
.mirror-card .mc-name { font-weight: 600; font-size: 0.85rem; }
.mirror-card .mc-detail { font-size: 0.7rem; color: var(--text-3); }
.spectrum-bar {
  width: 100%; height: 28px; border: 1px solid var(--glass-line); border-radius: 14px;
  background: linear-gradient(90deg, var(--knob-scenario), var(--edp-curve), var(--accent));
  position: relative; margin-top: var(--sp-2);
}
.spectrum-marker {
  position: absolute; top: -4px; width: 4px; height: 36px; background: var(--text-1);
  border-radius: 2px; transition: left 400ms cubic-bezier(0.22,1,0.36,1);
}
.spectrum-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-3); margin-top: var(--sp-1); }

.layer-mismatch {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.10); font-size: 0.82rem; color: var(--ch-warn);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S9 Boss 战 · 测量之谬
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.fallacy-ledger {
  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.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.fallacy-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.fallacy-ledger .ledger-line b { color: var(--ch-boss); font-style: normal; }
.crack-projection {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft);
}
.crack-projection h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.crack-projection .crack-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);
}
.crack-projection .crack-item.lit {
  border-color: var(--ch-epiphany); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 8px var(--ch-epiphany-soft);
}

.roofline-stage { width: 100%; padding: var(--sp-3); border: 1px solid var(--roofline-compute); border-radius: var(--r-sm); background: rgba(212,168,83,0.06); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1); }
.roofline-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); cursor: crosshair; }
.roofline-judgment {
  margin-top: var(--sp-2); padding: var(--sp-2); text-align: center;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent-ink);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
  min-height: 32px;
}
.roofline-judgment.compute-bound { color: var(--roofline-compute); border-color: var(--roofline-compute); background: rgba(212,168,83,0.10); }
.roofline-judgment.memory-bound { color: var(--roofline-bandwidth); border-color: var(--roofline-bandwidth); background: rgba(14,165,233,0.10); }

.mask-shatter {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--mask-gold); border-radius: var(--r-sm);
  background: rgba(212,168,83,0.10); text-align: center;
  font-style: italic; color: var(--mask-gold); 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 知识图谱点亮 + Roofline剪影
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-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; }
.depth-readout.warn { color: var(--ch-warn); }
.depth-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.system-map h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.map-node.lit.center { border-color: var(--ch-epiphany); background: var(--ch-epiphany-soft); color: var(--ch-epiphany-ink); box-shadow: 0 0 12px var(--ch-epiphany-soft); }
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--accent-soft); }
  50% { box-shadow: 0 0 32px rgba(212,168,83,0.4); }
}
/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@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; }
  .predict-opts { grid-template-columns: 1fr; }
  .pedestal-row { grid-template-columns: repeat(2, 1fr); }
  .benchmark-row { grid-template-columns: 1fr; }
  .ratio-values { grid-template-columns: repeat(3, 1fr); }
  .counter-windows { grid-template-columns: repeat(2, 1fr); }
  .proc-compare { grid-template-columns: 1fr; }
  .measure-compare { grid-template-columns: 1fr; }
  .tops-row { grid-template-columns: 1fr; }
  .deploy-row { grid-template-columns: 1fr; }
  .mirror-row { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: repeat(2, 1fr); }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .bet-result, .predict-feedback, .trap-conclusion, .exclude-mark, .ceiling-readout, .assumption-compare, .reciprocal-check, .cpi-breakdown, .real-measure, .simulate-result, .amdahl-callback, .thermal-warning, .edp-annotation, .tops-compare, .scenario-deploy, .opp-cost, .mirrors, .layer-mismatch, .roofline-stage, .mask-shatter, .gustafson-flip, .formula-assembly, .formula-derivation, .ratio-data, .mean-calc { animation: none; }
  .pedestal.revealed { transition: none; }
}