/* ============================================================
   ch23「并行计算与高性能计算」章节专属样式
   境界：化神一层·并行通天 · 通天紫 #8B5CF6
   Boss：带宽之壁 · 钢灰 #475569
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   点缀：通天紫 #8B5CF6（ch23专属点缀色）
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：通天紫 ---------- */
:root, :root[data-theme="light"] {
  --accent: #8B5CF6;
  --accent-ink: #7C3AED;
  --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: #FFFFFF;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #475569;          /* 带宽之壁 · 钢灰 */
  --ch-boss-ink: #94A3B8;
  --ch-boss-soft: rgba(71, 85, 105, 0.22);
  --ch-boss-line: rgba(71, 85, 105, 0.42);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-purple: #8B5CF6;        /* 通天紫 */
  --ch-purple-soft: rgba(139, 92, 246, 0.14);
  --ch-purple-ink: #7C3AED;
  /* 并行体系功能色 */
  --flynn-sisd: #94A3B8;       /* SISD 灰 */
  --flynn-simd: #8B5CF6;       /* SIMD 紫（GPU/SIMT） */
  --flynn-misd: var(--ch-amber);       /* MISD 琥珀 */
  --flynn-mimd: #10B981;       /* MIMD 翠绿 */
  /* GPU硬件色 */
  --sm-glow: #8B5CF6;          /* SM 紫光 */
  --warp-pulse: #A78BFA;      /* warp脉冲 */
  --core-active: #8B5CF6;     /* 激活核心 */
  --core-inactive: #3D3B4F;   /* 空转核心 */
  /* 内存层次色 */
  --mem-register: #F8FAFC;    /* 寄存器白 */
  --mem-shared: var(--ch-epiphany);      /* 共享内存金 */
  --mem-constant: #06B6D4;    /* 常量内存青 */
  --mem-global: #64748B;      /* 全局内存灰 */
  /* Roofline色 */
  --roofline-line: var(--ch-epiphany);   /* Roofline线金 */
  --compute-bound: #10B981;   /* 计算受限翠绿 */
  --memory-bound: var(--ch-boss);    /* 内存受限赤红 */
  --knee-point: var(--ch-amber);      /* 拐点琥珀 */
  --kernel-matmul: #8B5CF6;   /* 矩阵乘法紫 */
  --kernel-reduce: #06B6D4;    /* 归约青 */
  --kernel-sort: #FB923C;     /* 排序橙 */
  --warp-diverge: #9CA3AF;    /* warp分歧铁灰 */
  /* Amdahl色 */
  --formula-gold: var(--ch-epiphany);    /* 公式金链 */
  --amdahl-wall: #64748B;    /* Amdahl墙灰 */
  --bandwidth-wall: #475569; /* 带宽墙钢蓝 */
  --scar-crack: var(--ch-boss);     /* 核心之伤裂缝红 */
  --scar-healed: var(--ch-epiphany);    /* 核心之伤愈合金 */
  --strong-scale: #06B6D4;   /* 强扩展青 */
  --weak-scale: #10B981;     /* 弱扩展翠绿 */
  /* Boss色 */
  --boss-wall: #475569;       /* 带宽之壁钢灰 */
  --boss-wall-glow: rgba(71, 85, 105, 0.6);
  --answer-correct: #10B981;  /* 正解翠绿 */
  --answer-wrong: var(--ch-boss);    /* 错答红 */
  --answer-eliminated: #374151;/* 被刻痕划去灰 */
  --carve-line: var(--ch-epiphany);     /* 刻痕金线 */
  --breakthrough: #FBBF24;    /* 突破金光 */
  /* 范式色 */
  --openmp-color: #06B6D4;    /* OpenMP青 */
  --mpi-color: #10B981;       /* MPI翠绿 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #374151;
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);      /* 暖深蓝灰背景 */
  /* 频率墙色 */
  --freq-cool: #3B82F6;       /* 低频蓝 */
  --freq-hot: #F97316;        /* 高频橙 */
  --freq-burn: #DC2626;       /* 冒烟红 */
}

