/* ============================================================
   ch11「注意觉醒」章节专属样式
   境界：结丹一层·注意觉醒 · 紫金 #8B5CF6
   Boss：注意力之渊 · 暗紫 #6D28D9
   导师：高斯老祖
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   崩塌冲突：赤红 var(--ch-boss)
   第一刻痕（加权平均）：数据青 var(--eff-linformer)
   第二刻痕（缩放可省）：琥珀 var(--ch-amber)
   第三刻痕（O(n²)可忽略）：赤红 var(--ch-boss)
   背景：暖深蓝灰 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: #0A0A1A;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #6D28D9;          /* 注意力之渊 · 暗紫 */
  --ch-boss-ink: #A78BFA;      /* 渊紫 */
  --ch-boss-soft: rgba(109, 40, 217, 0.22);
  --ch-boss-line: rgba(109, 40, 217, 0.42);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金 */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-conflict: var(--ch-boss);      /* 崩塌冲突赤红 */
  --ch-conflict-soft: rgba(239, 68, 68, 0.14);
  --ch-conflict-ink: #DC2626;
  --ch-violet: #8B5CF6;        /* 紫金 · 境界色 */
  --ch-violet-soft: rgba(139, 92, 246, 0.14);
  --ch-violet-ink: #7C3AED;
  /* 三条贯穿机制色 */
  --debt-red: var(--ch-boss);         /* 深渊账赤红光页 */
  --debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #A78BFA;       /* 排除刻痕紫金微光 */
  --carve-soft: rgba(167, 139, 250, 0.14);
  --balance-seq: #8B5CF6;      /* 维度天平 序列长度紫金 */
  --balance-comp: var(--ch-amber);     /* 维度天平 计算量金 */
  /* 四架构色 */
  --arch-rnn: #94A3B8;         /* RNN 灰白 */
  --arch-lstm: #06B6D4;        /* LSTM 青 */
  --arch-cnn: #10B981;         /* CNN 翠 */
  --arch-transformer: #8B5CF6; /* Transformer 紫金 */
  /* Q/K/V 矩阵色 */
  --qkv-q: #60A5FA;            /* Q 蓝 */
  --qkv-k: #A78BFA;            /* K 紫 */
  --qkv-v: #34D399;            /* V 翠 */
  /* 缩放/softmax */
  --scale-unscaled: var(--ch-boss);   /* 不缩放红（饱和） */
  --scale-scaled: #34D399;     /* 缩放翠（平滑） */
  --gradient-flow: #34D399;    /* 梯度流翠 */
  --gradient-dead: var(--ch-boss);    /* 梯度死红 */
  /* 多头 8 色 */
  --head-1: #60A5FA;  --head-2: #A78BFA;  --head-3: #F472B6;  --head-4: var(--ch-epiphany);
  --head-5: #34D399;  --head-6: #06B6D4;  --head-7: var(--ch-amber);  --head-8: #C084FC;
  /* 位置编码 */
  --pe-sinusoid: #06B6D4;      /* 正弦青 */
  --pe-rope: #8B5CF6;          /* RoPE 紫金 */
  --pe-alibi: var(--ch-amber);         /* ALiBi 金 */
  /* 编码器组件 */
  --cmp-attn: #8B5CF6;         /* 自注意力紫金 */
  --cmp-ffn: #A78BFA;          /* FFN 紫 */
  --cmp-residual: #34D399;     /* 残差翠 */
  --cmp-ln: #06B6D4;           /* LN 青 */
  --cmp-mask: var(--ch-epiphany);         /* 掩码金 */
  --cmp-cross: #A78BFA;        /* 交叉紫 */
  /* 高效注意力 */
  --eff-standard: var(--ch-boss);     /* 标准红 */
  --eff-linformer: #06B6D4;    /* Linformer 青 */
  --eff-performer: #34D399;    /* Performer 翠 */
  --eff-flash: var(--ch-epiphany);        /* FlashAttention 金 */
  /* S9 Boss */
  --boss-face: #6D28D9;        /* 渊脸暗紫 */
  --answer-correct: #8B5CF6;   /* 正解紫金光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  --jindan-gold: #FCD34D;      /* 金丹金 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
}

