/* ============================================================
   ch14「存储器系统深度」章节专属样式
   境界：结丹三层·存深域 · 金色 var(--ch-amber)（结丹期主色）
   Boss：内存墙之影 · 暗灰 #4A5568（裂缝暗影粒子）
   顿悟：存储青绿 #10B981（理解发生之处/裂痕愈合/顿悟脉冲）
   点缀：存储青绿 #10B981（ch14专属点缀色）
   背景：深夜蓝黑 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：结丹期金色 ---------- */
:root, :root[data-theme="light"] {
  --accent: #F59E0B;
  --accent-ink: #D97706;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --glass-line: rgba(245, 158, 11, 0.22);
  --glow: 0 0 18px rgba(245, 158, 11, 0.28);
  --on-accent: #1A1206;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #FBBF24;
  --accent-ink: var(--ch-amber);
  --accent-soft: rgba(245, 158, 11, 0.16);
  --glass-line: rgba(245, 158, 11, 0.20);
  --glow: 0 0 22px rgba(245, 158, 11, 0.34);
  --on-accent: #1A1206;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #4A5568;          /* 内存墙之影 · 暗灰裂缝 */
  --ch-boss-ink: #2D3748;
  --ch-boss-soft: rgba(74, 85, 104, 0.20);
  --ch-boss-line: rgba(74, 85, 104, 0.40);
  --ch-epiphany: #10B981;      /* 顿悟存储青绿（理解发生之处） */
  --ch-epiphany-soft: rgba(16, 185, 129, 0.16);
  --ch-epiphany-ink: #059669;
  --ch-gold: var(--ch-amber);          /* 结丹金 */
  --ch-gold-soft: rgba(245, 158, 11, 0.14);
  --ch-gold-ink: #D97706;
  --ch-teal: #10B981;          /* 存储青绿（ch14点缀色） */
  --ch-teal-soft: rgba(16, 185, 129, 0.14);
  --ch-teal-ink: #059669;
  /* 存储层次/MESI 各功能色 */
  --cpu-curve: var(--ch-amber);        /* CPU频率曲线（金） */
  --dram-curve: #64748B;       /* DRAM延迟曲线（灰蓝） */
  --state-m: var(--ch-amber);          /* M Modified（金） */
  --state-e: #22C55E;          /* E Exclusive（绿） */
  --state-s: #0EA5E9;          /* S Shared（蓝） */
  --state-i: #6B7280;          /* I Invalid（灰） */
  --state-o: #818CF8;          /* O Owned（靛紫·MOESI） */
  --state-f: #A78BFA;          /* F Forward（紫·MESIF） */
  --broadcast-color: #F87171;  /* 广播协议（红） */
  --directory-color: var(--ch-amber);  /* 目录协议（金） */
  --bus-color: #B87333;        /* 总线铜色 */
  --tear-color: #F87171;       /* 撕裂裂痕（红） */
  --tear-permanent: #7F1D1D;   /* 永久裂痕（暗红） */
  --scar-color: #475569;       /* 疤痕暗灰 */
  --stall-color: var(--ch-boss);      /* 停顿红 */
  --crack-color: #10B981;      /* 青绿裂纹（愈合） */
  --data-flow: #67E8F9;        /* 镜面数据流（青） */
  --invalidate-mark: var(--ch-boss);  /* 失效标记（红闪） */
  /* 状态色 */
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-dontcare: var(--ch-amber);
  --ch-bg-warm: #060A12;       /* 深夜蓝黑背景 */
}
/* ---------- 开场（opening） ---------- */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
  background: radial-gradient(ellipse at center, var(--ch-bg-warm, #0E1320) 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-teal-soft);
}
.inv-scar {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--tear-color);
  background: rgba(248,113,113,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #fate-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #fate-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#fate-scar-list p { font-size: 0.8rem; color: var(--tear-color); margin: var(--sp-1) 0; }
.sim-range, input[type="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); }

/* ============================================================
   S0 内存墙预测挑战器
   ============================================================ */
.cmp-memory-wall-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;
}
.bet-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); width: 100%; }
.bet-opt {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; font-size: 0.88rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 44px;
}
.bet-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.bet-opt.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.bet-opt.trap { color: var(--ch-warn); }
.dual-curve-panel { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.curve-slider-row { display: flex; align-items: center; gap: var(--sp-2); }
.curve-slider-row input[type="range"] { flex: 1; }
.wall-curve, .scale-curve, .depth-curve {
  width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
}
.curve-readout { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 24px; }
.freq-wall-note {
  padding: var(--sp-2); border: 1px solid var(--ch-teal); border-radius: var(--r-xs);
  background: var(--ch-teal-soft); font-size: 0.8rem; color: var(--ch-teal-ink);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

.latency-hourglass { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.latency-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.level-card {
  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.35;
  min-height: 60px; display: flex; flex-direction: column; justify-content: center;
}
.level-card:hover { border-color: var(--accent); }
.level-card.lit { opacity: 1; border-color: var(--accent); box-shadow: var(--glow); }
.level-card .level-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; }
.level-card .level-lat { font-size: 0.72rem; color: var(--text-3); }
.level-card .level-cyc { font-size: 0.65rem; color: var(--text-3); }
.level-card[data-tier="l1"] .level-name { color: #22C55E; }
.level-card[data-tier="l2"] .level-name { color: var(--state-s); }
.level-card[data-tier="l3"] .level-name { color: #8B5CF6; }
.level-card[data-tier="dram"] .level-name { color: var(--accent); }
.level-card[data-tier="ssd"] .level-name { color: #DC2626; }
.hourglass-readout { font-size: 0.8rem; color: var(--ch-teal-ink); min-height: 24px; }

.wall-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); font-style: italic;
}

/* ============================================================
   S1 缓存副本撕裂探索器
   ============================================================ */
.cmp-cache-tear-explorer { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.mirror-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.mirror {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 120px;
}
.mirror[data-core="0"] { border-left: 4px solid var(--ch-amber); }
.mirror[data-core="1"] { border-left: 4px solid #22C55E; }
.mirror[data-core="2"] { border-left: 4px solid var(--state-s); }
.mirror[data-core="3"] { border-left: 4px solid #A78BFA; }
.mirror-label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.mirror-surface {
  width: 100%; min-height: 40px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.mirror-surface.fresh { color: var(--ch-ok); border-color: var(--ch-ok); }
.mirror-surface.stale { color: var(--tear-color); border-color: var(--tear-color); animation: shake 300ms; }
.mirror-surface.modified { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.mirror-surface.invalid { color: var(--state-i); border-style: dashed; opacity: 0.5; }
.cache-state { font-size: 0.65rem; color: var(--text-3); font-family: var(--font-mono); }
.mirror-actions { display: flex; gap: 4px; }
.mirror-actions .btn { padding: 2px 8px; font-size: 0.72rem; min-height: 28px; }
.mirror.torn { border-color: var(--tear-color); box-shadow: 0 0 12px rgba(248,113,113,0.3); }

.memory-tower {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bus-color); border-radius: var(--r-sm);
  background: rgba(184,115,51,0.10); text-align: center; font-family: var(--font-mono);
}
.memory-tower b { color: var(--accent); font-size: 1.2rem; }

.op-control-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.timeline-tear { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.timeline-tear h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.timeline-axis { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.tl-op {
  padding: 4px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 0.75rem; background: var(--bg-elev);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.tl-op.write { border-color: var(--accent); color: var(--accent-ink); }
.tl-op.read-stale { border-color: var(--tear-color); color: var(--tear-color); }
.tl-crack {
  height: 4px; background: linear-gradient(90deg, transparent, var(--tear-color), transparent);
  border-radius: 2px; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.tl-crack-label { font-size: 0.72rem; color: var(--tear-color); text-align: center; font-style: italic; }
.cost-panel {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--tear-color); border-radius: var(--r-sm);
  background: rgba(248,113,113,0.10); font-size: 0.82rem; color: var(--tear-color);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S2 监听协议推导
   ============================================================ */
.cmp-snoop-bus { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.snoop-wires { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.snoop-wire {
  padding: var(--sp-2); border: 1px dashed 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: 50px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.snoop-wire:hover { border-color: var(--bus-color); }
.snoop-wire.connected { border-style: solid; border-color: var(--bus-color); background: rgba(184,115,51,0.12); }
.snoop-wire .wire-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.snoop-wire .wire-status { font-size: 0.65rem; color: var(--ch-ok); }

.bus-rail {
  width: 100%; height: 36px; border: 2px solid var(--bus-color); border-radius: var(--r-sm);
  background: rgba(184,115,51,0.08); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--bus-color);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.bus-rail.active { box-shadow: 0 0 16px rgba(184,115,51,0.4); }
.bus-rail.pulse { animation: busPulse 0.6s cubic-bezier(0.22,1,0.36,1); }
@keyframes busPulse { 0%,100% { box-shadow: 0 0 0 rgba(184,115,51,0); } 50% { box-shadow: 0 0 24px rgba(184,115,51,0.6); } }

.snoop-rules { display: flex; flex-direction: column; gap: var(--sp-2); }
.rule-block { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.rule-q { font-size: 0.85rem; color: var(--text-1); margin-bottom: var(--sp-2); }
.rule-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
.rule-opt {
  padding: var(--sp-1) var(--sp-2); 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);
  min-height: 40px; display: flex; align-items: center;
}
.rule-opt:hover { border-color: var(--accent); }
.rule-opt.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.rule-opt.correct { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.rule-opt.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }

.snoop-replay {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-teal); border-radius: var(--r-sm);
  background: var(--ch-teal-soft); font-size: 0.82rem; color: var(--ch-teal-ink);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S3 MESI四相阵状态机推演器
   ============================================================ */
.cmp-mesi-state-machine { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.state-derivation { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.state-slot {
  padding: var(--sp-2); border: 1px dashed 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: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.state-slot:hover { border-color: var(--accent); }
.state-slot.filled { border-style: solid; }
.state-slot[data-state="I"].filled { border-color: var(--state-i); background: rgba(107,114,128,0.12); }
.state-slot[data-state="E"].filled { border-color: var(--state-e); background: rgba(34,197,94,0.12); }
.state-slot[data-state="S"].filled { border-color: var(--state-s); background: rgba(14,165,233,0.12); }
.state-slot[data-state="M"].filled { border-color: var(--state-m); background: rgba(245,158,11,0.12); box-shadow: var(--glow); }
.state-rune { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; }
.state-slot[data-state="I"] .state-rune { color: var(--state-i); }
.state-slot[data-state="E"] .state-rune { color: var(--state-e); }
.state-slot[data-state="S"] .state-rune { color: var(--state-s); }
.state-slot[data-state="M"] .state-rune { color: var(--state-m); }
.state-desc { font-size: 0.68rem; color: var(--text-3); }

.transition-graph { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.transition-graph h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
#s3-trans-canvas { width: 100%; max-width: 480px; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.transition-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: var(--sp-2); }
.trans-item {
  padding: 4px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 0.72rem; background: var(--bg-elev); cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 32px; display: flex; align-items: center;
}
.trans-item:hover { border-color: var(--accent); }
.trans-item.connected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.trans-item .trans-arrow { color: var(--ch-epiphany); }

.sm-cost-visualizer { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft); }
.sm-cost-visualizer h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.cost-slider-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cost-slider-row input[type="range"] { flex: 1; }
.cost-formula { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); }

/* ============================================================
   S4 协议扩展与原子操作
   ============================================================ */
.cmp-protocol-extend { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.fifth-state-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.extend-demo {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-size: 0.82rem; color: var(--text-1); min-height: 40px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.extend-demo.mesif { border-color: var(--state-f); background: rgba(167,139,250,0.10); }
.extend-demo.moesi { border-color: var(--state-o); background: rgba(129,140,248,0.10); }
.rmw-demo { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.rmw-timeline { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-2) 0; }
.rmw-step {
  display: flex; align-items: center; gap: var(--sp-2); 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.75rem;
}
.rmw-step.read { border-left: 3px solid var(--state-s); }
.rmw-step.modify { border-left: 3px solid var(--accent); }
.rmw-step.write { border-left: 3px solid var(--ch-ok); }
.rmw-step.lost { border-left: 3px solid var(--ch-warn); opacity: 0.6; text-decoration: line-through; }
.lock-options { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-2) 0; }
.lock-compare {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-size: 0.8rem; margin-top: var(--sp-2);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S5 广播目录扩展性曲线追踪器
   ============================================================ */
.cmp-scalability-tracker { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.core-slider-row { display: flex; align-items: center; gap: var(--sp-2); }
.core-slider-row input[type="range"] { flex: 1; }
.protocol-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.protocol-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.protocol-toggle .btn.active.dir { background: rgba(16,185,129,0.14); border-color: var(--ch-teal); color: var(--ch-teal-ink); }
.bus-flood-visual {
  width: 100%; min-height: 50px; border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: var(--sp-2); transition: all 400ms cubic-bezier(0.22,1,0.36,1); flex-wrap: wrap;
}
.flood-particle { width: 6px; height: 6px; border-radius: 50%; background: var(--broadcast-color); opacity: 0.6; }
.bus-flood-visual.saturated { background: rgba(239,68,68,0.12); border-color: var(--ch-warn); }
.bus-flood-visual.directory { background: rgba(245,158,11,0.08); }
.bus-flood-visual.directory .flood-particle { background: var(--directory-color); }
.metrics-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; padding: var(--sp-2); border-top: 1px solid var(--glass-line); }

.directory-table { width: 100%; padding: var(--sp-2); border: 1px solid var(--ch-teal); border-radius: var(--r-sm); background: var(--ch-teal-soft); font-family: var(--font-mono); font-size: 0.75rem; }
.directory-table h4 { font-size: 0.85rem; color: var(--ch-teal-ink); margin-bottom: var(--sp-2); }
.dir-row { display: flex; gap: var(--sp-2); padding: 4px 0; border-bottom: 1px solid var(--glass-line); }
.dir-row .block-addr { color: var(--text-2); min-width: 80px; }
.dir-row .sharer-vector { color: var(--accent-ink); }

.directory-cost-panel { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm); background: rgba(239,68,68,0.08); font-size: 0.8rem; color: var(--ch-warn); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1); }

.wall-quote {
  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.85rem; color: var(--text-1); font-style: italic;
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S6 存储一致性模型
   ============================================================ */
.cmp-consistency-model { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.model-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.model-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.interleave-axis { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); min-height: 80px; }
.interleave-axis h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.axis-core { display: flex; align-items: center; gap: var(--sp-1); margin: var(--sp-1) 0; }
.axis-core .core-label { font-family: var(--font-mono); font-size: 0.75rem; min-width: 50px; color: var(--text-2); }
.axis-op {
  padding: 2px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 0.72rem; background: var(--bg-elev);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.axis-op.write { border-color: var(--accent); color: var(--accent-ink); }
.axis-op.read { border-color: var(--data-flow); color: var(--data-flow); }
.axis-op.fence { border-color: var(--ch-epiphany); color: var(--ch-epiphany-ink); background: var(--ch-epiphany-soft); }
.axis-op.violation { border-color: var(--ch-warn); color: var(--ch-warn); animation: shake 300ms; }

.model-verdict { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); font-size: 0.82rem; min-height: 40px; }
.model-verdict.ok { border-color: var(--ch-ok); color: var(--ch-ok); }
.model-verdict.violation { border-color: var(--ch-warn); color: var(--ch-warn); }
.perf-compare { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.perf-bar-row { display: flex; align-items: center; gap: var(--sp-2); }
.perf-bar-row .dim { min-width: 70px; }
.perf-bar { flex: 1; height: 14px; border: 1px solid var(--glass-line); border-radius: 7px; background: var(--bg-elev); overflow: hidden; }
.perf-fill { height: 100%; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.perf-bar-row b { font-family: var(--font-mono); color: var(--accent-ink); min-width: 40px; }

/* ============================================================
   S7 交错·预取·编译器优化
   ============================================================ */
.cmp-optimization-trio { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.interleave-panel, .prefetch-panel, .layout-panel { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.bank-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: var(--sp-2) 0; }
.bank-cell {
  height: 36px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-3);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.bank-cell.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.bank-cell.conflict { background: rgba(239,68,68,0.14); border-color: var(--ch-warn); color: var(--ch-warn); }
.interleave-toggle, .stride-toggle, .prefetch-toggle, .layout-toggle { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: var(--sp-1) 0; }
.interleave-toggle .btn.active, .stride-toggle .btn.active, .prefetch-toggle .btn.active, .layout-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.interleave-metrics, .prefetch-metrics, .layout-metrics { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-2); }

/* ============================================================
   S8 NUMA延迟地图 · PM新层
   ============================================================ */
.cmp-numa-pm { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.numa-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.numa-node {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); 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;
}
.numa-node:hover { border-color: var(--accent); }
.numa-node.local { border-color: var(--ch-ok); }
.numa-node.remote { border-color: var(--tear-color); }
.numa-node .node-label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; }
.numa-node .node-lat { font-size: 0.72rem; color: var(--text-3); }
.numa-node.local .node-lat { color: var(--ch-ok); }
.numa-node.remote .node-lat { color: var(--tear-color); }
.numa-readout { padding: var(--sp-2); font-size: 0.82rem; color: var(--text-1); min-height: 28px; }

.pm-pyramid { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.pyramid-layer {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem;
  display: flex; justify-content: space-between; align-items: center; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.pyramid-layer .layer-name { color: var(--text-2); }
.pyramid-layer .layer-lat { color: var(--accent-ink); }
.pyramid-layer.pm { border-color: var(--state-o); background: rgba(129,140,248,0.10); }
.pyramid-layer.pm .layer-name { color: var(--state-o); font-weight: 600; }
.pyramid-layer.pm .layer-lat { color: var(--state-o); }
.pm-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.pm-toggle .btn.active { background: var(--ch-teal-soft); border-color: var(--ch-teal); color: var(--ch-teal-ink); }

.latency-table { width: 100%; padding: var(--sp-2); border: 1px solid var(--ch-teal); border-radius: var(--r-sm); background: var(--ch-teal-soft); font-family: var(--font-mono); font-size: 0.75rem; }
.latency-table h4 { font-size: 0.85rem; color: var(--ch-teal-ink); margin-bottom: var(--sp-2); }
.lat-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--glass-line); }
.lat-row .lat-tier { color: var(--text-2); }
.lat-row .lat-val { color: var(--accent-ink); }

/* ============================================================
   S9 Boss 战 · 内存墙之影
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.ledger-panel {
  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);
}
.ledger-panel .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.scar-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);
}
.scar-projection h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.scar-projection .scar-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);
}
.scar-projection .scar-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);
}
.dram-popup {
  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.8rem; color: var(--ch-epiphany-ink);
  font-family: var(--font-mono); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.dram-popup h4 { color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }

/* ============================================================
   S10 知识图谱点亮 + 存储墙权衡
   ============================================================ */
.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); }
.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(245,158,11,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; }
  .bet-options { grid-template-columns: 1fr; }
  .mirror-grid { grid-template-columns: repeat(2, 1fr); }
  .snoop-wires { grid-template-columns: repeat(2, 1fr); }
  .state-derivation { grid-template-columns: repeat(2, 1fr); }
  .rule-opts { grid-template-columns: 1fr; }
  .latency-levels { grid-template-columns: repeat(2, 1fr); }
  .bank-grid { grid-template-columns: repeat(4, 1fr); }
  .map-grid { grid-template-columns: repeat(2, 1fr); }
  .numa-map { grid-template-columns: 1fr; }
  .transition-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .bet-result, .snoop-replay, .cost-panel, .freq-wall-note, .wall-quote, .directory-cost-panel, .lock-compare, .dram-popup { animation: none; }
  .mirror-surface.stale { animation: none; }
}