/* ---------- 开场（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, #14102A 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-purple-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--scar-crack);
  background: rgba(239,68,68,0.14); padding: 0 4px; border-radius: 3px;
}
.inv-crack.healed {
  color: var(--scar-healed); background: rgba(251,191,36,0.14);
}
#carve-panel, #scar-panel, #fog-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #scar-panel h3, #fog-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#carve-list p { font-size: 0.8rem; color: var(--ch-purple); margin: var(--sp-1) 0; }
#fog-list p { font-size: 0.8rem; color: var(--ch-boss-ink); margin: var(--sp-1) 0; }
#scar-status p { font-size: 0.8rem; color: var(--scar-crack); 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(55,65,81,0.16); }
.sim-range, input[type="range"], .knob-range, select, .block-input, .ai-input { 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); }

/* ---------- 通用滑块/输入 ---------- */
.tile-slider, .p-slider, .f-slider { width: 100%; height: 44px; }
.block-input, .ai-input {
  padding: 6px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1); font-family: var(--font-mono); font-size: 0.85rem; width: 100px;
}
.block-input:focus, .ai-input:focus { border-color: var(--accent); outline: none; }

/* ============================================================
   S0 并行加速反直觉挑战器
   ============================================================ */
.cmp-prediction-challenge { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.pc-question {
  text-align: center; font-size: 1rem; color: var(--accent-ink);
  padding: var(--sp-2); letter-spacing: 0.08em;
}
.pc-task-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.pc-task-card {
  padding: var(--sp-2); 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); min-height: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  opacity: 0.6;
}
.pc-task-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.pc-task-card.revealed { opacity: 1; }
.pc-task-card .pc-task-icon { font-size: 1.4rem; }
.pc-task-card .pc-task-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.pc-task-card .pc-task-verdict { font-size: 0.7rem; padding: 2px 6px; border-radius: 3px; }
.pc-task-card.compute .pc-task-verdict { color: var(--compute-bound); background: rgba(16,185,129,0.12); }
.pc-task-card.memory .pc-task-verdict { color: var(--memory-bound); background: rgba(239,68,68,0.12); }
.pc-task-card.cracked { border-color: var(--memory-bound); box-shadow: 0 0 12px rgba(239,68,68,0.2); }
.pc-task-card.gold { border-color: var(--ch-epiphany); box-shadow: 0 0 12px var(--ch-epiphany-soft); }
.pc-task-data {
  width: 100%; margin-top: 4px; padding: 4px 6px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.7rem; color: var(--text-2); display: none;
}
.pc-task-card.revealed .pc-task-data { display: block; animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1); }
.pc-fog-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.82rem; color: var(--text-2); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.pc-fog-ledger .fog-line { margin: var(--sp-1) 0; font-style: italic; }
.pc-fog-ledger .fog-line b { color: var(--ch-boss-ink); font-style: normal; }
.pc-ceiling-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-size: 0.85rem; color: var(--ch-epiphany-ink);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S1 频率墙 · Flynn四象限
   ============================================================ */
