@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-variable.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Doto"; src: url("fonts/doto-latin-variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-latin-regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-latin-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-variable.woff2") format("woff2"); font-style: normal; font-weight: 100 800; font-display: swap; }

@layer reset, tokens, base, layout, components, states, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(html, body, h1, h2, h3, h4, p, blockquote, pre, figure, ol, ul) { margin: 0; }
  :where(ol, ul) { padding: 0; }
  :where(button, summary) { font: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --paper: oklch(100% 0 0);
    --canvas: oklch(97% 0 0);
    --soft: oklch(94% 0 0);
    --ink: oklch(21% 0 0);
    --muted: oklch(50% 0 0);
    --rule: oklch(90% 0 0);
    --rule-strong: oklch(70% 0 0);
    --accent: oklch(55% 0.21 25);
    --accent-soft: oklch(97% 0.025 25);
    --terminal: oklch(22% 0 0);
    --terminal-ink: oklch(88% 0 0);
    --evidence: oklch(94% 0.035 255);
    --font-reading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-machine: "Space Mono", ui-monospace, monospace;
    --font-code: "JetBrains Mono", ui-monospace, monospace;
    --font-display: "Doto", "Space Mono", ui-monospace, monospace;
    --text-small: clamp(.8125rem, calc(.7917rem + .0926vw), .875rem);
    --text-label: clamp(.875rem, calc(.8333rem + .1852vw), 1rem);
    --text-lead: clamp(1.125rem, calc(1.0833rem + .1852vw), 1.25rem);
    --text-h3: clamp(1.25rem, calc(1.1667rem + .3704vw), 1.5rem);
    --text-h2: clamp(1.75rem, calc(1.5833rem + .7407vw), 2.25rem);
    --text-h1: clamp(2.5rem, calc(2rem + 2.2222vw), 4rem);
    --space-page: clamp(1rem, calc(.6667rem + 1.4815vw), 2rem);
    --space-section: clamp(2rem, calc(1.3333rem + 2.963vw), 4rem);
    --tree-width: clamp(14rem, calc(12.6667rem + 1.6667vw), 16rem);
    --outline-width: clamp(12rem, calc(10.6667rem + 1.6667vw), 14rem);
    --topbar-height: 4rem;
    --shell-max: 120rem;
    --radius: .25rem;
  }
}

