/* "Transistors are free" — Jim Keller's pipelining bet, made visible. A simple CPU
   runs one instruction through Fetch/Decode/Execute/Write before starting the next,
   so three of its four units sit idle every cycle and it finishes one instruction
   every four cycles. Spend more silicon — latches between the stages, more control —
   to overlap them, and a new instruction enters every cycle: all four units stay
   busy and throughput climbs toward one finished instruction per cycle. Same work
   per instruction, four times the output. Vanilla JS, no deps, no build.
   Palette shared with siblings: cyan = in flight, green = completed (the win). No red. */

#pipeline-flow {
  --pf-flight: #5ac8fa;
  --pf-done: #30d158;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.pf-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.pf-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.pf-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-bg-surface, #1a1a1a); margin-bottom: 16px; }
.pf-mode { appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 600; border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55)); padding: 7px 14px; border-radius: 7px; transition: color 0.18s, background 0.18s; }
.pf-mode:hover { color: var(--color-text-primary, #fff); }
.pf-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }

.pf-lanes { display: flex; flex-direction: column; gap: 8px; }
.pf-lane { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; }
.pf-lane-name { font-family: var(--font-mono, monospace); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--color-text-tertiary, rgba(255,255,255,0.5)); text-align: right; }
.pf-slot { height: 40px; border-radius: 9px; border: 1px dashed var(--color-border-subtle, rgba(255,255,255,0.12)); background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; }
.pf-slot.busy { border-style: solid; border-color: var(--pf-flight); background: rgba(90,200,250,0.10); }
.pf-tile { font-family: var(--font-mono, monospace); font-size: 0.82rem; font-weight: 650; color: var(--pf-flight); }

.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.pf-stat { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; }
.pf-stat .pf-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 4px; }
.pf-stat .pf-v { font-family: var(--font-mono, monospace); font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.pf-stat.pf-tput .pf-v { color: var(--pf-done); }
.pf-stat.pf-idle .pf-v { color: var(--color-text-secondary, rgba(255,255,255,0.75)); }
.pf-done-pulse { color: var(--pf-done) !important; }

.pf-caption { margin-top: 14px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.pf-caption b { color: #fff; }
.pf-caption .pf-hl { color: var(--pf-done); font-weight: 650; }
.pf-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }