From f40f32a50a2b49ec8a2c7bdc0ffd199e3db050c5 Mon Sep 17 00:00:00 2001
From: leo <leo@lightspark.com>
Date: Thu, 28 May 2026 14:05:02 -0700
Subject: [PATCH] Add Global Accounts interactive demo ("See it live")
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Interactive, embeddable wallet demo for the Grid docs — the neobank analog of
the Flow Builder. New standalone Next.js app (components/grid-wallet-demo) that
the docs embed in an iframe with light/dark theme sync, mirroring how
grid-visualizer powers /flow-builder.

- Same shell + design system as the Flow Builder (@lightsparkdev/origin,
  sidebar + canvas + CodePanel-style API log, central-icons, squircle).
- Playground model: pick a use case + sign-in method, then drive a real wallet
  on a phone (create account, add money, send, cash out, issue a card, tap to
  pay) by clicking the phone itself; the exact Grid API calls render alongside.
- Phone wallet adapted from the bread neobank app; Robinhood-style glass card
  with a cinematic reveal.
- Scripted happy path (no live sandbox calls), like the Flow Builder.

Docs wiring (mintlify/): new global-accounts/demo.mdx ("See it live", under
Introduction), docs.json nav + chrome-hide CSS, style.css full-bleed iframe.

Deployment + designer handoff notes in components/grid-wallet-demo/HANDOFF.md.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 components/grid-wallet-demo/.gitignore        |    8 +
 components/grid-wallet-demo/HANDOFF.md        |  164 +++
 components/grid-wallet-demo/README.md         |   52 +
 components/grid-wallet-demo/next.config.mjs   |   47 +
 components/grid-wallet-demo/package-lock.json | 1230 +++++++++++++++++
 components/grid-wallet-demo/package.json      |   28 +
 .../grid-wallet-demo/src/app/globals.scss     |   73 +
 .../grid-wallet-demo/src/app/layout.tsx       |   35 +
 .../grid-wallet-demo/src/app/page.module.scss |  142 ++
 components/grid-wallet-demo/src/app/page.tsx  |  158 +++
 .../src/components/ApiSteps.module.scss       |  200 +++
 .../src/components/ApiSteps.tsx               |  159 +++
 .../src/components/Footer.module.scss         |  153 ++
 .../src/components/Footer.tsx                 |   59 +
 .../src/components/GridWordmark.tsx           |   23 +
 .../src/components/Header.module.scss         |   47 +
 .../src/components/Header.tsx                 |   16 +
 .../src/components/LightsparkWordmark.tsx     |   28 +
 .../src/components/Phone.module.scss          |  753 ++++++++++
 .../grid-wallet-demo/src/components/Phone.tsx |  583 ++++++++
 .../src/components/Sidebar.module.scss        |  291 ++++
 .../src/components/Sidebar.tsx                |  161 +++
 .../grid-wallet-demo/src/data/actions.ts      |  295 ++++
 components/grid-wallet-demo/src/data/flow.ts  |  139 ++
 .../grid-wallet-demo/src/hooks/useTheme.ts    |   74 +
 components/grid-wallet-demo/tsconfig.json     |   27 +
 mintlify/docs.json                            |    3 +-
 mintlify/global-accounts/demo.mdx             |   70 +
 mintlify/style.css                            |   61 +
 29 files changed, 5078 insertions(+), 1 deletion(-)
 create mode 100644 components/grid-wallet-demo/.gitignore
 create mode 100644 components/grid-wallet-demo/HANDOFF.md
 create mode 100644 components/grid-wallet-demo/README.md
 create mode 100644 components/grid-wallet-demo/next.config.mjs
 create mode 100644 components/grid-wallet-demo/package-lock.json
 create mode 100644 components/grid-wallet-demo/package.json
 create mode 100644 components/grid-wallet-demo/src/app/globals.scss
 create mode 100644 components/grid-wallet-demo/src/app/layout.tsx
 create mode 100644 components/grid-wallet-demo/src/app/page.module.scss
 create mode 100644 components/grid-wallet-demo/src/app/page.tsx
 create mode 100644 components/grid-wallet-demo/src/components/ApiSteps.module.scss
 create mode 100644 components/grid-wallet-demo/src/components/ApiSteps.tsx
 create mode 100644 components/grid-wallet-demo/src/components/Footer.module.scss
 create mode 100644 components/grid-wallet-demo/src/components/Footer.tsx
 create mode 100644 components/grid-wallet-demo/src/components/GridWordmark.tsx
 create mode 100644 components/grid-wallet-demo/src/components/Header.module.scss
 create mode 100644 components/grid-wallet-demo/src/components/Header.tsx
 create mode 100644 components/grid-wallet-demo/src/components/LightsparkWordmark.tsx
 create mode 100644 components/grid-wallet-demo/src/components/Phone.module.scss
 create mode 100644 components/grid-wallet-demo/src/components/Phone.tsx
 create mode 100644 components/grid-wallet-demo/src/components/Sidebar.module.scss
 create mode 100644 components/grid-wallet-demo/src/components/Sidebar.tsx
 create mode 100644 components/grid-wallet-demo/src/data/actions.ts
 create mode 100644 components/grid-wallet-demo/src/data/flow.ts
 create mode 100644 components/grid-wallet-demo/src/hooks/useTheme.ts
 create mode 100644 components/grid-wallet-demo/tsconfig.json
 create mode 100644 mintlify/global-accounts/demo.mdx

