/* ============================================================
   ch06「硬件描述语言与数字设计方法」章节专属样式
   境界：炼气六层·硅基咒语 · 翠绿 var(--accent)（炼气期收官章）
   章节辅色：青蓝 var(--lvl-behavior)（代码 / 电路 / 仿真）
   全部色值走 tokens 变量；仿真幻影赤红、顿悟金、综合刻痕为章节专用变量。
   类名体系与 ch01/ch02 对齐（.scene/.narr-box/.stage/.glass/.btn/.data-row 等）。
   ============================================================ */

/* ---------- 章节境界色覆写：翠绿炼气 + 青蓝代码辅色 ---------- */
:root, :root[data-theme="light"] {
  --accent: #10B981;
  --accent-ink: #059669;
  --accent-soft: rgba(16, 185, 129, 0.10);
  --glass-line: rgba(16, 185, 129, 0.20);
  --glow: 0 0 18px rgba(16, 185, 129, 0.26);
  --on-accent: #FFFFFF;
}
/* ---------- 章节专用叙事色（仿真幻影 / 代码 / 顿悟 / 综合刻痕） ---------- */
:root {
  --ch-boss: var(--ch-boss);          /* 仿真幻影 · 赤红 */
  --ch-boss-ink: #DC2626;
  --ch-boss-soft: rgba(239, 68, 68, 0.14);
  --ch-code: #06B6D4;          /* 代码文字青蓝 */
  --ch-code-ink: #0891B2;
  --ch-code-soft: rgba(6, 182, 212, 0.12);
  --ch-amber: var(--ch-amber);         /* 综合琥珀 / 晶体管级 */
  --ch-amber-soft: rgba(245, 158, 11, 0.14);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟金 */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-purple: #8B5CF6;        /* 非阻塞 / 极限 */
  --ch-purple-soft: rgba(139, 92, 246, 0.14);
  --ch-noise: #6B7280;         /* 噪声碎屑灰 */
  --ch-noise-soft: rgba(107, 114, 128, 0.16);
  --ch-sim-green: var(--accent);     /* 仿真全绿 */
  --ch-synth-red: var(--ch-boss);     /* 综合异常 */
  --ch-wall: #0D1117;          /* 代码墙暗色 */
  --ch-crack: var(--ch-boss);         /* 综合刻痕裂纹 */
  --ch-crack-glow: var(--ch-amber);    /* 刻痕火光 */
  /* 抽象层次五色 */
  --lvl-system: #94A3B8;
  --lvl-behavior: #06B6D4;
  --lvl-rtl: var(--accent);
  --lvl-gate: #34D399;
  --lvl-transistor: var(--ch-amber);
}
.readout { font-family: var(--font-mono); color: var(--text-1); }
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--accent-soft), 0 0 24px var(--ch-code-soft);
}
/* ---------- 叙事块 ---------- */
.narr { width: min(44rem, 100%); max-width: var(--content-w); }
.dlg.phantom { border-left-color: var(--ch-purple); box-shadow: var(--shadow), 0 0 18px var(--ch-purple-soft); }
.dlg.phantom .who { background: var(--ch-purple); color: #FFF; }
.dlg.phantom .avatar { border-color: var(--ch-purple); }
.dlg.phantom p { font-style: italic; color: var(--text-2); }

/* ---------- 物品栏（本命符 / 仿真账 / 排除刻痕） ---------- */
#inventory {
  position: fixed; left: var(--sp-3); bottom: var(--sp-3); z-index: 110;
  display: flex; gap: var(--sp-2); align-items: flex-end;
}
.carve-item { color: var(--accent); font-size: var(--fs-small); padding: 2px 0; }

