@bongos/core 1.19.378 → 1.19.380

package/docs/design/apex-pass-2-direction.md

@@ -0,0 +1,104 @@
+# Apex pass 2, round 1: the world round (task 1003296)
+
+**Date:** 2026-08-26 / 27 · **Goal:** 1000080 (Apex UI pass 2), with the hall goal 1000081 and the status goal 1000082 waiting on this pick · **Criterion:** `apex-world-approved` · **Seed key:** `b789e5c5` (impeccable direction roll, mode persuade)
+
+This document records how the first round of the whole-frontend design pass was run, what was put in front of the owner, what the owner picked, and what was rejected and why. The mocks it refers to live under `docs/design/mocks/world/`; the contact sheet is `docs/design/mocks/world/world-sheet.html`. Product truth lives in `PRODUCT.md` at the repo root; nothing visual is recorded there.
+
+## 1. What this round had to do
+
+One visual world for three surfaces that today speak three unrelated voices (marigold/Baloo apex, indigo/Inter hall, parchment/Cinzel status). The owner's settled constraints (session of 2026-08-26): dark-first with a real light mode; vanilla HTML/CSS/JS on the branding-pack token contract; only the name, the bongo pair and "laying down a beat" inherited; two equal front doors; the hall's sidebar IA and the status ledger's sections unchanged; goal 1000063's wormhole landing stays separate. Round 1 = four style candidates, each rendered as a real HTML triplet (landing first viewport, hall work board, status index) on one contact sheet with a light/dark toggle and a 390 frame.
+
+## 2. Method, as run
+
+1. `/impeccable init` wrote `PRODUCT.md` (product truth only; the owner's binding visual constraints recorded without expansion).
+2. `.impeccable/config.json` records `buildPath: comp` (the owner chose comp-led for this round).
+3. The direction roll: `concept-seed.mjs --scope direction --mode persuade` (seed `b789e5c5`). Seven grounded candidates were derived from the audience's world across seven material families, ordered by resonance:
+   1. the star atlas (engraved celestial cartography; the hub already speaks "address in the sky")
+   2. the identity program (Swiss print system; a world built to be re-themed)
+   3. the night watch (glass consoles over a night landscape)
+   4. the split-flap dispatch board (mechanical signage; the pipeline as flipping tiles)
+   5. mission control (telemetry screens)
+   6. the flight case (anodised hardware, engraved labels)
+   7. the rhythm machine (the drum-machine step row; the brief's own literal reading, spent on exactly one candidate)
+
+   The rut kept out of every card: dark SaaS with a purple glow, and cream plus serif.
+4. The roll assigned candidate 7 (the rhythm machine) and dealt six catalog challengers. Each was fused with product facts and weighed against the assigned direction on audience identification and product clarity:
+   - nixie-tube laboratory counter: **competitive** (holds product clarity through real numbers; loses identification)
+   - rain-slicked signboard alley: **competitive** (holds identification, a lit sign is universally legible; loses clarity on the dense board)
+   - darkroom exposure record on zone sheets: competitive on clarity only (cross-hatch for file conflicts, hatch density for load); held in the re-roll pool
+   - hand-processed 16mm film: **declined**; kept: the accent reserved for the active frame only
+   - gravity rain garden: **declined**; kept: one dominant physical field per viewport, every label level
+   - warm consumer app surface: **declined**; kept: bright means pressable, labels sound like a person wrote them
+5. Comps were generated for the assigned direction, the pick (star atlas), the two competitive challengers and the canon exit (Higgsfield, `nano_banana_pro`, 16:9 at 2k), thirteen images under `.impeccable/mocks/decision/` with prompt sidecars and the prompt embedded in each file. Four builders were spawned to turn these into HTML triplets.
+6. **The owner pinned the templates.** On seeing the comps, the owner said the candidates did not look like the reference images and asked that each candidate be designed off one of them, using them as templates: the four site images for the main page, the two dashboard images for the builders' hall. A brief-pinned direction beats the roll (that is the method's own rule), so the four roll-based builds were stopped and the round was re-run template-led:
+   - the six references were uploaded to Higgsfield as image references and sixteen comps generated FROM them (landing, status, hall-dark, hall-light per candidate), plus six text-free image plates for the mocks' material (misty forest, planet limb, chrome blobs, iridescent sphere, leaves, sage paper);
+   - the owner then asked why images were being regenerated at all when the references exist, and set the rule that governs every later round: **Higgsfield is for hero images only** (text-free atmosphere and hero plates such as the planet limb, the chrome blobs, the leaves, the forest); the UI itself is recreated from the owner's templates by impeccable and the taste skill, never re-rendered as an image. `.impeccable/config.json` was flipped to `buildPath: code` (code-led) to match. The sixteen template-led comps that already existed stayed on the sheet as evidence beside each mock; none were generated after that point.
+7. Four builders built the four triplets from the templates (with the comps as a secondary reference); the sheet was assembled; the owner reviewed it in the browser.
+
+8. **Verification pass (2026-08-27).** Before the owner saw the sheet, each candidate's twelve renders were set beside its template by a reviewer and the material gaps fixed in one batch: natgeo's planet had no lit limb and its hall glass hid the forest; chrome's blobs sat on the headline and its masthead clipped the h1 at 390; blue-hud's hall forest was crushed to black and its status page had two voids; organic's status page lacked the template's wide four-column slab and had a hard seam at the first viewport's edge. All 48 renders clean after the pass.
+9. **Round 1 review.** The owner did not pick one candidate. The answer, in substance: chrome-blobs is the lean, but the bongos and the blobs "could use a Higgsfield redesign"; natgeo-editorial and organic-cards also liked; blue-hud not named. The owner asked to "go deeper and further refine the three", dropped the status index from the round, and named two raises to carry: natgeo's planet limb or lamp yellow, and chrome's leader-line callouts or joined pill doors. Asked what refine meant, the owner chose **fidelity + raises**, plus **a second composition per candidate built with the taste skill** ("we used impeccable for this rendering, perhaps the second composition could use the taste skill to compare how it looks against impeccable"), and Higgsfield re-renders of **the bongos, the blobs, the planet and the leaves** (hero objects and plates only; the rule from step 6 holds).
+10. **Round 2, as run.** Twelve text-free plates were generated in one batch (`nano_banana_pro`, 2k): two bongo pairs per candidate (chrome three-quarter and straight-on; matte black with a warm rim light, three-quarter and top-down; natural wood with a leaf, three-quarter and top-down), a three-blob chrome set and a single blob, a planet limb and a moon crescent, and the leaf arrangement over deep green and over pale sage. Three came out off-brief and were handled rather than re-rolled: two bongo pairs rendered on white (cut out with the background remover, so the world gets real alpha), the crescent rendered as a sepia wet-plate with a border (kept, usable only cropped; the limb is the better plate). Opaque plates were re-encoded to JPEG and the three cutouts kept as PNG at 1600px (`r2-*` in `.impeccable/mocks/world-assets/`, each with its prompt sidecar). Six builders then ran in parallel, two per candidate: **Track A** refined `landing.html` + `hall.html` + `_tokens.css` in place under `/impeccable` (fidelity against the template, the raises folded in where they fit, the new plates swapped in); **Track B** wrote `landing-b.html`, a second composition of the same template on the same token layer under `design-taste-frontend`, without opening Track A's landing. blue-hud was left as built. The sheet was rebuilt: three rows, five tiles each (landing A, landing B, hall, both landings at 390), a `template` toggle in place of `comp`, and a collapsed round-1 record holding blue-hud and the three status mocks.
+
+Higgsfield spend: round 1, 92 credits (46 images at 2 credits each, Plus plan); round 2, 27 credits (12 images at 2 plus 3 background removals at 1). Both logged as art costs under this claim.
+
+## 3. The candidates on the sheet
+
+Every candidate keeps the same content (the pack tagline as the headline, the lede, the two doors, the pipeline's five beats, the hall's pinned sidebar, the ledger's sections, real ledger numbers where they exist and `<!-- sample -->` where they do not) and the same mechanics (`data-mode` on `<html>`, every dark rule written twice, the fifteen contract tokens as the only colour source, reduced-motion kill switch, zero console errors at 1440 and 390 in both modes). The hall in every candidate follows the two hall templates: the dark glass-over-forest dashboard in dark mode, the light mono-label console in light mode, skinned in the candidate's palette.
+
+| # | Slug | Template (owner reference) | World in one line | Honest risk |
+|---|---|---|---|---|
+| 1 | `natgeo-editorial` | `<redacted>.jpg` | Near-black editorial ground, a light grotesk at large scale split around a planet, one yellow accent, hairlines, the expedition map as the ledger's portrait | Editorial restraint asks a lot of the hall's density; the planet must stay the product's sky, not decoration |
+| 2 | `chrome-blobs` | `<redacted>.jpg` | Pure black, liquid-chrome forms behind light geometric type, leader-line callouts carrying real numbers, pill nav, one warm orange action | Rendered rasters on every page; keep them few and large; orange only for what is pressable |
+| 3 | `blue-hud` | `<redacted>.jpg` | Black, electric blue, condensed caps with the second line in blue, HUD brackets and ticks, a glowing ring behind the mark | The most rut-adjacent (near-black plus one glowing accent); earns its place only if the HUD grammar organises real content |
+| 4 | `organic-cards` | `<redacted>.jpg` | Deep green with brown and tan, rounded organic cards with circular badges, photographic leaves over sculpted paper, a rounded sans; light is its natural home | Green says gardening unless the cards carry the pipeline and the ledger |
+
+Hall templates for all four: `hall-2-dark-glass-dashboard-forest.webp` (dark mode), `hall-1-light-mono-label-dashboard.webp` (light mode).
+
+Files per candidate: `docs/design/mocks/world/<slug>/{_tokens.css, landing.html, hall.html, status.html}`, plus `landing-b.html` (the taste-skill composition) for the three round-2 survivors. Comps: `.impeccable/mocks/decision/<slug>-{landing,status,hall-dark,hall-light}.jpg` with `.json` sidecars. Plates: `.impeccable/mocks/world-assets/` (round 1 unprefixed, round 2 `r2-*`). The `.impeccable/` tree is committed but not published (the core tarball allowlists `docs/design/` wholesale, so the heavy images were kept out of it; the six references ship, as the task asked).
+
+After round 1, blue-hud (candidate 3) left the round and the status index left the sheet (its round-1 mocks stay on disk for S1). Round 2 is three candidates, two landings each:
+
+| Slug | Landing A (impeccable, refined in place) | Landing B (taste skill, second composition) | Hall |
+|---|---|---|---|
+| `chrome-blobs` | `landing.html` | `landing-b.html` | `hall.html` |
+| `natgeo-editorial` | `landing.html` | `landing-b.html` | `hall.html` |
+| `organic-cards` | `landing.html` | `landing-b.html` | `hall.html` |
+
+## 4. Review
+
+Open `docs/design/mocks/world/world-sheet.html` in a browser. Dark is the default; flip to light with the toggle; `template` swaps each tile for the owner's reference image it was built against (the hall tile shows the hall template for the current mode); the two small tiles are the landings at 390; `open full` walks any page at full size; the round-1 record (blue-hud, the status mocks) is a collapsed section under the candidates. Verification, both rounds: every page rendered clean (no console errors or warnings, no failed requests, no horizontal overflow) at 1440x900 and 390x844 in both modes through `playwright-core` on the system browser.
+
+## 5. The owner's pick
+
+**Round 1 (2026-08-27): no single pick; a lean and a steer.** Lean: chrome-blobs. Steer: re-render the bongos and the blobs as hero objects; refine chrome-blobs, natgeo-editorial and organic-cards further before choosing; drop the status index from the round. Register: neither safer nor bolder was named; "go deeper" was the word, taken as fidelity plus the raises. Raises to carry: natgeo's planet limb or lamp yellow; chrome's leader-line callouts or joined pill doors.
+
+**Round 2 (2026-08-27): the pick is `chrome-blobs`, composition A (the impeccable-led refinement).** Raises carried across from the unpicked candidates: none; the world keeps what it already had (the leader-line callouts on real numbers, the joined pill door pair) and the single-accent discipline it took in round 2 (orange lights only what is live or pressable). The hall is chrome-blobs' hall (glass over the forest in dark, the mono-label console in light).
+
+The owner's steer, in substance, three parts:
+
+1. **Light mode "needs a lot of refinement", and the landing may go dark-only.** Not decided; the settled constraint (dark-first with a real, tested light mode) stands until the owner says otherwise. A2 treats it as an open decision to put in front of the owner with the compositions: either the light landing is rebuilt to the same standard (the chrome rehoused in a black specimen panel is the current answer, and it is the weakest region of the world), or the landing ships dark-only while the hall and the hub keep both modes.
+2. **An animated background for the landing, built from the blobs, possibly bongo-shaped blobs.** A signature interaction for the first viewport: the chrome forms drifting or settling, and a version where the forms are the bongo silhouette. Code-led (CSS or canvas; three.js only if a live-3D direction is chosen, per PRODUCT.md); reduced motion kills it; the plates stay text-free hero material. A2 carries it as the named signature interaction; A3 builds it.
+3. **The projects page (the hub, `/projects`) in this world: what it would look like and what might change.** Not in the world round's scope; routed as its own task under the apex goal (see §7).
+
+Register: neither safer nor bolder was named for the composition itself; the steer is the register.
+
+## 6. Rejected candidates and why
+
+**blue-hud, rejected in round 1.** The owner named the other three and not this one. Its own table row had already called the risk: the most rut-adjacent of the four (near-black plus one glowing accent), earning its place only if the HUD grammar organised real content; on the sheet the grammar decorated more than it organised. What it leaves behind: the one-live-step accent rule on the pipeline rail, and the full-width band layout its status page settled into. Its mocks stay on disk as built and verified.
+
+**natgeo-editorial, unpicked in round 2.** It went furthest on fidelity (the real limb behind the split headline, the template's disc-and-label doors, the map-annotation callouts) and its taste composition (the framed plate with the vertical pipeline ladder) was the most inventive page of the round. It lost on world, not on craft: the owner's lean was the chrome from the first sheet, and the editorial register asks the most of the hall's density. What it leaves behind: the callouts as map annotations (a caption over a tabular value, a hairline, a dot on the object) and the disc-and-label door as a form the platform may want for a quieter surface.
+
+**organic-cards, unpicked in round 2.** The strongest light mode of the three and the only candidate whose hall carried the forest warmly. It lost on register: green-and-tan says garden before it says pipeline, and the owner did not name it once the chrome was refined. What it leaves behind: the faceted slab as a hero ground (its taste composition), the circular pipeline badges, and the cut-out object over a photographic plate as a hero grammar.
+
+**The taste compositions (B) of all three candidates, unpicked.** Built under `design-taste-frontend` from the template, the plates and the content, without seeing the impeccable landing. Each differed materially in geometry (chrome: mirrored, rail at the top, headline bottom-right; natgeo: the framed plate; organic: the slab as ground). The owner chose the impeccable composition of the chosen world; the B pages stay on disk as the comparison the owner asked for, and A2's three composition versions may quote from them.
+
+Rejected by the owner's pinning (not by taste): the roll's hand. The rhythm machine (assigned), the star atlas (impeccable's pick), the nixie ledger and the signboard index (competitive challengers), the first reference fusion ("expedition") and the category canon. Their comps remain under `.impeccable/mocks/decision/` as the round's spent hand; they carry no approval and none was built. What the roll established still applies to the built world: the accent lights only what is live or pressable; one dominant move per viewport; labels sound like a person wrote them; file conflicts render as cross-hatch, not colour.
+
+## 7. What carries forward
+
+- **A2 (task 1003297):** three composition versions of the landing in the chosen world, from `docs/design/mocks/world/chrome-blobs/landing.html` and `_tokens.css`, with the steer applied: the animated chrome background as the named signature interaction (at least one version with bongo-shaped forms), and the light-mode decision put to the owner explicitly (rebuild light to the dark standard, or ship the landing dark-only while the hall and hub keep both modes). The round-2 plates (`r2-chrome-blobs-set.jpg`, `r2-chrome-blob-one.jpg`, `r2-bongos-chrome-b.jpg`, `r2-bongos-chrome-a-cut.png`) are the hero material; no new comps.
+- **A4 (task 1003299):** the hub composition round now also answers the owner's third steer: what the projects page looks like in the chrome world and what changes on it.
+- **A3 (task 1003298):** the landing build and `DESIGN.md`, written from the built page (impeccable's rule: the rulebook is documented from the build, never before it). The chosen candidate's `_tokens.css` is the starting token layer; the fifteen contract tokens stay the only host-overridable surface.
+- **H1 (task 1003302) and S1 (task 1003310)** start from the chosen candidate's hall and status mocks and the two hall templates.
+- The taste-skill bans apply to the landing and hub only; the hall and status keep the house voice.
+- **Image generation from here on:** hero and atmosphere plates only, generated text-free and embedded with their prompt; no UI comps. A2's three composition versions and A3's build are code-led against the chosen template.

package/docs/design/mocks/world/blue-hud/_tokens.css

@@ -0,0 +1,246 @@
+/* THE HUD - Cloud Bongos world candidate "blue-hud".
+   World: an instrument panel read in the dark. Black ground, white condensed caps, one electric blue
+   that lights only what is live or pressable, and HUD registration marks (crosshairs, hairline rules
+   with a node, tracked caps, dot rows, hatch strips) that frame every region.
+   Palette strategy: RESTRAINED - one accent hue over a neutral black / neutral off-white scale,
+   sampled from the owner's template (ground #000103, headline blue #65a9fb, light ground #eeecee).
+   Faces: Antonio (condensed caps display, the readout voice), Barlow (body, UI, tracked caps labels),
+   Azeret Mono (task numbers, credits, figures, tabular), JetBrains Mono (light-hall group labels).
+   Materials: a white-hot ring with a blue bloom behind the mark, the misty-forest plate under the dark
+   hall glass, the iridescent hud-sphere plate inside the status world card, hatch for a blocked cell.
+   Corners (template system): PILL for anything pressable, 10px for containers, marks stay sharp.
+   Derived from the contract: every blue is color-mix()'d off --accent / --accent-deep and every surface
+   off --bg / --bg-card / --bg-frame, so a host pack overriding the 14 contract tokens still wins. */
+
+:root {
+  /* ---- contract tokens (a host instance overrides exactly these) ---- */
+  --bg: #eeecee;
+  --bg-card: #ffffff;
+  --bg-deep: #e5e3e5;
+  --bg-frame: #f8f7f8;
+  --ink: #12161b;
+  --ink-soft: #4c555f;
+  --ink-faint: #626b75;
+  --rule: #dcdadc;
+  --rule-soft: #e8e6e8;
+  --accent: #65a9fb;
+  --accent-deep: #0a55b0;
+  --sea: #1c5f8e;
+  --terracotta: #c2673a;
+  --font-display: 'Antonio', 'Oswald', 'Arial Narrow', sans-serif;
+  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
+
+  /* ---- derived: faces ---- */
+  --font-mono: 'Azeret Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
+  --font-mono-alt: 'JetBrains Mono', 'Azeret Mono', ui-monospace, Consolas, monospace;
+  --label-font: 'JetBrains Mono', 'Barlow', system-ui, sans-serif;
+  --label-track: .12em;
+  /* the mode toggle's glyph is chosen by token, so page CSS never branches on mode */
+  --icon-moon: none;
+  --icon-sun: block;
+
+  /* ---- derived: accent roles (all mixed off the contract blues) ---- */
+  --accent-text: color-mix(in srgb, var(--accent-deep) 92%, #000);
+  --accent-ui: var(--accent-deep);
+  --accent-fill: var(--accent-deep);
+  --on-accent: #ffffff;
+  --accent-tint: color-mix(in srgb, var(--accent) 34%, #fff);
+  --accent-faint: color-mix(in srgb, var(--accent) 15%, #fff);
+  --halo: color-mix(in srgb, var(--accent-deep) 45%, #fff);
+  --halo-bloom: var(--accent);
+
+  /* ---- derived: structure (template corner system) ---- */
+  --line: 1px;
+  --radius: 10px;
+  --radius-sm: 7px;
+  --radius-pill: 999px;
+  --bracket: #8f96a0;
+  --bracket-page: color-mix(in srgb, var(--accent-deep) 68%, #737b85);
+  --edge-ui: #767f88;
+  --glass: #ffffff;
+  --glass-edge: var(--rule);
+  --glass-blur: 0px;
+  --side-bg: var(--bg-frame);
+  --panel-bg: var(--bg-card);
+  --topbar-bg: var(--bg-card);
+  --row-hover: color-mix(in srgb, var(--accent) 13%, transparent);
+  --hatch: #c9c7c9;
+  /* a closed (not-live) bar or step: neutral, so the accent stays on what is live */
+  --bar-quiet: color-mix(in srgb, var(--ink) 24%, var(--bg-card));
+  --shadow-card: 0 10px 26px -18px rgba(16, 20, 26, .30);
+  --world-ground: #000103;
+
+  /* ---- derived: plate (the ground photograph; dark hall only) ---- */
+  --plate: none;
+  --plate-tint: transparent;
+  --plate-blur: 0px;
+
+  /* ---- derived: the inherited bongo mark, painted as a silhouette ---- */
+  --skin-hi: #cfd4da;
+  --skin-mid: #a8b0b9;
+  --skin-lo: #7c858f;
+  --drum-shadow: #2b3138;
+  --drum-shell: #2a3138;
+  --drum-shell-deep: #12171c;
+  --drum-shell-2: #232a31;
+  --drum-ink: #000000;
+  --drum-rim: color-mix(in srgb, var(--accent-deep) 55%, transparent);
+
+  /* ---- derived: state ---- */
+  --ok: #0f7a58;
+  --warn: #8a5a06;
+  --err: #b4292b;
+  --focus: var(--accent-deep);
+  --sel-bg: color-mix(in srgb, var(--accent) 45%, #fff);
+  --sel-ink: var(--ink);
+  --scroll-track: var(--bg-deep);
+  --scroll-thumb: #bbb9bb;
+}
+
+:root[data-mode="dark"] {
+  --bg: #000103;
+  --bg-card: #06090f;
+  --bg-deep: #000000;
+  --bg-frame: #05080d;
+  --ink: #f4f7fa;
+  --ink-soft: #b2bdc8;
+  --ink-faint: #838f9b;
+  --rule: #19222c;
+  --rule-soft: #0f151c;
+
+  --label-font: 'Barlow', system-ui, sans-serif;
+  --icon-moon: block;
+  --icon-sun: none;
+
+  --accent-text: var(--accent);
+  --accent-ui: var(--accent);
+  --accent-fill: var(--accent);
+  --on-accent: #02060c;
+  --accent-tint: color-mix(in srgb, var(--accent) 15%, transparent);
+  --accent-faint: color-mix(in srgb, var(--accent) 8%, transparent);
+  --halo: color-mix(in srgb, var(--accent) 26%, #fff);
+  --halo-bloom: var(--accent);
+
+  --bracket: color-mix(in srgb, var(--accent) 55%, #6a747f);
+  --bracket-page: var(--accent);
+  --edge-ui: #6d7f91;
+  --glass: rgba(14, 19, 26, .70);
+  --glass-edge: rgba(214, 228, 240, .17);
+  --glass-blur: 18px;
+  --side-bg: rgba(6, 10, 15, .68);
+  --panel-bg: var(--glass);
+  --topbar-bg: rgba(9, 13, 18, .58);
+  --hatch: rgba(158, 180, 200, .34);
+  --shadow-card: 0 22px 52px -26px rgba(0, 0, 0, .92);
+  --world-ground: #000103;
+
+  --plate: url('../../../../../.impeccable/mocks/world-assets/forest-mist.jpg');
+  --plate-tint: linear-gradient(180deg, rgba(4, 11, 20, .42), rgba(2, 6, 13, .72));
+  --plate-blur: 11px;
+
+  --skin-hi: #3b424a;
+  --skin-mid: #262c34;
+  --skin-lo: #14181d;
+  --drum-shadow: #000000;
+  --drum-shell: #131820;
+  --drum-shell-deep: #05080c;
+  --drum-shell-2: #11151b;
+  --drum-ink: #000000;
+  --drum-rim: color-mix(in srgb, var(--accent) 34%, transparent);
+
+  --ok: #4fd1a5;
+  --warn: #ffb454;
+  --err: #ff7b72;
+  --focus: color-mix(in srgb, var(--accent) 55%, #fff);
+  --sel-bg: color-mix(in srgb, var(--accent) 40%, transparent);
+  --sel-ink: #ffffff;
+  --scroll-track: rgba(255, 255, 255, .05);
+  --scroll-thumb: #35465a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mode="light"]) {
+  --bg: #000103;
+  --bg-card: #06090f;
+  --bg-deep: #000000;
+  --bg-frame: #05080d;
+  --ink: #f4f7fa;
+  --ink-soft: #b2bdc8;
+  --ink-faint: #838f9b;
+  --rule: #19222c;
+  --rule-soft: #0f151c;
+
+  --label-font: 'Barlow', system-ui, sans-serif;
+  --icon-moon: block;
+  --icon-sun: none;
+
+  --accent-text: var(--accent);
+  --accent-ui: var(--accent);
+  --accent-fill: var(--accent);
+  --on-accent: #02060c;
+  --accent-tint: color-mix(in srgb, var(--accent) 15%, transparent);
+  --accent-faint: color-mix(in srgb, var(--accent) 8%, transparent);
+  --halo: color-mix(in srgb, var(--accent) 26%, #fff);
+  --halo-bloom: var(--accent);
+
+  --bracket: color-mix(in srgb, var(--accent) 55%, #6a747f);
+  --bracket-page: var(--accent);
+  --edge-ui: #6d7f91;
+  --glass: rgba(14, 19, 26, .70);
+  --glass-edge: rgba(214, 228, 240, .17);
+  --glass-blur: 18px;
+  --side-bg: rgba(6, 10, 15, .68);
+  --panel-bg: var(--glass);
+  --topbar-bg: rgba(9, 13, 18, .58);
+  --hatch: rgba(158, 180, 200, .34);
+  --shadow-card: 0 22px 52px -26px rgba(0, 0, 0, .92);
+  --world-ground: #000103;
+
+  --plate: url('../../../../../.impeccable/mocks/world-assets/forest-mist.jpg');
+  --plate-tint: linear-gradient(180deg, rgba(4, 11, 20, .42), rgba(2, 6, 13, .72));
+  --plate-blur: 11px;
+
+  --skin-hi: #3b424a;
+  --skin-mid: #262c34;
+  --skin-lo: #14181d;
+  --drum-shadow: #000000;
+  --drum-shell: #131820;
+  --drum-shell-deep: #05080c;
+  --drum-shell-2: #11151b;
+  --drum-ink: #000000;
+  --drum-rim: color-mix(in srgb, var(--accent) 34%, transparent);
+
+  --ok: #4fd1a5;
+  --warn: #ffb454;
+  --err: #ff7b72;
+  --focus: color-mix(in srgb, var(--accent) 55%, #fff);
+  --sel-bg: color-mix(in srgb, var(--accent) 40%, transparent);
+  --sel-ink: #ffffff;
+  --scroll-track: rgba(255, 255, 255, .05);
+  --scroll-thumb: #35465a;
+  }
+}
+
+/* ---- house floor shared by all three pages ---- */
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+}
+::selection { background: var(--sel-bg); color: var(--sel-ink); }
+:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+a { color: inherit; }
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}