:root {
  --bg: #ffffff;
  --fg: #111213;
  --muted: #5b6069;
  --link: #7a5bff;
  --border: #e7e9ee;
  --border-strong: #d8dbe3;
  --fg-strong: #111213;
  --font-serif: ui-serif, Georgia, "Source Serif 4", "Times New Roman", serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  --body-font: var(--font-sans);
  --header-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c0f;
    --fg: #e6e7e9;
    --muted: #9aa0aa;
    --link: #9f8aff;
    --border: #1b1e25;
    --border-strong: #2a2f36;
    --fg-strong: #ffffff;
  }
}
/* Serif preference toggle (default is sans) */
:root[data-font="serif"] { --body-font: var(--font-serif); }
* { box-sizing: border-box; }
html, body { height: 100%; }
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
  line-height: 1.75;
  font-size: 20px;
}
.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; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 960px) { body { font-size: 21px; } }
@media (min-width: 1280px) { body { font-size: 22px; } }
.small { font-size: 0.95rem; color: var(--muted); }
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:.25rem; z-index:1000; }
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); backdrop-filter: saturate(120%) blur(6px); box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 6%, transparent); padding-top: env(safe-area-inset-top); padding-top: constant(safe-area-inset-top); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); }
.site-header .brand { font-weight: 800; font-family: var(--font-sans); text-decoration: none; color: var(--fg); letter-spacing: .2px; }
/* Compact header search */
.site-search { position: relative; flex: 0 1 420px; display: none; }
.hs__input { width: 100%; height: 36px; padding: .25rem .65rem; border-radius: .5rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--fg) 4%, var(--bg)); color: var(--fg); font-size: .95rem; outline: none; }
.hs__input::placeholder { color: color-mix(in oklab, var(--fg) 80%, var(--bg)); }
.hs__input:focus { border-color: color-mix(in oklab, var(--link) 45%, var(--bg)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--link) 30%, transparent); background: color-mix(in oklab, var(--fg) 6%, var(--bg)); }
.hs__dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--bg); border: 1px solid var(--border); border-radius: .6rem; box-shadow: 0 8px 28px color-mix(in oklab, var(--fg) 10%, transparent); padding: .35rem; max-height: 60vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.hs__row { display: flex; align-items: center; gap: .45rem; padding: .45rem .5rem; border-radius: .45rem; text-decoration: none; color: var(--fg); font-weight: 600; font-size: .95rem; }
.hs__row:hover { background: color-mix(in oklab, var(--fg) 5%, var(--bg)); }
.hs__row:focus { outline: 2px solid color-mix(in oklab, var(--link) 45%, transparent); outline-offset: 2px; background: color-mix(in oklab, var(--fg) 6%, var(--bg)); }
.hs__badge { display: inline-block; padding: .05rem .4rem; border: 1px solid var(--border); border-radius: .4rem; font-size: .72rem; color: var(--muted); }
.hs__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs__empty { padding: .5rem; color: var(--muted); font-size: .9rem; }
@media (min-width: 720px) { .site-search { display: block; } }
/* Mobile: search toggle button and overlay */
.site-search-btn { display: inline-flex; align-items: center; gap: .4rem; appearance: none; border: 1px solid var(--border); background: color-mix(in oklab, var(--fg) 4%, var(--bg)); color: var(--fg); padding: .25rem .6rem; border-radius: 999px; cursor: pointer; font-size: .9rem; }
.site-search-btn:hover { border-color: color-mix(in oklab, var(--link) 40%, var(--bg)); }
@media (min-width: 720px) { .site-search-btn { display: none; } }
@media (max-width: 719px) {
  .site-header.search-open .site-search { display: block; position: fixed; left: 0; right: 0; top: var(--header-h); padding: .5rem 1rem; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 95; }
  .site-header.search-open .hs__dropdown { position: static; margin-top: .4rem; max-height: calc(60vh - var(--header-h)); }
  .hs__input { height: 40px; font-size: 1rem; }
}
.fab-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--fg) 4%, var(--bg)); color: var(--fg); box-shadow: 0 6px 24px color-mix(in oklab, var(--fg) 8%, transparent); font-family: var(--font-sans); cursor: pointer; }
.fab-toggle:hover { box-shadow: 0 8px 30px color-mix(in oklab, var(--fg) 10%, transparent); }
.site-footer { border-top: none; margin-top: 4rem; padding: 1.5rem 0; }

