/* Variant 1 — "Convex Signal": dark, brand-forward, soft surfaces and glow. */
:root {
  color-scheme: dark;
  --background: #0f0c13;
  --surface: #171320;
  --surface-raised: #1e1929;
  --border: rgb(255 255 255 / 9%);
  --border-strong: rgb(255 255 255 / 22%);
  --text: #f5f2fa;
  --muted: #a99fc0;
  --brand-red: #ee342f;
  --brand-yellow: #f3b01c;
  --brand-purple: #8d2676;
  --http: #f3b01c;
  --live: #4ade80;
  --failed: #ff6b78;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 34rem at 12% -8%, rgb(141 38 118 / 22%), transparent 68%),
    radial-gradient(50rem 30rem at 95% -12%, rgb(238 52 47 / 14%), transparent 65%),
    var(--background);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }

:root { --nav-height: 3.5rem; }

.top-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--nav-height);
  padding: 0 clamp(1rem, 5vw, 5rem);
  border-bottom: 1px solid var(--border);
  background: rgb(15 12 19 / 86%);
  backdrop-filter: blur(14px);
  transition: background-color 300ms ease, border-color 300ms ease;
}
/* On the home page the bar starts invisible; the hero carries the brand until
   the title scrolls out of view. */
body.home:not(.nav-solid) .top-nav {
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
}
/* On the home page the whole brand (icon + wordmark) and the verified pill
   wait for the hero title to scroll out of view before fading in together
   with the bar itself. Subpages have no hero, so their nav is solid from
   the start and this never applies. */
.top-nav .brand, .top-nav .verified-pill { transition: opacity 300ms ease; }
body.home:not(.nav-solid) .top-nav .brand,
body.home:not(.nav-solid) .top-nav .verified-pill {
  opacity: 0;
  pointer-events: none;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-icon { display: block; width: 26px; height: 26px; object-fit: contain; }
.verified-pill {
  padding: 0.28rem 0.7rem;
  border: 1px solid rgb(74 222 128 / 35%);
  border-radius: 999px;
  background: rgb(74 222 128 / 8%);
  color: var(--live);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}
.verified-pill[data-complete="false"] { border-color: var(--border-strong); background: rgb(255 255 255 / 5%); color: var(--muted); }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.nav-links a:hover { color: var(--brand-yellow); }

main > section, .graveyard { scroll-margin-top: 4.5rem; }

.page-header {
  padding: 3.5rem clamp(1rem, 5vw, 5rem) 2.25rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--brand-yellow);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  /* background-clip: text paints the gradient only inside this element's box,
     so any glyph ink outside the box is simply not drawn. A line-height below
     Inter's content area (~1.21em) pulls the last line's box up above the
     descenders, which clips the tails off g, y and j. The padding extends the
     paint area past them; the negative margin keeps the layout spacing. */
  margin: 0 0 -0.12em;
  padding-bottom: 0.12em;
  max-width: 100%;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
  overflow-wrap: break-word;
  background: linear-gradient(100deg, #fff 30%, #d9c7f2 70%, #b78ae0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Inherits the transparent colour so the h1 gradient paints through it; the
   underline is drawn in brand yellow because currentColor is transparent. */
.title-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(243 176 28 / 45%);
  text-decoration-thickness: 0.045em;
  text-underline-offset: 0.06em;
  transition: text-decoration-color 120ms ease;
}
.title-link:hover { text-decoration-color: var(--brand-yellow); }
.title-link:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 0.05em; border-radius: 0.05em; }

.tagline { margin: 1rem 0 0; color: var(--muted); font-size: 1.12rem; }
.tagline-language {
  color: var(--brand-yellow);
  text-decoration: none;
  border-bottom: 1px dashed rgb(243 176 28 / 45%);
  transition: border-color 120ms ease;
}
.tagline-language:hover { border-bottom-color: var(--brand-yellow); }

.hero-mark {
  display: block;
  height: clamp(4.5rem, 9vw, 7.5rem);
  width: auto;
  margin: 0 0 1.25rem;
}

