:root {
  --bg: #0e1014;
  --bg-elev: #171a21;
  --fg: #d8dce1;
  --fg-dim: #8a93a3;
  --accent: #7dd3fc;
  --accent-warm: #fbbf24;
  --danger: #f87171;
  --border: #242832;
  --mono: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --sans: -apple-system, "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
}

header {
  border-bottom: 1px solid var(--border);
  padding: 1rem 2rem;
  display: flex;
  gap: 2rem;
  align-items: baseline;
  flex-wrap: wrap;
}
header h1 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}
header h1 a { color: var(--fg); text-decoration: none; }
header nav {
  display: flex;
  gap: 1.2rem;
  font-size: 0.9rem;
}
header nav a {
  color: var(--fg-dim);
  text-decoration: none;
}
header nav a:hover, header nav a.active { color: var(--accent); }
header nav a.nav-gh {
  margin-left: auto;
  font-size: 0.82rem;
  opacity: 0.7;
}
header nav { flex: 1; align-items: center; }

/* Grouped dropdown items — hover/focus opens a panel listing the
   group's children. Clicking the trigger label itself navigates to
   the group's landing page. */
.nav-group { position: relative; display: inline-block; }
.nav-group .nav-group-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.nav-group.active > .nav-group-trigger { color: var(--accent); }
.nav-group .nav-caret {
  font-size: 0.7em;
  opacity: 0.5;
}
.nav-group .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 170px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0;
  /* No margin-top — a gap breaks the :hover chain between trigger and
     dropdown. Offset the visual position via translateY inside a
     wrapper that keeps an invisible bridge so the pointer can cross
     without the dropdown dismissing. */
  margin-top: 0;
  display: none;
  flex-direction: column;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.nav-group .nav-dropdown::before {
  /* Invisible bridge between trigger and dropdown so moving the
     pointer down doesn't exit the :hover region. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.6rem;
  height: 0.6rem;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown { display: flex; }
/* Slight visual detach without losing hover chain. */
.nav-group .nav-dropdown { transform: translateY(0.4rem); }
.nav-group .nav-dropdown a {
  display: block;
  padding: 0.3rem 0.9rem;
  font-size: 0.88rem;
  color: var(--fg-dim);
  text-decoration: none;
  white-space: nowrap;
}
.nav-group .nav-dropdown a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.nav-group .nav-dropdown a.active { color: var(--accent); }

main {
  /* Bumped from 900px — most pages on this site embed an editor or a
     side-by-side stage+source layout. The old width forced the editor
     into ~700px usable, which wraps a lot of cljrs around column 65.
     1240px gives the editor enough room to comfortably breathe while
     still keeping prose lines readable on standard text-only pages. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem 2rem;
}
/* Optional cap for prose-heavy pages (Overview, Syntax, Roadmap) that
   benefit from a narrower measure. Add class="prose" to <main>. */
main.prose { max-width: 820px; }
main h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}
main h3 {
  font-size: 1.15rem;
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  color: var(--accent);
}
main p { color: var(--fg); }
main a { color: var(--accent); }
main code {
  font-family: var(--mono);
  background: var(--bg-elev);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.88em;
}
main pre {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.88rem;
}
main pre code { background: none; padding: 0; }

/* Syntax highlighting tokens — emitted by _highlight.js. */
.tok-comment { color: var(--fg-dim); font-style: italic; }
.tok-string  { color: #f6c177; }        /* amber */
.tok-number  { color: #a5b4fc; }        /* soft indigo */
.tok-keyword { color: #86efac; }        /* green — cljrs keywords + wgsl types */
.tok-special { color: #c084fc; font-weight: 500; }  /* purple — special forms, attributes */
.tok-builtin { color: #7dd3fc; }        /* accent cyan for wgsl math builtins */
.tok-ident   { color: var(--fg); }

main table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.92rem;
}
main th, main td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.8rem;
  text-align: left;
}
main th { background: var(--bg-elev); font-weight: 600; }
main .ok { color: #86efac; }
main .partial { color: var(--accent-warm); }
main .missing { color: var(--danger); }

footer {
  color: var(--fg-dim);
  text-align: center;
  padding: 2rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* REPL. When the highlight overlay is attached, the textarea is wrapped
   in a .repl-hl-wrap containing an absolutely-positioned <pre> (the
   colored rendering) and the textarea itself (transparent text, visible
   caret). Both elements share identical font metrics so the caret lines
   up with the painted glyphs.
   Until the overlay JS runs, textareas fall back to normal rendering. */
.repl {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 1rem 0;
  background: var(--bg-elev);
}
.repl textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0;
  padding: 0.8rem;
  border: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  resize: vertical;
  outline: none;
}
.repl .repl-hl-wrap {
  position: relative;
  min-height: 120px;
}
.repl .repl-hl-wrap .repl-hl {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0.8rem;
  border: none;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  color: var(--fg);
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}
.repl .repl-hl-wrap textarea {
  position: relative;
  color: transparent;
  caret-color: var(--accent);
  background: transparent;
}
.repl .repl-hl-wrap textarea::selection {
  background: rgba(125, 211, 252, 0.25);
  color: transparent;
}
.repl-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-top: 1px solid var(--border);
  background: #12151b;
}
.repl-toolbar button {
  background: var(--accent);
  color: #0b1015;
  border: none;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}
.repl-toolbar button:hover { opacity: 0.85; }
/* Inline runnable code block on the library docs pages. Same vibe as
   .repl above — dark editor surface, button at the bottom — but the
   library pages instantiate them outside of an explicit `<div class=
   "repl">` wrapper, so we re-style them directly. */
.run-example {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 1rem 0;
  background: var(--bg-elev);
}
.run-example textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0;
  padding: 0.8rem;
  border: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.45;
  tab-size: 2;
  white-space: pre;
  resize: vertical;
  outline: none;
}
.run-example .repl-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 0.4rem 0.8rem;
  border-top: 1px solid var(--border);
  background: #12151b;
}
.run-example .repl-toolbar button {
  background: var(--accent);
  color: #0b1015;
  border: none; padding: 0.3rem 0.9rem;
  font-size: 0.85rem; border-radius: 4px;
  cursor: pointer; font-weight: 500;
}
.run-example .repl-out {
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.5rem 0.8rem;
  background: #0b0d14;
  color: var(--fg-dim);
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  min-height: 1.4em;
}
.run-example .repl-out.err { color: var(--danger); }
/* Same overlay-stacking trick the .repl block uses: when wireRepl
   wraps the textarea in .repl-hl-wrap, hide the textarea text so the
   highlighted <pre> is the only visible glyph layer. Without this,
   both layers paint and the user sees doubled code. */
.run-example .repl-hl-wrap {
  position: relative;
  min-height: 120px;
}
.run-example .repl-hl-wrap .repl-hl {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0.8rem;
  border: none;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.45;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  color: var(--fg);
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}
.run-example .repl-hl-wrap textarea {
  position: relative;
  color: transparent;
  caret-color: var(--accent);
  background: transparent;
}
.run-example .repl-hl-wrap textarea::selection {
  background: rgba(125, 211, 252, 0.25);
  color: transparent;
}

/* Library docs sidebar layout. Used by lib-*.html via mountLibrarySidebar. */
.lib-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem;
}
.lib-layout main {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}
.lib-sidebar {
  flex: 0 0 180px;
  position: sticky;
  top: 1rem;
  font-size: 0.88rem;
  border-right: 1px solid var(--border);
  padding-right: 1rem;
}
.lib-sidebar h4 {
  margin: 0 0 0.4rem 0; font-size: 0.7rem;
  text-transform: uppercase; color: var(--fg-dim);
  letter-spacing: 0.06em;
}
.lib-sidebar ul { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.lib-sidebar li { padding: 0.18rem 0; }
.lib-sidebar a { color: var(--fg-dim); text-decoration: none; }
.lib-sidebar a:hover { color: var(--fg); }
.lib-sidebar a.active {
  color: var(--accent); font-weight: 500;
}
@media (max-width: 720px) {
  .lib-layout { flex-direction: column; }
  .lib-sidebar { position: static; border-right: none; padding-right: 0;
    border-bottom: 1px solid var(--border); padding-bottom: 0.6rem;
    width: 100%;
  }
}

.repl-out {
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
  white-space: pre-wrap;
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  min-height: 1.6em;
}
.repl-out.err { color: var(--danger); }

.demo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.demo-gallery figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev);
}
.demo-gallery video, .demo-gallery img {
  width: 100%;
  display: block;
}
.demo-gallery figcaption {
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  color: var(--fg-dim);
}