/* ---------- 开场（opening） ---------- */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
  background: radial-gradient(ellipse at center, #1A1230 0%, var(--ch-bg-warm) 70%);
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--accent-soft), 0 0 24px var(--ch-violet-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--balance-seq);
  background: rgba(139,92,246,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #balance-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #balance-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-violet-ink); }
#carve-list p { font-size: 0.8rem; color: var(--carve-mark); margin: var(--sp-1) 0; }
#balance-list p { font-size: 0.8rem; color: var(--ch-boss-ink); margin: var(--sp-1) 0; }
.option.excluded { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(71,85,105,0.16); }
.sim-range, input[type="range"], .knob-range, select { accent-color: var(--accent); }
.btn-warn { border-color: var(--ch-warn); color: var(--ch-warn); }
.btn-warn:hover { background: rgba(239,68,68,0.12); }

/* ---------- Boss 文字头像（无图片） ---------- */
.avatar.avatar-text {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--ch-boss);
  background: radial-gradient(circle at 30% 30%, var(--ch-boss-soft), #1A0F2E);
  color: var(--ch-boss-ink); font-family: var(--font-mono);
  font-size: 1.4rem; font-weight: 700; text-shadow: 0 0 12px var(--ch-boss-soft);
  box-shadow: 0 0 14px var(--ch-boss-soft);
}
.dlg.boss .avatar-text { border-color: var(--ch-boss); }

/* ---------- 通用 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-select {
  padding: 4px 8px; 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.82rem;
  cursor: pointer;
}
.knob-select:focus { border-color: var(--accent); outline: none; }
/* 通用 toggle 按钮组 */
.toggle-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; margin: var(--sp-1) 0; }
.toggle-btn {
  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.74rem; color: var(--text-2);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.toggle-btn:hover { border-color: var(--accent); color: var(--text-1); }
.toggle-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }

/* ============================================================
   S0 架构之赌 · 注意力全景
   ============================================================ */
.cmp-attention-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--ch-boss-ink);
  padding: var(--sp-2); letter-spacing: 0.06em; font-style: italic;
}
.arch-silhouettes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.arch-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.arch-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.arch-card.guessed { opacity: 1; border-color: var(--debt-red); background: var(--debt-soft); }
.arch-card.correct { opacity: 1; border-color: var(--ch-violet); background: var(--ch-violet-soft); box-shadow: var(--glow); }
.arch-card .ac-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.arch-card .ac-icon { font-size: 1.2rem; }
.arch-card[data-arch="rnn"] { border-left: 3px solid var(--arch-rnn); }
.arch-card[data-arch="lstm"] { border-left: 3px solid var(--arch-lstm); }
.arch-card[data-arch="cnn"] { border-left: 3px solid var(--arch-cnn); }
.arch-card[data-arch="transformer"] { border-left: 3px solid var(--arch-transformer); }
.conflict-popup {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.conflict-popup .cp-title { font-weight: 600; color: var(--debt-red); margin-bottom: 4px; }
.debt-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);
}
.debt-account .acct-line { margin: var(--sp-1) 0; }
.debt-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.attention-panorama {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-violet);
  border-radius: var(--r-sm); background: var(--ch-violet-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.attention-panorama h4 { font-size: 0.85rem; color: var(--ch-violet-ink); margin-bottom: var(--sp-2); text-align: center; }
.attention-panorama canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.panorama-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); margin-top: var(--sp-2); }
.panorama-node {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.7rem; text-align: center; color: var(--text-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.panorama-node.lit { opacity: 1; border-color: var(--ch-violet); color: var(--ch-violet-ink); background: var(--ch-violet-soft); }

/* ============================================================
   S1 自注意力计算器 · Q/K/V
   ============================================================ */
.cmp-attention-calculator { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.word-input-zone, .matrix-zone, .heatmap-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.word-input-zone h4, .matrix-zone h4, .heatmap-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.word-input-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.word-input {
  width: 80px; padding: 6px 8px; 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.82rem;
  text-align: center;
}
.word-input:focus { border-color: var(--accent); outline: none; }
.matrix-zone canvas, .heatmap-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.heatmap-legend { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); font-size: 0.7rem; color: var(--text-3); justify-content: center; }
.heatmap-legend .legend-bar { width: 120px; height: 10px; border-radius: 3px; background: linear-gradient(to right, var(--ch-bg-warm, #0B1120), #8B5CF6, var(--ch-epiphany)); }

/* ============================================================
   S2 缩放因子实验台
   ============================================================ */
.cmp-scaling-experiment { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dk-control-zone, .scale-toggle-zone, .softmax-zone, .gradient-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.dk-control-zone h4, .scale-toggle-zone h4, .softmax-zone h4, .gradient-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.dk-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.dk-btn { padding: 4px 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; color: var(--text-2); cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); }
.dk-btn:hover { border-color: var(--accent); color: var(--text-1); }
.dk-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.variance-readout { text-align: center; margin-top: var(--sp-1); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); }
.variance-readout b { color: var(--ch-epiphany); }
.scale-toggle { display: flex; gap: var(--sp-1); justify-content: center; }
.scale-btn[data-mode="unscaled"].active { border-color: var(--scale-unscaled); color: var(--scale-unscaled); background: rgba(239,68,68,0.12); }
.scale-btn[data-mode="scaled"].active { border-color: var(--scale-scaled); color: var(--scale-scaled); background: rgba(52,211,153,0.12); }
.softmax-zone canvas, .gradient-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S3 O(n²)之壁 · 复杂度
   ============================================================ */
.cmp-complexity-wall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.seq-control-zone, .curve-zone, .matrix-size-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.seq-control-zone h4, .curve-zone h4, .matrix-size-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.seq-control-zone input[type="range"] { max-width: 320px; }
.curve-zone canvas, .matrix-size-zone 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-1); }
.oom-warning {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-conflict); border-radius: var(--r-sm);
  background: var(--ch-conflict-soft); font-size: 0.82rem; color: var(--ch-warn);
  animation: shatterIn 500ms cubic-bezier(0.22,1,0.36,1); text-align: center;
}
.oom-warning b { color: var(--ch-conflict); }

/* ============================================================
   S4 多头注意力可视化器
   ============================================================ */
.cmp-multihead-visualizer { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.head-selector-zone, .head-heatmap-zone, .param-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.head-selector-zone h4, .head-heatmap-zone h4, .param-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.head-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.head-btn {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1);
}
.head-btn:hover { opacity: 1; border-color: var(--accent); }
.head-btn.active { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.head-btn[data-head="0"] { border-top: 3px solid var(--head-1); }
.head-btn[data-head="1"] { border-top: 3px solid var(--head-2); }
.head-btn[data-head="2"] { border-top: 3px solid var(--head-3); }
.head-btn[data-head="3"] { border-top: 3px solid var(--head-4); }
.head-btn[data-head="4"] { border-top: 3px solid var(--head-5); }
.head-btn[data-head="5"] { border-top: 3px solid var(--head-6); }
.head-btn[data-head="6"] { border-top: 3px solid var(--head-7); }
.head-btn[data-head="7"] { border-top: 3px solid var(--head-8); }
.head-heatmap-zone canvas { width: 100%; max-width: 360px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.head-pattern { margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); font-size: 0.8rem; color: var(--text-2); text-align: center; }
.head-pattern .hp-name { font-family: var(--font-mono); font-weight: 600; color: var(--accent-ink); }
.param-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S5 位置编码实验台
   ============================================================ */
.cmp-posencoding-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.pe-toggle-zone, .pe-matrix-zone, .decay-zone, .permutation-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.pe-toggle-zone h4, .pe-matrix-zone h4, .decay-zone h4, .permutation-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.pe-toggle { display: flex; gap: var(--sp-1); justify-content: center; }
.pe-btn[data-pe="sinusoid"].active { border-color: var(--pe-sinusoid); color: var(--pe-sinusoid); }
.pe-btn[data-pe="rope"].active { border-color: var(--pe-rope); color: var(--pe-rope); }
.pe-btn[data-pe="alibi"].active { border-color: var(--pe-alibi); color: var(--pe-alibi); }
.pe-matrix-zone canvas, .decay-zone canvas, .permutation-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S6 架构组装器
   ============================================================ */
.cmp-arch-assembler { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.parts-pool-zone, .assembly-zone, .decoder-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.parts-pool-zone h4, .assembly-zone h4, .decoder-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.parts-pool { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.part-chip {
  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.74rem; color: var(--text-1);
  cursor: grab; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.part-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.part-chip.placed { opacity: 0.4; cursor: default; }
.part-chip[data-part="attn"] { border-left: 3px solid var(--cmp-attn); }
.part-chip[data-part="addnorm1"] { border-left: 3px solid var(--cmp-residual); }
.part-chip[data-part="ffn"] { border-left: 3px solid var(--cmp-ffn); }
.part-chip[data-part="addnorm2"] { border-left: 3px solid var(--cmp-ln); }
.assembly-slots { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 480px; margin: 0 auto; }
.assembly-slot {
  min-height: 40px; border: 1px dashed 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.74rem; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  color: var(--text-3);
}
.assembly-slot.over { border-color: var(--accent); background: var(--accent-soft); }
.assembly-slot.filled { border-style: solid; border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.assembly-slot.wrong { border-color: var(--ch-warn); color: var(--ch-warn); background: rgba(239,68,68,0.10); animation: shake 0.4s var(--ease-out); }
.decoder-zone canvas { width: 100%; max-width: 320px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.mask-toggle { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-2); }
.mask-btn[data-mask="masked"].active { border-color: var(--cmp-mask); color: var(--cmp-mask); }
.mask-btn[data-mask="unmasked"].active { border-color: var(--ch-conflict); color: var(--ch-conflict); }
@keyframes shake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}

/* ============================================================
   S7 长序列之壁 · 位置外推
   ============================================================ */
.cmp-extrapolation-wall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.len-control-zone, .perf-zone, .pe-compare-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.len-control-zone h4, .perf-zone h4, .pe-compare-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.len-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: 0.78rem; color: var(--text-2); }
.len-row input[type="range"] { flex: 1; max-width: 240px; }
.perf-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.pe-compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.pe-compare-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  opacity: 0.6;
}
.pe-compare-card:hover { opacity: 1; border-color: var(--accent); }
.pe-compare-card[data-pe="learned"] { border-top: 3px solid var(--arch-rnn); }
.pe-compare-card[data-pe="sinusoid"] { border-top: 3px solid var(--pe-sinusoid); }
.pe-compare-card[data-pe="rope"] { border-top: 3px solid var(--pe-rope); }
.pe-compare-card[data-pe="alibi"] { border-top: 3px solid var(--pe-alibi); }
.pe-compare-card .pc-name { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--text-1); }
.pe-compare-card .pc-extrap { font-size: 0.66rem; color: var(--text-3); margin-top: 4px; }
.pe-compare-card.bad .pc-extrap { color: var(--ch-warn); }
.pe-compare-card.good .pc-extrap { color: var(--ch-ok); }

/* ============================================================
   S8 高效注意力对比器
   ============================================================ */
.cmp-efficient-attention { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.method-toggle-zone, .complexity-zone, .method-detail-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.method-toggle-zone h4, .complexity-zone h4, .method-detail-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.method-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.method-btn[data-method="standard"].active { border-color: var(--eff-standard); color: var(--eff-standard); }
.method-btn[data-method="linformer"].active { border-color: var(--eff-linformer); color: var(--eff-linformer); }
.method-btn[data-method="performer"].active { border-color: var(--eff-performer); color: var(--eff-performer); }
.method-btn[data-method="flash"].active { border-color: var(--eff-flash); color: var(--eff-flash); }
.complexity-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.method-detail {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.8rem; color: var(--text-2); line-height: 1.6;
}
.method-detail .md-name { font-family: var(--font-mono); font-weight: 600; color: var(--text-1); }
.method-detail .md-time { color: var(--ch-conflict); }
.method-detail .md-space { color: var(--ch-epiphany); }
.method-detail .md-precise { color: var(--ch-ok); }

/* ============================================================
   S9 Boss 战 · 注意力之渊
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.boss-figure { width: 100%; display: flex; justify-content: center; margin-bottom: var(--sp-2); }
#s9-boss-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--bg-elev); }
.q-progress-bar { width: 100%; height: 6px; border: 1px solid var(--glass-line); border-radius: 3px; background: var(--bg-sunk); margin-bottom: var(--sp-2); overflow: hidden; }
.q-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.debt-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.debt-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--debt-red); font-style: normal; }
.q-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); margin-bottom: var(--sp-2); }
.q-text { font-size: 0.95rem; color: var(--text-1); margin-bottom: var(--sp-2); }
.q-account { font-size: 0.78rem; color: var(--ch-boss-ink); font-style: italic; padding: var(--sp-1) var(--sp-2); border-left: 2px solid var(--ch-boss-line); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.q-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-size: 0.85rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.q-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.q-option.correct { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); }
.q-option.eliminated { opacity: 0.3; cursor: default; text-decoration: line-through; border-color: var(--answer-eliminated); background: rgba(71,85,105,0.16); transform: none; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; min-height: 32px;
  margin-bottom: var(--sp-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.right { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); }
.q-feedback.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); font-style: italic; }
.carve-emergence {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--carve-mark); border-radius: var(--r-sm);
  background: var(--carve-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence h4 { font-size: 0.85rem; color: var(--ch-violet-ink); margin-bottom: var(--sp-2); }
.carve-emergence .carve-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence .carve-item.lit {
  border-color: var(--carve-mark); color: var(--ch-violet-ink);
  background: var(--carve-soft); box-shadow: 0 0 8px var(--carve-soft);
}
.carve-emergence .carve-item.net {
  border-color: var(--net-gold); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.fog-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--breakthrough); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-style: italic; color: var(--ch-epiphany-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes shatterIn {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   S10 顿悟 · 知识图谱 + 境界突破
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.graph-zone, .application-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.graph-zone h4, .application-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.graph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.graph-node {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.7rem; text-align: center; color: var(--text-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.graph-node.lit { opacity: 1; border-color: var(--ch-violet); color: var(--ch-violet-ink); background: var(--ch-violet-soft); box-shadow: var(--glow); }
.graph-node .gn-name { font-family: var(--font-mono); font-weight: 600; }
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.app-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  opacity: 0.5; cursor: pointer;
}
.app-card:hover { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.app-card.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.app-card .ac-name { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--text-1); }
.app-card .ac-desc { font-size: 0.64rem; color: var(--text-3); margin-top: 2px; }
.app-card[data-app="mt"] { border-top: 3px solid var(--eff-linformer); }
.app-card[data-app="bert"] { border-top: 3px solid var(--ch-violet); }
.app-card[data-app="gpt"] { border-top: 3px solid var(--head-2); }
.app-card[data-app="vit"] { border-top: 3px solid var(--arch-cnn); }
.depth-readout { padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); text-align: center; min-height: 28px; }

/* ---------- 境界突破动画（结丹一层→结丹二层）---------- */
.realm-achieved {
  margin-top: var(--sp-3); text-align: center; padding: var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--ch-violet-soft), var(--ch-epiphany-soft));
}
.realm-breakthrough {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-2); flex-wrap: wrap;
}
.rb-stage {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  opacity: 0; transition: all 800ms cubic-bezier(0.22,1,0.36,1);
}
.rb-from { color: var(--ch-violet-ink); border: 1px solid var(--ch-violet); background: var(--ch-violet-soft); }
.rb-to {
  color: var(--jindan-gold); border: 1px solid var(--jindan-gold);
  background: rgba(252,211,77,0.16);
  text-shadow: 0 0 16px rgba(252,211,77,0.6);
}
.rb-arrow {
  font-size: 1.4rem; color: var(--ch-epiphany); opacity: 0;
  animation: arrowPulse 1.6s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(6px); opacity: 1; }
}
.rb-stage.show { opacity: 1; }
.rb-stage.glow { box-shadow: 0 0 32px rgba(252,211,77,0.5); }
.realm-glow {
  font-family: var(--font-mono); font-size: 1.05rem; color: var(--ch-epiphany-ink); letter-spacing: 0.2em;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--ch-violet-soft); }
  50% { box-shadow: 0 0 40px rgba(252,211,77,0.4); }
}
.realm-achieved.active { animation: realmGlow 3s ease-in-out infinite; }

/* ---------- 通用 exclude-mark（排除刻痕浮现） ---------- */
.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);
}

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@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; }
  .arch-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .panorama-nodes { grid-template-columns: repeat(2, 1fr); }
  .head-grid { grid-template-columns: repeat(4, 1fr); }
  .pe-compare-grid { grid-template-columns: 1fr 1fr; }
  .graph-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: 1fr 1fr; }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
  .len-row { flex-direction: column; align-items: stretch; }
  .len-row input[type="range"] { max-width: none; }
  .realm-breakthrough { gap: var(--sp-1); }
  .word-input-row { flex-direction: column; align-items: center; }
  .word-input { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved.active { animation: none; }
  .rb-arrow { animation: none; }
  .conflict-popup, .debt-account, .attention-panorama, .exclude-mark, .oom-warning,
  .carve-emergence, .fog-collapse, .graph-zone, .application-zone,
  .assembly-slot.wrong, .panorama-node, .graph-node, .app-card { animation: none; }
  .arch-card:hover, .head-btn:hover, .part-chip:hover, .app-card:hover { transform: none; }
}