/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/postman-orbit.docs.buildwithfern.com/c940764593d0fe5d596be327ca7558855e018039fb78509aa21921fd3644c3e4/fonts/Inter-Variable-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0300-0323;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/_img/c940764593d0fe5d596be327ca755885-v1.latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/_fern-files/postman-orbit.docs.buildwithfern.com/c36f509c0a8f9f85f29cb44bc8701d8a9e0b14c499e77a884f789ead7093a7ac/fonts/IBMPlexMono-Regular-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/_fern-files/postman-orbit.docs.buildwithfern.com/a76f53ca6612e7b3828eec2311098675b7f9849ae4169a8bcef6302aec02a6c0/fonts/IBMPlexMono-Medium-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 107.12%;
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 40px;
  --font-body: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Inter', 'Inter Fallback', 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fafefd;
  --accent-2: #f3fbf9;
  --accent-3: #e0f8f3;
  --accent-4: #cdf3eb;
  --accent-5: #b8eae1;
  --accent-6: #a2ded3;
  --accent-7: #85cdc0;
  --accent-8: #57b9a9;
  --accent-9: #4aad9e;
  --accent-10: #25a393;
  --accent-11: #007d70;
  --accent-12: #103d36;

  --accent-a1: #00cc9905;
  --accent-a2: #00aa800c;
  --accent-a3: #00c69d1f;
  --accent-a4: #00c29932;
  --accent-a5: #00b49447;
  --accent-a6: #00a5875d;
  --accent-a7: #01977c7a;
  --accent-a8: #00957da8;
  --accent-a9: #008c77b5;
  --accent-a10: #009381da;
  --accent-a11: #007d70;
  --accent-a12: #003029ef;

  --accent-contrast: #fff;
  --accent-surface: #f0faf8cc;
  --accent-indicator: #4aad9e;
  --accent-track: #4aad9e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0046 181.9);
      --accent-2: oklch(98.1% 0.0088 181.9);
      --accent-3: oklch(96.1% 0.0265 181.9);
      --accent-4: oklch(93.5% 0.041 181.9);
      --accent-5: oklch(90% 0.0531 181.9);
      --accent-6: oklch(85.6% 0.063 181.9);
      --accent-7: oklch(79.7% 0.0748 181.9);
      --accent-8: oklch(72.1% 0.0953 181.9);
      --accent-9: oklch(68.5% 0.0953 181.9);
      --accent-10: oklch(64.6% 0.1075 181.9);
      --accent-11: oklch(53% 0.0953 181.9);
      --accent-12: oklch(32.7% 0.0495 181.9);

      --accent-a1: color(display-p3 0.0235 0.7569 0.5137 / 0.016);
      --accent-a2: color(display-p3 0.0196 0.6471 0.4667 / 0.044);
      --accent-a3: color(display-p3 0.0039 0.6941 0.5412 / 0.102);
      --accent-a4: color(display-p3 0.0039 0.702 0.5373 / 0.169);
      --accent-a5: color(display-p3 0.0039 0.6431 0.5098 / 0.24);
      --accent-a6: color(display-p3 0.0039 0.5647 0.451 / 0.314);
      --accent-a7: color(display-p3 0.0039 0.5098 0.4078 / 0.416);
      --accent-a8: color(display-p3 0 0.4941 0.3961 / 0.557);
      --accent-a9: color(display-p3 0 0.4549 0.3725 / 0.604);
      --accent-a10: color(display-p3 0 0.4627 0.3843 / 0.687);
      --accent-a11: color(display-p3 0 0.3451 0.2902 / 0.789);
      --accent-a12: color(display-p3 0 0.1373 0.1098 / 0.887);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
      --accent-indicator: oklch(68.5% 0.0953 181.9);
      --accent-track: oklch(68.5% 0.0953 181.9);
    }
  }
}


.light, :root {
  --grayscale-1: #fbfdfc;
  --grayscale-2: #f7f9f8;
  --grayscale-3: #eef1f0;
  --grayscale-4: #e6e9e8;
  --grayscale-5: #dfe2e0;
  --grayscale-6: #d7dad9;
  --grayscale-7: #cbcfcd;
  --grayscale-8: #b8bcba;
  --grayscale-9: #868e8b;
  --grayscale-10: #7c8481;
  --grayscale-11: #5f6563;
  --grayscale-12: #1a211e;

  --grayscale-a1: #00804004;
  --grayscale-a2: #00402008;
  --grayscale-a3: #002d1e11;
  --grayscale-a4: #001f1519;
  --grayscale-a5: #00180820;
  --grayscale-a6: #00140d28;
  --grayscale-a7: #00140a34;
  --grayscale-a8: #000f0847;
  --grayscale-a9: #00110b79;
  --grayscale-a10: #00100a83;
  --grayscale-a11: #000a07a0;
  --grayscale-a12: #000805e5;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #868e8b;
  --grayscale-track: #868e8b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.986 0.992 0.988);
      --grayscale-2: color(display-p3 0.97 0.977 0.974);
      --grayscale-3: color(display-p3 0.935 0.944 0.94);
      --grayscale-4: color(display-p3 0.904 0.913 0.909);
      --grayscale-5: color(display-p3 0.875 0.885 0.88);
      --grayscale-6: color(display-p3 0.844 0.854 0.849);
      --grayscale-7: color(display-p3 0.8 0.811 0.806);
      --grayscale-8: color(display-p3 0.725 0.738 0.732);
      --grayscale-9: color(display-p3 0.531 0.556 0.546);
      --grayscale-10: color(display-p3 0.492 0.515 0.506);
      --grayscale-11: color(display-p3 0.377 0.395 0.389);
      --grayscale-12: color(display-p3 0.107 0.129 0.118);

      --grayscale-a1: #00804004;
      --grayscale-a2: #00402008;
      --grayscale-a3: #002d1e11;
      --grayscale-a4: #001f1519;
      --grayscale-a5: #00180820;
      --grayscale-a6: #00140d28;
      --grayscale-a7: #00140a34;
      --grayscale-a8: #000f0847;
      --grayscale-a9: #00110b79;
      --grayscale-a10: #00100a83;
      --grayscale-a11: #000a07a0;
      --grayscale-a12: #000805e5;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.531 0.556 0.546);
      --grayscale-track: color(display-p3 0.531 0.556 0.546);
    }
  }
}


.dark {
  --accent-1: #0b1110;
  --accent-2: #121b19;
  --accent-3: #152c28;
  --accent-4: #153933;
  --accent-5: #1e463f;
  --accent-6: #28544d;
  --accent-7: #33665e;
  --accent-8: #3c7b71;
  --accent-9: #4aad9e;
  --accent-10: #3ca192;
  --accent-11: #6dcebf;
  --accent-12: #b7ede2;

  --accent-a1: #00900002;
  --accent-a2: #8cfaa70c;
  --accent-a3: #59fecd1e;
  --accent-a4: #41fed22c;
  --accent-a5: #5cfed83a;
  --accent-a6: #6efee149;
  --accent-a7: #78ffe45c;
  --accent-a8: #76fde573;
  --accent-a9: #6bffe7a8;
  --accent-a10: #5bffe59b;
  --accent-a11: #86ffebcb;
  --accent-a12: #c5fff3ec;

  --accent-contrast: #fff;
  --accent-surface: #18262080;
  --accent-indicator: #4aad9e;
  --accent-track: #4aad9e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17% 0.0095 181.9);
      --accent-2: oklch(21.3% 0.0131 181.9);
      --accent-3: oklch(27.2% 0.0294 181.9);
      --accent-4: oklch(31.6% 0.0424 181.9);
      --accent-5: oklch(36.2% 0.0466 181.9);
      --accent-6: oklch(41.3% 0.0507 181.9);
      --accent-7: oklch(47.3% 0.0574 181.9);
      --accent-8: oklch(53.9% 0.0673 181.9);
      --accent-9: oklch(68.5% 0.0953 181.9);
      --accent-10: oklch(64.6% 0.0953 181.9);
      --accent-11: oklch(78.9% 0.0953 181.9);
      --accent-12: oklch(90.5% 0.056 181.9);

      --accent-a1: color(display-p3 0 0.8471 0 / 0.005);
      --accent-a2: color(display-p3 0.6353 0.9843 0.6549 / 0.047);
      --accent-a3: color(display-p3 0.502 1 0.8353 / 0.113);
      --accent-a4: color(display-p3 0.4745 1 0.8431 / 0.168);
      --accent-a5: color(display-p3 0.5294 1 0.8667 / 0.222);
      --accent-a6: color(display-p3 0.5843 0.9961 0.8941 / 0.281);
      --accent-a7: color(display-p3 0.6157 1 0.9059 / 0.356);
      --accent-a8: color(display-p3 0.6078 1 0.9098 / 0.444);
      --accent-a9: color(display-p3 0.5804 1 0.9176 / 0.649);
      --accent-a10: color(display-p3 0.549 1 0.9098 / 0.599);
      --accent-a11: color(display-p3 0.6471 1 0.9333 / 0.787);
      --accent-a12: color(display-p3 0.8275 1 0.9608 / 0.917);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.102 0.149 0.1255 / 0.5);
      --accent-indicator: oklch(68.5% 0.0953 181.9);
      --accent-track: oklch(68.5% 0.0953 181.9);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(74, 173, 158, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(222, 226, 228, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(74, 173, 158, 1);
  --background: rgba(12, 16, 18, 1);
  --border: rgba(35, 40, 41, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: rgba(17, 23, 25, 1);
  --theme-color: #0c1012;
}

@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");

/* Orbit docs styles. Docs, API reference and changelog share the new homepage's visual
   language (postman-eng/orbit-website): ink text, neutral metadata, one selected state, hairlines and
   no washes. Values are matched to orbit-website/src/app/globals.css on purpose, not shared tokens;
   docs keep Fern's own layout, search, page actions and theme-aware code blocks. */

/* ---------- Orbit visual language ---------- */
html {
  --color-black: #012831; /* body text: the homepage ink (was #2a2a2a) */
  --orbit-soft: #ebeeef; /* soft neutral fill: inline code, method labels, selected item */
  --orbit-muted: #374e54;
  --orbit-rule: #dee2e4;
  --orbit-edge: #4aad9e; /* the selected state's accent edge */
}

html.dark {
  --color-white: #f1f1e9; /* body text in dark: the homepage cream (was #fff) */
  --orbit-soft: #1a1e1f;
  --orbit-muted: #a5a59e;
  --orbit-rule: #232829;
}

/* Headings: one weight step below Fern's 800/700, closer to the homepage display face. */
html .fern-main :is(h1, h2) {
  font-weight: 600;
}

/* Inline code: neutral, like the homepage, not bold teal. Link and heading code keep inheriting. */
html .fern-prose code:not(.code-block):not(a code):not(:is(h1, h2, h3, h4) code) {
  color: inherit;
  font-weight: 500;
  background-color: var(--orbit-soft);
  border-color: transparent;
}

/* Method labels (POST, GET...): neutral mono, not Fern's per-method colour. The label is the
   information; colour carried none here. In a selected row the label sits on the page colour
   with a hairline so it stays visible on the soft fill. */
html .fern-docs-badge[data-badge-type="http-method"]:is(.blue, .green, .orange, .red, .amber, .purple, .gray) {
  background-color: var(--orbit-soft);
  color: var(--orbit-muted);
  font-weight: 600;
  box-shadow: none;
}

html .fern-docs-badge[data-badge-type="http-method"].solid:is(.blue, .green, .orange, .red, .amber, .purple, .gray) {
  background-color: var(--background);
  color: var(--color-black);
  box-shadow: inset 0 0 0 1px var(--orbit-rule);
}

html.dark .fern-docs-badge[data-badge-type="http-method"].solid:is(.blue, .green, .orange, .red, .amber, .purple, .gray) {
  color: var(--color-white);
}

/* One selected state, as on the homepage's filters: soft neutral fill with the accent edge. */
html .fern-sidebar-link[data-state="active"] {
  background-color: var(--orbit-soft);
  color: var(--color-black);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--orbit-edge);
}

html.dark .fern-sidebar-link[data-state="active"] {
  color: var(--color-white);
}

/* Homepage: luminous teal→white gradient from the Figma design (light mode). */
html[data-orbit-route="home"]:not(.dark) .fern-background-image {
  background-image: linear-gradient(
    258.63deg,
    rgb(204, 251, 241) 7.34%,
    rgb(224, 242, 254) 22.67%,
    rgb(255, 255, 255) 90.47%
  );
  background-repeat: no-repeat;
}

/* Dark mode: mirror the light gradient with a dark green glow on the right that
   merges left into Fern's dark background. Tuned to the darkened ring teal so
   the rings dissolve smoothly into it on the right. */
html[data-orbit-route="home"].dark .fern-background-image {
  background-image: linear-gradient(
    215deg,
    #04201d 0%,
    rgba(4, 32, 29, 0.55) 30%,
    rgba(4, 32, 29, 0) 66%
  );
  background-repeat: no-repeat;
}

/* Hide the header search bar on the homepage only (flagged by home-route-flag.js) */
html[data-orbit-route="home"] .orbit-header__search {
  display: none;
}

/* Header parity with the homepage (orbit-website/src/components/SiteHeader.tsx, NavLinks.tsx). */

/* Get started: the homepage's one filled CTA, ink on paper in light and the reverse in dark
   (globals.css --orbit-cta-*), 14px medium, instead of Fern's accent-teal fill. The phone
   menu's copy (in #fern-sidebar) takes the same colours at its own full width. */
:is(.orbit-header__links, #fern-sidebar) .fern-button.filled {
  --orbit-cta-bg: oklch(0.255 0.045 218);
  --orbit-cta-bg-hover: oklch(0.34 0.059 216.2);
  --orbit-cta-fg: oklch(0.985 0.008 105);
  border-radius: 8px;
  background: var(--orbit-cta-bg);
  color: var(--orbit-cta-fg);
  font-size: 14px;
  font-weight: 500;
}
.orbit-header__links .fern-button.filled {
  height: 36px;
  padding-inline: 16px;
}
html.dark :is(.orbit-header__links, #fern-sidebar) .fern-button.filled {
  --orbit-cta-bg: oklch(0.955 0.01 105);
  --orbit-cta-bg-hover: oklch(0.9 0.012 105);
  --orbit-cta-fg: oklch(0.255 0.045 218);
}
:is(.orbit-header__links, #fern-sidebar) .fern-button.filled:hover {
  background: var(--orbit-cta-bg-hover);
}
:is(.orbit-header__links, #fern-sidebar) .fern-button.filled:focus-visible {
  background: var(--orbit-cta-bg-hover);
}
:is(.orbit-header__links, #fern-sidebar) .fern-button.filled .fern-button-text {
  color: inherit;
}

/* Remove the teal underline bar beneath the active nav tab; the active tab
   text already turns teal, which serves as the selection indicator. */
.orbit-header__tabs [data-radix-collection-item]::after {
  display: none !important;
}

/* Hide Search and Ask AI on the Orbit landing page. */
html[data-orbit-route="home"] .fern-header-search-bar,
html[data-orbit-route="home"] #fern-search-button,
html[data-orbit-route="home"] #fern-ask-ai-button {
  display: none !important;
}