/* ---------- 场景通用 ---------- */
.scene-next { margin-top: var(--sp-3); }
.stage h4 { align-self: flex-start; color: var(--accent-ink); margin-top: var(--sp-3); }
/* 代码块通用 */
.code-block {
  font-family: var(--font-mono); font-size: var(--fs-small);
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunk); color: var(--text-1);
  white-space: pre-wrap; word-break: break-all; line-height: 1.6;
  text-align: left; width: 100%;
}
.code-block .kw { color: var(--ch-purple); font-weight: 600; }
.code-block .ty { color: var(--ch-code); }
.code-block .op { color: var(--ch-amber); }
.code-block .cm { color: var(--text-3); font-style: italic; }
.code-block .hl { background: var(--accent-soft); border-radius: 3px; padding: 0 2px; }
.code-block .bad { background: var(--ch-boss-soft); color: var(--ch-boss); border-radius: 3px; padding: 0 2px; }

/* 通用画布 */
.gate-cv, .wave-cv, .mirror-cv, .boss-cv, .abstr-cv {
  width: 100%; max-width: 640px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}

/* ============ S0 序章 · 抽象层次反直觉挑战 ============ */
.abstr-levels { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; width: 100%; }
.level-card {
  flex: 1; min-width: 110px; min-height: 88px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.level-card:hover { transform: translateY(-3px); }
.level-card[data-level="system"] { border-top: 3px solid var(--lvl-system); }
.level-card[data-level="behavior"] { border-top: 3px solid var(--lvl-behavior); }
.level-card[data-level="rtl"] { border-top: 3px solid var(--lvl-rtl); }
.level-card[data-level="gate"] { border-top: 3px solid var(--lvl-gate); }
.level-card[data-level="transistor"] { border-top: 3px solid var(--lvl-transistor); }
.level-card.lit { background: var(--accent-soft); box-shadow: var(--glow); }
.level-card .lv-name { font-family: var(--font-serif); font-size: var(--fs-small); color: var(--text-1); }
.level-card .lv-desc { font-size: 0.68rem; color: var(--text-3); }
.level-card .lv-ico { font-size: 1.3rem; }

.abstr-slider-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin: var(--sp-3) 0; }
.abstr-slider-row input[type="range"] { flex: 1; }
.abstr-display {
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunk); min-height: 4em; text-align: left; width: 100%;
}
.abstr-display .ad-label { font-family: var(--font-mono); color: var(--ch-code); font-size: var(--fs-small); margin-bottom: var(--sp-1); }
.abstr-display .ad-code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-1); white-space: pre-wrap; }

.op-toggle-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin: var(--sp-3) 0; }
.op-toggle {
  min-height: 44px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-1); cursor: pointer;
  font-family: var(--font-mono); transition: all var(--dur-fast) var(--ease-out);
}
.op-toggle:hover { border-color: var(--accent); }
.op-toggle.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: var(--glow); }

/* ============ S1 module 骨架拼装 ============ */
.skeleton-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-3) 0; }
.skel-frag {
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-fast) var(--ease-out);
}
.skel-frag:hover { border-color: var(--accent); color: var(--accent); }
.skel-frag.placed { opacity: 0.35; pointer-events: none; border-color: var(--accent); }
.skel-target {
  min-height: 56px; padding: var(--sp-3); border: 2px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text-3); text-align: left; width: 100%; margin-bottom: var(--sp-3);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1);
  transition: border-color var(--dur-mid);
}
.skel-target.complete { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.skel-target .placed-frag { background: var(--accent-soft); color: var(--accent); padding: 2px 6px; border-radius: 3px; }

.dir-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.dir-card {
  min-height: 56px; min-width: 96px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; cursor: pointer; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-fast) var(--ease-out);
}
.dir-card:hover { border-color: var(--accent); }
.dir-card.ok { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dir-card.bad { border-color: var(--ch-boss); background: var(--ch-boss-soft); color: var(--ch-boss); }

/* ============ S2 数据类型归类 ============ */
.type-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .type-row { grid-template-columns: 1fr; } }
.type-card {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  cursor: pointer; text-align: center; transition: all var(--dur-fast) var(--ease-out);
}
.type-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.type-card.matched { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.type-card .t-name { font-family: var(--font-mono); color: var(--ch-code); font-size: var(--fs-sub); }
.type-card .t-scene { font-size: 0.72rem; color: var(--text-3); margin-top: var(--sp-1); }
.type-slot {
  min-height: 56px; padding: var(--sp-2); border: 2px dashed var(--line-strong); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-3);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: all var(--dur-fast);
}
.type-slot.filled { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.reg-truth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); }
@media (max-width: 560px) { .reg-truth { grid-template-columns: 1fr; } }
.reg-panel { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); }
.reg-panel h5 { color: var(--accent-ink); font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.reg-panel .rp-result { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); }
.reg-panel.combo .rp-result { color: var(--accent); }
.reg-panel.seq .rp-result { color: var(--ch-amber); }

