:root {
  --background: #0f1216;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --surface: #1a1c22;
  --surface-variant: #252830;
  --surface-container: #1e2024;
  --surface-container-high: #282a2f;
  --surface-container-highest: #333538;
  --primary: #a8c7fa;
  --on-primary: #062e6f;
  --primary-container: rgba(168, 199, 250, 0.12);
  --secondary: #c3c7cf;
  --tertiary: #e8b9d5;
  --on-surface: #e2e2e9;
  --on-surface-variant: #c4c7d0;
  --outline: #44474f;
  --outline-variant: #44474f80;
  --nav-active-bg: rgba(168, 199, 250, 0.15);
  --scrim: rgba(0, 0, 0, 0.5);
  --aqi-good: #4ade80;
  --aqi-satisfactory: #a3e635;
  --aqi-moderate: #facc15;
  --aqi-poor: #fb923c;
  --aqi-very-poor: #f87171;
  --aqi-severe: #dc2626;
  --us-aqi-good: #5ccf6b;
  --us-aqi-moderate: #f2d23c;
  --us-aqi-sensitive: #ff9640;
  --us-aqi-unhealthy: #f05a5a;
  --us-aqi-very-unhealthy: #b072c8;
  --us-aqi-hazardous: #b03a5b;
  --nav-height: 80px;
  --sidebar-width: 260px;
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-duration-short1: 50ms;
  --motion-duration-short2: 100ms;
  --motion-duration-short3: 150ms;
  --motion-duration-short4: 200ms;
  --motion-duration-medium1: 250ms;
  --motion-duration-medium2: 300ms;
  --motion-duration-medium3: 350ms;
  --motion-duration-medium4: 400ms;
  --motion-duration-long1: 450ms;
  --motion-duration-long2: 500ms;
  --shape-corner-none: 0;
  --shape-corner-extra-small: 4px;
  --shape-corner-small: 8px;
  --shape-corner-medium: 12px;
  --shape-corner-large: 16px;
  --shape-corner-extra-large: 28px;
  --shape-corner-full: 9999px;
  --motion-spring-squish: linear(
    0,
    0.0446,
    0.1613,
    0.324,
    0.5087,
    0.6946,
    0.8656,
    1.0103,
    1.1221,
    1.1987,
    1.2413,
    1.2538,
    1.2418,
    1.2117,
    1.1702,
    1.1232,
    1.0761,
    1.0329,
    0.9964,
    0.9683,
    0.9491,
    0.9385,
    0.9356,
    0.9388,
    0.9465,
    0.9572,
    0.9691,
    0.981,
    0.992,
    1.0012,
    1.0082,
    1.013,
    1.0156,
    1.0163,
    1.0155,
    1.0135,
    1.0108,
    1.0077,
    1.0047,
    1.002,
    1
  );
  --motion-spring-spatial: linear(
    0,
    0.0128,
    0.0469,
    0.0969,
    0.158,
    0.2262,
    0.2982,
    0.3716,
    0.4441,
    0.5143,
    0.5808,
    0.6429,
    0.7,
    0.7518,
    0.7983,
    0.8394,
    0.8754,
    0.9064,
    0.9329,
    0.9552,
    0.9736,
    0.9886,
    1.0006,
    1.0099,
    1.0169,
    1.022,
    1.0254,
    1.0274,
    1.0283,
    1.0283,
    1.0276,
    1.0264,
    1.0248,
    1.0229,
    1.0209,
    1.0189,
    1.0168,
    1.0148,
    1.0128,
    1.011,
    1
  );
  --motion-screen: var(--motion-duration-medium2);
  --motion-color: var(--motion-duration-long2);
  --motion-num: var(--motion-duration-long2);
  --motion-press: var(--motion-duration-short3);
  --motion-list: var(--motion-duration-medium3);
  --motion-shape: var(--motion-duration-medium3);
  --motion-squish: 625ms;
  --list-stagger: 50ms;
  --pulse-play: running;
}
:root[data-motion-off~='screenTransitions'] {
  --motion-screen: 1ms;
}
:root[data-motion-off~='colorTransitions'] {
  --motion-color: 1ms;
}
:root[data-motion-off~='numberAnimations'] {
  --motion-num: 1ms;
}
:root[data-motion-off~='pressFeedback'] {
  --motion-press: 1ms;
  --motion-squish: 1ms;
}
:root[data-motion-off~='listAnimations'] {
  --motion-list: 1ms;
  --list-stagger: 0ms;
}
:root[data-motion-off~='shapeTransitions'] {
  --motion-shape: 1ms;
}
:root[data-motion-off~='pulseEffects'] {
  --pulse-play: paused;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion-chosen]) {
    --motion-color: 1ms;
    --motion-num: 1ms;
    --motion-list: 1ms;
    --motion-shape: 1ms;
    --motion-squish: 1ms;
    --list-stagger: 0ms;
    --pulse-play: paused;
  }
}
[data-theme='light'] {
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #f8fafc;
  --surface: #ffffff;
  --surface-variant: #e2e8f0;
  --surface-container: #f1f5f9;
  --surface-container-high: #e2e8f0;
  --surface-container-highest: #cbd5e1;
  --primary: #1d4ed8;
  --on-primary: #ffffff;
  --primary-container: rgba(29, 78, 216, 0.12);
  --secondary: #475569;
  --tertiary: #7c3aed;
  --on-surface: #0f172a;
  --on-surface-variant: #475569;
  --outline: #94a3b8;
  --outline-variant: #94a3b880;
  --nav-active-bg: rgba(29, 78, 216, 0.12);
  --scrim: rgba(0, 0, 0, 0.32);
  --us-aqi-good: #2f9e4a;
  --us-aqi-moderate: #e0b400;
  --us-aqi-sensitive: #ea7a1c;
  --us-aqi-unhealthy: #dc3b3b;
  --us-aqi-very-unhealthy: #8e4fae;
  --us-aqi-hazardous: #8a1f3d;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition:
    background-color var(--motion-color) var(--motion-easing-standard),
    color var(--motion-color) var(--motion-easing-standard);
}
:root.theme-changing *,
:root.theme-changing *::before,
:root.theme-changing *::after {
  transition:
    background-color var(--motion-color) var(--motion-easing-standard),
    border-color var(--motion-color) var(--motion-easing-standard),
    color var(--motion-color) var(--motion-easing-standard),
    fill var(--motion-color) var(--motion-easing-standard) !important;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--primary);
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
}
p {
  margin: 0;
}
sub {
  line-height: 0;
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--shape-corner-medium);
  background: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus {
  top: 12px;
}

