/* assets/css/systems/info-systems/how-a-cpu-pipeline-instruction-flow-works-explained.css — 本页专属样式（en/zh 共用） */
/* ============ CPU 流水线指令流 · CPU pipeline instruction flow ============ */
/* cpu-pipeline · merged from source <style>; scoped by body[data-topic="cpu-pipeline"] */

body[data-topic="cpu-pipeline"] .svg-title{fill:var(--strong);font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.08em;text-anchor:middle;}
body[data-topic="cpu-pipeline"] .svg-sub{fill:#5b6a7d;font-size:12px;text-anchor:middle;}
body[data-topic="cpu-pipeline"] .tag{fill:#475569;font-family:var(--mono);font-size:13px;letter-spacing:.02em;}
body[data-topic="cpu-pipeline"] .tag-sm{fill:#5b6472;font-size:11px;}
body[data-topic="cpu-pipeline"] .legend{fill:#5b6472;font-size:11px;text-anchor:middle;}

body[data-topic="cpu-pipeline"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="cpu-pipeline"] .part .body2{stroke:#60a5fa;stroke-width:1.2}

body[data-topic="cpu-pipeline"] .part[data-id="part-instr"]{--db:0s;--base:#c9d5e6;--base2:#e2ecf6}
body[data-topic="cpu-pipeline"] .part[data-id="part-fetch"]{--db:.5s;--base:#c2d1e4;--base2:#dde7f4}
body[data-topic="cpu-pipeline"] .part[data-id="part-decode"]{--db:1.1s;--base:#bfcee2;--base2:#dae6f4}
body[data-topic="cpu-pipeline"] .part[data-id="part-execute"]{--db:1.7s;--base:#c6d3e5;--base2:#e0eaf5}
body[data-topic="cpu-pipeline"] .part[data-id="part-memory"]{--db:2.3s;--base:#c4d1e3;--base2:#dce7f3}
body[data-topic="cpu-pipeline"] .part[data-id="part-writeback"]{--db:2.9s;--base:#c0cfe6;--base2:#dbe6f4}
body[data-topic="cpu-pipeline"] .part[data-id="part-register"]{--db:1.7s;--base:#ccd7e7;--base2:#e4edf7}
body[data-topic="cpu-pipeline"] .part[data-id="part-clock"]{--db:3.5s;--base:#c7d4e6;--base2:#e0eaf5}

body[data-topic="cpu-pipeline"] .cpu-node .body{fill:var(--base,#c2d1e4);animation:cpu-fill-b 12s ease-in-out infinite var(--db,0s)}
body[data-topic="cpu-pipeline"] .cpu-node .body2{fill:var(--base2,#dde7f4);animation:cpu-fill-b2 12s ease-in-out infinite var(--db,0s)}
body[data-topic="cpu-pipeline"] .cpu-node{animation:cpu-glow 12s ease-in-out infinite var(--db,0s)}
@keyframes cpu-glow{0%,100%{filter:none}6%,11%{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}}
@keyframes cpu-fill-b{0%,100%{fill:var(--base,#c2d1e4);stroke:#2563eb;stroke-width:1.6}6%,11%{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}}
@keyframes cpu-fill-b2{0%,100%{fill:var(--base2,#dde7f4);stroke:#60a5fa;stroke-width:1.2}6%,11%{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}}

/* 流水线推进蓝 / 寄存器数据流琥珀 */
body[data-topic="cpu-pipeline"] .cpu-flow{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 8}
body[data-topic="cpu-pipeline"] .cpu-fs{stroke:#2563eb}
body[data-topic="cpu-pipeline"] .cpu-fd{stroke:#d97706;stroke-width:2.2;stroke-dasharray:6 6}
body[data-topic="cpu-pipeline"] .is-running .cpu-flow{animation:cpu-march .7s linear infinite, cpu-seq 12s ease-in-out infinite}
@keyframes cpu-march{to{stroke-dashoffset:-18}}
@keyframes cpu-seq{0%,100%{opacity:.18}6%,11%{opacity:1}}
body[data-topic="cpu-pipeline"] .is-running .cpu-s1{animation-delay:0s,.6s}
body[data-topic="cpu-pipeline"] .is-running .cpu-s2{animation-delay:0s,1.2s}
body[data-topic="cpu-pipeline"] .is-running .cpu-s3{animation-delay:0s,1.8s}
body[data-topic="cpu-pipeline"] .is-running .cpu-s4{animation-delay:0s,2.4s}
body[data-topic="cpu-pipeline"] .is-running .cpu-s5{animation-delay:0s,1.6s}
body[data-topic="cpu-pipeline"] .is-running .cpu-s6{animation-delay:0s,3.0s}

/* 高亮态（页面引擎 is-active 时，换色 + 描边 + 发光） */
body[data-topic="cpu-pipeline"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2;animation:none}
body[data-topic="cpu-pipeline"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4;animation:none}
body[data-topic="cpu-pipeline"] .part.is-active .body3{fill:#1d4ed8;animation:none}
body[data-topic="cpu-pipeline"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5));animation:none}

@media (prefers-reduced-motion:reduce){
  body[data-topic="cpu-pipeline"] .cpu-node,
  body[data-topic="cpu-pipeline"] .cpu-node .body,
  body[data-topic="cpu-pipeline"] .cpu-node .body2,
  body[data-topic="cpu-pipeline"] .is-running .cpu-flow{animation:none;opacity:1}
}