/* ============ S3 并发执行模型 ============ */
.exec-toggle { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-3) 0; }
.wave-cv { height: 240px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); }
@media (max-width: 560px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-side { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); }
.compare-side h5 { color: var(--accent-ink); font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.compare-side .cs-code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1); white-space: pre-wrap; }
.order-test-row { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); }
.collapse-flash { animation: collapseFlash 0.6s var(--ease-out); }
@keyframes collapseFlash { 0% { filter: brightness(1); } 40% { filter: brightness(1.6); } 100% { filter: brightness(1); } }

/* ============ S4 RTL 锁存器 ============ */
.rtl-editor { width: 100%; margin-top: var(--sp-3); }
.rtl-line {
  font-family: var(--font-mono); font-size: var(--fs-small); padding: 2px var(--sp-2);
  color: var(--text-1); text-align: left; border-radius: 3px; transition: background var(--dur-fast);
}
.rtl-line.bad { background: var(--ch-boss-soft); }
.synth-preview {
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunk); margin-top: var(--sp-3); min-height: 4em; text-align: left;
}
.synth-preview .sp-latch { color: var(--ch-boss); font-family: var(--font-mono); font-weight: 600; }
.synth-preview .sp-clean { color: var(--accent); font-family: var(--font-mono); }
.rtl-toggle-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin: var(--sp-2) 0; }

/* ============ S5 门级映射 ============ */
.magnify-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin: var(--sp-3) 0; }
.magnify-btn {
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-fast);
}
.magnify-btn:hover { border-color: var(--accent); color: var(--accent); }
.magnify-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.gate-map {
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunk); margin-top: var(--sp-2); min-height: 3em; text-align: left;
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-1);
}

/* ============ S6 时序之锁 ============ */
.init-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); }
@media (max-width: 560px) { .init-compare { grid-template-columns: 1fr; } }
.init-panel { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); }
.init-panel h5 { font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.init-panel.sim h5 { color: var(--accent); }
.init-panel.synth h5 { color: var(--ch-boss); }
.init-wave { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); }
.init-wave .unk { color: var(--ch-boss); font-weight: 700; }
.init-wave .ok { color: var(--accent); }

/* ============ S7 双镜对比 ============ */
.mirror-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; margin: var(--sp-3) 0; }
@media (max-width: 560px) { .mirror-pair { grid-template-columns: 1fr; } }
.mirror-card {
  padding: var(--sp-3); border: 2px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-sunk); transition: all var(--dur-mid) var(--ease-out);
  transform-style: preserve-3d; position: relative;
}
.mirror-card.blocking { border-color: var(--ch-code); }
.mirror-card.nonblocking { border-color: var(--ch-purple); }
.mirror-card.flipped { transform: rotateY(180deg); }
.mirror-card .mc-label { font-family: var(--font-mono); font-size: var(--fs-sub); margin-bottom: var(--sp-2); }
.mirror-card.blocking .mc-label { color: var(--ch-code); }
.mirror-card.nonblocking .mc-label { color: var(--ch-purple); }
.mirror-card .mc-code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1); white-space: pre-wrap; margin-bottom: var(--sp-2); }
.mirror-card .mc-wave { font-family: var(--font-mono); font-size: 0.72rem; padding: var(--sp-2); border-radius: var(--r-sm); }
.mirror-card .mc-wave.sim { background: var(--accent-soft); color: var(--accent); }
.mirror-card .mc-wave.synth-bad { background: var(--ch-boss-soft); color: var(--ch-boss); }
.mirror-card .mc-wave.synth-ok { background: var(--accent-soft); color: var(--accent); }
.flip-btn { display: block; margin: var(--sp-3) auto; }
.semantics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); }
@media (max-width: 560px) { .semantics-grid { grid-template-columns: 1fr; } }
.sem-step {
  padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--line-strong); font-size: 0.78rem;
  color: var(--text-2); font-family: var(--font-mono); margin: var(--sp-1) 0;
}
.sem-step.blocking { border-left-color: var(--ch-code); }
.sem-step.nonblocking { border-left-color: var(--ch-purple); }
.regulation-stone {
  padding: var(--sp-4); border: 1px solid var(--ch-code); border-radius: var(--r-md);
  background: var(--bg-sunk); margin-top: var(--sp-3); text-align: center;
}
.regulation-stone h4 { color: var(--ch-code); }
.regulation-line {
  font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-2);
  color: var(--text-2); border-bottom: 1px dashed var(--line); transition: all var(--dur-mid);
}
.regulation-line.inscribed { color: var(--accent); background: var(--accent-soft); }
.regulation-line .rl-warn { color: var(--ch-boss); }