.fern-layout-overview article > header {
  padding-top: 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fern-layout-overview article > header > div:first-child {
  justify-content: center;
}

.fern-layout-overview article > header h1 {
  font-size: 3rem;
}

.welcome-help {
  text-align: center;
}

.welcome-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: -1rem;
  padding-top: 0.5rem;
  padding-bottom: 4rem;
}

/* Left-align the homepage hero (overrides the centered overview layout).
   Scoped to the home route so other overview pages stay centered. */
html[data-orbit-route="home"] .fern-layout-overview article > header {
  text-align: left;
  align-items: flex-start;
}

html[data-orbit-route="home"] .fern-layout-overview article > header > div:first-child {
  justify-content: flex-start;
}

html[data-orbit-route="home"] .welcome-buttons {
  justify-content: flex-start;
}

html[data-orbit-route="home"] .welcome-help {
  text-align: left;
}

/* ---------- Homepage hero: layered ring + star art (from Figma) ----------
   Anchors the concentric ring artwork to the top-right of the hero, bleeding up
   behind the header and off the right edge, with the copy held in the left
   column. Scoped to the home route so other pages are untouched. */
html[data-orbit-route="home"] .fern-layout-overview article {
  position: relative;
  /* Clip the ring art's rightward bleed so it never widens the page (no
     horizontal scroll), while still allowing it to bleed upward behind the
     header. overflow-clip-margin extends the visible clip region past the
     article's content box so the art can paint into the right margin (up to the
     viewport edge) instead of hard-clipping the rings at the box edge — this
     avoids the lower-right arc of the rings being cut off in dark mode. */
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 250px;
}

/* Hold the headline, subtitle and CTAs in the left column. */
html[data-orbit-route="home"] .fern-layout-overview article > header {
  max-width: 600px;
}

/* Hold the subtitle to a comfortable measure, narrower than the headline
   column, while still reading as one flowing paragraph. */
html[data-orbit-route="home"] .fern-page-subtitle {
  max-width: 480px;
}

/* Almarai display headline to match the Figma design. */
html[data-orbit-route="home"] .fern-layout-overview article > header h1 {
  font-family: "Almarai", var(--font-body, sans-serif);
  font-weight: 300;
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  /* Greedy wrap (override Fern's text-balance) so the column width controls the
     line break ("Turn any goal into the" / "right API calls."). */
  text-wrap: wrap;
}

.orbit-art {
  position: absolute;
  top: calc(-4rem - 20px);
  right: clamp(-230px, calc(-6vw - 30px), -94px);
  width: min(50vw, 663px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
}

.orbit-art__ring,
.orbit-art__star {
  position: absolute;
  /* Fern's prose styles add a 2rem block margin to images. Reset that margin
     and encode the intended art center directly so SVG and image layers stay
     aligned at every viewport width. */
  top: calc(50% + 2rem);
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  display: block;
  height: auto;
}

.orbit-art__ring--138 { width: 100%; }
.orbit-art__ring--137 { width: 81.2%; }
.orbit-art__ring--136 { width: 58.9%; }
.orbit-art__ring--135 { width: 41.1%; }
.orbit-art__star {
  width: 20.8%;
}

/* Extend the end-to-end example from the content edge to the center of the
   responsive star artwork. */
html[data-orbit-route="home"] .e2e-example {
  width: calc(
    100% - clamp(-230px, calc(-6vw - 30px), -94px) - min(25vw, 331.5px)
  );
}

/* Below the two-column breakpoint, drop the art into the flow above the CTAs
   and let the copy span the full width. */
@media (max-width: 900px) {

  /* Center the hero copy on mobile and keep it to a shorter column that always
     fits the viewport (never wider than the screen). */
  html[data-orbit-route="home"] .fern-layout-overview article > header {
    max-width: min(30rem, 92vw);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
  }

  /* Larger heading on mobile (+20px). */
  html[data-orbit-route="home"] .fern-layout-overview article > header h1 {
    font-size: clamp(46px, 12vw, 52px);
  }

  html[data-orbit-route="home"] .fern-page-subtitle {
    max-width: min(24rem, 88vw);
    margin-left: auto;
    margin-right: auto;
  }

  /* Stack the CTAs full-width instead of a single row — three buttons side
     by side don't fit any phone width, and the hero's overflow-x: clip means
     an unwrapped row silently clips rather than becoming scrollable. */
  html[data-orbit-route="home"] .welcome-buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: min(30rem, 92vw);
    margin-left: auto;
    margin-right: auto;
  }

  html[data-orbit-route="home"] .welcome-buttons .fern-button {
    width: 100%;
    justify-content: center;
  }

  /* Hide the hero graphic on mobile. */
  .orbit-art {
    display: none;
  }

  html[data-orbit-route="home"] .e2e-example {
    width: 100%;
  }

}

/* ---------- Homepage CTAs (from Figma) ---------- */
html[data-orbit-route="home"] .welcome-buttons .fern-button {
  border-radius: 8px;
}

html[data-orbit-route="home"] .welcome-buttons .fern-button.filled.primary {
  background: #00413c;
  border-color: #00413c;
  color: #fff;
}

html[data-orbit-route="home"] .welcome-buttons .fern-button.filled.primary:hover {
  background: #0b7c72;
  border-color: #0b7c72;
}
html[data-orbit-route="home"] .welcome-buttons .fern-button.filled.primary:focus-visible {
  background: #0b7c72;
  border-color: #0b7c72;
}

/* Frosted ghost button — light mode only; dark mode uses Fern's default
   outlined button to match the docs page. */
html[data-orbit-route="home"]:not(.dark) .welcome-buttons .fern-button.outlined {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(13, 148, 136, 0.25);
  color: #115e59;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Accent hover for the outlined CTAs (Book a demo, Slack, Email) — matches
   Fern's native accent hover: soft teal fill, teal border, teal text/icon. */
html[data-orbit-route="home"] .welcome-buttons .fern-button.outlined {
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

html[data-orbit-route="home"]:not(.dark) .welcome-buttons .fern-button.outlined:hover {
  background: var(--accent-a3, #d6ede7);
  border-color: var(--accent-a8, #4aad9e);
  color: var(--accent-a11, #0d7d70);
}
html[data-orbit-route="home"]:not(.dark) .welcome-buttons .fern-button.outlined:focus-visible {
  background: var(--accent-a3, #d6ede7);
  border-color: var(--accent-a8, #4aad9e);
  color: var(--accent-a11, #0d7d70);
}

/* Dark mode: same hover, using the darker button teal. */
html[data-orbit-route="home"].dark .welcome-buttons .fern-button.outlined:hover {
  background: rgba(0, 65, 60, 0.55);
  border-color: #2f7d72;
  color: #7fd4c6;
}
html[data-orbit-route="home"].dark .welcome-buttons .fern-button.outlined:focus-visible {
  background: rgba(0, 65, 60, 0.55);
  border-color: #2f7d72;
  color: #7fd4c6;
}

/* ---------- Homepage cards (from Figma) ---------- */
html[data-orbit-route="home"] .fern-card {
  border-radius: 20px;
}

/* Tighten the vertical inset around the tabs in the homepage code example. */
html[data-orbit-route="home"] .e2e-example .fern-card {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Card icons: smaller (32px -> 23.1px) with a slightly thicker (0.5px) stroke. */
html[data-orbit-route="home"] .card-icon {
  width: 23.1px;
  height: 23.1px;
}

html[data-orbit-route="home"] .card-icon svg path {
  stroke: currentColor;
  stroke-width: 0.5px;
  vector-effect: non-scaling-stroke;
}

/* Card fills/borders are light-mode only; in dark mode cards fall back to
   Fern's defaults so they match the docs page. */
html[data-orbit-route="home"]:not(.dark) .fern-card {
  background: #fafdff;
  border: 1px solid #9ad9d9;
}

html[data-orbit-route="home"]:not(.dark) .fern-card.interactive:hover {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(13, 148, 136, 0.45);
}
html[data-orbit-route="home"]:not(.dark) .fern-card.interactive:focus-visible {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(13, 148, 136, 0.45);
}

/* Dark mode: dark-grey card fill. */
html[data-orbit-route="home"].dark .fern-card {
  background: #1b1b1e;
  border: 1px solid #2b2b30;
}

html[data-orbit-route="home"].dark .fern-card.interactive:hover {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}
html[data-orbit-route="home"].dark .fern-card.interactive:focus-visible {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}

/* Dark mode: luminous teal central sphere glow (ring strokes colored below). */
html[data-orbit-route="home"].dark .orbit-art__ring--135 circle:not([stroke]) {
  filter: brightness(0.78) saturate(1.35);
  opacity: 0.7;
}

/* Dark mode: ring strokes go teal (left) -> dark green (right). Each stroke
   gradient runs right(first stop)->left(last stop), so recolor the first stop
   dark green and the last stop teal. */
html[data-orbit-route="home"].dark #orbit-gradient-135 stop:first-child,
html[data-orbit-route="home"].dark #orbit-gradient-136 stop:first-child,
html[data-orbit-route="home"].dark #orbit-gradient-137 stop:first-child,
html[data-orbit-route="home"].dark #orbit-gradient-138 stop:first-child {
  stop-color: #0d3529;
}

html[data-orbit-route="home"].dark #orbit-gradient-135 stop:last-child,
html[data-orbit-route="home"].dark #orbit-gradient-136 stop:last-child,
html[data-orbit-route="home"].dark #orbit-gradient-137 stop:last-child,
html[data-orbit-route="home"].dark #orbit-gradient-138 stop:last-child {
  stop-color: #2aa392;
}

/* Fade the ring artwork out toward BOTH the right and the bottom in dark mode so
   it dissolves smoothly into the background instead of hard-clipping at the
   article's edge. Two gradients composited with intersect: a pixel is only
   visible where both are opaque, so opacity falls to 0 approaching the right and
   bottom edges while the star and upper-left rings stay crisp. */
html[data-orbit-route="home"].dark .orbit-art {
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%),
    linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 55%, transparent 100%),
    linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-composite: intersect;
}

.orbit-footer {
  width: 100%;
  border-top: 1px solid #e4e4e7;
  color: rgb(0 10 7 / 0.627); /* the docs' tab ink: 5.9:1 on white (#989fb3 was 2.6:1) */
  font-size: 12px;
  line-height: 18px;
}

/* Dark mode: soft light-grey divider above the footer. */
html.dark .orbit-footer {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: rgb(241 247 254 / 0.71);
}

.orbit-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  text-align: center;
}

.orbit-footer__left {
  display: flex;
  justify-content: center;
}

.orbit-footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.orbit-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

.orbit-footer__link,
.orbit-footer__button {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.orbit-footer__button {
  cursor: pointer;
}

.orbit-footer__link:hover,
.orbit-footer__button:hover {
  color: rgb(1 40 49); /* full ink: the hover is a step up in contrast, plus the underline */
  text-decoration: underline;
}
.orbit-footer__link:focus-visible,
.orbit-footer__button:focus-visible {
  color: rgb(1 40 49); /* full ink: the hover is a step up in contrast, plus the underline */
  text-decoration: underline;
}

.orbit-footer__privacy-notice {
  color: inherit;
}

.orbit-footer__privacy-button {
  white-space: nowrap;
}

.orbit-footer__copyright {
  margin: 0;
}

/* "Built with Fern": Fern pins it visible (its CSS forces display, position and opacity), so it
   stays as Fern places it, centred just above the footer; only the space around it tightens.
   Fern's layout footer (64px above and below) and the page's 48px bottom margin went to that
   one line; now 24px above it and 16px below. The home has no prev/next links, so its layout
   footer's top margin goes too. */
#builtwithfern {
  margin-block: 24px 16px;
}
.fern-layout-footer {
  margin-bottom: 0;
}
:is(.fern-layout-overview, .fern-layout-guide, .fern-layout-reference) {
  margin-bottom: 0;
}
html[data-orbit-route="home"] .fern-layout-footer {
  margin-top: 0;
}

@media (min-width: 768px) {

  .orbit-footer__inner {
    grid-template-columns: 1fr 2fr 1fr;
    text-align: left;
  }

  .orbit-footer__left {
    justify-content: flex-start;
  }

  .orbit-footer__copyright {
    text-align: right;
  }

}

/* Hover and active states step up in contrast, never down (audited per element, both themes).
   The light accent goes to the darker teal Fern already uses for accent text (rgb 0 125 112), so
   teal text (the active "On this page" item) and white on teal (Try it) pass 4.5:1; its hover is
   darker again. In dark, text on the accent fill is ink (white on #4AAD9E was 2.7:1). */
html:not(.dark) {
  --accent: rgb(0 125 112);
  --accent-a9: rgb(0 125 112); /* the active "On this page" item */
  --accent-10: rgb(0 103 92);
}
html.dark {
  --accent-contrast: rgb(1 40 49);
}
html.dark .orbit-footer__link:hover,
html.dark .orbit-footer__button:hover {
  color: rgb(241 241 233);
}
html.dark .orbit-footer__link:focus-visible,
html.dark .orbit-footer__button:focus-visible {
  color: rgb(241 241 233);
}
.fern-mdx-link:hover {
  color: var(--grayscale-a12);
  text-decoration-thickness: 2px;
}
.fern-mdx-link:focus-visible {
  color: var(--grayscale-a12);
  text-decoration-thickness: 2px;
}
.fern-breadcrumb-item:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fern-breadcrumb-item:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
#fern-search-button:hover {
  background-color: var(--grayscale-a3);
  color: var(--grayscale-a12);
}
#fern-search-button:focus-visible {
  background-color: var(--grayscale-a3);
  color: var(--grayscale-a12);
}
main [role="tab"]:hover {
  color: var(--grayscale-a12);
}
main [role="tab"]:focus-visible {
  color: var(--grayscale-a12);
}
/* The response example picker tints on hover, which dropped its green label below 4.5:1. */
.fern-endpoint-code-snippets .fern-button.minimal.success:hover {
  background-color: transparent;
}
.fern-endpoint-code-snippets .fern-button.minimal.success:focus-visible {
  background-color: transparent;
}
.fern-endpoint-code-snippets .fern-button.minimal.success:hover .text-intent-success {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fern-endpoint-code-snippets .fern-button.minimal.success:focus-within .text-intent-success {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#builtwithfern:hover span {
  color: var(--grayscale-a12);
}
#builtwithfern:focus-within span {
  color: var(--grayscale-a12);
}
#builtwithfern:hover path {
  fill: var(--grayscale-a12);
}
#builtwithfern:focus-within path {
  fill: var(--grayscale-a12);
}

/* Header on scroll, matched to the homepage (orbit-website/src/app/globals.css, "Header on scroll"): past
   48px (nav-scroll-flag.js) the inactive tabs and the theme button step down to a quieter ink and
   the frost firms up from 70% to 90%, which keeps the quieter ink at 4.7:1 or better over any
   content; hover brings back full ink. */
html[data-nav-scrolled] #fern-header {
  background-color: rgb(255 255 255 / 0.9);
}
html.dark[data-nav-scrolled] #fern-header {
  background-color: rgb(12 16 18 / 0.9);
}
html[data-nav-scrolled] #fern-header [role="tab"]:not([aria-selected="true"]),
html[data-nav-scrolled] #fern-header button[aria-label="Theme"]:not([aria-expanded="true"]) {
  color: rgb(0 10 7 / 0.58);
}
html.dark[data-nav-scrolled] #fern-header [role="tab"]:not([aria-selected="true"]),
html.dark[data-nav-scrolled] #fern-header button[aria-label="Theme"]:not([aria-expanded="true"]) {
  color: rgb(241 247 254 / 0.55);
}
@media (hover: hover) {
  html[data-nav-scrolled] #fern-header [role="tab"]:not([aria-selected="true"]):hover,
  html[data-nav-scrolled] #fern-header button[aria-label="Theme"]:hover {
    color: var(--grayscale-a12);
  }
}

/* ---------- Custom header (components/CustomHeader.tsx) ----------
   Fern's parts in the homepage header's layout (SiteHeader.tsx): 10px above a 64px bar, 48px from
   1024px (75 and 59 in all, as before), 32px gutters from 1024px (24px from 768, 16px below), the
   tabs after the logo, the rest at the end. Fern's #fern-header keeps the frost and the rule.
   Below 1024px the tabs, Get started and the theme switch move into the menu, as on the homepage. */
.orbit-header {
  padding-top: 10px; /* the homepage header's breathing room above the bar */
}
.orbit-header__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 16px;
}
.orbit-header__logo {
  display: flex;
  flex: none;
  align-items: center;
}
.orbit-header__tabs {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 32px; /* the first tab's label 48px past the logo, as Fern's header put it */
}
.orbit-header__end {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}
.orbit-header__search {
  min-width: 0;
  max-width: 320px;
}
.orbit-header__links,
.orbit-header__theme {
  display: flex;
  align-items: center;
}
/* The theme button's own padding makes the gap; Get started sits 26px from the icon, as before. */
.orbit-header__theme {
  margin-left: -16px;
}
@media (min-width: 768px) {

  .orbit-header__bar {
    padding: 0 24px;
  }

}
@media (min-width: 1024px) {

  .orbit-header__bar {
    height: 48px;
    padding: 0 32px;
  }
  .orbit-header__menu {
    display: none;
  }

}
/* The section links (CustomHeader's NAV), as Fern's header tabs were: 14px medium, 12px either side,
   44px tall; muted ink, full ink on hover, the accent for the current section. They start where the
   homepage's do (NavLinks: 20px after the logo), so the header holds still from one site to the other. */
.orbit-header__nav {
  margin-left: 20px;
}
.orbit-header__nav a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--grayscale-a11);
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* the current section: aria-current from home-route-flag.js, and the html flag it sets, so the first
   paint is right before the script reaches the links */
.orbit-header__nav a[aria-current="page"],
html[data-orbit-section="docs"] .orbit-header__nav a[data-section="docs"],
html[data-orbit-section="api"] .orbit-header__nav a[data-section="api"],
html[data-orbit-section="changelog"] .orbit-header__nav a[data-section="changelog"] {
  color: var(--accent-a11, var(--accent));
}
@media (hover: hover) {
  .orbit-header__nav a:not([aria-current="page"]):hover {
    color: var(--grayscale-a12);
  }
}
@media (prefers-reduced-motion: reduce) {

  .orbit-header__nav a { transition: none; }

}
html[data-nav-scrolled] #fern-header .orbit-header__nav a:not([aria-current="page"]) {
  color: rgb(0 10 7 / 0.58);
}
html.dark[data-nav-scrolled] #fern-header .orbit-header__nav a:not([aria-current="page"]) {
  color: rgb(241 247 254 / 0.55);
}
/* Fern adds a row of its own tabs under a custom header that doesn't render them; the section links
   above replace it, and the phone menu keeps its own copy */
#fern-header .fern-header-tabs {
  display: none;
}
@media (max-width: 1023.98px) {

  .orbit-header__tabs,
  .orbit-header__links,
  .orbit-header__theme {
    display: none;
  }
  .orbit-header__search {
    flex: 1;
  }

}

/* ---------- The landing page's grounds, surfaces and code windows ----------
   2026-10-19, Alice: "update the docs pages so it matches the visual language of the updated landing
   page. Such as the bg colors". Reviewed behind ?docs=v2 and the default since 2026-10-28. Values are the landing page's (orbit-website/src/app/globals.css: white
   for the ground, its ink, teal-800 and the spot, the dark window), retinting Fern's own variables, so every page,
   control and state follows: the 12-step grey ramp runs from the ground to the ink, the accent ramp is
   the landing's teal (Fern's is a green at hue 182; the landing's sits at 200 to 218). */
html:not(.dark) {
  /* white, for reading (2026-10-19, Alice, after petrol, mist, teal-50 and a step past it: "we should use
     the white bg or close to white bg for docs"); the landing's language carries in the ink-tinted greys,
     the teal and the dark windows and cards */
  --orbit-ground: #fff;
  --orbit-ink: oklch(0.255 0.045 218); /* teal-950 */
  --background: var(--orbit-ground);
  --theme-color: var(--orbit-ground);
  /* raised surfaces (menus, the search dialog) are the page's white, held by the hairline; the cards and
     tables are dark (below) */
  --card-background: var(--orbit-ground);
  --border: color-mix(in oklab, var(--orbit-ink) 14%, var(--orbit-ground));
  --color-black: var(--orbit-ink);
  --orbit-soft: color-mix(in oklab, var(--orbit-ink) 8%, var(--orbit-ground));
  --orbit-muted: oklch(0.409 0.03 215); /* the landing's ink-2 */
  --orbit-rule: var(--border);
  --orbit-edge: oklch(0.505 0.084 205.4); /* teal-700 */
  --grayscale-1: color-mix(in oklab, var(--orbit-ink) 2%, var(--orbit-ground));
  --grayscale-2: color-mix(in oklab, var(--orbit-ink) 4%, var(--orbit-ground));
  --grayscale-3: color-mix(in oklab, var(--orbit-ink) 7%, var(--orbit-ground));
  --grayscale-4: color-mix(in oklab, var(--orbit-ink) 10%, var(--orbit-ground));
  --grayscale-5: color-mix(in oklab, var(--orbit-ink) 13%, var(--orbit-ground));
  --grayscale-6: color-mix(in oklab, var(--orbit-ink) 17%, var(--orbit-ground));
  --grayscale-7: color-mix(in oklab, var(--orbit-ink) 23%, var(--orbit-ground));
  --grayscale-8: color-mix(in oklab, var(--orbit-ink) 33%, var(--orbit-ground));
  --grayscale-9: color-mix(in oklab, var(--orbit-ink) 68%, var(--orbit-ground));
  --grayscale-10: color-mix(in oklab, var(--orbit-ink) 72%, var(--orbit-ground));
  --grayscale-11: color-mix(in oklab, var(--orbit-ink) 76%, var(--orbit-ground));
  --grayscale-12: var(--orbit-ink);
  --grayscale-a1: color-mix(in oklab, var(--orbit-ink) 2%, transparent);
  --grayscale-a2: color-mix(in oklab, var(--orbit-ink) 4%, transparent);
  --grayscale-a3: color-mix(in oklab, var(--orbit-ink) 7%, transparent);
  --grayscale-a4: color-mix(in oklab, var(--orbit-ink) 10%, transparent);
  --grayscale-a5: color-mix(in oklab, var(--orbit-ink) 13%, transparent);
  --grayscale-a6: color-mix(in oklab, var(--orbit-ink) 17%, transparent);
  --grayscale-a7: color-mix(in oklab, var(--orbit-ink) 23%, transparent);
  --grayscale-a8: color-mix(in oklab, var(--orbit-ink) 33%, transparent);
  /* a9 and a10 carry low-emphasis text (the URL's path): 4.5:1 or better on the petrol ground */
  --grayscale-a9: color-mix(in oklab, var(--orbit-ink) 68%, transparent);
  --grayscale-a10: color-mix(in oklab, var(--orbit-ink) 72%, transparent);
  --grayscale-a11: color-mix(in oklab, var(--orbit-ink) 76%, transparent);
  --grayscale-a12: color-mix(in oklab, var(--orbit-ink) 96%, transparent);
  /* the accent: teal-800 for text and fills (7.65:1 on paper, paper on it 7.3:1), teal-900 on hover */
  --accent: oklch(0.425 0.072 211.8);
  --accent-9: oklch(0.425 0.072 211.8);
  --accent-a9: oklch(0.425 0.072 211.8);
  --accent-10: oklch(0.34 0.059 216.2);
  --accent-11: oklch(0.425 0.072 211.8);
  --accent-12: oklch(0.255 0.045 218);
  --accent-3: color-mix(in oklab, oklch(0.505 0.084 205.4) 12%, var(--orbit-ground));
  --accent-a3: color-mix(in oklab, oklch(0.505 0.084 205.4) 14%, transparent);
  --accent-a8: oklch(0.505 0.084 205.4);
  --accent-a11: oklch(0.425 0.072 211.8);
  --accent-surface: color-mix(in oklab, oklch(0.505 0.084 205.4) 10%, var(--card-background));
  --accent-contrast: oklch(0.985 0.008 105);
}
html.dark {
  --orbit-ground: oklch(0.17 0.008 218); /* the landing's dark page (neutral-950) */
  --orbit-cream: oklch(0.955 0.01 105);
  --background: var(--orbit-ground);
  --theme-color: var(--orbit-ground);
  --card-background: oklch(0.2 0.01 218); /* the landing's dark bg-2 */
  --border: color-mix(in oklab, var(--orbit-cream) 13%, var(--orbit-ground));
  --color-white: var(--orbit-cream);
  --orbit-soft: color-mix(in oklab, var(--orbit-cream) 8%, var(--orbit-ground));
  --orbit-muted: oklch(0.72 0.01 105);
  --orbit-rule: var(--border);
  --orbit-edge: oklch(0.82 0.09 200); /* the spot */
  --grayscale-1: color-mix(in oklab, var(--orbit-cream) 2%, var(--orbit-ground));
  --grayscale-2: color-mix(in oklab, var(--orbit-cream) 4%, var(--orbit-ground));
  --grayscale-3: color-mix(in oklab, var(--orbit-cream) 7%, var(--orbit-ground));
  --grayscale-4: color-mix(in oklab, var(--orbit-cream) 10%, var(--orbit-ground));
  --grayscale-5: color-mix(in oklab, var(--orbit-cream) 13%, var(--orbit-ground));
  --grayscale-6: color-mix(in oklab, var(--orbit-cream) 17%, var(--orbit-ground));
  --grayscale-7: color-mix(in oklab, var(--orbit-cream) 23%, var(--orbit-ground));
  --grayscale-8: color-mix(in oklab, var(--orbit-cream) 33%, var(--orbit-ground));
  --grayscale-9: color-mix(in oklab, var(--orbit-cream) 50%, var(--orbit-ground));
  --grayscale-10: color-mix(in oklab, var(--orbit-cream) 58%, var(--orbit-ground));
  --grayscale-11: color-mix(in oklab, var(--orbit-cream) 74%, var(--orbit-ground));
  --grayscale-12: var(--orbit-cream);
  --grayscale-a1: color-mix(in oklab, var(--orbit-cream) 2%, transparent);
  --grayscale-a2: color-mix(in oklab, var(--orbit-cream) 4%, transparent);
  --grayscale-a3: color-mix(in oklab, var(--orbit-cream) 7%, transparent);
  --grayscale-a4: color-mix(in oklab, var(--orbit-cream) 10%, transparent);
  --grayscale-a5: color-mix(in oklab, var(--orbit-cream) 13%, transparent);
  --grayscale-a6: color-mix(in oklab, var(--orbit-cream) 17%, transparent);
  --grayscale-a7: color-mix(in oklab, var(--orbit-cream) 23%, transparent);
  --grayscale-a8: color-mix(in oklab, var(--orbit-cream) 33%, transparent);
  --grayscale-a9: color-mix(in oklab, var(--orbit-cream) 50%, transparent);
  --grayscale-a10: color-mix(in oklab, var(--orbit-cream) 58%, transparent);
  --grayscale-a11: color-mix(in oklab, var(--orbit-cream) 74%, transparent);
  --grayscale-a12: color-mix(in oklab, var(--orbit-cream) 96%, transparent);
  /* the accent: the spot, ink on it (9.2:1) */
  --accent: oklch(0.82 0.09 200);
  --accent-9: oklch(0.82 0.09 200);
  --accent-a9: oklch(0.82 0.09 200);
  --accent-10: oklch(0.88 0.07 200);
  --accent-11: oklch(0.82 0.09 200);
  --accent-12: oklch(0.955 0.01 105);
  --accent-3: color-mix(in oklab, oklch(0.82 0.09 200) 12%, var(--orbit-ground));
  --accent-a3: color-mix(in oklab, oklch(0.82 0.09 200) 14%, transparent);
  --accent-a8: oklch(0.82 0.09 200);
  --accent-a11: oklch(0.82 0.09 200);
  --accent-surface: color-mix(in oklab, oklch(0.82 0.09 200) 8%, var(--card-background));
  --accent-contrast: oklch(0.255 0.045 218);
}

