/* okb build inlines these imports in order into one stylesheet. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Generated by scripts/fonts.mjs from Fontsource. Do not edit. */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-ext-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/space-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/space-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/space-mono-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/space-mono-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/space-mono-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/space-mono-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* GitHub's markdown palette, light first. Components use only the semantic
   names below. */
:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --fg: #1f2328;
  --muted: #59636e;
  --border: #d1d9e0;
  --border-soft: #d1d9e0b3;
  --surface: #f6f8fa;
  --accent: #0969da;
  --accent-soft: #ddf4ff;
  --mark: #fff8c5;

  --ok: #1a7f37;
  --ok-bg: #dafbe1;
  --warn: #9a6700;
  --warn-bg: #fff8c5;
  --danger: #cf222e;
  --danger-bg: #ffebe9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #f0f6fc;
    --muted: #9198a1;
    --border: #3d444d;
    --border-soft: #3d444db3;
    --surface: #151b23;
    --accent: #4493f8;
    --accent-soft: #388bfd1a;
    --mark: #bb800926;

    --ok: #3fb950;
    --ok-bg: #2ea04326;
    --warn: #d29922;
    --warn-bg: #bb800926;
    --danger: #f85149;
    --danger-bg: #f851491a;
  }
}

/* Syntax highlighting, from GitHub's light and dark code colors. */
:root {
  --code-comment: #59636e;
  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-constant: #0550ae;
  --code-function: #6639ba;
  --code-type: #953800;
  --code-tag: #116329;
  --code-inserted: #116329;
  --code-inserted-bg: #dafbe1;
  --code-deleted: #82071e;
  --code-deleted-bg: #ffebe9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --code-comment: #9198a1;
    --code-keyword: #ff7b72;
    --code-string: #a5d6ff;
    --code-constant: #79c0ff;
    --code-function: #d2a8ff;
    --code-type: #ffa657;
    --code-tag: #7ee787;
    --code-inserted: #aff5b4;
    --code-inserted-bg: #033a16;
    --code-deleted: #ffdcd7;
    --code-deleted-bg: #67060c;
  }
}
:root {
  --font-body: "Instrument Sans Variable", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5rem;
  --size-2xl: 2rem;

  --line-tight: 1.25;
  --line-base: 1.6;

  --code-size: 0.85em;
  --measure: 72ch;
}
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius: 6px;
  --page-width: 1012px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
}
body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--line-base);
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-code);
}

h1,
h2,
h3 {
  text-wrap: balance;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* layer: icons */
.i-lucide-arrow-up-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h10v10M7 17L17 7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-book-open{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v16m8.001-2A2 2 0 0 0 22 17V5a2 2 0 0 0-1.999-2L16 3.002A5 5 0 0 0 12 5a5 5 0 0 0-4-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 1.999 2H8a5 5 0 0 1 4 2a5 5 0 0 1 4-2z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-corner-down-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m15 10l5 5l-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-file-text{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-files{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706zM5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-fingerprint{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4M14 13.12c0 2.38 0 6.38-1 8.88m4.29-.98c.12-.6.43-2.3.5-3.02M2 12a10 10 0 0 1 18-6M2 16h.01m19.79 0c.2-2 .131-5.354 0-6'/%3E%3Cpath d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2m2.31 12c.21-.66.45-1.32.57-2M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-flask-conical{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2M6.453 15h11.094M8.5 2h7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-folder-git-2{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 19a5 5 0 0 1-5-5v8'/%3E%3Cpath d='M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5'/%3E%3Ccircle cx='13' cy='12' r='2'/%3E%3Ccircle cx='20' cy='19' r='2'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-lightbulb{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-search{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.i-lucide-shapes{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='-0.125em' flex-shrink='0' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Ccircle cx='17.5' cy='17.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:-0.125em;flex-shrink:0;width:1em;height:1em;}
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);

  .site-header__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-3) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
  }

  .site-header__brand {
    font-family: var(--font-code);
    font-weight: 700;
    font-size: var(--size-lg);
    color: var(--fg);
  }

  .site-header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--size-sm);

    a {
      color: var(--fg);
    }
  }
}

.site-search {
  position: relative;
  margin-left: auto;
  flex: 1 1 12rem;
  max-width: 18rem;

  .site-search__icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    translate: 0 -50%;
    color: var(--muted);
    pointer-events: none;
  }

  .site-search__input {
    width: 100%;
    padding: var(--space-1) var(--space-3) var(--space-1) calc(var(--space-3) * 2 + 1em);
    font-size: var(--size-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
  }
}
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: var(--size-sm);

  .site-footer__version {
    font-family: var(--font-code);
    font-size: var(--size-xs);
  }

  .site-footer__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-6) var(--gutter);
  }
}

