:root { --header-height: 64px; --header-height-real: 64px; --mobile-header-height-real: 64px; --content-width: 640px; --sidebar-width: 288px; --page-width: 100vw; --logo-height: 28px; --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } :root { /* for backwards compatibility */ --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: #fcfcfc; --accent-2: #f9f9f9; --accent-3: #efefef; --accent-4: #e8e8e8; --accent-5: #e0e0e0; --accent-6: #d8d8d8; --accent-7: #cecece; --accent-8: #bbb; --accent-9: #000; --accent-10: #2e2e2e; --accent-11: #646464; --accent-12: #202020; --accent-a1: #00000003; --accent-a2: #00000006; --accent-a3: #00000010; --accent-a4: #00000017; --accent-a5: #0000001f; --accent-a6: #00000027; --accent-a7: #00000031; --accent-a8: #00000044; --accent-a9: #000000; --accent-a10: #000000d1; --accent-a11: #0000009b; --accent-a12: #000000df; --accent-contrast: #fff; --accent-surface: #f8f8f8cc; --accent-indicator: #000; --accent-track: #000; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --accent-1: oklch(99.1% 0 none); --accent-2: oklch(98.1% 0 none); --accent-3: oklch(95.3% 0 none); --accent-4: oklch(93% 0 none); --accent-5: oklch(90.8% 0 none); --accent-6: oklch(88.4% 0 none); --accent-7: oklch(85.1% 0 none); --accent-8: oklch(79.1% 0 none); --accent-9: oklch(0% 0 none); --accent-10: oklch(30% 0 none); --accent-11: oklch(50.3% 0 none); --accent-12: oklch(24.3% 0 none); --accent-a1: color(display-p3 0 0 0 / 0.0118); --accent-a2: color(display-p3 0 0 0 / 0.0235); --accent-a3: color(display-p3 0 0 0 / 0.0627); --accent-a4: color(display-p3 0 0 0 / 0.0902); --accent-a5: color(display-p3 0 0 0 / 0.1216); --accent-a6: color(display-p3 0 0 0 / 0.1529); --accent-a7: color(display-p3 0 0 0 / 0.1922); --accent-a8: color(display-p3 0 0 0 / 0.2667); --accent-a9: color(display-p3 0 0 0); --accent-a10: color(display-p3 0 0 0 / 0.8196); --accent-a11: color(display-p3 0 0 0 / 0.6078); --accent-a12: color(display-p3 0 0 0 / 0.8745); --accent-contrast: #fff; --accent-surface: color(display-p3 0.9725 0.9725 0.9725 / 0.8); --accent-indicator: oklch(0% 0 none); --accent-track: oklch(0% 0 none); } } } .light, :root { --grayscale-1: #fcfcfc; --grayscale-2: #f9f9f9; --grayscale-3: #f0f0f0; --grayscale-4: #e8e8e8; --grayscale-5: #e0e0e0; --grayscale-6: #d9d9d9; --grayscale-7: #cecece; --grayscale-8: #bbbbbb; --grayscale-9: #8d8d8d; --grayscale-10: #838383; --grayscale-11: #646464; --grayscale-12: #202020; --grayscale-a1: #00000003; --grayscale-a2: #00000006; --grayscale-a3: #0000000f; --grayscale-a4: #00000017; --grayscale-a5: #0000001f; --grayscale-a6: #00000026; --grayscale-a7: #00000031; --grayscale-a8: #00000044; --grayscale-a9: #00000072; --grayscale-a10: #0000007c; --grayscale-a11: #0000009b; --grayscale-a12: #000000df; --grayscale-contrast: #000; --grayscale-surface: #ffffffcc; --grayscale-indicator: #8d8d8d; --grayscale-track: #8d8d8d; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --grayscale-1: color(display-p3 0.988 0.988 0.988); --grayscale-2: color(display-p3 0.975 0.975 0.975); --grayscale-3: color(display-p3 0.939 0.939 0.939); --grayscale-4: color(display-p3 0.908 0.908 0.908); --grayscale-5: color(display-p3 0.88 0.88 0.88); --grayscale-6: color(display-p3 0.849 0.849 0.849); --grayscale-7: color(display-p3 0.807 0.807 0.807); --grayscale-8: color(display-p3 0.732 0.732 0.732); --grayscale-9: color(display-p3 0.553 0.553 0.553); --grayscale-10: color(display-p3 0.512 0.512 0.512); --grayscale-11: color(display-p3 0.392 0.392 0.392); --grayscale-12: color(display-p3 0.125 0.125 0.125); --grayscale-a1: #00000003; --grayscale-a2: #00000006; --grayscale-a3: #0000000f; --grayscale-a4: #00000017; --grayscale-a5: #0000001f; --grayscale-a6: #00000026; --grayscale-a7: #00000031; --grayscale-a8: #00000044; --grayscale-a9: #00000072; --grayscale-a10: #0000007c; --grayscale-a11: #0000009b; --grayscale-a12: #000000df; --grayscale-contrast: #000; --grayscale-surface: color(display-p3 1 1 1 / 80%); --grayscale-indicator: color(display-p3 0.553 0.553 0.553); --grayscale-track: color(display-p3 0.553 0.553 0.553); } } } .dark { --accent-1: #1e1e1e; --accent-2: #252525; --accent-3: #2e2e2e; --accent-4: #343434; --accent-5: #3a3a3a; --accent-6: #424242; --accent-7: #4f4f4f; --accent-8: #656565; --accent-9: #fff; --accent-10: #f6f6f6; --accent-11: #b5b5b5; --accent-12: #eee; --accent-a1: #00000000; --accent-a2: #ffffff08; --accent-a3: #ffffff12; --accent-a4: #ffffff19; --accent-a5: #ffffff20; --accent-a6: #ffffff29; --accent-a7: #ffffff38; --accent-a8: #ffffff50; --accent-a9: #ffffff; --accent-a10: #fffffff5; --accent-a11: #ffffffab; --accent-a12: #ffffffec; --accent-contrast: #311921; --accent-surface: #2c2c2c80; --accent-indicator: #fff; --accent-track: #fff; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --accent-1: oklch(23.5% 0 none); --accent-2: oklch(26.5% 0 none); --accent-3: oklch(30% 0 none); --accent-4: oklch(32.4% 0 none); --accent-5: oklch(34.8% 0 none); --accent-6: oklch(37.9% 0 none); --accent-7: oklch(42.7% 0 none); --accent-8: oklch(50.7% 0 none); --accent-9: oklch(100% 0 none); --accent-10: oklch(97.3% 0 none); --accent-11: oklch(77.4% 0 none); --accent-12: oklch(94.9% 0 none); --accent-a1: color(display-p3 0 0 0 / 0); --accent-a2: color(display-p3 1 1 1 / 0.0311); --accent-a3: color(display-p3 1 1 1 / 0.0711); --accent-a4: color(display-p3 1 1 1 / 0.0978); --accent-a5: color(display-p3 1 1 1 / 0.1244); --accent-a6: color(display-p3 1 1 1 / 0.16); --accent-a7: color(display-p3 1 1 1 / 0.2178); --accent-a8: color(display-p3 1 1 1 / 0.3156); --accent-a9: color(display-p3 1 1 1); --accent-a10: color(display-p3 1 1 1 / 0.96); --accent-a11: color(display-p3 1 1 1 / 0.6711); --accent-a12: color(display-p3 1 1 1 / 0.9244); --accent-contrast: #311921; --accent-surface: color(display-p3 0.1725 0.1725 0.1725 / 0.5); --accent-indicator: oklch(100% 0 none); --accent-track: oklch(100% 0 none); } } } .dark { --grayscale-1: #111111; --grayscale-2: #191919; --grayscale-3: #222222; --grayscale-4: #2a2a2a; --grayscale-5: #313131; --grayscale-6: #3a3a3a; --grayscale-7: #484848; --grayscale-8: #606060; --grayscale-9: #6e6e6e; --grayscale-10: #7b7b7b; --grayscale-11: #b4b4b4; --grayscale-12: #eeeeee; --grayscale-a1: #00000000; --grayscale-a2: #ffffff09; --grayscale-a3: #ffffff12; --grayscale-a4: #ffffff1b; --grayscale-a5: #ffffff22; --grayscale-a6: #ffffff2c; --grayscale-a7: #ffffff3b; --grayscale-a8: #ffffff55; --grayscale-a9: #ffffff64; --grayscale-a10: #ffffff72; --grayscale-a11: #ffffffaf; --grayscale-a12: #ffffffed; --grayscale-contrast: #fff; --grayscale-surface: rgba(0, 0, 0, 0.05); --grayscale-indicator: #6e6e6e; --grayscale-track: #6e6e6e; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --grayscale-1: color(display-p3 0.067 0.067 0.067); --grayscale-2: color(display-p3 0.098 0.098 0.098); --grayscale-3: color(display-p3 0.135 0.135 0.135); --grayscale-4: color(display-p3 0.163 0.163 0.163); --grayscale-5: color(display-p3 0.192 0.192 0.192); --grayscale-6: color(display-p3 0.228 0.228 0.228); --grayscale-7: color(display-p3 0.283 0.283 0.283); --grayscale-8: color(display-p3 0.375 0.375 0.375); --grayscale-9: color(display-p3 0.431 0.431 0.431); --grayscale-10: color(display-p3 0.484 0.484 0.484); --grayscale-11: color(display-p3 0.706 0.706 0.706); --grayscale-12: color(display-p3 0.933 0.933 0.933); --grayscale-a1: #00000000; --grayscale-a2: #ffffff09; --grayscale-a3: #ffffff12; --grayscale-a4: #ffffff1b; --grayscale-a5: #ffffff22; --grayscale-a6: #ffffff2c; --grayscale-a7: #ffffff3b; --grayscale-a8: #ffffff55; --grayscale-a9: #ffffff64; --grayscale-a10: #ffffff72; --grayscale-a11: #ffffffaf; --grayscale-a12: #ffffffed; --grayscale-contrast: #fff; --grayscale-surface: color(display-p3 0 0 0 / 5%); --grayscale-indicator: color(display-p3 0.431 0.431 0.431); --grayscale-track: color(display-p3 0.431 0.431 0.431); } } } .light, :root { color-scheme: light; --accent: rgba(0, 0, 0, 1); --background: rgba(255, 255, 255, 1); --border: rgba(230, 230, 230, 1); --sidebar-background: rgba(255, 255, 255, 1); --header-background: rgba(255, 255, 255, 1); --card-background: rgba(255, 255, 255, 1); --theme-color: #fff; } .dark { color-scheme: dark; --accent: rgba(255, 255, 255, 1); --background: rgba(30, 30, 30, 1); --border: rgba(40, 40, 40, 1); --sidebar-background: rgba(18, 18, 18, 1); --header-background: rgba(18, 18, 18, 1); --card-background: rgba(20, 20, 20, 1); --theme-color: #1e1e1e; } /* Product Switcher Tabs Theme */ :root [data-product-switcher-theme="tabs"] .fern-product-tabs-row { border-bottom: 1px solid var(--border-concealed); } :root [data-product-switcher-theme="tabs"] .fern-product-tabs { display: none; gap: 4px; align-items: stretch; padding-inline: var(--spacing-page-margin, 1rem); overflow-x: auto; scrollbar-width: none; } :root [data-product-switcher-theme="tabs"] .fern-product-tabs::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { :root [data-product-switcher-theme="tabs"] .fern-product-tabs { display: flex; } } :root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger { padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--grayscale-11); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; } :root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger:not([data-active="true"]):hover { color: var(--grayscale-12); } :root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger[data-active="true"] { color: var(--accent-11); border-bottom-color: var(--accent-9); } :root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger:not([data-active="true"]):focus-visible { color: var(--grayscale-12); outline: none; } /* * The product switcher (Sarvam API / Sarvam Doc AI / Sarvam Creative / API * Reference) is Fern's native header row, using Fern's default active-tab * underline as-is (a thinner 1px override made the active tab too hard to * spot). The "Community" and "API Status" navbar links render as "minimal" * fern-buttons (no background, no border) by default, so the outline below * is the only way to make them read as buttons rather than plain text * (radius matches the default .fern-button rounding used by "Sign Up"). * Fern only auto-spaces a "minimal" button that follows a filled/outlined * one, not two adjacent "minimal" buttons, hence the explicit gap below. * All colors use Fern's theme tokens. */ .fern-header-navbar-links .fern-button.minimal { background-color: transparent; border: 1px solid var(--grayscale-a5); border-radius: calc(var(--radius) * 2); } .fern-header-navbar-links .fern-button.minimal:hover { background-color: var(--grayscale-a3); } .fern-header-navbar-links .fern-button.minimal:focus-visible { background-color: var(--grayscale-a3); outline: none; } /* Pin every button in this row to the same explicit height and icon size. * Community/Sign Up carry icons and API Status doesn't; letting each * button's own icon-driven content box decide the height lets them drift * a pixel or two apart instead of lining up exactly. 36px matches the * search bar / Ask AI button (Fern's h-9) just to the left of this row. */ .fern-header-navbar-links .fern-button { height: 36px; } .fern-header-navbar-links .fern-button svg { width: 16px; height: 16px; } .fern-header-navbar-links .fern-button.minimal + .fern-button.minimal { margin-left: 8px; } /* Fern's native "Ask AI" button (in the searchbar wrapper, just left of this * row) sits under the header's own 16px flex gap, double the 8px rhythm * between Community/API Status/Sign Up/theme-toggle. Pull this row 8px * closer so the Ask AI -> Community gap matches the rest. */ .fern-header-navbar-links { margin-left: -8px; } /* * Line the product switcher row up with the 32px content edge used by the * header logo (.fern-header-content padding-inline) and the sidebar section * headings. Fern insets this row by `var(--spacing-page-margin, 1rem)`, and * that variable is never defined, so the row falls back to 16px; each tab * then adds its own 14px of padding. The result is a first tab whose label * starts at 30px and whose active underline (a border-bottom on the tab * itself, so it spans the padding box) starts at 16px, both short of the * 32px line. Inset the row to 32px and drop the first tab's leading padding * so the label and the underline both begin exactly on it. Only the leading * edge is overridden; the 16px trailing inset still cushions the row's * horizontal overflow scroll. * * Every selector here mirrors Fern's own * `:root [data-product-switcher-theme="tabs"] .fern-product-tabs` prefix and * adds an element name (nav/a), so each rule outranks Fern's default on * specificity alone rather than depending on which stylesheet loads last. * A bare `.fern-product-tabs .product-tab-trigger` loses to it outright. */ :root [data-product-switcher-theme="tabs"] nav.fern-product-tabs { padding-inline-start: 32px; } :root [data-product-switcher-theme="tabs"] nav.fern-product-tabs a.product-tab-trigger:first-child { padding-inline-start: 0; } /* NOTE: this rule has never taken effect. Fern's own * `:root [data-product-switcher-theme="tabs"] .fern-product-tabs * .product-tab-trigger` sets padding: 10px 14px / font-size: 14px at a higher * specificity, so the tabs render at Fern's size, not this one. Left as-is * rather than raised to a winning selector, because actually shrinking the * tabs is a visual change beyond the alignment fix above; delete it or give * it the `nav`/`a` prefix used above if the smaller tabs are wanted. */ .fern-product-tabs .product-tab-trigger { padding: 8px 12px; font-size: 13px; } /* Center Frame/figure caption text for Sarvam Doc AI screenshots. */ figure figcaption { display: block !important; text-align: center !important; text-wrap: pretty; } /* * Fern only bolds a sidebar section header (semibold, full-strength text * color) when it sits at the top of the tree. A section nested inside * another section (e.g. "Best Practices" inside "Integration") renders as a * plain, muted link instead of a heading. Reapply the same treatment to any * collapsible section header regardless of depth, so nested sections read * consistently with top-level ones. Leaf page links (plain , not a *

title ("August 2026") - same information * twice. That title

is always the sole direct-child

August 28, 2026

Content Agents is Now Content Studio

Work Agents is Now Cowork