@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("/assets/fonts/michroma-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/assets/fonts/space-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/assets/fonts/space-mono-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --font-title: "Michroma", sans-serif;
  --font-subtitle: "Space Mono", monospace;
  --font-body: "Geist", Arial, sans-serif;
  --ink: #111820;
  --panel: #182129;
  --text: #ffffff;
  --muted: #a6afb9;
  --line: rgba(255, 255, 255, .16);
  --orange: #ff5a0a;
  --orange-text: #ff7a38;
  --type-hero-title: clamp(2rem, 4.5vw, 3.5rem);
  --type-card-title: 1.375rem;
  --type-subtitle: .75rem;
  --type-body-lead: 1.25rem;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-action: .875rem;
  --gutter: clamp(16px, 4.5vw, 64px);
  --content-max: 1360px;
}
@media (prefers-color-scheme: light) {
  :root { --ink: #f4f1ea; --panel: #ebe7de; --text: #0e151d; --muted: #4f5964; --line: rgba(17, 24, 32, .18); --orange-text: #b83d00; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 var(--type-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; left: 16px; top: 10px; padding: 12px; background: var(--orange); color: #fff; font: 400 var(--type-action) var(--font-title); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; padding: 18px var(--gutter); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 14px; align-items: center; text-decoration: none; }
.brand img { display: block; width: 150px; height: auto; }
.brand-label { padding-left: 14px; border-left: 1px solid var(--line); color: var(--orange-text); font: 700 var(--type-subtitle) var(--font-subtitle); letter-spacing: .15em; text-transform: uppercase; }
.search { display: flex; flex: 1 1 260px; min-width: 0; max-width: 520px; margin-left: auto; }
.search input { flex: 1; width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-right: 0; border-radius: 0; background: var(--panel); color: var(--text); font: 400 var(--type-body) var(--font-body); }
.search button, .search-large button { min-height: 44px; padding: 0 18px; border: 1px solid var(--orange); border-radius: 0; background: var(--orange); color: #fff; font: 400 var(--type-action) var(--font-title); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.app-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--orange); font: 400 var(--type-action) var(--font-title); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }

main { display: block; max-width: var(--content-max); margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--gutter) 96px; }
.eyebrow { margin: 0 0 14px; color: var(--orange-text); font: 700 var(--type-subtitle) var(--font-subtitle); letter-spacing: .15em; text-transform: uppercase; }
h1, h2 { font-family: var(--font-title); font-weight: 400; letter-spacing: -.02em; }
h1 { margin: 0 0 18px; font-size: var(--type-hero-title); line-height: 1.1; }
.lede { max-width: 60rem; margin: 0 0 24px; color: var(--muted); font-size: var(--type-body-lead); line-height: 1.5; }
.meta { margin: 32px 0 0; color: var(--muted); font: 400 var(--type-subtitle)/1.6 var(--font-subtitle); letter-spacing: .06em; text-transform: uppercase; }
.hero { margin-bottom: 48px; }

.product-list ul, .group ul, .docs-nav ul, .toc ul, .results, .result-sections, .browse, .breadcrumbs ol { margin: 0; padding: 0; list-style: none; }
.product-card { display: grid; gap: 8px; max-width: 520px; padding: 28px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; }
.product-card:hover { border-color: var(--orange); }
.product-card strong { font: 400 var(--type-card-title) var(--font-title); }
.product-card span { color: var(--muted); }
.product-card small { color: var(--orange-text); font: 700 var(--type-subtitle) var(--font-subtitle); letter-spacing: .1em; text-transform: uppercase; }

.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px 48px; }
.group h2 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: var(--type-card-title); scroll-margin-top: 24px; }
.group li a { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.group li a strong { font-weight: 600; }
.group li a:hover strong { color: var(--orange-text); text-decoration: underline; }
.group li a span { color: var(--muted); font-size: var(--type-small); }

.breadcrumbs { margin-bottom: 28px; font: 400 var(--type-subtitle) var(--font-subtitle); letter-spacing: .06em; text-transform: uppercase; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }

.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 48px; align-items: start; }
.docs-nav summary { display: none; }
.docs-nav h2 { margin: 24px 0 8px; color: var(--muted); font: 700 var(--type-subtitle) var(--font-subtitle); letter-spacing: .12em; text-transform: uppercase; }
.docs-nav section:first-child h2 { margin-top: 0; }
.docs-nav a { display: block; padding: 7px 10px; border-left: 2px solid transparent; font-size: var(--type-small); text-decoration: none; }
.docs-nav a:hover { color: var(--orange-text); }
.docs-nav a[aria-current="page"] { border-left-color: var(--orange); background: var(--panel); font-weight: 600; }

.article { max-width: 46rem; }
.article section { scroll-margin-top: 24px; }
.article h2 { margin: 40px 0 12px; font-size: var(--type-card-title); line-height: 1.25; }
.article h2 .anchor { text-decoration: none; }
.article h2 .anchor:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.article p { margin: 0 0 16px; }
.in-app { display: grid; gap: 4px; margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--orange); background: var(--panel); }
.in-app span { color: var(--orange-text); font: 700 var(--type-subtitle) var(--font-subtitle); letter-spacing: .15em; text-transform: uppercase; }
.callout { margin: 32px 0; padding: 18px 20px; border: 1px solid var(--orange); }
.callout p { margin: 0; }

.toc { position: sticky; top: 24px; }
.toc h2 { margin: 0 0 10px; color: var(--muted); font: 700 var(--type-subtitle) var(--font-subtitle); letter-spacing: .12em; text-transform: uppercase; }
.toc a { display: block; padding: 6px 0; font-size: var(--type-small); }
.ask-card { margin-top: 32px; padding: 18px; border: 1px solid var(--line); background: var(--panel); font-size: var(--type-small); }
.ask-card p { color: var(--muted); }
.ask-card a { font-weight: 600; }

.search-large label { display: block; margin-bottom: 8px; font: 700 var(--type-subtitle) var(--font-subtitle); letter-spacing: .1em; text-transform: uppercase; }
.search-large div { display: flex; max-width: 640px; }
.search-large input { flex: 1; width: 100%; min-width: 0; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-right: 0; border-radius: 0; background: var(--panel); color: var(--text); font: 400 var(--type-body-lead) var(--font-body); }
.search-status { margin-top: 20px; color: var(--muted); }
.results { display: grid; gap: 28px; max-width: 48rem; }
.results > li { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.results h2 { margin: 0 0 8px; font-size: var(--type-card-title); }
.results p { margin: 0 0 8px; }
.result-sections { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--type-small); }
.browse { display: grid; gap: 10px; }
.browse a { font-weight: 600; }

.site-footer { display: grid; gap: 16px 48px; grid-template-columns: minmax(0, 1fr) auto; padding: 40px var(--gutter); border-top: 1px solid var(--line); font-size: var(--type-small); }
.site-footer strong { font: 400 var(--type-action) var(--font-title); letter-spacing: .04em; }
.site-footer p { margin: 6px 0 0; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-content: start; }
.site-footer nav a { display: inline-flex; min-height: 32px; align-items: center; }
.storage-note, .legal-note { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .docs { grid-template-columns: minmax(0, 1fr) 220px; }
  .docs-nav { grid-column: 1 / -1; order: 3; border: 1px solid var(--line); }
  .docs-nav summary { display: flex; min-height: 48px; align-items: center; padding: 0 16px; font: 400 var(--type-action) var(--font-title); text-transform: uppercase; cursor: pointer; }
  .docs-nav nav { padding: 0 16px 16px; }
}
@media (max-width: 760px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { position: static; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .app-link { margin-left: auto; }
  .site-footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }