diff --git a/.gitignore b/.gitignore
index 666715b..6d36814 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,14 @@ demo/**/target/
 demo/**/logs/
 demo/**/dbt_packages/
 
+# demo recorder toolchain (tapes/pages are committed; the recorder's deps + rendered
+# media are regenerable — `demos/standalone/build.mjs` + `record.mjs` rebuild them).
+# The committed copies live where they're used: README GIFs in docs/assets/demos/,
+# landing videos in demos/landing/media/.
+demos/standalone/node_modules/
+demos/standalone/package-lock.json
+demos/standalone/out/
+
 # duckdb build artifacts
 *.duckdb
 *.duckdb.wal
@@ -39,3 +47,6 @@ demo/**/dbt_packages/
 
 # Vendored erwin XSD schemas — reference only, must NOT ship in a public repo.
 erwin/
+
+# Modelith CLI demo renders (regenerable via demos/render.sh)
+demos/out/
diff --git a/README.md b/README.md
index 6f88dc1..6e3da00 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,10 @@ owns state.
 [![license](https://img.shields.io/badge/license-Apache--2.0-lightgrey)](#license)
 [![code style: ruff](https://img.shields.io/badge/lint-ruff-black)](https://docs.astral.sh/ruff/)
 
+![Design a model in git, generate contract-enforced dbt, and compile to a data contract — the mdl CLI beside its live ER diagram](docs/assets/demos/Main.gif)
+
+<sub>Design in git → generate dbt → compile to a contract. [See all six flows ↓](#video-demos)</sub>
+
 ![Modelith canvas: a seven-entity pension IBoR model with crow's-foot relationships](docs/assets/canvas.png)
 
 ## Try it in 2 minutes
@@ -42,6 +46,46 @@ term — the demo starts a local ontology server for you. See
 [Ontology and knowledge graph, step by step](#ontology-and-knowledge-graph-step-by-step)
 for the ontology workflow.
 
+## Video demos
+
+Six flows, end to end. Every command and every line of output is real — the `mdl` CLI on the
+left, the live ER diagram on the right.
+
+### Design-first — a blank repo to running dbt
+Scaffold a model, add entities (ULIDs minted for you), validate, and compile to
+contract-enforced dbt plus an ODCS data contract.
+
+![Design-first: mdl init, new entity, validate, generate, export contract, with the ER diagram building alongside](docs/assets/demos/Main.gif)
+
+### Adopt a warehouse — reverse a legacy dbt project
+Point it at a warehouse with no data model: staging excluded, SCD2 and Data Vault detected,
+surrogate keys stripped, every inference in a reviewable ledger.
+
+![Adopt a warehouse: mdl reverse detecting SCD2, Data Vault, and stripping surrogate keys, with raw SQL becoming clean ER cards](docs/assets/demos/Adopt.gif)
+
+### The drift gate — model and warehouse in lockstep
+A column lands in the warehouse; drift classifies it (additive, not breaking) and reconcile
+folds the safe change into the model. Nothing is ever lost.
+
+![The drift gate: no drift, then an additive column caught by mdl drift --check and folded into the model by --reconcile](docs/assets/demos/Drift.gif)
+
+### Ontology anchoring — align to an industry vocabulary
+Search FIBO, align an entity to a standard term, and track coverage — reproducible, offline.
+
+![Ontology anchoring: mdl ontology search returning fibo:PartyInRole, aligning counterparty, and 100% coverage](docs/assets/demos/Ontology.gif)
+
+### Erwin import — bring an erwin model into git
+Import an erwin XML export straight into clean logical YAML you can version, diff, and
+generate from.
+
+![Erwin import: mdl import erwin turning an erwin XML export into clean Modelith ER cards](docs/assets/demos/Erwin.gif)
+
+### One model, many targets — a contract factory
+From one definition: contract-enforced dbt, an ODCS contract, Pydantic, SQL DDL, Mermaid,
+DBML, RDF/SHACL, and a Neo4j graph schema — each generated deterministically.
+
+![One model, many targets: the model fanning out to dbt, ODCS, Pydantic, SQL, Mermaid, and DBML](docs/assets/demos/Compile.gif)
+
 ## Why
 
 Warehouse teams keep their meaning in three disconnected places: an ER tool that
diff --git a/demos/DESIGN-BRIEF.md b/demos/DESIGN-BRIEF.md
new file mode 100644
index 0000000..7a01734
--- /dev/null
+++ b/demos/DESIGN-BRIEF.md
@@ -0,0 +1,210 @@
+# Design brief: Modelith animated demo (code-based, for `/design`)
+
+Paste this whole brief into `/design`. It builds **one canvas with 3 artboards**, each an
+**animated terminal + ER diagram** demo of one Modelith story. Everything below is real —
+real `mdl` commands, real output, real entities — captured from the working CLI. Do not invent
+commands or output; use exactly what's here.
+
+## Ground it in the REAL repo (read these first)
+
+This animation must reproduce the **real Modelith Studio canvas**, not an approximation. Before
+building, read these in the repo:
+
+- **`demos/design-assets/canvas-reference.jpg`** — a real screenshot of the live Studio canvas
+  (the IBOR model). This is the visual target: the exact entity-card look, the amber top border,
+  the gold-key PK rows, the dim mono types, the dashed crow's-foot relationship lines, the
+  warm-charcoal dotted background. Match it.
+- **`demos/design-assets/canvas-tokens.css`** — the REAL design tokens and entity-card CSS,
+  extracted verbatim from `canvas/src/styles.css`. Use these exact values and class structure
+  for the ER cards in the animation.
+- For deeper fidelity, the real source is `canvas/src/styles.css` (the `:root` tokens,
+  `.entity-node`, `.entity-header`, `.badge`, `.attr-row`) and `canvas/src/EntityNode.tsx`
+  (the card markup: header + badges, a keys section, then the attribute rows).
+
+The terminal panel is a plain dark terminal (same background/mono font); it doesn't need to copy
+a specific app chrome.
+
+---
+
+## What to build
+
+A horizontal filmstrip canvas, **3 artboards** (16:9, 1920×1080 each), named:
+`Main.dc.html` = **1-Design-first**, `Adopt.dc.html` = **2-Adopt-a-warehouse**,
+`Drift.dc.html` = **3-Drift-gate**.
+
+Each artboard is a **split scene**: a terminal panel on the LEFT (~55% width) and a live
+**ER diagram** on the RIGHT (~45%). The terminal types commands and reveals output; the ER
+diagram animates in sync (entities appear, columns highlight, a change folds in). Animations
+loop or play once on view — your call; prefer a ~12–18s timed sequence per artboard that loops.
+
+## Visual identity (match the Modelith product)
+
+- Background `#14110f` (warm charcoal). Panels `#1c1815`, cards `#221d19`, borders `#33291f`.
+- Text `#ece6dd`, dim text `#a89a86`. **Accent amber `#e0a63a`** (the brand color).
+- Success green `#6cbf73`, warn/amber `#e6a94a`, error `#f0857a`, PK gold `#f2c14e`.
+- Monospace for the terminal: "JetBrains Mono", ui-monospace, Menlo. Sans for labels: Inter.
+- Terminal prompt is `$`. Typed commands animate character-by-character (~40ms/char feel).
+  Output reveals as a block after a short beat. Keep a blinking amber cursor.
+- ER entity cards: rounded, dark card, a 3px amber top border, a bold entity name header, then
+  attribute rows (name left, type right). PK rows show a gold `PK` chip; FK rows an amber `FK`
+  chip. Relationship lines connect FK column to the referenced entity (crow's-foot if easy).
+
+---
+
+## Artboard 1 — "Design-first" (greenfield)
+
+**Tagline (small, top):** "Design in git. Compile to contract-enforced dbt."
+
+**Terminal sequence (type + reveal, in order):**
+
+```
+$ mdl model render
+# model: shop
+entity customer      customer_id [pk], email, full_name, created_at
+entity order         order_id [pk], customer_id, order_date, status
+entity order_line    order_line_id [pk], order_id, product_id, quantity
+entity product       product_id [pk], sku, name, unit_price
+
+$ mdl new entity payment --definition "A settlement against an order"
+created entity 'payment' (01M3WX64NZ...)
+
+$ mdl validate
+validation passed
+
+$ mdl generate
+wrote 9 files to target/dbt
+
+$ mdl export contract
+wrote contract to datacontract.yaml
+```
+
+**ER diagram animation (synced):**
+- As `model render` reveals, the 4 entity cards **fade/slide in**: `customer`, `order`,
+  `order_line`, `product`. Draw FK relationship lines: `order.customer_id → customer`,
+  `order_line.order_id → order`, `order_line.product_id → product`.
+- On `mdl new entity payment`, a **5th card `payment` animates in** (amber glow pulse), with a
+  `payment_id [pk]` row (it's a fresh entity, minimal attrs).
+- On `mdl validate` → a green "✓ valid" badge pulses over the diagram.
+- On `mdl generate` / `export contract` → two small output chips slide in at the bottom:
+  a dbt logo-ish chip "dbt • contract enforced" and a "ODCS data contract" chip — the
+  "one model, many targets" idea. Keep subtle.
+
+**Entity/attribute data (use verbatim):**
+- customer: customer_id (bigint, PK), email (string), full_name (string), created_at (timestamp)
+- order: order_id (bigint, PK), customer_id (bigint, FK→customer), order_date (date), status (string)
+- order_line: order_line_id (bigint, PK), order_id (bigint, FK→order), product_id (bigint, FK→product), quantity (integer)
+- product: product_id (bigint, PK), sku (string), name (string), unit_price (decimal)
+- payment: payment_id (bigint, PK)  [appears on `new entity`]
+
+---
+
+## Artboard 2 — "Adopt a warehouse" (brownfield / reverse)
+
+**Tagline:** "Point it at a legacy warehouse. Get a clean model back."
+
+**Terminal sequence:**
+
+```
+$ ls models/staging models/marts models/vault
+stg_customers.sql  stg_orders.sql  int_order_enriched.sql
+dim_customer.sql  dim_product.sql  fct_orders.sql
+hub_customer.sql  link_order.sql  sat_customer_details.sql
+
+$ mdl reverse --project target/manifest.json --out owned
+reversed 6 entities (4 staging/intermediate excluded)
+  kept as business entities (4):  dim_customer, dim_product, fct_orders, hub_customer
+  excluded as staging/intermediate (4):  stg_customers, stg_orders, ...
+  SCD2 pattern detected (2):  dim_customer, dim_product
+  Data Vault detected (3):  hub_customer, link_order, sat_customer_details
+  surrogate keys stripped (7)
+
+$ mdl validate -m owned
+validation passed
+```
+
+**Reverse output must keep the color coding:** "kept as business entities" in GREEN, "managed
+but no business key" in AMBER, "excluded" in BLUE-ish, "SCD2 / Data Vault" headers in blue,
+"surrogate keys stripped" header in blue. This color-coded classification is the hero of the shot.
+
+**ER diagram animation:**
+- Start with a **messy pile** of raw SQL file chips (stg_*, dim_*, fct_*, hub_*, link_*, sat_*)
+  scattered/greyed on the right.
+- On `mdl reverse`, animate the transform: staging chips **fade out** (excluded); the business
+  entities **snap into clean ER cards** — `dim_customer [SCD2]`, `dim_product [SCD2]`,
+  `fct_orders`, `hub_customer [HUB]` — with `[SCD2]`/`[HUB]`/`[LINK]` badge tags. Draw FK lines:
+  `fct_orders.customer_id → dim_customer`, `fct_orders.product_id → dim_product`.
+- Small floating annotations pulse as each pattern is "detected": a tag "SCD2" on dim_customer,
+  "Data Vault" on the hub/link/sat group, "surrogate key stripped" briefly on a removed `_sk`
+  column. These mirror the real detection.
+
+**Entity/attribute data (verbatim from the real reverse):**
+- dim_customer [SCD2]: customer_id (integer, PK), name (string), tier (string)
+- dim_product [SCD2]: product_id (integer, PK), sku (string), category (string), list_price (decimal)
+- fct_orders: order_id (integer, PK), customer_id (FK→dim_customer), product_id (FK→dim_product), order_date (date), amount (decimal)
+- hub_customer [HUB]: customer_id (integer, PK), load_dts (date)
+- link_order [LINK], sat_customer_details — shown as tagged cards, fewer attrs
+
+---
+
+## Artboard 3 — "The drift gate" (the climax)
+
+**Tagline:** "The model and the warehouse, always in lockstep."
+
+**Terminal sequence (this is the emotional peak — pace it):**
+
+```
+$ mdl drift -m model --manifest target/manifest.json
+no drift detected
+
+# a teammate adds a broker_code column to the warehouse
+$ mdl drift -m model --manifest target/manifest.json --check
+drift vs target 'duckdb_dev':
+  [additive] 1
+    - column transaction.broker_code exists in dbt but not the model
+
+$ mdl drift -m model --manifest target/manifest.json --reconcile
+reconciled 1 delta(s); skipped 0 breaking
+  + add column transaction.broker_code
+
+$ mdl drift -m model --manifest target/manifest.json
+no drift detected
+```
+
+**Color:** `no drift detected` neutral/green; `[additive] 1` in AMBER; `reconciled 1 delta(s);
+skipped 0 breaking` in GREEN; `+ add column transaction.broker_code` with a green `+`.
+
+**ER diagram animation (the key moment):**
+- Center the **`transaction`** entity card: transaction_id [PK], trade_date, amount,
+  portfolio_code [FK→portfolio], counterparty_id [FK→counterparty]. (Optionally small
+  portfolio + counterparty cards to its sides with FK lines.)
+- Scene 1 — a steady state; a subtle "model ⇄ warehouse in sync" indicator (two panels linked,
+  green).
+- Scene 2 — a **new `broker_code` row** appears on the WAREHOUSE side only (right), glowing
+  AMBER, with a floating "additive" tag. The sync indicator turns amber. This is drift.
+- Scene 3 — on `--reconcile`, the `broker_code` row **animates from the warehouse side INTO the
+  model's `transaction` card** (slides over, snaps in, turns from amber to normal). The sync
+  indicator returns to GREEN. A small "nothing lost" / "✓ reconciled" note pulses.
+- End on both sides matching, green, calm.
+
+**Entity data (verbatim):**
+- transaction: transaction_id (string, PK), trade_date (date), amount (decimal),
+  portfolio_code (string, FK→portfolio), counterparty_id (bigint, FK→counterparty)
+- the added column: broker_code (string) — additive, folded in by reconcile.
+
+---
+
+## Overall feel
+
+- Calm, confident, "engineering-grade" — not flashy. Amber accent used sparingly for emphasis
+  (the cursor, a badge, a glow on the key moment). Everything else restrained and dark.
+- Each artboard should read in one glance (what story) and reward watching (the animation).
+- No fake UI chrome that impersonates another product. The terminal + ER diagram are generic
+  Modelith surfaces.
+- If sound/voice is off the table (it is, in /design), let the on-screen taglines + the typed
+  commands carry the narrative.
+
+## Source of truth
+
+These flows are verified real. The matching VHS reference clips and the exact `.tape` scripts
+are under `demos/tapes/films/`, and the live commands run against `demos/fixtures/shop`,
+`demo/legacy-warehouse`, and `demo/ibor`. Nothing here is mocked.
diff --git a/demos/README.md b/demos/README.md
new file mode 100644
index 0000000..b86212f
--- /dev/null
+++ b/demos/README.md
@@ -0,0 +1,72 @@
+# Modelith CLI demos
+
+Three short **films** of the `mdl` CLI, each a realistic project followed end to end as one
+continuous session — the project is set up once and evolves on screen, no mid-story resets.
+Scripted with [VHS](https://github.com/charmbracelet/vhs) (not screen-captured) so every take
+is identical, typo-free, re-renderable when the CLI changes, and visually consistent.
+
+**Everything is real** — real `mdl` commands, real `dbt parse`, real output. Changes are shown
+on-camera; nothing is faked or staged.
+
+## The three films
+
+### 1 — Design-first (greenfield, ~45s)
+From a blank repo to running dbt + a data contract.
+`mdl model render` (the designed model) → `mdl new entity` (mints ULIDs) → `mdl validate` →
+`mdl generate` (protected regions + an ENFORCED contract) → `mdl export contract` (one model →
+an ODCS data contract too). **Story: design in git, compile to more than dbt.**
+
+### 2 — Adopt a warehouse (brownfield, ~55s)
+Take over a legacy dbt project that has no data model.
+`ls` the warehouse (staging / marts / vault) → `mdl reverse` (real SCD2 / Data Vault /
+surrogate-key detection) → `mdl decisions list` (every inference, confidence-tagged, reviewable)
+→ `mdl validate` → `mdl model render` (clean owned model). **Story: inherit a mess, own it in
+one command, nothing is a black box.**
+
+### 3 — The drift gate (the climax, ~60s)
+The model and the warehouse stay in lockstep.
+`mdl drift` (clean) → a teammate adds a `broker_code` column to a dbt model + its contract (a
+real edit) → `dbt parse` → `mdl drift --check` (real: classified **additive**) → `mdl drift
+--reconcile` (real: folds the safe change into the model) → `mdl drift` (clean) + `mdl validate`.
+**Story: drift is caught and classified; safe change folds in; work is never lost.**
+
+The Studio **canvas** is a browser UI, not terminal output — recorded separately as a browser
+screen capture, not a VHS tape. (Spotlight clips for structural merge, multi-target compile, and
+the AI/MCP surface can be added the same way these films are built.)
+
+## Rendering
+
+Requirements (macOS):
+
+```bash
+brew install vhs ffmpeg
+brew install --cask font-jetbrains-mono
+uv sync   # so .venv/bin/mdl exists — the tapes put it on PATH for a fast, clean `mdl`
+```
+
+Then:
+
+```bash
+demos/render.sh        # render all films → demos/out/*.mp4
+demos/render.sh 3      # just film 3
+```
+
+## How the tapes work
+
+- **`tapes/_settings.tape`** — shared look: JetBrains Mono 22px, 1280×900 (tall enough that a
+  continuous session doesn't scroll earlier scenes off the top), the Modelith amber theme, 70ms
+  typing. `Source`d by every film; tune once here.
+- Each film has ONE **hidden setup block** (`Hide … Show`) that puts a fast `mdl` on PATH from
+  the project venv and copies the film's fixture to a throwaway `/tmp/mdl-film*` dir. After that
+  the whole arc runs in one session; the on-screen `clear`s are scene breaks, not resets.
+- `setopt interactivecomments` lets the narration `# …` lines show as comments in zsh.
+- Timing is **fixed `Sleep`s** sized to the CLI's ~2s startup plus a reading beat (not `Wait`,
+  which raced the slow start and echoed keystrokes).
+- Fixtures: the bundled `demo/` models (ibor, legacy-warehouse), the greenfield `fixtures/shop`
+  model, and `fixtures/add-broker-code.sh` (the real warehouse edit for film 3).
+
+## Re-rendering when the CLI changes
+
+The films drive the real `mdl` + `dbt`, so a change can alter the output. After upgrading:
+`uv sync`, then `demos/render.sh`, and watch the new films. If a command's flags changed, edit
+the matching `.tape` (commands are plain text) and re-render just that one.
diff --git a/demos/design-assets/canvas-reference.jpg b/demos/design-assets/canvas-reference.jpg
new file mode 100644
index 0000000..bafda7c
Binary files /dev/null and b/demos/design-assets/canvas-reference.jpg differ
diff --git a/demos/design-assets/canvas-tokens.css b/demos/design-assets/canvas-tokens.css
new file mode 100644
index 0000000..1e4e963
--- /dev/null
+++ b/demos/design-assets/canvas-tokens.css
@@ -0,0 +1,63 @@
+/* REAL design tokens + entity-card CSS, extracted verbatim from the Modelith Studio canvas
+   (canvas/src/styles.css). Use these EXACT values in the animation so the ER diagram matches
+   the real product. The screenshot canvas-reference.jpg shows how these render live. */
+
+:root {
+  --bg: #14110f;          /* warm charcoal background */
+  --bg-raised: #1c1815;   /* panels, toolbar */
+  --bg-card: #221d19;     /* entity cards, inputs */
+  --border: #33291f;
+  --border-strong: #4a3c2c;
+  --text: #ece6dd;
+  --text-dim: #a89a86;
+  --accent: #e0a63a;      /* brand amber */
+  --accent-soft: rgba(224, 166, 58, 0.15);
+  --accent-ink: #241a08;
+  --pk: #f2c14e;          /* primary-key gold */
+  --err: #f0857a;
+  --warn: #e6a94a;
+  --ok: #6cbf73;          /* success green */
+  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
+}
+
+/* --- the real entity card (ER node) --- */
+.entity-node {
+  width: 264px; background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-top: 3px solid var(--accent);   /* amber top edge — the signature */
+  border-radius: 10px; overflow: hidden;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+  font-size: 12px;
+}
+.entity-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 12px; background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--border);
+}
+.entity-name { font-weight: 700; font-size: 13px; letter-spacing: 0.01em; color: var(--text); }
+.entity-badges { display: flex; gap: 4px; }
+/* pattern badge: SCD2 / HUB / LINK / SAT tags (amber pill). ontology badge is blue. */
+.badge {
+  font-size: 10px; padding: 1px 6px; border-radius: 99px;
+  background: var(--accent-soft); color: var(--accent);
+  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
+}
+.badge.ontology { background: rgba(147, 197, 253, 0.12); color: #93c5fd; }
+
+/* the PK/FK key rows sit in their own faintly-gold section at the top of the card body */
+.attr-section.keys { border-bottom: 1px solid var(--border); background: rgba(252, 211, 77, 0.04); }
+.attr-section { padding: 4px 0; }
+.attr-row {
+  display: flex; align-items: center; gap: 6px;
+  padding: 3px 12px; height: 26px; line-height: 20px;
+}
+.attr-icon { width: 14px; text-align: center; font-size: 10px; flex: none; }  /* role glyph, e.g. a key for PK */
+.attr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.attr-name.pk { color: var(--pk); font-weight: 600; }   /* primary key rows render in gold */
+.attr-type { color: var(--text-dim); font-family: var(--mono); font-size: 10px; flex: none; }  /* type, right-aligned, mono, dim */
+
+/* relationship lines between cards: thin, dim, dashed; crow's-foot at the "many" end */
+.rel-path { stroke: var(--border-strong); stroke-width: 1.6; }  /* in the live canvas these are dashed amber-grey */
+
+/* the canvas background is var(--bg) with a faint dot grid (#33291f dots, ~22px gap) */
diff --git a/demos/fixtures/add-broker-code.sh b/demos/fixtures/add-broker-code.sh
new file mode 100644
index 0000000..83a4363
--- /dev/null
+++ b/demos/fixtures/add-broker-code.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+# A teammate adds a broker_code column to the transaction model and its contract.
+set -e
+sql=transform/warehouse/models/transaction.sql
+schema=transform/warehouse/models/schema.yml
+
+# add the column to the model's SELECT (a real dbt column)
+perl -0pi -e 's/(    counterparty_id\n)(from source\n-- mdl:generated-end)/$1    , cast(null as varchar) as broker_code\n$2/' "$sql"
+
+# declare it in the enforced contract (so dbt knows its type)
+python3 - "$schema" <<'PY'
+import sys
+f = sys.argv[1]
+s = open(f).read()
+i = s.find("- name: transaction\n")
+j = s.find("columns:\n", i) + len("columns:\n")
+block = ("      - name: broker_code\n"
+         "        data_type: VARCHAR\n"
+         "        meta:\n"
+         "          mdl_ulid: 01M3XBROKERCODE0000000000X\n")
+open(f, "w").write(s[:j] + block + s[j:])
+PY
+echo "warehouse: + transaction.broker_code (SQL + contract)"
diff --git a/demos/fixtures/shop/.gitignore b/demos/fixtures/shop/.gitignore
new file mode 100644
index 0000000..ef142c7
--- /dev/null
+++ b/demos/fixtures/shop/.gitignore
@@ -0,0 +1,9 @@
+# dbt build artifacts (generated projects live here by default)
+target/
+dbt_packages/
+logs/
+# Fetched ontology layers — pinned by .mdl/lock.yaml, not committed (spec §3).
+# Run `mdl ontology fetch` to repopulate. Like node_modules to package-lock.json.
+.mdl/ontology-cache/
+# Reverse/generation working state (the committed lock/decisions stay tracked).
+.mdl/state/
diff --git a/demos/fixtures/shop/.mdl/lock.yaml b/demos/fixtures/shop/.mdl/lock.yaml
new file mode 100644
index 0000000..84c4e63
--- /dev/null
+++ b/demos/fixtures/shop/.mdl/lock.yaml
@@ -0,0 +1,6 @@
+dbt: '1.9'
+osi:
+  tag: osi-0.1.1-rc1
+  version: 0.1.1
+vocabularies: {}
+profiles: {}
diff --git a/demos/fixtures/shop/conceptual/entities/customer.yaml b/demos/fixtures/shop/conceptual/entities/customer.yaml
new file mode 100644
index 0000000..416d784
--- /dev/null
+++ b/demos/fixtures/shop/conceptual/entities/customer.yaml
@@ -0,0 +1,3 @@
+id: 01M3WS6GDGNDJSQ8J69WPTEC02
+kind: conceptual_entity
+name: Customer
diff --git a/demos/fixtures/shop/conceptual/entities/order.yaml b/demos/fixtures/shop/conceptual/entities/order.yaml
new file mode 100644
index 0000000..7b30bf8
--- /dev/null
+++ b/demos/fixtures/shop/conceptual/entities/order.yaml
@@ -0,0 +1,3 @@
+id: 01M3WS6MYM4HWTS7Z022BFS98T
+kind: conceptual_entity
+name: Order
diff --git a/demos/fixtures/shop/conceptual/entities/order_line.yaml b/demos/fixtures/shop/conceptual/entities/order_line.yaml
new file mode 100644
index 0000000..651d06c
--- /dev/null
+++ b/demos/fixtures/shop/conceptual/entities/order_line.yaml
@@ -0,0 +1,3 @@
+id: 01M3WS6Q5Y8C3J4GH1B3Q3TCDR
+kind: conceptual_entity
+name: OrderLine
diff --git a/demos/fixtures/shop/conceptual/entities/product.yaml b/demos/fixtures/shop/conceptual/entities/product.yaml
new file mode 100644
index 0000000..efff24c
--- /dev/null
+++ b/demos/fixtures/shop/conceptual/entities/product.yaml
@@ -0,0 +1,3 @@
+id: 01M3WS6JBQ4NRR17WNYA2N7527
+kind: conceptual_entity
+name: Product
diff --git a/demos/fixtures/shop/logical/domains/identifier_bigint.yaml b/demos/fixtures/shop/logical/domains/identifier_bigint.yaml
new file mode 100644
index 0000000..b89b16f
--- /dev/null
+++ b/demos/fixtures/shop/logical/domains/identifier_bigint.yaml
@@ -0,0 +1,5 @@
+id: 01M3WS6D96RM44FGPXP6CQ52VA
+kind: domain
+name: identifier_bigint
+base_type: bigint
+definition: A surrogate or business identifier stored as a 64-bit integer.
diff --git a/demos/fixtures/shop/logical/entities/customer.yaml b/demos/fixtures/shop/logical/entities/customer.yaml
new file mode 100644
index 0000000..1c642eb
--- /dev/null
+++ b/demos/fixtures/shop/logical/entities/customer.yaml
@@ -0,0 +1,25 @@
+id: 01M3WS6GDGEEH1Y8WHQ6MV3V3F
+kind: logical_entity
+name: customer
+realises: 01M3WS6GDGNDJSQ8J69WPTEC02
+attributes:
+- id: 01NHT44FHT243W0EC7NYE7XT5G
+  name: customer_id
+  domain: identifier_bigint
+  role: business_key
+  nullable: false
+- id: 019KNST7XJ2DKXTC87G0EA3HKH
+  name: email
+  domain: string
+  role: attribute
+  nullable: false
+- id: 019GDP66FGFQKT68CFVR3ZM8FQ
+  name: full_name
+  domain: string
+  role: attribute
+  nullable: false
+- id: 01QP2BSPBXG463YDY605ZJ69J9
+  name: created_at
+  domain: timestamp
+  role: attribute
+  nullable: false
diff --git a/demos/fixtures/shop/logical/entities/order.yaml b/demos/fixtures/shop/logical/entities/order.yaml
new file mode 100644
index 0000000..d20dd5e
--- /dev/null
+++ b/demos/fixtures/shop/logical/entities/order.yaml
@@ -0,0 +1,25 @@
+id: 01M3WS6MYM4WC27B98H8N0FMEE
+kind: logical_entity
+name: order
+realises: 01M3WS6MYM4HWTS7Z022BFS98T
+attributes:
+- id: 01FRDRCCE2C2AE7XW43T7G043M
+  name: order_id
+  domain: identifier_bigint
+  role: business_key
+  nullable: false
+- id: 014BKSP4BRDZZSKSTC1T5T3SVK
+  name: customer_id
+  domain: identifier_bigint
+  role: attribute
+  nullable: false
+- id: 01A7ZKYFT9P1Y63R1W01RC442D
+  name: order_date
+  domain: date
+  role: attribute
+  nullable: false
+- id: 010BHNZSXXY1G3J01ZSR27NP9R
+  name: status
+  domain: string
+  role: attribute
+  nullable: false
diff --git a/demos/fixtures/shop/logical/entities/order_line.yaml b/demos/fixtures/shop/logical/entities/order_line.yaml
new file mode 100644
index 0000000..bdfdc6b
--- /dev/null
+++ b/demos/fixtures/shop/logical/entities/order_line.yaml
@@ -0,0 +1,25 @@
+id: 01M3WS6Q5YM32P4ZWX3DQQF4TG
+kind: logical_entity
+name: order_line
+realises: 01M3WS6Q5Y8C3J4GH1B3Q3TCDR
+attributes:
+- id: 01E27JA246C69XXSNHG3G5NXSM
+  name: order_line_id
+  domain: identifier_bigint
+  role: business_key
+  nullable: false
+- id: 01WCBNMDRE9XY1MFNG29G1XKHH
+  name: order_id
+  domain: identifier_bigint
+  role: attribute
+  nullable: false
+- id: 01EBXNY3SSNY6DVMFR1W3KQQVS
+  name: product_id
+  domain: identifier_bigint
+  role: attribute
+  nullable: false
+- id: 01M260C4FKNHRBXRFKY69QG3R3
+  name: quantity
+  domain: integer
+  role: attribute
+  nullable: false
diff --git a/demos/fixtures/shop/logical/entities/product.yaml b/demos/fixtures/shop/logical/entities/product.yaml
new file mode 100644
index 0000000..5057fa5
--- /dev/null
+++ b/demos/fixtures/shop/logical/entities/product.yaml
@@ -0,0 +1,25 @@
+id: 01M3WS6JBQXS2JC5461EEYEZJD
+kind: logical_entity
+name: product
+realises: 01M3WS6JBQ4NRR17WNYA2N7527
+attributes:
+- id: 01A3Y3VYBXYFQKQP4CBWFG7NY9
+  name: product_id
+  domain: identifier_bigint
+  role: business_key
+  nullable: false
+- id: 0146BZKSG0FJ1T646003JCC9NK
+  name: sku
+  domain: string
+  role: attribute
+  nullable: false
+- id: 01KG5MDJ2A5Y3RDSHQZNGFRBXT
+  name: name
+  domain: string
+  role: attribute
+  nullable: false
+- id: 0121ZQHKJC7J9SQKXPA9SQY3ME
+  name: unit_price
+  domain: decimal
+  role: attribute
+  nullable: false
diff --git a/demos/fixtures/shop/mdl-project.yaml b/demos/fixtures/shop/mdl-project.yaml
new file mode 100644
index 0000000..c4e3277
--- /dev/null
+++ b/demos/fixtures/shop/mdl-project.yaml
@@ -0,0 +1,37 @@
+# Modelith project config (spec §2.2)
+name: shop
+dbt_target: duckdb_dev
+platform_targets:
+  - duckdb_dev
+# Ontology sources plug in by declaration. A source is either a local file
+# vocabulary (default type: local) or a remote resolver browsed live for
+# autocomplete/search (types: ols, ols-compatible, ontoportal, collibra). FIBO is
+# only one example — ACORD / FHIR / ISO 20022 / your own plug in the same way.
+# ontology_stack:
+#   - name: fibo                       # local file vocabulary
+#     layer: industry
+#     format: turtle
+#     path: ontologies/industry/fibo/2024.03
+#     modules: [fnd, fbc]
+#     prefixes:
+#       fibo-fnd-pty-pty: "https://spec.edmcouncil.org/fibo/ontology/FND/Parties/Parties/"
+#   - name: ols                        # public OLS4 (no auth) — live search only
+#     layer: industry
+#     type: ols
+#     url: https://www.ebi.ac.uk/ols4/api
+#   - name: bioportal                  # OntoPortal/BioPortal (needs an API key)
+#     layer: domain
+#     type: ontoportal
+#     url: https://data.bioontology.org
+#     apikey_env: BIOPORTAL_APIKEY
+#   - name: collibra                   # Collibra Ontology Domains (bearer token)
+#     layer: core
+#     type: collibra
+#     url: https://acme.collibra.com
+#     token_env: COLLIBRA_TOKEN
+#     domain_types: [Ontology]
+ontology_stack: []
+naming:
+  logical_case: snake
+  physical_case: upper_snake
+  abbreviations: {}
diff --git a/demos/landing/index.html b/demos/landing/index.html
new file mode 100644
index 0000000..5b6312c
--- /dev/null
+++ b/demos/landing/index.html
@@ -0,0 +1,261 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Modelith — the modeling layer dbt-core is missing</title>
+<meta name="description" content="Design entities and relationships in git, generate contract-enforced dbt, and catch drift before it ships. Ontology-anchored, git-native data modeling.">
+<meta property="og:title" content="Modelith — model in git, generate dbt, catch drift">
+<meta property="og:description" content="Design your model as an ER diagram, generate dbt from it, reverse an existing warehouse, and get told exactly what drifted.">
+<meta property="og:type" content="website">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<style>
+:root{
+  --bg:#14110f; --raised:#1c1815; --card:#221d19; --border:#33291f; --border2:#4a3c2c;
+  --text:#ece6dd; --dim:#a89a86; --accent:#e0a63a; --soft:rgba(224,166,58,0.12);
+  --pk:#f2c14e; --ok:#6cbf73; --blue:#93c5fd;
+  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Inter",-apple-system,"Segoe UI",sans-serif;
+}
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5;
+  background-image:radial-gradient(circle at 1px 1px,#241d16 1px,transparent 0);background-size:26px 26px}
+a{color:var(--accent);text-decoration:none}
+a:hover{text-decoration:underline}
+.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
+code,.mono{font-family:var(--mono)}
+
+/* nav */
+nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(20,17,15,.82);border-bottom:1px solid var(--border)}
+.nav{display:flex;align-items:center;gap:16px;height:64px}
+.logo{font-size:22px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
+.logo .mark{color:var(--accent);font-size:24px}
+.nav .sp{flex:1}
+.nav a.navlink{color:var(--dim);font-size:15px;font-weight:500}
+.nav a.navlink:hover{color:var(--text);text-decoration:none}
+.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid var(--border2);background:var(--card);color:var(--text);cursor:pointer}
+.btn:hover{border-color:var(--accent);text-decoration:none}
+.btn.primary{background:var(--accent);color:#241a08;border-color:var(--accent)}
+.btn.primary:hover{filter:brightness(1.07)}
+
+/* hero */
+.hero{padding:88px 0 56px;text-align:center}
+.pill{display:inline-block;padding:6px 14px;border-radius:99px;background:var(--soft);color:var(--accent);font-size:13px;font-weight:600;border:1px solid rgba(224,166,58,.3);margin-bottom:26px}
+h1{font-size:clamp(34px,5.4vw,60px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:0 auto 22px;max-width:17ch}
+h1 .hl{color:var(--accent)}
+.sub{font-size:clamp(17px,2.2vw,21px);color:var(--dim);max-width:60ch;margin:0 auto 34px}
+.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
+.install{margin:34px auto 0;max-width:620px;background:#100d0b;border:1px solid var(--border);border-radius:12px;
+  font-family:var(--mono);font-size:15px;text-align:left;padding:16px 20px;color:var(--text);overflow-x:auto}
+.install .c{color:var(--dim)}
+.install .p{color:var(--accent)}
+
+/* section */
+section{padding:66px 0}
+.eyebrow{color:var(--accent);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
+h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
+.lead{color:var(--dim);font-size:18px;max-width:62ch;margin:0 0 40px}
+
+/* demo gallery */
+.demos{display:grid;grid-template-columns:1fr;gap:40px}
+.demo{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
+@media(min-width:860px){.demo{grid-template-columns:1.35fr 1fr}.demo.flip .vid{order:2}.demo.flip .txt{order:1}}
+.vid{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 14px 48px rgba(0,0,0,.5)}
+.vid video{display:block;width:100%;height:auto}
+.txt h3{font-size:22px;margin:0 0 10px;font-weight:700}
+.txt .n{color:var(--accent);font-family:var(--mono);font-size:14px;font-weight:600;margin-bottom:8px}
+.txt p{color:var(--dim);margin:0 0 10px;font-size:16px}
+.txt .cmd{font-family:var(--mono);font-size:13px;color:var(--text);background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);padding:8px 12px;border-radius:8px;display:inline-block}
+
+/* feature grid */
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
+.feat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;border-top:3px solid var(--accent)}
+.feat h3{margin:0 0 8px;font-size:18px}
+.feat p{margin:0;color:var(--dim);font-size:15px}
+
+/* targets */
+.targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
+.tgt{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;border-left:3px solid var(--accent)}
+.tgt b{font-size:16px}
+.tgt code{display:block;color:var(--dim);font-size:13px;margin-top:6px}
+
+/* final cta */
+.final{text-align:center;background:linear-gradient(180deg,transparent,rgba(224,166,58,.04));border-top:1px solid var(--border)}
+
+footer{border-top:1px solid var(--border);padding:34px 0;color:var(--dim);font-size:14px}
+.footrow{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
+.footrow .sp{flex:1}
+</style>
+</head>
+<body>
+
+<nav><div class="wrap nav">
+  <span class="logo"><span class="mark">◮</span> Modelith</span>
+  <span class="sp"></span>
+  <a class="navlink" href="#demos">Demos</a>
+  <a class="navlink" href="#features">Features</a>
+  <a class="navlink" href="#targets">Compile targets</a>
+  <a class="btn" href="https://github.com/dbose/modelith">GitHub</a>
+</div></nav>
+
+<header class="hero"><div class="wrap">
+  <span class="pill">git-native · ontology-anchored · dbt-core</span>
+  <h1>The modeling layer <span class="hl">dbt-core is missing</span></h1>
+  <p class="sub">Design entities and relationships in git, generate contract-enforced dbt, and
+    catch drift before it ships. One model every tool reads and writes — the CLI, the canvas,
+    VS Code, and CI.</p>
+  <div class="cta">
+    <a class="btn primary" href="#demos">Watch it work ↓</a>
+    <a class="btn" href="https://github.com/dbose/modelith">Star on GitHub</a>
+  </div>
+  <div class="install">
+    <div><span class="c"># no cloud warehouse needed — the demo builds on a bundled DuckDB</span></div>
+    <div><span class="p">$</span> uv tool install 'modelith-dbt[ontology]'</div>
+    <div><span class="p">$</span> mdl init my-model</div>
+    <div><span class="p">$</span> mdl generate   <span class="c"># → contract-enforced dbt</span></div>
+  </div>
+</div></header>
+
+<section id="demos"><div class="wrap">
+  <div class="eyebrow">See it</div>
+  <h2>Six flows, end to end</h2>
+  <p class="lead">Every command and every line of output below is real. Nothing is mocked.</p>
+
+  <div class="demos">
+
+    <div class="demo">
+      <div class="vid"><video src="media/Main.mp4" autoplay loop muted playsinline></video></div>
+      <div class="txt">
+        <div class="n">01 · Design-first</div>
+        <h3>From a blank repo to running dbt</h3>
+        <p>Scaffold a model, add entities (ULIDs minted for you), validate, and compile to
+          contract-enforced dbt — plus an ODCS data contract from the same model.</p>
+        <span class="cmd">mdl init · new entity · validate · generate</span>
+      </div>
+    </div>
+
+    <div class="demo flip">
+      <div class="vid"><video src="media/Adopt.mp4" autoplay loop muted playsinline></video></div>
+      <div class="txt">
+        <div class="n">02 · Adopt a warehouse</div>
+        <h3>Reverse a legacy dbt project into a clean model</h3>
+        <p>Point it at a warehouse with no data model. It excludes staging, detects SCD2 and
+          Data Vault, strips surrogate keys, and logs every inference in a reviewable ledger.</p>
+        <span class="cmd">mdl reverse --project target/manifest.json</span>
+      </div>
+    </div>
+
+    <div class="demo">
+      <div class="vid"><video src="media/Drift.mp4" autoplay loop muted playsinline></video></div>
+      <div class="txt">
+        <div class="n">03 · The drift gate</div>
+        <h3>Model and warehouse, always in lockstep</h3>
+        <p>A column lands in the warehouse. Drift classifies it — additive, not breaking —
+          and reconcile folds the safe change into the model. Nothing is ever lost.</p>
+        <span class="cmd">mdl drift --check · --reconcile</span>
+      </div>
+    </div>
+
+    <div class="demo flip">
+      <div class="vid"><video src="media/Ontology.mp4" autoplay loop muted playsinline></video></div>
+      <div class="txt">
+        <div class="n">04 · Ontology anchoring</div>
+        <h3>Align to an industry vocabulary</h3>
+        <p>Search FIBO (or any OLS / OntoPortal / Collibra source), align an entity to a
+          standard term, and track coverage — anchored, reproducible, offline.</p>
+        <span class="cmd">mdl ontology search · align · status</span>
+      </div>
+    </div>
+
+    <div class="demo">
+      <div class="vid"><video src="media/Erwin.mp4" autoplay loop muted playsinline></video></div>
+      <div class="txt">
+        <div class="n">05 · Erwin import</div>
+        <h3>Bring an erwin model into git</h3>
+        <p>Import an erwin XML export straight into clean logical YAML you can version, diff,
+          and generate from. The migration path off a legacy modeling tool.</p>
+        <span class="cmd">mdl import erwin fund.xml -o fund</span>
+      </div>
+    </div>
+
+    <div class="demo flip">
+      <div class="vid"><video src="media/Compile.mp4" autoplay loop muted playsinline></video></div>
+      <div class="txt">
+        <div class="n">06 · One model, many targets</div>
+        <h3>A contract factory</h3>
+        <p>From one definition: contract-enforced dbt, an ODCS data contract, Pydantic models,
+          SQL DDL, Mermaid, DBML, RDF/SHACL, and a Neo4j graph schema — each deterministic.</p>
+        <span class="cmd">mdl generate · export · emit</span>
+      </div>
+    </div>
+
+  </div>
+</div></section>
+
+<section id="features"><div class="wrap">
+  <div class="eyebrow">Why</div>
+  <h2>Meaning lives in one place, in git</h2>
+  <p class="lead">Warehouse teams scatter their meaning across an ER tool that never sees
+    production, dbt SQL that drifts from the design, and a catalog nobody edits. Modelith
+    collapses them into one model every surface reads and writes.</p>
+  <div class="grid">
+    <div class="feat"><h3>Contract-enforced dbt</h3><p>Generate dbt-core models with enforced
+      contracts, key constraints, and relationship tests. Regeneration runs a three-way merge,
+      so hand edits and generated blocks both survive.</p></div>
+    <div class="feat"><h3>Drift as a CI gate</h3><p>Compare the committed model to the compiled
+      warehouse. Breaking / additive / cosmetic, classified in seconds. <code>--check</code>
+      fails the PR; <code>--reconcile</code> folds the safe deltas back in.</p></div>
+    <div class="feat"><h3>Reverse any warehouse</h3><p>A live database, a dbt manifest, or raw
+      SQL DDL, lifted into a clean model — SCD2 and Data Vault detected, surrogates stripped,
+      every inference reviewable.</p></div>
+    <div class="feat"><h3>Ontology-anchored</h3><p>A four-layer vocabulary stack with SKOS
+      alignments and provenance. Pin bundles like dependencies; resolve against OLS, OntoPortal,
+      or Collibra — reproducibly, offline.</p></div>
+    <div class="feat"><h3>Structural git merge</h3><p>A ULID-keyed merge driver: two people add
+      different attributes to the same entity and merge clean. A rename is one cosmetic change,
+      not a delete-plus-add.</p></div>
+    <div class="feat"><h3>Every surface is a client</h3><p>The model is plain YAML in git. The
+      CLI, the web canvas, the VS Code extension, and CI all read and write it — none of them
+      owns state.</p></div>
+  </div>
+</div></section>
+
+<section id="targets"><div class="wrap">
+  <div class="eyebrow">Model once, ship many</div>
+  <h2>One model compiles to every target it needs</h2>
+  <p class="lead">Each generated deterministically from the single definition.</p>
+  <div class="targets">
+    <div class="tgt"><b>dbt-core</b><code>mdl generate</code></div>
+    <div class="tgt"><b>ODCS data contract</b><code>mdl export contract</code></div>
+    <div class="tgt"><b>Pydantic</b><code>mdl emit pydantic</code></div>
+    <div class="tgt"><b>Neo4j graph</b><code>mdl export graph</code></div>
+    <div class="tgt"><b>Semantic layer</b><code>mdl emit semantic</code></div>
+    <div class="tgt"><b>RDF / SHACL</b><code>mdl export rdf</code></div>
+    <div class="tgt"><b>SQL DDL</b><code>mdl export sql</code></div>
+    <div class="tgt"><b>Mermaid ERD</b><code>mdl export mermaid</code></div>
+    <div class="tgt"><b>DBML</b><code>mdl export dbml</code></div>
+  </div>
+</div></section>
+
+<section class="final"><div class="wrap">
+  <h2>Try it in two minutes</h2>
+  <p class="lead" style="margin:0 auto 28px">No cloud warehouse. The IBoR demo ships a model and
+    a dbt project over a bundled DuckDB, so it builds on a laptop.</p>
+  <div class="cta">
+    <a class="btn primary" href="https://github.com/dbose/modelith">Get started on GitHub</a>
+    <a class="btn" href="https://pypi.org/project/modelith-dbt/">modelith-dbt on PyPI</a>
+  </div>
+</div></section>
+
+<footer><div class="wrap footrow">
+  <span class="logo" style="font-size:18px"><span class="mark">◮</span> Modelith</span>
+  <span class="sp"></span>
+  <a href="https://github.com/dbose/modelith">GitHub</a>
+  <a href="https://pypi.org/project/modelith-dbt/">PyPI</a>
+  <span style="color:var(--border2)">·</span>
+  <span>Apache-2.0</span>
+</div></footer>
+
+</body>
+</html>
diff --git a/demos/landing/media/Adopt.mp4 b/demos/landing/media/Adopt.mp4
new file mode 100644
index 0000000..81a9d2e
Binary files /dev/null and b/demos/landing/media/Adopt.mp4 differ
diff --git a/demos/landing/media/Compile.mp4 b/demos/landing/media/Compile.mp4
new file mode 100644
index 0000000..5d97080
Binary files /dev/null and b/demos/landing/media/Compile.mp4 differ
diff --git a/demos/landing/media/Drift.mp4 b/demos/landing/media/Drift.mp4
new file mode 100644
index 0000000..49916c6
Binary files /dev/null and b/demos/landing/media/Drift.mp4 differ
diff --git a/demos/landing/media/Erwin.mp4 b/demos/landing/media/Erwin.mp4
new file mode 100644
index 0000000..21d47cd
Binary files /dev/null and b/demos/landing/media/Erwin.mp4 differ
diff --git a/demos/landing/media/Main.mp4 b/demos/landing/media/Main.mp4
new file mode 100644
index 0000000..fb0524e
Binary files /dev/null and b/demos/landing/media/Main.mp4 differ
diff --git a/demos/landing/media/Ontology.mp4 b/demos/landing/media/Ontology.mp4
new file mode 100644
index 0000000..297a6b4
Binary files /dev/null and b/demos/landing/media/Ontology.mp4 differ
diff --git a/demos/render.sh b/demos/render.sh
new file mode 100755
index 0000000..ba7770d
--- /dev/null
+++ b/demos/render.sh
@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+# Render the Modelith CLI demo tapes to MP4 under demos/out/.
+#
+# Requirements: vhs, ffmpeg, the JetBrains Mono font, and the project venv:
+#   brew install vhs ffmpeg && brew install --cask font-jetbrains-mono && uv sync
+# The tapes put a fast `mdl` on PATH from .venv/bin so recorded commands start quickly and
+# show a clean `mdl`.
+#
+# Usage:
+#   demos/render.sh            # every tape
+#   demos/render.sh a-ibor     # one series (matches the path)
+#   demos/render.sh a3         # one chapter (matches the filename)
+set -euo pipefail
+
+cd "$(dirname "$0")/.."   # repo root, so each tape's demos/... paths resolve
+
+filter="${1:-}"
+shopt -s nullglob
+tapes=(demos/tapes/films/[0-9]*.tape)
+
+for tape in "${tapes[@]}"; do
+  if [[ -n "$filter" && "$tape" != *"$filter"* ]]; then continue; fi
+  echo "▶ rendering $tape"
+  vhs "$tape"
+done
+
+echo "✓ done — outputs in demos/out/"
+ls -lh demos/out/*.mp4 2>/dev/null | awk '{print $9, $5}' || true
diff --git a/demos/standalone/Adopt.html b/demos/standalone/Adopt.html
new file mode 100644
index 0000000..322195a
--- /dev/null
+++ b/demos/standalone/Adopt.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920">
+<title>Adopt a warehouse</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
+<style>
+html,body{margin:0;background:#14110f}
+
+:root{
+  --bg:#14110f; --raised:#1c1815; --card:#221d19; --border:#33291f; --border2:#4a3c2c;
+  --text:#ece6dd; --dim:#a89a86; --accent:#e0a63a; --soft:rgba(224,166,58,0.15);
+  --pk:#f2c14e; --ok:#6cbf73; --blue:#93c5fd; --warn:#e6a94a;
+  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Inter",-apple-system,sans-serif;
+}
+body{margin:0}
+.ter-row{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
+.ter-row.on{opacity:1;transform:none}
+.enode{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.35);
+  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .55s ease,transform .55s ease}
+.enode.on{opacity:1;transform:none}
+.ehead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
+.ename{font-weight:700;font-size:16px}
+.badge{font-size:12px;padding:1px 7px;border-radius:99px;background:var(--soft);color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
+.arow{display:flex;align-items:center;gap:6px;padding:4px 14px;height:30px;line-height:22px}
+.aname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
+.aname.pk{color:var(--pk);font-weight:600}
+.fk{font-size:11px;padding:0 6px;border-radius:99px;background:var(--soft);color:var(--accent);margin-left:6px}
+.atype{color:var(--dim);font-family:var(--mono);font-size:13px}
+.ln{stroke:var(--border2);stroke-width:2;fill:none;stroke-dasharray:6 6;opacity:0;transition:opacity .6s ease}
+.ln.on{opacity:1}
+.blink{animation:blink 1s steps(2,start) infinite}
+@keyframes blink{to{opacity:0}}
+.sqlchip{position:absolute;padding:8px 12px;border-radius:7px;background:#1a1613;border:1px solid var(--border);font-family:var(--mono);font-size:13px;color:var(--dim);transition:opacity .6s ease,transform .6s ease}
+.sqlchip.gone{opacity:0;transform:scale(.8)}
+
+</style>
+</head>
+<body>
+<div id="root"><div style="width:1920px;height:1080px;box-sizing:border-box;background:var(--bg);color:var(--text);font-family:var(--sans);display:flex;flex-direction:column;overflow:hidden">
+
+  <div style="padding:34px 56px 0 56px;display:flex;align-items:baseline;gap:18px">
+    <span style="font-size:30px;color:var(--accent)">◮</span>
+    <span style="font-size:30px;font-weight:700;letter-spacing:.01em">Modelith</span>
+    <span style="font-size:20px;color:var(--dim);font-family:var(--mono)">reverse</span>
+    <span style="margin-left:auto;font-size:22px;color:var(--dim)">Point it at a legacy warehouse. Get a clean model back.</span>
+  </div>
+
+  <div style="flex:1;display:flex;gap:40px;padding:28px 56px 48px 56px;min-height:0">
+
+    <!-- TERMINAL -->
+    <div style="width:1040px;flex:none;background:#100d0b;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)">
+      <div style="height:40px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--raised)">
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="margin-left:10px;font-family:var(--mono);font-size:13px;color:var(--dim)">mdl — legacy-warehouse</span>
+      </div>
+      <div style="flex:1;padding:22px 26px;font-family:var(--mono);font-size:17px;line-height:1.6;overflow:hidden">
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> ls models/staging models/marts models/vault</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="color:var(--dim)">stg_customers.sql  dim_customer.sql  hub_customer.sql</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="color:var(--dim)">stg_orders.sql  fct_orders.sql  link_order.sql  sat_customer_details.sql</div>
+        <div style="height:12px"></div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl reverse --project target/manifest.json --out owned</div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row">reversed 6 entities <span style="color:var(--dim)">(4 staging/intermediate excluded)</span></div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="margin-top:8px;color:var(--ok);font-weight:600">kept as business entities (4)</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--dim);padding-left:16px">dim_customer, dim_product, fct_orders, hub_customer</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="margin-top:6px;color:#8ab6e0;font-weight:600">excluded as staging/intermediate (4)</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--dim);padding-left:16px">stg_customers, stg_orders, int_order_enriched, …</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="margin-top:6px;color:#8ab6e0;font-weight:600">SCD2 pattern detected (2)</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="color:var(--dim);padding-left:16px">dim_customer, dim_product</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="margin-top:6px;color:#8ab6e0;font-weight:600">Data Vault detected (3)</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="color:var(--dim);padding-left:16px">hub_customer, link_order, sat_customer_details</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="margin-top:6px;color:#8ab6e0;font-weight:600">surrogate keys stripped (7)</div>
+        <div style="height:10px"></div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl validate -m owned</div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row" style="color:var(--ok)">validation passed</div>
+        <div style="margin-top:10px"><span style="color:var(--accent)">$</span> <span class="blink" style="display:inline-block;width:10px;height:18px;background:var(--accent);vertical-align:-3px"></span></div>
+      </div>
+    </div>
+
+    <!-- ER DIAGRAM -->
+    <div style="flex:1;position:relative;min-width:0">
+      <div style="position:relative;width:700px;height:860px;margin:0 auto">
+
+        <!-- messy SQL chips (fade out on reverse) -->
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:40px;top:30px">stg_customers.sql</div>
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:230px;top:70px">stg_orders.sql</div>
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:430px;top:40px">int_order_enriched.sql</div>
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:120px;top:150px">dim_customer.sql</div>
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:360px;top:180px">fct_orders.sql</div>
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:60px;top:250px">hub_customer.sql</div>
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:300px;top:290px">link_order.sql</div>
+        <div class="sqlchip" data-cls="m1" data-clsbase="sqlchip" style="left:430px;top:360px">sat_customer_details.sql</div>
+
+        <!-- clean ER cards (snap in) -->
+        <svg style="position:absolute;left:0;top:0;width:700px;height:860px;overflow:visible" viewBox="0 0 700 860" preserveAspectRatio="none">
+          <path class="ln" data-cls="l1" data-clsbase="ln" d="M 170 230 L 170 470"></path>
+          <path class="ln" data-cls="l2" data-clsbase="ln" d="M 530 230 L 530 470"></path>
+        </svg>
+
+        <div class="enode" data-cls="c1" data-clsbase="enode" style="position:absolute;left:20px;top:40px;width:300px">
+          <div class="ehead"><span class="ename">dim_customer</span><span class="badge">SCD2</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 customer_id</span><span class="atype">integer</span></div>
+            <div class="arow"><span class="aname">name</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">tier</span><span class="atype">string</span></div>
+          </div>
+        </div>
+
+        <div class="enode" data-cls="c2" data-clsbase="enode" style="position:absolute;left:380px;top:40px;width:300px">
+          <div class="ehead"><span class="ename">dim_product</span><span class="badge">SCD2</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 product_id</span><span class="atype">integer</span></div>
+            <div class="arow"><span class="aname">sku</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">category</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">list_price</span><span class="atype">decimal</span></div>
+          </div>
+        </div>
+
+        <div class="enode" data-cls="c3" data-clsbase="enode" style="position:absolute;left:200px;top:480px;width:300px">
+          <div class="ehead"><span class="ename">fct_orders</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 order_id</span><span class="atype">integer</span></div>
+            <div class="arow"><span class="aname">customer_id <span class="fk">FK</span></span><span class="atype">integer</span></div>
+            <div class="arow"><span class="aname">product_id <span class="fk">FK</span></span><span class="atype">integer</span></div>
+            <div class="arow"><span class="aname">amount</span><span class="atype">decimal</span></div>
+          </div>
+        </div>
+
+        <div class="enode" data-cls="c4" data-clsbase="enode" style="position:absolute;left:20px;top:680px;width:300px">
+          <div class="ehead"><span class="ename">hub_customer</span><span class="badge">HUB</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 customer_id</span><span class="atype">integer</span></div>
+            <div class="arow"><span class="aname">load_dts</span><span class="atype">date</span></div>
+          </div>
+        </div>
+
+        <div class="enode" data-cls="c5" data-clsbase="enode" style="position:absolute;left:380px;top:680px;width:300px">
+          <div class="ehead"><span class="ename">link_order</span><span class="badge">LINK</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname">order_hashkey</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">load_dts</span><span class="atype">date</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div></div>
+<script>
+
+class Component {
+  constructor(){ this.state = { step: 0 }; }
+  componentDidMount(){
+    this._t = setInterval(() => {
+      this.setState(s => ({ step: (s.step + 1) % 11 }));
+    }, 1700);
+  }
+    renderVals(){
+    const st = this.state.step;
+    const on = (n) => st >= n ? 'on' : '';
+    return {
+      s1: on(1), s2: on(2), s3: on(3), s4: on(4), s5: on(6),
+      m1: st >= 3 ? 'gone' : '',
+      c1: on(3), c2: on(3), c3: on(4), c4: on(5), c5: on(5),
+      l1: on(4), l2: on(4)
+    };
+  }
+}
+
+const comp = new Component();
+const root = document.getElementById('root');
+function apply(){
+  const v = comp.renderVals();
+  root.querySelectorAll('[data-cls]').forEach(el=>{
+    const k = el.getAttribute('data-cls'); const base = el.getAttribute('data-clsbase')||'';
+    el.className = (base + ' ' + (v[k]||'')).trim();
+  });
+  root.querySelectorAll('*').forEach(el=>{
+    for (const a of el.attributes){
+      if (a.name.startsWith('data-style-')){
+        const prop = a.name.slice('data-style-'.length);
+        el.style.setProperty(prop, v[a.value] != null ? v[a.value] : '');
+      }
+    }
+  });
+  root.querySelectorAll('[data-text]').forEach(el=>{
+    const k = el.getAttribute('data-text'); el.textContent = v[k] != null ? v[k] : '';
+  });
+}
+comp.setState = function(fn){ comp.state = Object.assign({}, comp.state, typeof fn==='function'?fn(comp.state):fn); apply(); };
+apply();
+comp.componentDidMount && comp.componentDidMount();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/standalone/Compile.html b/demos/standalone/Compile.html
new file mode 100644
index 0000000..aae6aae
--- /dev/null
+++ b/demos/standalone/Compile.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920">
+<title>One model, many targets</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
+<style>
+html,body{margin:0;background:#14110f}
+
+:root{
+  --bg:#14110f; --raised:#1c1815; --card:#221d19; --border:#33291f; --border2:#4a3c2c;
+  --text:#ece6dd; --dim:#a89a86; --accent:#e0a63a; --soft:rgba(224,166,58,0.15);
+  --pk:#f2c14e; --ok:#6cbf73; --blue:#93c5fd;
+  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Inter",-apple-system,sans-serif;
+}
+body{margin:0}
+.ter-row{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
+.ter-row.on{opacity:1;transform:none}
+.enode{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.45)}
+.ehead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
+.ename{font-weight:700;font-size:16px}
+.arow{display:flex;align-items:center;gap:6px;padding:4px 14px;height:28px;line-height:20px}
+.aname{flex:1;font-size:14px}
+.aname.pk{color:var(--pk);font-weight:600}
+.atype{color:var(--dim);font-family:var(--mono);font-size:12px}
+.target{opacity:0;transform:scale(.8);transition:opacity .5s ease,transform .5s ease}
+.target.on{opacity:1;transform:scale(1)}
+.ray{stroke:var(--border2);stroke-width:2;fill:none;opacity:0;transition:opacity .5s ease}
+.ray.on{opacity:.6}
+.blink{animation:blink 1s steps(2,start) infinite}
+@keyframes blink{to{opacity:0}}
+
+</style>
+</head>
+<body>
+<div id="root"><div style="width:1920px;height:1080px;box-sizing:border-box;background:var(--bg);color:var(--text);font-family:var(--sans);display:flex;flex-direction:column;overflow:hidden">
+
+  <div style="padding:34px 56px 0 56px;display:flex;align-items:baseline;gap:18px">
+    <span style="font-size:30px;color:var(--accent)">◮</span>
+    <span style="font-size:30px;font-weight:700">Modelith</span>
+    <span style="font-size:20px;color:var(--dim);font-family:var(--mono)">compile</span>
+    <span style="margin-left:auto;font-size:22px;color:var(--dim)">One model. Compiled to every target it needs.</span>
+  </div>
+
+  <div style="flex:1;display:flex;gap:40px;padding:28px 56px 48px 56px;min-height:0">
+
+    <!-- TERMINAL -->
+    <div style="width:760px;flex:none;background:#100d0b;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)">
+      <div style="height:40px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--raised)">
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="margin-left:10px;font-family:var(--mono);font-size:13px;color:var(--dim)">mdl — ibor</span>
+      </div>
+      <div style="flex:1;padding:22px 26px;font-family:var(--mono);font-size:16px;line-height:1.75;overflow:hidden">
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl generate</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="color:var(--dim)">wrote 11 files to target/dbt</div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl export contract</div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row" style="color:var(--dim)">wrote contract to datacontract.yaml</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl emit pydantic</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--dim)">wrote pydantic to models.py</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl export sql --dialect postgres</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="color:var(--dim)">-- SQL DDL (postgres)</div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl export mermaid</div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row" style="color:var(--dim)">erDiagram …</div>
+        <div class="ter-row" data-cls="s6" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl export dbml</div>
+        <div class="ter-row" data-cls="s6" data-clsbase="ter-row" style="color:var(--dim)">// DBML …</div>
+        <div style="margin-top:12px"><span style="color:var(--accent)">$</span> <span class="blink" style="display:inline-block;width:10px;height:18px;background:var(--accent);vertical-align:-3px"></span></div>
+      </div>
+    </div>
+
+    <!-- RIGHT: model at center, targets fanning out -->
+    <div style="flex:1;position:relative;min-width:0">
+      <div style="position:relative;width:960px;height:860px;margin:0 auto">
+
+        <!-- rays -->
+        <svg style="position:absolute;left:0;top:0;width:960px;height:860px;overflow:visible" viewBox="0 0 960 860" preserveAspectRatio="none">
+          <path class="ray" data-cls="r1" data-clsbase="ray" d="M 480 430 L 760 150"></path>
+          <path class="ray" data-cls="r2" data-clsbase="ray" d="M 480 430 L 820 350"></path>
+          <path class="ray" data-cls="r3" data-clsbase="ray" d="M 480 430 L 820 540"></path>
+          <path class="ray" data-cls="r4" data-clsbase="ray" d="M 480 430 L 700 720"></path>
+          <path class="ray" data-cls="r5" data-clsbase="ray" d="M 480 430 L 230 150"></path>
+          <path class="ray" data-cls="r6" data-clsbase="ray" d="M 480 430 L 160 540"></path>
+        </svg>
+
+        <!-- center model card -->
+        <div class="enode" style="position:absolute;left:360px;top:330px;width:240px;border-top-width:4px">
+          <div class="ehead"><span class="ename">model</span><span style="font-size:12px;color:var(--dim);font-family:var(--mono)">one source of truth</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname">entities</span><span class="atype">7</span></div>
+            <div class="arow"><span class="aname">relationships</span><span class="atype">8</span></div>
+            <div class="arow"><span class="aname">contracts</span><span class="atype">enforced</span></div>
+          </div>
+        </div>
+
+        <!-- target chips -->
+        <div class="target" data-cls="t1" data-clsbase="target" style="position:absolute;left:700px;top:110px;padding:16px 20px;border-radius:12px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent)">
+          <div style="font-size:18px;font-weight:700">dbt-core</div>
+          <div style="color:var(--dim);font-size:13px">contract-enforced models</div>
+        </div>
+        <div class="target" data-cls="t2" data-clsbase="target" style="position:absolute;left:760px;top:320px;padding:16px 20px;border-radius:12px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--blue)">
+          <div style="font-size:18px;font-weight:700">ODCS contract</div>
+          <div style="color:var(--dim);font-size:13px">datacontract.yaml</div>
+        </div>
+        <div class="target" data-cls="t3" data-clsbase="target" style="position:absolute;left:760px;top:510px;padding:16px 20px;border-radius:12px;background:var(--card);border:1px solid var(--border);border-left:3px solid #c4a3e0">
+          <div style="font-size:18px;font-weight:700">Pydantic</div>
+          <div style="color:var(--dim);font-size:13px">models.py</div>
+        </div>
+        <div class="target" data-cls="t4" data-clsbase="target" style="position:absolute;left:580px;top:700px;padding:16px 20px;border-radius:12px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--ok)">
+          <div style="font-size:18px;font-weight:700">SQL DDL</div>
+          <div style="color:var(--dim);font-size:13px">CREATE TABLE · any dialect</div>
+        </div>
+        <div class="target" data-cls="t5" data-clsbase="target" style="position:absolute;left:70px;top:110px;padding:16px 20px;border-radius:12px;background:var(--card);border:1px solid var(--border);border-left:3px solid #7fb0d8">
+          <div style="font-size:18px;font-weight:700">Mermaid ERD</div>
+          <div style="color:var(--dim);font-size:13px">renders in GitHub</div>
+        </div>
+        <div class="target" data-cls="t6" data-clsbase="target" style="position:absolute;left:20px;top:510px;padding:16px 20px;border-radius:12px;background:var(--card);border:1px solid var(--border);border-left:3px solid #d98ba8">
+          <div style="font-size:18px;font-weight:700">DBML</div>
+          <div style="color:var(--dim);font-size:13px">dbdiagram.io</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div></div>
+<script>
+
+class Component {
+  constructor(){ this.state = { step: 0 }; }
+  componentDidMount(){ this._t = setInterval(() => this.setState(s => ({ step: (s.step + 1) % 10 })), 1500); }
+    renderVals(){
+    const st = this.state.step;
+    const on = (n) => st >= n ? 'on' : '';
+    return {
+      s1: on(1), s2: on(2), s3: on(3), s4: on(4), s5: on(5), s6: on(6),
+      t1: on(1), r1: on(1),
+      t2: on(2), r2: on(2),
+      t3: on(3), r3: on(3),
+      t4: on(4), r4: on(4),
+      t5: on(5), r5: on(5),
+      t6: on(6), r6: on(6)
+    };
+  }
+}
+
+const comp = new Component();
+const root = document.getElementById('root');
+function apply(){
+  const v = comp.renderVals();
+  root.querySelectorAll('[data-cls]').forEach(el=>{
+    const k = el.getAttribute('data-cls'); const base = el.getAttribute('data-clsbase')||'';
+    el.className = (base + ' ' + (v[k]||'')).trim();
+  });
+  root.querySelectorAll('*').forEach(el=>{
+    for (const a of el.attributes){
+      if (a.name.startsWith('data-style-')){
+        const prop = a.name.slice('data-style-'.length);
+        el.style.setProperty(prop, v[a.value] != null ? v[a.value] : '');
+      }
+    }
+  });
+  root.querySelectorAll('[data-text]').forEach(el=>{
+    const k = el.getAttribute('data-text'); el.textContent = v[k] != null ? v[k] : '';
+  });
+}
+comp.setState = function(fn){ comp.state = Object.assign({}, comp.state, typeof fn==='function'?fn(comp.state):fn); apply(); };
+apply();
+comp.componentDidMount && comp.componentDidMount();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/standalone/Drift.html b/demos/standalone/Drift.html
new file mode 100644
index 0000000..2777b36
--- /dev/null
+++ b/demos/standalone/Drift.html
@@ -0,0 +1,199 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920">
+<title>The drift gate</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
+<style>
+html,body{margin:0;background:#14110f}
+
+:root{
+  --bg:#14110f; --raised:#1c1815; --card:#221d19; --border:#33291f; --border2:#4a3c2c;
+  --text:#ece6dd; --dim:#a89a86; --accent:#e0a63a; --soft:rgba(224,166,58,0.15);
+  --pk:#f2c14e; --ok:#6cbf73; --warn:#e6a94a; --blue:#93c5fd;
+  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Inter",-apple-system,sans-serif;
+}
+body{margin:0}
+.ter-row{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
+.ter-row.on{opacity:1;transform:none}
+.enode{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.35)}
+.ehead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
+.ename{font-weight:700;font-size:16px}
+.arow{display:flex;align-items:center;gap:6px;padding:4px 14px;height:30px;line-height:22px}
+.aname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
+.aname.pk{color:var(--pk);font-weight:600}
+.fk{font-size:11px;padding:0 6px;border-radius:99px;background:var(--soft);color:var(--accent);margin-left:6px}
+.atype{color:var(--dim);font-family:var(--mono);font-size:13px}
+.blink{animation:blink 1s steps(2,start) infinite}
+@keyframes blink{to{opacity:0}}
+/* the drifting row */
+.drow{height:0;overflow:hidden;opacity:0;transition:height .5s ease,opacity .5s ease}
+.drow.show{height:30px;opacity:1}
+.drow.amber{background:var(--soft);box-shadow:inset 3px 0 0 var(--accent)}
+.drow.amber .aname{color:var(--accent)}
+.pill{padding:4px 12px;border-radius:99px;font-size:15px;font-weight:700;transition:background .5s,color .5s}
+.sync-ok{background:rgba(108,191,115,.15);color:var(--ok);border:1px solid rgba(108,191,115,.4)}
+.sync-drift{background:var(--soft);color:var(--accent);border:1px solid rgba(224,166,58,.4)}
+.link{stroke-width:3;fill:none;transition:stroke .5s}
+
+</style>
+</head>
+<body>
+<div id="root"><div style="width:1920px;height:1080px;box-sizing:border-box;background:var(--bg);color:var(--text);font-family:var(--sans);display:flex;flex-direction:column;overflow:hidden">
+
+  <div style="padding:34px 56px 0 56px;display:flex;align-items:baseline;gap:18px">
+    <span style="font-size:30px;color:var(--accent)">◮</span>
+    <span style="font-size:30px;font-weight:700;letter-spacing:.01em">Modelith</span>
+    <span style="font-size:20px;color:var(--dim);font-family:var(--mono)">drift</span>
+    <span style="margin-left:auto;font-size:22px;color:var(--dim)">The model and the warehouse, always in lockstep.</span>
+  </div>
+
+  <div style="flex:1;display:flex;gap:40px;padding:28px 56px 48px 56px;min-height:0">
+
+    <!-- TERMINAL -->
+    <div style="width:980px;flex:none;background:#100d0b;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)">
+      <div style="height:40px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--raised)">
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="margin-left:10px;font-family:var(--mono);font-size:13px;color:var(--dim)">mdl — ibor</span>
+      </div>
+      <div style="flex:1;padding:22px 26px;font-family:var(--mono);font-size:17px;line-height:1.65;overflow:hidden">
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl drift -m model --manifest …/manifest.json</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="color:var(--ok)">no drift detected</div>
+        <div style="height:14px"></div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row" style="color:var(--dim)"># a teammate adds a broker_code column to the warehouse</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl drift … --check</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row">drift vs target <span style="color:var(--dim)">'duckdb_dev'</span>:</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--accent);padding-left:16px">[additive] 1</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--dim);padding-left:32px">- column transaction.broker_code exists in dbt but not the model</div>
+        <div style="height:14px"></div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl drift … --reconcile</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="color:var(--ok)">reconciled 1 delta(s); skipped 0 breaking</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row"><span style="color:var(--ok)">+</span> add column transaction.broker_code</div>
+        <div style="height:14px"></div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl drift -m model --manifest …/manifest.json</div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row" style="color:var(--ok)">no drift detected</div>
+        <div style="margin-top:10px"><span style="color:var(--accent)">$</span> <span class="blink" style="display:inline-block;width:10px;height:18px;background:var(--accent);vertical-align:-3px"></span></div>
+      </div>
+    </div>
+
+    <!-- MODEL <-> WAREHOUSE -->
+    <div style="flex:1;display:flex;flex-direction:column;min-width:0">
+
+      <!-- sync indicator -->
+      <div style="display:flex;justify-content:center;margin-bottom:22px">
+        <span class="pill" data-cls="syncCls" data-clsbase="pill"><span data-text="syncText"></span></span>
+      </div>
+
+      <div style="flex:1;display:flex;align-items:flex-start;justify-content:center;gap:64px;position:relative">
+
+        <!-- MODEL side -->
+        <div style="width:330px">
+          <div style="text-align:center;color:var(--dim);font-size:15px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">model</div>
+          <div class="enode">
+            <div class="ehead"><span class="ename">transaction</span></div>
+            <div style="padding:5px 0">
+              <div class="arow"><span class="aname pk">🔑 transaction_id</span><span class="atype">string</span></div>
+              <div class="arow"><span class="aname">trade_date</span><span class="atype">date</span></div>
+              <div class="arow"><span class="aname">amount</span><span class="atype">decimal</span></div>
+              <div class="arow"><span class="aname">portfolio_code <span class="fk">FK</span></span><span class="atype">string</span></div>
+              <div class="arow"><span class="aname">counterparty_id <span class="fk">FK</span></span><span class="atype">bigint</span></div>
+              <!-- broker_code folds in here on reconcile -->
+              <div class="drow" data-cls="modelBroker" data-clsbase="drow">
+                <div class="arow"><span class="aname">broker_code</span><span class="atype">string</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- link line -->
+        <svg style="position:absolute;left:50%;top:70px;transform:translateX(-50%);width:64px;height:60px;overflow:visible" viewBox="0 0 64 60">
+          <path class="link" style="" data-style-stroke="linkColor" d="M 0 30 L 64 30" stroke-dasharray="6 6"></path>
+        </svg>
+
+        <!-- WAREHOUSE side -->
+        <div style="width:330px">
+          <div style="text-align:center;color:var(--dim);font-size:15px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">warehouse (dbt)</div>
+          <div class="enode">
+            <div class="ehead"><span class="ename">transaction</span></div>
+            <div style="padding:5px 0">
+              <div class="arow"><span class="aname pk">🔑 transaction_id</span><span class="atype">string</span></div>
+              <div class="arow"><span class="aname">trade_date</span><span class="atype">date</span></div>
+              <div class="arow"><span class="aname">amount</span><span class="atype">decimal</span></div>
+              <div class="arow"><span class="aname">portfolio_code <span class="fk">FK</span></span><span class="atype">string</span></div>
+              <div class="arow"><span class="aname">counterparty_id <span class="fk">FK</span></span><span class="atype">bigint</span></div>
+              <!-- broker_code appears here first (amber) -->
+              <div class="drow <span data-text="whBrokerAmber"></span>" data-cls="whBroker" data-clsbase="drow <span data-text="whBrokerAmber"></span>">
+                <div class="arow"><span class="aname">broker_code</span><span class="atype">string</span></div>
+              </div>
+            </div>
+          </div>
+          <div style="text-align:center;margin-top:12px;" data-style-display="additiveShow">
+            <span style="padding:4px 12px;border-radius:99px;background:var(--soft);color:var(--accent);font-size:14px;font-weight:600">+ additive</span>
+          </div>
+        </div>
+      </div>
+
+      <div style="text-align:center;margin-top:20px;" data-style-display="doneShow">
+        <span style="color:var(--ok);font-size:18px;font-weight:700">✓ reconciled — nothing lost</span>
+      </div>
+    </div>
+  </div>
+</div></div>
+<script>
+
+class Component {
+  constructor(){ this.state = { step: 0 }; }
+  componentDidMount(){
+    this._t = setInterval(() => {
+      this.setState(s => ({ step: (s.step + 1) % 11 }));
+    }, 1800);
+  }
+    renderVals(){
+    const st = this.state.step;
+    const on = (n) => st >= n ? 'on' : '';
+    // step map: 1 clean/sync-ok; 2 teammate note; 3 check -> warehouse broker amber + drift;
+    // 4 reconcile -> fold into model; 5 clean again
+    const drift = st >= 3 && st < 5;
+    return {
+      s1: on(1), s2: on(2), s3: on(3), s4: on(4), s5: on(6),
+      whBroker: st >= 3 ? 'show' : '',
+      whBrokerAmber: (st >= 3 && st < 5) ? 'amber' : '',
+      modelBroker: st >= 5 ? 'show' : '',
+      additiveShow: drift ? 'block' : 'none',
+      syncCls: drift ? 'sync-drift' : 'sync-ok',
+      syncText: drift ? 'drift — additive' : 'model ⇄ warehouse · in sync',
+      linkColor: drift ? '#e0a63a' : '#6cbf73',
+      doneShow: st >= 6 ? 'block' : 'none'
+    };
+  }
+}
+
+const comp = new Component();
+const root = document.getElementById('root');
+function apply(){
+  const v = comp.renderVals();
+  root.querySelectorAll('[data-cls]').forEach(el=>{
+    const k = el.getAttribute('data-cls'); const base = el.getAttribute('data-clsbase')||'';
+    el.className = (base + ' ' + (v[k]||'')).trim();
+  });
+  root.querySelectorAll('*').forEach(el=>{
+    for (const a of el.attributes){
+      if (a.name.startsWith('data-style-')){
+        const prop = a.name.slice('data-style-'.length);
+        el.style.setProperty(prop, v[a.value] != null ? v[a.value] : '');
+      }
+    }
+  });
+  root.querySelectorAll('[data-text]').forEach(el=>{
+    const k = el.getAttribute('data-text'); el.textContent = v[k] != null ? v[k] : '';
+  });
+}
+comp.setState = function(fn){ comp.state = Object.assign({}, comp.state, typeof fn==='function'?fn(comp.state):fn); apply(); };
+apply();
+comp.componentDidMount && comp.componentDidMount();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/standalone/Erwin.html b/demos/standalone/Erwin.html
new file mode 100644
index 0000000..5c6860a
--- /dev/null
+++ b/demos/standalone/Erwin.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920">
+<title>Erwin import</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
+<style>
+html,body{margin:0;background:#14110f}
+
+:root{
+  --bg:#14110f; --raised:#1c1815; --card:#221d19; --border:#33291f; --border2:#4a3c2c;
+  --text:#ece6dd; --dim:#a89a86; --accent:#e0a63a; --soft:rgba(224,166,58,0.15);
+  --pk:#f2c14e; --ok:#6cbf73; --blue:#93c5fd;
+  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Inter",-apple-system,sans-serif;
+}
+body{margin:0}
+.ter-row{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
+.ter-row.on{opacity:1;transform:none}
+.enode{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.35);
+  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .55s ease,transform .55s ease}
+.enode.on{opacity:1;transform:none}
+.ehead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
+.ename{font-weight:700;font-size:16px}
+.arow{display:flex;align-items:center;gap:6px;padding:4px 14px;height:30px;line-height:22px}
+.aname{flex:1;font-size:15px}
+.aname.pk{color:var(--pk);font-weight:600}
+.fk{font-size:11px;padding:0 6px;border-radius:99px;background:var(--soft);color:var(--accent);margin-left:6px}
+.atype{color:var(--dim);font-family:var(--mono);font-size:13px}
+.ln{stroke:var(--border2);stroke-width:2;fill:none;stroke-dasharray:6 6;opacity:0;transition:opacity .6s ease}
+.ln.on{opacity:1}
+.xml{opacity:0;transition:opacity .5s ease;font-family:var(--mono);font-size:14px;line-height:1.6}
+.xml.on{opacity:1}
+.blink{animation:blink 1s steps(2,start) infinite}
+@keyframes blink{to{opacity:0}}
+.arrow{opacity:0;transition:opacity .6s ease;font-size:40px;color:var(--accent)}
+.arrow.on{opacity:1}
+
+</style>
+</head>
+<body>
+<div id="root"><div style="width:1920px;height:1080px;box-sizing:border-box;background:var(--bg);color:var(--text);font-family:var(--sans);display:flex;flex-direction:column;overflow:hidden">
+
+  <div style="padding:34px 56px 0 56px;display:flex;align-items:baseline;gap:18px">
+    <span style="font-size:30px;color:var(--accent)">◮</span>
+    <span style="font-size:30px;font-weight:700">Modelith</span>
+    <span style="font-size:20px;color:var(--dim);font-family:var(--mono)">import erwin</span>
+    <span style="margin-left:auto;font-size:22px;color:var(--dim)">Bring an erwin model in. Own it in git.</span>
+  </div>
+
+  <div style="flex:1;display:flex;gap:40px;padding:28px 56px 48px 56px;min-height:0">
+
+    <!-- TERMINAL -->
+    <div style="width:900px;flex:none;background:#100d0b;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)">
+      <div style="height:40px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--raised)">
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="margin-left:10px;font-family:var(--mono);font-size:13px;color:var(--dim)">mdl — import</span>
+      </div>
+      <div style="flex:1;padding:22px 26px;font-family:var(--mono);font-size:17px;line-height:1.7;overflow:hidden">
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="color:var(--dim)"># a model exported from erwin</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row">fund.xml  <span style="color:var(--dim)">(erwin XML)</span></div>
+        <div style="height:16px"></div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl import erwin fund.xml -o fund --scaffold model</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--dim)">  scaffolded .mdl/lock.yaml</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--ok)">imported 3 entities, 1 relationships from erwin to fund</div>
+        <div style="height:16px"></div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl validate -m fund</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="color:var(--ok)">validation passed</div>
+        <div style="height:16px"></div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row" style="color:var(--dim)"># now it's plain YAML in git — yours to version, diff, and generate</div>
+        <div style="margin-top:12px"><span style="color:var(--accent)">$</span> <span class="blink" style="display:inline-block;width:10px;height:18px;background:var(--accent);vertical-align:-3px"></span></div>
+      </div>
+    </div>
+
+    <!-- RIGHT: erwin XML -> clean ER cards -->
+    <div style="flex:1;position:relative;min-width:0">
+      <div style="position:relative;width:820px;height:860px;margin:0 auto">
+
+        <!-- erwin XML blob -->
+        <div class="xml" data-cls="x1" data-clsbase="xml" style="position:absolute;left:0;top:30px;width:300px;padding:16px;border-radius:10px;background:#15110d;border:1px solid var(--border);color:var(--dim)">
+          &lt;Entity Name="Counterparty"&gt;<br>
+          &nbsp;&nbsp;&lt;Attribute Name=<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;"Counterparty_Id" .../&gt;<br>
+          &nbsp;&nbsp;&lt;Attribute Name=<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;"Legal_Name" .../&gt;<br>
+          &lt;/Entity&gt;<br>
+          &lt;Relationship .../&gt;<br>
+          <span style="color:#50433a">…</span>
+        </div>
+
+        <!-- transform arrow -->
+        <div class="arrow" data-cls="ar" data-clsbase="arrow" style="position:absolute;left:325px;top:150px">→</div>
+
+        <!-- relationship line -->
+        <svg style="position:absolute;left:0;top:0;width:820px;height:860px;overflow:visible" viewBox="0 0 820 860" preserveAspectRatio="none">
+          <path class="ln" data-cls="l1" data-clsbase="ln" d="M 650 230 L 650 400"></path>
+        </svg>
+
+        <!-- clean ER cards -->
+        <div class="enode" data-cls="c1" data-clsbase="enode" style="position:absolute;left:500px;top:40px;width:300px">
+          <div class="ehead"><span class="ename">counterparty</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 counterparty_id</span><span class="atype">id_type</span></div>
+            <div class="arow"><span class="aname">legal_name</span><span class="atype">string</span></div>
+          </div>
+        </div>
+
+        <div class="enode" data-cls="c2" data-clsbase="enode" style="position:absolute;left:500px;top:410px;width:300px">
+          <div class="ehead"><span class="ename">trade</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 trade_id</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">counterparty_id <span class="fk">FK</span></span><span class="atype">id_type</span></div>
+          </div>
+        </div>
+
+        <div class="enode" data-cls="c3" data-clsbase="enode" style="position:absolute;left:160px;top:470px;width:280px">
+          <div class="ehead"><span class="ename">institution</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname">counterparty_id</span><span class="atype">string</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div></div>
+<script>
+
+class Component {
+  constructor(){ this.state = { step: 0 }; }
+  componentDidMount(){ this._t = setInterval(() => this.setState(s => ({ step: (s.step + 1) % 10 })), 1700); }
+    renderVals(){
+    const st = this.state.step;
+    const on = (n) => st >= n ? 'on' : '';
+    return {
+      s1: on(1), s2: on(2), s3: on(3), s4: on(5), s5: on(7),
+      x1: on(1), ar: on(3),
+      c1: on(3), c2: on(4), c3: on(4), l1: on(5)
+    };
+  }
+}
+
+const comp = new Component();
+const root = document.getElementById('root');
+function apply(){
+  const v = comp.renderVals();
+  root.querySelectorAll('[data-cls]').forEach(el=>{
+    const k = el.getAttribute('data-cls'); const base = el.getAttribute('data-clsbase')||'';
+    el.className = (base + ' ' + (v[k]||'')).trim();
+  });
+  root.querySelectorAll('*').forEach(el=>{
+    for (const a of el.attributes){
+      if (a.name.startsWith('data-style-')){
+        const prop = a.name.slice('data-style-'.length);
+        el.style.setProperty(prop, v[a.value] != null ? v[a.value] : '');
+      }
+    }
+  });
+  root.querySelectorAll('[data-text]').forEach(el=>{
+    const k = el.getAttribute('data-text'); el.textContent = v[k] != null ? v[k] : '';
+  });
+}
+comp.setState = function(fn){ comp.state = Object.assign({}, comp.state, typeof fn==='function'?fn(comp.state):fn); apply(); };
+apply();
+comp.componentDidMount && comp.componentDidMount();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/standalone/Main.html b/demos/standalone/Main.html
new file mode 100644
index 0000000..a13aa3d
--- /dev/null
+++ b/demos/standalone/Main.html
@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920">
+<title>Design-first</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
+<style>
+html,body{margin:0;background:#14110f}
+
+:root{
+  --bg:#14110f; --raised:#1c1815; --card:#221d19; --border:#33291f; --border2:#4a3c2c;
+  --text:#ece6dd; --dim:#a89a86; --accent:#e0a63a; --soft:rgba(224,166,58,0.15);
+  --pk:#f2c14e; --ok:#6cbf73; --blue:#93c5fd;
+  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Inter",-apple-system,sans-serif;
+}
+body{margin:0}
+.ter-row{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
+.ter-row.on{opacity:1;transform:none}
+.enode{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.35);
+  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .55s ease,transform .55s ease}
+.enode.on{opacity:1;transform:none}
+.enode.glow{box-shadow:0 0 0 3px var(--soft),0 6px 26px rgba(224,166,58,.35)}
+.ehead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
+.ename{font-weight:700;font-size:16px}
+.badge{font-size:12px;padding:1px 7px;border-radius:99px;background:var(--soft);color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
+.arow{display:flex;align-items:center;gap:6px;padding:4px 14px;height:30px;line-height:22px}
+.aname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
+.aname.pk{color:var(--pk);font-weight:600}
+.fk{font-size:11px;padding:0 6px;border-radius:99px;background:var(--soft);color:var(--accent);margin-left:6px}
+.atype{color:var(--dim);font-family:var(--mono);font-size:13px}
+.ln{stroke:var(--border2);stroke-width:2;fill:none;stroke-dasharray:6 6;opacity:0;transition:opacity .6s ease}
+.ln.on{opacity:1}
+.blink{animation:blink 1s steps(2,start) infinite}
+@keyframes blink{to{opacity:0}}
+.chip{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
+.chip.on{opacity:1;transform:none}
+
+</style>
+</head>
+<body>
+<div id="root"><div style="width:1920px;height:1080px;box-sizing:border-box;background:var(--bg);color:var(--text);font-family:var(--sans);display:flex;flex-direction:column;overflow:hidden">
+
+  <div style="padding:34px 56px 0 56px;display:flex;align-items:baseline;gap:18px">
+    <span style="font-size:30px;color:var(--accent)">◮</span>
+    <span style="font-size:30px;font-weight:700;letter-spacing:.01em">Modelith</span>
+    <span style="font-size:20px;color:var(--dim);font-family:var(--mono)">design-first</span>
+    <span style="margin-left:auto;font-size:22px;color:var(--dim)">Design in git. Compile to contract-enforced dbt.</span>
+  </div>
+
+  <div style="flex:1;display:flex;gap:40px;padding:28px 56px 48px 56px;min-height:0">
+
+    <!-- TERMINAL -->
+    <div style="width:1000px;flex:none;background:#100d0b;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)">
+      <div style="height:40px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--raised)">
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="margin-left:10px;font-family:var(--mono);font-size:13px;color:var(--dim)">mdl — shop</span>
+      </div>
+      <div style="flex:1;padding:24px 28px;font-family:var(--mono);font-size:19px;line-height:1.7;overflow:hidden">
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl model render</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="color:var(--dim)"># model: shop</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row">entity customer <span style="color:var(--dim)">· order · order_line · product</span></div>
+        <div style="height:14px"></div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl new entity payment --definition <span style="color:var(--ok)">"A settlement against an order"</span></div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row" style="color:var(--ok)">created entity 'payment' (01M3WX64NZ…)</div>
+        <div style="height:14px"></div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl validate</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--ok)">validation passed</div>
+        <div style="height:14px"></div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl generate</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="color:var(--dim)">wrote 9 files to target/dbt</div>
+        <div style="height:14px"></div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl export contract</div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row" style="color:var(--dim)">wrote contract to datacontract.yaml</div>
+        <div style="margin-top:12px"><span style="color:var(--accent)">$</span> <span class="blink" style="display:inline-block;width:11px;height:20px;background:var(--accent);vertical-align:-3px"></span></div>
+      </div>
+    </div>
+
+    <!-- ER DIAGRAM -->
+    <div style="flex:1;position:relative;min-width:0">
+      <div style="position:relative;width:760px;height:860px;margin:0 auto">
+
+        <svg style="position:absolute;left:0;top:0;width:760px;height:860px;overflow:visible" viewBox="0 0 760 860" preserveAspectRatio="none">
+          <path class="ln" data-cls="l1" data-clsbase="ln" d="M 300 220 L 300 360"></path>
+          <path class="ln" data-cls="l2" data-clsbase="ln" d="M 180 530 L 180 650"></path>
+          <path class="ln" data-cls="l3" data-clsbase="ln" d="M 470 530 L 470 650"></path>
+        </svg>
+
+        <!-- customer -->
+        <div class="enode" data-cls="c1" data-clsbase="enode" style="position:absolute;left:150px;top:40px;width:300px">
+          <div class="ehead"><span class="ename">customer</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 customer_id</span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">email</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">full_name</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">created_at</span><span class="atype">timestamp</span></div>
+          </div>
+        </div>
+
+        <!-- order -->
+        <div class="enode" data-cls="c2" data-clsbase="enode" style="position:absolute;left:150px;top:370px;width:300px">
+          <div class="ehead"><span class="ename">order</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 order_id</span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">customer_id <span class="fk">FK</span></span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">order_date</span><span class="atype">date</span></div>
+            <div class="arow"><span class="aname">status</span><span class="atype">string</span></div>
+          </div>
+        </div>
+
+        <!-- order_line -->
+        <div class="enode" data-cls="c3" data-clsbase="enode" style="position:absolute;left:30px;top:660px;width:300px">
+          <div class="ehead"><span class="ename">order_line</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 order_line_id</span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">order_id <span class="fk">FK</span></span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">product_id <span class="fk">FK</span></span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">quantity</span><span class="atype">integer</span></div>
+          </div>
+        </div>
+
+        <!-- product -->
+        <div class="enode" data-cls="c4" data-clsbase="enode" style="position:absolute;left:400px;top:660px;width:300px">
+          <div class="ehead"><span class="ename">product</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 product_id</span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">sku</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">name</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">unit_price</span><span class="atype">decimal</span></div>
+          </div>
+        </div>
+
+        <!-- payment (appears on step 3) -->
+        <div class="enode" data-cls="c5" data-clsbase="enode" style="position:absolute;left:490px;top:370px;width:220px">
+          <div class="ehead"><span class="ename">payment</span><span class="badge">new</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 payment_id</span><span class="atype">bigint</span></div>
+          </div>
+        </div>
+
+        <!-- valid badge -->
+        <div style="position:absolute;left:280px;top:-2px;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:rgba(108,191,115,.15);color:var(--ok);font-weight:700;font-size:17px;border:1px solid rgba(108,191,115,.4)" data-style-display="validShow">✓ valid</div>
+
+        <!-- compile-target chips -->
+        <div style="position:absolute;left:0;bottom:-6px;display:flex;gap:14px">
+          <div class="chip" data-cls="t1" data-clsbase="chip" style="padding:12px 18px;border-radius:10px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);font-size:16px"><b>dbt</b> <span style="color:var(--dim)">· contract enforced</span></div>
+          <div class="chip" data-cls="t2" data-clsbase="chip" style="padding:12px 18px;border-radius:10px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--blue);font-size:16px"><b>ODCS</b> <span style="color:var(--dim)">· data contract</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div></div>
+<script>
+
+class Component {
+  constructor(){ this.state = { step: 0 }; }
+  componentDidMount(){
+    this._t = setInterval(() => {
+      this.setState(s => ({ step: (s.step + 1) % 12 }));
+    }, 1600);
+  }
+    renderVals(){
+    const st = this.state.step;
+    const on = (n) => st >= n ? 'on' : '';
+    return {
+      s1: on(1), s2: on(3), s3: on(5), s4: on(7), s5: on(8),
+      c1: on(1), c2: on(1), c3: on(2), c4: on(2), c5: on(3),
+      l1: on(2), l2: on(2), l3: on(2),
+      t1: on(7), t2: on(8),
+      validShow: st >= 5 ? 'inline-flex' : 'none'
+    };
+  }
+}
+
+const comp = new Component();
+const root = document.getElementById('root');
+function apply(){
+  const v = comp.renderVals();
+  root.querySelectorAll('[data-cls]').forEach(el=>{
+    const k = el.getAttribute('data-cls'); const base = el.getAttribute('data-clsbase')||'';
+    el.className = (base + ' ' + (v[k]||'')).trim();
+  });
+  root.querySelectorAll('*').forEach(el=>{
+    for (const a of el.attributes){
+      if (a.name.startsWith('data-style-')){
+        const prop = a.name.slice('data-style-'.length);
+        el.style.setProperty(prop, v[a.value] != null ? v[a.value] : '');
+      }
+    }
+  });
+  root.querySelectorAll('[data-text]').forEach(el=>{
+    const k = el.getAttribute('data-text'); el.textContent = v[k] != null ? v[k] : '';
+  });
+}
+comp.setState = function(fn){ comp.state = Object.assign({}, comp.state, typeof fn==='function'?fn(comp.state):fn); apply(); };
+apply();
+comp.componentDidMount && comp.componentDidMount();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/standalone/Ontology.html b/demos/standalone/Ontology.html
new file mode 100644
index 0000000..058a4d3
--- /dev/null
+++ b/demos/standalone/Ontology.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920">
+<title>Ontology anchoring</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
+<style>
+html,body{margin:0;background:#14110f}
+
+:root{
+  --bg:#14110f; --raised:#1c1815; --card:#221d19; --border:#33291f; --border2:#4a3c2c;
+  --text:#ece6dd; --dim:#a89a86; --accent:#e0a63a; --soft:rgba(224,166,58,0.15);
+  --pk:#f2c14e; --ok:#6cbf73; --blue:#93c5fd; --bluesoft:rgba(147,197,253,.12);
+  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Inter",-apple-system,sans-serif;
+}
+body{margin:0}
+.ter-row{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
+.ter-row.on{opacity:1;transform:none}
+.enode{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.35)}
+.ehead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
+.ename{font-weight:700;font-size:16px}
+.arow{display:flex;align-items:center;gap:6px;padding:4px 14px;height:30px;line-height:22px}
+.aname{flex:1;font-size:15px}
+.aname.pk{color:var(--pk);font-weight:600}
+.atype{color:var(--dim);font-family:var(--mono);font-size:13px}
+.obadge{font-size:12px;padding:1px 8px;border-radius:99px;background:var(--bluesoft);color:var(--blue);font-weight:700;
+  opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .5s ease}
+.obadge.on{opacity:1;transform:scale(1)}
+.hit{opacity:0;transform:translateX(10px);transition:opacity .5s ease,transform .5s ease;
+  padding:14px 16px;border-radius:10px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--blue);margin-bottom:12px}
+.hit.on{opacity:1;transform:none}
+.blink{animation:blink 1s steps(2,start) infinite}
+@keyframes blink{to{opacity:0}}
+.wire{stroke:var(--blue);stroke-width:2;fill:none;stroke-dasharray:5 5;opacity:0;transition:opacity .6s ease}
+.wire.on{opacity:.8}
+
+</style>
+</head>
+<body>
+<div id="root"><div style="width:1920px;height:1080px;box-sizing:border-box;background:var(--bg);color:var(--text);font-family:var(--sans);display:flex;flex-direction:column;overflow:hidden">
+
+  <div style="padding:34px 56px 0 56px;display:flex;align-items:baseline;gap:18px">
+    <span style="font-size:30px;color:var(--accent)">◮</span>
+    <span style="font-size:30px;font-weight:700">Modelith</span>
+    <span style="font-size:20px;color:var(--dim);font-family:var(--mono)">ontology</span>
+    <span style="margin-left:auto;font-size:22px;color:var(--dim)">Anchor the model to an industry vocabulary.</span>
+  </div>
+
+  <div style="flex:1;display:flex;gap:40px;padding:28px 56px 48px 56px;min-height:0">
+
+    <!-- TERMINAL -->
+    <div style="width:980px;flex:none;background:#100d0b;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)">
+      <div style="height:40px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--raised)">
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="width:12px;height:12px;border-radius:50%;background:#50433a"></span>
+        <span style="margin-left:10px;font-family:var(--mono);font-size:13px;color:var(--dim)">mdl — ibor · FIBO</span>
+      </div>
+      <div style="flex:1;padding:22px 26px;font-family:var(--mono);font-size:17px;line-height:1.7;overflow:hidden">
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="color:var(--dim)"># the model declares an industry vocabulary</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row">ontology_stack:</div>
+        <div class="ter-row" data-cls="s1" data-clsbase="ter-row" style="padding-left:16px">- name: fibo-ols   layer: industry   type: ols</div>
+        <div style="height:16px"></div>
+        <div class="ter-row" data-cls="s2" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl ontology search counterparty</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--blue)">  fibo:PartyInRole  <span style="color:var(--dim)">[fibo-ols]</span></div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--dim);padding-left:16px;font-size:15px">A relationship that establishes the specific capacity</div>
+        <div class="ter-row" data-cls="s3" data-clsbase="ter-row" style="color:var(--dim);padding-left:16px;font-size:15px">in which a party acts in some context.</div>
+        <div style="height:16px"></div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl ontology align counterparty --to fibo:PartyInRole</div>
+        <div class="ter-row" data-cls="s4" data-clsbase="ter-row" style="color:var(--ok)">aligned · recorded in counterparty.yaml</div>
+        <div style="height:16px"></div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row"><span style="color:var(--accent)">$</span> mdl ontology status</div>
+        <div class="ter-row" data-cls="s5" data-clsbase="ter-row" style="color:var(--ok)">industry alignment coverage: 100.0%</div>
+        <div style="margin-top:12px"><span style="color:var(--accent)">$</span> <span class="blink" style="display:inline-block;width:10px;height:18px;background:var(--accent);vertical-align:-3px"></span></div>
+      </div>
+    </div>
+
+    <!-- RIGHT: vocabulary hits + the entity getting its badge -->
+    <div style="flex:1;position:relative;min-width:0">
+      <div style="position:relative;width:740px;height:860px;margin:0 auto">
+
+        <!-- vocabulary search hits -->
+        <div style="position:absolute;left:0;top:10px;width:420px">
+          <div style="color:var(--dim);font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px">FIBO · industry vocabulary</div>
+          <div class="hit" data-cls="h1" data-clsbase="hit">
+            <div style="color:var(--blue);font-family:var(--mono);font-size:16px;font-weight:600">fibo:PartyInRole</div>
+            <div style="color:var(--dim);font-size:14px;margin-top:4px">The capacity in which a party acts in some context.</div>
+          </div>
+          <div class="hit" data-cls="h2" data-clsbase="hit">
+            <div style="color:var(--blue);font-family:var(--mono);font-size:16px;font-weight:600">fibo:FinancialInstrument</div>
+            <div style="color:var(--dim);font-size:14px;margin-top:4px">A tradable monetary contract.</div>
+          </div>
+          <div class="hit" data-cls="h3" data-clsbase="hit">
+            <div style="color:var(--blue);font-family:var(--mono);font-size:16px;font-weight:600">fibo:Position</div>
+            <div style="color:var(--dim);font-size:14px;margin-top:4px">A quantity of an instrument held by a party.</div>
+          </div>
+        </div>
+
+        <!-- alignment wire -->
+        <svg style="position:absolute;left:0;top:0;width:740px;height:860px;overflow:visible" viewBox="0 0 740 860" preserveAspectRatio="none">
+          <path class="wire" data-cls="w1" data-clsbase="wire" d="M 300 70 C 420 70, 440 230, 480 250"></path>
+        </svg>
+
+        <!-- the entity, gaining its ontology badge -->
+        <div class="enode" style="position:absolute;left:460px;top:210px;width:280px">
+          <div class="ehead"><span class="ename">counterparty</span><span class="obadge" data-cls="badge" data-clsbase="obadge">⚙ fibo</span></div>
+          <div style="padding:5px 0">
+            <div class="arow"><span class="aname pk">🔑 counterparty_id</span><span class="atype">bigint</span></div>
+            <div class="arow"><span class="aname">legal_name</span><span class="atype">string</span></div>
+            <div class="arow"><span class="aname">country</span><span class="atype">string</span></div>
+          </div>
+        </div>
+
+        <!-- coverage meter -->
+        <div style="position:absolute;left:460px;top:430px;width:280px;transition:opacity .6s ease" data-style-opacity="coverOp">
+          <div style="color:var(--dim);font-size:14px;margin-bottom:8px">industry alignment coverage</div>
+          <div style="height:12px;border-radius:99px;background:var(--border);overflow:hidden">
+            <div style="height:100%;background:var(--ok);transition:width .8s ease" data-style-width="coverW"></div>
+          </div>
+          <div style="color:var(--ok);font-weight:700;font-size:18px;margin-top:8px">100%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div></div>
+<script>
+
+class Component {
+  constructor(){ this.state = { step: 0 }; }
+  componentDidMount(){ this._t = setInterval(() => this.setState(s => ({ step: (s.step + 1) % 11 })), 1700); }
+    renderVals(){
+    const st = this.state.step;
+    const on = (n) => st >= n ? 'on' : '';
+    return {
+      s1: on(1), s2: on(2), s3: on(3), s4: on(5), s5: on(7),
+      h1: on(3), h2: on(3), h3: on(3),
+      w1: on(5), badge: on(5),
+      coverOp: st >= 7 ? '1' : '0', coverW: st >= 7 ? '100%' : '0%'
+    };
+  }
+}
+
+const comp = new Component();
+const root = document.getElementById('root');
+function apply(){
+  const v = comp.renderVals();
+  root.querySelectorAll('[data-cls]').forEach(el=>{
+    const k = el.getAttribute('data-cls'); const base = el.getAttribute('data-clsbase')||'';
+    el.className = (base + ' ' + (v[k]||'')).trim();
+  });
+  root.querySelectorAll('*').forEach(el=>{
+    for (const a of el.attributes){
+      if (a.name.startsWith('data-style-')){
+        const prop = a.name.slice('data-style-'.length);
+        el.style.setProperty(prop, v[a.value] != null ? v[a.value] : '');
+      }
+    }
+  });
+  root.querySelectorAll('[data-text]').forEach(el=>{
+    const k = el.getAttribute('data-text'); el.textContent = v[k] != null ? v[k] : '';
+  });
+}
+comp.setState = function(fn){ comp.state = Object.assign({}, comp.state, typeof fn==='function'?fn(comp.state):fn); apply(); };
+apply();
+comp.componentDidMount && comp.componentDidMount();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/standalone/build.mjs b/demos/standalone/build.mjs
new file mode 100644
index 0000000..04bfb26
--- /dev/null
+++ b/demos/standalone/build.mjs
@@ -0,0 +1,101 @@
+// Convert the 6 .dc.html Design artboards into self-contained, animated HTML files that need
+// no Design runtime, so they can be screen-recorded and embedded on the landing page.
+//
+// The .dc.html files bind {{holes}} to DCLogic.renderVals() stepped by setInterval. Holes are
+// applied IN PLACE (never by rebuilding innerHTML, which would restart CSS transitions): each
+// {{x}} in the template is turned into a marker the shim updates on the live element:
+//   class="base {{x}}"        -> the element gets data-cls="x"; shim sets className = "base "+val
+//   style="…:{{x}};…"         -> the element gets data-style-<prop>="x"; shim sets that style prop
+//   >{{x}}<  (text)           -> wrapped in <span data-text="x"></span>; shim sets textContent
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const SRC = process.argv[2];
+if (!SRC) { console.error("usage: node build.mjs <path-to-project-dir>"); process.exit(1); }
+
+const files = ["Main.dc.html","Adopt.dc.html","Drift.dc.html","Ontology.dc.html","Erwin.dc.html","Compile.dc.html"];
+
+for (const f of files) {
+  const raw = readFileSync(join(SRC, f), "utf8");
+  const css = (raw.match(/<helmet>[\s\S]*?<style>([\s\S]*?)<\/style>[\s\S]*?<\/helmet>/) || [,""])[1];
+  const bodyM = raw.match(/<\/helmet>([\s\S]*?)<script type="text\/x-dc"/);
+  let body = (bodyM ? bodyM[1] : "").replace(/<\/x-dc>\s*$/, "").trim();
+  const scriptM = raw.match(/<script type="text\/x-dc"[^>]*>([\s\S]*?)<\/script>/);
+  let klass = (scriptM ? scriptM[1] : "")
+    .replace(/class Component extends DCLogic\s*{/, "class Component {")
+    .replace(/constructor\(p\)\s*{\s*super\(p\);\s*/, "constructor(){ ")
+    .replace(/componentWillUnmount\(\)\s*{[\s\S]*?}\n/, "");
+  const fontLink = (raw.match(/<link rel="stylesheet" href="https:\/\/fonts[^>]*>/) || [""])[0];
+  const title = (raw.match(/<title>([^<]*)<\/title>/) || [,"Modelith"])[1];
+
+  // --- rewrite holes into markers ---
+  // 1) class="… {{x}}"  (hole is a class suffix)
+  body = body.replace(/class="([^"]*?)\s*\{\{\s*([\w]+)\s*\}\}([^"]*)"/g, (m, pre, k, post) => {
+    const base = (pre + post).replace(/\s+/g, " ").trim();
+    return `class="${base}" data-cls="${k}" data-clsbase="${base}"`;
+  });
+  // 2) style="…:{{x}}; …"  -> capture prop:hole
+  body = body.replace(/style="([^"]*)"/g, (m, s) => {
+    const holes = [...s.matchAll(/([a-zA-Z-]+)\s*:\s*\{\{\s*([\w]+)\s*\}\}/g)];
+    if (!holes.length) return m;
+    let clean = s;
+    const attrs = [];
+    for (const h of holes){
+      clean = clean.replace(h[0], "");             // drop the hole declaration from static style
+      attrs.push(`data-style-${h[1]}="${h[2]}"`);
+    }
+    clean = clean.replace(/;\s*;/g,";").replace(/^\s*;?\s*/,"").trim();
+    return `style="${clean}" ${attrs.join(" ")}`;
+  });
+  // 3) bare text holes >{{x}}<  -> span
+  body = body.replace(/>\s*\{\{\s*([\w]+)\s*\}\}\s*</g, (m,k)=>`><span data-text="${k}"></span><`);
+  // any remaining inline {{x}} in text -> span too
+  body = body.replace(/\{\{\s*([\w]+)\s*\}\}/g, (m,k)=>`<span data-text="${k}"></span>`);
+
+  const out = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1920">
+<title>${title}</title>
+${fontLink}
+<style>
+html,body{margin:0;background:#14110f}
+${css}
+</style>
+</head>
+<body>
+<div id="root">${body}</div>
+<script>
+${klass}
+const comp = new Component();
+const root = document.getElementById('root');
+function apply(){
+  const v = comp.renderVals();
+  root.querySelectorAll('[data-cls]').forEach(el=>{
+    const k = el.getAttribute('data-cls'); const base = el.getAttribute('data-clsbase')||'';
+    el.className = (base + ' ' + (v[k]||'')).trim();
+  });
+  root.querySelectorAll('*').forEach(el=>{
+    for (const a of el.attributes){
+      if (a.name.startsWith('data-style-')){
+        const prop = a.name.slice('data-style-'.length);
+        el.style.setProperty(prop, v[a.value] != null ? v[a.value] : '');
+      }
+    }
+  });
+  root.querySelectorAll('[data-text]').forEach(el=>{
+    const k = el.getAttribute('data-text'); el.textContent = v[k] != null ? v[k] : '';
+  });
+}
+comp.setState = function(fn){ comp.state = Object.assign({}, comp.state, typeof fn==='function'?fn(comp.state):fn); apply(); };
+apply();
+comp.componentDidMount && comp.componentDidMount();
+</script>
+</body>
+</html>`;
+  writeFileSync(join(here, f.replace(".dc.html",".html")), out);
+  console.log("wrote", f.replace(".dc.html",".html"));
+}
diff --git a/demos/standalone/package.json b/demos/standalone/package.json
new file mode 100644
index 0000000..b0bd180
--- /dev/null
+++ b/demos/standalone/package.json
@@ -0,0 +1 @@
+{"type":"module","dependencies":{"puppeteer-core":"^21.11.0"}}
\ No newline at end of file
diff --git a/demos/standalone/record.mjs b/demos/standalone/record.mjs
new file mode 100644
index 0000000..a0e57d2
--- /dev/null
+++ b/demos/standalone/record.mjs
@@ -0,0 +1,61 @@
+// Record each served standalone demo as an MP4 (+GIF) by driving headless Chrome over CDP,
+// starting a screencast, and piping JPEG frames to ffmpeg at a fixed fps.
+// Usage: node record.mjs <chromePath> <page> <seconds>
+import puppeteer from "puppeteer-core";
+import { spawn } from "node:child_process";
+import { mkdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const CHROME = process.argv[2];
+const PAGE = process.argv[3];          // e.g. Main.html
+const SECONDS = Number(process.argv[4] || 16);
+const FPS = 20;
+const outDir = join(here, "out");
+mkdirSync(outDir, { recursive: true });
+const name = PAGE.replace(/\.html$/, "");
+const mp4 = join(outDir, name + ".mp4");
+
+const browser = await puppeteer.launch({
+  executablePath: CHROME,
+  headless: "new",
+  args: ["--no-sandbox", "--force-color-profile=srgb", "--hide-scrollbars",
+         "--window-size=1920,1080"],
+  defaultViewport: { width: 1920, height: 1080, deviceScaleFactor: 1 },
+});
+const page = await browser.newPage();
+await page.goto("http://localhost:8777/" + PAGE, { waitUntil: "networkidle0" });
+await new Promise(r => setTimeout(r, 1200));   // let fonts settle + 1st tick
+
+// Collect frames with their arrival time, then mux at a constant FPS by duplicating/dropping
+// to the wall-clock timeline, so static stretches don't compress the video.
+const frames = [];
+const t0 = Date.now();
+const client = await page.target().createCDPSession();
+client.on("Page.screencastFrame", async ({ data, sessionId }) => {
+  frames.push({ t: Date.now() - t0, buf: Buffer.from(data, "base64") });
+  try { await client.send("Page.screencastFrameAck", { sessionId }); } catch {}
+});
+await client.send("Page.startScreencast", { format: "jpeg", quality: 92, everyNthFrame: 1 });
+await new Promise(r => setTimeout(r, SECONDS * 1000));
+await client.send("Page.stopScreencast");
+
+// build a constant-FPS stream from the timestamped frames
+const ff = spawn("ffmpeg", [
+  "-y", "-f", "image2pipe", "-framerate", String(FPS), "-i", "pipe:0",
+  "-vf", "scale=1920:1080:flags=lanczos,format=yuv420p",
+  "-c:v", "libx264", "-preset", "medium", "-crf", "20",
+  "-movflags", "+faststart", mp4,
+], { stdio: ["pipe", "inherit", "inherit"] });
+const total = SECONDS * 1000;
+let fi = 0;
+for (let k = 0; k < Math.floor(SECONDS * FPS); k++) {
+  const want = (k / FPS) * 1000;
+  while (fi + 1 < frames.length && frames[fi + 1].t <= want) fi++;
+  if (frames[fi]) ff.stdin.write(frames[fi].buf);
+}
+ff.stdin.end();
+await new Promise(res => ff.on("close", res));
+await browser.close();
+console.log("wrote", mp4);
diff --git a/demos/tapes/_settings.tape b/demos/tapes/_settings.tape
new file mode 100644
index 0000000..a3f2780
--- /dev/null
+++ b/demos/tapes/_settings.tape
@@ -0,0 +1,19 @@
+# Shared VHS settings for every Modelith demo — Source this at the top of each tape so the
+# whole set is visually consistent (one font, theme, size, cadence). Tune here once.
+#
+# Why these values: 1280x900 is tall enough that a multi-command demo does not scroll the
+# earlier commands off the top; 22px font stays legible when embedded small; the amber theme
+# echoes the canvas accent; 70ms typing reads as a calm human typing (not a race); and each
+# tape adds generous Sleeps after a command so the viewer can read the output before the next.
+
+Set Shell "zsh"
+Set FontSize 22
+Set FontFamily "JetBrains Mono"
+Set LetterSpacing 0
+Set LineHeight 1.2
+Set Width 1280
+Set Height 900
+Set Padding 28
+Set TypingSpeed 70ms
+Set WaitTimeout 30s
+Set Theme { "name": "Modelith", "black": "#14110f", "red": "#f0857a", "green": "#6cbf73", "yellow": "#e0a63a", "blue": "#7fb0d8", "magenta": "#d98ba8", "cyan": "#9fd0c7", "white": "#ece6dd", "brightBlack": "#4a3c2c", "brightRed": "#f0857a", "brightGreen": "#6cbf73", "brightYellow": "#f2c14e", "brightBlue": "#7fb0d8", "brightMagenta": "#d98ba8", "brightCyan": "#9fd0c7", "brightWhite": "#ffffff", "background": "#14110f", "foreground": "#ece6dd", "cursor": "#e0a63a", "selection": "#4a3c2c" }
diff --git a/demos/tapes/films/1-design-first.tape b/demos/tapes/films/1-design-first.tape
new file mode 100644
index 0000000..4be0e40
--- /dev/null
+++ b/demos/tapes/films/1-design-first.tape
@@ -0,0 +1,55 @@
+# FILM 1 — "Design-first": a new domain, from a blank repo to running dbt + a data contract.
+# One continuous session — the project is set up once (hidden) and evolves on screen; the
+# `clear`s are scene breaks, not resets. Every command and every line of output is real.
+Source demos/tapes/_settings.tape
+Output demos/out/1-design-first.mp4
+
+Hide
+Type "PROMPT='$ '" Enter
+Type "setopt interactivecomments" Enter
+Type "export PATH=/Users/dbose/projects/modelith/.venv/bin:$PATH" Enter
+Type "rm -rf /tmp/mdl-film1 && cp -R /Users/dbose/projects/modelith/demos/fixtures/shop /tmp/mdl-film1 && cd /tmp/mdl-film1" Enter
+Type "mdl --version >/dev/null 2>&1" Enter
+Type "clear" Enter
+Show
+Sleep 1.2s
+
+# ── Scene 1: the model you've designed, in git as plain YAML ──
+Type "# a data model, designed in git: entities, keys, relationships" Sleep 500ms Enter
+Sleep 2.5s
+Type "mdl model render | head -20" Sleep 700ms Enter
+Sleep 7s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 2: evolve it — add an entity (ULIDs minted for you) ──
+Type "# the model evolves: add an entity, Modelith mints its ULIDs" Sleep 500ms Enter
+Sleep 2.5s
+Type "mdl new entity payment --definition 'A settlement against an order'" Sleep 700ms Enter
+Sleep 4.5s
+
+# every change is validated — schema, references, naming
+Type "mdl validate" Sleep 700ms Enter
+Sleep 5s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 3: compile the model to real, contract-enforced dbt ──
+Type "# one model compiles to real dbt..." Sleep 500ms Enter
+Sleep 2s
+Type "mdl generate" Sleep 700ms Enter
+Sleep 5s
+
+# the schema carries ENFORCED contracts, keyed back to the model by ULID
+Type "awk '/- name: order$/{f=1} f{print} /primary_key/{if(f)exit}' target/dbt/models/schema.yml" Sleep 700ms Enter
+Sleep 7s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 4: ...and to more than dbt — an ODCS data contract, from the same model ──
+Type "# ...and to a data contract, from the same model" Sleep 500ms Enter
+Sleep 2s
+Type "mdl export contract" Sleep 700ms Enter
+Sleep 4s
+Type "head -16 datacontract.yaml" Sleep 700ms Enter
+Sleep 7s
diff --git a/demos/tapes/films/2-adopt-a-warehouse.tape b/demos/tapes/films/2-adopt-a-warehouse.tape
new file mode 100644
index 0000000..f9922b3
--- /dev/null
+++ b/demos/tapes/films/2-adopt-a-warehouse.tape
@@ -0,0 +1,45 @@
+# FILM 2 — "Adopt a warehouse": take over a legacy dbt project with no data model.
+# One continuous session; every command and every line of output is real. The reverse
+# detection (SCD2, Data Vault, surrogate stripping) is the warehouse's real structure.
+Source demos/tapes/_settings.tape
+Output demos/out/2-adopt-a-warehouse.mp4
+
+Hide
+Type "PROMPT='$ '" Enter
+Type "setopt interactivecomments" Enter
+Type "export PATH=/Users/dbose/projects/modelith/.venv/bin:$PATH" Enter
+Type "rm -rf /tmp/mdl-film2 && cp -R /Users/dbose/projects/modelith/demo/legacy-warehouse /tmp/mdl-film2 && cd /tmp/mdl-film2 && rm -rf owned" Enter
+Type "mdl --version >/dev/null 2>&1" Enter
+Type "clear" Enter
+Show
+Sleep 1.2s
+
+# ── Scene 1: where most teams actually are — a dbt warehouse, no model ──
+Type "# an existing dbt warehouse: staging, marts, a Data Vault: but no data model" Sleep 500ms Enter
+Sleep 2.5s
+Type "ls models/staging models/marts models/vault" Sleep 700ms Enter
+Sleep 6s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 2: one command lifts it into a model, patterns recognized ──
+Type "# one command lifts it into a logical model" Sleep 500ms Enter
+Sleep 2s
+Type "mdl reverse --project target/manifest.json --out owned" Sleep 700ms Enter
+Sleep 10s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 3: nothing is a black box — every inference is reviewable ──
+Type "# every inference is a reviewable decision, not a guess" Sleep 500ms Enter
+Sleep 2s
+Type "mdl decisions list -m owned | head -12" Sleep 700ms Enter
+Sleep 9s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 4: now you own it — it validates and reads as clean business entities ──
+Type "mdl validate -m owned" Sleep 700ms Enter
+Sleep 4.5s
+Type "mdl model render -m owned | head -16" Sleep 700ms Enter
+Sleep 8s
diff --git a/demos/tapes/films/3-the-drift-gate.tape b/demos/tapes/films/3-the-drift-gate.tape
new file mode 100644
index 0000000..4918b45
--- /dev/null
+++ b/demos/tapes/films/3-the-drift-gate.tape
@@ -0,0 +1,54 @@
+# FILM 3 — "The drift gate": the model and the warehouse stay in lockstep. A column lands in
+# the warehouse; drift classifies it; reconcile folds the safe change into the model and the
+# model is clean again. Every command, every edit, and every line of output is real — the
+# drift and reconcile run against a genuine dbt manifest from `dbt parse`.
+Source demos/tapes/_settings.tape
+Output demos/out/3-the-drift-gate.mp4
+
+Hide
+Type "PROMPT='$ '" Enter
+Type "setopt interactivecomments" Enter
+Type "export PATH=/Users/dbose/projects/modelith/.venv/bin:$PATH" Enter
+Type "rm -rf /tmp/mdl-film3 && cp -R /Users/dbose/projects/modelith/demo/ibor /tmp/mdl-film3 && cd /tmp/mdl-film3" Enter
+Type "cp /Users/dbose/projects/modelith/demos/fixtures/add-broker-code.sh ." Enter
+Type "MANIFEST=transform/warehouse/target/manifest.json" Enter
+Type "mdl --version >/dev/null 2>&1" Enter
+Type "clear" Enter
+Show
+Sleep 1.2s
+
+# ── Scene 1: the model and the warehouse agree ──
+Type "# the committed model and the compiled dbt warehouse are in lockstep" Sleep 500ms Enter
+Sleep 2.5s
+Type "mdl drift -m model --manifest $MANIFEST" Sleep 700ms Enter
+Sleep 5s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 2: a column lands in the warehouse (a real edit + a real dbt parse) ──
+Type "# a teammate adds a 'broker_code' column to the transaction model + its contract" Sleep 500ms Enter
+Sleep 3s
+Type "bash add-broker-code.sh" Sleep 700ms Enter
+Sleep 4s
+Type "cd transform/warehouse && dbt parse -q && cd ../.." Sleep 700ms Enter
+Sleep 5s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 3: drift catches it and classifies it — additive, not breaking ──
+Type "# drift sees it, and classifies it: additive, safe" Sleep 500ms Enter
+Sleep 2.5s
+Type "mdl drift -m model --manifest $MANIFEST --check" Sleep 700ms Enter
+Sleep 6s
+Type "clear" Sleep 300ms Enter
+Sleep 800ms
+
+# ── Scene 4: reconcile folds the safe change into the model — nothing lost ──
+Type "# reconcile folds the safe change into the model" Sleep 500ms Enter
+Sleep 2.5s
+Type "mdl drift -m model --manifest $MANIFEST --reconcile" Sleep 700ms Enter
+Sleep 6s
+
+# the model is in lockstep again, and still valid
+Type "mdl drift -m model --manifest $MANIFEST && mdl validate -m model" Sleep 700ms Enter
+Sleep 6s
diff --git a/docs/assets/demos/Adopt.gif b/docs/assets/demos/Adopt.gif
new file mode 100644
index 0000000..a4c428d
Binary files /dev/null and b/docs/assets/demos/Adopt.gif differ
diff --git a/docs/assets/demos/Compile.gif b/docs/assets/demos/Compile.gif
new file mode 100644
index 0000000..9ffef59
Binary files /dev/null and b/docs/assets/demos/Compile.gif differ
diff --git a/docs/assets/demos/Drift.gif b/docs/assets/demos/Drift.gif
new file mode 100644
index 0000000..2c19a43
Binary files /dev/null and b/docs/assets/demos/Drift.gif differ
diff --git a/docs/assets/demos/Erwin.gif b/docs/assets/demos/Erwin.gif
new file mode 100644
index 0000000..c072f07
Binary files /dev/null and b/docs/assets/demos/Erwin.gif differ
diff --git a/docs/assets/demos/Main.gif b/docs/assets/demos/Main.gif
new file mode 100644
index 0000000..05ee50d
Binary files /dev/null and b/docs/assets/demos/Main.gif differ
diff --git a/docs/assets/demos/Ontology.gif b/docs/assets/demos/Ontology.gif
new file mode 100644
index 0000000..9832800
Binary files /dev/null and b/docs/assets/demos/Ontology.gif differ
diff --git a/uv.lock b/uv.lock
index 30c80bd..9e9d8b1 100644
--- a/uv.lock
+++ b/uv.lock
@@ -939,7 +939,7 @@ requires-dist = [
 
 [[package]]
 name = "modelith-dbt"
-version = "0.6.12"
+version = "0.6.13"
 source = { editable = "." }
 dependencies = [
     { name = "dbt-artifacts-parser" },