/* ============================================================
   ch19「计算机网络：分布式系统的血脉」章节专属样式
   境界：元婴三层·网络织脉 · 青碧 var(--ch-dontcare)
   Boss：丢包之影 · 暗灰 #475569
   顿悟：青碧辉 var(--ch-dontcare)（理解发生之处/青碧光裂纹/顿悟脉冲）
   点缀：理性金 var(--ch-epiphany)（RTT/RTO/最短路径/TLS/破晓）
   乱序残影：赤红 var(--ch-boss)（信包伤痕/拥塞暗红）
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：青碧 ---------- */
:root, :root[data-theme="light"] {
  --accent: #0891B2;
  --accent-ink: #0E7490;
  --accent-soft: rgba(6, 182, 212, 0.12);
  --glass-line: rgba(6, 182, 212, 0.22);
  --glow: 0 0 18px rgba(6, 182, 212, 0.28);
  --on-accent: #042F2E;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #22D3EE;
  --accent-ink: #06B6D4;
  --accent-soft: rgba(6, 182, 212, 0.16);
  --glass-line: rgba(6, 182, 212, 0.20);
  --glow: 0 0 22px rgba(6, 182, 212, 0.34);
  --on-accent: #042F2E;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #475569;          /* 丢包之影 · 暗灰 */
  --ch-boss-ink: #64748B;
  --ch-boss-soft: rgba(71, 85, 105, 0.18);
  --ch-boss-line: rgba(71, 85, 105, 0.38);
  --ch-epiphany: #06B6D4;      /* 顿悟青碧（理解发生之处） */
  --ch-epiphany-soft: rgba(6, 182, 212, 0.16);
  --ch-epiphany-ink: #0E7490;
  --ch-gold: var(--ch-epiphany);          /* 理性金（RTT/最短路径/TLS/破晓） */
  --ch-gold-soft: rgba(251, 191, 36, 0.14);
  --ch-gold-ink: #B45309;
  --ch-network: #06B6D4;       /* 网络主色（ch19点缀色） */
  --ch-network-soft: rgba(6, 182, 212, 0.14);
  --ch-network-ink: #0E7490;
  /* 协议栈各层色 */
  --layer-app: #06B6D4;        /* 应用层青碧 */
  --layer-trans: #10B981;      /* 传输层翠 */
  --layer-net: var(--ch-amber);        /* 网络层琥珀 */
  --layer-link: #A78BFA;       /* 链路层紫 */
  --layer-phys: #6B7280;       /* 物理层灰 */
  /* 协议色 */
  --proto-http: #06B6D4;       /* HTTP青碧 */
  --proto-dns: #A78BFA;        /* DNS靛紫 */
  --proto-mail: var(--ch-amber);       /* MAIL琥珀 */
  /* 交换方式色 */
  --switch-circuit: #10B981;   /* 电路交换翠绿 */
  --switch-message: #A78BFA;   /* 报文交换靛紫 */
  --switch-packet: #06B6D4;    /* 分组交换青碧 */
  /* 可靠传输色 */
  --pkt-sent: #06B6D4;         /* 发送信包青碧 */
  --pkt-ack: var(--ch-epiphany);          /* ACK确认金 */
  --pkt-retransmit: var(--ch-boss);   /* 重传信包红边 */
  --pkt-lost: #7F1D1D;         /* 丢失信包暗红残影 */
  --pkt-healed: #10B981;       /* 愈合信包绿 */
  --window-band: rgba(6,182,212,0.2); /* 窗口光带 */
  /* 拥塞控制色 */
  --send-rate: #06B6D4;        /* 发送速率青碧 */
  --loss-rate: var(--ch-boss);        /* 丢包率红 */
  --goodput: #10B981;          /* 有效吞吐绿 */
  --rwnd-color: #A78BFA;       /* 接收窗口紫 */
  --cwnd-color: #06B6D4;       /* 拥塞窗口青碧 */
  --ssthresh-color: var(--ch-epiphany);   /* 阈值金 */
  --congestion-collapse: #DC2626; /* 拥塞崩溃暗红 */
  /* 路由算法色 */
  --node-color: #06B6D4;       /* 星图节点青碧 */
  --link-color: #38BDF8;       /* 链路天蓝 */
  --dv-particle: #A78BFA;      /* 距离向量粒子靛紫 */
  --ls-flood: #06B6D4;         /* 链路状态泛洪青碧 */
  --spt-gold: var(--ch-epiphany);         /* 最短路径树金 */
  --count-infinity: var(--ch-boss);   /* 计数到无穷红 */
  --poison-reverse: #10B981;   /* 水平分裂修复绿 */
  --converged: #22C55E;        /* 收敛绿 */
  --oscillating: #F59E0B;      /* 震荡琥珀 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #374151;
  --packet-scar: var(--ch-boss);      /* 信包伤痕红 */
  --crack-projection: #06B6D4; /* 刻痕投影青碧微光 */
  --particle-flow: #06B6D4;    /* 脉络光流粒子色 */
  --scar-shadow: #475569;      /* 影脸灰 */
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-dontcare: #06B6D4;
  --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, var(--ch-bg-warm, #0B1820) 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-network-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--packet-scar);
  background: rgba(239,68,68,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #packet-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #packet-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#packet-scar-list p { font-size: 0.8rem; color: var(--packet-scar); 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.20); }
.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; }

.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);
}

/* ============================================================
   S0 发送即达预测挑战器
   ============================================================ */
.cmp-delivery-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-zone { 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.05em;
}
.app-silhouettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); width: 100%; }
.app-silhouette {
  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: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.app-silhouette:hover { border-color: var(--accent); transform: translateY(-2px); opacity: 1; }
.app-silhouette.guessed {
  border-color: var(--ch-warn); background: rgba(239,68,68,0.10); opacity: 1;
}
.app-silhouette .app-name { font-family: var(--font-mono); font-weight: 600; }
.app-silhouette .app-guarantee {
  font-size: 0.68rem; color: var(--ch-warn); margin-top: 4px;
}
.bet-prompt { text-align: center; font-size: 0.82rem; color: var(--text-2); font-style: italic; }
.shadow-account {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
  font-size: 0.82rem; color: var(--text-2); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.shadow-account b { color: var(--ch-boss); font-style: normal; }

.encapsulation-zone { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.encap-layers { display: flex; flex-direction: column; gap: 4px; margin: var(--sp-2) 0; }
.encap-layer {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  opacity: 0.4; transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.encap-layer.lit { opacity: 1; border-color: var(--accent); box-shadow: var(--glow); }
.encap-layer[data-layer="app"] { border-left: 4px solid var(--layer-app); }
.encap-layer[data-layer="trans"] { border-left: 4px solid var(--layer-trans); }
.encap-layer[data-layer="net"] { border-left: 4px solid var(--layer-net); }
.encap-layer[data-layer="link"] { border-left: 4px solid var(--layer-link); }
.encap-layer[data-layer="phys"] { border-left: 4px solid var(--layer-phys); }
.encap-layer .el-name { font-weight: 600; }
.encap-layer .el-desc { font-size: 0.7rem; color: var(--text-3); }

/* ============================================================
   S1 应用层三协议
   ============================================================ */
.cmp-app-trio { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.app-tabs { display: flex; gap: var(--sp-2); justify-content: center; }
.app-tabs .btn { min-width: 90px; }
.app-tabs .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.app-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); }
.method-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.method-btn {
  padding: 4px 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);
}
.method-btn:hover { border-color: var(--proto-http); }
.method-btn.active { background: rgba(6,182,212,0.12); border-color: var(--proto-http); color: var(--proto-http); }
.req-struct {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; min-height: 80px; margin-bottom: var(--sp-2);
}
.req-struct .req-line { margin: 2px 0; color: var(--text-2); }
.req-struct .req-line.head { color: var(--proto-http); }
.state-demo {
  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);
}
.state-demo.consistent { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.domain-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: 220px;
}
.dns-mode-toggle { display: flex; gap: var(--sp-1); margin: var(--sp-2) 0; }
.dns-mode-toggle .btn { padding: 4px 10px; font-size: 0.78rem; min-height: 32px; }
.dns-mode-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.dns-chain { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-2); }
.dns-node {
  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.78rem;
  display: flex; align-items: center; gap: var(--sp-2); opacity: 0.4; transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.dns-node.lit { opacity: 1; border-color: var(--proto-dns); background: rgba(167,139,250,0.10); }
.dns-node .dn-step { color: var(--text-3); font-size: 0.7rem; min-width: 60px; }
.dns-node .dn-name { color: var(--proto-dns); font-weight: 600; }
.dns-node .dn-answer { color: var(--text-2); font-size: 0.72rem; }
.mail-flow { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; flex-wrap: wrap; }
.mail-node {
  padding: 6px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem;
}
.mail-node.push { border-color: var(--proto-mail); color: var(--proto-mail); }
.mail-node.pull { border-color: var(--proto-dns); color: var(--proto-dns); }
.mail-arrow { color: var(--text-3); font-size: 1.1rem; }
.mail-toggle { display: flex; gap: var(--sp-1); margin: var(--sp-2) 0; }
.mail-toggle .btn { padding: 4px 10px; font-size: 0.78rem; min-height: 32px; }
.mail-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.mail-result {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); font-size: 0.82rem; color: var(--accent-ink);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.app-lit {
  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 三种交换方式 · 丢包实测
   ============================================================ */
.cmp-switch-compare { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.switch-belts { display: flex; flex-direction: column; gap: var(--sp-2); }
.switch-belt {
  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; gap: var(--sp-2); min-height: 60px;
}
.switch-belt:hover { border-color: var(--accent); transform: translateX(4px); }
.switch-belt.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.switch-belt[data-sw="circuit"] { border-left: 4px solid var(--switch-circuit); }
.switch-belt[data-sw="message"] { border-left: 4px solid var(--switch-message); }
.switch-belt[data-sw="packet"] { border-left: 4px solid var(--switch-packet); }
.switch-belt .sb-name { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; min-width: 80px; }
.switch-belt .sb-desc { font-size: 0.78rem; color: var(--text-2); }
.load-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); }
.loss-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.loss-readout { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; margin: var(--sp-1) 0; }

/* ============================================================
   S3 TCP/UDP抉择 · 握手与挥手
   ============================================================ */
.cmp-handshake { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.proto-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.proto-card {
  padding: var(--sp-2) var(--sp-3); 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);
  display: flex; flex-direction: column; gap: 4px;
}
.proto-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.proto-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.proto-card[data-proto="tcp"] { border-left: 4px solid var(--layer-trans); }
.proto-card[data-proto="udp"] { border-left: 4px solid var(--proto-mail); }
.proto-card .pc-name { font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; }
.proto-card .pc-feat { font-size: 0.72rem; color: var(--text-3); }
.handshake-panel, .wave-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); }
.hs-steps, .wave-steps { display: flex; flex-direction: column; gap: 4px; margin: var(--sp-2) 0; }
.hs-step, .wave-step {
  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.78rem;
  display: flex; align-items: center; gap: var(--sp-2); opacity: 0.4; transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.hs-step.active, .wave-step.active { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.hs-step.done, .wave-step.done { opacity: 1; border-color: var(--ch-ok); background: rgba(34,197,94,0.10); }
.hs-step .hs-num, .wave-step .ws-num { color: var(--text-3); font-size: 0.7rem; min-width: 30px; }
.hs-feedback, .wave-readout {
  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);
}
.hs-feedback.ok, .wave-readout.ok { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }

/* ============================================================
   S4 可靠传输曲线追踪器
   ============================================================ */
.cmp-reliable-tracker { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.stage-selector { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.stage-selector .btn { min-width: 90px; }
.stage-selector .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.flow-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.window-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); }
.window-slider-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.window-slider-row input[type="range"] { flex: 1; }
.metrics-panel { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.82rem; }
.metrics-panel .metric b { color: var(--accent); font-size: 1.05rem; }
.rtt-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-gold); border-radius: var(--r-sm); background: var(--ch-gold-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.rtt-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.rtt-readout { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ch-gold-ink); margin-top: var(--sp-1); min-height: 24px; }
.healed-mark {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--pkt-healed); border-radius: var(--r-sm);
  background: rgba(16,185,129,0.10); font-size: 0.85rem; color: var(--pkt-healed); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S5 拥塞控制三旋钮实验台
   ============================================================ */