main { padding: calc(var(--header-h) + 1.5rem + env(safe-area-inset-top)) 0 3rem; }
article.prose { max-width: 72ch; }
article.prose h1, article.prose h2, article.prose h3 { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; line-height: 1.25; margin-top: 2rem; }
article.prose h1 { font-size: 2.6rem; }
article.prose h2 { font-size: 2rem; }
article.prose h3 { font-size: 1.45rem; }
article.prose p { margin: 1rem 0; }
article.prose a { color: var(--link); text-decoration: none; }
article.prose a:hover { text-decoration: underline; }
article.prose blockquote { border-left: 3px solid var(--border); margin: 1rem 0; padding: 0.75rem 1rem; color: var(--muted); background: color-mix(in oklab, var(--fg) 4%, var(--bg)); border-radius: .25rem; }
article.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
article.prose th, article.prose td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
article.prose thead th { position: sticky; top: var(--header-h); background: var(--bg); }
article.prose tbody tr:nth-child(odd) { background: color-mix(in oklab, var(--fg) 4%, var(--bg)); }
article.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.95em; }
article.prose pre { background: color-mix(in oklab, var(--fg) 4%, var(--bg)); padding: 0.75rem; overflow: auto; }
ul.inline-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.25rem 1rem; list-style: none; padding: 0; }
ul.inline-list li { margin: 0; }
ul.inline-list a { text-decoration: none; }

/* Citations: subtle, accessible superscripts */
sup.mb-cite {
  vertical-align: super;
  font-size: 0.75em;
  line-height: 1;
  font-weight: 600;
  color: color-mix(in oklab, var(--fg) 70%, var(--bg));
  margin-left: 0.15rem;
}
/* If citation is later wrapped in a link, keep good focus/hover affordance */
a sup.mb-cite { text-decoration: none; }
a:focus-visible sup.mb-cite,
a:hover sup.mb-cite {
  color: var(--fg-strong);
  background: color-mix(in oklab, var(--fg) 8%, var(--bg));
  border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--link) 30%, transparent);
}

/* Anchor jump highlight: emphasize target and account for sticky header */
article.prose :is(h1,h2,h3,h4,h5,h6,section)[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
article.prose [id]:target { animation: target-flash 1800ms ease-out 1; }
@keyframes target-flash {
  0% { background-color: color-mix(in oklab, var(--link) 22%, transparent); }
  35% { background-color: color-mix(in oklab, var(--link) 14%, transparent); }
  100% { background-color: transparent; }
}
/* Stronger emphasis specifically for References section if it is the target */
article.prose section#references:target,
article.prose #references:target ~ .refs,
article.prose .refs:target {
  animation: refs-ring 1800ms ease-out 1;
  border-radius: 6px;
}
@keyframes refs-ring {
  0% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--link) 35%, transparent); }
  35% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--link) 28%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Metadata header */
.meta { margin: 0 0 1.25rem; }
.meta__title { margin: 0 0 .5rem; font-size: 2.25rem; }
.meta__row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; color: var(--muted); }
.meta__aliases { display:flex; flex-wrap:wrap; gap:.25rem; margin:.25rem 0 .5rem; }
.meta__tags { display:flex; flex-wrap:wrap; gap:.25rem; }
.meta__kv { display:inline-flex; align-items:center; gap:.35rem; }
.icon { width: 1em; height: 1em; display:inline-block; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border:1px solid var(--border); border-radius: 999px; font-size:.85rem; color: var(--muted); background: color-mix(in oklab, var(--fg) 3%, var(--bg)); }
.chip:hover { border-color: color-mix(in oklab, var(--link) 40%, var(--border)); color: var(--fg); }
.chip--alt { background: color-mix(in oklab, var(--fg) 2%, var(--bg)); }
.chip--badge { background: color-mix(in oklab, var(--link) 15%, var(--bg)); color: var(--fg); border-color: color-mix(in oklab, var(--link) 40%, var(--border)); font-weight: 600; }
.chip--code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.chip--more { opacity:.8; }

/* Reference list */
.refs { margin-top: 2rem; }
.refs__list { columns: 1; gap: 0; }

