@farming-labs/theme 0.2.99 → 0.2.102

package/styles/pixel-border.css

@@ -35,7 +35,7 @@
   --scrollbar-track: transparent;
   /* Sharp corners — no rounding */
   --radius: 0px;
-  --fd-nav-height: 44px;
+  --fd-nav-height: 56px;
   --fd-banner-height: 0px;
   --fd-tocnav-height: 0px;
 }
@@ -149,593 +149,98 @@ code:not(pre code) {
  * Pixel-border theme — better-auth inspired sidebar, clean dark UI
  * ═══════════════════════════════════════════════════════════════════ */
 
-/* ─── Production shell geometry ─────────────────────────────────── */
+/* ─── Wider content area on desktop ──────────────────────────────── */
 
 @media (min-width: 1024px) {
   :root {
     --fd-layout-width: 1400px;
   }
+}
 
-  #nd-docs-layout.grid:not([data-fd-framework]) {
-    --fd-header-height: 44px;
-    grid-template:
-      "sidebar header header" 44px
-      "sidebar main toc" 1fr /
-      var(--fd-sidebar-col) minmax(0, 1fr) var(--fd-toc-width) !important;
+/* ─── Default docs: comfortable article gutters ─────────────────── */
+@media (min-width: 768px) {
+  #nd-docs-layout:not([data-fd-framework]) article#nd-page {
+    padding-inline: 2rem;
   }
+}
 
-  #nd-docs-layout #nd-subnav {
-    position: sticky;
-    top: 0;
-    z-index: 30;
-    display: flex !important;
-    grid-area: header;
-    grid-column: 2 / -1;
-    height: 44px;
-    padding: 0 105px 0 0;
-    border-bottom: 1px solid var(--color-fd-border);
-    background: color-mix(in srgb, var(--color-fd-background) 92%, transparent);
-    backdrop-filter: blur(12px);
+@media (max-width: 1279px) {
+  #nd-docs-layout:not([data-fd-framework]) {
+    --fd-toc-popover-height: 0px !important;
   }
 
-  #nd-docs-layout #nd-subnav > a,
-  #nd-docs-layout #nd-subnav button[aria-label="Open Sidebar"] {
+  #nd-docs-layout:not([data-fd-framework]) #nd-toc,
+  #nd-docs-layout:not([data-fd-framework]) [data-toc-popover] {
     display: none !important;
   }
+}
 
-  #nd-docs-layout #nd-subnav button[data-search] {
-    width: 56px;
-    height: 44px;
-    margin-left: auto;
-    padding: 0;
-    border-left: 1px solid var(--color-fd-border);
-    color: var(--color-fd-muted-foreground);
-  }
+/* Keep the native Clerk bend from overpainting the straight rail segment. */
+#nd-toc a > div.bottom-1\.5 {
+  bottom: 0.375rem;
+}
 
-  /* Farm's desktop header uses the compact keyboard hint in place of the
-   * magnifier while keeping Fumadocs' search trigger and shortcut behavior. */
-  #nd-docs-layout #nd-subnav button[data-search] svg {
-    display: none !important;
-  }
+#nd-toc a > div.top-1\.5 {
+  top: 0.375rem;
+}
 
-  #nd-docs-layout #nd-subnav button[data-search]::after {
-    content: "⌘  K";
-    display: inline-flex;
-    width: 35px;
-    height: 22px;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--color-fd-border);
-    background: linear-gradient(
-      to right,
-      transparent calc(50% - 0.5px),
-      var(--color-fd-border) calc(50% - 0.5px),
-      var(--color-fd-border) calc(50% + 0.5px),
-      transparent calc(50% + 0.5px)
-    );
-    font-family: var(--fd-font-mono, ui-monospace, monospace);
-    font-size: 10px;
-    line-height: 1;
-    letter-spacing: 1px;
+/* ─── Docs grid: sidebar (sticky left, full height) | content | TOC ─────── */
+@media (min-width: 1024px) {
+  #nd-docs-layout:not([data-fd-framework]),
+  #nd-docs-layout:not([data-fd-framework]) [style*="fd-sidebar-col"] {
+    grid-template-columns: var(--fd-sidebar-col, 0px) 1fr min-content !important;
   }
-
-  #nd-docs-layout aside#nd-sidebar {
+  /* Sidebar stretches to end and sticks on scroll; no max-height so content isn't clipped */
+  #nd-docs-layout:not([data-fd-framework]) aside#nd-sidebar {
     position: sticky;
     top: 0;
     align-self: start;
     min-height: 0;
     height: 100vh;
   }
-
-  #nd-docs-layout [data-sidebar-placeholder] {
-    justify-self: stretch;
-  }
-
-  #nd-docs-layout article#nd-page {
-    width: min(100%, var(--fd-content-width));
-    max-width: none;
-    margin-inline: auto;
-    padding: 47px 40px 80px !important;
-    gap: 0;
-  }
-
-  #nd-docs-layout article#nd-page > .prose {
-    max-width: none;
-  }
-
-  #nd-docs-layout #nd-toc {
-    display: flex !important;
-    width: var(--fd-toc-width);
-    padding: 48px 16px 8px 0;
-  }
 }
 
