:root {
  --depth-ink: #101411;
  --depth-muted: #52605a;
  --depth-line: rgba(16, 20, 17, 0.2);
  --depth-blue: #1f5f7d;
  --depth-blue-soft: #e8f4fa;
  --depth-amber: #d48813;
  --depth-amber-soft: #fff6e4;
  --depth-red: #a63d2f;
  --depth-red-soft: #fff0ed;
}

.depth-scope-note,
.source-proof,
.warning-note,
.limit-note {
  margin: 18px 0;
  padding: 16px 18px;
  color: var(--depth-ink);
  background: #fff;
  border: 1px solid var(--depth-line);
  border-left: 5px solid var(--depth-blue);
}

.depth-scope-note p,
.source-proof p,
.warning-note p,
.limit-note p {
  margin: 0 0 8px;
}

.depth-scope-note p:last-child,
.source-proof p:last-child,
.warning-note p:last-child,
.limit-note p:last-child {
  margin-bottom: 0;
}

.warning-note {
  background: var(--depth-amber-soft);
  border-left-color: var(--depth-amber);
}

.limit-note {
  background: var(--depth-red-soft);
  border-left-color: var(--depth-red);
}

.source-proof {
  background: var(--depth-blue-soft);
}

.depth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}

.depth-panel {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--depth-line);
}

.depth-panel h3,
.depth-panel h4 {
  margin: 0 0 8px;
}

.depth-panel p:last-child,
.depth-panel ul:last-child {
  margin-bottom: 0;
}

.truth-table {
  width: 100%;
  min-width: 0;
  margin: 16px 0 24px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--depth-line);
}

.truth-table th,
.truth-table td {
  padding: 11px 12px;
  border-right: 1px solid var(--depth-line);
  border-bottom: 1px solid var(--depth-line);
  text-align: left;
  vertical-align: top;
}

.truth-table th:last-child,
.truth-table td:last-child {
  border-right: 0;
}

.truth-table tr:last-child td {
  border-bottom: 0;
}

.truth-table th {
  color: #17313f;
  background: var(--depth-blue-soft);
  font-size: 13px;
}

.flow-list {
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: depth-flow;
}

.flow-list li {
  position: relative;
  min-height: 56px;
  margin: 0 0 10px;
  padding: 14px 16px 14px 58px;
  background: #fff;
  border: 1px solid var(--depth-line);
  counter-increment: depth-flow;
}

.flow-list li::before {
  position: absolute;
  top: 12px;
  left: 14px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #fff;
  background: var(--depth-blue);
  content: counter(depth-flow, decimal-leading-zero);
  font-size: 12px;
  font-weight: 900;
}

.flow-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--depth-ink);
}

.code-caption {
  margin: 20px 0 0;
  padding: 9px 12px;
  color: #fff;
  background: #17313f;
  font-size: 13px;
  font-weight: 800;
}

.code-caption + pre {
  border-top: 0;
}

.page-grid article pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--depth-line);
  background: #fff;
  font-size: 13px;
  line-height: 1.65;
}

.page-grid article pre code {
  white-space: pre;
  font-family: Consolas, "Courier New", monospace;
  background: transparent;
  color: #213f34;
}

.page-grid article .code-caption + pre {
  margin-top: 0;
  border-top: 0;
}

.invariant-list,
.debug-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
}

.invariant-list li,
.debug-list li {
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--depth-line);
  border-left: 4px solid var(--depth-blue);
}

.invariant-list strong,
.debug-list strong {
  color: var(--depth-ink);
}

.source-links {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.source-links li {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--depth-line);
}

.source-links a {
  overflow-wrap: anywhere;
}

.article-signoff {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 2px solid var(--depth-ink);
}

.article-signoff p {
  margin-bottom: 8px;
}

