@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/podium/assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/podium/assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/podium/assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/podium/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/podium/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/podium/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/podium/assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/podium/assets/fonts/anton-latin-400-normal.woff2") format("woff2");
}

/*
 * Design tokens for the Podium site.
 *
 * Values come from site/design/README.md. Components reference these variables
 * and never inline a hex value, so a token change lands in one place.
 *
 * Theme resolution order:
 *   1. the light values below are the default
 *   2. prefers-color-scheme: dark switches an unconfigured visitor to dark
 *   3. a data-theme attribute on the root element wins over both, which is what
 *      the toggle sets and persists
 *
 * The accent rule: --accent is a surface colour carrying dark text, or text on
 * the dark ground. It never sets small text on a light background, which is why
 * the light theme carries a separate --link tone.
 */

:root {
  /* Surfaces */
  --page: #fbf9f5;
  --surface: #ffffff;
  --surface-2: #fdfdf8;
  --surface-3: #f5f3e9;
  --raised: var(--surface);

  /* Text */
  --ink: #14130f;
  --body: #33322a;
  --secondary: #43413a;
  --meta: #63604f;
  --faint: #6f6c5e;
  --code-text: #33322a;

  /* Lines */
  --border: #d9d5c6;
  --border-2: #e4e0d2;
  --border-3: #ddd9c9;
  --chip: #eae7d9;

  /* Accent */
  --accent: #ffa424;
  --accent-deep: #f2861a;
  --accent-tint: #ffe0b8;
  --accent-wash: #fff3e2;
  --accent-strip: #ffeeda;
  --callout-border: #f5cd9b;
  --link: #a8480a;
  --link-hover: #7d3507;
  --on-accent: #14130f;

  /* Composites */
  --nav-bg: linear-gradient(180deg, #ffffff, #fdfdf8);
  --hero-wash: radial-gradient(900px 420px at 88% 8%, rgba(255, 164, 36, 0.15), transparent 62%);
  /* The same wash, sized for a 390pt viewport. */
  --hero-wash-mobile: radial-gradient(520px 300px at 88% 2%, rgba(255, 164, 36, 0.16), transparent 62%);
  --hero-base: linear-gradient(180deg, #fdfdf8, #fbf9f5 70%);
  --terminal-glow: linear-gradient(140deg, rgba(255, 164, 36, 0.5), rgba(255, 164, 36, 0) 58%);
  --terminal-glow-blur: 10px;
  --terminal-glow-inset: -14px;
  --btn-primary-bg: linear-gradient(180deg, #232219, #14130f);
  --btn-primary-text: #fbf9f5;
  --btn-primary-shadow: 0 6px 16px -8px rgba(20, 19, 15, 0.6);
  --terminal-shadow: 0 24px 50px -30px rgba(20, 19, 15, 0.5);
  --tab-strip: linear-gradient(180deg, #ffffff, #f5f3e9);

  /* Type */
  --font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-wordmark: Anton, "Space Grotesk", system-ui, sans-serif;

  /* Radii */
  --r-card: 13px;
  --r-panel: 11px;
  --r-control: 9px;
  --r-chip: 5px;
  --r-kbd: 4px;
  --r-pill: 100px;
  --rail: 3px;

  /* Layout */
  --landing-width: 1280px;
  --docs-width: 1340px;
  --measure: 780px;
  --gutter-landing: 40px;
  --gutter-docs-bar: 22px;
  --gutter-article: 46px;
  --nav-h-landing: 66px;
  --nav-h-docs: 58px;
  --sidebar-w: 252px;
  --toc-w: 214px;

  --transition: 140ms ease-out;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #10131c;
    --surface: #171b28;
    --surface-2: #1e2434;
    --surface-3: #1b2030;
    --raised: #1b2030;

    --ink: #eaeef7;
    --body: #c4cbdb;
    --secondary: #c4cbdb;
    --meta: #9aa3ba;
    --faint: #7a8399;
    --code-text: #d9dfec;

    --border: #2b3145;
    --border-2: #3a4159;
    --border-3: #333a50;
    --chip: #212739;

    --accent: #ffa424;
    --accent-deep: #f2861a;
    --accent-soft: #ffcf7a;
    --accent-tint: #ffa424;
    --accent-wash: rgba(255, 164, 36, 0.12);
    --accent-strip: rgba(255, 164, 36, 0.08);
    --callout-border: #4a3a22;
    --link: #ffa424;
    --link-hover: #ffcf7a;
    --on-accent: #14130f;

    --nav-bg: #141824;
    --hero-wash: radial-gradient(820px 400px at 86% 4%, rgba(255, 164, 36, 0.07), transparent 60%);
    --hero-wash-mobile: radial-gradient(520px 300px at 88% 2%, rgba(255, 164, 36, 0.08), transparent 60%);
    --hero-base: linear-gradient(180deg, #141824, #10131c 65%);
    --terminal-glow: linear-gradient(140deg, rgba(255, 164, 36, 0.2), rgba(255, 164, 36, 0) 60%);
    --terminal-glow-blur: 14px;
    --terminal-glow-inset: -16px;
    --btn-primary-bg: linear-gradient(180deg, #ffb84d, #f59410);
    --btn-primary-text: #14130f;
    --btn-primary-shadow: 0 8px 22px -12px rgba(255, 164, 36, 0.6);
    --terminal-shadow: 0 26px 54px -32px rgba(0, 0, 0, 0.9);
    --tab-strip: linear-gradient(180deg, #1e2434, #1b2030);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --page: #10131c;
  --surface: #171b28;
  --surface-2: #1e2434;
  --surface-3: #1b2030;
  --raised: #1b2030;

  --ink: #eaeef7;
  --body: #c4cbdb;
  --secondary: #c4cbdb;
  --meta: #9aa3ba;
  --faint: #7a8399;
  --code-text: #d9dfec;

  --border: #2b3145;
  --border-2: #3a4159;
  --border-3: #333a50;
  --chip: #212739;

  --accent: #ffa424;
  --accent-deep: #f2861a;
  --accent-soft: #ffcf7a;
  --accent-tint: #ffa424;
  --accent-wash: rgba(255, 164, 36, 0.12);
  --accent-strip: rgba(255, 164, 36, 0.08);
  --callout-border: #4a3a22;
  --link: #ffa424;
  --link-hover: #ffcf7a;
  --on-accent: #14130f;

  --nav-bg: #141824;
  --hero-wash: radial-gradient(820px 400px at 86% 4%, rgba(255, 164, 36, 0.07), transparent 60%);
  --hero-wash-mobile: radial-gradient(520px 300px at 88% 2%, rgba(255, 164, 36, 0.08), transparent 60%);
  --hero-base: linear-gradient(180deg, #141824, #10131c 65%);
  --terminal-glow: linear-gradient(140deg, rgba(255, 164, 36, 0.2), rgba(255, 164, 36, 0) 60%);
  --terminal-glow-blur: 14px;
  --terminal-glow-inset: -16px;
  --btn-primary-bg: linear-gradient(180deg, #ffb84d, #f59410);
  --btn-primary-text: #14130f;
  --btn-primary-shadow: 0 8px 22px -12px rgba(255, 164, 36, 0.6);
  --terminal-shadow: 0 26px 54px -32px rgba(0, 0, 0, 0.9);
  --tab-strip: linear-gradient(180deg, #1e2434, #1b2030);

  color-scheme: dark;
}


/*
 * Document-level styles for the Podium site: the reset, the page ground, the
 * shared focus ring, the skip link, and the prose rules that render markdown.
 *
 * Every colour comes from a token in tokens.css. The variable declared here
 * covers a value the token file does not carry: a brand bar that darkens the
 * accent on light paper.
 */

:root {
  /* Vertical accent bar: the logo centre column and the callout rule. */
  --brand-bar: var(--accent-deep);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-bar: var(--accent);
  }
}

:root[data-theme="dark"] {
  --brand-bar: var(--accent);
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h-docs) + 20px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
}

img,
svg,
video {
  max-width: 100%;
}

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

a:hover {
  color: var(--link-hover);
}

button {
  font: inherit;
  color: inherit;
}

input,
kbd {
  font: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------- focus --- */

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ utilities -- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link is the first focusable element on every page. It sits
   off-screen until it takes focus. */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 60;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 12px;
  color: var(--ink);
}

/* The client router shows this bar while a page it fetched is still on its way.
   It is created by the script, so a page read without JavaScript never carries
   it. The sweep runs only when the reader has not asked for reduced motion; the
   bar itself is visible either way. */
.route-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 70;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}

.route-progress[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .route-progress {
    animation: route-progress 1.4s ease-out infinite;
  }
}

@keyframes route-progress {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ----------------------------------------------------------------- prose - */

.prose {
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

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

.prose > :last-child {
  margin-bottom: 0;
}

.prose p {
  margin: 0 0 14px;
  text-wrap: pretty;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: var(--ink);
  scroll-margin-top: calc(var(--nav-h-docs) + 20px);
}

.prose h2 {
  margin: 34px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.prose h3 {
  margin: 28px 0 10px;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.prose h4 {
  margin: 22px 0 8px;
  font-size: 15.5px;
  font-weight: 600;
}

.prose h5,
.prose h6 {
  margin: 20px 0 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}

.prose :is(h1, h2, h3, h4, h5, h6) a {
  color: inherit;
  text-decoration: none;
}

.prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--link-hover);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin: 5px 0;
}

.prose li::marker {
  color: var(--meta);
}

.prose li > ul,
.prose li > ol {
  margin: 5px 0 0;
}

.prose dt {
  font-weight: 600;
  color: var(--ink);
}

.prose dd {
  margin: 0 0 10px 18px;
}

.prose :not(pre) > code {
  padding: 1px 5px;
  border-radius: var(--r-kbd);
  background: var(--chip);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 500;
}

.prose pre {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  overflow-x: auto;
}

.prose pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.prose kbd {
  padding: 2px 6px;
  border: 1px solid var(--border-3);
  border-radius: var(--r-kbd);
  background: var(--surface-2);
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* Blockquotes carry the release-status callout treatment: tinted panel, tinted
   border, and a rounded accent bar at the left. */
.prose blockquote {
  position: relative;
  margin: 0 0 24px;
  padding: 14px 16px 14px 32px;
  border: 1px solid var(--callout-border);
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
}

.prose blockquote::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 16px;
  width: 4px;
  border-radius: 2px;
  background: var(--brand-bar);
}

.prose blockquote > :last-child {
  margin-bottom: 0;
}

.prose table {
  display: block;
  min-width: 100%;
  width: max-content;
  max-width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: 14px;
  overflow-x: auto;
}

.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
}

.prose figure {
  margin: 0 0 20px;
}

.prose figcaption {
  margin-top: 6px;
  color: var(--meta);
  font-size: 13px;
}

.prose hr {
  margin: 28px 0;
}

/* A separator immediately before a heading would draw a second rule, because
   the heading carries its own. Keep one line and the heading's spacing. */
.prose hr + h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}


/* ---------------------------------------------------------------- logotype */

/* Both variants are in the page; the one that matches the theme is shown. The
 * hidden copy is display:none, so it is not announced either. */

.lockup {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}

.lockup-art {
  display: none;
  height: 100%;
  width: auto;
}

.lockup-art-light {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lockup-art-light {
    display: none;
  }

  :root:not([data-theme="light"]) .lockup-art-dark {
    display: block;
  }
}

:root[data-theme="dark"] .lockup-art-light {
  display: none;
}

:root[data-theme="dark"] .lockup-art-dark {
  display: block;
}

:root[data-theme="light"] .lockup-art-light {
  display: block;
}

:root[data-theme="light"] .lockup-art-dark {
  display: none;
}


/* Components the markdown pipeline renders: callouts, code blocks, tabs,
 * diagrams, and action links. */

/* ------------------------------------------------------------- callouts */

.callout {
  margin: 22px 0;
  padding: 14px 18px 14px 16px;
  border: 1px solid var(--callout-border);
  border-left: var(--rail) solid var(--accent);
  border-radius: var(--r-panel);
  background: var(--accent-wash);
}

.callout-label {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}

.callout-body > :first-child {
  margin-top: 0;
}

.callout-body > :last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------- code blocks */

.code-block {
  margin: 22px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
}

.code-block-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 7px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--tab-strip);
}

.code-block-language,
.code-block-copy {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.code-block-language {
  color: var(--meta);
  font-weight: 600;
}

.code-block-copy {
  border: 1px solid var(--border-3);
  border-radius: var(--r-kbd);
  padding: 3px 9px;
  background: transparent;
  color: var(--meta);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.code-block-copy:hover {
  color: var(--ink);
  border-color: var(--meta);
}

.code-block-copy[data-copied="true"] {
  color: var(--link);
  border-color: var(--accent);
}

.code-block pre {
  margin: 0;
  padding: 15px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.8;
  background: var(--surface);
  color: var(--code-text);
}

/* Shiki writes both themes as CSS variables in one pass, so switching the
 * theme repaints without re-highlighting and no highlighter is shipped. */
.code-block pre code span {
  color: var(--shiki-light);
}

:root[data-theme="dark"] .code-block pre code span {
  color: var(--shiki-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .code-block pre code span {
    color: var(--shiki-dark);
  }
}

.code-block pre code {
  display: block;
}

.code-block .line {
  display: inline-block;
  width: 100%;
}

.code-block .line-highlighted {
  background: var(--accent-wash);
  box-shadow: inset var(--rail) 0 0 0 var(--accent);
}

/* ------------------------------------------------------------------ tabs */

.tabs {
  margin: 22px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.tabs-strip {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  background: var(--tab-strip);
  border-bottom: 1px solid var(--border);
}

.tabs-tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--r-kbd) var(--r-kbd) 0 0;
  padding: 7px 14px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--meta);
  cursor: pointer;
}

.tabs-tab-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 2px 0 0 var(--accent);
}

.tabs-panel {
  padding: 4px 16px;
}

/* Before the strip becomes interactive every panel is visible, which is what a
 * reader without JavaScript is left with. */
.tabs[data-mounted="false"] .tabs-strip {
  display: none;
}

/* -------------------------------------------------------------- diagrams */

/*
 * A diagram is the SVG written into the page, wrapped in a labelled plate.
 *
 * The drawing reads the same tokens the page does, so the plate only has to
 * supply the surface it sits on and the inset that keeps the drawing off the
 * border. Both themes are handled by the tokens themselves.
 *
 * The img rule covers a diagram that is still an image: the fallback a leaf
 * island shows before it mounts, and any other picture in the prose.
 */
.diagram {
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow-x: auto;
}

.diagram > svg {
  display: block;
  width: 100%;
  height: auto;
}

.prose img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 0 20px;
}

img.diagram {
  padding: 14px;
}

/* --------------------------------------------------------------- islands */

.island {
  margin: 22px 0;
}

/* --------------------------------------------------------- action links */

.action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0;
}

.action-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-control);
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

.action-link-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
}

.action-link-outline {
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--surface);
}