/* Code: the landing page's dark window in both themes (its install box and Try Orbit brief: "a dark code
   window on both themes, it's the code UI"), 12px corners and the double edge: the prose's code blocks
   and the API reference's request and response examples. Fern's Shiki tokens
   carry their dark colours in --shiki-dark, so light mode takes those too. */
html :is(.fern-code-block, .fern-endpoint-code-snippets > div) {
  --window-top: oklch(0.197 0.02 200);
  --window-slab: rgb(3 8 10);
  --window-foot: oklab(0.097 -0.0075 -0.0059);
  --window-fg: oklch(0.985 0.008 105);
  background: linear-gradient(180deg, var(--window-top) 0%, var(--window-slab) 46%, var(--window-foot) 100%);
  border: 1px solid color-mix(in oklab, var(--window-fg) 14%, transparent);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--window-fg) 28%, transparent),
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 1px 2px rgb(1 40 49 / 0.08),
    0 16px 32px -8px rgb(1 40 49 / 0.24);
  color: var(--window-fg);
  color-scheme: dark;
  /* the controls inside (the language and copy buttons, the title) read on the window */
  --grayscale-9: color-mix(in oklab, var(--window-fg) 56%, var(--window-slab));
  --grayscale-10: color-mix(in oklab, var(--window-fg) 62%, var(--window-slab));
  --grayscale-11: oklch(0.772 0.008 105);
  --grayscale-12: var(--window-fg);
  --grayscale-a9: color-mix(in oklab, var(--window-fg) 56%, transparent);
  --grayscale-a10: color-mix(in oklab, var(--window-fg) 62%, transparent);
  --grayscale-a11: oklch(0.772 0.008 105);
  --grayscale-a12: var(--window-fg);
  --grayscale-a3: color-mix(in oklab, var(--window-fg) 8%, transparent);
  --grayscale-a4: color-mix(in oklab, var(--window-fg) 11%, transparent);
  --grayscale-a5: color-mix(in oklab, var(--window-fg) 14%, transparent);
  --grayscale-a6: color-mix(in oklab, var(--window-fg) 16%, transparent);
  --border: color-mix(in oklab, var(--window-fg) 12%, transparent);
  --card-background: transparent;
  --accent: oklch(0.82 0.09 200);
  /* the buttons' hover takes --accent-11: without it, the page's teal-800 on the dark ground (1.6:1;
     2026-10-19, Alice: "Contrast is too low here") */
  --accent-11: oklch(0.82 0.09 200);
  --accent-a11: oklch(0.82 0.09 200);
  --accent-a3: color-mix(in oklab, oklch(0.82 0.09 200) 16%, transparent);
  --accent-contrast: oklch(0.255 0.045 218);
  /* the page's ink, which some controls in here take (the language picker): the window's paper */
  --color-black: var(--window-fg);
  --color-body: var(--window-fg);
}
html.dark :is(.fern-code-block, .fern-endpoint-code-snippets > div) {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--window-fg) 28%, transparent),
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 1px 2px rgb(0 0 0 / 0.4),
    0 22px 60px -22px rgb(0 0 0 / 0.7);
}
html :is(.fern-code-block, .fern-endpoint-code-snippets > div) .code-block-root {
  background-color: transparent !important; /* Shiki's own light ground, set inline */
  color: var(--shiki-dark, var(--window-fg)) !important;
}
html:not(.dark) :is(.fern-code-block, .fern-endpoint-code-snippets > div) .code-block-root span {
  color: var(--shiki-dark) !important;
}

/* A block marked `wordWrap` wraps at spaces, not mid-word (Fern's is word-break: break-all, which split
   "requests" as "r / equests"; 2026-10-19, Alice: "this is wrapping funny"). A word longer than the line
   (a URL) still breaks. The gutter marks a continuation: it has no line number. */
html .code-block-line-group.word-wrap .code-block-line-content {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Cards, tables and inline code in light mode: the landing page's dark cards (?cards=dark, its default:
   the Why and How cards) and dark chips, beside the dark code windows (2026-10-19, Alice: "I like how you
   made the monaco and other bits dark may we do that here too"). The deep ground (the landing's band
   ground), a hairline, a faint top light and a soft shadow; cream type, its secondary text the cards'
   teal grey (6.4:1), the spot for accents. */
html:not(.dark) :is(.fern-card, .fern-table-root) {
  --dark-ground: color-mix(in oklab, oklch(0.255 0.045 218) 60%, oklch(0.17 0.008 218));
  --dark-fg: oklch(0.955 0.01 105);
  --color-black: var(--dark-fg);
  --color-body: var(--dark-fg);
  --grayscale-12: var(--dark-fg);
  --grayscale-11: oklch(0.76 0.025 200);
  --grayscale-a12: var(--dark-fg);
  --grayscale-a11: oklch(0.76 0.025 200);
  --grayscale-a10: color-mix(in oklab, var(--dark-fg) 62%, transparent);
  --grayscale-a9: color-mix(in oklab, var(--dark-fg) 56%, transparent);
  --grayscale-a3: color-mix(in oklab, var(--dark-fg) 6%, transparent);
  --grayscale-a4: color-mix(in oklab, var(--dark-fg) 9%, transparent);
  --grayscale-a5: color-mix(in oklab, var(--dark-fg) 12%, transparent);
  --grayscale-a6: color-mix(in oklab, var(--dark-fg) 12%, transparent);
  --border: color-mix(in oklab, var(--dark-fg) 12%, transparent);
  --card-background: transparent;
  --orbit-soft: color-mix(in oklab, var(--dark-fg) 10%, transparent); /* inline code in here */
  --accent: oklch(0.82 0.09 200);
  --accent-9: oklch(0.82 0.09 200);
  --accent-a9: oklch(0.82 0.09 200);
  --accent-11: oklch(0.82 0.09 200);
  --accent-a11: oklch(0.82 0.09 200);
  --accent-contrast: oklch(0.255 0.045 218);
  color: var(--dark-fg);
  color-scheme: dark;
  border: 1px solid color-mix(in oklab, var(--dark-fg) 9%, transparent);
  border-radius: 12px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--dark-ground), var(--dark-fg) 4%) 0%, var(--dark-ground) 45%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--dark-fg) 11%, transparent),
    0 1px 2px rgb(0 24 32 / 0.16),
    0 28px 56px -32px rgb(0 32 44 / 0.5);
}
/* the table's head row a step up from its body, its rules the hairline */
html:not(.dark) .fern-table-root th {
  background-color: color-mix(in oklab, var(--dark-fg) 5%, transparent);
}
html:not(.dark) .fern-table-root :is(th, td) {
  border-color: color-mix(in oklab, var(--dark-fg) 10%, transparent);
}
/* an interactive card: its edge lights with the spot on hover, as the landing's controls do */
@media (hover: hover) {
  html:not(.dark) .fern-card.interactive:hover {
    border-color: color-mix(in oklab, oklch(0.82 0.09 200) 45%, transparent);
  }
}
/* inline code in running text: the landing page's chip, the spot at 38% under ink (its light-mode
   --orbit-chip-bg; 12.9:1), with no border (2026-10-19, Alice picked it over the dark chip: "This is
   great"). In a card or table it takes the lighter tint above. */
html:not(.dark) .fern-prose code:not(.code-block):not(a code):not(:is(h1, h2, h3, h4) code) {
  background-color: color-mix(in oklch, oklch(0.82 0.09 200) 38%, white);
  color: oklch(0.255 0.045 218);
  border-color: transparent;
  box-shadow: none;
}
html:not(.dark) :is(.fern-card, .fern-table-root) code:not(.code-block) {
  background-color: var(--orbit-soft) !important;
  color: var(--dark-fg) !important;
}
/* the cards' icons: the spot on the dark card (Fern's teal measured about 2:1 there) */
html:not(.dark) .fern-card svg {
  color: oklch(0.82 0.09 200);
}

/* The landing page's highlight, links and focus (2026-10-19, Alice: "the colors don't match the visual
   language of the landing page (e.g., highlight color)"), from orbit-website/src/app/globals.css and the contact
   page's inline links:
   - selected text: the spot under ink, in both themes (Fern's was a translucent green);
   - links in running text: the text's own colour with a 35% underline 4px below, solid on hover (Fern's
     were teal text on a teal rule);
   - focus: one ring, 2px in teal-800 (the spot in dark), 2px out. */