-/* Keep the compact shell through tablet sizes. The sidebar itself stays on
- * Fumadocs' native mobile lifecycle so focus, scroll locking, Escape, and
- * backdrop dismissal work consistently at every touch breakpoint. */
-@media (max-width: 1023px) {
-  :root {
-    --fd-mobile-nav-height: 56px;
-  }
-
-  /* Farm's server-rendered sidebar brand defaults to a 44px row followed by
-   * an 18px gap. On tablet, that puts its divider below the 56px mobile
-   * topbar. Give both sides of the shell one shared header edge instead. */
-  #nd-docs-layout aside#nd-sidebar > .sidebar-brand {
-    height: var(--fd-mobile-nav-height);
-    min-height: var(--fd-mobile-nav-height);
-    max-height: var(--fd-mobile-nav-height);
-    flex-basis: var(--fd-mobile-nav-height);
-    margin-bottom: 0;
-  }
-
-  body {
-    overflow-x: hidden;
-  }
-
+@media (min-width: 1024px) {
   #nd-docs-layout.grid:not([data-fd-framework]) {
-    --fd-header-height: 56px;
-    display: block !important;
-    min-height: 100dvh;
-    padding-top: 56px;
-  }
-
-  #nd-docs-layout #nd-subnav {
-    position: fixed;
-    inset: 0 0 auto;
-    z-index: 80;
-    display: flex !important;
-    width: 100%;
-    height: 56px;
-    padding: 0 105px 0 0;
-    border-bottom: 1px solid var(--color-fd-border);
-    background: color-mix(in srgb, var(--color-fd-background) 94%, transparent);
-    backdrop-filter: blur(12px);
-  }
-
-  #nd-docs-layout #nd-subnav > a {
-    display: none;
-  }
-
-  #nd-docs-layout #nd-subnav > div.flex-1 {
-    order: 2;
-  }
-
-  #nd-docs-layout #nd-subnav button[aria-label="Open Sidebar"] {
-    order: 1;
-    width: 56px;
-    height: 56px;
-    padding: 0;
-    border-right: 1px solid var(--color-fd-border);
-  }
-
-  #nd-docs-layout #nd-subnav button[aria-label="Open Sidebar"] svg {
-    display: none;
-  }
-
-  #nd-docs-layout #nd-subnav button[aria-label="Open Sidebar"]::before {
-    content: "";
-    width: 18px;
-    height: 1.5px;
-    background: currentColor;
-    box-shadow:
-      0 -6px 0 currentColor,
-      0 6px 0 currentColor;
-  }
-
-  #nd-docs-layout #nd-subnav button[data-search] {
-    order: 3;
-    width: 44px;
-    height: 56px;
-    margin-left: auto;
-    padding: 0;
-    border-left: 1px solid var(--color-fd-border);
-    color: var(--color-fd-muted-foreground);
-  }
-
-  #nd-docs-layout [data-sidebar-placeholder],
-  #nd-docs-layout [data-sidebar-panel],
-  #nd-docs-layout [data-toc-popover],
-  #nd-docs-layout #nd-toc {
-    display: none !important;
+    grid-template:
+      "sidebar header toc"
+      "sidebar toc-popover toc"
+      "sidebar main toc" 1fr /
+      var(--fd-sidebar-col) minmax(0, 1fr) var(--fd-toc-width) !important;
   }
 
-  #nd-docs-layout article#nd-page {
-    width: 100%;
-    max-width: none;
-    margin: 0;
-    padding: 34px 20px 64px !important;
-    gap: 0;
+  #nd-docs-layout:not([data-fd-framework]) [data-sidebar-placeholder] {
+    justify-self: stretch;
   }
 
-  #nd-docs-layout article#nd-page > .prose {
+  #nd-docs-layout:not([data-fd-framework]) article#nd-page {
     max-width: none;
+    margin-inline: 0;
   }
 
-  html:has([data-fd-tablet-sidebar-state="open"]) {
-    overflow: hidden;
-  }
-
-  #nd-docs-layout:has([data-fd-tablet-sidebar-state="open"])
-    [data-sidebar-placeholder] {
-    position: fixed;
-    inset: 0 auto 0 0;
-    z-index: 100;
-    display: block !important;
-    width: min(342px, calc(100vw - 42px));
-    height: 100dvh;
-    pointer-events: auto;
-  }
-
-  #nd-docs-layout:has([data-fd-tablet-sidebar-state="open"])
-    [data-sidebar-placeholder]
-    > aside {
-    position: absolute;
-    inset: 0;
-    width: 100% !important;
-    height: 100dvh;
-    max-height: none;
-  }
-
-  /* Fumadocs keeps the desktop sidebar's internal width on its direct
-   * children. The tablet drawer is wider, so the end-aligned children left a
-   * large empty gutter at the start of the panel. Let the header and tree use
-   * the full overlay width instead. */
-  #nd-docs-layout:has([data-fd-tablet-sidebar-state="open"])
-    [data-sidebar-placeholder]
-    > aside
-    > * {
-    width: 100% !important;
-  }
-
-  #nd-docs-layout:has([data-fd-tablet-sidebar-state="open"])
-    aside#nd-sidebar
-    > div:first-child {
-    height: 56px;
-    min-height: 56px;
-    max-height: 56px;
-    flex-basis: 56px;
-    padding-right: 58px;
-  }
-
-  .fd-tablet-sidebar-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: 95;
-    display: block;
-    border: 0;
-    background: color-mix(in srgb, var(--color-fd-background) 72%, transparent);
-    backdrop-filter: blur(2px);
-  }
-
-  .fd-tablet-sidebar-close {
-    position: fixed;
-    top: 6px;
-    left: calc(min(342px, calc(100vw - 42px)) - 50px);
-    z-index: 101;
-    display: inline-flex;
-    width: 44px;
-    height: 44px;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    color: var(--color-fd-muted-foreground);
-    background: transparent;
-  }
-
-  .fd-tablet-sidebar-close:hover,
-  .fd-tablet-sidebar-close:focus-visible {
-    color: var(--color-fd-foreground);
-  }
-
-  .fd-tablet-sidebar-close:focus-visible {
-    outline: 1px solid var(--color-fd-ring);
-    outline-offset: -1px;
-  }
-
-  .fd-tablet-sidebar-close > span,
-  .fd-tablet-sidebar-close > span::after {
-    display: block;
-    width: 18px;
-    height: 1px;
-    background: currentColor;
-    content: "";
-  }
-
-  .fd-tablet-sidebar-close > span {
-    transform: rotate(45deg);
-  }
-
-  .fd-tablet-sidebar-close > span::after {
-    transform: rotate(90deg);
-  }
-
-  #nd-docs-layout > div[data-state]:has(+ aside#nd-sidebar-mobile) {
-    z-index: 95;
-    background: color-mix(in srgb, var(--color-fd-background) 72%, transparent);
-  }
-
-  aside#nd-sidebar-mobile {
-    --fd-pixel-rail-width: 12px;
-    inset: 0 auto 0 0 !important;
-    z-index: 100;
-    width: min(342px, calc(100vw - 42px));
+  #nd-docs-layout:not([data-fd-framework]) article#nd-page > .prose {
     max-width: none;