@layer base {
  html {
    min-width: 20rem;
    overflow-x: clip;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-reading);
    font-kerning: normal;
    font-synthesis: none;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body { min-width: 20rem; background: var(--canvas); font-size: clamp(1rem, calc(.9583rem + .1852vw), 1.125rem); line-height: 1.6; }
  :where(h1, h2, h3) { line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
  :where(p, li, dd) { text-wrap: pretty; }
  :where(a) { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
  :where(a:hover) { color: var(--accent); }
  :where(a, summary):focus-visible { outline: .1875rem solid var(--accent); outline-offset: .1875rem; }
  :where(code, pre) { font-family: var(--font-code); font-variant-ligatures: none; }
  pre { max-width: 100%; overflow: auto; }
  img, svg { max-width: 100%; height: auto; }
}

@layer layout {
  .site-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: max(var(--space-page), calc((100% - var(--shell-max)) / 2));
    border-block-end: 1px solid var(--rule);
    background: color-mix(in oklch, var(--canvas) 94%, transparent);
  }
  .documentation-shell {
    width: min(100%, var(--shell-max));
    min-height: calc(100dvh - var(--topbar-height));
    margin-inline: auto;
    display: grid;
    grid-template-areas: "tree main outline";
    grid-template-columns: var(--tree-width) minmax(0, 1fr) var(--outline-width);
    align-items: start;
  }
  .page-tree { grid-area: tree; position: sticky; inset-block-start: var(--topbar-height); max-height: calc(100dvh - var(--topbar-height)); overflow: auto; }
  main { grid-area: main; min-width: 0; min-height: calc(100dvh - var(--topbar-height)); border-inline: 1px solid var(--rule); background: var(--paper); }
  .page-outline { grid-area: outline; position: sticky; inset-block-start: var(--topbar-height); max-height: calc(100dvh - var(--topbar-height)); overflow: auto; }
  .reference-page { container-type: inline-size; }
  .prose { container-type: inline-size; padding: var(--space-section) var(--space-page); }
}

@layer components {
  .skip-link { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: var(--paper); transform: translateY(-200%); }
  .skip-link:focus { transform: translateY(0); }
  .site-brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 550; letter-spacing: .04em; text-decoration: none; }
  .site-topbar > span { color: var(--muted); font-family: var(--font-machine); font-size: var(--text-small); }
  .mobile-page-tree { display: none; }
  .page-tree nav > ol { list-style: none; }
  .page-tree nav > ol > li { border-block-end: 1px solid var(--rule); }
  .page-tree ol ol { list-style: none; padding-block-end: .5rem; }
  .page-tree a { min-height: 2.75rem; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .5rem; align-items: center; padding: .5rem .75rem; color: var(--muted); text-decoration: none; }
  .page-tree ol ol a { min-height: 2.5rem; padding-inline-start: 1rem; }
  .page-tree a span { color: var(--accent); font-family: var(--font-machine); font-size: var(--text-small); }
  .page-tree a strong { font-size: var(--text-small); font-weight: 500; line-height: 1.25; }
  .page-tree a[aria-current="page"] { background: var(--accent-soft); box-shadow: inset .1875rem 0 var(--accent); color: var(--ink); }
  .page-metadata { min-height: 3.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .75rem var(--space-page); border-block-end: 1px solid var(--rule); color: var(--muted); font-family: var(--font-machine); font-size: var(--text-small); }
  .page-metadata span:first-child { color: var(--accent); }
  .page-metadata a { margin-inline-start: auto; }
  .prose > :where(p, ul, ol, blockquote) { max-width: 68ch; }
  .prose h1 { max-width: 18ch; margin-block-end: var(--space-section); font-size: var(--text-h1); font-weight: 500; }
  .reference-page[data-page="1"] .prose h1 { max-width: 11ch; font-family: var(--font-display); font-weight: 500; letter-spacing: .02em; }
  .prose h2 { margin-block: var(--space-section) 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--rule); font-size: var(--text-h2); font-weight: 500; }
  .prose h3 { margin-block: 2rem .75rem; font-size: var(--text-h3); font-weight: 550; }
  .prose :where(p, ul, ol, pre, blockquote, table) + :where(p, ul, ol, pre, blockquote, table) { margin-block-start: 1rem; }
  .prose :where(ul, ol) { padding-inline-start: 1.25rem; }
  .prose li { padding-block: .25rem; }
  .prose blockquote { margin-block: 1.5rem; padding: 1rem; border-inline-start: .1875rem solid var(--accent); background: var(--evidence); }
  .prose blockquote p { max-width: 64ch; }
  .prose p:has(> img[src*="assets/diagrams/"]) {
    max-width: none;
    margin-block: 2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    background: oklch(20% 0.01 190);
  }
  .prose p:has(> img[src*="assets/diagrams/"]) > img {
    width: 100%;
    min-width: 45rem;
    display: block;
  }
  .prose :not(pre) > code { padding: .1em .3em; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--canvas); font-size: .9em; overflow-wrap: anywhere; }
  .prose pre { margin-block: 1.5rem; padding: 1.25rem; background: var(--terminal); color: var(--terminal-ink); font-size: var(--text-small); line-height: 1.55; white-space: pre; }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--text-label); }
  .prose :where(th, td) { padding: .75rem; border: 1px solid var(--rule); text-align: start; vertical-align: top; }
  .prose th { background: var(--soft); font-family: var(--font-machine); font-size: var(--text-small); }
  .page-outline { padding: 1.25rem 1rem; color: var(--muted); }
  .page-outline > strong { color: var(--ink); font-family: var(--font-machine); font-size: var(--text-label); }
  .page-outline ol { margin-block-start: 1rem; list-style: none; }
  .page-outline li { border-block-start: 1px solid var(--rule); }
  .page-outline li[data-depth="3"] { padding-inline-start: .75rem; }
  .page-outline a { display: block; padding-block: .6rem; font-size: var(--text-small); text-decoration: none; }
  .page-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--rule); }
  .page-pager > div { min-width: 0; display: grid; grid-template-columns: subgrid; grid-column: span 1; padding: 1.25rem var(--space-page); }
  .page-pager > div:last-child { border-inline-start: 1px solid var(--rule); text-align: end; }
  .page-pager a { font-family: var(--font-machine); font-size: var(--text-small); }
  .print-cover, .print-page-metadata { display: none; }
  @container (inline-size < 42rem) {
    .prose table { display: block; overflow-x: auto; font-size: var(--text-small); }
    .page-pager { grid-template-columns: 1fr; }
    .page-pager > div { grid-column: 1; }
    .page-pager > div:last-child { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  }
}