.action-link-outline:hover {
  border-color: var(--meta);
}


/*
 * The documentation shell: top bar, navigation tree, article column, the
 * on-this-page rail, the footer, and the 404 page. Class names are prefixed
 * `d-`; the rendered markdown body is styled by the `.prose` rules in base.css.
 *
 * Colours come from tokens.css. The variables below cover pairs the token file
 * does not carry as a single name, where the light and the dark mockup pick
 * different tokens for the same element.
 */

:root {
  --sidebar-bg: var(--surface);
  --nav-hairline: var(--border-2);
  --nav-text: var(--secondary);
  --control-border: var(--border);
  --chip-border: var(--border-3);
  --toggle-dot: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sidebar-bg: var(--nav-bg);
    --nav-hairline: var(--border);
    --nav-text: var(--meta);
    --control-border: var(--border-2);
    --chip-border: var(--border-2);
    --toggle-dot: var(--accent);
  }
}

:root[data-theme="dark"] {
  --sidebar-bg: var(--nav-bg);
  --nav-hairline: var(--border);
  --nav-text: var(--meta);
  --control-border: var(--border-2);
  --chip-border: var(--border-2);
  --toggle-dot: var(--accent);
}

/* --------------------------------------------------------------- top bar - */

.d-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
}

.d-topbar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--nav-h-docs);
  max-width: var(--docs-width);
  margin: 0 auto;
  padding: 0 var(--gutter-docs-bar);
}

.d-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--r-kbd);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.d-menu svg {
  fill: currentColor;
}

/*
 * One glyph at a time. The button appears as soon as the tree becomes a
 * drawer, so the pair is switched here rather than inside a width query.
 */
.d-menu-bars,
.d-menu-cross {
  display: none;
}

.d-menu[aria-expanded="false"] .d-menu-bars,
.d-menu[aria-expanded="true"] .d-menu-cross {
  display: block;
}

.d-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* The lockup's height is the mark's height, which the design renders at 18px
 * in this bar. The width follows the lockup's own aspect ratio. */
.d-lockup {
  height: 18px;
}

.d-tabs {
  display: flex;
  gap: 18px;
  margin-left: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--nav-text);
}

.d-tab {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}

.d-tab:hover {
  color: var(--ink);
}

.d-tab.is-active {
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 0 -3px var(--accent);
}

.d-topbar-spacer {
  flex: 1 1 auto;
}

.d-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 300px;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--meta);
  font-size: 12.5px;
  cursor: text;
}

.d-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.d-search-glyph {
  flex: none;
}

.d-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12.5px;
}

.d-search-input::placeholder {
  color: var(--meta);
  opacity: 1;
}

.d-search-input:focus {
  outline: none;
}

.d-search-input::-webkit-search-decoration,
.d-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.d-kbd {
  flex: none;
  padding: 2px 5px;
  border: 1px solid var(--chip-border);
  border-radius: var(--r-kbd);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

.d-version {
  flex: none;
  padding: 4px 8px;
  border-radius: var(--r-chip);
  background: var(--chip);
  color: var(--nav-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.d-theme {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: none;
  color: var(--nav-text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition);
}

.d-theme:hover {
  color: var(--ink);
}

.d-theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--toggle-dot);
}

/* The toggle names the theme it switches to. Both labels ship in the markup and
   the stylesheet reveals the one matching the theme in force, so the control
   reads correctly before any script runs. */
.d-theme-label--light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-theme-label--dark {
    display: none;
  }

  :root:not([data-theme="light"]) .d-theme-label--light {
    display: inline;
  }
}

:root[data-theme="dark"] .d-theme-label--dark {
  display: none;
}

:root[data-theme="dark"] .d-theme-label--light {
  display: inline;
}

/* ----------------------------------------------------------------- shell - */

.d-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  max-width: var(--docs-width);
  min-height: 760px;
  margin: 0 auto;
}

/*
 * The mobile search affordance and the drawer head. Both are laid out here and
 * revealed by the mobile breakpoint below, so the wide layout never shows two
 * copies of the same control.
 */
.d-search-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.d-search-button .d-search-glyph {
  width: 15px;
  height: 15px;
}

.d-drawer-head {
  display: none;
  margin-bottom: 22px;
}

.d-drawer-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 40px;
  margin-bottom: 18px;
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--faint);
  font-family: var(--font-ui);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.d-drawer-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.d-drawer-tab {
  padding: 7px 12px;
  border: 1px solid var(--control-border);
  border-radius: 100px;
  color: var(--meta);
  text-decoration: none;
}