-    border-right: 1px solid var(--color-fd-border);
-    border-left: 0;
-    background-color: var(--color-fd-background);
-    background-image:
-      linear-gradient(var(--color-fd-border), var(--color-fd-border)),
-      linear-gradient(var(--color-fd-border), var(--color-fd-border)),
-      repeating-linear-gradient(
-        -45deg,
-        color-mix(in srgb, var(--color-fd-border) 2%, transparent),
-        color-mix(in srgb, var(--color-fd-foreground) 7%, transparent) 1px,
-        transparent 1px,
-        transparent 6px
-      ),
-      repeating-linear-gradient(
-        -45deg,
-        color-mix(in srgb, var(--color-fd-border) 2%, transparent),
-        color-mix(in srgb, var(--color-fd-foreground) 7%, transparent) 1px,
-        transparent 1px,
-        transparent 6px
-      );
-    background-position:
-      var(--fd-pixel-rail-width) 0,
-      calc(100% - var(--fd-pixel-rail-width)) 0,
-      left top,
-      right top;
-    background-repeat: repeat-y;
-    background-size:
-      1px 100%,
-      1px 100%,
-      var(--fd-pixel-rail-width) 100%,
-      var(--fd-pixel-rail-width) 100%;
-    box-shadow: none;
-  }
-
-  aside#nd-sidebar-mobile[data-state="open"] {
-    animation: fd-pixel-sidebar-in 180ms ease-out both !important;
   }
-
-  aside#nd-sidebar-mobile[data-state="closed"] {
-    animation: fd-pixel-sidebar-out 150ms ease-in both !important;
-  }
-
-  aside#nd-sidebar-mobile > div:first-child {
-    box-sizing: border-box;
-    min-height: 56px;
-    flex: 0 0 56px;
-    gap: 0;
-    padding: 0 calc(var(--fd-pixel-rail-width) + 8px);
-    border-bottom: 1px solid var(--color-fd-border);
-  }
-
-  aside#nd-sidebar-mobile > div:first-child > div {
-    height: 100%;
-  }
-
-  aside#nd-sidebar-mobile > div:first-child > div::before {
-    content: "/ DOCS";
-    flex: 0 0 auto;
-    color: var(--color-fd-foreground);
-    font-family: var(--fd-font-mono, ui-monospace, monospace);
-    font-size: 12px;
-    letter-spacing: 0.03em;
-  }
-
-  aside#nd-sidebar-mobile
-    > div:first-child
-    > div
-    > button[aria-label="Open Sidebar"]:last-child {
-    position: relative;
-    width: 44px;
-    height: 44px;
-    padding: 0;
-  }
-
-  aside#nd-sidebar-mobile
-    > div:first-child
-    > div
-    > button[aria-label="Open Sidebar"]:last-child
-    svg {
-    display: none;
-  }
-
-  aside#nd-sidebar-mobile
-    > div:first-child
-    > div
-    > button[aria-label="Open Sidebar"]:last-child::before,
-  aside#nd-sidebar-mobile
-    > div:first-child
-    > div
-    > button[aria-label="Open Sidebar"]:last-child::after {
-    position: absolute;
-    width: 18px;
-    height: 1px;
-    background: currentColor;
-    content: "";
-  }
-
-  aside#nd-sidebar-mobile
-    > div:first-child
-    > div
-    > button[aria-label="Open Sidebar"]:last-child::before {
-    transform: rotate(45deg);
-  }
-
-  aside#nd-sidebar-mobile
-    > div:first-child
-    > div
-    > button[aria-label="Open Sidebar"]:last-child::after {
-    transform: rotate(-45deg);
-  }
-
-  aside#nd-sidebar-mobile > div:nth-child(2) > div:last-child {
-    padding-inline: calc(var(--fd-pixel-rail-width) + 4px) !important;
-  }
-}
-
-@keyframes fd-pixel-sidebar-in {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes fd-pixel-sidebar-out {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  aside#nd-sidebar-mobile[data-state] {
-    animation-duration: 1ms !important;
-  }
-}
-
-.fd-agent-llms-directive[data-visible-in-header="true"] {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 90;
-  display: inline-flex;
-  width: 105px;
-  height: 44px;
-  align-items: center;
-  justify-content: center;
-  border-left: 1px solid var(--color-fd-border);
-  border-bottom: 1px solid var(--color-fd-border);
-  color: var(--color-fd-muted-foreground);
-  background: color-mix(in srgb, var(--color-fd-background) 94%, transparent);
-  font-family: var(--fd-font-mono, ui-monospace, monospace);
-  font-size: 12px;
-  letter-spacing: 0.03em;
-  text-decoration: none;
-}
-
-.fd-agent-llms-directive[data-visible-in-header="true"]:hover {
-  color: var(--color-fd-foreground);
 }
 