/* ============ S8 模块实例化 + FSM 三段式 ============ */
.inst-canvas { width: 100%; min-height: 120px; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); margin-top: var(--sp-3); display: flex; gap: var(--sp-3); align-items: center; justify-content: center; flex-wrap: wrap; }
.inst-block { padding: var(--sp-3); border: 1px solid var(--ch-code); border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-1); text-align: center; min-width: 100px; transition: all var(--dur-fast); }
.inst-block.connected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.inst-wire { color: var(--ch-code); font-family: var(--font-mono); }
.fsm-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); }
@media (max-width: 560px) { .fsm-three { grid-template-columns: 1fr; } }
.fsm-seg { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); }
.fsm-seg h5 { font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.fsm-seg.seq h5 { color: var(--ch-purple); }
.fsm-seg.combo h5 { color: var(--ch-code); }
.fsm-seg .fs-code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-2); white-space: pre-wrap; }
.fsm-seg.correct { border-color: var(--accent); }

/* ============ S9 Boss 战 · 仿真幻影 ============ */
.boss-stage { width: 100%; display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
.boss-entity {
  width: 100%; padding: var(--sp-4); border: 1px solid var(--ch-boss); border-radius: var(--r-md);
  background: var(--ch-boss-soft); text-align: center; position: relative; overflow: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), border-color var(--dur-slow);
}
.boss-wave { font-family: var(--font-mono); color: var(--ch-boss); letter-spacing: 0.3em; font-size: 1.4rem; }
.boss-entity.cracked .boss-wave { color: var(--accent); }
.boss-entity.disintegrated { opacity: 0.3; border-color: var(--accent); }
.synth-flip-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; margin: var(--sp-2) 0; }
@media (max-width: 560px) { .synth-flip-panel { grid-template-columns: 1fr; } }
.flip-side { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); }
.flip-side h5 { font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.flip-side.sim h5 { color: var(--accent); }
.flip-side.synth h5 { color: var(--ch-boss); }
.flip-side .fs-out { font-family: var(--font-mono); font-size: 0.78rem; }
.q-option.wrong { border-color: var(--ch-boss); color: var(--ch-boss); background: var(--ch-boss-soft); text-decoration: line-through; }
.q-option.eliminated { opacity: 0.4; text-decoration: line-through; pointer-events: none; }
.q-refute { margin-top: var(--sp-3); padding: var(--sp-3); border-left: 3px solid var(--ch-boss); background: var(--ch-boss-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-small); color: var(--text-2); }
.scar-grid { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.scar-card {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-noise-soft); border-radius: var(--r-md);
  background: transparent; color: var(--text-3); font-size: 0.72rem; text-align: center;
  opacity: 0.5; transition: all var(--dur-mid) var(--ease-out);
}
.ledger-note { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ch-code); padding: 2px 0; }