html ::selection {
  background: oklch(0.82 0.09 200);
  color: oklch(0.255 0.045 218);
}
html .fern-prose a.fern-mdx-link,
html .fern-prose a.fern-mdx-link:visited {
  color: inherit;
  font-weight: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  html .fern-prose a.fern-mdx-link:hover {
    color: inherit;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {

  html .fern-prose a.fern-mdx-link { transition: none; }

}
html:not(.dark) { --orbit-focus-ring: oklch(0.425 0.072 211.8); }
html.dark { --orbit-focus-ring: oklch(0.82 0.09 200); }
/* The spot ring only where a panel is dark in light mode: the old dark code window (not ?code=motion,
   whose panel follows the page) and the dark cards and tables (not ?color=roles). On the light panels
   the spot is 1.6:1; the page's teal-800 ring holds there. */
html:not([data-orbit-code="motion"]) :is(.fern-code-block, .fern-endpoint-code-snippets > div),
html:not([data-orbit-color="roles"]) :is(.fern-card, .fern-table-root) {
  --orbit-focus-ring: oklch(0.82 0.09 200);
}
html :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--orbit-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
}
html a:focus-visible {
  border-radius: 4px;
}

/* Page to page (2026-10-19, Alice: the review copy should "navigate smoothly", homepage, docs and
   contact as one site): a cross-document View Transition, the page fading through in 90ms out and 160ms
   in, the header holding still (both sites name it site-header: orbit-website/src/app/globals.css and
   fern/styles.css). Opacity only (the compositor); none with reduced motion. */
@media (prefers-reduced-motion: no-preference) {

  @view-transition {

    navigation: auto;
  
}

}
::view-transition-old(root) {
  animation: orbit-page-out 90ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: orbit-page-in 160ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
}
::view-transition-group(site-header) {
  animation-duration: 0s;
}
::view-transition-old(site-header) {
  display: none;
}
::view-transition-new(site-header) {
  animation: none;
}
@keyframes orbit-page-out {
  to { opacity: 0; }
}
@keyframes orbit-page-in {
  from { opacity: 0; }
}

/* ?pagefade=v2 (2026-10-21, Alice: "Why is there a flash between the landing page, docs, api
   reference, and other pages?"): in light, the homepage's dark hero and the docs' white page swung
   in about 90ms, the old page gone before the new one had arrived, and the header snapped to the new
   one ahead of the page. Here the two pages cross at once, on one curve over 240ms (with the browser's
   plus-lighter pairing, one fading in exactly as the other fades out, so nothing behind shows), and
   the header crosses with them instead of switching. Remembered for the visit, on both sites. */
html[data-orbit-pagefade="v2"]::view-transition-old(root),
html[data-orbit-pagefade="v2"]::view-transition-old(site-header) {
  display: block;
  animation: orbit-page-out 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
html[data-orbit-pagefade="v2"]::view-transition-new(root),
html[data-orbit-pagefade="v2"]::view-transition-new(site-header) {
  animation: orbit-page-in 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* ?pagefade=v3 (2026-10-21, Alice: "Not fixed ... Chrome, light mode, homepage to docs, white flash"):
   traced in headed Chrome, v2 crosses cleanly, but the screen still goes from the dark hero to the white
   docs in about 150ms, and a full screen brightening that fast reads as a flash however it's blended.
   v3 brings the light up: 400ms on a curve that starts slowly (sine in-out), the two pages still
   complementary, the header with them. */
html[data-orbit-pagefade="v3"]::view-transition-old(root),
html[data-orbit-pagefade="v3"]::view-transition-old(site-header) {
  display: block;
  animation: orbit-page-out 400ms cubic-bezier(0.37, 0, 0.63, 1) both;
}
html[data-orbit-pagefade="v3"]::view-transition-new(root),
html[data-orbit-pagefade="v3"]::view-transition-new(site-header) {
  animation: orbit-page-in 400ms cubic-bezier(0.37, 0, 0.63, 1) both;
}
/* ?pagefade=cut (2026-10-21, Alice: "It paints maybe 3 different colors before it shows the docs
   page"): a fade between the dark hero and the white docs blends the two grounds, so the screen
   passes through petrol, slate and teal-greys (traced in headed Chrome: 20 distinct grounds over
   350ms with v3). Between grounds this different, a cut reads cleaner: no animation, so the browser
   holds the old page until the new one is ready and swaps them in one frame, header included. */
html[data-orbit-pagefade="cut"]::view-transition-old(root),
html[data-orbit-pagefade="cut"]::view-transition-old(site-header) {
  display: none;
}
html[data-orbit-pagefade="cut"]::view-transition-new(root),
html[data-orbit-pagefade="cut"]::view-transition-new(site-header) {
  animation: none;
}

#fern-header {
  view-transition-name: site-header;
}

/* Select all (or a drag across the page) picks up what the page says, not its chrome, as on the landing
   page (orbit-website/src/app/globals.css "Select all", after Passport) (2026-10-19, Alice: "all elements select
   on the page ... button text is highlighting"). Out of a selection: the header and the sidebar, the
   breadcrumb eyebrow, "On this page", the page actions row, the page's footer (Previous and Next, the
   feedback row, Built with) and the site's footer (CustomFooter: links, legal row, copyright),
   buttons, tabs, menus and labels, method and status badges and the changelog's filters, linked cards,
   the code windows' toolbars and the API examples' title bars, and screen-reader-only text. Running
   text, headings, tables, code and URLs stay selectable. Screen readers are unaffected. */
html :is(
  #fern-header, #fern-sidebar, #fern-toc, .fern-breadcrumb, .fern-page-actions, .fern-layout-footer, .orbit-footer,
  button, [role="tab"], [role="button"], [role="combobox"], [role="menuitem"], summary, label, kbd,
  .fern-docs-badge, a.fern-card, .fern-code-block > div:not(:has(pre)),
  .fern-endpoint-code-snippets > div > div:not(:has(pre)), .sr-only
),
html :is(
  #fern-header, #fern-sidebar, #fern-toc, .fern-breadcrumb, .fern-page-actions, .fern-layout-footer, .orbit-footer, a.fern-card,
  .fern-code-block > div:not(:has(pre)), .fern-endpoint-code-snippets > div > div:not(:has(pre))
) * {
  -webkit-user-select: none;
  user-select: none;
}

/* Icons at Aether's weight (2026-10-19, Alice: the docs' icons "look very fat. I prefer the Aether
   aesthetic. Let's start with the stroke width"). Fern's interface icons are Lucide, a 2-unit stroke on
   a 24-unit grid: 1.33px on screen at 16px, 2px at 12px. Aether's are a 1-unit line on a 20-unit grid
   (product-slice src/screens/_shared/aether/iconSprites.full.svg), 1px on screen. The stroke is drawn
   in screen pixels here (non-scaling), so every Lucide icon is a 1px line at every size, as Aether's are. */
html svg.lucide :is(path, circle, ellipse, line, polyline, polygon, rect) {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

/* ?scale=docs (docs-flag.js): the type system's docs scale (type-expert "Context Scales":
   page title 28 to 32, section 20 to 22, body 16/1.6 to 1.65), after Alice pointed at shadcn's docs on
   2026-10-19. Four changes: headings a size down (36/24/20 to 30/20/17px), inline code a size down
   (0.875em, the chip's colour stays the default's), the selected sidebar item a tint without its border, and the sidebar and
   "On this page" at 13.5px. Orbit's palette, teal and dark code blocks stay. */
html[data-orbit-scale="docs"] {
  --docs-scale-tint: color-mix(in oklab, var(--orbit-ink, oklch(0.255 0.045 218)) 6%, var(--background));
}
html[data-orbit-scale="docs"] .fern-main h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
html[data-orbit-scale="docs"] .fern-prose h2 {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
html[data-orbit-scale="docs"] .fern-prose h3 {
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
html[data-orbit-scale="docs"] .fern-prose :is(p, li) {
  line-height: 1.65;
}
html[data-orbit-scale="docs"]:not(.dark) .fern-prose code:not(.code-block):not(a code):not(:is(h1, h2, h3, h4) code) {
  font-size: 0.875em;
  font-weight: 400;
  padding: 0.12em 0.36em;
  border-radius: 4px;
}
html.dark[data-orbit-scale="docs"] .fern-prose code:not(.code-block):not(a code):not(:is(h1, h2, h3, h4) code) {
  font-size: 0.875em;
  font-weight: 400;
}
html[data-orbit-scale="docs"] .fern-sidebar-link[data-state="active"] {
  box-shadow: none;
  background-color: var(--docs-scale-tint);
}
html[data-orbit-scale="docs"] :is(#fern-toc .toc-item, #fern-sidebar .fern-sidebar-link) {
  font-size: 13.5px;
}

/* Steady type on load (2026-10-19, Alice: "onLoad the typography jumps"). Fern loads Inter and IBM Plex
   Mono with font-display: swap, so a page first paints in the system face and reflows when they arrive
   (layout shift 0.019, measured). The homepage doesn't move (next/font): its fallback faces are Arial
   resized to each font's metrics, so the swap changes letter shapes but not line lengths or heights.
   The same faces, with the values next/font computed from the same font files (the review export's CSS),
   sit second in Fern's font stacks here. Fern sets the stacks inline, so these need !important. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}
/* Plex Mono's fallback is monospaced (next/font's is Arial, so code lines changed width on the swap):
   Courier New and Menlo are 0.600 and 0.602em per character, as Plex Mono is 0.600, so no size-adjust;
   Plex's ascent and descent (1025 and 275 per 1000, as next/font's 76.16% and 20.43% at its 134.59%
   size-adjust work out to) */
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Courier New"), local("Menlo");
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
html {
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  --font-heading: var(--font-body) !important;
  --font-code: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Code in Orbit's colours (2026-10-19, Alice: "I would like to use colors, just not Fern's green"; option A
   of three rendered). Fern's syntax theme is hard-coded (Shiki's material-theme-darker for the dark blocks);
   these come from the orbit field's own palette (orbit-website/src/components/OrbitDiscs.tsx ORBIT_CUBE, after the
   RYBitten study): its two colours, aqua and sand, plus mint and the paper. One hue per role, no blends
   (teal into gold passes through yellow-green, which is what Fern's green reads as). By role, from the
   colour Fern's theme gives each token (measured on every docs code block):
   - keys and names in aqua, the spot (#78d6db): JSON keys (purple top-level, yellow nested), the shell
     command (curl), Markdown headings (yellow);
   - strings in sand (#e0d385): JSON values, flags and arguments (green);
   - numbers in mint (#a1e0d1, orange);
   - plain text in paper (white); punctuation and quotes muted (cyan, 7.56:1).
   Each token carries its colour in an inline --shiki-dark, which every rule colouring code reads, so
   setting it here (important outranks the inline value) recolours both themes and the review copy.
   Fern-internal: if Fern changes its Shiki theme, these hex values need updating. */
html .code-block-root {
  --orbit-code-key: #78d6db;
  --orbit-code-string: #e0d385;
  --orbit-code-number: #a1e0d1;
  --orbit-code-text: oklch(0.985 0.008 105);
  --orbit-code-muted: oklch(0.772 0.008 105);
}
html .code-block-root span:is([style*="--shiki-dark: #C792EA" i], [style*="--shiki-dark:#C792EA" i]),
html .code-block-root span:is([style*="--shiki-dark: #FFCB6B" i], [style*="--shiki-dark:#FFCB6B" i]) {
  --shiki-dark: var(--orbit-code-key) !important;
}
html .code-block-root span:is([style*="--shiki-dark: #C3E88D" i], [style*="--shiki-dark:#C3E88D" i]) {
  --shiki-dark: var(--orbit-code-string) !important;
}
html .code-block-root span:is([style*="--shiki-dark: #F78C6C" i], [style*="--shiki-dark:#F78C6C" i]) {
  --shiki-dark: var(--orbit-code-number) !important;
}
html .code-block-root span:is([style*="--shiki-dark: #EEFFFF" i], [style*="--shiki-dark:#EEFFFF" i]) {
  --shiki-dark: var(--orbit-code-text) !important;
}
html .code-block-root span:is([style*="--shiki-dark: #89DDFF" i], [style*="--shiki-dark:#89DDFF" i]) {
  --shiki-dark: var(--orbit-code-muted) !important;
}
/* ?code=landing (docs-flag.js): the code windows in the landing page's CLI and Try Orbit
   window (orbit-website/src/app/globals.css .orbit-window, .orbit-code; ClaudeSession.module.css), for review
   beside the default (2026-10-19). Three changes:
   - the ground: the landing's teal slab (teal-950 in light, its dark slab in dark), lit with the spot
     at the top and deeper at the foot, where the default is near-black;
   - numbers in citron (the CLI's one other colour) instead of mint; keys stay in the spot and strings
     in sand (Alice: "I also liked how fern had the color text in the default");
   - JSON wraps at spaces, as data is read more than retyped (a request body or response, copied with the
     copy button). Commands keep their lines and scroll sideways, as in Motion's docs: a command's
     `\` breaks are its own. */
html[data-orbit-code="landing"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) {
  --window-slab: oklch(0.255 0.045 218);
  --window-top: color-mix(in oklch, oklch(0.82 0.09 200) 10%, var(--window-slab));
  --window-foot: color-mix(in oklab, black 24%, var(--window-slab));
}
html.dark[data-orbit-code="landing"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) {
  --window-slab: oklch(0.13 0.012 218);
}
html[data-orbit-code="landing"] .code-block-root {
  --orbit-code-number: oklch(0.93 0.15 108);
}
html[data-orbit-code] [data-language="json"] .code-block-line-group.code-block-flow {
  width: 100%;
}
html[data-orbit-code] [data-language="json"] .code-block-line-content {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ?code=motion (docs-flag.js): Motion's docs' code treatment (motion.dev/docs, 2026-10-19,
   Alice: "I like motion's treatment best"), for review beside ?code=landing and the default:
   - the panel follows the page: a light teal-grey on the light page, a lifted dark on the dark one; flat
     (no edge, light or shadow), 8px corners (Orbit's control radius; Motion's are square), and the
     page's own greys and accent inside, so the controls and gutter read as the page's;
   - Motion's token colours, one hue per role at one lightness (its Tailwind 600-700s in light, 300-400s
     in dark), as its classes assign them: keywords violet (import, const, =>, null), strings green, tag
     names rose (here a shell command), attributes blue (here keys, so teal stays for where you are), numbers sky,
     functions orange, comments slate. Markdown headings, which Motion has no rule for, stay in ink.
     All code is one weight (400), as Motion's is. Every JSON key is one colour (Fern's
     Material theme colours them by depth; a JSON number shares the deepest keys' colour, so it takes
     the key colour too);
   - a labelled Copy control, as Motion's "Copy code": mono caps, a solid backing so code ends behind it,
     "Copied" for 1.5s, announced (code-copy.js); the report flag shows on hover or focus only. */
html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) {
  --mc-panel: oklch(0.965 0.006 200);
  --mc-text: oklch(0.255 0.045 218);
  --mc-muted: oklch(0.49 0.012 206.7);
  --mc-key: #1d4ed8; /* Motion's attribute blue: keys apart from strings (teal-800 was 11 apart from the green; this is 26) */
  --mc-string: #065f46; /* green-800: values, most of a response, at 7.0:1 not 5.0:1 */
  --mc-command: #be123c;
  --mc-keyword: #7c3aed;
  --mc-number: #0369a1;
  --mc-function: #c2410c;
  --window-fg: var(--mc-text);
  --grayscale-9: inherit;
  --grayscale-10: inherit;
  --grayscale-11: inherit;
  --grayscale-12: inherit;
  --grayscale-a3: inherit;
  --grayscale-a4: inherit;
  --grayscale-a5: inherit;
  --grayscale-a6: inherit;
  --grayscale-a9: inherit;
  --grayscale-a10: inherit;
  --grayscale-a11: inherit;
  --grayscale-a12: inherit;
  --border: inherit;
  --accent: inherit;
  --accent-11: inherit;
  --accent-a11: inherit;
  --accent-a3: inherit;
  --accent-contrast: inherit;
  --color-black: inherit;
  --color-body: inherit;
  background: var(--mc-panel);
  border-color: transparent;
  border-radius: 8px;
  box-shadow: none;
  color: var(--mc-text);
  color-scheme: inherit;
}
html.dark[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) {
  --mc-panel: oklch(0.215 0.012 218);
  --mc-text: oklch(0.955 0.01 105);
  --mc-muted: oklch(0.69 0.012 218);
  --mc-key: #60a5fa;
  --mc-string: #34d399;
  --mc-command: #fb7185;
  --mc-keyword: #a78bfa;
  --mc-number: #7dcfff;
  --mc-function: #ff9e64;
  box-shadow: none;
}
html[data-orbit-code="motion"] .code-block-root[data-language="json"] span:is([style*="--shiki-dark: #C792EA" i], [style*="--shiki-dark:#C792EA" i]),
html[data-orbit-code="motion"] .code-block-root[data-language="json"] span:is([style*="--shiki-dark: #FFCB6B" i], [style*="--shiki-dark:#FFCB6B" i]),
html[data-orbit-code="motion"] .code-block-root[data-language="json"] span:is([style*="--shiki-dark: #F78C6C" i], [style*="--shiki-dark:#F78C6C" i]) {
  --shiki-dark: var(--mc-key) !important;
}
html[data-orbit-code="motion"] .code-block-root span:is([style*="--shiki-dark: #C3E88D" i], [style*="--shiki-dark:#C3E88D" i]) {
  --shiki-dark: var(--mc-string) !important;
}
html[data-orbit-code="motion"] .code-block-root[data-language="bash"] span:is([style*="--shiki-dark: #FFCB6B" i], [style*="--shiki-dark:#FFCB6B" i]),
html[data-orbit-code="motion"] .code-block-root[data-language="bash"] span:is([style*="--shiki-dark: #F07178" i], [style*="--shiki-dark:#F07178" i]) {
  --shiki-dark: var(--mc-command) !important;
}
html[data-orbit-code="motion"] .code-block-root[data-language="md"] span:is([style*="--shiki-dark: #FFCB6B" i], [style*="--shiki-dark:#FFCB6B" i]),
html[data-orbit-code="motion"] .code-block-root[data-language="md"] span:is([style*="--shiki-dark: #C792EA" i], [style*="--shiki-dark:#C792EA" i]) {
  --shiki-dark: var(--mc-text) !important;
}
html[data-orbit-code="motion"] .code-block-root[data-language="bash"] span:is([style*="--shiki-dark: #C792EA" i], [style*="--shiki-dark:#C792EA" i]) {
  --shiki-dark: var(--mc-keyword) !important;
}
html[data-orbit-code="motion"] .code-block-root:not([data-language="json"]) span:is([style*="--shiki-dark: #F78C6C" i], [style*="--shiki-dark:#F78C6C" i]) {
  --shiki-dark: var(--mc-number) !important;
}
html[data-orbit-code="motion"] .code-block-root span:is([style*="--shiki-dark: #82AAFF" i], [style*="--shiki-dark:#82AAFF" i]) {
  --shiki-dark: var(--mc-function) !important;
}
html[data-orbit-code="motion"] .code-block-root span:is([style*="--shiki-dark: #EEFFFF" i], [style*="--shiki-dark:#EEFFFF" i]) {
  --shiki-dark: var(--mc-text) !important;
}
html[data-orbit-code="motion"] .code-block-root span:is([style*="--shiki-dark: #89DDFF" i], [style*="--shiki-dark:#89DDFF" i]),
html[data-orbit-code="motion"] .code-block-root span:is([style*="--shiki-dark: #546E7A" i], [style*="--shiki-dark:#546E7A" i]) {
  --shiki-dark: var(--mc-muted) !important;
}
/* text with no token colour of its own (a wrapper's, or an unhighlighted stretch such as the brief's
   string) inherits the pre's --shiki-dark, Fern's dark-theme #EEFFFF, near-white on the light panel */
html[data-orbit-code="motion"] .code-block-root {
  --shiki-dark: var(--mc-text) !important;
}
html[data-orbit-code="motion"] .code-block-root span {
  --shiki-dark-font-weight: 400 !important;
  --shiki-light-font-weight: 400 !important;
  font-weight: 400 !important;
}
html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) button:is([aria-label="Copy to clipboard"], [aria-label="Copied!"]) {
  width: auto !important;
  padding-inline: 8px !important;
  gap: 6px;
  background-color: var(--mc-panel) !important;
  color: var(--mc-muted) !important;
  font: 500 11px/1 var(--font-code);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) button:is([aria-label="Copy to clipboard"], [aria-label="Copied!"])::after {
  content: "Copy";
}
html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) button:is([aria-label="Copy to clipboard"], [aria-label="Copied!"])[data-copied] {
  color: var(--mc-key) !important;
}
html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) button:is([aria-label="Copy to clipboard"], [aria-label="Copied!"])[data-copied]::after {
  content: "Copied";
}
@media (hover: hover) {
  html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) button:is([aria-label="Copy to clipboard"], [aria-label="Copied!"]):hover:not([data-copied]) {
    color: var(--mc-text) !important;
  }
}
html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) button[aria-label="Report incorrect code"] {
  opacity: 0;
  transition: opacity 150ms linear;
}
html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div):is(:hover, :focus-within) button[aria-label="Report incorrect code"] {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {

  html[data-orbit-code="motion"] :is(.fern-code-block, .fern-endpoint-code-snippets > div) button[aria-label="Report incorrect code"] {
    transition: none;
  }

}

/* Success in a window (the response's "200" and its example name): the landing page's teal tone for a
   full verdict (.orbit-tag[data-tone="full"]), not Fern's green: Orbit has no green */
html .fern-endpoint-code-snippets > div :is(.text-intent-success, .fern-docs-badge.green) {
  color: oklch(0.82 0.09 200) !important;
}
html .fern-endpoint-code-snippets > div .fern-docs-badge.green {
  background-color: color-mix(in oklab, oklch(0.82 0.09 200) 16%, transparent) !important;
}

/* Link previews (link-previews.js), the homepage's LinkTip pill (orbit-website/src/app/globals.css .orbit-link-tip)
   in the docs' own variables: fixed to the window (it sits outside Fern's tree), placed by the script
   above or below its link. The pointer can rest on it while it's open (link-previews.js keeps it open there),
   and not while it fades out; it never lands in a selection, and a long label wraps inside it (pretty, not
   balanced: balanced lines leave the box at its full width with a gap on the right; the pill's radius stays
   half its one-line height, so two lines read as a rounded box). It fades in and settles 2px, and under
   reduced motion it just appears. */
html .orbit-link-tip {
  position: fixed;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 13px;
  background: color-mix(in oklab, var(--grayscale-12) 9%, var(--background));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--grayscale-12) 8%, transparent),
    0 6px 16px -6px rgb(0 0 0 / 0.18);
  color: var(--grayscale-12);
  font: 500 12px/1.4 var(--font-body);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
