:root {
  --canvas: #f8f8f7;
  --panel: #ffffff;
  --ink: #1f1f1f;
  --ink-soft: #676767;
  --line: #dededb;
  --line-strong: #c9c9c5;
  --brand-blue: #2947f3;
  --brand-violet: #7136e8;
  --brand-magenta: #c315d5;
  --brand-cyan: #4bc7ec;
  --brand-gradient: linear-gradient(
    115deg,
    var(--brand-magenta),
    var(--brand-violet) 48%,
    var(--brand-blue)
  );
  --brand-wash: #f4f0ff;
  --blue: #2947f3;
  --blue-bg: #eef0ff;
  --violet: #7136e8;
  --violet-bg: #f5f0ff;
  --amber: #b45309;
  --amber-bg: #fef6e7;
  --rose: #be123c;
  --rose-bg: #fef0f3;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(31, 31, 31, 0.04), 0 14px 38px rgba(31, 31, 31, 0.055);
  --sans: 'Anima Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings:
    'ss08' on,
    'liga' off;
  font-variant-numeric: slashed-zero;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-blue);
  text-underline-offset: 0.16em;
}

a:focus-visible,
summary:focus-visible,
.table-wrap:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--brand-cyan);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}

.sidenav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: 26px 18px;
  border-right: 1px solid var(--line);
  background: #fbfbfa;
}

.site-logo {
  display: block;
  width: 86px;
  height: auto;
  margin: 2px 0 6px;
}

.site-sub {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 12px;
}

.sidenav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidenav li + li {
  margin-top: 4px;
}

.sidenav a {
  display: block;
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
}

.sidenav a:hover {
  background: var(--panel);
  color: var(--ink);
}

.sidenav a[aria-current='page'] {
  background: var(--brand-wash);
  color: var(--brand-violet);
}