.d-drawer-tab.is-active {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.d-drawer-theme {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid var(--control-border);
  border-radius: 100px;
  background: transparent;
  color: var(--meta);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Rows reach the 44px touch target the design asks for. */
@media (max-width: 720px) {
  .d-nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14.5px;
  }

  .d-nav-group-label {
    font-size: 10px;
  }
}

/* --------------------------------------------------------------- sidebar - */

.d-sidebar {
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
}

.d-sidebar-inner {
  position: sticky;
  top: var(--nav-h-docs);
  max-height: calc(100vh - var(--nav-h-docs));
  padding: 22px 16px;
  overflow-y: auto;
}

.d-nav-group + .d-nav-group {
  margin-top: 18px;
}

.d-nav-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.d-nav-group-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}

.d-nav-group-label:hover {
  color: var(--ink);
}

.d-nav-group-label.is-active {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px var(--accent);
}

.d-nav-group-toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--r-kbd);
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}

.d-nav-group-toggle:hover {
  color: var(--ink);
}

.d-nav-group-toggle[aria-expanded="false"] {
  transform: rotate(-90deg);
}

/* Collapsing follows the aria state the client script sets, so the tree stays
   open when no script runs. */
.d-nav-group-head:has(.d-nav-group-toggle[aria-expanded="false"]) + .d-nav-list {
  display: none;
}

.d-nav-list {
  padding-left: 10px;
  border-left: 1px solid var(--nav-hairline);
  list-style: none;
  font-size: 13px;
  line-height: 1.95;
  color: var(--nav-text);
}

.d-nav-sublist {
  padding-left: 12px;
  list-style: none;
}

.d-nav-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.d-nav-link:hover {
  color: var(--ink);
}

/* The active item carries the rail, the wash, and a heavier weight, so the
   accent never marks it alone. */
.d-nav-link.is-active {
  margin-left: -11px;
  padding-left: 10px;
  border-left: var(--rail) solid var(--accent);
  background: linear-gradient(90deg, var(--accent-wash), transparent);
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------- article - */

.d-main {
  min-width: 0;
  border-right: 1px solid var(--border);
}

.d-article {
  max-width: var(--measure);
  padding: 34px var(--gutter-article) 60px;
}

.d-crumbs {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--meta);
}

.d-crumb-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.d-crumb + .d-crumb::before {
  content: "/";
  margin: 0 8px;
  color: var(--faint);
}

.d-crumb-link {
  color: inherit;
  text-decoration: none;
}

.d-crumb-link:hover {
  color: var(--ink);
}

.d-title {
  margin-bottom: 12px;
  font-size: 42px;
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

.d-lede {
  margin-bottom: 24px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.d-pager {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.d-pager-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition);
}

.d-pager-card:hover {
  border-color: var(--accent);
  color: inherit;
}

.d-pager-card--next {
  margin-left: auto;
  text-align: right;
}

.d-pager-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meta);
}

.d-pager-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------- on this page - */

.d-toc {
  position: sticky;
  top: var(--nav-h-docs);
  align-self: start;
  max-height: calc(100vh - var(--nav-h-docs));
  padding: 34px 20px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 2.05;
  color: var(--nav-text);
}

.d-toc-title {
  margin-bottom: 8px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.d-toc-list {
  list-style: none;
}

.d-toc-item--3 {
  padding-left: 12px;
}

.d-toc-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.d-toc-link:hover {
  color: var(--ink);
}

.d-toc-link.is-active,
.d-toc-link[aria-current="true"] {
  margin-left: -9px;
  padding-left: 9px;
  box-shadow: inset var(--rail) 0 var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.d-toc-actions {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  line-height: 1.9;
}

.d-toc-action {
  display: block;
  color: var(--link);
  text-decoration: none;
}

.d-toc-action:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- footer - */

.d-footer {
  border-top: 1px solid var(--border);
  color: var(--meta);
  font-size: 13px;
}

.d-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 22px var(--gutter-landing);
}

.d-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-left: auto;
}

.d-footer-link {
  color: inherit;
  text-decoration: none;
}

.d-footer-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------- not found - */

.d-notfound {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 90px var(--gutter-article) 120px;
}

