diff --git a/components/grid-wallet-demo/src/app/globals.scss b/components/grid-wallet-demo/src/app/globals.scss
index a8104980..c24d8d4b 100644
--- a/components/grid-wallet-demo/src/app/globals.scss
+++ b/components/grid-wallet-demo/src/app/globals.scss
@@ -147,14 +147,24 @@ body {
    [data-theme] flips, so the whole backdrop changes in lockstep (no stagger).
    `--dot-grid-dot` is the resting dot; `--dot-grid-dot-peak` is the ripple crest. */
 :root {
-  /* Light: surface-secondary is the sunken stage gray (#F0F0EE), like
-     grid-visualizer's dot panels. Dark overrides to gray-925 below — the WebGL
-     dots' original backdrop; surface-secondary's #111111 reads too dark. */
-  --dot-grid-bg: var(--surface-secondary);
+  /* Light: surface-primary (#F8F8F7) — the stage sits a step ABOVE the
+     chrome-gray side panels (surface-secondary), matching the raised cards.
+     Dark overrides below mirror it: gray-950 stage over #111111 chrome. */
+  --dot-grid-bg: var(--surface-primary);
   --dot-grid-dot: #deded9;
   --dot-grid-dot-peak: #b8b8b3;
 }
 
+/* 3-col layout: the light stage steps down a hair so it separates from the
+   raised cards flanking it. Keyed to html's data-layout attribute (set
+   pre-paint by layout.tsx, kept live by page.tsx) so the color rides the
+   same clock as the arrangement flip. Light-only — the dark stage is
+   gray-950 in both arrangements. The JS canvas re-reads the token on resize
+   (StageGL's ResizeObserver), which every arrangement flip triggers. */
+html:not([data-theme='dark']):not([data-layout='stacked']) {
+  --dot-grid-bg: #f4f4f3;
+}
+
 :root {
   --p-accent: #11a967;
   --p-accent-press: #0e8f57;
@@ -176,9 +186,11 @@ body {
 }
 
 [data-theme='dark'] {
-  --dot-grid-bg: var(--color-gray-925);
-  --dot-grid-dot: #333330;
-  --dot-grid-dot-peak: #4d4d47;
+  /* gray-950 (#1A1A1A) — a step darker than the chrome-gray side panels'
+     raised cards, mirroring the light stage sitting under the panel surface. */
+  --dot-grid-bg: var(--color-gray-950);
+  --dot-grid-dot: #2d2d2a;
+  --dot-grid-dot-peak: #474741;
   --p-bg: #000000;
   --p-screen: #000000;
   --p-surface: #141414;
diff --git a/components/grid-wallet-demo/src/app/layout.tsx b/components/grid-wallet-demo/src/app/layout.tsx
index c27f8e1b..471e0381 100644
--- a/components/grid-wallet-demo/src/app/layout.tsx
+++ b/components/grid-wallet-demo/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { GeistSans } from 'geist/font/sans';
 import { easingVarsStylesheet } from '@/lib/easing';
+import { CONFIGURE_COL_PX, LAYOUT_WIDE_PX } from '@/lib/layout';
 import './globals.scss';
 
 const TITLE = 'Grid Global Accounts — Live demo';
@@ -44,7 +45,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="preload" href="/fonts/SuisseIntl-Book.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
         <link rel="preload" href="/fonts/SuisseIntl-Medium.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
         <link rel="preload" href="/fonts/SuisseIntlMono-Regular-WebXL.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
-        {/* Set data-embed and an initial data-theme before paint to avoid a flash. */}
+        {/* Boot attributes, set before first paint to avoid flashes — an
+            effect is too late (the SSR HTML paints long before hydration):
+            - data-embed / data-theme from the URL (embed) or stored pref
+            - data-layout (stacked ⇄ 3-col) from the viewport width
+            - --api-col-default from the embed's ?nav param (the live docs
+              sidebar width), so the wide layout's code column paints at its
+              real default — sidebar + configure column — instead of the
+              expanded-sidebar assumption and re-fitting after hydration. */}
         <script
           dangerouslySetInnerHTML={{
             __html: `(function(){try{
@@ -58,6 +66,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
               }
               document.documentElement.setAttribute('data-theme',t);
+              document.documentElement.setAttribute('data-layout',window.innerWidth<${LAYOUT_WIDE_PX}?'stacked':'wide');
+              var nav=parseFloat(p.get('nav'));
+              if(isFinite(nav)&&nav>=0){document.documentElement.style.setProperty('--api-col-default',(Math.round(nav)+${CONFIGURE_COL_PX})+'px');}
             }catch(e){}})();`,
           }}
         />
diff --git a/components/grid-wallet-demo/src/app/page.module.scss b/components/grid-wallet-demo/src/app/page.module.scss
index 88db2b62..48421f7f 100644
--- a/components/grid-wallet-demo/src/app/page.module.scss
+++ b/components/grid-wallet-demo/src/app/page.module.scss
@@ -45,30 +45,56 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  /* Pre-hydration width: --api-col-default is set before first paint (from
+     the embed's ?nav param, see layout.tsx) so the wide layout boots at the
+     REAL default instead of re-fitting once React measures. The 680px
+     fallback is the standalone default — keep in sync with API_DEFAULT_WIDTH
+     in useColumnResize. React's inline width takes over after hydration. */
+  width: var(--api-col-default, 680px);
 }
 
-/* Laptop: configure left, app over API on the right. Floored at the mobile
-   breakpoint so these rules never leak into the mobile single-column layout. */
-@media (min-width: ($breakpoint-layout-mobile + 1px)) and (max-width: ($breakpoint-layout-wide - 1px)) {
-  .stackCol {
-    flex-direction: column;
-    min-height: 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
+/* Side-by-side: nav-driven width changes (the default following a docs
+   sidebar collapse/expand) opt INTO the ease via data-easing — set in the
+   same commit as the width change, never by default. An always-on transition
+   would race the stacked ⇄ 3-col media flip and hold the column at its full
+   stacked width inside the fresh row layout for a frame or two, crushing the
+   app column to zero (the phone blinks out). Drags always track 1:1. */
+@media (min-width: $breakpoint-layout-wide) {
+  .apiCol[data-easing]:not([data-resizing]) {
+    transition: width 240ms cubic-bezier(0.25, 0.1, 0.25, 1);
   }
+}
 
-  .appCol {
-    flex: none;
-    width: 100% !important;
-    min-height: calc(100% - var(--panel-header-height, 52px));
-    overflow: visible;
-  }
+/* Laptop: configure left, app over API on the right. Keyed to html's
+   data-layout attribute (set pre-paint by the layout.tsx inline script, kept
+   live by page.tsx) instead of a media query, so the arrangement and the
+   attribute-keyed chrome colors flip on one clock. Floored at the mobile
+   breakpoint so these rules never leak into the mobile single-column layout
+   (whose media rules set the same properties at lower specificity). */
+@media (min-width: ($breakpoint-layout-mobile + 1px)) {
+  :global(html[data-layout='stacked']) {
+    .stackCol {
+      flex-direction: column;
+      min-height: 0;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
 
-  .apiCol {
-    flex: none;
-    width: 100% !important;
-    min-height: 0;
-    overflow: visible;
+    .appCol {
+      flex: none;
+      width: 100% !important;
+      /* Peek the API panel's header PLUS a strip of its body under the phone —
+         enough to read as content waiting below, not just a bar. */
+      min-height: calc(100% - var(--panel-header-height, 52px) - 64px);
+      overflow: visible;
+    }
+
+    .apiCol {
+      flex: none;
+      width: 100% !important;
+      min-height: 0;
+      overflow: visible;
+    }
   }
 }
 
diff --git a/components/grid-wallet-demo/src/app/page.tsx b/components/grid-wallet-demo/src/app/page.tsx
index c9b4865b..00eebb07 100644
--- a/components/grid-wallet-demo/src/app/page.tsx
+++ b/components/grid-wallet-demo/src/app/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { IconArrowRight } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconArrowRight';
 import { IconArrowLeft } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconArrowLeft';
@@ -11,6 +11,7 @@ import { ColumnResizeHandle } from '@/components/ColumnResizeHandle/ColumnResize
 import { ThemeSync } from '@/components/ThemeSync';
 import { useColumnResize } from '@/hooks/useColumnResize';
 import { useWalletDemoLogic } from '@/hooks/useWalletDemoLogic';
+import { LAYOUT_WIDE_PX } from '@/lib/layout';
 import type { ActionId } from '@/data/actions';
 import styles from './page.module.scss';
 
@@ -33,7 +34,21 @@ function withViewTransition(update: () => void) {
 
 export default function Page() {
   const logic = useWalletDemoLogic();
-  const { layoutRef, apiColRef, apiWidth, onResizeStart } = useColumnResize();
+  const { layoutRef, apiColRef, apiWidth, resizing, onResizeStart } = useColumnResize();
+
+  // Stacked ⇄ 3-col as a data-layout attribute on <html> so the arrangement,
+  // the panel chrome colors, and the API header all flip on one clock. The
+  // inline script in layout.tsx sets it BEFORE first paint (an effect here
+  // would flash the SSR wide default on stacked viewports while JS loads);
+  // this listener only keeps it live across resizes.
+  useLayoutEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${LAYOUT_WIDE_PX - 1}px)`);
+    const apply = () =>
+      document.documentElement.setAttribute('data-layout', mql.matches ? 'stacked' : 'wide');
+    apply();
+    mql.addEventListener('change', apply);
+    return () => mql.removeEventListener('change', apply);
+  }, []);
 
   // Mobile only (<=767): the layout collapses to one view at a time. On desktop
   // this stays 'configure' forever (the switch is gated to the mobile viewport),
@@ -93,7 +108,11 @@ export default function Page() {
   }, [mobileView]);
 
   return (
-    <main ref={layoutRef} className={styles.layout} data-mobile-view={mobileView}>
+    <main
+      ref={layoutRef}
+      className={styles.layout}
+      data-mobile-view={mobileView}
+    >
       <ThemeSync />
       <div className={styles.configCol}>
         <ConfigurePanel
@@ -153,7 +172,11 @@ export default function Page() {
         <div
           ref={apiColRef}
           className={styles.apiCol}
-          style={{ width: apiWidth, flex: '0 0 auto' }}
+          data-resizing={resizing || undefined}
+          // No inline width until the post-hydration measure — the stylesheet's
+          // var(--api-col-default) (seeded pre-paint from the embed's ?nav
+          // param) styles the column so the first paint is already correct.
+          style={{ width: apiWidth ?? undefined }}
         >
           <ApiPanel entries={logic.entries} />
         </div>
diff --git a/components/grid-wallet-demo/src/components/ApiPanel/ApiCallList.module.scss b/components/grid-wallet-demo/src/components/ApiPanel/ApiCallList.module.scss
index c2edc355..b9b9d808 100644
--- a/components/grid-wallet-demo/src/components/ApiPanel/ApiCallList.module.scss
+++ b/components/grid-wallet-demo/src/components/ApiPanel/ApiCallList.module.scss
@@ -13,7 +13,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 48px;
+  /* Sides match the Configure panel's content padding. */
+  padding: 48px $layout-laptop-content-padding;
   padding-top: calc(var(--spacing-md) + 12px);
 
   // Mobile: match the Configure panel's 24px side padding.
@@ -101,16 +102,19 @@
   corner-shape: var(--corner-shape);
   --badge-height: 20px;
   --row-padding: calc((48px - var(--badge-height)) / 2);
+  /* Single source for the card surface — the endpoint fade + tab indicator
+     must match it exactly, and the wide layout re-tints all three at once. */
+  --call-card-bg: var(--surface-base);
   display: flex;
   flex-direction: column;
   width: 100%;
-  background: var(--surface-base);
+  background: var(--call-card-bg);
   border: 0.5px solid var(--border-tertiary);
   border-radius: var(--corner-radius-md);
   overflow: clip;
 
   :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
+    --call-card-bg: var(--color-gray-925);
   }
 
   &:hover,
@@ -189,11 +193,7 @@
   pointer-events: none;
   opacity: 0;
   transition: opacity 150ms ease;
-  background: linear-gradient(to right, transparent, var(--surface-base) 52%);
-
-  :global([data-theme='dark']) & {
-    background: linear-gradient(to right, transparent, var(--color-gray-925) 52%);
-  }
+  background: linear-gradient(to right, transparent, var(--call-card-bg) 52%);
 }
 
 .endpointCopyBtn {
@@ -253,12 +253,8 @@
   box-sizing: border-box;
   border-left: var(--stroke-xs) solid var(--border-tertiary);
   border-right: var(--stroke-xs) solid var(--border-tertiary);
-  background: var(--surface-base);
+  background: var(--call-card-bg);
   pointer-events: none;
-
-  :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
-  }
 }
 
 .tabGroupLeadingActive .tabIndicator {
@@ -371,6 +367,19 @@
   }
 }
 
+/* Side-by-side the panel wears the docs-chrome gray, so the cards step down
+   with it: pure white (light) / gray-925 (dark) read too hot on the chrome —
+   one notch softer keeps the same card-to-panel delta as the stacked layout. */
+@media (min-width: $breakpoint-layout-wide) {
+  .callCard {
+    --call-card-bg: var(--surface-primary);
+
+    :global([data-theme='dark']) & {
+      --call-card-bg: var(--color-gray-950);
+    }
+  }
+}
+
 @include layout-laptop {
   .list {
     align-items: center;
diff --git a/components/grid-wallet-demo/src/components/ApiPanel/ApiPanel.module.scss b/components/grid-wallet-demo/src/components/ApiPanel/ApiPanel.module.scss
index 6e16cdf8..e508bd31 100644
--- a/components/grid-wallet-demo/src/components/ApiPanel/ApiPanel.module.scss
+++ b/components/grid-wallet-demo/src/components/ApiPanel/ApiPanel.module.scss
@@ -8,6 +8,8 @@
   flex-direction: column;
   background: var(--surface-primary);
   overflow: hidden;
+  /* Chrome gray only side-by-side — glide the color across the crossing. */
+  transition: background-color 240ms cubic-bezier(0.19, 1, 0.22, 1);
 
   :global([data-theme='dark']) & {
     background: var(--color-gray-950);
@@ -57,36 +59,38 @@
   }
 }
 
-@media (max-width: ($breakpoint-layout-wide - 1px)) {
-  .panel {
-    overflow: visible;
-  }
-
-  .body {
-    overflow: visible;
-  }
+/* Keyed to html's data-layout attribute (set pre-paint by layout.tsx, kept
+   live by page.tsx) rather than the media query, so the panel's structure
+   and chrome flip on the same clock as the arrangement. The attribute is
+   'stacked' on laptop AND mobile, matching the old max-width media block. */
+:global(html[data-layout='stacked']) .panel {
+  overflow: visible;
+}
 
-  .headerStacked {
-    border-top: var(--stroke-xs) solid var(--border-primary);
-  }
+:global(html[data-layout='stacked']) .body {
+  overflow: visible;
 }
 
-@media (min-width: $breakpoint-layout-wide) {
-  .panel {
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
+:global(html[data-layout='stacked']) .headerStacked {
+  border-top: var(--stroke-xs) solid var(--border-primary);
+}
 
-  .body {
-    overflow: visible;
-  }
+/* Side-by-side. */
+:global(html:not([data-layout='stacked'])) .panel {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* The calls column wears the docs-chrome gray. surface-secondary flips
+     with the theme, and this selector outweighs the base dark override. */
+  background: var(--surface-secondary);
+}
 
-  .headerStacked {
-    border-left: var(--stroke-xs) solid var(--border-primary);
-  }
+:global(html:not([data-layout='stacked'])) .body {
+  overflow: visible;
+}
 
-  /* Side-by-side: calls are always in view, so no "new" signifier. */
-  .newPill {
-    display: none;
-  }
+/* Side-by-side: the calls ARE the column — no header bar needed (it only
+   earns its keep stacked, where it's the peek target + new-call signifier).
+   The resize handle draws the full-height column divider. */
+:global(html:not([data-layout='stacked'])) .headerStacked {
+  display: none;
 }
diff --git a/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelEmpty.module.scss b/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelEmpty.module.scss
index a84b608e..dbaffbba 100644
--- a/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelEmpty.module.scss
+++ b/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelEmpty.module.scss
@@ -22,6 +22,8 @@
 .skeletonCover {
   --cover-fade-height: 56px;
   --cover-top: 0px;
+  /* Must match the panel surface exactly or the melt reads as a tint band. */
+  --cover-bg: var(--surface-primary);
   position: absolute;
   inset: var(--cover-top) 0 0;
   pointer-events: none;
@@ -30,16 +32,21 @@
   transition: opacity var(--cover-duration, 550ms) cubic-bezier(0.19, 1, 0.22, 1);
   background: linear-gradient(
     to top,
-    var(--surface-primary) calc(100% - var(--cover-fade-height)),
+    var(--cover-bg) calc(100% - var(--cover-fade-height)),
     transparent 100%
   );
 
   :global([data-theme='dark']) & {
-    background: linear-gradient(
-      to top,
-      var(--color-gray-950) calc(100% - var(--cover-fade-height)),
-      transparent 100%
-    );
+    --cover-bg: var(--color-gray-950);
+  }
+
+  /* Side-by-side the panel wears the docs-chrome gray (both modes). */
+  @media (min-width: $breakpoint-layout-wide) {
+    --cover-bg: var(--surface-secondary);
+
+    :global([data-theme='dark']) & {
+      --cover-bg: var(--surface-secondary);
+    }
   }
 }
 
diff --git a/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelSkeleton.module.scss b/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelSkeleton.module.scss
index 967c941a..df391aae 100644
--- a/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelSkeleton.module.scss
+++ b/components/grid-wallet-demo/src/components/ApiPanel/ApiPanelSkeleton.module.scss
@@ -1,6 +1,8 @@
 @use '../../styles/breakpoints' as *;
 
-$skeleton-bone-light: var(--color-gray-075);
+/* gray-100 (was 075): at the feed's 0.5 opacity the pills washed out against
+   the chrome-gray panel — one notch darker keeps them faint but legible. */
+$skeleton-bone-light: var(--color-gray-100);
 $skeleton-bone-dark: var(--color-gray-850);
 
 .list {
@@ -16,7 +18,8 @@ $skeleton-bone-dark: var(--color-gray-850);
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 48px;
+  /* Sides match the Configure panel's content padding. */
+  padding: 48px $layout-laptop-content-padding;
   padding-top: calc(var(--spacing-md) + 12px);
   gap: var(--spacing-md);
   opacity: 0.5;
@@ -56,6 +59,15 @@ $skeleton-bone-dark: var(--color-gray-850);
   :global([data-theme='dark']) & {
     background: var(--color-gray-925);
   }
+
+  /* Match the live cards' softer surface on the chrome-gray panel (wide). */
+  @media (min-width: $breakpoint-layout-wide) {
+    background: var(--surface-primary);
+
+    :global([data-theme='dark']) & {
+      background: var(--color-gray-950);
+    }
+  }
 }
 
 .entryHeader {
diff --git a/components/grid-wallet-demo/src/components/AppPanel/AppPanel.module.scss b/components/grid-wallet-demo/src/components/AppPanel/AppPanel.module.scss
index 2250444e..f53f06df 100644
--- a/components/grid-wallet-demo/src/components/AppPanel/AppPanel.module.scss
+++ b/components/grid-wallet-demo/src/components/AppPanel/AppPanel.module.scss
@@ -7,6 +7,9 @@
   flex-direction: column;
   overflow: hidden;
   background-color: var(--dot-grid-bg);
+  /* The stage color differs per layout (see globals.scss) — glide it across
+     the stacked ⇄ 3-col crossing instead of snapping. */
+  transition: background-color 240ms cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 @media (max-width: ($breakpoint-layout-wide - 1px)) {
diff --git a/components/grid-wallet-demo/src/components/AppPanel/AppPanel.tsx b/components/grid-wallet-demo/src/components/AppPanel/AppPanel.tsx
index 67e60202..f1b5b3b0 100644
--- a/components/grid-wallet-demo/src/components/AppPanel/AppPanel.tsx
+++ b/components/grid-wallet-demo/src/components/AppPanel/AppPanel.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { IconPhoneDynamicIsland } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconPhoneDynamicIsland';
-import { PanelHeader } from '@/components/PanelHeader/PanelHeader';
 import { DotGridCanvas } from '@/components/DotGridCanvas/DotGridCanvas';
 import type { PhoneProps } from '@/components/Phone';
 import { DemoPhone } from '@/components/DemoPhone/DemoPhone';
@@ -114,7 +112,6 @@ export function AppPanel(phone: DemoLogicPhoneSlice) {
 
   return (
     <section className={styles.panel}>
-      <PanelHeader icon={<IconPhoneDynamicIsland size={20} />} title="App" />
       <div className={styles.body}>
         <div className={styles.phoneStage}>
           <DotGridCanvas glassConfig={PHONE_SHELL_GLASS}>
diff --git a/components/grid-wallet-demo/src/components/AuthMethodPicker/AuthMethodPicker.module.scss b/components/grid-wallet-demo/src/components/AuthMethodPicker/AuthMethodPicker.module.scss
index f81ef324..7c88fb97 100644
--- a/components/grid-wallet-demo/src/components/AuthMethodPicker/AuthMethodPicker.module.scss
+++ b/components/grid-wallet-demo/src/components/AuthMethodPicker/AuthMethodPicker.module.scss
@@ -3,16 +3,29 @@
 
 .group {
   corner-shape: var(--corner-shape);
+  /* Single source for the tile surface — press states mix from it, and the
+     wide layout steps it down to sit on the chrome-gray panel. */
+  --tile-bg: var(--surface-base);
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   width: 100%;
-  background: var(--surface-base);
+  background: var(--tile-bg);
   border: var(--stroke-xs) solid var(--border-primary);
   border-radius: var(--corner-radius-md);
   overflow: clip;
+  // The tile surface steps down side-by-side — glide it across the crossing.
+  transition: background-color 240ms cubic-bezier(0.19, 1, 0.22, 1);
 
   :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
+    --tile-bg: var(--color-gray-925);
+  }
+
+  @media (min-width: $breakpoint-layout-wide) {
+    --tile-bg: var(--surface-primary);
+
+    :global([data-theme='dark']) & {
+      --tile-bg: var(--color-gray-950);
+    }
   }
 }
 
@@ -24,16 +37,12 @@
   gap: var(--spacing-sm);
   min-width: 0;
   padding: var(--spacing-md);
-  background: var(--surface-base);
+  background: var(--tile-bg);
   border-bottom: var(--stroke-xs) solid var(--border-primary);
   overflow: clip;
   cursor: pointer;
   transition: background 100ms ease;
 
-  :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
-  }
-
   &:nth-child(odd) {
     border-right: var(--stroke-xs) solid var(--border-primary);
   }
@@ -54,7 +63,7 @@
   // Hover only with a real pointer — avoids the fill sticking after a tap on touch.
   @media (hover: hover) {
     &:not(:disabled):hover {
-      background: color-mix(in srgb, var(--surface-base) 98%, black);
+      background: color-mix(in srgb, var(--tile-bg) 98%, black);
 
       :global([data-theme='dark']) & {
         background: var(--color-alpha-white-04);
@@ -64,7 +73,7 @@
 
   // Tap/press feedback — works on touch and resets on release (unlike :hover).
   &:not(:disabled):active {
-    background: color-mix(in srgb, var(--surface-base) 98%, black);
+    background: color-mix(in srgb, var(--tile-bg) 98%, black);
 
     :global([data-theme='dark']) & {
       background: var(--color-alpha-white-04);
diff --git a/components/grid-wallet-demo/src/components/ConfigurePanel/ConfigurePanel.module.scss b/components/grid-wallet-demo/src/components/ConfigurePanel/ConfigurePanel.module.scss
index b9bf65f9..84d0f744 100644
--- a/components/grid-wallet-demo/src/components/ConfigurePanel/ConfigurePanel.module.scss
+++ b/components/grid-wallet-demo/src/components/ConfigurePanel/ConfigurePanel.module.scss
@@ -1,22 +1,28 @@
 @use '../../styles/breakpoints' as *;
 
 .panel {
-  width: 475px;
+  /* The laptop layout's compact sizing is the default at every breakpoint. */
+  width: $layout-laptop-config-width;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   background: var(--surface-primary);
   border-right: var(--stroke-xs) solid var(--border-primary);
   overflow: hidden;
+  /* The panel wears the chrome gray only side-by-side — glide the color
+     across the stacked ⇄ 3-col crossing instead of snapping. */
+  transition: background-color 240ms cubic-bezier(0.19, 1, 0.22, 1);
 
   :global([data-theme='dark']) & {
     background: var(--color-gray-950);
   }
-}
 
-@include layout-laptop {
-  .panel {
-    width: $layout-laptop-config-width;
+  /* Side-by-side (keyed to the JS layout attribute so the color rides the
+     same clock as the arrangement flip), the configure column wears the
+     docs-chrome gray, matching the API panel. surface-secondary flips with
+     the theme, and this selector outweighs the dark override above. */
+  :global(html:not([data-layout='stacked'])) & {
+    background: var(--surface-secondary);
   }
 }
 
@@ -32,15 +38,11 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-4xl);
+  padding: $layout-laptop-content-padding;
   overflow-y: auto;
   overscroll-behavior: contain;
   min-height: 0;
 
-  @include layout-laptop {
-    padding: $layout-laptop-content-padding;
-  }
-
   // Mobile: tighter 24px padding (32px on top for breathing room under the navbar)
   // + room for the fixed "Explore playground" button. Declared after the base
   // padding so it wins at equal specificity.
@@ -56,10 +58,6 @@
   flex-direction: column;
   gap: var(--spacing-md);
   width: 100%;
-  /* Center in the panel when there's spare room; auto margins collapse to 0 when
-     the content overflows, so it top-aligns and scrolls without clipping (unlike
-     justify-content: center, which would clip the top). */
-  margin-block: auto;
 }
 
 .section {
diff --git a/components/grid-wallet-demo/src/components/FlowPicker/FlowPicker.module.scss b/components/grid-wallet-demo/src/components/FlowPicker/FlowPicker.module.scss
index 9aef3545..e66b0f35 100644
--- a/components/grid-wallet-demo/src/components/FlowPicker/FlowPicker.module.scss
+++ b/components/grid-wallet-demo/src/components/FlowPicker/FlowPicker.module.scss
@@ -1,17 +1,31 @@
 @use '@lightsparkdev/origin/src/tokens/text-styles' as *;
+@use '../../styles/breakpoints' as *;
 
 .group {
   corner-shape: var(--corner-shape);
+  /* Single source for the tile surface — press states mix from it, and the
+     wide layout steps it down to sit on the chrome-gray panel. */
+  --tile-bg: var(--surface-base);
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   width: 100%;
-  background: var(--surface-base);
+  background: var(--tile-bg);
   border: var(--stroke-xs) solid var(--border-primary);
   border-radius: var(--corner-radius-md);
   overflow: clip;
+  // The tile surface steps down side-by-side — glide it across the crossing.
+  transition: background-color 240ms cubic-bezier(0.19, 1, 0.22, 1);
 
   :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
+    --tile-bg: var(--color-gray-925);
+  }
+
+  @media (min-width: $breakpoint-layout-wide) {
+    --tile-bg: var(--surface-primary);
+
+    :global([data-theme='dark']) & {
+      --tile-bg: var(--color-gray-950);
+    }
   }
 }
 
@@ -23,15 +37,11 @@
   gap: var(--spacing-sm);
   min-width: 0;
   padding: var(--spacing-md);
-  background: var(--surface-base);
+  background: var(--tile-bg);
   border-bottom: var(--stroke-xs) solid var(--border-primary);
   cursor: default;
   transition: background 100ms ease;
 
-  :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
-  }
-
   /* Left column of each pair. */
   &:nth-child(odd) {
     border-right: var(--stroke-xs) solid var(--border-primary);
@@ -49,9 +59,9 @@
   // Hover only with a real pointer — avoids the fill sticking after a tap on touch.
   @media (hover: hover) {
     &:hover {
-      // Opaque equivalent of alpha-black-02 on surface-base — transparent tokens
-      // composite differently depending on parent bg (see use case/auth vs flow).
-      background: color-mix(in srgb, var(--surface-base) 98%, black);
+      // Opaque equivalent of alpha-black-02 on the tile surface — transparent
+      // tokens composite differently depending on parent bg.
+      background: color-mix(in srgb, var(--tile-bg) 98%, black);
 
       :global([data-theme='dark']) & {
         background: var(--color-alpha-white-04);
@@ -61,7 +71,7 @@
 
   // Tap/press feedback — works on touch and resets on release (unlike :hover).
   &:active {
-    background: color-mix(in srgb, var(--surface-base) 98%, black);
+    background: color-mix(in srgb, var(--tile-bg) 98%, black);
 
     :global([data-theme='dark']) & {
       background: var(--color-alpha-white-04);
diff --git a/components/grid-wallet-demo/src/components/UseCasePicker/UseCasePicker.module.scss b/components/grid-wallet-demo/src/components/UseCasePicker/UseCasePicker.module.scss
index de8c01c5..69f3ea92 100644
--- a/components/grid-wallet-demo/src/components/UseCasePicker/UseCasePicker.module.scss
+++ b/components/grid-wallet-demo/src/components/UseCasePicker/UseCasePicker.module.scss
@@ -13,18 +13,31 @@ $ease-out-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
 
 .group {
   corner-shape: var(--corner-shape);
+  /* Single source for the tile surface — press states mix from it, and the
+     wide layout steps it down to sit on the chrome-gray panel. */
+  --tile-bg: var(--surface-base);
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   width: 100%;
-  background: var(--surface-base);
+  background: var(--tile-bg);
   border: var(--stroke-xs) solid var(--border-primary);
   border-radius: var(--corner-radius-md);
   // Ring extends past cell bounds (and morphs across cells during layout animation).
   overflow: visible;
+  // The tile surface steps down side-by-side — glide it across the crossing.
+  transition: background-color 240ms cubic-bezier(0.19, 1, 0.22, 1);
 
   :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
+    --tile-bg: var(--color-gray-925);
+  }
+
+  @media (min-width: $breakpoint-layout-wide) {
+    --tile-bg: var(--surface-primary);
+
+    :global([data-theme='dark']) & {
+      --tile-bg: var(--color-gray-950);
+    }
   }
 }
 
@@ -37,16 +50,12 @@ $ease-out-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
   align-items: center;
   min-width: 0;
   padding: var(--spacing-md);
-  background: var(--surface-base);
+  background: var(--tile-bg);
   border-bottom: var(--stroke-xs) solid var(--border-primary);
   overflow: visible;
   cursor: pointer;
   transition: background 100ms ease;
 
-  :global([data-theme='dark']) & {
-    background: var(--color-gray-925);
-  }
-
   &:nth-child(odd) {
     border-right: var(--stroke-xs) solid var(--border-primary);
   }
@@ -84,7 +93,7 @@ $ease-out-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
   // tap on touch (mobile emulates :hover until you tap elsewhere).
   @media (hover: hover) {
     &:not(:disabled):not(.cardSelected):hover {
-      background: color-mix(in srgb, var(--surface-base) 98%, black);
+      background: color-mix(in srgb, var(--tile-bg) 98%, black);
 
       :global([data-theme='dark']) & {
         background: var(--color-alpha-white-04);
@@ -95,7 +104,7 @@ $ease-out-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
   // Tap/press feedback — applies on touch too and resets on release (unlike
   // :hover, which sticks after a tap). Same fill as the hover state.
   &:not(:disabled):not(.cardSelected):active {
-    background: color-mix(in srgb, var(--surface-base) 98%, black);
+    background: color-mix(in srgb, var(--tile-bg) 98%, black);
 
     :global([data-theme='dark']) & {
       background: var(--color-alpha-white-04);
diff --git a/components/grid-wallet-demo/src/components/glass-gl/StageGL.tsx b/components/grid-wallet-demo/src/components/glass-gl/StageGL.tsx
index c3d6712a..32b77bce 100644
--- a/components/grid-wallet-demo/src/components/glass-gl/StageGL.tsx
+++ b/components/grid-wallet-demo/src/components/glass-gl/StageGL.tsx
@@ -769,6 +769,9 @@ export const StageGL = forwardRef<StageGLHandle, StageGLProps>(function StageGL(
       // static dot field can show immediately.
       paintBootFrame();
       ro = new ResizeObserver(() => {
+        // The palette is media-query-dependent (the light stage color changes
+        // at the wide breakpoint), so a resize can change it too.
+        palette = readDotGridPalette(offCtx);
         markResize();
         lastRadius = NaN;
         invalidate(true);
diff --git a/components/grid-wallet-demo/src/hooks/useColumnResize.ts b/components/grid-wallet-demo/src/hooks/useColumnResize.ts
index 32dcdc39..93880726 100644
--- a/components/grid-wallet-demo/src/hooks/useColumnResize.ts
+++ b/components/grid-wallet-demo/src/hooks/useColumnResize.ts
@@ -1,75 +1,150 @@
 'use client';
 
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { CONFIGURE_COL_PX } from '@/lib/layout';
 
-const CONFIGURE_WIDTH = 475;
 const MIN_APP = 320;
-// Never resize the API column below its default/snap width (= the configure
-// column width); dragging only widens it from there.
-const MIN_API = CONFIGURE_WIDTH;
+// Never resize the API column below the configure column width; dragging only
+// widens it from there.
+const MIN_API = CONFIGURE_COL_PX;
+// The DEFAULT width + snap target: the docs sidebar plus the configure column —
+// the combined chrome flanking the embedded playground. Standalone (and until
+// the docs parent reports in) this assumes the expanded sidebar: 280px
+// (--ls-sidebar-width) + 400 = 680 = $layout-laptop-api-content-max-width.
+// Embedded, the docs page posts `nav-sync` with the live sidebar width (48px
+// rail when collapsed, drag-resized values too) and the default follows.
+// Dragging can still grow the panel freely up to (middle − MIN_APP).
+const DOCS_SIDEBAR_DEFAULT = 280;
 const SNAP_THRESHOLD = 28;
 
-/** Default + snap target — matches configure column width. */
-export const API_DEFAULT_WIDTH = CONFIGURE_WIDTH;
+/** Standalone fallback — the embed overrides it via the ?nav URL param.
+ *  Kept in sync with the --api-col-default fallback in page.module.scss. */
+export const API_DEFAULT_WIDTH = DOCS_SIDEBAR_DEFAULT + CONFIGURE_COL_PX;
 
-function clampApiWidth(width: number, totalMiddle: number): number {
-  return Math.max(MIN_API, Math.min(totalMiddle - MIN_APP, width));
+/** The embed bakes the live sidebar width into the iframe URL so the very
+ *  first paint uses the real default: the pre-paint script in layout.tsx
+ *  turns it into the --api-col-default CSS var (which styles the column
+ *  until React takes over below), and this seeds the same value into state
+ *  so the JS width agrees with that paint instead of re-fitting to the
+ *  expanded-sidebar assumption a beat later. */
+function initialDefaultApi(): number {
+  if (typeof window === 'undefined') return API_DEFAULT_WIDTH;
+  const nav = parseFloat(new URLSearchParams(window.location.search).get('nav') ?? '');
+  return Number.isFinite(nav) && nav >= 0 ? Math.round(nav) + CONFIGURE_COL_PX : API_DEFAULT_WIDTH;
 }
 
-function snapApiWidth(width: number, totalMiddle: number): number {
-  const target = clampApiWidth(API_DEFAULT_WIDTH, totalMiddle);
-  if (Math.abs(width - target) <= SNAP_THRESHOLD) return target;
-  return width;
+function clampApiWidth(width: number, totalMiddle: number): number {
+  return Math.max(MIN_API, Math.min(totalMiddle - MIN_APP, width));
 }
 
 export function useColumnResize() {
   const layoutRef = useRef<HTMLElement>(null);
   const apiColRef = useRef<HTMLDivElement>(null);
-  const [apiWidth, setApiWidth] = useState(API_DEFAULT_WIDTH);
+  const [defaultApi, setDefaultApi] = useState(initialDefaultApi);
+  // null until the post-hydration measure: SSR and the hydration render emit
+  // NO inline width, leaving the stylesheet's var(--api-col-default) in
+  // charge — which the pre-paint script already set to the true default. An
+  // inline SSR width would paint the wrong column for the whole JS load.
+  const [apiWidth, setApiWidth] = useState<number | null>(null);
+  // True while the user drags the divider — the column's width transition is
+  // disabled so the drag tracks the pointer 1:1 (it only eases programmatic
+  // changes, e.g. the default following a docs-sidebar collapse).
+  const [resizing, setResizing] = useState(false);
+  // While the column sits at the default, window resizes (and nav-sync
+  // updates) keep it there. A custom drag pins it to a px width until the
+  // user snaps it back to the default.
+  const userResized = useRef(false);
+
+  // Embed contract (same shape as theme-sync): the docs page reports its
+  // sidebar width on request and whenever it changes (collapse / drag-resize).
+  //
+  // A nav-driven width change EASES (the glide that runs in parallel with the
+  // docs sidebar wipe); everything else — drags, window resizes, breakpoint
+  // flips — snaps. The ease is opted into per-message via data-easing rather
+  // than an always-on transition, and only when the column is already painted
+  // at its tracked inline width (i.e. the row layout is settled). That guard
+  // is load-bearing: the embed re-sends nav-sync every frame of the sidebar
+  // wipe, and once the growing iframe crosses the breakpoint those messages
+  // race the stacked → wide flip. If the transition arms during the flip's
+  // style recalc, it starts from the STACKED computed width — 100% of the
+  // row — and the column spends 240ms nearly full-width, crushing the app
+  // column to zero (the phone blinks out).
+  const easeTimer = useRef(0);
+  useEffect(() => {
+    const onMessage = (e: MessageEvent) => {
+      if (!e.data || e.data.type !== 'nav-sync' || typeof e.data.sidebarWidth !== 'number') return;
+      const el = apiColRef.current;
+      if (el && Math.abs(el.getBoundingClientRect().width - parseFloat(el.style.width)) < 2) {
+        el.setAttribute('data-easing', '');
+        window.clearTimeout(easeTimer.current);
+        easeTimer.current = window.setTimeout(() => el.removeAttribute('data-easing'), 300);
+      }
+      setDefaultApi(Math.round(e.data.sidebarWidth) + CONFIGURE_COL_PX);
+    };
+    window.addEventListener('message', onMessage);
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage({ type: 'nav-request' }, '*');
+    }
+    return () => {
+      window.removeEventListener('message', onMessage);
+      window.clearTimeout(easeTimer.current);
+    };
+  }, []);
 
   useLayoutEffect(() => {
-    const clampToLayout = () => {
+    const fitToLayout = () => {
       const layout = layoutRef.current;
       if (!layout) return;
-      const totalMiddle = layout.getBoundingClientRect().width - CONFIGURE_WIDTH;
-      setApiWidth((w) => clampApiWidth(w, totalMiddle));
+      const totalMiddle = layout.getBoundingClientRect().width - CONFIGURE_COL_PX;
+      setApiWidth((w) =>
+        clampApiWidth(userResized.current && w !== null ? w : defaultApi, totalMiddle),
+      );
     };
 
-    clampToLayout();
-    window.addEventListener('resize', clampToLayout);
-    return () => window.removeEventListener('resize', clampToLayout);
-  }, []);
+    fitToLayout();
+    window.addEventListener('resize', fitToLayout);
+    return () => window.removeEventListener('resize', fitToLayout);
+  }, [defaultApi]);
 
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    const startX = e.clientX;
-    const startApiWidth = apiColRef.current?.getBoundingClientRect().width ?? API_DEFAULT_WIDTH;
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startApiWidth = apiColRef.current?.getBoundingClientRect().width ?? defaultApi;
 
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      setResizing(true);
 
-    const applyWidth = (clientX: number) => {
-      const layout = layoutRef.current;
-      if (!layout) return;
-      const totalMiddle = layout.getBoundingClientRect().width - CONFIGURE_WIDTH;
-      const delta = clientX - startX;
-      const raw = clampApiWidth(startApiWidth - delta, totalMiddle);
-      setApiWidth(snapApiWidth(raw, totalMiddle));
-    };
+      const applyWidth = (clientX: number) => {
+        const layout = layoutRef.current;
+        if (!layout) return;
+        const totalMiddle = layout.getBoundingClientRect().width - CONFIGURE_COL_PX;
+        const delta = clientX - startX;
+        const raw = clampApiWidth(startApiWidth - delta, totalMiddle);
+        const target = clampApiWidth(defaultApi, totalMiddle);
+        const snapped = Math.abs(raw - target) <= SNAP_THRESHOLD ? target : raw;
+        // Snapping back to the default resumes default tracking on resize.
+        userResized.current = snapped !== target;
+        setApiWidth(snapped);
+      };
 
-    const onMove = (ev: MouseEvent) => applyWidth(ev.clientX);
+      const onMove = (ev: MouseEvent) => applyWidth(ev.clientX);
 
-    const onUp = (ev: MouseEvent) => {
-      applyWidth(ev.clientX);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
+      const onUp = (ev: MouseEvent) => {
+        applyWidth(ev.clientX);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        setResizing(false);
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+      };
 
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }, []);
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    },
+    [defaultApi],
+  );
 
-  return { layoutRef, apiColRef, apiWidth, onResizeStart };
+  return { layoutRef, apiColRef, apiWidth, resizing, onResizeStart };
 }
diff --git a/components/grid-wallet-demo/src/lib/layout.ts b/components/grid-wallet-demo/src/lib/layout.ts
new file mode 100644
index 00000000..7263ff44
--- /dev/null
+++ b/components/grid-wallet-demo/src/lib/layout.ts
@@ -0,0 +1,10 @@
+/** Playground layout constants shared by the pre-paint boot script
+ *  (layout.tsx), the live listeners (page.tsx, useColumnResize), and —
+ *  by convention, since SCSS can't import TS — the stylesheet twins in
+ *  styles/breakpoints.scss. Change them together. */
+
+/** Stacked ⇄ 3-col threshold. Twin: $breakpoint-layout-wide. */
+export const LAYOUT_WIDE_PX = 1600;
+
+/** Configure column width. Twin: $layout-laptop-config-width. */
+export const CONFIGURE_COL_PX = 400;
diff --git a/components/grid-wallet-demo/src/styles/breakpoints.scss b/components/grid-wallet-demo/src/styles/breakpoints.scss
index 603a6df4..b7bad8ae 100644
--- a/components/grid-wallet-demo/src/styles/breakpoints.scss
+++ b/components/grid-wallet-demo/src/styles/breakpoints.scss
@@ -1,15 +1,17 @@
 /** App + API side-by-side inside the right column. Above this the layout is 3
-    columns: Configure (475) | App (phone) | API (475 default), so the App column
-    is roughly (viewport − 950). The phone needs ~466px (434 shell + 16px inset
-    each side) to render full size, i.e. ~1416px of viewport; below that the App
-    column squeezes the phone tiny. Stack at 1440px so the phone never shrinks
-    before App + API stack vertically (each full-width). Tune to taste. */
-$breakpoint-layout-wide: 1440px;
+    columns: Configure (400) | App | API. The phone needs ~466px (434 shell +
+    16px inset each side) to render full size, and the API column defaults to
+    680 — below ~1600 the 3-col reads cramped (a MacBook Pro 16" at 1728 with
+    the docs sidebar expanded gives the embed 1448, which should stack; with
+    the sidebar collapsed it gets 1680, which fits 3-col comfortably).
+    TS twin: LAYOUT_WIDE_PX in lib/layout.ts — change them together. */
+$breakpoint-layout-wide: 1600px;
 
 /** Configure stacks above app + API (phone). */
 $breakpoint-layout-mobile: 767px;
 
-/** Configure left, app over API on the right (between mobile and wide). */
+/** Configure left, app over API on the right (between mobile and wide).
+    TS twin: CONFIGURE_COL_PX in lib/layout.ts — change them together. */
 $layout-laptop-config-width: 400px;
 $layout-laptop-content-padding: 40px;
 $layout-laptop-api-content-max-width: 680px;
diff --git a/mintlify/snippets/global-accounts/wallet-demo-embed.mdx b/mintlify/snippets/global-accounts/wallet-demo-embed.mdx
index ebb52722..4bdd6273 100644
--- a/mintlify/snippets/global-accounts/wallet-demo-embed.mdx
+++ b/mintlify/snippets/global-accounts/wallet-demo-embed.mdx
@@ -4,6 +4,14 @@ export const WalletDemoEmbed = () => {
     const base = isLocal ? 'http://localhost:4000' : 'https://grid-wallet-demo.vercel.app';
     const isDark = () => document.documentElement.classList.contains('dark');
 
+    const navWidth = () => {
+      const root = document.documentElement;
+      const collapsed = root.classList.contains('ls-nav-collapsed');
+      const cs = getComputedStyle(root);
+      const v = parseFloat(cs.getPropertyValue(collapsed ? '--ls-nav-rail-w' : '--ls-sidebar-width'));
+      return Number.isFinite(v) ? v : (collapsed ? 48 : 280);
+    };
+
     let host = document.getElementById('wallet-demo-host');
     if (!host) {
       host = document.createElement('div');
@@ -11,7 +19,7 @@ export const WalletDemoEmbed = () => {
       host.style.cssText = 'position:fixed;z-index:1;overflow:hidden;';
       const iframe = document.createElement('iframe');
       iframe.id = 'wallet-demo-iframe';
-      iframe.src = base + '/?embed=true&theme=' + (isDark() ? 'dark' : 'light');
+      iframe.src = base + '/?embed=true&theme=' + (isDark() ? 'dark' : 'light') + '&nav=' + navWidth();
       iframe.title = 'Grid Global Accounts — live demo';
       iframe.setAttribute('allow', 'publickey-credentials-create *; publickey-credentials-get *; clipboard-write');
       iframe.style.cssText = 'width:100%;height:100%;border:0;display:block;';
@@ -20,6 +28,12 @@ export const WalletDemoEmbed = () => {
     }
     if (window.__wdHideTimer) { clearTimeout(window.__wdHideTimer); window.__wdHideTimer = null; }
     host.style.display = 'block';
+    const sendNav = () => {
+      const iframe = document.getElementById('wallet-demo-iframe');
+      if (iframe && iframe.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'nav-sync', sidebarWidth: navWidth() }, '*');
+      }
+    };
 
     let raf = 0;
     let last = { left: -1, top: -1, width: -1, height: -1 };
@@ -33,6 +47,7 @@ export const WalletDemoEmbed = () => {
           host.style.width = r.width + 'px';
           host.style.height = r.height + 'px';
           last = { left: r.left, top: r.top, width: r.width, height: r.height };
+          sendNav();
         }
       }
       raf = requestAnimationFrame(sync);
@@ -53,6 +68,10 @@ export const WalletDemoEmbed = () => {
         sendTheme();
         return;
       }
+      if (e.data && e.data.type === 'nav-request') {
+        sendNav();
+        return;
+      }
       if (e.data && e.data.type === 'theme-sync') {
         const wantsDark = e.data.theme === 'dark';
         if (isDark() !== wantsDark) {
@@ -64,12 +83,14 @@ export const WalletDemoEmbed = () => {
     window.addEventListener('message', handleMessage);
 
     const obs = new MutationObserver(() => {
+      sendNav();
       if (ignoreNextMutation) { ignoreNextMutation = false; return; }
       sendTheme();
     });
     obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 
     sendTheme();
+    sendNav();
     requestAnimationFrame(sendTheme);
 
     return () => {