.title-asterisk {
  padding: 0;
  margin-left: 0.05em;
  border: 0;
  background: transparent;
  color: var(--brand-yellow);
  font: inherit;
  font-size: 0.55em;
  vertical-align: super;
  cursor: pointer;
  transition: filter 120ms ease;
}
.title-asterisk:hover { filter: brightness(1.3); }
.title-asterisk:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; border-radius: 0.2em; }

main { padding: 0 clamp(1rem, 5vw, 5rem) 5rem; }

.controls {
  position: sticky;
  top: 4rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1.1rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: rgb(23 19 32 / 82%);
  backdrop-filter: blur(14px);
}
.controls label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.controls input, .controls select {
  min-height: 2.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.7rem;
  background: rgb(10 8 15 / 80%);
  color: var(--text);
  padding: 0.55rem 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.controls input { width: min(26rem, 65vw); }
.controls input:focus-visible, .controls select:focus-visible {
  outline: 2px solid var(--brand-purple);
  outline-offset: 1px;
}
.legend { display: flex; gap: 0.5rem; margin-left: auto; padding-bottom: 0.35rem; }

.language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.9rem;
}

.language-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 9.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: linear-gradient(160deg, var(--surface-raised), var(--surface) 65%);
  color: var(--text);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.language-card:hover, .language-card:focus-within {
  transform: translateY(-3px);
  border-color: rgb(141 38 118 / 70%);
  box-shadow: 0 12px 32px -14px rgb(141 38 118 / 55%), 0 2px 10px rgb(0 0 0 / 35%);
}
.language-card[data-status="failed"] { border-color: rgb(255 107 120 / 45%); }
.language-card[data-status="failed"]:hover { box-shadow: 0 12px 32px -14px rgb(255 107 120 / 45%); }

.language-card-open {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  width: 100%;
  padding: 1rem 1rem 0.5rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.language-card-open:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: -4px; border-radius: 1rem; }

.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; }
.logo { display: inline-flex; align-items: center; justify-content: center; }
.card-top .logo { width: 2.35rem; height: 2.35rem; }
.logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 45%)); }
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 0.65rem;
  background: linear-gradient(140deg, var(--brand-purple), var(--brand-red));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}
.card-top .monogram { width: 2.35rem; height: 2.35rem; }

.rank { color: rgb(255 255 255 / 30%); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.name { margin-top: auto; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; }
.state { color: var(--muted); font-size: 0.76rem; text-transform: capitalize; }
.state:empty { display: none; }
.language-card[data-status="failed"] .state { color: var(--failed); }
.badges, .dialog-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 1.25rem; }
.language-card > .badges { padding: 0 1rem 1rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  padding: 0.24rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font: 700 0.66rem/1 Inter, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.badge::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.badge:hover { filter: brightness(1.25); transform: translateY(-1px); }
.badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.badge.http { color: var(--http); border-color: rgb(243 176 28 / 40%); background: rgb(243 176 28 / 10%); }
.badge.live { color: var(--live); border-color: rgb(74 222 128 / 40%); background: rgb(74 222 128 / 10%); }

dialog {
  width: min(58rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--text);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 70%);
}
dialog::backdrop { background: rgb(8 5 14 / 72%); backdrop-filter: blur(6px); }
.dialog-close {
  position: sticky;
  top: 0;
  float: right;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.dialog-close:hover { border-color: var(--brand-yellow); }
.dialog-title { display: flex; align-items: center; gap: 1rem; }
.dialog-title .logo { width: 3.2rem; height: 3.2rem; flex: none; }
.dialog-title .monogram { font-size: 1.2rem; border-radius: 0.8rem; }
dialog h2, .language-panel h2 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.6rem); letter-spacing: -0.03em; }
dialog h3, .language-panel h3 { margin-top: 2rem; letter-spacing: -0.01em; }
dialog p, .language-panel p { color: var(--muted); }
dialog dl, .language-panel dl { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.6rem 1rem; margin-top: 1.5rem; }
dialog dt, .language-panel dt { color: var(--muted); }
dialog dd, .language-panel dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
pre { overflow: auto; padding: 1rem; border: 1px solid var(--border); border-radius: 0.75rem; background: #0a0812; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.example-code .shiki {
  overflow: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #0a0812 !important;
  font-size: 0.86rem;
  line-height: 1.6;
}
.example-code .shiki code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.test-list { padding: 0; list-style: none; font-family: ui-monospace, monospace; font-size: 0.86rem; }
.test-list li {
  margin: 0.4rem 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgb(255 255 255 / 4%);
}
.test-list li[data-status="pass"] { border-color: var(--live); }
.test-list li[data-status="fail"] { border-color: var(--failed); }

