/* ai-guard docs — design system.
   Plain CSS, no build step, one file shared by the landing page and every
   guide page so they can't visually drift apart. The accent blue below is
   not arbitrary: it's the same blue the live /dashboard already uses for
   its spend chart, so the product and its docs read as one thing. */

:root {
  /* Light is the default; dark mode follows the operating system below. */
  --bg: #f4f6f9;
  --bg-raised: #ffffff;
  --bg-inset: #eaeef4;
  --border: #d4dbe4;
  --border-strong: #9aa6b6;

  /* Text */
  --text: #0c1116;
  --text-muted: #4a5462;
  --text-faint: #6b7583;

  /* Brand blue, taken from the dashboard's own spend chart. */
  --accent: #1f6feb;
  --accent-strong: #0a53c4;
  --accent-dim: #dce9fd;
  --accent-ink: #ffffff;

  /* Signal colors, matching the dashboard exactly */
  --ok: #17803d;
  --warn: #9a6700;
  --fail: #cf222e;

  /* to ensure that the sticky header is visible over content that scrolls under it */
  --header-bg: rgba(255, 255, 255, 0.85);
  --illustration: #9dabbd;
  --grid-opacity: 0.55;

  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --radius: 8px;
  --radius-sm: 6px;
  --header-h: 62px;
  --content-max: 760px;
  --sidebar-w: 250px;
  --toc-w: 200px;
}

* {
  box-sizing: border-box;
}

/* `hidden` is only a UA default of display:none, so any author rule that
   sets display outranks it and the element keeps rendering while
   el.hidden = true reports success. That's what left the screenshot
   lightbox covering the whole page. Reset it once here rather than
   guarding each selector. */
[hidden] {
  display: none !important;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0b0d;
    --bg-raised: #12141a;
    --bg-inset: #0e1015;
    --border: #22262f;
    --border-strong: #333947;
    --text: #eef0f5;
    --text-muted: #99a0ad;
    --text-faint: #5c6270;
    --accent: #3987e5;
    --accent-strong: #6ba8ef;
    --accent-dim: #1f3a5c;
    --accent-ink: #071019;
    --ok: #29c46a;
    --warn: #fab219;
    --fail: #e66767;
    --header-bg: rgba(10, 11, 13, 0.82);
    --illustration: var(--border-strong);
    --grid-opacity: 0.3;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0b0d;
  --bg-raised: #12141a;
  --bg-inset: #0e1015;
  --border: #22262f;
  --border-strong: #333947;
  --text: #eef0f5;
  --text-muted: #99a0ad;
  --text-faint: #5c6270;
  --accent: #3987e5;
  --accent-strong: #6ba8ef;
  --accent-dim: #1f3a5c;
  --accent-ink: #071019;
  --ok: #29c46a;
  --warn: #fab219;
  --fail: #e66767;
  --header-bg: rgba(10, 11, 13, 0.82);
  --illustration: var(--border-strong);
  --grid-opacity: 0.3;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Subtle background grid: cheap, no image asset, gives the dark canvas
   some texture without competing with the content on top of it. */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: var(--grid-opacity);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

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

code.inline,
:not(pre) > code {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.87em;
  color: var(--accent-strong);
  white-space: nowrap;
}

kbd {
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------- Top nav, shared by every page ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.site-header .brand .mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header nav.top-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
  font-size: 15px;
}

.site-header nav.top-links a {
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
}

.site-header nav.top-links a:hover {
  color: var(--text);
  background: var(--bg-raised);
}

.site-header nav.top-links a.active {
  color: var(--accent-strong);
}

.site-header .spacer {
  flex: 1;
}

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

.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  padding: 6px 8px 6px 10px;
  font-size: 14.5px;
  cursor: pointer;
  font-family: inherit;
}

.search-trigger:hover {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.search-trigger .kbd {
  display: flex;
  gap: 2px;
}

.gh-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  padding: 6px;
}

.gh-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.gh-icon:hover {
  color: var(--text);
}

/* Sponsor link. Deliberately not styled as a primary button: it sits next
   to "Get started", and two solid buttons competing in one header means
   neither wins. Quiet until hover, when the heart picks up GitHub's own
   sponsor pink so it's recognizable as what it is. */