.site-main {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-12);
}
.preview-banner {
  padding: var(--space-2) var(--gutter);
  text-align: center;
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn);
}
/* Rendered Markdown, after GitHub's markdown-body. */
.prose {
  min-width: 0;
  word-wrap: break-word;

  > * + * {
    margin-top: var(--space-4);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: var(--space-6);
    font-weight: 600;
    line-height: var(--line-tight);
  }

  h1,
  h2 {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border-soft);
  }

  h1 { font-size: var(--size-2xl); }
  h2 { font-size: var(--size-xl); }
  h3 { font-size: var(--size-lg); }
  h4 { font-size: var(--size-base); }

  ul,
  ol {
    padding-left: 2em;
  }

  li + li {
    margin-top: var(--space-1);
  }

  blockquote {
    padding: 0 1em;
    color: var(--muted);
    border-left: 0.25em solid var(--border);
  }

  :not(pre) > code {
    padding: 0.2em 0.4em;
    font-size: var(--code-size);
    white-space: break-spaces;
    background: var(--surface);
    border-radius: var(--radius);
  }

  pre {
    padding: var(--space-4);
    overflow: auto;
    font-size: var(--code-size);
    line-height: 1.45;
    background: var(--surface);
    border-radius: var(--radius);

    code {
      padding: 0;
      background: none;
    }
  }

  table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow: auto;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  th,
  td {
    padding: 6px 13px;
    border: 1px solid var(--border);
  }

  th {
    font-weight: 600;
  }

  tr:nth-child(2n) {
    background: var(--surface);
  }

  hr {
    height: 0.25em;
    padding: 0;
    background: var(--border);
    border: 0;
  }

  img {
    border-radius: var(--radius);
  }

  /* Links to other notes are dashed so they read differently from web links. */
  a[href^="/"] {
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);

    &:hover {
      text-decoration: none;
      border-bottom-style: solid;
    }
  }

  .footnotes {
    font-size: var(--size-sm);
    color: var(--muted);
    border-top: 1px solid var(--border-soft);
    padding-top: var(--space-4);

    hr {
      display: none;
    }
  }
}
/* Chroma token classes, prefixed hl- (see HighlightPrefix in
   internal/site/render.go). The block itself is styled by .prose pre. */
.hl-chroma {
  color: var(--fg);

  .hl-c,
  .hl-ch,
  .hl-cm,
  .hl-c1,
  .hl-cs,
  .hl-cp,
  .hl-cpf {
    color: var(--code-comment);
    font-style: italic;
  }

  .hl-cp,
  .hl-cpf {
    font-style: normal;
  }

  .hl-k,
  .hl-kc,
  .hl-kd,
  .hl-kn,
  .hl-kp,
  .hl-kr,
  .hl-ow {
    color: var(--code-keyword);
  }

  .hl-s,
  .hl-sa,
  .hl-sb,
  .hl-sc,
  .hl-dl,
  .hl-sd,
  .hl-s2,
  .hl-se,
  .hl-sh,
  .hl-si,
  .hl-sx,
  .hl-sr,
  .hl-s1,
  .hl-ss {
    color: var(--code-string);
  }

  .hl-m,
  .hl-mb,
  .hl-mf,
  .hl-mh,
  .hl-mi,
  .hl-il,
  .hl-mo,
  .hl-no,
  .hl-bp,
  .hl-nv,
  .hl-vc,
  .hl-vg,
  .hl-vi,
  .hl-vm,
  .hl-na {
    color: var(--code-constant);
  }

  .hl-nf,
  .hl-fm,
  .hl-nd,
  .hl-gp {
    color: var(--code-function);
  }

  .hl-kt,
  .hl-nc,
  .hl-nb,
  .hl-ne,
  .hl-nn {
    color: var(--code-type);
  }

  .hl-nt {
    color: var(--code-tag);
  }

  .hl-gh,
  .hl-gu,
  .hl-gs {
    font-weight: 700;
  }

  .hl-ge {
    font-style: italic;
  }

  .hl-gi {
    color: var(--code-inserted);
    background: var(--code-inserted-bg);
  }

  .hl-gd {
    color: var(--code-deleted);
    background: var(--code-deleted-bg);
  }

  .hl-err {
    color: var(--danger);
  }
}
/* A note embedded with ![[note]]. It sits inside .prose, so its body inherits
   the Markdown styles; the frame only sets it apart. */