/* ============ S10 知识图谱 + SV + FPGA + 方法论 + 突破 ============ */
.frag-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.frag-node {
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-3); cursor: pointer;
  font-family: var(--font-serif); font-size: 0.78rem;
  transition: all var(--dur-mid) var(--ease-out);
}
.chain-slot {
  min-height: 40px; padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.74rem; color: var(--text-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.sv-experiments { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); width: 100%; margin: var(--sp-3) 0; }
@media (max-width: 700px) { .sv-experiments { grid-template-columns: 1fr; } }
.sv-exp { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); }
.sv-exp h5 { color: var(--ch-code); font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.sv-exp .se-code { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2); white-space: pre-wrap; }
.sv-exp.done { border-color: var(--accent); }

.flow-cards { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-3) 0; }
.flow-card {
  min-height: 56px; min-width: 88px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; cursor: pointer; text-align: center;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: all var(--dur-fast) var(--ease-out);
}
.flow-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.flow-card[data-step="spec"] { border-top: 3px solid var(--lvl-system); }
.flow-card[data-step="hdl"] { border-top: 3px solid var(--ch-code); }
.flow-card[data-step="sim"] { border-top: 3px solid var(--accent); }
.flow-card[data-step="synth"] { border-top: 3px solid var(--ch-amber); }
.flow-card[data-step="pr"] { border-top: 3px solid #FB923C; }
.flow-card[data-step="bitstream"] { border-top: 3px solid var(--ch-purple); }
.flow-card[data-step="board"] { border-top: 3px solid #F1F5F9; }
.flow-card.placed { opacity: 0.5; }
.flow-card .fc-ico { font-size: 1.1rem; }
.flow-sequence { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; min-height: 60px; padding: var(--sp-2); border: 2px dashed var(--line-strong); border-radius: var(--r-md); margin-top: var(--sp-2); }
.flow-sequence.correct { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.flow-sequence .fs-item { padding: var(--sp-1) var(--sp-2); background: var(--accent-soft); color: var(--accent); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 0.72rem; }

.methodology-stone {
  padding: var(--sp-4); border: 1px solid var(--ch-code); border-radius: var(--r-md);
  background: var(--bg-sunk); margin-top: var(--sp-3);
}
.methodology-stone h4 { color: var(--ch-code); text-align: center; }
.methodology-step {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px dashed var(--line);
  font-size: var(--fs-small); color: var(--text-3); transition: all var(--dur-mid);
}
.methodology-step.inscribed { color: var(--accent); background: var(--accent-soft); }
.methodology-step .ms-step { font-family: var(--font-mono); font-weight: 600; }
.methodology-step .ms-goal { font-size: 0.74rem; color: var(--text-3); }
.methodology-step.inscribed .ms-goal { color: var(--accent-ink); }

.gate-text {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.25em; text-align: center; margin: var(--sp-5) 0;
}
.gate-text span { color: var(--text-3); transition: color var(--dur-slow) var(--ease-out), text-shadow var(--dur-slow); display: inline-block; }
.breakthrough-zone { text-align: center; margin: var(--sp-4) 0; }
.breakthrough-text {
  font-family: var(--font-serif); font-size: var(--fs-title); color: var(--accent);
  letter-spacing: 0.15em; opacity: 0; transition: opacity var(--dur-slow);
}
.breakthrough-text.show { opacity: 1; text-shadow: 0 0 24px var(--accent-soft); }
.realm-summary { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin: var(--sp-3) 0; }
.realm-pill {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); transition: all var(--dur-mid);
}
.realm-pill.lit { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

@media (prefers-reduced-motion: reduce) {
  .stage.collapse, .collapse-flash { animation: none; }
}

/* 移动端触摸目标兜底 */
button, .q-option, .level-card, .skel-frag, .dir-card, .type-card, .op-toggle, .magnify-btn, .frag-node, .chain-slot, .flow-card, .scar-card, .regulation-line, .methodology-step, .realm-pill, .sv-exp {
  min-height: 44px;
}
.methodology-step { min-height: 44px; }