.d-notfound-code {
  display: inline-block;
  margin-bottom: 18px;
  padding: 3px 7px;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.d-notfound-title {
  margin-bottom: 12px;
  font-size: 42px;
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
}

.d-notfound-text {
  margin-bottom: 26px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.d-notfound-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.d-notfound-link {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--transition);
}

.d-notfound-link:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* ------------------------------------------------------------ responsive - */

/* The right rail is dropped first, and the hairline it sat against goes with it. */
/*
 * Three layouts, from the design's breakpoints: the article alone at mobile
 * widths, article plus tree on a tablet, and the full three-pane grid on a
 * desktop. The right rail needs its own column and 214px of it, so it waits
 * for the widest step.
 */
@media (max-width: 1239px) {
  .d-shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  .d-toc {
    display: none;
  }

  .d-main {
    border-right: 0;
  }
}

/* Tablet: the tree becomes a slide-over so the article keeps the full width. */
@media (max-width: 1099px) {
  .d-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .d-menu {
    display: inline-flex;
  }

  .d-article {
    padding: 30px 26px 56px;
  }

  /*
   * Out of the grid and over the article. The tree keeps its own scrolling,
   * and the transform is what animates, so opening does not lay out the page
   * again.
   */
  .d-sidebar {
    position: fixed;
    top: var(--nav-h-docs);
    left: 0;
    z-index: 25;
    width: min(320px, 86vw);
    height: calc(100vh - var(--nav-h-docs));
    height: calc(100dvh - var(--nav-h-docs));
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /*
     * visibility keeps the closed drawer out of the tab order and the
     * accessibility tree. It is stepped rather than interpolated: held until
     * the slide out finishes, and applied immediately on the way in. Giving it
     * a duration instead leaves the computed value ambiguous while the
     * transition runs, which reads as an empty drawer.
     */
    transition: transform 160ms ease-out, visibility 0s linear 160ms;
  }

  .d-sidebar[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 160ms ease-out, visibility 0s;
  }

  .d-sidebar-inner {
    position: static;
    max-height: none;
    padding-bottom: 40px;
  }

  /* Dims the article behind the drawer and takes the tap that closes it. */
  .d-shell::before {
    content: "";
    position: fixed;
    inset: var(--nav-h-docs) 0 0;
    z-index: 24;
    background: rgba(20, 19, 15, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease-out, visibility 0s linear 160ms;
  }

  body[data-drawer-open] .d-shell::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 160ms ease-out, visibility 0s;
  }

  /* The drawer is the scrolling surface while it is open. */
  body[data-drawer-open] {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .d-sidebar,
  .d-shell::before {
    transition: none;
  }
}

/*
 * Mobile: 56px bar, single column, 18px gutters. The bar keeps the menu, the
 * brand, the version, and the search icon; the field, the tabs, and the theme
 * toggle move into the drawer, which is the only place they fit.
 */
@media (max-width: 720px) {
  :root {
    --nav-h-docs: 56px;
    --gutter-docs-bar: 18px;
  }

  .d-topbar-inner {
    gap: 10px;
  }

  .d-tabs,
  .d-search,
  .d-theme {
    display: none;
  }

  .d-search-button {
    display: inline-flex;
  }

  .d-version {
    display: inline-block;
  }

  /*
   * 44px of touch target, pulled back by the difference to the gutter so the
   * glyph still lines up with the text below it.
   */
  .d-menu {
    width: 44px;
    height: 44px;
    margin-left: -12px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .d-sidebar {
    width: 100%;
    max-width: none;
    border-right: 0;
  }

  .d-sidebar-inner {
    padding: 16px 18px 32px;
  }

  .d-drawer-head {
    display: block;
  }

  .d-article {
    padding: 24px 18px 44px;
  }

  .d-title,
  .d-notfound-title {
    font-size: 32px;
    line-height: 1.06;
    letter-spacing: -0.03em;
  }

  .d-lede {
    font-size: 15.5px;
  }

  .d-article .prose {
    font-size: 15px;
  }

  .d-notfound {
    padding: 56px 18px 80px;
  }

  .d-pager {
    flex-direction: column;
  }

  .d-pager-card--next {
    margin-left: 0;
  }

  .d-footer-inner {
    padding: 20px 18px;
  }

  .d-footer-nav {
    margin-left: 0;
  }

  .d-kbd {
    display: none;
  }
}



/*
 * Landing page styles. Every class is prefixed `l-`.
 *
 * Colours come from site/src/styles/tokens.css. The `--l-*` variables below
 * cover the values the landing design uses that have no token, and the values
 * where the light theme and the dark theme pick different tokens. They follow
 * the same resolution order as tokens.css: light is the default, the dark
 * colour-scheme query switches an unconfigured visitor, and a data-theme
 * attribute on the root element wins over both.
 */

:root {
  /* Accent that stays solid: light uses the deep tone, dark uses the accent. */
  --l-accent-solid: var(--accent-deep);

  /* Secondary UI text: nav links, version pill, ghost button. */
  --l-text-muted: var(--secondary);

  /* Status pill */
  --l-pill-bg: linear-gradient(180deg, #ffffff, #f6f4ea);
  --l-pill-border: #dcd9cc;
  --l-pill-text: var(--secondary);
  --l-pill-ring: rgba(242, 134, 26, 0.25);

  /* Headline highlighter. Light paints a marker band, dark clips a gradient. */
  --l-mark-bg: linear-gradient(180deg, transparent 62%, var(--accent) 62%);
  --l-mark-clip: border-box;
  --l-mark-color: var(--ink);

  /* Subtitle and its softer highlighter */
  --l-subtitle: var(--body);
  --l-mark-soft-bg: linear-gradient(180deg, transparent 60%, #ffd9a0 60%);
  --l-mark-soft-color: var(--body);

  /* Install field */
  --l-install-bg: linear-gradient(180deg, #ffffff, #faf9f3);
  --l-install-border: var(--border);
  --l-install-shadow: 0 1px 2px rgba(20, 19, 15, 0.05);
  --l-copy-color: var(--link);

  /* Buttons */
  --l-outline-border: #d7d4c8;
  --l-primary-weight: 500;

  /* Terminal card */
  --l-term-border: var(--border);
  --l-term-bar-border: #eceadf;
  --l-term-dot: var(--border-3);
  --l-cursor: var(--ink);

  /* Adapter strip */
  --l-strip-label: var(--ink);

  /* Cards, and the hairline drawn inside one */
  --l-card-bg: linear-gradient(180deg, #ffffff, #fcfbf6);
  --l-card-hover-bg: #ffffff;
  --l-hairline: var(--border-2);

  /* Panel colour behind a primary diagram shape */
  --l-diagram-fill: var(--surface-2);

  /* Fill behind an integrations pill */
  --l-pill-fill: var(--accent-strip);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --l-accent-solid: var(--accent);
    --l-text-muted: var(--meta);

    --l-pill-bg: linear-gradient(180deg, #212739, #181c28);
    --l-pill-border: var(--border-2);
    --l-pill-text: #ccd3e2;
    --l-pill-ring: rgba(255, 164, 36, 0.18);

    --l-mark-bg: linear-gradient(90deg, var(--accent), var(--accent-soft));
    --l-mark-clip: text;
    --l-mark-color: transparent;

    --l-subtitle: var(--meta);
    --l-mark-soft-bg: linear-gradient(
      180deg,
      transparent 60%,
      rgba(255, 164, 36, 0.3) 60%
    );
    --l-mark-soft-color: var(--ink);

    --l-install-bg: linear-gradient(180deg, #1a1e2b, #181c28);
    --l-install-border: var(--border-2);
    --l-install-shadow: none;
    --l-copy-color: var(--accent);

    --l-outline-border: var(--border-2);
    --l-primary-weight: 600;

    --l-term-border: var(--border-3);
    --l-term-bar-border: var(--border);
    --l-term-dot: var(--border-2);
    --l-cursor: var(--accent);

    --l-strip-label: var(--accent);

    --l-card-bg: linear-gradient(180deg, #171b28, #141824);
    --l-card-hover-bg: #1b2030;
    --l-hairline: var(--border);

    --l-diagram-fill: var(--raised);

    --l-pill-fill: var(--accent-wash);
  }
}

:root[data-theme="dark"] {
  --l-accent-solid: var(--accent);
  --l-text-muted: var(--meta);

  --l-pill-bg: linear-gradient(180deg, #212739, #181c28);
  --l-pill-border: var(--border-2);
  --l-pill-text: #ccd3e2;
  --l-pill-ring: rgba(255, 164, 36, 0.18);

  --l-mark-bg: linear-gradient(90deg, var(--accent), var(--accent-soft));
  --l-mark-clip: text;
  --l-mark-color: transparent;

  --l-subtitle: var(--meta);
  --l-mark-soft-bg: linear-gradient(
    180deg,
    transparent 60%,
    rgba(255, 164, 36, 0.3) 60%
  );
  --l-mark-soft-color: var(--ink);

  --l-install-bg: linear-gradient(180deg, #1a1e2b, #181c28);
  --l-install-border: var(--border-2);
  --l-install-shadow: none;
  --l-copy-color: var(--accent);

  --l-outline-border: var(--border-2);
  --l-primary-weight: 600;

  --l-term-border: var(--border-3);
  --l-term-bar-border: var(--border);
  --l-term-dot: var(--border-2);
  --l-cursor: var(--accent);

  --l-strip-label: var(--accent);

  --l-card-bg: linear-gradient(180deg, #171b28, #141824);
  --l-card-hover-bg: #1b2030;
  --l-hairline: var(--border);

  --l-diagram-fill: var(--raised);

  --l-pill-fill: var(--accent-wash);
}

/* Landing elements size from the border box. */
[class^="l-"],
[class*=" l-"] {
  box-sizing: border-box;
}

/*
 * The design names a line height for running prose and leaves every other
 * element at the browser default, where the font's own metrics set the leading.
 * base.css sets 1.6 on the body for documentation pages, so each landing
 * section resets it and the rules below restate the values the design names.
 */
.l-topbar,
.l-hero,
.l-adapters,
.l-features,
.l-deploy,
.l-int,
.l-footer {
  line-height: normal;
}

.l-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus ring, identical on both themes. */
.l-brand:focus-visible,
.l-nav-link:focus-visible,
.l-btn:focus-visible,
.l-copy:focus-visible,
.l-footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- top bar */

.l-topbar {
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  font-family: var(--font-ui);
}

.l-topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--landing-width);
  height: var(--nav-h-landing);
  margin: 0 auto;
  padding: 0 var(--gutter-landing);
}

.l-brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

/* The lockup's height is the mark's height, which the design renders at 20px
 * in this bar. The width follows the lockup's own aspect ratio. */
.l-lockup {
  height: 20px;
}

.l-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.l-nav-link {
  font-size: 14px;
  color: var(--l-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.l-nav-link--strong {
  color: var(--ink);
  font-weight: 500;
}

.l-nav-link:hover {
  color: var(--ink);
}

.l-nav-arrow {
  margin-left: 3px;
}

.l-version {
  padding: 4px 8px;
  border-radius: var(--r-chip);
  background: var(--chip);
  color: var(--l-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

/* ------------------------------------------------------------------- hero */

.l-hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-wash), var(--hero-base);
  font-family: var(--font-ui);
}

.l-hero-inner {
  display: grid;
  /* minmax(0, 1fr) keeps the mono transcript from widening the whole grid. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 76px var(--gutter-landing) 66px;
}

.l-hero-copy {
  min-width: 0;
}

.l-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 5px 12px;
  border: 1px solid var(--l-pill-border);
  border-radius: var(--r-pill);
  background: var(--l-pill-bg);
  color: var(--l-pill-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.l-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l-accent-solid);
  box-shadow: 0 0 0 3px var(--l-pill-ring);
}

.l-headline {
  margin: 0 0 20px;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.01;
  letter-spacing: -0.042em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

.l-mark {
  padding: 0 2px;
  background-image: var(--l-mark-bg);
  -webkit-background-clip: var(--l-mark-clip);
  background-clip: var(--l-mark-clip);
  color: var(--l-mark-color);
}

.l-subtitle {
  margin: 0 0 30px;
  max-width: 480px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--l-subtitle);
  text-wrap: pretty;
}

.l-mark-soft {
  padding: 0 2px;
  background-image: var(--l-mark-soft-bg);
  color: var(--l-mark-soft-color);
}

.l-install {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--l-install-border);
  border-radius: 10px;
  background: var(--l-install-bg);
  box-shadow: var(--l-install-shadow);
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--ink);
}

.l-install-prompt {
  color: var(--faint);
}

.l-install-command {
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  overflow-wrap: anywhere;
}

.l-install-divider {
  width: 1px;
  height: 16px;
  background: var(--border-3);
}

.l-copy {
  padding: 0;
  border: 0;
  background: none;
  color: var(--l-copy-color);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition);
}

.l-copy:hover {
  color: var(--ink);
}

.l-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    filter var(--transition);
}

.l-btn--primary {
  padding: 11px 22px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: var(--l-primary-weight);
  box-shadow: var(--btn-primary-shadow);
}

.l-btn--primary:hover {
  filter: brightness(1.06);
}

.l-btn--outline {
  padding: 11px 20px;
  border-color: var(--l-outline-border);
  background: var(--raised);
  color: var(--ink);
}

.l-btn--outline:hover {
  border-color: color-mix(in srgb, var(--l-outline-border) 78%, var(--ink));
}

.l-btn--ghost {
  padding: 11px 20px;
  color: var(--l-text-muted);
}

.l-btn--ghost:hover {
  color: var(--ink);
}

/* --------------------------------------------------------- terminal card */

.l-terminal {
  position: relative;
  min-width: 0;
  margin: 0;
}

.l-terminal::before {
  content: "";
  position: absolute;
  inset: var(--terminal-glow-inset);
  border-radius: calc(var(--r-card) + 7px);
  background: var(--terminal-glow);
  filter: blur(var(--terminal-glow-blur));
}

.l-terminal-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--l-term-border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--terminal-shadow);
}

.l-terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--l-term-bar-border);
  background: var(--tab-strip);
}

.l-terminal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--l-term-dot);
}

.l-terminal-dot--live {
  background: var(--l-accent-solid);
}

.l-terminal-dir {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--meta);
}

.l-term {
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
}

/* Each transcript line is its own block, and keeps the spaces it carries. */
.l-term-line {
  white-space: pre;
}

.l-term-gap {
  height: 1.7em;
}

.l-term-prompt {
  color: var(--faint);
}

.l-term-flag {
  color: var(--link);
}

.l-term-out {
  color: var(--body);
}

.l-term-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  vertical-align: -3px;
  background: var(--l-cursor);
}

@media (prefers-reduced-motion: no-preference) {
  .l-term-cursor {
    animation: l-blink 1.1s step-end infinite;
  }
}

@keyframes l-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* --------------------------------------------------------- adapter strip */

.l-adapters {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, var(--accent-strip), var(--page) 45%);
}

.l-adapters-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 14px var(--gutter-landing);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
}

.l-adapters-label {
  color: var(--l-strip-label);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.l-adapter {
  color: var(--secondary);
}

.l-adapter--custom {
  color: var(--faint);
}

/* ------------------------------------------------------- section headings */

.l-heading {
  margin: 0 0 32px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* --------------------------------------------------------- feature grid */

.l-features {
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 64px var(--gutter-landing) 72px;
  font-family: var(--font-ui);
}

.l-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--border);
}

.l-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 26px 30px;
  background: var(--l-card-bg);
  transition: background var(--transition);
}

.l-card:hover {
  background: var(--l-card-hover-bg);
}

/* The diagram holds its drawn width, so the text takes the rest of the row. */
.l-card-art {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 200px;
}

.l-card-text {
  flex: 1;
  min-width: 0;
}

.l-card-number {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.l-card-title {
  margin: 0 0 8px;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
}

.l-card-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--secondary);
}

/* ------------------------------------------------------- feature diagrams */

.l-dg {
  display: block;
}

.l-dg-mono {
  font-family: var(--font-mono);
}

.l-dg-ink {
  stroke: var(--ink);
}

.l-dg-ink-fill {
  fill: var(--ink);
}

.l-dg-meta {
  stroke: var(--meta);
}

.l-dg-meta-fill {
  fill: var(--meta);
}

.l-dg-accent {
  stroke: var(--accent);
}

.l-dg-accent-fill {
  fill: var(--accent);
}

/* A glyph drawn on top of an accent fill, so it takes the on-accent tone. */
.l-dg-tick {
  stroke: var(--on-accent);
}

.l-dg-paper {
  fill: var(--l-diagram-fill);
}

/* ------------------------------------------------------- deployment grid */

.l-deploy {
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 0 var(--gutter-landing) 72px;
  font-family: var(--font-ui);
}

.l-deploy .l-heading {
  margin-bottom: 28px;
}

.l-deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--border);
}