.btn-filled,
.btn-tonal,
.btn-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--motion-press) var(--motion-easing-standard),
    border-radius var(--motion-shape) var(--motion-spring-spatial),
    transform var(--motion-squish) var(--motion-spring-squish);
}
.btn-filled {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-filled:hover {
  background: color-mix(in srgb, var(--primary) 88%, var(--on-primary));
  border-radius: 12px;
}
.btn-tonal {
  background: var(--primary-container);
  color: var(--primary);
}
.btn-tonal:hover {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 12px;
}
.btn-outlined {
  background: transparent;
  color: var(--primary);
  border-color: var(--outline);
}
.btn-outlined:hover {
  background: var(--surface-variant);
  border-radius: 12px;
}
.btn-filled:active,
.btn-tonal:active,
.btn-outlined:active {
  transform: scale(0.95);
}
.btn-large {
  height: 52px;
  padding: 0 26px;
  border-radius: 26px;
  font-size: 15px;
}
.btn-large:hover {
  border-radius: 16px;
}
.btn-filled svg,
.btn-tonal svg,
.btn-outlined svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--motion-press) var(--motion-easing-standard),
    border-radius var(--motion-shape) var(--motion-spring-spatial);
}
.icon-btn:hover {
  background: var(--surface-variant);
  border-radius: 12px;
}
.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}
[data-theme='dark'] .theme-toggle-btn .moon-icon,
[data-theme='light'] .theme-toggle-btn .sun-icon {
  display: none;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.text-link:hover {
  text-decoration: underline;
}
.text-link svg,
.live-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-container) 100%);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-corner-extra-large);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
}
[data-theme='light'] .card {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-press) var(--motion-easing-standard);
}
.topbar.scrolled {
  border-bottom-color: var(--outline-variant);
}
.topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  height: 68px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--on-surface);
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}
.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-left: -6px;
}
.topnav {
  display: flex;
  gap: 2px;
  margin: 0 auto;
}
.topnav a {
  padding: 8px 14px;
  border-radius: 18px;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background var(--motion-press) var(--motion-easing-standard),
    color var(--motion-press) var(--motion-easing-standard);
}
.topnav a:hover {
  background: var(--surface-variant);
  color: var(--on-surface);
}
.topnav a.active {
  background: var(--nav-active-bg);
  color: var(--primary);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.footer {
  margin-top: 40px;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface);
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 360px;
}
.footer-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.footer-name {
  font-size: 18px;
  font-weight: 700;
}
.footer-brand p {
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--on-surface-variant);
}
.footer-brand a {
  font-size: 14px;
  text-decoration: none;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: 32px;
}
.footer-links h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 12px;
}
.footer-links a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: var(--on-surface);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--primary);
}


