:root {
  --unit: 24px;
  --bg: #111111;
  --ink: #ececec;
  --text: #c9c9c9;
  --soft: #b4b4b4;
  --mute: #9e9e9e;
  --line: #262626;
  --line-strong: #3a3a3a;
  --panel: #171717;
  --grid-minor: rgba(148, 166, 198, 0.10);
  --grid-major: rgba(148, 166, 198, 0.17);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
@supports (color: oklch(50% 0 0)) {
  :root {
    --bg: oklch(0.155 0 0);
    --ink: oklch(0.94 0 0);
    --text: oklch(0.845 0 0);
    --soft: oklch(0.78 0 0);
    --mute: oklch(0.705 0 0);
    --line: oklch(0.27 0 0);
    --line-strong: oklch(0.36 0 0);
    --panel: oklch(0.185 0 0);
    --grid-minor: oklch(0.75 0.04 245 / 0.10);
    --grid-major: oklch(0.75 0.04 245 / 0.17);
  }
}
* { box-sizing: border-box; }
html {
  background-color: #111111;
  background-color: var(--bg); /* the page ground lives here: body stays transparent so the grid layers below it show through */
  scrollbar-color: var(--line-strong) var(--bg);
  position: relative;
}
body {
  margin: 0;
  padding: 24px;
  color: #c9c9c9;
  color: var(--text);
  position: relative;
  z-index: 0; /* stacking context: body's own grid layers sit above html's, all of them below content */
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* --- Ambient grid ---------------------------------------------------------
   Four identical copies of the dot grid, each masked to a diagonal stripe set
   offset by a quarter wavelength, each fading a quarter period apart. Summing
   four quarter-phase pairs is the standing-wave decomposition of a travelling
   one, so brightness crosses the page as a wave. The masks never move and the
   dots never move: only opacity animates, which stays on the compositor. The
   four triangular masks sum to a constant 2, so a per-layer ceiling of 0.5
   reproduces the palette's own dot value at the crest. */
html::before,
html::after,
body::before,
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--grid-major) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--grid-minor) 1px, transparent 1px);
  background-size: 96px 96px, 24px 24px;
  background-position: -48px -48px, -12px -12px; /* dots sit on 24px grid intersections */
  opacity: 0.5;
}
/* Phase 0 of a 720px triangular stripe, then the same wave sampled a quarter,
   a half and three quarters of a wavelength along. */
html::before {
  -webkit-mask-image: repeating-linear-gradient(115deg, #000 0, transparent 360px, #000 720px);
  mask-image: repeating-linear-gradient(115deg, #000 0, transparent 360px, #000 720px);
}
html::after {
  -webkit-mask-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.5) 0, transparent 180px, #000 540px, rgba(0, 0, 0, 0.5) 720px);
  mask-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.5) 0, transparent 180px, #000 540px, rgba(0, 0, 0, 0.5) 720px);
}
body::before {
  -webkit-mask-image: repeating-linear-gradient(115deg, transparent 0, #000 360px, transparent 720px);
  mask-image: repeating-linear-gradient(115deg, transparent 0, #000 360px, transparent 720px);
}
body::after {
  -webkit-mask-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.5) 0, #000 180px, transparent 540px, rgba(0, 0, 0, 0.5) 720px);
  mask-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.5) 0, #000 180px, transparent 540px, rgba(0, 0, 0, 0.5) 720px);
}
@keyframes grid-swell {
  0%, 8% { opacity: 0.72; }
  54% { opacity: 0; }
  92%, 100% { opacity: 0.72; }
}
@media (prefers-reduced-motion: no-preference) {
  /* One shared 16s period; the negative delays start each layer a quarter of a
     cycle ahead, which is what turns four pulsing stripe sets into one crest
     moving along the 115deg axis. */
  html::before,
  html::after,
  body::before,
  body::after {
    animation: grid-swell 16s ease-in-out infinite;
  }
  html::after { animation-delay: -4s; }
  body::before { animation-delay: -8s; }
  body::after { animation-delay: -12s; }
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #ffffff; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sheet {
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;
  min-height: calc(100vh - 48px);
  min-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}
