@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/InterVariable.woff2") format("woff2");
}

:root {
  --page: #f6f7f5;
  --paper: #fff;
  --ink: #171b1a;
  --muted: #5d6663;
  --soft: #e8ece9;
  --rule: #d7ddda;
  --teal: #0b6b61;
  --teal-soft: #e7f2ef;
  --coral: #b9503b;
  --coral-soft: #faece8;
  --blue: #355f9d;
  --blue-soft: #e9eff8;
  --amber-soft: #faf0d8;
  --shadow: 0 12px 34px rgba(28, 39, 35, 0.08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.72;
}
button, input, select, textarea { color: inherit; font: inherit; letter-spacing: 0; }
button, select, input, textarea { border-radius: 5px; }
button { cursor: pointer; }

/* Direct marks already perform these selections; duplicate button rows add no capability. */
.semantic-memory-ch13 .sm-controls > div:first-child,
.semantic-memory-ch16 > [data-semantic-view] > .sm-controls:first-child,
.semantic-memory-ch20 > [data-semantic-view] > .sm-controls:first-child,
.semantic-memory-ch23 .sm-controls > div:first-child,
[data-diagram="semantic-31"] .cc-control-bar,
[data-diagram="semantic-37"] .storage-controls + .storage-controls,
[data-diagram="semantic-41"] .storage-controls + .storage-controls { display: none; }
a { color: var(--teal); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(11, 107, 97, 0.35); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto minmax(230px, 360px);
  align-items: center;
  min-height: 62px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(12px);
}
.brand {
  width: max-content;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 26px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.progress-wrap progress { width: 112px; height: 6px; overflow: hidden; border: 0; border-radius: 3px; background: var(--soft); }
.progress-wrap progress::-webkit-progress-bar { background: var(--soft); }
.progress-wrap progress::-webkit-progress-value { background: var(--teal); }
.ask-ai-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  margin-right: 14px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
.ask-ai-toggle:hover { border-color: var(--teal); color: var(--teal); }
.ask-ai-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 11px;
  background: var(--page);
  border: 1px solid var(--rule);
}
.search svg { flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search input { min-width: 0; width: 100%; padding: 0; background: transparent; border: 0; outline: 0; font-size: 14px; }

.shell { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: calc(100vh - 62px); }
.rail {
  position: sticky;
  top: 62px;
  align-self: start;
  height: calc(100vh - 62px);
  overflow: auto;
  padding: 24px 14px;
  background: #eef1ef;
}
.rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 7px 12px 10px; }
.rail-heading > span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.rail-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: #fff; border: 1px solid var(--rule); color: var(--ink); font-size: 23px; line-height: 1; }
.rail-toggle:hover, .rail-toggle:focus-visible { border-color: var(--teal); color: var(--teal); }
.shell.rail-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.shell.rail-collapsed .rail { padding-inline: 8px; overflow: hidden; }
.shell.rail-collapsed .rail-heading { justify-content: center; margin-inline: 0; }
.shell.rail-collapsed .rail-heading > span,
.shell.rail-collapsed #week-nav,
.shell.rail-collapsed .rail-sources { display: none; }
.shell.rail-collapsed .rail-toggle span { display: inline-block; transform: rotate(180deg); }
.shell.rail-collapsed .interactive-diagram { width: min(1080px, calc(100vw - 160px)); }
#week-nav { display: grid; gap: 2px; }
.week-link {
  display: grid;
  gap: 1px;
  padding: 9px 10px;
  color: var(--muted);
  border-left: 3px solid transparent;
  text-decoration: none;
}
.week-link strong { color: var(--ink); font-size: 14px; }
.week-link span { overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.week-link:hover { background: rgba(255, 255, 255, 0.65); }
.week-link[aria-current] { background: #fff; border-left-color: var(--teal); color: var(--teal); }
.rail-sources { display: grid; gap: 6px; margin: 24px 10px 0; font-size: 12px; }
.rail-mobile-tools { display: none; }

#content { min-width: 0; padding: 52px clamp(28px, 5vw, 76px) 110px; }
.intro, .week-heading, .week-lesson, .chapter, .week-checkpoint, .finish, .search-status { max-width: 770px; }
.intro { margin-bottom: 64px; }
.course-line, .section-label, .chapter-number, .interactive-heading > span, .practice header > span, .worked-example > span {
  margin: 0 0 10px;
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}
.intro h1 {
  max-width: 720px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 41px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
}
.lede { max-width: 710px; margin: 18px 0 0; color: #313735; font-size: 18px; line-height: 1.62; }
.learning-contract { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.study-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; border-top: 1px solid var(--rule); }
.study-loop > div { padding: 16px 16px 0 0; border-bottom: 1px solid var(--rule); }
.study-loop span { display: block; margin-bottom: 10px; color: var(--coral); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; }
.study-loop strong { display: block; font-size: 15px; }
.study-loop p { margin: 5px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.search-status { margin: 0 0 32px; padding: 11px 14px; background: var(--amber-soft); color: #5d430c; font-size: 14px; }

.week { min-width: 0; }
.week-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.week-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
}
.week-range { flex: 0 0 auto; margin: 0 0 5px; color: var(--muted); font-size: 14px; }
.week-lesson { margin: 28px 0 72px; }
.week-lesson h3 { margin: 14px 0 10px; font-size: 24px; line-height: 1.3; }
.week-lesson > p { margin: 0 0 12px; }
.week-objective { color: var(--teal); font-weight: 650; }
.week-marker { color: var(--muted); font-size: 14px; }
.week-depth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.week-depth > div { padding-right: 18px; border-right: 1px solid var(--rule); }
.week-depth > div:last-child { border-right: 0; }
.week-depth span { color: var(--coral); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; }

.week-depth p { margin: 7px 0 0; color: #3e4643; font-size: 14px; line-height: 1.55; }

.chapter { margin: 0 0 122px; }
.chapter-header { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 24px; }
.chapter-header > div { min-width: 0; }
.chapter-header h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.chapter-completion { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-top: 2px; color: var(--muted); font-size: 12px; cursor: pointer; }
.chapter-completion input { width: 17px; height: 17px; accent-color: var(--teal); }
.chapter-takeaway { margin: 24px 0 8px; color: #303735; font-size: 21px; font-weight: 540; line-height: 1.55; }
.chapter-question { margin: 0 0 46px; color: var(--muted); font-size: 15px; }
.chapter-question span { margin-right: 9px; color: var(--coral); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.chapter-section { margin: 0 0 42px; }
.chapter-section h4 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
.chapter-section p, .chapter-body p { margin: 0 0 17px; }
.plain-explanation {
  margin-top: -2px !important;
  padding-left: 18px;
  border-left: 2px solid var(--teal);
  color: var(--ink-soft);
}
.depth-section { margin-top: 58px; padding-top: 25px; border-top: 1px solid var(--rule); }
.depth-subsection + .depth-subsection { margin-top: 34px; }
.depth-subsection h4 { font-size: 20px; }
.worked-example { margin: 44px 0 54px; padding-left: 21px; border-left: 3px solid var(--coral); }
.worked-example p { margin: 0; color: #333a38; }
.external-context { margin: 52px 0; padding: 25px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.external-context h4 { margin: 5px 0 14px; font-size: 23px; line-height: 1.3; }
.external-context > p:not(.section-label):not(.external-links) { margin: 0 0 15px; }
.external-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 19px 0 0; font-size: 13px; }
.chapter-bridge { margin: 34px 0 28px; color: var(--muted); font-size: 14px; }
.depth-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 52px 0 28px; padding: 25px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.depth-review h4 { margin: 0 0 12px; font-size: 20px; }
.depth-review ul, .depth-review ol { margin: 0; padding-left: 21px; }
.depth-review li { margin: 0 0 10px; color: #3f4744; font-size: 14px; line-height: 1.5; }

.chapter-flashcards { margin: 42px 0 56px; padding: 24px 0; border-block: 1px solid var(--rule); }
.chapter-flashcards header { margin-bottom: 14px; }
.chapter-flashcards h4 { margin: 2px 0 0; font-size: 22px; }
.flashcard { display: grid; width: 100%; min-height: 210px; padding: 28px clamp(24px, 6vw, 72px); place-content: center; gap: 14px; text-align: center; background: #fff; border: 1px solid #aebbb6; box-shadow: 0 8px 24px rgba(25, 40, 34, .07); }
.flashcard:hover, .flashcard:focus-visible { border-color: var(--teal); box-shadow: 0 10px 28px rgba(8, 100, 88, .12); }
.flashcard > span:first-child { color: var(--coral); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.flashcard strong, .flashcard [data-flashcard-answer] { max-width: 780px; color: var(--ink); font-size: 21px; line-height: 1.45; }
.flashcard small { color: var(--muted); font-size: 12px; }
.flashcard-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 13px; }
.flashcard-nav button { width: 38px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--rule); font-size: 18px; }
.flashcard-nav span { min-width: 68px; color: var(--muted); font: 650 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }

.coverage-map { margin: 34px 0 38px; padding: 15px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--muted); }
.coverage-map summary { width: max-content; max-width: 100%; color: var(--teal); cursor: pointer; font-size: 14px; font-weight: 700; }
.coverage-intro { max-width: 700px; margin: 15px 0; font-size: 13px; line-height: 1.55; }
.coverage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.coverage-table th, .coverage-table td { padding: 10px 8px; border-top: 1px solid var(--soft); vertical-align: top; text-align: left; }
.coverage-table th { width: 34%; color: var(--ink); font-weight: 650; }
.coverage-table td strong, .coverage-table td span { display: block; }
.coverage-table td strong { color: var(--coral); font-size: 11px; text-transform: uppercase; }
.coverage-table td span { margin-top: 3px; line-height: 1.5; }

.chapter-reference { margin-top: 24px; color: var(--muted); font-size: 14px; }
.chapter-reference summary, .diagram-provenance summary { width: max-content; max-width: 100%; color: var(--teal); cursor: pointer; font-weight: 650; }
.reference-content { display: grid; gap: 32px; margin-top: 24px; padding: 24px 0; }
.reference-content section + section { padding-top: 24px; border-top: 1px solid var(--rule); }
.reference-content h4 { margin: 0 0 10px; color: var(--ink); font-size: 16px; }
.reference-content p { margin: 0 0 12px; }
.terms { margin: 0; }
.term { display: grid; grid-template-columns: minmax(130px, 0.35fr) 1fr; gap: 18px; padding: 8px 0; }
.term dt { color: var(--ink); font-weight: 700; }
.term dd { margin: 0; }
.source-actions, .further-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.source-actions button, .source-actions a, .further-links a { font-size: 13px; }
.source-actions button { padding: 0; background: transparent; border: 0; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.practice {
  margin: 58px 0 42px;
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 7px;
  box-shadow: var(--shadow);
}
.practice[data-practice="code"] { width: min(1080px, calc(100vw - 350px)); }
.practice header { margin-bottom: 12px; }
.practice header h4 { margin: 0; font-size: 22px; line-height: 1.3; }
.practice > p { margin: 0 0 20px; }
.practice fieldset { display: grid; gap: 9px; margin: 0 0 20px; padding: 0; border: 0; }
.practice fieldset label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--page); cursor: pointer; }
.practice fieldset input { flex: 0 0 auto; margin-top: 5px; accent-color: var(--teal); }
.practice textarea { width: 100%; min-height: 130px; margin: 0 0 16px; padding: 13px; resize: vertical; background: #fbfcfb; border: 1px solid #bac4c0; line-height: 1.55; }
.practice .code-editor { tab-size: 2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.checker-scope { color: var(--muted); font-size: 12px; }
.code-walkthrough { margin: 28px 0 30px; padding: 26px 0; border-block: 1px solid var(--rule); }
.code-walkthrough figcaption { max-width: 760px; margin-bottom: 20px; }
.code-walkthrough figcaption > span { color: var(--coral); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.code-walkthrough figcaption h5 { margin: 7px 0 8px; font-size: 22px; line-height: 1.3; }
.code-walkthrough figcaption p { margin: 0; color: var(--muted); font-size: 14px; }
.code-trace-layout { display: grid; grid-template-columns: minmax(310px, .82fr) minmax(430px, 1.18fr); gap: 24px; align-items: stretch; }
.code-trace-source { min-height: 360px; margin: 0; padding: 18px 0; overflow: auto; background: #17211f; color: #dce8e4; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.code-trace-source code { display: block; }
.code-trace-source [data-code-line] { display: block; min-height: 23px; padding: 0 18px 0 0; white-space: pre; border-left: 3px solid transparent; }
.code-trace-source [data-code-line] b { display: inline-block; width: 38px; margin-right: 12px; color: #768c85; text-align: right; font-weight: 400; user-select: none; }
.code-trace-source [data-active] { background: #28443e; border-left-color: #73c0ad; color: #fff; }
.code-trace-source [data-active] b { color: #9ed6c8; }
.code-trace-model { min-width: 0; }
.code-trace-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); border-block: 1px solid var(--rule); }
.code-trace-steps button { min-height: 58px; padding: 8px 7px; background: transparent; border: 0; border-right: 1px solid var(--rule); color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.25; }
.code-trace-steps button:last-child { border-right: 0; }
.code-trace-steps button span { display: block; margin-bottom: 3px; color: var(--coral); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-trace-steps button[aria-pressed="true"] { background: var(--teal-soft); color: var(--ink); box-shadow: inset 0 -3px var(--teal); }
.code-trace-panel { min-height: 300px; padding-top: 18px; }
.code-trace-panel[hidden] { display: none; }
.code-trace-actor { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.code-trace-actor span, .code-scene-value span, .code-condition-predicate span, .code-event-ready span, .code-event-handler span { color: var(--muted); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.code-trace-panel > p { margin: 16px 0 0; font-size: 14px; line-height: 1.6; }
.code-scene { min-height: 190px; padding: 20px; background: #f6f8f7; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.code-scene-value { min-width: 0; }
.code-scene-value strong { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.code-scene-branch { display: grid; grid-template-columns: 1fr 130px 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 12px; }
.code-scene-branch .code-scene-value { padding: 18px; border: 1px solid var(--rule); }
.code-branch-junction { display: grid; place-items: center; color: var(--coral); text-align: center; font-size: 11px; }
.code-branch-junction i { width: 100%; margin-top: 10px; border-top: 2px solid var(--coral); }
.code-scene-branch > p { grid-column: 1 / -1; margin: 0; color: var(--teal); text-align: center; font-weight: 700; }
.code-scene-ownership { display: grid; grid-template-columns: 1fr 120px 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 14px; }
.code-ownership-arrow { color: var(--coral); text-align: center; font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-heap { padding: 24px 18px; background: var(--blue-soft); border: 1px dashed #5d7ca7; }
.code-owner { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--rule); }
.code-scene-threads { display: grid; grid-template-columns: 1fr 120px 1fr; grid-template-rows: 1fr auto; align-items: stretch; gap: 12px; }
.code-thread-lane { display: grid; align-content: center; gap: 8px; padding: 18px; border-left: 4px solid var(--teal); background: #fff; }
.code-thread-lane span { color: var(--muted); font-size: 11px; }
.code-thread-relation { display: grid; place-items: center; color: var(--coral); font-size: 11px; text-align: center; }
.code-handle { grid-column: 1 / -1; padding: 10px 14px; background: var(--page); }
.code-scene-lock { display: grid; grid-template-columns: 1fr 120px 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 14px; }
.code-lock-gate { padding: 18px 10px; background: var(--amber-soft); border-inline: 5px double var(--amber); text-align: center; }
.code-lock-gate span, .code-lock-gate strong { display: block; }
.code-lock-gate span { margin-bottom: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.code-scene-lock > p { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--teal); font-weight: 700; }
.code-scene-list { display: grid; align-content: center; gap: 20px; }
.code-list-lock { justify-self: end; padding: 7px 10px; background: var(--amber-soft); font-size: 12px; }
.code-list-chain { display: flex; align-items: center; gap: 9px; min-height: 62px; }
.code-list-chain span { display: grid; place-items: center; min-width: 52px; min-height: 52px; border: 2px solid var(--teal); background: #fff; font-weight: 700; }
.code-list-chain i { color: var(--coral); font-style: normal; }
.code-list-facts, .code-permits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.code-list-facts > div, .code-permits > div { padding: 10px 12px; background: var(--page); }
.code-scene-condition { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; }
.code-scene-condition > * { padding: 12px; background: #fff; border-left: 3px solid var(--rule); }
.code-condition-predicate { border-left-color: var(--coral); }
.code-condition-predicate strong { display: block; margin-top: 7px; }
.code-scene-semaphore { display: grid; grid-template-columns: .75fr 1.25fr; grid-template-rows: 1fr auto; align-items: center; gap: 16px; }
.code-buffer-slots { display: flex; gap: 9px; justify-content: center; font: 700 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-buffer-slots span { padding: 20px 8px; background: #fff; border-bottom: 4px solid var(--teal); }
.code-mutex-state { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--rule); text-align: center; }
.code-scene-event { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.code-event-sources { display: flex; gap: 8px; grid-column: 1 / -1; }
.code-event-sources span { flex: 1; padding: 13px 8px; background: #fff; border-top: 3px solid var(--teal); text-align: center; font-size: 11px; }
.code-event-ready, .code-event-handler { padding: 14px; background: var(--blue-soft); }
.code-event-ready strong, .code-event-handler strong { display: block; margin-top: 7px; }
.code-scene-event > p { grid-column: 1 / -1; margin: 0; color: var(--teal); text-align: center; font-weight: 700; }
.code-scene-descriptor, .code-scene-dedupe { display: grid; grid-template-columns: repeat(7, auto); align-items: center; gap: 8px; }
.code-scene-descriptor .code-scene-value, .code-scene-dedupe .code-scene-value { min-height: 100px; padding: 12px 10px; background: #fff; border-top: 3px solid var(--teal); }
.code-scene-descriptor > i, .code-scene-dedupe > i { color: var(--coral); font-style: normal; }
.code-trace-boundary { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.code-walkthrough .diagram-provenance { margin-top: 12px; }
.code-walkthrough .diagram-provenance a { display: inline-block; margin-top: 8px; }

@media (max-width: 1100px) {
  .code-trace-layout { grid-template-columns: 1fr; }
  .code-trace-source { min-height: 0; max-height: 360px; }
}
.practice > button, .race-stepper button { min-height: 40px; padding: 8px 14px; background: var(--teal); border: 1px solid var(--teal); color: #fff; font-weight: 650; }
.practice > button:hover, .race-stepper button:hover { background: #07574f; }
.number-answer { display: flex; align-items: center; gap: 9px; width: max-content; max-width: 100%; margin-bottom: 20px; }
.number-answer input { width: 130px; padding: 9px 10px; border: 1px solid #bac4c0; }
.order-list { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: trace; }
.order-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 7px 8px 7px 14px; background: var(--page); counter-increment: trace; }
.order-list li > span:first-child::before { content: counter(trace) ". "; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.order-controls { display: flex; gap: 4px; }
.order-controls button { width: 34px; height: 34px; padding: 0; background: #fff; border: 1px solid var(--rule); color: var(--ink); font-weight: 700; }
.practice-result { margin-top: 18px; padding: 12px 14px; font-size: 14px; }
.practice-result.is-correct { background: var(--teal-soft); color: #164f49; }
.practice-result.is-error { background: var(--coral-soft); color: #743426; }
.practice-result.is-neutral { background: var(--blue-soft); color: #2a4975; }

.interactive-diagram {
  width: min(1080px, calc(100vw - 350px));
  margin: 62px 0 58px;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 7px;
  box-shadow: var(--shadow);
}
.interactive-heading { max-width: 760px; }
.diagram-question { margin: 0 0 5px; color: var(--muted); font-size: 14px; }
.interactive-heading h4 { margin: 0; font-size: 27px; line-height: 1.25; }
.diagram-instruction { margin: 10px 0 26px; color: var(--muted); font-size: 13px; }
.component-detail { display: block; min-height: 46px; margin-top: 18px; padding: 11px 13px; background: var(--blue-soft); color: #29466f; font-size: 14px; line-height: 1.55; }
[data-inspectable] { cursor: default; }
[data-inspectable][role="button"], button[data-inspectable] { cursor: pointer; }
[data-inspectable]:hover, [data-inspectable]:focus-visible { outline: 2px solid rgba(53, 95, 157, 0.45); outline-offset: 2px; }
.diagram-provenance { margin-top: 15px; color: var(--muted); font-size: 12px; }
.diagram-provenance p { margin: 10px 0 0; }
.process-trace { min-width: 850px; margin-top: 22px; overflow: hidden; border: 1px solid var(--rule); }
.process-trace-row { display: grid; grid-template-columns: 110px repeat(10, minmax(70px, 1fr)); }
.process-trace-row > * { min-width: 0; padding: 10px 6px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
.process-trace-row > :last-child { border-right: 0; }
.process-trace-row:last-child > * { border-bottom: 0; }
.process-trace-row > strong { display: grid; place-items: center; background: var(--page); font-size: 12px; }
.process-trace-row button { background: #fff; border: 0; color: var(--ink); font-size: 11px; line-height: 1.25; cursor: pointer; }
.process-trace-row button.is-current { background: var(--teal-soft); box-shadow: inset 0 -3px var(--teal); font-weight: 700; }
.process-trace-head span { background: var(--page); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.trace-readout { display: grid; grid-template-columns: minmax(150px, .32fr) 1fr; gap: 18px; margin-top: 14px; padding: 15px; background: var(--blue-soft); }
.trace-readout div { display: grid; gap: 3px; }
.trace-readout span, .pipe-model span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.trace-readout p { margin: 0; line-height: 1.55; }
.pipe-model { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: 22px; }
.pipe-model section, .pipe-kernel { position: relative; display: grid; align-content: start; gap: 8px; min-height: 126px; padding: 16px; background: #fff; border: 1px solid var(--rule); }
.pipe-model strong { overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.pipe-kernel { background: var(--teal-soft); border-color: #79aaa4; }
.pipe-kernel i { height: 12px; margin-top: auto; background: repeating-linear-gradient(90deg, var(--teal) 0 16px, transparent 16px 22px); opacity: .75; }
.pipe-event { min-height: 70px; margin: 14px 0 0; padding: 14px 16px; background: var(--page); line-height: 1.55; }
.process-theater { position: relative; display: grid; gap: 10px; min-height: 440px; padding: 54px 24px 98px; overflow: hidden; background: #f7f9f7; border: 1px solid var(--rule); }
.process-time-rail { position: absolute; inset: 12px 20px auto; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.process-time-rail span { display: grid; gap: 1px; padding: 4px; color: var(--muted); font: 700 10px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; border-bottom: 2px solid #ccd4d0; }
.process-time-rail small { overflow: hidden; font: 500 8px/1.1 inherit; text-overflow: ellipsis; white-space: nowrap; }
.process-time-rail .is-current { color: var(--teal); border-color: var(--teal); background: var(--teal-soft); }
.process-lane { display: grid; grid-template-columns: 190px 1fr; min-height: 78px; border-top: 1px solid #bdc8c3; }
.process-lane header { display: grid; align-content: center; gap: 3px; padding: 12px; font-weight: 750; }
.process-lane header strong { color: var(--muted); font-size: 10px; font-weight: 600; }
.process-slot { position: relative; background-image: linear-gradient(90deg, transparent 9.8%, rgba(90,110,103,.09) 10%, transparent 10.2%); background-size: 10% 100%; }
.process-token { position: absolute; z-index: 2; display: grid; width: 52px; height: 36px; place-items: center; border: 2px solid currentColor; border-radius: 2px; font: 800 12px ui-monospace, SFMono-Regular, Menlo, monospace; transition: top .28s ease, left .28s ease; }
.process-token-p0 { left: 37%; color: var(--teal); background: var(--teal-soft); }
.process-token-p1 { left: 57%; color: #345d98; background: var(--blue-soft); }
.process-token[data-zone="cpu"] { top: 94px; }
.process-token[data-zone="ready"] { top: 182px; }
.process-token[data-zone="io"] { top: 270px; }
.process-token[data-zone="exit"] { top: 350px; opacity: .55; }
.io-request-token { position: absolute; top: 309px; right: 42px; padding: 5px 8px; color: #744c14; background: #f7e7c7; border: 1px solid #c79b53; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.io-request-token[data-complete="true"] { color: #164f49; background: var(--teal-soft); border-color: var(--teal); }
.process-theater-conclusion, .pipe-theater-conclusion { position: absolute; right: 20px; bottom: 12px; max-width: 720px; color: var(--ink); font-size: 12px; font-weight: 750; }
.pipe-goal { position: relative; display: grid; grid-template-columns: 1.3fr auto .75fr auto 1fr auto .75fr auto .7fr; gap: 9px; align-items: center; margin: 18px 0 10px; padding: 32px 16px 14px; background: var(--teal-soft); border: 2px solid var(--teal); }
.pipe-goal-label { position: absolute; align-self: start; margin-top: -22px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pipe-goal strong, .pipe-goal b { display: grid; min-height: 48px; place-items: center; padding: 8px; background: #fff; border: 1px solid #79aaa4; font: 750 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.pipe-goal b { color: #164f49; }
.pipe-goal small { color: var(--muted); font-size: 10px; }
.pipe-goal i { color: var(--teal); font-size: 20px; font-style: normal; font-weight: 800; }
.pipe-goal[data-pipe-goal="target"] { border-style: dashed; }
.pipe-goal[data-pipe-goal="target"] > :not(.pipe-goal-label) { opacity: .68; }
.pipe-theater { position: relative; display: grid; grid-template-columns: 1fr .9fr 1fr; grid-template-areas: "shell shell shell" "writer pipe reader"; gap: 14px 28px; min-height: 390px; padding: 20px 24px 62px; overflow: hidden; background: #f7f9f7; border: 1px solid var(--rule); }
.pipe-shell { grid-area: shell; display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 11px 13px; background: var(--blue-soft); border-top: 3px solid #4d6079; }
.pipe-shell header { font-size: 13px; font-weight: 750; }
.pipe-shell > strong { color: var(--muted); font-size: 11px; font-weight: 600; }
.pipe-shell > div { display: flex; gap: 5px; }
.fd-table { position: relative; z-index: 2; min-width: 0; padding: 12px; background: #fff; border-top: 3px solid #4d6079; }
.fd-table header { display: grid; gap: 3px; margin-bottom: 9px; font-size: 13px; }
.fd-table header strong { color: var(--muted); font-size: 10px; font-weight: 550; }
.fd-writer { grid-area: writer; }.fd-reader { grid-area: reader; }
.fd-row { display: grid; grid-template-columns: 30px 1fr; margin-top: 3px; border: 1px solid var(--rule); font: 11px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; }
.fd-row b { padding: 6px; color: #fff; background: #4d6079; text-align: center; }
.fd-row i { padding: 6px; font-style: normal; }
.fd-row.is-focus { border-color: var(--teal); box-shadow: inset 3px 0 var(--teal); }
.fd-row.is-focus b { background: var(--teal); }
.fd-empty { display: block; padding: 12px; color: var(--muted); background: var(--page); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.pipe-object { grid-area: pipe; position: relative; z-index: 2; align-self: center; padding: 15px; background: var(--teal-soft); border: 2px solid var(--teal); }
.pipe-object[data-exists="false"] { border-style: dashed; filter: grayscale(1); opacity: .48; }
.pipe-object header { display: grid; gap: 4px; font-size: 14px; }
.pipe-object header strong { font-size: 10px; font-weight: 600; }
.pipe-buffer { display: flex; min-height: 70px; align-items: center; gap: 4px; padding: 8px; background: #fff; border: 1px solid #79aaa4; }
.pipe-buffer span { flex: 1; padding: 8px 4px; background: #d5ece6; font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.pipe-buffer[data-empty="true"]::after { margin: auto; color: var(--muted); content: "empty"; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (prefers-reduced-motion: reduce) { .process-token { transition: none; } }
@media (max-width: 900px) {
  .process-trace { width: max-content; max-width: none; }
  .interactive-diagram:has(.process-trace) { overflow-x: auto; }
  .pipe-model { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .trace-readout, .pipe-model { grid-template-columns: 1fr; }
  .stage-menu { align-items: stretch; flex-direction: column; }
  .stage-menu > div { justify-content: space-between; }
}
.architecture-routes { margin-bottom: 17px; }
.architecture-route-view { margin: 0 0 18px; padding: 14px; background: var(--page); border: 1px solid var(--rule); }
.architecture-route-view > header { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.architecture-route-view > header div { display: grid; gap: 3px; }
.architecture-route-view > header span { color: var(--teal); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.architecture-route-view > header strong { font-size: 15px; }
.architecture-route-view > header p { max-width: 610px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.architecture-route-sequence { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding: 2px 1px 5px; }
.architecture-step { position: relative; display: grid; flex: 0 0 132px; align-content: center; min-height: 82px; padding: 12px 10px 10px 38px; background: #fff; border: 1px solid #b9c3bf; color: var(--ink); text-align: left; }
.architecture-step:hover, .architecture-step:focus-visible { border-color: var(--teal); outline: 2px solid rgba(23, 112, 101, .2); outline-offset: 1px; }
.architecture-step-number { position: absolute; top: 10px; left: 10px; display: grid; width: 20px; height: 20px; place-items: center; background: var(--teal); color: #fff; font-size: 10px; font-weight: 750; }
.architecture-step strong { font-size: 12px; line-height: 1.3; }
.architecture-step small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.architecture-flow-arrow { align-self: center; flex: 0 0 auto; color: var(--teal); font-size: 18px; font-weight: 700; }
.architecture-map { border-top: 1px solid var(--rule); }
.architecture-layer { display: grid; grid-template-columns: minmax(120px, 0.24fr) 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.architecture-layer > header { align-self: start; padding-top: 4px; }
.architecture-layer h5 { margin: 0 0 3px; font-size: 13px; }
.architecture-layer header span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.architecture-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 7px; }
.architecture-node { position: relative; display: grid; align-content: center; min-height: 76px; padding: 10px 10px 10px 38px; background: #f2f4f3; border: 1px solid transparent; border-radius: 3px; color: #68706d; text-align: left; opacity: 0.52; }
.architecture-node strong { font-size: 13px; line-height: 1.3; }
.architecture-node span { margin-top: 3px; font-size: 11px; line-height: 1.35; }
.architecture-node[data-route-active] { background: var(--teal-soft); border-color: #8ebbb2; color: #164f49; opacity: 1; }
.architecture-node[data-route-step]::before { position: absolute; top: 10px; left: 10px; display: grid; width: 20px; height: 20px; place-items: center; background: var(--teal); color: #fff; content: attr(data-route-step); font-size: 10px; font-weight: 750; }
.architecture-route-summary { padding-bottom: 8px; border-width: 0 0 1px; }
.legacy-mechanism { position: relative; min-height: 430px; overflow: hidden; background: #f7f9f7; border: 1px solid var(--rule); }
.architecture-mark { position: relative; z-index: 2; display: grid; gap: 3px; min-width: 0; padding: 9px 10px; color: #737d79; background: #eef1ef; border: 1px solid #c8d0cc; border-radius: 2px; text-align: left; opacity: .45; }
.architecture-mark strong { font-size: 11px; line-height: 1.2; }.architecture-mark small { font-size: 9px; line-height: 1.25; }
.architecture-mark[data-route-active] { color: #164f49; background: var(--teal-soft); border-color: var(--teal); opacity: 1; box-shadow: inset 0 -3px var(--teal); }
.architecture-mark[data-route-step]::before { position: absolute; top: -7px; left: -7px; display: grid; width: 19px; height: 19px; place-items: center; color: #fff; background: var(--teal); border-radius: 50%; content: attr(data-route-step); font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.scene-conclusion { position: absolute; right: 18px; bottom: 12px; left: 18px; margin: 0; padding-top: 8px; border-top: 1px solid #b9c4bf; color: var(--ink); font-size: 12px; font-weight: 750; }
.control-crossing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 24px 24px 60px; }
.control-lane { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 42px 12px 14px; border: 1px solid #c5ceca; }
.control-lane > header { position: absolute; inset: 0 0 auto; padding: 9px 12px; color: var(--muted); background: #e8ece9; font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.control-lane-gate { background: #f8eed8; border-color: #c8a461; }
.control-registers { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 8px; background: #fff; border-left: 3px solid #4d6079; font: 10px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; }
.control-registers b { grid-row: 1 / 3; align-self: center; color: var(--ink); }.control-registers span { color: var(--muted); }
.control-baton { margin-top: auto; padding: 8px; color: #744c14; background: #fff7e8; border: 2px solid #b27b25; font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.vm-route { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 28px 26px 62px; }
.vm-address-token { align-self: start; display: grid; gap: 4px; padding: 13px; color: #fff; background: #345d98; }
.vm-address-token span { font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.vm-translation-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; align-items: center; }
.vm-translation-rail::before { position: absolute; right: 5%; left: 5%; height: 3px; background: var(--teal); content: ""; }
.vm-translation-rail i { position: absolute; right: 8%; bottom: 4px; color: #345d98; font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.vm-repair-branch { position: relative; grid-column: 2; display: grid; grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.25fr) minmax(260px, 1.8fr); gap: 20px; align-items: center; padding: 42px 6px 44px; border-top: 2px dashed #c55b46; }
.vm-repair-branch > div { display: grid; grid-template-columns: repeat(3, minmax(82px, 1fr)); gap: 16px; }
.vm-repair-branch > .architecture-mark:not(:last-of-type)::after, .vm-repair-branch > div > .architecture-mark:not(:last-child)::after { position: absolute; top: 50%; left: calc(100% + 3px); color: var(--teal); content: "\2192"; font-size: 16px; font-weight: 800; transform: translateY(-50%); }
.vm-branch-link { position: absolute; color: #a74432; font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.vm-branch-down { top: 9px; left: 0; }
.vm-branch-return { right: 0; bottom: 10px; color: #345d98; }
[data-diagram="linux-vm"][data-architecture-route-active="resident"] .vm-branch-link { opacity: .22; }
.futex-turnstile { display: grid; grid-template-columns: 1fr 1.35fr 1fr; grid-template-rows: auto auto; gap: 22px; align-items: center; padding: 28px 28px 65px; }
.thread-lane { display: grid; gap: 9px; }.thread-a { grid-column: 1; }.thread-b { grid-column: 3; }
.lock-word { grid-column: 2; grid-row: 1; display: grid; gap: 7px; padding: 14px; background: #fff; border: 3px solid #4d6079; text-align: center; }
.lock-word > span { color: var(--muted); font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; }.lock-word > strong { font-size: 12px; }
.critical-chamber { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; background: var(--teal-soft); border: 2px solid var(--teal); }
.kernel-wait-path { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px; background: var(--blue-soft); border-top: 2px solid #345d98; }
.read-route { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 28px 26px 62px; }
.read-request { align-self: start; display: grid; gap: 4px; padding: 12px; color: #fff; background: #4d6079; }.read-request span { font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.read-return-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: center; position: relative; }
.read-return-rail::before { position: absolute; right: 3%; left: 3%; height: 3px; background: var(--teal); content: ""; }
.read-miss-branch { grid-column: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: center; padding: 15px; background: #f8eed8; border-top: 2px solid #b27b25; }
.completion-arrow { grid-column: 1 / -1; color: #744c14; font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.rpc-lifelines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 54px 25px 65px; }
.rpc-lifelines > header { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 12px 25px; color: var(--muted); background: #e8ece9; font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; text-transform: uppercase; }
.rpc-client-line, .rpc-network-line, .rpc-server-line { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-left: 2px solid #9eaaa5; }
.rpc-message { position: absolute; z-index: 3; padding: 5px 8px; color: #fff; background: #345d98; font: 750 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.rpc-message.request { top: 120px; left: 29%; }.rpc-message.response { right: 29%; bottom: 88px; background: var(--teal); }
@media (prefers-reduced-motion: reduce) { .legacy-mechanism * { scroll-behavior: auto; transition: none !important; } }

.lottery-visual { margin-top: 18px; }
.lottery-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.lottery-readout > div { display: grid; gap: 4px; padding: 11px; background: var(--page); border-top: 3px solid var(--teal); }
.lottery-readout span, .lottery-scan > span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.lottery-readout strong { font-size: 14px; }
.lottery-linked-list { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding: 15px 12px; background: var(--page); border: 1px solid var(--rule); }
.lottery-head, .lottery-null { align-self: center; flex: 0 0 auto; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.lottery-node { display: grid; flex: 1 0 150px; gap: 4px; min-height: 92px; padding: 12px; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-align: left; }
.lottery-node:hover, .lottery-node:focus-visible { border-color: var(--teal); outline: 2px solid rgba(23, 112, 101, .2); outline-offset: 1px; }
.lottery-node span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.lottery-node strong { font-size: 16px; }
.lottery-node small { color: var(--muted); font-size: 11px; }
.lottery-node.is-winner { background: var(--teal-soft); border-color: var(--teal); box-shadow: inset 0 -4px var(--teal); }
.lottery-scan { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding: 11px 12px; background: #fff; border: 1px solid var(--rule); }
.lottery-scan strong { padding: 4px 7px; background: var(--page); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.lottery-scan strong.is-winner { background: var(--teal-soft); color: #164f49; }

.stage-picker { display: grid; gap: 9px; margin: 22px 0; padding: 13px 14px 11px; background: var(--page); border: 1px solid var(--rule); }
.stage-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stage-picker-head span { color: var(--muted); font-size: 12px; }
.stage-picker-head strong { color: var(--ink); font-size: 13px; }
.stage-picker-controls { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px auto; align-items: end; gap: 8px; }
.stage-picker-controls button { min-height: 36px; padding: 6px 9px; background: #fff; border: 1px solid #b9c3bf; color: var(--ink); font-size: 16px; line-height: 1; }
.stage-picker-controls button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.stage-picker-controls button:disabled { cursor: default; opacity: .38; }
.stage-picker-controls .stage-play { min-width: 68px; padding-inline: 11px; color: #fff; background: var(--teal); border-color: var(--teal); font-size: 12px; font-weight: 700; }
.stage-picker-controls .stage-play:hover { color: #fff; background: #07574f; }
.stage-event-select { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.stage-event-select select { width: 100%; min-height: 36px; color: var(--ink); background: #fff; border: 1px solid #b9c3bf; }
.stage-menu { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 22px 0; padding: 13px 14px; background: var(--page); border: 1px solid var(--rule); }
.stage-menu label { display: grid; flex: 1 1 360px; gap: 5px; color: var(--muted); font-size: 12px; }
.stage-menu select { width: 100%; min-height: 40px; padding: 7px 34px 7px 10px; background: #fff; border: 1px solid #b9c3bf; color: var(--ink); font: inherit; }
.stage-menu > div { display: flex; align-items: center; gap: 9px; }
.stage-menu button { width: 40px; height: 40px; padding: 0; background: #fff; border: 1px solid #b9c3bf; color: var(--ink); font-size: 17px; }
.stage-menu button:disabled { opacity: .38; }
.stage-menu strong { min-width: 82px; font-size: 12px; text-align: center; }
.semantic-factor, .diagram-controls, .paging-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0; }
.semantic-factor > div:first-child span { color: var(--muted); font-size: 12px; }
.semantic-factor { justify-content: space-between; padding: 12px 14px; background: var(--page); }
.semantic-factor > div:first-child { display: grid; }
.lab-variant-factor { align-items: start; }
.lab-variant-factor .lab-variant-detail { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.semantic-factor-buttons, .diagram-controls, .paging-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.semantic-factor-buttons button, .diagram-controls button, .paging-choice button { min-height: 38px; padding: 7px 11px; background: #fff; border: 1px solid #b9c3bf; color: var(--ink); font-size: 13px; }
button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.parameter-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 18px; }
.parameter-controls label, .parameter-slider { padding: 12px; border: 1px solid var(--line); background: #fff; }
.parameter-controls label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.parameter-controls span, .parameter-slider label { color: var(--muted); font-size: 12px; font-weight: 700; }
.parameter-controls input { width: 54px; min-height: 34px; border: 1px solid #b9c3bf; text-align: center; }
.parameter-controls small { grid-column: 1 / -1; color: var(--muted); }
.parameter-slider { margin: 18px 0; }
.parameter-slider label, .parameter-slider > div { display: flex; justify-content: space-between; gap: 16px; }
.parameter-slider output { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.parameter-slider input { width: 100%; margin: 12px 0 7px; accent-color: var(--teal); }
.parameter-slider > div { color: var(--muted); font-size: 11px; }
.persistent-definition, .distinction-note, .semantic-boundary, .schedule-note, .diagram-explanation, .paging-result { margin: 18px 0 0; color: #3f4744; font-size: 14px; }
.semantic-reading { display: grid; grid-template-columns: minmax(150px, 0.28fr) 1fr; gap: 18px; margin-top: 18px; padding: 16px; background: var(--teal-soft); }
.semantic-reading span { color: var(--teal); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; }
.semantic-reading h4 { margin: 3px 0 0; font-size: 14px; }
.semantic-reading p { margin: 0; font-size: 14px; }
.walkthrough-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 22px 0 17px; padding-bottom: 15px; border-bottom: 1px solid var(--rule); }
.walkthrough-controls button { min-height: 38px; padding: 7px 10px; background: #fff; border: 1px solid #b9c3bf; color: var(--ink); font-size: 12px; }
.walkthrough-controls button[aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.walkthrough-controls strong { margin-left: auto; color: var(--muted); font-size: 12px; }
.walkthrough-visual { max-width: 100%; overflow-x: auto; padding-bottom: 5px; }
.mechanism-scene { margin-top: 18px; padding: 16px; background: var(--page); border: 1px solid var(--rule); }
.mechanism-scene button[data-walkthrough-cell] { width: 100%; min-width: 0; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-align: left; }
.mechanism-scene button[data-walkthrough-cell]:hover, .mechanism-scene button[data-walkthrough-cell]:focus-visible { border-color: var(--teal); outline: 2px solid rgba(23, 112, 101, .24); outline-offset: 1px; }
.mechanism-scene button[data-walkthrough-cell] span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.mechanism-scene button[data-walkthrough-cell] strong { overflow-wrap: anywhere; white-space: pre-line; font-size: 14px; line-height: 1.4; }
.mechanism-flow-board, .mechanism-graph-board { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr) auto minmax(140px, 1fr); align-items: stretch; gap: 8px; min-height: 180px; }
.mechanism-node { display: grid; align-content: center; gap: 9px; padding: 16px; }
.mechanism-connector { align-self: center; color: var(--teal); font-size: 19px; font-weight: 700; }
.mechanism-progress { height: 3px; margin-top: 14px; background: #dce2df; }
.mechanism-progress span { display: block; width: 20%; height: 100%; background: var(--teal); transition: width .2s ease; }
.mechanism-hierarchy-board { display: grid; gap: 6px; }
.mechanism-hierarchy-board > span { justify-self: center; color: var(--blue); font-size: 18px; }
.mechanism-layer { display: grid; grid-template-columns: minmax(120px, .3fr) 1fr; gap: 14px; align-items: center; min-height: 70px; padding: 12px 14px; border-left: 5px solid var(--blue) !important; }
.mechanism-queue-board { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; }
.mechanism-queue-board section { min-width: 0; padding: 10px; background: #fff; border-top: 4px solid var(--amber); }
.mechanism-queue-board section:nth-child(2) { border-top-color: var(--teal); }
.mechanism-queue-board header, .mechanism-memory-board header, .mechanism-storage-board header, .mechanism-evidence-board header { margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.mechanism-queue-token { display: grid; gap: 4px; align-content: center; min-height: 124px; padding: 12px; background: var(--teal-soft) !important; }
.mechanism-memory-board { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; }
.mechanism-memory-board section { padding: 10px; background: #fff; border-left: 6px solid var(--blue-soft); }
.mechanism-memory-board section:nth-child(2) { border-left-color: var(--amber-soft); }
.mechanism-memory-board section:nth-child(3) { border-left-color: var(--teal-soft); }
.mechanism-memory-cell { display: grid; gap: 4px; align-content: center; min-height: 150px; padding: 12px; background: var(--blue-soft) !important; }
.mechanism-state-board { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(170px, .85fr) minmax(140px, 1fr); align-items: center; gap: 10px; min-height: 180px; }
.mechanism-state-board > button { display: grid; gap: 8px; align-content: center; min-height: 135px; padding: 14px; }
.mechanism-state-core { min-height: 170px !important; background: var(--blue-soft) !important; border-color: #9bbdc7 !important; text-align: center !important; }
.mechanism-graph-board { grid-template-columns: minmax(130px, 1fr) auto minmax(160px, 1fr) auto minmax(130px, 1fr); align-items: center; }
.mechanism-graph-node { display: grid; gap: 7px; align-content: center; min-height: 130px; padding: 14px; border-bottom: 5px solid var(--coral) !important; }
.graph-node-center { min-height: 165px; background: var(--teal-soft) !important; border-bottom-color: var(--teal) !important; text-align: center !important; }
.graph-edge { color: var(--coral); font-size: 20px; }
.mechanism-storage-board { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; }
.mechanism-storage-board section { padding: 10px; background: #fff; }
.mechanism-storage-track { display: grid; }
.mechanism-storage-block { display: grid; gap: 4px; align-content: center; min-height: 110px; padding: 12px; background: var(--amber-soft) !important; }
.mechanism-evidence-board { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; }
.mechanism-evidence-board section { padding: 10px; background: #fff; border-top: 4px solid var(--coral); }
.mechanism-evidence-board section:nth-child(2) { border-top-color: var(--amber); }
.mechanism-evidence-board section:nth-child(3) { border-top-color: var(--teal); }
.mechanism-evidence-cell { display: grid; gap: 6px; align-content: start; min-height: 125px; padding: 10px; background: var(--page) !important; }
.schedule-visual, .translation-visual, .paging-map, .fault-flow, .race-model, .raid-visual, .filesystem-visual, .journal-visual, .ssd-visual { margin-top: 18px; }
.lab-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 12px; padding: 11px 13px; background: var(--page); }
.lab-readout span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.lab-readout strong { color: var(--ink); font-size: 13px; }
.lab-readout-prominent { background: var(--teal-soft); }
.lab-frame-controls { justify-content: flex-start; }
.lab-frame-controls > span { color: var(--muted); font-size: 12px; }
.lab-stage-cards { display: grid; gap: 8px; margin-top: 18px; }
.lab-stage-card { display: none; padding: 12px; background: var(--page); }
.lab-stage-card[data-current] { display: block; background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
.lab-stage-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lab-stage-card header span, .lab-lock-state span, .lab-compare-grid span, .lab-counter-strip span, .lab-buffer-row span, .lab-path-node span, .lab-locality-grid span, .lab-segment-readout span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.lab-stage-card header strong { font-size: 13px; }
.lab-lock-state { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .8fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.lab-lock-state > div, .lab-compare-grid section, .lab-counter-strip > div, .lab-buffer-row > div, .lab-path-node, .lab-locality-grid section { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px; background: #fff; }
.lab-lock-state strong, .lab-compare-grid strong, .lab-counter-strip strong, .lab-buffer-row strong, .lab-path-node strong, .lab-locality-grid strong, .lab-segment-readout strong { overflow-wrap: anywhere; font-size: 13px; }
.lab-lock-word { background: var(--blue-soft) !important; text-align: center; }
.lab-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.lab-compare-grid section { gap: 8px; }
.lab-compare-grid p { margin: 0; padding: 8px; background: var(--amber-soft); color: #5c460e; font-size: 12px; }
.lab-counter-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.lab-counter-strip > div { align-items: center; justify-items: center; text-align: center; }
.lab-counter-strip strong { font-size: 20px; }
.lab-buffer-row { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.lab-buffer-row code { display: grid; align-items: center; min-height: 48px; padding: 10px; background: #fff; color: var(--ink); font-size: 14px; }
.lab-path-nodes { display: flex; align-items: stretch; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 3px; }
.lab-path-node { flex: 1 0 120px; }
.lab-path-arrow { align-self: center; color: var(--teal); font-size: 18px; }
.lab-locality-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.lab-locality-grid section:first-child { border-top: 3px solid var(--coral); }
.lab-locality-grid section:last-child { border-top: 3px solid var(--teal); }
.lab-locality-result, .lab-segment-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 8px 0 0; padding: 10px; background: #fff; }
.lab-segment-row { display: flex; gap: 5px; margin-top: 10px; overflow-x: auto; padding-bottom: 3px; }
.lab-segment-row span { display: grid; min-width: 58px; min-height: 48px; place-items: center; padding: 8px; background: var(--blue-soft); color: #194e5c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.lab-segment-readout { justify-content: space-between; }
.replacement-frame-grid { display: grid; grid-template-columns: repeat(var(--frame-count), minmax(100px, 1fr)); gap: 8px; margin-top: 18px; }
.replacement-frame { display: grid; gap: 4px; min-height: 70px; padding: 12px; background: var(--page); }
.replacement-frame span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.replacement-frame strong { font-size: 15px; }
.replacement-history { margin-top: 18px; overflow-x: auto; }
.replacement-history table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 12px; text-align: right; }
.replacement-history th, .replacement-history td { padding: 7px 9px; border-bottom: 1px solid var(--soft); }
.replacement-history th:first-child, .replacement-history td:first-child { text-align: left; }
.replacement-history tr.is-hit { color: #42655f; }
.replacement-history tr.is-fault { color: #823c2c; }
.lab-reference-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.state-summary, .io-summary, .ssd-summary, .schedule-status, .raid-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.state-summary > div, .io-summary > div, .ssd-summary > div, .schedule-status > div, .raid-metrics > span { display: grid; gap: 3px; padding: 10px; background: var(--page); }
.state-summary span, .io-summary span, .ssd-summary span, .schedule-status span, .raid-summary span, .filesystem-detail span, .journal-crash-readout span, .rpc-decision span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.predicate-summary, .rpc-decision, .raid-recovery, .journal-replay, .translation-marker, .filesystem-detail, .journal-crash-readout, .ftl-map { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding: 11px 13px; background: var(--page); }
.predicate-summary code { overflow-wrap: anywhere; }

.gantt { margin: 20px 0; }
.gantt-track { display: flex; min-height: 72px; overflow: hidden; border-radius: 4px; }
.gantt-track span { display: grid; flex: var(--units); place-content: center; min-width: 54px; text-align: center; }
.gantt-track small { font-size: 10px; }
.job-a { background: var(--teal-soft); color: #12584f; }
.job-b { background: var(--coral-soft); color: #7a382a; }
.job-c { background: var(--amber-soft); color: #6c4a0c; }
.gantt-axis { display: flex; justify-content: space-between; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.schedule-metrics table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: right; }
.schedule-metrics th, .schedule-metrics td { padding: 7px 9px; border-bottom: 1px solid var(--soft); }
.schedule-metrics th:first-child { text-align: left; }

.translation-visual { display: grid; grid-template-columns: minmax(130px, 0.7fr) minmax(230px, 1.4fr) minmax(130px, 0.7fr); gap: 16px; }
.memory-panel, .translation-route { display: grid; align-content: start; gap: 7px; }
.memory-panel header { display: grid; margin-bottom: 4px; }
.memory-panel header span, .translation-route span { color: var(--muted); font-size: 11px; }
.memory-panel > div, .translation-route > div { display: grid; padding: 9px 10px; background: var(--page); font-size: 12px; }
.memory-panel > div[data-current] { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
.translation-route > div { background: var(--blue-soft); }

.paging-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.paging-map section { display: grid; align-content: start; gap: 6px; }
.paging-map h4 { margin: 0 0 4px; font-size: 14px; }
.paging-map section > div { display: flex; justify-content: space-between; min-height: 44px; padding: 9px 10px; background: var(--page); font-size: 13px; }
.paging-map [data-current] { background: var(--teal-soft); color: #12584f; font-weight: 700; }

.fault-flow { display: grid; justify-items: stretch; gap: 6px; max-width: 720px; }
.fault-flow > div:not(.fault-branch), .fault-branch > div { display: grid; padding: 11px 13px; background: var(--page); color: #6d7472; }
.fault-flow [data-active] { color: var(--ink) !important; }
.fault-flow [data-current] { background: var(--teal-soft) !important; }
.fault-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flow-arrow { color: var(--muted); text-align: center; }

.race-model { padding: 16px; background: var(--page); }
.shared-counter, .race-lanes, .register-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shared-counter > div, .register-strip > span { display: flex; justify-content: space-between; padding: 9px 11px; background: #fff; }
.race-lanes { grid-template-columns: 1fr 150px 1fr; margin: 14px 0; }
.race-lanes ol { display: grid; gap: 6px; margin: 7px 0 0; padding: 0; list-style: none; }
.race-op { display: flex; gap: 8px; padding: 9px; background: #fff; color: var(--muted); }
.race-op.is-complete { color: var(--ink); }
.race-op.is-active { background: var(--amber-soft); color: var(--ink); }
.op-order { min-width: 18px; color: var(--coral); font-weight: 700; }
.mutex-lane { display: grid; align-content: center; padding: 12px; background: var(--blue-soft); text-align: center; }
.mutex-lane span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.race-stepper { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.race-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }

.raid-summary { display: grid; grid-template-columns: minmax(170px, 0.35fr) 1fr; gap: 18px; }
.raid-summary div { display: grid; }
.raid-summary p { margin: 0; }
.scroll-region { max-width: 100%; overflow-x: auto; padding-bottom: 5px; }
.scroll-hint { display: none; margin: 12px 0 5px; color: var(--muted); font-size: 11px; }
.raid-grid { min-width: 660px; }
.raid-grid-head, .raid-grid-row { display: grid; grid-template-columns: 90px repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.raid-grid-head > span, .raid-row-label, .raid-cell { display: grid; place-items: center; min-height: 42px; padding: 7px; }
.raid-grid-head > span, .raid-row-label { color: var(--muted); font-size: 11px; }
.raid-cell { background: var(--teal-soft); color: #14574f; font-weight: 700; }
.raid-cell.is-parity { background: var(--amber-soft); color: #704c0b; }
.raid-cell.is-failed, .raid-grid-head .is-failed { background: #e4e6e5; color: #7c8380; text-decoration: line-through; }
.raid-cell.is-write, .raid-cell.is-target { outline: 3px solid var(--coral); outline-offset: -3px; }
.raid-cell.is-recovery { box-shadow: inset 0 -4px var(--blue); }
.raid-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.raid-legend span { display: flex; align-items: center; gap: 5px; }
.raid-legend i { width: 12px; height: 12px; background: var(--teal-soft); }
.raid-legend .parity { background: var(--amber-soft); }
.raid-legend .failed { background: #d8dcda; }
.raid-legend .recovery { background: var(--blue-soft); box-shadow: inset 0 -3px var(--blue); }

.filesystem-phase { padding: 14px; background: var(--page); opacity: 0.62; }
.filesystem-phase + .filesystem-phase { margin-top: 10px; }
.filesystem-phase[data-current] { opacity: 1; }
.filesystem-phase header span { color: var(--teal); font-size: 11px; text-transform: uppercase; }
.filesystem-phase h4 { margin: 2px 0 12px; font-size: 15px; }
.filesystem-chain, .open-path, .read-path { display: flex; align-items: stretch; gap: 6px; }
.read-path { margin-top: 8px; }
.filesystem-chain > div, .open-path > div, .read-path > div { display: grid; flex: 1; min-width: 0; padding: 9px; background: #fff; color: var(--muted); font-size: 12px; }
.filesystem-chain > span, .open-path > span, .read-path > span { align-self: center; color: var(--muted); }
.filesystem-visual [data-active] { color: var(--ink); }
.filesystem-visual [data-current] { background: var(--teal-soft); }
.journal-crash-readout { justify-content: center; }

.flash-block { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 14px 0; }
.flash-block > div { display: grid; min-height: 76px; place-content: center; padding: 8px; background: var(--page); text-align: center; }
.flash-block span { color: var(--muted); font-size: 11px; }
.flash-block strong { font-size: 12px; }

.finish { margin-top: 100px; }
.finish h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 38px; font-weight: 600; line-height: 1.2; }
.finish li { margin-bottom: 8px; }
.week-checkpoint { margin: 10px 0 40px; padding: 22px 0; color: #303735; }
.week-checkpoint > strong { color: var(--teal); }
.continue-link { display: inline-block; margin-top: 8px; font-weight: 700; }

.source-zoom { width: min(1100px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0; border: 0; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); }
.source-zoom::backdrop { background: rgba(16, 21, 20, 0.68); }
.source-zoom-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--rule); }
.source-zoom-bar div { display: grid; }
.source-zoom-bar span { color: var(--muted); font-size: 11px; }
.source-zoom-bar button { width: 38px; height: 38px; background: transparent; border: 1px solid var(--rule); font-size: 22px; }
.source-zoom-scroll { overflow: auto; max-height: calc(100vh - 150px); padding: 20px; background: #e9ecea; }
.source-zoom-scroll img { width: 100%; }
.source-zoom > a { display: block; padding: 10px 16px; background: #fff; }
.noscript-guide { max-width: 760px; margin: 40px auto; padding: 24px; background: #fff; }

.ask-ai-panel {
  position: fixed;
  z-index: 30;
  top: 62px;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(390px, 100vw);
  background: #fff;
  border-left: 1px solid var(--rule);
  box-shadow: -16px 0 40px rgba(28, 39, 35, 0.12);
}
.ask-ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--rule);
}
.ask-ai-panel-header span { color: var(--teal); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ask-ai-panel-header h2 { margin: 2px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.1; }
.ask-ai-panel-actions { display: flex; gap: 5px; }
.ask-ai-panel-actions button { min-height: 34px; padding: 5px 8px; background: transparent; border: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.ask-ai-panel-actions button:hover { border-color: var(--teal); color: var(--teal); }
.ask-ai-panel-actions button:last-child { width: 34px; font-size: 21px; line-height: 1; }
.ask-ai-context { margin: 14px 18px 0; padding: 9px 10px; background: var(--teal-soft); color: #164f49; font-size: 12px; line-height: 1.4; }
.ask-ai-messages { display: grid; align-content: start; gap: 14px; overflow: auto; padding: 18px; }
.ask-ai-message { max-width: 100%; }
.ask-ai-message.user { justify-self: end; max-width: 90%; padding: 9px 11px; background: var(--ink); color: #fff; }
.ask-ai-message-body p { margin: 0; font-size: 14px; line-height: 1.55; }
.ask-ai-message-body p + p { margin-top: 10px; }
.ask-ai-pending { margin: 0; color: var(--muted); font-size: 12px; }
.ask-ai-compose { padding: 12px 18px 16px; border-top: 1px solid var(--rule); }
.ask-ai-starters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.ask-ai-starters button { flex: 0 0 auto; min-height: 32px; padding: 5px 9px; background: var(--page); border: 1px solid var(--rule); color: var(--muted); font-size: 11px; text-align: left; }
.ask-ai-starters button:hover { border-color: var(--teal); color: var(--teal); }
.ask-ai-form textarea { width: 100%; min-height: 74px; padding: 10px; resize: vertical; background: #fbfcfb; border: 1px solid #bac4c0; font-size: 14px; line-height: 1.45; }
.ask-ai-form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.ask-ai-form-row span { color: var(--muted); font-size: 11px; }
.ask-ai-form-row button { width: 36px; height: 36px; padding: 0; background: var(--teal); border: 1px solid var(--teal); color: #fff; font-size: 20px; line-height: 1; }
.ask-ai-footnote { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.ask-ai-footnote code { overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .interactive-diagram { width: min(100%, calc(100vw - 270px)); }
  .translation-visual { grid-template-columns: 1fr; }
  .translation-route { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
  .race-lanes { grid-template-columns: 1fr; }
  .mutex-lane { grid-template-columns: repeat(4, auto); justify-content: center; gap: 8px; }
  .filesystem-chain, .open-path, .read-path { align-items: stretch; overflow-x: auto; }
  .filesystem-chain > div, .open-path > div, .read-path > div { min-width: 150px; }
}

@media (max-width: 780px) {
  html { scroll-padding-top: 150px; }
  body { font-size: 16px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; padding: 9px 14px; }
  .progress-wrap { margin: 0; }
  .progress-wrap progress { width: 60px; }
  .ask-ai-toggle { margin: 0; padding: 6px 8px; font-size: 12px; }
  .ask-ai-toggle svg { width: 15px; height: 15px; }
  .search { grid-column: 1 / -1; }
  .shell { display: block; }
  .rail-heading { display: none; }
  .shell.rail-collapsed #week-nav { display: flex; }
  .shell.rail-collapsed .interactive-diagram { width: 100%; }
  .rail { position: sticky; z-index: 15; top: 103px; height: auto; padding: 8px 12px; overflow: hidden; border-bottom: 1px solid var(--rule); }
  .rail-mobile-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
  .rail-mobile-tools div { display: flex; gap: 4px; }
  .rail-mobile-tools button { width: 40px; height: 40px; padding: 0; background: #fff; border: 1px solid var(--rule); }
  #week-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .week-link { flex: 0 0 142px; padding: 7px 8px; border-left: 0; border-bottom: 3px solid transparent; }
  .week-link[aria-current] { border-bottom-color: var(--teal); }
  .rail-sources { display: none; }
  #content { padding: 34px 20px 80px; }
  .intro { margin-bottom: 54px; }
  .intro h1 { font-size: 36px; }
  .lede { font-size: 18px; }
  .study-loop, .week-depth, .depth-review { grid-template-columns: 1fr; gap: 0; }
  .study-loop > div, .week-depth > div { padding-right: 0; border-right: 0; }
  .week-depth > div + div { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .depth-review > div + div { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--rule); }
  .week-heading { display: block; }
  .week-title { font-size: 38px; }
  .week-range { margin-top: 8px; }
  .week-lesson { margin-bottom: 56px; }
  .chapter { margin-bottom: 96px; }
  .chapter-header { display: block; }
  .chapter-completion { margin-bottom: 15px; }
  .chapter-header h3 { font-size: 31px; }
  .chapter-takeaway { font-size: 19px; }
  .interactive-diagram { width: 100%; margin: 48px 0; padding: 19px; }
  .interactive-heading h4 { font-size: 23px; }
  .practice { margin-top: 46px; padding: 20px; }
  .semantic-reading { grid-template-columns: 1fr; gap: 8px; }
  .coverage-table { display: block; overflow-x: auto; }
  .coverage-table th, .coverage-table td { min-width: 145px; }
  .walkthrough-controls { align-items: stretch; }
  .walkthrough-controls button { flex: 1 1 calc(50% - 6px); }
  .walkthrough-controls strong { width: 100%; margin: 4px 0 0; }
  .mechanism-flow-board, .mechanism-graph-board, .mechanism-queue-board, .mechanism-memory-board, .mechanism-state-board, .mechanism-storage-board, .mechanism-evidence-board { grid-template-columns: 1fr; min-height: 0; }
  .mechanism-connector { justify-self: center; transform: rotate(90deg); }
  .graph-edge { justify-self: center; transform: rotate(90deg); }
  .mechanism-state-board > button, .mechanism-state-core { min-height: 118px !important; }
  .mechanism-storage-track { grid-template-columns: 1fr; overflow: visible; }
  .semantic-factor { display: grid; }
  .parameter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-variant-factor .lab-variant-detail { grid-column: auto; }
  .replacement-frame-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .lab-lock-state, .lab-compare-grid, .lab-locality-grid { grid-template-columns: 1fr; }
  .lab-buffer-row { grid-template-columns: 1fr; }
  .lab-stage-card header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .architecture-layer { grid-template-columns: 1fr; gap: 8px; }
  .architecture-nodes { grid-template-columns: 1fr; }
  .architecture-route-view > header { display: grid; gap: 8px; }
  .architecture-route-sequence { margin-inline: -4px; }
  .lottery-readout { grid-template-columns: 1fr; }
  .lottery-scan { align-items: flex-start; flex-direction: column; }
  .paging-map { grid-template-columns: 1fr; }
  .fault-branch { grid-template-columns: 1fr; }
  .flash-block { grid-template-columns: repeat(3, 1fr); }
  .term { grid-template-columns: 1fr; gap: 2px; }
  .scroll-hint { display: block; }
  button { min-height: 40px; }
  .semantic-factor-buttons button, .diagram-controls button, .paging-choice button { min-height: 40px; }
  .order-controls button { width: 40px; height: 40px; }
  .source-actions a, .source-actions button, .further-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .ask-ai-panel { top: 103px; width: 100vw; }
  .ask-ai-panel-header { padding-inline: 14px; }
  .ask-ai-context, .ask-ai-compose { margin-inline: 14px; }
  .ask-ai-compose { margin-inline: 0; padding-inline: 14px; }
  .ask-ai-messages { padding-inline: 14px; }
}

@media (max-width: 480px) {
  .parameter-controls { grid-template-columns: 1fr; }
  .parameter-slider > div { align-items: flex-start; }
  .parameter-slider > div span:nth-child(2) { text-align: center; }
  .parameter-slider > div span:last-child { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}