code,
pre,
kbd {
  font-family: 'Roboto Mono', ui-monospace, monospace;
}
:not(pre) > code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-container-high);
  color: var(--on-surface);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
.brand-tag {
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--primary-container);
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
}

.layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
}
.toc {
  position: sticky;
  top: 68px;
  align-self: start;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  padding: 32px 0 40px;
  scrollbar-width: thin;
}
.toc-group + .toc-group {
  margin-top: 20px;
}
.toc-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin: 0 0 6px 12px;
}
.toc a {
  display: block;
  padding: 6px 12px;
  border-radius: 16px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background var(--motion-press) var(--motion-easing-standard),
    color var(--motion-press) var(--motion-easing-standard);
}
.toc a:hover {
  background: var(--surface-variant);
  color: var(--on-surface);
}
.toc a.active {
  background: var(--nav-active-bg);
  color: var(--primary);
  font-weight: 500;
}
.toc a code,
.toc-mobile a code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 12.5px;
}
.toc-mobile {
  display: none;
}

.doc {
  min-width: 0;
  padding-bottom: 40px;
}
.doc-hero {
  padding: 56px 0 24px;
}
.chip-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--primary-container);
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
}
.doc-hero h1 {
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -1px;
}
.lead {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--on-surface-variant);
  max-width: 720px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.fact {
  padding: 16px 18px;
}
.fact-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.fact-value {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.doc-section {
  padding: 48px 0 8px;
  border-top: 1px solid var(--outline-variant);
  margin-top: 40px;
}
.doc-section:first-of-type {
  border-top: none;
  margin-top: 0;
}
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.doc-section > h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.doc h3 {
  font-size: 21px;
  font-weight: 700;
  margin: 36px 0 12px;
  scroll-margin-top: 88px;
}
.doc h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 26px 0 10px;
}
.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--on-surface-variant);
}
.doc p + p {
  margin-top: 14px;
}
.doc p strong,
.doc li strong {
  color: var(--on-surface);
}
.doc ul,
.doc ol {
  margin: 12px 0;
  padding-left: 22px;
}
.doc li + li {
  margin-top: 6px;
}
.doc em {
  color: var(--on-surface);
}

.note {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--shape-corner-large) var(--shape-corner-large) 0;
  background: var(--primary-container);
}
.note p {
  color: var(--on-surface);
  font-size: 15px;
}
.note.warn {
  border-left-color: var(--aqi-poor);
  background: color-mix(in srgb, var(--aqi-poor) 12%, transparent);
}

.endpoint {
  scroll-margin-top: 88px;
  padding-top: 8px;
}
.endpoint + .endpoint {
  margin-top: 48px;
}
.endpoint-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-corner-large);
  background: var(--surface-container);
  margin-bottom: 16px;
}
.method {
  padding: 4px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--aqi-good) 18%, transparent);
  color: var(--aqi-good);
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
[data-theme='light'] .method {
  color: #15803d;
}
.endpoint-path {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 15px;
  color: var(--on-surface);
  overflow-wrap: anywhere;
}
.endpoint-path var {
  font-style: normal;
  color: var(--primary);
}
.endpoint h3 {
  margin-top: 0;
}

