create-egregore 0.20.2 → 0.21.0-runtime-mvp.2

package/runtime/claude/.claude/skills/view/SKILL.md

@@ -0,0 +1,393 @@
+---
+name: view
+description: "Generate a branded HTML artifact from Egregore data (quest, handoff, activity, board, network, or any document) and open it in the browser. Use for /view, 'render this', or 'show me visually'."
+---
+
+Generate a branded HTML artifact from Egregore data and open it in the browser.
+
+Works in both connected and local mode — resolves data from memory files, not the graph.
+
+## When to invoke
+
+User says: "show me visually", "render this", "view as artifact", "open in browser",
+"make this readable", "generate artifact", "show me [quest/handoff/plan]", "/view"
+
+Not this: terminal formatting → just format in markdown · dashboard → `/dashboard`
+
+Arguments: $ARGUMENTS (Optional: artifact type and/or name, or a file path)
+
+## Runtime source boundary
+
+Resolve deictic requests from the current conversation before organizational
+retrieval. When `this`, `that`, `it`, or `the above` unambiguously refers to
+the single artifact just created, accepted, or shown, reuse its full content
+already in context and stage it verbatim. If that content is collapsed or the
+prior receipt supplies only a canonical path, open that exact path once through
+`bin/search.sh open`; do not run `bin/search.sh query` to rediscover a known
+artifact.
+
+Resolve organizational sources from the attached authorized
+`EGREGORE_ORG_CONTEXT_V1` block first. Do not repeat its retrieval or reopen
+its already opened sources. When the requested source is absent, run one
+Runtime query and open the selected canonical file through
+`bin/search.sh open`; do not use raw `ls`, `find`, or graph traversal as an
+authorization bypass. Local rendering is the default. Publishing or replacing
+a stable hosted view requires an explicit `SHARE` request and checkpoint.
+Never publish from an ordinary view request.
+
+## Loom routing
+
+Skip this section when the prompt contains `LOOM-EXECUTOR`; execute the
+authorized render directly and never re-delegate.
+
+Explicit `--compose`, designed/flagship, or client-facing requests remain
+main-loop-only: render inline, then print
+`bash bin/loom.sh footer view --override` and mark telemetry as an override.
+For the deterministic renderer:
+
+1. Resolve `ROUTE=$(bash bin/loom.sh route view)`. When `bin/loom.sh` is not
+   present (Loom is internal-only and does not ship in the OSS distribution),
+   skip route resolution and the footer entirely and follow the script route
+   below — it is the framework default and needs no Loom.
+2. **Script route (`"mode": "script"` — the framework default).** Judgment
+   stays in the main loop: resolve what the user means into a type and source
+   (the Resolution logic below). Then run the mechanics with no model in the
+   loop — one call, which stages the source through the Runtime read boundary,
+   serves repeat views from a content-addressed cache, renders, and opens:
+   `bash bin/view-render.sh <type> <memory/...-or-file> [-- --brief <path>]`.
+   Print its output verbatim, then `bash bin/loom.sh footer view`. Do not
+   spawn a subagent, re-open the source yourself, or re-run retrieval for the
+   render. If the script exits non-zero, report its error; only a composition
+   or interaction need justifies taking over inline.
+3. For an inline route, continue below in the main loop.
+4. For a delegate route (org override), spawn `loom-executor` at the returned
+   tier with `LOOM-DECISION-ID`, `LOOM-EXECUTOR: Execute
+   .claude/skills/view/SKILL.md`, the user's exact arguments, and the attached
+   `EGREGORE_ORG_CONTEXT_V1` block verbatim; print its final output, then
+   `bash bin/loom.sh footer view`. On `LOW_CONFIDENCE:` take over inline.
+5. Emit telemetry best-effort from the driver:
+   `bash bin/telemetry.sh emit "command" '{"command":"view","routed":true}' 2>/dev/null &`.
+
+Loom transports the authorized context; it never grants new read or SHARE
+authority. The minion workflow is unrelated to this render route.
+
+## Rendering mode
+
+Use the packaged deterministic renderer by default, driven through
+`bin/view-render.sh` — rendering is mechanical, so no model belongs in that
+path. Run inline composition only when the user explicitly requests it. A
+normal “view/open/render this” uses the script route without duplicate
+retrieval. A repeat view of unchanged content reports
+`(served from render cache)` — that is expected, not staleness: the cache key
+is the content bytes, the renderer, and the arguments.
+
+## Supported artifact types
+
+- `quest` — renders quest markdown from `memory/quests/`
+- `handoff` — renders handoff markdown from `memory/handoffs/`
+- `activity` — renders live team activity dashboard (no file needed)
+- `board` — renders the typed live project-board surface (interactive editor with 5 tabs: Activity / Priority / Person / Timeline / Done). Publishing the stable hosted board is a separate explicit action.
+- `network` — renders people/relationship network (no file needed)
+- `document` — renders any markdown file with branded styling (auto-detected fallback)
+
+## Resolution logic
+
+The key job of `/view` is resolving what the user wants to see into a file path. This must work without a graph.
+
+### 1. Parse the arguments
+
+- `/view quest artifact-generation` → type=quest, name=artifact-generation
+- `/view handoff oss-security-audit` → type=handoff, name=oss-security-audit
+- `/view activity` → type=activity, no file needed
+- `/view board` → type=board, typed live surface; no source path resolution
+- `/view network` → type=network, no file needed
+- `/view artifact-generation` → no type specified, search all types
+- `/view memory/knowledge/decisions/some-decision.md` → direct file path
+- `show me the security audit visually` → extract keywords, search
+
+### 2. Resolve the file
+
+**Direct canonical file path**: If the argument names `memory/...`, open it
+through `bash bin/search.sh open "memory/..."` into a temporary render source.
+A denied or missing source stops resolution; never pass the raw canonical path
+to the renderer or fall through to an unchecked filesystem read. An explicit
+non-memory path inside the current repository may be rendered as a repository
+document, but it is never treated as organizational memory.
+
+**Quest, handoff, document, or auto-detected name**: Prefer the best matching
+canonical source and opened content already present in
+`EGREGORE_ORG_CONTEXT_V1`; stage that content as a temporary render source
+without reopening it. Otherwise run one ranked call, optionally including the
+requested type in the concept, then open only the selected result into the
+temporary render source:
+
+```bash
+bash bin/search.sh query "<artifact name and optional type>" -n 6 --compact --context-packet
+bash bin/search.sh open "<selected memory/... path>"
+```
+
+On Claude, `--compact --context-packet` keeps the ranked evidence out of the
+visible transcript — the resolution query must never print result blocks
+before the render. Pass the selected source to the renderer script as its
+`memory/...` canonical path, never as an absolute filesystem path.
+
+Infer the renderer type from the selected canonical path. If several results
+are genuinely ambiguous, show the short choices rather than scanning the
+repository again.
+
+**Activity**: No file resolution needed — runs `bin/activity-data.sh` live.
+
+**Board / Network**: Use only the renderer's typed Runtime-backed live surface;
+do not pre-scan or pre-open memory files.
+
+**Auto-detect type** (no type specified): infer `quest` or `handoff` from the
+authorized result path; everything else is `document`.
+
+### 3. Generate and open
+
+**On the script route, `bin/view-render.sh` owns everything in this section**:
+it resolves the packaged renderer locally (checked-out
+`packages/egregore-artifacts` first, then the installed `egregore-artifacts`;
+never `npx`, never a registry fetch), stages `memory/...` sources through
+`bin/search.sh open`, serves unchanged content from the content-addressed
+render cache, invokes the renderer exactly once with `--output`, and opens the
+browser. Call it once with the resolved type and source; do not re-implement
+these steps inline. The commands below describe what the script does and are
+the inline fallback only when the resolved route is `inline`.
+
+**Design trace (documents).** A `document` render should follow the design
+trace, not ship bare: auto-walk the UGI synthesis graph from the document's
+substance (five stage ids — objective · audience · register · palette ·
+grammar; option ids and auto-walk rules in
+`packages/design-system/generative-ui/skill/SKILL.md`), resolve the brief, and
+pass it to the renderer:
+
+```bash
+bash bin/node-run.sh --input-type=module -e "
+import { resolveBrief } from './packages/design-system/generative-ui/resolve-brief.js';
+import fs from 'node:fs';
+fs.mkdirSync('/tmp/egregore-artifacts', { recursive: true });
+fs.writeFileSync('/tmp/egregore-artifacts/brief-{slug}.json',
+  JSON.stringify(resolveBrief(['{objective}','{audience}','{register}','{palette}','{grammar}'])));
+"
+bash bin/view-render.sh document <memory/...-or-file> -- --brief /tmp/egregore-artifacts/brief-{slug}.json
+```
+
+Picking the five ids is judgment and stays in the main loop; the brief file
+rides into the render through `--` and participates in the cache key.
+
+Pick the five ids from the substance, one line of judgment each (e.g. a
+strategy prep doc → decide · operators · editorial · vellum · decisive; a
+public explainer → persuade · newcomer · marketing · loam · quiet). The brief
+drives palette + grammar treatment; the designed layout (nav · hero · anchored
+sections) renders regardless. If the checked-out generative-ui layer is
+unavailable, render without `--brief`; never fetch it or block on the trace.
+
+The deterministic renderer already owns its light/dark theme contract. Do not
+invoke or reread a separate visual-theme skill for an ordinary render. Apply
+the Dark Mode contract only while authoring composed HTML or changing renderer
+code.
+
+### Composition path (`--compose`) — band 5, main-loop only
+
+The template above is the **floor**. `--compose` is the **ceiling**: the design
+trace at full depth means COMPOSITION, not pass-through (D6 free-generative band
+— how the reference pages were made). The template renderer can never reach it;
+composition is the frontier model authoring the page from the substance. This
+path is what makes that reachable from the command instead of only by accident.
+
+This path fires only on explicit cues: `--compose`, "compose / make it
+presentable / client-facing / flagship / with the design trace / use the design
+trace / designed artifact / band 5". **When the user names "the design trace,"
+they mean this composed ceiling — never the floor.** Otherwise use the local
+deterministic renderer.
+
+**Technical documents compose too — in a different register.** A spec, RFC,
+protocol, architecture doc, API reference, evaluation report, or postmortem is
+flagship and gets the full chrome, but it does **not** get editorial voice. See
+step 4 below: the register decision comes before any content is written, and
+picking wrong is the single most common way a composed render lands badly.
+
+**Procedure (run inline — never delegate; see the compose note in Loom routing):**
+
+1. Read the source document in full.
+2. Start from the scaffold: `.claude/skills/view/compose-scaffold.html` (copy it;
+   it carries the complete Meridian chrome — vellum/nocturne/loam tokens, fonts,
+   sticky nav, theme toggle, contours — and a documented component kit). You fill
+   content; you do **not** rebuild the chrome or re-pick colors.
+3. Walk the UGI graph for the register/palette/grammar (as above) and stamp the
+   manifest `register`/`grammar` + the footer trail. Pick the palette by
+   substance: vellum (strategy/decision), loam (warm/instructional), etc.
+4. **Decide the register FIRST — editorial or technical.** This governs every
+   sentence you then write, and it is not a style preference; it is what the
+   document *is*. Ask: does a reader come here to be *persuaded of a view*, or
+   to *look something up and implement it*?
+
+   | | **Editorial** | **Technical** |
+   |---|---|---|
+   | Documents | strategy · prep · briefing · explainer · analysis · narrative recap · pitch | spec · RFC · protocol · architecture · API reference · evaluation report · runbook · postmortem |
+   | Headings | **statement titles** — the section's *finding* as display copy ("Most of the zoom-out is already decided.") | **descriptive, numbered** — the section's *name* ("3.3 Toponym and cultivar collision") |
+   | Hero | two-tone `Lead. <em>accent phrase</em>` + italic standfirst | plain title + a `.meta` grid (version · date · author · depends-on) |
+   | Prose | argues, lands a point, carries voice | states, qualifies, cites; declarative and neutral |
+   | Opens with | the claim | Abstract, then Scope |
+   | Decisions | `.hl` / `.readout` — the thing to land | explicit `Decision:` blocks, individually citable |
+   | Tables | `.sumtable`, status matrices | numbered with `<caption>` ("Table 2 — …") so prose can reference them |
+   | Never | bury the finding in a neutral heading | editorialize a heading, or assert without the measurement behind it |
+
+   Signals for technical: numbered sections, a version field, "spec"/"protocol"/
+   "requirements" in the title, code blocks carrying invocations, tables of
+   measurements, a References section. **When the document is something someone
+   will implement from, choose technical.** Editorial voice on a spec reads as
+   unserious and buries the lookup value — that is the failure mode this table
+   exists to prevent.
+
+   Stamp the choice into the manifest `register` and the footer trail
+   (`editorial` / `technical`, with a matching grammar such as `decisive` or
+   `specification`).
+
+5. **Transform, don't mirror** — in the chosen register. Never reproduce the
+   markdown structure verbatim; pick a component per section from the kit by
+   what the content *is*:
+   - `.ledger` for Q→A pairs · `.tagcard` for named claims · `.claims` for
+     numbers/stats · `.panels`+`.verdict-band` for option sets · `.hl` for the
+     one thing to land · `.steps` for sequences · `.feat` for capability+status
+     rows · `.threads` for decision lists · `.gap` for negatives · `.sumtable`
+     with `.dot`s for a status matrix · `.readout` for the honest bottom line
+   - technical renders lean on captioned tables, `Decision:` blocks, numbered
+     rationale lists, and `.note`/`.note.caution` for limitations and hazards;
+     they use `.hl`/`.readout` sparingly and never as a substitute for a heading
+   - **transformation in technical register means structure, not voice** — split
+     prose into tables, number the rationale, surface the decisions; do not
+     rewrite the author's claims into slogans
+   - nav links: one per composed section, to its `id` anchor
+6. **Never inline a hex in content** — every theme-sensitive color is a
+   `var(--token)`, or the toggle breaks dark mode. The kit already obeys this.
+   Verify before opening: every `var(--x)` used must be defined in **both**
+   `[data-theme="vellum"]` and `[data-theme="nocturne"]`, or dark mode breaks
+   silently on that element.
+7. Write to `/tmp/egregore-artifacts/composed-{slug}.html` and open directly
+   (`open <path>`), then report the path + `Renderer: composed (band 5, inline)`.
+
+Composition is judgment, not a script — the scaffold is the vocabulary, the
+substance decides the sentence. When `--compose` is absent, use the fast
+template path below.
+
+For typed artifacts with a file:
+```bash
+bash bin/view-render.sh <type> <memory/...-or-file>
+```
+
+For auto-detected (just a file path):
+```bash
+bash bin/view-render.sh document <memory/...-or-file>
+```
+
+For activity (no file — live surfaces are never cached):
+```bash
+bash bin/view-render.sh activity
+```
+
+**For an explicitly requested publish:** local render/open is already complete.
+Authorize `SHARE` for the exact staged artifact and show a Publish / Cancel
+checkpoint containing the organization, destination, title, source, and
+whether a stable URL will be replaced. After approval, invoke the Runtime
+publication adapter once. `/view` does not inspect hosting configuration or
+manage publication transport itself. If no Runtime publication adapter is
+available, keep the local artifact and say publishing is unavailable rather
+than falling back to a legacy script. Notification consent remains separate.
+
+### 4. Report
+
+```
+✓ Artifact opened in browser
+  File: /tmp/egregore-artifacts/{type}-{name}-{ts}.html
+```
+
+Only after an approved SHARE action returns a URL, append:
+```
+◆ https://egregore.xyz/view/{org_slug}/board   (stable — refresh for latest)
+```
+Read `org_slug` from `egregore.json`.
+
+## Fallback
+
+If the local renderer is unavailable, report that the instance renderer needs
+installation or repair. Do not install or fetch software implicitly.
+
+## Ambiguity handling
+
+If the name matches multiple files, use AskUserQuestion:
+```
+Found multiple matches for "security":
+1. handoffs/2026-03/31-cem-oss-security-audit.md
+2. quests/oss-security-review.md
+Which one?
+```
+
+If no matches found, **fall through to synthesis mode** (see below).
+
+## Synthesis mode
+
+When the input is a prompt or topic rather than a file name — or when file resolution finds nothing — synthesize an artifact from multiple sources.
+
+1. **Reuse authorized evidence** — start from `EGREGORE_ORG_CONTEXT_V1`. If it
+   is absent or insufficient, run Runtime Observe once through
+   `bin/search.sh query`; open only a selected returned canonical source through
+   `bin/search.sh open`. Never scan `memory/`. Read repository files only when
+   the user explicitly asked to synthesize codebase material.
+2. **Write a temporary markdown file** — synthesize only the authorized
+   evidence into `/tmp/egregore-artifacts/synthesized-{slug}.md`. When the
+   attached context already contains opened content, stage that content without
+   reopening its canonical source.
+3. **Render it** — `bash bin/view-render.sh document /tmp/egregore-artifacts/synthesized-{slug}.md`
+4. **Report** — same as normal: `✓ Artifact opened in browser`
+
+This is the default fallback — don't ask the user if they want synthesis. If `/view auth architecture` doesn't match a file, just do the research and render it.
+
+**When to synthesize vs. when to say "not found":**
+- Prompt is a topic/question ("auth architecture", "how does onboarding work") → synthesize
+- Prompt looks like a filename that should exist but doesn't ("my-missing-doc") → say not found
+- Use judgment — if the user clearly expects a specific file, don't synthesize a guess
+
+## Examples
+
+```
+> /view quest artifact-generation
+
+✓ Artifact opened in browser
+  File: /tmp/egregore-artifacts/quest-artifact-generation.html
+```
+
+```
+> show me the security audit visually
+
+Resolving "security audit"...
+  Found: memory/handoffs/2026-03/31-cem-oss-security-audit.md
+
+✓ Artifact opened in browser
+  File: /tmp/egregore-artifacts/handoff-31-cem-oss-security-audit.html
+```
+
+```
+> /view memory/knowledge/decisions/auth-redirect.md
+
+✓ Artifact opened in browser
+  File: /tmp/egregore-artifacts/document-auth-redirect.html
+```
+
+```
+> /view activity
+
+✓ Artifact opened in browser
+  File: /tmp/egregore-artifacts/activity-2026-04-06.html
+```
+
+```
+> /view auth architecture
+
+No file match — synthesizing from codebase...
+  Reading: api/main.py, api/auth.py, api/services/storage.py, ...
+
+✓ Artifact opened in browser
+  File: /tmp/egregore-artifacts/document-auth-architecture.html
+```