/* Technical figures remain readable independently of the article layout. */
.technical-figure {
  scroll-margin-top: 88px;
  margin: 30px 0;
  padding: 20px 0 16px;
  border-top: 2px solid #243d36;
  border-bottom: 1px solid var(--depth-line);
  border-left: 0;
  border-right: 0;
  background: transparent;
  min-width: 0;
}
.technical-figure figcaption {
  margin-top: 14px;
  margin-bottom: 0;
  color: #34473e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
.technical-figure figcaption strong { color: #102d23; }
.technical-figure > .figure-title { margin: 0 0 16px; font-size: 17px; font-weight: 800; }
.figure-source { display: block; margin-top: 5px; font-size: 12px; }
.diagram-track, .diagram-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.diagram-columns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagram-node {
  position: relative;
  padding: 16px;
  border: 1px solid #708b82;
  background: #f0f8f4;
  color: #173a2b;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
}
.diagram-node strong, .diagram-node small { display: block; }
.diagram-node strong { margin-bottom: 7px; }
.diagram-node small { margin-top: 8px; font-size: 12px; }
.diagram-node.blue { background: #edf6fb; color: #194d69; border-color: #6a92a9; }
.diagram-node.red { background: #fbeded; color: #843e3e; border-color: #b58282; }
.diagram-node.gray { background: #f3f3f3; color: #515151; border-color: #929292; }
.diagram-track > .diagram-node:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -22px;
  top: 40%;
  color: #34594c;
  font-size: 20px;
}
.diagram-junction { text-align: center; margin: 12px 0; font-size: 13px; color: #486057; }
.diagram-stack { display: grid; gap: 0; max-width: 540px; margin: auto; }
.diagram-stack .diagram-node + .diagram-node { border-top: 0; }
.figure-scroll { overflow-x: auto; min-width: 0; }
.figure-scroll table { min-width: 590px; }
.technical-figure table { width: 100%; border-collapse: collapse; font-size: 14px; }
.technical-figure th, .technical-figure td { padding: 12px; text-align: left; border: 1px solid #bcc9c3; vertical-align: top; }
.technical-figure th { background: #e8f0ec; color: #19372a; word-break: keep-all; font-family: inherit; }
.technical-figure th:first-child { min-width: 72px; }
.technical-figure td { background: #fff; }
.technical-figure td.active { background: #e0f2e7; color: #164931; font-weight: 700; }
.technical-figure td.inactive { background: #f7ebeb; color: #7b3939; }
.technical-figure td.waiting { background: #f1f2f3; color: #46545d; }
.figure-note { margin: 12px 0 0; font-size: 13px; line-height: 1.7; }
.tree-root { width: min(100%, 330px); margin: auto; text-align: center; }
.tree-root::after { content: ""; position: absolute; bottom: -14px; left: 50%; height: 13px; border-left: 1px solid #628274; }
.tree-branches { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; margin: 24px 0 0; }
.tree-branches::before { content: ""; position: absolute; top: -11px; left: calc(25% - 7.5px); width: calc(50% + 15px); border-top: 1px solid #628274; }
.tree-branches > div { position: relative; padding-top: 14px; }
.tree-branches > div::before { content: ""; position: absolute; left: 50%; top: -11px; height: 33px; border-left: 1px solid #628274; }
.tree-branches .diagram-node { margin: 8px 0; }
.timeline-strip { display: flex; min-height: 62px; margin: 12px 0; border: 1px solid #718b81; }
.timeline-strip span { display: grid; flex: 1; place-items: center; padding: 12px 6px; color: #123d2a; background: #cfe8d9; border-right: 1px solid #718b81; font-size: 14px; text-align: center; }
.timeline-strip span:nth-child(even) { background: #dcecf5; color: #17465f; }
.timeline-strip span:last-child { border: 0; }
.analysis-step { padding: 14px 0; border-bottom: 1px solid var(--depth-line); }
.analysis-step h4 { margin: 0 0 8px; font-size: 17px; }
.analysis-step p { margin: 0 0 10px; }
.technical-figure code, .depth-scope-note code, .source-proof code, article p code,
.truth-table code, .analysis-strip dd, .baseline dd { overflow-wrap: anywhere; }
.page-grid > article { min-width: 0; }
.page-grid .toc { max-height: calc(100vh - 100px); overflow-y: auto; }
.flow-list li::marker { content: ""; }

@media (max-width: 760px) {
  .diagram-track, .diagram-columns, .diagram-columns.two { grid-template-columns: 1fr; }
  .diagram-track > .diagram-node:not(:last-child)::after { content: "\2193"; left: calc(50% - 6px); right: auto; top: auto; bottom: -26px; }
  .tree-branches { gap: 14px; }
  .tree-branches::before { left: calc(25% - 3.5px); width: calc(50% + 7px); }
  .technical-figure { margin: 24px 0; }
  .technical-figure .diagram-node { padding: 12px; font-size: 13px; }
  .page-grid .toc { max-height: none; overflow: visible; }
  .hero h1 { font-size: 34px; overflow-wrap: anywhere; }
  article h2 { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .depth-grid {
    grid-template-columns: 1fr;
  }

  .truth-table {
    display: block;
    overflow-x: auto;
  }
}