.l-deploy-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 26px 32px;
  background: var(--l-card-bg);
}

.l-deploy-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.l-deploy-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.l-deploy-rule {
  height: 1px;
  background: var(--l-hairline);
}

.l-deploy-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.l-deploy-label {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.l-deploy-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.l-deploy-plus {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}

.l-deploy-plus-label {
  margin: 0 0 1px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.l-deploy-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-deploy-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 15px;
  color: var(--ink);
}

.l-deploy-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-3px);
}

.l-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--callout-border);
  border-radius: 10px;
  background: var(--accent-wash);
}

.l-callout-glyph {
  color: var(--link);
  font-size: 15px;
}

.l-callout-text {
  font-size: 15px;
  color: var(--secondary);
}

/* --------------------------------------------------------- integrations */

.l-int {
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 0 var(--gutter-landing) 72px;
  font-family: var(--font-ui);
}

.l-int .l-heading {
  margin-bottom: 24px;
}

/* The table keeps its column widths on a narrow screen and scrolls instead. */
.l-int-scroll {
  overflow-x: auto;
}

.l-int-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
  text-align: left;
}

.l-int-table th,
.l-int-table td {
  text-align: left;
}

.l-int-head {
  padding: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
  vertical-align: bottom;
}

.l-int-table th:first-child {
  width: 210px;
}