diff --git a/components/grid-wallet-demo/.gitignore b/components/grid-wallet-demo/.gitignore
new file mode 100644
index 00000000..17d07bc7
--- /dev/null
+++ b/components/grid-wallet-demo/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+.next/
+out/
+.vercel/
+*.tsbuildinfo
+next-env.d.ts
+.env*.local
+.DS_Store
diff --git a/components/grid-wallet-demo/HANDOFF.md b/components/grid-wallet-demo/HANDOFF.md
new file mode 100644
index 00000000..f089ace7
--- /dev/null
+++ b/components/grid-wallet-demo/HANDOFF.md
@@ -0,0 +1,164 @@
+# Grid Wallet Demo — design handoff
+
+A first, working pass at an **interactive Global Accounts demo** for the Grid docs — the
+neobank/wallet analog of the Flow Builder. It's built to be perfected by design, not shipped as-is.
+
+This doc is the context dump: what it is, how it's wired, every design decision + where the
+inspiration came from, what's faked, and the specific places that want a designer's eye.
+
+---
+
+## What it is
+
+An embedded, clickable demo that lives at **`docs.lightspark.com/global-accounts/demo`**
+("See it live", directly under *Introduction*). A visitor:
+
+1. Picks a **use case** (Fintech/Neobank live; Social + Marketplace stubbed "Soon").
+2. Picks a **sign-in method** (Passkey / Google / Apple / Email / Phone).
+3. **Drives a real wallet on a phone** — create account, add money, send, cash out, issue a card,
+   tap to pay — in any valid order.
+4. Watches the **exact Grid API calls** fire in a panel beside the phone, in sync.
+
+Goal: a sales- and developer-facing "this is how easy it is" artifact. The phone is the magic;
+the API panel is the proof.
+
+---
+
+## How it's wired (mirrors the Flow Builder exactly)
+
+The Flow Builder (`components/grid-visualizer` → `grid-flow-builder.vercel.app`) is a standalone
+Next.js app that the docs page embeds in an `<iframe>` with light/dark theme sync over
+`postMessage`. **This app is the same pattern, same shell, same design system.**
+
+- **Stack:** Next.js 14 (App Router), React 18, TypeScript, SCSS modules.
+- **Design system:** `@lightsparkdev/origin` tokens + text-style mixins — identical to
+  `grid-visualizer`. Same `sidebar (475px) + right panel`, same `Header`/`Footer`, same
+  `EmptyCanvas` dotted background, same `CodePanel`-style numbered code blocks with GitHub-style
+  syntax highlighting, squircle corners.
+- **Icons:** `@central-icons-react/round-outlined-radius-3-stroke-1.5` (the variant the
+  `central-icons.mdc` cursor rule mandates).
+- **Embed contract:** `?embed=true` hides the standalone chrome; `?theme=light|dark` sets initial
+  theme; child posts `theme-request` on load, parent replies + pushes `theme-sync` on toggle.
+  Copied verbatim from `flow-builder.mdx`.
+
+### Docs integration (3 files in `mintlify/`)
+- `global-accounts/demo.mdx` — the page (`mode: "custom"`), an iframe + theme-sync component, a
+  `#wallet-demo-container` wrapper. **Auto-targets `localhost:4000` when the docs run locally**,
+  else `https://grid-wallet-demo.vercel.app`.
+- `docs.json` — nav entry `"global-accounts/demo"` under Overview (after `index`), plus the
+  chrome-hide `<style>` for `#wallet-demo-container` (mirrors the flow-builder rules).
+- `style.css` — full-bleed iframe sizing for `#wallet-demo-container` (copied from the
+  `#flow-builder-container` block).
+
+---
+
+## Where things live
+
+```
+components/grid-wallet-demo/
+├── src/app/
+│   ├── page.tsx            # Orchestrator: state machine + action runner (timers/frames)
+│   ├── page.module.scss    # Layout: sidebar + right panel (canvas + API dock)
+│   ├── globals.scss        # Origin token imports + the phone (--p-*) palette
+│   └── layout.tsx          # embed/theme bootstrap script
+├── src/components/
+│   ├── Header.tsx          # "Global Accounts" title + description (Origin)
+│   ├── Footer.tsx          # theme toggle + (0,0,0) coords + links — copied from grid-visualizer
+│   ├── LightsparkWordmark.tsx / GridWordmark.tsx
+│   ├── Sidebar.tsx         # use-case cards, sign-in chips, "Explore actions" disclosure
+│   ├── Phone.tsx           # the whole iPhone mock + all screens + the icon set  ← most of the design
+│   ├── Phone.module.scss   # phone styling (bread-derived)                       ← most of the design
+│   └── ApiSteps.tsx        # the CodePanel-style live API log
+├── src/hooks/useTheme.ts   # theme + postMessage contract
+├── src/data/
+│   ├── flow.ts             # types, auth methods, credential API-call shapes
+│   └── actions.ts          # the playground model: actions, wallet state, API calls per action
+└── README.md / HANDOFF.md
+```
+
+**90% of the design lives in `Phone.tsx` + `Phone.module.scss`.** Sidebar/canvas/API panel are
+already Origin-faithful; the phone is where craft pays off.
+
+---
+
+## Design decisions + sources
+
+- **Sidebar / canvas / API panel** = 1:1 with the Flow Builder (Origin). Use-case + action cards
+  reuse the `InputCard` treatment (icon box + label + hint), shrunk so more verticals fit. Actions
+  are hidden behind an "Explore actions" disclosure that extends downward (sidebar is top-aligned
+  so it doesn't reflow).
+- **The phone wallet ("Aurora")** is adapted from the **`bread` neobank app**
+  (`/Users/leo/Coding/sparkapp/react-native-app`). Tokens taken from its `theme.ts`: black bg,
+  `#141414` cards, `#22C55E` green, iOS type scale, 26px continuous radii. The balance block
+  ("Total Balance" + 42px rounded number + green "Today" delta chip + bar-chart sparkline) mirrors
+  bread's `WalletBalanceCard`.
+- **The card** is a Robinhood-style **dark glass/metal** card with a blue glow beam, diagonal
+  sheen, metallic chip, embossed monogram — `backdrop-blur`, no plastic gradient.
+- **Card issuing** is a cinematic **reveal**: the card rises/scales in from below over a blue
+  light beam, "Your card is ready" fades in, then it settles into the wallet.
+- **Interactivity:** you drive everything by **clicking the phone itself** (Continue with X → Add →
+  Send → Get a card → Tap to pay). Sidebar action cards mirror the same handlers. Actions
+  enable/disable on prerequisites (Send/Cash out are dead until funded) and "done" actions check.
+- **iPhone frame:** titanium bezel + side buttons + screen inset (reads as a device, not a
+  template). The device auto-scales to fit any canvas height.
+
+---
+
+## What's faked / scripted (important)
+
+This is a **scripted happy path**, exactly like the Flow Builder generates calls without executing
+them. Nothing hits a real sandbox.
+
+- API calls in the right panel are **illustrative** (realistic shapes/paths/bodies from the example
+  app + Implementation Overview, but static). If we want them *live* against sandbox, that's a
+  follow-up — see `src/data/actions.ts` where each action's `calls[]` are defined.
+- Auth credential screens (OTP boxes, Face ID, Google/Apple sheets) **auto-play** — they animate
+  and advance; the 6-digit entry isn't really interactive.
+- Numbers are fixed: Add = $5,000, Send = $250, Withdraw = $200, Coffee = $7.32.
+- Personas Social/Marketplace are **"Soon"** stubs (branding only: `BRAND` in `Phone.tsx`).
+
+---
+
+## Run it
+
+```bash
+cd components/grid-wallet-demo
+npm install --ignore-scripts      # --ignore-scripts avoids a central-icons license postinstall
+npm run dev                        # http://localhost:4000  (port is pinned)
+#   light/dark embed preview:
+#   http://localhost:4000/?embed=true&theme=light   (and &theme=dark)
+```
+
+Preview the **docs page** locally (optional): run the app on :4000, then `make mint` in
+`grid-api/mintlify` (needs Node 22 + Mintlify 4.2.284). The page auto-points at `localhost:4000`.
+Honestly, `localhost:4000` *is* the real experience — the docs page is just a frame around it.
+
+---
+
+## Deployment (one-time, not done yet)
+
+The iframe points at `grid-wallet-demo.vercel.app`. Someone with Vercel access needs to create a
+project from `components/grid-wallet-demo` (root dir set accordingly), build `npm run build`,
+install with `--ignore-scripts` (same workaround grid-visualizer uses for the icon license). The
+docs page goes live the moment that deploy exists. If a different URL is preferred, change one
+string in `mintlify/global-accounts/demo.mdx`.
+
+---
+
+## Where a designer should focus (my wishlist for you)
+
+1. **The phone, screen by screen** — `Phone.tsx` / `Phone.module.scss`. Spacing, type, the balance
+   block, the action row, the activity rows. Closer bread parity (e.g. the 2×2 asset grid, real
+   delta/chart treatment).
+2. **The card art** — monogram, "Debit" label, glow/sheen intensity, maybe a per-persona colorway.
+   Optional parallax/tilt on hover, pulsing glow.
+3. **The reveal** — timing/easing of the rise + beam, the "ready" copy, a subtle haptic-style flash.
+4. **Auth credential screens** — make them feel native per method (the Face ID / Google / Apple /
+   OTP sheets are functional but basic).
+5. **Per-persona theming** — when Social/Marketplace go live, each should reskin the phone (brand
+   mark, accent, copy) — wiring is in `BRAND` (Phone.tsx) + `PERSONAS` (Sidebar.tsx).
+6. **Empty/edge states**, motion polish on screen transitions, and light-mode review (docs default
+   is light).
+
+Open questions for product/eng: do we want the API calls **live against sandbox**? Do we keep the
+fixed demo amounts or let the user pick? Which personas next (messaging, creator economy)?
diff --git a/components/grid-wallet-demo/README.md b/components/grid-wallet-demo/README.md
new file mode 100644
index 00000000..8cff4fb4
--- /dev/null
+++ b/components/grid-wallet-demo/README.md
@@ -0,0 +1,52 @@
+# Grid Wallet Demo
+
+Interactive demo of the **Grid Global Accounts** wallet lifecycle, embedded in the Grid docs
+(`docs.lightspark.com/global-accounts/demo`). Built as a sibling to `components/grid-visualizer`
+(the flow builder) and shares its design system and embed contract:
+
+- **Next.js 14 + React 18 + TypeScript**, SCSS modules
+- **`@lightsparkdev/origin`** design tokens + text-style mixins (same as the flow builder)
+- **`@central-icons-react`** (round-outlined, radius-3, stroke-1.5) for chrome icons
+- **`motion`** for transitions
+- Same `sidebar (475px) + right panel` layout, GitHub-style syntax-highlighted code blocks,
+  and squircle corners as `grid-visualizer`
+
+The docs page loads it in an `<iframe>` with light/dark theme sync over `postMessage`, exactly
+like `/flow-builder`. The iPhone mock is a self-contained iOS preview (adapted from the keynote
+phone screens) and keeps its own iOS palette.
+
+A visitor picks a use case (Fintech / Neobank to start) and an auth method (Passkey / OAuth /
+Email OTP), then steps through: create customer → register credential → open account → add money →
+see balance → withdraw → issue card → tap to pay. The right panel shows the exact Grid API calls
+firing at each step.
+
+## Develop
+
+```bash
+npm install
+npm run dev          # runs on a fixed port: http://localhost:4000
+# embed/theme preview:
+#   http://localhost:4000/?embed=true&theme=light
+#   http://localhost:4000/?embed=true&theme=dark
+```
+
+The port is pinned to **4000** so the docs page can reliably embed the local app while you preview
+the Grid docs with `make mint` (the docs page auto-targets `localhost:4000` when served locally).
+
+## Deploy
+
+Deploy to Vercel as its own project (same as `grid-flow-builder`). The docs page iframes the
+deployed URL (default `https://grid-wallet-demo.vercel.app`). If the URL differs, update the
+`src` in `mintlify/global-accounts/demo.mdx`.
+
+## Embed contract
+
+- `?embed=true` → hides nothing extra here but sets `data-embed` for future use.
+- `?theme=light|dark` → initial theme.
+- Parent ↔ iframe `postMessage`: child posts `{ type: 'theme-request' }` on load; parent replies
+  and pushes `{ type: 'theme-sync', theme }` on toggle. Identical to `flow-builder.mdx`.
+
+## Scope
+
+Fintech / Neobank is live. Social and Marketplace personas are stubbed ("Soon") for a future pass.
+The flow is a scripted happy path (like the flow builder) — it does not call a live sandbox.
diff --git a/components/grid-wallet-demo/next.config.mjs b/components/grid-wallet-demo/next.config.mjs
new file mode 100644
index 00000000..25781bfa
--- /dev/null
+++ b/components/grid-wallet-demo/next.config.mjs
@@ -0,0 +1,47 @@
+import * as sass from 'sass';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@lightsparkdev/origin'],
+  typescript: {
+    // Origin is source-linked without its own node_modules,
+    // so its transitive type imports can't resolve from ../origin
+    ignoreBuildErrors: true,
+  },
+  sassOptions: {
+    implementation: sass,
+    importers: [new sass.NodePackageImporter(__dirname)],
+    includePaths: [
+      path.resolve(__dirname, 'node_modules'),
+    ],
+  },
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: "frame-ancestors 'self' https://docs.lightspark.com https://*.lightspark.com https://*.mintlify.app https://*.mintlify.dev http://localhost:*",
+          },
+        ],
+      },
+    ];
+  },
+  webpack: (config) => {
+    // Ensure dependencies imported by the local Origin package
+    // resolve from this project's node_modules
+    config.resolve.modules = [
+      path.resolve(__dirname, 'node_modules'),
+      'node_modules',
+    ];
+
+    return config;
+  },
+};
+
+export default nextConfig;
diff --git a/components/grid-wallet-demo/package-lock.json b/components/grid-wallet-demo/package-lock.json
new file mode 100644
index 00000000..949f8dc2
--- /dev/null
+++ b/components/grid-wallet-demo/package-lock.json
@@ -0,0 +1,1230 @@
+{
+  "name": "grid-wallet-demo",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "grid-wallet-demo",
+      "version": "1.0.0",
+      "dependencies": {
+        "@central-icons-react/round-outlined-radius-3-stroke-1.5": "^1.1.135",
+        "@lightsparkdev/origin": "^0.13.4",
+        "clsx": "^2.1.1",
+        "motion": "^12.33.0",
+        "next": "^14.2.35",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "sass": "^1.97.3"
+      },
+      "devDependencies": {
+        "@types/node": "^22.10.0",
+        "@types/react": "^18.3.28",
+        "@types/react-dom": "^18.3.7",
+        "typescript": "^5.9.3"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@base-ui/react": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.5.0.tgz",
+      "integrity": "sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@base-ui/utils": "0.2.9",
+        "@floating-ui/react-dom": "^2.1.8",
+        "@floating-ui/utils": "^0.2.11",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@date-fns/tz": "^1.2.0",
+        "@types/react": "^17 || ^18 || ^19",
+        "date-fns": "^4.0.0",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@date-fns/tz": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@base-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@floating-ui/utils": "^0.2.11",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17 || ^18 || ^19",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@central-icons-react/round-outlined-radius-3-stroke-1.5": {
+      "version": "1.1.252",
+      "resolved": "https://registry.npmjs.org/@central-icons-react/round-outlined-radius-3-stroke-1.5/-/round-outlined-radius-3-stroke-1.5-1.1.252.tgz",
+      "integrity": "sha512-/NCb8laycDWFl/7pkXN92ujxHtEgdSo85IQgAjOJfrKixocTF2EI/D4wk3bMv5iR15wH91si1wEpwCD+Rm3qRQ==",
+      "hasInstallScript": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "peerDependencies": {
+        "react": ">=14.0.0 <= 19"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
+    "node_modules/@lightsparkdev/origin": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/@lightsparkdev/origin/-/origin-0.13.6.tgz",
+      "integrity": "sha512-XX7W83kFzVgPEtzIZm1I+JeucTf0NbhUll4NxPnM9u2tpV5OYAxlS8d0ItU1tSKgpRhhS8Szp4/J32qJfzOZpw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@base-ui/react": "^1.1.0",
+        "@base-ui/utils": "^0.2.3",
+        "@tanstack/react-table": "^8.21.3",
+        "ajv": "^8.18.0",
+        "clsx": "^2.1.1",
+        "motion": "^12.23.26"
+      },
+      "peerDependencies": {
+        "next": ">=14",
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.19.tgz",
+      "integrity": "sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.29",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.29.tgz",
+      "integrity": "sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001793",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+      "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz",
+      "integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/immutable": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+      "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.40.0.tgz",
+      "integrity": "sha512-yjrHUrBFW6kQvjJwRsoiPSAhC5tRwRqNGJWmiJ4CrGnbKp0V88AdzkhBmDoqIsIPfarOe0Uddd37Xq43/gIocA==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.40.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@next/env": "14.2.35",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.100.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz",
+      "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    }
+  }
+}
diff --git a/components/grid-wallet-demo/package.json b/components/grid-wallet-demo/package.json
new file mode 100644
index 00000000..0ffd2d1f
--- /dev/null
+++ b/components/grid-wallet-demo/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "grid-wallet-demo",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Interactive Grid Global Accounts wallet demo, embedded in the Grid docs.",
+  "scripts": {
+    "dev": "next dev -p 4000",
+    "build": "next build",
+    "start": "next start -p 4000",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@central-icons-react/round-outlined-radius-3-stroke-1.5": "^1.1.135",
+    "@lightsparkdev/origin": "^0.13.4",
+    "clsx": "^2.1.1",
+    "motion": "^12.33.0",
+    "next": "^14.2.35",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.97.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/components/grid-wallet-demo/src/app/globals.scss b/components/grid-wallet-demo/src/app/globals.scss
new file mode 100644
index 00000000..de37275a
--- /dev/null
+++ b/components/grid-wallet-demo/src/app/globals.scss
@@ -0,0 +1,73 @@
+/* Grid Wallet Demo — adopts the Lightspark Origin design system,
+   matching grid-visualizer / flow-builder exactly. */
+
+@use '@lightsparkdev/origin/src/tokens/variables';
+@use '@lightsparkdev/origin/src/tokens/fonts';
+@use '@lightsparkdev/origin/src/tokens/typography';
+@use '@lightsparkdev/origin/src/tokens/effects';
+@use '@lightsparkdev/origin/src/tokens/reset';
+
+* {
+  corner-shape: squircle;
+}
+
+@supports (corner-shape: squircle) {
+  :root {
+    --corner-radius-2xs: 3.6px;
+    --corner-radius-xs: 7.2px;
+    --corner-radius-sm: 10.8px;
+    --corner-radius-md: 14.4px;
+    --corner-radius-lg: 21.6px;
+    --corner-radius-xl: 28.8px;
+    --corner-radius-2xl: 43.2px;
+    --corner-radius-3xl: 57.6px;
+    --corner-radius-4xl: 72px;
+  }
+}
+
+body {
+  background: var(--surface-primary);
+  color: var(--text-primary);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-book);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* iPhone mock palette — the wallet is a self-contained iOS app preview, so it
+   keeps its own iOS tokens (adapted from the keynote phone screens) rather than
+   Origin. These flip with Origin's [data-theme]. */
+/* iPhone palette — adapted 1:1 from the "bread" neobank app (sparkapp). */
+:root {
+  --p-accent: #11a967;
+  --p-accent-press: #0e8f57;
+  /* light variant */
+  --p-bg: #f4f4f5;
+  --p-screen: #ffffff;
+  --p-surface: #f4f4f5;
+  --p-surface-2: #ececee;
+  --p-text: #0a0a0a;
+  --p-text-2: #707070;
+  --p-text-3: #b4b4b8;
+  --p-separator: rgba(0, 0, 0, 0.08);
+  --p-blue: #3b82f6;
+  --p-green: #22c55e;
+  --p-fill: #0a0a0a; /* primary button bg */
+  --p-fg: #ffffff; /* text on primary button */
+  --p-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
+  --p-card: linear-gradient(150deg, #1f6feb 0%, #1bb6c9 100%);
+}
+
+[data-theme='dark'] {
+  --p-bg: #000000;
+  --p-screen: #000000;
+  --p-surface: #141414;
+  --p-surface-2: #1f1f1f;
+  --p-text: #ffffff;
+  --p-text-2: #8a8a8e;
+  --p-text-3: #5a5a5e;
+  --p-separator: rgba(255, 255, 255, 0.08);
+  --p-fill: #ffffff;
+  --p-fg: #0a0a0a;
+  --p-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+}
diff --git a/components/grid-wallet-demo/src/app/layout.tsx b/components/grid-wallet-demo/src/app/layout.tsx
new file mode 100644
index 00000000..bc4a6904
--- /dev/null
+++ b/components/grid-wallet-demo/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from 'next';
+import './globals.scss';
+
+export const metadata: Metadata = {
+  title: 'Grid Global Accounts — Live demo',
+  description:
+    'Create a branded, self-custody dollar account and watch the Grid API calls fire in real time.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        {/* Set data-embed and an initial data-theme before paint to avoid a flash. */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{
+              var p=new URLSearchParams(window.location.search);
+              if(p.get('embed')==='true'){document.documentElement.setAttribute('data-embed','true');}
+              var t=p.get('theme');
+              if(t!=='dark'&&t!=='light'){
+                t=localStorage.getItem('grid-wallet-theme');
+              }
+              if(t!=='dark'&&t!=='light'){
+                t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
+              }
+              document.documentElement.setAttribute('data-theme',t);
+            }catch(e){}})();`,
+          }}
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/components/grid-wallet-demo/src/app/page.module.scss b/components/grid-wallet-demo/src/app/page.module.scss
new file mode 100644
index 00000000..f49c357d
--- /dev/null
+++ b/components/grid-wallet-demo/src/app/page.module.scss
@@ -0,0 +1,142 @@
+/* Layout mirrors grid-visualizer (flow-builder) 1:1. */
+
+.layout {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 475px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-secondary);
+  border-right: var(--stroke-xs) solid var(--border-tertiary);
+  overflow: hidden;
+
+  :global([data-theme='dark']) & {
+    background: var(--color-gray-975);
+  }
+}
+
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xl);
+  padding-right: var(--spacing-2xl);
+  flex-shrink: 0;
+  color: var(--text-primary);
+
+  :global([data-embed='true']) & {
+    display: none;
+  }
+}
+
+.headerLink {
+  font: inherit;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-feature-settings: 'salt' 1;
+  transition: color 150ms ease;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+
+.sidebarContent {
+  flex: 1;
+  display: flex;
+  padding: var(--spacing-4xl);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+}
+
+.sidebarContentInner {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* top-aligned so expanding "Explore actions" extends downward
+     instead of recentering the whole sidebar */
+  margin: 0;
+}
+
+.sidebarFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xl);
+  padding-right: var(--spacing-2xl);
+  flex-shrink: 0;
+
+  :global([data-embed='true']) & {
+    border-top: var(--stroke-xs) solid var(--border-tertiary);
+    padding: 16px 28px;
+  }
+}
+
+.rightPanel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Canvas — exact EmptyCanvas treatment from grid-visualizer */
+.canvas {
+  flex: 1 1 66%;
+  min-height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: var(--surface-sunken);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='8.75' y='8.75' width='2.5' height='2.5' fill='%23DEDED9'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-position: 8px 8px;
+
+  :global([data-theme='dark']) & {
+    background-color: var(--color-gray-950);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='8.75' y='8.75' width='2.5' height='2.5' fill='%23333330'/%3E%3C/svg%3E");
+  }
+}
+
+.apiDock {
+  flex: 1 1 34%;
+  min-height: 0;
+  max-height: 38%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 767px) {
+  .layout {
+    display: block;
+    height: auto;
+    overflow: visible;
+  }
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+    overflow: visible;
+  }
+  .sidebarContent {
+    padding: var(--spacing-xl);
+    overflow: visible;
+  }
+  .rightPanel {
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+  .canvas {
+    min-height: 70vh;
+  }
+}
diff --git a/components/grid-wallet-demo/src/app/page.tsx b/components/grid-wallet-demo/src/app/page.tsx
new file mode 100644
index 00000000..7de0f83b
--- /dev/null
+++ b/components/grid-wallet-demo/src/app/page.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { AuthMethod, Persona, ScreenId } from '@/data/flow';
+import {
+  ACTIONS,
+  initialWallet,
+  phoneFromState,
+  runAction,
+  type ActionId,
+  type WalletState,
+} from '@/data/actions';
+import { useTheme } from '@/hooks/useTheme';
+import { Header } from '@/components/Header';
+import { Footer } from '@/components/Footer';
+import { LightsparkWordmark } from '@/components/LightsparkWordmark';
+import Sidebar from '@/components/Sidebar';
+import Phone from '@/components/Phone';
+import ApiSteps, { type Entry } from '@/components/ApiSteps';
+import styles from './page.module.scss';
+
+interface Transient {
+  screen: ScreenId;
+  note?: string;
+  activated?: boolean;
+}
+
+export default function Page() {
+  const { theme, setTheme } = useTheme();
+  const [persona, setPersona] = useState<Persona>('fintech');
+  const [method, setMethod] = useState<AuthMethod>('passkey');
+  const [wallet, setWallet] = useState<WalletState>(initialWallet);
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [transient, setTransient] = useState<Transient | null>(null);
+  const [running, setRunning] = useState(false);
+  const [isEmbed, setIsEmbed] = useState(false);
+
+  const timers = useRef<number[]>([]);
+  const clearTimers = useCallback(() => {
+    timers.current.forEach((t) => window.clearTimeout(t));
+    timers.current = [];
+  }, []);
+
+  useEffect(() => {
+    setIsEmbed(new URLSearchParams(window.location.search).get('embed') === 'true');
+    return clearTimers;
+  }, [clearTimers]);
+
+  const handleAction = useCallback(
+    (id: ActionId) => {
+      if (running) return;
+      const action = ACTIONS.find((a) => a.id === id);
+      if (!action || !action.available(wallet)) return;
+
+      const res = runAction(id, wallet, method);
+      setRunning(true);
+
+      setEntries((prev) => [
+        ...prev.map((e) => ({ ...e, fresh: false })),
+        ...res.calls.map((c, i) => ({ ...c, key: `${id}-${Date.now()}-${i}`, fresh: true })),
+      ]);
+
+      let t = 0;
+      res.frames.forEach((f) => {
+        timers.current.push(
+          window.setTimeout(
+            () => setTransient({ screen: f.screen, note: f.note, activated: f.activated }),
+            t,
+          ),
+        );
+        t += f.ms;
+      });
+      timers.current.push(
+        window.setTimeout(() => {
+          setWallet(res.next);
+          setTransient(null);
+          setRunning(false);
+        }, t),
+      );
+    },
+    [running, wallet, method],
+  );
+
+  const reset = useCallback(() => {
+    clearTimers();
+    setWallet(initialWallet);
+    setEntries([]);
+    setTransient(null);
+    setRunning(false);
+  }, [clearTimers]);
+
+  // Changing the use case mid-session keeps state but rebrands; changing the
+  // sign-in method is only allowed before the account exists.
+  const onSetMethod = (m: AuthMethod) => {
+    if (!wallet.created) setMethod(m);
+  };
+
+  const base = phoneFromState(wallet);
+  const phone = transient
+    ? {
+        ...base,
+        screen: transient.screen,
+        note: transient.note,
+        cardActivated: transient.activated ?? base.cardActivated,
+      }
+    : base;
+
+  return (
+    <main className={styles.layout}>
+      <div className={styles.sidebar}>
+        {!isEmbed && (
+          <div className={styles.sidebarHeader}>
+            <LightsparkWordmark />
+            <a href="https://www.lightspark.com/contact" className={styles.headerLink}>
+              Book a live demo
+            </a>
+          </div>
+        )}
+
+        <div className={styles.sidebarContent}>
+          <div className={styles.sidebarContentInner}>
+            <Header />
+            <Sidebar
+              persona={persona}
+              setPersona={setPersona}
+              method={method}
+              setMethod={onSetMethod}
+              wallet={wallet}
+              onAction={handleAction}
+              running={running}
+              onReset={reset}
+            />
+          </div>
+        </div>
+
+        <div className={styles.sidebarFooter}>
+          <Footer theme={theme} setTheme={setTheme} />
+        </div>
+      </div>
+
+      <section className={styles.rightPanel}>
+        <div className={styles.canvas}>
+          <Phone
+            phone={phone}
+            wallet={wallet}
+            persona={persona}
+            method={method}
+            onAction={handleAction}
+            busy={running}
+          />
+        </div>
+        <div className={styles.apiDock}>
+          <ApiSteps entries={entries} />
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/components/grid-wallet-demo/src/components/ApiSteps.module.scss b/components/grid-wallet-demo/src/components/ApiSteps.module.scss
new file mode 100644
index 00000000..958c547c
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/ApiSteps.module.scss
@@ -0,0 +1,200 @@
+@use '@lightsparkdev/origin/src/tokens/text-styles' as *;
+
+.panel {
+  background: var(--surface-primary);
+  border-top: var(--stroke-xs) solid var(--border-tertiary);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  :global([data-theme='dark']) & {
+    background: var(--color-gray-950);
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 52px;
+  padding: 0 var(--spacing-md);
+  border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+  flex-shrink: 0;
+}
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--text-primary);
+}
+.headerIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+}
+.headerTitle {
+  @include label;
+  color: var(--text-primary);
+  font-feature-settings: 'salt' 1;
+}
+.headerHint {
+  @include label-sm;
+  color: var(--text-tertiary);
+  font-feature-settings: 'salt' 1;
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.empty {
+  @include body;
+  color: var(--text-secondary);
+  padding: var(--spacing-4xl);
+  max-width: 520px;
+  line-height: 24px;
+}
+
+.steps {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-2xl) var(--spacing-4xl);
+  max-width: 760px;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.stepHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.stepBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--surface-secondary);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  border-radius: var(--corner-radius-md);
+  flex-shrink: 0;
+  span {
+    @include label;
+    color: var(--text-primary);
+  }
+}
+.stepBadgeFresh {
+  background: var(--surface-inverted);
+  border-color: var(--surface-inverted);
+  span {
+    color: var(--text-surface);
+  }
+}
+.stepTitle {
+  @include body;
+  color: var(--text-primary);
+  font-feature-settings: 'salt' 1;
+}
+
+.stepContent {
+  display: flex;
+  gap: var(--spacing-md);
+}
+.stepLineCol {
+  width: 28px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.stepLine {
+  width: var(--stroke-xs);
+  height: 100%;
+  background: var(--border-tertiary);
+}
+.stepCodeCol {
+  flex: 1;
+  min-width: 0;
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-2xl);
+}
+
+.codeBlock {
+  background: var(--surface-base);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  border-radius: var(--corner-radius-md);
+  overflow: hidden;
+  transition: border-color 200ms ease;
+}
+.codeBlockFresh {
+  border-color: var(--border-secondary);
+}
+.codeBlockHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+}
+.codeBlockDesc {
+  @include label-sm;
+  color: var(--text-secondary);
+  font-feature-settings: 'salt' 1;
+}
+.codeBlockContent {
+  padding: var(--spacing-md);
+  overflow-x: auto;
+}
+.codePre {
+  margin: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-leading-18);
+  color: var(--text-primary);
+  white-space: pre;
+  tab-size: 2;
+  font-feature-settings: 'salt' 1;
+}
+
+/* Syntax highlighting — GitHub light/dark, identical to grid-visualizer */
+.syntaxDefault {
+  color: #24292e;
+  :global([data-theme='dark']) & {
+    color: #e1e4e8;
+  }
+}
+.syntaxCommand {
+  color: #6f42c1;
+  :global([data-theme='dark']) & {
+    color: #b392f0;
+  }
+}
+.syntaxFlag {
+  color: #2b5581;
+  :global([data-theme='dark']) & {
+    color: #79b8ff;
+  }
+}
+.syntaxString {
+  color: #22863a;
+  :global([data-theme='dark']) & {
+    color: #85e89d;
+  }
+}
+
+@media (max-width: 767px) {
+  .steps {
+    padding: var(--spacing-md);
+    max-width: 100%;
+  }
+}
diff --git a/components/grid-wallet-demo/src/components/ApiSteps.tsx b/components/grid-wallet-demo/src/components/ApiSteps.tsx
new file mode 100644
index 00000000..1c2c14c1
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/ApiSteps.tsx
@@ -0,0 +1,159 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import clsx from 'clsx';
+import type { ApiCall } from '@/data/flow';
+import { IconConsole } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconConsole';
+import styles from './ApiSteps.module.scss';
+
+export interface Entry extends ApiCall {
+  key: string;
+  fresh: boolean;
+}
+
+export default function ApiSteps({ entries }: { entries: Entry[] }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+  }, [entries.length]);
+
+  return (
+    <div className={styles.panel}>
+      <div className={styles.header}>
+        <span className={styles.headerLeft}>
+          <span className={styles.headerIcon}>
+            <IconConsole size={18} />
+          </span>
+          <span className={styles.headerTitle}>API calls</span>
+        </span>
+        <span className={styles.headerHint}>
+          {entries.length} request{entries.length === 1 ? '' : 's'}
+        </span>
+      </div>
+
+      <div className={styles.content} ref={scrollRef}>
+        {entries.length === 0 ? (
+          <div className={styles.empty}>
+            Pick a sign-in method and run actions on the app — the exact Grid API calls appear here
+            as they fire.
+          </div>
+        ) : (
+          <div className={styles.steps}>
+            <AnimatePresence initial={false}>
+              {entries.map((e, i) => (
+                <motion.div
+                  key={e.key}
+                  className={styles.step}
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.22, ease: 'easeOut' }}
+                >
+                  <div className={styles.stepHeader}>
+                    <span className={clsx(styles.stepBadge, e.fresh && styles.stepBadgeFresh)}>
+                      <span>{i + 1}</span>
+                    </span>
+                    <span className={styles.stepTitle}>{e.note ?? requestTitle(e)}</span>
+                  </div>
+                  <div className={styles.stepContent}>
+                    <div className={styles.stepLineCol}>
+                      {i < entries.length - 1 && <div className={styles.stepLine} />}
+                    </div>
+                    <div className={styles.stepCodeCol}>
+                      <div className={clsx(styles.codeBlock, e.fresh && styles.codeBlockFresh)}>
+                        <div className={styles.codeBlockHeader}>
+                          <span className={styles.codeBlockDesc}>
+                            {e.method} · {e.status}
+                          </span>
+                        </div>
+                        <div className={styles.codeBlockContent}>
+                          <pre className={styles.codePre}>{renderCurl(e)}</pre>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function requestTitle(e: ApiCall) {
+  const resource = e.path.split('?')[0].split('/').filter(Boolean).pop();
+  return `${e.method} ${resource}`;
+}
+
+/* GitHub-style highlighted curl, matching grid-visualizer's CodePanel. */
+function renderCurl(e: ApiCall): React.ReactNode {
+  const lines: React.ReactNode[] = [];
+  const cont = e.reqBody ? <span className={styles.syntaxDefault}> \</span> : null;
+  lines.push(
+    <span key="cmd">
+      <span className={styles.syntaxCommand}>curl</span>
+      <span className={styles.syntaxFlag}> -X {e.method}</span>{' '}
+      <span className={styles.syntaxString}>&quot;{`https://api.lightspark.com${e.path}`}&quot;</span>
+      {cont}
+      {'\n'}
+    </span>,
+  );
+  lines.push(
+    <span key="auth">
+      <span className={styles.syntaxFlag}>  -H</span>{' '}
+      <span className={styles.syntaxString}>&quot;Authorization: Basic $GRID_KEY&quot;</span>
+      {e.reqBody ? <span className={styles.syntaxDefault}> \</span> : null}
+      {'\n'}
+    </span>,
+  );
+  if (e.reqBody) {
+    lines.push(
+      <span key="data">
+        <span className={styles.syntaxFlag}>  -d</span>{' '}
+        <span className={styles.syntaxDefault}>&apos;</span>
+        {renderJson(e.reqBody, 1)}
+        <span className={styles.syntaxDefault}>&apos;</span>
+      </span>,
+    );
+  }
+  return lines;
+}
+
+function renderJson(obj: Record<string, unknown>, indent: number): React.ReactNode {
+  const pad = '  '.repeat(indent);
+  const padEnd = '  '.repeat(indent - 1);
+  const keys = Object.keys(obj);
+  return (
+    <>
+      {'{\n'}
+      {keys.map((k, i) => {
+        const v = obj[k];
+        const comma = i < keys.length - 1 ? ',' : '';
+        return (
+          <span key={k}>
+            {pad}
+            <span className={styles.syntaxFlag}>&quot;{k}&quot;</span>
+            <span className={styles.syntaxDefault}>: </span>
+            {renderVal(v, indent)}
+            <span className={styles.syntaxDefault}>{comma}</span>
+            {'\n'}
+          </span>
+        );
+      })}
+      {padEnd}
+      {'}'}
+    </>
+  );
+}
+
+function renderVal(v: unknown, indent: number): React.ReactNode {
+  if (v && typeof v === 'object' && !Array.isArray(v)) {
+    return renderJson(v as Record<string, unknown>, indent + 1);
+  }
+  if (typeof v === 'string') return <span className={styles.syntaxString}>&quot;{v}&quot;</span>;
+  return <span className={styles.syntaxCommand}>{String(v)}</span>;
+}
diff --git a/components/grid-wallet-demo/src/components/Footer.module.scss b/components/grid-wallet-demo/src/components/Footer.module.scss
new file mode 100644
index 00000000..317637f3
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Footer.module.scss
@@ -0,0 +1,153 @@
+@use '@lightsparkdev/origin/src/tokens/text-styles' as *;
+
+// Hidden by default, shown in embed mode via CSS
+.coordsLabel {
+  display: none;
+  font-family: "Suisse Int'l Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+  font-feature-settings: 'salt' 0, 'kern' 0 !important;
+  color: var(--color-gray-400);
+  margin-right: auto;
+
+  :global([data-theme='dark']) & {
+    color: var(--color-gray-700);
+  }
+
+  :global([data-embed='true']) & {
+    display: block;
+  }
+}
+
+.toggle {
+  all: unset;
+  box-sizing: border-box;
+  corner-shape: squircle;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4xs);
+  padding: var(--spacing-3xs);
+  background: var(--surface-secondary);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  border-radius: var(--corner-radius-md);
+  cursor: pointer;
+  transition: border-color 150ms ease;
+
+  :global([data-theme='dark']) & {
+    background: var(--surface-primary);
+  }
+
+  &:hover {
+    border-color: var(--border-secondary);
+  }
+
+  // Match Mintlify sidebar toggle: 52x28 pill
+  :global([data-embed='true']) & {
+    width: 52px;
+    height: 28px;
+    padding: 4px;
+    gap: 2px;
+    border-radius: 9999px;
+    background: transparent;
+    border-color: rgba(0, 0, 0, 0.07);
+    justify-content: center;
+  }
+
+  :global([data-embed='true'][data-theme='dark']) & {
+    border-color: rgba(255, 255, 255, 0.07);
+  }
+}
+
+.toggleItem {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--corner-radius-sm);
+  color: var(--icon-secondary);
+  transition: background 150ms ease, color 150ms ease;
+
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+
+  // Embed mode: smaller items, CSS-only icon size and active state
+  :global([data-embed='true']) & {
+    width: 20px;
+    height: 20px;
+    border-radius: 9999px;
+    color: #505050 !important; // Mintlify text-gray-600 (no matching Origin token)
+    background: none !important;
+
+    svg {
+      width: 12px !important;
+      height: 12px !important;
+    }
+  }
+
+  // CSS-only active state in embed mode (no React flash)
+  // !important ensures these beat the React-applied .toggleItemActive class
+  :global([data-embed='true'][data-theme='light']) &[data-mode='light'],
+  :global([data-embed='true'][data-theme='dark']) &[data-mode='dark'] {
+    color: #9F9F9F !important; // Mintlify text-gray-400 (no matching Origin token)
+  }
+
+  :global([data-embed='true'][data-theme='light']) &[data-mode='light'] {
+    background: rgba(229, 231, 235, 0.5) !important;
+  }
+
+  :global([data-embed='true'][data-theme='dark']) &[data-mode='dark'] {
+    background: #171717 !important;
+  }
+}
+
+.toggleItemActive {
+  background: var(--surface-elevated);
+  border-radius: var(--corner-radius-xs);
+  color: var(--icon-primary);
+
+  // In embed mode, color/bg handled by !important rules on .toggleItem above
+  :global([data-embed='true']) & {
+    border-radius: 9999px;
+  }
+}
+
+// Visible by default, hidden in embed mode
+.trailing {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+
+  :global([data-embed='true']) & {
+    display: none;
+  }
+}
+
+.link {
+  @include label;
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 0 var(--spacing-4xs);
+  font-feature-settings: 'salt' 1;
+  transition: color 150ms ease;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+
+.iconLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 var(--spacing-3xs);
+  border-radius: var(--corner-radius-sm);
+  color: var(--icon-secondary);
+  transition: color 150ms ease;
+
+  &:hover {
+    color: var(--icon-primary);
+  }
+}
diff --git a/components/grid-wallet-demo/src/components/Footer.tsx b/components/grid-wallet-demo/src/components/Footer.tsx
new file mode 100644
index 00000000..b2ccdf5c
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Footer.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import type { Theme } from '@/hooks/useTheme';
+import { IconSun } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconSun';
+import { IconMoon } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconMoon';
+import { IconGithub } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconGithub';
+import styles from './Footer.module.scss';
+import clsx from 'clsx';
+
+interface FooterProps {
+  theme: Theme;
+  setTheme: (t: Theme) => void;
+}
+
+export function Footer({ theme, setTheme }: FooterProps) {
+  return (
+    <>
+      <span className={styles.coordsLabel}>(0, 0, 0)</span>
+      <button
+        className={styles.toggle}
+        type="button"
+        aria-label="Toggle theme"
+        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      >
+        <span
+          data-mode="light"
+          className={clsx(
+            styles.toggleItem,
+            theme === 'light' && styles.toggleItemActive,
+          )}
+        >
+          <IconSun size={14} />
+        </span>
+        <span
+          data-mode="dark"
+          className={clsx(
+            styles.toggleItem,
+            theme === 'dark' && styles.toggleItemActive,
+          )}
+        >
+          <IconMoon size={14} />
+        </span>
+      </button>
+
+      <div className={styles.trailing}>
+          <a href="https://docs.lightspark.com/global-accounts" className={styles.link} target="_blank" rel="noopener noreferrer">
+            View docs
+          </a>
+          <a
+            href="https://github.com/lightsparkdev"
+            className={styles.iconLink}
+            aria-label="GitHub"
+          >
+            <IconGithub size={20} />
+          </a>
+        </div>
+    </>
+  );
+}
diff --git a/components/grid-wallet-demo/src/components/GridWordmark.tsx b/components/grid-wallet-demo/src/components/GridWordmark.tsx
new file mode 100644
index 00000000..c4885dbd
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/GridWordmark.tsx
@@ -0,0 +1,23 @@
+export function GridWordmark({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="72"
+      height="30"
+      viewBox="0 0 90 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Grid"
+    >
+      <path
+        d="M9.64273 7.30469V14.177H13.7445V7.30469H23.3872V16.9474H16.5148V21.0491H23.3872V30.6919H13.7445V23.8195H9.64273V30.6919H0V21.0491H6.87235V16.9474H0V7.30469H9.64273ZM16.5148 27.9215H20.6168V23.8195H16.5148V27.9215ZM2.77038 27.9215H6.87235V23.8195H2.77038V27.9215ZM9.64273 21.0491H13.7445V16.9474H9.64273V21.0491ZM16.5148 14.177H20.6168V10.0751H16.5148V14.177ZM2.77038 14.177H6.87235V10.0751H2.77038V14.177Z"
+        fill="currentColor"
+      />
+      <path
+        d="M46.8747 31L46.7147 28.088C45.2107 30.456 42.4907 31.416 39.3867 31.416C32.6987 31.416 28.8907 26.424 28.8907 19.352C28.8907 12.152 33.1467 7.384 39.6747 7.384C44.4747 7.384 48.3147 10.072 49.2747 14.552H46.1067C45.3387 11.96 43.2267 10.136 39.5147 10.136C35.4187 10.136 32.2187 13.336 32.2187 19.352C32.2187 25.208 35.2267 28.664 39.5147 28.664C42.6187 28.664 46.3627 27.384 46.3627 22.584V21.976H40.2187V19.16H49.4347V31H46.8747ZM53.3702 31V13.784H56.2182V16.792C57.0822 14.84 58.8422 13.752 61.0822 13.688C61.3702 13.688 61.6262 13.688 61.9462 13.72V16.824C61.2742 16.728 60.7942 16.696 60.3142 16.696C57.6262 16.696 56.2822 18.2 56.2822 21.976V31H53.3702ZM64.4827 31V13.784H67.3947V31H64.4827ZM64.4827 11.32V7.8H67.3947V11.32H64.4827ZM83.561 31V28.408C82.505 30.232 80.681 31.416 77.929 31.416C73.993 31.416 70.569 28.152 70.569 22.456C70.569 16.792 73.993 13.496 77.929 13.496C80.681 13.496 82.505 14.68 83.561 16.504V7.8H86.473V31H83.561ZM78.665 28.92C81.257 28.92 83.689 27 83.689 22.456C83.689 17.912 81.257 15.992 78.665 15.992C75.689 15.992 73.737 18.36 73.737 22.456C73.737 26.552 75.689 28.92 78.665 28.92Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/components/grid-wallet-demo/src/components/Header.module.scss b/components/grid-wallet-demo/src/components/Header.module.scss
new file mode 100644
index 00000000..77d2c3ce
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Header.module.scss
@@ -0,0 +1,47 @@
+@use '@lightsparkdev/origin/src/tokens/text-styles' as *;
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  width: 100%;
+  margin-bottom: 32px;
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 var(--spacing-2xs);
+}
+
+.logo {
+  height: 38px;
+  width: auto;
+  color: var(--text-primary);
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-left: 2px;
+}
+
+.title {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-regular);
+  font-size: 32px;
+  line-height: 1.2;
+  color: var(--text-primary);
+  letter-spacing: var(--font-tracking-tighter);
+  font-feature-settings: 'salt' 1, 'case' 1;
+}
+
+.description {
+  padding: 0 var(--spacing-xs);
+}
+
+.body {
+  @include body;
+  color: var(--text-secondary);
+  line-height: var(--font-leading-20);
+  font-feature-settings: 'salt' 1;
+  margin: 0;
+}
diff --git a/components/grid-wallet-demo/src/components/Header.tsx b/components/grid-wallet-demo/src/components/Header.tsx
new file mode 100644
index 00000000..16dd877b
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Header.tsx
@@ -0,0 +1,16 @@
+import styles from './Header.module.scss';
+
+export function Header() {
+  return (
+    <div className={styles.section}>
+      <div className={styles.heading}>
+        <div className={styles.title}>Global Accounts</div>
+      </div>
+      <div className={styles.description}>
+        <p className={styles.body}>
+          Create a Global money account and watch the exact API calls fire as you go.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/grid-wallet-demo/src/components/LightsparkWordmark.tsx b/components/grid-wallet-demo/src/components/LightsparkWordmark.tsx
new file mode 100644
index 00000000..4795159a
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/LightsparkWordmark.tsx
@@ -0,0 +1,28 @@
+export function LightsparkWordmark({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="120"
+      height="22"
+      viewBox="0 0 120 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Lightspark"
+      style={{ color: 'var(--text-primary)' }}
+    >
+      <path d="M10.3034 12.2943L1.14489 18.2419H5.90287L13.1487 13.5365V20.2279L16.2067 18.242V12.2943H25.3653L29.3557 9.70291H19.0518L28.2101 3.75545L23.4521 3.75545L16.2067 8.46066V1.76953L13.1487 3.75547V9.70291H3.99043L0 12.2943H10.3034Z" fill="currentColor" />
+      <path d="M111.691 12.0481L115.747 7.49219H118.625L114.628 11.8283L119.084 18.2426H116.247L113.01 13.5668L111.691 14.9855V18.2426H109.313V3.75552H111.691V12.0481Z" fill="currentColor" />
+      <path d="M108.096 7.43222C106.637 7.47218 105.618 8.19154 105.099 9.43043V7.49216H102.781V18.2426H105.159V12.7075C105.159 10.5894 105.998 9.79011 107.636 9.79011C107.936 9.79011 108.216 9.81009 108.616 9.87004V7.4522C108.436 7.43222 108.256 7.43222 108.096 7.43222Z" fill="currentColor" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M98.9336 9.09072C98.2742 7.95174 97.0154 7.29233 95.5167 7.29233C92.939 7.29233 90.8808 9.37048 90.8808 12.8873C90.8808 16.4242 92.939 18.5023 95.5167 18.5023C97.0154 18.5023 98.2742 17.8429 98.9336 16.6839V18.2426H101.332V7.49215H98.9336V9.09072ZM99.0535 12.8873C99.0535 15.485 97.6947 16.5641 96.1961 16.5641C94.5576 16.5641 93.4186 15.2452 93.4186 12.8873C93.4186 10.5494 94.5576 9.2306 96.1961 9.2306C97.6947 9.2306 99.0535 10.2897 99.0535 12.8873Z" fill="currentColor" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M82.2685 21.3628L79.8907 21.7394V7.49215H82.2685V9.09072C82.9479 7.95174 84.1868 7.29233 85.7055 7.29233C88.2832 7.29233 90.3613 9.37047 90.3613 12.8873C90.3613 16.4242 88.2832 18.5023 85.7055 18.5023C84.1868 18.5023 82.9479 17.8429 82.2685 16.6839V21.3628ZM85.0061 16.5641C86.6646 16.5641 87.8236 15.2452 87.8236 12.8873C87.8236 10.5494 86.6646 9.2306 85.0061 9.2306C83.5074 9.2306 82.1686 10.2897 82.1686 12.8873C82.1686 15.485 83.5074 16.5641 85.0061 16.5641Z" fill="currentColor" />
+      <path d="M75.2706 11.8683L73.5721 11.5485C72.573 11.3687 72.0535 11.029 72.0535 10.3696C72.0535 9.51037 73.0526 9.13071 74.1116 9.13071C75.2906 9.13071 76.2298 9.53035 76.4895 10.6294H78.8274C78.4677 8.45131 76.6294 7.25238 74.2715 7.25238C71.7937 7.25238 69.7355 8.41135 69.7355 10.4695C69.7355 12.3678 71.2742 13.1671 72.9527 13.4868L74.6711 13.8065C75.8701 14.0263 76.6694 14.426 76.6694 15.2852C76.6694 16.1444 75.6503 16.644 74.3514 16.644C72.9327 16.644 72.0934 16.0046 71.8137 14.7657H69.4558C69.7156 16.8838 71.494 18.5023 74.3115 18.5023C76.9691 18.5023 79.0073 17.2834 79.0073 15.0454C79.0073 13.0472 77.4886 12.2879 75.2706 11.8683Z" fill="currentColor" />
+      <path d="M58.17 9.23063C56.5515 9.23063 55.6523 10.3496 55.6523 12.5277V18.2426H53.2744V4.13211L55.6523 3.75552V9.03081C56.2118 8.09165 57.3108 7.29236 59.0692 7.29236C61.7269 7.29236 62.6461 8.95088 62.6461 11.5685V18.2426H60.2682V12.228C60.2682 10.6094 60.0684 9.23063 58.17 9.23063Z" fill="currentColor" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M49.3359 9.09074C48.6565 7.95176 47.4576 7.29235 45.9589 7.29235C43.4212 7.29235 41.3231 9.21064 41.3231 12.6276C41.3231 16.0845 43.4212 17.9828 45.9589 17.9828C47.4576 17.9828 48.6565 17.3434 49.3359 16.1844V17.4233C49.3359 19.3616 48.2968 20.1209 46.6783 20.1209C45.2596 20.1209 44.6001 19.5614 44.3004 18.6422H41.9225C42.3222 20.7603 44.0207 21.9992 46.6783 21.9992C49.6956 21.9992 51.6938 20.5205 51.6938 17.0436V7.49217H49.3359V9.09074ZM49.4358 12.6276C49.4358 15.1254 48.137 16.0645 46.6383 16.0645C45.0397 16.0645 43.8608 14.8856 43.8608 12.6276C43.8608 10.4096 45.0397 9.23062 46.6383 9.23062C48.137 9.23062 49.4358 10.1498 49.4358 12.6276Z" fill="currentColor" />
+      <path d="M64.6473 15.4251C64.6473 17.763 65.2868 18.2426 67.5647 18.2426H69.7074L68.889 16.4042H68.2641C67.2051 16.4042 67.0252 16.1444 67.0252 15.0654V9.29055H69.1833V7.49216H67.0252V4.69465H64.6473V7.49216H62.6874L63.4881 9.29056L64.6473 9.29055V15.4251Z" fill="currentColor" />
+      <path d="M37.9935 18.2426V7.49218H40.3713V18.2426H37.9935Z" fill="currentColor" />
+      <path d="M37.9935 3.75552V6.11341H40.3713V3.75552H37.9935Z" fill="currentColor" />
+      <path d="M33.9432 3.75552V18.2426H36.3211V3.75552H33.9432Z" fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/components/grid-wallet-demo/src/components/Phone.module.scss b/components/grid-wallet-demo/src/components/Phone.module.scss
new file mode 100644
index 00000000..a53400e4
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Phone.module.scss
@@ -0,0 +1,753 @@
+/* iPhone mock — bread (sparkapp) neobank design language.
+   Tokens (--p-*) in globals.scss flip with [data-theme]. */
+
+.deviceWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding: 44px 0;
+}
+/* Realistic iPhone: titanium bezel frame + side buttons */
+.device {
+  position: relative;
+  width: 300px;
+  height: 614px;
+  flex-shrink: 0;
+  transform-origin: center center;
+  border-radius: 55px;
+  padding: 7px;
+  background: linear-gradient(145deg, #3c3c40 0%, #0c0c0e 38%, #0c0c0e 62%, #2c2c30 100%);
+  box-shadow:
+    0 40px 90px rgba(0, 0, 0, 0.5),
+    0 10px 30px rgba(0, 0, 0, 0.4),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+/* power button (right) */
+.device::after {
+  content: '';
+  position: absolute;
+  right: -2px;
+  top: 168px;
+  width: 3px;
+  height: 64px;
+  border-radius: 0 2px 2px 0;
+  background: #1a1a1c;
+}
+/* volume buttons (left) */
+.device::before {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: 150px;
+  width: 3px;
+  height: 44px;
+  border-radius: 2px 0 0 2px;
+  background: #1a1a1c;
+  box-shadow: 0 58px 0 #1a1a1c;
+}
+.island {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 88px;
+  height: 26px;
+  background: #000;
+  border-radius: 14px;
+  z-index: 5;
+}
+.screen {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 48px;
+  overflow: hidden;
+  background: var(--p-screen);
+  display: flex;
+  flex-direction: column;
+  color: var(--p-text);
+  font-size: 14px;
+}
+.statusBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 26px 2px;
+  height: 44px;
+  flex-shrink: 0;
+  color: var(--p-text);
+}
+.time {
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.statusIcons {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.screenBody {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+}
+.screenInner {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.homeIndicator {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  padding: 6px 0 9px;
+  span {
+    width: 120px;
+    height: 5px;
+    border-radius: 3px;
+    background: var(--p-text);
+    opacity: 0.3;
+  }
+}
+
+/* primary pill button (bread fillPrimary) */
+.btnFill {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  height: 52px;
+  border: none;
+  border-radius: 16px;
+  background: var(--p-fill);
+  color: var(--p-fg);
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  cursor: pointer;
+  transition: opacity 150ms ease, transform 120ms ease;
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  &:active:not(:disabled) {
+    transform: scale(0.985);
+  }
+}
+.btnCompact {
+  margin-top: 16px;
+  height: 46px;
+}
+
+/* ---------- Auth ---------- */
+.authScreen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 22px 22px;
+}
+.authTop {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.authBottom {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.brandMark {
+  width: 66px;
+  height: 66px;
+  border-radius: 20px;
+  background: linear-gradient(150deg, var(--p-accent), #1ed47f);
+  color: #fff;
+  font-size: 32px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 30px rgba(17, 169, 103, 0.4);
+}
+.brandName {
+  margin-top: 18px;
+  font-size: 27px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+.brandTag {
+  font-size: 14px;
+  color: var(--p-text-2);
+}
+.authFine {
+  font-size: 11.5px;
+  color: var(--p-text-2);
+  text-align: center;
+  strong {
+    color: var(--p-text);
+  }
+}
+
+.centerScreen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  padding: 24px;
+}
+.spinner {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: 3px solid var(--p-separator);
+  border-top-color: var(--p-accent);
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.centerNote {
+  font-size: 15px;
+  color: var(--p-text-2);
+}
+
+/* ---------- Credential sheet ---------- */
+.bioSheet {
+  width: 100%;
+  background: var(--p-surface);
+  border-radius: 24px;
+  padding: 26px 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+}
+.bioTitle {
+  font-size: 19px;
+  font-weight: 700;
+  margin-top: 4px;
+}
+.bioSub {
+  font-size: 13.5px;
+  color: var(--p-text-2);
+  text-align: center;
+}
+.otpRow {
+  display: flex;
+  gap: 8px;
+  margin: 10px 0 2px;
+}
+.otpBox {
+  width: 34px;
+  height: 44px;
+  border-radius: 11px;
+  background: var(--p-surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+/* ---------- Wallet ---------- */
+.wallet {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 2px 18px 14px;
+  overflow: hidden;
+}
+.walletNav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 0 12px;
+}
+.walletBrand {
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.3px;
+}
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--p-surface-2);
+  color: var(--p-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.balanceBlock {
+  padding: 8px 0 14px;
+  position: relative;
+}
+.balanceLabel {
+  font-size: 15px;
+  color: var(--p-text-2);
+  margin-bottom: 6px;
+}
+.balanceValue {
+  line-height: 1;
+}
+.bal {
+  font-size: 42px;
+  font-weight: 700;
+  letter-spacing: -1.4px;
+}
+.balLarge {
+  font-size: 48px;
+}
+.balCents {
+  color: var(--p-text-2);
+}
+.changeRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+.deltaUp {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--p-green);
+}
+.deltaChip {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--p-green);
+  background: rgba(34, 197, 94, 0.14);
+  border-radius: 7px;
+  padding: 2px 8px;
+}
+.chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 40px;
+  margin-top: 14px;
+}
+.bar {
+  flex: 1;
+  background: var(--p-surface-2);
+  border-radius: 2px;
+  transition: height 400ms ease;
+}
+.barHot {
+  background: var(--p-green);
+  opacity: 0.9;
+}
+
+.actionRow {
+  display: flex;
+  gap: 22px;
+  padding: 2px 0 18px;
+}
+.action {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+}
+.actionIcon {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: var(--p-surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--p-text);
+}
+.actionLabel {
+  font-size: 12.5px;
+  color: var(--p-text-2);
+  font-weight: 500;
+}
+
+/* card hero (issued) */
+.cardHero {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  cursor: pointer;
+  margin-bottom: 18px;
+}
+.cardHint {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.14);
+  border-radius: 7px;
+  padding: 3px 9px;
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+/* issue card prompt */
+.issueCard {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px;
+  margin-bottom: 18px;
+  background: var(--p-surface);
+  border-radius: 18px;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+.issueIcon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: var(--p-surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--p-text);
+  flex-shrink: 0;
+}
+.issueText {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+}
+.issueTitle {
+  font-size: 15px;
+  font-weight: 600;
+}
+.issueSub {
+  font-size: 12.5px;
+  color: var(--p-text-2);
+}
+
+.activityHeader {
+  font-size: 17px;
+  font-weight: 700;
+  padding: 2px 0 6px;
+}
+.emptyActivity {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 4px;
+  color: var(--p-text-2);
+  padding-bottom: 30px;
+}
+.emptyTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--p-text);
+}
+.emptySub {
+  font-size: 13px;
+}
+
+.txList {
+  flex: 1;
+  overflow-y: auto;
+  margin: 0 -4px;
+}
+.txItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 4px;
+}
+.txIcon {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: var(--p-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--p-text-2);
+  flex-shrink: 0;
+}
+.txDetails {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.txName {
+  font-size: 14.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.txSub {
+  font-size: 12px;
+  color: var(--p-text-2);
+  margin-top: 1px;
+}
+.txAmount {
+  font-size: 14.5px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.pos {
+  color: var(--p-green);
+}
+
+/* ---------- Amount screen ---------- */
+.amountScreen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 18px 16px;
+}
+.amountNav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 0 8px;
+}
+.navClose {
+  font-size: 17px;
+  color: var(--p-text-2);
+  width: 18px;
+}
+.amountTitle {
+  font-size: 16px;
+  font-weight: 600;
+}
+.amountBig {
+  text-align: center;
+  padding: 44px 0 30px;
+}
+.sourceRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--p-surface);
+  border-radius: 16px;
+  padding: 13px 14px;
+}
+.srcIcon {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: var(--p-surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--p-text-2);
+  flex-shrink: 0;
+}
+.flexSpacer {
+  flex: 1;
+}
+
+/* ---------- Card (Robinhood-style glass / metal) ---------- */
+.visaCard {
+  height: 188px;
+  border-radius: 18px;
+  padding: 20px 22px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: #eef0f6;
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(158deg, rgba(38, 44, 66, 0.9) 0%, rgba(14, 16, 26, 0.95) 52%, rgba(8, 9, 15, 0.98) 100%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+    0 22px 50px rgba(0, 0, 0, 0.55);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+/* deep blue glow from the bottom — the Robinhood beam */
+.visaGlow {
+  position: absolute;
+  left: 50%;
+  bottom: -55%;
+  width: 150%;
+  height: 130%;
+  transform: translateX(-50%);
+  background: radial-gradient(50% 50% at 50% 50%, rgba(56, 90, 255, 0.55), rgba(56, 90, 255, 0) 70%);
+  pointer-events: none;
+}
+/* diagonal sheen */
+.visaSheen {
+  position: absolute;
+  top: -40%;
+  left: -30%;
+  width: 70%;
+  height: 200%;
+  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
+  transform: rotate(8deg);
+  pointer-events: none;
+}
+.visaTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 13px;
+  position: relative;
+  z-index: 1;
+}
+.visaKind {
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.visaMark {
+  font-size: 17px;
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+}
+.visaChip {
+  position: relative;
+  z-index: 1;
+  width: 40px;
+  height: 30px;
+  border-radius: 7px;
+  background: linear-gradient(135deg, #d9dde6 0%, #9aa0ad 45%, #c7ccd6 100%);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+  padding: 0 6px;
+  span {
+    height: 1.5px;
+    background: rgba(0, 0, 0, 0.22);
+    border-radius: 1px;
+  }
+}
+.visaBottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: relative;
+  z-index: 1;
+}
+.visaNum {
+  font-size: 15px;
+  letter-spacing: 2px;
+  color: rgba(255, 255, 255, 0.82);
+}
+.visaLogo {
+  font-size: 21px;
+  font-weight: 700;
+  font-style: italic;
+  letter-spacing: 1px;
+  color: rgba(255, 255, 255, 0.92);
+}
+
+/* ---------- Card reveal animation ---------- */
+.reveal {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  background: #000;
+  overflow: hidden;
+}
+.revealBeam {
+  position: absolute;
+  left: 50%;
+  bottom: -10%;
+  width: 240%;
+  height: 80%;
+  transform: translateX(-50%);
+  transform-origin: 50% 100%;
+  background: radial-gradient(50% 50% at 50% 100%, rgba(56, 90, 255, 0.75), rgba(40, 60, 200, 0.25) 45%, transparent 72%);
+  filter: blur(6px);
+  pointer-events: none;
+}
+.revealCard {
+  width: 78%;
+  position: relative;
+  z-index: 1;
+  perspective: 800px;
+}
+.revealLabel {
+  position: relative;
+  z-index: 1;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+}
+
+/* ---------- Tap ---------- */
+.tapScreen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  padding: 26px 18px;
+}
+.readerCircle,
+.doneCircle {
+  margin-top: 22px;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.readerCircle {
+  background: var(--p-surface-2);
+}
+.doneCircle {
+  background: var(--p-green);
+}
+.tapLabel {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--p-text-2);
+}
diff --git a/components/grid-wallet-demo/src/components/Phone.tsx b/components/grid-wallet-demo/src/components/Phone.tsx
new file mode 100644
index 00000000..9d3c0aec
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Phone.tsx
@@ -0,0 +1,583 @@
+'use client';
+
+import { useLayoutEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import clsx from 'clsx';
+import type { AuthMethod, Persona, PhoneState } from '@/data/flow';
+import { authCta } from '@/data/flow';
+import type { ActionId, WalletState } from '@/data/actions';
+import styles from './Phone.module.scss';
+
+const BRAND: Record<Persona, { name: string; tag: string }> = {
+  fintech: { name: 'Aurora', tag: 'Your money, everywhere' },
+  social: { name: 'Pulse', tag: 'Get paid to post' },
+  marketplace: { name: 'Bazaar', tag: 'Buy and sell anywhere' },
+};
+
+const DEVICE_W = 300;
+const DEVICE_H = 614;
+
+function useFitScale() {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+  useLayoutEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const compute = () => {
+      const availW = el.clientWidth - 32;
+      const availH = el.clientHeight - 32;
+      const s = Math.min(1, availW / DEVICE_W, availH / DEVICE_H);
+      setScale(s > 0 ? s : 1);
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return { wrapRef, scale };
+}
+
+interface PhoneProps {
+  phone: PhoneState;
+  wallet: WalletState;
+  persona: Persona;
+  method: AuthMethod;
+  onAction: (id: ActionId) => void;
+  busy: boolean;
+}
+
+export default function Phone({ phone, wallet, persona, method, onAction, busy }: PhoneProps) {
+  const brand = BRAND[persona];
+  const { wrapRef, scale } = useFitScale();
+  const act = (id: ActionId) => {
+    if (!busy) onAction(id);
+  };
+  return (
+    <div className={styles.deviceWrap} ref={wrapRef}>
+      <div className={styles.device} style={{ transform: `scale(${scale})` }}>
+        <div className={styles.island} />
+        <div className={styles.screen}>
+          <StatusBar />
+          <div className={styles.screenBody}>
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={phone.screen + phone.balance + String(phone.cardActivated)}
+                className={styles.screenInner}
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -8 }}
+                transition={{ duration: 0.22, ease: 'easeOut' }}
+              >
+                {render(phone, wallet, brand, method, act, busy)}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+          <div className={styles.homeIndicator}>
+            <span />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function render(
+  phone: PhoneState,
+  wallet: WalletState,
+  brand: { name: string; tag: string },
+  method: AuthMethod,
+  act: (id: ActionId) => void,
+  busy: boolean,
+) {
+  switch (phone.screen) {
+    case 'auth':
+      return <AuthScreen brand={brand} method={method} act={act} busy={busy} />;
+    case 'creating':
+      return <CreatingScreen brand={brand} note={phone.note} />;
+    case 'credential':
+      return <CredentialScreen method={method} />;
+    case 'addmoney':
+      return <AmountScreen title="Add money" amount="$5,000.00" cta="Confirm" source="Bank account" sub="•••• 3872 · Instant" />;
+    case 'withdraw':
+      return <AmountScreen title="Withdraw" amount="$200.00" cta="Confirm" source="Bank account" sub="•••• 3872 · Instant" />;
+    case 'send':
+      return <AmountScreen title="Send" amount="$250.00" cta="Send" source="$leo@grid.app" sub="UMA address · Instant" />;
+    case 'card-reveal':
+      return <CardReveal brand={brand} />;
+    case 'tap':
+      return <TapScreen activated={phone.cardActivated} />;
+    default:
+      return <WalletScreen phone={phone} wallet={wallet} brand={brand} act={act} busy={busy} />;
+  }
+}
+
+/* ----------------------------- Auth ----------------------------- */
+function AuthScreen({
+  brand,
+  method,
+  act,
+  busy,
+}: {
+  brand: { name: string; tag: string };
+  method: AuthMethod;
+  act: (id: ActionId) => void;
+  busy: boolean;
+}) {
+  return (
+    <div className={styles.authScreen}>
+      <div className={styles.authTop}>
+        <div className={styles.brandMark}>{brand.name.charAt(0)}</div>
+        <div className={styles.brandName}>{brand.name}</div>
+        <div className={styles.brandTag}>{brand.tag}</div>
+      </div>
+      <div className={styles.authBottom}>
+        <button className={styles.btnFill} onClick={() => act('create')} disabled={busy}>
+          <AuthGlyph method={method} />
+          {authCta(method)}
+        </button>
+        <div className={styles.authFine}>
+          Global account · powered by <strong>Grid</strong>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CreatingScreen({ brand, note }: { brand: { name: string; tag: string }; note?: string }) {
+  return (
+    <div className={styles.centerScreen}>
+      <div className={styles.brandMark}>{brand.name.charAt(0)}</div>
+      <div className={styles.spinner} />
+      <div className={styles.centerNote}>{note ?? 'Setting up your account…'}</div>
+    </div>
+  );
+}
+
+function CredentialScreen({ method }: { method: AuthMethod }) {
+  const isOtp = method === 'email_otp' || method === 'sms';
+  return (
+    <div className={styles.centerScreen}>
+      <div className={styles.bioSheet}>
+        {method === 'passkey' && (
+          <>
+            <FaceId />
+            <div className={styles.bioTitle}>Create passkey?</div>
+            <div className={styles.bioSub}>Use Face ID to secure your account</div>
+          </>
+        )}
+        {method === 'oauth' && (
+          <>
+            <GoogleG large />
+            <div className={styles.bioTitle}>Continue as Ava</div>
+            <div className={styles.bioSub}>ava@example.com</div>
+          </>
+        )}
+        {method === 'apple' && (
+          <>
+            <Apple large />
+            <div className={styles.bioTitle}>Continue with Apple</div>
+            <div className={styles.bioSub}>ava@icloud.com</div>
+          </>
+        )}
+        {isOtp && (
+          <>
+            <div className={styles.bioTitle}>Enter the code</div>
+            <div className={styles.bioSub}>
+              {method === 'sms' ? 'Sent to +1 415 ••• 0148' : 'Sent to ava@example.com'}
+            </div>
+            <div className={styles.otpRow}>
+              {['1', '2', '3', '4', '5', '6'].map((d, i) => (
+                <span key={i} className={styles.otpBox}>
+                  {d}
+                </span>
+              ))}
+            </div>
+          </>
+        )}
+        <button className={clsx(styles.btnFill, styles.btnCompact)}>{isOtp ? 'Verify' : 'Confirm'}</button>
+      </div>
+    </div>
+  );
+}
+
+function AuthGlyph({ method }: { method: AuthMethod }) {
+  if (method === 'oauth') return <GoogleG />;
+  if (method === 'apple') return <Apple />;
+  if (method === 'passkey') return <KeyIcon />;
+  if (method === 'sms') return <PhoneIcon />;
+  return <MailIcon />;
+}
+
+/* ----------------------------- Wallet (bread) ----------------------------- */
+function WalletScreen({
+  phone,
+  wallet,
+  brand,
+  act,
+  busy,
+}: {
+  phone: PhoneState;
+  wallet: WalletState;
+  brand: { name: string; tag: string };
+  act: (id: ActionId) => void;
+  busy: boolean;
+}) {
+  const hasFunds = wallet.balanceCents > 0;
+  return (
+    <div className={styles.wallet}>
+      <div className={styles.walletNav}>
+        <span className={styles.walletBrand}>{brand.name}</span>
+        <span className={styles.avatar}>A</span>
+      </div>
+
+      <div className={styles.balanceBlock}>
+        <div className={styles.balanceLabel}>Total Balance</div>
+        <div className={styles.balanceValue}>
+          <Balance value={phone.balance} />
+        </div>
+        {hasFunds && (
+          <div className={styles.changeRow}>
+            <span className={styles.deltaUp}>+ {phone.balance}</span>
+            <span className={styles.deltaChip}>Today</span>
+          </div>
+        )}
+        <BarChart active={hasFunds} />
+      </div>
+
+      <div className={styles.actionRow}>
+        <Action icon={<Plus />} label="Add" onClick={() => act('add')} disabled={busy} />
+        <Action icon={<SendGlyph />} label="Send" onClick={() => act('send')} disabled={busy || !hasFunds} />
+        <Action icon={<ArrowDown />} label="Cash out" onClick={() => act('withdraw')} disabled={busy || !hasFunds} />
+      </div>
+
+      {wallet.hasCard ? (
+        <button className={styles.cardHero} onClick={() => act('tap')} disabled={busy}>
+          <VisaCard mark={brand.name.charAt(0)} />
+          <span className={styles.cardHint}>Tap to pay →</span>
+        </button>
+      ) : (
+        <button className={styles.issueCard} onClick={() => act('card')} disabled={busy}>
+          <span className={styles.issueIcon}>
+            <CardIcon />
+          </span>
+          <span className={styles.issueText}>
+            <span className={styles.issueTitle}>Get a card</span>
+            <span className={styles.issueSub}>Spend your balance anywhere</span>
+          </span>
+          <Chevron />
+        </button>
+      )}
+
+      <div className={styles.activityHeader}>Activity</div>
+      {phone.activity.length === 0 ? (
+        <div className={styles.emptyActivity}>
+          <div className={styles.emptyTitle}>Nothing here yet</div>
+          <div className={styles.emptySub}>Add money to get started</div>
+        </div>
+      ) : (
+        <div className={styles.txList}>
+          {phone.activity.map((t, i) => (
+            <div className={styles.txItem} key={i}>
+              <span className={styles.txIcon}>
+                {t.kind === 'coffee' ? <Coffee /> : t.kind === 'send' ? <SendGlyph /> : t.kind === 'card' ? <CardIcon /> : <Bank />}
+              </span>
+              <span className={styles.txDetails}>
+                <span className={styles.txName}>{t.name}</span>
+                <span className={styles.txSub}>{t.sub}</span>
+              </span>
+              <span className={clsx(styles.txAmount, t.positive && styles.pos)}>{t.amount}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AmountScreen({
+  title,
+  amount,
+  cta,
+  source,
+  sub,
+}: {
+  title: string;
+  amount: string;
+  cta: string;
+  source: string;
+  sub: string;
+}) {
+  return (
+    <div className={styles.amountScreen}>
+      <div className={styles.amountNav}>
+        <span className={styles.navClose}>✕</span>
+        <span className={styles.amountTitle}>{title}</span>
+        <span style={{ width: 18 }} />
+      </div>
+      <div className={styles.amountBig}>
+        <Balance value={amount} large />
+      </div>
+      <div className={styles.sourceRow}>
+        <span className={styles.srcIcon}>
+          <Bank />
+        </span>
+        <span className={styles.txDetails}>
+          <span className={styles.txName}>{source}</span>
+          <span className={styles.txSub}>{sub}</span>
+        </span>
+        <Chevron />
+      </div>
+      <div className={styles.flexSpacer} />
+      <button className={styles.btnFill}>{cta}</button>
+    </div>
+  );
+}
+
+function TapScreen({ activated }: { activated: boolean }) {
+  return (
+    <div className={styles.tapScreen}>
+      <VisaCard />
+      {activated ? (
+        <>
+          <div className={styles.doneCircle}>
+            <Check big />
+          </div>
+          <div className={styles.tapLabel}>Done · $7.32</div>
+        </>
+      ) : (
+        <>
+          <div className={styles.readerCircle}>
+            <Contactless />
+          </div>
+          <div className={styles.tapLabel}>Hold near reader</div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function VisaCard({ mark = 'A' }: { mark?: string }) {
+  return (
+    <div className={styles.visaCard}>
+      <span className={styles.visaGlow} />
+      <span className={styles.visaSheen} />
+      <div className={styles.visaTop}>
+        <span className={styles.visaKind}>Debit</span>
+        <span className={styles.visaMark}>{mark}</span>
+      </div>
+      <div className={styles.visaChip}>
+        <span />
+        <span />
+        <span />
+      </div>
+      <div className={styles.visaBottom}>
+        <span className={styles.visaNum}>•••• 8972</span>
+        <span className={styles.visaLogo}>VISA</span>
+      </div>
+    </div>
+  );
+}
+
+function CardReveal({ brand }: { brand: { name: string } }) {
+  return (
+    <div className={styles.reveal}>
+      <motion.span
+        className={styles.revealBeam}
+        initial={{ opacity: 0, scaleY: 0.3 }}
+        animate={{ opacity: 1, scaleY: 1 }}
+        transition={{ duration: 1, ease: 'easeOut' }}
+      />
+      <motion.div
+        className={styles.revealCard}
+        initial={{ y: 80, scale: 0.8, opacity: 0, rotateX: 22 }}
+        animate={{ y: 0, scale: 1, opacity: 1, rotateX: 0 }}
+        transition={{ duration: 1.15, ease: [0.2, 0.8, 0.2, 1], delay: 0.12 }}
+      >
+        <VisaCard mark={brand.name.charAt(0)} />
+      </motion.div>
+      <motion.div
+        className={styles.revealLabel}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.95, duration: 0.5 }}
+      >
+        Your card is ready
+      </motion.div>
+    </div>
+  );
+}
+
+function Balance({ value, large }: { value: string; large?: boolean }) {
+  const [whole, cents] = value.split('.');
+  return (
+    <span className={clsx(styles.bal, large && styles.balLarge)}>
+      {whole}
+      {cents && <span className={styles.balCents}>.{cents}</span>}
+    </span>
+  );
+}
+
+// Bread-style sparkline behind the balance.
+const BAR_HEIGHTS = [
+  30, 34, 28, 40, 36, 46, 38, 52, 44, 58, 50, 62, 48, 66, 56, 70, 60, 74, 64, 80, 70, 86, 76, 92,
+];
+function BarChart({ active }: { active: boolean }) {
+  return (
+    <div className={styles.chart} aria-hidden>
+      {BAR_HEIGHTS.map((h, i) => (
+        <span
+          key={i}
+          className={clsx(styles.bar, active && i >= BAR_HEIGHTS.length - 6 && styles.barHot)}
+          style={{ height: `${active ? h : 22}%` }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function Action({
+  icon,
+  label,
+  onClick,
+  disabled,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button className={styles.action} onClick={onClick} disabled={disabled}>
+      <span className={styles.actionIcon}>{icon}</span>
+      <span className={styles.actionLabel}>{label}</span>
+    </button>
+  );
+}
+
+function StatusBar() {
+  return (
+    <div className={styles.statusBar}>
+      <span className={styles.time}>9:41</span>
+      <span className={styles.statusIcons}>
+        <Signal />
+        <Wifi />
+        <Battery />
+      </span>
+    </div>
+  );
+}
+
+/* ----------------------------- Icons ----------------------------- */
+const s = (p: React.SVGProps<SVGSVGElement>) => ({
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+  ...p,
+});
+
+const Plus = () => (
+  <svg {...s({ width: 22, height: 22 })}>
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+const SendGlyph = () => (
+  <svg {...s({ width: 20, height: 20 })}>
+    <path d="M7 17L17 7M9 7h8v8" />
+  </svg>
+);
+const ArrowDown = () => (
+  <svg {...s({ width: 22, height: 22 })}>
+    <path d="M12 5v14M5 12l7 7 7-7" />
+  </svg>
+);
+const CardIcon = () => (
+  <svg {...s({ width: 20, height: 20 })}>
+    <rect x="2" y="5" width="20" height="14" rx="2.5" />
+    <path d="M2 10h20" />
+  </svg>
+);
+const Bank = () => (
+  <svg {...s({ width: 18, height: 18 })}>
+    <path d="M3 10l9-6 9 6M5 10v8m4-8v8m6-8v8m4-8v8M3 21h18" />
+  </svg>
+);
+const Coffee = () => (
+  <svg {...s({ width: 18, height: 18 })}>
+    <path d="M4 9h13v4a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9zM17 10h2a2 2 0 0 1 0 4h-2M7 4v2M11 4v2M15 4v2" />
+  </svg>
+);
+const Chevron = () => (
+  <svg {...s({ width: 18, height: 18, stroke: 'var(--p-text-3)' })}>
+    <path d="M9 6l6 6-6 6" />
+  </svg>
+);
+const Check = ({ big }: { big?: boolean }) => (
+  <svg {...s({ width: big ? 38 : 20, height: big ? 38 : 20, stroke: big ? '#fff' : 'var(--p-green)' })}>
+    <path d="M20 6L9 17l-5-5" />
+  </svg>
+);
+const KeyIcon = () => (
+  <svg {...s({ width: 18, height: 18 })}>
+    <circle cx="8" cy="8" r="5" />
+    <path d="M11.5 11.5L20 20M16 16l2 2M14 18l2 2" />
+  </svg>
+);
+const MailIcon = () => (
+  <svg {...s({ width: 18, height: 18 })}>
+    <rect x="3" y="5" width="18" height="14" rx="2" />
+    <path d="M3 7l9 6 9-6" />
+  </svg>
+);
+const PhoneIcon = () => (
+  <svg {...s({ width: 18, height: 18 })}>
+    <rect x="7" y="2" width="10" height="20" rx="2.5" />
+    <path d="M11 18h2" />
+  </svg>
+);
+const Apple = ({ large }: { large?: boolean }) => (
+  <svg width={large ? 38 : 16} height={large ? 38 : 16} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M16.4 12.9c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.8-3.5.8s-1.8-.8-3-.8c-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.7 1.1 8.9.7 1.1 1.6 2.3 2.8 2.2 1.1 0 1.5-.7 2.9-.7s1.7.7 2.9.7 2-1.1 2.7-2.1c.9-1.2 1.2-2.4 1.2-2.5 0 0-2.3-.9-2.3-3.5zM14.2 6.3c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.3-.6.7-1.1 1.7-1 2.7 1 .1 2-.4 2.7-1.1z" />
+  </svg>
+);
+const Contactless = () => (
+  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="var(--p-green)" strokeWidth="2" strokeLinecap="round">
+    <path d="M8 6a8 8 0 0 1 0 12M12 4a11 11 0 0 1 0 16M4 8a5 5 0 0 1 0 8" />
+  </svg>
+);
+const FaceId = () => (
+  <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="var(--p-green)" strokeWidth="1.6" strokeLinecap="round">
+    <path d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2" />
+    <path d="M9 10v1M15 10v1M12 9v4l-1 1M9.5 15.5c1.5 1 3.5 1 5 0" />
+  </svg>
+);
+const GoogleG = ({ large }: { large?: boolean }) => (
+  <svg width={large ? 38 : 18} height={large ? 38 : 18} viewBox="0 0 24 24">
+    <path fill="#4285F4" d="M22.5 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.9a5 5 0 0 1-2.2 3.3v2.7h3.5c2-1.9 3.3-4.7 3.3-7.8z" />
+    <path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.5-2.7c-1 .7-2.3 1.1-3.8 1.1-2.9 0-5.4-2-6.3-4.6H2v2.8A11 11 0 0 0 12 23z" />
+    <path fill="#FBBC05" d="M5.7 14.1a6.6 6.6 0 0 1 0-4.2V7.1H2a11 11 0 0 0 0 9.8l3.7-2.8z" />
+    <path fill="#EA4335" d="M12 5.4c1.6 0 3 .6 4.2 1.6l3.1-3.1A11 11 0 0 0 2 7.1l3.7 2.8C6.6 7.4 9.1 5.4 12 5.4z" />
+  </svg>
+);
+const Signal = () => (
+  <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor">
+    <rect x="0" y="7" width="3" height="4" rx="1" />
+    <rect x="4.5" y="5" width="3" height="6" rx="1" />
+    <rect x="9" y="3" width="3" height="8" rx="1" />
+    <rect x="13.5" y="0" width="3" height="11" rx="1" />
+  </svg>
+);
+const Wifi = () => (
+  <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor">
+    <path d="M8 11l2.3-2.9a3 3 0 0 0-4.6 0L8 11zM8 4.5a6.5 6.5 0 0 1 4.7 2l1.3-1.6a8.5 8.5 0 0 0-12 0L3.3 6.5A6.5 6.5 0 0 1 8 4.5z" />
+  </svg>
+);
+const Battery = () => (
+  <svg width="25" height="12" viewBox="0 0 25 12" fill="none">
+    <rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke="currentColor" opacity="0.4" />
+    <rect x="2" y="2" width="18" height="8" rx="1.5" fill="currentColor" />
+    <rect x="23" y="4" width="1.5" height="4" rx="0.75" fill="currentColor" opacity="0.4" />
+  </svg>
+);
diff --git a/components/grid-wallet-demo/src/components/Sidebar.module.scss b/components/grid-wallet-demo/src/components/Sidebar.module.scss
new file mode 100644
index 00000000..6345f170
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Sidebar.module.scss
@@ -0,0 +1,291 @@
+@use '@lightsparkdev/origin/src/tokens/text-styles' as *;
+
+.section {
+  margin-bottom: var(--spacing-xl);
+}
+.sectionLabel {
+  @include label-sm;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: var(--spacing-sm);
+  font-feature-settings: 'salt' 1;
+}
+
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+/* "Explore actions" disclosure (mirrors flow-builder's popular-flows row) */
+.disclosure {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  width: 100%;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: color 150ms ease;
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+.disclosureText {
+  @include label-sm;
+  font-feature-settings: 'salt' 1;
+}
+.disclosureChev {
+  display: flex;
+  transition: transform 200ms ease;
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+}
+.disclosureChevOpen {
+  transform: rotate(180deg);
+}
+.disclosureLine {
+  flex: 1;
+  height: var(--stroke-xs);
+  background: var(--border-tertiary);
+  margin-left: var(--spacing-xs);
+}
+
+.actionList {
+  display: none;
+  gap: var(--spacing-4xs);
+  margin-top: var(--spacing-sm);
+}
+.actionListOpen {
+  display: flex;
+}
+
+/* Compact InputCard — same box treatment as the flow builder, smaller */
+.miniCard,
+.actionCard {
+  all: unset;
+  box-sizing: border-box;
+  corner-shape: squircle;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
+  background: var(--surface-base);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  border-radius: var(--corner-radius-md);
+  cursor: pointer;
+  transition: border-color 150ms ease, background 150ms ease, opacity 150ms ease;
+
+  :global([data-theme='dark']) & {
+    background: var(--surface-primary);
+  }
+}
+
+.miniCard:hover {
+  border-color: var(--border-secondary);
+}
+
+.miniCardActive {
+  border-color: var(--text-primary);
+  box-shadow: inset 0 0 0 var(--stroke-xs) var(--text-primary);
+}
+
+.miniCardSoon {
+  opacity: 0.5;
+  cursor: not-allowed;
+  &:hover {
+    border-color: var(--border-tertiary);
+  }
+}
+
+.miniIconBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--surface-primary);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  border-radius: var(--corner-radius-sm);
+  color: var(--icon-primary);
+  flex-shrink: 0;
+
+  :global([data-theme='dark']) & {
+    background: var(--color-gray-925);
+  }
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+}
+
+.miniText {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+.miniTitle {
+  @include label-sm;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-feature-settings: 'salt' 1;
+}
+.miniDesc {
+  @include label-xs;
+  color: var(--text-secondary);
+  font-feature-settings: 'salt' 1;
+}
+
+.soonBadge {
+  @include label-xs;
+  color: var(--text-tertiary);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  border-radius: var(--corner-radius-2xs);
+  padding: 0 var(--spacing-3xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* Auth chips — pick & choose, Privy-style */
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
+.chip {
+  all: unset;
+  box-sizing: border-box;
+  corner-shape: squircle;
+  @include label-sm;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4xs);
+  height: 34px;
+  padding: 0 var(--spacing-sm);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  border-radius: var(--corner-radius-sm);
+  background: var(--surface-base);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-feature-settings: 'salt' 1;
+  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
+
+  :global([data-theme='dark']) & {
+    background: var(--surface-primary);
+  }
+  &:hover:not(:disabled) {
+    color: var(--text-primary);
+    border-color: var(--border-secondary);
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+}
+.chipActive {
+  border-color: var(--text-primary);
+  color: var(--text-primary);
+  box-shadow: inset 0 0 0 var(--stroke-xs) var(--text-primary);
+}
+
+/* Action rows — compact, single-line; disabled until prerequisites met */
+.actionRow {
+  all: unset;
+  box-sizing: border-box;
+  corner-shape: squircle;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border-radius: var(--corner-radius-sm);
+  cursor: not-allowed;
+  opacity: 0.4;
+  transition: background 150ms ease, opacity 150ms ease;
+}
+.actionRowIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--corner-radius-sm);
+  background: var(--surface-base);
+  border: var(--stroke-xs) solid var(--border-tertiary);
+  color: var(--text-primary);
+  flex-shrink: 0;
+  :global([data-theme='dark']) & {
+    background: var(--surface-primary);
+  }
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+}
+.actionRowLabel {
+  @include body-sm;
+  color: var(--text-primary);
+  flex: 1;
+  font-feature-settings: 'salt' 1;
+}
+.actionRowCheck {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--corner-radius-round);
+  corner-shape: round;
+  background: var(--surface-secondary);
+  color: var(--text-primary);
+  flex-shrink: 0;
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+}
+.actionEnabled {
+  opacity: 1;
+  cursor: pointer;
+  &:hover {
+    background: var(--color-alpha-black-04);
+    :global([data-theme='dark']) & {
+      background: var(--color-alpha-white-06);
+    }
+  }
+}
+.actionDone {
+  opacity: 1;
+}
+
+.resetBtn {
+  all: unset;
+  box-sizing: border-box;
+  @include label-sm;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4xs);
+  align-self: flex-start;
+  padding: var(--spacing-2xs) 0;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-feature-settings: 'salt' 1;
+  transition: color 150ms ease;
+  &:hover:not(:disabled) {
+    color: var(--text-primary);
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  svg path {
+    vector-effect: non-scaling-stroke;
+  }
+}
diff --git a/components/grid-wallet-demo/src/components/Sidebar.tsx b/components/grid-wallet-demo/src/components/Sidebar.tsx
new file mode 100644
index 00000000..cc965ae1
--- /dev/null
+++ b/components/grid-wallet-demo/src/components/Sidebar.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { useState } from 'react';
+import clsx from 'clsx';
+import type { AuthMethod, Persona } from '@/data/flow';
+import { ACTIONS, type ActionId, type WalletState } from '@/data/actions';
+import { IconChevronBottom } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconChevronBottom';
+import { IconWallet1 } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconWallet1';
+import { IconSparklesTwo } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconSparklesTwo';
+import { IconBank } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconBank';
+import { IconFingerPrint1 } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconFingerPrint1';
+import { IconGoogle } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconGoogle';
+import { IconApple } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconApple';
+import { IconMailbox } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconMailbox';
+import { IconPhone } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconPhone';
+import { IconPlusMedium } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconPlusMedium';
+import { IconSend } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconSend';
+import { IconCreditCard1 } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconCreditCard1';
+import { IconCreditCardAdd } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconCreditCardAdd';
+import { IconCheckmark1Small } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconCheckmark1Small';
+import { IconRotate360Left } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconRotate360Left';
+import styles from './Sidebar.module.scss';
+
+type IconCmp = typeof IconWallet1;
+
+const PERSONAS: { id: Persona; label: string; desc: string; Icon: IconCmp; soon?: boolean }[] = [
+  { id: 'fintech', label: 'Fintech / Neobank', desc: 'Dollar accounts & cards', Icon: IconWallet1 },
+  { id: 'social', label: 'Social platform', desc: 'Creator payouts', Icon: IconSparklesTwo, soon: true },
+  { id: 'marketplace', label: 'Marketplace', desc: 'Buyer & seller balances', Icon: IconBank, soon: true },
+];
+
+const METHODS: { id: AuthMethod; label: string; Icon: IconCmp }[] = [
+  { id: 'passkey', label: 'Passkey', Icon: IconFingerPrint1 },
+  { id: 'oauth', label: 'Google', Icon: IconGoogle },
+  { id: 'apple', label: 'Apple', Icon: IconApple },
+  { id: 'email_otp', label: 'Email', Icon: IconMailbox },
+  { id: 'sms', label: 'Phone', Icon: IconPhone },
+];
+
+const ACTION_ICON: Record<ActionId, IconCmp> = {
+  create: IconWallet1,
+  add: IconPlusMedium,
+  send: IconSend,
+  withdraw: IconBank,
+  card: IconCreditCardAdd,
+  tap: IconCreditCard1,
+};
+
+export default function Sidebar({
+  persona,
+  setPersona,
+  method,
+  setMethod,
+  wallet,
+  onAction,
+  running,
+  onReset,
+}: {
+  persona: Persona;
+  setPersona: (p: Persona) => void;
+  method: AuthMethod;
+  setMethod: (m: AuthMethod) => void;
+  wallet: WalletState;
+  onAction: (id: ActionId) => void;
+  running: boolean;
+  onReset: () => void;
+}) {
+  const [actionsOpen, setActionsOpen] = useState(false);
+  return (
+    <>
+      <section className={styles.section}>
+        <div className={styles.sectionLabel}>Use case</div>
+        <div className={styles.cards}>
+          {PERSONAS.map((p) => (
+            <button
+              key={p.id}
+              className={clsx(styles.miniCard, persona === p.id && styles.miniCardActive, p.soon && styles.miniCardSoon)}
+              onClick={() => !p.soon && setPersona(p.id)}
+              disabled={p.soon}
+            >
+              <span className={styles.miniIconBox}>
+                <p.Icon size={18} />
+              </span>
+              <span className={styles.miniText}>
+                <span className={styles.miniTitle}>
+                  {p.label}
+                  {p.soon && <span className={styles.soonBadge}>Soon</span>}
+                </span>
+                <span className={styles.miniDesc}>{p.desc}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionLabel}>Sign-in method</div>
+        <div className={styles.chips}>
+          {METHODS.map((m) => (
+            <button
+              key={m.id}
+              className={clsx(styles.chip, method === m.id && styles.chipActive)}
+              onClick={() => setMethod(m.id)}
+              disabled={running || wallet.created}
+              title={wallet.created ? 'Reset to change sign-in method' : undefined}
+            >
+              <m.Icon size={15} />
+              {m.label}
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <button
+          className={styles.disclosure}
+          onClick={() => setActionsOpen((o) => !o)}
+          aria-expanded={actionsOpen}
+        >
+          <span className={styles.disclosureText}>Explore actions</span>
+          <span className={clsx(styles.disclosureChev, actionsOpen && styles.disclosureChevOpen)}>
+            <IconChevronBottom size={14} />
+          </span>
+          <span className={styles.disclosureLine} />
+        </button>
+        <div className={clsx(styles.cards, styles.actionList, actionsOpen && styles.actionListOpen)}>
+          {ACTIONS.map((a) => {
+            const Icon = ACTION_ICON[a.id];
+            const enabled = a.available(wallet) && !running;
+            const done = a.done?.(wallet) ?? false;
+            return (
+              <button
+                key={a.id}
+                className={clsx(styles.actionRow, enabled && styles.actionEnabled, done && styles.actionDone)}
+                onClick={() => enabled && onAction(a.id)}
+                disabled={!enabled}
+              >
+                <span className={styles.actionRowIcon}>
+                  <Icon size={16} />
+                </span>
+                <span className={styles.actionRowLabel}>{a.label}</span>
+                {done && (
+                  <span className={styles.actionRowCheck}>
+                    <IconCheckmark1Small size={13} />
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      {wallet.created && (
+        <button className={styles.resetBtn} onClick={onReset} disabled={running}>
+          <IconRotate360Left size={14} />
+          Start over
+        </button>
+      )}
+    </>
+  );
+}
diff --git a/components/grid-wallet-demo/src/data/actions.ts b/components/grid-wallet-demo/src/data/actions.ts
new file mode 100644
index 00000000..a15f14da
--- /dev/null
+++ b/components/grid-wallet-demo/src/data/actions.ts
@@ -0,0 +1,295 @@
+/* Action-driven playground model. The user freely triggers actions on the
+   Global Account; each produces a short on-phone sequence + Grid API calls. */
+
+import {
+  credentialCalls,
+  GRID_BASE,
+  CUSTOMER,
+  type ApiCall,
+  type AuthMethod,
+  type PhoneState,
+  type ScreenId,
+  type Tx,
+} from './flow';
+
+export interface WalletState {
+  created: boolean;
+  balanceCents: number;
+  hasCard: boolean;
+  cardActivated: boolean;
+  activity: Tx[];
+}
+
+export const initialWallet: WalletState = {
+  created: false,
+  balanceCents: 0,
+  hasCard: false,
+  cardActivated: false,
+  activity: [],
+};
+
+export function fmt(cents: number): string {
+  return (
+    '$' +
+    (cents / 100).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+  );
+}
+
+export type ActionId = 'create' | 'add' | 'send' | 'withdraw' | 'card' | 'tap';
+
+export interface ActionDef {
+  id: ActionId;
+  label: string;
+  desc: string;
+  icon: string; // resolved to a central-icons component in the Sidebar
+  available: (s: WalletState) => boolean;
+  done?: (s: WalletState) => boolean;
+}
+
+export const ACTIONS: ActionDef[] = [
+  {
+    id: 'create',
+    label: 'Create account',
+    desc: 'Spin up a Global money account',
+    icon: 'wallet',
+    available: (s) => !s.created,
+    done: (s) => s.created,
+  },
+  {
+    id: 'add',
+    label: 'Add money',
+    desc: 'Fund from a linked bank',
+    icon: 'plus',
+    available: (s) => s.created,
+  },
+  {
+    id: 'send',
+    label: 'Send payment',
+    desc: 'Pay another account',
+    icon: 'send',
+    available: (s) => s.created && s.balanceCents > 0,
+  },
+  {
+    id: 'withdraw',
+    label: 'Withdraw',
+    desc: 'Cash out to a bank',
+    icon: 'bank',
+    available: (s) => s.created && s.balanceCents > 0,
+  },
+  {
+    id: 'card',
+    label: 'Issue a card',
+    desc: 'Virtual card for the balance',
+    icon: 'card',
+    available: (s) => s.created && !s.hasCard,
+    done: (s) => s.hasCard,
+  },
+  {
+    id: 'tap',
+    label: 'Tap to pay',
+    desc: 'Spend at a store',
+    icon: 'tap',
+    available: (s) => s.hasCard,
+  },
+];
+
+export interface Frame {
+  screen: ScreenId;
+  note?: string;
+  activated?: boolean;
+  ms: number;
+}
+
+export interface ActionResult {
+  calls: ApiCall[];
+  frames: Frame[];
+  next: WalletState;
+}
+
+const ADD = 500000;
+const SEND = 25000;
+const WITHDRAW = 20000;
+const COFFEE = 732;
+
+/** Resolve the phone view for a settled wallet state. */
+export function phoneFromState(s: WalletState): PhoneState {
+  if (!s.created) {
+    return { screen: 'auth', balance: '$0.00', hasCard: false, cardActivated: false, activity: [] };
+  }
+  return {
+    screen: s.hasCard ? 'card' : 'wallet',
+    balance: fmt(s.balanceCents),
+    hasCard: s.hasCard,
+    cardActivated: s.cardActivated,
+    activity: s.activity,
+  };
+}
+
+export function runAction(id: ActionId, s: WalletState, method: AuthMethod): ActionResult {
+  switch (id) {
+    case 'create':
+      return {
+        calls: [
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/customers`,
+            reqBody: { fullName: 'Ava Martínez', email: 'ava@example.com', country: 'US' },
+            status: '201 Created',
+            note: 'Returns a customer with an embedded Global Account.',
+          },
+          ...credentialCalls(method),
+          {
+            method: 'GET',
+            path: `${GRID_BASE}/internal-accounts?customerId=${CUSTOMER.split(':')[1].slice(0, 8)}…&type=EMBEDDED_WALLET`,
+            status: '200 OK',
+            note: 'The auto-provisioned Global Account, balance 0.',
+          },
+        ],
+        frames: [
+          { screen: 'creating', note: 'Creating your account…', ms: 1000 },
+          { screen: 'credential', ms: 1100 },
+        ],
+        next: { ...s, created: true, balanceCents: 0 },
+      };
+
+    case 'add':
+      return {
+        calls: [
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/quotes`,
+            reqBody: {
+              source: { sourceType: 'ACCOUNT', accountType: 'US_ACCOUNT' },
+              destination: { destinationType: 'ACCOUNT' },
+              lockedCurrencySide: 'SENDING',
+              lockedCurrencyAmount: ADD,
+            },
+            status: '201 Created',
+            note: 'Locked quote, $5,000.00.',
+          },
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/transfer-in`,
+            reqBody: { quoteId: 'Quote:01954…' },
+            status: '202 Accepted',
+            note: 'Funds settle to the balance.',
+          },
+        ],
+        frames: [{ screen: 'addmoney', note: 'Adding $5,000.00', ms: 1300 }],
+        next: {
+          ...s,
+          balanceCents: s.balanceCents + ADD,
+          activity: [
+            { kind: 'bank', name: 'Bank account (•••• 3872)', sub: 'Added · Just now', amount: '+$5,000.00', positive: true },
+            ...s.activity,
+          ],
+        },
+      };
+
+    case 'send':
+      return {
+        calls: [
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/quotes`,
+            reqBody: {
+              source: { sourceType: 'ACCOUNT' },
+              destination: { destinationType: 'UMA_ADDRESS', umaAddress: '$leo@grid.app' },
+              lockedCurrencySide: 'SENDING',
+              lockedCurrencyAmount: SEND,
+            },
+            status: '201 Created',
+          },
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/transfer-out`,
+            reqBody: { quoteId: 'Quote:01955…' },
+            status: '202 Accepted',
+            note: 'Requires Grid-Wallet-Signature from the customer credential.',
+          },
+        ],
+        frames: [{ screen: 'send', note: 'Sending $250.00', ms: 1300 }],
+        next: {
+          ...s,
+          balanceCents: s.balanceCents - SEND,
+          activity: [
+            { kind: 'send', name: 'Sent to $leo@grid.app', sub: 'Payment · Just now', amount: '-$250.00' },
+            ...s.activity,
+          ],
+        },
+      };
+
+    case 'withdraw':
+      return {
+        calls: [
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/quotes`,
+            reqBody: {
+              source: { sourceType: 'ACCOUNT' },
+              destination: { destinationType: 'ACCOUNT', accountType: 'US_ACCOUNT' },
+              lockedCurrencySide: 'SENDING',
+              lockedCurrencyAmount: WITHDRAW,
+            },
+            status: '201 Created',
+          },
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/transfer-out`,
+            reqBody: { quoteId: 'Quote:01956…' },
+            status: '202 Accepted',
+            note: 'Signed withdrawal to the linked bank.',
+          },
+        ],
+        frames: [{ screen: 'withdraw', note: 'Withdraw $200.00', ms: 1300 }],
+        next: {
+          ...s,
+          balanceCents: s.balanceCents - WITHDRAW,
+          activity: [
+            { kind: 'bank', name: 'Bank account (•••• 3872)', sub: 'Withdrawal · Just now', amount: '-$200.00' },
+            ...s.activity,
+          ],
+        },
+      };
+
+    case 'card':
+      return {
+        calls: [
+          {
+            method: 'POST',
+            path: `${GRID_BASE}/cards`,
+            reqBody: { customerId: `${CUSTOMER.split(':')[1].slice(0, 8)}…`, type: 'VIRTUAL' },
+            status: '201 Created',
+            note: 'Card provisionable to Apple/Google Wallet.',
+          },
+        ],
+        frames: [{ screen: 'card-reveal', ms: 2400 }],
+        next: { ...s, hasCard: true },
+      };
+
+    case 'tap':
+      return {
+        calls: [
+          {
+            method: 'GET',
+            path: `${GRID_BASE}/transactions?accountId=01954…&limit=1`,
+            status: '200 OK',
+            note: 'transaction.authorized — $7.32 at Blue Bottle Coffee.',
+          },
+        ],
+        frames: [
+          { screen: 'tap', note: 'Hold near reader', activated: false, ms: 1100 },
+          { screen: 'tap', note: 'Done', activated: true, ms: 900 },
+        ],
+        next: {
+          ...s,
+          cardActivated: true,
+          balanceCents: s.balanceCents - COFFEE,
+          activity: [
+            { kind: 'coffee', name: 'Blue Bottle Coffee', sub: 'Card · Just now', amount: '-$7.32' },
+            ...s.activity,
+          ],
+        },
+      };
+  }
+}
diff --git a/components/grid-wallet-demo/src/data/flow.ts b/components/grid-wallet-demo/src/data/flow.ts
new file mode 100644
index 00000000..dbffca04
--- /dev/null
+++ b/components/grid-wallet-demo/src/data/flow.ts
@@ -0,0 +1,139 @@
+/* ============================================================
+   Core types + Grid API call shapes for the playground.
+   The demo is action-driven (like the flow builder): the user
+   picks a use case + sign-in method, creates a Global Account,
+   then freely triggers actions on the app.
+   ============================================================ */
+
+export type Persona = 'fintech' | 'social' | 'marketplace';
+export type AuthMethod = 'passkey' | 'oauth' | 'apple' | 'email_otp' | 'sms';
+
+export const GRID_BASE = '/grid/2025-10-13';
+
+export type ScreenId =
+  | 'auth'
+  | 'creating'
+  | 'credential'
+  | 'wallet'
+  | 'addmoney'
+  | 'send'
+  | 'withdraw'
+  | 'card'
+  | 'card-reveal'
+  | 'tap';
+
+export interface Tx {
+  kind: 'bank' | 'card' | 'coffee' | 'send';
+  name: string;
+  sub: string;
+  amount: string;
+  positive?: boolean;
+}
+
+export interface PhoneState {
+  screen: ScreenId;
+  balance: string;
+  hasCard: boolean;
+  cardActivated: boolean;
+  activity: Tx[];
+  note?: string;
+}
+
+export interface ApiCall {
+  method: 'GET' | 'POST';
+  path: string;
+  reqBody?: Record<string, unknown>;
+  status: string;
+  note?: string;
+}
+
+const AUTH_LABEL: Record<AuthMethod, string> = {
+  passkey: 'Passkey',
+  oauth: 'Google',
+  apple: 'Apple',
+  email_otp: 'Email',
+  sms: 'Phone',
+};
+
+export function authLabel(m: AuthMethod) {
+  return AUTH_LABEL[m];
+}
+
+export function authCta(m: AuthMethod) {
+  return `Continue with ${AUTH_LABEL[m].toLowerCase()}`;
+}
+
+const CUSTOMER = 'Customer:019542f5-b3e7-1d02-0000-000000000001';
+
+/** Credential registration call(s) by method. */
+export function credentialCalls(method: AuthMethod): ApiCall[] {
+  if (method === 'passkey') {
+    return [
+      {
+        method: 'POST',
+        path: `${GRID_BASE}/auth/credentials`,
+        reqBody: {
+          customerId: CUSTOMER,
+          credentialType: 'PASSKEY',
+          challenge: 'ArkQi2yAYHPlgnJNFBlneIwchQdWX…',
+          attestation: '<webauthn attestation>',
+        },
+        status: '201 Created',
+        note: 'Passkey bound to the account. Returns AuthMethod id + first-auth challenge.',
+      },
+    ];
+  }
+  if (method === 'oauth' || method === 'apple') {
+    return [
+      {
+        method: 'POST',
+        path: `${GRID_BASE}/auth/credentials`,
+        reqBody: {
+          customerId: CUSTOMER,
+          credentialType: 'OAUTH',
+          provider: method === 'apple' ? 'apple' : 'google',
+          idToken: '<OIDC id_token>',
+        },
+        status: '201 Created',
+        note: 'OIDC identity verified and bound to the account.',
+      },
+    ];
+  }
+  if (method === 'sms') {
+    return [
+      {
+        method: 'POST',
+        path: `${GRID_BASE}/auth/credentials`,
+        reqBody: { customerId: CUSTOMER, credentialType: 'SMS_OTP', phone: '+1 415 555 0148' },
+        status: '202 Accepted',
+        note: 'OTP sent by SMS.',
+      },
+      {
+        method: 'POST',
+        path: `${GRID_BASE}/auth/verify`,
+        reqBody: { requestId: 'AuthRequest:01954…', otp: '123456' },
+        status: '200 OK',
+        note: 'OTP verified; credential active.',
+      },
+    ];
+  }
+  // email_otp
+  return [
+    {
+      method: 'POST',
+      path: `${GRID_BASE}/auth/credentials`,
+      reqBody: { customerId: CUSTOMER, credentialType: 'EMAIL_OTP', email: 'ava@example.com' },
+      status: '202 Accepted',
+      note: 'OTP dispatched to the customer’s email.',
+    },
+    {
+      method: 'POST',
+      path: `${GRID_BASE}/auth/verify`,
+      reqBody: { requestId: 'AuthRequest:01954…', otp: '123456' },
+      status: '200 OK',
+      note: 'OTP verified; credential active.',
+    },
+  ];
+}
+
+export { CUSTOMER };
diff --git a/components/grid-wallet-demo/src/hooks/useTheme.ts b/components/grid-wallet-demo/src/hooks/useTheme.ts
new file mode 100644
index 00000000..1fa863b5
--- /dev/null
+++ b/components/grid-wallet-demo/src/hooks/useTheme.ts
@@ -0,0 +1,74 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+
+export type Theme = 'light' | 'dark';
+
+/**
+ * Theme state for the demo.
+ *
+ * Embed contract (identical to grid-visualizer / flow-builder):
+ *  - Initial theme comes from the `?theme=` query param the docs page sets on the iframe src.
+ *  - On mount we post `{ type: 'theme-request' }` to the parent, which replies with
+ *    `{ type: 'theme-sync', theme }`.
+ *  - The parent also pushes `theme-sync` whenever the docs theme toggles.
+ *  - We mirror the resolved theme onto `data-theme` for CSS.
+ */
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>('light');
+
+  const apply = useCallback((t: Theme) => {
+    setThemeState(t);
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', t);
+    }
+  }, []);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const paramTheme = params.get('theme');
+    const stored = localStorage.getItem('grid-wallet-theme') as Theme | null;
+    const resolved: Theme =
+      paramTheme === 'dark' || paramTheme === 'light'
+        ? paramTheme
+        : stored === 'dark' || stored === 'light'
+          ? stored
+          : window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    apply(resolved);
+
+    const onMessage = (e: MessageEvent) => {
+      if (e.data && e.data.type === 'theme-sync') {
+        const t: Theme = e.data.theme === 'dark' ? 'dark' : 'light';
+        apply(t);
+      }
+    };
+    window.addEventListener('message', onMessage);
+
+    // Ask the parent (if embedded) for the current theme.
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage({ type: 'theme-request' }, '*');
+    }
+
+    return () => window.removeEventListener('message', onMessage);
+  }, [apply]);
+
+  const setTheme = useCallback(
+    (t: Theme) => {
+      apply(t);
+      localStorage.setItem('grid-wallet-theme', t);
+      // Tell the parent so the docs page stays in sync when toggled from inside.
+      if (window.parent && window.parent !== window) {
+        window.parent.postMessage({ type: 'theme-sync', theme: t }, '*');
+      }
+    },
+    [apply],
+  );
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  }, [theme, setTheme]);
+
+  return { theme, setTheme, toggleTheme };
+}
diff --git a/components/grid-wallet-demo/tsconfig.json b/components/grid-wallet-demo/tsconfig.json
new file mode 100644
index 00000000..e3447617
--- /dev/null
+++ b/components/grid-wallet-demo/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "../origin"]
+}
diff --git a/mintlify/docs.json b/mintlify/docs.json
index d3280b5d..6247e3a2 100644
--- a/mintlify/docs.json
+++ b/mintlify/docs.json
@@ -79,6 +79,7 @@
             "group": "Overview",
             "pages": [
               "global-accounts/index",
+              "global-accounts/demo",
               "global-accounts/implementation-overview"
             ]
           },
@@ -402,7 +403,7 @@
   },
   "footer": {},
   "head": {
-    "raw": "<style>@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Regular.woff2\") format(\"woff2\");font-weight:400;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Book.woff2\") format(\"woff2\");font-weight:450;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Medium.woff2\") format(\"woff2\");font-weight:500;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Medium.woff2\") format(\"woff2\");font-weight:700;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl Mono\";src:url(\"/fonts/suisse-intl-mono/SuisseIntlMono-Regular-WebXL.woff2\") format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:\"Suisse Intl Mono\";src:url(\"/fonts/suisse-intl-mono/SuisseIntlMono-Bold-WebXL.woff2\") format(\"woff2\");font-weight:700;font-style:normal;font-display:swap}*{font-feature-settings:\"salt\" on}</style><style>#header:empty,#page-title:empty{display:none!important}</style><script>if(location.pathname==='/'||location.pathname==='/index'||location.pathname===''){document.write('<style>header#header,#page-title,#page-context-menu-button,#page-context-menu,.eyebrow,#pagination,[class*=\"space-y-2\"]>*{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}</style>');document.documentElement.classList.add('is-homepage');}</script><style>html.is-homepage #pagination,body.is-homepage #pagination,html.is-homepage #footer,body.is-homepage #footer,html.is-homepage header#header,body.is-homepage header#header,html.is-homepage #page-title,body.is-homepage #page-title,html.is-homepage #page-context-menu-button,body.is-homepage #page-context-menu-button,html.is-homepage #page-context-menu,body.is-homepage #page-context-menu,html.is-homepage .eyebrow,body.is-homepage .eyebrow{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important}</style><script>if(location.pathname==='/flow-builder'){document.write('<style>header#header,#page-title,#page-context-menu-button,#page-context-menu,.eyebrow,#pagination{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}</style>');}</script><style>html:has(#flow-builder-container) header#header,html:has(#flow-builder-container) #page-title,html:has(#flow-builder-container) .eyebrow,html:has(#flow-builder-container) #page-context-menu-button,html:has(#flow-builder-container) #page-context-menu,html:has(#flow-builder-container) #pagination{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}</style>",
+    "raw": "<style>@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Regular.woff2\") format(\"woff2\");font-weight:400;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Book.woff2\") format(\"woff2\");font-weight:450;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Medium.woff2\") format(\"woff2\");font-weight:500;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl\";src:url(\"/fonts/suisse-intl/SuisseIntl-Medium.woff2\") format(\"woff2\");font-weight:700;font-style:normal;font-display:swap;ascent-override:85%;descent-override:15%;line-gap-override:0%}@font-face{font-family:\"Suisse Intl Mono\";src:url(\"/fonts/suisse-intl-mono/SuisseIntlMono-Regular-WebXL.woff2\") format(\"woff2\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:\"Suisse Intl Mono\";src:url(\"/fonts/suisse-intl-mono/SuisseIntlMono-Bold-WebXL.woff2\") format(\"woff2\");font-weight:700;font-style:normal;font-display:swap}*{font-feature-settings:\"salt\" on}</style><style>#header:empty,#page-title:empty{display:none!important}</style><script>if(location.pathname==='/'||location.pathname==='/index'||location.pathname===''){document.write('<style>header#header,#page-title,#page-context-menu-button,#page-context-menu,.eyebrow,#pagination,[class*=\"space-y-2\"]>*{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}</style>');document.documentElement.classList.add('is-homepage');}</script><style>html.is-homepage #pagination,body.is-homepage #pagination,html.is-homepage #footer,body.is-homepage #footer,html.is-homepage header#header,body.is-homepage header#header,html.is-homepage #page-title,body.is-homepage #page-title,html.is-homepage #page-context-menu-button,body.is-homepage #page-context-menu-button,html.is-homepage #page-context-menu,body.is-homepage #page-context-menu,html.is-homepage .eyebrow,body.is-homepage .eyebrow{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important}</style><script>if(location.pathname==='/flow-builder'||location.pathname==='/global-accounts/demo'){document.write('<style>header#header,#page-title,#page-context-menu-button,#page-context-menu,.eyebrow,#pagination{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}</style>');}</script><style>html:has(#flow-builder-container) header#header,html:has(#flow-builder-container) #page-title,html:has(#flow-builder-container) .eyebrow,html:has(#flow-builder-container) #page-context-menu-button,html:has(#flow-builder-container) #page-context-menu,html:has(#flow-builder-container) #pagination{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}</style><style>html:has(#wallet-demo-container) header#header,html:has(#wallet-demo-container) #page-title,html:has(#wallet-demo-container) .eyebrow,html:has(#wallet-demo-container) #page-context-menu-button,html:has(#wallet-demo-container) #page-context-menu,html:has(#wallet-demo-container) #pagination{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}</style>",
     "links": [
       {
         "rel": "preload",
diff --git a/mintlify/global-accounts/demo.mdx b/mintlify/global-accounts/demo.mdx
new file mode 100644
index 00000000..49e6f67f
--- /dev/null
+++ b/mintlify/global-accounts/demo.mdx
@@ -0,0 +1,70 @@
+---
+title: "See it live"
+description: "Create a Global Account and watch the Grid API calls fire in real time"
+mode: "custom"
+"og:image": "/images/og/og-global-accounts.webp"
+---
+
+export const WalletDemoEmbed = () => {
+  const [src, setSrc] = React.useState(null);
+
+  React.useEffect(() => {
+    const isDark = document.documentElement.classList.contains('dark');
+    // Point at the local app when previewing docs on localhost, else the deployed app.
+    const isLocal = ['localhost', '127.0.0.1'].includes(window.location.hostname);
+    const base = isLocal ? 'http://localhost:4000' : 'https://grid-wallet-demo.vercel.app';
+    setSrc(base + '/?embed=true&theme=' + (isDark ? 'dark' : 'light'));
+
+    let ignoreNextMutation = false;
+
+    const sendTheme = () => {
+      const t = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+      const iframe = document.getElementById('wallet-demo-iframe');
+      if (iframe && iframe.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'theme-sync', theme: t }, '*');
+      }
+    };
+
+    const handleMessage = (e) => {
+      if (e.data && e.data.type === 'theme-request') {
+        sendTheme();
+        return;
+      }
+      if (e.data && e.data.type === 'theme-sync') {
+        const isDark = document.documentElement.classList.contains('dark');
+        const wantsDark = e.data.theme === 'dark';
+        if (isDark !== wantsDark) {
+          ignoreNextMutation = true;
+          document.documentElement.classList.toggle('dark');
+        }
+      }
+    };
+    window.addEventListener('message', handleMessage);
+
+    const obs = new MutationObserver(() => {
+      if (ignoreNextMutation) { ignoreNextMutation = false; return; }
+      sendTheme();
+    });
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      obs.disconnect();
+    };
+  }, []);
+
+  if (!src) return null;
+
+  return (
+    <iframe
+      id="wallet-demo-iframe"
+      src={src}
+      title="Grid Global Accounts — live demo"
+      allow="clipboard-write"
+    />
+  );
+};
+
+<div id="wallet-demo-container">
+  <WalletDemoEmbed />
+</div>
diff --git a/mintlify/style.css b/mintlify/style.css
index 69d88540..01416cee 100644
--- a/mintlify/style.css
+++ b/mintlify/style.css
@@ -4076,3 +4076,64 @@ html.dark:has(#flow-builder-container) #navbar button[class*="h-14"][class*="tex
   color: var(--ls-gray-700);
 }
 
+/* Wallet demo iframe — full bleed (mirrors flow-builder) */
+#wallet-demo-container {
+  position: fixed !important;
+  top: 112px !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: calc(100dvh - 112px) !important;
+  z-index: 1;
+  aspect-ratio: unset !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: var(--ls-gray-100) !important;
+}
+
+html.dark #wallet-demo-container {
+  background: var(--ls-gray-975) !important;
+}
+
+#wallet-demo-iframe {
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  aspect-ratio: unset !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+}
+
+/* Kill Mintlify's iframe aspect-ratio wrapper */
+#wallet-demo-container > div,
+#wallet-demo-container > [style*="aspect-ratio"] {
+  aspect-ratio: unset !important;
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  inset: 0 !important;
+  padding: 0 !important;
+}
+
+#content-area:has(#wallet-demo-container) {
+  padding: 0 !important;
+  max-width: 100% !important;
+}
+
+#content-container:has(#wallet-demo-container) {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+@media (max-width: 1023px) {
+  #wallet-demo-container {
+    top: 120px !important;
+    height: calc(100dvh - 120px) !important;
+  }
+}
+
+html:has(#wallet-demo-container),
+html:has(#wallet-demo-container) body {
+  overflow: hidden !important;
+}
+