-@media (max-width: 1023px) {
-  .fd-agent-llms-directive[data-visible-in-header="true"] {
-    height: 56px;
+/* ─── Mobile: ensure sidebar drawer/content isn't clipped ───────────────── */
+@media (max-width: 767px) {
+  #nd-docs-layout:not([data-fd-framework]) aside#nd-sidebar {
+    max-height: none;
+    overflow-y: visible;
   }
 }
 
 /* ─── Sidebar (better-auth style) — light + dark ───────────────────── */
 /* Sidebar container: use theme variables for both modes */
 aside#nd-sidebar {
-  --fd-pixel-rail-width: 12px;
   background: var(--color-fd-background);
-  background-image:
-    linear-gradient(var(--color-fd-border), var(--color-fd-border)),
-    linear-gradient(var(--color-fd-border), var(--color-fd-border)),
-    repeating-linear-gradient(
-      -45deg,
-      color-mix(in srgb, var(--color-fd-border) 2%, transparent),
-      color-mix(in srgb, var(--color-fd-foreground) 7%, transparent) 1px,
-      transparent 1px,
-      transparent 6px
-    ),
-    repeating-linear-gradient(
-      -45deg,
-      color-mix(in srgb, var(--color-fd-border) 2%, transparent),
-      color-mix(in srgb, var(--color-fd-foreground) 7%, transparent) 1px,
-      transparent 1px,
-      transparent 6px
-    );
-  background-position:
-    var(--fd-pixel-rail-width) 0,
-    calc(100% - var(--fd-pixel-rail-width)) 0,
-    left top,
-    right top;
-  background-repeat: repeat-y;
-  background-size:
-    1px 100%,
-    1px 100%,
-    var(--fd-pixel-rail-width) 100%,
-    var(--fd-pixel-rail-width) 100%;
-  border-left: 1px solid var(--color-fd-border);
   border-color: var(--color-fd-border);
 }
 