.cmp-congestion-threeknob { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.window-push-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.window-push-row input[type="range"] { flex: 1; min-width: 200px; }
.triple-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.collapse-zone {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--congestion-collapse); border-radius: var(--r-sm);
  background: rgba(220,38,38,0.14); font-size: 0.85rem; color: var(--congestion-collapse);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.dual-window { 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); }
.dual-bars { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.dual-bar-row { display: flex; align-items: center; gap: var(--sp-2); }
.dual-bar-row .db-label { min-width: 80px; font-family: var(--font-mono); font-size: 0.78rem; }
.dual-bar { flex: 1; height: 22px; border: 1px solid var(--glass-line); border-radius: 11px; background: var(--bg-elev); overflow: hidden; }
.dual-fill { height: 100%; transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.dual-fill.rwnd { background: var(--rwnd-color); }
.dual-fill.cwnd { background: var(--cwnd-color); }
.dual-bar-row .db-val { font-family: var(--font-mono); font-size: 0.78rem; min-width: 40px; text-align: right; }
.actual-window {
  padding: var(--sp-2); text-align: center; font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft);
}
.actual-window b { color: var(--accent); font-size: 1.1rem; }
.aimd-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--cwnd-color); border-radius: var(--r-sm); background: rgba(6,182,212,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.aimd-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.aimd-phases { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); margin: var(--sp-2) 0; }
.aimd-phase {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.75rem; opacity: 0.5; transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.aimd-phase.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   S6 IP编址 · 子网划分 · CIDR
   ============================================================ */
.cmp-ip-addressing { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.addr-grid-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.addr-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; flex: 0 0 auto; }
.addr-bit {
  width: 28px; height: 28px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.addr-bit.net { border-color: var(--layer-net); background: rgba(245,158,11,0.12); color: var(--layer-net); }
.addr-bit.host { border-color: var(--layer-app); background: rgba(6,182,212,0.12); color: var(--layer-app); }
.addr-info { flex: 1; min-width: 180px; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.82rem; }
.addr-info .ai-line { margin: 2px 0; }
.addr-info .ai-line b { color: var(--accent); }
.subnet-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.subnet-result {
  margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink);
}
.subnet-result b { color: var(--accent); }
.cidr-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); }
.cidr-merge { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: var(--sp-2) 0; }
.cidr-block {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem; transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.cidr-block.merged { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.cidr-result {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-ok); border-radius: var(--r-sm);
  background: rgba(34,197,94,0.10); font-size: 0.82rem; color: var(--ch-ok);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S7 路由算法相图探索器
   ============================================================ */
.cmp-routing-explorer { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.algo-selector { display: flex; gap: var(--sp-2); justify-content: center; }
.algo-selector .btn { min-width: 110px; }
.algo-selector .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.topo-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.dv-panel, .ls-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); }
.iter-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.iter-row input[type="range"] { flex: 1; min-width: 120px; }
.distance-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--sp-1); margin: var(--sp-2) 0; }
.dt-card {
  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; text-align: center;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.dt-card.inf { border-color: var(--count-infinity); background: rgba(239,68,68,0.12); color: var(--count-infinity); }
.dt-card .dt-node { font-weight: 600; color: var(--text-1); }
.dt-card .dt-dist { color: var(--accent-ink); font-size: 0.9rem; }
.phase-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-2); }
.ls-flood { margin: var(--sp-2) 0; font-size: 0.82rem; color: var(--text-2); min-height: 28px; }
.spt-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-2); }
.protocol-tablets { width: 100%; padding: var(--sp-2); }
.tablet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.protocol-tablet {
  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; flex-direction: column; gap: 4px; opacity: 0.5;
}
.protocol-tablet:hover { border-color: var(--accent); opacity: 0.8; }
.protocol-tablet.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.protocol-tablet[data-proto="rip"] { border-left: 4px solid var(--dv-particle); }
.protocol-tablet[data-proto="ospf"] { border-left: 4px solid var(--ls-flood); }
.protocol-tablet[data-proto="bgp"] { border-left: 4px solid var(--spt-gold); }
.protocol-tablet .pt-name { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; }
.protocol-tablet .pt-feat { font-size: 0.7rem; color: var(--text-3); }

