diff --git a/.github/workflows/deploy-site.yml b/.github/workflows/deploy-site.yml
new file mode 100644
index 00000000..df206a4f
--- /dev/null
+++ b/.github/workflows/deploy-site.yml
@@ -0,0 +1,63 @@
+name: Deploy showcase site to GitHub Pages
+
+# Builds the Next.js static export under `site/` (next build → ./out)
+# and publishes it to GitHub Pages. The legacy `docs/index.html`
+# showcase remains in the tree but is no longer the deploy target
+# once the repo's Pages source is switched to "GitHub Actions" in
+# repository Settings → Pages.
+#
+# For a PROJECT page deployed under user.github.io/<repo>, also
+# uncomment `basePath` / `assetPrefix` in `site/next.config.mjs`
+# so assets resolve under the sub-path.
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "site/**"
+      - ".github/workflows/deploy-site.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: site
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: site/package-lock.json
+
+      - run: npm ci --no-audit --no-fund
+
+      - run: npx next build
+
+      - uses: actions/configure-pages@v5
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: site/out
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21b3b0ab..a1047335 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -124,6 +124,34 @@ changes are planned.
   tutorial-style. README's "What can I do with this?" table row
   now links to both.
 
+### Web
+
+- **New Next.js showcase site** under `site/` is now the official
+  GitHub Pages deploy target for v1.6.8 onwards. Fully static
+  one-page marketing / playground built with Next.js 14 App
+  Router + TypeScript + Tailwind. `next build` emits `./out` (4
+  static pages, 99.7 kB first-load JS) and the new
+  [`.github/workflows/deploy-site.yml`](.github/workflows/deploy-site.yml)
+  uploads it to Pages on every push to `main` that touches
+  `site/**`. **Repo Settings → Pages source must be flipped to
+  "GitHub Actions"** for the workflow to take over from the
+  legacy branch-based deploy of `docs/index.html`; both files
+  coexist in the tree for one more cycle as a rollback.
+- Live code snippets in the Hero / Playground sections mirror
+  the canonical README hello-world, `examples/.../InvoiceFileExample`,
+  and `ModernProfessional.create()` paths, so a visitor copying
+  any snippet into a fresh Maven project pulled at
+  `io.github.demchaav:graph-compose:1.6.8` gets compiling code.
+  Gallery enumerates the full **16-preset cv/v2 lineup** (15
+  paired cover letters; `MinimalUnderlined` ships without a
+  paired letter by design).
+- `scripts/cut-release.ps1` learns a new `Update-SiteDepsVersion`
+  step so the Maven / Gradle install snippets in
+  `site/lib/deps.ts` flip in lockstep with the README + pom
+  versions at cut time — no more silent drift between the site
+  and the real released coordinates. The same release commit
+  now also stages `site/lib/deps.ts`.
+
 ## v1.6.7 — 2026-06-01
 
 **Transitive dependency cleanup.** v1.6.7 narrows the runtime
diff --git a/README.md b/README.md
index b586f2da..7d0a7444 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,7 @@ GraphCompose uses PDFBox under the hood as the rendering backend &mdash; the com
 | Generate a CV / cover letter from data | Layered templates | `ModernProfessional.create().compose(session, cvDocument)` &mdash; see [layered templates](./docs/templates/v2-layered/README.md) |
 | Add a custom visual primitive | Engine extension | `NodeDefinition` + `PdfFragmentRenderHandler` &mdash; see [extension guide](./docs/contributing/extension-guide.md) |
 | Regression-test generated layouts | Layout snapshots | `DocumentSession#layoutSnapshot()` &mdash; quickstart at [Testing your document](./docs/operations/test-your-document.md); full reference at [snapshot testing](./docs/operations/layout-snapshot-testing.md) |
+| See the live playground / gallery | Next.js showcase site | [Showcase](https://DemchaAV.github.io/GraphCompose/) &mdash; source under [`site/`](./site), built with `next build` and deployed via the [Pages workflow](./.github/workflows/deploy-site.yml) |
 
 ## Installation
 
diff --git a/scripts/cut-release.ps1 b/scripts/cut-release.ps1
index 8e60cd7c..22c0d497 100644
--- a/scripts/cut-release.ps1
+++ b/scripts/cut-release.ps1
@@ -219,6 +219,100 @@ function Update-ReadmeInstallVersion($readmePath, $newVersion) {
     }
 }
 
