diff --git a/app/[...slug]/doc-prose.css b/app/[...slug]/doc-prose.css
new file mode 100644
index 000000000..07ba0d3f4
--- /dev/null
+++ b/app/[...slug]/doc-prose.css
@@ -0,0 +1,187 @@
+/* Article reading-column typography for MDX-rendered content, applied via
+   `doc-prose` on DocsBody (alongside fumadocs' own `prose`). Deliberately
+   UNLAYERED: it must outrank `@layer utilities` on elements inside the
+   article exactly like the hand-written rules it replaces — components that
+   need to override it locally use `!` utilities. Declarations use @apply so
+   values stay in the design-token vocabulary. */
+@reference "../globals.css";
+
+.doc-prose {
+    --docs-type-size: 16px;
+    --docs-type-leading: 1.75;
+    --docs-type-flow: 1.4em;
+    /* Body copy matches the lede's colour — the brighter gray-300 read as
+     bold against it. --text-tertiary is theme-aware (gray-400 dark /
+     gray-600 light). */
+    --docs-copy: var(--text-tertiary);
+    --tw-prose-body: var(--docs-copy);
+    --tw-prose-headings: var(--text-primary);
+    --tw-prose-links: var(--text-primary);
+    --tw-prose-bold: var(--text-primary);
+    --tw-prose-code: var(--text-primary);
+    --tw-prose-bullets: var(--text-quaternary);
+    @apply max-w-none font-normal text-(--docs-copy) text-(length:--docs-type-size) leading-(--docs-type-leading) tracking-[-.006em];
+
+    /* `:is` (not `:where`) so these outrank plain colour utilities on elements
+     inside the article. */
+    & :is(p, li, dd, td) {
+        @apply text-(--docs-copy);
+    }
+    & :is(strong, b) {
+        @apply text-(--text-primary);
+    }
+
+    /* Vertical rhythm: zero every block, then space adjacent flow siblings.
+     Reading-column measure applies to direct children. */
+    & :where(p, ul, ol, blockquote, table, figure, hr) {
+        @apply my-0;
+    }
+    & > :where(p, ul, ol, blockquote, dl) {
+        @apply max-w-[768px];
+    }
+    &
+        > :where(
+            p,
+            ul,
+            ol,
+            blockquote,
+            table,
+            figure,
+            hr,
+            .fd-codeblock
+        )
+        + :where(
+            p,
+            ul,
+            ol,
+            blockquote,
+            table,
+            figure,
+            hr,
+            .fd-codeblock
+        ) {
+        @apply mt-(--docs-type-flow);
+    }
+
+    /* Heading rules honour `.not-prose` — components like fumadocs' Card
+       render their own <h3> titles, which the article heading margins were
+       inflating (a 40px gap above every card title). */
+    & h2:not(:is(.not-prose, .not-prose *)) {
+        @apply mt-[58px] mb-[14px] p-0 font-sans text-[24px] leading-[31px] font-semibold tracking-[-.022em] text-balance;
+    }
+    & h3:not(:is(.not-prose, .not-prose *)) {
+        @apply mt-10 mb-[11px] font-sans text-[20px] leading-[27px] font-semibold tracking-[-.015em] text-balance;
+    }
+    & h4:not(:is(.not-prose, .not-prose *)) {
+        @apply mt-8 mb-[9px] font-sans text-[17px] leading-6 font-semibold tracking-[-.01em];
+    }
+    & h2 + h3:not(:is(.not-prose, .not-prose *)) {
+        @apply mt-[18px];
+    }
+    & h3 + h4:not(:is(.not-prose, .not-prose *)) {
+        @apply mt-4;
+    }
+    & :where(h2, h3, h4) + :where(p, ul, ol) {
+        @apply mt-0;
+    }
+
+    & :where(ul, ol) {
+        @apply ps-[1.35em];
+    }
+    & li {
+        @apply ps-[.25em];
+    }
+    & li + li {
+        @apply mt-[.55em];
+    }
+    & :is(li > ul, li > ol) {
+        @apply mt-[.55em];
+    }
+
+    & blockquote {
+        @apply mt-[calc(var(--docs-type-flow)*1.15)] py-0.5 ps-[18px] pe-0 border-l-2 border-l-(--border-strong) text-(--text-tertiary) not-italic;
+    }
+    & hr {
+        @apply mt-[calc(var(--docs-type-flow)*2)] border-(--border-primary);
+    }
+    & table {
+        @apply mt-[calc(var(--docs-type-flow)*1.25)] text-[.93em];
+    }
+
+    & a {
+        @apply decoration-(--border-strong) underline-offset-[3px];
+    }
+    & :where(p, li, td, dd) a:not(.playground-link) {
+        @apply text-(--text-primary) underline decoration-[color-mix(in_oklab,var(--text-primary)_30%,transparent)];
+    }
+    & :where(p, li, td, dd) a:not(.playground-link):hover {
+        @apply decoration-(--color-accent);
+    }
+    & a:focus-visible {
+        @apply rounded-[2px] outline-2 outline-(--color-accent) outline-offset-2;
+    }
+
+    & :not(pre) > code {
+        @apply py-px px-1 border border-(--border-primary) rounded-[3px] bg-(--bg-inert) font-mono text-[.84em];
+    }
+    /* Flatter, more legible keycaps than Tailwind Typography's default (tiny
+     .875em text, low contrast, heavy raised-key shadow). */
+    & kbd {
+        @apply py-px px-1.5 border border-(--border-primary) rounded-[4px] bg-(--bg-emph-tertiary) shadow-[0_1px_0_var(--border-strong)] text-(--text-secondary) font-mono text-[12px] leading-[18px] font-medium align-baseline;
+    }
+    /* Multi-line code in the reading column tracks the body bump: 12px -> 13px. */
+    & :is(pre, pre code) {
+        @apply text-[13px] leading-[21px];
+    }
+
+    &
+        :is(
+            figure[data-rehype-pretty-code-figure],
+            figure.shiki,
+            .fd-codeblock
+        ) {
+        @apply border-(--border-primary) rounded-[4px]! bg-(--bg-inert) shadow-none!;
+    }
+    & figure:has(+ .placeholder-config) {
+        @apply rounded-b-none!;
+    }
+
+    /* Code-block copy button reveals on hover, or on keyboard focus only
+     (:focus-visible) — a mouse click copies without the button sticking on. */
+    & figure > div:has(> button[aria-label="Copy Text"]) {
+        @apply opacity-0 transition-opacity duration-[.12s] ease-[ease];
+    }
+    & figure:hover > div:has(> button[aria-label="Copy Text"]),
+    &
+        figure
+        > div:has(> button[aria-label="Copy Text"]:focus-visible) {
+        @apply opacity-100;
+    }
+
+    /* Markdown tables (fumadocs wraps them in div.relative.overflow-auto). */
+    & div.relative.overflow-auto:has(> table) {
+        @apply my-[18px]! overflow-auto border border-(--border-primary) rounded-[4px];
+
+        & > table {
+            @apply w-full m-0! border-0! border-collapse table-auto text-[12px]! rounded-none!;
+        }
+        & th {
+            @apply py-2 px-2.5 border-0 border-r border-r-(--border-primary) border-b border-b-(--border-primary) text-(--text-secondary) bg-(--bg-inert) font-mono text-[13px] leading-[18px] font-[550] text-left;
+        }
+        & td {
+            @apply py-[9px] px-2.5 border-0 border-r border-r-(--border-tertiary) border-b border-b-(--border-tertiary) text-(--docs-copy) font-sans text-[14px] leading-[22px] font-normal align-top;
+        }
+        & :is(th, td):last-child {
+            @apply border-r-0;
+        }
+        & tbody tr:last-child td {
+            @apply border-b-0;
+        }
+
+        /* Inline code in cells already reads as an identifier via the mono face;
+       drop the chip so dense tables stay calm — just monospace. */
+        & :is(th, td) code {
+            @apply p-0 border-0 rounded-none bg-transparent text-[length:inherit];
+        }
+    }
+}
diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx
index 1d583e5d5..8cd6ecb6b 100644
--- a/app/[...slug]/page.tsx
+++ b/app/[...slug]/page.tsx
@@ -12,9 +12,38 @@ import { getAdjacentNavigation, getBreadcrumbs, getNavigation, getSection } from
 import { ogImage } from '@/lib/og';
 import { pageGraph, structuredDataProps } from '@/lib/structured-data';
 import { source } from '@/lib/source';
+import './doc-prose.css';
+import { cn } from '@/lib/utils';
 
 type PageProps = { params: Promise<{ slug?: string[] }> };
 
+// The reading column is shifted left of centre so the fixed table of contents on the
+// right does not push the measure off-axis; the shift is dropped once the sidebar
+// collapses into a drawer at 1240px.
+const DOC_ARTICLE_CLASS = 'doc-article w-[min(768px,100%)] my-0 mx-auto translate-x-[-130px] max-xl:translate-x-0';
+
+// The trail renders in the brand orange, so hover signals with an underline
+// instead of a colour change. `[&:hover]` rather than `hover:` — Tailwind v4
+// wraps `hover:` in `@media (hover: hover)`, which would drop the state on touch.
+// decoration-current: the base `a:hover` element default recolours underlines
+// to --text-primary, which reads as a stray white line under the orange trail.
+const BREADCRUMB_LINK_CLASS = '[&:hover]:underline [&:hover]:underline-offset-[3px] [&:hover]:decoration-current';
+
+const DOC_TITLE_CLASS = 'm-0 text-(--text-primary) font-sans text-[34px] leading-[42px] font-semibold tracking-[-.03em] text-balance';
+const QUERY_SYNTAX_TITLE_CLASS = 'query-syntax-title m-0 text-(--text-primary) font-(family-name:--font-query) text-[32px] leading-10 font-semibold tracking-normal text-balance [font-variant-ligatures:none]';
+
+// Lede tracks the body text size (--docs-type-size 16px / 1.75); it stays
+// distinct through colour and the wider margin, not scale.
+const DOC_LEDE_CLASS = 'max-w-[640px] mt-1.5 mb-[34px] mx-0 text-(--text-tertiary) font-sans text-[16px] leading-7 font-normal tracking-[-.006em] text-pretty';
+
+// Article typography lives in ./doc-prose.css — one nested, unlayered
+// stylesheet scoped under .doc-prose (see that file for why it is unlayered).
+const DOC_PROSE_CLASS = 'doc-prose';
+
+// Function and operator links render in the query face on syntax pages.
+const QUERY_SYNTAX_PROSE_CLASS =
+  "[&_a:is([href*='/scalar-functions/'],[href*='/aggregation-functions/'],[href*='/operators/'])]:font-(family-name:--font-query) [&_a:is([href*='/scalar-functions/'],[href*='/aggregation-functions/'],[href*='/operators/'])]:[font-variant-ligatures:none] [&_a:is([href*='/scalar-functions/'],[href*='/aggregation-functions/'],[href*='/operators/'])]:tracking-normal";
+
 export default async function DocumentationPage({ params }: PageProps) {
   const { slug } = await params;
   const page = source.getPage(slug);
@@ -58,25 +87,25 @@ export default async function DocumentationPage({ params }: PageProps) {
           }),
         )}
       />
-      <div className="article-layout">
-        <article className={querySyntaxTitle ? 'doc-article query-syntax-article' : 'doc-article'}>
-          <div className="doc-topline">
-            <nav className="doc-breadcrumbs" aria-label="Breadcrumb">
+      <div className="article-layout relative min-h-[calc(100vh_-_56px)] pt-14 pb-24 px-[clamp(32px,6vw,96px)] max-md:px-9 max-sm:pt-9 max-sm:pb-18 max-sm:px-5">
+        <article className={querySyntaxTitle ? `${DOC_ARTICLE_CLASS} query-syntax-article` : DOC_ARTICLE_CLASS}>
+          <div className="doc-topline mt-0 mx-0 mb-5 flex items-start justify-between gap-x-4 gap-y-2">
+            <nav className="doc-breadcrumbs m-0 flex flex-wrap gap-x-2 gap-y-1 text-(--color-accent-text) font-mono text-[12px] leading-4 font-[450]" aria-label="Breadcrumb">
               {visibleBreadcrumbs.map((item, index) => {
                 const last = index === visibleBreadcrumbs.length - 1;
                 return (
-                  <span className="doc-breadcrumb" key={`${item.title}-${index}`}>
-                    {item.href ? <Link href={item.href} prefetch={false}>{item.title}</Link> : <span>{item.title}</span>}
-                    {!last && <b aria-hidden="true">/</b>}
+                  <span className="doc-breadcrumb inline-flex gap-2 min-w-0" key={`${item.title}-${index}`}>
+                    {item.href ? <Link href={item.href} prefetch={false} className={BREADCRUMB_LINK_CLASS}>{item.title}</Link> : <span>{item.title}</span>}
+                    {!last && <b aria-hidden="true" className="text-(--border-strong) font-normal">/</b>}
                   </span>
                 );
               })}
             </nav>
             {!page.data.openapi && <CopyPageMenu markdownPath={`${href}.md`} />}
           </div>
-          <DocsTitle className={querySyntaxTitle ? 'query-syntax-title' : undefined}>{page.data.title}</DocsTitle>
-          <DocsDescription>{page.data.description}</DocsDescription>
-          <DocsBody>
+          <DocsTitle className={querySyntaxTitle ? QUERY_SYNTAX_TITLE_CLASS : DOC_TITLE_CLASS}>{page.data.title}</DocsTitle>
+          <DocsDescription className={DOC_LEDE_CLASS}>{page.data.description}</DocsDescription>
+          <DocsBody className={cn(DOC_PROSE_CLASS, querySyntaxTitle && QUERY_SYNTAX_PROSE_CLASS)}>
             {page.data.openapi ? <ApiOperation value={page.data.openapi}><Body components={mdxComponents} /></ApiOperation> : <Body components={mdxComponents} />}
           </DocsBody>
           <ArticleFooter
diff --git a/app/fonts/Berkeley_Mono_Variable.woff2 b/app/fonts/Berkeley_Mono_Variable.woff2
new file mode 100644
index 000000000..51d90d935
Binary files /dev/null and b/app/fonts/Berkeley_Mono_Variable.woff2 differ
diff --git a/app/fonts/Geist-Variable.ttf b/app/fonts/Geist-Variable.ttf
deleted file mode 100644
index b73ceb243..000000000
Binary files a/app/fonts/Geist-Variable.ttf and /dev/null differ
diff --git a/app/fonts/GeistMono-Variable.ttf b/app/fonts/GeistMono-Variable.ttf
deleted file mode 100644
index c33bf1788..000000000
Binary files a/app/fonts/GeistMono-Variable.ttf and /dev/null differ
diff --git a/app/globals.css b/app/globals.css
index 7f760c7b4..f4bd80abc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,635 +12,29 @@
    Map shadcn's `dark:` variant onto that instead of its stock `.dark` class. */
 @custom-variant dark (&:where(:root:not([data-theme='light']), :root:not([data-theme='light']) *));
 
-* { box-sizing: border-box; }
-html { scroll-behavior: smooth; background: var(--bg-canvas); }
-body { margin: 0; color: var(--text-primary); background: var(--bg-canvas); font-family: var(--font-sans); }
-button, input, textarea { font: inherit; }
-a { color: inherit; text-decoration: none; }
-kbd { border: 1px solid var(--border-primary); border-radius: 3px; padding: 1px 5px; background: var(--bg-emph-tertiary); color: var(--text-quaternary); font: 450 10px/14px var(--font-mono); }
-
-.docs-app { min-height: 100vh; }
-.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--border-primary); background: color-mix(in srgb, var(--bg-canvas) 94%, transparent); backdrop-filter: blur(12px); }
-.brand { height: 28px; display: flex; align-items: center; gap: 9px; flex: none; }
-.brand-mark { width: 25px; height: 22px; fill: currentColor; }
-.brand-badge { height: 18px; padding-left: 9px; display: inline-flex; align-items: center; border: 0; border-left: 2px solid var(--color-accent); border-radius: 0; color: var(--text-primary); background: transparent; font: 600 14px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
-.header-tabs { display: flex; gap: 4px; }
-.header-tabs a { position: relative; padding: 6px 10px; border-radius: 4px; color: var(--text-tertiary); font: 500 14px/16px var(--font-sans); letter-spacing: -.006em; }
-.header-tabs a:hover { background: var(--bg-emph-tertiary); color: var(--text-secondary); }
-.header-tabs a.active { color: var(--text-primary); font-weight: 600; }
-.header-tabs a.active::after { position: absolute; left: 10px; right: 10px; bottom: -14px; height: 2px; border-radius: 1px 1px 0 0; background: var(--color-accent); content: ''; }
-.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
-.header-search { width: 220px; height: 28px; padding: 0 8px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-tertiary); background: var(--bg-inert); cursor: pointer; }
-.header-search span { flex: 1; text-align: left; font: 450 14px/16px var(--font-sans); }
-.header-button, .header-icon { height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-secondary); background: transparent; cursor: pointer; }
-.header-button { padding: 0 10px; background: var(--bg-emph-secondary); font: 500 14px/16px var(--font-sans); }
-.header-icon { width: 28px; }
-.header-button:hover, .header-icon:hover { background: var(--bg-emph-primary); }
-.theme-menu { position: relative; }
-.theme-menu > summary { list-style: none; cursor: pointer; }
-.theme-menu > summary::-webkit-details-marker { display: none; }
-.theme-menu[open] > summary { background: var(--bg-emph-primary); }
-.theme-menu:not([open]) > .theme-menu-popover { display: none; }
-.theme-menu-popover { position: absolute; top: 34px; right: 0; z-index: 70; width: 132px; padding: 4px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-overlay); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
-.theme-menu-popover button { width: 100%; height: 32px; padding: 0 7px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 3px; color: var(--text-tertiary); background: transparent; font: 500 13px/16px var(--font-sans); cursor: pointer; }
-.theme-menu-popover button:hover, .theme-menu-popover button[aria-checked='true'] { color: var(--text-primary); background: var(--bg-emph-tertiary); }
-.theme-menu-popover button span { flex: 1; text-align: left; }
-.console-button { height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 4px; color: var(--text-on-inverse-primary); background: var(--bg-emph-primary-inverse); font: 600 14px/16px var(--font-sans); }
-.mobile-menu-trigger, .drawer-sections, .sidebar-backdrop { display: none; }
-
-.docs-search-dialog { width: min(720px, calc(100vw - 32px)); height: min(650px, calc(100dvh - 64px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-primary); background: var(--bg-overlay); box-shadow: 0 16px 48px rgba(0,0,0,.36); }
-.docs-search-dialog::backdrop { background: rgba(0,0,0,.58); backdrop-filter: blur(2px); }
-.docs-search-surface { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; }
-.docs-search-dialog-header { flex: none; height: 48px; padding: 0 10px 0 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-primary); background: var(--bg-surface); }
-.docs-search-mode-tabs { height: 100%; display: flex; align-items: stretch; gap: 4px; }
-.docs-search-mode-tabs button { position: relative; padding: 0 9px; display: inline-flex; align-items: center; gap: 7px; border: 0; color: var(--text-tertiary); background: transparent; font: 500 13px/16px var(--font-sans); cursor: pointer; transition: color var(--duration-1) var(--ease-out), background var(--duration-1) var(--ease-out); }
-.docs-search-mode-tabs button:hover { color: var(--text-secondary); }
-.docs-search-mode-tabs button:active { background: var(--bg-emph-tertiary); }
-.docs-search-mode-tabs button[aria-selected='true'] { color: var(--text-primary); font-weight: 600; }
-.docs-search-mode-tabs button[aria-selected='true']::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--color-accent); content: ''; }
-.docs-search-mode-tabs button:focus-visible, .docs-search-clear:focus-visible, .docs-search-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
-.docs-search-clear { margin-left: auto; padding: 4px 7px; border: 0; border-radius: 3px; color: var(--text-tertiary); background: transparent; font: 500 12px/16px var(--font-sans); cursor: pointer; }
-.docs-search-clear:hover { color: var(--text-primary); background: var(--bg-emph-tertiary); }
-.docs-search-close { width: 28px; height: 28px; margin-left: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 3px; color: var(--text-tertiary); background: transparent; cursor: pointer; transition: color var(--duration-1) var(--ease-out), background var(--duration-1) var(--ease-out); }
-.docs-search-clear + .docs-search-close { margin-left: 0; }
-.docs-search-close:hover { color: var(--text-primary); background: var(--bg-emph-tertiary); }
-.docs-search-close:active { background: var(--bg-emph-secondary); }
-
-.docs-search-panel, .docs-assistant-panel { min-height: 0; flex: 1; }
-.docs-search-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
-.docs-search-input-row { height: 52px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-secondary); color: var(--icon-secondary); background: var(--bg-canvas); }
-.docs-search-input-row input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: 450 15px/20px var(--font-sans); letter-spacing: -.01em; }
-.docs-search-input-row input::placeholder { color: var(--text-tertiary); opacity: 1; }
-.docs-search-results { min-height: 0; overflow-y: auto; padding: 8px; background: var(--bg-canvas); overscroll-behavior: contain; }
-.docs-search-result-list { min-width: 0; }
-.docs-search-ask-row { width: 100%; min-height: 42px; margin-bottom: 6px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-secondary); background: var(--bg-inert); font: 500 13px/18px var(--font-sans); text-align: left; cursor: pointer; transition: color var(--duration-1) var(--ease-out), border-color var(--duration-1) var(--ease-out), background var(--duration-1) var(--ease-out); }
-.docs-search-ask-row span { min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.docs-search-ask-row:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-raised); }
-.docs-search-ask-row:focus-visible { border-color: var(--color-accent); color: var(--text-primary); background: var(--bg-raised); outline: 1px solid var(--color-accent); outline-offset: -2px; }
-.docs-search-ask-row:active { background: var(--bg-emph-secondary); }
-.docs-search-empty { height: 100%; min-height: 280px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-tertiary); text-align: center; }
-.docs-search-empty strong { color: var(--text-primary); font: 600 15px/20px var(--font-sans); }
-.docs-search-empty p { max-width: 390px; margin: 7px 0 18px; font: 400 13px/20px var(--font-sans); }
-.docs-search-empty button { padding: 6px 8px; border: 0; border-radius: 3px; color: var(--text-secondary); background: var(--bg-emph-tertiary); font: 500 12px/16px var(--font-sans); cursor: pointer; transition: color var(--duration-1) var(--ease-out), background var(--duration-1) var(--ease-out); }
-.docs-search-empty button:hover { color: var(--text-primary); background: var(--bg-emph-secondary); }
-.docs-search-empty button:focus-visible, .docs-search-footer button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
-.docs-search-empty button:active { background: var(--bg-emph-primary); }
-.docs-search-status { padding: 38px 12px; color: var(--text-tertiary); font: 450 12px/18px var(--font-mono); text-align: center; }
-.docs-search-result { width: 100%; min-height: 58px; padding: 8px 11px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 0; border-radius: 4px; color: var(--text-secondary); background: transparent; text-align: left; cursor: pointer; transition: color var(--duration-1) var(--ease-out), background var(--duration-1) var(--ease-out); }
-.docs-search-result:hover, .docs-search-result[aria-selected='true'] { color: var(--text-primary); background: var(--bg-emph-tertiary); outline: 0; }
-.docs-search-result:focus-visible { box-shadow: inset 0 0 0 1px var(--color-accent); }
-.docs-search-result-path { overflow: hidden; color: var(--text-tertiary); font: 450 10px/14px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
-.docs-search-result-content { display: -webkit-box; overflow: hidden; font: 450 13px/18px var(--font-sans); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
-.docs-search-result-content mark { color: var(--color-accent-text); background: transparent; font-weight: 600; }
-.docs-search-footer { min-height: 38px; padding: 7px 12px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border-primary); color: var(--text-tertiary); background: var(--bg-surface); font: 450 10px/14px var(--font-mono); }
-.docs-search-footer span { display: inline-flex; align-items: center; gap: 4px; }
-.docs-search-footer button { margin-left: auto; padding: 0; border: 0; color: var(--text-tertiary); background: transparent; font: 500 11px/16px var(--font-sans); cursor: pointer; transition: color var(--duration-1) var(--ease-out); }
-.docs-search-footer button:hover { color: var(--text-primary); }
-.docs-search-footer button:active { color: var(--color-accent); }
-
-.docs-assistant-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--bg-canvas); }
-.docs-assistant-scroller { position: relative; min-height: 0; }
-.docs-assistant-messages { min-height: 0; height: 100%; overflow-y: auto; padding: 22px 24px 28px; overscroll-behavior: contain; }
-.docs-assistant-thread { min-height: 100%; display: flex; flex-direction: column; gap: 22px; }
-.docs-assistant-empty-item { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
-.docs-assistant-scroll-button { position: absolute; right: 16px; bottom: 12px; z-index: 2; }
-.docs-assistant-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
-.docs-assistant-empty strong { color: var(--text-primary); font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; }
-.docs-assistant-empty > p { max-width: 420px; margin: 8px 0 0; color: var(--text-tertiary); font: 400 13px/20px var(--font-sans); }
-.docs-assistant-empty .docs-assistant-note { max-width: 460px; margin-top: 20px; color: var(--text-quaternary); font: 450 11px/17px var(--font-mono); }
-/* AI Elements' <Message>/<MessageContent> own the bubble layout; these rules
-   only carry the Axiom role label and width constraints on top of it. */
-.docs-assistant-message { gap: 7px; }
-.docs-assistant-message > span { color: var(--text-tertiary); font: 600 10px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
-.docs-assistant-message.user { max-width: 82%; margin-left: auto; align-items: flex-end; }
-.docs-assistant-message.user .docs-assistant-bubble { border: 1px solid var(--border-primary); border-radius: 4px; padding: 10px 12px; color: var(--text-secondary); background: var(--bg-surface); font: 450 13px/20px var(--font-sans); white-space: pre-wrap; }
-.docs-assistant-message.assistant { max-width: 670px; }
-.docs-assistant-tool { width: fit-content; padding: 4px 7px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-secondary); border-radius: 3px; color: var(--text-tertiary); background: var(--bg-inert); font: 450 10px/14px var(--font-mono); }
-.docs-assistant-tool.error { color: var(--text-destructive); }
-.docs-ai-markdown { color: var(--text-secondary); font: 400 14px/22px var(--font-sans); }
-.docs-ai-markdown > :first-child { margin-top: 0 !important; }
-.docs-ai-markdown > :last-child { margin-bottom: 0 !important; }
-/* Streamdown ships a full-page heading scale; inside a 700px panel it reads as
-   oversized, so re-anchor headings to the Axiom docs scale. Unlayered, so these
-   win over Tailwind's utilities. */
-.docs-ai-markdown h1, .docs-ai-markdown h2, .docs-ai-markdown h3,
-.docs-ai-markdown h4, .docs-ai-markdown h5, .docs-ai-markdown h6 {
-  color: var(--text-primary); font-family: var(--font-sans); letter-spacing: -.01em;
+/* Element defaults live in @layer base so component utilities (@layer
+   utilities) can override them; unlayered they would always win. Only elements
+   with no owning component remain: `a` and `kbd` are authored directly in MDX
+   content. `html`/`body` are styled in app/layout.tsx; box-sizing and form
+   `font: inherit` come from Tailwind's preflight. */
+@layer base {
+  a { @apply text-inherit no-underline; }
+  kbd { @apply py-px px-[5px] border border-(--border-primary) rounded-[3px] bg-(--bg-emph-tertiary) text-(--text-quaternary) font-mono text-[10px] leading-[14px] font-[450]; }
 }
-.docs-ai-markdown h1 { margin: 22px 0 8px; font-size: 16px; line-height: 24px; font-weight: 500; }
-.docs-ai-markdown h2 { margin: 18px 0 7px; font-size: 14px; line-height: 21px; font-weight: 500; }
-.docs-ai-markdown h3 { margin: 16px 0 6px; font-size: 13px; line-height: 20px; font-weight: 500; }
-.docs-ai-markdown h4, .docs-ai-markdown h5, .docs-ai-markdown h6 { margin: 14px 0 5px; font-size: 12px; line-height: 18px; font-weight: 500; }
-.docs-ai-markdown h1:first-child, .docs-ai-markdown h2:first-child, .docs-ai-markdown h3:first-child { margin-top: 0; }
-
-.docs-ai-markdown p, .docs-ai-markdown ul, .docs-ai-markdown ol { margin: 0 0 11px; }
-.docs-ai-markdown ul, .docs-ai-markdown ol { padding-left: 18px; }
-.docs-ai-markdown li { margin: 3px 0; padding-left: 2px; }
-.docs-ai-markdown li::marker { color: var(--text-quaternary); }
-.docs-ai-markdown li > p { margin: 0 0 4px; }
-.docs-ai-markdown li:last-child { margin-bottom: 0; }
-.docs-ai-markdown ul ul, .docs-ai-markdown ol ol, .docs-ai-markdown ul ol, .docs-ai-markdown ol ul { margin: 3px 0 0; }
-.docs-ai-markdown hr { margin: 16px 0; border: 0; border-top: 1px solid var(--border-secondary); }
-.docs-ai-markdown blockquote { margin: 0 0 11px; padding-left: 11px; border-left: 2px solid var(--border-strong); color: var(--text-tertiary); }
-.docs-ai-markdown table { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 12.5px; }
-.docs-ai-markdown th, .docs-ai-markdown td { padding: 5px 8px; border: 1px solid var(--border-secondary); text-align: left; }
-.docs-ai-markdown th { color: var(--text-primary); background: var(--bg-inert); font-weight: 600; }
-.docs-ai-markdown strong { color: var(--text-primary); font-weight: 600; }
-.docs-ai-markdown a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
-.docs-ai-markdown a:hover { text-decoration-color: var(--color-accent); }
-.docs-ai-markdown code:not(pre code) { padding: 1px 4px; border: 1px solid var(--border-primary); border-radius: 3px; color: var(--text-primary); background: var(--bg-inert); font: 450 12px/18px var(--font-mono); }
-/* Streamdown nests a bordered, rounded body inside an already-bordered, rounded
-   shell, which reads as a double frame. Collapse it to a single Axiom surface.
-   The header row and its buttons are left exactly as they are. */
-/* The actions row overlays the header via -mt-10, which assumes Streamdown's
-   h-8 header plus its gap-2. Keep that 8px gap intact and pad the header and
-   body identically so the language label lines up with the code gutter. */
-.docs-ai-markdown [data-streamdown='code-block'] { margin: 12px 0; padding: 0; gap: 8px; overflow: hidden; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-surface); }
-.docs-ai-markdown [data-streamdown='code-block-header'] { padding: 0 12px; color: var(--text-tertiary); font: 450 11px/16px var(--font-mono); }
-.docs-ai-markdown [data-streamdown='code-block-header'] > span { margin-left: 0; }
-.docs-ai-markdown [data-streamdown='code-block-header'] + div { padding-right: 8px; }
-.docs-ai-markdown [data-streamdown='code-block-actions'] { border-color: var(--border-secondary); background: var(--bg-raised); }
-.docs-ai-markdown [data-streamdown='code-block-body'] { margin: 0; padding: 0 12px 12px; border: 0; border-radius: 0; background: transparent; }
-.docs-ai-markdown pre { margin: 0 !important; padding: 0; background: transparent !important; }
-.docs-ai-markdown pre, .docs-ai-markdown pre code { font: 450 12px/19px var(--font-mono); }
-/* <Sources> is a Collapsible (trigger + content), so the chip row lives on the
-   content element rather than the root. */
-.docs-assistant-sources { margin-top: 4px; margin-bottom: 0; padding-top: 11px; display: block; border-top: 1px solid var(--border-secondary); }
-.docs-assistant-sources > button { margin-bottom: 8px; padding: 0; border: 0; color: var(--text-tertiary); background: transparent; font: 600 10px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
-.docs-assistant-sources > button:hover { color: var(--text-primary); }
-.docs-assistant-sources > button p { font: inherit; letter-spacing: inherit; }
-.docs-assistant-sources-list { width: 100%; max-width: 100%; margin-top: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; }
-.docs-assistant-sources a { max-width: 100%; padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-primary); border-radius: 3px; color: var(--text-tertiary); background: var(--bg-inert); font: 500 10px/15px var(--font-sans); }
-.docs-assistant-sources a svg { flex: none; width: 9px; height: 9px; opacity: .75; }
-.docs-assistant-sources a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.docs-assistant-sources a:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-raised); }
-.docs-assistant-working { padding: 7px 0; display: flex; align-items: center; gap: 8px; color: var(--text-tertiary); font: 450 11px/16px var(--font-mono); }
-.docs-assistant-working > span:first-child { width: 6px; height: 6px; flex: none; border: 1px solid var(--color-accent); animation: docs-assistant-pulse 1s ease-in-out infinite; }
-@keyframes docs-assistant-pulse { 50% { background: var(--color-accent); opacity: .45; } }
-.docs-assistant-error { padding: 10px 11px; display: flex; flex-direction: column; gap: 4px; border: 1px solid color-mix(in srgb, var(--color-destructive) 50%, transparent); border-radius: 4px; color: var(--text-tertiary); background: color-mix(in srgb, var(--color-destructive) 7%, transparent); font: 450 12px/18px var(--font-sans); }
-.docs-assistant-error strong { color: var(--text-primary); font-weight: 600; }
-.docs-assistant-error div { margin-top: 5px; display: flex; gap: 6px; }
-.docs-assistant-error button { padding: 4px 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-primary); border-radius: 3px; color: var(--text-secondary); background: var(--bg-surface); font: 500 11px/16px var(--font-sans); cursor: pointer; }
-/* PromptInput renders the <form>; the surrounding chrome lives on the footer so
-   the disclaimer keeps sitting inside the same bordered surface as before.
-   These rules are unlayered, so they win over Tailwind's @layer utilities. */
-.docs-assistant-footer { min-height: 108px; padding: 12px 16px 8px; border-top: 1px solid var(--border-strong); background: var(--bg-surface); }
-.docs-assistant-composer { box-shadow: none; }
-.docs-assistant-input-wrap { min-height: 60px; height: auto; padding: 7px 7px 7px 10px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-canvas); box-shadow: none; transition: border-color var(--duration-1) var(--ease-out), box-shadow var(--duration-1) var(--ease-out); }
-.docs-assistant-input-wrap:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent); }
-.docs-assistant-input-wrap textarea { width: 100%; max-height: 128px; min-height: 44px; padding: 2px 0; resize: none; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: 450 14px/21px var(--font-sans); }
-.docs-assistant-input-wrap textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
-.docs-assistant-input-wrap [data-slot='input-group-addon'] { width: auto; padding: 0; border: 0; background: transparent; }
-.docs-assistant-input-wrap button[type='submit'], .docs-assistant-input-wrap [data-slot='input-group-addon'] button { flex: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-on-inverse-primary); background: var(--bg-emph-primary-inverse); cursor: pointer; transition: opacity var(--duration-1) var(--ease-out), background var(--duration-1) var(--ease-out); }
-.docs-assistant-input-wrap button:hover:not(:disabled) { opacity: .88; }
-.docs-assistant-input-wrap button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
-.docs-assistant-input-wrap button:active:not(:disabled) { opacity: .72; }
-.docs-assistant-input-wrap button:disabled { color: var(--text-quaternary); background: var(--bg-emph-tertiary); cursor: default; }
-.docs-assistant-disclaimer { display: block; margin-top: 7px; color: var(--text-tertiary); font: 450 10px/14px var(--font-mono); }
 
-@media (prefers-reduced-motion: reduce) {
-  .docs-assistant-working > span:first-child { animation: none; background: var(--color-accent); }
-}
+/* Referenced by `animate-[docs-assistant-pulse_…]` in docs-assistant.tsx and
+   the docs-search.tsx loading fallback. */
+@keyframes docs-assistant-pulse { 50% { background: var(--color-accent); opacity: .45; } }
 
-.docs-grid { min-height: 100vh; padding-top: 56px; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
-.sidebar { position: fixed; z-index: 30; left: 0; top: 56px; bottom: 0; width: 260px; overflow-y: auto; padding: 56px 16px 48px 24px; border-right: 1px solid var(--border-primary); background: var(--bg-sidebar); scrollbar-width: thin; }
-.sidebar-group { margin: 0 0 24px; }
-.sidebar-group h2 { margin: 0 0 8px; color: var(--text-secondary); font: 600 11px/14px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
-.sidebar-link, .nav-nested summary { min-height: 30px; margin: 0 -10px; padding: 6px 10px; display: flex; align-items: center; gap: 7px; border-radius: 4px; color: var(--text-tertiary); font: 450 14px/18px var(--font-sans); letter-spacing: -.006em; cursor: pointer; }
-.sidebar-link:hover, .nav-nested summary:hover { background: var(--bg-emph-tertiary); color: var(--text-secondary); }
-.sidebar-link.active { color: var(--text-primary); background: var(--bg-emph-primary); font-weight: 600; }
-.sidebar-link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sidebar-link.syntax-reference-link .sidebar-link-label { font-family: var(--font-query); letter-spacing: 0; }
-.sidebar-link .method { margin-left: auto; }
-.nav-nested { margin: 1px 0; }
-.nav-nested summary { list-style: none; }
-.nav-nested summary::-webkit-details-marker { display: none; }
-.nav-nested summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.nav-nested summary svg { margin-left: auto; transition: transform .15s ease; flex: none; }
-.nav-nested[open] > summary svg { transform: rotate(90deg); }
-.method { flex: none; min-width: 34px; padding: 1px 4px; border-radius: 3px; font: 600 10px/14px var(--font-mono); text-align: center; letter-spacing: .02em; }
-.method-get { color: #34d399; background: rgba(16,185,129,.11); }
-.method-post { color: #60a5fa; background: rgba(59,130,246,.11); }
-.method-put, .method-patch { color: #fbbf24; background: rgba(245,158,11,.11); }
-.method-delete { color: #f87171; background: rgba(239,68,68,.11); }
-/* Light theme: the dark-tuned method colors sit at 1.9–2.5:1 on the light tint.
-   Repoint to darker text values that clear AA (>=4.5:1) on the same tints. */
-:root[data-theme='light'] .method-get { color: #047857; background: rgba(16,185,129,.12); }
-:root[data-theme='light'] .method-post { color: #1d4ed8; background: rgba(59,130,246,.12); }
-:root[data-theme='light'] .method-put, :root[data-theme='light'] .method-patch { color: #92400e; background: rgba(245,158,11,.14); }
-:root[data-theme='light'] .method-delete { color: #b91c1c; background: rgba(239,68,68,.12); }
-.docs-main { grid-column: 2; min-width: 0; }
-.landing-main { padding-right: 260px; }
-
-.landing-content { padding: 40px 56px 0; }
-.landing-hero, .quick-grid, .landing-section { width: min(760px, 100%); margin-left: auto; margin-right: auto; }
-.landing-hero { padding: 24px 0 48px; }
-.landing-hero h1 { margin: 0; max-width: 700px; color: var(--text-primary); font: 600 44px/48px var(--font-sans); letter-spacing: -.03em; text-wrap: pretty; }
-.landing-hero p { max-width: 560px; margin: 14px 0 0; color: var(--text-tertiary); font: 400 16px/26px var(--font-sans); letter-spacing: -.01em; }
-.hero-search { width: 100%; height: 40px; margin-top: 28px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-tertiary); background: var(--bg-surface); cursor: pointer; }
-.hero-search:hover { border-color: var(--border-strong); background: var(--bg-raised); }
-.hero-search span { flex: 1; text-align: left; font: 400 15px/20px var(--font-sans); }
-.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
-.quick-card { min-height: 158px; padding: 20px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-surface); }
-.quick-card:hover { background: var(--bg-raised); border-color: var(--border-strong); }
-.quick-card strong { font: 600 15px/20px var(--font-sans); letter-spacing: -.01em; }
-.quick-card span { color: var(--text-tertiary); font: 400 13px/20px var(--font-sans); }
-.quick-card small { margin-top: auto; color: var(--text-tertiary); font: 450 12px/16px var(--font-mono); }
-.landing-section { margin-top: 56px; }
-.section-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
-.section-heading h2 { margin: 0; color: var(--text-tertiary); font: 600 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
-.section-heading span { flex: 1; border-top: 1px solid var(--border-primary); }
-.section-heading a { color: var(--text-tertiary); font: 450 12px/16px var(--font-mono); }
-.integration-list { display: flex; flex-wrap: wrap; gap: 8px; }
-.integration-list a { height: 32px; padding: 0 12px; display: flex; align-items: center; border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-secondary); font: 450 12px/16px var(--font-mono); }
-.integration-list a:hover { background: var(--bg-emph-tertiary); color: var(--text-primary); }
-.platform-index .section-heading { margin-bottom: 8px; }
-.platform-index > a { padding: 16px 4px; display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--border-secondary); }
-.platform-index > a:hover { background: var(--bg-emph-tertiary); }
-.platform-index strong { width: 180px; flex: none; font: 600 14px/20px var(--font-sans); }
-.platform-index span { flex: 1; color: var(--text-tertiary); font: 400 13px/20px var(--font-sans); }
-.platform-index b { color: var(--text-quaternary); font-weight: 400; }
-.landing-footer { margin: 80px -56px 0; padding: 20px 32px; display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--border-primary); color: var(--text-tertiary); font: 450 12px/16px var(--font-mono); }
-.landing-footer > span { color: var(--text-quaternary); text-transform: uppercase; letter-spacing: .06em; }
-.landing-footer button { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
-.landing-footer small { margin-left: auto; color: var(--text-quaternary); font: inherit; }
-
-.article-layout { position: relative; min-height: calc(100vh - 56px); padding: 56px clamp(32px, 6vw, 96px) 96px; }
-.doc-article { width: min(768px, 100%); margin: 0 auto; transform: translateX(-130px); }
-.doc-topline { margin: 0 0 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
-.doc-topline .doc-breadcrumbs { margin: 0; }
-.doc-breadcrumbs { margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--text-quaternary); font: 450 12px/16px var(--font-mono); }
-.doc-breadcrumb { display: inline-flex; gap: 8px; min-width: 0; }
-.doc-breadcrumbs a:hover { color: var(--text-secondary); }
-.doc-breadcrumbs b { color: var(--border-strong); font-weight: 400; }
-.doc-article > h1, .doc-article [data-docs-title] { margin: 0; color: var(--text-primary); font: 600 34px/42px var(--font-sans); letter-spacing: -.03em; text-wrap: balance; }
-.doc-article .query-syntax-title { font: 600 32px/40px var(--font-query) !important; font-variant-ligatures: none; letter-spacing: 0; }
-.query-syntax-article .prose a:is([href*='/scalar-functions/'], [href*='/aggregation-functions/'], [href*='/operators/']) { font-family: var(--font-query); font-variant-ligatures: none; letter-spacing: 0; }
-.doc-article > p:first-of-type { max-width: 640px; margin: 6px 0 34px; color: var(--text-tertiary); font: 400 18px/29px var(--font-sans); letter-spacing: -.012em; text-wrap: pretty; }
-.doc-article .prose {
-  --docs-type-size: 16px;
-  --docs-type-leading: 1.75;
-  --docs-type-flow: 1.4em;
-  --docs-copy: var(--gray-300);
-  --tw-prose-body: var(--docs-copy);
-  --tw-prose-headings: var(--text-primary);
-  --tw-prose-links: var(--text-primary);
-  --tw-prose-bold: var(--text-primary);
-  --tw-prose-code: var(--text-primary);
-  --tw-prose-bullets: var(--text-quaternary);
-  max-width: none;
-  color: var(--docs-copy);
-  font-size: var(--docs-type-size);
-  line-height: var(--docs-type-leading);
-  letter-spacing: -.006em;
-}
-:root[data-theme='light'] .doc-article .prose { --docs-copy: var(--gray-600); }
-.doc-article .prose :where(p, li, dd, td) { color: var(--docs-copy); }
-.doc-article .prose :where(strong, b) { color: var(--text-primary); }
-.doc-article .prose :where(p, ul, ol, blockquote, table, figure, hr) { margin-block: 0; }
-/* Article reading column measure. */
-.doc-article .prose > :where(p, ul, ol, blockquote, dl) { max-width: 768px; }
-.doc-article .prose > :where(p, ul, ol, blockquote, table, figure, hr, .fd-codeblock) + :where(p, ul, ol, blockquote, table, figure, hr, .fd-codeblock) { margin-block-start: var(--docs-type-flow); }
-.doc-article .prose h2 { margin: 58px 0 14px; padding: 0; font: 600 24px/31px var(--font-sans); letter-spacing: -.022em; text-wrap: balance; }
-.doc-article .prose h3 { margin: 40px 0 11px; font: 600 20px/27px var(--font-sans); letter-spacing: -.015em; text-wrap: balance; }
-.doc-article .prose h4 { margin: 32px 0 9px; font: 600 17px/24px var(--font-sans); letter-spacing: -.01em; }
-.doc-article .prose h2 + h3 { margin-top: 18px; }
-.doc-article .prose h3 + h4 { margin-top: 16px; }
-.doc-article .prose :where(h2, h3, h4) + :where(p, ul, ol) { margin-top: 0; }
-.doc-article .prose :where(ul, ol) { padding-inline-start: 1.35em; }
-.doc-article .prose :where(li) { padding-inline-start: .25em; }
-.doc-article .prose :where(li + li) { margin-top: .55em; }
-.doc-article .prose :where(li > ul, li > ol) { margin-top: .55em; }
-.doc-article .prose :where(blockquote) { margin-top: calc(var(--docs-type-flow) * 1.15); padding: 2px 0 2px 18px; border-left: 2px solid var(--border-strong); color: var(--text-tertiary); font-style: normal; }
-.doc-article .prose :where(hr) { margin-top: calc(var(--docs-type-flow) * 2); border-color: var(--border-primary); }
-.doc-article .prose :where(table) { margin-top: calc(var(--docs-type-flow) * 1.25); font-size: .93em; }
-.doc-notice { --notice-accent: var(--color-info); margin: 24px 0; padding: 15px 16px; border-left: 3px solid var(--notice-accent); border-radius: 3px; background: var(--bg-inert); color: var(--text-secondary); font: 450 14px/22px var(--font-sans); letter-spacing: -.005em; }
-.doc-notice-info { --notice-accent: var(--color-info); }
-.doc-notice-idea { --notice-accent: var(--color-accent); }
-.doc-notice-warn { --notice-accent: var(--color-warning); }
-.doc-notice-error { --notice-accent: var(--color-destructive); }
-.doc-notice-success { --notice-accent: var(--color-success); }
-.doc-notice > strong { display: block; margin-bottom: 5px; color: var(--text-primary); font-weight: 600; }
-.doc-notice :where(p, ul, ol) { margin: 0; }
-.doc-article .prose .doc-notice :where(p, ul, ol) + :where(p, ul, ol) { margin-top: 14px; }
-.copy-page { position: relative; margin-left: auto; display: flex; flex-shrink: 0; }
-.copy-page-main { height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-primary); border-radius: 4px 0 0 4px; color: var(--text-tertiary); background: var(--bg-surface); font: 500 13px/16px var(--font-sans); cursor: pointer; }
-.copy-page-main:hover { color: var(--text-primary); background: var(--bg-inert); }
-.copy-page-menu > summary { height: 30px; width: 27px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-primary); border-left: 0; border-radius: 0 4px 4px 0; color: var(--text-quaternary); background: var(--bg-surface); cursor: pointer; list-style: none; }
-.copy-page-menu > summary::-webkit-details-marker { display: none; }
-.copy-page-menu > summary:hover, .copy-page-menu[open] > summary { color: var(--text-primary); background: var(--bg-inert); }
-.copy-page-main:focus-visible, .copy-page-menu > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; z-index: 1; }
-.copy-page-menu:not([open]) > .copy-page-popover { display: none; }
-.copy-page-popover { position: absolute; top: 34px; right: 0; z-index: 70; width: 296px; padding: 5px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-overlay); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
-.copy-page-popover button, .copy-page-popover a { width: 100%; padding: 8px 9px; display: flex; align-items: flex-start; gap: 11px; border: 0; border-radius: 4px; color: var(--text-secondary); background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
-.copy-page-popover button:hover, .copy-page-popover a:hover { background: var(--bg-emph-tertiary); }
-.copy-page-popover button:focus-visible, .copy-page-popover a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
-.copy-page-popover button > span, .copy-page-popover a > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.copy-page-popover strong { color: var(--text-primary); font: 550 13px/17px var(--font-sans); letter-spacing: -.006em; }
-.copy-page-popover small { color: var(--text-tertiary); font: 400 12px/16px var(--font-sans); }
-.copy-page-popover svg { flex: none; margin-top: 2px; color: var(--icon-secondary); }
-.copy-page-popover .copy-page-brand { width: 15px; height: 15px; }
-.copy-page-popover button:hover svg, .copy-page-popover a:hover svg { color: var(--text-primary); }
-.copy-page-popover hr { margin: 5px 3px; border: 0; border-top: 1px solid var(--border-primary); }
-@media (max-width: 640px) { .copy-page { display: none; } }
-.anchor-heading { scroll-margin-top: 88px; }
-.anchor-heading > a { display: inline-flex; align-items: baseline; gap: .35em; text-decoration: none !important; }
-.anchor-hash { color: var(--text-quaternary); font-family: var(--font-mono); font-size: .72em; font-weight: 500; opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; }
-/* Show the # on hover, or on keyboard focus only (:focus-visible) — a mouse
-   click copies the link without leaving the marker stuck on afterwards. */
-.anchor-heading:hover .anchor-hash, .anchor-heading:has(a:focus-visible) .anchor-hash { opacity: 1; transform: translateX(0); }
-.doc-article .prose a { text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
-.doc-article .prose :where(p, li, td, dd) a:not(.playground-link) { color: var(--text-primary); text-decoration-line: underline; text-decoration-color: color-mix(in oklab, var(--text-primary) 30%, transparent); }
-.doc-article .prose :where(p, li, td, dd) a:not(.playground-link):hover { text-decoration-color: var(--color-accent); }
-.doc-article .prose a:focus-visible { border-radius: 2px; outline: 2px solid var(--color-accent); outline-offset: 2px; }
-.doc-article .prose :not(pre) > code { border: 1px solid var(--border-primary); border-radius: 3px; padding: 1px 4px; background: var(--bg-inert); font-family: var(--font-mono); font-size: .84em; }
-/* Override Tailwind Typography's default keycap kbd (tiny .875em text, low
-   contrast, heavy 0 3px raised-key shadow that made keys read small and sit
-   below the baseline). Flatter, more legible, vertically centred with the text. */
-.doc-article .prose kbd { padding: 1px 6px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-emph-tertiary); box-shadow: 0 1px 0 var(--border-strong); color: var(--text-secondary); font: 500 12px/18px var(--font-mono); vertical-align: baseline; }
-/* Multi-line code in the reading column tracks the body bump: 12px -> 13px. */
-.doc-article .prose pre, .doc-article .prose pre code { font-size: 13px; line-height: 21px; }
-.doc-article figure[data-rehype-pretty-code-figure], .doc-article figure.shiki, .doc-article .fd-codeblock { border-color: var(--border-primary); border-radius: 4px !important; background: var(--bg-surface); box-shadow: none !important; }
-.doc-article figure:has(+ .placeholder-config) { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
-.accordion-group { width: 100%; margin: 12px 0; }
-.accordion-group > div { width: 100%; margin: 0 !important; overflow: hidden; border: 1px solid var(--border-primary) !important; border-radius: 4px !important; background: var(--bg-surface); }
-.accordion-group h3 { margin: 0 !important; }
-.accordion-group h3 button { min-height: 34px; padding: 5px 9px !important; gap: 6px !important; color: var(--text-secondary); font: 550 12px/16px var(--font-sans); }
-.accordion-group h3 button:hover { background: var(--bg-inert); color: var(--text-primary); }
-.accordion-group [data-state='open'] > div { padding: 2px 10px 10px !important; }
-.language-comparisons { width: 100%; margin: 12px 0; overflow: hidden; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-surface); }
-.language-comparison-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.language-comparison-options button { min-height: 34px; padding: 5px 10px; display: flex; align-items: center; gap: 7px; border: 0; color: var(--text-secondary); background: transparent; font: 550 12px/16px var(--font-sans); cursor: pointer; }
-.language-comparison-options button + button { border-left: 1px solid var(--border-primary); }
-.language-comparison-options button:hover, .language-comparison-options button[aria-expanded='true'] { color: var(--text-primary); background: var(--bg-inert); }
-.language-comparison-options button svg { flex: none; color: var(--text-quaternary); transform: rotate(-90deg); transition: transform .15s ease; }
-.language-comparison-options button[aria-expanded='true'] svg { transform: rotate(0); }
-.language-comparison-content { padding: 14px 16px 16px; border-top: 1px solid var(--border-primary); background: var(--bg-raised); }
-.language-comparison-content > div > :first-child { margin-top: 0 !important; }
-.language-comparison-content > div > :last-child { margin-bottom: 0 !important; }
-.docs-tabs { margin: 20px 0; }
-.docs-tabs > div { margin: 0 !important; overflow: hidden; border: 1px solid var(--border-primary) !important; border-radius: 4px !important; background: var(--bg-surface) !important; }
-.docs-tabs [role='tablist'] { min-height: 38px; padding: 0 10px !important; align-items: stretch; gap: 2px !important; border-bottom: 1px solid var(--border-primary); background: var(--bg-surface); }
-.docs-tabs [role='tab'] { position: relative; padding: 0 8px !important; border: 0 !important; color: var(--text-quaternary) !important; font: 500 11px/16px var(--font-mono) !important; }
-.docs-tabs [role='tab']:hover { color: var(--text-secondary) !important; }
-.docs-tabs [role='tab'][aria-selected='true'] { color: var(--text-primary) !important; }
-.docs-tabs [role='tab'][aria-selected='true']::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: var(--color-accent); content: ''; }
-.docs-tabs [role='tabpanel'] { padding: 14px 16px 16px !important; border-radius: 0 !important; background: var(--bg-raised) !important; }
-.docs-tabs [role='tabpanel'] > * { margin-block: 0 !important; }
-.docs-tabs [role='tabpanel'] > * + * { margin-top: 11px !important; }
-.docs-tabs figure[data-rehype-pretty-code-figure], .docs-tabs figure.shiki { border-radius: 4px !important; box-shadow: none !important; }
-.query-example { position: relative; margin-top: 11px; }
-.query-example > figure { margin: 0 !important; }
-.query-example > p:has(> .playground-link) { position: absolute; z-index: 2; top: 7px; right: 8px; margin: 0 !important; }
-.playground-link { width: fit-content; min-height: 24px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-primary); border-radius: 3px; color: var(--text-secondary) !important; background: color-mix(in srgb, var(--bg-canvas) 88%, transparent); font: 550 10px/14px var(--font-mono); text-decoration: none !important; }
-.playground-link:hover { border-color: var(--border-strong); color: var(--text-primary) !important; background: var(--bg-raised); }
-.playground-link svg:last-child { color: var(--text-quaternary); }
-.doc-article figure > div:has(> button[aria-label='Copy Text']) { opacity: 0; transition: opacity .12s ease; }
-.doc-article figure:hover > div:has(> button[aria-label='Copy Text']), .doc-article figure > div:has(> button[aria-label='Copy Text']:focus-visible) { opacity: 1; }
-.query-example figure > div:has(> button[aria-label='Copy Text']) { top: 7px !important; right: 164px !important; width: 24px; height: 24px; }
-.query-example figure button[aria-label='Copy Text'] { width: 24px; height: 24px; border: 1px solid var(--border-primary); border-radius: 3px; background: color-mix(in srgb, var(--bg-canvas) 88%, transparent); }
-.doc-article .prose div.relative.overflow-auto:has(> table) { margin: 18px 0 !important; overflow: auto; border: 1px solid var(--border-primary); border-radius: 4px; }
-.doc-article .prose div.relative.overflow-auto:has(> table) > table { width: 100%; margin: 0 !important; border: 0 !important; border-collapse: collapse; font-size: 12px; }
-.doc-article .prose div.relative.overflow-auto:has(> table) th { padding: 8px 10px; border: 0; border-right: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); color: var(--text-secondary); background: var(--bg-inert); font: 550 13px/18px var(--font-mono); text-align: left; }
-.doc-article .prose div.relative.overflow-auto:has(> table) td { padding: 9px 10px; border: 0; border-right: 1px solid var(--border-tertiary); border-bottom: 1px solid var(--border-tertiary); color: var(--docs-copy); font: 400 14px/22px var(--font-sans); vertical-align: top; }
-.doc-article .prose div.relative.overflow-auto:has(> table) :is(th, td):last-child { border-right: 0; }
-.doc-article .prose div.relative.overflow-auto:has(> table) tbody tr:last-child td { border-bottom: 0; }
-/* Inline code in table cells already reads as an identifier via the mono face;
-   drop the chip (border/tint/pad) so dense tables stay calm — just monospace. */
-.doc-article .prose div.relative.overflow-auto:has(> table) :is(th, td) code { padding: 0; border: 0; border-radius: 0; background: transparent; font-size: inherit; }
-.docs-tabs [role='tabpanel'] > div.relative.overflow-auto:has(> table) { margin-top: 11px !important; margin-bottom: 0 !important; }
-.floating-toc { position: fixed; right: 32px; top: 112px; z-index: 20; width: 210px; max-height: calc(100vh - 144px); overflow: auto; padding: 0; background: transparent; }
-.floating-toc strong { display: block; margin-bottom: 9px; color: var(--text-tertiary); font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
-.floating-toc a { position: relative; display: block; padding-top: 5px; padding-bottom: 5px; overflow: hidden; color: var(--text-quaternary); font: 450 13px/17px var(--font-sans); letter-spacing: -.006em; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease; }
-.floating-toc a code { color: inherit !important; font-size: inherit; }
-.floating-toc a:hover { color: var(--text-primary); }
-.floating-toc a.active { color: var(--text-primary); font-weight: 550; }
-.floating-toc a.active::before { position: absolute; left: 1px; top: 7px; width: 5px; height: 9px; background: currentColor; content: ''; }
-.axiom-toast { border: 1px solid var(--border-primary) !important; border-radius: 4px !important; background: var(--bg-overlay) !important; color: var(--text-primary) !important; box-shadow: none !important; font-family: var(--font-mono) !important; }
-.axiom-toast-title { font-size: 12px !important; font-weight: 600 !important; }
-.axiom-toast-description { color: var(--text-tertiary) !important; font-size: 11px !important; }
-.article-footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border-primary); color: var(--text-quaternary); font: 450 12px/16px var(--font-mono); }
-.article-footer-meta { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
-.page-feedback { display: flex; align-items: center; gap: 12px; color: var(--text-tertiary); }
-.page-feedback > span:first-child { color: var(--text-secondary); font-weight: 550; }
-.page-feedback-actions { display: flex; gap: 14px; }
-.page-feedback-actions button { padding: 0; border: 0; color: var(--text-tertiary); background: transparent; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
-.page-feedback-actions button:hover:not(:disabled) { color: var(--text-primary); text-decoration-color: var(--color-accent); }
-.page-feedback-actions button[aria-pressed='true'] { color: var(--text-primary); text-decoration-color: var(--color-accent); }
-.page-feedback-actions button:disabled { cursor: default; }
-.page-feedback-actions button:disabled[aria-pressed='false'] { color: var(--text-quaternary); text-decoration: none; }
-.page-feedback-thanks { color: var(--text-quaternary); }
-.article-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
-.article-pagination a { min-height: 76px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-tertiary); background: var(--bg-surface); text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
-.article-pagination a:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-raised); }
-.article-pagination a > span { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
-.article-pagination small { color: var(--text-quaternary); font: 500 10px/14px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
-.article-pagination strong { overflow: hidden; color: var(--text-secondary); font: 550 13px/18px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
-.article-pagination a:hover strong { color: var(--text-primary); }
-.article-next { grid-column: 2; text-align: right; }
-.article-footer-links a { color: var(--text-quaternary); text-decoration: none; }
-.article-footer-links a:hover { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
-.doc-frame { margin: 24px 0; padding: 8px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-surface); }
-.doc-frame img, .doc-frame video { width: 100%; border-radius: 2px; }
-.doc-frame figcaption { padding: 8px 4px 2px; color: var(--text-quaternary); font-size: 12px; }
-.code-group { margin: 24px 0; border: 1px solid var(--border-primary); border-radius: 4px; overflow: hidden; }
-.code-group > * { margin: 0 !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--border-primary) !important; }
-.code-group > *:last-child { border-bottom: 0 !important; }
-.api-field { margin: 16px 0; padding: 16px 0; border-top: 1px solid var(--border-secondary); }
-.api-field-heading { display: flex; align-items: center; gap: 8px; }
-.api-field-heading span, .api-field-heading strong { color: var(--text-quaternary); font: 450 10px/14px var(--font-mono); }
-.api-field-heading strong { color: var(--red-400); }
-/* <Icon> now renders a real lucide glyph rather than a boxed letter, so it is an
-   inline mark sized to the surrounding text — matching how Mintlify rendered it. */
-.doc-icon { width: 1.05em; height: 1.05em; margin: 0 .1em; display: inline-block; vertical-align: -.16em; flex: none; color: var(--text-secondary); }
 /* Inline glyphs in prose, e.g. <img className="inline-icon" src=".../share.svg">.
-   The Font Awesome assets are 576x512 with fill="currentColor", which does not
-   inherit through <img> — it paints black — so size them to the text and invert
-   on dark surfaces to keep them legible. */
-.inline-icon { width: 1.05em; height: 1.05em; margin: 0 .12em; display: inline-block; vertical-align: -.16em; object-fit: contain; }
-:root:not([data-theme='light']) .inline-icon { filter: invert(1); }
-.nav-table { margin: 24px 0; border: 1px solid var(--border-primary); border-radius: 4px; }
-.nav-table a { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--border-primary); }
-.nav-table a:last-child { border-bottom: 0; }
-.nav-table span { color: var(--text-tertiary); font-size: 13px; }
-.endpoint-bar { margin: 16px 0; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-surface); }
-.endpoint-bar > code { flex: 1; overflow-x: auto; color: var(--text-secondary); background: transparent !important; border: 0 !important; font: 450 13px/18px var(--font-mono) !important; white-space: nowrap; }
-.endpoint-method { padding: 3px 7px; border: 1px solid var(--border-primary); border-radius: 4px; font: 600 10px/16px var(--font-mono); letter-spacing: .04em; }
-.endpoint-description { margin: 16px 0 24px; color: var(--text-tertiary); font: 400 16px/26px var(--font-sans); }
-.copy-button { margin-left: auto; padding: 4px; display: inline-flex; align-items: center; gap: 6px; border: 0; color: var(--text-quaternary); background: transparent; cursor: pointer; font: 450 11px/16px var(--font-mono); }
-.copy-button:hover { color: var(--text-primary); }
-.api-section { margin-top: 44px; }
-.api-section > h2 { margin: 0 !important; padding: 0; border: 0; color: var(--text-primary); font: 600 18px/24px var(--font-sans) !important; letter-spacing: -.01em; }
-.api-section > h2 a { color: var(--text-quaternary); text-decoration: none !important; font: 450 14px/20px var(--font-mono); }
-.api-section-copy { margin-top: 12px; color: var(--text-secondary); font-size: 15px; line-height: 25px; }
-.api-schema-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--border-primary); border-radius: 4px; }
-.api-schema-table { width: 100%; min-width: 620px; margin: 0 !important; border: 0 !important; border-collapse: collapse; table-layout: fixed; font-size: 12px !important; }
-.api-schema-table th { padding: 7px 12px; border: 0 !important; border-bottom: 1px solid var(--border-primary) !important; color: var(--text-quaternary); background: var(--bg-inert); font: 500 10px/14px var(--font-mono); letter-spacing: .06em; text-align: left; text-transform: uppercase; }
-.api-schema-table th:nth-child(1) { width: 30%; }
-.api-schema-table th:nth-child(2) { width: 25%; }
-.api-schema-table[data-has-location] th:nth-child(1) { width: 28%; }
-.api-schema-table[data-has-location] th:nth-child(2) { width: 18%; }
-.api-schema-table[data-has-location] th:nth-child(3) { width: 14%; }
-.api-schema-table td { height: 37px; padding: 8px 12px; border: 0 !important; border-bottom: 1px solid var(--border-tertiary) !important; vertical-align: middle; }
-.api-schema-table tbody tr:last-child td { border-bottom: 0 !important; }
-.api-schema-table .api-schema-object-row td { background: var(--bg-inert); }
-.api-schema-name { position: relative; white-space: nowrap; }
-.api-schema-name code, .api-schema-type code { padding: 0 !important; border: 0 !important; background: transparent !important; font-family: var(--font-mono); }
-.api-schema-name code { color: var(--text-primary) !important; font-size: 12px !important; font-weight: 550; }
-.api-schema-branch { margin-right: 6px; color: var(--border-strong); font: 400 11px/14px var(--font-mono); }
-.api-schema-type { white-space: nowrap; }
-.api-schema-type code, .api-schema-type b { margin-right: 7px; color: var(--text-quaternary) !important; font: 450 10px/14px var(--font-mono) !important; letter-spacing: .04em; text-transform: uppercase; }
-.api-schema-type b { color: var(--color-warning-text) !important; }
-.api-schema-location code { padding: 0 !important; border: 0 !important; color: var(--text-tertiary) !important; background: transparent !important; font: 500 10px/14px var(--font-mono) !important; letter-spacing: .05em; text-transform: uppercase; }
-.api-schema-description { color: var(--text-secondary) !important; font: 400 13px/19px var(--font-sans); }
-.api-schema-description code, .api-section-copy code { padding: 1px 4px; border: 1px solid var(--border-secondary); border-radius: 3px; background: var(--bg-inert); font-family: var(--font-mono); }
-.media-types { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
-.media-types code { padding: 3px 7px; border: 1px solid var(--border-primary); border-radius: 3px; color: var(--text-tertiary); background: var(--bg-inert); font-size: 10px; }
-.api-code { margin-top: 16px; overflow: hidden; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-surface); }
-.api-code-head { min-height: 38px; padding: 0 8px 0 10px; display: flex; align-items: center; border-bottom: 1px solid var(--border-primary); color: var(--text-tertiary); font: 450 12px/16px var(--font-mono); }
-.api-code-tabs { align-self: stretch; display: flex; align-items: stretch; gap: 2px; }
-.api-code-tabs button { position: relative; padding: 0 8px; border: 0; color: var(--text-quaternary); background: transparent; cursor: pointer; font: 500 11px/16px var(--font-mono); }
-.api-code-tabs button:hover { color: var(--text-secondary); }
-.api-code-tabs button[aria-selected='true'] { color: var(--text-primary); }
-.api-code-tabs button[aria-selected='true']::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: var(--color-accent); content: ''; }
-.api-code-body pre { margin: 0 !important; padding: 14px 16px !important; overflow-x: auto; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--shiki-light) !important; font: 400 12px/20px var(--font-mono) !important; }
-.api-code-body pre code { display: block; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font: inherit !important; }
-.api-code-body pre span { color: var(--shiki-light); }
-:root[data-theme='dark'] .api-code-body pre { color: var(--shiki-dark) !important; }
-:root[data-theme='dark'] .api-code-body pre span { color: var(--shiki-dark) !important; }
-.api-try { margin-top: 12px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-surface); }
-.api-try > summary { min-height: 46px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; list-style: none; color: var(--text-secondary); cursor: pointer; }
-.api-try > summary::-webkit-details-marker { display: none; }
-.api-try > summary:hover { background: var(--bg-inert); }
-.api-try-chevron { height: 20px; display: inline-flex; align-items: center; color: var(--text-quaternary); transition: transform .15s ease; }
-.api-try[open] .api-try-chevron { transform: rotate(90deg); }
-.api-try > summary > span:last-child { display: flex; align-items: baseline; gap: 9px; }
-.api-try > summary strong { color: var(--text-primary); font: 600 12px/18px var(--font-mono); }
-.api-try > summary small { color: var(--text-quaternary); font: 400 11px/16px var(--font-sans); }
-.api-try-panel { padding: 14px 16px 16px; border-top: 1px solid var(--border-primary); }
-.api-try-panel > p { margin: 0 0 14px; color: var(--text-tertiary); font: 400 12px/19px var(--font-sans); }
-.api-try-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
-.api-try-fields label { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
-.api-try-fields label > span { color: var(--text-secondary); font: 500 11px/16px var(--font-mono); }
-.api-try-fields label > span b, .api-try-fields label > span em, .api-try-fields label > span code { margin-left: 6px; color: var(--color-warning-text); font: 500 10px/14px var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
-.api-try-fields label > span em { color: var(--text-quaternary); }
-.api-try-fields label > span code { padding: 0; border: 0; color: var(--text-quaternary); background: transparent; }
-.api-try-fields input, .api-try-fields textarea { width: 100%; border: 1px solid var(--border-primary); border-radius: 4px; outline: none; color: var(--text-primary); background: var(--bg-canvas); font: 400 12px/18px var(--font-mono); }
-.api-try-fields input { height: 34px; padding: 0 10px; }
-.api-try-fields textarea { min-height: 150px; padding: 10px; resize: vertical; }
-.api-try-fields input:focus, .api-try-fields textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue-500) 15%, transparent); }
-.api-try-fields input::placeholder { color: var(--text-quaternary); }
-.api-try-body { grid-column: 1 / -1; }
-.api-try-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
-.api-try-guidance { margin: 12px 0 0 !important; padding: 9px 10px; border-left: 2px solid var(--amber-500); color: var(--text-secondary) !important; background: var(--bg-inert); font: 400 11px/18px var(--font-sans) !important; }
-.api-try-guidance strong { color: var(--text-primary); font-weight: 600; }
-.api-try-guidance a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
-.api-try-actions button { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 4px; color: var(--text-on-inverse-primary); background: var(--bg-emph-primary-inverse); cursor: pointer; font: 600 11px/16px var(--font-sans); }
-.api-try-actions button:disabled { opacity: .45; cursor: not-allowed; }
-.api-try-spinner { animation: api-try-spin .8s linear infinite; }
-@keyframes api-try-spin { to { transform: rotate(360deg); } }
-.api-try-error { margin: 12px 0 0 !important; padding: 9px 10px; border-left: 2px solid var(--red-400); color: var(--red-400) !important; background: var(--bg-inert); font: 450 11px/17px var(--font-mono) !important; }
-.api-try-result { margin-top: 14px; overflow: hidden; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--bg-canvas); }
-.api-try-result > div { min-height: 34px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-primary); }
-.api-try-result strong { color: var(--text-secondary); font: 550 11px/16px var(--font-mono); }
-.api-try-result small { margin-left: auto; color: var(--text-quaternary); font: 450 10px/14px var(--font-mono); text-transform: uppercase; }
-.api-try-result pre { max-height: 420px; margin: 0 !important; padding: 14px !important; overflow: auto; border: 0 !important; background: transparent !important; color: var(--text-primary) !important; font: 400 12px/20px var(--font-mono) !important; }
-.api-try-result code { padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; font: inherit !important; }
-.api-response { min-height: 43px; padding: 10px 4px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-tertiary); }
-.api-response > div { display: flex; align-items: center; gap: 8px; }
-.api-response code { padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-secondary) !important; }
-.api-response span { color: var(--text-tertiary); font-size: 12px; }
-.api-response small { margin-left: auto; color: var(--text-quaternary); font: 450 10px/14px var(--font-mono); text-transform: uppercase; }
-.status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 999px; }
-.status-dot.success { background: var(--green-500); }
-.status-dot.error { background: var(--red-400); }
-.axiom-placeholder-highlight { color: var(--blue-500); }
-.dark .axiom-placeholder-highlight { color: #60a5fa; }
-.placeholder-config { margin: 0 0 24px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border-primary); border-top: 0; border-radius: 0 0 4px 4px; background: var(--bg-surface); }
-.placeholder-config label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; color: var(--text-tertiary); font: 500 12px/16px var(--font-sans); }
-.placeholder-config input, .placeholder-config select { min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--border-primary); border-radius: 4px; outline: none; color: var(--text-secondary); background: var(--bg-canvas); font: 400 12px/16px var(--font-mono); }
-.placeholder-config input:focus, .placeholder-config select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
-
-@media (max-width: 1339px) { .floating-toc { display: none; } }
-@media (max-width: 1240px) {
-  .site-header > .header-tabs { display: none; }
-  .mobile-menu-trigger { width: 44px; height: 44px; margin-left: -8px; display: inline-flex; border-color: transparent; }
-  .docs-grid { display: block; }
-  .landing-main { padding-right: 0; }
-  .sidebar { top: 56px; width: min(320px, 88vw); z-index: 70; padding: 16px 16px max(48px, env(safe-area-inset-bottom)) 24px; visibility: hidden; transform: translateX(-105%); transition: transform .2s ease, visibility 0s linear .2s; box-shadow: 12px 0 48px rgba(0,0,0,.35); }
-  .sidebar.open { visibility: visible; transform: translateX(0); transition-delay: 0s; }
-  .drawer-sections { margin: 0 0 20px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--border-primary); }
-  .drawer-sections a { min-height: 44px; padding: 0 10px; display: flex; align-items: center; border-radius: 4px; color: var(--text-tertiary); font: 500 14px/18px var(--font-sans); }
-  .drawer-sections a:hover { color: var(--text-secondary); background: var(--bg-emph-tertiary); }
-  .drawer-sections a.active { color: var(--text-primary); background: var(--bg-emph-secondary); font-weight: 600; }
-  .sidebar-link, .nav-nested summary { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
-  .sidebar-backdrop { position: fixed; z-index: 60; inset: 56px 0 0; display: block; border: 0; background: rgba(0,0,0,.5); }
-  .doc-article { transform: none; }
-}
-@media (max-width: 1080px) {
-  .header-search { width: 34px; justify-content: center; }
-  .header-search span, .header-search kbd { display: none; }
-  .landing-content { padding-inline: 40px; }
-  .landing-footer { margin-inline: -40px; }
-}
-@media (max-width: 900px) {
-  .site-header { gap: 12px; padding-inline: 16px; }
-  .brand-badge, .console-button { display: none; }
-  .docs-search-close { width: 44px; height: 44px; }
-  .docs-search-clear { min-height: 44px; }
-  .docs-search-ask-row, .docs-search-empty button { min-height: 44px; }
-  .docs-search-footer button { min-height: 44px; }
-  .docs-assistant-input-wrap button { width: 44px; height: 44px; }
-  .docs-assistant-sources a, .docs-assistant-error button { min-height: 44px; }
-  .landing-content { padding-inline: 28px; }
-  .landing-footer { margin-inline: -28px; }
-  .article-layout { padding-inline: 36px; }
-}
-@media (max-width: 640px) {
-  .docs-search-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
-  .docs-search-dialog-header { height: 52px; padding-inline: 12px 6px; }
-  .docs-search-mode-tabs { gap: 2px; }
-  .docs-search-mode-tabs button { min-height: 44px; font-size: 14px; }
-  .docs-search-clear { font-size: 14px; }
-  .docs-search-input-row { height: 56px; padding-inline: 13px; }
-  .docs-search-input-row > kbd, .docs-search-footer span { display: none; }
-  .docs-search-results { padding: 6px; }
-  .docs-search-ask-row, .docs-search-empty button { font-size: 14px; }
-  .docs-search-result { min-height: 64px; }
-  .docs-search-result-content { font-size: 14px; line-height: 20px; }
-  .docs-search-footer { justify-content: flex-end; }
-  .docs-search-footer button { margin-left: 0; font-size: 13px; }
-  .docs-assistant-messages { padding: 18px 14px 24px; }
-  .docs-assistant-message.user { max-width: 92%; }
-  .docs-assistant-composer { min-height: 116px; padding-inline: 12px; }
-  .brand-mark { width: 23px; height: 20px; }
-  .site-header { gap: 8px; }
-  .header-actions { gap: 6px; }
-  .landing-content { padding: 28px 20px 0; }
-  .landing-hero { padding-top: 8px; }
-  .landing-hero h1 { font-size: 36px; line-height: 40px; }
-  .quick-grid { grid-template-columns: 1fr; }
-  .quick-card { min-height: 0; }
-  .platform-index > a { align-items: flex-start; flex-wrap: wrap; }
-  .platform-index strong { width: 100%; }
-  .landing-footer { margin: 64px -20px 0; padding: 20px; flex-wrap: wrap; gap: 14px 20px; }
-  .landing-footer small { width: 100%; margin-left: 0; }
-  .article-layout { padding: 36px 20px 72px; }
-  .page-feedback { align-items: flex-start; flex-wrap: wrap; }
-  .page-feedback > span:first-child { width: 100%; }
-  .article-pagination { grid-template-columns: 1fr; }
-  .article-next { grid-column: 1; }
-  .api-schema-wrap { margin-right: -8px; }
-  .api-try-fields { grid-template-columns: 1fr; }
-  .api-try-body { grid-column: auto; }
-  .api-response { align-items: flex-start; flex-direction: column; }
-  .api-response small { margin-left: 16px; }
-  .placeholder-config label { grid-template-columns: 1fr; gap: 5px; }
-}
+   Authored as raw JSX in MDX content, so there is no component to carry
+   utilities. The Font Awesome assets are 576x512 with fill="currentColor",
+   which does not inherit through <img> — it paints black — so size them to the
+   text and invert on dark surfaces to keep them legible. */
+.inline-icon { @apply w-[1.05em] h-[1.05em] my-0 mx-[.12em] inline-block align-[-.16em] object-contain dark:invert; }
 
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
-  .sidebar { transition: none !important; }
+  *, *::before, *::after { @apply scroll-auto! duration-[.01ms]! [animation-duration:.01ms]!; }
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
@@ -682,11 +76,14 @@ kbd { border: 1px solid var(--border-primary); border-radius: 3px; padding: 1px
   --sidebar-accent: var(--bg-emph-tertiary);
   --sidebar-accent-foreground: var(--text-primary);
   --sidebar-ring: var(--color-accent);
+  --sidebar-primary: var(--bg-emph-primary-inverse);
+  --sidebar-primary-foreground: var(--text-on-inverse-primary);
 }
 
 @theme inline {
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
+  --font-heading: var(--font-sans);
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -709,6 +106,8 @@ kbd { border: 1px solid var(--border-primary); border-radius: 3px; padding: 1px
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 
   /* Registered at Axiom's own values, so the existing 22 var(--color-accent) /
      var(--color-destructive) usages resolve exactly as before while the
@@ -718,10 +117,193 @@ kbd { border: 1px solid var(--border-primary); border-radius: 3px; padding: 1px
   --color-accent: var(--orange-500);
   --color-destructive: var(--red-400);
 
+  /* Ported from www: `text-brand` / `bg-brand` etc. and the chart ramp
+     (values in styles/tokens.css). accent-foreground pairs with Axiom's
+     orange accent, so it's white here rather than www's near-black. */
+  --color-brand: var(--brand);
+  --color-accent-foreground: var(--white);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
   --radius-sm: calc(var(--radius) * 0.75);
   --radius-md: var(--radius);
   --radius-lg: calc(var(--radius) * 1.5);
   --radius-xl: calc(var(--radius) * 2);
+
+  /* Adaptive color scales ported from www (values in styles/tokens.css) —
+     generates the same utilities as www: `text-red-9`, `bg-gray-2`, etc. */
+  /* Gray */
+  --color-gray-1: var(--gray-1);
+  --color-gray-2: var(--gray-2);
+  --color-gray-3: var(--gray-3);
+  --color-gray-4: var(--gray-4);
+  --color-gray-5: var(--gray-5);
+  --color-gray-6: var(--gray-6);
+  --color-gray-7: var(--gray-7);
+  --color-gray-8: var(--gray-8);
+  --color-gray-9: var(--gray-9);
+  --color-gray-10: var(--gray-10);
+  --color-gray-11: var(--gray-11);
+  --color-gray-12: var(--gray-12);
+  /* Red */
+  --color-red-1: var(--red-1);
+  --color-red-2: var(--red-2);
+  --color-red-3: var(--red-3);
+  --color-red-4: var(--red-4);
+  --color-red-5: var(--red-5);
+  --color-red-6: var(--red-6);
+  --color-red-7: var(--red-7);
+  --color-red-8: var(--red-8);
+  --color-red-9: var(--red-9);
+  --color-red-10: var(--red-10);
+  --color-red-11: var(--red-11);
+  --color-red-12: var(--red-12);
+  /* Orange */
+  --color-orange-1: var(--orange-1);
+  --color-orange-2: var(--orange-2);
+  --color-orange-3: var(--orange-3);
+  --color-orange-4: var(--orange-4);
+  --color-orange-5: var(--orange-5);
+  --color-orange-6: var(--orange-6);
+  --color-orange-7: var(--orange-7);
+  --color-orange-8: var(--orange-8);
+  --color-orange-9: var(--orange-9);
+  --color-orange-10: var(--orange-10);
+  --color-orange-11: var(--orange-11);
+  --color-orange-12: var(--orange-12);
+  /* Yellow */
+  --color-yellow-1: var(--yellow-1);
+  --color-yellow-2: var(--yellow-2);
+  --color-yellow-3: var(--yellow-3);
+  --color-yellow-4: var(--yellow-4);
+  --color-yellow-5: var(--yellow-5);
+  --color-yellow-6: var(--yellow-6);
+  --color-yellow-7: var(--yellow-7);
+  --color-yellow-8: var(--yellow-8);
+  --color-yellow-9: var(--yellow-9);
+  --color-yellow-10: var(--yellow-10);
+  --color-yellow-11: var(--yellow-11);
+  --color-yellow-12: var(--yellow-12);
+  /* Green */
+  --color-green-1: var(--green-1);
+  --color-green-2: var(--green-2);
+  --color-green-3: var(--green-3);
+  --color-green-4: var(--green-4);
+  --color-green-5: var(--green-5);
+  --color-green-6: var(--green-6);
+  --color-green-7: var(--green-7);
+  --color-green-8: var(--green-8);
+  --color-green-9: var(--green-9);
+  --color-green-10: var(--green-10);
+  --color-green-11: var(--green-11);
+  --color-green-12: var(--green-12);
+  /* Blue */
+  --color-blue-1: var(--blue-1);
+  --color-blue-2: var(--blue-2);
+  --color-blue-3: var(--blue-3);
+  --color-blue-4: var(--blue-4);
+  --color-blue-5: var(--blue-5);
+  --color-blue-6: var(--blue-6);
+  --color-blue-7: var(--blue-7);
+  --color-blue-8: var(--blue-8);
+  --color-blue-9: var(--blue-9);
+  --color-blue-10: var(--blue-10);
+  --color-blue-11: var(--blue-11);
+  --color-blue-12: var(--blue-12);
+  /* Purple */
+  --color-purple-1: var(--purple-1);
+  --color-purple-2: var(--purple-2);
+  --color-purple-3: var(--purple-3);
+  --color-purple-4: var(--purple-4);
+  --color-purple-5: var(--purple-5);
+  --color-purple-6: var(--purple-6);
+  --color-purple-7: var(--purple-7);
+  --color-purple-8: var(--purple-8);
+  --color-purple-9: var(--purple-9);
+  --color-purple-10: var(--purple-10);
+  --color-purple-11: var(--purple-11);
+  --color-purple-12: var(--purple-12);
+  /* Tomato */
+  --color-tomato-1: var(--tomato-1);
+  --color-tomato-2: var(--tomato-2);
+  --color-tomato-3: var(--tomato-3);
+  --color-tomato-4: var(--tomato-4);
+  --color-tomato-5: var(--tomato-5);
+  --color-tomato-6: var(--tomato-6);
+  --color-tomato-7: var(--tomato-7);
+  --color-tomato-8: var(--tomato-8);
+  --color-tomato-9: var(--tomato-9);
+  --color-tomato-10: var(--tomato-10);
+  --color-tomato-11: var(--tomato-11);
+  --color-tomato-12: var(--tomato-12);
+  /* Amber */
+  --color-amber-1: var(--amber-1);
+  --color-amber-2: var(--amber-2);
+  --color-amber-3: var(--amber-3);
+  --color-amber-4: var(--amber-4);
+  --color-amber-5: var(--amber-5);
+  --color-amber-6: var(--amber-6);
+  --color-amber-7: var(--amber-7);
+  --color-amber-8: var(--amber-8);
+  --color-amber-9: var(--amber-9);
+  --color-amber-10: var(--amber-10);
+  --color-amber-11: var(--amber-11);
+  --color-amber-12: var(--amber-12);
+  /* Lime */
+  --color-lime-1: var(--lime-1);
+  --color-lime-2: var(--lime-2);
+  --color-lime-3: var(--lime-3);
+  --color-lime-4: var(--lime-4);
+  --color-lime-5: var(--lime-5);
+  --color-lime-6: var(--lime-6);
+  --color-lime-7: var(--lime-7);
+  --color-lime-8: var(--lime-8);
+  --color-lime-9: var(--lime-9);
+  --color-lime-10: var(--lime-10);
+  --color-lime-11: var(--lime-11);
+  --color-lime-12: var(--lime-12);
+  /* Teal */
+  --color-teal-1: var(--teal-1);
+  --color-teal-2: var(--teal-2);
+  --color-teal-3: var(--teal-3);
+  --color-teal-4: var(--teal-4);
+  --color-teal-5: var(--teal-5);
+  --color-teal-6: var(--teal-6);
+  --color-teal-7: var(--teal-7);
+  --color-teal-8: var(--teal-8);
+  --color-teal-9: var(--teal-9);
+  --color-teal-10: var(--teal-10);
+  --color-teal-11: var(--teal-11);
+  --color-teal-12: var(--teal-12);
+  /* Iris */
+  --color-iris-1: var(--iris-1);
+  --color-iris-2: var(--iris-2);
+  --color-iris-3: var(--iris-3);
+  --color-iris-4: var(--iris-4);
+  --color-iris-5: var(--iris-5);
+  --color-iris-6: var(--iris-6);
+  --color-iris-7: var(--iris-7);
+  --color-iris-8: var(--iris-8);
+  --color-iris-9: var(--iris-9);
+  --color-iris-10: var(--iris-10);
+  --color-iris-11: var(--iris-11);
+  --color-iris-12: var(--iris-12);
+  /* Pink */
+  --color-pink-1: var(--pink-1);
+  --color-pink-2: var(--pink-2);
+  --color-pink-3: var(--pink-3);
+  --color-pink-4: var(--pink-4);
+  --color-pink-5: var(--pink-5);
+  --color-pink-6: var(--pink-6);
+  --color-pink-7: var(--pink-7);
+  --color-pink-8: var(--pink-8);
+  --color-pink-9: var(--pink-9);
+  --color-pink-10: var(--pink-10);
+  --color-pink-11: var(--pink-11);
+  --color-pink-12: var(--pink-12);
 }
 
 /* shadcn components assume `border` resolves to the theme border colour
@@ -735,3 +317,187 @@ kbd { border: 1px solid var(--border-primary); border-radius: 3px; padding: 1px
     border-color: var(--border);
   }
 }
+
+/* ────────────────────────────────────────────────────────────────
+ * Typography utilities ported verbatim from www/src/app/globals.css
+ * (body-*, mono-*, content-*). Opt-in classes; the docs' own type
+ * styles are untouched.
+ * ──────────────────────────────────────────────────────────────── */
+@utility body-xs-regular {
+  font-family: var(--font-sans);
+  font-size: 0.625rem; /* 10 / 16 */
+  line-height: 1rem; /* 16 / 16 */
+  font-weight: 400;
+}
+
+@utility body-xs-semibold {
+  font-family: var(--font-sans);
+  font-size: 0.625rem;
+  line-height: 1rem;
+  font-weight: 600;
+}
+
+@utility body-sm-regular {
+  font-family: var(--font-sans);
+  font-size: 0.6875rem; /* 11 / 16 */
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+@utility body-sm-medium {
+  font-family: var(--font-sans);
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  font-weight: 500;
+}
+
+@utility body-sm-semibold {
+  font-family: var(--font-sans);
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  font-weight: 600;
+}
+
+@utility body-md-regular {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem; /* 13 / 16 */
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+@utility body-md-medium {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  font-weight: 500;
+}
+
+@utility body-md-semibold {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  font-weight: 600;
+}
+
+@utility body-lg-regular {
+  font-family: var(--font-sans);
+  font-size: 0.9375rem; /* 15 / 16 */
+  line-height: 1.25rem; /* 20 / 16 */
+  font-weight: 400;
+}
+
+@utility body-lg-medium {
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+@utility body-lg-semibold {
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+@utility body-normal-sm-regular {
+  font-family: var(--font-sans);
+  font-size: 0.6875rem; /* 11px */
+  font-weight: 400;
+}
+
+@utility body-normal-md-regular {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem; /* 13px */
+  font-weight: 400;
+}
+
+@utility body-normal-lg-regular {
+  font-family: var(--font-sans);
+  font-size: 0.9375rem; /* 15px */
+  font-weight: 400;
+}
+
+@utility mono-sm-regular {
+  font-family: var(--font-mono);
+  font-size: 0.625rem; /* 10 / 16 */
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+@utility mono-sm-bold {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  line-height: 1rem;
+  font-weight: 700;
+}
+
+@utility mono-md-regular {
+  font-family: var(--font-mono);
+  font-size: 0.75rem; /* 12 / 16 */
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+@utility mono-md-medium {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+}
+
+@utility mono-md-bold {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
+}
+
+@utility mono-lg-regular {
+  font-family: var(--font-mono);
+  font-size: 0.875rem; /* 14 / 16 */
+  line-height: 1.25rem; /* 20 / 16 */
+  font-weight: 400;
+}
+
+@utility mono-lg-medium {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+@utility mono-xl-regular {
+  font-family: var(--font-mono);
+  font-size: 1rem; /* 16 / 16 */
+  line-height: 1.375rem; /* 22 / 16 */
+  font-weight: 400;
+}
+
+@utility mono-xl-medium {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-weight: 500;
+}
+
+@utility mono-lg-bold {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+}
+
+@utility content-md-regular {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem; /* 13 / 16 */
+  line-height: 1.125rem; /* 18 / 16 */
+  font-weight: 400;
+}
+
+@utility content-md-bold {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: 700;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 2bcf5c348..b13faa840 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
+import { Geist } from 'next/font/google';
 import localFont from 'next/font/local';
+import { cn } from '@/lib/utils';
 import { RootProvider } from 'fumadocs-ui/provider/next';
 import { DocsShell } from '@/components/docs-shell';
 import { DocsToaster } from '@/components/docs-toaster';
@@ -8,15 +10,17 @@ import { getNavigation } from '@/lib/navigation';
 import { siteGraph, structuredDataProps } from '@/lib/structured-data';
 import './globals.css';
 
-const geist = localFont({
-  src: './fonts/Geist-Variable.ttf',
+const geist = Geist({
+  subsets: ['latin'],
   variable: '--font-geist',
   display: 'swap',
 });
 
-const geistMono = localFont({
-  src: './fonts/GeistMono-Variable.ttf',
-  variable: '--font-geist-mono',
+// Full original file — do NOT subset: the Berkeley Mono EULA (§1.12 + §8)
+// prohibits Derivative Works, which includes subsetting the binary.
+const berkeleyMono = localFont({
+  src: './fonts/Berkeley_Mono_Variable.woff2',
+  variable: '--font-berkeley-mono',
   display: 'swap',
 });
 
@@ -27,15 +31,19 @@ export const metadata: Metadata = {
     template: '%s | Axiom Docs',
   },
   description: 'Learn how to send, store, and query logs, traces, metrics, and events with Axiom.',
-  icons: { icon: { url: '/docs/doc-assets/logo/favicon.svg?v=2', type: 'image/svg+xml' } },
+  // Same multi-res raster icon as www: Google Search's favicon crawler
+  // refetches favicon.ico and won't show an SVG-only icon.
+  icons: { icon: [{ url: '/docs/favicon.ico', sizes: 'any' }] },
   openGraph: { siteName: 'Axiom', type: 'website', locale: 'en_US' },
   twitter: { card: 'summary_large_image' },
 };
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" suppressHydrationWarning data-scroll-behavior="smooth" className={`${geist.variable} ${geistMono.variable}`}>
-      <body>
+    // `antialiased` matches www: macOS's default subpixel smoothing fattens
+    // light-on-dark text, making 400 read like a medium weight.
+    <html lang="en" suppressHydrationWarning data-scroll-behavior="smooth" className={cn(geist.variable, berkeleyMono.variable, 'scroll-smooth antialiased bg-(--bg-canvas)')}>
+      <body className="m-0 bg-(--bg-canvas) text-(--text-primary) font-sans font-normal">
         <script type="application/ld+json" dangerouslySetInnerHTML={structuredDataProps(siteGraph())} />
         <RootProvider
           theme={{ attribute: ['class', 'data-theme'], defaultTheme: 'system', enableSystem: true, storageKey: 'axiom-docs-theme' }}
diff --git a/app/page.tsx b/app/page.tsx
index 78840851d..1ee73af09 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,61 +1,322 @@
-import type { Metadata } from 'next';
-import { AskAiPrompt, SearchPrompt } from '@/components/search-prompt';
-import { ZoneLink as Link } from '@/components/zone-link';
-import { ogImage } from '@/lib/og';
+import type { Metadata } from "next";
+import { ScrollText, Waypoints, type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AskAiPrompt } from "@/components/search-prompt";
+import { IntegrationIcon } from "@/components/integration-icons";
+import {
+  CarbonApi,
+  CarbonCode,
+  CarbonRocket,
+} from "@/components/landing-icons";
+import { ZoneLink as Link } from "@/components/zone-link";
+import { ogImage } from "@/lib/og";
 
 const quickCards = [
-  { title: 'Quickstart', description: 'Send your first events in five minutes. No schema, no credit card.', action: 'Start here →', href: '/docs/getting-started' },
-  { title: 'Query with APL', description: 'From count() to joins. Operators, functions, and worked examples.', action: 'Learn APL →', href: '/docs/apl/overview' },
-  { title: 'API reference', description: 'REST endpoints, tokens, and limits. Ingest and query over HTTP.', action: 'Browse the API →', href: '/docs/restapi/introduction' },
+  {
+    title: "Quickstart",
+    description:
+      "Send your first events in five minutes. No schema, no credit card.",
+    href: "/docs/getting-started",
+    Icon: CarbonRocket,
+  },
+  {
+    title: "Query with APL",
+    description:
+      "From count() to joins. Operators, functions, and worked examples.",
+    href: "/docs/apl/overview",
+    Icon: CarbonCode,
+  },
+  {
+    title: "API reference",
+    description:
+      "REST endpoints, tokens, and limits. Ingest and query over HTTP.",
+    href: "/docs/restapi/introduction",
+    Icon: CarbonApi,
+  },
 ];
 
-const integrations = [
-  ['OpenTelemetry', '/docs/send-data/opentelemetry'], ['JavaScript', '/docs/guides/javascript'], ['Python', '/docs/guides/python'],
-  ['Go', '/docs/guides/go'], ['Kubernetes', '/docs/send-data/kubernetes'], ['AWS', '/docs/send-data/cloudwatch'],
-  ['Vector', '/docs/send-data/vector'], ['Vercel', '/docs/apps/vercel'], ['Cloudflare', '/docs/apps/cloudflare-workers'],
-  ['Syslog', '/docs/send-data/syslog'], ['Grafana', '/docs/apps/grafana'], ['Terraform', '/docs/apps/terraform'],
+// `slug` picks a brand mark from components/integration-icons.tsx; the two
+// integrations with no simple-icons entry carry a lucide `fallback` instead.
+type Integration = {
+  label: string;
+  href: string;
+  blurb: string;
+  slug?: string;
+  fallback?: LucideIcon;
+};
+
+const integrations: Integration[] = [
+  {
+    label: "OpenTelemetry",
+    href: "/docs/send-data/opentelemetry",
+    slug: "opentelemetry",
+    blurb: "Traces, logs, and metrics over OTLP.",
+  },
+  {
+    label: "JavaScript",
+    href: "/docs/guides/javascript",
+    slug: "javascript",
+    blurb: "Events from Node.js and the browser.",
+  },
+  {
+    label: "Python",
+    href: "/docs/guides/python",
+    slug: "python",
+    blurb: "Structured logs from Python services.",
+  },
+  {
+    label: "Go",
+    href: "/docs/guides/go",
+    slug: "go",
+    blurb: "Ship events with axiom-go.",
+  },
+  {
+    label: "Kubernetes",
+    href: "/docs/send-data/kubernetes",
+    slug: "kubernetes",
+    blurb: "Cluster and pod logs at scale.",
+  },
+  {
+    label: "AWS",
+    href: "/docs/send-data/cloudwatch",
+    slug: "aws",
+    blurb: "CloudWatch, Lambda, and S3.",
+  },
+  {
+    label: "Vector",
+    href: "/docs/send-data/vector",
+    fallback: Waypoints,
+    blurb: "High-throughput log routing.",
+  },
+  {
+    label: "Vercel",
+    href: "/docs/apps/vercel",
+    slug: "vercel",
+    blurb: "Function and edge logs, zero config.",
+  },
+  {
+    label: "Cloudflare",
+    href: "/docs/apps/cloudflare-workers",
+    slug: "cloudflare",
+    blurb: "Workers logs from the edge.",
+  },
+  {
+    label: "Syslog",
+    href: "/docs/send-data/syslog",
+    fallback: ScrollText,
+    blurb: "Streams from hosts and network gear.",
+  },
+  {
+    label: "Grafana",
+    href: "/docs/apps/grafana",
+    slug: "grafana",
+    blurb: "Dashboards on top of Axiom queries.",
+  },
+  {
+    label: "Terraform",
+    href: "/docs/apps/terraform",
+    slug: "terraform",
+    blurb: "Axiom resources as code.",
+  },
 ];
 
 const platformRows = [
-  ['Send data', 'Connect your applications, infrastructure, and telemetry pipelines.', '/docs/send-data/methods'],
-  ['Explore data', 'Search, filter, and inspect every event in real time.', '/docs/query-data/explore'],
-  ['Query with APL', 'Transform and analyze data with Axiom Processing Language.', '/docs/apl/overview'],
-  ['Build dashboards', 'Turn saved queries into durable, shareable views.', '/docs/dashboards/create'],
-  ['Create monitors', 'Detect thresholds, matches, and anomalies before users do.', '/docs/monitor-data/monitors'],
-  ['Manage datasets', 'Control schemas, retention, access, and usage at scale.', '/docs/reference/datasets'],
+  [
+    "Send data",
+    "Connect your applications, infrastructure, and telemetry pipelines.",
+    "/docs/send-data/methods",
+  ],
+  [
+    "Explore data",
+    "Search, filter, and inspect every event in real time.",
+    "/docs/query-data/explore",
+  ],
+  [
+    "Query with APL",
+    "Transform and analyze data with Axiom Processing Language.",
+    "/docs/apl/overview",
+  ],
+  [
+    "Build dashboards",
+    "Turn saved queries into durable, shareable views.",
+    "/docs/dashboards/create",
+  ],
+  [
+    "Create monitors",
+    "Detect thresholds, matches, and anomalies before users do.",
+    "/docs/monitor-data/monitors",
+  ],
+  [
+    "Manage datasets",
+    "Control schemas, retention, access, and usage at scale.",
+    "/docs/reference/datasets",
+  ],
 ];
 
-const title = 'Axiom Docs';
-const description = 'Learn how to send, store, and query logs, traces, metrics, and events with Axiom.';
+const title = "Axiom Docs";
+const description =
+  "Learn how to send, store, and query logs, traces, metrics, and events with Axiom.";
+
+// Shared by .landing-hero, .quick-grid and .landing-section in globals.css.
+const measure = "w-[min(760px,100%)] mx-auto";
+// `!` marks utilities whose property is also set by an element default
+// (`h1,h2,p,small,a` in styles/tokens.css, `a { color: inherit }` in
+// app/globals.css). Those defaults now live in @layer base, so the plain
+// utilities would win anyway — the `!` is belt-and-braces from the migration
+// and safe to drop in a cleanup pass.
+const sectionHeadingTitle =
+  "m-0! text-(--text-tertiary)! font-mono! text-[12px]! leading-4! tracking-[.08em]! uppercase";
 
 export const metadata: Metadata = {
   title,
   description,
-  alternates: { canonical: '/docs' },
-  openGraph: { title, description, siteName: 'Axiom', type: 'website', url: '/docs', images: [ogImage(title)] },
-  twitter: { card: 'summary_large_image', title, description, images: [ogImage(title)] },
+  alternates: { canonical: "/docs" },
+  openGraph: {
+    title,
+    description,
+    siteName: "Axiom",
+    type: "website",
+    url: "/docs",
+    images: [ogImage(title)],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title,
+    description,
+    images: [ogImage(title)],
+  },
 };
 
 export default function DocsLandingPage() {
   return (
-    <div className="landing-content">
-      <section className="landing-hero">
-        <h1>From first event to petabyte scale.</h1>
-        <p>Send, store, and query logs, traces, metrics, and events. From first ingest to petabyte scale.</p>
-        <SearchPrompt />
+    <div className="landing-content pt-10 px-14 pb-0 max-lg:px-10 max-md:px-7 max-sm:pt-7 max-sm:px-5">
+      <section
+        className={cn(
+          "landing-hero",
+          measure,
+          "pt-6 px-0 pb-12 max-sm:pt-2",
+        )}
+      >
+        <h1 className="m-0! max-w-[700px] text-(--text-primary)! font-sans! text-[44px]! leading-12! font-semibold! tracking-[-.03em]! text-pretty max-sm:text-[36px]! max-sm:leading-10!">
+          From first event to petabyte scale.
+        </h1>
+        <p className="max-w-[560px] mt-[14px]! mx-0! mb-0! text-(--text-tertiary)! font-sans text-[16px] leading-[26px] font-normal tracking-[-.01em]">
+          Send, store, and query logs, traces, metrics, and events.
+          From first ingest to petabyte scale.
+        </p>
       </section>
-      <section className="quick-grid" aria-label="Popular starting points">
-        {quickCards.map((card) => <Link href={card.href} prefetch={false} className="quick-card" key={card.title}><strong>{card.title}</strong><span>{card.description}</span><small>{card.action}</small></Link>)}
+      <section
+        className={cn(
+          "quick-grid",
+          measure,
+          "grid grid-cols-3 gap-4 max-sm:grid-cols-1",
+        )}
+        aria-label="Popular starting points"
+      >
+        {quickCards.map(({ Icon, ...card }) => (
+          <Link
+            href={card.href}
+            prefetch={false}
+            className="quick-card p-5 flex flex-col gap-1.5 rounded-[6px] bg-(--bg-surface) transition-[background-color] duration-150 ease-[ease] [&:hover]:bg-(--bg-raised)"
+            key={card.title}
+          >
+            <span className="mb-2.5 text-(--text-tertiary) [.quick-card:hover_&]:text-(--text-primary) transition-colors duration-150 ease-[ease]">
+              <Icon size={22} />
+            </span>
+            <strong className="font-sans text-[15px] leading-5 font-semibold tracking-[-.01em]">
+              {card.title}
+            </strong>
+            <span className="text-(--text-tertiary) font-sans text-[13px] leading-5 font-normal">
+              {card.description}
+            </span>
+          </Link>
+        ))}
       </section>
-      <section className="landing-section">
-        <div className="section-heading"><h2>Send data</h2><span /><Link href="/docs/apps/introduction" prefetch={false}>All integrations →</Link></div>
-        <div className="integration-list">{integrations.map(([label, href]) => <Link href={href} prefetch={false} key={label}>{label}</Link>)}</div>
+      <section className={cn("landing-section", measure, "mt-14")}>
+        <div className="section-heading flex items-center gap-4 mb-5">
+          <h2 className={sectionHeadingTitle}>Send data</h2>
+          <span className="flex-1 border-t border-(--border-primary)" />
+          <Link
+            href="/docs/apps/introduction"
+            prefetch={false}
+            className="text-(--text-tertiary)! font-mono text-[12px] leading-4 font-[450]"
+          >
+            All integrations →
+          </Link>
+        </div>
+        <div className="integration-list grid grid-cols-3 gap-x-6 gap-y-1 max-md:grid-cols-2 max-sm:grid-cols-1">
+          {integrations.map(
+            ({ label, href, slug, blurb, fallback: Fallback }) => (
+              <Link
+                href={href}
+                prefetch={false}
+                key={label}
+                className="-mx-2.5 px-2.5 py-2.5 flex items-start gap-3 rounded-[6px] no-underline transition-[background-color] duration-150 ease-[ease] [&:hover]:bg-(--bg-inert)"
+              >
+                <span className="flex-none mt-px">
+                  {slug ? (
+                    <IntegrationIcon slug={slug} size={18} />
+                  ) : Fallback ? (
+                    <Fallback size={18} className="text-(--text-secondary)" />
+                  ) : null}
+                </span>
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <strong className="font-sans text-[14px] leading-5 font-semibold text-(--text-primary)">
+                    {label}
+                  </strong>
+                  <span className="overflow-hidden text-ellipsis whitespace-nowrap text-(--text-tertiary) font-sans text-[12px] leading-[17px] font-normal">
+                    {blurb}
+                  </span>
+                </span>
+              </Link>
+            ),
+          )}
+        </div>
       </section>
-      <section className="landing-section platform-index">
-        <div className="section-heading"><h2>Explore the platform</h2><span /></div>
-        {platformRows.map(([title, description, href]) => <Link href={href} prefetch={false} key={title}><strong>{title}</strong><span>{description}</span><b>→</b></Link>)}
+      <section
+        className={cn(
+          "landing-section platform-index",
+          measure,
+          "mt-14",
+        )}
+      >
+        <div className="section-heading flex items-center gap-4 mb-2">
+          <h2 className={sectionHeadingTitle}>
+            Explore the platform
+          </h2>
+          <span className="flex-1 border-t border-(--border-primary) text-(--text-tertiary) font-sans text-[13px] leading-5 font-normal" />
+        </div>
+        {platformRows.map(([title, description, href]) => (
+          <Link
+            href={href}
+            prefetch={false}
+            key={title}
+            className="py-4 px-1 flex items-baseline gap-3 border-b border-(--border-secondary) last:border-b-0 [&:hover]:bg-(--bg-emph-tertiary) [&:hover]:border-transparent [&:has(+_a:hover)]:border-transparent max-sm:items-start max-sm:flex-wrap"
+          >
+            <strong className="w-[180px] flex-none font-sans text-[14px] leading-5 font-semibold max-sm:w-full">
+              {title}
+            </strong>
+            <span className="flex-1 text-(--text-tertiary) font-sans text-[13px] leading-5 font-normal">
+              {description}
+            </span>
+            <b className="text-(--text-quaternary) font-mono font-normal">→</b>
+          </Link>
+        ))}
       </section>
-      <footer className="landing-footer"><span>Can’t find it?</span><AskAiPrompt /><a href="https://discord.gg/axiomco">Discord</a><a href="https://axiom.co/contact">Support</a><small>axiom.co/docs</small></footer>
+      {/* Full-bleed across the main column: -mx cancels landing-content's own
+          padding; at xl+ the right margin also swallows landing-main's 260px
+          TOC-balance padding so the bar reaches the viewport edge. */}
+      <footer className="landing-footer mt-20 -mx-14 mb-0 py-5 px-8 flex items-center gap-6 border-t border-(--border-primary) text-(--text-tertiary) font-mono text-[12px] leading-4 font-[450] xl:mr-[calc(-3.5rem-260px)] max-lg:-mx-10 max-md:-mx-7 max-sm:mt-16 max-sm:-mx-5 max-sm:mb-0 max-sm:py-5 max-sm:px-5 max-sm:flex-wrap max-sm:gap-x-5 max-sm:gap-y-[14px]">
+        <span className="text-(--text-quaternary) uppercase tracking-[.06em]">
+          Can’t find it?
+        </span>
+        <AskAiPrompt />
+        <a href="https://discord.gg/axiomco">Discord</a>
+        <a href="https://axiom.co/contact">Support</a>
+        <small className="ml-auto text-(--text-quaternary)! font-mono text-[12px]! leading-4! font-[450] max-sm:w-full max-sm:ml-0">
+          axiom.co/docs
+        </small>
+      </footer>
     </div>
   );
 }
diff --git a/components/api-code-block.tsx b/components/api-code-block.tsx
index 6e227412a..13811982b 100644
--- a/components/api-code-block.tsx
+++ b/components/api-code-block.tsx
@@ -50,14 +50,15 @@ export function ApiCodeBlock({ samples, label }: { samples: ApiCodeSample[]; lab
   };
 
   return (
-    <div className="api-code">
-      <div className="api-code-head">
+    <div className="api-code mt-4 overflow-hidden border border-(--border-primary) rounded-[4px] bg-(--bg-inert)">
+      <div className="api-code-head min-h-[38px] pt-0 pr-2 pb-0 pl-2.5 flex items-center border-b border-b-(--border-primary) text-(--text-tertiary) font-mono text-[12px] leading-4 font-[450]">
         {samples.length > 1 ? (
-          <div className="api-code-tabs" role="tablist" aria-label="Request language">
+          <div className="api-code-tabs self-stretch flex items-stretch gap-0.5" role="tablist" aria-label="Request language">
             {samples.map((sample) => (
               <button
                 type="button"
                 role="tab"
+                className="relative px-2 py-0 border-0 text-(--text-quaternary) bg-transparent cursor-pointer font-mono! text-[11px]! leading-4! font-medium! hover:text-(--text-secondary) aria-selected:text-(--text-primary) aria-selected:after:content-[''] aria-selected:after:absolute aria-selected:after:right-2 aria-selected:after:-bottom-px aria-selected:after:left-2 aria-selected:after:h-0.5 aria-selected:after:bg-(--color-accent)"
                 aria-selected={sample.id === selected.id}
                 key={sample.id}
                 onClick={() => selectLanguage(sample.id)}
@@ -72,7 +73,13 @@ export function ApiCodeBlock({ samples, label }: { samples: ApiCodeSample[]; lab
           analytics={{ codeKind: 'api_sample', language: selected.id }}
         />
       </div>
-      <div className="api-code-body" role="tabpanel" aria-label={`${selected.label} code example`}>
+      {/* Shiki emits `background` and per-token colours as inline styles, so the
+          resets and the light/dark colour flips need `!` to beat them. */}
+      <div
+        className="api-code-body [&_pre]:m-0! [&_pre]:py-[14px]! [&_pre]:px-4! [&_pre]:overflow-x-auto [&_pre]:border-0! [&_pre]:rounded-none! [&_pre]:bg-transparent! [&_pre]:text-(--shiki-light)! [&_pre]:font-mono! [&_pre]:text-[12px]! [&_pre]:leading-5! [&_pre]:font-normal! dark:[&_pre]:text-(--shiki-dark)! [&_pre_code]:block [&_pre_code]:p-0! [&_pre_code]:border-0! [&_pre_code]:rounded-none! [&_pre_code]:bg-transparent! [&_pre_code]:[font:inherit]! [&_pre_span]:text-(--shiki-light) dark:[&_pre_span]:text-(--shiki-dark)!"
+        role="tabpanel"
+        aria-label={`${selected.label} code example`}
+      >
         {selected.highlighted}
       </div>
     </div>
diff --git a/components/api-operation.tsx b/components/api-operation.tsx
index 2bb08ac3f..9cacc2a8b 100644
--- a/components/api-operation.tsx
+++ b/components/api-operation.tsx
@@ -1,4 +1,6 @@
 import { highlight } from 'fumadocs-core/highlight';
+import { axiomCodeDark, axiomCodeLight } from '@/lib/code-theme';
+import { cn } from '@/lib/utils';
 import type { ReactNode } from 'react';
 import { CopyButton } from './copy-button';
 import { ApiCodeBlock, type ApiCodeSample } from './api-code-block';
@@ -17,10 +19,23 @@ function schemaType(document: JsonObject, input: JsonObject | undefined): string
   return schema.format ? `${type}<${schema.format}>` : type;
 }
 
-function PlainMarkdown({ value }: { value?: string }) {
+// `.api-schema-description code, .api-section-copy code` in globals.css.
+const inlineCodeClass = 'py-px px-1 border border-(--border-secondary) rounded-[3px] bg-(--bg-inert) font-mono';
+
+// The dark palette sits at 1.9–2.5:1 on the light tints, so the light theme
+// repoints to darker text values that clear AA (>=4.5:1) on the same tints.
+const METHOD_COLORS: Record<string, string> = {
+  get: 'method-get text-[#34d399] bg-[rgba(16,185,129,.11)] [:root[data-theme=light]_&]:text-[#047857] [:root[data-theme=light]_&]:bg-[rgba(16,185,129,.12)]',
+  post: 'method-post text-[#60a5fa] bg-[rgba(59,130,246,.11)] [:root[data-theme=light]_&]:text-[#1d4ed8] [:root[data-theme=light]_&]:bg-[rgba(59,130,246,.12)]',
+  put: 'method-put text-[#fbbf24] bg-[rgba(245,158,11,.11)] [:root[data-theme=light]_&]:text-[#92400e] [:root[data-theme=light]_&]:bg-[rgba(245,158,11,.14)]',
+  patch: 'method-patch text-[#fbbf24] bg-[rgba(245,158,11,.11)] [:root[data-theme=light]_&]:text-[#92400e] [:root[data-theme=light]_&]:bg-[rgba(245,158,11,.14)]',
+  delete: 'method-delete text-[#f87171] bg-[rgba(239,68,68,.11)] [:root[data-theme=light]_&]:text-[#b91c1c] [:root[data-theme=light]_&]:bg-[rgba(239,68,68,.12)]',
+};
+
+function PlainMarkdown({ value, codeClassName }: { value?: string; codeClassName?: string }) {
   if (!value) return null;
   const chunks = value.split(/(`[^`]+`)/g);
-  return <>{chunks.map((chunk, index) => chunk.startsWith('`') && chunk.endsWith('`') ? <code key={index}>{chunk.slice(1, -1)}</code> : <span key={index}>{chunk}</span>)}</>;
+  return <>{chunks.map((chunk, index) => chunk.startsWith('`') && chunk.endsWith('`') ? <code className={codeClassName} key={index}>{chunk.slice(1, -1)}</code> : <span key={index}>{chunk}</span>)}</>;
 }
 
 type SchemaRow = {
@@ -66,25 +81,34 @@ function schemaRows(document: JsonObject, input: JsonObject | undefined, require
   });
 }
 
+// `.api-section > h2` and `.api-section > h2 a` in globals.css.
+const sectionHeadingClass = 'm-0! p-0 border-0 text-(--text-primary) font-sans! text-[18px]! leading-6! font-semibold! tracking-[-.01em]';
+const sectionHeadingLinkClass = 'text-(--text-quaternary)! no-underline! font-mono text-[14px] leading-5 font-[450]';
+
+const schemaHeadCellClass = 'py-[7px] px-3 border-x-0! border-t-0! border-b! border-b-(--border-primary)! text-(--text-quaternary) bg-(--bg-inert) font-mono text-[10px] leading-[14px] font-medium tracking-[.06em] text-left uppercase';
+const schemaCellClass = 'h-[37px] py-2 px-3 border-x-0! border-t-0! border-b! border-b-(--border-tertiary)! align-middle';
+
 function SchemaTable({ document, rows, label }: { document: JsonObject; rows: SchemaRow[]; label: string }) {
   if (rows.length === 0) return null;
   const hasLocation = rows.some((row) => row.location);
   return (
-    <div className="api-schema-wrap">
-      <table className="api-schema-table" data-has-location={hasLocation || undefined} aria-label={label}>
-        <thead><tr><th>Property</th><th>Type</th>{hasLocation && <th>Location</th>}<th>Description</th></tr></thead>
-        <tbody>{rows.map((row) => (
-          <tr className={row.hasChildren ? 'api-schema-object-row' : undefined} data-depth={row.depth} key={row.key}>
-            <td className="api-schema-name" style={{ paddingLeft: 12 + row.depth * 18 }}>
-              {row.depth > 0 && <span className="api-schema-branch" aria-hidden="true">└</span>}
-              <code>{row.name}</code>
+    <div className="api-schema-wrap mt-[14px] overflow-x-auto border border-(--border-primary) rounded-[4px] max-sm:-mr-2">
+      {/* Corner cells carry the wrapper's inner radius — collapsed cell
+          backgrounds paint square past an ancestor's rounded clip. */}
+      <table className="api-schema-table w-full min-w-[620px] m-0! border-0! border-collapse table-fixed text-[12px]! [&_thead_th:first-child]:rounded-tl-[3px] [&_thead_th:last-child]:rounded-tr-[3px] [&_tbody_tr:last-child_td:first-child]:rounded-bl-[3px] [&_tbody_tr:last-child_td:last-child]:rounded-br-[3px]" data-has-location={hasLocation || undefined} aria-label={label}>
+        <thead><tr><th className={cn(schemaHeadCellClass, hasLocation ? 'w-[28%]' : 'w-[30%]')}>Property</th><th className={cn(schemaHeadCellClass, hasLocation ? 'w-[18%]' : 'w-[25%]')}>Type</th>{hasLocation && <th className={cn(schemaHeadCellClass, 'w-[14%]')}>Location</th>}<th className={schemaHeadCellClass}>Description</th></tr></thead>
+        <tbody className="[&>tr:last-child>td]:border-b-0!">{rows.map((row) => (
+          <tr className={row.hasChildren ? 'api-schema-object-row [&>td]:bg-(--bg-inert)' : undefined} data-depth={row.depth} key={row.key}>
+            <td className={cn('api-schema-name relative whitespace-nowrap', schemaCellClass)} style={{ paddingLeft: 12 + row.depth * 18 }}>
+              {row.depth > 0 && <span className="api-schema-branch mr-1.5 text-(--border-strong) font-mono text-[11px] leading-[14px] font-normal" aria-hidden="true">└</span>}
+              <code className="p-0! border-0! bg-transparent! font-mono text-(--text-primary)! text-[12px]! font-[550]">{row.name}</code>
             </td>
-            <td className="api-schema-type">
-              <code>{schemaType(document, row.field)}</code>
-              {row.required && <b>Required</b>}
+            <td className={cn('api-schema-type whitespace-nowrap', schemaCellClass)}>
+              <code className="mr-[7px] p-0! border-0! bg-transparent! text-(--text-quaternary)! font-mono! text-[10px]! leading-[14px]! font-[450]! tracking-[.04em] uppercase">{schemaType(document, row.field)}</code>
+              {row.required && <b className="mr-[7px] text-(--color-warning-text)! font-mono! text-[10px]! leading-[14px]! font-[450]! tracking-[.04em] uppercase">Required</b>}
             </td>
-            {hasLocation && <td className="api-schema-location"><code>{row.location}</code></td>}
-            <td className="api-schema-description"><PlainMarkdown value={row.description} />{!row.description && <span aria-hidden="true">—</span>}</td>
+            {hasLocation && <td className={cn('api-schema-location', schemaCellClass)}><code className="p-0! border-0! text-(--text-tertiary)! bg-transparent! font-mono! text-[10px]! leading-[14px]! font-medium! tracking-[.05em] uppercase">{row.location}</code></td>}
+            <td className={cn('api-schema-description text-(--text-secondary)! font-sans text-[13px] leading-[19px] font-normal', schemaCellClass)}><PlainMarkdown value={row.description} codeClassName={inlineCodeClass} />{!row.description && <span aria-hidden="true">—</span>}</td>
           </tr>
         ))}</tbody>
       </table>
@@ -156,7 +180,7 @@ async function highlightedSamples(samples: ReturnType<typeof requestSamples>): P
     id: sample.id,
     label: sample.label,
     code: sample.code,
-    highlighted: await highlight(sample.code, { lang: sample.language, themes: { light: 'github-light-high-contrast', dark: 'github-dark-high-contrast' } }),
+    highlighted: await highlight(sample.code, { lang: sample.language, themes: { light: axiomCodeLight, dark: axiomCodeDark } }),
   })));
 }
 
@@ -203,12 +227,17 @@ export async function ApiOperation({ value, children }: { value: string; childre
   }));
 
   return <div className="api-operation">
-    <div className="endpoint-bar"><span className={`endpoint-method method-${method}`}>{method.toUpperCase()}</span><code>{displayPath}</code><CopyButton value={displayPath} label="" analytics={{ codeKind: 'endpoint_path' }} /></div>
-    {operation.description && <p className="endpoint-description"><PlainMarkdown value={operation.description} /></p>}
+    <div className="endpoint-bar my-4 py-2.5 px-3 flex items-center gap-2.5 border border-(--border-primary) rounded-[4px] bg-(--bg-surface)">
+      <span className={cn('endpoint-method py-[3px] px-[7px] border border-(--border-primary) rounded-[4px] font-mono text-[10px] leading-4 font-semibold tracking-[.04em]', METHOD_COLORS[method] ?? 'method-' + method)}>{method.toUpperCase()}</span>
+      {/* `!` beats the prose inline-code chip styles this <code> sits inside. */}
+      <code className="flex-1 overflow-x-auto text-(--text-secondary) bg-transparent! border-0! font-mono! text-[13px]! leading-[18px]! font-[450]! whitespace-nowrap">{displayPath}</code>
+      <CopyButton value={displayPath} label="" analytics={{ codeKind: 'endpoint_path' }} />
+    </div>
+    {operation.description && <p className="endpoint-description mt-4 mb-6 text-(--text-tertiary) font-sans text-[16px] leading-[26px] font-normal"><PlainMarkdown value={operation.description} /></p>}
     {children}
-    {parameters.length > 0 && <section className="api-section" id="parameters"><h2>Parameters <a href="#parameters">#</a></h2><SchemaTable document={document} rows={parameterRows} label="Request parameters" /></section>}
-    {bodyContent && <section className="api-section" id="body"><h2>Body <a href="#body">#</a></h2><p className="api-section-copy"><PlainMarkdown value={resolveSchema(document, bodySchema)?.description ?? operation.requestBody?.description} /></p><div className="media-types">{Object.keys(bodyContent).map((type) => <code key={type}>{type}</code>)}</div><SchemaTable document={document} rows={bodyRows} label="Request body schema" /></section>}
-    <section className="api-section" id="example"><h2>Request <a href="#example">#</a></h2><ApiCodeBlock samples={requestCodeSamples} /><ApiTryIt operation={value} method={method} parameters={tryParameters} serverVariables={serverVariables} bodyType={bodyType} bodyExample={bodyExample} /></section>
-    {responseEntries.length > 0 && <section className="api-section" id="response"><h2>Response <a href="#response">#</a></h2>{responseEntries.map(([code, response]) => <div className="api-response" key={code}><div><span className={/^2/.test(code) ? 'status-dot success' : 'status-dot error'} /><code>{code}</code><span>{response.description}</span></div>{response.content && <small>{Object.keys(response.content).join(', ')}</small>}</div>)}{responseSchema && <SchemaTable document={document} rows={responseRows} label="Response schema" />}</section>}
+    {parameters.length > 0 && <section className="api-section mt-11" id="parameters"><h2 className={sectionHeadingClass}>Parameters <a className={sectionHeadingLinkClass} href="#parameters">#</a></h2><SchemaTable document={document} rows={parameterRows} label="Request parameters" /></section>}
+    {bodyContent && <section className="api-section mt-11" id="body"><h2 className={sectionHeadingClass}>Body <a className={sectionHeadingLinkClass} href="#body">#</a></h2><p className="api-section-copy mt-3 text-(--text-secondary) text-[15px] leading-[25px]"><PlainMarkdown value={resolveSchema(document, bodySchema)?.description ?? operation.requestBody?.description} codeClassName={inlineCodeClass} /></p><div className="media-types mt-3 flex flex-wrap gap-1.5">{Object.keys(bodyContent).map((type) => <code className="py-[3px] px-[7px] border border-(--border-primary) rounded-[3px] text-(--text-tertiary) bg-(--bg-inert) text-[10px]" key={type}>{type}</code>)}</div><SchemaTable document={document} rows={bodyRows} label="Request body schema" /></section>}
+    <section className="api-section mt-11" id="example"><h2 className={sectionHeadingClass}>Request <a className={sectionHeadingLinkClass} href="#example">#</a></h2><ApiCodeBlock samples={requestCodeSamples} /><ApiTryIt operation={value} method={method} parameters={tryParameters} serverVariables={serverVariables} bodyType={bodyType} bodyExample={bodyExample} /></section>
+    {responseEntries.length > 0 && <section className="api-section mt-11" id="response"><h2 className={sectionHeadingClass}>Response <a className={sectionHeadingLinkClass} href="#response">#</a></h2>{responseEntries.map(([code, response]) => <div className="api-response min-h-[43px] py-2.5 px-1 flex items-center gap-3 border-b border-b-(--border-tertiary) max-sm:items-start max-sm:flex-col" key={code}><div className="flex items-center gap-2"><span className={cn(/^2/.test(code) ? 'status-dot success bg-(--green-500)' : 'status-dot error bg-(--red-400)', 'size-2 inline-block rounded-[999px] text-(--text-tertiary) text-[12px]')} /><code className="p-0! border-0! bg-transparent! text-(--text-secondary)!">{code}</code><span className="text-(--text-tertiary) text-[12px]">{response.description}</span></div>{response.content && <small className="ml-auto text-(--text-quaternary) font-mono text-[10px] leading-[14px] font-[450] uppercase max-sm:ml-4">{Object.keys(response.content).join(', ')}</small>}</div>)}{responseSchema && <SchemaTable document={document} rows={responseRows} label="Response schema" />}</section>}
   </div>;
 }
diff --git a/components/api-try-it.tsx b/components/api-try-it.tsx
index 5ae1c34a7..99506f65e 100644
--- a/components/api-try-it.tsx
+++ b/components/api-try-it.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ChevronRight, LoaderCircle, Play } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { useEffect, useMemo, useState } from 'react';
 import { ZoneLink as Link } from '@/components/zone-link';
 import {
@@ -30,6 +31,19 @@ type TryResult = {
 const tokenKey = 'axiom-docs-try-token';
 const orgKey = 'axiom-docs-try-org';
 
+// `.api-try-fields …` in globals.css.
+const fieldLabelClass = 'min-w-0 flex flex-col gap-1.5';
+const fieldLegendClass = 'text-(--text-secondary) font-mono text-[11px] leading-4 font-medium';
+// No `!` on the contested properties below: the surviving unlayered
+// `.doc-article .prose :where(strong, b)` (colour) and
+// `.doc-article .prose :not(pre) > code` (padding/border/background/font) rules
+// out-specify the originals today, so plain utilities must keep losing to them.
+const fieldBadgeClass = 'ml-1.5 text-(--color-warning-text) font-mono text-[10px] leading-[14px] font-medium not-italic tracking-[.04em] uppercase';
+const fieldNoteClass = 'ml-1.5 p-0 border-0 bg-transparent text-(--text-quaternary) font-mono text-[10px] leading-[14px] font-medium not-italic tracking-[.04em] uppercase';
+const fieldControlClass = 'w-full border border-(--border-primary) rounded-[4px] outline-none text-(--text-primary) bg-(--bg-canvas) font-mono! text-[12px]! leading-[18px]! font-normal! focus:border-(--color-accent) focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-accent)_18%,transparent)]';
+const fieldInputClass = `${fieldControlClass} h-[34px] px-2.5 py-0 placeholder:text-(--text-quaternary)`;
+const fieldTextareaClass = `${fieldControlClass} min-h-[150px] p-2.5 resize-y`;
+
 function initialValues(items: ApiTryItParameter[]) {
   return Object.fromEntries(items.map((item) => [item.name, item.example == null ? '' : String(item.example)]));
 }
@@ -141,7 +155,7 @@ export function ApiTryIt({
 
   return (
     <details
-      className="api-try ph-no-capture"
+      className="api-try ph-no-capture group mt-3 border border-(--border-primary) rounded-[4px] bg-(--bg-surface)"
       data-ph-no-capture
       onToggle={(event) => {
         if (event.currentTarget.open) {
@@ -152,20 +166,20 @@ export function ApiTryIt({
         }
       }}
     >
-      <summary><span className="api-try-chevron"><ChevronRight size={14} /></span><span><strong>Try it</strong><small>Run this request against your Axiom organization</small></span></summary>
-      <div className="api-try-panel">
-        <p>Credentials stay in this browser tab and are only sent to Axiom when you run the request.</p>
-        <div className="api-try-fields">
-          <label><span>API token <b>Required</b></span><input data-ph-no-capture type="password" autoComplete="off" value={token} onChange={(event) => persistCredential(tokenKey, event.target.value, setToken)} placeholder="xaat-…" /></label>
-          {personalToken && <label><span>Organization ID <b>Required for PAT</b></span><input data-ph-no-capture type="text" autoComplete="off" value={orgId} onChange={(event) => persistCredential(orgKey, event.target.value, setOrgId)} placeholder="Your organization ID" /></label>}
-          {serverVariables.map((item) => <label key={item.name}><span>{item.name} {item.required && <b>Required</b>}</span><input value={variables[item.name] ?? ''} onChange={(event) => setVariables((current) => ({ ...current, [item.name]: event.target.value }))} placeholder={item.description} /></label>)}
-          {visibleParameters.map((item) => <label key={`${item.location}-${item.name}`}><span>{item.name} <code>{item.location}</code>{item.required && <b>Required</b>}</span><input value={values[item.name] ?? ''} onChange={(event) => setValues((current) => ({ ...current, [item.name]: event.target.value }))} placeholder={item.description} /></label>)}
-          {bodyType && <label className="api-try-body"><span>Request body <code>{bodyType}</code></span><textarea value={body} onChange={(event) => setBody(event.target.value)} spellCheck={false} /></label>}
+      <summary className="min-h-[46px] py-2 px-3 flex items-center gap-[9px] list-none [&::-webkit-details-marker]:hidden text-(--text-secondary) cursor-pointer hover:bg-(--bg-inert)"><span className="api-try-chevron h-5 inline-flex items-center text-(--text-quaternary) transition-transform duration-150 ease-[ease] group-open:rotate-90"><ChevronRight size={14} /></span><span className="flex items-baseline gap-[9px]"><strong className="text-(--text-primary) font-mono text-[12px] leading-[18px] font-semibold">Try it</strong><small className="text-(--text-quaternary) font-sans text-[11px] leading-4 font-normal">Run this request against your Axiom organization</small></span></summary>
+      <div className="api-try-panel pt-[14px] px-4 pb-4 border-t border-t-(--border-primary)">
+        <p className="mt-0 mx-0 mb-[14px] text-(--text-tertiary) font-sans text-[12px] leading-[19px] font-normal">Credentials stay in this browser tab and are only sent to Axiom when you run the request.</p>
+        <div className="api-try-fields grid grid-cols-2 gap-3 max-sm:grid-cols-1">
+          <label className={fieldLabelClass}><span className={fieldLegendClass}>API token <b className={fieldBadgeClass}>Required</b></span><input className={fieldInputClass} data-ph-no-capture type="password" autoComplete="off" value={token} onChange={(event) => persistCredential(tokenKey, event.target.value, setToken)} placeholder="xaat-…" /></label>
+          {personalToken && <label className={fieldLabelClass}><span className={fieldLegendClass}>Organization ID <b className={fieldBadgeClass}>Required for PAT</b></span><input className={fieldInputClass} data-ph-no-capture type="text" autoComplete="off" value={orgId} onChange={(event) => persistCredential(orgKey, event.target.value, setOrgId)} placeholder="Your organization ID" /></label>}
+          {serverVariables.map((item) => <label className={fieldLabelClass} key={item.name}><span className={fieldLegendClass}>{item.name} {item.required && <b className={fieldBadgeClass}>Required</b>}</span><input className={fieldInputClass} value={variables[item.name] ?? ''} onChange={(event) => setVariables((current) => ({ ...current, [item.name]: event.target.value }))} placeholder={item.description} /></label>)}
+          {visibleParameters.map((item) => <label className={fieldLabelClass} key={`${item.location}-${item.name}`}><span className={fieldLegendClass}>{item.name} <code className={fieldNoteClass}>{item.location}</code>{item.required && <b className={fieldBadgeClass}>Required</b>}</span><input className={fieldInputClass} value={values[item.name] ?? ''} onChange={(event) => setValues((current) => ({ ...current, [item.name]: event.target.value }))} placeholder={item.description} /></label>)}
+          {bodyType && <label className={cn('api-try-body col-span-full max-sm:col-auto', fieldLabelClass)}><span className={fieldLegendClass}>Request body <code className={fieldNoteClass}>{bodyType}</code></span><textarea className={fieldTextareaClass} value={body} onChange={(event) => setBody(event.target.value)} spellCheck={false} /></label>}
         </div>
-        {personalToken && !orgId && <p className="api-try-guidance">Personal access tokens require an organization ID. Find it in <strong>Settings → General</strong> or in your Axiom app URL. <Link href="/docs/reference/tokens#determine-organization-id">Learn more</Link>.</p>}
-        <div className="api-try-actions"><button type="button" disabled={pending || !token || (personalToken && !orgId)} onClick={runRequest}>{pending ? <LoaderCircle className="api-try-spinner" size={13} /> : <Play size={12} />}{pending ? 'Running…' : `Run ${method.toUpperCase()} request`}</button></div>
-        {error && <p className="api-try-error" role="alert">{error}</p>}
-        {result && <div className="api-try-result"><div><span className={result.status >= 200 && result.status < 300 ? 'status-dot success' : 'status-dot error'} /><strong>{result.status} {result.statusText}</strong><small>{result.contentType}</small></div><pre><code>{prettyBody(result.body, result.contentType)}</code></pre></div>}
+        {personalToken && !orgId && <p className="api-try-guidance mt-3! mx-0! mb-0! py-[9px] px-2.5 border-l-2 border-l-(--amber-500) text-(--text-secondary)! bg-(--bg-inert) font-sans! text-[11px]! leading-[18px]! font-normal!">Personal access tokens require an organization ID. Find it in <strong className="text-(--text-primary) font-semibold">Settings → General</strong> or in your Axiom app URL. <Link className="text-(--text-primary)! underline! underline-offset-2" href="/docs/reference/tokens#determine-organization-id">Learn more</Link>.</p>}
+        <div className="api-try-actions mt-[14px] flex justify-end"><button className="h-[30px] px-2.5 py-0 inline-flex items-center gap-[7px] border-0 rounded-[4px] text-(--text-on-inverse-primary) bg-(--bg-emph-primary-inverse) cursor-pointer font-sans! text-[11px]! leading-4! font-semibold! disabled:opacity-45 disabled:cursor-not-allowed" type="button" disabled={pending || !token || (personalToken && !orgId)} onClick={runRequest}>{pending ? <LoaderCircle className="api-try-spinner animate-spin [animation-duration:0.8s]" size={13} /> : <Play size={12} />}{pending ? 'Running…' : `Run ${method.toUpperCase()} request`}</button></div>
+        {error && <p className="api-try-error mt-3! mx-0! mb-0! py-[9px] px-2.5 border-l-2 border-l-(--red-400) text-(--red-400)! bg-(--bg-inert) font-mono! text-[11px]! leading-[17px]! font-[450]!" role="alert">{error}</p>}
+        {result && <div className="api-try-result mt-[14px] overflow-hidden border border-(--border-primary) rounded-[4px] bg-(--bg-canvas)"><div className="min-h-[34px] py-[7px] px-2.5 flex items-center gap-2 border-b border-b-(--border-primary)"><span className={cn(result.status >= 200 && result.status < 300 ? 'status-dot success bg-(--green-500)' : 'status-dot error bg-(--red-400)', 'size-2 inline-block rounded-[999px]')} /><strong className="text-(--text-secondary) font-mono text-[11px] leading-4 font-[550]">{result.status} {result.statusText}</strong><small className="ml-auto text-(--text-quaternary) font-mono text-[10px] leading-[14px] font-[450] uppercase">{result.contentType}</small></div><pre className="max-h-[420px] m-0! p-[14px]! overflow-auto border-0! bg-transparent! text-(--text-primary)! font-mono! text-[12px]! leading-5! font-normal!"><code className="p-0! border-0! bg-transparent! text-inherit! [font:inherit]!">{prettyBody(result.body, result.contentType)}</code></pre></div>}
       </div>
     </details>
   );
diff --git a/components/app-cards.tsx b/components/app-cards.tsx
new file mode 100644
index 000000000..b2a40028a
--- /dev/null
+++ b/components/app-cards.tsx
@@ -0,0 +1,34 @@
+import { createElement, type ReactNode } from 'react';
+import { ZoneLink } from '@/components/zone-link';
+import { INTEGRATION_ICONS, IntegrationIcon } from '@/components/integration-icons';
+import { docIconStrokeWidth, resolveDocIcon } from '@/lib/doc-icons';
+
+// Extensions/apps catalog cards, styled like the landing quick-cards: brand
+// glyph top-left (INTEGRATION_ICONS, lucide fallback for brands simple-icons
+// lacks), title, one-line description. Deliberately separate from the generic
+// <Card>/<CardGroup> mapping, which keeps fumadocs' look.
+export function AppCards({ children }: { children: ReactNode }) {
+  return <div className="app-cards not-prose my-6 grid grid-cols-2 gap-4 max-sm:grid-cols-1">{children}</div>;
+}
+
+export function AppCard({ title, icon, href = '', children }: { title: ReactNode; icon?: string; href?: string; children?: ReactNode }) {
+  const brand = icon && icon in INTEGRATION_ICONS;
+  const lucide = !brand ? resolveDocIcon(icon) : undefined;
+  return (
+    <ZoneLink
+      href={href}
+      prefetch={false}
+      className="app-card p-5 flex flex-col gap-1.5 rounded-[6px] bg-(--bg-surface) transition-[background-color] duration-150 ease-[ease] [&:hover]:bg-(--bg-raised)"
+    >
+      {(brand || lucide) && (
+        <span className="app-card-icon mb-2.5 flex text-(--text-tertiary) transition-colors duration-150 ease-[ease] [.app-card:hover_&]:text-(--text-primary)">
+          {brand
+            ? <IntegrationIcon slug={icon!} size={20} />
+            : createElement(lucide!, { size: 20, strokeWidth: docIconStrokeWidth(undefined), 'aria-hidden': true })}
+        </span>
+      )}
+      <strong className="text-(--text-primary) font-sans text-[15px] leading-5 font-semibold tracking-[-.01em]">{title}</strong>
+      <div className="text-(--text-tertiary) font-sans text-[13px] leading-5 font-normal [&_p]:m-0">{children}</div>
+    </ZoneLink>
+  );
+}
diff --git a/components/article-footer.tsx b/components/article-footer.tsx
index d4792a9ab..35112d9e8 100644
--- a/components/article-footer.tsx
+++ b/components/article-footer.tsx
@@ -1,13 +1,35 @@
 'use client';
 
 import { ZoneLink as Link } from '@/components/zone-link';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { ArrowLeft, ArrowRight, ArrowUpRight, ThumbsDown, ThumbsUp } from 'lucide-react';
 import { useState } from 'react';
 import { captureDocsEvent } from '@/lib/docs-analytics';
 import type { AdjacentNavigationItem } from '@/lib/navigation';
 
 type Feedback = 'yes' | 'no';
 
+// Hover states use `[&:hover]` / explicit-ancestor variants instead of
+// `hover:` / `group-hover:`, which Tailwind v4 compiles inside
+// `@media (hover: hover)` — coarse-pointer devices (and Playwright's Pixel 7
+// project) must keep the unconditional behaviour.
+
+// Borderless adjacent-page links: the hover tint bleeds past the text column
+// via the negative inline margin, so idle they read as plain text.
+// flex-col-reverse: the kicker sits first in the DOM (screen readers and the
+// e2e accessible-name queries hear "Previous <title>") while the title renders
+// on top.
+const PAGINATION_LINK =
+  'min-w-0 -mx-3.5 px-3.5 py-3 flex flex-col-reverse gap-1.5 rounded-[6px] no-underline transition-[background-color] duration-150 ease-[ease] [&:hover]:bg-(--bg-inert)';
+const PAGINATION_KICKER =
+  'inline-flex items-center gap-1.5 text-(--text-quaternary) font-mono text-[10px] leading-[14px] font-medium tracking-[.05em] uppercase transition-colors duration-150 ease-[ease] [.article-pagination_a:hover_&]:text-(--text-tertiary)';
+const PAGINATION_TITLE =
+  'max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-(--text-secondary) font-sans text-[15px] leading-[21px] font-[550] tracking-[-.008em] transition-colors duration-150 ease-[ease] [.article-pagination_a:hover_&]:text-(--text-primary)';
+const PAGINATION_ARROW =
+  'flex-none transition-transform duration-150 ease-[ease]';
+const FEEDBACK_BUTTON =
+  'h-7 px-2.5 inline-flex items-center gap-1.5 border-0 rounded-[4px] text-(--text-tertiary) bg-(--bg-emph-tertiary) font-sans text-[12px] leading-4 font-medium cursor-pointer transition-[background-color,color] duration-150 ease-[ease] [&:hover:not(:disabled)]:text-(--text-primary) [&:hover:not(:disabled)]:bg-(--bg-emph-secondary) aria-pressed:text-(--color-accent-text) aria-pressed:bg-[color-mix(in_srgb,var(--color-accent)_13%,transparent)] disabled:cursor-default disabled:aria-[pressed=false]:opacity-45';
+
 export function ArticleFooter({
   pageHref,
   pageTitle,
@@ -34,44 +56,58 @@ export function ArticleFooter({
   }
 
   return (
-    <footer className="article-footer">
-      {(previous || next) && (
-        <nav className="article-pagination" aria-label="Adjacent documentation pages">
-          {previous && (
-            <Link href={previous.href} prefetch={false} className="article-previous">
-              <ArrowLeft size={15} aria-hidden="true" />
-              <span><small>Previous</small><strong>{previous.title}</strong></span>
-            </Link>
-          )}
-          {next && (
-            <Link href={next.href} prefetch={false} className="article-next">
-              <span><small>Next</small><strong>{next.title}</strong></span>
-              <ArrowRight size={15} aria-hidden="true" />
-            </Link>
-          )}
-        </nav>
-      )}
-
-      <div className="article-footer-meta">
-        <div className="page-feedback">
-          <span>Was this page helpful?</span>
-          <div className="page-feedback-actions">
-            <button type="button" aria-label="Yes, this page was helpful" aria-pressed={feedback === 'yes'} disabled={feedback !== null} onClick={() => submitFeedback('yes')}>Yes</button>
-            <button type="button" aria-label="No, this page was not helpful" aria-pressed={feedback === 'no'} disabled={feedback !== null} onClick={() => submitFeedback('no')}>No</button>
+    <footer className="article-footer mt-20 text-(--text-quaternary) font-mono text-xs leading-4 font-[450]">
+      <div className="article-footer-meta flex items-center justify-between gap-x-6 gap-y-3 flex-wrap">
+        <div className="page-feedback flex items-center gap-3 text-(--text-tertiary) max-sm:flex-wrap">
+          <span className="text-(--text-secondary) font-sans text-[13px] leading-4 font-[550] max-sm:w-full">Was this page helpful?</span>
+          <div className="page-feedback-actions flex gap-1.5">
+            <button type="button" className={FEEDBACK_BUTTON} aria-label="Yes, this page was helpful" aria-pressed={feedback === 'yes'} disabled={feedback !== null} onClick={() => submitFeedback('yes')}>
+              <ThumbsUp size={12} aria-hidden="true" />
+              Yes
+            </button>
+            <button type="button" className={FEEDBACK_BUTTON} aria-label="No, this page was not helpful" aria-pressed={feedback === 'no'} disabled={feedback !== null} onClick={() => submitFeedback('no')}>
+              <ThumbsDown size={12} aria-hidden="true" />
+              No
+            </button>
           </div>
-          {feedback && <span className="page-feedback-thanks" role="status">Thanks for the feedback.</span>}
+          {feedback && <span className="page-feedback-thanks text-(--text-quaternary)" role="status">Thanks for the feedback.</span>}
         </div>
         <div className="article-footer-links">
           <a
             href={editHref}
             target="_blank"
             rel="noreferrer"
+            className="inline-flex items-center gap-1 text-(--text-quaternary) no-underline transition-colors duration-150 ease-[ease] [&:hover]:text-(--text-secondary)"
             onClick={() => captureDocsEvent('docs_edit_opened', { page_path: pageHref })}
           >
             Suggest edits on GitHub
+            <ArrowUpRight size={12} aria-hidden="true" />
           </a>
         </div>
       </div>
+
+      {(previous || next) && (
+        <nav className="article-pagination mt-8 grid grid-cols-2 gap-6 max-sm:grid-cols-[1fr]" aria-label="Adjacent documentation pages">
+          {previous && (
+            <Link href={previous.href} prefetch={false} className={cn('article-previous items-start', PAGINATION_LINK)}>
+              <small className={PAGINATION_KICKER}>
+                <ArrowLeft size={11} aria-hidden="true" className={cn(PAGINATION_ARROW, '[.article-previous:hover_&]:-translate-x-0.5')} />
+                Previous
+              </small>
+              <strong className={PAGINATION_TITLE}>{previous.title}</strong>
+            </Link>
+          )}
+          {next && (
+            <Link href={next.href} prefetch={false} className={cn('article-next col-[2] items-end text-right max-sm:col-[1]', PAGINATION_LINK)}>
+              <small className={PAGINATION_KICKER}>
+                Next
+                <ArrowRight size={11} aria-hidden="true" className={cn(PAGINATION_ARROW, '[.article-next:hover_&]:translate-x-0.5')} />
+              </small>
+              <strong className={PAGINATION_TITLE}>{next.title}</strong>
+            </Link>
+          )}
+        </nav>
+      )}
     </footer>
   );
 }
diff --git a/components/copy-button.tsx b/components/copy-button.tsx
index c78878efb..53dbf4e43 100644
--- a/components/copy-button.tsx
+++ b/components/copy-button.tsx
@@ -20,7 +20,7 @@ export function CopyButton({
   const [copied, setCopied] = useState(false);
   return (
     <button
-      className="copy-button"
+      className="copy-button ml-auto p-1 inline-flex items-center gap-1.5 border-0 text-(--text-quaternary) bg-transparent cursor-pointer font-mono! text-[11px]! leading-4! font-[450]! hover:text-(--text-primary)"
       type="button"
       aria-label={`${label} to clipboard`}
       onClick={async () => {
diff --git a/components/copy-page.tsx b/components/copy-page.tsx
index b88140fa4..5178e8140 100644
--- a/components/copy-page.tsx
+++ b/components/copy-page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
 import { Check, ChevronDown, Copy, FileText, MessageSquare } from 'lucide-react';
 import { toast } from 'sonner';
 import { captureDocsEvent } from '@/lib/docs-analytics';
@@ -11,25 +12,46 @@ import { useDocsSearchController } from '@/components/docs-search-provider';
 // URL is unreachable from the assistant's fetcher.
 const SITE_ORIGIN = 'https://axiom.co';
 
+// Hover states are written as `[&:hover]` / explicit-ancestor variants instead
+// of `hover:` / `group-hover:`: Tailwind v4 wraps those in
+// `@media (hover: hover)`, while the hand-written CSS they replace applied on
+// every pointer type. `!` marks the declarations that would otherwise lose to
+// unlayered element defaults (`button { font: inherit }`,
+// `a { color: inherit; text-decoration: none }`, `small { … }`, `hr { … }`),
+// which always beat Tailwind's `@layer utilities` regardless of specificity.
+
+// Utilities shared by every row / icon in the popover (was
+// `.copy-page-popover button, .copy-page-popover a` and friends).
+const POPOVER_ITEM =
+  'w-full px-[9px] py-[7px] flex items-center gap-2.5 border-0 rounded-[4px] text-(--text-secondary)! bg-transparent text-left no-underline! cursor-pointer [&:hover]:bg-(--bg-emph-tertiary) focus-visible:outline-2 focus-visible:outline-(--color-accent) focus-visible:outline-offset-[-2px]';
+const POPOVER_ITEM_TITLE =
+  'min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-(--text-primary) font-sans text-[13px] leading-[17px] font-[550] tracking-[-.006em]';
+const POPOVER_ICON =
+  'flex-none text-(--icon-secondary) [.copy-page-popover_button:hover_&]:text-(--text-primary) [.copy-page-popover_a:hover_&]:text-(--text-primary)';
+const POPOVER_BRAND = `copy-page-brand w-[15px] h-[15px] ${POPOVER_ICON}`;
+// Shared by the copy button and the menu trigger.
+const TRIGGER_FOCUS =
+  'focus-visible:outline-2 focus-visible:outline-(--color-accent) focus-visible:outline-offset-2 focus-visible:z-[1]';
+
 // Monochrome brand marks (currentColor). Anthropic + OpenAI from simple-icons;
 // Grok from svgl. External AI links open the page as context in that tool.
 function ClaudeIcon() {
   return (
-    <svg className="copy-page-brand" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <svg className={POPOVER_BRAND} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
       <path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
     </svg>
   );
 }
 function ChatGptIcon() {
   return (
-    <svg className="copy-page-brand" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <svg className={POPOVER_BRAND} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
       <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
     </svg>
   );
 }
 function GrokIcon() {
   return (
-    <svg className="copy-page-brand" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true">
+    <svg className={POPOVER_BRAND} viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true">
       <path d="M395.479 633.828L735.91 381.105C752.599 368.715 776.454 373.548 784.406 392.792C826.26 494.285 807.561 616.253 724.288 699.996C641.016 783.739 525.151 802.104 419.247 760.277L303.556 814.143C469.49 928.202 670.987 899.995 796.901 773.282C896.776 672.843 927.708 535.937 898.785 412.476L899.047 412.739C857.105 231.37 909.358 158.874 1016.4 10.6326C1018.93 7.11771 1021.47 3.60279 1024 0L883.144 141.651V141.212L395.392 633.916" />
       <path d="M325.226 695.251C206.128 580.84 226.662 403.776 328.285 301.668C403.431 226.097 526.549 195.254 634.026 240.596L749.454 186.994C728.657 171.88 702.007 155.623 671.424 144.2C533.19 86.9942 367.693 115.465 255.323 228.382C147.234 337.081 113.244 504.215 171.613 646.833C215.216 753.423 143.739 828.818 71.7385 904.916C46.2237 931.893 20.6216 958.87 0 987.429L325.139 695.339" />
     </svg>
@@ -98,38 +120,33 @@ export function CopyPageMenu({ markdownPath }: { markdownPath: string }) {
   }
 
   return (
-    <div className="copy-page">
-      <button type="button" className="copy-page-main" onClick={copyPage}>
+    <div className="copy-page relative ml-auto flex shrink-0 max-sm:hidden">
+      <button type="button" className={cn('copy-page-main h-[30px] px-[11px] py-0 inline-flex items-center gap-[7px] border border-(--border-primary) rounded-l-[4px] rounded-r-none text-(--text-tertiary) bg-(--bg-surface) font-sans! text-[13px]! leading-4! font-medium! cursor-pointer [&:hover]:text-(--text-primary) [&:hover]:bg-(--bg-inert)', TRIGGER_FOCUS)} onClick={copyPage}>
         {copied ? <Check size={14} /> : <Copy size={14} />}
         <span>{copied ? 'Copied' : 'Copy page'}</span>
       </button>
-      <details className="copy-page-menu" ref={menu}>
-        <summary role="button" aria-haspopup="menu" aria-label="More page actions"><ChevronDown size={14} /></summary>
-        <div className="copy-page-popover" role="menu" aria-label="Page actions">
-          <button type="button" role="menuitem" onClick={copyPage}>
-            <Copy size={15} />
-            <span><strong>Copy page</strong><small>Copy this page as Markdown for LLMs</small></span>
-          </button>
-          <a role="menuitem" href={markdownPath} target="_blank" rel="noreferrer" onClick={() => chooseAction('view_markdown')}>
-            <FileText size={15} />
-            <span><strong>View as Markdown</strong><small>Open this page as plain text</small></span>
+      <details className="copy-page-menu group/menu" ref={menu}>
+        <summary role="button" aria-haspopup="menu" aria-label="More page actions" className={cn('h-[30px] w-[27px] inline-flex items-center justify-center border border-(--border-primary) border-l-0 rounded-l-none rounded-r-[4px] text-(--text-quaternary) bg-(--bg-surface) cursor-pointer list-none [&::-webkit-details-marker]:hidden [&:hover]:text-(--text-primary) [&:hover]:bg-(--bg-inert) group-open/menu:text-(--text-primary) group-open/menu:bg-(--bg-inert)', TRIGGER_FOCUS)}><ChevronDown size={14} /></summary>
+        <div className="copy-page-popover hidden group-open/menu:block absolute top-[34px] right-0 z-[70] w-[220px] p-[5px] border border-(--border-primary) rounded-[6px] bg-(--bg-overlay) shadow-[0_8px_28px_rgba(0,0,0,.28)]" role="menu" aria-label="Page actions">
+          <a role="menuitem" className={POPOVER_ITEM} href={markdownPath} target="_blank" rel="noreferrer" onClick={() => chooseAction('view_markdown')}>
+            <FileText size={15} className={POPOVER_ICON} />
+            <span className={POPOVER_ITEM_TITLE}>View as Markdown</span>
           </a>
-          <button type="button" role="menuitem" onClick={askAiAboutPage}>
-            <MessageSquare size={15} />
-            <span><strong>Ask AI about this page</strong><small>Chat with this page as context</small></span>
+          <button type="button" role="menuitem" className={POPOVER_ITEM} onClick={askAiAboutPage}>
+            <MessageSquare size={15} className={POPOVER_ICON} />
+            <span className={POPOVER_ITEM_TITLE}>Ask AI about this page</span>
           </button>
-          <hr />
-          <a role="menuitem" href={`https://claude.ai/new?q=${assistantPrompt}`} target="_blank" rel="noreferrer" onClick={() => chooseAction('open_claude')}>
+          <a role="menuitem" className={POPOVER_ITEM} href={`https://claude.ai/new?q=${assistantPrompt}`} target="_blank" rel="noreferrer" onClick={() => chooseAction('open_claude')}>
             <ClaudeIcon />
-            <span><strong>Open in Claude</strong><small>Ask Claude about this page</small></span>
+            <span className={POPOVER_ITEM_TITLE}>Open in Claude</span>
           </a>
-          <a role="menuitem" href={`https://chatgpt.com/?hints=search&q=${assistantPrompt}`} target="_blank" rel="noreferrer" onClick={() => chooseAction('open_chatgpt')}>
+          <a role="menuitem" className={POPOVER_ITEM} href={`https://chatgpt.com/?hints=search&q=${assistantPrompt}`} target="_blank" rel="noreferrer" onClick={() => chooseAction('open_chatgpt')}>
             <ChatGptIcon />
-            <span><strong>Open in ChatGPT</strong><small>Ask ChatGPT about this page</small></span>
+            <span className={POPOVER_ITEM_TITLE}>Open in ChatGPT</span>
           </a>
-          <a role="menuitem" href={`https://grok.com/?q=${assistantPrompt}`} target="_blank" rel="noreferrer" onClick={() => chooseAction('open_grok')}>
+          <a role="menuitem" className={POPOVER_ITEM} href={`https://grok.com/?q=${assistantPrompt}`} target="_blank" rel="noreferrer" onClick={() => chooseAction('open_grok')}>
             <GrokIcon />
-            <span><strong>Open in Grok</strong><small>Ask Grok about this page</small></span>
+            <span className={POPOVER_ITEM_TITLE}>Open in Grok</span>
           </a>
         </div>
       </details>
diff --git a/components/docs-assistant.tsx b/components/docs-assistant.tsx
index 9d59cc0b4..94eeb196b 100644
--- a/components/docs-assistant.tsx
+++ b/components/docs-assistant.tsx
@@ -32,12 +32,55 @@ import {
   safeDocsPath,
 } from '@/lib/docs-analytics';
 import { docsApiPath } from '@/lib/docs-paths';
+import { cn } from '@/lib/utils';
 
 type AssistantSource = {
   title: string;
   url: string;
 };
 
+// Styles for Streamdown's rendered markdown, expressed as descendant variants on
+// the wrapper because the elements themselves are Streamdown's to render.
+// Wrapper variants (`.x h1`) outrank the utility classes Streamdown puts on the
+// elements (`.text-3xl`), so no `!` is needed except against Shiki's inline
+// `background`/`color` styles on <pre>.
+const AI_MARKDOWN_CLASS = cn(
+  'docs-ai-markdown text-(--text-secondary) font-sans text-[14px] leading-[22px] font-normal',
+  '[&>:first-child]:mt-0! [&>:last-child]:mb-0!',
+  // Streamdown ships a full-page heading scale; inside a 700px panel it reads
+  // as oversized, so re-anchor headings to the Axiom docs scale.
+  '[&_:is(h1,h2,h3,h4,h5,h6)]:text-(--text-primary) [&_:is(h1,h2,h3,h4,h5,h6)]:font-sans [&_:is(h1,h2,h3,h4,h5,h6)]:font-medium [&_:is(h1,h2,h3,h4,h5,h6)]:tracking-[-.01em]',
+  '[&_h1]:mt-[22px] [&_h1]:mb-2 [&_h1]:text-[16px] [&_h1]:leading-6',
+  '[&_h2]:mt-[18px] [&_h2]:mb-[7px] [&_h2]:text-[14px] [&_h2]:leading-[21px]',
+  '[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:text-[13px] [&_h3]:leading-5',
+  '[&_:is(h4,h5,h6)]:mt-[14px] [&_:is(h4,h5,h6)]:mb-[5px] [&_:is(h4,h5,h6)]:text-[12px] [&_:is(h4,h5,h6)]:leading-[18px]',
+  '[&_:is(h1,h2,h3):first-child]:mt-0',
+  '[&_:where(p,ul,ol)]:m-0 [&_:where(p,ul,ol)]:mb-[11px] [&_:where(ul,ol)]:ps-[18px]',
+  '[&_li]:my-[3px] [&_li]:ps-0.5 [&_li]:marker:text-(--text-quaternary) [&_li>p]:m-0 [&_li>p]:mb-1 [&_li:last-child]:mb-0',
+  '[&_:is(ul,ol)_:is(ul,ol)]:m-0 [&_:is(ul,ol)_:is(ul,ol)]:mt-[3px]',
+  '[&_hr]:my-4 [&_hr]:border-0 [&_hr]:border-t [&_hr]:border-t-(--border-secondary)',
+  '[&_blockquote]:m-0 [&_blockquote]:mb-[11px] [&_blockquote]:ps-[11px] [&_blockquote]:border-l-2 [&_blockquote]:border-l-(--border-strong) [&_blockquote]:text-(--text-tertiary)',
+  '[&_table]:w-full [&_table]:m-0 [&_table]:mb-3 [&_table]:border-collapse [&_table]:text-[12.5px]',
+  '[&_:where(th,td)]:py-[5px] [&_:where(th,td)]:px-2 [&_:where(th,td)]:border [&_:where(th,td)]:border-(--border-secondary) [&_:where(th,td)]:text-left',
+  '[&_th]:text-(--text-primary) [&_th]:bg-(--bg-inert) [&_th]:font-semibold',
+  '[&_strong]:text-(--text-primary) [&_strong]:font-semibold',
+  '[&_a]:text-(--text-primary) [&_a]:underline [&_a]:decoration-(--border-strong) [&_a]:underline-offset-[3px] [&_a:hover]:decoration-(--color-accent)',
+  '[&_code:not(pre_code)]:py-px [&_code:not(pre_code)]:px-1 [&_code:not(pre_code)]:border [&_code:not(pre_code)]:border-(--border-primary) [&_code:not(pre_code)]:rounded-[3px] [&_code:not(pre_code)]:text-(--text-primary) [&_code:not(pre_code)]:bg-(--bg-inert) [&_code:not(pre_code)]:font-mono [&_code:not(pre_code)]:text-[12px] [&_code:not(pre_code)]:leading-[18px] [&_code:not(pre_code)]:font-[450]',
+  // Streamdown nests a bordered, rounded body inside an already-bordered,
+  // rounded shell, which reads as a double frame. Collapse it to a single Axiom
+  // surface. The header row and its buttons are left exactly as they are.
+  // The actions row overlays the header via -mt-10, which assumes Streamdown's
+  // h-8 header plus its gap-2. Keep that 8px gap intact and pad the header and
+  // body identically so the language label lines up with the code gutter.
+  "[&_[data-streamdown='code-block']]:my-3 [&_[data-streamdown='code-block']]:p-0 [&_[data-streamdown='code-block']]:gap-2 [&_[data-streamdown='code-block']]:overflow-hidden [&_[data-streamdown='code-block']]:border [&_[data-streamdown='code-block']]:border-(--border-primary) [&_[data-streamdown='code-block']]:rounded-[4px] [&_[data-streamdown='code-block']]:bg-(--bg-surface)",
+  "[&_[data-streamdown='code-block-header']]:py-0 [&_[data-streamdown='code-block-header']]:px-3 [&_[data-streamdown='code-block-header']]:text-(--text-tertiary) [&_[data-streamdown='code-block-header']]:font-mono [&_[data-streamdown='code-block-header']]:text-[11px] [&_[data-streamdown='code-block-header']]:leading-4 [&_[data-streamdown='code-block-header']]:font-[450]",
+  "[&_[data-streamdown='code-block-header']>span]:ms-0 [&_[data-streamdown='code-block-header']+div]:pe-2",
+  "[&_[data-streamdown='code-block-actions']]:border-(--border-secondary) [&_[data-streamdown='code-block-actions']]:bg-(--bg-raised)",
+  "[&_[data-streamdown='code-block-body']]:m-0 [&_[data-streamdown='code-block-body']]:pt-0 [&_[data-streamdown='code-block-body']]:px-3 [&_[data-streamdown='code-block-body']]:pb-3 [&_[data-streamdown='code-block-body']]:border-0 [&_[data-streamdown='code-block-body']]:rounded-none [&_[data-streamdown='code-block-body']]:bg-transparent",
+  '[&_pre]:m-0! [&_pre]:p-0 [&_pre]:bg-transparent!',
+  '[&_:is(pre,pre_code)]:font-mono [&_:is(pre,pre_code)]:text-[12px] [&_:is(pre,pre_code)]:leading-[19px] [&_:is(pre,pre_code)]:font-[450]',
+);
+
 type DocsAssistantPanelProps = {
   open: boolean;
   draft: string;
@@ -140,28 +183,35 @@ export function DocsAssistantPanel({
       id="docs-assistant-panel"
       role="tabpanel"
       aria-labelledby="docs-assistant-tab"
-      className="docs-assistant-panel docs-ai-surface"
+      className="docs-assistant-panel docs-ai-surface min-h-0 flex-1 grid grid-rows-[minmax(0,1fr)_auto] bg-(--bg-canvas)"
     >
       <MessageScrollerProvider autoScroll>
-        <MessageScroller className="docs-assistant-scroller">
+        <MessageScroller className="docs-assistant-scroller relative min-h-0">
           <MessageScrollerViewport
-            className="docs-assistant-messages scroll-fade-t"
+            className="docs-assistant-messages scroll-fade-t min-h-0 h-full overflow-y-auto pt-[22px] px-6 pb-7 overscroll-contain max-sm:pt-[18px] max-sm:px-[14px] max-sm:pb-6"
             aria-label="AI assistant conversation"
           >
-            <MessageScrollerContent className="docs-assistant-thread" aria-busy={isBusy}>
+            <MessageScrollerContent
+              className="docs-assistant-thread min-h-full flex flex-col gap-[22px]"
+              aria-busy={isBusy}
+            >
               {messages.length > 0 && (
                 <MessageScrollerItem>
-                  <button type="button" className="docs-search-clear" onClick={() => chat.setMessages([])}>
+                  <button
+                    type="button"
+                    className="docs-search-clear ml-auto py-1 px-[7px] border-0 rounded-[3px] text-(--text-tertiary) bg-transparent font-sans text-[12px] leading-4 font-medium cursor-pointer hover:text-(--text-primary) hover:bg-(--bg-emph-tertiary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) max-md:min-h-11 max-sm:text-[14px]"
+                    onClick={() => chat.setMessages([])}
+                  >
                     Clear conversation
                   </button>
                 </MessageScrollerItem>
               )}
               {messages.length === 0 ? (
-                <MessageScrollerItem className="docs-assistant-empty-item">
-                  <div className="docs-assistant-empty">
-                    <strong>Ask Axiom Docs</strong>
-                    <p>Get an answer assembled from the documentation, with links to the pages used.</p>
-                    <p className="docs-assistant-note">The assistant searches public documentation only. Don’t include tokens or sensitive data.</p>
+                <MessageScrollerItem className="docs-assistant-empty-item flex flex-auto shrink items-center justify-center">
+                  <div className="docs-assistant-empty flex flex-col items-center justify-center text-center">
+                    <strong className="text-(--text-primary) font-sans text-[18px] leading-6 font-semibold tracking-[-.01em]">Ask Axiom Docs</strong>
+                    <p className="max-w-[420px] m-0 mt-2 text-(--text-tertiary) font-sans text-[13px] leading-5 font-normal">Get an answer assembled from the documentation, with links to the pages used.</p>
+                    <p className="docs-assistant-note max-w-[460px] m-0 mt-5 text-(--text-quaternary) font-mono text-[11px] leading-[17px] font-[450]">The assistant searches public documentation only. Don’t include tokens or sensitive data.</p>
                   </div>
                 </MessageScrollerItem>
               ) : (
@@ -177,38 +227,45 @@ export function DocsAssistantPanel({
               )}
               {chat.status === 'submitted' && (
                 <MessageScrollerItem>
-                  <div className="docs-assistant-working" role="status">
-                    <span />
+                  <div
+                    className="docs-assistant-working py-[7px] px-0 flex items-center gap-2 text-(--text-tertiary) font-mono text-[11px] leading-4 font-[450]"
+                    role="status"
+                  >
+                    <span className="size-1.5 flex-none border border-(--color-accent) animate-[docs-assistant-pulse_1s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:bg-(--color-accent)" />
                     <span className="shimmer shimmer-duration-1600">Searching Axiom Docs…</span>
                   </div>
                 </MessageScrollerItem>
               )}
               {chat.error && (
                 <MessageScrollerItem>
-                  <div className="docs-assistant-error" role="alert">
-                    <strong>The assistant couldn’t answer.</strong>
+                  <div
+                    className="docs-assistant-error px-[11px] py-[10px] flex flex-col gap-1 border border-[color-mix(in_srgb,var(--color-destructive)_50%,transparent)] rounded-[4px] text-(--text-tertiary) bg-[color-mix(in_srgb,var(--color-destructive)_7%,transparent)] font-sans text-[12px] leading-[18px] font-[450]"
+                    role="alert"
+                  >
+                    <strong className="text-(--text-primary) font-semibold">The assistant couldn’t answer.</strong>
                     <span>You can retry or continue with regular search.</span>
-                    <div>
-                      <button type="button" onClick={retry}><RefreshCw size={13} /> Retry</button>
-                      <button type="button" onClick={onUseSearch}>Use search</button>
+                    <div className="mt-[5px] flex gap-1.5">
+                      <button type="button" onClick={retry} className="px-[7px] py-1 inline-flex items-center gap-[5px] border border-(--border-primary) rounded-[3px] text-(--text-secondary) bg-(--bg-surface) font-sans text-[11px] leading-4 font-medium cursor-pointer max-md:min-h-[44px]"><RefreshCw size={13} /> Retry</button>
+                      <button type="button" onClick={onUseSearch} className="px-[7px] py-1 inline-flex items-center gap-[5px] border border-(--border-primary) rounded-[3px] text-(--text-secondary) bg-(--bg-surface) font-sans text-[11px] leading-4 font-medium cursor-pointer max-md:min-h-[44px]">Use search</button>
                     </div>
                   </div>
                 </MessageScrollerItem>
               )}
             </MessageScrollerContent>
           </MessageScrollerViewport>
-          <MessageScrollerButton className="docs-assistant-scroll-button" />
+          <MessageScrollerButton className="docs-assistant-scroll-button absolute right-4 bottom-3 data-[direction=end]:bottom-3 z-[2]" />
         </MessageScroller>
       </MessageScrollerProvider>
-      <div className="docs-assistant-footer">
+      <div className="docs-assistant-footer bg-(--bg-surface)">
       <PromptInput
-        className="docs-assistant-composer"
-        inputGroupClassName="docs-assistant-input-wrap"
+        className="docs-assistant-composer [box-shadow:none]"
+        inputGroupClassName="docs-assistant-input-wrap min-h-[64px] h-auto py-3 pr-3 pl-4 flex items-start gap-2 border-0 border-t border-(--border-strong) rounded-none has-[textarea]:rounded-none bg-transparent dark:bg-transparent [box-shadow:none] transition-[border-color] duration-(--duration-1) ease-(--ease-out) focus-within:border-(--color-accent) has-[[data-slot=input-group-control]:focus-visible]:border-(--color-accent) has-[[data-slot=input-group-control]:focus-visible]:ring-0 max-sm:pl-3"
         onSubmit={submit}
       >
         <PromptInputBody>
           <PromptInputTextarea
             id="docs-assistant-input"
+            className="w-full max-h-[128px] min-h-[44px] py-0.5 px-0 resize-none border-0 outline-0 text-(--text-primary) bg-transparent dark:bg-transparent font-sans text-[14px] md:text-[14px] leading-[21px] font-[450] placeholder:text-(--text-tertiary) placeholder:opacity-100"
             value={draft}
             maxLength={4_000}
             aria-label="Ask Axiom Docs"
@@ -217,6 +274,17 @@ export function DocsAssistantPanel({
             onChange={(event) => onDraftChange(event.currentTarget.value)}
           />
           <PromptInputSubmit
+            className={cn(
+              // `.docs-assistant-input-wrap button` — matched every button, both
+              // states. outline-solid is required: Button's base `outline-none`
+              // sets --tw-outline-style: none, which outline-2 alone inherits.
+              'hover:not-disabled:opacity-[.88] active:not-disabled:opacity-[.72] focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-(--color-accent) focus-visible:outline-offset-2 disabled:text-(--text-quaternary) disabled:bg-(--bg-emph-tertiary) disabled:cursor-default max-md:size-11',
+              // `.docs-assistant-input-wrap button[type='submit']` — PromptInputSubmit
+              // renders type="button" while streaming, so this half of the rule
+              // never applied to the stop button. Gated to keep that behaviour.
+              !isBusy &&
+                'flex-none size-8 p-0 inline-flex items-center justify-center border border-(--border-primary) focus-visible:border-(--border-primary) rounded-[4px] text-(--text-on-inverse-primary) bg-(--bg-emph-primary-inverse) hover:bg-(--bg-emph-primary-inverse) cursor-pointer transition-[opacity,background] duration-(--duration-1) ease-(--ease-out)',
+            )}
             status={chat.status}
             onStop={stop}
             disabled={!isBusy && !draft.trim()}
@@ -224,7 +292,7 @@ export function DocsAssistantPanel({
           />
         </PromptInputBody>
       </PromptInput>
-        <small className="docs-assistant-disclaimer">Generated from Axiom documentation. Verify critical details.</small>
+        <small className="docs-assistant-disclaimer block mt-2 px-4 pb-2.5 text-(--text-tertiary) font-mono text-[10px] leading-[14px] font-[450] max-sm:px-3">Generated from Axiom documentation. Verify critical details.</small>
       </div>
     </section>
   );
@@ -251,19 +319,25 @@ function AssistantMessage({
 
   if (message.role === 'user') {
     return (
-      <Message from="user" className="docs-assistant-message user">
-        <span>You</span>
-        <MessageContent className="docs-assistant-bubble">{text}</MessageContent>
+      <Message from="user" className="docs-assistant-message user gap-[7px] max-w-[82%] max-sm:max-w-[92%] ml-auto items-end">
+        <span className="text-(--text-tertiary) font-mono text-[10px] leading-[14px] font-semibold tracking-[.06em] uppercase">You</span>
+        <MessageContent className="docs-assistant-bubble border border-(--border-primary) group-[.is-user]:rounded-[4px] group-[.is-user]:px-3 group-[.is-user]:py-[10px] group-[.is-user]:text-(--text-secondary) group-[.is-user]:bg-(--bg-surface) font-sans text-[13px] leading-5 font-[450] whitespace-pre-wrap">{text}</MessageContent>
       </Message>
     );
   }
 
   return (
-    <Message from="assistant" className="docs-assistant-message assistant">
-      <span>Axiom Docs</span>
+    <Message from="assistant" className="docs-assistant-message assistant gap-[7px] max-w-[670px]">
+      <span className="text-(--text-tertiary) font-mono text-[10px] leading-[14px] font-semibold tracking-[.06em] uppercase">Axiom Docs</span>
       <MessageContent>
         {chips.map((chip) => (
-          <div className={chip.failed ? 'docs-assistant-tool error' : 'docs-assistant-tool'} key={chip.key}>
+          <div
+            className={cn(
+              'docs-assistant-tool w-fit px-[7px] py-1 inline-flex items-center gap-1.5 border border-(--border-secondary) rounded-[3px] text-(--text-tertiary) bg-(--bg-inert) font-mono text-[10px] leading-[14px] font-[450]',
+              chip.failed && 'error text-(--text-destructive)',
+            )}
+            key={chip.key}
+          >
             <Search size={12} />
             {/* In-flight lookups shimmer so a slow tool call reads as progress. */}
             <span className={chip.failed ? undefined : 'shimmer shimmer-duration-1600'}>{chip.label}</span>
@@ -273,8 +347,11 @@ function AssistantMessage({
             message sits empty between the last tool finishing and the first
             text delta — which looked like nothing was happening. */}
         {active && !text && chips.length === 0 && (
-          <div className="docs-assistant-working" role="status">
-            <span />
+          <div
+            className="docs-assistant-working py-[7px] px-0 flex items-center gap-2 text-(--text-tertiary) font-mono text-[11px] leading-4 font-[450]"
+            role="status"
+          >
+            <span className="size-1.5 flex-none border border-(--color-accent) animate-[docs-assistant-pulse_1s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:bg-(--color-accent)" />
             <span className="shimmer shimmer-duration-1600">Composing answer…</span>
           </div>
         )}
@@ -283,7 +360,7 @@ function AssistantMessage({
           // behind a confirmation modal. Every URL here comes from our own
           // search_docs/read_docs_page tools and is same-origin /docs, so keep
           // them as real anchors that navigate, as they did before.
-          <MessageResponse className="docs-ai-markdown" linkSafety={{ enabled: false }}>
+          <MessageResponse className={AI_MARKDOWN_CLASS} linkSafety={{ enabled: false }}>
             {text}
           </MessageResponse>
         )}
@@ -292,16 +369,19 @@ function AssistantMessage({
             stripPseudoToolCalls removes. Never leave the message blank: that
             reads as a hang. */}
         {!active && !text && (
-          <div className="docs-assistant-error" role="alert">
-            <strong>The assistant didn’t finish this answer.</strong>
+          <div
+            className="docs-assistant-error px-[11px] py-[10px] flex flex-col gap-1 border border-[color-mix(in_srgb,var(--color-destructive)_50%,transparent)] rounded-[4px] text-(--text-tertiary) bg-[color-mix(in_srgb,var(--color-destructive)_7%,transparent)] font-sans text-[12px] leading-[18px] font-[450]"
+            role="alert"
+          >
+            <strong className="text-(--text-primary) font-semibold">The assistant didn’t finish this answer.</strong>
             <span>
               {hadPseudoToolCalls
                 ? 'It kept trying to look things up instead of replying. Retrying usually works.'
                 : 'No answer came back for this question.'}
             </span>
             {onRetry && (
-              <div>
-                <button type="button" onClick={onRetry}><RefreshCw size={13} /> Retry</button>
+              <div className="mt-[5px] flex gap-1.5">
+                <button type="button" onClick={onRetry} className="px-[7px] py-1 inline-flex items-center gap-[5px] border border-(--border-primary) rounded-[3px] text-(--text-secondary) bg-(--bg-surface) font-sans text-[11px] leading-4 font-medium cursor-pointer max-md:min-h-[44px]"><RefreshCw size={13} /> Retry</button>
               </div>
             )}
           </div>
@@ -318,20 +398,28 @@ function AssistantSources({ sources }: { sources: AssistantSource[] }) {
   const [open, setOpen] = useState(true);
 
   return (
-    <Sources className="docs-assistant-sources" open={open} onOpenChange={setOpen}>
-          <SourcesTrigger count={sources.length} />
-          <SourcesContent className="docs-assistant-sources-list">
+    <Sources
+      className="docs-assistant-sources mt-1 mb-0 pt-[11px] block border-t border-(--border-secondary)"
+      open={open}
+      onOpenChange={setOpen}
+    >
+          <SourcesTrigger
+            count={sources.length}
+            className="mb-2 p-0 border-0 text-(--text-tertiary) bg-transparent font-mono text-[10px] leading-[14px] font-semibold tracking-[.06em] uppercase cursor-pointer hover:text-(--text-primary) [&_p]:[font:inherit] [&_p]:[letter-spacing:inherit]"
+          />
+          <SourcesContent className="docs-assistant-sources-list w-full max-w-full mt-0 flex flex-row flex-wrap gap-[5px]">
             {sources.map((source, index) => (
               <Source
                 href={source.url}
                 key={source.url}
                 title={source.title}
+                className="max-w-full px-1.5 py-0.5 inline-flex items-center gap-1 border border-(--border-primary) rounded-[3px] text-(--text-tertiary) bg-(--bg-inert) font-sans text-[10px] leading-[15px] font-medium hover:border-(--border-strong) hover:text-(--text-primary) hover:bg-(--bg-raised) max-md:min-h-[44px]"
                 onClick={() => captureDocsEvent('docs_ai_source_opened', {
                   destination_path: safeDocsPath(source.url),
                   source_rank: index + 1,
                 })}
               >
-                <span>{source.title}</span><ArrowUpRight size={9} />
+                <span className="overflow-hidden text-ellipsis whitespace-nowrap">{source.title}</span><ArrowUpRight size={9} className="flex-none size-[9px] opacity-75" />
               </Source>
             ))}
       </SourcesContent>
diff --git a/components/docs-search.tsx b/components/docs-search.tsx
index fc6a91537..be6608d01 100644
--- a/components/docs-search.tsx
+++ b/components/docs-search.tsx
@@ -32,9 +32,11 @@ const LazyAssistantPanel = dynamic(
   {
     ssr: false,
     loading: () => (
-      <section id="docs-assistant-panel" role="tabpanel" aria-labelledby="docs-assistant-tab" className="docs-assistant-panel">
-        <div className="docs-assistant-messages">
-          <div className="docs-assistant-working" role="status"><span /> Loading assistant…</div>
+      <section id="docs-assistant-panel" role="tabpanel" aria-labelledby="docs-assistant-tab" className="docs-assistant-panel min-h-0 flex-1 grid grid-rows-[minmax(0,1fr)_auto] bg-(--bg-canvas)">
+        <div className="docs-assistant-messages min-h-0 h-full overflow-y-auto pt-[22px] px-6 pb-7 overscroll-contain max-sm:pt-[18px] max-sm:px-[14px] max-sm:pb-6">
+          <div className="docs-assistant-working py-[7px] px-0 flex items-center gap-2 text-(--text-tertiary) font-mono text-[11px] leading-4 font-[450]" role="status">
+            <span className="size-1.5 flex-none border border-(--color-accent) animate-[docs-assistant-pulse_1s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:bg-(--color-accent)" /> Loading assistant…
+          </div>
         </div>
       </section>
     ),
@@ -64,7 +66,7 @@ export function DocsSearchDialog() {
   return (
     <dialog
       ref={dialogRef}
-      className="docs-search-dialog ph-no-capture"
+      className="docs-search-dialog ph-no-capture m-auto h-[min(650px,calc(100dvh_-_64px))] w-[min(720px,calc(100vw_-_32px))] max-h-none max-w-none overflow-hidden rounded-[4px] border border-(--border-strong) bg-(--bg-overlay) p-0 text-(--text-primary) shadow-[0_16px_48px_rgba(0,0,0,.36)] backdrop:bg-[rgba(0,0,0,.58)] backdrop:backdrop-blur-[2px] max-sm:h-[calc(100dvh_-_12px)] max-sm:w-[calc(100vw_-_12px)]"
       aria-label="Search and ask Axiom Docs"
       data-ph-no-capture
       onCancel={(event) => {
@@ -75,13 +77,14 @@ export function DocsSearchDialog() {
         if (event.target === event.currentTarget) close();
       }}
     >
-      <div className="docs-search-surface">
-        <header className="docs-search-dialog-header">
-          <div className="docs-search-mode-tabs" role="tablist" aria-label="Search mode">
+      <div className="docs-search-surface flex h-full min-h-0 w-full flex-col">
+        <header className="docs-search-dialog-header flex h-12 flex-none items-center gap-2 border-b border-(--border-primary) bg-(--bg-surface) py-0 pr-[10px] pl-[14px] max-sm:h-[52px] max-sm:pr-1.5 max-sm:pl-3">
+          <div className="docs-search-mode-tabs flex h-full items-stretch gap-1 max-sm:gap-0.5" role="tablist" aria-label="Search mode">
             <button
               id="docs-search-tab"
               type="button"
               role="tab"
+              className="relative inline-flex cursor-pointer items-center gap-[7px] border-0 bg-transparent px-[9px] py-0 font-sans! text-[13px]! leading-4! font-medium! text-(--text-tertiary) transition-[color,background] duration-(--duration-1) ease-(--ease-out) hover:text-(--text-secondary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:bg-(--bg-emph-tertiary) aria-selected:font-semibold! aria-selected:text-(--text-primary) aria-selected:after:absolute aria-selected:after:right-0 aria-selected:after:-bottom-px aria-selected:after:left-0 aria-selected:after:h-0.5 aria-selected:after:bg-(--color-accent) aria-selected:after:content-[''] max-sm:min-h-11 max-sm:text-[14px]!"
               aria-selected={mode === 'search'}
               aria-controls="docs-search-panel"
               onClick={() => {
@@ -95,6 +98,7 @@ export function DocsSearchDialog() {
               id="docs-assistant-tab"
               type="button"
               role="tab"
+              className="relative inline-flex cursor-pointer items-center gap-[7px] border-0 bg-transparent px-[9px] py-0 font-sans! text-[13px]! leading-4! font-medium! text-(--text-tertiary) transition-[color,background] duration-(--duration-1) ease-(--ease-out) hover:text-(--text-secondary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:bg-(--bg-emph-tertiary) aria-selected:font-semibold! aria-selected:text-(--text-primary) aria-selected:after:absolute aria-selected:after:right-0 aria-selected:after:-bottom-px aria-selected:after:left-0 aria-selected:after:h-0.5 aria-selected:after:bg-(--color-accent) aria-selected:after:content-[''] max-sm:min-h-11 max-sm:text-[14px]!"
               aria-selected={mode === 'assistant'}
               aria-controls="docs-assistant-panel"
               onClick={() => {
@@ -105,7 +109,12 @@ export function DocsSearchDialog() {
               <BookOpen size={14} /> Ask AI
             </button>
           </div>
-          <button type="button" className="docs-search-close" aria-label="Close search" onClick={close}>
+          <button
+            type="button"
+            className="docs-search-close ml-auto inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-(--text-tertiary) transition-[color,background] duration-(--duration-1) ease-(--ease-out) hover:bg-(--bg-emph-tertiary) hover:text-(--text-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:bg-(--bg-emph-secondary) max-md:h-11 max-md:w-11"
+            aria-label="Close search"
+            onClick={close}
+          >
             <X size={16} />
           </button>
         </header>
@@ -186,12 +195,18 @@ function SearchPanel() {
   };
 
   return (
-    <section id="docs-search-panel" role="tabpanel" aria-labelledby="docs-search-tab" className="docs-search-panel">
-      <div className="docs-search-input-row">
+    <section
+      id="docs-search-panel"
+      role="tabpanel"
+      aria-labelledby="docs-search-tab"
+      className="docs-search-panel grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto]"
+    >
+      <div className="docs-search-input-row flex h-[52px] items-center gap-2.5 border-b border-(--border-secondary) bg-(--bg-canvas) px-4 py-0 text-(--icon-secondary) max-sm:h-14 max-sm:px-[13px]">
         <Search size={17} aria-hidden="true" />
         <input
           ref={inputRef}
           value={search}
+          className="min-w-0 flex-1 border-0 bg-transparent font-sans! text-[15px]! leading-5! font-[450]! tracking-[-.01em] text-(--text-primary) outline-0 placeholder:text-(--text-tertiary) placeholder:opacity-100"
           role="combobox"
           aria-label="Search documentation"
           aria-autocomplete="list"
@@ -207,31 +222,42 @@ function SearchPanel() {
           }}
           onKeyDown={handleKeys}
         />
-        <kbd>ESC</kbd>
+        <kbd className="max-sm:hidden">ESC</kbd>
       </div>
-      <div className="docs-search-results" aria-busy={query.isLoading}>
+      <div
+        className="docs-search-results min-h-0 overflow-y-auto overscroll-contain bg-(--bg-canvas) p-2 max-sm:p-1.5"
+        aria-busy={query.isLoading}
+      >
         {search.trim() && (
-          <button type="button" className="docs-search-ask-row" onClick={() => handoff('search_handoff', search.trim())}>
-            <span><BookOpen size={15} /> Ask AI about “{search.trim()}”</span>
+          <button
+            type="button"
+            className="docs-search-ask-row mb-1.5 flex min-h-[42px] w-full cursor-pointer items-center justify-between gap-3 rounded-[4px] border border-(--border-primary) bg-(--bg-inert) px-[11px] py-0 text-left font-sans! text-[13px]! leading-[18px]! font-medium! text-(--text-secondary) transition-[color,border-color,background] duration-(--duration-1) ease-(--ease-out) hover:border-(--border-strong) hover:bg-(--bg-raised) hover:text-(--text-primary) focus-visible:border-(--color-accent) focus-visible:bg-(--bg-raised) focus-visible:text-(--text-primary) focus-visible:outline-1 focus-visible:outline-offset-[-2px] focus-visible:outline-(--color-accent) active:bg-(--bg-emph-secondary) max-md:min-h-11 max-sm:text-[14px]!"
+            onClick={() => handoff('search_handoff', search.trim())}
+          >
+            <span className="inline-flex min-w-0 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap"><BookOpen size={15} /> Ask AI about “{search.trim()}”</span>
             <ArrowUpRight size={14} />
           </button>
         )}
         {!search.trim() && (
-          <div className="docs-search-empty">
-            <strong>Find anything in Axiom Docs</strong>
-            <p>Search exact fields, API paths, APL and MPL functions, concepts, and guides.</p>
-            <button type="button" onClick={() => handoff('search_empty_state')}>
+          <div className="docs-search-empty flex h-full min-h-[280px] flex-col items-center justify-center px-6 py-10 text-center text-(--text-tertiary)">
+            <strong className="font-sans text-[15px] leading-5 font-semibold text-(--text-primary)">Find anything in Axiom Docs</strong>
+            <p className="mx-0 mt-[7px] mb-[18px] max-w-[390px] font-sans text-[13px] leading-5 font-normal">Search exact fields, API paths, APL and MPL functions, concepts, and guides.</p>
+            <button
+              type="button"
+              className="cursor-pointer rounded-[3px] border-0 bg-(--bg-emph-tertiary) px-2 py-1.5 font-sans! text-[12px]! leading-4! font-medium! text-(--text-secondary) transition-[color,background] duration-(--duration-1) ease-(--ease-out) hover:bg-(--bg-emph-secondary) hover:text-(--text-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:bg-(--bg-emph-primary) max-md:min-h-11 max-sm:text-[14px]!"
+              onClick={() => handoff('search_empty_state')}
+            >
               Ask a question instead <kbd>⌘I</kbd>
             </button>
           </div>
         )}
         {search.trim() && query.isLoading && results.length === 0 && (
-          <div className="docs-search-status" role="status">Searching documentation…</div>
+          <div className="docs-search-status px-3 py-[38px] text-center font-mono text-[12px] leading-[18px] font-[450] text-(--text-tertiary)" role="status">Searching documentation…</div>
         )}
         {search.trim() && !query.isLoading && results.length === 0 && query.data === 'empty' && (
-          <div className="docs-search-status" role="status">No matching documentation found.</div>
+          <div className="docs-search-status px-3 py-[38px] text-center font-mono text-[12px] leading-[18px] font-[450] text-(--text-tertiary)" role="status">No matching documentation found.</div>
         )}
-        <div id="docs-search-results" className="docs-search-result-list" role="listbox" aria-label="Search results">
+        <div id="docs-search-results" className="docs-search-result-list min-w-0" role="listbox" aria-label="Search results">
           {results.map((result, index) => (
             <button
               id={`docs-search-result-${index}`}
@@ -239,21 +265,25 @@ function SearchPanel() {
               role="option"
               tabIndex={-1}
               aria-selected={activeIndex === index}
-              className="docs-search-result"
+              className="docs-search-result flex min-h-[58px] w-full cursor-pointer flex-col justify-center gap-[3px] rounded-[4px] border-0 bg-transparent px-[11px] py-2 text-left text-(--text-secondary) transition-[color,background] duration-(--duration-1) ease-(--ease-out) hover:bg-(--bg-emph-tertiary) hover:text-(--text-primary) hover:outline-0 focus-visible:shadow-[inset_0_0_0_1px_var(--color-accent)] aria-selected:bg-(--bg-emph-tertiary) aria-selected:text-(--text-primary) aria-selected:outline-0 max-sm:min-h-16"
               key={result.id}
               onMouseEnter={() => setSelectedIndex(index)}
               onClick={() => navigate(result.url, index + 1, 'pointer')}
             >
               <SearchBreadcrumbs items={result.breadcrumbs} />
-              <span className="docs-search-result-content"><HighlightedText value={result.content} /></span>
+              <span className="docs-search-result-content line-clamp-2 font-sans text-[13px] leading-[18px] font-[450] max-sm:text-[14px] max-sm:leading-5"><HighlightedText value={result.content} /></span>
             </button>
           ))}
         </div>
       </div>
-      <footer className="docs-search-footer">
-        <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
-        <span><kbd>↵</kbd> Open</span>
-        <button type="button" onClick={() => handoff('search_footer', search.trim())}>Ask AI <kbd>⌘I</kbd></button>
+      <footer className="docs-search-footer flex min-h-[38px] items-center gap-[14px] border-t border-(--border-primary) bg-(--bg-surface) px-3 py-[7px] font-mono text-[10px] leading-[14px] font-[450] text-(--text-tertiary) max-sm:justify-end">
+        <span className="inline-flex items-center gap-1 max-sm:hidden"><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
+        <span className="inline-flex items-center gap-1 max-sm:hidden"><kbd>↵</kbd> Open</span>
+        <button
+          type="button"
+          className="ml-auto cursor-pointer border-0 bg-transparent p-0 font-sans! text-[11px]! leading-4! font-medium! text-(--text-tertiary) transition-[color] duration-(--duration-1) ease-(--ease-out) hover:text-(--text-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:text-(--color-accent) max-md:min-h-11 max-sm:ml-0 max-sm:text-[13px]!"
+          onClick={() => handoff('search_footer', search.trim())}
+        >Ask AI <kbd>⌘I</kbd></button>
       </footer>
     </section>
   );
@@ -263,7 +293,9 @@ function HighlightedText({ value }: { value: string }) {
   const safeValue = sanitizeSearchSnippet(value);
   return safeValue.split(/(<mark>.*?<\/mark>)/gi).map((part, index) => {
     const match = part.match(/^<mark>(.*?)<\/mark>$/i);
-    return match ? <mark key={index}>{match[1]}</mark> : <span key={index}>{part}</span>;
+    return match ? (
+      <mark key={index} className="bg-transparent font-semibold text-(--color-accent-text)">{match[1]}</mark>
+    ) : <span key={index}>{part}</span>;
   });
 }
 
@@ -274,7 +306,14 @@ function SearchBreadcrumbs({ items = [] }: { items?: string[] }) {
     ? `${breadcrumbs[0]} / … / ${breadcrumbs.at(-1)}`
     : fullPath;
 
-  return <span className="docs-search-result-path" title={fullPath}>{compactPath}</span>;
+  return (
+    <span
+      className="docs-search-result-path overflow-hidden font-mono text-[10px] leading-[14px] font-[450] text-ellipsis whitespace-nowrap text-(--text-tertiary)"
+      title={fullPath}
+    >
+      {compactPath}
+    </span>
+  );
 }
 
 function AssistantPanel() {
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index 53e11b35a..d462c5ed0 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -1,109 +1,305 @@
-'use client';
+"use client";
 
-import { ZoneLink as Link } from '@/components/zone-link';
-import { ChevronRight } from 'lucide-react';
-import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
-import { withDocsBasePath } from '@/lib/docs-paths';
-import type { NavigationGroup, NavigationItem } from '@/lib/navigation';
-import { DocumentationSections, SiteHeader } from './site-header';
+import { ZoneLink as Link } from "@/components/zone-link";
+import { cn } from "@/lib/utils";
+import { ChevronRight } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { withDocsBasePath } from "@/lib/docs-paths";
+import type {
+  NavigationGroup,
+  NavigationItem,
+} from "@/lib/navigation";
+import { DocumentationSections, SiteHeader } from "./site-header";
 
-type Section = 'documentation' | 'query' | 'api' | 'changelog';
+type Section = "documentation" | "query" | "api" | "changelog";
 
 // Mirrors lib/navigation's getSection rather than importing it: that module
 // pulls docs.json and the fumadocs source into any bundle that imports it.
 function sectionOf(pathname: string): Section {
-  if (pathname === '/docs/changelog' || pathname.startsWith('/docs/changelog/')) return 'changelog';
-  if (pathname.startsWith('/docs/apl/') || pathname.startsWith('/docs/mpl/')) return 'query';
-  if (pathname.startsWith('/docs/restapi/')) return 'api';
-  return 'documentation';
+  if (
+    pathname === "/docs/changelog" ||
+    pathname.startsWith("/docs/changelog/")
+  )
+    return "changelog";
+  if (
+    pathname.startsWith("/docs/apl/") ||
+    pathname.startsWith("/docs/mpl/")
+  )
+    return "query";
+  if (pathname.startsWith("/docs/restapi/")) return "api";
+  return "documentation";
 }
 
-function containsActive(item: NavigationItem, activeHref: string): boolean {
+function containsActive(
+  item: NavigationItem,
+  activeHref: string,
+): boolean {
   if (item.href === activeHref) return true;
-  return item.children?.some((child) => containsActive(child, activeHref)) ?? false;
+  return (
+    item.children?.some((child) =>
+      containsActive(child, activeHref),
+    ) ?? false
+  );
 }
 
 function isSyntaxReference(href?: string): boolean {
-  return Boolean(href && /\/(?:scalar-functions|aggregation-functions|operators)\//.test(href));
+  return Boolean(
+    href &&
+    /\/(?:scalar-functions|aggregation-functions|operators)\//.test(
+      href,
+    ),
+  );
 }
 
-function NavItem({ item, activeHref, onNavigate, depth = 0 }: { item: NavigationItem; activeHref: string; onNavigate: () => void; depth?: number }) {
+// Shared row geometry: the stylesheet declared `.sidebar-link, .nav-nested summary`
+// together, so both call sites append the identical utility list.
+//
+// `max-xl:` (not `max-xl:`) — v4's `max-*` variant emits
+// `(width < 1240px)`, which drops the 1240px column the original `(max-width: 1240px)`
+// blocks include and that this component's own `matchMedia('(min-width: 80rem)')`
+// still treats as mobile.
+const navRow =
+  "flex min-h-[30px] m-0 -mx-2.5 cursor-pointer items-center gap-[7px] rounded-[4px] px-2.5 py-1.5 font-sans text-[14px] leading-[18px] tracking-[-.006em] max-xl:min-h-[40px] max-xl:py-2";
+// `[&:hover]:` (not `hover:`) — v4 wraps `hover:` in `@media (hover: hover)`, which
+// would drop the tap-induced hover styling the original gave touch devices, i.e. the
+// drawer, which is the only place this list is reachable on a phone.
+// `text-*!` — globals.css keeps an UNLAYERED `a { color: inherit }`; unlayered rules
+// beat `@layer utilities` regardless of specificity, so link colours must be !important.
+const navRowIdle =
+  "text-(--text-tertiary)! font-[450] [&:hover]:bg-(--bg-emph-tertiary) [&:hover]:text-(--text-secondary)!";
+const truncateRow =
+  "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap";
+
+function NavItem({
+  item,
+  activeHref,
+  onNavigate,
+  depth = 0,
+}: {
+  item: NavigationItem;
+  activeHref: string;
+  onNavigate: () => void;
+  depth?: number;
+}) {
   if (item.children) {
     const open = containsActive(item, activeHref);
     return (
-      <details className="nav-nested" open={open}>
-        <summary style={{ paddingLeft: 10 + depth * 10 }}><span>{item.title}</span><ChevronRight size={12} /></summary>
-        <div>{item.children.map((child) => <NavItem key={child.href ?? child.title} item={child} activeHref={activeHref} onNavigate={onNavigate} depth={depth + 1} />)}</div>
+      <details
+        className="nav-nested mx-0 my-px open:[&>summary_svg]:[transform:rotate(90deg)]"
+        open={open}
+      >
+        <summary
+          className={cn(
+            navRow,
+            navRowIdle,
+            "list-none [&::-webkit-details-marker]:hidden",
+          )}
+          // Indent the row itself (-10 mirrors navRow's -mx-2.5) so the pill
+          // keeps navRow's symmetric px-2.5 around the label at every depth.
+          style={{ marginLeft: -10 + depth * 10 }}
+        >
+          <span className={truncateRow}>{item.title}</span>
+          <ChevronRight
+            size={12}
+            className="ml-auto flex-none [transition:transform_.15s_ease]"
+          />
+        </summary>
+        <div>
+          {item.children.map((child) => (
+            <NavItem
+              key={child.href ?? child.title}
+              item={child}
+              activeHref={activeHref}
+              onNavigate={onNavigate}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
       </details>
     );
   }
 
+  const active = item.href === activeHref;
+  const syntaxReference = isSyntaxReference(item.href);
+
   return (
-    <Link href={item.href!} prefetch={false} className={['sidebar-link', item.href === activeHref && 'active', isSyntaxReference(item.href) && 'syntax-reference-link'].filter(Boolean).join(' ')} style={{ paddingLeft: 10 + depth * 10 }} onClick={onNavigate}>
-      <span className="sidebar-link-label">{item.title}</span>
-      {item.method && <span className={`method method-${item.method.toLowerCase()}`}>{item.method}</span>}
+    <Link
+      href={item.href!}
+      prefetch={false}
+      className={cn(
+        "sidebar-link",
+        navRow,
+        active &&
+          "active bg-(--bg-emph-primary) font-[450] [text-shadow:-0.2px_0_0_currentColor,0.2px_0_0_currentColor] text-(--text-primary)!",
+        !active && navRowIdle,
+        syntaxReference && "syntax-reference-link",
+      )}
+      // Indent the row itself (-10 mirrors navRow's -mx-2.5) so the pill
+      // keeps navRow's symmetric px-2.5 around the label at every depth.
+      style={{ marginLeft: -10 + depth * 10 }}
+      onClick={onNavigate}
+    >
+      <span
+        className={cn(
+          "sidebar-link-label",
+          truncateRow,
+          syntaxReference &&
+            "font-(family-name:--font-query) tracking-[0]",
+        )}
+      >
+        {item.title}
+      </span>
+      {item.method && (
+        <span
+          className={cn(
+            "method",
+            "method-" + item.method.toLowerCase(),
+            "ml-auto min-w-[34px] flex-none rounded-[3px] px-1 py-px text-center font-mono text-[10px] leading-[14px] font-semibold tracking-[.02em]",
+          )}
+        >
+          {item.method}
+        </span>
+      )}
     </Link>
   );
 }
 
-export function DocsShell({ navigations, children }: { navigations: Record<Section, NavigationGroup[]>; children: React.ReactNode }) {
+// `.drawer-sections` renders as <nav> inside DocumentationSections (site-header.tsx);
+// its <a> children are styled here through descendant variants so nothing outside
+// this call site is affected — the default `header-tabs` variant is untouched.
+const drawerSections = cn(
+  "drawer-sections hidden",
+  "max-xl:m-0 max-xl:mb-5 max-xl:flex max-xl:flex-col max-xl:gap-px max-xl:border-b max-xl:border-b-(--border-primary) max-xl:pb-3",
+  // Bleed the divider across the drawer's own padding (px-6) so it runs
+  // edge to edge; the matching inner padding keeps the links aligned.
+  "max-xl:-mx-6 max-xl:px-6",
+  // `-mx-2.5` mirrors navRow's gutter bleed so the pills and label column
+  // align exactly with the nav rows below.
+  "max-xl:[&_a]:flex max-xl:[&_a]:min-h-[38px] max-xl:[&_a]:items-center max-xl:[&_a]:-mx-2.5 max-xl:[&_a]:rounded-[4px] max-xl:[&_a]:px-2.5 max-xl:[&_a]:py-0 max-xl:[&_a]:font-sans max-xl:[&_a]:text-[13px] max-xl:[&_a]:leading-[18px]",
+  "max-xl:[&_a:not(.active)]:font-medium max-xl:[&_a:not(.active)]:text-(--text-tertiary)!",
+  "max-xl:[&_a:not(.active):hover]:bg-(--bg-emph-tertiary) max-xl:[&_a:not(.active):hover]:text-(--text-secondary)!",
+  "max-xl:[&_a.active]:bg-(--bg-emph-secondary) max-xl:[&_a.active]:font-medium max-xl:[&_a.active]:[text-shadow:-0.2px_0_0_currentColor,0.2px_0_0_currentColor] max-xl:[&_a.active]:text-(--text-primary)!",
+);
+
+const sidebarBase =
+  "sidebar fixed top-14 bottom-0 left-0 z-30 w-[260px] overflow-y-auto scroll-fade-t scroll-fade-b border-r border-r-(--border-primary) bg-(--bg-sidebar) pt-14 px-6 pb-12 [scrollbar-width:thin] max-xl:z-[70] max-xl:w-[min(300px,86vw)] max-xl:pt-4 max-xl:pb-[max(48px,env(safe-area-inset-bottom))] max-xl:shadow-[12px_0_48px_rgba(0,0,0,.35)] motion-reduce:[transition:none]!";
+const sidebarClosed =
+  "max-xl:invisible max-xl:[transform:translateX(-105%)] max-xl:[transition:transform_.2s_ease,visibility_0s_linear_.2s]";
+const sidebarOpen =
+  "open max-xl:visible max-xl:[transform:translateX(0)] max-xl:[transition:transform_.2s_ease,visibility_0s_linear_0s]";
+
+export function DocsShell({
+  navigations,
+  children,
+}: {
+  navigations: Record<Section, NavigationGroup[]>;
+  children: React.ReactNode;
+}) {
   // The shell lives in the root layout so navigation payloads exclude it; the
   // active page and sidebar section are derived from the pathname instead of
   // per-page props. usePathname reports app-relative paths (no /docs basePath).
   const pathname = usePathname();
-  const landing = pathname === '/';
-  const activeHref = landing ? '/docs' : withDocsBasePath(pathname);
+  const landing = pathname === "/";
+  const activeHref = landing ? "/docs" : withDocsBasePath(pathname);
   const navigation = navigations[sectionOf(activeHref)];
   const [drawerOpen, setDrawerOpen] = useState(false);
   const drawerRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    const desktop = window.matchMedia('(min-width: 1241px)');
+    const desktop = window.matchMedia("(min-width: 80rem)");
     const closeAtDesktop = (event: MediaQueryListEvent) => {
       if (event.matches) setDrawerOpen(false);
     };
-    desktop.addEventListener('change', closeAtDesktop);
-    return () => desktop.removeEventListener('change', closeAtDesktop);
+    desktop.addEventListener("change", closeAtDesktop);
+    return () =>
+      desktop.removeEventListener("change", closeAtDesktop);
   }, []);
 
   useEffect(() => {
     if (!drawerOpen) return;
     const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    drawerRef.current?.querySelector<HTMLAnchorElement>('a')?.focus();
+    document.body.style.overflow = "hidden";
+    drawerRef.current?.querySelector<HTMLAnchorElement>("a")?.focus();
 
     const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape') return;
+      if (event.key !== "Escape") return;
       setDrawerOpen(false);
-      document.getElementById('docs-navigation-trigger')?.focus();
+      document.getElementById("docs-navigation-trigger")?.focus();
     };
-    window.addEventListener('keydown', closeOnEscape);
+    window.addEventListener("keydown", closeOnEscape);
     return () => {
       document.body.style.overflow = previousOverflow;
-      window.removeEventListener('keydown', closeOnEscape);
+      window.removeEventListener("keydown", closeOnEscape);
     };
   }, [drawerOpen]);
 
   const closeDrawer = () => setDrawerOpen(false);
 
   return (
-    <div className="docs-app">
-      <SiteHeader drawerOpen={drawerOpen} onMenu={() => setDrawerOpen((open) => !open)} />
-      <div className="docs-grid">
-        <aside id="docs-navigation-drawer" ref={drawerRef} className={drawerOpen ? 'sidebar open' : 'sidebar'}>
-          <DocumentationSections className="drawer-sections" onNavigate={closeDrawer} />
+    <div className="docs-app min-h-screen">
+      <SiteHeader
+        drawerOpen={drawerOpen}
+        onMenu={() => setDrawerOpen((open) => !open)}
+      />
+      <div className="docs-grid grid min-h-screen grid-cols-[260px_minmax(0,1fr)] pt-14 max-xl:block">
+        <aside
+          id="docs-navigation-drawer"
+          ref={drawerRef}
+          className={
+            drawerOpen
+              ? `${sidebarBase} ${sidebarOpen}`
+              : `${sidebarBase} ${sidebarClosed}`
+          }
+        >
+          <DocumentationSections
+            className={drawerSections}
+            onNavigate={closeDrawer}
+          />
           <nav aria-label="Page navigation">
             {navigation.map((group) => (
-              <section className="sidebar-group" key={group.title}>
-                <h2>{group.title}</h2>
-                {group.items.map((item) => <NavItem key={item.href ?? item.title} item={item} activeHref={activeHref} onNavigate={closeDrawer} />)}
+              <section
+                // 20px group gap on mobile matches the divider→first-heading
+                // gap above, so the drawer keeps one vertical rhythm.
+                className="sidebar-group m-0 mb-6 max-xl:mb-5"
+                key={group.title}
+              >
+                {/* Every utility that collides with the UNLAYERED `h1,h2,…` / `h2` element
+                    rules in styles/tokens.css is !important: unlayered declarations beat
+                    `@layer utilities` no matter the specificity, so without `!` these
+                    headings fall back to 24px/28px sans. */}
+                <h2 className="m-0! mb-2! font-mono! text-[11px]! leading-[14px]! font-semibold! tracking-[.1em]! text-(--text-secondary)! uppercase">
+                  {group.title}
+                </h2>
+                {group.items.map((item) => (
+                  <NavItem
+                    key={item.href ?? item.title}
+                    item={item}
+                    activeHref={activeHref}
+                    onNavigate={closeDrawer}
+                  />
+                ))}
               </section>
             ))}
           </nav>
         </aside>
-        {drawerOpen && <button className="sidebar-backdrop" aria-hidden="true" tabIndex={-1} onClick={closeDrawer} />}
-        <main className={landing ? 'docs-main landing-main' : 'docs-main'}>{children}</main>
+        {drawerOpen && (
+          <button
+            className="sidebar-backdrop hidden max-xl:fixed max-xl:inset-[56px_0_0] max-xl:z-[60] max-xl:block max-xl:border-0 max-xl:bg-[rgba(0,0,0,.5)]"
+            aria-hidden="true"
+            tabIndex={-1}
+            onClick={closeDrawer}
+          />
+        )}
+        <main
+          className={
+            landing
+              ? "docs-main landing-main col-[2] min-w-0 pr-[260px] max-xl:pr-0"
+              : "docs-main col-[2] min-w-0"
+          }
+        >
+          {children}
+        </main>
       </div>
     </div>
   );
diff --git a/components/docs-toaster.tsx b/components/docs-toaster.tsx
index 3cd839b1a..1fcad0703 100644
--- a/components/docs-toaster.tsx
+++ b/components/docs-toaster.tsx
@@ -12,9 +12,12 @@ export function DocsToaster() {
       theme={resolvedTheme === 'light' ? 'light' : 'dark'}
       toastOptions={{
         classNames: {
-          toast: 'axiom-toast',
-          title: 'axiom-toast-title',
-          description: 'axiom-toast-description',
+          // Sonner sets these on the toast itself, so every declaration keeps
+          // the `!important` the hand-written rules carried.
+          toast:
+            'axiom-toast border! border-(--border-primary)! rounded-[4px]! bg-(--bg-overlay)! text-(--text-primary)! shadow-none! font-mono!',
+          title: 'axiom-toast-title text-[12px]! font-semibold!',
+          description: 'axiom-toast-description text-(--text-tertiary)! text-[11px]!',
         },
       }}
     />
diff --git a/components/heading-anchor.tsx b/components/heading-anchor.tsx
index ea8953e66..3889fb9e8 100644
--- a/components/heading-anchor.tsx
+++ b/components/heading-anchor.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { Link as LinkIcon } from 'lucide-react';
 import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
 import { copyToClipboard } from '@/lib/clipboard';
 
 type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -27,10 +29,20 @@ export function HeadingAnchor({ as: Heading, children, id, className, ...props }
   if (!id) return <Heading className={className} {...props}>{children}</Heading>;
 
   return (
-    <Heading id={id} className={['anchor-heading', className].filter(Boolean).join(' ')} {...props}>
-      <a href={`#${id}`} onClick={copyAnchor} title="Copy link to this section">
-        <span>{children}</span>
-        <span className="anchor-hash" aria-hidden="true">#</span>
+    <Heading id={id} className={cn('anchor-heading relative scroll-mt-[88px]', className)} {...props}>
+      <a href={`#${id}`} onClick={copyAnchor} title="Copy link to this section" className="no-underline!">
+        {/* Link marker sits in the left gutter (absolute, so the heading never
+            shifts) and reveals on hover/focus. Keyed off `.anchor-heading`
+            directly rather than `group-hover:`: Tailwind v4 wraps `hover:` in
+            `@media (hover: hover)`, which would drop it on coarse pointers.
+            Hidden below sm where the gutter would clip off-screen. */}
+        <span
+          className="anchor-hash absolute right-full top-1/2 -translate-y-1/2 mr-[10px] flex text-(--text-quaternary) opacity-0 translate-x-[3px] transition-[opacity,translate] duration-150 ease-[ease] [.anchor-heading:hover_&]:opacity-100 [.anchor-heading:hover_&]:translate-x-0 [.anchor-heading:has(a:focus-visible)_&]:opacity-100 [.anchor-heading:has(a:focus-visible)_&]:translate-x-0 max-sm:hidden"
+          aria-hidden="true"
+        >
+          <LinkIcon className="size-[.6em]" strokeWidth={2.25} />
+        </span>
+        {children}
       </a>
     </Heading>
   );
diff --git a/components/integration-icons.tsx b/components/integration-icons.tsx
new file mode 100644
index 000000000..333239eb1
--- /dev/null
+++ b/components/integration-icons.tsx
@@ -0,0 +1,37 @@
+// Brand marks for the landing integrations grid. Paths from simple-icons
+// (https://simpleicons.org, CC0); colors are the official brand hexes from the
+// same dataset. Marks whose official hex is black (Vercel, OpenTelemetry)
+// render in currentColor so they work in both themes, and AWS uses its
+// smile-orange accent because its navy is invisible on the dark canvas.
+// Vector and Syslog have no simple-icons entry — call sites use a lucide
+// fallback glyph instead.
+type BrandIcon = { color?: string; path: string };
+
+export const INTEGRATION_ICONS: Record<string, BrandIcon> = {
+  opentelemetry: { color: undefined, path: 'M12.6974 13.1173c-1.0224 1.0224-1.0224 2.68 0 3.7024 1.0224 1.0224 2.68 1.0224 3.7024 0 1.0224-1.0223 1.0224-2.68 0-3.7024-1.0223-1.0223-2.68-1.0223-3.7024 0zm2.7677 2.7701c-.5063.5063-1.3267.5063-1.833 0s-.5063-1.3266 0-1.833c.5063-.5062 1.3267-.5062 1.833 0 .5063.504.5063 1.3267 0 1.833zM16.356.2355l-1.6041 1.6042c-.314.314-.314.83 0 1.144L21.015 9.247c.314.314.83.314 1.144 0l1.6042-1.6041c.314-.314.314-.83 0-1.144L17.4976.2354c-.314-.314-.8276-.314-1.1416 0zM5.1173 20.734c.2848-.2848.2848-.7497 0-1.0345l-.8155-.8155c-.2848-.2848-.7497-.2848-1.0345 0l-1.6845 1.6845-.0024.0024-.4625-.4625c-.2556-.2556-.6718-.2556-.925 0-.2556.2556-.2556.6718 0 .925l2.775 2.775c.2556.2556.6718.2556.925 0 .2532-.2556.2556-.6718 0-.925l-.4625-.4625.0024-.0024zm8.4856-15.893-3.5637 3.5637c-.3164.3164-.3164.8374 0 1.1538l2.2006 2.2005c1.5554-1.1197 3.7365-.981 5.1361.4187l1.7819-1.7818c.3164-.3165.3164-.8374 0-1.1538l-4.401-4.401c-.3165-.319-.8374-.319-1.1539 0zm-2.2881 7.8455-1.2999-1.2999c-.3043-.3043-.8033-.3043-1.1076 0l-4.5836 4.586c-.3042.3043-.3042.8033 0 1.1076l2.5973 2.5973c.3043.3043.8033.3043 1.1076 0l2.9478-2.9527c-.6231-1.2877-.5112-2.8431.3384-4.0383z' },
+  javascript: { color: '#F7DF1E', path: 'M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z' },
+  python: { color: '#3776AB', path: 'M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z' },
+  go: { color: '#00ADD8', path: 'M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z' },
+  kubernetes: { color: '#326CE5', path: 'M10.204 14.35l.007.01-.999 2.413a5.171 5.171 0 0 1-2.075-2.597l2.578-.437.004.005a.44.44 0 0 1 .484.606zm-.833-2.129a.44.44 0 0 0 .173-.756l.002-.011L7.585 9.7a5.143 5.143 0 0 0-.73 3.255l2.514-.725.002-.009zm1.145-1.98a.44.44 0 0 0 .699-.337l.01-.005.15-2.62a5.144 5.144 0 0 0-3.01 1.442l2.147 1.523.004-.002zm.76 2.75l.723.349.722-.347.18-.78-.5-.623h-.804l-.5.623.179.779zm1.5-3.095a.44.44 0 0 0 .7.336l.008.003 2.134-1.513a5.188 5.188 0 0 0-2.992-1.442l.148 2.615.002.001zm10.876 5.97l-5.773 7.181a1.6 1.6 0 0 1-1.248.594l-9.261.003a1.6 1.6 0 0 1-1.247-.596l-5.776-7.18a1.583 1.583 0 0 1-.307-1.34L2.1 5.573c.108-.47.425-.864.863-1.073L11.305.513a1.606 1.606 0 0 1 1.385 0l8.345 3.985c.438.209.755.604.863 1.073l2.062 8.955c.108.47-.005.963-.308 1.34zm-3.289-2.057c-.042-.01-.103-.026-.145-.034-.174-.033-.315-.025-.479-.038-.35-.037-.638-.067-.895-.148-.105-.04-.18-.165-.216-.216l-.201-.059a6.45 6.45 0 0 0-.105-2.332 6.465 6.465 0 0 0-.936-2.163c.052-.047.15-.133.177-.159.008-.09.001-.183.094-.282.197-.185.444-.338.743-.522.142-.084.273-.137.415-.242.032-.024.076-.062.11-.089.24-.191.295-.52.123-.736-.172-.216-.506-.236-.745-.045-.034.027-.08.062-.111.088-.134.116-.217.23-.33.35-.246.25-.45.458-.673.609-.097.056-.239.037-.303.033l-.19.135a6.545 6.545 0 0 0-4.146-2.003l-.012-.223c-.065-.062-.143-.115-.163-.25-.022-.268.015-.557.057-.905.023-.163.061-.298.068-.475.001-.04-.001-.099-.001-.142 0-.306-.224-.555-.5-.555-.275 0-.499.249-.499.555l.001.014c0 .041-.002.092 0 .128.006.177.044.312.067.475.042.348.078.637.056.906a.545.545 0 0 1-.162.258l-.012.211a6.424 6.424 0 0 0-4.166 2.003 8.373 8.373 0 0 1-.18-.128c-.09.012-.18.04-.297-.029-.223-.15-.427-.358-.673-.608-.113-.12-.195-.234-.329-.349-.03-.026-.077-.062-.111-.088a.594.594 0 0 0-.348-.132.481.481 0 0 0-.398.176c-.172.216-.117.546.123.737l.007.005.104.083c.142.105.272.159.414.242.299.185.546.338.743.522.076.082.09.226.1.288l.16.143a6.462 6.462 0 0 0-1.02 4.506l-.208.06c-.055.072-.133.184-.215.217-.257.081-.546.11-.895.147-.164.014-.305.006-.48.039-.037.007-.09.02-.133.03l-.004.002-.007.002c-.295.071-.484.342-.423.608.061.267.349.429.645.365l.007-.001.01-.003.129-.029c.17-.046.294-.113.448-.172.33-.118.604-.217.87-.256.112-.009.23.069.288.101l.217-.037a6.5 6.5 0 0 0 2.88 3.596l-.09.218c.033.084.069.199.044.282-.097.252-.263.517-.452.813-.091.136-.185.242-.268.399-.02.037-.045.095-.064.134-.128.275-.034.591.213.71.248.12.556-.007.69-.282v-.002c.02-.039.046-.09.062-.127.07-.162.094-.301.144-.458.132-.332.205-.68.387-.897.05-.06.13-.082.215-.105l.113-.205a6.453 6.453 0 0 0 4.609.012l.106.192c.086.028.18.042.256.155.136.232.229.507.342.84.05.156.074.295.145.457.016.037.043.09.062.129.133.276.442.402.69.282.247-.118.341-.435.213-.71-.02-.039-.045-.096-.065-.134-.083-.156-.177-.261-.268-.398-.19-.296-.346-.541-.443-.793-.04-.13.007-.21.038-.294-.018-.022-.059-.144-.083-.202a6.499 6.499 0 0 0 2.88-3.622c.064.01.176.03.213.038.075-.05.144-.114.28-.104.266.039.54.138.87.256.154.06.277.128.448.173.036.01.088.019.13.028l.009.003.007.001c.297.064.584-.098.645-.365.06-.266-.128-.537-.423-.608zM16.4 9.701l-1.95 1.746v.005a.44.44 0 0 0 .173.757l.003.01 2.526.728a5.199 5.199 0 0 0-.108-1.674A5.208 5.208 0 0 0 16.4 9.7zm-4.013 5.325a.437.437 0 0 0-.404-.232.44.44 0 0 0-.372.233h-.002l-1.268 2.292a5.164 5.164 0 0 0 3.326.003l-1.27-2.296h-.01zm1.888-1.293a.44.44 0 0 0-.27.036.44.44 0 0 0-.214.572l-.003.004 1.01 2.438a5.15 5.15 0 0 0 2.081-2.615l-2.6-.44-.004.005z' },
+  aws: { color: '#FF9900', path: 'M6.763 10.036c0 .296.032.535.088.71.064.176.144.368.256.576.04.063.056.127.056.183 0 .08-.048.16-.152.24l-.503.335a.383.383 0 0 1-.208.072c-.08 0-.16-.04-.239-.112a2.47 2.47 0 0 1-.287-.375 6.18 6.18 0 0 1-.248-.471c-.622.734-1.405 1.101-2.347 1.101-.67 0-1.205-.191-1.596-.574-.391-.384-.59-.894-.59-1.533 0-.678.239-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583c0-.607-.127-1.03-.375-1.277-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103-.295.072-.583.16-.862.272a2.287 2.287 0 0 1-.28.104.488.488 0 0 1-.127.023c-.112 0-.168-.08-.168-.247v-.391c0-.128.016-.224.056-.28a.597.597 0 0 1 .224-.167c.279-.144.614-.264 1.005-.36a4.84 4.84 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647.439.43.662 1.085.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144.287-.096.543-.271.758-.51.128-.152.224-.32.272-.512.047-.191.08-.423.08-.694v-.335a6.66 6.66 0 0 0-.735-.136 6.02 6.02 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296zm6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 5.55a1.398 1.398 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783c.151 0 .255.025.31.08.065.048.113.16.16.312l1.342 5.284 1.245-5.284c.04-.16.088-.264.151-.312a.549.549 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348c.048-.16.104-.264.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1.137 1.137 0 0 1-.056.2l-1.923 6.17c-.048.16-.104.263-.168.311a.51.51 0 0 1-.303.08h-.687c-.151 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32l-1.238-5.148-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.563.563 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247.048 0 .096.008.144.024.048.016.12.048.2.08.271.12.566.215.878.279.319.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.777.777 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.902 1.902 0 0 1-.4-1.158c0-.335.073-.63.216-.886.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .359.008.535.032.183.024.35.056.518.088.16.04.312.08.455.127.144.048.256.096.336.144a.69.69 0 0 1 .24.2.43.43 0 0 1 .071.263v.375c0 .168-.064.256-.184.256a.83.83 0 0 1-.303-.096 3.652 3.652 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223-.248.152-.375.383-.375.71 0 .224.08.416.24.567.159.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767.247.327.367.702.367 1.117 0 .343-.072.655-.207.926-.144.272-.336.511-.583.703-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167zM21.698 16.207c-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351 3.384 1.963 7.559 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.439-.2.814.287.383.607zM22.792 14.961c-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151.32-.79 1.03-2.57.695-2.994z' },
+  vercel: { color: undefined, path: 'm12 1.608 12 20.784H0Z' },
+  cloudflare: { color: '#F38020', path: 'M16.5088 16.8447c.1475-.5068.0908-.9707-.1553-1.3154-.2246-.3164-.6045-.499-1.0615-.5205l-8.6592-.1123a.1559.1559 0 0 1-.1333-.0713c-.0283-.042-.0351-.0986-.021-.1553.0278-.084.1123-.1484.2036-.1562l8.7359-.1123c1.0351-.0489 2.1601-.8868 2.5537-1.9136l.499-1.3013c.0215-.0561.0293-.1128.0147-.168-.5625-2.5463-2.835-4.4453-5.5499-4.4453-2.5039 0-4.6284 1.6177-5.3876 3.8614-.4927-.3658-1.1187-.5625-1.794-.499-1.2026.119-2.1665 1.083-2.2861 2.2856-.0283.31-.0069.6128.0635.894C1.5683 13.171 0 14.7754 0 16.752c0 .1748.0142.3515.0352.5273.0141.083.0844.1475.1689.1475h15.9814c.0909 0 .1758-.0645.2032-.1553l.12-.4268zm2.7568-5.5634c-.0771 0-.1611 0-.2383.0112-.0566 0-.1054.0415-.127.0976l-.3378 1.1744c-.1475.5068-.0918.9707.1543 1.3164.2256.3164.6055.498 1.0625.5195l1.8437.1133c.0557 0 .1055.0263.1329.0703.0283.043.0351.1074.0214.1562-.0283.084-.1132.1485-.204.1553l-1.921.1123c-1.041.0488-2.1582.8867-2.5527 1.914l-.1406.3585c-.0283.0713.0215.1416.0986.1416h6.5977c.0771 0 .1474-.0489.169-.126.1122-.4082.1757-.837.1757-1.2803 0-2.6025-2.125-4.727-4.7344-4.727' },
+  grafana: { color: '#F46800', path: 'M23.02 10.59a8.578 8.578 0 0 0-.862-3.034 8.911 8.911 0 0 0-1.789-2.445c.337-1.342-.413-2.505-.413-2.505-1.292-.08-2.113.4-2.416.62-.052-.02-.102-.044-.154-.064-.22-.089-.446-.172-.677-.247-.231-.073-.47-.14-.711-.197a9.867 9.867 0 0 0-.875-.161C14.557.753 12.94 0 12.94 0c-1.804 1.145-2.147 2.744-2.147 2.744l-.018.093c-.098.029-.2.057-.298.088-.138.042-.275.094-.413.143-.138.055-.275.107-.41.166a8.869 8.869 0 0 0-1.557.87l-.063-.029c-2.497-.955-4.716.195-4.716.195-.203 2.658.996 4.33 1.235 4.636a11.608 11.608 0 0 0-.607 2.635C1.636 12.677.953 15.014.953 15.014c1.926 2.214 4.171 2.351 4.171 2.351.003-.002.006-.002.006-.005.285.509.615.994.986 1.446.156.19.32.371.488.548-.704 2.009.099 3.68.099 3.68 2.144.08 3.553-.937 3.849-1.173a9.784 9.784 0 0 0 3.164.501h.08l.055-.003.107-.002.103-.005.003.002c1.01 1.44 2.788 1.646 2.788 1.646 1.264-1.332 1.337-2.653 1.337-2.94v-.058c0-.02-.003-.039-.003-.06.265-.187.52-.387.758-.6a7.875 7.875 0 0 0 1.415-1.7c1.43.083 2.437-.885 2.437-.885-.236-1.49-1.085-2.216-1.264-2.354l-.018-.013-.016-.013a.217.217 0 0 1-.031-.02c.008-.092.016-.18.02-.27.011-.162.016-.323.016-.48v-.253l-.005-.098-.008-.135a1.891 1.891 0 0 0-.01-.13c-.003-.042-.008-.083-.013-.125l-.016-.124-.018-.122a6.215 6.215 0 0 0-2.032-3.73 6.015 6.015 0 0 0-3.222-1.46 6.292 6.292 0 0 0-.85-.048l-.107.002h-.063l-.044.003-.104.008a4.777 4.777 0 0 0-3.335 1.695c-.332.4-.592.84-.768 1.297a4.594 4.594 0 0 0-.312 1.817l.003.091c.005.055.007.11.013.164a3.615 3.615 0 0 0 .698 1.82 3.53 3.53 0 0 0 1.827 1.282c.33.098.66.14.971.137.039 0 .078 0 .114-.002l.063-.003c.02 0 .041-.003.062-.003.034-.002.065-.007.099-.01.007 0 .018-.003.028-.003l.031-.005.06-.008a1.18 1.18 0 0 0 .112-.02c.036-.008.072-.013.109-.024a2.634 2.634 0 0 0 .914-.415c.028-.02.056-.041.085-.065a.248.248 0 0 0 .039-.35.244.244 0 0 0-.309-.06l-.078.042c-.09.044-.184.083-.283.116a2.476 2.476 0 0 1-.475.096c-.028.003-.054.006-.083.006l-.083.002c-.026 0-.054 0-.08-.002l-.102-.006h-.012l-.024.006c-.016-.003-.031-.003-.044-.006-.031-.002-.06-.007-.091-.01a2.59 2.59 0 0 1-.724-.213 2.557 2.557 0 0 1-.667-.438 2.52 2.52 0 0 1-.805-1.475 2.306 2.306 0 0 1-.029-.444l.006-.122v-.023l.002-.031c.003-.021.003-.04.005-.06a3.163 3.163 0 0 1 1.352-2.29 3.12 3.12 0 0 1 .937-.43 2.946 2.946 0 0 1 .776-.101h.06l.07.002.045.003h.026l.07.005a4.041 4.041 0 0 1 1.635.49 3.94 3.94 0 0 1 1.602 1.662 3.77 3.77 0 0 1 .397 1.414l.005.076.003.075c.002.026.002.05.002.075 0 .024.003.052 0 .07v.065l-.002.073-.008.174a6.195 6.195 0 0 1-.08.639 5.1 5.1 0 0 1-.267.927 5.31 5.31 0 0 1-.624 1.13 5.052 5.052 0 0 1-3.237 2.014 4.82 4.82 0 0 1-.649.066l-.039.003h-.287a6.607 6.607 0 0 1-1.716-.265 6.776 6.776 0 0 1-3.4-2.274 6.75 6.75 0 0 1-.746-1.15 6.616 6.616 0 0 1-.714-2.596l-.005-.083-.002-.02v-.056l-.003-.073v-.096l-.003-.104v-.07l.003-.163c.008-.22.026-.45.054-.678a8.707 8.707 0 0 1 .28-1.355c.128-.444.286-.872.473-1.277a7.04 7.04 0 0 1 1.456-2.1 5.925 5.925 0 0 1 .953-.763c.169-.111.343-.213.524-.306.089-.05.182-.091.273-.135.047-.02.093-.042.138-.062a7.177 7.177 0 0 1 .714-.267l.145-.045c.049-.015.098-.026.148-.041.098-.029.197-.052.296-.076.049-.013.1-.02.15-.033l.15-.032.151-.028.076-.013.075-.01.153-.024c.057-.01.114-.013.171-.023l.169-.021c.036-.003.073-.008.106-.01l.073-.008.036-.003.042-.002c.057-.003.114-.008.171-.01l.086-.006h.023l.037-.003.145-.007a7.999 7.999 0 0 1 1.708.125 7.917 7.917 0 0 1 2.048.68 8.253 8.253 0 0 1 1.672 1.09l.09.077.089.078c.06.052.114.107.171.159.057.052.112.106.166.16.052.055.107.107.159.164a8.671 8.671 0 0 1 1.41 1.978c.012.026.028.052.04.078l.04.078.075.156c.023.051.05.1.07.153l.065.15a8.848 8.848 0 0 1 .45 1.34.19.19 0 0 0 .201.142.186.186 0 0 0 .172-.184c.01-.246.002-.532-.024-.856z' },
+  terraform: { color: '#844FBA', path: 'M1.44 0v7.575l6.561 3.79V3.787zm21.12 4.227l-6.561 3.791v7.574l6.56-3.787zM8.72 4.23v7.575l6.561 3.787V8.018zm0 8.405v7.575L15.28 24v-7.578z' },
+  // Extensions catalog (docs/apps) brands, same simple-icons source. Tailscale's
+  // official hex is near-black, so it renders in currentColor like Vercel.
+  convex: { color: '#EE342F', path: 'M15.09 18.916c3.488-.387 6.776-2.246 8.586-5.348-.857 7.673-9.247 12.522-16.095 9.545a3.47 3.47 0 0 1-1.547-1.314c-1.539-2.417-2.044-5.492-1.318-8.282 2.077 3.584 6.3 5.78 10.374 5.399m-10.501-7.65c-1.414 3.266-1.475 7.092.258 10.24-6.1-4.59-6.033-14.41-.074-18.953a3.44 3.44 0 0 1 1.893-.707c2.825-.15 5.695.942 7.708 2.977-4.09.04-8.073 2.66-9.785 6.442m11.757-5.437C14.283 2.951 11.053.992 7.515.933c6.84-3.105 15.253 1.929 16.17 9.37a3.6 3.6 0 0 1-.334 2.02c-1.278 2.594-3.647 4.607-6.416 5.352 2.029-3.763 1.778-8.36-.589-11.847' },
+  netlify: { color: '#00C7B7', path: 'M6.49 19.04h-.23L5.13 17.9v-.23l1.73-1.71h1.2l.15.15v1.2L6.5 19.04ZM5.13 6.31V6.1l1.13-1.13h.23L8.2 6.68v1.2l-.15.15h-1.2L5.13 6.31Zm9.96 9.09h-1.65l-.14-.13v-3.83c0-.68-.27-1.2-1.1-1.23-.42 0-.9 0-1.43.02l-.07.08v4.96l-.14.14H8.9l-.13-.14V8.73l.13-.14h3.7a2.6 2.6 0 0 1 2.61 2.6v4.08l-.13.14Zm-8.37-2.44H.14L0 12.82v-1.64l.14-.14h6.58l.14.14v1.64l-.14.14Zm17.14 0h-6.58l-.14-.14v-1.64l.14-.14h6.58l.14.14v1.64l-.14.14ZM11.05 6.55V1.64l.14-.14h1.65l.14.14v4.9l-.14.14h-1.65l-.14-.13Zm0 15.81v-4.9l.14-.14h1.65l.14.13v4.91l-.14.14h-1.65l-.14-.14Z' },
+  supabase: { color: '#3FCF8E', path: 'M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z' },
+  tailscale: { color: undefined, path: 'M24 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-9 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm0-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6-6a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM3 24a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm18 .5a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM6 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm9-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-3 2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM3 5.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z' },
+};
+
+export function IntegrationIcon({ slug, size = 18 }: { slug: string; size?: number }) {
+  const icon = INTEGRATION_ICONS[slug];
+  if (!icon) return null;
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={icon.color ? { color: icon.color } : undefined} aria-hidden="true">
+      <path d={icon.path} />
+    </svg>
+  );
+}
diff --git a/components/landing-icons.tsx b/components/landing-icons.tsx
new file mode 100644
index 000000000..1b2d897f7
--- /dev/null
+++ b/components/landing-icons.tsx
@@ -0,0 +1,25 @@
+// Quick-card glyphs from IBM Carbon (https://carbondesignsystem.com, Apache-2.0).
+// Rendered in currentColor at the call site's text colour.
+export function CarbonRocket({ size = 22 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 32 32" width={size} height={size} fill="currentColor" aria-hidden="true">
+      <path d="M6.34 19H17.65V21H6.34z" transform="rotate(-45 11.995 20.002)" /><path d="M17,30a1,1,0,0,1-.37-.07,1,1,0,0,1-.62-.79l-1-7,2-.28.75,5.27L21,24.52V17a1,1,0,0,1,.29-.71l4.07-4.07A8.94,8.94,0,0,0,28,5.86V4H26.14a8.94,8.94,0,0,0-6.36,2.64l-4.07,4.07A1,1,0,0,1,15,11H7.48L4.87,14.26l5.27.75-.28,2-7-1a1,1,0,0,1-.79-.62,1,1,0,0,1,.15-1l4-5A1,1,0,0,1,7,9h7.59l3.77-3.78A10.92,10.92,0,0,1,26.14,2H28a2,2,0,0,1,2,2V5.86a10.92,10.92,0,0,1-3.22,7.78L23,17.41V25a1,1,0,0,1-.38.78l-5,4A1,1,0,0,1,17,30Z" />
+    </svg>
+  );
+}
+
+export function CarbonCode({ size = 22 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 32 32" width={size} height={size} fill="currentColor" aria-hidden="true">
+      <path d="M31 16 24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16z" /><path d="M1 16 8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16z" /><path d="M5.91 15H26.080000000000002V17H5.91z" transform="rotate(-75 15.996 16)" />
+    </svg>
+  );
+}
+
+export function CarbonApi({ size = 22 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 32 32" width={size} height={size} fill="currentColor" aria-hidden="true">
+      <path d="M26,22a3.86,3.86,0,0,0-2,.57l-3.09-3.1a6,6,0,0,0,0-6.94L24,9.43A3.86,3.86,0,0,0,26,10a4,4,0,1,0-4-4,3.86,3.86,0,0,0,.57,2l-3.1,3.09a6,6,0,0,0-6.94,0L9.43,8A3.86,3.86,0,0,0,10,6a4,4,0,1,0-4,4,3.86,3.86,0,0,0,2-.57l3.09,3.1a6,6,0,0,0,0,6.94L8,22.57A3.86,3.86,0,0,0,6,22a4,4,0,1,0,4,4,3.86,3.86,0,0,0-.57-2l3.1-3.09a6,6,0,0,0,6.94,0L22.57,24A3.86,3.86,0,0,0,22,26a4,4,0,1,0,4-4ZM26,4a2,2,0,1,1-2,2A2,2,0,0,1,26,4ZM4,6A2,2,0,1,1,6,8,2,2,0,0,1,4,6ZM6,28a2,2,0,1,1,2-2A2,2,0,0,1,6,28Zm10-8a4,4,0,1,1,4-4A4,4,0,0,1,16,20Zm10,8a2,2,0,1,1,2-2A2,2,0,0,1,26,28Z" />
+    </svg>
+  );
+}
diff --git a/components/language-comparisons.tsx b/components/language-comparisons.tsx
index 04dce0378..284cea2cd 100644
--- a/components/language-comparisons.tsx
+++ b/components/language-comparisons.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { Children, type ReactNode, useId, useState } from 'react';
 
 export function LanguageComparisons({ children, titles }: { children: ReactNode; titles: string[] }) {
@@ -9,18 +10,18 @@ export function LanguageComparisons({ children, titles }: { children: ReactNode;
   const id = useId();
 
   return (
-    <div className="language-comparisons">
-      <div className="language-comparison-options">
+    <div className="language-comparisons w-full my-3 overflow-hidden border border-(--border-primary) rounded-[4px] bg-(--bg-surface)">
+      <div className="language-comparison-options grid grid-cols-2 [&>button+button]:border-l [&>button+button]:border-l-(--border-primary)">
         {titles.map((title, index) => {
           const open = openIndex === index;
           return (
-            <button key={title} type="button" aria-expanded={open} aria-controls={`${id}-${index}`} onClick={() => setOpenIndex(open ? null : index)}>
-              <ChevronDown size={13} /><span>{title}</span>
+            <button className="min-h-[34px] px-2.5 py-[5px] flex items-center gap-[7px] border-0 text-(--text-secondary) bg-transparent font-sans! text-[12px]! leading-4! font-[550]! cursor-pointer hover:text-(--text-primary) hover:bg-(--bg-inert) aria-expanded:text-(--text-primary) aria-expanded:bg-(--bg-inert)" key={title} type="button" aria-expanded={open} aria-controls={`${id}-${index}`} onClick={() => setOpenIndex(open ? null : index)}>
+              <ChevronDown className={cn('flex-none text-(--text-quaternary) transition-transform duration-150 ease-[ease]', open ? 'rotate-0' : '-rotate-90')} size={13} /><span>{title}</span>
             </button>
           );
         })}
       </div>
-      {openIndex !== null && <div className="language-comparison-content" id={`${id}-${openIndex}`} role="region" aria-label={titles[openIndex]}>{panels[openIndex]}</div>}
+      {openIndex !== null && <div className="language-comparison-content pt-[14px] px-4 pb-4 border-t border-t-(--border-primary) bg-(--bg-raised) [&>div>:first-child]:mt-0! [&>div>:last-child]:mb-0!" id={`${id}-${openIndex}`} role="region" aria-label={titles[openIndex]}>{panels[openIndex]}</div>}
     </div>
   );
 }
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index 915781017..cd09441ff 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -1,4 +1,5 @@
 import { Children, cloneElement, createElement, isValidElement } from 'react';
+import { cn } from '@/lib/utils';
 import type { AnchorHTMLAttributes, ComponentProps, ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
 import type { MDXComponents } from 'mdx/types';
 import defaultComponents from 'fumadocs-ui/mdx';
@@ -14,6 +15,8 @@ import { withDocsBasePath, withoutDocsBasePath } from '@/lib/docs-paths';
 import { PlaceholderPre as InteractivePlaceholderPre } from './placeholder-code';
 import { HeadingAnchor } from './heading-anchor';
 import { LanguageComparisons } from './language-comparisons';
+import { Mermaid } from './mermaid';
+import { AppCard, AppCards } from './app-cards';
 
 // play.axiom.co links come in two shapes: runnable APL query links
 // (…/query?initForm=…) that render as the compact "Run in Playground" button
@@ -63,25 +66,63 @@ function PlaceholderPre(props: ComponentProps<'pre'>) {
   return <InteractivePlaceholderPre {...props} source={textOf(props.children)} />;
 }
 
+// The left rule carries the notice's meaning, so each variant only has to supply
+// --notice-accent; everything else is shared. Unknown types fall back to info,
+// matching the old CSS where the base rule set the default accent.
+const NOTICE_ACCENT: Record<string, string> = {
+  info: 'doc-notice-info [--notice-accent:var(--color-info)]',
+  idea: 'doc-notice-idea [--notice-accent:var(--color-accent)]',
+  warn: 'doc-notice-warn [--notice-accent:var(--color-warning)]',
+  error: 'doc-notice-error [--notice-accent:var(--color-destructive)]',
+  success: 'doc-notice-success [--notice-accent:var(--color-success)]',
+};
+
 function Notice({ children, title, type = 'info' }: { children: ReactNode; title?: ReactNode; type?: 'info' | 'warn' | 'error' | 'success' | 'idea' }) {
-  return <aside className={`doc-notice doc-notice-${type}`}>{title && <strong>{title}</strong>}<div>{children}</div></aside>;
+  const accent = NOTICE_ACCENT[type] ?? `doc-notice-${type} [--notice-accent:var(--color-info)]`;
+  return <aside className={cn('doc-notice my-6 mx-0 py-[15px] px-4 border-l-3 border-l-(--notice-accent) rounded-[3px] bg-(--bg-inert) text-(--text-secondary) font-sans text-[14px] leading-[22px] font-[450] tracking-[-.005em] [&_:where(p,ul,ol)]:m-0! [&_:is(p,ul,ol)+:is(p,ul,ol)]:mt-[14px]!', accent)}>{title && <strong className="block mb-[5px] text-(--text-primary) font-semibold">{title}</strong>}<div>{children}</div></aside>;
 }
 
+// Borderless media: the screenshot itself is the surface — no padded box.
+// Captions hang beneath with a └ tick, like an annotation off the image.
 function Frame({ children, caption }: { children: ReactNode; caption?: ReactNode }) {
-  return <figure className="doc-frame">{children}{caption && <figcaption>{caption}</figcaption>}</figure>;
+  return (
+    <figure className="doc-frame my-6 mx-0 p-0 [&_img]:w-full [&_img]:rounded-[4px] [&_video]:w-full [&_video]:rounded-[4px]">
+      {children}
+      {caption && (
+        <figcaption className="mt-2 flex items-start gap-1.5 pl-1 text-(--text-quaternary) font-sans text-[12px] leading-[17px]">
+          <span aria-hidden="true" className="flex-none font-mono leading-[15px]">└</span>
+          <span className="min-w-0">{caption}</span>
+        </figcaption>
+      )}
+    </figure>
+  );
 }
 
 function CodeGroup({ children }: { children: ReactNode }) {
-  return <div className="code-group">{children}</div>;
+  return <div className="code-group my-6 mx-0 overflow-hidden border border-(--border-primary) rounded-[4px] [&>*]:m-0! [&>*]:border-0! [&>*]:rounded-none! [&>*]:border-b! [&>*]:border-b-(--border-primary)! [&>*:last-child]:border-b-0!">{children}</div>;
 }
 
+// Wrapped in the same restyle class as AccordionGroup — a bare <Accordions>
+// would fall through to fumadocs defaults plus the article's h3 typography
+// (heading-scale trigger with the prose heading margin trapped inside the box).
 function Accordion({ children, title }: { children: ReactNode; title: ReactNode }) {
-  return <Accordions type="single"><FumaAccordion title={title}>{children}</FumaAccordion></Accordions>;
+  return <div className={ACCORDION_GROUP_CLASS}><Accordions type="single"><FumaAccordion title={title}>{children}</FumaAccordion></Accordions></div>;
 }
 
+// Restyles fumadocs' Accordions internals; `!` where fumadocs' own classes
+// carry data-state variants that would otherwise outrank the wrapper variant.
+const ACCORDION_GROUP_CLASS = cn(
+  'accordion-group w-full my-3 mx-0',
+  '[&>div]:w-full [&>div]:m-0! [&>div]:overflow-hidden [&>div]:border! [&>div]:border-(--border-primary)! [&>div]:rounded-[4px]! [&>div]:bg-(--bg-surface)',
+  '[&_h3]:m-0!',
+  '[&_h3_button]:min-h-[34px] [&_h3_button]:py-[5px]! [&_h3_button]:px-[9px]! [&_h3_button]:gap-1.5! [&_h3_button]:text-(--text-secondary) [&_h3_button]:font-sans [&_h3_button]:text-[12px] [&_h3_button]:leading-4 [&_h3_button]:font-[550]',
+  '[&_h3_button:hover]:bg-(--bg-inert) [&_h3_button:hover]:text-(--text-primary)',
+  "[&_[data-state='open']>div]:pt-0.5! [&_[data-state='open']>div]:px-2.5! [&_[data-state='open']>div]:pb-2.5!",
+);
+
 function AccordionGroup({ children }: { children: ReactNode }) {
   const items = Children.toArray(children).filter(isValidElement) as ReactElement<{ children?: ReactNode; title?: ReactNode }>[];
-  return <div className="accordion-group"><Accordions type="single">{items.map((item, index) => <FumaAccordion key={index} title={item.props.title}>{item.props.children}</FumaAccordion>)}</Accordions></div>;
+  return <div className={ACCORDION_GROUP_CLASS}><Accordions type="single">{items.map((item, index) => <FumaAccordion key={index} title={item.props.title}>{item.props.children}</FumaAccordion>)}</Accordions></div>;
 }
 
 function QueryLanguageComparisons({ children }: { children: ReactNode }) {
@@ -89,10 +130,30 @@ function QueryLanguageComparisons({ children }: { children: ReactNode }) {
   return <LanguageComparisons titles={items.map((item) => textOf(item.props.title))}>{items.map((item, index) => <div key={index}>{item.props.children}</div>)}</LanguageComparisons>;
 }
 
+// Restyles fumadocs' Tabs internals. The `!` markers mirror the rules this
+// replaces: fumadocs styles the same properties with data/aria variants.
+// Hover is scoped to :not([aria-selected=true]) because the hover and selected
+// colour rules tie on specificity — unscoped, emit order would decide.
+const DOCS_TABS_CLASS = cn(
+  'docs-tabs my-5 mx-0',
+  '[&>div]:m-0! [&>div]:overflow-hidden [&>div]:border! [&>div]:border-(--border-primary)! [&>div]:rounded-[4px]! [&>div]:bg-(--bg-surface)!',
+  "[&_[role='tablist']]:min-h-[38px] [&_[role='tablist']]:py-0! [&_[role='tablist']]:px-2.5! [&_[role='tablist']]:items-stretch [&_[role='tablist']]:gap-0.5! [&_[role='tablist']]:border-b [&_[role='tablist']]:border-b-(--border-primary) [&_[role='tablist']]:bg-(--bg-surface)",
+  "[&_[role='tab']]:relative [&_[role='tab']]:py-0! [&_[role='tab']]:px-2! [&_[role='tab']]:border-0! [&_[role='tab']]:text-(--text-quaternary)! [&_[role='tab']]:font-mono! [&_[role='tab']]:text-[11px]! [&_[role='tab']]:leading-4! [&_[role='tab']]:font-medium!",
+  "[&_[role='tab']:hover:not([aria-selected='true'])]:text-(--text-secondary)!",
+  "[&_[role='tab'][aria-selected='true']]:text-(--text-primary)!",
+  "[&_[role='tab'][aria-selected='true']]:after:absolute [&_[role='tab'][aria-selected='true']]:after:right-2 [&_[role='tab'][aria-selected='true']]:after:-bottom-px [&_[role='tab'][aria-selected='true']]:after:left-2 [&_[role='tab'][aria-selected='true']]:after:h-0.5 [&_[role='tab'][aria-selected='true']]:after:bg-(--color-accent) [&_[role='tab'][aria-selected='true']]:after:content-['']",
+  "[&_[role='tabpanel']]:pt-[14px]! [&_[role='tabpanel']]:px-4! [&_[role='tabpanel']]:pb-4! [&_[role='tabpanel']]:rounded-none! [&_[role='tabpanel']]:bg-(--bg-raised)!",
+  "[&_[role='tabpanel']>*]:my-0! [&_[role='tabpanel']>*+*]:mt-[11px]!",
+  '[&_:is(figure[data-rehype-pretty-code-figure],figure.shiki)]:rounded-[4px]! [&_:is(figure[data-rehype-pretty-code-figure],figure.shiki)]:shadow-none!',
+  // Re-override the article's table-wrap margin (its :has() selector is more
+  // specific than the generic panel child rules above).
+  "[&_[role='tabpanel']>div.relative.overflow-auto:has(>table)]:mt-[11px]! [&_[role='tabpanel']>div.relative.overflow-auto:has(>table)]:mb-0!",
+);
+
 function Tabs({ children }: { children: ReactNode }) {
   const tabs = Children.toArray(children).filter(isValidElement) as ReactElement<{ title?: string; value?: string }>[];
   const items = tabs.map((tab, index) => tab.props.title ?? `Tab ${index + 1}`);
-  return <div className="docs-tabs"><FumaTabs items={items}>{tabs.map((tab, index) => cloneElement(tab, { ...tab.props, value: items[index] }))}</FumaTabs></div>;
+  return <div className={DOCS_TABS_CLASS}><FumaTabs items={items}>{tabs.map((tab, index) => cloneElement(tab, { ...tab.props, value: items[index] }))}</FumaTabs></div>;
 }
 
 function containsPlaygroundLink(node: ReactNode): boolean {
@@ -102,12 +163,23 @@ function containsPlaygroundLink(node: ReactNode): boolean {
   return Children.toArray(props.children).some(containsPlaygroundLink);
 }
 
+// Overlays the "Run in Playground" pill and the copy button on the code block's
+// top-right corner; the copy button sits left of the pill and gets a backdrop
+// so it stays legible over code.
+const QUERY_EXAMPLE_CLASS = cn(
+  'query-example relative mt-[11px]',
+  '[&>figure]:m-0!',
+  '[&>p:has(>.playground-link)]:absolute [&>p:has(>.playground-link)]:z-2 [&>p:has(>.playground-link)]:top-[7px] [&>p:has(>.playground-link)]:right-2 [&>p:has(>.playground-link)]:m-0!',
+  "[&_figure>div:has(>button[aria-label='Copy_Text'])]:top-[7px]! [&_figure>div:has(>button[aria-label='Copy_Text'])]:right-[164px]! [&_figure>div:has(>button[aria-label='Copy_Text'])]:size-6",
+  "[&_figure_button[aria-label='Copy_Text']]:size-6 [&_figure_button[aria-label='Copy_Text']]:border [&_figure_button[aria-label='Copy_Text']]:border-(--border-primary) [&_figure_button[aria-label='Copy_Text']]:rounded-[3px] [&_figure_button[aria-label='Copy_Text']]:bg-[color-mix(in_srgb,var(--bg-canvas)_88%,transparent)]",
+);
+
 function Tab({ children, value }: { children: ReactNode; title?: string; value?: string }) {
   const content: ReactNode[] = [];
   Children.toArray(children).forEach((child, index) => {
     if (containsPlaygroundLink(child) && content.length > 0) {
       const query = content.pop();
-      content.push(<div className="query-example" key={`query-${index}`}>{query}{child}</div>);
+      content.push(<div className={QUERY_EXAMPLE_CLASS} key={`query-${index}`}>{query}{child}</div>);
       return;
     }
     content.push(child);
@@ -116,7 +188,7 @@ function Tab({ children, value }: { children: ReactNode; title?: string; value?:
 }
 
 function Field({ children, path, type, required }: { children: ReactNode; path?: string; type?: string; required?: boolean }) {
-  return <div className="api-field"><div className="api-field-heading"><code>{path}</code>{type && <span>{type}</span>}{required && <strong>required</strong>}</div>{children}</div>;
+  return <div className="api-field my-4 mx-0 py-4 px-0 border-t border-t-(--border-secondary)"><div className="api-field-heading flex items-center gap-2"><code>{path}</code>{type && <span className="text-(--text-quaternary) font-mono text-[10px] leading-[14px] font-[450]">{type}</span>}{required && <strong className="text-(--red-400) font-mono text-[10px] leading-[14px] font-[450]">required</strong>}</div>{children}</div>;
 }
 
 export function Icon({ icon, iconType }: { icon?: string; iconType?: string }) {
@@ -132,7 +204,7 @@ export function Icon({ icon, iconType }: { icon?: string; iconType?: string }) {
   }
 
   return createElement(glyph, {
-    className: 'doc-icon',
+    className: 'doc-icon w-[1.05em] h-[1.05em] my-0 mx-[.1em] inline-block align-[-.16em] flex-none text-(--text-secondary)',
     strokeWidth: docIconStrokeWidth(iconType),
     'aria-hidden': true,
     focusable: 'false',
@@ -174,6 +246,9 @@ export const mdxComponents: MDXComponents = {
   Frame,
   Icon,
   Info,
+  Mermaid,
+  AppCard,
+  AppCards,
   Note: (props) => <Notice {...props} type="info" />,
   Tip: (props) => <Notice {...props} type="idea" />,
   Warning,
diff --git a/components/mermaid.tsx b/components/mermaid.tsx
new file mode 100644
index 000000000..84e3b0a7b
--- /dev/null
+++ b/components/mermaid.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import { useEffect, useId, useRef, useState } from 'react';
+import { useTheme } from 'next-themes';
+
+// Diagrams are themed from the Axiom semantic tokens rather than mermaid's
+// stock palettes, read off :root at render time so they follow data-theme.
+function axiomThemeVariables(dark: boolean) {
+  const styles = getComputedStyle(document.documentElement);
+  const token = (name: string) => styles.getPropertyValue(name).trim();
+  return {
+    fontFamily: token('--font-mono'),
+    fontSize: '12.5px',
+    background: token('--bg-canvas'),
+    // Node boxes.
+    primaryColor: token('--bg-emph-tertiary'),
+    primaryBorderColor: token('--border-strong'),
+    primaryTextColor: token('--text-primary'),
+    mainBkg: token('--bg-emph-tertiary'),
+    nodeBorder: token('--border-strong'),
+    // Subgraph containers sit one step quieter than nodes so the boxes read
+    // as grouping, not as more nodes. No token this faint; keep it literal.
+    clusterBkg: dark ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)',
+    clusterBorder: token('--border-primary'),
+    titleColor: token('--text-quaternary'),
+    // Edges and labels.
+    lineColor: token('--text-quaternary'),
+    textColor: token('--text-secondary'),
+    edgeLabelBackground: token('--bg-canvas'),
+    // Secondary/tertiary shapes fall back to quiet surfaces.
+    secondaryColor: token('--bg-inert'),
+    secondaryBorderColor: token('--border-primary'),
+    tertiaryColor: token('--bg-inert'),
+    tertiaryBorderColor: token('--border-primary'),
+  };
+}
+
+// Injected into the rendered SVG. The SVG is inline in the page, so CSS
+// variables resolve and flip with data-theme like everything else.
+const THEME_CSS = `
+  .node rect, .cluster rect { rx: 4px; ry: 4px; }
+  .nodeLabel { font-weight: 450; letter-spacing: -.01em; padding: 2px 4px; line-height: 1.35; }
+  .cluster-label span, .cluster-label .nodeLabel, .cluster-label text {
+    text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: .09em;
+  }
+  .edgePaths path { stroke-width: 1.25px; }
+  .marker { stroke-width: 1px; }
+  .node[data-axiom-brand] rect, .node[data-axiom-brand] path {
+    stroke: color-mix(in srgb, var(--color-accent) 62%, transparent);
+    fill: color-mix(in srgb, var(--color-accent) 8%, transparent);
+  }
+  /* Mermaid inlines colours on the nested label elements, so descendants and
+     !important are both needed for the brand label to win. */
+  .node[data-axiom-brand] .nodeLabel, .node[data-axiom-brand] .nodeLabel * {
+    color: var(--color-accent-text) !important; font-weight: 600;
+  }
+`;
+
+// Nodes labelled exactly "Axiom" are the product in an architecture diagram;
+// pick them out in the brand accent.
+function tagAxiomNodes(svg: string): string {
+  const doc = new DOMParser().parseFromString(svg, 'text/html');
+  const root = doc.body.querySelector('svg');
+  if (!root) return svg;
+  for (const label of root.querySelectorAll('.nodeLabel')) {
+    if (label.textContent?.trim() === 'Axiom') label.closest('.node')?.setAttribute('data-axiom-brand', '');
+  }
+  return root.outerHTML;
+}
+
+export function Mermaid({ chart }: { chart: string }) {
+  const rawId = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const renderedKey = useRef<string | null>(null);
+  const [svg, setSvg] = useState('');
+  const [failed, setFailed] = useState(false);
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    const key = `${resolvedTheme} ${chart}`;
+    if (renderedKey.current === key) return;
+    renderedKey.current = key;
+    let cancelled = false;
+
+    void (async () => {
+      const { default: mermaid } = await import('mermaid');
+      // useId's delimiters aren't valid in the CSS selectors mermaid builds.
+      const id = `mermaid-${rawId.replace(/[^a-zA-Z0-9-]/g, '')}`;
+      try {
+        const dark = resolvedTheme !== 'light';
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: 'base',
+          darkMode: dark,
+          themeVariables: axiomThemeVariables(dark),
+          themeCSS: THEME_CSS,
+          flowchart: {
+            curve: 'basis',
+            padding: 10,
+            nodeSpacing: 36,
+            rankSpacing: 42,
+            // Clear the uppercase title off the first node row.
+            subGraphTitleMargin: { top: 8, bottom: 16 },
+          },
+        });
+        const rendered = await mermaid.render(id, chart.replaceAll('\\n', '\n'));
+        if (cancelled) return;
+        setFailed(false);
+        setSvg(tagAxiomNodes(rendered.svg));
+        if (containerRef.current) rendered.bindFunctions?.(containerRef.current);
+      } catch (error) {
+        // Leave the source readable rather than an empty frame when the chart
+        // has a syntax error.
+        console.error('[docs] mermaid render failed', error);
+        if (!cancelled) setFailed(true);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [chart, rawId, resolvedTheme]);
+
+  if (failed) {
+    return <pre className="doc-mermaid-source my-6 p-4 overflow-x-auto border border-(--border-primary) rounded-[4px] bg-(--bg-surface) text-(--text-tertiary)">{chart}</pre>;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="doc-mermaid my-7 overflow-x-auto [&_svg]:mx-auto [&_svg]:max-w-full [&_svg]:h-auto"
+      role="img"
+      aria-label="Diagram"
+      data-rendered={svg ? '' : undefined}
+    >
+      {svg ? (
+        <div dangerouslySetInnerHTML={{ __html: svg }} />
+      ) : (
+        <span className="flex min-h-24 items-center justify-center text-(--text-quaternary) font-mono text-[11px] leading-4 font-[450]">Rendering diagram…</span>
+      )}
+    </div>
+  );
+}
diff --git a/components/placeholder-code.tsx b/components/placeholder-code.tsx
index 33293cabc..9fe384586 100644
--- a/components/placeholder-code.tsx
+++ b/components/placeholder-code.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { isValidElement, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-react';
 import type { ComponentProps, ReactNode } from 'react';
 import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
 import { captureDocsEvent } from '@/lib/docs-analytics';
@@ -19,6 +21,9 @@ type Values = Partial<Record<FieldKey, string>>;
 const fieldKeys = Object.keys(fields) as FieldKey[];
 const trackedFields = new Set<FieldKey>();
 
+// `.placeholder-config input, .placeholder-config select` in globals.css.
+const placeholderControlClass = 'min-w-0 h-8 px-2.5 py-0 border border-(--border-primary) rounded-[4px] outline-none text-(--text-secondary) bg-(--bg-canvas) font-mono text-[12px] leading-4 font-normal focus:border-(--color-accent) focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-accent)_18%,transparent)]';
+
 function placeholderPattern() {
   return new RegExp(`\\b(${fieldKeys.join('|')})\\b`, 'g');
 }
@@ -97,10 +102,10 @@ export function PlaceholderPre({ source: sourceProp, ...props }: ComponentProps<
 
   return <>
     <CodeBlock ref={codeBlockRef} {...props}><Pre>{props.children}</Pre></CodeBlock>
-    {hydrated && usedFields.length > 0 && <div className="placeholder-config ph-no-capture" aria-label="Customize this example" data-ph-no-capture>
+    {hydrated && usedFields.length > 0 && <div className="placeholder-config ph-no-capture mt-0 mx-0 mb-6 py-[14px] px-4 flex flex-col gap-2.5 border-x border-b border-(--border-primary) rounded-t-none rounded-b-[4px] bg-(--bg-inert)" aria-label="Customize this example" data-ph-no-capture>
       {usedFields.map((key) => {
         const field = fields[key];
-        return <label key={key}><span>{field.label}</span>{'options' in field ? <select value={values[key] ?? ''} onChange={(event) => update(key, event.target.value)}>{field.options.map((option) => <option value={option} key={option}>{option || 'Select edge deployment'}</option>)}</select> : <input value={values[key] ?? ''} placeholder={field.placeholder} autoComplete="off" data-1p-ignore data-ph-no-capture onChange={(event) => update(key, event.target.value)} />}</label>;
+        return <label className="grid grid-cols-[110px_1fr] items-center gap-3 text-(--text-tertiary) font-sans text-[12px] leading-4 font-medium max-sm:grid-cols-[1fr] max-sm:gap-[5px]" key={key}><span>{field.label}</span>{'options' in field ? <span className="relative min-w-0"><select className={cn(placeholderControlClass, 'w-full appearance-none pr-8')} value={values[key] ?? ''} onChange={(event) => update(key, event.target.value)}>{field.options.map((option) => <option value={option} key={option}>{option || 'Select edge deployment'}</option>)}</select><ChevronDown size={14} aria-hidden="true" className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-(--text-quaternary)" /></span> : <input className={cn(placeholderControlClass, 'font-mono! text-[12px]! leading-4! font-normal!')} value={values[key] ?? ''} placeholder={field.placeholder} autoComplete="off" data-1p-ignore data-ph-no-capture onChange={(event) => update(key, event.target.value)} />}</label>;
       })}
     </div>}
   </>;
diff --git a/components/playground-link.tsx b/components/playground-link.tsx
index 5d2fc64f7..7ffdc3956 100644
--- a/components/playground-link.tsx
+++ b/components/playground-link.tsx
@@ -2,6 +2,7 @@
 
 import { ExternalLink, Play } from 'lucide-react';
 import type { AnchorHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
 import { captureDocsEvent } from '@/lib/docs-analytics';
 
 export function PlaygroundLink({
@@ -13,7 +14,7 @@ export function PlaygroundLink({
   return (
     <a
       {...props}
-      className={['playground-link', 'ph-no-capture', className].filter(Boolean).join(' ')}
+      className={cn('playground-link ph-no-capture', 'w-fit min-h-6 px-[7px] py-0 inline-flex items-center gap-[5px] border border-(--border-primary) rounded-[3px] text-(--text-secondary)! bg-[color-mix(in_srgb,var(--bg-canvas)_88%,transparent)] font-mono text-[10px] leading-[14px] font-[550] no-underline! hover:border-(--border-strong) hover:text-(--text-primary)! hover:bg-(--bg-raised)', className)}
       target="_blank"
       rel="noreferrer"
       onClick={(event) => {
@@ -23,7 +24,7 @@ export function PlaygroundLink({
     >
       <Play size={12} />
       <span>{children}</span>
-      <ExternalLink size={11} aria-label="Opens in a new tab" />
+      <ExternalLink className="text-(--text-quaternary)" size={11} aria-label="Opens in a new tab" />
     </a>
   );
 }
diff --git a/components/search-prompt.tsx b/components/search-prompt.tsx
index 11035fcf2..fc692cf59 100644
--- a/components/search-prompt.tsx
+++ b/components/search-prompt.tsx
@@ -6,9 +6,12 @@ import { useDocsSearchController } from '@/components/docs-search-provider';
 export function SearchPrompt() {
   const { openSearch } = useDocsSearchController();
   return (
-    <button className="hero-search" onClick={() => openSearch('hero')}>
+    <button
+      className="hero-search w-full h-10 mt-7 px-[14px] py-0 flex items-center gap-2.5 border border-(--border-strong) rounded-[4px] text-(--text-tertiary) bg-(--bg-surface) cursor-pointer hover:bg-(--bg-raised)"
+      onClick={() => openSearch('hero')}
+    >
       <Search size={16} />
-      <span>Search the docs — or ask a question…</span>
+      <span className="flex-1 text-left font-sans text-[15px] leading-5 font-normal">Search the docs — or ask a question…</span>
       <kbd>⌘K</kbd>
     </button>
   );
@@ -16,5 +19,5 @@ export function SearchPrompt() {
 
 export function AskAiPrompt() {
   const { openAssistant } = useDocsSearchController();
-  return <button onClick={() => openAssistant('', 'hero')}>Ask AI ⌘I</button>;
+  return <button className="p-0 border-0 text-inherit bg-transparent cursor-pointer" onClick={() => openAssistant('', 'hero')}>Ask AI ⌘I</button>;
 }
diff --git a/components/site-header.tsx b/components/site-header.tsx
index a52350133..e4871c5c3 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ZoneLink as Link } from '@/components/zone-link';
+import { cn } from '@/lib/utils';
 import { usePathname } from 'next/navigation';
 import { withDocsBasePath } from '@/lib/docs-paths';
 import { useTheme } from 'next-themes';
@@ -15,9 +16,15 @@ const tabs = [
   { label: 'API reference', href: '/docs/restapi/introduction', match: (path: string) => path.startsWith('/docs/restapi/') },
 ];
 
+// Shared chrome for the two `.header-icon` buttons (mobile trigger, theme summary).
+// Display is set per call site: the trigger is hidden until max-xl, the theme
+// summary is always inline-flex.
+const headerIconClass = 'h-7 w-7 items-center justify-center gap-1.5 rounded-[4px] border border-(--border-primary) bg-transparent text-(--text-secondary) cursor-pointer hover:bg-(--bg-emph-primary)';
+const themeOptionClass = "flex h-8 w-full items-center gap-2 rounded-[3px] border-0 px-[7px] py-0 bg-transparent text-(--text-tertiary) font-sans text-[13px] leading-4 font-medium cursor-pointer hover:bg-(--bg-emph-tertiary) hover:text-(--text-primary) aria-checked:bg-(--bg-emph-tertiary) aria-checked:text-(--text-primary)";
+
 function AxiomMark() {
   return (
-    <svg className="brand-mark" viewBox="0 0 358 309" aria-hidden="true">
+    <svg className="brand-mark w-[25px] h-[22px] fill-current max-sm:w-[23px] max-sm:h-[20px]" viewBox="0 0 358 309" aria-hidden="true">
       <path d="M354.75 215.609 278.412 87.847c-3.501-5.872-12.127-10.676-19.17-10.676h-47.659c-11.077 0-15.618-7.548-10.093-16.772l26.136-43.627c2.074-3.463 2.069-7.725-.011-11.183C225.534 2.13 221.691 0 217.533 0h-66.485c-7.044 0-15.688 4.793-19.212 10.652L2.645 225.448c-3.525 5.859-3.526 15.447-.006 21.307l33.243 55.325c5.539 9.217 14.622 9.228 20.184.023l25.974-42.98c5.564-9.205 14.645-9.195 20.185.023l23.548 39.192c3.521 5.86 12.164 10.654 19.207 10.654h153.633c7.04 0 15.685-4.794 19.206-10.654l36.892-61.397c3.521-5.86 3.538-15.459.039-21.332Zm-103.096-6.149c5.505 9.236.945 16.794-10.132 16.794H122.021c-11.077 0-15.609-7.542-10.07-16.76l59.796-99.517c5.539-9.218 14.602-9.217 20.141.001l59.766 99.482Z" />
     </svg>
   );
@@ -27,10 +34,30 @@ export function DocumentationSections({ className = 'header-tabs', onNavigate }:
   // usePathname() strips the /docs basePath, but the tab matchers below expect
   // the full /docs-prefixed path — normalize it the same way the sidebar does.
   const pathname = withDocsBasePath(usePathname());
+  // Tab chrome belongs to the header instance only; the drawer instance
+  // (`.drawer-sections`) styles the same links from its own rules.
+  const headerTabs = className.split(' ').includes('header-tabs');
 
   return (
-    <nav className={className} aria-label="Documentation sections">
-      {tabs.map((tab) => <Link key={tab.href} href={tab.href} prefetch={false} className={tab.match(pathname) ? 'active' : ''} onClick={onNavigate}>{tab.label}</Link>)}
+    <nav className={cn(className, headerTabs && 'flex gap-1 max-xl:hidden')} aria-label="Documentation sections">
+      {tabs.map((tab) => {
+        const active = tab.match(pathname);
+        return (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            prefetch={false}
+            className={cn(
+              active && 'active',
+              headerTabs && 'relative rounded-[4px] px-2.5 py-1.5 font-sans text-[14px] leading-4 font-medium tracking-[-.006em] hover:bg-(--bg-emph-tertiary)',
+              headerTabs && (active
+                ? "text-(--text-primary) after:content-[''] after:absolute after:left-[10px] after:right-[10px] after:bottom-[-14px] after:h-px after:bg-(--color-accent)"
+                : 'text-(--text-tertiary) hover:text-(--text-secondary)'),
+            )}
+            onClick={onNavigate}
+          >{tab.label}</Link>
+        );
+      })}
     </nav>
   );
 }
@@ -50,29 +77,31 @@ export function SiteHeader({ drawerOpen, onMenu }: { drawerOpen: boolean; onMenu
   const ThemeIcon = selectedTheme === 'dark' ? Moon : selectedTheme === 'light' ? Sun : Monitor;
 
   return (
-    <header className="site-header">
-      <button id="docs-navigation-trigger" className="header-icon mobile-menu-trigger" aria-label={drawerOpen ? 'Close navigation' : 'Open navigation'} aria-controls="docs-navigation-drawer" aria-expanded={drawerOpen} onClick={onMenu}>
-        {drawerOpen ? <X size={18} /> : <Menu size={18} />}
+    <header className="site-header fixed inset-x-0 top-0 bottom-auto z-50 flex h-14 items-center gap-6 px-6 py-0 border-b border-(--border-primary) bg-[color-mix(in_srgb,var(--bg-canvas)_94%,transparent)] backdrop-blur-[12px] max-md:gap-3 max-md:px-4 max-sm:gap-2">
+      {/* Hidden on desktop; becomes the drawer toggle below xl, matching
+          the drawer breakpoint in docs-shell. */}
+      <button id="docs-navigation-trigger" className={cn('header-icon mobile-menu-trigger hidden', headerIconClass, 'max-xl:inline-flex max-xl:h-10 max-xl:w-10 max-xl:-ml-2 max-xl:border-transparent')} aria-label={drawerOpen ? 'Close navigation' : 'Open navigation'} aria-controls="docs-navigation-drawer" aria-expanded={drawerOpen} onClick={onMenu}>
+        {drawerOpen ? <X size={16} /> : <Menu size={16} />}
       </button>
-      <Link href="/docs" prefetch={false} className="brand" aria-label="Axiom documentation home">
+      <Link href="/docs" prefetch={false} className="brand flex h-7 flex-none items-center gap-[9px]" aria-label="Axiom documentation home">
         <AxiomMark />
-        <span className="brand-badge">Docs</span>
+        <span className="brand-badge inline-flex h-[18px] items-center pl-[9px] border-0 border-l-2 border-(--color-accent) rounded-none bg-transparent text-(--text-primary) font-mono text-[14px] leading-[18px] font-semibold tracking-[.04em] uppercase max-md:hidden">Docs</span>
       </Link>
       <DocumentationSections />
-      <div className="header-actions">
-        <button className="header-search" aria-label="Search documentation and ask AI" onClick={() => openSearch('header')}>
-          <Search size={14} /><span>Search or ask AI…</span><kbd>⌘K</kbd>
+      <div className="header-actions ml-auto flex items-center gap-2 max-sm:gap-1.5">
+        <button className="header-search flex h-7 w-[220px] items-center gap-2 px-2 py-0 rounded-[4px] border border-(--border-primary) bg-(--bg-inert) text-(--text-tertiary) cursor-pointer max-lg:w-[34px] max-lg:justify-center" aria-label="Search documentation and ask AI" onClick={() => openSearch('header')}>
+          <Search size={14} /><span className="flex-1 text-left font-sans text-[14px] leading-4 font-[450] max-lg:hidden">Search or ask AI…</span><kbd className="max-lg:hidden">⌘K</kbd>
         </button>
-        <details className="theme-menu" ref={themeMenu}>
-          <summary className="header-icon" role="button" aria-haspopup="menu" aria-label={`Color theme: ${selectedTheme}`}><ThemeIcon size={14} /></summary>
-          <div className="theme-menu-popover" role="menu" aria-label="Color theme">
-            <button role="menuitemradio" aria-checked={selectedTheme === 'system'} onClick={() => chooseTheme('system')}><Monitor size={14} /><span>System</span>{selectedTheme === 'system' && <Check size={13} />}</button>
-            <button role="menuitemradio" aria-checked={selectedTheme === 'dark'} onClick={() => chooseTheme('dark')}><Moon size={14} /><span>Dark</span>{selectedTheme === 'dark' && <Check size={13} />}</button>
-            <button role="menuitemradio" aria-checked={selectedTheme === 'light'} onClick={() => chooseTheme('light')}><Sun size={14} /><span>Light</span>{selectedTheme === 'light' && <Check size={13} />}</button>
+        <details className="theme-menu group relative" ref={themeMenu}>
+          <summary className={cn('header-icon inline-flex', headerIconClass, 'list-none [&::-webkit-details-marker]:hidden group-open:bg-(--bg-emph-primary)')} role="button" aria-haspopup="menu" aria-label={`Color theme: ${selectedTheme}`}><ThemeIcon size={14} /></summary>
+          <div className="theme-menu-popover hidden group-open:block absolute top-[34px] right-0 z-[70] w-[132px] p-1 rounded-[4px] border border-(--border-primary) bg-(--bg-overlay) shadow-[0_8px_28px_rgba(0,0,0,.28)]" role="menu" aria-label="Color theme">
+            <button className={themeOptionClass} role="menuitemradio" aria-checked={selectedTheme === 'system'} onClick={() => chooseTheme('system')}><Monitor size={14} /><span className="flex-1 text-left">System</span>{selectedTheme === 'system' && <Check size={13} />}</button>
+            <button className={themeOptionClass} role="menuitemradio" aria-checked={selectedTheme === 'dark'} onClick={() => chooseTheme('dark')}><Moon size={14} /><span className="flex-1 text-left">Dark</span>{selectedTheme === 'dark' && <Check size={13} />}</button>
+            <button className={themeOptionClass} role="menuitemradio" aria-checked={selectedTheme === 'light'} onClick={() => chooseTheme('light')}><Sun size={14} /><span className="flex-1 text-left">Light</span>{selectedTheme === 'light' && <Check size={13} />}</button>
           </div>
         </details>
         <a
-          className="console-button"
+          className="console-button inline-flex h-7 items-center gap-1 px-3 py-0 rounded-[4px] bg-(--bg-emph-primary-inverse) text-(--text-on-inverse-primary) font-sans text-[14px] leading-4 font-semibold max-md:hidden"
           href="https://app.axiom.co"
           target="_blank"
           rel="noreferrer"
diff --git a/components/table-of-contents.tsx b/components/table-of-contents.tsx
index bfe63e210..8af7f8d32 100644
--- a/components/table-of-contents.tsx
+++ b/components/table-of-contents.tsx
@@ -1,8 +1,24 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
 import type { ReactNode } from 'react';
 
+// Was `.floating-toc a` / `.floating-toc a.active` (+ its ::before marker). The
+// colour and weight are split across the two branches rather than layered, so
+// the active state never depends on stylesheet ordering to win.
+//
+// Every colour carries `!` because the unlayered `a { color: inherit }` in
+// app/globals.css outranks anything Tailwind emits into `@layer utilities`;
+// without it all three states would collapse to the inherited body colour.
+// Hover uses `[&:hover]` rather than `hover:` so it is not gated behind
+// `@media (hover: hover)`, matching the unconditional rule it replaces.
+const TOC_LINK =
+  'relative block py-[5px] overflow-hidden font-sans text-[13px] leading-[17px] tracking-[-.006em] text-ellipsis whitespace-nowrap transition-[color] duration-150 ease-[ease] [&:hover]:text-(--text-primary)!';
+const TOC_LINK_IDLE = 'text-(--text-quaternary)! font-[450]';
+const TOC_LINK_ACTIVE =
+  "active text-(--text-primary)! font-[550] before:absolute before:left-px before:top-1/2 before:-translate-y-1/2 before:w-[5px] before:h-[9px] before:bg-current before:content-['']";
+
 export type TocItem = {
   title: ReactNode;
   url: string;
@@ -49,19 +65,26 @@ export function TableOfContents({ items }: { items: TocItem[] }) {
   }, [items]);
 
   return (
-    <aside className="floating-toc" aria-label="On this page">
-      <strong>On this page</strong>
-      {items.map((item) => (
-        <a
-          className={item.url === activeUrl ? 'active' : undefined}
-          aria-current={item.url === activeUrl ? 'location' : undefined}
-          href={item.url}
-          key={item.url}
-          style={{ paddingLeft: 10 + Math.max(0, item.depth - 2) * 10 }}
-        >
-          {item.title}
-        </a>
-      ))}
+    <aside
+      className="floating-toc fixed right-8 top-[112px] z-20 flex w-[210px] max-h-[calc(100vh_-_144px)] flex-col p-0 bg-transparent max-xl:hidden [&_a_code]:text-inherit! [&_a_code]:[font-size:inherit]"
+      aria-label="On this page"
+    >
+      {/* The heading stays outside the scroller so the scroll-fade mask never
+          dims it — only the link list scrolls and fades at its edges. */}
+      <strong className="block mb-[9px] flex-none text-(--text-tertiary) font-mono text-[11px] leading-[14px] font-semibold tracking-[.08em] uppercase">On this page</strong>
+      <div className="min-h-0 flex-1 overflow-auto scroll-fade-t scroll-fade-b">
+        {items.map((item) => (
+          <a
+            className={cn(TOC_LINK, item.url === activeUrl ? TOC_LINK_ACTIVE : TOC_LINK_IDLE)}
+            aria-current={item.url === activeUrl ? 'location' : undefined}
+            href={item.url}
+            key={item.url}
+            style={{ paddingLeft: 10 + Math.max(0, item.depth - 2) * 10 }}
+          >
+            {item.title}
+          </a>
+        ))}
+      </div>
     </aside>
   );
 }
diff --git a/content/docs/(documentation)/apps/introduction.mdx b/content/docs/(documentation)/apps/introduction.mdx
index 264d8696e..a99c5ecf6 100644
--- a/content/docs/(documentation)/apps/introduction.mdx
+++ b/content/docs/(documentation)/apps/introduction.mdx
@@ -9,77 +9,41 @@ This section walks you through a catalog of dedicated extensions that enrich you
 
 To use standard APIs and other data shippers like the Elasticsearch Bulk API, Fluent Bit log processor or Fluentd log collector, go to [Send data](/send-data/methods) instead.
 
-<CardGroup>
-  <Card
-    title="AWS Lambda"
-    href="/apps/lambda"
-  >
+<AppCards>
+  <AppCard title="AWS Lambda" icon="aws" href="/apps/lambda">
     A pre-configured dashboard for logs sent from AWS Lambda.
-  </Card>
-  <Card
-    title="AWS PrivateLink"
-    href="/apps/aws-privatelink"
-  >
-     A configuration path for sending data to Axiom via AWS PrivateLink.
-  </Card>
-  <Card
-    title="Cloudflare Workers"
-    href="/apps/cloudflare-workers"
-  >
+  </AppCard>
+  <AppCard title="AWS PrivateLink" icon="aws" href="/apps/aws-privatelink">
+    A configuration path for sending data to Axiom via AWS PrivateLink.
+  </AppCard>
+  <AppCard title="Cloudflare Workers" icon="cloudflare" href="/apps/cloudflare-workers">
     A pre-configured dashboard for logs sent from Cloudflare Workers.
-  </Card>
-  <Card
-    title="Cloudflare Logpush"
-    href="/apps/cloudflare-logpush"
-  >
+  </AppCard>
+  <AppCard title="Cloudflare Logpush" icon="cloudflare" href="/apps/cloudflare-logpush">
     An integrated workflow for sending data from Cloudflare Logpush to Axiom.
-  </Card>
-  <Card
-    title="Convex"
-    href="/apps/convex"
-  >
+  </AppCard>
+  <AppCard title="Convex" icon="convex" href="/apps/convex">
     Stream function executions and console logs from your Convex deployment to Axiom.
-  </Card>
-  <Card
-    title="Grafana"
-    href="/apps/grafana"
-  >
+  </AppCard>
+  <AppCard title="Grafana" icon="grafana" href="/apps/grafana">
     A data source plugin for visualizing data stored in Axiom in Grafana.
-  </Card>
-  <Card
-    title="Hex"
-    href="/apps/hex"
-  >
+  </AppCard>
+  <AppCard title="Hex" icon="hexagon" href="/apps/hex">
     A recommended pathway to visualize data stored in Axiom in Hex.
-  </Card>
-  <Card
-    title="Netlify"
-    href="/apps/netlify"
-  >
-    An integreated workflow for sending data from Netlify to Axiom.
-  </Card>
-    <Card
-    title="Supabase"
-    href="/apps/supabase"
-  >
+  </AppCard>
+  <AppCard title="Netlify" icon="netlify" href="/apps/netlify">
+    An integrated workflow for sending data from Netlify to Axiom.
+  </AppCard>
+  <AppCard title="Supabase" icon="supabase" href="/apps/supabase">
     A setup that allows you to stream your Supabase project's raw log events directly to Axiom.
-  </Card>
-    <Card
-    title="Tailscale"
-    href="/apps/tailscale"
-  >
+  </AppCard>
+  <AppCard title="Tailscale" icon="tailscale" href="/apps/tailscale">
     A pre-configured dashboard for audit and network flow logs sent from Tailscale.
-  </Card>
-    <Card
-    title="Terraform"
-    href="/apps/terraform"
-  >
+  </AppCard>
+  <AppCard title="Terraform" icon="terraform" href="/apps/terraform">
     A walkthrough on configuring resources in Axiom using Terraform.
-  </Card>
-  <Card
-    title="Vercel"
-    href="/apps/vercel"
-  >
+  </AppCard>
+  <AppCard title="Vercel" icon="vercel" href="/apps/vercel">
     A pre-configured dashboard for logs sent from Vercel.
-  </Card>
-</CardGroup>
\ No newline at end of file
+  </AppCard>
+</AppCards>
\ No newline at end of file
diff --git a/content/docs/(documentation)/send-data/reference-architectures.mdx b/content/docs/(documentation)/send-data/reference-architectures.mdx
index a4f6768c2..ff18eb1af 100644
--- a/content/docs/(documentation)/send-data/reference-architectures.mdx
+++ b/content/docs/(documentation)/send-data/reference-architectures.mdx
@@ -21,8 +21,6 @@ These patterns are designed to provide:
 While these patterns are recommended for large-scale environments, Axiom has many other simpler [methods](/send-data/methods) available to send data.
 </Tip>
 
----
-
 ## The core patterns
 
 There are two primary deployment patterns for a collector: the Agent model and the Aggregator model. Most large organizations use a hybrid of both.
@@ -80,8 +78,6 @@ flowchart LR
     Pool --> Axiom[(Axiom)]
 ```
 
----
-
 ## Tool recommendations
 
 Both the OpenTelemetry Collector and Vector are excellent choices that can be deployed in either an Agent or Aggregator pattern. The best choice depends on your team’s existing ecosystem and primary use case.
@@ -186,8 +182,6 @@ Replace `SINK_ID` with the sink ID.
 <ReplaceDatasetToken />
 </Info>
 
----
-
 ## Summary
 
 | Aspect | OpenTelemetry Collector | Vector |
diff --git a/docs.json b/docs.json
index b0ee978ac..3838c2073 100644
--- a/docs.json
+++ b/docs.json
@@ -8,7 +8,7 @@
     "light": "#98A0B1",
     "dark": "#104DEB"
   },
-  "favicon": "/doc-assets/logo/favicon.svg",
+  "favicon": "/favicon.ico",
   "navigation": {
     "tabs": [
       {
diff --git a/lib/code-theme.ts b/lib/code-theme.ts
new file mode 100644
index 000000000..e4a0fb386
--- /dev/null
+++ b/lib/code-theme.ts
@@ -0,0 +1,245 @@
+import type { ThemeRegistration } from 'shiki';
+
+/**
+ * `axiom-dark` — the branded Shiki theme, copied from www/src/lib/code-theme.ts.
+ * Grayscale base with every accent drawn from the brand-orange family, so code
+ * blocks sit on-palette instead of the blue/purple of stock themes. The editor
+ * background is irrelevant (the docs strip it); tune tokens here.
+ */
+export const axiomCodeDark: ThemeRegistration = {
+  name: 'axiom-dark',
+  type: 'dark',
+  colors: {
+    'editor.background': '#0a0a0a',
+    'editor.foreground': '#b8b8b8',
+  },
+  settings: [
+    // Default token color (anything unmatched).
+    { settings: { foreground: '#b8b8b8' } },
+    {
+      scope: ['comment', 'punctuation.definition.comment'],
+      settings: { foreground: '#6f6f6f', fontStyle: 'italic' },
+    },
+    {
+      scope: [
+        'string',
+        'string.quoted',
+        'punctuation.definition.string',
+        'string.regexp',
+        'markup.inline.raw',
+      ],
+      settings: { foreground: '#ffc799' },
+    },
+    {
+      scope: [
+        'constant.numeric',
+        'constant.language',
+        'constant.character',
+        'constant.other',
+        'keyword.other.unit',
+      ],
+      settings: { foreground: '#ffb27d' },
+    },
+    {
+      scope: [
+        'keyword',
+        'keyword.control',
+        'keyword.operator.new',
+        'keyword.operator.expression',
+        'storage',
+        'storage.type',
+        'storage.modifier',
+      ],
+      settings: { foreground: '#ff8a4c' },
+    },
+    {
+      scope: [
+        'entity.name.function',
+        'support.function',
+        'meta.function-call entity.name.function',
+        'variable.function',
+      ],
+      settings: { foreground: '#ffad66' },
+    },
+    {
+      scope: [
+        'entity.name.type',
+        'entity.name.class',
+        'entity.other.inherited-class',
+        'support.type',
+        'support.class',
+        'entity.name.namespace',
+      ],
+      settings: { foreground: '#e6875a' },
+    },
+    {
+      // JSON keys / object properties / HTML attributes — quiet, near-white,
+      // so string values carry the orange. Unlike www, `entity.name.tag` sits
+      // here too: in the YAML/TOML grammars that dominate docs config examples
+      // it scopes the keys, and orange keys turned whole files orange.
+      scope: [
+        'support.type.property-name',
+        'variable.other.property',
+        'variable.other.object.property',
+        'entity.other.attribute-name',
+        'entity.name.tag',
+        'meta.object-literal.key',
+      ],
+      settings: { foreground: '#dedede' },
+    },
+    {
+      scope: ['variable', 'variable.parameter', 'variable.other'],
+      settings: { foreground: '#cccccc' },
+    },
+    {
+      scope: ['keyword.operator', 'punctuation', 'meta.brace'],
+      settings: { foreground: '#8f8f8f' },
+    },
+    {
+      // Diffs — keep meaning, but warm.
+      scope: ['markup.inserted'],
+      settings: { foreground: '#ffc799' },
+    },
+    {
+      scope: ['markup.deleted'],
+      settings: { foreground: '#ff6b4c' },
+    },
+    {
+      scope: ['markup.changed'],
+      settings: { foreground: '#ffad66' },
+    },
+    {
+      scope: ['markup.heading', 'markup.bold'],
+      settings: { foreground: '#ffffff', fontStyle: 'bold' },
+    },
+    {
+      scope: ['markup.italic'],
+      settings: { fontStyle: 'italic' },
+    },
+    {
+      // Shell prompts / built-ins lean on the keyword orange.
+      scope: ['support.constant', 'constant.other.symbol'],
+      settings: { foreground: '#ffb27d' },
+    },
+  ],
+};
+
+/**
+ * `axiom-light` — light-mode counterpart the docs need (www is dark-only).
+ * Scope-for-scope mirror of `axiom-dark` with the orange ramp darkened until
+ * every token clears AA (>=4.5:1) on the light code surface; relative
+ * intensity is preserved (keywords most vivid, strings softest).
+ */
+export const axiomCodeLight: ThemeRegistration = {
+  name: 'axiom-light',
+  type: 'light',
+  colors: {
+    'editor.background': '#fafafa',
+    'editor.foreground': '#404040',
+  },
+  settings: [
+    { settings: { foreground: '#404040' } },
+    {
+      scope: ['comment', 'punctuation.definition.comment'],
+      settings: { foreground: '#737373', fontStyle: 'italic' },
+    },
+    {
+      scope: [
+        'string',
+        'string.quoted',
+        'punctuation.definition.string',
+        'string.regexp',
+        'markup.inline.raw',
+      ],
+      settings: { foreground: '#8f530f' },
+    },
+    {
+      scope: [
+        'constant.numeric',
+        'constant.language',
+        'constant.character',
+        'constant.other',
+        'keyword.other.unit',
+      ],
+      settings: { foreground: '#b45309' },
+    },
+    {
+      scope: [
+        'keyword',
+        'keyword.control',
+        'keyword.operator.new',
+        'keyword.operator.expression',
+        'storage',
+        'storage.type',
+        'storage.modifier',
+      ],
+      settings: { foreground: '#c2410c' },
+    },
+    {
+      scope: [
+        'entity.name.function',
+        'support.function',
+        'meta.function-call entity.name.function',
+        'variable.function',
+      ],
+      settings: { foreground: '#b8461d' },
+    },
+    {
+      scope: [
+        'entity.name.type',
+        'entity.name.class',
+        'entity.other.inherited-class',
+        'support.type',
+        'support.class',
+        'entity.name.namespace',
+      ],
+      settings: { foreground: '#9a3412' },
+    },
+    {
+      // JSON keys / object properties / HTML attributes — quiet, near-black,
+      // so string values carry the orange. `entity.name.tag` deliberately sits
+      // here (see axiomCodeDark).
+      scope: [
+        'support.type.property-name',
+        'variable.other.property',
+        'variable.other.object.property',
+        'entity.other.attribute-name',
+        'entity.name.tag',
+        'meta.object-literal.key',
+      ],
+      settings: { foreground: '#262626' },
+    },
+    {
+      scope: ['variable', 'variable.parameter', 'variable.other'],
+      settings: { foreground: '#525252' },
+    },
+    {
+      scope: ['keyword.operator', 'punctuation', 'meta.brace'],
+      settings: { foreground: '#737373' },
+    },
+    {
+      scope: ['markup.inserted'],
+      settings: { foreground: '#8f530f' },
+    },
+    {
+      scope: ['markup.deleted'],
+      settings: { foreground: '#b91c1c' },
+    },
+    {
+      scope: ['markup.changed'],
+      settings: { foreground: '#b45309' },
+    },
+    {
+      scope: ['markup.heading', 'markup.bold'],
+      settings: { foreground: '#0a0a0a', fontStyle: 'bold' },
+    },
+    {
+      scope: ['markup.italic'],
+      settings: { fontStyle: 'italic' },
+    },
+    {
+      scope: ['support.constant', 'constant.other.symbol'],
+      settings: { foreground: '#b45309' },
+    },
+  ],
+};
diff --git a/lib/doc-icons.ts b/lib/doc-icons.ts
index da621d1fe..e6d92be9e 100644
--- a/lib/doc-icons.ts
+++ b/lib/doc-icons.ts
@@ -23,6 +23,7 @@ export const FA_TO_LUCIDE = {
   'ellipsis-vertical': 'EllipsisVertical',
   function: 'SquareFunction',
   gear: 'Settings',
+  hexagon: 'Hexagon',
   house: 'House',
   'pen-to-square': 'SquarePen',
   pencil: 'Pencil',
diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818fb..9edff1c7c 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
index aa663f685..035ff43a6 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "fumadocs-ui": "16.11.5",
     "hast-util-to-jsx-runtime": "2.3.6",
     "lucide-react": "1.24.0",
+    "mermaid": "^11.16.0",
     "nanoid": "^6.0.0",
     "next": "16.2.11",
     "next-themes": "0.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee83f7241..36da4f1f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,9 @@ importers:
       lucide-react:
         specifier: 1.24.0
         version: 1.24.0(react@19.2.7)
+      mermaid:
+        specifier: ^11.16.0
+        version: 11.16.0
       nanoid:
         specifier: ^6.0.0
         version: 6.0.0
@@ -11435,7 +11438,7 @@ snapshots:
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.5
-      postcss: 8.5.19
+      postcss: 8.5.18
       rolldown: 1.1.5
       tinyglobby: 0.2.17
     optionalDependencies:
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 000000000..4f0516f7c
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/source.config.ts b/source.config.ts
index 95a9a0aa5..e08864bd0 100644
--- a/source.config.ts
+++ b/source.config.ts
@@ -1,6 +1,8 @@
+import { rehypeCodeDefaultOptions, remarkMdxMermaid } from 'fumadocs-core/mdx-plugins';
 import { pageSchema } from 'fumadocs-core/source/schema';
 import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
 import { z } from 'zod';
+import { axiomCodeDark, axiomCodeLight } from './lib/code-theme';
 
 export const docs = defineDocs({
   dir: 'content/docs',
@@ -28,5 +30,15 @@ export default defineConfig({
     // components prop page.tsx passes, so they need the provider to pick up the
     // shared pre/notice/link mappings from mdx-components.tsx.
     providerImportSource: '@/mdx-components',
+    // ```mermaid fences become <Mermaid chart="…"/> (components/mermaid.tsx)
+    // instead of Shiki code blocks.
+    remarkPlugins: [remarkMdxMermaid],
+    // Branded Shiki themes from www (grayscale + brand-orange accents) in
+    // place of the stock github pair; defaults are spread so the notation
+    // transformers and meta parsing stay intact.
+    rehypeCodeOptions: {
+      ...rehypeCodeDefaultOptions,
+      themes: { light: axiomCodeLight, dark: axiomCodeDark },
+    },
   },
 });
diff --git a/styles/tokens.css b/styles/tokens.css
index 0c0e3f0e2..700776dba 100644
--- a/styles/tokens.css
+++ b/styles/tokens.css
@@ -6,81 +6,433 @@
  * Add `data-theme="light"` on <html> or any ancestor to flip to light.
  * ───────────────────────────────────────────────────────────────── */
 
-/* Fonts are self-hosted with next/font/local in app/layout.tsx. */
+/* Fonts load in app/layout.tsx: Geist via next/font/google, Berkeley Mono
+   via next/font/local (full file — its EULA prohibits subsetting). */
 
 /* ╔══════════════════════════════════════════════════════════════╗
    ║ PRIMITIVES                                                   ║
    ╚══════════════════════════════════════════════════════════════╝ */
 :root {
-  /* Gray scale — Tailwind v4 neutral */
-  --gray-50:  #fafafa;
-  --gray-100: #f5f5f5;
-  --gray-200: #e5e5e5;
-  --gray-300: #d4d4d4;
-  --gray-400: #a3a3a3;
-  --gray-450: #858585;
-  --gray-500: #737373;
-  --gray-600: #525252;
-  --gray-700: #404040;
-  --gray-800: #262626;
-  --gray-850: #1e1e1e;
-  --gray-900: #171717;
-  --gray-950: #0a0a0a;
-  --white: #ffffff;
-  --black: #000000;
-
-  /* Black alpha (overlay on light) */
-  --black-a1:  rgba(0,0,0,0.01);
-  --black-a2:  rgba(0,0,0,0.03);
-  --black-a3:  rgba(0,0,0,0.05);
-  --black-a4:  rgba(0,0,0,0.07);
-  --black-a5:  rgba(0,0,0,0.10);
-  --black-a6:  rgba(0,0,0,0.15);
-  --black-a7:  rgba(0,0,0,0.20);
-  --black-a8:  rgba(0,0,0,0.30);
-  --black-a9:  rgba(0,0,0,0.40);
-  --black-a10: rgba(0,0,0,0.55);
-  --black-a11: rgba(0,0,0,0.70);
-  --black-a12: rgba(0,0,0,0.90);
-
-  /* White alpha (overlay on dark) */
-  --white-a1:  rgba(255,255,255,0.01);
-  --white-a2:  rgba(255,255,255,0.03);
-  --white-a3:  rgba(255,255,255,0.04);
-  --white-a4:  rgba(255,255,255,0.07);
-  --white-a5:  rgba(255,255,255,0.10);
-  --white-a6:  rgba(255,255,255,0.15);
-  --white-a7:  rgba(255,255,255,0.20);
-  --white-a8:  rgba(255,255,255,0.30);
-  --white-a9:  rgba(255,255,255,0.40);
-  --white-a10: rgba(255,255,255,0.55);
-  --white-a11: rgba(255,255,255,0.70);
-  --white-a12: rgba(255,255,255,0.90);
-
-  /* Status (primitives — same in both themes) */
-  --red-300:  #fca5a5;
-  --red-400:  #f87171;       /* destructive default */
-  --red-500:  #ef4444;
-  --red-600:  #dc2626;
-  --red-700:  #b91c1c;
-  --red-800:  #991b1b;
-  --red-bg:   #fef2f2;
-
-  --amber-400: #fbbf24;
-  --amber-500: #f59e0b;
-
-  --orange-500: #da5c2b;    /* Axiom brand primary */
-
-  --green-400: #34d399;
-  --green-500: #10b981;
-
-  --blue-500:  #3b82f6;
-  --blue-600:  #2563eb;      /* selected / toggled */
-  --blue-700:  #1d4ed8;
-
-  --violet-400: #a78bfa;
-  --violet-500: #9747ff;     /* Axiom accent (purple) */
-  --violet-600: #8b5cf6;
+    /* Gray scale — Tailwind v4 neutral */
+    --gray-50: #fafafa;
+    --gray-100: #f5f5f5;
+    --gray-200: #e5e5e5;
+    --gray-300: #d4d4d4;
+    --gray-400: #a3a3a3;
+    --gray-450: #858585;
+    --gray-500: #737373;
+    --gray-600: #525252;
+    --gray-700: #404040;
+    --gray-800: #262626;
+    --gray-850: #1e1e1e;
+    --gray-900: #171717;
+    --gray-950: #0a0a0a;
+    --white: #ffffff;
+    --black: #000000;
+
+    /* Black alpha (overlay on light) */
+    --black-a1: rgba(0, 0, 0, 0.01);
+    --black-a2: rgba(0, 0, 0, 0.03);
+    --black-a3: rgba(0, 0, 0, 0.05);
+    --black-a4: rgba(0, 0, 0, 0.07);
+    --black-a5: rgba(0, 0, 0, 0.1);
+    --black-a6: rgba(0, 0, 0, 0.15);
+    --black-a7: rgba(0, 0, 0, 0.2);
+    --black-a8: rgba(0, 0, 0, 0.3);
+    --black-a9: rgba(0, 0, 0, 0.4);
+    --black-a10: rgba(0, 0, 0, 0.55);
+    --black-a11: rgba(0, 0, 0, 0.7);
+    --black-a12: rgba(0, 0, 0, 0.9);
+
+    /* White alpha (overlay on dark) */
+    --white-a1: rgba(255, 255, 255, 0.01);
+    --white-a2: rgba(255, 255, 255, 0.03);
+    --white-a3: rgba(255, 255, 255, 0.04);
+    --white-a4: rgba(255, 255, 255, 0.07);
+    --white-a5: rgba(255, 255, 255, 0.1);
+    --white-a6: rgba(255, 255, 255, 0.15);
+    --white-a7: rgba(255, 255, 255, 0.2);
+    --white-a8: rgba(255, 255, 255, 0.3);
+    --white-a9: rgba(255, 255, 255, 0.4);
+    --white-a10: rgba(255, 255, 255, 0.55);
+    --white-a11: rgba(255, 255, 255, 0.7);
+    --white-a12: rgba(255, 255, 255, 0.9);
+
+    /* Status (primitives — same in both themes) */
+    --red-300: #fca5a5;
+    --red-400: #f87171; /* destructive default */
+    --red-500: #ef4444;
+    --red-600: #dc2626;
+    --red-700: #b91c1c;
+    --red-800: #991b1b;
+    --red-bg: #fef2f2;
+
+    --amber-400: #fbbf24;
+    --amber-500: #f59e0b;
+
+    --orange-500: #da5c2b; /* Axiom brand primary */
+
+    --green-400: #34d399;
+    --green-500: #10b981;
+
+    --blue-500: #3b82f6;
+    --blue-600: #2563eb; /* selected / toggled */
+    --blue-700: #1d4ed8;
+
+    --violet-400: #a78bfa;
+    --violet-500: #9747ff; /* Axiom accent (purple) */
+    --violet-600: #8b5cf6;
+}
+
+/* ╔══════════════════════════════════════════════════════════════╗
+   ║ ADAPTIVE COLOR SCALES — ported from www (Radix-style 1–12)   ║
+   ╚══════════════════════════════════════════════════════════════╝
+   Same values as www/src/app/globals.css, restructured for this
+   repo's theming: www is light-default with a `.dark` override;
+   here dark is the default and light is `[data-theme="light"]`. */
+:root,
+:root[data-theme="dark"] {
+    /* Gray */
+    --gray-1: #0c0c0c;
+    --gray-2: #111111;
+    --gray-3: #222222;
+    --gray-4: #2a2a2a;
+    --gray-5: #313131;
+    --gray-6: #3a3a3a;
+    --gray-7: #484848;
+    --gray-8: #606060;
+    --gray-9: #6e6e6e;
+    --gray-10: #7b7b7b;
+    --gray-11: #b4b4b4;
+    --gray-12: #eeeeee;
+    /* Red */
+    --red-1: #191111;
+    --red-2: #201314;
+    --red-3: #3b1219;
+    --red-4: #500f1c;
+    --red-5: #611623;
+    --red-6: #72232d;
+    --red-7: #8c333a;
+    --red-8: #b54548;
+    --red-9: #e5484d;
+    --red-10: #ec5d5e;
+    --red-11: #ff9592;
+    --red-12: #ffd1d9;
+    /* Orange */
+    --orange-1: #17120e;
+    --orange-2: #26140d;
+    --orange-3: #331e0b;
+    --orange-4: #462100;
+    --orange-5: #562800;
+    --orange-6: #66350c;
+    --orange-7: #7e451d;
+    --orange-8: #a35829;
+    --orange-9: #f76b15;
+    --orange-10: #fa7440;
+    --orange-11: #ffa057;
+    --orange-12: #ffe0c2;
+    /* Yellow */
+    --yellow-1: #14120b;
+    --yellow-2: #1b180f;
+    --yellow-3: #2d2305;
+    --yellow-4: #362b00;
+    --yellow-5: #433500;
+    --yellow-6: #524202;
+    --yellow-7: #665417;
+    --yellow-8: #836a21;
+    --yellow-9: #ffe629;
+    --yellow-10: #ffff57;
+    --yellow-11: #f5e147;
+    --yellow-12: #f6eeb4;
+    /* Green */
+    --green-1: #0e1512;
+    --green-2: #121b17;
+    --green-3: #132d21;
+    --green-4: #113b29;
+    --green-5: #174933;
+    --green-6: #20573e;
+    --green-7: #28684a;
+    --green-8: #2f7c57;
+    --green-9: #30a46c;
+    --green-10: #33b074;
+    --green-11: #11b981;
+    --green-12: #b1f1cb;
+    /* Blue */
+    --blue-1: #0d1520;
+    --blue-2: #111927;
+    --blue-3: #0d2847;
+    --blue-4: #003362;
+    --blue-5: #004074;
+    --blue-6: #104d87;
+    --blue-7: #205d9e;
+    --blue-8: #2870bd;
+    --blue-9: #0090ff;
+    --blue-10: #3b9eff;
+    --blue-11: #70b8ff;
+    --blue-12: #c2e6ff;
+    /* Purple */
+    --purple-1: #18111b;
+    --purple-2: #1e1523;
+    --purple-3: #301c3b;
+    --purple-4: #3d224e;
+    --purple-5: #48295c;
+    --purple-6: #54346b;
+    --purple-7: #664282;
+    --purple-8: #8457aa;
+    --purple-9: #8e4ec6;
+    --purple-10: #9a5cd0;
+    --purple-11: #d19dff;
+    --purple-12: #ecd9fa;
+    /* Tomato */
+    --tomato-1: #181111;
+    --tomato-2: #1f1513;
+    --tomato-3: #391714;
+    --tomato-4: #4e1511;
+    --tomato-5: #5e1c16;
+    --tomato-6: #6e2920;
+    --tomato-7: #853a2d;
+    --tomato-8: #ac4d39;
+    --tomato-9: #e54d2e;
+    --tomato-10: #ec6142;
+    --tomato-11: #ff977d;
+    --tomato-12: #fbd3cb;
+    /* Amber */
+    --amber-1: #16120c;
+    --amber-2: #1d180f;
+    --amber-3: #302008;
+    --amber-4: #3f2700;
+    --amber-5: #4d3000;
+    --amber-6: #5c3d05;
+    --amber-7: #714f19;
+    --amber-8: #8f6424;
+    --amber-9: #ffc53d;
+    --amber-10: #ffd60a;
+    --amber-11: #ffca16;
+    --amber-12: #ffe7b3;
+    /* Lime */
+    --lime-1: #11130c;
+    --lime-2: #151a10;
+    --lime-3: #1f2917;
+    --lime-4: #29371d;
+    --lime-5: #334423;
+    --lime-6: #3d522a;
+    --lime-7: #496231;
+    --lime-8: #577538;
+    --lime-9: #bdee63;
+    --lime-10: #d4ff70;
+    --lime-11: #bde56c;
+    --lime-12: #e3f7ba;
+    /* Teal */
+    --teal-1: #0d1514;
+    --teal-2: #111c1b;
+    --teal-3: #0d2d2a;
+    --teal-4: #023b37;
+    --teal-5: #084843;
+    --teal-6: #145750;
+    --teal-7: #1c6961;
+    --teal-8: #207e73;
+    --teal-9: #12a594;
+    --teal-10: #0eb39e;
+    --teal-11: #0bd8b6;
+    --teal-12: #adf0dd;
+    /* Iris */
+    --iris-1: #13131e;
+    --iris-2: #171625;
+    --iris-3: #202248;
+    --iris-4: #262a65;
+    --iris-5: #303374;
+    --iris-6: #3d3e82;
+    --iris-7: #4a4a95;
+    --iris-8: #5958b1;
+    --iris-9: #5b5bd6;
+    --iris-10: #6e6ade;
+    --iris-11: #b1a9ff;
+    --iris-12: #e0dffe;
+    /* Pink */
+    --pink-1: #191117;
+    --pink-2: #21121d;
+    --pink-3: #37172f;
+    --pink-4: #4b143d;
+    --pink-5: #591c47;
+    --pink-6: #692955;
+    --pink-7: #833869;
+    --pink-8: #a84885;
+    --pink-9: #d6409f;
+    --pink-10: #de51a8;
+    --pink-11: #ff8dcc;
+    --pink-12: #fdd1ea;
+}
+
+:root[data-theme="light"] {
+    /* Gray */
+    --gray-1: #fcfcfc;
+    --gray-2: #f9f9f9;
+    --gray-3: #f0f0f0;
+    --gray-4: #e8e8e8;
+    --gray-5: #e0e0e0;
+    --gray-6: #d9d9d9;
+    --gray-7: #cecece;
+    --gray-8: #bbbbbb;
+    --gray-9: #8d8d8d;
+    --gray-10: #838383;
+    --gray-11: #646464;
+    --gray-12: #202020;
+    /* Red */
+    --red-1: #fffcfc;
+    --red-2: #fff7f7;
+    --red-3: #feebec;
+    --red-4: #ffdbdc;
+    --red-5: #ffcdce;
+    --red-6: #fdbdbe;
+    --red-7: #f4a9aa;
+    --red-8: #eb8e90;
+    --red-9: #e5484d;
+    --red-10: #dc3e42;
+    --red-11: #ce2c31;
+    --red-12: #641723;
+    /* Orange */
+    --orange-1: #fefcfb;
+    --orange-2: #fff7ed;
+    --orange-3: #ffefd6;
+    --orange-4: #ffdfb5;
+    --orange-5: #ffd19a;
+    --orange-6: #ffc182;
+    --orange-7: #f5ae73;
+    --orange-8: #ec9455;
+    --orange-9: #f76b15;
+    --orange-10: #fa7440;
+    --orange-11: #cc4e00;
+    --orange-12: #582d1d;
+    /* Yellow */
+    --yellow-1: #fdfdf9;
+    --yellow-2: #fefce9;
+    --yellow-3: #fffab8;
+    --yellow-4: #fff394;
+    --yellow-5: #ffe770;
+    --yellow-6: #f3d768;
+    --yellow-7: #e4c767;
+    --yellow-8: #d5ae39;
+    --yellow-9: #ffe629;
+    --yellow-10: #ffdc00;
+    --yellow-11: #9e6c00;
+    --yellow-12: #473b1f;
+    /* Green */
+    --green-1: #fbfefc;
+    --green-2: #f4fbf6;
+    --green-3: #e6f6eb;
+    --green-4: #d6f1df;
+    --green-5: #c4e8d1;
+    --green-6: #adddc0;
+    --green-7: #8eceaa;
+    --green-8: #5bb98b;
+    --green-9: #30a46c;
+    --green-10: #2b9a66;
+    --green-11: #218358;
+    --green-12: #193b2d;
+    /* Blue */
+    --blue-1: #fbfdff;
+    --blue-2: #f4faff;
+    --blue-3: #e6f4fe;
+    --blue-4: #d5efff;
+    --blue-5: #c2e5ff;
+    --blue-6: #acd8fc;
+    --blue-7: #8ec8f6;
+    --blue-8: #5eb1ef;
+    --blue-9: #0090ff;
+    --blue-10: #0588f0;
+    --blue-11: #0d74ce;
+    --blue-12: #113264;
+    /* Purple */
+    --purple-1: #fefcfe;
+    --purple-2: #fbf7fe;
+    --purple-3: #f7edfe;
+    --purple-4: #f2e2fc;
+    --purple-5: #ead5f9;
+    --purple-6: #e0c4f4;
+    --purple-7: #d1afec;
+    --purple-8: #be93e4;
+    --purple-9: #8e4ec6;
+    --purple-10: #8347b9;
+    --purple-11: #8145b5;
+    --purple-12: #402060;
+    /* Tomato */
+    --tomato-1: #fffcfc;
+    --tomato-2: #fff8f7;
+    --tomato-3: #feebe7;
+    --tomato-4: #ffdcd3;
+    --tomato-5: #ffcdc2;
+    --tomato-6: #fdbdaf;
+    --tomato-7: #f5a898;
+    --tomato-8: #ec8e7b;
+    --tomato-9: #e54d2e;
+    --tomato-10: #dd4425;
+    --tomato-11: #d13415;
+    --tomato-12: #5c271f;
+    /* Amber */
+    --amber-1: #fefdfb;
+    --amber-2: #fefbe9;
+    --amber-3: #fff7c2;
+    --amber-4: #ffee9c;
+    --amber-5: #fbe577;
+    --amber-6: #f3d673;
+    --amber-7: #e9c162;
+    --amber-8: #e2a336;
+    --amber-9: #ffc53d;
+    --amber-10: #ffba18;
+    --amber-11: #ab6400;
+    --amber-12: #4f3422;
+    /* Lime */
+    --lime-1: #fcfdfa;
+    --lime-2: #f8faf3;
+    --lime-3: #eef6d6;
+    --lime-4: #e2f0bd;
+    --lime-5: #d3e7a6;
+    --lime-6: #c2da91;
+    --lime-7: #abc978;
+    --lime-8: #8db654;
+    --lime-9: #bdee63;
+    --lime-10: #b0e64c;
+    --lime-11: #5c7c2f;
+    --lime-12: #37401c;
+    /* Teal */
+    --teal-1: #fafefd;
+    --teal-2: #f3fbf9;
+    --teal-3: #e0f8f3;
+    --teal-4: #ccf3ea;
+    --teal-5: #b8eae0;
+    --teal-6: #a1ded2;
+    --teal-7: #83cdc1;
+    --teal-8: #53b9ab;
+    --teal-9: #12a594;
+    --teal-10: #0d9b8a;
+    --teal-11: #008573;
+    --teal-12: #0d3d38;
+    /* Iris */
+    --iris-1: #fdfdff;
+    --iris-2: #f8f8ff;
+    --iris-3: #f0f1fe;
+    --iris-4: #e6e7ff;
+    --iris-5: #dadcff;
+    --iris-6: #cbcdff;
+    --iris-7: #b8baf8;
+    --iris-8: #9b9ef0;
+    --iris-9: #5b5bd6;
+    --iris-10: #5151cd;
+    --iris-11: #5753c6;
+    --iris-12: #272962;
+    /* Pink */
+    --pink-1: #fffcfe;
+    --pink-2: #fef7fb;
+    --pink-3: #fee9f5;
+    --pink-4: #fbdcef;
+    --pink-5: #f6cee7;
+    --pink-6: #efbfdd;
+    --pink-7: #e7acd0;
+    --pink-8: #dd93c2;
+    --pink-9: #d6409f;
+    --pink-10: #cf3897;
+    --pink-11: #c2298a;
+    --pink-12: #651249;
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
@@ -88,195 +440,281 @@
    ╚══════════════════════════════════════════════════════════════╝ */
 :root,
 :root[data-theme="dark"] {
-  /* Background layers */
-  --bg-canvas:   var(--gray-950);   /* page bg + reading column */
-  --bg-surface:  var(--gray-900);   /* card / code / contained content */
-  --bg-raised:   var(--gray-850);   /* hovered surface / nested card */
-  --bg-overlay:  var(--gray-800);   /* popover / dialog */
-  --bg-inert:    var(--white-a3);   /* subtle field bg */
-  --bg-sidebar:  var(--black);      /* recessed nav rail — sits below canvas */
-
-  /* Emphasis backgrounds (overlay tints) */
-  --bg-emph-primary:    var(--white-a6);
-  --bg-emph-secondary:  var(--white-a4);
-  --bg-emph-tertiary:   var(--white-a3);
-  --bg-emph-primary-inverse:    var(--gray-100);
-  --bg-emph-secondary-inverse:  var(--gray-200);
-  --bg-emph-tertiary-inverse:   var(--gray-300);
-
-  /* Text */
-  --text-primary:    var(--gray-50);   /* fafafa */
-  --text-secondary:  var(--gray-200);
-  --text-tertiary:   var(--gray-400);
-  --text-quaternary: var(--gray-450);  /* >=4.5:1 on canvas/surface (was gray-500, 4.18) */
-  --text-on-inverse-primary:    var(--gray-950);
-  --text-on-inverse-secondary:  var(--gray-800);
-  --text-on-inverse-tertiary:   var(--gray-600);
-  --text-on-inverse-quaternary: var(--gray-500);
-  --text-destructive: var(--red-400);
-
-  /* Border */
-  --border-primary:    var(--white-a5);
-  --border-secondary:  var(--white-a4);
-  --border-tertiary:   var(--white-a3);
-  --border-strong:     var(--white-a7);
-  --border-on-inverse-primary:   var(--black-a5);
-  --border-on-inverse-secondary: var(--black-a4);
-
-  /* Icon (same as text in this system; surfaced for clarity) */
-  --icon-primary:    var(--gray-300);
-  --icon-secondary:  var(--gray-400);
-  --icon-tertiary:   var(--gray-500);
-  --icon-quaternary: var(--gray-600);
-
-  /* Status */
-  --color-destructive:  var(--red-400);
-  --color-selected:     var(--blue-600);
-  --color-success:      var(--green-500);
-  --color-warning:      var(--amber-500);
-  --color-info:         var(--blue-500);
-  --color-accent:       var(--orange-500);
-  --color-accent-text:  var(--orange-500);   /* accent used as text/fill — 5.23:1 on dark canvas */
-  --color-warning-text: var(--amber-500);    /* amber used as text (REQUIRED markers) — 9.22:1 on dark */
-
-  color-scheme: dark;
+    /* Background layers */
+    --bg-canvas: var(--gray-950); /* page bg + reading column */
+    --bg-surface: var(
+        --gray-900
+    ); /* card / code / contained content */
+    --bg-raised: var(--gray-850); /* hovered surface / nested card */
+    --bg-overlay: var(--gray-800); /* popover / dialog */
+    --bg-inert: var(--white-a3); /* subtle field bg */
+    --bg-sidebar: var(
+        --black
+    ); /* recessed nav rail — sits below canvas */
+
+    /* Emphasis backgrounds (overlay tints) */
+    --bg-emph-primary: var(--white-a5);
+    --bg-emph-secondary: var(--white-a4);
+    --bg-emph-tertiary: var(--white-a3);
+    --bg-emph-primary-inverse: var(--gray-100);
+    --bg-emph-secondary-inverse: var(--gray-200);
+    --bg-emph-tertiary-inverse: var(--gray-300);
+
+    /* Text */
+    --text-primary: var(--gray-50); /* fafafa */
+    --text-secondary: var(--gray-200);
+    --text-tertiary: var(--gray-400);
+    --text-quaternary: var(
+        --gray-450
+    ); /* >=4.5:1 on canvas/surface (was gray-500, 4.18) */
+    --text-on-inverse-primary: var(--gray-950);
+    --text-on-inverse-secondary: var(--gray-800);
+    --text-on-inverse-tertiary: var(--gray-600);
+    --text-on-inverse-quaternary: var(--gray-500);
+    --text-destructive: var(--red-400);
+
+    /* Border */
+    --border-primary: var(--white-a5);
+    --border-secondary: var(--white-a4);
+    --border-tertiary: var(--white-a3);
+    --border-strong: var(--white-a7);
+    --border-on-inverse-primary: var(--black-a5);
+    --border-on-inverse-secondary: var(--black-a4);
+
+    /* Icon (same as text in this system; surfaced for clarity) */
+    --icon-primary: var(--gray-300);
+    --icon-secondary: var(--gray-400);
+    --icon-tertiary: var(--gray-500);
+    --icon-quaternary: var(--gray-600);
+
+    /* Status */
+    --color-destructive: var(--red-400);
+    --color-selected: var(--blue-600);
+    --color-success: var(--green-500);
+    --color-warning: var(--amber-500);
+    --color-info: var(--blue-500);
+    --color-accent: var(--orange-500);
+    --color-accent-text: var(
+        --orange-500
+    ); /* accent used as text/fill — 5.23:1 on dark canvas */
+    --color-warning-text: var(
+        --amber-500
+    ); /* amber used as text (REQUIRED markers) — 9.22:1 on dark */
+
+    /* Ported from www: brand orange + grayscale chart ramp. Chart values are
+     identical in both www themes, so they live only in this default block. */
+    --brand: oklch(0.628 0.1699 40.08);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+
+    color-scheme: dark;
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
    ║ SEMANTIC TOKENS — LIGHT                                      ║
    ╚══════════════════════════════════════════════════════════════╝ */
 :root[data-theme="light"] {
-  --bg-canvas:   var(--gray-50);
-  --bg-surface:  var(--white);
-  --bg-raised:   var(--gray-50);
-  --bg-overlay:  var(--white);
-  --bg-inert:    var(--black-a3);
-  --bg-sidebar:  var(--gray-100);   /* recessed nav rail — sits below canvas */
-
-  --bg-emph-primary:    var(--black-a6);
-  --bg-emph-secondary:  var(--black-a4);
-  --bg-emph-tertiary:   var(--black-a3);
-  --bg-emph-primary-inverse:    var(--gray-900);
-  --bg-emph-secondary-inverse:  var(--gray-800);
-  --bg-emph-tertiary-inverse:   var(--gray-700);
-
-  --text-primary:    var(--gray-950);
-  --text-secondary:  var(--gray-700);
-  --text-tertiary:   var(--gray-600);  /* 7.49:1 (was gray-500, 4.54 borderline) */
-  --text-quaternary: var(--gray-500);  /* 4.54:1 (was gray-400, 2.42 — AA fail) */
-  --text-on-inverse-primary:    var(--gray-50);
-  --text-on-inverse-secondary:  var(--gray-200);
-  --text-on-inverse-tertiary:   var(--gray-400);
-  --text-on-inverse-quaternary: var(--gray-500);
-
-  --border-primary:    var(--black-a5);
-  --border-secondary:  var(--black-a4);
-  --border-tertiary:   var(--black-a3);
-  --border-strong:     var(--black-a7);
-  --border-on-inverse-primary:   var(--white-a5);
-  --border-on-inverse-secondary: var(--white-a4);
-
-  --icon-primary:    var(--gray-700);
-  --icon-secondary:  var(--gray-500);
-  --icon-tertiary:   var(--gray-400);
-  --icon-quaternary: var(--gray-300);
-
-  --color-accent-text: #b8461d;    /* darkened accent for text/fill on light — 5.12:1 (brand orange is only 3.63) */
-  --color-warning-text: #92400e;   /* darkened amber for text on light — 6.06:1 on inert (amber-500 is only 2.06) */
-
-  color-scheme: light;
+    --bg-canvas: var(--gray-50);
+    --bg-surface: var(--white);
+    --bg-raised: var(--gray-50);
+    --bg-overlay: var(--white);
+    --bg-inert: var(--black-a3);
+    --bg-sidebar: var(
+        --gray-100
+    ); /* recessed nav rail — sits below canvas */
+
+    --bg-emph-primary: var(--black-a5);
+    --bg-emph-secondary: var(--black-a4);
+    --bg-emph-tertiary: var(--black-a3);
+    --bg-emph-primary-inverse: var(--gray-900);
+    --bg-emph-secondary-inverse: var(--gray-800);
+    --bg-emph-tertiary-inverse: var(--gray-700);
+
+    --text-primary: var(--gray-950);
+    --text-secondary: var(--gray-700);
+    --text-tertiary: var(
+        --gray-600
+    ); /* 7.49:1 (was gray-500, 4.54 borderline) */
+    --text-quaternary: var(
+        --gray-500
+    ); /* 4.54:1 (was gray-400, 2.42 — AA fail) */
+    --text-on-inverse-primary: var(--gray-50);
+    --text-on-inverse-secondary: var(--gray-200);
+    --text-on-inverse-tertiary: var(--gray-400);
+    --text-on-inverse-quaternary: var(--gray-500);
+
+    --border-primary: var(--black-a5);
+    --border-secondary: var(--black-a4);
+    --border-tertiary: var(--black-a3);
+    --border-strong: var(--black-a7);
+    --border-on-inverse-primary: var(--white-a5);
+    --border-on-inverse-secondary: var(--white-a4);
+
+    --icon-primary: var(--gray-700);
+    --icon-secondary: var(--gray-500);
+    --icon-tertiary: var(--gray-400);
+    --icon-quaternary: var(--gray-300);
+
+    --color-accent-text: #b8461d; /* darkened accent for text/fill on light — 5.12:1 (brand orange is only 3.63) */
+    --color-warning-text: #92400e; /* darkened amber for text on light — 6.06:1 on inert (amber-500 is only 2.06) */
+
+    --brand: oklch(
+        0.7105 0.177 40.65
+    ); /* www's light-theme brand orange */
+
+    color-scheme: light;
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
    ║ TYPOGRAPHY                                                   ║
    ╚══════════════════════════════════════════════════════════════╝ */
 :root {
-  /* Font families */
-  --font-sans: var(--font-geist), "Geist", -apple-system, BlinkMacSystemFont,
-               "Segoe UI", system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace,
-               "SF Mono", Menlo, monospace;
-  --font-code: var(--font-geist-mono), "Geist Mono", ui-monospace,
-               "SF Mono", Menlo, monospace;
-  --font-query: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-
-  /* Default body */
-  font-family: var(--font-sans);
-  font-feature-settings: "ss01", "cv11";   /* Inter: stylistic alt 1 + alt 6,9 (a, g) */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+    /* Font families */
+    --font-sans:
+        var(--font-geist), "Geist", -apple-system, BlinkMacSystemFont,
+        "Segoe UI", system-ui, sans-serif;
+    --font-mono:
+        var(--font-berkeley-mono), "Berkeley Mono", ui-monospace,
+        "SF Mono", Menlo, monospace;
+    --font-code:
+        var(--font-berkeley-mono), "Berkeley Mono", ui-monospace,
+        "SF Mono", Menlo, monospace;
+    --font-query:
+        "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono",
+        monospace;
+
+    /* Default body */
+    font-family: var(--font-sans);
+    font-feature-settings:
+        "ss01", "cv11"; /* Inter: stylistic alt 1 + alt 6,9 (a, g) */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
 }
 
 /* ─── UI Sans (Inter) ───
    Default UI face. 13/16 is the workhorse used throughout the
    Console (table rows, menus, buttons, nav). 15/20 is a step up
    for headings and dense scan-targets. */
-.type-ui-sans-md-450 { font: 450 13px/16px var(--font-sans); letter-spacing: -0.005em; }
-.type-ui-sans-md-500 { font: 500 13px/16px var(--font-sans); letter-spacing: -0.005em; }
-.type-ui-sans-md-600 { font: 600 13px/16px var(--font-sans); letter-spacing: -0.005em; }
-.type-ui-sans-lg-500 { font: 500 15px/20px var(--font-sans); letter-spacing: -0.010em; }
-.type-ui-sans-lg-600 { font: 600 15px/20px var(--font-sans); letter-spacing: -0.010em; }
-.type-ui-sans-md-num    { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
+.type-ui-sans-md-450 {
+    font: 450 13px/16px var(--font-sans);
+    letter-spacing: -0.005em;
+}
+.type-ui-sans-md-500 {
+    font: 500 13px/16px var(--font-sans);
+    letter-spacing: -0.005em;
+}
+.type-ui-sans-md-600 {
+    font: 600 13px/16px var(--font-sans);
+    letter-spacing: -0.005em;
+}
+.type-ui-sans-lg-500 {
+    font: 500 15px/20px var(--font-sans);
+    letter-spacing: -0.01em;
+}
+.type-ui-sans-lg-600 {
+    font: 600 15px/20px var(--font-sans);
+    letter-spacing: -0.01em;
+}
+.type-ui-sans-md-num {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.025em;
+}
 
 /* ─── UI Mono (Berkeley Mono) ───
    The signature Axiom texture. Used for: data values, IDs, code
    tokens inline with UI, condensed uppercase labels in tables &
    table-header / status pills. */
-.type-ui-mono-md-450     { font: 450 12px/16px var(--font-mono); }
-.type-ui-mono-md-600     { font: 600 12px/16px var(--font-mono); }
-.type-ui-mono-md-cnd     { font: 450 12px/16px var(--font-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.02em; }
-.type-ui-mono-md-cnd-600 { font: 600 12px/16px var(--font-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.02em; }
+.type-ui-mono-md-450 {
+    font: 450 12px/16px var(--font-mono);
+}
+.type-ui-mono-md-600 {
+    font: 600 12px/16px var(--font-mono);
+}
+.type-ui-mono-md-cnd {
+    font: 450 12px/16px var(--font-mono);
+    font-stretch: 75%;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+.type-ui-mono-md-cnd-600 {
+    font: 600 12px/16px var(--font-mono);
+    font-stretch: 75%;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
 
 /* ─── Body Sans (Inter) ───
    For prose-y surfaces (docs, settings copy, marketing). */
-.type-body-sans-md-500 { font: 500 13px/20px var(--font-sans); letter-spacing: -0.005em; }
-.type-body-sans-md-600 { font: 600 13px/20px var(--font-sans); letter-spacing: -0.005em; }
-.type-body-sans-lg-400 { font: 400 15px/22px var(--font-sans); letter-spacing: -0.010em; }
-.type-body-sans-lg-500 { font: 500 15px/22px var(--font-sans); letter-spacing: -0.010em; }
-.type-body-sans-lg-600 { font: 600 15px/22px var(--font-sans); letter-spacing: -0.010em; }
+.type-body-sans-md-500 {
+    font: 500 13px/20px var(--font-sans);
+    letter-spacing: -0.005em;
+}
+.type-body-sans-md-600 {
+    font: 600 13px/20px var(--font-sans);
+    letter-spacing: -0.005em;
+}
+.type-body-sans-lg-400 {
+    font: 400 15px/22px var(--font-sans);
+    letter-spacing: -0.01em;
+}
+.type-body-sans-lg-500 {
+    font: 500 15px/22px var(--font-sans);
+    letter-spacing: -0.01em;
+}
+.type-body-sans-lg-600 {
+    font: 600 15px/22px var(--font-sans);
+    letter-spacing: -0.01em;
+}
 
 /* ─── Code Mono ───
    For multi-line source: query editors, log viewers, JSON. */
-.type-code-mono-md-400 { font: 400 12px/16px var(--font-code); }
-.type-code-mono-md-600 { font: 600 12px/16px var(--font-code); }
+.type-code-mono-md-400 {
+    font: 400 12px/16px var(--font-code);
+}
+.type-code-mono-md-600 {
+    font: 600 12px/16px var(--font-code);
+}
 
 /* ╔══════════════════════════════════════════════════════════════╗
    ║ SPACING — Tailwind v4 default scale (base 4px / 0.25rem)     ║
    ╚══════════════════════════════════════════════════════════════╝ */
 :root {
-  --space-px:   1px;
-  --space-0_5: 2px;
-  --space-1:   4px;
-  --space-1_5: 6px;
-  --space-2:   8px;
-  --space-3:  12px;
-  --space-4:  16px;
-  --space-5:  20px;
-  --space-6:  24px;
-  --space-8:  32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-16: 64px;
-  --space-24: 96px;
-  --space-32: 128px;
-  --space-48: 192px;
-  --space-64: 256px;
-  --space-96: 384px;
+    --space-px: 1px;
+    --space-0_5: 2px;
+    --space-1: 4px;
+    --space-1_5: 6px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-24: 96px;
+    --space-32: 128px;
+    --space-48: 192px;
+    --space-64: 256px;
+    --space-96: 384px;
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
    ║ RADIUS                                                       ║
    ╚══════════════════════════════════════════════════════════════╝ */
 :root {
-  --radius-1: 2px;
-  --radius-2: 4px;
-  --radius-3: 6px;     /* default button / input / chip */
-  --radius-4: 8px;
-  --radius-5: 10px;
-  --radius-6: 12px;    /* large card / surface section */
-  --radius-8: 16px;
-  --radius-full: 9999px;
+    --radius-1: 2px;
+    --radius-2: 4px;
+    --radius-3: 6px; /* default button / input / chip */
+    --radius-4: 8px;
+    --radius-5: 10px;
+    --radius-6: 12px; /* large card / surface section */
+    --radius-8: 16px;
+    --radius-full: 9999px;
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
@@ -287,72 +725,129 @@
    ║ are reserved for floating menus / dialogs.                   ║
    ╚══════════════════════════════════════════════════════════════╝ */
 :root {
-  --shadow-overlay:
-    0 0 0 1px var(--border-primary),
-    0 8px 24px -8px rgba(0,0,0,0.45),
-    0 2px 6px -2px rgba(0,0,0,0.35);
-  --shadow-dialog:
-    0 0 0 1px var(--border-primary),
-    0 24px 48px -12px rgba(0,0,0,0.6),
-    0 4px 12px -4px rgba(0,0,0,0.4);
-
-  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--color-selected);
+    --shadow-overlay:
+        0 0 0 1px var(--border-primary),
+        0 8px 24px -8px rgba(0, 0, 0, 0.45),
+        0 2px 6px -2px rgba(0, 0, 0, 0.35);
+    --shadow-dialog:
+        0 0 0 1px var(--border-primary),
+        0 24px 48px -12px rgba(0, 0, 0, 0.6),
+        0 4px 12px -4px rgba(0, 0, 0, 0.4);
+
+    --focus-ring:
+        0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--color-selected);
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
    ║ MOTION                                                       ║
    ╚══════════════════════════════════════════════════════════════╝ */
 :root {
-  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
-  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
-  --duration-1:  80ms;     /* hover / press */
-  --duration-2: 140ms;     /* default UI transition */
-  --duration-3: 240ms;     /* popover, dialog */
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
+    --duration-1: 80ms; /* hover / press */
+    --duration-2: 140ms; /* default UI transition */
+    --duration-3: 240ms; /* popover, dialog */
 }
 
 /* ╔══════════════════════════════════════════════════════════════╗
    ║ SEMANTIC ELEMENT DEFAULTS                                    ║
    ╚══════════════════════════════════════════════════════════════╝ */
-body {
-  margin: 0;
-  background: var(--bg-canvas);
-  color: var(--text-primary);
-  font: 500 13px/16px var(--font-sans);
-  letter-spacing: -0.005em;
+/* In @layer base so component utilities (@layer utilities) can override
+   these element defaults; unlayered they would beat every utility. */
+@layer base {
+    body {
+        margin: 0;
+        background: var(--bg-canvas);
+        color: var(--text-primary);
+        font: 500 13px/16px var(--font-sans);
+        letter-spacing: -0.005em;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        margin: 0;
+        font-family: var(--font-sans);
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--text-primary);
+    }
+    h1 {
+        font-size: 32px;
+        line-height: 36px;
+        letter-spacing: -0.02em;
+    }
+    h2 {
+        font-size: 24px;
+        line-height: 28px;
+        letter-spacing: -0.015em;
+    }
+    h3 {
+        font-size: 18px;
+        line-height: 24px;
+    }
+    h4 {
+        font-size: 15px;
+        line-height: 20px;
+        letter-spacing: -0.01em;
+    }
+    h5 {
+        font-size: 13px;
+        line-height: 16px;
+    }
+
+    p {
+        margin: 0;
+        color: var(--text-secondary);
+    }
+    small {
+        font-size: 12px;
+        line-height: 16px;
+        color: var(--text-tertiary);
+    }
+
+    code,
+    kbd,
+    samp,
+    pre {
+        font-family: var(--font-code);
+        font-size: 12px;
+        line-height: 16px;
+        color: var(--text-primary);
+    }
+    kbd {
+        display: inline-flex;
+        align-items: center;
+        height: 18px;
+        padding: 0 5px;
+        border: 1px solid var(--border-primary);
+        border-radius: var(--radius-2);
+        background: var(--bg-emph-tertiary);
+        color: var(--text-secondary);
+        font-size: 11px;
+        letter-spacing: 0;
+    }
+
+    a {
+        color: var(--text-primary);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        text-decoration-color: var(--border-strong);
+    }
+    a:hover {
+        text-decoration-color: var(--text-primary);
+    }
+
+    hr {
+        border: 0;
+        border-top: 1px solid var(--border-primary);
+        margin: var(--space-4) 0;
+    }
 }
 
-h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
-h1 { font-size: 32px; line-height: 36px; letter-spacing: -0.02em; }
-h2 { font-size: 24px; line-height: 28px; letter-spacing: -0.015em; }
-h3 { font-size: 18px; line-height: 24px; }
-h4 { font-size: 15px; line-height: 20px; letter-spacing: -0.010em; }
-h5 { font-size: 13px; line-height: 16px; }
-
-p { margin: 0; color: var(--text-secondary); }
-small { font-size: 12px; line-height: 16px; color: var(--text-tertiary); }
-
-code, kbd, samp, pre {
-  font-family: var(--font-code);
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--text-primary);
-}
-kbd {
-  display: inline-flex;
-  align-items: center;
-  height: 18px;
-  padding: 0 5px;
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-2);
-  background: var(--bg-emph-tertiary);
-  color: var(--text-secondary);
-  font-size: 11px;
-  letter-spacing: 0;
+::selection {
+    background: color-mix(in oklab, #ff7a2e 88%, transparent);
+    color: var(--text-primary);
 }
-
-a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
-a:hover { text-decoration-color: var(--text-primary); }
-
-hr { border: 0; border-top: 1px solid var(--border-primary); margin: var(--space-4) 0; }
-
-::selection { background: color-mix(in oklab, #ff7a2e 88%, transparent); color: var(--text-primary); }
diff --git a/tests/e2e/docs.spec.ts b/tests/e2e/docs.spec.ts
index 4e41d2ccd..3a21c6fb8 100644
--- a/tests/e2e/docs.spec.ts
+++ b/tests/e2e/docs.spec.ts
@@ -37,7 +37,8 @@ test('API reference uses highlighted code, compact schemas, and persistent langu
     [...new Set(elements.map((element) => getComputedStyle(element).color))]
   ));
   expect(tokenColors.length).toBeGreaterThan(1);
-  expect(tokenColors).toContain('rgb(240, 243, 246)');
+  // axiom-dark default token colour (lib/code-theme.ts).
+  expect(tokenColors).toContain('rgb(184, 184, 184)');
   await expect(requestCode.locator('pre code')).toHaveCSS('border-top-width', '0px');
 
   const parametersHeading = page.getByRole('heading', { name: 'Parameters', level: 2 });
@@ -261,9 +262,7 @@ test('landing content reserves the desktop table-of-contents rail', async ({ pag
     await page.goto('/docs');
 
     const hero = (await page.locator('.landing-hero').boundingBox())!;
-    const search = (await page.locator('.hero-search').boundingBox())!;
     expect(Math.abs(hero.x + hero.width / 2 - viewport.width / 2)).toBeLessThanOrEqual(1);
-    expect(search.width).toBe(hero.width);
   }
 });
 
@@ -293,7 +292,7 @@ test('table of contents tracks the active heading and keeps a transparent surfac
   const tocCode = codedTocLink.locator('code').first();
   await expect(tocCode).toHaveCSS('color', await codedTocLink.evaluate((element) => getComputedStyle(element).color));
   await expect(tocCode).toHaveCSS('font-size', await codedTocLink.evaluate((element) => getComputedStyle(element).fontSize));
-  await expect(page.locator('link[rel="icon"]')).toHaveAttribute('href', '/docs/doc-assets/logo/favicon.svg?v=2');
+  await expect(page.locator('link[rel="icon"]')).toHaveAttribute('href', '/docs/favicon.ico');
 });
 
 test('query reference navigation and MDX components follow the compact interaction model', async ({ page }) => {
@@ -348,7 +347,7 @@ test('query reference navigation and MDX components follow the compact interacti
 
   const outputTable = tabs.getByRole('table').first();
   await expect(outputTable.locator('xpath=..')).toHaveCSS('border-radius', '4px');
-  await expect(outputTable.getByRole('columnheader').first()).toHaveCSS('padding', '7px 10px');
+  await expect(outputTable.getByRole('columnheader').first()).toHaveCSS('padding', '8px 10px');
 
   const relatedFunction = page.getByRole('link', { name: 'iff', exact: true }).last();
   await expect(relatedFunction).toHaveAttribute('href', '/docs/apl/scalar-functions/conditional-function/iff');
@@ -375,7 +374,7 @@ test('Axiom article chrome, callouts, and heading links follow the docs interact
   await expect(brand.locator('.brand-mark')).toBeVisible();
   await expect(brand.locator('.brand-logo')).toHaveCount(0);
   const badge = brand.locator('.brand-badge');
-  await expect(badge).toHaveCSS('font-size', '12px');
+  await expect(badge).toHaveCSS('font-size', '14px');
   await expect(badge).toHaveCSS('border-left-color', 'rgb(218, 92, 43)');
   await expect(badge).toHaveCSS('border-radius', '0px');
   await expect(badge).toHaveCSS('font-weight', '600');
@@ -398,7 +397,9 @@ test('Axiom article chrome, callouts, and heading links follow the docs interact
   });
   expect(noticeStyles.background).not.toBe(noticeStyles.canvas);
   expect(noticeStyles.borderLeft).toBe('3px');
-  expect(noticeStyles.font).not.toBe(noticeStyles.bodyFont);
+  // Notices share the body sans face; the left rule and tint carry the
+  // differentiation (they rendered in a distinct face before the Geist swap).
+  expect(noticeStyles.font).toBe(noticeStyles.bodyFont);
   expect(noticeStyles.shadow).toBe('none');
 
   const heading = page.getByRole('heading', { name: 'Ingestion architecture', level: 2 });
@@ -516,7 +517,8 @@ test('article copy keeps a distinct contrast hierarchy in both themes', async ({
   const heading = page.getByRole('heading', { name: 'Ingestion architecture', level: 2 });
   const boldLabel = page.locator('.doc-article .prose strong').first();
 
-  await expect(bodyCopy).toHaveCSS('color', 'rgb(212, 212, 212)');
+  // Body copy matches the lede at --text-tertiary (gray-400 dark).
+  await expect(bodyCopy).toHaveCSS('color', 'rgb(163, 163, 163)');
   await expect(heading).toHaveCSS('color', 'rgb(250, 250, 250)');
   await expect(boldLabel).toHaveCSS('color', 'rgb(250, 250, 250)');