/* ============================================================
   S8 链脉回廊 · 全栈巡视
   ============================================================ */
.cmp-linkstack { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-tabs { display: flex; gap: var(--sp-2); justify-content: center; }
.stack-tabs .btn { min-width: 100px; }
.stack-tabs .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.stack-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); }
.crc-demo { margin: var(--sp-2) 0; }
.frame-bits { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.frame-bit {
  width: 22px; height: 22px; border: 1px solid var(--glass-line); border-radius: 3px;
  background: var(--bg-sunk); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.7rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.frame-bit.flipped { border-color: var(--ch-warn); background: rgba(239,68,68,0.20); color: var(--ch-warn); }
.crc-result {
  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);
}
.crc-result.ok { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.crc-result.bad { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.switch-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.switch-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-size: 0.78rem; display: flex; flex-direction: column; gap: 4px;
}
.switch-card.hub { border-left: 4px solid var(--ch-warn); }
.switch-card.switch { border-left: 4px solid var(--ch-ok); }
.switch-card .sc-name { font-weight: 600; font-size: 0.85rem; }
.nat-flow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0; }
.nat-device {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem;
}
.nat-device.private { border-color: var(--rwnd-color); color: var(--rwnd-color); }
.nat-device.public { border-color: var(--spt-gold); color: var(--spt-gold); }
.nat-arrow { color: var(--text-3); }
.nat-note {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--spt-gold); border-radius: var(--r-sm);
  background: var(--ch-gold-soft); font-size: 0.82rem; color: var(--ch-gold-ink);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.crypto-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-2) 0; }