.top p { margin: 0; }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.brand { font: 600 18px/24px var(--mono); color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font: 500 13px/24px var(--mono); color: var(--mute); }
.breadcrumbs a { color: var(--soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb-separator { color: var(--mute); }
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 0 8px;
}

main { flex: 1 1 auto; }
.wrap { max-width: 1200px; margin: 0; padding: 0 24px; }

.hero { padding: 72px 0 0; }
h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 34px;
  line-height: 48px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lede { margin: 24px 0 0; font-size: 17px; line-height: 24px; color: var(--text); }

.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: var(--unit) 0 0;
  padding: calc(var(--unit) / 2) 0;
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
  font: 500 13px/24px var(--mono);
}
.guide-nav + .guide-nav { margin-top: 0; }
.guide-nav a { max-width: 100%; color: var(--soft); text-decoration: none; }
.guide-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.guide-nav a[aria-current="page"],
.guide-nav a.section-current {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.block {
  padding: 40px 0 64px;
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
  position: relative;
  scroll-margin-top: 24px;
}
.block::before, .block::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) center / 1px 100% no-repeat;
}
.block::before { top: -4px; left: -4px; }
.block::after { top: -4px; right: -4px; }

h2 {
  margin: 0 0 20px;
  font: 500 13px/24px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
h2 a { color: inherit; text-decoration: none; }
h2 a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

h3 {
  margin: 40px 0 12px;
  font: 600 16px/24px var(--mono);
  color: var(--ink);
}
h3:first-child { margin-top: 0; }

.content { max-width: 912px; }
.prose > p, .prose > ul, .prose > ol { margin: 0; max-width: 68ch; color: var(--soft); }
.prose > p + p, .prose > ul + p, .prose > p + ul, .prose > p + ol, .prose > ol + p { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--mute); }
#processing .prose > p,
#limits .prose > ul { max-width: 100%; }
strong { font-weight: 600; color: var(--ink); }
p, dd, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

code, kbd {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  overflow-wrap: anywhere;
}
pre {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow-x: auto;
  max-width: 100%;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--soft);
  white-space: pre;
}
.prose pre { max-width: 68ch; }

.tablewrap { overflow-x: auto; margin: 16px 0; max-width: 100%; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 14px;
}
caption {
  text-align: left;
  font: 600 15px/24px var(--mono);
  color: var(--ink);
  margin-bottom: 8px;
  caption-side: top;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--line);
}
th {
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
td:first-child, th:first-child { padding-left: 0; }
td code { white-space: nowrap; }
tr:last-child td { border-bottom: none; }

.note {
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--soft);
  background: var(--panel);
  max-width: 68ch;
  font-size: 14px;
  color: var(--soft);
}
.note strong { color: var(--ink); }
.note.warn { border-left-color: var(--ink); }

dl.fields { margin: 0; }
.field {
  padding: 16px 0;
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
.field:first-child { background-image: none; padding-top: 0; }
.field:last-child { padding-bottom: 0; }
.field dt { margin: 0; font: 600 14px/22px var(--mono); color: var(--ink); }
.field dt .tag { font: 500 11px/1.6 var(--mono); color: var(--mute); text-transform: none; margin-left: 8px; }
.field dd { margin: 4px 0 0; color: var(--soft); max-width: 66ch; }

.pagenav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
  padding-bottom: 24px;
  font: 500 13px/1.4 var(--mono);
}
.pagenav a { color: var(--soft); text-decoration: none; }
.pagenav a:hover { color: var(--ink); text-decoration: underline; }
.pagenav .to-prev::before { content: "<- "; color: var(--mute); }
.pagenav .to-next::after { content: " ->"; color: var(--mute); }
.pagenav .to-next { margin-left: auto; text-align: right; }