-aside#nd-sidebar > div:first-child {
-  box-sizing: border-box;
-  height: 44px;
-  min-height: 44px;
-  max-height: 44px;
-  flex: 0 0 44px;
-  gap: 0;
-  justify-content: center;
-  padding: 0 calc(var(--fd-pixel-rail-width) + 12px);
-  border-bottom: 1px solid var(--color-fd-border);
-}
-
-aside#nd-sidebar > div:first-child > div:first-child {
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  font-family: var(--fd-font-mono, ui-monospace, monospace);
-  font-size: 12px;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-
-aside#nd-sidebar > div:first-child > div:first-child::after {
-  content: "/ DOCS";
-  flex: 0 0 auto;
-  margin-left: auto;
-  color: var(--color-fd-foreground);
-}
-
-aside#nd-sidebar > div:first-child > div:first-child > a {
-  gap: 8px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-aside#nd-sidebar > div:first-child > div:first-child > a::before {
-  content: "";
-  width: 16px;
-  height: 16px;
-  flex: 0 0 16px;
-  background:
-    linear-gradient(currentColor 0 0) 0 0 / 6px 6px no-repeat,
-    linear-gradient(currentColor 0 0) 8px 0 / 8px 6px no-repeat,
-    linear-gradient(color-mix(in srgb, currentColor 64%, transparent) 0 0) 0 8px / 6px 6px
-      no-repeat,
-    linear-gradient(color-mix(in srgb, currentColor 64%, transparent) 0 0) 8px 8px / 8px 6px
-      no-repeat;
-}
-
-aside#nd-sidebar > div:first-child button[aria-label="Collapse Sidebar"],
-aside#nd-sidebar > div:first-child button[data-search-full] {
-  display: none !important;
-}
-
-/* Production keeps the tree scrollable to the bottom without a pinned
- * Fumadocs appearance switcher occupying the last row. Farm's server-rendered
- * layout uses `.sidebar-scroll` as its last child, so never hide that tree. */
-#nd-docs-layout:not([data-fd-framework])
-  aside#nd-sidebar
-  > div:last-child:not(.sidebar-scroll) {
-  display: none !important;
-}
-
 /* ── Full-width border separators between top-level items ─────────── */
 aside .overscroll-contain > div {
-  margin-top: 3px;
+  margin-top: -22px;
 }
 
 aside .overscroll-contain > div > a[data-active] {
@@ -749,19 +254,13 @@ aside .overscroll-contain > div > a[data-active] {
 
 aside .overscroll-contain > div > div {
   border-top: 1px solid var(--color-fd-border);
-  margin-left: -0.875rem;
+  margin-left: -1rem;
   margin-right: -1rem;
   padding: 0 !important;
 }
 
-/* Keep every top-level section title in its own bordered row. The child
- * threadline starts immediately below this edge, matching the pixel grid. */
-aside .overscroll-contain > div > div > button[aria-controls][aria-expanded] {
-  width: 100%;
-  border-bottom: 1px solid var(--color-fd-border);
-}
-
-aside .overscroll-contain > div > a[data-active]:first-child {
+aside .overscroll-contain > div > a[data-active]:first-child,
+aside .overscroll-contain > div > div:first-child {
   border-top: none;
 }
 
@@ -774,7 +273,10 @@ aside .overscroll-contain > div > div:last-child {
 
 aside a[data-active],
 aside button[aria-controls][aria-expanded] {
+  font-size: 0.875rem;
+  line-height: 1.6;
   border-radius: 0 !important;
+  padding: 0.5rem 0.625rem !important;
   transition: color 0.15s ease;
   overflow: hidden;
   background-color: transparent !important;
@@ -790,7 +292,7 @@ aside a[data-active="true"]:hover {
   background: transparent !important;
   background-color: transparent !important;
   color: var(--color-fd-primary) !important;
-  font-weight: 400;
+  font-weight: 600;
 }
 
 aside a[data-active="false"]:hover {
@@ -802,11 +304,10 @@ aside a[data-active="false"]:hover {
 /* ── Child links inside collapsible folders ──────────────────────── */
 
 aside div.overflow-hidden[data-state] a[data-active] {
-  position: relative;
-  min-height: 31.5703125px;
-  padding: 6px 30px 6px 68px !important;
-  font-size: 13.5px !important;
-  line-height: 1.45 !important;
+  font-size: 0.785rem !important;
+  padding-left: 2rem !important;
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
   color: var(--color-fd-muted-foreground) !important;
   overflow: hidden;
 }
@@ -814,7 +315,7 @@ aside div.overflow-hidden[data-state] a[data-active] {
 aside div.overflow-hidden[data-state] a[data-active="true"],
 aside div.overflow-hidden[data-state] a[data-active="true"]:hover {
   color: var(--color-fd-primary) !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
 }
 
 aside div.overflow-hidden[data-state] a[data-active="false"]:hover {
@@ -823,124 +324,31 @@ aside div.overflow-hidden[data-state] a[data-active="false"]:hover {
 
 /* ── Folder toggle buttons (section headers) ─────────────────────── */
 
-aside#nd-sidebar button.text-fd-muted-foreground,
-aside#nd-sidebar-mobile button.text-fd-muted-foreground {
-  height: 35px;
-  min-height: 35px;
-  padding: 8px 30px !important;
-  color: var(--color-fd-muted-foreground) !important;
-  font-size: 12px !important;
-  font-weight: 600 !important;
-  line-height: 18px !important;
+aside button.text-fd-muted-foreground {
+  color: var(--color-fd-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
   letter-spacing: normal;
   text-transform: none;
 }
 
-aside#nd-sidebar button.text-fd-muted-foreground:hover,
-aside#nd-sidebar-mobile button.text-fd-muted-foreground:hover {
-  color: var(--color-fd-foreground) !important;
+aside button.text-fd-muted-foreground:hover {
+  color: var(--color-fd-foreground);
 }
 
 aside a[data-active="true"]::before {
-  content: none !important;
-}
-
-aside div.overflow-hidden[data-state] > div {
-  gap: 0 !important;
-  padding: 8px 0 6px !important;
-}
-
-/* Nested folders keep their labels visible so the configured information
- * architecture survives in adapters with deeper sidebar trees. */
-aside div.overflow-hidden[data-state] > div > div[data-state] {
-  position: relative;
-  padding: 2px 0 4px;
-}
-
-aside div.overflow-hidden[data-state] > div > div[data-state]::before {
-  content: "";
-  position: absolute;
-  top: 17px;
-  bottom: 19px;
-  inset-inline-start: 75px;
-  width: 1px;
-  background: color-mix(in srgb, var(--color-fd-border) 88%, transparent);
-}
-
-aside#nd-sidebar div.overflow-hidden[data-state] button[aria-expanded],
-aside#nd-sidebar-mobile div.overflow-hidden[data-state] button[aria-expanded] {
-  position: relative;
-  display: flex !important;
-  height: 31.5703125px;
-  min-height: 31.5703125px;
-  padding: 6px 30px 6px 68px !important;
-  color: var(--color-fd-muted-foreground) !important;
-  font-size: 13.5px !important;
-  font-weight: 500 !important;
-  line-height: 1.45 !important;
-}
-
-aside div.overflow-hidden[data-state] div.overflow-hidden[data-state] > div {
-  padding: 0 0 4px !important;
-}
-
-aside div.overflow-hidden[data-state] button[aria-expanded]::after {
-  content: "";
-  position: absolute;
-  top: calc(50% - 0.5px);
-  inset-inline-start: 46px;
-  width: 29px;
-  height: 1px;
-  background: color-mix(in srgb, var(--color-fd-border) 88%, transparent);
-}
-
-aside
-  div.overflow-hidden[data-state]
-  div.overflow-hidden[data-state]
-  a[data-active] {
-  padding-inline-start: 103px !important;
-}
-
-aside div.overflow-hidden[data-state] a[data-active]::after {
-  content: "";
-  position: absolute;
-  top: calc(50% - 0.5px);
-  inset-inline-start: 46px;
-  width: 22px;
-  height: 1px;
-  background: color-mix(in srgb, var(--color-fd-border) 88%, transparent);
-}
-
-aside div.overflow-hidden[data-state] a[data-active="true"]::after {
-  background: var(--color-fd-primary);
+  background-color: var(--color-fd-primary) !important;
+  width: 2px !important;
+  height: 40% !important;
+  margin-top: -1.5px !important;
+  margin-left: 0.6rem !important;
+  inset-inline-start: 0.5rem !important;
 }
 
 aside div.overflow-hidden[data-state]::before {
-  top: 0 !important;
-  bottom: 0 !important;
-  inset-inline-start: 46px !important;
-  width: 1px !important;
-  height: auto !important;
-  margin: 0 !important;
-}
-
-aside
-  div.overflow-hidden[data-state]
-  div.overflow-hidden[data-state]
-  a[data-active]::after {
-  inset-inline-start: 75px;
-  width: 28px;
-}
-
-aside
-  div.overflow-hidden[data-state]
-  div.overflow-hidden[data-state]::before {
-  content: none !important;
-}
-
-aside button[aria-expanded] > .lucide-chevron-down,
-aside button[aria-expanded] > .lucide-chevron-right {
-  display: none !important;
+  margin-left: 0.5rem !important;
+  height: calc(100% + 20px) !important;
+  margin-top: -25px !important;
 }
 
 aside div[data-state="open"] > :last-child {
@@ -978,100 +386,6 @@ aside button[class*="rounded-full"] {
 
 /* ─── Tables: visible borders, rounded-none (light + dark) ─────────── */
 
-/* ─── Page rhythm and typography ─────────────────────────────────── */
-
-#nd-docs-layout {
-  background: var(--color-fd-background);
-  font-family: var(--fd-font-sans, ui-sans-serif, system-ui, sans-serif);
-}
-
-#nd-page > .prose h1 {
-  margin: 0 0 16px;
-  font-size: 36px;
-  font-weight: 400;
-  line-height: 1.14;
-  letter-spacing: -0.02em;
-}
-
-#nd-page > .prose h2 {
-  margin: 44px 0 14px;
-  padding-top: 26px;
-  border-top: 1px solid var(--color-fd-border);
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 1.24;
-  letter-spacing: -0.01em;
-}
-
-#nd-page > .prose h3 {
-  margin: 30px 0 12px;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 1.3;
-  letter-spacing: 0;
-}
-
-#nd-page > .prose h4,
-#nd-page > .prose h5,
-#nd-page > .prose h6 {
-  margin: 24px 0 10px;
-  font-weight: 400;
-  letter-spacing: 0;
-}
-
-#nd-page > .prose p {
-  margin: 14px 0;
-  color: color-mix(in srgb, var(--color-fd-foreground) 74%, transparent);
-  font-size: 15.6px;
-  line-height: 1.8;
-}
-
-#nd-page > .prose ul,
-#nd-page > .prose ol {
-  margin: 16px 0;
-  padding-left: 24px;
-  color: color-mix(in srgb, var(--color-fd-foreground) 78%, transparent);
-  line-height: 1.75;
-}
-
-#nd-page > .prose li {
-  margin: 6px 0;
-}
-
-#nd-docs-layout .fd-title-separator {
-  display: none;
-}
-
-/* The adapter portals title actions beside an MDX-owned h1. Removing the
- * portal wrapper from layout makes that block flow like the native page. */
-#nd-docs-layout .fd-title-decorations-host {
-  display: contents;
-}
-
-#nd-docs-layout .fd-below-title-block {
-  display: flex;
-  width: 100%;
-  margin: 0 0 20px;
-}
-
-#nd-docs-layout .fd-below-title-block .fd-actions-portal {
-  width: 100%;
-}
-
-@media (max-width: 1023px) {
-  #nd-page > .prose h1 {
-    font-size: 32px;
-    line-height: 1.16;
-    letter-spacing: 0;
-  }
-
-  #nd-page > .prose h2 {
-    margin-top: 34px;
-    padding-top: 22px;
-    font-size: 23px;
-  }
-}
-
 table {
   border: 1px solid var(--color-fd-border);
   border-radius: 0 !important;
@@ -1102,59 +416,10 @@ tr:last-child td {
 /* Target the fumadocs CodeBlock figure (shiki class) */
 figure.shiki,
 .fd-codeblock {
-  --padding-left: 0px;
-  --padding-right: 0px;
   border: 1px solid var(--color-fd-border) !important;
   border-radius: 0 !important;
-  background: #141414 !important;
   overflow: hidden;
-  box-shadow: 3px 3px 0 0 var(--color-fd-border) !important;
-}
-
-@media (min-width: 1024px) {
-  figure.shiki,
-  .fd-codeblock {
-    margin: 20px 0 !important;
-  }
-
-  figure.shiki span[style*="--shiki-dark"],
-  .fd-codeblock span[style*="--shiki-dark"] {
-    color: color-mix(in srgb, var(--color-fd-foreground) 74%, transparent) !important;
-  }
-}
-
-figure.shiki pre,
-.fd-codeblock pre {
-  margin: 0;
-  padding: 18px 20px !important;
-  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-figure.shiki > div[role="region"],
-.fd-codeblock > div[role="region"] {
-  padding-block: 0 !important;
-}
-
-figure.shiki code,
-.fd-codeblock code {
-  font-family: inherit !important;
-}
-
-@media (max-width: 1023px) {
-  figure.shiki,
-  .fd-codeblock {
-    margin: 16px 0;
-    box-shadow: 2px 2px 0 0 var(--color-fd-border) !important;
-  }
-
-  figure.shiki pre,
-  .fd-codeblock pre {
-    padding: 12px 11px !important;
-    font-size: 12px;
-    line-height: 1.5;
-  }
+  box-shadow: none !important;
 }
 
 /* Copy button inside code blocks */
@@ -1163,12 +428,6 @@ figure.shiki button,
   border-radius: 0 !important;
 }
 
-figure.shiki button[aria-label="Copy Text"],
-.fd-copy-btn {
-  opacity: 1 !important;
-  visibility: visible !important;
-}
-
 /* Code block title bar */
 figure.shiki > div:first-child,
 .fd-codeblock-title {
@@ -1218,108 +477,16 @@ div:has(> [role="tablist"]) {
   border-color: var(--color-fd-border);
 }
 
-/* ─── Page footer + previous/next navigation ─────────────────────── */
-
-#nd-docs-layout .fd-page-footer > a {
-  border-radius: 0 !important;
-}
-
-#nd-docs-layout .fd-page-nav,
-#nd-docs-layout[data-fd-framework] .fd-page-nav {
-  display: grid;
-  width: 100%;
-  max-width: 100%;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-  margin-top: 1rem;
-  border-top: 0;
-  padding-top: 0;
-}
-
-#nd-docs-layout .fd-page-nav:has(.fd-page-nav-prev):has(.fd-page-nav-next),
-#nd-docs-layout[data-fd-framework]
-  .fd-page-nav:has(.fd-page-nav-prev):has(.fd-page-nav-next) {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
+/* ─── Nav cards (prev/next): visible border, rounded-none ──────────── */
 
-#nd-docs-layout .fd-page-nav-card,
-#nd-docs-layout[data-fd-framework] .fd-page-nav-card {
-  display: flex;
-  min-width: 0;
-  min-height: 6.125rem;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  border: 1px solid var(--color-fd-border);
+article a[class*="border"] {
+  border-color: var(--color-fd-border);
   border-radius: 0 !important;
-  background: transparent;
-  padding: 1rem;
-  color: var(--color-fd-foreground);
-  text-decoration: none;
-  transition:
-    background-color 150ms ease,
-    border-color 150ms ease;
-}
-
-#nd-docs-layout .fd-page-nav-card:hover,
-#nd-docs-layout[data-fd-framework] .fd-page-nav-card:hover {
-  border-color: color-mix(in srgb, var(--color-fd-foreground) 28%, transparent);
-  background: color-mix(in srgb, var(--color-fd-muted) 80%, transparent);
-}
-
-#nd-docs-layout .fd-page-nav-next,
-#nd-docs-layout[data-fd-framework] .fd-page-nav-next {
-  align-items: flex-end;
-  text-align: right;
-}
-
-#nd-docs-layout .fd-page-nav-title,
-#nd-docs-layout[data-fd-framework] .fd-page-nav-title {
-  display: inline-flex;
-  max-width: 100%;
-  min-height: 0;
-  align-items: center;
-  gap: 0.375rem;
-  overflow: hidden;
-  color: var(--color-fd-foreground);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-#nd-docs-layout .fd-page-nav-title svg,
-#nd-docs-layout[data-fd-framework] .fd-page-nav-title svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-#nd-docs-layout .fd-page-nav-description,
-#nd-docs-layout[data-fd-framework] .fd-page-nav-description {
-  display: block;
-  max-width: 100%;
-  min-height: 0;
-  overflow: hidden;
-  color: var(--color-fd-muted-foreground);
-  font-size: 0.975rem;
-  font-weight: 400;
-  line-height: 1.8;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-@media (max-width: 640px) {
-  #nd-docs-layout .fd-page-nav,
-  #nd-docs-layout[data-fd-framework] .fd-page-nav {
-    grid-template-columns: 1fr !important;
-  }
-
-  #nd-docs-layout .fd-page-nav-next,
-  #nd-docs-layout[data-fd-framework] .fd-page-nav-next {
-    align-items: flex-start;
-    text-align: left;
-  }
+article a[class*="border"]:hover {
+  background: var(--color-fd-muted);
+  border-color: var(--color-fd-ring);
 }
 
 /* ─── Search dialog ───────────────────────────────────────────────── */