html.dark .orbit-link-tip {
  background: color-mix(in oklab, var(--grayscale-12) 14%, var(--background));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--grayscale-12) 12%, transparent),
    0 6px 16px -6px rgb(0 0 0 / 0.5);
}
html .orbit-link-tip[data-open] {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
}
html .orbit-link-tip__mark {
  flex: none;
  width: 14px;
  height: 14px;
}
@media (prefers-reduced-motion: no-preference) {

  html .orbit-link-tip {
    transition: opacity 150ms linear, display 150ms allow-discrete;
  }
  html .orbit-link-tip[data-open] {
    transition: opacity 150ms linear, translate 220ms cubic-bezier(0.22, 1, 0.36, 1), display 150ms allow-discrete;
  }
  @starting-style {

    html .orbit-link-tip[data-open] { opacity: 0; translate: 0 2px; }
    html .orbit-link-tip[data-open][data-place="bottom"] { translate: 0 -2px; }
  
}

}

/* The mark alone at 768px and below, as the homepage's header does (SiteHeader.tsx: the mark, 24px, its tap
   area 44px) (2026-10-19, Alice: the full lockup is "tooooo much on small screens"). Fern's logo is two
   lockup images (light and dark); here they give way to the mark, whose brand teals read on both grounds,
   so one file serves both themes (orbit-website/public/Orbit-Mark.svg, inlined). */
@media (max-width: 768px) {

  html #fern-header [data-fern-logo] {
    min-width: 44px;
    min-height: 44px;
  }
  html #fern-header [data-fern-logo] img {
    display: none !important;
  }
  html #fern-header [data-fern-logo]::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYgMTI2Ij48IS0tIE9yYml0J3MgbWFyaywgdGhlIGVtYmxlbSBvZiBmZXJuL2RvY3MvYXNzZXRzL09yYml0LUxvZ28uc3ZnIC0tPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZzAiIHgxPSIwIiB5MT0iNjMuMiIgeDI9IjEyNS44IiB5Mj0iNjMuMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzAwOGI4ZSIvPjxzdG9wIG9mZnNldD0iLjIiIHN0b3AtY29sb3I9IiMwYThmOTAiLz48c3RvcCBvZmZzZXQ9Ii42IiBzdG9wLWNvbG9yPSIjMjc5ZDk2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNGFhZDllIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImcxIiB4MT0iNTcuNyIgeTE9IjE0Ny45IiB4Mj0iNjguNyIgeTI9IjEyOS4yIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjAyKSBzY2FsZSgxIC0xKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzAwOGI4ZSIvPjxzdG9wIG9mZnNldD0iLjIiIHN0b3AtY29sb3I9IiMwYThmOTAiLz48c3RvcCBvZmZzZXQ9Ii42IiBzdG9wLWNvbG9yPSIjMjc5ZDk2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNGFhZDllIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZmlsbD0iIzRhYWQ5ZSIgZD0iTTQyLjQsNjEuM2MtNC40LDMuMi04LjIsNi41LTExLjUsOS43LDEuNCwyLjgsMi44LDUuNiw0LjQsOC4zLDUuMSw5LDEwLjgsMTYuOSwxNi44LDIzLjcsNC43LTEuNSw5LjYtMy40LDE0LjUtNS43LTYuMi02LjQtMTIuOC0xNS4yLTE4LjYtMjUuNC0yLjEtMy42LTMuOS03LjItNS42LTEwLjdoMFoiLz48cGF0aCBmaWxsPSIjNGFhZDllIiBkPSJNOTAuNSw0N0M3MS4zLDEzLjMsNDMuMy02LjgsMjgsMi4xYy0xNCw4LjItMTQuNSwzMy42LjgsNjQuNS0uNy0xLjQuNywxLjYsMCwuMiwzLjMtMy4yLDcuMi02LjUsMTEuNi05LjctOC4yLTE5LTEwLTM1LjItMy40LTM5LDguMy00LjksMjYuNiwxMS40LDQwLjgsMzYuMyw1LjksMTAuMywxMC4yLDIwLjUsMTIuNiwyOS4yLDQuNC0zLjEsOC40LTYuMywxMi4xLTkuNi0yLjgtOC44LTYuOS0xOC0xMi4xLTI3LjFoMFoiLz48cGF0aCBmaWxsPSIjNGFhZDllIiBkPSJNMTAzLjgsNzguMmMtMy44LDMuMi03LjksNi40LTEyLjMsOS40LDIuMywxMC40LDEuNiwxOC4yLTIuNywyMC44LTQuNCwyLjYtMTEuNi0uOC0xOS41LTguMi01LDIuMy05LjksNC4yLTE0LjcsNS43LDE1LjcsMTYuOCwzMi42LDI0LjYsNDMuMiwxOC40LDEwLjUtNi4xLDEyLjItMjQuNCw2LTQ2LjFoMFoiLz48cGF0aCBmaWxsPSJ1cmwoI2cwKSIgZD0iTTEyMy43LDI4LjFoMGMtNi41LTExLjItMjYuNi0xMi40LTUwLTQuOCwzLjMsMy43LDYuNCw3LjgsOS41LDEyLjIsMTIuMy0zLjUsMjEuOC0zLjEsMjQuNiwxLjgsNC44LDguMy0xMS40LDI2LjctMzYuMiw0MS0yNC44LDE0LjQtNDguOSwxOS4yLTUzLjcsMTAuOS00LjgtOC4zLDExLjQtMjYuNywzNi4yLTQxLDAsMCw5LjUtNSw5LjUtNS4xLTMuMi00LjQtNi40LTguMy05LjYtMTEuNmwtNy4zLDRDMTMuMiw1NC44LTYuOCw4Mi45LDIuMSw5OC4zYzguOSwxNS4zLDQzLjQsMTIuMSw3Ni45LTcuMywzMy42LTE5LjQsNTMuNi00Ny41LDQ0LjYtNjIuOFoiLz48cGF0aCBmaWxsPSJ1cmwoI2cxKSIgZD0iTTU3LjYsNTMuOWM0LjYsMi41LDkuNiwzLjgsMTQuOCwzLjktMi41LDQuNi0zLjgsOS43LTMuOSwxNC45LTQuNi0yLjUtOS42LTMuOC0xNC44LTMuOSwyLjUtNC42LDMuOC05LjcsMy45LTE0LjlaIi8+PC9zdmc+Cg==") center / contain no-repeat;
  }

}