.guide-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  max-width: 960px;
  background: var(--line);
  border: 1px solid var(--line);
}
.guide-card {
  min-height: 192px;
  padding: 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.guide-card .eyebrow { margin: 0 0 24px; font: 500 11px/24px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: 0.12em; }
.guide-card h3 { margin: 0; }
.guide-card h3 a { color: var(--ink); text-decoration: none; }
.guide-card h3 a::after { content: " ->"; color: var(--mute); }
.guide-card h3 a:hover { text-decoration: underline; }
.guide-card p { margin: 8px 0 0; color: var(--soft); max-width: 44ch; }
.guide-card .card-meta { margin-top: auto; padding-top: 24px; font: 500 11px/24px var(--mono); color: var(--mute); }

.guide-cards.module-list {
  background: transparent;
  border: 0;
}
.module-list .guide-card {
  outline: 1px solid var(--line);
}

footer {
  padding: 24px;
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  font: 400 13px/24px var(--mono);
  color: var(--mute);
}
footer p { margin: 0; }
.links { display: inline-flex; align-items: center; gap: 16px; }
.links a { display: inline-flex; color: var(--mute); text-decoration: none; }
.links a:hover { color: var(--ink); }
.links svg { display: block; width: 20px; height: 20px; fill: currentColor; }

@media (min-width: 1200px) {
  .sec { display: grid; grid-template-columns: 192px minmax(0, 1fr); column-gap: 48px; }
  .sec h2 { position: sticky; top: 24px; margin: 0; }
}
@media (min-width: 600px) { h1 { font-size: 44px; line-height: 48px; } }
@media (max-width: 864px) {
  .configuration .tablewrap { overflow-x: visible; }
  .configuration table,
  .configuration thead,
  .configuration tbody { display: block; width: 100%; min-width: 0; }
  .configuration tr {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(64px, 1fr));
    border-bottom: 1px solid var(--line);
  }
  .configuration tr:has(> :nth-child(5)) {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(64px, 1fr));
  }
  .configuration th,
  .configuration td {
    min-width: 0;
    padding: 12px 12px 12px 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }
  .configuration thead tr { border-bottom-color: var(--line-strong); }
  .configuration thead th:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .configuration tbody td:last-child {
    grid-column: 1 / -1;
    padding: 0 0 24px;
    color: var(--soft);
  }
  .configuration tbody td:last-child::before {
    content: "Description";
    display: block;
    margin-bottom: 4px;
    font: 600 11px/24px var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .configuration td code { white-space: normal; }
  .configuration tbody tr:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .guide-cards {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .configuration table { line-height: 24px; }
  .configuration thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .configuration tbody tr,
  .configuration tbody tr:has(> :nth-child(5)) {
    display: block;
    padding: 24px 0;
  }
  .configuration tbody td,
  .configuration tbody td:last-child {
    display: block;
    position: relative;
    min-height: 24px;
    padding: 0 0 0 120px;
  }
  .configuration tbody td + td { margin-top: 12px; }
  .configuration tbody td::before,
  .configuration tbody td:last-child::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    margin: 0;
    font: 600 11px/24px var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .configuration tbody td:nth-child(1)::before { content: "Field"; }
  .configuration tbody td:nth-child(2)::before { content: "Type"; }
  .configuration tbody td:nth-child(3)::before { content: "Default"; }
  .configuration tbody tr:has(> :nth-child(5)) td:nth-child(3)::before { content: "Required"; }
  .configuration tbody tr:has(> :nth-child(5)) td:nth-child(4)::before { content: "Default"; }
  .configuration #top-level tbody td:nth-child(3)::before,
  .configuration #stream-registry tbody td:nth-child(3)::before { content: "Required"; }
  .configuration tbody td:last-child::before { content: "Description"; }
}
@media (max-width: 480px) {
  .configuration tbody td,
  .configuration tbody td:last-child { padding-left: 0; }
  .configuration tbody td::before,
  .configuration tbody td:last-child::before {
    position: static;
    width: auto;
    margin-bottom: 4px;
  }
}
@media (max-width: 720px) {
  .hero { padding: 48px 0 0; }
  .block { padding: 32px 0 48px; }
}
@media (hover: hover) {
  .field { transition: background-color 0.15s ease; }
}
@media (prefers-contrast: more) {
  :root {
    --text: #ececec;
    --soft: #e0e0e0;
    --mute: #c6c6c6;
    --line: #4a4a4a;
    --line-strong: #6e6e6e;
  }
}
@media screen and (min-resolution: 2dppx) {
  .top, .guide-nav, .block, .field, footer, th, td { background-size: 100% 0.5px; }
  .sheet { outline-width: 0.5px; }
}
@media print {
  :root {
    --bg: #ffffff; --ink: #111111; --text: #222222; --soft: #333333;
    --mute: #555555; --line: #cccccc; --line-strong: #999999; --panel: #f4f4f4;
  }
  body { background-image: none; padding: 0; }
  .sheet { outline: none; min-height: auto; }
  .block::before, .block::after { display: none; }
  .field, tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}