/* Details grid */
.details { display: grid; grid-template-columns: 1fr; gap: .5rem 1rem; margin:.75rem 0 1rem; }
.kv { display: grid; grid-template-columns: 12rem 1fr; gap: .5rem; align-items: start; }
.kv .k { color: var(--muted); font-size:.9rem; }
.kv .v { display: flex; flex-wrap: wrap; gap:.25rem .5rem; }
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; } }

/* Search page tweaks */
#search { margin-top: .75rem; }
.pagefind-ui__form { box-shadow: 0 0 0 1px var(--border); border-radius: .75rem; }
.pagefind-ui__input { font-size: 1.25rem; padding: .9rem 1rem; }
.pagefind-ui__input::placeholder { color: color-mix(in oklab, var(--fg) 80%, var(--bg)); opacity: 1; }

/* Pagefind result readability (better contrast, spacing) */
.pagefind-ui__message { display: none; }
.pagefind-ui__results-area { margin-top: .12rem; }
.pagefind-ui__results { border-top: none !important; }
/* Minimal, dense list with grey dividers; no alternating backgrounds */
.pagefind-ui__result { padding: 0; margin: 0; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--fg) 14%, var(--bg)); background: transparent; box-shadow: none; }
.pagefind-ui__result:hover { background: transparent; }
.pagefind-ui__result-title { margin: 0; }
.pagefind-ui__result-title a { display: block; padding: .10rem .20rem; color: var(--fg-strong) !important; text-decoration: none; font-weight: 650; font-size: 1.12rem; line-height: 1.18; background: transparent !important; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagefind-ui__result-title a:hover { text-decoration: underline; }
.pagefind-ui__result-excerpt, .pagefind-ui__result-url { display: none !important; }
.pagefind-ui__form:focus-within { box-shadow: 0 0 0 2px color-mix(in oklab, var(--link) 35%, transparent); }


/* Print styles for handouts */
@media print {
  .site-header, .site-footer, nav, .nav, a[href^="/"][href$="search"], a[href^="/"][href*="tags"] { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  article.prose { max-width: none; }
  table { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* Diagram Tables (Wikipedia-style, border-only) */
.dt {
  width: 100%;
  max-width: 980px;
  margin: 1.5rem auto;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: 0.92rem;
  color: #ffffff;
  background: transparent;
}
.dt td {
  padding: 0;
  border: none;
  background: transparent !important;
  vertical-align: middle;
}
.dt tr, .dt tr:nth-child(odd), .dt tr:nth-child(even) { background: transparent !important; }
.dt td.dt-cell {
  width: 1em;
  min-width: 1em;
  padding: 0;
  border: none;
}
.dt td.dt-cell.b { border-bottom: 1px solid currentColor; }
.dt td.dt-cell.r { border-right: 1px solid currentColor; }

.dt td.dt-cell,
.dt tr.dt-row-tail td.dt-cell,
.dt tr.dt-row-tail-buffer td.dt-cell,
.dt tr.dt-row-tee td.dt-cell,
.dt tr.dt-row-drop td.dt-cell,
.dt tr.dt-row-drop-buffer td.dt-cell {
  height: 0.55rem;
}
.dt tr.dt-row-box td {
  height: auto;
  padding: 0;
}
.dt .box {
  border: 2px solid currentColor;
  background: rgba(18, 22, 28, 0.96);
  padding: 0.85rem 1rem;
  border-radius: 2px;
  line-height: 1.25;
  font-weight: 600;
  max-width: 26em;
  margin: 0 auto;
}

.dt-figure {
  overflow-x: auto;
  margin: 1.5rem auto;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: rgba(42, 49, 60, 0.4);
  background: color-mix(in oklab, var(--bg) 85%, rgba(42, 49, 60, 0.8) 15%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
  scrollbar-gutter: stable both-edges;
}

.dt-figure table.dt {
  min-width: min(48rem, 100%);
  width: 100%;
}

.dt-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .dt {
    font-size: 0.85rem;
  }
  .dt .box {
    padding: 0.75rem 0.85rem;
    line-height: 1.2;
    font-weight: 600;
  }
}

@media (prefers-color-scheme: light) {
  .dt { color: #111317; }
  .dt .box { background: color-mix(in oklab, var(--bg) 88%, #dbe1ea 12%); }
  .dt-figure {
    background: rgba(235, 240, 248, 0.85);
    background: color-mix(in oklab, var(--bg) 92%, rgba(235, 240, 248, 0.9) 8%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
  }
}