/* Fern's code-language glyph for cURL (Font Awesome's solid terminal, in the code window's header and the
   language menu) as Aether's terminal icon, the 16-unit "small" variant, so its line is 1px at 16px like
   the other icons (2026-10-19, Alice: "replace the terminal glyph, keep language logos"). The vendored file
   is fern/docs/assets/aether-icons/icon-descriptive-terminal-stroke-small.svg (from Aether's sprite);
   it's inlined here as a mask because Fern inlines this stylesheet into each page, where a relative url()
   wouldn't resolve. Fern-internal: matched by the glyph's path, so a change to Fern's icon needs this
   selector updated. The other languages keep their logos. */
html svg:has(> path[d^="M9.4 118.6"]) {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTYuODUzNDggNi42NDY0NUM3LjA0ODc0IDYuODQxNzEgNy4wNDg3NCA3LjE1ODI5IDYuODUzNDggNy4zNTM1NUw1LjIwNzAzIDlDNS4wMTE3OSA5LjE5NTI0IDQuNjk1MjQgOS4xOTUyNCA0LjUgOUM0LjMwNDc2IDguODA0NzYgNC4zMDQ3NiA4LjQ4ODIxIDQuNSA4LjI5Mjk3TDUuNDM5NDIgNy4zNTM1NUM1LjYzNDY4IDcuMTU4MjkgNS42MzQ2OCA2Ljg0MTcxIDUuNDM5NDIgNi42NDY0NUw0LjUgNS43MDcwM0M0LjMwNDc2IDUuNTExNzkgNC4zMDQ3NiA1LjE5NTI0IDQuNSA1QzQuNjk1MjQgNC44MDQ3NiA1LjAxMTc5IDQuODA0NzYgNS4yMDcwMyA1TDYuODUzNDggNi42NDY0NVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNMTAuNTA1IDguOTk1QzEwLjUwNSA5LjI3MTE0IDEwLjI4MTEgOS40OTUgMTAuMDA1IDkuNDk1SDguMDA1QzcuNzI4ODYgOS40OTUgNy41MDUgOS4yNzExNCA3LjUwNSA4Ljk5NUM3LjUwNSA4LjcxODg1IDcuNzI4ODYgOC40OTUgOC4wMDUgOC40OTVIMTAuMDA1QzEwLjI4MTEgOC40OTUgMTAuNTA1IDguNzE4ODUgMTAuNTA1IDguOTk1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGQ9Ik0xMi41IDEzVjE0SDMuNVYxM0gxMi41Wk0xMyAxMi41VjMuNUMxMyAzLjIyMzg2IDEyLjc3NjEgMyAxMi41IDNIMy41QzMuMjIzODYgMyAzIDMuMjIzODYgMyAzLjVWMTIuNUMzIDEyLjc3NjEgMy4yMjM4NiAxMyAzLjUgMTNWMTRDMi43MjMzNCAxNCAyLjA4NDYxIDEzLjQwOTcgMi4wMDc4MSAxMi42NTMzTDIgMTIuNUwyIDMuNUMyIDIuNjcxNTcgMi42NzE1NyAyIDMuNSAySDEyLjVMMTIuNjUzMyAyLjAwNzgxQzEzLjQwOTcgMi4wODQ2MSAxNCAyLjcyMzM0IDE0IDMuNVYxMi41TDEzLjk5MjIgMTIuNjUzM0MxMy45MjA1IDEzLjM1OTMgMTMuMzU5MyAxMy45MjA1IDEyLjY1MzMgMTMuOTkyMkwxMi41IDE0VjEzQzEyLjc3NjEgMTMgMTMgMTIuNzc2MSAxMyAxMi41WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+Cg==") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTYuODUzNDggNi42NDY0NUM3LjA0ODc0IDYuODQxNzEgNy4wNDg3NCA3LjE1ODI5IDYuODUzNDggNy4zNTM1NUw1LjIwNzAzIDlDNS4wMTE3OSA5LjE5NTI0IDQuNjk1MjQgOS4xOTUyNCA0LjUgOUM0LjMwNDc2IDguODA0NzYgNC4zMDQ3NiA4LjQ4ODIxIDQuNSA4LjI5Mjk3TDUuNDM5NDIgNy4zNTM1NUM1LjYzNDY4IDcuMTU4MjkgNS42MzQ2OCA2Ljg0MTcxIDUuNDM5NDIgNi42NDY0NUw0LjUgNS43MDcwM0M0LjMwNDc2IDUuNTExNzkgNC4zMDQ3NiA1LjE5NTI0IDQuNSA1QzQuNjk1MjQgNC44MDQ3NiA1LjAxMTc5IDQuODA0NzYgNS4yMDcwMyA1TDYuODUzNDggNi42NDY0NVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNMTAuNTA1IDguOTk1QzEwLjUwNSA5LjI3MTE0IDEwLjI4MTEgOS40OTUgMTAuMDA1IDkuNDk1SDguMDA1QzcuNzI4ODYgOS40OTUgNy41MDUgOS4yNzExNCA3LjUwNSA4Ljk5NUM3LjUwNSA4LjcxODg1IDcuNzI4ODYgOC40OTUgOC4wMDUgOC40OTVIMTAuMDA1QzEwLjI4MTEgOC40OTUgMTAuNTA1IDguNzE4ODUgMTAuNTA1IDguOTk1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGQ9Ik0xMi41IDEzVjE0SDMuNVYxM0gxMi41Wk0xMyAxMi41VjMuNUMxMyAzLjIyMzg2IDEyLjc3NjEgMyAxMi41IDNIMy41QzMuMjIzODYgMyAzIDMuMjIzODYgMyAzLjVWMTIuNUMzIDEyLjc3NjEgMy4yMjM4NiAxMyAzLjUgMTNWMTRDMi43MjMzNCAxNCAyLjA4NDYxIDEzLjQwOTcgMi4wMDc4MSAxMi42NTMzTDIgMTIuNUwyIDMuNUMyIDIuNjcxNTcgMi42NzE1NyAyIDMuNSAySDEyLjVMMTIuNjUzMyAyLjAwNzgxQzEzLjQwOTcgMi4wODQ2MSAxNCAyLjcyMzM0IDE0IDMuNVYxMi41TDEzLjk5MjIgMTIuNjUzM0MxMy45MjA1IDEzLjM1OTMgMTMuMzU5MyAxMy45MjA1IDEyLjY1MzMgMTMuOTkyMkwxMi41IDE0VjEzQzEyLjc3NjEgMTMgMTMgMTIuNzc2MSAxMyAxMi41WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+Cg==") center / contain no-repeat;
}
html svg > path[d^="M9.4 118.6"] {
  display: none;
}

/* ?nav=motion (docs-flag.js): the docs' chrome in Motion's docs' manner (motion.dev/docs,
   2026-10-19, Alice: "use motion's approach to light tho with the teal here and there"). Teal marks only
   where you are (the current page in the sidebar, the current entry in "On this page", the header's
   section, which already does); the small labels (the sidebar's section headings, "On this page", the
   eyebrow above the title, Copy page and View as Markdown, as Motion's "Copy page") are mono caps in ink or grey. The current page loses its box and the "On this
   page" list its rail (.toc-track, .toc-fill). The API reference's section heading is a link styled as one
   (font-semibold), so it takes the label treatment too. The header keeps its own type, as it's the homepage's too. */
html[data-orbit-nav="motion"] {
  --nav-here: oklch(0.425 0.072 211.8); /* teal-800 */
}
html.dark[data-orbit-nav="motion"] {
  --nav-here: oklch(0.82 0.09 200); /* the spot */
}
html[data-orbit-nav="motion"] :is(.fern-sidebar-heading-content, .fern-sidebar-link.font-semibold .fern-sidebar-link-title, #fern-toc div:has(+ .toc-root), .fern-breadcrumb, .fern-breadcrumb-item, .fern-page-actions :is(a, button)) {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-orbit-nav="motion"] :is(.fern-sidebar-heading-content, .fern-sidebar-link.font-semibold:not([data-state="active"]) .fern-sidebar-link-title) {
  color: var(--grayscale-12);
}
html[data-orbit-nav="motion"] :is(#fern-toc div:has(+ .toc-root), .fern-breadcrumb, .fern-breadcrumb-item) {
  color: var(--grayscale-11);
}
html[data-orbit-nav="motion"] .fern-sidebar-link[data-state="active"] {
  background-color: transparent;
  box-shadow: none;
}
html[data-orbit-nav="motion"] :is(.fern-sidebar-link[data-state="active"], .fern-sidebar-link[data-state="active"] .fern-sidebar-link-title, #fern-toc .toc-item[data-toc-state="current"] > a) {
  color: var(--nav-here);
}
html[data-orbit-nav="motion"] #fern-toc :is(.toc-track, .toc-fill) {
  display: none;
}

/* ?weights=two (docs-flag.js): the landing page's two weights instead of the docs' four
   (2026-10-19, Alice: "font weights seem arbitrary"; Motion's docs use two, 400 and 700). 400 for what
   you read or copy: running text, code (blocks and inline), the sidebar's and "On this page"'s links;
   500 for what labels or leads: headings, the header's links and buttons, the mono labels, badges and
   method tags, the API's property names, table heads, bold text, the Previous and Next titles. Inter at
   500 is the landing's display weight (GT Standard Medium), so a heading weighs the same on both. */
html[data-orbit-weights="two"] :is(
    h1, h2, h3, h4, h5, h6, th, strong, b, kbd,
    .font-semibold, .font-bold, .fern-docs-badge, .fern-api-property-key,
    .fern-changelog-day, .fern-changelog-card-link
  ) {
  font-weight: 500 !important;
}
html[data-orbit-weights="two"] :is(
    .code-block-root span,
    .fern-prose code:not(:is(h1, h2, h3, h4, h5, h6, th, strong, b) code),
    .fern-api-property-constraint,
    .fern-sidebar-link:not(.font-semibold) :is(.fern-sidebar-link-title, .fern-sidebar-link-title *),
    #fern-toc .toc-item a
  ) {
  --shiki-dark-font-weight: 400 !important;
  --shiki-light-font-weight: 400 !important;
  font-weight: 400 !important;
}

/* ?color=roles (docs-flag.js): one meaning per colour (2026-10-19, Alice: "we want to meet
   user expectations so they're not wasting time deciphering things"). Teal is where you are (and keys in
   code); green is success, red is error, as HTTP status colours are read everywhere (Aether's success
   and error, product-slice spec-hub/tokens/aether-semantic.css); the rest is ink and grey:
   - inline code a neutral chip (GitHub's, Motion's, Stripe's), not teal, which read as a link;
   - a 2xx badge green, 4xx/5xx red, and the example's name in ink;
   - "Required" in grey, not red, so red only ever means an error;
   - Try it in ink, as Get started, one primary button;
   - in light mode, cards and tables on the light panel with a hairline, as the code panel, not dark. */