.embed {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);

  /* a. matches the specificity of the dashed internal-link rule in
     prose.css, which loads first, so this one wins. */
  a.embed__title {
    display: flex;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-soft);
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-sm);
    font-weight: 600;
  }

  .embed__body {
    min-width: 0;

    > :first-child {
      margin-top: 0;
    }

    > * + * {
      margin-top: var(--space-3);
    }

    /* Headings stay smaller than the page's own. */
    h1,
    h2 {
      font-size: var(--size-lg);
    }

    h3,
    h4 {
      font-size: var(--size-base);
    }
  }
}
.note-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: var(--space-8);
  align-items: start;

  @media (max-width: 52rem) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.note {
  min-width: 0;
  max-width: var(--measure);

  .note__header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
  }

  .note__title {
    font-size: var(--size-2xl);
    font-weight: 700;
    line-height: var(--line-tight);
  }

  .note__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--size-sm);
    color: var(--muted);
  }

  .note__tag {
    color: var(--muted);
    font-family: var(--font-code);
    font-size: var(--size-xs);
  }
}
.note-aside {
  display: grid;
  gap: var(--space-6);
  font-size: var(--size-sm);
  position: sticky;
  top: var(--space-4);

  @media (max-width: 52rem) {
    position: static;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
  }

  .note-aside__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .note-aside__id {
    font-family: var(--font-code);
    font-size: var(--size-xs);
    color: var(--muted);
    word-break: break-all;
  }

  .link-list,
  .source-list {
    display: grid;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .source-list {
    word-break: break-word;
  }

  .source-list__external {
    margin-left: 0.15em;
    font-size: var(--size-xs);
  }
}
.note-list {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;

  .note-list__item {
    display: grid;
    gap: 2px;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .note-list__title {
    font-weight: 600;
  }

  .note-list__meta {
    font-size: var(--size-xs);
    font-family: var(--font-code);
    color: var(--muted);
  }

  .note-list__excerpt {
    font-size: var(--size-sm);
    color: var(--muted);
    max-width: var(--measure);
  }
}
.pill {
  display: inline-block;
  padding: 0.05em 0.6em;
  font-family: var(--font-code);
  font-size: var(--size-xs);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 2em;

  &.pill--public {
    color: var(--ok);
    background: var(--ok-bg);
  }

  &.pill--private,
  &.pill--draft {
    color: var(--warn);
    background: var(--warn-bg);
  }

  &.pill--local-only {
    color: var(--danger);
    background: var(--danger-bg);
  }
}
.home {
  display: grid;
  gap: var(--space-8);

  .home__title {
    font-family: var(--font-code);
    font-size: var(--size-2xl);
  }

  .home__lede {
    margin-top: var(--space-2);
    max-width: var(--measure);
    color: var(--muted);
    font-size: var(--size-lg);
  }
}

.kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
}

.kind-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);

  &:hover {
    text-decoration: none;
    border-color: var(--accent);
  }

  .kind-card__name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
  }

  .kind-card__icon {
    color: var(--accent);
  }

  .kind-card__count {
    font-size: var(--size-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
}

.section-heading {
  padding-bottom: 0.3em;
  font-size: var(--size-xl);
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
}
.listing {
  display: grid;
  gap: var(--space-4);

  .listing__header {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
  }

  .listing__title {
    font-size: var(--size-2xl);
    line-height: var(--line-tight);
  }

  .listing__count,
  .listing__empty {
    color: var(--muted);
    font-size: var(--size-sm);
  }
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;

  .tag-cloud__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-code);
    font-size: var(--size-sm);
    border: 1px solid var(--border);
    border-radius: 2em;
  }

  .tag-cloud__count {
    color: var(--muted);
  }
}
/* Pagefind's UI, themed with the site tokens. */
.search-page {
  --pagefind-ui-font: var(--font-body);
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--fg);
  --pagefind-ui-background: var(--bg);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-tag: var(--surface);
  --pagefind-ui-border-radius: var(--radius);
  --pagefind-ui-scale: 0.9;

  mark {
    background: var(--mark);
    color: inherit;
  }

  /* Pagefind marks sub-results with a "⤷" glyph that the body font lacks, so it
     falls back to another font and sits off the baseline. A rule on the
     left marks the nesting instead. */
  .pagefind-ui__result-nested {
    margin-left: var(--space-1);
    border-left: 2px solid var(--border);
  }

}

/* Pagefind's own rule has four classes, so only an ID outranks it. */
#search .pagefind-ui__result-link::before {
  content: none;
}