.crypto-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-size: 0.75rem; text-align: center;
  display: flex; flex-direction: column; gap: 4px; opacity: 0.5; transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.crypto-card.lit { opacity: 1; border-color: var(--ch-gold); background: var(--ch-gold-soft); }
.crypto-card .cc-name { font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; }
.crypto-card .cc-desc { font-size: 0.7rem; color: var(--text-3); }
.tls-steps { display: flex; flex-direction: column; gap: 4px; margin: var(--sp-2) 0; }
.tls-step {
  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;
  opacity: 0.4; transition: all 400ms cubic-bezier(0.22,1,0.36,1); display: flex; gap: var(--sp-2); align-items: center;
}
.tls-step.lit { opacity: 1; border-color: var(--ch-gold); background: var(--ch-gold-soft); }
.tls-step .ts-num { color: var(--text-3); font-size: 0.68rem; min-width: 24px; }
.tls-result {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-gold); border-radius: var(--r-sm);
  background: var(--ch-gold-soft); font-size: 0.82rem; color: var(--ch-gold-ink);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.stack-lit {
  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);
}

/* ============================================================
   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); }
.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%; background: var(--ch-epiphany); transition: width 600ms cubic-bezier(0.22,1,0.36,1); width: 0; }
.shadow-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); font-style: italic;
}
.shadow-ledger b { color: var(--ch-boss); font-style: normal; }
.shadow-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.shadow-ledger .ledger-line b { color: var(--ch-boss); 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-panel .q-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ch-epiphany-ink); letter-spacing: 0.1em; }
.q-panel .q-text { font-size: 1rem; color: var(--text-1); margin-top: var(--sp-1); }
.q-panel .q-account { margin-top: var(--sp-2); font-size: 0.8rem; color: var(--ch-boss); font-style: italic; }
.option-grid { display: grid; grid-template-columns: 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.88rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
  display: flex; align-items: center; gap: var(--sp-2); min-height: 44px;
}
.q-option:hover { border-color: var(--accent); transform: translateX(4px); }
.q-option .qo-letter { font-family: var(--font-mono); font-weight: 600; color: var(--accent-ink); min-width: 24px; }
.q-option.correct { border-color: var(--ch-epiphany); background: var(--ch-epiphany-soft); color: var(--ch-epiphany-ink); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.q-option.excluded { opacity: 0.3; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(55,65,81,0.20); cursor: default; transform: none; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; margin-bottom: var(--sp-2);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.q-feedback.right { border-color: var(--ch-epiphany); background: var(--ch-epiphany-soft); color: var(--ch-epiphany-ink); }
.q-feedback.hint { border-color: var(--spt-gold); background: var(--ch-gold-soft); color: var(--ch-gold-ink); }
.elimination-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); margin-bottom: var(--sp-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.elimination-zone h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.scar-list { display: flex; flex-direction: column; gap: 4px; }
.scar-item {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.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); }
.scar-item.eliminated { border-color: var(--opt-excluded); color: var(--text-3); text-decoration: line-through; opacity: 0.6; }
.shadow-deepen-meter { width: 100%; margin-top: var(--sp-1); }
.shadow-deepen-bar { height: 8px; border: 1px solid var(--ch-boss-line); border-radius: 4px; background: var(--bg-sunk); overflow: hidden; }
.shadow-deepen-fill { height: 100%; background: var(--ch-boss); transition: width 400ms cubic-bezier(0.22,1,0.36,1); width: 0; }
.collapse-animation {
  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-style: italic; color: var(--ch-epiphany-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes shatterIn {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   S10 知识图谱点亮 + 五层剪影
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.puzzle-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-1); }
.puzzle-piece {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); cursor: pointer; font-size: 0.72rem; text-align: center;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4; min-height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.puzzle-piece:hover { border-color: var(--accent); opacity: 0.7; }
.puzzle-piece.lit { opacity: 1; border-color: var(--ch-epiphany); background: var(--ch-epiphany-soft); box-shadow: var(--glow); }
.puzzle-piece .pp-name { font-weight: 600; }
.puzzle-piece .pp-kp { font-size: 0.65rem; color: var(--text-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-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(6,182,212,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; }
  .app-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .proto-compare { grid-template-columns: 1fr; }
  .switch-compare { grid-template-columns: 1fr; }
  .crypto-trio { grid-template-columns: 1fr; }
  .tablet-row { grid-template-columns: 1fr; }
  .aimd-phases { grid-template-columns: 1fr; }
  .addr-grid { grid-template-columns: repeat(8, 1fr); }
  .addr-bit { width: 22px; height: 22px; font-size: 0.68rem; }
  .addr-grid-row { flex-direction: column; }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
  .window-push-row { flex-direction: column; align-items: stretch; }
  .window-push-row input[type="range"] { min-width: auto; }
  .iter-row { flex-direction: column; align-items: stretch; }
  .iter-row input[type="range"] { min-width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .shadow-account, .encapsulation-zone, .app-panel, .app-lit, .load-panel, .handshake-panel, .wave-panel, .hs-feedback, .wave-readout, .exclude-mark, .window-panel, .rtt-panel, .healed-mark, .collapse-zone, .dual-window, .aimd-panel, .subnet-result, .cidr-panel, .cidr-result, .dv-panel, .ls-panel, .protocol-tablet, .stack-panel, .crc-result, .nat-note, .tls-result, .stack-lit, .q-feedback, .elimination-zone, .collapse-animation, .puzzle-piece { animation: none; }
  .app-silhouette, .switch-belt, .hs-step, .wave-step, .encap-layer, .dns-node, .tls-step, .aimd-phase, .crypto-card, .dt-card, .puzzle-piece { transition: none; }
}