.capability-dialog { width: min(36rem, calc(100vw - 2rem)); }
.capability-dialog h2 { font-size: clamp(2rem, 8vw, 3.2rem); }
.capability-dialog h3 { margin: 1.6rem 0 0.6rem; }
.capability-summary { max-width: 56ch; font-size: 1.05rem; line-height: 1.6; }
.capability-requirements { display: grid; gap: 0.65rem; margin: 0; padding-left: 1.25rem; color: var(--text); }
.capability-requirements li { padding-left: 0.25rem; line-height: 1.45; }
.capability-cumulative {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1.05rem;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 0.6rem 0.6rem 0;
  background: rgb(255 255 255 / 5%);
}
.capability-dialog[data-capability="http"] .capability-cumulative { border-color: var(--http); }
.capability-dialog[data-capability="live"] .capability-cumulative { border-color: var(--live); }

/* ---- Content pages (graveyard, FAQ, numbers) ---- */

main.page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.5rem clamp(1rem, 4vw, 3rem) 4rem;
}
main.page h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 1rem;
}
.page-lead { max-width: 70ch; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.page-lead a { color: var(--brand-yellow); }
.nav-links a[aria-current="page"] { color: var(--text); }

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.9rem;
  margin-top: 1.25rem;
}
.number {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%));
}
.number strong {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--live);
  font-variant-numeric: tabular-nums;
}
.number span { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

.faq details {
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface);
  margin-top: 0.6rem;
}
.faq summary {
  padding: 0.9rem 1.15rem;
  font-weight: 600;
  cursor: pointer;
  list-style-position: inside;
}
.faq details[open] summary { color: var(--brand-yellow); }
.faq details p { margin: 0; padding: 0 1.15rem 1.05rem; max-width: 75ch; color: var(--muted); line-height: 1.6; }
.faq details a { color: var(--brand-yellow); }
.faq code { background: rgb(255 255 255 / 8%); padding: 0.1rem 0.35rem; border-radius: 0.3rem; font-size: 0.9em; }