@layer states {
  @media (width < 80em) {
    .documentation-shell { grid-template-areas: "tree main"; grid-template-columns: var(--tree-width) minmax(0, 1fr); }
    .page-outline { display: none; }
  }
  @media (orientation: portrait), (width <= 64em) {
    .site-topbar { position: relative; }
    .mobile-page-tree { position: sticky; inset-block-start: 0; z-index: 40; display: block; border-block-end: 1px solid var(--rule); background: var(--paper); }
    .mobile-page-tree summary { min-height: 3.25rem; display: flex; align-items: center; padding-inline: var(--space-page); cursor: pointer; font-family: var(--font-machine); font-size: var(--text-label); }
    .mobile-page-tree nav { max-height: 70dvh; overflow: auto; border-block-start: 1px solid var(--rule); }
    .mobile-page-tree ol { list-style: none; }
    .mobile-page-tree ol ol { padding-inline-start: 1rem; }
    .mobile-page-tree a { min-height: 2.75rem; display: grid; grid-template-columns: 3rem 1fr; gap: .5rem; align-items: center; padding: .5rem var(--space-page); border-block-end: 1px solid var(--rule); text-decoration: none; }
    .mobile-page-tree a span { color: var(--accent); font-family: var(--font-machine); font-size: var(--text-small); }
    .mobile-page-tree a strong { font-size: var(--text-small); font-weight: 500; }
    .mobile-page-tree a[aria-current="page"] { background: var(--accent-soft); }
    .documentation-shell { min-height: 0; grid-template-areas: "main"; grid-template-columns: minmax(0, 1fr); }
    .page-tree { display: none; }
    main { min-height: 0; border-inline: 0; }
  }
  @media (width <= 40em) {
    .site-topbar > span { display: none; }
    .page-metadata a { width: 100%; margin-inline-start: 0; }
    .prose { padding-block: 2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; transition-duration: .001ms; animation-duration: .001ms; animation-iteration-count: 1; }
  }
  @media (forced-colors: active) {
    :where(a, summary):focus-visible { outline-color: Highlight; }
    .page-tree a[aria-current="page"] { border-inline-start: .1875rem solid Highlight; }
  }
}

@layer print {
  @media print {
    @page { size: A4; margin: 15mm 14mm 17mm; }
    html, body { background: var(--paper); font-size: .875rem; }
    .site-topbar, .mobile-page-tree, .page-tree, .page-outline, .skip-link { display: none; }
    .documentation-shell { width: 100%; display: block; }
    main { border: 0; }
    .page-metadata { padding-inline: 0; }
    .prose { padding: 1rem 0; }
    .prose h1 { font-size: 2.5rem; }
    .prose h2 { break-after: avoid; font-size: 1.5rem; }
    .prose :where(pre, table, blockquote, figure) { break-inside: avoid; }
    .prose p:has(> img[src*="assets/diagrams/"]) { overflow: visible; background: transparent; break-inside: avoid; }
    .prose p:has(> img[src*="assets/diagrams/"]) > img { min-width: 0; }
    .page-pager { display: none; }
    .print-edition main { min-height: 0; }
    .print-edition .print-cover { min-height: 250mm; display: grid; align-content: center; gap: 2rem; break-after: page; }
    .print-cover > span, .print-page-metadata { font-family: var(--font-machine); }
    .print-cover h1 { max-width: 12ch; font-family: var(--font-display); font-size: 3.75rem; font-weight: 500; line-height: 1; }
    .print-cover p { max-width: 42ch; font-size: 1.125rem; }
    .print-page { break-before: page; }
    .print-page-metadata { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: .75rem; border-block-end: 1px solid var(--rule); color: var(--muted); font-size: .75rem; }
  }
}