@@ -1329,13 +496,6 @@ div:has(> [role="tablist"]) {
   border-color: var(--fd-pixel-modal-border) !important;
 }
 
-/* ─── TOC right panel (light + dark) ───────────────────────────────── */
-
-nav[class*="toc"],
-[class*="fd-toc"] {
-  border-color: var(--color-fd-border);
-}
-
 /* ─── Separator/Divider (hr) — light + dark ─────────────────────────── */
 
 hr {
@@ -1386,9 +546,6 @@ hr {
 
 /* ─── Page Actions (pixel-border overrides) ───────────────────────── */
 .fd-page-action-btn {
-  height: 34px;
-  gap: 8px;
-  padding: 0 12px;
   border-radius: 0 !important;
   font-size: 0.75rem;
   letter-spacing: 0.03em;
@@ -1822,158 +979,43 @@ hr {
 
 /* ─── Omni Command Palette (pixel-border theme) ─────────────────── */
 
-.omni-overlay {
-  z-index: 200;
-  background: color-mix(in srgb, var(--color-fd-background) 64%, transparent);
-  backdrop-filter: blur(3px);
-}
-
 .omni-content {
-  --omni-content-top: clamp(72px, 14vh, 104px);
-  z-index: 201;
-  width: min(680px, calc(100% - 24px));
-  overflow: hidden;
   border-radius: 0 !important;
   border: 1px solid var(--fd-pixel-modal-border);
-  background: var(--color-fd-background);
   box-shadow:
     2px 2px 0 0 var(--fd-pixel-modal-shadow),
     0 0 0 1px color-mix(in srgb, var(--color-fd-foreground) 3%, transparent);
 }
 
-.omni-header {
-  background: color-mix(in srgb, var(--color-fd-background) 96%, var(--color-fd-foreground));
-}
-
-.omni-search-row {
-  min-height: 54px;
-  padding: 0 14px;
-}
-
-.omni-search-icon svg {
-  width: 18px;
-  height: 18px;
+.omni-item {
+  border-radius: 0 !important;
 }
 
-.omni-search-input {
-  font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
-  font-size: 15.5px;
-  line-height: 1.5;
+.omni-kbd,
+.omni-kbd-sm {
+  border-radius: 0 !important;
+  border: 1px solid var(--color-fd-border, hsl(0 0% 15%));
 }
 
 .omni-close-btn {
-  min-width: 36px;
-  height: 30px;
-  padding: 0 8px;
   border-radius: 0 !important;
-  font-size: 10px;
-  letter-spacing: 0.04em;
 }
 
-.omni-close-btn:focus-visible,
-.omni-filter-button:focus-visible,
-.omni-filter-option:focus-visible,
-.omni-item:focus-visible {
-  outline: 1px solid var(--color-fd-ring, var(--color-fd-foreground));
-  outline-offset: -2px;
-}
-
-.omni-body {
-  max-height: min(500px, calc(100dvh - var(--omni-content-top) - 112px));
-  padding: 0;
+.omni-empty-icon {
+  border-radius: 0 !important;
 }
 
-.omni-group + .omni-group {
-  border-top: 1px solid var(--color-fd-border);
+.omni-search-input {
+  font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
 }
 
 .omni-group-label {
-  display: block;
-  padding: 8px 14px 6px;
-  border-bottom: 1px solid var(--color-fd-border);
-  color: var(--color-fd-muted-foreground);
   font-family: var(--fd-font-mono, ui-monospace, monospace);
-  font-size: 10px;
-  line-height: 1.2;
   letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.omni-group-items {
-  gap: 0;
-}
-
-.omni-item {
-  border-radius: 0 !important;
-  padding: 11px 14px;
-  border-bottom: 1px solid var(--color-fd-border);
-  transition:
-    color 80ms ease,
-    background-color 80ms ease;
-}
-
-.omni-group-items > .omni-item:last-child {
-  border-bottom: 0;
-}
-
-.omni-item:hover,
-.omni-item-active {
-  background: color-mix(in srgb, var(--color-fd-foreground) 7%, transparent);
-}
-
-.omni-item-active {
-  box-shadow: inset 2px 0 0 var(--color-fd-foreground);
-}
-
-.omni-item-subtitle {
-  margin-bottom: 2px;
-  font-family: var(--fd-font-mono, ui-monospace, monospace);
-  font-size: 10.5px;
-  line-height: 1.4;
-  letter-spacing: 0.01em;
-}
-
-.omni-item-label {
-  font-size: 14px;
-  line-height: 1.35;
-}
-
-.omni-item-description {
-  -webkit-line-clamp: 2;
-  margin-top: 6px;
-  padding-left: 0;
-  border-left: 0;
-  color: var(--color-fd-muted-foreground);
-  font-size: 12.5px;
-  line-height: 1.5;
-}
-
-.omni-empty {
-  display: flex;
-  min-height: 132px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 24px 16px;
-}
-
-.omni-empty-icon {
-  border-radius: 0 !important;
-  border: 1px solid var(--color-fd-border);
-  background: transparent;
-}
-
-.omni-kbd,
-.omni-kbd-sm {
-  border-radius: 0 !important;
-  border: 1px solid var(--color-fd-border, hsl(0 0% 15%));
 }
 
 .omni-footer-inner {
-  min-height: 42px;
-  padding: 8px 12px;
   font-family: var(--fd-font-mono, ui-monospace, monospace);
-  font-size: 10.5px;
 }
 
 .omni-footer-hint svg {
@@ -1988,57 +1030,6 @@ hr {
 .omni-highlight {
   background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent);
   border-radius: 0 !important;
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (max-width: 639px) {
-  .omni-content {
-    --omni-content-top: 8px;
-    width: calc(100% - 16px);
-    max-height: calc(100dvh - 16px);
-  }
-
-  .omni-search-row {
-    min-height: 52px;
-    padding: 0 12px;
-  }
-
-  .omni-search-input {
-    font-size: 16px;
-  }
-
-  .omni-body {
-    max-height: min(500px, calc(100dvh - 108px));
-  }
-
-  .omni-item {
-    padding: 10px 12px;
-  }
-
-  .omni-item-description {
-    font-size: 12px;
-    line-height: 1.45;
-  }
-
-  .omni-footer-inner {
-    min-height: 40px;
-    gap: 8px;
-    padding: 7px 10px;
-    font-size: 10px;
-  }
-
-  .omni-footer-hints {
-    gap: 7px;
-  }
-
-  .omni-footer-hint {
-    gap: 3px;
-  }
-
-  .omni-filter-label {
-    display: none;
-  }
 }
 
 /* ─── Feedback (pixel-border theme) ──────────────────────────────── */