.l-int-table th:nth-child(2) {
  width: 190px;
}

/* The second row of every pair takes the raised surface. */
.l-int-row:nth-child(even) {
  background: var(--surface);
}

.l-int-name,
.l-int-builtin,
.l-int-alts {
  border-top: 1px solid var(--l-hairline);
  padding: 18px 16px 18px 0;
}

/*
 * The row name takes the same 16px inset as the cells beside it, so it starts
 * inside the row rather than flush against the section gutter.
 */
.l-int-name {
  padding-left: 16px;
  vertical-align: middle;
  font-weight: 600;
  color: var(--ink);
}

.l-int-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * Every cell in a row is centred against the others. The tallest one, usually
 * the pills with a note under them, sets the row height, and a short value
 * sitting at the top of a tall row reads as belonging to the row above it.
 */
.l-int-builtin {
  vertical-align: middle;
  color: var(--secondary);
}

.l-int-alts {
  padding-right: 0;
  vertical-align: middle;
}

.l-int-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-int-pill {
  padding: 4px 10px;
  border: 1px solid var(--callout-border);
  border-radius: var(--r-pill);
  background: var(--l-pill-fill);
  color: var(--link);
  font-size: 13.5px;
  font-weight: 500;
}

.l-int-note {
  max-width: 640px;
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--faint);
}

.l-int-foot {
  max-width: 820px;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--faint);
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- footer */

.l-footer {
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
}

.l-footer-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 22px var(--gutter-landing);
  font-size: 13px;
  color: var(--faint);
}

.l-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.l-footer-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.l-footer-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ------------------------------------------------------------ responsive */

/* -------------------------------------------------------- mobile menu -- */

/*
 * A disclosure rather than a scripted panel, so the links open before the
 * bundle loads and the open state needs nothing to track it. Hidden above the
 * mobile breakpoint, where the bar shows the links directly.
 */
.l-menu {
  position: relative;
  display: none;
  margin-right: -12px;
}

.l-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.l-menu-button::-webkit-details-marker {
  display: none;
}

.l-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  min-width: 168px;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--terminal-shadow);
}

.l-menu-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-kbd);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}

.l-menu-link:hover {
  background: var(--chip);
}

@media (max-width: 1100px) {
  .l-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1099px) {
  .l-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 52px;
  }

  .l-topbar-inner {
    gap: 16px;
  }

  .l-features {
    padding-top: 52px;
    padding-bottom: 56px;
  }

  .l-deploy-grid {
    grid-template-columns: 1fr;
  }

  .l-deploy,
  .l-int {
    padding-bottom: 56px;
  }
}

/*
 * Mobile, from the 390pt mockups: one column inside 18px gutters, and the
 * pieces that were side by side stack. Every tap target clears 44px.
 */
