/* SocialTap site. One stylesheet, design tokens as custom properties. Light and dark: white (or near-black), ink,
   hairlines; the dark tokens follow the system unless the reader picked one (theme.js, html[data-theme]).
   Color has three jobs and no others: dusk blue is the voice (headline second lines, mono labels, arrows, glyphs,
   JSON keys, active states, the logo's center), mist is the surface the product sits on (announcement bar, stages,
   callouts), and pink is a signal (NEW, best value, required). Everything else comes from the platforms' own
   logos. Type: Geist and Geist Mono (assets/fonts, SIL Open Font License). */

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

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

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

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

:root {
  /* Surfaces and ink */
  --bg: #ffffff;
  --bg-soft: #fafafb;
  --bg-sunken: #f4f4f6;
  --fg: #0b0b0d;
  --fg-soft: #45454d;
  --muted: #6b6b74;
  --gray: #8a8a94; /* headings' second sentence (large text only: 3.4:1) */
  --faint: #a3a3ac;
  --line: #e7e7ea;
  --line-strong: #d6d6db;

  /* Dusk blue: the second voice */
  --accent: #3d6aa8;
  --accent-ink: #2f5687;
  --accent-soft: #eaf0f8;
  --accent-line: #c9d7ea;

  /* Mist: the surface the product sits on */
  --mist: #e9eff6;
  --mist-soft: #f4f7fb;
  --mist-line: #d9dfe6;
  --dots: radial-gradient(rgb(97 120 154 / 0.22) 1px, transparent 1.3px);
  --dots-ink: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.3px);

  /* Pink: a signal, never a surface */
  --pink: #e5336f;
  --pink-ink: #a3164d;
  --pink-soft: #fdeef3;

  /* States */
  --ok: #12805c;
  --ok-soft: #e6f4ee;
  --warn: #8a4b00;
  --warn-soft: #fff4e0;
  --warn-line: #f4d9a8;
  --err: #c4291d;
  --err-soft: #fdecea;

  /* JSON syntax */
  --j-key: #355c91;
  --j-str: #2f6f4f;
  --j-num: #b4285c;
  --j-lit: #8a5a00;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgb(20 30 50 / 0.06);
  --shadow: 0 1px 2px rgb(20 30 50 / 0.05), 0 12px 32px -16px rgb(20 30 50 / 0.18);
  --shadow-lg: 0 1px 2px rgb(20 30 50 / 0.05), 0 28px 64px -30px rgb(20 30 50 / 0.32);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The frame: every page's content sits between two hairlines this wide */
  --frame: 1120px;
  --pad: 56px;
  --gutter: 24px;
  --header: 64px;
  --docs-header: 108px;

  /* Surfaces that differ between themes */
  --header-bg: rgb(255 255 255 / 0.9);
  --code-bg: #fcfcfd;
  --on-fg: #ffffff; /* text on an ink surface (primary buttons) */
  --fg-hover: #2a2a30; /* an ink surface hovered */
  --band: #0b0b0d; /* the closing band: ink in both themes */
  --band-line: #222228;
  --backdrop: rgb(11 11 13 / 0.28);
  --tile: #ffffff; /* the white tile a platform's mark sits on, in both themes */
  color-scheme: light;
}

/* Dark: the same voices on near-black. Blue and pink are lifted for contrast; the mist becomes a deep slate. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0d10;
    --bg-soft: #121318;
    --bg-sunken: #191b21;
    --fg: #ececf1;
    --fg-soft: #b9bbc5;
    --muted: #8d909b;
    --gray: #6e727e;
    --faint: #565a65;
    --line: #23252c;
    --line-strong: #31343d;
    --accent: #7ea6e0;
    --accent-ink: #a9c5ee;
    --accent-soft: #15233a;
    --accent-line: #2c4670;
    --mist: #0f151e;
    --mist-soft: #111821;
    --mist-line: #1f2a39;
    --dots: radial-gradient(rgb(150 175 215 / 0.13) 1px, transparent 1.3px);
    --pink: #ff4f8a;
    --pink-ink: #ff8db4;
    --pink-soft: #33121f;
    --ok: #4fca9c;
    --ok-soft: #0f261d;
    --warn: #f0b55c;
    --warn-soft: #261c0c;
    --warn-line: #47351a;
    --err: #ff7d72;
    --err-soft: #2c1311;
    --j-key: #92b6ec;
    --j-str: #8fd6ad;
    --j-num: #f590b8;
    --j-lit: #e9bb70;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 12px 32px -16px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.35), 0 28px 64px -30px rgb(0 0 0 / 0.8);
    --header-bg: rgb(12 13 16 / 0.86);
    --code-bg: #0f1014;
    --on-fg: #0b0b0d;
    --fg-hover: #ffffff;
    --band: #111318;
    --band-line: #23252c;
    --backdrop: rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0c0d10;
  --bg-soft: #121318;
  --bg-sunken: #191b21;
  --fg: #ececf1;
  --fg-soft: #b9bbc5;
  --muted: #8d909b;
  --gray: #6e727e;
  --faint: #565a65;
  --line: #23252c;
  --line-strong: #31343d;
  --accent: #7ea6e0;
  --accent-ink: #a9c5ee;
  --accent-soft: #15233a;
  --accent-line: #2c4670;
  --mist: #0f151e;
  --mist-soft: #111821;
  --mist-line: #1f2a39;
  --dots: radial-gradient(rgb(150 175 215 / 0.13) 1px, transparent 1.3px);
  --pink: #ff4f8a;
  --pink-ink: #ff8db4;
  --pink-soft: #33121f;
  --ok: #4fca9c;
  --ok-soft: #0f261d;
  --warn: #f0b55c;
  --warn-soft: #261c0c;
  --warn-line: #47351a;
  --err: #ff7d72;
  --err-soft: #2c1311;
  --j-key: #92b6ec;
  --j-str: #8fd6ad;
  --j-num: #f590b8;
  --j-lit: #e9bb70;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 12px 32px -16px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.35), 0 28px 64px -30px rgb(0 0 0 / 0.8);
  --header-bg: rgb(12 13 16 / 0.86);
  --code-bg: #0f1014;
  --on-fg: #0b0b0d;
  --fg-hover: #ffffff;
  --band: #111318;
  --band-line: #23252c;
  --backdrop: rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

@media (max-width: 960px) {
  :root {
    --pad: 24px;
    --gutter: 20px;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 16px);
}

html:has(> body.chrome-docs) {
  scroll-padding-top: calc(var(--docs-header) + 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px / 1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

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

::selection {
  background: var(--accent-soft);
  color: var(--fg);
}

h1,
h2,
h3,
h4 {
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

h2 {
  font-size: 1.625rem;
}

h3 {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

p {
  text-wrap: pretty;
}

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

code {
  font-size: 0.86em;
  background: var(--bg-sunken);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--fg);
}

kbd {
  font-size: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--muted);
  background: var(--bg);
}

code.wrap {
  word-break: break-all;
}

small,
.small {
  font-size: 0.875rem;
}

.muted {
  color: var(--muted);
}

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

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 8px;
  z-index: 50;
  background: var(--bg);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.icon {
  flex: none;
  vertical-align: -0.15em;
}

/* A platform's mark (its brand color comes from the catalog) and a resource's stroked glyph (dusk blue). */
.logo-of {
  flex: none;
  display: inline-block;
}

.glyph {
  flex: none;
  color: var(--accent);
  vertical-align: -0.1em;
}

.wrap,
.frame {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
}

.frame {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

main.wrap {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 56px var(--pad) 112px;
}

main.wrap > section,
.prose > section,
.prose > aside {
  margin: 0 0 56px;
}

@media (max-width: 1160px) {
  .frame,
  main.wrap {
    border-left: 0;
    border-right: 0;
  }
}

/* The mono label every section opens with. */
.kicker {
  font: 500 0.75rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

/* A heading's second sentence: a quieter voice. */
.section-head h2 span,
.page-head h1 span.then {
  color: var(--gray);
}

.accent {
  font-style: normal;
  color: var(--accent);
}

/* ---------- Header ---------- */

.announce {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px var(--gutter);
  background: var(--mist);
  border-bottom: 1px solid var(--mist-line);
  font-size: 0.85rem;
  color: var(--fg-soft);
  text-decoration: none;
  text-align: center;
}

.announce:hover {
  color: var(--fg);
}

.announce .more {
  color: var(--accent-ink);
  font-weight: 500;
  white-space: nowrap;
}

.signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--mist-line);
  font: 500 0.69rem / 1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}

