diff --git a/package.json b/package.json
index c09a7f053d..30a4df4575 100644
--- a/package.json
+++ b/package.json
@@ -144,7 +144,8 @@
   },
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "spikes/*"
     ]
   }
 }
diff --git a/spikes/panda-mf-poc/.gitignore b/spikes/panda-mf-poc/.gitignore
new file mode 100644
index 0000000000..bd9e772318
--- /dev/null
+++ b/spikes/panda-mf-poc/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+styled-system/
+dist/
+src/ui/gamut.css
+.mf/
diff --git a/spikes/panda-mf-poc/README.md b/spikes/panda-mf-poc/README.md
new file mode 100644
index 0000000000..0889406ea0
--- /dev/null
+++ b/spikes/panda-mf-poc/README.md
@@ -0,0 +1,86 @@
+# Rspack + Module Federation spike (GMT-1715)
+
+Branch: `cass-GMT-1715`. A yarn workspace + nx project. Answers: **does Rspack +
+Module Federation (platform's setup) affect the styling-engine decision?**
+
+A minimal MF pair — **host** (`variant="primary"`) + **remote** (exposes a
+`Widget` using `variant="danger"`, a variant the host never renders) — both using
+a Panda-built Gamut `Button`. The host imports the **one complete** Gamut static
+stylesheet; the remote is federated in at runtime.
+
+## Run it
+
+```
+yarn install
+yarn nx run panda-mf-poc:build          # codegen + cssgen + rspack MF build (host + remote)
+# to see it live (dist is static): serve each and open the host
+npx http-server dist/remote -p 3001 --cors &
+npx http-server dist/host   -p 3000 &
+# open http://localhost:3000  → host renders its own primary button + the federated remote danger button
+```
+
+## Answer: does MF affect the styling engine? — Yes, but it's satisfiable, and Panda is _safer_ here than the alternatives
+
+### The one real requirement (and why)
+
+A **zero-runtime** engine emits static CSS and tree-shakes to what each build
+uses. Module Federation loads a remote's components into a host **at runtime** —
+so the remote's styles must already be in the document. A host's own build won't
+include CSS for a variant only the remote uses.
+
+**→ Gamut must ship a COMPLETE static stylesheet** (all recipe variants via
+`staticCss`), imported once by the host. Then every federated remote's Gamut
+components are covered regardless of what the host itself renders.
+
+**Proven here:** the host build emits `gmt-button--variant_danger` even though the
+host only renders `variant="primary"` — because `staticCss: { recipes: { button:
+['*'] } }` force-emits every variant. The remote's `danger` widget is styled by
+the host's sheet. (This is the same `staticCss` requirement documented in
+BREAKING-CHANGES §2/§3.)
+
+### Why Panda is actually SAFER across MF than some alternatives
+
+- **Deterministic, content-based class names** — `gmt-button--variant_danger`,
+  `.bg_primary` (recipe-name + property_value), identical across independent
+  builds. Federated host/remote builds produce the **same** class for the same
+  style, so duplicate CSS is idempotent and there are **no collisions**. Contrast
+  **CSS Modules**, which hash class names **per build** → federated host/remotes
+  get mismatched/duplicated names (a known MF hazard). Zero-runtime _atomic_ CSS
+  is a good fit for MF.
+- **Tokens at `:root`** — `--colors-*` are defined once (host's sheet); remote
+  components reference the same vars. No per-remote theme runtime needed.
+
+### Coexistence / version notes
+
+- Keep **Gamut a shared singleton** across host + remotes (MF `shared`) so class
+  names + tokens match. **Version skew** (host on Gamut vX, remote on vY) is the
+  real risk — different generated classes/tokens → visual drift. Same discipline
+  MF already needs for React.
+- Contrast **Emotion (today)**: runtime injection means each remote self-styles
+  (works out of the box), but MF apps commonly hit **multiple Emotion caches**
+  across remotes (duplicate `<style>`, insertion-order/`:first-child` warnings) +
+  runtime cost. Panda trades that for "ship one static sheet + shared singleton."
+
+### Bottom line
+
+MF **does not block** a Panda swap. It adds two requirements, both satisfied here:
+**(1)** Gamut ships a complete static stylesheet (`staticCss`), imported once by
+the host; **(2)** Gamut is a shared singleton version across host + remotes. With
+those, federated components style correctly, and atomic/recipe class determinism
+makes it _less_ fragile than per-build-hashed CSS Modules.
+
+## Still simplified (vs platform's real setup)
+
+- One host + one remote (platform has ~13 remotes); no runtime version-skew test.
+- Build-validated + CSS-coverage-verified here; live run is the `http-server` step
+  above (not visually verified in CI).
+- Consumer-authored (non-Gamut) styles in a remote still inject per-remote build;
+  content-based atomic classes dedupe, but that path isn't exercised here.
+
+## Files
+
+- `panda.config.ts` — one `button` recipe, `staticCss` all variants
+- `src/ui/gamut.tsx` — the shared Panda `Button`
+- `src/remote/*` — exposes `Widget` (`variant="danger"`)
+- `src/host/*` — renders `variant="primary"` + lazy-loads `remote/Widget`; imports the complete sheet
+- `build.mjs` — rspack `ModuleFederationPlugin` configs for host + remote
diff --git a/spikes/panda-mf-poc/build.mjs b/spikes/panda-mf-poc/build.mjs
new file mode 100644
index 0000000000..0db0533819
--- /dev/null
+++ b/spikes/panda-mf-poc/build.mjs
@@ -0,0 +1,108 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { rspack } from '@rspack/core';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const styledSystem = path.resolve(__dirname, 'styled-system');
+
+/* Aliased so the runtime engine can be declared a federation `shared` singleton —
+ * `shared` keys are request strings, and a relative path can't be one. In real
+ * Gamut this is just `@codecademy/gamut-styles`. */
+const gamutEngine = path.resolve(
+  __dirname,
+  '../panda-styling-poc/src/gamut/engine'
+);
+
+const swc = {
+  test: /\.tsx?$/,
+  loader: 'builtin:swc-loader',
+  options: {
+    jsc: {
+      parser: { syntax: 'typescript', tsx: true },
+      transform: { react: { runtime: 'automatic' } },
+    },
+  },
+};
+
+const common = {
+  mode: 'development',
+  devtool: false,
+  resolve: {
+    extensions: ['.tsx', '.ts', '.mjs', '.js'],
+    alias: { 'styled-system': styledSystem, '@gamut-engine': gamutEngine },
+  },
+  module: { rules: [swc, { test: /\.css$/, type: 'css' }] },
+  experiments: { css: true },
+};
+
+const { ModuleFederationPlugin } = rspack.container;
+const shared = {
+  react: { singleton: true, requiredVersion: false },
+  'react-dom': { singleton: true, requiredVersion: false },
+  /* MANDATORY, not an optimisation. The runtime engine holds React context (the
+   * theme) and the injected-rule registry in module scope; an unshared copy in a
+   * remote gets its own of each, so the host's ThemeProvider becomes invisible to
+   * it. See src/federation/verify.cjs for the failure reproduced. */
+  '@gamut-engine': { singleton: true, requiredVersion: false },
+};
+
+const remoteConfig = {
+  ...common,
+  name: 'remote',
+  entry: { remote: './src/remote/index.ts' },
+  output: {
+    path: path.resolve(__dirname, 'dist/remote'),
+    publicPath: 'http://localhost:3001/',
+    uniqueName: 'remote',
+    clean: true,
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'remote',
+      filename: 'remoteEntry.js',
+      exposes: { './Widget': './src/remote/Widget.tsx' },
+      shared,
+    }),
+    new rspack.HtmlRspackPlugin({ template: './remote.html' }),
+  ],
+};
+
+const hostConfig = {
+  ...common,
+  name: 'host',
+  entry: { host: './src/host/index.ts' },
+  output: {
+    path: path.resolve(__dirname, 'dist/host'),
+    publicPath: 'http://localhost:3000/',
+    uniqueName: 'host',
+    clean: true,
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'host',
+      remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js' },
+      shared,
+    }),
+    new rspack.HtmlRspackPlugin({ template: './host.html' }),
+  ],
+};
+
+const run = (cfg) =>
+  new Promise((res, rej) =>
+    rspack(cfg, (err, stats) => {
+      if (err) return rej(err);
+      if (stats.hasErrors()) {
+        console.error(
+          stats.toString({ colors: false, chunks: false, modules: false })
+        );
+        return rej(new Error(`${cfg.name} build failed`));
+      }
+      console.log(`${cfg.name} built OK`);
+      res();
+    })
+  );
+
+await run(remoteConfig);
+await run(hostConfig);
+console.log('MF build complete.');
diff --git a/spikes/panda-mf-poc/host.html b/spikes/panda-mf-poc/host.html
new file mode 100644
index 0000000000..333f55761e
--- /dev/null
+++ b/spikes/panda-mf-poc/host.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>MF host — Panda Gamut</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/spikes/panda-mf-poc/package.json b/spikes/panda-mf-poc/package.json
new file mode 100644
index 0000000000..a4fd9d8103
--- /dev/null
+++ b/spikes/panda-mf-poc/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "panda-mf-poc",
+  "description": "GMT-1715 spike: Rspack + Module Federation with a Panda-built Gamut (styling across MF boundaries)",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "codegen": "panda codegen",
+    "cssgen": "panda cssgen --outfile src/ui/gamut.css",
+    "build": "panda codegen && panda cssgen --outfile src/ui/gamut.css && node build.mjs",
+    "federation": "esbuild src/federation/copy.tsx --bundle --platform=node --format=cjs --jsx=automatic --external:react --external:react-dom --outfile=.mf/copyA.cjs --log-level=warning && esbuild src/federation/copy.tsx --bundle --platform=node --format=cjs --jsx=automatic --external:react --external:react-dom --outfile=.mf/copyB.cjs --log-level=warning && node src/federation/verify.cjs"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^0.53.0",
+    "@rspack/core": "^1.1.8",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.1",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/spikes/panda-mf-poc/panda.config.ts b/spikes/panda-mf-poc/panda.config.ts
new file mode 100644
index 0000000000..4c85466671
--- /dev/null
+++ b/spikes/panda-mf-poc/panda.config.ts
@@ -0,0 +1,67 @@
+import { defineConfig, defineRecipe } from '@pandacss/dev';
+
+/* Minimal Panda setup for the Module Federation spike — one `button` recipe with
+ * all variants force-emitted (staticCss), so the COMPLETE static sheet a host
+ * imports covers any variant a federated remote uses. */
+const mk = (c: string) => ({
+  bg: c,
+  color: 'background',
+  _hover: { bg: `${c}-hover` },
+});
+
+const button = defineRecipe({
+  className: 'gmt-button',
+  jsx: ['Button'],
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: '2',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderRadius: 'md',
+    px: '16',
+    py: '8',
+    fontFamily: 'base',
+    cursor: 'pointer',
+  },
+  variants: {
+    variant: {
+      primary: mk('primary'),
+      secondary: mk('secondary'),
+      danger: mk('danger'),
+      interface: mk('interface'),
+    },
+  },
+  defaultVariants: { variant: 'primary' },
+});
+
+export default defineConfig({
+  preflight: false,
+  jsxFramework: 'react',
+  include: ['./src/**/*.{ts,tsx}'],
+  outdir: 'styled-system',
+  staticCss: { recipes: { button: ['*'] } },
+  theme: {
+    extend: {
+      tokens: {
+        colors: {
+          primary: { value: '#1557FF' },
+          'primary-hover': { value: '#1145CC' },
+          secondary: { value: '#10162F' },
+          'secondary-hover': { value: '#000000' },
+          danger: { value: '#C60C0C' },
+          'danger-hover': { value: '#9E0A0A' },
+          interface: { value: '#374151' },
+          'interface-hover': { value: '#111111' },
+          background: { value: '#ffffff' },
+        },
+        radii: { md: { value: '4px' } },
+        fonts: { base: { value: 'system-ui, sans-serif' } },
+        spacing: { '8': { value: '8px' }, '16': { value: '16px' } },
+        borderWidths: { '2': { value: '2px' } },
+      },
+      recipes: { button },
+    },
+  },
+});
diff --git a/spikes/panda-mf-poc/project.json b/spikes/panda-mf-poc/project.json
new file mode 100644
index 0000000000..090a3c506d
--- /dev/null
+++ b/spikes/panda-mf-poc/project.json
@@ -0,0 +1,38 @@
+{
+  "name": "panda-mf-poc",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "spikes/panda-mf-poc/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "codegen": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/panda-mf-poc",
+        "command": "yarn codegen"
+      }
+    },
+    "cssgen": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["codegen"],
+      "options": {
+        "cwd": "spikes/panda-mf-poc",
+        "command": "yarn cssgen"
+      }
+    },
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/panda-mf-poc",
+        "command": "yarn build"
+      }
+    },
+    "federation": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/panda-mf-poc",
+        "command": "yarn federation"
+      }
+    }
+  }
+}
diff --git a/spikes/panda-mf-poc/remote.html b/spikes/panda-mf-poc/remote.html
new file mode 100644
index 0000000000..0719a66917
--- /dev/null
+++ b/spikes/panda-mf-poc/remote.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>MF remote — Panda Gamut</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/spikes/panda-mf-poc/src/federation/copy.tsx b/spikes/panda-mf-poc/src/federation/copy.tsx
new file mode 100644
index 0000000000..b3ef4030ab
--- /dev/null
+++ b/spikes/panda-mf-poc/src/federation/copy.tsx
@@ -0,0 +1,37 @@
+import { createElement } from 'react';
+
+import {
+  css,
+  extractStyles,
+  inject,
+  styled,
+  ThemeProvider,
+  useTheme,
+} from '../../../panda-styling-poc/src/gamut/engine';
+
+/* One "copy" of Gamut's runtime styling engine, as a self-contained CJS bundle.
+ *
+ * Built TWICE (copyA.cjs / copyB.cjs) with `react` marked external, so both
+ * copies share one React instance while each gets its own module scope for the
+ * engine. That is precisely what Module Federation produces when `react` is a
+ * shared singleton but `@codecademy/gamut-styles` is NOT — which is the real
+ * configuration in front (`sharedDependencies.js` omits gamut and emotion) and
+ * platform (shares `@emotion/*` but not `@codecademy/gamut`). */
+
+const cardStyles = css({
+  p: 24,
+  bg: 'primary',
+  color: 'background',
+  borderRadius: 'md',
+});
+
+export const Card = styled('div')(cardStyles);
+
+/* Reads the theme out of context and renders an identifying marker, so we can see
+ * whether a provider in one copy is visible to a component in another. */
+export const ThemeProbe = () => {
+  const theme = useTheme() as { marker?: string };
+  return createElement('span', null, theme?.marker ?? 'DEFAULT-THEME');
+};
+
+export { ThemeProvider, cardStyles, css, extractStyles, inject, styled };
diff --git a/spikes/panda-mf-poc/src/federation/verify.cjs b/spikes/panda-mf-poc/src/federation/verify.cjs
new file mode 100644
index 0000000000..8d2037a81c
--- /dev/null
+++ b/spikes/panda-mf-poc/src/federation/verify.cjs
@@ -0,0 +1,162 @@
+/* eslint-disable no-console, @typescript-eslint/no-var-requires */
+
+/* Does the RUNTIME styling engine survive a Module Federation boundary?
+ *
+ * rspack-mf-spike.md answered this for the STATIC path (Panda recipes + a
+ * complete staticCss sheet). It did not answer it for the runtime injector that
+ * panda-via-gamut-option-a.md introduces, which is now the thing consumer-authored
+ * styles depend on.
+ *
+ * Hand-written CommonJS on purpose: it needs to `require` two independently
+ * bundled copies of the engine, which is only meaningful across separate module
+ * scopes. React is external to both bundles, so there is exactly one React —
+ * matching MF with react as a shared singleton.
+ *
+ * Run: yarn nx run panda-mf-poc:federation */
+
+const path = require('node:path');
+const React = require('react');
+const { renderToStaticMarkup } = require('react-dom/server');
+const { JSDOM, VirtualConsole } = require('jsdom');
+
+const A = require(path.join(__dirname, '../../.mf/copyA.cjs'));
+const B = require(path.join(__dirname, '../../.mf/copyB.cjs'));
+
+const checks = [];
+const check = (label, ok, detail) => checks.push({ label, ok, detail });
+const h = React.createElement;
+
+const HOST_THEME = { marker: 'HOST-THEME', colors: {}, breakpoints: {} };
+
+// ---------------------------------------------------------------------------
+// 1. Class-name determinism across independent copies
+// ---------------------------------------------------------------------------
+const sample = { padding: '1rem', color: 'red', '&:hover': { color: 'blue' } };
+const classA = A.inject({ ...sample });
+const classB = B.inject({ ...sample });
+
+check(
+  'identical styles produce the identical class name in both copies',
+  classA === classB && classA.length > 0,
+  `${classA} vs ${classB}`
+);
+
+// ---------------------------------------------------------------------------
+// 2. SSR registries are per-copy, so the same rule is emitted twice
+// ---------------------------------------------------------------------------
+const cssA = A.extractStyles();
+const cssB = B.extractStyles();
+
+check(
+  'each copy keeps its OWN SSR registry (rule emitted by both)',
+  cssA.includes(classA) && cssB.includes(classB),
+  `${Buffer.byteLength(cssA)}B + ${Buffer.byteLength(
+    cssB
+  )}B for one logical rule`
+);
+check(
+  'duplicate SSR output is byte-identical, so it is idempotent not conflicting',
+  cssA === cssB,
+  'same selector, same declarations — safe to ship both, just wasteful'
+);
+
+// ---------------------------------------------------------------------------
+// 3. React context does NOT cross the boundary
+// ---------------------------------------------------------------------------
+const sameCopy = renderToStaticMarkup(
+  h(A.ThemeProvider, { theme: HOST_THEME }, h(A.ThemeProbe))
+);
+const crossCopy = renderToStaticMarkup(
+  h(A.ThemeProvider, { theme: HOST_THEME }, h(B.ThemeProbe))
+);
+
+check(
+  'provider and consumer in the SAME copy: theme flows',
+  sameCopy.includes('HOST-THEME'),
+  sameCopy
+);
+check(
+  'provider and consumer in DIFFERENT copies: theme is LOST (falls back)',
+  crossCopy.includes('DEFAULT-THEME'),
+  `${crossCopy} — this is the load-bearing finding`
+);
+
+// ---------------------------------------------------------------------------
+// 4. In a real DOM, do the copies converge on one <style> tag?
+// ---------------------------------------------------------------------------
+/* Quiet virtual console: jsdom's CSSOM rejects `@layer`, so `insertRule` throws
+ * and the engine's `appendChild` fallback takes over. That's expected here and
+ * asserted explicitly below rather than left as stderr noise. */
+const dom = new JSDOM(
+  '<!doctype html><html><head></head><body></body></html>',
+  {
+    virtualConsole: new VirtualConsole(),
+  }
+);
+global.document = dom.window.document;
+
+const domSample = { margin: '2rem', outlineColor: 'green' };
+const domClassA = A.inject({ ...domSample });
+const domClassB = B.inject({ ...domSample });
+
+const styleTags = dom.window.document.querySelectorAll('style[data-gamut]');
+const sheetText = [...styleTags].map((tag) => tag.textContent ?? '').join('');
+const occurrences = (
+  sheetText.match(new RegExp(`\\.${domClassA}\\b`, 'g')) ?? []
+).length;
+
+check(
+  'both copies write into ONE <style data-gamut> tag',
+  styleTags.length === 1,
+  `${styleTags.length} tag(s)`
+);
+check(
+  "the second copy adopts the first copy's rules instead of duplicating",
+  domClassA === domClassB && occurrences <= 1,
+  `rule appears ${occurrences}x for class ${domClassA}`
+);
+
+/* jsdom's CSSOM does not implement `@layer`, so `insertRule` throws and the
+ * engine falls back to appending a text node. Worth asserting because mono runs a
+ * large jest suite on jsdom — the fallback is what will actually execute there,
+ * and it needs to work. Real browsers take the insertRule path. */
+const usedTextFallback = (styleTags[0].childNodes.length ?? 0) > 0;
+check(
+  'jsdom (jest) falls back from insertRule to text append, and still works',
+  usedTextFallback && sheetText.includes(domClassA),
+  "mono's jest suite runs on jsdom, so this is the path its tests will take"
+);
+
+// ---------------------------------------------------------------------------
+console.log('\n=== Runtime engine across a Module Federation boundary ===');
+console.log('Two independently bundled engine copies, one shared React.\n');
+checks.forEach(({ label, ok, detail }) =>
+  console.log(
+    `${ok ? 'PASS' : 'FAIL'}  ${label}${detail ? `\n        ${detail}` : ''}`
+  )
+);
+
+const failed = checks.filter((entry) => !entry.ok);
+console.log(
+  `\n${checks.length - failed.length}/${checks.length} checks passed`
+);
+
+console.log(`
+CONCLUSION
+
+  Deterministic hashing means duplicated CSS across MF copies is idempotent,
+  never conflicting — strictly better than Emotion, whose two-cache setup in
+  front <-> TI can produce competing insertion orders, and far better than CSS
+  Modules, which hash per build.
+
+  BUT React context does not cross a federation boundary. A remote bundling its
+  own copy of the engine cannot see the host's ThemeProvider and silently falls
+  back to the default theme. Emotion has this exact problem today, which is why
+  platform declares '@emotion/react' a singleton.
+
+  => Gamut MUST be a shared singleton across host and remotes. That is a
+     REQUIREMENT of the runtime engine, not a nicety. front's
+     sharedDependencies.js omits gamut and emotion today and needs to change.
+`);
+
+process.exit(failed.length === 0 ? 0 : 1);
diff --git a/spikes/panda-mf-poc/src/globals.d.ts b/spikes/panda-mf-poc/src/globals.d.ts
new file mode 100644
index 0000000000..784e599f2a
--- /dev/null
+++ b/spikes/panda-mf-poc/src/globals.d.ts
@@ -0,0 +1,5 @@
+declare module '*.css';
+declare module 'remote/Widget' {
+  const Widget: React.ComponentType;
+  export default Widget;
+}
diff --git a/spikes/panda-mf-poc/src/host/App.tsx b/spikes/panda-mf-poc/src/host/App.tsx
new file mode 100644
index 0000000000..1ea985e9bb
--- /dev/null
+++ b/spikes/panda-mf-poc/src/host/App.tsx
@@ -0,0 +1,34 @@
+import { lazy, Suspense } from 'react';
+
+import { EngineCard, ThemeMarker, ThemeProvider } from '../ui/engine';
+import { Button } from '../ui/gamut';
+
+// Loaded at runtime from the remote's build via Module Federation.
+const RemoteWidget = lazy(() => import('remote/Widget'));
+
+/* A theme only the HOST constructs. If this marker shows up inside the federated
+ * remote, React context crossed the boundary — which only happens because
+ * `@gamut-engine` is a shared singleton in build.mjs. */
+const hostTheme = { marker: 'HOST-THEME' } as never;
+
+export default function App() {
+  return (
+    <ThemeProvider theme={hostTheme}>
+      <div style={{ padding: 24, display: 'grid', gap: 16 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <Button variant="primary">
+            Host button — variant=&quot;primary&quot; (static Panda recipe)
+          </Button>
+          <Suspense fallback={<span>loading remote…</span>}>
+            <RemoteWidget />
+          </Suspense>
+        </div>
+
+        {/* the runtime engine, styled in the host's own build */}
+        <EngineCard>
+          host EngineCard (runtime injector) — theme marker: <ThemeMarker />
+        </EngineCard>
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/spikes/panda-mf-poc/src/host/bootstrap.tsx b/spikes/panda-mf-poc/src/host/bootstrap.tsx
new file mode 100644
index 0000000000..5dda45f87d
--- /dev/null
+++ b/spikes/panda-mf-poc/src/host/bootstrap.tsx
@@ -0,0 +1,9 @@
+// The host imports the ONE complete Gamut stylesheet — it covers the remote's
+// variant("danger") even though the host itself only renders variant("primary").
+import '../ui/gamut.css';
+
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/spikes/panda-mf-poc/src/host/index.ts b/spikes/panda-mf-poc/src/host/index.ts
new file mode 100644
index 0000000000..5af589f6ea
--- /dev/null
+++ b/spikes/panda-mf-poc/src/host/index.ts
@@ -0,0 +1,3 @@
+// async boundary required by Module Federation (shared singletons load first)
+import('./bootstrap');
+export {};
diff --git a/spikes/panda-mf-poc/src/remote/Widget.tsx b/spikes/panda-mf-poc/src/remote/Widget.tsx
new file mode 100644
index 0000000000..d621089fbc
--- /dev/null
+++ b/spikes/panda-mf-poc/src/remote/Widget.tsx
@@ -0,0 +1,26 @@
+import { EngineCard, ThemeMarker } from '../ui/engine';
+import { Button } from '../ui/gamut';
+
+/* Exposed via Module Federation.
+ *
+ * STATIC half: uses variant="danger" — a variant the HOST never renders itself.
+ * It stays styled because the host imports Gamut's COMPLETE static stylesheet
+ * (staticCss emits every variant).
+ *
+ * RUNTIME half: renders an `EngineCard` (rules injected at runtime) plus the
+ * host's theme marker. The remote never constructs a theme, so if the marker
+ * reads HOST-THEME then React context crossed the boundary — which is only true
+ * because `@gamut-engine` is a shared singleton. Unshared, this silently prints
+ * DEFAULT-THEME, the failure mode src/federation/verify.cjs reproduces. */
+export default function Widget() {
+  return (
+    <>
+      <Button variant="danger">
+        Remote widget — variant=&quot;danger&quot;
+      </Button>
+      <EngineCard>
+        remote EngineCard (runtime injector) — theme marker: <ThemeMarker />
+      </EngineCard>
+    </>
+  );
+}
diff --git a/spikes/panda-mf-poc/src/remote/bootstrap.tsx b/spikes/panda-mf-poc/src/remote/bootstrap.tsx
new file mode 100644
index 0000000000..2d754c7e0e
--- /dev/null
+++ b/spikes/panda-mf-poc/src/remote/bootstrap.tsx
@@ -0,0 +1,8 @@
+import '../ui/gamut.css';
+
+import { createRoot } from 'react-dom/client';
+
+import Widget from './Widget';
+
+// Standalone render (remote run on its own); in the host, the host's sheet styles it.
+createRoot(document.getElementById('root')!).render(<Widget />);
diff --git a/spikes/panda-mf-poc/src/remote/index.ts b/spikes/panda-mf-poc/src/remote/index.ts
new file mode 100644
index 0000000000..5af589f6ea
--- /dev/null
+++ b/spikes/panda-mf-poc/src/remote/index.ts
@@ -0,0 +1,3 @@
+// async boundary required by Module Federation (shared singletons load first)
+import('./bootstrap');
+export {};
diff --git a/spikes/panda-mf-poc/src/ui/engine.tsx b/spikes/panda-mf-poc/src/ui/engine.tsx
new file mode 100644
index 0000000000..74b63747ae
--- /dev/null
+++ b/spikes/panda-mf-poc/src/ui/engine.tsx
@@ -0,0 +1,27 @@
+import { css, styled, ThemeProvider, useTheme } from '@gamut-engine';
+
+/* The RUNTIME half of Gamut, used by host AND remote across the MF boundary.
+ *
+ * Imported via the `@gamut-engine` alias (see build.mjs) rather than a relative
+ * path, so it can be declared a Module Federation `shared` singleton — which is a
+ * hard requirement, not an optimisation: React context does not cross a
+ * federation boundary, so an unshared copy in a remote cannot see the host's
+ * ThemeProvider. Proven in src/federation/verify.cjs. */
+
+export const EngineCard = styled('div')(
+  css({
+    p: 16,
+    borderRadius: 'md',
+    border: 2,
+    borderColor: 'primary',
+    color: 'text',
+  })
+);
+
+/** Renders the active theme's marker, so it's visible whether context crossed. */
+export const ThemeMarker = () => {
+  const theme = useTheme() as { marker?: string };
+  return <strong>{theme?.marker ?? 'DEFAULT-THEME'}</strong>;
+};
+
+export { ThemeProvider };
diff --git a/spikes/panda-mf-poc/src/ui/gamut.tsx b/spikes/panda-mf-poc/src/ui/gamut.tsx
new file mode 100644
index 0000000000..18a9e61e85
--- /dev/null
+++ b/spikes/panda-mf-poc/src/ui/gamut.tsx
@@ -0,0 +1,5 @@
+import { styled } from 'styled-system/jsx';
+import { button } from 'styled-system/recipes';
+
+// The Panda-built Gamut Button — shared by host AND remote across the MF boundary.
+export const Button = styled('button', button);
diff --git a/spikes/panda-mf-poc/tsconfig.json b/spikes/panda-mf-poc/tsconfig.json
new file mode 100644
index 0000000000..1d66041a8a
--- /dev/null
+++ b/spikes/panda-mf-poc/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": { "styled-system/*": ["./styled-system/*"] }
+  },
+  "include": ["src", "styled-system"]
+}
diff --git a/spikes/panda-styling-poc/.gitignore b/spikes/panda-styling-poc/.gitignore
new file mode 100644
index 0000000000..871755c119
--- /dev/null
+++ b/spikes/panda-styling-poc/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+styled-system/
+dist/
+src/gamut-static.css
+.proof/
diff --git a/spikes/panda-styling-poc/BREAKING-CHANGES.md b/spikes/panda-styling-poc/BREAKING-CHANGES.md
new file mode 100644
index 0000000000..8db2d13948
--- /dev/null
+++ b/spikes/panda-styling-poc/BREAKING-CHANGES.md
@@ -0,0 +1,369 @@
+# Known breaking changes — Emotion → Panda (GMT-1715)
+
+Consumer-facing breaking changes if Gamut swaps its styling engine from Emotion
+to Panda (zero-runtime) for the 1.0 reboot. Every item is grounded in the spike
+(`spikes/panda-styling-poc`) + the mono/platform usage survey. The swap is a
+**breaking major**, but most items are mechanical/codemoddable — the design is to
+ship codemods + this doc, not to make it invisible.
+
+**Severity legend:** 🟥 high (touches many call sites / needs judgement) ·
+🟨 medium (mechanical codemod) · 🟩 low (rare or config-only).
+
+| #   | Change                                                          | Severity | Codemoddable?                           |
+| --- | --------------------------------------------------------------- | -------- | --------------------------------------- |
+| 1   | `styled` import moves to Gamut                                  | 🟨       | ✅ import rewrite                       |
+| 2   | `styled.tag(css/variant/states(…))` → recipe config / props     | 🟥       | ⚠️ partial (static yes; dynamic manual) |
+| 3   | Token values are strings; bare numbers need tokens or `[value]` | 🟨       | ✅ mostly                               |
+| 4   | Emotion `css` prop unsupported                                  | 🟩       | ✅ (unused in mono/platform)            |
+| 5   | Reading resolved color VALUES in JS (charts)                    | 🟥       | ⚠️ manual (`getColorValue`)             |
+| 6   | Provider + static stylesheet setup                              | 🟨       | ⚠️ per-app, one-time                    |
+| 7   | Theme customization (`createTheme` → Panda config)              | 🟩       | ⚠️ rare (1 per repo)                    |
+| 8   | Test assertions (`@emotion/jest` matchers)                      | 🟨       | ⚠️ partial                              |
+
+---
+
+## 1. `styled` imports from Gamut, not Emotion 🟨
+
+```tsx
+// BEFORE
+import styled from '@emotion/styled';
+
+// AFTER — re-exported from the Gamut facade
+import { styled } from '@codecademy/gamut-styles';
+```
+
+**Migration:** pure import rewrite (codemod). **Impact:** mono ~825 files,
+platform ~177 files import `@emotion/styled`.
+
+---
+
+## 2. `styled.tag(css/variant/states(…))` → recipe config or props 🟥
+
+Panda's static extractor needs literal style objects; the runtime
+function-composition signature can't be evaluated at build time.
+
+```tsx
+// BEFORE — static styles
+const Card = styled.div(css({ p: 4, bg: 'background' }));
+
+// AFTER — recipe config…
+const Card = styled('div', { base: { p: '4', bg: 'background' } });
+// …or system props on Box (no styled at all)
+<Box p="4" bg="background" />;
+```
+
+```tsx
+// BEFORE — variant()/states() composed onto a styled component
+const Toggle = styled.button(
+  variant({ defaultVariant: 'off', variants: { on: {...}, off: {...} } }),
+  states({ disabled: {...} })
+);
+
+// AFTER — one recipe holds variant + boolean state variants
+const Toggle = styled('button', {
+  variants: {
+    tone: { on: {...}, off: {...} },
+    disabled: { true: {...} },
+  },
+  defaultVariants: { tone: 'off' },
+});
+// call sites are UNCHANGED: <Toggle tone="on" disabled />
+```
+
+```tsx
+// BEFORE — prop-conditional runtime interpolation (the hard case)
+const Bar = styled(Box)<{ $active: boolean }>(({ theme, $active }) => ({
+  color: $active ? theme.colors.primary : theme.colors['border-disabled'],
+}));
+
+// AFTER — option A: convert the condition to a variant (static, preferred)
+const Bar = styled('div', {
+  variants: {
+    active: { true: { color: 'primary' }, false: { color: 'border-disabled' } },
+  },
+});
+
+// AFTER — option B: the runtime escape hatch (keeps the fn shape; inline style)
+const Bar = styledDynamic('div')(({ $active }: { $active: boolean }) => ({
+  color: getColorValue($active ? 'primary' : 'border-disabled', mode),
+}));
+```
+
+**Migration:** static/prop-keyed cases codemod to recipe config; **prop-conditional
+runtime interpolations need manual conversion** to `variant()`/`states()` or
+`styledDynamic`. **Impact:** the largest surface — mono ~825 files / ~1,419
+interpolations / 634 `theme`-in-`${}`; platform ~16 (localized to `spark-studio`).
+Call-site usage (`<Toggle tone="on" disabled />`) does **not** change.
+
+### 2a. Internal authoring — Gamut uses these patterns too
+
+The reboot must migrate Gamut's OWN component styles, not just consumers'. In
+`packages/gamut/src`: **109** `styled(`, **69** `variant(`, **42** `states(`,
+**87** `css(`, **97** `system.*` / `variance.compose`, **110** `StyleProps<…>`,
+**7** template-literal `styled.x\`…\``, **3** `keyframes`, and **0** Emotion
+`css`-prop pragmas. Most is mechanical; a few patterns need real rework.
+
+| Internal pattern                             | Example (file)                                                               | Panda mapping                                                                       | Effort                      |
+| -------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | --------------------------- |
+| `variant({ base, variants })`                | `Badge/index.tsx` `colorVariants`                                            | recipe `variants`                                                                   | 🟩 mechanical               |
+| `system.states({…})` / `states()`            | `Box/props.ts` `flexStates`/`sharedStates`                                   | boolean `variants`                                                                  | 🟩 mechanical               |
+| `system.compose(…)` + `StyleProps<typeof x>` | `Box/props.ts` `boxProps` (110 `StyleProps` sites)                           | style props on `styled(…)` + generated prop types (`StyledVariantProps`)            | 🟨 mechanical but pervasive |
+| static `css({…})`                            | everywhere                                                                   | recipe `base` / `css()`                                                             | 🟩 mechanical               |
+| `styledOptions([…])` (`shouldForwardProp`)   | `Badge`, `Button/shared/styles.ts`                                           | Panda auto-forwards style/variant props; drop most, else `shouldForwardProp` option | 🟩 mostly removable         |
+| `keyframes` (`@emotion/react`)               | `Loading/Shimmer.tsx` `slide`/`fade`                                         | `panda.config` `theme.keyframes` + reference by name                                | 🟨 mechanical               |
+| **template-literal** `styled.a\`…\``         | `Form/inputs/Checkbox.tsx` (` styled.svg\``/ `styled.input\``), `AppWrapper` | rewrite CSS string → object recipe/`css`                                            | 🟥 manual (7 files)         |
+| **dynamic prop interpolation**               | `Loading/Shimmer.tsx` `ShimmerForeground` (gradient from a prop)             | inline CSS var + static class, or `styledDynamic`                                   | 🟥 manual                   |
+| **`useCurrentMode()` → JS color value**      | `Loading/Shimmer.tsx` (mode → `rgba`)                                        | mode-conditioned tokens, or `getColorValue(alias, mode)`                            | 🟥 manual                   |
+| `modeColorProps` (per-mode var injection)    | `Button/shared/styles.ts`                                                    | `data-color-mode` scope via `<ColorMode>` / `<Background>`                          | 🟨 mechanical               |
+
+**`variant()` — mechanical (Badge):**
+
+```tsx
+// BEFORE (packages/gamut/src/Badge/index.tsx)
+const colorVariants = variant({
+  defaultVariant: 'primary',
+  base: {
+    borderRadius: 'xl',
+    fontFamily: 'accent',
+    px: 8,
+    whiteSpace: 'nowrap',
+  },
+  variants: {
+    primary: { bg: 'text', textColor: 'background' },
+    accent: { bg: 'yellow', textColor: 'navy' },
+    tertiary: { bg: 'transparent', border: 1, borderColor: 'border-secondary' },
+  },
+});
+const Badge = styled('span')(colorVariants);
+
+// AFTER — one recipe (base + variants); call site <Badge variant="accent"> unchanged
+const badge = defineRecipe({
+  className: 'gmt-badge',
+  base: {
+    borderRadius: 'xl',
+    fontFamily: 'accent',
+    px: '8',
+    whiteSpace: 'nowrap',
+  },
+  variants: {
+    variant: {
+      primary: { bg: 'text', color: 'background' },
+      accent: { bg: 'yellow', color: 'navy' },
+      tertiary: {
+        bg: 'transparent',
+        borderWidth: '1',
+        borderColor: 'border-secondary',
+      },
+    },
+  },
+  defaultVariants: { variant: 'primary' },
+});
+```
+
+**`keyframes` — mechanical (Shimmer):**
+
+```tsx
+// BEFORE
+import { keyframes } from '@emotion/react';
+const slide = keyframes({ from: { left: -500 }, to: { left: 500 } });
+// …animation: `${slide} 2s linear infinite`
+
+// AFTER — panda.config theme.keyframes, referenced by name
+// theme: { extend: { keyframes: {
+//   slide: { from: { left: '-500px' }, to: { left: '500px' } },
+//   fade:  { from: { opacity: '0' },   to: { opacity: '1' } },
+// } } }
+css({
+  animation: 'slide 2s linear infinite, fade 1s linear infinite alternate',
+});
+```
+
+**Dynamic prop interpolation + `useCurrentMode` — the hard one (Shimmer):**
+
+```tsx
+// BEFORE — a runtime prop drives the gradient; mode read in JS picks the rgba channels
+const ShimmerForeground = styled(Box)<{ foregroundBg: string }>((props) =>
+  css({
+    background: `linear-gradient(to right,
+    rgba(${props.foregroundBg},0) 20%, rgba(${props.foregroundBg},0.2) 50%,
+    rgba(${props.foregroundBg},0) 80%)`,
+  })
+);
+const mode = useCurrentMode();
+<ShimmerForeground foregroundBg={mode === 'light' ? '0,0,0' : '255,255,255'} />;
+
+// AFTER — static gradient using a CSS var; only the channel value is inline
+const shimmer = css({
+  background:
+    'linear-gradient(to right, rgba(var(--fg),0) 20%, rgba(var(--fg),0.2) 50%, rgba(var(--fg),0) 80%)',
+});
+const mode = useCurrentMode();
+<Box
+  className={shimmer}
+  style={
+    { '--fg': mode === 'light' ? '0,0,0' : '255,255,255' } as CSSProperties
+  }
+/>;
+```
+
+**Net (internal):** ~90% of Gamut's own styling (`variant`/`states`/`css`/system
+props/`StyleProps`) is a mechanical port to recipes + generated prop types. The
+real work is concentrated in the same two 🟥 patterns as consumers — the **7
+template-literal `styled`** components and the handful of **dynamic
+prop-interpolated / `useCurrentMode`-driven** styles (e.g. `Shimmer`) — plus
+moving `keyframes` and `modeColorProps` into Panda's model.
+
+---
+
+## 3. Token values are strings; bare numbers aren't tokens 🟨
+
+Under `strictTokens`, style values are string token keys; a bare number is not a
+token, and some resolve to a DIFFERENT default token.
+
+```tsx
+// BEFORE (Emotion/variance accepted numbers on the spacing scale)
+<Box padding={4} bg="primary" />
+
+// AFTER
+<Box padding="4" bg="primary" />
+```
+
+```tsx
+// GOTCHA: a bare numeric string hits Panda's DEFAULT sizes scale, not px.
+minWidth: '56'; // ❌ resolves to --sizes-56 = 14rem (224px!)
+minWidth: '[56px]'; // ✅ raw value via the [value] escape hatch
+height: '[40px]'; // ✅ control heights aren't tokens — escape hatch
+```
+
+**Migration:** number→string is codemoddable; the sizes gotcha needs review where
+non-token pixel values are used (control heights/widths). Colors/spacing/fontSize
+stay real tokens and keep autocomplete.
+
+---
+
+## 4. Emotion `css` prop (JSX pragma) unsupported 🟩
+
+```tsx
+// BEFORE — Emotion css prop via /** @jsxImportSource @emotion/react */
+<div css={{ color: 'primary' }} />
+
+// AFTER — className from css(), system props, or the Panda css prop
+<div className={css({ color: 'primary' })} />
+<Box color="primary" />
+```
+
+**Impact:** **effectively zero — the Emotion `css` prop is unused in both mono and
+platform** (0 pragmas). Listed for completeness.
+
+---
+
+## 5. Reading resolved color VALUES in JS breaks (charts/canvas) 🟥
+
+Tokens resolve to `var(--colors-…)` at runtime, not a hex string. Anything feeding
+a color to a non-CSS consumer (charts, canvas, third-party inline styles) must
+resolve the value explicitly.
+
+```tsx
+// BEFORE — theme.colors.* is a usable value passed to @nivo
+const theme = useTheme();
+<ResponsiveBar colors={[theme.colors.hyper, theme.colors.green]} ... />
+
+// AFTER — resolve to a real hex via the provided escape hatch
+import { getColorValue } from '@codecademy/gamut-styles';
+<ResponsiveBar
+  colors={[getColorValue('primary', mode), getColorValue('feedback-success', mode)]}
+  ...
+/>
+```
+
+**Migration:** manual — swap `theme.colors.x` reads for `getColorValue(alias, mode)`
+(re-resolve on mode change). **Impact:** mono is materially exposed (6 `@nivo` chart
+files + Fides stylesheet injection + inline `style`/`fill`); platform is minor and
+already hand-rolls raw hex in `spark-studio/_utils/contentTypeIcon.ts`.
+
+---
+
+## 6. Provider setup + one static stylesheet 🟨
+
+```tsx
+// BEFORE — Emotion provider wires cache + theme + injected globals
+import { GamutProvider, coreTheme } from '@codecademy/gamut-styles';
+<GamutProvider cache={cache} theme={coreTheme}>
+  <App />
+</GamutProvider>;
+
+// AFTER — import the static sheet once; provider selects theme; one <ColorMode>
+import '@codecademy/gamut-styles/styles.css'; // NEW, once at the root
+import { GamutProvider, ColorMode } from '@codecademy/gamut-styles';
+<GamutProvider theme="core">
+  <ColorMode mode="system">
+    <App />
+  </ColorMode>
+</GamutProvider>;
+```
+
+**What changes:** no Emotion cache / SSR critical-CSS extraction (ship the static
+sheet instead); `ColorMode` is set once for ambient mode; `<Background bg="…">`
+still handles individual themed surfaces (unchanged). **CSP note:** the static
+sheet needs no nonce, but the runtime inline-CSS-var escape hatch (dynamic values)
+still hits `style-src` — prefer variants for finite sets. **Migration:** per-app,
+one-time.
+
+---
+
+## 7. Theme customization moves to Panda config 🟩
+
+```tsx
+// BEFORE — runtime theme object
+const platformCustom = createTheme(platformTheme)
+  .addColors({ brand: '#123456' })
+  .addColorModes('light', { light: {...}, dark: {...} })
+  .build();
+<GamutProvider theme={platformCustom} />
+
+// AFTER — a Panda theme / token override (build-time), applied via data-panda-theme
+// panda.config: themes: { platformCustom: { semanticTokens: { colors: {...} } } }
+<GamutProvider theme="platformCustom" />
+```
+
+**Impact:** rare — exactly **1 `createTheme` override per repo** (mono
+`learning-environment-enterprise`, platform `compactLxStudioTheme`).
+
+---
+
+## 8. Test assertions on styles change 🟨
+
+```tsx
+// BEFORE — @emotion/jest style-rule matcher
+expect(el).toHaveStyleRule('background-color', theme.colors.primary);
+
+// AFTER — assert class application / computed style (no Emotion matcher)
+expect(el).toHaveClass('gmt-fill-button--variant_primary');
+// or getComputedStyle(el).backgroundColor against the resolved var
+```
+
+**Migration:** partial-codemod + manual. **Impact:** platform has heavy Jest
+coupling (272 `jest.mock('@codecademy/…')`, 45 `requireActual`); mono uses
+`setupRtl` in 332 files. `@emotion/jest` `toHaveStyleRule` usages need reworking.
+
+---
+
+## What does NOT break (the ~95%)
+
+- **Component usage** — `<FillButton variant="primary" size="small" icon={Icon}>`,
+  `<IconButton icon tip>`, `<Box>`, `<FlexBox>`, `<Text>` — all unchanged (proven
+  in the spike's Button atoms).
+- **System props** — `<Box padding="4" bg="primary" />` (number→string aside).
+- **Semantic tokens as values** — `bg="primary"`, `color="text"` — unchanged.
+- **`variant()`/`states()` call sites** — `<Toggle tone="on" disabled />` — unchanged.
+- **`ColorMode` / `Background`** usage — unchanged; theme + mode switching still
+  works via attribute flips.
+
+---
+
+## References
+
+- Spike: `spikes/panda-styling-poc/` (README has the full findings log).
+- Decision docs: `~/code/base camp/reboot/` (`styling-engine-rfc.md` §11,
+  `reboot-recommendation.md`).
+- Usage survey: mono + platform counts cited above.
diff --git a/spikes/panda-styling-poc/README.md b/spikes/panda-styling-poc/README.md
new file mode 100644
index 0000000000..7e8739d1ba
--- /dev/null
+++ b/spikes/panda-styling-poc/README.md
@@ -0,0 +1,424 @@
+# Gamut → Panda CSS spike (GMT-1715)
+
+Branch: `cass-GMT-1715` (base `cass-gmt-1709`). A **yarn workspace + nx project**
+(`spikes/panda-styling-poc`, registered via root `workspaces: ["spikes/*"]`),
+isolated from the published `packages/*`. Explores whether Panda can replace
+Emotion while keeping (a) the `variance`-style authoring helpers, (b) type-safe
+theme tokens, (c) runtime **theme + color-mode switching** like the Storybook
+switchers, and (d) an **external API that barely changes**. Grounded in the real
+`packages/gamut/src/Button`, `packages/styleguide/.storybook`, and the
+`gamut-style-utilities` / `gamut-system-props` / `gamut-color-mode` /
+`gamut-theming` skills.
+
+**Headline result:** (d) turned out to be stronger than "barely changes" —
+`styled(C)(css(…), variant(…), states(…))` survives **unchanged**, because
+`variance` already resolves styles at runtime and Emotion was only merging and
+injecting them. Replacing that one layer (`src/gamut/engine/`) removes Emotion
+internally and externally with no call-site migration. See
+[`src/proof/`](./src/proof) and
+`~/code/base camp/reboot/panda-via-gamut-option-a.md`.
+
+**Uses the REAL Gamut Core theme.** Panda tokens are derived directly from
+`@codecademy/gamut-styles` (a workspace dep) — the actual `corePalette`, the
+`coreTheme`/`adminTheme` semantic light/dark `.modes`, and the real spacing /
+fontSize / fontFamily / fontWeight / lineHeight / borderRadii scales — so values
+match production (e.g. `hyper-500 #3A10E5`, `navy-800 #10162F`). Real Apercu +
+Suisse web fonts load from Codecademy's CDN via `src/fonts.css`.
+
+**Migrating consumers?** See [`BREAKING-CHANGES.md`](./BREAKING-CHANGES.md) for the
+known Emotion→Panda breaking changes with before/after code examples.
+
+## Run it (yarn + nx)
+
+```
+yarn install                              # from repo root — installs the workspace
+yarn nx run panda-styling-poc:dev         # example page → http://localhost:5173
+yarn nx run panda-styling-poc:build       # codegen + cssgen + vite build
+yarn nx run panda-styling-poc:typecheck   # tsc --noEmit (proves token type-safety)
+yarn nx run panda-styling-poc:proof       # 21 call-site parity checks (Option A)
+yarn nx run panda-styling-poc:measure     # CSS size: prebuilt atomics vs injector
+```
+
+`codegen` (typed `styled-system/`) and `cssgen` (`src/gamut-static.css`) run
+automatically as nx target dependencies.
+
+## Two authoring models, both in here
+
+This spike covers **both** halves of the styling question. They are not
+alternatives to pick between — they're different tiers of the same design.
+
+|            | Panda-native (Gamut's own internals)            | the Emotion-free engine (consumer surface) |
+| ---------- | ----------------------------------------------- | ------------------------------------------ |
+| for        | Gamut's **own** components                      | **existing consumer call sites**           |
+| shape      | `styled(tag, recipe)`, `css({…})` → class names | `styled(C)(css(…), variant(…), states(…))` |
+| resolution | static, zero-runtime                            | runtime (`variance` → `insertRule`)        |
+| where      | `src/gamut/Button.tsx`, `src/App.tsx`           | `src/gamut/engine/`, `src/proof/`          |
+
+Note the "three tiers" section further down numbers the **consumer-facing**
+authoring paths (system props / module-scope `styled` / `styled` + a build step).
+That's a different axis from this table, which splits Gamut's internals from the
+consumer surface.
+
+### `src/gamut/engine/` — Option A
+
+An Emotion-free `styled` that preserves the **existing external API exactly**, so
+today's Emotion-authored call sites migrate by changing one import. `variance` is
+reused untouched — `css`/`variant`/`states` are the same factories consumers use
+now, which is why the composed shape survives at full fidelity rather than being
+approximated.
+
+- `props.ts` — `css`/`variant`/`states`/`system.*` rebuilt on the **real** Gamut
+  prop config, zero Emotion imports.
+- `sheet.ts` — the injector that replaces Emotion: deterministic FNV-1a hashing
+  (so SSR can't mismatch), `@layer gamut.consumer` for override precedence, the
+  `focusVisible` stylis-plugin behaviour reimplemented, CSP nonce support, and
+  `extractStyles()` in place of `extractCriticalToChunks`.
+- `styled.tsx` — the composed call shape, `withComponent`, and a small CSS parser
+  so `` styled.div`…` `` template literals work too.
+- `theme.tsx` — the augmentable theme registry replacing
+  `declare module '@emotion/react'`.
+
+`src/proof/parity.tsx` renders a call site copied **verbatim** from
+`mono/libs/ui/login-or-register/src/OAuthButtons/elements.tsx` (chosen because it
+hits nested `@media`, responsive object values, system-prop aliases,
+`withComponent`, and the bare-identifier `styled(X)(a, b)` shape at once) plus the
+cases static extraction provably cannot reach — prop functions, `theme.x` access,
+computed enum keys, ternaries, template literals. 21/21 pass, and the check for
+"zero Emotion in the bundled runtime" reads its own bundle rather than asserting.
+
+Findings write-up: `~/code/base camp/reboot/panda-via-gamut-option-a.md`.
+
+## Which authoring path should I use? (three tiers)
+
+The useful distinction isn't "runtime vs zero-runtime" — it's **per-instance vs
+per-definition**. A `styled(...)` call at module scope has its styles fixed when
+the module loads, so its class can be resolved once and reused by every instance.
+Inline system props can't do that, because their values arrive per instance.
+
+| tier | how you write it                 | when styles resolve                                   | reach for it when                                      |
+| ---- | -------------------------------- | ----------------------------------------------------- | ------------------------------------------------------ |
+| 1    | inline system props              | every render, per instance                            | values vary per instance, or it's a one-off            |
+| 2    | `styled(...)` at module scope    | **once** per theme + variant combo, then a Map lookup | the component is reused, or rendered many times        |
+| 3    | tier 2 **+** Panda in your build | build time; zero JS                                   | you want true zero-runtime and will add the build step |
+
+### Tier 1 — inline system props: values that vary per instance
+
+```tsx
+// GOOD: a one-off nudge, and layout that differs at this usage site
+<Box mt={16} px={24}>
+  <FlexBox columnGap={12} alignItems="center" />
+</Box>
+```
+
+Each distinct **combination** of values becomes one injected class, deduped by
+hash. So 500 `<Box p={16} />` share a single class — the _lookup_ runs per render,
+but the CSS does not grow.
+
+```tsx
+// AVOID: the same 6 props repeated at 40 call sites. The output is fine, but you
+// pay per-instance resolution 40x and duplicate the intent. Promote to tier 2.
+<Box p={24} mb={16} bg="background" borderRadius="md" border={1} borderColor="border-primary">
+```
+
+```tsx
+// DON'T: a continuous value baked into a style prop. Every distinct value hashes
+// to a NEW CLASS — animate this 0->100 and you have emitted 100 rules that will
+// never be reused. Measured: `yarn nx run panda-styling-poc:measure` section C.
+<Box width={`${percentComplete}%`} />
+```
+
+### When you genuinely need a runtime value — and what to do about it
+
+Some values simply cannot be known ahead of time. The legitimate cases:
+
+| case                     | example                                                      |
+| ------------------------ | ------------------------------------------------------------ |
+| driven by state or props | progress bars, sliders, expanding panels                     |
+| measured from the DOM    | sticky offsets, virtualised row heights, popover placement   |
+| supplied by data         | a brand colour from an API, an author-chosen accent in a CMS |
+| animated                 | anything interpolating a value per frame                     |
+| genuinely arbitrary      | `width: 37.5%`, `calc(100% - 17px)`, a computed `translateY` |
+
+**The pattern for all of them is the same: keep the class static, make only the
+_value_ dynamic, via a CSS custom property.** The class is then a tier-2 constant
+that resolves once, and the per-instance part rides an inline `style` attribute —
+which costs no CSS at all.
+
+```tsx
+// RECOMMENDED — one class, forever, no matter how many values occur.
+const ProgressFill = styled(Box)(
+  css({ height: 8, bg: 'primary', width: 'var(--fill-width)' })
+);
+
+<ProgressFill style={{ '--fill-width': `${percentComplete}%` }} />;
+```
+
+Measured on 100 distinct widths: **100 classes baked in vs 1 class via a custom
+property.** The custom-property count doesn't grow with your data; the naive one
+grows linearly and never stops.
+
+This also survives SSR cleanly, because the class name is constant and the varying
+part is a plain HTML attribute — nothing to extract, nothing to mismatch.
+
+If you'd rather keep the old `styled(Tag)(props => styles)` authoring shape while
+migrating, `styledDynamic` (`src/gamut/styledDynamic.tsx`) preserves it and applies
+the computed styles as an inline `style` object. It forfeits pseudo-selectors and
+media queries for that component — use `variant()`/`states()` for those, and this
+hatch only for dynamic _values_.
+
+### Tier 2 — `styled(...)` at module scope: reusable components
+
+```tsx
+import { css, states, styled, variant } from '@codecademy/gamut-styles';
+
+// Resolves ONCE at first render. Every instance after is a Map lookup.
+const Card = styled(Box)(
+  css({ p: 24, mb: 16, bg: 'background', borderRadius: 'md' }),
+  variant({
+    defaultVariant: 'raised',
+    variants: { raised: { boxShadow: 'md' }, flat: { boxShadow: 'none' } },
+  }),
+  states({ interactive: { cursor: 'pointer' } })
+);
+
+<Card variant="flat" interactive />;
+```
+
+Memoisation applies because every argument is _predictable_ — `css()` reads only
+the theme, `variant()`/`states()` declare which props they read. A hand-written
+function opts the component out, since it could read anything:
+
+```tsx
+// NOT memoised — resolves per render. Correct, just not free.
+const Bar = styled(Box)<{ $pct: number }>((props) => ({
+  width: `${props.$pct}%`,
+}));
+```
+
+That's the rule of thumb: **fixed styles → `styled`; per-instance values →
+system props.** They compose freely, so the usual shape is a `styled` component
+with a couple of system props at the call site:
+
+```tsx
+<Card variant="raised" mt={32} /> // tier 2 for the component, tier 1 for the nudge
+```
+
+### Tier 3 — add Panda to your build for true zero-runtime
+
+**The component code does not change at all.** You add a ~12-line config and a
+build step; the same tier-2 `Card` above now resolves at build time instead of at
+first render.
+
+```ts
+// your-app/panda.config.ts — the ONLY new code
+import { defineConfig } from '@pandacss/dev';
+import { gamutPreset } from '@codecademy/gamut-styles/panda-preset';
+
+export default defineConfig({
+  presets: [gamutPreset], // Gamut's tokens, semantic colours, recipes
+  importMap: {
+    // tells Panda's extractor that css/styled imported from Gamut are Panda calls
+    css: '@codecademy/gamut-styles',
+    jsx: '@codecademy/gamut-styles',
+  },
+  include: ['./src/**/*.{ts,tsx}'],
+  outdir: 'styled-system',
+  jsxFramework: 'react',
+});
+```
+
+```jsonc
+// package.json — extraction runs before your bundler's CSS pipeline
+"scripts": { "prebuild": "panda cssgen --outfile src/app-static.css" }
+```
+
+Verified across a real package boundary — including that Gamut's build and the
+consumer's build produce **byte-identical class names** for identical styles, the
+failure that would otherwise render components silently unstyled. See
+`~/code/base camp/reboot/panda-via-gamut-option-b.md`.
+
+Worth it when: you have a measured styling cost on a hot page, or a hard
+zero-runtime requirement. Not worth it when: you'd rather not own Panda in your
+build pipeline — tiers 1 and 2 work with **zero** build configuration, which is
+the whole point of the facade.
+
+## Example page (`src/App.tsx`)
+
+A small Vite page demonstrating **Panda variants** and switching:
+
+- the **Button atoms** (`FillButton`/`StrokeButton`/`TextButton`/`CTAButton`/`IconButton`) with the real prop surface (`variant`/`size`/`icon`/`iconPosition`/`href`/`disabled`)
+- a `FillButton` grid across every `variant` × `size` (+ `disabled`)
+- a `variant()`-style recipe (`<Anchor tone="…">`) and `states()`-style booleans (`<Wrapper disabled center>`)
+- ambient **colorMode** (light/dark) + **theme** (core/admin) switchers (attribute flips)
+- a static **`<Background bg="navy-800">`** surface with its own contrast-selected mode
+
+---
+
+## FINDINGS (running log)
+
+### ✅ Type-safe tokens — native, stronger than today
+
+`tsc` passes on valid usage; bad token / variant / size all **fail** `tsc`
+(`strictTokens` + generated `ColorToken` / variant unions). The guardrail even
+caught a raw `minHeight="100vh"` (wanted the `screen` size token). `Background`'s
+`bg` prop is typed to the raw palette tokens.
+
+### ✅ API shape — NO `className`; prop/object authoring, close to today
+
+You style with **system-style props on components** + typed variant/state props +
+the `css` prop — not `className={css(...)}`. `src/authoring-comparison.tsx` maps
+every Best-practices idiom:
+
+| Today (gamut, Emotion)                                  | Panda equivalent                                                                       | Closeness                                                     |
+| ------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `<Box padding={4} bg="primary" />`                      | `<Box padding="4" bg="primary" />`                                                     | ~identical (token keys are strings)                           |
+| `<FillButton variant="primary" size="small" />`         | `<Button variant="primary" size="small" />`                                            | identical                                                     |
+| `styled.div(css({ p: 4 }))`                             | `styled('div', { base: { p: '4' } })` / `<Box p="4" />` / `<styled.div css={{...}} />` | **shape changes** (fn-composition → recipe config / css prop) |
+| `styled.a(variant({ base, defaultVariant, variants }))` | `styled('a', { base, variants, defaultVariants })`                                     | very close                                                    |
+| `styled.div(states({ disabled, center }))`              | `styled('div', { variants: { disabled: { true }, center: { true } } })`                | call site identical: `<Wrapper disabled center />`            |
+| `StyleProps<typeof someStates>`                         | `StyledVariantProps<typeof Wrapper>`                                                   | 1:1                                                           |
+| semantic tokens as values (`bg="primary"`)              | same                                                                                   | identical                                                     |
+
+**The one real divergence:** `styled.div(css({...}))` — calling the factory with
+a _style function_ — becomes `styled('div', { base })` (recipe config) or the
+`css` prop, because Panda's static analyzer must see literal style objects.
+
+### ✅ Background owns STATIC color-mode context (per the ColorMode/theming skills)
+
+`<ColorMode mode="light|dark|system">` sets the **ambient** mode (high in the
+tree, via `GamutProvider`). `<Background bg="<palette token>">` is for a
+**static** fixed-palette surface — it picks the light/dark mode with best contrast
+and establishes its OWN color-mode context + `background-current` for descendants.
+The POC's `Background` sets `data-color-mode` from the palette (`src/gamut/Background.tsx`);
+the navy `<Background>` on the example page makes `text` resolve to the dark value
+with no `<ColorMode>` wrapper. Correct per skill guidance.
+
+### ✅ Button atoms — SAME external API as Gamut (the key proof)
+
+`src/gamut/Button.tsx` reproduces the real atoms — `FillButton`, `StrokeButton`,
+`TextButton`, `CTAButton`, `IconButton` — with the actual prop surface: `variant`
+(`primary`/`secondary`/`danger`/`interface`), `size` (`small`/`normal`/`large`),
+`icon` + `iconPosition` (via an `InlineIconButton` equivalent), `href` (polymorphic
+`ButtonBase` renders an `<a>`), `disabled`, and system props. Backed by per-atom
+Panda recipes (`gmt-fill/stroke/text/cta/icon-button`). A consumer's
+`<FillButton variant="primary" size="small" icon={Icon}>` / `<IconButton icon tip tipProps>`
+/ `<FillButton href="…">` compiles and renders unchanged — the only difference is
+`styled` comes from Gamut, not Emotion. `IconButton` wraps a **Panda-native
+`ToolTip` rebuild** (`src/gamut/ToolTip.tsx`) — same API (`info`/`placement`/
+`alignment`/`closeOnClick`/`id`) authored in Panda `css`, NOT imported from the
+Emotion package (spike stays Emotion-free). Simplified to top-center placement.
+
+### ✅ Provider / ColorMode / Background separation matches real usage
+
+Per mono's idiom, `GamutProvider` is the PROVIDER (selects the theme — `data-panda-theme`);
+a single `<ColorMode mode>` sets the ambient mode; `<Background bg="<palette>">`
+handles individual static-themed surfaces (contrast-selected mode). `ColorMode` is
+used once. `GamutProvider` sheds its Emotion job — no `CacheProvider`/
+`createEmotionCache`, no Emotion `ThemeProvider`, no `<Global>` injection; consumers
+import one static stylesheet instead. `styled` is re-exported from the facade
+(never `@emotion/styled`).
+
+### ✅ Theme + ColorMode SWITCHING — matches the Storybook switchers
+
+Today the decorator swaps a theme _object_ into `<GamutProvider theme={adminTheme}>`
+and flips mode via `Background`/`ColorMode` — both are really "swap which CSS
+custom properties are active." Panda does the same with pre-generated static CSS +
+attribute flips. `src/gamut-static.css` contains `[data-color-mode=dark]`,
+`[data-panda-theme=admin]`, and the combined `[data-panda-theme=admin][data-color-mode=dark]`
+— so 5 themes × 2 modes switch at runtime by flipping attributes, **no re-render,
+zero runtime cost**. The example page's switchers demonstrate it.
+
+### ✅ Zero-runtime + bundling
+
+`nx build` runs `codegen` → `cssgen` → `vite build`: 92 modules, one static CSS
+asset (~19KB), no runtime style engine.
+
+### ✅ Escape hatches — the two residuals are covered, API stays compatible
+
+The usage survey found two things that don't fit pure zero-runtime; both are
+handled by small facade additions so the external API stays compatible:
+
+- **`getColorValue(alias, mode, theme)`** (`src/gamut/color-values.ts`) — reads a
+  resolved color VALUE in JS (the charts/canvas case). Returns raw hex derived
+  from the SAME real Gamut theme (`@codecademy/gamut-styles` `.modes` + `corePalette`)
+  that builds the CSS vars, so it can't drift.
+  The example page feeds it into an SVG "chart" that recolors when you flip the
+  theme/colorMode switchers. Analog of gamut's `_getColorValue`.
+- **`styledDynamic(Tag)(props => styles)`** (`src/gamut/styledDynamic.tsx`) —
+  keeps the `styled(fn)` authoring shape for genuinely dynamic VALUES; applies the
+  computed object as inline `style` (forfeits zero-runtime for that one
+  component). `$`-prefixed transient props are stripped from the DOM. The example
+  page drives a prop-controlled `<Meter>` width with it. Use `variant()`/`states()`
+  for dynamic + pseudo-selector cases.
+
+Both Panda's CSS vars and `getColorValue` read the same real
+`@codecademy/gamut-styles` theme — the portable-token story, and what makes the
+JS resolver safe (it can't drift from the CSS).
+
+### ⚠️ Dynamic variant selection needs `staticCss` (design-system requirement)
+
+Panda tree-shakes recipe variants to those it sees as **static literals**. The
+example page selects variants in a `.map()` (`variant={variant}`), so at first
+`secondary`/`large` were **missing** from the CSS. A design system must force-emit
+all variants so consumers can pass any variant (incl. dynamically):
+`staticCss: { recipes: { button: ['*'] }, themes: ['admin'] }`. After that, all
+`gmt-button--variant_*` / `--size_*` classes ship.
+
+### ⚠️ When runtime styles ARE genuinely needed (per Panda docs)
+
+Panda is build-time; it "silently skips" styles it can't statically read (dynamic
+keys, computed values, function-derived values, `colorMap[runtimeKey]`). Genuine
+cases that need a runtime path, and the Panda-sanctioned mechanism:
+
+| Case (Gamut-relevant)                                                                 | Mechanism                                                                                                                                                    |
+| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Value unknown at build — user/CMS/API color, drag/popover coordinates, computed px    | inline `style` + CSS var, `style={{ '--x': token.var('colors.primary') }}` then `css({ color: 'var(--x)' })` — **stays a token, so ColorMode still applies** |
+| Dynamically-selected recipe variant (`variant={x}`)                                   | `staticCss` (pre-generate) — above                                                                                                                           |
+| Non-CSS consumer needs a resolved VALUE — @nivo/canvas/`fill`, 3rd-party inline style | `token()` / our `getColorValue()` (raw hex; not themeable after read)                                                                                        |
+| Prop-conditional style with pseudo-selectors                                          | `variant()`/`states()` (static) — not the inline hatch                                                                                                       |
+| Truly runtime theme (arbitrary, not a predefined theme)                               | Panda `injectTheme()` (dynamic theme injection)                                                                                                              |
+| Progress/meter width, dynamic non-token values                                        | inline `style` (our `styledDynamic`)                                                                                                                         |
+
+**CSP note:** the recommended dynamic path is inline styles, which strict CSP
+`style-src` blocks (chakra-ui/panda #1709). Gamut passes a CSP nonce to Emotion's
+cache today; under Panda the _static sheet_ needs no nonce, but the inline-style
+escape hatch for dynamic values reintroduces a CSP consideration for consumers
+with strict policies. **Prefer the CSS-var pattern (themeable + fewer inline
+styles) over raw inline hex wherever the value is a token.**
+
+---
+
+## Consumer-surface change analysis (beyond "`styled` comes from Gamut")
+
+Day-to-day usage (components + system props + semantic tokens + variants) stays
+largely the same. Beyond `styled`'s import source, the real changes are:
+
+| Change                                                                                           | Impact                                                                                                                                            |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Import one static stylesheet once                                                                | NEW, but replaces Emotion cache/SSR wiring — net simpler                                                                                          |
+| **`css` prop** (Emotion JSX pragma)                                                              | Breaks if used; steer to system props / `css()` / `styled`. Hardest lock-in                                                                       |
+| Theme customization                                                                              | Emotion theme objects → Panda `themes` config / token overrides                                                                                   |
+| **Reading resolved color VALUES in JS** (`useTheme().colors.x`, charts/canvas, `_getColorValue`) | Tokens resolve to `var(--…)`, not hex → use the provided **`getColorValue()`** escape hatch. **Watch BarChart / canvas**                          |
+| **Dynamic prop-driven `styled(fn)` styles**                                                      | Not statically extractable → codemod to `variant()`/`states()`, or use the **`styledDynamic()`** escape hatch (inline style, that component only) |
+| SSR                                                                                              | No Emotion critical-CSS extraction; ship the static sheet                                                                                         |
+| Tests                                                                                            | `@emotion/jest` matchers (`toHaveStyleRule`) change                                                                                               |
+| Build                                                                                            | Consumers no longer transpile Emotion / run `@emotion/babel-plugin`                                                                               |
+
+---
+
+## Still NOT proven (open per the recommendation)
+
+- **Rspack + Module Federation** with a shared stylesheet (platform — highest risk).
+- A browser render wasn't visually verified beyond dev-server boot (`yarn nx run panda-styling-poc:dev`).
+- The escape hatches are prototypes: `styledDynamic` handles dynamic values but not
+  dynamic + pseudo-selectors; `getColorValue` is theme+mode aware but resolves for
+  the mode you pass (charts re-resolve on mode change).
+
+## Files
+
+- `panda.config.ts` — derives Panda tokens/themes/recipe from the REAL `@codecademy/gamut-styles` theme (corePalette + coreTheme/adminTheme `.modes` + scales)
+- `src/fonts.css` — real Apercu/Suisse `@font-face` (Codecademy CDN)
+- `src/gamut/*` — facade: `styled`, `Box`, the Button atoms (`Button.tsx`) + polymorphic `ButtonBase`, `ToolTip` (Panda rebuild), `ColorMode`, `Background`, `GamutProvider`, `getColorValue`, `styledDynamic`, barrel
+- `src/authoring-comparison.tsx` — today's idioms vs Panda, side by side
+- `src/App.tsx` — the example page (variants + switchers + escape-hatch demos)
+- `project.json` — nx targets (codegen/cssgen/typecheck/build/dev)
diff --git a/spikes/panda-styling-poc/index.html b/spikes/panda-styling-poc/index.html
new file mode 100644
index 0000000000..fa140900c0
--- /dev/null
+++ b/spikes/panda-styling-poc/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gamut → Panda styling spike</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/spikes/panda-styling-poc/package.json b/spikes/panda-styling-poc/package.json
new file mode 100644
index 0000000000..81eca37217
--- /dev/null
+++ b/spikes/panda-styling-poc/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "panda-styling-poc",
+  "description": "GMT-1715 spike: Panda CSS styling proof of concept (not published)",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "codegen": "panda codegen",
+    "cssgen": "panda cssgen --outfile src/gamut-static.css",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "dev": "vite",
+    "proof": "esbuild src/proof/parity.tsx --bundle --platform=node --format=cjs --jsx=automatic --outfile=.proof/parity.cjs --log-level=warning && node .proof/parity.cjs",
+    "measure": "esbuild src/proof/measure.ts --bundle --platform=node --format=cjs --outfile=.proof/measure.cjs --log-level=warning && node .proof/measure.cjs",
+    "precompute": "esbuild src/precompute/generate.ts --bundle --platform=node --format=cjs --outfile=.proof/generate.cjs --log-level=warning && node .proof/generate.cjs",
+    "fidelity": "esbuild src/precompute/verify-fidelity.ts --bundle --platform=node --format=cjs --outfile=.proof/fidelity.cjs --log-level=warning && node .proof/fidelity.cjs"
+  },
+  "dependencies": {
+    "@codecademy/gamut-styles": "workspace:*",
+    "@codecademy/variance": "workspace:*",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^0.53.0",
+    "@types/react": "18.3.27",
+    "esbuild": "^0.25.0",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "5.9.3",
+    "vite": "^5.4.11"
+  }
+}
diff --git a/spikes/panda-styling-poc/panda.config.ts b/spikes/panda-styling-poc/panda.config.ts
new file mode 100644
index 0000000000..1c87aeb237
--- /dev/null
+++ b/spikes/panda-styling-poc/panda.config.ts
@@ -0,0 +1,291 @@
+import { adminTheme } from '@codecademy/gamut-styles/dist/themes/admin';
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import {
+  borderRadii,
+  corePalette,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  spacing,
+} from '@codecademy/gamut-styles/dist/variables';
+import { defineConfig, defineRecipe } from '@pandacss/dev';
+
+/* PRECOMPUTED recipes — generated by src/precompute/generate.ts from UNCHANGED
+ * variance authoring (src/precompute/authoring.ts). Sit alongside the
+ * hand-written recipes below so the two can be compared in one build. */
+import {
+  generatedFillButton,
+  generatedOverlap,
+  generatedTextButton,
+} from './src/precompute/generated-recipes';
+
+/* Gamut → Panda spike (GMT-1715), using the REAL Gamut Core theme. Tokens are
+ * derived directly from `@codecademy/gamut-styles` (palette, semantic light/dark
+ * color modes, spacing / fontSize / fontFamily / fontWeight / lineHeight /
+ * borderRadii), so the spike matches production values. `getColorValue`
+ * (src/gamut/color-values.ts) reads the SAME theme, so the JS resolver can't
+ * drift. Real Apercu/Suisse web fonts are loaded via src/fonts.css. */
+
+type ModeMap = Record<string, string>;
+type ThemeWithModes = { modes: { light: ModeMap; dark: ModeMap } };
+
+const asTokens = (obj: Record<string, string | number>) =>
+  Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [k, { value: String(v) }])
+  );
+
+// semantic alias → { base: {colors.<lightKey>}, _dark: {colors.<darkKey>} }
+const toSemanticColors = (theme: ThemeWithModes) => {
+  const { light, dark } = theme.modes;
+  const colors: Record<string, { value: { base: string; _dark: string } }> = {};
+  for (const alias of Object.keys(light)) {
+    colors[alias] = {
+      value: {
+        base: `{colors.${light[alias]}}`,
+        _dark: `{colors.${dark[alias] ?? light[alias]}}`,
+      },
+    };
+  }
+  return colors;
+};
+
+/* Recipes mirror the real Gamut Button atoms: Fill/Stroke/Text share a variant
+ * set (primary/secondary/danger/interface) + text size scale; CTA is
+ * primary-only; Icon uses square sizes. Heights use the `[value]` escape hatch
+ * (not tokens). Colors/spacing/fontSize stay real tokens under strictTokens. */
+const VARIANTS = ['primary', 'secondary', 'danger', 'interface'] as const;
+type RecipeConfig = Parameters<typeof defineRecipe>[0];
+
+const variantMap = (fn: (c: string) => object) =>
+  Object.fromEntries(VARIANTS.map((v) => [v, fn(v)]));
+
+// mirrors real Gamut's ButtonSelectors.OUTLINE / OUTLINE_FOCUS_VISIBLE — the
+// focus-ring `::before` pseudo-element, colored per variant
+const outline = (c: string) => ({ '&::before': { borderColor: c } });
+
+const fillVariant = (c: string) => ({
+  bg: c,
+  color: 'background',
+  ...outline(c),
+  _hover: { bg: `${c}-hover`, color: 'background' },
+  _active: { bg: c, color: 'background', borderColor: 'border-primary' },
+  _disabled: { bg: 'background-disabled', color: 'text-disabled' },
+});
+const strokeVariant = (c: string) => ({
+  bg: 'transparent',
+  borderColor: c,
+  color: c,
+  ...outline(c),
+  _hover: { bg: 'background-hover' },
+  _active: { bg: c, color: 'background' },
+  _disabled: {
+    bg: 'transparent',
+    borderColor: 'background-disabled',
+    color: 'text-disabled',
+  },
+});
+const textVariant = (c: string) => ({
+  borderColor: 'transparent',
+  color: c === 'interface' ? 'text' : c,
+  ...outline(c),
+  _hover: { color: c, bg: 'background-hover' },
+  _focusVisible: { color: c },
+  _active: { color: 'text' },
+  _disabled: { color: 'text-disabled', bg: 'transparent' },
+});
+
+const base = {
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderWidth: '2',
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderRadius: 'md',
+  fontFamily: 'base',
+  cursor: 'pointer',
+  appearance: 'none',
+  textDecoration: 'none',
+  _disabled: { cursor: 'not-allowed', userSelect: 'none' },
+  // focus ring: transparent by default, colored per-variant via `outline()`,
+  // revealed only on keyboard focus (matches real Gamut's OUTLINE selectors)
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    inset: '[-5px]',
+    borderRadius: 'lg',
+    borderWidth: '2',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    opacity: '0',
+    zIndex: '0',
+    transitionProperty: 'opacity',
+    transitionDuration: 'fast',
+  },
+  '&:focus-visible::before': { opacity: '1' },
+};
+const textSize = {
+  small: {
+    fontSize: '14',
+    height: '[32px]',
+    minWidth: '[32px]',
+    py: '4',
+    px: '8',
+    fontWeight: 'title',
+  },
+  normal: {
+    fontSize: '16',
+    height: '[40px]',
+    minWidth: '[40px]',
+    py: '4',
+    px: '16',
+    fontWeight: 'title',
+  },
+  large: {
+    fontSize: '18',
+    height: '[56px]',
+    minWidth: '[40px]',
+    py: '4',
+    px: '16',
+    fontWeight: 'title',
+  },
+};
+const iconSize = {
+  small: { height: '[32px]', width: '[32px]' },
+  normal: { height: '[40px]', width: '[40px]' },
+  large: { height: '[56px]', width: '[56px]' },
+};
+
+const makeButton = (
+  className: string,
+  jsx: string,
+  variantFn: (c: string) => object,
+  opts: { size?: object; defaultVariant?: string } = {}
+) =>
+  defineRecipe({
+    className,
+    jsx: [jsx],
+    base,
+    variants: { size: opts.size ?? textSize, variant: variantMap(variantFn) },
+    defaultVariants: {
+      size: 'normal',
+      variant: opts.defaultVariant ?? 'primary',
+    },
+  } as RecipeConfig);
+
+const fillButton = makeButton('gmt-fill-button', 'FillButton', fillVariant);
+const strokeButton = makeButton(
+  'gmt-stroke-button',
+  'StrokeButton',
+  strokeVariant
+);
+const textButton = makeButton('gmt-text-button', 'TextButton', textVariant);
+const iconButton = makeButton('gmt-icon-button', 'IconButton', textVariant, {
+  size: iconSize,
+  defaultVariant: 'secondary',
+});
+// real Gamut's CTAButton casts a hard drop-shadow that grows on hover and
+// flattens on active/disabled — the "brutalist" CTA treatment
+const ctaShadow = (offset: number) =>
+  `[-${offset}px ${offset}px 0 0 {colors.text}]`;
+
+const ctaButton = defineRecipe({
+  className: 'gmt-cta-button',
+  jsx: ['CTAButton'],
+  base: {
+    ...base,
+    fontFamily: 'accent',
+    fontWeight: 'title',
+    color: 'background',
+    bg: 'primary',
+    py: '12',
+    px: '24',
+    boxShadow: ctaShadow(4),
+    '&::before': {
+      ...base['&::before'],
+      borderColor: 'primary',
+      bottom: '[-9px]',
+      left: '[-9px]',
+    },
+    _hover: { bg: 'primary-hover', boxShadow: ctaShadow(8) },
+    _active: { bg: 'secondary', boxShadow: '[none]' },
+    _disabled: {
+      bg: 'background-disabled',
+      color: 'text-disabled',
+      boxShadow: '[none]',
+    },
+  },
+  variants: { variant: { primary: {} } },
+  defaultVariants: { variant: 'primary' },
+} as RecipeConfig);
+
+export default defineConfig({
+  preflight: false,
+  strictTokens: true,
+  include: ['./src/**/*.{ts,tsx}'],
+  outdir: 'styled-system',
+  jsxFramework: 'react',
+  conditions: {
+    extend: {
+      dark: '[data-color-mode=dark] &',
+      light: '[data-color-mode=light] &',
+      // real Gamut's disabled styling also matches `[aria-disabled='true']`
+      // (see ButtonSelectors.DISABLED) — override Panda's built-in condition
+      // so `_disabled` blocks above apply to both states
+      disabled: '&:is(:disabled, [disabled], [aria-disabled=true])',
+    },
+  },
+
+  // force-emit all recipe variants + the admin theme (dynamic selection safe)
+  staticCss: {
+    recipes: {
+      fillButton: ['*'],
+      strokeButton: ['*'],
+      textButton: ['*'],
+      iconButton: ['*'],
+      ctaButton: ['*'],
+      generatedFillButton: ['*'],
+      generatedTextButton: ['*'],
+      generatedOverlap: ['*'],
+    },
+    themes: ['admin'],
+  },
+  themes: {
+    admin: {
+      semanticTokens: {
+        colors: toSemanticColors(adminTheme as unknown as ThemeWithModes),
+      },
+    },
+  },
+
+  theme: {
+    extend: {
+      tokens: {
+        colors: asTokens(corePalette as Record<string, string>),
+        spacing: asTokens(spacing as Record<string, string | number>),
+        fontSizes: asTokens(fontSize as Record<string, string>),
+        fonts: asTokens(fontFamily as Record<string, string>),
+        fontWeights: asTokens(fontWeight as Record<string, string | number>),
+        lineHeights: asTokens(lineHeight as Record<string, string | number>),
+        radii: asTokens(borderRadii as Record<string, string>),
+        borderWidths: { '1': { value: '1px' }, '2': { value: '2px' } },
+      },
+      semanticTokens: {
+        colors: toSemanticColors(coreTheme as unknown as ThemeWithModes),
+      },
+      recipes: {
+        fillButton,
+        strokeButton,
+        textButton,
+        iconButton,
+        ctaButton,
+        generatedFillButton,
+        generatedTextButton,
+        generatedOverlap,
+      },
+    },
+  },
+});
diff --git a/spikes/panda-styling-poc/project.json b/spikes/panda-styling-poc/project.json
new file mode 100644
index 0000000000..8127a68298
--- /dev/null
+++ b/spikes/panda-styling-poc/project.json
@@ -0,0 +1,78 @@
+{
+  "name": "panda-styling-poc",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "spikes/panda-styling-poc/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "codegen": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn codegen"
+      },
+      "dependsOn": ["precompute"]
+    },
+    "cssgen": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["codegen"],
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn cssgen"
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["codegen"],
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn typecheck"
+      }
+    },
+    "build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["codegen", "cssgen"],
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn build"
+      }
+    },
+    "dev": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["codegen", "cssgen"],
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn dev"
+      }
+    },
+    "proof": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn proof"
+      }
+    },
+    "measure": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn measure"
+      }
+    },
+    "precompute": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn precompute"
+      }
+    },
+    "fidelity": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["cssgen"],
+      "options": {
+        "cwd": "spikes/panda-styling-poc",
+        "command": "yarn fidelity"
+      }
+    }
+  }
+}
diff --git a/spikes/panda-styling-poc/src/App.tsx b/spikes/panda-styling-poc/src/App.tsx
new file mode 100644
index 0000000000..b0bcde5e88
--- /dev/null
+++ b/spikes/panda-styling-poc/src/App.tsx
@@ -0,0 +1,358 @@
+import { type CSSProperties, useState } from 'react';
+
+// Consumer imports EVERYTHING from the Gamut facade — incl. `styled`/`Box` and
+// the two escape hatches (`styledDynamic`, `getColorValue`).
+import { Anchor, Wrapper } from './authoring-comparison';
+import {
+  type ColorModeName,
+  type SemanticAlias,
+  type ThemeName,
+  Background,
+  Box,
+  ColorMode,
+  css,
+  CTAButton,
+  FillButton,
+  GamutProvider,
+  getColorValue,
+  IconButton,
+  StrokeButton,
+  styled,
+  styledDynamic,
+  TextButton,
+  token,
+} from './gamut';
+
+type Mode = 'light' | 'dark';
+
+// CSP-note demo: a static class whose background reads a CSS var; only the var
+// itself is set inline (see below). The colors live in the static stylesheet.
+const swatchBox = css({
+  bg: 'var(--swatch)',
+  color: 'text',
+  p: '16',
+  minWidth: '[56px]',
+  borderRadius: 'md',
+  borderWidth: '2',
+  borderColor: 'border-primary',
+});
+const SWATCHES: SemanticAlias[] = [
+  'primary',
+  'danger',
+  'interface',
+  'secondary',
+];
+
+const BUTTON_VARIANTS = [
+  'primary',
+  'secondary',
+  'danger',
+  'interface',
+] as const;
+const BUTTON_SIZES = ['small', 'normal', 'large'] as const;
+
+// consumer-authored styled components using Gamut's `styled` (recipe config)
+const Card = styled('div', {
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16',
+    p: '24',
+    borderRadius: 'lg',
+    borderWidth: '2',
+    borderColor: 'border-primary',
+    bg: 'background',
+  },
+});
+
+const Toolbar = styled('div', {
+  base: { display: 'flex', gap: '8', p: '16', alignItems: 'center' },
+});
+
+// ESCAPE HATCH #2 — runtime `styled` for a genuinely dynamic value (bar width),
+// with its color resolved in JS via escape hatch #1. Keeps the old
+// `styled(Tag)(props => styles)` authoring shape.
+const Meter = styledDynamic('div')(
+  ({
+    $percent,
+    $tone,
+    $mode,
+    $theme,
+  }: {
+    $percent: number;
+    $tone: SemanticAlias;
+    $mode: ColorModeName;
+    $theme: ThemeName;
+  }): CSSProperties => ({
+    width: `${$percent}%`,
+    height: 12,
+    borderRadius: 6,
+    background: getColorValue($tone, $mode, $theme),
+    transition: 'width 200ms',
+  })
+);
+
+const Section = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <Box display="flex" flexDirection="column" gap="8" py="16">
+    <Box color="text" fontWeight="title" fontSize="18">
+      {title}
+    </Box>
+    {children}
+  </Box>
+);
+
+const Row = ({ children }: { children: React.ReactNode }) => (
+  <Box display="flex" gap="8" alignItems="center">
+    {children}
+  </Box>
+);
+
+// a plain icon component (consumers pass gamut-icons; any {size} component works)
+const StarIcon = ({ size = 16 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden
+  >
+    <path d="M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 9.5l6.9-.6z" />
+  </svg>
+);
+
+/* Example PAGE — `yarn nx run panda-styling-poc:dev`. Demonstrates variants,
+ * theme/colorMode switching, static Background, and the two escape hatches. */
+export const App = () => {
+  const [theme, setTheme] = useState<ThemeName>('core');
+  const [mode, setMode] = useState<Mode>('light');
+  const [percent, setPercent] = useState(60);
+  const [swatch, setSwatch] = useState<SemanticAlias>('primary');
+
+  return (
+    // GamutProvider selects the theme; a single <ColorMode> sets the ambient
+    // mode; <Background> handles individual themed surfaces below.
+    <GamutProvider theme={theme}>
+      <ColorMode mode={mode}>
+        <Box
+          bg="background"
+          color="text"
+          fontFamily="base"
+          padding="24"
+          minHeight="screen"
+          display="flex"
+          flexDirection="column"
+          gap="16"
+        >
+          <Box color="text" fontWeight="title" fontSize="18">
+            Gamut → Panda styling spike
+          </Box>
+
+          <Toolbar>
+            <FillButton
+              size="small"
+              variant="interface"
+              onClick={() => setTheme((t) => (t === 'core' ? 'admin' : 'core'))}
+            >
+              theme: {theme}
+            </FillButton>
+            <FillButton
+              size="small"
+              variant="interface"
+              onClick={() => setMode((m) => (m === 'light' ? 'dark' : 'light'))}
+            >
+              colorMode: {mode}
+            </FillButton>
+          </Toolbar>
+
+          {/* === RECIPE VARIANTS: variant × size === */}
+          <Card>
+            {BUTTON_VARIANTS.map((variant) => (
+              <Section key={variant} title={`variant="${variant}"`}>
+                <Row>
+                  {BUTTON_SIZES.map((size) => (
+                    <FillButton key={size} variant={variant} size={size}>
+                      {size}
+                    </FillButton>
+                  ))}
+                  <FillButton variant={variant} disabled>
+                    disabled
+                  </FillButton>
+                </Row>
+              </Section>
+            ))}
+          </Card>
+
+          {/* === BUTTON ATOMS — same external API as Gamut === */}
+          <Card>
+            <Section title="Button atoms — unchanged consumer API">
+              <Row>
+                <FillButton variant="primary" icon={StarIcon}>
+                  FillButton
+                </FillButton>
+                <StrokeButton
+                  variant="primary"
+                  icon={StarIcon}
+                  iconPosition="right"
+                >
+                  StrokeButton
+                </StrokeButton>
+                <TextButton variant="danger">TextButton</TextButton>
+                <CTAButton>CTAButton</CTAButton>
+                <IconButton icon={StarIcon} aria-label="Star" tip="Star" />
+              </Row>
+              <Row>
+                {/* href → renders an <a> via ButtonBase, exactly like gamut */}
+                <FillButton variant="secondary" href="#">
+                  Link (anchor)
+                </FillButton>
+                <TextButton variant="interface" size="small">
+                  small text
+                </TextButton>
+                <StrokeButton variant="danger" disabled>
+                  disabled
+                </StrokeButton>
+              </Row>
+            </Section>
+          </Card>
+
+          {/* === variant()-style recipe + states()-style booleans === */}
+          <Card>
+            <Section title='variant() → recipe: <Anchor tone="…">'>
+              <Row>
+                <Anchor href="#" tone="interface">
+                  interface
+                </Anchor>
+                <Anchor href="#" tone="danger">
+                  danger
+                </Anchor>
+              </Row>
+            </Section>
+            <Section title="states() → boolean variants: <Wrapper disabled center>">
+              <Row>
+                <Wrapper center>centered</Wrapper>
+                <Wrapper disabled>disabled</Wrapper>
+              </Row>
+            </Section>
+          </Card>
+
+          {/* === ESCAPE HATCHES === */}
+          <Card>
+            <Section title="Escape hatch #2 — styledDynamic (dynamic width, prop-driven)">
+              <Box display="flex" flexDirection="column" gap="8">
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  value={percent}
+                  onChange={(e) => setPercent(Number(e.target.value))}
+                />
+                <Box
+                  borderWidth="2"
+                  borderColor="border-primary"
+                  borderRadius="md"
+                  padding="4"
+                >
+                  <Meter
+                    $percent={percent}
+                    $tone="primary"
+                    $mode={mode}
+                    $theme={theme}
+                  />
+                </Box>
+                <Box color="text-disabled" fontSize="14">
+                  width={percent}% — a runtime value Panda can't statically
+                  extract; applied as inline style.
+                </Box>
+              </Box>
+            </Section>
+
+            <Section title="Escape hatch #1 — getColorValue() into an SVG (the charts case)">
+              {/* JS-resolved hex, theme + mode aware — recomputes when you flip the switchers */}
+              <svg width="180" height="80" role="img" aria-label="bar chart">
+                <rect
+                  x="0"
+                  y="20"
+                  width="40"
+                  height="60"
+                  fill={getColorValue('primary', mode, theme)}
+                />
+                <rect
+                  x="50"
+                  y="40"
+                  width="40"
+                  height="40"
+                  fill={getColorValue('danger', mode, theme)}
+                />
+                <rect
+                  x="100"
+                  y="10"
+                  width="40"
+                  height="70"
+                  fill={getColorValue('interface', mode, theme)}
+                />
+              </svg>
+              <Box color="text-disabled" fontSize="14">
+                fill={getColorValue('primary', mode, theme)} — a raw hex, not a
+                var(); needed by non-CSS consumers.
+              </Box>
+            </Section>
+
+            <Section title="Themeable dynamic value — token.var() + inline CSS var (CSP-aware)">
+              <Row>
+                {SWATCHES.map((s) => (
+                  <FillButton
+                    key={s}
+                    size="small"
+                    variant="interface"
+                    onClick={() => setSwatch(s)}
+                  >
+                    {s}
+                  </FillButton>
+                ))}
+              </Row>
+              {/* `--swatch` points at a TOKEN var, so the box stays theme/mode-aware
+                  (flip the switchers — it recolors), unlike getColorValue's raw hex.
+                  Only ONE inline custom property is set; the colors live in the static
+                  sheet. Strict CSP `style-src` still applies to the inline attr; for a
+                  FINITE set, prefer a variant() (className, zero inline style). */}
+              <Box
+                className={swatchBox}
+                style={
+                  {
+                    '--swatch': token.var(
+                      `colors.${swatch}` as Parameters<typeof token.var>[0]
+                    ),
+                  } as CSSProperties
+                }
+              >
+                bg = token.var(colors.{swatch}) — themeable
+              </Box>
+            </Section>
+          </Card>
+
+          {/* === STATIC color-mode context via <Background> (own dark context) === */}
+          <Section title="Static <Background bg='navy-800'> — own contrast-selected mode">
+            <Background bg="navy-800">
+              <Box padding="24" display="flex" gap="8" alignItems="center">
+                <FillButton variant="primary">Primary</FillButton>
+                <FillButton variant="danger" size="small">
+                  Danger
+                </FillButton>
+                <Box color="text" padding="8">
+                  readable text on navy (semantic `text` resolves to the
+                  dark-mode value)
+                </Box>
+              </Box>
+            </Background>
+          </Section>
+        </Box>
+      </ColorMode>
+    </GamutProvider>
+  );
+};
diff --git a/spikes/panda-styling-poc/src/authoring-comparison.tsx b/spikes/panda-styling-poc/src/authoring-comparison.tsx
new file mode 100644
index 0000000000..88a9f396db
--- /dev/null
+++ b/spikes/panda-styling-poc/src/authoring-comparison.tsx
@@ -0,0 +1,60 @@
+/* API-SHAPE COMPARISON — today's gamut authoring idioms (from Meta/Best
+ * practices.mdx) mapped onto Panda. Today's code is in comments; the Panda
+ * equivalent is below it. Everything here type-checks and extracts to static
+ * CSS. Takeaway: authoring stays object-based with semantic tokens + typed
+ * variant/state props; you do NOT sprinkle `className`. The one real change is
+ * `styled.tag(css(...))` (calling the factory with a style fn) → `styled('tag',
+ * { base, variants })` (a recipe config) or the `css` prop. */
+import { styled } from 'styled-system/jsx';
+import type { StyledVariantProps } from 'styled-system/types/jsx';
+
+import { Box } from './gamut/Box';
+
+// ── 1. css() single / multi value ──────────────────────────────────────────
+// TODAY:  const Box = styled.div(css({ p: 4 }));
+//         const Other = styled.div(css({ color: 'primary', p: 4 }));
+export const Padded = styled('div', { base: { p: '4' } });
+export const Branded = styled('div', { base: { color: 'primary', p: '4' } });
+// inline one-off (closest to a bare css()): <Box p="4" color="primary" />
+//                              or css prop:  <styled.div css={{ p: '4' }} />
+
+// ── 2. variant() ────────────────────────────────────────────────────────────
+// TODAY:  const Anchor = styled.a(variant({
+//           base: { p: 4 }, defaultVariant: 'interface',
+//           variants: { interface: { color: 'text', '&:hover': { color: 'primary' } } },
+//         }));
+export const Anchor = styled('a', {
+  base: { p: '4' },
+  variants: {
+    tone: {
+      interface: { color: 'text', _hover: { color: 'primary' } },
+      danger: { color: 'danger' },
+    },
+  },
+  defaultVariants: { tone: 'interface' },
+});
+// call site is identical in shape:  <Anchor tone="danger" />
+
+// ── 3. states() (boolean props) ─────────────────────────────────────────────
+// TODAY:  const Wrapper = styled.div(states({
+//           disabled: { bg: 'background-disabled', color: 'text-disabled' },
+//           center: { display: 'flex', justifyContent: 'center' },
+//         }));
+export const Wrapper = styled('div', {
+  variants: {
+    disabled: { true: { bg: 'background-disabled', color: 'text-disabled' } },
+    center: { true: { display: 'flex', justifyContent: 'center' } },
+  },
+});
+// call site is identical in shape:  <Wrapper disabled center />
+
+// ── 4. prop typing: StyleProps<typeof x> ────────────────────────────────────
+// TODAY:  interface Props extends StyleProps<typeof someStates> {}
+export type WrapperProps = StyledVariantProps<typeof Wrapper>;
+
+// ── 5. system props on a component (the MOST common gamut pattern) ───────────
+// TODAY:  <Box padding={4} bg="primary" />
+// PANDA:  same shape (token keys are strings under strictTokens):
+export const SystemPropsExample = () => (
+  <Box padding="4" bg="primary" color="text" borderRadius="md" />
+);
diff --git a/spikes/panda-styling-poc/src/fonts.css b/spikes/panda-styling-poc/src/fonts.css
new file mode 100644
index 0000000000..fcafb5f562
--- /dev/null
+++ b/spikes/panda-styling-poc/src/fonts.css
@@ -0,0 +1,54 @@
+/* Real Gamut Core web fonts (Apercu + Suisse), served from Codecademy's CDN.
+ * Mirrors the @font-face rules gamut-styles' <Typography> Global injects
+ * (packages/gamut-styles/src/globals/Typography.tsx +
+ *  src/remoteAssets/fonts.ts, FONT_ASSET_PATH = https://www.codecademy.com/gamut). */
+
+@font-face {
+  font-display: swap;
+  font-family: "Apercu";
+  font-style: normal;
+  font-weight: normal;
+  src: url("https://www.codecademy.com/gamut/apercu-regular-pro.woff2")
+      format("woff2"),
+    url("https://www.codecademy.com/gamut/apercu-regular-pro.woff")
+      format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Apercu";
+  font-style: italic;
+  font-weight: normal;
+  src: url("https://www.codecademy.com/gamut/apercu-italic-pro.woff2")
+      format("woff2"),
+    url("https://www.codecademy.com/gamut/apercu-italic-pro.woff")
+      format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Apercu";
+  font-style: normal;
+  font-weight: bold;
+  src: url("https://www.codecademy.com/gamut/apercu-bold-pro.woff2")
+      format("woff2"),
+    url("https://www.codecademy.com/gamut/apercu-bold-pro.woff") format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Suisse";
+  font-style: normal;
+  font-weight: normal;
+  src: url("https://www.codecademy.com/gamut/SuisseIntlMono-Regular-WebS.woff2")
+      format("woff2"),
+    url("https://www.codecademy.com/gamut/SuisseIntlMono-Regular-WebS.woff")
+      format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Suisse";
+  font-style: normal;
+  font-weight: bold;
+  src: url("https://www.codecademy.com/gamut/SuisseIntlMono-Bold-WebS.woff2")
+      format("woff2"),
+    url("https://www.codecademy.com/gamut/SuisseIntlMono-Bold-WebS.woff")
+      format("woff");
+}
diff --git a/spikes/panda-styling-poc/src/gamut-theme.d.ts b/spikes/panda-styling-poc/src/gamut-theme.d.ts
new file mode 100644
index 0000000000..5f1ad4c48e
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut-theme.d.ts
@@ -0,0 +1,28 @@
+import type { CoreTheme } from './gamut/engine/theme';
+
+/* The theme-type registry, and the one place Emotion still appears in this spike.
+ *
+ * WHY: `@codecademy/variance` anchors its whole prop type system to Emotion's
+ * `Theme` in exactly two lines —
+ *
+ *   packages/variance/src/types/props.ts:1     import { Theme } from '@emotion/react';
+ *   packages/variance/src/types/config.ts:31   scale?: keyof Theme | MapScale | ArrayScale;
+ *
+ * so without this augmentation `keyof Theme` is `never` and every
+ * `scale: 'colors'` in the prop config fails to typecheck. Nothing at runtime
+ * touches Emotion (see src/gamut/engine — zero `@emotion/*` imports); this is
+ * purely the type anchor.
+ *
+ * The real migration repoints those two lines at Gamut's own `GamutTheme`
+ * registry, after which this file becomes:
+ *
+ *   declare module '@codecademy/gamut-styles' {
+ *     export interface GamutTheme extends CoreTheme {}
+ *   }
+ *
+ * — the identical shape the 19 real consumer augmentation sites (18 in mono, 1 in
+ * platform/src/themes/platform.d.ts) codemod to. */
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends CoreTheme {}
+}
diff --git a/spikes/panda-styling-poc/src/gamut/Background.tsx b/spikes/panda-styling-poc/src/gamut/Background.tsx
new file mode 100644
index 0000000000..cdf6ee8438
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/Background.tsx
@@ -0,0 +1,48 @@
+import { type ReactNode, createContext, useContext } from 'react';
+
+import { Box } from './Box';
+
+/* Per the ColorMode/theming skills, STATIC color-mode context lives in
+ * <Background>, not <ColorMode>. <Background bg="<palette token>"> paints a
+ * fixed-palette surface and switches light/dark to whichever gives the best
+ * contrast with body text — establishing its OWN color-mode context for
+ * descendants and exposing `background-current`. */
+
+// real Gamut Core palette tokens (NOT semantic aliases) valid for <Background bg>.
+export type PaletteToken =
+  | 'navy-800'
+  | 'beige'
+  | 'white'
+  | 'hyper-500'
+  | 'yellow-0';
+
+// palette surfaces that read as "dark" → dark mode context for contrast.
+const DARK_SURFACES = new Set<PaletteToken>(['navy-800', 'hyper-500']);
+
+type BackgroundContextValue = {
+  current?: PaletteToken;
+  mode: 'light' | 'dark';
+};
+const BackgroundContext = createContext<BackgroundContextValue>({
+  mode: 'light',
+});
+export const useBackground = () => useContext(BackgroundContext);
+
+export const Background = ({
+  bg,
+  children,
+}: {
+  bg: PaletteToken;
+  children?: ReactNode;
+}) => {
+  const mode = DARK_SURFACES.has(bg) ? 'dark' : 'light';
+  return (
+    <BackgroundContext.Provider value={{ current: bg, mode }}>
+      {/* data-color-mode = contrast-selected mode → descendants get readable
+          semantic colors. `bg` is the RAW palette color (background-current). */}
+      <Box data-color-mode={mode} bg={bg} color="text">
+        {children}
+      </Box>
+    </BackgroundContext.Provider>
+  );
+};
diff --git a/spikes/panda-styling-poc/src/gamut/Box.tsx b/spikes/panda-styling-poc/src/gamut/Box.tsx
new file mode 100644
index 0000000000..dd22dc3e89
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/Box.tsx
@@ -0,0 +1,6 @@
+import { styled } from 'styled-system/jsx';
+
+/* The Gamut `Box` primitive — a styled `div` that accepts type-safe system-style
+ * props (`padding`, `bg`, `color`, `borderColor`…) AND a `css` prop, directly.
+ * This is the analog of `<Box padding={4} bg="primary" />` today — no className. */
+export const Box = styled('div');
diff --git a/spikes/panda-styling-poc/src/gamut/Button.tsx b/spikes/panda-styling-poc/src/gamut/Button.tsx
new file mode 100644
index 0000000000..aee799bd39
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/Button.tsx
@@ -0,0 +1,141 @@
+import {
+  type ComponentProps,
+  type ComponentType,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+import { styled } from 'styled-system/jsx';
+import {
+  ctaButton,
+  fillButton,
+  iconButton,
+  strokeButton,
+  textButton,
+} from 'styled-system/recipes';
+
+import { type ButtonBaseElements, ButtonBase } from './ButtonBase';
+import { type ToolTipProps, ToolTip } from './ToolTip';
+
+/* Reproduces the real Gamut Button atoms so consumers' external API is
+ * unchanged: FillButton / StrokeButton / TextButton / CTAButton / IconButton,
+ * each with variant / size / icon(+iconPosition) / href / disabled / system
+ * props. Only difference vs today: they're imported from Gamut (as they already
+ * are), and `styled` underneath is Panda's, not Emotion's. */
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'interface';
+export type ButtonSize = 'small' | 'normal' | 'large';
+export type IconComponentType = {
+  icon: ComponentType<{ 'aria-hidden'?: boolean; size?: number }>;
+};
+
+// styled(ButtonBase, recipe) — Panda applies recipe classes to the polymorphic base
+const FillButtonBase = styled(ButtonBase, fillButton);
+const StrokeButtonBase = styled(ButtonBase, strokeButton);
+const TextButtonBase = styled(ButtonBase, textButton);
+const IconButtonBase = styled(ButtonBase, iconButton);
+
+/** CTAButton is primary-only (no variant/size), same as gamut. */
+export const CTAButton = styled(ButtonBase, ctaButton);
+export type CTAButtonProps = ComponentProps<typeof CTAButton>;
+
+// InlineIconButton behavior — prepend/append an icon around children.
+const inlineIcon = (
+  Icon: IconComponentType['icon'] | undefined,
+  iconPosition: 'left' | 'right',
+  size: unknown,
+  children: ReactNode
+): ReactNode => {
+  if (!Icon) return children;
+  const iconSize = size === 'small' ? 12 : 16;
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+      {iconPosition === 'left' && <Icon aria-hidden size={iconSize} />}
+      {children}
+      {iconPosition === 'right' && <Icon aria-hidden size={iconSize} />}
+    </span>
+  );
+};
+
+type InlineIconProps = Partial<IconComponentType> & {
+  iconPosition?: 'left' | 'right';
+};
+
+// real Gamut only ever accepts a single `ButtonSize` literal for `size` (no
+// responsive/conditional values) — narrow Panda's generated variant prop to
+// match rather than exposing Panda-only responsive syntax on the public API
+type WithButtonSize<P> = Omit<P, 'size'> & { size?: ButtonSize };
+
+export type FillButtonProps = WithButtonSize<
+  ComponentProps<typeof FillButtonBase>
+> &
+  InlineIconProps;
+export const FillButton = forwardRef<ButtonBaseElements, FillButtonProps>(
+  ({ icon, iconPosition = 'left', children, size, ...props }, ref) => (
+    <FillButtonBase ref={ref} size={size} {...props}>
+      {inlineIcon(icon, iconPosition, size, children)}
+    </FillButtonBase>
+  )
+);
+
+export type StrokeButtonProps = WithButtonSize<
+  ComponentProps<typeof StrokeButtonBase>
+> &
+  InlineIconProps;
+export const StrokeButton = forwardRef<ButtonBaseElements, StrokeButtonProps>(
+  ({ icon, iconPosition = 'left', children, size, ...props }, ref) => (
+    <StrokeButtonBase ref={ref} size={size} {...props}>
+      {inlineIcon(icon, iconPosition, size, children)}
+    </StrokeButtonBase>
+  )
+);
+
+export type TextButtonProps = WithButtonSize<
+  ComponentProps<typeof TextButtonBase>
+> &
+  InlineIconProps;
+export const TextButton = forwardRef<ButtonBaseElements, TextButtonProps>(
+  ({ icon, iconPosition = 'left', children, size, ...props }, ref) => (
+    <TextButtonBase ref={ref} size={size} {...props}>
+      {inlineIcon(icon, iconPosition, size, children)}
+    </TextButtonBase>
+  )
+);
+
+// matches real Gamut's iconSizeMapping — IconButton's inner glyph is scaled
+// differently from the fill/stroke/text inline icon scale above
+const iconButtonGlyphSize: Record<ButtonSize, number> = {
+  small: 16,
+  normal: 24,
+  large: 40,
+};
+
+/** IconButton — icon-only, wrapped in the (Panda-native) ToolTip, matching
+ *  gamut's prop surface: icon, aria-label, tip, tipProps. */
+export type IconButtonProps = WithButtonSize<
+  ComponentProps<typeof IconButtonBase>
+> &
+  IconComponentType & {
+    'aria-label'?: string;
+    tip: string;
+    tipProps?: Omit<ToolTipProps, 'info' | 'children'>;
+  };
+export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(
+  (
+    { icon: Icon, 'aria-label': ariaLabel, tip, tipProps, size, ...props },
+    ref
+  ) => {
+    const iconPx = iconButtonGlyphSize[size ?? 'normal'];
+    return (
+      <ToolTip closeOnClick info={tip} {...tipProps}>
+        <IconButtonBase
+          ref={ref}
+          aria-label={ariaLabel ?? tip}
+          size={size}
+          {...props}
+        >
+          <Icon size={iconPx} />
+        </IconButtonBase>
+      </ToolTip>
+    );
+  }
+);
diff --git a/spikes/panda-styling-poc/src/gamut/ButtonBase.tsx b/spikes/panda-styling-poc/src/gamut/ButtonBase.tsx
new file mode 100644
index 0000000000..bad694f188
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/ButtonBase.tsx
@@ -0,0 +1,49 @@
+import {
+  type ComponentPropsWithoutRef,
+  type MutableRefObject,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+
+/* Analog of gamut ButtonBase: polymorphic button/anchor. Renders an <a> when
+ * `href` is set (and not disabled), otherwise a <button> (a disabled anchor
+ * becomes a real disabled button). Accepts `className` so Panda's `styled`
+ * factory can attach recipe classes. */
+export type ButtonBaseElements = HTMLAnchorElement | HTMLButtonElement;
+
+type AnchorProps = ComponentPropsWithoutRef<'a'>;
+type ButtonProps = ComponentPropsWithoutRef<'button'>;
+export type ButtonBaseProps = {
+  href?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+} & Omit<AnchorProps & ButtonProps, 'ref'>;
+
+export const ButtonBase = forwardRef<ButtonBaseElements, ButtonBaseProps>(
+  ({ href, disabled, children, role, type = 'button', ...rest }, ref) => {
+    if (href === undefined || disabled) {
+      const { href: _omit, ...buttonProps } = rest as AnchorProps & ButtonProps;
+      return (
+        <button
+          {...(buttonProps as ButtonProps)}
+          disabled={!!disabled}
+          ref={ref as MutableRefObject<HTMLButtonElement>}
+          role={role}
+          type={type as ButtonProps['type']}
+        >
+          {children}
+        </button>
+      );
+    }
+    return (
+      <a
+        {...(rest as AnchorProps)}
+        href={href}
+        ref={ref as MutableRefObject<HTMLAnchorElement>}
+        role={role}
+      >
+        {children}
+      </a>
+    );
+  }
+);
diff --git a/spikes/panda-styling-poc/src/gamut/ColorMode.tsx b/spikes/panda-styling-poc/src/gamut/ColorMode.tsx
new file mode 100644
index 0000000000..6a429e8c1d
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/ColorMode.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { Box } from './Box';
+
+export type ColorModeName = 'light' | 'dark';
+
+/* Analog of gamut `ColorMode`/`VariableProvider`. Authored with system-style
+ * PROPS on `Box` (bg/color) — no className. Setting `data-color-mode` flips the
+ * semantic tokens' `_dark` condition for the subtree, incl. nested modes. */
+export const ColorMode = ({
+  mode,
+  children,
+}: {
+  mode: ColorModeName;
+  children?: ReactNode;
+}) => (
+  <Box data-color-mode={mode} bg="background" color="text">
+    {children}
+  </Box>
+);
diff --git a/spikes/panda-styling-poc/src/gamut/GamutProvider.tsx b/spikes/panda-styling-poc/src/gamut/GamutProvider.tsx
new file mode 100644
index 0000000000..e87cb12f33
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/GamutProvider.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+import type { ThemeName } from './color-values';
+
+/* Analog of gamut `GamutProvider` — the PROVIDER role only: it selects the
+ * active theme token set (via `data-panda-theme`, the analog of gamut's
+ * `theme={coreTheme}` prop). Under Panda (zero-runtime) the rest of gamut's
+ * provider job disappears: no `CacheProvider`/`createEmotionCache`, no Emotion
+ * `ThemeProvider`, no `<Global>` injection — the static stylesheet is imported
+ * once (see src/main.tsx).
+ *
+ * Color MODE is intentionally NOT set here. As in real Gamut, place a single
+ * `<ColorMode mode="…">` inside the provider for the ambient mode, and use
+ * `<Background>` for individual themed surfaces. */
+export const GamutProvider = ({
+  theme = 'core',
+  children,
+}: {
+  theme?: ThemeName;
+  children?: ReactNode;
+}) => (
+  <div data-panda-theme={theme === 'core' ? undefined : theme}>{children}</div>
+);
diff --git a/spikes/panda-styling-poc/src/gamut/ToolTip.tsx b/spikes/panda-styling-poc/src/gamut/ToolTip.tsx
new file mode 100644
index 0000000000..8ad759fd13
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/ToolTip.tsx
@@ -0,0 +1,89 @@
+import { type ReactNode, useId, useState } from 'react';
+import { css } from 'styled-system/css';
+
+/* Panda-native rebuild of gamut's ToolTip — same external API shape (info,
+ * placement, alignment, closeOnClick, id + a trigger child), authored entirely
+ * with Panda `css` (zero-runtime static classes; only open/close is stateful).
+ * Simplified to top-center for the spike; real gamut also does floating/inline
+ * placements + arrow. Proves ToolTip can be rebuilt on Panda, not imported from
+ * the Emotion package. */
+
+export type TipPlacement = 'inline' | 'floating';
+export type TipAlignment =
+  | 'top-center'
+  | 'bottom-center'
+  | 'top-left'
+  | 'top-right';
+
+export type ToolTipProps = {
+  info: ReactNode;
+  children: ReactNode;
+  id?: string;
+  placement?: TipPlacement;
+  alignment?: TipAlignment;
+  /** close immediately when the trigger is clicked/activated (default true) */
+  closeOnClick?: boolean;
+};
+
+const wrapper = css({ position: 'relative', display: 'inline-flex' });
+
+const bubble = css({
+  position: 'absolute',
+  bottom: '[100%]',
+  left: '[50%]',
+  transform: '[translateX(-50%)]',
+  mb: '8',
+  bg: 'text',
+  color: 'background',
+  px: '8',
+  py: '4',
+  borderRadius: 'md',
+  fontSize: '14',
+  fontFamily: 'base',
+  whiteSpace: 'nowrap',
+  zIndex: '[100]',
+  pointerEvents: 'none',
+  transitionProperty: 'opacity',
+  transitionDuration: 'fast',
+});
+
+export const ToolTip = ({
+  info,
+  children,
+  id,
+  closeOnClick = true,
+  // placement/alignment accepted for API parity; spike renders top-center only
+  placement: _placement,
+  alignment: _alignment,
+}: ToolTipProps) => {
+  const generatedId = useId();
+  const tipId = id ?? generatedId;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <span
+      className={wrapper}
+      onBlur={() => setOpen(false)}
+      onClick={() => closeOnClick && setOpen(false)}
+      onFocus={() => setOpen(true)}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      {/* aria-describedby wiring so the trigger is described by the tip */}
+      <span aria-describedby={tipId} style={{ display: 'inline-flex' }}>
+        {children}
+      </span>
+      <span
+        className={bubble}
+        id={tipId}
+        role="tooltip"
+        style={{
+          opacity: open ? 1 : 0,
+          visibility: open ? 'visible' : 'hidden',
+        }}
+      >
+        {info}
+      </span>
+    </span>
+  );
+};
diff --git a/spikes/panda-styling-poc/src/gamut/color-values.ts b/spikes/panda-styling-poc/src/gamut/color-values.ts
new file mode 100644
index 0000000000..213c3833b5
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/color-values.ts
@@ -0,0 +1,33 @@
+import { adminTheme } from '@codecademy/gamut-styles/dist/themes/admin';
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import { corePalette } from '@codecademy/gamut-styles/dist/variables';
+
+/* ESCAPE HATCH #1 — read a resolved color VALUE in JS.
+ *
+ * Under a zero-runtime engine a semantic token resolves to `var(--colors-…)`, so
+ * JS can't read a hex from it. Anything feeding a color to a NON-CSS consumer
+ * (@nivo/canvas, SVG fill, third-party inline styles) needs the literal value.
+ * This reads the SAME real Gamut theme the Panda tokens are built from
+ * (coreTheme/adminTheme `.modes` + `corePalette`), so it can't drift — the analog
+ * of gamut's `_getColorValue` / platform's raw-hex workaround. */
+
+export type ColorMode = 'light' | 'dark';
+export type ThemeName = 'core' | 'admin';
+export type SemanticAlias = keyof (typeof coreTheme)['modes']['light'];
+
+const themeModes = {
+  core: coreTheme,
+  admin: adminTheme,
+} as unknown as Record<
+  ThemeName,
+  { modes: Record<ColorMode, Record<string, string>> }
+>;
+const palette = corePalette as unknown as Record<string, string>;
+
+export const getColorValue = (
+  alias: SemanticAlias,
+  mode: ColorMode = 'light',
+  theme: ThemeName = 'core'
+): string => palette[themeModes[theme].modes[mode][alias as string]];
+
+export { corePalette as palette } from '@codecademy/gamut-styles/dist/variables';
diff --git a/spikes/panda-styling-poc/src/gamut/engine/index.ts b/spikes/panda-styling-poc/src/gamut/engine/index.ts
new file mode 100644
index 0000000000..ddbebac4a1
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/engine/index.ts
@@ -0,0 +1,28 @@
+/* The Emotion-free styling engine. Consumers import all of this from
+ * `@codecademy/gamut-styles`; nothing here leaks Panda or Emotion, so the
+ * engine underneath can be replaced without touching a call site. */
+
+export {
+  styled,
+  type Interpolation,
+  type StyleFn,
+  type StyledComponent,
+  type StyledOptions,
+} from './styled';
+export {
+  css,
+  states,
+  system,
+  systemPropNames,
+  systemProps,
+  variant,
+} from './props';
+export {
+  ThemeProvider,
+  useNonce,
+  useTheme,
+  type CoreTheme,
+  type GamutTheme,
+  type Theme,
+} from './theme';
+export { declValue, extractStyles, inject, register } from './sheet';
diff --git a/spikes/panda-styling-poc/src/gamut/engine/props.ts b/spikes/panda-styling-poc/src/gamut/engine/props.ts
new file mode 100644
index 0000000000..24661b7d84
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/engine/props.ts
@@ -0,0 +1,94 @@
+import {
+  all,
+  background,
+  border,
+  color,
+  flex,
+  grid,
+  layout,
+  list,
+  positioning,
+  shadows,
+  space,
+  typography,
+} from '@codecademy/gamut-styles/dist/variance/config';
+import { variance } from '@codecademy/variance';
+
+/* The authoring API, rebuilt on the REAL Gamut prop config
+ * (packages/gamut-styles/src/variance/config.ts) with zero Emotion imports.
+ *
+ * This is the crux of the spike: `css`/`variant`/`states` are byte-for-byte the
+ * same factories consumers use today. They already return
+ * `(props: ThemeProps) => CSSObject` and evaluate at runtime, so functions,
+ * ternaries, `theme.x` access and computed enum keys all keep working — the
+ * exact cases a static extractor has to punt on. */
+
+const baseCss = variance.createCss(all);
+
+/* `staticStyle` marks a style function whose output depends only on the theme —
+ * never on props. That lets `styled` resolve it ONCE per theme instead of on
+ * every render, which is what makes module-scope `styled(...)` cheap enough to
+ * be the recommended path for reusable components. See engine/styled.tsx. */
+export const css = ((cssProps: Parameters<typeof baseCss>[0]) =>
+  Object.assign(baseCss(cssProps), { staticStyle: true })) as typeof baseCss;
+
+const baseVariant = variance.createVariant(all);
+const baseStates = variance.createStates(all);
+
+/* variance's factories don't report which props they consume, which is why call
+ * sites today must hand-maintain `styledOptions(['isFancy'])` to keep state props
+ * off the DOM. Attaching the names here lets `styled` filter them automatically —
+ * removing a whole category of boilerplate rather than porting it. */
+/* `variantMeta` / `stateMeta` exist for the PRECOMPUTE step (src/precompute).
+ * variance closes over its config, so from the outside there is no way to learn
+ * which variant keys a `variant()` function accepts — which makes enumerating the
+ * prop space impossible. Exposing it here is what lets a build step execute these
+ * functions across their whole domain and emit static Panda recipes, leaving the
+ * 109 internal call sites untouched. */
+export const variant = ((config: Parameters<typeof baseVariant>[0]) =>
+  Object.assign(baseVariant(config), {
+    propNames: [config.prop ?? 'variant'],
+    variantMeta: {
+      prop: config.prop ?? 'variant',
+      keys: Object.keys(config.variants ?? {}),
+      defaultVariant: config.defaultVariant,
+      hasBase: Boolean(config.base),
+    },
+  })) as typeof baseVariant;
+
+export const states = ((config: Parameters<typeof baseStates>[0]) =>
+  Object.assign(baseStates(config), {
+    propNames: Object.keys(config),
+    stateMeta: { keys: Object.keys(config) },
+  })) as typeof baseStates;
+
+/** `system.*` prop groups, unchanged — for `variance.compose()` at call sites. */
+export const system = {
+  typography: variance.create(typography),
+  grid: variance.create(grid),
+  flex: variance.create(flex),
+  layout: variance.create(layout),
+  positioning: variance.create(positioning),
+  background: variance.create(background),
+  color: variance.create(color),
+  shadow: variance.create(shadows),
+  space: variance.create(space),
+  border: variance.create(border),
+  list: variance.create(list),
+  css,
+  variant,
+  states,
+};
+
+/** Every system prop at once — what `Box` and friends apply. */
+export const systemProps = variance.create(all);
+
+/* Names to keep off the DOM. Emotion used `@emotion/is-prop-valid` for this;
+ * the prop config is already the authoritative list, so the dependency goes
+ * away rather than needing a replacement. */
+export const systemPropNames = new Set<string>([
+  ...Object.keys(all),
+  'theme',
+  'variant',
+  'mode',
+]);
diff --git a/spikes/panda-styling-poc/src/gamut/engine/sheet.ts b/spikes/panda-styling-poc/src/gamut/engine/sheet.ts
new file mode 100644
index 0000000000..3eeba26392
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/engine/sheet.ts
@@ -0,0 +1,254 @@
+import type { CSSObject } from '@codecademy/variance';
+
+/* The injection layer — the ONLY piece that replaces Emotion. Everything else in
+ * the pipeline (variance's css/variant/states and the system-prop parsers) is
+ * reused unchanged, which is why consumer call sites don't have to move.
+ * Panda still owns tokens + Gamut's own component CSS; this handles the residue
+ * that a static extractor provably cannot see (consumer-authored values). */
+
+// FNV-1a. Must be stable across server and client or SSR markup won't hydrate.
+const hash = (input: string): string => {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < input.length; i += 1) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return (h >>> 0).toString(36);
+};
+
+const kebab = (prop: string) =>
+  prop.startsWith('--')
+    ? prop
+    : prop.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+/* Properties that take a bare number. Everything else gets `px` when handed a
+ * number — matching Emotion exactly, so migrated call sites that lean on
+ * `padding: 4` meaning `4px` keep rendering identically. */
+const UNITLESS = new Set([
+  'animationIterationCount',
+  'aspectRatio',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'flex',
+  'flexGrow',
+  'flexPositive',
+  'flexShrink',
+  'flexNegative',
+  'flexOrder',
+  'gridArea',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowStart',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnStart',
+  'fontWeight',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'scale',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+  'fillOpacity',
+  'floodOpacity',
+  'stopOpacity',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+]);
+
+/**
+ * Formats a declaration value the way Emotion does — bare numbers get `px`
+ * unless the property is unitless, and `0` never gets a unit. Exported because
+ * the precompute step needs the identical rule; duplicating it would let the
+ * static and runtime paths drift apart.
+ */
+export const declValue = (prop: string, raw: string | number) =>
+  typeof raw === 'number' && raw !== 0 && !UNITLESS.has(prop)
+    ? `${raw}px`
+    : String(raw);
+
+type Block = { at: string[]; selector: string; decls: string[] };
+
+// `&:hover` keeps its anchor; a bare `> li` nests as a descendant, as stylis does
+const nest = (key: string, parent: string) =>
+  key.includes('&') ? key.replace(/&/g, parent) : `${parent} ${key}`;
+
+/* Flattens a (possibly deeply nested) CSSObject into ordered blocks. Nested
+ * objects are either at-rules (`@media`, `@supports`, `@container`) or selectors
+ * — the same two cases variance's `css()` already emits, so anything authorable
+ * today survives the round trip. */
+const serialize = (
+  styles: CSSObject,
+  selector = '&',
+  at: string[] = [],
+  out: Block[] = []
+): Block[] => {
+  const decls: string[] = [];
+
+  Object.entries(styles).forEach(([key, raw]) => {
+    if (raw === undefined || raw === null || raw === '') return;
+
+    if (typeof raw === 'object') {
+      if (Array.isArray(raw)) return;
+      if (key.startsWith('@')) {
+        serialize(raw as CSSObject, selector, [...at, key], out);
+      } else {
+        serialize(raw as CSSObject, nest(key, selector), at, out);
+      }
+      return;
+    }
+
+    decls.push(`${kebab(key)}:${declValue(key, raw as string | number)}`);
+  });
+
+  if (decls.length) out.push({ at, selector, decls });
+  return out;
+};
+
+/* Mirrors gamut's `focusVisible` stylis plugin
+ * (packages/gamut-styles/src/cache/stylisPlugins/focusVisible.ts): pair every
+ * `:focus-visible` rule with a `[data-focus-visible-added]` copy so the existing
+ * JS polyfill keeps working after Emotion is gone. */
+const withFocusVisible = (selector: string) =>
+  selector.includes(':focus-visible')
+    ? `${selector}, ${selector.replace(
+        /:focus-visible/g,
+        '[data-focus-visible-added]'
+      )}`
+    : selector;
+
+const cssText = (blocks: Block[], className: string) =>
+  blocks
+    .map(({ at, selector, decls }) => {
+      const body = `${withFocusVisible(
+        selector.replace(/&/g, `.${className}`)
+      )}{${decls.join(';')}}`;
+      return at.reduceRight((inner, rule) => `${rule}{${inner}}`, body);
+    })
+    .join('');
+
+/* Cascade: Gamut's own Panda-generated CSS lives in earlier layers, so consumer
+ * overrides in this layer win without specificity hacks or !important. Declared
+ * order in globals.css is what makes that deterministic. */
+const LAYER = 'gamut.consumer';
+
+/* Three separate concerns, because conflating them caused a real SSR bug:
+ *   rules    — className -> CSS text. Process-wide, grows once per unique style.
+ *   inSheet  — what has actually been inserted into the DOM (browser only).
+ *   emitted  — what is included in the CURRENT SSR response.
+ *
+ * `styled` memoises class resolution, so on a cache hit `inject` is never
+ * reached. If registration lived inside `inject`, the second SSR response would
+ * ship markup whose class names had no CSS behind them. */
+const rules = new Map<string, string>();
+const inSheet = new Set<string>();
+const emitted = new Set<string>();
+const collected: string[] = [];
+let sheetEl: HTMLStyleElement | undefined;
+
+const element = (nonce?: string) => {
+  if (sheetEl) return sheetEl;
+  const found = document.querySelector<HTMLStyleElement>('style[data-gamut]');
+  if (found) {
+    sheetEl = found;
+    // adopt rules already delivered by SSR so we never double-insert
+    found.textContent
+      ?.match(/\.gmt-[a-z0-9]+/g)
+      ?.forEach((match) => inSheet.add(match.slice(1)));
+    return found;
+  }
+  const created = document.createElement('style');
+  created.setAttribute('data-gamut', '');
+  if (nonce) created.setAttribute('nonce', nonce);
+  document.head.appendChild(created);
+  sheetEl = created;
+  return created;
+};
+
+const append = (text: string, nonce?: string) => {
+  const node = element(nonce);
+  try {
+    // insertRule is markedly faster; @layer blocks are a single rule here
+    node.sheet?.insertRule(text, node.sheet.cssRules.length);
+  } catch {
+    node.appendChild(document.createTextNode(text));
+  }
+};
+
+/**
+ * Accounts for a class's rule: inserts it into the DOM in the browser, or adds it
+ * to the current SSR response on the server. Idempotent per destination.
+ *
+ * Public because `styled` memoises class resolution and must still call this on a
+ * cache hit — otherwise a second SSR response carries class names with no CSS.
+ */
+export const register = (className: string, nonce?: string) => {
+  const text = rules.get(className);
+  if (!text) return;
+
+  if (typeof document === 'undefined') {
+    if (emitted.has(className)) return;
+    emitted.add(className);
+    collected.push(text);
+    return;
+  }
+
+  if (inSheet.has(className)) return;
+  inSheet.add(className);
+  append(text, nonce);
+};
+
+/**
+ * Turns a resolved CSSObject into a class name, registering the rule once.
+ * Deterministic: identical styles always produce the identical class, on both
+ * server and client, so SSR cannot produce a hydration mismatch.
+ */
+export const inject = (styles: CSSObject, nonce?: string): string => {
+  const blocks = serialize(styles);
+  if (!blocks.length) return '';
+
+  // hash the declarations, so structurally identical styles share one class
+  const canonical = blocks
+    .map(
+      ({ at, selector, decls }) =>
+        `${at.join('')}${selector}{${decls.join(';')}}`
+    )
+    .join('');
+  const className = `gmt-${hash(canonical)}`;
+
+  if (!rules.has(className)) {
+    rules.set(className, `@layer ${LAYER}{${cssText(blocks, className)}}`);
+  }
+  register(className, nonce);
+
+  return className;
+};
+
+/**
+ * SSR: everything rendered so far, as CSS text for a single `<style>` tag.
+ * Replaces Emotion's `extractCriticalToChunks` + injected-cache dance — no
+ * per-request cache object, so `GamutProvider`'s `cache` prop becomes a no-op.
+ */
+export const extractStyles = () => {
+  const text = collected.join('');
+  collected.length = 0;
+  // only the per-response set resets; `rules` is a permanent process-wide cache
+  emitted.clear();
+  return text;
+};
+
+// test/measurement seam — lets the harness count rules without a DOM
+export const __rules = () => [...rules.keys()];
diff --git a/spikes/panda-styling-poc/src/gamut/engine/styled.tsx b/spikes/panda-styling-poc/src/gamut/engine/styled.tsx
new file mode 100644
index 0000000000..543a9ea5d5
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/engine/styled.tsx
@@ -0,0 +1,317 @@
+import type { CSSObject, ThemeProps } from '@codecademy/variance';
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ElementType,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+  createElement,
+  forwardRef,
+} from 'react';
+
+import { systemPropNames } from './props';
+import { inject, register } from './sheet';
+import { useNonce, useTheme } from './theme';
+
+/* `styled` with the Emotion composed call shape — `styled(C)(a, b, c)` — where
+ * each argument is a `(props) => CSSObject` produced by css()/variant()/states()
+ * or written by hand. This is the whole point of the spike: the shape is
+ * preserved exactly, so existing call sites move by changing one import. */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type StyleFn = (props: any) => CSSObject;
+
+export type StyledComponent<
+  T extends ElementType,
+  P
+> = ForwardRefExoticComponent<
+  Omit<ComponentPropsWithoutRef<T>, keyof P> & P & RefAttributes<unknown>
+> & {
+  /** Emotion's `withComponent` — same styles, different render target. */
+  withComponent: <N extends ElementType>(next: N) => StyledComponent<N, P>;
+};
+
+const isPlainObject = (value: unknown): value is CSSObject =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+// deep merge, later wins — the precedence Emotion gives composed arguments
+const merge = (target: CSSObject, source: CSSObject): CSSObject => {
+  Object.entries(source).forEach(([key, value]) => {
+    const existing = (target as Record<string, unknown>)[key];
+    (target as Record<string, unknown>)[key] =
+      isPlainObject(value) && isPlainObject(existing)
+        ? merge({ ...existing }, value)
+        : value;
+  });
+  return target;
+};
+
+const STYLES = Symbol.for('gamut.styles');
+const TARGET = Symbol.for('gamut.target');
+
+type StyledMeta = { [STYLES]?: StyleFn[]; [TARGET]?: ElementType };
+
+export type StyledOptions = { shouldForwardProp?: (prop: string) => boolean };
+
+/* Which props a style function reads. variance parsers (`variance.create`) expose
+ * this natively; props.ts adds it to css/variant/states. */
+const consumedProps = (fns: StyleFn[]) => {
+  const consumed = new Set<string>();
+  fns.forEach((fn) =>
+    (fn as { propNames?: string[] }).propNames?.forEach((name) =>
+      consumed.add(name)
+    )
+  );
+  return consumed;
+};
+
+/* Emotion semantics plus two improvements: `$`-prefixed transient props never
+ * reach the DOM (the styled-components convention the spike's styledDynamic
+ * already uses), and any prop a style function declared it consumes is filtered
+ * automatically — so `styledOptions([...])` lists don't need porting. */
+const defaultForward =
+  (target: ElementType, consumed: Set<string>) => (prop: string) => {
+    if (prop.startsWith('$') || consumed.has(prop)) return false;
+    return typeof target === 'string' ? !systemPropNames.has(prop) : true;
+  };
+
+/* A style function is predictable if it either reads nothing but the theme
+ * (`css()`, marked `staticStyle`) or declares exactly which props it reads
+ * (`variant()`, `states()`, variance parsers, which expose `propNames`). When
+ * every function in the chain is predictable, the resolved class is a pure
+ * function of (theme, the values of those props) and can be memoised.
+ *
+ * A hand-written `(props) => ({...})` is NOT predictable — it may read anything —
+ * so those components opt out and resolve per render, as before. */
+const isPredictable = (fn: StyleFn) => {
+  const meta = fn as { staticStyle?: boolean; propNames?: string[] };
+  return Boolean(meta.staticStyle || meta.propNames);
+};
+
+/* Cache key from only the props that can actually affect styles. Iterates the
+ * props (usually few) rather than the consumed set (up to 126 system props). */
+const memoKey = (props: Record<string, unknown>, consumed: Set<string>) => {
+  const parts: string[] = [];
+  Object.keys(props).forEach((key) => {
+    if (consumed.has(key)) parts.push(`${key}:${String(props[key])}`);
+  });
+  return parts.sort().join('|');
+};
+
+const displayNameOf = (target: ElementType) =>
+  typeof target === 'string'
+    ? target
+    : (target as ComponentType).displayName ??
+      (target as ComponentType).name ??
+      'Component';
+
+const styledFactory =
+  <T extends ElementType>(Component: T, options: StyledOptions = {}) =>
+  <P extends object = Record<never, never>>(
+    ...styleFns: StyleFn[]
+  ): StyledComponent<T, P> => {
+    const meta = Component as unknown as StyledMeta;
+
+    /* Extending an already-styled component flattens into ONE class instead of
+     * relying on cascade order — strictly more deterministic than Emotion, where
+     * override precedence depends on stylesheet insertion order. */
+    const target = (meta[TARGET] ?? Component) as ElementType;
+    const fns = [...(meta[STYLES] ?? []), ...styleFns];
+
+    const consumed = consumedProps(fns);
+
+    /* Recomputed from the whole chain, not inherited — extending adds style fns
+     * with their own consumed props, which a parent's filter can't know about. */
+    const shouldForward =
+      options.shouldForwardProp ?? defaultForward(target, consumed);
+
+    /* Per-component, per-theme class cache. This is what separates the two
+     * consumer tiers: a module-scope `styled(...)` whose styles don't vary by
+     * prop resolves to the empty key, so it merges and hashes ONCE at first
+     * render and is a Map lookup for every instance after. Inline system props
+     * can't benefit — their values arrive per instance. */
+    const memoizable = fns.every(isPredictable);
+    const cache = new WeakMap<object, Map<string, string>>();
+
+    const merged = (props: Record<string, unknown>, theme: object) =>
+      fns.reduce<CSSObject>(
+        (acc, fn) => merge(acc, fn({ ...props, theme } as ThemeProps)),
+        {}
+      );
+
+    const resolveClass = (
+      props: Record<string, unknown>,
+      theme: object,
+      nonce?: string
+    ) => {
+      if (!memoizable) return inject(merged(props, theme), nonce);
+
+      let perTheme = cache.get(theme);
+      if (!perTheme) {
+        perTheme = new Map();
+        cache.set(theme, perTheme);
+      }
+
+      const key = memoKey(props, consumed);
+      const hit = perTheme.get(key);
+      if (hit !== undefined) {
+        /* Cheap, and REQUIRED: the memo skips `inject`, so without this the rule
+         * would be missing from the current SSR response even though the markup
+         * references its class. */
+        register(hit, nonce);
+        return hit;
+      }
+
+      const generated = inject(merged(props, theme), nonce);
+      perTheme.set(key, generated);
+      return generated;
+    };
+
+    const Styled = forwardRef<unknown, Record<string, unknown>>(
+      (props, ref) => {
+        const theme = useTheme();
+        const nonce = useNonce();
+
+        const className = [
+          resolveClass(props, theme as object, nonce),
+          props.className,
+        ]
+          .filter(Boolean)
+          .join(' ');
+
+        const domProps: Record<string, unknown> = { ref, className };
+        Object.entries(props).forEach(([key, value]) => {
+          if (key !== 'className' && shouldForward(key)) domProps[key] = value;
+        });
+
+        return createElement(target, domProps);
+      }
+    );
+
+    Styled.displayName = `styled(${displayNameOf(target)})`;
+
+    const withMeta = Styled as unknown as StyledMeta & {
+      withComponent: <N extends ElementType>(next: N) => StyledComponent<N, P>;
+    };
+    withMeta[STYLES] = fns;
+    withMeta[TARGET] = target;
+
+    /* Kept because it's used 379 times in mono alone (mostly
+     * `Box.withComponent('img')`) and costs nothing here: styles and target are
+     * already tracked separately. Accepts component targets too
+     * (`iFrameWrapper.withComponent(CardElement)`). Prefer `as` in new code. */
+    withMeta.withComponent = <N extends ElementType>(next: N) =>
+      styledFactory(next)<P>(...fns);
+
+    return Styled as unknown as StyledComponent<T, P>;
+  };
+
+/* ---------------------------------------------------------------------------
+ * Template-literal support (`styled.div`...``)
+ *
+ * codemod-feasibility.md classes this shape as permanently UNSUPPORTED under
+ * static extraction — 234 sites in mono, 56 in platform, "no static-analysis
+ * cleverness closes that gap." A runtime engine closes it with a small parser,
+ * which is the single biggest divergence between the two migration paths.
+ * Deliberately minimal: no at-rule or comment handling.
+ * ------------------------------------------------------------------------- */
+
+const camel = (prop: string) =>
+  prop.startsWith('--')
+    ? prop
+    : prop.replace(/-([a-z])/g, (_, char: string) => char.toUpperCase());
+
+const addDeclaration = (out: Record<string, unknown>, chunk: string) => {
+  const split = chunk.indexOf(':');
+  if (split === -1) return;
+  const prop = chunk.slice(0, split).trim();
+  const value = chunk.slice(split + 1).trim();
+  if (prop && value) out[camel(prop)] = value;
+};
+
+const parseCss = (input: string): CSSObject => {
+  const out: Record<string, unknown> = {};
+  let buffer = '';
+  let selector = '';
+  let depth = 0;
+
+  for (let i = 0; i < input.length; i += 1) {
+    const char = input[i];
+
+    if (char === '{') {
+      if (depth === 0) {
+        selector = buffer.trim();
+        buffer = '';
+      } else {
+        buffer += char;
+      }
+      depth += 1;
+      continue;
+    }
+
+    if (char === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        out[selector] = parseCss(buffer);
+        buffer = '';
+      } else {
+        buffer += char;
+      }
+      continue;
+    }
+
+    if (char === ';' && depth === 0) {
+      addDeclaration(out, buffer);
+      buffer = '';
+      continue;
+    }
+
+    buffer += char;
+  }
+
+  if (depth === 0 && buffer.trim()) addDeclaration(out, buffer);
+  return out as CSSObject;
+};
+
+export type Interpolation =
+  | string
+  | number
+  | null
+  | undefined
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | ((props: any) => unknown);
+
+type TemplateTag<T extends ElementType> = <
+  P extends object = Record<never, never>
+>(
+  strings: TemplateStringsArray,
+  ...interpolations: Interpolation[]
+) => StyledComponent<T, P>;
+
+const templateFactory =
+  <T extends ElementType>(target: T): TemplateTag<T> =>
+  <P extends object = Record<never, never>>(
+    strings: TemplateStringsArray,
+    ...interpolations: Interpolation[]
+  ) =>
+    styledFactory(target)<P>((props) => {
+      let source = strings[0];
+      interpolations.forEach((raw, index) => {
+        // function interpolations are exactly the prop-dependent case
+        const value = typeof raw === 'function' ? raw(props) : raw;
+        source += `${value ?? ''}${strings[index + 1]}`;
+      });
+      return parseCss(source);
+    });
+
+type StyledFactory = typeof styledFactory & {
+  [Tag in keyof JSX.IntrinsicElements]: TemplateTag<Tag>;
+};
+
+/** `styled(Component)(…)` and `styled.div\`…\`` from one export, as Emotion. */
+export const styled = new Proxy(styledFactory, {
+  get: (base, tag: string, receiver) =>
+    Reflect.has(base, tag)
+      ? Reflect.get(base, tag, receiver)
+      : templateFactory(tag as keyof JSX.IntrinsicElements),
+}) as StyledFactory;
diff --git a/spikes/panda-styling-poc/src/gamut/engine/theme.tsx b/spikes/panda-styling-poc/src/gamut/engine/theme.tsx
new file mode 100644
index 0000000000..a96a062b58
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/engine/theme.tsx
@@ -0,0 +1,46 @@
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import { type ReactNode, createContext, useContext } from 'react';
+
+/* Replaces `declare module '@emotion/react' { interface Theme … }`.
+ *
+ * Consumers augment `GamutTheme` exactly as they augment Emotion's `Theme`
+ * today, so the 19 real augmentation sites (18 in mono, 1 in
+ * platform/src/themes/platform.d.ts) change only their module specifier:
+ *
+ *   declare module '@codecademy/gamut-styles' {
+ *     export interface GamutTheme extends PercipioTheme {}
+ *   }
+ *
+ * Improvement over Emotion's version: unaugmented, this resolves to CoreTheme
+ * rather than `{}`. Today a consumer who forgets the augmentation silently gets
+ * an empty theme type and loses all token autocomplete with no error. */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface GamutTheme {}
+
+export type CoreTheme = typeof coreTheme;
+export type Theme = keyof GamutTheme extends never ? CoreTheme : GamutTheme;
+
+const ThemeContext = createContext<Theme>(coreTheme as Theme);
+ThemeContext.displayName = 'GamutTheme';
+
+/* CSP nonce travels by context rather than inside a cache object, so the `nonce`
+ * prop keeps working (front, platform and TI all set one) while
+ * `createEmotionCache` disappears entirely. */
+const NonceContext = createContext<string | undefined>(undefined);
+
+export const useTheme = (): Theme => useContext(ThemeContext);
+export const useNonce = () => useContext(NonceContext);
+
+export const ThemeProvider = ({
+  theme,
+  nonce,
+  children,
+}: {
+  theme: Theme;
+  nonce?: string;
+  children?: ReactNode;
+}) => (
+  <ThemeContext.Provider value={theme}>
+    <NonceContext.Provider value={nonce}>{children}</NonceContext.Provider>
+  </ThemeContext.Provider>
+);
diff --git a/spikes/panda-styling-poc/src/gamut/index.ts b/spikes/panda-styling-poc/src/gamut/index.ts
new file mode 100644
index 0000000000..a8c5a3b21b
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/index.ts
@@ -0,0 +1,45 @@
+/* The Gamut styling facade. Consumers import EVERYTHING from here — including
+ * `styled` and `css` — never from `@emotion/*` or `styled-system/*` directly.
+ * This is the single stable surface a future engine swap rewrites behind. */
+
+/* TIER 1/2 — Panda-native authoring, for Gamut's OWN components. Static,
+ * zero-runtime, recipe-driven: `styled(tag, recipe)` and `css({...})` returning
+ * class names. This is what src/App.tsx and src/gamut/Button.tsx use. */
+export { styled } from 'styled-system/jsx';
+export { css } from 'styled-system/css';
+export { token } from 'styled-system/tokens';
+
+/* TIER 3/4 — the Emotion-free engine that preserves the EXISTING external API:
+ * `styled(Component)(css(...), variant(...), states(...))`. Reuses `variance`
+ * untouched, so today's call sites move by changing one import. Exported under
+ * `engine` here only because this spike also demonstrates the Panda-native names
+ * above; in real Gamut these ARE `styled`/`css`/`variant`/`states`.
+ * See src/proof/parity.tsx for the call-site parity proof. */
+export * as engine from './engine';
+export {
+  ThemeProvider,
+  extractStyles,
+  states,
+  system,
+  systemProps,
+  useNonce,
+  useTheme,
+  variant,
+  type CoreTheme,
+  type GamutTheme,
+  type StyleFn,
+  type StyledComponent,
+  type Theme,
+} from './engine';
+
+export { Box } from './Box';
+export { ButtonBase } from './ButtonBase';
+export * from './Button';
+// escape hatches that keep the external API compatible under zero-runtime:
+export { getColorValue, palette } from './color-values';
+export type { SemanticAlias, ThemeName } from './color-values';
+export { styledDynamic } from './styledDynamic';
+export { ColorMode, type ColorModeName } from './ColorMode';
+export { ToolTip, type ToolTipProps } from './ToolTip';
+export { Background, useBackground } from './Background';
+export { GamutProvider } from './GamutProvider';
diff --git a/spikes/panda-styling-poc/src/gamut/styledDynamic.tsx b/spikes/panda-styling-poc/src/gamut/styledDynamic.tsx
new file mode 100644
index 0000000000..2d5ab3ec1e
--- /dev/null
+++ b/spikes/panda-styling-poc/src/gamut/styledDynamic.tsx
@@ -0,0 +1,43 @@
+import {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type ElementType,
+  createElement,
+  forwardRef,
+} from 'react';
+
+/* ESCAPE HATCH #2 — runtime `styled` for genuinely dynamic, prop-dependent
+ * styles that a static extractor can't evaluate (e.g. `width: ${percent}%`,
+ * `color: $active ? primary : disabled`). This is the small residual from the
+ * usage survey (mono's ~825 prop-interpolated `styled` sites).
+ *
+ * It preserves the `styled(Tag)(props => styles)` AUTHORING SHAPE but applies the
+ * computed flat style object as an inline `style` — forfeiting zero-runtime for
+ * THIS component only. Transient style-only props are named `$foo` and stripped
+ * from the DOM (same convention as styled-components). For dynamic styles that
+ * need pseudo-selectors, use `variant()`/`states()` (static) instead — this hatch
+ * is for dynamic VALUES.
+ *
+ * The idiomatic zero-runtime alternative is an inline CSS variable
+ * (`style={{ '--x': v }}` + a static class using `var(--x)`); this factory keeps
+ * the old call-site shape for a drop-in codemod target. */
+export const styledDynamic =
+  <T extends ElementType>(Component: T) =>
+  <P extends Record<`$${string}`, unknown>>(
+    styleFn: (props: P) => CSSProperties
+  ) =>
+    forwardRef<unknown, ComponentPropsWithoutRef<T> & P>((props, ref) => {
+      const dynamicStyle = styleFn(props as unknown as P);
+
+      // strip `$`-prefixed transient props so they don't leak onto the DOM node
+      const domProps: Record<string, unknown> = { ref };
+      for (const [key, value] of Object.entries(props)) {
+        if (!key.startsWith('$')) domProps[key] = value;
+      }
+      domProps.style = {
+        ...dynamicStyle,
+        ...(props as { style?: CSSProperties }).style,
+      };
+
+      return createElement(Component, domProps);
+    });
diff --git a/spikes/panda-styling-poc/src/globals.d.ts b/spikes/panda-styling-poc/src/globals.d.ts
new file mode 100644
index 0000000000..35306c6fc9
--- /dev/null
+++ b/spikes/panda-styling-poc/src/globals.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git a/spikes/panda-styling-poc/src/main.tsx b/spikes/panda-styling-poc/src/main.tsx
new file mode 100644
index 0000000000..6bd39bce52
--- /dev/null
+++ b/spikes/panda-styling-poc/src/main.tsx
@@ -0,0 +1,10 @@
+// Real Gamut Core web fonts (Apercu/Suisse) + the one static stylesheet a
+// consumer imports (generated by cssgen). Replaces Emotion's cache + <Global>.
+import './fonts.css';
+import './gamut-static.css';
+
+import { createRoot } from 'react-dom/client';
+
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/spikes/panda-styling-poc/src/precompute/authoring.ts b/spikes/panda-styling-poc/src/precompute/authoring.ts
new file mode 100644
index 0000000000..19e5706cf4
--- /dev/null
+++ b/spikes/panda-styling-poc/src/precompute/authoring.ts
@@ -0,0 +1,151 @@
+import { transitionConcat } from '@codecademy/gamut-styles/dist/styles/transitionConcat';
+
+import { css, states, variant } from '../gamut/engine';
+
+/* INTERNAL GAMUT AUTHORING — DELIBERATELY UNCHANGED.
+ *
+ * A faithful reproduction of packages/gamut/src/Button/shared/{styles,variants}.ts
+ * (reproduced rather than imported, because importing the real module pulls
+ * Emotion in through the gamut-styles root export). Every construct that defeats a
+ * parse-based codemod is present on purpose:
+ *
+ *   - `templateVariants()`      — builds the variant config PROGRAMMATICALLY
+ *   - `[ButtonSelectors.HOVER]` — computed keys from an enum
+ *   - `transitionConcat(...)`   — a function CALL producing a value
+ *   - `variant === 'interface' ? …` — a ternary inside the template
+ *
+ * Panda's static extractor cannot evaluate any of these. The precompute step in
+ * generate.ts doesn't try to: it EXECUTES this file and reads the results. */
+
+// mirrors packages/gamut/src/ButtonBase/ButtonBase.tsx
+export enum ButtonSelectors {
+  HOVER = '&:hover',
+  ACTIVE = '&:active',
+  DISABLED = "[disabled], &:disabled, &[aria-disabled='true']",
+  FOCUS_VISIBLE = '&:focus-visible',
+  OUTLINE = '&:before',
+  OUTLINE_FOCUS_VISIBLE = '&:focus-visible:before',
+}
+
+export const buttonVariants = [
+  'primary',
+  'secondary',
+  'danger',
+  'interface',
+] as const;
+
+/** Verbatim from the real `shared/styles.ts`. */
+export const templateVariants = <Variant extends string, Styles>(
+  variants: readonly Variant[],
+  template: (colors: Variant) => Styles
+) => {
+  const variantConfig = {} as Record<Variant, ReturnType<typeof template>>;
+  variants.forEach((key: Variant) => {
+    variantConfig[key] = template(key);
+  });
+  return variant({
+    defaultVariant: variants[0],
+    variants: variantConfig,
+  } as never);
+};
+
+const hoverBackgroundTransition = transitionConcat(
+  ['background-color', 'box-shadow'],
+  'fast',
+  'ease-in'
+);
+
+export const buttonStyles = css({
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: 2,
+  borderRadius: 'md',
+  borderColor: 'transparent',
+  transition: transitionConcat(
+    ['border-color', 'color', 'background-color', 'box-shadow'],
+    'fast',
+    'ease-in'
+  ),
+  [ButtonSelectors.DISABLED]: { cursor: 'not-allowed', userSelect: 'none' },
+  [ButtonSelectors.OUTLINE]: {
+    content: '""',
+    position: 'absolute',
+    borderRadius: 'lg',
+    border: 2,
+    inset: -5,
+    opacity: 0,
+    zIndex: 0,
+  },
+  [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: { opacity: 1 },
+} as never);
+
+export const fillButtonVariants = templateVariants(
+  buttonVariants,
+  (buttonVariant) => ({
+    bg: buttonVariant,
+    color: 'background',
+    [ButtonSelectors.OUTLINE]: { borderColor: buttonVariant },
+    [ButtonSelectors.HOVER]: {
+      bg: `${buttonVariant}-hover`,
+      color: 'background',
+      transition: hoverBackgroundTransition,
+    },
+    [ButtonSelectors.ACTIVE]: {
+      borderColor: 'border-primary',
+      bg: buttonVariant,
+      color: 'background',
+    },
+    [ButtonSelectors.DISABLED]: {
+      color: 'text-disabled',
+      bg: 'background-disabled',
+    },
+  })
+);
+
+export const textButtonVariants = templateVariants(
+  buttonVariants,
+  (buttonVariant) => ({
+    borderColor: 'transparent',
+    // the ternary a static extractor can't fold
+    color: buttonVariant === 'interface' ? 'text' : buttonVariant,
+    [ButtonSelectors.HOVER]: {
+      color: buttonVariant,
+      bg: 'background-hover',
+      transition: hoverBackgroundTransition,
+    },
+    [ButtonSelectors.FOCUS_VISIBLE]: { color: buttonVariant },
+    [ButtonSelectors.DISABLED]: { color: 'text-disabled', bg: 'transparent' },
+  })
+);
+
+export const sizeVariants = variant({
+  prop: 'size',
+  defaultVariant: 'normal',
+  variants: {
+    small: { fontSize: 14, minHeight: 32, py: 4, px: 8 },
+    normal: { fontSize: 16, minHeight: 40, py: 4, px: 16 },
+    large: { fontSize: 18, minHeight: 56, py: 4, px: 16 },
+  },
+} as never);
+
+export const buttonStates = states({
+  fullWidth: { width: '100%' },
+} as never);
+
+/* FIDELITY PROBE — two states that set the SAME property.
+ *
+ * `states()` deep-merges every active state in DECLARATION order, so with both
+ * flags on, `error` (declared later) wins at runtime. Panda instead emits one
+ * INDEPENDENT class per active boolean variant, so the winner is decided by
+ * STYLESHEET order. If those two disagree, migrated components change appearance
+ * silently — no error, no type failure, just a different colour.
+ *
+ * mono has 62 `states()` sites, so this needs to be verified rather than assumed.
+ * See verify-fidelity.ts. */
+export const overlapStates = states({
+  warning: { bg: 'yellow' },
+  error: { bg: 'red' },
+} as never);
diff --git a/spikes/panda-styling-poc/src/precompute/generate.ts b/spikes/panda-styling-poc/src/precompute/generate.ts
new file mode 100644
index 0000000000..cd03fe7855
--- /dev/null
+++ b/spikes/panda-styling-poc/src/precompute/generate.ts
@@ -0,0 +1,224 @@
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import type { CSSObject } from '@codecademy/variance';
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { declValue } from '../gamut/engine';
+import {
+  buttonStates,
+  buttonStyles,
+  fillButtonVariants,
+  overlapStates,
+  sizeVariants,
+  textButtonVariants,
+} from './authoring';
+
+/* PRECOMPUTE: turn unchanged variance authoring into static Panda recipes by
+ * EXECUTING it, not parsing it.
+ *
+ * This is the whole idea. A parse-based codemod fails on authoring.ts because of
+ * `templateVariants`, computed enum keys, `transitionConcat()` calls and ternaries.
+ * Running the code sidesteps every one of those, because by the time we see the
+ * result it's a plain CSSObject.
+ *
+ * Enumerating the prop space is possible only because props.ts attaches
+ * `variantMeta`/`stateMeta` — variance otherwise closes over its config.
+ *
+ * Run: yarn nx run panda-styling-poc:precompute */
+
+type Meta = {
+  variantMeta?: {
+    prop: string;
+    keys: string[];
+    defaultVariant?: string;
+    hasBase: boolean;
+  };
+  stateMeta?: { keys: string[] };
+};
+type StyleFn = ((props: Record<string, unknown>) => CSSObject) & Meta;
+
+const theme = coreTheme as unknown as Record<string, unknown>;
+
+const isPlainObject = (value: unknown): value is CSSObject =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const merge = (target: CSSObject, source: CSSObject): CSSObject => {
+  Object.entries(source).forEach(([key, value]) => {
+    const existing = (target as Record<string, unknown>)[key];
+    (target as Record<string, unknown>)[key] =
+      isPlainObject(value) && isPlainObject(existing)
+        ? merge({ ...existing }, value)
+        : value;
+  });
+  return target;
+};
+
+type Recipe = {
+  className: string;
+  base: CSSObject;
+  variants: Record<string, Record<string, CSSObject>>;
+  defaultVariants: Record<string, string>;
+};
+
+/**
+ * Executes each style function across its whole domain:
+ *  - a `variant()` fn is called once per variant key
+ *  - a `states()` fn is called once per state, becoming a Panda boolean variant
+ *  - anything else is base styles
+ */
+const precompute = (className: string, fns: StyleFn[]): Recipe => {
+  const base: CSSObject = {};
+  const variants: Record<string, Record<string, CSSObject>> = {};
+  const defaultVariants: Record<string, string> = {};
+
+  fns.forEach((fn) => {
+    if (fn.variantMeta) {
+      const { prop, keys, defaultVariant, hasBase } = fn.variantMeta;
+      variants[prop] ??= {};
+      if (defaultVariant) defaultVariants[prop] = defaultVariant;
+
+      // `variant({ base })` contributes to every key, so fold it into base once
+      if (hasBase) merge(base, fn({ theme }));
+
+      keys.forEach((key) => {
+        const withVariant = fn({ [prop]: key, theme });
+        const withoutVariant = hasBase ? fn({ theme }) : {};
+        // subtract the base contribution so it isn't duplicated per variant
+        const only: CSSObject = {};
+        Object.entries(withVariant).forEach(([prop2, value]) => {
+          const baseValue = (withoutVariant as Record<string, unknown>)[prop2];
+          if (JSON.stringify(baseValue) !== JSON.stringify(value)) {
+            (only as Record<string, unknown>)[prop2] = value;
+          }
+        });
+        variants[prop][key] = merge(variants[prop][key] ?? {}, only);
+      });
+      return;
+    }
+
+    if (fn.stateMeta) {
+      // boolean state props map onto Panda's `variants: { x: { true: {...} } }`
+      fn.stateMeta.keys.forEach((key) => {
+        variants[key] ??= {};
+        variants[key].true = merge(
+          variants[key].true ?? {},
+          fn({ [key]: true, theme })
+        );
+      });
+      return;
+    }
+
+    merge(base, fn({ theme }));
+  });
+
+  return { className, base, variants, defaultVariants };
+};
+
+/* Everything variance emits is already resolved CSS (`var(--color-primary)`,
+ * `1rem`), i.e. POST token resolution. Under `strictTokens` Panda rejects raw
+ * values on tokenised properties, so wrap them in its arbitrary-value syntax.
+ * Consequence, accepted deliberately: Panda's token layer is bypassed for
+ * internals and Gamut keeps owning tokens + color-mode variables — which is also
+ * what keeps nested <Background> correct. */
+const escapeValues = (styles: CSSObject): CSSObject => {
+  const out: Record<string, unknown> = {};
+  Object.entries(styles).forEach(([key, value]) => {
+    if (isPlainObject(value)) {
+      out[key] = escapeValues(value);
+      return;
+    }
+    if (value === undefined || value === null) return;
+    // declValue is shared with the runtime injector so the two paths can't drift
+    out[key] = `[${declValue(key, value as string | number)}]`;
+  });
+  return out as CSSObject;
+};
+
+const serialize = (value: unknown, indent = 2): string => {
+  const pad = ' '.repeat(indent);
+  if (isPlainObject(value)) {
+    const entries = Object.entries(value).map(
+      ([key, inner]) =>
+        `${pad}  ${JSON.stringify(key)}: ${serialize(inner, indent + 2)}`
+    );
+    return `{\n${entries.join(',\n')}\n${pad}}`;
+  }
+  return JSON.stringify(value);
+};
+
+const emit = (name: string, recipe: Recipe) => `
+export const ${name} = defineRecipe(${serialize(
+  {
+    className: recipe.className,
+    base: escapeValues(recipe.base),
+    variants: Object.fromEntries(
+      Object.entries(recipe.variants).map(([prop, keys]) => [
+        prop,
+        Object.fromEntries(
+          Object.entries(keys).map(([key, styles]) => [
+            key,
+            escapeValues(styles),
+          ])
+        ),
+      ])
+    ),
+    defaultVariants: recipe.defaultVariants,
+  },
+  0
+)} as RecipeConfig);
+`;
+
+const recipes = {
+  generatedFillButton: precompute('gmt-gen-fill-button', [
+    buttonStyles as StyleFn,
+    fillButtonVariants as StyleFn,
+    sizeVariants as StyleFn,
+    buttonStates as StyleFn,
+  ]),
+  generatedTextButton: precompute('gmt-gen-text-button', [
+    buttonStyles as StyleFn,
+    textButtonVariants as StyleFn,
+    sizeVariants as StyleFn,
+    buttonStates as StyleFn,
+  ]),
+  // fidelity probe — see authoring.ts / verify-fidelity.ts
+  generatedOverlap: precompute('gmt-gen-overlap', [overlapStates as StyleFn]),
+};
+
+const header = `/* GENERATED by src/precompute/generate.ts — do not edit.
+ *
+ * Produced by EXECUTING the unchanged variance authoring in ./authoring.ts and
+ * enumerating its variant/state space. The authoring file keeps
+ * \`templateVariants\`, computed enum keys, \`transitionConcat()\` and ternaries —
+ * none of which a parse-based codemod could handle. */
+import { defineRecipe } from '@pandacss/dev';
+
+type RecipeConfig = Parameters<typeof defineRecipe>[0];
+`;
+
+const body = Object.entries(recipes)
+  .map(([name, recipe]) => emit(name, recipe))
+  .join('');
+
+// resolved from cwd, not __dirname — this runs from a bundle in .proof/
+const outPath = join(process.cwd(), 'src/precompute/generated-recipes.ts');
+writeFileSync(outPath, `${header}${body}`);
+
+/* eslint-disable no-console */
+console.log(
+  '\n=== Precompute: variance authoring -> static Panda recipes ===\n'
+);
+Object.entries(recipes).forEach(([name, recipe]) => {
+  const variantSummary = Object.entries(recipe.variants)
+    .map(([prop, keys]) => `${prop}(${Object.keys(keys).join('|')})`)
+    .join(' ');
+  console.log(`${name}`);
+  console.log(`  className:  ${recipe.className}`);
+  console.log(`  base decls: ${Object.keys(recipe.base).length}`);
+  console.log(`  variants:   ${variantSummary}`);
+});
+console.log(`\nwrote ${outPath}`);
+console.log(
+  '\nAuthoring changes required in ./authoring.ts to make this work: NONE.\n'
+);
+/* eslint-enable no-console */
diff --git a/spikes/panda-styling-poc/src/precompute/generated-recipes.ts b/spikes/panda-styling-poc/src/precompute/generated-recipes.ts
new file mode 100644
index 0000000000..a2687d592c
--- /dev/null
+++ b/spikes/panda-styling-poc/src/precompute/generated-recipes.ts
@@ -0,0 +1,331 @@
+/* GENERATED by src/precompute/generate.ts — do not edit.
+ *
+ * Produced by EXECUTING the unchanged variance authoring in ./authoring.ts and
+ * enumerating its variant/state space. The authoring file keeps
+ * `templateVariants`, computed enum keys, `transitionConcat()` and ternaries —
+ * none of which a parse-based codemod could handle. */
+import { defineRecipe } from '@pandacss/dev';
+
+type RecipeConfig = Parameters<typeof defineRecipe>[0];
+
+export const generatedFillButton = defineRecipe({
+  className: 'gmt-gen-fill-button',
+  base: {
+    transition:
+      '[border-color 150ms ease-in,color 150ms ease-in,background-color 150ms ease-in,box-shadow 150ms ease-in]',
+    border: '[2px solid var(--color-border-primary)]',
+    borderColor: '[transparent]',
+    whiteSpace: '[nowrap]',
+    justifyContent: '[center]',
+    alignItems: '[center]',
+    display: '[inline-flex]',
+    position: '[relative]',
+    borderRadius: '[4px]',
+    "[disabled], &:disabled, &[aria-disabled='true']": {
+      cursor: '[not-allowed]',
+      userSelect: '[none]',
+    },
+    '&:before': {
+      content: '[""]',
+      border: '[2px solid var(--color-border-primary)]',
+      position: '[absolute]',
+      insetBlockStart: '[-5px]',
+      insetInlineEnd: '[-5px]',
+      insetBlockEnd: '[-5px]',
+      insetInlineStart: '[-5px]',
+      zIndex: '[0]',
+      opacity: '[0]',
+      borderRadius: '[8px]',
+    },
+    '&:focus-visible:before': {
+      opacity: '[1]',
+    },
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: '[var(--color-background)]',
+        backgroundColor: '[var(--color-primary)]',
+        '&:before': {
+          borderColor: '[var(--color-primary)]',
+        },
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-primary-hover)]',
+        },
+        '&:active': {
+          borderColor: '[var(--color-border-primary)]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-primary)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[var(--color-background-disabled)]',
+        },
+      },
+      secondary: {
+        color: '[var(--color-background)]',
+        backgroundColor: '[var(--color-secondary)]',
+        '&:before': {
+          borderColor: '[var(--color-secondary)]',
+        },
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-secondary-hover)]',
+        },
+        '&:active': {
+          borderColor: '[var(--color-border-primary)]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-secondary)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[var(--color-background-disabled)]',
+        },
+      },
+      danger: {
+        color: '[var(--color-background)]',
+        backgroundColor: '[var(--color-danger)]',
+        '&:before': {
+          borderColor: '[var(--color-danger)]',
+        },
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-danger-hover)]',
+        },
+        '&:active': {
+          borderColor: '[var(--color-border-primary)]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-danger)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[var(--color-background-disabled)]',
+        },
+      },
+      interface: {
+        color: '[var(--color-background)]',
+        backgroundColor: '[var(--color-interface)]',
+        '&:before': {
+          borderColor: '[var(--color-interface)]',
+        },
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-interface-hover)]',
+        },
+        '&:active': {
+          borderColor: '[var(--color-border-primary)]',
+          color: '[var(--color-background)]',
+          backgroundColor: '[var(--color-interface)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[var(--color-background-disabled)]',
+        },
+      },
+    },
+    size: {
+      small: {
+        paddingInlineStart: '[0.5rem]',
+        paddingInlineEnd: '[0.5rem]',
+        paddingBlockStart: '[0.25rem]',
+        paddingBlockEnd: '[0.25rem]',
+        fontSize: '[0.875rem]',
+        minBlockSize: '[32px]',
+      },
+      normal: {
+        paddingInlineStart: '[1rem]',
+        paddingInlineEnd: '[1rem]',
+        paddingBlockStart: '[0.25rem]',
+        paddingBlockEnd: '[0.25rem]',
+        fontSize: '[1rem]',
+        minBlockSize: '[40px]',
+      },
+      large: {
+        paddingInlineStart: '[1rem]',
+        paddingInlineEnd: '[1rem]',
+        paddingBlockStart: '[0.25rem]',
+        paddingBlockEnd: '[0.25rem]',
+        fontSize: '[1.125rem]',
+        minBlockSize: '[56px]',
+      },
+    },
+    fullWidth: {
+      true: {
+        inlineSize: '[100%]',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'normal',
+  },
+} as RecipeConfig);
+
+export const generatedTextButton = defineRecipe({
+  className: 'gmt-gen-text-button',
+  base: {
+    transition:
+      '[border-color 150ms ease-in,color 150ms ease-in,background-color 150ms ease-in,box-shadow 150ms ease-in]',
+    border: '[2px solid var(--color-border-primary)]',
+    borderColor: '[transparent]',
+    whiteSpace: '[nowrap]',
+    justifyContent: '[center]',
+    alignItems: '[center]',
+    display: '[inline-flex]',
+    position: '[relative]',
+    borderRadius: '[4px]',
+    "[disabled], &:disabled, &[aria-disabled='true']": {
+      cursor: '[not-allowed]',
+      userSelect: '[none]',
+    },
+    '&:before': {
+      content: '[""]',
+      border: '[2px solid var(--color-border-primary)]',
+      position: '[absolute]',
+      insetBlockStart: '[-5px]',
+      insetInlineEnd: '[-5px]',
+      insetBlockEnd: '[-5px]',
+      insetInlineStart: '[-5px]',
+      zIndex: '[0]',
+      opacity: '[0]',
+      borderRadius: '[8px]',
+    },
+    '&:focus-visible:before': {
+      opacity: '[1]',
+    },
+  },
+  variants: {
+    variant: {
+      primary: {
+        borderColor: '[transparent]',
+        color: '[var(--color-primary)]',
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-primary)]',
+          backgroundColor: '[var(--color-background-hover)]',
+        },
+        '&:focus-visible': {
+          color: '[var(--color-primary)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[transparent]',
+        },
+      },
+      secondary: {
+        borderColor: '[transparent]',
+        color: '[var(--color-secondary)]',
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-secondary)]',
+          backgroundColor: '[var(--color-background-hover)]',
+        },
+        '&:focus-visible': {
+          color: '[var(--color-secondary)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[transparent]',
+        },
+      },
+      danger: {
+        borderColor: '[transparent]',
+        color: '[var(--color-danger)]',
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-danger)]',
+          backgroundColor: '[var(--color-background-hover)]',
+        },
+        '&:focus-visible': {
+          color: '[var(--color-danger)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[transparent]',
+        },
+      },
+      interface: {
+        borderColor: '[transparent]',
+        color: '[var(--color-text)]',
+        '&:hover': {
+          transition:
+            '[background-color 150ms ease-in,box-shadow 150ms ease-in]',
+          color: '[var(--color-interface)]',
+          backgroundColor: '[var(--color-background-hover)]',
+        },
+        '&:focus-visible': {
+          color: '[var(--color-interface)]',
+        },
+        "[disabled], &:disabled, &[aria-disabled='true']": {
+          color: '[var(--color-text-disabled)]',
+          backgroundColor: '[transparent]',
+        },
+      },
+    },
+    size: {
+      small: {
+        paddingInlineStart: '[0.5rem]',
+        paddingInlineEnd: '[0.5rem]',
+        paddingBlockStart: '[0.25rem]',
+        paddingBlockEnd: '[0.25rem]',
+        fontSize: '[0.875rem]',
+        minBlockSize: '[32px]',
+      },
+      normal: {
+        paddingInlineStart: '[1rem]',
+        paddingInlineEnd: '[1rem]',
+        paddingBlockStart: '[0.25rem]',
+        paddingBlockEnd: '[0.25rem]',
+        fontSize: '[1rem]',
+        minBlockSize: '[40px]',
+      },
+      large: {
+        paddingInlineStart: '[1rem]',
+        paddingInlineEnd: '[1rem]',
+        paddingBlockStart: '[0.25rem]',
+        paddingBlockEnd: '[0.25rem]',
+        fontSize: '[1.125rem]',
+        minBlockSize: '[56px]',
+      },
+    },
+    fullWidth: {
+      true: {
+        inlineSize: '[100%]',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'normal',
+  },
+} as RecipeConfig);
+
+export const generatedOverlap = defineRecipe({
+  className: 'gmt-gen-overlap',
+  base: {},
+  variants: {
+    warning: {
+      true: {
+        backgroundColor: '[var(--color-yellow)]',
+      },
+    },
+    error: {
+      true: {
+        backgroundColor: '[var(--color-red)]',
+      },
+    },
+  },
+  defaultVariants: {},
+} as RecipeConfig);
diff --git a/spikes/panda-styling-poc/src/precompute/verify-fidelity.ts b/spikes/panda-styling-poc/src/precompute/verify-fidelity.ts
new file mode 100644
index 0000000000..3df88ca386
--- /dev/null
+++ b/spikes/panda-styling-poc/src/precompute/verify-fidelity.ts
@@ -0,0 +1,124 @@
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { overlapStates } from './authoring';
+
+/* Do the RUNTIME and PRECOMPUTED paths agree when two active states set the same
+ * property?
+ *
+ *   runtime    — `states()` deep-merges active states in DECLARATION order, so
+ *                `error` (declared second) should win.
+ *   precomputed — Panda emits one INDEPENDENT class per active boolean variant,
+ *                so the winner is whichever rule lands LAST in the stylesheet.
+ *
+ * A disagreement is a silent visual regression: no error, no type failure, just a
+ * different colour. mono has 62 `states()` sites.
+ *
+ * Requires `panda cssgen` to have run. Run: yarn nx run panda-styling-poc:fidelity */
+
+const theme = coreTheme as unknown as Record<string, unknown>;
+const CLASS = 'gmt-gen-overlap';
+const PROPERTY = 'background-color';
+
+// --- runtime: both flags on, read the merged result -------------------------
+const merged = (
+  overlapStates as unknown as (
+    props: Record<string, unknown>
+  ) => Record<string, string>
+)({ warning: true, error: true, theme });
+
+const runtimeWinner = merged.backgroundColor;
+
+// --- precomputed: find which rule lands last in the emitted stylesheet ------
+const cssPath = join(process.cwd(), 'src/gamut-static.css');
+const css = readFileSync(cssPath, 'utf8');
+
+const ruleFor = (state: string) => {
+  const selector = `.${CLASS}--${state}_true`;
+  const at = css.lastIndexOf(selector);
+  if (at === -1) return undefined;
+  const body = css.slice(at, css.indexOf('}', at));
+  const declared = new RegExp(`${PROPERTY}:\\s*([^;\\n}]+)`).exec(body);
+  return { at, value: declared?.[1]?.trim() };
+};
+
+const warning = ruleFor('warning');
+const error = ruleFor('error');
+
+const later =
+  warning && error ? (error.at > warning.at ? error : warning) : undefined;
+const staticWinner = later?.value;
+
+/* Both sides express the winner differently — variance resolves the token to a
+ * `var(--color-*)` reference, Panda to `var(--colors-*)`. Compare the token NAME,
+ * which is what actually determines the rendered colour. */
+const tokenOf = (value?: string) =>
+  value?.match(/--colors?-([a-z0-9-]+)/)?.[1] ?? value;
+
+const runtimeToken = tokenOf(runtimeWinner);
+const staticToken = tokenOf(staticWinner);
+const agree = Boolean(
+  runtimeToken && staticToken && runtimeToken === staticToken
+);
+
+/* eslint-disable no-console */
+console.log('\n=== states() fidelity: runtime merge vs stylesheet order ===\n');
+console.log('Authoring (declaration order matters):');
+console.log("  states({ warning: { bg: 'yellow' }, error: { bg: 'red' } })");
+console.log('Rendered with BOTH flags active.\n');
+
+console.log(`runtime      merges in declaration order -> ${runtimeWinner}`);
+console.log(`             token: ${runtimeToken}`);
+console.log(
+  `precomputed  last rule in stylesheet (${
+    later === error ? 'error' : 'warning'
+  }) -> ${staticWinner}`
+);
+console.log(`             token: ${staticToken}\n`);
+
+console.log(`  .${CLASS}--warning_true at index ${warning?.at ?? 'MISSING'}`);
+console.log(`  .${CLASS}--error_true   at index ${error?.at ?? 'MISSING'}\n`);
+
+if (agree) {
+  console.log(`PASS  both paths resolve to \`${runtimeToken}\`.`);
+  console.log(
+    '      Panda emits boolean variants in DECLARATION order, so stylesheet order'
+  );
+  console.log('      and merge order coincide.');
+  console.log('');
+  console.log(
+    '      This test is not vacuous: declaration order here is warning->error,'
+  );
+  console.log(
+    '      while ALPHABETICAL order is error->warning. Had Panda sorted the'
+  );
+  console.log(
+    '      variants, `warning` would have landed last and won, giving `yellow`'
+  );
+  console.log('      and failing. So the pass genuinely discriminates.');
+  console.log('');
+  console.log(
+    "      Still a property of Panda's emission order rather than a guarantee in"
+  );
+  console.log(
+    '      the authoring model — which is why this stays as a regression test.'
+  );
+} else {
+  console.log(
+    `FAIL  runtime says \`${runtimeToken}\`, precomputed says \`${staticToken}\`.`
+  );
+  console.log(
+    '      Overlapping states are a silent visual regression under precompute.'
+  );
+  console.log(
+    '      Fix: have the precompute step COLLAPSE overlapping states into a'
+  );
+  console.log(
+    '      single compound variant, rather than emitting independent classes.'
+  );
+}
+console.log('');
+/* eslint-enable no-console */
+
+process.exit(agree ? 0 : 1);
diff --git a/spikes/panda-styling-poc/src/proof/measure.ts b/spikes/panda-styling-poc/src/proof/measure.ts
new file mode 100644
index 0000000000..e8e989c9c7
--- /dev/null
+++ b/spikes/panda-styling-poc/src/proof/measure.ts
@@ -0,0 +1,235 @@
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import { breakpoints } from '@codecademy/gamut-styles/dist/variables/responsive';
+import { all } from '@codecademy/gamut-styles/dist/variance/config';
+import { gzipSync } from 'node:zlib';
+
+import { css, inject } from '../gamut/engine';
+
+/* Measures the two candidate resolution strategies for system props against the
+ * REAL Gamut prop config + Core theme, so the numbers reflect Gamut's actual
+ * surface rather than an estimate.
+ *
+ *   A. Prebuilt atomics — exhaustively emit every legal prop x token pair once.
+ *      Fixed cost, independent of how large the consuming app is.
+ *   B. Runtime injector — emit one class per unique style OBJECT encountered.
+ *      ~Zero fixed cost, grows with the number of distinct combinations used.
+ *
+ * Run: yarn nx run panda-styling-poc:measure */
+
+type PropConfig = { scale?: string | readonly unknown[] };
+const config = all as unknown as Record<string, PropConfig>;
+const theme = coreTheme as unknown as Record<string, Record<string, unknown>>;
+
+const kb = (bytes: number) => `${(bytes / 1024).toFixed(1)}kB`;
+const sizes = (text: string) => {
+  const raw = Buffer.byteLength(text);
+  const gz = gzipSync(text, { level: 9 }).length;
+  return { raw, gz, label: `${kb(raw)} raw / ${kb(gz)} gzip` };
+};
+
+// CSS-safe fragment for a class name (`100%` -> `100pct`, `1fr` -> `1fr`)
+const slug = (value: string) =>
+  value
+    .replace(/%/g, 'pct')
+    .replace(/\./g, '_')
+    .replace(/[^a-zA-Z0-9_-]/g, '-');
+
+const declarations = (prop: string, value: unknown): string => {
+  try {
+    const resolved = css({ [prop]: value } as never)({ theme } as never);
+    return Object.entries(resolved)
+      .filter(([, v]) => typeof v === 'string' || typeof v === 'number')
+      .map(
+        ([k, v]) =>
+          `${k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${
+            typeof v === 'number' && v !== 0 ? `${v}px` : String(v)
+          }`
+      )
+      .join(';');
+  } catch {
+    return '';
+  }
+};
+
+/* Which values a prop can legally take. A named scale means the value space is
+ * closed (this is what `strictTokens` buys us and what makes exhaustive emission
+ * possible at all); no scale means unbounded -> injector territory. */
+const valuesFor = (prop: string): string[] => {
+  const { scale } = config[prop] ?? {};
+  if (Array.isArray(scale)) return scale.map(String);
+  if (typeof scale === 'string') return Object.keys(theme[scale] ?? {});
+  return [];
+};
+
+const scaled = Object.keys(config).filter((prop) => valuesFor(prop).length > 0);
+const unscaled = Object.keys(config).filter(
+  (prop) => valuesFor(prop).length === 0
+);
+
+// --- A. prebuilt atomics ----------------------------------------------------
+const baseRules: string[] = [];
+scaled.forEach((prop) => {
+  valuesFor(prop).forEach((value) => {
+    const decls = declarations(prop, value);
+    if (decls) baseRules.push(`.${prop}_${slug(value)}{${decls}}`);
+  });
+});
+
+const mediaKeys = Object.keys(breakpoints as Record<string, string>);
+const responsiveRules = mediaKeys.flatMap((size) =>
+  baseRules.map(
+    (rule) =>
+      `@media only screen and (min-width:${
+        (breakpoints as Record<string, string>)[size]
+      }){${rule.replace(/^\./, `.${size}\\:`)}}`
+  )
+);
+
+const atomicBase = sizes(baseRules.join(''));
+const atomicFull = sizes([...baseRules, ...responsiveRules].join(''));
+
+// --- B. runtime injector ----------------------------------------------------
+/* Cost per unique style object, measured from the parity render: 14 real
+ * components produced 2,356 bytes of CSS. Rather than hardcode that, derive the
+ * per-class average from a representative sample of real system-prop combos. */
+const sampleCombos: Record<string, unknown>[] = [
+  { p: 16, bg: 'primary' },
+  { px: 32, m: 0 },
+  { display: 'flex', alignItems: 'center', columnGap: 12 },
+  { m: 0, p: 0, listStyle: 'none', width: '100%' },
+  { my: 48 },
+  { ml: 4, display: 'inline' },
+  { px: 24, py: 4, mb: 8, mr: 8, bg: 'white' },
+  { borderRadius: 'md', border: 2, borderColor: 'primary' },
+];
+const ruleFor = (combo: Record<string, unknown>, name: string) => {
+  const resolved = css(combo as never)({ theme } as never);
+  const decls = Object.entries(resolved)
+    .filter(([, v]) => typeof v === 'string' || typeof v === 'number')
+    .map(
+      ([k, v]) =>
+        `${k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${String(v)}`
+    )
+    .join(';');
+  return `.${name}{${decls}}`;
+};
+
+const sampleText = sampleCombos
+  .map((combo, index) => ruleFor(combo, `gmt-${index.toString(36)}abcde`))
+  .join('');
+const perClass = Buffer.byteLength(sampleText) / sampleCombos.length;
+
+/* Synthesises N DISTINCT combinations from the real prop/value space. Replicating
+ * one sample N times would compress unrealistically well and flatter the
+ * injector, so vary both the props chosen and their values. */
+const syntheticInjected = (count: number) => {
+  const pool = scaled.filter((prop) => valuesFor(prop).length > 1);
+  const rules: string[] = [];
+  for (let i = 0; i < count; i += 1) {
+    const combo: Record<string, unknown> = {};
+    const width = 2 + (i % 4);
+    for (let j = 0; j < width; j += 1) {
+      const prop = pool[(i * 7 + j * 13) % pool.length];
+      const values = valuesFor(prop);
+      combo[prop] = values[(i * 5 + j * 3) % values.length];
+    }
+    rules.push(ruleFor(combo, `gmt-${i.toString(36)}`));
+  }
+  return rules.join('');
+};
+
+/* mono has ~17,800 system-prop JSX attributes. The injector emits one class per
+ * unique COMBINATION, so the count that matters is distinct combinations, not
+ * attributes. Bracketed because the true number needs a real build to know. */
+const projections = [1_000, 3_000, 6_000, 10_000];
+
+/* eslint-disable no-console */
+console.log(
+  '\n=== System-prop resolution: prebuilt atomics vs runtime injector ===\n'
+);
+
+console.log(`Gamut prop surface: ${Object.keys(config).length} props`);
+console.log(`  token-scaled (closed value space): ${scaled.length}`);
+console.log(`  unscaled (open value space):       ${unscaled.length}`);
+console.log(`Breakpoints: ${mediaKeys.length} (${mediaKeys.join(', ')})\n`);
+
+console.log('A. PREBUILT ATOMICS — fixed cost, independent of app size');
+console.log(
+  `  base rules only:      ${baseRules.length.toLocaleString()} rules   ${
+    atomicBase.label
+  }`
+);
+console.log(
+  `  + all breakpoints:    ${(
+    baseRules.length + responsiveRules.length
+  ).toLocaleString()} rules   ${atomicFull.label}\n`
+);
+
+console.log('B. RUNTIME INJECTOR — grows with distinct style combinations');
+console.log(
+  `  measured cost per unique class: ${perClass.toFixed(0)} bytes raw`
+);
+const injected = projections.map((n) => {
+  const measured = sizes(syntheticInjected(n));
+  console.log(
+    `  ${n.toLocaleString().padStart(6)} unique combos:  ${measured.label}`
+  );
+  return { n, ...measured };
+});
+
+/* --------------------------------------------------------------------------
+ * C. Dynamic values: the unbounded-class footgun, and the fix.
+ *
+ * The injector hashes the resolved CSSObject, so a genuinely continuous value
+ * (`width: 37.5%`) produces a NEW CLASS PER VALUE. A progress bar animating
+ * 0->100% emits ~100 rules that are never reused. This is the one way a consumer
+ * can make the runtime path grow without bound.
+ *
+ * The fix keeps the class static and puts only the VALUE inline, as a CSS custom
+ * property — one class forever, regardless of how many values occur.
+ * ------------------------------------------------------------------------ */
+const percentages = Array.from({ length: 100 }, (_, i) => `${i}%`);
+
+// naive: width baked into the style object -> one class per distinct value
+const naive = new Set(
+  percentages.map((value) => inject({ width: value } as never))
+);
+
+// custom property: class is constant, value rides an inline `style` attribute
+const viaVariable = new Set(
+  percentages.map(() => inject({ width: 'var(--bar-width)' } as never))
+);
+
+console.log('\nC. DYNAMIC VALUES — 100 distinct widths');
+console.log(`  baked into the style object: ${naive.size} classes`);
+console.log(`  via a CSS custom property:   ${viaVariable.size} class`);
+console.log(
+  `  => ${naive.size}x fewer rules, and the count no longer grows with the data`
+);
+
+console.log('\nHYBRID — base atomics prebuilt, everything else injected');
+console.log(`  prebuilt base atomics:                 ${atomicBase.label}`);
+console.log(
+  `  ...covers ${scaled.length}/${
+    Object.keys(config).length
+  } props at the base breakpoint`
+);
+console.log('  injector then handles: the 79 unscaled props, every responsive');
+console.log('  variant, and all arbitrary css() values.\n');
+
+console.log('Crossover');
+const crossover = injected.find((entry) => entry.gz > atomicFull.gz);
+console.log(
+  `  Full atomics (all breakpoints) = ${kb(atomicFull.gz)} gzip, a fixed cost.`
+);
+console.log(
+  crossover
+    ? `  The injector only exceeds that past ~${crossover.n.toLocaleString()} unique combinations.`
+    : `  The injector stays under that even at ${projections[
+        projections.length - 1
+      ].toLocaleString()} unique combinations.`
+);
+console.log(
+  '  Atomics are O(1) in app size; the injector is O(distinct combinations).\n'
+);
+/* eslint-enable no-console */
diff --git a/spikes/panda-styling-poc/src/proof/parity.tsx b/spikes/panda-styling-poc/src/proof/parity.tsx
new file mode 100644
index 0000000000..0766eae6c6
--- /dev/null
+++ b/spikes/panda-styling-poc/src/proof/parity.tsx
@@ -0,0 +1,275 @@
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import type { StyleProps } from '@codecademy/variance';
+import { readFileSync } from 'node:fs';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import {
+  css,
+  extractStyles,
+  states,
+  styled,
+  systemProps,
+  ThemeProvider,
+  variant,
+} from '../gamut/engine';
+
+/* Parity proof for the Emotion-free engine.
+ *
+ * The specimen below is copied VERBATIM from
+ * mono/libs/ui/login-or-register/src/OAuthButtons/elements.tsx — the only edit is
+ * the import line (`@emotion/styled` -> the Gamut engine). It was chosen because
+ * it hits every hard case at once: nested `@media`, responsive object values,
+ * system-prop aliases, `withComponent`, and the bare-identifier `styled(X)(a, b)`
+ * shape that codemod-feasibility.md classifies as MANUAL.
+ *
+ * Run: yarn nx run panda-styling-poc:proof */
+
+/* Minimal Gamut primitives on the new engine. `StyleProps<typeof systemProps>` is
+ * how real Gamut types its style props today — unchanged here, which is the
+ * typesafety half of the claim. */
+type SystemStyleProps = StyleProps<typeof systemProps>;
+
+const Box = styled('div')<SystemStyleProps>(systemProps);
+const GridBox = styled('div')<SystemStyleProps>(
+  css({ display: 'grid' }),
+  systemProps
+);
+const flexWrap = states({ wrap: { flexWrap: 'wrap' } });
+const FlexBox = styled('div')<SystemStyleProps & StyleProps<typeof flexWrap>>(
+  css({ display: 'flex' }),
+  flexWrap,
+  systemProps
+);
+const StrokeButton = styled('button')<SystemStyleProps>(
+  css({
+    border: 2,
+    borderColor: 'primary',
+    color: 'primary',
+    bg: 'transparent',
+  }),
+  systemProps
+);
+
+// --- VERBATIM from mono (imports only changed) ------------------------------
+const StyledGridBox = styled(GridBox.withComponent('ul'))(
+  css({
+    gridAutoFlow: 'column',
+    columnGap: 12,
+    '@media (max-width: 375px)': { columnGap: 8 },
+    '@media (max-width: 280px)': { gridAutoFlow: 'row' },
+    listStyle: 'none',
+    pl: 0,
+    mb: 24,
+  })
+);
+
+const StyledFlexBox = styled(FlexBox.withComponent('ul'))(
+  css({
+    listStyle: 'none',
+    pl: 0,
+  })
+);
+
+const StrokeButtonBaseStyles = css({
+  '@media (max-width: 385px)': { px: 4 },
+  px: 16,
+  py: 4,
+  mb: 8,
+  mr: 8,
+  height: { _: 43, xs: 53 },
+  width: { _: 50, xs: 65 },
+  backgroundColor: 'white',
+});
+
+const StrokeButtonStateStyles = states({
+  isFancy: {
+    p: 0,
+    height: { _: 48, xs: 48 },
+    width: { _: '100%', xs: '100%' },
+  },
+});
+
+const StyledStrokeButton = styled(StrokeButton)<
+  StyleProps<typeof StrokeButtonStateStyles>
+>(StrokeButtonBaseStyles, StrokeButtonStateStyles);
+
+const embeddedStates = states({
+  embedded: {
+    '@media (max-width: 343px)': { width: '60vw' },
+    width: '70vw',
+  },
+});
+const StyledToolTipContents =
+  styled(Box)<StyleProps<typeof embeddedStates>>(embeddedStates);
+// --- end verbatim -----------------------------------------------------------
+
+/* Cases the static extractor provably cannot handle, which a runtime engine gets
+ * for free. These are the MANUAL and UNSUPPORTED buckets in
+ * codemod-feasibility.md (420 + 234 sites in mono). */
+const ButtonSelectors = { HOVER: '&:hover', DISABLED: '&:disabled' } as const;
+
+const DynamicBar = styled(Box)<{ $pct: number }>((props: { $pct: number }) => ({
+  width: `${props.$pct}%`,
+}));
+
+const ThemeReader = styled(Box)(({ theme }) => ({
+  // property access on the live theme — MANUAL under static extraction
+  outlineColor: (theme as { colors: Record<string, string> }).colors[
+    'hyper-500'
+  ],
+}));
+
+const ComputedKeys = styled(Box)(
+  css({
+    // computed key from an enum — MANUAL under static extraction
+    [ButtonSelectors.HOVER]: { color: 'primary' },
+    [ButtonSelectors.DISABLED]: { color: 'text-disabled' },
+  })
+);
+
+const Ternary = styled(Box)<{ $big?: boolean }>((props: { $big?: boolean }) =>
+  css({ p: props.$big ? 48 : 8 })({ theme: coreTheme })
+);
+
+// UNSUPPORTED under static extraction: template-literal CSS, incl. interpolation
+const TemplateLiteral = styled.div`
+  color: red;
+  padding: 8px;
+  &:hover {
+    color: blue;
+  }
+`;
+const TemplateInterpolated = styled.span<{ $tone: string }>`
+  color: ${(props: { $tone: string }) => props.$tone};
+  font-weight: 700;
+`;
+
+const toneVariant = variant({
+  defaultVariant: 'a',
+  variants: {
+    a: { bg: 'primary', p: 16 },
+    b: { bg: 'secondary', p: 32 },
+  },
+});
+const Variants = styled(Box)<StyleProps<typeof toneVariant>>(toneVariant);
+
+// --- render + assert --------------------------------------------------------
+const markup = renderToStaticMarkup(
+  <ThemeProvider theme={coreTheme} nonce="test-nonce">
+    <StyledGridBox gridAutoColumns="1fr" />
+    <StyledFlexBox wrap />
+    <StyledStrokeButton isFancy />
+    <StyledStrokeButton />
+    <StyledToolTipContents embedded />
+    <Box p={16} bg="primary" textColor="background" />
+    <Box display={{ _: 'block', md: 'none' }} />
+    <DynamicBar $pct={37.5} />
+    <ThemeReader />
+    <ComputedKeys />
+    <Ternary $big />
+    <TemplateLiteral />
+    <TemplateInterpolated $tone="rebeccapurple" />
+    <Variants variant="b" />
+  </ThemeProvider>
+);
+
+const styleText = extractStyles();
+
+type Check = { label: string; ok: boolean; detail?: string };
+const checks: Check[] = [];
+const check = (label: string, ok: boolean, detail?: string) =>
+  checks.push({ label, ok, detail });
+
+const has = (needle: string) => styleText.includes(needle);
+
+check(
+  'SSR produced markup with generated classes',
+  /class="gmt-[a-z0-9]/.test(markup)
+);
+check(
+  'SSR produced a stylesheet',
+  styleText.length > 0,
+  `${styleText.length} bytes`
+);
+
+// system-prop aliases resolve through the real theme scales
+check('system prop p={16} -> padding via spacing scale', has('padding:1rem'));
+check(
+  'system prop bg="primary" resolves a token',
+  /background-color:[^;}]+/.test(styleText)
+);
+
+// the specimen's hard cases
+check('nested @media preserved', has('@media (max-width: 375px)'));
+check('second nested @media preserved', has('@media (max-width: 280px)'));
+check(
+  'responsive object value expanded to breakpoints',
+  (styleText.match(/@media/g) ?? []).length >= 4
+);
+// logical properties are on by default, so `width` lands as `inline-size`
+check(
+  'states() applied only when prop is true',
+  has('inline-size:100%') && has('inline-size:50px')
+);
+check(
+  'transient $props and state props stay off the DOM',
+  !/\$pct|\$big|isFancy|embedded/.test(markup)
+);
+check(
+  'bare-identifier styled(X)(a, b) composed',
+  has('background-color:white')
+);
+check('withComponent renders the swapped tag', markup.includes('<ul'));
+
+// the buckets static extraction cannot reach
+check('prop-dependent function value', has('width:37.5%'));
+check('live theme property access', has('#3A10E5') || has('outline-color'));
+check('computed enum selector key', has(':hover') && has(':disabled'));
+check('ternary resolved at runtime', has('padding:3rem'));
+check('template literal CSS parsed', has('color:red') && has('padding:8px'));
+check('template literal interpolation', has('rebeccapurple'));
+check('variant() selected by prop', has('padding:2rem'));
+
+// engine invariants
+check(
+  'focus-visible polyfill hook present',
+  !styleText.includes(':focus-visible') || has('[data-focus-visible-added]')
+);
+check(
+  'all rules emitted into the gamut.consumer layer',
+  !styleText.includes('{') || has('@layer gamut.consumer')
+);
+/* Self-verifying: read this script's own bundle and look for Emotion's runtime
+ * internals. If any @emotion package had been pulled in transitively — via
+ * variance or gamut-styles — these identifiers would be present. */
+const bundle = readFileSync(__filename, 'utf8');
+/* Assembled at runtime so the marker strings don't appear literally in this
+ * file — otherwise the check matches its own source and always fails. */
+const emotionInternals = [
+  ['serialize', 'Styles'],
+  ['insert', 'Styles'],
+  ['create', 'Cache'],
+  ['@emotion', '/styled'],
+].map((parts) => parts.join(''));
+const found = emotionInternals.filter((marker) => bundle.includes(marker));
+check(
+  'zero Emotion in the bundled runtime',
+  found.length === 0,
+  found.length ? `found: ${found.join(', ')}` : 'no Emotion internals in bundle'
+);
+
+const failed = checks.filter((entry) => !entry.ok);
+
+/* eslint-disable no-console */
+console.log('\n=== Emotion-free engine: call-site parity ===\n');
+checks.forEach(({ label, ok, detail }) =>
+  console.log(
+    `${ok ? 'PASS' : 'FAIL'}  ${label}${detail ? `  (${detail})` : ''}`
+  )
+);
+console.log(`\n${checks.length - failed.length}/${checks.length} passed`);
+console.log(`\nGenerated CSS (${styleText.length} bytes):\n`);
+console.log(styleText.replace(/}/g, '}\n'));
+/* eslint-enable no-console */
+
+process.exit(failed.length === 0 ? 0 : 1);
diff --git a/spikes/panda-styling-poc/tsconfig.json b/spikes/panda-styling-poc/tsconfig.json
new file mode 100644
index 0000000000..71536e5bd3
--- /dev/null
+++ b/spikes/panda-styling-poc/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "styled-system/*": ["./styled-system/*"]
+    }
+  },
+  "include": ["src", "styled-system", "panda.config.ts", "vite.config.ts"]
+}
diff --git a/spikes/panda-styling-poc/vite.config.ts b/spikes/panda-styling-poc/vite.config.ts
new file mode 100644
index 0000000000..47d9281ae5
--- /dev/null
+++ b/spikes/panda-styling-poc/vite.config.ts
@@ -0,0 +1,11 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'styled-system': new URL('./styled-system', import.meta.url).pathname,
+    },
+  },
+});
diff --git a/spikes/styling-perf-poc/.gitignore b/spikes/styling-perf-poc/.gitignore
new file mode 100644
index 0000000000..1ac33abf7d
--- /dev/null
+++ b/spikes/styling-perf-poc/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+.bench/
diff --git a/spikes/styling-perf-poc/README.md b/spikes/styling-perf-poc/README.md
new file mode 100644
index 0000000000..6c9401a0ed
--- /dev/null
+++ b/spikes/styling-perf-poc/README.md
@@ -0,0 +1,127 @@
+# Styling engine performance spike (GMT-1715)
+
+Branch: `cass-GMT-1715`. Answers the open item left by
+`~/code/base camp/reboot/panda-via-gamut-option-a.md`: **"Injector performance
+unmeasured. Correctness is proven; per-render cost vs. Emotion is not."**
+
+## ⚠️ This is an APPROXIMATION
+
+Say this out loud before quoting any number from it.
+
+**What is real:**
+
+- Arm A is genuinely today's stack — real `@emotion/styled` 11.14.1, the real
+  `@codecademy/gamut-styles` `css`/`variant`/`states`, real `styledOptions`.
+- Both arms call the **same style functions with the same arguments**
+  (`src/styles.ts`), so any timing delta is attributable to the injection layer
+  and nothing else. That isolation is the whole point of the design.
+
+**What is approximated — and why this is not a production forecast:**
+
+1. Arm B is ~400 lines of spike code. Emotion is a decade-hardened library. An
+   unoptimised challenger landing at parity means "**not disqualified**", never
+   "faster than Emotion".
+2. Arm B has **no prebuilt-atomics fast path** — tier 3 of the proposed design is
+   unimplemented. This measures the **injector-only worst case**.
+3. **Node + `renderToStaticMarkup` only.** No CSSOM `insertRule`, no style
+   recalculation, no layout, no paint, no hydration — and those are precisely
+   where a runtime styling engine costs users something.
+4. Single process, no GC isolation. Mitigated by running each arm twice in
+   alternating order and keeping the better median, but not eliminated.
+5. The real production engine would differ from Arm B, so its performance is
+   **not** what is measured here.
+
+## Run it
+
+```
+# once the workspace is installed
+yarn nx run styling-perf-poc:bench
+yarn nx run styling-perf-poc:typecheck
+
+# without a workspace install (resolves from the repo root)
+../../node_modules/.bin/esbuild src/bench.tsx --bundle --platform=node \
+  --format=cjs --jsx=automatic --outfile=.bench/bench.cjs && node .bench/bench.cjs
+
+CARDS=500 ITERATIONS=50 yarn bench     # knobs
+```
+
+## Design
+
+| file                   | role                                                                                                                                   |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/shared.ts`        | re-exports the REAL Gamut helpers from the deep `dist/variance` path (avoids dragging `GamutProvider`/framer-motion into a node bench) |
+| `src/styles.ts`        | the style definitions **both** arms consume, plus `StyleProps`-derived prop types                                                      |
+| `src/tree-emotion.tsx` | Arm A — `@emotion/styled` + `styledOptions`                                                                                            |
+| `src/tree-engine.tsx`  | Arm B — the engine from `../panda-styling-poc/src/gamut/engine`                                                                        |
+| `src/bench.tsx`        | harness: cold/warm × low/high cardinality                                                                                              |
+
+Arm B imports the engine **across spikes rather than copying it** — a duplicate
+would drift and quietly invalidate the comparison.
+
+### Two scenarios, because one of them lies
+
+- **Low cardinality** — many instances, few distinct styles (realistic component
+  reuse). Both engines dedupe nearly everything, so the injector hashes 1,400
+  times but inserts 11 rules.
+- **High cardinality** — nearly every node resolves to a **distinct** style
+  object, so the injector must hash _and_ insert per node. This is the adversarial
+  case, and the one a low-cardinality tree hides.
+
+A subtlety worth recording: the first attempt at the high-cardinality tree used
+strides (`SPACINGS[index * 3 % 11]`), which made every value a function of
+`index % 11` — so all three props moved together and produced only **11** distinct
+combinations instead of ~200. It looked like a high-cardinality test and wasn't.
+`spacingDigit` uses independent base-11 digits instead.
+
+### Two fairness fixes worth knowing about
+
+1. **`propNames` wrapper** (`src/shared.ts`). The engine filters props off the DOM
+   by reading `propNames` from its style functions, but the real gamut-styles
+   `variant`/`states` don't expose them. Without the wrapper the engine arm did
+   strictly _less_ work than Arm A (which filters via `styledOptions`) **and**
+   leaked `fullWidth`/`compact` onto the DOM.
+2. **Emotion's CSS is inlined in the markup.** `cache.inserted` values are just
+   `true` in SSR and `cache.registered` stays empty for the `styled` path;
+   Emotion renders `<style data-emotion>` tags into the tree itself. The harness
+   extracts from the markup and strips those tags before comparing tree sizes —
+   otherwise Emotion looks like it emits a bigger DOM when it's actually carrying
+   its stylesheet inline.
+
+## Results (M-series Mac, node 24, 200 cards ≈ 1,400 styled nodes)
+
+| scenario         | metric      | Emotion | engine | ratio     |
+| ---------------- | ----------- | ------- | ------ | --------- |
+| low cardinality  | cold median | 12.1ms  | 12.6ms | 1.04x     |
+|                  | warm median | 12.4ms  | 12.3ms | 0.99x     |
+|                  | CSS         | 4.4kB   | 3.1kB  | **0.71x** |
+| high cardinality | cold median | 12.8ms  | 13.2ms | 1.03x     |
+|                  | warm median | 12.7ms  | 12.9ms | 1.02x     |
+|                  | CSS         | 37.4kB  | 30.2kB | **0.81x** |
+
+Both arms emit the same number of classes (11 low / 209 high), confirming they're
+doing equivalent work.
+
+### Reading
+
+- **SSR render cost is at parity** — within ~1–4% across both scenarios, in both
+  cold and warm phases. The injector is not a bottleneck at SSR, even in the
+  adversarial case and even without the atomics fast path.
+- **The engine emits 19–29% less CSS.** Not an optimisation — a structural
+  consequence: it flattens composed style functions into **one class per
+  component**, whereas Emotion emits a class per serialized style and composes
+  them. Same reason override precedence stops depending on insertion order.
+- **Cold vs warm barely differs** in either arm, because `variance`'s `css()`
+  memoises per call site and that cache is shared by both arms. The injection
+  layer is not where SSR time goes; `variance` + React are.
+
+### What is still unmeasured
+
+- **Browser cost** — `insertRule` against a live CSSOM, style recalculation,
+  layout, paint, and hydration. This is the real risk and it needs a headless
+  Chrome harness, not node.
+- **Memory** — the injector keeps a `Set` of every class it has emitted for the
+  process lifetime; Emotion's cache does something similar, but neither was
+  profiled.
+- **The atomics fast path**, which should make tier-3 system props strictly
+  cheaper than either arm here (a map lookup instead of hash + serialize).
+- **Real app workloads.** 200 synthetic cards is not portal-app.
diff --git a/spikes/styling-perf-poc/package.json b/spikes/styling-perf-poc/package.json
new file mode 100644
index 0000000000..edff4ded99
--- /dev/null
+++ b/spikes/styling-perf-poc/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "styling-perf-poc",
+  "description": "GMT-1715 spike: APPROXIMATE perf comparison, Emotion vs the Emotion-free engine (not published)",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "bench": "esbuild src/bench.tsx --bundle --platform=node --format=cjs --jsx=automatic --outfile=.bench/bench.cjs --log-level=warning && node .bench/bench.cjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codecademy/gamut-styles": "workspace:*",
+    "@codecademy/variance": "workspace:*",
+    "@emotion/cache": "^11.4.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.1",
+    "esbuild": "^0.25.0",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/spikes/styling-perf-poc/project.json b/spikes/styling-perf-poc/project.json
new file mode 100644
index 0000000000..26d3418902
--- /dev/null
+++ b/spikes/styling-perf-poc/project.json
@@ -0,0 +1,23 @@
+{
+  "name": "styling-perf-poc",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "spikes/styling-perf-poc/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "bench": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/styling-perf-poc",
+        "command": "yarn bench"
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "spikes/styling-perf-poc",
+        "command": "yarn typecheck"
+      }
+    }
+  }
+}
diff --git a/spikes/styling-perf-poc/src/bench.tsx b/spikes/styling-perf-poc/src/bench.tsx
new file mode 100644
index 0000000000..8c26fab96b
--- /dev/null
+++ b/spikes/styling-perf-poc/src/bench.tsx
@@ -0,0 +1,302 @@
+import { coreTheme } from '@codecademy/gamut-styles/dist/themes/core';
+import createCache from '@emotion/cache';
+import { CacheProvider, ThemeProvider } from '@emotion/react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import {
+  extractStyles,
+  ThemeProvider as EngineThemeProvider,
+} from '../../panda-styling-poc/src/gamut/engine';
+import { EmotionPage } from './tree-emotion';
+import { EnginePage } from './tree-engine';
+
+/* ============================================================================
+ * THIS IS AN APPROXIMATION. Read the caveats before quoting any number.
+ *
+ * What IS real:
+ *   - Arm A is genuinely today's stack: real @emotion/styled 11.14.1 + the real
+ *     @codecademy/gamut-styles css/variant/states + real styledOptions.
+ *   - Both arms share the SAME style functions with the SAME arguments, so the
+ *     delta isolates the injection layer rather than confounding it with
+ *     differences in style resolution.
+ *
+ * What is APPROXIMATED, and why the number is not a production forecast:
+ *   1. Arm B is ~400 lines of spike code; Emotion is a decade-hardened library.
+ *      An unoptimised challenger beating a mature incumbent should be read as
+ *      "the approach is not disqualified", never as "it is 1.Nx faster".
+ *   2. Arm B has NO prebuilt-atomics fast path (tier 3 is unimplemented). This
+ *      measures the injector-only WORST case for the proposed design.
+ *   3. Node + renderToStaticMarkup only. No browser CSSOM insertRule, no style
+ *      recalculation, no layout, no paint, no hydration — and those are where a
+ *      runtime styling engine actually hurts users.
+ *   4. Single process, no GC isolation, JIT warmth varies by arm ordering.
+ *   5. The real production engine would differ from Arm B (atomics, possibly a
+ *      build step), so its performance is NOT what is measured here.
+ *
+ * Run: yarn nx run styling-perf-poc:bench
+ * ========================================================================== */
+
+const CARDS = Number(process.env.CARDS ?? 200);
+const ITERATIONS = Number(process.env.ITERATIONS ?? 30);
+const WARMUP = 5;
+
+type Sample = { mean: number; median: number; min: number; p95: number };
+
+const stats = (samples: number[]): Sample => {
+  const sorted = [...samples].sort((a, b) => a - b);
+  const at = (q: number) =>
+    sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * q))];
+  return {
+    mean: samples.reduce((sum, value) => sum + value, 0) / samples.length,
+    median: at(0.5),
+    min: sorted[0],
+    p95: at(0.95),
+  };
+};
+
+const time = (fn: () => void) => {
+  const start = process.hrtime.bigint();
+  fn();
+  return Number(process.hrtime.bigint() - start) / 1e6;
+};
+
+// --- Arm A: Emotion ---------------------------------------------------------
+const renderEmotion = (
+  cache: ReturnType<typeof createCache>,
+  unique: boolean
+) =>
+  renderToStaticMarkup(
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={coreTheme as never}>
+        <EmotionPage count={CARDS} unique={unique} />
+      </ThemeProvider>
+    </CacheProvider>
+  );
+
+/* Emotion in SSR does NOT put CSS in `cache.inserted` (values there are just
+ * `true`) and `cache.registered` stays empty for the `styled` path. It renders
+ * its rules INLINE as `<style data-emotion>` tags inside the markup, and
+ * `@emotion/server` is not installed here. So extract from the markup — which is
+ * also the honest apples-to-apples measure, since that's the CSS the client
+ * actually receives. */
+const STYLE_TAG = /<style[^>]*data-emotion[^>]*>([\s\S]*?)<\/style>/g;
+
+const emotionCssFromMarkup = (markup: string) =>
+  [...markup.matchAll(STYLE_TAG)].map((match) => match[1]).join('');
+
+const stripStyleTags = (markup: string) => markup.replace(STYLE_TAG, '');
+
+// --- Arm B: the engine ------------------------------------------------------
+const renderEngine = (unique: boolean) =>
+  renderToStaticMarkup(
+    <EngineThemeProvider theme={coreTheme as never}>
+      <EnginePage count={CARDS} unique={unique} />
+    </EngineThemeProvider>
+  );
+
+// --- measurement -----------------------------------------------------------
+type Result = {
+  label: string;
+  cold: Sample;
+  warm: Sample;
+  cssBytes: number;
+  classes: number;
+  markupBytes: number;
+};
+
+const measureEmotion = (unique: boolean): Result => {
+  const coldSamples: number[] = [];
+  const warmSamples: number[] = [];
+
+  for (let i = 0; i < WARMUP; i += 1) {
+    renderEmotion(createCache({ key: 'w' }), unique);
+  }
+
+  // cold: a fresh cache each iteration (first render of a given style set)
+  for (let i = 0; i < ITERATIONS; i += 1) {
+    const cache = createCache({ key: `c${i}` });
+    coldSamples.push(time(() => renderEmotion(cache, unique)));
+  }
+
+  // warm: one cache reused, i.e. steady-state SSR in a long-lived process
+  const shared = createCache({ key: 'warm' });
+  renderEmotion(shared, unique);
+  for (let i = 0; i < ITERATIONS; i += 1) {
+    warmSamples.push(time(() => renderEmotion(shared, unique)));
+  }
+
+  const final = createCache({ key: 'final' });
+  const markup = renderEmotion(final, unique);
+  const css = emotionCssFromMarkup(markup);
+
+  return {
+    label: 'A — Emotion (today)',
+    cold: stats(coldSamples),
+    warm: stats(warmSamples),
+    cssBytes: Buffer.byteLength(css),
+    classes: Object.keys(final.inserted).length,
+    markupBytes: Buffer.byteLength(stripStyleTags(markup)),
+  };
+};
+
+const measureEngine = (unique: boolean): Result => {
+  const coldSamples: number[] = [];
+  const warmSamples: number[] = [];
+
+  for (let i = 0; i < WARMUP; i += 1) {
+    renderEngine(unique);
+    extractStyles();
+  }
+
+  // cold: clear the registry each iteration so every rule is hashed + emitted
+  for (let i = 0; i < ITERATIONS; i += 1) {
+    extractStyles();
+    coldSamples.push(time(() => renderEngine(unique)));
+  }
+
+  // warm: registry retained, so inject() short-circuits on the dedupe check
+  extractStyles();
+  renderEngine(unique);
+  for (let i = 0; i < ITERATIONS; i += 1) {
+    warmSamples.push(time(() => renderEngine(unique)));
+  }
+
+  extractStyles();
+  const markup = renderEngine(unique);
+  const css = extractStyles();
+
+  return {
+    label: 'B — engine (proposed, approximated)',
+    cold: stats(coldSamples),
+    warm: stats(warmSamples),
+    cssBytes: Buffer.byteLength(css),
+    classes: new Set(css.match(/\.gmt-[a-z0-9]+/g) ?? []).size,
+    markupBytes: Buffer.byteLength(markup),
+  };
+};
+
+/* Order matters for JIT fairness, so run each arm twice in opposite order and
+ * keep the better (lower) median — crude, but it stops "whichever ran second"
+ * from being the headline. */
+const best = (a: Result, b: Result): Result =>
+  a.warm.median <= b.warm.median ? a : b;
+
+const scenario = (unique: boolean) => {
+  const emotionA = measureEmotion(unique);
+  const engineA = measureEngine(unique);
+  const emotionB = measureEmotion(unique);
+  const engineB = measureEngine(unique);
+  return {
+    emotion: best(emotionA, emotionB),
+    engine: best(engineA, engineB),
+  };
+};
+
+const ms = (value: number) => `${value.toFixed(1)}ms`;
+const kb = (bytes: number) => `${(bytes / 1024).toFixed(1)}kB`;
+const ratio = (a: number, b: number) =>
+  b === 0 ? 'n/a' : `${(a / b).toFixed(2)}x`;
+
+/* eslint-disable no-console */
+console.log('\n=== Styling engine performance: today vs proposed ===');
+console.log('*** APPROXIMATION — see the caveat block in src/bench.tsx ***\n');
+console.log(
+  `Tree: ${CARDS} cards x (heading + body + 3 buttons + 2 boxes) ≈ ${
+    CARDS * 7
+  } styled nodes`
+);
+console.log(
+  `Iterations: ${ITERATIONS} per phase, ${WARMUP} warmup, 2 passes per arm\n`
+);
+
+const header = [
+  'arm',
+  'cold median',
+  'warm median',
+  'warm p95',
+  'CSS',
+  'classes',
+]
+  .map((h, i) => (i === 0 ? h.padEnd(38) : h.padStart(13)))
+  .join('');
+
+const row = (r: Result) =>
+  [
+    r.label.padEnd(38),
+    ms(r.cold.median).padStart(13),
+    ms(r.warm.median).padStart(13),
+    ms(r.warm.p95).padStart(13),
+    kb(r.cssBytes).padStart(13),
+    String(r.classes).padStart(13),
+  ].join('');
+
+const report = (
+  title: string,
+  note: string,
+  { emotion, engine }: ReturnType<typeof scenario>
+) => {
+  console.log(`\n--- ${title} ---`);
+  console.log(`${note}\n`);
+  console.log(header);
+  console.log(row(emotion));
+  console.log(row(engine));
+  console.log('\n  relative (engine vs Emotion, >1 = engine slower/larger)');
+  console.log(
+    `    cold ${ratio(engine.cold.median, emotion.cold.median)}   ` +
+      `warm ${ratio(engine.warm.median, emotion.warm.median)}   ` +
+      `CSS ${ratio(engine.cssBytes, emotion.cssBytes)}`
+  );
+  console.log(
+    `    markup (style tags stripped): Emotion ${kb(
+      emotion.markupBytes
+    )} vs engine ${kb(engine.markupBytes)}`
+  );
+};
+
+const low = scenario(false);
+const high = scenario(true);
+
+report(
+  'LOW CARDINALITY — realistic component reuse',
+  'Many instances, few distinct styles. Both engines dedupe almost everything,\n' +
+    'so this measures the hot path with caches doing their job.',
+  low
+);
+
+report(
+  'HIGH CARDINALITY — adversarial for a hashing injector',
+  'Nearly every node resolves to a distinct style object, so the injector must\n' +
+    'hash AND insert per node. This is the case a low-cardinality tree hides.',
+  high
+);
+
+console.log('\n=== What this does and does not tell you ===');
+console.log(
+  '  DOES: style resolution is shared between arms, so any timing delta is'
+);
+console.log('        attributable to the injection layer and nothing else.');
+console.log(
+  '  DOES: bound the SSR cost of the injector-only path against a mature'
+);
+console.log(
+  '        incumbent, in both the friendly and the adversarial case.'
+);
+console.log(
+  '  DOES NOT: predict browser cost. No CSSOM insertRule, style recalc,'
+);
+console.log(
+  '        layout or paint is measured — and that is where runtime CSS'
+);
+console.log('        actually hurts users.');
+console.log(
+  '  DOES NOT: represent the real proposed engine, which adds a prebuilt-'
+);
+console.log('        atomics fast path this spike has not implemented.');
+console.log(
+  '  DOES NOT: license a "faster than Emotion" claim. Arm B is ~400 lines'
+);
+console.log(
+  "        of spike code with none of Emotion's hardening; read parity as"
+);
+console.log('        "not disqualified", not as a win.\n');
+/* eslint-enable no-console */
diff --git a/spikes/styling-perf-poc/src/shared.ts b/spikes/styling-perf-poc/src/shared.ts
new file mode 100644
index 0000000000..0cd430f9ac
--- /dev/null
+++ b/spikes/styling-perf-poc/src/shared.ts
@@ -0,0 +1,36 @@
+import { all } from '@codecademy/gamut-styles/dist/variance/config';
+import {
+  states as baseStates,
+  variant as baseVariant,
+} from '@codecademy/gamut-styles/dist/variance/props';
+import { variance } from '@codecademy/variance';
+
+/* Re-exports the REAL Gamut style helpers, pulled from the deep `dist/variance`
+ * path rather than the package root so we don't drag `GamutProvider`
+ * (framer-motion, get-nonce, globals) into a node microbenchmark.
+ *
+ * `css`/`variant`/`states` here are the genuine article — the same factories
+ * every consumer call site uses today. They emit plain `CSSObject`s and do not
+ * import Emotion at runtime, which is exactly why both benchmark arms can share
+ * them. */
+export { css } from '@codecademy/gamut-styles/dist/variance/props';
+export { styledOptions } from '@codecademy/gamut-styles/dist/variance/utils';
+
+/* FAIRNESS FIX: the engine filters props off the DOM by reading `propNames` from
+ * its style functions, but the real gamut-styles `variant`/`states` don't expose
+ * them (production Gamut would add this — see the spike engine's props.ts). The
+ * Emotion arm gets the same filtering via `styledOptions([...])`, so without this
+ * wrapper the engine arm would do strictly LESS work and also leak `fullWidth` /
+ * `compact` onto the DOM. Attaching the names keeps both arms honest. */
+export const variant = ((config: Parameters<typeof baseVariant>[0]) =>
+  Object.assign(baseVariant(config), {
+    propNames: [config.prop ?? 'variant'],
+  })) as typeof baseVariant;
+
+export const states = ((config: Parameters<typeof baseStates>[0]) =>
+  Object.assign(baseStates(config), {
+    propNames: Object.keys(config),
+  })) as typeof baseStates;
+
+/** All system props at once — what `Box` applies. */
+export const systemProps = variance.create(all);
diff --git a/spikes/styling-perf-poc/src/styles.ts b/spikes/styling-perf-poc/src/styles.ts
new file mode 100644
index 0000000000..3888a5984b
--- /dev/null
+++ b/spikes/styling-perf-poc/src/styles.ts
@@ -0,0 +1,107 @@
+import type { StyleProps } from '@codecademy/variance';
+
+import { css, states, styledOptions, systemProps, variant } from './shared';
+
+/* Style definitions shared by BOTH benchmark arms.
+ *
+ * This is what makes the comparison meaningful: `css`/`variant`/`states` come
+ * from the REAL `@codecademy/gamut-styles`, and both arms call the exact same
+ * functions with the exact same arguments. The only thing that differs between
+ * arms is which `styled` consumes them — Emotion's or the new engine's. So the
+ * measurement isolates the injection layer and nothing else. */
+
+export const cardStyles = css({
+  p: 24,
+  mb: 16,
+  bg: 'background',
+  borderRadius: 'md',
+  border: 1,
+  borderColor: 'border-primary',
+  '&:hover': { borderColor: 'primary' },
+});
+
+export const headingStyles = css({
+  fontSize: 22,
+  fontWeight: 'title',
+  lineHeight: 'title',
+  color: 'text',
+  mb: 8,
+});
+
+export const bodyStyles = css({
+  fontSize: 16,
+  lineHeight: 'base',
+  color: 'text-secondary',
+  mb: 16,
+});
+
+export const buttonVariants = variant({
+  defaultVariant: 'primary',
+  variants: {
+    primary: {
+      bg: 'primary',
+      color: 'background',
+      '&:hover': { bg: 'primary-hover' },
+    },
+    secondary: {
+      bg: 'transparent',
+      color: 'primary',
+      borderColor: 'primary',
+      '&:hover': { bg: 'background-hover' },
+    },
+    danger: {
+      bg: 'danger',
+      color: 'background',
+      '&:hover': { bg: 'danger-hover' },
+    },
+  },
+});
+
+export const buttonStates = states({
+  fullWidth: { width: '100%' },
+  compact: { py: 4, px: 8, fontSize: 14 },
+});
+
+export const buttonBase = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 2,
+  borderColor: 'transparent',
+  borderRadius: 'md',
+  px: 16,
+  py: 8,
+  fontSize: 16,
+  fontWeight: 'title',
+  // exercises the focus-visible polyfill path in both arms
+  '&:focus-visible': { borderColor: 'primary' },
+});
+
+export const rowStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  columnGap: 12,
+  flexWrap: 'wrap',
+});
+
+/* The real Gamut spacing scale. Used to synthesise HIGH-CARDINALITY trees where
+ * nearly every node resolves to a distinct style object — the adversarial case
+ * for a hashing injector, and the one a low-cardinality tree hides. */
+export const SPACINGS = [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 96] as const;
+
+/* Independent base-11 digits of `index`. Using strides (`index * 3 % 11`) instead
+ * would make every value a function of `index % 11`, so all three props would move
+ * together and yield only 11 distinct combinations — which is exactly the
+ * degenerate case this scenario exists to avoid. Digits give one distinct style
+ * per node up to 11^3 nodes. */
+export const spacingDigit = (index: number, place: number) =>
+  SPACINGS[Math.floor(index / SPACINGS.length ** place) % SPACINGS.length];
+
+/* Prop types derived from the style functions, exactly as real Gamut call sites
+ * do it (`StyleProps<typeof StrokeButtonStateStyles>`). Shared by both arms so
+ * neither gets a typing advantage. */
+export type BoxStyleProps = StyleProps<typeof systemProps>;
+export type ButtonStyleProps = StyleProps<typeof buttonVariants> &
+  StyleProps<typeof buttonStates>;
+
+export { css, states, styledOptions, systemProps, variant };
diff --git a/spikes/styling-perf-poc/src/tree-emotion.tsx b/spikes/styling-perf-poc/src/tree-emotion.tsx
new file mode 100644
index 0000000000..967907f6e5
--- /dev/null
+++ b/spikes/styling-perf-poc/src/tree-emotion.tsx
@@ -0,0 +1,74 @@
+import styled from '@emotion/styled';
+
+import {
+  type BoxStyleProps,
+  type ButtonStyleProps,
+  bodyStyles,
+  buttonBase,
+  buttonStates,
+  buttonVariants,
+  cardStyles,
+  headingStyles,
+  rowStyles,
+  spacingDigit,
+  styledOptions,
+  systemProps,
+} from './styles';
+
+/* ARM A — today's approach: real `@emotion/styled` consuming the real Gamut
+ * style helpers, with `styledOptions` filtering system props off the DOM exactly
+ * as production does. */
+
+const Box = styled('div', styledOptions)<BoxStyleProps>(systemProps);
+const Card = styled('div', styledOptions)(cardStyles);
+const Heading = styled('h2', styledOptions)(headingStyles);
+const Body = styled('p', styledOptions)(bodyStyles);
+const Row = styled('div', styledOptions)(rowStyles);
+const Button = styled(
+  'button',
+  styledOptions<'button', 'variant' | 'fullWidth' | 'compact'>([
+    'variant',
+    'fullWidth',
+    'compact',
+  ])
+)<ButtonStyleProps>(buttonBase, buttonVariants, buttonStates);
+
+export const EmotionPage = ({
+  count,
+  unique = false,
+}: {
+  count: number;
+  unique?: boolean;
+}) => (
+  <Box p={24} bg="background">
+    {Array.from({ length: count }, (_, index) => (
+      <Card key={index}>
+        <Heading>Card {index}</Heading>
+        <Body>
+          Body copy for card {index}, long enough to be representative of real
+          content rather than a single word.
+        </Body>
+        <Row>
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary" compact>
+            Secondary
+          </Button>
+          <Button variant="danger" fullWidth={index % 3 === 0}>
+            Danger
+          </Button>
+        </Row>
+        {unique ? (
+          // distinct style object per node — worst case for a hashing injector
+          <Box
+            p={spacingDigit(index, 0)}
+            mt={spacingDigit(index, 1)}
+            px={spacingDigit(index, 2)}
+            width="100%"
+          />
+        ) : (
+          <Box mt={16} px={index % 2 ? 16 : 8} width="100%" />
+        )}
+      </Card>
+    ))}
+  </Box>
+);
diff --git a/spikes/styling-perf-poc/src/tree-engine.tsx b/spikes/styling-perf-poc/src/tree-engine.tsx
new file mode 100644
index 0000000000..baeda00013
--- /dev/null
+++ b/spikes/styling-perf-poc/src/tree-engine.tsx
@@ -0,0 +1,74 @@
+import { styled } from '../../panda-styling-poc/src/gamut/engine';
+import {
+  type BoxStyleProps,
+  type ButtonStyleProps,
+  bodyStyles,
+  buttonBase,
+  buttonStates,
+  buttonVariants,
+  cardStyles,
+  headingStyles,
+  rowStyles,
+  spacingDigit,
+  systemProps,
+} from './styles';
+
+/* ARM B — the proposed approach: the Emotion-free engine from
+ * spikes/panda-styling-poc/src/gamut/engine, consuming the SAME style helpers.
+ *
+ * Imported across spikes deliberately rather than copied — a duplicate would
+ * drift and quietly invalidate the comparison.
+ *
+ * No `styledOptions` needed: the engine reads `propNames` off the style functions
+ * and filters consumed props automatically. */
+
+const Box = styled('div')<BoxStyleProps>(systemProps);
+const Card = styled('div')(cardStyles);
+const Heading = styled('h2')(headingStyles);
+const Body = styled('p')(bodyStyles);
+const Row = styled('div')(rowStyles);
+const Button = styled('button')<ButtonStyleProps>(
+  buttonBase,
+  buttonVariants,
+  buttonStates
+);
+
+export const EnginePage = ({
+  count,
+  unique = false,
+}: {
+  count: number;
+  unique?: boolean;
+}) => (
+  <Box p={24} bg="background">
+    {Array.from({ length: count }, (_, index) => (
+      <Card key={index}>
+        <Heading>Card {index}</Heading>
+        <Body>
+          Body copy for card {index}, long enough to be representative of real
+          content rather than a single word.
+        </Body>
+        <Row>
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary" compact>
+            Secondary
+          </Button>
+          <Button variant="danger" fullWidth={index % 3 === 0}>
+            Danger
+          </Button>
+        </Row>
+        {unique ? (
+          // distinct style object per node — worst case for a hashing injector
+          <Box
+            p={spacingDigit(index, 0)}
+            mt={spacingDigit(index, 1)}
+            px={spacingDigit(index, 2)}
+            width="100%"
+          />
+        ) : (
+          <Box mt={16} px={index % 2 ? 16 : 8} width="100%" />
+        )}
+      </Card>
+    ))}
+  </Box>
+);
diff --git a/spikes/styling-perf-poc/tsconfig.json b/spikes/styling-perf-poc/tsconfig.json
new file mode 100644
index 0000000000..1158ef2d0c
--- /dev/null
+++ b/spikes/styling-perf-poc/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "baseUrl": ".",
+    "paths": {
+      "styled-system/*": ["../panda-styling-poc/styled-system/*"]
+    }
+  },
+  "include": [
+    "src",
+    "../panda-styling-poc/src/gamut/engine",
+    "../panda-styling-poc/src/gamut-theme.d.ts"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
index 1805670645..6d9a13ef10 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -283,10 +283,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.27.1, @babel/helper-plugin-utils@npm:^7.8.0":
-  version: 7.28.6
-  resolution: "@babel/helper-plugin-utils@npm:7.28.6"
-  checksum: 10c0/3f5f8acc152fdbb69a84b8624145ff4f9b9f6e776cb989f9f968f8606eb7185c5c3cfcf3ba08534e37e1e0e1c118ac67080610333f56baa4f7376c99b5f1143d
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.27.1, @babel/helper-plugin-utils@npm:^7.29.7, @babel/helper-plugin-utils@npm:^7.8.0":
+  version: 7.29.7
+  resolution: "@babel/helper-plugin-utils@npm:7.29.7"
+  checksum: 10c0/380477a06133274a2759f9355929cb60a95e8b8fee624a1ae1fa349e1d1645b89daca456f72833f6d1062bffa12ee4271c5bf0cc5a61c0166cdc24c7591e2408
   languageName: node
   linkType: hard
 
@@ -1199,6 +1199,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-self@npm:^7.27.1":
+  version: 7.29.7
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.29.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.29.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/288995f0fd0d61ab740a315fb56c8255eb87dd4a4ac2ac7d0fdd4ce173c3878200141e80da2db0e598c7b2a71e74e604afdbb4c8e14ae6e0527ce0b6294c03da
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-react-jsx-source@npm:^7.27.1":
+  version: 7.29.7
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.29.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.29.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/a121899631e6d99b9e1b276acf736dbb77948a31f8eeeae67b89c8a4ab0f05e51ba64544baa06c286a2b9944f227244e15aac464e2313d286d0511fe51e27975
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9"
@@ -1589,6 +1611,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@clack/core@npm:0.4.1":
+  version: 0.4.1
+  resolution: "@clack/core@npm:0.4.1"
+  dependencies:
+    picocolors: "npm:^1.0.0"
+    sisteransi: "npm:^1.0.5"
+  checksum: 10c0/60c59e2d0017ce81567566c4f2a288f1738ef6356e25d9c56055be68aa449f75b6a7271b32c335213eb3a7af4b02db90de88c6999c432f09ca00c3d8004ea95b
+  languageName: node
+  linkType: hard
+
+"@clack/prompts@npm:0.9.1":
+  version: 0.9.1
+  resolution: "@clack/prompts@npm:0.9.1"
+  dependencies:
+    "@clack/core": "npm:0.4.1"
+    picocolors: "npm:^1.0.0"
+    sisteransi: "npm:^1.0.5"
+  checksum: 10c0/6cda9f56963dcbbfca4d9a64c82cf57e7f00dd563cd9e9ad28973b10ac761723fc21453254effbf08d5862efd57bad41d48008316c345202b74035ae905329cf
+  languageName: node
+  linkType: hard
+
 "@codecademy/eslint-config@npm:8.0.0":
   version: 8.0.0
   resolution: "@codecademy/eslint-config@npm:8.0.0"
@@ -1674,7 +1717,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@codecademy/gamut-styles@npm:20.0.2, @codecademy/gamut-styles@workspace:packages/gamut-styles":
+"@codecademy/gamut-styles@npm:20.0.2, @codecademy/gamut-styles@workspace:*, @codecademy/gamut-styles@workspace:packages/gamut-styles":
   version: 0.0.0-use.local
   resolution: "@codecademy/gamut-styles@workspace:packages/gamut-styles"
   dependencies:
@@ -1773,7 +1816,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codecademy/variance@npm:0.26.1, @codecademy/variance@workspace:packages/variance":
+"@codecademy/variance@npm:0.26.1, @codecademy/variance@workspace:*, @codecademy/variance@workspace:packages/variance":
   version: 0.0.0-use.local
   resolution: "@codecademy/variance@workspace:packages/variance"
   dependencies:
@@ -1803,6 +1846,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/postcss-cascade-layers@npm:4.0.6":
+  version: 4.0.6
+  resolution: "@csstools/postcss-cascade-layers@npm:4.0.6"
+  dependencies:
+    "@csstools/selector-specificity": "npm:^3.1.1"
+    postcss-selector-parser: "npm:^6.0.13"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 10c0/134019e9b3f71de39034658e2a284f549883745a309f774d8d272871f9e65680e0981c893766537a8a56ed7f41dba2d0f9fc3cb4fa4057c227bc193976a2ec79
+  languageName: node
+  linkType: hard
+
+"@csstools/selector-specificity@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@csstools/selector-specificity@npm:3.1.1"
+  peerDependencies:
+    postcss-selector-parser: ^6.0.13
+  checksum: 10c0/1d4a3f8015904d6aeb3203afe0e1f6db09b191d9c1557520e3e960c9204ad852df9db4cbde848643f78a26f6ea09101b4e528dbb9193052db28258dbcc8a6e1d
+  languageName: node
+  linkType: hard
+
 "@effect/data@npm:0.17.1":
   version: 0.17.1
   resolution: "@effect/data@npm:0.17.1"
@@ -2052,6 +2116,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/aix-ppc64@npm:0.21.5"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/aix-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/aix-ppc64@npm:0.25.12"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/aix-ppc64@npm:0.27.4"
@@ -2059,6 +2137,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm64@npm:0.21.5"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm64@npm:0.25.12"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/android-arm64@npm:0.27.4"
@@ -2066,6 +2158,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm@npm:0.21.5"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm@npm:0.25.12"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/android-arm@npm:0.27.4"
@@ -2073,6 +2179,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-x64@npm:0.21.5"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-x64@npm:0.25.12"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/android-x64@npm:0.27.4"
@@ -2080,6 +2200,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-arm64@npm:0.21.5"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-arm64@npm:0.25.12"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/darwin-arm64@npm:0.27.4"
@@ -2087,6 +2221,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-x64@npm:0.21.5"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-x64@npm:0.25.12"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/darwin-x64@npm:0.27.4"
@@ -2094,6 +2242,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.12"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/freebsd-arm64@npm:0.27.4"
@@ -2101,6 +2263,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-x64@npm:0.21.5"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-x64@npm:0.25.12"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/freebsd-x64@npm:0.27.4"
@@ -2108,6 +2284,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm64@npm:0.21.5"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm64@npm:0.25.12"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-arm64@npm:0.27.4"
@@ -2115,6 +2305,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm@npm:0.21.5"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm@npm:0.25.12"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-arm@npm:0.27.4"
@@ -2122,6 +2326,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ia32@npm:0.21.5"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ia32@npm:0.25.12"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-ia32@npm:0.27.4"
@@ -2129,6 +2347,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-loong64@npm:0.21.5"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-loong64@npm:0.25.12"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-loong64@npm:0.27.4"
@@ -2136,6 +2368,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-mips64el@npm:0.21.5"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-mips64el@npm:0.25.12"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-mips64el@npm:0.27.4"
@@ -2143,6 +2389,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ppc64@npm:0.21.5"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ppc64@npm:0.25.12"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-ppc64@npm:0.27.4"
@@ -2150,6 +2410,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-riscv64@npm:0.21.5"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-riscv64@npm:0.25.12"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-riscv64@npm:0.27.4"
@@ -2157,6 +2431,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-s390x@npm:0.21.5"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-s390x@npm:0.25.12"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-s390x@npm:0.27.4"
@@ -2164,6 +2452,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-x64@npm:0.21.5"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-x64@npm:0.25.12"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/linux-x64@npm:0.27.4"
@@ -2171,6 +2473,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.12"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/netbsd-arm64@npm:0.27.4"
@@ -2178,6 +2487,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/netbsd-x64@npm:0.21.5"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-x64@npm:0.25.12"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/netbsd-x64@npm:0.27.4"
@@ -2185,6 +2508,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.12"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/openbsd-arm64@npm:0.27.4"
@@ -2192,6 +2522,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/openbsd-x64@npm:0.21.5"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-x64@npm:0.25.12"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/openbsd-x64@npm:0.27.4"
@@ -2199,6 +2543,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openharmony-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openharmony-arm64@npm:0.25.12"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openharmony-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/openharmony-arm64@npm:0.27.4"
@@ -2206,6 +2557,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/sunos-x64@npm:0.21.5"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/sunos-x64@npm:0.25.12"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/sunos-x64@npm:0.27.4"
@@ -2213,6 +2578,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-arm64@npm:0.21.5"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-arm64@npm:0.25.12"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/win32-arm64@npm:0.27.4"
@@ -2220,6 +2599,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-ia32@npm:0.21.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-ia32@npm:0.25.12"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/win32-ia32@npm:0.27.4"
@@ -2227,6 +2620,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-x64@npm:0.21.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-x64@npm:0.25.12"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.27.4":
   version: 0.27.4
   resolution: "@esbuild/win32-x64@npm:0.27.4"
@@ -3141,10 +3548,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15, @jridgewell/sourcemap-codec@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
-  checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15, @jridgewell/sourcemap-codec@npm:^1.5.0, @jridgewell/sourcemap-codec@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
+  checksum: 10c0/f9e538f302b63c0ebc06eecb1dd9918dd4289ed36147a0ddce35d6ea4d7ebbda243cda7b2213b6a5e1d8087a298d5cf630fb2bd39329cdecb82017023f6081a0
   languageName: node
   linkType: hard
 
@@ -3369,6 +3776,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@module-federation/error-codes@npm:0.22.0":
+  version: 0.22.0
+  resolution: "@module-federation/error-codes@npm:0.22.0"
+  checksum: 10c0/a9b25e8c930971e146e6352f482f915f1b54965ce54706984e834a87be714d30caebbd3946f9eb408e7821b2cc326b90787eeb2f8306edf1d322d9931543a139
+  languageName: node
+  linkType: hard
+
 "@module-federation/error-codes@npm:2.2.2":
   version: 2.2.2
   resolution: "@module-federation/error-codes@npm:2.2.2"
@@ -3464,6 +3878,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@module-federation/runtime-core@npm:0.22.0":
+  version: 0.22.0
+  resolution: "@module-federation/runtime-core@npm:0.22.0"
+  dependencies:
+    "@module-federation/error-codes": "npm:0.22.0"
+    "@module-federation/sdk": "npm:0.22.0"
+  checksum: 10c0/0406c26b119065dca23a8fb65872b8ab5794984d5d82984ed625c433658693050a8a800cde8c97cc1572b0bc154a7824fa9db5bb05106b7250643e799ba7091d
+  languageName: node
+  linkType: hard
+
 "@module-federation/runtime-core@npm:2.2.2":
   version: 2.2.2
   resolution: "@module-federation/runtime-core@npm:2.2.2"
@@ -3484,6 +3908,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@module-federation/runtime-tools@npm:0.22.0":
+  version: 0.22.0
+  resolution: "@module-federation/runtime-tools@npm:0.22.0"
+  dependencies:
+    "@module-federation/runtime": "npm:0.22.0"
+    "@module-federation/webpack-bundler-runtime": "npm:0.22.0"
+  checksum: 10c0/fbe76616fb176ce03550e3ce2bb43fa5d44c12d7d0939593f29dab5658accfb559b857df4180f7f681dc601aab928658cd9b49a78daad866089390b820854fbd
+  languageName: node
+  linkType: hard
+
 "@module-federation/runtime-tools@npm:2.2.2":
   version: 2.2.2
   resolution: "@module-federation/runtime-tools@npm:2.2.2"
@@ -3505,6 +3939,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@module-federation/runtime@npm:0.22.0":
+  version: 0.22.0
+  resolution: "@module-federation/runtime@npm:0.22.0"
+  dependencies:
+    "@module-federation/error-codes": "npm:0.22.0"
+    "@module-federation/runtime-core": "npm:0.22.0"
+    "@module-federation/sdk": "npm:0.22.0"
+  checksum: 10c0/f9cfaf7f8599a215195cb612a5d4532d4399cc8eb5a928ced60c4bdf0e7e2028849cdc384fa3f1506f9e7e0e112f74f6c30a5a76136dc56e155012d111ea075b
+  languageName: node
+  linkType: hard
+
 "@module-federation/runtime@npm:2.2.2":
   version: 2.2.2
   resolution: "@module-federation/runtime@npm:2.2.2"
@@ -3523,6 +3968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@module-federation/sdk@npm:0.22.0":
+  version: 0.22.0
+  resolution: "@module-federation/sdk@npm:0.22.0"
+  checksum: 10c0/c09ba0147368151b67ba33b9174ef451a028e1709d2208aa811cacc1ae4efcae0f1987f02119f9b54754ee6430af3610e357c9b744147f112a25d8f7564f8041
+  languageName: node
+  linkType: hard
+
 "@module-federation/sdk@npm:2.2.2, @module-federation/sdk@npm:^2.1.0":
   version: 2.2.2
   resolution: "@module-federation/sdk@npm:2.2.2"
@@ -3556,6 +4008,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@module-federation/webpack-bundler-runtime@npm:0.22.0":
+  version: 0.22.0
+  resolution: "@module-federation/webpack-bundler-runtime@npm:0.22.0"
+  dependencies:
+    "@module-federation/runtime": "npm:0.22.0"
+    "@module-federation/sdk": "npm:0.22.0"
+  checksum: 10c0/4c1354b881ffc0c1521f1d676c9301db0b0d59186c386dde4dbb6d33f00fdb16bf118e85cfc38e2ffb36084fa87df8390d415a41c0c93b33bd0e5460a9a934f5
+  languageName: node
+  linkType: hard
+
 "@module-federation/webpack-bundler-runtime@npm:2.2.2":
   version: 2.2.2
   resolution: "@module-federation/webpack-bundler-runtime@npm:2.2.2"
@@ -4211,6 +4673,243 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pandacss/config@npm:0.53.7, @pandacss/config@npm:^0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/config@npm:0.53.7"
+  dependencies:
+    "@pandacss/logger": "npm:0.53.7"
+    "@pandacss/preset-base": "npm:0.53.7"
+    "@pandacss/preset-panda": "npm:0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    bundle-n-require: "npm:1.1.2"
+    escalade: "npm:3.1.2"
+    merge-anything: "npm:5.1.7"
+    microdiff: "npm:1.3.2"
+    typescript: "npm:5.6.2"
+  checksum: 10c0/0012910a4a8f9b4130527367b9d731f00c381f8236f7fe2d957ce04c6db9378a405e668cc51071aada28da1251679e6b9db500c32ec0db82ffc7a3ffde543c40
+  languageName: node
+  linkType: hard
+
+"@pandacss/core@npm:0.53.7, @pandacss/core@npm:^0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/core@npm:0.53.7"
+  dependencies:
+    "@csstools/postcss-cascade-layers": "npm:4.0.6"
+    "@pandacss/is-valid-prop": "npm:^0.53.7"
+    "@pandacss/logger": "npm:0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/token-dictionary": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    browserslist: "npm:4.23.3"
+    hookable: "npm:5.5.3"
+    lightningcss: "npm:1.25.1"
+    lodash.merge: "npm:4.6.2"
+    outdent: "npm:0.8.0"
+    postcss: "npm:8.4.49"
+    postcss-discard-duplicates: "npm:7.0.1"
+    postcss-discard-empty: "npm:7.0.0"
+    postcss-merge-rules: "npm:7.0.4"
+    postcss-minify-selectors: "npm:7.0.4"
+    postcss-nested: "npm:6.0.1"
+    postcss-normalize-whitespace: "npm:7.0.0"
+    postcss-selector-parser: "npm:6.1.2"
+    ts-pattern: "npm:5.0.8"
+  checksum: 10c0/318b904b3b6e6f64921b0142a957e2acff2c03bd52e36f00f00cd57bc2aa4da1987c84bec656c6d0ede136dea3d9a2eb7790158a9cea9696e560c08c3dcea9a0
+  languageName: node
+  linkType: hard
+
+"@pandacss/dev@npm:^0.53.0":
+  version: 0.53.7
+  resolution: "@pandacss/dev@npm:0.53.7"
+  dependencies:
+    "@clack/prompts": "npm:0.9.1"
+    "@pandacss/config": "npm:0.53.7"
+    "@pandacss/logger": "npm:0.53.7"
+    "@pandacss/node": "npm:0.53.7"
+    "@pandacss/postcss": "npm:0.53.7"
+    "@pandacss/preset-panda": "npm:0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/token-dictionary": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    cac: "npm:6.7.14"
+  bin:
+    panda: bin.js
+    pandacss: bin.js
+  checksum: 10c0/d2f7e276e94c5ab486f8918d800fa1f411936df93d0619d30a1d5eaed6985023f285cdb5f4cac17bf88a631fb2d08c44c172318b6c61ce9fc8d376df0ab49ab6
+  languageName: node
+  linkType: hard
+
+"@pandacss/extractor@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/extractor@npm:0.53.7"
+  dependencies:
+    "@pandacss/shared": "npm:0.53.7"
+    ts-evaluator: "npm:1.2.0"
+    ts-morph: "npm:24.0.0"
+  checksum: 10c0/0c6d05952188811d8d235b85c426e4196371361b15b6988dc84ff62faee52b237a754d3c605462ff6a5606deb48a3dfec385aa91cdc2e92a506f15eafc561b7e
+  languageName: node
+  linkType: hard
+
+"@pandacss/generator@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/generator@npm:0.53.7"
+  dependencies:
+    "@pandacss/core": "npm:0.53.7"
+    "@pandacss/is-valid-prop": "npm:^0.53.7"
+    "@pandacss/logger": "npm:0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/token-dictionary": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    javascript-stringify: "npm:2.1.0"
+    outdent: "npm: ^0.8.0"
+    pluralize: "npm:8.0.0"
+    postcss: "npm:8.4.49"
+    ts-pattern: "npm:5.0.8"
+  checksum: 10c0/2ec545c427654e9f4c1b03c946dbefa3cccb33cd18059b1e4232d7bf8cf22dba5de58bea50925ebf25a44b9c097b7ade21cfedb7301f999af5f61bdeb7969fdd
+  languageName: node
+  linkType: hard
+
+"@pandacss/is-valid-prop@npm:^0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/is-valid-prop@npm:0.53.7"
+  checksum: 10c0/8b455b73482fd34d7b29bf4e4d9d6f056d73a6fa0d279293473f904a2b2fd630e817eef256f475866559406d1f8d19490f4cf5a18ca5cc7a68ecb4068d281f08
+  languageName: node
+  linkType: hard
+
+"@pandacss/logger@npm:0.53.7, @pandacss/logger@npm:^0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/logger@npm:0.53.7"
+  dependencies:
+    "@pandacss/types": "npm:0.53.7"
+    kleur: "npm:4.1.5"
+  checksum: 10c0/be171fba82f02751dad8e217450d4c8a0ddb98570d04d5a1782b68bc7b6845c0b29000bad36e2f2dfa5cf31fc7dd3471f7b373483a525b4a9ab8d3f01b6ab55b
+  languageName: node
+  linkType: hard
+
+"@pandacss/node@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/node@npm:0.53.7"
+  dependencies:
+    "@pandacss/config": "npm:0.53.7"
+    "@pandacss/core": "npm:0.53.7"
+    "@pandacss/generator": "npm:0.53.7"
+    "@pandacss/logger": "npm:0.53.7"
+    "@pandacss/parser": "npm:0.53.7"
+    "@pandacss/reporter": "npm:0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/token-dictionary": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    browserslist: "npm:4.23.3"
+    chokidar: "npm:4.0.3"
+    fs-extra: "npm:11.2.0"
+    glob-parent: "npm:6.0.2"
+    is-glob: "npm:4.0.3"
+    lodash.merge: "npm:4.6.2"
+    look-it-up: "npm:2.1.0"
+    outdent: "npm: ^0.8.0"
+    package-manager-detector: "npm:0.1.0"
+    perfect-debounce: "npm:1.0.0"
+    picomatch: "npm:4.0.2"
+    pkg-types: "npm:1.0.3"
+    pluralize: "npm:8.0.0"
+    postcss: "npm:8.4.49"
+    prettier: "npm:3.2.5"
+    tinyglobby: "npm:0.2.12"
+    ts-morph: "npm:24.0.0"
+    ts-pattern: "npm:5.0.8"
+    tsconfck: "npm:3.0.2"
+  checksum: 10c0/28a306cdc249b33093aba6a302224e127fbf69ad8feb424d83461a50a4a8c76fa1c9ef09500f0b7d328201c87e504085c1d12f00ebfe7dd12eab14af89ea3bd5
+  languageName: node
+  linkType: hard
+
+"@pandacss/parser@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/parser@npm:0.53.7"
+  dependencies:
+    "@pandacss/config": "npm:^0.53.7"
+    "@pandacss/core": "npm:^0.53.7"
+    "@pandacss/extractor": "npm:0.53.7"
+    "@pandacss/logger": "npm:0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    "@vue/compiler-sfc": "npm:3.4.19"
+    magic-string: "npm:0.30.17"
+    ts-morph: "npm:24.0.0"
+    ts-pattern: "npm:5.0.8"
+  checksum: 10c0/b3f86dd9414c11c6e19102a95fe44d75902cd9fd64b3678f4acc618db5e2f4b96d651f8aab566db60cbd03d97e8b6570847e8225d005649ebb21d741480a86b9
+  languageName: node
+  linkType: hard
+
+"@pandacss/postcss@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/postcss@npm:0.53.7"
+  dependencies:
+    "@pandacss/node": "npm:0.53.7"
+    postcss: "npm:8.4.49"
+  checksum: 10c0/837702e255f9a396bf23029768315e2a70f9d5a360c9756bda20f37b6ff63a8defa15a3341f312cd3aea6dcd8ab540e3f1c06607557a407865ba978151869f5f
+  languageName: node
+  linkType: hard
+
+"@pandacss/preset-base@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/preset-base@npm:0.53.7"
+  dependencies:
+    "@pandacss/types": "npm:0.53.7"
+  checksum: 10c0/f08fd56e3462d5d656f43d4425a805ce1eeef9b872e62e272bd4a0bc3949a267cbb2d7bdb0511241d41cc6441869792ab96374db3ec89008fbd862888dd34f9c
+  languageName: node
+  linkType: hard
+
+"@pandacss/preset-panda@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/preset-panda@npm:0.53.7"
+  dependencies:
+    "@pandacss/types": "npm:0.53.7"
+  checksum: 10c0/d65c4037696c5b3f1b174585d548295732acd955b65ea220e8c9c497623c37d0e79da4d96d1579dc0b4fe93559707903894a15d27c2bf47dea6a781c3cbfd5dd
+  languageName: node
+  linkType: hard
+
+"@pandacss/reporter@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/reporter@npm:0.53.7"
+  dependencies:
+    "@pandacss/core": "npm:0.53.7"
+    "@pandacss/generator": "npm:0.53.7"
+    "@pandacss/logger": "npm:0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    table: "npm:6.9.0"
+    wordwrapjs: "npm:5.1.0"
+  checksum: 10c0/dd535ee35657e54448d284fb55f0dd9126a2b84a87aadb5624ee3e8301444e520f6285cbe163533dec8ee5d2add4b6fd6753b867140077fe51c23298be0bb6ff
+  languageName: node
+  linkType: hard
+
+"@pandacss/shared@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/shared@npm:0.53.7"
+  checksum: 10c0/e9b9d750cf58cc9fd7fac42897e29ba082fee799d849645addd9735d47548aef8d42e1255f4f9d5fae299d0b3559f8f86867ab9bc6fcb6ef92f4a3530e3b1114
+  languageName: node
+  linkType: hard
+
+"@pandacss/token-dictionary@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/token-dictionary@npm:0.53.7"
+  dependencies:
+    "@pandacss/logger": "npm:^0.53.7"
+    "@pandacss/shared": "npm:0.53.7"
+    "@pandacss/types": "npm:0.53.7"
+    ts-pattern: "npm:5.0.8"
+  checksum: 10c0/83b56f4d6c2ca772546e35f45f881f3a6bf21465d09bcc4fe9ad4b38fcdf97eb102bcbec3cf7a4ddaf4fc77e57c32bcec7f53b12e1fdbc27ab12a257ea49a04f
+  languageName: node
+  linkType: hard
+
+"@pandacss/types@npm:0.53.7":
+  version: 0.53.7
+  resolution: "@pandacss/types@npm:0.53.7"
+  checksum: 10c0/7d151167df032a74edda3c6daa05bcfa8d12b585a72a3c2a0cf935565d7d6c8411c0a9b164804ecfce7e71df295e48a3350c4bfefa5de64cbec2011bd66000a2
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-android-arm64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-android-arm64@npm:2.4.1"
@@ -6074,6 +6773,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rolldown/pluginutils@npm:1.0.0-beta.27":
+  version: 1.0.0-beta.27
+  resolution: "@rolldown/pluginutils@npm:1.0.0-beta.27"
+  checksum: 10c0/9658f235b345201d4f6bfb1f32da9754ca164f892d1cb68154fe5f53c1df42bd675ecd409836dff46884a7847d6c00bdc38af870f7c81e05bba5c2645eb4ab9c
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-babel@npm:^6.0.4":
   version: 6.0.4
   resolution: "@rollup/plugin-babel@npm:6.0.4"
@@ -6204,142 +6910,177 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.47.1"
+"@rollup/rollup-android-arm-eabi@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.62.2"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-android-arm64@npm:4.47.1"
+"@rollup/rollup-android-arm64@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-android-arm64@npm:4.62.2"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.47.1"
+"@rollup/rollup-darwin-arm64@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.62.2"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-darwin-x64@npm:4.47.1"
+"@rollup/rollup-darwin-x64@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-darwin-x64@npm:4.62.2"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.47.1"
+"@rollup/rollup-freebsd-arm64@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.62.2"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.47.1"
+"@rollup/rollup-freebsd-x64@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.62.2"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.47.1"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.62.2"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.47.1"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.62.2"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.47.1"
+"@rollup/rollup-linux-arm64-gnu@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.62.2"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.47.1"
+"@rollup/rollup-linux-arm64-musl@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.62.2"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.47.1"
+"@rollup/rollup-linux-loong64-gnu@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-loong64-gnu@npm:4.62.2"
   conditions: os=linux & cpu=loong64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-ppc64-gnu@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.47.1"
+"@rollup/rollup-linux-loong64-musl@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-loong64-musl@npm:4.62.2"
+  conditions: os=linux & cpu=loong64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-ppc64-gnu@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.62.2"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.47.1"
+"@rollup/rollup-linux-ppc64-musl@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-ppc64-musl@npm:4.62.2"
+  conditions: os=linux & cpu=ppc64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-riscv64-gnu@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.62.2"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-musl@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.47.1"
+"@rollup/rollup-linux-riscv64-musl@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.62.2"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.47.1"
+"@rollup/rollup-linux-s390x-gnu@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.62.2"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.47.1"
+"@rollup/rollup-linux-x64-gnu@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.62.2"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.47.1"
+"@rollup/rollup-linux-x64-musl@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.62.2"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.47.1"
+"@rollup/rollup-openbsd-x64@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-openbsd-x64@npm:4.62.2"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-openharmony-arm64@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-openharmony-arm64@npm:4.62.2"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.62.2"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.47.1"
+"@rollup/rollup-win32-ia32-msvc@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.62.2"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.47.1":
-  version: 4.47.1
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.47.1"
+"@rollup/rollup-win32-x64-gnu@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-win32-x64-gnu@npm:4.62.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-msvc@npm:4.62.2":
+  version: 4.62.2
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.62.2"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -6351,6 +7092,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-darwin-arm64@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-darwin-arm64@npm:1.7.12"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-darwin-x64@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-darwin-x64@npm:1.6.8"
@@ -6358,6 +7106,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-darwin-x64@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-darwin-x64@npm:1.7.12"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-linux-arm64-gnu@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-linux-arm64-gnu@npm:1.6.8"
@@ -6365,6 +7120,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-linux-arm64-gnu@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.7.12"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-linux-arm64-musl@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-linux-arm64-musl@npm:1.6.8"
@@ -6372,6 +7134,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-linux-arm64-musl@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-linux-arm64-musl@npm:1.7.12"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-linux-x64-gnu@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-linux-x64-gnu@npm:1.6.8"
@@ -6379,6 +7148,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-linux-x64-gnu@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-linux-x64-gnu@npm:1.7.12"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-linux-x64-musl@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-linux-x64-musl@npm:1.6.8"
@@ -6386,6 +7162,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-linux-x64-musl@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-linux-x64-musl@npm:1.7.12"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-wasm32-wasi@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-wasm32-wasi@npm:1.6.8"
@@ -6395,6 +7178,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-wasm32-wasi@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-wasm32-wasi@npm:1.7.12"
+  dependencies:
+    "@napi-rs/wasm-runtime": "npm:1.0.7"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-win32-arm64-msvc@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-win32-arm64-msvc@npm:1.6.8"
@@ -6402,6 +7194,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-win32-arm64-msvc@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.7.12"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-win32-ia32-msvc@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-win32-ia32-msvc@npm:1.6.8"
@@ -6409,6 +7208,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-win32-ia32-msvc@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.7.12"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@rspack/binding-win32-x64-msvc@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding-win32-x64-msvc@npm:1.6.8"
@@ -6416,6 +7222,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding-win32-x64-msvc@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding-win32-x64-msvc@npm:1.7.12"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rspack/binding@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/binding@npm:1.6.8"
@@ -6455,6 +7268,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/binding@npm:1.7.12":
+  version: 1.7.12
+  resolution: "@rspack/binding@npm:1.7.12"
+  dependencies:
+    "@rspack/binding-darwin-arm64": "npm:1.7.12"
+    "@rspack/binding-darwin-x64": "npm:1.7.12"
+    "@rspack/binding-linux-arm64-gnu": "npm:1.7.12"
+    "@rspack/binding-linux-arm64-musl": "npm:1.7.12"
+    "@rspack/binding-linux-x64-gnu": "npm:1.7.12"
+    "@rspack/binding-linux-x64-musl": "npm:1.7.12"
+    "@rspack/binding-wasm32-wasi": "npm:1.7.12"
+    "@rspack/binding-win32-arm64-msvc": "npm:1.7.12"
+    "@rspack/binding-win32-ia32-msvc": "npm:1.7.12"
+    "@rspack/binding-win32-x64-msvc": "npm:1.7.12"
+  dependenciesMeta:
+    "@rspack/binding-darwin-arm64":
+      optional: true
+    "@rspack/binding-darwin-x64":
+      optional: true
+    "@rspack/binding-linux-arm64-gnu":
+      optional: true
+    "@rspack/binding-linux-arm64-musl":
+      optional: true
+    "@rspack/binding-linux-x64-gnu":
+      optional: true
+    "@rspack/binding-linux-x64-musl":
+      optional: true
+    "@rspack/binding-wasm32-wasi":
+      optional: true
+    "@rspack/binding-win32-arm64-msvc":
+      optional: true
+    "@rspack/binding-win32-ia32-msvc":
+      optional: true
+    "@rspack/binding-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/0bca963309c75418148ce67f9c102b11662844bc2412257da9e4fb56917bf279f37d5ebd8f6d641405bcde54d43384adc5693e22bc15c571f949a99a90aa6ec9
+  languageName: node
+  linkType: hard
+
 "@rspack/core@npm:1.6.8":
   version: 1.6.8
   resolution: "@rspack/core@npm:1.6.8"
@@ -6471,6 +7323,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rspack/core@npm:^1.1.8":
+  version: 1.7.12
+  resolution: "@rspack/core@npm:1.7.12"
+  dependencies:
+    "@module-federation/runtime-tools": "npm:0.22.0"
+    "@rspack/binding": "npm:1.7.12"
+    "@rspack/lite-tapable": "npm:1.1.0"
+  peerDependencies:
+    "@swc/helpers": ">=0.5.1"
+  peerDependenciesMeta:
+    "@swc/helpers":
+      optional: true
+  checksum: 10c0/575737cffae45720563a8f5bc933058a0c6c42dbae1a41b53f98c44281146eb5f917f118c866d53aa8e0f2b4533dae092c564f27412affb58ae3dbeb853266b4
+  languageName: node
+  linkType: hard
+
 "@rspack/lite-tapable@npm:1.1.0":
   version: 1.1.0
   resolution: "@rspack/lite-tapable@npm:1.1.0"
@@ -7484,6 +8352,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ts-morph/common@npm:~0.25.0":
+  version: 0.25.0
+  resolution: "@ts-morph/common@npm:0.25.0"
+  dependencies:
+    minimatch: "npm:^9.0.4"
+    path-browserify: "npm:^1.0.1"
+    tinyglobby: "npm:^0.2.9"
+  checksum: 10c0/c67e66db678e44886e9823e6482834acebfae0ea52ccbfa2af1ca9abfe5a9774dad6e852c8f480909bc196175f17e15454af71d7a41a1c137db09e74f046a830
+  languageName: node
+  linkType: hard
+
 "@tsconfig/node10@npm:^1.0.7":
   version: 1.0.11
   resolution: "@tsconfig/node10@npm:1.0.11"
@@ -7676,10 +8555,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:1.0.8, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "@types/estree@npm:1.0.8"
-  checksum: 10c0/39d34d1afaa338ab9763f37ad6066e3f349444f9052b9676a7cc0252ef9485a41c6d81c9c4e0d26e9077993354edf25efc853f3224dd4b447175ef62bdcc86a5
+"@types/estree@npm:*, @types/estree@npm:1.0.9, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.8":
+  version: 1.0.9
+  resolution: "@types/estree@npm:1.0.9"
+  checksum: 10c0/3ad3286ca2988cd550dafb8f2ad599c8474868e954fa601a36655bdfefd8039f7c714b8c1c7f2ae219ffbd58bd4660e66fa7479a0120fc02d4777057d4865387
   languageName: node
   linkType: hard
 
@@ -7897,6 +8776,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^17.0.36":
+  version: 17.0.45
+  resolution: "@types/node@npm:17.0.45"
+  checksum: 10c0/0db377133d709b33a47892581a21a41cd7958f22723a3cc6c71d55ac018121382de42fbfc7970d5ae3e7819dbe5f40e1c6a5174aedf7e7964e9cb8fa72b580b0
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.4
   resolution: "@types/normalize-package-data@npm:2.4.4"
@@ -8408,6 +9294,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitejs/plugin-react@npm:^4.3.4":
+  version: 4.7.0
+  resolution: "@vitejs/plugin-react@npm:4.7.0"
+  dependencies:
+    "@babel/core": "npm:^7.28.0"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.27.1"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.27.1"
+    "@rolldown/pluginutils": "npm:1.0.0-beta.27"
+    "@types/babel__core": "npm:^7.20.5"
+    react-refresh: "npm:^0.17.0"
+  peerDependencies:
+    vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+  checksum: 10c0/692f23960972879485d647713663ec299c478222c96567d60285acf7c7dc5c178e71abfe9d2eefddef1eeb01514dacbc2ed68aad84628debf9c7116134734253
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:3.2.4":
   version: 3.2.4
   resolution: "@vitest/expect@npm:3.2.4"
@@ -8450,6 +9352,63 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-core@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-core@npm:3.4.19"
+  dependencies:
+    "@babel/parser": "npm:^7.23.9"
+    "@vue/shared": "npm:3.4.19"
+    entities: "npm:^4.5.0"
+    estree-walker: "npm:^2.0.2"
+    source-map-js: "npm:^1.0.2"
+  checksum: 10c0/94b021dc5d29564f94aa0bb7a5b03203e68b332ed165799f88c2de579a58730f4eca9c8c92d041a03843a3b8e378857485f7672be880781fe53133bfafb93d79
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-dom@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-dom@npm:3.4.19"
+  dependencies:
+    "@vue/compiler-core": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
+  checksum: 10c0/348aecff6ade0b023ff6b7bec572ba3fa6e2450530f15acb743a5679c3612fd6d3b15f87aafa00e1d8258f637397657e2e6ae1546c41f838da23a631e9b276f8
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-sfc@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-sfc@npm:3.4.19"
+  dependencies:
+    "@babel/parser": "npm:^7.23.9"
+    "@vue/compiler-core": "npm:3.4.19"
+    "@vue/compiler-dom": "npm:3.4.19"
+    "@vue/compiler-ssr": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
+    estree-walker: "npm:^2.0.2"
+    magic-string: "npm:^0.30.6"
+    postcss: "npm:^8.4.33"
+    source-map-js: "npm:^1.0.2"
+  checksum: 10c0/eb3c6a136c677cf31b624a27f3c23a6511f54b97607a66ef3625ab25ff56370cc589fe2dfa3ef487746a15f4e4033e63e261eb3a76842a5bbe149da1048dfa46
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-ssr@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-ssr@npm:3.4.19"
+  dependencies:
+    "@vue/compiler-dom": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
+  checksum: 10c0/190dfbe89ad6f662276684ef2931fd67c6e6b7e3d008d6368498481f0632cf4ad06db257f5345336403404050e1791f3ba719dc460029cf9fbbe24abe39adcff
+  languageName: node
+  linkType: hard
+
+"@vue/shared@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/shared@npm:3.4.19"
+  checksum: 10c0/bd4a060b0064f0e183e5bb8e346f3be6ff7046793b0765a407e5334860ffd646b28a4ef53652b644e83bd473cea91189377cd83c933bb638d1da143d28f779ff
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.14.1, @webassemblyjs/ast@npm:^1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/ast@npm:1.14.1"
@@ -8816,15 +9775,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.12.0, ajv@npm:^8.9.0":
-  version: 8.17.1
-  resolution: "ajv@npm:8.17.1"
+"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.12.0, ajv@npm:^8.9.0":
+  version: 8.20.0
+  resolution: "ajv@npm:8.20.0"
   dependencies:
     fast-deep-equal: "npm:^3.1.3"
     fast-uri: "npm:^3.0.1"
     json-schema-traverse: "npm:^1.0.0"
     require-from-string: "npm:^2.0.2"
-  checksum: 10c0/ec3ba10a573c6b60f94639ffc53526275917a2df6810e4ab5a6b959d87459f9ef3f00d5e7865b82677cb7d21590355b34da14d1d0b9c32d75f95a187e76fff35
+  checksum: 10c0/5df9a1c8f83863cde1bd3a9ddb426f599718f88e3dc9153616c79fb28e0be455335830d7f21d745576519f057b371352daa31047b6a33d7036fe08777d60cf2a
   languageName: node
   linkType: hard
 
@@ -9192,6 +10151,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"astral-regex@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "astral-regex@npm:2.0.0"
+  checksum: 10c0/f63d439cc383db1b9c5c6080d1e240bd14dae745f15d11ec5da863e182bbeca70df6c8191cffef5deba0b566ef98834610a68be79ac6379c95eeb26e1b310e25
+  languageName: node
+  linkType: hard
+
 "async@npm:^2.6.4":
   version: 2.6.4
   resolution: "async@npm:2.6.4"
@@ -9691,6 +10657,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:4.23.3":
+  version: 4.23.3
+  resolution: "browserslist@npm:4.23.3"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001646"
+    electron-to-chromium: "npm:^1.5.4"
+    node-releases: "npm:^2.0.18"
+    update-browserslist-db: "npm:^1.1.0"
+  bin:
+    browserslist: cli.js
+  checksum: 10c0/3063bfdf812815346447f4796c8f04601bf5d62003374305fd323c2a463e42776475bcc5309264e39bcf9a8605851e53560695991a623be988138b3ff8c66642
+  languageName: node
+  linkType: hard
+
 "browserslist@npm:^4.0.0, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0, browserslist@npm:^4.26.0, browserslist@npm:^4.28.1":
   version: 4.28.1
   resolution: "browserslist@npm:4.28.1"
@@ -9757,6 +10737,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bundle-n-require@npm:1.1.2":
+  version: 1.1.2
+  resolution: "bundle-n-require@npm:1.1.2"
+  dependencies:
+    esbuild: "npm:^0.25.1"
+    node-eval: "npm:^2.0.0"
+  checksum: 10c0/e2a42ea8a3e89fba7c70291215757c72c0db89e974b803224350cb7548060997f8035750f43256b3a0aeac98272e4a3eceda79846f0fa3a28522aaed0c72e403
+  languageName: node
+  linkType: hard
+
 "bundle-name@npm:^4.1.0":
   version: 4.1.0
   resolution: "bundle-name@npm:4.1.0"
@@ -9780,6 +10770,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cac@npm:6.7.14":
+  version: 6.7.14
+  resolution: "cac@npm:6.7.14"
+  checksum: 10c0/4ee06aaa7bab8981f0d54e5f5f9d4adcd64058e9697563ce336d8a3878ed018ee18ebe5359b2430eceae87e0758e62ea2019c3f52ae6e211b1bd2e133856cd10
+  languageName: node
+  linkType: hard
+
 "cacache@npm:^20.0.1":
   version: 20.0.3
   resolution: "cacache@npm:20.0.3"
@@ -10010,6 +11007,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:4.0.3, chokidar@npm:^4.0.0, chokidar@npm:^4.0.1":
+  version: 4.0.3
+  resolution: "chokidar@npm:4.0.3"
+  dependencies:
+    readdirp: "npm:^4.0.1"
+  checksum: 10c0/a58b9df05bb452f7d105d9e7229ac82fa873741c0c40ddcc7bb82f8a909fbe3f7814c9ebe9bc9a2bef9b737c0ec6e2d699d179048ef06ad3ec46315df0ebe6ad
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^3.3.1, chokidar@npm:^3.4.0, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
@@ -10029,15 +11035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^4.0.0, chokidar@npm:^4.0.1":
-  version: 4.0.3
-  resolution: "chokidar@npm:4.0.3"
-  dependencies:
-    readdirp: "npm:^4.0.1"
-  checksum: 10c0/a58b9df05bb452f7d105d9e7229ac82fa873741c0c40ddcc7bb82f8a909fbe3f7814c9ebe9bc9a2bef9b737c0ec6e2d699d179048ef06ad3ec46315df0ebe6ad
-  languageName: node
-  linkType: hard
-
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -10222,6 +11219,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"code-block-writer@npm:^13.0.3":
+  version: 13.0.3
+  resolution: "code-block-writer@npm:13.0.3"
+  checksum: 10c0/87db97b37583f71cfd7eced8bf3f0a0a0ca53af912751a734372b36c08cd27f3e8a4878ec05591c0cd9ae11bea8add1423e132d660edd86aab952656dd41fd66
+  languageName: node
+  linkType: hard
+
 "collapse-white-space@npm:^1.0.2":
   version: 1.0.6
   resolution: "collapse-white-space@npm:1.0.6"
@@ -10439,6 +11443,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"confbox@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "confbox@npm:0.1.8"
+  checksum: 10c0/fc2c68d97cb54d885b10b63e45bd8da83a8a71459d3ecf1825143dd4c7f9f1b696b3283e07d9d12a144c1301c2ebc7842380bdf0014e55acc4ae1c9550102418
+  languageName: node
+  linkType: hard
+
 "confusing-browser-globals@npm:^1.0.10":
   version: 1.0.11
   resolution: "confusing-browser-globals@npm:1.0.11"
@@ -10686,6 +11697,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crosspath@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "crosspath@npm:2.0.0"
+  dependencies:
+    "@types/node": "npm:^17.0.36"
+  checksum: 10c0/fa8895d9aab8ea249243661147687556b86b42c11e922d5a2a068df073a32b7ed374f8c2423b20fd8f236a9b6aac09dc39beefef7d2617700bde6be9c5509fe5
+  languageName: node
+  linkType: hard
+
 "css-declaration-sorter@npm:^7.2.0":
   version: 7.2.0
   resolution: "css-declaration-sorter@npm:7.2.0"
@@ -10946,12 +11966,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssnano-utils@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "cssnano-utils@npm:5.0.1"
+"cssnano-utils@npm:^5.0.0, cssnano-utils@npm:^5.0.1":
+  version: 5.0.3
+  resolution: "cssnano-utils@npm:5.0.3"
   peerDependencies:
-    postcss: ^8.4.32
-  checksum: 10c0/e416e58587ccec4d904093a2834c66c44651578a58960019884add376d4f151c5b809674108088140dd57b0787cb7132a083d40ae33a72bf986d03c4b7b7c5f4
+    postcss: ^8.5.13
+  checksum: 10c0/ea78fb1e9aa1b149da01ec14f0e982173dfa00f72c9278f3bc247f9fb0ab4a1da3b2342d6e3aa4a800b9b5c404a67296140b730cbaa0e6a8d9a0ddc11cd2813d
   languageName: node
   linkType: hard
 
@@ -11655,10 +12675,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.5.263":
-  version: 1.5.321
-  resolution: "electron-to-chromium@npm:1.5.321"
-  checksum: 10c0/1272703857b8ac9868a75d495c141b71bad36adcb0df53393196da3819012fa2596ba48fccac750bdcb746a523d2a33543b36e9dc0ae727a55e7a6f00b2b155a
+"electron-to-chromium@npm:^1.5.263, electron-to-chromium@npm:^1.5.4":
+  version: 1.5.396
+  resolution: "electron-to-chromium@npm:1.5.396"
+  checksum: 10c0/2ac1d007acae6466649c2ada1f147fa205d980fc01bc602da00823b64a88b4286138a71c7b145f67dfa9103f69fd884bf706395a72886358d8f231a7011a39e5
   languageName: node
   linkType: hard
 
@@ -12119,6 +13139,182 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.21.3":
+  version: 0.21.5
+  resolution: "esbuild@npm:0.21.5"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.21.5"
+    "@esbuild/android-arm": "npm:0.21.5"
+    "@esbuild/android-arm64": "npm:0.21.5"
+    "@esbuild/android-x64": "npm:0.21.5"
+    "@esbuild/darwin-arm64": "npm:0.21.5"
+    "@esbuild/darwin-x64": "npm:0.21.5"
+    "@esbuild/freebsd-arm64": "npm:0.21.5"
+    "@esbuild/freebsd-x64": "npm:0.21.5"
+    "@esbuild/linux-arm": "npm:0.21.5"
+    "@esbuild/linux-arm64": "npm:0.21.5"
+    "@esbuild/linux-ia32": "npm:0.21.5"
+    "@esbuild/linux-loong64": "npm:0.21.5"
+    "@esbuild/linux-mips64el": "npm:0.21.5"
+    "@esbuild/linux-ppc64": "npm:0.21.5"
+    "@esbuild/linux-riscv64": "npm:0.21.5"
+    "@esbuild/linux-s390x": "npm:0.21.5"
+    "@esbuild/linux-x64": "npm:0.21.5"
+    "@esbuild/netbsd-x64": "npm:0.21.5"
+    "@esbuild/openbsd-x64": "npm:0.21.5"
+    "@esbuild/sunos-x64": "npm:0.21.5"
+    "@esbuild/win32-arm64": "npm:0.21.5"
+    "@esbuild/win32-ia32": "npm:0.21.5"
+    "@esbuild/win32-x64": "npm:0.21.5"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/fa08508adf683c3f399e8a014a6382a6b65542213431e26206c0720e536b31c09b50798747c2a105a4bbba1d9767b8d3615a74c2f7bf1ddf6d836cd11eb672de
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.25.1":
+  version: 0.25.12
+  resolution: "esbuild@npm:0.25.12"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.12"
+    "@esbuild/android-arm": "npm:0.25.12"
+    "@esbuild/android-arm64": "npm:0.25.12"
+    "@esbuild/android-x64": "npm:0.25.12"
+    "@esbuild/darwin-arm64": "npm:0.25.12"
+    "@esbuild/darwin-x64": "npm:0.25.12"
+    "@esbuild/freebsd-arm64": "npm:0.25.12"
+    "@esbuild/freebsd-x64": "npm:0.25.12"
+    "@esbuild/linux-arm": "npm:0.25.12"
+    "@esbuild/linux-arm64": "npm:0.25.12"
+    "@esbuild/linux-ia32": "npm:0.25.12"
+    "@esbuild/linux-loong64": "npm:0.25.12"
+    "@esbuild/linux-mips64el": "npm:0.25.12"
+    "@esbuild/linux-ppc64": "npm:0.25.12"
+    "@esbuild/linux-riscv64": "npm:0.25.12"
+    "@esbuild/linux-s390x": "npm:0.25.12"
+    "@esbuild/linux-x64": "npm:0.25.12"
+    "@esbuild/netbsd-arm64": "npm:0.25.12"
+    "@esbuild/netbsd-x64": "npm:0.25.12"
+    "@esbuild/openbsd-arm64": "npm:0.25.12"
+    "@esbuild/openbsd-x64": "npm:0.25.12"
+    "@esbuild/openharmony-arm64": "npm:0.25.12"
+    "@esbuild/sunos-x64": "npm:0.25.12"
+    "@esbuild/win32-arm64": "npm:0.25.12"
+    "@esbuild/win32-ia32": "npm:0.25.12"
+    "@esbuild/win32-x64": "npm:0.25.12"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/openharmony-arm64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/c205357531423220a9de8e1e6c6514242bc9b1666e762cd67ccdf8fdfdc3f1d0bd76f8d9383958b97ad4c953efdb7b6e8c1f9ca5951cd2b7c5235e8755b34a6b
+  languageName: node
+  linkType: hard
+
+"escalade@npm:3.1.2":
+  version: 3.1.2
+  resolution: "escalade@npm:3.1.2"
+  checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1, escalade@npm:^3.2.0":
   version: 3.2.0
   resolution: "escalade@npm:3.2.0"
@@ -12862,7 +14058,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fdir@npm:^6.5.0":
+"fdir@npm:^6.4.3, fdir@npm:^6.5.0":
   version: 6.5.0
   resolution: "fdir@npm:6.5.0"
   peerDependencies:
@@ -13253,6 +14449,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:11.2.0, fs-extra@npm:^11.1.0":
+  version: 11.2.0
+  resolution: "fs-extra@npm:11.2.0"
+  dependencies:
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^6.0.1"
+    universalify: "npm:^2.0.0"
+  checksum: 10c0/d77a9a9efe60532d2e790e938c81a02c1b24904ef7a3efb3990b835514465ba720e99a6ea56fd5e2db53b4695319b644d76d5a0e9988a2beef80aa7b1da63398
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:9.1.0":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
@@ -13276,17 +14483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^11.1.0":
-  version: 11.2.0
-  resolution: "fs-extra@npm:11.2.0"
-  dependencies:
-    graceful-fs: "npm:^4.2.0"
-    jsonfile: "npm:^6.0.1"
-    universalify: "npm:^2.0.0"
-  checksum: 10c0/d77a9a9efe60532d2e790e938c81a02c1b24904ef7a3efb3990b835514465ba720e99a6ea56fd5e2db53b4695319b644d76d5a0e9988a2beef80aa7b1da63398
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^8.1.0":
   version: 8.1.0
   resolution: "fs-extra@npm:8.1.0"
@@ -13347,7 +14543,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.3.2, fsevents@npm:^2.3.3, fsevents@npm:~2.3.2":
+"fsevents@npm:^2.3.2, fsevents@npm:^2.3.3, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
   dependencies:
@@ -13366,7 +14562,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A^2.3.3#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
+"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A^2.3.3#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
   dependencies:
@@ -13603,6 +14799,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob-parent@npm:6.0.2, glob-parent@npm:^6.0.1, glob-parent@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "glob-parent@npm:6.0.2"
+  dependencies:
+    is-glob: "npm:^4.0.3"
+  checksum: 10c0/317034d88654730230b3f43bb7ad4f7c90257a426e872ea0bf157473ac61c99bf5d205fad8f0185f989be8d2fa6d3c7dce1645d99d545b6ea9089c39f838e7f8
+  languageName: node
+  linkType: hard
+
 "glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -13612,15 +14817,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^6.0.1, glob-parent@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "glob-parent@npm:6.0.2"
-  dependencies:
-    is-glob: "npm:^4.0.3"
-  checksum: 10c0/317034d88654730230b3f43bb7ad4f7c90257a426e872ea0bf157473ac61c99bf5d205fad8f0185f989be8d2fa6d3c7dce1645d99d545b6ea9089c39f838e7f8
-  languageName: node
-  linkType: hard
-
 "glob-to-regexp@npm:^0.4.1":
   version: 0.4.1
   resolution: "glob-to-regexp@npm:0.4.1"
@@ -13935,6 +15131,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hookable@npm:5.5.3":
+  version: 5.5.3
+  resolution: "hookable@npm:5.5.3"
+  checksum: 10c0/275f4cc84d27f8d48c5a5cd5685b6c0fea9291be9deea5bff0cfa72856ed566abde1dcd8cb1da0f9a70b4da3d7ec0d60dc3554c4edbba647058cc38816eced3d
+  languageName: node
+  linkType: hard
+
 "hosted-git-info@npm:^4.0.1":
   version: 4.1.0
   resolution: "hosted-git-info@npm:4.1.0"
@@ -14678,7 +15881,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
+"is-glob@npm:4.0.3, is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -14914,6 +16117,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-what@npm:^4.1.8":
+  version: 4.1.16
+  resolution: "is-what@npm:4.1.16"
+  checksum: 10c0/611f1947776826dcf85b57cfb7bd3b3ea6f4b94a9c2f551d4a53f653cf0cb9d1e6518846648256d46ee6c91d114b6d09d2ac8a07306f7430c5900f87466aae5b
+  languageName: node
+  linkType: hard
+
 "is-whitespace-character@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-whitespace-character@npm:1.0.4"
@@ -15148,6 +16358,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"javascript-stringify@npm:2.1.0":
+  version: 2.1.0
+  resolution: "javascript-stringify@npm:2.1.0"
+  checksum: 10c0/374e74ebff29b94de78da39daa6e530999c58a145aeb293dc21180c4584459b14d9e5721d9bc6ed4eba319c437ef0145c157c946b70ecddcff6668682a002bcc
+  languageName: node
+  linkType: hard
+
 "jest-changed-files@npm:30.3.0":
   version: 30.3.0
   resolution: "jest-changed-files@npm:30.3.0"
@@ -16360,6 +17577,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"kleur@npm:4.1.5":
+  version: 4.1.5
+  resolution: "kleur@npm:4.1.5"
+  checksum: 10c0/e9de6cb49657b6fa70ba2d1448fd3d691a5c4370d8f7bbf1c2f64c24d461270f2117e1b0afe8cb3114f13bbd8e51de158c2a224953960331904e636a5e4c0f2a
+  languageName: node
+  linkType: hard
+
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -16483,9 +17707,109 @@ __metadata:
   peerDependenciesMeta:
     webpack:
       optional: true
-    webpack-sources:
+    webpack-sources:
+      optional: true
+  checksum: 10c0/6014492b22c5f28a4d367057b5b2c1214b83c73785157fea130d5b877b50ed8820d8d8e73e96b3437c455b5b5c6817b36837da093239f95b534be43c0cdcfedc
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-darwin-arm64@npm:1.25.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-darwin-x64@npm:1.25.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-freebsd-x64@npm:1.25.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.25.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.25.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-linux-arm64-musl@npm:1.25.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-linux-x64-gnu@npm:1.25.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-linux-x64-musl@npm:1.25.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss-win32-x64-msvc@npm:1.25.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.25.1":
+  version: 1.25.1
+  resolution: "lightningcss@npm:1.25.1"
+  dependencies:
+    detect-libc: "npm:^1.0.3"
+    lightningcss-darwin-arm64: "npm:1.25.1"
+    lightningcss-darwin-x64: "npm:1.25.1"
+    lightningcss-freebsd-x64: "npm:1.25.1"
+    lightningcss-linux-arm-gnueabihf: "npm:1.25.1"
+    lightningcss-linux-arm64-gnu: "npm:1.25.1"
+    lightningcss-linux-arm64-musl: "npm:1.25.1"
+    lightningcss-linux-x64-gnu: "npm:1.25.1"
+    lightningcss-linux-x64-musl: "npm:1.25.1"
+    lightningcss-win32-x64-msvc: "npm:1.25.1"
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
       optional: true
-  checksum: 10c0/6014492b22c5f28a4d367057b5b2c1214b83c73785157fea130d5b877b50ed8820d8d8e73e96b3437c455b5b5c6817b36837da093239f95b534be43c0cdcfedc
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10c0/143a412dfd3393804c9dedac4294d7d54752dd589eb9ba43e3548bd6b0f9d73765b2b4cc0c62fae767c96d5d532a64d7fdfabd8b299caf733160a751cbb28297
   languageName: node
   linkType: hard
 
@@ -16643,13 +17967,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.merge@npm:^4.6.2":
+"lodash.merge@npm:4.6.2, lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
   checksum: 10c0/402fa16a1edd7538de5b5903a90228aa48eb5533986ba7fa26606a49db2572bf414ff73a2c9f5d5fd36b31c46a5d5c7e1527749c07cbcf965ccff5fbdf32c506
   languageName: node
   linkType: hard
 
+"lodash.truncate@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "lodash.truncate@npm:4.4.2"
+  checksum: 10c0/4e870d54e8a6c86c8687e057cec4069d2e941446ccab7f40b4d9555fa5872d917d0b6aa73bece7765500a3123f1723bcdba9ae881b679ef120bba9e1a0b0ed70
+  languageName: node
+  linkType: hard
+
 "lodash.uniq@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.uniq@npm:4.5.0"
@@ -16721,6 +18052,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"look-it-up@npm:2.1.0":
+  version: 2.1.0
+  resolution: "look-it-up@npm:2.1.0"
+  checksum: 10c0/de4aaed4d8b1d1967cfa7809d6e3414da1d45eaace9cf5a65428e3f967da676932ffb4cc59a9d0efbf1c1de26a14b10f5f66220bf276ad8803220c4f8f9ee3b4
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -16803,7 +18141,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.3, magic-string@npm:^0.30.5":
+"magic-string@npm:0.30.17":
   version: 0.30.17
   resolution: "magic-string@npm:0.30.17"
   dependencies:
@@ -16812,6 +18150,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.3, magic-string@npm:^0.30.5, magic-string@npm:^0.30.6":
+  version: 0.30.21
+  resolution: "magic-string@npm:0.30.21"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+  checksum: 10c0/299378e38f9a270069fc62358522ddfb44e94244baa0d6a8980ab2a9b2490a1d03b236b447eee309e17eb3bddfa482c61259d47960eb018a904f0ded52780c4a
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^2.1.0":
   version: 2.1.0
   resolution: "make-dir@npm:2.1.0"
@@ -17041,6 +18388,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"merge-anything@npm:5.1.7":
+  version: 5.1.7
+  resolution: "merge-anything@npm:5.1.7"
+  dependencies:
+    is-what: "npm:^4.1.8"
+  checksum: 10c0/1820c8dfa5da65de1829b5e9adb65d1685ec4bc5d358927cacd20a9917eff9448f383f937695f4dbd2162b152faf41ce24187a931621839ee8a8b3c306a65136
+  languageName: node
+  linkType: hard
+
 "merge-descriptors@npm:1.0.3":
   version: 1.0.3
   resolution: "merge-descriptors@npm:1.0.3"
@@ -17069,6 +18425,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"microdiff@npm:1.3.2":
+  version: 1.3.2
+  resolution: "microdiff@npm:1.3.2"
+  checksum: 10c0/4dba39ac6e12032748314ff298061ac10e04c07a8d99d4fe7ab25ddc3939aff10928657e41d1a330b9bb385c171c376e430820fa5483defcfc207771b0f22a16
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
@@ -17344,6 +18707,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mlly@npm:^1.2.0, mlly@npm:^1.7.4":
+  version: 1.8.2
+  resolution: "mlly@npm:1.8.2"
+  dependencies:
+    acorn: "npm:^8.16.0"
+    pathe: "npm:^2.0.3"
+    pkg-types: "npm:^1.3.1"
+    ufo: "npm:^1.6.3"
+  checksum: 10c0/aa826683a6daddf2aef65f9c8142e362731cf8e415a5591faf92fd51040a76697e45ab6dbb7a3b38be74e0f8c464825a7eabe827750455c7472421953f5da733
+  languageName: node
+  linkType: hard
+
 "motion-dom@npm:^11.18.1":
   version: 11.18.1
   resolution: "motion-dom@npm:11.18.1"
@@ -17412,12 +18787,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.11":
-  version: 3.3.11
-  resolution: "nanoid@npm:3.3.11"
+"nanoid@npm:^3.3.16, nanoid@npm:^3.3.7":
+  version: 3.3.16
+  resolution: "nanoid@npm:3.3.16"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 10c0/40e7f70b3d15f725ca072dfc4f74e81fcf1fbb02e491cf58ac0c79093adc9b0a73b152bcde57df4b79cd097e13023d7504acb38404a4da7bc1cd8e887b82fe0b
+  checksum: 10c0/bbf2dcffe22d2b62d16de2711752070b539c0f644c7916f823ad6521986b2078cbe524f2d6240f58c46e9141ea0c7b87a029e100c0f7f175228cacaf30e41bba
   languageName: node
   linkType: hard
 
@@ -17510,6 +18885,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-eval@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "node-eval@npm:2.0.0"
+  dependencies:
+    path-is-absolute: "npm:1.0.1"
+  checksum: 10c0/b8f178f7e0ec4ac05287c5a1ceedca1e4a49e3710eb57c0cfe6ce441f1b0b51c36089dc0aec7c6d199e54de63d1c92a00992b87fffac9ab4350c5a1f102bce55
+  languageName: node
+  linkType: hard
+
 "node-fetch@npm:2.7.0":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
@@ -17574,10 +18958,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.27":
-  version: 2.0.36
-  resolution: "node-releases@npm:2.0.36"
-  checksum: 10c0/85d8d7f4b6248c8372831cbcc3829ce634cb2b01dbd85e55705cefc8a9eda4ce8121bd218b9629cf2579aef8a360541bad409f3925a35675c825b9471a49d7e9
+"node-releases@npm:^2.0.18, node-releases@npm:^2.0.27":
+  version: 2.0.51
+  resolution: "node-releases@npm:2.0.51"
+  checksum: 10c0/6cf3fe1f9eabe02ce6de67e9db77b73edc9f5625003791e1f8f239f8e2a851450a5aeb1eff2cc43cfb26312e19b26bfe07626bf428479e6a76f56553fc6148da
   languageName: node
   linkType: hard
 
@@ -17850,6 +19234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-path@npm:^0.11.8":
+  version: 0.11.8
+  resolution: "object-path@npm:0.11.8"
+  checksum: 10c0/73b1f33bb30a7032d8cce2e3dcffd82b80a83d8304e80b4f83b4f456165625de9907f1ca7f7441d4dfb5e73429ace1e5bf9d9315636ac0aacc76392cc21d1672
+  languageName: node
+  linkType: hard
+
 "object.assign@npm:^4.1.2, object.assign@npm:^4.1.4, object.assign@npm:^4.1.5":
   version: 4.1.5
   resolution: "object.assign@npm:4.1.5"
@@ -18082,6 +19473,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"outdent@npm: ^0.8.0, outdent@npm:0.8.0":
+  version: 0.8.0
+  resolution: "outdent@npm:0.8.0"
+  checksum: 10c0/d8a6c38b838b7ac23ebf1cc50442312f4efe286b211dbe5c71fa84d5daa2512fb94a8f2df1389313465acb0b4e5fa72270dd78f519f3d4db5bc22b2762c86827
+  languageName: node
+  linkType: hard
+
 "oxc-resolver@npm:^11.6.1":
   version: 11.19.1
   resolution: "oxc-resolver@npm:11.19.1"
@@ -18301,6 +19699,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"package-manager-detector@npm:0.1.0":
+  version: 0.1.0
+  resolution: "package-manager-detector@npm:0.1.0"
+  checksum: 10c0/7d461515a8be38dbe13ac3d19d7774ab95d6795b177c890998511cda87e090ab1e65ee56dd2a66890802cbc2732c0c06c9402a7a1cdb64f7b615d9488b3ddb9c
+  languageName: node
+  linkType: hard
+
+"panda-mf-poc@workspace:spikes/panda-mf-poc":
+  version: 0.0.0-use.local
+  resolution: "panda-mf-poc@workspace:spikes/panda-mf-poc"
+  dependencies:
+    "@pandacss/dev": "npm:^0.53.0"
+    "@rspack/core": "npm:^1.1.8"
+    "@types/react": "npm:18.3.27"
+    "@types/react-dom": "npm:18.3.1"
+    react: "npm:18.3.1"
+    react-dom: "npm:18.3.1"
+    typescript: "npm:5.9.3"
+  languageName: unknown
+  linkType: soft
+
+"panda-styling-poc@workspace:spikes/panda-styling-poc":
+  version: 0.0.0-use.local
+  resolution: "panda-styling-poc@workspace:spikes/panda-styling-poc"
+  dependencies:
+    "@codecademy/gamut-styles": "workspace:*"
+    "@codecademy/variance": "workspace:*"
+    "@pandacss/dev": "npm:^0.53.0"
+    "@types/react": "npm:18.3.27"
+    "@types/react-dom": "npm:18.3.1"
+    "@vitejs/plugin-react": "npm:^4.3.4"
+    react: "npm:18.3.1"
+    react-dom: "npm:18.3.1"
+    typescript: "npm:5.9.3"
+    vite: "npm:^5.4.11"
+  languageName: unknown
+  linkType: soft
+
 "param-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
@@ -18393,6 +19829,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-browserify@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "path-browserify@npm:1.0.1"
+  checksum: 10c0/8b8c3fd5c66bd340272180590ae4ff139769e9ab79522e2eb82e3d571a89b8117c04147f65ad066dccfb42fcad902e5b7d794b3d35e0fd840491a8ddbedf8c66
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-exists@npm:4.0.0"
@@ -18407,7 +19850,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-is-absolute@npm:^1.0.0":
+"path-is-absolute@npm:1.0.1, path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"
   checksum: 10c0/127da03c82172a2a50099cddbf02510c1791fc2cc5f7713ddb613a56838db1e8168b121a920079d052e0936c23005562059756d653b7c544c53185efe53be078
@@ -18462,6 +19905,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^1.1.0":
+  version: 1.1.2
+  resolution: "pathe@npm:1.1.2"
+  checksum: 10c0/64ee0a4e587fb0f208d9777a6c56e4f9050039268faaaaecd50e959ef01bf847b7872785c36483fa5cdcdbdfdb31fef2ff222684d4fc21c330ab60395c681897
+  languageName: node
+  linkType: hard
+
+"pathe@npm:^2.0.1, pathe@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "pathe@npm:2.0.3"
+  checksum: 10c0/c118dc5a8b5c4166011b2b70608762e260085180bb9e33e80a50dcdb1e78c010b1624f4280c492c92b05fc276715a4c357d1f9edc570f8f1b3d90b6839ebaca1
+  languageName: node
+  linkType: hard
+
 "pathval@npm:^2.0.0":
   version: 2.0.1
   resolution: "pathval@npm:2.0.1"
@@ -18478,6 +19935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"perfect-debounce@npm:1.0.0":
+  version: 1.0.0
+  resolution: "perfect-debounce@npm:1.0.0"
+  checksum: 10c0/e2baac416cae046ef1b270812cf9ccfb0f91c04ea36ac7f5b00bc84cb7f41bdbba087c0ab21b4e02a7ef3a1f1f6db399f137cecec46868bd7d8d88c2a9ee431f
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -18561,6 +20025,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pkg-types@npm:1.0.3":
+  version: 1.0.3
+  resolution: "pkg-types@npm:1.0.3"
+  dependencies:
+    jsonc-parser: "npm:^3.2.0"
+    mlly: "npm:^1.2.0"
+    pathe: "npm:^1.1.0"
+  checksum: 10c0/7f692ff2005f51b8721381caf9bdbc7f5461506ba19c34f8631660a215c8de5e6dca268f23a319dd180b8f7c47a0dc6efea14b376c485ff99e98d810b8f786c4
+  languageName: node
+  linkType: hard
+
+"pkg-types@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "pkg-types@npm:1.3.1"
+  dependencies:
+    confbox: "npm:^0.1.8"
+    mlly: "npm:^1.7.4"
+    pathe: "npm:^2.0.1"
+  checksum: 10c0/19e6cb8b66dcc66c89f2344aecfa47f2431c988cfa3366bdfdcfb1dd6695f87dcce37fbd90fe9d1605e2f4440b77f391e83c23255347c35cf84e7fd774d7fcea
+  languageName: node
+  linkType: hard
+
 "playwright-core@npm:1.58.2, playwright-core@npm:>=1.2.0":
   version: 1.58.2
   resolution: "playwright-core@npm:1.58.2"
@@ -18585,6 +20071,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pluralize@npm:8.0.0":
+  version: 8.0.0
+  resolution: "pluralize@npm:8.0.0"
+  checksum: 10c0/2044cfc34b2e8c88b73379ea4a36fc577db04f651c2909041b054c981cd863dd5373ebd030123ab058d194ae615d3a97cfdac653991e499d10caf592e8b3dc33
+  languageName: node
+  linkType: hard
+
 "polished@npm:^4.1.2":
   version: 4.3.1
   resolution: "polished@npm:4.3.1"
@@ -18661,6 +20154,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-discard-duplicates@npm:7.0.1":
+  version: 7.0.1
+  resolution: "postcss-discard-duplicates@npm:7.0.1"
+  peerDependencies:
+    postcss: ^8.4.31
+  checksum: 10c0/5cc2cac249f68004864865ea2ec38b7d5e28184f33e904e531ff57b533aacb73ec49e4a7d83219184001b8d167e5bcabc1673248134468d7ebaa0bfb9ff78f0a
+  languageName: node
+  linkType: hard
+
 "postcss-discard-duplicates@npm:^7.0.2":
   version: 7.0.2
   resolution: "postcss-discard-duplicates@npm:7.0.2"
@@ -18670,6 +20172,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-discard-empty@npm:7.0.0":
+  version: 7.0.0
+  resolution: "postcss-discard-empty@npm:7.0.0"
+  peerDependencies:
+    postcss: ^8.4.31
+  checksum: 10c0/b54fc9ad59a6015f6b82b8c826717a4a2f82b272608f6ae37a0b568f4f6c503f5ac7d13d415853a946a0422cb37b9fe1d5ddcee91fe0c2086001138710600d8b
+  languageName: node
+  linkType: hard
+
 "postcss-discard-empty@npm:^7.0.1":
   version: 7.0.1
   resolution: "postcss-discard-empty@npm:7.0.1"
@@ -18727,6 +20238,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-merge-rules@npm:7.0.4":
+  version: 7.0.4
+  resolution: "postcss-merge-rules@npm:7.0.4"
+  dependencies:
+    browserslist: "npm:^4.23.3"
+    caniuse-api: "npm:^3.0.0"
+    cssnano-utils: "npm:^5.0.0"
+    postcss-selector-parser: "npm:^6.1.2"
+  peerDependencies:
+    postcss: ^8.4.31
+  checksum: 10c0/fffdcef4ada68e92ab8e6dc34a3b9aa2b87188cd4d08f5ba0ff2aff7e3e3c7f086830748ff64db091b5ccb9ac59ac37cfaab1268ed3efb50ab9c4f3714eb5f6d
+  languageName: node
+  linkType: hard
+
 "postcss-merge-rules@npm:^7.0.8":
   version: 7.0.8
   resolution: "postcss-merge-rules@npm:7.0.8"
@@ -18778,6 +20303,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-minify-selectors@npm:7.0.4":
+  version: 7.0.4
+  resolution: "postcss-minify-selectors@npm:7.0.4"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    postcss-selector-parser: "npm:^6.1.2"
+  peerDependencies:
+    postcss: ^8.4.31
+  checksum: 10c0/212b8f3d62eb2a27ed57d4e76b75b0886806ddb9e2497c0bb79308fa75dabaaaa4ed2b97734896e87603272d05231fd74aee2c256a48d77aa468b5b64cc7866a
+  languageName: node
+  linkType: hard
+
 "postcss-minify-selectors@npm:^7.0.6":
   version: 7.0.6
   resolution: "postcss-minify-selectors@npm:7.0.6"
@@ -18852,6 +20389,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-nested@npm:6.0.1":
+  version: 6.0.1
+  resolution: "postcss-nested@npm:6.0.1"
+  dependencies:
+    postcss-selector-parser: "npm:^6.0.11"
+  peerDependencies:
+    postcss: ^8.2.14
+  checksum: 10c0/2a50aa36d5d103c2e471954830489f4c024deed94fa066169101db55171368d5f80b32446b584029e0471feee409293d0b6b1d8ede361f6675ba097e477b3cbd
+  languageName: node
+  linkType: hard
+
 "postcss-normalize-charset@npm:^7.0.1":
   version: 7.0.1
   resolution: "postcss-normalize-charset@npm:7.0.1"
@@ -18939,6 +20487,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-normalize-whitespace@npm:7.0.0":
+  version: 7.0.0
+  resolution: "postcss-normalize-whitespace@npm:7.0.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.4.31
+  checksum: 10c0/8d61234962a4850fc61292592171e1d13de2e90d96a2eaed8c85672a05caceda02a3bd1cb495cb72414741f99d50083362df14923efaca1b3e09657d24cea34b
+  languageName: node
+  linkType: hard
+
 "postcss-normalize-whitespace@npm:^7.0.1":
   version: 7.0.1
   resolution: "postcss-normalize-whitespace@npm:7.0.1"
@@ -18985,6 +20544,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:6.1.2":
+  version: 6.1.2
+  resolution: "postcss-selector-parser@npm:6.1.2"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/523196a6bd8cf660bdf537ad95abd79e546d54180f9afb165a4ab3e651ac705d0f8b8ce6b3164fb9e3279ce482c5f751a69eb2d3a1e8eb0fd5e82294fb3ef13e
+  languageName: node
+  linkType: hard
+
+"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.1.2":
+  version: 6.1.4
+  resolution: "postcss-selector-parser@npm:6.1.4"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/996f3290dee08ecb073d5f396d1134e619494cfd83140aec07a29618ee1e76d370769a8959d4c0cfefb24aa96dcffa4e7c4937dd881e03b735d50cba959ceb19
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^7.0.0, postcss-selector-parser@npm:^7.1.1":
   version: 7.1.1
   resolution: "postcss-selector-parser@npm:7.1.1"
@@ -19025,14 +20604,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.40":
-  version: 8.5.8
-  resolution: "postcss@npm:8.5.8"
+"postcss@npm:8.4.49":
+  version: 8.4.49
+  resolution: "postcss@npm:8.4.49"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/f1b3f17aaf36d136f59ec373459f18129908235e65dbdc3aee5eef8eba0756106f52de5ec4682e29a2eab53eb25170e7e871b3e4b52a8f1de3d344a514306be3
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.40, postcss@npm:^8.4.43":
+  version: 8.5.22
+  resolution: "postcss@npm:8.5.22"
   dependencies:
-    nanoid: "npm:^3.3.11"
+    nanoid: "npm:^3.3.16"
     picocolors: "npm:^1.1.1"
     source-map-js: "npm:^1.2.1"
-  checksum: 10c0/dd918f7127ee7c60a0295bae2e72b3787892296e1d1c3c564d7a2a00c68d8df83cadc3178491259daa19ccc54804fb71ed8c937c6787e08d8bd4bedf8d17044c
+  checksum: 10c0/9e143ee457988049d5f187116fd37f2750ae9d8d71cc99eae690b776e549e134b34086cbaa2f0360ecd1729b15d918227bd0fc3a2ffbe341f7212d0827080793
   languageName: node
   linkType: hard
 
@@ -19043,6 +20633,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:3.2.5":
+  version: 3.2.5
+  resolution: "prettier@npm:3.2.5"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10c0/ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6
+  languageName: node
+  linkType: hard
+
 "prettier@npm:^2.1.2, prettier@npm:^2.8.7":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
@@ -19558,6 +21157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-refresh@npm:^0.17.0":
+  version: 0.17.0
+  resolution: "react-refresh@npm:0.17.0"
+  checksum: 10c0/002cba940384c9930008c0bce26cac97a9d5682bc623112c2268ba0c155127d9c178a9a5cc2212d560088d60dfd503edd808669a25f9b377f316a32361d0b23c
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll-bar@npm:^2.3.7":
   version: 2.3.8
   resolution: "react-remove-scroll-bar@npm:2.3.8"
@@ -20300,31 +21906,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.14.0":
-  version: 4.47.1
-  resolution: "rollup@npm:4.47.1"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.47.1"
-    "@rollup/rollup-android-arm64": "npm:4.47.1"
-    "@rollup/rollup-darwin-arm64": "npm:4.47.1"
-    "@rollup/rollup-darwin-x64": "npm:4.47.1"
-    "@rollup/rollup-freebsd-arm64": "npm:4.47.1"
-    "@rollup/rollup-freebsd-x64": "npm:4.47.1"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.47.1"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.47.1"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.47.1"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.47.1"
-    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.47.1"
-    "@rollup/rollup-linux-ppc64-gnu": "npm:4.47.1"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.47.1"
-    "@rollup/rollup-linux-riscv64-musl": "npm:4.47.1"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.47.1"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.47.1"
-    "@rollup/rollup-linux-x64-musl": "npm:4.47.1"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.47.1"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.47.1"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.47.1"
-    "@types/estree": "npm:1.0.8"
+"rollup@npm:^4.14.0, rollup@npm:^4.20.0":
+  version: 4.62.2
+  resolution: "rollup@npm:4.62.2"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.62.2"
+    "@rollup/rollup-android-arm64": "npm:4.62.2"
+    "@rollup/rollup-darwin-arm64": "npm:4.62.2"
+    "@rollup/rollup-darwin-x64": "npm:4.62.2"
+    "@rollup/rollup-freebsd-arm64": "npm:4.62.2"
+    "@rollup/rollup-freebsd-x64": "npm:4.62.2"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.62.2"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.62.2"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.62.2"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.62.2"
+    "@rollup/rollup-linux-loong64-gnu": "npm:4.62.2"
+    "@rollup/rollup-linux-loong64-musl": "npm:4.62.2"
+    "@rollup/rollup-linux-ppc64-gnu": "npm:4.62.2"
+    "@rollup/rollup-linux-ppc64-musl": "npm:4.62.2"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.62.2"
+    "@rollup/rollup-linux-riscv64-musl": "npm:4.62.2"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.62.2"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.62.2"
+    "@rollup/rollup-linux-x64-musl": "npm:4.62.2"
+    "@rollup/rollup-openbsd-x64": "npm:4.62.2"
+    "@rollup/rollup-openharmony-arm64": "npm:4.62.2"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.62.2"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.62.2"
+    "@rollup/rollup-win32-x64-gnu": "npm:4.62.2"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.62.2"
+    "@types/estree": "npm:1.0.9"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
     "@rollup/rollup-android-arm-eabi":
@@ -20347,10 +21958,14 @@ __metadata:
       optional: true
     "@rollup/rollup-linux-arm64-musl":
       optional: true
-    "@rollup/rollup-linux-loongarch64-gnu":
+    "@rollup/rollup-linux-loong64-gnu":
+      optional: true
+    "@rollup/rollup-linux-loong64-musl":
       optional: true
     "@rollup/rollup-linux-ppc64-gnu":
       optional: true
+    "@rollup/rollup-linux-ppc64-musl":
+      optional: true
     "@rollup/rollup-linux-riscv64-gnu":
       optional: true
     "@rollup/rollup-linux-riscv64-musl":
@@ -20361,17 +21976,23 @@ __metadata:
       optional: true
     "@rollup/rollup-linux-x64-musl":
       optional: true
+    "@rollup/rollup-openbsd-x64":
+      optional: true
+    "@rollup/rollup-openharmony-arm64":
+      optional: true
     "@rollup/rollup-win32-arm64-msvc":
       optional: true
     "@rollup/rollup-win32-ia32-msvc":
       optional: true
+    "@rollup/rollup-win32-x64-gnu":
+      optional: true
     "@rollup/rollup-win32-x64-msvc":
       optional: true
     fsevents:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10c0/4d792f8a8bfb4408485bbc6c1f393a88422230c14d06b9de4d27bcf443fe3569f9fa4ed6111972bf6b8b515bd0133bfeb16ab66cdf32494ef0fbd2da41dc2855
+  checksum: 10c0/83ff5f4a1fea3fa05db2ef56beceee8c33d4a72b818e19c562f1e85c41076fe5b12aadc44048bb73e60b83336df82154b017fa6bf0186f3141643e6f215fbdcb
   languageName: node
   linkType: hard
 
@@ -21057,6 +22678,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slice-ansi@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "slice-ansi@npm:4.0.0"
+  dependencies:
+    ansi-styles: "npm:^4.0.0"
+    astral-regex: "npm:^2.0.0"
+    is-fullwidth-code-point: "npm:^3.0.0"
+  checksum: 10c0/6c25678db1270d4793e0327620f1e0f9f5bea4630123f51e9e399191bc52c87d6e6de53ed33538609e5eacbd1fab769fae00f3705d08d029f02102a540648918
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^7.1.0":
   version: 7.1.2
   resolution: "slice-ansi@npm:7.1.2"
@@ -21954,6 +23586,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"table@npm:6.9.0":
+  version: 6.9.0
+  resolution: "table@npm:6.9.0"
+  dependencies:
+    ajv: "npm:^8.0.1"
+    lodash.truncate: "npm:^4.4.2"
+    slice-ansi: "npm:^4.0.0"
+    string-width: "npm:^4.2.3"
+    strip-ansi: "npm:^6.0.1"
+  checksum: 10c0/35646185712bb65985fbae5975dda46696325844b78735f95faefae83e86df0a265277819a3e67d189de6e858c509b54e66ca3958ffd51bde56ef1118d455bf4
+  languageName: node
+  linkType: hard
+
 "tapable@npm:2.3.0, tapable@npm:^2.0.0, tapable@npm:^2.2.1, tapable@npm:^2.3.0":
   version: 2.3.0
   resolution: "tapable@npm:2.3.0"
@@ -22105,7 +23750,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.12":
+"tinyglobby@npm:0.2.12":
+  version: 0.2.12
+  resolution: "tinyglobby@npm:0.2.12"
+  dependencies:
+    fdir: "npm:^6.4.3"
+    picomatch: "npm:^4.0.2"
+  checksum: 10c0/7c9be4fd3625630e262dcb19015302aad3b4ba7fc620f269313e688f2161ea8724d6cb4444baab5ef2826eb6bed72647b169a33ec8eea37501832a2526ff540f
+  languageName: node
+  linkType: hard
+
+"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.9":
   version: 0.2.17
   resolution: "tinyglobby@npm:0.2.17"
   dependencies:
@@ -22263,6 +23918,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-evaluator@npm:1.2.0":
+  version: 1.2.0
+  resolution: "ts-evaluator@npm:1.2.0"
+  dependencies:
+    ansi-colors: "npm:^4.1.3"
+    crosspath: "npm:^2.0.0"
+    object-path: "npm:^0.11.8"
+  peerDependencies:
+    jsdom: ">=14.x || >=15.x || >=16.x || >=17.x || >=18.x || >=19.x || >=20.x || >=21.x || >=22.x"
+    typescript: ">=3.2.x || >= 4.x || >= 5.x"
+  peerDependenciesMeta:
+    jsdom:
+      optional: true
+  checksum: 10c0/6f53e0b767c15ca3ab0e3428a8b5fbf9f7c9aa8df0354c2edeebb754566c12f9d832c1ee9277fd08f499fc7f91a9b8e22d4106f53058df78dba7dc3990620e44
+  languageName: node
+  linkType: hard
+
 "ts-jest@npm:29.1.1":
   version: 29.1.1
   resolution: "ts-jest@npm:29.1.1"
@@ -22312,6 +23984,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-morph@npm:24.0.0":
+  version: 24.0.0
+  resolution: "ts-morph@npm:24.0.0"
+  dependencies:
+    "@ts-morph/common": "npm:~0.25.0"
+    code-block-writer: "npm:^13.0.3"
+  checksum: 10c0/2a0813ba428a154966d4038901f6c32457a60870936b23778f2629433257f87d1881fc4ecae7b791a223a88c2edf96aaac9fb0f88bf34d3c652af8c09c4f43bc
+  languageName: node
+  linkType: hard
+
 "ts-node@npm:10.9.1":
   version: 10.9.1
   resolution: "ts-node@npm:10.9.1"
@@ -22350,6 +24032,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-pattern@npm:5.0.8":
+  version: 5.0.8
+  resolution: "ts-pattern@npm:5.0.8"
+  checksum: 10c0/c0767f4a4ce960cc87e69274f750d4672e37e865b779f8aed472fb22566baaedd584caf7dfd454905c25138aabe88f3abb5c2351487b223e822a3affae9611eb
+  languageName: node
+  linkType: hard
+
 "ts-toolbelt@npm:9.6.0":
   version: 9.6.0
   resolution: "ts-toolbelt@npm:9.6.0"
@@ -22357,6 +24046,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsconfck@npm:3.0.2":
+  version: 3.0.2
+  resolution: "tsconfck@npm:3.0.2"
+  peerDependencies:
+    typescript: ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: 10c0/8489244d9e8c0ed4e32b3f5b26151e2ea4204d2c8dd5ed770a8d892b4fba3ba415f4cd3ae9bed4f245d4426de0477bc11fbbce287ba1adfaa1fa0d4e7bae252e
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths-webpack-plugin@npm:4.2.0":
   version: 4.2.0
   resolution: "tsconfig-paths-webpack-plugin@npm:4.2.0"
@@ -22546,6 +24249,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:5.6.2":
+  version: 5.6.2
+  resolution: "typescript@npm:5.6.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/3ed8297a8c7c56b7fec282532503d1ac795239d06e7c4966b42d4330c6cf433a170b53bcf93a130a7f14ccc5235de5560df4f1045eb7f3550b46ebed16d3c5e5
+  languageName: node
+  linkType: hard
+
 "typescript@npm:5.9.3, typescript@npm:~5.9.2":
   version: 5.9.3
   resolution: "typescript@npm:5.9.3"
@@ -22556,6 +24269,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>":
+  version: 5.6.2
+  resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>::version=5.6.2&hash=8c6c40"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/94eb47e130d3edd964b76da85975601dcb3604b0c848a36f63ac448d0104e93819d94c8bdf6b07c00120f2ce9c05256b8b6092d23cf5cf1c6fa911159e4d572f
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A~5.9.2#optional!builtin<compat/typescript>":
   version: 5.9.3
   resolution: "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>::version=5.9.3&hash=5786d5"
@@ -22566,6 +24289,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ufo@npm:^1.6.3":
+  version: 1.6.4
+  resolution: "ufo@npm:1.6.4"
+  checksum: 10c0/3a2b29e7e3d772fbf6893d7d23bf442981457adb2fe122828abdbda89bedcb81aafd0dcc080e41b45f9a877db00cb42cbfee9639753a19d9b9bd39b5627039cf
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"
@@ -22848,7 +24578,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.2.0":
+"update-browserslist-db@npm:^1.1.0, update-browserslist-db@npm:^1.2.0":
   version: 1.2.3
   resolution: "update-browserslist-db@npm:1.2.3"
   dependencies:
@@ -23060,6 +24790,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^5.4.11":
+  version: 5.4.21
+  resolution: "vite@npm:5.4.21"
+  dependencies:
+    esbuild: "npm:^0.21.3"
+    fsevents: "npm:~2.3.3"
+    postcss: "npm:^8.4.43"
+    rollup: "npm:^4.20.0"
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    sass-embedded: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10c0/468336a1409f728b464160cbf02672e72271fb688d0e605e776b74a89d27e1029509eef3a3a6c755928d8011e474dbf234824d054d07960be5f23cd176bc72de
+  languageName: node
+  linkType: hard
+
 "w3c-xmlserializer@npm:^4.0.0":
   version: 4.0.0
   resolution: "w3c-xmlserializer@npm:4.0.0"
@@ -23489,6 +25262,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wordwrapjs@npm:5.1.0":
+  version: 5.1.0
+  resolution: "wordwrapjs@npm:5.1.0"
+  checksum: 10c0/e147162f139eb8c05257729fde586f5422a2d242aa8f027b5fa5adead1b571b455d0690a15c73aeaa31c93ba96864caa06d84ebdb2c32a0890602ab86a7568d1
+  languageName: node
+  linkType: hard
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"