From bbe2ccdc913efa979321a6377064724adeca77e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B4nio=20Alexandre=20Borges=20Lima?=
 <104531655+AntonioABLima@users.noreply.github.com>
Date: Tue, 12 May 2026 19:11:36 -0300
Subject: [PATCH] docs: fix sidebar and TOC styles for Redocusaurus (#12748)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: improve sidebar and TOC readability + scroll progress

- Fix left nav sidebar hugging the left edge (remove margin-left)
- Increase sidebar font sizes and lift muted colors for legibility
- TOC right-side: white inactive items, pink active, gray for passed sections
- Add clientModule (tocProgress.js) to track scroll progress in TOC
- Add Redocusaurus API page styles to match site theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: fix sidebar/TOC height stability and active item reflow

- Force sidebarViewport to 100vh to prevent shrinking during scroll
- Replace font-weight on active TOC item with text-shadow to avoid reflow

* docs: left-anchor sidebar and increase fonts on large screens

* docs: constrain prev/next nav to match content max-width

* docs: fix sidebar jump on scroll by moving padding-top inside menu

* docs: fix sidebar-ad spacing with transparent padding on li

* docs: fix sidebarViewport height and MutationObserver leak

* docs: constrain doc content to 75vw and remove dead CSS comments

- Cap docMainContainer at 75vw
- Set pagination-nav to 100% width to match content column
- Remove commented-out .markdown and .ch-scrollycoding blocks

* docs: set docMainContainer max-width to 75% for better reading width

* docs: center main-wrapper on large screens and center docItemWrapper

* fix: revert lodash override to stable 4.17.21

lodash 4.18.0 is a broken release — template.js uses assignWith and
arrayEach without importing them, crashing npm start. Pin to 4.17.21
across all nested overrides.

* fix: prevent horizontal scroll on mobile docs pages

docsWrapper has flex:1 0 auto (flex-shrink:0), so it never shrinks below
the natural content width (~570px on iPhone). Cap it to 100vw and add
min-width:0 down the flex chain (docRoot, docMainContainer) so the
layout stays within viewport on narrow screens.

Also remove the overflow:visible override from ch-code-wrapper, which
was defeating the code block's own horizontal containment.

* feat: responsive navbar search and hide social icons on mobile

Shrink search bar as viewport narrows (160px at 1100px, 100px at 996px),
collapse to icon-only at 960px. Hide GitHub, X, and Discord icons below
996px where the hamburger menu takes over navigation.

* fix: images always respect container width above 996px

Use min(100%, 600px) so images are capped at 600px but never overflow
their container when the content area is narrower (e.g. sidebar open).

* fix: improve TOC progress scroll tracking and bottom-of-page detection

Adds scroll handler with RAF throttle, pauses/resumes MutationObserver
to avoid loops, and forces last TOC link active when scrolled to page bottom.

* fix: translate Portuguese comments to English in custom.css

* fix: sidebar viewport fills full screen height

* feat: sidebar section icon turns pink with ease transition when active

* fix: reduce TOC font size to 0.8rem

* fix: remove docMainContainer right padding and add 48px gap to content col

* fix: card header responsive alignment and title margin reset

* fix: darken card background and active sidebar item bg on light theme

* fix: revert TOC colors and add inline code border radius tweak

* fix: minimal scrollbar for sidebar and TOC — thumb only on hover

* fix: scrollbar fade-in/out transition at 0.25s ease

* feat: add rehype plugin for table column wrapping and centering

Inserts zero-width space after underscores in inline code cells so long
env-var names wrap at underscore boundaries. Also centers Format/Default
columns via a col-center class applied at build time.

* fix: use --ifm-heading-color for sidebar group labels in both themes

* refactor: split docs custom.css into themed partials

Breaks the 1,658-line monolithic custom.css into 8 focused files
(tokens, layout, navbar, sidebar, typography, components, code,
redocusaurus). custom.css is now a thin entry point with @imports.

* fix: align sidebar and navbar with shared --docs-gutter token

Introduces --docs-gutter: 1rem in tokens.css and applies it to both
navbar__inner horizontal padding and sidebar nav.menu padding-left,
keeping the Langflow logo and sidebar items visually aligned.

* fix: match sidebar ad background to page background color

Dark mode uses #111 (same as sidebar bg); light mode uses --ifm-background-color.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/css/code.css                             |   91 ++
 docs/css/components.css                       |  369 +++++
 docs/css/custom.css                           | 1426 +----------------
 docs/css/layout.css                           |  167 ++
 docs/css/navbar.css                           |  199 +++
 docs/css/redocusaurus.css                     |   55 +
 docs/css/sidebar.css                          |  513 ++++++
 docs/css/tokens.css                           |   37 +
 docs/css/typography.css                       |  201 +++
 docs/docusaurus.config.js                     |    3 +
 docs/package-lock.json                        |   78 +-
 docs/package.json                             |   10 +-
 docs/src/clientModules/tocProgress.js         |   86 +
 docs/src/plugins/rehypeWbrUnderscore.js       |   94 ++
 .../theme/DocItem/Layout/styles.module.css    |    1 +
 15 files changed, 1901 insertions(+), 1429 deletions(-)
 create mode 100644 docs/css/code.css
 create mode 100644 docs/css/components.css
 create mode 100644 docs/css/layout.css
 create mode 100644 docs/css/navbar.css
 create mode 100644 docs/css/redocusaurus.css
 create mode 100644 docs/css/sidebar.css
 create mode 100644 docs/css/tokens.css
 create mode 100644 docs/css/typography.css
 create mode 100644 docs/src/clientModules/tocProgress.js
 create mode 100644 docs/src/plugins/rehypeWbrUnderscore.js

diff --git a/docs/css/code.css b/docs/css/code.css
new file mode 100644
index 0000000000..2f10e8fa60
--- /dev/null
+++ b/docs/css/code.css
@@ -0,0 +1,91 @@
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+.ch-scrollycoding-content {
+  max-width: 55% !important;
+  min-width: 40% !important;
+}
+
+.ch-scrollycoding-sticker {
+  max-width: 60% !important;
+  min-width: 45% !important;
+}
+
+.ch-scrollycoding-step-content {
+  min-height: 70px;
+}
+
+/* ========================================
+   Code Blocks - Enhanced (Langfuse style)
+   ======================================== */
+
+/* Code block title/filename label */
+.theme-code-block div[class*="codeBlockTitle"] {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  background: var(--ifm-color-emphasis-100);
+  border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0;
+}
+
+[data-theme="dark"] .theme-code-block div[class*="codeBlockTitle"] {
+  background: #232328;
+  border-bottom-color: #303038;
+}
+
+/* Code block container */
+.theme-code-block {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: var(--ifm-global-radius);
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+}
+
+[data-theme="dark"] .theme-code-block {
+  border-color: #303038;
+}
+
+/* Line highlighting in code blocks */
+.theme-code-block-highlighted-line {
+  background-color: rgba(var(--ifm-color-primary-rgb, 200, 100, 150), 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid var(--ifm-color-primary);
+}
+
+/* Code Hike + CodeSnippet: Code Hike uses height:100% on .ch-codeblock > * and omits overflow on the
+   wrapper when measured; we shrink-wrap the block (fixes <details>/Collapsible height) and put
+   overflow on <code> only so the copy button stays in the corner while scrolling long lines. */
+.markdown .ch-codeblock {
+  min-width: 0;
+  max-width: 100%;
+  height: fit-content;
+  align-self: flex-start;
+}
+
+.markdown .ch-codeblock .ch-code-wrapper {
+  min-width: 0;
+  box-sizing: border-box;
+  height: fit-content !important;
+  max-height: none !important;
+  min-height: 0;
+}
+
+.markdown .ch-codeblock .ch-code-wrapper > .ch-code-scroll-parent {
+  display: block;
+  overflow-x: auto;
+  overflow-y: auto;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.markdown .ch-codeblock .ch-code-button {
+  right: calc(10px + 0.75rem);
+  z-index: 2;
+}
diff --git a/docs/css/components.css b/docs/css/components.css
new file mode 100644
index 0000000000..4fd8853ea0
--- /dev/null
+++ b/docs/css/components.css
@@ -0,0 +1,369 @@
+/* Tabs Styling */
+.tabs-container {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.tabs {
+  margin-bottom: 1rem;
+}
+
+.tabs__item {
+  border: none;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  margin-right: 0rem;
+  padding-bottom: 0.5rem;
+  border-radius: 0;
+}
+
+.tabs__item:hover {
+  background-color: var(--ifm-hover-overlay);
+}
+
+.tabs__item--active {
+  border-bottom-color: var(--ifm-tabs-color-active);
+}
+
+/* Dark Mode - Cards & surfaces */
+[data-theme="dark"] .markdown details {
+  background: var(--ifm-card-background-color, #232328);
+  border-color: var(--ifm-card-border-color, #303038);
+}
+
+[data-theme="dark"] .tabs-container {
+  border-color: var(--ifm-card-border-color, #303038);
+  background: var(--ifm-card-background-color, #232328);
+}
+
+/* Admonitions - subtle, muted style */
+.admonition {
+  border-radius: 8px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-left-width: 3px;
+  font-size: 0.9375rem;
+}
+
+[data-theme="dark"] .admonition {
+  background: rgba(255, 255, 255, 0.02);
+  border-color: #303038;
+  border-left-color: var(--ifm-color-primary);
+}
+
+[data-theme="dark"] .admonition .admonition-heading h5 {
+  color: #a0a0a8;
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ========================================
+   Steps Component
+   ======================================== */
+
+.steps-container {
+  counter-reset: step-counter;
+  padding-left: 0;
+}
+
+.step-item {
+  counter-increment: step-counter;
+  position: relative;
+  padding-left: 3rem;
+  padding-bottom: 2rem;
+  border-left: 2px solid var(--ifm-color-emphasis-200);
+  margin-left: 0.875rem;
+}
+
+.step-item:last-child {
+  border-left-color: transparent;
+  padding-bottom: 0;
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 0.75rem;
+}
+
+.step-number {
+  position: absolute;
+  left: -0.875rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background: var(--ifm-color-primary);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-number::before {
+  content: counter(step-counter);
+}
+
+.step-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.75rem;
+}
+
+.step-content {
+  color: var(--ifm-color-emphasis-800);
+}
+
+[data-theme="dark"] .step-item {
+  border-left-color: var(--ifm-card-border-color, #303038);
+}
+
+[data-theme="dark"] .step-item:last-child {
+  border-left-color: transparent;
+}
+
+/* ========================================
+   Cards Component
+   ======================================== */
+
+.lf-cards {
+  display: grid;
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+@media (max-width: 768px) {
+  .lf-cards {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.lf-card-link {
+  text-decoration: none !important;
+  color: inherit !important;
+  display: flex;
+}
+
+.lf-card {
+  position: relative;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-background-surface-color);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.lf-card:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 0 0 1px var(--ifm-color-primary);
+}
+
+.lf-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.lf-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  color: var(--ifm-color-primary);
+  flex-shrink: 0;
+}
+
+.lf-card-title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  margin: 0 !important;
+  line-height: 1.4;
+  min-width: 0;
+  flex: 1;
+}
+
+.lf-card-body {
+  font-size: 0.9375rem;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.6;
+  flex: 1;
+}
+
+.lf-card-body ul {
+  margin: 0.5rem 0 0;
+  padding-left: 1.25rem;
+}
+
+.lf-card-body li {
+  margin-bottom: 0.25rem;
+}
+
+.lf-card-arrow {
+  position: absolute;
+  top: 1.25rem;
+  right: 1.25rem;
+  color: var(--ifm-color-emphasis-400);
+  transition: color 0.15s ease, transform 0.15s ease;
+}
+
+.lf-card:hover .lf-card-arrow {
+  color: var(--ifm-color-primary);
+  transform: translateX(2px);
+}
+
+[data-theme="dark"] .lf-card {
+  background: var(--ifm-card-background-color, #232328);
+  border-color: var(--ifm-card-border-color, #303038);
+}
+
+/* ========================================
+   Frame Component
+   ======================================== */
+
+.lf-frame {
+  margin: 1.5rem 0;
+}
+
+.lf-frame-content {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: var(--ifm-global-radius);
+  overflow: hidden;
+  background: var(--ifm-color-emphasis-100);
+}
+
+.lf-frame-content img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: none;
+  max-width: none;
+  margin: 0;
+}
+
+/* Light/dark image variants */
+[data-theme="light"] .lf-frame-img--dark {
+  display: none;
+}
+
+[data-theme="dark"] .lf-frame-img--light {
+  display: none;
+}
+
+.lf-frame-caption {
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--ifm-color-emphasis-600);
+  margin-top: 0.5rem;
+}
+
+[data-theme="dark"] .lf-frame-content {
+  border-color: var(--ifm-card-border-color, #303038);
+  background: #111;
+}
+
+/* ========================================
+   Video Component
+   ======================================== */
+
+.lf-video {
+  margin: 1.5rem 0;
+}
+
+.lf-video-wrapper {
+  position: relative;
+  padding-top: 56.25%; /* 16:9 */
+  border-radius: var(--ifm-global-radius);
+  overflow: hidden;
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+[data-theme="dark"] .lf-video-wrapper {
+  border-color: var(--ifm-card-border-color, #303038);
+}
+
+/* ========================================
+   Callout Component
+   ======================================== */
+
+.lf-callout {
+  padding: 1rem 1.25rem;
+  border-radius: var(--ifm-global-radius);
+  margin: 1.5rem 0;
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.lf-callout-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.375rem;
+}
+
+.lf-callout-emoji {
+  font-size: 1rem;
+}
+
+.lf-callout-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+}
+
+.lf-callout-body {
+  font-size: 0.9375rem;
+  color: var(--ifm-color-emphasis-800);
+  line-height: 1.6;
+}
+
+.lf-callout--info {
+  background: rgba(59, 130, 246, 0.05);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.lf-callout--warning {
+  background: rgba(245, 158, 11, 0.05);
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+.lf-callout--tip {
+  background: rgba(34, 197, 94, 0.05);
+  border-color: rgba(34, 197, 94, 0.2);
+}
+
+.lf-callout--note {
+  background: rgba(168, 85, 247, 0.05);
+  border-color: rgba(168, 85, 247, 0.2);
+}
+
+[data-theme="dark"] .lf-callout {
+  border-color: var(--ifm-card-border-color, #303038);
+}
+
+[data-theme="dark"] .lf-callout--info {
+  background: rgba(59, 130, 246, 0.08);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+[data-theme="dark"] .lf-callout--warning {
+  background: rgba(245, 158, 11, 0.08);
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+[data-theme="dark"] .lf-callout--tip {
+  background: rgba(34, 197, 94, 0.08);
+  border-color: rgba(34, 197, 94, 0.2);
+}
+
+[data-theme="dark"] .lf-callout--note {
+  background: rgba(168, 85, 247, 0.08);
+  border-color: rgba(168, 85, 247, 0.2);
+}
diff --git a/docs/css/custom.css b/docs/css/custom.css
index edfb214b94..acb5916fec 100644
--- a/docs/css/custom.css
+++ b/docs/css/custom.css
@@ -1,1418 +1,8 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
- :root {
-  --ifm-navbar-link-hover-color: initial;
-  --ifm-navbar-padding-vertical: 0;
-  --ifm-global-radius: 10px;
-  --ifm-navbar-item-padding-vertical: 0;
-  --ifm-font-family-base: "Geist", Inter, -apple-system, BlinkMacSystemFont,
-    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
-  --ifm-font-family-monospace: "Geist Mono", "SFMono-Regular", "Roboto Mono",
-    Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  --ifm-heading-font-weight: 700;
-  --ifm-line-height-base: 1.7;
-}
-
-/* Light theme - Pure white background */
-html[data-theme="light"] {
-  --ifm-color-primary: hsla(333, 71%, 51%, 1); /* Slightly darker pink for light theme */
-  --ifm-background-color: var(--ifm-color-white);
-  --ifm-background-surface-color: var(--ifm-color-white);
-}
-
-/* Dark theme - Slate dark background (Langfuse style) */
-html[data-theme="dark"] {
-  --ifm-color-primary: hsla(329, 45%, 58%, 1); /* Muted, desaturated pink */
-  --ifm-background-color: #111; /* Warm slate, not pure black */
-  --ifm-background-surface-color: #111;
-  --ifm-card-background-color: #232328;
-  --ifm-card-border-color: #303038;
-  --ifm-font-color-base: #a8a8b0; /* Soft gray text */
-  --ifm-heading-color: #cdcdd4; /* Headings: brighter but still muted */
-  --ifm-color-emphasis-600: #777;
-  --ifm-color-emphasis-700: #8a8a90;
-  --ifm-menu-color: #8a8a92; /* Sidebar text: muted slate */
-  --ifm-toc-border-color: #2c2c32;
-  --ifm-navbar-background-color: #111;
-}
-
-/* override the infima navbar docs/node_modules/infima/dist/css/default/default.css */
-.navbar {
-  box-shadow: none !important;
-  border-bottom: 1px solid var(--ifm-toc-border-color);
-}
-
-[data-theme="dark"] .navbar {
-  background: #111;
-  border-bottom-color: #2c2c32;
-}
-
-[data-theme="dark"] .main-wrapper .theme-doc-sidebar-container {
-  background: #111;
-  border-right: none;
-}
-
-/* Navbar - smaller logo, more padding, compact */
-.navbar__logo {
-  height: 1.5rem; /* Smaller logo */
-}
-
-/* Improve logo grey marks contrast on light background */
-html[data-theme="light"] .navbar__logo {
-  filter: brightness(0.78) contrast(1.05);
-}
-
-.navbar__inner {
-  padding: 0.5rem 1.5rem;
-}
-
-/* Sidebar - padded from left edge  */
-.theme-doc-sidebar-container {
-  padding-top: 0.75rem;
-  margin-left: 0.75rem;
-  border-right: none !important;
-}
-
-.theme-doc-sidebar-container nav.menu {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-/* Remove sidebar border globally */
-[class*="docSidebarContainer"] {
-  border-right: none !important;
-}
-
-/* Content area - breathing room */
-[class*="docMainContainer"] {
-  padding-left: 3rem;
-}
-
-/* Main doc content max-width, centered */
-.markdown {
-  max-width: 800px;
-}
-
-/*
- * Inline Lucide icons in body copy (<Icon /> in MDX).
- * Default lucide-react size is 24px, which reads huge next to Geist body text.
- * Scale to the font (and keep card / explicit sizes overridable below).
- */
-.markdown p svg.lf-inline-icon,
-.markdown li svg.lf-inline-icon,
-.markdown td svg.lf-inline-icon,
-.markdown th svg.lf-inline-icon,
-.markdown blockquote svg.lf-inline-icon {
-  width: 1em !important;
-  height: 1em !important;
-  min-width: 0.875em;
-  min-height: 0.875em;
-  vertical-align: -0.14em;
-}
-
-/* Card grid: keep icons tied to card title scale, not body 1em */
-.lf-card-icon svg.lf-inline-icon {
-  width: 1.25rem !important;
-  height: 1.25rem !important;
-  vertical-align: middle;
-}
-
-/* Overall layout - more centered feel */
-.main-wrapper {
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.theme-doc-sidebar-item-category.menu__list-item:not(:first-child) {
-  margin-top: 0.5rem !important;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-.diagonal-box {
-  transform: skewY(-6deg);
-}
-
-.diagonal-content {
-  transform: skewY(6deg);
-}
-
-[class^="announcementBar"] {
-  z-index: 10;
-}
-
-.showcase {
-  background-color: #fff;
-}
-
-.showcase-border {
-  border-color: rgba(243, 244, 246, 1);
-}
-
-.text-description {
-  color: rgba(107, 114, 128, 1);
-}
-
-p {
-  text-align: start;
-}
-
-/* Tabs Styling */
-.tabs-container {
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.tabs {
-  margin-bottom: 1rem;
-}
-
-.tabs__item {
-  border: none;
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
-  margin-right: 0rem;
-  padding-bottom: 0.5rem;
-  border-radius: 0;
-}
-
-.tabs__item:hover {
-  background-color: var(--ifm-hover-overlay);
-}
-
-.tabs__item--active {
-  border-bottom-color: var(--ifm-tabs-color-active);
-}
-
-/* apply */
-#hero-apply {
-  z-index: -1;
-  background-image: linear-gradient(
-    var(--ifm-footer-background-color),
-    var(--ifm-navbar-background-color)
-  );
-}
-
-.apply-form {
-  background-image: linear-gradient(#fff, #f5f5fa);
-  max-width: 600px;
-}
-
-.apply-text {
-  color: #36395a;
-}
-
-/* index */
-#hero {
-  background-image: linear-gradient(
-    var(--ifm-footer-background-color),
-    var(--ifm-navbar-background-color)
-  );
-}
-
-/* Hero component title overrides to match other heading styles */
-.hero-title {
-  color: rgb(28, 30, 33);
-  font-family: var(--ifm-heading-font-family);
-}
-
-/* Typography - */
-.markdown h1 {
-  font-size: 2.25rem; /* 36px */
-  font-weight: 700;
-  line-height: 1.25;
-  letter-spacing: -0.02em;
-  margin-bottom: 0.75rem;
-}
-
-.markdown h2 {
-  font-size: 1.5rem; /* 24px */
-  font-weight: 650;
-  line-height: 1.35;
-  letter-spacing: -0.01em;
-  margin-top: 2rem;
-  margin-bottom: 0.75rem;
-}
-
-.markdown h3 {
-  font-size: 1.25rem; /* 20px */
-  font-weight: 650;
-  line-height: 1.4;
-  margin-top: 1.75rem;
-  margin-bottom: 0.5rem;
-}
-
-.markdown h4 {
-  font-size: 1.125rem; /* 18px */
-  font-weight: 650;
-  line-height: 1.45;
-  margin-top: 1.25rem;
-  margin-bottom: 0.4rem;
-}
-
-body {
-  font-size: 16px;
-}
-
-.docsearch-logo {
-  color: #21243d;
-}
-
-.apply-button:hover {
-  color: #fff;
-}
-
-/* Social icons - smaller, muted */
-.header-github-link,
-.header-twitter-link,
-.header-discord-link {
-  opacity: 0.5;
-  transition: opacity 0.15s ease;
-  padding: 0.25rem 0.35rem;
-  border-radius: 6px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.header-github-link:hover,
-.header-twitter-link:hover,
-.header-discord-link:hover {
-  opacity: 0.8;
-}
-
-.header-github-link:before {
-  content: "";
-  width: 18px;
-  height: 18px;
-  display: flex;
-  background: url("/logos/gitLight.svg") no-repeat;
-  background-size: contain;
-}
-
-[data-theme="dark"] .header-github-link:before {
-  background: url("/logos/gitDark.svg") no-repeat;
-  background-size: contain;
-  width: 18px;
-  height: 18px;
-}
-
-.header-twitter-link::before {
-  content: "";
-  width: 18px;
-  height: 18px;
-  display: flex;
-  background: url("/logos/xLight.svg") no-repeat;
-  background-size: contain;
-}
-
-[data-theme="dark"] .header-twitter-link::before {
-  background: url("/logos/xDark.svg") no-repeat;
-  background-size: contain;
-  width: 18px;
-  height: 18px;
-}
-
-.header-discord-link {
-  margin-right: 0.5rem;
-}
-
-.header-discord-link::before {
-  content: "";
-  width: 18px;
-  height: 18px;
-  display: flex;
-  background: url("/logos/discordLight.svg") no-repeat;
-  background-size: contain;
-}
-
-[data-theme="dark"] .header-discord-link::before {
-  background: url("/logos/discordDark.svg") no-repeat;
-  background-size: contain;
-  width: 18px;
-  height: 18px;
-}
-
-/* Images */
-.image-rendering-crisp {
-  image-rendering: crisp-edges;
-
-  /* alias for google chrome */
-  image-rendering: -webkit-optimize-contrast;
-}
-
-.image-rendering-pixel {
-  image-rendering: pixelated;
-}
-
-.img-center {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-/* Add comprehensive image control */
-.markdown img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 1rem auto;
-  max-height: 600px;
-  object-fit: contain;
-}
-
-/* Default size for most images */
-.markdown img:not(.resized-image) {
-  max-width: 600px;
-  width: auto;
-}
-
-.resized-image {
-  width: 300px;
-  max-height: 500px;
-}
-
-/* Responsive images on mobile devices */
-@media (max-width: 768px) {
-  .markdown img:not(.resized-image) {
-    max-width: 100%;
-    max-height: 500px;
-  }
-
-  .resized-image {
-    width: 100%;
-    max-width: 300px;
-    max-height: 400px;
-  }
-}
-
-/* Reduce width on mobile for Mendable Search */
-@media (max-width: 767px) {
-  .mendable-search {
-    width: 200px;
-  }
-}
-
-@media (max-width: 500px) {
-  .mendable-search {
-    width: 150px;
-  }
-}
-
-@media (max-width: 380px) {
-  .mendable-search {
-    width: 140px;
-  }
-}
-/*
-.ch-scrollycoding {
-  gap: 10rem !important;
-} */
-
-.ch-scrollycoding-content {
-  max-width: 55% !important;
-  min-width: 40% !important;
-}
-
-.ch-scrollycoding-sticker {
-  max-width: 60% !important;
-  min-width: 45% !important;
-}
-
-.ch-scrollycoding-step-content {
-  min-height: 70px;
-}
-
-.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(
-    :first-child
-  ) {
-  margin-top: 0.15rem !important;
-}
-
-/* Footer Styles */
-.footer {
-  /* padding: 8px 0; */
-  padding: 1rem 0 0;
-  background-color: var(--ifm-background-color);
-  border-top: 1px solid var(--ifm-color-emphasis-200);
-}
-
-[data-theme="light"] .footer {
-  border-top: 1px solid var(--ifm-color-emphasis-300);
-}
-
-.footer-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 var(--ifm-navbar-padding-horizontal);
-  max-width: var(--ifm-container-width);
-  margin: 0 auto;
-  font-size: 12px;
-}
-
-.footer__copyright {
-  color: var(--ifm-toc-link-color);
-}
-
-.footer-links {
-  display: flex;
-  gap: 0.5rem;
-  font-size: 13px;
-}
-
-.footer-links a {
-  color: var(--ifm-toc-link-color);
-  text-decoration: none;
-}
-
-.footer-links a:hover {
-  text-decoration: underline;
-}
-
-.footer .container {
-  padding: 0 1.25rem;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  flex-direction: row-reverse;
-  max-width: 100%;
-}
-
-.footer__title {
-  margin-bottom: 0;
-}
-
-/* Sidebar Styles */
-.theme-doc-sidebar-container nav.menu {
-  padding-bottom: 0;
-}
-
-.theme-doc-sidebar-menu {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-/* Pin the Desktop CTA (last item) to the bottom of the sidebar column */
-@media (min-width: 997px) {
-  .theme-doc-sidebar-container nav.menu {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-    /* Docusaurus default .menu padding includes bottom gap under the last item */
-    padding-bottom: 0 !important;
-  }
-
-  .theme-doc-sidebar-container nav.menu .menu__list {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-    padding-bottom: 0;
-    margin-bottom: 0;
-  }
-
-  /* HTML sidebar item: className is on the <li> (may not include .menu__list-item) */
-  .theme-doc-sidebar-container nav.menu .menu__list > li.sidebar-ad {
-    margin-top: auto;
-    flex-shrink: 0;
-  }
-}
-
-/* Sidebar Chevrons - tiny, subtle arrows */
-.menu__link--sublist-caret::after,
-.menu__caret::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f3f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
-  background-size: 12px 12px !important;
-  width: 12px !important;
-  height: 12px !important;
-  min-width: 12px !important;
-  min-height: 12px !important;
-  opacity: 0.65;
-  transition: transform 0.2s ease, opacity 0.15s ease;
-}
-
-.menu__link--sublist-caret:hover::after,
-.menu__caret:hover::before {
-  opacity: 0.85;
-}
-
-/* Dark theme chevrons: higher-contrast strokes */
-[data-theme="dark"] .menu__link--sublist-caret::after,
-[data-theme="dark"] .menu__caret::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
-  opacity: 0.45;
-}
-
-[data-theme="dark"] .menu__link--sublist-caret:hover::after,
-[data-theme="dark"] .menu__caret:hover::before {
-  opacity: 0.7;
-}
-
-/* Expanded state rotation */
-.menu__list-item--collapsed .menu__link--sublist-caret::after,
-.menu__list-item--collapsed .menu__caret::before {
-  transform: rotate(0deg);
-}
-
-.menu__link--sublist-caret::after,
-.menu__caret::before {
-  transform: rotate(90deg);
-}
-
-/* ========================================
-
-/* Sidebar font size - smaller, more compact */
-.menu__link {
-  /* Slightly larger + tighter vertical rhythm */
-  font-size: 0.825rem; /* ~13.2px */
-  padding: 0.25rem var(--ifm-menu-link-padding-horizontal);
-  line-height: 1.35;
-}
-
-[data-theme="dark"] .menu__link {
-  color: #8a8a92;
-}
-
-[data-theme="dark"] .menu__link:hover {
-  color: #b8b8c0;
-  background: rgba(255, 255, 255, 0.03);
-}
-
-[data-theme="dark"] .menu__link--active:not(.menu__link--sublist) {
-  color: var(--ifm-color-primary);
-  background: rgba(255, 255, 255, 0.03);
-}
-
-/* Subcategory items even smaller */
-.menu__list .menu__list .menu__link {
-  font-size: 0.8125rem;
-  padding-top: 0.2rem;
-  padding-bottom: 0.2rem;
-}
-
-/* Sidebar Group Dividers (Langfuse-style section headers) */
-.sidebar-group-divider {
-  margin-top: 1.25rem !important;
-  margin-bottom: 0.25rem !important;
-  padding: 0 !important;
-  list-style: none;
-}
-
-.sidebar-group-divider:first-child {
-  margin-top: 0.25rem !important;
-}
-
-.sidebar-group-label {
-  font-size: 0.625rem; /* 10px */
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--ifm-color-emphasis-500);
-  padding: 0.25rem var(--ifm-menu-link-padding-horizontal);
-  opacity: 0.6;
-}
-
-/* Light theme: increase contrast for sidebar section labels ("BUILD", etc) */
-html[data-theme="light"] .sidebar-group-label {
-  color: #2f2f35 !important;
-  opacity: 1 !important;
-}
-
-[data-theme="dark"] .sidebar-group-label {
-  color: #c7c7d0 !important;
-  opacity: 1 !important;
-}
-
-/* Sidebar Category Icons */
-.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link::before {
-  content: "";
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-  display: inline-block;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  -webkit-mask-size: 18px 18px;
-  mask-size: 18px 18px;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  opacity: 0.45;
-}
-
-/* Sidebar icon colors via CSS filters / mask approach */
-.sidebar-icon-rocket > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-workflow > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-bot > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-plug > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8z'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8z'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-code > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-cloud > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-blocks > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Cpath d='M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Cpath d='M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-fileCode > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-gitPR > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M6 9v12'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M6 9v12'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-.sidebar-icon-helpCircle > .menu__list-item-collapsible > .menu__link::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
-  background-color: currentColor;
-}
-
-/* Sidebar Ad Styles — raised “card” treatment (inset from nav, shadow, rounded) */
-.sidebar-ad {
-  margin-left: 0.5rem;
-  margin-right: 0.75rem;
-  margin-top: auto;
-  margin-bottom: 0.75rem;
-  padding: 0;
-  border-radius: var(--ifm-global-radius);
-  border: 1px solid var(--ifm-color-emphasis-300);
-  position: relative;
-  overflow: hidden;
-  transition:
-    box-shadow 0.18s ease,
-    border-color 0.18s ease;
-}
-
-[data-theme="dark"] .sidebar-ad {
-  background-color: var(--ifm-card-background-color, #232328);
-  border-color: var(--ifm-card-border-color, #303038);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.04) inset,
-    0 4px 6px rgba(0, 0, 0, 0.25),
-    0 12px 28px rgba(0, 0, 0, 0.45);
-}
-
-[data-theme="light"] .sidebar-ad {
-  background-color: var(--ifm-background-surface-color);
-  border-color: var(--ifm-color-emphasis-200);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.8) inset,
-    0 4px 12px rgba(15, 23, 42, 0.08),
-    0 12px 28px rgba(15, 23, 42, 0.06);
-}
-
-[data-theme="dark"] .sidebar-ad:hover {
-  border-color: var(--ifm-color-emphasis-400);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.06) inset,
-    0 6px 10px rgba(0, 0, 0, 0.3),
-    0 16px 36px rgba(0, 0, 0, 0.5);
-}
-
-[data-theme="light"] .sidebar-ad:hover {
-  border-color: var(--ifm-color-emphasis-300);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.9) inset,
-    0 6px 16px rgba(15, 23, 42, 0.1),
-    0 16px 36px rgba(15, 23, 42, 0.08);
-}
-
-.sidebar-ad a.menu__link {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.65rem 0.75rem;
-  font-family: var(--ifm-font-family-base);
-  text-decoration: none !important;
-  border-radius: calc(var(--ifm-global-radius) - 1px);
-}
-
-.sidebar-ad a.menu__link:hover {
-  background: rgba(255, 255, 255, 0.04);
-}
-
-[data-theme="light"] .sidebar-ad a.menu__link:hover {
-  background: var(--ifm-hover-overlay);
-}
-
-.sidebar-ad a.menu__link svg {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-  opacity: 0.85;
-  color: var(--ifm-color-emphasis-700);
-}
-
-[data-theme="dark"] .sidebar-ad a.menu__link svg {
-  color: #8a8a92;
-}
-
-.sidebar-ad-text-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
-  text-align: left;
-}
-
-.sidebar-ad-text {
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  font-family: inherit;
-  font-weight: 400;
-}
-
-/* Muted line — same family as nav, reads like helper copy */
-.sidebar-ad-text-container > .sidebar-ad-text:first-of-type {
-  color: #4b4b55;
-}
-
-[data-theme="dark"] .sidebar-ad-text-container > .sidebar-ad-text:first-of-type {
-  color: #bdbdc7;
-}
-
-/* CTA line — primary color + medium weight, aligned with active nav / category labels */
-.sidebar-ad-text-gradient {
-  color: var(--ifm-color-primary);
-  font-weight: 500;
-  background: none;
-  -webkit-text-fill-color: unset;
-}
-
-[data-theme="dark"] .sidebar-ad-text-gradient {
-  /* Brighter pink for WCAG contrast on dark background */
-  color: #ff6ad0;
-}
-
-/* Component details styling */
-.markdown details {
-  width: 100%;
-  background: var(--ifm-background-color);
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
-  margin-bottom: 1rem;
-}
-
-.markdown details summary {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  list-style: none;
-  outline: none;
-  cursor: pointer;
-}
-
-.markdown details summary:focus-visible {
-  outline: 2px solid var(--ifm-color-primary, #a855f7);
-  outline-offset: 2px;
-}
-
-.markdown details [class^="collapsibleContent"] {
-  border-top: none !important;
-  padding: 0;
-}
-
-/* DocSearch Input Styling - wider, muted, blends with theme */
-.DocSearch-Button {
-  border: 1px solid var(--ifm-color-emphasis-200) !important;
-  border-radius: 8px !important;
-  background: transparent !important;
-  color: #4b4b55 !important;
-  min-width: 220px !important;
-  padding: 0 1rem !important;
-  height: 2.25rem !important;
-}
-
-[data-theme="dark"] .DocSearch-Button {
-  border-color: #303038 !important;
-  background: rgba(255, 255, 255, 0.03) !important;
-  color: #c6c6d1 !important;
-}
-
-.DocSearch-Button:hover,
-.DocSearch-Button:focus {
-  border-color: var(--ifm-color-emphasis-400) !important;
-  box-shadow: none !important;
-}
-
-[data-theme="dark"] .DocSearch-Button:hover {
-  border-color: #454550 !important;
-  background: rgba(255, 255, 255, 0.05) !important;
-}
-
-.DocSearch-Search-Icon {
-  color: #4b4b55 !important;
-  width: 15px !important;
-  height: 15px !important;
-}
-
-.DocSearch-Button-Placeholder {
-  font-size: 0.8125rem !important;
-  color: inherit !important;
-}
-
-[data-theme="dark"] .DocSearch-Search-Icon {
-  color: #c6c6d1 !important;
-}
-
-[data-theme="dark"] .DocSearch-Button-Keys kbd {
-  background: rgba(255, 255, 255, 0.06) !important;
-  border-color: #383840 !important;
-  color: #6a6a72 !important;
-  box-shadow: none !important;
-}
-
-/* ========================================
-   Code Blocks - Enhanced (Langfuse style)
-   ======================================== */
-
-/* Code block title/filename label */
-.theme-code-block div[class*="codeBlockTitle"] {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
-  background: var(--ifm-color-emphasis-100);
-  border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0;
-}
-
-[data-theme="dark"] .theme-code-block div[class*="codeBlockTitle"] {
-  background: #232328;
-  border-bottom-color: #303038;
-}
-
-/* Code block container */
-.theme-code-block {
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: var(--ifm-global-radius);
-  overflow: hidden;
-  margin-bottom: 1.5rem;
-}
-
-[data-theme="dark"] .theme-code-block {
-  border-color: #303038;
-}
-
-/* Line highlighting in code blocks */
-.theme-code-block-highlighted-line {
-  background-color: rgba(var(--ifm-color-primary-rgb, 200, 100, 150), 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-  border-left: 3px solid var(--ifm-color-primary);
-}
-
-/* Code Hike + CodeSnippet: Code Hike uses height:100% on .ch-codeblock > * and omits overflow on the
-   wrapper when measured; we shrink-wrap the block (fixes <details>/Collapsible height) and put
-   overflow on <code> only so the copy button stays in the corner while scrolling long lines. */
-.markdown .ch-codeblock {
-  min-width: 0;
-  max-width: 100%;
-  height: fit-content;
-  align-self: flex-start;
-}
-
-.markdown .ch-codeblock .ch-code-wrapper {
-  overflow: visible;
-  min-width: 0;
-  box-sizing: border-box;
-  height: fit-content !important;
-  max-height: none !important;
-  min-height: 0;
-}
-
-.markdown .ch-codeblock .ch-code-wrapper > .ch-code-scroll-parent {
-  display: block;
-  overflow-x: auto;
-  overflow-y: auto;
-  max-width: 100%;
-  min-width: 0;
-}
-
-.markdown .ch-codeblock .ch-code-button {
-  right: calc(10px + 0.75rem);
-  z-index: 2;
-}
-
-/* ========================================
-   Breadcrumbs - Langfuse style
-   ======================================== */
-
-.breadcrumbs__link {
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 0.875rem;
-  color: #44444d;
-}
-
-.breadcrumbs__link:hover {
-  background: none;
-  color: var(--ifm-color-primary);
-}
-
-.breadcrumbs__item--active .breadcrumbs__link {
-  background: none;
-  color: #2f2f35;
-  font-weight: 500;
-}
-
-[data-theme="dark"] .breadcrumbs__link {
-  color: #c7c7d0;
-}
-
-[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link {
-  color: #e5e5ec;
-}
-
-/* Style the native Docusaurus breadcrumb separator */
-.breadcrumbs__item--separator {
-  font-size: 0.75rem;
-  color: var(--ifm-color-emphasis-400);
-  margin: 0 0.25rem;
-  opacity: 0.6;
-}
-
-/* ========================================
-   Sidebar - Active indicator & spacing
-   ======================================== */
-
-/* Active item - subtle left border indicator */
-.menu__link--active:not(.menu__link--sublist) {
-  border-left: 2px solid var(--ifm-color-primary);
-  padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 2px);
-  background: rgba(255, 255, 255, 0.03);
-  font-weight: 500;
-}
-
-/* Sidebar category label styling */
-.theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
-  font-weight: 500;
-  font-size: 0.8125rem; /* 13px - same as items */
-}
-
-[data-theme="dark"] .theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
-  color: #9a9aa2; /* Slightly brighter than items but still muted */
-}
-
-/* ========================================
-   Table of Contents (TOC) - Right side
-   ======================================== */
-
-.table-of-contents {
-  font-size: 0.8125rem;
-  border-left: 1px solid var(--ifm-color-emphasis-200);
-}
-
-.table-of-contents__link {
-  color: #4b4b55;
-  transition: color 0.15s ease;
-}
-
-[data-theme="dark"] .table-of-contents__link {
-  color: #b8b8c0;
-}
-
-.table-of-contents__link:hover,
-.table-of-contents__link--active {
-  color: var(--ifm-color-primary);
-  font-weight: 500;
-}
-
-/* ========================================
-   Dark Mode - Cards & surfaces
-   ======================================== */
-
-[data-theme="dark"] .markdown details {
-  background: var(--ifm-card-background-color, #232328);
-  border-color: var(--ifm-card-border-color, #303038);
-}
-
-[data-theme="dark"] .tabs-container {
-  border-color: var(--ifm-card-border-color, #303038);
-  background: var(--ifm-card-background-color, #232328);
-}
-
-/* Admonitions - subtle, muted style */
-.admonition {
-  border-radius: 8px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-left-width: 3px;
-  font-size: 0.9375rem;
-}
-
-[data-theme="dark"] .admonition {
-  background: rgba(255, 255, 255, 0.02);
-  border-color: #303038;
-  border-left-color: var(--ifm-color-primary);
-}
-
-[data-theme="dark"] .admonition .admonition-heading h5 {
-  color: #a0a0a8;
-  font-size: 0.8125rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* ========================================
-   Steps Component
-   ======================================== */
-
-.steps-container {
-  counter-reset: step-counter;
-  padding-left: 0;
-}
-
-.step-item {
-  counter-increment: step-counter;
-  position: relative;
-  padding-left: 3rem;
-  padding-bottom: 2rem;
-  border-left: 2px solid var(--ifm-color-emphasis-200);
-  margin-left: 0.875rem;
-}
-
-.step-item:last-child {
-  border-left-color: transparent;
-  padding-bottom: 0;
-}
-
-.step-header {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  margin-bottom: 0.75rem;
-}
-
-.step-number {
-  position: absolute;
-  left: -0.875rem;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
-  background: var(--ifm-color-primary);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.step-number::before {
-  content: counter(step-counter);
-}
-
-.step-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0;
-  line-height: 1.75rem;
-}
-
-.step-content {
-  color: var(--ifm-color-emphasis-800);
-}
-
-[data-theme="dark"] .step-item {
-  border-left-color: var(--ifm-card-border-color, #303038);
-}
-
-[data-theme="dark"] .step-item:last-child {
-  border-left-color: transparent;
-}
-
-/* ========================================
-   Cards Component
-   ======================================== */
-
-.lf-cards {
-  display: grid;
-  gap: 1rem;
-  margin: 1.5rem 0;
-}
-
-@media (max-width: 768px) {
-  .lf-cards {
-    grid-template-columns: 1fr !important;
-  }
-}
-
-.lf-card-link {
-  text-decoration: none !important;
-  color: inherit !important;
-  display: flex;
-}
-
-.lf-card {
-  position: relative;
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: var(--ifm-global-radius);
-  background: var(--ifm-background-surface-color);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.lf-card:hover {
-  border-color: var(--ifm-color-primary);
-  box-shadow: 0 0 0 1px var(--ifm-color-primary);
-}
-
-.lf-card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.5rem;
-}
-
-.lf-card-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  color: var(--ifm-color-primary);
-  flex-shrink: 0;
-}
-
-.lf-card-title {
-  font-size: 1.0625rem;
-  font-weight: 600;
-  margin: 0;
-  line-height: 1.4;
-}
-
-.lf-card-body {
-  font-size: 0.9375rem;
-  color: var(--ifm-color-emphasis-700);
-  line-height: 1.6;
-  flex: 1;
-}
-
-.lf-card-body ul {
-  margin: 0.5rem 0 0;
-  padding-left: 1.25rem;
-}
-
-.lf-card-body li {
-  margin-bottom: 0.25rem;
-}
-
-.lf-card-arrow {
-  position: absolute;
-  top: 1.25rem;
-  right: 1.25rem;
-  color: var(--ifm-color-emphasis-400);
-  transition: color 0.15s ease, transform 0.15s ease;
-}
-
-.lf-card:hover .lf-card-arrow {
-  color: var(--ifm-color-primary);
-  transform: translateX(2px);
-}
-
-[data-theme="dark"] .lf-card {
-  background: var(--ifm-card-background-color, #232328);
-  border-color: var(--ifm-card-border-color, #303038);
-}
-
-/* ========================================
-   Frame Component
-   ======================================== */
-
-.lf-frame {
-  margin: 1.5rem 0;
-}
-
-.lf-frame-content {
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: var(--ifm-global-radius);
-  overflow: hidden;
-  background: var(--ifm-color-emphasis-100);
-}
-
-.lf-frame-content img {
-  display: block;
-  width: 100%;
-  height: auto;
-  max-height: none;
-  max-width: none;
-  margin: 0;
-}
-
-/* Light/dark image variants */
-[data-theme="light"] .lf-frame-img--dark {
-  display: none;
-}
-
-[data-theme="dark"] .lf-frame-img--light {
-  display: none;
-}
-
-.lf-frame-caption {
-  text-align: center;
-  font-size: 0.8125rem;
-  color: var(--ifm-color-emphasis-600);
-  margin-top: 0.5rem;
-}
-
-[data-theme="dark"] .lf-frame-content {
-  border-color: var(--ifm-card-border-color, #303038);
-  background: #111;
-}
-
-/* ========================================
-   Video Component
-   ======================================== */
-
-.lf-video {
-  margin: 1.5rem 0;
-}
-
-.lf-video-wrapper {
-  position: relative;
-  padding-top: 56.25%; /* 16:9 */
-  border-radius: var(--ifm-global-radius);
-  overflow: hidden;
-  border: 1px solid var(--ifm-color-emphasis-200);
-}
-
-[data-theme="dark"] .lf-video-wrapper {
-  border-color: var(--ifm-card-border-color, #303038);
-}
-
-/* ========================================
-   Callout Component
-   ======================================== */
-
-.lf-callout {
-  padding: 1rem 1.25rem;
-  border-radius: var(--ifm-global-radius);
-  margin: 1.5rem 0;
-  border: 1px solid var(--ifm-color-emphasis-200);
-}
-
-.lf-callout-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.375rem;
-}
-
-.lf-callout-emoji {
-  font-size: 1rem;
-}
-
-.lf-callout-title {
-  font-weight: 600;
-  font-size: 0.9375rem;
-}
-
-.lf-callout-body {
-  font-size: 0.9375rem;
-  color: var(--ifm-color-emphasis-800);
-  line-height: 1.6;
-}
-
-.lf-callout--info {
-  background: rgba(59, 130, 246, 0.05);
-  border-color: rgba(59, 130, 246, 0.2);
-}
-
-.lf-callout--warning {
-  background: rgba(245, 158, 11, 0.05);
-  border-color: rgba(245, 158, 11, 0.2);
-}
-
-.lf-callout--tip {
-  background: rgba(34, 197, 94, 0.05);
-  border-color: rgba(34, 197, 94, 0.2);
-}
-
-.lf-callout--note {
-  background: rgba(168, 85, 247, 0.05);
-  border-color: rgba(168, 85, 247, 0.2);
-}
-
-[data-theme="dark"] .lf-callout {
-  border-color: var(--ifm-card-border-color, #303038);
-}
-
-[data-theme="dark"] .lf-callout--info {
-  background: rgba(59, 130, 246, 0.08);
-  border-color: rgba(59, 130, 246, 0.2);
-}
-
-[data-theme="dark"] .lf-callout--warning {
-  background: rgba(245, 158, 11, 0.08);
-  border-color: rgba(245, 158, 11, 0.2);
-}
-
-[data-theme="dark"] .lf-callout--tip {
-  background: rgba(34, 197, 94, 0.08);
-  border-color: rgba(34, 197, 94, 0.2);
-}
-
-[data-theme="dark"] .lf-callout--note {
-  background: rgba(168, 85, 247, 0.08);
-  border-color: rgba(168, 85, 247, 0.2);
-}
\ No newline at end of file
+@import "./tokens.css";
+@import "./layout.css";
+@import "./navbar.css";
+@import "./sidebar.css";
+@import "./typography.css";
+@import "./components.css";
+@import "./code.css";
+@import "./redocusaurus.css";
diff --git a/docs/css/layout.css b/docs/css/layout.css
new file mode 100644
index 0000000000..0d16234cf7
--- /dev/null
+++ b/docs/css/layout.css
@@ -0,0 +1,167 @@
+/* Content area - breathing room */
+[class*="docMainContainer"] {
+  padding: 0 0 0 3rem;
+}
+
+[class*="docItemWrapper"] {
+  margin: 0 auto;
+}
+
+/* Prev/Next nav — fills the full content column width */
+.pagination-nav {
+  max-width: 100%;
+}
+
+/* Overall layout - centered across all screen sizes */
+.main-wrapper {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+/* Mobile layout fixes — all at the Docusaurus mobile breakpoint (996px) */
+@media (max-width: 996px) {
+  /* docsWrapper has flex:1 0 auto (flex-shrink:0), preventing it from
+     shrinking below content width. Constrain it to the viewport. */
+  [class*="docsWrapper"] {
+    max-width: 100vw;
+    min-width: 0;
+  }
+
+  [class*="docRoot"] {
+    min-width: 0;
+  }
+
+  [class*="docMainContainer"] {
+    min-width: 0;
+    padding: 0 1rem;
+  }
+}
+
+@media (min-width: 1600px) {
+  .main-wrapper {
+    max-width: 1760px;
+    margin: 0 auto;
+  }
+
+  .menu__link {
+    font-size: 0.9375rem !important; /* 15px */
+    padding: 0.35rem var(--ifm-menu-link-padding-horizontal);
+  }
+
+  .menu__list .menu__list .menu__link {
+    font-size: 0.9rem !important;
+  }
+
+  .sidebar-group-label {
+    font-size: 0.75rem !important;
+  }
+}
+
+[class^="announcementBar"] {
+  z-index: 10;
+}
+
+.diagonal-box {
+  transform: skewY(-6deg);
+}
+
+.diagonal-content {
+  transform: skewY(6deg);
+}
+
+.showcase {
+  background-color: #fff;
+}
+
+.showcase-border {
+  border-color: rgba(243, 244, 246, 1);
+}
+
+.text-description {
+  color: rgba(107, 114, 128, 1);
+}
+
+/* apply */
+#hero-apply {
+  z-index: -1;
+  background-image: linear-gradient(
+    var(--ifm-footer-background-color),
+    var(--ifm-navbar-background-color)
+  );
+}
+
+.apply-form {
+  background-image: linear-gradient(#fff, #f5f5fa);
+  max-width: 600px;
+}
+
+.apply-text {
+  color: #36395a;
+}
+
+/* index */
+#hero {
+  background-image: linear-gradient(
+    var(--ifm-footer-background-color),
+    var(--ifm-navbar-background-color)
+  );
+}
+
+/* Hero component title overrides to match other heading styles */
+.hero-title {
+  color: rgb(28, 30, 33);
+  font-family: var(--ifm-heading-font-family);
+}
+
+/* Footer Styles */
+.footer {
+  padding: 1rem 0 0;
+  background-color: var(--ifm-background-color);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+[data-theme="light"] .footer {
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--ifm-navbar-padding-horizontal);
+  max-width: var(--ifm-container-width);
+  margin: 0 auto;
+  font-size: 12px;
+}
+
+.footer__copyright {
+  color: var(--ifm-toc-link-color);
+}
+
+.footer-links {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 13px;
+}
+
+.footer-links a {
+  color: var(--ifm-toc-link-color);
+  text-decoration: none;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+
+.footer .container {
+  padding: 0 1.25rem;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  flex-direction: row-reverse;
+  max-width: 100%;
+}
+
+.footer__title {
+  margin-bottom: 0;
+}
diff --git a/docs/css/navbar.css b/docs/css/navbar.css
new file mode 100644
index 0000000000..d63e621b4d
--- /dev/null
+++ b/docs/css/navbar.css
@@ -0,0 +1,199 @@
+/* override the infima navbar docs/node_modules/infima/dist/css/default/default.css */
+.navbar {
+  box-shadow: none !important;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}
+
+[data-theme="dark"] .navbar {
+  background: #111;
+  border-bottom-color: #2c2c32;
+}
+
+/* Navbar - smaller logo, more padding, compact */
+.navbar__logo {
+  height: 1.5rem; /* Smaller logo */
+}
+
+/* Improve logo grey marks contrast on light background */
+html[data-theme="light"] .navbar__logo {
+  filter: brightness(0.78) contrast(1.05);
+}
+
+.navbar__inner {
+  padding: 0.5rem var(--docs-gutter);
+}
+
+/* Social icons - smaller, muted */
+.header-github-link,
+.header-twitter-link,
+.header-discord-link {
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+  padding: 0.25rem 0.35rem;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-github-link:hover,
+.header-twitter-link:hover,
+.header-discord-link:hover {
+  opacity: 0.8;
+}
+
+.header-github-link:before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  display: flex;
+  background: url("/logos/gitLight.svg") no-repeat;
+  background-size: contain;
+}
+
+[data-theme="dark"] .header-github-link:before {
+  background: url("/logos/gitDark.svg") no-repeat;
+  background-size: contain;
+  width: 18px;
+  height: 18px;
+}
+
+.header-twitter-link::before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  display: flex;
+  background: url("/logos/xLight.svg") no-repeat;
+  background-size: contain;
+}
+
+[data-theme="dark"] .header-twitter-link::before {
+  background: url("/logos/xDark.svg") no-repeat;
+  background-size: contain;
+  width: 18px;
+  height: 18px;
+}
+
+.header-discord-link {
+  margin-right: 0.5rem;
+}
+
+.header-discord-link::before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  display: flex;
+  background: url("/logos/discordLight.svg") no-repeat;
+  background-size: contain;
+}
+
+[data-theme="dark"] .header-discord-link::before {
+  background: url("/logos/discordDark.svg") no-repeat;
+  background-size: contain;
+  width: 18px;
+  height: 18px;
+}
+
+/* Reduce width on mobile for Mendable Search */
+@media (max-width: 767px) {
+  .mendable-search {
+    width: 200px;
+  }
+}
+
+@media (max-width: 500px) {
+  .mendable-search {
+    width: 150px;
+  }
+}
+
+@media (max-width: 380px) {
+  .mendable-search {
+    width: 140px;
+  }
+}
+
+/* DocSearch Input Styling - wider, muted, blends with theme */
+.DocSearch-Button {
+  border: 1px solid var(--ifm-color-emphasis-200) !important;
+  border-radius: 8px !important;
+  background: transparent !important;
+  color: #4b4b55 !important;
+  min-width: 220px !important;
+  padding: 0 1rem !important;
+  height: 2.25rem !important;
+}
+
+/* Shrink search to icon-only as navbar gets tight */
+@media (max-width: 1100px) {
+  .DocSearch-Button {
+    min-width: 160px !important;
+  }
+}
+
+@media (max-width: 996px) {
+  .DocSearch-Button {
+    min-width: 100px !important;
+  }
+
+  .header-github-link,
+  .header-twitter-link,
+  .header-discord-link {
+    display: none;
+  }
+}
+
+@media (max-width: 960px) {
+  .DocSearch-Button {
+    min-width: 0 !important;
+    width: 2.25rem !important;
+    padding: 0 !important;
+    justify-content: center !important;
+  }
+  .DocSearch-Button-Placeholder,
+  .DocSearch-Button-Keys {
+    display: none !important;
+  }
+  .DocSearch-Search-Icon {
+    margin: 0 !important;
+  }
+}
+
+[data-theme="dark"] .DocSearch-Button {
+  border-color: #303038 !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+  color: #c6c6d1 !important;
+}
+
+.DocSearch-Button:hover,
+.DocSearch-Button:focus {
+  border-color: var(--ifm-color-emphasis-400) !important;
+  box-shadow: none !important;
+}
+
+[data-theme="dark"] .DocSearch-Button:hover {
+  border-color: #454550 !important;
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+
+.DocSearch-Search-Icon {
+  color: #4b4b55 !important;
+  width: 15px !important;
+  height: 15px !important;
+}
+
+.DocSearch-Button-Placeholder {
+  font-size: 0.8125rem !important;
+  color: inherit !important;
+}
+
+[data-theme="dark"] .DocSearch-Search-Icon {
+  color: #c6c6d1 !important;
+}
+
+[data-theme="dark"] .DocSearch-Button-Keys kbd {
+  background: rgba(255, 255, 255, 0.06) !important;
+  border-color: #383840 !important;
+  color: #6a6a72 !important;
+  box-shadow: none !important;
+}
diff --git a/docs/css/redocusaurus.css b/docs/css/redocusaurus.css
new file mode 100644
index 0000000000..3fce69055c
--- /dev/null
+++ b/docs/css/redocusaurus.css
@@ -0,0 +1,55 @@
+/* ========================================
+   Redocusaurus / API Reference Pages
+   ======================================== */
+
+/* Remove Redoc's built-in left gutter so it aligns with the rest of the layout */
+.redocusaurus .menu-content {
+  padding-left: 0 !important;
+}
+
+/* Match sidebar font to site font */
+.redocusaurus .menu-content,
+.redocusaurus [class*="SidebarDivider"],
+.redocusaurus [class*="ApiItemName"] {
+  font-family: var(--ifm-font-family-base) !important;
+}
+
+/* Light theme Redoc sidebar */
+[data-theme="light"] .redocusaurus .menu-content {
+  background: var(--ifm-background-color) !important;
+  border-right: none !important;
+}
+
+/* Dark theme Redoc sidebar */
+[data-theme="dark"] .redocusaurus .menu-content {
+  background: #111 !important;
+  border-right: none !important;
+}
+
+[data-theme="dark"] .redocusaurus {
+  background: #111 !important;
+}
+
+/* Redoc operation panels */
+[data-theme="dark"] .redocusaurus [class*="OperationTitle"],
+[data-theme="dark"] .redocusaurus [class*="operation-type"] {
+  color: #cdcdd4;
+}
+
+/* Redoc search input */
+.redocusaurus input[type="search"] {
+  border-radius: 8px;
+  font-family: var(--ifm-font-family-base);
+}
+
+[data-theme="dark"] .redocusaurus input[type="search"] {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: #303038;
+  color: #c6c6d1;
+}
+
+/* Redoc code samples */
+[data-theme="dark"] .redocusaurus [class*="CodeSample"] pre {
+  background: #161618 !important;
+  border: 1px solid #303038;
+}
diff --git a/docs/css/sidebar.css b/docs/css/sidebar.css
new file mode 100644
index 0000000000..2e2b9611d2
--- /dev/null
+++ b/docs/css/sidebar.css
@@ -0,0 +1,513 @@
+[data-theme="dark"] .main-wrapper .theme-doc-sidebar-container {
+  background: #111;
+  border-right: none;
+}
+
+/* Sidebar - flush with left edge, internal padding only */
+.theme-doc-sidebar-container {
+  margin-left: 0;
+  border-right: none !important;
+}
+
+.theme-doc-sidebar-container nav.menu {
+  padding-top: 0.75rem;
+  padding-left: var(--docs-gutter);
+  padding-right: 0.75rem;
+}
+
+/* Remove sidebar border globally */
+[class*="docSidebarContainer"] {
+  border-right: none !important;
+}
+
+/* Fix sidebar and TOC column heights — prevent shrinking during scroll */
+@media (min-width: 997px) {
+  [class*="sidebarViewport"] {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.25s ease;
+  }
+
+  [class*="sidebarViewport"]:hover {
+    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
+  }
+
+  [class*="sidebarViewport"]::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  [class*="sidebarViewport"]::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  [class*="sidebarViewport"]::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 4px;
+    transition: background 0.25s ease;
+  }
+
+  [class*="sidebarViewport"]:hover::-webkit-scrollbar-thumb {
+    background: rgba(128, 128, 128, 0.35);
+  }
+
+  [class*="tableOfContents"] {
+    max-height: calc(100vh - var(--ifm-navbar-height) - 2rem) !important;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.25s ease;
+  }
+
+  [class*="tableOfContents"]:hover {
+    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
+  }
+
+  [class*="tableOfContents"]::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  [class*="tableOfContents"]::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  [class*="tableOfContents"]::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 4px;
+    transition: background 0.25s ease;
+  }
+
+  [class*="tableOfContents"]:hover::-webkit-scrollbar-thumb {
+    background: rgba(128, 128, 128, 0.35);
+  }
+}
+
+.theme-doc-sidebar-item-category.menu__list-item:not(:first-child) {
+  margin-top: 0.5rem !important;
+}
+
+.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(
+    :first-child
+  ) {
+  margin-top: 0.15rem !important;
+}
+
+/* Sidebar Styles */
+.theme-doc-sidebar-container nav.menu {
+  padding-bottom: 0;
+}
+
+.theme-doc-sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* Pin the Desktop CTA (last item) to the bottom of the sidebar column */
+@media (min-width: 997px) {
+  .theme-doc-sidebar-container nav.menu {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    /* Docusaurus default .menu padding includes bottom gap under the last item */
+    padding-bottom: 0 !important;
+  }
+
+  .theme-doc-sidebar-container nav.menu .menu__list {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  /* HTML sidebar item: className is on the <li> (may not include .menu__list-item) */
+  .theme-doc-sidebar-container nav.menu .menu__list > li.sidebar-ad {
+    margin-top: auto;
+    flex-shrink: 0;
+  }
+}
+
+/* Sidebar Chevrons - tiny, subtle arrows */
+.menu__link--sublist-caret::after,
+.menu__caret::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f3f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
+  background-size: 12px 12px !important;
+  width: 12px !important;
+  height: 12px !important;
+  min-width: 12px !important;
+  min-height: 12px !important;
+  opacity: 0.65;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+}
+
+.menu__link--sublist-caret:hover::after,
+.menu__caret:hover::before {
+  opacity: 0.85;
+}
+
+/* Dark theme chevrons: higher-contrast strokes */
+[data-theme="dark"] .menu__link--sublist-caret::after,
+[data-theme="dark"] .menu__caret::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
+  opacity: 0.45;
+}
+
+[data-theme="dark"] .menu__link--sublist-caret:hover::after,
+[data-theme="dark"] .menu__caret:hover::before {
+  opacity: 0.7;
+}
+
+/* Expanded state rotation */
+.menu__list-item--collapsed .menu__link--sublist-caret::after,
+.menu__list-item--collapsed .menu__caret::before {
+  transform: rotate(0deg);
+}
+
+.menu__link--sublist-caret::after,
+.menu__caret::before {
+  transform: rotate(90deg);
+}
+
+/* Sidebar font size */
+.menu__link {
+  font-size: 0.875rem; /* 14px — readable without feeling heavy */
+  padding: 0.3rem var(--ifm-menu-link-padding-horizontal);
+  line-height: 1.4;
+}
+
+[data-theme="dark"] .menu__link {
+  color: #ababb5; /* lifted from #8a8a92 — noticeably more legible */
+}
+
+[data-theme="dark"] .menu__link:hover {
+  color: #d0d0d8;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+[data-theme="dark"] .menu__link--active:not(.menu__link--sublist) {
+  color: var(--ifm-color-primary);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+/* Subcategory items — slightly smaller than top-level, but still readable */
+.menu__list .menu__list .menu__link {
+  font-size: 0.85rem; /* 13.6px */
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+/* Sidebar Group Dividers (Langfuse-style section headers) */
+.sidebar-group-divider {
+  margin-top: 1.25rem !important;
+  margin-bottom: 0.25rem !important;
+  padding: 0 !important;
+  list-style: none;
+}
+
+.sidebar-group-divider:first-child {
+  margin-top: 0.25rem !important;
+}
+
+.sidebar-group-label {
+  font-size: 0.6875rem; /* 11px — one notch up from 10px, still compact */
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  color: var(--ifm-color-emphasis-500);
+  padding: 0.25rem var(--ifm-menu-link-padding-horizontal);
+  opacity: 0.6;
+}
+
+/* Light theme */
+html[data-theme="light"] .sidebar-group-label {
+  color: var(--ifm-heading-color) !important;
+  opacity: 1 !important;
+}
+
+/* Dark theme */
+[data-theme="dark"] .sidebar-group-label {
+  color: var(--ifm-heading-color) !important;
+  opacity: 1 !important;
+}
+
+/* Sidebar Category Icons */
+.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link::before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  -webkit-mask-size: 18px 18px;
+  mask-size: 18px 18px;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  opacity: 0.45;
+  transition: background-color 0.25s ease, opacity 0.25s ease;
+}
+
+/* Active section: icon turns primary pink */
+.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link--active::before {
+  background-color: var(--ifm-color-primary) !important;
+  opacity: 0.9;
+}
+
+/* Sidebar icon colors via CSS filters / mask approach */
+.sidebar-icon-rocket > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-workflow > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-bot > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-plug > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-code > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-cloud > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-blocks > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Cpath d='M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Cpath d='M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-fileCode > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-gitPR > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M6 9v12'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M6 9v12'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+.sidebar-icon-helpCircle > .menu__list-item-collapsible > .menu__link::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+
+/* Sidebar Ad — <li> is only spacing; card styles live on the <a> inside */
+.sidebar-ad {
+  margin-left: 0.5rem;
+  margin-right: 0.75rem;
+  margin-top: auto;
+  padding-top: 1rem;   /* transparent gap above the card */
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 1rem;
+  list-style: none;
+}
+
+.sidebar-ad a.menu__link {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.65rem 0.75rem;
+  font-family: var(--ifm-font-family-base);
+  text-decoration: none !important;
+  border-radius: var(--ifm-global-radius);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  position: relative;
+  overflow: hidden;
+  transition:
+    box-shadow 0.18s ease,
+    border-color 0.18s ease;
+}
+
+[data-theme="dark"] .sidebar-ad a.menu__link {
+  background-color: #111;
+  border-color: var(--ifm-card-border-color, #303038);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 4px 6px rgba(0, 0, 0, 0.25),
+    0 12px 28px rgba(0, 0, 0, 0.45);
+}
+
+[data-theme="light"] .sidebar-ad a.menu__link {
+  background-color: var(--ifm-background-color);
+  border-color: var(--ifm-color-emphasis-200);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.8) inset,
+    0 4px 12px rgba(15, 23, 42, 0.08),
+    0 12px 28px rgba(15, 23, 42, 0.06);
+}
+
+[data-theme="dark"] .sidebar-ad a.menu__link:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--ifm-color-emphasis-400);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 6px 10px rgba(0, 0, 0, 0.3),
+    0 16px 36px rgba(0, 0, 0, 0.5);
+}
+
+[data-theme="light"] .sidebar-ad a.menu__link:hover {
+  background: var(--ifm-hover-overlay);
+  border-color: var(--ifm-color-emphasis-300);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.9) inset,
+    0 6px 16px rgba(15, 23, 42, 0.1),
+    0 16px 36px rgba(15, 23, 42, 0.08);
+}
+
+.sidebar-ad a.menu__link svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.85;
+  color: var(--ifm-color-emphasis-700);
+}
+
+[data-theme="dark"] .sidebar-ad a.menu__link svg {
+  color: #8a8a92;
+}
+
+.sidebar-ad-text-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  text-align: left;
+}
+
+.sidebar-ad-text {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  font-family: inherit;
+  font-weight: 400;
+}
+
+/* Muted line — same family as nav, reads like helper copy */
+.sidebar-ad-text-container > .sidebar-ad-text:first-of-type {
+  color: #4b4b55;
+}
+
+[data-theme="dark"] .sidebar-ad-text-container > .sidebar-ad-text:first-of-type {
+  color: #bdbdc7;
+}
+
+/* CTA line — primary color + medium weight, aligned with active nav / category labels */
+.sidebar-ad-text-gradient {
+  color: var(--ifm-color-primary);
+  font-weight: 500;
+  background: none;
+  -webkit-text-fill-color: unset;
+}
+
+[data-theme="dark"] .sidebar-ad-text-gradient {
+  /* Brighter pink for WCAG contrast on dark background */
+  color: #ff6ad0;
+}
+
+/* Active item - subtle left border indicator */
+.menu__link--active:not(.menu__link--sublist) {
+  border-left: 2px solid var(--ifm-color-primary);
+  padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 2px);
+  background: rgba(255, 255, 255, 0.03);
+  font-weight: 500;
+}
+
+html[data-theme="light"] .menu__link--active:not(.menu__link--sublist) {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* Sidebar category label styling */
+.theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
+  font-weight: 500;
+  font-size: 0.8125rem; /* 13px - same as items */
+}
+
+[data-theme="dark"] .theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
+  color: #c0c0ca; /* Category headers: clearly brighter than items */
+}
+
+/* ========================================
+   Table of Contents (TOC) - Right side
+   ======================================== */
+
+.table-of-contents {
+  font-size: 0.8rem;
+  border-left: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* Unvisited — white/light */
+.table-of-contents__link {
+  color: #2f2f38;
+  transition: color 0.2s ease;
+}
+
+[data-theme="dark"] .table-of-contents__link {
+  color: #e0e0e8;
+}
+
+/* Passed — muted gray */
+.table-of-contents__link--passed {
+  color: #9090a0;
+}
+
+[data-theme="dark"] .table-of-contents__link--passed {
+  color: #8a8a9a;
+}
+
+/* Hover */
+.table-of-contents__link:hover {
+  color: var(--ifm-color-primary);
+}
+
+/* Active — pink, bold simulated via text-shadow to avoid reflow */
+.table-of-contents__link--active {
+  color: var(--ifm-color-primary) !important;
+  text-shadow: 0 0 0.4px var(--ifm-color-primary);
+}
+
+[data-theme="dark"] .table-of-contents__link--active {
+  color: hsla(329, 55%, 68%, 1) !important;
+  text-shadow: 0 0 0.4px hsla(329, 55%, 68%, 1);
+}
+
+[data-theme="dark"] .table-of-contents {
+  border-left-color: #2c2c32;
+}
diff --git a/docs/css/tokens.css b/docs/css/tokens.css
new file mode 100644
index 0000000000..732e5b72b9
--- /dev/null
+++ b/docs/css/tokens.css
@@ -0,0 +1,37 @@
+:root {
+  --docs-gutter: 1rem;
+  --ifm-navbar-link-hover-color: initial;
+  --ifm-navbar-padding-vertical: 0;
+  --ifm-global-radius: 10px;
+  --ifm-code-border-radius: 4px;
+  --ifm-navbar-item-padding-vertical: 0;
+  --ifm-font-family-base: "Geist", Inter, -apple-system, BlinkMacSystemFont,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
+  --ifm-font-family-monospace: "Geist Mono", "SFMono-Regular", "Roboto Mono",
+    Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --ifm-heading-font-weight: 700;
+  --ifm-line-height-base: 1.7;
+}
+
+/* Light theme - Pure white background */
+html[data-theme="light"] {
+  --ifm-color-primary: hsla(333, 71%, 51%, 1); /* Slightly darker pink for light theme */
+  --ifm-background-color: var(--ifm-color-white);
+  --ifm-background-surface-color: var(--ifm-color-white);
+}
+
+/* Dark theme - Slate dark background (Langfuse style) */
+html[data-theme="dark"] {
+  --ifm-color-primary: hsla(329, 45%, 58%, 1); /* Muted, desaturated pink */
+  --ifm-background-color: #111; /* Warm slate, not pure black */
+  --ifm-background-surface-color: #111;
+  --ifm-card-background-color: #232328;
+  --ifm-card-border-color: #303038;
+  --ifm-font-color-base: #a8a8b0; /* Soft gray text */
+  --ifm-heading-color: #cdcdd4; /* Headings: brighter but still muted */
+  --ifm-color-emphasis-600: #777;
+  --ifm-color-emphasis-700: #8a8a90;
+  --ifm-menu-color: #8a8a92; /* Sidebar text: muted slate */
+  --ifm-toc-border-color: #2c2c32;
+  --ifm-navbar-background-color: #111;
+}
diff --git a/docs/css/typography.css b/docs/css/typography.css
new file mode 100644
index 0000000000..f2fb0b9bbc
--- /dev/null
+++ b/docs/css/typography.css
@@ -0,0 +1,201 @@
+p {
+  text-align: start;
+}
+
+body {
+  font-size: 16px;
+}
+
+/* Typography */
+.markdown h1 {
+  font-size: 2.25rem; /* 36px */
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.75rem;
+}
+
+.markdown h2 {
+  font-size: 1.5rem; /* 24px */
+  font-weight: 650;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+}
+
+.markdown h3 {
+  font-size: 1.25rem; /* 20px */
+  font-weight: 650;
+  line-height: 1.4;
+  margin-top: 1.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.markdown h4 {
+  font-size: 1.125rem; /* 18px */
+  font-weight: 650;
+  line-height: 1.45;
+  margin-top: 1.25rem;
+  margin-bottom: 0.4rem;
+}
+
+.docsearch-logo {
+  color: #21243d;
+}
+
+.apply-button:hover {
+  color: #fff;
+}
+
+/*
+ * Inline Lucide icons in body copy (<Icon /> in MDX).
+ * Default lucide-react size is 24px, which reads huge next to Geist body text.
+ * Scale to the font (and keep card / explicit sizes overridable below).
+ */
+.markdown p svg.lf-inline-icon,
+.markdown li svg.lf-inline-icon,
+.markdown td svg.lf-inline-icon,
+.markdown th svg.lf-inline-icon,
+.markdown blockquote svg.lf-inline-icon {
+  width: 1em !important;
+  height: 1em !important;
+  min-width: 0.875em;
+  min-height: 0.875em;
+  vertical-align: -0.14em;
+}
+
+/* Card grid: keep icons tied to card title scale, not body 1em */
+.lf-card-icon svg.lf-inline-icon {
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+  vertical-align: middle;
+}
+
+/* Images */
+.image-rendering-crisp {
+  image-rendering: crisp-edges;
+
+  /* alias for google chrome */
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.image-rendering-pixel {
+  image-rendering: pixelated;
+}
+
+.img-center {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+/* Add comprehensive image control */
+.markdown img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1rem auto;
+  max-height: 600px;
+  object-fit: contain;
+}
+
+/* Default size for most images — min() ensures container is always respected */
+.markdown img:not(.resized-image) {
+  max-width: min(100%, 600px);
+  width: auto;
+}
+
+.resized-image {
+  width: 300px;
+  max-height: 500px;
+}
+
+/* Responsive images on mobile devices */
+@media (max-width: 768px) {
+  .markdown img:not(.resized-image) {
+    max-width: 100%;
+    max-height: 500px;
+  }
+
+  .resized-image {
+    width: 100%;
+    max-width: 300px;
+    max-height: 400px;
+  }
+}
+
+/* Component details styling */
+.markdown details {
+  width: 100%;
+  background: var(--ifm-background-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  margin-bottom: 1rem;
+}
+
+.markdown details summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  list-style: none;
+  outline: none;
+  cursor: pointer;
+}
+
+.markdown details summary:focus-visible {
+  outline: 2px solid var(--ifm-color-primary, #a855f7);
+  outline-offset: 2px;
+}
+
+.markdown details [class^="collapsibleContent"] {
+  border-top: none !important;
+  padding: 0;
+}
+
+/* Breadcrumbs - Langfuse style */
+.breadcrumbs__link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.875rem;
+  color: #44444d;
+}
+
+.breadcrumbs__link:hover {
+  background: none;
+  color: var(--ifm-color-primary);
+}
+
+.breadcrumbs__item--active .breadcrumbs__link {
+  background: none;
+  color: #2f2f35;
+  font-weight: 500;
+}
+
+[data-theme="dark"] .breadcrumbs__link {
+  color: #c7c7d0;
+}
+
+[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link {
+  color: #e5e5ec;
+}
+
+/* Style the native Docusaurus breadcrumb separator */
+.breadcrumbs__item--separator {
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-400);
+  margin: 0 0.25rem;
+  opacity: 0.6;
+}
+
+/* Center columns whose header matches "Format" or "Default" (class set by rehype plugin) */
+.markdown table td.col-center,
+.markdown table th.col-center {
+  text-align: center;
+}
+
+/* Left-align text in the Description column (always last, unless it's a centered column) */
+.markdown table td:last-child:not(.col-center) {
+  text-align: left;
+}
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 2e716892c5..7f9886dad9 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -5,6 +5,7 @@ const path = require("path");
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 const { remarkCodeHike } = require("@code-hike/mdx");
+const rehypeWbrUnderscore = require("./src/plugins/rehypeWbrUnderscore");
 
 const isProduction = process.env.NODE_ENV === "production";
 
@@ -136,6 +137,7 @@ const config = {
               },
             ],
           ],
+          rehypePlugins: [rehypeWbrUnderscore],
         },
         sitemap: {
           // https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-sitemap
@@ -432,6 +434,7 @@ const config = {
       };
     },
   ],
+  clientModules: [require.resolve("./src/clientModules/tocProgress.js")],
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 24111f0742..eed282eaf3 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -3662,6 +3662,12 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/@docusaurus/core/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@docusaurus/cssnano-preset": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.9.2.tgz",
@@ -3772,6 +3778,12 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@docusaurus/plugin-client-redirects/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@docusaurus/plugin-content-blog": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.9.2.tgz",
@@ -3846,6 +3858,12 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/@docusaurus/plugin-content-blog/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@docusaurus/plugin-content-docs": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz",
@@ -3880,6 +3898,12 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@docusaurus/plugin-content-docs/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@docusaurus/plugin-content-pages": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.9.2.tgz",
@@ -4124,6 +4148,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/@docusaurus/theme-classic/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@docusaurus/theme-classic/node_modules/prism-react-renderer": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz",
@@ -4228,6 +4258,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/@docusaurus/theme-search-algolia/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@docusaurus/theme-translations": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.9.2.tgz",
@@ -4351,6 +4387,12 @@
         "node": ">=20.0"
       }
     },
+    "node_modules/@docusaurus/utils-validation/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@docusaurus/utils/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4363,6 +4405,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@docusaurus/utils/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/@easyops-cn/autocomplete.js": {
       "version": "0.38.1",
       "resolved": "https://registry.npmjs.org/@easyops-cn/autocomplete.js/-/autocomplete.js-0.38.1.tgz",
@@ -9038,6 +9086,12 @@
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
+    "node_modules/docusaurus-theme-redoc/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/docusaurus-theme-redoc/node_modules/marked": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
@@ -11022,6 +11076,12 @@
         }
       }
     },
+    "node_modules/html-webpack-plugin/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/htmlparser2": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.0.0.tgz",
@@ -12070,12 +12130,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "license": "MIT"
-    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -16529,6 +16583,12 @@
         "renderkid": "^3.0.0"
       }
     },
+    "node_modules/pretty-error/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/pretty-time": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
@@ -17502,6 +17562,12 @@
         "entities": "^2.0.0"
       }
     },
+    "node_modules/renderkid/node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
diff --git a/docs/package.json b/docs/package.json
index 5185fc19ab..f2a4da4361 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -54,19 +54,19 @@
     "node": "22.22.0"
   },
   "overrides": {
-    "lodash": "4.18.0",
+    "lodash": "4.17.21",
     "fast-xml-parser": "4.5.4",
     "openapi-to-postmanv2": {
-      "lodash": "4.18.0"
+      "lodash": "4.17.21"
     },
     "postman-collection": {
-      "lodash": "4.18.0"
+      "lodash": "4.17.21"
     },
     "json-schema-resolve-allof": {
-      "lodash": "4.18.0"
+      "lodash": "4.17.21"
     },
     "json-refs": {
-      "lodash": "4.18.0"
+      "lodash": "4.17.21"
     }
   }
 }
diff --git a/docs/src/clientModules/tocProgress.js b/docs/src/clientModules/tocProgress.js
new file mode 100644
index 0000000000..62b8996f09
--- /dev/null
+++ b/docs/src/clientModules/tocProgress.js
@@ -0,0 +1,86 @@
+let mo = null;
+let scrollHandler = null;
+
+function getNavbarHeight() {
+  return document.querySelector(".navbar")?.clientHeight ?? 0;
+}
+
+function syncPassed() {
+  const links = Array.from(document.querySelectorAll(".table-of-contents__link"));
+  if (!links.length) return;
+
+  let forceLastActive = false;
+  const lastLink = links[links.length - 1];
+  const lastHref = lastLink?.getAttribute("href");
+
+  if (lastHref) {
+    const lastHeading = document.querySelector(lastHref);
+    if (lastHeading) {
+      const rect = lastHeading.getBoundingClientRect();
+      const navH = getNavbarHeight();
+      const headingVisible = rect.top >= navH && rect.top < window.innerHeight;
+      const atMaxScroll = window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 50;
+
+      if (headingVisible && atMaxScroll) {
+        forceLastActive = true;
+      }
+    }
+  }
+
+  // Pause observer to avoid mutation loop
+  if (mo) mo.disconnect();
+
+  if (forceLastActive) {
+    links.forEach((l, i) => {
+      if (i === links.length - 1) {
+        l.classList.add("table-of-contents__link--active");
+        l.dataset.tocForced = "1";
+      } else {
+        l.classList.remove("table-of-contents__link--active");
+      }
+    });
+  } else if (lastLink.dataset.tocForced) {
+    delete lastLink.dataset.tocForced;
+  }
+
+  const activeIdx = links.findIndex((l) =>
+    l.classList.contains("table-of-contents__link--active")
+  );
+
+  links.forEach((l, i) =>
+    l.classList.toggle("table-of-contents__link--passed", i < activeIdx && activeIdx !== -1)
+  );
+
+  // Reconnect observer
+  const toc = document.querySelector(".table-of-contents");
+  if (toc && mo) {
+    mo.observe(toc, { attributes: true, subtree: true, attributeFilter: ["class"] });
+  }
+}
+
+export function onRouteDidUpdate() {
+  if (typeof window === "undefined") return;
+
+  if (mo) mo.disconnect();
+  if (scrollHandler) window.removeEventListener("scroll", scrollHandler);
+
+  // Initialize observer
+  const toc = document.querySelector(".table-of-contents");
+  if (toc) {
+    mo = new MutationObserver(syncPassed);
+    mo.observe(toc, { attributes: true, subtree: true, attributeFilter: ["class"] });
+  }
+
+  // Scroll handler with RAF throttle
+  let raf = null;
+  scrollHandler = () => {
+    if (raf) return;
+    raf = requestAnimationFrame(() => {
+      raf = null;
+      syncPassed();
+    });
+  };
+  window.addEventListener("scroll", scrollHandler, { passive: true });
+
+  requestAnimationFrame(syncPassed);
+}
diff --git a/docs/src/plugins/rehypeWbrUnderscore.js b/docs/src/plugins/rehypeWbrUnderscore.js
new file mode 100644
index 0000000000..7bdb291693
--- /dev/null
+++ b/docs/src/plugins/rehypeWbrUnderscore.js
@@ -0,0 +1,94 @@
+"use strict";
+
+/**
+ * Rehype plugin that does two things to markdown tables:
+ *
+ * 1. Inserts U+200B (zero-width space) after every underscore inside <code>
+ *    elements in <td> cells, so env-var names like LANGFLOW_CONFIG_DIR wrap
+ *    at underscore boundaries without breaking the inline-code styling.
+ *
+ * 2. Detects columns whose header text matches CENTER_COLUMNS and adds the
+ *    CSS class "col-center" to every <th>/<td> in those columns, so Format
+ *    and Default are always centered regardless of their column position.
+ */
+
+const CENTER_COLUMNS = ["format", "default"];
+
+function walk(node, visitor) {
+  visitor(node);
+  if (node.children) {
+    node.children.forEach((child) => walk(child, visitor));
+  }
+}
+
+function textContent(node) {
+  let text = "";
+  walk(node, (n) => {
+    if (n.type === "text") text += n.value;
+  });
+  return text.trim().toLowerCase();
+}
+
+function addClass(node, cls) {
+  const p = node.properties || (node.properties = {});
+  const existing = Array.isArray(p.className) ? p.className : p.className ? [p.className] : [];
+  if (!existing.includes(cls)) p.className = [...existing, cls];
+}
+
+function processTable(table) {
+  // Find thead > tr > th to determine which column indices to center
+  const thead = table.children.find((n) => n.type === "element" && n.tagName === "thead");
+  if (!thead) return;
+  const headerRow = thead.children.find((n) => n.type === "element" && n.tagName === "tr");
+  if (!headerRow) return;
+
+  const ths = headerRow.children.filter((n) => n.type === "element" && n.tagName === "th");
+  const centerIndices = new Set();
+  ths.forEach((th, i) => {
+    if (CENTER_COLUMNS.includes(textContent(th))) centerIndices.add(i);
+  });
+
+  if (centerIndices.size === 0) return;
+
+  // Add col-center class to matching th and td cells
+  [thead, ...table.children.filter((n) => n.type === "element" && n.tagName === "tbody")].forEach(
+    (section) => {
+      walk(section, (row) => {
+        if (row.type !== "element" || row.tagName !== "tr") return;
+        const cells = row.children.filter(
+          (n) => n.type === "element" && (n.tagName === "td" || n.tagName === "th")
+        );
+        cells.forEach((cell, i) => {
+          if (centerIndices.has(i)) addClass(cell, "col-center");
+        });
+      });
+    }
+  );
+}
+
+/** @returns {import('unified').Transformer} */
+function rehypeTableEnhancements() {
+  return (tree) => {
+    walk(tree, (node) => {
+      if (node.type !== "element") return;
+
+      // 1. Zero-width space after underscores in td > code
+      if (node.tagName === "td") {
+        walk(node, (inner) => {
+          if (inner.type !== "element" || inner.tagName !== "code") return;
+          for (const child of inner.children) {
+            if (child.type !== "text" || !child.value.includes("_")) continue;
+            child.value = child.value.replace(/_/g, "_​");
+          }
+        });
+      }
+
+      // 2. Center columns by header name
+      if (node.tagName === "table") {
+        processTable(node);
+      }
+    });
+  };
+}
+
+module.exports = rehypeTableEnhancements;
diff --git a/docs/src/theme/DocItem/Layout/styles.module.css b/docs/src/theme/DocItem/Layout/styles.module.css
index e2d5b28e4a..bef341990f 100644
--- a/docs/src/theme/DocItem/Layout/styles.module.css
+++ b/docs/src/theme/DocItem/Layout/styles.module.css
@@ -19,5 +19,6 @@
 @media (min-width: 997px) {
   .docItemCol {
     max-width: 75% !important;
+    padding-right: 48px !important;
   }
 }
\ No newline at end of file