.signal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--header);
  padding: 0 var(--gutter);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.025em;
  flex: none;
}

.logo:hover {
  color: var(--fg);
}

.logo-mark {
  flex: none;
}

/* The logo (catalog product.mark) is drawn twice, in its light and its dark colors; the dark theme swaps them
   (below, with the other dark-theme marks). */
.logo-mark .mark-dark {
  display: none;
}

.nav {
  flex: 1;
  min-width: 0;
}

.nav ul,
.docs-tabs ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 6px 0;
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--fg);
}

.nav a[aria-current="page"] {
  box-shadow: inset 0 -1.5px 0 var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.header-link {
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 7px 10px;
}

.header-link:hover {
  color: var(--fg);
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 7px 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.search-trigger:hover {
  border-color: var(--line-strong);
  color: var(--fg-soft);
}

.search-trigger[hidden] {
  display: none;
}

.search-trigger.wide {
  width: 100%;
}

.search-trigger.wide .search-label {
  flex: 1;
  text-align: left;
}

@media (max-width: 960px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    gap: 6px 16px;
    padding-top: 12px;
  }
  .nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .nav ul {
    gap: 22px;
  }
  .header-actions {
    margin-left: auto;
  }
  .search-trigger .search-label,
  .search-trigger kbd,
  .hide-sm {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.button:hover {
  color: var(--fg);
  border-color: var(--faint);
}

.button.primary {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--on-fg);
}

.button.primary:hover {
  background: var(--fg-hover);
  border-color: var(--fg-hover);
  color: var(--on-fg);
}

.button.small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.9rem;
}

.button.large {
  min-height: 48px;
  padding: 0 22px;
  font-size: 0.97rem;
}

.button.ghost {
  border-color: transparent;
  background: transparent;
}

.button .icon {
  transition: transform 0.15s;
}

.button:hover .icon {
  transform: translateX(2px);
}

.button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 24px 0;
}

.actions .aside {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.875rem;
}

.link-arrow,
.link-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}

.link-arrow .icon,
.link-list .icon {
  color: var(--accent);
  transition: transform 0.15s;
}

.link-arrow:hover,
.link-list a:hover {
  color: var(--fg);
}

.link-arrow:hover .icon,
.link-list a:hover .icon {
  transform: translateX(3px);
}

.link-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  background: var(--bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  padding: 56px var(--gutter) 0;
}

.footer-grid h2 {
  font: 500 0.72rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin: 0 0 9px;
}

.footer-grid a:not(.logo, .button) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-soft);
  text-decoration: none;
}

.footer-grid a:not(.logo, .button):hover {
  color: var(--fg);
}

.footer-brand p {
  color: var(--muted);
  max-width: 28ch;
  margin-top: 14px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--fg-soft);
  text-decoration: none;
}

.status-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 40px var(--gutter) 36px;
  color: var(--muted);
  font-size: 0.82rem;
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  color: inherit;
}

/* The legal pages (src/pages/legal.ts): one readable column, the plain-English summary in mist, numbered sections,
   the effective date under a hairline. */
.legal {
  max-width: 46rem;
}

.legal .summary-box {
  margin: 0 0 48px;
}

.legal .summary-box ul {
  margin-bottom: 0;
}

.legal-body h2 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.legal-body > h2:first-of-type {
  margin-top: 0;
}

.legal-foot {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding-top: 24px;
  color: var(--fg-soft);
  font-size: 0.95rem;
}

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ---------- Page furniture ---------- */

.wrap-tools {
  display: flex;
  justify-content: flex-end;
  margin: -24px 0 16px;
}

.page-head {
  margin-bottom: 48px;
}

main.wrap > .page-head h1,
main.wrap > header.page-head h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.5rem);
  letter-spacing: -0.045em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font: 500 0.75rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.page-head h1 .then {
  display: block;
}

/* A platform's or a resource's own page: its mark beside the heading. */
.platform-page-head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.platform-page-head h1 {
  margin-top: 2px;
}

.platform-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 72px 0 20px;
}

.platform-head h2 {
  margin: 4px 0 4px;
}

.platform-head h2 a {
  color: var(--fg);
  text-decoration: none;
}

.platform-head p {
  margin: 0;
}

.resource-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .platform-page-head {
    flex-direction: column;
    gap: 16px;
  }
}

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 64ch;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  color: var(--fg-soft);
  font-size: 0.875rem;
}

.facts li {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  background: var(--bg);
}

.facts li[hidden] {
  display: none;
}

.facts strong {
  color: var(--fg);
  font-weight: 500;
}

/* Breadcrumbs read as a mono path: APIS / TIKTOK / PROFILE, the current one in dusk blue. */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  font: 500 0.75rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--faint);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--fg);
}

.eyebrow .crumbs ol {
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  font: 500 0.66rem / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
  vertical-align: middle;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-soft);
}

.badge-ga,
.badge-added {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok);
}