html[data-orbit-color="roles"] {
  --role-chip: color-mix(in oklab, oklch(0.255 0.045 218) 7%, transparent);
  --role-ok-fg: #007f31; /* Aether green-70 */
  --role-ok-bg: #e5fff1; /* green-10 */
  --role-error-fg: #8e1a10; /* red-70 */
  --role-error-bg: #ffebe7; /* red-10 */
  --role-panel: oklch(0.965 0.006 200);
  --role-rule: color-mix(in oklab, oklch(0.255 0.045 218) 12%, transparent);
}
html.dark[data-orbit-color="roles"] {
  --role-chip: color-mix(in oklab, oklch(0.955 0.01 105) 10%, transparent);
  --role-ok-fg: #6bdd9a; /* green-30 */
  --role-ok-bg: #013614; /* green-90 */
  --role-error-fg: #f79a8e; /* red-30 */
  --role-error-bg: #591b08; /* red-90 */
}
html[data-orbit-color="roles"] :is(.fern-prose, .fern-card, .fern-table-root) code:not(.code-block):not(a code):not(:is(h1, h2, h3, h4) code) {
  background-color: var(--role-chip) !important;
  color: var(--grayscale-12) !important;
}
/* (inside an example as well, where the earlier "Orbit has no green" rule set the spot) */
html[data-orbit-color="roles"] :is(.fern-docs-badge.green, .fern-endpoint-code-snippets > div .fern-docs-badge.green) {
  background-color: var(--role-ok-bg) !important;
  color: var(--role-ok-fg) !important;
}
html[data-orbit-color="roles"] .fern-docs-badge.red {
  background-color: var(--role-error-bg) !important;
  color: var(--role-error-fg) !important;
}
html[data-orbit-color="roles"] .fern-endpoint-code-snippets > div .text-intent-success {
  color: var(--grayscale-12) !important;
}
html[data-orbit-color="roles"] .fern-api-property-required {
  color: var(--grayscale-11) !important;
}
html[data-orbit-color="roles"] .fern-endpoint-code-snippets button[class*="bg-(color:--accent)"] {
  background-color: oklch(0.255 0.045 218) !important;
  color: oklch(0.985 0.008 105) !important;
}
html.dark[data-orbit-color="roles"] .fern-endpoint-code-snippets button[class*="bg-(color:--accent)"] {
  background-color: oklch(0.955 0.01 105) !important;
  color: oklch(0.255 0.045 218) !important;
}
@media (hover: hover) {
  html[data-orbit-color="roles"] .fern-endpoint-code-snippets button[class*="bg-(color:--accent)"]:hover {
    background-color: oklch(0.34 0.059 216.2) !important; /* teal-900, the CTA's hover */
  }
  html.dark[data-orbit-color="roles"] .fern-endpoint-code-snippets button[class*="bg-(color:--accent)"]:hover {
    background-color: oklch(0.9 0.012 105) !important;
  }
}
/* light mode's cards and tables: the page's own variables back, on the light panel */
html[data-orbit-color="roles"]:not(.dark) :is(.fern-card, .fern-table-root) {
  --color-black: inherit;
  --color-body: inherit;
  --grayscale-12: inherit;
  --grayscale-11: inherit;
  --grayscale-a12: inherit;
  --grayscale-a11: inherit;
  --grayscale-a10: inherit;
  --grayscale-a9: inherit;
  --grayscale-a3: inherit;
  --grayscale-a4: inherit;
  --grayscale-a5: inherit;
  --grayscale-a6: inherit;
  --border: inherit;
  --card-background: inherit;
  --accent: inherit;
  --accent-9: inherit;
  --accent-a9: inherit;
  --accent-11: inherit;
  --accent-a11: inherit;
  --accent-contrast: inherit;
  color: inherit;
  color-scheme: light;
  border: 1px solid var(--role-rule);
  background: var(--role-panel);
  box-shadow: none;
}
html[data-orbit-color="roles"]:not(.dark) .fern-table-root {
  background: transparent;
}
html[data-orbit-color="roles"]:not(.dark) .fern-table-root th {
  background-color: var(--role-panel);
}
html[data-orbit-color="roles"]:not(.dark) .fern-table-root :is(th, td) {
  border-color: var(--role-rule);
}
html[data-orbit-color="roles"]:not(.dark) .fern-card svg {
  color: var(--grayscale-11);
}
@media (hover: hover) {
  html[data-orbit-color="roles"]:not(.dark) .fern-card.interactive:hover {
    border-color: color-mix(in oklab, oklch(0.255 0.045 218) 28%, transparent);
  }
}

/* ?type=landing (docs-flag.js): the landing page's type hierarchy, which builds it as
   Motion's docs do, from colour, tracking and space rather than size (2026-10-19, Alice: "Type
   hierarchy?"). Three changes, sizes unchanged:
   - running text in the landing's muted ink (--orbit-fg-muted: 8.4:1 light, 7.7:1 dark); headings, code,
     links and bold text stay in full ink, so they lead. Cards and tables keep their own colours;
   - headings set tight, the landing's values: line height 1.1 (h1), 1.25 (h2), 1.3 (h3); tracking -2%,
     -1.5%, -1%;
   - sections spaced so a heading sits closer to its text than to the section before: 64px above an h2
     and 16px below (from 48 and 24), 40px above an h3 (from 32). */
html[data-orbit-type="landing"] {
  --type-text: oklch(0.409 0.03 215);
  --type-ink: oklch(0.255 0.045 218);
}
html.dark[data-orbit-type="landing"] {
  --type-text: oklch(0.72 0.01 105);
  --type-ink: oklch(0.955 0.01 105);
}
html[data-orbit-type="landing"] .fern-prose :is(p, li):not(:is(.fern-card, .fern-table-root, .fern-callout) *) {
  color: var(--type-text);
}
html[data-orbit-type="landing"] .fern-prose :is(p, li):not(:is(.fern-card, .fern-table-root, .fern-callout) *) :is(a.fern-mdx-link, strong, b) {
  color: var(--type-ink);
}
html[data-orbit-type="landing"] .fern-main h1 {
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* the home's headline too, over its own rule (it was, while ?docs=v2's attribute outranked that rule) */
html[data-orbit-type="landing"][data-orbit-route="home"] .fern-layout-overview article > header h1 {
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html[data-orbit-type="landing"] .fern-prose h2 {
  margin-top: 64px;
  margin-bottom: 16px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
html[data-orbit-type="landing"] .fern-prose h3 {
  line-height: 1.3;
  letter-spacing: -0.01em;
}
html[data-orbit-type="landing"] .fern-prose h3:not(h2 + h3, :first-child) {
  margin-top: 40px;
}

/* ?color=roles: the Welcome cards in Lens's docs' feature-cell form (lens.xyz/docs, 2026-10-19): the
   icon in a small tile (the light panel with a hairline), the title, a one-line 14px description in
   grey; the card on the page's own white with a hairline, so the tile carries the panel colour. The
   icon is drawn at 22px, so its 2-unit line scales to about 1.4px, Lens's weight. */
html[data-orbit-color="roles"] {
  --card-tile: oklch(0.965 0.006 200);
}
html.dark[data-orbit-color="roles"] {
  --card-tile: oklch(0.215 0.012 218);
}
html[data-orbit-color="roles"]:not(.dark) .fern-card {
  background: transparent;
}
html[data-orbit-color="roles"] .fern-card .card-icon {
  display: grid;
  place-items: center;
  width: 44px !important; /* Fern sets the icon's size inline (iconSize) */
  height: 44px !important;
  margin-bottom: 16px;
  border: 1px solid var(--role-rule, color-mix(in oklab, currentColor 12%, transparent));
  border-radius: 10px;
  background: var(--card-tile);
  color: var(--grayscale-11);
}
html[data-orbit-color="roles"] .fern-card .card-icon :is(span, svg) {
  width: 22px !important;
  height: 22px !important;
}
html[data-orbit-color="roles"] .fern-card .card-icon svg {
  color: var(--grayscale-11);
}
html[data-orbit-color="roles"] .fern-card .fern-card-icon-row .space-y-1 > div:last-child {
  font-size: 14px;
  line-height: 1.5;
}

/* the page's subtitle (frontmatter subtitle:), one grey line under the title as Motion's and Lens's are:
   the running text's muted ink under ?type=landing, Fern's grey otherwise */
html .fern-page-subtitle,
html .fern-page-subtitle p {
  color: var(--type-text, var(--grayscale-a11));
}

/* ?code=motion: line numbers at 4.7:1 on the panel (Fern's grey was 3.3:1) */
html[data-orbit-code="motion"] {
  --mc-gutter: oklch(0.53 0.012 210);
}
html.dark[data-orbit-code="motion"] {
  --mc-gutter: oklch(0.62 0.012 218);
}
html[data-orbit-code="motion"] .code-block-flow.show-gutter > .code-block-line::before,
html[data-orbit-code="motion"] .code-block-line-gutter > span {
  color: var(--mc-gutter);
}
/* ?color=roles: the current page's method tag in the sidebar as the others (Fern draws it solid, with an edge) */
html[data-orbit-color="roles"] #fern-sidebar .fern-docs-badge.solid {
  background-color: color-mix(in oklab, var(--grayscale-12) 7%, transparent) !important;
  color: var(--grayscale-11) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ?color=roles: callouts in Motion's docs' form (2026-10-20, Alice: "something like attached", Motion's
   Tip): a neutral panel, a mono caps label beside the icon, the text in the running text's muted ink and
   links in ink. Only the icon takes a colour, and only where the colour already means something:
   green for a tip, success or check, Aether's warning yellow for a warning, red for an error; a note,
   info or launch stays neutral, so teal keeps its one job. Fern's own tints (a blue note, a green tip,
   coloured text and edges) go. The label is Fern's empty title slot; a callout given a title shows it
   there instead. Reference page: docs/pages/design/callouts.mdx (hidden). */
html[data-orbit-color="roles"] .fern-callout {
  --callout-icon: var(--grayscale-11);
  border: 0 !important;
  border-radius: 8px;
  background: var(--card-tile, oklch(0.965 0.006 200)) !important;
  color: var(--type-text, var(--grayscale-11)) !important;
}
html[data-orbit-color="roles"] .fern-callout :is(p, li, div) {
  color: inherit !important;
}
html[data-orbit-color="roles"] .fern-callout a {
  color: var(--grayscale-12) !important;
}
html[data-orbit-color="roles"] .fern-callout :is([data-intent], *) svg,
html[data-orbit-color="roles"] .fern-callout svg {
  color: var(--callout-icon) !important;
}
html[data-orbit-color="roles"] .fern-callout:is([data-intent="tip"], [data-intent="success"], [data-intent="check"]) {
  --callout-icon: var(--role-ok-fg);
}
html[data-orbit-color="roles"] .fern-callout[data-intent="warning"] {
  --callout-icon: #ad7a03; /* Aether yellow-70, its warning colour */
}
html.dark[data-orbit-color="roles"] .fern-callout[data-intent="warning"] {
  --callout-icon: #ffe47e; /* yellow-30 */
}
html[data-orbit-color="roles"] .fern-callout[data-intent="error"] {
  --callout-icon: var(--role-error-fg);
}
/* the label: Fern's title slot, empty unless the callout has a title */
html[data-orbit-color="roles"] .fern-callout .font-heading {
  color: var(--grayscale-12) !important;
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-orbit-color="roles"] .fern-callout[data-intent="note"] .font-heading:empty::after { content: "Note"; }
html[data-orbit-color="roles"] .fern-callout[data-intent="info"] .font-heading:empty::after { content: "Info"; }
html[data-orbit-color="roles"] .fern-callout[data-intent="tip"] .font-heading:empty::after { content: "Tip"; }
html[data-orbit-color="roles"] .fern-callout[data-intent="warning"] .font-heading:empty::after { content: "Warning"; }
html[data-orbit-color="roles"] .fern-callout[data-intent="error"] .font-heading:empty::after { content: "Error"; }
html[data-orbit-color="roles"] .fern-callout[data-intent="success"] .font-heading:empty::after { content: "Success"; }
html[data-orbit-color="roles"] .fern-callout[data-intent="check"] .font-heading:empty::after { content: "Check"; }
html[data-orbit-color="roles"] .fern-callout[data-intent="launch"] .font-heading:empty::after { content: "Launch"; }
html[data-orbit-color="roles"] .fern-callout .font-heading:empty {
  margin-bottom: 4px;
}
/* ?color=roles: a warning and an error take their status colours on the whole callout, as Lens's warning
   does (2026-10-20, Alice: "shouldn't we use warning and error colors for the respective status' tho"):
   they have to be seen before the reader acts, so they stand out; a note, info or tip stays neutral.
   Aether's status backgrounds (yellow-10, red-10; yellow-90, red-90 in dark) with the label and icon in
   its status text colour; the body stays in the muted ink (8.3:1 and 7.6:1 on the tints). The warning's
   label is yellow-80 (5.3:1): Aether's warning text, yellow-70, is 3.6:1 on its own tint. */
html[data-orbit-color="roles"] .fern-callout[data-intent="warning"] {
  --callout-icon: #886000; /* yellow-80 */
  background: #fff9e0 !important; /* yellow-10 */
}
html[data-orbit-color="roles"] .fern-callout[data-intent="error"] {
  --callout-icon: #8e1a10; /* red-70 */
  background: #ffebe7 !important; /* red-10 */
}
html.dark[data-orbit-color="roles"] .fern-callout[data-intent="warning"] {
  --callout-icon: #ffe47e; /* yellow-30 */
  background: color-mix(in oklab, #523a03 50%, oklch(0.215 0.012 218)) !important; /* yellow-90, half into the dark panel: full strength outweighed the page */
}
html.dark[data-orbit-color="roles"] .fern-callout[data-intent="error"] {
  --callout-icon: #f79a8e; /* red-30 */
  background: color-mix(in oklab, #591b08 50%, oklch(0.215 0.012 218)) !important; /* red-90, half into the dark panel */
}
html[data-orbit-color="roles"] .fern-callout:is([data-intent="warning"], [data-intent="error"]) .font-heading {
  color: var(--callout-icon) !important;
}
/* in dark, the muted body fell to 4.3:1 on yellow-90: full paper there (both tints) */
html.dark[data-orbit-color="roles"] .fern-callout:is([data-intent="warning"], [data-intent="error"]) {
  color: oklch(0.955 0.01 105) !important;
}

/* The Callouts reference page (docs/pages/design/callouts.mdx) is hidden in docs.yml, but Fern lists a
   hidden page in the sidebar while it's open: keep it out there too, so it's reached by its URL only */
#fern-sidebar :is(a[href$="/docs/get-started/callouts"], a[href$="/docs/get-started/callouts/"]) {
  display: none !important;
}