/* --- bench page (matmul benchmark) --- */
.bench-hint {
  font-size: 0.85rem;
  color: var(--fg-dim);
}
.bench-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.75rem 0;
  padding: 0.5rem;
  background: #0b0d14;
  border: 1px solid var(--border, #333);
  border-radius: 4px;
}
.bench-toolbar button {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.9rem;
}
.bench-toolbar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bench-label {
  font-size: 0.8rem;
  color: var(--fg-dim);
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.bench-check {
  font-size: 0.8rem;
  color: var(--fg-dim);
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.bench-meter {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--fg-dim);
  margin-left: auto;
}
.bench-note {
  font-size: 0.78rem;
  color: var(--fg-dim);
  font-style: italic;
  margin: 0.4rem 0 0.8rem 0;
}
.bench-table-wrap {
  overflow-x: auto;
}
.bench-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
}
.bench-table th, .bench-table td {
  border: 1px solid var(--border, #333);
  padding: 0.4rem 0.6rem;
  text-align: right;
}
.bench-table th:first-child, .bench-table td:first-child {
  text-align: left;
}
.bench-table thead th {
  background: #1a1d26;
  color: #cdd;
  font-weight: 600;
}
.bench-sub {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--fg-dim);
}
.bench-empty {
  text-align: center !important;
  color: var(--fg-dim);
  padding: 1.2rem !important;
}
.bench-ref {
  color: #ffd966;
}
.bench-chart {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  background: #0b0d14;
  border: 1px solid var(--border, #333);
  border-radius: 4px;
}
.bench-refs {
  font-size: 0.85rem;
  color: var(--fg-dim);
}
.bench-refs li {
  margin-bottom: 0.3rem;
}