.page-footer {
  margin-top: 5rem;
  padding: 3.5rem clamp(1rem, 5vw, 5rem) 2.5rem;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / 2%));
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(17rem, 1.5fr) repeat(3, minmax(9rem, 1fr));
  gap: 2.5rem 3rem;
}
.footer-brand { display: grid; gap: 1rem; align-content: start; }
.footer-mark { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.footer-blurb {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}
.footer-column { display: grid; gap: 0.6rem; align-content: start; }
.footer-column h2 {
  margin: 0 0 0.25rem;
  color: rgb(255 255 255 / 42%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-column a {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 120ms ease;
}
.footer-column a:hover { color: var(--brand-yellow); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.footer-base p { margin: 0; color: rgb(255 255 255 / 38%); font-size: 0.85rem; }
.footer-base a { color: rgb(255 255 255 / 60%); text-decoration: none; }
.footer-base a:hover { color: var(--brand-yellow); }

/* ---- Try it yourself ---- */

.try-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 1.5rem;
}
.try-strip > code {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  background: rgb(10 8 15 / 80%);
  color: var(--live);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}
.try-note { color: var(--muted); font-size: 0.85rem; }
.try-note code { color: var(--text); font-size: 0.95em; }

.copy-button {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 6%);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.copy-button:hover { border-color: var(--brand-yellow); background: rgb(243 176 28 / 10%); }

.try-it {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgb(74 222 128 / 30%);
  border-radius: 0.9rem;
  background: rgb(74 222 128 / 5%);
}
.try-it h3 { margin: 0 0 0.5rem; }
.try-it p { margin: 0 0 0.75rem; }
.try-commands {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: #0a0812;
  font-size: 0.84rem;
  line-height: 1.7;
  overflow-x: auto;
}
.try-actions { margin: 0.75rem 0 0; }

/* ---- Language detail panel ---- */

.language-panel {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  z-index: 9;
  width: min(46rem, 100vw);
  overflow-y: auto;
  padding: 0 clamp(1.25rem, 3vw, 2.25rem) 3rem;
  border-left: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: -30px 0 60px -30px rgb(0 0 0 / 60%);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 300ms;
}
body.panel-open .language-panel {
  transform: none;
  visibility: visible;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.panel-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 0.9rem 0 0.4rem;
  background: linear-gradient(180deg, var(--surface) 70%, transparent);
}
.language-panel .dialog-close { position: static; float: none; }
@media (min-width: 1200px) {
  .language-panel { width: min(46rem, 42vw); }
  main, .page-header, .page-footer { transition: margin-right 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  body.panel-open main,
  body.panel-open .page-header,
  body.panel-open .page-footer { margin-right: min(46rem, 42vw); }
}

/* ---- Dialog additions ---- */

.dialog-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.1rem 0 0; }
.dialog-links a { color: var(--brand-yellow); font-weight: 600; text-decoration: none; }
.dialog-links a:hover { text-decoration: underline; }

.evidence-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
.evidence-column {
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 3%);
}
.evidence-column h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.evidence-verdict { margin: 0.5rem 0 0.75rem; font-weight: 600; color: var(--text); }
.evidence-column .test-list { margin: 0; }

.readme-loading { color: var(--muted); font-style: italic; }

/* ---- Rendered repository markdown (READMEs, the graveyard) ---- */

.rendered-markdown { max-width: 80ch; line-height: 1.65; }
.rendered-markdown h2 { margin: 2rem 0 0.6rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.rendered-markdown h3 { margin: 1.6rem 0 0.5rem; font-size: 1.15rem; }
.rendered-markdown h4 { margin: 1.2rem 0 0.4rem; }
.rendered-markdown p { color: #cfc8e2; }
.rendered-markdown li { color: #cfc8e2; margin: 0.3rem 0; }
.rendered-markdown a { color: var(--brand-yellow); }
.rendered-markdown img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.rendered-markdown code {
  background: rgb(255 255 255 / 8%);
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.88em;
}
.rendered-markdown pre code { background: transparent; padding: 0; font-size: inherit; }
.rendered-markdown .shiki {
  overflow: auto;
  margin: 0.75rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #0a0812 !important;
  font-size: 0.86rem;
  line-height: 1.6;
}
.rendered-markdown blockquote {
  margin: 1rem 0;
  padding: 0.2rem 1.1rem;
  border-left: 3px solid var(--brand-purple);
  background: rgb(141 38 118 / 8%);
  border-radius: 0 0.5rem 0.5rem 0;
}
.rendered-markdown hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.rendered-markdown table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.rendered-markdown th, .rendered-markdown td {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.rendered-markdown th { background: rgb(255 255 255 / 5%); }
.rendered-markdown td { color: #cfc8e2; }
.rendered-markdown td:first-child { white-space: nowrap; font-weight: 600; color: var(--text); }

@media (max-width: 700px) {
  .top-nav { flex-wrap: wrap; gap: 0.6rem 1rem; }
  .verified-pill { order: 3; }
  .nav-links { width: 100%; margin-left: 0; }
  .page-header { padding-top: 2rem; }
  .controls { position: static; }
  .legend { width: 100%; margin-left: 0; }
  dialog dl, .language-panel dl { grid-template-columns: 1fr; }
  .evidence-columns { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-base { margin-top: 2rem; }
}