.sidenav .nav-label {
  margin: 22px 2px 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sidenav li.nav-label:first-child {
  margin-top: 4px;
}
.sidenav li.nav-label + li {
  margin-top: 0;
}

.sidenav li.nav-all {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}

.sidenav li.nav-all a {
  font-size: 12px;
  color: var(--ink-soft);
}

.site-note {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11.5px;
}

/* An instance site's standing link to the substrate's — every page, not just the one that
   mentions it, because how the layer WORKS is never on this site. */
.site-cross-lead {
  margin: 14px 0 18px;
  padding: 0 0 16px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.site-cross {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.site-cross a {
  color: var(--brand-blue);
  font-weight: 500;
  text-decoration: none;
}

.site-cross a:hover {
  text-decoration: underline;
}

.content {
  min-width: 0;
}

.wrap {
  width: min(100% - 48px, 940px);
  margin-inline: auto;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 30px 0 46px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(620px 360px at 96% 4%, rgba(75, 199, 236, 0.18), transparent 62%),
    radial-gradient(520px 380px at 76% 100%, rgba(113, 54, 232, 0.1), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  color: var(--ink);
}

.hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--brand-gradient);
  content: '';
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 780px;
  margin: 0 0 16px;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.hero .accent {
  background: var(--brand-gradient);
  background-clip: text;
  color: transparent;
}

.hero .sub {
  max-width: 720px;
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 550;
}

/* Metrics: headline numbers a page rests on — the review-template tile pattern. */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: 780px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.metrics li {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.metric-value {
  display: block;
  color: var(--ink);
  font-size: 1.8rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.metric-value a {
  color: inherit;
  text-decoration: none;
}

.metric-value a:hover {
  color: var(--brand-violet);
}

.metrics li[data-tone='open'] .metric-value {
  color: var(--amber);
}

.metric-label {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.page-toc {
  border-bottom: 1px solid var(--line);
  background: #fbfbfa;
}

.page-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
}

.page-toc a {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.page-toc a:hover {
  color: var(--brand-blue);
}

main section {
  padding: 54px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 20px;
}

main section:first-child {
  border-top: 0;
}

h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.section-kicker {
  margin: 0 0 12px;
  color: var(--brand-violet);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lede {
  max-width: 780px;
  margin: 0 0 26px;
  color: var(--ink-soft);
  font-size: 1.04rem;
}

p {
  max-width: 780px;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid + .grid,
.grid + .callout,
.callout + .grid,
.figure + .grid,
.grid + .figure,
.table-wrap + .callout,
.table-wrap + .grid,
.callout + .table-wrap,
.views + .callout,
.callout + h3,
.table-wrap + h3,
.figure + h3,
.callout + .figure,
.figure + .callout,
.figure + .figure {
  margin-top: 22px;
}

.card,
.callout,
.table-wrap,
.flow {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.card {
  position: relative;
  overflow: hidden;
  padding: 26px;
}

.card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-gradient);
  content: '';
}

.card[data-tone='blue']::before {
  background: var(--blue);
}

.card[data-tone='violet']::before {
  background: var(--violet);
}

.card[data-tone='muted']::before {
  background: var(--line-strong);
}

.card p,
.callout p,
.card li,
.callout li {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.925rem;
}

.card ul,
.callout ul {
  margin: 10px 0 0;
  padding-left: 1.2rem;
}

.card li + li,
.callout li + li {
  margin-top: 6px;
}

.label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.card[data-tone='blue'] .label {
  background: var(--blue-bg);
  color: var(--blue);
}

.card[data-tone='violet'] .label {
  background: var(--violet-bg);
  color: var(--violet);
}

.callout {
  padding: 24px;
  border-left: 4px solid var(--brand-violet);
}

.callout[data-tone='amber'] {
  border-left-color: var(--amber);
  background: var(--amber-bg);
}

.callout[data-tone='rose'] {
  border-left-color: var(--rose);
  background: var(--rose-bg);
}

.callout + .callout {
  margin-top: 14px;
}

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: hidden;
  padding: 20px;
}

.flow::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-gradient);
  content: '';
}

.flow[data-cols='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-step {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

.flow-step:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -11px;
  z-index: 1;
  color: var(--brand-violet);
  content: '→';
  font-weight: 800;
  transform: translateY(-50%);
}

.flow-step strong {
  display: block;
  margin-bottom: 4px;
}

.flow-step span {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.figure {
  margin: 0 0 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.figure > figcaption {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.diagram {
  display: block;
  width: 100%;
  height: auto;
}

.diagram .node {
  fill: var(--canvas);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.diagram .node[data-tone='blue'] {
  fill: var(--blue-bg);
  stroke: var(--blue);
}

.diagram .node[data-tone='violet'] {
  fill: var(--violet-bg);
  stroke: var(--violet);
}

.diagram .node[data-tone='amber'] {
  fill: var(--amber-bg);
  stroke: var(--amber);
}

.diagram .node[data-tone='ghost'] {
  fill: #fbfbfa;
  stroke: var(--line);
  stroke-dasharray: 5 4;
}

.diagram .edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.diagram .edge[data-tone='violet'] {
  stroke: var(--violet);
}

.diagram .arrowhead {
  fill: var(--line-strong);
}

.diagram .node-label {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
}

.diagram .node-note,
.diagram .edge-label {
  fill: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
}

/* The rule and its bullets live in the page gutter (the 24px the .wrap leaves either side), not in
   a first column of the text measure — so a step's content, the notebook bar above it and the prose
   around it all start on the same left edge. Below the mobile breakpoint the gutter is narrower
   than the decoration, so the arc indents its own content instead. */
.timeline {
  position: relative;
  margin: 0 0 0 -24px;
  padding: 4px 0 4px 24px;
  list-style: none;
}

.timeline::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 5px;
  width: 2px;
  background: var(--line);
  content: '';
}

.timeline li {
  position: relative;
  padding-bottom: 22px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  position: absolute;
  top: 6px;
  left: -24px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--brand-violet);
  content: '';
}

/* The step title only — a <strong> inside a lead or a note stays inline. */
.timeline li > strong {
  display: block;
}

.timeline span {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* The lead under a step's title: what the reader is about to look at, before the block. */
.timeline li > p {
  margin: 6px 0 10px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.views {
  display: grid;
  gap: 16px;
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.view-tabs input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.view-tabs label {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.view-tabs input:checked + label {
  border-color: transparent;
  background: var(--brand-wash);
  color: var(--brand-violet);
}

.view-tabs input:focus-visible + label {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 3px;
}

.view-panels {
  display: grid;
  gap: 16px;
}

@supports selector(:has(*)) {
  .views:has(.view-tabs input:checked) .view-panel {
    display: none;
  }

  .views:has(.view-tabs input:nth-of-type(1):checked) .view-panel:nth-of-type(1),
  .views:has(.view-tabs input:nth-of-type(2):checked) .view-panel:nth-of-type(2),
  .views:has(.view-tabs input:nth-of-type(3):checked) .view-panel:nth-of-type(3) {
    display: block;
  }
}

details.disclosure {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

details.disclosure + details.disclosure {
  margin-top: 12px;
}

details.disclosure > summary {
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

details.disclosure > summary::-webkit-details-marker {
  display: none;
}

details.disclosure > summary::before {
  display: inline-block;
  width: 1.15em;
  color: var(--brand-violet);
  content: '▸';
}

details.disclosure[open] > summary {
  margin-bottom: 14px;
}

details.disclosure[open] > summary::before {
  content: '▾';
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}

caption {
  padding: 16px 18px 8px;
  color: var(--ink-soft);
  font-size: 0.875rem;
  text-align: left;
}

th,
td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f3f3f1;
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

td.pick {
  background: var(--blue-bg);
}

code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #eeeeec;
  font-family: var(--mono);
  font-size: 0.9em;
}

pre {
  max-width: 780px;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-size: 0.85rem;
  line-height: 1.6;
}

pre code {
  padding: 0;
  background: transparent;
}

/* A cited surface that is planned, not shipped. `data-unbuilt` is both a reader signal — this member
   is not usable today — and the mark the doc-drift gate (check-symbols.mjs) reads to know a page is
   naming a not-yet-built member on purpose rather than by mistake. It mirrors the notebook's own
   `data-cell="unbuilt"`, in the site's amber tone. */
code[data-unbuilt] {
  background: var(--amber-bg);
  color: var(--amber);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
pre[data-unbuilt] {
  border-color: var(--amber);
  background: var(--amber-bg);
}
pre[data-unbuilt]::before {
  content: 'Planned — not built yet';
  display: block;
  margin: -4px 0 12px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
}

footer {
  padding: 28px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

footer p {
  margin: 0 0 6px;
  max-width: none;
}

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

  .sidenav {
    position: sticky;
    z-index: 5;
    height: auto;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .site-sub,
  .site-note {
    display: none;
  }

  /* The cross-site link SURVIVES the narrow breakpoint where the sub-title and the note do not:
     it is navigation, and on an instance site it is the only route to the substrate's docs. */
  .site-cross {
    margin: 8px 0 0;
    padding-top: 0;
    border-top: 0;
  }

  .site-logo {
    width: 68px;
    margin: 0 0 8px;
  }

  .sidenav ul {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }
  .sidenav .nav-label {
    display: none;
  }

  .sidenav li + li {
    margin-top: 0;
  }

  .sidenav a {
    white-space: nowrap;
  }

  .timeline {
    margin-left: 0;
  }

  .wrap {
    width: min(100% - 32px, 940px);
  }

  main section {
    padding: 40px 0;
  }

  .grid-2,
  .grid-3,
  .flow,
  .flow[data-cols='3'] {
    grid-template-columns: 1fr;
  }

  .flow-step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .figure {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .sidenav,
  .page-toc,
  .chips {
    display: none;
  }

  .hero {
    padding: 24px 0;
    background: #ffffff;
    color: #000000;
  }

  .hero .accent,
  .eyebrow,
  .hero .sub {
    color: #000000;
  }

  main section {
    padding: 26px 0;
  }

  .card,
  .callout,
  .table-wrap,
  .flow,
  .figure,
  details.disclosure {
    box-shadow: none;
  }

  .figure,
  details.disclosure {
    break-inside: avoid;
  }

  .view-tabs {
    display: none;
  }

  .views .view-panel {
    display: block !important;
  }

  a {
    color: inherit;
  }
}

.hero .hero-title {
  max-width: 780px;
  margin: 0 0 16px;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.chapter-hero {
  border-top: 1px solid var(--line);
}

.chapter-hero + section,
.page-toc + section {
  border-top: 0;
}

/* Runnable code blocks (@anima/notebook): tokens follow the site palette; the cell chrome sits
   inside the arc's timeline, so undo the timeline's span rules where they would bleed in. */
:root {
  --nb-font-sans: var(--sans);
  --nb-font-mono: var(--mono);
  --nb-fg: var(--ink);
  --nb-fg-soft: var(--ink-soft);
  --nb-bg: var(--panel);
  --nb-bg-soft: #fbfbfa;
  --nb-line: var(--line);
  --nb-accent: var(--brand-violet);
  --nb-accent-bg: var(--brand-wash);
  --nb-warn: var(--amber);
  --nb-warn-bg: var(--amber-bg);
  --nb-error: var(--rose);
  --nb-error-bg: var(--rose-bg);
  --nb-radius: 12px;
}
nb-notebook,
nb-cell {
  max-width: 780px;
}
[data-notebook-header] nb-notebook {
  margin: 18px 0 8px;
}
.timeline nb-cell pre {
  max-width: none;
  margin: 0;
}
.timeline nb-cell .nb-value span,
.timeline nb-cell .nb-console span {
  font-size: inherit;
}
.timeline nb-cell .nb-head span,
.timeline nb-cell .nb-hint {
  font-size: 11px;
}
.timeline nb-cell .nb-status {
  font-size: 10.5px;
}

/* Draft-schemata event blocks (the projected page — render-schemata.mjs). Each event is a
   left-ruled block so 100+ of them keep a vertical rhythm; :target lights the rule up when an
   index chip or open-item link lands on it. */
.schema-event {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 2px solid var(--line);
  scroll-margin-top: 20px;
}
.schema-event:target {
  border-left-color: var(--brand-violet);
}
.schema-event h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}
.schema-event h3 code {
  font-size: 1rem;
}
.schema-event h3 .event-entity {
  color: var(--ink-soft);
  font-weight: 400;
}
.schema-event .event-marks {
  color: var(--ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.schema-event .table-wrap {
  margin-top: 12px;
}
.schema-event .event-note {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.schema-event .event-open {
  border-left: 3px solid var(--amber);
  padding-left: 12px;
  color: var(--ink);
}
.schema-legend {
  max-width: 780px;
  margin: 26px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Schema tables (columns and args): denser than the site's prose tables — the page carries 100+
   of them — with a lighter header row and union types allowed to wrap at their <wbr> breaks. */
.schema-table th,
.schema-table td {
  padding: 9px 14px;
  font-size: 0.9rem;
}
.schema-table th {
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.7rem;
}
.schema-table code {
  white-space: normal;
}

/* Entity chapter header: count chips, then the entity's whole event vocabulary as jump chips —
   the at-a-glance surface before the tables. */
.entity-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.entity-stats span {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.entity-stats span[data-tone='open'] {
  border-color: var(--amber);
  background: var(--amber-bg);
  color: var(--amber);
}
.event-index {
  max-width: 780px;
  margin: 14px 0 6px;
}
.event-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-index a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}
.event-index a:hover {
  border-color: var(--brand-violet);
  background: var(--brand-wash);
  color: var(--brand-violet);
}
.event-index a[data-open] {
  border-color: var(--amber);
  background: var(--amber-bg);
  color: var(--amber);
}

/* "What is still open", grouped per entity: one panel per entity instead of one long wall. */
.open-group {
  max-width: 780px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.open-group + .open-group {
  margin-top: 14px;
}
.open-group h3 {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}
.open-group h3 code {
  font-size: 1rem;
}
.open-group .open-count {
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 750;
}
.open-group ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.open-group li {
  padding-left: 14px;
  border-left: 3px solid var(--amber);
  font-size: 0.925rem;
}
.open-group li + li {
  margin-top: 12px;
}
.open-group li .open-member {
  color: var(--ink-soft);
  font-weight: 400;
}
.open-group li .open-why {
  color: var(--ink-soft);
}

/* Draft-schemata entity map (the derived top-level diagram — render-schemata.mjs) */
.map-figure {
  margin: 18px 0 0;
  padding: 22px 22px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.map-figure > figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.schema-map {
  display: block;
  width: 100%;
  height: auto;
}
.schema-map .map-node rect {
  fill: var(--canvas);
  stroke: var(--line-strong);
  stroke-width: 1;
}
.schema-map a:hover .map-node rect,
.schema-map a:focus-visible .map-node rect {
  stroke: var(--brand-violet);
  fill: var(--brand-wash);
}
.schema-map .map-node-name {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 650;
}
.schema-map .map-node-counts {
  fill: var(--ink-soft);
  font-family: var(--sans);
  font-size: 10px;
}
.schema-map .map-edge-column line,
.schema-map .map-edge-column path {
  stroke: var(--brand-violet);
  stroke-width: 1.5;
}
.schema-map .map-edge-arg line,
.schema-map .map-edge-arg path {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.schema-map .map-arrowhead-column {
  fill: var(--brand-violet);
}
.schema-map .map-arrowhead-arg {
  fill: var(--line-strong);
}
.schema-map .map-edge-label {
  fill: var(--ink-soft);
  font-family: var(--mono);
  font-size: 9.5px;
}
.schema-map .map-edge-column .map-edge-label {
  fill: var(--brand-violet);
}
.schema-map .map-self {
  fill: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
}

/* ADK site additions: the key box that powers the live cells. */
.adk-key-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  background: #ffffff;
}
.adk-key-label { font-weight: 700; font-size: 0.9rem; }
.adk-key-input {
  flex: 1 1 16rem;
  min-width: 12rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #c9c9c5;
  border-radius: 7px;
  font: inherit;
}
.adk-key-box button {
  padding: 0.45rem 0.9rem;
  border: 1px solid #c9c9c5;
  border-radius: 7px;
  background: #f5f5f2;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.adk-key-box button:hover { background: #ecece7; }
.adk-key-status { font-size: 0.85rem; color: #676767; }
.adk-key-status[data-present='yes'] { color: #116644; font-weight: 650; }
.adk-key-note { margin: 0 0 1.25rem; font-size: 0.85rem; color: #676767; }

/* Syntax highlighting, from @anima/notebook (see developers/highlight.mjs) — the same lexer,
   class names and palette the Quickstart's runnable cells are painted with. */
:where(:root) {
  --nb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nb-font-sans: system-ui, -apple-system, Segoe UI, sans-serif;
  --nb-fg: #1f1f1f;
  --nb-fg-soft: #676767;
  --nb-bg: #ffffff;
  --nb-bg-soft: #fbfbfa;
  --nb-line: #dededb;
  --nb-accent: #7136e8;
  --nb-accent-bg: #f4f0ff;
  --nb-ok: #0e7c66;
  --nb-ok-bg: #e6f4ef;
  --nb-warn: #b45309;
  --nb-warn-bg: #fef6e7;
  --nb-error: #be123c;
  --nb-error-bg: #fef0f3;
  --nb-radius: 12px;
  --nb-size: 12.5px;
  --nb-syn-comment: #9a9a93;
  --nb-syn-keyword: var(--nb-accent);
  --nb-syn-string: #0b5aa8;
  --nb-syn-number: var(--nb-ok);
  --nb-syn-type: #0b6f80;
  --nb-syn-function: #a1521a;
  --nb-syn-property: var(--nb-fg);
  --nb-syn-regexp: #a8317e;
  --nb-syn-punctuation: var(--nb-fg-soft);
  --nb-pop-bg: var(--nb-bg);
  --nb-pop-fg: var(--nb-fg);
  --nb-pop-sel: var(--nb-accent-bg);
}

/* Syntax highlighting (highlight.ts): comments read dimmer than the code they explain. The tokens
   are spans inside the code block, so they take the block's own type — a host page's rules for a
   bare span (a docs site styling spans inside a list, say) must not resize half of a line. */
pre .nb-tk, pre .nb-mark-error { font: inherit; letter-spacing: inherit; }
/* A marked run that is not also a token carries no colour of its own, so it takes the block's
   rather than a host rule's; one that IS a token keeps the token colour set below. */
pre .nb-mark-error:not(.nb-tk) { color: inherit; }
pre .nb-tk-comment { color: var(--nb-syn-comment); }
pre .nb-tk-keyword { color: var(--nb-syn-keyword); }
pre .nb-tk-string { color: var(--nb-syn-string); }
pre .nb-tk-number, pre .nb-tk-literal { color: var(--nb-syn-number); }
pre .nb-tk-type { color: var(--nb-syn-type); }
pre .nb-tk-function { color: var(--nb-syn-function); }
pre .nb-tk-property { color: var(--nb-syn-property); }
pre .nb-tk-regexp { color: var(--nb-syn-regexp); }
pre .nb-tk-punctuation, pre .nb-tk-operator { color: var(--nb-syn-punctuation); }
/* The type surface (checking.ts, intent/cells/spec.md §3). The underline takes the cell chrome's
   own --nb-error, so a page that has already said what an error looks like says it once; only the
   popovers needed tokens of their own; skipping ink off keeps the wave whole under a descender. */
pre .nb-mark-error { text-decoration: underline wavy var(--nb-error); text-decoration-skip-ink: none; }