.os-concurrency {
  --cc-ink: var(--ink, #1f2926);
  --cc-muted: var(--muted, #5f6d68);
  --cc-rule: var(--rule, #cfd9d5);
  --cc-page: var(--page, #f4f7f5);
  --cc-teal: var(--teal, #167064);
  --cc-blue: #356b80;
  --cc-coral: var(--coral, #b35343);
  --cc-amber: #9b6c13;
  --cc-teal-soft: #dcefeb;
  --cc-blue-soft: #e2edf0;
  --cc-coral-soft: #f3e4df;
  --cc-amber-soft: #f5ecd7;
  color: var(--cc-ink);
  font-size: 14px;
  line-height: 1.45;
}

.os-concurrency *,
.os-concurrency *::before,
.os-concurrency *::after { box-sizing: border-box; }

.cc-control-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px 20px;
  margin: 18px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--cc-rule);
  background: var(--cc-page);
}

.cc-control-bar > div { display: grid; gap: 7px; min-width: 0; }
.cc-control-label,
.cc-readout-kicker,
.cc-section-label,
.cc-table-head {
  color: var(--cc-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.cc-choice-group { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-choice,
.cc-step {
  border: 1px solid #aebdb7;
  border-radius: 4px;
  background: #fff;
  color: var(--cc-ink);
  cursor: pointer;
  font: inherit;
}

.cc-choice {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

.cc-choice:hover,
.cc-step:hover { border-color: var(--cc-teal); }
.cc-choice[aria-pressed="true"],
.cc-step.is-current { border-color: var(--cc-teal); background: var(--cc-teal); color: #fff; }

.cc-scrub {
  display: grid;
  gap: 7px;
  margin: 10px 0 14px;
}

.cc-step-list { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-step {
  display: grid;
  min-width: 74px;
  min-height: 43px;
  padding: 4px 7px;
  text-align: left;
}

.cc-step span { font-size: 11px; font-weight: 800; }
.cc-step small { font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; }
.cc-check { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 12px; }
.cc-check input { width: 17px; height: 17px; accent-color: var(--cc-teal); }

.cc-choice:focus-visible,
.cc-step:focus-visible,
.cc-check input:focus-visible,
.cc-target:focus-visible,
.cc-circle-target:focus-visible { outline: 3px solid var(--cc-coral); outline-offset: 3px; }

.cc-map-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 18px;
  color: var(--cc-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.cc-map-header strong { color: var(--cc-ink); font-size: 13px; text-transform: none; }
.cc-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 8px; }
.cc-figure { min-width: 0; overflow-x: auto; padding: 12px 0 5px; border-top: 2px solid var(--cc-ink); border-bottom: 1px solid var(--cc-rule); background: #fff; }
.cc-map { display: block; width: 100%; min-width: 760px; height: auto; overflow: visible; }
.cc-map text { fill: var(--cc-ink); font-family: inherit; }
.cc-readout { min-height: 0; padding: 13px 16px; border-left: 3px solid var(--cc-teal); background: var(--cc-page); }
.cc-readout h5 { margin: 6px 0 8px; font-size: 18px; line-height: 1.18; }
.cc-readout p { margin: 0; color: var(--cc-ink); font-size: 13px; }
.cc-readout dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.cc-readout dl div { padding-top: 8px; border-top: 1px solid var(--cc-rule); }
.cc-readout dt { color: var(--cc-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.cc-readout dd { margin: 2px 0 0; font-size: 12px; overflow-wrap: anywhere; }

.cc-line { fill: none; stroke: #b8c7c2; stroke-width: 2; }
.cc-route { stroke: var(--cc-teal); stroke-width: 3; marker-end: url(#cc25-arrow); }
.cc-danger-route { stroke: var(--cc-coral); stroke-width: 3; stroke-dasharray: 8 5; marker-end: url(#cc25-arrow); }
.cc-wait-route { stroke: var(--cc-amber); stroke-width: 3; stroke-dasharray: 4 4; marker-end: url(#cc25-arrow); }
.cc-thread-a-route { stroke: var(--cc-blue); stroke-width: 3; marker-end: url(#cc25-arrow); }
.cc-thread-b-route { stroke: var(--cc-amber); stroke-width: 3; stroke-dasharray: 4 3; marker-end: url(#cc25-arrow); }
.cc-muted-route { stroke: #d7dfdc; stroke-width: 2; }
.cc-shared-route { fill: none; stroke: var(--cc-teal); stroke-width: 3; marker-end: url(#cc25-arrow); }
.cc-private-route { stroke: var(--cc-blue); stroke-width: 2; stroke-dasharray: 4 4; }
.cc-permit-route { fill: none; stroke: var(--cc-blue); stroke-width: 2; marker-end: url(#cc25-arrow); }
.cc-arrow-head { fill: var(--cc-teal); }
.cc-danger-route + .cc-arrow-head { fill: var(--cc-coral); }
.cc-lane { stroke: var(--cc-rule); stroke-width: 1.5; }
.cc-grid-line,
.cc-time-rule { stroke: #e1e8e5; stroke-dasharray: 3 5; }
.cc-now-line { stroke: var(--cc-coral); stroke-width: 2; stroke-dasharray: 5 4; }
.cc-now-label { fill: var(--cc-coral) !important; font-size: 11px; font-weight: 800; }
.cc-axis-note { fill: var(--cc-muted) !important; font-size: 10px; }
.cc-lane-label,
.cc-section-label { fill: var(--cc-muted) !important; font-size: 11px; font-weight: 700; }
.cc-scene-conclusion { fill: var(--cc-ink) !important; font-size: 12px; font-weight: 700; }
.cc-danger-label,
.cc-cycle-label { fill: var(--cc-coral) !important; font-size: 11px; font-weight: 800; }
.cc-equation { fill: var(--cc-blue) !important; font-size: 15px; font-weight: 800; }
.cc-arrow-label { fill: var(--cc-muted) !important; font-size: 10px; font-weight: 700; }

.cc-target,
.cc-circle-target { outline: 0; }
.cc-target.is-clickable,
.cc-circle-target.is-clickable { cursor: pointer; }
.cc-target:not(.is-clickable),
.cc-circle-target:not(.is-clickable) { cursor: default; }
.cc-target rect { fill: #fff; stroke: #a7b7b1; stroke-width: 1.5; }
.cc-target.is-clickable:hover rect,
.cc-target.is-clickable:focus-visible rect,
.cc-circle-target.is-clickable:hover circle,
.cc-circle-target.is-clickable:focus-visible circle { stroke: var(--cc-teal); stroke-width: 3; }
.cc-target.is-selected rect,
.cc-circle-target.is-selected circle { fill: var(--cc-teal-soft); stroke: var(--cc-teal); stroke-width: 2.5; }
.cc-target.is-danger rect,
.cc-circle-target.is-danger circle { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-target .cc-title { font-size: 11px; font-weight: 800; }
.cc-target .cc-detail { fill: var(--cc-muted) !important; font-size: 9px; }
.cc-circle-target circle { fill: #fff; stroke: #a7b7b1; stroke-width: 1.5; }
.cc-circle-target text { font-size: 11px; font-weight: 800; }

.cc-register-chip rect { fill: #fff; stroke: #a7b7b1; stroke-width: 1.5; }
.cc-register-chip.is-active rect { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }
.cc-register-chip text { font-size: 11px; font-weight: 800; }
.cc-shared-counter { fill: var(--cc-teal-soft); stroke: var(--cc-teal); stroke-width: 2.5; }
.cc-shared-counter.is-bad { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-counter-label { fill: var(--cc-muted) !important; font-size: 11px; font-weight: 700; }
.cc-counter-value { fill: var(--cc-ink) !important; font-size: 25px; font-weight: 800; }
.cc-event-dot circle { fill: #fff; stroke: #a7b7b1; stroke-width: 1.5; }
.cc-event-dot.is-shown circle { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-event-dot.is-current circle { stroke-width: 4; }
.cc-event-dot.is-danger circle { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-event-dot text { font-size: 10px; font-weight: 800; }
.cc-event-value { opacity: 0; fill: var(--cc-muted) !important; font-size: 10px; font-weight: 700; }
.cc-event-value.is-shown { opacity: 1; }
.cc-irreversible-bracket { fill: none; stroke: var(--cc-coral); stroke-width: 2; }
.cc-critical-band { fill: var(--cc-teal-soft); stroke: var(--cc-teal); stroke-width: 1.5; }
.cc-band-label { fill: var(--cc-teal) !important; font-size: 10px; font-weight: 800; }

.cc-address-frame { fill: #fff; stroke: var(--cc-ink); stroke-width: 1.5; }
.cc-shared-region rect { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-free-region { fill: #f8faf9; stroke: var(--cc-rule); stroke-dasharray: 4 4; }
.cc-stack-packet { fill: var(--cc-blue-soft); stroke: var(--cc-blue); stroke-width: 1.5; }
.cc-register-packet { fill: #fff; stroke: var(--cc-blue); stroke-width: 1.5; }
.cc-thread-packet.is-active .cc-stack-packet { fill: var(--cc-amber-soft); stroke: var(--cc-amber); stroke-width: 2.5; }
.cc-thread-packet text { font-size: 10px; font-weight: 800; }
.cc-thread-packet .cc-detail { fill: var(--cc-muted) !important; font-size: 9px; font-weight: 400; }
.cc-page-table { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }

.cc-life-argument { fill: var(--cc-blue-soft); stroke: var(--cc-blue); opacity: .45; }
.cc-life-argument.is-live { opacity: 1; }
.cc-life-stack { fill: var(--cc-amber-soft); stroke: var(--cc-amber); opacity: .48; }
.cc-life-stack.is-live { opacity: 1; }
.cc-life-stack.is-ended { fill: var(--cc-coral-soft); stroke: var(--cc-coral); stroke-dasharray: 5 4; opacity: 1; }
.cc-life-handle { fill: var(--cc-blue-soft); stroke: var(--cc-blue); opacity: .48; }
.cc-life-handle.is-live { opacity: 1; }
.cc-life-result { fill: var(--cc-teal-soft); stroke: var(--cc-teal); opacity: .45; }
.cc-life-result.is-live { opacity: 1; }
.cc-life-result.is-invalid { fill: var(--cc-coral-soft); stroke: var(--cc-coral); stroke-width: 2; }
.cc-span-label { fill: var(--cc-ink) !important; font-size: 10px; font-weight: 700; }
.cc-api-node .cc-title { font-size: 10px; }
.cc-api-node .cc-detail { font-size: 8.5px; }

.cc-atomic-event .cc-title { font-size: 10px; }
.cc-atomic-event.cc-thread-a:not(.is-selected):not(.is-danger) rect { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }
.cc-atomic-event.cc-thread-b:not(.is-selected):not(.is-danger) rect { fill: var(--cc-amber-soft); stroke: var(--cc-amber); }
.cc-lock-turnstile { fill: var(--cc-blue-soft); stroke: var(--cc-blue); stroke-width: 2; }
.cc-lock-turnstile.is-held { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-lock-turnstile.is-bad { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-owner-label { fill: var(--cc-ink) !important; font-size: 11px; font-weight: 800; }
.cc-ledger { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }
.cc-ledger-row { fill: var(--cc-muted) !important; font-size: 11px; }
.cc-ledger-value { fill: var(--cc-ink) !important; font-size: 12px; font-weight: 800; text-anchor: end; }
.cc-value-danger { fill: var(--cc-coral) !important; }

.cc-operation-span { stroke-width: 1.5; }
.cc-operation-span.is-run { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-operation-span.is-wait { fill: var(--cc-coral-soft); stroke: var(--cc-coral); stroke-dasharray: 5 4; }
.cc-lock-rail { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }
.cc-lock-rail.is-coarse { fill: var(--cc-amber-soft); stroke: var(--cc-amber); }
.cc-invariant-strip { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }

.cc-cv-token circle { fill: #fff; stroke: #a7b7b1; stroke-width: 1.5; }
.cc-cv-token.is-parent:not(.is-current):not(.is-danger) circle { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }
.cc-cv-token.is-child:not(.is-current):not(.is-danger) circle { fill: var(--cc-amber-soft); stroke: var(--cc-amber); }
.cc-cv-token.is-current circle { fill: var(--cc-teal-soft); stroke: var(--cc-teal); stroke-width: 3; }
.cc-cv-token.is-danger circle { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-cv-token text { font-size: 13px; font-weight: 800; }
.cc-cv-label { fill: var(--cc-muted) !important; font-size: 10px; font-weight: 700; }
.cc-cv-center { fill: var(--cc-amber-soft); stroke: var(--cc-amber); stroke-width: 2; }
.cc-cv-center.is-bad { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-mutex-gate { fill: var(--cc-blue-soft); stroke: var(--cc-blue); stroke-width: 2; }
.cc-wait-queue { fill: #fff; stroke: var(--cc-amber); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cc-atomic-gate { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }

.cc-buffer-frame { fill: #fff; stroke: var(--cc-ink); stroke-width: 1.5; }
.cc-buffer-slot { fill: #fff; stroke: var(--cc-rule); stroke-width: 1.5; }
.cc-buffer-slot.is-full { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-slot-label { font-size: 11px; font-weight: 800; }

.cc-panel-frame { fill: #fff; stroke: var(--cc-rule); stroke-width: 1.5; }
.cc-relation-panel.is-active .cc-panel-frame { stroke: var(--cc-teal); stroke-width: 3; }
.cc-panel-title { fill: var(--cc-ink) !important; font-size: 14px; font-weight: 800; }
.cc-relation-panel.is-active .cc-panel-title { fill: var(--cc-teal) !important; }
.cc-cycle-label { font-size: 13px; }

.cc-fd-token rect { fill: #fff; stroke: var(--cc-rule); }
.cc-fd-token text { font-size: 10px; font-weight: 700; }
.cc-fd-token.is-ready rect { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-fd-token.is-queued rect { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-ready-frame { fill: #fff; stroke: var(--cc-rule); stroke-width: 1.5; }
.cc-loop-setup:not(.is-selected) rect,
.cc-loop-test:not(.is-selected) rect { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }
.cc-loop-wait:not(.is-selected) rect { fill: var(--cc-amber-soft); stroke: var(--cc-amber); }
.cc-loop-handler:not(.is-selected):not(.is-danger) rect { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-loop-return:not(.is-selected) rect { fill: var(--cc-page); stroke: var(--cc-rule); }
.cc-loop-token { fill: var(--cc-teal); stroke: #fff; stroke-width: 3; }
.cc-loop-token-label { fill: #fff !important; font-size: 10px; font-weight: 800; }
.cc-handler-note { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-handler-note.is-bad { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }

.cc-proof-node rect { stroke-width: 2; }
.cc-proof-state rect { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-proof-mechanism rect { fill: var(--cc-blue-soft); stroke: var(--cc-blue); }
.cc-proof-evidence rect { fill: var(--cc-amber-soft); stroke: var(--cc-amber); }
.cc-proof-missing rect { fill: var(--cc-coral-soft); stroke: var(--cc-coral); stroke-dasharray: 6 4; }
.cc-proof-node .cc-title { font-size: 12px; }
.cc-proof-node .cc-detail { font-size: 10px; }
.cc-proof-strip { fill: var(--cc-teal-soft); stroke: var(--cc-teal); }
.cc-proof-strip.is-bad { fill: var(--cc-coral-soft); stroke: var(--cc-coral); }
.cc-proof-strip-title { fill: var(--cc-ink) !important; font-size: 12px; font-weight: 800; }
.cc-proof-strip-detail { fill: var(--cc-muted) !important; font-size: 10px; }

.cc-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; margin-top: 14px; }
.cc-stat { min-width: 0; padding: 10px 11px; border-top: 3px solid var(--cc-rule); background: var(--cc-page); }
.cc-stat span { display: block; color: var(--cc-muted); font-size: 10px; text-transform: uppercase; }
.cc-stat strong { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.cc-stat.teal { border-top-color: var(--cc-teal); }
.cc-stat.blue { border-top-color: var(--cc-blue); }
.cc-stat.coral { border-top-color: var(--cc-coral); }
.cc-stat.amber { border-top-color: var(--cc-amber); }
.cc-status { margin: 14px 0 0; padding: 11px 13px; border-left: 4px solid var(--cc-teal); background: var(--cc-page); color: var(--cc-ink); }
.cc-status.good { border-left-color: var(--cc-teal); background: var(--cc-teal-soft); }
.cc-status.warn { border-left-color: var(--cc-coral); background: var(--cc-coral-soft); }

@media (max-width: 760px) {
  .cc-workbench { grid-template-columns: 1fr; }
  .cc-readout { min-height: 0; }
}

@media (max-width: 650px) {
  .cc-control-bar { display: grid; align-items: stretch; }
  .cc-choice-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-choice { min-height: 40px; }
  .cc-map { min-width: 760px; }
  .cc-stat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .os-concurrency *,
  .os-concurrency *::before,
  .os-concurrency *::after { transition: none !important; animation: none !important; }
}

/* Give the fine-grained lock rails independent room beside their title. */
.os-concurrency-29 .cc-granularity-panel + .cc-granularity-panel .cc-lock-rail,
.os-concurrency-29 .cc-granularity-panel + .cc-granularity-panel .cc-lock-text { transform: translate(18px, 16px); }

/* Keep late timeline labels inside the Chapter 27 viewBox. */
.os-concurrency-27 .cc-axis-note { transform: translateY(-206px); }
.os-concurrency-27 .cc-life-argument { transform: translateY(-8px); }
.os-concurrency-27 .cc-life-stack { transform: translateY(-18px); }
.os-concurrency-27 .cc-life-handle { transform: translateY(-28px); }
.os-concurrency-27 .cc-life-result { transform: translateY(-38px); }
.os-concurrency-27 .cc-lifetime-ribbon rect { height: 24px; }
.os-concurrency-27 .cc-scene-conclusion { transform: translateY(12px); }

/* Separate the readiness annotation from the closing claim. */
.os-concurrency-33 .cc-callout-teal { transform: translateY(-12px); }
.os-concurrency-33 .cc-scene-conclusion { transform: translateY(-4px); }
.cc-direct-hint { margin: 10px 0; color: var(--cc-muted); font-size: 12px; font-weight: 650; }

/* Restored scene grammar: every SVG primitive has an explicit surface. */
.cc-map rect,
.cc-map circle,
.cc-map line,
.cc-map path { vector-effect: non-scaling-stroke; }

.cc-map rect,
.cc-map circle { fill: #fff; stroke: var(--cc-rule); stroke-width: 1.5; }
.cc-map line { fill: none; stroke: var(--cc-rule); stroke-width: 1.5; }
.cc-map path { fill: none; stroke: var(--cc-rule); stroke-width: 1.5; }
.cc-map text { fill: var(--cc-ink); font-family: inherit; }
.cc-map .cc-small-value { fill: var(--cc-muted); font-size: 10px; font-weight: 650; }
.cc-map .cc-section-label,
.cc-map .cc-panel-kicker,
.cc-map .cc-proof-small-label { fill: var(--cc-muted) !important; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cc-map .cc-panel-title { fill: var(--cc-ink) !important; font-size: 14px; font-weight: 800; }
.cc-map .cc-panel-foot { fill: var(--cc-muted); font-size: 11px; font-weight: 700; }
.cc-map .cc-lane-label { fill: var(--cc-muted) !important; font-size: 11px; font-weight: 800; }
.cc-map .cc-scene-conclusion { fill: var(--cc-ink) !important; font-size: 12px; font-weight: 800; }
.cc-map .cc-callout-teal { fill: var(--cc-teal) !important; font-size: 11px; font-weight: 800; }
.cc-map .cc-callout-blue { fill: var(--cc-blue) !important; font-size: 11px; font-weight: 800; }
.cc-map .cc-callout-coral { fill: var(--cc-coral) !important; font-size: 11px; font-weight: 800; }
.cc-map .cc-conclusion-teal { fill: var(--cc-teal) !important; }
.cc-map .cc-conclusion-coral { fill: var(--cc-coral) !important; }
.cc-map .cc-axis-note { fill: var(--cc-muted) !important; font-size: 10px; }

.cc-map [data-cc-target] { cursor: pointer; outline: 0; }
.cc-map [data-cc-target]:hover > rect,
.cc-map [data-cc-target]:hover > circle,
.cc-map [data-cc-target]:focus-visible > rect,
.cc-map [data-cc-target]:focus-visible > circle,
.cc-map [data-cc-target][aria-pressed="true"] > rect,
.cc-map [data-cc-target][aria-pressed="true"] > circle { stroke: var(--cc-teal); stroke-width: 3; }
.cc-map [data-cc-target]:focus-visible { outline: 3px solid var(--cc-coral); outline-offset: 3px; }

.cc-map .cc-flow { fill: none !important; stroke-width: 2.5 !important; stroke-linecap: round; stroke-linejoin: round; }
.cc-map .cc-flow-teal { stroke: var(--cc-teal) !important; }
.cc-map .cc-flow-blue { stroke: var(--cc-blue) !important; }
.cc-map .cc-flow-coral { stroke: var(--cc-coral) !important; stroke-dasharray: 7 5; }
.cc-map .cc-flow-amber { stroke: var(--cc-amber) !important; stroke-dasharray: 4 4; }
.cc-dashed { stroke-dasharray: 7 5 !important; }
.cc-arrow-head { stroke: none !important; stroke-width: 0 !important; }
.cc-arrow-teal { fill: var(--cc-teal) !important; }
.cc-arrow-blue { fill: var(--cc-blue) !important; }
.cc-arrow-coral { fill: var(--cc-coral) !important; }

/* Chapter 25: shared word, private snapshots, and instruction lanes. */
.cc-counter-object { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 2.5 !important; }
.cc-counter-object.is-corrupt { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-counter-object.is-correct { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; }
.cc-counter-name { fill: var(--cc-muted) !important; font-size: 12px; font-weight: 800; }
.cc-counter-value { fill: var(--cc-ink) !important; font-size: 30px; font-weight: 850; }
.cc-register { fill: #fff !important; stroke-width: 1.5 !important; }
.cc-register-a { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-register-b { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-register text { fill: var(--cc-ink) !important; font-size: 11px; font-weight: 800; }
.cc-lane-rule { stroke: #b8c7c2 !important; stroke-width: 1.5 !important; }
.cc-instruction rect { fill: #fff !important; stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-instruction.cc-op-a rect { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-instruction.cc-op-b rect { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-instruction.is-current rect { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-instruction text { font-size: 11px; font-weight: 800; }
.cc-instruction .cc-small-value { fill: var(--cc-muted) !important; font-size: 9px; }
.cc-critical-span { fill: var(--cc-teal-soft) !important; fill-opacity: .65; stroke: var(--cc-teal) !important; stroke-width: 1.5 !important; pointer-events: none; }
.cc-bracket-coral { fill: none !important; stroke: var(--cc-coral) !important; stroke-width: 2 !important; }

/* Chapter 26: one process map with separate execution packets. */
.cc-address-frame { fill: #fff !important; stroke: var(--cc-ink) !important; stroke-width: 1.5 !important; }
.cc-address-segment rect { stroke-width: 1.5 !important; }
.cc-map-code rect { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-map-heap rect { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; }
.cc-map-free rect { fill: #f7faf8 !important; stroke: var(--cc-rule) !important; stroke-dasharray: 5 4; }
.cc-map-guard rect { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; stroke-dasharray: 5 4; }
.cc-address-segment[aria-pressed="true"] rect { stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-address-segment text { font-size: 11px; font-weight: 800; }
.cc-private-stack { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; stroke-width: 1.5 !important; }
.cc-stack-frame { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 2 !important; }
.cc-register-pack { fill: #fff !important; stroke: var(--cc-blue) !important; stroke-width: 1.5 !important; }
.cc-thread-token { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-thread-token-b { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-thread-id { fill: var(--cc-ink) !important; font-size: 13px; font-weight: 850; }
.cc-shared-resource { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 1.5 !important; }
.cc-private-stack text,
.cc-register-pack text,
.cc-shared-resource text { font-size: 10px; font-weight: 750; }
.cc-thread-column { isolation: isolate; }
.cc-thread-column > text { fill: var(--cc-ink) !important; }

/* Chapter 27: event marks and storage lifetime ribbons. */
.cc-lifetime-axis { stroke: var(--cc-ink) !important; stroke-width: 1.5 !important; }
.cc-time-rule { stroke: #e1e8e5 !important; stroke-dasharray: 3 5; }
.cc-life-event line { stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-life-event circle { stroke-width: 2 !important; }
.cc-life-creator circle { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-life-child circle { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-life-event.is-current circle { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-life-label { fill: var(--cc-ink) !important; font-size: 10px; font-weight: 800; }
.cc-lifetime-ribbon rect { stroke-width: 1.5 !important; }
.cc-life-argument rect { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-life-stack rect { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-life-handle rect { fill: #eef4f2 !important; stroke: var(--cc-blue) !important; }
.cc-life-result rect { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; }
.cc-lifetime-ribbon.is-invalid rect { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; stroke-dasharray: 6 4; }
.cc-lifetime-ribbon text { fill: var(--cc-ink) !important; font-size: 10px; font-weight: 750; }
.cc-now-line { stroke: var(--cc-coral) !important; stroke-width: 2 !important; stroke-dasharray: 5 4; }
.cc-now-label { fill: var(--cc-coral) !important; font-size: 11px; font-weight: 850; }

/* Chapter 28: the broken split and the indivisible hardware boundary. */
.cc-atomic-panel { fill: none !important; stroke: none !important; }
.cc-lock-word { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2.5 !important; }
.cc-lock-word-coral { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-lock-value { fill: var(--cc-ink) !important; font-size: 28px; font-weight: 850; }
.cc-split-event circle { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-split-event-b circle { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-split-event:not(.is-active) { opacity: .42; }
.cc-split-event.is-active circle { stroke-width: 3 !important; }
.cc-atomic-boundary { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-boundary-divider { stroke: var(--cc-teal) !important; stroke-width: 1 !important; }
.cc-boundary-label { fill: var(--cc-teal) !important; font-size: 10px; font-weight: 850; }
.cc-boundary-step { fill: var(--cc-ink) !important; font-size: 10px; font-weight: 750; }
.cc-boundary-value { fill: var(--cc-ink) !important; font-size: 17px; font-weight: 850; }
.cc-result-ledger { fill: #fff !important; stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-ledger-label { fill: var(--cc-muted) !important; font-size: 10px; font-weight: 700; }
.cc-ledger-value { fill: var(--cc-ink) !important; font-size: 11px; font-weight: 850; text-anchor: end; }
.cc-value-coral { fill: var(--cc-coral) !important; }

/* Chapter 29: duration bars and actual lock rails. */
.cc-panel-boundary { fill: #fff !important; stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-granularity-panel.is-active .cc-panel-boundary { stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-lock-rail { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 1.5 !important; }
.cc-lock-rail.is-focused { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 2.5 !important; }
.cc-lock-text { fill: var(--cc-ink) !important; font-size: 10px; font-weight: 800; }
.cc-granularity-operation rect { stroke-width: 1.5 !important; }
.cc-granularity-operation.cc-op-a rect { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-granularity-operation.cc-op-b rect { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-granularity-operation.is-wait rect { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; stroke-dasharray: 5 4; }
.cc-granularity-operation[aria-pressed="true"] rect { stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-granularity-operation text { font-size: 10px; font-weight: 800; }

/* Chapter 30: predicate, mutex, wait set, and lost-wakeup window. */
.cc-cv-event circle { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-cv-event[data-cc-title^="C"] circle { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-cv-event.is-current circle { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-cv-event.is-unsafe circle { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-predicate-object { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; stroke-width: 2 !important; }
.cc-predicate-object.is-corrupt { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-mutex-object { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-wait-set { fill: #fff !important; stroke: var(--cc-amber) !important; stroke-width: 1.5 !important; stroke-dasharray: 5 4; }
.cc-wait-gate { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 1.5 !important; }
.cc-gate-label { fill: var(--cc-teal) !important; font-size: 10px; font-weight: 850; }
.cc-object-value { fill: var(--cc-ink) !important; font-size: 16px; font-weight: 850; }
.cc-mini-event { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; stroke-width: 2 !important; }
.cc-mini-coral { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-mini-event text { fill: var(--cc-coral) !important; font-size: 9px; font-weight: 850; }
.cc-lost-window { fill: none !important; stroke: none !important; }

/* Chapter 31: permit tokens, queue slots, and actor gates. */
.cc-permit circle { stroke-width: 2 !important; }
.cc-permit-empty circle { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-permit-full circle { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-permit[aria-pressed="true"] circle { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-buffer-slot rect { fill: #fff !important; stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-buffer-slot.is-full rect { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; }
.cc-buffer-slot text { font-size: 11px; font-weight: 800; }
.cc-buffer-slot + .cc-buffer-slot text { transform: translateY(72px); }
.cc-actor circle { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 2.5 !important; }
.cc-actor.is-blocked circle { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-actor text { font-size: 12px; font-weight: 850; }

/* Chapter 32: three distinct relation geometries. */
.cc-section-divider { stroke: var(--cc-rule) !important; stroke-width: 1 !important; }
.cc-relation-scene { opacity: .48; }
.cc-relation-scene.is-active { opacity: 1; }
.cc-interval-a { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; }
.cc-interval-b { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-interval { stroke-width: 2 !important; }
.cc-overlap-band { fill: var(--cc-coral-soft) !important; fill-opacity: .65; stroke: var(--cc-coral) !important; stroke-width: 2 !important; stroke-dasharray: 5 4; }
.cc-order-event { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-order-flag { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; stroke-width: 2 !important; }
.cc-resource-thread { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-resource-lock { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; stroke-width: 2 !important; }

/* Chapter 33: loop token, readiness packets, and blocking wedge. */
.cc-loop-ring { fill: none !important; stroke: var(--cc-rule) !important; stroke-width: 2 !important; }
.cc-map .cc-loop-arrow { fill: none !important; stroke: var(--cc-teal) !important; stroke-width: 2.5 !important; }
.cc-loop-node circle { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-loop-node.is-current circle { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 3 !important; }
.cc-loop-node.is-current > text { visibility: hidden; }
.cc-loop-node.is-blocked circle { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-loop-node text { font-size: 9px; font-weight: 850; }
.cc-loop-token { fill: var(--cc-teal) !important; stroke: #fff !important; stroke-width: 3 !important; }
.cc-loop-token-label { fill: #fff !important; font-size: 10px; font-weight: 850; }
.cc-ready-set { fill: #fff !important; stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-fd-packet rect { fill: #f7faf8 !important; stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-fd-packet.is-ready rect { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 2 !important; }
.cc-fd-packet.is-queued rect { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; stroke-width: 2 !important; }
.cc-fd-packet text { font-size: 11px; font-weight: 800; }
.cc-handler-region { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 2 !important; }
.cc-handler-region.is-blocking { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }

/* Chapter 34: proof chain from concrete state to falsifiable trace. */
.cc-proof-column { fill: #fff !important; stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-proof-invariant { fill: var(--cc-ink) !important; font-size: 12px; font-weight: 850; }
.cc-proof-thread { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-proof-thread-b { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; }
.cc-proof-lock { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-proof-permit { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; stroke-width: 2 !important; }
.cc-proof-queue-slot { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 1.5 !important; }
.cc-proof-queue-slot.is-over { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-proof-ring { fill: none !important; stroke: var(--cc-rule) !important; stroke-width: 2 !important; }
.cc-proof-fd { fill: var(--cc-teal-soft) !important; stroke: var(--cc-teal) !important; stroke-width: 2 !important; }
.cc-proof-loop-token { fill: var(--cc-teal) !important; stroke: #fff !important; stroke-width: 2 !important; }
.cc-proof-mechanism { fill: var(--cc-blue-soft) !important; stroke: var(--cc-blue) !important; stroke-width: 2 !important; }
.cc-proof-small-label { fill: var(--cc-muted) !important; font-size: 10px; font-weight: 800; }
.cc-proof-note { fill: var(--cc-ink) !important; font-size: 10px; font-weight: 750; }
.cc-evidence-axis { stroke: var(--cc-rule) !important; stroke-width: 1.5 !important; }
.cc-evidence-mark { fill: var(--cc-amber-soft) !important; stroke: var(--cc-amber) !important; stroke-width: 2 !important; }
.cc-evidence-mark.is-bad { fill: var(--cc-coral-soft) !important; stroke: var(--cc-coral) !important; }
.cc-proof-limit { stroke: var(--cc-coral) !important; stroke-width: 1.5 !important; stroke-dasharray: 5 4; }
.cc-proof-trace { fill: none; stroke: var(--cc-teal); stroke-width: 3; }
.cc-proof-trace.is-bad { stroke: var(--cc-coral); }
.cc-proof-wait { fill: none; stroke: var(--cc-amber); stroke-width: 3; stroke-dasharray: 5 4; }

@media (max-width: 650px) {
  .cc-map { min-width: 760px; }
  .cc-readout h5 { font-size: 16px; }
  .cc-readout dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .os-concurrency *,
  .os-concurrency *::before,
  .os-concurrency *::after { transition: none !important; animation: none !important; }
}