.sponsor-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg-inset);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sponsor-link svg {
  color: var(--text-faint);
  transition: color 0.15s ease, transform 0.15s ease;
}

.sponsor-link:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.sponsor-link:hover svg {
  color: #db61a2;
  transform: scale(1.12);
}

/* Below the nav breakpoint the header is brand + actions only, so drop
   the word and keep the heart. */
@media (max-width: 760px) {
  .sponsor-link span {
    display: none;
  }

  .sponsor-link {
    padding: 6px 8px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary {
  background: var(--accent);
  color: #04101f;
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--bg-raised);
  border-color: var(--text-faint);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ---------- Hero ---------- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero {
  padding: 72px 0 48px;
  text-align: center;
  position: relative;
}

.hero-illustration {
  width: 100%;
  max-width: 900px;
  height: auto;
  color: var(--illustration);
  margin: 0 auto 8px;
  display: block;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 22px;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.hero h1 {
  font-size: 52px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 650;
}

.hero h1 .accent {
  color: var(--accent-strong);
}

.hero .lead {
  max-width: 620px;
  margin: 0 auto 30px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.6;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 44px;
}

/* ---------- Terminal window mockup ---------- */

.terminal-window {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.terminal-window .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

.terminal-window .bar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.terminal-window .bar .title {
  margin-left: 8px;
  font-size: 13.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.terminal-window pre {
  margin: 0;
  padding: 18px 20px 22px;
  font-size: 14.5px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
}

.terminal-window .muted {
  color: var(--text-faint);
}

.terminal-window .cmd {
  color: var(--text);
}

.terminal-window .cmd::before {
  content: "$ ";
  color: var(--accent-strong);
}

.terminal-window .ok {
  color: var(--ok);
}

.terminal-window .fail {
  color: var(--fail);
}

.terminal-window .warn {
  color: var(--warn);
}

/* ---------- Provider strip ---------- */

.engine-strip {
  padding: 8px 0 56px;
  text-align: center;
}

.engine-strip-label {
  display: block;
  font-size: 16px;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.engine-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.engine-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-muted);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.engine-badge:hover {
  border-color: var(--eng, var(--border-strong));
  color: var(--text);
}

.engine-badge .glyph {
  width: 19px;
  height: 19px;
  display: flex;
}

.engine-badge .glyph svg {
  width: 100%;
  height: 100%;
}

/* ---------- Sections ---------- */

.section {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

.section.tight {
  padding: 40px 0;
}

.section-head {
  max-width: 680px;
  margin: 0 auto 36px;
  text-align: center;
}

.section-head h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.section-head p {
  color: var(--text-muted);
  font-size: 18.5px;
  line-height: 1.65;
  margin: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.feature-card .icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent-strong);
  margin-bottom: 14px;
}

.feature-card h3 {
  font-size: 19.5px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.65;
}

/* ---------- Doc entry cards ---------- */
/* A .feature-card that's a link. Same surface, but it has to advertise
   that it's clickable, which the static cards don't need to. */

.doc-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.doc-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.doc-card h3 {
  color: var(--accent-strong);
}

/* ---------- Quickstart ---------- */
/* Numbered vertical steps. The number sits in its own column so the
   code blocks all share one left edge and read as a single sequence
   rather than four unrelated snippets. */

.quickstart-steps {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.qs-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.qs-num {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent-strong);
  font-size: 17.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qs-body {
  min-width: 0;
}

.qs-body h3 {
  font-size: 19.5px;
  font-weight: 700;
  margin: 4px 0 8px;
  letter-spacing: -0.01em;
}

.qs-body p {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 12px;
}

.qs-body pre {
  margin: 0;
}

@media (max-width: 640px) {
  .qs-step {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---------- Comparison table ---------- */

table.compare {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 15.5px;
}

table.compare th,
table.compare td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

table.compare th {
  color: var(--text-faint);
  font-weight: 500;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.compare td.center,
table.compare th.center {
  text-align: center;
}

table.compare tr.highlight {
  background: var(--accent-dim);
}

table.compare tr.highlight td {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Code sample with language tabs ---------- */

.code-tabs {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-inset);
  text-align: left;
}

.code-tabs .tab-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

.code-tabs .tab {
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
}

.code-tabs .tab.active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.code-tabs .panel {
  display: none;
  position: relative;
}

.code-tabs .panel.active {
  display: block;
}

.code-tabs pre {
  margin: 0;
  padding: 18px 52px 18px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  overflow-x: auto;
  max-width: 100%;
}

.pre-wrap {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: var(--font-sans);
}

.copy-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.copy-btn.copied {
  color: var(--ok);
  border-color: var(--ok);
}

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 20px 60px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14.5px;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

/* ---------- Guide layout: sidebar + content + on-page toc ---------- */

.guide-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  align-items: start;
}

.guide-sidebar {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  font-size: 15px;
  overflow-y: auto;
  padding: 28px 18px 40px;
  border-right: 1px solid var(--border);
}

.guide-sidebar .group {
  margin-bottom: 22px;
}

.guide-sidebar .group-label {
  color: var(--text-faint);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  padding-left: 10px;
  margin: 0 0 6px;
  padding: 0 10px;
}

.guide-sidebar details {
  margin-bottom: 22px;
}

.guide-sidebar summary {
  list-style: none;
  cursor: pointer;
  padding: 0 10px 6px;
  color: var(--text-faint);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

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

.guide-sidebar summary::after {
  content: "+";
  float: right;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
}

.guide-sidebar details[open] summary::after {
  content: "-";
}

.guide-sidebar summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.guide-sidebar a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.4;
}

.guide-sidebar a:hover {
  color: var(--text);
  background: var(--bg-raised);
}

.guide-sidebar a.active {
  color: var(--accent-strong);
  background: var(--accent-dim);
  font-weight: 600;
}

.guide-content {
  min-width: 0;
  padding: 40px 32px 100px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.guide-content h1 {
  font-size: 34px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  /*padding: 40px 48px 100px;*/
}

.guide-content .dek {
  color: var(--text-muted);
  font-size: 17px;
  margin: 0 0 32px;
}

.guide-content h2 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.guide-content h3 {
  font-size: 18px;
  margin: 28px 0 10px;
  scroll-margin-top: 76px;
}

.guide-content p {
  color: var(--text-muted);
  margin: 0 0 16px;
}

.guide-content strong {
  color: var(--text);
}

.guide-content ul,
.guide-content ol {
  color: var(--text-muted);
  padding-left: 22px;
  margin: 0 0 16px;
}

.guide-content li {
  margin-bottom: 6px;
}

.guide-content pre {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 52px 16px 18px;
  overflow-x: auto;
  /* Scroll long lines horizontally rather than wrapping them: wrapping
     broke multi-line code with trailing comments (a comment mid-wraps
     onto the next line, reading as a separate statement) and split long
     unbroken tokens like generated API keys mid-string. A contained
     horizontal scrollbar reads better than either. */
  white-space: pre;
  max-width: 100%;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 20px;
  position: relative;
}

.pre-comment {
  color: var(--text-faint);
  font-style: italic;
}

.guide-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 24px;
}

.guide-content table th,
.guide-content table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.guide-content table th {
  color: var(--text-faint);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-inset);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 15.5px;
  color: var(--text-muted);
}

.callout.warn {
  border-left-color: var(--warn);
}

.callout strong {
  color: var(--text);
}

.guide-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  font-size: 14px;
}

.guide-toc .label {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12.5px;
  margin-bottom: 10px;
}

.guide-toc a {
  display: block;
  padding: 4px 0;
  text-decoration: none;
  color: var(--text-faint);
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

.guide-toc a:hover,
.guide-toc a.active {
  color: var(--accent-strong);
  border-left-color: var(--accent);
}

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.page-nav a {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
}

.page-nav a:hover {
  border-color: var(--border-strong);
  background: var(--bg-inset);
}

.page-nav .label {
  display: block;
  color: var(--text-faint);
  font-size: 13px;
  margin-bottom: 4px;
}

.page-nav .next {
  text-align: right;
}

/* ---------- Search overlay ---------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 7, 8, 0.7);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.search-overlay.open {
  display: flex;
}

.search-panel {
  width: 100%;
  max-width: 560px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}

.search-input-row input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16.5px;
  font-family: var(--font-sans);
}

.search-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
}

.search-results a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
}

.search-results a:hover,
.search-results a.active {
  background: var(--bg-inset);
}

.search-results .r-title {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}

.search-results .r-section {
  font-size: 13px;
  color: var(--text-faint);
}

.search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14.5px;
}

/* ---------- Light theme override ---------- */

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="light"] :root,
html[data-theme="light"] {
  /* Cool grey-blue rather than the warm beige this used to be. Beige on
     a page full of blue accents and code reads as dingy; a slight cool
     cast lets the same accent blue stay vivid in both themes.
     The three surfaces are deliberately far enough apart to see: the page
     recedes, cards sit on top of it in pure white, code blocks sink back
     in. In the old palette bg and bg-inset were 3% apart, so cards and
     code had no edge and everything looked flat. */
  --bg: #f4f6f9;
  --bg-raised: #ffffff;
  --bg-inset: #eaeef4;
  --border: #d4dbe4;
  --border-strong: #9aa6b6;

  /* Near-black, not grey. Body copy at #4a5462 still clears 7:1 on the
     page background, so the muted tone is a choice rather than a
     legibility tax. */
  --text: #0c1116;
  --text-muted: #4a5462;
  --text-faint: #6b7583;

  /* accent-strong inverts meaning per theme: it's whichever shade reads
     more clearly against that theme's background. Lighter in dark mode,
     darker here. */
  --accent: #1f6feb;
  --accent-strong: #0a53c4;
  --accent-dim: #dce9fd;
  --accent-ink: #ffffff;

  /* The dark-mode signal colors are tuned to glow on near-black and turn
     muddy and low-contrast on white. These are the same three signals at
     light-background weight. */
  --ok: #17803d;
  --warn: #9a6700;
  --fail: #cf222e;

  --header-bg: rgba(255, 255, 255, 0.85);
  --illustration: #9dabbd;
  --grid-opacity: 0.55;
}

/* Depth in light mode has to come from shadow. Dark mode gets separation
   from surfaces glowing against near-black; on white there's nothing to
   glow against, so raised elements need an actual cast shadow or they
   read as flat rectangles. */
html[data-theme="light"] .terminal-window,
html[data-theme="light"] .search-panel {
  box-shadow: 0 18px 38px -20px rgba(12, 17, 22, 0.22);
}

html[data-theme="light"] .feature-card,
html[data-theme="light"] .qs-body pre,
html[data-theme="light"] .code-tabs {
  box-shadow: 0 1px 2px rgba(12, 17, 22, 0.05);
}

html[data-theme="light"] .doc-card:hover {
  box-shadow: 0 10px 24px -12px rgba(31, 111, 235, 0.3);
}

html[data-theme="light"] .site-header {
  box-shadow: 0 1px 3px rgba(12, 17, 22, 0.05);
}

html[data-theme="light"] .btn-primary {
  color: #ffffff;
}

/* Cards sit above the page rather than blending into it. */
html[data-theme="light"] .feature-card,
html[data-theme="light"] .engine-badge {
  background: var(--bg-raised);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-sidebar,
  .guide-toc {
    position: static;
  }
}

@media (max-width: 640px) {
  .site-header nav.top-links {
    display: none;
  }

  .hero h1 {
    font-size: 36px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  main {
    padding: 0 16px;
  }
}

/* ---------- Dashboard screenshot carousel ---------- */
.carousel {
  position: relative;
}
.carousel-viewport {
  overflow: hidden;
  border-radius: 12px;
}
.carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0 2px;
}
.carousel-slide img {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
.carousel-slide:not(.is-active) img {
  opacity: 0.35;
}
.carousel-slide figcaption {
  margin-top: 14px;
  font-size: 16px;
  color: var(--text-secondary);
  text-align: center;
  min-height: 22px;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}
.carousel-btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16.5px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.carousel-btn:hover {
  border-color: var(--series-1);
  transform: scale(1.06);
}
.carousel-dots {
  display: flex;
  gap: 8px;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.carousel-dot.active {
  background: var(--series-1);
  transform: scale(1.3);
}

/* ---------- Screenshot lightbox ---------- */
/* Kept hidden by the global [hidden] reset near the top of this file. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  border: none;
  background: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}