.semantic-cpu {
  --cpu-ink: #1d2927;
  --cpu-muted: #5d6b68;
  --cpu-rule: #c8d3cf;
  --cpu-paper: #fff;
  --cpu-page: #f3f7f5;
  --cpu-teal: #0b776d;
  --cpu-teal-soft: #d7eee8;
  --cpu-blue: #3d6797;
  --cpu-blue-soft: #e6edf8;
  --cpu-coral: #bd503b;
  --cpu-coral-soft: #f8e1db;
  --cpu-amber: #f1dfad;
  color: var(--cpu-ink);
  font-size: 13px;
}

.semantic-cpu * { box-sizing: border-box; }
.semantic-cpu button,
.semantic-cpu select,
.semantic-cpu input { font: inherit; }
.semantic-cpu button,
.semantic-cpu select,
.semantic-cpu input[type="number"] { min-height: 32px; }
.semantic-cpu button,
.semantic-cpu select,
.semantic-cpu input[type="number"] { border: 1px solid var(--cpu-rule); border-radius: 2px; background: var(--cpu-paper); color: var(--cpu-ink); }
.semantic-cpu button { padding: 6px 10px; cursor: pointer; }
.semantic-cpu button:hover,
.semantic-cpu button:focus-visible,
.semantic-cpu button[aria-pressed="true"] { border-color: var(--cpu-teal); background: var(--cpu-teal-soft); color: #084f49; }
.semantic-cpu button:focus-visible,
.semantic-cpu select:focus-visible,
.semantic-cpu input:focus-visible { outline: 3px solid rgba(61, 103, 151, .32); outline-offset: 2px; }
.semantic-cpu input[type="range"] { width: min(260px, 30vw); accent-color: var(--cpu-teal); }
.semantic-cpu input[type="number"] { width: 72px; padding: 5px 7px; }
.semantic-cpu select { max-width: 250px; padding: 5px 8px; }

.cpu-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cpu-rule); }
.cpu-toolbar > label,
.cpu-toolbar fieldset > label { display: grid; gap: 5px; color: var(--cpu-ink); font-size: 11px; font-weight: 700; line-height: 1.3; }
.cpu-toolbar fieldset { display: flex; align-items: end; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; border: 0; }
.cpu-toolbar legend { width: 100%; margin-bottom: 3px; color: var(--cpu-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cpu-toolbar input[type="checkbox"] { accent-color: var(--cpu-teal); }
.cpu-status,
.cpu-detail { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--cpu-blue); background: var(--cpu-blue-soft); color: #27466e; line-height: 1.5; }
.cpu-detail { border-left-color: var(--cpu-teal); background: var(--cpu-page); color: var(--cpu-ink); }
.cpu-readouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.cpu-readouts > div { display: grid; gap: 4px; min-width: 0; padding: 9px 10px; background: var(--cpu-page); }
.cpu-readouts span,
.cpu-source-note span { color: var(--cpu-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.cpu-readouts strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.25; }
.cpu-source-note { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; color: var(--cpu-muted); font-size: 11px; line-height: 1.45; }
.cpu-source-note span { color: var(--cpu-teal); }
.cpu-svg { display: block; width: 100%; height: auto; margin-top: 15px; overflow: visible; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.cpu-svg text { fill: var(--cpu-ink); font-size: 13px; }
#cpu5-arrow path,
#cpu6-arrow path,
#cpu7-engine-arrow path,
#cpu8-arrow path,
#cpu9-arrow path,
#cpu10-arrow path,
#cpu11-arrow path { fill: context-stroke; }
.cpu-center { text-anchor: middle; }
.cpu-end { text-anchor: end; }
.cpu-overline { fill: var(--cpu-teal) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px !important; font-weight: 700; letter-spacing: .05em; }
.cpu-label,
.cpu-lane-label { fill: var(--cpu-muted) !important; font-size: 11px !important; font-weight: 700; }
.cpu-heading { font-size: 14px !important; font-weight: 700; }
.cpu-value { fill: var(--cpu-teal) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px !important; font-weight: 700; }
.cpu-key,
.cpu-note,
.cpu-small,
.cpu-caption { fill: var(--cpu-muted) !important; font-size: 11px !important; }
.cpu-small { font-size: 10px !important; }
.cpu-caption { font-style: italic; }
.cpu-warning { fill: var(--cpu-coral) !important; font-size: 12px !important; font-weight: 700; }
.cpu-dark { fill: #164f49 !important; font-size: 12px !important; }
.cpu-readouts.cpu5-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpu-readouts.cpu6-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpu-readouts.cpu8-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpu-readouts.cpu10-readouts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cpu-readouts.cpu11-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpu-table-wrap { max-width: 100%; margin-top: 13px; overflow-x: auto; }
.cpu-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cpu-table caption { margin-bottom: 7px; color: var(--cpu-muted); font-size: 11px; text-align: left; }
.cpu-table th,
.cpu-table td { padding: 8px; border-top: 1px solid var(--cpu-rule); text-align: left; vertical-align: top; }
.cpu-table th { white-space: nowrap; }
.cpu-table td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

[data-inspect] { cursor: default; outline: 0; }
[data-cpu-click] { cursor: pointer; }
[data-inspect]:focus-visible rect,
[data-inspect]:focus-visible circle,
[data-inspect]:focus-visible ellipse,
[data-inspect]:hover rect,
[data-inspect]:hover circle,
[data-inspect]:hover ellipse { filter: brightness(.98); stroke: var(--cpu-ink); stroke-width: 2.5; }

/* Chapter 4: one time rail plus one process-anatomy rail. */
.cpu4-time-node circle { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 1.5; }
.cpu4-time-node.is-past circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }
.cpu4-time-node.is-active circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 3; }
.cpu4-time-link { stroke: var(--cpu-rule); stroke-width: 2; }
.cpu4-time-link.is-past { stroke: var(--cpu-teal); stroke-width: 3; }
.cpu4-disk ellipse,
.cpu4-disk rect { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 1.5; }
.cpu4-address > rect:first-child { fill: var(--cpu-page); stroke: var(--cpu-teal); stroke-width: 1.5; }
.cpu4-code { fill: #b9ddd2; }.cpu4-data { fill: #d3e8df; }.cpu4-heap { fill: var(--cpu-amber); }.cpu4-stack { fill: var(--cpu-coral-soft); }
.cpu4-pcb > rect { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); stroke-width: 1.5; }
.cpu4-registers > rect { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); stroke-width: 1.5; }
.cpu4-address.is-focus > rect:first-child,
.cpu4-pcb.is-focus > rect,
.cpu4-registers.is-focus > rect { stroke: var(--cpu-ink); stroke-width: 3; }
.cpu4-anatomy-arrow,
.cpu4-process-route { fill: none; stroke: var(--cpu-muted); stroke-width: 2; }
.cpu4-register-arrow { fill: none; stroke: var(--cpu-rule); stroke-width: 2; stroke-dasharray: 5 4; }
.cpu4-register-arrow.cpu4-packet-to-cpu { stroke: var(--cpu-teal); stroke-width: 4; }
.cpu4-register-arrow.cpu4-packet-to-pcb { stroke: var(--cpu-coral); stroke-width: 4; }

/* Chapter 5: process identity, image replacement, and wait dependency are one machine. */
.cpu5v2-parent-zone { fill: #f7fbf9; stroke: var(--cpu-teal); stroke-width: 1; }
.cpu5v2-child-zone { fill: #f6f8fc; stroke: var(--cpu-blue); stroke-width: 1; }
.cpu5v2-phase-rail { fill: none; stroke: var(--cpu-rule); stroke-width: 2; }
.cpu5v2-phase circle { fill: var(--cpu-paper); stroke: var(--cpu-rule); stroke-width: 2; }
.cpu5v2-phase.is-past circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }
.cpu5v2-phase.is-current circle { fill: var(--cpu-coral); stroke: var(--cpu-ink); stroke-width: 3; }
.cpu5v2-parent-rail,
.cpu5v2-child-rail { fill: none; stroke: var(--cpu-rule); stroke-width: 4; }
.cpu5v2-child-rail { stroke: #aebfd4; }
.cpu5v2-history { fill: none; stroke: var(--cpu-teal); stroke-width: 7; stroke-linecap: round; }
.cpu5v2-history.child { stroke: var(--cpu-blue); }
.cpu5v2-fork circle { fill: var(--cpu-amber); stroke: #946b19; stroke-width: 2; }
.cpu5v2-return path { fill: var(--cpu-paper); stroke: var(--cpu-muted); stroke-width: 1.5; }
.cpu5v2-return.child path { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); }
.cpu5v2-capsule path { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 2.5; }
.cpu5v2-capsule.child path { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); }
.cpu5v2-capsule.blocked path,
.cpu5v2-capsule.waiting path { fill: var(--cpu-amber); stroke: #946b19; }
.cpu5v2-capsule.zombie path { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); }
.cpu5v2-capsule.reaped path,
.cpu5v2-capsule.done path { fill: var(--cpu-page); stroke: var(--cpu-muted); }
.cpu5v2-exec path { fill: var(--cpu-paper); stroke: var(--cpu-rule); stroke-width: 2; stroke-dasharray: 5 4; }
.cpu5v2-exec.is-complete path { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); stroke-dasharray: none; }
.cpu5v2-wait-gate > path { fill: none; stroke: var(--cpu-muted); stroke-width: 5; }
.cpu5v2-wait-gate circle { fill: var(--cpu-paper); stroke: var(--cpu-muted); stroke-width: 2; }
.cpu5v2-wait-gate.is-closed circle { fill: var(--cpu-amber); stroke: #946b19; }
.cpu5v2-wait-gate.is-open circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }
.cpu5v2-exit path { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 2; }
.cpu5v2-exit.is-active path { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); }
.cpu5v2-dependency,
.cpu5v2-race { fill: none; stroke: var(--cpu-muted); stroke-width: 2; stroke-dasharray: 6 5; }
.cpu5v2-dependency.is-satisfied { stroke: var(--cpu-teal); stroke-width: 4; stroke-dasharray: none; }
.cpu5v2-race { stroke: var(--cpu-coral); }
.cpu5v2-absent circle { fill: var(--cpu-paper); stroke: var(--cpu-rule); stroke-width: 2; stroke-dasharray: 3 3; }
.cpu5v2-cursor { stroke: var(--cpu-coral); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.cpu5v3-bay { fill: var(--cpu-paper); stroke: var(--cpu-rule); stroke-width: 1.5; }
.cpu5v3-cutaway.parent .cpu5v3-bay { fill: #f7fbf9; stroke: var(--cpu-teal); }
.cpu5v3-cutaway.child .cpu5v3-bay { fill: #f6f8fc; stroke: var(--cpu-blue); }
.cpu5v3-cutaway.is-absent { opacity: .45; }
.cpu5v3-pcb path { fill: var(--cpu-amber); stroke: #946b19; stroke-width: 2; }
.cpu5v3-cutaway.child .cpu5v3-pcb path { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); }
.cpu5v3-region { stroke: var(--cpu-paper); stroke-width: 1.5; }
.cpu5v3-region.region-0 { fill: var(--cpu-coral-soft); }
.cpu5v3-region.region-1 { fill: var(--cpu-blue-soft); }
.cpu5v3-region.region-2 { fill: var(--cpu-teal-soft); }
.cpu5v3-region.region-3 { fill: var(--cpu-amber); }
.cpu5v3-region.is-released { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-dasharray: 4 3; }
.cpu5v3-mm-link { fill: none; stroke: var(--cpu-blue); stroke-width: 3; marker-end: url(#cpu5-arrow); }
.cpu5v3-mm-link.is-replaced { stroke: var(--cpu-coral); }

/* Chapter 6: literal CPU, trap hardware, kernel state, scheduler, and return circuit. */
.cpu6v2-band { stroke-width: 1.5; }
.cpu6v2-band.user { fill: #f7fbf9; stroke: var(--cpu-teal); }
.cpu6v2-band.hardware { fill: #f5f7fb; stroke: var(--cpu-blue); }
.cpu6v2-band.kernel { fill: #fffaf0; stroke: #a87515; }
.cpu6v2-wire { fill: none; stroke: var(--cpu-rule); stroke-width: 2; }
.cpu6v2-wire.protected { stroke: #9aafc8; }
.cpu6v2-wire.is-past { stroke: var(--cpu-teal); stroke-width: 4; }
.cpu6v2-wire.is-current { stroke: var(--cpu-coral); stroke-width: 5; }
.cpu6v2-source { fill: none; stroke-width: 3; stroke-dasharray: 5 4; }
.cpu6v2-source.timer { stroke: var(--cpu-coral); }
.cpu6v2-source.syscall { stroke: var(--cpu-teal); }
.cpu6v2-source.is-current { stroke-width: 6; stroke-dasharray: none; }
.cpu6v2-timer-source circle { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); stroke-width: 2; }
.cpu6v2-timer-source path { fill: none; stroke: var(--cpu-coral); stroke-width: 2; stroke-linecap: round; }
.cpu6v2-stage { cursor: pointer; outline: none; pointer-events: bounding-box; }
.cpu6v2-stage > g > path,
.cpu6v2-stage > g > circle { transition: filter .15s ease, stroke-width .15s ease; }
.cpu6v2-stage:hover > g > path,
.cpu6v2-stage:hover > g > circle,
.cpu6v2-stage:focus-visible > g > path,
.cpu6v2-stage:focus-visible > g > circle { filter: brightness(.96); stroke-width: 3; }
.cpu6v2-stage.is-current > g > path,
.cpu6v2-stage.is-current > g > circle { stroke: var(--cpu-ink); stroke-width: 3.5; }
.cpu6v2-trap-table path { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); stroke-width: 1.5; }
.cpu6v2-cpu path { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 2; }
.cpu6v2-gate path { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); stroke-width: 2; }
.cpu6v2-mode-latch path { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); stroke-width: 2; }
.cpu6v2-kstack > path { fill: var(--cpu-amber); stroke: #946b19; stroke-width: 2; }
.cpu6v2-kstack rect { fill: var(--cpu-paper); stroke: #946b19; }
.cpu6v2-handler > circle:first-child { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); stroke-width: 2; }
.cpu6v2-scheduler circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 2; }
.cpu6v2-scheduler path { fill: none; stroke: var(--cpu-teal); stroke-width: 1.5; }
.cpu6v2-pcbs path { fill: var(--cpu-paper); stroke: var(--cpu-rule); stroke-width: 1.5; }
.cpu6v2-pcbs path.is-selected { fill: var(--cpu-amber); stroke: #946b19; stroke-width: 3; }
.cpu6v2-restore path { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); stroke-width: 2; }
.cpu6v2-return circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 2; }
.cpu6v2-packet rect { fill: var(--cpu-amber); stroke: #946b19; stroke-width: 2; }
.cpu6v2-mode-readout path { fill: var(--cpu-paper); stroke: var(--cpu-blue); stroke-width: 1.5; }
.cpu6v3-capture rect { fill: var(--cpu-paper); stroke: var(--cpu-rule); stroke-width: 1.5; }
.cpu6v3-capture.is-active rect { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); stroke-width: 2; }

/* Chapter 7: four policy lanes retain one shared workload and ruler. */
.cpu7-workload { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.cpu7-workload > label { display: grid; gap: 6px; padding: 9px 10px; border-top: 3px solid var(--cpu-rule); background: var(--cpu-page); font-weight: 700; }
.cpu7-workload > label:nth-child(1) { border-top-color: var(--cpu-coral); }.cpu7-workload > label:nth-child(2) { border-top-color: var(--cpu-teal); }.cpu7-workload > label:nth-child(3) { border-top-color: var(--cpu-blue); }
.cpu7-workload span { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--cpu-muted); font-size: 11px; font-weight: 500; }
.cpu7-segment rect { stroke: var(--cpu-paper); stroke-width: 2; }.cpu7-segment.job-a rect { fill: var(--cpu-coral); }.cpu7-segment.job-b rect { fill: var(--cpu-teal); }.cpu7-segment.job-c rect { fill: var(--cpu-blue); }.cpu7-segment.is-idle rect { fill: var(--cpu-rule); }
.cpu7-segment.is-selected-lane rect { stroke: var(--cpu-ink); stroke-width: 3; }
.cpu-bar-label { fill: #fff !important; font-size: 14px !important; font-weight: 700; }
.cpu7-bracket { stroke: var(--cpu-muted); stroke-width: 2; }.cpu7-bracket.is-selected-lane { stroke: var(--cpu-ink); stroke-width: 3; }
.cpu7-arrival-pin { stroke-width: 2; stroke-dasharray: 4 4; }.cpu7-arrival-pin.job-a { stroke: var(--cpu-coral); }.cpu7-arrival-pin.job-b { stroke: var(--cpu-teal); }.cpu7-arrival-pin.job-c { stroke: var(--cpu-blue); }
.cpu7-axis-tick { stroke: var(--cpu-rule); stroke-width: 1; }.cpu7-cursor { stroke: var(--cpu-coral); stroke-width: 3; }.is-selected-label { fill: var(--cpu-ink) !important; }
.cpu7-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpu7-life-wait { fill: var(--cpu-paper); stroke: var(--cpu-rule); }
.cpu7-life-run.job-a { fill: var(--cpu-coral); }.cpu7-life-run.job-b { fill: var(--cpu-teal); }.cpu7-life-run.job-c { fill: var(--cpu-blue); }
.cpu7-first { stroke: #fff; stroke-width: 2; }.cpu7-first.job-a { fill: var(--cpu-coral); }.cpu7-first.job-b { fill: var(--cpu-teal); }.cpu7-first.job-c { fill: var(--cpu-blue); }
.cpu7-turnaround-bracket { fill: none; stroke: var(--cpu-ink); stroke-width: 1.5; }
.cpu7-engine { margin-top: 4px; border-top: 1px solid var(--cpu-rule); border-bottom: 1px solid var(--cpu-rule); }
.cpu7-arrival-port circle { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 2; }
.cpu7-arrival-port.is-open.job-a circle { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); }
.cpu7-arrival-port.is-open.job-b circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }
.cpu7-arrival-port.is-open.job-c circle { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); }
.cpu7-engine-rail { fill: none; stroke: var(--cpu-rule); stroke-width: 6; stroke-linecap: round; }
.cpu7-engine-route,
.cpu7-register-route { fill: none; stroke: var(--cpu-muted); stroke-width: 2.5; }
.cpu7-engine-route.is-dispatch { stroke: var(--cpu-teal); stroke-width: 4; }
.cpu7-engine-token > circle:first-child { fill: var(--cpu-paper); stroke: var(--cpu-rule); stroke-width: 2; }
.cpu7-engine-token.job-a > circle:first-child { stroke: var(--cpu-coral); }
.cpu7-engine-token.job-b > circle:first-child { stroke: var(--cpu-teal); }
.cpu7-engine-token.job-c > circle:first-child { stroke: var(--cpu-blue); }
.cpu7-engine-progress { fill: none; stroke: var(--cpu-coral); stroke-width: 4; stroke-linecap: round; }
.cpu7-engine-token.job-b .cpu7-engine-progress { stroke: var(--cpu-teal); }
.cpu7-engine-token.job-c .cpu7-engine-progress { stroke: var(--cpu-blue); }
.cpu7-policy-rotor circle { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); stroke-width: 2.5; }
.cpu7-policy-rotor path { fill: none; stroke: var(--cpu-blue); stroke-width: 4; stroke-linecap: round; }
.cpu7-engine-cpu > circle:first-child { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 2.5; }
.cpu7-engine-cpu > circle:nth-child(2) { fill: var(--cpu-paper); stroke: var(--cpu-rule); }
.cpu7-engine-cpu.is-active > circle:first-child { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }
.cpu7-register-packet path { fill: var(--cpu-amber); stroke: #946b19; stroke-width: 2; }

/* Chapter 8: queue lanes, I/O bay, and a time-aligned service history. */
.cpu8-lane { fill: none; stroke: var(--cpu-rule); stroke-width: 5; stroke-linecap: round; }
.cpu8-token-shell { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 1.5; }
.cpu8-token.job-a .cpu8-token-shell { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); }.cpu8-token.job-b .cpu8-token-shell { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }
.cpu8-token.is-selected .cpu8-token-shell { stroke: var(--cpu-ink); stroke-width: 3; }
.cpu8-allotment-cell { stroke: none; }.cpu8-allotment-cell.is-remaining { fill: var(--cpu-blue); }.cpu8-allotment-cell.is-used { fill: var(--cpu-rule); }
.cpu8-cpu-socket circle { fill: var(--cpu-page); stroke: var(--cpu-blue); stroke-width: 3; }.cpu8-cpu-socket circle + circle { fill: var(--cpu-blue-soft); stroke-width: 1.5; }.cpu8-cpu-socket.is-active circle + circle { fill: var(--cpu-amber); stroke: #a87515; }
.cpu8-io-device path { fill: var(--cpu-page); stroke: var(--cpu-teal); stroke-width: 2; }.cpu8-io-device.is-active path { fill: var(--cpu-teal-soft); stroke-width: 3; }
.cpu8-dispatch-route,.cpu8-block-route,.cpu8-wake-route,.cpu8-boost-route { fill: none; stroke: var(--cpu-rule); stroke-width: 2; stroke-dasharray: 5 5; }.cpu8-dispatch-route.is-active { stroke: var(--cpu-blue); stroke-width: 4; }.cpu8-block-route.is-active { stroke: var(--cpu-coral); stroke-width: 4; }.cpu8-wake-route.is-active { stroke: var(--cpu-teal); stroke-width: 4; }.cpu8-boost-route.is-active { stroke: var(--cpu-amber); stroke-width: 4; }
.cpu8-history-back { fill: var(--cpu-page); stroke: var(--cpu-rule); }
.cpu8-history { opacity: .85; }.cpu8-history.job-a { fill: var(--cpu-coral); }.cpu8-history.job-b { fill: var(--cpu-teal); }
.cpu8-cursor { stroke: var(--cpu-coral); stroke-width: 3; }.cpu-marker { fill: var(--cpu-coral) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px !important; font-weight: 700; }
.cpu8-feedback > circle:first-child { fill: #fffaf0; stroke: #946b19; stroke-width: 2.5; }
.cpu8-feedback > circle:nth-of-type(2) { fill: var(--cpu-paper); stroke: var(--cpu-blue); stroke-width: 2; }
.cpu8-feedback > path:first-of-type { fill: none; stroke: #946b19; stroke-width: 4; stroke-linecap: round; }
.cpu8-feedback-pointer { fill: none; stroke: var(--cpu-coral); stroke-width: 5; stroke-linecap: round; }

/* Chapter 9: list walk, scale-faithful interval, and sample-share strip. */
.cpu9-link { fill: none; stroke: var(--cpu-rule); stroke-width: 2; }.cpu9-link.is-visited { stroke: var(--cpu-teal); stroke-width: 3; }
.cpu9-node circle { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 1.5; }.cpu9-node.is-visited circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }.cpu9-node.is-current circle { stroke: var(--cpu-ink); stroke-width: 3; }.cpu9-node.is-winner circle { fill: var(--cpu-coral-soft); stroke: var(--cpu-coral); }
.cpu9-range rect { fill: var(--cpu-page); stroke: var(--cpu-paper); stroke-width: 2; }.cpu9-range:nth-of-type(1) rect { fill: var(--cpu-coral-soft); }.cpu9-range:nth-of-type(2) rect { fill: var(--cpu-teal-soft); }.cpu9-range:nth-of-type(3) rect { fill: var(--cpu-blue-soft); }.cpu9-range.is-visited rect { filter: brightness(.97); }.cpu9-range.is-winner rect { stroke: var(--cpu-ink); stroke-width: 3; }
.cpu9-draw-marker { stroke: var(--cpu-coral); stroke-width: 3; }.cpu9-counter-marker { stroke: var(--cpu-teal); stroke-width: 4; }.cpu9-expected { fill: var(--cpu-rule); }.cpu9-observed.job-a { fill: var(--cpu-coral); }.cpu9-observed.job-b { fill: var(--cpu-teal); }.cpu9-observed.job-c { fill: var(--cpu-blue); }
.cpu-table tr.is-visited th,
.cpu-table tr.is-visited td { background: var(--cpu-teal-soft); }

/* Chapter 10: two CPU rooms, cache-line path, and queue strip. */
.cpu10-room { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 1.5; }.cpu10-room.is-active-room { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); stroke-width: 2.5; }
.cpu10-process circle { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 3; }
.cpu10-load-cell { fill: var(--cpu-rule); }.cpu10-load-cell.is-filled { fill: var(--cpu-coral); }
.cpu10-ws rect { stroke-width: 1.5; }.cpu10-ws.is-resident rect { fill: var(--cpu-amber); stroke: #a87515; }.cpu10-ws.is-cold rect { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-dasharray: 3 2; }.cpu10-ws.is-left-behind { opacity: .55; }
.cpu10-cache path { fill: var(--cpu-amber); stroke: #a87515; stroke-width: 1.5; }.cpu10-migration,.cpu10-spine,.cpu10-bus,.cpu10-miss { fill: none; stroke: var(--cpu-rule); stroke-width: 2; }.cpu10-migration.is-active,.cpu10-miss { stroke: var(--cpu-coral); stroke-width: 3; }.cpu10-spine,.cpu10-bus { stroke: var(--cpu-teal); stroke-width: 3; }
.cpu10-memory path { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 1.5; }
.cpu10-queue-rail { fill: none; stroke: var(--cpu-rule); stroke-width: 5; stroke-linecap: round; }.cpu10-queue-token { fill: var(--cpu-blue-soft); stroke: var(--cpu-blue); stroke-width: 2; }.cpu10-queue-token.job-p { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); }
.cpu10-distinction { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; padding-block: 16px; border-block: 1px solid var(--cpu-rule); }
.cpu10-distinction article { padding-top: 9px; border-top: 3px solid var(--cpu-blue); }
.cpu10-distinction article + article { border-top-color: var(--cpu-teal); }
.cpu10-distinction span { color: var(--cpu-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cpu10-distinction h4 { margin: 4px 0 6px; font-size: 17px; }
.cpu10-distinction p { margin: 0 0 8px; line-height: 1.45; }
.cpu10-distinction strong { color: var(--cpu-teal); font-size: 12px; }

/* Chapter 11: one causal explanation chain under one schedule. */
.cpu11-time-axis { fill: none; stroke: var(--cpu-rule); stroke-width: 2; }
.cpu11-segment rect { stroke: var(--cpu-paper); stroke-width: 2; }.cpu11-segment.job-e rect { fill: var(--cpu-teal); }.cpu11-segment.job-c rect { fill: var(--cpu-coral); }.cpu11-segment.is-current rect { stroke: var(--cpu-ink); stroke-width: 4; }
.cpu11-cursor { stroke: var(--cpu-blue); stroke-width: 2; stroke-dasharray: 5 4; }
.cpu11-chain-card { opacity: .68; transition: opacity .18s ease; }
.cpu11-chain-card rect { fill: var(--cpu-page); stroke: var(--cpu-rule); stroke-width: 1.5; }
.cpu11-chain-card.is-active { opacity: 1; }
.cpu11-chain-card.is-active rect { fill: var(--cpu-teal-soft); stroke: var(--cpu-teal); stroke-width: 3; }
.cpu11-chain-card:focus { opacity: 1; outline: none; }
.cpu11-chain-arrow { fill: none; stroke: var(--cpu-blue); stroke-width: 3; }
.cpu11-card-question { fill: var(--cpu-ink) !important; font-size: 12px !important; font-weight: 750; }
.cpu11-selected-answer { fill: var(--cpu-ink) !important; font-size: 12px !important; font-weight: 650; }

@media (max-width: 780px) {
  .semantic-cpu input[type="range"] { width: 220px; }
  .cpu-readouts,
  .cpu-readouts.cpu5-readouts,
  .cpu-readouts.cpu6-readouts,
  .cpu-readouts.cpu8-readouts,
  .cpu-readouts.cpu10-readouts,
  .cpu-readouts.cpu11-readouts,
  .cpu7-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpu10-distinction { grid-template-columns: 1fr; }
  .cpu7-workload { grid-template-columns: 1fr; }
  .cpu-svg { min-width: 760px; }
  .semantic-cpu > [data-cpu4-view],
  .semantic-cpu > [data-cpu5-view],
  .semantic-cpu > [data-cpu6-view],
  .semantic-cpu > [data-cpu7-output],
  .semantic-cpu > [data-cpu8-view],
  .semantic-cpu > [data-cpu9-view],
  .semantic-cpu > [data-cpu10-view],
  .semantic-cpu > [data-cpu11-view] { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 480px) {
  .cpu-readouts,
  .cpu-readouts.cpu5-readouts,
  .cpu-readouts.cpu6-readouts,
  .cpu-readouts.cpu8-readouts,
  .cpu-readouts.cpu10-readouts,
  .cpu-readouts.cpu11-readouts,
  .cpu7-summary { grid-template-columns: 1fr; }
  .cpu-toolbar { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .semantic-cpu *,
  .semantic-cpu *::before,
  .semantic-cpu *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.cpu-event-picker { display: grid; gap: 7px; margin: 0 0 12px; }
.cpu-event-picker > span, .cpu-control-note { color: var(--cpu-muted); font-size: 12px; font-weight: 700; }
.cpu-event-picker > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cpu-event-picker button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--cpu-rule); background: #fff; color: var(--cpu-ink); }
.cpu-event-picker button[aria-pressed="true"] { border-color: var(--cpu-teal); background: var(--cpu-teal-soft); color: #084f49; font-weight: 700; }
.cpu-event-picker button:disabled { opacity: .35; cursor: default; }

/* Editorial canvas figures */
.cpu-canvas-stage {
  position: relative;
  width: 100%;
  margin-top: 18px;
  background: #fffdf9;
  border-radius: 0;
  overflow: hidden;
  border-block: 1px solid #d9d4cc;
  box-shadow: none;
  user-select: none;
  touch-action: none;
  cursor: ew-resize;
}
.cpu-canvas-stage:active {
  cursor: ew-resize;
}
.cpu-canvas-element {
  display: block;
  width: 100%;
  height: auto;
}
.cpu-canvas-hud {
  display: none;
}
.cpu-hud-badge {
  background: rgba(15, 22, 21, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 211, 207, 0.2);
  color: #d7eee8;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cpu-hud-badge.is-live {
  border-color: #0b776d;
  color: #34d399;
}
.cpu-hud-badge.is-warn {
  border-color: #bd503b;
  color: #f87171;
}
.cpu-canvas-hint {
  position: absolute;
  bottom: 10px;
  right: 14px;
  color: #766f68;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
  background: rgba(255, 253, 249, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
}

.cpu-advanced-controls { margin-top: 10px; color: var(--cpu-muted); font-size: 11px; }
.cpu-advanced-controls summary { width: max-content; cursor: pointer; font-weight: 700; }
.semantic-cpu-7:not([data-cpu7-policy="rr"]) [data-cpu7-quantum-control] { display: none; }

.semantic-cpu-5 .cpu-status,
.semantic-cpu-6 .cpu-status,
.semantic-cpu-7 .cpu-status,
.semantic-cpu-8 .cpu-status,
.semantic-cpu-5 .cpu-detail,
.semantic-cpu-6 .cpu-detail,
.semantic-cpu-7 .cpu-detail,
.semantic-cpu-8 .cpu-detail {
  padding: 9px 0;
  border-left: 0;
  border-bottom: 1px solid #d8d2ca;
  background: transparent;
  color: #453f39;
}