@media (max-width: 720px) {
  :root {
    --gutter-landing: 18px;
    --nav-h-landing: 56px;
  }

  .l-topbar-inner {
    gap: 12px;
    height: var(--nav-h-landing);
  }

  /* The links move behind the menu button, which the bar has room for. */
  .l-nav {
    display: none;
  }

  .l-menu {
    display: inline-flex;
  }

  .l-hero {
    background: var(--hero-wash-mobile), var(--hero-base);
  }

  .l-hero-inner {
    gap: 32px;
    padding-top: 36px;
    padding-bottom: 34px;
  }

  .l-headline {
    font-size: 40px;
    line-height: 1.03;
    letter-spacing: -0.035em;
    margin-bottom: 16px;
  }

  .l-subtitle {
    margin-bottom: 24px;
    font-size: 16.5px;
  }

  /* Full width, with the command clipped and copy held at the right edge. */
  .l-install {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .l-install-command {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .l-install-divider,
  .l-copy {
    flex: none;
  }

  /* Quickstart takes the row, the other two split the next one. */
  .l-actions {
    flex-wrap: wrap;
    gap: 9px;
  }

  .l-btn {
    padding: 14px;
    font-size: 15px;
    text-align: center;
  }

  .l-actions > .l-btn:first-child {
    flex: 1 0 100%;
  }

  .l-actions > .l-btn:not(:first-child) {
    flex: 1 1 0;
  }

  /*
   * Full-bleed band. The card's radius, glow, and shadow all read as noise at
   * this width, so the hairlines carry the edges instead.
   */
  .l-terminal {
    margin-left: calc(var(--gutter-landing) * -1);
    margin-right: calc(var(--gutter-landing) * -1);
  }

  .l-terminal-card {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .l-term {
    padding: 16px;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    overflow-x: auto;
  }

  .l-terminal-bar::after {
    content: "SWIPE →";
    margin-left: auto;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  /*
   * The strip cannot hold one row, so the names wrap as pills under the label.
   * The band's gradient turns vertical, since a horizontal fade across 390pt
   * reads as a colour cast rather than a sweep.
   */
  .l-adapters {
    background: linear-gradient(180deg, var(--accent-strip), var(--page));
  }

  .l-adapters-inner {
    gap: 6px;
    padding: 16px var(--gutter-landing);
  }

  .l-adapters-label {
    flex: 1 0 100%;
    margin-bottom: 4px;
  }

  .l-adapter {
    padding: 4px 9px;
    border: 1px solid var(--border-2);
    border-radius: 100px;
  }

  /*
   * One card per row, hairline-separated and running edge to edge. The
   * enclosing radius belongs to a card sitting inside a margin; at this width
   * the band is the full page, so only the top and bottom rules remain.
   */
  .l-grid {
    margin-left: calc(var(--gutter-landing) * -1);
    margin-right: calc(var(--gutter-landing) * -1);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .l-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border: 0;
    border-radius: 0;
    padding: 24px 18px 26px;
  }

  .l-card-art {
    width: 232px;
    max-width: 100%;
    margin: 0 auto;
  }

  .l-card-title {
    font-size: 17px;
  }

  .l-card-text {
    font-size: 14.5px;
  }

  .l-heading {
    margin-bottom: 20px;
    font-size: 26px;
  }

  /*
   * Three separate cards rather than one panel. The desktop grid paints its
   * own background so the 1px gaps read as hairlines between abutting cards;
   * once the cards are 12px apart that background is a band behind them, so
   * the frame is dropped and each card carries its own border.
   */
  .l-deploy-grid {
    gap: 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .l-deploy-card {
    border: 1px solid var(--border);
    border-radius: 13px;
  }

  /*
   * The table stops being a table and becomes one block per row, separated the
   * way the feature band is: a 1px gap over the container's own background,
   * with a rule above the first block and below the last. The cells carry the
   * desktop row separator, which would otherwise draw a second line under each
   * row name and a third between its two values.
   */
  .l-int-scroll {
    overflow-x: visible;
  }

  .l-int-table,
  .l-int-table tbody,
  .l-int-row,
  .l-int-name,
  .l-int-builtin,
  .l-int-alts {
    display: block;
    width: auto;
    min-width: 0;
  }

  .l-int-table {
    margin-left: calc(var(--gutter-landing) * -1);
    margin-right: calc(var(--gutter-landing) * -1);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--border);
  }

  .l-int-table tbody {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .l-int-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /*
   * Every block takes the same surface. The desktop table stripes alternate
   * rows to track a line across three columns, which a stack of blocks with a
   * hairline between them does not need.
   */
  .l-int-row,
  .l-int-row:nth-child(even) {
    padding: 18px var(--gutter-landing);
    background: var(--l-card-bg);
  }

  .l-int-name {
    padding: 0 0 12px;
    border-top: 0;
    font-size: 15.5px;
    font-weight: 600;
  }

  .l-int-builtin,
  .l-int-alts {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border-top: 0;
  }

  .l-int-builtin {
    padding-bottom: 10px;
  }

  .l-int-builtin::before,
  .l-int-alts::before {
    content: attr(data-label);
    flex: none;
    width: 96px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .l-int-alts {
    flex-wrap: wrap;
  }

  /*
   * The pills take the rest of the row and wrap inside it. Left to size
   * themselves they overflow the line and drop to the next one, which starts
   * at the label's edge and puts them under it rather than beside it.
   */
  .l-int-pills {
    flex: 1 1 0;
    min-width: 0;
  }

  .l-int-note {
    flex-basis: 100%;
    margin-left: 104px;
  }

  .l-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .l-footer-sep {
    display: none;
  }

  .l-footer-links {
    flex-wrap: wrap;
    gap: 14px;
    margin-left: 0;
  }
}


/* The search overlay, opened by the field in the top bar or by the shortcut. */

[data-search-overlay] {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
  background: rgba(20, 19, 15, 0.42);
}

[data-search-overlay][hidden] {
  display: none;
}

.search-panel {
  width: min(640px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--terminal-shadow);
  overflow: hidden;
}

.search-panel:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.search-field {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
}

.search-field:focus {
  outline: none;
}

.search-results {
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 56vh;
  overflow-y: auto;
}

/*
 * Before a query is typed the list holds nothing, so the panel is the field and
 * a strip of padding below it. The divider then separates the field from empty
 * space, and the field's square bottom corners sit inside the panel's rounded
 * ones. Both go until the list has a row in it, which makes the panel read as
 * one rounded field. A query that matches nothing still renders a row, so the
 * divider stays for that state.
 */
.search-panel:has(.search-results:empty) .search-field {
  border-bottom-color: transparent;
  border-bottom-left-radius: var(--r-card);
  border-bottom-right-radius: var(--r-card);
}

.search-panel:has(.search-results:empty) .search-results {
  padding: 0;
}

.search-result a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--r-chip);
  text-decoration: none;
}

.search-result a:hover,
.search-result a:focus-visible {
  background: var(--accent-wash);
}

.search-result-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}

.search-result-context {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--meta);
}

.search-empty {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--meta);
}