package/runtime/claude/.claude/skills/view/compose-scaffold.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<!--
+  EGREGORE COMPOSITION SCAFFOLD — the reusable chrome + component kit for
+  band-5 composed artifacts (`/view <doc> --compose`). See COMPOSE.md.
+
+  How to use: copy this file, then
+    1. fill <title>, the manifest `register`/`grammar`, nav brand + links,
+       the hero (series / h1 / standfirst / chips), and the footer.
+    2. replace the <!-- COMPONENTS: … --> region with composed sections built
+       from the component kit below — do NOT mirror the markdown; transform
+       the substance into the grammar (statement titles, panels, cards, …).
+    3. every theme-sensitive color MUST be a var(--token). Never inline hex
+       in content — dark mode breaks. The kit already does this.
+  The token blocks (vellum/nocturne) + toggle JS are complete — leave them.
+-->
+<html lang="en" data-theme="vellum" data-theme-pair="meridian" data-theme-mode="auto">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>__TITLE__ — Egregore</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,400..700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<script type="application/json" id="egregore-design-manifest">{"system":"egregore-design-convention","version":"0.3.0","lineage":"meridian","pair":"meridian","mode":"auto","resolvedTheme":"vellum","target":"browser","register":"__REGISTER__","grammar":"__GRAMMAR__","composed":true}</script>
+<style>
+:root{--serif:"Fraunces",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--ease:cubic-bezier(.22,.61,.36,1)}
+[data-theme="vellum"]{--paper:#eceef2;--paper-2:#e2e6ec;--card:#f8fafc;--ink:#15212e;--ink-soft:#4d5a68;--ink-faint:#8492a0;--line:#cbd4de;--line-soft:#dde3ea;--prussian:#2c4a6b;--prussian-bright:#3f74ad;--brass:#9a7521;--brass-bright:#c0962f;--teal:#1d7a6e;--rose:#a8493e;--t1:#9a7521;--t1-bg:#f3ead0;--t2:#1d7a6e;--t2-bg:#ddefea;--t3:#a8493e;--t3-bg:#f4ddd7;--contour:#bcc6d2;--shadow:0 1px 2px rgba(21,33,46,.06),0 12px 34px -18px rgba(21,33,46,.34)}
+[data-theme="nocturne"]{--paper:#0e151d;--paper-2:#131c26;--card:#18222e;--ink:#e7ecf2;--ink-soft:#aab6c2;--ink-faint:#76838f;--line:#2a3744;--line-soft:#202b36;--prussian:#5b8cc0;--prussian-bright:#7aa9d8;--brass:#d8b25a;--brass-bright:#e7c878;--teal:#3fb0a0;--rose:#d2796b;--t1:#d8b25a;--t1-bg:#2c2616;--t2:#3fb0a0;--t2-bg:#152b29;--t3:#d2796b;--t3-bg:#2c1c18;--contour:#283543;--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -20px rgba(0,0,0,.7)}
+[data-theme="loam"]{--paper:#f0ece2;--paper-2:#e7e1d3;--card:#faf7f0;--ink:#241d12;--ink-soft:#5c4f3a;--ink-faint:#8f8168;--line:#d3c9b4;--line-soft:#e2dac8;--prussian:#5a6b3a;--brass:#9a6b21;--teal:#3a7a5c;--rose:#a85a3e;--t1:#9a6b21;--t1-bg:#efe2c8;--t2:#3a7a5c;--t2-bg:#dcebe0;--t3:#a85a3e;--t3-bg:#f2ded4;--contour:#c8bca0;--shadow:0 1px 2px rgba(36,29,18,.06),0 12px 34px -18px rgba(36,29,18,.3)}
+
+/* ── base ── */
+*{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth}
+body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;transition:background .3s var(--ease),color .3s var(--ease)}
+a{color:var(--prussian-bright);text-decoration:none}
+.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
+.col{max-width:860px}
+.contours{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
+.contours path{fill:none;stroke:var(--contour);stroke-width:1}
+main{position:relative;z-index:1}
+.rule{border:none;border-top:1px solid var(--line-soft);margin:60px 0 0}
+code{font-family:var(--mono);font-size:.82em;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:5px;padding:1px 6px;color:var(--prussian-bright)}
+p{color:var(--ink-soft)} p b,li b,.lede b{color:var(--ink);font-weight:600}
+
+/* ── nav (sticky section rail) ── */
+nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:13px 32px;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
+nav .brand{font:500 .68rem/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
+nav .brand b{color:var(--prussian-bright);font-weight:600}
+nav .links{display:flex;gap:20px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
+nav .links::-webkit-scrollbar{display:none}
+nav .links a{font:400 .7rem/1 var(--mono);color:var(--ink-soft);white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent}
+nav .links a:hover{color:var(--ink);border-bottom-color:var(--t1)}
+.toggle{flex:0 0 auto;font:500 .66rem/1 var(--mono);letter-spacing:.5px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer}
+.toggle:hover{color:var(--ink);border-color:var(--ink-faint)}
+
+/* ── hero ── */
+header.hero{padding:92px 0 60px}
+.series{display:flex;align-items:center;gap:14px;font:500 .7rem/1 var(--mono);letter-spacing:2.5px;text-transform:uppercase;color:var(--t1);margin-bottom:32px}
+.series::before{content:"";width:44px;height:1px;background:var(--t1)}
+h1{font-family:var(--serif);font-weight:420;font-size:clamp(2.6rem,5.4vw,4rem);line-height:1.06;letter-spacing:-.02em;max-width:19ch}
+h1 em{font-style:italic;font-weight:430;color:var(--prussian-bright)}
+.standfirst{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.44;color:var(--ink-soft);max-width:56ch;margin:26px 0 28px}
+
+/* ── section frame ── */
+section{padding:72px 0 6px}
+.seclabel{display:flex;align-items:center;gap:10px;font:500 .72rem/1 var(--mono);letter-spacing:2.5px;text-transform:uppercase;color:var(--t1);margin-bottom:16px}
+.seclabel .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--t1);border-radius:50%;font-size:.62rem}
+h2{font-family:var(--serif);font-weight:430;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.015em;max-width:24ch;margin-bottom:12px}
+.lede{font-size:1.05rem;color:var(--ink-soft);max-width:62ch;margin-bottom:24px}
+
+/* ── chips / pills / badges ── */
+.chips{display:flex;flex-wrap:wrap;gap:9px}
+.chip{font:500 .68rem/1 var(--mono);letter-spacing:.4px;padding:7px 13px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);white-space:nowrap}
+.chip.ok{border-color:var(--t2);color:var(--t2)} .chip.ok::before{content:"● ";font-size:.6rem}
+.chip.brass{border-color:var(--t1);color:var(--t1)} .chip.brass::before{content:"◇ ";font-size:.66rem}
+.chip.warn{border-color:var(--t3);color:var(--t3)}
+.bd{display:inline-flex;align-items:center;gap:5px;font:600 .64rem/1 var(--mono);letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap}
+.bd.ok{background:var(--t2-bg);color:var(--t2)} .bd.half{background:var(--t1-bg);color:var(--t1)} .bd.no{background:var(--t3-bg);color:var(--t3)} .bd.neu{background:var(--paper-2);color:var(--ink-faint)}
+
+/* ── claim / stat cards ── */
+.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 8px}
+.claims.four{grid-template-columns:repeat(4,1fr)} .claims.two{grid-template-columns:1fr 1fr}
+@media(max-width:760px){.claims,.claims.four,.claims.two{grid-template-columns:1fr 1fr}}
+.claim{background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow)}
+.claim .v{font-family:var(--serif);font-size:1.55rem;line-height:1.1;color:var(--t1)}
+.claim.teal .v{color:var(--t2)} .claim.rose .v{color:var(--t3)}
+.claim .l{font-size:.84rem;color:var(--ink-soft);margin-top:8px;line-height:1.5}
+
+/* ── labeled tag card ── */
+.tagcard{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:22px 26px;margin:14px 0;box-shadow:var(--shadow)}
+.tagcard .tag{display:inline-block;font:600 .62rem/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#fff;border-radius:6px;padding:5px 9px;margin-right:12px;vertical-align:2px;background:var(--prussian)}
+.tagcard .tag.teal{background:var(--teal)} .tagcard .tag.rose{background:var(--rose)} .tagcard .tag.brass{background:var(--brass)}
+.tagcard h3{display:inline;font-family:var(--serif);font-weight:500;font-size:1.16rem}
+.tagcard p{margin-top:12px;font-size:.95rem}
+.tagcard .verdict{margin-top:12px;font:600 .74rem/1.5 var(--mono);letter-spacing:.3px}
+.tagcard .verdict.ok{color:var(--t2)} .tagcard .verdict.no{color:var(--t3)}
+
+/* ── comparison panels (2–3 up) ── */
+.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 10px}
+.panels.three{grid-template-columns:repeat(3,1fr)}
+@media(max-width:760px){.panels,.panels.three{grid-template-columns:1fr}}
+.panel{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column}
+.panel .ph{font:600 .7rem/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#fff;padding:13px 18px;background:var(--prussian)}
+.panel.b .ph{background:var(--teal)} .panel.c .ph{background:var(--ink-faint)} .panel.warn .ph{background:var(--rose)}
+.panel .pb{padding:16px 20px;font-size:.9rem;color:var(--ink-soft);flex:1}
+.panel .pb b{color:var(--ink)}
+.panel .price{font-family:var(--serif);font-size:1.3rem;color:var(--t1);margin:2px 0 10px}
+.panel ul{list-style:none;margin-top:8px} .panel li{padding:5px 0 5px 18px;position:relative;line-height:1.5}
+.panel li::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--t1)}
+.panel .pr{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
+.panel .pr:last-child{border-bottom:none} .panel .pr .k{font:500 .68rem/1.4 var(--mono);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px}
+.panel .pf{padding:12px 20px;border-top:1px solid var(--line-soft);font:500 .68rem/1.5 var(--mono);color:var(--ink-faint)}
+.verdict-band{background:var(--t2-bg);border:1px solid var(--t2);border-radius:12px;padding:16px 22px;font:500 .82rem/1.7 var(--mono);color:var(--ink)}
+.verdict-band b{color:var(--t2)}
+
+/* ── highlight callout ── */
+.hl{background:var(--t2-bg);border:1px solid var(--t2);border-radius:14px;padding:22px 26px;margin:18px 0}
+.hl.brass{background:var(--t1-bg);border-color:var(--t1)} .hl.rose{background:var(--t3-bg);border-color:var(--t3)}
+.hl .k{font:600 .66rem/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--t2)}
+.hl.brass .k{color:var(--t1)} .hl.rose .k{color:var(--t3)}
+.hl h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin:8px 0 10px}
+.hl p{font-size:.96rem} .hl .num{font-family:var(--serif);font-style:italic;color:var(--ink)}
+
+/* ── Q/A ledger ── */
+.ledger{margin:24px 0;border-top:1px solid var(--line)}
+.ledger .row{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:16px 4px;border-bottom:1px solid var(--line-soft)}
+@media(max-width:680px){.ledger .row{grid-template-columns:1fr}}
+.ledger .q{font:500 .78rem/1.5 var(--mono);color:var(--ink-faint);padding-top:3px}
+.ledger .a{font-size:.95rem;color:var(--ink-soft)} .ledger .a b{color:var(--ink)}
+
+/* ── numbered steps ── */
+.steps{margin:24px 0;counter-reset:st}
+.step{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
+.step:last-child{border-bottom:none}
+.step .b{counter-increment:st;font-family:var(--serif);font-size:1.25rem;color:var(--t1)} .step .b::before{content:counter(st,decimal-leading-zero)}
+.step h4{font-family:var(--serif);font-weight:500;font-size:1.05rem;margin-bottom:3px} .step h4 .min{font:500 .64rem/1 var(--mono);color:var(--ink-faint);letter-spacing:.5px;margin-left:8px}
+.step p{font-size:.9rem}
+
+/* ── feature rows w/ trailing badges ── */
+.feat{display:grid;grid-template-columns:1fr auto;gap:14px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-soft)}
+.feat:last-child{border-bottom:none} .feat .fx{font-size:.98rem;color:var(--ink-soft)} .feat .fx b{color:var(--ink);font-weight:600}
+.feat .fb{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
+
+/* ── checkbox thread list (decisions) ── */
+.threads{list-style:none;margin:24px 0}
+.threads li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:.98rem;color:var(--ink-soft);align-items:baseline}
+.threads li::before{content:"";flex:0 0 auto;width:12px;height:12px;border:1.5px solid var(--t1);border-radius:3px;transform:translateY(1px)}
+.threads b{color:var(--ink)}
+
+/* ── gap / negative callout ── */
+.gap{background:var(--t3-bg);border:1px solid var(--t3);border-radius:14px;padding:22px 26px;margin:22px 0}
+.gap h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--t3);margin-bottom:12px}
+.gap ul{list-style:none} .gap li{padding:5px 0 5px 20px;position:relative;font-size:.94rem;color:var(--ink-soft)}
+.gap li::before{content:"×";position:absolute;left:2px;color:var(--t3);font-weight:600} .gap li b{color:var(--ink)}
+
+/* ── status / summary table ── */
+.sumtable{width:100%;border-collapse:collapse;margin:24px 0;font-size:.9rem}
+.sumtable th{text-align:left;font:600 .64rem/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);padding:0 12px 12px;border-bottom:1px solid var(--line)}
+.sumtable th.c,.sumtable td.c{text-align:center}
+.sumtable td{padding:11px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:middle}
+.sumtable tr td:first-child{color:var(--ink);font-weight:500}
+.sumtable .tier{font:500 .64rem/1 var(--mono);text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint)}
+.dot{display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;font-size:.72rem;font-weight:700}
+.dot.ok{background:var(--t2-bg);color:var(--t2)} .dot.half{background:var(--t1-bg);color:var(--t1)} .dot.no{background:var(--t3-bg);color:var(--t3)} .dot.neu{background:var(--paper-2);color:var(--ink-faint)}
+
+/* ── accent-left readout ── */
+.readout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--t1);border-radius:4px;padding:20px 24px;margin:28px 0;font-size:1rem;color:var(--ink-soft)}
+.readout b{color:var(--ink)}
+
+/* ── footer ── */
+footer{padding:64px 0 90px;font:400 .74rem/1.8 var(--mono);color:var(--ink-faint)}
+footer .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
+footer .tg{border:1px solid var(--line-soft);border-radius:6px;padding:3px 10px;background:var(--card)}
+</style>
+</head>
+<body>
+<svg class="contours" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1400 900"><path d="M-50,160 C300,90 700,240 1450,130"/><path d="M-50,440 C400,360 900,540 1450,420"/><path d="M-50,720 C350,660 800,820 1450,710"/></svg>
+<main>
+<nav>
+  <span class="brand">EGREGORE · <b>__BRAND__</b></span>
+  <div class="links"><!-- NAV: one <a href="#anchor">Short label</a> per section --></div>
+  <button class="toggle" onclick="__t()">◐ <span id="tl">nocturne</span></button>
+</nav>
+
+<div class="wrap col">
+
+<header class="hero">
+  <div class="series">__SERIES_KICKER__</div>
+  <h1>__LEAD__. <em>__ACCENT_PHRASE__</em></h1>
+  <p class="standfirst">__STANDFIRST__</p>
+  <div class="chips"><!-- CHIPS: from status/meta --></div>
+</header>
+
+<!-- COMPONENTS: compose sections here. Each section:
+     <hr class="rule"><section id="anchor">
+       <div class="seclabel"><span class="n">01</span> LABEL</div>
+       <h2>Statement title — the finding, not the raw heading.</h2>
+       … pick from the kit: .ledger .tagcard .claims .panels+.verdict-band
+       .hl .steps .feat .threads .gap .sumtable .readout …
+     </section>
+-->
+
+<footer>
+  __FOOTER_LINE__
+  <div class="tags"><span class="tg">__KIND__</span><span class="tg">__AUTHOR__</span><span class="tg">ugi · __TRAIL__</span><span class="tg">composed</span></div>
+</footer>
+
+</div>
+</main>
+<script>
+(function(){
+  var saved=localStorage.getItem('eg-theme-mode');
+  var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var t=saved==='dark'||(saved!=='light'&&prefersDark)?'nocturne':'vellum';
+  apply(t);
+  window.__t=function(){apply(document.documentElement.dataset.theme==='vellum'?'nocturne':'vellum',true)};
+  function apply(theme,persist){document.documentElement.dataset.theme=theme;var el=document.getElementById('tl');if(el)el.textContent=theme==='vellum'?'nocturne':'vellum';if(persist)localStorage.setItem('eg-theme-mode',theme==='nocturne'?'dark':'light')}
+})();
+</script>
+</body>
+</html>