+function Update-SiteDepsVersion($depsPath, $newVersion) {
+    # The Next.js showcase site (site/) embeds the Maven Central
+    # coordinates in `site/lib/deps.ts`. The pom-bump pipeline never
+    # touched this file before v1.6.8 (legacy site lives under docs/),
+    # so without this helper the next release would silently ship the
+    # site with an outdated <version> in the install snippet.
+    if (-not (Test-Path $depsPath)) {
+        Note "skip (no file): $depsPath"
+        return
+    }
+    $content = Get-Content $depsPath -Raw
+    $changed = $false
+    $replacements = @(
+        @{ Regex = [regex]'(?<=<version>)v?[\w\.\-]+(?=</version>)';                                    Value = $newVersion; Label = 'site Maven snippet' },
+        @{ Regex = [regex]"(?<=io\.github\.demchaav:graph-compose:)v?[\w\.\-]+(?=`")";                  Value = $newVersion; Label = 'site Gradle snippet' }
+    )
+    foreach ($r in $replacements) {
+        $after = $r.Regex.Replace($content, $r.Value, 1)
+        if ($content -ne $after) {
+            $content = $after
+            $changed = $true
+            Note "bumped site/lib/deps.ts $($r.Label) -> $($r.Value)"
+        }
+    }
+    if (-not $changed) {
+        Note "no change: site/lib/deps.ts (already $newVersion?)"
+        return
+    }
+    if ($DryRun) {
+        Write-Host "    [DRY RUN] site/lib/deps.ts -> $newVersion" -ForegroundColor Yellow
+    } else {
+        [System.IO.File]::WriteAllText($depsPath, $content)
+    }
+}
+
+function Update-SiteHeroVersion($heroPath, $newVersion) {
+    # site/components/Hero.tsx shows the Maven Central coordinates in
+    # the right-hand card. Without this bump the hero would lag the
+    # actual install snippet for one release cycle.
+    if (-not (Test-Path $heroPath)) { Note "skip (no file): $heroPath"; return }
+    $content = Get-Content $heroPath -Raw
+    $regex = [regex]'(?<=io\.github\.demchaav:graph-compose:)v?[\w\.\-]+(?=</b>)'
+    $after = $regex.Replace($content, $newVersion, 1)
+    if ($content -eq $after) {
+        Note "no change: site/components/Hero.tsx (already $newVersion?)"
+        return
+    }
+    if ($DryRun) {
+        Write-Host "    [DRY RUN] site/components/Hero.tsx -> $newVersion" -ForegroundColor Yellow
+    } else {
+        [System.IO.File]::WriteAllText($heroPath, $after)
+        Note "bumped site/components/Hero.tsx -> $newVersion"
+    }
+}
+
+function Update-SitePresetsVersion($presetsPath, $newVersion) {
+    # site/lib/presets.tsx mentions the coordinates in the file's
+    # leading docstring so copy-pasters land on the right artifact.
+    if (-not (Test-Path $presetsPath)) { Note "skip (no file): $presetsPath"; return }
+    $content = Get-Content $presetsPath -Raw
+    $regex = [regex]'(?<=io\.github\.demchaav:graph-compose:)v?[\w\.\-]+(?=`)'
+    $after = $regex.Replace($content, $newVersion, 1)
+    if ($content -eq $after) {
+        Note "no change: site/lib/presets.tsx (already $newVersion?)"
+        return
+    }
+    if ($DryRun) {
+        Write-Host "    [DRY RUN] site/lib/presets.tsx -> $newVersion" -ForegroundColor Yellow
+    } else {
+        [System.IO.File]::WriteAllText($presetsPath, $after)
+        Note "bumped site/lib/presets.tsx -> $newVersion"
+    }
+}
+
+function Update-SiteExamplesJsonTag($jsonPath, $tag) {
+    # `site/public/examples.json` is a copy of `docs/examples.json` used
+    # by the Gallery. Re-pin its source links from `/blob/develop/...`
+    # to `/blob/<tag>/...` so deep links survive future develop drift.
+    if (-not (Test-Path $jsonPath)) { Note "skip (no file): $jsonPath"; return }
+    $content = Get-Content $jsonPath -Raw
+    $regex = [regex]'(?<=https://github\.com/DemchaAV/GraphCompose/blob/)develop(?=/)'
+    $after = $regex.Replace($content, $tag)
+    if ($content -eq $after) {
+        Note "no change: site/public/examples.json (no /blob/develop/ links to pin?)"
+        return
+    }
+    if ($DryRun) {
+        Write-Host "    [DRY RUN] site/public/examples.json: blob/develop -> blob/$tag" -ForegroundColor Yellow
+    } else {
+        [System.IO.File]::WriteAllText($jsonPath, $after)
+        Note "pinned site/public/examples.json /blob/develop -> /blob/$tag"
+    }
+}
+
 function Update-IndexHtmlVersion($indexHtmlPath, $newVersion) {
     if (-not (Test-Path $indexHtmlPath)) {
         Note "skip (no file): $indexHtmlPath"
@@ -286,6 +380,75 @@ function Update-ShowcaseGhBase($newRef) {
     return $true
 }
 
+function Sync-SiteShowcase {
+    # Mirrors freshly-regenerated showcase artefacts from docs/ into
+    # site/public/ so the Next.js site doesn't drift from the legacy
+    # docs/ catalogue. Run AFTER Run-ShowcaseSync so the freshly-built
+    # PDFs / screenshots / manifest are picked up.
+    #
+    # What gets mirrored:
+    #   docs/showcase/pdf/**           → site/public/showcase/pdf/**
+    #   docs/showcase/screenshots/**   → site/public/showcase/screenshots/**
+    #   docs/examples.json             → site/public/examples.json
+    #   docs/showcase/screenshots/templates/cv/cv-*-v2.png
+    #                                  → site/public/previews/cv-v2/
+    #   docs/showcase/screenshots/templates/coverletter/cover-letter-*-v2.png
+    #                                  → site/public/previews/coverletter-v2/
+    #
+    # Doesn't touch the 3 Playground PDFs (hello/invoice/cv) — those have
+    # no generator yet, see future-work note in site/public/previews/README.md.
+    $docsShowcase = Join-Path $repoRoot 'docs/showcase'
+    $siteShowcase = Join-Path $repoRoot 'site/public/showcase'
+    $docsJson     = Join-Path $repoRoot 'docs/examples.json'
+    $siteJson     = Join-Path $repoRoot 'site/public/examples.json'
+    $cvSrcDir     = Join-Path $docsShowcase 'screenshots/templates/cv'
+    $letterSrcDir = Join-Path $docsShowcase 'screenshots/templates/coverletter'
+    $cvDstDir     = Join-Path $repoRoot 'site/public/previews/cv-v2'
+    $letterDstDir = Join-Path $repoRoot 'site/public/previews/coverletter-v2'
+
+    if (-not (Test-Path $docsShowcase)) {
+        Note "skip Sync-SiteShowcase: no docs/showcase yet"
+        return
+    }
+
+    if ($DryRun) {
+        Write-Host "    [DRY RUN] mirror docs/showcase/{pdf,screenshots} -> site/public/showcase/" -ForegroundColor Yellow
+        Write-Host "    [DRY RUN] copy docs/examples.json -> site/public/examples.json" -ForegroundColor Yellow
+        Write-Host "    [DRY RUN] copy cv/v2 + coverletter/v2 PNGs -> site/public/previews/{cv-v2,coverletter-v2}/" -ForegroundColor Yellow
+        return
+    }
+
+    # Mirror showcase tree (deletes orphans on the site side to keep parity)
+    New-Item -ItemType Directory -Force -Path $siteShowcase | Out-Null
+    Copy-Item -Recurse -Force "$docsShowcase/pdf" $siteShowcase
+    Copy-Item -Recurse -Force "$docsShowcase/screenshots" $siteShowcase
+    Note "synced docs/showcase -> site/public/showcase"
+
+    # Manifest
+    if (Test-Path $docsJson) {
+        Copy-Item -Force $docsJson $siteJson
+        Note "synced docs/examples.json -> site/public/examples.json"
+        # Re-apply the /blob/develop -> /blob/<tag> pin in case
+        # docs/examples.json itself still points at develop (ShowcaseSync
+        # writes whatever GH_BASE Step 3 set in ShowcaseMetadata.java).
+        if ($script:tag) {
+            Update-SiteExamplesJsonTag $siteJson $script:tag
+        }
+    }
+
+    # Per-preset CV + cover-letter PNGs used by the Gallery hover overlay
+    if (Test-Path $cvSrcDir) {
+        New-Item -ItemType Directory -Force -Path $cvDstDir | Out-Null
+        Copy-Item -Force "$cvSrcDir/cv-*-v2.png" $cvDstDir
+        Note "synced cv-v2 preset previews -> site/public/previews/cv-v2/"
+    }
+    if (Test-Path $letterSrcDir) {
+        New-Item -ItemType Directory -Force -Path $letterDstDir | Out-Null
+        Copy-Item -Force "$letterSrcDir/cover-letter-*-v2.png" $letterDstDir
+        Note "synced coverletter-v2 preset previews -> site/public/previews/coverletter-v2/"
+    }
+}
+
 function Run-ShowcaseSync {
     # Quote the -D argument: PowerShell's call operator drops the leading
     # '-D' on the way to mvnw.cmd, so Maven sees ".mainClass=..." as a
@@ -433,6 +596,10 @@ try {
     Update-PomVersion (Join-Path $repoRoot 'benchmarks/pom.xml') $Version
     Update-ReadmeInstallVersion (Join-Path $repoRoot 'README.md') $Version
     Update-IndexHtmlVersion (Join-Path $repoRoot 'docs/index.html') $Version
+    Update-SiteDepsVersion (Join-Path $repoRoot 'site/lib/deps.ts') $Version
+    Update-SiteHeroVersion (Join-Path $repoRoot 'site/components/Hero.tsx') $Version
+    Update-SitePresetsVersion (Join-Path $repoRoot 'site/lib/presets.tsx') $Version
+    Update-SiteExamplesJsonTag (Join-Path $repoRoot 'site/public/examples.json') $tag
 
     Step 2 "Update CHANGELOG date for v$Version"
     $changelog = Join-Path $repoRoot 'CHANGELOG.md'
@@ -459,6 +626,7 @@ try {
 
     Step 4 "Regenerate docs/examples.json with $tag links"
     Run-ShowcaseSync
+    Sync-SiteShowcase
 
     if (-not $SkipVerify) {
         Step 5 "Run mvnw verify (sanity check)"
@@ -482,7 +650,7 @@ try {
     Step 6 "Commit release"
     $commitMsg = "Release v$Version"
     if ($DryRun) {
-        Write-Host "    [DRY RUN] git add pom.xml aggregator/pom.xml examples/pom.xml benchmarks/pom.xml README.md CHANGELOG.md examples/src/main/java/com/demcha/examples/support/ShowcaseMetadata.java docs/examples.json docs/index.html" -ForegroundColor Yellow
+        Write-Host "    [DRY RUN] git add pom.xml aggregator/pom.xml examples/pom.xml benchmarks/pom.xml README.md CHANGELOG.md examples/src/main/java/com/demcha/examples/support/ShowcaseMetadata.java docs/examples.json docs/index.html docs/showcase site/lib/deps.ts site/components/Hero.tsx site/lib/presets.tsx site/public/examples.json site/public/showcase site/public/previews/cv-v2 site/public/previews/coverletter-v2" -ForegroundColor Yellow
         Write-Host "    [DRY RUN] git commit -m `"$commitMsg`"" -ForegroundColor Yellow
     } else {
         git add `
@@ -494,7 +662,15 @@ try {
             CHANGELOG.md `
             examples/src/main/java/com/demcha/examples/support/ShowcaseMetadata.java `
             docs/examples.json `
-            docs/index.html
+            docs/index.html `
+            docs/showcase `
+            site/lib/deps.ts `
+            site/components/Hero.tsx `
+            site/lib/presets.tsx `
+            site/public/examples.json `
+            site/public/showcase `
+            site/public/previews/cv-v2 `
+            site/public/previews/coverletter-v2
         git commit -m $commitMsg
         Note "commit: $commitMsg"
     }
diff --git a/site/.gitignore b/site/.gitignore
new file mode 100644
index 00000000..91279146
--- /dev/null
+++ b/site/.gitignore
@@ -0,0 +1,25 @@
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# typescript
+*.tsbuildinfo
+
+# env
+.env*.local
diff --git a/site/README.md b/site/README.md
new file mode 100644
index 00000000..16af2912
--- /dev/null
+++ b/site/README.md
@@ -0,0 +1,84 @@
+# GraphCompose — showcase site
+
+One-page showcase for **GraphCompose**, a declarative Java DSL for business PDFs.
+Built with Next.js (App Router) + TypeScript + Tailwind. Fully static — no SSR,
+no trackers, no analytics.
+
+## Run it
+
+```bash
+pnpm i        # or: npm i / yarn
+pnpm dev      # http://localhost:3000
+```
+
+Build a static bundle (emits `./out`, deployable to GitHub Pages / Vercel / any
+static host):
+
+```bash
+pnpm build
+```
+
+> Deploying under a sub-path on GitHub Pages (e.g. `user.github.io/graph-compose`)?
+> Uncomment `basePath` / `assetPrefix` in `next.config.mjs`.
+
+## Where things live
+
+```
+app/
+  layout.tsx        fonts (next/font: Inter + JetBrains Mono), <head>, theme-init
+  page.tsx          section order
+  globals.css       ← design tokens + all styles (see "Theming" below)
+components/
+  TopBar.tsx        sticky nav + dark-mode toggle
+  Hero.tsx          §1 code → PDF split, flowing arrow
+  Playground.tsx    §2 Monaco editor + preset tabs + DSL-feature chips
+  PdfPreview.tsx        pdf.js renderer (real PDFs) with CSS fallback
+  PaperPage.tsx         CSS recreations of BusinessTheme output (the fallback)
+  Pipeline.tsx      §3 scroll-driven 4-step pipeline + SVG diagrams
+  Gallery.tsx       §4 14-template grid, paired-letter hover, modal
+  Positioning.tsx   §5 comparison table
+  Engineering.tsx   §6 culture cards + mini changelog
+  Cta.tsx           §7 dependency snippet (copy) + contact
+  Footer.tsx
+  Reveal.tsx        fade-in-on-scroll wrapper (respects reduced-motion)
+lib/
+  presets.tsx       playground examples + which code lines each chip highlights
+  gallery.ts        the 14 CV presets (name, accent, layout variant, blurb)
+  deps.ts           Maven / Gradle snippets
+  highlight.ts      tiny Java highlighter for static <pre> blocks
+public/previews/    drop real PDFs here (see its README)
+```
+
+## PDF previews
+
+The playground shows **real PDFs** via pdf.js. Put them in `public/previews/`
+(`hello.pdf`, `invoice.pdf`, `cv.pdf`) — see `public/previews/README.md` for how
+to generate them with GraphCompose. Until a file is present, a CSS fallback page
+renders, so the site never looks broken.
+
+## Theming — change the accent in ONE place
+
+The whole palette is CSS variables in `app/globals.css`. To recolour the site,
+edit a single value:
+
+```css
+:root{
+  --ink: #1F2A44;   /* ← accent (charcoal-blue). Change this. */
+}
+```
+
+`--bg` (milky) and `--bg-2` (warm off-white) are the two neutral grounds. The
+dark theme overrides the same variables under `[data-theme="dark"]`. Tailwind
+reads these vars (`tailwind.config.ts`), so utilities and tokens never drift.
+
+## Accessibility & motion
+
+- Every interaction is keyboard-reachable; the modal traps Escape and restores focus.
+- All scroll-/loop-driven motion is disabled under `prefers-reduced-motion`
+  (the pipeline falls back to four static stills).
+
+## Notes
+
+- Monaco loads client-side only (`ssr: false`) and uses two custom themes
+  (`gc-light` / `gc-dark`) that track the page theme.
+- No external analytics or trackers by design.
diff --git a/site/app/globals.css b/site/app/globals.css
new file mode 100644
index 00000000..94d7f207
--- /dev/null
+++ b/site/app/globals.css
@@ -0,0 +1,436 @@
+/* Tailwind layers — utilities available alongside the token system below.
+   The palette lives entirely in CSS variables; edit --ink to recolour the site. */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===========================================================
+   GraphCompose showcase — design system
+   Inter (UI) · JetBrains Mono (code) · printed-paper aesthetic
+   Accent: charcoal-blue. No gradients / blur / glass.
+   =========================================================== */
+
+:root{
+  /* palette — light (default) */
+  --bg:        #FAF8F4;  /* milky */
+  --bg-2:      #F1ECE3;  /* warm off-white */
+  --paper:     #FFFFFF;
+  --ink:       #1F2A44;  /* accent charcoal-blue */
+  --ink-2:     #34405E;
+  --text:      #26282B;  /* warm charcoal body */
+  --muted:     #6B6B66;
+  --faint:     #97968F;
+  --line:      #E2DCCF;  /* hairline, warm */
+  --line-2:    #D3CCBC;
+  --panel:     #F6F3EC;  /* soft panel */
+  --accent-soft:#E7EAF0; /* tint of ink for fills */
+  --code-bg:   #FBFAF7;
+  --code-text: #2B3142;
+  --ok:        #3C6E47;
+  --shadow:    0 1px 0 rgba(31,42,68,.04);
+  --paper-shadow: 0 18px 40px -28px rgba(31,42,68,.45), 0 2px 8px -4px rgba(31,42,68,.18);
+
+  --maxw: 1200px;
+  --gut: 24px;
+  --air: 120px;            /* between-section air, desktop */
+
+  --mono: var(--font-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --sans: var(--font-inter), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+[data-theme="dark"]{
+  --bg:        #14161C;
+  --bg-2:      #181B22;
+  --paper:     #1E222B;
+  --ink:       #A9BCE2;
+  --ink-2:     #C2D0EE;
+  --text:      #E7E5DF;
+  --muted:     #9A9C9E;
+  --faint:     #6E7176;
+  --line:      #2A2F3A;
+  --line-2:    #353B47;
+  --panel:     #20242E;
+  --accent-soft:#262C3A;
+  --code-bg:   #181B22;
+  --code-text: #CBD3E6;
+  --ok:        #7FB58C;
+  --paper-shadow: 0 18px 40px -26px rgba(0,0,0,.7), 0 2px 10px -4px rgba(0,0,0,.5);
+}
+
+*{box-sizing:border-box;}
+html{scroll-behavior:smooth;}
+@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
+
+body{
+  margin:0;
+  background:var(--bg);
+  color:var(--text);
+  font-family:var(--sans);
+  font-size:17px;
+  line-height:1.55;
+  font-feature-settings:"cv05" 1,"ss01" 1;
+  -webkit-font-smoothing:antialiased;
+  text-rendering:optimizeLegibility;
+  transition:background .35s ease, color .35s ease;
+}
+h1,h2,h3{font-weight:600; color:var(--ink); letter-spacing:-.012em; line-height:1.12; margin:0;}
+h1{font-size:clamp(34px,4.4vw,56px); letter-spacing:-.02em;}
+h2{font-size:clamp(26px,3vw,38px);}
+h3{font-size:20px;}
+p{margin:0; text-wrap:pretty;}
+a{color:inherit; text-decoration:none;}
+code,kbd,pre,.mono{font-family:var(--mono);}
+::selection{background:var(--ink); color:var(--bg);}
+
+.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);}
+.section{padding:var(--air) 0;}
+.eyebrow{
+  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
+  color:var(--faint); display:flex; align-items:center; gap:10px; margin-bottom:22px;
+}
+.eyebrow::before{content:""; width:26px; height:1px; background:var(--line-2);}
+.lead{font-size:19px; color:var(--muted); line-height:1.5; max-width:62ch;}
+
+/* ---------- buttons ---------- */
+.btn{
+  font-family:var(--sans); font-size:15px; font-weight:500; line-height:1;
+  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
+  padding:14px 20px; border:1px solid var(--ink); border-radius:2px;
+  background:var(--ink); color:var(--bg);
+  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
+}
+.btn:hover{transform:translateY(-1px);}
+.btn:active{transform:translateY(0);}
+.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2);}
+.btn.ghost:hover{border-color:var(--ink);}
+.btn svg{width:16px; height:16px;}
+:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;}
+
+/* ---------- top bar ---------- */
+.topbar{
+  position:sticky; top:0; z-index:60;
+  background:color-mix(in srgb, var(--bg) 86%, transparent);
+  -webkit-backdrop-filter:saturate(1) blur(0px); /* no glass blur — kept crisp */
+  border-bottom:1px solid transparent;
+  transition:border-color .3s ease, background .3s ease;
+}
+.topbar.scrolled{border-bottom-color:var(--line);}
+.topbar .wrap{display:flex; align-items:center; height:78px; gap:28px;}
+.brand{display:flex; align-items:center; gap:9px;}
+.brand .brand-logo{height:54px; width:auto; display:block;}
+/* Light mode: the logo's pale-grey "Graph" letters are very low-contrast on
+   the warm-cream topbar bg. Heavy contrast + brightness drop + a touch of a
+   drop-shadow give the wordmark a visible outline against the page. */
+.brand .brand-logo{filter:contrast(1.7) saturate(1.25) brightness(0.78) drop-shadow(0 1px 0 rgba(31,42,68,0.15));}
+/* Dark mode: opposite problem — boost brightness so the light-grey "Graph"
+   stays readable on the near-black bg, drop the contrast bump that would
+   crush the dark icon outline. */
+[data-theme="dark"] .brand .brand-logo{filter:brightness(1.18) contrast(1.05);}
+.navlinks{display:flex; gap:22px; margin-left:auto; font-size:14px; color:var(--muted);}
+.navlinks a{position:relative; padding:4px 0; transition:color .2s ease;}
+.navlinks a:hover{color:var(--ink);}
+.navlinks a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--ink); transition:width .25s ease;}
+.navlinks a:hover::after{width:100%;}
+.topbar-actions{display:flex; align-items:center; gap:6px;}
+.iconbtn{
+  width:38px; height:38px; display:grid; place-items:center; border-radius:2px;
+  border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer;
+  transition:background .2s ease, color .2s ease, border-color .2s ease;
+}
+.iconbtn:hover{background:var(--bg-2); color:var(--ink); border-color:var(--line);}
+.iconbtn svg{width:18px; height:18px;}
+@media (max-width:820px){ .navlinks{display:none;} }
+
+/* ---------- generic panel / card ---------- */
+.panel{background:var(--paper); border:1px solid var(--line); border-radius:4px;}
+.softpanel{background:var(--panel); border:1px solid var(--line); border-radius:4px;}
+
+/* ---------- code block ---------- */
+.code{
+  background:var(--code-bg); border:1px solid var(--line); border-radius:4px;
+  font-family:var(--mono); font-size:13.5px; line-height:1.65; color:var(--code-text);
+  overflow:auto;
+}
+.code .tk-key{color:#9B5C2E;}      /* keyword     */
+.code .tk-type{color:#1F6F6B;}     /* type        */
+.code .tk-str{color:#3C6E47;}      /* string      */
+.code .tk-mth{color:var(--ink);}   /* method      */
+.code .tk-com{color:var(--faint); font-style:italic;}
+.code .tk-num{color:#9B5C2E;}
+[data-theme="dark"] .code .tk-key{color:#D6A06A;}
+[data-theme="dark"] .code .tk-type{color:#76C4BD;}
+[data-theme="dark"] .code .tk-str{color:#9FCBA8;}
+[data-theme="dark"] .code .tk-num{color:#D6A06A;}
+
+.win-dots{display:flex; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); align-items:center;}
+.win-dots i{width:10px; height:10px; border-radius:50%; background:var(--line-2); display:block;}
+.win-title{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-left:6px; letter-spacing:.03em;}
+
+/* ===========================================================
+   PDF "paper" page — recreation of BusinessTheme output
+   (in the shipped Next.js build these are real PDFs via pdf.js)
+   =========================================================== */
+.pdfframe{
+  position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:4px;
+  padding:26px; display:flex; justify-content:center; align-items:flex-start;
+}
+.pdf-badge{
+  position:absolute; top:12px; left:12px; z-index:3;
+  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--muted);
+  background:var(--paper); border:1px solid var(--line); border-radius:2px; padding:4px 9px;
+  display:flex; align-items:center; gap:7px;
+}
+.pdf-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--ok);}
+.pageno{position:absolute; bottom:14px; right:18px; font-family:var(--mono); font-size:10.5px; color:var(--faint);}
+
+.paper-page{
+  background:#fff; width:100%; max-width:380px; aspect-ratio:1 / 1.414;
+  box-shadow:var(--paper-shadow); border-radius:1px; color:#222;
+  padding:9% 9% 9%; font-size:9px; line-height:1.5; overflow:hidden; position:relative;
+  transition:box-shadow .3s ease;
+}
+[data-theme="dark"] .paper-page{ color:#1c1c1c; }
+.paper-page *{transition:background .25s ease, outline-color .25s ease;}
+.pp-accent{height:6px; background:#1F2A44; width:46%; margin-bottom:14px;}
+.pp-h1{font-family:var(--sans); font-weight:700; font-size:17px; color:#1F2A44; letter-spacing:-.01em; line-height:1.05;}
+.pp-sub{font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:#8a8a82; margin-top:3px;}
+.pp-rule{height:1px; background:#e7e2d6; margin:11px 0;}
+.pp-soft{background:#F1ECE3; border-radius:2px; padding:9px 10px; margin:9px 0;}
+.pp-line{height:5px; background:#dedacf; border-radius:1px; margin:5px 0;}
+.pp-line.s{width:40%;} .pp-line.m{width:68%;} .pp-line.l{width:88%;}
+.pp-ey{font-family:var(--sans); font-weight:700; font-size:9px; color:#1F2A44; text-transform:uppercase; letter-spacing:.09em; margin:12px 0 6px;}
+.pp-row{display:flex; gap:8px; margin:5px 0; align-items:center;}
+.pp-tag{font-family:var(--mono); font-size:7px; background:#eceef3; color:#1F2A44; padding:2px 5px; border-radius:2px;}
+.pp-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
+.pp-table{width:100%; border-collapse:collapse; margin-top:4px;}
+.pp-table td{border-bottom:1px solid #ece8dc; padding:4px 2px; font-size:7.5px; color:#555;}
+.pp-table tr td:last-child{text-align:right; font-family:var(--mono); color:#1F2A44;}
+.pp-strip{position:absolute; top:0; left:0; bottom:0; width:6px; background:#1F2A44;}
+
+/* highlight wiring (playground chips) */
+.hl-soft .pp-soft{outline:2px solid #1F2A44; outline-offset:2px; background:#E7EAF0;}
+.hl-accent .pp-accent, .hl-accent .pp-strip{background:#9B5C2E; box-shadow:0 0 0 3px rgba(155,92,46,.18);}
+.hl-theme .pp-h1, .hl-theme .pp-ey{color:#9B5C2E;}
+.hl-theme .pp-accent, .hl-theme .pp-strip{background:#9B5C2E;}
+
+/* ===========================================================
+   §1 HERO
+   =========================================================== */
+.hero{padding-top:70px; padding-bottom:var(--air);}
+.hero-grid{display:grid; grid-template-columns:1.02fr 1.18fr; gap:56px; align-items:center;}
+.hero h1 .accentword{color:var(--ink); position:relative;}
+.hero .lead{margin-top:22px;}
+.hero-cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;}
+.hero-meta{display:flex; gap:20px; margin-top:30px; flex-wrap:wrap; font-family:var(--mono); font-size:12.5px; color:var(--faint);}
+.hero-meta span{display:inline-flex; align-items:center; gap:7px;}
+.hero-meta b{color:var(--muted); font-weight:500;}
+
+.hero-split{position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0;}
+.hero-code{border-radius:4px 0 0 4px; min-height:300px;}
+.hero-code .code{border:none; border-radius:0; background:transparent;}
+.hero-codewrap{background:var(--code-bg); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
+.flowchan{width:62px; position:relative; align-self:stretch; display:grid; place-items:center;}
+@media (max-width:980px){
+  .hero-grid{grid-template-columns:1fr; gap:40px;}
+  .hero-split{grid-template-columns:1fr; gap:0;}
+  .flowchan{width:100%; height:54px; transform:rotate(90deg);}
+}
+
+/* ===========================================================
+   §2 PLAYGROUND
+   =========================================================== */
+.pg-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px;}
+.pg-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:stretch;}
+/* Grid children default to `min-width: auto` which lets Monaco-editor's
+   intrinsic 592px width balloon the track past the viewport on mobile.
+   `min-width: 0` lets the wrap shrink with the grid track. */
+.pg-grid > *{min-width:0;}
+.pg-editor-wrap{border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--code-bg); display:flex; flex-direction:column;}
+.pg-tabs{display:flex; gap:2px; padding:8px 8px 0; border-bottom:1px solid var(--line); background:var(--bg-2);}
+.pg-tab{
+  font-family:var(--mono); font-size:12.5px; color:var(--muted); cursor:pointer;
+  padding:9px 15px; border:1px solid transparent; border-bottom:none; border-radius:3px 3px 0 0;
+  background:transparent;
+  transition:background .15s ease, color .15s ease;
+}
+.pg-tab:hover{color:var(--ink);}
+.pg-tab.active{background:var(--code-bg); color:var(--ink); border-color:var(--line);}
+#monaco{height:420px; width:100%;}
+.pg-editor-fallback{height:420px; overflow:auto;}
+.pg-editor-fallback .code{height:100%; border:none; padding:16px 18px;}
+
+.pg-preview{display:flex; flex-direction:column; gap:0;}
+.pg-pdf{flex:1;}
+.pg-chips{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;}
+.chip-feat{
+  text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:4px;
+  padding:15px 16px; cursor:default; transition:border-color .2s ease, transform .2s ease, background .2s ease;
+}
+.chip-feat:hover{border-color:var(--ink); transform:translateY(-2px);}
+.chip-feat h4{font-size:14.5px; color:var(--ink); margin:0 0 5px; font-weight:600;}
+.chip-feat p{font-size:12.5px; color:var(--muted); line-height:1.45;}
+.chip-feat .cf-token{font-family:var(--mono); font-size:11px; color:var(--faint); display:block; margin-top:8px;}
+@media (max-width:980px){ .pg-grid{grid-template-columns:1fr;} #monaco,.pg-editor-fallback{height:330px;} }
+
+/* code-line highlight in monaco fallback */
+.cl-hl{background:rgba(31,42,68,.09); display:block; border-left:2px solid var(--ink); margin-left:-18px; padding-left:16px;}
+
+/* ===========================================================
+   §3 PIPELINE
+   =========================================================== */
+.pipe-sticky{position:sticky; top:62px; height:calc(100vh - 62px); display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
+.pipe-track{height:340vh;}
+.pipe-stage{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch;}
+.pipe-step{
+  border:1px solid var(--line); border-radius:5px; background:var(--paper); padding:22px;
+  opacity:.32; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease;
+  display:flex; flex-direction:column; min-height:340px;
+}
+.pipe-step.on{opacity:1; transform:none; border-color:var(--line-2);}
+.pipe-step.active{border-color:var(--ink); box-shadow:0 1px 0 rgba(31,42,68,.06);}
+.pipe-num{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.1em;}
+.pipe-step h3{font-size:18px; margin:10px 0 8px;}
+.pipe-step p{font-size:13.5px; color:var(--muted); line-height:1.5;}
+.pipe-viz{flex:1; margin-top:16px; display:grid; place-items:center; min-height:130px;}
+.pipe-progress{display:flex; gap:8px; margin:0 auto 26px; align-items:center; justify-content:center;}
+.pipe-progress i{width:34px; height:3px; background:var(--line-2); border-radius:2px; transition:background .3s ease;}
+.pipe-progress i.on{background:var(--ink);}
+.pipe-head{text-align:center; margin-bottom:30px;}
+@media (max-width:980px){
+  .pipe-sticky{position:static; height:auto; padding:20px 0;}
+  .pipe-track{height:auto;}
+  .pipe-stage{grid-template-columns:1fr; gap:14px;}
+  .pipe-step{opacity:1; transform:none; min-height:0;}
+}
+
+/* ===========================================================
+   §4 GALLERY
+   =========================================================== */
+.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px;}
+.gal-card{
+  position:relative; cursor:pointer; border-radius:4px; background:var(--bg-2);
+  border:1px solid var(--line); padding:14px; aspect-ratio:1/1.32; overflow:hidden;
+  transition:border-color .25s ease, transform .25s ease;
+}
+.gal-card:hover{border-color:var(--ink); transform:translateY(-3px);}
+.gal-thumb{width:100%; height:100%; position:relative;}
+.gal-cv,.gal-cl{position:absolute; inset:0; transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .35s ease;}
+.gal-cl{transform:translateX(14%) rotate(2.5deg); opacity:0;}
+.gal-card:hover .gal-cv{transform:translateX(-8%) rotate(-2deg); }
+.gal-card:hover .gal-cl{transform:translateX(6%) rotate(3deg); opacity:1;}
+.gal-name{position:absolute; left:14px; bottom:11px; right:14px; z-index:4; font-family:var(--mono); font-size:11px; color:var(--ink); display:flex; justify-content:space-between; align-items:center;}
+.gal-name .pair{color:var(--faint); opacity:0; transition:opacity .3s ease;}
+.gal-card:hover .gal-name .pair{opacity:1;}
+.mini-page{position:absolute; inset:0; background:#fff; box-shadow:var(--paper-shadow); border-radius:1px; padding:13%; overflow:hidden;}
+@media (max-width:980px){ .gal-grid{grid-template-columns:repeat(2,1fr);} }
+
+/* modal */
+.modal-back{
+  position:fixed; inset:0; z-index:100; background:rgba(20,22,28,.55);
+  display:grid; place-items:center; padding:40px 24px; opacity:0; pointer-events:none; transition:opacity .25s ease;
+}
+.modal-back.open{opacity:1; pointer-events:auto;}
+.modal{
+  background:var(--bg); border:1px solid var(--line-2); border-radius:6px; max-width:880px; width:100%;
+  max-height:88vh; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
+  transform:translateY(10px) scale(.99); transition:transform .25s ease;
+}
+.modal-back.open .modal{transform:none;}
+.modal-pdf{background:var(--bg-2); padding:30px; display:grid; place-items:center; border-right:1px solid var(--line);}
+.modal-info{padding:34px 32px; display:flex; flex-direction:column; overflow:auto;}
+.modal-info .eyebrow{margin-bottom:14px;}
+.modal-info h3{font-size:24px; margin-bottom:6px;}
+.modal-info .desc{color:var(--muted); font-size:15px; margin:8px 0 22px; line-height:1.5;}
+.modal-close{position:absolute; top:14px; right:16px; z-index:110;}
+.modal-codeblock{margin-top:auto;}
+.modal-codeblock .label{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; display:block;}
+@media (max-width:720px){ .modal{grid-template-columns:1fr; max-height:92vh; overflow:auto;} .modal-pdf{border-right:none; border-bottom:1px solid var(--line);} }
+
+/* ===========================================================
+   §5 POSITIONING TABLE
+   =========================================================== */
+/* Outer wrap that enables horizontal scrolling on narrow viewports (mobile).
+   `cmp` itself keeps its natural min-width so thead cells don't wrap or
+   crush below the long text in the body rows. */
+.cmp-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
+.cmp-scroll::-webkit-scrollbar{height:6px;}
+.cmp-scroll::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:3px;}
+.cmp{width:100%; min-width:760px; border-collapse:collapse; font-size:14.5px; margin-top:34px; border:1px solid var(--line);}
+.cmp th,.cmp td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
+.cmp thead th{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted); font-weight:500; background:var(--bg-2); white-space:nowrap;}
+.cmp tbody th{font-family:var(--mono); font-size:12.5px; color:var(--faint); font-weight:500; text-transform:uppercase; letter-spacing:.06em; width:120px;}
+.cmp .col-gc{background:var(--accent-soft);}
+.cmp thead .col-gc{color:var(--ink); font-weight:700;}
+.cmp td.col-gc{color:var(--ink); font-weight:500;}
+.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:none;}
+.cmp-note{font-size:19px; color:var(--muted); max-width:60ch;}
+@media (max-width:820px){ .cmp{display:block; overflow-x:auto; white-space:nowrap;} }
+
+/* ===========================================================
+   §6 ENGINEERING CULTURE
+   =========================================================== */
+.eng-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px;}
+.eng-card{border:1px solid var(--line); border-radius:5px; background:var(--paper); padding:24px 22px; display:flex; flex-direction:column; transition:border-color .2s ease;}
+.eng-card:hover{border-color:var(--line-2);}
+.eng-card h3{font-size:17px; margin-bottom:10px; display:flex; align-items:flex-start; gap:10px;}
+.eng-card .glyph{width:22px; height:22px; flex:none; color:var(--ink); margin-top:1px;}
+.eng-card p{font-size:13.5px; color:var(--muted); line-height:1.5;}
+.eng-card .mini-code{font-family:var(--mono); font-size:11px; color:var(--code-text); background:var(--code-bg); border:1px solid var(--line); border-radius:3px; padding:11px 12px; margin-top:14px; line-height:1.6; overflow:auto;}
+.changelog{margin-top:14px; list-style:none; padding:0;}
+.changelog li{display:flex; gap:11px; padding:7px 0; border-top:1px dashed var(--line); font-size:12.5px;}
+.changelog li:first-child{border-top:none;}
+.changelog .ver{font-family:var(--mono); color:var(--ink); font-weight:600; flex:none; width:50px;}
+.changelog .msg{color:var(--muted);}
+.snap-viz{margin-top:14px; border:1px solid var(--line); border-radius:3px; overflow:hidden; font-family:var(--mono); font-size:11px;}
+.snap-viz .row{display:flex; align-items:center; gap:8px; padding:7px 11px; border-top:1px solid var(--line);}
+.snap-viz .row:first-child{border-top:none;}
+.snap-viz .ok{color:var(--ok);} .snap-viz .add{color:#9B5C2E;}
+.snap-viz .sign{width:14px; text-align:center;}
+@media (max-width:980px){ .eng-grid{grid-template-columns:repeat(2,1fr);} }
+@media (max-width:560px){ .eng-grid{grid-template-columns:1fr;} }
+
+/* ===========================================================
+   §7 CTA + footer
+   =========================================================== */
+.cta{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
+.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
+.cta-card{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:34px;}
+.cta-card h3{font-size:22px; margin-bottom:8px;}
+.cta-card .sub{color:var(--muted); font-size:15px; margin-bottom:22px;}
+.dep-tabs{display:flex; gap:4px; margin-bottom:0;}
+.dep-tab{font-family:var(--mono); font-size:12px; padding:7px 13px; border:1px solid var(--line); border-bottom:none; border-radius:3px 3px 0 0; cursor:pointer; color:var(--muted); background:var(--bg-2);}
+.dep-tab.active{background:var(--code-bg); color:var(--ink); border-color:var(--line);}
+.dep-box{position:relative; border:1px solid var(--line); border-radius:0 4px 4px 4px; background:var(--code-bg); padding:16px 18px; font-family:var(--mono); font-size:12.5px; color:var(--code-text); line-height:1.6; overflow:auto;}
+.copybtn{position:absolute; top:10px; right:10px; font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:5px 10px; cursor:pointer; transition:color .2s ease, border-color .2s ease;}
+.copybtn:hover{color:var(--ink); border-color:var(--line-2);}
+.cta-links{display:flex; flex-direction:column; gap:11px; margin-top:22px;}
+.cta-links a{display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:14.5px; width:fit-content;}
+.cta-links a:hover{text-decoration:underline; text-underline-offset:3px;}
+.person{display:flex; flex-direction:column; gap:6px; font-size:15px;}
+.person .name{font-weight:600; color:var(--ink); font-size:18px;}
+.person .row{display:flex; gap:10px; align-items:center; color:var(--muted); font-family:var(--mono); font-size:13px;}
+@media (max-width:820px){ .cta-grid{grid-template-columns:1fr;} }
+
+.footer{padding:44px 0;}
+.footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--faint); font-family:var(--mono);}
+.footer-links{display:flex; gap:20px; flex-wrap:wrap;}
+.footer-links a:hover{color:var(--ink);}
+
+/* reveal-on-scroll */
+.rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
+.rv.in{opacity:1; transform:none;}
+@media (prefers-reduced-motion: reduce){
+  .rv{opacity:1 !important; transform:none !important;}
+  .pipe-step{opacity:1 !important; transform:none !important;}
+}
+
+
+/* ---- additions for the Next.js component build ---- */
+/* Monaco line-highlight decorations (chip hover) */
+.mono-hl{background:rgba(155,92,46,.16) !important;}
+.mono-hl-margin{background:#9B5C2E; width:3px !important; left:0 !important; margin-left:0;}
+/* gallery thumbnails: let paper pages fill the card */
+.gal-cv .paper-page,.gal-cl .paper-page{max-width:none !important; width:100%; height:100%; aspect-ratio:auto;}
+/* a no-op highlight class so hl-none is harmless */
+.hl-none{}
+.pdf-canvas{max-width:100%;}
diff --git a/site/app/layout.tsx b/site/app/layout.tsx
new file mode 100644
index 00000000..403a3f1e
--- /dev/null
+++ b/site/app/layout.tsx
@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { Inter, JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-inter",
+  display: "swap",
+});
+const mono = JetBrains_Mono({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "GraphCompose — Declarative Java DSL for business PDFs",
+  description:
+    "Declarative Java DSL for cinematic business PDFs. Two-pass deterministic layout, snapshot-tested in CI. MIT. Renders via Apache PDFBox 3.0.",
+  metadataBase: new URL("https://graphcompose.dev"),
+  openGraph: {
+    title: "GraphCompose",
+    description: "Declarative Java DSL for cinematic business PDFs.",
+    type: "website",
+  },
+};
+
+// Set the theme before first paint to avoid a flash of the wrong theme.
+const themeInit = `(function(){try{var t=localStorage.getItem('gc-theme');if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();`;
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html
+      lang="en"
+      data-theme="light"
+      className={`${inter.variable} ${mono.variable}`}
+      suppressHydrationWarning
+    >
+      <body>
+        <script dangerouslySetInnerHTML={{ __html: themeInit }} />
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/site/app/page.tsx b/site/app/page.tsx
new file mode 100644
index 00000000..22ee2321
--- /dev/null
+++ b/site/app/page.tsx
@@ -0,0 +1,27 @@
+import TopBar from "@/components/TopBar";
+import Hero from "@/components/Hero";
+import Playground from "@/components/Playground";
+import Pipeline from "@/components/Pipeline";
+import Gallery from "@/components/Gallery";
+import Positioning from "@/components/Positioning";
+import Engineering from "@/components/Engineering";
+import Cta from "@/components/Cta";
+import Footer from "@/components/Footer";
+
+export default function Page() {
+  return (
+    <>
+      <TopBar />
+      <main id="top">
+        <Hero />          {/* §01 */}
+        <Cta />           {/* §02 — install snippet right after the hero so visitors can copy deps without scrolling past 6 sections */}
+        <Playground />    {/* §03 */}
+        <Pipeline />      {/* §04 */}
+        <Gallery />       {/* §05 — unified showcase: 16 CV pairs + 15 letters + 5 templates + 13 features + 3 flagships */}
+        <Positioning />   {/* §06 */}
+        <Engineering />   {/* §07 */}
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/site/components/Cta.tsx b/site/components/Cta.tsx
new file mode 100644
index 00000000..4b448b1e
--- /dev/null
+++ b/site/components/Cta.tsx
@@ -0,0 +1,82 @@
+"use client";
+import { useState } from "react";
+import { DEPS, type DepKind } from "@/lib/deps";
+import Reveal from "./Reveal";
+
+export default function Cta() {
+  const [dep, setDep] = useState<DepKind>("maven");
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    const text = DEPS[dep];
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text; document.body.appendChild(ta); ta.select();
+      try { document.execCommand("copy"); } catch {}
+      document.body.removeChild(ta);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1400);
+  }
+
+  return (
+    <section className="section cta" id="use">
+      <div className="wrap">
+        <Reveal style={{ textAlign: "center", marginBottom: 50 }}>
+          <div className="eyebrow" style={{ justifyContent: "center" }}>§02 · Get started</div>
+          <h2>Add it, or build it with me.</h2>
+        </Reveal>
+        <Reveal className="cta-grid">
+
+          <div className="cta-card">
+            <h3>Use it now</h3>
+            <p className="sub">Java 17+. On Maven Central. MIT.</p>
+            <div className="dep-tabs">
+              <button className={"dep-tab" + (dep === "maven" ? " active" : "")} onClick={() => setDep("maven")}>Maven</button>
+              <button className={"dep-tab" + (dep === "gradle" ? " active" : "")} onClick={() => setDep("gradle")}>Gradle</button>
+            </div>
+            <div className="dep-box">
+              <button className="copybtn" onClick={copy}>{copied ? "Copied" : "Copy"}</button>
+              <pre style={{ margin: 0 }}>{DEPS[dep]}</pre>
+            </div>
+            <div className="cta-links">
+              <a href="https://github.com/DemchaAV/GraphCompose/tree/main/examples" target="_blank" rel="noopener">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M5 4h14v16H5zM9 8h6M9 12h6M9 16h4" strokeLinecap="round" /></svg>
+                Examples gallery
+              </a>
+              <a href="https://github.com/DemchaAV/GraphCompose/blob/develop/docs/operations/test-your-document.md" target="_blank" rel="noopener">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M5 4 19 12 5 20Z" strokeLinejoin="round" /></svg>
+                Testing quickstart
+              </a>
+              <a href="https://javadoc.io/doc/io.github.demchaav/graph-compose" target="_blank" rel="noopener">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M4 6h16M4 12h16M4 18h10" strokeLinecap="round" /></svg>
+                JavaDocs
+              </a>
+            </div>
+          </div>
+
+          <div className="cta-card">
+            <h3>Work with me</h3>
+            <p className="sub">Need a documented PDF pipeline in your Java backend? Let&apos;s talk.</p>
+            <div className="person">
+              <span className="name">Artem Demchyshyn</span>
+              <span style={{ color: "var(--muted)", fontSize: 14 }}>Author · maintainer of GraphCompose</span>
+              <div className="row" style={{ marginTop: 8 }}>
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 1.5A10.5 10.5 0 0 0 8.68 22c.52.1.71-.23.71-.5v-1.7c-2.78.5-3.5-1.18-3.5-1.18-.5-1.2-1.16-1.5-1.16-1.5-.95-.65.07-.64.07-.64 1.05.08 1.6 1.08 1.6 1.08.94 1.6 2.46 1.14 3.06.87.1-.68.37-1.14.66-1.4-2.31-.26-4.74-1.16-4.74-5.14 0-1.13.4-2.06 1.07-2.79-.11-.26-.46-1.32.1-2.75 0 0 .87-.28 2.85 1.06a9.9 9.9 0 0 1 5.18 0c1.98-1.34 2.85-1.06 2.85-1.06.56 1.43.21 2.49.1 2.75.67.73 1.07 1.66 1.07 2.79 0 3.99-2.43 4.87-4.75 5.13.38.32.72.95.72 1.92v2.85c0 .27.19.61.72.5A10.5 10.5 0 0 0 12 1.5Z" /></svg>
+                github.com/DemchaAV
+              </div>
+              <div className="row">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
+                demchishynartem@gmail.com
+              </div>
+            </div>
+            <a className="btn" style={{ marginTop: 26, width: "fit-content" }} href="mailto:demchishynartem@gmail.com">Start a conversation</a>
+          </div>
+
+        </Reveal>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/Engineering.tsx b/site/components/Engineering.tsx
new file mode 100644
index 00000000..b29646f4
--- /dev/null
+++ b/site/components/Engineering.tsx
@@ -0,0 +1,72 @@
+import Reveal from "./Reveal";
+
+const CHANGELOG: [string, string][] = [
+  ["1.6.8", "Markdown links in project titles · 4 contemporary BusinessTheme presets · logback CVE-2026-9828 fix"],
+  ["1.6.7", "Transitive dependency cleanup (Kotlin/flexmark/jackson narrowed) · registry-cache fix"],
+  ["1.6.6", "Maven Central debut as io.github.demchaav:graph-compose · signed jars · API stability policy"],
+  ["1.6.0", "Layered templates: data → theme → components → widgets → presets"],
+  ["1.5.0", "Two-pass layout snapshot harness · semantic backend SPI"],
+];
+
+export default function Engineering() {
+  return (
+    <section className="section" id="engineering" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
+      <div className="wrap">
+        <Reveal>
+          <div className="eyebrow">§07 · Engineering culture</div>
+          <h2 style={{ maxWidth: "20ch" }}>Built like infrastructure, not a demo.</h2>
+        </Reveal>
+        <Reveal className="eng-grid">
+
+          <div className="eng-card">
+            <h3>
+              <svg className="glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 9h18M8 14l2.5 2.5L16 11" strokeLinecap="round" strokeLinejoin="round" /></svg>
+              Snapshot-tested layout
+            </h3>
+            <p>Layout snapshots live in the PR. A regression shows up in the diff before a single byte ships.</p>
+            <div className="snap-viz" aria-hidden="true">
+              <div className="row"><span className="sign ok">✓</span> invoice.layout.json</div>
+              <div className="row"><span className="sign ok">✓</span> cv-modern.layout.json</div>
+              <div className="row"><span className="sign add">±</span> cover-letter.layout.json <span style={{ color: "var(--faint)" }}>· 2 lines</span></div>
+            </div>
+          </div>
+
+          <div className="eng-card">
+            <h3>
+              <svg className="glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3v18M12 7h6M12 12h4M12 17h7" strokeLinecap="round" /><circle cx="6" cy="7" r="2" /><circle cx="6" cy="12" r="2" /><circle cx="6" cy="17" r="2" /></svg>
+              Small sequential releases
+            </h3>
+            <p>Tight, readable increments. One line of changelog each.</p>
+            <ul className="changelog">
+              {CHANGELOG.map(([ver, msg]) => (
+                <li key={ver}><span className="ver">{ver}</span><span className="msg">{msg}</span></li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="eng-card">
+            <h3>
+              <svg className="glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M8 4H5a2 2 0 0 0-2 2v3M16 4h3a2 2 0 0 1 2 2v3M8 20H5a2 2 0 0 1-2-2v-3M16 20h3a2 2 0 0 0 2-2v-3" strokeLinecap="round" /><circle cx="12" cy="12" r="3" /></svg>
+              Open SPI
+            </h3>
+            <p>Add your own primitives over the engine — register a node, supply a render handler.</p>
+            <pre className="mini-code">{`class Barcode implements
+  NodeDefinition,
+  PdfFragmentRenderHandler { … }`}</pre>
+          </div>
+
+          <div className="eng-card">
+            <h3>
+              <svg className="glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z" strokeLinejoin="round" /><path d="M9.5 12l1.8 1.8L15 10" strokeLinecap="round" strokeLinejoin="round" /></svg>
+              Documented thread-safety
+            </h3>
+            <p>A written contract, not folklore. Internals marked, failures typed.</p>
+            <pre className="mini-code">{`@Internal // not API surface
+throws DocumentRenderingException`}</pre>
+          </div>
+
+        </Reveal>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/Footer.tsx b/site/components/Footer.tsx
new file mode 100644
index 00000000..ed934031
--- /dev/null
+++ b/site/components/Footer.tsx
@@ -0,0 +1,15 @@
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="wrap">
+        <span>© 2026 GraphCompose · MIT License</span>
+        <nav className="footer-links" aria-label="Project links">
+          <a href="https://github.com/DemchaAV/GraphCompose/blob/main/CHANGELOG.md" target="_blank" rel="noopener">CHANGELOG</a>
+          <a href="https://github.com/DemchaAV/GraphCompose/tree/main/docs/adr" target="_blank" rel="noopener">ADR</a>
+          <a href="https://github.com/DemchaAV/GraphCompose/blob/main/SECURITY.md" target="_blank" rel="noopener">Security policy</a>
+          <a href="https://github.com/DemchaAV/GraphCompose/blob/main/LICENSE" target="_blank" rel="noopener">MIT</a>
+        </nav>
+      </div>
+    </footer>
+  );
+}
diff --git a/site/components/Gallery.tsx b/site/components/Gallery.tsx
new file mode 100644
index 00000000..ec8a132a
--- /dev/null
+++ b/site/components/Gallery.tsx
@@ -0,0 +1,412 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { GALLERY, type TemplateSpec } from "@/lib/gallery";
+import { PaperLetter } from "./PaperPage";
+import { highlightJava } from "@/lib/highlight";
+import Reveal from "./Reveal";
+
+/*
+ * Unified Showcase + Gallery (since v1.6.8). Reads the same
+ * `/examples.json` manifest the legacy `docs/index.html` consumed
+ * — 53 entries across Templates (CV, cover letters, invoice,
+ * proposal, schedule), Features, and Flagships — but renders them
+ * with the new card / hover-paired-letter visual layer kept from
+ * the draft.
+ *
+ * Two kinds of cards rendered in the same grid:
+ *
+ *   1. **CV preset cards** (16) — keep the hover-paired-letter
+ *      animation from the original Gallery. CV image on top; the
+ *      paired Letter peeks out behind it on hover.
+ *
+ *   2. **Everything else** (cover letters / invoice / proposal /
+ *      schedule / features / flagships) — single-image cards with
+ *      the same hover lift but no paired overlay.
+ *
+ * Clicking any card opens a modal that:
+ *   - Embeds the real rendered PDF in an iframe (browser-native
+ *     viewer; scrollable, multi-page).
+ *   - Shows title + category breadcrumb + description + tags.
+ *   - Links to the example's Java source on GitHub.
+ *   - For CV cards, links to the paired letter's source too.
+ *
+ * The hand-curated CV / Letter pair list still lives in
+ * `lib/gallery.ts` — it's the source of truth for the paired-
+ * hover affordance and the accent / variant CSS-fallback that
+ * shows when an image asset is missing. The manifest fills in
+ * descriptions, tags, and source-code URLs that would otherwise
+ * be hard-coded.
+ */
+
+interface ManifestExample {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  pdf: string;
+  screenshot: string;
+  code: string;
+}
+interface ManifestGroup {
+  id: string;
+  label: string;
+  examples: ManifestExample[];
+}
+interface ManifestCategory {
+  id: string;
+  label: string;
+  groups: ManifestGroup[];
+}
+interface Manifest {
+  categories: ManifestCategory[];
+}
+
+type Filter = "all" | "cv" | "coverletter" | "templates" | "features" | "flagships";
+
+/** A unified card model — every grid item normalises to this. */
+interface Card {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  pdfUrl: string;
+  imageUrl: string;
+  sourceUrl: string;
+  categoryLabel: string;   // "Templates · CV / Resume"
+  /** Filter bucket the tab pills test against. */
+  filter: Exclude<Filter, "all">;
+  /** Curated metadata for CV cards only (paired letter overlay,
+   *  accent colour for the CSS fallback). Null for non-CV. */
+  cv: TemplateSpec | null;
+}
+
+const showcaseUrl = (relative: string) =>
+  `/showcase/${relative.replace(/^showcase\//, "")}`;
+
+function buildCards(manifest: Manifest | null): Card[] {
+  if (!manifest) return [];
+  const cvSpecByTitle = new Map(GALLERY.map((g) => [g.name, g]));
+  const out: Card[] = [];
+  for (const cat of manifest.categories) {
+    for (const grp of cat.groups) {
+      for (const ex of grp.examples) {
+        // CV filter bucket maps to `cv` group inside Templates.
+        // Cover letter bucket likewise.
+        let filter: Card["filter"];
+        if (cat.id === "templates" && grp.id === "cv") filter = "cv";
+        else if (cat.id === "templates" && grp.id === "coverletter") filter = "coverletter";
+        else if (cat.id === "templates") filter = "templates";
+        else if (cat.id === "features") filter = "features";
+        else filter = "flagships";
+
+        // Map CV cards to their curated TemplateSpec by deriving
+        // PascalCase from the manifest title.
+        let cv: TemplateSpec | null = null;
+        if (filter === "cv") {
+          const guessName = ex.title.replace(/\s+/g, "");
+          cv = cvSpecByTitle.get(guessName) ?? null;
+        }
+
+        out.push({
+          id: ex.id,
+          title: ex.title,
+          description: ex.description,
+          tags: ex.tags,
+          pdfUrl: showcaseUrl(ex.pdf),
+          imageUrl: showcaseUrl(ex.screenshot),
+          sourceUrl: ex.code,
+          categoryLabel: `${cat.label} · ${grp.label}`,
+          filter,
+          cv,
+        });
+      }
+    }
+  }
+  return out;
+}
+
+export default function Gallery() {
+  const [manifest, setManifest] = useState<Manifest | null>(null);
+  const [openCard, setOpenCard] = useState<Card | null>(null);
+  const [filter, setFilter] = useState<Filter>("all");
+  const [search, setSearch] = useState("");
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const closeBtn = useRef<HTMLButtonElement>(null);
+  const lastFocus = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    fetch("/examples.json", { cache: "force-cache" })
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json() as Promise<Manifest>;
+      })
+      .then(setManifest)
+      .catch((e) => setLoadError(String(e)));
+  }, []);
+
+  const close = useCallback(() => {
+    setOpenCard(null);
+    document.body.style.overflow = "";
+    lastFocus.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (openCard) {
+      document.body.style.overflow = "hidden";
+      closeBtn.current?.focus();
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && openCard) close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [openCard, close]);
+
+  const allCards = useMemo(() => buildCards(manifest), [manifest]);
+
+  const counts = useMemo(() => {
+    const n: Record<Filter, number> = { all: 0, cv: 0, coverletter: 0, templates: 0, features: 0, flagships: 0 };
+    for (const c of allCards) {
+      n.all += 1;
+      n[c.filter] += 1;
+    }
+    return n;
+  }, [allCards]);
+
+  const visible = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return allCards.filter((c) => {
+      if (filter !== "all" && c.filter !== filter) return false;
+      if (!q) return true;
+      const hay = [c.title, c.description, c.categoryLabel, ...c.tags].join(" ").toLowerCase();
+      return hay.includes(q);
+    });
+  }, [allCards, filter, search]);
+
+  return (
+    <section className="section" id="templates" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
+      <div className="wrap">
+        <Reveal>
+          <div className="eyebrow">§05 · Showcase &amp; templates gallery</div>
+          <h2>
+            {counts.all > 0 ? `${counts.all} generated PDFs you can inspect.` : "Generated PDFs you can inspect."}
+          </h2>
+          <p className="lead" style={{ marginTop: 16 }}>
+            Every card below is a real example file in{" "}
+            <a href="https://github.com/DemchaAV/GraphCompose/tree/main/examples" target="_blank" rel="noopener"
+               style={{ borderBottom: "1px dashed currentColor" }}>
+              <span className="mono" style={{ fontSize: 15 }}>examples/</span>
+            </a>{" "}
+            rendered by GraphCompose itself. Click a card to preview the rendered PDF and jump into its source.
+            CV cards keep the hover-to-see-paired-letter affordance from earlier drafts.
+          </p>
+        </Reveal>
+
+        <Reveal style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "center", marginTop: 28, marginBottom: 28 }}>
+          <input
+            type="search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search by title, tag, or keyword…"
+            aria-label="Search showcase examples"
+            style={{
+              flex: "1 1 280px",
+              minWidth: 260,
+              padding: "10px 14px",
+              border: "1px solid var(--line)",
+              borderRadius: 8,
+              background: "var(--paper)",
+              color: "var(--ink)",
+              fontSize: 14,
+            }}
+          />
+          <div role="tablist" aria-label="Filter by category" style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+            {([
+              ["all",         `All (${counts.all})`],
+              ["cv",          `CV (${counts.cv})`],
+              ["coverletter", `Cover letters (${counts.coverletter})`],
+              ["templates",   `Templates (${counts.templates})`],
+              ["features",    `Features (${counts.features})`],
+              ["flagships",   `Flagships (${counts.flagships})`],
+            ] as [Filter, string][]).map(([id, label]) => (
+              <button
+                key={id}
+                role="tab"
+                aria-selected={filter === id}
+                onClick={() => setFilter(id)}
+                style={{
+                  padding: "8px 14px",
+                  border: "1px solid var(--line)",
+                  borderRadius: 999,
+                  background: filter === id ? "var(--ink)" : "var(--paper)",
+                  color: filter === id ? "var(--paper)" : "var(--ink)",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  fontWeight: filter === id ? 600 : 400,
+                  transition: "background .15s, color .15s",
+                }}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        </Reveal>
+
+        {loadError && (
+          <p className="mono" style={{ color: "var(--faint)", textAlign: "center", padding: 40 }}>
+            Could not load showcase manifest: {loadError}
+          </p>
+        )}
+
+        {!manifest && !loadError && (
+          <p className="mono" style={{ color: "var(--faint)", textAlign: "center", padding: 40 }}>
+            Loading 50+ examples…
+          </p>
+        )}
+
+        {manifest && visible.length === 0 && (
+          <p className="mono" style={{ color: "var(--faint)", textAlign: "center", padding: 40 }}>
+            No examples match the current filter.
+          </p>
+        )}
+
+        {manifest && visible.length > 0 && (
+          <Reveal className="gal-grid" as="div" role="list">
+            {visible.map((card) => {
+              const isCv = card.filter === "cv" && card.cv !== null;
+              return (
+                <button
+                  key={card.id}
+                  className="gal-card"
+                  role="listitem"
+                  aria-label={`${card.title} — preview`}
+                  onClick={(e) => {
+                    lastFocus.current = e.currentTarget;
+                    setOpenCard(card);
+                  }}
+                >
+                  <div className="gal-thumb">
+                    {isCv && card.cv?.letterImage ? (
+                      <>
+                        {/* Paired letter layer (peeks on hover via the gal-cl
+                            CSS in app/globals.css). */}
+                        <div className="gal-cl">
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img src={card.cv.letterImage} alt={`${card.cv.name}Letter rendered preview`}
+                               loading="lazy" decoding="async"
+                               style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
+                        </div>
+                        <div className="gal-cv">
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img src={card.imageUrl} alt={`${card.title} rendered preview`}
+                               loading="lazy" decoding="async"
+                               style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
+                        </div>
+                      </>
+                    ) : isCv ? (
+                      // CV but no paired letter (MinimalUnderlined) — fall back
+                      // to the legacy PaperLetter CSS sketch on the back layer.
+                      <>
+                        <div className="gal-cl">
+                          <PaperLetter name={card.cv!.name} accent={card.cv!.accent} variant={card.cv!.variant} />
+                        </div>
+                        <div className="gal-cv">
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img src={card.imageUrl} alt={`${card.title} rendered preview`}
+                               loading="lazy" decoding="async"
+                               style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
+                        </div>
+                      </>
+                    ) : (
+                      // Non-CV card — single image, no paired overlay. The
+                      // gal-cv layer sits on top by default; the empty gal-cl
+                      // layer is omitted so we get the simpler look.
+                      <div className="gal-cv" style={{ position: "relative" }}>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={card.imageUrl} alt={`${card.title} rendered preview`}
+                             loading="lazy" decoding="async"
+                             style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
+                      </div>
+                    )}
+                  </div>
+                  <div className="gal-name">
+                    <span>{card.title}</span>
+                    <span className="pair">
+                      {isCv
+                        ? (card.cv?.letterImage ? "+ letter" : "no letter")
+                        : card.categoryLabel.split(" · ")[0]}
+                    </span>
+                  </div>
+                </button>
+              );
+            })}
+          </Reveal>
+        )}
+      </div>
+
+      <div className={"modal-back" + (openCard ? " open" : "")} role="dialog" aria-modal="true"
+           aria-labelledby="modalTitle" onClick={(e) => { if (e.target === e.currentTarget) close(); }}>
+        {openCard && (
+          <div className="modal" style={{ position: "relative" }}>
+            <button className="iconbtn modal-close" ref={closeBtn} onClick={close} aria-label="Close">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 6l12 12M18 6 6 18" strokeLinecap="round" /></svg>
+            </button>
+            <div className="modal-pdf">
+              {/* Real rendered PDF embedded via the browser's native
+                  viewer. Falls back to the static screenshot if the
+                  browser does not support inline PDF rendering. */}
+              <object data={openCard.pdfUrl} type="application/pdf"
+                      style={{ width: "100%", height: "100%", minHeight: 500, border: "none", display: "block" }}>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={openCard.imageUrl} alt={`${openCard.title} rendered preview`}
+                     style={{ width: "100%", height: "auto", display: "block" }} />
+              </object>
+            </div>
+            <div className="modal-info">
+              <div className="eyebrow">{openCard.categoryLabel}</div>
+              <h3 id="modalTitle">{openCard.title}</h3>
+              <p className="desc">{openCard.description}</p>
+              {openCard.tags.length > 0 && (
+                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: -6, marginBottom: 6 }}>
+                  {openCard.tags.map((t) => (
+                    <span key={t} className="mono" style={{
+                      fontSize: 10.5,
+                      padding: "2px 8px",
+                      background: "var(--bg-2)",
+                      border: "1px solid var(--line)",
+                      borderRadius: 999,
+                      color: "var(--faint)",
+                    }}>{t}</span>
+                  ))}
+                </div>
+              )}
+              {openCard.cv && (
+                <div className="modal-codeblock">
+                  <span className="label">Create it</span>
+                  <pre className="code" style={{ padding: "15px 16px" }}
+                       dangerouslySetInnerHTML={{ __html: highlightJava(openCard.cv.code) }} />
+                </div>
+              )}
+              <div className="cta-links" style={{ marginTop: 18 }}>
+                <a href={openCard.pdfUrl} target="_blank" rel="noopener">
+                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M5 4 19 12 5 20Z" strokeLinejoin="round" /></svg>
+                  Open PDF in a new tab
+                </a>
+                <a href={openCard.sourceUrl} target="_blank" rel="noopener">
+                  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 1.5A10.5 10.5 0 0 0 8.68 22c.52.1.71-.23.71-.5v-1.7c-2.78.5-3.5-1.18-3.5-1.18-.5-1.2-1.16-1.5-1.16-1.5-.95-.65.07-.64.07-.64 1.05.08 1.6 1.08 1.6 1.08.94 1.6 2.46 1.14 3.06.87.1-.68.37-1.14.66-1.4-2.31-.26-4.74-1.16-4.74-5.14 0-1.13.4-2.06 1.07-2.79-.11-.26-.46-1.32.1-2.75 0 0 .87-.28 2.85 1.06a9.9 9.9 0 0 1 5.18 0c1.98-1.34 2.85-1.06 2.85-1.06.56 1.43.21 2.49.1 2.75.67.73 1.07 1.66 1.07 2.79 0 3.99-2.43 4.87-4.75 5.13.38.32.72.95.72 1.92v2.85c0 .27.19.61.72.5A10.5 10.5 0 0 0 12 1.5Z" /></svg>
+                  View source on GitHub
+                </a>
+                {openCard.cv?.letterSource && (
+                  <a href={openCard.cv.letterSource} target="_blank" rel="noopener">
+                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M4 6h16v12H4zM4 6l8 6 8-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
+                    Paired letter source
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/Hero.tsx b/site/components/Hero.tsx
new file mode 100644
index 00000000..a40ddb2d
--- /dev/null
+++ b/site/components/Hero.tsx
@@ -0,0 +1,109 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { highlightJava } from "@/lib/highlight";
+
+// Compact teaser of the canonical DSL — mirrors the README hello
+// snippet but trimmed to keep the hero card under 10 lines. Real
+// imports + DocumentSession lifecycle live in the Playground sample.
+const HERO_CODE = `BusinessTheme theme = BusinessTheme.modern();
+
+doc.pageFlow(page -> page
+    .addSection("Q3 review", s -> s
+        .softPanel(theme.palette().surfaceMuted(), 10, 14)
+        .accentLeft(theme.palette().accent(), 4)
+        .addParagraph(p -> p
+            .text("Q3 Engineering Review")
+            .textStyle(theme.text().h1()))));
+
+doc.buildPdf();`;
+
+export default function Hero() {
+  const dashRef = useRef<SVGLineElement>(null);
+
+  useEffect(() => {
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduce || !dashRef.current) return;
+    let off = 0;
+    let raf = 0;
+    const tick = () => {
+      off -= 0.6;
+      if (off < -54) off = 0;
+      dashRef.current?.setAttribute("stroke-dashoffset", off.toFixed(1));
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <section className="section hero">
+      <div className="wrap hero-grid">
+        <div>
+          <div className="eyebrow">Java 17+ · MIT · Maven Central</div>
+          <h1>
+            Declarative Java DSL for <span className="accentword">cinematic</span> business PDFs.
+          </h1>
+          <p className="lead">
+            You describe what the document says — sections, tables, lists, layers, themes. A two-pass
+            deterministic engine measures, paginates, and renders it through Apache&nbsp;PDFBox&nbsp;3.0.
+          </p>
+          <div className="hero-cta">
+            <a className="btn" href="#playground">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 4 19 12 5 20Z" strokeLinejoin="round" /></svg>
+              Try the live playground
+            </a>
+            <a className="btn ghost" href="https://github.com/DemchaAV/GraphCompose" target="_blank" rel="noopener">
+              View on GitHub
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M7 17 17 7M9 7h8v8" strokeLinecap="round" strokeLinejoin="round" /></svg>
+            </a>
+          </div>
+          <div className="hero-meta">
+            <span><b>io.github.demchaav:graph-compose:1.6.8</b></span>
+            <span>Two-pass layout</span>
+            <span>Snapshot-tested</span>
+          </div>
+        </div>
+
+        <div className="hero-split">
+          <div className="hero-codewrap">
+            <div className="win-dots"><i /><i /><i /><span className="win-title">Report.java</span></div>
+            <pre className="code" style={{ padding: "18px 20px", margin: 0 }}
+                 dangerouslySetInnerHTML={{ __html: highlightJava(HERO_CODE) }} />
+          </div>
+
+          <div className="flowchan" aria-hidden="true">
+            <svg width="62" height="120" viewBox="0 0 62 120" fill="none">
+              <line x1="2" y1="60" x2="52" y2="60" stroke="var(--line-2)" strokeWidth="1.5" strokeDasharray="3 5" />
+              <line ref={dashRef} x1="2" y1="60" x2="52" y2="60" stroke="var(--ink)" strokeWidth="1.8" strokeDasharray="14 40" strokeDashoffset="0" />
+              <path d="M48 54 L58 60 L48 66" stroke="var(--ink)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </div>
+
+          <div className="pdfframe" style={{ padding: 18 }}>
+            <span className="pdf-badge"><span className="dot" />PDFBox 3.0</span>
+            <div className="paper-page" style={{ maxWidth: 300 }}>
+              <div className="pp-strip" />
+              <div className="pp-accent" />
+              <div className="pp-h1">Q3 Engineering Review</div>
+              <div className="pp-sub">GraphCompose · Confidential</div>
+              <div className="pp-rule" />
+              <div className="pp-soft">
+                <div className="pp-line l" /><div className="pp-line m" /><div className="pp-line s" />
+              </div>
+              <div className="pp-ey">Throughput metrics</div>
+              <table className="pp-table">
+                <tbody>
+                  <tr><td>PDF render p50</td><td>78 ms</td></tr>
+                  <tr><td>PDF render p95</td><td>121 ms</td></tr>
+                  <tr><td>Layout snapshots</td><td>312 pass</td></tr>
+                </tbody>
+              </table>
+              <div className="pp-rule" />
+              <div className="pp-line m" /><div className="pp-line l" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/PaperPage.tsx b/site/components/PaperPage.tsx
new file mode 100644
index 00000000..dca73bbc
--- /dev/null
+++ b/site/components/PaperPage.tsx
@@ -0,0 +1,149 @@
+import React from "react";
+
+/* =====================================================================
+   Paper pages — CSS recreations of BusinessTheme PDF output.
+   These render instantly and are the FALLBACK shown by <PdfPreview>
+   until a real pre-rendered PDF exists in /public/previews.
+   Class names map to .paper-page / .pp-* rules in globals.css.
+   ===================================================================== */
+
+type Variant = "strip" | "sidebar" | "center" | "slab";
+
+export function PaperHello() {
+  return (
+    <div className="paper-page" style={{ maxWidth: 300 }}>
+      <div className="pp-accent" style={{ width: "34%" }} />
+      <div className="pp-h1">Hello, GraphCompose.</div>
+      <div className="pp-sub">Generated · BusinessTheme</div>
+      <div className="pp-rule" />
+      <div className="pp-line l" />
+      <div className="pp-line l" />
+      <div className="pp-line m" />
+      <div style={{ height: 10 }} />
+      <div className="pp-line m" />
+      <div className="pp-line s" />
+    </div>
+  );
+}
+
+export function PaperInvoice() {
+  return (
+    <div className="paper-page" style={{ maxWidth: 300 }}>
+      <div className="pp-strip" />
+      <div className="pp-accent" style={{ width: "40%" }} />
+      <div className="pp-h1">Invoice #2026-0481</div>
+      <div className="pp-sub">GraphCompose Ltd · Due 30 Jun 2026</div>
+      <div className="pp-rule" />
+      <div className="pp-soft">
+        <table className="pp-table">
+          <tbody>
+            <tr><td>Layout engine licence</td><td>€1,200.00</td></tr>
+            <tr><td>Priority support, annual</td><td>€480.00</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <div className="pp-row" style={{ justifyContent: "space-between", marginTop: 10 }}>
+        <div className="pp-ey" style={{ margin: 0 }}>Total due</div>
+        <div className="pp-ey" style={{ margin: 0 }}>€1,680.00</div>
+      </div>
+      <div className="pp-rule" />
+      <div className="pp-line s" />
+    </div>
+  );
+}
+
+export function PaperCv({ accent, variant }: { accent: string; variant: Variant }) {
+  const A = accent;
+  let head: React.ReactNode;
+  if (variant === "center") {
+    head = (
+      <div style={{ textAlign: "center" }}>
+        <div className="pp-h1" style={{ color: A }}>Artem Demchyshyn</div>
+        <div className="pp-sub">Backend Engineer · JVM / PDF</div>
+        <div className="pp-accent" style={{ background: A, width: "30%", margin: "8px auto 0" }} />
+      </div>
+    );
+  } else if (variant === "slab") {
+    head = (
+      <div style={{ background: A, margin: "-2px -2px 12px", padding: "12px 10px" }}>
+        <div className="pp-h1" style={{ color: "#fff" }}>Artem Demchyshyn</div>
+        <div className="pp-sub" style={{ color: "rgba(255,255,255,.7)" }}>Backend Engineer · JVM / PDF</div>
+      </div>
+    );
+  } else {
+    head = (
+      <>
+        <div className="pp-accent" style={{ background: A, width: "42%" }} />
+        <div className="pp-h1" style={{ color: A }}>Artem Demchyshyn</div>
+        <div className="pp-sub">Backend Engineer · JVM / PDF</div>
+      </>
+    );
+  }
+  return (
+    <div className="paper-page" style={{ maxWidth: 300, paddingLeft: variant === "sidebar" ? "34%" : undefined }}>
+      {variant === "strip" && <div className="pp-strip" style={{ background: A }} />}
+      {variant === "sidebar" && (
+        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "30%", background: A + "1A", borderRight: `1px solid ${A}33` }} />
+      )}
+      {head}
+      <div className="pp-rule" />
+      <div className="pp-soft" style={{ background: A + "12" }}>
+        <div className="pp-line l" />
+        <div className="pp-line m" />
+      </div>
+      <div className="pp-ey" style={{ color: A }}>Experience</div>
+      <div className="pp-row" style={{ justifyContent: "space-between" }}>
+        <div className="pp-line m" style={{ margin: 0, width: "55%" }} />
+        <div className="pp-sub" style={{ margin: 0 }}>2023 — now</div>
+      </div>
+      <div className="pp-line s" />
+      <div className="pp-row" style={{ justifyContent: "space-between", marginTop: 7 }}>
+        <div className="pp-line m" style={{ margin: 0, width: "48%" }} />
+        <div className="pp-sub" style={{ margin: 0 }}>2019 — 23</div>
+      </div>
+      <div className="pp-line s" />
+      <div className="pp-ey" style={{ color: A }}>Skills</div>
+      <div className="pp-row" style={{ flexWrap: "wrap", gap: 5 }}>
+        {["Java 17", "PDFBox 3.0", "Maven", "CI"].map((s) => (
+          <span key={s} className="pp-tag" style={{ color: A, background: A + "14" }}>{s}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function PaperLetter({ name, accent, variant }: { name: string; accent: string; variant: Variant }) {
+  const A = accent;
+  const head =
+    variant === "slab" ? (
+      <div style={{ background: A, margin: "-2px -2px 12px", padding: "12px 10px" }}>
+        <div className="pp-h1" style={{ color: "#fff", fontSize: 14 }}>Cover Letter</div>
+      </div>
+    ) : (
+      <>
+        <div className="pp-accent" style={{ background: A, width: "36%" }} />
+        <div className="pp-h1" style={{ color: A, fontSize: 14 }}>Cover Letter</div>
+        <div className="pp-sub">{name} · paired</div>
+      </>
+    );
+  return (
+    <div className="paper-page" style={{ maxWidth: 300 }}>
+      {variant === "strip" && <div className="pp-strip" style={{ background: A }} />}
+      {head}
+      <div className="pp-rule" />
+      <div className="pp-line s" />
+      <div style={{ height: 6 }} />
+      <div className="pp-line l" />
+      <div className="pp-line l" />
+      <div className="pp-line m" />
+      <div style={{ height: 8 }} />
+      <div className="pp-line l" />
+      <div className="pp-line l" />
+      <div className="pp-line s" />
+      <div style={{ height: 8 }} />
+      <div className="pp-line m" />
+      <div style={{ height: 14 }} />
+      <div className="pp-line s" style={{ width: "30%" }} />
+    </div>
+  );
+}
diff --git a/site/components/PdfPreview.tsx b/site/components/PdfPreview.tsx
new file mode 100644
index 00000000..36acedf1
--- /dev/null
+++ b/site/components/PdfPreview.tsx
@@ -0,0 +1,57 @@
+"use client";
+import { useState, type ReactNode } from "react";
+
+/**
+ * Document preview for the Playground.
+ *
+ * Shows the pre-rendered high-resolution PNG poster (840×1188 from page 1 of
+ * each example PDF, sitting in `public/previews/*.png`). The image element is
+ * preserved across `src` changes so React's reconciler just swaps the
+ * underlying URL — the browser cross-fades cached images instead of
+ * unmount/mount flashing.
+ *
+ * If the PNG fails to load (404, decode error), falls back to the hand-coded
+ * CSS <fallback> page so the playground never shows a blank panel.
+ *
+ * Earlier versions tried to swap a pdf.js-rendered <canvas> in on top of the
+ * poster to look "live" — but with the same source PDF that produced the
+ * poster, the canvas render and the PNG looked visually identical except for
+ * sub-pixel anti-aliasing, which read as a jarring flicker on tab switch.
+ * The single-poster approach is calmer and removes the pdf.js dependency from
+ * the playground hot path (pdf.js is still used by the Gallery's full-size
+ * modal via the browser's native <object>).
+ */
+export default function PdfPreview({
+  poster,
+  fallback,
+  maxWidth = 300,
+}: {
+  /** Unused now — kept for backwards compat with callers that pass it. */
+  src?: string;
+  poster: string;
+  fallback: ReactNode;
+  maxWidth?: number;
+}) {
+  const [failed, setFailed] = useState(false);
+  return (
+    <div style={{ display: "grid", placeItems: "center", width: "100%" }}>
+      {failed ? (
+        <>{fallback}</>
+      ) : (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={poster}
+          alt="Rendered document, page 1"
+          onError={() => setFailed(true)}
+          style={{
+            width: maxWidth,
+            maxWidth: "100%",
+            borderRadius: 1,
+            boxShadow: "var(--paper-shadow)",
+            display: "block",
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/site/components/Pipeline.tsx b/site/components/Pipeline.tsx
new file mode 100644
index 00000000..383f2d53
--- /dev/null
+++ b/site/components/Pipeline.tsx
@@ -0,0 +1,155 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { highlightJava } from "@/lib/highlight";
+
+function TreeNode({ x, y, w, label }: { x: number; y: number; w: number; label: string }) {
+  return (
+    <g>
+      <rect x={x} y={y} width={w} height={22} rx={4} fill="var(--paper)" stroke="var(--ink)" strokeWidth={1.3} />
+      <text x={x + w / 2} y={y + 15} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={9.5} fill="var(--ink)">{label}</text>
+    </g>
+  );
+}
+
+// Kept short enough to fit the §01 card at fontSize 11.5 without
+// horizontal overflow. The .pipe-viz pre also gets `overflow-x:
+// auto` in globals.css as a safety net for translated locales.
+const STEP1 = `page.addSection("Summary", s -> s
+  .addParagraph(p -> p.text("Q3 review"))
+  .addTable(t -> t
+    .header("Item", "Q1")
+    .row("p50", "78 ms")));`;
+
+export default function Pipeline() {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [idx, setIdx] = useState(0);
+  const [reduce, setReduce] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    if (mq.matches) { setReduce(true); setIdx(3); return; }
+
+    let ticking = false;
+    const onScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        const track = trackRef.current;
+        if (track) {
+          const rect = track.getBoundingClientRect();
+          const total = rect.height - window.innerHeight;
+          const passed = Math.min(Math.max(-rect.top, 0), total);
+          const p = total > 0 ? passed / total : 0;
+          setIdx(Math.min(3, Math.floor(p * 4.0)));
+        }
+        ticking = false;
+      });
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    onScroll();
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, []);
+
+  const stepCls = (i: number) =>
+    "pipe-step" + (reduce || i <= idx ? " on" : "") + (reduce || i === idx ? " active" : "");
+
+  return (
+    <section id="how">
+      <div className="pipe-track" ref={trackRef} style={reduce ? { height: "auto" } : undefined}>
+        <div className="pipe-sticky" style={reduce ? { position: "static", height: "auto" } : undefined}>
+          <div className="wrap" style={{ width: "100%" }}>
+            <div className="pipe-head rv in">
+              <div className="eyebrow" style={{ justifyContent: "center" }}>§04 · How it works</div>
+              <h2>From DSL to page, in four deterministic steps.</h2>
+            </div>
+            <div className="pipe-progress" aria-hidden="true">
+              {[0, 1, 2, 3].map((i) => <i key={i} className={reduce || i <= idx ? "on" : ""} />)}
+            </div>
+            <div className="pipe-stage">
+
+              <div className={stepCls(0)}>
+                <span className="pipe-num">01</span>
+                <h3>You write DSL</h3>
+                <p>Semantic nodes — not coordinates. You say <em>section</em>, <em>paragraph</em>, <em>table</em>.</p>
+                <div className="pipe-viz">
+                  <pre className="code"
+                       style={{ border: "none", background: "transparent", fontSize: 11, padding: 0, margin: 0, overflowX: "auto", maxWidth: "100%" }}
+                       dangerouslySetInnerHTML={{ __html: highlightJava(STEP1) }} />
+                </div>
+              </div>
+
+              <div className={stepCls(1)}>
+                <span className="pipe-num">02</span>
+                <h3>Engine builds a semantic tree</h3>
+                <p>Each call becomes a typed node. The document is a tree, not a byte stream.</p>
+                <div className="pipe-viz">
+                  <svg width="190" height="150" viewBox="0 0 190 150">
+                    <line x1="95" y1="32" x2="50" y2="70" stroke="var(--line-2)" strokeWidth="1.3" />
+                    <line x1="95" y1="32" x2="140" y2="70" stroke="var(--line-2)" strokeWidth="1.3" />
+                    <line x1="50" y1="92" x2="50" y2="118" stroke="var(--line-2)" strokeWidth="1.3" />
+                    <TreeNode x={58} y={10} w={74} label="Section" />
+                    <TreeNode x={18} y={70} w={64} label="Paragraph" />
+                    <TreeNode x={108} y={70} w={64} label="Table" />
+                    <TreeNode x={22} y={118} w={56} label="Run" />
+                  </svg>
+                </div>
+              </div>
+
+              <div className={stepCls(2)}>
+                <span className="pipe-num">03</span>
+                <h3>Two-pass layout measures everything</h3>
+                <p>Pass one measures intrinsic size. Pass two arranges and paginates — the same on every machine.</p>
+                <div className="pipe-viz">
+                  <svg width="200" height="150" viewBox="0 0 200 150">
+                    <text x="44" y="14" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--faint)">pass 1 · measure</text>
+                    <text x="156" y="14" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--ink)">pass 2 · arrange</text>
+                    <rect x="14" y="24" width="60" height="84" rx="3" fill="none" stroke="var(--line-2)" strokeWidth="1.2" strokeDasharray="3 3" />
+                    <rect x="22" y="34" width="44" height="12" rx="2" fill="var(--line)" />
+                    <rect x="22" y="52" width="44" height="20" rx="2" fill="var(--line)" />
+                    <rect x="22" y="78" width="30" height="10" rx="2" fill="var(--line)" />
+                    <path d="M84 66 h22" stroke="var(--ink)" strokeWidth="1.4" markerEnd="url(#ar)" />
+                    <defs><marker id="ar" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto"><path d="M0 0 L6 3.5 L0 7 z" fill="var(--ink)" /></marker></defs>
+                    <rect x="116" y="24" width="52" height="74" rx="3" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.3" />
+                    <rect x="124" y="32" width="36" height="10" rx="2" fill="var(--ink)" opacity=".82" />
+                    <rect x="124" y="48" width="36" height="16" rx="2" fill="var(--accent-soft)" />
+                    <rect x="124" y="70" width="22" height="8" rx="2" fill="var(--line-2)" />
+                    <rect x="174" y="44" width="20" height="54" rx="3" fill="var(--paper)" stroke="var(--line-2)" strokeWidth="1.2" />
+                    <text x="184" y="112" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="var(--faint)">p.2</text>
+                  </svg>
+                </div>
+              </div>
+
+              <div className={stepCls(3)}>
+                <span className="pipe-num">04</span>
+                <h3>PDFBox renders the page</h3>
+                <p>The arranged tree is drawn through Apache PDFBox 3.0. Bytes out.</p>
+                <div className="pipe-viz">
+                  <svg width="120" height="150" viewBox="0 0 120 150">
+                    <rect x="22" y="14" width="76" height="108" rx="4" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.4" />
+                    <rect x="22" y="14" width="6" height="108" rx="2" fill="var(--ink)" />
+                    <rect x="36" y="26" width="44" height="9" rx="2" fill="var(--ink)" opacity=".85" />
+                    <rect x="36" y="44" width="52" height="20" rx="2" fill="var(--accent-soft)" />
+                    <rect x="36" y="72" width="52" height="5" rx="2" fill="var(--line)" />
+                    <rect x="36" y="82" width="40" height="5" rx="2" fill="var(--line)" />
+                    <circle cx="86" cy="108" r="13" fill="var(--ink)" />
+                    <path d="M80 108 l4 4 l8 -9" stroke="var(--paper)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </div>
+              </div>
+
+            </div>
+            {!reduce && (
+              <p className="mono" style={{ fontSize: 12, color: "var(--faint)", textAlign: "center", marginTop: 26, opacity: idx >= 3 ? 0 : 1, transition: "opacity .3s ease" }}>
+                ↓ scroll to advance the pipeline
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/Playground.tsx b/site/components/Playground.tsx
new file mode 100644
index 00000000..eb952f11
--- /dev/null
+++ b/site/components/Playground.tsx
@@ -0,0 +1,226 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import type { OnMount } from "@monaco-editor/react";
+type IEditor = Parameters<OnMount>[0];
+type MonacoNS = Parameters<OnMount>[1];
+import { PRESETS, PRESET_ORDER, type PresetId } from "@/lib/presets";
+import PdfPreview from "./PdfPreview";
+import Reveal from "./Reveal";
+
+const Editor = dynamic(() => import("@monaco-editor/react").then((m) => m.Editor), { ssr: false });
+
+type Chip = "soft" | "accent" | "theme";
+const CHIPS: { key: Chip; title: string; desc: string; token: string }[] = [
+  { key: "soft", title: "Soft panel", desc: "A tinted container with internal padding the engine measures around.", token: ".softPanel(color, radius, padding)" },
+  { key: "accent", title: "Accent rule", desc: "A coloured left rule — a single declaration, positioned by layout.", token: ".accentLeft(color, width)" },
+  { key: "theme", title: "BusinessTheme", desc: "Typography, colour and spacing tokens. Swap modern() for classic() / cinematic() / nordic() — the tree is untouched.", token: "BusinessTheme.modern()" },
+];
+
+export default function Playground() {
+  const [active, setActive] = useState<PresetId>("hello");
+  const editorRef = useRef<IEditor | null>(null);
+  const monacoRef = useRef<MonacoNS | null>(null);
+  const decoRef = useRef<string[]>([]);
+  const [frameHl, setFrameHl] = useState<Chip | null>(null);
+  const preset = PRESETS[active];
+
+  const defineThemes = (monaco: MonacoNS) => {
+    monaco.editor.defineTheme("gc-light", {
+      base: "vs", inherit: true,
+      rules: [
+        { token: "keyword", foreground: "9B5C2E" },
+        { token: "type.identifier.java", foreground: "1F6F6B" },
+        { token: "string.java", foreground: "3C6E47" },
+        { token: "comment", foreground: "97968F", fontStyle: "italic" },
+        { token: "number", foreground: "9B5C2E" },
+      ],
+      colors: {
+        "editor.background": "#FBFAF7",
+        "editor.foreground": "#2B3142",
+        "editorLineNumber.foreground": "#C9C2B3",
+        "editorLineNumber.activeForeground": "#1F2A44",
+        "editor.selectionBackground": "#1F2A4422",
+        "editorCursor.foreground": "#1F2A44",
+      },
+    });
+    monaco.editor.defineTheme("gc-dark", {
+      base: "vs-dark", inherit: true,
+      rules: [
+        { token: "keyword", foreground: "D6A06A" },
+        { token: "type.identifier.java", foreground: "76C4BD" },
+        { token: "string.java", foreground: "9FCBA8" },
+        { token: "comment", foreground: "6E7176", fontStyle: "italic" },
+        { token: "number", foreground: "D6A06A" },
+      ],
+      colors: {
+        "editor.background": "#181B22",
+        "editor.foreground": "#CBD3E6",
+        "editorLineNumber.foreground": "#3A4150",
+        "editorLineNumber.activeForeground": "#A9BCE2",
+        "editor.selectionBackground": "#A9BCE233",
+        "editorCursor.foreground": "#A9BCE2",
+      },
+    });
+  };
+
+  const currentMonacoTheme = () =>
+    (typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark")
+      ? "gc-dark" : "gc-light";
+
+  const onMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+    defineThemes(monaco);
+    monaco.editor.setTheme(currentMonacoTheme());
+    // Monaco's first mount can race the Reveal opacity transition and
+    // get pinned at a degenerate 5×5 internal size if its container is
+    // still hidden during measurement. Defer one explicit layout pass
+    // after the DOM settles so the editor picks up its real dimensions.
+    if (typeof window !== "undefined") {
+      requestAnimationFrame(() => requestAnimationFrame(() => editor.layout()));
+      // Re-layout when the Playground section first scrolls into view,
+      // in case the user lands on the page already past it (anchor link)
+      // or the Reveal IntersectionObserver fires after Monaco's mount.
+      if ("IntersectionObserver" in window) {
+        const section = document.getElementById("playground");
+        if (section) {
+          const io = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((e) => {
+                if (e.isIntersecting) {
+                  editor.layout();
+                }
+              });
+            },
+            { threshold: 0.05 }
+          );
+          io.observe(section);
+        }
+      }
+    }
+  };
+
+  // react to global theme toggle
+  useEffect(() => {
+    const onTheme = () => monacoRef.current?.editor.setTheme(currentMonacoTheme());
+    window.addEventListener("gc-theme", onTheme as EventListener);
+    return () => window.removeEventListener("gc-theme", onTheme as EventListener);
+  }, []);
+
+  const clearHl = useCallback(() => {
+    setFrameHl(null);
+    const ed = editorRef.current;
+    if (ed) decoRef.current = ed.deltaDecorations(decoRef.current, []);
+  }, []);
+
+  const applyHl = useCallback((kind: Chip) => {
+    setFrameHl(kind);
+    const ed = editorRef.current;
+    const monaco = monacoRef.current;
+    const lines = preset.lines[kind];
+    if (ed && monaco && lines.length) {
+      decoRef.current = ed.deltaDecorations(
+        decoRef.current,
+        lines.map((ln) => ({
+          range: new monaco.Range(ln, 1, ln, 1),
+          options: { isWholeLine: true, className: "mono-hl", marginClassName: "mono-hl-margin" },
+        }))
+      );
+      ed.revealLineInCenterIfOutsideViewport(lines[0]);
+    }
+  }, [preset]);
+
+  // clear decorations when switching presets
+  useEffect(() => { clearHl(); }, [active, clearHl]);
+
+  return (
+    <section className="section" id="playground" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
+      <div className="wrap">
+        <Reveal className="pg-head">
+          <div>
+            <div className="eyebrow">§03 · Live playground</div>
+            <h2>Write the DSL. Read the page.</h2>
+          </div>
+          <p className="lead" style={{ fontSize: 16, maxWidth: "42ch" }}>
+            The same builder you&apos;d run in your backend. Switch a tab to see the page it produces.
+          </p>
+        </Reveal>
+
+        <Reveal className="pg-grid">
+          <div className="pg-editor-wrap">
+            <div className="pg-tabs" role="tablist" aria-label="Examples">
+              {PRESET_ORDER.map((id) => (
+                <button key={id} className={"pg-tab" + (active === id ? " active" : "")}
+                        role="tab" aria-selected={active === id} onClick={() => setActive(id)}>
+                  {PRESETS[id].label}
+                </button>
+              ))}
+            </div>
+            <div style={{ height: 420 }}>
+              <Editor
+                height="420px"
+                language="java"
+                path={active + ".java"}
+                value={preset.code}
+                onMount={onMount}
+                loading={<div style={{ padding: 18, fontFamily: "var(--mono)", fontSize: 13, color: "var(--faint)" }}>loading editor…</div>}
+                options={{
+                  // Monaco mounts inside a <Reveal> wrapper that starts at
+                  // opacity:0; when its container's intersection observer
+                  // flips to .in, Monaco's internal layout was previously
+                  // pinned at the mount-time size (5×5 in the degenerate
+                  // case). `automaticLayout: true` enables Monaco's own
+                  // ResizeObserver so it re-lays out when its container
+                  // gains its real dimensions — fixes the empty-editor
+                  // bug at first view.
+                  automaticLayout: true,
+                  minimap: { enabled: false },
+                  fontFamily: "var(--font-mono), monospace",
+                  fontSize: 13.5,
+                  lineHeight: 22,
+                  scrollBeyondLastLine: false,
+                  renderLineHighlight: "none",
+                  padding: { top: 16, bottom: 16 },
+                  scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
+                  fontLigatures: true,
+                  tabSize: 2,
+                  wordWrap: "off",
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="pg-preview">
+            <div className={"pdfframe pg-pdf hl-" + (frameHl ?? "none")}>
+              <span className="pdf-badge">
+                <span className="dot" />Rendered server-side · PDFBox 3.0 ·
+                <b style={{ color: "var(--ink)", fontWeight: 600, marginLeft: 3 }}>~80&nbsp;ms</b>
+              </span>
+              <span className="pageno">page 1 / 1</span>
+              {/* No `key={active}` — keep the same <img> element across tab
+                  switches so the browser cross-fades the cached posters
+                  instead of unmount/mount flashing through the fallback. */}
+              <PdfPreview poster={preset.poster} fallback={preset.fallback} maxWidth={300} />
+            </div>
+          </div>
+        </Reveal>
+
+        <Reveal className="pg-chips">
+          {CHIPS.map((c) => (
+            <button key={c.key} className="chip-feat" aria-pressed={frameHl === c.key}
+                    onMouseEnter={() => applyHl(c.key)} onMouseLeave={clearHl}
+                    onFocus={() => applyHl(c.key)} onBlur={clearHl}>
+              <h4>{c.title}</h4>
+              <p>{c.desc}</p>
+              <span className="cf-token">{c.token}</span>
+            </button>
+          ))}
+        </Reveal>
+        <p className="mono" style={{ fontSize: 12, color: "var(--faint)", marginTop: 18, textAlign: "center" }}>
+          Hover a chip to see where it lives in the code — and on the page.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/Positioning.tsx b/site/components/Positioning.tsx
new file mode 100644
index 00000000..f756fd3f
--- /dev/null
+++ b/site/components/Positioning.tsx
@@ -0,0 +1,43 @@
+import Reveal from "./Reveal";
+
+export default function Positioning() {
+  return (
+    <section className="section" id="positioning">
+      <div className="wrap">
+        <Reveal>
+          <div className="eyebrow">§06 · Positioning</div>
+          <h2 style={{ maxWidth: "18ch" }}>Between low-level coordinates and XML templates.</h2>
+          <p className="cmp-note" style={{ marginTop: 18 }}>
+            Higher-level than PDFBox. Lighter than JasperReports. MIT and code-first.
+          </p>
+        </Reveal>
+        {/* Wrap the comparison table so it scrolls horizontally on mobile
+            instead of overflowing the 375px viewport (the table needs
+            ~1040px to fit all 6 columns without wrapping cells). */}
+        <Reveal className="cmp-scroll" style={{ overflowX: "auto", marginTop: 6 }}>
+          <table className="cmp">
+            <thead>
+              <tr>
+                <th></th>
+                <th className="col-gc">GraphCompose</th>
+                <th>PDFBox</th>
+                <th>iText&nbsp;7</th>
+                <th>OpenPDF</th>
+                <th>JasperReports</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><th>API style</th><td className="col-gc">Java DSL, semantic nodes</td><td>Low-level drawing</td><td>Element + coordinates</td><td>Element + coordinates</td><td>XML templates</td></tr>
+              <tr><th>Layout</th><td className="col-gc">Two-pass, automatic</td><td>Manual</td><td>Manual / box model</td><td>Manual</td><td>Band / template</td></tr>
+              <tr><th>Licence</th><td className="col-gc">MIT</td><td>Apache 2.0</td><td>AGPL / commercial</td><td>LGPL / MPL</td><td>LGPL</td></tr>
+              <tr><th>Best for</th><td className="col-gc">Semantic business docs</td><td>Drawing primitives</td><td>Full pixel control</td><td>Basic documents</td><td>Data-bound reports</td></tr>
+            </tbody>
+          </table>
+        </Reveal>
+        <p className="mono" style={{ fontSize: 12, color: "var(--faint)", marginTop: 14 }}>
+          Not a hosted PDF service · not a WYSIWYG editor · not a reporting engine · not HTML→PDF.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/site/components/Reveal.tsx b/site/components/Reveal.tsx
new file mode 100644
index 00000000..11994a70
--- /dev/null
+++ b/site/components/Reveal.tsx
@@ -0,0 +1,47 @@
+"use client";
+import { useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
+
+/** Fades children up when scrolled into view. Honours prefers-reduced-motion. */
+export default function Reveal({
+  children,
+  as: Tag = "div",
+  className = "",
+  ...rest
+}: {
+  children: ReactNode;
+  as?: ElementType;
+  className?: string;
+  [key: string]: unknown;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduce || !("IntersectionObserver" in window)) {
+      setShown(true);
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            setShown(true);
+            io.unobserve(e.target);
+          }
+        });
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <Tag ref={ref as never} className={`rv ${shown ? "in" : ""} ${className}`.trim()} {...rest}>
+      {children}
+    </Tag>
+  );
+}
diff --git a/site/components/TopBar.tsx b/site/components/TopBar.tsx
new file mode 100644
index 00000000..0ee6878e
--- /dev/null
+++ b/site/components/TopBar.tsx
@@ -0,0 +1,67 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export default function TopBar() {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const initial = (document.documentElement.getAttribute("data-theme") as "light" | "dark") || "light";
+    setTheme(initial);
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  function toggle() {
+    const next = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+    document.documentElement.setAttribute("data-theme", next);
+    try { localStorage.setItem("gc-theme", next); } catch {}
+    window.dispatchEvent(new CustomEvent("gc-theme", { detail: next }));
+  }
+
+  return (
+    <header className={"topbar" + (scrolled ? " scrolled" : "")}>
+      <div className="wrap">
+        <a className="brand" href="#top" aria-label="GraphCompose home">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src="/brand/graphcompose-logo.png"
+            alt="GraphCompose"
+            className="brand-logo"
+            width={172}
+            height={28}
+          />
+        </a>
+        <nav className="navlinks" aria-label="Sections">
+          <a href="#playground">Playground</a>
+          <a href="#how">How it works</a>
+          <a href="#templates">Showcase</a>
+          <a href="#positioning">Positioning</a>
+          <a href="#engineering">Engineering</a>
+        </nav>
+        <div className="topbar-actions">
+          <button className="iconbtn" onClick={toggle} aria-label="Toggle dark mode" title="Toggle theme">
+            {theme === "dark" ? (
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                <path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" strokeLinejoin="round" />
+              </svg>
+            ) : (
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                <circle cx="12" cy="12" r="4.2" />
+                <path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8" strokeLinecap="round" />
+              </svg>
+            )}
+          </button>
+          <a className="iconbtn" href="https://github.com/DemchaAV/GraphCompose" target="_blank" rel="noopener" aria-label="GitHub repository" title="GitHub">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 1.5A10.5 10.5 0 0 0 8.68 22c.52.1.71-.23.71-.5v-1.9c-2.9.63-3.52-1.24-3.52-1.24-.48-1.2-1.16-1.53-1.16-1.53-.95-.65.07-.64.07-.64 1.05.08 1.6 1.08 1.6 1.08.94 1.6 2.46 1.14 3.06.87.1-.68.37-1.14.66-1.4-2.31-.26-4.74-1.16-4.74-5.14 0-1.13.4-2.06 1.07-2.79-.11-.26-.46-1.32.1-2.75 0 0 .87-.28 2.85 1.06a9.9 9.9 0 0 1 5.18 0c1.98-1.34 2.85-1.06 2.85-1.06.56 1.43.21 2.49.1 2.75.67.73 1.07 1.66 1.07 2.79 0 3.99-2.43 4.87-4.75 5.13.38.32.71.95.71 1.92v2.85c0 .27.19.61.72.5A10.5 10.5 0 0 0 12 1.5Z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/site/lib/deps.ts b/site/lib/deps.ts
new file mode 100644
index 00000000..4c7098b9
--- /dev/null
+++ b/site/lib/deps.ts
@@ -0,0 +1,17 @@
+/**
+ * Install snippets surfaced in the Cta footer. Coordinates match
+ * the latest Maven Central release. Bump in lock-step with
+ * `scripts/cut-release.ps1` at release time — the cut script does
+ * not touch this file, so a stale version here would silently ship
+ * to the showcase site even after a successful release.
+ */
+export const DEPS = {
+  maven: `<dependency>
+  <groupId>io.github.demchaav</groupId>
+  <artifactId>graph-compose</artifactId>
+  <version>1.6.8</version>
+</dependency>`,
+  gradle: `implementation("io.github.demchaav:graph-compose:1.6.8")`,
+} as const;
+
+export type DepKind = keyof typeof DEPS;
diff --git a/site/lib/gallery.ts b/site/lib/gallery.ts
new file mode 100644
index 00000000..ff7e5acf
--- /dev/null
+++ b/site/lib/gallery.ts
@@ -0,0 +1,90 @@
+export type Variant = "strip" | "sidebar" | "center" | "slab";
+
+export interface TemplateSpec {
+  /** PascalCase preset class name, e.g. "ModernProfessional". */
+  name: string;
+  /** Paired cover-letter preset class name, or null when unpaired. */
+  pair: string | null;
+  /** Accent colour used by the CSS fallback (PaperCv / PaperLetter)
+   * when an image preview is absent or fails to load. */
+  accent: string;
+  /** Layout family the CSS fallback should render. */
+  variant: Variant;
+  desc: string;
+  /** Two-line Java snippet shown in the modal. */
+  code: string;
+  /** Path to the real CV-preset render screenshot under
+   * `/previews/cv-v2/`. Sourced from `docs/showcase/screenshots/
+   * templates/cv/cv-<slug>-v2.png` so the gallery shows the actual
+   * rendered output rather than a CSS approximation. */
+  image: string;
+  /** Path to the paired cover-letter screenshot, or null if the
+   * preset ships unpaired. */
+  letterImage: string | null;
+  /** Deep link to the preset source on GitHub. Updated at cut time
+   * by `scripts/cut-release.ps1`'s GH_BASE handling so the link
+   * tracks the released tag instead of `develop`. */
+  source: string;
+  /** Deep link to the paired letter's source, or null. */
+  letterSource: string | null;
+}
+
+const GH = "https://github.com/DemchaAV/GraphCompose/blob/main/src/main/java/com/demcha/compose/document/templates";
+
+/*
+ * The full v1.6.x layered CV / cover-letter catalogue. 16 CV
+ * presets under `com.demcha.compose.document.templates.cv.v2.presets`,
+ * each (except `MinimalUnderlined`) paired with a same-name `…Letter`
+ * preset under `…coverletter.v2.presets`. Order is alphabetical for
+ * predictable hover sequencing in the grid.
+ *
+ * `image` + `letterImage` point at the real rendered screenshots
+ * copied from `docs/showcase/screenshots/templates/{cv,coverletter}/`
+ * into `site/public/previews/{cv-v2,coverletter-v2}/` so the gallery
+ * shows the actual `next build`-able paths.
+ *
+ * `slug` matches the kebab-case filenames in those directories.
+ */
+interface Spec {
+  name: string;
+  slug: string;
+  hasLetter?: boolean; // default true
+  accent: string;
+  variant: Variant;
+  desc: string;
+}
+
+const SPECS: Spec[] = [
+  { name: "BlueBanner",         slug: "blue-banner",         accent: "#2156A8", variant: "slab",    desc: "Full-width blue banner header, soft body." },
+  { name: "BoxedSections",      slug: "boxed-sections",      accent: "#2C3A52", variant: "strip",   desc: "Each section in a soft-filled box, strict grid." },
+  { name: "CenteredHeadline",   slug: "centered-headline",   accent: "#6B4A6B", variant: "center",  desc: "Centred header, generous leading, quiet rules." },
+  { name: "ClassicSerif",       slug: "classic-serif",       accent: "#3A3A34", variant: "center",  desc: "Centred header, serif body, classical proportions." },
+  { name: "CompactMono",        slug: "compact-mono",        accent: "#2B2B2B", variant: "strip",   desc: "Tight spacing, monospace labels — for long histories." },
+  { name: "EditorialBlue",      slug: "editorial-blue",      accent: "#1F2A44", variant: "slab",    desc: "Magazine slab with bold blue masthead." },
+  { name: "EngineeringResume",  slug: "engineering-resume",  accent: "#1F4A47", variant: "strip",   desc: "Strip header, skills grid, project-first body." },
+  { name: "Executive",          slug: "executive",           accent: "#3E2F4A", variant: "slab",    desc: "Solid header slab, one-page summary emphasis." },
+  { name: "MinimalUnderlined",  slug: "minimal-underlined",  hasLetter: false,
+                                                             accent: "#4A4A45", variant: "center",  desc: "Hairline underlines, minimal furniture (no paired letter)." },
+  { name: "MintEditorial",      slug: "mint-editorial",      accent: "#2D6B5C", variant: "slab",    desc: "Mint slab, warm cream body, editorial flow." },
+  { name: "ModernProfessional", slug: "modern-professional", accent: "#1F2A44", variant: "strip",   desc: "Accent strip, soft summary panel, two-column skills." },
+  { name: "MonogramSidebar",    slug: "monogram-sidebar",    accent: "#5A1F3A", variant: "sidebar", desc: "Initials monogram in a coloured sidebar, body right." },
+  { name: "NordicClean",        slug: "nordic-clean",        accent: "#41566B", variant: "center",  desc: "Airy, cool slate-blue, lots of whitespace." },
+  { name: "Panel",              slug: "panel",               accent: "#4F5C45", variant: "strip",   desc: "Soft tinted panels for every section, restrained." },
+  { name: "SidebarPortrait",    slug: "sidebar-portrait",    accent: "#7A3B2E", variant: "sidebar", desc: "Portrait + contact on a coloured side column." },
+  { name: "TimelineMinimal",    slug: "timeline-minimal",    accent: "#5A3A52", variant: "sidebar", desc: "Experience as a vertical timeline on the right." },
+];
+
+export const GALLERY: TemplateSpec[] = SPECS.map(({ name, slug, hasLetter = true, accent, variant, desc }) => ({
+  name,
+  accent,
+  variant,
+  desc,
+  pair: hasLetter ? `${name}Letter` : null,
+  image: `/previews/cv-v2/cv-${slug}-v2.png`,
+  letterImage: hasLetter ? `/previews/coverletter-v2/cover-letter-${slug}-v2.png` : null,
+  source: `${GH}/cv/v2/presets/${name}.java`,
+  letterSource: hasLetter ? `${GH}/coverletter/v2/presets/${name}Letter.java` : null,
+  code: `CvDocument cv = loadProfile();
+${name}.create()
+    .compose(session, cv);`,
+}));
diff --git a/site/lib/highlight.ts b/site/lib/highlight.ts
new file mode 100644
index 00000000..21725972
--- /dev/null
+++ b/site/lib/highlight.ts
@@ -0,0 +1,21 @@
+/* Tiny Java highlighter for static <pre> blocks (hero, pipeline,
+   engineering, gallery modal). The live editor uses Monaco instead. */
+const KW = /\b(public|private|class|void|static|new|return|import|implements|extends|throws|final|var|interface|package)\b/g;
+const TY = /\b([A-Z][A-Za-z0-9_]+)\b/g;
+
+function esc(s: string) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export function highlightJava(code: string): string {
+  let out = esc(code);
+  out = out.replace(/("(?:[^"\\]|\\.)*")/g, "\u0001$1\u0002"); // protect strings
+  out = out.replace(/(\/\/[^\n]*)/g, "\u0003$1\u0004"); // protect comments
+  out = out.replace(KW, '<span class="tk-key">$1</span>');
+  out = out.replace(TY, '<span class="tk-type">$1</span>');
+  out = out.replace(/\.([a-z][A-Za-z0-9_]*)\(/g, '.<span class="tk-mth">$1</span>(');
+  out = out.replace(/\b(\d[\d_.]*)\b/g, '<span class="tk-num">$1</span>');
+  out = out.replace(/\u0001("(?:[^"\\]|\\.)*?")\u0002/g, '<span class="tk-str">$1</span>');
+  out = out.replace(/\u0003(\/\/[^\n]*)\u0004/g, '<span class="tk-com">$1</span>');
+  return out;
+}
diff --git a/site/lib/presets.tsx b/site/lib/presets.tsx
new file mode 100644
index 00000000..ed10a08f
--- /dev/null
+++ b/site/lib/presets.tsx
@@ -0,0 +1,176 @@
+import { PaperHello, PaperInvoice, PaperCv } from "@/components/PaperPage";
+import type { ReactNode } from "react";
+
+export type PresetId = "hello" | "invoice" | "cv";
+
+export interface Preset {
+  id: PresetId;
+  label: string;
+  code: string;
+  /** Real PDF placed in /public/previews — used by <PdfPreview> when present. */
+  pdf: string;
+  /** Pre-rendered PNG of page 1 — shown instantly, upgraded to live pdf.js. */
+  poster: string;
+  /** 1-based code lines each DSL feature chip should highlight. */
+  lines: { soft: number[]; accent: number[]; theme: number[] };
+  /** CSS fallback page shown until the real PDF exists. */
+  fallback: ReactNode;
+}
+
+/*
+ * Code samples are mirrored from real GraphCompose code paths so a
+ * visitor can copy-paste them into a project that already pulled
+ * `io.github.demchaav:graph-compose:1.6.8` and have the snippet
+ * compile without surprises:
+ *   - Hello world      → README.md "Hello world" snippet (verified)
+ *   - Invoice          → examples/.../InvoiceFileExample.java
+ *                        (using the InvoiceTemplateV1 path that
+ *                        ExampleDataFactory provides)
+ *   - CV               → examples/.../cv/v2 patterns +
+ *                        ModernProfessional.create() preset
+ *
+ * If you touch one of these, also update the matching
+ * `lines: { soft, accent, theme }` mapping below — it tells the
+ * Playground which 1-based source-line ranges each DSL feature chip
+ * should highlight. Count from `code:` template line 1.
+ */
+export const PRESETS: Record<PresetId, Preset> = {
+  hello: {
+    id: "hello",
+    label: "Hello world",
+    pdf: "/previews/hello.pdf",
+    poster: "/previews/hello.png",
+    code: `import com.demcha.compose.GraphCompose;
+import com.demcha.compose.document.api.DocumentPageSize;
+import com.demcha.compose.document.api.DocumentSession;
+import com.demcha.compose.document.theme.BusinessTheme;
+
+import java.nio.file.Path;
+
+class Hello {
+    public static void main(String[] args) throws Exception {
+        BusinessTheme theme = BusinessTheme.modern();
+
+        try (DocumentSession doc = GraphCompose.document(Path.of("hello.pdf"))
+                .pageSize(DocumentPageSize.A4)
+                .pageBackground(theme.pageBackground())
+                .margin(28, 28, 28, 28)
+                .create()) {
+
+            doc.pageFlow(page -> page
+                    .addSection("Hero", section -> section
+                            .softPanel(theme.palette().surfaceMuted(), 10, 14)
+                            .accentLeft(theme.palette().accent(), 4)
+                            .addParagraph(p -> p
+                                    .text("GraphCompose")
+                                    .textStyle(theme.text().h1()))
+                            .addParagraph(p -> p
+                                    .text("Two passes. One deterministic page.")
+                                    .textStyle(theme.text().body()))));
+
+            doc.buildPdf();
+        }
+    }
+}`,
+    // Code-line ranges (1-based) for each DSL feature chip.
+    //   soft   → `.softPanel(...)` line
+    //   accent → `.accentLeft(...)` line
+    //   theme  → `BusinessTheme.modern()` declaration line
+    lines: { soft: [18], accent: [19], theme: [9] },
+    fallback: <PaperHello />,
+  },
+
+  invoice: {
+    id: "invoice",
+    label: "Invoice",
+    pdf: "/previews/invoice.pdf",
+    poster: "/previews/invoice.png",
+    code: `import com.demcha.compose.GraphCompose;
+import com.demcha.compose.document.api.DocumentPageSize;
+import com.demcha.compose.document.api.DocumentSession;
+import com.demcha.compose.document.theme.BusinessTheme;
+
+import java.nio.file.Path;
+
+BusinessTheme theme = BusinessTheme.classic();
+
+try (DocumentSession doc = GraphCompose.document(Path.of("invoice.pdf"))
+        .pageSize(DocumentPageSize.A4)
+        .margin(22, 22, 22, 22)
+        .create()) {
+
+    doc.pageFlow(page -> page
+            .addSection("Header", s -> s
+                    .accentLeft(theme.palette().accent(), 4)
+                    .addParagraph(p -> p
+                            .text("Invoice #2026-0481")
+                            .textStyle(theme.text().h2())))
+            .addSection("Items", s -> s
+                    .softPanel(theme.palette().surfaceMuted(), 6, 14)
+                    .addTable(t -> t
+                            .header("Item", "Qty", "Amount")
+                            .row("Layout engine licence", "1", "€1,200.00")
+                            .row("Priority support, annual", "1", "€480.00"))
+                    .addParagraph(p -> p
+                            .text("Total due  —  €1,680.00")
+                            .textStyle(theme.text().body()))));
+
+    doc.buildPdf();
+}`,
+    // soft   → softPanel line (22)
+    // accent → accentLeft line (16)
+    // theme  → BusinessTheme.classic() declaration (8)
+    lines: { soft: [22], accent: [16], theme: [8] },
+    fallback: <PaperInvoice />,
+  },
+
+  cv: {
+    id: "cv",
+    label: "CV · ModernProfessional",
+    pdf: "/previews/cv.pdf",
+    poster: "/previews/cv.png",
+    code: `import com.demcha.compose.GraphCompose;
+import com.demcha.compose.document.api.DocumentPageSize;
+import com.demcha.compose.document.api.DocumentSession;
+import com.demcha.compose.document.templates.cv.v2.data.CvDocument;
+import com.demcha.compose.document.templates.cv.v2.data.CvEntry;
+import com.demcha.compose.document.templates.cv.v2.data.CvIdentity;
+import com.demcha.compose.document.templates.cv.v2.data.EntriesSection;
+import com.demcha.compose.document.templates.cv.v2.data.ParagraphSection;
+import com.demcha.compose.document.templates.cv.v2.presets.ModernProfessional;
+
+import java.nio.file.Path;
+import java.util.List;
+
+CvDocument cv = CvDocument.builder()
+        .identity(CvIdentity.builder()
+                .name("Artem", "Demchyshyn")
+                .jobTitle("Backend Engineer · JVM / PDF")
+                .build())
+        .section(new ParagraphSection("Summary",
+                "Builds documented PDF pipelines on the JVM."))
+        .section(new EntriesSection("Experience", List.of(
+                new CvEntry("Maintainer", "GraphCompose", "2023 — now",
+                        "Two-pass layout engine, multi-template DSL"),
+                new CvEntry("Backend Engineer", "Fintech", "2019 — 2023",
+                        "Java services, PDF reports"))))
+        .build();
+
+try (DocumentSession doc = GraphCompose.document(Path.of("cv.pdf"))
+        .pageSize(DocumentPageSize.A4)
+        .create()) {
+
+    // one line — typed document in, styled page out
+    ModernProfessional.create().compose(doc, cv);
+    doc.buildPdf();
+}`,
+    // No softPanel/accent/theme inline in this sample — the
+    // preset (ModernProfessional) owns its theme. Highlight the
+    // preset line for "theme" to keep the chip meaningful; leave
+    // the others empty so the chip clicks are no-ops.
+    lines: { soft: [], accent: [], theme: [33] },
+    fallback: <PaperCv accent="#1F2A44" variant="strip" />,
+  },
+};
+
+export const PRESET_ORDER: PresetId[] = ["hello", "invoice", "cv"];
diff --git a/site/next-env.d.ts b/site/next-env.d.ts
new file mode 100644
index 00000000..4f11a03d
--- /dev/null
+++ b/site/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/site/next.config.mjs b/site/next.config.mjs
new file mode 100644
index 00000000..36d2b5b3
--- /dev/null
+++ b/site/next.config.mjs
@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Fully static build — `next build` emits ./out, deployable to
+  // GitHub Pages / Vercel / any static host. No SSR, no server runtime.
+  output: "export",
+  images: { unoptimized: true },
+  // If you deploy under a sub-path on GitHub Pages (e.g. user.github.io/graph-compose),
+  // uncomment and set these:
+  // basePath: "/graph-compose",
+  // assetPrefix: "/graph-compose/",
+  trailingSlash: true,
+};
+
+export default nextConfig;
diff --git a/site/package-lock.json b/site/package-lock.json
new file mode 100644
index 00000000..ae43a49d
--- /dev/null
+++ b/site/package-lock.json
@@ -0,0 +1,2502 @@
+{
+  "name": "graphcompose-site",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "graphcompose-site",
+      "version": "1.0.0",
+      "dependencies": {
+        "@monaco-editor/react": "4.6.0",
+        "next": "14.2.5",
+        "pdfjs-dist": "4.4.168",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+      },
+      "devDependencies": {
+        "@types/node": "20.14.10",
+        "@types/react": "18.3.3",
+        "@types/react-dom": "18.3.0",
+        "autoprefixer": "10.4.19",
+        "postcss": "8.4.39",
+        "tailwindcss": "3.4.6",
+        "typescript": "5.5.3"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.7",
+        "nopt": "^5.0.0",
+        "npmlog": "^5.0.1",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
+      "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
+      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
+      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
+      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
+      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
+      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
+      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
+      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
+      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
+      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.14.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+      "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/aproba": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.1.0.tgz",
+      "integrity": "sha512-tLIEcj5GuR2RSTnxNKdkK0dJ/GrC7P38sUkiDmDuHfsHmbagTFAxDVIBltoklXEVIQ/f14IL8IMJ5pn9Hez1Ew==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/are-we-there-yet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.33",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.33.tgz",
+      "integrity": "sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
+      "integrity": "sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001793",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+      "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/canvas": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
+      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
+        "nan": "^2.17.0",
+        "simple-get": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "license": "ISC",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.364",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.364.tgz",
+      "integrity": "sha512-G/dYE3+AYhyHwzTwg8UbnXf7zqMERYh7l2jJ3QujhFsH8agSYwtnGAR2aZ7f0AakIKJXd5En/Hre4igIUrdlYw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gauge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.1",
+        "object-assign": "^4.1.1",
+        "signal-exit": "^3.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "license": "ISC",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nan": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.27.0.tgz",
+      "integrity": "sha512-hC+0LidcL3XE4rp1C4H54KujgXKzbfyTngZTwBByQxsOxCEKZT0MPQ4hOKUH2jU1OYstqdDH4onyHPDzcV0XdQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.5.tgz",
+      "integrity": "sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==",
+      "deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.5",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.5",
+        "@next/swc-darwin-x64": "14.2.5",
+        "@next/swc-linux-arm64-gnu": "14.2.5",
+        "@next/swc-linux-arm64-musl": "14.2.5",
+        "@next/swc-linux-x64-gnu": "14.2.5",
+        "@next/swc-linux-x64-musl": "14.2.5",
+        "@next/swc-win32-arm64-msvc": "14.2.5",
+        "@next/swc-win32-ia32-msvc": "14.2.5",
+        "@next/swc-win32-x64-msvc": "14.2.5"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.46.tgz",
+      "integrity": "sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npmlog": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^3.0.0",
+        "set-blocking": "^2.0.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path2d": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.2.tgz",
+      "integrity": "sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pdfjs-dist": {
+      "version": "4.4.168",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.4.168.tgz",
+      "integrity": "sha512-MbkAjpwka/dMHaCfQ75RY1FXX3IewBVu6NGZOcxerRFlaBiIkZmUoR0jotX5VUzYZEXAGzSFtknWs5xRKliXPA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "canvas": "^2.11.2",
+        "path2d": "^0.2.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz",
+      "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "deprecated": "Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause",
+      "optional": true
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    }
+  }
+}
diff --git a/site/package.json b/site/package.json
new file mode 100644
index 00000000..ac125623
--- /dev/null
+++ b/site/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "graphcompose-site",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Showcase site for GraphCompose — declarative Java DSL for business PDFs.",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.2.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "@monaco-editor/react": "4.6.0",
+    "pdfjs-dist": "4.4.168"
+  },
+  "devDependencies": {
+    "@types/node": "20.14.10",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "autoprefixer": "10.4.19",
+    "postcss": "8.4.39",
+    "tailwindcss": "3.4.6",
+    "typescript": "5.5.3"
+  }
+}
diff --git a/site/postcss.config.mjs b/site/postcss.config.mjs
new file mode 100644
index 00000000..709af5d8
--- /dev/null
+++ b/site/postcss.config.mjs
@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/site/public/brand/graphcompose-logo.png b/site/public/brand/graphcompose-logo.png
new file mode 100644
index 00000000..d1257e9e
Binary files /dev/null and b/site/public/brand/graphcompose-logo.png differ
diff --git a/site/public/examples.json b/site/public/examples.json
new file mode 100644
index 00000000..41e8466b
--- /dev/null
+++ b/site/public/examples.json
@@ -0,0 +1,601 @@
+{
+  "categories": [
+    {
+      "id": "templates",
+      "label": "Templates",
+      "groups": [
+        {
+          "id": "cv",
+          "label": "CV / Resume",
+          "examples": [
+            {
+              "id": "cv-blue-banner-v2",
+              "title": "Blue Banner",
+              "description": "Light-blue full-width section bands with high-contrast headings.",
+              "tags": ["cv", "banner", "blue"],
+              "pdf": "showcase/pdf/templates/cv/cv-blue-banner-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-blue-banner-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvBlueBannerExample.java"
+            },
+            {
+              "id": "cv-boxed-sections-v2",
+              "title": "Boxed Sections",
+              "description": "Each section wrapped in a grey banner header — bold, structured feel.",
+              "tags": ["cv", "structured"],
+              "pdf": "showcase/pdf/templates/cv/cv-boxed-sections-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-boxed-sections-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvBoxedV2Example.java"
+            },
+            {
+              "id": "cv-centered-headline-v2",
+              "title": "Centered Headline",
+              "description": "Centered name + role with full-width accent rules between sections.",
+              "tags": ["cv", "centered"],
+              "pdf": "showcase/pdf/templates/cv/cv-centered-headline-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-centered-headline-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvCenteredHeadlineExample.java"
+            },
+            {
+              "id": "cv-classic-serif-v2",
+              "title": "Classic Serif",
+              "description": "Two-page editorial CV with Times-style serif headings and conservative grey rules.",
+              "tags": ["cv", "serif", "two-page"],
+              "pdf": "showcase/pdf/templates/cv/cv-classic-serif-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-classic-serif-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvClassicSerifExample.java"
+            },
+            {
+              "id": "cv-compact-mono-v2",
+              "title": "Compact Mono",
+              "description": "Single-column dense layout with monospace contact line — favourite for engineering roles.",
+              "tags": ["cv", "compact", "mono"],
+              "pdf": "showcase/pdf/templates/cv/cv-compact-mono-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-compact-mono-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvCompactMonoExample.java"
+            },
+            {
+              "id": "cv-editorial-blue-v2",
+              "title": "Editorial Blue",
+              "description": "Magazine-style editorial layout with two-column body and tinted skills table.",
+              "tags": ["cv", "editorial", "blue"],
+              "pdf": "showcase/pdf/templates/cv/cv-editorial-blue-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-editorial-blue-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvEditorialBlueExample.java"
+            },
+            {
+              "id": "cv-engineering-resume-v2",
+              "title": "Engineering Resume",
+              "description": "Tech-lead style layout with prominent skill matrix and stack tagging — was TechLead in v1.5.",
+              "tags": ["cv", "tech"],
+              "pdf": "showcase/pdf/templates/cv/cv-engineering-resume-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-engineering-resume-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvEngineeringResumeExample.java"
+            },
+            {
+              "id": "cv-executive-v2",
+              "title": "Executive",
+              "description": "Slate palette with prominent name banner, formal tone, and weighted section dividers.",
+              "tags": ["cv", "executive"],
+              "pdf": "showcase/pdf/templates/cv/cv-executive-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-executive-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvExecutiveExample.java"
+            },
+            {
+              "id": "cv-minimal-underlined-v2",
+              "title": "Minimal Underlined",
+              "description": "Single-column layout with underlined section titles and tight whitespace — minimalist reference shape.",
+              "tags": ["cv", "minimal"],
+              "pdf": "showcase/pdf/templates/cv/cv-minimal-underlined-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-minimal-underlined-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvMinimalUnderlinedExample.java"
+            },
+            {
+              "id": "cv-mint-editorial-v2",
+              "title": "Mint Editorial",
+              "description": "Magazine-style editorial CV with mint accent palette and two-column body.",
+              "tags": ["cv", "editorial", "mint"],
+              "pdf": "showcase/pdf/templates/cv/cv-mint-editorial-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-mint-editorial-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvMintEditorialExample.java"
+            },
+            {
+              "id": "cv-modern-professional-v2",
+              "title": "Modern Professional",
+              "description": "Clean two-column resume with right-aligned header, tinted profile panel, and uppercase section headings.",
+              "tags": ["cv", "minimal"],
+              "pdf": "showcase/pdf/templates/cv/cv-modern-professional-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-modern-professional-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvModernV2Example.java"
+            },
+            {
+              "id": "cv-monogram-sidebar-v2",
+              "title": "Monogram Sidebar",
+              "description": "Sidebar with monogram badge, accent rule, and structured contact + skills column.",
+              "tags": ["cv", "sidebar", "monogram"],
+              "pdf": "showcase/pdf/templates/cv/cv-monogram-sidebar-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-monogram-sidebar-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvMonogramSidebarExample.java"
+            },
+            {
+              "id": "cv-nordic-clean-v2",
+              "title": "Nordic Clean",
+              "description": "Sidebar layout with soft-tinted PROFILE panel, Nordic palette, and bullet skill list.",
+              "tags": ["cv", "sidebar"],
+              "pdf": "showcase/pdf/templates/cv/cv-nordic-clean-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-nordic-clean-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvNordicCleanExample.java"
+            },
+            {
+              "id": "cv-panel-v2",
+              "title": "Panel",
+              "description": "Soft-tinted panels per section, Product-Leader feel — was ProductLeader in v1.5.",
+              "tags": ["cv", "panel"],
+              "pdf": "showcase/pdf/templates/cv/cv-panel-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-panel-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvPanelExample.java"
+            },
+            {
+              "id": "cv-sidebar-portrait-v2",
+              "title": "Sidebar Portrait",
+              "description": "Edge-to-edge grey sidebar with portrait photo, contact stack, and skills.",
+              "tags": ["cv", "sidebar", "portrait"],
+              "pdf": "showcase/pdf/templates/cv/cv-sidebar-portrait-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-sidebar-portrait-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvSidebarPortraitExample.java"
+            },
+            {
+              "id": "cv-timeline-minimal-v2",
+              "title": "Timeline Minimal",
+              "description": "Vertical timeline of roles with bullet markers and tight whitespace.",
+              "tags": ["cv", "timeline"],
+              "pdf": "showcase/pdf/templates/cv/cv-timeline-minimal-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/cv/cv-timeline-minimal-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/cv/v2/CvTimelineMinimalExample.java"
+            }
+          ]
+        },
+        {
+          "id": "proposal",
+          "label": "Proposal",
+          "examples": [
+            {
+              "id": "project-proposal-cinematic",
+              "title": "Project Proposal (cinematic)",
+              "description": "End-to-end project proposal with mountain hero, scope panels, and pricing summary.",
+              "tags": ["proposal", "proposal", "cinematic"],
+              "pdf": "showcase/pdf/templates/proposal/project-proposal-cinematic.pdf",
+              "screenshot": "showcase/screenshots/templates/proposal/project-proposal-cinematic.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/proposal/CinematicProposalFileExample.java"
+            },
+            {
+              "id": "proposal",
+              "title": "Proposal (canonical)",
+              "description": "Multi-section proposal with cover, scope, deliverables, and pricing — ProposalTemplateV1.",
+              "tags": ["proposal", "proposal"],
+              "pdf": "showcase/pdf/templates/proposal/proposal.pdf",
+              "screenshot": "showcase/screenshots/templates/proposal/proposal.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/proposal/ProposalFileExample.java"
+            },
+            {
+              "id": "proposal-cinematic",
+              "title": "Cinematic Proposal",
+              "description": "Cinematic V2 proposal layout with cover panel, hero spread, and rich typography.",
+              "tags": ["proposal", "proposal", "cinematic"],
+              "pdf": "showcase/pdf/templates/proposal/proposal-cinematic.pdf",
+              "screenshot": "showcase/screenshots/templates/proposal/proposal-cinematic.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/proposal/ProposalCinematicFileExample.java"
+            }
+          ]
+        },
+        {
+          "id": "invoice",
+          "label": "Invoice",
+          "examples": [
+            {
+              "id": "invoice",
+              "title": "Invoice (canonical)",
+              "description": "Single-page invoice with line items, totals, and structured chrome — InvoiceTemplateV1.",
+              "tags": ["invoice", "invoice"],
+              "pdf": "showcase/pdf/templates/invoice/invoice.pdf",
+              "screenshot": "showcase/screenshots/templates/invoice/invoice.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/invoice/InvoiceFileExample.java"
+            },
+            {
+              "id": "invoice-cinematic",
+              "title": "Cinematic Invoice",
+              "description": "Polished V2 invoice template with theme-driven layout, advanced tables, and totals.",
+              "tags": ["invoice", "invoice", "cinematic"],
+              "pdf": "showcase/pdf/templates/invoice/invoice-cinematic.pdf",
+              "screenshot": "showcase/screenshots/templates/invoice/invoice-cinematic.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/invoice/InvoiceCinematicFileExample.java"
+            }
+          ]
+        },
+        {
+          "id": "schedule",
+          "label": "Schedule",
+          "examples": [
+            {
+              "id": "weekly-schedule",
+              "title": "Weekly Schedule",
+              "description": "Multi-day weekly schedule with shift assignments, category fills, and repeated header.",
+              "tags": ["schedule", "schedule", "table"],
+              "pdf": "showcase/pdf/templates/schedule/weekly-schedule.pdf",
+              "screenshot": "showcase/screenshots/templates/schedule/weekly-schedule.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/schedule/WeeklyScheduleFileExample.java"
+            }
+          ]
+        },
+        {
+          "id": "coverletter",
+          "label": "Cover Letter",
+          "examples": [
+            {
+              "id": "cover-letter-blue-banner-v2",
+              "title": "Blue Banner letter",
+              "description": "Letter paired with Blue Banner CV.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-blue-banner-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-blue-banner-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvBlueBannerLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-boxed-sections-v2",
+              "title": "Boxed Sections letter",
+              "description": "Letter with grey-banner section headings.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-boxed-sections-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-boxed-sections-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvBoxedSectionsLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-centered-headline-v2",
+              "title": "Centered Headline letter",
+              "description": "Letter with centered name + accent rules.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-centered-headline-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-centered-headline-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvCenteredHeadlineLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-classic-serif-v2",
+              "title": "Classic Serif letter",
+              "description": "Letter with Times-style serif typography.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-classic-serif-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-classic-serif-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvClassicSerifLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-compact-mono-v2",
+              "title": "Compact Mono letter",
+              "description": "Letter with mono accent and compact spacing.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-compact-mono-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-compact-mono-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvCompactMonoLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-editorial-blue-v2",
+              "title": "Editorial Blue letter",
+              "description": "Editorial-magazine letter paired with Editorial Blue CV.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-editorial-blue-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-editorial-blue-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvEditorialBlueLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-engineering-resume-v2",
+              "title": "Engineering letter",
+              "description": "Letter paired with EngineeringResume palette.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-engineering-resume-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-engineering-resume-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvEngineeringResumeLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-executive-v2",
+              "title": "Executive letter",
+              "description": "Slate-palette executive letter.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-executive-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-executive-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvExecutiveLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-mint-editorial-v2",
+              "title": "Mint Editorial letter",
+              "description": "Letter paired with Mint Editorial CV — magazine-style mint accent.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-mint-editorial-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-mint-editorial-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvMintEditorialLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-modern-professional-v2",
+              "title": "Modern Professional letter",
+              "description": "Letter paired with the Modern Professional CV palette.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-modern-professional-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-modern-professional-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvModernProfessionalLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-monogram-sidebar-v2",
+              "title": "Monogram Sidebar letter",
+              "description": "Letter paired with Monogram Sidebar CV.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-monogram-sidebar-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-monogram-sidebar-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvMonogramSidebarLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-nordic-clean-v2",
+              "title": "Nordic Clean letter",
+              "description": "Letter paired with the Nordic Clean CV palette.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-nordic-clean-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-nordic-clean-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvNordicCleanLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-panel-v2",
+              "title": "Panel letter",
+              "description": "Letter paired with Panel CV soft-tinted panels.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-panel-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-panel-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvPanelLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-sidebar-portrait-v2",
+              "title": "Sidebar Portrait letter",
+              "description": "Letter paired with Sidebar Portrait CV.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-sidebar-portrait-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-sidebar-portrait-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvSidebarPortraitLetterV2Example.java"
+            },
+            {
+              "id": "cover-letter-timeline-minimal-v2",
+              "title": "Timeline Minimal letter",
+              "description": "Letter with timeline-style minimal accents.",
+              "tags": ["letter"],
+              "pdf": "showcase/pdf/templates/coverletter/cover-letter-timeline-minimal-v2.pdf",
+              "screenshot": "showcase/screenshots/templates/coverletter/cover-letter-timeline-minimal-v2.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/templates/coverletter/v2/CvTimelineMinimalLetterV2Example.java"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "features",
+      "label": "Features",
+      "groups": [
+        {
+          "id": "canvas",
+          "label": "Canvas / Free Placement",
+          "examples": [
+            {
+              "id": "canvas-layer-showcase",
+              "title": "Canvas Layer (free-canvas)",
+              "description": "CanvasLayerNode — pixel-precise (x,y) placement of children inside a fixed bounding box.",
+              "tags": ["canvas", "canvas", "v1.6", "absolute"],
+              "pdf": "showcase/pdf/features/canvas/canvas-layer-showcase.pdf",
+              "screenshot": "showcase/screenshots/features/canvas/canvas-layer-showcase.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/canvas/CanvasLayerExample.java"
+            }
+          ]
+        },
+        {
+          "id": "tables",
+          "label": "Tables",
+          "examples": [
+            {
+              "id": "composed-table-cell-showcase",
+              "title": "Composed Table Cells",
+              "description": "DocumentTableCell.node(DocumentNode) — paragraphs, lists, sub-tables inside cells with two-pass measurement.",
+              "tags": ["tables", "tables", "v1.6"],
+              "pdf": "showcase/pdf/features/tables/composed-table-cell-showcase.pdf",
+              "screenshot": "showcase/screenshots/features/tables/composed-table-cell-showcase.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/tables/ComposedTableCellExample.java"
+            },
+            {
+              "id": "table-advanced",
+              "title": "Advanced Tables",
+              "description": "Row span, column span, zebra rows, total rows, and repeating headers across page breaks.",
+              "tags": ["tables", "tables", "pagination"],
+              "pdf": "showcase/pdf/features/tables/table-advanced.pdf",
+              "screenshot": "showcase/screenshots/features/tables/table-advanced.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/tables/TableAdvancedExample.java"
+            }
+          ]
+        },
+        {
+          "id": "lists",
+          "label": "Lists & Bullets",
+          "examples": [
+            {
+              "id": "nested-list-showcase",
+              "title": "Nested Lists",
+              "description": "ListBuilder.addItem(label, Consumer) — depth cascade, per-depth markers, mixed flat / nested authoring.",
+              "tags": ["lists", "lists", "v1.6"],
+              "pdf": "showcase/pdf/features/lists/nested-list-showcase.pdf",
+              "screenshot": "showcase/screenshots/features/lists/nested-list-showcase.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/lists/NestedListExample.java"
+            }
+          ]
+        },
+        {
+          "id": "shapes",
+          "label": "Shapes & Containers",
+          "examples": [
+            {
+              "id": "shape-container",
+              "title": "Shape-as-Container",
+              "description": "Rounded rect, ellipse, circle containers with ClipPolicy and layered children.",
+              "tags": ["shapes", "shapes", "clip"],
+              "pdf": "showcase/pdf/features/shapes/shape-container.pdf",
+              "screenshot": "showcase/screenshots/features/shapes/shape-container.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/shapes/ShapeContainerExample.java"
+            }
+          ]
+        },
+        {
+          "id": "transforms",
+          "label": "Transforms & Layers",
+          "examples": [
+            {
+              "id": "transforms",
+              "title": "Layers + Transforms",
+              "description": "rotate / scale on every leaf builder + LayerStack with explicit z-index.",
+              "tags": ["transforms", "transforms", "layers"],
+              "pdf": "showcase/pdf/features/transforms/transforms.pdf",
+              "screenshot": "showcase/screenshots/features/transforms/transforms.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/transforms/TransformsExample.java"
+            }
+          ]
+        },
+        {
+          "id": "text",
+          "label": "Rich Text",
+          "examples": [
+            {
+              "id": "rich-text-showcase",
+              "title": "Rich Text",
+              "description": "Inline runs with bold / italic / colour / link options, markdown parsing.",
+              "tags": ["text", "text", "rich"],
+              "pdf": "showcase/pdf/features/text/rich-text-showcase.pdf",
+              "screenshot": "showcase/screenshots/features/text/rich-text-showcase.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/text/RichTextShowcaseExample.java"
+            },
+            {
+              "id": "section-presets",
+              "title": "Section Presets",
+              "description": "Pre-baked section bands, accent strips, soft panels for templates.",
+              "tags": ["text", "text", "sections"],
+              "pdf": "showcase/pdf/features/text/section-presets.pdf",
+              "screenshot": "showcase/screenshots/features/text/section-presets.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/text/SectionPresetsExample.java"
+            }
+          ]
+        },
+        {
+          "id": "themes",
+          "label": "Themes",
+          "examples": [
+            {
+              "id": "invoice-custom-theme",
+              "title": "Custom BusinessTheme",
+              "description": "Authoring a custom palette + typography scale and feeding it through templates.",
+              "tags": ["themes", "themes"],
+              "pdf": "showcase/pdf/features/themes/invoice-custom-theme.pdf",
+              "screenshot": "showcase/screenshots/features/themes/invoice-custom-theme.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/themes/CustomBusinessThemeExample.java"
+            }
+          ]
+        },
+        {
+          "id": "barcodes",
+          "label": "Barcodes & QR",
+          "examples": [
+            {
+              "id": "barcode-showcase",
+              "title": "Barcodes & QR",
+              "description": "QR code, Code128, EAN-13, PDF417 — every supported barcode + per-barcode styling.",
+              "tags": ["barcodes", "barcodes", "qr"],
+              "pdf": "showcase/pdf/features/barcodes/barcode-showcase.pdf",
+              "screenshot": "showcase/screenshots/features/barcodes/barcode-showcase.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/barcodes/BarcodeShowcaseExample.java"
+            }
+          ]
+        },
+        {
+          "id": "chrome",
+          "label": "PDF Chrome (header / footer / watermark)",
+          "examples": [
+            {
+              "id": "pdf-chrome",
+              "title": "PDF Chrome",
+              "description": "Headers, footers, watermarks, metadata, document protection / encryption.",
+              "tags": ["chrome", "chrome", "metadata", "watermark"],
+              "pdf": "showcase/pdf/features/chrome/pdf-chrome.pdf",
+              "screenshot": "showcase/screenshots/features/chrome/pdf-chrome.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/chrome/PdfChromeExample.java"
+            }
+          ]
+        },
+        {
+          "id": "streaming",
+          "label": "Streaming & I/O",
+          "examples": [
+            {
+              "id": "invoice-http-stream",
+              "title": "HTTP Streaming",
+              "description": "Stream PDF directly to a Servlet response with no buffering.",
+              "tags": ["streaming", "streaming", "http"],
+              "pdf": "showcase/pdf/features/streaming/invoice-http-stream.pdf",
+              "screenshot": "showcase/screenshots/features/streaming/invoice-http-stream.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/streaming/HttpStreamingExample.java"
+            }
+          ]
+        },
+        {
+          "id": "snapshots",
+          "label": "Snapshot Testing",
+          "examples": [
+            {
+              "id": "invoice-snapshot-regression",
+              "title": "Layout Snapshots",
+              "description": "How LayoutSnapshotAssertions captures the resolved layout graph for regression testing.",
+              "tags": ["snapshots", "snapshots", "testing"],
+              "pdf": "showcase/pdf/features/snapshots/invoice-snapshot-regression.pdf",
+              "screenshot": "showcase/screenshots/features/snapshots/invoice-snapshot-regression.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/features/snapshots/LayoutSnapshotRegressionExample.java"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "flagships",
+      "label": "Flagship Examples",
+      "groups": [
+        {
+          "id": "default",
+          "label": "Flagship Demos",
+          "examples": [
+            {
+              "id": "business-report",
+              "title": "Business Report Cover",
+              "description": "Flagship cover page with hero panel, KPI table, and accent strip — ready-to-ship template.",
+              "tags": ["flagship", "showcase", "cover"],
+              "pdf": "showcase/pdf/flagships/default/business-report.pdf",
+              "screenshot": "showcase/screenshots/flagships/default/business-report.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/flagships/BusinessReportExample.java"
+            },
+            {
+              "id": "master-showcase",
+              "title": "Master Showcase",
+              "description": "Kitchen-sink demo combining every primitive into a single document — the full GraphCompose surface.",
+              "tags": ["flagship", "showcase"],
+              "pdf": "showcase/pdf/flagships/default/master-showcase.pdf",
+              "screenshot": "showcase/screenshots/flagships/default/master-showcase.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/flagships/MasterShowcaseExample.java"
+            },
+            {
+              "id": "module-first-profile",
+              "title": "Module-First Authoring",
+              "description": "Authoring style focused on declaring data modules first, layout second.",
+              "tags": ["flagship", "authoring"],
+              "pdf": "showcase/pdf/flagships/default/module-first-profile.pdf",
+              "screenshot": "showcase/screenshots/flagships/default/module-first-profile.png",
+              "code": "https://github.com/DemchaAV/GraphCompose/blob/develop/examples/src/main/java/com/demcha/examples/flagships/ModuleFirstFileExample.java"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/site/public/previews/README.md b/site/public/previews/README.md
new file mode 100644
index 00000000..adcd7824
--- /dev/null
+++ b/site/public/previews/README.md
@@ -0,0 +1,51 @@
+# Pre-rendered PDF previews
+
+Drop the real, GraphCompose-rendered PDFs here. The playground (§2) loads them
+with **pdf.js** and draws page 1 into a `<canvas>`. Until a file exists, the site
+shows a faithful CSS fallback page, so it always looks right.
+
+Expected filenames (referenced from `lib/presets.tsx`):
+
+    public/previews/hello.pdf      public/previews/hello.png
+    public/previews/invoice.pdf    public/previews/invoice.png
+    public/previews/cv.pdf         public/previews/cv.png
+
+The `.png` is a pre-rendered image of page 1, shown **instantly** as a poster.
+`PdfPreview` then tries to render the real `.pdf` with pdf.js and swaps in a live
+`<canvas>` if it succeeds within a timeout — otherwise the PNG stays. So the
+preview is never blank and never hangs. Regenerate the PNG whenever the PDF
+changes (any PDF→PNG tool, or screenshot page 1).
+
+## How to generate them
+
+Run the examples on the JVM with GraphCompose itself and write the PDFs:
+
+```java
+// hello.pdf
+try (DocumentSession doc = GraphCompose.document(Path.of("site/public/previews/hello.pdf"))
+        .pageSize(DocumentPageSize.A4)
+        .margin(28, 28, 28, 28)
+        .create()) {
+    doc.pageFlow(page -> page
+            .addSection("Hero", s -> s
+                    .addParagraph(p -> p.text("Hello, GraphCompose."))));
+    doc.buildPdf();
+}
+
+// cv.pdf — uses the ModernProfessional layered-template preset
+try (DocumentSession doc = GraphCompose.document(Path.of("site/public/previews/cv.pdf"))
+        .pageSize(DocumentPageSize.A4)
+        .create()) {
+    ModernProfessional.create().compose(doc, cv);
+    doc.buildPdf();
+}
+```
+
+The canonical reference examples live under
+`examples/src/main/java/com/demcha/examples/templates/`. For a runnable
+all-in-one, see `examples/src/main/java/com/demcha/examples/GenerateAllExamples.java`.
+
+Then commit the PDFs. No code change needed — the filenames are already wired.
+
+To add a new tab, add an entry to `PRESETS` in `lib/presets.tsx` (set its `pdf`
+path and a `fallback` page) and it appears automatically.
diff --git a/site/public/previews/coverletter-v2/cover-letter-blue-banner-v2.png b/site/public/previews/coverletter-v2/cover-letter-blue-banner-v2.png
new file mode 100644
index 00000000..9f44bb98
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-blue-banner-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-boxed-sections-v2.png b/site/public/previews/coverletter-v2/cover-letter-boxed-sections-v2.png
new file mode 100644
index 00000000..10d618e2
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-boxed-sections-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-centered-headline-v2.png b/site/public/previews/coverletter-v2/cover-letter-centered-headline-v2.png
new file mode 100644
index 00000000..16d4f5f8
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-centered-headline-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-classic-serif-v2.png b/site/public/previews/coverletter-v2/cover-letter-classic-serif-v2.png
new file mode 100644
index 00000000..6d4ff6e9
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-classic-serif-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-compact-mono-v2.png b/site/public/previews/coverletter-v2/cover-letter-compact-mono-v2.png
new file mode 100644
index 00000000..9223b2bf
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-compact-mono-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-editorial-blue-v2.png b/site/public/previews/coverletter-v2/cover-letter-editorial-blue-v2.png
new file mode 100644
index 00000000..1812f994
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-editorial-blue-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-engineering-resume-v2.png b/site/public/previews/coverletter-v2/cover-letter-engineering-resume-v2.png
new file mode 100644
index 00000000..2aa14a81
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-engineering-resume-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-executive-v2.png b/site/public/previews/coverletter-v2/cover-letter-executive-v2.png
new file mode 100644
index 00000000..40704c83
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-executive-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-mint-editorial-v2.png b/site/public/previews/coverletter-v2/cover-letter-mint-editorial-v2.png
new file mode 100644
index 00000000..fbe0c0b2
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-mint-editorial-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-modern-professional-v2.png b/site/public/previews/coverletter-v2/cover-letter-modern-professional-v2.png
new file mode 100644
index 00000000..d84e4654
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-modern-professional-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-monogram-sidebar-v2.png b/site/public/previews/coverletter-v2/cover-letter-monogram-sidebar-v2.png
new file mode 100644
index 00000000..990d3ca2
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-monogram-sidebar-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-nordic-clean-v2.png b/site/public/previews/coverletter-v2/cover-letter-nordic-clean-v2.png
new file mode 100644
index 00000000..f2d4c592
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-nordic-clean-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-panel-v2.png b/site/public/previews/coverletter-v2/cover-letter-panel-v2.png
new file mode 100644
index 00000000..29d5a8be
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-panel-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-sidebar-portrait-v2.png b/site/public/previews/coverletter-v2/cover-letter-sidebar-portrait-v2.png
new file mode 100644
index 00000000..44540137
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-sidebar-portrait-v2.png differ
diff --git a/site/public/previews/coverletter-v2/cover-letter-timeline-minimal-v2.png b/site/public/previews/coverletter-v2/cover-letter-timeline-minimal-v2.png
new file mode 100644
index 00000000..b5eb85c4
Binary files /dev/null and b/site/public/previews/coverletter-v2/cover-letter-timeline-minimal-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-blue-banner-v2.png b/site/public/previews/cv-v2/cv-blue-banner-v2.png
new file mode 100644
index 00000000..d223c22e
Binary files /dev/null and b/site/public/previews/cv-v2/cv-blue-banner-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-boxed-sections-v2.png b/site/public/previews/cv-v2/cv-boxed-sections-v2.png
new file mode 100644
index 00000000..08c0bf1d
Binary files /dev/null and b/site/public/previews/cv-v2/cv-boxed-sections-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-centered-headline-v2.png b/site/public/previews/cv-v2/cv-centered-headline-v2.png
new file mode 100644
index 00000000..cda3ff5a
Binary files /dev/null and b/site/public/previews/cv-v2/cv-centered-headline-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-classic-serif-v2.png b/site/public/previews/cv-v2/cv-classic-serif-v2.png
new file mode 100644
index 00000000..7ef75bdf
Binary files /dev/null and b/site/public/previews/cv-v2/cv-classic-serif-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-compact-mono-v2.png b/site/public/previews/cv-v2/cv-compact-mono-v2.png
new file mode 100644
index 00000000..69c84ad3
Binary files /dev/null and b/site/public/previews/cv-v2/cv-compact-mono-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-editorial-blue-v2.png b/site/public/previews/cv-v2/cv-editorial-blue-v2.png
new file mode 100644
index 00000000..7bf7651a
Binary files /dev/null and b/site/public/previews/cv-v2/cv-editorial-blue-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-engineering-resume-v2.png b/site/public/previews/cv-v2/cv-engineering-resume-v2.png
new file mode 100644
index 00000000..5835787e
Binary files /dev/null and b/site/public/previews/cv-v2/cv-engineering-resume-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-executive-v2.png b/site/public/previews/cv-v2/cv-executive-v2.png
new file mode 100644
index 00000000..108db297
Binary files /dev/null and b/site/public/previews/cv-v2/cv-executive-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-minimal-underlined-v2.png b/site/public/previews/cv-v2/cv-minimal-underlined-v2.png
new file mode 100644
index 00000000..4858e1b9
Binary files /dev/null and b/site/public/previews/cv-v2/cv-minimal-underlined-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-mint-editorial-v2.png b/site/public/previews/cv-v2/cv-mint-editorial-v2.png
new file mode 100644
index 00000000..e3e870fb
Binary files /dev/null and b/site/public/previews/cv-v2/cv-mint-editorial-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-modern-professional-v2.png b/site/public/previews/cv-v2/cv-modern-professional-v2.png
new file mode 100644
index 00000000..ff098526
Binary files /dev/null and b/site/public/previews/cv-v2/cv-modern-professional-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-monogram-sidebar-v2.png b/site/public/previews/cv-v2/cv-monogram-sidebar-v2.png
new file mode 100644
index 00000000..8a6d58f5
Binary files /dev/null and b/site/public/previews/cv-v2/cv-monogram-sidebar-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-nordic-clean-v2.png b/site/public/previews/cv-v2/cv-nordic-clean-v2.png
new file mode 100644
index 00000000..5861d979
Binary files /dev/null and b/site/public/previews/cv-v2/cv-nordic-clean-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-panel-v2.png b/site/public/previews/cv-v2/cv-panel-v2.png
new file mode 100644
index 00000000..677c432f
Binary files /dev/null and b/site/public/previews/cv-v2/cv-panel-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-sidebar-portrait-v2.png b/site/public/previews/cv-v2/cv-sidebar-portrait-v2.png
new file mode 100644
index 00000000..c8db5ef1
Binary files /dev/null and b/site/public/previews/cv-v2/cv-sidebar-portrait-v2.png differ
diff --git a/site/public/previews/cv-v2/cv-timeline-minimal-v2.png b/site/public/previews/cv-v2/cv-timeline-minimal-v2.png
new file mode 100644
index 00000000..f0c2dd99
Binary files /dev/null and b/site/public/previews/cv-v2/cv-timeline-minimal-v2.png differ
diff --git a/site/public/previews/cv.png b/site/public/previews/cv.png
new file mode 100644
index 00000000..02e07e58
Binary files /dev/null and b/site/public/previews/cv.png differ
diff --git a/site/public/previews/hello.png b/site/public/previews/hello.png
new file mode 100644
index 00000000..ed6ccbb2
Binary files /dev/null and b/site/public/previews/hello.png differ
diff --git a/site/public/previews/invoice.png b/site/public/previews/invoice.png
new file mode 100644
index 00000000..776d1c85
Binary files /dev/null and b/site/public/previews/invoice.png differ
diff --git a/site/public/showcase/screenshots/features/barcodes/barcode-showcase.png b/site/public/showcase/screenshots/features/barcodes/barcode-showcase.png
new file mode 100644
index 00000000..8cd90532
Binary files /dev/null and b/site/public/showcase/screenshots/features/barcodes/barcode-showcase.png differ
diff --git a/site/public/showcase/screenshots/features/canvas/canvas-layer-showcase.png b/site/public/showcase/screenshots/features/canvas/canvas-layer-showcase.png
new file mode 100644
index 00000000..21b8658a
Binary files /dev/null and b/site/public/showcase/screenshots/features/canvas/canvas-layer-showcase.png differ
diff --git a/site/public/showcase/screenshots/features/chrome/pdf-chrome.png b/site/public/showcase/screenshots/features/chrome/pdf-chrome.png
new file mode 100644
index 00000000..ee70abdf
Binary files /dev/null and b/site/public/showcase/screenshots/features/chrome/pdf-chrome.png differ
diff --git a/site/public/showcase/screenshots/features/lists/nested-list-showcase.png b/site/public/showcase/screenshots/features/lists/nested-list-showcase.png
new file mode 100644
index 00000000..363fc468
Binary files /dev/null and b/site/public/showcase/screenshots/features/lists/nested-list-showcase.png differ
diff --git a/site/public/showcase/screenshots/features/shapes/shape-container.png b/site/public/showcase/screenshots/features/shapes/shape-container.png
new file mode 100644
index 00000000..18f7e747
Binary files /dev/null and b/site/public/showcase/screenshots/features/shapes/shape-container.png differ
diff --git a/site/public/showcase/screenshots/features/snapshots/invoice-snapshot-regression.png b/site/public/showcase/screenshots/features/snapshots/invoice-snapshot-regression.png
new file mode 100644
index 00000000..c354b7f7
Binary files /dev/null and b/site/public/showcase/screenshots/features/snapshots/invoice-snapshot-regression.png differ
diff --git a/site/public/showcase/screenshots/features/streaming/invoice-http-stream.png b/site/public/showcase/screenshots/features/streaming/invoice-http-stream.png
new file mode 100644
index 00000000..c354b7f7
Binary files /dev/null and b/site/public/showcase/screenshots/features/streaming/invoice-http-stream.png differ
diff --git a/site/public/showcase/screenshots/features/tables/composed-table-cell-showcase.png b/site/public/showcase/screenshots/features/tables/composed-table-cell-showcase.png
new file mode 100644
index 00000000..f767d8b3
Binary files /dev/null and b/site/public/showcase/screenshots/features/tables/composed-table-cell-showcase.png differ
diff --git a/site/public/showcase/screenshots/features/tables/table-advanced.png b/site/public/showcase/screenshots/features/tables/table-advanced.png
new file mode 100644
index 00000000..e3da9fa4
Binary files /dev/null and b/site/public/showcase/screenshots/features/tables/table-advanced.png differ
diff --git a/site/public/showcase/screenshots/features/text/rich-text-showcase.png b/site/public/showcase/screenshots/features/text/rich-text-showcase.png
new file mode 100644
index 00000000..745ae8e9
Binary files /dev/null and b/site/public/showcase/screenshots/features/text/rich-text-showcase.png differ
diff --git a/site/public/showcase/screenshots/features/text/section-presets.png b/site/public/showcase/screenshots/features/text/section-presets.png
new file mode 100644
index 00000000..e9b51bc1
Binary files /dev/null and b/site/public/showcase/screenshots/features/text/section-presets.png differ
diff --git a/site/public/showcase/screenshots/features/themes/invoice-custom-theme.png b/site/public/showcase/screenshots/features/themes/invoice-custom-theme.png
new file mode 100644
index 00000000..2d9ca736
Binary files /dev/null and b/site/public/showcase/screenshots/features/themes/invoice-custom-theme.png differ
diff --git a/site/public/showcase/screenshots/features/transforms/transforms.png b/site/public/showcase/screenshots/features/transforms/transforms.png
new file mode 100644
index 00000000..e8b48636
Binary files /dev/null and b/site/public/showcase/screenshots/features/transforms/transforms.png differ
diff --git a/site/public/showcase/screenshots/flagships/default/business-report.png b/site/public/showcase/screenshots/flagships/default/business-report.png
new file mode 100644
index 00000000..5fb0994a
Binary files /dev/null and b/site/public/showcase/screenshots/flagships/default/business-report.png differ
diff --git a/site/public/showcase/screenshots/flagships/default/master-showcase.png b/site/public/showcase/screenshots/flagships/default/master-showcase.png
new file mode 100644
index 00000000..8987b533
Binary files /dev/null and b/site/public/showcase/screenshots/flagships/default/master-showcase.png differ
diff --git a/site/public/showcase/screenshots/flagships/default/module-first-profile.png b/site/public/showcase/screenshots/flagships/default/module-first-profile.png
new file mode 100644
index 00000000..f8538ca5
Binary files /dev/null and b/site/public/showcase/screenshots/flagships/default/module-first-profile.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-blue-banner-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-blue-banner-v2.png
new file mode 100644
index 00000000..9f44bb98
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-blue-banner-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-boxed-sections-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-boxed-sections-v2.png
new file mode 100644
index 00000000..10d618e2
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-boxed-sections-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-centered-headline-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-centered-headline-v2.png
new file mode 100644
index 00000000..16d4f5f8
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-centered-headline-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-classic-serif-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-classic-serif-v2.png
new file mode 100644
index 00000000..6d4ff6e9
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-classic-serif-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-compact-mono-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-compact-mono-v2.png
new file mode 100644
index 00000000..9223b2bf
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-compact-mono-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-editorial-blue-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-editorial-blue-v2.png
new file mode 100644
index 00000000..1812f994
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-editorial-blue-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-engineering-resume-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-engineering-resume-v2.png
new file mode 100644
index 00000000..2aa14a81
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-engineering-resume-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-executive-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-executive-v2.png
new file mode 100644
index 00000000..40704c83
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-executive-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-mint-editorial-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-mint-editorial-v2.png
new file mode 100644
index 00000000..fbe0c0b2
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-mint-editorial-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-modern-professional-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-modern-professional-v2.png
new file mode 100644
index 00000000..d84e4654
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-modern-professional-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-monogram-sidebar-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-monogram-sidebar-v2.png
new file mode 100644
index 00000000..990d3ca2
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-monogram-sidebar-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-nordic-clean-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-nordic-clean-v2.png
new file mode 100644
index 00000000..f2d4c592
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-nordic-clean-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-panel-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-panel-v2.png
new file mode 100644
index 00000000..29d5a8be
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-panel-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-sidebar-portrait-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-sidebar-portrait-v2.png
new file mode 100644
index 00000000..44540137
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-sidebar-portrait-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/coverletter/cover-letter-timeline-minimal-v2.png b/site/public/showcase/screenshots/templates/coverletter/cover-letter-timeline-minimal-v2.png
new file mode 100644
index 00000000..b5eb85c4
Binary files /dev/null and b/site/public/showcase/screenshots/templates/coverletter/cover-letter-timeline-minimal-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-blue-banner-v2.png b/site/public/showcase/screenshots/templates/cv/cv-blue-banner-v2.png
new file mode 100644
index 00000000..d223c22e
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-blue-banner-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-boxed-sections-v2.png b/site/public/showcase/screenshots/templates/cv/cv-boxed-sections-v2.png
new file mode 100644
index 00000000..08c0bf1d
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-boxed-sections-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-centered-headline-v2.png b/site/public/showcase/screenshots/templates/cv/cv-centered-headline-v2.png
new file mode 100644
index 00000000..cda3ff5a
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-centered-headline-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-classic-serif-v2.png b/site/public/showcase/screenshots/templates/cv/cv-classic-serif-v2.png
new file mode 100644
index 00000000..7ef75bdf
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-classic-serif-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-compact-mono-v2.png b/site/public/showcase/screenshots/templates/cv/cv-compact-mono-v2.png
new file mode 100644
index 00000000..69c84ad3
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-compact-mono-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-editorial-blue-v2.png b/site/public/showcase/screenshots/templates/cv/cv-editorial-blue-v2.png
new file mode 100644
index 00000000..7bf7651a
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-editorial-blue-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-engineering-resume-v2.png b/site/public/showcase/screenshots/templates/cv/cv-engineering-resume-v2.png
new file mode 100644
index 00000000..5835787e
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-engineering-resume-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-executive-v2.png b/site/public/showcase/screenshots/templates/cv/cv-executive-v2.png
new file mode 100644
index 00000000..108db297
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-executive-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-minimal-underlined-v2.png b/site/public/showcase/screenshots/templates/cv/cv-minimal-underlined-v2.png
new file mode 100644
index 00000000..4858e1b9
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-minimal-underlined-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-mint-editorial-v2.png b/site/public/showcase/screenshots/templates/cv/cv-mint-editorial-v2.png
new file mode 100644
index 00000000..e3e870fb
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-mint-editorial-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-modern-professional-v2.png b/site/public/showcase/screenshots/templates/cv/cv-modern-professional-v2.png
new file mode 100644
index 00000000..ff098526
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-modern-professional-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-monogram-sidebar-v2.png b/site/public/showcase/screenshots/templates/cv/cv-monogram-sidebar-v2.png
new file mode 100644
index 00000000..8a6d58f5
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-monogram-sidebar-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-nordic-clean-v2.png b/site/public/showcase/screenshots/templates/cv/cv-nordic-clean-v2.png
new file mode 100644
index 00000000..5861d979
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-nordic-clean-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-panel-v2.png b/site/public/showcase/screenshots/templates/cv/cv-panel-v2.png
new file mode 100644
index 00000000..677c432f
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-panel-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-sidebar-portrait-v2.png b/site/public/showcase/screenshots/templates/cv/cv-sidebar-portrait-v2.png
new file mode 100644
index 00000000..c8db5ef1
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-sidebar-portrait-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/cv/cv-timeline-minimal-v2.png b/site/public/showcase/screenshots/templates/cv/cv-timeline-minimal-v2.png
new file mode 100644
index 00000000..f0c2dd99
Binary files /dev/null and b/site/public/showcase/screenshots/templates/cv/cv-timeline-minimal-v2.png differ
diff --git a/site/public/showcase/screenshots/templates/invoice/invoice-cinematic.png b/site/public/showcase/screenshots/templates/invoice/invoice-cinematic.png
new file mode 100644
index 00000000..c354b7f7
Binary files /dev/null and b/site/public/showcase/screenshots/templates/invoice/invoice-cinematic.png differ
diff --git a/site/public/showcase/screenshots/templates/invoice/invoice.png b/site/public/showcase/screenshots/templates/invoice/invoice.png
new file mode 100644
index 00000000..b4f3168c
Binary files /dev/null and b/site/public/showcase/screenshots/templates/invoice/invoice.png differ
diff --git a/site/public/showcase/screenshots/templates/proposal/project-proposal-cinematic.png b/site/public/showcase/screenshots/templates/proposal/project-proposal-cinematic.png
new file mode 100644
index 00000000..d9bf40a0
Binary files /dev/null and b/site/public/showcase/screenshots/templates/proposal/project-proposal-cinematic.png differ
diff --git a/site/public/showcase/screenshots/templates/proposal/proposal-cinematic.png b/site/public/showcase/screenshots/templates/proposal/proposal-cinematic.png
new file mode 100644
index 00000000..b8d83157
Binary files /dev/null and b/site/public/showcase/screenshots/templates/proposal/proposal-cinematic.png differ
diff --git a/site/public/showcase/screenshots/templates/proposal/proposal.png b/site/public/showcase/screenshots/templates/proposal/proposal.png
new file mode 100644
index 00000000..2dca5f46
Binary files /dev/null and b/site/public/showcase/screenshots/templates/proposal/proposal.png differ
diff --git a/site/public/showcase/screenshots/templates/schedule/weekly-schedule.png b/site/public/showcase/screenshots/templates/schedule/weekly-schedule.png
new file mode 100644
index 00000000..12d195a9
Binary files /dev/null and b/site/public/showcase/screenshots/templates/schedule/weekly-schedule.png differ
diff --git a/site/tailwind.config.ts b/site/tailwind.config.ts
new file mode 100644
index 00000000..9a792257
--- /dev/null
+++ b/site/tailwind.config.ts
@@ -0,0 +1,34 @@
+import type { Config } from "tailwindcss";
+
+/**
+ * The single source of truth for the palette is CSS variables in
+ * app/globals.css (:root and [data-theme="dark"]). Tailwind reads those
+ * vars so utility classes and the design tokens never drift apart.
+ *
+ * To change the accent colour for the whole site, edit ONE value:
+ *   --ink in app/globals.css
+ */
+const config: Config = {
+  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./lib/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        bg: "var(--bg)",
+        "bg-2": "var(--bg-2)",
+        paper: "var(--paper)",
+        ink: "var(--ink)",
+        text: "var(--text)",
+        muted: "var(--muted)",
+        faint: "var(--faint)",
+        line: "var(--line)",
+      },
+      fontFamily: {
+        sans: ["var(--font-inter)", "system-ui", "sans-serif"],
+        mono: ["var(--font-mono)", "ui-monospace", "monospace"],
+      },
+      maxWidth: { content: "1200px" },
+    },
+  },
+  plugins: [],
+};
+export default config;
diff --git a/site/tsconfig.json b/site/tsconfig.json
new file mode 100644
index 00000000..f5fc2f70
--- /dev/null
+++ b/site/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}