.table-wrap {
  margin: 16px 0 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-corner-large);
  overflow-x: auto;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc th {
  text-align: left;
  padding: 10px 14px;
  background: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.doc td {
  padding: 10px 14px;
  border-top: 1px solid var(--outline-variant);
  vertical-align: top;
  color: var(--on-surface-variant);
  line-height: 1.6;
}
.doc td:first-child {
  color: var(--on-surface);
  white-space: nowrap;
}
.doc td code {
  white-space: nowrap;
}
.doc td.wrap code {
  white-space: normal;
}
.type {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--tertiary);
  white-space: nowrap;
}
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: 0;
}

.code {
  position: relative;
  margin: 16px 0;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-corner-large);
  background: var(--surface-container);
  overflow: hidden;
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 16px;
  border-bottom: 1px solid var(--outline-variant);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--on-surface);
  tab-size: 2;
}
.copy-btn {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition:
    background var(--motion-press) var(--motion-easing-standard),
    border-radius var(--motion-shape) var(--motion-spring-spatial);
}
.copy-btn:hover {
  background: var(--primary-container);
  border-radius: 10px;
}
.copy-btn.copied {
  color: var(--aqi-good);
}
.tok-key {
  color: var(--primary);
}
.tok-str {
  color: var(--aqi-satisfactory);
}
.tok-num {
  color: var(--tertiary);
}
.tok-lit {
  color: var(--aqi-poor);
}
.tok-com {
  color: var(--on-surface-variant);
  font-style: italic;
}
[data-theme='light'] .tok-str {
  color: #15803d;
}
[data-theme='light'] .tok-lit {
  color: #c2410c;
}

details.expander {
  margin: 16px 0;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-corner-large);
  background: var(--surface-container);
  overflow: hidden;
}
details.expander > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface);
}
details.expander > summary::-webkit-details-marker {
  display: none;
}
.chevron {
  width: 22px;
  height: 22px;
  fill: var(--on-surface-variant);
  flex-shrink: 0;
  transition: transform var(--motion-shape) var(--motion-spring-spatial);
}
details[open]:not(.closing) > summary .chevron {
  transform: rotate(180deg);
}
.expander-body {
  overflow: hidden;
}
details.expander .code {
  margin: 0;
  border: none;
  border-top: 1px solid var(--outline-variant);
  border-radius: 0;
}

.formula {
  margin: 18px 0 14px;
  overflow-x: auto;
  color: var(--on-surface);
}
.formula math {
  font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', math;
  font-size: 1.3em;
}

.footer {
  margin-top: 0;
}

@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .toc {
    display: none;
  }
  .toc-mobile {
    display: block;
    margin: 24px 0 0;
  }
  .toc-mobile .toc-body {
    padding: 4px 8px 12px;
  }
  .toc-mobile .toc-group + .toc-group {
    margin-top: 12px;
  }
  .toc-mobile a {
    display: block;
    padding: 6px 12px;
    border-radius: 16px;
    color: var(--on-surface-variant);
    font-size: 14px;
    text-decoration: none;
  }
  .toc-mobile a:hover {
    background: var(--surface-variant);
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .topbar-inner {
    padding: 0 16px;
    gap: 12px;
  }
  .brand-logo {
    width: 44px;
    height: 44px;
  }
  .brand {
    font-size: 20px;
  }
  .topbar-cta {
    padding: 0 16px;
  }
  .layout {
    padding: 0 16px;
  }
  .doc-hero {
    padding-top: 32px;
  }
  .lead {
    font-size: 16px;
  }
  .doc-section {
    padding-top: 36px;
    margin-top: 28px;
  }
  .footer-links {
    grid-template-columns: repeat(2, minmax(120px, auto));
  }
}
@media (max-width: 420px) {
  .brand-tag {
    display: none;
  }
  .fact {
    padding: 14px;
  }
  .fact-value code {
    font-size: 12px;
  }
}
.fact-value code {
  font-size: 13px;
  overflow-wrap: normal;
  white-space: nowrap;
}