.badge-default {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.req,
.opt {
  display: inline-block;
  font: 500 0.66rem / 1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: 2px;
}

.req {
  color: var(--pink-ink);
  background: var(--pink-soft);
}

.opt {
  color: var(--muted);
  background: var(--bg-sunken);
}

.yes {
  color: var(--accent-ink);
  font-weight: 500;
}

.no {
  color: var(--muted);
}

/* A list whose items carry a dusk-blue tick. */
.checks {
  list-style: none;
  padding: 0;
}

.checks li {
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(0.55em);
  width: 10px;
  height: 5px;
  border-left: 1.75px solid var(--accent);
  border-bottom: 1.75px solid var(--accent);
  transform: rotate(-45deg);
}

.callout {
  border: 1px solid var(--mist-line);
  background: var(--mist-soft);
  color: var(--fg-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 32px;
  font-size: 0.95rem;
}

aside.callout h2,
div.callout h2 {
  font: 500 0.72rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.callout ul {
  padding-left: 1.1em;
}

.callout ul,
.callout p:last-child {
  margin-bottom: 0;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.pills a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
}

.pills a:hover {
  border-color: var(--line-strong);
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  min-width: 0;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.card:hover {
  color: var(--fg);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.card-kicker {
  font: 500 0.7rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.card-title {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.card-body {
  color: var(--muted);
  font-size: 0.92rem;
}

.card-foot {
  margin-top: auto;
  padding-top: 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.card-foot code {
  font-size: 0.76rem;
  background: none;
  padding: 0;
  word-break: break-all;
}

.card-draft {
  border-style: dashed;
}

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  counter-reset: step;
}

.steps li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font: 500 0.75rem / 1 var(--mono);
  color: var(--accent);
  margin-bottom: 14px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

@media (max-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tiles div {
  padding: 16px 18px;
  box-shadow: inset -1px 0 var(--line);
}

.tiles dt,
.meta-list dt {
  font: 500 0.7rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tiles dd {
  margin: 6px 0 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tiles.big div {
  padding: 26px 26px 28px;
}

.tiles.big dd {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: -0.04em;
}

.meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.meta-list div {
  padding: 14px 18px;
  box-shadow: inset -1px 0 var(--line);
}

.meta-list dd {
  margin: 4px 0 0;
}

/* In the docs, facts read as label and value rows on hairlines. */
.docs .meta-list {
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.docs .meta-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

.docs .meta-list dt {
  font: 500 0.875rem / 1.6 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}

.docs .meta-list dd {
  margin: 0;
  font-size: 0.92rem;
}

/* ---------- Tables ---------- */

.table-wrap {
  /* Positioned, so screen-reader-only text in a scrolled cell is clipped with it instead of widening the page. */
  position: relative;
  width: 100%;
  overflow-x: auto;
  margin: 0 0 24px;
  border-top: 1px solid var(--line);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

caption {
  text-align: left;
  padding: 10px 0;
  color: var(--muted);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}

thead th {
  font: 500 0.7rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

td code,
th code {
  background: none;
  padding: 0;
}

table.fields td:first-child,
table.errors td:first-child {
  white-space: nowrap;
}

table.fields td:nth-child(2),
table.params td:nth-child(2) {
  color: var(--muted);
}

table.fields td:nth-child(2) code {
  color: var(--muted);
}

/* In a narrow column (an endpoint page), fields and errors stack like parameters: the name line, then the prose. */
.ep-main .table-wrap:has(> table.fields, > table.errors) {
  overflow: visible;
}

.ep-main table.fields,
.ep-main table.fields tbody,
.ep-main table.errors,
.ep-main table.errors tbody {
  display: block;
}

.ep-main table.fields thead,
.ep-main table.errors thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ep-main table.fields tr,
.ep-main table.errors tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.ep-main table.errors tr {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.ep-main table.fields td,
.ep-main table.errors td {
  padding: 0;
  border: 0;
}

.ep-main table.fields td:nth-child(2) {
  font-size: 0.8rem;
}

.ep-main table.fields td:nth-child(3),
.ep-main table.errors td:nth-child(4),
.ep-main table.errors td:nth-child(5) {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 0.94rem;
  color: var(--fg-soft);
}

.ep-main table.errors td:nth-child(2) {
  font: 0.8rem var(--mono);
  color: var(--muted);
}

.ep-main table.errors td:nth-child(3) {
  justify-self: end;
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ep-main table.errors td:nth-child(5) {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--muted);
}

.ep-main table.errors td:nth-child(5)::before {
  content: "→ ";
  color: var(--accent);
}

code.field[data-depth="1"] {
  margin-left: 1.2em;
}

code.field[data-depth="2"] {
  margin-left: 2.4em;
}

code.field[data-depth="3"] {
  margin-left: 3.6em;
}

/* Parameters read like param fields: name, type and badge on one line, the description under them. */
.table-wrap:has(> table.params) {
  overflow: visible;
}

table.params,
table.params tbody {
  display: block;
}

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

table.params tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

table.params td {
  padding: 0;
  border: 0;
}

table.params td:nth-child(1) {
  white-space: nowrap;
}

table.params td:nth-child(1) code {
  font-weight: 500;
  color: var(--fg);
  font-size: 0.92rem;
}

table.params td:nth-child(2) {
  font-size: 0.82rem;
  align-self: center;
}

table.params td:nth-child(2) code {
  color: var(--muted);
}

table.params td:nth-child(2) br {
  display: none;
}

table.params td:nth-child(2) small {
  margin-left: 8px;
}

table.params td:nth-child(3) {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: var(--fg-soft);
  font-size: 0.95rem;
}

table.params td:nth-child(4) {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

table.params td:nth-child(4)::before {
  content: "Example ";
}

table.params td:nth-child(4) code {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--mist-soft);
  border: 1px solid var(--mist-line);
}

/* On a phone a wide table scrolls sideways rather than squeezing its columns; stacked ones stay as they are. */
@media (max-width: 640px) {
  .table-wrap > table {
    min-width: 36rem;
  }
  .table-wrap > table.params,
  .ep-main .table-wrap > table.fields,
  .ep-main .table-wrap > table.errors {
    min-width: 0;
  }
  .page-tools a[target="_blank"] {
    display: none;
  }
}

/* ---------- Code ---------- */

.code,
.code-tabs.js {
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.code figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 500 0.72rem / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 0 14px;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
}

.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  max-height: 540px;
  font-size: 0.81rem;
  line-height: 1.75;
  tab-size: 2;
  background: var(--code-bg);
  color: var(--fg);
}

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

.code-note {
  margin: 0;
  padding: 8px 14px 10px;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
}

.copy:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.code-tabs.js .code {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.code-tabs.js .code figcaption {
  display: none;
}

.tablist {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 0 8px 0 14px;
  min-height: 42px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}

.tablist [role="tab"] {
  font: 500 0.75rem / 1 var(--mono);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.tablist [role="tab"]:hover {
  color: var(--fg);
}

.tablist [role="tab"][aria-selected="true"] {
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tablist .copy {
  margin-left: auto;
  align-self: center;
}

.j-key {
  color: var(--j-key);
}

.j-str {
  color: var(--j-str);
}

.j-num {
  color: var(--j-num);
}

.j-lit {
  color: var(--j-lit);
}

/* Highlighted code (src/highlight.ts): the JSON palette, keywords in the number's voice. */
.t-str {
  color: var(--j-str);
}

.t-kw {
  color: var(--j-num);
}

.t-num {
  color: var(--j-lit);
}

.t-var {
  color: var(--j-key);
}

.t-com {
  color: var(--muted);
  font-style: italic;
}

/* The stage: mist with a dot grid, where the product (a request and its response) sits. */
.stage {
  background: var(--mist) var(--dots) 0 0 / 18px 18px;
  border: 1px solid var(--mist-line);
}

.window {
  background: var(--bg);
  border: 1px solid var(--mist-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-width: 0;
}

.window .code,
.window .code-tabs.js {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* ---------- Page tools: "Copy page" and the menu (View as Markdown, Open in Claude / ChatGPT / Perplexity, connect MCP) ---------- */

.page-tools {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  position: relative;
  height: 32px;
  font-size: 0.82rem;
}

.page-tools .copy-md,
.page-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-soft);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background-color 0.15s;
}

.page-tools .copy-md {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: 0;
}

.page-tools .copy-md[hidden] {
  display: none;
}

.page-tools .copy-md[hidden] + .page-menu > summary {
  border-radius: var(--radius-sm);
}

.page-tools .copy-md:hover,
.page-menu > summary:hover,
.page-menu[open] > summary {
  color: var(--fg);
  background: var(--bg-soft);
}

.page-tools .copy-md.done {
  color: var(--ok);
}

.page-menu {
  position: relative;
}

.page-menu > summary {
  height: 100%;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  list-style: none;
  padding: 0 8px;
}

.page-menu > summary::-webkit-details-marker {
  display: none;
}

.page-menu > summary .icon {
  transition: transform 0.15s;
}

.page-menu[open] > summary .icon {
  transform: rotate(180deg);
}

/* Without JavaScript there is no "Copy page" button: the menu says what it holds. */
.page-menu .nojs-label {
  display: none;
}

.page-tools .copy-md[hidden] + .page-menu .nojs-label {
  display: inline;
}

.page-menu .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 300px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  animation: menu-in 0.12s ease-out;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.page-menu .menu a,
.page-menu .menu button {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.page-menu .menu a:hover,
.page-menu .menu button:hover,
.page-menu .menu a:focus-visible,
.page-menu .menu button:focus-visible {
  background: var(--bg-soft);
  outline: none;
}

.page-menu .menu [hidden] {
  display: none;
}

.page-menu .menu .icon {
  margin-top: 2px;
  color: var(--muted);
}

.page-menu .menu .icon-external {
  margin-left: auto;
  width: 13px;
  height: 13px;
  color: var(--faint);
}

.page-menu .menu span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-menu .menu strong {
  font-weight: 500;
  font-size: 0.86rem;
  line-height: 1.35;
}

.page-menu .menu small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-menu .menu .done strong {
  color: var(--ok);
}

.page-menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 4px;
}

/* ---------- Docs chrome ---------- */

/* The docs read like the best API docs: a quiet header with tabs, a hairline-ruled sidebar whose platforms fold, a
   narrow page and, on an operation, a sticky rail of examples in nested cards. */

body.chrome-docs {
  --docs-max: 1440px;
  --docs-side: 32px;
  --sidebar: 256px;
}

.docs-bar {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 440px) minmax(max-content, 1fr);
  align-items: center;
  gap: 24px;
  height: 60px;
  padding: 0 var(--docs-side);
  max-width: var(--docs-max);
  margin: 0 auto;
}

.logo .logo-docs {
  margin-left: 4px;
  padding-left: 11px;
  border-left: 1px solid var(--line-strong);
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.docs-bar .header-actions {
  justify-self: end;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--line);
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle .icon-moon,
:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: block;
  }
}

/* Marks drawn in black (the catalog's brand color) turn to ink in the dark theme; the logo takes its dark colors. */
:root[data-theme="dark"] .logo-of path[fill="#000000"] {
  fill: var(--fg);
}

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

:root[data-theme="dark"] .logo-mark .mark-dark {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-of path[fill="#000000"] {
    fill: var(--fg);
  }
  :root:not([data-theme="light"]) .logo-mark .mark-light {
    display: none;
  }
  :root:not([data-theme="light"]) .logo-mark .mark-dark {
    display: inline;
  }
}

.docs-tabs {
  max-width: var(--docs-max);
  margin: 0 auto;
  padding: 0 var(--docs-side);
}

.docs-tabs ul {
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}

.docs-tabs a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 12px;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.docs-tabs a:hover {
  color: var(--fg);
}

.docs-tabs a[aria-current="page"] {
  color: var(--fg);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--fg);
}

main.docs-shell {
  max-width: var(--docs-max);
  margin: 0 auto;
  padding: 0 var(--docs-side);
}

.docs {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) 216px;
  gap: 0 56px;
  align-items: start;
}

.docs.no-rail {
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.docs.no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

/* An operation: its page beside a sticky rail of examples. */
.docs.docs-api {
  grid-template-columns: var(--sidebar) minmax(0, 1fr) minmax(360px, 440px);
  gap: 0 56px;
}

.docs-main {
  min-width: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0 96px;
}

.docs-api .docs-main {
  max-width: 640px;
}

.no-sidebar .docs-main {
  max-width: 820px;
}

/* A page's head: the eyebrow (its group), the title beside the page menu, the lead. */
.docs .page-head {
  margin-bottom: 36px;
}

.docs .page-head .eyebrow {
  display: block;
  margin: 0 0 8px;
  font: 500 0.875rem / 1.4 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

.docs .title-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* The title flows like text, so a badge follows its last word. */
.docs .title-row .title {
  flex: 1;
  min-width: 0;
}

.docs .page-head h1 {
  display: inline;
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.docs .title-row .badge {
  margin-left: 4px;
  vertical-align: 0.55em;
}

.docs .title-row .page-tools {
  margin-top: 4px;
}

.docs .page-head .lead {
  margin: 12px 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--fg-soft);
}

.docs .page-head .changelog-subscribe {
  margin: 18px 0 0;
}

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

.sidebar {
  position: sticky;
  top: var(--docs-header);
  align-self: start;
  max-height: calc(100vh - var(--docs-header));
  overflow: auto;
  padding: 24px 20px 48px 0;
  margin-left: -10px;
  border-right: 1px solid var(--line);
  font-size: 0.875rem;
  scrollbar-width: none;
}

.sidebar:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.sidebar summary {
  display: none;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-anchors {
  display: grid;
  gap: 1px;
  margin-bottom: 18px;
}

.sidebar .nav-anchors a {
  gap: 10px;
  color: var(--fg-soft);
}

.nav-anchors .icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--faint);
}

.sidebar .nav-anchors a:hover .icon {
  color: var(--fg);
}

.nav-group {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

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

.sidebar h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 0.8125rem / 1.3 var(--font);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0 0 6px;
  padding-left: 10px;
}

.sidebar a,
.nav-fold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--fg-soft);
  text-decoration: none;
  line-height: 1.4;
}

.sidebar a > span:first-of-type,
.nav-fold > summary > span {
  min-width: 0;
  flex: 1;
}

.sidebar a:hover,
.nav-fold > summary:hover {
  color: var(--fg);
  background: var(--bg-soft);
}

.sidebar a[aria-current="page"] {
  background: var(--bg-sunken);
  color: var(--fg);
  font-weight: 500;
}

/* A platform's endpoints fold under it: the mark, the name, a chevron that turns when open. */
.nav-fold > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-fold > summary::-webkit-details-marker {
  display: none;
}

.nav-fold > summary .logo-of {
  flex: none;
}

.nav-fold > summary .icon-chevron {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--faint);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.nav-fold[open] > summary .icon-chevron {
  transform: none;
}

.nav-fold[open] > summary {
  color: var(--fg);
  font-weight: 500;
}

.nav-fold > ul {
  margin: 2px 0 6px 17px;
  padding-left: 9px;
  border-left: 1px solid var(--line);
}

.sidebar a[data-method]::before {
  content: attr(data-method);
  flex: none;
  width: 32px;
  text-align: center;
  font: 600 0.56rem / 1 var(--mono);
  letter-spacing: 0.02em;
  padding: 3px 0;
  border-radius: 4px;
  color: var(--method, var(--muted));
  background: var(--method-bg, var(--bg-sunken));
}

/* The current operation's method fills in, the way the request line shows it. */
.sidebar a[data-method][aria-current="page"]::before {
  color: var(--bg);
  background: var(--method, var(--muted));
}

.nav-badge {
  flex: none;
  font: 500 0.58rem / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 5px;
  border-radius: 4px;
  color: var(--muted);
  background: var(--bg-sunken);
}

.nav-badge-deprecated {
  color: var(--warn);
  background: var(--warn-soft);
}

/* HTTP methods: one quiet color each, the same in the sidebar, the overview and an operation's request line. */
[data-method="GET"],
.method-get {
  --method: var(--ok);
  --method-bg: var(--ok-soft);
}

[data-method="POST"],
.method-post {
  --method: var(--accent-ink);
  --method-bg: var(--accent-soft);
}

[data-method="PATCH"],
[data-method="PUT"],
.method-patch,
.method-put {
  --method: var(--warn);
  --method-bg: var(--warn-soft);
}

[data-method="DELETE"],
.method-delete {
  --method: var(--err);
  --method-bg: var(--err-soft);
}

.method {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  font: 600 0.68rem / 1 var(--mono);
  letter-spacing: 0.03em;
  color: var(--method, var(--fg-soft));
  background: var(--method-bg, var(--bg-sunken));
  border-radius: 6px;
  padding: 5px 7px;
  flex: none;
}

/* ---- "On this page" ---- */

.toc {
  position: sticky;
  top: var(--docs-header);
  align-self: start;
  max-height: calc(100vh - var(--docs-header));
  overflow: auto;
  padding: 44px 0 48px;
  font-size: 0.84rem;
}

.toc h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 0.84rem / 1.2 var(--font);
  color: var(--fg);
  margin-bottom: 12px;
}

.toc h2 .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--line);
}

.toc a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
}

.toc a:hover {
  color: var(--fg);
}

.toc a[aria-current="true"] {
  color: var(--fg);
  font-weight: 500;
  border-left-color: var(--fg);
}

/* ---- An operation's request line: the method and path in a hairline box, then "Try it" ---- */

.method-bar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 22px 0 0;
}

.method-line {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.method-line code {
  flex: 1;
  min-width: 0;
  background: none;
  padding: 0;
  font-size: 0.875rem;
  color: var(--fg);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.try-it {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--fg);
  color: var(--on-fg);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
}

.try-it:hover {
  background: var(--fg-hover);
  color: var(--on-fg);
}

/* ---- Reference sections: a heading on a hairline, its aside (a content type, the status tabs) on the right ---- */

.prose > .ref-sec {
  margin: 0 0 8px;
}

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 44px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.prose .sec-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sec-aside {
  font: 0.75rem / 1.4 var(--mono);
  color: var(--muted);
}

.sec-head + .fields-list,
.sec-head + div > .fields-list,
.sec-head + .md-only + div > .fields-list {
  border-top: 0;
}

.sec-head + p,
.sec-head + .panel-tabs,
.sec-head + .callout {
  margin-top: 16px;
}

/* The status menu in a section's heading ("● 200 ⌄"): a dot for success or error. */
.sec-aside {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sec-aside .tablist {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
}

.sec-aside .lang-menu::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--faint);
}

.sec-aside .lang-menu[data-tone="ok"]::before {
  background: var(--ok);
}

.sec-aside .lang-menu[data-tone="err"]::before {
  background: var(--err);
}

.sec-aside .lang-menu select {
  font: 500 0.78rem / 1 var(--mono);
}

.panel-tabs.response-tabs.js > .panel > p:first-of-type {
  margin-top: 16px;
}

/* The IDs an integration uses, under the page. */
.ref-ids {
  margin: 48px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.ref-ids code {
  font-size: 0.75rem;
}

.prose .ref-ids a {
  color: var(--muted);
}

/* An operation's description (its OpenAPI Markdown) under its head. */
.ref-desc {
  line-height: 1.7;
}

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

/* ---- Fields: parameters and response fields as rows (name, type, flags, then the description) ---- */

.fields-list {
  border-top: 1px solid var(--line);
  margin: 0 0 20px;
}

.field-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--docs-header) + 24px);
}

.field-row:target {
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.field-name,
.prose a.field-name {
  text-decoration: none;
}

.field-name code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}

.prose a.field-name:hover code {
  color: var(--accent-ink);
}

.field-type,
.field-flag,
.field-req {
  font: 0.72rem / 1.5 var(--mono);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--muted);
  background: var(--bg-sunken);
}

.field-type small {
  font-size: inherit;
  color: var(--faint);
}

.field-req {
  color: var(--pink-ink);
  background: var(--pink-soft);
}

.field-flag.yes {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.field-doc {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.field-doc p {
  margin: 4px 0 0;
}

.field-doc p:first-child {
  margin-top: 0;
}

.field-enum,
.field-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.82rem;
}

.field-enum span,
.field-example span {
  color: var(--muted);
  margin-right: 2px;
}

.field-enum code,
.field-example code {
  font-size: 0.76rem;
  word-break: break-all;
}

/* An object's fields open in a hairline box under it ("Show 6 child fields"). */
.field-kids {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.field-kids > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.84rem;
  color: var(--fg-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.field-kids > summary::-webkit-details-marker {
  display: none;
}

.field-kids > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 3px 0 1px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.field-kids[open] > summary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.field-kids > summary:hover {
  color: var(--fg);
}

.field-kids .hide,
.field-kids[open] .show {
  display: none;
}

.field-kids[open] .hide {
  display: inline;
}

.fields-list.nested {
  margin: 0;
  padding: 0 14px;
  border-top: 1px solid var(--line);
}

.fields-list.nested > .field-row:last-child {
  border-bottom: 0;
}

/* What the Markdown twin reads instead of the rich version (components.ts dual): never shown on the page. */
.md-only {
  display: none;
}

/* A fold for what most readers skip: more parameters, the balance rules. */
details.more-params {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
}

details.more-params > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  list-style: none;
}

details.more-params > summary::-webkit-details-marker {
  display: none;
}

details.more-params > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

details.more-params[open] > summary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

details.more-params[open] > summary {
  border-bottom: 1px solid var(--line);
}

details.more-params .fields-list {
  border-top: 0;
  margin: 0;
}

details.more-params .field-row:last-child {
  border-bottom: 0;
}

details.more-params .more-body {
  padding: 14px 0 4px;
  font-size: 0.92rem;
}

/* ---- Panels behind tabs (status codes, examples, guide tabs). Without JavaScript they stack under their labels ---- */

.panel-tabs {
  margin: 0 0 24px;
}

.panel-tabs.js .panel-label {
  display: none;
}

.panel-label {
  font: 500 0.72rem / 1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
}

.panel-tabs.js > .tablist {
  padding: 0;
  gap: 4px;
  min-height: 0;
  border: 0;
  margin-bottom: 14px;
}

.panel-tabs.js > .tablist [role="tab"] {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 0.76rem / 1 var(--mono);
}

.panel-tabs.js > .tablist [role="tab"][aria-selected="true"] {
  box-shadow: none;
  color: var(--fg);
  border-color: var(--fg);
}

/* ---- Code in the docs: a hairline frame on a sunken surface, its header on top, the code in a card inside ---- */

.docs .code,
.docs .code-tabs.js,
.docs .window {
  margin: 0 0 24px;
  padding: 0 4px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-sunken);
  box-shadow: none;
  overflow: hidden;
}

.docs .code-tabs.js .code,
.docs .window .code,
.docs .window .code-tabs.js,
.docs .window .panel-tabs {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.docs .code pre {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.8rem;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.docs .code pre:hover {
  scrollbar-color: var(--line-strong) transparent;
}

.docs .code figcaption,
.docs .code-tabs.js > .tablist,
.docs .window .panel-tabs.js > .tablist {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  margin: 0;
  padding: 0 4px 0 10px;
  border: 0;
  font: 500 0.8rem / 1 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-soft);
}

.docs .code-tabs.js .code figcaption,
.docs .window .panel .code figcaption {
  display: none;
}

.docs .code-tabs.js > .tablist [role="tab"],
.docs .window .panel-tabs.js > .tablist [role="tab"] {
  align-self: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 500 0.8rem / 1 var(--font);
  color: var(--muted);
}

.docs .code-tabs.js > .tablist [role="tab"]::before,
.docs .window .panel-tabs.js > .tablist [role="tab"]::before {
  content: none;
}

.docs .code-tabs.js > .tablist [role="tab"]:hover,
.docs .window .panel-tabs.js > .tablist [role="tab"]:hover {
  color: var(--fg);
}

.docs .code-tabs.js > .tablist [role="tab"][aria-selected="true"],
.docs .window .panel-tabs.js > .tablist [role="tab"][aria-selected="true"] {
  color: var(--fg);
  border: 0;
  box-shadow: inset 0 -1.5px 0 var(--fg);
}

.docs .code-note,
.rail-note {
  margin: 0;
  padding: 8px 8px 4px;
  border: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Copy: an icon in code headers, an icon and a word elsewhere. */
.copy .icon {
  width: 14px;
  height: 14px;
}

.copy .i-done,
.copy.done .i-copy {
  display: none;
}

.copy.done .i-done {
  display: block;
  color: var(--ok);
}

.docs .code figcaption .copy,
.docs .tablist .copy {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
}

.docs .code figcaption .copy:hover,
.docs .tablist .copy:hover {
  color: var(--fg);
  background: var(--bg);
}

.docs .code figcaption .copy-label,
.docs .tablist .copy-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A language menu: "cURL ⌄", a native select drawn as text. */
.lang-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-menu select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 6px 22px 6px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--fg);
  font: 500 0.8rem / 1 var(--font);
  cursor: pointer;
}

.lang-menu select:hover {
  color: var(--fg);
}

.lang-menu .chev {
  position: absolute;
  right: 4px;
  width: 13px;
  height: 13px;
  color: var(--muted);
  pointer-events: none;
}

/* ---- The rail of an operation's page: its request and response examples, sticky beside the page ---- */

.docs .ref-rail {
  position: sticky;
  top: var(--docs-header);
  align-self: start;
  background: none;
}

.ref-rail .ep-rail-inner {
  position: static;
  display: grid;
  gap: 16px;
  max-height: calc(100vh - var(--docs-header));
  padding: 40px 0 40px;
}

.docs .ref-rail .window {
  margin: 0;
}

/* Code in the rail scrolls sideways instead of breaking words. */
.docs .ref-rail .code pre {
  white-space: pre;
  word-break: normal;
  max-height: 34vh;
}

.docs .ref-rail .window + .window .code pre {
  max-height: 44vh;
}

/* ---- Below the page: feedback and last updated on one line, then previous and next ---- */

.docs-page-foot {
  margin-top: 64px;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.feedback[hidden] {
  display: none;
}

.feedback-q {
  margin: 0;
  color: var(--fg-soft);
  font-size: 0.875rem;
}

.feedback-choice {
  display: flex;
  gap: 6px;
}

.feedback-choice[hidden] {
  display: none;
}

.feedback-choice button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.feedback-choice button .icon {
  width: 14px;
  height: 14px;
}

.feedback-choice button:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}

.feedback-choice button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.feedback-more {
  flex-basis: 100%;
  display: grid;
  gap: 8px;
  max-width: 560px;
  font-size: 0.88rem;
}

.feedback-more[hidden] {
  display: none;
}

.feedback-more label small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.feedback-more textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  resize: vertical;
}

.feedback-more textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.feedback-thanks {
  margin: 0;
  color: var(--ok);
  font-size: 0.875rem;
}

.feedback-thanks[hidden] {
  display: none;
}

.updated {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}

.pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg);
  font-weight: 500;
  font-size: 0.94rem;
  text-decoration: none;
  transition: border-color 0.15s;
}

.prose .pager a,
.pager a:hover {
  color: var(--fg);
  text-decoration: none;
}

.pager a:hover {
  border-color: var(--line-strong);
}

.pager a[rel="next"] {
  text-align: right;
  grid-column: 2;
}

.pager small {
  font: 400 0.8rem / 1.4 var(--font);
  color: var(--muted);
}

.pager a[rel="prev"] small::before {
  content: "‹ ";
}

.pager a[rel="next"] small::after {
  content: " ›";
}

/* ---- The docs footer: the mark and the links beside the docs, on one hairline-topped line ---- */

.docs-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: var(--docs-max);
  margin: 0 auto;
  padding: 28px var(--docs-side) 36px;
  color: var(--muted);
  font-size: 0.84rem;
}

.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.docs-footer-inner > span:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.docs-footer-inner a {
  color: var(--muted);
  text-decoration: none;
}

.docs-footer-inner a:hover {
  color: var(--fg);
}

/* ---- The reference overview: each platform's operations in a hairline card ---- */

.ref-index {
  display: grid;
  gap: 16px;
  margin: 20px 0 8px;
}

.ref-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.prose .ref-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.ref-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prose .ref-group li {
  margin: 0;
}

.ref-group li + li {
  border-top: 1px solid var(--line);
}

.ref-group li a,
.prose .ref-group li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  color: var(--fg);
  text-decoration: none;
}

.ref-group li a:hover {
  background: var(--bg-soft);
}

.ref-name {
  font-weight: 500;
  font-size: 0.92rem;
  min-width: 0;
}

.ref-path {
  margin-left: auto;
  background: none;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 640px) {
  .ref-path {
    display: none;
  }
}

/* ---- Narrower screens: the rail folds into the page, then the sidebar into a menu ---- */

@media (max-width: 1279px) {
  .docs,
  .docs.docs-api {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 0 44px;
  }
  .toc,
  .ref-rail {
    display: none;
  }
}

@media (min-width: 1280px) {
  .docs-api .rail-dup {
    display: none;
  }
}

@media (max-width: 960px) {
  :root {
    --docs-header: 0px;
  }
  body.chrome-docs {
    --docs-side: 16px;
  }
  .docs-header {
    position: static;
  }
  .docs-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }
  .docs-bar .header-link,
  .logo .logo-docs {
    display: none;
  }
  .docs,
  .docs.no-rail,
  .docs.docs-api {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    position: static;
    max-height: none;
    margin: 16px 0 0;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .sidebar summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    padding: 10px 0;
    list-style: none;
  }
  .sidebar .nav-fold > summary {
    padding: 6px 10px;
  }
  .sidebar summary::-webkit-details-marker {
    display: none;
  }
  .sidebar nav {
    padding-bottom: 12px;
  }
  .docs-main {
    padding-top: 24px;
  }
  .docs .title-row .page-tools {
    margin-left: 0;
  }
  .page-menu .menu {
    width: min(300px, calc(100vw - 32px));
  }
  .method-bar {
    flex-wrap: wrap;
  }
  .try-it {
    min-height: 40px;
  }
  .pager {
    grid-template-columns: 1fr;
  }
  .pager a[rel="next"] {
    grid-column: 1;
  }
}

/* Callouts: a note, tip, warning, important or caution. One quiet surface each, the icon in its color. */
.callout[data-callout] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 24px;
  border: 1px solid var(--mist-line);
  border-radius: var(--radius);
  background: var(--mist-soft);
  color: var(--fg-soft);
  font-size: 0.94rem;
  line-height: 1.65;
  --tone: var(--accent);
}

.callout-icon {
  color: var(--tone);
  padding-top: 3px;
}

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

.callout-body ul {
  padding-left: 1.1em;
  margin: 0;
}

.callout-title {
  margin: 0 0 4px;
  font-weight: 500;
  color: var(--fg);
}

.callout-tip {
  --tone: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 24%, var(--line));
  background: color-mix(in srgb, var(--ok-soft) 60%, var(--bg));
}

.callout-warning,
.callout-caution {
  --tone: var(--warn);
  border-color: var(--warn-line);
  background: color-mix(in srgb, var(--warn-soft) 70%, var(--bg));
}

.callout-caution {
  --tone: var(--err);
  border-color: color-mix(in srgb, var(--err) 26%, var(--line));
  background: color-mix(in srgb, var(--err-soft) 60%, var(--bg));
}

.callout-important {
  --tone: var(--pink);
  border-color: color-mix(in srgb, var(--pink) 22%, var(--line));
  background: color-mix(in srgb, var(--pink-soft) 55%, var(--bg));
}

/* Steps: a numbered rail down the left, each step a headed section. */
.stepper {
  list-style: none;
  padding: 0;
  margin: 8px 0 32px;
  counter-reset: stepper;
}

.prose ol.stepper {
  padding-left: 0;
}

.stepper > li {
  position: relative;
  padding: 0 0 8px 48px;
  margin: 0;
  counter-increment: stepper;
}

.stepper > li::before {
  content: counter(stepper);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font: 500 0.8rem / 1 var(--mono);
  color: var(--fg);
}

.stepper > li::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: 6px;
  border-left: 1px solid var(--line);
}

.stepper > li:last-child::after {
  display: none;
}

.prose .stepper > li > h2,
.prose .stepper > li > h3 {
  margin: 2px 0 12px;
  font-size: 1.2rem;
}

/* Guide cards: a link grid with an arrow. */
.cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .cards-2,
  .cards-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prose .cards {
  margin: 8px 0 28px;
}

.prose a.card {
  text-decoration: none;
  position: relative;
}

.card-arrow {
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--faint);
  transition:
    transform 0.15s,
    color 0.15s;
}

.card:hover .card-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* Accordions. */
details.accordion {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
}

details.accordion > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--fg);
  list-style: none;
}

details.accordion > summary::-webkit-details-marker {
  display: none;
}

details.accordion > summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
}

details.accordion[open] > summary::after {
  content: "−";
}

details.accordion > div {
  padding: 0 0 14px;
}

details.accordion > div > :last-child {
  margin-bottom: 0;
}

/* ---------- Prose ---------- */

.prose {
  min-width: 0;
  color: var(--fg-soft);
}

.prose h1,
.prose h2,
.prose h3,
.prose strong {
  color: var(--fg);
}

.prose strong {
  font-weight: 500;
}

.prose > p,
.prose li {
  line-height: 1.75;
}

.prose h2 {
  margin-top: 2.2em;
  scroll-margin-top: calc(var(--docs-header) + 16px);
}

.prose > section > h2:first-child,
.prose > header + h2 {
  margin-top: 0;
}

.prose h3 {
  margin-top: 1.8em;
}

.prose a:not(.button, .card, .anchor, .link-arrow) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1.5px;
}

.prose a:not(.button, .card, .anchor, .link-arrow):hover {
  text-decoration-color: var(--accent);
}

.prose a code {
  color: inherit;
}

.prose .anchor {
  color: inherit;
  text-decoration: none;
}

.prose .anchor:hover::after {
  content: " #";
  color: var(--faint);
}

.prose li {
  margin: 4px 0;
}

.prose ul:not(.checks, .facts, .pills, .changes, .details, .ep-uses),
.prose ol {
  padding-left: 1.3em;
}

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

.prose blockquote {
  margin: 0 0 1.4em;
  padding: 14px 18px;
  border: 1px solid var(--mist-line);
  border-radius: var(--radius);
  background: var(--mist-soft);
}

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

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4em 0;
}

.prose .callout h2 {
  margin-top: 0;
}

.prose .eyebrow .crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 32px;
}

.index-grid code {
  font-size: 0.75rem;
  word-break: break-all;
}

/* FAQ: hairline rows, a dusk-blue plus. */
.faq {
  display: grid;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--fg);
  padding: 16px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--accent);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > div {
  padding: 0 0 18px;
  color: var(--fg-soft);
}

/* ---------- Shared marketing sections (home, platform and endpoint pages) ---------- */

/* A section's head: kicker, a two-voice h2, an optional link on the right. */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding: 128px var(--pad) 44px;
}

.section-head > div {
  max-width: 780px;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0;
}

.section-head .link-arrow {
  white-space: nowrap;
}

@media (max-width: 960px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 80px;
    gap: 20px;
  }
}

/* A grid of hairline cells: the cell borders are drawn by the cells, the grid draws the top line. */
.cells {
  display: grid;
  border-top: 1px solid var(--line);
}

.cells > * {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-width: 0;
}

/* Inside a page's padded column the grid draws its own left edge; on the home page the frame does. */
main.wrap .cells {
  border-left: 1px solid var(--line);
}

.cells-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cells-4 > :nth-child(4n) {
  border-right: 0;
}

.cells-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cells-3 > :nth-child(3n) {
  border-right: 0;
}

@media (max-width: 960px) {
  .cells-4,
  .cells-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cells-4 > :nth-child(4n),
  .cells-3 > :nth-child(3n) {
    border-right: 1px solid var(--line);
  }
  .cells-4 > :nth-child(2n),
  .cells-3 > :nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 560px) {
  .cells-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .cells-3 > * {
    border-right: 0;
  }
}

/* Facts: mono labels with their values in chips. */
.factrow > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 22px;
  font: 500 0.75rem / 1.3 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.factrow b {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--mist);
  color: var(--fg);
  white-space: nowrap;
}

/* Platforms as cells: the mark on a white tile, the name, what it serves; planned ones faded. */
.platform-cell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 26px 24px 24px;
  color: var(--fg);
  text-decoration: none;
}

a.platform-cell:hover {
  background: var(--bg-soft);
}

.platform-cell .top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.tile.small {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: none;
}

.tile.large {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

.platform-cell strong {
  display: block;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.platform-cell span.what {
  display: block;
  margin-top: 3px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.platform-cell.soon {
  color: var(--muted);
}

.platform-cell.soon .tile {
  box-shadow: none;
  border-color: var(--bg-sunken);
}

.platform-cell.soon .logo-of {
  opacity: 0.5;
}

.platform-cell.soon span.what {
  color: var(--faint);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font: 500 0.66rem / 1.6 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--mist-soft);
  color: var(--fg);
  white-space: nowrap;
}

.tag.live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
}

.tag.soon {
  background: none;
  color: var(--faint);
}

/* A resource chip: its glyph and its name in mono, inside a hairline. */
.rchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  font: 500 0.66rem / 1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  white-space: nowrap;
}

a.rchip:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}

/* Endpoint rows: logo, name, resource, request, price. */
.erows {
  border-top: 1px solid var(--line);
}

.erow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1.5fr) 140px minmax(0, 1.3fr) 130px;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}

.erow:hover {
  background: var(--bg-soft);
}

.erow .name {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.erow .name .badge {
  margin-left: 8px;
}

.erow code {
  background: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erow .price {
  justify-self: end;
  display: inline-flex;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

.erow .price .icon {
  color: var(--accent);
}

@media (max-width: 960px) {
  .erow {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }
  .erow .rchip,
  .erow code {
    display: none;
  }
}

/* Credit packs as cells; the best value sits on mist. */
.pack {
  padding: 28px 24px 30px;
}

.pack .head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font: 500 0.72rem / 1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pack .best {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
}

.pack .best::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

.pack .amount {
  color: var(--fg);
  margin: 28px 0 2px;
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pack p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.pack.is-best {
  background: var(--mist) var(--dots) 0 0 / 18px 18px;
}

/* ---------- Home ---------- */

.home .frame > section,
.home .hero {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.hero {
  padding-top: clamp(64px, 10vw, 104px);
  padding-bottom: 72px;
}

.hero-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-bottom: 26px;
}

.hero-label .kicker {
  margin: 0;
}

.stack-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--fg-soft);
}

.stack {
  display: flex;
}

.stack span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
}

.stack span + span {
  margin-left: -6px;
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.625rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 22ch;
  margin: 0 0 26px;
}

.hero h1 .accent {
  display: block;
}

.hero .lead {
  font-size: clamp(1.06rem, 1.6vw, 1.19rem);
  max-width: 600px;
  margin: 0;
}

.hero .actions {
  margin: 36px 0 0;
}

/* The home stage: the window's bottom edge runs into the facts row. */
.home .stage {
  padding: 52px 52px 0;
  border-bottom-color: var(--line);
}

.home .stage .window {
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.demo-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.demo-tabs[hidden] {
  display: none;
}

.demo-tabs [role="tablist"] {
  display: flex;
  gap: 2px;
}

.demo-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.demo-tabs button:hover {
  color: var(--fg);
}

.demo-tabs button[aria-selected="true"] {
  color: var(--fg);
  font-weight: 500;
  background: var(--bg);
  box-shadow:
    0 0 0 1px var(--line),
    var(--shadow-sm);
}

.demo-tabs a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.demo-tabs a:hover {
  color: var(--fg);
}

.demo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.demo-panel[hidden] {
  display: none;
}

.demo-panel > div {
  min-width: 0;
}

.demo-panel > div:first-child {
  border-right: 1px solid var(--line);
  background: var(--code-bg);
}

.demo-panel .code,
.demo-panel .code-tabs.js {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.demo-panel .code pre {
  height: 400px;
  max-height: none;
  background: none;
}

.demo-panel .demo-req .code pre {
  white-space: pre-wrap;
  word-break: break-all;
}

.demo-panel .accepts {
  margin: 0 18px 22px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--mist-soft);
  border: 1px solid var(--mist-line);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--fg-soft);
}

.demo-panel .accepts strong {
  color: var(--fg);
  font-weight: 500;
}

.demo-panel .demo-req .code pre {
  height: auto;
  min-height: 140px;
}

@media (max-width: 960px) {
  .home .stage {
    padding: 24px 14px 0;
  }
  .demo-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-panel > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .demo-panel .code pre {
    height: auto;
    max-height: 360px;
  }
}

/* 01 / 02 / 03 */
.step {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 34px;
}

.step .num {
  font: 500 0.75rem / 1 var(--mono);
  color: var(--accent);
}

.step .visual {
  margin-top: 26px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--mist-soft);
  border: 1px solid var(--mist-line);
  font: 0.78rem / 1.6 var(--mono);
  color: var(--fg-soft);
  overflow: hidden;
}

.step .visual b {
  font-weight: 400;
  color: var(--fg);
}

.step .visual .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.step .visual .free {
  color: var(--ok);
}

.step .visual .key {
  color: var(--j-key);
}

.step .visual .logos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.step .visual .logos span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.step h3 {
  margin: 22px 0 6px;
  font-size: 1.1rem;
}

.step p {
  margin: 0;
  color: var(--fg-soft);
  font-size: 0.97rem;
}

/* For agents: a definition list beside a copyable prompt on a stage. */
.agents {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  padding: 128px var(--pad) 72px;
}

.agents .kicker + h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.agents h2 span {
  color: var(--gray);
}

.agent-facts {
  margin: 36px 0 0;
  border-top: 1px solid var(--line);
}

.agent-facts div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.agent-facts dt {
  font: 0.8rem / 1.6 var(--mono);
  color: var(--fg);
}

.agent-facts dd {
  margin: 0;
  color: var(--fg-soft);
  font-size: 0.95rem;
}

.agent-facts a {
  color: inherit;
  text-decoration: none;
}

.agents .stage {
  border-radius: var(--radius-lg);
  padding: 28px;
}

.agents .code pre {
  white-space: pre-wrap;
  max-height: 420px;
}

@media (max-width: 960px) {
  .agents {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 80px;
    gap: 32px;
  }
  .agents .stage {
    padding: 14px;
  }
}

/* The closing band: the one ink surface. */
.cta-band {
  background: var(--band) var(--dots-ink) 0 0 / 18px 18px;
  color: #fff;
}

.cta-band .frame {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding: 120px var(--pad);
  border-color: var(--band-line);
}

.cta-band h2 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  color: #fff;
}

.cta-band h2 span {
  color: #a9bcd6;
}

.cta-band .actions {
  margin: 0;
  flex-wrap: nowrap;
}

.cta-band .button {
  background: transparent;
  color: #fff;
  border-color: #3a3a41;
}

.cta-band .button:hover {
  border-color: #6b6b74;
}

.cta-band .button.primary {
  background: #fff;
  color: #0b0b0d;
  border-color: #fff;
}

.cta-band .button.primary:hover {
  background: var(--mist);
  border-color: var(--mist);
}

@media (max-width: 960px) {
  .cta-band .frame {
    flex-direction: column;
    align-items: flex-start;
    padding: 72px var(--pad);
  }
  .cta-band .actions {
    flex-wrap: wrap;
  }
}

/* ---------- Endpoint pages ---------- */

.ep-head {
  padding: 48px var(--pad) 40px;
}

.ep-head .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.ep-head .crumbs ol {
  margin: 0;
}

.ep-title {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 36px;
}

.ep-h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 4px;
}

.ep-title h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
}

.ep-title .lead {
  margin: 16px 0 0;
  max-width: 720px;
}

.ep-title .actions {
  margin: 28px 0 0;
}

.ep-facts > div {
  padding: 16px 22px 18px;
}

.ep-facts dt {
  font: 500 0.7rem / 1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ep-facts dd {
  margin: 6px 0 0;
  font-size: 0.97rem;
  color: var(--fg);
}

.ep-facts dd code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  word-break: break-all;
}

.ep-facts .live-status {
  font-size: 0.85rem;
}

.ep-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
}

.ep-main {
  min-width: 0;
  padding: 56px 48px 80px var(--pad);
  border-right: 1px solid var(--line);
}

.ep-main > section,
.ep-main > aside {
  margin: 0 0 64px;
}

.ep-main h2 {
  font-size: 1.625rem;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}

.ep-main h2 span {
  color: var(--gray);
}

.ep-uses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ep-uses li {
  position: relative;
  padding: 16px 18px 16px 44px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.97rem;
}

.ep-uses li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 24px;
  width: 10px;
  height: 5px;
  border-left: 1.75px solid var(--accent);
  border-bottom: 1.75px solid var(--accent);
  transform: rotate(-45deg);
}

.ep-rail {
  background: var(--mist) var(--dots) 0 0 / 18px 18px;
}

.ep-rail-inner {
  position: sticky;
  top: var(--header);
  max-height: calc(100vh - var(--header));
  overflow: auto;
  padding: 40px 32px;
  scrollbar-width: none;
}

.ep-rail .window {
  margin-bottom: 20px;
}

.ep-rail .window .code-tabs.js,
.ep-rail .window > .code {
  border-bottom: 1px solid var(--line);
}

.ep-rail .window .code:last-child {
  border-bottom: 0;
}

.ep-rail .code pre {
  max-height: 46vh;
}

.ep-rail .code-tabs pre {
  white-space: pre-wrap;
  word-break: break-all;
}

.ep-rail .run {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--mist-line);
  font-size: 0.875rem;
  color: var(--fg-soft);
}

.ep-rail .run a {
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
}

.rail-dup {
  display: none;
}

@media (max-width: 1160px) {
  .ep-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ep-main {
    border-right: 0;
    padding-right: var(--pad);
  }
  .ep-rail {
    display: none;
  }
  .rail-dup {
    display: block;
  }
}

@media (max-width: 640px) {
  .ep-title {
    flex-direction: column;
    gap: 16px;
  }
  .ep-uses {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ep-more .platform-cell {
  gap: 20px;
}

/* ---------- Pricing tables ---------- */

.examples li {
  margin: 8px 0;
}

/* ---------- Playground ---------- */

.pg {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 40px;
  align-items: start;
}

.pg[hidden] {
  display: none;
}

@media (max-width: 960px) {
  .pg {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pg-form {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--bg);
}

.field {
  margin: 0 0 18px;
}

.field label,
.field-group legend {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.field-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 0;
  margin: 0 0 18px;
  min-width: 0;
}

.field-group legend {
  padding: 0 6px;
  font: 500 0.7rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-group[hidden] {
  display: none;
}

.hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.84rem;
  margin: 6px 0 0;
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 0.94rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-height: 42px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 0;
  border-color: var(--accent);
}

.field label.check,
.field-group label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 8px 0 0;
}

.field label.check input,
.field-group label.check input {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.pg-out {
  scroll-margin-top: 80px;
}

.pg-out .code pre {
  max-height: 640px;
}

input[aria-invalid="true"] {
  border-color: var(--err);
}

.pg-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin: 0 0 16px;
  font-size: 0.9rem;
}

.pg-status p {
  margin: 0;
}

.status-pill {
  font: 500 0.78rem var(--mono);
  border-radius: 4px;
  padding: 3px 8px;
}

.status-ok {
  color: var(--ok);
  background: var(--ok-soft);
}

.status-err {
  color: var(--err);
  background: var(--err-soft);
}

/* The interactive reference (Scalar) brings its own sticky sidebar; keep our header in the flow there. */
body:has(main.bleed:not(:has(.home, .ep))) .site-header {
  position: static;
}

/* Draft resources: schema previews, never styled as available. Reserved error codes: documented, not returned yet. */
.badge-draft,
.badge-reserved {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line-strong);
}

/* Deprecated endpoints (Listing.Lifecycle). */
.badge-deprecated,
.badge-retired {
  border-color: transparent;
  color: var(--warn);
  background: var(--warn-soft);
}

.errors ul.details {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.86rem;
}

.callout-draft,
.callout.deprecated {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.callout-draft h2,
.callout.deprecated h2 {
  color: var(--warn);
}

/* ---------- Live status (filled by site.js from the gateway; hidden without it) ---------- */

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 0.72rem / 1.7 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--bg-sunken);
}

.live-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.live-healthy {
  color: var(--ok);
  background: var(--ok-soft);
}

.live-degraded {
  color: var(--warn);
  background: var(--warn-soft);
}

.live-unknown,
.live-unavailable {
  color: var(--muted);
}

.live-status small {
  color: var(--muted);
}

.live-unavailable {
  font-size: 0.82rem;
}

table.status .live-col {
  display: none;
}

table.status.live-on .live-col {
  display: table-cell;
}

.live-panel {
  margin: 0 0 24px;
}

/* ---------- Changelog: a timeline, the date beside each entry ---------- */

.changelog .page-head {
  display: grid;
  gap: 4px;
}

.changelog-subscribe {
  margin: 16px 0 0;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.prose ol.timeline {
  padding-left: 0;
}

.timeline > li.changelog-entry {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--docs-header) + 16px);
}

.changelog-entry .when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: sticky;
  top: calc(var(--docs-header) + 20px);
  align-self: start;
  font: 500 0.78rem / 1.4 var(--mono);
  color: var(--muted);
}

.changelog-entry h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.changelog-entry .what > :last-child {
  margin-bottom: 0;
}

.changelog-entry ul.changes {
  font-size: 0.84rem;
}

.changelog-entry details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 720px) {
  .timeline > li.changelog-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .changelog-entry .when {
    position: static;
    flex-direction: row;
    align-items: center;
  }
}

/* ---------- Account pages: signup, link confirmation, dashboard (src/pages/account.ts, assets/account.js) ---------- */

.narrow {
  max-width: 640px;
}

.account-form {
  max-width: 520px;
}

.account-form.inline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.dash section {
  margin: 0 0 40px;
}

code.secret {
  display: inline-block;
  padding: 6px 8px;
  user-select: all;
}

/* ---------- Search (assets/search.js over the search index) ---------- */

dialog.search {
  width: min(680px, calc(100vw - 32px));
  max-height: min(600px, 80vh);
  margin: 10vh auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
}

dialog.search[open] {
  display: flex;
  flex-direction: column;
  animation: menu-in 0.14s ease-out;
}

dialog.search::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(3px);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.search-box input {
  flex: 1;
  border: 0;
  min-height: 56px;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: none;
}

.search-box input:focus-visible {
  outline: none;
}

.search-box input::-webkit-search-cancel-button {
  display: none;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 6px 8px 10px;
  overflow: auto;
  flex: 1;
}

.search-group-label {
  margin: 10px 8px 4px;
  font: 500 0.66rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg);
  text-decoration: none;
}

.search-icon {
  grid-row: 1 / 3;
  align-self: start;
  margin-top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 0;
  position: relative;
}

.search-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--muted);
  border-radius: 2px;
}

.search-icon[data-type="reference"]::after {
  border-radius: 50%;
  border-color: var(--accent);
}

.search-icon[data-type="schema"]::after {
  border-radius: 3px;
  border-style: dashed;
  border-color: var(--accent);
}

.search-icon[data-type="recent"]::after {
  border-radius: 50%;
  border-style: dotted;
}

.search-results a strong {
  font-weight: 500;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-sep {
  color: var(--faint);
  margin: 0 2px;
}

.search-results a small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-results small:empty {
  display: none;
}

.search-results mark {
  background: none;
  color: var(--accent-ink);
  font-weight: 500;
}

.search-results [aria-selected="true"] a,
.search-results a:hover {
  background: var(--accent-soft);
}

.search-results [aria-selected="true"] .search-icon {
  border-color: var(--accent-line);
  background: var(--bg);
}

.search-empty {
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
}

.search-foot {
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 0.74rem;
}

.search-foot kbd {
  margin-right: 3px;
}

@media (max-width: 640px) {
  .search-foot {
    display: none;
  }
}

/* ---------- Endpoint product pages: what you get, the closing call to action ---------- */

.ep-section > .kicker {
  margin-bottom: 10px;
}

.ep-section > h2 span {
  color: var(--gray);
}

.ep-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 14px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ep-fields > div {
  padding: 14px 16px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ep-fields dt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ep-fields dt code {
  background: none;
  padding: 0;
  font-weight: 600;
  font-size: 0.82rem;
}

.ep-fields dt span {
  font: 0.72rem / 1 var(--mono);
  color: var(--muted);
}

.ep-fields dd {
  margin: 6px 0 0;
  color: var(--fg-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .ep-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ep-facts dd small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.ep-cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding: 72px var(--pad);
  border-top: 1px solid var(--line);
  background: var(--mist) var(--dots) 0 0 / 18px 18px;
}

.ep-cta h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -0.035em;
  margin: 0 0 10px;
  max-width: 20ch;
}

.ep-cta h2 span {
  color: var(--gray);
}

.ep-cta p {
  margin: 0;
  color: var(--fg-soft);
  max-width: 52ch;
}

.ep-cta .actions {
  margin: 0;
  flex: none;
}

@media (max-width: 860px) {
  .ep-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ep-related {
  border-top: 1px solid var(--line);
  padding: 8px var(--pad) 56px;
}

/* ---------- The quickstart's key box (site.js): the public docs key, or the reader's own test key ---------- */

.keybox {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid var(--mist-line);
  border-radius: var(--radius);
  background: var(--mist-soft);
}

.keybox > * {
  min-width: 0;
}

.keybox .button {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  padding-top: 6px;
  padding-bottom: 6px;
}

.keybox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.keybox-label {
  font: 500 0.7rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.keybox-value {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.keybox-value code {
  flex: 1;
  min-width: 0;
  background: none;
  padding: 0;
  font-size: 0.84rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.keybox p {
  margin: 0;
  font-size: 0.88rem;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button .icon,
  .card,
  .card-arrow,
  .pager a,
  .link-arrow .icon,
  .link-list .icon {
    transition: none;
  }
  .page-menu .menu,
  dialog.search[open] {
    animation: none;
  }
}