.cmp-freq-flynn { 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 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.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;
}
.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); }
.freq-bench { 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); }
.freq-canvas, .sm-canvas, .tower-canvas, .latency-canvas, .roofline-canvas, .dag-canvas, .brent-canvas, .reduce-canvas, .grid-canvas, .speedup-canvas, .depth-curve {
  width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
}
.freq-controls { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-2) 0; flex-wrap: wrap; }
.freq-result { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; }
.freq-result.warn { color: var(--ch-warn); }
.freq-result.burn { color: var(--freq-burn); }
.flynn-panel { 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); }
.flynn-panel h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.flynn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.flynn-cell {
  padding: var(--sp-2); border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); min-height: 70px; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); position: relative;
}
.flynn-cell[data-type="sisd"] { border-color: var(--flynn-sisd); }
.flynn-cell[data-type="simd"] { border-color: var(--flynn-simd); }
.flynn-cell[data-type="misd"] { border-color: var(--flynn-misd); }
.flynn-cell[data-type="mimd"] { border-color: var(--flynn-mimd); }
.flynn-cell.filled { border-style: solid; background: var(--accent-soft); }
.flynn-cell.filled[data-type="sisd"] { background: rgba(148,163,184,0.12); }
.flynn-cell.filled[data-type="simd"] { background: rgba(139,92,246,0.12); box-shadow: 0 0 12px var(--ch-purple-soft); }
.flynn-cell.filled[data-type="misd"] { background: rgba(245,158,11,0.12); }
.flynn-cell.filled[data-type="mimd"] { background: rgba(16,185,129,0.12); }
.flynn-cell .fc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.flynn-cell .fc-ex { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; }
.flynn-cards { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.flynn-card {
  padding: 6px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; font-size: 0.8rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.flynn-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.flynn-card.placed { opacity: 0.4; cursor: default; }
.flynn-result { font-size: 0.82rem; color: var(--text-2); min-height: 24px; }
.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 SIMT锁步流水线动画器
   ============================================================ */
.cmp-simt-pipeline { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.sp-sm-explorer { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); text-align: center; }
.sp-sm-diagram { margin-top: var(--sp-2); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.sp-warp-experiment { 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); }
.sp-warp-experiment h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.sp-thread-cards { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--sp-2); justify-content: center; }
.thread-card {
  width: 28px; height: 28px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--accent-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: var(--accent-ink); transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.thread-card:hover { transform: scale(1.1); box-shadow: var(--glow); }
.thread-card.placed { opacity: 0.3; cursor: default; }
.sp-warp-slot {
  width: 100%; min-height: 60px; padding: var(--sp-2); border: 2px dashed var(--warp-pulse); border-radius: var(--r-sm);
  background: rgba(167,139,250,0.06); display: flex; gap: 3px; flex-wrap: wrap; align-items: center; justify-content: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.sp-warp-slot.executing { border-style: solid; box-shadow: 0 0 20px var(--ch-purple-soft); }
.warp-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--core-inactive);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.warp-dot.active { background: var(--core-active); box-shadow: 0 0 8px var(--ch-purple-soft); }
.warp-dot.inactive { background: var(--core-inactive); opacity: 0.3; }
.warp-dot.pulse { animation: warpPulse 300ms cubic-bezier(0.22,1,0.36,1); }
@keyframes warpPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); box-shadow: 0 0 16px var(--warp-pulse); }
  100% { transform: scale(1); }
}
.warp-controls { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); flex-wrap: wrap; }
.sp-warp-trace { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); min-height: 28px; }
.sp-warp-trace.warn { color: var(--ch-warn); }
.sp-param-table { 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); }
.sp-param-table h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.param-cards { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.param-card {
  padding: 6px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.param-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.param-card.placed { opacity: 0.4; cursor: default; }
.param-slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.param-slot {
  padding: var(--sp-2); border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); min-height: 50px; text-align: center;
  font-size: 0.78rem; color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.param-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* ============================================================
   S3 CUDA编程 · 线程层次
   ============================================================ */
.cmp-cuda-model { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.code-assemble { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.code-blocks { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); justify-content: center; }
.code-block {
  padding: 6px 10px; border: 1px solid var(--accent); border-radius: var(--r-xs);
  background: var(--accent-soft); cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.code-block:hover { transform: translateY(-1px); box-shadow: var(--glow); }
.code-block.placed { opacity: 0.3; cursor: default; }
.code-target {
  width: 100%; min-height: 120px; padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-1);
  margin-bottom: var(--sp-2); white-space: pre-wrap;
}
.code-target .slot-empty { color: var(--text-3); font-style: italic; }
.code-target .slot-filled { color: var(--accent-ink); }
.compile-result { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.8rem; min-height: 24px; }
.compile-result.ok { color: var(--ch-ok); }
.compile-result.err { color: var(--ch-warn); }
.launch-config { 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); }
.launch-config h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.launch-config label { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; color: var(--text-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.warp-util { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); }
.warp-util.warn { color: var(--ch-warn); }
.warp-util.ok { color: var(--ch-ok); }
.grid-view { margin-top: var(--sp-2); }

/* ============================================================
   S4 CUDA内存 · 层次之塔
   ============================================================ */
.cmp-mem-tower { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.mem-tower { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.mem-cards { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0; justify-content: center; }
.mem-card {
  padding: 8px 14px; border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-family: var(--font-mono); font-size: 0.8rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.mem-card:hover { transform: translateY(-2px); }
.mem-card[data-type="register"] { border-color: var(--mem-register); }
.mem-card[data-type="shared"] { border-color: var(--mem-shared); }
.mem-card[data-type="constant"] { border-color: var(--mem-constant); }
.mem-card[data-type="global"] { border-color: var(--mem-global); }
.mem-card.placed { opacity: 0.4; cursor: default; }
.mem-slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mem-slot {
  padding: var(--sp-2); border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); min-height: 60px; text-align: center;
  font-size: 0.78rem; color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.mem-slot[data-type="register"] { border-color: var(--mem-register); }
.mem-slot[data-type="shared"] { border-color: var(--mem-shared); }
.mem-slot[data-type="constant"] { border-color: var(--mem-constant); }
.mem-slot[data-type="global"] { border-color: var(--mem-global); }
.mem-slot.filled { border-style: solid; }
.mem-slot.filled[data-type="register"] { background: rgba(248,250,252,0.08); color: var(--mem-register); }
.mem-slot.filled[data-type="shared"] { background: rgba(251,191,36,0.10); color: var(--mem-shared); }
.mem-slot.filled[data-type="constant"] { background: rgba(6,182,212,0.10); color: var(--mem-constant); }
.mem-slot.filled[data-type="global"] { background: rgba(100,116,139,0.12); color: var(--mem-global); }
.latency-compare { width: 100%; padding: var(--sp-3); border: 1px solid var(--mem-shared); border-radius: var(--r-sm); background: rgba(251,191,36,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }

/* ============================================================
   S5 Roofline算术强度追踪器
   ============================================================ */
.cmp-roofline-tracer { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.rt-header { text-align: center; }
.rt-subtitle { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); }
.rt-roofline-chart { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.rt-tile-control { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.rt-tile-control label { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; color: var(--text-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.rt-tile-value { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); margin-top: var(--sp-1); }
.rt-arithmetic-display { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-1); margin-top: var(--sp-1); }
.ai-zone { font-size: 0.78rem; padding: 2px 6px; border-radius: 3px; }
.ai-zone.mem { color: var(--memory-bound); background: rgba(239,68,68,0.12); }
.ai-zone.compute { color: var(--compute-bound); background: rgba(16,185,129,0.12); }
.rt-kernel-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.rt-kernel-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.kernel-tab {
  padding: 6px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; font-size: 0.8rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.kernel-tab:hover { border-color: var(--accent); }
.kernel-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.rt-kernel-detail { font-size: 0.82rem; color: var(--text-2); min-height: 60px; }
.rt-kernel-detail .kd-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--glass-line); }
.rt-kernel-detail .kd-label { color: var(--text-3); }
.rt-kernel-detail .kd-value { font-family: var(--font-mono); color: var(--text-1); }
.rt-scar-form { width: 100%; padding: var(--sp-3); border: 1px solid var(--scar-crack); border-radius: var(--r-sm); background: rgba(239,68,68,0.08); animation: shatterIn 600ms cubic-bezier(0.22,1,0.36,1); }
.scar-crack-display { text-align: center; font-style: italic; color: var(--scar-crack); font-size: 0.85rem; }

/* ============================================================
   S6 DAG分解 · 归约树 · Brent定理
   ============================================================ */
.cmp-dag-reduce { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dag-panel, .brent-panel, .reduce-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.dag-panel h4, .brent-panel h4, .reduce-panel h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.dag-metrics, .brent-metrics, .reduce-tail { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; }
.dag-metrics.warn, .reduce-tail.warn { color: var(--ch-warn); }
.brent-panel label, .reduce-panel label { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; color: var(--text-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }

/* ============================================================
   S7 OpenMP vs MPI
   ============================================================ */
.cmp-paradigm { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.paradigm-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.paradigm-toggle .btn { padding: 8px 16px; font-size: 0.85rem; }
.paradigm-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.paradigm-code {
  width: 100%; padding: 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.8rem; color: var(--text-1);
  white-space: pre-wrap; min-height: 120px; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.paradigm-code .pragma { color: var(--openmp-color); }
.paradigm-code .mpi-fn { color: var(--mpi-color); }
.paradigm-code .comment { color: var(--text-3); font-style: italic; }
.paradigm-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2);
}
.feature-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-size: 0.8rem;
}
.feature-card h5 { font-size: 0.82rem; margin-bottom: 4px; }
.feature-card.openmp h5 { color: var(--openmp-color); }
.feature-card.mpi h5 { color: var(--mpi-color); }
.feature-card p { font-size: 0.75rem; color: var(--text-2); }
.paradigm-cards { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); justify-content: center; }
.paradigm-card {
  padding: 6px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; font-size: 0.78rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.paradigm-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.paradigm-card.placed { opacity: 0.4; cursor: default; }
.paradigm-slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.paradigm-slot {
  padding: var(--sp-2); border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); min-height: 50px; text-align: center;
  font-size: 0.78rem; color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.paradigm-slot.filled { border-style: solid; }
.paradigm-slot.filled.openmp { border-color: var(--openmp-color); background: rgba(6,182,212,0.10); color: var(--openmp-color); }
.paradigm-slot.filled.mpi { border-color: var(--mpi-color); background: rgba(16,185,129,0.10); color: var(--mpi-color); }

/* ============================================================
   S8 Amdahl定律推导组装器
   ============================================================ */
.cmp-amdahl { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.aa-formula-chain { 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); }
.aa-formula-step {
  padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-3);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 48px;
  display: flex; align-items: center; gap: var(--sp-2);
}
.aa-formula-step .step-num {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--glass-line);
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--text-3); flex-shrink: 0;
}
.aa-formula-step .step-expr { flex: 1; }
.aa-formula-step.filled { border-style: solid; border-color: var(--formula-gold); background: rgba(251,191,36,0.08); color: var(--formula-gold); }
.aa-formula-step.filled .step-num { border-color: var(--formula-gold); background: var(--ch-epiphany-soft); color: var(--ch-epiphany-ink); }
.aa-formula-step.complete { border-color: var(--formula-gold); box-shadow: 0 0 12px var(--ch-epiphany-soft); }
.aa-formula-blocks { display: flex; gap: var(--sp-1); flex-wrap: wrap; padding: var(--sp-2); justify-content: center; }
.aa-formula-block {
  padding: 6px 12px; border: 1px solid var(--formula-gold); border-radius: var(--r-xs);
  background: rgba(251,191,36,0.08); cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; color: var(--formula-gold);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.aa-formula-block:hover { transform: translateY(-1px); box-shadow: 0 0 8px var(--ch-epiphany-soft); }
.aa-formula-block.placed { opacity: 0.3; cursor: default; }
.aa-slider-panel { 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); }
.aa-slider-panel label { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; color: var(--text-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.aa-f-value, .aa-max-speedup { font-family: var(--font-mono); font-size: 0.85rem; color: var(--formula-gold); margin-top: var(--sp-1); }
.aa-scar-repair { width: 100%; padding: var(--sp-3); border: 1px solid var(--scar-crack); border-radius: var(--r-sm); background: rgba(239,68,68,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.aa-scar-repair h4 { font-size: 0.9rem; color: var(--scar-crack); margin-bottom: var(--sp-2); }
.aa-scar-repair label { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.82rem; color: var(--text-2); margin: var(--sp-2) 0; flex-wrap: wrap; }
.aa-scar-crack { padding: var(--sp-2); border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: var(--sp-2); }
.aa-scar-crack.unhealed { background: rgba(239,68,68,0.10); color: var(--scar-crack); border: 1px solid var(--scar-crack); }
.aa-scar-crack.healing { background: rgba(251,191,36,0.10); color: var(--scar-healed); border: 1px solid var(--scar-healed); }
.aa-scar-crack.healed { background: var(--ch-epiphany-soft); color: var(--ch-epiphany-ink); border: 1px solid var(--scar-healed); }
.aa-scar-status { margin-top: var(--sp-2); font-size: 0.82rem; min-height: 24px; }
.aa-scar-status.ok { color: var(--ch-ok); }
.aa-scar-status.err { color: var(--ch-warn); }
.aa-scaling-toggle { 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); }
.aa-scaling-toggle .btn { padding: 6px 12px; font-size: 0.82rem; margin-right: var(--sp-1); }
.aa-scaling-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.scaling-result { margin-top: var(--sp-2); font-size: 0.82rem; color: var(--text-2); min-height: 28px; }

/* ============================================================
   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); }
.fog-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);
}
.fog-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.fog-ledger .ledger-line b { color: var(--ch-boss-ink); 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: 52px;
  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: rgba(16,185,129,0.12); color: var(--answer-correct); box-shadow: 0 0 12px rgba(16,185,129,0.2); }
.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(55,65,81,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: rgba(16,185,129,0.10); 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; }
.crack-projection {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--carve-line); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.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(--carve-line); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 8px var(--ch-epiphany-soft);
}
.wall-thickness { width: 100%; margin-top: var(--sp-2); }
.thickness-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 4px; }
.thickness-bar { width: 100%; height: 10px; border: 1px solid var(--ch-boss-line); border-radius: 5px; background: var(--bg-sunk); overflow: hidden; }
.thickness-fill { height: 100%; width: 20%; background: var(--boss-wall); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.wall-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 HPC集群 · 知识图谱点亮
   ============================================================ */
.cmp-hpc-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cluster-topo { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.topo-cards { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); justify-content: center; }
.topo-card {
  padding: 6px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; font-size: 0.78rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.topo-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.topo-card.placed { opacity: 0.4; cursor: default; }
.topo-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.topo-slot {
  padding: var(--sp-2); border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); min-height: 56px; text-align: center;
  font-size: 0.75rem; color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.topo-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.puzzle-area { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.puzzle-piece {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: default;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.3;
}
.puzzle-piece.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.puzzle-piece .pp-name { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece .pp-tag { font-size: 0.6rem; color: var(--text-3); }
.chain-silhouette { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.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; }
.quantum-ripple {
  margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--mem-constant); border-radius: var(--r-sm);
  background: rgba(6,182,212,0.08); text-align: center; font-style: italic; color: var(--mem-constant);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.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; }
  .pc-task-grid { grid-template-columns: 1fr; }
  .predict-opts { grid-template-columns: 1fr; }
  .flynn-grid { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .param-slots { grid-template-columns: 1fr; }
  .mem-slots { grid-template-columns: 1fr; }
  .paradigm-features { grid-template-columns: 1fr; }
  .paradigm-slots { grid-template-columns: 1fr; }
  .topo-slots { grid-template-columns: 1fr; }
  .puzzle-area { grid-template-columns: repeat(2, 1fr); }
  .freq-controls { flex-direction: column; align-items: stretch; }
  .warp-controls { flex-direction: column; align-items: stretch; }
}
@keyframes riftOpen {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .predict-feedback, .exclude-mark, .freq-bench, .flynn-panel, .sp-sm-diagram, .sp-warp-experiment, .sp-param-table,
  .launch-config, .latency-compare, .rt-scar-form, .aa-slider-panel, .aa-scar-repair, .aa-scaling-toggle,
  .crack-projection, .wall-collapse, .quantum-ripple, .pc-fog-ledger, .pc-ceiling-map, .warp-dot,
  .aa-formula-step, .code-target, .compile-result, .grid-view, .scar-crack-display { animation: none; }
  .pc-task-card:hover, .flynn-card:hover, .param-card:hover, .code-block:hover, .mem-card:hover, .kernel-tab:hover,
  .paradigm-card:hover, .topo-card:hover, .aa-formula-block:hover { transform: none; }
}