diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 73fbe0a..76e27fe 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -78,6 +78,17 @@ jobs:
       - run: bun run --filter @stackmap/site test
       - run: bun run --filter @stackmap/site typecheck
       - run: bun run --filter @stackmap/site build
+      - name: Site smoke against the production build
+        working-directory: site
+        run: |
+          bunx playwright install --with-deps chromium
+          bunx playwright test
+      - name: Upload site Playwright results on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: site-playwright-results
+          path: site/test-results/
 
   e2e:
     name: e2e · visual
diff --git a/bun.lock b/bun.lock
index e0a12ff..ebcbdfe 100644
--- a/bun.lock
+++ b/bun.lock
@@ -100,14 +100,17 @@
       "name": "@stackmap/site",
       "version": "0.0.0",
       "dependencies": {
+        "@gsap/react": "^2.1.2",
         "@stackmap/core": "workspace:*",
         "@stackmap/viewer": "workspace:*",
         "geist": "^1.7.2",
+        "gsap": "^3.15.0",
         "next": "^16.3.7",
         "react": "^19.3.0",
         "react-dom": "^19.3.0",
       },
       "devDependencies": {
+        "@playwright/test": "^1.63.0",
         "@stackmap/layout": "workspace:*",
         "@stackmap/schema": "workspace:*",
         "@tailwindcss/postcss": "^4.3.3",
@@ -257,6 +260,8 @@
 
     "@fontsource-variable/geist-mono": ["@fontsource-variable/geist-mono@5.3.0", "", {}, "sha512-vBbuwDEo9AkrqADMXOrlAR3DFcJi4/JxeuU43FoiQERnNwsfXNnvxvReZG02cQKmyk4DZkZdBZX3oTDvy2zBAw=="],
 
+    "@gsap/react": ["@gsap/react@2.1.2", "", { "peerDependencies": { "gsap": "^3.12.5", "react": ">=17" } }, "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw=="],
+
     "@hyamero/stackmap": ["@hyamero/stackmap@workspace:packages/cli"],
 
     "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
@@ -793,6 +798,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "gsap": ["gsap@3.15.0", "", {}, "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A=="],
+
     "handlebars": ["handlebars@4.7.9", "", { "dependencies": { "minimist": "^1.2.5", "neo-async": "^2.6.2", "source-map": "^0.6.1", "wordwrap": "^1.0.0" }, "optionalDependencies": { "uglify-js": "^3.1.4" }, "bin": { "handlebars": "bin/handlebars" } }, "sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ=="],
 
     "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
diff --git a/site/app/docs/page.tsx b/site/app/docs/page.tsx
index 6535dab..0007dbd 100644
--- a/site/app/docs/page.tsx
+++ b/site/app/docs/page.tsx
@@ -6,7 +6,7 @@ import { Ask, Code, docs } from '@/components/docs/prose';
 import { CodeBlock, Command } from '@/components/ui/CodeBlock';
 import { TypeChip } from '@/components/ui/TypeChip';
 import { spell } from '@/lib/words';
-import { QUICK_START, SOURCES } from '@/lib/diagrams';
+import { SOURCES, stillOf } from '@/lib/diagrams';
 import { OPEN_GRAPH } from '@/lib/seo';
 import { SITE } from '@/lib/site-data';
 
@@ -46,7 +46,7 @@ function Step({ n, title, children }: { n: number; title: string; children: Reac
   return (
     <li className="relative pl-14">
       <span className="absolute top-0 left-0 grid size-7 place-items-center rounded-full bg-page font-mono text-[12.5px] shadow-[inset_0_0_0_1.5px_var(--sm-text)]">{n}</span>
-      <h3 className="mt-0.5 text-[19px] leading-[1.35] font-semibold tracking-[-0.015em]">{title}</h3>
+      <h2 className="mt-0.5 text-[19px] leading-[1.35] font-semibold tracking-[-0.015em]">{title}</h2>
       {children}
     </li>
   );
@@ -129,7 +129,7 @@ export default function DocsPage() {
           ))}
           <code className="ml-1.5 truncate font-mono">file:///…/.stackmap/bookshop/diagram.html</code>
         </div>
-        <FitDiagram diagram={QUICK_START} width={680} height={400} />
+        <FitDiagram still={stillOf('quickStart')} width={680} height={400} />
         <figcaption className="sr-only">The same JSON, laid out by stackmap.</figcaption>
       </figure>
       <div className="mt-7 flex flex-col gap-[18px]">
diff --git a/site/app/examples/page.tsx b/site/app/examples/page.tsx
index 229fac9..6ce39bc 100644
--- a/site/app/examples/page.tsx
+++ b/site/app/examples/page.tsx
@@ -22,7 +22,7 @@ const FILTERS: Filter[] = [
 const agents = EXAMPLES.filter((e) => e.prompt).length;
 
 export default function ExamplesPage() {
-  const { items, thumbs } = galleryProps(EXAMPLES);
+  const { items, thumbs, rest } = galleryProps(EXAMPLES);
   return (
     <main data-theme="light" className="bg-page text-fg">
       <div className="mx-auto max-w-[1440px] px-5 pt-28 pb-28 md:px-10 lg:pt-[120px] xl:px-24">
@@ -31,7 +31,7 @@ export default function ExamplesPage() {
           {spell(EXAMPLES.length, true)} diagrams laid out by stackmap: {spell(EXAMPLES.length - agents)} across the {spell(DIAGRAM_KINDS.length)} kinds, and{' '}
           {spell(agents)} that coding agents wrote from a plain request in the skill’s eval runs. Pick one to open it in the viewer.
         </p>
-        <Gallery items={items} thumbs={thumbs} filters={FILTERS} />
+        <Gallery items={items} rest={rest} thumbs={thumbs} filters={FILTERS} />
       </div>
     </main>
   );
diff --git a/site/app/kinds/[kind]/page.tsx b/site/app/kinds/[kind]/page.tsx
index fdb1b7f..0b22172 100644
--- a/site/app/kinds/[kind]/page.tsx
+++ b/site/app/kinds/[kind]/page.tsx
@@ -36,7 +36,7 @@ export default async function KindPage({ params }: PageProps<'/kinds/[kind]'>) {
   const { kind } = await params;
   if (!isKind(kind)) notFound();
   const page = KIND_PAGES[kind];
-  const { items, thumbs } = galleryProps(kindEntries(kind));
+  const { items, thumbs, rest } = galleryProps(kindEntries(kind));
   const file = `${SKILL_EXAMPLE[kind]}.json`;
   const next = DIAGRAM_KINDS[(DIAGRAM_KINDS.indexOf(kind) + 1) % DIAGRAM_KINDS.length]!;
   return (
@@ -53,7 +53,7 @@ export default async function KindPage({ params }: PageProps<'/kinds/[kind]'>) {
           <p className="text-lede">{page.lede}</p>
           <p className="text-base leading-[1.65] text-fg-muted">{page.use}</p>
         </div>
-        <Gallery items={items} thumbs={thumbs} />
+        <Gallery items={items} rest={rest} thumbs={thumbs} />
         <Parts kind={kind} page={page} />
         <div className="mt-28 grid items-start gap-8 lg:grid-cols-[400px_minmax(0,1fr)] lg:gap-12">
           <div>
diff --git a/site/app/page.tsx b/site/app/page.tsx
index 1fbdeca..238b1e3 100644
--- a/site/app/page.tsx
+++ b/site/app/page.tsx
@@ -1,4 +1,6 @@
 import type { Metadata } from 'next';
+import { Landing } from '@/components/landing/Landing';
+import { CHECKOUT, DEMO } from '@/lib/diagrams';
 import { SITE } from '@/lib/site-data';
 import { OPEN_GRAPH, siteUrl, softwareApplication } from '@/lib/seo';
 
@@ -12,16 +14,9 @@ const jsonLd = JSON.stringify(softwareApplication(siteUrl(), SITE.version)).repl
 
 export default function Home() {
   return (
-    <main className="mx-auto max-w-5xl px-6 py-24">
+    <main>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLd }} />
-      <h1 className="text-hero">
-        Every layer of your stack, <span className="text-accent">on one map.</span>
-      </h1>
-      <p className="text-lede mt-6 text-fg-muted">Interactive system diagrams your coding agent writes, as one offline HTML file.</p>
-      <section data-theme="dark" className="mt-16 rounded-2xl bg-page p-10 text-fg">
-        <p className="text-section">No coordinates. stackmap lays it out.</p>
-        <code className="text-code font-mono">npx skills add hyamero/stackmap</code>
-      </section>
+      <Landing demo={DEMO} checkout={CHECKOUT} />
     </main>
   );
 }
diff --git a/site/components/diagram/FitDiagram.tsx b/site/components/diagram/FitDiagram.tsx
index 3fe3ef6..00720ed 100644
--- a/site/components/diagram/FitDiagram.tsx
+++ b/site/components/diagram/FitDiagram.tsx
@@ -1,25 +1,24 @@
 'use client';
 
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import type { LaidOutDiagram } from '@stackmap/core';
-import { toScene } from '@stackmap/viewer/src/canvas/scene';
-import { StaticScene } from '@stackmap/viewer/src/canvas/StaticScene';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import type { StaticDiagram } from '@/lib/data/static-html';
 
 const GRID = 20;
 
 /**
  * A diagram at rest, scaled to fit its box and never past 100%. `width` is the box's width at the design
- * size, so the server's markup is already fitted; once hydrated it follows the box's real size.
+ * size, so the server's markup is already fitted; once hydrated it follows the box's real size. The
+ * diagram itself is HTML rendered at build time, so this ships none of the viewer's code.
  */
 export function FitDiagram({
-  diagram,
+  still,
   width,
   height,
   pad = 24,
   fill = false,
   className = '',
 }: {
-  diagram: LaidOutDiagram;
+  still: StaticDiagram;
   width: number;
   height: number;
   pad?: number;
@@ -27,7 +26,7 @@ export function FitDiagram({
   fill?: boolean;
   className?: string;
 }) {
-  const { content } = useMemo(() => toScene(diagram), [diagram]);
+  const { box: content } = still;
   const fit = useCallback((w: number, h: number) => Math.min(1, (w - 2 * pad) / content.width, (h - 2 * pad) / content.height), [content, pad]);
   const box = useRef<HTMLDivElement>(null);
   const [k, setK] = useState(() => fit(width, height));
@@ -44,7 +43,7 @@ export function FitDiagram({
     <div
       ref={box}
       role="img"
-      aria-label={`${diagram.draft.title}: ${diagram.draft.nodes.length} nodes, ${diagram.draft.edges.length} connections`}
+      aria-label={`${still.title}: ${still.nodes} nodes, ${still.edges} connections`}
       className={`relative overflow-hidden bg-stage ${className}`}
       style={{
         height: fill ? '100%' : height,
@@ -53,9 +52,7 @@ export function FitDiagram({
         backgroundPosition: 'center',
       }}
     >
-      <div className="absolute top-1/2 left-1/2" style={{ transform: `translate(-50%, -50%) scale(${k})` }}>
-        <StaticScene diagram={diagram} />
-      </div>
+      <div className="absolute top-1/2 left-1/2" style={{ transform: `translate(-50%, -50%) scale(${k})` }} dangerouslySetInnerHTML={{ __html: still.html }} />
     </div>
   );
 }
diff --git a/site/components/diagram/Still.tsx b/site/components/diagram/Still.tsx
new file mode 100644
index 0000000..086c4bf
--- /dev/null
+++ b/site/components/diagram/Still.tsx
@@ -0,0 +1,6 @@
+import type { StaticDiagram } from '@/lib/data/static-html';
+
+/** A diagram pre-rendered at build time, at its natural size. */
+export function Still({ still }: { still: StaticDiagram }) {
+  return <div dangerouslySetInnerHTML={{ __html: still.html }} />;
+}
diff --git a/site/components/examples/Gallery.tsx b/site/components/examples/Gallery.tsx
index fdd5edf..1ade94b 100644
--- a/site/components/examples/Gallery.tsx
+++ b/site/components/examples/Gallery.tsx
@@ -3,6 +3,7 @@
 import dynamic from 'next/dynamic';
 import { useState, type ReactNode } from 'react';
 import type { LaidOutDiagram } from '@stackmap/core';
+import type { StaticDiagram } from '@/lib/data/static-html';
 import { FitDiagram } from '@/components/diagram/FitDiagram';
 import { ArrowIcon } from '@/components/ui/icons';
 
@@ -28,8 +29,8 @@ const matches = (f: Filter | undefined, i: GalleryItem) => !f || ((!f.kind || f.
 
 // The viewer reads the window (hash, size, keys), so it mounts on the client; until then the frame
 // shows the same diagram at rest, which is also what a reader without JavaScript gets.
-function Resting({ diagram }: { diagram: LaidOutDiagram }) {
-  return <FitDiagram diagram={diagram} width={1248} height={680} pad={48} fill />;
+function Resting({ still }: { still: StaticDiagram }) {
+  return <FitDiagram still={still} width={1248} height={680} pad={48} fill />;
 }
 const Viewer = dynamic(() => import('./LiveViewer'), { ssr: false });
 
@@ -37,14 +38,18 @@ function Agent() {
   return <span className="inline-flex items-center gap-1.5 text-fg before:size-1.5 before:rounded-full before:bg-fg">Written by an agent</span>;
 }
 
-export function Gallery({ items, thumbs, filters }: { items: GalleryItem[]; thumbs: Record<string, ReactNode>; filters?: Filter[] }) {
+/** `rest` is the first item pre-rendered: the frame before the viewer opens. Stepping or picking opens it. */
+export function Gallery({ items, rest, thumbs, filters }: { items: GalleryItem[]; rest: StaticDiagram; thumbs: Record<string, ReactNode>; filters?: Filter[] }) {
   const [filter, setFilter] = useState(filters?.[0]?.id);
   const shown = items.filter((i) => matches(filters?.find((f) => f.id === filter), i));
   const [selected, setSelected] = useState(items[0]!.id);
   const [live, setLive] = useState(false);
   const at = Math.max(0, shown.findIndex((i) => i.id === selected));
   const current = shown[at] ?? items[0]!;
-  const step = (by: number) => setSelected(shown[(at + by + shown.length) % shown.length]!.id);
+  const step = (by: number) => {
+    setSelected(shown[(at + by + shown.length) % shown.length]!.id);
+    setLive(true);
+  };
   const pick = (id: string) => {
     setSelected(id);
     setLive(true);
@@ -79,10 +84,9 @@ export function Gallery({ items, thumbs, filters }: { items: GalleryItem[]; thum
             <button
               type="button"
               onClick={() => setLive(true)}
-              aria-label={`Open ${current.title} in the viewer`}
               className="group relative block size-full cursor-pointer text-left"
             >
-              <Resting diagram={current.diagram} />
+              <Resting still={rest} />
               <span className="absolute top-5 left-5 max-w-[70%] rounded-2xl bg-panel px-4 py-3 shadow-panel">
                 <span className="block truncate text-[17px] font-semibold tracking-tight text-fg">{current.title}</span>
                 <span className="mt-0.5 block text-[13px] text-fg-muted">Select to explore it in the viewer</span>
diff --git a/site/components/examples/gallery-props.tsx b/site/components/examples/gallery-props.tsx
index 9951e77..4449392 100644
--- a/site/components/examples/gallery-props.tsx
+++ b/site/components/examples/gallery-props.tsx
@@ -1,7 +1,7 @@
 import { KIND_LABELS } from '@stackmap/core';
 import { Thumbnail } from '@/components/diagram/Thumbnail';
 import { id, type Entry } from '@/lib/catalog';
-import { diagramOf } from '@/lib/diagrams';
+import { diagramOf, stillOf } from '@/lib/diagrams';
 import type { GalleryItem } from './Gallery';
 
 /** Server side: each entry's laid-out diagram and its thumbnail, drawn here so the island ships no layout code. */
@@ -11,5 +11,5 @@ export function galleryProps(entries: Entry[]) {
     return { id: id(e), title: diagram.draft.title, kind: KIND_LABELS[e.kind], nodes: diagram.draft.nodes.length, prompt: e.prompt, diagram };
   });
   const thumbs = Object.fromEntries(items.map((i) => [i.id, <Thumbnail key={i.id} diagram={i.diagram} />]));
-  return { items, thumbs };
+  return { items, thumbs, rest: stillOf(`${entries[0]!.source}/${entries[0]!.key}`) };
 }
diff --git a/site/components/landing/BoardCopy.tsx b/site/components/landing/BoardCopy.tsx
new file mode 100644
index 0000000..3fa1149
--- /dev/null
+++ b/site/components/landing/BoardCopy.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+/** The landing's copy button: the board's `.ib.cp`, which swaps its icon to a check while `.done`. */
+export function BoardCopy({ text, label }: { text: string; label: string }) {
+  const [done, setDone] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const copy = () => {
+    const finish = () => {
+      setDone(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setDone(false), 1600);
+    };
+    navigator.clipboard?.writeText(text).then(finish, finish) ?? finish();
+  };
+  return (
+    <button className={`ib cp ${done ? 'done' : ''}`} type="button" aria-label={done ? 'Copied' : label} onClick={copy}>
+      <svg className="ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" data-i="copy">
+        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+      </svg>
+      <svg className="ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" data-i="check">
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </button>
+  );
+}
diff --git a/site/components/landing/HashAnchors.tsx b/site/components/landing/HashAnchors.tsx
new file mode 100644
index 0000000..7186023
--- /dev/null
+++ b/site/components/landing/HashAnchors.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * The nav's #viewer, #kinds and #install point at the desktop scenes' ids. On a phone those are hidden,
+ * so the hash goes to the phone scene that carries the same data-anchor instead.
+ */
+export function HashAnchors() {
+  useEffect(() => {
+    const go = () => {
+      const id = decodeURIComponent(location.hash.slice(1));
+      const desktop = id && document.getElementById(id);
+      if (!desktop || desktop.offsetParent !== null || desktop.closest('.pin-spacer')) return;
+      document.querySelector(`.lp-m [data-anchor="${CSS.escape(id)}"]`)?.scrollIntoView();
+    };
+    go();
+    addEventListener('hashchange', go);
+    return () => removeEventListener('hashchange', go);
+  }, []);
+  return null;
+}
diff --git a/site/components/landing/KindCount.tsx b/site/components/landing/KindCount.tsx
new file mode 100644
index 0000000..74662a3
--- /dev/null
+++ b/site/components/landing/KindCount.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { HOLDS } from './kinds-geometry';
+
+/** The phone's "3 / 5 · one checkout, five ways", following the scroll while the scene scrubs. */
+export function KindCount({ rest, total }: { rest: number; total: number }) {
+  const ref = useRef<HTMLParagraphElement>(null);
+  const [kind, setKind] = useState(rest);
+  useEffect(() => {
+    const scene = ref.current?.closest<HTMLElement>('[data-scene]');
+    if (!scene) return;
+    const onScene = (e: Event) => {
+      const pct = (e as CustomEvent<number>).detail * 100;
+      setKind(Math.max(0, HOLDS.findLastIndex(([a]) => pct >= a - 3.5)));
+    };
+    scene.addEventListener('scene', onScene);
+    return () => scene.removeEventListener('scene', onScene);
+  }, []);
+  return (
+    <p ref={ref} className="kcount mono tnum">
+      {kind + 1} / {total} · one checkout, five ways
+    </p>
+  );
+}
diff --git a/site/components/landing/KindPills.tsx b/site/components/landing/KindPills.tsx
new file mode 100644
index 0000000..d36eaee
--- /dev/null
+++ b/site/components/landing/KindPills.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { DIAGRAM_KINDS, KIND_LABELS } from '@stackmap/core';
+import { HOLDS } from './kinds-geometry';
+
+/**
+ * The kind pills. While the page scrubs they seek to that kind's hold and follow the scroll; at rest they
+ * switch the shown kind in place (the scene's data-kind picks the layer, faces and slot positions).
+ */
+export function KindPills({ rest }: { rest: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [kind, setKind] = useState(rest);
+  useEffect(() => {
+    const scene = ref.current?.closest<HTMLElement>('[data-scene]');
+    if (!scene) return;
+    const onScene = (e: Event) => {
+      const pct = (e as CustomEvent<number>).detail * 100;
+      setKind(Math.max(0, HOLDS.findLastIndex(([a]) => pct >= a - 3.5)));
+    };
+    scene.addEventListener('scene', onScene);
+    return () => scene.removeEventListener('scene', onScene);
+  }, []);
+  const pick = (k: number) => {
+    const scene = ref.current?.closest<HTMLElement>('[data-scene]');
+    const root = scene?.closest<HTMLElement>('.lp');
+    if (!scene || !root) return;
+    setKind(k);
+    if (root.classList.contains('live')) {
+      const [a, b] = HOLDS[k]!;
+      root.dispatchEvent(new CustomEvent('seek', { detail: { id: scene.dataset.scene, p: (a + b) / 200 } }));
+    } else scene.dataset.kind = DIAGRAM_KINDS[k];
+  };
+  return (
+    <div ref={ref} className="kpills pnl" role="group" aria-label="Diagram kinds">
+      {DIAGRAM_KINDS.map((k, i) => (
+        <button key={k} className="kpill" type="button" aria-pressed={i === kind} onClick={() => pick(i)}>
+          {KIND_LABELS[k]}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/site/components/landing/KindsStage.tsx b/site/components/landing/KindsStage.tsx
new file mode 100644
index 0000000..0b37dd5
--- /dev/null
+++ b/site/components/landing/KindsStage.tsx
@@ -0,0 +1,56 @@
+import { DIAGRAM_KINDS, type DiagramKind, type LaidOutDiagram } from '@stackmap/core';
+import { NodeCard } from '@stackmap/viewer/src/card/NodeCard';
+import { StepCard } from '@stackmap/viewer/src/card/StepCard';
+import { Still } from '@/components/diagram/Still';
+import { stillOf } from '@/lib/diagrams';
+import { kindsGeometry, kindsTweens, type Area } from './kinds-geometry';
+import { s } from './style';
+
+const px = (n: number) => `${Math.round(n * 10) / 10}px`;
+
+/**
+ * One checkout, five ways: each kind's layer (its lanes, phases and connections) plus the card slots that
+ * glide between kinds. At rest the scene's data-kind picks what shows; scrolling plays the tweens it carries.
+ */
+export function KindsStage({ checkout, area, root }: { checkout: Record<string, LaidOutDiagram>; area: Area; root: string }) {
+  const g = kindsGeometry(checkout, area);
+  const at = (kind: DiagramKind) => `${root} [data-kind="${kind}"]`;
+  const restRules = DIAGRAM_KINDS.flatMap((kind, k) => [
+    `${at(kind)} .kl${k}, ${at(kind)} .kdef${k} {opacity:1}`,
+    `${at(kind)} .kcam {transform:scale(${g.layers[k]!.cam})}`,
+    `${at(kind)} .kn-col {transform:translateY(${-260 * k}px)}`,
+    ...g.slots.map((faces, i) => {
+      const f = faces[k];
+      const r = (f ?? faces.find(Boolean)!).rect;
+      return `${at(kind)} .ks${i} {left:${px(r.x)};top:${px(r.y)};width:${px(r.width)};height:${px(r.height)};opacity:${f ? 1 : 0}}${f ? `${at(kind)} .kf${i}_${k} {opacity:1}` : ''}`;
+    }),
+  ]);
+  // Escaping `<` keeps the JSON from closing its script early.
+  const timelines = JSON.stringify(kindsTweens(g)).replace(/</g, '\\u003c');
+  return (
+    <div className="kstage" aria-hidden="true">
+      <style>{restRules.join('\n')}</style>
+      <script type="application/json" data-timelines="" dangerouslySetInnerHTML={{ __html: timelines }} />
+      <div className="kcam" style={s({ transformOrigin: `${area.cx}px ${area.cy}px` })}>
+        {g.layers.map((l, k) => (
+          <div key={l.kind} className={`klayer kl${k}`} style={s({ left: px(l.left), top: px(l.top), transform: `scale(${g.scale})` })}>
+            <Still still={stillOf(`checkout/${l.kind}`)} />
+          </div>
+        ))}
+        {g.slots.map((faces, i) => (
+          <div key={i} className={`kslot ks${i}`}>
+            {faces.map((f, k) =>
+              f ? (
+                <span key={k} className={`kface kf${i}_${k}`}>
+                  <span className="kface-in" style={s({ position: 'absolute', left: '0', top: '0', width: px(f.card.rect.width), height: px(f.card.rect.height), transform: `scale(${g.scale})` })}>
+                    {f.compact ? <StepCard node={f.card.node} final={f.card.final} /> : <NodeCard node={f.card.node} />}
+                  </span>
+                </span>
+              ) : null,
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/site/components/landing/Landing.tsx b/site/components/landing/Landing.tsx
new file mode 100644
index 0000000..5a77901
--- /dev/null
+++ b/site/components/landing/Landing.tsx
@@ -0,0 +1,56 @@
+import type { LaidOutDiagram } from '@stackmap/core';
+import { Agent } from './desktop/Agent';
+import { Features } from './desktop/Features';
+import { Files } from './desktop/Files';
+import { Hero } from './desktop/Hero';
+import { Install } from './desktop/Install';
+import { Kinds } from './desktop/Kinds';
+import { Unmapped } from './desktop/Unmapped';
+import { Viewer } from './desktop/Viewer';
+import { HashAnchors } from './HashAnchors';
+import { LandingMotion } from './LandingMotion';
+import { Agent as MAgent } from './mobile/Agent';
+import { Features as MFeatures } from './mobile/Features';
+import { Files as MFiles } from './mobile/Files';
+import { Hero as MHero } from './mobile/Hero';
+import { Install as MInstall } from './mobile/Install';
+import { Kinds as MKinds } from './mobile/Kinds';
+import { Unmapped as MUnmapped } from './mobile/Unmapped';
+import { Viewer as MViewer } from './mobile/Viewer';
+import './desktop.css';
+import './mobile.css';
+import './site.css';
+
+/**
+ * The landing: the canvas's desktop composition (1440 × 900 frames), and its phone composition below 768px.
+ * Both render on the server as their resting frames; LandingMotion scrubs whichever one is on screen.
+ */
+export function Landing({ demo, checkout }: { demo: LaidOutDiagram; checkout: Record<string, LaidOutDiagram> }) {
+  return (
+    <>
+      <div id="lp-d" className="lp lp-d" data-theme="dark" data-h="7900">
+        <Hero />
+        <Unmapped />
+        <Agent />
+        <Viewer demo={demo} />
+        <Features />
+        <Kinds checkout={checkout} />
+        <Files />
+        <Install />
+      </div>
+      <div id="lp-m" className="lp lp-m" data-theme="dark" data-h="7744">
+        <MHero />
+        <MUnmapped />
+        <MAgent />
+        <MViewer demo={demo} />
+        <MFeatures />
+        <MKinds checkout={checkout} />
+        <MFiles />
+        <MInstall />
+      </div>
+      <LandingMotion composition="desktop" />
+      <LandingMotion composition="phone" />
+      <HashAnchors />
+    </>
+  );
+}
diff --git a/site/components/landing/LandingMotion.tsx b/site/components/landing/LandingMotion.tsx
new file mode 100644
index 0000000..31d2554
--- /dev/null
+++ b/site/components/landing/LandingMotion.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import { useGSAP } from '@gsap/react';
+import { gsap } from 'gsap';
+import { CustomEase } from 'gsap/CustomEase';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { TWEENS as DESKTOP } from './desktop/timelines';
+import { TWEENS as MOBILE } from './mobile/timelines';
+import { sceneExtras, sceneTimeline, type Tween } from './timeline';
+
+gsap.registerPlugin(useGSAP, ScrollTrigger, CustomEase);
+
+// Each pinned scene owns one GSAP timeline, scrubbed by ScrollTrigger through its pin (Motion rule 01).
+// All of it lives inside gsap.matchMedia: with reduced motion, on the other composition's widths, or
+// before any script runs, nothing is set and every scene stays the resting frame the server drew (rule 02).
+
+interface Route {
+  el: SVGPathElement;
+  a: number;
+  b: number;
+  head: SVGGElement | null;
+  len: number;
+  k0: number;
+}
+
+const clamp = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
+
+function routesOf(root: HTMLElement, owner: string): Route[] {
+  return [...root.querySelectorAll<SVGPathElement>(`[data-route="${owner}"]`)].map((el) => ({
+    el,
+    a: parseFloat(el.dataset.r0 ?? '0'),
+    b: parseFloat(el.dataset.r1 ?? '1'),
+    head: el.dataset.head ? el.parentElement!.querySelector<SVGGElement>(`[data-route-head="${el.dataset.head}"]`) : null,
+    len: 0,
+    k0: 0,
+  }));
+}
+
+function measureRoute(r: Route) {
+  r.len = r.el.getTotalLength();
+  // A route entering at its frame's top starts drawn a little way in, so the line from the scene above carries on.
+  const top = r.len > 0 && r.el.getPointAtLength(0).y < 2;
+  r.k0 = top ? Math.min(0.5, Number(r.el.dataset.stub ?? 104) / r.len) : 0;
+}
+
+// The route through-line draws with its scene's progress, in the gutter, and its head rides the tip.
+function drawRoute(r: Route, p: number) {
+  const k = Math.max(r.k0, clamp((p - r.a) / Math.max(0.0001, r.b - r.a)));
+  r.el.style.strokeDashoffset = String(1 - k);
+  if (r.head && r.len) {
+    const at = r.el.getPointAtLength(k * r.len);
+    r.head.setAttribute('transform', `translate(${at.x} ${at.y})`);
+    r.head.style.opacity = k > 0.002 && k < 0.998 ? '1' : '0';
+  }
+}
+
+function animate(root: HTMLElement, tweens: Tween[]) {
+  const nav = document.querySelector<HTMLElement>('header[data-nav]');
+  const nav0 = nav?.dataset.theme;
+  root.classList.add('live');
+  const mark = root.querySelector<SVGElement>('[data-mark-route]');
+  mark?.classList.remove('drawn');
+  const progress = new Map<string, number>();
+  const triggers = new Map<string, ScrollTrigger>();
+  const allRoutes: Route[] = [];
+
+  for (const el of root.querySelectorAll<HTMLElement>('[data-scene]')) {
+    const id = el.dataset.scene!;
+    const stage = el.querySelector<HTMLElement>('[data-stage]')!;
+    const frame = el.querySelector<HTMLElement>('[data-frame]')!;
+    const fw = Number(el.dataset.fw) || 1440;
+    const fh = Number(el.dataset.fh) || 900;
+    const runway = parseFloat(el.dataset.runway ?? '0');
+    const routes = routesOf(root, id);
+    allRoutes.push(...routes);
+    // The frame keeps its design size and scales to fit the window, centred in the pinned stage.
+    const fit = () => Math.min(1, innerWidth / fw, innerHeight / fh);
+    gsap.set([el, stage], { height: '100vh' });
+    gsap.set(frame, { top: '50%', left: '50%', xPercent: -50, yPercent: -50, scale: fit });
+    const tl = sceneTimeline(el, [...tweens, ...sceneExtras(el)]);
+    const st = ScrollTrigger.create({
+      trigger: el,
+      pin: true,
+      start: 'top top',
+      end: () => `+=${runway * innerHeight}`,
+      scrub: true,
+      animation: tl,
+      invalidateOnRefresh: true,
+      onRefresh: () => gsap.set(frame, { scale: fit() }),
+      onUpdate: (self) => {
+        const p = self.progress;
+        progress.set(id, p);
+        for (const r of routes) drawRoute(r, p);
+        // The mark's route draws once, never scrubbed (Motion rule 03).
+        if (id === 'unmapped' && p >= 0.53) mark?.classList.add('drawn');
+        el.dispatchEvent(new CustomEvent('scene', { detail: p }));
+      },
+    });
+    triggers.set(id, st);
+    progress.set(id, 0);
+  }
+
+  // Sections that don't pin (features, install) draw their stretch of the route as they pass.
+  for (const el of root.querySelectorAll<HTMLElement>('[data-sec]')) {
+    const routes = routesOf(root, el.dataset.sec!);
+    allRoutes.push(...routes);
+    ScrollTrigger.create({ trigger: el, start: 'top 78%', end: 'bottom 78%', onUpdate: (self) => routes.forEach((r) => drawRoute(r, self.progress)) });
+  }
+  const measureRoutes = () => allRoutes.forEach(measureRoute);
+  measureRoutes();
+  ScrollTrigger.addEventListener('refresh', measureRoutes);
+
+  for (const el of root.querySelectorAll<HTMLElement>('[data-rv]')) {
+    ScrollTrigger.create({ trigger: el, start: 'top 90%', once: true, onEnter: () => el.classList.add('in') });
+  }
+
+  // The nav takes the theme of the section under it; the viewer's light, and the files scene's, can cover it first.
+  const themed = [...root.querySelectorAll<HTMLElement>('[data-theme-sec]')];
+  const files = root.querySelector<HTMLElement>('[data-scene="files"]');
+  const viewer = root.querySelector<HTMLElement>('[data-scene="viewer"]');
+  const under = (el: HTMLElement | null) => {
+    const r = el?.getBoundingClientRect();
+    return !!r && r.top <= 40 && r.bottom > 40;
+  };
+  const navTheme = () => {
+    if (!nav) return;
+    let theme = themed.find(under)?.dataset.themeSec ?? root.dataset.theme ?? 'dark';
+    if (under(files) && (progress.get('files') ?? 0) < Number(files!.dataset.lit ?? 0)) theme = 'light';
+    if (under(viewer) && (progress.get('viewer') ?? 0) < 0.07) theme = 'dark';
+    if (nav.dataset.theme !== theme) nav.dataset.theme = theme;
+  };
+  ScrollTrigger.create({ start: 0, end: 'max', onUpdate: navTheme, onRefresh: navTheme });
+
+  // The kind pills ask for a point in a scene's pin.
+  const onSeek = (e: Event) => {
+    const { id, p } = (e as CustomEvent<{ id: string; p: number }>).detail;
+    const st = triggers.get(id);
+    if (st) scrollTo({ top: Math.round(st.start + (st.end - st.start) * p), behavior: 'smooth' });
+  };
+  root.addEventListener('seek', onSeek);
+
+  // Hero parallax: the unmapped files drift against the pointer.
+  const hero = root.querySelector<HTMLElement>('[data-scene="top"]');
+  const heroFrame = hero?.querySelector<HTMLElement>('[data-frame]');
+  const onPointer = (e: PointerEvent) => {
+    const r = hero!.getBoundingClientRect();
+    heroFrame!.style.setProperty('--mx', (((e.clientX - r.left) / r.width - 0.5) * 2).toFixed(3));
+    heroFrame!.style.setProperty('--my', (((e.clientY - r.top) / r.height - 0.5) * 2).toFixed(3));
+  };
+  hero?.addEventListener('pointermove', onPointer);
+
+  return () => {
+    root.classList.remove('live');
+    root.removeEventListener('seek', onSeek);
+    hero?.removeEventListener('pointermove', onPointer);
+    ScrollTrigger.removeEventListener('refresh', measureRoutes);
+    for (const r of allRoutes) {
+      r.el.style.strokeDashoffset = '';
+      r.head?.removeAttribute('transform');
+    }
+    for (const el of root.querySelectorAll('[data-rv].in')) el.classList.remove('in');
+    // At rest the mark is simply drawn.
+    mark?.classList.add('drawn');
+    if (nav && nav0) nav.dataset.theme = nav0;
+  };
+}
+
+const COMPOSITIONS = {
+  desktop: { rootId: 'lp-d', media: '(min-width: 768px)', tweens: DESKTOP },
+  phone: { rootId: 'lp-m', media: '(max-width: 767px)', tweens: MOBILE },
+};
+
+/** Scrubs one composition, desktop or phone, while its widths match and motion is allowed. */
+export function LandingMotion({ composition }: { composition: keyof typeof COMPOSITIONS }) {
+  const { rootId, media, tweens } = COMPOSITIONS[composition];
+  useGSAP(() => {
+    const root = document.getElementById(rootId);
+    if (!root) return;
+    root.querySelector('[data-mark-route]')?.classList.add('drawn');
+    const mm = gsap.matchMedia();
+    mm.add(`${media} and (prefers-reduced-motion: no-preference)`, () => animate(root, tweens));
+    return () => mm.revert();
+  }, [rootId, media, tweens]);
+  return null;
+}
diff --git a/site/components/landing/LazyViewer.tsx b/site/components/landing/LazyViewer.tsx
new file mode 100644
index 0000000..ea27a4f
--- /dev/null
+++ b/site/components/landing/LazyViewer.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useEffect, useRef, useState } from 'react';
+import type { LaidOutDiagram } from '@stackmap/core';
+import type { StaticDiagram } from '@/lib/data/static-html';
+import { FitDiagram } from '@/components/diagram/FitDiagram';
+
+const LiveViewer = dynamic(() => import('@/components/examples/LiveViewer'), { ssr: false });
+
+/**
+ * The real viewer, mounted once its box is on screen (and visible: the other composition's copy never mounts).
+ * Until then, and without script, the same diagram at rest.
+ */
+export function LazyViewer({ diagram, still, width, height }: { diagram: LaidOutDiagram; still: StaticDiagram; width: number; height: number }) {
+  const box = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      ([e]) => {
+        if (e?.isIntersecting && el.offsetParent !== null) {
+          setMounted(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: '50% 0px' },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+  return (
+    <div ref={box} className="size-full">
+      {mounted ? <LiveViewer diagram={diagram} /> : <FitDiagram still={still} width={width} height={height} pad={48} fill />}
+    </div>
+  );
+}
diff --git a/site/components/landing/desktop.css b/site/components/landing/desktop.css
new file mode 100644
index 0000000..d552400
--- /dev/null
+++ b/site/components/landing/desktop.css
@@ -0,0 +1,440 @@
+/* Ported from the canvas board. Scoped to .lp-d; keyframes are prefixed so the two compositions never collide. */
+.lp-d {
+  .mono {font-family:var(--font-mono)}
+  .tnum {font-variant-numeric:tabular-nums}
+  .ic {display:block;flex-shrink:0}
+  .sr {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+  .t-client {--f:var(--sm-client-fill);--b:var(--sm-client-border);--t:var(--sm-client-tile);--a:var(--sm-client-accent)}
+  .t-service {--f:var(--sm-service-fill);--b:var(--sm-service-border);--t:var(--sm-service-tile);--a:var(--sm-service-accent)}
+  .t-gateway {--f:var(--sm-gateway-fill);--b:var(--sm-gateway-border);--t:var(--sm-gateway-tile);--a:var(--sm-gateway-accent)}
+  .t-database {--f:var(--sm-database-fill);--b:var(--sm-database-border);--t:var(--sm-database-tile);--a:var(--sm-database-accent)}
+  .t-cache {--f:var(--sm-cache-fill);--b:var(--sm-cache-border);--t:var(--sm-cache-tile);--a:var(--sm-cache-accent)}
+  .t-queue {--f:var(--sm-queue-fill);--b:var(--sm-queue-border);--t:var(--sm-queue-tile);--a:var(--sm-queue-accent)}
+  .t-storage {--f:var(--sm-storage-fill);--b:var(--sm-storage-border);--t:var(--sm-storage-tile);--a:var(--sm-storage-accent)}
+  .t-external {--f:var(--sm-external-fill);--b:var(--sm-external-border);--t:var(--sm-external-tile);--a:var(--sm-external-accent)}
+  .t-security {--f:var(--sm-security-fill);--b:var(--sm-security-border);--t:var(--sm-security-tile);--a:var(--sm-security-accent)}
+  .t-start {--f:var(--sm-start-fill);--b:var(--sm-start-border);--t:var(--sm-start-tile);--a:var(--sm-start-accent)}
+  .t-active {--f:var(--sm-active-fill);--b:var(--sm-active-border);--t:var(--sm-active-tile);--a:var(--sm-active-accent)}
+  .t-waiting {--f:var(--sm-waiting-fill);--b:var(--sm-waiting-border);--t:var(--sm-waiting-tile);--a:var(--sm-waiting-accent)}
+  .t-decision {--f:var(--sm-decision-fill);--b:var(--sm-decision-border);--t:var(--sm-decision-tile);--a:var(--sm-decision-accent)}
+  .t-success {--f:var(--sm-success-fill);--b:var(--sm-success-border);--t:var(--sm-success-tile);--a:var(--sm-success-accent)}
+  .t-failure {--f:var(--sm-failure-fill);--b:var(--sm-failure-border);--t:var(--sm-failure-tile);--a:var(--sm-failure-accent)}
+  .t-neutral {--f:var(--sm-neutral-fill);--b:var(--sm-neutral-border);--t:var(--sm-neutral-tile);--a:var(--sm-neutral-accent)}
+  .ed[data-tint="client"] {--ec:var(--sm-client-accent);--ew:1.75px}
+  .ed[data-tint="service"] {--ec:var(--sm-service-accent);--ew:1.75px}
+  .ed[data-tint="gateway"] {--ec:var(--sm-gateway-accent);--ew:1.75px}
+  .ed[data-tint="database"] {--ec:var(--sm-database-accent);--ew:1.75px}
+  .ed[data-tint="cache"] {--ec:var(--sm-cache-accent);--ew:1.75px}
+  .ed[data-tint="queue"] {--ec:var(--sm-queue-accent);--ew:1.75px}
+  .ed[data-tint="storage"] {--ec:var(--sm-storage-accent);--ew:1.75px}
+  .ed[data-tint="external"] {--ec:var(--sm-external-accent);--ew:1.75px}
+  .ed[data-tint="security"] {--ec:var(--sm-security-accent);--ew:1.75px}
+  .ed[data-tint="start"] {--ec:var(--sm-start-accent);--ew:1.75px}
+  .ed[data-tint="active"] {--ec:var(--sm-active-accent);--ew:1.75px}
+  .ed[data-tint="waiting"] {--ec:var(--sm-waiting-accent);--ew:1.75px}
+  .ed[data-tint="decision"] {--ec:var(--sm-decision-accent);--ew:1.75px}
+  .ed[data-tint="success"] {--ec:var(--sm-success-accent);--ew:1.75px}
+  .ed[data-tint="failure"] {--ec:var(--sm-failure-accent);--ew:1.75px}
+  .ed[data-tint="neutral"] {--ec:var(--sm-neutral-accent);--ew:1.75px}
+  .dg {position:relative}
+  .cw {position:absolute;display:block;border:0;padding:0;margin:0;background:transparent;text-align:left;font:inherit;color:var(--sm-text);border-radius:14px;outline:none;transition:opacity 150ms ease}
+  .cw.cpt {border-radius:12px}
+  button.cw {cursor:pointer}
+  .nc, .scd {position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:var(--f);box-shadow:inset 0 0 0 1px var(--b)}
+  .nc {border-radius:14px}
+  .scd {border-radius:12px}
+  .nc-h {display:flex;align-items:center;gap:12px;height:64px;padding:0 16px;flex-shrink:0}
+  .nc .tile {width:36px;height:36px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:var(--t);color:var(--a)}
+  .nc-tx {display:flex;flex-direction:column;min-width:0}
+  .nc .ct {font-size:13.5px;line-height:20px;font-weight:500;color:var(--sm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .nc .cs {font-size:12px;line-height:16px;color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .nc-rows {display:block;padding:8px 0;flex-shrink:0}
+  .nc-row {display:flex;align-items:center;justify-content:space-between;gap:12px;height:28px;padding:0 16px;font-size:12px}
+  .nc-k {color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .nc-v {max-width:55%;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sm-text)}
+  .nc-stats {display:block;padding:0 12px;margin-bottom:12px;flex-shrink:0}
+  .st-box {display:flex;flex-direction:column;overflow:hidden;border-radius:10px;background:var(--t);box-shadow:inset 0 0 0 1px var(--b)}
+  .st-grid {display:grid;gap:6px;padding:6px;height:60px}
+  .st {display:flex;flex-direction:column;justify-content:center;min-width:0;border-radius:8px;background:var(--sm-stage);padding:0 10px}
+  .st-v {font-size:15px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .st-l {font-size:11px;line-height:16px;color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .st-note {display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;font-size:11.5px;color:var(--sm-text-muted)}
+  .nc-foot {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));align-items:center;gap:12px;height:40px;padding:0 16px;font-size:12px;color:var(--sm-text-muted);box-shadow:inset 0 1px 0 var(--b);flex-shrink:0}
+  .nf-i {display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
+  .nf-i.r {justify-content:flex-end}
+  .nc-cta {display:block;height:48px;padding:0 12px;flex-shrink:0}
+  .cta-in {display:flex;height:36px;align-items:center;justify-content:space-between;border-radius:8px;padding:0 12px;font-size:13px;font-weight:500;background:var(--t)}
+  .cta-in .ic {color:var(--a)}
+  .sc-h {display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;flex-shrink:0}
+  .scd .tile {width:28px;height:28px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;background:var(--t);color:var(--a)}
+  .scd .ct {font-size:13px;line-height:18px;font-weight:500;color:var(--sm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .scd .cs {font-size:11.5px;line-height:16px;color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .sc-tag {display:flex;align-items:flex-start;height:24px;padding:0 12px 0 50px;flex-shrink:0}
+  .pill {display:inline-flex;align-items:center;height:18px;max-width:100%;padding:0 8px;border-radius:9999px;font-size:11px;font-weight:500;background:var(--t);color:var(--sm-text);white-space:nowrap;overflow:hidden}
+  .scd.final {box-shadow:inset 0 0 0 1.5px var(--a),inset 0 0 0 3.5px var(--f),inset 0 0 0 4.5px var(--a)}
+  [data-em="focus"] {outline:2px solid var(--a);outline-offset:3px}
+  [data-em="dim"], [data-dim="true"], [data-dim="dim"] {opacity:.22}
+  .cw:focus-visible {outline:2px solid var(--sm-text);outline-offset:3px}
+  .hd {position:absolute;width:7px;height:7px;border-radius:9999px;background:var(--sm-stage);border:1.5px solid var(--a);pointer-events:none}
+  .hin-v {left:50%;top:0;transform:translate(-50%, -50%)}
+  .hout-v {left:50%;bottom:0;transform:translate(-50%, 50%)}
+  .hin-h {top:50%;left:0;transform:translate(-50%, -50%)}
+  .hout-h {top:50%;right:0;transform:translate(50%, -50%)}
+  .hd.rh {transform:translate(-50%, -50%);transition:opacity 150ms ease}
+  .eg, .pg {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .ed {--ec:var(--sm-edge);--ew:1.25px;transition:opacity 150ms ease}
+  .ed .ln {fill:none;stroke:var(--ec);stroke-width:var(--ew);transition:stroke 150ms ease, stroke-width 150ms ease}
+  .ed .ah {fill:var(--ec);stroke:none;transition:fill 150ms ease}
+  .ed .ah.open {fill:none;stroke:var(--ec);stroke-width:1.25px;stroke-linejoin:round}
+  .ed.k-async .ln {stroke-dasharray:5 4}
+  .ed.k-return .ln {stroke-dasharray:1 4;stroke-linecap:round}
+  .ed.tone-main {--ec:var(--sm-text);--ew:1.75px}
+  .ed.tone-security {--ec:var(--sm-security-accent);--ew:1.5px}
+  .ed.tone-error {--ec:var(--sm-failure-accent);--ew:1.5px}
+  .lifeline {stroke:var(--sm-group-border);stroke-width:1;stroke-dasharray:4 4;transition:opacity 150ms ease}
+  .act {fill:var(--a);fill-opacity:.16;stroke:var(--a);stroke-width:1;transition:opacity 150ms ease}
+  .startmark line {stroke:var(--sm-start-accent);stroke-width:1.5}
+  .startmark path, .startmark circle {fill:var(--sm-start-accent)}
+  .elb {position:absolute;transform:translate(-50%, -50%);white-space:nowrap;border-radius:9999px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);padding:2px 8px;font-size:11px;line-height:1.5;color:var(--sm-text-muted);pointer-events:none;transition:opacity 150ms ease}
+  .elt {position:absolute;transform:translate(-50%, -50%);white-space:nowrap;border-radius:4px;background:var(--sm-stage);padding:0 6px;font-size:11.5px;line-height:16px;color:var(--sm-text);pointer-events:none;transition:opacity 150ms ease}
+  .fr {position:absolute;border:1px dashed var(--sm-group-border);border-radius:18px;background:var(--sm-group-fill)}
+  .fr.cpt {border-radius:14px}
+  .fr.onlane {background:transparent}
+  .fr.sec {border-color:var(--sm-security-accent)}
+  .fr.sec .ic {color:var(--sm-security-accent)}
+  .fr-l {display:flex;align-items:center;gap:6px;padding:0 20px;font-size:12.5px;font-weight:500;color:var(--sm-text-muted)}
+  .fr.cpt .fr-l {padding:0 12px;font-size:12px}
+  .lane {position:absolute;border-radius:16px;background:var(--sm-group-fill);box-shadow:inset 0 0 0 1px var(--sm-panel-border)}
+  .lane.exc {box-shadow:none;border:1px dashed var(--sm-group-border)}
+  .lane-l {display:flex;align-items:flex-start;gap:6px;width:128px;padding:16px 16px 0;font-size:12.5px;line-height:18px;font-weight:500;color:var(--sm-text-muted);overflow-wrap:anywhere}
+  .lane-l .ic {margin-top:2.5px}
+  .ph-head {position:absolute;display:flex;align-items:flex-start;justify-content:center}
+  .ph-head span {margin-top:6px;font-size:13px;font-weight:500;color:var(--sm-text)}
+  .ph-head i {position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--sm-group-border)}
+  .ph-band {position:absolute;border:1px dashed var(--sm-group-border);border-radius:18px;background:var(--sm-group-fill)}
+  .ph-band span {display:flex;align-items:center;height:44px;padding:0 20px;font-size:12.5px;font-weight:500;color:var(--sm-text-muted)}
+  .ph-band.c span {justify-content:center}
+  .ph-time {position:absolute;border:1px dashed var(--sm-group-border);border-radius:14px;background:var(--sm-group-fill)}
+  .ph-time span {display:flex;align-items:center;height:28px;padding:0 16px;font-size:12px;font-weight:500;color:var(--sm-text-muted)}
+  .pnl {background:var(--sm-panel);box-shadow:var(--shadow-panel);border-radius:16px}
+  .ib {width:36px;height:36px;border:0;border-radius:12px;background:transparent;color:var(--sm-text-muted);display:grid;place-items:center;cursor:pointer;transition:background-color 150ms ease, color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1)}
+  .ib:hover, .ib[aria-pressed="true"] {background:var(--sm-page);color:var(--sm-text)}
+  .ib:active {transform:scale(0.96)}
+  .ib:focus-visible, .pbtn:focus-visible, .lnk:focus-visible, .chip-b:focus-visible, .tab:focus-visible {outline:2px solid var(--sm-text);outline-offset:2px}
+  .pbtn {display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:9999px;background:var(--sm-primary);color:var(--sm-primary-text);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 120ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease}
+  .pbtn:active {transform:scale(0.96)}
+  .lnk {display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;color:var(--sm-text-muted);text-decoration:none;font-size:14px;transition:background-color 150ms ease, color 150ms ease}
+  .lnk:hover {background:var(--sm-page);color:var(--sm-text)}
+  .kbd {display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-family:var(--font-mono);font-size:12px;color:var(--sm-text-muted);background:var(--sm-panel)}
+  .badge {display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-size:13px;color:var(--sm-text)}
+  .grid-bg {background-image:radial-gradient(circle, var(--sm-grid) 1.5px, transparent 1.75px);background-size:24px 24px}
+  .scn {position:relative;background:var(--sm-page)}
+  .stage {position:relative;height:100%;overflow:clip}
+  .frame {position:absolute;left:50%;top:0;transform:translateX(-50%);transform-origin:50% 50%}
+  &.live [data-rv] {transition:opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), translate 700ms cubic-bezier(0.23, 1, 0.32, 1)}
+  &.live [data-rv]:not(.in) {opacity:0;translate:0 28px}
+  &.live [data-rv="lines"] {opacity:1 !important;translate:none !important;transition:none}
+  &.live [data-rv="lines"] .ml>span {display:inline-block;transition:translate 800ms cubic-bezier(0.23, 1, 0.32, 1)}
+  &.live [data-rv="lines"]:not(.in) .ml>span {translate:0 108%}
+  .ml {display:block;overflow:hidden;padding:0.06em 0.04em 0.14em;margin:-0.06em -0.04em -0.14em}
+  &.live [data-route] {stroke-dasharray:1 1;stroke-dashoffset:1}
+  .rhead {opacity:0;transition:opacity 200ms ease;pointer-events:none}
+  .rh-halo {fill:var(--sm-text);fill-opacity:.14}
+  .rh-core {fill:var(--sm-text)}
+  .cmd {display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 18px;border-radius:14px}
+  .cmd.big {height:60px;padding:0 10px 0 22px}
+  .cmd-p {font-size:15px;color:var(--sm-text-muted)}
+  .cmd-t {flex:1 1 auto;min-width:0;font-size:15px;color:var(--sm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .cmd.big .cmd-t, .cmd.big .cmd-p {font-size:16px}
+  .cp [data-i="check"] {display:none}
+  .cp.done [data-i="copy"] {display:none}
+  .cp.done [data-i="check"] {display:block;color:var(--sm-text)}
+  .t-mega {font-size:200px;line-height:0.92;font-weight:600;letter-spacing:-0.05em}
+  .t-hero {font-size:112px;line-height:0.94;font-weight:600;letter-spacing:-0.045em}
+  .t-title {font-size:96px;line-height:1;font-weight:600;letter-spacing:-0.045em}
+  .t-section {font-size:72px;line-height:1.02;font-weight:600;letter-spacing:-0.04em}
+  .t-display {font-size:60px;line-height:70px;font-weight:600;letter-spacing:-0.03em}
+  .t-lede {font-size:22px;line-height:1.4;font-weight:400;color:var(--sm-text-muted)}
+  .acc {color:var(--site-accent)}
+  .muted {color:var(--sm-text-muted)}
+  h1, h2, h3, h4, p {margin:0}
+  .hero-grid {position:absolute;inset:0;-webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:42% 46%;mask-position:42% 46%;-webkit-mask-size:1900px 1400px;mask-size:1900px 1400px;animation:gridgrow 1500ms cubic-bezier(0.23, 1, 0.32, 1) 850ms backwards}
+  .par {position:absolute;inset:0;transition:transform 900ms cubic-bezier(0.23, 1, 0.32, 1)}
+  .par0 {transform:translate(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px))}
+  .par1 {transform:translate(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -12px))}
+  .par2 {transform:translate(calc(var(--mx, 0) * -28px), calc(var(--my, 0) * -20px))}
+  .chip {position:absolute;white-space:nowrap;padding:7px 12px;border-radius:9px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-family:var(--font-mono);font-size:15px;line-height:1.5;color:var(--sm-text-muted);animation-duration:11s, 900ms;animation-timing-function:ease-in-out, cubic-bezier(0.23, 1, 0.32, 1);animation-iteration-count:infinite, 1;animation-direction:alternate, normal;animation-fill-mode:none, backwards}
+  .chip.dp0 {filter:blur(3px);opacity:.3}
+  .chip.dp1 {filter:blur(1.4px);opacity:.55}
+  .chip.dp2 {opacity:.85;color:var(--sm-text)}
+  .chip.dr-a {animation-name:driftA, chipin}
+  .chip.dr-b {animation-name:driftB, chipin}
+  .chip.dr-c {animation-name:driftC, chipin}
+  .chip:has(.ghost) {padding:0;background:none;box-shadow:none}
+  .ghost {display:flex;align-items:center;gap:12px;width:280px;height:64px;padding:0 16px;border-radius:14px;background:var(--sm-external-fill);box-shadow:inset 0 0 0 1px var(--sm-external-border)}
+  .g-tile {width:36px;height:36px;border-radius:10px;background:var(--sm-external-tile)}
+  .g-lines {display:flex;flex-direction:column;gap:6px}
+  .g-lines span {display:block;width:120px;height:8px;border-radius:4px;background:var(--sm-external-border)}
+  .g-lines span+span {width:80px;height:6px;background:var(--sm-panel-border)}
+  .h-content {position:absolute;inset:0}
+  .hero-h {position:absolute;left:96px;top:250px;margin:0;font-size:112px;line-height:0.94;font-weight:600;letter-spacing:-0.045em;color:var(--sm-text);perspective:1600px;perspective-origin:40% 40%}
+  .hl {display:block;white-space:nowrap}
+  .hw {display:inline-block;animation:hdrop 1000ms linear backwards;transform-origin:50% 60%}
+  .hacc {position:relative;display:inline-block;color:var(--site-accent);animation:acc 320ms cubic-bezier(0.23, 1, 0.32, 1) 2180ms backwards}
+  .hacc .hw {color:inherit}
+  .hglow {position:absolute;left:-18px;right:-18px;top:14px;bottom:4px;border-radius:28px;background:var(--site-accent);filter:blur(22px);opacity:0;pointer-events:none;z-index:-1;animation:hglow 900ms cubic-bezier(0.23, 1, 0.32, 1) 2180ms backwards}
+  .h-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .h-route .rt {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .h-route .rt-in {stroke:url(#hr-fade);stroke-dasharray:1 1;animation:rdraw 650ms cubic-bezier(0.33, 1, 0.68, 1) 1480ms backwards}
+  .h-route .ah {fill:var(--sm-text);animation:fadein 140ms linear 2100ms backwards}
+  .h-route .hd2 {fill:var(--sm-stage);stroke:var(--sm-text);stroke-width:1.5;animation:fadein 200ms linear 2240ms backwards}
+  .comet {position:absolute;left:0;top:0;width:7px;height:7px;border-radius:9999px;background:var(--sm-text);box-shadow:0 0 0 5px rgb(237 237 236 / 0.18), 0 0 18px 4px rgb(237 237 236 / 0.22);offset-path:path("M 56 0 V 402 Q 56 418 72 418 H 79");offset-rotate:0deg;offset-distance:100%;opacity:0;animation:comet 720ms cubic-bezier(0.5, 1, 0.89, 1) 1480ms backwards}
+  .h-lede {position:absolute;left:96px;top:506px;width:600px;animation:rise 900ms cubic-bezier(0.23, 1, 0.32, 1) 1250ms backwards}
+  .h-cta {position:absolute;left:96px;top:600px;display:flex;align-items:center;gap:10px;animation:rise 900ms cubic-bezier(0.23, 1, 0.32, 1) 1380ms backwards}
+  .h-works {position:absolute;left:98px;top:686px;font-size:13px;color:var(--sm-text-muted);animation:rise 900ms cubic-bezier(0.23, 1, 0.32, 1) 1520ms backwards}
+  .h-bridge {display:none}
+  &.live .h-bridge {display:inline;stroke-dasharray:1 1}
+  .hero-chips {position:absolute;inset:0;transform-origin:720px 450px}
+  .vx {position:absolute;left:720px;top:450px;width:0;height:0}
+  .vring {position:absolute;left:0;top:0}
+  .vchip {position:absolute;left:0;top:0;white-space:nowrap;padding:8px 14px;border-radius:9px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-family:var(--font-mono);line-height:1.5;color:var(--sm-text)}
+  .vghost {padding:0;background:none;box-shadow:none}
+  .kline-wrap {position:absolute;inset:0;transform-origin:720px 450px}
+  .kl {position:absolute;left:96px;margin:0;font-size:96px;line-height:1;font-weight:600;letter-spacing:-0.045em;color:var(--sm-text);white-space:nowrap;transition:color 300ms ease}
+  .kw {display:inline-block}
+  .kw>span {display:inline-block}
+  .cdot {position:absolute;left:714px;top:444px;width:12px;height:12px;border-radius:9999px;background:var(--sm-edge);opacity:0}
+  .shock {position:absolute;left:120px;top:-150px;width:1200px;height:1200px;border-radius:9999px;box-shadow:inset 0 0 0 1.5px var(--sm-text);opacity:0}
+  .s2-grid {position:absolute;inset:0;opacity:0;-webkit-mask-image:radial-gradient(closest-side, #000 60%, transparent 100%);mask-image:radial-gradient(closest-side, #000 60%, transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:2400px 2400px;mask-size:2400px 2400px}
+  .mk {position:absolute;left:528px;top:258px;overflow:visible;opacity:0}
+  .mk .bx {transform-box:fill-box;transform-origin:center}
+  .mk-route {stroke-dasharray:100;stroke-dashoffset:0}
+  &.live .mk-route {stroke-dashoffset:100;opacity:0;transition:stroke-dashoffset 640ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1ms linear}
+  &.live .mk-route.drawn {stroke-dashoffset:0;opacity:1}
+  .mcard {opacity:0}
+  .mcard .nc {border-radius:inherit}
+  .mc-in {position:absolute;inset:0;display:flex;flex-direction:column}
+  .mc-ov {position:absolute;inset:0;border-radius:inherit}
+  .s2-edge {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .s2-edge .ln {fill:none;stroke:var(--sm-edge);stroke-width:1.25}
+  .s2-edge .ah {fill:var(--sm-edge)}
+  .s2-edge .lead {fill:none;stroke:var(--sm-database-accent);stroke-width:1.75}
+  .s2-edge g {opacity:0}
+  .selring {position:absolute;left:759px;top:413px;width:290px;height:74px;border-radius:17px;box-shadow:0 0 0 2px var(--sm-database-accent);opacity:0;pointer-events:none}
+  .s2ev {position:absolute;left:768px;top:554px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;opacity:0}
+  .s2ev code {font-size:15px;color:var(--sm-text)}
+  .s2ev .ic {color:var(--sm-database-accent)}
+  .s2cap {position:absolute;left:0;right:0;text-align:center;opacity:0}
+  .s2-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .s2-route path {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .bigp {position:absolute;left:150px;top:282px;font-family:var(--font-mono);font-size:64px;line-height:1.3;color:var(--sm-text);transform-origin:0 0;opacity:0}
+  .bigp-c {position:absolute;left:-58px;top:0;color:var(--sm-text-muted)}
+  .ty {display:block;box-sizing:content-box;overflow:hidden;white-space:nowrap;border-right:0.08em solid transparent}
+  .term {position:absolute;left:96px;top:112px;width:640px;height:428px;border-radius:16px;overflow:hidden}
+  .term-h, .json-h {display:flex;align-items:center;height:48px;padding:0 22px;font-size:13px;color:var(--sm-text-muted);box-shadow:inset 0 -1px 0 var(--sm-panel-border)}
+  .term-b {display:flex;flex-direction:column;padding:18px 22px;font-size:14.5px;line-height:25px;color:var(--sm-text-muted);white-space:pre}
+  .term-b b {font-weight:600;color:var(--sm-text)}
+  .tl-row {display:block;margin:0 -10px;padding:0 10px;border-radius:6px}
+  .row-err {background:rgb(240 128 110 / 0.13)}
+  .row-ok {background:rgb(166 217 122 / 0.12)}
+  .row-del {background:rgb(143 166 242 / 0.12)}
+  .t-ink {color:var(--sm-text)}
+  .t-err {color:var(--sm-cache-accent)}
+  .t-ok {color:var(--sm-service-accent)}
+  .tp {display:block;color:var(--sm-text);white-space:pre-wrap;margin-bottom:14px}
+  .tp .c {color:var(--sm-text-muted)}
+  .json {position:absolute;left:768px;top:112px;width:576px;height:428px;border-radius:16px;background:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border);overflow:hidden}
+  .json-b {display:flex;flex-direction:column;padding:14px 22px;font-size:13px;line-height:19.5px;color:var(--sm-text-muted);white-space:pre}
+  .j-s {color:var(--sm-text)}
+  .j-t {color:var(--a)}
+  .fixv {display:inline}
+  .fx-bad {color:var(--sm-cache-accent);display:none}
+  .fx-ok {color:var(--sm-text)}
+  &.live .fx-bad, &.live .fx-ok {display:inline-block;overflow:hidden;vertical-align:bottom;white-space:pre}
+  .fly {opacity:1}
+  .steps {position:absolute;left:96px;top:716px;width:1248px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:32px;margin:0;padding:0;list-style:none}
+  .step {position:relative;padding-top:34px}
+  .sdot {position:absolute;left:0;top:0;width:9px;height:9px;margin:-1px 0 0 -1px;border-radius:9999px;background:var(--sm-text);box-shadow:0 0 0 1.5px var(--sm-text);z-index:1}
+  .s-n {display:block;font-size:12.5px;color:var(--sm-text-muted);margin-bottom:8px}
+  .step h3 {font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-0.02em;color:var(--sm-text)}
+  .step p {margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--sm-text-muted);max-width:280px}
+  .s3-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .s3-route path {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .s3-route .base {stroke:var(--sm-panel-border)}
+  .lights {position:absolute;left:-2400px;right:-2400px;top:-1200px;bottom:-1200px;background:var(--sm-page);color:var(--sm-text);transition:background-color 200ms ease}
+  .lights-in {position:absolute;left:2400px;top:1200px;width:1440px;height:900px}
+  .vw {position:absolute;left:96px;top:84px;width:1248px;height:800px}
+  .vw-head {position:absolute;left:0;top:0;right:0}
+  .crumb {font-size:14px;line-height:21px;color:var(--sm-text-muted)}
+  .vt {display:flex;align-items:center;gap:14px;margin-top:5px}
+  .vt h2 {font-size:28px;line-height:36px;font-weight:600;letter-spacing:-0.025em}
+  .vt .cnt {font-size:14px;color:var(--sm-text-muted)}
+  .tabs {position:absolute;left:0;top:66px;display:flex;gap:26px;height:36px}
+  .tab {position:relative;height:36px;padding:0;border:0;background:none;font-size:14.5px;color:var(--sm-text-muted);cursor:pointer;transition:color 150ms ease}
+  .tab:hover, .tab[aria-selected="true"] {color:var(--sm-text)}
+  .tab-ind {position:absolute;left:0;top:100px;height:2px;border-radius:2px;background:var(--sm-text);transition:translate 180ms cubic-bezier(0.77, 0, 0.175, 1), width 180ms cubic-bezier(0.77, 0, 0.175, 1)}
+  .vw-rule {position:absolute;left:0;right:0;top:102px;height:1px;background:var(--sm-divider)}
+  .vstage {position:absolute;left:0px;top:114px;width:932px;height:686px;border-radius:20px;background-color:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border)}
+  .vstage>.grid-bg {position:absolute;inset:0;border-radius:20px}
+  .vclip {position:absolute;left:0px;top:114px;width:932px;height:686px;clip-path:inset(0px round 20px);touch-action:none;cursor:grab}
+  .vclip.drag {cursor:grabbing}
+  .vcam {position:absolute;left:0;top:0;width:932px;height:686px;transform-origin:466px 343px}
+  .plane-wrap {position:absolute;left:99px;top:-5px;width:734px;height:656px;perspective:2200px;perspective-origin:50% 20%}
+  .plane {position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 45%}
+  .plane-grid {position:absolute;left:-700px;right:-700px;top:-500px;bottom:-500px;opacity:0}
+  .plane .dg {transform:scale(0.728);transform-origin:0 0;transform-style:preserve-3d}
+  .plane .cw {transform-style:preserve-3d}
+  .vchrome .pnl {position:absolute}
+  .v-id {left:15px;top:129px;width:250px;height:64px;display:flex;align-items:center;gap:12px;padding:0 14px}
+  .v-id .tile {width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sm-page);color:var(--sm-text)}
+  .v-id b {display:block;font-size:14px;line-height:20px;font-weight:500}
+  .v-id span span {display:block;font-size:12.5px;line-height:16px;color:var(--sm-text-muted)}
+  .v-tools {left:15px;top:201px;height:52px;display:flex;align-items:center;gap:2px;padding:0 8px}
+  .v-tools .sep {width:1px;height:20px;margin:0 4px;background:var(--sm-divider)}
+  .v-zoom {left:15px;top:745px;height:40px;display:flex;align-items:center;gap:2px;padding:0 4px;border-radius:9999px}
+  .v-zoom .ib {width:32px;height:32px;border-radius:9999px}
+  .v-zoom .pct {min-width:48px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
+  .pop {position:absolute;z-index:5;left:15px;top:261px;width:300px;padding:12px;border-radius:16px}
+  .pop input[type="search"] {width:100%;height:36px;padding:0 12px;border:0;border-radius:12px;background:var(--sm-page);color:var(--sm-text);font:inherit;font-size:14px;outline:none}
+  .pop input[type="search"]:focus-visible {box-shadow:inset 0 0 0 2px var(--sm-text)}
+  .pop .hint {margin-top:8px;font-size:12px;line-height:20px;color:var(--sm-text-muted)}
+  .pop-t {font-size:12.5px;font-weight:500;color:var(--sm-text-muted);margin:2px 6px 6px}
+  .lens-r {display:flex;align-items:center;gap:10px;height:32px;padding:0 6px;border-radius:8px;font-size:13px;cursor:pointer}
+  .lens-r:hover {background:var(--sm-page)}
+  .lens-r input {margin:0;accent-color:var(--sm-text)}
+  .lens-r span:last-child {margin-left:auto}
+  .dot {display:inline-block;width:8px;height:8px;border-radius:9999px;flex-shrink:0}
+  .insp {position:absolute;left:948px;top:114px;width:300px;height:686px;border-radius:20px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);padding:20px;overflow:auto}
+  .insp .cap {display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--sm-text-muted)}
+  .insp h3 {margin-top:4px;font-size:18px;line-height:1.5;font-weight:600;letter-spacing:-0.025em}
+  .insp .sub {font-size:13px;line-height:1.5;color:var(--sm-text-muted)}
+  .insp h4 {margin-top:24px;margin-bottom:10px;font-size:13px;font-weight:600}
+  .insp ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
+  .insp li {display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
+  .lg-l {display:flex;align-items:center;gap:10px}
+  .kv {display:flex;justify-content:space-between;gap:16px;font-size:13px;margin-bottom:8px}
+  .kv span:first-child {color:var(--sm-text-muted)}
+  .conn {display:flex;align-items:center;gap:8px;width:calc(100% + 16px);height:32px;margin:0 -8px;padding:0 8px;border:0;border-radius:8px;background:none;font-size:13px;text-align:left;cursor:pointer}
+  .conn:hover {background:var(--sm-page)}
+  .conn .muted {margin-left:auto;font-size:12px}
+  .ev {display:block;font-family:var(--font-mono);font-size:12px;color:var(--sm-text);overflow-wrap:anywhere}
+  .ev-n {margin-top:2px;font-size:12px;color:var(--sm-text-muted)}
+  .i-row {display:flex;justify-content:space-between;align-items:center}
+  .i-acts .ib {width:32px;height:32px}
+  .tbtn {display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;margin-top:14px;border:0;border-radius:10px;background:var(--sm-page);font-size:13px;cursor:pointer;transition:background-color 150ms ease, color 150ms ease}
+  .tbtn[aria-pressed="true"] {background:var(--sm-primary);color:var(--sm-primary-text)}
+  .caption {margin-top:12px;font-size:13px;line-height:1.5;color:var(--sm-text-muted)}
+  .drop-title {position:absolute;left:0;right:0;top:108px;text-align:center;opacity:0;pointer-events:none}
+  .v-route-dark {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .v-route-dark path {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .v-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .v-route path {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .dt-dark {display:none}
+  &.live .dt-dark {display:block;opacity:1}
+  .feat-sec {position:relative;height:880px;overflow:hidden;background:var(--sm-page);color:var(--sm-text)}
+  .rline {position:absolute;top:0;bottom:0;left:calc(50% + var(--gl-off, -664px) - 0.75px);width:1.5px;background:var(--sm-text)}
+  .feat-in {position:relative;max-width:1440px;margin:0 auto;padding:104px 96px 0}
+  .feat-h {font-size:120px;line-height:0.95;font-weight:600;letter-spacing:-0.05em}
+  .feat-lede {margin-top:28px;max-width:720px}
+  .feat-g {display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:0;margin-top:60px;box-shadow:inset 0 1px 0 var(--sm-divider)}
+  .feat {position:relative;padding:28px 28px 32px 0;box-shadow:inset 0 -1px 0 var(--sm-divider)}
+  .feat:nth-child(4n+2), .feat:nth-child(4n+3), .feat:nth-child(4n+4) {padding-left:28px;box-shadow:inset 0 -1px 0 var(--sm-divider), inset 1px 0 0 var(--sm-divider)}
+  .feat-t {display:flex;align-items:center;gap:10px;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-0.02em}
+  .feat-t .ic {color:var(--sm-text-muted)}
+  .feat-t .kbd {margin-left:auto}
+  .feat p {margin-top:12px;font-size:15px;line-height:1.55;color:var(--sm-text-muted)}
+  .f-route {position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
+  &.live .a-kd0 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd1 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd2 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd3 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd4 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  .kcam {position:absolute;inset:0;transform-origin:720px 640px}
+  .kinds-h {position:absolute;left:96px;top:56px;height:260px;overflow:hidden;padding:0 12px 0 0}
+  .kn-col {display:flex;flex-direction:column;transform:translateY(-520px)}
+  &.live .kn-col {transform:none}
+  .kn {display:block;height:260px;font-size:200px;line-height:260px;font-weight:600;letter-spacing:-0.05em;white-space:nowrap}
+  .kdefs {position:absolute;left:100px;top:338px;height:32px}
+  .kdef {position:absolute;left:0;top:0;white-space:nowrap;font-size:22px;line-height:1.4;color:var(--sm-text-muted);opacity:0}
+  .kdef.on {opacity:1}
+  .kpills {position:absolute;right:96px;top:330px;display:flex;gap:4px;padding:5px;border-radius:9999px}
+  .kpill {height:36px;padding:0 14px;border:0;border-radius:9999px;background:transparent;color:var(--sm-text-muted);font-size:14px;cursor:pointer;transition:background-color 150ms ease, color 150ms ease}
+  .kpill:hover {color:var(--sm-text)}
+  .kpill[aria-pressed="true"] {background:var(--sm-primary);color:var(--sm-primary-text)}
+  .kmore {position:absolute;right:96px;top:176px;font-size:14px}
+  .klayer {position:absolute;transform-origin:0 0;opacity:0}
+  .klayer.on {opacity:1}
+  .kslot {position:absolute;opacity:1}
+  .kface {position:absolute;inset:0;opacity:0;display:block}
+  .kface.on {opacity:1}
+  .kface .scd {width:176px;transform:scale(0.8261000000000001);transform-origin:0 0}
+  .k-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .k-route path {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .kface .scd {height:calc(100% / 0.8261000000000001)}
+  .mm-e {fill:none;stroke:var(--sm-edge);stroke-width:1}
+  .mm-c {fill-opacity:.55}
+  .mm-lane {fill:var(--sm-group-fill);stroke:var(--sm-panel-border);stroke-width:1}
+  .mm-fr {fill:none;stroke:var(--sm-group-border);stroke-width:1;stroke-dasharray:3 3}
+  .file {position:absolute;left:900px;top:196px;width:332px;height:460px;perspective:1400px}
+  .file-in {position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg)}
+  .face {position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;background:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border), 0 40px 100px -40px rgb(0 0 0 / 0.6);-webkit-backface-visibility:hidden;backface-visibility:hidden}
+  .face.back {transform:rotateY(180deg);background:var(--sm-panel)}
+  .ff-t {font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-0.02em}
+  .ff-s {margin-top:-8px;font-size:13px;color:var(--sm-text-muted)}
+  .ff-map {display:grid;place-items:center;flex:1}
+  .fb-shot {height:268px;border-radius:12px;background-color:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border);display:grid;place-items:center;overflow:hidden}
+  .fb-n {margin-top:6px;font-size:20px;line-height:1.5}
+  .fb-s {font-size:15px;line-height:1.5;color:var(--sm-text-muted)}
+  .of-cap {position:absolute;left:0;right:0;top:112px;text-align:center;opacity:0}
+  .fl-lights {position:absolute;left:-2400px;right:-2400px;top:-1200px;bottom:-1200px;display:none;background:var(--sm-page);color:var(--sm-text);pointer-events:none}
+  &.live .fl-lights {display:block}
+  .fl-in {position:absolute;left:2400px;top:1200px;width:1440px;height:900px}
+  .of-h {position:absolute;left:96px;top:200px;font-size:104px;line-height:0.98;font-weight:600;letter-spacing:-0.05em}
+  .of-list {position:absolute;left:100px;top:446px;display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;max-width:640px}
+  .of-list li {display:flex;gap:14px;font-size:17px;line-height:1.5;color:var(--sm-text-muted)}
+  .of-list .ic {margin-top:3px;color:var(--sm-text)}
+  .of-more {position:absolute;left:96px;top:664px;display:flex;align-items:center;gap:20px}
+  .of-more p {font-size:15px;line-height:1.5;color:var(--sm-text-muted);max-width:420px}
+  .pill-l {display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 20px;border-radius:9999px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);color:var(--sm-text);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:box-shadow 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1)}
+  .pill-l:hover {box-shadow:inset 0 0 0 1.5px var(--sm-text)}
+  .pill-l:active {transform:scale(0.96)}
+  .pill-l:focus-visible {outline:2px solid var(--sm-text);outline-offset:2px}
+  .f-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .f-route path {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .inst {position:relative;height:960px;overflow:hidden;background:var(--sm-page);color:var(--sm-text)}
+  .inst-in {position:relative;max-width:1440px;margin:0 auto;padding:128px 96px 0}
+  .ir-a {position:absolute;top:0;left:calc(50% + var(--gl-off, -664px) - 0.75px);width:calc(-1 * var(--gl-off, -664px) - 15.25px);height:48.75px;border-left:1.5px solid var(--sm-text);border-bottom:1.5px solid var(--sm-text);border-bottom-left-radius:16px}
+  .ir-b {position:absolute;top:47.25px;left:calc(50% - 16px);width:16.75px;height:81.5px;border-top:1.5px solid var(--sm-text);border-right:1.5px solid var(--sm-text);border-top-right-radius:16px}
+  .ir-d {position:absolute;top:124.5px;left:calc(50% - 4.5px);width:9px;height:9px;border-radius:9999px;background:var(--sm-panel);box-shadow:inset 0 0 0 1.5px var(--sm-text);z-index:2}
+  .target {position:relative;width:920px;margin:0 auto;padding:56px 72px 48px;border-radius:28px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border), 0 40px 120px -40px rgb(0 0 0 / 0.5);text-align:center}
+  .target img {display:block;margin:0 auto}
+  .target h2 {margin-top:32px}
+  .target .t-lede {margin:18px auto 0;max-width:620px}
+  .ist {display:flex;flex-direction:column;gap:20px;margin-top:40px;text-align:left}
+  .ist-row {display:grid;grid-template-columns:36px minmax(0, 1fr);gap:16px;align-items:start}
+  .ist-n {display:grid;place-items:center;width:28px;height:28px;margin-top:4px;border-radius:9999px;box-shadow:inset 0 0 0 1.5px var(--sm-text-muted);font-size:13px;color:var(--sm-text)}
+  .ist-row h3 {font-size:15px;font-weight:600;margin-bottom:10px}
+  .ist-row .cmd {width:100%}
+  .ist-row .cmd-t {overflow:hidden;text-overflow:ellipsis}
+  .ask {padding:16px 20px;border-radius:14px;background:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-size:16px;line-height:1.55;color:var(--sm-text)}
+  .ist-alt {margin-top:24px;padding-top:22px;box-shadow:inset 0 1px 0 var(--sm-divider);text-align:left;font-size:14px;color:var(--sm-text-muted)}
+  .ist-alt .cmd {margin-top:12px;width:100%}
+  .ilinks {display:flex;justify-content:center;gap:6px;margin-top:26px}
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {animation:none !important;transition:none !important}
+  }
+}
+
+@keyframes gridgrow{0%{-webkit-mask-size:0px 0px;mask-size:0px 0px}100%{-webkit-mask-size:1900px 1400px;mask-size:1900px 1400px}}
+@keyframes driftA{0%{translate:0 0}100%{translate:26px -14px}}
+@keyframes driftB{0%{translate:0 0}100%{translate:-22px 16px}}
+@keyframes driftC{0%{translate:0 0}100%{translate:14px 22px}}
+@keyframes chipin{0%{opacity:0}}
+@keyframes hdrop{0%{opacity:0;transform:translate3d(var(--x), var(--y), var(--z));filter:blur(var(--bl));animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1)}22%{opacity:0.5;transform:translate3d(calc(var(--x) * 0.82), calc(var(--y) * 0.82), var(--z));filter:blur(var(--bl));animation-timing-function:cubic-bezier(0.55, 0, 1, 0.45)}70%{opacity:1;transform:translate3d(0px, 0px, 0px);filter:blur(0px);animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1)}84%{transform:translate3d(0px, 0px, 18px);animation-timing-function:cubic-bezier(0.55, 0, 1, 0.45)}100%{opacity:1;transform:translate3d(0px, 0px, 0px);filter:blur(0px)}}
+@keyframes acc{0%{color:var(--sm-text)}100%{color:var(--brand-accent)}}
+@keyframes hglow{0%{opacity:0.42;transform:scale(0.96)}100%{opacity:0;transform:scale(1.08)}}
+@keyframes rdraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
+@keyframes fadein{0%{opacity:0}100%{opacity:1}}
+@keyframes comet{0%{offset-distance:0%;opacity:1}96%{opacity:1}100%{offset-distance:100%;opacity:0}}
+@keyframes rise{0%{opacity:0;translate:0 18px}100%{opacity:1;translate:0 0}}
+@keyframes spin{100%{rotate:360deg}}
diff --git a/site/components/landing/desktop/Agent.tsx b/site/components/landing/desktop/Agent.tsx
new file mode 100644
index 0000000..d57a1a2
--- /dev/null
+++ b/site/components/landing/desktop/Agent.tsx
@@ -0,0 +1,291 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Agent() {
+  return (
+    <>
+      <section
+        className="scn"
+        id="agent"
+        data-scene="agent"
+        data-runway="2.6"
+        data-fw="1440"
+        data-fh="900"
+        data-theme-sec="dark"
+        style={s({ height: '900px' })}
+        aria-label="Ask your coding agent"
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '1440px', height: '900px' })}>
+            <h2 className="sr">Ask your coding agent. It writes the JSON, stackmap checks it and delivers one file.</h2>
+            <svg className="s3-route" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+              <path d="M 1384 -1200 V 0" />
+              <path className="base" d="M 1384 0 V 704 Q 1384 720 1368 720 H 72 Q 56 720 56 736 V 900" />
+              <path
+                data-route="agent"
+                data-r0="0"
+                data-r1="0.97"
+                data-head="h-agent"
+                d="M 1384 0 V 704 Q 1384 720 1368 720 H 72 Q 56 720 56 736 V 900"
+                pathLength="1"
+              />
+              <path data-route="agent" data-r0="0.97" data-r1="1" d="M 56 900 V 2100" pathLength="1" />
+              <g className="rhead" data-route-head="h-agent">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+            </svg>
+            <div className="term pnl a-term">
+              <div className="term-h mono">~/commerce-api</div>
+              <div className="term-b mono">
+                <span className="tp a-tp">
+                  <span className="c">› </span>Make an architecture diagram of this repository, backed by evidence from the code.
+                </span>
+                <span className="tl-row a-tr0">
+                  <span className="t-ink">writing</span> <span className="t-ink">.stackmap/commerce-api/diagram.json</span>
+                </span>
+                <span className="tl-row a-tr1">
+                  <b>stackmap</b> · <span className="t-ink">validate diagram.json</span>
+                </span>
+                <span className="tl-row row-err a-tr2">
+                  <span className="t-err">error</span> refs/unknown-node /edges/6/to
+                </span>
+                <span className="tl-row row-err a-tr3"> Unknown node "orders-db"</span>
+                <span className="tl-row a-tr4"> fix: use "orders"</span>
+                <span className="tl-row a-tr5">
+                  <span className="t-err">✗ 1 error</span>
+                </span>
+                <span className="tl-row a-tr6">
+                  <b>stackmap</b> · <span className="t-ink">validate diagram.json</span>
+                </span>
+                <span className="tl-row row-ok a-tr7">
+                  <span className="t-ok">✓ valid: no diagnostics</span>
+                </span>
+                <span className="tl-row a-tr8">
+                  <b>stackmap</b> · <span className="t-ink">deliver diagram.json</span>
+                </span>
+                <span className="tl-row row-del a-tr9">
+                  delivered <span className="acc">.stackmap/commerce-api/diagram.html</span>
+                </span>
+                <span className="tl-row row-del a-tr10">
+                  {' '}
+                  · sha256 {SITE.receipt.sha256.slice(0, 12)}… · {SITE.receipt.bytes} bytes
+                </span>
+              </div>
+            </div>
+            <div className="json a-json">
+              <div className="json-h mono">diagram.json</div>
+              <div className="json-b mono">
+                <span className="j-row a-jr0">{'{'}</span>
+                <span className="j-row a-jr1">
+                  {' '}
+                  "kind": <span className="j-s">"architecture"</span>,
+                </span>
+                <span className="j-row a-jr2">
+                  {' '}
+                  "title": <span className="j-s">"Commerce API"</span>,
+                </span>
+                <span className="j-row a-jr3"> "nodes": [</span>
+                <span className="j-row a-jr4">
+                  {' '}
+                  {'{'} "id": <span className="j-s">"storefront"</span>, "type": <span className="j-t t-client">"client"</span> {'}'},
+                </span>
+                <span className="j-row a-jr5">
+                  {' '}
+                  {'{'} "id": <span className="j-s">"edge"</span>, "type": <span className="j-t t-gateway">"gateway"</span> {'}'},
+                </span>
+                <span className="j-row a-jr6">
+                  {' '}
+                  {'{'} "id": <span className="j-s">"api"</span>, "type": <span className="j-t t-service">"service"</span>,
+                </span>
+                <span className="j-row a-jr7"> "evidence": [</span>
+                <span className="j-row a-jr8">
+                  {' '}
+                  {'{'} "file": <span className="j-s">"services/api/src/server.ts"</span>, "line": 12 {'}'}] {'}'},
+                </span>
+                <span className="j-row a-jr9">
+                  {' '}
+                  {'{'} "id": <span className="j-s">"orders"</span>, "type": <span className="j-t t-database">"database"</span>, "group":{' '}
+                  <span className="j-s">"data"</span> {'}'},
+                </span>
+                <span className="j-row a-jr10">
+                  {' '}
+                  {'{'} "id": <span className="j-s">"events"</span>, "type": <span className="j-t t-queue">"queue"</span> {'}'},
+                </span>
+                <span className="j-row a-jr11"> …</span>
+                <span className="j-row a-jr12"> ],</span>
+                <span className="j-row a-jr13"> "edges": [</span>
+                <span className="j-row a-jr14">
+                  {' '}
+                  {'{'} "id": <span className="j-s">"e-api-orders"</span>, "from": <span className="j-s">"api"</span>, "to":{' '}
+                  <span className="j-s fixv">
+                    <span className="fx-bad a-fxbad">"orders-db"</span>
+                    <span className="fx-ok a-fxok">"orders"</span>
+                  </span>{' '}
+                  {'}'},
+                </span>
+                <span className="j-row a-jr15"> …</span>
+                <span className="j-row a-jr16"> ]</span>
+                <span className="j-row a-jr17">{'}'}</span>
+              </div>
+            </div>
+            <div className="cw t-client a-fly0 fly" style={s({ left: '96px', top: '572px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="nc-h">
+                  <span className="tile">
+                    <svg
+                      className="ic"
+                      width="17"
+                      height="17"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.75"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <rect width="20" height="14" x="2" y="3" rx="2" />
+                      <line x1="8" x2="16" y1="21" y2="21" />
+                      <line x1="12" x2="12" y1="17" y2="21" />
+                    </svg>
+                  </span>
+                  <span className="nc-tx">
+                    <span className="ct">Storefront</span>
+                    <span className="cs">Next.js</span>
+                  </span>
+                </span>
+              </span>
+            </div>
+            <div className="cw t-gateway a-fly1 fly" style={s({ left: '419px', top: '572px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="nc-h">
+                  <span className="tile">
+                    <svg
+                      className="ic"
+                      width="17"
+                      height="17"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.75"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <rect x="16" y="16" width="6" height="6" rx="1" />
+                      <rect x="2" y="16" width="6" height="6" rx="1" />
+                      <rect x="9" y="2" width="6" height="6" rx="1" />
+                      <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
+                      <path d="M12 12V8" />
+                    </svg>
+                  </span>
+                  <span className="nc-tx">
+                    <span className="ct">Edge gateway</span>
+                    <span className="cs">Public routing</span>
+                  </span>
+                </span>
+              </span>
+            </div>
+            <div className="cw t-service a-fly2 fly" style={s({ left: '741px', top: '572px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="nc-h">
+                  <span className="tile">
+                    <svg
+                      className="ic"
+                      width="17"
+                      height="17"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.75"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <rect x="2" y="4" width="20" height="16" rx="2" />
+                      <path d="M10 4v4" />
+                      <path d="M2 8h20" />
+                      <path d="M6 4v4" />
+                    </svg>
+                  </span>
+                  <span className="nc-tx">
+                    <span className="ct">shop-api</span>
+                    <span className="cs">REST API</span>
+                  </span>
+                </span>
+              </span>
+            </div>
+            <div className="cw t-database a-fly3 fly" style={s({ left: '1064px', top: '572px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="nc-h">
+                  <span className="tile">
+                    <svg
+                      className="ic"
+                      width="17"
+                      height="17"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.75"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <ellipse cx="12" cy="5" rx="9" ry="3" />
+                      <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+                      <path d="M3 12A9 3 0 0 0 21 12" />
+                    </svg>
+                  </span>
+                  <span className="nc-tx">
+                    <span className="ct">Orders DB</span>
+                    <span className="cs">PostgreSQL</span>
+                  </span>
+                </span>
+              </span>
+            </div>
+            <p className="bigp mono a-bigp" aria-hidden="true">
+              <span className="bigp-c">›</span>
+              <span className="ty a-ty0" style={s({ width: '28ch' })}>
+                Make an architecture diagram
+              </span>
+              <span className="ty a-ty1" style={s({ width: '29ch' })}>
+                of this repository, backed by
+              </span>
+              <span className="ty a-ty2" style={s({ width: '23ch' })}>
+                evidence from the code.
+              </span>
+            </p>
+            <ol className="steps">
+              <li className="step a-st0">
+                <i className="sdot a-sd0" aria-hidden="true"></i>
+                <span className="mono s-n">01</span>
+                <h3>Ask.</h3>
+                <p>Ask your coding agent for a diagram of a codebase, a system, a process or a request.</p>
+              </li>
+              <li className="step a-st1">
+                <i className="sdot a-sd1" aria-hidden="true"></i>
+                <span className="mono s-n">02</span>
+                <h3>It writes JSON.</h3>
+                <p>A small typed diagram.json: nodes, connections, groups and views. No coordinates.</p>
+              </li>
+              <li className="step a-st2">
+                <i className="sdot a-sd2" aria-hidden="true"></i>
+                <span className="mono s-n">03</span>
+                <h3>stackmap checks it.</h3>
+                <p>validate names each problem with a code and the allowed fixes. The agent repairs what is named.</p>
+              </li>
+              <li className="step a-st3">
+                <i className="sdot a-sd3" aria-hidden="true"></i>
+                <span className="mono s-n">04</span>
+                <h3>One file comes back.</h3>
+                <p>deliver lays the diagram out and writes one self-contained HTML viewer.</p>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/desktop/Features.tsx b/site/components/landing/desktop/Features.tsx
new file mode 100644
index 0000000..aa7b7b3
--- /dev/null
+++ b/site/components/landing/desktop/Features.tsx
@@ -0,0 +1,217 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Features() {
+  return (
+    <>
+      <section className="feat-sec" data-theme-sec="light" data-sec="features" aria-labelledby="feat-h" data-theme="light">
+        <i className="rline" aria-hidden="true"></i>
+        <div className="feat-in">
+          <h2 className="feat-h" id="feat-h" data-rv="lines">
+            <span className="ml">
+              <span>Trace. Route.</span>
+            </span>{' '}
+            <span className="ml">
+              <span className="acc" style={s({ transitionDelay: '90ms' })}>
+                Play.
+              </span>
+            </span>
+          </h2>
+          <p className="feat-lede t-lede" data-rv="" style={s({ transitionDelay: '120ms' })}>
+            The viewer above is the real thing, cut down to one diagram, and every control works. Here is what each one does.
+          </p>
+          <div className="feat-g">
+            <div className="feat" data-rv="" style={s({ transitionDelay: '0ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="m21 21-4.34-4.34" />
+                  <circle cx="11" cy="11" r="8" />
+                </svg>
+                <span>Explore</span>
+                <span className="kbd">Click</span>
+              </h3>
+              <p>Select a card for its details, connections and the file and line behind it.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '70ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M15 6a9 9 0 0 0-9 9V3" />
+                  <circle cx="18" cy="6" r="3" />
+                  <circle cx="6" cy="18" r="3" />
+                </svg>
+                <span>Trace</span>
+                <span className="kbd">T</span>
+              </h3>
+              <p>Keep a node’s upstream and downstream. Everything else dims; nothing moves.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '140ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="6" cy="19" r="3" />
+                  <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" />
+                  <circle cx="18" cy="5" r="3" />
+                </svg>
+                <span>Route</span>
+                <span className="kbd">R</span>
+              </h3>
+              <p>Pick two nodes and every path between them lights up, hop by hop.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '210ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
+                  <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
+                  <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
+                </svg>
+                <span>Find</span>
+                <span className="kbd">/</span>
+              </h3>
+              <p>Search titles, ids and types. The lens dims the types you don’t need.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '0ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M2 3h20" />
+                  <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
+                  <path d="m7 21 5-5 5 5" />
+                </svg>
+                <span>Guided views</span>
+                <span className="kbd">F</span>
+              </h3>
+              <p>Tabs your agent defines, like Checkout path. Present steps through them full screen.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '70ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
+                </svg>
+                <span>Play</span>
+                <span className="kbd">P</span>
+              </h3>
+              <p>Pulses travel whatever you’re looking at: the diagram, a view, a trace or a route.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '140ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="18" cy="5" r="3" />
+                  <circle cx="6" cy="12" r="3" />
+                  <circle cx="18" cy="19" r="3" />
+                  <line x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
+                  <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
+                </svg>
+                <span>Share</span>
+                <span className="kbd">⌘C</span>
+              </h3>
+              <p>The URL keeps the view, selection, route and playback. Export PNG, JPEG, WebP, SVG or a video.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '210ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="12" cy="12" r="4" />
+                  <path d="M12 2v2" />
+                  <path d="M12 20v2" />
+                  <path d="m4.93 4.93 1.41 1.41" />
+                  <path d="m17.66 17.66 1.41 1.41" />
+                  <path d="M2 12h2" />
+                  <path d="M20 12h2" />
+                  <path d="m6.34 17.66-1.41 1.41" />
+                  <path d="m19.07 4.93-1.41 1.41" />
+                </svg>
+                <span>Themes</span>
+              </h3>
+              <p>Dark and light, and every animation respects reduced motion.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/desktop/Files.tsx b/site/components/landing/desktop/Files.tsx
new file mode 100644
index 0000000..90058ca
--- /dev/null
+++ b/site/components/landing/desktop/Files.tsx
@@ -0,0 +1,215 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Files() {
+  return (
+    <>
+      <section
+        className="scn"
+        id="files"
+        data-scene="files"
+        data-runway="2"
+        data-fw="1440"
+        data-fh="900"
+        data-theme-sec="dark"
+        style={s({ height: '900px' })}
+        data-lit="0.0704"
+        aria-label="One file. Opens anywhere."
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '1440px', height: '900px' })}>
+            <p className="of-cap t-lede a-ofcap" aria-hidden="true">
+              Everything you just explored is one file.
+            </p>
+            <svg className="f-route" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+              <path d="M 56 -1200 V 0" />
+              <path data-route="files" data-r0="0" data-r1="0.97" data-head="h-files" d="M 56 0 V 900" pathLength="1" />
+              <path data-route="files" data-r0="0.97" data-r1="1" d="M 56 900 V 2100" pathLength="1" />
+              <g className="rhead" data-route-head="h-files">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+            </svg>
+            <div className="fl-lights a-flights" aria-hidden="true" data-theme="light">
+              <div className="fl-in">
+                <p className="of-cap t-lede a-ofcap">Everything you just explored is one file.</p>
+                <svg className="f-route" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+                  <path d="M 56 -1200 V 0" />
+                  <path data-route="files" data-r0="0" data-r1="0.97" data-head="h-files-l" d="M 56 0 V 900" pathLength="1" />
+                  <path data-route="files" data-r0="0.97" data-r1="1" d="M 56 900 V 2100" pathLength="1" />
+                  <g className="rhead" data-route-head="h-files-l">
+                    <circle r="9" className="rh-halo" />
+                    <circle r="3.25" className="rh-core" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+            <div className="file a-file" aria-hidden="true">
+              <div className="file-in a-filein">
+                <div className="face front" data-theme="light">
+                  <span className="ff-t">Commerce API</span>
+                  <span className="ff-s">Architecture · 11 nodes · 11 connections</span>
+                  <div className="ff-map">
+                    <svg width="288" height="340" viewBox="0 0 288 340" aria-hidden="true" className="mm">
+                      <rect x="10" y="249.3" width="268" height="39.3" rx="3.9" className="mm-fr" />
+                      <polyline points="138.2,69.9 138.2,90.7" className="mm-e" />
+                      <polyline points="230.6,69.9 230.6,76.9 138.2,76.9 138.2,90.7" className="mm-e" />
+                      <polyline points="138.2,109.2 138.2,130" className="mm-e" />
+                      <polyline points="138.2,109.2 138.2,116.1 230.6,116.1 230.6,130" className="mm-e" />
+                      <polyline points="230.6,148.5 230.6,155.4 184.4,155.4 184.4,169.3" className="mm-e" />
+                      <polyline points="230.6,148.5 230.6,263.1" className="mm-e" />
+                      <polyline points="230.6,148.5 230.6,234 144,234 144,263.1" className="mm-e" />
+                      <polyline points="230.6,148.5 230.6,155.4 92,155.4 92,169.3" className="mm-e" />
+                      <polyline points="92,187.8 92,208.6" className="mm-e" />
+                      <polyline points="92,227 92,234 144,234 144,263.1" className="mm-e" />
+                      <polyline points="92,227 92,234 57.4,234 57.4,263.1" className="mm-e" />
+                      <rect x="97.8" y="51.5" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="190.2" y="51.5" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="97.8" y="90.7" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-gateway-accent)' })} className="mm-c" />
+                      <rect x="97.8" y="130" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-security-accent)' })} className="mm-c" />
+                      <rect x="190.2" y="130" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="144" y="169.3" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-external-accent)' })} className="mm-c" />
+                      <rect x="190.2" y="263.1" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-cache-accent)' })} className="mm-c" />
+                      <rect x="103.6" y="263.1" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-database-accent)' })} className="mm-c" />
+                      <rect x="51.6" y="169.3" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-queue-accent)' })} className="mm-c" />
+                      <rect x="51.6" y="208.6" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="16.9" y="263.1" width="80.9" height="18.5" rx="3.5" style={s({ fill: 'var(--sm-storage-accent)' })} className="mm-c" />
+                    </svg>
+                  </div>
+                </div>
+                <div className="face back">
+                  <div className="fb-shot grid-bg">
+                    <svg width="280" height="250" viewBox="0 0 280 250" aria-hidden="true" className="mm">
+                      <rect x="14.5" y="199.2" width="250.9" height="36.8" rx="3.7" className="mm-fr" />
+                      <polyline points="134.6,31.3 134.6,50.8" className="mm-e" />
+                      <polyline points="221.1,31.3 221.1,37.8 134.6,37.8 134.6,50.8" className="mm-e" />
+                      <polyline points="134.6,68.1 134.6,87.5" className="mm-e" />
+                      <polyline points="134.6,68.1 134.6,74.6 221.1,74.6 221.1,87.5" className="mm-e" />
+                      <polyline points="221.1,104.9 221.1,111.3 177.9,111.3 177.9,124.3" className="mm-e" />
+                      <polyline points="221.1,104.9 221.1,212.2" className="mm-e" />
+                      <polyline points="221.1,104.9 221.1,184.9 140,184.9 140,212.2" className="mm-e" />
+                      <polyline points="221.1,104.9 221.1,111.3 91.3,111.3 91.3,124.3" className="mm-e" />
+                      <polyline points="91.3,141.6 91.3,161.1" className="mm-e" />
+                      <polyline points="91.3,178.4 91.3,184.9 140,184.9 140,212.2" className="mm-e" />
+                      <polyline points="91.3,178.4 91.3,184.9 58.9,184.9 58.9,212.2" className="mm-e" />
+                      <rect x="96.7" y="14" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="183.3" y="14" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="96.7" y="50.8" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-gateway-accent)' })} className="mm-c" />
+                      <rect x="96.7" y="87.5" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-security-accent)' })} className="mm-c" />
+                      <rect x="183.3" y="87.5" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="140" y="124.3" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-external-accent)' })} className="mm-c" />
+                      <rect x="183.3" y="212.2" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-cache-accent)' })} className="mm-c" />
+                      <rect x="102.1" y="212.2" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-database-accent)' })} className="mm-c" />
+                      <rect x="53.5" y="124.3" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-queue-accent)' })} className="mm-c" />
+                      <rect x="53.5" y="161.1" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="21" y="212.2" width="75.7" height="17.3" rx="3.2" style={s({ fill: 'var(--sm-storage-accent)' })} className="mm-c" />
+                    </svg>
+                  </div>
+                  <span className="mono fb-n">diagram.html</span>
+                  <span className="fb-s">One file. Opens offline, in any browser.</span>
+                </div>
+              </div>
+            </div>
+            <h2 className="of-h a-ofh">
+              One file.
+              <br />
+              <span className="acc">Opens anywhere.</span>
+            </h2>
+            <ul className="of-list">
+              <li className="a-ofl0">
+                <svg
+                  className="ic"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>No server, no account, nothing to install to open it.</span>
+              </li>
+              <li className="a-ofl1">
+                <svg
+                  className="ic"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>The same JSON always gives the same file, byte for byte.</span>
+              </li>
+              <li className="a-ofl2">
+                <svg
+                  className="ic"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>The URL keeps the view, the selection, the route and playback.</span>
+              </li>
+              <li className="a-ofl3">
+                <svg
+                  className="ic"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>Export PNG, JPEG, WebP or SVG, or a short video of the flow.</span>
+              </li>
+            </ul>
+            <div className="of-more a-ofmore">
+              <a className="pill-l" href="/examples">
+                <span>See the examples</span>
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M5 12h14" />
+                  <path d="m12 5 7 7-7 7" />
+                </svg>
+              </a>
+              <p>Sixteen diagrams, from release pipelines to maps a coding agent wrote from one request.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/desktop/Hero.tsx b/site/components/landing/desktop/Hero.tsx
new file mode 100644
index 0000000..975c49a
--- /dev/null
+++ b/site/components/landing/desktop/Hero.tsx
@@ -0,0 +1,173 @@
+import { SITE } from '@/lib/site-data';
+import { BoardCopy } from '../BoardCopy';
+import { s } from '../style';
+
+export function Hero() {
+  return (
+    <>
+      <section
+        className="scn"
+        id="top"
+        data-scene="top"
+        data-runway="0.7"
+        data-fw="1440"
+        data-fh="900"
+        data-theme-sec="dark"
+        style={s({ height: '900px' })}
+        aria-label="stackmap"
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '1440px', height: '900px' })}>
+            <div className="hero-grid grid-bg" aria-hidden="true"></div>
+            <div className="hero-chips a-hero-chips" aria-hidden="true" data-par="">
+              <div className="par par0">
+                <span className="chip dp0 dr-a" style={s({ left: '1012px', top: '124px', animationDelay: '0.0s, 120ms' })}>
+                  .github/workflows/deploy.yml
+                </span>
+                <span className="chip dp0 dr-c" style={s({ left: '560px', top: '132px', animationDelay: '-1.7s, 165ms' })}>
+                  <span className="ghost">
+                    <span className="g-tile"></span>
+                    <span className="g-lines">
+                      <span></span>
+                      <span></span>
+                    </span>
+                  </span>
+                </span>
+                <span className="chip dp0 dr-b" style={s({ left: '150px', top: '812px', animationDelay: '-3.4s, 210ms' })}>
+                  infra/queue/order-events.tf
+                </span>
+                <span className="chip dp0 dr-c" style={s({ left: '1182px', top: '842px', animationDelay: '-5.1s, 255ms' })}>
+                  packages/ui/Button.tsx
+                </span>
+                <span className="chip dp0 dr-b" style={s({ left: '846px', top: '626px', animationDelay: '-22.1s, 705ms' })}>
+                  infra/cache/redis.tf
+                </span>
+              </div>
+              <div className="par par1">
+                <span className="chip dp1 dr-b" style={s({ left: '1226px', top: '186px', animationDelay: '-6.8s, 300ms' })}>
+                  docker-compose.yml
+                </span>
+                <span className="chip dp1 dr-c" style={s({ left: '820px', top: '512px', animationDelay: '-8.5s, 345ms' })}>
+                  services/api/src/server.ts
+                </span>
+                <span className="chip dp1 dr-a" style={s({ left: '540px', top: '780px', animationDelay: '-10.2s, 390ms' })}>
+                  infra/edge/gateway.yaml
+                </span>
+                <span className="chip dp1 dr-b" style={s({ left: '1048px', top: '692px', animationDelay: '-11.9s, 435ms' })}>
+                  <span className="ghost">
+                    <span className="g-tile"></span>
+                    <span className="g-lines">
+                      <span></span>
+                      <span></span>
+                    </span>
+                  </span>
+                </span>
+                <span className="chip dp1 dr-a" style={s({ left: '760px', top: '836px', animationDelay: '-20.4s, 660ms' })}>
+                  services/api/src/payments/stripe.ts
+                </span>
+              </div>
+              <div className="par par2">
+                <span className="chip dp2 dr-b" style={s({ left: '250px', top: '150px', animationDelay: '-13.6s, 480ms' })}>
+                  apps/storefront/app/checkout/page.tsx
+                </span>
+                <span className="chip dp2 dr-a" style={s({ left: '1090px', top: '584px', animationDelay: '-15.3s, 525ms' })}>
+                  infra/orders/postgres.tf
+                </span>
+                <span className="chip dp2 dr-c" style={s({ left: '846px', top: '742px', animationDelay: '-17.0s, 570ms' })}>
+                  workers/orders/consume.ts
+                </span>
+                <span className="chip dp2 dr-b" style={s({ left: '1140px', top: '432px', animationDelay: '-18.7s, 615ms' })}>
+                  packages/auth/session.ts
+                </span>
+              </div>
+            </div>
+            <svg className="h-route" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+              <defs>
+                <linearGradient id="hr-fade" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="150">
+                  <stop offset="0" style={s({ stopColor: 'var(--sm-text)', stopOpacity: '0' })} />
+                  <stop offset="1" style={s({ stopColor: 'var(--sm-text)', stopOpacity: '1' })} />
+                </linearGradient>
+              </defs>
+              <path className="rt rt-in" d="M 56 0 V 402 Q 56 418 72 418 H 79" pathLength="1" />
+              <path className="rt h-bridge a-hbridge" d="M 79 418 H 713" pathLength="1" />
+              <g className="a-hmarks">
+                <path className="ah" d="M79 415 L86 418 L79 421 Z" />
+              </g>
+              <path
+                className="rt"
+                data-route="top"
+                data-r0="0.05"
+                data-r1="0.96"
+                data-head="h-top"
+                d="M 713 418 H 1368 Q 1384 418 1384 434 V 900"
+                pathLength="1"
+              />
+              <path className="rt" data-route="top" data-r0="0.96" data-r1="1" d="M 1384 900 V 2100" pathLength="1" />
+              <g className="a-hmarks">
+                <circle className="hd2" cx="709" cy="418" r="3.5" />
+              </g>
+              <g className="rhead" data-route-head="h-top">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+            </svg>
+            <i className="comet" aria-hidden="true"></i>
+            <div className="h-content a-hero-out">
+              <h1 className="hero-h">
+                <span className="hl">
+                  <span className="hw" style={s({ '--x': '-170px', '--y': '-130px', '--z': '620px', '--bl': '7px', animationDelay: '180ms' })}>
+                    Every
+                  </span>{' '}
+                  <span className="hw" style={s({ '--x': '230px', '--y': '150px', '--z': '360px', '--bl': '4px', animationDelay: '270ms' })}>
+                    layer
+                  </span>{' '}
+                  <span className="hw" style={s({ '--x': '-60px', '--y': '230px', '--z': '700px', '--bl': '8px', animationDelay: '360ms' })}>
+                    of
+                  </span>{' '}
+                  <span className="hw" style={s({ '--x': '310px', '--y': '-170px', '--z': '480px', '--bl': '5px', animationDelay: '450ms' })}>
+                    your
+                  </span>{' '}
+                  <span className="hw" style={s({ '--x': '-250px', '--y': '70px', '--z': '300px', '--bl': '3px', animationDelay: '540ms' })}>
+                    stack,
+                  </span>
+                </span>
+                <span className="hl">
+                  <span className="hacc">
+                    <i className="hglow" aria-hidden="true"></i>
+                    <span className="hw" style={s({ '--x': '190px', '--y': '-90px', '--z': '560px', '--bl': '6px', animationDelay: '630ms' })}>
+                      on
+                    </span>{' '}
+                    <span className="hw" style={s({ '--x': '-150px', '--y': '180px', '--z': '420px', '--bl': '4px', animationDelay: '720ms' })}>
+                      one
+                    </span>{' '}
+                    <span className="hw" style={s({ '--x': '270px', '--y': '50px', '--z': '660px', '--bl': '7px', animationDelay: '810ms' })}>
+                      map.
+                    </span>
+                  </span>
+                </span>
+              </h1>
+              <p className="h-lede t-lede">Interactive system diagrams your coding agent writes, as one offline HTML file.</p>
+              <div className="h-cta">
+                <div className="cmd pnl">
+                  <span className="mono cmd-p" aria-hidden="true">
+                    $
+                  </span>
+                  <code className="mono cmd-t">{SITE.install.skill}</code>
+                  <BoardCopy text={SITE.install.skill} label="Copy the install command" />
+                </div>
+                <a className="lnk" href="https://github.com/hyamero/stackmap" target="_blank" rel="noreferrer">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                  </svg>
+                  <span>GitHub</span>
+                </a>
+              </div>
+              <p className="h-works">Works with Claude Code, Cursor, Codex and other coding agents.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/desktop/Install.tsx b/site/components/landing/desktop/Install.tsx
new file mode 100644
index 0000000..53230fb
--- /dev/null
+++ b/site/components/landing/desktop/Install.tsx
@@ -0,0 +1,113 @@
+import { SITE } from '@/lib/site-data';
+import { BoardCopy } from '../BoardCopy';
+import { s } from '../style';
+
+export function Install() {
+  return (
+    <>
+      <section className="inst" id="install" data-theme-sec="dark" data-sec="install" aria-labelledby="inst-h" data-theme="dark">
+        <i className="ir-a" aria-hidden="true"></i>
+        <i className="ir-b" aria-hidden="true"></i>
+        <i className="ir-d" aria-hidden="true"></i>
+        <div className="inst-in">
+          <div className="target" data-rv="">
+            <img src="/brand/stackmap-lockup-dark.svg" alt="stackmap" width="274" height="60" />
+            <h2 className="t-display" id="inst-h">
+              Every layer of your stack,{' '}
+              <span className="acc" style={s({ whiteSpace: 'nowrap' })}>
+                on one map.
+              </span>
+            </h2>
+            <p className="t-lede">Interactive system diagrams your coding agent writes, as one offline HTML file.</p>
+            <div className="ist">
+              <div className="ist-row">
+                <span className="ist-n mono">1</span>
+                <div>
+                  <h3>Install the skill into your agent</h3>
+                  <div className="cmd pnl big">
+                    <span className="mono cmd-p" aria-hidden="true">
+                      $
+                    </span>
+                    <code className="mono cmd-t">{SITE.install.skill}</code>
+                    <BoardCopy text={SITE.install.skill} label="Copy the install command" />
+                  </div>
+                </div>
+              </div>
+              <div className="ist-row">
+                <span className="ist-n mono">2</span>
+                <div>
+                  <h3>Then ask</h3>
+                  <p className="ask">Make an architecture diagram of this repository, backed by evidence from the code.</p>
+                </div>
+              </div>
+            </div>
+            <div className="ist-alt">
+              <p>
+                Or run the CLI on its own, with Node 22.12 or later: it turns any <code className="mono">diagram.json</code> into{' '}
+                <code className="mono">diagram.html</code> beside it.
+              </p>
+              <div className="cmd pnl">
+                <span className="mono cmd-p" aria-hidden="true">
+                  $
+                </span>
+                <code className="mono cmd-t">{SITE.install.cli}</code>
+                <BoardCopy text={SITE.install.cli} label="Copy the CLI command" />
+              </div>
+            </div>
+            <div className="ilinks">
+              <a className="lnk" href="https://github.com/hyamero/stackmap" target="_blank" rel="noreferrer">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                </svg>
+                <span>GitHub</span>
+              </a>
+              <a className="lnk" href="https://www.npmjs.com/package/@hyamero/stackmap" target="_blank" rel="noreferrer">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
+                </svg>
+                <span>npm</span>
+              </a>
+              <a className="lnk" href="/docs">
+                <svg
+                  className="ic"
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M12 5v16" />
+                  <path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z" />
+                </svg>
+                <span>Docs</span>
+              </a>
+              <a className="lnk" href="/examples">
+                <svg
+                  className="ic"
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" />
+                  <path d="M15 5.764v15" />
+                  <path d="M9 3.236v15" />
+                </svg>
+                <span>Examples</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/desktop/Kinds.tsx b/site/components/landing/desktop/Kinds.tsx
new file mode 100644
index 0000000..f11626f
--- /dev/null
+++ b/site/components/landing/desktop/Kinds.tsx
@@ -0,0 +1,60 @@
+import { DIAGRAM_KINDS, KIND_LABELS, type LaidOutDiagram } from '@stackmap/core';
+import { KindPills } from '../KindPills';
+import { KindsStage } from '../KindsStage';
+import { s } from '../style';
+
+const REST = DIAGRAM_KINDS.indexOf('workflow');
+
+const LINES = ['Components and what they call.', 'Data moving through stages.', 'Steps across owner lanes.', 'The states of one thing.', 'Messages over time.'];
+
+/** #kinds: one checkout, five ways. At rest it shows the workflow, as the canvas does. */
+export function Kinds({ checkout }: { checkout: Record<string, LaidOutDiagram> }) {
+  return (
+    <section
+      className="scn"
+      id="kinds"
+      data-scene="kinds"
+      data-kind={DIAGRAM_KINDS[REST]}
+      data-runway="4.2"
+      data-fw="1440"
+      data-fh="900"
+      data-theme-sec="light"
+      style={s({ height: '900px' })}
+      aria-label="Five kinds of diagram"
+      data-theme="light"
+    >
+      <div className="stage" data-stage="">
+        <div className="frame" data-frame="" style={s({ width: '1440px', height: '900px' })}>
+          <h2 className="sr">Five kinds of diagram: architecture, dataflow, workflow, lifecycle and sequence.</h2>
+          <svg className="k-route" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+            <path d="M 56 -1200 V 0" />
+            <path data-route="kinds" data-r0="0" data-r1="0.97" data-head="h-kinds" d="M 56 0 V 900" pathLength="1" />
+            <path data-route="kinds" data-r0="0.97" data-r1="1" d="M 56 900 V 2100" pathLength="1" />
+            <g className="rhead" data-route-head="h-kinds">
+              <circle r="9" className="rh-halo" />
+              <circle r="3.25" className="rh-core" />
+            </g>
+          </svg>
+          <div className="kinds-h" aria-hidden="true">
+            <div className="kn-col a-kname">
+              {DIAGRAM_KINDS.map((k) => (
+                <span key={k} className="kn">
+                  {KIND_LABELS[k]}.
+                </span>
+              ))}
+            </div>
+          </div>
+          <p className="kdefs" aria-hidden="true">
+            {LINES.map((l, i) => (
+              <span key={l} className={`kdef kdef${i} a-kline${i}`}>
+                {l}
+              </span>
+            ))}
+          </p>
+          <KindPills rest={REST} />
+          <KindsStage checkout={checkout} area={{ cx: 720, cy: 640, width: 1248, height: 522 }} root=".lp-d" />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/landing/desktop/Unmapped.tsx b/site/components/landing/desktop/Unmapped.tsx
new file mode 100644
index 0000000..9240296
--- /dev/null
+++ b/site/components/landing/desktop/Unmapped.tsx
@@ -0,0 +1,285 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Unmapped() {
+  return (
+    <>
+      <section
+        className="scn"
+        id="unmapped"
+        data-scene="unmapped"
+        data-runway="3.2"
+        data-fw="1440"
+        data-fh="900"
+        data-theme-sec="dark"
+        style={s({ height: '900px' })}
+        aria-label="Every codebase has a shape"
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '1440px', height: '900px' })}>
+            <div className="s2-grid grid-bg a-s2grid" aria-hidden="true"></div>
+            <div className="vx a-vx" aria-hidden="true">
+              <div className="vring" style={s({ animation: 'spin 34s linear infinite', filter: 'blur(2.6px)', opacity: '0.36' })}>
+                <span className="vchip" style={s({ transform: 'rotate(0deg) translateX(700px) rotate(90deg) translate(-50%, -50%)', fontSize: '16px' })}>
+                  .github/workflows/deploy.yml
+                </span>
+                <span className="vchip vghost" style={s({ transform: 'rotate(45deg) translateX(700px) rotate(90deg) translate(-50%, -50%)' })}>
+                  <span className="ghost">
+                    <span className="g-tile"></span>
+                    <span className="g-lines">
+                      <span></span>
+                      <span></span>
+                    </span>
+                  </span>
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(90deg) translateX(700px) rotate(90deg) translate(-50%, -50%)', fontSize: '16px' })}>
+                  packages/ui/Button.tsx
+                </span>
+                <span className="vchip vghost" style={s({ transform: 'rotate(135deg) translateX(700px) rotate(90deg) translate(-50%, -50%)' })}>
+                  <span className="ghost">
+                    <span className="g-tile"></span>
+                    <span className="g-lines">
+                      <span></span>
+                      <span></span>
+                    </span>
+                  </span>
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(180deg) translateX(700px) rotate(90deg) translate(-50%, -50%)', fontSize: '16px' })}>
+                  infra/queue/order-events.tf
+                </span>
+                <span className="vchip vghost" style={s({ transform: 'rotate(225deg) translateX(700px) rotate(90deg) translate(-50%, -50%)' })}>
+                  <span className="ghost">
+                    <span className="g-tile"></span>
+                    <span className="g-lines">
+                      <span></span>
+                      <span></span>
+                    </span>
+                  </span>
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(270deg) translateX(700px) rotate(90deg) translate(-50%, -50%)', fontSize: '16px' })}>
+                  apps/storefront/next.config.js
+                </span>
+                <span className="vchip vghost" style={s({ transform: 'rotate(315deg) translateX(700px) rotate(90deg) translate(-50%, -50%)' })}>
+                  <span className="ghost">
+                    <span className="g-tile"></span>
+                    <span className="g-lines">
+                      <span></span>
+                      <span></span>
+                    </span>
+                  </span>
+                </span>
+              </div>
+              <div className="vring" style={s({ animation: 'spin 24s linear infinite reverse', filter: 'blur(1.2px)', opacity: '0.62' })}>
+                <span className="vchip" style={s({ transform: 'rotate(30deg) translateX(480px) rotate(90deg) translate(-50%, -50%)', fontSize: '18px' })}>
+                  apps/storefront/app/checkout/page.tsx
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(90deg) translateX(480px) rotate(90deg) translate(-50%, -50%)', fontSize: '18px' })}>
+                  services/api/src/routes/orders.ts
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(150deg) translateX(480px) rotate(90deg) translate(-50%, -50%)', fontSize: '18px' })}>
+                  infra/cache/redis.tf
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(210deg) translateX(480px) rotate(90deg) translate(-50%, -50%)', fontSize: '18px' })}>
+                  services/api/src/payments/stripe.ts
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(270deg) translateX(480px) rotate(90deg) translate(-50%, -50%)', fontSize: '18px' })}>
+                  infra/storage/receipts.tf
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(330deg) translateX(480px) rotate(90deg) translate(-50%, -50%)', fontSize: '18px' })}>
+                  docker-compose.yml
+                </span>
+              </div>
+              <div className="vring" style={s({ animation: 'spin 16s linear infinite', filter: 'blur(0px)', opacity: '1' })}>
+                <span className="vchip" style={s({ transform: 'rotate(60deg) translateX(290px) rotate(90deg) translate(-50%, -50%)', fontSize: '22px' })}>
+                  server.ts
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(132deg) translateX(290px) rotate(90deg) translate(-50%, -50%)', fontSize: '22px' })}>
+                  postgres.tf
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(204deg) translateX(290px) rotate(90deg) translate(-50%, -50%)', fontSize: '22px' })}>
+                  App.tsx
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(276deg) translateX(290px) rotate(90deg) translate(-50%, -50%)', fontSize: '22px' })}>
+                  session.ts
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(348deg) translateX(290px) rotate(90deg) translate(-50%, -50%)', fontSize: '22px' })}>
+                  consume.ts
+                </span>
+              </div>
+            </div>
+            <div className="kline-wrap a-kw">
+              <h2 className="sr">Every codebase has a shape. Nobody has drawn it.</h2>
+              <div aria-hidden="true">
+                <p className="kl kl-k1 a-k1c" style={s({ top: '330px' })}>
+                  <span className="ml kw">
+                    <span className="a-k1w0">Every</span>
+                  </span>{' '}
+                  <span className="ml kw">
+                    <span className="a-k1w1">codebase</span>
+                  </span>{' '}
+                  <span className="ml kw">
+                    <span className="a-k1w2">has</span>
+                  </span>{' '}
+                  <span className="ml kw">
+                    <span className="a-k1w3">a</span>
+                  </span>{' '}
+                  <span className="ml kw">
+                    <span className="a-k1w4">shape.</span>
+                  </span>
+                </p>
+                <p className="kl kl-k2" style={s({ top: '446px' })}>
+                  <span className="ml kw">
+                    <span className="a-k2w0">Nobody</span>
+                  </span>{' '}
+                  <span className="ml kw">
+                    <span className="a-k2w1">has</span>
+                  </span>{' '}
+                  <span className="ml kw">
+                    <span className="a-k2w2">drawn</span>
+                  </span>{' '}
+                  <span className="ml kw">
+                    <span className="a-k2w3">it.</span>
+                  </span>
+                </p>
+              </div>
+            </div>
+            <i className="cdot a-cdot" aria-hidden="true"></i>
+            <i className="shock a-shock" aria-hidden="true"></i>
+            <svg
+              className="mk a-mk"
+              width="384"
+              height="384"
+              viewBox="0 0 48 48"
+              role="img"
+              aria-label="The stackmap mark: a route from a grey source card to an indigo target card"
+            >
+              <circle className="bx a-mkdot" cx="12" cy="12" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <circle className="bx a-mkdot" cx="24" cy="12" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <circle className="bx a-mkdot" cx="24" cy="36" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <circle className="bx a-mkdot" cx="36" cy="36" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <path
+                className="mk-route"
+                data-mark-route=""
+                d="M12 28.5v-1.5q0-3 3-3h18q3 0 3-3v-1.5"
+                pathLength="100"
+                fill="none"
+                stroke="#ededec"
+                strokeWidth="3.5"
+                strokeLinejoin="round"
+              />
+              <rect className="bx a-mksrc" x="3" y="30" width="18" height="12" rx="3.5" fill="#6e6e6b" />
+              <rect className="bx a-mktgt" x="27" y="6" width="18" height="12" rx="3.5" fill="#8fa6f2" />
+            </svg>
+            <p className="s2cap t-lede a-s2cap1" style={s({ top: '690px' })}>
+              stackmap turns what your coding agent knows about a system into a diagram you can explore.
+            </p>
+            <svg className="s2-edge" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+              <g className="a-s2e">
+                <path className="ln a-s2eln" d="M 676 450 H 764" pathLength="1" strokeDasharray="1 1" />
+                <path className="ah a-s2eah" d="M749 447 L756 450 L749 453 Z" />
+                <path className="lead a-s2lead" d="M 904 490 V 548" pathLength="1" strokeDasharray="1 1" />
+              </g>
+            </svg>
+            <div className="cw mcard t-service a-mapi-box" style={s({ left: '396px', top: '418px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="mc-in a-mapi-in">
+                  <span className="nc-h">
+                    <span className="tile">
+                      <svg
+                        className="ic"
+                        width="17"
+                        height="17"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.75"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                      >
+                        <rect x="2" y="4" width="20" height="16" rx="2" />
+                        <path d="M10 4v4" />
+                        <path d="M2 8h20" />
+                        <path d="M6 4v4" />
+                      </svg>
+                    </span>
+                    <span className="nc-tx">
+                      <span className="ct">shop-api</span>
+                      <span className="cs">REST API</span>
+                    </span>
+                  </span>
+                </span>
+                <span className="mc-ov a-mapi-ov" style={s({ background: '#6e6e6b' })}></span>
+              </span>
+            </div>
+            <div className="cw mcard t-database a-mdb-box" style={s({ left: '764px', top: '418px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="mc-in a-mdb-in">
+                  <span className="nc-h">
+                    <span className="tile">
+                      <svg
+                        className="ic"
+                        width="17"
+                        height="17"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.75"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                      >
+                        <ellipse cx="12" cy="5" rx="9" ry="3" />
+                        <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+                        <path d="M3 12A9 3 0 0 0 21 12" />
+                      </svg>
+                    </span>
+                    <span className="nc-tx">
+                      <span className="ct">Orders DB</span>
+                      <span className="cs">PostgreSQL</span>
+                    </span>
+                  </span>
+                </span>
+                <span className="mc-ov a-mdb-ov" style={s({ background: '#8fa6f2' })}></span>
+              </span>
+            </div>
+            <i className="selring a-s2sel" aria-hidden="true"></i>
+            <div className="s2ev pnl a-s2ev">
+              <svg
+                className="ic"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.75"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+                <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+                <path d="M10 12.5 8 15l2 2.5" />
+                <path d="m14 12.5 2 2.5-2 2.5" />
+              </svg>
+              <code className="mono">infra/orders/postgres.tf:12</code>
+            </div>
+            <p className="s2cap t-lede a-s2cap2" style={s({ top: '690px' })}>
+              Every node can point back to the file and line it came from.
+            </p>
+            <svg className="s2-route" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+              <path d="M 1384 -1200 V 0" />
+              <path data-route="unmapped" data-r0="0" data-r1="0.97" data-head="h-unmapped" d="M 1384 0 V 900" pathLength="1" />
+              <path data-route="unmapped" data-r0="0.97" data-r1="1" d="M 1384 900 V 2100" pathLength="1" />
+              <g className="rhead" data-route-head="h-unmapped">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/desktop/Viewer.tsx b/site/components/landing/desktop/Viewer.tsx
new file mode 100644
index 0000000..ad87bc2
--- /dev/null
+++ b/site/components/landing/desktop/Viewer.tsx
@@ -0,0 +1,76 @@
+import type { LaidOutDiagram } from '@stackmap/core';
+import { toScene } from '@stackmap/viewer/src/canvas/scene';
+import { Still } from '@/components/diagram/Still';
+import { stillOf } from '@/lib/diagrams';
+import { viewerTweens } from '../drops';
+import { LazyViewer } from '../LazyViewer';
+import { s } from '../style';
+import { TWEENS } from './timelines';
+
+// The plane the cards drop onto, inside the viewer's stage (the board's .plane-wrap).
+const PLANE = { width: 734, height: 656 };
+
+/** #viewer, "Lights on": the demo lands on a tilted map, flattens, and becomes the real viewer. */
+export function Viewer({ demo }: { demo: LaidOutDiagram }) {
+  const { content } = toScene(demo);
+  const k = Math.min(1, PLANE.width / content.width, PLANE.height / content.height);
+  const timelines = JSON.stringify(viewerTweens(demo, TWEENS)).replace(/</g, '\\u003c');
+  return (
+    <section className="scn" id="viewer" data-scene="viewer" data-runway="2.4" data-fw="1440" data-fh="900" data-theme-sec="light" style={s({ height: '900px' })} aria-label="The viewer" data-theme="dark">
+      <script type="application/json" data-timelines="" dangerouslySetInnerHTML={{ __html: timelines }} />
+      <div className="stage" data-stage="">
+        <div className="frame" data-frame="" style={s({ width: '1440px', height: '900px' })}>
+          <svg className="v-route-dark" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+            <path d="M 56 -1200 V 0" />
+            <path data-route="viewer" data-r0="0" data-r1="0.97" data-head="h-viewer-d" d="M 56 0 V 900" pathLength="1" />
+            <g className="rhead" data-route-head="h-viewer-d">
+              <circle r="9" className="rh-halo" />
+              <circle r="3.25" className="rh-core" />
+            </g>
+          </svg>
+          <p className="drop-title t-section dt-dark" aria-hidden="true">
+            No coordinates. stackmap lays it out.
+          </p>
+          <div className="lights a-lights" data-theme="light">
+            <div className="lights-in">
+              <svg className="v-route" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true">
+                <path d="M 56 -1200 V 0" />
+                <path data-route="viewer" data-r0="0" data-r1="0.97" data-head="h-viewer" d="M 56 0 V 900" pathLength="1" />
+                <path data-route="viewer" data-r0="0.97" data-r1="1" d="M 56 900 V 2100" pathLength="1" />
+                <g className="rhead" data-route-head="h-viewer">
+                  <circle r="9" className="rh-halo" />
+                  <circle r="3.25" className="rh-core" />
+                </g>
+              </svg>
+              <p className="drop-title t-section a-dtitle" aria-hidden="true">
+                No coordinates. stackmap lays it out.
+              </p>
+              <div className="vw" id="viewer-demo">
+                <div className="vintro" aria-hidden="true">
+                  <div className="vstage a-vstage">
+                    <div className="grid-bg" />
+                  </div>
+                  <div className="vclip a-vclip">
+                    <div className="vcam">
+                      <div className="plane-wrap">
+                        <div className="plane a-plane">
+                          <div className="plane-grid grid-bg a-pgrid" />
+                          <div className="plane-dg" style={s({ transform: `translate(-50%, 0) scale(${k})` })}>
+                            <Still still={stillOf('demo')} />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="vreal">
+                  <LazyViewer diagram={demo} still={stillOf('demo')} width={1248} height={800} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/landing/desktop/timelines.ts b/site/components/landing/desktop/timelines.ts
new file mode 100644
index 0000000..d3dc77c
--- /dev/null
+++ b/site/components/landing/desktop/timelines.ts
@@ -0,0 +1,4081 @@
+// Ported from the canvas board: every scroll timeline, as GSAP percentage keyframes over one 10 s scene.
+// Eases "cb:x1,y1,x2,y2" are the board's cubic-beziers (made into CustomEases at run time).
+import type { Tween } from '../timeline';
+
+export const TWEENS: Tween[] = [
+ {
+  "target": ".a-hero-out",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "filter": "blur(0px)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "translateY(-90px)",
+    "filter": "blur(8px)",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-hero-chips",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "scale(1)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0.72)",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-hbridge",
+  "frames": {
+   "0%": {
+    "strokeDashoffset": "1"
+   },
+   "42%": {
+    "strokeDashoffset": "1"
+   },
+   "78%": {
+    "strokeDashoffset": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "strokeDashoffset": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-hmarks",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "40%": {
+    "opacity": "1"
+   },
+   "52%": {
+    "opacity": "0"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-vx",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "scale(1.35) rotate(-24deg)"
+   },
+   "7%": {
+    "opacity": "1",
+    "transform": "scale(1) rotate(0deg)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "26%": {
+    "opacity": "1",
+    "transform": "scale(1) rotate(0deg)",
+    "filter": "blur(0px)"
+   },
+   "40%": {
+    "opacity": "1",
+    "transform": "scale(0) rotate(240deg)",
+    "filter": "blur(10px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "41%": {
+    "opacity": "0"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0) rotate(240deg)"
+   }
+  }
+ },
+ {
+  "target": ".a-kw",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "scale(1)",
+    "filter": "blur(0px)"
+   },
+   "27%": {
+    "opacity": "1",
+    "transform": "scale(1)",
+    "filter": "blur(0px)"
+   },
+   "38%": {
+    "opacity": "0",
+    "transform": "scale(0.12)",
+    "filter": "blur(14px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0.12)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w0",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "2%": {
+    "transform": "translateY(112%)"
+   },
+   "6.2%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w1",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "3.6%": {
+    "transform": "translateY(112%)"
+   },
+   "7.8%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w2",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "5.2%": {
+    "transform": "translateY(112%)"
+   },
+   "9.4%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w3",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "6.8%": {
+    "transform": "translateY(112%)"
+   },
+   "11%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w4",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "8.4%": {
+    "transform": "translateY(112%)"
+   },
+   "12.6%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w0",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "15%": {
+    "transform": "translateY(112%)"
+   },
+   "19.2%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w1",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "16.6%": {
+    "transform": "translateY(112%)"
+   },
+   "20.8%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w2",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "18.2%": {
+    "transform": "translateY(112%)"
+   },
+   "22.4%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w3",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "19.8%": {
+    "transform": "translateY(112%)"
+   },
+   "24%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1c",
+  "frames": {
+   "0%": {
+    "color": "var(--sm-text)"
+   },
+   "15%": {
+    "color": "var(--sm-text)"
+   },
+   "19%": {
+    "color": "var(--sm-text-muted)"
+   },
+   "100%": {
+    "color": "var(--sm-text-muted)"
+   }
+  }
+ },
+ {
+  "target": ".a-cdot",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   },
+   "29%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   },
+   "31%": {
+    "opacity": "1",
+    "transform": "scale(1.9)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "33%": {
+    "transform": "scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "35.5%": {
+    "transform": "scale(1.9)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "38%": {
+    "transform": "scale(1)",
+    "backgroundColor": "var(--sm-edge)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "41.5%": {
+    "transform": "scale(0.5)",
+    "backgroundColor": "var(--sm-text)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43.5%": {
+    "opacity": "1",
+    "transform": "scale(5)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "46%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   }
+  }
+ },
+ {
+  "target": ".a-shock",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "scale(0.02)"
+   },
+   "43%": {
+    "opacity": "0",
+    "transform": "scale(0.02)"
+   },
+   "43.5%": {
+    "opacity": "0.7",
+    "transform": "scale(0.02)"
+   },
+   "53%": {
+    "opacity": "0",
+    "transform": "scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-s2grid",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "WebkitMaskSize": "0px 0px",
+    "maskSize": "0px 0px"
+   },
+   "43%": {
+    "opacity": "1",
+    "WebkitMaskSize": "0px 0px",
+    "maskSize": "0px 0px"
+   },
+   "55%": {
+    "opacity": "1",
+    "WebkitMaskSize": "2400px 2400px",
+    "maskSize": "2400px 2400px",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "WebkitMaskSize": "2400px 2400px",
+    "maskSize": "2400px 2400px"
+   }
+  }
+ },
+ {
+  "target": ".a-mk",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "scale(1)"
+   },
+   "45%": {
+    "opacity": "0"
+   },
+   "45.5%": {
+    "opacity": "1",
+    "transform": "scale(1)"
+   },
+   "64%": {
+    "opacity": "1",
+    "transform": "scale(1)"
+   },
+   "70%": {
+    "opacity": "0",
+    "transform": "scale(1.04)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-mkdot",
+  "frames": {
+   "0%": {
+    "transform": "scale(0.2)",
+    "opacity": "0"
+   },
+   "45.5%": {
+    "transform": "scale(0.2)",
+    "opacity": "0"
+   },
+   "50%": {
+    "transform": "scale(1)",
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "scale(1)",
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mksrc",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "scale(0.9)"
+   },
+   "49%": {
+    "opacity": "0",
+    "transform": "scale(0.9)"
+   },
+   "52.5%": {
+    "opacity": "1",
+    "transform": "scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-mktgt",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(0.75px) scale(0.985)"
+   },
+   "58%": {
+    "opacity": "0",
+    "transform": "translateY(0.75px) scale(0.985)"
+   },
+   "62%": {
+    "opacity": "1",
+    "transform": "translateY(0px) scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-s2e",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "77%": {
+    "opacity": "0"
+   },
+   "77.5%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-s2eln",
+  "frames": {
+   "0%": {
+    "strokeDashoffset": "1"
+   },
+   "77.5%": {
+    "strokeDashoffset": "1"
+   },
+   "83%": {
+    "strokeDashoffset": "0",
+    "ease": "cb:0.33,1,0.68,1"
+   },
+   "100%": {
+    "strokeDashoffset": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-s2eah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "0"
+   },
+   "84%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-s2sel",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "86%": {
+    "opacity": "0"
+   },
+   "88%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-s2lead",
+  "frames": {
+   "0%": {
+    "strokeDashoffset": "1",
+    "opacity": "1"
+   },
+   "88%": {
+    "strokeDashoffset": "1"
+   },
+   "92%": {
+    "strokeDashoffset": "0",
+    "ease": "cb:0.33,1,0.68,1"
+   },
+   "100%": {
+    "strokeDashoffset": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-s2ev",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "91%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "94%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-s2cap1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "55%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "60%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "65%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "69%": {
+    "opacity": "0",
+    "transform": "translateY(-8px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-s2cap2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "93%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "97%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-mapi-box",
+  "frames": {
+   "0%": {
+    "left": "552px",
+    "top": "498px",
+    "width": "144px",
+    "height": "96px",
+    "borderRadius": "28px",
+    "opacity": "0"
+   },
+   "64%": {
+    "left": "552px",
+    "top": "498px",
+    "width": "144px",
+    "height": "96px",
+    "borderRadius": "28px",
+    "opacity": "0"
+   },
+   "64.5%": {
+    "opacity": "1"
+   },
+   "74%": {
+    "left": "396px",
+    "top": "418px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "396px",
+    "top": "418px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mapi-ov",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "68%": {
+    "opacity": "1"
+   },
+   "76%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-mapi-in",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "72%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mdb-box",
+  "frames": {
+   "0%": {
+    "left": "744px",
+    "top": "306px",
+    "width": "144px",
+    "height": "96px",
+    "borderRadius": "28px",
+    "opacity": "0"
+   },
+   "64%": {
+    "left": "744px",
+    "top": "306px",
+    "width": "144px",
+    "height": "96px",
+    "borderRadius": "28px",
+    "opacity": "0"
+   },
+   "64.5%": {
+    "opacity": "1"
+   },
+   "74%": {
+    "left": "764px",
+    "top": "418px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "764px",
+    "top": "418px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mdb-ov",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "68%": {
+    "opacity": "1"
+   },
+   "76%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-mdb-in",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "72%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-tr0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "37%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "39.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "41%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "43.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "44%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "46.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr3",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "45%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "47.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr4",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "47.5%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "49.7%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr5",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "49%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "51.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr6",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "53%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "55.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr7",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "56.5%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "58.7%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr8",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "61%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "63.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr9",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "64.5%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "66.7%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr10",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "65.5%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "67.7%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-jr0",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40%": {
+    "opacity": "0"
+   },
+   "41.2%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40.7%": {
+    "opacity": "0"
+   },
+   "41.9%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "41.4%": {
+    "opacity": "0"
+   },
+   "42.6%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "42.8%": {
+    "opacity": "0"
+   },
+   "44%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "43.5%": {
+    "opacity": "0"
+   },
+   "44.7%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr5",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "44.2%": {
+    "opacity": "0"
+   },
+   "45.4%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr6",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "44.9%": {
+    "opacity": "0"
+   },
+   "46.1%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr7",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "45.3%": {
+    "opacity": "0"
+   },
+   "46.5%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr8",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "45.9%": {
+    "opacity": "0"
+   },
+   "47.1%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr9",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "46.3%": {
+    "opacity": "0"
+   },
+   "47.5%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr10",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "47%": {
+    "opacity": "0"
+   },
+   "48.2%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr11",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "47.7%": {
+    "opacity": "0"
+   },
+   "48.9%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr12",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "48.4%": {
+    "opacity": "0"
+   },
+   "49.6%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr13",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "49.1%": {
+    "opacity": "0"
+   },
+   "50.3%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr14",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "49.8%": {
+    "opacity": "0"
+   },
+   "51%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr15",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "50.5%": {
+    "opacity": "0"
+   },
+   "51.7%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr16",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "51.2%": {
+    "opacity": "0"
+   },
+   "52.4%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-jr17",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "51.9%": {
+    "opacity": "0"
+   },
+   "53.1%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-fly0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translate(694px, -342px) scale(0.32)"
+   },
+   "55%": {
+    "opacity": "0",
+    "transform": "translate(694px, -342px) scale(0.32)"
+   },
+   "60%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-fly1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translate(371px, -322px) scale(0.32)"
+   },
+   "56.6%": {
+    "opacity": "0",
+    "transform": "translate(371px, -322px) scale(0.32)"
+   },
+   "61.6%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-fly2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translate(49px, -303px) scale(0.32)"
+   },
+   "58.2%": {
+    "opacity": "0",
+    "transform": "translate(49px, -303px) scale(0.32)"
+   },
+   "63.2%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-fly3",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translate(-274px, -244px) scale(0.32)"
+   },
+   "59.8%": {
+    "opacity": "0",
+    "transform": "translate(-274px, -244px) scale(0.32)"
+   },
+   "64.8%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-st0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "1%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "30%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-sd0",
+  "frames": {
+   "0%": {
+    "backgroundColor": "var(--sm-text)"
+   },
+   "0.5%": {
+    "backgroundColor": "var(--sm-text)"
+   },
+   "100%": {
+    "backgroundColor": "var(--sm-text)"
+   }
+  }
+ },
+ {
+  "target": ".a-st1",
+  "frames": {
+   "0%": {
+    "opacity": "0.42"
+   },
+   "29%": {
+    "opacity": "0.42"
+   },
+   "31%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "50%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-sd1",
+  "frames": {
+   "0%": {
+    "backgroundColor": "var(--sm-stage)"
+   },
+   "29.5%": {
+    "backgroundColor": "var(--sm-stage)"
+   },
+   "30.5%": {
+    "backgroundColor": "var(--sm-text)"
+   },
+   "100%": {
+    "backgroundColor": "var(--sm-text)"
+   }
+  }
+ },
+ {
+  "target": ".a-st2",
+  "frames": {
+   "0%": {
+    "opacity": "0.42"
+   },
+   "49%": {
+    "opacity": "0.42"
+   },
+   "51%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "62%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-sd2",
+  "frames": {
+   "0%": {
+    "backgroundColor": "var(--sm-stage)"
+   },
+   "49.5%": {
+    "backgroundColor": "var(--sm-stage)"
+   },
+   "50.5%": {
+    "backgroundColor": "var(--sm-text)"
+   },
+   "100%": {
+    "backgroundColor": "var(--sm-text)"
+   }
+  }
+ },
+ {
+  "target": ".a-st3",
+  "frames": {
+   "0%": {
+    "opacity": "0.42"
+   },
+   "61%": {
+    "opacity": "0.42"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-sd3",
+  "frames": {
+   "0%": {
+    "backgroundColor": "var(--sm-stage)"
+   },
+   "61.5%": {
+    "backgroundColor": "var(--sm-stage)"
+   },
+   "62.5%": {
+    "backgroundColor": "var(--sm-text)"
+   },
+   "100%": {
+    "backgroundColor": "var(--sm-text)"
+   }
+  }
+ },
+ {
+  "target": ".a-ty0",
+  "frames": {
+   "0%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "2%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "10%": {
+    "width": "28ch",
+    "borderRightColor": "var(--sm-text)",
+    "ease": "steps(28)"
+   },
+   "10.4%": {
+    "width": "28ch",
+    "borderRightColor": "transparent"
+   },
+   "100%": {
+    "width": "28ch",
+    "borderRightColor": "transparent"
+   }
+  }
+ },
+ {
+  "target": ".a-ty1",
+  "frames": {
+   "0%": {
+    "width": "0ch",
+    "borderRightColor": "transparent"
+   },
+   "10.5%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "18.5%": {
+    "width": "29ch",
+    "borderRightColor": "var(--sm-text)",
+    "ease": "steps(29)"
+   },
+   "18.9%": {
+    "width": "29ch",
+    "borderRightColor": "transparent"
+   },
+   "100%": {
+    "width": "29ch",
+    "borderRightColor": "transparent"
+   }
+  }
+ },
+ {
+  "target": ".a-ty2",
+  "frames": {
+   "0%": {
+    "width": "0ch",
+    "borderRightColor": "transparent"
+   },
+   "19%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "25%": {
+    "width": "23ch",
+    "borderRightColor": "var(--sm-text)",
+    "ease": "steps(23)"
+   },
+   "25.4%": {
+    "width": "23ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "100%": {
+    "width": "23ch",
+    "borderRightColor": "var(--sm-text)"
+   }
+  }
+ },
+ {
+  "target": ".a-bigp",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   },
+   "26.5%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   },
+   "34%": {
+    "opacity": "1",
+    "transform": "translate(-6px, -95px) scale(0.2344)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "35.5%": {
+    "opacity": "0",
+    "transform": "translate(-6px, -95px) scale(0.2344)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "translate(-6px, -95px) scale(0.2344)"
+   }
+  }
+ },
+ {
+  "target": ".a-tp",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "34.5%": {
+    "opacity": "0"
+   },
+   "35.5%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-term",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(24px)"
+   },
+   "26%": {
+    "opacity": "0",
+    "transform": "translateY(24px)"
+   },
+   "32%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "44%": {
+    "transform": "translateX(0px)"
+   },
+   "44.6%": {
+    "transform": "translateX(-7px)"
+   },
+   "45.2%": {
+    "transform": "translateX(6px)"
+   },
+   "45.8%": {
+    "transform": "translateX(-4px)"
+   },
+   "46.4%": {
+    "transform": "translateX(2px)"
+   },
+   "47%": {
+    "transform": "translateX(0px)"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateX(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-json",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(24px)"
+   },
+   "38%": {
+    "opacity": "0",
+    "transform": "translateY(24px)"
+   },
+   "42%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-fxbad",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "maxWidth": "11ch"
+   },
+   "49.5%": {
+    "opacity": "1",
+    "maxWidth": "11ch"
+   },
+   "51.5%": {
+    "opacity": "0",
+    "maxWidth": "0ch",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0",
+    "maxWidth": "0ch"
+   }
+  }
+ },
+ {
+  "target": ".a-fxok",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "maxWidth": "0ch"
+   },
+   "51%": {
+    "opacity": "0",
+    "maxWidth": "0ch"
+   },
+   "53%": {
+    "opacity": "1",
+    "maxWidth": "8ch",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "maxWidth": "8ch"
+   }
+  }
+ },
+ {
+  "target": ".a-drop0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "13%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "14%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "17.2%": {
+    "transform": "translateZ(0px)"
+   },
+   "18.2%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "19.2%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade0",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "47%": {
+    "opacity": "0"
+   },
+   "50.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "17.6%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "18.6%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "21.8%": {
+    "transform": "translateZ(0px)"
+   },
+   "22.8%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "23.8%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "49.2%": {
+    "opacity": "0"
+   },
+   "52.8%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "22.2%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "23.2%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "26.4%": {
+    "transform": "translateZ(0px)"
+   },
+   "27.4%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "28.4%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "51.4%": {
+    "opacity": "0"
+   },
+   "55%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop3",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "26.8%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "27.8%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "31%": {
+    "transform": "translateZ(0px)"
+   },
+   "32%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "33%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "53.6%": {
+    "opacity": "0"
+   },
+   "57.2%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop4",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "31.4%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "32.4%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "35.6%": {
+    "transform": "translateZ(0px)"
+   },
+   "36.6%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "37.6%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "55.8%": {
+    "opacity": "0"
+   },
+   "59.4%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop5",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "36%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "37%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "40.2%": {
+    "transform": "translateZ(0px)"
+   },
+   "41.2%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "42.2%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade5",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "58%": {
+    "opacity": "0"
+   },
+   "61.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-ahin",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "0"
+   },
+   "61.5%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-frin",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40%": {
+    "opacity": "0"
+   },
+   "46%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".vcam .hd",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "58%": {
+    "opacity": "0"
+   },
+   "61%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-lights",
+  "frames": {
+   "0%": {
+    "clipPath": "circle(0px at 2456px 1304px)"
+   },
+   "13%": {
+    "clipPath": "circle(3600px at 2456px 1304px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "clipPath": "circle(3600px at 2456px 1304px)"
+   }
+  }
+ },
+ {
+  "target": ".a-plane",
+  "frames": {
+   "0%": {
+    "transform": "rotateX(58deg) translateY(-20px) scale(0.92)"
+   },
+   "30%": {
+    "transform": "rotateX(58deg) translateY(-20px) scale(0.92)"
+   },
+   "50%": {
+    "transform": "rotateX(0deg) translateY(0px) scale(1)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "transform": "rotateX(0deg) translateY(0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-pgrid",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "6%": {
+    "opacity": "0"
+   },
+   "14%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "50%": {
+    "opacity": "1"
+   },
+   "58%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-vclip",
+  "frames": {
+   "0%": {
+    "clipPath": "inset(-900px round 20px)"
+   },
+   "52%": {
+    "clipPath": "inset(-900px round 20px)"
+   },
+   "60%": {
+    "clipPath": "inset(0px round 20px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "clipPath": "inset(0px round 20px)"
+   }
+  }
+ },
+ {
+  "target": ".a-dtitle",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "46%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "53%": {
+    "opacity": "0",
+    "transform": "translateY(-20px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-vstage",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "50%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-vhead",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "60%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "65%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vch0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "64%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "68%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vch1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "66%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "70%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vch2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "68%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "72%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vinsp",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateX(14px)"
+   },
+   "70%": {
+    "opacity": "0",
+    "transform": "translateX(14px)"
+   },
+   "76%": {
+    "opacity": "1",
+    "transform": "translateX(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateX(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ks0",
+  "frames": {
+   "0%": {
+    "left": "340px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1"
+   },
+   "16%": {
+    "left": "340px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "23%": {
+    "left": "300.3px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "left": "300.3px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43%": {
+    "left": "495.3px",
+    "top": "468.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "left": "495.3px",
+    "top": "468.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "63%": {
+    "left": "506.9px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "left": "506.9px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "83%": {
+    "left": "558.1px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "558.1px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-kf0_0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1"
+   },
+   "20%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf0_1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "19%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "40%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf0_2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "39%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "60%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf0_3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "59%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "80%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf0_4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-ks1",
+  "frames": {
+   "0%": {
+    "left": "544.9px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1"
+   },
+   "16%": {
+    "left": "544.9px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "23%": {
+    "left": "531.7px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "left": "531.7px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43%": {
+    "left": "495.3px",
+    "top": "570.6px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "left": "495.3px",
+    "top": "570.6px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "63%": {
+    "left": "506.9px",
+    "top": "588.8px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "left": "506.9px",
+    "top": "588.8px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "83%": {
+    "left": "379.7px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "379.7px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-kf1_0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1"
+   },
+   "20%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf1_1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "19%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "40%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf1_2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "39%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "60%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf1_3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "59%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "80%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf1_4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-ks2",
+  "frames": {
+   "0%": {
+    "left": "749.7px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1"
+   },
+   "16%": {
+    "left": "749.7px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "23%": {
+    "left": "763px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "left": "763px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43%": {
+    "left": "693.6px",
+    "top": "673px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "left": "693.6px",
+    "top": "673px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "63%": {
+    "left": "705.1px",
+    "top": "691.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "left": "705.1px",
+    "top": "691.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "83%": {
+    "left": "705.1px",
+    "top": "691.2px",
+    "height": "49.6px",
+    "opacity": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "705.1px",
+    "top": "691.2px",
+    "height": "49.6px",
+    "opacity": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-kf2_0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1"
+   },
+   "20%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf2_1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "19%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "40%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf2_2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "39%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "60%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf2_3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "59%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "80%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-ks3",
+  "frames": {
+   "0%": {
+    "left": "954.6px",
+    "top": "532.6px",
+    "height": "49.6px",
+    "opacity": "1"
+   },
+   "16%": {
+    "left": "954.6px",
+    "top": "532.6px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "23%": {
+    "left": "954.6px",
+    "top": "532.6px",
+    "height": "49.6px",
+    "opacity": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "left": "954.6px",
+    "top": "532.6px",
+    "height": "49.6px",
+    "opacity": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43%": {
+    "left": "891.8px",
+    "top": "570.6px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "left": "891.8px",
+    "top": "570.6px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "63%": {
+    "left": "903.4px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "left": "903.4px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "83%": {
+    "left": "915px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "915px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-kf3_0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1"
+   },
+   "20%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf3_2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "39%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "60%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf3_3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "59%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "80%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf3_4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-ks4",
+  "frames": {
+   "0%": {
+    "left": "954.6px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1"
+   },
+   "16%": {
+    "left": "954.6px",
+    "top": "615.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "23%": {
+    "left": "994.3px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "left": "994.3px",
+    "top": "592.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43%": {
+    "left": "693.6px",
+    "top": "468.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "left": "693.6px",
+    "top": "468.2px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "63%": {
+    "left": "705.1px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "left": "705.1px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "83%": {
+    "left": "736.5px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "736.5px",
+    "top": "486.3px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-kf4_0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1"
+   },
+   "20%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf4_1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "19%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "40%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf4_2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "39%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "60%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf4_3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "59%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "80%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf4_4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-ks5",
+  "frames": {
+   "0%": {
+    "left": "954.6px",
+    "top": "697.8px",
+    "height": "49.6px",
+    "opacity": "1"
+   },
+   "16%": {
+    "left": "954.6px",
+    "top": "697.8px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "23%": {
+    "left": "994.3px",
+    "top": "674.7px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "left": "994.3px",
+    "top": "674.7px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43%": {
+    "left": "693.6px",
+    "top": "775.5px",
+    "height": "69.4px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "left": "693.6px",
+    "top": "775.5px",
+    "height": "69.4px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "63%": {
+    "left": "705.1px",
+    "top": "777.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "left": "705.1px",
+    "top": "777.1px",
+    "height": "49.6px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "83%": {
+    "left": "705.1px",
+    "top": "777.1px",
+    "height": "49.6px",
+    "opacity": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "705.1px",
+    "top": "777.1px",
+    "height": "49.6px",
+    "opacity": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-kf5_0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1"
+   },
+   "20%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf5_1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "19%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "40%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf5_2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "39%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "60%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kf5_3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "59%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "80%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kl0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "19%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd0 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "3%": {
+    "opacity": "0"
+   },
+   "3.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "20%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "39%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd1 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "26%": {
+    "opacity": "0"
+   },
+   "26.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "59%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd2 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "46%": {
+    "opacity": "0"
+   },
+   "46.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "79%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd3 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "66%": {
+    "opacity": "0"
+   },
+   "66.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "80%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kd4 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "86%": {
+    "opacity": "0"
+   },
+   "86.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kname",
+  "frames": {
+   "0%": {
+    "transform": "translateY(0px)"
+   },
+   "16%": {
+    "transform": "translateY(0px)"
+   },
+   "22%": {
+    "transform": "translateY(-260px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "transform": "translateY(-260px)"
+   },
+   "42%": {
+    "transform": "translateY(-520px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "transform": "translateY(-520px)"
+   },
+   "62%": {
+    "transform": "translateY(-780px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "transform": "translateY(-780px)"
+   },
+   "82%": {
+    "transform": "translateY(-1040px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "transform": "translateY(-1040px)"
+   }
+  }
+ },
+ {
+  "target": ".a-kline0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "19%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "20%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "39%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "59%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "79%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "80%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kcam",
+  "frames": {
+   "0%": {
+    "transform": "scale(1.3316)"
+   },
+   "16%": {
+    "transform": "scale(1.3316)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "23%": {
+    "transform": "scale(1.3316)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "transform": "scale(1.3316)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43%": {
+    "transform": "scale(1)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "transform": "scale(1)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "63%": {
+    "transform": "scale(1.0866)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "transform": "scale(1.0866)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "83%": {
+    "transform": "scale(1.3316)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "transform": "scale(1.3316)",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-ofcap",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "30%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "36%": {
+    "opacity": "0",
+    "transform": "translateY(-10px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-file",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translate(-346px, 0px) scale(0.94)"
+   },
+   "16%": {
+    "opacity": "1",
+    "transform": "translate(-346px, 0px) scale(1)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "40%": {
+    "opacity": "1",
+    "transform": "translate(-346px, 0px) scale(1)"
+   },
+   "54%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-flights",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "clipPath": "inset(calc(1200px - var(--by, 0px)) calc(2400px - var(--bx, 0px)) calc(1200px - var(--by, 0px)) calc(2400px - var(--bx, 0px)) round 0px)"
+   },
+   "16%": {
+    "opacity": "1",
+    "clipPath": "inset(1396px 2954px 1444px 2954px round 20px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "16.5%": {
+    "opacity": "0",
+    "clipPath": "inset(1396px 2954px 1444px 2954px round 20px)"
+   },
+   "100%": {
+    "opacity": "0",
+    "clipPath": "inset(1396px 2954px 1444px 2954px round 20px)"
+   }
+  }
+ },
+ {
+  "target": ".a-filein",
+  "frames": {
+   "0%": {
+    "transform": "rotateY(0deg)"
+   },
+   "20%": {
+    "transform": "rotateY(0deg)"
+   },
+   "35%": {
+    "transform": "rotateY(180deg)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "transform": "rotateY(180deg)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofh",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateX(-30px)"
+   },
+   "44%": {
+    "opacity": "0",
+    "transform": "translateX(-30px)"
+   },
+   "56%": {
+    "opacity": "1",
+    "transform": "translateX(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateX(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "56%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "62%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "59%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "65%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "62%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "68%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl3",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "65%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "71%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofmore",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "76%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "84%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ }
+];
diff --git a/site/components/landing/drops.ts b/site/components/landing/drops.ts
new file mode 100644
index 0000000..2a8d8b9
--- /dev/null
+++ b/site/components/landing/drops.ts
@@ -0,0 +1,41 @@
+import type { LaidOutDiagram } from '@stackmap/core';
+import { toScene } from '@stackmap/viewer/src/canvas/scene';
+import type { Tween } from './timeline';
+
+/** The board has six drop beats; ranks past the last share it. */
+export const DROP_BEATS = 6;
+
+/**
+ * "Cards drop onto the tilted map, layer by layer": a card's layer is its rank along the flow, so the
+ * diagram lands from its entry points outward. Ranks come from the laid-out positions, not a list.
+ */
+export function dropLayers(diagram: LaidOutDiagram): Map<string, number> {
+  const scene = toScene(diagram);
+  const horizontal = scene.direction === 'RIGHT';
+  const along = (id: string) => {
+    const r = scene.cards.find((c) => c.node.id === id)!.rect;
+    return horizontal ? r.x : r.y;
+  };
+  const ranks = [...new Set(scene.cards.map((c) => along(c.node.id)))].sort((a, b) => a - b);
+  return new Map(scene.cards.map((c) => [c.node.id, Math.min(DROP_BEATS - 1, ranks.indexOf(along(c.node.id)))]));
+}
+
+const ENTER = 'cb:0.23,1,0.32,1';
+
+/**
+ * The viewer scene's own timelines: each card takes the board's drop for its layer, connections fade in
+ * after the map flattens, and the intro hands over to the real viewer by 76%.
+ */
+export function viewerTweens(diagram: LaidOutDiagram, board: Tween[]): Tween[] {
+  const drop = (layer: number) => board.find((t) => t.target === `.a-drop${layer}`)?.frames;
+  const drops = [...dropLayers(diagram)].flatMap(([id, layer]) => {
+    const frames = drop(layer);
+    return frames ? [{ target: `.plane [data-card-id="${id}"]`, frames }] : [];
+  });
+  return [
+    ...drops,
+    { target: '.plane .sm-edges, .plane .sm-edge-label', frames: { '0%': { opacity: '0' }, '47%': { opacity: '0' }, '58%': { opacity: '1', ease: 'cb:0.33,1,0.68,1' }, '100%': { opacity: '1' } } },
+    { target: '.vintro', frames: { '0%': { autoAlpha: '1' }, '76%': { autoAlpha: '1' }, '80%': { autoAlpha: '0', ease: ENTER }, '100%': { autoAlpha: '0' } } },
+    { target: '.vreal', frames: { '0%': { autoAlpha: '0' }, '60%': { autoAlpha: '0' }, '76%': { autoAlpha: '1', ease: ENTER }, '100%': { autoAlpha: '1' } } },
+  ];
+}
diff --git a/site/components/landing/kinds-geometry.ts b/site/components/landing/kinds-geometry.ts
new file mode 100644
index 0000000..ae3d0c6
--- /dev/null
+++ b/site/components/landing/kinds-geometry.ts
@@ -0,0 +1,135 @@
+import { DIAGRAM_KINDS, type DiagramKind, type LaidOutDiagram, type Rect } from '@stackmap/core';
+import { toScene, type SceneCard } from '@stackmap/viewer/src/canvas/scene';
+import { SLOT_COUNT, SLOTS } from '@/lib/checkout';
+import type { Tween } from './timeline';
+
+/** The stage the kinds share, in frame pixels: its centre is the camera's origin. */
+export interface Area {
+  cx: number;
+  cy: number;
+  width: number;
+  height: number;
+}
+
+export interface KindLayer {
+  kind: DiagramKind;
+  diagram: LaidOutDiagram;
+  /** the layer's box on the frame at the shared scale */
+  left: number;
+  top: number;
+  /** the camera's zoom for this kind: its own fit, never past `maxCam` */
+  cam: number;
+}
+
+export interface SlotFace {
+  card: SceneCard;
+  compact: boolean;
+  /** where the card sits on the frame, at the shared scale */
+  rect: Rect;
+}
+
+export interface KindsGeometry {
+  scale: number;
+  layers: KindLayer[];
+  /** slots[i][k]: slot i's card in kind k, or null when that kind has no card there */
+  slots: (SlotFace | null)[][];
+}
+
+/** "Every kind is laid out at one shared scale; a camera scales the stage to each kind's own fit." */
+export function kindsGeometry(checkout: Record<string, LaidOutDiagram>, area: Area, maxCam = 1.35): KindsGeometry {
+  const scenes = DIAGRAM_KINDS.map((kind) => {
+    const diagram = checkout[kind];
+    if (!diagram) throw new Error(`no checkout drawn as ${kind}`);
+    return { kind, diagram, scene: toScene(diagram) };
+  });
+  const scale = Math.min(...scenes.map(({ scene: { content } }) => Math.min(area.width / content.width, area.height / content.height)));
+  const layers = scenes.map(({ kind, diagram, scene: { content } }) => ({
+    kind,
+    diagram,
+    left: area.cx - (content.width * scale) / 2,
+    top: area.cy - (content.height * scale) / 2,
+    cam: Math.min(maxCam, area.width / (content.width * scale), area.height / (content.height * scale)),
+  }));
+  const slots = Array.from({ length: SLOT_COUNT }, (_, i) =>
+    scenes.map(({ kind, scene }, k) => {
+      const id = SLOTS[kind][i];
+      if (!id) return null;
+      const card = scene.cards.find((c) => c.node.id === id);
+      if (!card) throw new Error(`${kind} checkout has no node ${id}`);
+      const { left, top } = layers[k]!;
+      const r = card.rect;
+      return {
+        card,
+        compact: scene.compact,
+        rect: { x: left + (r.x - scene.content.x) * scale, y: top + (r.y - scene.content.y) * scale, width: r.width * scale, height: r.height * scale },
+      };
+    }),
+  );
+  return { scale, layers, slots };
+}
+
+/** Each kind's hold, in percent of the pin (Motion board, #kinds). Between holds everything moves. */
+export const HOLDS: [number, number][] = [
+  [0, 16],
+  [23, 36],
+  [43, 56],
+  [63, 76],
+  [83, 100],
+];
+
+const MOVE = 'cb:0.77,0,0.175,1';
+const ENTER = 'cb:0.23,1,0.32,1';
+const px = (n: number) => `${Math.round(n * 10) / 10}px`;
+
+// Where a slot sits in a kind that leaves it empty: where it last was, or where it first will be.
+function standIn(faces: (SlotFace | null)[], k: number): SlotFace {
+  for (let j = k - 1; j >= 0; j--) if (faces[j]) return faces[j]!;
+  for (let j = k + 1; j < faces.length; j++) if (faces[j]) return faces[j]!;
+  throw new Error('a slot with no card in any kind');
+}
+
+/** Held through each kind, moving between them on the in-out curve. */
+function holds(at: (k: number) => Record<string, string>): Tween['frames'] {
+  const frames: Tween['frames'] = {};
+  HOLDS.forEach(([a, b], k) => {
+    frames[`${a}%`] = { ...at(k), ...(k ? { ease: MOVE } : {}) };
+    frames[`${b}%`] = at(k);
+  });
+  return frames;
+}
+
+/** Shown through kind k's hold, fading over `fade` percent either side; the first kind starts shown, the last stays. */
+function shownIn(k: number, fade: number): Tween['frames'] {
+  const [a, b] = HOLDS[k]!;
+  const last = k === HOLDS.length - 1;
+  return {
+    '0%': { opacity: k === 0 ? '1' : '0' },
+    ...(k === 0 ? {} : { [`${a - fade}%`]: { opacity: '0' }, [`${a}%`]: { opacity: '1', ease: ENTER } }),
+    [`${b}%`]: { opacity: '1' },
+    ...(last ? {} : { [`${b + fade}%`]: { opacity: '0', ease: ENTER } }),
+    '100%': { opacity: last ? '1' : '0' },
+  };
+}
+
+/** The phone's kinds: whole diagrams crossfading in their holds, one layer each. */
+export function crossfadeTweens(count: number): Tween[] {
+  return Array.from({ length: count }, (_, k) => ({ target: `.kl${k}`, frames: shownIn(k, 3) }));
+}
+
+/** The scene's generated timelines: slots glide between kinds, layers and faces cross over, the camera refits. */
+export function kindsTweens(g: KindsGeometry): Tween[] {
+  const out: Tween[] = [];
+  g.slots.forEach((faces, i) => {
+    out.push({
+      target: `.ks${i}`,
+      frames: holds((k) => {
+        const { x, y, width, height } = (faces[k] ?? standIn(faces, k)).rect;
+        return { left: px(x), top: px(y), width: px(width), height: px(height), opacity: faces[k] ? '1' : '0' };
+      }),
+    });
+    faces.forEach((f, k) => f && out.push({ target: `.kf${i}_${k}`, frames: shownIn(k, 4) }));
+  });
+  g.layers.forEach((_, k) => out.push({ target: `.kl${k}`, frames: shownIn(k, 3) }));
+  out.push({ target: '.kcam', frames: holds((k) => ({ scale: String(Math.round(g.layers[k]!.cam * 1000) / 1000) })) });
+  return out;
+}
diff --git a/site/components/landing/mobile.css b/site/components/landing/mobile.css
new file mode 100644
index 0000000..5018cfb
--- /dev/null
+++ b/site/components/landing/mobile.css
@@ -0,0 +1,375 @@
+/* Ported from the canvas board. Scoped to .lp-m; keyframes are prefixed so the two compositions never collide. */
+.lp-m {
+  .mono {font-family:var(--font-mono)}
+  .tnum {font-variant-numeric:tabular-nums}
+  .ic {display:block;flex-shrink:0}
+  .sr {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+  .t-client {--f:var(--sm-client-fill);--b:var(--sm-client-border);--t:var(--sm-client-tile);--a:var(--sm-client-accent)}
+  .t-service {--f:var(--sm-service-fill);--b:var(--sm-service-border);--t:var(--sm-service-tile);--a:var(--sm-service-accent)}
+  .t-gateway {--f:var(--sm-gateway-fill);--b:var(--sm-gateway-border);--t:var(--sm-gateway-tile);--a:var(--sm-gateway-accent)}
+  .t-database {--f:var(--sm-database-fill);--b:var(--sm-database-border);--t:var(--sm-database-tile);--a:var(--sm-database-accent)}
+  .t-cache {--f:var(--sm-cache-fill);--b:var(--sm-cache-border);--t:var(--sm-cache-tile);--a:var(--sm-cache-accent)}
+  .t-queue {--f:var(--sm-queue-fill);--b:var(--sm-queue-border);--t:var(--sm-queue-tile);--a:var(--sm-queue-accent)}
+  .t-storage {--f:var(--sm-storage-fill);--b:var(--sm-storage-border);--t:var(--sm-storage-tile);--a:var(--sm-storage-accent)}
+  .t-external {--f:var(--sm-external-fill);--b:var(--sm-external-border);--t:var(--sm-external-tile);--a:var(--sm-external-accent)}
+  .t-security {--f:var(--sm-security-fill);--b:var(--sm-security-border);--t:var(--sm-security-tile);--a:var(--sm-security-accent)}
+  .t-start {--f:var(--sm-start-fill);--b:var(--sm-start-border);--t:var(--sm-start-tile);--a:var(--sm-start-accent)}
+  .t-active {--f:var(--sm-active-fill);--b:var(--sm-active-border);--t:var(--sm-active-tile);--a:var(--sm-active-accent)}
+  .t-waiting {--f:var(--sm-waiting-fill);--b:var(--sm-waiting-border);--t:var(--sm-waiting-tile);--a:var(--sm-waiting-accent)}
+  .t-decision {--f:var(--sm-decision-fill);--b:var(--sm-decision-border);--t:var(--sm-decision-tile);--a:var(--sm-decision-accent)}
+  .t-success {--f:var(--sm-success-fill);--b:var(--sm-success-border);--t:var(--sm-success-tile);--a:var(--sm-success-accent)}
+  .t-failure {--f:var(--sm-failure-fill);--b:var(--sm-failure-border);--t:var(--sm-failure-tile);--a:var(--sm-failure-accent)}
+  .t-neutral {--f:var(--sm-neutral-fill);--b:var(--sm-neutral-border);--t:var(--sm-neutral-tile);--a:var(--sm-neutral-accent)}
+  .ed[data-tint="client"] {--ec:var(--sm-client-accent);--ew:1.75px}
+  .ed[data-tint="service"] {--ec:var(--sm-service-accent);--ew:1.75px}
+  .ed[data-tint="gateway"] {--ec:var(--sm-gateway-accent);--ew:1.75px}
+  .ed[data-tint="database"] {--ec:var(--sm-database-accent);--ew:1.75px}
+  .ed[data-tint="cache"] {--ec:var(--sm-cache-accent);--ew:1.75px}
+  .ed[data-tint="queue"] {--ec:var(--sm-queue-accent);--ew:1.75px}
+  .ed[data-tint="storage"] {--ec:var(--sm-storage-accent);--ew:1.75px}
+  .ed[data-tint="external"] {--ec:var(--sm-external-accent);--ew:1.75px}
+  .ed[data-tint="security"] {--ec:var(--sm-security-accent);--ew:1.75px}
+  .ed[data-tint="start"] {--ec:var(--sm-start-accent);--ew:1.75px}
+  .ed[data-tint="active"] {--ec:var(--sm-active-accent);--ew:1.75px}
+  .ed[data-tint="waiting"] {--ec:var(--sm-waiting-accent);--ew:1.75px}
+  .ed[data-tint="decision"] {--ec:var(--sm-decision-accent);--ew:1.75px}
+  .ed[data-tint="success"] {--ec:var(--sm-success-accent);--ew:1.75px}
+  .ed[data-tint="failure"] {--ec:var(--sm-failure-accent);--ew:1.75px}
+  .ed[data-tint="neutral"] {--ec:var(--sm-neutral-accent);--ew:1.75px}
+  .dg {position:relative}
+  .cw {position:absolute;display:block;border:0;padding:0;margin:0;background:transparent;text-align:left;font:inherit;color:var(--sm-text);border-radius:14px;outline:none;transition:opacity 150ms ease}
+  .cw.cpt {border-radius:12px}
+  button.cw {cursor:pointer}
+  .nc, .scd {position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:var(--f);box-shadow:inset 0 0 0 1px var(--b)}
+  .nc {border-radius:14px}
+  .scd {border-radius:12px}
+  .nc-h {display:flex;align-items:center;gap:12px;height:64px;padding:0 16px;flex-shrink:0}
+  .nc .tile {width:36px;height:36px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:var(--t);color:var(--a)}
+  .nc-tx {display:flex;flex-direction:column;min-width:0}
+  .nc .ct {font-size:13.5px;line-height:20px;font-weight:500;color:var(--sm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .nc .cs {font-size:12px;line-height:16px;color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .nc-rows {display:block;padding:8px 0;flex-shrink:0}
+  .nc-row {display:flex;align-items:center;justify-content:space-between;gap:12px;height:28px;padding:0 16px;font-size:12px}
+  .nc-k {color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .nc-v {max-width:55%;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sm-text)}
+  .nc-stats {display:block;padding:0 12px;margin-bottom:12px;flex-shrink:0}
+  .st-box {display:flex;flex-direction:column;overflow:hidden;border-radius:10px;background:var(--t);box-shadow:inset 0 0 0 1px var(--b)}
+  .st-grid {display:grid;gap:6px;padding:6px;height:60px}
+  .st {display:flex;flex-direction:column;justify-content:center;min-width:0;border-radius:8px;background:var(--sm-stage);padding:0 10px}
+  .st-v {font-size:15px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .st-l {font-size:11px;line-height:16px;color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .st-note {display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;font-size:11.5px;color:var(--sm-text-muted)}
+  .nc-foot {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));align-items:center;gap:12px;height:40px;padding:0 16px;font-size:12px;color:var(--sm-text-muted);box-shadow:inset 0 1px 0 var(--b);flex-shrink:0}
+  .nf-i {display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
+  .nf-i.r {justify-content:flex-end}
+  .nc-cta {display:block;height:48px;padding:0 12px;flex-shrink:0}
+  .cta-in {display:flex;height:36px;align-items:center;justify-content:space-between;border-radius:8px;padding:0 12px;font-size:13px;font-weight:500;background:var(--t)}
+  .cta-in .ic {color:var(--a)}
+  .sc-h {display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;flex-shrink:0}
+  .scd .tile {width:28px;height:28px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;background:var(--t);color:var(--a)}
+  .scd .ct {font-size:13px;line-height:18px;font-weight:500;color:var(--sm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .scd .cs {font-size:11.5px;line-height:16px;color:var(--sm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .sc-tag {display:flex;align-items:flex-start;height:24px;padding:0 12px 0 50px;flex-shrink:0}
+  .pill {display:inline-flex;align-items:center;height:18px;max-width:100%;padding:0 8px;border-radius:9999px;font-size:11px;font-weight:500;background:var(--t);color:var(--sm-text);white-space:nowrap;overflow:hidden}
+  .scd.final {box-shadow:inset 0 0 0 1.5px var(--a),inset 0 0 0 3.5px var(--f),inset 0 0 0 4.5px var(--a)}
+  [data-em="focus"] {outline:2px solid var(--a);outline-offset:3px}
+  [data-em="dim"], [data-dim="true"], [data-dim="dim"] {opacity:.22}
+  .cw:focus-visible {outline:2px solid var(--sm-text);outline-offset:3px}
+  .hd {position:absolute;width:7px;height:7px;border-radius:9999px;background:var(--sm-stage);border:1.5px solid var(--a);pointer-events:none}
+  .hin-v {left:50%;top:0;transform:translate(-50%, -50%)}
+  .hout-v {left:50%;bottom:0;transform:translate(-50%, 50%)}
+  .hin-h {top:50%;left:0;transform:translate(-50%, -50%)}
+  .hout-h {top:50%;right:0;transform:translate(50%, -50%)}
+  .hd.rh {transform:translate(-50%, -50%);transition:opacity 150ms ease}
+  .eg, .pg {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .ed {--ec:var(--sm-edge);--ew:1.25px;transition:opacity 150ms ease}
+  .ed .ln {fill:none;stroke:var(--ec);stroke-width:var(--ew);transition:stroke 150ms ease, stroke-width 150ms ease}
+  .ed .ah {fill:var(--ec);stroke:none;transition:fill 150ms ease}
+  .ed .ah.open {fill:none;stroke:var(--ec);stroke-width:1.25px;stroke-linejoin:round}
+  .ed.k-async .ln {stroke-dasharray:5 4}
+  .ed.k-return .ln {stroke-dasharray:1 4;stroke-linecap:round}
+  .ed.tone-main {--ec:var(--sm-text);--ew:1.75px}
+  .ed.tone-security {--ec:var(--sm-security-accent);--ew:1.5px}
+  .ed.tone-error {--ec:var(--sm-failure-accent);--ew:1.5px}
+  .lifeline {stroke:var(--sm-group-border);stroke-width:1;stroke-dasharray:4 4;transition:opacity 150ms ease}
+  .act {fill:var(--a);fill-opacity:.16;stroke:var(--a);stroke-width:1;transition:opacity 150ms ease}
+  .startmark line {stroke:var(--sm-start-accent);stroke-width:1.5}
+  .startmark path, .startmark circle {fill:var(--sm-start-accent)}
+  .elb {position:absolute;transform:translate(-50%, -50%);white-space:nowrap;border-radius:9999px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);padding:2px 8px;font-size:11px;line-height:1.5;color:var(--sm-text-muted);pointer-events:none;transition:opacity 150ms ease}
+  .elt {position:absolute;transform:translate(-50%, -50%);white-space:nowrap;border-radius:4px;background:var(--sm-stage);padding:0 6px;font-size:11.5px;line-height:16px;color:var(--sm-text);pointer-events:none;transition:opacity 150ms ease}
+  .fr {position:absolute;border:1px dashed var(--sm-group-border);border-radius:18px;background:var(--sm-group-fill)}
+  .fr.cpt {border-radius:14px}
+  .fr.onlane {background:transparent}
+  .fr.sec {border-color:var(--sm-security-accent)}
+  .fr.sec .ic {color:var(--sm-security-accent)}
+  .fr-l {display:flex;align-items:center;gap:6px;padding:0 20px;font-size:12.5px;font-weight:500;color:var(--sm-text-muted)}
+  .fr.cpt .fr-l {padding:0 12px;font-size:12px}
+  .lane {position:absolute;border-radius:16px;background:var(--sm-group-fill);box-shadow:inset 0 0 0 1px var(--sm-panel-border)}
+  .lane.exc {box-shadow:none;border:1px dashed var(--sm-group-border)}
+  .lane-l {display:flex;align-items:flex-start;gap:6px;width:128px;padding:16px 16px 0;font-size:12.5px;line-height:18px;font-weight:500;color:var(--sm-text-muted);overflow-wrap:anywhere}
+  .lane-l .ic {margin-top:2.5px}
+  .ph-head {position:absolute;display:flex;align-items:flex-start;justify-content:center}
+  .ph-head span {margin-top:6px;font-size:13px;font-weight:500;color:var(--sm-text)}
+  .ph-head i {position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--sm-group-border)}
+  .ph-band {position:absolute;border:1px dashed var(--sm-group-border);border-radius:18px;background:var(--sm-group-fill)}
+  .ph-band span {display:flex;align-items:center;height:44px;padding:0 20px;font-size:12.5px;font-weight:500;color:var(--sm-text-muted)}
+  .ph-band.c span {justify-content:center}
+  .ph-time {position:absolute;border:1px dashed var(--sm-group-border);border-radius:14px;background:var(--sm-group-fill)}
+  .ph-time span {display:flex;align-items:center;height:28px;padding:0 16px;font-size:12px;font-weight:500;color:var(--sm-text-muted)}
+  .pnl {background:var(--sm-panel);box-shadow:var(--shadow-panel);border-radius:16px}
+  .ib {width:36px;height:36px;border:0;border-radius:12px;background:transparent;color:var(--sm-text-muted);display:grid;place-items:center;cursor:pointer;transition:background-color 150ms ease, color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1)}
+  .ib:hover, .ib[aria-pressed="true"] {background:var(--sm-page);color:var(--sm-text)}
+  .ib:active {transform:scale(0.96)}
+  .ib:focus-visible, .pbtn:focus-visible, .lnk:focus-visible, .chip-b:focus-visible, .tab:focus-visible {outline:2px solid var(--sm-text);outline-offset:2px}
+  .pbtn {display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:9999px;background:var(--sm-primary);color:var(--sm-primary-text);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 120ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease}
+  .pbtn:active {transform:scale(0.96)}
+  .lnk {display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;color:var(--sm-text-muted);text-decoration:none;font-size:14px;transition:background-color 150ms ease, color 150ms ease}
+  .lnk:hover {background:var(--sm-page);color:var(--sm-text)}
+  .kbd {display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-family:var(--font-mono);font-size:12px;color:var(--sm-text-muted);background:var(--sm-panel)}
+  .badge {display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-size:13px;color:var(--sm-text)}
+  .grid-bg {background-image:radial-gradient(circle, var(--sm-grid) 1.5px, transparent 1.75px);background-size:24px 24px}
+  .scn {position:relative;background:var(--sm-page)}
+  .stage {position:relative;height:100%;overflow:clip}
+  .frame {position:absolute;left:50%;top:0;transform:translateX(-50%);transform-origin:50% 50%}
+  &.live [data-rv] {transition:opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), translate 700ms cubic-bezier(0.23, 1, 0.32, 1)}
+  &.live [data-rv]:not(.in) {opacity:0;translate:0 28px}
+  &.live [data-rv="lines"] {opacity:1 !important;translate:none !important;transition:none}
+  &.live [data-rv="lines"] .ml>span {display:inline-block;transition:translate 800ms cubic-bezier(0.23, 1, 0.32, 1)}
+  &.live [data-rv="lines"]:not(.in) .ml>span {translate:0 108%}
+  .ml {display:block;overflow:hidden;padding:0.06em 0.04em 0.14em;margin:-0.06em -0.04em -0.14em}
+  &.live [data-route] {stroke-dasharray:1 1;stroke-dashoffset:1}
+  .rhead {opacity:0;transition:opacity 200ms ease;pointer-events:none}
+  .rh-halo {fill:var(--sm-text);fill-opacity:.14}
+  .rh-core {fill:var(--sm-text)}
+  .cmd {display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 18px;border-radius:14px}
+  .cmd.big {height:60px;padding:0 10px 0 22px}
+  .cmd-p {font-size:15px;color:var(--sm-text-muted)}
+  .cmd-t {flex:1 1 auto;min-width:0;font-size:15px;color:var(--sm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .cmd.big .cmd-t, .cmd.big .cmd-p {font-size:16px}
+  .cp [data-i="check"] {display:none}
+  .cp.done [data-i="copy"] {display:none}
+  .cp.done [data-i="check"] {display:block;color:var(--sm-text)}
+  .t-mega {font-size:200px;line-height:0.92;font-weight:600;letter-spacing:-0.05em}
+  .t-hero {font-size:112px;line-height:0.94;font-weight:600;letter-spacing:-0.045em}
+  .t-title {font-size:96px;line-height:1;font-weight:600;letter-spacing:-0.045em}
+  .t-section {font-size:72px;line-height:1.02;font-weight:600;letter-spacing:-0.04em}
+  .t-display {font-size:60px;line-height:70px;font-weight:600;letter-spacing:-0.03em}
+  .t-lede {font-size:22px;line-height:1.4;font-weight:400;color:var(--sm-text-muted)}
+  .acc {color:var(--site-accent)}
+  .muted {color:var(--sm-text-muted)}
+  h1, h2, h3, h4, p {margin:0}
+  .hero-grid {position:absolute;inset:0;-webkit-mask-image:radial-gradient(closest-side, #000 50%, transparent 100%);mask-image:radial-gradient(closest-side, #000 50%, transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 38%;mask-position:50% 38%;-webkit-mask-size:760px 900px;mask-size:760px 900px;animation:gridgrow 1400ms cubic-bezier(0.23, 1, 0.32, 1) 850ms backwards}
+  .par {position:absolute;inset:0}
+  .chip {position:absolute;white-space:nowrap;padding:5px 9px;border-radius:8px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--sm-text-muted);animation-duration:11s, 900ms;animation-timing-function:ease-in-out, cubic-bezier(0.23, 1, 0.32, 1);animation-iteration-count:infinite, 1;animation-direction:alternate, normal;animation-fill-mode:none, backwards}
+  .chip.dp0 {filter:blur(2.4px);opacity:.3}
+  .chip.dp1 {filter:blur(1.2px);opacity:.55}
+  .chip.dp2 {opacity:.85;color:var(--sm-text)}
+  .chip.dr-a {animation-name:driftA, chipin}
+  .chip.dr-b {animation-name:driftB, chipin}
+  .chip.dr-c {animation-name:driftC, chipin}
+  .h-content {position:absolute;inset:0}
+  .hero-h {position:absolute;left:24px;top:158px;margin:0;font-size:52px;line-height:0.96;font-weight:600;letter-spacing:-0.045em;color:var(--sm-text);perspective:900px}
+  .hl {display:block;white-space:nowrap}
+  .hl3 {padding-left:16px}
+  .hw {display:inline-block;animation:hdrop 1000ms linear backwards}
+  .hacc {position:relative;display:inline-block;color:var(--site-accent);animation:acc 320ms cubic-bezier(0.23, 1, 0.32, 1) 2180ms backwards}
+  .hacc .hw {color:inherit}
+  .hglow {position:absolute;left:-12px;right:-12px;top:8px;bottom:2px;border-radius:20px;background:var(--site-accent);filter:blur(14px);opacity:0;pointer-events:none;z-index:-1;animation:hglow 900ms cubic-bezier(0.23, 1, 0.32, 1) 2180ms backwards}
+  .h-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .h-route .rt {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .h-route .rt-in {stroke:url(#hr-fade-m);stroke-dasharray:1 1;animation:rdraw 650ms cubic-bezier(0.33, 1, 0.68, 1) 1480ms backwards}
+  .h-route .ah {fill:var(--sm-text);animation:fadein 140ms linear 2100ms backwards}
+  .h-route .hd2 {fill:var(--sm-stage);stroke:var(--sm-text);stroke-width:1.5;animation:fadein 200ms linear 2240ms backwards}
+  .comet {position:absolute;left:0;top:0;width:6px;height:6px;border-radius:9999px;background:var(--sm-text);box-shadow:0 0 0 4px rgb(237 237 236 / 0.18), 0 0 14px 3px rgb(237 237 236 / 0.22);offset-path:path("M 10 0 V 275 Q 10 287 22 287 H 27");offset-rotate:0deg;offset-distance:100%;opacity:0;animation:comet 720ms cubic-bezier(0.5, 1, 0.89, 1) 1480ms backwards}
+  .h-lede {position:absolute;left:24px;top:346px;width:340px;font-size:17px;line-height:1.45;color:var(--sm-text-muted);animation:rise 900ms cubic-bezier(0.23, 1, 0.32, 1) 1250ms backwards}
+  .h-cta {position:absolute;left:24px;top:444px;width:342px;display:flex;flex-direction:column;gap:10px;animation:rise 900ms cubic-bezier(0.23, 1, 0.32, 1) 1380ms backwards}
+  .h-cta .cmd {width:100%;height:50px;padding:0 6px 0 14px;gap:10px}
+  .h-cta .cmd-t {font-size:13.5px}
+  .h-links {display:flex;gap:4px;margin-left:-14px}
+  .h-works {position:absolute;left:24px;top:578px;width:300px;font-size:13px;line-height:1.5;color:var(--sm-text-muted);animation:rise 900ms cubic-bezier(0.23, 1, 0.32, 1) 1520ms backwards}
+  .h-bridge {display:none}
+  &.live .h-bridge {display:inline;stroke-dasharray:1 1}
+  .hero-chips {position:absolute;inset:0;transform-origin:195px 400px}
+  .m-route {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .m-route path {fill:none;stroke:var(--sm-text);stroke-width:1.5}
+  .vx {position:absolute;left:195px;top:420px;width:0;height:0}
+  .vring {position:absolute;left:0;top:0}
+  .vchip {position:absolute;left:0;top:0;white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-family:var(--font-mono);line-height:1.5;color:var(--sm-text)}
+  .kline-wrap {position:absolute;inset:0;transform-origin:195px 420px}
+  .kl {position:absolute;left:24px;margin:0;font-size:44px;line-height:1;font-weight:600;letter-spacing:-0.045em;color:var(--sm-text)}
+  .kl-l {display:block;white-space:nowrap}
+  .kw {display:inline-block}
+  .kw>span {display:inline-block}
+  .cdot {position:absolute;left:189px;top:414px;width:12px;height:12px;border-radius:9999px;background:var(--sm-edge);opacity:0}
+  .shock {position:absolute;left:-155px;top:70px;width:700px;height:700px;border-radius:9999px;box-shadow:inset 0 0 0 1.5px var(--sm-text);opacity:0}
+  .s2-grid {position:absolute;inset:0;opacity:0;-webkit-mask-image:radial-gradient(closest-side, #000 60%, transparent 100%);mask-image:radial-gradient(closest-side, #000 60%, transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:1100px 1100px;mask-size:1100px 1100px}
+  .mk {position:absolute;left:95px;top:250px;overflow:visible;opacity:0}
+  .mk .bx {transform-box:fill-box;transform-origin:center}
+  .mk-route {stroke-dasharray:100;stroke-dashoffset:0}
+  &.live .mk-route {stroke-dashoffset:100;opacity:0;transition:stroke-dashoffset 640ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1ms linear}
+  &.live .mk-route.drawn {stroke-dashoffset:0;opacity:1}
+  .mcard {opacity:0}
+  .mcard .nc {border-radius:inherit}
+  .mc-in {position:absolute;inset:0;display:flex;flex-direction:column}
+  .mc-ov {position:absolute;inset:0;border-radius:inherit}
+  .s2-edge {position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .s2-edge .ln {fill:none;stroke:var(--sm-edge);stroke-width:1.25}
+  .s2-edge .ah {fill:var(--sm-edge)}
+  .s2-edge .lead {fill:none;stroke:var(--sm-database-accent);stroke-width:1.75}
+  .s2-edge g {opacity:0}
+  .selring {position:absolute;left:50px;top:415px;width:290px;height:74px;border-radius:17px;box-shadow:0 0 0 2px var(--sm-database-accent);opacity:0;pointer-events:none}
+  .s2ev {position:absolute;left:55px;top:536px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;opacity:0}
+  .s2ev code {font-size:13px;color:var(--sm-text)}
+  .s2ev .ic {color:var(--sm-database-accent)}
+  .s2cap {position:absolute;left:24px;right:24px;font-size:17px;line-height:1.45;color:var(--sm-text-muted);opacity:0}
+  .bigp {position:absolute;left:44px;top:150px;font-family:var(--font-mono);font-size:26px;line-height:1.35;color:var(--sm-text);transform-origin:0 0;opacity:0}
+  .bigp-c {position:absolute;left:-22px;top:0;color:var(--sm-text-muted)}
+  .ty {display:block;box-sizing:content-box;overflow:hidden;white-space:nowrap;border-right:0.08em solid transparent}
+  .term {position:absolute;left:20px;top:84px;width:350px;height:392px;border-radius:16px;overflow:hidden}
+  .term-h {display:flex;align-items:center;height:40px;padding:0 16px;font-size:12px;color:var(--sm-text-muted);box-shadow:inset 0 -1px 0 var(--sm-panel-border)}
+  .term-b {display:flex;flex-direction:column;padding:14px 16px;font-size:12px;line-height:21px;color:var(--sm-text-muted);white-space:pre}
+  .term-b b {font-weight:600;color:var(--sm-text)}
+  .tl-row {display:block;margin:0 -8px;padding:0 8px;border-radius:5px}
+  .row-err {background:rgb(240 128 110 / 0.13)}
+  .row-ok {background:rgb(166 217 122 / 0.12)}
+  .row-del {background:rgb(143 166 242 / 0.12)}
+  .t-ink {color:var(--sm-text)}
+  .t-err {color:var(--sm-cache-accent)}
+  .t-ok {color:var(--sm-service-accent)}
+  .tp {display:block;color:var(--sm-text);white-space:pre-wrap;margin-bottom:10px}
+  .tp .c {color:var(--sm-text-muted)}
+  .steps {position:absolute;left:20px;top:508px;width:350px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:22px 18px;margin:0;padding:0;list-style:none}
+  .step {position:relative}
+  .s-n {display:block;font-size:12px;color:var(--sm-text-muted);margin-bottom:6px}
+  .step h3 {font-size:17px;line-height:1.25;font-weight:600;letter-spacing:-0.015em;color:var(--sm-text)}
+  .step p {margin-top:6px;font-size:13px;line-height:1.5;color:var(--sm-text-muted)}
+  .s3-base {stroke:var(--sm-panel-border) !important}
+  .lights {position:absolute;left:-1000px;right:-1000px;top:-1000px;bottom:-1000px;background:var(--sm-page);color:var(--sm-text);transition:background-color 200ms ease}
+  .lights-in {position:absolute;left:1000px;top:1000px;width:390px;height:844px}
+  .vw {position:absolute;left:20px;top:76px;width:350px}
+  .crumb {font-size:13px;line-height:20px;color:var(--sm-text-muted)}
+  .vt {display:flex;align-items:center;gap:10px;margin-top:2px}
+  .vt h2 {font-size:22px;line-height:30px;font-weight:600;letter-spacing:-0.025em}
+  .vt .cnt {font-size:12.5px;color:var(--sm-text-muted)}
+  .tabs {position:absolute;left:0;top:58px;display:flex;gap:20px;height:34px}
+  .tab {height:34px;padding:0;border:0;background:none;font-size:14px;color:var(--sm-text-muted);cursor:pointer}
+  .tab:hover, .tab[aria-selected="true"] {color:var(--sm-text)}
+  .tab-ind {position:absolute;left:0;top:90px;height:2px;border-radius:2px;background:var(--sm-text);transition:translate 180ms cubic-bezier(0.77, 0, 0.175, 1), width 180ms cubic-bezier(0.77, 0, 0.175, 1)}
+  .vw-rule {position:absolute;left:0;right:0;top:92px;height:1px;background:var(--sm-divider)}
+  .vstage {position:absolute;left:20px;top:176px;width:350px;height:470px;border-radius:18px;background-color:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border)}
+  .vstage>.grid-bg {position:absolute;inset:0;border-radius:18px}
+  .vclip {position:absolute;left:20px;top:176px;width:350px;height:470px;clip-path:inset(0px round 18px);touch-action:none}
+  .vcam {position:absolute;left:0;top:0;width:350px;height:470px;transform-origin:175px 235px}
+  .plane-wrap {position:absolute;left:-4px;top:52px;width:359px;height:321px;perspective:1400px;perspective-origin:50% 20%}
+  .plane {position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 45%}
+  .plane-grid {position:absolute;left:-400px;right:-400px;top:-300px;bottom:-300px;opacity:0}
+  .plane .dg {transform:scale(0.356);transform-origin:0 0;transform-style:preserve-3d}
+  .plane .cw {transform-style:preserve-3d}
+  .vchrome .pnl {position:absolute}
+  .v-id {left:30px;top:186px;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px 0 6px;border-radius:14px}
+  .v-id .tile {width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--sm-page);color:var(--sm-text)}
+  .v-id b {font-size:13px;font-weight:500}
+  .v-tools {left:232px;top:186px;height:44px;display:flex;align-items:center;gap:2px;padding:0 4px;border-radius:14px}
+  .v-tools .ib {width:36px;height:36px}
+  .v-zoom {left:30px;top:596px;height:40px;display:flex;align-items:center;gap:2px;padding:0 4px;border-radius:9999px}
+  .v-zoom .ib {width:32px;height:32px;border-radius:9999px}
+  .v-zoom .pct {min-width:44px;text-align:center;font-size:12.5px;font-variant-numeric:tabular-nums}
+  .sheet {position:absolute;left:20px;top:658px;width:350px;height:166px;padding:14px 16px;border-radius:18px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);overflow:hidden}
+  .sheet .cap {display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--sm-text-muted)}
+  .sheet h3 {margin-top:2px;font-size:16px;line-height:1.4;font-weight:600;letter-spacing:-0.02em}
+  .sheet .sub {font-size:12.5px;line-height:1.5;color:var(--sm-text-muted)}
+  .sheet .ev {display:block;margin-top:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--sm-text)}
+  .sheet .i-row {display:flex;justify-content:space-between;align-items:center}
+  .sheet .ib {width:32px;height:32px}
+  .dot {display:inline-block;width:8px;height:8px;border-radius:9999px;flex-shrink:0}
+  .drop-title {position:absolute;left:24px;right:24px;top:96px;font-size:34px;line-height:1.05;font-weight:600;letter-spacing:-0.04em;opacity:0;pointer-events:none}
+  .dt-dark {display:none}
+  &.live .dt-dark {display:block;opacity:1}
+  .feat-sec {position:relative;height:1040px;overflow:hidden;background:var(--sm-page);color:var(--sm-text)}
+  .rline {position:absolute;top:0;bottom:0;left:calc(50% + var(--gl-off, -185px) - 0.75px);width:1.5px;background:var(--sm-text)}
+  .feat-in {position:relative;padding:88px 24px 0}
+  .feat-h {font-size:56px;line-height:0.98;font-weight:600;letter-spacing:-0.05em}
+  .feat-lede {margin-top:20px;font-size:17px;line-height:1.45;color:var(--sm-text-muted)}
+  .feat-g {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin-top:40px;box-shadow:inset 0 1px 0 var(--sm-divider)}
+  .feat {padding:20px 12px 22px 0;box-shadow:inset 0 -1px 0 var(--sm-divider)}
+  .feat:nth-child(2n) {padding-left:16px;box-shadow:inset 0 -1px 0 var(--sm-divider), inset 1px 0 0 var(--sm-divider)}
+  .feat-t {display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;letter-spacing:-0.015em}
+  .feat-t .ic {color:var(--sm-text-muted)}
+  .feat p {margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--sm-text-muted)}
+  &.live .a-kd0 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd1 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd2 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd3 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  &.live .a-kd4 .ed.k-async .ln {stroke-dasharray:5 4;animation:none}
+  .kinds-h {position:absolute;left:24px;top:78px;height:78px;overflow:hidden}
+  .kn-col {display:flex;flex-direction:column;transform:translateY(-156px)}
+  &.live .kn-col {transform:none}
+  .kn {display:block;height:78px;font-size:60px;line-height:78px;font-weight:600;letter-spacing:-0.05em;white-space:nowrap}
+  .kdefs {position:absolute;left:24px;top:164px;height:24px}
+  .kdef {position:absolute;left:0;top:0;white-space:nowrap;font-size:17px;line-height:1.4;color:var(--sm-text-muted);opacity:0}
+  .kdef.on {opacity:1}
+  .kcount {position:absolute;left:24px;top:204px;font-size:12.5px;color:var(--sm-text-muted)}
+  .klayer {position:absolute;transform-origin:0 0;opacity:0}
+  .klayer.on {opacity:1}
+  .kmore {position:absolute;left:12px;top:782px;font-size:14px}
+  .mm-e {fill:none;stroke:var(--sm-edge);stroke-width:1}
+  .mm-c {fill-opacity:.55}
+  .mm-lane {fill:var(--sm-group-fill);stroke:var(--sm-panel-border);stroke-width:1}
+  .mm-fr {fill:none;stroke:var(--sm-group-border);stroke-width:1;stroke-dasharray:3 3}
+  .file {position:absolute;left:58px;top:92px;width:274px;height:372px;perspective:1100px}
+  .file-in {position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg)}
+  .face {position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border);-webkit-backface-visibility:hidden;backface-visibility:hidden}
+  .face.back {transform:rotateY(180deg);background:var(--sm-panel)}
+  .ff-t {font-size:17px;font-weight:600;letter-spacing:-0.02em}
+  .ff-map {display:grid;place-items:center;flex:1}
+  .fb-shot {height:214px;border-radius:12px;background-color:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border);display:grid;place-items:center;overflow:hidden}
+  .fb-n {margin-top:4px;font-size:17px}
+  .fb-s {font-size:13.5px;line-height:1.45;color:var(--sm-text-muted)}
+  .fl-lights {position:absolute;left:-1000px;right:-1000px;top:-1000px;bottom:-1000px;display:none;background:var(--sm-page);color:var(--sm-text);pointer-events:none}
+  &.live .fl-lights {display:block}
+  .fl-in {position:absolute;left:1000px;top:1000px;width:390px;height:844px}
+  .of-h {position:absolute;left:24px;top:496px;font-size:48px;line-height:1;font-weight:600;letter-spacing:-0.05em}
+  .of-list {position:absolute;left:24px;top:606px;right:20px;display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
+  .of-list li {display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--sm-text-muted)}
+  .of-list .ic {margin-top:2px;color:var(--sm-text)}
+  .of-more {position:absolute;left:24px;top:770px}
+  .pill-l {display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 18px;border-radius:9999px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);color:var(--sm-text);font-size:14px;font-weight:500;text-decoration:none}
+  .inst {position:relative;height:1000px;overflow:hidden;background:var(--sm-page);color:var(--sm-text)}
+  .inst-in {position:relative;padding:112px 20px 0}
+  .ir-a {position:absolute;top:0;left:calc(50% + var(--gl-off, -185px) - 0.75px);width:calc(-1 * var(--gl-off, -185px) - 11.25px);height:40.75px;border-left:1.5px solid var(--sm-text);border-bottom:1.5px solid var(--sm-text);border-bottom-left-radius:12px}
+  .ir-b {position:absolute;top:39.25px;left:calc(50% - 12px);width:12.75px;height:73.5px;border-top:1.5px solid var(--sm-text);border-right:1.5px solid var(--sm-text);border-top-right-radius:12px}
+  .ir-d {position:absolute;top:108.5px;left:calc(50% - 4.5px);width:9px;height:9px;border-radius:9999px;background:var(--sm-panel);box-shadow:inset 0 0 0 1.5px var(--sm-text);z-index:2}
+  .target {position:relative;padding:40px 22px 32px;border-radius:24px;background:var(--sm-panel);box-shadow:inset 0 0 0 1px var(--sm-panel-border);text-align:center}
+  .target img {display:block;margin:0 auto}
+  .target h2 {margin-top:24px;font-size:36px;line-height:1.08;font-weight:600;letter-spacing:-0.035em}
+  .target .lede {margin-top:12px;font-size:16px;line-height:1.45;color:var(--sm-text-muted)}
+  .ist {display:flex;flex-direction:column;gap:18px;margin-top:28px;text-align:left}
+  .ist h3 {display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;margin-bottom:8px}
+  .ist-n {display:grid;place-items:center;width:22px;height:22px;border-radius:9999px;box-shadow:inset 0 0 0 1.5px var(--sm-text-muted);font-size:11.5px}
+  .ist .cmd, .ist-alt .cmd {display:flex;width:100%;height:48px;padding:0 4px 0 12px;gap:6px}
+  .ist .cmd .ib, .ist-alt .cmd .ib {width:32px;height:32px;flex-shrink:0}
+  .ist .cmd-t, .ist-alt .cmd-t {font-size:12.5px}
+  .ist .cmd-p, .ist-alt .cmd-p {font-size:12.5px}
+  .ask {padding:12px 14px;border-radius:12px;background:var(--sm-stage);box-shadow:inset 0 0 0 1px var(--sm-panel-border);font-size:14.5px;line-height:1.5}
+  .ist-alt {margin-top:20px;padding-top:18px;box-shadow:inset 0 1px 0 var(--sm-divider);text-align:left;font-size:13px;line-height:1.5;color:var(--sm-text-muted)}
+  .ist-alt .cmd {margin-top:10px;height:auto;min-height:48px;padding-top:8px;padding-bottom:8px}
+  .ist-alt .cmd-t {white-space:normal;line-height:1.5}
+  .ilinks {display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin-top:18px}
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {animation:none !important;transition:none !important}
+  }
+}
+
+@keyframes gridgrow{0%{-webkit-mask-size:0px 0px;mask-size:0px 0px}100%{-webkit-mask-size:760px 900px;mask-size:760px 900px}}
+@keyframes driftA{0%{translate:0 0}100%{translate:14px -8px}}
+@keyframes driftB{0%{translate:0 0}100%{translate:-12px 9px}}
+@keyframes driftC{0%{translate:0 0}100%{translate:8px 12px}}
+@keyframes chipin{0%{opacity:0}}
+@keyframes hdrop{0%{opacity:0;transform:translate3d(var(--x), var(--y), var(--z));filter:blur(var(--bl));animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1)}22%{opacity:0.5;transform:translate3d(calc(var(--x) * 0.82), calc(var(--y) * 0.82), var(--z));filter:blur(var(--bl));animation-timing-function:cubic-bezier(0.55, 0, 1, 0.45)}70%{opacity:1;transform:translate3d(0px, 0px, 0px);filter:blur(0px);animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1)}84%{transform:translate3d(0px, 0px, 12px);animation-timing-function:cubic-bezier(0.55, 0, 1, 0.45)}100%{opacity:1;transform:translate3d(0px, 0px, 0px);filter:blur(0px)}}
+@keyframes acc{0%{color:var(--sm-text)}100%{color:var(--brand-accent)}}
+@keyframes hglow{0%{opacity:0.42;transform:scale(0.96)}100%{opacity:0;transform:scale(1.08)}}
+@keyframes rdraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
+@keyframes fadein{0%{opacity:0}100%{opacity:1}}
+@keyframes comet{0%{offset-distance:0%;opacity:1}96%{opacity:1}100%{offset-distance:100%;opacity:0}}
+@keyframes rise{0%{opacity:0;translate:0 16px}100%{opacity:1;translate:0 0}}
+@keyframes spin{100%{rotate:360deg}}
diff --git a/site/components/landing/mobile/Agent.tsx b/site/components/landing/mobile/Agent.tsx
new file mode 100644
index 0000000..65ecd3e
--- /dev/null
+++ b/site/components/landing/mobile/Agent.tsx
@@ -0,0 +1,112 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Agent() {
+  return (
+    <>
+      <section
+        className="scn"
+        data-anchor="agent"
+        data-scene="agent"
+        data-runway="2.2"
+        data-fw="390"
+        data-fh="844"
+        data-theme-sec="dark"
+        style={s({ height: '844px' })}
+        aria-label="Ask your coding agent"
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '390px', height: '844px' })}>
+            <h2 className="sr">Ask your coding agent. It writes the JSON, stackmap checks it and delivers one file.</h2>
+            <svg className="m-route" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+              <path d="M 380 -1200 V 0" />
+              <path className="s3-base" d="M 380 0 V 482 Q 380 494 368 494 H 22 Q 10 494 10 506 V 844" />
+              <path
+                data-route="agent"
+                data-r0="0"
+                data-r1="0.97"
+                data-head="h-agent"
+                d="M 380 0 V 482 Q 380 494 368 494 H 22 Q 10 494 10 506 V 844"
+                pathLength="1"
+              />
+              <g className="rhead" data-route-head="h-agent">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+              <path data-route="agent" data-r0="0.97" data-r1="1" d="M 10 844 V 2044" pathLength="1" />
+            </svg>
+            <div className="term pnl a-term">
+              <div className="term-h mono">~/commerce-api</div>
+              <div className="term-b mono">
+                <span className="tp a-tp">
+                  <span className="c">› </span>Make an architecture diagram of this repository, backed by evidence from the code.
+                </span>
+                <span className="tl-row a-tr0">
+                  <span className="t-ink">writing</span> diagram.json
+                </span>
+                <span className="tl-row a-tr1">
+                  <b>stackmap</b> · validate
+                </span>
+                <span className="tl-row row-err a-tr2">
+                  <span className="t-err">error</span> refs/unknown-node
+                </span>
+                <span className="tl-row row-err a-tr3"> Unknown node "orders-db"</span>
+                <span className="tl-row a-tr4"> fix: use "orders"</span>
+                <span className="tl-row a-tr5">
+                  <b>stackmap</b> · validate
+                </span>
+                <span className="tl-row row-ok a-tr6">
+                  <span className="t-ok">✓ valid: no diagnostics</span>
+                </span>
+                <span className="tl-row a-tr7">
+                  <b>stackmap</b> · deliver
+                </span>
+                <span className="tl-row row-del a-tr8">
+                  delivered <span className="acc">diagram.html</span>
+                </span>
+              </div>
+            </div>
+            <p className="bigp mono a-bigp" aria-hidden="true">
+              <span className="bigp-c">›</span>
+              <span className="ty a-ty0" style={s({ width: '20ch' })}>
+                Make an architecture
+              </span>
+              <span className="ty a-ty1" style={s({ width: '15ch' })}>
+                diagram of this
+              </span>
+              <span className="ty a-ty2" style={s({ width: '21ch' })}>
+                repository, backed by
+              </span>
+              <span className="ty a-ty3" style={s({ width: '23ch' })}>
+                evidence from the code.
+              </span>
+            </p>
+            <ol className="steps">
+              <li className="step a-st0">
+                <span className="mono s-n">01</span>
+                <h3>Ask.</h3>
+                <p>Your coding agent, for a codebase, system, process or request.</p>
+              </li>
+              <li className="step a-st1">
+                <span className="mono s-n">02</span>
+                <h3>It writes JSON.</h3>
+                <p>Nodes, connections, groups and views. No coordinates.</p>
+              </li>
+              <li className="step a-st2">
+                <span className="mono s-n">03</span>
+                <h3>stackmap checks it.</h3>
+                <p>Each problem comes with a code and the allowed fixes.</p>
+              </li>
+              <li className="step a-st3">
+                <span className="mono s-n">04</span>
+                <h3>One file comes back.</h3>
+                <p>deliver lays it out as one offline HTML viewer.</p>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/mobile/Features.tsx b/site/components/landing/mobile/Features.tsx
new file mode 100644
index 0000000..6614148
--- /dev/null
+++ b/site/components/landing/mobile/Features.tsx
@@ -0,0 +1,210 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Features() {
+  return (
+    <>
+      <section className="feat-sec" data-theme-sec="light" data-sec="features" aria-labelledby="feat-h-m" data-theme="light">
+        <i className="rline" aria-hidden="true"></i>
+        <div className="feat-in">
+          <h2 className="feat-h" id="feat-h-m" data-rv="lines">
+            <span className="ml">
+              <span>Trace. Route.</span>
+            </span>
+            <span className="ml">
+              <span className="acc" style={s({ transitionDelay: '90ms' })}>
+                Play.
+              </span>
+            </span>
+          </h2>
+          <p className="feat-lede" data-rv="">
+            The viewer above is the real thing, cut down to one diagram. Here is what each control does in the file your agent delivers.
+          </p>
+          <div className="feat-g">
+            <div className="feat" data-rv="" style={s({ transitionDelay: '0ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="m21 21-4.34-4.34" />
+                  <circle cx="11" cy="11" r="8" />
+                </svg>
+                <span>Explore</span>
+              </h3>
+              <p>A card’s details, connections and the file and line behind it.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '70ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M15 6a9 9 0 0 0-9 9V3" />
+                  <circle cx="18" cy="6" r="3" />
+                  <circle cx="6" cy="18" r="3" />
+                </svg>
+                <span>Trace</span>
+              </h3>
+              <p>Keep a node’s upstream and downstream; the rest dims.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '0ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="6" cy="19" r="3" />
+                  <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" />
+                  <circle cx="18" cy="5" r="3" />
+                </svg>
+                <span>Route</span>
+              </h3>
+              <p>Every path between two nodes, lit hop by hop.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '70ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
+                  <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
+                  <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
+                </svg>
+                <span>Find</span>
+              </h3>
+              <p>Search titles, ids and types, or dim a type with the lens.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '0ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M2 3h20" />
+                  <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
+                  <path d="m7 21 5-5 5 5" />
+                </svg>
+                <span>Guided views</span>
+              </h3>
+              <p>Tabs your agent defines, presented full screen.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '70ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
+                </svg>
+                <span>Play</span>
+              </h3>
+              <p>Pulses travel whatever you’re looking at.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '0ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="18" cy="5" r="3" />
+                  <circle cx="6" cy="12" r="3" />
+                  <circle cx="18" cy="19" r="3" />
+                  <line x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
+                  <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
+                </svg>
+                <span>Share</span>
+              </h3>
+              <p>The URL keeps the view. Export images or a video.</p>
+            </div>
+            <div className="feat" data-rv="" style={s({ transitionDelay: '70ms' })}>
+              <h3 className="feat-t">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="12" cy="12" r="4" />
+                  <path d="M12 2v2" />
+                  <path d="M12 20v2" />
+                  <path d="m4.93 4.93 1.41 1.41" />
+                  <path d="m17.66 17.66 1.41 1.41" />
+                  <path d="M2 12h2" />
+                  <path d="M20 12h2" />
+                  <path d="m6.34 17.66-1.41 1.41" />
+                  <path d="m19.07 4.93-1.41 1.41" />
+                </svg>
+                <span>Themes</span>
+              </h3>
+              <p>Dark and light. Reduced motion is respected.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/mobile/Files.tsx b/site/components/landing/mobile/Files.tsx
new file mode 100644
index 0000000..f95e4f2
--- /dev/null
+++ b/site/components/landing/mobile/Files.tsx
@@ -0,0 +1,209 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Files() {
+  return (
+    <>
+      <section
+        className="scn"
+        data-anchor="files"
+        data-scene="files"
+        data-runway="1.8"
+        data-fw="390"
+        data-fh="844"
+        data-theme-sec="dark"
+        style={s({ height: '844px' })}
+        data-lit="0.0805"
+        aria-label="One file. Opens anywhere."
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '390px', height: '844px' })}>
+            <svg className="m-route" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+              <path d="M 10 -1200 V 0" />
+              <path data-route="files" data-r0="0" data-r1="0.97" data-head="h-files" d="M 10 0 V 844" pathLength="1" />
+              <path data-route="files" data-r0="0.97" data-r1="1" d="M 10 844 V 2044" pathLength="1" />
+              <g className="rhead" data-route-head="h-files">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+            </svg>
+            <div className="fl-lights a-flights" aria-hidden="true" data-theme="light">
+              <div className="fl-in">
+                <svg className="m-route" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+                  <path d="M 10 -1200 V 0" />
+                  <path data-route="files" data-r0="0" data-r1="0.97" data-head="h-files-l" d="M 10 0 V 844" pathLength="1" />
+                  <path data-route="files" data-r0="0.97" data-r1="1" d="M 10 844 V 2044" pathLength="1" />
+                  <g className="rhead" data-route-head="h-files-l">
+                    <circle r="9" className="rh-halo" />
+                    <circle r="3.25" className="rh-core" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+            <div className="file a-file" aria-hidden="true">
+              <div className="file-in a-filein">
+                <div className="face front" data-theme="light">
+                  <span className="ff-t">Commerce API</span>
+                  <div className="ff-map">
+                    <svg width="238" height="290" viewBox="0 0 238 290" aria-hidden="true" className="mm">
+                      <rect x="8" y="210.7" width="222" height="32.5" rx="3.4" className="mm-fr" />
+                      <polyline points="114.2,62.1 114.2,79.3" className="mm-e" />
+                      <polyline points="190.8,62.1 190.8,67.9 114.2,67.9 114.2,79.3" className="mm-e" />
+                      <polyline points="114.2,94.6 114.2,111.9" className="mm-e" />
+                      <polyline points="114.2,94.6 114.2,100.4 190.8,100.4 190.8,111.9" className="mm-e" />
+                      <polyline points="190.8,127.2 190.8,132.9 152.5,132.9 152.5,144.4" className="mm-e" />
+                      <polyline points="190.8,127.2 190.8,222.1" className="mm-e" />
+                      <polyline points="190.8,127.2 190.8,198 119,198 119,222.1" className="mm-e" />
+                      <polyline points="190.8,127.2 190.8,132.9 75.9,132.9 75.9,144.4" className="mm-e" />
+                      <polyline points="75.9,159.7 75.9,176.9" className="mm-e" />
+                      <polyline points="75.9,192.2 75.9,198 119,198 119,222.1" className="mm-e" />
+                      <polyline points="75.9,192.2 75.9,198 47.2,198 47.2,222.1" className="mm-e" />
+                      <rect x="80.7" y="46.8" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="157.3" y="46.8" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="80.7" y="79.3" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-gateway-accent)' })} className="mm-c" />
+                      <rect x="80.7" y="111.9" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-security-accent)' })} className="mm-c" />
+                      <rect x="157.3" y="111.9" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="119" y="144.4" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-external-accent)' })} className="mm-c" />
+                      <rect x="157.3" y="222.1" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-cache-accent)' })} className="mm-c" />
+                      <rect x="85.5" y="222.1" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-database-accent)' })} className="mm-c" />
+                      <rect x="42.4" y="144.4" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-queue-accent)' })} className="mm-c" />
+                      <rect x="42.4" y="176.9" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="13.7" y="222.1" width="67" height="15.3" rx="2.9" style={s({ fill: 'var(--sm-storage-accent)' })} className="mm-c" />
+                    </svg>
+                  </div>
+                </div>
+                <div className="face back">
+                  <div className="fb-shot grid-bg">
+                    <svg width="230" height="200" viewBox="0 0 230 200" aria-hidden="true" className="mm">
+                      <rect x="15.5" y="158.8" width="198.9" height="29.2" rx="3.1" className="mm-fr" />
+                      <polyline points="110.7,25.7 110.7,41.2" className="mm-e" />
+                      <polyline points="179.3,25.7 179.3,30.9 110.7,30.9 110.7,41.2" className="mm-e" />
+                      <polyline points="110.7,54.9 110.7,70.3" className="mm-e" />
+                      <polyline points="110.7,54.9 110.7,60 179.3,60 179.3,70.3" className="mm-e" />
+                      <polyline points="179.3,84 179.3,89.2 145,89.2 145,99.5" className="mm-e" />
+                      <polyline points="179.3,84 179.3,169.1" className="mm-e" />
+                      <polyline points="179.3,84 179.3,147.5 115,147.5 115,169.1" className="mm-e" />
+                      <polyline points="179.3,84 179.3,89.2 76.4,89.2 76.4,99.5" className="mm-e" />
+                      <polyline points="76.4,113.2 76.4,128.6" className="mm-e" />
+                      <polyline points="76.4,142.3 76.4,147.5 115,147.5 115,169.1" className="mm-e" />
+                      <polyline points="76.4,142.3 76.4,147.5 50.7,147.5 50.7,169.1" className="mm-e" />
+                      <rect x="80.7" y="12" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="149.3" y="12" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-client-accent)' })} className="mm-c" />
+                      <rect x="80.7" y="41.2" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-gateway-accent)' })} className="mm-c" />
+                      <rect x="80.7" y="70.3" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-security-accent)' })} className="mm-c" />
+                      <rect x="149.3" y="70.3" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="115" y="99.5" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-external-accent)' })} className="mm-c" />
+                      <rect x="149.3" y="169.1" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-cache-accent)' })} className="mm-c" />
+                      <rect x="85" y="169.1" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-database-accent)' })} className="mm-c" />
+                      <rect x="46.4" y="99.5" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-queue-accent)' })} className="mm-c" />
+                      <rect x="46.4" y="128.6" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-service-accent)' })} className="mm-c" />
+                      <rect x="20.7" y="169.1" width="60" height="13.7" rx="2.6" style={s({ fill: 'var(--sm-storage-accent)' })} className="mm-c" />
+                    </svg>
+                  </div>
+                  <span className="mono fb-n">diagram.html</span>
+                  <span className="fb-s">One file. Opens offline, in any browser.</span>
+                </div>
+              </div>
+            </div>
+            <h2 className="of-h a-ofh">
+              One file.
+              <br />
+              <span className="acc">Opens anywhere.</span>
+            </h2>
+            <ul className="of-list">
+              <li className="a-ofl0">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>No server, no account, nothing to install to open it.</span>
+              </li>
+              <li className="a-ofl1">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>The same JSON always gives the same file, byte for byte.</span>
+              </li>
+              <li className="a-ofl2">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>The URL keeps the view, the selection, the route and playback.</span>
+              </li>
+              <li className="a-ofl3">
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                <span>Export PNG, JPEG, WebP or SVG, or a short video of the flow.</span>
+              </li>
+            </ul>
+            <div className="of-more a-ofmore">
+              <a className="pill-l" href="/examples">
+                <span>See the examples</span>
+                <svg
+                  className="ic"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M5 12h14" />
+                  <path d="m12 5 7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/mobile/Hero.tsx b/site/components/landing/mobile/Hero.tsx
new file mode 100644
index 0000000..2fe3798
--- /dev/null
+++ b/site/components/landing/mobile/Hero.tsx
@@ -0,0 +1,144 @@
+import { SITE } from '@/lib/site-data';
+import { BoardCopy } from '../BoardCopy';
+import { s } from '../style';
+
+export function Hero() {
+  return (
+    <>
+      <section
+        className="scn"
+        data-anchor="top"
+        data-scene="top"
+        data-runway="0.5"
+        data-fw="390"
+        data-fh="844"
+        data-theme-sec="dark"
+        style={s({ height: '844px' })}
+        aria-label="stackmap"
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '390px', height: '844px' })}>
+            <div className="hero-grid grid-bg" aria-hidden="true"></div>
+            <div className="hero-chips a-hero-chips" aria-hidden="true">
+              <div className="par par0">
+                <span className="chip dp0 dr-a" style={s({ left: '150px', top: '92px', animationDelay: '0.0s, 120ms' })}>
+                  .github/workflows/deploy.yml
+                </span>
+                <span className="chip dp0 dr-c" style={s({ left: '-30px', top: '800px', animationDelay: '-8.5s, 345ms' })}>
+                  infra/queue/order-events.tf
+                </span>
+                <span className="chip dp0 dr-b" style={s({ left: '220px', top: '700px', animationDelay: '-10.2s, 390ms' })}>
+                  packages/auth/session.ts
+                </span>
+              </div>
+              <div className="par par1">
+                <span className="chip dp1 dr-c" style={s({ left: '196px', top: '642px', animationDelay: '-3.4s, 210ms' })}>
+                  docker-compose.yml
+                </span>
+                <span className="chip dp1 dr-a" style={s({ left: '16px', top: '700px', animationDelay: '-5.1s, 255ms' })}>
+                  infra/edge/gateway.yaml
+                </span>
+              </div>
+              <div className="par par2">
+                <span className="chip dp2 dr-b" style={s({ left: '14px', top: '108px', animationDelay: '-1.7s, 165ms' })}>
+                  infra/orders/postgres.tf
+                </span>
+                <span className="chip dp2 dr-b" style={s({ left: '128px', top: '752px', animationDelay: '-6.8s, 300ms' })}>
+                  services/api/src/server.ts
+                </span>
+              </div>
+            </div>
+            <svg className="h-route" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+              <defs>
+                <linearGradient id="hr-fade-m" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="130">
+                  <stop offset="0" style={s({ stopColor: 'var(--sm-text)', stopOpacity: '0' })} />
+                  <stop offset="1" style={s({ stopColor: 'var(--sm-text)', stopOpacity: '1' })} />
+                </linearGradient>
+              </defs>
+              <path className="rt rt-in" d="M 10 0 V 275 Q 10 287 22 287 H 27" pathLength="1" />
+              <path className="rt h-bridge a-hbridge" d="M 27 287 H 330" pathLength="1" />
+              <g className="a-hmarks">
+                <path className="ah" d="M27 284 L34 287 L27 290 Z" />
+              </g>
+              <path
+                className="rt"
+                data-route="top"
+                data-r0="0.05"
+                data-r1="0.96"
+                data-head="h-top"
+                d="M 330 287 H 368 Q 380 287 380 299 V 844"
+                pathLength="1"
+              />
+              <path className="rt" data-route="top" data-r0="0.96" data-r1="1" d="M 380 844 V 2044" pathLength="1" />
+              <g className="a-hmarks">
+                <circle className="hd2" cx="325" cy="287" r="3.5" />
+              </g>
+              <g className="rhead" data-route-head="h-top">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+            </svg>
+            <i className="comet" aria-hidden="true"></i>
+            <div className="h-content a-hero-out">
+              <h1 className="hero-h">
+                <span className="hl">
+                  <span className="hw" style={s({ '--x': '-60px', '--y': '-70px', '--z': '520px', '--bl': '6px', animationDelay: '180ms' })}>
+                    Every
+                  </span>{' '}
+                  <span className="hw" style={s({ '--x': '70px', '--y': '60px', '--z': '340px', '--bl': '4px', animationDelay: '270ms' })}>
+                    layer
+                  </span>
+                </span>
+                <span className="hl">
+                  <span className="hw" style={s({ '--x': '-30px', '--y': '110px', '--z': '600px', '--bl': '7px', animationDelay: '360ms' })}>
+                    of
+                  </span>{' '}
+                  <span className="hw" style={s({ '--x': '80px', '--y': '-80px', '--z': '420px', '--bl': '5px', animationDelay: '450ms' })}>
+                    your
+                  </span>{' '}
+                  <span className="hw" style={s({ '--x': '-70px', '--y': '40px', '--z': '300px', '--bl': '3px', animationDelay: '540ms' })}>
+                    stack,
+                  </span>
+                </span>
+                <span className="hl hl3">
+                  <span className="hacc">
+                    <i className="hglow" aria-hidden="true"></i>
+                    <span className="hw" style={s({ '--x': '60px', '--y': '-40px', '--z': '480px', '--bl': '6px', animationDelay: '630ms' })}>
+                      on
+                    </span>{' '}
+                    <span className="hw" style={s({ '--x': '-50px', '--y': '90px', '--z': '380px', '--bl': '4px', animationDelay: '720ms' })}>
+                      one
+                    </span>{' '}
+                    <span className="hw" style={s({ '--x': '70px', '--y': '30px', '--z': '560px', '--bl': '6px', animationDelay: '810ms' })}>
+                      map.
+                    </span>
+                  </span>
+                </span>
+              </h1>
+              <p className="h-lede">Interactive system diagrams your coding agent writes, as one offline HTML file.</p>
+              <div className="h-cta">
+                <div className="cmd pnl">
+                  <span className="mono cmd-p" aria-hidden="true">
+                    $
+                  </span>
+                  <code className="mono cmd-t">{SITE.install.skill}</code>
+                  <BoardCopy text={SITE.install.skill} label="Copy the install command" />
+                </div>
+                <div className="h-links">
+                  <a className="lnk" href="https://github.com/hyamero/stackmap" target="_blank" rel="noreferrer">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                    </svg>
+                    <span>GitHub</span>
+                  </a>
+                </div>
+              </div>
+              <p className="h-works">Works with Claude Code, Cursor, Codex and other coding agents.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/mobile/Install.tsx b/site/components/landing/mobile/Install.tsx
new file mode 100644
index 0000000..0cce608
--- /dev/null
+++ b/site/components/landing/mobile/Install.tsx
@@ -0,0 +1,85 @@
+import { SITE } from '@/lib/site-data';
+import { BoardCopy } from '../BoardCopy';
+
+export function Install() {
+  return (
+    <>
+      <section className="inst" data-anchor="install" data-theme-sec="dark" data-sec="install" aria-labelledby="inst-h-m" data-theme="dark">
+        <i className="ir-a" aria-hidden="true"></i>
+        <i className="ir-b" aria-hidden="true"></i>
+        <i className="ir-d" aria-hidden="true"></i>
+        <div className="inst-in">
+          <div className="target" data-rv="">
+            <img src="/brand/stackmap-lockup-dark.svg" alt="stackmap" width="183" height="40" />
+            <h2 id="inst-h-m">
+              Every layer of your stack, <span className="acc">on one map.</span>
+            </h2>
+            <p className="lede">Interactive system diagrams your coding agent writes, as one offline HTML file.</p>
+            <div className="ist">
+              <div>
+                <h3>
+                  <span className="ist-n mono">1</span>Install the skill
+                </h3>
+                <div className="cmd pnl">
+                  <span className="mono cmd-p" aria-hidden="true">
+                    $
+                  </span>
+                  <code className="mono cmd-t">{SITE.install.skill}</code>
+                  <BoardCopy text={SITE.install.skill} label="Copy the install command" />
+                </div>
+              </div>
+              <div>
+                <h3>
+                  <span className="ist-n mono">2</span>Then ask
+                </h3>
+                <p className="ask">Make an architecture diagram of this repository, backed by evidence from the code.</p>
+              </div>
+            </div>
+            <div className="ist-alt">
+              <p>Or run the CLI on its own, with Node 22.12 or later:</p>
+              <div className="cmd pnl">
+                <span className="mono cmd-p" aria-hidden="true">
+                  $
+                </span>
+                <code className="mono cmd-t">{SITE.install.cli}</code>
+                <BoardCopy text={SITE.install.cli} label="Copy the CLI command" />
+              </div>
+            </div>
+            <div className="ilinks">
+              <a className="lnk" href="https://github.com/hyamero/stackmap" target="_blank" rel="noreferrer">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                </svg>
+                <span>GitHub</span>
+              </a>
+              <a className="lnk" href="https://www.npmjs.com/package/@hyamero/stackmap" target="_blank" rel="noreferrer">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
+                </svg>
+                <span>npm</span>
+              </a>
+              <a className="lnk" href="/docs">
+                <svg
+                  className="ic"
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M12 5v16" />
+                  <path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z" />
+                </svg>
+                <span>Docs</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/mobile/Kinds.tsx b/site/components/landing/mobile/Kinds.tsx
new file mode 100644
index 0000000..481e2ba
--- /dev/null
+++ b/site/components/landing/mobile/Kinds.tsx
@@ -0,0 +1,83 @@
+import { DIAGRAM_KINDS, KIND_LABELS, type LaidOutDiagram } from '@stackmap/core';
+import { toScene } from '@stackmap/viewer/src/canvas/scene';
+import { Still } from '@/components/diagram/Still';
+import { stillOf } from '@/lib/diagrams';
+import { KindCount } from '../KindCount';
+import { crossfadeTweens } from '../kinds-geometry';
+import { s } from '../style';
+
+const REST = DIAGRAM_KINDS.indexOf('workflow');
+const LINES = ['Components and what they call.', 'Data moving through stages.', 'Steps across owner lanes.', 'The states of one thing.', 'Messages over time.'];
+// Where the diagrams sit on the 390 × 844 frame: each kind fits this box on its own, centred.
+const AREA = { cx: 195, cy: 510, width: 384, height: 300 };
+
+const px = (n: number) => `${Math.round(n * 10) / 10}px`;
+
+/** #kinds on a phone: the checkout's five diagrams crossfade whole, no cards gliding between them. */
+export function Kinds({ checkout }: { checkout: Record<string, LaidOutDiagram> }) {
+  const layers = DIAGRAM_KINDS.map((kind) => {
+    const diagram = checkout[kind]!;
+    const { content } = toScene(diagram);
+    const k = Math.min(AREA.width / content.width, AREA.height / content.height);
+    return { kind, diagram, k, left: AREA.cx - (content.width * k) / 2, top: AREA.cy - (content.height * k) / 2 };
+  });
+  const at = (kind: string) => `.lp-m [data-kind="${kind}"]`;
+  const rest = DIAGRAM_KINDS.map((kind, k) => `${at(kind)} .kl${k}, ${at(kind)} .kdef${k} {opacity:1}\n${at(kind)} .kn-col {transform:translateY(${-78 * k}px)}`).join('\n');
+  const timelines = JSON.stringify(crossfadeTweens(DIAGRAM_KINDS.length)).replace(/</g, '\\u003c');
+  return (
+    <section
+      className="scn"
+      data-anchor="kinds"
+      data-scene="kinds"
+      data-kind={DIAGRAM_KINDS[REST]}
+      data-runway="3.4"
+      data-fw="390"
+      data-fh="844"
+      data-theme-sec="light"
+      style={s({ height: '844px' })}
+      aria-label="Five kinds of diagram"
+      data-theme="light"
+    >
+      <style>{rest}</style>
+      <script type="application/json" data-timelines="" dangerouslySetInnerHTML={{ __html: timelines }} />
+      <div className="stage" data-stage="">
+        <div className="frame" data-frame="" style={s({ width: '390px', height: '844px' })}>
+          <h2 className="sr">Five kinds of diagram: architecture, dataflow, workflow, lifecycle and sequence.</h2>
+          <svg className="m-route" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+            <path d="M 10 -1200 V 0" />
+            <path data-route="kinds" data-r0="0" data-r1="0.97" data-head="h-kinds" d="M 10 0 V 844" pathLength="1" />
+            <path data-route="kinds" data-r0="0.97" data-r1="1" d="M 10 844 V 2044" pathLength="1" />
+            <g className="rhead" data-route-head="h-kinds">
+              <circle r="9" className="rh-halo" />
+              <circle r="3.25" className="rh-core" />
+            </g>
+          </svg>
+          <div className="kinds-h" aria-hidden="true">
+            <div className="kn-col a-kname">
+              {DIAGRAM_KINDS.map((k) => (
+                <span key={k} className="kn">
+                  {KIND_LABELS[k]}.
+                </span>
+              ))}
+            </div>
+          </div>
+          <p className="kdefs" aria-hidden="true">
+            {LINES.map((l, i) => (
+              <span key={l} className={`kdef kdef${i} a-kline${i}`}>
+                {l}
+              </span>
+            ))}
+          </p>
+          <KindCount rest={REST} total={DIAGRAM_KINDS.length} />
+          <div aria-hidden="true">
+            {layers.map((l, k) => (
+              <div key={l.kind} className={`klayer kl${k}`} style={s({ left: px(l.left), top: px(l.top), transform: `scale(${l.k})` })}>
+                <Still still={stillOf(`checkout/${l.kind}`)} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/landing/mobile/Unmapped.tsx b/site/components/landing/mobile/Unmapped.tsx
new file mode 100644
index 0000000..d853d81
--- /dev/null
+++ b/site/components/landing/mobile/Unmapped.tsx
@@ -0,0 +1,257 @@
+import { SITE } from '@/lib/site-data';
+import { s } from '../style';
+
+export function Unmapped() {
+  return (
+    <>
+      <section
+        className="scn"
+        data-anchor="unmapped"
+        data-scene="unmapped"
+        data-runway="2.6"
+        data-fw="390"
+        data-fh="844"
+        data-theme-sec="dark"
+        style={s({ height: '844px' })}
+        aria-label="Every codebase has a shape"
+        data-theme="dark"
+      >
+        <div className="stage" data-stage="">
+          <div className="frame" data-frame="" style={s({ width: '390px', height: '844px' })}>
+            <div className="s2-grid grid-bg a-s2grid" aria-hidden="true"></div>
+            <div className="vx a-vx" aria-hidden="true">
+              <div className="vring" style={s({ animation: 'spin 34s linear infinite', filter: 'blur(2.2px)', opacity: '0.36' })}>
+                <span className="vchip" style={s({ transform: 'rotate(0deg) translateX(300px) rotate(90deg) translate(-50%, -50%)', fontSize: '12px' })}>
+                  .github/workflows/deploy.yml
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(60deg) translateX(300px) rotate(90deg) translate(-50%, -50%)', fontSize: '12px' })}>
+                  packages/ui/Button.tsx
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(120deg) translateX(300px) rotate(90deg) translate(-50%, -50%)', fontSize: '12px' })}>
+                  infra/queue/order-events.tf
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(180deg) translateX(300px) rotate(90deg) translate(-50%, -50%)', fontSize: '12px' })}>
+                  apps/storefront/next.config.js
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(240deg) translateX(300px) rotate(90deg) translate(-50%, -50%)', fontSize: '12px' })}>
+                  infra/storage/receipts.tf
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(300deg) translateX(300px) rotate(90deg) translate(-50%, -50%)', fontSize: '12px' })}>
+                  docker-compose.yml
+                </span>
+              </div>
+              <div className="vring" style={s({ animation: 'spin 24s linear infinite reverse', filter: 'blur(1px)', opacity: '0.62' })}>
+                <span className="vchip" style={s({ transform: 'rotate(30deg) translateX(205px) rotate(90deg) translate(-50%, -50%)', fontSize: '13px' })}>
+                  checkout/page.tsx
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(102deg) translateX(205px) rotate(90deg) translate(-50%, -50%)', fontSize: '13px' })}>
+                  routes/orders.ts
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(174deg) translateX(205px) rotate(90deg) translate(-50%, -50%)', fontSize: '13px' })}>
+                  redis.tf
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(246deg) translateX(205px) rotate(90deg) translate(-50%, -50%)', fontSize: '13px' })}>
+                  payments/stripe.ts
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(318deg) translateX(205px) rotate(90deg) translate(-50%, -50%)', fontSize: '13px' })}>
+                  receipts.tf
+                </span>
+              </div>
+              <div className="vring" style={s({ animation: 'spin 16s linear infinite', filter: 'blur(0px)', opacity: '0.9' })}>
+                <span className="vchip" style={s({ transform: 'rotate(60deg) translateX(125px) rotate(90deg) translate(-50%, -50%)', fontSize: '14px' })}>
+                  server.ts
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(150deg) translateX(125px) rotate(90deg) translate(-50%, -50%)', fontSize: '14px' })}>
+                  postgres.tf
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(240deg) translateX(125px) rotate(90deg) translate(-50%, -50%)', fontSize: '14px' })}>
+                  App.tsx
+                </span>
+                <span className="vchip" style={s({ transform: 'rotate(330deg) translateX(125px) rotate(90deg) translate(-50%, -50%)', fontSize: '14px' })}>
+                  session.ts
+                </span>
+              </div>
+            </div>
+            <div className="kline-wrap a-kw">
+              <h2 className="sr">Every codebase has a shape. Nobody has drawn it.</h2>
+              <div aria-hidden="true">
+                <p className="kl a-k1c" style={s({ top: '250px' })}>
+                  <span className="kl-l">
+                    <span className="ml kw">
+                      <span className="a-k1w0">Every</span>
+                    </span>{' '}
+                    <span className="ml kw">
+                      <span className="a-k1w1">codebase</span>
+                    </span>
+                  </span>
+                  <span className="kl-l">
+                    <span className="ml kw">
+                      <span className="a-k1w2">has</span>
+                    </span>{' '}
+                    <span className="ml kw">
+                      <span className="a-k1w3">a</span>
+                    </span>{' '}
+                    <span className="ml kw">
+                      <span className="a-k1w4">shape.</span>
+                    </span>
+                  </span>
+                </p>
+                <p className="kl" style={s({ top: '372px' })}>
+                  <span className="kl-l">
+                    <span className="ml kw">
+                      <span className="a-k2w0">Nobody</span>
+                    </span>{' '}
+                    <span className="ml kw">
+                      <span className="a-k2w1">has</span>
+                    </span>
+                  </span>
+                  <span className="kl-l">
+                    <span className="ml kw">
+                      <span className="a-k2w2">drawn</span>
+                    </span>{' '}
+                    <span className="ml kw">
+                      <span className="a-k2w3">it.</span>
+                    </span>
+                  </span>
+                </p>
+              </div>
+            </div>
+            <i className="cdot a-cdot" aria-hidden="true"></i>
+            <i className="shock a-shock" aria-hidden="true"></i>
+            <svg
+              className="mk a-mk"
+              width="200"
+              height="200"
+              viewBox="0 0 48 48"
+              role="img"
+              aria-label="The stackmap mark: a route from a grey source card to an indigo target card"
+            >
+              <circle className="bx a-mkdot" cx="12" cy="12" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <circle className="bx a-mkdot" cx="24" cy="12" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <circle className="bx a-mkdot" cx="24" cy="36" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <circle className="bx a-mkdot" cx="36" cy="36" r="1.75" fill="#ededec" fillOpacity=".3" />
+              <path
+                className="mk-route"
+                data-mark-route=""
+                d="M12 28.5v-1.5q0-3 3-3h18q3 0 3-3v-1.5"
+                pathLength="100"
+                fill="none"
+                stroke="#ededec"
+                strokeWidth="3.5"
+                strokeLinejoin="round"
+              />
+              <rect className="bx a-mksrc" x="3" y="30" width="18" height="12" rx="3.5" fill="#6e6e6b" />
+              <rect className="bx a-mktgt" x="27" y="6" width="18" height="12" rx="3.5" fill="#8fa6f2" />
+            </svg>
+            <p className="s2cap a-s2cap1" style={s({ top: '500px' })}>
+              stackmap turns what your coding agent knows about a system into a diagram you can explore.
+            </p>
+            <svg className="s2-edge" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+              <g className="a-s2e">
+                <path className="ln a-s2eln" d="M 195 364 V 420" pathLength="1" strokeDasharray="1 1" />
+                <path className="ah a-s2eah" d="M192 405 L195 412 L198 405 Z" />
+                <path className="lead a-s2lead" d="M 195 492 V 532" pathLength="1" strokeDasharray="1 1" />
+              </g>
+            </svg>
+            <div className="cw mcard t-service a-mapi-box" style={s({ left: '55px', top: '300px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="mc-in a-mapi-in">
+                  <span className="nc-h">
+                    <span className="tile">
+                      <svg
+                        className="ic"
+                        width="17"
+                        height="17"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.75"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                      >
+                        <rect x="2" y="4" width="20" height="16" rx="2" />
+                        <path d="M10 4v4" />
+                        <path d="M2 8h20" />
+                        <path d="M6 4v4" />
+                      </svg>
+                    </span>
+                    <span className="nc-tx">
+                      <span className="ct">shop-api</span>
+                      <span className="cs">REST API</span>
+                    </span>
+                  </span>
+                </span>
+                <span className="mc-ov a-mapi-ov" style={s({ background: '#6e6e6b' })}></span>
+              </span>
+            </div>
+            <div className="cw mcard t-database a-mdb-box" style={s({ left: '55px', top: '420px', width: '280px', height: '64px' })}>
+              <span className="nc">
+                <span className="mc-in a-mdb-in">
+                  <span className="nc-h">
+                    <span className="tile">
+                      <svg
+                        className="ic"
+                        width="17"
+                        height="17"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.75"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                      >
+                        <ellipse cx="12" cy="5" rx="9" ry="3" />
+                        <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+                        <path d="M3 12A9 3 0 0 0 21 12" />
+                      </svg>
+                    </span>
+                    <span className="nc-tx">
+                      <span className="ct">Orders DB</span>
+                      <span className="cs">PostgreSQL</span>
+                    </span>
+                  </span>
+                </span>
+                <span className="mc-ov a-mdb-ov" style={s({ background: '#8fa6f2' })}></span>
+              </span>
+            </div>
+            <i className="selring a-s2sel" aria-hidden="true"></i>
+            <div className="s2ev pnl a-s2ev">
+              <svg
+                className="ic"
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.75"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+                <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+                <path d="M10 12.5 8 15l2 2.5" />
+                <path d="m14 12.5 2 2.5-2 2.5" />
+              </svg>
+              <code className="mono">infra/orders/postgres.tf:12</code>
+            </div>
+            <p className="s2cap a-s2cap2" style={s({ top: '610px' })}>
+              Every node can point back to the file and line it came from.
+            </p>
+            <svg className="m-route" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+              <path d="M 380 -1200 V 0" />
+              <path data-route="unmapped" data-r0="0" data-r1="0.97" data-head="h-unmapped" d="M 380 0 V 844" pathLength="1" />
+              <path data-route="unmapped" data-r0="0.97" data-r1="1" d="M 380 844 V 2044" pathLength="1" />
+              <g className="rhead" data-route-head="h-unmapped">
+                <circle r="9" className="rh-halo" />
+                <circle r="3.25" className="rh-core" />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/site/components/landing/mobile/Viewer.tsx b/site/components/landing/mobile/Viewer.tsx
new file mode 100644
index 0000000..8ce142d
--- /dev/null
+++ b/site/components/landing/mobile/Viewer.tsx
@@ -0,0 +1,71 @@
+import type { LaidOutDiagram } from '@stackmap/core';
+import { toScene } from '@stackmap/viewer/src/canvas/scene';
+import { Still } from '@/components/diagram/Still';
+import { stillOf } from '@/lib/diagrams';
+import { viewerTweens } from '../drops';
+import { LazyViewer } from '../LazyViewer';
+import { s } from '../style';
+import { TWEENS } from './timelines';
+
+// The phone's plane (the board's .plane-wrap) and the box the real viewer takes over.
+const PLANE = { width: 359, height: 321 };
+const VIEWER = { left: 20, top: 76, width: 350, height: 570 };
+
+/** #viewer on a phone: the same drop, flatten and hand-over, in one column. */
+export function Viewer({ demo }: { demo: LaidOutDiagram }) {
+  const { content } = toScene(demo);
+  const k = Math.min(1, PLANE.width / content.width, PLANE.height / content.height);
+  const timelines = JSON.stringify(viewerTweens(demo, TWEENS)).replace(/</g, '\\u003c');
+  const route = (head: string) => (
+    <svg className="m-route" width="390" height="844" viewBox="0 0 390 844" aria-hidden="true">
+      <path d="M 10 -1200 V 0" />
+      <path data-route="viewer" data-r0="0" data-r1="0.97" data-head={head} d="M 10 0 V 844" pathLength="1" />
+      <path data-route="viewer" data-r0="0.97" data-r1="1" d="M 10 844 V 2044" pathLength="1" />
+      <g className="rhead" data-route-head={head}>
+        <circle r="9" className="rh-halo" />
+        <circle r="3.25" className="rh-core" />
+      </g>
+    </svg>
+  );
+  return (
+    <section className="scn" data-anchor="viewer" data-scene="viewer" data-runway="2" data-fw="390" data-fh="844" data-theme-sec="light" style={s({ height: '844px' })} aria-label="The viewer" data-theme="dark">
+      <script type="application/json" data-timelines="" dangerouslySetInnerHTML={{ __html: timelines }} />
+      <div className="stage" data-stage="">
+        <div className="frame" data-frame="" style={s({ width: '390px', height: '844px' })}>
+          {route('h-viewer-d')}
+          <p className="drop-title dt-dark" aria-hidden="true">
+            No coordinates. stackmap lays it out.
+          </p>
+          <div className="lights a-lights" data-theme="light">
+            <div className="lights-in">
+              {route('h-viewer')}
+              <p className="drop-title a-dtitle" aria-hidden="true">
+                No coordinates. stackmap lays it out.
+              </p>
+              <div className="vintro" aria-hidden="true">
+                <div className="vstage a-vstage">
+                  <div className="grid-bg" />
+                </div>
+                <div className="vclip a-vclip">
+                  <div className="vcam">
+                    <div className="plane-wrap">
+                      <div className="plane a-plane">
+                        <div className="plane-grid grid-bg a-pgrid" />
+                        <div className="plane-dg" style={s({ transform: `translate(-50%, 0) scale(${k})` })}>
+                          <Still still={stillOf('demo')} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="vreal" style={s({ left: `${VIEWER.left}px`, top: `${VIEWER.top}px`, width: `${VIEWER.width}px`, height: `${VIEWER.height}px`, right: 'auto', bottom: 'auto' })}>
+                <LazyViewer diagram={demo} still={stillOf('demo')} width={VIEWER.width} height={VIEWER.height} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/landing/mobile/timelines.ts b/site/components/landing/mobile/timelines.ts
new file mode 100644
index 0000000..b3bec4f
--- /dev/null
+++ b/site/components/landing/mobile/timelines.ts
@@ -0,0 +1,2379 @@
+// Ported from the canvas board: every scroll timeline, as GSAP percentage keyframes over one 10 s scene.
+// Eases "cb:x1,y1,x2,y2" are the board's cubic-beziers (made into CustomEases at run time).
+import type { Tween } from '../timeline';
+
+export const TWEENS: Tween[] = [
+ {
+  "target": ".a-hero-out",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "filter": "blur(0px)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "translateY(-60px)",
+    "filter": "blur(6px)",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-hero-chips",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "scale(1)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0.72)",
+    "ease": "cb:0.77,0,0.175,1"
+   }
+  }
+ },
+ {
+  "target": ".a-hbridge",
+  "frames": {
+   "0%": {
+    "strokeDashoffset": "1"
+   },
+   "42%": {
+    "strokeDashoffset": "1"
+   },
+   "78%": {
+    "strokeDashoffset": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "strokeDashoffset": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-hmarks",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "40%": {
+    "opacity": "1"
+   },
+   "52%": {
+    "opacity": "0"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-vx",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "scale(1.35) rotate(-24deg)"
+   },
+   "7%": {
+    "opacity": "1",
+    "transform": "scale(1) rotate(0deg)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "26%": {
+    "opacity": "1",
+    "transform": "scale(1) rotate(0deg)",
+    "filter": "blur(0px)"
+   },
+   "40%": {
+    "opacity": "1",
+    "transform": "scale(0) rotate(240deg)",
+    "filter": "blur(10px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "41%": {
+    "opacity": "0"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0) rotate(240deg)"
+   }
+  }
+ },
+ {
+  "target": ".a-kw",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "scale(1)",
+    "filter": "blur(0px)"
+   },
+   "27%": {
+    "opacity": "1",
+    "transform": "scale(1)",
+    "filter": "blur(0px)"
+   },
+   "38%": {
+    "opacity": "0",
+    "transform": "scale(0.12)",
+    "filter": "blur(12px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0.12)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1c",
+  "frames": {
+   "0%": {
+    "color": "var(--sm-text)"
+   },
+   "15%": {
+    "color": "var(--sm-text)"
+   },
+   "19%": {
+    "color": "var(--sm-text-muted)"
+   },
+   "100%": {
+    "color": "var(--sm-text-muted)"
+   }
+  }
+ },
+ {
+  "target": ".a-cdot",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   },
+   "29%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   },
+   "31%": {
+    "opacity": "1",
+    "transform": "scale(1.9)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "33%": {
+    "transform": "scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "35.5%": {
+    "transform": "scale(1.9)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "38%": {
+    "transform": "scale(1)",
+    "backgroundColor": "var(--sm-edge)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "41.5%": {
+    "transform": "scale(0.5)",
+    "backgroundColor": "var(--sm-text)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "43.5%": {
+    "opacity": "1",
+    "transform": "scale(5)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "46%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(0)"
+   }
+  }
+ },
+ {
+  "target": ".a-shock",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "scale(0.02)"
+   },
+   "43%": {
+    "opacity": "0",
+    "transform": "scale(0.02)"
+   },
+   "43.5%": {
+    "opacity": "0.7",
+    "transform": "scale(0.02)"
+   },
+   "53%": {
+    "opacity": "0",
+    "transform": "scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-s2grid",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "WebkitMaskSize": "0px 0px",
+    "maskSize": "0px 0px"
+   },
+   "43%": {
+    "opacity": "1",
+    "WebkitMaskSize": "0px 0px",
+    "maskSize": "0px 0px"
+   },
+   "55%": {
+    "opacity": "1",
+    "WebkitMaskSize": "1100px 1100px",
+    "maskSize": "1100px 1100px",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "WebkitMaskSize": "1100px 1100px",
+    "maskSize": "1100px 1100px"
+   }
+  }
+ },
+ {
+  "target": ".a-mk",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "45%": {
+    "opacity": "0"
+   },
+   "45.5%": {
+    "opacity": "1"
+   },
+   "64%": {
+    "opacity": "1"
+   },
+   "70%": {
+    "opacity": "0",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-mkdot",
+  "frames": {
+   "0%": {
+    "transform": "scale(0.2)",
+    "opacity": "0"
+   },
+   "45.5%": {
+    "transform": "scale(0.2)",
+    "opacity": "0"
+   },
+   "50%": {
+    "transform": "scale(1)",
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "scale(1)",
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mksrc",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "scale(0.9)"
+   },
+   "49%": {
+    "opacity": "0",
+    "transform": "scale(0.9)"
+   },
+   "52.5%": {
+    "opacity": "1",
+    "transform": "scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-mktgt",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(0.75px) scale(0.985)"
+   },
+   "58%": {
+    "opacity": "0",
+    "transform": "translateY(0.75px) scale(0.985)"
+   },
+   "62%": {
+    "opacity": "1",
+    "transform": "translateY(0px) scale(1)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-s2e",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "77%": {
+    "opacity": "0"
+   },
+   "77.5%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-s2eln",
+  "frames": {
+   "0%": {
+    "strokeDashoffset": "1"
+   },
+   "77.5%": {
+    "strokeDashoffset": "1"
+   },
+   "83%": {
+    "strokeDashoffset": "0",
+    "ease": "cb:0.33,1,0.68,1"
+   },
+   "100%": {
+    "strokeDashoffset": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-s2eah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "0"
+   },
+   "84%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-s2sel",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "86%": {
+    "opacity": "0"
+   },
+   "88%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-s2lead",
+  "frames": {
+   "0%": {
+    "strokeDashoffset": "1"
+   },
+   "88%": {
+    "strokeDashoffset": "1"
+   },
+   "92%": {
+    "strokeDashoffset": "0",
+    "ease": "cb:0.33,1,0.68,1"
+   },
+   "100%": {
+    "strokeDashoffset": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-s2ev",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "91%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "94%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-s2cap1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "55%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "60%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "65%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "69%": {
+    "opacity": "0",
+    "transform": "translateY(-8px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-s2cap2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "93%": {
+    "opacity": "0",
+    "transform": "translateY(12px)"
+   },
+   "97%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w0",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "2%": {
+    "transform": "translateY(112%)"
+   },
+   "6.2%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w1",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "3.6%": {
+    "transform": "translateY(112%)"
+   },
+   "7.8%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w2",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "5.2%": {
+    "transform": "translateY(112%)"
+   },
+   "9.4%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w3",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "6.8%": {
+    "transform": "translateY(112%)"
+   },
+   "11%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k1w4",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "8.4%": {
+    "transform": "translateY(112%)"
+   },
+   "12.6%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w0",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "15%": {
+    "transform": "translateY(112%)"
+   },
+   "19.2%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w1",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "16.6%": {
+    "transform": "translateY(112%)"
+   },
+   "20.8%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w2",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "18.2%": {
+    "transform": "translateY(112%)"
+   },
+   "22.4%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-k2w3",
+  "frames": {
+   "0%": {
+    "transform": "translateY(112%)"
+   },
+   "19.8%": {
+    "transform": "translateY(112%)"
+   },
+   "24%": {
+    "transform": "translateY(0%)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "transform": "translateY(0%)"
+   }
+  }
+ },
+ {
+  "target": ".a-mapi-box",
+  "frames": {
+   "0%": {
+    "left": "107.5px",
+    "top": "375px",
+    "width": "75px",
+    "height": "50px",
+    "borderRadius": "15px",
+    "opacity": "0"
+   },
+   "64%": {
+    "left": "107.5px",
+    "top": "375px",
+    "width": "75px",
+    "height": "50px",
+    "borderRadius": "15px",
+    "opacity": "0"
+   },
+   "64.5%": {
+    "opacity": "1"
+   },
+   "74%": {
+    "left": "55px",
+    "top": "300px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "55px",
+    "top": "300px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mapi-ov",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "68%": {
+    "opacity": "1"
+   },
+   "76%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-mapi-in",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "72%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mdb-box",
+  "frames": {
+   "0%": {
+    "left": "207.5px",
+    "top": "275px",
+    "width": "75px",
+    "height": "50px",
+    "borderRadius": "15px",
+    "opacity": "0"
+   },
+   "64%": {
+    "left": "207.5px",
+    "top": "275px",
+    "width": "75px",
+    "height": "50px",
+    "borderRadius": "15px",
+    "opacity": "0"
+   },
+   "64.5%": {
+    "opacity": "1"
+   },
+   "74%": {
+    "left": "55px",
+    "top": "420px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "left": "55px",
+    "top": "420px",
+    "width": "280px",
+    "height": "64px",
+    "borderRadius": "14px",
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-mdb-ov",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "68%": {
+    "opacity": "1"
+   },
+   "76%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-mdb-in",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "72%": {
+    "opacity": "0"
+   },
+   "79%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-tr0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "37%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "39.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "41%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "43.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "44%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "46.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr3",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "45%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "47.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr4",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "47.5%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "49.7%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr5",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "53%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "55.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr6",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "56.5%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "58.7%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr7",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "61%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "63.2%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-tr8",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "64.5%": {
+    "opacity": "0",
+    "transform": "translateY(8px)"
+   },
+   "66.7%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ty0",
+  "frames": {
+   "0%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "2%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "8%": {
+    "width": "20ch",
+    "borderRightColor": "var(--sm-text)",
+    "ease": "steps(20)"
+   },
+   "8.4%": {
+    "width": "20ch",
+    "borderRightColor": "transparent"
+   },
+   "100%": {
+    "width": "20ch",
+    "borderRightColor": "transparent"
+   }
+  }
+ },
+ {
+  "target": ".a-ty1",
+  "frames": {
+   "0%": {
+    "width": "0ch",
+    "borderRightColor": "transparent"
+   },
+   "8.5%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "13%": {
+    "width": "15ch",
+    "borderRightColor": "var(--sm-text)",
+    "ease": "steps(15)"
+   },
+   "13.4%": {
+    "width": "15ch",
+    "borderRightColor": "transparent"
+   },
+   "100%": {
+    "width": "15ch",
+    "borderRightColor": "transparent"
+   }
+  }
+ },
+ {
+  "target": ".a-ty2",
+  "frames": {
+   "0%": {
+    "width": "0ch",
+    "borderRightColor": "transparent"
+   },
+   "13.5%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "19.5%": {
+    "width": "21ch",
+    "borderRightColor": "var(--sm-text)",
+    "ease": "steps(21)"
+   },
+   "19.9%": {
+    "width": "21ch",
+    "borderRightColor": "transparent"
+   },
+   "100%": {
+    "width": "21ch",
+    "borderRightColor": "transparent"
+   }
+  }
+ },
+ {
+  "target": ".a-ty3",
+  "frames": {
+   "0%": {
+    "width": "0ch",
+    "borderRightColor": "transparent"
+   },
+   "20%": {
+    "width": "0ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "26%": {
+    "width": "23ch",
+    "borderRightColor": "var(--sm-text)",
+    "ease": "steps(23)"
+   },
+   "26.4%": {
+    "width": "23ch",
+    "borderRightColor": "var(--sm-text)"
+   },
+   "100%": {
+    "width": "23ch",
+    "borderRightColor": "var(--sm-text)"
+   }
+  }
+ },
+ {
+  "target": ".a-st0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "1%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-st1",
+  "frames": {
+   "0%": {
+    "opacity": "0.42"
+   },
+   "29%": {
+    "opacity": "0.42"
+   },
+   "31%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-st2",
+  "frames": {
+   "0%": {
+    "opacity": "0.42"
+   },
+   "49%": {
+    "opacity": "0.42"
+   },
+   "51%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-st3",
+  "frames": {
+   "0%": {
+    "opacity": "0.42"
+   },
+   "61%": {
+    "opacity": "0.42"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-bigp",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   },
+   "27%": {
+    "opacity": "1",
+    "transform": "translate(0px, 0px) scale(1)"
+   },
+   "34%": {
+    "opacity": "1",
+    "transform": "translate(-6px, -40px) scale(0.46)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "35.5%": {
+    "opacity": "0",
+    "transform": "translate(-6px, -40px) scale(0.46)"
+   },
+   "100%": {
+    "opacity": "0",
+    "transform": "translate(-6px, -40px) scale(0.46)"
+   }
+  }
+ },
+ {
+  "target": ".a-tp",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "34.5%": {
+    "opacity": "0"
+   },
+   "35.5%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-term",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(20px)"
+   },
+   "26%": {
+    "opacity": "0",
+    "transform": "translateY(20px)"
+   },
+   "32%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "44%": {
+    "transform": "translateX(0px)"
+   },
+   "44.6%": {
+    "transform": "translateX(-6px)"
+   },
+   "45.2%": {
+    "transform": "translateX(5px)"
+   },
+   "45.8%": {
+    "transform": "translateX(-3px)"
+   },
+   "46.4%": {
+    "transform": "translateX(2px)"
+   },
+   "47%": {
+    "transform": "translateX(0px)"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateX(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-drop0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "13%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "14%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "17.2%": {
+    "transform": "translateZ(0px)"
+   },
+   "18.2%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "19.2%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade0",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "47%": {
+    "opacity": "0"
+   },
+   "50.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "17.6%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "18.6%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "21.8%": {
+    "transform": "translateZ(0px)"
+   },
+   "22.8%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "23.8%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "49.2%": {
+    "opacity": "0"
+   },
+   "52.8%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "22.2%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "23.2%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "26.4%": {
+    "transform": "translateZ(0px)"
+   },
+   "27.4%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "28.4%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "51.4%": {
+    "opacity": "0"
+   },
+   "55%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop3",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "26.8%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "27.8%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "31%": {
+    "transform": "translateZ(0px)"
+   },
+   "32%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "33%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "53.6%": {
+    "opacity": "0"
+   },
+   "57.2%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop4",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "31.4%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "32.4%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "35.6%": {
+    "transform": "translateZ(0px)"
+   },
+   "36.6%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "37.6%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "55.8%": {
+    "opacity": "0"
+   },
+   "59.4%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-drop5",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "36%": {
+    "opacity": "0",
+    "transform": "translateZ(560px)"
+   },
+   "37%": {
+    "opacity": "1",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "40.2%": {
+    "transform": "translateZ(0px)"
+   },
+   "41.2%": {
+    "transform": "translateZ(16px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "42.2%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)",
+    "ease": "cb:0.55,0,1,0.45"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateZ(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-efade5",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "58%": {
+    "opacity": "0"
+   },
+   "61.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-ahin",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "0"
+   },
+   "61.5%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-frin",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40%": {
+    "opacity": "0"
+   },
+   "46%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".vcam .hd",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "58%": {
+    "opacity": "0"
+   },
+   "61%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-lights",
+  "frames": {
+   "0%": {
+    "clipPath": "circle(0px at 1010px 1104px)"
+   },
+   "13%": {
+    "clipPath": "circle(2400px at 1010px 1104px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "clipPath": "circle(2400px at 1010px 1104px)"
+   }
+  }
+ },
+ {
+  "target": ".a-plane",
+  "frames": {
+   "0%": {
+    "transform": "rotateX(58deg) translateY(-10px) scale(0.92)"
+   },
+   "30%": {
+    "transform": "rotateX(58deg) translateY(-10px) scale(0.92)"
+   },
+   "50%": {
+    "transform": "rotateX(0deg) translateY(0px) scale(1)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "transform": "rotateX(0deg) translateY(0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-pgrid",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "6%": {
+    "opacity": "0"
+   },
+   "14%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "50%": {
+    "opacity": "1"
+   },
+   "58%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-vclip",
+  "frames": {
+   "0%": {
+    "clipPath": "inset(-600px round 18px)"
+   },
+   "52%": {
+    "clipPath": "inset(-600px round 18px)"
+   },
+   "60%": {
+    "clipPath": "inset(0px round 18px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "clipPath": "inset(0px round 18px)"
+   }
+  }
+ },
+ {
+  "target": ".a-dtitle",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "46%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   },
+   "53%": {
+    "opacity": "0",
+    "transform": "translateY(-20px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-vstage",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "50%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-vhead",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "60%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "65%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vch0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "64%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "68%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vch1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "66%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "70%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vch2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "68%": {
+    "opacity": "0",
+    "transform": "translateY(-6px)"
+   },
+   "72%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-vinsp",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(14px)"
+   },
+   "70%": {
+    "opacity": "0",
+    "transform": "translateY(14px)"
+   },
+   "76%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-kl0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "19%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd0 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "3%": {
+    "opacity": "0"
+   },
+   "3.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "20%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "39%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd1 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "26%": {
+    "opacity": "0"
+   },
+   "26.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "59%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd2 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "46%": {
+    "opacity": "0"
+   },
+   "46.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "79%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kd3 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "66%": {
+    "opacity": "0"
+   },
+   "66.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kl4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "80%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kd4 .ah",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "86%": {
+    "opacity": "0"
+   },
+   "86.6%": {
+    "opacity": "1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-kname",
+  "frames": {
+   "0%": {
+    "transform": "translateY(0px)"
+   },
+   "16%": {
+    "transform": "translateY(0px)"
+   },
+   "22%": {
+    "transform": "translateY(-78px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "36%": {
+    "transform": "translateY(-78px)"
+   },
+   "42%": {
+    "transform": "translateY(-156px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "56%": {
+    "transform": "translateY(-156px)"
+   },
+   "62%": {
+    "transform": "translateY(-234px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "76%": {
+    "transform": "translateY(-234px)"
+   },
+   "82%": {
+    "transform": "translateY(-312px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "transform": "translateY(-312px)"
+   }
+  }
+ },
+ {
+  "target": ".a-kline0",
+  "frames": {
+   "0%": {
+    "opacity": "1"
+   },
+   "16%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "19%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline1",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "20%": {
+    "opacity": "0"
+   },
+   "23%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "36%": {
+    "opacity": "1"
+   },
+   "39%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline2",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "40%": {
+    "opacity": "0"
+   },
+   "43%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "56%": {
+    "opacity": "1"
+   },
+   "59%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline3",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "60%": {
+    "opacity": "0"
+   },
+   "63%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "76%": {
+    "opacity": "1"
+   },
+   "79%": {
+    "opacity": "0",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "0"
+   }
+  }
+ },
+ {
+  "target": ".a-kline4",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "80%": {
+    "opacity": "0"
+   },
+   "83%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ },
+ {
+  "target": ".a-file",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "transform": "translateY(0px) scale(0.94)"
+   },
+   "16%": {
+    "opacity": "1",
+    "transform": "translateY(0px) scale(1)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px) scale(1)"
+   }
+  }
+ },
+ {
+  "target": ".a-flights",
+  "frames": {
+   "0%": {
+    "opacity": "1",
+    "clipPath": "inset(calc(1000px - var(--by, 0px)) calc(1000px - var(--bx, 0px)) calc(1000px - var(--by, 0px)) calc(1000px - var(--bx, 0px)) round 0px)"
+   },
+   "16%": {
+    "opacity": "1",
+    "clipPath": "inset(1092px 1058px 1380px 1058px round 18px)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "16.5%": {
+    "opacity": "0",
+    "clipPath": "inset(1092px 1058px 1380px 1058px round 18px)"
+   },
+   "100%": {
+    "opacity": "0",
+    "clipPath": "inset(1092px 1058px 1380px 1058px round 18px)"
+   }
+  }
+ },
+ {
+  "target": ".a-filein",
+  "frames": {
+   "0%": {
+    "transform": "rotateY(0deg)"
+   },
+   "20%": {
+    "transform": "rotateY(0deg)"
+   },
+   "35%": {
+    "transform": "rotateY(180deg)",
+    "ease": "cb:0.77,0,0.175,1"
+   },
+   "100%": {
+    "transform": "rotateY(180deg)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofh",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(20px)"
+   },
+   "40%": {
+    "opacity": "0",
+    "transform": "translateY(20px)"
+   },
+   "52%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl0",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "54%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "60%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl1",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "57%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "63%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl2",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "60%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "66%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofl3",
+  "frames": {
+   "0%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "63%": {
+    "opacity": "0",
+    "transform": "translateY(10px)"
+   },
+   "69%": {
+    "opacity": "1",
+    "transform": "translateY(0px)",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1",
+    "transform": "translateY(0px)"
+   }
+  }
+ },
+ {
+  "target": ".a-ofmore",
+  "frames": {
+   "0%": {
+    "opacity": "0"
+   },
+   "76%": {
+    "opacity": "0"
+   },
+   "84%": {
+    "opacity": "1",
+    "ease": "cb:0.23,1,0.32,1"
+   },
+   "100%": {
+    "opacity": "1"
+   }
+  }
+ }
+];
diff --git a/site/components/landing/site.css b/site/components/landing/site.css
new file mode 100644
index 0000000..d02bfce
--- /dev/null
+++ b/site/components/landing/site.css
@@ -0,0 +1,107 @@
+/* Site-owned additions to the ported boards: the root the boards' `.site` was, and where a board's
+   hand-drawn stand-in became the real diagram or viewer. */
+
+.lp {
+  position: relative;
+  color: var(--sm-text);
+  background: var(--sm-page);
+  overflow-x: clip;
+}
+/* Declared per theme: a custom property resolves where it's declared, so one on the root would keep the root's border. */
+.lp,
+.lp [data-theme] {
+  --shadow-panel: inset 0 0 0 1px var(--sm-panel-border), 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
+}
+.lp [data-theme] {
+  /* The boards' theme classes also reset the colour; inherited text would keep the root's theme. */
+  color: var(--sm-text);
+}
+.lp *,
+.lp *::before,
+.lp *::after {
+  box-sizing: border-box;
+}
+:where(.lp) button {
+  font: inherit;
+  color: inherit;
+}
+:where(.lp) a {
+  color: inherit;
+}
+.lp-m {
+  display: none;
+}
+@media (max-width: 767px) {
+  .lp-d {
+    display: none;
+  }
+  .lp-m {
+    display: block;
+  }
+}
+
+/* #viewer: the intro plane only exists while the page scrubs; at rest the real viewer is the frame. */
+.lp .vintro {
+  display: none;
+}
+.lp.live .vintro {
+  display: block;
+}
+.lp .vreal {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: 22px;
+  background: var(--sm-page);
+  box-shadow: var(--shadow-panel);
+}
+.lp .plane-dg {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform-origin: 50% 0;
+  transform-style: preserve-3d;
+}
+.lp .plane-dg div {
+  transform-style: preserve-3d;
+}
+
+/* #kinds: the checkout's cards are the slots; the layers draw only lanes, phases, frames and connections. */
+.lp-d .klayer .sm-card {
+  visibility: hidden;
+}
+.lp .kslot,
+.lp .klayer,
+.lp .kface,
+.lp .kcam,
+.lp .kn-col,
+.lp .kdef {
+  transition:
+    left 420ms cubic-bezier(0.77, 0, 0.175, 1),
+    top 420ms cubic-bezier(0.77, 0, 0.175, 1),
+    width 420ms cubic-bezier(0.77, 0, 0.175, 1),
+    height 420ms cubic-bezier(0.77, 0, 0.175, 1),
+    transform 420ms cubic-bezier(0.77, 0, 0.175, 1),
+    opacity 240ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.lp.live .kslot,
+.lp.live .klayer,
+.lp.live .kface,
+.lp.live .kcam,
+.lp.live .kn-col,
+.lp.live .kdef {
+  transition: none;
+}
+.lp .kface-in {
+  transform-origin: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp .kslot,
+  .lp .klayer,
+  .lp .kface,
+  .lp .kcam,
+  .lp .kn-col,
+  .lp .kdef {
+    transition: none;
+  }
+}
diff --git a/site/components/landing/style.ts b/site/components/landing/style.ts
new file mode 100644
index 0000000..0d528d4
--- /dev/null
+++ b/site/components/landing/style.ts
@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'react';
+
+/** Board markup sets custom properties (--x, --z…) inline, which CSSProperties doesn't type. */
+export const s = (style: Record<string, string>) => style as CSSProperties;
diff --git a/site/components/landing/timeline.ts b/site/components/landing/timeline.ts
new file mode 100644
index 0000000..d53db0c
--- /dev/null
+++ b/site/components/landing/timeline.ts
@@ -0,0 +1,80 @@
+import { gsap } from 'gsap';
+import { CustomEase } from 'gsap/CustomEase';
+
+/** One board timeline: GSAP percentage keyframes over a scene's 10 s, each frame's `ease` being the ease into it. */
+export interface Tween {
+  target: string;
+  frames: Record<string, Record<string, string>>;
+}
+
+/** Every scene's timeline runs 10 s; scroll through its pin maps onto that (Motion rule 01). */
+export const SCENE_SECONDS = 10;
+
+const eases = new Map<string, string>();
+
+// The board's curves are cubic-beziers ("cb:x1,y1,x2,y2"); GSAP gets each as a CustomEase, made once.
+function ease(name: string | undefined): string | undefined {
+  if (!name?.startsWith('cb:')) return name;
+  let id = eases.get(name);
+  if (!id) {
+    const [x1, y1, x2, y2] = name.slice(3).split(',');
+    id = `sm-${eases.size}`;
+    CustomEase.create(id, `M0,0 C${x1},${y1} ${x2},${y2} 1,1`);
+    eases.set(name, id);
+  }
+  return id;
+}
+
+const IDENTITY = { x: 0, y: 0, z: 0, scale: 1, rotation: 0, rotationX: 0, rotationY: 0 };
+
+/**
+ * A CSS transform string as GSAP's own transform properties, which it animates on HTML and SVG alike
+ * (it writes SVG transforms as attributes, where a CSS string doesn't parse). GSAP composes them as
+ * translate, rotate, scale, the order nearly every board transform is already written in.
+ */
+export function transformVars(css: string): gsap.TweenVars {
+  if (css.trim() === 'none') return { ...IDENTITY };
+  const out: gsap.TweenVars = {};
+  for (const [, fn, args] of css.matchAll(/(\w+)\(([^)]*)\)/g)) {
+    const v = args!.split(',').map((a) => a.trim());
+    const n = (i: number) => parseFloat(v[i] ?? '0');
+    // A percentage moves by the element's own size: GSAP's xPercent and yPercent.
+    const axis = (i: number, name: 'x' | 'y') => ((v[i] ?? '').endsWith('%') ? { [`${name}Percent`]: n(i) } : { [name]: n(i) });
+    if (fn === 'translate') Object.assign(out, axis(0, 'x'), axis(1, 'y'));
+    else if (fn === 'translateX') Object.assign(out, axis(0, 'x'));
+    else if (fn === 'translateY') Object.assign(out, axis(0, 'y'));
+    else if (fn === 'translateZ') out.z = n(0);
+    else if (fn === 'scale') Object.assign(out, v.length > 1 ? { scaleX: n(0), scaleY: n(1) } : { scale: n(0) });
+    else if (fn === 'rotate') out.rotation = n(0);
+    else if (fn === 'rotateX') out.rotationX = n(0);
+    else if (fn === 'rotateY') out.rotationY = n(0);
+  }
+  return out;
+}
+
+function keyframes(frames: Tween['frames']) {
+  const out: Record<string, gsap.TweenVars> = {};
+  for (const [at, { ease: e, transform, ...props }] of Object.entries(frames)) {
+    out[at] = { ...props, ...(transform ? transformVars(transform) : {}), ...(e ? { ease: ease(e) } : {}) };
+  }
+  return out;
+}
+
+/** The scene's timeline: every tween whose target is inside it, all starting at 0 and filling the 10 s. */
+export function sceneTimeline(scene: Element, tweens: Tween[]): gsap.core.Timeline {
+  const tl = gsap.timeline({ paused: true, defaults: { ease: 'none' } });
+  for (const t of tweens) {
+    const targets = scene.querySelectorAll(t.target);
+    if (!targets.length) continue;
+    // SVG shapes transform about their own box, as the board's `transform-box: fill-box` has them.
+    const svg = targets[0] instanceof SVGElement && (targets[0] as SVGElement).ownerSVGElement !== null;
+    tl.to(targets, { keyframes: keyframes(t.frames), duration: SCENE_SECONDS, ease: 'none', ...(svg ? { transformOrigin: '50% 50%' } : {}) }, 0);
+  }
+  tl.set({}, {}, SCENE_SECONDS);
+  return tl;
+}
+
+/** Timelines a scene computes from its own data (the kinds' slots, the viewer's drops), in a JSON script inside it. */
+export function sceneExtras(scene: Element): Tween[] {
+  return [...scene.querySelectorAll<HTMLScriptElement>('script[data-timelines]')].flatMap((s) => JSON.parse(s.textContent || '[]') as Tween[]);
+}
diff --git a/site/components/site/Footer.tsx b/site/components/site/Footer.tsx
index 31c6050..f65dd41 100644
--- a/site/components/site/Footer.tsx
+++ b/site/components/site/Footer.tsx
@@ -45,7 +45,7 @@ export function Footer() {
         <div className="flex flex-col gap-2 pt-5 text-[13px] text-fg-muted shadow-[inset_0_1px_0_var(--sm-divider)] md:flex-row md:justify-between md:gap-6">
           <p className="m-0">
             A successor to{' '}
-            <a href={LINKS.archify.href} target="_blank" rel="noreferrer" className="text-fg no-underline">
+            <a href={LINKS.archify.href} target="_blank" rel="noreferrer" className="text-fg underline decoration-fg-muted underline-offset-2 hover:decoration-fg">
               archify
             </a>{' '}
             by tt-a1i. Layout by Eclipse ELK, type in Geist, logos from Simple Icons.
diff --git a/site/components/site/Nav.tsx b/site/components/site/Nav.tsx
index 807ed01..a0049a7 100644
--- a/site/components/site/Nav.tsx
+++ b/site/components/site/Nav.tsx
@@ -1,4 +1,7 @@
+'use client';
+
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import type { ThemeName } from '@stackmap/core';
 import { GitHubIcon } from '@/components/ui/icons';
 import { LINKS } from './links';
@@ -9,9 +12,12 @@ const ITEMS = [LINKS.viewer, { ...LINKS.kinds, label: 'Kinds' }, LINKS.examples,
 const panel = 'pointer-events-auto rounded-2xl bg-panel shadow-panel transition-[background-color,box-shadow] duration-200';
 
 /** Floating nav: the header itself lets clicks through, only its panels take them. */
-export function Nav({ theme = 'light' }: { theme?: ThemeName }) {
+export function Nav() {
+  const path = usePathname();
+  // The landing opens on a dark scene; its scroll driver retunes the nav per scene from there.
+  const theme: ThemeName = path === '/' ? 'dark' : 'light';
   return (
-    <header data-theme={theme} className="pointer-events-none fixed inset-x-0 top-0 z-60 flex items-center gap-2 bg-transparent px-4 pt-4 md:px-[72px]">
+    <header data-nav="" data-theme={theme} className="pointer-events-none fixed inset-x-0 top-0 z-60 flex items-center gap-2 bg-transparent px-4 pt-4 md:px-[72px]">
       <Link href="/" aria-label="stackmap home" className={`${panel} flex h-11 items-center px-3 md:h-12 md:px-3.5`}>
         <Lockup height={24} />
       </Link>
@@ -20,7 +26,8 @@ export function Nav({ theme = 'light' }: { theme?: ThemeName }) {
           <Link
             key={l.href}
             href={l.href}
-            className="inline-flex h-9 items-center rounded-xl px-3 text-sm text-fg-muted transition-colors duration-150 hover:bg-page hover:text-fg"
+            aria-current={path.startsWith(l.href) && !l.href.includes('#') ? 'page' : undefined}
+            className="inline-flex h-9 items-center rounded-xl px-3 text-sm text-fg-muted transition-colors duration-150 hover:bg-page hover:text-fg aria-[current=page]:text-fg"
           >
             {l.label}
           </Link>
diff --git a/site/content/checkout/architecture.json b/site/content/checkout/architecture.json
new file mode 100644
index 0000000..b0788fd
--- /dev/null
+++ b/site/content/checkout/architecture.json
@@ -0,0 +1,21 @@
+{
+  "kind": "architecture",
+  "title": "Checkout",
+  "subtitle": "One checkout, as components",
+  "density": "compact",
+  "nodes": [
+    { "id": "storefront", "type": "client", "card": { "title": "Storefront", "subtitle": "Next.js" } },
+    { "id": "edge", "type": "gateway", "card": { "title": "Edge gateway", "subtitle": "Public routing" } },
+    { "id": "api", "type": "service", "card": { "title": "shop-api", "subtitle": "REST API" } },
+    { "id": "stripe", "type": "external", "card": { "title": "Stripe", "subtitle": "Payments" } },
+    { "id": "orders", "type": "database", "card": { "title": "Orders DB", "subtitle": "PostgreSQL" } },
+    { "id": "events", "type": "queue", "card": { "title": "Order events", "subtitle": "Async queue" } }
+  ],
+  "edges": [
+    { "id": "a1", "from": "storefront", "to": "edge" },
+    { "id": "a2", "from": "edge", "to": "api" },
+    { "id": "a3", "from": "api", "to": "stripe" },
+    { "id": "a4", "from": "api", "to": "orders" },
+    { "id": "a5", "from": "api", "to": "events", "kind": "async" }
+  ]
+}
diff --git a/site/content/checkout/dataflow.json b/site/content/checkout/dataflow.json
new file mode 100644
index 0000000..dfefd83
--- /dev/null
+++ b/site/content/checkout/dataflow.json
@@ -0,0 +1,24 @@
+{
+  "kind": "dataflow",
+  "title": "Checkout",
+  "subtitle": "One checkout, as data moving",
+  "density": "compact",
+  "phases": [
+    { "id": "collect", "label": "Collect", "nodes": ["cart", "priced"] },
+    { "id": "charge", "label": "Charge", "nodes": ["payment"] },
+    { "id": "record", "label": "Record", "nodes": ["row", "placed"] }
+  ],
+  "nodes": [
+    { "id": "cart", "type": "client", "card": { "title": "Cart", "subtitle": "Line items" } },
+    { "id": "priced", "type": "service", "card": { "title": "Priced order", "subtitle": "Tax and totals" } },
+    { "id": "payment", "type": "external", "card": { "title": "Payment", "subtitle": "Stripe charge" } },
+    { "id": "row", "type": "database", "card": { "title": "Order row", "subtitle": "Orders DB" } },
+    { "id": "placed", "type": "queue", "card": { "title": "Order placed", "subtitle": "Event" } }
+  ],
+  "edges": [
+    { "id": "d1", "from": "cart", "to": "priced" },
+    { "id": "d2", "from": "priced", "to": "payment" },
+    { "id": "d3", "from": "payment", "to": "row" },
+    { "id": "d4", "from": "row", "to": "placed", "kind": "async" }
+  ]
+}
diff --git a/site/content/checkout/lifecycle.json b/site/content/checkout/lifecycle.json
new file mode 100644
index 0000000..ca4040f
--- /dev/null
+++ b/site/content/checkout/lifecycle.json
@@ -0,0 +1,31 @@
+{
+  "kind": "lifecycle",
+  "title": "Checkout",
+  "subtitle": "One checkout, as the states of an order",
+  "lanes": [
+    { "id": "order", "label": "Order" },
+    { "id": "waiting", "label": "Waiting" },
+    { "id": "exits", "label": "Exits" }
+  ],
+  "phases": [
+    { "id": "open", "label": "Open", "nodes": ["created", "awaiting"] },
+    { "id": "settled", "label": "Settled", "nodes": ["paid", "failed"] },
+    { "id": "done", "label": "Done", "nodes": ["fulfilled", "cancelled"] }
+  ],
+  "nodes": [
+    { "id": "created", "type": "start", "lane": "order", "card": { "title": "Created", "subtitle": "Cart submitted" } },
+    { "id": "awaiting", "type": "waiting", "lane": "waiting", "card": { "title": "Awaiting payment", "subtitle": "Card pending" } },
+    { "id": "failed", "type": "failure", "lane": "exits", "card": { "title": "Payment failed", "subtitle": "Declined" } },
+    { "id": "fulfilled", "type": "success", "lane": "order", "card": { "title": "Fulfilled", "subtitle": "Shipped" } },
+    { "id": "paid", "type": "active", "lane": "order", "card": { "title": "Paid", "subtitle": "Charge captured" } },
+    { "id": "cancelled", "type": "failure", "lane": "exits", "card": { "title": "Cancelled", "subtitle": "Timed out" } }
+  ],
+  "edges": [
+    { "id": "l1", "from": "created", "to": "awaiting" },
+    { "id": "l2", "from": "awaiting", "to": "paid", "label": "charged" },
+    { "id": "l3", "from": "awaiting", "to": "failed", "label": "declined" },
+    { "id": "l4", "from": "paid", "to": "fulfilled" },
+    { "id": "l5", "from": "failed", "to": "awaiting", "kind": "return", "label": "retry" },
+    { "id": "l6", "from": "awaiting", "to": "cancelled", "label": "timeout" }
+  ]
+}
diff --git a/site/content/checkout/sequence.json b/site/content/checkout/sequence.json
new file mode 100644
index 0000000..81cd7b0
--- /dev/null
+++ b/site/content/checkout/sequence.json
@@ -0,0 +1,80 @@
+{
+  "kind": "sequence",
+  "title": "Checkout",
+  "subtitle": "One checkout, as messages over time",
+  "nodes": [
+    {
+      "id": "storefront",
+      "type": "client",
+      "card": {
+        "title": "Storefront",
+        "subtitle": "Next.js"
+      }
+    },
+    {
+      "id": "api",
+      "type": "service",
+      "card": {
+        "title": "shop-api",
+        "subtitle": "REST API"
+      }
+    },
+    {
+      "id": "stripe",
+      "type": "external",
+      "card": {
+        "title": "Stripe",
+        "subtitle": "Payments"
+      }
+    },
+    {
+      "id": "orders",
+      "type": "database",
+      "card": {
+        "title": "Orders DB",
+        "subtitle": "PostgreSQL"
+      }
+    }
+  ],
+  "edges": [
+    {
+      "id": "s1",
+      "from": "storefront",
+      "to": "api",
+      "label": "POST /checkout"
+    },
+    {
+      "id": "s2",
+      "from": "api",
+      "to": "stripe",
+      "label": "charge"
+    },
+    {
+      "id": "s3",
+      "from": "stripe",
+      "to": "api",
+      "kind": "return",
+      "label": "charged"
+    },
+    {
+      "id": "s4",
+      "from": "api",
+      "to": "orders",
+      "label": "insert order"
+    },
+    {
+      "id": "s5",
+      "from": "orders",
+      "to": "api",
+      "kind": "return",
+      "label": "order id"
+    },
+    {
+      "id": "s6",
+      "from": "api",
+      "to": "storefront",
+      "kind": "return",
+      "label": "201 Created"
+    }
+  ]
+}
diff --git a/site/content/checkout/workflow.json b/site/content/checkout/workflow.json
new file mode 100644
index 0000000..3a6c7e1
--- /dev/null
+++ b/site/content/checkout/workflow.json
@@ -0,0 +1,32 @@
+{
+  "kind": "workflow",
+  "title": "Checkout",
+  "subtitle": "One checkout, as steps by owner",
+  "lanes": [
+    { "id": "customer", "label": "Customer" },
+    { "id": "shop", "label": "shop-api" },
+    { "id": "payments", "label": "Payments" },
+    { "id": "failures", "label": "Failures", "tone": "exception" }
+  ],
+  "phases": [
+    { "id": "cart", "label": "Cart", "nodes": ["add", "validate"] },
+    { "id": "payment", "label": "Payment", "nodes": ["pay", "charge"] },
+    { "id": "order", "label": "Order", "nodes": ["create"] }
+  ],
+  "nodes": [
+    { "id": "add", "type": "client", "lane": "customer", "card": { "title": "Add to cart", "subtitle": "Storefront" } },
+    { "id": "validate", "type": "service", "lane": "shop", "card": { "title": "Validate cart", "subtitle": "Stock and price" } },
+    { "id": "charge", "type": "external", "lane": "payments", "card": { "title": "Charge card", "subtitle": "Stripe" } },
+    { "id": "create", "type": "service", "lane": "shop", "card": { "title": "Create order", "subtitle": "Orders DB" } },
+    { "id": "pay", "type": "client", "lane": "customer", "card": { "title": "Pay", "subtitle": "Card details" } },
+    { "id": "declined", "type": "security", "lane": "failures", "card": { "title": "Declined", "subtitle": "Ask again" } }
+  ],
+  "edges": [
+    { "id": "w1", "from": "add", "to": "validate" },
+    { "id": "w2", "from": "validate", "to": "pay" },
+    { "id": "w3", "from": "pay", "to": "charge" },
+    { "id": "w4", "from": "charge", "to": "create", "tone": "main" },
+    { "id": "w5", "from": "charge", "to": "declined", "tone": "error" },
+    { "id": "w6", "from": "declined", "to": "pay", "kind": "return", "label": "retry" }
+  ]
+}
diff --git a/site/content/content.test.ts b/site/content/content.test.ts
index 84fed91..f195b14 100644
--- a/site/content/content.test.ts
+++ b/site/content/content.test.ts
@@ -13,7 +13,7 @@ describe('site content', () => {
     expect(files('examples')).toEqual(EXAMPLES);
   });
 
-  for (const [sub, file] of [...EXAMPLES.map((f) => ['examples', f]), ['demo', 'commerce-api.json'], ['docs', 'quick-start.json']] as const) {
+  for (const [sub, file] of [...EXAMPLES.map((f) => ['examples', f]), ['demo', 'commerce-api.json'], ['docs', 'quick-start.json'], ...files('checkout').map((f) => ['checkout', f])] as const) {
     it(`${sub}/${file} validates with no diagnostics`, () => {
       const result = validateDiagram(read(sub, file));
       expect(result.diagnostics).toEqual([]);
diff --git a/site/e2e/smoke.spec.ts b/site/e2e/smoke.spec.ts
new file mode 100644
index 0000000..5933466
--- /dev/null
+++ b/site/e2e/smoke.spec.ts
@@ -0,0 +1,66 @@
+import { expect, test, type Page } from '@playwright/test';
+
+const ROUTES = ['/', '/docs', '/docs/schema', '/examples', '/kinds/architecture', '/kinds/dataflow', '/kinds/workflow', '/kinds/lifecycle', '/kinds/sequence'];
+
+function collectErrors(page: Page): string[] {
+  const errors: string[] = [];
+  page.on('console', (m) => m.type() === 'error' && errors.push(m.text()));
+  page.on('pageerror', (e) => errors.push(String(e)));
+  return errors;
+}
+
+for (const route of ROUTES) {
+  test(`${route} renders with no console errors`, async ({ page }) => {
+    const errors = collectErrors(page);
+    const res = await page.goto(route);
+    expect(res?.status()).toBe(200);
+    await expect(page.locator('h1').first()).toBeVisible();
+    await page.waitForLoadState('networkidle');
+    expect(errors).toEqual([]);
+  });
+}
+
+test('with reduced motion every landing scene is its resting frame, nothing pinned', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('.lp-d')).not.toHaveClass(/live/);
+  expect(await page.locator('.pin-spacer').count()).toBe(0);
+  await expect(page.getByRole('heading', { level: 1, name: /Every layer of your stack/ }).first()).toBeVisible();
+  // The composed frames need no scrolling through a pin: each scene is one frame tall.
+  for (const scene of await page.locator('.lp-d [data-scene]').all()) expect((await scene.boundingBox())!.height).toBeLessThanOrEqual(900);
+  await expect(page.locator('.lp-d #kinds .kl2')).toHaveCSS('opacity', '1');
+});
+
+test('with motion allowed the scenes pin and scrub', async ({ browser }) => {
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, reducedMotion: 'no-preference' });
+  await page.goto('/');
+  await expect(page.locator('.lp-d')).toHaveClass(/live/);
+  expect(await page.locator('.lp-d .pin-spacer').count()).toBeGreaterThanOrEqual(6);
+  await page.close();
+});
+
+test('the phone composition takes over below 768px', async ({ browser }) => {
+  const page = await browser.newPage({ viewport: { width: 390, height: 844 }, reducedMotion: 'reduce' });
+  await page.goto('/');
+  await expect(page.locator('.lp-m')).toBeVisible();
+  await expect(page.locator('.lp-d')).toBeHidden();
+  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(390);
+  await page.close();
+});
+
+test('the example viewer selects a card and shows it in the inspector', async ({ page }) => {
+  await page.goto('/examples');
+  await page.getByRole('button', { name: /Open in the viewer/ }).click();
+  const card = page.locator('.sm-card').first();
+  await expect(card).toBeVisible();
+  const title = (await card.getAttribute('aria-label'))!.split(',')[0]!;
+  await card.click();
+  await expect(page.getByRole('complementary', { name: 'Inspector' }).getByRole('heading', { name: title })).toBeVisible();
+});
+
+test('the docs copy button confirms', async ({ page, context }) => {
+  await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+  await page.goto('/docs');
+  await page.getByRole('button', { name: 'Copy the install command' }).click();
+  await expect(page.getByRole('button', { name: 'Copied' })).toBeVisible();
+  expect(await page.evaluate(() => navigator.clipboard.readText())).toBe('npx skills add hyamero/stackmap');
+});
diff --git a/site/lib/checkout.ts b/site/lib/checkout.ts
new file mode 100644
index 0000000..ca36d01
--- /dev/null
+++ b/site/lib/checkout.ts
@@ -0,0 +1,15 @@
+import type { DiagramKind } from '@stackmap/core';
+
+/**
+ * The #kinds scene's card slots: slot i holds each kind's node here, or nothing. A card keeps its slot
+ * from one kind to the next, so it glides to its new place instead of swapping (Motion board, #kinds).
+ */
+export const SLOTS: Record<DiagramKind, (string | null)[]> = {
+  architecture: ['storefront', 'edge', 'api', 'stripe', 'orders', 'events'],
+  dataflow: ['cart', 'priced', 'payment', null, 'row', 'placed'],
+  workflow: ['add', 'validate', 'charge', 'create', 'pay', 'declined'],
+  lifecycle: ['created', 'awaiting', 'failed', 'fulfilled', 'paid', 'cancelled'],
+  sequence: ['api', 'storefront', null, 'orders', 'stripe', null],
+};
+
+export const SLOT_COUNT = 6;
diff --git a/site/lib/data/data.test.ts b/site/lib/data/data.test.ts
index 649add5..e4a35d4 100644
--- a/site/lib/data/data.test.ts
+++ b/site/lib/data/data.test.ts
@@ -34,8 +34,10 @@ describe('layoutSite', () => {
     expect(Object.keys(d.examples).sort()).toEqual(['bookshop', 'food-delivery', 'ml-feature-platform', 'production-vpc', 'repo-architecture']);
     expect(Object.keys(d.skill).sort()).toEqual(['checkout.sequence', 'clickstream.dataflow', 'job.lifecycle', 'release.workflow', 'web-app.architecture']);
     expect(d.quickStart.draft.nodes.map((n) => n.id)).toEqual(['api', 'db']);
+    expect(Object.keys(d.checkout).sort()).toEqual(['architecture', 'dataflow', 'lifecycle', 'sequence', 'workflow']);
+    for (const [kind, c] of Object.entries(d.checkout)) expect(c.draft.kind).toBe(kind);
     expect(Object.keys(d.demo.nodes)).toHaveLength(11);
-    for (const diagram of [d.demo, d.quickStart, ...Object.values(d.gallery), ...Object.values(d.examples), ...Object.values(d.skill)]) {
+    for (const diagram of [d.demo, d.quickStart, ...Object.values(d.gallery), ...Object.values(d.examples), ...Object.values(d.skill), ...Object.values(d.checkout)]) {
       expect(diagram.bounds.width).toBeGreaterThan(0);
     }
   }, 60_000);
diff --git a/site/lib/data/diagrams.ts b/site/lib/data/diagrams.ts
index f609421..6420fb6 100644
--- a/site/lib/data/diagrams.ts
+++ b/site/lib/data/diagrams.ts
@@ -6,7 +6,7 @@ import { GALLERY } from '@stackmap/core/gallery';
 import { layoutDiagram } from '@stackmap/layout';
 import { validateDiagram } from '@stackmap/schema';
 import { formatJson } from './json-format';
-import { DEMO, EXAMPLES_DIR, QUICK_START, SKILL_EXAMPLES_DIR } from './paths';
+import { CHECKOUT_DIR, DEMO, EXAMPLES_DIR, QUICK_START, SKILL_EXAMPLES_DIR } from './paths';
 
 export interface SiteDiagrams {
   demo: LaidOutDiagram;
@@ -15,6 +15,8 @@ export interface SiteDiagrams {
   /** the skill's own example per kind, keyed by file name without `.json` */
   skill: Record<string, LaidOutDiagram>;
   quickStart: LaidOutDiagram;
+  /** the landing's one checkout, drawn as each kind, keyed by kind */
+  checkout: Record<string, LaidOutDiagram>;
 }
 
 const jsonFiles = (dir: URL) => readdirSync(dir).filter((f) => f.endsWith('.json')).sort();
@@ -45,6 +47,7 @@ export async function layoutSite({ examplesDir = EXAMPLES_DIR, demo = DEMO }: {
     examples: await layoutDir(examplesDir),
     skill: await layoutDir(SKILL_EXAMPLES_DIR),
     quickStart: await layoutFile(QUICK_START),
+    checkout: await layoutDir(CHECKOUT_DIR),
   };
 }
 
diff --git a/site/lib/data/paths.ts b/site/lib/data/paths.ts
index 4726595..9f0801f 100644
--- a/site/lib/data/paths.ts
+++ b/site/lib/data/paths.ts
@@ -4,6 +4,7 @@ export const CLI_PACKAGE = new URL('packages/cli/package.json', repo);
 export const VIEWER_TEMPLATE = new URL('packages/viewer/dist/index.html', repo);
 export const EXAMPLES_DIR = new URL('site/content/examples/', repo);
 export const DEMO = new URL('site/content/demo/commerce-api.json', repo);
+export const CHECKOUT_DIR = new URL('site/content/checkout/', repo);
 export const QUICK_START = new URL('site/content/docs/quick-start.json', repo);
 export const SKILL_EXAMPLES_DIR = new URL('skill/examples/', repo);
 export const GENERATED_DIR = new URL('site/generated/', repo);
diff --git a/site/lib/data/static-html.test.ts b/site/lib/data/static-html.test.ts
new file mode 100644
index 0000000..caa8de6
--- /dev/null
+++ b/site/lib/data/static-html.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { commerceApiLayout } from '../../../packages/viewer/src/samples/commerce-api.layout';
+import { toScene } from '../../../packages/viewer/src/canvas/scene';
+import { staticDiagram } from './static-html';
+
+describe('staticDiagram', () => {
+  it('is the viewer’s own static scene, rendered once at build time', () => {
+    const { html } = staticDiagram(commerceApiLayout);
+    expect(html.match(/class="sm-card/g)).toHaveLength(commerceApiLayout.draft.nodes.length);
+    expect(html).toContain('inert');
+  });
+
+  it('carries the content box the page fits it by', () => {
+    const { box } = staticDiagram(commerceApiLayout);
+    expect(box).toEqual(toScene(commerceApiLayout).content);
+  });
+});
diff --git a/site/lib/data/static-html.ts b/site/lib/data/static-html.ts
new file mode 100644
index 0000000..bff8bd9
--- /dev/null
+++ b/site/lib/data/static-html.ts
@@ -0,0 +1,25 @@
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import type { LaidOutDiagram, Rect } from '@stackmap/core';
+import { toScene } from '../../../packages/viewer/src/canvas/scene';
+import { StaticScene } from '../../../packages/viewer/src/canvas/StaticScene';
+
+export interface StaticDiagram {
+  html: string;
+  /** the drawn content's box, which the page scales the HTML to fit */
+  box: Rect;
+  title: string;
+  nodes: number;
+  edges: number;
+}
+
+// A diagram that never changes is rendered here once, so pages ship its HTML and none of the viewer's code.
+export function staticDiagram(d: LaidOutDiagram): StaticDiagram {
+  return {
+    html: renderToStaticMarkup(createElement(StaticScene, { diagram: d })),
+    box: toScene(d).content,
+    title: d.draft.title,
+    nodes: d.draft.nodes.length,
+    edges: d.draft.edges.length,
+  };
+}
diff --git a/site/lib/diagrams.ts b/site/lib/diagrams.ts
index 5a9ddc5..0be9ffc 100644
--- a/site/lib/diagrams.ts
+++ b/site/lib/diagrams.ts
@@ -1,8 +1,10 @@
 import type { LaidOutDiagram } from '@stackmap/core';
 import diagrams from '@/generated/diagrams.json';
 import sources from '@/generated/sources.json';
+import still from '@/generated/static.json';
 import type { Entry } from './catalog';
 import type { SiteDiagrams, SiteSources } from './data/diagrams';
+import type { StaticDiagram } from './data/static-html';
 
 // Server-only: pages pass single diagrams down, so a client island never ships the whole file.
 const DIAGRAMS = diagrams as unknown as SiteDiagrams;
@@ -15,3 +17,14 @@ export function diagramOf(e: Pick<Entry, 'source' | 'key'>): LaidOutDiagram {
 }
 
 export const QUICK_START: LaidOutDiagram = DIAGRAMS.quickStart;
+export const DEMO: LaidOutDiagram = DIAGRAMS.demo;
+export const CHECKOUT: Record<string, LaidOutDiagram> = DIAGRAMS.checkout;
+
+const STILL = still as Record<string, StaticDiagram>;
+
+/** A diagram pre-rendered at build time: `demo`, `quickStart`, or `<source>/<key>` (gallery, examples, skill, checkout). */
+export function stillOf(key: string): StaticDiagram {
+  const d = STILL[key];
+  if (!d) throw new Error(`no pre-rendered diagram ${key}; run \`bun run data\``);
+  return d;
+}
diff --git a/site/package.json b/site/package.json
index 415a513..2b2f47b 100644
--- a/site/package.json
+++ b/site/package.json
@@ -9,17 +9,21 @@
     "build": "bun run data && next build",
     "start": "next start",
     "test": "vitest run",
-    "typecheck": "bun run data && next typegen && tsc --noEmit"
+    "typecheck": "bun run data && next typegen && tsc --noEmit",
+    "e2e": "playwright test"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@stackmap/core": "workspace:*",
     "@stackmap/viewer": "workspace:*",
     "geist": "^1.7.2",
+    "gsap": "^3.15.0",
     "next": "^16.3.7",
     "react": "^19.3.0",
     "react-dom": "^19.3.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.63.0",
     "@stackmap/layout": "workspace:*",
     "@stackmap/schema": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
diff --git a/site/playwright.config.ts b/site/playwright.config.ts
new file mode 100644
index 0000000..f8226b7
--- /dev/null
+++ b/site/playwright.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test';
+
+// Smoke checks against the production build (`next build` first). Reduced motion by default: every scene
+// is then its resting frame; the motion test opts back in.
+export default defineConfig({
+  testDir: './e2e',
+  use: { baseURL: 'http://localhost:4310', viewport: { width: 1440, height: 900 }, contextOptions: { reducedMotion: 'reduce' } },
+  webServer: { command: 'bunx next start --port 4310', url: 'http://localhost:4310', reuseExistingServer: !process.env.CI },
+});
diff --git a/site/scripts/build-data.ts b/site/scripts/build-data.ts
index 6875645..61e3c3b 100644
--- a/site/scripts/build-data.ts
+++ b/site/scripts/build-data.ts
@@ -4,6 +4,7 @@ import { layoutSite, readSources } from '../lib/data/diagrams';
 import { GENERATED_DIR } from '../lib/data/paths';
 import { deliverReceipt, readTemplate, repairRound } from '../lib/data/receipt';
 import { schemaReference } from '../lib/data/schema-ref';
+import { staticDiagram } from '../lib/data/static-html';
 import { installCommands, readCliVersion } from '../lib/data/version';
 
 const version = readCliVersion();
@@ -15,5 +16,10 @@ write('site.json', { version, install: installCommands(version), receipt, repair
 write('diagrams.json', diagrams);
 write('schema.json', schemaReference());
 write('sources.json', readSources());
+const still: Record<string, ReturnType<typeof staticDiagram>> = { demo: staticDiagram(diagrams.demo), quickStart: staticDiagram(diagrams.quickStart) };
+for (const group of ['gallery', 'examples', 'skill', 'checkout'] as const) {
+  for (const [key, d] of Object.entries(diagrams[group])) still[`${group}/${key}`] = staticDiagram(d);
+}
+write('static.json', still);
 
 console.log(`site data: stackmap ${version} · ${Object.keys(diagrams.gallery).length + Object.keys(diagrams.examples).length + Object.keys(diagrams.skill).length} diagrams · receipt ${receipt.sha256.slice(0, 12)}…`);
diff --git a/site/tests/checkout.test.ts b/site/tests/checkout.test.ts
new file mode 100644
index 0000000..9405f3c
--- /dev/null
+++ b/site/tests/checkout.test.ts
@@ -0,0 +1,20 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+import { DIAGRAM_KINDS } from '@stackmap/core';
+import { SLOT_COUNT, SLOTS } from '../lib/checkout';
+
+const draft = (kind: string) => JSON.parse(readFileSync(new URL(`../content/checkout/${kind}.json`, import.meta.url), 'utf8')) as { kind: string; nodes: { id: string }[] };
+
+describe('checkout slots', () => {
+  it('has one checkout per kind', () => {
+    for (const kind of DIAGRAM_KINDS) expect(draft(kind).kind).toBe(kind);
+  });
+
+  it('puts every node of every kind in exactly one slot', () => {
+    for (const kind of DIAGRAM_KINDS) {
+      const slots = SLOTS[kind];
+      expect(slots).toHaveLength(SLOT_COUNT);
+      expect(slots.filter(Boolean).sort()).toEqual(draft(kind).nodes.map((n) => n.id).sort());
+    }
+  });
+});
diff --git a/site/tests/kinds-geometry.test.ts b/site/tests/kinds-geometry.test.ts
new file mode 100644
index 0000000..3250447
--- /dev/null
+++ b/site/tests/kinds-geometry.test.ts
@@ -0,0 +1,60 @@
+import { beforeAll, describe, expect, it } from 'vitest';
+import { DIAGRAM_KINDS, type LaidOutDiagram } from '@stackmap/core';
+import { kindsGeometry, kindsTweens, type KindsGeometry } from '../components/landing/kinds-geometry';
+import { layoutSite } from '../lib/data/diagrams';
+
+const AREA = { cx: 720, cy: 640, width: 1248, height: 522 };
+let checkout: Record<string, LaidOutDiagram>;
+let g: KindsGeometry;
+
+beforeAll(async () => {
+  checkout = (await layoutSite()).checkout;
+  g = kindsGeometry(checkout, AREA);
+}, 60_000);
+
+describe('kinds geometry', () => {
+  it('fits every kind inside the area at one shared scale', () => {
+    for (const l of g.layers) {
+      const { width, height } = l.diagram.bounds;
+      expect(l.left).toBeGreaterThanOrEqual(AREA.cx - AREA.width / 2 - 1);
+      expect(l.top).toBeGreaterThanOrEqual(AREA.cy - AREA.height / 2 - 1);
+      expect(width).toBeGreaterThan(0);
+      expect(height).toBeGreaterThan(0);
+    }
+    expect(Math.min(...g.layers.map((l) => l.cam))).toBeCloseTo(1, 5);
+  });
+
+  it('never zooms a kind past the cap', () => {
+    for (const l of g.layers) expect(l.cam).toBeLessThanOrEqual(1.35);
+  });
+
+  it('puts each slot on its node’s laid-out card, for every kind that has one', () => {
+    const wf = DIAGRAM_KINDS.indexOf('workflow');
+    const face = g.slots[0]![wf]!;
+    expect(face.card.node.id).toBe('add');
+    expect(face.rect.width).toBeCloseTo(face.card.rect.width * g.scale, 5);
+  });
+
+  it('writes one tween per slot, face, layer and the camera', () => {
+    const tweens = kindsTweens(g);
+    const faces = g.slots.flat().filter(Boolean).length;
+    const targets = tweens.map((t) => t.target);
+    expect(targets.filter((t) => /^\.ks\d$/.test(t))).toHaveLength(g.slots.length);
+    expect(targets.filter((t) => /^\.kf\d_\d$/.test(t))).toHaveLength(faces);
+    expect(targets.filter((t) => /^\.kl\d$/.test(t))).toHaveLength(DIAGRAM_KINDS.length);
+    expect(targets).toContain('.kcam');
+  });
+
+  it('hides a slot through the kinds that leave it empty', () => {
+    const slot3 = kindsTweens(g).find((t) => t.target === '.ks3')!;
+    // dataflow (kind 1) has no card in slot 3: its hold keeps the slot invisible
+    expect(slot3.frames['23%']!.opacity).toBe('0');
+    expect(slot3.frames['36%']!.opacity).toBe('0');
+  });
+
+  it('moves on the board\'s in-out curve and holds still in each kind', () => {
+    const slot0 = kindsTweens(g).find((t) => t.target === '.ks0')!;
+    expect(slot0.frames['23%']!.ease).toBe('cb:0.77,0,0.175,1');
+    expect(slot0.frames['16%']!.left).toBe(slot0.frames['0%']!.left);
+  });
+});
diff --git a/site/tests/timeline.test.ts b/site/tests/timeline.test.ts
new file mode 100644
index 0000000..8fda7f7
--- /dev/null
+++ b/site/tests/timeline.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { transformVars } from '../components/landing/timeline';
+
+describe('board transforms as GSAP properties', () => {
+  it('reads the transform functions the boards use', () => {
+    expect(transformVars('translateY(-90px)')).toEqual({ y: -90 });
+    expect(transformVars('translate(-50%, 12px) scale(0.92)')).toEqual({ xPercent: -50, y: 12, scale: 0.92 });
+    expect(transformVars('rotateX(58deg) translateY(-20px) scale(0.92)')).toEqual({ rotationX: 58, y: -20, scale: 0.92 });
+    expect(transformVars('translateZ(560px)')).toEqual({ z: 560 });
+    expect(transformVars('scale(1, 0.5)')).toEqual({ scaleX: 1, scaleY: 0.5 });
+  });
+
+  it('turns none into the identity, so a frame can return to rest', () => {
+    expect(transformVars('none')).toEqual({ x: 0, y: 0, z: 0, scale: 1, rotation: 0, rotationX: 0, rotationY: 0 });
+  });
+});