diff --git a/.agents/memory/structured-liquidity-motion.md b/.agents/memory/structured-liquidity-motion.md
index 844aff6..1c5c446 100644
--- a/.agents/memory/structured-liquidity-motion.md
+++ b/.agents/memory/structured-liquidity-motion.md
@@ -5,11 +5,11 @@ description: How the tactile "liquid glass" interaction motion is built on the S
 
 # Liquid motion layer
 
-Tactile interaction motion (press ripples, liquid toggles/switch sheen, flowing tab marker, settling menus/dialogs/accordion, hover refraction) lives entirely in `index.html`'s inline `<style>` (gated under `@media (prefers-reduced-motion: no-preference)`) + three `mount*()` fns in `src/main.ts` (`mountRipples`, `mountTabFlow`, `mountRefraction`, each early-returns under `prefers-reduced-motion: reduce`). The verbatim `public/*` stays untouched — see the verbatim-public rule in `structured-liquidity.md`.
+Tactile interaction motion includes press feedback, flowing navbar/tab/filter markers, scroll continuity, settling menus/dialogs/accordions, and stateful toggles. Flat information surfaces do not refract on hover. Motion styles live in the layered source stylesheets and React/behavior hooks, with complete reduced-motion fallbacks; regenerate the distributable `public/*` files and registry after changes.
 
 ## Governing principle (content decision)
 The rigid **container** never bounces/squishes/morphs (sharp corners, flat offset shadow, grid hold). Only the **liquid inside** reacts — ripple, flood, settle with viscous overshoot, catch light. One shared easing token set (`--ease-liquid`, `--ease-liquid-over`, `--motion*`) so every motion feels like the same material.
-**Why:** generic bouncy UI or Apple's blurry-blob "Liquid Glass" both break "structured containment"; the frame must stay firm or the language loses its identity.
+**Why:** generic bouncy UI or Apple's blurry-blob treatment both break Neobrutalism; the physical frame must stay firm while Liquid Motion happens inside it.
 **Adoption note:** this motion is specimen-only — it can't go in the distributable `public` CSS (verbatim rule), so do NOT document it in `registry.json`/SKILL.md.
 
 ## Trap 1 — `mix-blend-mode: plus-lighter` blows out over a vivid backdrop
diff --git a/.agents/memory/structured-liquidity.md b/.agents/memory/structured-liquidity.md
index f5d64ec..f2cfbc5 100644
--- a/.agents/memory/structured-liquidity.md
+++ b/.agents/memory/structured-liquidity.md
@@ -5,9 +5,10 @@ description: The durable decisions behind the SL specimen port — what it is, a
 
 # Structured Liquidity
 
-An open UI design language ("rigid containment + viscous glass + semantic clarity") shipped as a live specimen at `artifacts/structured-liquidity`. Token reference, file map, and pillars are documented in `replit.md` — don't duplicate them; read there.
+An open UI design language—**Neobrutalist structure. Liquid motion. Scientific modern clarity.**—shipped as a live specimen at `artifacts/structured-liquidity`. Neobrutalist structure owns the physical frame of the interface: buttons, borders, navigation, footers, body containers, panels, square geometry, tactile interaction, and flat offset shadows used selectively for interactive or deliberately layered cutout surfaces. Liquid Motion makes system behavior perceptible through shared markers and transitions between navbar actions, menu options, tabs, filters, overlays, and page areas without becoming the only carrier of meaning. Default information surfaces are flat; gradients are not shorthand for liquidity, neutral translucency is reserved for moving state boundaries, and every interaction has a complete reduced-motion state. Scientific Modern Clarity organizes information and communicates meaning through rational grids, disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: information should be legible, ordered, and unmistakable, and every screen remains complete without relying on color, glass, or motion. Together these three tenets form the Structured Liquidity trifecta, represented by the cube's three visible faces. Token reference, file map, and tenets are documented in `replit.md` — don't duplicate them; read there.
 
 ## The non-obvious trap (why the port isn't a verbatim copy)
+
 The original framework's "live tweaks" panel and its `<image-slot>` showcase element were **React/Babel components coupled to a proprietary in-editor "omelette" host bridge** (`window.parent.postMessage` + `__edit_mode_*` / `__activate_edit_mode`). That host **does not exist in a deployment**, so a verbatim copy yields an invisible tweaks panel and an empty "drop a screenshot" slot in production.
 
 **Decision:** keep the plain CSS/JS verbatim in `public/`, but rebuild the tweaker in vanilla TS (`src/main.ts`) and replace the image-slot with a static CSS visual.
@@ -19,24 +20,27 @@ The original framework's "live tweaks" panel and its `<image-slot>` showcase ele
 **Verbatim-public guard covers BINARIES too, not just `*.css`/`*.js`:** `public/opengraph.jpg` has silently drifted (tooling/editor re-encoded it). When verifying the constraint, check the WHOLE `public/` dir (`git --no-optional-locks status --porcelain public/`), and restore any unintended change — including binaries — with `git --no-optional-locks show HEAD:<path> > <path>` (checkout/restore are sandbox-blocked).
 
 ## Overriding `liquid-word.js` without editing it
-The hero "Liquidity" wordmark is driven by a richer JS renderer in `src/main.ts` (multi-wave, non-repeating, bubbles) that *takes the hero away from* the verbatim `liquid-word.js`.
 
-**The trick:** `liquid-word.js` claims `.glas[data-liquid]` from a `DOMContentLoaded` handler; a `type=module` script's top-level code runs *after parse but before* `DOMContentLoaded`. So `main.ts` removes the `data-liquid` attribute at module top-level → the original skips the hero (still renders the `.glyph` logo cube). Because the `.glas[data-liquid].is-liquid` stylesheet rule no longer matches, re-apply that look via inline styles (`color:transparent`, no text-stroke/bg/shadow) and add the `is-liquid` class.
+The hero "Liquidity" wordmark is driven by a richer JS renderer in `src/main.ts` (multi-wave, non-repeating, bubbles) that _takes the hero away from_ the verbatim `liquid-word.js`.
+
+**The trick:** `liquid-word.js` claims `.glas[data-liquid]` from a `DOMContentLoaded` handler; a `type=module` script's top-level code runs _after parse but before_ `DOMContentLoaded`. So `main.ts` removes the `data-liquid` attribute at module top-level → the original skips the hero (still renders the `.glyph` logo cube). Because the `.glas[data-liquid].is-liquid` stylesheet rule no longer matches, re-apply that look via inline styles (`color:transparent`, no text-stroke/bg/shadow) and add the `is-liquid` class.
 
 **Why:** lets us evolve one specific behavior while keeping `public/*.js` byte-for-byte verbatim and avoiding duplicate SVGs / timer races.
 
-**How to apply:** reuse the same CSS classes (`lw-glass`, `lw-wave-back/front`, `lw-shine`, `lw-outline`) so theming keeps flowing from `--accent`/`--edge`; keep the glass rect *inside* the clip group (clipped to letters, not a full rectangle); silence the CSS keyframes on JS-animated paths via inline `animation:none`; rebuild on `fonts.ready`/resize/font-tweak and cancel the rAF on `pagehide`.
+**How to apply:** reuse the same CSS classes (`lw-glass`, `lw-wave-back/front`, `lw-shine`, `lw-outline`) so theming keeps flowing from `--accent`/`--edge`; keep the glass rect _inside_ the clip group (clipped to letters, not a full rectangle); silence the CSS keyframes on JS-animated paths via inline `animation:none`; rebuild on `fonts.ready`/resize/font-tweak and cancel the rAF on `pagehide`.
 
 ## Screenshotting reveal-gated content deep in the page
+
 Deep-linking to a hash (`/#anchor`) and screenshotting lands on blank space for content far down the page: the scroll-reveal keeps `.reveal{opacity:0}` and the deep-anchor jump doesn't reliably trigger the IntersectionObserver before capture (there is a ~1800ms fallback that reveals all, but screenshots fire sooner).
 
-**The trick (temp inline `<style>` in `index.html`, removed after):** force `.reveal{opacity:1!important;transform:none!important}`, set `html{scroll-behavior:auto!important}`, then *pull the target to the top of its section* by hiding its siblings — e.g. `#components .kit-group{display:none!important}` + `#components #TARGET, #components #TARGET ~ .kit-group{display:block!important}`. So it fits one viewport at the section anchor.
+**The trick (temp inline `<style>` in `index.html`, removed after):** force `.reveal{opacity:1!important;transform:none!important}`, set `html{scroll-behavior:auto!important}`, then _pull the target to the top of its section_ by hiding its siblings — e.g. `#components .kit-group{display:none!important}` + `#components #TARGET, #components #TARGET ~ .kit-group{display:block!important}`. So it fits one viewport at the section anchor.
 
 **Why:** static screenshots can't scroll; forcing reveal alone isn't enough because the deep-anchor scroll still lands on emptiness.
 
 **Gotcha:** specificity — `#components .kit-group` (id+class) outranks a bare `#TARGET` (id only) even with `!important`, so the target itself stays hidden; qualify it as `#components #TARGET` to win. Strip all temp rules + any temp `id` afterward (grep `TEMP-VERIFY`).
 
 ## Components section is a runtime-built filtered gallery
+
 The `#components` section ships as the original per-category `.kit-group` blocks in `index.html`, but `mountGallery()` in `src/main.ts` rewrites it at runtime into one `.kit-grid.gallery` with `.kit-filters` chips (toggle `.is-hidden` per `data-cat`).
 
 **Why:** keeps the verbatim `public/*` kit untouched and degrades gracefully (grouped layout still renders if JS fails); moving existing cells via `appendChild` preserves the kit-JS listeners (kit.js attaches on `DOMContentLoaded` before main.ts's handler runs).
@@ -54,13 +58,16 @@ The `#components` section ships as the original per-category `.kit-group` blocks
 **Secondary "Kind" chips are DEPENDENT on the primary "Type" (drop off when N/A):** per a follow-up request, `syncKindChips()` (called in the Type click branch before `applyFilter()`) hides each non-"All" Kind chip whose facet has no component of the active Type (`chip.hidden = true`, which also drops it from the a11y tree; the "All" chip always stays), and resets `activeKind` to "all" if the active kind just became inapplicable — so the gallery never filters to zero. Returning Type to "All" un-hides every Kind chip; an active kind that's STILL applicable under the new Type is intentionally NOT reset.
 
 ## Reusing the verbatim `.sl-menu` for a NEW custom dropdown (autocomplete, etc.)
+
 A new dropdown (built inline in `index.html`, wired in a `mount*()` in `main.ts`) can reuse the kit's `.sl-pop-wrap`/`.sl-menu` styling, but the verbatim kit JS owns two behaviors that will fight you:
+
 - A **document-level `closeAllMenus` on ANY click** (`document.addEventListener("click", …)`); the kit's own `[data-pop]` triggers survive it via `e.stopPropagation()`. So your opener (e.g. the input's `click`) MUST also `stopPropagation`, or the menu closes on the very click that opens it.
 - The kit's command-palette filter only binds to `.sl-cmd-search` inputs, so a plain `.sl-input` won't get its filtering for free — implement filtering yourself (toggle each `.item`'s inline `display`, mirroring the kit's own `it.style.display` approach; the `.item` class beats `[hidden]`, so use inline display, not the `hidden` attr).
 
 **How to apply:** open on focus/click/input; close on `blur` with a ~120ms delay; on option `mousedown` call `e.preventDefault()` (holds input focus so blur doesn't pre-empt the pick) then set value + close. For keyboard a11y make it a real combobox: `role=combobox`/`aria-controls`/`aria-expanded` on the input, give options ids, and on Arrow/Enter/Escape move an `.active` highlight (`.item.active` already styles to the accent in the verbatim kit CSS) + `aria-activedescendant`. Mirror this for any inline-built form widget; per the adoption-files rule these NEW inline components go in `catalog.json` (for the live gallery) but NOT in `registry.json`/SKILL.md.
 
 ## Partner icon library = Lucide (vanilla, not lucide-react)
+
 Leading icons are the design-language **default** for navbars and buttons. They are real inline SVGs from the vanilla `lucide` package, hydrated from `<i data-lucide="kebab-name">` placeholders by `createIcons()` in `src/main.ts` (`mountIcons()`), called at the top of `init()`.
 
 **Why:** the SL language mirrors shadcn, whose canonical icon partner is Lucide. The site is plain HTML/CSS/JS, so the vanilla `lucide` package fits; the React-era deps (`lucide-react`, radix, react, etc.) still listed in `package.json` are leftovers from the stripped scaffold and are **unused / non-functional** here.
@@ -70,16 +77,18 @@ Leading icons are the design-language **default** for navbars and buttons. They
 **For a DYNAMIC/swappable icon built at runtime (e.g. a toggle's icon), use `createElement(IconNode)` — NOT a second `createIcons()` call.** lucide-hydrated SVGs RETAIN their `data-lucide` attribute, so calling `createIcons({icons:{Subset}})` again re-scans the whole document, finds every already-rendered svg, and floods the console with "icon name was not found in the provided icons object" for every icon not in your subset. Instead `import { createElement, Moon, Sun } from "lucide"` and do `node.replaceChildren(createElement(cond ? Moon : Sun), textNode)` — builds one svg with no document scan. Constrain its size with a CSS rule (lucide defaults to 24px), e.g. `.sl-mode-fab svg{width:14px;height:14px}`.
 
 ## Cube logo (`.glyph`) reuse gotchas
+
 The hypercube mark = base `.glyph` glass tile + SVG hypercube/liquid added by `liquid-word.js buildCube()` (sets `.is-cube`, removes the CSS `::before` liquid). To make the mark identical everywhere, style `.glyph.is-cube` globally (light `--ink` shell/edge strokes + accent innerglass) instead of scoping to `.brand` — the base tile then stays on nav/footer/CTA/hero alike.
 
-**Gotcha 1 — sizing:** `.glyph` is a `<span>` (display:inline); its `width/height:var(--s)` only take effect when it's a flex/grid *item*. It renders elsewhere only because `.brand`/CTA parents are flex. A new instance in a plain block collapses to a sliver — wrap it in a `display:flex` container.
+**Gotcha 1 — sizing:** `.glyph` is a `<span>` (display:inline); its `width/height:var(--s)` only take effect when it's a flex/grid _item_. It renders elsewhere only because `.brand`/CTA parents are flex. A new instance in a plain block collapses to a sliver — wrap it in a `display:flex` container.
 
 **Gotcha 2 — big sizes:** cube strokes use `vector-effect:non-scaling-stroke`, so a blown-up cube gets hair-thin wireframe. For a large hero cube, override `vector-effect:none` (strokes then scale with the square viewBox) and set explicit stroke-widths. Make the override win specificity with `.hero-cube.is-cube .lw-cube-*` (ties the global 3-class rule, later in source).
 
 ## Carousel (and other CSS-only kit stubs) need JS wired in main.ts
-The verbatim kit ships several components as static CSS-only stubs — e.g. the Carousel was a bare `.sl-carousel` scroll-snap strip with no buttons/dots, which reads as broken on desktop. Their *styles* live inline in `index.html` (NOT in `public/*.css`), so edit those freely; add the *behavior* (prev/next + dots, scroll-snap paging, active-state on a rAF-throttled scroll handler) in a `mount*()` in `src/main.ts` called from `init()` after `mountGallery()` (the gallery relocates cells via appendChild but keeps them intact).
 
-**Gotcha — graceful degradation when hiding a native affordance:** if your JS enhancement *removes* a built-in affordance (e.g. hiding the scrollbar because you added buttons), gate the hiding behind a class the JS adds (`.sl-carousel-wrap.is-enhanced .sl-carousel{scrollbar-width:none}`), not unconditional CSS. Otherwise a no-JS visitor loses both the controls *and* the scrollbar and can't reach later slides.
+The verbatim kit ships several components as static CSS-only stubs — e.g. the Carousel was a bare `.sl-carousel` scroll-snap strip with no buttons/dots, which reads as broken on desktop. Their _styles_ live inline in `index.html` (NOT in `public/*.css`), so edit those freely; add the _behavior_ (prev/next + dots, scroll-snap paging, active-state on a rAF-throttled scroll handler) in a `mount*()` in `src/main.ts` called from `init()` after `mountGallery()` (the gallery relocates cells via appendChild but keeps them intact).
+
+**Gotcha — graceful degradation when hiding a native affordance:** if your JS enhancement _removes_ a built-in affordance (e.g. hiding the scrollbar because you added buttons), gate the hiding behind a class the JS adds (`.sl-carousel-wrap.is-enhanced .sl-carousel{scrollbar-width:none}`), not unconditional CSS. Otherwise a no-JS visitor loses both the controls _and_ the scrollbar and can't reach later slides.
 
 **Why:** matches the project's standing rule that the page must still work if `main.ts` never runs (same reason `mountGallery` keeps the grouped fallback).
 
@@ -95,34 +104,36 @@ The verbatim kit ships several components as static CSS-only stubs — e.g. the
 
 **Styled scrollbars (gotcha):** style them in `index.html` inline `<style>`, not the verbatim public CSS. DON'T set `scrollbar-width`/`scrollbar-color` globally on `*` — modern Chrome then switches to the native thin scrollbar and IGNORES every `::-webkit-scrollbar` rule, leaving a default grey bar (this was the bug). Instead: drive Chrome+Safari purely via `::-webkit-scrollbar*` pseudo-elements, and feed Firefox the standard `scrollbar-width`/`scrollbar-color` only inside `@supports not selector(::-webkit-scrollbar){ html{...} }`. Also: `--glass-tint` is a SPACE-separated triplet (`255 255 255`), so use modern `rgb(var(--glass-tint) / 0.06)` slash syntax for scrollbar colours (legacy `rgba(...,a)` parses inconsistently in the `scrollbar-color` shorthand). Headless screenshots don't render OS scrollbars, so they can't verify this — reason about it instead.
 
-**Pillars are three orthogonal axes (content decision):** the framework is exactly THREE pillars — Structured Containment (structure), Liquid Depth (material), Semantic Clarity (function). "Tactile Glass" is NOT a fourth pillar — it's a vivid restatement of the material axis, so it folds into Liquid Depth (which already names it). Keep the hero tenet tags in lockstep with the three pillar headings (don't reintroduce a 4th). **Why:** swapping Tactile Glass in for Semantic Clarity yields two material pillars and drops the function/readability principle; also the name "Structured Liquidity" deliberately echoes through Pillar 01 *Structured* / Pillar 02 *Liquid*, so renaming those breaks the echo.
+**The ethos is a trifecta of three orthogonal design tenets (content decision), always in this order:** Neobrutalist structure (the physical frame), Liquid Motion (how the system behaves), and Scientific Modern Clarity (how information is organized and meaning is communicated). The cube's three visible faces represent the trifecta. Neobrutalist structure owns buttons, borders, navigation, footers, body containers, panels, and tactile structural layers. Liquid Motion never becomes the only carrier of meaning and has a complete reduced-motion state. Scientific Modern Clarity keeps information ordered, evidenced, complete, and legible without relying on color, glass, or motion. Scientific Modern Clarity is informed by Swiss modernism and the International Typographic Style; the tradition is a reference, while legibility, order, and unmistakable communication define the tenet. Keep the hero, manifesto, docs, guidance, CSS comments, and generated registry in lockstep. **Why:** each tenet answers a different implementation question and owns that answer without a fourth group.
 
 ## Showcase = product-card grid (mode-aware overlay gotcha)
+
 The Showcase renders `.show-grid` of `.show-card` cards (each a single `<a class="show-card glass">` = browser-bar + screenshot + always-visible foot with avatar/name/tag/badge). The description + Visit CTA live in a `.show-card-veil` overlay revealed on `:hover`/`:focus-visible`; on touch it becomes a persistent bottom gradient panel via `@media (hover:none)` (touch has no hover state before navigation). CTA is a `<span>`, never a nested `<a>`. Add a product = copy one card block + drop its screenshot in `public/`.
 
-**Gotcha — mode-aware text overlays must key off `--bg`, NOT `--glass-tint`:** `--glass-tint` is white (`255 255 255`) in BOTH dark and light modes, so a glass-tinted scrim under `var(--ink)` text washes out in dark mode (light text on near-white). Base any text-bearing overlay on the mode-aware page bg: `rgba(39,41,51,.x)` (dark `#272933`) + a `[data-mode="light"]` override `rgba(223,229,242,.x)` (light `#dfe5f2`), with `var(--ink)` text.
+**Gotcha — mode-aware text overlays must key off `--bg`, NOT `--glass-tint`:** `--glass-tint` is white (`255 255 255`) in BOTH dark and light modes, so a glass-tinted scrim under `var(--ink)` text washes out in dark mode (light text on near-white). Base any text-bearing overlay on the mode-aware page background and keep `var(--ink)` text. Dark `--bg` and `--bg-2` are low-percentage mixes of the active `--accent` over a near-black base, so changing the accent retunes the atmospheric field automatically. There is no separate black mode.
 
 **Gotcha — `.wrap` caps at `min(1200px,92vw)`:** an `auto-fit, minmax(MIN,1fr)` grid only reaches N columns if `N*MIN + (N-1)*gap ≤ 1200`. For 4-across at a 1.2rem gap, MIN must be ≤ ~270px (used 260px). Cap a lone card with `max-width` + `margin-inline:auto` so a single item doesn't stretch full-width.
 
-**Rendered component order is governed by the gallery JS, not the HTML kit-groups:** `mountGallery()` in `src/main.ts` REPLACES the `#components .kit-groups` markup (its category headers are never shown) with filter chips + one flat masonry grid (`column-count:3`), using a caption-keyed taxonomy (`CAT_OF` map → `CATS` chip list) that is built from `src/catalog.json` (the single source of truth). So any request to reorder/regroup the *visible* components is driven by `src/catalog.json` (categories order + per-component category) plus the cell sort in `src/main.ts`, not by the HTML. The HTML kit-group order only affects the no-JS fallback. **Why:** the two taxonomies legitimately differ (e.g. HTML files Badge under "Actions" but the gallery files it under "Data"), so editing only the HTML looks correct in source but does nothing to the rendered page.
+**Rendered component order is governed by the gallery JS, not the HTML kit-groups:** `mountGallery()` in `src/main.ts` REPLACES the `#components .kit-groups` markup (its category headers are never shown) with filter chips + one flat masonry grid (`column-count:3`), using a caption-keyed taxonomy (`CAT_OF` map → `CATS` chip list) that is built from `src/catalog.json` (the single source of truth). So any request to reorder/regroup the _visible_ components is driven by `src/catalog.json` (categories order + per-component category) plus the cell sort in `src/main.ts`, not by the HTML. The HTML kit-group order only affects the no-JS fallback. **Why:** the two taxonomies legitimately differ (e.g. HTML files Badge under "Actions" but the gallery files it under "Data"), so editing only the HTML looks correct in source but does nothing to the rendered page.
 
 ## Legacy `rgba(var(--triplet), a)` is INVALID here — the vars are space-separated triplets
+
 `--glass-tint` (`255 255 255`) and `--edge` (`0 0 0`) are SPACE-separated triplets. So the verbatim/legacy form `rgba(var(--glass-tint),0.06)` becomes `rgba(255 255 255, 0.06)` — space channels + comma alpha is valid in NEITHER CSS color grammar, so that whole declaration is silently dropped. It bit the kit's `.sl-skel` shimmer: its `background`/`border` evaporated (computed `background-image:none`) so skeletons rendered fully transparent ("not seeing anything for skeletons"); the sibling `background-size`/`animation`/`border-radius` declarations are separate + valid so they survived. Many other rules (inline AND verbatim public) still use this dead form — usually a ~5% white tint nobody notices, but it IS broken.
 
 **Fix pattern (override in `index.html`, never the verbatim public CSS):** use modern slash syntax `rgb(var(--glass-tint) / 0.06)` / `rgb(var(--edge) / 0.18)`, OR `color-mix(in srgb, var(--ink) 6%, transparent)`. Prefer `--ink` (mode-aware) over the always-white `--glass-tint` for content-bearing surfaces so they show in light mode too (same convention as the showcase-overlay gotcha). **To override only part of a broken verbatim rule, set `background-image` (NOT the `background` shorthand)** — the shorthand resets `background-size` to `auto` and kills the verbatim `400% 100%` that the shimmer animation pans across.
 
 ## Component-kit demos use `href="#"` placeholders — neutralize their navigation
+
 Every demo inside the `#components` kit (sidebar, navbar, nav-menu flyout, breadcrumb) uses placeholder `<a href="#">` links purely to illustrate the component. Untouched, clicking one jumps the whole page to the top — users read this as "the demo link navigates away." Fix in `src/main.ts` (`mountDemoNav()` in `init()`), NOT the verbatim public files: select `'.kit-cell a[href="#"]'`, `e.preventDefault()` on click, and where the component has an active-route concept move the highlight in place — sidebar moves `.active` among `.sb a`; navbar moves `aria-current="page"` among `.nb-links a`; flyout + breadcrumb just suppress. Scoping to `.kit-cell` keeps real nav (top nav section links, `#adopt` resource cards, showcase cards) untouched.
 
 **Testing gotcha — Playwright auto-scrolls an element into view BEFORE clicking it,** so a before/after `window.scrollY` comparison falsely reports "the page jumped" even when the handler `preventDefault`s. To test that a click does NOT scroll, fire it via `evaluate(() => link.click())` (real DOM click, no auto-scroll) and assert `scrollY` delta === 0 + `location.hash === ""`. An empty hash after clicking an `href="#"` link is itself proof `preventDefault` ran (an unhandled `#` link appends `#` and scrolls to top).
 
 **Lucide has NO brand icons (e.g. `Github`):** the vanilla `lucide` package dropped all brand glyphs, so `import { Github }` fails typecheck (`TS2305 has no exported member 'Github'`). Icons are the design-language default for nav/buttons here, so when a button needs a brand mark, fall back to a generic semantic icon (e.g. `download` for an "Install"→GitHub CTA) rather than chasing a brand icon. **How to apply:** before adding any `data-lucide="x"` + import, confirm `x` exists in `node_modules/lucide/dist/lucide.d.ts`.
 
-**Why dropdowns/overlays look like a "cream" slab in LIGHT mode:** the verbatim `.glass` panels declare their tint with the legacy `rgba(var(--glass-tint), <a>)` comma form over a space-separated channel triplet, which browsers DROP — so panels are effectively transparent backdrop-blur (they pick up the cool page bg). But overlay surfaces in the kit (`.sl-menu`, `.sl-dialog`, `.sl-sheet`, `.sl-tip`, `.sl-hover-card`) use `background: var(--bg-2)`, which is opaque `#ffffff` in light mode → a stark warm white block next to the cool frosted panels. **Fix in `index.html` (NOT public CSS):** scope `[data-mode="light"] .sl-menu{...}` and re-declare the SAME glass gradient with VALID slash syntax `rgb(var(--glass-tint) / <a>)` so the menu's already-declared `backdrop-filter` shows through. Keep dark mode's opaque `var(--bg-2)` (legible). Same recipe applies to the other overlay classes if a user flags them.
-
-**Overlay cream-slab fix — per-class blur caveat:** the light-mode frosted override must be applied PER overlay class (`.sl-menu`, `.sl-ctx-menu`, etc.) since each is a separate selector. Crucially NOT every overlay carries its own `backdrop-filter`: `.sl-menu` gets `blur(18px) saturate(180%)` from the kit, but `.sl-ctx-menu` declares NONE — so swapping its bg to a translucent gradient alone leaves it see-through (no frost). When fixing a new overlay, check whether it has a `backdrop-filter` in the public CSS; if not, add `backdrop-filter:blur(18px) saturate(180%)` (+ `-webkit-` prefix) in the same index.html override or it won't read as glass.
+**Overlay rule:** information surfaces stay flat, while menus and overlays may use a single neutral translucent fill plus `backdrop-filter` because they are moving state boundaries. Never use a multi-stop gradient to make an overlay feel liquid. Apply the fill and blur per overlay class (`.sl-menu`, `.sl-ctx-menu`, etc.) so the behavior is explicit and legible in both modes.
 
 ## Showcase entries — verify sourced favicons, and frame partial adopters honestly
+
 When pulling a real site's favicon for a showcase avatar, verify it before use: sites sometimes ship a placeholder/off-brand favicon that misrepresents the brand or breaks the palette (the no-red rule). If unusable, fall back to a neutral brand-symbol avatar (an emoji) instead.
 **Why:** an external favicon is untrusted brand input — assuming it's the logo can silently inject a wrong/forbidden color into our UI.
-Some showcase products adopt the full language; others use only the structured-containment half (rigid frame, offset shadows, one accent, mono labels — no liquid glass). Describe each honestly for what it actually uses, and keep the section lead copy consistent with that spectrum (don't let the lead claim "liquid glass" universally if a listed card has none).
+Some showcase products adopt the full language; others use only the Neobrutalism tenet (rigid frame, offset shadows, one accent, mono labels — no liquid glass). Describe each honestly for what it actually uses, and keep the section lead copy consistent with that spectrum (don't let the lead claim "liquid glass" universally if a listed card has none).
diff --git a/.agents/skills/structured-liquidity/SKILL.md b/.agents/skills/structured-liquidity/SKILL.md
index 4660470..b1b9e96 100644
--- a/.agents/skills/structured-liquidity/SKILL.md
+++ b/.agents/skills/structured-liquidity/SKILL.md
@@ -1,50 +1,80 @@
 ---
 name: structured-liquidity
-description: Apply the Structured Liquidity UI design language — rigid containers (sharp 90° corners, flat blurless offset shadows, solid load-bearing borders) holding semi-transparent liquid glass, with one accent and strict type roles. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.
+description: Apply the Structured Liquidity UI design language — Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.
 ---
 
 # Structured Liquidity
 
-An open UI design language: **rigid containment** + **liquid depth** + **semantic clarity**. The living specimen, the machine-readable token set, and the component registry are served by the `structured-liquidity` artifact. This skill is the short version an agent needs to produce on-brand output.
+**Neobrutalist structure. Liquid motion. Scientific modern clarity.**
+
+1. **Neobrutalist structure:** How the interface is physically framed—buttons, borders, navigation, footers, body containers, panels, square geometry, and selective flat shadows. It makes boundaries and actions tangible before effects are added.
+2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible without becoming the only carrier of meaning. Every interaction has a complete reduced-motion state.
+3. **Scientific Modern Clarity:** How information is organized and meaning is communicated—rational grids, disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: make information legible, ordered, and unmistakable. Every screen remains complete and useful without relying on color, glass, or motion.
+
+Together these three tenets form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Each tenet owns the clarity of its part of the interface. The living specimen, machine-readable tokens, and component registry are served by the `structured-liquidity` artifact.
 
 ## The non-negotiable rules
 
 Follow these literally — they are what keep generated output on-brand:
 
 1. **Square corners.** `border-radius: var(--radius)` (default `0`). Only raise deliberately.
-2. **Flat offset shadows.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. The blur radius is always `0`. Never use a soft/blurred shadow on a structural element.
+2. **Flat offset shadows, used selectively.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Blur is always `0`. Reserve shadows for tactile affordances and deliberately layered cutout surfaces; flat information containers can rely on borders, rules, and alignment.
 3. **Load-bearing borders.** `var(--border-w) solid rgb(var(--edge))`. The edge is black in both light and dark mode.
 4. **Exactly one accent.** `--accent` carries all emphasis. Never add a competing hue.
-5. **Glass is depth, not color.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent.
-6. **Destructive is gray, not red.** Destructive *containers* use `--neg`. Error *text* may warn in color.
+5. **Liquid is movement, not a gradient treatment.** Default information surfaces are flat. Express liquidity through moving selection markers, menu and popover settling, tab changes, scroll continuity, and transitions between areas. Use neutral translucency or `backdrop-filter` only at moving state boundaries such as navigation, menus, and overlays—not on every card.
+6. **Destructive is gray, not red.** Destructive _containers_ use `--neg`. Error _text_ may warn in color.
 7. **Fixed type roles.** display (`--display`, Inter) = headings/buttons/brand; body (`--body`, Inter) = reading copy; mono (`--mono`, Space Mono) = labels/data/captions/eyebrows.
 8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.
 9. **Motion proves mass.** On press/hover, nudge the element ~1px toward its shadow and grow the offset.
+10. **Communicate with scientific modern clarity.** Use a rational grid, exact alignment, asymmetric balance, measured line lengths, purposeful whitespace, and compact mono captions for sources, state, and evidence. Swiss modernism and the International Typographic Style are the reference tradition.
+11. **Monochrome carries information.** The accent identifies selection, progression, or one key relationship; it does not decorate the page.
 
 ## Tokens
 
-Apply these as CSS custom properties on `:root` (dark-mode defaults):
+Apply these as CSS custom properties on `:root` (light-mode defaults):
 
 ```css
-:root{
-  --accent:#a388ee; --accent-ink:#000000;
-  --bg:#272933; --bg-2:#1f2028; --ink:#e6e6e6; --ink-dim:#9da0ab;
-  --edge:0 0 0; --hard-shadow:#000000; --neg:#3c3f4b; --neg-ink:#f0f0f2;
-  --glass-blur:18px; --glass-tint:255 255 255; --glass-alpha:0.07;
-  --border-w:2px; --hard-x:7px; --hard-y:7px; --radius:0px;
-  --display:"Inter","Helvetica Neue",system-ui,sans-serif;
-  --body:"Inter","Helvetica Neue",system-ui,sans-serif;
-  --mono:"Space Mono",ui-monospace,"SFMono-Regular",monospace;
+:root {
+  --accent: #a388ee;
+  --accent-ink: #000000;
+  --bg: #f2f0ea;
+  --bg-2: #ffffff;
+  --ink: #111111;
+  --ink-dim: #5d5d59;
+  --edge: 0 0 0;
+  --hard-shadow: #000000;
+  --neg: #242424;
+  --neg-ink: #ffffff;
+  --glass-blur: 14px;
+  --glass-tint: 255 255 255;
+  --glass-alpha: 0.72;
+  --border-w: 2px;
+  --hard-x: 5px;
+  --hard-y: 5px;
+  --radius: 0px;
+  --display: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;
+  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);
+  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);
+  --measure-reading: 62ch;
+  --measure-caption: 48ch;
+  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);
+  --section-space: clamp(4rem, 9vw, 9rem);
 }
 ```
 
-Light mode: set `data-mode="light"` on `<html>` and override `--bg:#dfe5f2; --bg-2:#fff; --ink:#000; --ink-dim:#5b5f6b; --neg:#16171c; --neg-ink:#fff; --glass-alpha:0.55`.
+Dark mode has one color-responsive atmospheric palette; there is no separate black mode. Set `data-mode="dark"` on `<html>` and derive `--bg:color-mix(in srgb,var(--accent) 8%,#0d0a11)` plus `--bg-2:color-mix(in srgb,var(--accent) 14%,#100d14)`, with `--ink:#f6f2f8; --ink-dim:#b9b0bf; --neg:#343434; --neg-ink:#fff; --glass-alpha:0.08`. Changing the single accent must retune the dark page field automatically: purple becomes deep aubergine, green becomes deep green, yellow becomes deep ochre. Tactile components may remain charcoal or near-black above that field.
 
 The canonical machine-readable set is `design-tokens.json` (W3C Design Tokens format; each token's `$extensions.cssVar` gives the exact variable name).
 
 ## Type layout
 
-Three roles — header / body / detail (display / body / mono). Inter carries both sans-serif roles; use weight and scale for hierarchy. Use Space Mono only for labels, data, code, captions, and eyebrows.
+Three roles — header / body / detail (display / body / mono). Inter carries both sans-serif roles; use scale, weight, measure, and alignment for hierarchy. Use Space Mono only for labels, data, code, captions, and eyebrows. Prefer one dominant statement, a 12-column or similarly disciplined grid, short reading measures, and figure captions that identify evidence and state.
+
+## Motion contract
+
+The rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. Prefer a shared marker that visibly travels between menu options, tabs, filters, navbar actions, and page areas over per-item gradient fills or decorative sheen. Use one liquid easing family; reserve ambient motion for a single focal specimen; provide a complete static state under `prefers-reduced-motion`. If the interface communicates the same thing without the animation, the motion is optional polish, not a dependency.
 
 ## Components
 
@@ -69,24 +99,34 @@ npx shadcn@latest add https://structured.glass/r/button.json                  #
 
 Each `registry:ui` item is a plain React component (no Radix) that emits the SL classes and declares the base style as a `registryDependency`, so the CSS comes along. The registry index lives at `/registry.json`.
 
+### Portfolio-grid default
+
+Use the installable `portfolio-card` component for company, investment, and venture grids. Its information hierarchy is persistent: logo or identity mark, company name, one concise description, state or category tags, and the primary action are visible without hover. Hover and press may reinforce tactility, but must never reveal information that is otherwise unavailable, especially on touch devices.
+
+```bash
+npx shadcn@latest add https://structured.glass/r/portfolio-card.json
+```
+
+Use `PortfolioGrid` with `PortfolioCard` and its anatomy exports. Put `PortfolioCardTags` inside `PortfolioCardMedia` so state and category labels overlay the image plate instead of changing the body height. Keep card bodies aligned within the grid, use a consistent media plate for logo normalization, and use the action only when the destination is real. Unavailable or pre-launch companies render as non-link cards with their status exposed.
+
 **B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Inter and Space Mono; then use the SL classes directly. Core kit: `sl-btn`, `sl-badge`, `sl-toggle`/`sl-toggle-group`, `sl-switch`, `sl-check`, `sl-radio-item` (inside a `[data-radio-group]`), `sl-input`/`sl-label`, `sl-slider`, `sl-progress`, `sl-ava`, `sl-tabs` (`.tablist` buttons + `.panel` nodes), and overlays (`sl-overlay` + `sl-dialog`/`sl-sheet`). In plain HTML, interactive components are wired by `structured-liquidity-kit.js` via `data-toggle-aria`, `data-toggle-group`, `data-radio-group`, `data-open-overlay`, `data-close-overlay`.
 
-## Anatomy of a rigid container holding glass
+## Anatomy of a stateful glass surface inside a rigid frame
 
 ```html
 <div class="glass kit-cell">
   <span class="kit-cap">Title</span>
-  <p>Body copy inside a rigid container holding liquid glass.</p>
+  <p>Use this treatment when the surface communicates state or depth.</p>
 </div>
 ```
 
 ```css
-/* if you are not using the kit CSS, the container recipe is: */
-.container{
-  border:var(--border-w) solid rgb(var(--edge));
-  border-radius:var(--radius);
-  box-shadow:var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
-  background:rgba(var(--glass-tint),var(--glass-alpha));
-  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
+/* if you are not using the kit CSS, the stateful glass recipe is: */
+.stateful-glass {
+  border: var(--border-w) solid rgb(var(--edge));
+  border-radius: var(--radius);
+  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
+  background: rgba(var(--glass-tint), var(--glass-alpha));
+  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
 }
 ```
diff --git a/.github/managed-repository.json b/.github/managed-repository.json
new file mode 100644
index 0000000..c069799
--- /dev/null
+++ b/.github/managed-repository.json
@@ -0,0 +1,35 @@
+{
+  "version": 1,
+  "repository": "Interspace-Ventures/Structured",
+  "linear": {
+    "workspaceSlug": "interspaceventures",
+    "teamKey": "IV",
+    "projectURL": "https://linear.app/interspaceventures/project/structured-liquidity-ad5a3c32c2be",
+    "issueRequired": true
+  },
+  "designSystem": {
+    "name": "Structured Liquidity",
+    "componentSystem": "shadcn",
+    "registry": "https://structured.glass/r/structured-liquidity-agent.json",
+    "configs": [
+      "artifacts/structured-liquidity/components.json"
+    ],
+    "primitiveRoots": [
+      "artifacts/structured-liquidity/src/components/ui"
+    ],
+    "tokenSources": [
+      "artifacts/structured-liquidity/src/index.css"
+    ]
+  },
+  "delivery": {
+    "promotionOrder": [
+      "preview",
+      "staging",
+      "release-candidate",
+      "production"
+    ],
+    "releaseRecordRequired": true,
+    "securityReviewRequired": true,
+    "explicitProductionApprovalRequired": true
+  }
+}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..74a9481
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,17 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [staging, release, main]
+
+jobs:
+  validate:
+    uses: ./.github/workflows/managed-repository.yml
+    with:
+      package-manager: pnpm
+      package-manager-version: "9.15.9"
+      install-command: pnpm install --frozen-lockfile
+      typecheck-command: pnpm run typecheck
+      build-command: pnpm railway:build
+      ui-command: pnpm --filter @workspace/structured-liquidity run registry:check && pnpm --filter @workspace/structured-liquidity run adopters:check
diff --git a/.github/workflows/managed-repository.yml b/.github/workflows/managed-repository.yml
new file mode 100644
index 0000000..404d4e6
--- /dev/null
+++ b/.github/workflows/managed-repository.yml
@@ -0,0 +1,141 @@
+name: Managed repository validation
+
+on:
+  workflow_call:
+    inputs:
+      node-version:
+        type: string
+        default: "24"
+      package-manager:
+        type: string
+        required: true
+      package-manager-version:
+        type: string
+        default: ""
+      install-command:
+        type: string
+        required: true
+      typecheck-command:
+        type: string
+        default: ""
+      test-command:
+        type: string
+        default: ""
+      build-command:
+        type: string
+        default: ""
+      ui-command:
+        type: string
+        default: ""
+
+permissions:
+  contents: read
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Validate managed-repository contract
+        env:
+          EXPECTED_REPOSITORY: ${{ github.repository }}
+          EVENT_NAME: ${{ github.event_name }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          PR_BODY: ${{ github.event.pull_request.body }}
+          PR_HEAD: ${{ github.head_ref }}
+        run: |
+          node --input-type=module <<'EOF'
+          import assert from "node:assert/strict";
+          import { existsSync, readFileSync, readdirSync } from "node:fs";
+
+          const contractPath = ".github/managed-repository.json";
+          assert(existsSync(contractPath), `Missing ${contractPath}`);
+          const contract = JSON.parse(readFileSync(contractPath, "utf8"));
+
+          assert.equal(contract.version, 1, "Unsupported managed-repository contract version");
+          assert.equal(contract.repository, process.env.EXPECTED_REPOSITORY, "Repository identity does not match GitHub");
+          assert.equal(contract.linear?.workspaceSlug, "interspaceventures", "Linear workspace must be interspaceventures");
+          assert.equal(contract.linear?.teamKey, "IV", "Linear team key must be IV");
+          assert.equal(contract.linear?.issueRequired, true, "Linear issue evidence must be required");
+          assert.match(
+            contract.linear?.projectURL ?? "",
+            /^https:\/\/linear\.app\/interspaceventures\/project\/[a-z0-9-]+$/,
+            "Linear project URL must be a verified project URL",
+          );
+
+          assert.equal(contract.designSystem?.name, "Structured Liquidity", "Structured Liquidity must be the design foundation");
+          assert.equal(contract.designSystem?.componentSystem, "shadcn", "shadcn must be the component system");
+          assert.equal(
+            contract.designSystem?.registry,
+            "https://structured.glass/r/structured-liquidity-agent.json",
+            "Use the canonical Structured Liquidity agent registry",
+          );
+
+          for (const configPath of contract.designSystem?.configs ?? []) {
+            assert(existsSync(configPath), `Missing shadcn config: ${configPath}`);
+            const config = JSON.parse(readFileSync(configPath, "utf8"));
+            assert.equal(config.$schema, "https://ui.shadcn.com/schema.json", `${configPath} is not a shadcn config`);
+            assert.equal(typeof config.style, "string", `${configPath} must declare a shadcn style`);
+          }
+          assert((contract.designSystem?.configs ?? []).length > 0, "At least one shadcn config is required");
+
+          for (const primitiveRoot of contract.designSystem?.primitiveRoots ?? []) {
+            assert(existsSync(primitiveRoot), `Missing shadcn primitive root: ${primitiveRoot}`);
+            assert(
+              readdirSync(primitiveRoot).some((name) => name.endsWith(".tsx")),
+              `No TypeScript shadcn primitives found in ${primitiveRoot}`,
+            );
+          }
+          assert((contract.designSystem?.primitiveRoots ?? []).length > 0, "At least one shadcn primitive root is required");
+          for (const tokenSource of contract.designSystem?.tokenSources ?? []) {
+            assert(existsSync(tokenSource), `Missing design token source: ${tokenSource}`);
+          }
+          assert((contract.designSystem?.tokenSources ?? []).length > 0, "At least one token source is required");
+
+          assert.deepEqual(
+            contract.delivery?.promotionOrder,
+            ["preview", "staging", "release-candidate", "production"],
+            "Promotion order must remain Preview -> Staging -> Release Candidate -> Production",
+          );
+          assert.equal(contract.delivery?.releaseRecordRequired, true, "Release records must be required");
+          assert.equal(contract.delivery?.securityReviewRequired, true, "Security review evidence must be required");
+          assert.equal(contract.delivery?.explicitProductionApprovalRequired, true, "Production approval must be explicit");
+
+          if (process.env.EVENT_NAME === "pull_request") {
+            const pullRequestEvidence = [process.env.PR_TITLE, process.env.PR_BODY, process.env.PR_HEAD].join("\n");
+            assert.match(pullRequestEvidence, /\bIV-[1-9][0-9]*\b/, "Pull request title, body, or branch must link an IV issue");
+          }
+
+          console.log(`Managed repository contract valid for ${contract.repository}`);
+          EOF
+
+      - uses: pnpm/action-setup@v4
+        if: inputs.package-manager == 'pnpm'
+        with:
+          version: ${{ inputs.package-manager-version }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ inputs.node-version }}
+          cache: ${{ inputs.package-manager }}
+
+      - name: Install dependencies
+        run: ${{ inputs.install-command }}
+
+      - name: Typecheck
+        if: inputs.typecheck-command != ''
+        run: ${{ inputs.typecheck-command }}
+
+      - name: Test
+        if: inputs.test-command != ''
+        run: ${{ inputs.test-command }}
+
+      - name: Build
+        if: inputs.build-command != ''
+        run: ${{ inputs.build-command }}
+
+      - name: Validate shadcn and Structured Liquidity
+        if: inputs.ui-command != ''
+        run: ${{ inputs.ui-command }}
diff --git a/artifacts/structured-liquidity/index.html b/artifacts/structured-liquidity/index.html
index aabef87..c7bbe0b 100644
--- a/artifacts/structured-liquidity/index.html
+++ b/artifacts/structured-liquidity/index.html
@@ -1,20 +1,35 @@
-<!DOCTYPE html>
-<html lang="en" data-mode="dark" class="sl-js">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Structured Liquidity: a design language</title>
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%2316121f'/%3E%3Cpath d='M50 18 L77.71 34 L77.71 66 L50 82 L22.29 66 L22.29 34 Z' fill='none' stroke='%23a388ee' stroke-width='5'/%3E%3Cpath d='M50 36.56 L61.64 43.28 L61.64 56.72 L50 63.44 L38.36 56.72 L38.36 43.28 Z' fill='none' stroke='%23a388ee' stroke-width='4'/%3E%3Cpath d='M50 18 L50 36.56 M77.71 34 L61.64 43.28 M77.71 66 L61.64 56.72 M50 82 L50 63.44 M22.29 66 L38.36 56.72 M22.29 34 L38.36 43.28 M50 50 L50 82 M50 50 L22.29 34 M50 50 L77.71 34 M50 50 L50 63.44 M50 50 L38.36 43.28 M50 50 L61.64 43.28' fill='none' stroke='%23a388ee' stroke-width='3'/%3E%3C/svg%3E" />
-<meta name="description" content="Structured Liquidity is an open UI design language: rigid containers with sharp edges and flat offset shadows holding liquid, light-reflecting glass. A complete component kit you can retheme live and adopt with AI tools." />
-<meta property="og:title" content="Structured Liquidity: a design language" />
-<meta property="og:description" content="Structured containment, liquid depth, semantic clarity. A complete, open UI language you can retheme in real time and adopt with AI." />
-<meta property="og:type" content="website" />
-<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=Inter:wght@400..800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
-</head>
-<body>
-<div id="root"></div>
-<script type="module" src="/src/main.tsx"></script>
-</body>
+<!doctype html>
+<html lang="en" data-mode="light" class="sl-js">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Structured Liquidity: a design language</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%2316121f'/%3E%3Cpath d='M50 18 L77.71 34 L77.71 66 L50 82 L22.29 66 L22.29 34 Z' fill='none' stroke='%23a388ee' stroke-width='5'/%3E%3Cpath d='M50 36.56 L61.64 43.28 L61.64 56.72 L50 63.44 L38.36 56.72 L38.36 43.28 Z' fill='none' stroke='%23a388ee' stroke-width='4'/%3E%3Cpath d='M50 18 L50 36.56 M77.71 34 L61.64 43.28 M77.71 66 L61.64 56.72 M50 82 L50 63.44 M22.29 66 L38.36 56.72 M22.29 34 L38.36 43.28 M50 50 L50 82 M50 50 L22.29 34 M50 50 L77.71 34 M50 50 L50 63.44 M50 50 L38.36 43.28 M50 50 L61.64 43.28' fill='none' stroke='%23a388ee' stroke-width='3'/%3E%3C/svg%3E"
+    />
+    <meta
+      name="description"
+      content="Structured Liquidity is an open UI design language: neobrutalist structure, liquid state motion, and scientific clarity in a curated, installable component system."
+    />
+    <meta
+      property="og:title"
+      content="Structured Liquidity: a design language"
+    />
+    <meta
+      property="og:description"
+      content="Neobrutalist structure. Liquid motion. Scientific clarity. The three-part Structured Liquidity design language."
+    />
+    <meta property="og:type" content="website" />
+    <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=Inter:wght@400..900&family=Space+Mono:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/artifacts/structured-liquidity/public/construct-page.png b/artifacts/structured-liquidity/public/construct-page.png
new file mode 100644
index 0000000..9090285
Binary files /dev/null and b/artifacts/structured-liquidity/public/construct-page.png differ
diff --git a/artifacts/structured-liquidity/public/cosmograph-space.png b/artifacts/structured-liquidity/public/cosmograph-space.png
index cf6ecf0..6a3ea34 100644
Binary files a/artifacts/structured-liquidity/public/cosmograph-space.png and b/artifacts/structured-liquidity/public/cosmograph-space.png differ
diff --git a/artifacts/structured-liquidity/public/design-tokens.json b/artifacts/structured-liquidity/public/design-tokens.json
index a7b40f1..8d90eea 100644
--- a/artifacts/structured-liquidity/public/design-tokens.json
+++ b/artifacts/structured-liquidity/public/design-tokens.json
@@ -1,5 +1,5 @@
 {
-  "$description": "Structured Liquidity design tokens. W3C Design Tokens Community Group format. Each token carries its CSS custom-property name in $extensions.cssVar so an agent can apply it directly to :root.",
+  "$description": "Structured Liquidity design tokens for Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity: the three-part trifecta represented by the cube's visible faces. W3C Design Tokens Community Group format. Each token carries its CSS custom-property name in $extensions.cssVar so an agent can apply it directly to :root.",
   "color": {
     "$type": "color",
     "accent": {
@@ -13,23 +13,23 @@
       "$extensions": { "cssVar": "--accent-ink" }
     },
     "bg": {
-      "$value": "#272933",
-      "$description": "Page background (dark mode).",
+      "$value": "#f2f0ea",
+      "$description": "Light-first paper page background.",
       "$extensions": { "cssVar": "--bg" }
     },
     "bg2": {
-      "$value": "#1f2028",
-      "$description": "Raised surface / menu background (dark mode).",
+      "$value": "#ffffff",
+      "$description": "Flat paper surface and menu background.",
       "$extensions": { "cssVar": "--bg-2" }
     },
     "ink": {
-      "$value": "#e6e6e6",
-      "$description": "Primary foreground text (dark mode).",
+      "$value": "#111111",
+      "$description": "Primary foreground text.",
       "$extensions": { "cssVar": "--ink" }
     },
     "inkDim": {
-      "$value": "#9da0ab",
-      "$description": "Secondary / muted text (dark mode).",
+      "$value": "#5d5d59",
+      "$description": "Secondary / muted text.",
       "$extensions": { "cssVar": "--ink-dim" }
     },
     "edge": {
@@ -43,12 +43,12 @@
       "$extensions": { "cssVar": "--hard-shadow" }
     },
     "negative": {
-      "$value": "#3c3f4b",
+      "$value": "#242424",
       "$description": "Destructive / negative surface. Neutral gray, never red.",
       "$extensions": { "cssVar": "--neg" }
     },
     "negativeInk": {
-      "$value": "#f0f0f2",
+      "$value": "#ffffff",
       "$description": "Text on the negative surface.",
       "$extensions": { "cssVar": "--neg-ink" }
     }
@@ -56,20 +56,20 @@
   "glass": {
     "blur": {
       "$type": "dimension",
-      "$value": "18px",
-      "$description": "backdrop-filter blur radius for liquid glass surfaces.",
+      "$value": "14px",
+      "$description": "Backdrop blur for moving state boundaries such as navigation, menus, and overlays; not for default information surfaces.",
       "$extensions": { "cssVar": "--glass-blur" }
     },
     "tint": {
       "$type": "color",
       "$value": "#ffffff",
-      "$description": "Glass fill tint. The CSS token --glass-tint holds rgb channels ('255 255 255') for rgba(var(--glass-tint), var(--glass-alpha)).",
+      "$description": "Neutral translucent fill for moving state boundaries. The CSS token --glass-tint holds rgb channels ('255 255 255') for rgb(var(--glass-tint) / var(--glass-alpha)).",
       "$extensions": { "cssVar": "--glass-tint", "cssValue": "255 255 255" }
     },
     "alpha": {
       "$type": "number",
-      "$value": 0.07,
-      "$description": "Glass fill opacity (dark mode). Light mode raises this to 0.55.",
+      "$value": 0.72,
+      "$description": "Translucent boundary opacity for the light-first default. Dark mode lowers this to 0.08.",
       "$extensions": { "cssVar": "--glass-alpha" }
     }
   },
@@ -93,48 +93,139 @@
     "flat": {
       "$type": "shadow",
       "$value": {
-        "offsetX": "7px",
-        "offsetY": "7px",
+        "offsetX": "5px",
+        "offsetY": "5px",
         "blur": "0px",
         "spread": "0px",
         "color": "#000000"
       },
-      "$description": "The flat offset shadow. Blur is always 0, structural, never soft. Offset is driven by --hard-x / --hard-y.",
-      "$extensions": { "cssVar": "--hard-x / --hard-y", "css": "var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)" }
+      "$description": "The selective flat offset shadow for tactile affordances and deliberate cutout layers. Blur is always 0. Offset is driven by --hard-x / --hard-y.",
+      "$extensions": {
+        "cssVar": "--hard-x / --hard-y",
+        "css": "var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)"
+      }
     }
   },
   "fontFamily": {
     "$type": "fontFamily",
     "display": {
-      "$value": ["Inter", "Helvetica Neue", "system-ui", "sans-serif"],
-      "$description": "Headings, buttons, and brand. Use weight and scale to create hierarchy.",
+      "$value": [
+        "Inter",
+        "Helvetica Neue",
+        "Arial",
+        "system-ui",
+        "sans-serif"
+      ],
+      "$description": "Headings, buttons, and brand. Use weight, scale, and alignment to create hierarchy.",
       "$extensions": { "cssVar": "--display" }
     },
     "body": {
-      "$value": ["Inter", "Helvetica Neue", "system-ui", "sans-serif"],
+      "$value": [
+        "Inter",
+        "Helvetica Neue",
+        "Arial",
+        "system-ui",
+        "sans-serif"
+      ],
       "$description": "Paragraph and reading copy. Neutral and legible.",
       "$extensions": { "cssVar": "--body" }
     },
     "mono": {
-      "$value": ["Space Mono", "ui-monospace", "SFMono-Regular", "monospace"],
+      "$value": [
+        "Space Mono",
+        "SFMono-Regular",
+        "ui-monospace",
+        "monospace"
+      ],
       "$description": "Labels, captions, data, eyebrows. Never long paragraphs.",
       "$extensions": { "cssVar": "--mono" }
     }
   },
+  "scientificClarity": {
+    "displayXL": {
+      "$type": "dimension",
+      "$value": "clamp(4.2rem, 10.5vw, 9.5rem)",
+      "$description": "Oversized display scale for a single dominant typographic statement.",
+      "$extensions": { "cssVar": "--text-display-xl" }
+    },
+    "displayLG": {
+      "$type": "dimension",
+      "$value": "clamp(2.6rem, 5.5vw, 5.25rem)",
+      "$description": "Large display scale for section-opening statements.",
+      "$extensions": { "cssVar": "--text-display-lg" }
+    },
+    "readingMeasure": {
+      "$type": "dimension",
+      "$value": "62ch",
+      "$description": "Maximum comfortable measure for explanatory prose.",
+      "$extensions": { "cssVar": "--measure-reading" }
+    },
+    "captionMeasure": {
+      "$type": "dimension",
+      "$value": "48ch",
+      "$description": "Compact measure for figure captions and evidence notes.",
+      "$extensions": { "cssVar": "--measure-caption" }
+    },
+    "sectionSpace": {
+      "$type": "dimension",
+      "$value": "clamp(4rem, 9vw, 9rem)",
+      "$description": "Measured section rhythm that separates major arguments.",
+      "$extensions": { "cssVar": "--section-space" }
+    },
+    "gridGutter": {
+      "$type": "dimension",
+      "$value": "clamp(1rem, 2.5vw, 2.5rem)",
+      "$description": "Responsive gutter for refined information grids.",
+      "$extensions": { "cssVar": "--grid-gutter" }
+    }
+  },
+  "motion": {
+    "fast": {
+      "$type": "duration",
+      "$value": "160ms",
+      "$description": "Immediate state feedback; never decorative ambient motion.",
+      "$extensions": { "cssVar": "--motion-fast" }
+    },
+    "state": {
+      "$type": "duration",
+      "$value": "340ms",
+      "$description": "Default viscous state transition inside a rigid frame.",
+      "$extensions": { "cssVar": "--motion" }
+    },
+    "slow": {
+      "$type": "duration",
+      "$value": "500ms",
+      "$description": "Larger spatial change with an accessibility-safe static equivalent.",
+      "$extensions": { "cssVar": "--motion-slow" }
+    }
+  },
   "mode": {
-    "light": {
-      "$description": "Overrides applied when <html data-mode=\"light\">. Apply these values on top of the defaults above.",
+    "dark": {
+      "$description": "Color-responsive dark-mode overrides applied when <html data-mode=\"dark\">. The page field is derived from the active accent; there is no separate black mode.",
       "color": {
         "$type": "color",
-        "bg": { "$value": "#dfe5f2", "$extensions": { "cssVar": "--bg" } },
-        "bg2": { "$value": "#ffffff", "$extensions": { "cssVar": "--bg-2" } },
-        "ink": { "$value": "#000000", "$extensions": { "cssVar": "--ink" } },
-        "inkDim": { "$value": "#5b5f6b", "$extensions": { "cssVar": "--ink-dim" } },
-        "negative": { "$value": "#16171c", "$extensions": { "cssVar": "--neg" } },
-        "negativeInk": { "$value": "#ffffff", "$extensions": { "cssVar": "--neg-ink" } }
+        "bg": { "$value": "color-mix(in srgb, var(--accent) 18%, #100b16)", "$extensions": { "cssVar": "--bg" } },
+        "bg2": { "$value": "color-mix(in srgb, var(--accent) 27%, #15101c)", "$extensions": { "cssVar": "--bg-2" } },
+        "ink": { "$value": "#f6f2f8", "$extensions": { "cssVar": "--ink" } },
+        "inkDim": {
+          "$value": "#b9b0bf",
+          "$extensions": { "cssVar": "--ink-dim" }
+        },
+        "negative": {
+          "$value": "#343434",
+          "$extensions": { "cssVar": "--neg" }
+        },
+        "negativeInk": {
+          "$value": "#ffffff",
+          "$extensions": { "cssVar": "--neg-ink" }
+        }
       },
       "glass": {
-        "alpha": { "$type": "number", "$value": 0.55, "$extensions": { "cssVar": "--glass-alpha" } }
+        "alpha": {
+          "$type": "number",
+          "$value": 0.08,
+          "$extensions": { "cssVar": "--glass-alpha" }
+        }
       }
     }
   }
diff --git a/artifacts/structured-liquidity/public/liquid-word.js b/artifacts/structured-liquidity/public/liquid-word.js
index 0e20de6..12c8b70 100644
--- a/artifacts/structured-liquidity/public/liquid-word.js
+++ b/artifacts/structured-liquidity/public/liquid-word.js
@@ -30,10 +30,11 @@
     var wl = w / periods;
     var step = Math.max(2, w / 60);
 
-    function wavePath(cls, lvl, a, fillDown) {
+    function wavePath(cls, lvl, a, fillDown, phase) {
+      phase = phase || 0;
       var d = "M 0 " + lvl.toFixed(2);
       for (var x = 0; x <= 2 * w; x += step) {
-        var y = lvl + a * Math.sin((2 * Math.PI * x) / wl);
+        var y = lvl + a * Math.sin((2 * Math.PI * x) / wl + phase);
         d += " L " + x.toFixed(2) + " " + y.toFixed(2);
       }
       if (fillDown) d += " L " + (2 * w).toFixed(2) + " " + bottom.toFixed(2) + " L 0 " + bottom.toFixed(2) + " Z";
@@ -52,11 +53,15 @@
       // drift sideways to read as moving liquid.
       bob.appendChild(el("rect", { class: "lw-wave-front", x: -w, y: -h, width: 3 * w, height: bottom + 2 * h }));
       bob.appendChild(wavePath("lw-ripple lw-ripple-a", h * 0.3, amp * 0.7, false));
-      bob.appendChild(wavePath("lw-ripple lw-ripple-b", h * 0.58, amp * 0.55, false));
+      bob.appendChild(wavePath("lw-ripple lw-ripple-b", h * 0.58, amp * 0.55, false, Math.PI * 0.7));
+      bob.appendChild(wavePath("lw-caustic lw-caustic-a", h * 0.43, amp * 0.42, false, Math.PI * 1.2));
+      bob.appendChild(wavePath("lw-caustic lw-caustic-b", h * 0.72, amp * 0.34, false, Math.PI * 0.35));
       bob.appendChild(wavePath("lw-shine", h * 0.16, amp * 0.6, false));
     } else {
-      bob.appendChild(wavePath("lw-wave-back", level + amp * 0.55, amp * 0.8, true));
+      bob.appendChild(wavePath("lw-wave-back", level + amp * 0.55, amp * 0.8, true, Math.PI * 0.45));
       bob.appendChild(wavePath("lw-wave-front", level, amp, true));
+      bob.appendChild(wavePath("lw-meniscus", level + amp * 0.18, amp * 0.72, false, Math.PI * 0.9));
+      bob.appendChild(wavePath("lw-caustic lw-caustic-a", level + h * 0.2, amp * 0.5, false, Math.PI * 1.25));
       bob.appendChild(wavePath("lw-shine", level, amp, false));
     }
     slosh.appendChild(bob);
@@ -174,7 +179,7 @@
     sloshV *= 0.86;           // damping
     slosh += sloshV;
     if (slosh > 14) slosh = 14; else if (slosh < -14) slosh = -14;
-    var tr = "skewY(" + (slosh * 0.45).toFixed(2) + "deg) translateY(" + (slosh * 0.3).toFixed(2) + "px)";
+    var tr = "skewY(" + (slosh * 0.42).toFixed(2) + "deg) rotate(" + (slosh * 0.08).toFixed(2) + "deg) translateY(" + (slosh * 0.34).toFixed(2) + "px)";
     var nodes = document.querySelectorAll(".lw-slosh");
     for (var i = 0; i < nodes.length; i++) nodes[i].style.transform = tr;
     requestAnimationFrame(tick);
diff --git a/artifacts/structured-liquidity/public/llms.txt b/artifacts/structured-liquidity/public/llms.txt
index 75afdb8..700c5da 100644
--- a/artifacts/structured-liquidity/public/llms.txt
+++ b/artifacts/structured-liquidity/public/llms.txt
@@ -1,6 +1,6 @@
 # Structured Liquidity
 
-> An open UI design language that pairs **rigid containment** (sharp 90° corners, flat blurless offset shadows, a strict grid) with **liquid depth** (semi-transparent, light-reflecting glass) and **semantic clarity** (one accent, intentional type). This file makes the language machine-readable so an AI agent can adopt it faithfully. Theme it live on the page; every visual is driven by CSS custom properties.
+> **Neobrutalist structure. Liquid motion. Scientific modern clarity.** These three tenets form the Structured Liquidity trifecta, represented by the cube's three visible faces. Each tenet owns a distinct part of the interface. This file makes the language machine-readable so an AI agent can adopt it faithfully.
 
 ## Install before editing UI
 
@@ -10,24 +10,28 @@ Run this as the first implementation step, before recreating tokens or writing c
 
 This installs the theme and `.agents/skills/structured-liquidity/SKILL.md`. Verify both landed, read the installed skill, and only then start UI work. For theme files without the agent skill, install `https://structured.glass/r/structured-liquidity.json`.
 
-## The three pillars
+## The three tenets
 
-1. **Structured Containment**: Sharp 90° corners, flat unblurred shadows, a strict grid. Boundaries are never ambiguous. Shadows are an offset solid fact (never a soft blur). Borders carry weight (2–3px) and define the object.
-2. **Liquid Depth**: Inside the rigid boxes sits an organic translucent glass: light-reflecting, tactile, alive. Depth comes from stacking translucent surfaces, each with a real border and flat shadow. Motion proves mass: a pressed surface settles into its own shadow.
-3. **Semantic Clarity**: Liquidity delights but never at the expense of reading. Function leads. A single accent carries emphasis; glass stays neutral so it lands. Heavy display type for impact, monospace for labels and data, a humanist sans for body.
+1. **Neobrutalist structure · Physical frame**: Buttons, borders, navigation, footers, body containers, and panels form the physical interface through square geometry and selective flat shadows. These structural layers make boundaries and actions tangible before effects are added.
+2. **Liquid Motion · Behavior**: Continuity, layered neutral glass, and purposeful motion make state and believable mass perceptible without becoming the only carrier of meaning. Every interaction has a complete reduced-motion state.
+3. **Scientific Modern Clarity · Information**: Rational grids, disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace organize information and make meaning legible, ordered, and unmistakable. Swiss modernism and the International Typographic Style are the informing tradition. Every screen remains complete and useful without relying on color, glass, or motion.
 
 ## Hard rules (follow these literally to stay on-brand)
 
 - Corners are square. `border-radius` is `0` by default; only raise it deliberately via the `--radius` token.
-- Shadows are **flat and offset**: `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Never use a blur radius on a structural shadow.
+- Shadows are **flat and offset**: `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Never use a blur radius. Reserve them for tactile affordances and deliberately layered cutout surfaces; flat information containers do not need a shadow.
 - Borders are solid and load-bearing: `var(--border-w) solid rgb(var(--edge))`. The edge (`--edge`) is black in both light and dark mode.
 - **Exactly one accent.** `--accent` carries all emphasis. Do not introduce a second hue to compete with it.
-- Glass surfaces use `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Glass stays neutral/translucent: it is depth, not color.
+- Default information surfaces are flat. Do not interpret Liquid Motion as permission to add decorative gradients or sheen.
+- Express Liquid Motion through shared markers moving between navbar actions, menu options, tabs, filters, overlays, and page areas. Use neutral translucency or `backdrop-filter` only at moving state boundaries.
 - Destructive surfaces use a neutral gray (`--neg`), never red. Error *text* may use a warning color, but destructive *containers* stay neutral.
 - Type roles are fixed: **display** = headings/buttons/brand (`--display`), **mono** = labels, captions, data, eyebrows (`--mono`), **body** = paragraph/reading copy (`--body`).
 - Leading icons are the default for nav links and buttons (Lucide). Put the icon first, then the label.
 - Press/hover feedback nudges the element toward its shadow (translate by ~1px and grow the offset). Motion proves mass.
-- Navigation and footer chrome use `--shell-w` and are slightly wider than page content, which uses `--content-w`. The two widths must not be inverted.
+- Communicate with scientific modern clarity: one dominant statement, a rational grid, exact alignment, restrained reading measures, purposeful whitespace, and compact mono evidence labels.
+- Use monochrome to explain. The single accent identifies selection, progression, or one key relationship.
+- The rigid frame never wobbles or morphs. Motion belongs inside it, explains state or continuity, and has a complete reduced-motion equivalent.
+- Navigation, body surface, and footer chrome use the same `--shell-w`. The body is an independent near-background surface; narrower reading measures belong inside it.
 - Public websites using Structured Liquidity must include a visible footer attribution linking to `https://structured.glass`. Immersive apps may put it in a persistent information panel.
 
 ## Tokens (source of truth)
@@ -39,25 +43,27 @@ All visuals read from CSS custom properties on `:root`. The machine-readable tok
 Core defaults:
 
 - `--accent` `#a388ee`, `--accent-ink` `#000000` (auto black/white by luminance)
-- `--bg` `#272933`, `--bg-2` `#1f2028`, `--ink` `#e6e6e6`, `--ink-dim` `#9da0ab`
-- `--edge` `0 0 0` (rgb channels), `--hard-shadow` `#000000`, `--neg` `#3c3f4b`
-- `--glass-blur` `18px`, `--glass-tint` `255 255 255`, `--glass-alpha` `0.07`
-- `--border-w` `2px`, `--hard-x` / `--hard-y` `7px`, `--radius` `0px`
+- `--bg` `#f2f0ea`, `--bg-2` `#ffffff`, `--ink` `#111111`, `--ink-dim` `#5d5d59`
+- `--edge` `0 0 0` (rgb channels), `--hard-shadow` `#000000`, `--neg` `#242424`
+- `--glass-blur` `14px`, `--glass-tint` `255 255 255`, `--glass-alpha` `0.72`
+- `--border-w` `2px`, `--hard-x` / `--hard-y` `5px`, `--radius` `0px`
 - `--display` Inter, `--body` Inter, `--mono` Space Mono
-- `--content-w` `1200px`, `--shell-w` `1280px`, `--viewport-gutter` `4vw`
-- Light mode: set `data-mode="light"` on `<html>` (flips `--bg`, `--ink`, `--ink-dim`, `--glass-alpha`, etc.)
+- `--text-display-xl` `clamp(4.5rem, 10vw, 9rem)`, `--text-display-lg` `clamp(2.8rem, 6vw, 5.5rem)`
+- `--measure-reading` `68ch`, `--measure-caption` `48ch`, `--section-space` `clamp(4rem, 9vw, 9rem)`
+- `--content-w` aliases `--shell-w`, `--shell-w` `1280px`, `--viewport-gutter` `4vw`, `--body-surface` near-background opaque surface
+- Light mode is the default. Dark mode is one color-responsive atmospheric palette; there is no separate black mode. Set `data-mode="dark"` on `<html>` and derive `--bg:color-mix(in srgb,var(--accent) 8%,#0d0a11)` plus `--bg-2:color-mix(in srgb,var(--accent) 14%,#100d14)`, with `--ink:#f6f2f8` and `--ink-dim:#b9b0bf`. Changing the accent must retune the page field automatically while tactile cards remain charcoal or near-black.
 
 ## Recommended font pairings
 
 The language fixes three roles: a **display** face (headlines, buttons, brand), a **body** face (reading copy), and a **mono** face (labels, data, captions). Keep the display heavy and tight; keep the body humanist and legible; keep mono for anything tabular or label-like.
 
-- **Canonical · Inter (header) · Inter (body) · Space Mono (detail)**: use weight and scale within Inter for hierarchy; reserve Space Mono for labels, data, code, and metadata.
+- **Canonical · Inter (header) · Inter (body) · Space Mono (detail)**: use weight, scale, measure, and exact alignment within Inter for hierarchy; reserve Space Mono for labels, data, code, and metadata.
 
-Rules of thumb: never pair two display faces; never set body copy in the display face (it gets tiring); use mono only for labels, code, numbers, and metadata, never for long paragraphs.
+Rules of thumb: keep Inter across headings and reading copy; use mono only for labels, code, numbers, and metadata, never for long paragraphs.
 
 ## Components and templates
 
-A complete kit of 70+ components and four production-tested site templates, each a rigid container holding liquid glass. Installable React sources are in the machine-readable registry:
+A complete kit of 70+ components and four production-tested site templates. Each component assigns structure, glass, and typography deliberately instead of applying every treatment everywhere. Installable React sources are in the machine-readable registry:
 
 - [registry.json](registry.json): component name, description, variants/sizes, and ready-to-paste HTML for buttons, badges, toggles, switches, checkboxes, radios, inputs, sliders, progress, avatars, tabs, cards (glass), and dialog/sheet overlays.
 
diff --git a/artifacts/structured-liquidity/public/observatory-bio.png b/artifacts/structured-liquidity/public/observatory-bio.png
new file mode 100644
index 0000000..391fc65
Binary files /dev/null and b/artifacts/structured-liquidity/public/observatory-bio.png differ
diff --git a/artifacts/structured-liquidity/public/r/breadcrumb.json b/artifacts/structured-liquidity/public/r/breadcrumb.json
index 129c33a..d3859f6 100644
--- a/artifacts/structured-liquidity/public/r/breadcrumb.json
+++ b/artifacts/structured-liquidity/public/r/breadcrumb.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Structured Liquidity breadcrumb — mono trail with accent current page. */\nexport const Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <nav\n    ref={ref}\n    aria-label=\"Breadcrumb\"\n    className={cn(\"sl-crumb\", className)}\n    {...props}\n  />\n));\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport const BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, href = \"#\", ...props }, ref) => (\n  <a ref={ref} href={href} className={className} {...props} />\n));\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nexport function BreadcrumbSeparator({\n  className,\n  children = \"/\",\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span aria-hidden=\"true\" className={cn(\"sl-sl\", className)} {...props}>\n      {children}\n    </span>\n  );\n}\n\nexport function BreadcrumbPage({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span aria-current=\"page\" className={cn(\"sl-cur\", className)} {...props} />\n  );\n}\n",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Structured Liquidity breadcrumb — mono trail with accent current page. */\nexport const Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <nav\n    ref={ref}\n    aria-label=\"Breadcrumb\"\n    className={cn(\"sl-crumb\", className)}\n    {...props}\n  />\n));\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport const BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, href = \"#\", onClick, ...props }, ref) => (\n  <a\n    ref={ref}\n    href={href}\n    className={className}\n    onClick={(event) => {\n      if (href === \"#\") event.preventDefault();\n      onClick?.(event);\n    }}\n    {...props}\n  />\n));\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nexport function BreadcrumbSeparator({\n  className,\n  children = \"/\",\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span aria-hidden=\"true\" className={cn(\"sl-sl\", className)} {...props}>\n      {children}\n    </span>\n  );\n}\n\nexport function BreadcrumbPage({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span aria-current=\"page\" className={cn(\"sl-cur\", className)} {...props} />\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/ui/breadcrumb.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/context-menu.json b/artifacts/structured-liquidity/public/r/context-menu.json
index 85a8792..f6bc0e8 100644
--- a/artifacts/structured-liquidity/public/r/context-menu.json
+++ b/artifacts/structured-liquidity/public/r/context-menu.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/ui/context-menu.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ContextMenuCtx {\n  open: boolean;\n  pos: { x: number; y: number };\n  openAt: (x: number, y: number) => void;\n  close: () => void;\n}\nconst Ctx = React.createContext<ContextMenuCtx | null>(null);\nconst useContextMenu = () => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(\"ContextMenu subcomponents must be used within <ContextMenu>\");\n  return c;\n};\n\n/** Structured Liquidity context menu — a glass menu summoned at the cursor. */\nexport function ContextMenu({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [open, setOpen] = React.useState(false);\n  const [pos, setPos] = React.useState({ x: 0, y: 0 });\n  const openAt = (x: number, y: number) => {\n    setPos({ x, y });\n    setOpen(true);\n  };\n  const close = () => setOpen(false);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const onDoc = () => close();\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close();\n    };\n    document.addEventListener(\"mousedown\", onDoc);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", onDoc);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, [open]);\n\n  return (\n    <div className={cn(\"sl-pop-wrap\", className)} {...props}>\n      <Ctx.Provider value={{ open, pos, openAt, close }}>{children}</Ctx.Provider>\n    </div>\n  );\n}\n\nexport function ContextMenuTrigger({\n  className,\n  onContextMenu,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const { openAt } = useContextMenu();\n  return (\n    <div\n      className={cn(\"sl-ctx-area\", className)}\n      onContextMenu={(e) => {\n        e.preventDefault();\n        onContextMenu?.(e);\n        openAt(e.clientX, e.clientY);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuContent({\n  className,\n  style,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const { open, pos } = useContextMenu();\n  if (!open) return null;\n  return (\n    <div\n      className={cn(\"sl-ctx-menu\", className)}\n      style={{ position: \"fixed\", top: pos.y, left: pos.x, zIndex: 200, ...style }}\n      onMouseDown={(e) => e.stopPropagation()}\n      onContextMenu={(e) => e.preventDefault()}\n      {...props}\n    />\n  );\n}\n\nexport interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  shortcut?: React.ReactNode;\n}\nexport function ContextMenuItem({\n  className,\n  children,\n  shortcut,\n  onClick,\n  ...props\n}: ContextMenuItemProps) {\n  const { close } = useContextMenu();\n  return (\n    <div\n      className={cn(\"item\", className)}\n      onClick={(e) => {\n        onClick?.(e);\n        close();\n      }}\n      {...props}\n    >\n      {children}\n      {shortcut != null && <span className=\"k\">{shortcut}</span>}\n    </div>\n  );\n}\n\nexport function ContextMenuSeparator({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sep\", className)} {...props} />;\n}\n",
+      "content": "import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ContextMenuCtx {\n  open: boolean;\n  pos: { x: number; y: number };\n  openAt: (x: number, y: number) => void;\n  close: () => void;\n}\nconst Ctx = React.createContext<ContextMenuCtx | null>(null);\nconst useContextMenu = () => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(\"ContextMenu subcomponents must be used within <ContextMenu>\");\n  return c;\n};\n\n/** Structured Liquidity context menu — a glass menu summoned at the cursor. */\nexport function ContextMenu({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [open, setOpen] = React.useState(false);\n  const [pos, setPos] = React.useState({ x: 0, y: 0 });\n  const openAt = (x: number, y: number) => {\n    setPos({ x, y });\n    setOpen(true);\n  };\n  const close = () => setOpen(false);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const onDoc = () => close();\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close();\n    };\n    document.addEventListener(\"mousedown\", onDoc);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", onDoc);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, [open]);\n\n  return (\n    <div className={cn(\"sl-pop-wrap\", className)} {...props}>\n      <Ctx.Provider value={{ open, pos, openAt, close }}>{children}</Ctx.Provider>\n    </div>\n  );\n}\n\nexport function ContextMenuTrigger({\n  className,\n  onContextMenu,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const { openAt } = useContextMenu();\n  return (\n    <div\n      className={cn(\"sl-ctx-area\", className)}\n      onContextMenu={(e) => {\n        e.preventDefault();\n        onContextMenu?.(e);\n        openAt(e.clientX, e.clientY);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuContent({\n  className,\n  style,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const { open, pos } = useContextMenu();\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      className={cn(\"sl-ctx-menu\", className)}\n      style={{\n        position: \"fixed\",\n        top: Math.min(pos.y, window.innerHeight - 230),\n        left: Math.min(pos.x, window.innerWidth - 220),\n        zIndex: 2147483647,\n        ...style,\n      }}\n      onMouseDown={(e) => e.stopPropagation()}\n      onContextMenu={(e) => e.preventDefault()}\n      {...props}\n    />,\n    document.body,\n  );\n}\n\nexport interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  shortcut?: React.ReactNode;\n}\nexport function ContextMenuItem({\n  className,\n  children,\n  shortcut,\n  onClick,\n  ...props\n}: ContextMenuItemProps) {\n  const { close } = useContextMenu();\n  return (\n    <div\n      className={cn(\"item\", className)}\n      onClick={(e) => {\n        onClick?.(e);\n        close();\n      }}\n      {...props}\n    >\n      {children}\n      {shortcut != null && <span className=\"k\">{shortcut}</span>}\n    </div>\n  );\n}\n\nexport function ContextMenuSeparator({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sep\", className)} {...props} />;\n}\n",
       "type": "registry:ui",
       "target": "components/ui/context-menu.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/media-player.json b/artifacts/structured-liquidity/public/r/media-player.json
index ac74f1e..1922e68 100644
--- a/artifacts/structured-liquidity/public/r/media-player.json
+++ b/artifacts/structured-liquidity/public/r/media-player.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/ui/media-player.tsx",
-      "content": "import * as React from \"react\";\nimport { Radio, Shuffle, SkipBack, Pause, SkipForward, Repeat, Volume2 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Waveform } from \"@/components/ui/waveform\";\n\nexport interface MediaPlayerProps extends React.HTMLAttributes<HTMLDivElement> {\n  eyebrow?: string;\n  title?: string;\n  artist?: string;\n  badge?: React.ReactNode;\n  elapsed?: string;\n  duration?: string;\n  /** waveform bar count */\n  bars?: number;\n  /** leading bars read as elapsed */\n  played?: number;\n  /** volume fill, 0–100 */\n  volume?: number;\n}\n\n/** Structured Liquidity media player — a rigid \"now playing\" card over a glass waveform. */\nexport const MediaPlayer = React.forwardRef<HTMLDivElement, MediaPlayerProps>(\n  (\n    {\n      eyebrow = \"Now playing\",\n      title = \"Gracias a la Vida\",\n      artist = \"Violeta Parra\",\n      badge = \"Live\",\n      elapsed = \"1:48\",\n      duration = \"4:38\",\n      bars = 56,\n      played = 22,\n      volume = 72,\n      className,\n      ...props\n    },\n    ref,\n  ) => (\n    <div ref={ref} className={cn(\"sl-player\", className)} {...props}>\n      <div className=\"pl-top\">\n        <span className=\"pl-art\" aria-hidden=\"true\">\n          <Radio />\n        </span>\n        <div className=\"pl-meta\">\n          <span className=\"pl-eyebrow\">{eyebrow}</span>\n          <span className=\"pl-title\">{title}</span>\n          <span className=\"pl-artist\">{artist}</span>\n        </div>\n        {badge != null && <Badge variant=\"default\">{badge}</Badge>}\n      </div>\n      <div className=\"pl-progress\">\n        <Waveform\n          className=\"pl-wave\"\n          bars={bars}\n          played={played}\n          aria-label=\"Playback position\"\n        />\n        <div className=\"pl-times\">\n          <span className=\"pl-time\">{elapsed}</span>\n          <span className=\"pl-time\">{duration}</span>\n        </div>\n      </div>\n      <div className=\"pl-controls\">\n        <div className=\"pl-transport\">\n          <Button variant=\"ghost\" className=\"pl-ic\" aria-label=\"Shuffle\">\n            <Shuffle />\n          </Button>\n          <Button variant=\"ghost\" className=\"pl-ic\" aria-label=\"Previous track\">\n            <SkipBack />\n          </Button>\n          <Button variant=\"default\" className=\"pl-play\" aria-label=\"Pause\">\n            <Pause />\n          </Button>\n          <Button variant=\"ghost\" className=\"pl-ic\" aria-label=\"Next track\">\n            <SkipForward />\n          </Button>\n          <Button variant=\"ghost\" className=\"pl-ic\" aria-label=\"Repeat\">\n            <Repeat />\n          </Button>\n        </div>\n        <div className=\"pl-vol\">\n          <Volume2 aria-hidden=\"true\" />\n          <div className=\"sl-slider\">\n            <div className=\"trk\">\n              <div className=\"fl\" style={{ width: `${volume}%` }} />\n              <div className=\"th\" style={{ left: `${volume}%` }} />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n);\nMediaPlayer.displayName = \"MediaPlayer\";\n",
+      "content": "import * as React from \"react\";\nimport {\n  Radio,\n  Shuffle,\n  SkipBack,\n  Pause,\n  SkipForward,\n  Repeat,\n  Volume2,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Waveform } from \"@/components/ui/waveform\";\n\nexport interface MediaPlayerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"onVolumeChange\"\n> {\n  eyebrow?: string;\n  title?: string;\n  artist?: string;\n  badge?: React.ReactNode;\n  elapsed?: string;\n  duration?: string;\n  /** waveform bar count */\n  bars?: number;\n  /** leading bars read as elapsed */\n  played?: number;\n  /** volume fill, 0–100 */\n  volume?: number;\n  onVolumeChange?: (value: number) => void;\n}\n\n/** Structured Liquidity media player — a rigid \"now playing\" card over a glass waveform. */\nexport const MediaPlayer = React.forwardRef<HTMLDivElement, MediaPlayerProps>(\n  (\n    {\n      eyebrow = \"Now playing\",\n      title = \"Gracias a la Vida\",\n      artist = \"Violeta Parra\",\n      badge = \"Live\",\n      elapsed = \"1:48\",\n      duration = \"4:38\",\n      bars = 56,\n      played = 22,\n      volume = 72,\n      onVolumeChange,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [internalVolume, setInternalVolume] = React.useState(volume);\n    React.useEffect(() => setInternalVolume(volume), [volume]);\n    const level = internalVolume;\n    const updateVolume = (next: number) => {\n      setInternalVolume(next);\n      onVolumeChange?.(next);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"sl-player\", className)} {...props}>\n        <div className=\"pl-top\">\n          <span className=\"pl-art\" aria-hidden=\"true\">\n            <Radio />\n          </span>\n          <div className=\"pl-meta\">\n            <span className=\"pl-eyebrow\">{eyebrow}</span>\n            <span className=\"pl-title\">{title}</span>\n            <span className=\"pl-artist\">{artist}</span>\n          </div>\n          {badge != null && <Badge variant=\"default\">{badge}</Badge>}\n        </div>\n        <div className=\"pl-progress\">\n          <Waveform\n            className=\"pl-wave\"\n            bars={bars}\n            played={played}\n            aria-label=\"Playback position\"\n          />\n          <div className=\"pl-times\">\n            <span className=\"pl-time\">{elapsed}</span>\n            <span className=\"pl-time\">{duration}</span>\n          </div>\n        </div>\n        <div className=\"pl-controls\">\n          <div className=\"pl-transport\">\n            <Button variant=\"ghost\" className=\"pl-ic\" aria-label=\"Shuffle\">\n              <Shuffle />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              className=\"pl-ic\"\n              aria-label=\"Previous track\"\n            >\n              <SkipBack />\n            </Button>\n            <Button variant=\"default\" className=\"pl-play\" aria-label=\"Pause\">\n              <Pause />\n            </Button>\n            <Button variant=\"ghost\" className=\"pl-ic\" aria-label=\"Next track\">\n              <SkipForward />\n            </Button>\n            <Button variant=\"ghost\" className=\"pl-ic\" aria-label=\"Repeat\">\n              <Repeat />\n            </Button>\n          </div>\n          <div className=\"pl-vol\">\n            <Volume2 aria-hidden=\"true\" />\n            <label className=\"sl-slider pl-volume-slider\">\n              <span className=\"sr-only\">Volume</span>\n              <div className=\"trk\">\n                <div className=\"fl\" style={{ width: `${level}%` }} />\n                <div className=\"th\" style={{ left: `${level}%` }} />\n              </div>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"100\"\n                value={level}\n                onChange={(event) => updateVolume(Number(event.target.value))}\n              />\n            </label>\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\nMediaPlayer.displayName = \"MediaPlayer\";\n",
       "type": "registry:ui",
       "target": "components/ui/media-player.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/mobile-nav.json b/artifacts/structured-liquidity/public/r/mobile-nav.json
index 86577da..b7d5c9b 100644
--- a/artifacts/structured-liquidity/public/r/mobile-nav.json
+++ b/artifacts/structured-liquidity/public/r/mobile-nav.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/ui/mobile-nav.tsx",
-      "content": "import type { CSSProperties } from \"react\";\nimport * as React from \"react\";\nimport {\n  Menu,\n  X,\n  Search,\n  Compass,\n  Library,\n  Radio,\n  Heart,\n  House,\n  User,\n  Disc3,\n  Music,\n  BarChart3,\n  Sparkles,\n  ChevronLeft,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction PhoneScreen() {\n  return (\n    <div className=\"mn-screen\" aria-hidden=\"true\">\n      <div className=\"mn-sk tall\" />\n      <div className=\"mn-sk line\" />\n      <div className=\"mn-sk line short\" />\n    </div>\n  );\n}\n\n/** Mobile navigation — a phone frame with a top bar, slide-in drawer, and a bottom tab bar (wired by the kit script). */\nexport const MobileTabBar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-mnav\", className)} data-mnav {...props}>\n      <div className=\"mn-phone\">\n        <div className=\"mn-top\">\n          <button\n            className=\"mn-burger\"\n            data-mnav-toggle\n            aria-expanded=\"false\"\n            aria-label=\"Open menu\"\n          >\n            <Menu className=\"mn-ic-open\" />\n            <X className=\"mn-ic-close\" />\n          </button>\n          <span className=\"mn-brand\">\n            <span className=\"glyph\" style={{ \"--s\": \"18px\" } as CSSProperties} aria-hidden=\"true\" />\n            universe\n          </span>\n          <span className=\"mn-icon\" aria-hidden=\"true\">\n            <Search />\n          </span>\n        </div>\n        <div className=\"mn-drawer\" data-mnav-drawer data-open=\"false\">\n          <div>\n            <a href=\"#\" className=\"mn-d-item\">\n              <Compass />\n              Discover\n            </a>\n            <a href=\"#\" className=\"mn-d-item\">\n              <Library />\n              Library\n            </a>\n            <a href=\"#\" className=\"mn-d-item\">\n              <Radio />\n              Radio\n            </a>\n            <a href=\"#\" className=\"mn-d-item\">\n              <Heart />\n              Saved\n            </a>\n          </div>\n        </div>\n        <PhoneScreen />\n        <nav className=\"mn-tabs\" aria-label=\"Primary\">\n          <button className=\"mn-tab is-active\" aria-current=\"page\">\n            <House />\n            <span>Home</span>\n          </button>\n          <button className=\"mn-tab\">\n            <Search />\n            <span>Search</span>\n          </button>\n          <button className=\"mn-tab\">\n            <Compass />\n            <span>Browse</span>\n          </button>\n          <button className=\"mn-tab\">\n            <Heart />\n            <span>Saved</span>\n          </button>\n          <button className=\"mn-tab\">\n            <User />\n            <span>You</span>\n          </button>\n        </nav>\n      </div>\n    </div>\n  ),\n);\nMobileTabBar.displayName = \"MobileTabBar\";\n\n/** Mobile navigation — a floating glass tab bar with a sliding active marker. */\nexport const GlassTabBar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-gnav\", className)} {...props}>\n      <div className=\"mn-phone\">\n        <PhoneScreen />\n        <nav className=\"gnav-bar\" aria-label=\"Primary\">\n          <span className=\"gnav-marker\" aria-hidden=\"true\" />\n          <button className=\"gnav-tab is-active\" aria-current=\"page\">\n            <Disc3 />\n            <span>Playback</span>\n          </button>\n          <button className=\"gnav-tab\">\n            <Music />\n            <span>Music</span>\n          </button>\n          <button className=\"gnav-tab\">\n            <BarChart3 />\n            <span>Billboard</span>\n          </button>\n          <button className=\"gnav-tab\">\n            <Sparkles />\n            <span>Lyriq</span>\n          </button>\n        </nav>\n      </div>\n    </div>\n  ),\n);\nGlassTabBar.displayName = \"GlassTabBar\";\n\n/** Mobile navigation — a segmented sub-nav header with a sliding marker (wired by the kit script). */\nexport const SegmentedNav = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-snav\", className)} {...props}>\n      <div className=\"mn-phone\">\n        <div className=\"snav-head\">\n          <button className=\"snav-back\" aria-label=\"Back\">\n            <ChevronLeft />\n          </button>\n          <span className=\"snav-title\">Library</span>\n          <span className=\"snav-act\" aria-hidden=\"true\">\n            <Search />\n          </span>\n        </div>\n        <div className=\"snav-seg\" role=\"tablist\" aria-label=\"Sections\" data-snav-seg>\n          <span className=\"snav-marker\" aria-hidden=\"true\" />\n          <button className=\"snav-seg-btn\" role=\"tab\" aria-selected=\"true\">\n            Playlists\n          </button>\n          <button className=\"snav-seg-btn\" role=\"tab\" aria-selected=\"false\">\n            Songs\n          </button>\n        </div>\n        <PhoneScreen />\n      </div>\n    </div>\n  ),\n);\nSegmentedNav.displayName = \"SegmentedNav\";\n",
+      "content": "import type { CSSProperties } from \"react\";\nimport * as React from \"react\";\nimport {\n  Menu,\n  X,\n  Search,\n  Compass,\n  Library,\n  Radio,\n  Heart,\n  House,\n  User,\n  Disc3,\n  Music,\n  BarChart3,\n  Sparkles,\n  ChevronLeft,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction PhoneScreen() {\n  return (\n    <div className=\"mn-screen\" aria-hidden=\"true\">\n      <div className=\"mn-sk tall\" />\n      <div className=\"mn-sk line\" />\n      <div className=\"mn-sk line short\" />\n    </div>\n  );\n}\n\n/** Mobile navigation — a phone frame with a top drawer and one floating liquid-glass tab bar. */\nexport const MobileTabBar = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const [menuOpen, setMenuOpen] = React.useState(false);\n  const [active, setActive] = React.useState(0);\n  const select = (index: number) => {\n    setActive(index);\n    setMenuOpen(false);\n  };\n\n  return (\n    <div ref={ref} className={cn(\"sl-mnav\", className)} data-mnav {...props}>\n      <div className=\"mn-phone\">\n        <div className=\"mn-top\">\n          <button\n            className=\"mn-burger\"\n            data-mnav-toggle\n            aria-expanded={menuOpen}\n            aria-label={menuOpen ? \"Close menu\" : \"Open menu\"}\n            onClick={() => setMenuOpen((open) => !open)}\n          >\n            <Menu className=\"mn-ic-open\" />\n            <X className=\"mn-ic-close\" />\n          </button>\n          <span className=\"mn-brand\">\n            <span\n              className=\"glyph\"\n              style={{ \"--s\": \"18px\" } as CSSProperties}\n              aria-hidden=\"true\"\n            />\n            universe\n          </span>\n          <span className=\"mn-icon\" aria-hidden=\"true\">\n            <Search />\n          </span>\n        </div>\n        <div className=\"mn-drawer\" data-mnav-drawer data-open={menuOpen}>\n          <div>\n            <button\n              type=\"button\"\n              className=\"mn-d-item\"\n              onClick={() => select(0)}\n            >\n              <Compass />\n              Discover\n            </button>\n            <button\n              type=\"button\"\n              className=\"mn-d-item\"\n              onClick={() => select(1)}\n            >\n              <Library />\n              Library\n            </button>\n            <button\n              type=\"button\"\n              className=\"mn-d-item\"\n              onClick={() => select(2)}\n            >\n              <Radio />\n              Radio\n            </button>\n            <button\n              type=\"button\"\n              className=\"mn-d-item\"\n              onClick={() => select(3)}\n            >\n              <Heart />\n              Saved\n            </button>\n          </div>\n        </div>\n        <PhoneScreen />\n        <nav\n          className=\"gnav-bar mn-tabs-floating\"\n          aria-label=\"Primary\"\n          style={{ \"--gnav-index\": active, \"--gnav-count\": 5 } as CSSProperties}\n        >\n          <span className=\"gnav-marker\" aria-hidden=\"true\" />\n          <button\n            className={cn(\"gnav-tab\", active === 0 && \"is-active\")}\n            aria-current={active === 0 ? \"page\" : undefined}\n            onClick={() => select(0)}\n          >\n            <House />\n            <span>Home</span>\n          </button>\n          <button\n            className={cn(\"gnav-tab\", active === 1 && \"is-active\")}\n            aria-current={active === 1 ? \"page\" : undefined}\n            onClick={() => select(1)}\n          >\n            <Search />\n            <span>Search</span>\n          </button>\n          <button\n            className={cn(\"gnav-tab\", active === 2 && \"is-active\")}\n            aria-current={active === 2 ? \"page\" : undefined}\n            onClick={() => select(2)}\n          >\n            <Compass />\n            <span>Browse</span>\n          </button>\n          <button\n            className={cn(\"gnav-tab\", active === 3 && \"is-active\")}\n            aria-current={active === 3 ? \"page\" : undefined}\n            onClick={() => select(3)}\n          >\n            <Heart />\n            <span>Saved</span>\n          </button>\n          <button\n            className={cn(\"gnav-tab\", active === 4 && \"is-active\")}\n            aria-current={active === 4 ? \"page\" : undefined}\n            onClick={() => select(4)}\n          >\n            <User />\n            <span>You</span>\n          </button>\n        </nav>\n      </div>\n    </div>\n  );\n});\nMobileTabBar.displayName = \"MobileTabBar\";\n\n/** Mobile navigation — a floating glass tab bar with a sliding active marker. */\nexport const GlassTabBar = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const [active, setActive] = React.useState(0);\n  return (\n    <div ref={ref} className={cn(\"sl-gnav\", className)} {...props}>\n      <div className=\"mn-phone\">\n        <PhoneScreen />\n        <nav\n          className=\"gnav-bar\"\n          aria-label=\"Primary\"\n          style={{ \"--gnav-index\": active } as CSSProperties}\n        >\n          <span className=\"gnav-marker\" aria-hidden=\"true\" />\n          <button\n            className={cn(\"gnav-tab\", active === 0 && \"is-active\")}\n            aria-current={active === 0 ? \"page\" : undefined}\n            onClick={() => setActive(0)}\n          >\n            <Disc3 />\n            <span>Playback</span>\n          </button>\n          <button\n            className={cn(\"gnav-tab\", active === 1 && \"is-active\")}\n            aria-current={active === 1 ? \"page\" : undefined}\n            onClick={() => setActive(1)}\n          >\n            <Music />\n            <span>Music</span>\n          </button>\n          <button\n            className={cn(\"gnav-tab\", active === 2 && \"is-active\")}\n            aria-current={active === 2 ? \"page\" : undefined}\n            onClick={() => setActive(2)}\n          >\n            <BarChart3 />\n            <span>Billboard</span>\n          </button>\n          <button\n            className={cn(\"gnav-tab\", active === 3 && \"is-active\")}\n            aria-current={active === 3 ? \"page\" : undefined}\n            onClick={() => setActive(3)}\n          >\n            <Sparkles />\n            <span>Lyriq</span>\n          </button>\n        </nav>\n      </div>\n    </div>\n  );\n});\nGlassTabBar.displayName = \"GlassTabBar\";\n\n/** Mobile navigation — a segmented sub-nav header with a sliding marker (wired by the kit script). */\nexport const SegmentedNav = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const [active, setActive] = React.useState(0);\n  return (\n    <div ref={ref} className={cn(\"sl-snav\", className)} {...props}>\n      <div className=\"mn-phone\">\n        <div className=\"snav-head\">\n          <button className=\"snav-back\" aria-label=\"Back\">\n            <ChevronLeft />\n          </button>\n          <span className=\"snav-title\">Library</span>\n          <span className=\"snav-act\" aria-hidden=\"true\">\n            <Search />\n          </span>\n        </div>\n        <div\n          className=\"snav-seg\"\n          role=\"tablist\"\n          aria-label=\"Sections\"\n          data-snav-seg\n          style={{ \"--seg-index\": active } as CSSProperties}\n        >\n          <span className=\"snav-marker\" aria-hidden=\"true\" />\n          <button\n            className=\"snav-seg-btn\"\n            role=\"tab\"\n            aria-selected={active === 0}\n            onClick={() => setActive(0)}\n          >\n            Playlists\n          </button>\n          <button\n            className=\"snav-seg-btn\"\n            role=\"tab\"\n            aria-selected={active === 1}\n            onClick={() => setActive(1)}\n          >\n            Songs\n          </button>\n        </div>\n        <PhoneScreen />\n      </div>\n    </div>\n  );\n});\nSegmentedNav.displayName = \"SegmentedNav\";\n",
       "type": "registry:ui",
       "target": "components/ui/mobile-nav.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/navigation-bar.json b/artifacts/structured-liquidity/public/r/navigation-bar.json
index 38172d1..7208887 100644
--- a/artifacts/structured-liquidity/public/r/navigation-bar.json
+++ b/artifacts/structured-liquidity/public/r/navigation-bar.json
@@ -8,15 +8,13 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "https://structured.glass/r/avatar.json",
-    "https://structured.glass/r/button.json",
     "https://structured.glass/r/structured-liquidity.json",
     "utils"
   ],
   "files": [
     {
       "path": "registry/ui/navigation-bar.tsx",
-      "content": "import type { CSSProperties } from \"react\";\nimport * as React from \"react\";\nimport { Compass, Library, Radio, Play, ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Avatar } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface NavigationBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n}\n\n/** Structured Liquidity navigation bar — a rigid top rail: brand, links, a glass menu, and right-side actions. */\nexport const NavigationBar = React.forwardRef<HTMLDivElement, NavigationBarProps>(\n  ({ brand = \"universe.audio\", className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-navbar\", className)} {...props}>\n      <span className=\"nb-brand\">\n        <span className=\"glyph\" style={{ \"--s\": \"22px\" } as CSSProperties} aria-hidden=\"true\" />\n        {brand}\n      </span>\n      <div className=\"nb-links\">\n        <a href=\"#\" aria-current=\"page\">\n          <Compass />\n          Discover\n        </a>\n        <a href=\"#\">\n          <Library />\n          Library\n        </a>\n        <a href=\"#\">\n          <Radio />\n          Radio\n        </a>\n      </div>\n      <div className=\"sl-pop-wrap\">\n        <button className=\"sl-trigger\" data-pop aria-expanded=\"false\" aria-haspopup=\"menu\">\n          <span>Browse</span>\n          <span className=\"chev\">▾</span>\n        </button>\n        <div className=\"sl-menu\">\n          <div className=\"lbl\">Catalog</div>\n          <div className=\"item\">New releases</div>\n          <div className=\"item\">Genres</div>\n          <div className=\"sep\" />\n          <div className=\"item\">Languages</div>\n        </div>\n      </div>\n      <div className=\"nb-right\">\n        <div className=\"sl-toggle-group\" data-toggle-group>\n          <button aria-pressed=\"true\" aria-label=\"Grid view\">\n            ▦\n          </button>\n          <button aria-pressed=\"false\" aria-label=\"List view\">\n            ≡\n          </button>\n        </div>\n        <Avatar>U</Avatar>\n        <Button variant=\"ghost\" size=\"sm\">\n          <Play />\n          Demo\n        </Button>\n        <Button variant=\"default\" size=\"sm\">\n          <ArrowRight />\n          Join waitlist\n        </Button>\n      </div>\n    </div>\n  ),\n);\nNavigationBar.displayName = \"NavigationBar\";\n",
+      "content": "import type { CSSProperties } from \"react\";\nimport * as React from \"react\";\nimport { Download, Github, Sparkles } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NavigationBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n}\n\n/** Structured Liquidity navigation bar — a clean top rail with one liquid selection marker. */\nexport const NavigationBar = React.forwardRef<\n  HTMLDivElement,\n  NavigationBarProps\n>(({ brand = \"Structured Liquidity\", className, ...props }, ref) => {\n  const [active, setActive] = React.useState(0);\n  const destinations = [\n    { label: \"Install\", icon: Download },\n    { label: \"Source\", icon: Github },\n    { label: \"Showcase\", icon: Sparkles },\n  ];\n\n  return (\n    <div ref={ref} className={cn(\"sl-navbar\", className)} {...props}>\n      <span className=\"nb-brand\">\n        <span\n          className=\"glyph\"\n          style={{ \"--s\": \"22px\" } as CSSProperties}\n          aria-hidden=\"true\"\n        />\n        {brand}\n      </span>\n      <div\n        className=\"nb-links\"\n        style={{ \"--nb-index\": active } as CSSProperties}\n      >\n        <span className=\"nb-liquid-marker\" aria-hidden=\"true\" />\n        {destinations.map(({ label, icon: Icon }, index) => (\n          <button\n            type=\"button\"\n            className=\"nb-link\"\n            aria-current={active === index ? \"page\" : undefined}\n            onClick={() => setActive(index)}\n            key={label}\n          >\n            <Icon />\n            {label}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n});\nNavigationBar.displayName = \"NavigationBar\";\n",
       "type": "registry:ui",
       "target": "components/ui/navigation-bar.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/navigation-menu.json b/artifacts/structured-liquidity/public/r/navigation-menu.json
index 1b4dd6e..c09ce23 100644
--- a/artifacts/structured-liquidity/public/r/navigation-menu.json
+++ b/artifacts/structured-liquidity/public/r/navigation-menu.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Structured Liquidity navigation menu — segmented bar with hover flyouts. */\nexport const NavigationMenu = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <nav ref={ref} className={cn(\"sl-navmenu\", className)} {...props} />\n));\nNavigationMenu.displayName = \"NavigationMenu\";\n\nexport function NavigationMenuItem({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"nm-item\", className)} {...props} />;\n}\n\nexport interface NavigationMenuTriggerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** render the dropdown chevron */\n  withChevron?: boolean;\n}\nexport function NavigationMenuTrigger({\n  className,\n  children,\n  withChevron = true,\n  ...props\n}: NavigationMenuTriggerProps) {\n  return (\n    <button type=\"button\" className={className} {...props}>\n      {children}\n      {withChevron && <span className=\"chev\">▾</span>}\n    </button>\n  );\n}\n\nexport function NavigationMenuContent({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"nm-panel\", className)} {...props} />;\n}\n\nexport const NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, href = \"#\", ...props }, ref) => (\n  <a ref={ref} href={href} className={className} {...props} />\n));\nNavigationMenuLink.displayName = \"NavigationMenuLink\";\n",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Structured Liquidity navigation menu — segmented bar with hover flyouts. */\nexport const NavigationMenu = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <nav ref={ref} className={cn(\"sl-navmenu\", className)} {...props} />\n));\nNavigationMenu.displayName = \"NavigationMenu\";\n\nexport function NavigationMenuItem({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"nm-item\", className)} {...props} />;\n}\n\nexport interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** render the dropdown chevron */\n  withChevron?: boolean;\n}\nexport function NavigationMenuTrigger({\n  className,\n  children,\n  withChevron = true,\n  ...props\n}: NavigationMenuTriggerProps) {\n  return (\n    <button type=\"button\" className={className} {...props}>\n      {children}\n      {withChevron && <span className=\"chev\">▾</span>}\n    </button>\n  );\n}\n\nexport function NavigationMenuContent({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"nm-panel\", className)} {...props} />;\n}\n\nexport const NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, href = \"#\", onClick, ...props }, ref) => (\n  <a\n    ref={ref}\n    href={href}\n    className={className}\n    onClick={(event) => {\n      if (href === \"#\") event.preventDefault();\n      onClick?.(event);\n    }}\n    {...props}\n  />\n));\nNavigationMenuLink.displayName = \"NavigationMenuLink\";\n",
       "type": "registry:ui",
       "target": "components/ui/navigation-menu.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/portfolio-card.json b/artifacts/structured-liquidity/public/r/portfolio-card.json
new file mode 100644
index 0000000..1dfaa7e
--- /dev/null
+++ b/artifacts/structured-liquidity/public/r/portfolio-card.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "portfolio-card",
+  "type": "registry:ui",
+  "title": "Portfolio Card",
+  "description": "Structured Liquidity Portfolio Card — React component driving the SL class system.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://structured.glass/r/structured-liquidity.json",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "registry/ui/portfolio-card.tsx",
+      "content": "import * as React from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Default Structured Liquidity portfolio grid.\n *\n * Identity, description, state, and action stay visible at rest. Hover may\n * reinforce tactility, but it must never be required to understand the card.\n */\nexport function PortfolioGrid({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sl-portfolio-grid\", className)} {...props} />;\n}\n\ntype PortfolioCardProps = React.HTMLAttributes<HTMLElement> & {\n  href?: string;\n  external?: boolean;\n};\n\nexport function PortfolioCard({\n  className,\n  href,\n  external = true,\n  children,\n  ...props\n}: PortfolioCardProps) {\n  const cardClassName = cn(\"sl-portfolio-card\", className);\n\n  if (href) {\n    return (\n      <a\n        className={cardClassName}\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <article className={cardClassName} {...props}>\n      {children}\n    </article>\n  );\n}\n\nexport function PortfolioCardMedia({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sl-portfolio-card-media\", className)} {...props} />;\n}\n\nexport function PortfolioCardLogo({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sl-portfolio-card-logo\", className)} {...props} />;\n}\n\nexport function PortfolioCardBody({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sl-portfolio-card-body\", className)} {...props} />;\n}\n\nexport function PortfolioCardTags({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sl-portfolio-card-tags\", className)} {...props} />;\n}\n\nexport function PortfolioCardTag({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={cn(\"sl-portfolio-card-tag\", className)} {...props} />;\n}\n\nexport function PortfolioCardTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLHeadingElement>) {\n  return <h3 className={cn(\"sl-portfolio-card-title\", className)} {...props} />;\n}\n\nexport function PortfolioCardDescription({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  return <p className={cn(\"sl-portfolio-card-description\", className)} {...props} />;\n}\n\nexport function PortfolioCardAction({\n  className,\n  children = \"Visit\",\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span className={cn(\"sl-portfolio-card-action\", className)} {...props}>\n      {children}\n      <ExternalLink aria-hidden=\"true\" />\n    </span>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/portfolio-card.tsx"
+    }
+  ]
+}
diff --git a/artifacts/structured-liquidity/public/r/profile-card.json b/artifacts/structured-liquidity/public/r/profile-card.json
new file mode 100644
index 0000000..7515d8f
--- /dev/null
+++ b/artifacts/structured-liquidity/public/r/profile-card.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "profile-card",
+  "type": "registry:ui",
+  "title": "Profile Card",
+  "description": "Structured Liquidity Profile Card — React component driving the SL class system.",
+  "registryDependencies": [
+    "https://structured.glass/r/structured-liquidity.json",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "registry/ui/profile-card.tsx",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ProfileCardFact {\n  label: string;\n  value: React.ReactNode;\n}\n\nexport interface ProfileCardProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  \"title\"\n> {\n  label?: string;\n  status?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  initials?: string;\n  summary: React.ReactNode;\n  facts: ProfileCardFact[];\n}\n\n/** Field-sourced profile summary card: privacy-safe identity, concise positioning, and scannable facts. */\nexport const ProfileCard = React.forwardRef<HTMLElement, ProfileCardProps>(\n  (\n    {\n      label = \"Profile\",\n      status = \"Active\",\n      imageSrc,\n      imageAlt,\n      initials = \"SL\",\n      summary,\n      facts,\n      className,\n      ...props\n    },\n    ref,\n  ) => (\n    <article ref={ref} className={cn(\"sl-profile-card\", className)} {...props}>\n      <header className=\"sl-profile-card-head\">\n        <span>{label}</span>\n        <span className=\"sl-profile-card-status\">{status}</span>\n      </header>\n      <div className=\"sl-profile-card-image\">\n        {imageSrc ? (\n          <img src={imageSrc} alt={imageAlt ?? \"\"} />\n        ) : (\n          <span className=\"sl-profile-card-initials\" aria-label=\"Profile initials\">\n            {initials}\n          </span>\n        )}\n      </div>\n      <p className=\"sl-profile-card-summary\">{summary}</p>\n      <dl className=\"sl-profile-card-facts\">\n        {facts.map((fact) => (\n          <div key={fact.label}>\n            <dt>{fact.label}</dt>\n            <dd>{fact.value}</dd>\n          </div>\n        ))}\n      </dl>\n    </article>\n  ),\n);\nProfileCard.displayName = \"ProfileCard\";\n",
+      "type": "registry:ui",
+      "target": "components/ui/profile-card.tsx"
+    }
+  ]
+}
diff --git a/artifacts/structured-liquidity/public/r/sidebar.json b/artifacts/structured-liquidity/public/r/sidebar.json
index 94d2a4f..47a031e 100644
--- a/artifacts/structured-liquidity/public/r/sidebar.json
+++ b/artifacts/structured-liquidity/public/r/sidebar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/ui/sidebar.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Structured Liquidity sidebar — a structural rail beside a content pane. */\nexport function Sidebar({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sl-sidebar-demo\", className)} {...props} />;\n}\n\nexport function SidebarNav({ className, ...props }: React.HTMLAttributes<HTMLElement>) {\n  return <nav className={cn(\"sb\", className)} {...props} />;\n}\n\nexport function SidebarHeading({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={cn(\"sb-h\", className)} {...props} />;\n}\n\nexport interface SidebarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  active?: boolean;\n}\nexport function SidebarLink({ className, active, ...props }: SidebarLinkProps) {\n  return <a className={cn(active && \"active\", className)} {...props} />;\n}\n\nexport function SidebarMain({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sb-main\", className)} {...props} />;\n}\n",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Structured Liquidity sidebar — a structural rail beside a content pane. */\nexport function Sidebar({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sl-sidebar-demo\", className)} {...props} />;\n}\n\nexport function SidebarNav({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLElement>) {\n  return <nav className={cn(\"sb\", className)} {...props} />;\n}\n\nexport function SidebarHeading({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={cn(\"sb-h\", className)} {...props} />;\n}\n\nexport interface SidebarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  active?: boolean;\n}\nexport function SidebarLink({\n  className,\n  active,\n  href = \"#\",\n  onClick,\n  ...props\n}: SidebarLinkProps) {\n  return (\n    <a\n      className={cn(active && \"active\", className)}\n      href={href}\n      onClick={(event) => {\n        if (href === \"#\") event.preventDefault();\n        onClick?.(event);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMain({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"sb-main\", className)} {...props} />;\n}\n",
       "type": "registry:ui",
       "target": "components/ui/sidebar.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/site-shell.json b/artifacts/structured-liquidity/public/r/site-shell.json
index 4b3e81d..62f63f8 100644
--- a/artifacts/structured-liquidity/public/r/site-shell.json
+++ b/artifacts/structured-liquidity/public/r/site-shell.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/ui/site-shell.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Shared outer chrome width for navigation and footers.\n * It is deliberately wider than SiteContent, so the chrome frames the page.\n */\nexport const SiteShell = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-site-shell\", className)} {...props} />\n  ),\n);\nSiteShell.displayName = \"SiteShell\";\n\n/** The narrower reading and application-content column. */\nexport const SiteContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-site-content\", className)} {...props} />\n  ),\n);\nSiteContent.displayName = \"SiteContent\";\n\n",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Shared width and responsive gutters for navigation, body, and footer chrome. */\nexport const SiteShell = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-site-shell\", className)} {...props} />\n  ),\n);\nSiteShell.displayName = \"SiteShell\";\n\n/**\n * An independent body surface aligned to SiteShell. Tenant layouts may add\n * their own internal reading measure without changing the outer frame.\n */\nexport const SiteContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"sl-site-content sl-site-body\", className)} {...props} />\n  ),\n);\nSiteContent.displayName = \"SiteContent\";\n",
       "type": "registry:ui",
       "target": "components/ui/site-shell.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json b/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
index c8f4085..d67da84 100644
--- a/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
+++ b/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
@@ -3,14 +3,14 @@
   "name": "structured-liquidity-agent",
   "type": "registry:item",
   "title": "Structured Liquidity Agent Bundle",
-  "description": "Install Structured Liquidity plus a persistent local agent skill before the first UI edit.",
+  "description": "Install the Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity language plus its persistent local agent skill before the first UI edit.",
   "registryDependencies": [
     "https://structured.glass/r/structured-liquidity.json"
   ],
   "files": [
     {
       "path": "registry/rules/structured-liquidity/SKILL.md",
-      "content": "---\nname: structured-liquidity\ndescription: Apply the Structured Liquidity UI design language — rigid containers (sharp 90° corners, flat blurless offset shadows, solid load-bearing borders) holding semi-transparent liquid glass, with one accent and strict type roles. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.\n---\n\n# Structured Liquidity\n\nAn open UI design language: **rigid containment** + **liquid depth** + **semantic clarity**. The living specimen, the machine-readable token set, and the component registry are served by the `structured-liquidity` artifact. This skill is the short version an agent needs to produce on-brand output.\n\n## The non-negotiable rules\n\nFollow these literally — they are what keep generated output on-brand:\n\n1. **Square corners.** `border-radius: var(--radius)` (default `0`). Only raise deliberately.\n2. **Flat offset shadows.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. The blur radius is always `0`. Never use a soft/blurred shadow on a structural element.\n3. **Load-bearing borders.** `var(--border-w) solid rgb(var(--edge))`. The edge is black in both light and dark mode.\n4. **Exactly one accent.** `--accent` carries all emphasis. Never add a competing hue.\n5. **Glass is depth, not color.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent.\n6. **Destructive is gray, not red.** Destructive *containers* use `--neg`. Error *text* may warn in color.\n7. **Fixed type roles.** display (`--display`, Inter) = headings/buttons/brand; body (`--body`, Inter) = reading copy; mono (`--mono`, Space Mono) = labels/data/captions/eyebrows.\n8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.\n9. **Motion proves mass.** On press/hover, nudge the element ~1px toward its shadow and grow the offset.\n\n## Tokens\n\nApply these as CSS custom properties on `:root` (dark-mode defaults):\n\n```css\n:root{\n  --accent:#a388ee; --accent-ink:#000000;\n  --bg:#272933; --bg-2:#1f2028; --ink:#e6e6e6; --ink-dim:#9da0ab;\n  --edge:0 0 0; --hard-shadow:#000000; --neg:#3c3f4b; --neg-ink:#f0f0f2;\n  --glass-blur:18px; --glass-tint:255 255 255; --glass-alpha:0.07;\n  --border-w:2px; --hard-x:7px; --hard-y:7px; --radius:0px;\n  --display:\"Inter\",\"Helvetica Neue\",system-ui,sans-serif;\n  --body:\"Inter\",\"Helvetica Neue\",system-ui,sans-serif;\n  --mono:\"Space Mono\",ui-monospace,\"SFMono-Regular\",monospace;\n}\n```\n\nLight mode: set `data-mode=\"light\"` on `<html>` and override `--bg:#dfe5f2; --bg-2:#fff; --ink:#000; --ink-dim:#5b5f6b; --neg:#16171c; --neg-ink:#fff; --glass-alpha:0.55`.\n\nThe canonical machine-readable set is `design-tokens.json` (W3C Design Tokens format; each token's `$extensions.cssVar` gives the exact variable name).\n\n## Type layout\n\nThree roles — header / body / detail (display / body / mono). Inter carries both sans-serif roles; use weight and scale for hierarchy. Use Space Mono only for labels, data, code, captions, and eyebrows.\n\n## Components\n\nThe specimen ships a **shadcn-installable registry** served at `/r/*.json`. Two ways to adopt, depending on the target project:\n\n### Installation gate for agents\n\nBefore making the first UI edit in a target project, run:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity-agent.json\n```\n\nVerify that the theme styles and `.agents/skills/structured-liquidity/SKILL.md` landed. Do not spend early iterations approximating the language by hand.\n\n**A. React + Tailwind project (preferred).** Use the shadcn CLI. Install the whole language (tokens + the three stylesheets + the kit script) first, then any component:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity.json   # base style — do this first\nnpx shadcn@latest add https://structured.glass/r/button.json                  # then any component\n```\n\nEach `registry:ui` item is a plain React component (no Radix) that emits the SL classes and declares the base style as a `registryDependency`, so the CSS comes along. The registry index lives at `/registry.json`.\n\n**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Inter and Space Mono; then use the SL classes directly. Core kit: `sl-btn`, `sl-badge`, `sl-toggle`/`sl-toggle-group`, `sl-switch`, `sl-check`, `sl-radio-item` (inside a `[data-radio-group]`), `sl-input`/`sl-label`, `sl-slider`, `sl-progress`, `sl-ava`, `sl-tabs` (`.tablist` buttons + `.panel` nodes), and overlays (`sl-overlay` + `sl-dialog`/`sl-sheet`). In plain HTML, interactive components are wired by `structured-liquidity-kit.js` via `data-toggle-aria`, `data-toggle-group`, `data-radio-group`, `data-open-overlay`, `data-close-overlay`.\n\n## Anatomy of a rigid container holding glass\n\n```html\n<div class=\"glass kit-cell\">\n  <span class=\"kit-cap\">Title</span>\n  <p>Body copy inside a rigid container holding liquid glass.</p>\n</div>\n```\n\n```css\n/* if you are not using the kit CSS, the container recipe is: */\n.container{\n  border:var(--border-w) solid rgb(var(--edge));\n  border-radius:var(--radius);\n  box-shadow:var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n  background:rgba(var(--glass-tint),var(--glass-alpha));\n  backdrop-filter:blur(var(--glass-blur)) saturate(150%);\n}\n```\n",
+      "content": "---\nname: structured-liquidity\ndescription: Apply the Structured Liquidity UI design language — Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.\n---\n\n# Structured Liquidity\n\n**Neobrutalist structure. Liquid motion. Scientific modern clarity.**\n\n1. **Neobrutalist structure:** How the interface is physically framed—buttons, borders, navigation, footers, body containers, panels, square geometry, and selective flat shadows. It makes boundaries and actions tangible before effects are added.\n2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible without becoming the only carrier of meaning. Every interaction has a complete reduced-motion state.\n3. **Scientific Modern Clarity:** How information is organized and meaning is communicated—rational grids, disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: make information legible, ordered, and unmistakable. Every screen remains complete and useful without relying on color, glass, or motion.\n\nTogether these three tenets form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Each tenet owns the clarity of its part of the interface. The living specimen, machine-readable tokens, and component registry are served by the `structured-liquidity` artifact.\n\n## The non-negotiable rules\n\nFollow these literally — they are what keep generated output on-brand:\n\n1. **Square corners.** `border-radius: var(--radius)` (default `0`). Only raise deliberately.\n2. **Flat offset shadows, used selectively.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Blur is always `0`. Reserve shadows for tactile affordances and deliberately layered cutout surfaces; flat information containers can rely on borders, rules, and alignment.\n3. **Load-bearing borders.** `var(--border-w) solid rgb(var(--edge))`. The edge is black in both light and dark mode.\n4. **Exactly one accent.** `--accent` carries all emphasis. Never add a competing hue.\n5. **Liquid is movement, not a gradient treatment.** Default information surfaces are flat. Express liquidity through moving selection markers, menu and popover settling, tab changes, scroll continuity, and transitions between areas. Use neutral translucency or `backdrop-filter` only at moving state boundaries such as navigation, menus, and overlays—not on every card.\n6. **Destructive is gray, not red.** Destructive _containers_ use `--neg`. Error _text_ may warn in color.\n7. **Fixed type roles.** display (`--display`, Inter) = headings/buttons/brand; body (`--body`, Inter) = reading copy; mono (`--mono`, Space Mono) = labels/data/captions/eyebrows.\n8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.\n9. **Motion proves mass.** On press/hover, nudge the element ~1px toward its shadow and grow the offset.\n10. **Communicate with scientific modern clarity.** Use a rational grid, exact alignment, asymmetric balance, measured line lengths, purposeful whitespace, and compact mono captions for sources, state, and evidence. Swiss modernism and the International Typographic Style are the reference tradition.\n11. **Monochrome carries information.** The accent identifies selection, progression, or one key relationship; it does not decorate the page.\n\n## Tokens\n\nApply these as CSS custom properties on `:root` (light-mode defaults):\n\n```css\n:root {\n  --accent: #a388ee;\n  --accent-ink: #000000;\n  --bg: #f2f0ea;\n  --bg-2: #ffffff;\n  --ink: #111111;\n  --ink-dim: #5d5d59;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #242424;\n  --neg-ink: #ffffff;\n  --glass-blur: 14px;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.72;\n  --border-w: 2px;\n  --hard-x: 5px;\n  --hard-y: 5px;\n  --radius: 0px;\n  --display: \"Inter\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Inter\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"Space Mono\", \"SFMono-Regular\", ui-monospace, monospace;\n  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);\n  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);\n  --measure-reading: 62ch;\n  --measure-caption: 48ch;\n  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);\n  --section-space: clamp(4rem, 9vw, 9rem);\n}\n```\n\nDark mode has one color-responsive atmospheric palette; there is no separate black mode. Set `data-mode=\"dark\"` on `<html>` and derive `--bg:color-mix(in srgb,var(--accent) 8%,#0d0a11)` plus `--bg-2:color-mix(in srgb,var(--accent) 14%,#100d14)`, with `--ink:#f6f2f8; --ink-dim:#b9b0bf; --neg:#343434; --neg-ink:#fff; --glass-alpha:0.08`. Changing the single accent must retune the dark page field automatically: purple becomes deep aubergine, green becomes deep green, yellow becomes deep ochre. Tactile components may remain charcoal or near-black above that field.\n\nThe canonical machine-readable set is `design-tokens.json` (W3C Design Tokens format; each token's `$extensions.cssVar` gives the exact variable name).\n\n## Type layout\n\nThree roles — header / body / detail (display / body / mono). Inter carries both sans-serif roles; use scale, weight, measure, and alignment for hierarchy. Use Space Mono only for labels, data, code, captions, and eyebrows. Prefer one dominant statement, a 12-column or similarly disciplined grid, short reading measures, and figure captions that identify evidence and state.\n\n## Motion contract\n\nThe rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. Prefer a shared marker that visibly travels between menu options, tabs, filters, navbar actions, and page areas over per-item gradient fills or decorative sheen. Use one liquid easing family; reserve ambient motion for a single focal specimen; provide a complete static state under `prefers-reduced-motion`. If the interface communicates the same thing without the animation, the motion is optional polish, not a dependency.\n\n## Components\n\nThe specimen ships a **shadcn-installable registry** served at `/r/*.json`. Two ways to adopt, depending on the target project:\n\n### Installation gate for agents\n\nBefore making the first UI edit in a target project, run:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity-agent.json\n```\n\nVerify that the theme styles and `.agents/skills/structured-liquidity/SKILL.md` landed. Do not spend early iterations approximating the language by hand.\n\n**A. React + Tailwind project (preferred).** Use the shadcn CLI. Install the whole language (tokens + the three stylesheets + the kit script) first, then any component:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity.json   # base style — do this first\nnpx shadcn@latest add https://structured.glass/r/button.json                  # then any component\n```\n\nEach `registry:ui` item is a plain React component (no Radix) that emits the SL classes and declares the base style as a `registryDependency`, so the CSS comes along. The registry index lives at `/registry.json`.\n\n### Portfolio-grid default\n\nUse the installable `portfolio-card` component for company, investment, and venture grids. Its information hierarchy is persistent: logo or identity mark, company name, one concise description, state or category tags, and the primary action are visible without hover. Hover and press may reinforce tactility, but must never reveal information that is otherwise unavailable, especially on touch devices.\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/portfolio-card.json\n```\n\nUse `PortfolioGrid` with `PortfolioCard` and its anatomy exports. Put `PortfolioCardTags` inside `PortfolioCardMedia` so state and category labels overlay the image plate instead of changing the body height. Keep card bodies aligned within the grid, use a consistent media plate for logo normalization, and use the action only when the destination is real. Unavailable or pre-launch companies render as non-link cards with their status exposed.\n\n**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Inter and Space Mono; then use the SL classes directly. Core kit: `sl-btn`, `sl-badge`, `sl-toggle`/`sl-toggle-group`, `sl-switch`, `sl-check`, `sl-radio-item` (inside a `[data-radio-group]`), `sl-input`/`sl-label`, `sl-slider`, `sl-progress`, `sl-ava`, `sl-tabs` (`.tablist` buttons + `.panel` nodes), and overlays (`sl-overlay` + `sl-dialog`/`sl-sheet`). In plain HTML, interactive components are wired by `structured-liquidity-kit.js` via `data-toggle-aria`, `data-toggle-group`, `data-radio-group`, `data-open-overlay`, `data-close-overlay`.\n\n## Anatomy of a stateful glass surface inside a rigid frame\n\n```html\n<div class=\"glass kit-cell\">\n  <span class=\"kit-cap\">Title</span>\n  <p>Use this treatment when the surface communicates state or depth.</p>\n</div>\n```\n\n```css\n/* if you are not using the kit CSS, the stateful glass recipe is: */\n.stateful-glass {\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  backdrop-filter: blur(var(--glass-blur)) saturate(150%);\n}\n```\n",
       "type": "registry:file",
       "target": ".agents/skills/structured-liquidity/SKILL.md"
     }
diff --git a/artifacts/structured-liquidity/public/r/structured-liquidity.json b/artifacts/structured-liquidity/public/r/structured-liquidity.json
index e1b6b94..4c22cc5 100644
--- a/artifacts/structured-liquidity/public/r/structured-liquidity.json
+++ b/artifacts/structured-liquidity/public/r/structured-liquidity.json
@@ -3,7 +3,7 @@
   "name": "structured-liquidity",
   "type": "registry:style",
   "title": "Structured Liquidity",
-  "description": "The Structured Liquidity design language base: theme tokens plus the three distributable stylesheets and the kit interaction script. Install this first — every component depends on it.",
+  "description": "The Structured Liquidity design language base: Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it.",
   "dependencies": [
     "clsx",
     "tailwind-merge",
@@ -17,42 +17,55 @@
     "theme": {
       "accent": "#a388ee",
       "accent-ink": "#000000",
-      "bg": "#272933",
-      "bg-2": "#1f2028",
-      "ink": "#e6e6e6",
-      "ink-dim": "#9da0ab",
+      "bg": "#f2f0ea",
+      "bg-2": "#ffffff",
+      "ink": "#111111",
+      "ink-dim": "#5d5d59",
       "edge": "0 0 0",
       "hard-shadow": "#000000",
-      "neg": "#3c3f4b",
-      "neg-ink": "#f0f0f2",
-      "glass-blur": "18px",
+      "neg": "#242424",
+      "neg-ink": "#ffffff",
+      "glass-blur": "14px",
       "glass-tint": "255 255 255",
-      "glass-alpha": "0.07",
+      "glass-alpha": "0.72",
       "border-w": "2px",
-      "hard-x": "7px",
-      "hard-y": "7px",
+      "hard-x": "5px",
+      "hard-y": "5px",
       "radius": "0px",
-      "display": "\"Inter\",\"Helvetica Neue\",system-ui,sans-serif",
-      "body": "\"Inter\",\"Helvetica Neue\",system-ui,sans-serif",
-      "mono": "\"Space Mono\",ui-monospace,\"SFMono-Regular\",monospace"
+      "display": "\"Inter\",\"Helvetica Neue\",Arial,system-ui,sans-serif",
+      "body": "\"Inter\",\"Helvetica Neue\",Arial,system-ui,sans-serif",
+      "mono": "\"Space Mono\",\"SFMono-Regular\",ui-monospace,monospace",
+      "text-display-xl": "clamp(4.2rem, 10.5vw, 9.5rem)",
+      "text-display-lg": "clamp(2.6rem, 5.5vw, 5.25rem)",
+      "measure-reading": "62ch",
+      "measure-caption": "48ch",
+      "grid-gutter": "clamp(1rem, 2.5vw, 2.5rem)",
+      "section-space": "clamp(4rem, 9vw, 9rem)",
+      "clarity-gap": "clamp(1.25rem, 3vw, 3rem)",
+      "rule-hairline": "1px",
+      "ease-liquid": "cubic-bezier(.22,1,.36,1)",
+      "ease-liquid-over": "cubic-bezier(.34,1.4,.5,1)",
+      "motion-fast": "160ms",
+      "motion": "340ms",
+      "motion-slow": "500ms"
     }
   },
   "files": [
     {
       "path": "registry/styles/structured-liquidity.css",
-      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — a design language built on three\n   pillars: Rigid Containment (sharp 90° corners, flat blurless\n   shadows, grid discipline), Viscous Depth (semi-transparent\n   liquid glass that reflects light), and Semantic Clarity\n   (strict text + icon pairings). This stylesheet IS the specimen.\n   ============================================================ */\n\n:root {\n  /* ---- tunable knobs (driven by Tweaks) ---- */\n  --accent: #a388ee;          /* neobrutalism.dev purple */\n  --accent-ink: #000000;      /* text that sits on accent */\n  --glass-blur: 18px;\n  --glass-tint: 255 255 255;  /* rgb channels for glass fill */\n  --glass-alpha: 0.07;\n  --border-w: 2px;\n  --hard-x: 7px;\n  --hard-y: 7px;\n  --radius: 0px;\n  --content-w: 1200px;\n  --shell-w: 1280px;\n  --viewport-gutter: 4vw;\n  --floating-ui-clearance: 96px;\n\n  /* ---- fixed palette (neobrutalism.dev) ---- */\n  --bg: #272933;\n  --bg-2: #1f2028;\n  --ink: #e6e6e6;             /* foreground */\n  --ink-dim: #9da0ab;\n  --edge: 0 0 0;              /* neobrutalism black border (rgb) */\n  --hard-shadow: #000000;\n  --neg: #3c3f4b;             /* negative / destructive surface (gray, never red) */\n  --neg-ink: #f0f0f2;\n\n  --display: \"Inter\", \"Helvetica Neue\", system-ui, sans-serif;\n  --body: \"Inter\", \"Helvetica Neue\", system-ui, sans-serif;\n  --mono: \"Space Mono\", ui-monospace, \"SFMono-Regular\", monospace;\n}\n\n/* tighter rhythm — denser, less airy */\n\n[data-mode=\"light\"] {\n  --bg: #dfe5f2;\n  --bg-2: #ffffff;\n  --ink: #000000;\n  --ink-dim: #5b5f6b;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #16171c;             /* near-black negative surface in light mode */\n  --neg-ink: #ffffff;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.55;\n}\n\n* { box-sizing: border-box; }\n\nhtml { scroll-behavior: auto; background: var(--bg); }\n\nbody {\n  margin: 0;\n  position: relative;\n  background: transparent;\n  color: var(--ink);\n  font-family: var(--display);\n  font-weight: 440;\n  line-height: 1.45;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n}\n\n::selection { background: var(--accent); color: var(--accent-ink); }\n\n/* ============================================================\n   BACKDROP — a full-document-height iridescent field the glass\n   refracts. Not fixed (fixed/attachment:fixed only paint at the\n   document top in capture/print contexts) — it spans the whole\n   page so every section is tinted and nothing renders flat-black.\n   ============================================================ */\n\n.field {\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 100%;\n  z-index: -2;\n  overflow: hidden;\n  pointer-events: none;\n  background:\n    radial-gradient(52vw 32vh at 12% 2%,  rgba(124, 60, 255, 0.50), transparent 70%),\n    radial-gradient(46vw 30vh at 90% 10%, rgba(176, 60, 255, 0.42), transparent 70%),\n    radial-gradient(52vw 30vh at 78% 30%, rgba(214, 70, 255, 0.30), transparent 72%),\n    radial-gradient(46vw 28vh at 16% 45%, rgba(91, 60, 255, 0.38), transparent 72%),\n    radial-gradient(50vw 28vh at 84% 60%, rgba(124, 60, 255, 0.34), transparent 72%),\n    radial-gradient(46vw 26vh at 22% 74%, rgba(176, 60, 255, 0.30), transparent 72%),\n    radial-gradient(52vw 30vh at 80% 90%, rgba(214, 70, 255, 0.26), transparent 72%),\n    radial-gradient(46vw 26vh at 18% 98%, rgba(91, 60, 255, 0.34), transparent 72%);\n  background-repeat: no-repeat;\n  animation: fieldshift 30s ease-in-out infinite alternate;\n}\n[data-mode=\"light\"] .field { opacity: 0.55; }\n@keyframes fieldshift {\n  from { transform: translateX(0); }\n  to   { transform: translateX(-3vw); }\n}\n@media (prefers-reduced-motion: reduce) { .field { animation: none; } }\n\n.field .grid {\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);\n  background-size: 64px 64px;\n  mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);\n  -webkit-mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);\n}\n\n.grain {\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 100%;\n  z-index: -1;\n  pointer-events: none;\n  opacity: 0.4;\n  mix-blend-mode: overlay;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n\n/* ============================================================\n   GLASS-BRUTAL PRIMITIVE — frosted material + brutal edge\n   ============================================================ */\n\n.glass {\n  position: relative;\n  background:\n    linear-gradient(135deg, rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)), rgba(var(--glass-tint), var(--glass-alpha)));\n  backdrop-filter: blur(var(--glass-blur)) saturate(180%);\n  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow:\n    var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow),         /* the brutal hard shadow */\n    inset 0 1px 0 rgba(255,255,255,0.45),                        /* top specular */\n    inset 0 -1px 0 rgba(255,255,255,0.06),\n    inset 0 0 40px rgba(255,255,255,0.04);\n}\n/* moving sheen + cursor specular */\n.glass::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: radial-gradient(\n    180px circle at var(--mx, 50%) var(--my, 0%),\n    rgba(255,255,255,0.22), transparent 60%);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n.glass:hover::before { opacity: 1; }\n.glass::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 55%);\n  background-size: 250% 250%;\n  background-position: 100% 100%;\n  opacity: 0.7;\n}\n\n.flat {            /* brutalist flat (no glass) — for loud accent blocks */\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n}\n\n/* ============================================================\n   TYPE\n   ============================================================ */\n\n.eyebrow {\n  font-family: var(--mono);\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n}\n.eyebrow::before {\n  content: \"\";\n  width: 9px; height: 9px;\n  background: var(--accent);\n  display: inline-block;\n}\n\nh1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }\n\n.section-title {\n  font-size: clamp(1.5rem, 2.8vw, 2.5rem);\n  margin: 0.25em 0 0.3em;\n}\n.lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-dim); max-width: 60ch; text-wrap: pretty; }\n\n.accent { color: var(--accent); }\n.mono { font-family: var(--mono); }\n\n/* ============================================================\n   LAYOUT\n   ============================================================ */\n\n.wrap,\n.sl-site-content { width: min(var(--content-w), calc(100vw - (var(--viewport-gutter) * 2))); margin-inline: auto; }\n.shell,\n.sl-site-shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }\nsection { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; }\n.section-head { max-width: 70ch; margin-bottom: 1.1rem; }\n\n.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }\n.reveal.in { opacity: 1; transform: none; }\n\n@media (prefers-reduced-motion: reduce) {\n  .reveal { opacity: 1; transform: none; transition: none; }\n  html { scroll-behavior: auto; }\n}\n\n@media print {\n  .reveal { opacity: 1 !important; transform: none !important; }\n}\n",
+      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — Neobrutalist structure. Liquid motion.\n   Scientific modern clarity. This stylesheet IS\n   the specimen.\n   ============================================================ */\n\n:root {\n  /* ---- tunable knobs (driven by Tweaks) ---- */\n  --accent: #a388ee; /* neobrutalism.dev purple */\n  --accent-ink: #000000; /* text that sits on accent */\n  --glass-blur: 14px;\n  --glass-tint: 255 255 255; /* rgb channels for glass fill */\n  --glass-alpha: 0.72;\n  --border-w: 2px;\n  --hard-x: 5px;\n  --hard-y: 5px;\n  --radius: 0px;\n  --shell-w: 1280px;\n  --content-w: var(--shell-w);\n  --viewport-gutter: 4vw;\n  --body-surface: var(--bg);\n  --floating-ui-clearance: 96px;\n\n  /* ---- Scientific Modern Clarity, informed by Swiss modernism and the International Typographic Style ---- */\n  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);\n  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);\n  --measure-reading: 62ch;\n  --measure-caption: 48ch;\n  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);\n  --section-space: clamp(4rem, 9vw, 9rem);\n  --clarity-gap: clamp(1.25rem, 3vw, 3rem);\n  --rule-hairline: 1px;\n  --diagram-line: color-mix(in srgb, var(--ink) 72%, transparent);\n  --diagram-muted: color-mix(in srgb, var(--ink) 42%, transparent);\n\n  /* ---- light-first paper palette ---- */\n  --bg: #f2f0ea;\n  --bg-2: #ffffff;\n  --ink: #111111; /* foreground */\n  --ink-dim: #5d5d59;\n  --edge: 0 0 0; /* neobrutalism black border (rgb) */\n  --hard-shadow: #000000;\n  --neg: #242424; /* negative / destructive surface (gray, never red) */\n  --neg-ink: #ffffff;\n\n  --display: \"Inter\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Inter\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"Space Mono\", \"SFMono-Regular\", ui-monospace, monospace;\n}\n\n/* tighter rhythm — denser, less airy */\n\n[data-mode=\"light\"] {\n  --bg: #f2f0ea;\n  --bg-2: #ffffff;\n  --ink: #111111;\n  --ink-dim: #5d5d59;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #16171c; /* near-black negative surface in light mode */\n  --neg-ink: #ffffff;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.72;\n}\n\n[data-mode=\"dark\"] {\n  /* Dark mode is color-responsive: the active accent tints the atmospheric\n     field while tactile components remain charcoal. There is no black mode. */\n  --bg: color-mix(in srgb, var(--accent) 18%, #100b16);\n  --bg-2: color-mix(in srgb, var(--accent) 27%, #15101c);\n  --ink: #f6f2f8;\n  --ink-dim: #b9b0bf;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #343434;\n  --neg-ink: #ffffff;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.08;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: auto;\n  background: var(--bg);\n}\n\nbody {\n  margin: 0;\n  position: relative;\n  background: transparent;\n  color: var(--ink);\n  font-family: var(--display);\n  font-weight: 440;\n  line-height: 1.45;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n}\n\n::selection {\n  background: var(--accent);\n  color: var(--accent-ink);\n}\n\n/* ============================================================\n   BACKDROP — flat paper plus a measured technical grid. Liquid\n   belongs to interaction and continuity, not decorative scenery.\n   ============================================================ */\n\n.field {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: -2;\n  overflow: hidden;\n  pointer-events: none;\n  background: var(--bg);\n}\n[data-mode=\"light\"] .field {\n  opacity: 1;\n}\n[data-mode=\"dark\"] .field {\n  opacity: 1;\n}\n\n.field .grid {\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);\n  background-size: 64px 64px;\n  opacity: 0.7;\n}\n\n.grain {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: -1;\n  pointer-events: none;\n  display: none;\n}\n\n/* ============================================================\n   STRUCTURAL SURFACE — flat by default. Add blur only to transient\n   navigation, menus, overlays, and other moving state boundaries.\n   ============================================================ */\n\n.glass {\n  position: relative;\n  background: var(--bg-2);\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: none;\n}\n/* moving sheen + cursor specular */\n.glass::before,\n.glass::after {\n  content: none;\n}\n\n.flat {\n  /* brutalist flat (no glass) — for loud accent blocks */\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n}\n\n/* ============================================================\n   TYPE\n   ============================================================ */\n\n.eyebrow {\n  font-family: var(--mono);\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n}\n.eyebrow::before {\n  content: \"\";\n  width: 9px;\n  height: 9px;\n  background: var(--accent);\n  display: inline-block;\n}\n\nh1,\nh2,\nh3 {\n  font-weight: 800;\n  line-height: 0.98;\n  letter-spacing: -0.02em;\n  margin: 0;\n  text-wrap: balance;\n}\n\n.section-title {\n  font-size: clamp(2rem, 4.2vw, 4.25rem);\n  line-height: 0.93;\n  letter-spacing: -0.045em;\n  margin: 0.25em 0 0.3em;\n}\n.lead {\n  font-size: clamp(1rem, 1.3vw, 1.18rem);\n  color: var(--ink-dim);\n  max-width: 60ch;\n  text-wrap: pretty;\n}\n\n.accent {\n  color: var(--accent);\n}\n.mono {\n  font-family: var(--mono);\n}\n\n/* ============================================================\n   LAYOUT\n   ============================================================ */\n\n.wrap,\n.shell {\n  width: min(var(--shell-w), calc(100vw - var(--viewport-gutter)));\n  margin-inline: auto;\n}\n.sl-site-content,\n.sl-site-shell {\n  width: min(100%, var(--shell-w));\n  max-width: calc(100vw - var(--viewport-gutter));\n  margin-inline: auto;\n}\n.sl-site-body {\n  background: var(--body-surface);\n}\nsection {\n  padding: clamp(3.5rem, 8vw, 7.5rem) 0;\n  position: relative;\n  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);\n}\n.section-head {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(280px, 4fr);\n  grid-template-rows: auto auto;\n  column-gap: var(--grid-gutter);\n  max-width: none;\n  margin-bottom: clamp(2rem, 4vw, 4rem);\n}\n.section-head .eyebrow {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: start;\n  margin-bottom: 0.8rem;\n}\n.section-head .section-title {\n  grid-column: 1;\n  grid-row: 2;\n}\n.section-head .lead {\n  grid-column: 2;\n  grid-row: 1 / span 2;\n  align-self: end;\n  margin: 0;\n}\n@media (max-width: 720px) {\n  .section-head {\n    grid-template-columns: 1fr;\n  }\n  .section-head .eyebrow,\n  .section-head .section-title,\n  .section-head .lead {\n    grid-column: 1;\n    grid-row: auto;\n  }\n  .section-head .lead { margin-top: 1rem; }\n}\n\n.reveal {\n  opacity: 0;\n  transform: translateY(26px);\n  transition:\n    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),\n    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);\n}\n.reveal.in {\n  opacity: 1;\n  transform: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .reveal {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n  html {\n    scroll-behavior: auto;\n  }\n}\n\n@media print {\n  .reveal {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n",
       "type": "registry:file",
       "target": "styles/structured-liquidity.css"
     },
     {
       "path": "registry/styles/structured-liquidity-components.css",
-      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — component layer\n   ============================================================ */\n\n/* ---- NAV (floating Liquid Glass bar — a layer on top) ---- */\n.nav {\n  position: fixed; top: clamp(0.6rem, 1.6vw, 1rem); left: 50%; transform: translateX(-50%) translateZ(0);\n  width: min(1200px, 94vw); z-index: 50;\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 0.55rem 0.6rem 0.55rem clamp(0.9rem, 2vw, 1.3rem);\n  backdrop-filter: blur(10px) saturate(150%);\n  -webkit-backdrop-filter: blur(10px) saturate(150%);\n  background: color-mix(in srgb, var(--bg-2) 94%, transparent);\n  border: var(--border-w) solid rgb(var(--edge));\n  box-shadow: 6px 6px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4);\n}\n.nav .links { display: flex; gap: 1.3rem; align-items: center; }\n.nav .links a {\n  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;\n  position: relative; transition: color 0.2s;\n}\n.nav .links a:not(.nav-cta)::after {\n  content: \"\"; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;\n  background: var(--accent); transform: scaleX(0); transform-origin: left;\n  transition: transform 0.22s ease;\n}\n.nav .links a.active { color: var(--ink); }\n.nav .links a.active:not(.nav-cta)::after { transform: scaleX(1); }\n.nav .links a:hover { color: var(--ink); }\n.nav .links a.nav-cta { color: var(--accent-ink); font-family: var(--display); font-weight: 800; font-size: 0.82rem; text-transform: none; letter-spacing: -0.01em; }\n.nav .links a.nav-cta:hover { color: var(--accent-ink); }\n@media (max-width: 700px) { .nav .links a:not(.nav-cta) { display: none; } }\n\n/* ---- SECTION DOT-NAV (fixed right rail) ---- */\n.dotnav { position: fixed; right: clamp(0.7rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 0.85rem; }\n.dotnav a { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; text-decoration: none; }\n.dotnav .dd { width: 11px; height: 11px; flex: none; border: 2px solid rgb(var(--edge)); background: rgba(var(--glass-tint),0.12); box-shadow: 2px 2px 0 0 var(--hard-shadow); transition: background 0.2s, transform 0.15s; }\n.dotnav a:hover .dd { transform: translate(-1px,-1px); }\n.dotnav a.active .dd { background: var(--accent); }\n.dotnav .dl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 0.18rem 0.45rem; border: 1.5px solid rgb(var(--edge)); background: var(--bg-2); box-shadow: 2px 2px 0 0 var(--hard-shadow); opacity: 0; transform: translateX(6px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; }\n.dotnav a:hover .dl, .dotnav a.active .dl { opacity: 1; transform: none; }\n@media (max-width: 820px) { .dotnav { display: none; } }\n\n/* ---- LOGO GLYPH — a rigid container holding a liquid fill.\n   The square + border + flat shadow = STRUCTURE; the accent\n   liquid with its curved meniscus = LIQUIDITY. ---- */\n.glyph {\n  --s: 34px;\n  width: var(--s); height: var(--s);\n  position: relative; flex: none;\n  border-radius: 0;\n  border: 2.5px solid rgb(var(--edge));\n  background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.04));\n  backdrop-filter: blur(8px) saturate(180%);\n  -webkit-backdrop-filter: blur(8px) saturate(180%);\n  box-shadow: 3px 3px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.5);\n  overflow: hidden;\n}\n.glyph::before {            /* the liquid fill + curved meniscus */\n  content: \"\"; position: absolute; left: -10%; right: -10%; bottom: -8%;\n  height: 58%;\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 42%);\n  border-radius: 46% 46% 0 0 / 70% 70% 0 0;\n  box-shadow: inset 0 2px 0 rgba(255,255,255,0.45);\n}\n.glyph::after {             /* specular gloss across the top glass */\n  content: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 50%;\n  background: linear-gradient(160deg, rgba(255,255,255,0.4), transparent 70%);\n  pointer-events: none;\n}\n.glyph.lg { --s: 60px; border-width: 3px; box-shadow: 5px 5px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.5); }\n\n.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }\n.brand .name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }\n\n/* ---- BUTTONS ---- */\n.btn {\n  font-family: var(--display); font-weight: 700; font-size: 0.98rem;\n  padding: 0.85rem 1.5rem; border-radius: 0; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 0.6rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  color: var(--ink); text-decoration: none;\n  transition: transform 0.12s cubic-bezier(.2,.8,.2,1), box-shadow 0.12s;\n  position: relative;\n}\n.btn.glassy {\n  background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.05));\n  backdrop-filter: blur(12px) saturate(180%);\n  -webkit-backdrop-filter: blur(12px) saturate(180%);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4);\n}\n.btn.solid { background: var(--accent); color: var(--accent-ink); box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow); }\n.btn:active, .btn:hover { transform: translate(var(--hard-x), var(--hard-y)); box-shadow: 0 0 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4); }\n.btn .arrow { transition: transform 0.2s; }\n.btn:hover .arrow { transform: translateX(4px); }\n\n/* ---- HERO ---- */\n.hero { padding-top: clamp(5rem, 10vh, 6.5rem); padding-bottom: clamp(2rem, 5vh, 3.5rem); min-height: auto; display: flex; align-items: center; }\n.hero-grid { display: block; width: 100%; max-width: 980px; }\n@media (max-width: 940px) { .hero-grid { max-width: none; } }\n\n.wordmark {\n  font-weight: 900;\n  font-stretch: 125%;\n  font-size: clamp(2.2rem, 7.4vw, 5.2rem);\n  line-height: 0.84;\n  letter-spacing: -0.03em;\n  margin: 0.25em 0 0.3em;\n  text-wrap: balance;\n}\n/* glass-filled letters: translucent frosted fill, brutal outline drop */\n.wordmark .glas {\n  color: transparent;\n  -webkit-text-stroke: 2px rgb(var(--edge));\n  paint-order: stroke fill;\n  background-image: linear-gradient(\n    160deg,\n    color-mix(in srgb, var(--accent) 92%, white 8%),\n    color-mix(in srgb, var(--accent) 62%, transparent)\n  );\n  -webkit-background-clip: text; background-clip: text;\n  text-shadow: var(--hard-x) var(--hard-y) 0 rgba(var(--edge), 0.3);\n}\n.wordmark .brutal {\n  color: var(--accent);\n  position: relative;\n  -webkit-text-stroke: 4px rgb(var(--edge));\n  paint-order: stroke fill;\n  text-shadow: var(--hard-x) var(--hard-y) 0 rgb(var(--edge));\n}\n.umlaut-note { font-family: var(--mono); }\n\n/* ---- animated liquid fill (progressive enhancement via liquid-word.js) ---- */\n.wordmark .glas[data-liquid].is-liquid {\n  display: inline-block;\n  position: relative;\n  color: transparent;\n  -webkit-text-stroke: 0;\n  background: none;\n  text-shadow: none;\n}\n.liquid-svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n  filter: drop-shadow(var(--hard-x) var(--hard-y) 0 rgba(var(--edge), 0.3));\n}\n.lw-glass { fill: color-mix(in srgb, var(--accent) 12%, transparent); }\n.lw-wave-back { fill: color-mix(in srgb, var(--accent) 55%, white 14%); opacity: 0.7; }\n.lw-wave-front { fill: var(--accent); }\n.lw-shine { fill: none; stroke: color-mix(in srgb, white 70%, var(--accent)); stroke-width: 2.5; opacity: 0.5; vector-effect: non-scaling-stroke; }\n.lw-ripple { fill: none; stroke: color-mix(in srgb, white 55%, var(--accent)); stroke-width: 1.6; vector-effect: non-scaling-stroke; }\n.lw-ripple-a { opacity: 0.32; animation: lw-flow 11s linear infinite; }\n.lw-ripple-b { opacity: 0.22; animation: lw-flow 17s linear infinite reverse; }\n.lw-outline { fill: none; stroke: rgb(var(--edge)); stroke-width: 2; paint-order: stroke; vector-effect: non-scaling-stroke; }\n\n.lw-slosh { transform-box: fill-box; transform-origin: center; will-change: transform; }\n.lw-bob { animation: lw-bob 10s ease-in-out infinite; }\n.lw-wave-front { animation: lw-flow 9s linear infinite; }\n.lw-wave-back { animation: lw-flow 15s linear infinite reverse; }\n.lw-shine { animation: lw-flow 9s linear infinite; }\n@keyframes lw-flow {\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(var(--w) * -1)); }\n}\n@keyframes lw-bob {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(calc(var(--amp, 6px) * -1)); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lw-bob, .lw-wave-front, .lw-wave-back, .lw-shine, .lw-ripple { animation: none; }\n  .lw-slosh { transform: none !important; }\n}\n\n/* ---- hypercube logo (progressive enhancement via liquid-word.js) ---- */\n.glyph.is-cube::before { content: none; }\n.liquid-cube {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.lw-cube-innerglass { fill: color-mix(in srgb, var(--accent) 10%, transparent); }\n.lw-cube-edge {\n  fill: none;\n  stroke: rgb(var(--edge));\n  stroke-width: 1.4;\n  stroke-linejoin: miter;\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n.lw-cube-shell {\n  fill: none;\n  stroke: rgb(var(--edge));\n  stroke-width: 2.4;\n  stroke-linejoin: miter;\n  vector-effect: non-scaling-stroke;\n}\n\n.hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.4rem; }\n.tag {\n  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;\n  padding: 0.4rem 0.8rem; border-radius: 0; border: 1.5px solid rgba(var(--edge),0.6);\n  color: var(--ink-dim);\n}\n.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }\n\n/* floating specimen stack in hero */\n.specimen { position: relative; height: 440px; }\n.specimen .card {\n  position: absolute; padding: 1.3rem 1.4rem; width: 240px;\n  will-change: transform;\n}\n.specimen .c1 { top: 0; left: 0; z-index: 1; }\n.specimen .c2 { top: 122px; left: 74px; z-index: 2; }\n.specimen .c3 { top: 252px; left: 22px; z-index: 3; }\n.chip-row { display: flex; gap: 0.5rem; margin-top: 0.8rem; }\n.dot { width: 22px; height: 22px; border-radius: 0; border: 2px solid rgb(var(--edge)); }\n\n/* drag hint */\n.draggable { cursor: grab; }\n.draggable:active { cursor: grabbing; }\n\n/* ---- PILLARS (the three-pillar manifesto) ---- */\n.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }\n@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }\n.pillar { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; }\n.pillar .pnum { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }\n.pillar .psub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.15rem; }\n.pillar h3 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }\n.pillar > p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }\n.pillar ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }\n.pillar li { font-family: var(--mono); font-size: 0.76rem; padding: 0.4rem 0; border-top: 1px solid rgba(var(--edge),0.15); color: var(--ink-dim); display: flex; gap: 0.5rem; }\n.pillar li::before { content: \"\"; flex: none; width: 8px; height: 8px; margin-top: 0.35em; background: var(--accent); }\n\n/* ---- PRINCIPLES GRID ---- */\n.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n@media (max-width: 700px) { .principles { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 480px) { .principles { grid-template-columns: 1fr; } }\n.principle { padding: 1.1rem; display: flex; flex-direction: column; min-height: 132px; }\n.principle .num { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); margin-bottom: auto; }\n.principle h3 { font-size: 1.18rem; margin: 1rem 0 0.35rem; }\n.principle p { color: var(--ink-dim); font-size: 0.88rem; margin: 0; }\n\n/* ---- LIVE SPECIMENS ---- */\n.specimens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }\n@media (max-width: 640px) { .specimens { grid-template-columns: 1fr; } }\n.spec-panel { padding: 1.4rem; }\n.spec-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1rem; }\n.spec-stage { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }\n\n/* toggle */\n.toggle { width: 64px; height: 36px; border-radius: 0; border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer;\n  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));\n  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n  box-shadow: 3px 3px 0 0 var(--hard-shadow); transition: background 0.25s; }\n.toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 0; background: rgb(var(--edge)); transition: transform 0.22s cubic-bezier(.3,1.4,.5,1); }\n.toggle.on { background: var(--accent); }\n.toggle.on .knob { transform: translateX(28px); background: var(--accent-ink); }\n\n/* input */\n.field-input { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 0; min-width: 220px;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: linear-gradient(135deg, rgba(var(--glass-tint),0.1), rgba(var(--glass-tint),0.03));\n  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }\n.field-input input { background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 0.85rem; width: 100%; }\n.field-input input::placeholder { color: var(--ink-dim); }\n.field-input:focus-within { box-shadow: 4px 4px 0 0 var(--accent), inset 0 1px 0 rgba(255,255,255,0.3); }\n\n/* segmented */\n.seg { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: 0; overflow: hidden; box-shadow: 3px 3px 0 0 var(--hard-shadow);\n  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(var(--glass-tint),0.05); }\n.seg button { font-family: var(--mono); font-size: 0.78rem; padding: 0.55rem 0.9rem; border: none; background: none; color: var(--ink-dim); cursor: pointer; border-left: 1px solid rgba(var(--edge),0.3); }\n.seg button:first-child { border-left: none; }\n.seg button.sel { background: var(--accent); color: var(--accent-ink); }\n\n/* slider specimen */\n.gslider { width: 220px; height: 36px; display: flex; align-items: center; }\n.gslider .track { flex: 1; height: 8px; border-radius: 0; border: 2px solid rgb(var(--edge)); position: relative; background: rgba(var(--glass-tint),0.06); }\n.gslider .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; background: var(--accent); border-radius: 0; }\n.gslider .thumb { position: absolute; top: 50%; left: 55%; width: 22px; height: 22px; transform: translate(-50%,-50%); border-radius: 0; background: rgb(var(--edge)); border: 2px solid rgb(var(--edge)); box-shadow: 2px 2px 0 var(--hard-shadow); }\n\n/* ---- DO / DON'T ---- */\n.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } }\n.rule { padding: 1.4rem; }\n.rule .badge { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; padding: 0.3rem 0.7rem; border-radius: 0; display: inline-block; margin-bottom: 1.2rem; }\n.rule.do .badge { background: var(--accent); color: var(--accent-ink); }\n.rule.dont .badge { background: transparent; border: 2px solid rgb(var(--edge)); color: var(--ink); }\n.rule ul { list-style: none; padding: 0; margin: 0; }\n.rule li { padding: 0.7rem 0; border-top: 1px solid rgba(var(--edge),0.15); font-size: 0.95rem; }\n.rule.dont li { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(var(--edge),0.3); }\n\n/* ---- TOKENS ---- */\n.tokens { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }\n@media (max-width: 820px) { .tokens { grid-template-columns: 1fr; } }\n.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 1.2rem; }\n.swatch { aspect-ratio: 1; border-radius: 0; border: 2px solid rgb(var(--edge)); display: flex; align-items: flex-end; padding: 0.5rem; font-family: var(--mono); font-size: 0.6rem; box-shadow: 3px 3px 0 var(--hard-shadow); }\n.type-row { display: flex; align-items: baseline; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid rgba(var(--edge),0.15); }\n.type-row .k { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-dim); width: 90px; flex: none; }\n\n/* ---- FOOTER CTA ---- */\n.cta-panel { padding: clamp(1.6rem, 3.2vw, 2.4rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }\n.cta-panel h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }\nfooter { padding: 2rem 0 2.5rem; }\n.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: var(--border-w) solid rgba(var(--edge),0.4); padding-top: 2rem; }\n.foot .mono { font-size: 0.78rem; color: var(--ink-dim); }\n.foot .foot-legal { font-size: 0.76rem; color: var(--ink-dim); text-align: right; max-width: 52ch; }\n.foot .foot-legal a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); transition: color 0.2s; }\n.foot .foot-legal a:hover { color: var(--accent); }\n@media (max-width: 640px) { .foot .foot-legal { text-align: left; } }\n",
+      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — component layer\n   ============================================================ */\n\n/* ---- NAV (flat structural rail; liquid is expressed by moving markers) ---- */\n.nav {\n  position: fixed; top: clamp(0.6rem, 1.6vw, 1rem); left: 50%; transform: translateX(-50%) translateZ(0);\n  width: min(1200px, 94vw); z-index: 50;\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 0.55rem 0.6rem 0.55rem clamp(0.9rem, 2vw, 1.3rem);\n  backdrop-filter: blur(10px) saturate(150%);\n  -webkit-backdrop-filter: blur(10px) saturate(150%);\n  background: color-mix(in srgb, var(--bg-2) 96%, transparent);\n  border: var(--border-w) solid rgb(var(--edge));\n  box-shadow: none;\n}\n.nav .links { display: flex; gap: 1.3rem; align-items: center; }\n.nav .links a {\n  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;\n  position: relative; transition: color 0.2s;\n}\n.nav .links a:not(.nav-cta)::after {\n  content: \"\"; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;\n  background: var(--accent); transform: scaleX(0); transform-origin: left;\n  transition: transform 0.22s ease;\n}\n.nav .links a.active { color: var(--ink); }\n.nav .links a.active:not(.nav-cta)::after { transform: scaleX(1); }\n.nav .links a:hover { color: var(--ink); }\n.nav .links a.nav-cta { color: var(--accent-ink); font-family: var(--display); font-weight: 800; font-size: 0.82rem; text-transform: none; letter-spacing: -0.01em; }\n.nav .links a.nav-cta:hover { color: var(--accent-ink); }\n@media (max-width: 700px) { .nav .links a:not(.nav-cta) { display: none; } }\n\n/* ---- SECTION DOT-NAV (fixed right rail) ---- */\n.dotnav { position: fixed; right: clamp(0.7rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 0.85rem; }\n.dotnav a { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; text-decoration: none; }\n.dotnav .dd { width: 11px; height: 11px; flex: none; border: 2px solid rgb(var(--edge)); background: rgba(var(--glass-tint),0.12); box-shadow: 2px 2px 0 0 var(--hard-shadow); transition: background 0.2s, transform 0.15s; }\n.dotnav a:hover .dd { transform: translate(-1px,-1px); }\n.dotnav a.active .dd { background: var(--accent); }\n.dotnav .dl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 0.18rem 0.45rem; border: 1.5px solid rgb(var(--edge)); background: var(--bg-2); box-shadow: 2px 2px 0 0 var(--hard-shadow); opacity: 0; transform: translateX(6px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; }\n.dotnav a:hover .dl, .dotnav a.active .dl { opacity: 1; transform: none; }\n@media (max-width: 820px) { .dotnav { display: none; } }\n\n/* ---- LOGO GLYPH — a rigid container holding a liquid fill.\n   The square + border + flat shadow = STRUCTURE; the accent\n   liquid with its curved meniscus = LIQUIDITY. ---- */\n.glyph {\n  --s: 34px;\n  width: var(--s); height: var(--s);\n  position: relative; flex: none;\n  border-radius: 0;\n  border: 2.5px solid rgb(var(--edge));\n  background: var(--bg-2);\n  backdrop-filter: blur(8px) saturate(180%);\n  -webkit-backdrop-filter: blur(8px) saturate(180%);\n  box-shadow: 3px 3px 0 0 var(--hard-shadow);\n  overflow: hidden;\n}\n.glyph::before {            /* the liquid fill + curved meniscus */\n  content: \"\"; position: absolute; left: -10%; right: -10%; bottom: -8%;\n  height: 58%;\n  background: var(--accent);\n  border-radius: 46% 46% 0 0 / 70% 70% 0 0;\n  box-shadow: inset 0 2px 0 rgba(255,255,255,0.45);\n}\n.glyph::after { content: none; }\n.glyph.lg { --s: 60px; border-width: 3px; box-shadow: 5px 5px 0 0 var(--hard-shadow); }\n\n.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }\n.brand .name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }\n\n/* ---- BUTTONS ---- */\n.btn {\n  font-family: var(--display); font-weight: 700; font-size: 0.98rem;\n  padding: 0.85rem 1.5rem; border-radius: 0; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 0.6rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  color: var(--ink); text-decoration: none;\n  transition: transform 0.12s cubic-bezier(.2,.8,.2,1), box-shadow 0.12s;\n  position: relative;\n}\n.btn.glassy {\n  background: var(--bg-2);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n}\n.btn.solid { background: var(--accent); color: var(--accent-ink); box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow); }\n.btn:active, .btn:hover { transform: translate(var(--hard-x), var(--hard-y)); box-shadow: 0 0 0 0 var(--hard-shadow); }\n.btn .arrow { transition: transform 0.2s; }\n.btn:hover .arrow { transform: translateX(4px); }\n\n/* ---- HERO ---- */\n.hero { padding-top: clamp(5rem, 10vh, 6.5rem); padding-bottom: clamp(2rem, 5vh, 3.5rem); min-height: auto; display: flex; align-items: center; }\n.hero-grid { display: block; width: 100%; max-width: 980px; }\n@media (max-width: 940px) { .hero-grid { max-width: none; } }\n\n.wordmark {\n  font-weight: 900;\n  font-stretch: 125%;\n  font-size: var(--text-display-xl);\n  line-height: 0.84;\n  letter-spacing: -0.03em;\n  margin: 0.25em 0 0.3em;\n  text-wrap: balance;\n}\n/* solid accent fallback; the enhanced word uses movement inside the letterforms */\n.wordmark .glas {\n  color: var(--accent);\n  -webkit-text-stroke: 0;\n  text-shadow: none;\n}\n.wordmark .brutal {\n  color: var(--accent);\n  position: relative;\n  -webkit-text-stroke: 4px rgb(var(--edge));\n  paint-order: stroke fill;\n  text-shadow: var(--hard-x) var(--hard-y) 0 rgb(var(--edge));\n}\n.umlaut-note { font-family: var(--mono); }\n\n/* ---- animated liquid fill (progressive enhancement via liquid-word.js) ---- */\n.wordmark .glas[data-liquid].is-liquid {\n  display: inline-block;\n  position: relative;\n  color: transparent;\n  -webkit-text-stroke: 0;\n  background: none;\n  text-shadow: none;\n}\n.liquid-svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n  filter: drop-shadow(var(--hard-x) var(--hard-y) 0 rgba(var(--edge), 0.3));\n}\n.lw-glass { fill: color-mix(in srgb, var(--accent) 20%, transparent); }\n.lw-wave-back { fill: color-mix(in srgb, var(--accent) 62%, white 18%); opacity: 0.74; }\n.lw-wave-front { fill: var(--accent); }\n.lw-shine { fill: none; stroke: color-mix(in srgb, white 82%, var(--accent)); stroke-width: 2.5; opacity: 0.72; vector-effect: non-scaling-stroke; }\n.lw-meniscus { fill: none; stroke: color-mix(in srgb, white 54%, var(--accent)); stroke-width: 5; opacity: 0.28; vector-effect: non-scaling-stroke; }\n.lw-caustic { fill: none; stroke: color-mix(in srgb, white 68%, var(--accent)); stroke-width: 1.25; opacity: 0.18; vector-effect: non-scaling-stroke; }\n.lw-caustic-a { animation: lw-flow 13s linear infinite reverse; }\n.lw-caustic-b { animation: lw-flow 19s linear infinite; }\n.lw-ripple { fill: none; stroke: color-mix(in srgb, white 55%, var(--accent)); stroke-width: 1.6; vector-effect: non-scaling-stroke; }\n.lw-ripple-a { opacity: 0.32; animation: lw-flow 11s linear infinite; }\n.lw-ripple-b { opacity: 0.22; animation: lw-flow 17s linear infinite reverse; }\n.lw-outline { fill: none; stroke: color-mix(in srgb, rgb(var(--edge)) 82%, var(--ink)); stroke-width: 2.6; paint-order: stroke; vector-effect: non-scaling-stroke; }\n\n.lw-slosh { transform-box: fill-box; transform-origin: center; will-change: transform; }\n.lw-bob { animation: lw-bob 10s ease-in-out infinite; }\n.lw-wave-front { animation: lw-flow 9s linear infinite; }\n.lw-wave-back { animation: lw-flow 15s linear infinite reverse; }\n.lw-shine { animation: lw-flow 9s linear infinite; }\n@keyframes lw-flow {\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(var(--w) * -1)); }\n}\n@keyframes lw-bob {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(calc(var(--amp, 6px) * -1)); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lw-bob, .lw-wave-front, .lw-wave-back, .lw-shine, .lw-ripple, .lw-meniscus, .lw-caustic { animation: none; }\n  .lw-slosh { transform: none !important; }\n}\n\n/* ---- hypercube logo (progressive enhancement via liquid-word.js) ---- */\n.glyph.is-cube::before { content: none; }\n.liquid-cube {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.lw-cube-innerglass { fill: color-mix(in srgb, var(--accent) 10%, transparent); }\n.lw-cube-edge {\n  fill: none;\n  stroke: rgb(var(--edge));\n  stroke-width: 1.4;\n  stroke-linejoin: miter;\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n.lw-cube-shell {\n  fill: none;\n  stroke: rgb(var(--edge));\n  stroke-width: 2.4;\n  stroke-linejoin: miter;\n  vector-effect: non-scaling-stroke;\n}\n\n.hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.4rem; }\n.tag {\n  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;\n  padding: 0.4rem 0.8rem; border-radius: 0; border: 1.5px solid rgba(var(--edge),0.6);\n  color: var(--ink-dim);\n}\n.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }\n\n/* floating specimen stack in hero */\n.specimen { position: relative; height: 440px; }\n.specimen .card {\n  position: absolute; padding: 1.3rem 1.4rem; width: 240px;\n  will-change: transform;\n}\n.specimen .c1 { top: 0; left: 0; z-index: 1; }\n.specimen .c2 { top: 122px; left: 74px; z-index: 2; }\n.specimen .c3 { top: 252px; left: 22px; z-index: 3; }\n.chip-row { display: flex; gap: 0.5rem; margin-top: 0.8rem; }\n.dot { width: 22px; height: 22px; border-radius: 0; border: 2px solid rgb(var(--edge)); }\n\n/* drag hint */\n.draggable { cursor: grab; }\n.draggable:active { cursor: grabbing; }\n\n/* ---- TENETS (the three-tenet manifesto) ---- */\n.tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }\n@media (max-width: 640px) { .tenets { grid-template-columns: 1fr; } }\n.tenet { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; }\n.tenet .pnum { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }\n.tenet .psub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.15rem; }\n.tenet h3 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }\n.tenet > p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }\n.tenet ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }\n.tenet li { font-family: var(--mono); font-size: 0.76rem; padding: 0.4rem 0; border-top: 1px solid rgba(var(--edge),0.15); color: var(--ink-dim); display: flex; gap: 0.5rem; }\n.tenet li::before { content: \"\"; flex: none; width: 8px; height: 8px; margin-top: 0.35em; background: var(--accent); }\n\n/* ---- PRINCIPLES GRID ---- */\n.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n@media (max-width: 700px) { .principles { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 480px) { .principles { grid-template-columns: 1fr; } }\n.principle { padding: 1.1rem; display: flex; flex-direction: column; min-height: 132px; }\n.principle .num { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); margin-bottom: auto; }\n.principle h3 { font-size: 1.18rem; margin: 1rem 0 0.35rem; }\n.principle p { color: var(--ink-dim); font-size: 0.88rem; margin: 0; }\n\n/* ---- LIVE SPECIMENS ---- */\n.specimens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }\n@media (max-width: 640px) { .specimens { grid-template-columns: 1fr; } }\n.spec-panel { padding: 1.4rem; }\n.spec-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1rem; }\n.spec-stage { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }\n\n/* toggle */\n.toggle { width: 64px; height: 36px; border-radius: 0; border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer;\n  background: var(--bg-2);\n  box-shadow: 3px 3px 0 0 var(--hard-shadow); transition: background 0.25s; }\n.toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 0; background: rgb(var(--edge)); transition: transform 0.22s cubic-bezier(.3,1.4,.5,1); }\n.toggle.on { background: var(--accent); }\n.toggle.on .knob { transform: translateX(28px); background: var(--accent-ink); }\n\n/* input */\n.field-input { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 0; min-width: 220px;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2); }\n.field-input input { background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 0.85rem; width: 100%; }\n.field-input input::placeholder { color: var(--ink-dim); }\n.field-input:focus-within { box-shadow: 4px 4px 0 0 var(--accent); }\n\n/* segmented */\n.seg { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: 0; overflow: hidden; box-shadow: 3px 3px 0 0 var(--hard-shadow);\n  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(var(--glass-tint),0.05); }\n.seg button { font-family: var(--mono); font-size: 0.78rem; padding: 0.55rem 0.9rem; border: none; background: none; color: var(--ink-dim); cursor: pointer; border-left: 1px solid rgba(var(--edge),0.3); }\n.seg button:first-child { border-left: none; }\n.seg button.sel { background: var(--accent); color: var(--accent-ink); }\n\n/* slider specimen */\n.gslider { width: 220px; height: 36px; display: flex; align-items: center; }\n.gslider .track { flex: 1; height: 8px; border-radius: 0; border: 2px solid rgb(var(--edge)); position: relative; background: rgba(var(--glass-tint),0.06); }\n.gslider .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; background: var(--accent); border-radius: 0; }\n.gslider .thumb { position: absolute; top: 50%; left: 55%; width: 22px; height: 22px; transform: translate(-50%,-50%); border-radius: 0; background: rgb(var(--edge)); border: 2px solid rgb(var(--edge)); box-shadow: 2px 2px 0 var(--hard-shadow); }\n\n/* ---- DO / DON'T ---- */\n.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } }\n.rule { padding: 1.4rem; }\n.rule .badge { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; padding: 0.3rem 0.7rem; border-radius: 0; display: inline-block; margin-bottom: 1.2rem; }\n.rule.do .badge { background: var(--accent); color: var(--accent-ink); }\n.rule.dont .badge { background: transparent; border: 2px solid rgb(var(--edge)); color: var(--ink); }\n.rule ul { list-style: none; padding: 0; margin: 0; }\n.rule li { padding: 0.7rem 0; border-top: 1px solid rgba(var(--edge),0.15); font-size: 0.95rem; }\n.rule.dont li { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(var(--edge),0.3); }\n\n/* ---- TOKENS ---- */\n.tokens { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }\n@media (max-width: 820px) { .tokens { grid-template-columns: 1fr; } }\n.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 1.2rem; }\n.swatch { aspect-ratio: 1; border-radius: 0; border: 2px solid rgb(var(--edge)); display: flex; align-items: flex-end; padding: 0.5rem; font-family: var(--mono); font-size: 0.6rem; box-shadow: 3px 3px 0 var(--hard-shadow); }\n.type-row { display: flex; align-items: baseline; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid rgba(var(--edge),0.15); }\n.type-row .k { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-dim); width: 90px; flex: none; }\n\n/* ---- FOOTER CTA ---- */\n.cta-panel { padding: clamp(1.6rem, 3.2vw, 2.4rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }\n.cta-panel h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }\nfooter { padding: 2rem 0 2.5rem; }\n.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: var(--border-w) solid rgba(var(--edge),0.4); padding-top: 2rem; }\n.foot .mono { font-size: 0.78rem; color: var(--ink-dim); }\n.foot .foot-legal { font-size: 0.76rem; color: var(--ink-dim); text-align: right; max-width: 52ch; }\n.foot .foot-legal a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); transition: color 0.2s; }\n.foot .foot-legal a:hover { color: var(--accent); }\n@media (max-width: 640px) { .foot .foot-legal { text-align: left; } }\n",
       "type": "registry:file",
       "target": "styles/structured-liquidity-components.css"
     },
     {
       "path": "registry/styles/structured-liquidity-kit.css",
-      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — component KIT\n   A shadcn-complete library expressed in the design language:\n   rigid containers (sharp edges, flat offset shadows, real\n   borders) holding viscous glass surfaces, with one accent\n   carrying every emphasis.\n   ============================================================ */\n\n/* ---- gallery scaffold ---- */\n.kit-groups { display: flex; flex-direction: column; gap: 2.2rem; }\n.kit-group > .kit-group-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1rem; }\n.kit-group-head .kg-name { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }\n.kit-group-head .kg-rule { flex: 1; height: 2px; background: rgba(var(--edge),0.25); }\n.kit-group-head .kg-count { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); }\n\n.kit-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }\n.kit-cell { padding: 1.2rem 1.25rem; display: flex; flex-direction: column; gap: 0.95rem; grid-column: span 4; min-width: 0; }\n.kit-cell.w6 { grid-column: span 6; }\n.kit-cell.w8 { grid-column: span 8; }\n.kit-cell.w12 { grid-column: span 12; }\n@media (max-width: 900px) { .kit-cell, .kit-cell.w6, .kit-cell.w8 { grid-column: span 6; } .kit-cell.w12 { grid-column: span 12; } }\n@media (max-width: 600px) { .kit-cell, .kit-cell.w6, .kit-cell.w8, .kit-cell.w12 { grid-column: span 12; } }\n.kit-cap { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); display: flex; align-items: center; gap: 0.5rem; }\n.kit-cap::before { content: \"\"; width: 7px; height: 7px; background: var(--accent); flex: none; }\n.kit-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }\n.kit-col { display: flex; flex-direction: column; gap: 0.7rem; }\n.kit-demo { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }\n\n/* glass + flat helpers reused locally */\n.sl-glass-fill {\n  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));\n  backdrop-filter: blur(10px) saturate(170%); -webkit-backdrop-filter: blur(10px) saturate(170%);\n}\n\n/* ============================================================\n   BUTTONS — full variant matrix\n   ============================================================ */\n.sl-btn {\n  font-family: var(--display); font-weight: 700; font-size: 0.85rem; line-height: 1;\n  padding: 0.6rem 1rem; border-radius: var(--radius); cursor: pointer;\n  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;\n  border: var(--border-w) solid rgb(var(--edge)); color: var(--ink); text-decoration: none;\n  transition: transform 0.12s cubic-bezier(.2,.8,.2,1), box-shadow 0.12s; white-space: nowrap;\n}\n.sl-btn.default { background: var(--accent); color: var(--accent-ink); box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.secondary { background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.05)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.outline { background: transparent; box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-dim); }\n.sl-btn.ghost:hover { color: var(--ink); background: rgba(var(--glass-tint),0.08); transform: none; }\n.sl-btn.destructive { background: var(--neg); color: var(--neg-ink); box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.link { border-color: transparent; box-shadow: none; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 0.6rem 0.2rem; }\n.sl-btn.link:hover { transform: none; }\n.sl-btn.icon { padding: 0.55rem; width: 38px; height: 38px; }\n.sl-btn.sm { padding: 0.4rem 0.7rem; font-size: 0.76rem; }\n.sl-btn.lg { padding: 0.8rem 1.3rem; font-size: 0.95rem; }\n.sl-btn:not(.ghost):not(.link):hover, .sl-btn:not(.ghost):not(.link):active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--hard-shadow); }\n.sl-btn[disabled] { opacity: 0.4; pointer-events: none; }\n.sl-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sl-spin 0.7s linear infinite; }\n@keyframes sl-spin { to { transform: rotate(360deg); } }\n\n/* ============================================================\n   BADGE\n   ============================================================ */\n.sl-badge { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.28rem 0.55rem; border-radius: var(--radius); border: 1.5px solid rgb(var(--edge)); display: inline-flex; align-items: center; gap: 0.35rem; }\n.sl-badge.default { background: var(--accent); color: var(--accent-ink); }\n.sl-badge.secondary { background: rgba(var(--glass-tint),0.1); color: var(--ink); }\n.sl-badge.outline { background: transparent; color: var(--ink-dim); }\n.sl-badge.destructive { background: var(--neg); color: var(--neg-ink); border-color: rgb(var(--edge)); }\n.sl-badge .ico { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }\n\n/* ============================================================\n   INPUT / LABEL / TEXTAREA / OTP\n   ============================================================ */\n.sl-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }\n.sl-input, .sl-textarea {\n  font-family: var(--mono); font-size: 0.82rem; color: var(--ink); width: 100%;\n  padding: 0.6rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));\n  background: linear-gradient(135deg, rgba(var(--glass-tint),0.1), rgba(var(--glass-tint),0.03));\n  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); outline: none;\n}\n.sl-textarea { min-height: 76px; resize: vertical; line-height: 1.5; }\n.sl-input::placeholder, .sl-textarea::placeholder { color: var(--ink-dim); }\n.sl-input:focus, .sl-textarea:focus { box-shadow: 3px 3px 0 0 var(--accent), inset 0 1px 0 rgba(255,255,255,0.25); }\n.sl-otp { display: flex; gap: 0.5rem; }\n.sl-otp input { width: 42px; height: 48px; text-align: center; font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--ink); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); outline: none; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-otp input:focus { box-shadow: 2px 2px 0 0 var(--accent); }\n\n/* ============================================================\n   CHECKBOX / RADIO / SWITCH / TOGGLE\n   ============================================================ */\n.sl-check, .sl-radio-item { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.85rem; }\n.sl-box { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; transition: background 0.15s; }\n.sl-check[aria-checked=\"true\"] .sl-box { background: var(--accent); }\n.sl-box .tick { width: 11px; height: 11px; color: var(--accent-ink); opacity: 0; }\n.sl-check[aria-checked=\"true\"] .sl-box .tick { opacity: 1; }\n.sl-radio { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: 50%; background: rgba(var(--glass-tint),0.06); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; }\n.sl-radio .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0; }\n.sl-radio-item[aria-checked=\"true\"] .sl-radio .dot { opacity: 1; }\n.sl-switch { width: 46px; height: 26px; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer; background: rgba(var(--glass-tint),0.1); box-shadow: 2px 2px 0 0 var(--hard-shadow); transition: background 0.2s; flex: none; }\n.sl-switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: calc(var(--radius) * 0.6); background: rgb(var(--edge)); transition: transform 0.2s cubic-bezier(.3,1.4,.5,1); }\n.sl-switch[aria-checked=\"true\"] { background: var(--accent); }\n.sl-switch[aria-checked=\"true\"] .knob { transform: translateX(20px); background: var(--accent-ink); }\n.sl-toggle { font-family: var(--mono); font-size: 0.8rem; padding: 0.45rem 0.7rem; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); color: var(--ink-dim); cursor: pointer; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-toggle[aria-pressed=\"true\"] { background: var(--accent); color: var(--accent-ink); }\n.sl-toggle-group { display: inline-flex; gap: 0; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-toggle-group button { font-family: var(--mono); font-size: 0.8rem; padding: 0.45rem 0.7rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; display: grid; place-items: center; }\n.sl-toggle-group button:first-child { border-left: none; }\n.sl-toggle-group button[aria-pressed=\"true\"] { background: var(--accent); color: var(--accent-ink); }\n\n/* ============================================================\n   SLIDER / PROGRESS\n   ============================================================ */\n.sl-slider { width: 100%; height: 26px; display: flex; align-items: center; }\n.sl-slider .trk { flex: 1; height: 8px; border-radius: var(--radius); border: 2px solid rgb(var(--edge)); position: relative; background: rgba(var(--glass-tint),0.06); cursor: pointer; }\n.sl-slider .fl { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }\n.sl-slider .th { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: var(--radius); background: rgb(var(--edge)); box-shadow: 2px 2px 0 var(--hard-shadow); }\n.sl-progress { width: 100%; height: 14px; border: 2px solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }\n.sl-progress > span { display: block; height: 100%; background: var(--accent); background-image: linear-gradient(135deg, rgba(255,255,255,0.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 75%, transparent 75%); background-size: 16px 16px; transition: width 0.4s; }\n\n/* ============================================================\n   SELECT / DROPDOWN / COMBOBOX / COMMAND\n   ============================================================ */\n.sl-pop-wrap { position: relative; }\n.sl-trigger {\n  font-family: var(--mono); font-size: 0.82rem; color: var(--ink); cursor: pointer;\n  padding: 0.55rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));\n  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));\n  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\n  box-shadow: 2px 2px 0 0 var(--hard-shadow); display: inline-flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-width: 160px;\n}\n.sl-trigger .chev { transition: transform 0.2s; color: var(--ink-dim); }\n.sl-trigger[aria-expanded=\"true\"] .chev { transform: rotate(180deg); }\n.sl-menu {\n  position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; z-index: 30;\n  border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius);\n  background: var(--bg-2);\n  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);\n  box-shadow: 6px 6px 0 0 var(--hard-shadow); padding: 0.35rem;\n  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top left; pointer-events: none;\n  transition: opacity 0.15s, transform 0.15s;\n}\n.sl-menu.open { opacity: 1; transform: none; pointer-events: auto; }\n/* each .glass cell is its own stacking context (backdrop-filter), so an open\n   menu would otherwise be painted under later sibling cells — lift the host */\n.kit-cell:has(.sl-menu.open),\n.kit-cell:has(.sl-trigger[aria-expanded=\"true\"]),\n.kit-cell:has([data-pop][aria-expanded=\"true\"]) { z-index: 40; }\n.sl-menu .item { font-family: var(--mono); font-size: 0.8rem; padding: 0.5rem 0.6rem; border-radius: calc(var(--radius) * 0.6); color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 0.55rem; }\n.sl-menu .item:hover, .sl-menu .item.active { background: var(--accent); color: var(--accent-ink); }\n.sl-menu .item .k { margin-left: auto; font-size: 0.7rem; opacity: 0.6; }\n.sl-menu .sep { height: 1px; background: rgba(var(--edge),0.2); margin: 0.3rem 0; }\n.sl-menu .lbl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); padding: 0.4rem 0.6rem 0.2rem; }\n.sl-cmd-search { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); width: 100%; padding: 0.5rem 0.6rem; border: none; border-bottom: 1.5px solid rgba(var(--edge),0.3); background: none; outline: none; margin-bottom: 0.3rem; }\n.sl-cmd-search::placeholder { color: var(--ink-dim); }\n\n/* ============================================================\n   TABS\n   ============================================================ */\n.sl-tabs .tablist { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-tabs .tablist button { font-family: var(--mono); font-size: 0.78rem; padding: 0.5rem 0.9rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; }\n.sl-tabs .tablist button:first-child { border-left: none; }\n.sl-tabs .tablist button[aria-selected=\"true\"] { background: var(--accent); color: var(--accent-ink); }\n.sl-tabs .panel { display: none; padding-top: 0.9rem; font-size: 0.88rem; color: var(--ink-dim); }\n.sl-tabs .panel.show { display: block; }\n\n/* ============================================================\n   ACCORDION\n   ============================================================ */\n.sl-acc-item { border-bottom: 1px solid rgba(var(--edge),0.18); }\n.sl-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; cursor: pointer; font-weight: 700; font-size: 0.92rem; font-family: var(--display); }\n.sl-acc-head .pm { width: 16px; height: 16px; position: relative; flex: none; }\n.sl-acc-head .pm::before, .sl-acc-head .pm::after { content: \"\"; position: absolute; background: var(--accent); transition: transform 0.2s; }\n.sl-acc-head .pm::before { left: 0; right: 0; top: 7px; height: 2px; }\n.sl-acc-head .pm::after { top: 0; bottom: 0; left: 7px; width: 2px; }\n.sl-acc-item.open .pm::after { transform: scaleY(0); }\n.sl-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }\n.sl-acc-body > p { padding: 0 0 0.9rem; margin: 0; font-size: 0.85rem; color: var(--ink-dim); }\n\n/* ============================================================\n   AVATAR\n   ============================================================ */\n.sl-ava { width: 40px; height: 40px; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge)); overflow: hidden; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; box-shadow: 2px 2px 0 0 var(--hard-shadow); background: var(--accent); color: var(--accent-ink); flex: none; }\n.sl-ava img { width: 100%; height: 100%; object-fit: cover; }\n.sl-ava-group { display: flex; }\n.sl-ava-group .sl-ava { margin-left: -10px; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-ava-group .sl-ava:first-child { margin-left: 0; }\n\n/* ============================================================\n   ALERT\n   ============================================================ */\n.sl-alert { display: flex; gap: 0.8rem; padding: 0.9rem 1rem; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); border-left-width: 6px; background: rgba(var(--glass-tint),0.06); }\n.sl-alert.destructive { border-left-color: var(--neg); }\n.sl-alert .ai { flex: none; width: 20px; height: 20px; color: var(--accent); }\n.sl-alert.destructive .ai { color: var(--ink); }\n.sl-alert .at { font-weight: 700; font-size: 0.9rem; margin: 0 0 0.2rem; }\n.sl-alert .ad { font-size: 0.82rem; color: var(--ink-dim); margin: 0; }\n\n/* ============================================================\n   TABLE\n   ============================================================ */\n.sl-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }\n.sl-table th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); text-align: left; padding: 0.55rem 0.7rem; border-bottom: 2px solid rgb(var(--edge)); }\n.sl-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid rgba(var(--edge),0.15); }\n.sl-table tr:last-child td { border-bottom: none; }\n.sl-table tbody tr:hover { background: rgba(var(--glass-tint),0.05); }\n\n/* ============================================================\n   SKELETON\n   ============================================================ */\n.sl-skel { background: linear-gradient(90deg, rgba(var(--glass-tint),0.06) 25%, rgba(var(--glass-tint),0.16) 37%, rgba(var(--glass-tint),0.06) 63%); background-size: 400% 100%; animation: sl-shimmer 1.4s ease infinite; border-radius: var(--radius); border: 1px solid rgba(var(--edge),0.18); }\n@keyframes sl-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }\n@media (prefers-reduced-motion: reduce) { .sl-skel { animation: none; } }\n\n/* ============================================================\n   TOOLTIP / HOVER CARD\n   ============================================================ */\n.sl-tip-wrap { position: relative; display: inline-flex; }\n.sl-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; font-family: var(--mono); font-size: 0.72rem; padding: 0.4rem 0.6rem; background: var(--bg-2); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 3px 3px 0 0 var(--hard-shadow); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 20; }\n.sl-tip-wrap:hover .sl-tip { opacity: 1; transform: translateX(-50%); }\n.sl-hover-card { position: absolute; top: calc(100% + 8px); left: 0; width: 240px; padding: 1rem; background: var(--bg-2); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 6px 6px 0 0 var(--hard-shadow); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s; z-index: 20; }\n.sl-tip-wrap:hover .sl-hover-card { opacity: 1; transform: none; }\n\n/* ============================================================\n   SEPARATOR\n   ============================================================ */\n.sl-sep { height: 2px; background: rgba(var(--edge),0.25); border: none; width: 100%; }\n.sl-sep.v { width: 2px; height: 28px; }\n\n/* ============================================================\n   BREADCRUMB / PAGINATION / MENUBAR\n   ============================================================ */\n.sl-crumb { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.78rem; flex-wrap: wrap; }\n.sl-crumb a { color: var(--ink-dim); text-decoration: none; }\n.sl-crumb a:hover { color: var(--ink); }\n.sl-crumb .sl-cur { color: var(--accent); }\n.sl-crumb .sl-sl { color: var(--ink-dim); opacity: 0.5; }\n.sl-page { display: flex; gap: 0.4rem; }\n.sl-page button { width: 36px; height: 36px; font-family: var(--mono); font-size: 0.8rem; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-page button.cur { background: var(--accent); color: var(--accent-ink); }\n.sl-page button[disabled] { opacity: 0.35; pointer-events: none; }\n.sl-menubar { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 2px 2px 0 0 var(--hard-shadow); overflow: hidden; }\n.sl-menubar > button { font-family: var(--mono); font-size: 0.78rem; padding: 0.45rem 0.8rem; border: none; border-left: 1px solid rgba(var(--edge),0.25); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; }\n.sl-menubar > button:first-child { border-left: none; }\n.sl-menubar > button:hover { background: var(--accent); color: var(--accent-ink); }\n\n/* ============================================================\n   CALENDAR / DATE\n   ============================================================ */\n.sl-cal { width: 100%; }\n.sl-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; font-family: var(--mono); font-size: 0.82rem; }\n.sl-cal-head button { width: 28px; height: 28px; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); color: var(--ink); cursor: pointer; }\n.sl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }\n.sl-cal-grid .dow { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-dim); text-align: center; padding-bottom: 0.3rem; text-transform: uppercase; }\n.sl-cal-grid .day { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 0.74rem; border-radius: var(--radius); cursor: pointer; color: var(--ink); }\n.sl-cal-grid .day:hover { background: rgba(var(--glass-tint),0.12); }\n.sl-cal-grid .day.muted { color: var(--ink-dim); opacity: 0.4; }\n.sl-cal-grid .day.sel { background: var(--accent); color: var(--accent-ink); border: 2px solid rgb(var(--edge)); }\n\n/* ============================================================\n   ASPECT RATIO / CARD\n   ============================================================ */\n.sl-ratio { width: 100%; aspect-ratio: 16 / 9; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(var(--glass-tint),0.06)); display: grid; place-items: center; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }\n.sl-card-demo { border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 4px 4px 0 0 var(--hard-shadow); overflow: hidden; background: rgba(var(--glass-tint),0.05); }\n.sl-card-demo .cd-media { aspect-ratio: 16/8; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), rgba(var(--glass-tint),0.1)); border-bottom: var(--border-w) solid rgb(var(--edge)); }\n.sl-card-demo .cd-body { padding: 0.9rem 1rem; }\n.sl-card-demo .cd-body h4 { margin: 0 0 0.3rem; font-size: 1rem; }\n.sl-card-demo .cd-body p { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--ink-dim); }\n\n/* ============================================================\n   OVERLAYS — dialog / sheet / popover backdrop\n   ============================================================ */\n.sl-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }\n.sl-overlay.open { opacity: 1; pointer-events: auto; }\n.sl-dialog { width: min(440px, 92vw); padding: 1.6rem; background: var(--bg-2); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 10px 10px 0 0 var(--hard-shadow); transform: translateY(10px) scale(0.97); transition: transform 0.22s cubic-bezier(.2,.9,.2,1); }\n.sl-overlay.open .sl-dialog { transform: none; }\n.sl-dialog h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }\n.sl-dialog p { color: var(--ink-dim); font-size: 0.9rem; margin: 0 0 1.3rem; }\n.sl-dialog .actions { display: flex; gap: 0.7rem; justify-content: flex-end; }\n.sl-sheet-overlay { justify-items: end; place-items: stretch; }\n.sl-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 90vw); padding: 1.6rem; background: var(--bg-2); border-left: var(--border-w) solid rgb(var(--edge)); box-shadow: -10px 0 0 0 rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.28s cubic-bezier(.2,.9,.2,1); }\n.sl-sheet-overlay.open .sl-sheet { transform: none; }\n.sl-sheet h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }\n.sl-sheet p { color: var(--ink-dim); font-size: 0.86rem; }\n\n/* ============================================================\n   TOAST\n   ============================================================ */\n.sl-toast-stack { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 300; width: 300px; height: 0; }\n.sl-toast {\n  position: absolute; bottom: 0; right: 0; width: 100%; box-sizing: border-box;\n  padding: 0.85rem 1rem; background: var(--bg-2);\n  border: var(--border-w) solid rgb(var(--edge)); border-left: 6px solid var(--accent);\n  border-radius: var(--radius); box-shadow: 5px 5px 0 0 var(--hard-shadow);\n  display: flex; gap: 0.7rem; align-items: flex-start;\n  --y: 0px; --s: 1;\n  transform: translateX(125%);\n  transform-origin: bottom right;\n  transition: transform 0.4s cubic-bezier(.2,.9,.2,1), opacity 0.3s ease;\n}\n.sl-toast.show { transform: translateY(var(--y)) scale(var(--s)); }\n.sl-toast .tt { font-weight: 700; font-size: 0.86rem; margin: 0 0 0.15rem; }\n.sl-toast .td { font-size: 0.78rem; color: var(--ink-dim); margin: 0; }\n\n/* ============================================================\n   SHOWCASE — real products built on the system\n   ============================================================ */\n.show-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; padding: 1.4rem; align-items: center; }\n@media (max-width: 760px) { .show-feature { grid-template-columns: 1fr; } }\n.show-browser { border: var(--border-w) solid rgb(var(--edge)); box-shadow: 6px 6px 0 0 var(--hard-shadow); overflow: hidden; background: var(--bg-2); }\n.browser-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-bottom: var(--border-w) solid rgb(var(--edge)); background: rgba(var(--glass-tint),0.06); }\n.browser-bar .tl { width: 11px; height: 11px; border: 1.5px solid rgb(var(--edge)); background: rgba(var(--glass-tint),0.15); flex: none; }\n.browser-bar .url { margin-left: 0.6rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); padding: 0.2rem 0.7rem; border: 1.5px solid rgba(var(--edge),0.4); flex: 1; background: rgba(var(--glass-tint),0.04); }\n.browser-shot { display: block; width: 100%; aspect-ratio: 16 / 10; }\n.show-meta { display: flex; flex-direction: column; gap: 1rem; }\n.show-name { font-weight: 700; }\n\n/* ============================================================\n   SITE PATTERNS — distilled from production SL consumers\n   ============================================================ */\n.sl-attribution {\n  font-family: var(--mono);\n  font-size: 0.72rem;\n  color: var(--ink-dim);\n}\n.sl-attribution a {\n  color: var(--ink);\n  text-decoration: none;\n  border-bottom: 1px solid var(--accent);\n}\n.sl-attribution a:hover { color: var(--accent); }\n\n.sl-timeline {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.sl-timeline-item {\n  position: relative;\n  display: grid;\n  grid-template-columns: 18px minmax(0, 1fr);\n  gap: 0.85rem;\n  padding: 0 0 1.15rem;\n}\n.sl-timeline-item:not(:last-child)::before {\n  content: \"\";\n  position: absolute;\n  left: 7px;\n  top: 16px;\n  bottom: 0;\n  width: 2px;\n  background: rgb(var(--edge));\n}\n.sl-timeline-marker {\n  position: relative;\n  z-index: 1;\n  width: 16px;\n  height: 16px;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-timeline-copy { min-width: 0; }\n.sl-timeline-date {\n  display: block;\n  margin-bottom: 0.2rem;\n  font-family: var(--mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n}\n.sl-timeline-title { margin: 0; font-size: 1rem; }\n.sl-timeline-body { margin-top: 0.25rem; color: var(--ink-dim); font-size: 0.86rem; line-height: 1.45; }\n\n.sl-stepper {\n  display: grid;\n  grid-template-columns: repeat(var(--step-count, 3), minmax(0, 1fr));\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.sl-step {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  min-width: 0;\n}\n.sl-step:not(:last-child)::after {\n  content: \"\";\n  position: absolute;\n  left: 30px;\n  right: 6px;\n  top: 13px;\n  height: 2px;\n  background: rgb(var(--edge));\n}\n.sl-step-marker {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  flex: none;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n  color: var(--ink);\n  font-family: var(--mono);\n  font-size: 0.68rem;\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-step-marker svg { width: 14px; height: 14px; }\n.sl-step[data-status=\"complete\"] .sl-step-marker,\n.sl-step[data-status=\"current\"] .sl-step-marker { background: var(--accent); color: var(--accent-ink); }\n.sl-step-copy { display: flex; flex-direction: column; min-width: 0; padding-top: 0.1rem; }\n.sl-step-copy strong { font-size: 0.78rem; }\n.sl-step-copy > span { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-dim); }\n@media (max-width: 640px) {\n  .sl-stepper { grid-template-columns: 1fr; gap: 0.75rem; }\n  .sl-step:not(:last-child)::after { left: 13px; right: auto; top: 29px; bottom: -12px; width: 2px; height: auto; }\n}\n\n.sl-filter-toolbar {\n  display: flex;\n  align-items: end;\n  flex-wrap: wrap;\n  gap: 0.7rem;\n  padding: 0.8rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  box-shadow: 4px 4px 0 0 var(--hard-shadow);\n}\n.sl-filter-group { display: flex; align-items: end; flex-wrap: wrap; gap: 0.55rem; min-width: 0; }\n.sl-filter-summary { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); white-space: nowrap; }\n@media (max-width: 640px) { .sl-filter-summary { width: 100%; margin-left: 0; } }\n\n/* Field-sourced from the recurring command/intake surfaces in Dropship and Observatory. */\n.sl-omnibar {\n  display: grid;\n  gap: 0.45rem;\n  width: 100%;\n  padding: 0.5rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  backdrop-filter: blur(var(--glass-blur)) saturate(150%);\n  box-shadow: 5px 5px 0 0 var(--hard-shadow);\n}\n.sl-omnibar-attachments { display: flex; flex-wrap: wrap; gap: 0.35rem; }\n.sl-omnibar-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.25rem 0.4rem;\n  border: 1.5px solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.08);\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  color: var(--ink-dim);\n}\n.sl-omnibar-attachment button {\n  display: grid;\n  place-items: center;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.sl-omnibar-attachment svg { width: 12px; height: 12px; }\n.sl-omnibar-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }\n.sl-omnibar-input {\n  flex: 1;\n  min-width: 0;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--ink);\n  font: 0.84rem var(--body);\n}\n.sl-omnibar-input::placeholder { color: var(--ink-dim); }\n.sl-omnibar-icon,\n.sl-omnibar-submit {\n  width: 34px;\n  height: 34px;\n  flex: none;\n  display: grid;\n  place-items: center;\n  border: var(--border-w) solid rgb(var(--edge));\n  color: var(--ink);\n  background: rgb(var(--glass-tint) / 0.06);\n  cursor: pointer;\n}\n.sl-omnibar-icon svg,\n.sl-omnibar-submit svg { width: 15px; height: 15px; }\n.sl-omnibar-submit { background: var(--accent); color: var(--accent-ink); box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-omnibar-submit:active { transform: translate(2px, 2px); box-shadow: none; }\n.sl-omnibar-status {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--accent);\n}\n@media (max-width: 560px) { .sl-omnibar-status { display: none; } }\n\n/* Field-sourced from the edge inspection surfaces in Cosmograph and Dropship. */\n.sl-detail-panel {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  backdrop-filter: blur(var(--glass-blur)) saturate(150%);\n  box-shadow: 5px 5px 0 0 var(--hard-shadow);\n}\n.sl-detail-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.8rem;\n  padding: 0.75rem 0.85rem;\n  border-bottom: var(--border-w) solid rgb(var(--edge));\n}\n.sl-detail-panel-eyebrow {\n  display: block;\n  margin-bottom: 0.15rem;\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--accent);\n}\n.sl-detail-panel-title {\n  margin: 0;\n  font-family: var(--display);\n  font-size: 1rem;\n  line-height: 1.1;\n}\n.sl-detail-panel-body {\n  padding: 0.85rem;\n  color: var(--ink-dim);\n  font-size: 0.82rem;\n  line-height: 1.45;\n}\n.sl-detail-panel-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  padding: 0.7rem 0.85rem;\n  border-top: var(--border-w) solid rgb(var(--edge));\n}\n\n.sl-template { display: flex; min-height: 100%; flex-direction: column; gap: 1rem; }\n.sl-template > .sl-site-content { display: flex; flex: 1; flex-direction: column; gap: 1rem; }\n.sl-template-footer {\n  margin-top: auto;\n  padding-block: 1rem;\n  border-top: var(--border-w) solid rgb(var(--edge));\n}\n.sl-template-guided > .sl-site-content {\n  display: grid;\n  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);\n  align-items: start;\n}\n.sl-template-immersive { min-height: 100dvh; }\n.sl-template-immersive > main { position: relative; flex: 1; overflow: hidden; }\n@media (max-width: 760px) { .sl-template-guided > .sl-site-content { grid-template-columns: 1fr; } }\n\n/* Field-sourced from recurring social-proof cards on Interspace and Bumblebee. */\n.sl-testimonial {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 1rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.08);\n  box-shadow: 4px 4px 0 0 var(--hard-shadow);\n}\n.sl-testimonial-source {\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  font-weight: 700;\n  letter-spacing: 0.09em;\n  text-transform: uppercase;\n  color: var(--accent);\n}\n.sl-testimonial-quote {\n  margin: 0;\n  font-family: var(--body);\n  font-size: 0.9rem;\n  line-height: 1.55;\n  color: var(--ink);\n}\n.sl-testimonial-author {\n  padding-top: 0.65rem;\n  border-top: 1px solid rgb(var(--edge) / 0.3);\n  font-family: var(--display);\n  font-size: 0.78rem;\n  font-weight: 700;\n}\n.sl-testimonial-meta {\n  display: block;\n  margin-top: 0.15rem;\n  font-family: var(--mono);\n  font-size: 0.6rem;\n  font-weight: 400;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n}\n\n/* Field-sourced from the recurring trust and portfolio identity walls. */\n.sl-logo-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\n  gap: 0.55rem;\n}\n.sl-logo-tile {\n  display: grid;\n  min-height: 86px;\n  place-items: center;\n  align-content: center;\n  gap: 0.45rem;\n  padding: 0.65rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.08);\n  box-shadow: 3px 3px 0 0 var(--hard-shadow);\n}\n.sl-logo-mark {\n  display: grid;\n  width: 2.5rem;\n  height: 2.5rem;\n  place-items: center;\n  background: var(--accent);\n  color: var(--accent-ink);\n  font-family: var(--display);\n  font-weight: 800;\n}\n.sl-logo-label {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n}\n\n/* Field-sourced from recurring update, signal, and changelog streams. */\n.sl-activity-feed {\n  display: grid;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.sl-activity-item {\n  position: relative;\n  display: grid;\n  grid-template-columns: 2.25rem minmax(0, 1fr);\n  gap: 0.75rem;\n  padding-bottom: 0.9rem;\n}\n.sl-activity-item:not(:last-child)::before {\n  content: \"\";\n  position: absolute;\n  left: calc(1.125rem - 1px);\n  top: 2.1rem;\n  bottom: 0;\n  width: 2px;\n  background: rgb(var(--edge));\n}\n.sl-activity-marker {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  width: 2.25rem;\n  height: 2.25rem;\n  place-items: center;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  color: var(--accent-ink);\n  font-family: var(--mono);\n  font-size: 0.6rem;\n  font-weight: 700;\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-activity-content {\n  min-width: 0;\n  padding: 0.7rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.07);\n}\n.sl-activity-header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.7rem;\n}\n.sl-activity-title {\n  margin: 0;\n  font: 700 0.82rem/1.25 var(--display);\n}\n.sl-activity-meta {\n  flex: none;\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  color: var(--ink-dim);\n  text-transform: uppercase;\n}\n.sl-activity-description {\n  margin: 0.35rem 0 0;\n  color: var(--ink-dim);\n  font-size: 0.76rem;\n  line-height: 1.45;\n}\n@media (max-width: 520px) {\n  .sl-activity-header {\n    align-items: flex-start;\n    flex-direction: column;\n    gap: 0.2rem;\n  }\n}\n\n/* Field-sourced from recurring upload and evidence-intake flows. */\n.sl-dropzone {\n  display: grid;\n  min-height: 190px;\n  place-items: center;\n  align-content: center;\n  gap: 0.45rem;\n  padding: 1.25rem;\n  border: var(--border-w) dashed rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.06);\n  text-align: center;\n  cursor: pointer;\n  transition:\n    transform 140ms ease,\n    box-shadow 140ms ease,\n    background 140ms ease;\n  box-shadow: 4px 4px 0 0 var(--hard-shadow);\n}\n.sl-dropzone:hover,\n.sl-dropzone:focus-within,\n.sl-dropzone[data-active] {\n  transform: translate(1px, 1px);\n  background: rgb(var(--glass-tint) / 0.11);\n  box-shadow: 6px 6px 0 0 var(--hard-shadow);\n}\n.sl-dropzone-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n.sl-dropzone-icon {\n  display: grid;\n  width: 2.6rem;\n  height: 2.6rem;\n  place-items: center;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  color: var(--accent-ink);\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-dropzone-icon svg {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.sl-dropzone-title {\n  font-family: var(--display);\n  font-size: 0.9rem;\n  font-weight: 800;\n}\n.sl-dropzone-description {\n  max-width: 32rem;\n  color: var(--ink-dim);\n  font-size: 0.76rem;\n  line-height: 1.45;\n}\n.sl-dropzone-meta {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--accent);\n}\n\n/* Field-sourced from packages, plan displays, and subscription cards. */\n.sl-pricing-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 0.8rem;\n}\n.sl-pricing-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.8rem;\n  padding: 1rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.07);\n  box-shadow: 5px 5px 0 0 var(--hard-shadow);\n}\n.sl-pricing-card[data-featured] {\n  border-top: 0.45rem solid var(--accent);\n  padding-top: 0.7rem;\n}\n.sl-pricing-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.7rem;\n}\n.sl-pricing-name {\n  margin: 0;\n  font: 800 1.05rem/1.15 var(--display);\n}\n.sl-pricing-price {\n  display: flex;\n  align-items: baseline;\n  gap: 0.35rem;\n}\n.sl-pricing-amount {\n  font: 800 clamp(1.8rem, 4vw, 2.55rem)/1 var(--display);\n  letter-spacing: -0.04em;\n}\n.sl-pricing-cadence {\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  color: var(--ink-dim);\n  text-transform: uppercase;\n}\n.sl-pricing-description {\n  margin: 0;\n  color: var(--ink-dim);\n  font-size: 0.78rem;\n  line-height: 1.5;\n}\n.sl-pricing-features {\n  display: grid;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.sl-pricing-feature {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.45rem;\n  font-size: 0.76rem;\n  line-height: 1.4;\n}\n.sl-pricing-feature svg {\n  width: 0.9rem;\n  height: 0.9rem;\n  flex: none;\n  margin-top: 0.08rem;\n  color: var(--accent);\n}\n.sl-pricing-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-top: auto;\n  padding-top: 0.2rem;\n}\n",
+      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — component KIT\n   A shadcn-complete library expressed in the design language:\n   rigid containers (sharp edges, flat offset shadows, real\n   borders) holding flat scientific surfaces, with one accent\n   carrying selection and liquid motion between states.\n   ============================================================ */\n\n/* ---- gallery scaffold ---- */\n.kit-groups { display: flex; flex-direction: column; gap: 2.2rem; }\n.kit-group > .kit-group-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1rem; }\n.kit-group-head .kg-name { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }\n.kit-group-head .kg-rule { flex: 1; height: 2px; background: rgba(var(--edge),0.25); }\n.kit-group-head .kg-count { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); }\n\n.kit-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }\n.kit-cell { padding: 1.2rem 1.25rem; display: flex; flex-direction: column; gap: 0.95rem; grid-column: span 4; min-width: 0; }\n.kit-cell.w6 { grid-column: span 6; }\n.kit-cell.w8 { grid-column: span 8; }\n.kit-cell.w12 { grid-column: span 12; }\n@media (max-width: 900px) { .kit-cell, .kit-cell.w6, .kit-cell.w8 { grid-column: span 6; } .kit-cell.w12 { grid-column: span 12; } }\n@media (max-width: 600px) { .kit-cell, .kit-cell.w6, .kit-cell.w8, .kit-cell.w12 { grid-column: span 12; } }\n.kit-cap { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); display: flex; align-items: center; gap: 0.5rem; }\n.kit-cap::before { content: \"\"; width: 7px; height: 7px; background: var(--accent); flex: none; }\n.kit-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }\n.kit-col { display: flex; flex-direction: column; gap: 0.7rem; }\n.kit-demo { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }\n\n/* glass + flat helpers reused locally */\n.sl-glass-fill {\n  background: var(--bg-2);\n}\n\n/* ============================================================\n   BUTTONS — full variant matrix\n   ============================================================ */\n.sl-btn {\n  font-family: var(--display); font-weight: 700; font-size: 0.85rem; line-height: 1;\n  padding: 0.6rem 1rem; border-radius: var(--radius); cursor: pointer;\n  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;\n  border: var(--border-w) solid rgb(var(--edge)); color: var(--ink); text-decoration: none;\n  transition: transform 0.12s cubic-bezier(.2,.8,.2,1), box-shadow 0.12s; white-space: nowrap;\n}\n.sl-btn.default { background: var(--accent); color: var(--accent-ink); box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.secondary { background: var(--bg-2); box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.outline { background: transparent; box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-dim); }\n.sl-btn.ghost:hover { color: var(--ink); background: rgba(var(--glass-tint),0.08); transform: none; }\n.sl-btn.destructive { background: var(--neg); color: var(--neg-ink); box-shadow: 4px 4px 0 0 var(--hard-shadow); }\n.sl-btn.link { border-color: transparent; box-shadow: none; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 0.6rem 0.2rem; }\n.sl-btn.link:hover { transform: none; }\n.sl-btn.icon { padding: 0.55rem; width: 38px; height: 38px; }\n.sl-btn.sm { padding: 0.4rem 0.7rem; font-size: 0.76rem; }\n.sl-btn.lg { padding: 0.8rem 1.3rem; font-size: 0.95rem; }\n.sl-btn:not(.ghost):not(.link):hover, .sl-btn:not(.ghost):not(.link):active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--hard-shadow); }\n.sl-btn[disabled] { opacity: 0.4; pointer-events: none; }\n.sl-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sl-spin 0.7s linear infinite; }\n@keyframes sl-spin { to { transform: rotate(360deg); } }\n\n/* ============================================================\n   BADGE\n   ============================================================ */\n.sl-badge { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.28rem 0.55rem; border-radius: var(--radius); border: 1.5px solid rgb(var(--edge)); display: inline-flex; align-items: center; gap: 0.35rem; }\n.sl-badge.default { background: var(--accent); color: var(--accent-ink); }\n.sl-badge.secondary { background: rgba(var(--glass-tint),0.1); color: var(--ink); }\n.sl-badge.outline { background: transparent; color: var(--ink-dim); }\n.sl-badge.destructive { background: var(--neg); color: var(--neg-ink); border-color: rgb(var(--edge)); }\n.sl-badge .ico { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }\n\n/* ============================================================\n   INPUT / LABEL / TEXTAREA / OTP\n   ============================================================ */\n.sl-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }\n.sl-input, .sl-textarea {\n  font-family: var(--mono); font-size: 0.82rem; color: var(--ink); width: 100%;\n  padding: 0.6rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n  box-shadow: none; outline: none;\n}\n.sl-textarea { min-height: 76px; resize: vertical; line-height: 1.5; }\n.sl-input::placeholder, .sl-textarea::placeholder { color: var(--ink-dim); }\n.sl-input:focus, .sl-textarea:focus { box-shadow: 3px 3px 0 0 var(--accent); }\n.sl-otp { display: flex; gap: 0.5rem; }\n.sl-otp input { width: 42px; height: 48px; text-align: center; font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--ink); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); outline: none; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-otp input:focus { box-shadow: 2px 2px 0 0 var(--accent); }\n\n/* ============================================================\n   CHECKBOX / RADIO / SWITCH / TOGGLE\n   ============================================================ */\n.sl-check, .sl-radio-item { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.85rem; }\n.sl-box { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; transition: background 0.15s; }\n.sl-check[aria-checked=\"true\"] .sl-box { background: var(--accent); }\n.sl-box .tick { width: 11px; height: 11px; color: var(--accent-ink); opacity: 0; }\n.sl-check[aria-checked=\"true\"] .sl-box .tick { opacity: 1; }\n.sl-radio { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: 50%; background: var(--bg-2); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; overflow: hidden; transition: background var(--motion-fast) var(--ease-liquid); }\n.sl-radio .dot { width: 100%; height: 100%; border-radius: inherit; background: var(--accent); opacity: 0; }\n.sl-radio-item[aria-checked=\"true\"] .sl-radio .dot { opacity: 1; }\n.sl-switch { width: 46px; height: 26px; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer; background: rgba(var(--glass-tint),0.1); box-shadow: 2px 2px 0 0 var(--hard-shadow); transition: background 0.2s; flex: none; }\n.sl-switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: calc(var(--radius) * 0.6); background: rgb(var(--edge)); transition: transform 0.2s cubic-bezier(.3,1.4,.5,1); }\n.sl-switch[aria-checked=\"true\"] { background: var(--accent); }\n.sl-switch[aria-checked=\"true\"] .knob { transform: translateX(20px); background: var(--accent-ink); }\n.sl-toggle { font-family: var(--mono); font-size: 0.8rem; padding: 0.45rem 0.7rem; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); color: var(--ink-dim); cursor: pointer; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-toggle[aria-pressed=\"true\"] { background: var(--accent); color: var(--accent-ink); }\n.sl-toggle-group { display: inline-flex; gap: 0; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-toggle-group button { font-family: var(--mono); font-size: 0.8rem; padding: 0.45rem 0.7rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; display: grid; place-items: center; }\n.sl-toggle-group button:first-child { border-left: none; }\n.sl-toggle-group button[aria-pressed=\"true\"] { background: var(--accent); color: var(--accent-ink); }\n.sl-toggle-group.is-liquid { position: relative; isolation: isolate; }\n.sl-toggle-group.is-liquid .sl-toggle-marker {\n  position: absolute; inset-block: 0; left: 0; z-index: 0;\n  width: calc(100% / var(--toggle-count));\n  transform: translateX(calc(var(--toggle-index) * 100%));\n  background: var(--accent);\n  transition: transform var(--motion) var(--ease-liquid-over), width var(--motion) var(--ease-liquid);\n  pointer-events: none;\n}\n.sl-toggle-group.is-liquid button { position: relative; z-index: 1; background: transparent; transition: color var(--motion-fast) var(--ease-liquid); }\n.sl-toggle-group.is-liquid button[aria-pressed=\"true\"] { background: transparent; color: var(--accent-ink); }\n\n/* ============================================================\n   SLIDER / PROGRESS\n   ============================================================ */\n.sl-slider { width: 100%; height: 26px; display: flex; align-items: center; }\n.sl-slider .trk { flex: 1; height: 8px; border-radius: var(--radius); border: 2px solid rgb(var(--edge)); position: relative; background: rgba(var(--glass-tint),0.06); cursor: pointer; }\n.sl-slider .fl { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }\n.sl-slider .th { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: var(--radius); background: rgb(var(--edge)); box-shadow: 2px 2px 0 var(--hard-shadow); }\n.sl-progress { width: 100%; height: 14px; border: 2px solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }\n.sl-progress > span { display: block; height: 100%; background: var(--accent); background-image: linear-gradient(135deg, rgba(255,255,255,0.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 75%, transparent 75%); background-size: 16px 16px; transition: width 0.4s; }\n\n/* ============================================================\n   SELECT / DROPDOWN / COMBOBOX / COMMAND\n   ============================================================ */\n.sl-pop-wrap { position: relative; }\n.sl-trigger {\n  font-family: var(--mono); font-size: 0.82rem; color: var(--ink); cursor: pointer;\n  padding: 0.55rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n  box-shadow: 2px 2px 0 0 var(--hard-shadow); display: inline-flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-width: 160px;\n}\n.sl-trigger .chev { transition: transform 0.2s; color: var(--ink-dim); }\n.sl-trigger[aria-expanded=\"true\"] .chev { transform: rotate(180deg); }\n.sl-menu {\n  position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; z-index: 30;\n  border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius);\n  background: var(--bg-2);\n  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);\n  box-shadow: 6px 6px 0 0 var(--hard-shadow); padding: 0.35rem;\n  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top left; pointer-events: none;\n  transition: opacity 0.15s, transform 0.15s;\n}\n.sl-menu.open { opacity: 1; transform: none; pointer-events: auto; }\n/* each .glass cell is its own stacking context (backdrop-filter), so an open\n   menu would otherwise be painted under later sibling cells — lift the host */\n.kit-cell:has(.sl-menu.open),\n.kit-cell:has(.sl-trigger[aria-expanded=\"true\"]),\n.kit-cell:has([data-pop][aria-expanded=\"true\"]) { z-index: 40; }\n.sl-menu .item { font-family: var(--mono); font-size: 0.8rem; padding: 0.5rem 0.6rem; border-radius: calc(var(--radius) * 0.6); color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 0.55rem; }\n.sl-menu .item:hover, .sl-menu .item.active { background: var(--accent); color: var(--accent-ink); }\n.sl-menu .item .k { margin-left: auto; font-size: 0.7rem; opacity: 0.6; }\n.sl-menu .sep { height: 1px; background: rgba(var(--edge),0.2); margin: 0.3rem 0; }\n.sl-menu .lbl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); padding: 0.4rem 0.6rem 0.2rem; }\n.sl-cmd-search { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); width: 100%; padding: 0.5rem 0.6rem; border: none; border-bottom: 1.5px solid rgba(var(--edge),0.3); background: none; outline: none; margin-bottom: 0.3rem; }\n.sl-cmd-search::placeholder { color: var(--ink-dim); }\n\n/* ============================================================\n   TABS\n   ============================================================ */\n.sl-tabs .tablist { position: relative; display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); isolation: isolate; }\n.sl-tabs .tablist button { position: relative; z-index: 1; flex: 1; font-family: var(--body); font-size: 0.78rem; font-weight: 650; padding: 0.5rem 0.9rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: transparent; color: var(--ink-dim); cursor: pointer; transition: color var(--motion-fast) var(--ease-liquid); }\n.sl-tabs .tablist button:first-child { border-left: none; }\n.sl-tabs .tablist button[aria-selected=\"true\"] { background: transparent; color: var(--accent-ink); }\n.sl-tabs .sl-tab-marker {\n  position: absolute; inset-block: 0; left: 0; z-index: 0;\n  width: calc(100% / var(--tab-count));\n  transform: translateX(calc(var(--tab-index) * 100%));\n  background: var(--accent);\n  transition: transform var(--motion) var(--ease-liquid-over), width var(--motion) var(--ease-liquid);\n  pointer-events: none;\n}\n.sl-tabs .panel { display: none; padding-top: 0.9rem; font-size: 0.88rem; color: var(--ink-dim); }\n.sl-tabs .panel.show { display: block; }\n\n/* ============================================================\n   ACCORDION\n   ============================================================ */\n.sl-acc-item { border-bottom: 1px solid rgba(var(--edge),0.18); }\n.sl-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; cursor: pointer; font-weight: 700; font-size: 0.92rem; font-family: var(--display); }\n.sl-acc-head .pm { width: 16px; height: 16px; position: relative; flex: none; }\n.sl-acc-head .pm::before, .sl-acc-head .pm::after { content: \"\"; position: absolute; background: var(--accent); transition: transform 0.2s; }\n.sl-acc-head .pm::before { left: 0; right: 0; top: 7px; height: 2px; }\n.sl-acc-head .pm::after { top: 0; bottom: 0; left: 7px; width: 2px; }\n.sl-acc-item.open .pm::after { transform: scaleY(0); }\n.sl-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }\n.sl-acc-body > p { padding: 0 0 0.9rem; margin: 0; font-size: 0.85rem; color: var(--ink-dim); }\n\n/* ============================================================\n   AVATAR\n   ============================================================ */\n.sl-ava { width: 40px; height: 40px; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge)); overflow: hidden; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; box-shadow: 2px 2px 0 0 var(--hard-shadow); background: var(--accent); color: var(--accent-ink); flex: none; }\n.sl-ava img { width: 100%; height: 100%; object-fit: cover; }\n.sl-ava-group { display: flex; }\n.sl-ava-group .sl-ava { margin-left: -10px; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-ava-group .sl-ava:first-child { margin-left: 0; }\n\n/* ============================================================\n   ALERT\n   ============================================================ */\n.sl-alert { display: flex; gap: 0.8rem; padding: 0.9rem 1rem; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); border-left-width: 6px; background: rgba(var(--glass-tint),0.06); }\n.sl-alert.destructive { border-left-color: var(--neg); }\n.sl-alert .ai { flex: none; width: 20px; height: 20px; color: var(--accent); }\n.sl-alert.destructive .ai { color: var(--ink); }\n.sl-alert .at { font-weight: 700; font-size: 0.9rem; margin: 0 0 0.2rem; }\n.sl-alert .ad { font-size: 0.82rem; color: var(--ink-dim); margin: 0; }\n\n/* ============================================================\n   TABLE\n   ============================================================ */\n.sl-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }\n.sl-table th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); text-align: left; padding: 0.55rem 0.7rem; border-bottom: 2px solid rgb(var(--edge)); }\n.sl-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid rgba(var(--edge),0.15); }\n.sl-table tr:last-child td { border-bottom: none; }\n.sl-table tbody tr:hover { background: rgba(var(--glass-tint),0.05); }\n\n/* ============================================================\n   SKELETON\n   ============================================================ */\n.sl-skel { background: linear-gradient(90deg, rgba(var(--glass-tint),0.06) 25%, rgba(var(--glass-tint),0.16) 37%, rgba(var(--glass-tint),0.06) 63%); background-size: 400% 100%; animation: sl-shimmer 1.4s ease infinite; border-radius: var(--radius); border: 1px solid rgba(var(--edge),0.18); }\n@keyframes sl-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }\n@media (prefers-reduced-motion: reduce) { .sl-skel { animation: none; } }\n\n/* ============================================================\n   TOOLTIP / HOVER CARD\n   ============================================================ */\n.sl-tip-wrap { position: relative; display: inline-flex; }\n.sl-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; font-family: var(--mono); font-size: 0.72rem; padding: 0.4rem 0.6rem; background: var(--bg-2); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 3px 3px 0 0 var(--hard-shadow); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 20; }\n.sl-tip-wrap:hover .sl-tip { opacity: 1; transform: translateX(-50%); }\n.sl-hover-card { position: absolute; top: calc(100% + 8px); left: 0; width: 240px; padding: 1rem; background: var(--bg-2); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 6px 6px 0 0 var(--hard-shadow); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s; z-index: 20; }\n.sl-tip-wrap:hover .sl-hover-card { opacity: 1; transform: none; }\n\n/* ============================================================\n   SEPARATOR\n   ============================================================ */\n.sl-sep { height: 2px; background: rgba(var(--edge),0.25); border: none; width: 100%; }\n.sl-sep.v { width: 2px; height: 28px; }\n\n/* ============================================================\n   BREADCRUMB / PAGINATION / MENUBAR\n   ============================================================ */\n.sl-crumb { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.78rem; flex-wrap: wrap; }\n.sl-crumb a { color: var(--ink-dim); text-decoration: none; }\n.sl-crumb a:hover { color: var(--ink); }\n.sl-crumb .sl-cur { color: var(--accent); }\n.sl-crumb .sl-sl { color: var(--ink-dim); opacity: 0.5; }\n.sl-page { display: flex; gap: 0.4rem; }\n.sl-page button { width: 36px; height: 36px; font-family: var(--mono); font-size: 0.8rem; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-page button.cur { background: var(--accent); color: var(--accent-ink); }\n.sl-page button[disabled] { opacity: 0.35; pointer-events: none; }\n.sl-menubar { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 2px 2px 0 0 var(--hard-shadow); overflow: hidden; }\n.sl-menubar > button { font-family: var(--mono); font-size: 0.78rem; padding: 0.45rem 0.8rem; border: none; border-left: 1px solid rgba(var(--edge),0.25); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; }\n.sl-menubar > button:first-child { border-left: none; }\n.sl-menubar > button:hover { background: var(--accent); color: var(--accent-ink); }\n\n/* ============================================================\n   CALENDAR / DATE\n   ============================================================ */\n.sl-cal { width: 100%; }\n.sl-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; font-family: var(--mono); font-size: 0.82rem; }\n.sl-cal-head button { width: 28px; height: 28px; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); color: var(--ink); cursor: pointer; }\n.sl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }\n.sl-cal-grid .dow { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-dim); text-align: center; padding-bottom: 0.3rem; text-transform: uppercase; }\n.sl-cal-grid .day { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 0.74rem; border-radius: var(--radius); cursor: pointer; color: var(--ink); }\n.sl-cal-grid .day:hover { background: rgba(var(--glass-tint),0.12); }\n.sl-cal-grid .day.muted { color: var(--ink-dim); opacity: 0.4; }\n.sl-cal-grid .day.sel { background: var(--accent); color: var(--accent-ink); border: 2px solid rgb(var(--edge)); }\n\n/* ============================================================\n   ASPECT RATIO / CARD\n   ============================================================ */\n.sl-ratio { width: 100%; aspect-ratio: 16 / 9; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 30%, var(--bg-2)); display: grid; place-items: center; font-family: var(--mono); font-size: 0.68rem; color: var(--ink); }\n.sl-card-demo { border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 4px 4px 0 0 var(--hard-shadow); overflow: hidden; background: rgba(var(--glass-tint),0.05); }\n.sl-card-demo .cd-media { aspect-ratio: 16/8; background: color-mix(in srgb, var(--accent) 34%, var(--bg-2)); border-bottom: var(--border-w) solid rgb(var(--edge)); }\n.sl-card-demo .cd-body { padding: 0.9rem 1rem; }\n.sl-card-demo .cd-body h4 { margin: 0 0 0.3rem; font-size: 1rem; }\n.sl-card-demo .cd-body p { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--ink-dim); }\n\n/* ============================================================\n   OVERLAYS — dialog / sheet / popover backdrop\n   ============================================================ */\n.sl-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }\n.sl-overlay.open { opacity: 1; pointer-events: auto; }\n.sl-dialog { width: min(440px, 92vw); padding: 1.6rem; background: var(--bg-2); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 10px 10px 0 0 var(--hard-shadow); transform: translateY(10px) scale(0.97); transition: transform 0.22s cubic-bezier(.2,.9,.2,1); }\n.sl-overlay.open .sl-dialog { transform: none; }\n.sl-dialog h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }\n.sl-dialog p { color: var(--ink-dim); font-size: 0.9rem; margin: 0 0 1.3rem; }\n.sl-dialog .actions { display: flex; gap: 0.7rem; justify-content: flex-end; }\n.sl-sheet-overlay { justify-items: end; place-items: stretch; }\n.sl-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 90vw); padding: 1.6rem; background: var(--bg-2); border-left: var(--border-w) solid rgb(var(--edge)); box-shadow: -10px 0 0 0 rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.28s cubic-bezier(.2,.9,.2,1); }\n.sl-sheet-overlay.open .sl-sheet { transform: none; }\n.sl-sheet h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }\n.sl-sheet p { color: var(--ink-dim); font-size: 0.86rem; }\n\n/* ============================================================\n   TOAST\n   ============================================================ */\n.sl-toast-stack { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 300; width: 300px; height: 0; }\n.sl-toast {\n  position: absolute; bottom: 0; right: 0; width: 100%; box-sizing: border-box;\n  padding: 0.85rem 1rem; background: var(--bg-2);\n  border: var(--border-w) solid rgb(var(--edge)); border-left: 6px solid var(--accent);\n  border-radius: var(--radius); box-shadow: 5px 5px 0 0 var(--hard-shadow);\n  display: flex; gap: 0.7rem; align-items: flex-start;\n  --y: 0px; --s: 1;\n  transform: translateX(125%);\n  transform-origin: bottom right;\n  transition: transform 0.4s cubic-bezier(.2,.9,.2,1), opacity 0.3s ease;\n}\n.sl-toast.show { transform: translateY(var(--y)) scale(var(--s)); }\n.sl-toast .tt { font-weight: 700; font-size: 0.86rem; margin: 0 0 0.15rem; }\n.sl-toast .td { font-size: 0.78rem; color: var(--ink-dim); margin: 0; }\n\n/* ============================================================\n   SHOWCASE — real products built on the system\n   ============================================================ */\n.show-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; padding: 1.4rem; align-items: center; }\n@media (max-width: 760px) { .show-feature { grid-template-columns: 1fr; } }\n.show-browser { border: var(--border-w) solid rgb(var(--edge)); box-shadow: 6px 6px 0 0 var(--hard-shadow); overflow: hidden; background: var(--bg-2); }\n.browser-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-bottom: var(--border-w) solid rgb(var(--edge)); background: rgba(var(--glass-tint),0.06); }\n.browser-bar .tl { width: 11px; height: 11px; border: 1.5px solid rgb(var(--edge)); background: rgba(var(--glass-tint),0.15); flex: none; }\n.browser-bar .url { margin-left: 0.6rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); padding: 0.2rem 0.7rem; border: 1.5px solid rgba(var(--edge),0.4); flex: 1; background: rgba(var(--glass-tint),0.04); }\n.browser-shot { display: block; width: 100%; aspect-ratio: 16 / 10; }\n.show-meta { display: flex; flex-direction: column; gap: 1rem; }\n.show-name { font-weight: 700; }\n\n/* ============================================================\n   SITE PATTERNS — distilled from production SL consumers\n   ============================================================ */\n.sl-attribution {\n  font-family: var(--mono);\n  font-size: 0.72rem;\n  color: var(--ink-dim);\n}\n.sl-attribution a {\n  color: var(--ink);\n  text-decoration: none;\n  border-bottom: 1px solid var(--accent);\n}\n.sl-attribution a:hover { color: var(--accent); }\n\n.sl-timeline {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.sl-timeline-item {\n  position: relative;\n  display: grid;\n  grid-template-columns: 18px minmax(0, 1fr);\n  gap: 0.85rem;\n  padding: 0 0 1.15rem;\n}\n.sl-timeline-item:not(:last-child)::before {\n  content: \"\";\n  position: absolute;\n  left: 7px;\n  top: 16px;\n  bottom: 0;\n  width: 2px;\n  background: rgb(var(--edge));\n}\n.sl-timeline-marker {\n  position: relative;\n  z-index: 1;\n  width: 16px;\n  height: 16px;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-timeline-copy { min-width: 0; }\n.sl-timeline-date {\n  display: block;\n  margin-bottom: 0.2rem;\n  font-family: var(--mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n}\n.sl-timeline-title { margin: 0; font-size: 1rem; }\n.sl-timeline-body { margin-top: 0.25rem; color: var(--ink-dim); font-size: 0.86rem; line-height: 1.45; }\n\n.sl-stepper {\n  display: grid;\n  grid-template-columns: repeat(var(--step-count, 3), minmax(0, 1fr));\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.sl-step {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  min-width: 0;\n}\n.sl-step:not(:last-child)::after {\n  content: \"\";\n  position: absolute;\n  left: 30px;\n  right: 6px;\n  top: 13px;\n  height: 2px;\n  background: rgb(var(--edge));\n}\n.sl-step-marker {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  flex: none;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n  color: var(--ink);\n  font-family: var(--mono);\n  font-size: 0.68rem;\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-step-marker svg { width: 14px; height: 14px; }\n.sl-step[data-status=\"complete\"] .sl-step-marker,\n.sl-step[data-status=\"current\"] .sl-step-marker { background: var(--accent); color: var(--accent-ink); }\n.sl-step-copy { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; padding: 0.1rem 0.35rem 0 0; background: var(--bg-2); }\n.sl-step-copy strong { font-size: 0.78rem; }\n.sl-step-copy > span { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-dim); }\n@media (max-width: 640px) {\n  .sl-stepper { grid-template-columns: 1fr; gap: 0.75rem; }\n  .sl-step:not(:last-child)::after { left: 13px; right: auto; top: 29px; bottom: -12px; width: 2px; height: auto; }\n}\n\n.sl-filter-toolbar {\n  display: flex;\n  align-items: end;\n  flex-wrap: wrap;\n  gap: 0.7rem;\n  padding: 0.8rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  box-shadow: 4px 4px 0 0 var(--hard-shadow);\n}\n.sl-filter-group { display: flex; align-items: end; flex-wrap: wrap; gap: 0.55rem; min-width: 0; }\n.sl-filter-summary { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); white-space: nowrap; }\n@media (max-width: 640px) { .sl-filter-summary { width: 100%; margin-left: 0; } }\n\n/* Field-sourced from the recurring command/intake surfaces in Dropship and Observatory. */\n.sl-omnibar {\n  display: grid;\n  gap: 0.45rem;\n  width: 100%;\n  padding: 0.5rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  backdrop-filter: blur(var(--glass-blur)) saturate(150%);\n  box-shadow: 5px 5px 0 0 var(--hard-shadow);\n}\n.sl-omnibar-attachments { display: flex; flex-wrap: wrap; gap: 0.35rem; }\n.sl-omnibar-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.25rem 0.4rem;\n  border: 1.5px solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.08);\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  color: var(--ink-dim);\n}\n.sl-omnibar-attachment button {\n  display: grid;\n  place-items: center;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.sl-omnibar-attachment svg { width: 12px; height: 12px; }\n.sl-omnibar-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }\n.sl-omnibar-input {\n  flex: 1;\n  min-width: 0;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--ink);\n  font: 0.84rem var(--body);\n}\n.sl-omnibar-input::placeholder { color: var(--ink-dim); }\n.sl-omnibar-icon,\n.sl-omnibar-submit {\n  width: 34px;\n  height: 34px;\n  flex: none;\n  display: grid;\n  place-items: center;\n  border: var(--border-w) solid rgb(var(--edge));\n  color: var(--ink);\n  background: rgb(var(--glass-tint) / 0.06);\n  cursor: pointer;\n}\n.sl-omnibar-icon svg,\n.sl-omnibar-submit svg { width: 15px; height: 15px; }\n.sl-omnibar-submit { background: var(--accent); color: var(--accent-ink); box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-omnibar-submit:active { transform: translate(2px, 2px); box-shadow: none; }\n.sl-omnibar-status {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--accent);\n}\n@media (max-width: 560px) { .sl-omnibar-status { display: none; } }\n\n/* Field-sourced from the edge inspection surfaces in Cosmograph and Dropship. */\n.sl-detail-panel {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  backdrop-filter: blur(var(--glass-blur)) saturate(150%);\n  box-shadow: 5px 5px 0 0 var(--hard-shadow);\n}\n.sl-detail-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.8rem;\n  padding: 0.75rem 0.85rem;\n  border-bottom: var(--border-w) solid rgb(var(--edge));\n}\n.sl-detail-panel-eyebrow {\n  display: block;\n  margin-bottom: 0.15rem;\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--accent);\n}\n.sl-detail-panel-title {\n  margin: 0;\n  font-family: var(--display);\n  font-size: 1rem;\n  line-height: 1.1;\n}\n.sl-detail-panel-body {\n  padding: 0.85rem;\n  color: var(--ink-dim);\n  font-size: 0.82rem;\n  line-height: 1.45;\n}\n.sl-detail-panel-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  padding: 0.7rem 0.85rem;\n  border-top: var(--border-w) solid rgb(var(--edge));\n}\n\n.sl-template { display: flex; min-height: 100%; flex-direction: column; gap: 1rem; }\n.sl-template > .sl-site-content { display: flex; flex: 1; flex-direction: column; gap: 1rem; }\n.sl-template-footer {\n  margin-top: auto;\n  padding-block: 1rem;\n  border-top: var(--border-w) solid rgb(var(--edge));\n}\n.sl-template-guided > .sl-site-content {\n  display: grid;\n  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);\n  align-items: start;\n}\n.sl-template-immersive { min-height: 100dvh; }\n.sl-template-immersive > main { position: relative; flex: 1; overflow: hidden; }\n@media (max-width: 760px) { .sl-template-guided > .sl-site-content { grid-template-columns: 1fr; } }\n\n/* Field-sourced from recurring social-proof cards on Interspace and Bumblebee. */\n.sl-testimonial {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 1rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.08);\n  box-shadow: 4px 4px 0 0 var(--hard-shadow);\n}\n.sl-testimonial-source {\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  font-weight: 700;\n  letter-spacing: 0.09em;\n  text-transform: uppercase;\n  color: var(--accent);\n}\n.sl-testimonial-quote {\n  margin: 0;\n  font-family: var(--body);\n  font-size: 0.9rem;\n  line-height: 1.55;\n  color: var(--ink);\n}\n.sl-testimonial-author {\n  padding-top: 0.65rem;\n  border-top: 1px solid rgb(var(--edge) / 0.3);\n  font-family: var(--display);\n  font-size: 0.78rem;\n  font-weight: 700;\n}\n.sl-testimonial-meta {\n  display: block;\n  margin-top: 0.15rem;\n  font-family: var(--mono);\n  font-size: 0.6rem;\n  font-weight: 400;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n}\n\n/* Field-sourced from the recurring trust and portfolio identity walls. */\n.sl-logo-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\n  gap: 0.55rem;\n}\n.sl-logo-tile {\n  display: grid;\n  min-height: 86px;\n  place-items: center;\n  align-content: center;\n  gap: 0.45rem;\n  padding: 0.65rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.08);\n  box-shadow: 3px 3px 0 0 var(--hard-shadow);\n}\n.sl-logo-mark {\n  display: grid;\n  width: 2.5rem;\n  height: 2.5rem;\n  place-items: center;\n  background: var(--accent);\n  color: var(--accent-ink);\n  font-family: var(--display);\n  font-weight: 800;\n}\n.sl-logo-label {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n}\n/* Persistent portfolio identity cards: the default for company and venture grids. */\n.sl-portfolio-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));\n  gap: 1rem;\n}\n.sl-portfolio-card {\n  display: flex;\n  min-height: 290px;\n  flex-direction: column;\n  overflow: hidden;\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  background: var(--bg-2);\n  color: var(--ink);\n  box-shadow: 4px 4px 0 0 var(--hard-shadow);\n  text-decoration: none;\n  transition: transform var(--motion-fast) var(--ease-liquid), box-shadow var(--motion-fast) var(--ease-liquid);\n}\n.sl-portfolio-card[href] { cursor: pointer; }\n.sl-portfolio-card[href]:hover,\n.sl-portfolio-card[href]:focus-visible {\n  transform: translate(-1px, -1px);\n  box-shadow: 6px 6px 0 0 var(--hard-shadow);\n}\n.sl-portfolio-card[href]:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 4px;\n}\n.sl-portfolio-card-media {\n  position: relative;\n  display: grid;\n  min-height: 9.5rem;\n  flex: 0 0 9.5rem;\n  place-items: center;\n  padding: 1.25rem;\n  border-bottom: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n}\n.sl-portfolio-card-logo {\n  display: grid;\n  min-width: 4.25rem;\n  min-height: 4.25rem;\n  place-items: center;\n  color: var(--ink);\n  font-family: var(--display);\n  font-size: clamp(1.35rem, 3vw, 2rem);\n  font-weight: 900;\n  letter-spacing: -0.04em;\n}\n.sl-portfolio-card-logo > img,\n.sl-portfolio-card-logo > svg {\n  display: block;\n  width: min(100%, 11rem);\n  max-height: 5.5rem;\n  object-fit: contain;\n}\n.sl-portfolio-card-body {\n  display: flex;\n  min-height: 9.5rem;\n  flex: 1;\n  flex-direction: column;\n  padding: 1rem;\n  background: var(--neg);\n  color: var(--neg-ink);\n}\n.sl-portfolio-card-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.35rem;\n}\n.sl-portfolio-card-media > .sl-portfolio-card-tags {\n  position: absolute;\n  inset: 0.65rem 0.65rem auto;\n  z-index: 1;\n}\n.sl-portfolio-card-body > .sl-portfolio-card-tags { margin-bottom: 0.7rem; }\n.sl-portfolio-card-tag {\n  padding: 0.28rem 0.45rem;\n  border: 1px solid rgb(var(--edge));\n  background: color-mix(in srgb, var(--neg) 80%, #000000);\n  color: var(--neg-ink);\n  font-family: var(--mono);\n  font-size: 0.56rem;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  line-height: 1;\n  text-transform: uppercase;\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-portfolio-card-title {\n  margin: 0;\n  color: var(--neg-ink);\n  font-family: var(--display);\n  font-size: 1rem;\n  font-weight: 800;\n  line-height: 1.15;\n}\n.sl-portfolio-card-description {\n  display: -webkit-box;\n  margin: 0.55rem 0 0;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 3;\n  color: color-mix(in srgb, var(--neg-ink) 72%, transparent);\n  font-family: var(--body);\n  font-size: 0.78rem;\n  line-height: 1.5;\n}\n.sl-portfolio-card-action {\n  display: inline-flex;\n  width: fit-content;\n  align-items: center;\n  gap: 0.28rem;\n  margin-top: auto;\n  padding-top: 1rem;\n  color: var(--neg-ink);\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  font-weight: 800;\n  letter-spacing: 0.09em;\n  text-decoration: underline;\n  text-decoration-color: color-mix(in srgb, var(--neg-ink) 58%, transparent);\n  text-underline-offset: 0.35rem;\n  text-transform: uppercase;\n}\n.sl-portfolio-card-action svg { width: 0.75rem; height: 0.75rem; }\n@media (max-width: 560px) {\n  .sl-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }\n  .sl-portfolio-card { min-height: 270px; }\n  .sl-portfolio-card-media { min-height: 8rem; flex-basis: 8rem; padding: 0.8rem; }\n  .sl-portfolio-card-body { padding: 0.8rem; }\n  .sl-portfolio-card-description { font-size: 0.72rem; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .sl-portfolio-card { transition: none; }\n}\n\n/* Field-sourced from recurring update, signal, and changelog streams. */\n.sl-activity-feed {\n  display: grid;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.sl-activity-item {\n  position: relative;\n  display: grid;\n  grid-template-columns: 2.25rem minmax(0, 1fr);\n  gap: 0.75rem;\n  padding-bottom: 0.9rem;\n}\n.sl-activity-item:not(:last-child)::before {\n  content: \"\";\n  position: absolute;\n  left: calc(1.125rem - 1px);\n  top: 2.1rem;\n  bottom: 0;\n  width: 2px;\n  background: rgb(var(--edge));\n}\n.sl-activity-marker {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  width: 2.25rem;\n  height: 2.25rem;\n  place-items: center;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  color: var(--accent-ink);\n  font-family: var(--mono);\n  font-size: 0.6rem;\n  font-weight: 700;\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-activity-content {\n  min-width: 0;\n  padding: 0.7rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.07);\n}\n.sl-activity-header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.7rem;\n}\n.sl-activity-title {\n  margin: 0;\n  font: 700 0.82rem/1.25 var(--display);\n}\n.sl-activity-meta {\n  flex: none;\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  color: var(--ink-dim);\n  text-transform: uppercase;\n}\n.sl-activity-description {\n  margin: 0.35rem 0 0;\n  color: var(--ink-dim);\n  font-size: 0.76rem;\n  line-height: 1.45;\n}\n@media (max-width: 520px) {\n  .sl-activity-header {\n    align-items: flex-start;\n    flex-direction: column;\n    gap: 0.2rem;\n  }\n}\n\n/* Field-sourced from recurring upload and evidence-intake flows. */\n.sl-dropzone {\n  display: grid;\n  min-height: 190px;\n  place-items: center;\n  align-content: center;\n  gap: 0.45rem;\n  padding: 1.25rem;\n  border: var(--border-w) dashed rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.06);\n  text-align: center;\n  cursor: pointer;\n  transition:\n    transform 140ms ease,\n    box-shadow 140ms ease,\n    background 140ms ease;\n  box-shadow: 4px 4px 0 0 var(--hard-shadow);\n}\n.sl-dropzone:hover,\n.sl-dropzone:focus-within,\n.sl-dropzone[data-active] {\n  transform: translate(1px, 1px);\n  background: rgb(var(--glass-tint) / 0.11);\n  box-shadow: 6px 6px 0 0 var(--hard-shadow);\n}\n.sl-dropzone-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n.sl-dropzone-icon {\n  display: grid;\n  width: 2.6rem;\n  height: 2.6rem;\n  place-items: center;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  color: var(--accent-ink);\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-dropzone-icon svg {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.sl-dropzone-title {\n  font-family: var(--display);\n  font-size: 0.9rem;\n  font-weight: 800;\n}\n.sl-dropzone-description {\n  max-width: 32rem;\n  color: var(--ink-dim);\n  font-size: 0.76rem;\n  line-height: 1.45;\n}\n.sl-dropzone-meta {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--accent);\n}\n\n/* Field-sourced from packages, plan displays, and subscription cards. */\n.sl-pricing-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 0.8rem;\n}\n.sl-pricing-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.8rem;\n  padding: 1rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: rgb(var(--glass-tint) / 0.07);\n  box-shadow: 5px 5px 0 0 var(--hard-shadow);\n}\n.sl-pricing-card[data-featured] {\n  border-top: 0.45rem solid var(--accent);\n  padding-top: 0.7rem;\n}\n.sl-pricing-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.7rem;\n}\n.sl-pricing-name {\n  margin: 0;\n  font: 800 1.05rem/1.15 var(--display);\n}\n.sl-pricing-price {\n  display: flex;\n  align-items: baseline;\n  gap: 0.35rem;\n}\n.sl-pricing-amount {\n  font: 800 clamp(1.8rem, 4vw, 2.55rem)/1 var(--display);\n  letter-spacing: -0.04em;\n}\n.sl-pricing-cadence {\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  color: var(--ink-dim);\n  text-transform: uppercase;\n}\n.sl-pricing-description {\n  margin: 0;\n  color: var(--ink-dim);\n  font-size: 0.78rem;\n  line-height: 1.5;\n}\n.sl-pricing-features {\n  display: grid;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.sl-pricing-feature {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.45rem;\n  font-size: 0.76rem;\n  line-height: 1.4;\n}\n.sl-pricing-feature svg {\n  width: 0.9rem;\n  height: 0.9rem;\n  flex: none;\n  margin-top: 0.08rem;\n  color: var(--accent);\n}\n.sl-pricing-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-top: auto;\n  padding-top: 0.2rem;\n}\n\n\n/* Field-sourced from Dropship's stacked membership economics view. */\n.sl-unit-economics {\n  width: 100%;\n  margin: 0;\n}\n.sl-unit-economics-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.75rem;\n  margin-bottom: 0.7rem;\n  font-family: var(--mono);\n  font-size: 0.66rem;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n}\n.sl-unit-economics-head strong {\n  color: var(--accent);\n  font-size: 0.82rem;\n}\n.sl-unit-economics-chart {\n  display: flex;\n  width: 100%;\n  height: 58px;\n  overflow: hidden;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n  box-shadow: 5px 5px 0 0 var(--hard-shadow);\n}\n.sl-unit-economics-chart > span {\n  display: block;\n  min-width: 3px;\n  height: 100%;\n  border-right: var(--border-w) solid rgb(var(--edge));\n  background: color-mix(in srgb, var(--accent) var(--allocation-strength), var(--bg-2));\n}\n.sl-unit-economics-chart > span:last-child {\n  border-right: 0;\n  background:\n    linear-gradient(135deg, rgb(var(--glass-tint) / 0.16) 25%, transparent 25%) -6px 0 / 12px 12px,\n    linear-gradient(225deg, rgb(var(--glass-tint) / 0.1) 25%, transparent 25%) -6px 0 / 12px 12px,\n    var(--accent);\n}\n.sl-unit-economics-legend {\n  display: grid;\n  margin-top: 1rem;\n  border-top: var(--border-w) solid rgb(var(--edge));\n}\n.sl-unit-economics-legend > div {\n  min-height: 54px;\n  display: grid;\n  grid-template-columns: 13px minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 0.6rem;\n  border-bottom: 1px solid rgb(var(--edge) / 0.45);\n}\n.sl-unit-economics-legend i {\n  width: 11px;\n  height: 11px;\n  border: 1px solid rgb(var(--edge));\n  background: color-mix(in srgb, var(--accent) var(--allocation-strength), var(--bg-2));\n}\n.sl-unit-economics-legend span {\n  min-width: 0;\n  display: grid;\n  gap: 0.2rem;\n}\n.sl-unit-economics-legend strong,\n.sl-unit-economics-legend b {\n  font: 400 0.64rem/1.2 var(--mono);\n}\n.sl-unit-economics-legend strong {\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.sl-unit-economics-legend small {\n  color: var(--ink-dim);\n  font-size: 0.7rem;\n  line-height: 1.4;\n}\n.sl-unit-economics-note {\n  margin: 0.8rem 0 0;\n  color: var(--ink-dim);\n  font: 0.62rem/1.55 var(--mono);\n}\n\n/* Field-sourced from Construct: a complete identity summary, not a decorative avatar. */\n.sl-profile-card {\n  width: min(100%, 420px);\n  overflow: hidden;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n}\n.sl-profile-card-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.65rem 0.75rem;\n  border-bottom: var(--border-w) solid rgb(var(--edge));\n  font: 650 0.68rem/1 var(--body);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.sl-profile-card-status::before {\n  display: inline-block;\n  width: 0.48rem;\n  height: 0.48rem;\n  margin-right: 0.45rem;\n  background: var(--accent);\n  border: 1px solid rgb(var(--edge));\n  content: \"\";\n}\n.sl-profile-card-image {\n  display: grid;\n  place-items: center;\n  aspect-ratio: 1.55 / 1;\n  overflow: hidden;\n  border-bottom: var(--border-w) solid rgb(var(--edge));\n  background: color-mix(in srgb, var(--accent) 24%, var(--bg-2));\n}\n.sl-profile-card-image img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n  object-position: center 24%;\n  filter: grayscale(1) contrast(1.04);\n}\n.sl-profile-card-initials {\n  display: grid;\n  place-items: center;\n  width: clamp(5rem, 24%, 7rem);\n  aspect-ratio: 1;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  color: var(--accent-ink);\n  box-shadow: 5px 5px 0 var(--hard-shadow);\n  font: 750 clamp(1.5rem, 4vw, 2.4rem)/1 var(--display);\n  letter-spacing: -0.05em;\n}\n.sl-profile-card-summary {\n  margin: 0;\n  padding: 0.9rem 0.8rem;\n  border-bottom: var(--border-w) solid rgb(var(--edge));\n  background: var(--accent);\n  color: var(--accent-ink);\n  font: 720 0.94rem/1.4 var(--body);\n}\n.sl-profile-card-facts { margin: 0; }\n.sl-profile-card-facts > div {\n  display: grid;\n  grid-template-columns: minmax(5rem, 0.7fr) minmax(0, 1.3fr);\n  gap: 0.75rem;\n  padding: 0.68rem 0.8rem;\n  border-bottom: 1px solid rgb(var(--edge) / 0.45);\n}\n.sl-profile-card-facts > div:last-child { border-bottom: 0; }\n.sl-profile-card-facts dt {\n  font: 400 0.62rem/1.35 var(--mono);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n}\n.sl-profile-card-facts dd {\n  margin: 0;\n  text-align: right;\n  font: 650 0.76rem/1.35 var(--body);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sl-toggle-group.is-liquid .sl-toggle-marker,\n  .sl-tabs .sl-tab-marker {\n    transition: none;\n  }\n}\n\n/* Stateful navigation uses one moving marker; buttons never navigate the specimen. */\n.sl-navbar {\n  display: flex;\n  align-items: center;\n  gap: 0.7rem;\n  flex-wrap: wrap;\n  padding: 0.55rem 0.7rem;\n  border: var(--border-w) solid rgb(var(--edge));\n  background: var(--bg-2);\n  box-shadow: 2px 2px 0 0 var(--hard-shadow);\n}\n.sl-navbar .nb-brand {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font: 750 1rem/1 var(--display);\n  letter-spacing: -0.02em;\n}\n.sl-navbar .nb-links {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  isolation: isolate;\n  border: 1px solid rgb(var(--edge));\n}\n.sl-navbar .nb-liquid-marker {\n  position: absolute;\n  inset-block: 0;\n  left: 0;\n  z-index: 0;\n  width: 33.333%;\n  transform: translateX(calc(var(--nb-index, 0) * 100%));\n  background: var(--accent);\n  transition: transform var(--motion) var(--ease-liquid-over);\n  pointer-events: none;\n}\n.sl-navbar .nb-link {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.45rem;\n  padding: 0.45rem 0.7rem;\n  border: 0;\n  border-left: 1px solid rgb(var(--edge) / 0.35);\n  background: transparent;\n  color: var(--ink-dim);\n  font: 650 0.76rem/1 var(--body);\n  cursor: pointer;\n  transition: color var(--motion-fast) var(--ease-liquid);\n}\n.sl-navbar .nb-link:first-of-type { border-left: 0; }\n.sl-navbar .nb-link[aria-current=\"page\"] { color: var(--accent-ink); }\n.sl-navbar .nb-link svg { width: 15px; height: 15px; stroke-width: 1.8; }\n.sl-navbar .nb-links { margin-left: auto; }\n.sl-navbar .nb-right { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }\n\n.sl-navmenu { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); box-shadow: 2px 2px 0 0 var(--hard-shadow); }\n.sl-navmenu .nm-item { position: relative; }\n.sl-navmenu .nm-item > button { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.8rem; border: 0; border-left: 1px solid rgb(var(--edge) / 0.25); background: var(--bg-2); color: var(--ink-dim); font: 650 0.78rem/1 var(--body); cursor: pointer; }\n.sl-navmenu .nm-item:first-child > button { border-left: 0; }\n.sl-navmenu .nm-item:hover > button, .sl-navmenu .nm-item:focus-within > button { background: var(--accent); color: var(--accent-ink); }\n.sl-navmenu .nm-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 0.35rem; border: var(--border-w) solid rgb(var(--edge)); background: var(--bg-2); box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--motion-fast) var(--ease-liquid), transform var(--motion) var(--ease-liquid-over); z-index: 50; }\n.sl-navmenu .nm-item:hover .nm-panel, .sl-navmenu .nm-item:focus-within .nm-panel { opacity: 1; pointer-events: auto; transform: none; }\n.sl-navmenu .nm-panel a { display: block; padding: 0.5rem 0.6rem; color: var(--ink); font: 0.78rem/1.3 var(--body); text-decoration: none; }\n.sl-navmenu .nm-panel a:hover, .sl-navmenu .nm-panel a:focus-visible { background: var(--accent); color: var(--accent-ink); }\n\n@media (max-width: 600px) {\n  .sl-navbar .nb-right { width: 100%; margin-left: 0; flex-wrap: wrap; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sl-navbar .nb-liquid-marker,\n  .sl-navmenu .nm-panel {\n    transition: none;\n  }\n}\n",
       "type": "registry:file",
       "target": "styles/structured-liquidity-kit.css"
     },
diff --git a/artifacts/structured-liquidity/public/r/tabs.json b/artifacts/structured-liquidity/public/r/tabs.json
index 6eae71a..8a601e5 100644
--- a/artifacts/structured-liquidity/public/r/tabs.json
+++ b/artifacts/structured-liquidity/public/r/tabs.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/ui/tabs.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsCtx {\n  value: string;\n  setValue: (v: string) => void;\n}\nconst Ctx = React.createContext<TabsCtx | null>(null);\nconst useTabs = () => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(\"Tabs subcomponents must be used within <Tabs>\");\n  return c;\n};\n\nexport interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\n/** Structured Liquidity tabs — segmented tablist, accent active tab. */\nexport function Tabs({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ...props\n}: TabsProps) {\n  const [internal, setInternal] = React.useState(defaultValue ?? \"\");\n  const isControlled = value !== undefined;\n  const val = isControlled ? value : internal;\n  const setValue = (v: string) => {\n    if (!isControlled) setInternal(v);\n    onValueChange?.(v);\n  };\n  return (\n    <div className={cn(\"sl-tabs\", className)} {...props}>\n      <Ctx.Provider value={{ value: val, setValue }}>{children}</Ctx.Provider>\n    </div>\n  );\n}\n\nexport function TabsList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div role=\"tablist\" className={cn(\"tablist\", className)} {...props} />;\n}\n\nexport interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string;\n}\nexport function TabsTrigger({ value, className, ...props }: TabsTriggerProps) {\n  const { value: v, setValue } = useTabs();\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={v === value}\n      className={className}\n      onClick={() => setValue(value)}\n      {...props}\n    />\n  );\n}\n\nexport interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\nexport function TabsContent({ value, className, ...props }: TabsContentProps) {\n  const { value: v } = useTabs();\n  if (v !== value) return null;\n  return <div role=\"tabpanel\" className={cn(\"panel\", \"show\", className)} {...props} />;\n}\n",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsCtx {\n  value: string;\n  setValue: (v: string) => void;\n}\nconst Ctx = React.createContext<TabsCtx | null>(null);\nconst useTabs = () => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(\"Tabs subcomponents must be used within <Tabs>\");\n  return c;\n};\n\nexport interface TabsProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"onChange\"\n> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\n/** Structured Liquidity tabs — segmented tablist, accent active tab. */\nexport function Tabs({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ...props\n}: TabsProps) {\n  const [internal, setInternal] = React.useState(defaultValue ?? \"\");\n  const isControlled = value !== undefined;\n  const val = isControlled ? value : internal;\n  const setValue = (v: string) => {\n    if (!isControlled) setInternal(v);\n    onValueChange?.(v);\n  };\n  return (\n    <div className={cn(\"sl-tabs\", className)} {...props}>\n      <Ctx.Provider value={{ value: val, setValue }}>{children}</Ctx.Provider>\n    </div>\n  );\n}\n\nexport function TabsList({\n  className,\n  children,\n  style,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const { value } = useTabs();\n  const items = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<TabsTriggerProps> =>\n      React.isValidElement<TabsTriggerProps>(child) &&\n      typeof child.props.value === \"string\",\n  );\n  const selectedIndex = Math.max(\n    0,\n    items.findIndex((item) => item.props.value === value),\n  );\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\"tablist\", \"is-liquid\", className)}\n      style={\n        {\n          ...style,\n          \"--tab-index\": selectedIndex,\n          \"--tab-count\": Math.max(1, items.length),\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <span className=\"sl-tab-marker\" aria-hidden=\"true\" />\n      {children}\n    </div>\n  );\n}\n\nexport interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string;\n}\nexport function TabsTrigger({\n  value,\n  className,\n  onClick,\n  ...props\n}: TabsTriggerProps) {\n  const { value: v, setValue } = useTabs();\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={v === value}\n      className={className}\n      onClick={(event) => {\n        setValue(value);\n        onClick?.(event);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\nexport function TabsContent({ value, className, ...props }: TabsContentProps) {\n  const { value: v } = useTabs();\n  if (v !== value) return null;\n  return (\n    <div\n      role=\"tabpanel\"\n      className={cn(\"panel\", \"show\", className)}\n      {...props}\n    />\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/ui/tabs.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/toggle-group.json b/artifacts/structured-liquidity/public/r/toggle-group.json
index 73e12cf..fd462fe 100644
--- a/artifacts/structured-liquidity/public/r/toggle-group.json
+++ b/artifacts/structured-liquidity/public/r/toggle-group.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/ui/toggle-group.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TGCtx {\n  type: \"single\" | \"multiple\";\n  value: string | string[];\n  toggle: (v: string) => void;\n}\nconst Ctx = React.createContext<TGCtx | null>(null);\nconst useTG = () => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(\"ToggleGroupItem must be used within <ToggleGroup>\");\n  return c;\n};\n\ntype SingleProps = {\n  type?: \"single\";\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\ntype MultipleProps = {\n  type: \"multiple\";\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n};\nexport type ToggleGroupProps = (SingleProps | MultipleProps) &\n  Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\">;\n\n/** Structured Liquidity toggle group — segmented rigid frame, one accent fill. */\nexport function ToggleGroup({\n  type = \"single\",\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  const [internal, setInternal] = React.useState<string | string[]>(\n    defaultValue ?? (type === \"single\" ? \"\" : []),\n  );\n  const isControlled = value !== undefined;\n  const val = isControlled ? value : internal;\n\n  const toggle = (v: string) => {\n    let next: string | string[];\n    if (type === \"single\") {\n      next = val === v ? \"\" : v;\n    } else {\n      const arr = (val as string[]) ?? [];\n      next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v];\n    }\n    if (!isControlled) setInternal(next);\n    (onValueChange as (value: string | string[]) => void)?.(next);\n  };\n\n  return (\n    <div className={cn(\"sl-toggle-group\", className)} data-toggle-group {...props}>\n      <Ctx.Provider value={{ type, value: val, toggle }}>{children}</Ctx.Provider>\n    </div>\n  );\n}\n\nexport interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string;\n}\nexport function ToggleGroupItem({ value, className, ...props }: ToggleGroupItemProps) {\n  const { type, value: val, toggle } = useTG();\n  const pressed =\n    type === \"single\" ? val === value : ((val as string[]) ?? []).includes(value);\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      className={className}\n      onClick={() => toggle(value)}\n      {...props}\n    />\n  );\n}\n",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TGCtx {\n  type: \"single\" | \"multiple\";\n  value: string | string[];\n  toggle: (v: string) => void;\n}\nconst Ctx = React.createContext<TGCtx | null>(null);\nconst useTG = () => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(\"ToggleGroupItem must be used within <ToggleGroup>\");\n  return c;\n};\n\ntype SingleProps = {\n  type?: \"single\";\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\ntype MultipleProps = {\n  type: \"multiple\";\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n};\nexport type ToggleGroupProps = (SingleProps | MultipleProps) &\n  Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\">;\n\n/** Structured Liquidity toggle group — segmented rigid frame, one accent fill. */\nexport function ToggleGroup({\n  type = \"single\",\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  style,\n  ...props\n}: ToggleGroupProps) {\n  const [internal, setInternal] = React.useState<string | string[]>(\n    defaultValue ?? (type === \"single\" ? \"\" : []),\n  );\n  const isControlled = value !== undefined;\n  const val = isControlled ? value : internal;\n\n  const toggle = (v: string) => {\n    let next: string | string[];\n    if (type === \"single\") {\n      next = val === v ? \"\" : v;\n    } else {\n      const arr = (val as string[]) ?? [];\n      next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v];\n    }\n    if (!isControlled) setInternal(next);\n    (onValueChange as (value: string | string[]) => void)?.(next);\n  };\n\n  const items = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<ToggleGroupItemProps> =>\n      React.isValidElement<ToggleGroupItemProps>(child) &&\n      typeof child.props.value === \"string\",\n  );\n  const selectedIndex =\n    type === \"single\"\n      ? items.findIndex((item) => item.props.value === val)\n      : -1;\n  const liquid = type === \"single\" && selectedIndex >= 0 && items.length > 0;\n\n  return (\n    <div\n      className={cn(\"sl-toggle-group\", liquid && \"is-liquid\", className)}\n      data-toggle-group\n      style={\n        {\n          ...style,\n          \"--toggle-index\": selectedIndex,\n          \"--toggle-count\": Math.max(1, items.length),\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {liquid ? <span className=\"sl-toggle-marker\" aria-hidden=\"true\" /> : null}\n      <Ctx.Provider value={{ type, value: val, toggle }}>\n        {children}\n      </Ctx.Provider>\n    </div>\n  );\n}\n\nexport interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string;\n}\nexport function ToggleGroupItem({\n  value,\n  className,\n  onClick,\n  ...props\n}: ToggleGroupItemProps) {\n  const { type, value: val, toggle } = useTG();\n  const pressed =\n    type === \"single\"\n      ? val === value\n      : ((val as string[]) ?? []).includes(value);\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      className={className}\n      onClick={(event) => {\n        toggle(value);\n        onClick?.(event);\n      }}\n      {...props}\n    />\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/ui/toggle-group.tsx"
     }
diff --git a/artifacts/structured-liquidity/public/r/unit-economics-chart.json b/artifacts/structured-liquidity/public/r/unit-economics-chart.json
new file mode 100644
index 0000000..5d0fa44
--- /dev/null
+++ b/artifacts/structured-liquidity/public/r/unit-economics-chart.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "unit-economics-chart",
+  "type": "registry:ui",
+  "title": "Unit Economics Chart",
+  "description": "Structured Liquidity Unit Economics Chart — React component driving the SL class system.",
+  "registryDependencies": [
+    "https://structured.glass/r/structured-liquidity.json",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "registry/ui/unit-economics-chart.tsx",
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface UnitEconomicsAllocation {\n  label: string;\n  value: string;\n  share: number;\n  description?: string;\n}\n\nexport interface UnitEconomicsChartProps\n  extends React.HTMLAttributes<HTMLElement> {\n  allocations: UnitEconomicsAllocation[];\n  totalLabel?: string;\n  totalValue?: string;\n  note?: string;\n}\n\n/**\n * A compact, accessible stacked allocation chart for explaining how a price,\n * budget, or unit of revenue is distributed.\n */\nexport const UnitEconomicsChart = React.forwardRef<\n  HTMLElement,\n  UnitEconomicsChartProps\n>(\n  (\n    {\n      allocations,\n      totalLabel = \"Total\",\n      totalValue,\n      note,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const totalShare = allocations.reduce(\n      (sum, allocation) => sum + Math.max(0, allocation.share),\n      0,\n    );\n    const chartLabel = allocations\n      .map((allocation) => `${allocation.label}: ${allocation.value}`)\n      .join(\", \");\n\n    return (\n      <figure ref={ref} className={cn(\"sl-unit-economics\", className)} {...props}>\n        <figcaption className=\"sl-unit-economics-head\">\n          <span>{totalLabel}</span>\n          {totalValue ? <strong>{totalValue}</strong> : null}\n        </figcaption>\n        <div className=\"sl-unit-economics-chart\" role=\"img\" aria-label={chartLabel}>\n          {allocations.map((allocation, index) => (\n            <span\n              key={`${allocation.label}-${index}`}\n              style={{\n                width: `${totalShare ? (Math.max(0, allocation.share) / totalShare) * 100 : 0}%`,\n                \"--allocation-strength\": `${Math.min(index, 3) * 16 + 34}%`,\n              } as React.CSSProperties}\n              title={`${allocation.label}: ${allocation.value}`}\n            />\n          ))}\n        </div>\n        <div className=\"sl-unit-economics-legend\">\n          {allocations.map((allocation, index) => (\n            <div key={`${allocation.label}-${index}`}>\n              <i\n                style={{\n                  \"--allocation-strength\": `${Math.min(index, 3) * 16 + 34}%`,\n                } as React.CSSProperties}\n              />\n              <span>\n                <strong>{allocation.label}</strong>\n                {allocation.description ? <small>{allocation.description}</small> : null}\n              </span>\n              <b>{allocation.value}</b>\n            </div>\n          ))}\n        </div>\n        {note ? <p className=\"sl-unit-economics-note\">{note}</p> : null}\n      </figure>\n    );\n  },\n);\nUnitEconomicsChart.displayName = \"UnitEconomicsChart\";\n",
+      "type": "registry:ui",
+      "target": "components/ui/unit-economics-chart.tsx"
+    }
+  ]
+}
diff --git a/artifacts/structured-liquidity/public/registry.json b/artifacts/structured-liquidity/public/registry.json
index 2da8a6d..0556082 100644
--- a/artifacts/structured-liquidity/public/registry.json
+++ b/artifacts/structured-liquidity/public/registry.json
@@ -7,13 +7,13 @@
       "name": "structured-liquidity",
       "type": "registry:style",
       "title": "Structured Liquidity",
-      "description": "The Structured Liquidity design language base: theme tokens plus the three distributable stylesheets and the kit interaction script. Install this first — every component depends on it."
+      "description": "The Structured Liquidity design language base: Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it."
     },
     {
       "name": "structured-liquidity-agent",
       "type": "registry:item",
       "title": "Structured Liquidity Agent Bundle",
-      "description": "Install Structured Liquidity plus a persistent local agent skill before the first UI edit."
+      "description": "Install the Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity language plus its persistent local agent skill before the first UI edit."
     },
     {
       "name": "accordion",
@@ -339,12 +339,24 @@
       "title": "Popover",
       "description": "Structured Liquidity Popover — React component driving the SL class system."
     },
+    {
+      "name": "portfolio-card",
+      "type": "registry:ui",
+      "title": "Portfolio Card",
+      "description": "Structured Liquidity Portfolio Card — React component driving the SL class system."
+    },
     {
       "name": "pricing-card",
       "type": "registry:ui",
       "title": "Pricing Card",
       "description": "Structured Liquidity Pricing Card — React component driving the SL class system."
     },
+    {
+      "name": "profile-card",
+      "type": "registry:ui",
+      "title": "Profile Card",
+      "description": "Structured Liquidity Profile Card — React component driving the SL class system."
+    },
     {
       "name": "profile-header",
       "type": "registry:ui",
@@ -513,6 +525,12 @@
       "title": "Typography",
       "description": "Structured Liquidity Typography — React component driving the SL class system."
     },
+    {
+      "name": "unit-economics-chart",
+      "type": "registry:ui",
+      "title": "Unit Economics Chart",
+      "description": "Structured Liquidity Unit Economics Chart — React component driving the SL class system."
+    },
     {
       "name": "waveform",
       "type": "registry:ui",
diff --git a/artifacts/structured-liquidity/public/structured-liquidity-components.css b/artifacts/structured-liquidity/public/structured-liquidity-components.css
index 586fcea..863c25c 100644
--- a/artifacts/structured-liquidity/public/structured-liquidity-components.css
+++ b/artifacts/structured-liquidity/public/structured-liquidity-components.css
@@ -2,7 +2,7 @@
    STRUCTURED LIQUIDITY — component layer
    ============================================================ */
 
-/* ---- NAV (floating Liquid Glass bar — a layer on top) ---- */
+/* ---- NAV (flat structural rail; liquid is expressed by moving markers) ---- */
 .nav {
   position: fixed; top: clamp(0.6rem, 1.6vw, 1rem); left: 50%; transform: translateX(-50%) translateZ(0);
   width: min(1200px, 94vw); z-index: 50;
@@ -10,9 +10,9 @@
   padding: 0.55rem 0.6rem 0.55rem clamp(0.9rem, 2vw, 1.3rem);
   backdrop-filter: blur(10px) saturate(150%);
   -webkit-backdrop-filter: blur(10px) saturate(150%);
-  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
+  background: color-mix(in srgb, var(--bg-2) 96%, transparent);
   border: var(--border-w) solid rgb(var(--edge));
-  box-shadow: 6px 6px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4);
+  box-shadow: none;
 }
 .nav .links { display: flex; gap: 1.3rem; align-items: center; }
 .nav .links a {
@@ -51,26 +51,21 @@
   position: relative; flex: none;
   border-radius: 0;
   border: 2.5px solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.04));
+  background: var(--bg-2);
   backdrop-filter: blur(8px) saturate(180%);
   -webkit-backdrop-filter: blur(8px) saturate(180%);
-  box-shadow: 3px 3px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.5);
+  box-shadow: 3px 3px 0 0 var(--hard-shadow);
   overflow: hidden;
 }
 .glyph::before {            /* the liquid fill + curved meniscus */
   content: ""; position: absolute; left: -10%; right: -10%; bottom: -8%;
   height: 58%;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 42%);
+  background: var(--accent);
   border-radius: 46% 46% 0 0 / 70% 70% 0 0;
   box-shadow: inset 0 2px 0 rgba(255,255,255,0.45);
 }
-.glyph::after {             /* specular gloss across the top glass */
-  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%;
-  background: linear-gradient(160deg, rgba(255,255,255,0.4), transparent 70%);
-  pointer-events: none;
-}
-.glyph.lg { --s: 60px; border-width: 3px; box-shadow: 5px 5px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.5); }
+.glyph::after { content: none; }
+.glyph.lg { --s: 60px; border-width: 3px; box-shadow: 5px 5px 0 0 var(--hard-shadow); }
 
 .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
 .brand .name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
@@ -86,13 +81,11 @@
   position: relative;
 }
 .btn.glassy {
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.05));
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4);
+  background: var(--bg-2);
+  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
 }
 .btn.solid { background: var(--accent); color: var(--accent-ink); box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow); }
-.btn:active, .btn:hover { transform: translate(var(--hard-x), var(--hard-y)); box-shadow: 0 0 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4); }
+.btn:active, .btn:hover { transform: translate(var(--hard-x), var(--hard-y)); box-shadow: 0 0 0 0 var(--hard-shadow); }
 .btn .arrow { transition: transform 0.2s; }
 .btn:hover .arrow { transform: translateX(4px); }
 
@@ -104,24 +97,17 @@
 .wordmark {
   font-weight: 900;
   font-stretch: 125%;
-  font-size: clamp(2.2rem, 7.4vw, 5.2rem);
+  font-size: var(--text-display-xl);
   line-height: 0.84;
   letter-spacing: -0.03em;
   margin: 0.25em 0 0.3em;
   text-wrap: balance;
 }
-/* glass-filled letters: translucent frosted fill, brutal outline drop */
+/* solid accent fallback; the enhanced word uses movement inside the letterforms */
 .wordmark .glas {
-  color: transparent;
-  -webkit-text-stroke: 2px rgb(var(--edge));
-  paint-order: stroke fill;
-  background-image: linear-gradient(
-    160deg,
-    color-mix(in srgb, var(--accent) 92%, white 8%),
-    color-mix(in srgb, var(--accent) 62%, transparent)
-  );
-  -webkit-background-clip: text; background-clip: text;
-  text-shadow: var(--hard-x) var(--hard-y) 0 rgba(var(--edge), 0.3);
+  color: var(--accent);
+  -webkit-text-stroke: 0;
+  text-shadow: none;
 }
 .wordmark .brutal {
   color: var(--accent);
@@ -150,14 +136,18 @@
   pointer-events: none;
   filter: drop-shadow(var(--hard-x) var(--hard-y) 0 rgba(var(--edge), 0.3));
 }
-.lw-glass { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
-.lw-wave-back { fill: color-mix(in srgb, var(--accent) 55%, white 14%); opacity: 0.7; }
+.lw-glass { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
+.lw-wave-back { fill: color-mix(in srgb, var(--accent) 62%, white 18%); opacity: 0.74; }
 .lw-wave-front { fill: var(--accent); }
-.lw-shine { fill: none; stroke: color-mix(in srgb, white 70%, var(--accent)); stroke-width: 2.5; opacity: 0.5; vector-effect: non-scaling-stroke; }
+.lw-shine { fill: none; stroke: color-mix(in srgb, white 82%, var(--accent)); stroke-width: 2.5; opacity: 0.72; vector-effect: non-scaling-stroke; }
+.lw-meniscus { fill: none; stroke: color-mix(in srgb, white 54%, var(--accent)); stroke-width: 5; opacity: 0.28; vector-effect: non-scaling-stroke; }
+.lw-caustic { fill: none; stroke: color-mix(in srgb, white 68%, var(--accent)); stroke-width: 1.25; opacity: 0.18; vector-effect: non-scaling-stroke; }
+.lw-caustic-a { animation: lw-flow 13s linear infinite reverse; }
+.lw-caustic-b { animation: lw-flow 19s linear infinite; }
 .lw-ripple { fill: none; stroke: color-mix(in srgb, white 55%, var(--accent)); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
 .lw-ripple-a { opacity: 0.32; animation: lw-flow 11s linear infinite; }
 .lw-ripple-b { opacity: 0.22; animation: lw-flow 17s linear infinite reverse; }
-.lw-outline { fill: none; stroke: rgb(var(--edge)); stroke-width: 2; paint-order: stroke; vector-effect: non-scaling-stroke; }
+.lw-outline { fill: none; stroke: color-mix(in srgb, rgb(var(--edge)) 82%, var(--ink)); stroke-width: 2.6; paint-order: stroke; vector-effect: non-scaling-stroke; }
 
 .lw-slosh { transform-box: fill-box; transform-origin: center; will-change: transform; }
 .lw-bob { animation: lw-bob 10s ease-in-out infinite; }
@@ -173,7 +163,7 @@
   50% { transform: translateY(calc(var(--amp, 6px) * -1)); }
 }
 @media (prefers-reduced-motion: reduce) {
-  .lw-bob, .lw-wave-front, .lw-wave-back, .lw-shine, .lw-ripple { animation: none; }
+  .lw-bob, .lw-wave-front, .lw-wave-back, .lw-shine, .lw-ripple, .lw-meniscus, .lw-caustic { animation: none; }
   .lw-slosh { transform: none !important; }
 }
 
@@ -227,17 +217,17 @@
 .draggable { cursor: grab; }
 .draggable:active { cursor: grabbing; }
 
-/* ---- PILLARS (the three-pillar manifesto) ---- */
-.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
-@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }
-.pillar { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; }
-.pillar .pnum { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
-.pillar .psub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.15rem; }
-.pillar h3 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }
-.pillar > p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }
-.pillar ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }
-.pillar li { font-family: var(--mono); font-size: 0.76rem; padding: 0.4rem 0; border-top: 1px solid rgba(var(--edge),0.15); color: var(--ink-dim); display: flex; gap: 0.5rem; }
-.pillar li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.35em; background: var(--accent); }
+/* ---- TENETS (the three-tenet manifesto) ---- */
+.tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
+@media (max-width: 640px) { .tenets { grid-template-columns: 1fr; } }
+.tenet { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; }
+.tenet .pnum { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
+.tenet .psub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.15rem; }
+.tenet h3 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }
+.tenet > p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }
+.tenet ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }
+.tenet li { font-family: var(--mono); font-size: 0.76rem; padding: 0.4rem 0; border-top: 1px solid rgba(var(--edge),0.15); color: var(--ink-dim); display: flex; gap: 0.5rem; }
+.tenet li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.35em; background: var(--accent); }
 
 /* ---- PRINCIPLES GRID ---- */
 .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@@ -257,8 +247,7 @@
 
 /* toggle */
 .toggle { width: 64px; height: 36px; border-radius: 0; border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer;
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: var(--bg-2);
   box-shadow: 3px 3px 0 0 var(--hard-shadow); transition: background 0.25s; }
 .toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 0; background: rgb(var(--edge)); transition: transform 0.22s cubic-bezier(.3,1.4,.5,1); }
 .toggle.on { background: var(--accent); }
@@ -267,12 +256,10 @@
 /* input */
 .field-input { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 0; min-width: 220px;
   border: var(--border-w) solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.1), rgba(var(--glass-tint),0.03));
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
+  background: var(--bg-2); }
 .field-input input { background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 0.85rem; width: 100%; }
 .field-input input::placeholder { color: var(--ink-dim); }
-.field-input:focus-within { box-shadow: 4px 4px 0 0 var(--accent), inset 0 1px 0 rgba(255,255,255,0.3); }
+.field-input:focus-within { box-shadow: 4px 4px 0 0 var(--accent); }
 
 /* segmented */
 .seg { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: 0; overflow: hidden; box-shadow: 3px 3px 0 0 var(--hard-shadow);
diff --git a/artifacts/structured-liquidity/public/structured-liquidity-kit.css b/artifacts/structured-liquidity/public/structured-liquidity-kit.css
index 421cb50..df37707 100644
--- a/artifacts/structured-liquidity/public/structured-liquidity-kit.css
+++ b/artifacts/structured-liquidity/public/structured-liquidity-kit.css
@@ -2,8 +2,8 @@
    STRUCTURED LIQUIDITY — component KIT
    A shadcn-complete library expressed in the design language:
    rigid containers (sharp edges, flat offset shadows, real
-   borders) holding viscous glass surfaces, with one accent
-   carrying every emphasis.
+   borders) holding flat scientific surfaces, with one accent
+   carrying selection and liquid motion between states.
    ============================================================ */
 
 /* ---- gallery scaffold ---- */
@@ -28,8 +28,7 @@
 
 /* glass + flat helpers reused locally */
 .sl-glass-fill {
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));
-  backdrop-filter: blur(10px) saturate(170%); -webkit-backdrop-filter: blur(10px) saturate(170%);
+  background: var(--bg-2);
 }
 
 /* ============================================================
@@ -43,7 +42,7 @@
   transition: transform 0.12s cubic-bezier(.2,.8,.2,1), box-shadow 0.12s; white-space: nowrap;
 }
 .sl-btn.default { background: var(--accent); color: var(--accent-ink); box-shadow: 4px 4px 0 0 var(--hard-shadow); }
-.sl-btn.secondary { background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.05)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 4px 4px 0 0 var(--hard-shadow); }
+.sl-btn.secondary { background: var(--bg-2); box-shadow: 4px 4px 0 0 var(--hard-shadow); }
 .sl-btn.outline { background: transparent; box-shadow: 4px 4px 0 0 var(--hard-shadow); }
 .sl-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-dim); }
 .sl-btn.ghost:hover { color: var(--ink); background: rgba(var(--glass-tint),0.08); transform: none; }
@@ -75,13 +74,12 @@
 .sl-input, .sl-textarea {
   font-family: var(--mono); font-size: 0.82rem; color: var(--ink); width: 100%;
   padding: 0.6rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.1), rgba(var(--glass-tint),0.03));
-  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); outline: none;
+  background: var(--bg-2);
+  box-shadow: none; outline: none;
 }
 .sl-textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
 .sl-input::placeholder, .sl-textarea::placeholder { color: var(--ink-dim); }
-.sl-input:focus, .sl-textarea:focus { box-shadow: 3px 3px 0 0 var(--accent), inset 0 1px 0 rgba(255,255,255,0.25); }
+.sl-input:focus, .sl-textarea:focus { box-shadow: 3px 3px 0 0 var(--accent); }
 .sl-otp { display: flex; gap: 0.5rem; }
 .sl-otp input { width: 42px; height: 48px; text-align: center; font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--ink); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); outline: none; box-shadow: 2px 2px 0 0 var(--hard-shadow); }
 .sl-otp input:focus { box-shadow: 2px 2px 0 0 var(--accent); }
@@ -94,8 +92,8 @@
 .sl-check[aria-checked="true"] .sl-box { background: var(--accent); }
 .sl-box .tick { width: 11px; height: 11px; color: var(--accent-ink); opacity: 0; }
 .sl-check[aria-checked="true"] .sl-box .tick { opacity: 1; }
-.sl-radio { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: 50%; background: rgba(var(--glass-tint),0.06); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; }
-.sl-radio .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0; }
+.sl-radio { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: 50%; background: var(--bg-2); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; overflow: hidden; transition: background var(--motion-fast) var(--ease-liquid); }
+.sl-radio .dot { width: 100%; height: 100%; border-radius: inherit; background: var(--accent); opacity: 0; }
 .sl-radio-item[aria-checked="true"] .sl-radio .dot { opacity: 1; }
 .sl-switch { width: 46px; height: 26px; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer; background: rgba(var(--glass-tint),0.1); box-shadow: 2px 2px 0 0 var(--hard-shadow); transition: background 0.2s; flex: none; }
 .sl-switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: calc(var(--radius) * 0.6); background: rgb(var(--edge)); transition: transform 0.2s cubic-bezier(.3,1.4,.5,1); }
@@ -107,6 +105,17 @@
 .sl-toggle-group button { font-family: var(--mono); font-size: 0.8rem; padding: 0.45rem 0.7rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; display: grid; place-items: center; }
 .sl-toggle-group button:first-child { border-left: none; }
 .sl-toggle-group button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
+.sl-toggle-group.is-liquid { position: relative; isolation: isolate; }
+.sl-toggle-group.is-liquid .sl-toggle-marker {
+  position: absolute; inset-block: 0; left: 0; z-index: 0;
+  width: calc(100% / var(--toggle-count));
+  transform: translateX(calc(var(--toggle-index) * 100%));
+  background: var(--accent);
+  transition: transform var(--motion) var(--ease-liquid-over), width var(--motion) var(--ease-liquid);
+  pointer-events: none;
+}
+.sl-toggle-group.is-liquid button { position: relative; z-index: 1; background: transparent; transition: color var(--motion-fast) var(--ease-liquid); }
+.sl-toggle-group.is-liquid button[aria-pressed="true"] { background: transparent; color: var(--accent-ink); }
 
 /* ============================================================
    SLIDER / PROGRESS
@@ -125,8 +134,7 @@
 .sl-trigger {
   font-family: var(--mono); font-size: 0.82rem; color: var(--ink); cursor: pointer;
   padding: 0.55rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));
-  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  background: var(--bg-2);
   box-shadow: 2px 2px 0 0 var(--hard-shadow); display: inline-flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-width: 160px;
 }
 .sl-trigger .chev { transition: transform 0.2s; color: var(--ink-dim); }
@@ -157,10 +165,18 @@
 /* ============================================================
    TABS
    ============================================================ */
-.sl-tabs .tablist { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); }
-.sl-tabs .tablist button { font-family: var(--mono); font-size: 0.78rem; padding: 0.5rem 0.9rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; }
+.sl-tabs .tablist { position: relative; display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); isolation: isolate; }
+.sl-tabs .tablist button { position: relative; z-index: 1; flex: 1; font-family: var(--body); font-size: 0.78rem; font-weight: 650; padding: 0.5rem 0.9rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: transparent; color: var(--ink-dim); cursor: pointer; transition: color var(--motion-fast) var(--ease-liquid); }
 .sl-tabs .tablist button:first-child { border-left: none; }
-.sl-tabs .tablist button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
+.sl-tabs .tablist button[aria-selected="true"] { background: transparent; color: var(--accent-ink); }
+.sl-tabs .sl-tab-marker {
+  position: absolute; inset-block: 0; left: 0; z-index: 0;
+  width: calc(100% / var(--tab-count));
+  transform: translateX(calc(var(--tab-index) * 100%));
+  background: var(--accent);
+  transition: transform var(--motion) var(--ease-liquid-over), width var(--motion) var(--ease-liquid);
+  pointer-events: none;
+}
 .sl-tabs .panel { display: none; padding-top: 0.9rem; font-size: 0.88rem; color: var(--ink-dim); }
 .sl-tabs .panel.show { display: block; }
 
@@ -260,9 +276,9 @@
 /* ============================================================
    ASPECT RATIO / CARD
    ============================================================ */
-.sl-ratio { width: 100%; aspect-ratio: 16 / 9; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(var(--glass-tint),0.06)); display: grid; place-items: center; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
+.sl-ratio { width: 100%; aspect-ratio: 16 / 9; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 30%, var(--bg-2)); display: grid; place-items: center; font-family: var(--mono); font-size: 0.68rem; color: var(--ink); }
 .sl-card-demo { border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 4px 4px 0 0 var(--hard-shadow); overflow: hidden; background: rgba(var(--glass-tint),0.05); }
-.sl-card-demo .cd-media { aspect-ratio: 16/8; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), rgba(var(--glass-tint),0.1)); border-bottom: var(--border-w) solid rgb(var(--edge)); }
+.sl-card-demo .cd-media { aspect-ratio: 16/8; background: color-mix(in srgb, var(--accent) 34%, var(--bg-2)); border-bottom: var(--border-w) solid rgb(var(--edge)); }
 .sl-card-demo .cd-body { padding: 0.9rem 1rem; }
 .sl-card-demo .cd-body h4 { margin: 0 0 0.3rem; font-size: 1rem; }
 .sl-card-demo .cd-body p { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--ink-dim); }
@@ -414,7 +430,7 @@
 .sl-step-marker svg { width: 14px; height: 14px; }
 .sl-step[data-status="complete"] .sl-step-marker,
 .sl-step[data-status="current"] .sl-step-marker { background: var(--accent); color: var(--accent-ink); }
-.sl-step-copy { display: flex; flex-direction: column; min-width: 0; padding-top: 0.1rem; }
+.sl-step-copy { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; padding: 0.1rem 0.35rem 0 0; background: var(--bg-2); }
 .sl-step-copy strong { font-size: 0.78rem; }
 .sl-step-copy > span { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-dim); }
 @media (max-width: 640px) {
@@ -646,6 +662,143 @@
   text-transform: uppercase;
   color: var(--ink-dim);
 }
+/* Persistent portfolio identity cards: the default for company and venture grids. */
+.sl-portfolio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
+  gap: 1rem;
+}
+.sl-portfolio-card {
+  display: flex;
+  min-height: 290px;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--border-w) solid rgb(var(--edge));
+  border-radius: var(--radius);
+  background: var(--bg-2);
+  color: var(--ink);
+  box-shadow: 4px 4px 0 0 var(--hard-shadow);
+  text-decoration: none;
+  transition: transform var(--motion-fast) var(--ease-liquid), box-shadow var(--motion-fast) var(--ease-liquid);
+}
+.sl-portfolio-card[href] { cursor: pointer; }
+.sl-portfolio-card[href]:hover,
+.sl-portfolio-card[href]:focus-visible {
+  transform: translate(-1px, -1px);
+  box-shadow: 6px 6px 0 0 var(--hard-shadow);
+}
+.sl-portfolio-card[href]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 4px;
+}
+.sl-portfolio-card-media {
+  position: relative;
+  display: grid;
+  min-height: 9.5rem;
+  flex: 0 0 9.5rem;
+  place-items: center;
+  padding: 1.25rem;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+}
+.sl-portfolio-card-logo {
+  display: grid;
+  min-width: 4.25rem;
+  min-height: 4.25rem;
+  place-items: center;
+  color: var(--ink);
+  font-family: var(--display);
+  font-size: clamp(1.35rem, 3vw, 2rem);
+  font-weight: 900;
+  letter-spacing: -0.04em;
+}
+.sl-portfolio-card-logo > img,
+.sl-portfolio-card-logo > svg {
+  display: block;
+  width: min(100%, 11rem);
+  max-height: 5.5rem;
+  object-fit: contain;
+}
+.sl-portfolio-card-body {
+  display: flex;
+  min-height: 9.5rem;
+  flex: 1;
+  flex-direction: column;
+  padding: 1rem;
+  background: var(--neg);
+  color: var(--neg-ink);
+}
+.sl-portfolio-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.sl-portfolio-card-media > .sl-portfolio-card-tags {
+  position: absolute;
+  inset: 0.65rem 0.65rem auto;
+  z-index: 1;
+}
+.sl-portfolio-card-body > .sl-portfolio-card-tags { margin-bottom: 0.7rem; }
+.sl-portfolio-card-tag {
+  padding: 0.28rem 0.45rem;
+  border: 1px solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--neg) 80%, #000000);
+  color: var(--neg-ink);
+  font-family: var(--mono);
+  font-size: 0.56rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-transform: uppercase;
+  box-shadow: 2px 2px 0 0 var(--hard-shadow);
+}
+.sl-portfolio-card-title {
+  margin: 0;
+  color: var(--neg-ink);
+  font-family: var(--display);
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1.15;
+}
+.sl-portfolio-card-description {
+  display: -webkit-box;
+  margin: 0.55rem 0 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  color: color-mix(in srgb, var(--neg-ink) 72%, transparent);
+  font-family: var(--body);
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+.sl-portfolio-card-action {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.28rem;
+  margin-top: auto;
+  padding-top: 1rem;
+  color: var(--neg-ink);
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--neg-ink) 58%, transparent);
+  text-underline-offset: 0.35rem;
+  text-transform: uppercase;
+}
+.sl-portfolio-card-action svg { width: 0.75rem; height: 0.75rem; }
+@media (max-width: 560px) {
+  .sl-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
+  .sl-portfolio-card { min-height: 270px; }
+  .sl-portfolio-card-media { min-height: 8rem; flex-basis: 8rem; padding: 0.8rem; }
+  .sl-portfolio-card-body { padding: 0.8rem; }
+  .sl-portfolio-card-description { font-size: 0.72rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sl-portfolio-card { transition: none; }
+}
 
 /* Field-sourced from recurring update, signal, and changelog streams. */
 .sl-activity-feed {
@@ -867,3 +1020,261 @@
   margin-top: auto;
   padding-top: 0.2rem;
 }
+
+
+/* Field-sourced from Dropship's stacked membership economics view. */
+.sl-unit-economics {
+  width: 100%;
+  margin: 0;
+}
+.sl-unit-economics-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.7rem;
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+.sl-unit-economics-head strong {
+  color: var(--accent);
+  font-size: 0.82rem;
+}
+.sl-unit-economics-chart {
+  display: flex;
+  width: 100%;
+  height: 58px;
+  overflow: hidden;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+  box-shadow: 5px 5px 0 0 var(--hard-shadow);
+}
+.sl-unit-economics-chart > span {
+  display: block;
+  min-width: 3px;
+  height: 100%;
+  border-right: var(--border-w) solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--accent) var(--allocation-strength), var(--bg-2));
+}
+.sl-unit-economics-chart > span:last-child {
+  border-right: 0;
+  background:
+    linear-gradient(135deg, rgb(var(--glass-tint) / 0.16) 25%, transparent 25%) -6px 0 / 12px 12px,
+    linear-gradient(225deg, rgb(var(--glass-tint) / 0.1) 25%, transparent 25%) -6px 0 / 12px 12px,
+    var(--accent);
+}
+.sl-unit-economics-legend {
+  display: grid;
+  margin-top: 1rem;
+  border-top: var(--border-w) solid rgb(var(--edge));
+}
+.sl-unit-economics-legend > div {
+  min-height: 54px;
+  display: grid;
+  grid-template-columns: 13px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.6rem;
+  border-bottom: 1px solid rgb(var(--edge) / 0.45);
+}
+.sl-unit-economics-legend i {
+  width: 11px;
+  height: 11px;
+  border: 1px solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--accent) var(--allocation-strength), var(--bg-2));
+}
+.sl-unit-economics-legend span {
+  min-width: 0;
+  display: grid;
+  gap: 0.2rem;
+}
+.sl-unit-economics-legend strong,
+.sl-unit-economics-legend b {
+  font: 400 0.64rem/1.2 var(--mono);
+}
+.sl-unit-economics-legend strong {
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.sl-unit-economics-legend small {
+  color: var(--ink-dim);
+  font-size: 0.7rem;
+  line-height: 1.4;
+}
+.sl-unit-economics-note {
+  margin: 0.8rem 0 0;
+  color: var(--ink-dim);
+  font: 0.62rem/1.55 var(--mono);
+}
+
+/* Field-sourced from Construct: a complete identity summary, not a decorative avatar. */
+.sl-profile-card {
+  width: min(100%, 420px);
+  overflow: hidden;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
+}
+.sl-profile-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.65rem 0.75rem;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  font: 650 0.68rem/1 var(--body);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.sl-profile-card-status::before {
+  display: inline-block;
+  width: 0.48rem;
+  height: 0.48rem;
+  margin-right: 0.45rem;
+  background: var(--accent);
+  border: 1px solid rgb(var(--edge));
+  content: "";
+}
+.sl-profile-card-image {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1.55 / 1;
+  overflow: hidden;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--accent) 24%, var(--bg-2));
+}
+.sl-profile-card-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center 24%;
+  filter: grayscale(1) contrast(1.04);
+}
+.sl-profile-card-initials {
+  display: grid;
+  place-items: center;
+  width: clamp(5rem, 24%, 7rem);
+  aspect-ratio: 1;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--accent);
+  color: var(--accent-ink);
+  box-shadow: 5px 5px 0 var(--hard-shadow);
+  font: 750 clamp(1.5rem, 4vw, 2.4rem)/1 var(--display);
+  letter-spacing: -0.05em;
+}
+.sl-profile-card-summary {
+  margin: 0;
+  padding: 0.9rem 0.8rem;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  background: var(--accent);
+  color: var(--accent-ink);
+  font: 720 0.94rem/1.4 var(--body);
+}
+.sl-profile-card-facts { margin: 0; }
+.sl-profile-card-facts > div {
+  display: grid;
+  grid-template-columns: minmax(5rem, 0.7fr) minmax(0, 1.3fr);
+  gap: 0.75rem;
+  padding: 0.68rem 0.8rem;
+  border-bottom: 1px solid rgb(var(--edge) / 0.45);
+}
+.sl-profile-card-facts > div:last-child { border-bottom: 0; }
+.sl-profile-card-facts dt {
+  font: 400 0.62rem/1.35 var(--mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-dim);
+}
+.sl-profile-card-facts dd {
+  margin: 0;
+  text-align: right;
+  font: 650 0.76rem/1.35 var(--body);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-toggle-group.is-liquid .sl-toggle-marker,
+  .sl-tabs .sl-tab-marker {
+    transition: none;
+  }
+}
+
+/* Stateful navigation uses one moving marker; buttons never navigate the specimen. */
+.sl-navbar {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  flex-wrap: wrap;
+  padding: 0.55rem 0.7rem;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+  box-shadow: 2px 2px 0 0 var(--hard-shadow);
+}
+.sl-navbar .nb-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font: 750 1rem/1 var(--display);
+  letter-spacing: -0.02em;
+}
+.sl-navbar .nb-links {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  isolation: isolate;
+  border: 1px solid rgb(var(--edge));
+}
+.sl-navbar .nb-liquid-marker {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  z-index: 0;
+  width: 33.333%;
+  transform: translateX(calc(var(--nb-index, 0) * 100%));
+  background: var(--accent);
+  transition: transform var(--motion) var(--ease-liquid-over);
+  pointer-events: none;
+}
+.sl-navbar .nb-link {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.45rem 0.7rem;
+  border: 0;
+  border-left: 1px solid rgb(var(--edge) / 0.35);
+  background: transparent;
+  color: var(--ink-dim);
+  font: 650 0.76rem/1 var(--body);
+  cursor: pointer;
+  transition: color var(--motion-fast) var(--ease-liquid);
+}
+.sl-navbar .nb-link:first-of-type { border-left: 0; }
+.sl-navbar .nb-link[aria-current="page"] { color: var(--accent-ink); }
+.sl-navbar .nb-link svg { width: 15px; height: 15px; stroke-width: 1.8; }
+.sl-navbar .nb-links { margin-left: auto; }
+.sl-navbar .nb-right { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
+
+.sl-navmenu { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); box-shadow: 2px 2px 0 0 var(--hard-shadow); }
+.sl-navmenu .nm-item { position: relative; }
+.sl-navmenu .nm-item > button { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.8rem; border: 0; border-left: 1px solid rgb(var(--edge) / 0.25); background: var(--bg-2); color: var(--ink-dim); font: 650 0.78rem/1 var(--body); cursor: pointer; }
+.sl-navmenu .nm-item:first-child > button { border-left: 0; }
+.sl-navmenu .nm-item:hover > button, .sl-navmenu .nm-item:focus-within > button { background: var(--accent); color: var(--accent-ink); }
+.sl-navmenu .nm-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 0.35rem; border: var(--border-w) solid rgb(var(--edge)); background: var(--bg-2); box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--motion-fast) var(--ease-liquid), transform var(--motion) var(--ease-liquid-over); z-index: 50; }
+.sl-navmenu .nm-item:hover .nm-panel, .sl-navmenu .nm-item:focus-within .nm-panel { opacity: 1; pointer-events: auto; transform: none; }
+.sl-navmenu .nm-panel a { display: block; padding: 0.5rem 0.6rem; color: var(--ink); font: 0.78rem/1.3 var(--body); text-decoration: none; }
+.sl-navmenu .nm-panel a:hover, .sl-navmenu .nm-panel a:focus-visible { background: var(--accent); color: var(--accent-ink); }
+
+@media (max-width: 600px) {
+  .sl-navbar .nb-right { width: 100%; margin-left: 0; flex-wrap: wrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-navbar .nb-liquid-marker,
+  .sl-navmenu .nm-panel {
+    transition: none;
+  }
+}
diff --git a/artifacts/structured-liquidity/public/structured-liquidity.css b/artifacts/structured-liquidity/public/structured-liquidity.css
index 280c6f2..08bce7e 100644
--- a/artifacts/structured-liquidity/public/structured-liquidity.css
+++ b/artifacts/structured-liquidity/public/structured-liquidity.css
@@ -1,60 +1,91 @@
 /* ============================================================
-   STRUCTURED LIQUIDITY — a design language built on three
-   pillars: Rigid Containment (sharp 90° corners, flat blurless
-   shadows, grid discipline), Viscous Depth (semi-transparent
-   liquid glass that reflects light), and Semantic Clarity
-   (strict text + icon pairings). This stylesheet IS the specimen.
+   STRUCTURED LIQUIDITY — Neobrutalist structure. Liquid motion.
+   Scientific modern clarity. This stylesheet IS
+   the specimen.
    ============================================================ */
 
 :root {
   /* ---- tunable knobs (driven by Tweaks) ---- */
-  --accent: #a388ee;          /* neobrutalism.dev purple */
-  --accent-ink: #000000;      /* text that sits on accent */
-  --glass-blur: 18px;
-  --glass-tint: 255 255 255;  /* rgb channels for glass fill */
-  --glass-alpha: 0.07;
+  --accent: #a388ee; /* neobrutalism.dev purple */
+  --accent-ink: #000000; /* text that sits on accent */
+  --glass-blur: 14px;
+  --glass-tint: 255 255 255; /* rgb channels for glass fill */
+  --glass-alpha: 0.72;
   --border-w: 2px;
-  --hard-x: 7px;
-  --hard-y: 7px;
+  --hard-x: 5px;
+  --hard-y: 5px;
   --radius: 0px;
-  --content-w: 1200px;
   --shell-w: 1280px;
+  --content-w: var(--shell-w);
   --viewport-gutter: 4vw;
+  --body-surface: var(--bg);
   --floating-ui-clearance: 96px;
 
-  /* ---- fixed palette (neobrutalism.dev) ---- */
-  --bg: #272933;
-  --bg-2: #1f2028;
-  --ink: #e6e6e6;             /* foreground */
-  --ink-dim: #9da0ab;
-  --edge: 0 0 0;              /* neobrutalism black border (rgb) */
+  /* ---- Scientific Modern Clarity, informed by Swiss modernism and the International Typographic Style ---- */
+  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);
+  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);
+  --measure-reading: 62ch;
+  --measure-caption: 48ch;
+  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);
+  --section-space: clamp(4rem, 9vw, 9rem);
+  --clarity-gap: clamp(1.25rem, 3vw, 3rem);
+  --rule-hairline: 1px;
+  --diagram-line: color-mix(in srgb, var(--ink) 72%, transparent);
+  --diagram-muted: color-mix(in srgb, var(--ink) 42%, transparent);
+
+  /* ---- light-first paper palette ---- */
+  --bg: #f2f0ea;
+  --bg-2: #ffffff;
+  --ink: #111111; /* foreground */
+  --ink-dim: #5d5d59;
+  --edge: 0 0 0; /* neobrutalism black border (rgb) */
   --hard-shadow: #000000;
-  --neg: #3c3f4b;             /* negative / destructive surface (gray, never red) */
-  --neg-ink: #f0f0f2;
+  --neg: #242424; /* negative / destructive surface (gray, never red) */
+  --neg-ink: #ffffff;
 
-  --display: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --body: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
+  --display: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;
 }
 
 /* tighter rhythm — denser, less airy */
 
 [data-mode="light"] {
-  --bg: #dfe5f2;
+  --bg: #f2f0ea;
   --bg-2: #ffffff;
-  --ink: #000000;
-  --ink-dim: #5b5f6b;
+  --ink: #111111;
+  --ink-dim: #5d5d59;
   --edge: 0 0 0;
   --hard-shadow: #000000;
-  --neg: #16171c;             /* near-black negative surface in light mode */
+  --neg: #16171c; /* near-black negative surface in light mode */
   --neg-ink: #ffffff;
   --glass-tint: 255 255 255;
-  --glass-alpha: 0.55;
+  --glass-alpha: 0.72;
 }
 
-* { box-sizing: border-box; }
+[data-mode="dark"] {
+  /* Dark mode is color-responsive: the active accent tints the atmospheric
+     field while tactile components remain charcoal. There is no black mode. */
+  --bg: color-mix(in srgb, var(--accent) 18%, #100b16);
+  --bg-2: color-mix(in srgb, var(--accent) 27%, #15101c);
+  --ink: #f6f2f8;
+  --ink-dim: #b9b0bf;
+  --edge: 0 0 0;
+  --hard-shadow: #000000;
+  --neg: #343434;
+  --neg-ink: #ffffff;
+  --glass-tint: 255 255 255;
+  --glass-alpha: 0.08;
+}
+
+* {
+  box-sizing: border-box;
+}
 
-html { scroll-behavior: auto; background: var(--bg); }
+html {
+  scroll-behavior: auto;
+  background: var(--bg);
+}
 
 body {
   margin: 0;
@@ -68,40 +99,33 @@ body {
   overflow-x: hidden;
 }
 
-::selection { background: var(--accent); color: var(--accent-ink); }
+::selection {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
 
 /* ============================================================
-   BACKDROP — a full-document-height iridescent field the glass
-   refracts. Not fixed (fixed/attachment:fixed only paint at the
-   document top in capture/print contexts) — it spans the whole
-   page so every section is tinted and nothing renders flat-black.
+   BACKDROP — flat paper plus a measured technical grid. Liquid
+   belongs to interaction and continuity, not decorative scenery.
    ============================================================ */
 
 .field {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -2;
   overflow: hidden;
   pointer-events: none;
-  background:
-    radial-gradient(52vw 32vh at 12% 2%,  rgba(124, 60, 255, 0.50), transparent 70%),
-    radial-gradient(46vw 30vh at 90% 10%, rgba(176, 60, 255, 0.42), transparent 70%),
-    radial-gradient(52vw 30vh at 78% 30%, rgba(214, 70, 255, 0.30), transparent 72%),
-    radial-gradient(46vw 28vh at 16% 45%, rgba(91, 60, 255, 0.38), transparent 72%),
-    radial-gradient(50vw 28vh at 84% 60%, rgba(124, 60, 255, 0.34), transparent 72%),
-    radial-gradient(46vw 26vh at 22% 74%, rgba(176, 60, 255, 0.30), transparent 72%),
-    radial-gradient(52vw 30vh at 80% 90%, rgba(214, 70, 255, 0.26), transparent 72%),
-    radial-gradient(46vw 26vh at 18% 98%, rgba(91, 60, 255, 0.34), transparent 72%);
-  background-repeat: no-repeat;
-  animation: fieldshift 30s ease-in-out infinite alternate;
-}
-[data-mode="light"] .field { opacity: 0.55; }
-@keyframes fieldshift {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-3vw); }
-}
-@media (prefers-reduced-motion: reduce) { .field { animation: none; } }
+  background: var(--bg);
+}
+[data-mode="light"] .field {
+  opacity: 1;
+}
+[data-mode="dark"] .field {
+  opacity: 1;
+}
 
 .field .grid {
   position: absolute;
@@ -110,66 +134,40 @@ body {
     linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),
     linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);
   background-size: 64px 64px;
-  mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
-  -webkit-mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
+  opacity: 0.7;
 }
 
 .grain {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.4;
-  mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  display: none;
 }
 
 /* ============================================================
-   GLASS-BRUTAL PRIMITIVE — frosted material + brutal edge
+   STRUCTURAL SURFACE — flat by default. Add blur only to transient
+   navigation, menus, overlays, and other moving state boundaries.
    ============================================================ */
 
 .glass {
   position: relative;
-  background:
-    linear-gradient(135deg, rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)), rgba(var(--glass-tint), var(--glass-alpha)));
-  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
-  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
+  background: var(--bg-2);
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
-  box-shadow:
-    var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow),         /* the brutal hard shadow */
-    inset 0 1px 0 rgba(255,255,255,0.45),                        /* top specular */
-    inset 0 -1px 0 rgba(255,255,255,0.06),
-    inset 0 0 40px rgba(255,255,255,0.04);
+  box-shadow: none;
 }
 /* moving sheen + cursor specular */
-.glass::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background: radial-gradient(
-    180px circle at var(--mx, 50%) var(--my, 0%),
-    rgba(255,255,255,0.22), transparent 60%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-.glass:hover::before { opacity: 1; }
+.glass::before,
 .glass::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 55%);
-  background-size: 250% 250%;
-  background-position: 100% 100%;
-  opacity: 0.7;
+  content: none;
 }
 
-.flat {            /* brutalist flat (no glass) — for loud accent blocks */
+.flat {
+  /* brutalist flat (no glass) — for loud accent blocks */
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
   box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
@@ -191,41 +189,128 @@ body {
 }
 .eyebrow::before {
   content: "";
-  width: 9px; height: 9px;
+  width: 9px;
+  height: 9px;
   background: var(--accent);
   display: inline-block;
 }
 
-h1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
+h1,
+h2,
+h3 {
+  font-weight: 800;
+  line-height: 0.98;
+  letter-spacing: -0.02em;
+  margin: 0;
+  text-wrap: balance;
+}
 
 .section-title {
-  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
+  font-size: clamp(2rem, 4.2vw, 4.25rem);
+  line-height: 0.93;
+  letter-spacing: -0.045em;
   margin: 0.25em 0 0.3em;
 }
-.lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-dim); max-width: 60ch; text-wrap: pretty; }
+.lead {
+  font-size: clamp(1rem, 1.3vw, 1.18rem);
+  color: var(--ink-dim);
+  max-width: 60ch;
+  text-wrap: pretty;
+}
 
-.accent { color: var(--accent); }
-.mono { font-family: var(--mono); }
+.accent {
+  color: var(--accent);
+}
+.mono {
+  font-family: var(--mono);
+}
 
 /* ============================================================
    LAYOUT
    ============================================================ */
 
 .wrap,
-.sl-site-content { width: min(var(--content-w), calc(100vw - (var(--viewport-gutter) * 2))); margin-inline: auto; }
-.shell,
-.sl-site-shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }
-section { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; }
-.section-head { max-width: 70ch; margin-bottom: 1.1rem; }
+.shell {
+  width: min(var(--shell-w), calc(100vw - var(--viewport-gutter)));
+  margin-inline: auto;
+}
+.sl-site-content,
+.sl-site-shell {
+  width: min(100%, var(--shell-w));
+  max-width: calc(100vw - var(--viewport-gutter));
+  margin-inline: auto;
+}
+.sl-site-body {
+  background: var(--body-surface);
+}
+section {
+  padding: clamp(3.5rem, 8vw, 7.5rem) 0;
+  position: relative;
+  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+.section-head {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(280px, 4fr);
+  grid-template-rows: auto auto;
+  column-gap: var(--grid-gutter);
+  max-width: none;
+  margin-bottom: clamp(2rem, 4vw, 4rem);
+}
+.section-head .eyebrow {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  margin-bottom: 0.8rem;
+}
+.section-head .section-title {
+  grid-column: 1;
+  grid-row: 2;
+}
+.section-head .lead {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: end;
+  margin: 0;
+}
+@media (max-width: 720px) {
+  .section-head {
+    grid-template-columns: 1fr;
+  }
+  .section-head .eyebrow,
+  .section-head .section-title,
+  .section-head .lead {
+    grid-column: 1;
+    grid-row: auto;
+  }
+  .section-head .lead { margin-top: 1rem; }
+}
 
-.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
-.reveal.in { opacity: 1; transform: none; }
+.reveal {
+  opacity: 0;
+  transform: translateY(26px);
+  transition:
+    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
+    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.reveal.in {
+  opacity: 1;
+  transform: none;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
-  html { scroll-behavior: auto; }
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 @media print {
-  .reveal { opacity: 1 !important; transform: none !important; }
+  .reveal {
+    opacity: 1 !important;
+    transform: none !important;
+  }
 }
diff --git a/artifacts/structured-liquidity/scripts/build-registry.mjs b/artifacts/structured-liquidity/scripts/build-registry.mjs
index f7b5b8a..17ab190 100644
--- a/artifacts/structured-liquidity/scripts/build-registry.mjs
+++ b/artifacts/structured-liquidity/scripts/build-registry.mjs
@@ -24,7 +24,13 @@
    window.location.origin, so the copied command always matches
    wherever the registry is being served.
    ============================================================ */
-import { readFileSync, writeFileSync, mkdirSync, readdirSync, rmSync } from "node:fs";
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  readdirSync,
+  rmSync,
+} from "node:fs";
 import { join, dirname, basename } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -41,7 +47,9 @@ const PUBLIC = join(ROOT, "public");
 const WRITE_DIR = process.env.REGISTRY_OUT_DIR || PUBLIC;
 const OUT_DIR = join(WRITE_DIR, "r");
 
-const BASE_URL = (process.env.REGISTRY_BASE_URL || "https://structured.glass").replace(/\/+$/, "");
+const BASE_URL = (
+  process.env.REGISTRY_BASE_URL || "https://structured.glass"
+).replace(/\/+$/, "");
 const itemUrl = (name) => `${BASE_URL}/r/${name}.json`;
 
 const BASE_NAME = "structured-liquidity";
@@ -99,7 +107,8 @@ for (const file of files) {
   for (const spec of specs) {
     if (spec.startsWith("@/components/ui/")) {
       const dep = spec.slice("@/components/ui/".length).split("/")[0];
-      if (componentNames.has(dep) && dep !== name) registryDependencies.add(itemUrl(dep));
+      if (componentNames.has(dep) && dep !== name)
+        registryDependencies.add(itemUrl(dep));
     } else if (spec.startsWith("@/lib/utils")) {
       registryDependencies.add("utils");
     } else if (spec.startsWith("@/") || spec.startsWith(".")) {
@@ -206,26 +215,39 @@ const JS_FILES = ["structured-liquidity-kit.js"];
 
 const cssVars = {
   theme: {
-    "accent": "#a388ee",
+    accent: "#a388ee",
     "accent-ink": "#000000",
-    "bg": "#272933",
-    "bg-2": "#1f2028",
-    "ink": "#e6e6e6",
-    "ink-dim": "#9da0ab",
-    "edge": "0 0 0",
+    bg: "#f2f0ea",
+    "bg-2": "#ffffff",
+    ink: "#111111",
+    "ink-dim": "#5d5d59",
+    edge: "0 0 0",
     "hard-shadow": "#000000",
-    "neg": "#3c3f4b",
-    "neg-ink": "#f0f0f2",
-    "glass-blur": "18px",
+    neg: "#242424",
+    "neg-ink": "#ffffff",
+    "glass-blur": "14px",
     "glass-tint": "255 255 255",
-    "glass-alpha": "0.07",
+    "glass-alpha": "0.72",
     "border-w": "2px",
-    "hard-x": "7px",
-    "hard-y": "7px",
-    "radius": "0px",
-    "display": '"Inter","Helvetica Neue",system-ui,sans-serif',
-    "body": '"Inter","Helvetica Neue",system-ui,sans-serif',
-    "mono": '"Space Mono",ui-monospace,"SFMono-Regular",monospace',
+    "hard-x": "5px",
+    "hard-y": "5px",
+    radius: "0px",
+    display: '"Inter","Helvetica Neue",Arial,system-ui,sans-serif',
+    body: '"Inter","Helvetica Neue",Arial,system-ui,sans-serif',
+    mono: '"Space Mono","SFMono-Regular",ui-monospace,monospace',
+    "text-display-xl": "clamp(4.2rem, 10.5vw, 9.5rem)",
+    "text-display-lg": "clamp(2.6rem, 5.5vw, 5.25rem)",
+    "measure-reading": "62ch",
+    "measure-caption": "48ch",
+    "grid-gutter": "clamp(1rem, 2.5vw, 2.5rem)",
+    "section-space": "clamp(4rem, 9vw, 9rem)",
+    "clarity-gap": "clamp(1.25rem, 3vw, 3rem)",
+    "rule-hairline": "1px",
+    "ease-liquid": "cubic-bezier(.22,1,.36,1)",
+    "ease-liquid-over": "cubic-bezier(.34,1.4,.5,1)",
+    "motion-fast": "160ms",
+    motion: "340ms",
+    "motion-slow": "500ms",
   },
 };
 
@@ -250,8 +272,13 @@ const baseItem = {
   type: "registry:style",
   title: "Structured Liquidity",
   description:
-    "The Structured Liquidity design language base: theme tokens plus the three distributable stylesheets and the kit interaction script. Install this first — every component depends on it.",
-  dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-react"],
+    "The Structured Liquidity design language base: Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it.",
+  dependencies: [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+    "lucide-react",
+  ],
   registryDependencies: ["utils"],
   cssVars,
   files: baseFiles,
@@ -263,13 +290,19 @@ const agentItem = {
   type: "registry:item",
   title: "Structured Liquidity Agent Bundle",
   description:
-    "Install Structured Liquidity plus a persistent local agent skill before the first UI edit.",
+    "Install the Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity language plus its persistent local agent skill before the first UI edit.",
   registryDependencies: [itemUrl(BASE_NAME)],
   files: [
     {
       path: "registry/rules/structured-liquidity/SKILL.md",
       content: readFileSync(
-        join(REPO_ROOT, ".agents", "skills", "structured-liquidity", "SKILL.md"),
+        join(
+          REPO_ROOT,
+          ".agents",
+          "skills",
+          "structured-liquidity",
+          "SKILL.md",
+        ),
         "utf8",
       ),
       type: "registry:file",
@@ -283,13 +316,25 @@ const agentItem = {
 rmSync(OUT_DIR, { recursive: true, force: true });
 mkdirSync(OUT_DIR, { recursive: true });
 
-writeFileSync(join(OUT_DIR, `${BASE_NAME}.json`), JSON.stringify(baseItem, null, 2) + "\n");
-writeFileSync(join(OUT_DIR, `${agentItem.name}.json`), JSON.stringify(agentItem, null, 2) + "\n");
+writeFileSync(
+  join(OUT_DIR, `${BASE_NAME}.json`),
+  JSON.stringify(baseItem, null, 2) + "\n",
+);
+writeFileSync(
+  join(OUT_DIR, `${agentItem.name}.json`),
+  JSON.stringify(agentItem, null, 2) + "\n",
+);
 for (const { name, item } of uiItems) {
-  writeFileSync(join(OUT_DIR, `${name}.json`), JSON.stringify(item, null, 2) + "\n");
+  writeFileSync(
+    join(OUT_DIR, `${name}.json`),
+    JSON.stringify(item, null, 2) + "\n",
+  );
 }
 for (const { name, item } of templateItems) {
-  writeFileSync(join(OUT_DIR, `${name}.json`), JSON.stringify(item, null, 2) + "\n");
+  writeFileSync(
+    join(OUT_DIR, `${name}.json`),
+    JSON.stringify(item, null, 2) + "\n",
+  );
 }
 
 const registry = {
@@ -312,7 +357,10 @@ const registry = {
     ...items,
   ],
 };
-writeFileSync(join(WRITE_DIR, "registry.json"), JSON.stringify(registry, null, 2) + "\n");
+writeFileSync(
+  join(WRITE_DIR, "registry.json"),
+  JSON.stringify(registry, null, 2) + "\n",
+);
 
 console.log(
   `registry: wrote ${uiItems.length + templateItems.length + 2} items to public/r/ + public/registry.json (base ${BASE_URL})`,
diff --git a/artifacts/structured-liquidity/src/App.tsx b/artifacts/structured-liquidity/src/App.tsx
index 66b90a1..ba2f205 100644
--- a/artifacts/structured-liquidity/src/App.tsx
+++ b/artifacts/structured-liquidity/src/App.tsx
@@ -4,7 +4,7 @@ import { ToastProvider, Toaster } from "@/components/ui/toast";
 import { Backdrop } from "@/components/site/Backdrop";
 import { Nav } from "@/components/site/Nav";
 import { Hero } from "@/components/site/Hero";
-import { Pillars } from "@/components/site/Pillars";
+import { Tenets } from "@/components/site/Tenets";
 import { Components } from "@/components/site/Components";
 import { Showcase } from "@/components/site/Showcase";
 import { Adopt } from "@/components/site/Adopt";
@@ -22,7 +22,7 @@ export function App() {
       <Backdrop />
       <Nav />
       <Hero />
-      <Pillars />
+      <Tenets />
       <Components />
       <Showcase />
       <Adopt />
diff --git a/artifacts/structured-liquidity/src/adopters.json b/artifacts/structured-liquidity/src/adopters.json
index f32fac3..1a39685 100644
--- a/artifacts/structured-liquidity/src/adopters.json
+++ b/artifacts/structured-liquidity/src/adopters.json
@@ -1,5 +1,5 @@
 {
-  "reviewedAt": "2026-08-09",
+  "reviewedAt": "2026-08-18",
   "projects": [
     {
       "id": "interspace-ventures",
@@ -13,7 +13,7 @@
       "shot": "interspace-ventures.png",
       "shotAlt": "Interspace Ventures strategic-finance website using Structured Liquidity",
       "description": "The operating home for Interspace advisory, ventures, portfolio intelligence, and operator networks, using rigid navigation, comparison grids, metric surfaces, and the canonical purple register.",
-      "adoption": ["structured-containment", "liquid-depth", "semantic-clarity"],
+      "adoption": ["neobrutalist-structure", "liquid-depth", "scientific-clarity"],
       "absorbedComponents": ["filter-toolbar", "logo-grid", "site-shell", "stat", "testimonial-card", "timeline"],
       "candidatePatterns": ["comparison-grid"]
     },
@@ -29,7 +29,7 @@
       "shot": "cosmograph-space.png",
       "shotAlt": "Cosmograph research universe using a Structured Liquidity cockpit",
       "description": "An immersive research universe with a rigid flight deck, persistent command dock, glass detail surfaces, and square telemetry controls orbiting a live WebGL scene.",
-      "adoption": ["structured-containment", "liquid-depth", "semantic-clarity"],
+      "adoption": ["neobrutalist-structure", "liquid-depth", "scientific-clarity"],
       "absorbedComponents": ["detail-panel", "drawer", "filter-toolbar"],
       "candidatePatterns": ["telemetry-cockpit", "target-reticle"]
     },
@@ -45,7 +45,7 @@
       "shot": null,
       "shotAlt": "Exobase website operating system",
       "description": "The multi-tenant website operating system behind Interspace properties, carrying Structured Liquidity through reusable tenant chrome, content blocks, delivery controls, and portfolio surfaces.",
-      "adoption": ["structured-containment", "semantic-clarity"],
+      "adoption": ["neobrutalist-structure", "scientific-clarity"],
       "absorbedComponents": ["filter-toolbar", "site-shell"],
       "candidatePatterns": ["tenant-switcher", "release-control-panel"]
     },
@@ -60,8 +60,8 @@
       "tag": "Investment syndicate",
       "shot": "2daysearly.png",
       "shotAlt": "2 Days Early investment-syndicate website built on Structured Liquidity",
-      "description": "An operator-led fintech investment syndicate using the structured-containment half of the language with a green accent, sharp portfolio grids, stat rails, and profile-driven storytelling.",
-      "adoption": ["structured-containment", "semantic-clarity"],
+      "description": "An operator-led fintech investment syndicate using the neobrutalist structure of the language with a green accent, sharp portfolio grids, stat rails, and profile-driven storytelling.",
+      "adoption": ["neobrutalist-structure", "scientific-clarity"],
       "absorbedComponents": ["logo-grid", "marquee", "profile-header", "section-header", "stat"],
       "candidatePatterns": []
     },
@@ -77,7 +77,7 @@
       "shot": "bumblebee-showcase.jpg",
       "shotAlt": "Bumblebee daycare portal for Brooklyn families",
       "description": "A daycare portal for Brooklyn families, using rigid black-bordered navigation, flat shadows, warm editorial cards, caregiver trust signals, and clear paths to program, testimonials, and visits.",
-      "adoption": ["structured-containment", "semantic-clarity"],
+      "adoption": ["neobrutalist-structure", "scientific-clarity"],
       "absorbedComponents": ["card", "section-header", "testimonial-card"],
       "candidatePatterns": ["daily-rhythm", "family-faq", "credential-strip", "location-card"]
     },
@@ -93,7 +93,7 @@
       "shot": "universe-audio.png",
       "shotAlt": "Universe audio platform in development",
       "description": "A spectral music platform whose waveform, now-playing surface, and transport controls seeded the media primitives now shipped by the main library.",
-      "adoption": ["structured-containment", "liquid-depth", "semantic-clarity"],
+      "adoption": ["neobrutalist-structure", "liquid-depth", "scientific-clarity"],
       "absorbedComponents": ["media-player", "waveform"],
       "candidatePatterns": ["spectral-mixer"]
     },
@@ -101,18 +101,50 @@
       "id": "observatory",
       "name": "Observatory",
       "domain": "observatory.bio",
-      "href": null,
+      "href": "https://observatory-staging.up.railway.app",
       "repository": "Interspace-Ventures/observatory",
       "lifecycle": "staging",
-      "routeStatus": "private",
+      "routeStatus": "verified",
       "tag": "Scientific workspace",
-      "shot": null,
-      "shotAlt": "Observatory scientific workspace in private staging",
-      "description": "A connected gene-analysis workspace with a persistent data rail, genomic and protein panels, report actions, and a multimodal command composer.",
-      "adoption": ["structured-containment", "liquid-depth", "semantic-clarity"],
+      "shot": "observatory-bio.png",
+      "shotAlt": "Observatory biology workspace landing page using editorial scientific modernism",
+      "description": "A scientific workspace for connected biological evidence, using an editorial research grid, oversized hierarchy, technical labeling, and one continuous visual thread from gene to protein to structure.",
+      "adoption": ["neobrutalist-structure", "liquid-depth", "scientific-clarity"],
       "absorbedComponents": ["detail-panel", "omnibar", "sidebar", "stat"],
       "candidatePatterns": ["scientific-track-viewer", "evidence-report"]
     },
+    {
+      "id": "construct",
+      "name": "Construct",
+      "domain": "construct.page",
+      "href": "https://construct.page",
+      "repository": "Interspace-Ventures/construct",
+      "lifecycle": "live",
+      "routeStatus": "verified",
+      "tag": "Profile network",
+      "shot": "construct-page.png",
+      "shotAlt": "Construct profile network landing page",
+      "description": "A profile network built around concise identity, useful context, and legible professional storytelling, using a restrained editorial grid and tactile controls.",
+      "adoption": ["neobrutalist-structure", "scientific-clarity"],
+      "absorbedComponents": ["profile-card", "profile-header", "section-header"],
+      "candidatePatterns": ["profile-directory"]
+    },
+    {
+      "id": "rampart",
+      "name": "Rampart",
+      "domain": "rampart.fit",
+      "href": null,
+      "repository": null,
+      "lifecycle": "staging",
+      "routeStatus": "concept",
+      "tag": "Fitness platform",
+      "shot": null,
+      "shotAlt": "Rampart fitness platform",
+      "description": "A fitness product that brings decisive typography, structured framing, and a sharply limited color system into the Structured Liquidity field network.",
+      "adoption": ["neobrutalist-structure", "scientific-clarity"],
+      "absorbedComponents": [],
+      "candidatePatterns": []
+    },
     {
       "id": "dropship",
       "name": "Dropship",
@@ -125,8 +157,8 @@
       "shot": null,
       "shotAlt": "Dropship private media utility in staging",
       "description": "A mobile-first capture library with one universal intake bar, persistent glass dock, media-aware cards, edge detail panels, and context-sensitive export actions.",
-      "adoption": ["structured-containment", "liquid-depth", "semantic-clarity"],
-      "absorbedComponents": ["detail-panel", "mobile-nav", "omnibar"],
+      "adoption": ["neobrutalist-structure", "liquid-depth", "scientific-clarity"],
+      "absorbedComponents": ["detail-panel", "mobile-nav", "omnibar", "unit-economics-chart"],
       "candidatePatterns": ["media-action-rail", "payload-chooser"]
     },
     {
diff --git a/artifacts/structured-liquidity/src/catalog.json b/artifacts/structured-liquidity/src/catalog.json
index a538e04..90116d2 100644
--- a/artifacts/structured-liquidity/src/catalog.json
+++ b/artifacts/structured-liquidity/src/catalog.json
@@ -1,33 +1,41 @@
 {
   "name": "Structured Liquidity component catalog",
-  "description": "Single source of truth for the component inventory and how the live gallery is organized (category, status, tags). The gallery (bindGallery in src/lib/behaviors.ts) derives its filter chips and grouping from this file; each component's `cap` must match its .kit-cap text.",
+  "description": "Single source of truth for the installable component inventory and the curated live gallery (category, status, tags, showcase exclusions). The gallery (bindGallery in src/lib/behaviors.ts) derives its filter chips and grouping from this file; each rendered component's `cap` must match its .kit-cap text.",
   "categories": [
     {
       "key": "actions",
       "label": "Actions"
     },
     {
-      "key": "data",
-      "label": "Data"
+      "key": "forms",
+      "label": "Forms"
     },
     {
-      "key": "layout",
-      "label": "Layout"
+      "key": "data-display",
+      "label": "Data Display"
     },
     {
       "key": "navigation",
       "label": "Navigation"
     },
+    {
+      "key": "feedback",
+      "label": "Feedback"
+    },
     {
       "key": "overlays",
       "label": "Overlays"
+    },
+    {
+      "key": "layout",
+      "label": "Layout"
     }
   ],
   "components": [
     {
       "name": "Button",
       "registry": "button",
-      "cap": "Button · variants & sizes",
+      "cap": "Button · variants",
       "category": "actions",
       "status": "stable",
       "tags": [
@@ -80,7 +88,7 @@
       "name": "Alert",
       "registry": "alert",
       "cap": "Alert",
-      "category": "data",
+      "category": "feedback",
       "status": "stable",
       "tags": [
         "display"
@@ -93,7 +101,7 @@
       "name": "Avatar",
       "registry": "avatar",
       "cap": "Avatar",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -106,7 +114,7 @@
       "name": "Badge",
       "registry": "badge",
       "cap": "Badge",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -120,7 +128,7 @@
       "name": "Calendar / date picker",
       "registry": "calendar",
       "cap": "Calendar / date picker",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "display"
@@ -134,7 +142,7 @@
       "name": "Card",
       "registry": "card",
       "cap": "Card",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -143,11 +151,25 @@
         "display"
       ]
     },
+    {
+      "name": "Portfolio card",
+      "registry": "portfolio-card",
+      "cap": "Portfolio card",
+      "category": "data-display",
+      "status": "stable",
+      "tags": [
+        "display",
+        "portfolio"
+      ],
+      "kinds": [
+        "display"
+      ]
+    },
     {
       "name": "Waveform",
       "registry": "waveform",
       "cap": "Waveform",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display",
@@ -161,7 +183,7 @@
       "name": "Media player",
       "registry": "media-player",
       "cap": "Media player · now playing",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display",
@@ -177,7 +199,7 @@
       "name": "Carousel",
       "registry": "carousel",
       "cap": "Carousel",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -191,7 +213,7 @@
       "name": "Chart",
       "registry": "chart",
       "cap": "Chart",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -204,7 +226,7 @@
       "name": "Empty",
       "registry": "empty",
       "cap": "Empty",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -231,7 +253,7 @@
       "name": "Item",
       "registry": "item",
       "cap": "Item",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -244,7 +266,7 @@
       "name": "Kbd",
       "registry": "kbd",
       "cap": "Kbd",
-      "category": "overlays",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -257,7 +279,7 @@
       "name": "Marquee",
       "registry": "marquee",
       "cap": "Marquee",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -270,7 +292,7 @@
       "name": "Meter",
       "registry": "meter",
       "cap": "Meter",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -281,10 +303,10 @@
       ]
     },
     {
-      "name": "Progress · skeleton",
+      "name": "Progress",
       "registry": "progress",
-      "cap": "Progress · skeleton",
-      "category": "data",
+      "cap": "Progress",
+      "category": "feedback",
       "status": "stable",
       "tags": [
         "display"
@@ -294,36 +316,10 @@
       ]
     },
     {
-      "name": "Skeleton · card",
+      "name": "Data skeleton",
       "registry": "skeleton",
-      "cap": "Skeleton · card",
-      "category": "data",
-      "status": "stable",
-      "tags": [
-        "display"
-      ],
-      "kinds": [
-        "feedback"
-      ]
-    },
-    {
-      "name": "Skeleton · text",
-      "registry": "skeleton",
-      "cap": "Skeleton · text",
-      "category": "data",
-      "status": "stable",
-      "tags": [
-        "display"
-      ],
-      "kinds": [
-        "feedback"
-      ]
-    },
-    {
-      "name": "Skeleton · list",
-      "registry": "skeleton",
-      "cap": "Skeleton · list",
-      "category": "data",
+      "cap": "Data skeleton",
+      "category": "feedback",
       "status": "stable",
       "tags": [
         "display"
@@ -336,7 +332,7 @@
       "name": "Spinner",
       "registry": "spinner",
       "cap": "Spinner",
-      "category": "data",
+      "category": "feedback",
       "status": "stable",
       "tags": [
         "display"
@@ -349,7 +345,7 @@
       "name": "Table / data table",
       "registry": "table",
       "cap": "Table / data table",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display"
@@ -362,7 +358,7 @@
       "name": "Tooltip · hover card",
       "registry": "tooltip",
       "cap": "Tooltip · hover card",
-      "category": "data",
+      "category": "feedback",
       "status": "stable",
       "tags": [
         "display"
@@ -388,7 +384,7 @@
       "name": "Accordion",
       "registry": "accordion",
       "cap": "Accordion",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "interactive"
@@ -401,7 +397,7 @@
       "name": "Collapsible",
       "registry": "collapsible",
       "cap": "Collapsible",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "interactive"
@@ -414,7 +410,7 @@
       "name": "Checkbox",
       "registry": "checkbox",
       "cap": "Checkbox",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -429,7 +425,7 @@
       "name": "Command / combobox",
       "registry": "command",
       "cap": "Command / combobox",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -444,7 +440,7 @@
       "name": "Field",
       "registry": "field",
       "cap": "Field",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -458,7 +454,7 @@
       "name": "Input group",
       "registry": "input-group",
       "cap": "Input group",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -473,7 +469,7 @@
       "name": "Input OTP",
       "registry": "input-otp",
       "cap": "Input OTP",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -488,7 +484,7 @@
       "name": "Input · label · textarea",
       "registry": "input",
       "cap": "Input · label · textarea",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -503,7 +499,7 @@
       "name": "Fieldset",
       "registry": "fieldset",
       "cap": "Fieldset",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form"
@@ -512,26 +508,11 @@
         "form"
       ]
     },
-    {
-      "name": "Native select",
-      "registry": "native-select",
-      "cap": "Native select",
-      "category": "data",
-      "status": "stable",
-      "tags": [
-        "form",
-        "interactive"
-      ],
-      "kinds": [
-        "form",
-        "interactive"
-      ]
-    },
     {
       "name": "Number field",
       "registry": "number-field",
       "cap": "Number field",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -546,7 +527,7 @@
       "name": "Radio group",
       "registry": "radio-group",
       "cap": "Radio group",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -558,10 +539,10 @@
       ]
     },
     {
-      "name": "Select",
+      "name": "Select / options",
       "registry": "select",
-      "cap": "Select",
-      "category": "data",
+      "cap": "Select / options",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -576,7 +557,7 @@
       "name": "Switch · slider",
       "registry": "switch",
       "cap": "Switch · slider",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -712,19 +693,6 @@
       ],
       "kinds": []
     },
-    {
-      "name": "Tabs",
-      "registry": "tabs",
-      "cap": "Tabs",
-      "category": "navigation",
-      "status": "stable",
-      "tags": [
-        "navigation"
-      ],
-      "kinds": [
-        "interactive"
-      ]
-    },
     {
       "name": "Alert dialog",
       "registry": "alert-dialog",
@@ -781,20 +749,6 @@
         "interactive"
       ]
     },
-    {
-      "name": "Dropdown menu",
-      "registry": "dropdown-menu",
-      "cap": "Dropdown menu",
-      "category": "overlays",
-      "status": "stable",
-      "tags": [
-        "overlay",
-        "interactive"
-      ],
-      "kinds": [
-        "interactive"
-      ]
-    },
     {
       "name": "Popover",
       "registry": "popover",
@@ -827,7 +781,7 @@
       "name": "Toast / sonner",
       "registry": "toast",
       "cap": "Toast / sonner",
-      "category": "overlays",
+      "category": "feedback",
       "status": "stable",
       "tags": [
         "overlay",
@@ -841,7 +795,7 @@
       "name": "Autocomplete",
       "registry": "autocomplete",
       "cap": "Autocomplete",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -856,7 +810,7 @@
       "name": "Checkbox group",
       "registry": "checkbox-group",
       "cap": "Checkbox group",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -871,7 +825,7 @@
       "name": "Form",
       "registry": "form",
       "cap": "Form",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form",
@@ -886,7 +840,7 @@
       "name": "Label",
       "registry": "label",
       "cap": "Label",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
       "tags": [
         "form"
@@ -900,7 +854,7 @@
       "name": "Stat · metric display",
       "registry": "stat",
       "cap": "Stat · metric display",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "display",
@@ -953,24 +907,25 @@
       ]
     },
     {
-      "name": "Tab bar & drawer",
-      "registry": "mobile-nav",
-      "cap": "Tab bar & drawer",
-      "category": "navigation",
+      "name": "Profile card",
+      "registry": "profile-card",
+      "cap": "Profile card",
+      "category": "layout",
       "status": "stable",
       "tags": [
-        "navigation",
-        "interactive"
+        "display",
+        "identity",
+        "field-sourced",
+        "profile"
       ],
       "kinds": [
-        "interactive",
-        "mobile"
+        "display"
       ]
     },
     {
-      "name": "Floating glass tab bar",
+      "name": "Floating tab bar & drawer",
       "registry": "mobile-nav",
-      "cap": "Floating glass tab bar",
+      "cap": "Floating tab bar & drawer",
       "category": "navigation",
       "status": "stable",
       "tags": [
@@ -983,28 +938,33 @@
       ]
     },
     {
-      "name": "Segmented sub-nav",
-      "registry": "mobile-nav",
-      "cap": "Segmented sub-nav",
-      "category": "navigation",
+      "name": "Site shell",
+      "registry": "site-shell",
+      "cap": "Site shell",
+      "category": "layout",
       "status": "stable",
       "tags": [
-        "navigation",
-        "interactive"
+        "layout",
+        "responsive"
       ],
       "kinds": [
-        "interactive",
-        "mobile"
+        "display"
       ]
     },
     {
-      "name": "Site shell",
-      "registry": "site-shell",
-      "cap": "Site shell",
-      "category": "layout",
+      "name": "Unit economics chart",
+      "registry": "unit-economics-chart",
+      "cap": "Unit economics chart",
+      "category": "data-display",
       "status": "stable",
-      "tags": ["layout", "responsive"],
-      "kinds": ["display"]
+      "tags": [
+        "data",
+        "chart",
+        "finance"
+      ],
+      "kinds": [
+        "display"
+      ]
     },
     {
       "name": "Framework attribution",
@@ -1012,8 +972,13 @@
       "cap": "Framework attribution",
       "category": "layout",
       "status": "stable",
-      "tags": ["display", "branding"],
-      "kinds": ["display"]
+      "tags": [
+        "display",
+        "branding"
+      ],
+      "kinds": [
+        "display"
+      ]
     },
     {
       "name": "Timeline",
@@ -1021,8 +986,13 @@
       "cap": "Timeline",
       "category": "layout",
       "status": "stable",
-      "tags": ["display", "history"],
-      "kinds": ["display"]
+      "tags": [
+        "display",
+        "history"
+      ],
+      "kinds": [
+        "display"
+      ]
     },
     {
       "name": "Stepper",
@@ -1030,17 +1000,29 @@
       "cap": "Stepper",
       "category": "navigation",
       "status": "stable",
-      "tags": ["navigation", "interactive"],
-      "kinds": ["interactive"]
+      "tags": [
+        "navigation",
+        "interactive"
+      ],
+      "kinds": [
+        "interactive"
+      ]
     },
     {
       "name": "Filter toolbar",
       "registry": "filter-toolbar",
       "cap": "Filter toolbar",
-      "category": "data",
+      "category": "forms",
       "status": "stable",
-      "tags": ["form", "interactive", "data"],
-      "kinds": ["form", "interactive"]
+      "tags": [
+        "form",
+        "interactive",
+        "data"
+      ],
+      "kinds": [
+        "form",
+        "interactive"
+      ]
     },
     {
       "name": "Omnibar",
@@ -1048,8 +1030,17 @@
       "cap": "Omnibar",
       "category": "actions",
       "status": "stable",
-      "tags": ["form", "interactive", "command", "field-sourced"],
-      "kinds": ["form", "interactive", "mobile"]
+      "tags": [
+        "form",
+        "interactive",
+        "command",
+        "field-sourced"
+      ],
+      "kinds": [
+        "form",
+        "interactive",
+        "mobile"
+      ]
     },
     {
       "name": "Detail panel",
@@ -1057,14 +1048,22 @@
       "cap": "Detail panel",
       "category": "layout",
       "status": "stable",
-      "tags": ["display", "interactive", "inspection", "field-sourced"],
-      "kinds": ["interactive", "display"]
+      "tags": [
+        "display",
+        "interactive",
+        "inspection",
+        "field-sourced"
+      ],
+      "kinds": [
+        "interactive",
+        "display"
+      ]
     },
     {
       "name": "AI chat",
       "registry": "ai-chat",
       "cap": "AI chat · conversation",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
       "tags": [
         "interactive",
@@ -1080,10 +1079,16 @@
       "name": "Testimonial card",
       "registry": "testimonial-card",
       "cap": "Testimonial card",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
-      "tags": ["display", "field-sourced", "social-proof"],
-      "kinds": ["display"]
+      "tags": [
+        "display",
+        "field-sourced",
+        "social-proof"
+      ],
+      "kinds": [
+        "display"
+      ]
     },
     {
       "name": "Logo grid",
@@ -1091,17 +1096,30 @@
       "cap": "Logo grid",
       "category": "layout",
       "status": "stable",
-      "tags": ["display", "field-sourced", "identity"],
-      "kinds": ["display"]
+      "tags": [
+        "display",
+        "field-sourced",
+        "identity"
+      ],
+      "kinds": [
+        "display"
+      ]
     },
     {
       "name": "Activity feed",
       "registry": "activity-feed",
       "cap": "Activity feed",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
-      "tags": ["display", "field-sourced", "history", "updates"],
-      "kinds": ["display"]
+      "tags": [
+        "display",
+        "field-sourced",
+        "history",
+        "updates"
+      ],
+      "kinds": [
+        "display"
+      ]
     },
     {
       "name": "Dropzone",
@@ -1109,17 +1127,33 @@
       "cap": "Dropzone",
       "category": "actions",
       "status": "stable",
-      "tags": ["form", "interactive", "field-sourced", "upload"],
-      "kinds": ["form", "interactive"]
+      "tags": [
+        "form",
+        "interactive",
+        "field-sourced",
+        "upload"
+      ],
+      "kinds": [
+        "form",
+        "interactive"
+      ]
     },
     {
       "name": "Pricing card",
       "registry": "pricing-card",
       "cap": "Pricing card",
-      "category": "data",
+      "category": "data-display",
       "status": "stable",
-      "tags": ["display", "interactive", "field-sourced", "commerce"],
-      "kinds": ["display", "interactive"]
+      "tags": [
+        "display",
+        "interactive",
+        "field-sourced",
+        "commerce"
+      ],
+      "kinds": [
+        "display",
+        "interactive"
+      ]
     },
     {
       "name": "Templates",
@@ -1127,10 +1161,44 @@
       "cap": "Templates",
       "category": "layout",
       "status": "stable",
-      "tags": ["layout", "field-sourced", "templates"],
-      "kinds": ["display"]
+      "tags": [
+        "layout",
+        "field-sourced",
+        "templates"
+      ],
+      "kinds": [
+        "display"
+      ]
     }
   ],
+  "showcase": {
+    "exclude": [
+      "Button group",
+      "Avatar",
+      "Empty",
+      "Fonts",
+      "Item",
+      "Kbd",
+      "Marquee",
+      "Meter",
+      "Spinner",
+      "Collapsible",
+      "Field",
+      "Fieldset",
+      "Label",
+      "Aspect ratio",
+      "Separator",
+      "Breadcrumb",
+      "Menubar",
+      "Pagination",
+      "Drawer",
+      "Checkbox group",
+      "Keycap tiles",
+      "Profile header",
+      "Framework attribution",
+      "Logo grid"
+    ]
+  },
   "facets": [
     {
       "key": "interactive",
diff --git a/artifacts/structured-liquidity/src/components/site/Adopt.tsx b/artifacts/structured-liquidity/src/components/site/Adopt.tsx
index 5edcfd6..d12c21f 100644
--- a/artifacts/structured-liquidity/src/components/site/Adopt.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Adopt.tsx
@@ -18,25 +18,28 @@ npx shadcn@latest add https://structured.glass/r/structured-liquidity-agent.json
 Verify that the Structured Liquidity styles and .agents/skills/structured-liquidity/SKILL.md exist before continuing.
 Rules:
 - Square corners (border-radius: 0).
-- Flat offset shadows only: box-shadow: 7px 7px 0 0 #000, never blurred.
+- Flat offset shadows only: box-shadow: 5px 5px 0 0 #000, never blurred; reserve them for tactile affordances and intentional cutout layers.
 - Solid 2px black borders; the edge defines the object.
 - Exactly one accent (#a388ee) carries all emphasis.
-- Liquid glass = backdrop-filter blur over translucent white rgba(255,255,255,0.07).
-- Destructive surfaces are neutral gray (#3c3f4b), never red.
-- Type: Inter for headings/buttons/brand and body, Space Mono for labels and data.
+- Default information surfaces are flat; do not use decorative gradients as shorthand for liquidity.
+- Liquid Motion belongs in shared markers and transitions between navbar actions, menu options, tabs, filters, overlays, and page areas. Reserve neutral translucency and backdrop blur for those moving state boundaries.
+- Destructive surfaces are neutral gray (#242424), never red.
+- Dark mode derives its atmospheric field from the active accent; purple becomes aubergine, green becomes deep green, and yellow becomes deep ochre. There is no separate black mode; charcoal components sit above the tinted field.
+- Type: Inter for headings/buttons/brand and body, Space Mono only for labels and data.
+- Scientific Modern Clarity: communicate meaning with a rational grid, exact alignment, measured line lengths, purposeful whitespace, evidence, and one dominant statement per view.
 - Leading icons (Lucide) on nav links and buttons.
 Use the tokens in design-tokens.json and the component markup in registry.json.
 Full spec: llms.txt.`;
 
 const ROOT_TOKENS = `:root{
   --accent:#a388ee; --accent-ink:#000000;
-  --bg:#272933; --bg-2:#1f2028; --ink:#e6e6e6; --ink-dim:#9da0ab;
-  --edge:0 0 0; --hard-shadow:#000000; --neg:#3c3f4b; --neg-ink:#f0f0f2;
-  --glass-blur:18px; --glass-tint:255 255 255; --glass-alpha:0.07;
-  --border-w:2px; --hard-x:7px; --hard-y:7px; --radius:0px;
-  --display:"Inter","Helvetica Neue",system-ui,sans-serif;
-  --body:"Inter","Helvetica Neue",system-ui,sans-serif;
-  --mono:"Space Mono",ui-monospace,"SFMono-Regular",monospace;
+  --bg:#f2f0ea; --bg-2:#ffffff; --ink:#111111; --ink-dim:#5d5d59;
+  --edge:0 0 0; --hard-shadow:#000000; --neg:#242424; --neg-ink:#ffffff;
+  --glass-blur:14px; --glass-tint:255 255 255; --glass-alpha:0.72;
+  --border-w:2px; --hard-x:5px; --hard-y:5px; --radius:0px;
+  --display:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
+  --body:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
+  --mono:"Space Mono","SFMono-Regular",ui-monospace,monospace;
 }`;
 
 function CopyButton({ text }: { text: string }) {
@@ -68,9 +71,9 @@ export function Adopt() {
         <span className="eyebrow">Agent-ready · adopt the language</span>
         <h2 className="section-title">Built to be read by machines.</h2>
         <p className="lead">
-          Give an agent one command before its first UI edit. It installs both the theme and a local
-          Structured Liquidity skill, so the rules stay in the project instead of being rediscovered
-          over several iterations.
+          Give an agent one command before its first UI edit. It installs both
+          the theme and a local Structured Liquidity skill, so the rules stay in
+          the project instead of being rediscovered over several iterations.
         </p>
       </div>
 
@@ -81,10 +84,16 @@ export function Adopt() {
             llms.txt
           </span>
           <p>
-            The AI-discoverable summary: the three pillars, the hard rules, the tokens, and the font
-            pairings, all in one Markdown file at the site root.
+            The AI-discoverable summary: the three tenets, the hard rules, the
+            tokens, and the font pairings, all in one Markdown file at the site
+            root.
           </p>
-          <a className="sl-btn default" href="llms.txt" target="_blank" rel="noopener">
+          <a
+            className="sl-btn default"
+            href="llms.txt"
+            target="_blank"
+            rel="noopener"
+          >
             <ExternalLink />
             Open llms.txt
           </a>
@@ -95,10 +104,15 @@ export function Adopt() {
             design-tokens.json
           </span>
           <p>
-            Every token in the W3C Design Tokens format, each carrying its exact CSS variable name.
-            Import it instead of guessing values.
+            Every token in the W3C Design Tokens format, each carrying its exact
+            CSS variable name. Import it instead of guessing values.
           </p>
-          <a className="sl-btn default" href="design-tokens.json" target="_blank" rel="noopener">
+          <a
+            className="sl-btn default"
+            href="design-tokens.json"
+            target="_blank"
+            rel="noopener"
+          >
             <ExternalLink />
             Open tokens
           </a>
@@ -109,11 +123,16 @@ export function Adopt() {
             registry.json
           </span>
           <p>
-            A shadcn-compatible registry: install the whole language or any single component with the
-            shadcn CLI — every item is a valid <code>registry-item</code> served at{" "}
-            <code>/r/*.json</code>.
+            A shadcn-compatible registry: install the whole language or any
+            single component with the shadcn CLI — every item is a valid{" "}
+            <code>registry-item</code> served at <code>/r/*.json</code>.
           </p>
-          <a className="sl-btn default" href="registry.json" target="_blank" rel="noopener">
+          <a
+            className="sl-btn default"
+            href="registry.json"
+            target="_blank"
+            rel="noopener"
+          >
             <ExternalLink />
             Open registry
           </a>
@@ -128,9 +147,10 @@ export function Adopt() {
             <CopyButton text={installCommand()} />
           </div>
           <p>
-            Run this first. It installs the full design language and writes the local agent skill
-            that tells future coding agents to use it. Individual components can then be added by
-            swapping the file name (for example, <code>/r/button.json</code>).
+            Run this first. It installs the full design language and writes the
+            local agent skill that tells future coding agents to use it.
+            Individual components can then be added by swapping the file name
+            (for example, <code>/r/button.json</code>).
           </p>
           <pre id="install-cmd" className="code-block">
             {installCommand()}
diff --git a/artifacts/structured-liquidity/src/components/site/Components.tsx b/artifacts/structured-liquidity/src/components/site/Components.tsx
index 2ba69ff..988be4b 100644
--- a/artifacts/structured-liquidity/src/components/site/Components.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Components.tsx
@@ -17,15 +17,15 @@ export function Components() {
       <div className="section-head reveal">
         <span className="eyebrow">Components · the toolkit</span>
         <h2 className="section-title">
-          A complete library,
+          The useful patterns,
           <br />
-          in the language.
+          without the repeats.
         </h2>
         <p className="lead">
-          More than eighty primitives, from buttons and forms to overlays,
-          navigation, and data display, each one a rigid container holding
-          liquid glass. None of it is a static mockup: click, type, toggle, and
-          open, and every piece reskins from the same live tokens.
+          A curated view of the patterns that carry a distinct job in a real
+          product. The full installable registry remains available; this gallery
+          favors useful composition, working state, and motion you can test by
+          clicking, typing, toggling, and opening.
         </p>
       </div>
 
diff --git a/artifacts/structured-liquidity/src/components/site/FooterCta.tsx b/artifacts/structured-liquidity/src/components/site/FooterCta.tsx
index ad73a6c..3b58a5f 100644
--- a/artifacts/structured-liquidity/src/components/site/FooterCta.tsx
+++ b/artifacts/structured-liquidity/src/components/site/FooterCta.tsx
@@ -8,11 +8,11 @@ export function FooterCta() {
     <section className="wrap">
       <div className="glass cta-panel reveal">
         <h2>
-          Build with <b>Structure</b>. Flow with <b>Liquidity</b>.
+          Frame with <b>Structure</b>. Move with <b>Liquidity</b>. Communicate with <b>Clarity</b>.
         </h2>
         <p className="lead" style={{ textAlign: "center" }}>
           Structured Liquidity is an open UI language: a complete kit of rigid containers and liquid
-          glass, free to use with visible footer attribution. Adopt the three pillars, set your
+          glass, free to use with visible footer attribution. Adopt the three tenets, set your
           accent, and build something rigorous, tactile, and unmistakably clear.
         </p>
         <div className="hero-cta" style={{ justifyContent: "center" }}>
diff --git a/artifacts/structured-liquidity/src/components/site/Hero.tsx b/artifacts/structured-liquidity/src/components/site/Hero.tsx
index 150be8e..09abeab 100644
--- a/artifacts/structured-liquidity/src/components/site/Hero.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Hero.tsx
@@ -9,38 +9,56 @@ export function Hero() {
     <header className="hero wrap" id="top">
       <div className="hero-grid">
         <div>
-          <span className="eyebrow reveal">An open shadcn theme · est. 2026</span>
+          <span className="eyebrow reveal">
+            An open shadcn theme · est. 2026
+          </span>
           <h1 className="wordmark reveal">
             <span className="brutal">Structured</span>
             <br />
             <LiquidWord text="Liquidity" />
           </h1>
           <p className="lead reveal">
-            Rigid containers with sharp, uncompromising edges. Inside them, a liquid glass that
-            reflects light and gives every surface tactile depth. <em>Structured Liquidity</em>{" "}
-            marries the discipline of the grid to the delight of the material: a complete, open UI
-            language any product can speak, not the look of just one. This page is both the specimen
-            and the spec, so retheme it live as you read.
+            <em>
+              Neobrutalist structure. Liquid motion. Scientific modern clarity.
+            </em>{" "}
+            Structure makes the interface tangible. Motion makes changing state
+            perceptible. Clarity makes information ordered and unmistakable.
+            Three visible faces, one coherent interface.
           </p>
           <div className="hero-tags reveal">
-            <span className="tag">Structured containment</span>
-            <span className="tag">Liquid depth</span>
-            <span className="tag">Semantic clarity</span>
+            <span className="tag">
+              <b>01</b> Neobrutalist structure
+            </span>
+            <span className="tag">
+              <b>02</b> Liquid Motion
+            </span>
+            <span className="tag">
+              <b>03</b> Scientific Modern Clarity
+            </span>
           </div>
           <div className="hero-cta reveal">
             <InstallButton />
+            <a
+              className="btn glassy"
+              href={GITHUB}
+              target="_blank"
+              rel="noopener"
+            >
+              <Github />
+              Source
+            </a>
             <a className="btn glassy" href="#showcase">
               <Sparkles />
               Showcase
             </a>
-            <a className="btn glassy" href={GITHUB} target="_blank" rel="noopener">
-              <Github />
-              Source
-            </a>
           </div>
         </div>
-        <div className="hero-cube-wrap" aria-hidden="true">
-          <Hypercube className="hero-cube" />
+        <div
+          className="hero-cube-wrap"
+          role="img"
+          aria-label="The Structured Liquidity trifecta shown on the cube's three visible faces: Neobrutalist structure, Liquid Motion, and Scientific Modern Clarity."
+        >
+          <Hypercube className="hero-cube" faceLabels={["1", "2", "3"]} />
         </div>
       </div>
     </header>
diff --git a/artifacts/structured-liquidity/src/components/site/InstallButton.tsx b/artifacts/structured-liquidity/src/components/site/InstallButton.tsx
index d9aedb0..b1e5eea 100644
--- a/artifacts/structured-liquidity/src/components/site/InstallButton.tsx
+++ b/artifacts/structured-liquidity/src/components/site/InstallButton.tsx
@@ -29,7 +29,7 @@ interface InstallButtonProps {
 export function InstallButton({
   item = DEFAULT_ITEM,
   className = "btn solid",
-  label = "Install for agents",
+  label = "Install",
   style,
   iconOnly = false,
 }: InstallButtonProps) {
diff --git a/artifacts/structured-liquidity/src/components/site/Nav.tsx b/artifacts/structured-liquidity/src/components/site/Nav.tsx
index db72bf7..179766a 100644
--- a/artifacts/structured-liquidity/src/components/site/Nav.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Nav.tsx
@@ -1,54 +1,92 @@
-import { Compass, LayoutGrid, Sparkles, Bot, Github } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
+import { Bot, Blocks, Github, Sparkles, Waypoints } from "lucide-react";
 import { Hypercube } from "./liquid";
 import { InstallButton } from "./InstallButton";
 
 const GITHUB = "https://github.com/heyinterspace/Structured";
+const NAV_ITEMS = [
+  { label: "Principles", href: "#manifesto", icon: Waypoints },
+  { label: "Components", href: "#components", icon: Blocks },
+  { label: "Showcase", href: "#showcase", icon: Sparkles },
+  { label: "For agents", href: "#adopt", icon: Bot },
+] as const;
 
 export function Nav() {
+  const navRef = useRef<HTMLElement>(null);
+  const linksRef = useRef<HTMLDivElement>(null);
+
+  const positionMarker = useCallback((index: number) => {
+    const links = linksRef.current;
+    const slots = links?.querySelectorAll<HTMLElement>(".nav-action-slot");
+    const target = slots?.[index];
+    if (!links || !target) return;
+    links.style.setProperty("--nav-marker-x", `${target.offsetLeft}px`);
+    links.style.setProperty("--nav-marker-w", `${target.offsetWidth}px`);
+    links.style.setProperty("--nav-marker-opacity", "1");
+  }, []);
+
+  useEffect(() => {
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      positionMarker(0);
+      const page = document.documentElement;
+      const distance = Math.max(1, page.scrollHeight - window.innerHeight);
+      const progress = Math.min(1, Math.max(0, window.scrollY / distance));
+      navRef.current?.style.setProperty("--page-progress", `${progress * 100}%`);
+    };
+    const requestUpdate = () => {
+      if (!frame) frame = window.requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", requestUpdate, { passive: true });
+    window.addEventListener("resize", requestUpdate);
+    return () => {
+      window.removeEventListener("scroll", requestUpdate);
+      window.removeEventListener("resize", requestUpdate);
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, [positionMarker]);
+
   return (
-    <nav className="nav">
+    <nav className="nav" ref={navRef}>
       <a className="brand" href="#top">
         <Hypercube />
         <span className="name">Structured Liquidity</span>
       </a>
-      <div className="links">
-        <a href="#manifesto">
-          <Compass />
-          Principles
-        </a>
-        <a href="#components">
-          <LayoutGrid />
-          Components
-        </a>
-        <a href="#showcase">
-          <Sparkles />
-          Showcase
-        </a>
-        <a href="#adopt">
-          <Bot />
-          For AI
-        </a>
-        <InstallButton
-          iconOnly
-          className="btn solid nav-cta nav-icon"
-          style={
-            { "--hard-x": "3px", "--hard-y": "3px" } as React.CSSProperties
-          }
-        />
-        <a
-          className="btn glassy nav-cta nav-icon"
-          href={GITHUB}
-          target="_blank"
-          rel="noopener"
-          aria-label="Source"
-          title="Source"
-          style={
-            { "--hard-x": "3px", "--hard-y": "3px" } as React.CSSProperties
-          }
+      <div className="nav-cluster">
+        <div
+          className="links"
+          ref={linksRef}
+          onPointerLeave={() => positionMarker(0)}
+          onBlur={(event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) positionMarker(0);
+          }}
         >
-          <Github />
-        </a>
+          <span className="nav-liquid-marker" aria-hidden="true" />
+          {NAV_ITEMS.map(({ label, href, icon: Icon }, index) => (
+            <span
+              className="nav-action-slot"
+              onPointerEnter={() => positionMarker(index)}
+              onFocus={() => positionMarker(index)}
+              key={href}
+            >
+              <a href={href}>
+                <Icon />
+                <span className="nav-label">{label}</span>
+              </a>
+            </span>
+          ))}
+        </div>
+        <div className="nav-utilities">
+          <InstallButton className="btn nav-utility" label="Install" />
+          <a className="btn nav-utility" href={GITHUB} target="_blank" rel="noopener">
+            <Github />
+            Source
+          </a>
+        </div>
       </div>
+      <span className="nav-page-progress" aria-hidden="true" />
     </nav>
   );
 }
diff --git a/artifacts/structured-liquidity/src/components/site/Pillars.tsx b/artifacts/structured-liquidity/src/components/site/Pillars.tsx
deleted file mode 100644
index 640f4a9..0000000
--- a/artifacts/structured-liquidity/src/components/site/Pillars.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-export function Pillars() {
-  return (
-    <section id="manifesto" className="wrap">
-      <div className="section-head reveal">
-        <span className="eyebrow">Principles · the foundation</span>
-        <h2 className="section-title">Structure holds it. Liquidity fills it.</h2>
-        <p className="lead">
-          Most systems pick a side: flat utility or glossy depth. Structured Liquidity refuses the
-          choice and holds both at once, a rigid, unambiguous grid containing a fluid, living
-          material. It stands on three pillars, each with the working rules that keep it honest.
-        </p>
-      </div>
-
-      <div className="pillars">
-        <div className="glass pillar reveal">
-          <span className="pnum">Pillar 01</span>
-          <h3>Structured Containment</h3>
-          <p>
-            Sharp 90° corners, flat unblurred shadows, a strict grid. Boundaries are never
-            ambiguous.
-          </p>
-          <ul>
-            <li>
-              <div>
-                <strong className="rule-h">Shadows stay flat</strong>: offset, solid, hard-edged. A
-                structural fact, not a mood.
-              </div>
-            </li>
-            <li>
-              <div>
-                <strong className="rule-h">Borders carry weight</strong>: 2–3px, never decorative.
-                The edge defines the object.
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <div className="glass pillar reveal">
-          <span className="pnum">Pillar 02</span>
-          <h3>Liquid Depth</h3>
-          <p>
-            Inside the rigid boxes lives a <strong className="accent">tactile glass</strong> that is
-            organic, translucent, light-reflecting, and alive.
-          </p>
-          <ul>
-            <li>
-              <div>
-                <strong className="rule-h">Depth through layers</strong>: stack translucent
-                surfaces, each with a real border and flat shadow.
-              </div>
-            </li>
-            <li>
-              <div>
-                <strong className="rule-h">Motion proves mass</strong>: press a surface and it
-                settles into its own shadow.
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <div className="glass pillar reveal">
-          <span className="pnum">Pillar 03</span>
-          <h3>Semantic Clarity</h3>
-          <p>Liquidity delights, but never at the expense of reading. Function leads.</p>
-          <ul>
-            <li>
-              <div>
-                <strong className="rule-h">One accent, clearly</strong>: a single accent carries
-                emphasis; glass stays neutral so it lands.
-              </div>
-            </li>
-            <li>
-              <div>
-                <strong className="rule-h">Type with intent</strong>: heavy grotesk for impact,
-                monospace for labels and data.
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/artifacts/structured-liquidity/src/components/site/Showcase.tsx b/artifacts/structured-liquidity/src/components/site/Showcase.tsx
index b376257..5de382c 100644
--- a/artifacts/structured-liquidity/src/components/site/Showcase.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Showcase.tsx
@@ -21,7 +21,17 @@ interface Adopter {
 }
 
 const ADOPTERS = adopterRegistry.projects as Adopter[];
-const LIVE = ADOPTERS.filter((project) => project.lifecycle === "live");
+const SHOWCASE_IDS = [
+  "interspace-ventures",
+  "cosmograph",
+  "observatory",
+  "exobase",
+  "construct",
+  "rampart",
+] as const;
+const SHOWCASE = SHOWCASE_IDS.map((id) => ADOPTERS.find((project) => project.id === id)).filter(
+  (project): project is Adopter => Boolean(project),
+);
 
 const STATUS_LABEL: Record<RouteStatus, string> = {
   verified: "Live",
@@ -38,6 +48,13 @@ function ProjectCard({ project }: { project: Adopter }) {
         <span className="tl" />
         <span className="tl" />
         <span className="url">{project.domain}</span>
+        {project.lifecycle === "live" ? (
+          <span
+            className={`sl-badge ${project.routeStatus === "verified" ? "default" : "outline"}`}
+          >
+            {STATUS_LABEL[project.routeStatus]}
+          </span>
+        ) : null}
       </div>
       <div className="show-card-shot">
         {project.shot ? (
@@ -59,8 +76,13 @@ function ProjectCard({ project }: { project: Adopter }) {
           <div className="vbody">
             <p className="show-card-desc">{project.description}</p>
             <span className="show-card-cta">
-              {project.href ? `Visit ${project.domain}` : `Tracking ${project.domain}`}{" "}
-              <span aria-hidden="true">→</span>
+              {project.href ? (
+                <>
+                  View {project.name} <span aria-hidden="true">→</span>
+                </>
+              ) : (
+                "Structured Liquidity field study"
+              )}
             </span>
           </div>
         </div>
@@ -73,11 +95,6 @@ function ProjectCard({ project }: { project: Adopter }) {
           <span className="show-name">{project.name}</span>
           <span className="mono">{project.tag}</span>
         </div>
-        <span
-          className={`sl-badge ${project.routeStatus === "verified" ? "default" : "outline"}`}
-        >
-          {STATUS_LABEL[project.routeStatus]}
-        </span>
       </div>
     </>
   );
@@ -115,12 +132,12 @@ export function Showcase() {
       </div>
 
       <div className="show-registry-meta reveal">
-        <span>{LIVE.length} live</span>
+        <span>{SHOWCASE.length} showcased</span>
         <span>Reviewed {adopterRegistry.reviewedAt}</span>
       </div>
 
       <div className="show-grid reveal">
-        {LIVE.map((project) => (
+        {SHOWCASE.map((project) => (
           <ProjectCard project={project} key={project.id} />
         ))}
       </div>
diff --git a/artifacts/structured-liquidity/src/components/site/Templates.tsx b/artifacts/structured-liquidity/src/components/site/Templates.tsx
index 304b0f0..9758489 100644
--- a/artifacts/structured-liquidity/src/components/site/Templates.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Templates.tsx
@@ -4,7 +4,6 @@ import {
   GalleryVerticalEnd,
   PanelsTopLeft,
 } from "lucide-react";
-import { InstallButton } from "./InstallButton";
 
 const templates = [
   {
@@ -55,9 +54,6 @@ export function Templates() {
               </article>
             ))}
           </div>
-          <div className="template-install">
-            <InstallButton item="site-templates" label="Install templates" />
-          </div>
         </div>
       </div>
     </div>
diff --git a/artifacts/structured-liquidity/src/components/site/Tenets.tsx b/artifacts/structured-liquidity/src/components/site/Tenets.tsx
new file mode 100644
index 0000000..ad0fcac
--- /dev/null
+++ b/artifacts/structured-liquidity/src/components/site/Tenets.tsx
@@ -0,0 +1,103 @@
+export function Tenets() {
+  return (
+    <section id="manifesto" className="wrap">
+      <div className="section-head reveal">
+        <span className="eyebrow">Principles · the foundation</span>
+        <h2 className="section-title">Three faces. One design language.</h2>
+        <p className="lead">
+          Neobrutalist structure makes the interface tangible. Liquid Motion
+          makes changing state perceptible. Scientific Modern Clarity makes
+          information ordered and unmistakable. Together these three tenets form
+          Structured Liquidity.
+        </p>
+      </div>
+
+      <div className="tenets">
+        <article className="tenet tenet-neobrutalism reveal">
+          <span className="pnum">Tenet 01</span>
+          <span className="psub">Physical frame</span>
+          <h3>Neobrutalist structure</h3>
+          <p>
+            Buttons, borders, navigation, footers, body containers, and panels
+            form a tactile system through square geometry, obvious controls and
+            boundaries, and selective flat shadows.
+          </p>
+          <ul>
+            <li>
+              <div>
+                <strong className="rule-h">Shadows stay flat</strong>: offset,
+                solid, hard-edged. A structural fact, not a mood.
+              </div>
+            </li>
+            <li>
+              <div>
+                <strong className="rule-h">Borders carry weight</strong>: 2–3px,
+                never decorative. The edge defines the object.
+              </div>
+            </li>
+          </ul>
+        </article>
+
+        <article className="tenet tenet-liquid reveal">
+          <span className="pnum">Tenet 02</span>
+          <span className="psub">State transitions</span>
+          <h3>Liquid Motion</h3>
+          <p>
+            Motion carries state between navbar actions, menu options, tabs,
+            filters, overlays, and page areas without becoming the only carrier
+            of meaning.
+          </p>
+          <ul>
+            <li>
+              <div>
+                <strong className="rule-h">
+                  One marker carries continuity
+                </strong>
+                : selection travels between related options instead of
+                repainting each surface.
+              </div>
+            </li>
+            <li>
+              <div>
+                <strong className="rule-h">Motion explains change</strong>:
+                liquid settles, connects, and reveals state inside a frame that
+                never wobbles, with a complete reduced-motion state.
+              </div>
+            </li>
+          </ul>
+        </article>
+
+        <article className="tenet tenet-clarity reveal">
+          <span className="pnum">Tenet 03</span>
+          <span className="psub">Information hierarchy</span>
+          <h3>Scientific Modern Clarity</h3>
+          <p>
+            Information organized through rational grids, disciplined hierarchy,
+            measured typography, captions, evidence, and purposeful whitespace.
+            Swiss modernism is the informing tradition. Every screen remains
+            complete and useful without relying on color, glass, or motion.
+          </p>
+          <ul>
+            <li>
+              <div>
+                <strong className="rule-h">
+                  Monochrome carries information
+                </strong>
+                : accent marks selection, progression, or one key relationship.
+              </div>
+            </li>
+            <li>
+              <div>
+                <strong className="rule-h">
+                  Every position is intentional
+                </strong>
+                : type, captions, data, and controls align to the same measured
+                grid.
+              </div>
+            </li>
+          </ul>
+        </article>
+      </div>
+    </section>
+  );
+}
diff --git a/artifacts/structured-liquidity/src/components/site/Tweaker.tsx b/artifacts/structured-liquidity/src/components/site/Tweaker.tsx
index bee8563..0988811 100644
--- a/artifacts/structured-liquidity/src/components/site/Tweaker.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Tweaker.tsx
@@ -27,11 +27,11 @@ const DEFAULTS: Tweaks = {
   border: 2,
   shadow: 7,
   radius: 0,
-  mode: "dark",
+  mode: "light",
 };
 
 const ACCENTS = ["#a388ee", "#7c9cff", "#3dd7c8", "#ffb454", "#ff7a90"];
-const STORAGE_KEY = "sl-tweaks";
+const STORAGE_KEY = "sl-tweaks-v2";
 
 /* accent -> readable ink for text sitting on the accent fill */
 function inkFor(hex: string): string {
@@ -70,6 +70,10 @@ function apply(t: Tweaks): void {
   root.setProperty("--hard-x", t.shadow + "px");
   root.setProperty("--hard-y", t.shadow + "px");
   root.setProperty("--radius", t.radius + "px");
+  /* Dark backgrounds are derived from --accent in CSS. Clear legacy inline
+     overrides so changing the accent always retunes the full page field. */
+  root.removeProperty("--bg");
+  root.removeProperty("--bg-2");
   document.documentElement.setAttribute("data-mode", t.mode);
 }
 
@@ -158,11 +162,13 @@ export function Tweaker() {
           type="button"
           className="sl-tweaks-fab sl-mode-fab"
           aria-label="Toggle dark or light mode"
-          aria-pressed={state.mode === "light"}
+          aria-pressed={state.mode === "dark"}
           onClick={() => set("mode", state.mode === "dark" ? "light" : "dark")}
         >
           {state.mode === "dark" ? <Moon /> : <Sun />}
-          <span className="sl-mode-lbl">{state.mode === "dark" ? "Dark" : "Light"}</span>
+          <span className="sl-mode-lbl">
+            {state.mode === "dark" ? "Dark" : "Light"}
+          </span>
         </button>
         <button
           type="button"
@@ -183,7 +189,12 @@ export function Tweaker() {
       >
         <div className="twk-hd">
           <b>Mods</b>
-          <button type="button" className="twk-x" aria-label="Close" onClick={() => setOpen(false)}>
+          <button
+            type="button"
+            className="twk-x"
+            aria-label="Close"
+            onClick={() => setOpen(false)}
+          >
             ✕
           </button>
         </div>
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitActions.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitActions.tsx
index 53e5a1b..1e0e647 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitActions.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitActions.tsx
@@ -5,7 +5,6 @@ import {
   Ghost,
   Trash2,
   ExternalLink,
-  Ban,
   Bold,
   Italic,
   Underline,
@@ -16,19 +15,10 @@ import {
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu";
 import { Menubar } from "@/components/ui/menubar";
 import { Toggle } from "@/components/ui/toggle";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { Toolbar, ToolbarSeparator } from "@/components/ui/toolbar";
-import { Spinner } from "@/components/ui/spinner";
 
 export function KitActions() {
   return (
@@ -36,7 +26,7 @@ export function KitActions() {
       <div className="kit-group-head">
         <span className="kg-name">Actions</span>
         <span className="kg-rule"></span>
-        <span className="kg-count">Badge · Button · Dropdown · Toggle</span>
+        <span className="kg-count">Badge · Button · Toggle · Toolbar</span>
       </div>
       <div className="kit-grid">
 
@@ -54,8 +44,8 @@ export function KitActions() {
         </div>
 
         <div className="glass kit-cell w8">
-          <span className="kit-cap">Button · variants &amp; sizes</span>
-          <div className="kit-row">
+          <span className="kit-cap">Button · variants</span>
+          <div className="kit-row sl-button-specimen">
             <Button variant="default"><Plus />Primary</Button>
             <Button variant="secondary"><Copy />Secondary</Button>
             <Button variant="outline"><Square />Outline</Button>
@@ -63,29 +53,6 @@ export function KitActions() {
             <Button variant="destructive"><Trash2 />Delete</Button>
             <Button variant="link"><ExternalLink />Link</Button>
           </div>
-          <div className="kit-row">
-            <Button variant="default" size="sm"><Plus />Small</Button>
-            <Button variant="default"><Plus />Default</Button>
-            <Button variant="default" size="lg"><Plus />Large</Button>
-            <Button variant="secondary" size="icon" aria-label="Add"><Plus /></Button>
-            <Button variant="default"><Spinner /> Loading</Button>
-            <Button variant="default" disabled><Ban />Disabled</Button>
-          </div>
-        </div>
-
-        <div className="glass kit-cell w4">
-          <span className="kit-cap">Dropdown menu</span>
-          <DropdownMenu>
-            <DropdownMenuTrigger>Options</DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuLabel>My account</DropdownMenuLabel>
-              <DropdownMenuItem shortcut="⌘P">Profile</DropdownMenuItem>
-              <DropdownMenuItem shortcut="⌘,">Settings</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Invite team</DropdownMenuItem>
-              <DropdownMenuItem>Sign out</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
         </div>
 
         <div className="glass kit-cell w4">
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx
index b7ee7d0..cd9eb22 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx
@@ -12,16 +12,6 @@ import {
   EmptyTitle,
   EmptyDescription,
 } from "@/components/ui/empty";
-import {
-  FontPairings,
-  FontPair,
-  FontPairTitle,
-  FontPairFonts,
-  FontSpecimen,
-  FontRole,
-  FontName,
-  FontPairNote,
-} from "@/components/ui/fonts";
 import { Item, ItemBody, ItemTitle, ItemSubtitle } from "@/components/ui/item";
 import {
   Typography,
@@ -38,7 +28,7 @@ export function KitContentData() {
         <span className="kg-name">Content &amp; data</span>
         <span className="kg-rule"></span>
         <span className="kg-count">
-          Carousel · Chart · Collapsible · Empty · Fonts · Item · Typography
+          Carousel · Chart · Collapsible · Empty · Item · Typography
         </span>
       </div>
       <div className="kit-grid">
@@ -73,38 +63,13 @@ export function KitContentData() {
           <Empty>
             <EmptyIcon>♪</EmptyIcon>
             <EmptyTitle>No tracks yet</EmptyTitle>
-            <EmptyDescription>Import audio to start a library.</EmptyDescription>
+            <EmptyDescription>
+              Import audio to start a library.
+            </EmptyDescription>
             <Button size="sm">Import</Button>
           </Empty>
         </div>
 
-        <div className="glass kit-cell w6 pairings-card">
-          <span className="kit-cap">Fonts</span>
-          <FontPairings>
-            <FontPair>
-              <FontPairTitle>Set 01 · Canonical</FontPairTitle>
-              <FontPairFonts>
-                <FontSpecimen role="header">
-                  <FontRole>Header</FontRole>
-                  <FontName className="ff-inter">Inter</FontName>
-                </FontSpecimen>
-                <FontSpecimen role="body">
-                  <FontRole>Body</FontRole>
-                  <FontName className="ff-inter">Inter</FontName>
-                </FontSpecimen>
-                <FontSpecimen role="detail">
-                  <FontRole>Detail</FontRole>
-                  <FontName className="ff-spacemono">Space Mono</FontName>
-                </FontSpecimen>
-              </FontPairFonts>
-              <FontPairNote>
-                One disciplined sans across hierarchy and reading, with technical mono reserved
-                for labels, data, and code.
-              </FontPairNote>
-            </FontPair>
-          </FontPairings>
-        </div>
-
         <div className="glass kit-cell w6">
           <span className="kit-cap">Item</span>
           <div className="kit-col" style={{ gap: "0.6rem" }}>
@@ -144,8 +109,8 @@ export function KitContentData() {
           <Typography>
             <TypographyTitle>Structure holds it.</TypographyTitle>
             <TypographyParagraph>
-              Heavy grotesk for impact, monospace for labels, and a measured
-              body that stays legible through the glass. Inline{" "}
+              Calibrated grotesk hierarchy, monospace evidence labels, and a
+              measured body that stays legible through every layer. Inline{" "}
               <TypographyCode>--accent</TypographyCode> tokens carry the system.
             </TypographyParagraph>
             <TypographyQuote>
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitDataDisplay.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitDataDisplay.tsx
index cb818e6..3ba4651 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitDataDisplay.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitDataDisplay.tsx
@@ -32,6 +32,18 @@ import {
   TableCell,
 } from "@/components/ui/table";
 import { Meter } from "@/components/ui/meter";
+import {
+  PortfolioCard,
+  PortfolioCardAction,
+  PortfolioCardBody,
+  PortfolioCardDescription,
+  PortfolioCardLogo,
+  PortfolioCardMedia,
+  PortfolioCardTag,
+  PortfolioCardTags,
+  PortfolioCardTitle,
+  PortfolioGrid,
+} from "@/components/ui/portfolio-card";
 
 export function KitDataDisplay() {
   return (
@@ -40,8 +52,8 @@ export function KitDataDisplay() {
         <span className="kg-name">Data display</span>
         <span className="kg-rule"></span>
         <span className="kg-count">
-          Alert · Avatar · Calendar · Card · Media player · Stat · Table ·
-          Waveform
+          Alert · Avatar · Calendar · Card · Media player · Portfolio card ·
+          Stat · Table · Waveform
         </span>
       </div>
       <div className="kit-grid">
@@ -165,6 +177,42 @@ export function KitDataDisplay() {
           </Card>
         </div>
 
+        <div className="glass kit-cell w8">
+          <span className="kit-cap">Portfolio card</span>
+          <PortfolioGrid>
+            <PortfolioCard href="https://example.com" aria-label="Visit Northstar">
+              <PortfolioCardMedia>
+                <PortfolioCardTags>
+                  <PortfolioCardTag>Live</PortfolioCardTag>
+                  <PortfolioCardTag>Fintech</PortfolioCardTag>
+                </PortfolioCardTags>
+                <PortfolioCardLogo>NS</PortfolioCardLogo>
+              </PortfolioCardMedia>
+              <PortfolioCardBody>
+                <PortfolioCardTitle>Northstar</PortfolioCardTitle>
+                <PortfolioCardDescription>
+                  Infrastructure that helps operators move money with clarity.
+                </PortfolioCardDescription>
+                <PortfolioCardAction />
+              </PortfolioCardBody>
+            </PortfolioCard>
+            <PortfolioCard>
+              <PortfolioCardMedia>
+                <PortfolioCardTags>
+                  <PortfolioCardTag>Private preview</PortfolioCardTag>
+                </PortfolioCardTags>
+                <PortfolioCardLogo>FV</PortfolioCardLogo>
+              </PortfolioCardMedia>
+              <PortfolioCardBody>
+                <PortfolioCardTitle>Field View</PortfolioCardTitle>
+                <PortfolioCardDescription>
+                  A research surface for turning evidence into decisions.
+                </PortfolioCardDescription>
+              </PortfolioCardBody>
+            </PortfolioCard>
+          </PortfolioGrid>
+        </div>
+
         <div className="glass kit-cell w4">
           <span className="kit-cap">Waveform</span>
           <Waveform bars={48} played={20} aria-label="Audio waveform, 42% played" />
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitFieldsControls.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitFieldsControls.tsx
index 0959b08..69046d3 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitFieldsControls.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitFieldsControls.tsx
@@ -5,13 +5,12 @@ import {
 import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
 import { Kbd } from "@/components/ui/kbd";
-import { NativeSelect } from "@/components/ui/native-select";
 import { Spinner } from "@/components/ui/spinner";
 
 export function KitFieldsControls() {
   return (
     <div className="kit-group reveal">
-      <div className="kit-group-head"><span className="kg-name">Fields &amp; controls</span><span className="kg-rule"></span><span className="kg-count">Button group · Field · Input group · Kbd · Native select · Spinner</span></div>
+      <div className="kit-group-head"><span className="kg-name">Fields &amp; controls</span><span className="kg-rule"></span><span className="kg-count">Button group · Field · Input group · Kbd · Spinner</span></div>
       <div className="kit-grid">
 
         <div className="glass kit-cell w4">
@@ -61,15 +60,6 @@ export function KitFieldsControls() {
           </div>
         </div>
 
-        <div className="glass kit-cell w4">
-          <span className="kit-cap">Native select</span>
-          <NativeSelect>
-            <option>Solid surface</option>
-            <option>Glass surface</option>
-            <option>Liquid surface</option>
-          </NativeSelect>
-        </div>
-
         <div className="glass kit-cell w4">
           <span className="kit-cap">Spinner</span>
           <div className="kit-row" style={{ alignItems: "center", gap: "1rem" }}>
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx
index 7388f68..184282e 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx
@@ -18,7 +18,12 @@ import { Textarea } from "@/components/ui/textarea";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
 import {
   Command,
   CommandTrigger,
@@ -50,9 +55,14 @@ export function KitFormsInputs() {
 
   return (
     <div className="kit-group reveal">
-      <div className="kit-group-head"><span className="kg-name">Forms &amp; inputs</span><span className="kg-rule"></span><span className="kg-count">Autocomplete · Checkbox · Form · Input · OTP · Select · Switch</span></div>
+      <div className="kit-group-head">
+        <span className="kg-name">Forms &amp; inputs</span>
+        <span className="kg-rule"></span>
+        <span className="kg-count">
+          Autocomplete · Checkbox · Form · Input · OTP · Select · Switch
+        </span>
+      </div>
       <div className="kit-grid">
-
         <div className="glass kit-cell w6">
           <span className="kit-cap">Autocomplete</span>
           <Autocomplete
@@ -98,15 +108,31 @@ export function KitFormsInputs() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
               />
-              <FormError data-err hidden={!emailErr}>Enter a valid email address.</FormError>
+              <FormError data-err hidden={!emailErr}>
+                Enter a valid email address.
+              </FormError>
             </FormField>
             <Checkbox data-agree checked={agree} onCheckedChange={setAgree}>
               I agree to the terms
             </Checkbox>
-            <FormError data-agree-err hidden={!agreeErr}>Please accept the terms to continue.</FormError>
-            <div className="kit-row" style={{ justifyContent: "space-between", alignItems: "center", gap: "0.8rem" }}>
-              <button className="sl-btn default" type="submit"><ArrowRight />Create account</button>
-              <FormSuccess data-ok hidden={!ok}>Account created.</FormSuccess>
+            <FormError data-agree-err hidden={!agreeErr}>
+              Please accept the terms to continue.
+            </FormError>
+            <div
+              className="kit-row"
+              style={{
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "0.8rem",
+              }}
+            >
+              <button className="sl-btn default" type="submit">
+                <ArrowRight />
+                Create account
+              </button>
+              <FormSuccess data-ok hidden={!ok}>
+                Account created.
+              </FormSuccess>
             </div>
           </Form>
         </div>
@@ -115,8 +141,12 @@ export function KitFormsInputs() {
           <span className="kit-cap">Label</span>
           <div className="kit-col" style={{ gap: "0.85rem" }}>
             <Label>Default label</Label>
-            <Label>Required label<span className="lb-req">*</span></Label>
-            <Label>Optional label<span className="lb-opt">optional</span></Label>
+            <Label>
+              Required label<span className="lb-req">*</span>
+            </Label>
+            <Label>
+              Optional label<span className="lb-opt">optional</span>
+            </Label>
             <Label className="lb-disabled">Disabled label</Label>
           </div>
         </div>
@@ -124,7 +154,7 @@ export function KitFormsInputs() {
         <div className="glass kit-cell w4">
           <span className="kit-cap">Checkbox</span>
           <div className="kit-col">
-            <Checkbox defaultChecked>Liquid glass surfaces</Checkbox>
+            <Checkbox defaultChecked>Liquid navigation transitions</Checkbox>
             <Checkbox>Flat shadows</Checkbox>
             <Checkbox defaultChecked>Sharp 90° corners</Checkbox>
           </div>
@@ -146,57 +176,73 @@ export function KitFormsInputs() {
         </div>
 
         <div className="glass kit-cell w6">
-          <span className="kit-cap">Progress · skeleton</span>
+          <span className="kit-cap">Progress</span>
           <Progress value={68} />
-          <div className="kit-row" style={{ gap: "0.7rem", width: "100%", flexWrap: "nowrap" }}>
+        </div>
+
+        <div className="glass kit-cell w6">
+          <span className="kit-cap">Data skeleton</span>
+          <div
+            className="kit-row"
+            style={{ gap: "0.7rem", width: "100%", flexWrap: "nowrap" }}
+          >
             <Skeleton style={{ width: "44px", height: "44px" }} />
             <div className="kit-col" style={{ flex: 1, gap: "0.45rem" }}>
               <Skeleton style={{ height: "11px", width: "70%" }} />
               <Skeleton style={{ height: "11px", width: "45%" }} />
             </div>
           </div>
-        </div>
-
-        <div className="glass kit-cell w4">
-          <span className="kit-cap">Skeleton · card</span>
-          <div className="kit-col" style={{ gap: "0.7rem", width: "100%" }} aria-hidden="true">
-            <Skeleton style={{ height: "96px", width: "100%" }} />
-            <Skeleton style={{ height: "13px", width: "80%" }} />
-            <Skeleton style={{ height: "11px", width: "100%" }} />
-            <Skeleton style={{ height: "11px", width: "55%" }} />
-          </div>
-        </div>
-
-        <div className="glass kit-cell w4">
-          <span className="kit-cap">Skeleton · text</span>
-          <div className="kit-col" style={{ gap: "0.55rem", width: "100%" }} aria-hidden="true">
-            <Skeleton style={{ height: "9px", width: "35%" }} />
-            <Skeleton style={{ height: "16px", width: "72%" }} />
-            <Skeleton style={{ height: "11px", width: "100%" }} />
-            <Skeleton style={{ height: "11px", width: "92%" }} />
-            <Skeleton style={{ height: "11px", width: "64%" }} />
-          </div>
-        </div>
-
-        <div className="glass kit-cell w4">
-          <span className="kit-cap">Skeleton · list</span>
-          <div className="kit-col" style={{ gap: "0.7rem", width: "100%" }} aria-hidden="true">
-            <div className="kit-row" style={{ gap: "0.7rem", width: "100%", flexWrap: "nowrap", alignItems: "center" }}>
-              <Skeleton style={{ width: "32px", height: "32px", flex: "none" }} />
+          <div
+            className="kit-col"
+            style={{ gap: "0.7rem", width: "100%", marginTop: "0.8rem" }}
+            aria-hidden="true"
+          >
+            <div
+              className="kit-row"
+              style={{
+                gap: "0.7rem",
+                width: "100%",
+                flexWrap: "nowrap",
+                alignItems: "center",
+              }}
+            >
+              <Skeleton
+                style={{ width: "32px", height: "32px", flex: "none" }}
+              />
               <div className="kit-col" style={{ flex: 1, gap: "0.4rem" }}>
                 <Skeleton style={{ height: "10px", width: "60%" }} />
                 <Skeleton style={{ height: "10px", width: "38%" }} />
               </div>
             </div>
-            <div className="kit-row" style={{ gap: "0.7rem", width: "100%", flexWrap: "nowrap", alignItems: "center" }}>
-              <Skeleton style={{ width: "32px", height: "32px", flex: "none" }} />
+            <div
+              className="kit-row"
+              style={{
+                gap: "0.7rem",
+                width: "100%",
+                flexWrap: "nowrap",
+                alignItems: "center",
+              }}
+            >
+              <Skeleton
+                style={{ width: "32px", height: "32px", flex: "none" }}
+              />
               <div className="kit-col" style={{ flex: 1, gap: "0.4rem" }}>
                 <Skeleton style={{ height: "10px", width: "72%" }} />
                 <Skeleton style={{ height: "10px", width: "46%" }} />
               </div>
             </div>
-            <div className="kit-row" style={{ gap: "0.7rem", width: "100%", flexWrap: "nowrap", alignItems: "center" }}>
-              <Skeleton style={{ width: "32px", height: "32px", flex: "none" }} />
+            <div
+              className="kit-row"
+              style={{
+                gap: "0.7rem",
+                width: "100%",
+                flexWrap: "nowrap",
+                alignItems: "center",
+              }}
+            >
+              <Skeleton
+                style={{ width: "32px", height: "32px", flex: "none" }}
+              />
               <div className="kit-col" style={{ flex: 1, gap: "0.4rem" }}>
                 <Skeleton style={{ height: "10px", width: "54%" }} />
                 <Skeleton style={{ height: "10px", width: "32%" }} />
@@ -215,7 +261,7 @@ export function KitFormsInputs() {
         </div>
 
         <div className="glass kit-cell w6">
-          <span className="kit-cap">Select</span>
+          <span className="kit-cap">Select / options</span>
           <Select>
             <SelectTrigger placeholder="Choose a surface" />
             <SelectContent>
@@ -225,7 +271,9 @@ export function KitFormsInputs() {
               <SelectItem value="Flat">Flat</SelectItem>
             </SelectContent>
           </Select>
-          <span className="kit-cap" style={{ marginTop: "0.6rem" }}>Command / combobox</span>
+          <span className="kit-cap" style={{ marginTop: "0.6rem" }}>
+            Command / combobox
+          </span>
           <Command>
             <CommandTrigger>Search commands…</CommandTrigger>
             <CommandContent style={{ minWidth: "220px" }}>
@@ -243,23 +291,47 @@ export function KitFormsInputs() {
         <div className="glass kit-cell w4">
           <span className="kit-cap">Switch · slider</span>
           <div className="kit-row" style={{ justifyContent: "space-between" }}>
-            <span className="mono" style={{ fontSize: "0.8rem" }}>Notifications</span>
+            <span className="mono" style={{ fontSize: "0.8rem" }}>
+              Notifications
+            </span>
             <Switch defaultChecked />
           </div>
           <div className="kit-row" style={{ justifyContent: "space-between" }}>
-            <span className="mono" style={{ fontSize: "0.8rem" }}>Reduced motion</span>
+            <span className="mono" style={{ fontSize: "0.8rem" }}>
+              Reduced motion
+            </span>
             <Switch />
           </div>
           <div className="kit-row" style={{ gap: "0.8rem" }}>
             <Slider defaultValue={60} onValueChange={setSliderVal} />
-            <span className="mono" style={{ fontSize: "0.78rem", color: "var(--ink-dim)" }}><span data-slider-out>{sliderVal}</span>%</span>
+            <span
+              className="mono"
+              style={{ fontSize: "0.78rem", color: "var(--ink-dim)" }}
+            >
+              <span data-slider-out>{sliderVal}</span>%
+            </span>
           </div>
         </div>
 
         <div className="glass kit-cell w4">
           <span className="kit-cap">Number field</span>
-          <NumberField defaultValue={3} min={0} max={99} step={1} aria-label="Quantity" />
-          <span className="mono" style={{ fontSize: "0.72rem", color: "var(--ink-dim)", marginTop: "0.55rem" }}>Steppers or ↑ ↓ arrow keys</span>
+          <NumberField
+            defaultValue={3}
+            min={0}
+            max={99}
+            step={1}
+            aria-label="Quantity"
+          />
+          <span
+            className="mono"
+            style={{
+              fontSize: "0.72rem",
+              color: "var(--ink-dim)",
+              marginTop: "0.55rem",
+            }}
+          >
+            Steppers or ↑ ↓ arrow keys
+          </span>
         </div>
 
         <div className="glass kit-cell w4">
@@ -268,15 +340,14 @@ export function KitFormsInputs() {
             <Legend>Billing address</Legend>
             <FormField>
               <Label>City</Label>
-              <Input placeholder="San Francisco" />
+              <Input placeholder="Brooklyn, New York" />
             </FormField>
             <FormField>
               <Label>Postal code</Label>
-              <Input placeholder="94103" />
+              <Input placeholder="11201" />
             </FormField>
           </Fieldset>
         </div>
-
       </div>
     </div>
   );
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitLayoutStructure.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitLayoutStructure.tsx
index 9edf606..5ebedff 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitLayoutStructure.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitLayoutStructure.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Sparkles } from "lucide-react";
 import {
   SectionHeader,
@@ -6,13 +7,7 @@ import {
   SectionHeaderTitle,
   SectionHeaderSubtitle,
 } from "@/components/ui/section-header";
-import {
-  ProfileHeader,
-  ProfileAvatar,
-  ProfileId,
-  ProfileName,
-  ProfileRole,
-} from "@/components/ui/profile-header";
+import { ProfileCard } from "@/components/ui/profile-card";
 import { Keycaps, Keycap } from "@/components/ui/keycap";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Resizable, ResizablePanel } from "@/components/ui/resizable";
@@ -27,6 +22,9 @@ import {
 } from "@/components/ui/sidebar";
 
 export function KitLayoutStructure() {
+  const [sidebarView, setSidebarView] = useState("Overview");
+  const sidebarLinks = ["Overview", "Library", "Tokens", "Settings"];
+
   return (
     <div className="kit-group reveal">
       <div className="kit-group-head">
@@ -53,14 +51,18 @@ export function KitLayoutStructure() {
         </div>
 
         <div className="glass kit-cell w6">
-          <span className="kit-cap">Profile header</span>
-          <ProfileHeader>
-            <ProfileAvatar>SL</ProfileAvatar>
-            <ProfileId>
-              <ProfileName>Hey, I'm Samir</ProfileName>
-              <ProfileRole>I drive impact at startups</ProfileRole>
-            </ProfileId>
-          </ProfileHeader>
+          <span className="kit-cap">Profile card</span>
+          <ProfileCard
+            label="Profile pattern"
+            status="Building"
+            initials="DL"
+            summary="Product leader building collaborative ways to work with frontier technology."
+            facts={[
+              { label: "Focus", value: "Product · AI" },
+              { label: "Base", value: "Brooklyn, New York" },
+              { label: "Source", value: "Construct" },
+            ]}
+          />
         </div>
 
         <div className="glass kit-cell w6">
@@ -134,17 +136,30 @@ export function KitLayoutStructure() {
           <Sidebar>
             <SidebarNav>
               <SidebarHeading>Workspace</SidebarHeading>
-              <SidebarLink href="#" active>
-                Overview
-              </SidebarLink>
-              <SidebarLink href="#">Library</SidebarLink>
-              <SidebarLink href="#">Tokens</SidebarLink>
+              {sidebarLinks.slice(0, 3).map((label) => (
+                <SidebarLink
+                  href="#"
+                  active={sidebarView === label}
+                  onClick={() => setSidebarView(label)}
+                  key={label}
+                >
+                  {label}
+                </SidebarLink>
+              ))}
               <SidebarHeading>Account</SidebarHeading>
-              <SidebarLink href="#">Settings</SidebarLink>
+              <SidebarLink
+                href="#"
+                active={sidebarView === "Settings"}
+                onClick={() => setSidebarView("Settings")}
+              >
+                Settings
+              </SidebarLink>
             </SidebarNav>
             <SidebarMain>
-              A structural rail: rigid border, glass fill, one accent for the
-              active route.
+              <strong>{sidebarView}</strong>
+              <span>
+                The active view changes in place. No link leaves this specimen.
+              </span>
             </SidebarMain>
           </Sidebar>
         </div>
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitNavDisclosure.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitNavDisclosure.tsx
index a31cf0d..63d5e0b 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitNavDisclosure.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitNavDisclosure.tsx
@@ -11,12 +11,6 @@ import {
   BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
 import { Pagination } from "@/components/ui/pagination";
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "@/components/ui/tabs";
 
 export function KitNavDisclosure() {
   return (
@@ -24,29 +18,39 @@ export function KitNavDisclosure() {
       <div className="kit-group-head">
         <span className="kg-name">Navigation &amp; disclosure</span>
         <span className="kg-rule"></span>
-        <span className="kg-count">Accordion · Breadcrumb · Pagination · Tabs</span>
+        <span className="kg-count">Accordion · Breadcrumb · Pagination</span>
       </div>
       <div className="kit-grid">
-
         <div className="glass kit-cell w6">
           <span className="kit-cap">Accordion</span>
           <Accordion type="single" collapsible defaultValue="item-1">
             <AccordionItem value="item-1">
               <AccordionTrigger>What is Structured Liquidity?</AccordionTrigger>
               <AccordionContent>
-                <p>It is an open UI design language that pairs rigid grids and flat offset shadows with liquid, light-reflecting glass, shipped with tokens and a full component kit.</p>
+                <p>
+                  It is an open UI design language that pairs rigid grids and
+                  flat offset shadows with liquid, light-reflecting glass,
+                  shipped with tokens and a full component kit.
+                </p>
               </AccordionContent>
             </AccordionItem>
             <AccordionItem value="item-2">
               <AccordionTrigger>Is it tied to one product?</AccordionTrigger>
               <AccordionContent>
-                <p>No. universe.audio is only one example; the language is product-agnostic and travels from product to product by its tokens.</p>
+                <p>
+                  No. universe.audio is only one example; the language is
+                  product-agnostic and travels from product to product by its
+                  tokens.
+                </p>
               </AccordionContent>
             </AccordionItem>
             <AccordionItem value="item-3">
               <AccordionTrigger>Can I theme the accent?</AccordionTrigger>
               <AccordionContent>
-                <p>Yes. A single accent token drives every emphasis across the kit, so changing one value retunes the entire interface.</p>
+                <p>
+                  Yes. A single accent token drives every emphasis across the
+                  kit, so changing one value retunes the entire interface.
+                </p>
               </AccordionContent>
             </AccordionItem>
           </Accordion>
@@ -69,21 +73,6 @@ export function KitNavDisclosure() {
           <span className="kit-cap">Pagination</span>
           <Pagination count={4} defaultPage={1} />
         </div>
-
-        <div className="glass kit-cell w6">
-          <span className="kit-cap">Tabs</span>
-          <Tabs defaultValue="preview">
-            <TabsList>
-              <TabsTrigger value="preview">Preview</TabsTrigger>
-              <TabsTrigger value="code">Code</TabsTrigger>
-              <TabsTrigger value="tokens">Tokens</TabsTrigger>
-            </TabsList>
-            <TabsContent value="preview">A glass surface in a rigid frame, what you see in the preview pane.</TabsContent>
-            <TabsContent value="code">Copy-paste markup with utility classes, ready to drop in.</TabsContent>
-            <TabsContent value="tokens">Every value exposed as a CSS custom property you can theme.</TabsContent>
-          </Tabs>
-        </div>
-
       </div>
     </div>
   );
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitNavigation.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitNavigation.tsx
index 951e58b..11eb5af 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitNavigation.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitNavigation.tsx
@@ -1,6 +1,6 @@
 import { Marquee } from "@/components/ui/marquee";
 import { NavigationBar } from "@/components/ui/navigation-bar";
-import { MobileTabBar, GlassTabBar, SegmentedNav } from "@/components/ui/mobile-nav";
+import { MobileTabBar } from "@/components/ui/mobile-nav";
 import { AIChat } from "@/components/ui/ai-chat";
 
 export function KitNavigation() {
@@ -9,10 +9,11 @@ export function KitNavigation() {
       <div className="kit-group-head">
         <span className="kg-name">Navigation</span>
         <span className="kg-rule"></span>
-        <span className="kg-count">Marquee · Menubar · Navbar</span>
+        <span className="kg-count">
+          AI chat · Floating tab bar · Marquee · Navbar
+        </span>
       </div>
       <div className="kit-grid">
-
         <div className="glass kit-cell w12">
           <span className="kit-cap">Marquee</span>
           <Marquee aria-label="Supported languages" />
@@ -24,25 +25,14 @@ export function KitNavigation() {
         </div>
 
         <div className="glass kit-cell w6">
-          <span className="kit-cap">Tab bar &amp; drawer</span>
+          <span className="kit-cap">Floating tab bar &amp; drawer</span>
           <MobileTabBar />
         </div>
 
-        <div className="glass kit-cell w6">
-          <span className="kit-cap">Floating glass tab bar</span>
-          <GlassTabBar />
-        </div>
-
-        <div className="glass kit-cell w6">
-          <span className="kit-cap">Segmented sub-nav</span>
-          <SegmentedNav />
-        </div>
-
         <div className="glass kit-cell w6">
           <span className="kit-cap">AI chat · conversation</span>
           <AIChat />
         </div>
-
       </div>
     </div>
   );
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx
index 9e16f22..b876bed 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx
@@ -52,6 +52,7 @@ import {
   PricingPrice,
 } from "@/components/ui/pricing-card";
 import { SiteContent, SiteShell } from "@/components/ui/site-shell";
+import { UnitEconomicsChart } from "@/components/ui/unit-economics-chart";
 import { Step, Stepper } from "@/components/ui/stepper";
 import { Timeline, TimelineItem } from "@/components/ui/timeline";
 import {
@@ -69,16 +70,16 @@ export function KitPatterns() {
         <span className="kg-name">Production patterns</span>
         <span className="kg-rule" />
         <span className="kg-count">
-          Shell · Activity · Upload · Pricing · Timeline · Filters · Detail
-          panel · Proof
+          Shell · Activity · Upload · Pricing · Economics · Timeline · Filters ·
+          Detail panel · Proof
         </span>
       </div>
       <div className="kit-grid">
         <div className="glass kit-cell w12">
           <span className="kit-cap">Site shell</span>
           <div className="sl-shell-demo">
-            <SiteShell>Navigation and footer share this wider frame</SiteShell>
-            <SiteContent>Page content stays deliberately narrower</SiteContent>
+            <SiteShell>Navigation and footer use the shared site frame</SiteShell>
+            <SiteContent>Body surface aligns to the same frame</SiteContent>
           </div>
         </div>
 
@@ -276,6 +277,41 @@ export function KitPatterns() {
             </PricingFooter>
           </PricingCard>
         </div>
+
+        <div className="glass kit-cell w6">
+          <span className="kit-cap">Unit economics chart</span>
+          <UnitEconomicsChart
+            totalLabel="Monthly membership"
+            totalValue="$3.99"
+            allocations={[
+              {
+                label: "Payments",
+                value: "$0.50",
+                share: 12.5,
+                description: "Checkout, billing, and tax tooling.",
+              },
+              {
+                label: "Infrastructure",
+                value: "$0.75",
+                share: 18.75,
+                description: "Delivery, storage, and shared hosting.",
+              },
+              {
+                label: "AI capacity",
+                value: "$0.25",
+                share: 6.25,
+                description: "Private routing and reliability headroom.",
+              },
+              {
+                label: "Build + support",
+                value: "$2.50",
+                share: 62.5,
+                description: "Product work, safety, support, and margin.",
+              },
+            ]}
+            note="Quarter-rounded allocations make the model legible without implying every month costs exactly the same."
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/artifacts/structured-liquidity/src/components/site/liquid.tsx b/artifacts/structured-liquidity/src/components/site/liquid.tsx
index 0193bb3..89ab578 100644
--- a/artifacts/structured-liquidity/src/components/site/liquid.tsx
+++ b/artifacts/structured-liquidity/src/components/site/liquid.tsx
@@ -40,10 +40,16 @@ function makeWater(w: number, h: number, opts: WaterOpts = {}): SVGElement {
   const wl = w / periods;
   const step = Math.max(2, w / 60);
 
-  function wavePath(cls: string, lvl: number, a: number, fillDown: boolean) {
+  function wavePath(
+    cls: string,
+    lvl: number,
+    a: number,
+    fillDown: boolean,
+    phase = 0,
+  ) {
     let d = "M 0 " + lvl.toFixed(2);
     for (let x = 0; x <= 2 * w; x += step) {
-      const y = lvl + a * Math.sin((2 * Math.PI * x) / wl);
+      const y = lvl + a * Math.sin((2 * Math.PI * x) / wl + phase);
       d += " L " + x.toFixed(2) + " " + y.toFixed(2);
     }
     if (fillDown)
@@ -75,11 +81,27 @@ function makeWater(w: number, h: number, opts: WaterOpts = {}): SVGElement {
       }),
     );
     bob.appendChild(wavePath("lw-ripple lw-ripple-a", h * 0.3, amp * 0.7, false));
-    bob.appendChild(wavePath("lw-ripple lw-ripple-b", h * 0.58, amp * 0.55, false));
+    bob.appendChild(
+      wavePath("lw-ripple lw-ripple-b", h * 0.58, amp * 0.55, false, Math.PI * 0.7),
+    );
+    bob.appendChild(
+      wavePath("lw-caustic lw-caustic-a", h * 0.43, amp * 0.42, false, Math.PI * 1.2),
+    );
+    bob.appendChild(
+      wavePath("lw-caustic lw-caustic-b", h * 0.72, amp * 0.34, false, Math.PI * 0.35),
+    );
     bob.appendChild(wavePath("lw-shine", h * 0.16, amp * 0.6, false));
   } else {
-    bob.appendChild(wavePath("lw-wave-back", level + amp * 0.55, amp * 0.8, true));
+    bob.appendChild(
+      wavePath("lw-wave-back", level + amp * 0.55, amp * 0.8, true, Math.PI * 0.45),
+    );
     bob.appendChild(wavePath("lw-wave-front", level, amp, true));
+    bob.appendChild(
+      wavePath("lw-meniscus", level + amp * 0.18, amp * 0.72, false, Math.PI * 0.9),
+    );
+    bob.appendChild(
+      wavePath("lw-caustic lw-caustic-a", level + h * 0.2, amp * 0.5, false, Math.PI * 1.25),
+    );
     bob.appendChild(wavePath("lw-shine", level, amp, false));
   }
   slosh.appendChild(bob);
@@ -157,7 +179,7 @@ const CUBE = {
     "M50 82 L50 63.44 M22.29 66 L38.36 56.72 M22.29 34 L38.36 43.28",
 };
 
-function buildCube(host: HTMLElement) {
+function buildCube(host: HTMLElement, faceLabels?: readonly [string, string, string]) {
   host.querySelector("svg.liquid-cube")?.remove();
 
   const uid = "lc-" + Math.random().toString(36).slice(2, 8);
@@ -186,6 +208,26 @@ function buildCube(host: HTMLElement) {
   svg.appendChild(el("path", { class: "lw-cube-edge", d: CUBE.innerHex }));
   svg.appendChild(el("path", { class: "lw-cube-shell", d: CUBE.outerHex }));
 
+  if (faceLabels) {
+    /* Centroids of the three inner faces: left, right, and lower plane. */
+    const positions = [
+      { x: 42.1, y: 46.6 },
+      { x: 57.9, y: 46.6 },
+      { x: 50, y: 56.8 },
+    ];
+    faceLabels.forEach((label, index) => {
+      const text = el("text", {
+        class: "lw-cube-face-index",
+        x: positions[index].x,
+        y: positions[index].y,
+        "text-anchor": "middle",
+        "dominant-baseline": "central",
+      });
+      text.textContent = label;
+      svg.appendChild(text);
+    });
+  }
+
   host.appendChild(svg);
   host.classList.add("is-cube");
 }
@@ -219,7 +261,13 @@ function startSlosh() {
     if (slosh > 14) slosh = 14;
     else if (slosh < -14) slosh = -14;
     const tr =
-      "skewY(" + (slosh * 0.45).toFixed(2) + "deg) translateY(" + (slosh * 0.3).toFixed(2) + "px)";
+      "skewY(" +
+      (slosh * 0.42).toFixed(2) +
+      "deg) rotate(" +
+      (slosh * 0.08).toFixed(2) +
+      "deg) translateY(" +
+      (slosh * 0.34).toFixed(2) +
+      "px)";
     const nodes = document.querySelectorAll<HTMLElement>(".lw-slosh");
     for (let i = 0; i < nodes.length; i++) nodes[i].style.transform = tr;
     if (Math.abs(rawV) < 0.01 && Math.abs(sloshV) < 0.01 && Math.abs(slosh) < 0.01) {
@@ -271,20 +319,22 @@ export function LiquidWord({
 export function Hypercube({
   className,
   style,
+  faceLabels,
 }: {
   className?: string;
   style?: React.CSSProperties;
+  faceLabels?: readonly [string, string, string];
 }) {
   const ref = useRef<HTMLSpanElement>(null);
   useEffect(() => {
     const host = ref.current;
     if (!host) return;
-    buildCube(host);
+    buildCube(host, faceLabels);
     startSlosh();
     let rt: number;
     const onResize = () => {
       clearTimeout(rt);
-      rt = window.setTimeout(() => buildCube(host), 150);
+      rt = window.setTimeout(() => buildCube(host, faceLabels), 150);
     };
     window.addEventListener("resize", onResize);
     return () => {
@@ -292,6 +342,6 @@ export function Hypercube({
       window.removeEventListener("resize", onResize);
       host.querySelector("svg.liquid-cube")?.remove();
     };
-  }, []);
+  }, [faceLabels]);
   return <span ref={ref} className={cn("glyph", className)} style={style} aria-hidden="true" />;
 }
diff --git a/artifacts/structured-liquidity/src/components/ui/breadcrumb.tsx b/artifacts/structured-liquidity/src/components/ui/breadcrumb.tsx
index 1a28edf..830913c 100644
--- a/artifacts/structured-liquidity/src/components/ui/breadcrumb.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/breadcrumb.tsx
@@ -18,8 +18,17 @@ Breadcrumb.displayName = "Breadcrumb";
 export const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ className, href = "#", ...props }, ref) => (
-  <a ref={ref} href={href} className={className} {...props} />
+>(({ className, href = "#", onClick, ...props }, ref) => (
+  <a
+    ref={ref}
+    href={href}
+    className={className}
+    onClick={(event) => {
+      if (href === "#") event.preventDefault();
+      onClick?.(event);
+    }}
+    {...props}
+  />
 ));
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
diff --git a/artifacts/structured-liquidity/src/components/ui/context-menu.tsx b/artifacts/structured-liquidity/src/components/ui/context-menu.tsx
index cee944a..29482d1 100644
--- a/artifacts/structured-liquidity/src/components/ui/context-menu.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/context-menu.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 
 interface ContextMenuCtx {
@@ -74,15 +75,22 @@ export function ContextMenuContent({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   const { open, pos } = useContextMenu();
-  if (!open) return null;
-  return (
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
     <div
       className={cn("sl-ctx-menu", className)}
-      style={{ position: "fixed", top: pos.y, left: pos.x, zIndex: 200, ...style }}
+      style={{
+        position: "fixed",
+        top: Math.min(pos.y, window.innerHeight - 230),
+        left: Math.min(pos.x, window.innerWidth - 220),
+        zIndex: 2147483647,
+        ...style,
+      }}
       onMouseDown={(e) => e.stopPropagation()}
       onContextMenu={(e) => e.preventDefault()}
       {...props}
-    />
+    />,
+    document.body,
   );
 }
 
diff --git a/artifacts/structured-liquidity/src/components/ui/media-player.tsx b/artifacts/structured-liquidity/src/components/ui/media-player.tsx
index 06287e6..3fcc1f7 100644
--- a/artifacts/structured-liquidity/src/components/ui/media-player.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/media-player.tsx
@@ -1,11 +1,22 @@
 import * as React from "react";
-import { Radio, Shuffle, SkipBack, Pause, SkipForward, Repeat, Volume2 } from "lucide-react";
+import {
+  Radio,
+  Shuffle,
+  SkipBack,
+  Pause,
+  SkipForward,
+  Repeat,
+  Volume2,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Waveform } from "@/components/ui/waveform";
 
-export interface MediaPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface MediaPlayerProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onVolumeChange"
+> {
   eyebrow?: string;
   title?: string;
   artist?: string;
@@ -18,6 +29,7 @@ export interface MediaPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
   played?: number;
   /** volume fill, 0–100 */
   volume?: number;
+  onVolumeChange?: (value: number) => void;
 }
 
 /** Structured Liquidity media player — a rigid "now playing" card over a glass waveform. */
@@ -33,64 +45,87 @@ export const MediaPlayer = React.forwardRef<HTMLDivElement, MediaPlayerProps>(
       bars = 56,
       played = 22,
       volume = 72,
+      onVolumeChange,
       className,
       ...props
     },
     ref,
-  ) => (
-    <div ref={ref} className={cn("sl-player", className)} {...props}>
-      <div className="pl-top">
-        <span className="pl-art" aria-hidden="true">
-          <Radio />
-        </span>
-        <div className="pl-meta">
-          <span className="pl-eyebrow">{eyebrow}</span>
-          <span className="pl-title">{title}</span>
-          <span className="pl-artist">{artist}</span>
-        </div>
-        {badge != null && <Badge variant="default">{badge}</Badge>}
-      </div>
-      <div className="pl-progress">
-        <Waveform
-          className="pl-wave"
-          bars={bars}
-          played={played}
-          aria-label="Playback position"
-        />
-        <div className="pl-times">
-          <span className="pl-time">{elapsed}</span>
-          <span className="pl-time">{duration}</span>
+  ) => {
+    const [internalVolume, setInternalVolume] = React.useState(volume);
+    React.useEffect(() => setInternalVolume(volume), [volume]);
+    const level = internalVolume;
+    const updateVolume = (next: number) => {
+      setInternalVolume(next);
+      onVolumeChange?.(next);
+    };
+
+    return (
+      <div ref={ref} className={cn("sl-player", className)} {...props}>
+        <div className="pl-top">
+          <span className="pl-art" aria-hidden="true">
+            <Radio />
+          </span>
+          <div className="pl-meta">
+            <span className="pl-eyebrow">{eyebrow}</span>
+            <span className="pl-title">{title}</span>
+            <span className="pl-artist">{artist}</span>
+          </div>
+          {badge != null && <Badge variant="default">{badge}</Badge>}
         </div>
-      </div>
-      <div className="pl-controls">
-        <div className="pl-transport">
-          <Button variant="ghost" className="pl-ic" aria-label="Shuffle">
-            <Shuffle />
-          </Button>
-          <Button variant="ghost" className="pl-ic" aria-label="Previous track">
-            <SkipBack />
-          </Button>
-          <Button variant="default" className="pl-play" aria-label="Pause">
-            <Pause />
-          </Button>
-          <Button variant="ghost" className="pl-ic" aria-label="Next track">
-            <SkipForward />
-          </Button>
-          <Button variant="ghost" className="pl-ic" aria-label="Repeat">
-            <Repeat />
-          </Button>
+        <div className="pl-progress">
+          <Waveform
+            className="pl-wave"
+            bars={bars}
+            played={played}
+            aria-label="Playback position"
+          />
+          <div className="pl-times">
+            <span className="pl-time">{elapsed}</span>
+            <span className="pl-time">{duration}</span>
+          </div>
         </div>
-        <div className="pl-vol">
-          <Volume2 aria-hidden="true" />
-          <div className="sl-slider">
-            <div className="trk">
-              <div className="fl" style={{ width: `${volume}%` }} />
-              <div className="th" style={{ left: `${volume}%` }} />
-            </div>
+        <div className="pl-controls">
+          <div className="pl-transport">
+            <Button variant="ghost" className="pl-ic" aria-label="Shuffle">
+              <Shuffle />
+            </Button>
+            <Button
+              variant="ghost"
+              className="pl-ic"
+              aria-label="Previous track"
+            >
+              <SkipBack />
+            </Button>
+            <Button variant="default" className="pl-play" aria-label="Pause">
+              <Pause />
+            </Button>
+            <Button variant="ghost" className="pl-ic" aria-label="Next track">
+              <SkipForward />
+            </Button>
+            <Button variant="ghost" className="pl-ic" aria-label="Repeat">
+              <Repeat />
+            </Button>
+          </div>
+          <div className="pl-vol">
+            <Volume2 aria-hidden="true" />
+            <label className="sl-slider pl-volume-slider">
+              <span className="sr-only">Volume</span>
+              <div className="trk">
+                <div className="fl" style={{ width: `${level}%` }} />
+                <div className="th" style={{ left: `${level}%` }} />
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={level}
+                onChange={(event) => updateVolume(Number(event.target.value))}
+              />
+            </label>
           </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
 );
 MediaPlayer.displayName = "MediaPlayer";
diff --git a/artifacts/structured-liquidity/src/components/ui/mobile-nav.tsx b/artifacts/structured-liquidity/src/components/ui/mobile-nav.tsx
index f45b2ad..af4bc95 100644
--- a/artifacts/structured-liquidity/src/components/ui/mobile-nav.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/mobile-nav.tsx
@@ -28,112 +28,196 @@ function PhoneScreen() {
   );
 }
 
-/** Mobile navigation — a phone frame with a top bar, slide-in drawer, and a bottom tab bar (wired by the kit script). */
-export const MobileTabBar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+/** Mobile navigation — a phone frame with a top drawer and one floating liquid-glass tab bar. */
+export const MobileTabBar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [active, setActive] = React.useState(0);
+  const select = (index: number) => {
+    setActive(index);
+    setMenuOpen(false);
+  };
+
+  return (
     <div ref={ref} className={cn("sl-mnav", className)} data-mnav {...props}>
       <div className="mn-phone">
         <div className="mn-top">
           <button
             className="mn-burger"
             data-mnav-toggle
-            aria-expanded="false"
-            aria-label="Open menu"
+            aria-expanded={menuOpen}
+            aria-label={menuOpen ? "Close menu" : "Open menu"}
+            onClick={() => setMenuOpen((open) => !open)}
           >
             <Menu className="mn-ic-open" />
             <X className="mn-ic-close" />
           </button>
           <span className="mn-brand">
-            <span className="glyph" style={{ "--s": "18px" } as CSSProperties} aria-hidden="true" />
+            <span
+              className="glyph"
+              style={{ "--s": "18px" } as CSSProperties}
+              aria-hidden="true"
+            />
             universe
           </span>
           <span className="mn-icon" aria-hidden="true">
             <Search />
           </span>
         </div>
-        <div className="mn-drawer" data-mnav-drawer data-open="false">
+        <div className="mn-drawer" data-mnav-drawer data-open={menuOpen}>
           <div>
-            <a href="#" className="mn-d-item">
+            <button
+              type="button"
+              className="mn-d-item"
+              onClick={() => select(0)}
+            >
               <Compass />
               Discover
-            </a>
-            <a href="#" className="mn-d-item">
+            </button>
+            <button
+              type="button"
+              className="mn-d-item"
+              onClick={() => select(1)}
+            >
               <Library />
               Library
-            </a>
-            <a href="#" className="mn-d-item">
+            </button>
+            <button
+              type="button"
+              className="mn-d-item"
+              onClick={() => select(2)}
+            >
               <Radio />
               Radio
-            </a>
-            <a href="#" className="mn-d-item">
+            </button>
+            <button
+              type="button"
+              className="mn-d-item"
+              onClick={() => select(3)}
+            >
               <Heart />
               Saved
-            </a>
+            </button>
           </div>
         </div>
         <PhoneScreen />
-        <nav className="mn-tabs" aria-label="Primary">
-          <button className="mn-tab is-active" aria-current="page">
+        <nav
+          className="gnav-bar mn-tabs-floating"
+          aria-label="Primary"
+          style={{ "--gnav-index": active, "--gnav-count": 5 } as CSSProperties}
+        >
+          <span className="gnav-marker" aria-hidden="true" />
+          <button
+            className={cn("gnav-tab", active === 0 && "is-active")}
+            aria-current={active === 0 ? "page" : undefined}
+            onClick={() => select(0)}
+          >
             <House />
             <span>Home</span>
           </button>
-          <button className="mn-tab">
+          <button
+            className={cn("gnav-tab", active === 1 && "is-active")}
+            aria-current={active === 1 ? "page" : undefined}
+            onClick={() => select(1)}
+          >
             <Search />
             <span>Search</span>
           </button>
-          <button className="mn-tab">
+          <button
+            className={cn("gnav-tab", active === 2 && "is-active")}
+            aria-current={active === 2 ? "page" : undefined}
+            onClick={() => select(2)}
+          >
             <Compass />
             <span>Browse</span>
           </button>
-          <button className="mn-tab">
+          <button
+            className={cn("gnav-tab", active === 3 && "is-active")}
+            aria-current={active === 3 ? "page" : undefined}
+            onClick={() => select(3)}
+          >
             <Heart />
             <span>Saved</span>
           </button>
-          <button className="mn-tab">
+          <button
+            className={cn("gnav-tab", active === 4 && "is-active")}
+            aria-current={active === 4 ? "page" : undefined}
+            onClick={() => select(4)}
+          >
             <User />
             <span>You</span>
           </button>
         </nav>
       </div>
     </div>
-  ),
-);
+  );
+});
 MobileTabBar.displayName = "MobileTabBar";
 
 /** Mobile navigation — a floating glass tab bar with a sliding active marker. */
-export const GlassTabBar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+export const GlassTabBar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const [active, setActive] = React.useState(0);
+  return (
     <div ref={ref} className={cn("sl-gnav", className)} {...props}>
       <div className="mn-phone">
         <PhoneScreen />
-        <nav className="gnav-bar" aria-label="Primary">
+        <nav
+          className="gnav-bar"
+          aria-label="Primary"
+          style={{ "--gnav-index": active } as CSSProperties}
+        >
           <span className="gnav-marker" aria-hidden="true" />
-          <button className="gnav-tab is-active" aria-current="page">
+          <button
+            className={cn("gnav-tab", active === 0 && "is-active")}
+            aria-current={active === 0 ? "page" : undefined}
+            onClick={() => setActive(0)}
+          >
             <Disc3 />
             <span>Playback</span>
           </button>
-          <button className="gnav-tab">
+          <button
+            className={cn("gnav-tab", active === 1 && "is-active")}
+            aria-current={active === 1 ? "page" : undefined}
+            onClick={() => setActive(1)}
+          >
             <Music />
             <span>Music</span>
           </button>
-          <button className="gnav-tab">
+          <button
+            className={cn("gnav-tab", active === 2 && "is-active")}
+            aria-current={active === 2 ? "page" : undefined}
+            onClick={() => setActive(2)}
+          >
             <BarChart3 />
             <span>Billboard</span>
           </button>
-          <button className="gnav-tab">
+          <button
+            className={cn("gnav-tab", active === 3 && "is-active")}
+            aria-current={active === 3 ? "page" : undefined}
+            onClick={() => setActive(3)}
+          >
             <Sparkles />
             <span>Lyriq</span>
           </button>
         </nav>
       </div>
     </div>
-  ),
-);
+  );
+});
 GlassTabBar.displayName = "GlassTabBar";
 
 /** Mobile navigation — a segmented sub-nav header with a sliding marker (wired by the kit script). */
-export const SegmentedNav = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+export const SegmentedNav = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const [active, setActive] = React.useState(0);
+  return (
     <div ref={ref} className={cn("sl-snav", className)} {...props}>
       <div className="mn-phone">
         <div className="snav-head">
@@ -145,18 +229,34 @@ export const SegmentedNav = React.forwardRef<HTMLDivElement, React.HTMLAttribute
             <Search />
           </span>
         </div>
-        <div className="snav-seg" role="tablist" aria-label="Sections" data-snav-seg>
+        <div
+          className="snav-seg"
+          role="tablist"
+          aria-label="Sections"
+          data-snav-seg
+          style={{ "--seg-index": active } as CSSProperties}
+        >
           <span className="snav-marker" aria-hidden="true" />
-          <button className="snav-seg-btn" role="tab" aria-selected="true">
+          <button
+            className="snav-seg-btn"
+            role="tab"
+            aria-selected={active === 0}
+            onClick={() => setActive(0)}
+          >
             Playlists
           </button>
-          <button className="snav-seg-btn" role="tab" aria-selected="false">
+          <button
+            className="snav-seg-btn"
+            role="tab"
+            aria-selected={active === 1}
+            onClick={() => setActive(1)}
+          >
             Songs
           </button>
         </div>
         <PhoneScreen />
       </div>
     </div>
-  ),
-);
+  );
+});
 SegmentedNav.displayName = "SegmentedNav";
diff --git a/artifacts/structured-liquidity/src/components/ui/navigation-bar.tsx b/artifacts/structured-liquidity/src/components/ui/navigation-bar.tsx
index 19f0907..deb19c8 100644
--- a/artifacts/structured-liquidity/src/components/ui/navigation-bar.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/navigation-bar.tsx
@@ -1,69 +1,53 @@
 import type { CSSProperties } from "react";
 import * as React from "react";
-import { Compass, Library, Radio, Play, ArrowRight } from "lucide-react";
+import { Download, Github, Sparkles } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { Avatar } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
 
 export interface NavigationBarProps extends React.HTMLAttributes<HTMLDivElement> {
   brand?: React.ReactNode;
 }
 
-/** Structured Liquidity navigation bar — a rigid top rail: brand, links, a glass menu, and right-side actions. */
-export const NavigationBar = React.forwardRef<HTMLDivElement, NavigationBarProps>(
-  ({ brand = "universe.audio", className, ...props }, ref) => (
+/** Structured Liquidity navigation bar — a clean top rail with one liquid selection marker. */
+export const NavigationBar = React.forwardRef<
+  HTMLDivElement,
+  NavigationBarProps
+>(({ brand = "Structured Liquidity", className, ...props }, ref) => {
+  const [active, setActive] = React.useState(0);
+  const destinations = [
+    { label: "Install", icon: Download },
+    { label: "Source", icon: Github },
+    { label: "Showcase", icon: Sparkles },
+  ];
+
+  return (
     <div ref={ref} className={cn("sl-navbar", className)} {...props}>
       <span className="nb-brand">
-        <span className="glyph" style={{ "--s": "22px" } as CSSProperties} aria-hidden="true" />
+        <span
+          className="glyph"
+          style={{ "--s": "22px" } as CSSProperties}
+          aria-hidden="true"
+        />
         {brand}
       </span>
-      <div className="nb-links">
-        <a href="#" aria-current="page">
-          <Compass />
-          Discover
-        </a>
-        <a href="#">
-          <Library />
-          Library
-        </a>
-        <a href="#">
-          <Radio />
-          Radio
-        </a>
-      </div>
-      <div className="sl-pop-wrap">
-        <button className="sl-trigger" data-pop aria-expanded="false" aria-haspopup="menu">
-          <span>Browse</span>
-          <span className="chev">▾</span>
-        </button>
-        <div className="sl-menu">
-          <div className="lbl">Catalog</div>
-          <div className="item">New releases</div>
-          <div className="item">Genres</div>
-          <div className="sep" />
-          <div className="item">Languages</div>
-        </div>
-      </div>
-      <div className="nb-right">
-        <div className="sl-toggle-group" data-toggle-group>
-          <button aria-pressed="true" aria-label="Grid view">
-            ▦
-          </button>
-          <button aria-pressed="false" aria-label="List view">
-            ≡
+      <div
+        className="nb-links"
+        style={{ "--nb-index": active } as CSSProperties}
+      >
+        <span className="nb-liquid-marker" aria-hidden="true" />
+        {destinations.map(({ label, icon: Icon }, index) => (
+          <button
+            type="button"
+            className="nb-link"
+            aria-current={active === index ? "page" : undefined}
+            onClick={() => setActive(index)}
+            key={label}
+          >
+            <Icon />
+            {label}
           </button>
-        </div>
-        <Avatar>U</Avatar>
-        <Button variant="ghost" size="sm">
-          <Play />
-          Demo
-        </Button>
-        <Button variant="default" size="sm">
-          <ArrowRight />
-          Join waitlist
-        </Button>
+        ))}
       </div>
     </div>
-  ),
-);
+  );
+});
 NavigationBar.displayName = "NavigationBar";
diff --git a/artifacts/structured-liquidity/src/components/ui/navigation-menu.tsx b/artifacts/structured-liquidity/src/components/ui/navigation-menu.tsx
index de80c9d..a422c7a 100644
--- a/artifacts/structured-liquidity/src/components/ui/navigation-menu.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/navigation-menu.tsx
@@ -17,8 +17,7 @@ export function NavigationMenuItem({
   return <div className={cn("nm-item", className)} {...props} />;
 }
 
-export interface NavigationMenuTriggerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** render the dropdown chevron */
   withChevron?: boolean;
 }
@@ -46,7 +45,16 @@ export function NavigationMenuContent({
 export const NavigationMenuLink = React.forwardRef<
   HTMLAnchorElement,
   React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ className, href = "#", ...props }, ref) => (
-  <a ref={ref} href={href} className={className} {...props} />
+>(({ className, href = "#", onClick, ...props }, ref) => (
+  <a
+    ref={ref}
+    href={href}
+    className={className}
+    onClick={(event) => {
+      if (href === "#") event.preventDefault();
+      onClick?.(event);
+    }}
+    {...props}
+  />
 ));
 NavigationMenuLink.displayName = "NavigationMenuLink";
diff --git a/artifacts/structured-liquidity/src/components/ui/portfolio-card.tsx b/artifacts/structured-liquidity/src/components/ui/portfolio-card.tsx
new file mode 100644
index 0000000..9fef7e6
--- /dev/null
+++ b/artifacts/structured-liquidity/src/components/ui/portfolio-card.tsx
@@ -0,0 +1,113 @@
+import * as React from "react";
+import { ExternalLink } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Default Structured Liquidity portfolio grid.
+ *
+ * Identity, description, state, and action stay visible at rest. Hover may
+ * reinforce tactility, but it must never be required to understand the card.
+ */
+export function PortfolioGrid({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sl-portfolio-grid", className)} {...props} />;
+}
+
+type PortfolioCardProps = React.HTMLAttributes<HTMLElement> & {
+  href?: string;
+  external?: boolean;
+};
+
+export function PortfolioCard({
+  className,
+  href,
+  external = true,
+  children,
+  ...props
+}: PortfolioCardProps) {
+  const cardClassName = cn("sl-portfolio-card", className);
+
+  if (href) {
+    return (
+      <a
+        className={cardClassName}
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <article className={cardClassName} {...props}>
+      {children}
+    </article>
+  );
+}
+
+export function PortfolioCardMedia({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sl-portfolio-card-media", className)} {...props} />;
+}
+
+export function PortfolioCardLogo({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sl-portfolio-card-logo", className)} {...props} />;
+}
+
+export function PortfolioCardBody({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sl-portfolio-card-body", className)} {...props} />;
+}
+
+export function PortfolioCardTags({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sl-portfolio-card-tags", className)} {...props} />;
+}
+
+export function PortfolioCardTag({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("sl-portfolio-card-tag", className)} {...props} />;
+}
+
+export function PortfolioCardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("sl-portfolio-card-title", className)} {...props} />;
+}
+
+export function PortfolioCardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("sl-portfolio-card-description", className)} {...props} />;
+}
+
+export function PortfolioCardAction({
+  className,
+  children = "Visit",
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span className={cn("sl-portfolio-card-action", className)} {...props}>
+      {children}
+      <ExternalLink aria-hidden="true" />
+    </span>
+  );
+}
diff --git a/artifacts/structured-liquidity/src/components/ui/profile-card.tsx b/artifacts/structured-liquidity/src/components/ui/profile-card.tsx
new file mode 100644
index 0000000..db90c9d
--- /dev/null
+++ b/artifacts/structured-liquidity/src/components/ui/profile-card.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ProfileCardFact {
+  label: string;
+  value: React.ReactNode;
+}
+
+export interface ProfileCardProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "title"
+> {
+  label?: string;
+  status?: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  initials?: string;
+  summary: React.ReactNode;
+  facts: ProfileCardFact[];
+}
+
+/** Field-sourced profile summary card: privacy-safe identity, concise positioning, and scannable facts. */
+export const ProfileCard = React.forwardRef<HTMLElement, ProfileCardProps>(
+  (
+    {
+      label = "Profile",
+      status = "Active",
+      imageSrc,
+      imageAlt,
+      initials = "SL",
+      summary,
+      facts,
+      className,
+      ...props
+    },
+    ref,
+  ) => (
+    <article ref={ref} className={cn("sl-profile-card", className)} {...props}>
+      <header className="sl-profile-card-head">
+        <span>{label}</span>
+        <span className="sl-profile-card-status">{status}</span>
+      </header>
+      <div className="sl-profile-card-image">
+        {imageSrc ? (
+          <img src={imageSrc} alt={imageAlt ?? ""} />
+        ) : (
+          <span className="sl-profile-card-initials" aria-label="Profile initials">
+            {initials}
+          </span>
+        )}
+      </div>
+      <p className="sl-profile-card-summary">{summary}</p>
+      <dl className="sl-profile-card-facts">
+        {facts.map((fact) => (
+          <div key={fact.label}>
+            <dt>{fact.label}</dt>
+            <dd>{fact.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </article>
+  ),
+);
+ProfileCard.displayName = "ProfileCard";
diff --git a/artifacts/structured-liquidity/src/components/ui/sidebar.tsx b/artifacts/structured-liquidity/src/components/ui/sidebar.tsx
index 0913a78..b53949a 100644
--- a/artifacts/structured-liquidity/src/components/ui/sidebar.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/sidebar.tsx
@@ -2,25 +2,53 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 /** Structured Liquidity sidebar — a structural rail beside a content pane. */
-export function Sidebar({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+export function Sidebar({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("sl-sidebar-demo", className)} {...props} />;
 }
 
-export function SidebarNav({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function SidebarNav({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
   return <nav className={cn("sb", className)} {...props} />;
 }
 
-export function SidebarHeading({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+export function SidebarHeading({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
   return <span className={cn("sb-h", className)} {...props} />;
 }
 
 export interface SidebarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   active?: boolean;
 }
-export function SidebarLink({ className, active, ...props }: SidebarLinkProps) {
-  return <a className={cn(active && "active", className)} {...props} />;
+export function SidebarLink({
+  className,
+  active,
+  href = "#",
+  onClick,
+  ...props
+}: SidebarLinkProps) {
+  return (
+    <a
+      className={cn(active && "active", className)}
+      href={href}
+      onClick={(event) => {
+        if (href === "#") event.preventDefault();
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
 }
 
-export function SidebarMain({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+export function SidebarMain({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("sb-main", className)} {...props} />;
 }
diff --git a/artifacts/structured-liquidity/src/components/ui/site-shell.tsx b/artifacts/structured-liquidity/src/components/ui/site-shell.tsx
index 354b029..c387edb 100644
--- a/artifacts/structured-liquidity/src/components/ui/site-shell.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/site-shell.tsx
@@ -1,10 +1,7 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-/**
- * Shared outer chrome width for navigation and footers.
- * It is deliberately wider than SiteContent, so the chrome frames the page.
- */
+/** Shared width and responsive gutters for navigation, body, and footer chrome. */
 export const SiteShell = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div ref={ref} className={cn("sl-site-shell", className)} {...props} />
@@ -12,11 +9,13 @@ export const SiteShell = React.forwardRef<HTMLDivElement, React.HTMLAttributes<H
 );
 SiteShell.displayName = "SiteShell";
 
-/** The narrower reading and application-content column. */
+/**
+ * An independent body surface aligned to SiteShell. Tenant layouts may add
+ * their own internal reading measure without changing the outer frame.
+ */
 export const SiteContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("sl-site-content", className)} {...props} />
+    <div ref={ref} className={cn("sl-site-content sl-site-body", className)} {...props} />
   ),
 );
 SiteContent.displayName = "SiteContent";
-
diff --git a/artifacts/structured-liquidity/src/components/ui/tabs.tsx b/artifacts/structured-liquidity/src/components/ui/tabs.tsx
index 31d2bee..13c2a67 100644
--- a/artifacts/structured-liquidity/src/components/ui/tabs.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/tabs.tsx
@@ -12,7 +12,10 @@ const useTabs = () => {
   return c;
 };
 
-export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface TabsProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
@@ -41,14 +44,50 @@ export function Tabs({
   );
 }
 
-export function TabsList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div role="tablist" className={cn("tablist", className)} {...props} />;
+export function TabsList({
+  className,
+  children,
+  style,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { value } = useTabs();
+  const items = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement<TabsTriggerProps> =>
+      React.isValidElement<TabsTriggerProps>(child) &&
+      typeof child.props.value === "string",
+  );
+  const selectedIndex = Math.max(
+    0,
+    items.findIndex((item) => item.props.value === value),
+  );
+  return (
+    <div
+      role="tablist"
+      className={cn("tablist", "is-liquid", className)}
+      style={
+        {
+          ...style,
+          "--tab-index": selectedIndex,
+          "--tab-count": Math.max(1, items.length),
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      <span className="sl-tab-marker" aria-hidden="true" />
+      {children}
+    </div>
+  );
 }
 
 export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   value: string;
 }
-export function TabsTrigger({ value, className, ...props }: TabsTriggerProps) {
+export function TabsTrigger({
+  value,
+  className,
+  onClick,
+  ...props
+}: TabsTriggerProps) {
   const { value: v, setValue } = useTabs();
   return (
     <button
@@ -56,7 +95,10 @@ export function TabsTrigger({ value, className, ...props }: TabsTriggerProps) {
       role="tab"
       aria-selected={v === value}
       className={className}
-      onClick={() => setValue(value)}
+      onClick={(event) => {
+        setValue(value);
+        onClick?.(event);
+      }}
       {...props}
     />
   );
@@ -68,5 +110,11 @@ export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
 export function TabsContent({ value, className, ...props }: TabsContentProps) {
   const { value: v } = useTabs();
   if (v !== value) return null;
-  return <div role="tabpanel" className={cn("panel", "show", className)} {...props} />;
+  return (
+    <div
+      role="tabpanel"
+      className={cn("panel", "show", className)}
+      {...props}
+    />
+  );
 }
diff --git a/artifacts/structured-liquidity/src/components/ui/toggle-group.tsx b/artifacts/structured-liquidity/src/components/ui/toggle-group.tsx
index 7900946..9deb4e2 100644
--- a/artifacts/structured-liquidity/src/components/ui/toggle-group.tsx
+++ b/artifacts/structured-liquidity/src/components/ui/toggle-group.tsx
@@ -36,6 +36,7 @@ export function ToggleGroup({
   onValueChange,
   className,
   children,
+  style,
   ...props
 }: ToggleGroupProps) {
   const [internal, setInternal] = React.useState<string | string[]>(
@@ -56,9 +57,34 @@ export function ToggleGroup({
     (onValueChange as (value: string | string[]) => void)?.(next);
   };
 
+  const items = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement<ToggleGroupItemProps> =>
+      React.isValidElement<ToggleGroupItemProps>(child) &&
+      typeof child.props.value === "string",
+  );
+  const selectedIndex =
+    type === "single"
+      ? items.findIndex((item) => item.props.value === val)
+      : -1;
+  const liquid = type === "single" && selectedIndex >= 0 && items.length > 0;
+
   return (
-    <div className={cn("sl-toggle-group", className)} data-toggle-group {...props}>
-      <Ctx.Provider value={{ type, value: val, toggle }}>{children}</Ctx.Provider>
+    <div
+      className={cn("sl-toggle-group", liquid && "is-liquid", className)}
+      data-toggle-group
+      style={
+        {
+          ...style,
+          "--toggle-index": selectedIndex,
+          "--toggle-count": Math.max(1, items.length),
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      {liquid ? <span className="sl-toggle-marker" aria-hidden="true" /> : null}
+      <Ctx.Provider value={{ type, value: val, toggle }}>
+        {children}
+      </Ctx.Provider>
     </div>
   );
 }
@@ -66,16 +92,26 @@ export function ToggleGroup({
 export interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   value: string;
 }
-export function ToggleGroupItem({ value, className, ...props }: ToggleGroupItemProps) {
+export function ToggleGroupItem({
+  value,
+  className,
+  onClick,
+  ...props
+}: ToggleGroupItemProps) {
   const { type, value: val, toggle } = useTG();
   const pressed =
-    type === "single" ? val === value : ((val as string[]) ?? []).includes(value);
+    type === "single"
+      ? val === value
+      : ((val as string[]) ?? []).includes(value);
   return (
     <button
       type="button"
       aria-pressed={pressed}
       className={className}
-      onClick={() => toggle(value)}
+      onClick={(event) => {
+        toggle(value);
+        onClick?.(event);
+      }}
       {...props}
     />
   );
diff --git a/artifacts/structured-liquidity/src/components/ui/unit-economics-chart.tsx b/artifacts/structured-liquidity/src/components/ui/unit-economics-chart.tsx
new file mode 100644
index 0000000..9a3e190
--- /dev/null
+++ b/artifacts/structured-liquidity/src/components/ui/unit-economics-chart.tsx
@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface UnitEconomicsAllocation {
+  label: string;
+  value: string;
+  share: number;
+  description?: string;
+}
+
+export interface UnitEconomicsChartProps
+  extends React.HTMLAttributes<HTMLElement> {
+  allocations: UnitEconomicsAllocation[];
+  totalLabel?: string;
+  totalValue?: string;
+  note?: string;
+}
+
+/**
+ * A compact, accessible stacked allocation chart for explaining how a price,
+ * budget, or unit of revenue is distributed.
+ */
+export const UnitEconomicsChart = React.forwardRef<
+  HTMLElement,
+  UnitEconomicsChartProps
+>(
+  (
+    {
+      allocations,
+      totalLabel = "Total",
+      totalValue,
+      note,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const totalShare = allocations.reduce(
+      (sum, allocation) => sum + Math.max(0, allocation.share),
+      0,
+    );
+    const chartLabel = allocations
+      .map((allocation) => `${allocation.label}: ${allocation.value}`)
+      .join(", ");
+
+    return (
+      <figure ref={ref} className={cn("sl-unit-economics", className)} {...props}>
+        <figcaption className="sl-unit-economics-head">
+          <span>{totalLabel}</span>
+          {totalValue ? <strong>{totalValue}</strong> : null}
+        </figcaption>
+        <div className="sl-unit-economics-chart" role="img" aria-label={chartLabel}>
+          {allocations.map((allocation, index) => (
+            <span
+              key={`${allocation.label}-${index}`}
+              style={{
+                width: `${totalShare ? (Math.max(0, allocation.share) / totalShare) * 100 : 0}%`,
+                "--allocation-strength": `${Math.min(index, 3) * 16 + 34}%`,
+              } as React.CSSProperties}
+              title={`${allocation.label}: ${allocation.value}`}
+            />
+          ))}
+        </div>
+        <div className="sl-unit-economics-legend">
+          {allocations.map((allocation, index) => (
+            <div key={`${allocation.label}-${index}`}>
+              <i
+                style={{
+                  "--allocation-strength": `${Math.min(index, 3) * 16 + 34}%`,
+                } as React.CSSProperties}
+              />
+              <span>
+                <strong>{allocation.label}</strong>
+                {allocation.description ? <small>{allocation.description}</small> : null}
+              </span>
+              <b>{allocation.value}</b>
+            </div>
+          ))}
+        </div>
+        {note ? <p className="sl-unit-economics-note">{note}</p> : null}
+      </figure>
+    );
+  },
+);
+UnitEconomicsChart.displayName = "UnitEconomicsChart";
diff --git a/artifacts/structured-liquidity/src/lib/behaviors.ts b/artifacts/structured-liquidity/src/lib/behaviors.ts
index ba8d3e9..afa0ba2 100644
--- a/artifacts/structured-liquidity/src/lib/behaviors.ts
+++ b/artifacts/structured-liquidity/src/lib/behaviors.ts
@@ -49,6 +49,7 @@ function bindGallery() {
       .filter((c): c is typeof c & { registry: string } => "registry" in c && !!c.registry)
       .map((c) => [c.cap, c.registry] as const),
   );
+  const showcaseExclude = new Set<string>(catalog.showcase.exclude);
 
   const grid = document.createElement("div");
   grid.className = "kit-grid gallery";
@@ -57,7 +58,9 @@ function bindGallery() {
 
   const primaryCap = (cell: HTMLElement): string =>
     cell.querySelector<HTMLElement>(".kit-cap")?.textContent?.trim() ?? "";
-  const cells = Array.from(groups.querySelectorAll<HTMLElement>(".kit-cell"));
+  const cells = Array.from(groups.querySelectorAll<HTMLElement>(".kit-cell")).filter(
+    (cell) => !showcaseExclude.has(primaryCap(cell)),
+  );
   cells.sort((a, b) => {
     const la = labelOf(CAT_OF[primaryCap(a)] ?? "other").toLowerCase();
     const lb = labelOf(CAT_OF[primaryCap(b)] ?? "other").toLowerCase();
diff --git a/artifacts/structured-liquidity/src/styles/10-tokens-base.css b/artifacts/structured-liquidity/src/styles/10-tokens-base.css
index 280c6f2..08bce7e 100644
--- a/artifacts/structured-liquidity/src/styles/10-tokens-base.css
+++ b/artifacts/structured-liquidity/src/styles/10-tokens-base.css
@@ -1,60 +1,91 @@
 /* ============================================================
-   STRUCTURED LIQUIDITY — a design language built on three
-   pillars: Rigid Containment (sharp 90° corners, flat blurless
-   shadows, grid discipline), Viscous Depth (semi-transparent
-   liquid glass that reflects light), and Semantic Clarity
-   (strict text + icon pairings). This stylesheet IS the specimen.
+   STRUCTURED LIQUIDITY — Neobrutalist structure. Liquid motion.
+   Scientific modern clarity. This stylesheet IS
+   the specimen.
    ============================================================ */
 
 :root {
   /* ---- tunable knobs (driven by Tweaks) ---- */
-  --accent: #a388ee;          /* neobrutalism.dev purple */
-  --accent-ink: #000000;      /* text that sits on accent */
-  --glass-blur: 18px;
-  --glass-tint: 255 255 255;  /* rgb channels for glass fill */
-  --glass-alpha: 0.07;
+  --accent: #a388ee; /* neobrutalism.dev purple */
+  --accent-ink: #000000; /* text that sits on accent */
+  --glass-blur: 14px;
+  --glass-tint: 255 255 255; /* rgb channels for glass fill */
+  --glass-alpha: 0.72;
   --border-w: 2px;
-  --hard-x: 7px;
-  --hard-y: 7px;
+  --hard-x: 5px;
+  --hard-y: 5px;
   --radius: 0px;
-  --content-w: 1200px;
   --shell-w: 1280px;
+  --content-w: var(--shell-w);
   --viewport-gutter: 4vw;
+  --body-surface: var(--bg);
   --floating-ui-clearance: 96px;
 
-  /* ---- fixed palette (neobrutalism.dev) ---- */
-  --bg: #272933;
-  --bg-2: #1f2028;
-  --ink: #e6e6e6;             /* foreground */
-  --ink-dim: #9da0ab;
-  --edge: 0 0 0;              /* neobrutalism black border (rgb) */
+  /* ---- Scientific Modern Clarity, informed by Swiss modernism and the International Typographic Style ---- */
+  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);
+  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);
+  --measure-reading: 62ch;
+  --measure-caption: 48ch;
+  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);
+  --section-space: clamp(4rem, 9vw, 9rem);
+  --clarity-gap: clamp(1.25rem, 3vw, 3rem);
+  --rule-hairline: 1px;
+  --diagram-line: color-mix(in srgb, var(--ink) 72%, transparent);
+  --diagram-muted: color-mix(in srgb, var(--ink) 42%, transparent);
+
+  /* ---- light-first paper palette ---- */
+  --bg: #f2f0ea;
+  --bg-2: #ffffff;
+  --ink: #111111; /* foreground */
+  --ink-dim: #5d5d59;
+  --edge: 0 0 0; /* neobrutalism black border (rgb) */
   --hard-shadow: #000000;
-  --neg: #3c3f4b;             /* negative / destructive surface (gray, never red) */
-  --neg-ink: #f0f0f2;
+  --neg: #242424; /* negative / destructive surface (gray, never red) */
+  --neg-ink: #ffffff;
 
-  --display: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --body: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
+  --display: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;
 }
 
 /* tighter rhythm — denser, less airy */
 
 [data-mode="light"] {
-  --bg: #dfe5f2;
+  --bg: #f2f0ea;
   --bg-2: #ffffff;
-  --ink: #000000;
-  --ink-dim: #5b5f6b;
+  --ink: #111111;
+  --ink-dim: #5d5d59;
   --edge: 0 0 0;
   --hard-shadow: #000000;
-  --neg: #16171c;             /* near-black negative surface in light mode */
+  --neg: #16171c; /* near-black negative surface in light mode */
   --neg-ink: #ffffff;
   --glass-tint: 255 255 255;
-  --glass-alpha: 0.55;
+  --glass-alpha: 0.72;
 }
 
-* { box-sizing: border-box; }
+[data-mode="dark"] {
+  /* Dark mode is color-responsive: the active accent tints the atmospheric
+     field while tactile components remain charcoal. There is no black mode. */
+  --bg: color-mix(in srgb, var(--accent) 18%, #100b16);
+  --bg-2: color-mix(in srgb, var(--accent) 27%, #15101c);
+  --ink: #f6f2f8;
+  --ink-dim: #b9b0bf;
+  --edge: 0 0 0;
+  --hard-shadow: #000000;
+  --neg: #343434;
+  --neg-ink: #ffffff;
+  --glass-tint: 255 255 255;
+  --glass-alpha: 0.08;
+}
+
+* {
+  box-sizing: border-box;
+}
 
-html { scroll-behavior: auto; background: var(--bg); }
+html {
+  scroll-behavior: auto;
+  background: var(--bg);
+}
 
 body {
   margin: 0;
@@ -68,40 +99,33 @@ body {
   overflow-x: hidden;
 }
 
-::selection { background: var(--accent); color: var(--accent-ink); }
+::selection {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
 
 /* ============================================================
-   BACKDROP — a full-document-height iridescent field the glass
-   refracts. Not fixed (fixed/attachment:fixed only paint at the
-   document top in capture/print contexts) — it spans the whole
-   page so every section is tinted and nothing renders flat-black.
+   BACKDROP — flat paper plus a measured technical grid. Liquid
+   belongs to interaction and continuity, not decorative scenery.
    ============================================================ */
 
 .field {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -2;
   overflow: hidden;
   pointer-events: none;
-  background:
-    radial-gradient(52vw 32vh at 12% 2%,  rgba(124, 60, 255, 0.50), transparent 70%),
-    radial-gradient(46vw 30vh at 90% 10%, rgba(176, 60, 255, 0.42), transparent 70%),
-    radial-gradient(52vw 30vh at 78% 30%, rgba(214, 70, 255, 0.30), transparent 72%),
-    radial-gradient(46vw 28vh at 16% 45%, rgba(91, 60, 255, 0.38), transparent 72%),
-    radial-gradient(50vw 28vh at 84% 60%, rgba(124, 60, 255, 0.34), transparent 72%),
-    radial-gradient(46vw 26vh at 22% 74%, rgba(176, 60, 255, 0.30), transparent 72%),
-    radial-gradient(52vw 30vh at 80% 90%, rgba(214, 70, 255, 0.26), transparent 72%),
-    radial-gradient(46vw 26vh at 18% 98%, rgba(91, 60, 255, 0.34), transparent 72%);
-  background-repeat: no-repeat;
-  animation: fieldshift 30s ease-in-out infinite alternate;
-}
-[data-mode="light"] .field { opacity: 0.55; }
-@keyframes fieldshift {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-3vw); }
-}
-@media (prefers-reduced-motion: reduce) { .field { animation: none; } }
+  background: var(--bg);
+}
+[data-mode="light"] .field {
+  opacity: 1;
+}
+[data-mode="dark"] .field {
+  opacity: 1;
+}
 
 .field .grid {
   position: absolute;
@@ -110,66 +134,40 @@ body {
     linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),
     linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);
   background-size: 64px 64px;
-  mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
-  -webkit-mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
+  opacity: 0.7;
 }
 
 .grain {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.4;
-  mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  display: none;
 }
 
 /* ============================================================
-   GLASS-BRUTAL PRIMITIVE — frosted material + brutal edge
+   STRUCTURAL SURFACE — flat by default. Add blur only to transient
+   navigation, menus, overlays, and other moving state boundaries.
    ============================================================ */
 
 .glass {
   position: relative;
-  background:
-    linear-gradient(135deg, rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)), rgba(var(--glass-tint), var(--glass-alpha)));
-  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
-  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
+  background: var(--bg-2);
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
-  box-shadow:
-    var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow),         /* the brutal hard shadow */
-    inset 0 1px 0 rgba(255,255,255,0.45),                        /* top specular */
-    inset 0 -1px 0 rgba(255,255,255,0.06),
-    inset 0 0 40px rgba(255,255,255,0.04);
+  box-shadow: none;
 }
 /* moving sheen + cursor specular */
-.glass::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background: radial-gradient(
-    180px circle at var(--mx, 50%) var(--my, 0%),
-    rgba(255,255,255,0.22), transparent 60%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-.glass:hover::before { opacity: 1; }
+.glass::before,
 .glass::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 55%);
-  background-size: 250% 250%;
-  background-position: 100% 100%;
-  opacity: 0.7;
+  content: none;
 }
 
-.flat {            /* brutalist flat (no glass) — for loud accent blocks */
+.flat {
+  /* brutalist flat (no glass) — for loud accent blocks */
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
   box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
@@ -191,41 +189,128 @@ body {
 }
 .eyebrow::before {
   content: "";
-  width: 9px; height: 9px;
+  width: 9px;
+  height: 9px;
   background: var(--accent);
   display: inline-block;
 }
 
-h1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
+h1,
+h2,
+h3 {
+  font-weight: 800;
+  line-height: 0.98;
+  letter-spacing: -0.02em;
+  margin: 0;
+  text-wrap: balance;
+}
 
 .section-title {
-  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
+  font-size: clamp(2rem, 4.2vw, 4.25rem);
+  line-height: 0.93;
+  letter-spacing: -0.045em;
   margin: 0.25em 0 0.3em;
 }
-.lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-dim); max-width: 60ch; text-wrap: pretty; }
+.lead {
+  font-size: clamp(1rem, 1.3vw, 1.18rem);
+  color: var(--ink-dim);
+  max-width: 60ch;
+  text-wrap: pretty;
+}
 
-.accent { color: var(--accent); }
-.mono { font-family: var(--mono); }
+.accent {
+  color: var(--accent);
+}
+.mono {
+  font-family: var(--mono);
+}
 
 /* ============================================================
    LAYOUT
    ============================================================ */
 
 .wrap,
-.sl-site-content { width: min(var(--content-w), calc(100vw - (var(--viewport-gutter) * 2))); margin-inline: auto; }
-.shell,
-.sl-site-shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }
-section { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; }
-.section-head { max-width: 70ch; margin-bottom: 1.1rem; }
+.shell {
+  width: min(var(--shell-w), calc(100vw - var(--viewport-gutter)));
+  margin-inline: auto;
+}
+.sl-site-content,
+.sl-site-shell {
+  width: min(100%, var(--shell-w));
+  max-width: calc(100vw - var(--viewport-gutter));
+  margin-inline: auto;
+}
+.sl-site-body {
+  background: var(--body-surface);
+}
+section {
+  padding: clamp(3.5rem, 8vw, 7.5rem) 0;
+  position: relative;
+  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+.section-head {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(280px, 4fr);
+  grid-template-rows: auto auto;
+  column-gap: var(--grid-gutter);
+  max-width: none;
+  margin-bottom: clamp(2rem, 4vw, 4rem);
+}
+.section-head .eyebrow {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  margin-bottom: 0.8rem;
+}
+.section-head .section-title {
+  grid-column: 1;
+  grid-row: 2;
+}
+.section-head .lead {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: end;
+  margin: 0;
+}
+@media (max-width: 720px) {
+  .section-head {
+    grid-template-columns: 1fr;
+  }
+  .section-head .eyebrow,
+  .section-head .section-title,
+  .section-head .lead {
+    grid-column: 1;
+    grid-row: auto;
+  }
+  .section-head .lead { margin-top: 1rem; }
+}
 
-.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
-.reveal.in { opacity: 1; transform: none; }
+.reveal {
+  opacity: 0;
+  transform: translateY(26px);
+  transition:
+    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
+    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.reveal.in {
+  opacity: 1;
+  transform: none;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
-  html { scroll-behavior: auto; }
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 @media print {
-  .reveal { opacity: 1 !important; transform: none !important; }
+  .reveal {
+    opacity: 1 !important;
+    transform: none !important;
+  }
 }
diff --git a/artifacts/structured-liquidity/src/styles/20-components.css b/artifacts/structured-liquidity/src/styles/20-components.css
index 586fcea..863c25c 100644
--- a/artifacts/structured-liquidity/src/styles/20-components.css
+++ b/artifacts/structured-liquidity/src/styles/20-components.css
@@ -2,7 +2,7 @@
    STRUCTURED LIQUIDITY — component layer
    ============================================================ */
 
-/* ---- NAV (floating Liquid Glass bar — a layer on top) ---- */
+/* ---- NAV (flat structural rail; liquid is expressed by moving markers) ---- */
 .nav {
   position: fixed; top: clamp(0.6rem, 1.6vw, 1rem); left: 50%; transform: translateX(-50%) translateZ(0);
   width: min(1200px, 94vw); z-index: 50;
@@ -10,9 +10,9 @@
   padding: 0.55rem 0.6rem 0.55rem clamp(0.9rem, 2vw, 1.3rem);
   backdrop-filter: blur(10px) saturate(150%);
   -webkit-backdrop-filter: blur(10px) saturate(150%);
-  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
+  background: color-mix(in srgb, var(--bg-2) 96%, transparent);
   border: var(--border-w) solid rgb(var(--edge));
-  box-shadow: 6px 6px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4);
+  box-shadow: none;
 }
 .nav .links { display: flex; gap: 1.3rem; align-items: center; }
 .nav .links a {
@@ -51,26 +51,21 @@
   position: relative; flex: none;
   border-radius: 0;
   border: 2.5px solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.04));
+  background: var(--bg-2);
   backdrop-filter: blur(8px) saturate(180%);
   -webkit-backdrop-filter: blur(8px) saturate(180%);
-  box-shadow: 3px 3px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.5);
+  box-shadow: 3px 3px 0 0 var(--hard-shadow);
   overflow: hidden;
 }
 .glyph::before {            /* the liquid fill + curved meniscus */
   content: ""; position: absolute; left: -10%; right: -10%; bottom: -8%;
   height: 58%;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 42%);
+  background: var(--accent);
   border-radius: 46% 46% 0 0 / 70% 70% 0 0;
   box-shadow: inset 0 2px 0 rgba(255,255,255,0.45);
 }
-.glyph::after {             /* specular gloss across the top glass */
-  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%;
-  background: linear-gradient(160deg, rgba(255,255,255,0.4), transparent 70%);
-  pointer-events: none;
-}
-.glyph.lg { --s: 60px; border-width: 3px; box-shadow: 5px 5px 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.5); }
+.glyph::after { content: none; }
+.glyph.lg { --s: 60px; border-width: 3px; box-shadow: 5px 5px 0 0 var(--hard-shadow); }
 
 .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
 .brand .name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
@@ -86,13 +81,11 @@
   position: relative;
 }
 .btn.glassy {
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.05));
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4);
+  background: var(--bg-2);
+  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
 }
 .btn.solid { background: var(--accent); color: var(--accent-ink); box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow); }
-.btn:active, .btn:hover { transform: translate(var(--hard-x), var(--hard-y)); box-shadow: 0 0 0 0 var(--hard-shadow), inset 0 1px 0 rgba(255,255,255,0.4); }
+.btn:active, .btn:hover { transform: translate(var(--hard-x), var(--hard-y)); box-shadow: 0 0 0 0 var(--hard-shadow); }
 .btn .arrow { transition: transform 0.2s; }
 .btn:hover .arrow { transform: translateX(4px); }
 
@@ -104,24 +97,17 @@
 .wordmark {
   font-weight: 900;
   font-stretch: 125%;
-  font-size: clamp(2.2rem, 7.4vw, 5.2rem);
+  font-size: var(--text-display-xl);
   line-height: 0.84;
   letter-spacing: -0.03em;
   margin: 0.25em 0 0.3em;
   text-wrap: balance;
 }
-/* glass-filled letters: translucent frosted fill, brutal outline drop */
+/* solid accent fallback; the enhanced word uses movement inside the letterforms */
 .wordmark .glas {
-  color: transparent;
-  -webkit-text-stroke: 2px rgb(var(--edge));
-  paint-order: stroke fill;
-  background-image: linear-gradient(
-    160deg,
-    color-mix(in srgb, var(--accent) 92%, white 8%),
-    color-mix(in srgb, var(--accent) 62%, transparent)
-  );
-  -webkit-background-clip: text; background-clip: text;
-  text-shadow: var(--hard-x) var(--hard-y) 0 rgba(var(--edge), 0.3);
+  color: var(--accent);
+  -webkit-text-stroke: 0;
+  text-shadow: none;
 }
 .wordmark .brutal {
   color: var(--accent);
@@ -150,14 +136,18 @@
   pointer-events: none;
   filter: drop-shadow(var(--hard-x) var(--hard-y) 0 rgba(var(--edge), 0.3));
 }
-.lw-glass { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
-.lw-wave-back { fill: color-mix(in srgb, var(--accent) 55%, white 14%); opacity: 0.7; }
+.lw-glass { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
+.lw-wave-back { fill: color-mix(in srgb, var(--accent) 62%, white 18%); opacity: 0.74; }
 .lw-wave-front { fill: var(--accent); }
-.lw-shine { fill: none; stroke: color-mix(in srgb, white 70%, var(--accent)); stroke-width: 2.5; opacity: 0.5; vector-effect: non-scaling-stroke; }
+.lw-shine { fill: none; stroke: color-mix(in srgb, white 82%, var(--accent)); stroke-width: 2.5; opacity: 0.72; vector-effect: non-scaling-stroke; }
+.lw-meniscus { fill: none; stroke: color-mix(in srgb, white 54%, var(--accent)); stroke-width: 5; opacity: 0.28; vector-effect: non-scaling-stroke; }
+.lw-caustic { fill: none; stroke: color-mix(in srgb, white 68%, var(--accent)); stroke-width: 1.25; opacity: 0.18; vector-effect: non-scaling-stroke; }
+.lw-caustic-a { animation: lw-flow 13s linear infinite reverse; }
+.lw-caustic-b { animation: lw-flow 19s linear infinite; }
 .lw-ripple { fill: none; stroke: color-mix(in srgb, white 55%, var(--accent)); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
 .lw-ripple-a { opacity: 0.32; animation: lw-flow 11s linear infinite; }
 .lw-ripple-b { opacity: 0.22; animation: lw-flow 17s linear infinite reverse; }
-.lw-outline { fill: none; stroke: rgb(var(--edge)); stroke-width: 2; paint-order: stroke; vector-effect: non-scaling-stroke; }
+.lw-outline { fill: none; stroke: color-mix(in srgb, rgb(var(--edge)) 82%, var(--ink)); stroke-width: 2.6; paint-order: stroke; vector-effect: non-scaling-stroke; }
 
 .lw-slosh { transform-box: fill-box; transform-origin: center; will-change: transform; }
 .lw-bob { animation: lw-bob 10s ease-in-out infinite; }
@@ -173,7 +163,7 @@
   50% { transform: translateY(calc(var(--amp, 6px) * -1)); }
 }
 @media (prefers-reduced-motion: reduce) {
-  .lw-bob, .lw-wave-front, .lw-wave-back, .lw-shine, .lw-ripple { animation: none; }
+  .lw-bob, .lw-wave-front, .lw-wave-back, .lw-shine, .lw-ripple, .lw-meniscus, .lw-caustic { animation: none; }
   .lw-slosh { transform: none !important; }
 }
 
@@ -227,17 +217,17 @@
 .draggable { cursor: grab; }
 .draggable:active { cursor: grabbing; }
 
-/* ---- PILLARS (the three-pillar manifesto) ---- */
-.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
-@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }
-.pillar { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; }
-.pillar .pnum { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
-.pillar .psub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.15rem; }
-.pillar h3 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }
-.pillar > p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }
-.pillar ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }
-.pillar li { font-family: var(--mono); font-size: 0.76rem; padding: 0.4rem 0; border-top: 1px solid rgba(var(--edge),0.15); color: var(--ink-dim); display: flex; gap: 0.5rem; }
-.pillar li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.35em; background: var(--accent); }
+/* ---- TENETS (the three-tenet manifesto) ---- */
+.tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
+@media (max-width: 640px) { .tenets { grid-template-columns: 1fr; } }
+.tenet { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; }
+.tenet .pnum { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
+.tenet .psub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.15rem; }
+.tenet h3 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }
+.tenet > p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }
+.tenet ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }
+.tenet li { font-family: var(--mono); font-size: 0.76rem; padding: 0.4rem 0; border-top: 1px solid rgba(var(--edge),0.15); color: var(--ink-dim); display: flex; gap: 0.5rem; }
+.tenet li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.35em; background: var(--accent); }
 
 /* ---- PRINCIPLES GRID ---- */
 .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@@ -257,8 +247,7 @@
 
 /* toggle */
 .toggle { width: 64px; height: 36px; border-radius: 0; border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer;
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: var(--bg-2);
   box-shadow: 3px 3px 0 0 var(--hard-shadow); transition: background 0.25s; }
 .toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 0; background: rgb(var(--edge)); transition: transform 0.22s cubic-bezier(.3,1.4,.5,1); }
 .toggle.on { background: var(--accent); }
@@ -267,12 +256,10 @@
 /* input */
 .field-input { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 0; min-width: 220px;
   border: var(--border-w) solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.1), rgba(var(--glass-tint),0.03));
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
+  background: var(--bg-2); }
 .field-input input { background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 0.85rem; width: 100%; }
 .field-input input::placeholder { color: var(--ink-dim); }
-.field-input:focus-within { box-shadow: 4px 4px 0 0 var(--accent), inset 0 1px 0 rgba(255,255,255,0.3); }
+.field-input:focus-within { box-shadow: 4px 4px 0 0 var(--accent); }
 
 /* segmented */
 .seg { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: 0; overflow: hidden; box-shadow: 3px 3px 0 0 var(--hard-shadow);
diff --git a/artifacts/structured-liquidity/src/styles/30-kit.css b/artifacts/structured-liquidity/src/styles/30-kit.css
index 421cb50..df37707 100644
--- a/artifacts/structured-liquidity/src/styles/30-kit.css
+++ b/artifacts/structured-liquidity/src/styles/30-kit.css
@@ -2,8 +2,8 @@
    STRUCTURED LIQUIDITY — component KIT
    A shadcn-complete library expressed in the design language:
    rigid containers (sharp edges, flat offset shadows, real
-   borders) holding viscous glass surfaces, with one accent
-   carrying every emphasis.
+   borders) holding flat scientific surfaces, with one accent
+   carrying selection and liquid motion between states.
    ============================================================ */
 
 /* ---- gallery scaffold ---- */
@@ -28,8 +28,7 @@
 
 /* glass + flat helpers reused locally */
 .sl-glass-fill {
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));
-  backdrop-filter: blur(10px) saturate(170%); -webkit-backdrop-filter: blur(10px) saturate(170%);
+  background: var(--bg-2);
 }
 
 /* ============================================================
@@ -43,7 +42,7 @@
   transition: transform 0.12s cubic-bezier(.2,.8,.2,1), box-shadow 0.12s; white-space: nowrap;
 }
 .sl-btn.default { background: var(--accent); color: var(--accent-ink); box-shadow: 4px 4px 0 0 var(--hard-shadow); }
-.sl-btn.secondary { background: linear-gradient(135deg, rgba(var(--glass-tint),0.14), rgba(var(--glass-tint),0.05)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 4px 4px 0 0 var(--hard-shadow); }
+.sl-btn.secondary { background: var(--bg-2); box-shadow: 4px 4px 0 0 var(--hard-shadow); }
 .sl-btn.outline { background: transparent; box-shadow: 4px 4px 0 0 var(--hard-shadow); }
 .sl-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-dim); }
 .sl-btn.ghost:hover { color: var(--ink); background: rgba(var(--glass-tint),0.08); transform: none; }
@@ -75,13 +74,12 @@
 .sl-input, .sl-textarea {
   font-family: var(--mono); font-size: 0.82rem; color: var(--ink); width: 100%;
   padding: 0.6rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.1), rgba(var(--glass-tint),0.03));
-  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); outline: none;
+  background: var(--bg-2);
+  box-shadow: none; outline: none;
 }
 .sl-textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
 .sl-input::placeholder, .sl-textarea::placeholder { color: var(--ink-dim); }
-.sl-input:focus, .sl-textarea:focus { box-shadow: 3px 3px 0 0 var(--accent), inset 0 1px 0 rgba(255,255,255,0.25); }
+.sl-input:focus, .sl-textarea:focus { box-shadow: 3px 3px 0 0 var(--accent); }
 .sl-otp { display: flex; gap: 0.5rem; }
 .sl-otp input { width: 42px; height: 48px; text-align: center; font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--ink); border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: rgba(var(--glass-tint),0.06); outline: none; box-shadow: 2px 2px 0 0 var(--hard-shadow); }
 .sl-otp input:focus { box-shadow: 2px 2px 0 0 var(--accent); }
@@ -94,8 +92,8 @@
 .sl-check[aria-checked="true"] .sl-box { background: var(--accent); }
 .sl-box .tick { width: 11px; height: 11px; color: var(--accent-ink); opacity: 0; }
 .sl-check[aria-checked="true"] .sl-box .tick { opacity: 1; }
-.sl-radio { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: 50%; background: rgba(var(--glass-tint),0.06); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; }
-.sl-radio .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0; }
+.sl-radio { width: 20px; height: 20px; flex: none; border: var(--border-w) solid rgb(var(--edge)); border-radius: 50%; background: var(--bg-2); box-shadow: 2px 2px 0 0 var(--hard-shadow); display: grid; place-items: center; overflow: hidden; transition: background var(--motion-fast) var(--ease-liquid); }
+.sl-radio .dot { width: 100%; height: 100%; border-radius: inherit; background: var(--accent); opacity: 0; }
 .sl-radio-item[aria-checked="true"] .sl-radio .dot { opacity: 1; }
 .sl-switch { width: 46px; height: 26px; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge)); position: relative; cursor: pointer; background: rgba(var(--glass-tint),0.1); box-shadow: 2px 2px 0 0 var(--hard-shadow); transition: background 0.2s; flex: none; }
 .sl-switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: calc(var(--radius) * 0.6); background: rgb(var(--edge)); transition: transform 0.2s cubic-bezier(.3,1.4,.5,1); }
@@ -107,6 +105,17 @@
 .sl-toggle-group button { font-family: var(--mono); font-size: 0.8rem; padding: 0.45rem 0.7rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; display: grid; place-items: center; }
 .sl-toggle-group button:first-child { border-left: none; }
 .sl-toggle-group button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
+.sl-toggle-group.is-liquid { position: relative; isolation: isolate; }
+.sl-toggle-group.is-liquid .sl-toggle-marker {
+  position: absolute; inset-block: 0; left: 0; z-index: 0;
+  width: calc(100% / var(--toggle-count));
+  transform: translateX(calc(var(--toggle-index) * 100%));
+  background: var(--accent);
+  transition: transform var(--motion) var(--ease-liquid-over), width var(--motion) var(--ease-liquid);
+  pointer-events: none;
+}
+.sl-toggle-group.is-liquid button { position: relative; z-index: 1; background: transparent; transition: color var(--motion-fast) var(--ease-liquid); }
+.sl-toggle-group.is-liquid button[aria-pressed="true"] { background: transparent; color: var(--accent-ink); }
 
 /* ============================================================
    SLIDER / PROGRESS
@@ -125,8 +134,7 @@
 .sl-trigger {
   font-family: var(--mono); font-size: 0.82rem; color: var(--ink); cursor: pointer;
   padding: 0.55rem 0.8rem; border-radius: var(--radius); border: var(--border-w) solid rgb(var(--edge));
-  background: linear-gradient(135deg, rgba(var(--glass-tint),0.12), rgba(var(--glass-tint),0.04));
-  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  background: var(--bg-2);
   box-shadow: 2px 2px 0 0 var(--hard-shadow); display: inline-flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-width: 160px;
 }
 .sl-trigger .chev { transition: transform 0.2s; color: var(--ink-dim); }
@@ -157,10 +165,18 @@
 /* ============================================================
    TABS
    ============================================================ */
-.sl-tabs .tablist { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); }
-.sl-tabs .tablist button { font-family: var(--mono); font-size: 0.78rem; padding: 0.5rem 0.9rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: rgba(var(--glass-tint),0.05); color: var(--ink-dim); cursor: pointer; }
+.sl-tabs .tablist { position: relative; display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 0 var(--hard-shadow); isolation: isolate; }
+.sl-tabs .tablist button { position: relative; z-index: 1; flex: 1; font-family: var(--body); font-size: 0.78rem; font-weight: 650; padding: 0.5rem 0.9rem; border: none; border-left: 1px solid rgba(var(--edge),0.3); background: transparent; color: var(--ink-dim); cursor: pointer; transition: color var(--motion-fast) var(--ease-liquid); }
 .sl-tabs .tablist button:first-child { border-left: none; }
-.sl-tabs .tablist button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
+.sl-tabs .tablist button[aria-selected="true"] { background: transparent; color: var(--accent-ink); }
+.sl-tabs .sl-tab-marker {
+  position: absolute; inset-block: 0; left: 0; z-index: 0;
+  width: calc(100% / var(--tab-count));
+  transform: translateX(calc(var(--tab-index) * 100%));
+  background: var(--accent);
+  transition: transform var(--motion) var(--ease-liquid-over), width var(--motion) var(--ease-liquid);
+  pointer-events: none;
+}
 .sl-tabs .panel { display: none; padding-top: 0.9rem; font-size: 0.88rem; color: var(--ink-dim); }
 .sl-tabs .panel.show { display: block; }
 
@@ -260,9 +276,9 @@
 /* ============================================================
    ASPECT RATIO / CARD
    ============================================================ */
-.sl-ratio { width: 100%; aspect-ratio: 16 / 9; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(var(--glass-tint),0.06)); display: grid; place-items: center; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
+.sl-ratio { width: 100%; aspect-ratio: 16 / 9; border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 30%, var(--bg-2)); display: grid; place-items: center; font-family: var(--mono); font-size: 0.68rem; color: var(--ink); }
 .sl-card-demo { border: var(--border-w) solid rgb(var(--edge)); border-radius: var(--radius); box-shadow: 4px 4px 0 0 var(--hard-shadow); overflow: hidden; background: rgba(var(--glass-tint),0.05); }
-.sl-card-demo .cd-media { aspect-ratio: 16/8; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), rgba(var(--glass-tint),0.1)); border-bottom: var(--border-w) solid rgb(var(--edge)); }
+.sl-card-demo .cd-media { aspect-ratio: 16/8; background: color-mix(in srgb, var(--accent) 34%, var(--bg-2)); border-bottom: var(--border-w) solid rgb(var(--edge)); }
 .sl-card-demo .cd-body { padding: 0.9rem 1rem; }
 .sl-card-demo .cd-body h4 { margin: 0 0 0.3rem; font-size: 1rem; }
 .sl-card-demo .cd-body p { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--ink-dim); }
@@ -414,7 +430,7 @@
 .sl-step-marker svg { width: 14px; height: 14px; }
 .sl-step[data-status="complete"] .sl-step-marker,
 .sl-step[data-status="current"] .sl-step-marker { background: var(--accent); color: var(--accent-ink); }
-.sl-step-copy { display: flex; flex-direction: column; min-width: 0; padding-top: 0.1rem; }
+.sl-step-copy { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; padding: 0.1rem 0.35rem 0 0; background: var(--bg-2); }
 .sl-step-copy strong { font-size: 0.78rem; }
 .sl-step-copy > span { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-dim); }
 @media (max-width: 640px) {
@@ -646,6 +662,143 @@
   text-transform: uppercase;
   color: var(--ink-dim);
 }
+/* Persistent portfolio identity cards: the default for company and venture grids. */
+.sl-portfolio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
+  gap: 1rem;
+}
+.sl-portfolio-card {
+  display: flex;
+  min-height: 290px;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--border-w) solid rgb(var(--edge));
+  border-radius: var(--radius);
+  background: var(--bg-2);
+  color: var(--ink);
+  box-shadow: 4px 4px 0 0 var(--hard-shadow);
+  text-decoration: none;
+  transition: transform var(--motion-fast) var(--ease-liquid), box-shadow var(--motion-fast) var(--ease-liquid);
+}
+.sl-portfolio-card[href] { cursor: pointer; }
+.sl-portfolio-card[href]:hover,
+.sl-portfolio-card[href]:focus-visible {
+  transform: translate(-1px, -1px);
+  box-shadow: 6px 6px 0 0 var(--hard-shadow);
+}
+.sl-portfolio-card[href]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 4px;
+}
+.sl-portfolio-card-media {
+  position: relative;
+  display: grid;
+  min-height: 9.5rem;
+  flex: 0 0 9.5rem;
+  place-items: center;
+  padding: 1.25rem;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+}
+.sl-portfolio-card-logo {
+  display: grid;
+  min-width: 4.25rem;
+  min-height: 4.25rem;
+  place-items: center;
+  color: var(--ink);
+  font-family: var(--display);
+  font-size: clamp(1.35rem, 3vw, 2rem);
+  font-weight: 900;
+  letter-spacing: -0.04em;
+}
+.sl-portfolio-card-logo > img,
+.sl-portfolio-card-logo > svg {
+  display: block;
+  width: min(100%, 11rem);
+  max-height: 5.5rem;
+  object-fit: contain;
+}
+.sl-portfolio-card-body {
+  display: flex;
+  min-height: 9.5rem;
+  flex: 1;
+  flex-direction: column;
+  padding: 1rem;
+  background: var(--neg);
+  color: var(--neg-ink);
+}
+.sl-portfolio-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.sl-portfolio-card-media > .sl-portfolio-card-tags {
+  position: absolute;
+  inset: 0.65rem 0.65rem auto;
+  z-index: 1;
+}
+.sl-portfolio-card-body > .sl-portfolio-card-tags { margin-bottom: 0.7rem; }
+.sl-portfolio-card-tag {
+  padding: 0.28rem 0.45rem;
+  border: 1px solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--neg) 80%, #000000);
+  color: var(--neg-ink);
+  font-family: var(--mono);
+  font-size: 0.56rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-transform: uppercase;
+  box-shadow: 2px 2px 0 0 var(--hard-shadow);
+}
+.sl-portfolio-card-title {
+  margin: 0;
+  color: var(--neg-ink);
+  font-family: var(--display);
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1.15;
+}
+.sl-portfolio-card-description {
+  display: -webkit-box;
+  margin: 0.55rem 0 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  color: color-mix(in srgb, var(--neg-ink) 72%, transparent);
+  font-family: var(--body);
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+.sl-portfolio-card-action {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.28rem;
+  margin-top: auto;
+  padding-top: 1rem;
+  color: var(--neg-ink);
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--neg-ink) 58%, transparent);
+  text-underline-offset: 0.35rem;
+  text-transform: uppercase;
+}
+.sl-portfolio-card-action svg { width: 0.75rem; height: 0.75rem; }
+@media (max-width: 560px) {
+  .sl-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
+  .sl-portfolio-card { min-height: 270px; }
+  .sl-portfolio-card-media { min-height: 8rem; flex-basis: 8rem; padding: 0.8rem; }
+  .sl-portfolio-card-body { padding: 0.8rem; }
+  .sl-portfolio-card-description { font-size: 0.72rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sl-portfolio-card { transition: none; }
+}
 
 /* Field-sourced from recurring update, signal, and changelog streams. */
 .sl-activity-feed {
@@ -867,3 +1020,261 @@
   margin-top: auto;
   padding-top: 0.2rem;
 }
+
+
+/* Field-sourced from Dropship's stacked membership economics view. */
+.sl-unit-economics {
+  width: 100%;
+  margin: 0;
+}
+.sl-unit-economics-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.7rem;
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+.sl-unit-economics-head strong {
+  color: var(--accent);
+  font-size: 0.82rem;
+}
+.sl-unit-economics-chart {
+  display: flex;
+  width: 100%;
+  height: 58px;
+  overflow: hidden;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+  box-shadow: 5px 5px 0 0 var(--hard-shadow);
+}
+.sl-unit-economics-chart > span {
+  display: block;
+  min-width: 3px;
+  height: 100%;
+  border-right: var(--border-w) solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--accent) var(--allocation-strength), var(--bg-2));
+}
+.sl-unit-economics-chart > span:last-child {
+  border-right: 0;
+  background:
+    linear-gradient(135deg, rgb(var(--glass-tint) / 0.16) 25%, transparent 25%) -6px 0 / 12px 12px,
+    linear-gradient(225deg, rgb(var(--glass-tint) / 0.1) 25%, transparent 25%) -6px 0 / 12px 12px,
+    var(--accent);
+}
+.sl-unit-economics-legend {
+  display: grid;
+  margin-top: 1rem;
+  border-top: var(--border-w) solid rgb(var(--edge));
+}
+.sl-unit-economics-legend > div {
+  min-height: 54px;
+  display: grid;
+  grid-template-columns: 13px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.6rem;
+  border-bottom: 1px solid rgb(var(--edge) / 0.45);
+}
+.sl-unit-economics-legend i {
+  width: 11px;
+  height: 11px;
+  border: 1px solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--accent) var(--allocation-strength), var(--bg-2));
+}
+.sl-unit-economics-legend span {
+  min-width: 0;
+  display: grid;
+  gap: 0.2rem;
+}
+.sl-unit-economics-legend strong,
+.sl-unit-economics-legend b {
+  font: 400 0.64rem/1.2 var(--mono);
+}
+.sl-unit-economics-legend strong {
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.sl-unit-economics-legend small {
+  color: var(--ink-dim);
+  font-size: 0.7rem;
+  line-height: 1.4;
+}
+.sl-unit-economics-note {
+  margin: 0.8rem 0 0;
+  color: var(--ink-dim);
+  font: 0.62rem/1.55 var(--mono);
+}
+
+/* Field-sourced from Construct: a complete identity summary, not a decorative avatar. */
+.sl-profile-card {
+  width: min(100%, 420px);
+  overflow: hidden;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
+}
+.sl-profile-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.65rem 0.75rem;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  font: 650 0.68rem/1 var(--body);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.sl-profile-card-status::before {
+  display: inline-block;
+  width: 0.48rem;
+  height: 0.48rem;
+  margin-right: 0.45rem;
+  background: var(--accent);
+  border: 1px solid rgb(var(--edge));
+  content: "";
+}
+.sl-profile-card-image {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1.55 / 1;
+  overflow: hidden;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  background: color-mix(in srgb, var(--accent) 24%, var(--bg-2));
+}
+.sl-profile-card-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center 24%;
+  filter: grayscale(1) contrast(1.04);
+}
+.sl-profile-card-initials {
+  display: grid;
+  place-items: center;
+  width: clamp(5rem, 24%, 7rem);
+  aspect-ratio: 1;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--accent);
+  color: var(--accent-ink);
+  box-shadow: 5px 5px 0 var(--hard-shadow);
+  font: 750 clamp(1.5rem, 4vw, 2.4rem)/1 var(--display);
+  letter-spacing: -0.05em;
+}
+.sl-profile-card-summary {
+  margin: 0;
+  padding: 0.9rem 0.8rem;
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+  background: var(--accent);
+  color: var(--accent-ink);
+  font: 720 0.94rem/1.4 var(--body);
+}
+.sl-profile-card-facts { margin: 0; }
+.sl-profile-card-facts > div {
+  display: grid;
+  grid-template-columns: minmax(5rem, 0.7fr) minmax(0, 1.3fr);
+  gap: 0.75rem;
+  padding: 0.68rem 0.8rem;
+  border-bottom: 1px solid rgb(var(--edge) / 0.45);
+}
+.sl-profile-card-facts > div:last-child { border-bottom: 0; }
+.sl-profile-card-facts dt {
+  font: 400 0.62rem/1.35 var(--mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-dim);
+}
+.sl-profile-card-facts dd {
+  margin: 0;
+  text-align: right;
+  font: 650 0.76rem/1.35 var(--body);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-toggle-group.is-liquid .sl-toggle-marker,
+  .sl-tabs .sl-tab-marker {
+    transition: none;
+  }
+}
+
+/* Stateful navigation uses one moving marker; buttons never navigate the specimen. */
+.sl-navbar {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  flex-wrap: wrap;
+  padding: 0.55rem 0.7rem;
+  border: var(--border-w) solid rgb(var(--edge));
+  background: var(--bg-2);
+  box-shadow: 2px 2px 0 0 var(--hard-shadow);
+}
+.sl-navbar .nb-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font: 750 1rem/1 var(--display);
+  letter-spacing: -0.02em;
+}
+.sl-navbar .nb-links {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  isolation: isolate;
+  border: 1px solid rgb(var(--edge));
+}
+.sl-navbar .nb-liquid-marker {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  z-index: 0;
+  width: 33.333%;
+  transform: translateX(calc(var(--nb-index, 0) * 100%));
+  background: var(--accent);
+  transition: transform var(--motion) var(--ease-liquid-over);
+  pointer-events: none;
+}
+.sl-navbar .nb-link {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.45rem 0.7rem;
+  border: 0;
+  border-left: 1px solid rgb(var(--edge) / 0.35);
+  background: transparent;
+  color: var(--ink-dim);
+  font: 650 0.76rem/1 var(--body);
+  cursor: pointer;
+  transition: color var(--motion-fast) var(--ease-liquid);
+}
+.sl-navbar .nb-link:first-of-type { border-left: 0; }
+.sl-navbar .nb-link[aria-current="page"] { color: var(--accent-ink); }
+.sl-navbar .nb-link svg { width: 15px; height: 15px; stroke-width: 1.8; }
+.sl-navbar .nb-links { margin-left: auto; }
+.sl-navbar .nb-right { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
+
+.sl-navmenu { display: inline-flex; border: var(--border-w) solid rgb(var(--edge)); box-shadow: 2px 2px 0 0 var(--hard-shadow); }
+.sl-navmenu .nm-item { position: relative; }
+.sl-navmenu .nm-item > button { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.8rem; border: 0; border-left: 1px solid rgb(var(--edge) / 0.25); background: var(--bg-2); color: var(--ink-dim); font: 650 0.78rem/1 var(--body); cursor: pointer; }
+.sl-navmenu .nm-item:first-child > button { border-left: 0; }
+.sl-navmenu .nm-item:hover > button, .sl-navmenu .nm-item:focus-within > button { background: var(--accent); color: var(--accent-ink); }
+.sl-navmenu .nm-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 0.35rem; border: var(--border-w) solid rgb(var(--edge)); background: var(--bg-2); box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--motion-fast) var(--ease-liquid), transform var(--motion) var(--ease-liquid-over); z-index: 50; }
+.sl-navmenu .nm-item:hover .nm-panel, .sl-navmenu .nm-item:focus-within .nm-panel { opacity: 1; pointer-events: auto; transform: none; }
+.sl-navmenu .nm-panel a { display: block; padding: 0.5rem 0.6rem; color: var(--ink); font: 0.78rem/1.3 var(--body); text-decoration: none; }
+.sl-navmenu .nm-panel a:hover, .sl-navmenu .nm-panel a:focus-visible { background: var(--accent); color: var(--accent-ink); }
+
+@media (max-width: 600px) {
+  .sl-navbar .nb-right { width: 100%; margin-left: 0; flex-wrap: wrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-navbar .nb-liquid-marker,
+  .sl-navmenu .nm-panel {
+    transition: none;
+  }
+}
diff --git a/artifacts/structured-liquidity/src/styles/40-inline.css b/artifacts/structured-liquidity/src/styles/40-inline.css
index a387c18..7d22855 100644
--- a/artifacts/structured-liquidity/src/styles/40-inline.css
+++ b/artifacts/structured-liquidity/src/styles/40-inline.css
@@ -43,6 +43,7 @@
   .show-card-foot .show-id .show-name{font-size:.95rem;}
   .show-card-foot .show-id .mono{font-size:.68rem;color:var(--ink-dim);}
   .show-card-foot .sl-badge{margin-left:auto;flex:none;}
+  .browser-bar .sl-badge{margin-left:auto;flex:none;font-size:.56rem;padding:.18rem .4rem;}
   .show-project-mark{display:grid;place-items:center;background:var(--accent)!important;color:var(--accent-ink);font-family:var(--mono);font-size:.62rem;font-weight:700;}
   .show-registry-meta{display:flex;flex-wrap:wrap;gap:.55rem;margin:-1.2rem 0 1.2rem;}
   .show-registry-meta span{padding:.28rem .52rem;border:1.5px solid rgb(var(--edge));background:rgb(var(--glass-tint)/.05);font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-dim);}
@@ -50,7 +51,7 @@
   .show-stage-head h3{margin:.55rem 0 .65rem;font-size:clamp(1.8rem,4vw,3.2rem);line-height:.95;}
   .show-stage-head p{margin:0;color:var(--ink-dim);line-height:1.55;}
   .show-grid-staging .show-card{opacity:.82;}
-  .show-stage-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.2rem;background:linear-gradient(135deg,rgb(var(--glass-tint)/.04),color-mix(in srgb,var(--accent) 22%,transparent));}
+  .show-stage-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.2rem;background:color-mix(in srgb,var(--accent) 10%,var(--bg-2));}
   .show-stage-placeholder::before{content:"";width:54px;height:54px;border:var(--border-w) solid rgb(var(--edge));box-shadow:5px 5px 0 var(--hard-shadow);background:var(--accent);}
   .show-stage-placeholder span{margin-top:.65rem;font-family:var(--display);font-size:1rem;font-weight:800;text-transform:uppercase;}
   .show-stage-placeholder small{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);}
@@ -133,7 +134,7 @@
   .nav .brand .glyph.is-cube .lw-cube-innerglass,
   .foot .brand .glyph.is-cube .lw-cube-innerglass{fill:color-mix(in srgb,var(--accent) 50%,transparent);}
 
-  footer.shell{padding-bottom:calc(2.5rem + var(--floating-ui-clearance) + env(safe-area-inset-bottom));}
+  footer.shell{padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));}
 
   .template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;}
   .template-card{padding:clamp(1.25rem,2.5vw,2rem);min-height:220px;display:flex;flex-direction:column;align-items:flex-start;}
@@ -142,10 +143,10 @@
   .template-card p{margin:0;color:var(--ink-dim);line-height:1.55;}
   .template-source{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-top:2rem;}
   .template-install{display:flex;justify-content:center;margin-top:1.5rem;}
-  .sl-shell-demo{display:grid;gap:.65rem;width:100%;font-family:var(--mono);font-size:.72rem;text-align:center;}
+  .sl-shell-demo{display:grid;gap:.65rem;width:100%;min-width:0;font-family:var(--mono);font-size:.72rem;text-align:center;}
   .sl-shell-demo .sl-site-shell,.sl-shell-demo .sl-site-content{border:1px solid rgb(var(--edge));padding:.75rem;}
   .sl-shell-demo .sl-site-shell{background:rgb(var(--glass-tint)/.08);}
-  .sl-shell-demo .sl-site-content{background:rgb(var(--glass-tint)/.04);color:var(--ink-dim);}
+  .sl-shell-demo .sl-site-content{color:var(--ink-dim);}
   @media(max-width:720px){.template-grid{grid-template-columns:1fr;}}
 
   /* Big hero hypercube — container-less, oversized, sitting behind the hero
@@ -167,6 +168,8 @@
   .hero-cube.is-cube .lw-cube-shell,.hero-cube.is-cube .lw-cube-edge{vector-effect:none;}
   .hero-cube.is-cube .lw-cube-shell{stroke-width:1.8;}
   .hero-cube.is-cube .lw-cube-edge{stroke-width:1.1;}
+  .hero-cube .lw-cube-face-index{fill:var(--accent-ink);stroke:rgb(var(--edge));stroke-width:.28px;
+    paint-order:stroke fill;font-family:var(--mono);font-size:5.5px;font-weight:700;letter-spacing:.03em;}
   @media (max-width:680px){
     .hero-grid > div:first-child{max-width:none;}
     .hero-cube{--s:clamp(220px,58vw,360px);opacity:.28;}
@@ -180,11 +183,11 @@
   /* "Structured" / "Liquidity" wordmark lines sat too tight (line-height .84) */
   .wordmark{line-height:0.96;}
 
-  /* pillar rule rows: the six operating rules folded into the three pillars */
-  .pillar li > div{flex:1;min-width:0;}
-  .pillar .rule-h{color:var(--ink);font-weight:700;}
+  /* tenet rule rows: the six operating rules folded into the three tenets */
+  .tenet li > div{flex:1;min-width:0;}
+  .tenet .rule-h{color:var(--ink);font-weight:700;}
   /* larger, more legible bullet copy (was 0.76rem dim mono) */
-  .pillar li{font-size:0.9rem;line-height:1.55;color:color-mix(in srgb, var(--ink) 55%, var(--ink-dim));}
+  .tenet li{font-size:0.9rem;line-height:1.55;color:color-mix(in srgb, var(--ink) 55%, var(--ink-dim));}
 
   /* section eyebrow labels: larger, tighter tracking, higher contrast (was 0.72rem, 0.22em, dim) */
   .eyebrow{font-size:0.84rem;letter-spacing:0.15em;color:color-mix(in srgb, var(--ink) 78%, var(--ink-dim));}
@@ -192,10 +195,13 @@
   /* navbar + marquee menubar — application navigation modeled on universe.audio */
   .sl-navbar{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;padding:0.55rem 0.7rem;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:rgba(var(--glass-tint),0.05);}
   .sl-navbar .nb-brand{display:flex;align-items:center;gap:0.5rem;font-family:var(--display);font-weight:800;letter-spacing:-0.02em;font-size:1rem;}
-  .sl-navbar .nb-links{display:flex;gap:0.15rem;flex-wrap:wrap;}
-  .sl-navbar .nb-links a{font-family:var(--mono);font-size:0.76rem;padding:0.4rem 0.7rem;color:var(--ink-dim);text-decoration:none;border-radius:var(--radius);}
-  .sl-navbar .nb-links a:hover{color:var(--ink);}
-  .sl-navbar .nb-links a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);}
+  .sl-navbar .nb-links{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;isolation:isolate;border:1px solid rgb(var(--edge));}
+  .sl-navbar .nb-liquid-marker{position:absolute;inset-block:0;left:0;z-index:0;width:33.333%;transform:translateX(calc(var(--nb-index,0) * 100%));background:var(--accent);transition:transform var(--motion) var(--ease-liquid-over);pointer-events:none;}
+  .sl-navbar .nb-link{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--body);font-size:0.76rem;font-weight:650;padding:0.45rem 0.7rem;color:var(--ink-dim);background:transparent;border:0;border-left:1px solid color-mix(in srgb,rgb(var(--edge)) 35%,transparent);cursor:pointer;transition:color var(--motion-fast) var(--ease-liquid);}
+  .sl-navbar .nb-link:first-of-type{border-left:0;}
+  .sl-navbar .nb-link:hover{color:var(--ink);}
+  .sl-navbar .nb-link[aria-current="page"]{color:var(--accent-ink);}
+  .sl-navbar .nb-link svg{width:15px;height:15px;stroke-width:1.8;}
   .sl-navbar .nb-right{margin-left:auto;display:flex;align-items:center;gap:0.55rem;}
   @media (max-width:600px){ .sl-navbar .nb-right{margin-left:0;width:100%;flex-wrap:wrap;} }
 
@@ -213,7 +219,7 @@
 
   /* ── Mobile navigation: a phone-framed demo of the two patterns a touch app
      leans on — a top bar with a slide-down drawer and a bottom tab bar. Rigid
-     phone frame, liquid-glass surfaces, one accent on the active tab. */
+     phone frame, flat surfaces, one moving accent on the active tab. */
   .sl-mnav{display:flex;justify-content:center;}
   .mn-phone{position:relative;width:100%;max-width:300px;overflow:hidden;display:flex;flex-direction:column;min-height:330px;
     border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);background:var(--bg-2);
@@ -231,26 +237,27 @@
     transition:grid-template-rows var(--motion) var(--ease-liquid);}
   .mn-drawer[data-open="true"]{grid-template-rows:1fr;border-bottom-width:var(--border-w);}
   .mn-drawer > div{min-height:0;display:flex;flex-direction:column;}
-  .mn-d-item{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.85rem;font-family:var(--mono);font-size:0.78rem;color:var(--ink-dim);
-    text-decoration:none;border-top:1px solid color-mix(in srgb, rgb(var(--edge)) 40%, transparent);}
+  .mn-d-item{width:100%;display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.85rem;font-family:var(--body);font-size:0.78rem;color:var(--ink-dim);
+    text-align:left;text-decoration:none;background:transparent;border:0;border-top:1px solid color-mix(in srgb, rgb(var(--edge)) 40%, transparent);cursor:pointer;}
   .mn-d-item:first-child{border-top:0;}
   .mn-d-item svg{width:15px;height:15px;}
   .mn-d-item:hover{color:var(--ink);background:rgb(var(--glass-tint) / 0.12);}
-  .mn-screen{flex:1;display:flex;flex-direction:column;gap:0.55rem;padding:0.9rem 0.8rem;}
+  .mn-screen{flex:1;display:flex;flex-direction:column;gap:0.55rem;padding:0.9rem 0.8rem 5.2rem;}
   .mn-sk{border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);background:rgb(var(--glass-tint) / 0.05);}
   .mn-sk.tall{flex:1;min-height:60px;}
   .mn-sk.line{height:11px;}
   .mn-sk.line.short{width:55%;}
-  .mn-tabs{display:flex;border-top:var(--border-w) solid rgb(var(--edge));background:rgb(var(--glass-tint) / 0.10);
+  .mn-tabs{position:relative;display:flex;isolation:isolate;border-top:var(--border-w) solid rgb(var(--edge));background:rgb(var(--glass-tint) / 0.10);
     -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);backdrop-filter:blur(var(--glass-blur)) saturate(150%);}
-  .mn-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:0.18rem;padding:0.5rem 0.2rem 0.45rem;cursor:pointer;color:var(--ink-dim);
+  .mn-tab-marker{position:absolute;inset-block:0;left:0;z-index:0;width:20%;transform:translateX(calc(var(--mn-tab-index,0) * 100%));background:var(--accent);transition:transform var(--motion) var(--ease-liquid-over);pointer-events:none;}
+  .mn-tab{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:0.18rem;padding:0.5rem 0.2rem 0.45rem;cursor:pointer;color:var(--ink-dim);
     background:none;border:0;border-right:1px solid color-mix(in srgb, rgb(var(--edge)) 40%, transparent);
     font-family:var(--mono);font-size:0.58rem;letter-spacing:0.02em;text-transform:uppercase;}
   .mn-tab:last-child{border-right:0;}
   .mn-tab svg{width:17px;height:17px;}
   .mn-tab:hover{color:var(--ink);}
-  .mn-tab.is-active{color:var(--accent-ink);background:var(--accent);}
-  @media (prefers-reduced-motion:reduce){ .mn-drawer{transition:none;} }
+  .mn-tab.is-active{color:var(--accent-ink);background:transparent;}
+  @media (prefers-reduced-motion:reduce){ .mn-drawer,.mn-tab-marker{transition:none;} }
 
   /* ── Mobile navigation · liquid-glass nav bars. Two specimens that float
      translucent glass over app content: a PRIMARY bottom tab bar hovering above
@@ -267,8 +274,8 @@
     background:rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.08));
     -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);backdrop-filter:blur(var(--glass-blur)) saturate(160%);
     box-shadow:var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);}
-  .gnav-marker{position:absolute;top:0.3rem;bottom:0.3rem;left:0;z-index:0;width:var(--gnav-w,0);
-    transform:translateX(var(--gnav-x,0));background:var(--accent);border-radius:calc(var(--radius) * 0.7);
+  .gnav-marker{position:absolute;top:0.3rem;bottom:0.3rem;left:0;z-index:0;width:calc(100% / var(--gnav-count,4));
+    transform:translateX(calc(var(--gnav-index,0) * 100%));background:var(--accent);border-radius:calc(var(--radius) * 0.7);
     box-shadow:inset 0 0 0 var(--border-w) rgb(var(--glass-tint) / 0.5);
     transition:transform var(--motion) var(--ease-liquid-over),width var(--motion) var(--ease-liquid);}
   .gnav-tab{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:0.16rem;
@@ -289,8 +296,8 @@
     border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);
     background:rgb(var(--glass-tint) / var(--glass-alpha));
     -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);backdrop-filter:blur(var(--glass-blur)) saturate(160%);}
-  .snav-marker{position:absolute;top:0.22rem;bottom:0.22rem;left:0;z-index:0;width:var(--seg-w,0);
-    transform:translateX(var(--seg-x,0));background:rgb(var(--glass-tint) / 0.07);border-radius:calc(var(--radius) * 0.7);
+  .snav-marker{position:absolute;top:0.22rem;bottom:0.22rem;left:0;z-index:0;width:50%;
+    transform:translateX(calc(var(--seg-index,0) * 100%));background:rgb(var(--glass-tint) / 0.07);border-radius:calc(var(--radius) * 0.7);
     box-shadow:inset 0 0 0 var(--border-w) rgb(var(--glass-tint) / 0.7);
     transition:transform var(--motion) var(--ease-liquid-over),width var(--motion) var(--ease-liquid);}
   .snav-seg-btn{position:relative;z-index:1;flex:1;padding:0.4rem 0.3rem;border:0;background:none;cursor:pointer;white-space:nowrap;
@@ -421,10 +428,10 @@
      the cool frosted-glass panels (whose comma-form gradient is dropped, so they are
      pure backdrop-blur). Give the menu the same frosted glass so it blends; the menu
      already declares the backdrop-filter the opaque fill was defeating. */
-  [data-mode="light"] .sl-menu{background:linear-gradient(135deg, rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.06)), rgb(var(--glass-tint) / var(--glass-alpha)));}
+  [data-mode="light"] .sl-menu{background:rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.16));}
   /* Same fix for the context menu, which uses the same opaque fill but, unlike .sl-menu,
      declares no backdrop-filter of its own, so the blur is added here too. */
-  [data-mode="light"] .sl-ctx-menu{background:linear-gradient(135deg, rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.06)), rgb(var(--glass-tint) / var(--glass-alpha)));backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);}
+  [data-mode="light"] .sl-ctx-menu{background:rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.16));backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);}
   .sl-menu .item.ac-empty{display:none;color:var(--ink-dim);cursor:default;}
   .sl-menu .item.ac-empty:hover{background:transparent;color:var(--ink-dim);}
   .lb-req{color:var(--accent);margin-left:0.25rem;}
@@ -464,25 +471,17 @@
   section[id], header[id]{scroll-margin-top:clamp(86px, 9vw, 104px);}
 
   /* ── Partner icon library (Lucide): leading icons are the default for navbars & buttons ── */
-  .nav .links a, .sl-navbar .nb-links a{display:inline-flex;align-items:center;gap:0.5em;}
-  .btn svg, .sl-btn svg, .nav .links a svg, .sl-navbar .nb-links a svg{
+  .nav .links a, .sl-navbar .nb-link{display:inline-flex;align-items:center;gap:0.5em;}
+  .btn svg, .sl-btn svg, .nav .links a svg, .sl-navbar .nb-link svg{
     width:1.05em;height:1.05em;flex:0 0 auto;stroke-width:2.25;}
   .sl-btn.icon svg{width:1.15em;height:1.15em;}
 
-  /* Compact icon-only nav buttons (Install + Source): square, label hidden, icon centered. */
-  .nav .links a.nav-icon, .nav .links .nav-icon{
-    width:2.35rem;height:2.35rem;padding:0;justify-content:center;gap:0;}
-  .nav .links .nav-icon svg{width:1.15em;height:1.15em;}
-  /* The Source (GitHub) icon button: the translucent .glassy fill makes the icon
-     hard to read against the nav, so give it a solid neutral gray (--neg, the
-     theme-aware "never red" gray) and drop the glass blur. */
-  .nav .links .nav-icon.glassy{
-    background:var(--neg);color:var(--neg-ink);
-    backdrop-filter:none;-webkit-backdrop-filter:none;}
-  /* Pull the two icon buttons (Install + Source) close together as a pair, without
-     touching the roomy 1.3rem gap between the text nav links. Only the gap on the
-     adjacent icon→icon pair is tightened (negative margin cancels most of the flex gap). */
-  .nav .links .nav-icon + .nav-icon{margin-left:calc(0.4rem - 1.3rem);}
+  .nav .links{gap:.55rem;}
+  @media(max-width:700px){
+    .nav .brand .name{display:none;}
+    .nav .links{gap:.3rem;}
+    .nav .links .nav-cta{padding:.5rem .55rem;font-size:.68rem;}
+  }
 
   /* Proportional readability bump: nudge the root size so all rem-based text grows together (tweaker panel uses px and stays put). */
   html{font-size:108%;}
@@ -493,11 +492,11 @@
 
   /* A little more breathing room between the navbar and the hero */
   .hero{padding-top:clamp(6.5rem,12vh,8.5rem);}
-  /* Closing CTA heading: pillar nouns picked out in the accent. */
+  /* Closing CTA heading: tenet nouns picked out in the accent. */
   .cta-panel h2 b{font-weight:inherit;color:var(--accent);}
 
-  /* Pillar body copy: larger & more approachable */
-  .pillar > p{font-size:1.02rem;line-height:1.55;}
+  /* Tenet body copy: larger & more approachable */
+  .tenet > p{font-size:1.02rem;line-height:1.55;}
 
   /* ── shadcn coverage: additional component opinions (all styling lives here) ── */
   .sl-sep{height:var(--border-w);background:rgb(var(--edge));border:none;width:100%;margin:0;}
@@ -531,12 +530,12 @@
   /* ── Number field: numeric input flanked by hard stepper buttons.
      Behaviour (clamp, steppers, ↑/↓ keys) lives in the React app. ── */
   .sl-numfield{display:inline-flex;align-items:stretch;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:rgba(var(--glass-tint),0.06);overflow:hidden;}
-  .sl-numfield .nf-step{width:2.3rem;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background 0.12s,color 0.12s;}
+  .sl-numfield .nf-step{width:2.3rem;min-width:2.3rem;flex:0 0 2.3rem;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background 0.12s,color 0.12s;}
   .sl-numfield .nf-step:hover{background:var(--accent);color:var(--accent-ink);}
   .sl-numfield .nf-step:first-child{border-right:var(--border-w) solid rgb(var(--edge));}
   .sl-numfield .nf-step:last-child{border-left:var(--border-w) solid rgb(var(--edge));}
   .sl-numfield .nf-step svg{width:1em;height:1em;}
-  .sl-numfield .nf-input{width:3.4rem;border:0;background:transparent;text-align:center;font-family:var(--mono);font-size:0.9rem;color:var(--ink);outline:none;}
+  .sl-numfield .nf-input{width:3.4rem;min-width:0;flex:0 0 3.4rem;border:0;background:transparent;text-align:center;font-family:var(--mono);font-size:0.9rem;color:var(--ink);outline:none;}
 
   /* ── Fieldset: bordered group of fields with a boxed accent legend ── */
   .sl-fieldset{border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:rgba(var(--glass-tint),0.05);padding:0.9rem 1rem 1rem;margin:0;display:flex;flex-direction:column;gap:0.7rem;}
@@ -551,7 +550,7 @@
   .sl-meter .mt-fill{height:100%;background:var(--accent);border-right:var(--border-w) solid rgb(var(--edge));}
   /* .sl-skel (verbatim kit CSS) uses legacy rgba(var(--glass-tint),a)/rgba(var(--edge),a); --glass-tint & --edge are space-separated triplets here, so that syntax is invalid and the shimmer renders transparent. Restore the gradient via background-image (keeps the verbatim background-size/animation) + border, mode-aware off --ink so it shows in both modes. */
   .sl-skel{background-image:linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 25%,color-mix(in srgb,var(--ink) 14%,transparent) 37%,color-mix(in srgb,var(--ink) 6%,transparent) 63%);border:1px solid rgb(var(--edge) / 0.18);}
-  /* Radios square (not round) to match the design language's 90° corners; tracks the live --radius knob. Verbatim kit CSS hard-codes border-radius:50% on .sl-radio + its .dot. */
+  /* Radio selection fills the complete framed well; there is no nested dot. */
   .sl-radio,.sl-radio .dot{border-radius:var(--radius);}
   /* ── Field-sourced components: patterns internalized from the showcase sites (universe.audio, 2daysearly.xyz, samir.xyz) back into the kit ── */
   .sl-stat-strip{display:flex;flex-wrap:wrap;gap:1.4rem;}
@@ -583,7 +582,7 @@
   .sl-waveform .wf-bar{flex:1 1 0;min-width:3px;height:var(--h,40%);background:var(--accent);border:1px solid rgb(var(--edge));box-sizing:border-box;transform-origin:bottom;}
   .sl-waveform .wf-bar.is-future{background:rgb(var(--glass-tint) / 0.22);}
   /* The Card demo's media area is a branded cover panel: rigid frame, accent gradient, single glyph. */
-  #components .sl-card-demo .cd-media{display:flex;align-items:center;justify-content:center;padding:0;min-height:88px;margin-bottom:0.7rem;background:linear-gradient(135deg, rgb(var(--glass-tint) / 0.10), var(--accent));border-bottom:var(--border-w) solid rgb(var(--edge));}
+  #components .sl-card-demo .cd-media{display:flex;align-items:center;justify-content:center;padding:0;min-height:88px;margin-bottom:0.7rem;background:color-mix(in srgb,var(--accent) 34%,var(--bg-2));border-bottom:var(--border-w) solid rgb(var(--edge));}
   #components .sl-card-demo .cd-media svg{width:1.9rem;height:1.9rem;color:var(--accent-ink);}
   /* Now-playing player: meta, then a waveform seek with its times, then a controls block.
      pl-controls stacks full-width rows: the transport deck (buttons spread across the full
@@ -608,6 +607,8 @@
   .sl-player .pl-vol{display:flex;align-items:center;gap:0.6rem;min-width:0;}
   .sl-player .pl-vol svg{width:1.05rem;height:1.05rem;color:var(--ink-dim);flex:none;}
   .sl-player .pl-vol .sl-slider{flex:1;min-width:0;}
+  .pl-volume-slider{position:relative;}
+  .pl-volume-slider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
 
   /* ── Toolbar: a bar grouping controls (toggle groups, separators, buttons) ── */
   .sl-toolbar{display:flex;align-items:center;gap:0.3rem;flex-wrap:nowrap;padding:0.4rem 0.45rem;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:rgba(var(--glass-tint),0.06);overflow-x:auto;scrollbar-width:none;}
@@ -619,7 +620,7 @@
   .sl-toolbar .sl-btn.sm{padding:0.4rem 0.55rem;}
   .sl-toolbar :is([data-lucide],svg){width:16px;height:16px;}
 
-  .sl-aspect{aspect-ratio:16/9;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 50%,transparent),rgba(var(--glass-tint),0.1));display:grid;place-items:center;font-family:var(--mono);font-size:0.78rem;color:var(--accent-ink);}
+  .sl-aspect{aspect-ratio:16/9;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:color-mix(in srgb,var(--accent) 34%,var(--bg-2));display:grid;place-items:center;font-family:var(--mono);font-size:0.78rem;color:var(--ink);}
 
   .sl-scroll{max-height:128px;overflow-y:auto;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:rgba(var(--glass-tint),0.05);}
   .sl-scroll .row{font-family:var(--mono);font-size:0.78rem;padding:0.45rem 0.6rem;color:var(--ink-dim);border-bottom:1px solid rgba(var(--edge),0.15);}
@@ -666,7 +667,7 @@
   .sl-kbd{font-family:var(--mono);font-size:0.72rem;padding:0.12rem 0.45rem;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);background:rgba(var(--glass-tint),0.07);box-shadow:1px 1px 0 0 var(--hard-shadow);color:var(--ink);}
 
   .sl-chart{display:flex;align-items:flex-end;gap:4px;height:128px;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:rgba(var(--glass-tint),0.05);padding:0.7rem;}
-  .sl-chart .bar{flex:1;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent));border:1px solid rgb(var(--edge));border-bottom:none;}
+  .sl-chart .bar{flex:1;background:var(--accent);border:1px solid rgb(var(--edge));border-bottom:none;}
 
   /* One slide at a time, paged by the prev/next + dots that mountCarousel()
      in the React app injects (which also adds .is-enhanced to the wrap). */
@@ -676,7 +677,7 @@
      keeps a native horizontal scroller and can still reach every slide. */
   .sl-carousel-wrap.is-enhanced .sl-carousel{scrollbar-width:none;-ms-overflow-style:none;}
   .sl-carousel-wrap.is-enhanced .sl-carousel::-webkit-scrollbar{display:none;}
-  .sl-carousel .slide{scroll-snap-align:start;flex:0 0 100%;aspect-ratio:16/9;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:linear-gradient(135deg, rgb(var(--glass-tint) / 0.10), var(--accent));display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--accent-ink);}
+  .sl-carousel .slide{scroll-snap-align:start;flex:0 0 100%;aspect-ratio:16/9;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);box-shadow:2px 2px 0 0 var(--hard-shadow);background:color-mix(in srgb,var(--accent) 34%,var(--bg-2));display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);}
   .sl-carousel-btn{position:absolute;width:34px;height:34px;display:grid;place-items:center;border:var(--border-w) solid rgb(var(--edge));border-radius:var(--radius);background:rgba(var(--glass-tint),0.16);backdrop-filter:blur(8px) saturate(160%);-webkit-backdrop-filter:blur(8px) saturate(160%);box-shadow:2px 2px 0 0 var(--hard-shadow);color:var(--ink);font-family:var(--mono);font-size:1.25rem;line-height:1;cursor:pointer;transition:transform .12s ease,background .2s ease,opacity .2s ease;z-index:2;}
   .sl-carousel-btn:hover{background:rgba(var(--glass-tint),0.26);}
   .sl-carousel-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--hard-shadow);}
@@ -728,8 +729,11 @@
   .sl-ctx-menu .item .k{margin-left:auto;opacity:0.6;font-size:0.72rem;}
   .sl-ctx-menu .sep{height:1px;background:rgba(var(--edge),0.2);margin:0.3rem 0;}
 
-  .sl-drawer-overlay{align-items:end;justify-items:stretch;}
-  .sl-drawer{width:100%;padding:1.3rem 1.6rem 1.7rem;background:var(--bg-2);border-top:var(--border-w) solid rgb(var(--edge));box-shadow:0 -10px 0 0 rgba(0,0,0,0.2);transform:translateY(100%);transition:transform 0.28s cubic-bezier(.2,.9,.2,1);}
+  .sl-drawer-overlay{align-items:end;justify-items:stretch;z-index:2147483646;}
+  .sl-drawer{width:100%;padding:1.3rem 1.6rem max(1.7rem,env(safe-area-inset-bottom));background:var(--bg-2);border-top:var(--border-w) solid rgb(var(--edge));box-shadow:0 -10px 0 0 rgba(0,0,0,0.2);transform:translateY(100%);transition:transform 0.28s cubic-bezier(.2,.9,.2,1);}
+
+  .sl-sidebar-demo .sb-main{display:flex;flex-direction:column;gap:0.45rem;}
+  .sl-sidebar-demo .sb-main strong{font-family:var(--display);font-size:1rem;color:var(--ink);}
   .sl-drawer-overlay.open .sl-drawer{transform:none;}
   .sl-drawer .dr-grip{display:block;width:46px;height:5px;background:rgb(var(--edge));margin:0 auto 1rem;}
 
@@ -791,15 +795,6 @@
   .pairings .pf.is-detail .pf-name{font-size:0.95rem;font-weight:400;letter-spacing:0;}
   .pairings .pair-note{font-family:var(--mono);font-size:0.72rem;color:var(--ink-dim);margin-top:0.6rem;}
   /* Show each face in its own typeface so it's visible at a glance. */
-  .ff-archivo{font-family:"Inter","Helvetica Neue",sans-serif;}
-  .ff-outfit{font-family:"Inter","Helvetica Neue",sans-serif;}
-  .ff-syne{font-family:"Syne","Helvetica Neue",sans-serif;}
-  .ff-inter{font-family:"Inter","Helvetica Neue",sans-serif;}
-  .ff-bricolage{font-family:"Bricolage Grotesque","Helvetica Neue",sans-serif;}
-  .ff-jakarta{font-family:"Plus Jakarta Sans","Helvetica Neue",sans-serif;}
-  .ff-spacemono{font-family:"Space Mono",ui-monospace,monospace;font-weight:400;}
-  .ff-ibmplexmono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:400;}
-  .ff-jetbrainsmono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:400;}
 
   /* Data progress: read the fill as glassy LIQUID, not a candy stripe. Static
      here (everyone) — the flow/crest motion is layered in the reduced-motion-
@@ -932,15 +927,10 @@
     .sl-acc-body > p{ opacity:0; transform:translateY(-6px); transition:opacity var(--motion) var(--ease-liquid), transform var(--motion) var(--ease-liquid); }
     .sl-acc-item.open .sl-acc-body > p{ opacity:1; transform:none; }
 
-    /* --- hover refraction: pointer-tracked specular highlight on cards --- */
+    /* Flat information surfaces do not refract on hover. Liquid movement is
+       reserved for state transitions, navigation markers, and overlays. */
     .kit-cell, .show-card{ position:relative; }
-    .kit-cell::after, .show-card::after{
-      content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
-      border-radius:inherit;
-      background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.07), transparent 55%);
-      transition:opacity var(--motion) var(--ease-liquid);
-    }
-    .kit-cell:hover::after, .show-card:hover::after{ opacity:1; }
+    .kit-cell::after, .show-card::after{ content:none; }
 
     /* --- liquid progress: the pooled caustics drift and a crest rides the
        surface (the glassy body + meniscus are defined statically above) --- */
@@ -1056,3 +1046,582 @@
     text-transform:uppercase;letter-spacing:.06em;font-size:11px;box-shadow:2px 2px 0 0 var(--hard-shadow);
     transition:transform .12s,box-shadow .12s}
   .twk-reset:hover{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--hard-shadow)}
+  /* ============================================================
+     SCIENTIFIC CLARITY — legibility-first specimen composition
+     Swiss modernism and International Typographic Style discipline set the page grid,
+     measure, alignment, and hierarchy. Neobrutalist shadows are
+     reserved for tactile controls; liquid glass is reserved for state.
+     ============================================================ */
+body {
+  font-family: var(--body);
+  font-weight: 430;
+  letter-spacing: -0.008em;
+}
+.wrap,
+.shell,
+.nav {
+  width: min(var(--shell-w), calc(100vw - max(2rem, var(--viewport-gutter))));
+}
+
+.nav {
+  top: 0;
+  padding: 0.7rem 0;
+  border-width: 0 0 1px;
+  background: color-mix(in srgb, var(--bg) 94%, transparent);
+  box-shadow: none;
+  backdrop-filter: blur(16px) saturate(120%);
+  -webkit-backdrop-filter: blur(16px) saturate(120%);
+}
+.nav .brand .name {
+  font-size: 0.92rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+.nav .brand .glyph {
+  --s: 38px;
+}
+.nav .links {
+  position: relative;
+  gap: 0;
+  border: 1px solid rgb(var(--edge));
+  isolation: isolate;
+}
+.nav .nav-action-slot {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  border-left: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
+}
+.nav .nav-action-slot:nth-of-type(2) {
+  border-left: 0;
+}
+.nav .nav-liquid-marker {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  z-index: 0;
+  width: var(--nav-marker-w, 0px);
+  opacity: var(--nav-marker-opacity, 0);
+  transform: translateX(var(--nav-marker-x, 0px));
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  border-bottom: 3px solid var(--accent);
+  transition:
+    transform var(--motion) var(--ease-liquid-over),
+    width var(--motion) var(--ease-liquid),
+    opacity var(--motion-fast) var(--ease-liquid);
+  pointer-events: none;
+}
+.nav .nav-page-progress {
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  width: var(--page-progress, 0%);
+  height: 3px;
+  background: var(--accent);
+  transition: width 120ms linear;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nav .nav-liquid-marker,
+  .nav .nav-page-progress {
+    transition: none;
+  }
+}
+.nav .links .nav-cta {
+  padding: 0.58rem 0.82rem;
+  font-size: 0.74rem;
+  font-weight: 650;
+  color: var(--ink);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  transform: none;
+}
+.nav .links .nav-cta:hover,
+.nav .links .nav-cta:active {
+  color: var(--ink);
+  background: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+.hero {
+  min-height: min(860px, 92vh);
+  padding-top: clamp(8rem, 15vh, 11rem);
+  padding-bottom: clamp(5rem, 10vh, 8rem);
+  border-top: 0;
+}
+.hero-grid {
+  max-width: none;
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
+  gap: var(--grid-gutter);
+  align-items: center;
+}
+.hero-grid > div:first-child {
+  max-width: 780px;
+}
+.wordmark {
+  font-size: var(--text-display-xl);
+  font-weight: 760;
+  line-height: 0.78;
+  letter-spacing: -0.075em;
+  margin: 0.25em 0 0.38em;
+}
+.wordmark .brutal {
+  color: var(--ink);
+  -webkit-text-stroke: 0;
+  text-shadow: none;
+}
+.wordmark .glas {
+  letter-spacing: -0.06em;
+}
+.liquid-svg {
+  filter: drop-shadow(3px 3px 0 rgb(var(--edge) / 0.24));
+}
+.hero .lead {
+  max-width: 58ch;
+  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
+  line-height: 1.55;
+  color: var(--ink);
+}
+.hero .lead em {
+  display: block;
+  margin-bottom: 0.65rem;
+  font-style: normal;
+  font-weight: 680;
+  letter-spacing: -0.025em;
+}
+.hero-tags {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  margin: 2rem 0 2.3rem;
+  border-top: 1px solid var(--ink);
+  border-bottom: 1px solid var(--ink);
+}
+.hero-tags .tag {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem 0.8rem 0.85rem;
+  border: 0;
+  border-right: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
+  font-size: 0.64rem;
+  line-height: 1.25;
+  letter-spacing: 0.08em;
+  color: var(--ink);
+}
+.hero-tags .tag:last-child {
+  border-right: 0;
+}
+.hero-tags .tag b {
+  color: var(--accent);
+  font-size: 0.68rem;
+}
+.hero-cube-wrap {
+  position: relative;
+  top: auto;
+  right: auto;
+  transform: none;
+  justify-self: end;
+}
+.hero-cube {
+  --s: clamp(270px, 31vw, 450px);
+  opacity: 0.9;
+}
+.hero-cube.is-cube .lw-cube-innerglass {
+  fill: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.hero-cube.is-cube .lw-cube-shell {
+  stroke-width: 1.35;
+}
+.hero-cube.is-cube .lw-cube-edge {
+  stroke-width: 0.8;
+}
+
+.tenets {
+  gap: 0;
+  border-top: var(--border-w) solid rgb(var(--edge));
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+}
+.tenet {
+  min-height: 430px;
+  padding: 1.35rem 1.45rem 1.6rem;
+  border-right: 1px solid rgb(var(--edge));
+  background: transparent;
+}
+.tenet:last-child {
+  border-right: 0;
+}
+.tenet .pnum {
+  font-size: 0.66rem;
+  color: var(--accent);
+}
+.tenet .psub {
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+}
+.tenet h3 {
+  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
+  line-height: 0.94;
+  letter-spacing: -0.045em;
+  margin: 2.3rem 0 0.8rem;
+}
+.tenet > p {
+  font-size: 0.94rem;
+  line-height: 1.55;
+  max-width: 34ch;
+}
+.tenet ul {
+  margin-top: auto;
+  padding-top: 2rem;
+}
+.tenet li {
+  font-family: var(--body);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  padding: 0.7rem 0;
+}
+.tenet li::before {
+  width: 6px;
+  height: 6px;
+  margin-top: 0.48em;
+}
+.tenet-neobrutalism {
+  background: var(--bg-2);
+  box-shadow: none;
+  transform: none;
+}
+.tenet-liquid {
+  background: var(--bg-2);
+}
+.tenet-clarity {
+  background: var(--bg-2);
+}
+#components .kit-filterbars {
+  border-top: 1px solid var(--ink);
+  padding-top: 1rem;
+}
+#components .kit-grid.gallery {
+  column-gap: 1px;
+  background: color-mix(in srgb, var(--ink) 22%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+#components .kit-grid.gallery .kit-cell {
+  margin: 0 0 1px;
+  padding: 1.35rem 1.4rem;
+  background: var(--bg-2);
+  border: 0;
+  box-shadow: none;
+}
+#components .kit-cap {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+}
+.kit-filter {
+  box-shadow: none;
+  background: transparent;
+  border-width: 1px;
+}
+.kit-filter:hover {
+  transform: none;
+  box-shadow: none;
+  background: var(--bg-2);
+}
+.kit-filter.active {
+  border-color: rgb(var(--edge));
+}
+
+.show-grid {
+  gap: 1px;
+  background: color-mix(in srgb, var(--ink) 24%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
+}
+.show-card {
+  max-width: none;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+  background: var(--bg-2);
+}
+.show-card-foot {
+  border-top: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
+}
+.show-card:hover,
+.show-card:focus-visible {
+  transform: none;
+}
+.show-card:hover .show-card-shot img,
+.show-card:focus-visible .show-card-shot img {
+  transform: scale(1.015);
+}
+
+.adopt-gallery {
+  column-gap: 1px !important;
+  background: color-mix(in srgb, var(--ink) 22%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+.adopt-gallery .kit-cell {
+  margin: 0 0 1px !important;
+  border: 0;
+  box-shadow: none;
+  background: var(--bg-2);
+}
+.cta-panel {
+  padding: clamp(3rem, 7vw, 6rem);
+  text-align: left;
+  align-items: flex-start;
+  background: var(--bg-2);
+  box-shadow: none;
+}
+.cta-panel h2 {
+  max-width: 18ch;
+  font-size: clamp(2.6rem, 6vw, 6.2rem);
+  line-height: 0.9;
+  letter-spacing: -0.06em;
+}
+.cta-panel p {
+  max-width: 60ch;
+}
+.foot {
+  border-top: 1px solid var(--ink);
+}
+
+[data-mode="dark"] .nav {
+  background: color-mix(in srgb, var(--bg) 96%, transparent);
+  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
+}
+[data-mode="dark"] .nav .links {
+  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
+  border-color: color-mix(in srgb, var(--ink) 38%, transparent);
+}
+[data-mode="dark"] .nav .nav-action-slot {
+  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
+}
+[data-mode="dark"] .nav .nav-liquid-marker {
+  background: color-mix(in srgb, var(--accent) 28%, var(--bg-2));
+}
+[data-mode="dark"] .nav .links .nav-cta {
+  color: #ffffff;
+}
+[data-mode="dark"] .nav .links a,
+[data-mode="dark"] .nav .links button {
+  color: #ffffff;
+}
+[data-mode="dark"] .glass,
+[data-mode="dark"] .tenet-neobrutalism,
+[data-mode="dark"] .tenet-liquid,
+[data-mode="dark"] .tenet-clarity,
+[data-mode="dark"] #components .kit-grid.gallery .kit-cell,
+[data-mode="dark"] .show-card,
+[data-mode="dark"] .adopt-gallery .kit-cell {
+  background: #202020;
+}
+[data-mode="dark"] .field .grid {
+  opacity: 0.45;
+}
+
+/* ============================================================
+   PRECISION PASS — one editorial grid, full-height specimens,
+   higher-fidelity liquid state, and legible accent interaction.
+   ============================================================ */
+.nav-cluster,
+.nav-utilities {
+  display: flex;
+  align-items: stretch;
+}
+.nav-cluster { gap: 0.55rem; }
+.nav-utilities { gap: 0.35rem; }
+.nav .links a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+  height: 100%;
+  padding: 0.58rem 0.72rem;
+  color: var(--ink);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.nav .links a::after { display: none; }
+.nav .links a svg,
+.nav-utility svg { width: 0.94rem; height: 0.94rem; }
+.nav .nav-action-slot:first-of-type { border-left: 0; }
+.nav .nav-utility {
+  min-height: 100%;
+  padding: 0.58rem 0.72rem;
+  border-width: 1px;
+  background: var(--bg-2);
+  box-shadow: none;
+  color: var(--ink);
+  font-size: 0.74rem;
+  text-transform: none;
+}
+.nav .nav-utility:first-child {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
+.nav .nav-utility:hover,
+.nav .nav-utility:active { transform: none; box-shadow: none; }
+[data-mode="dark"] .nav .nav-liquid-marker {
+  background: color-mix(in srgb, var(--accent) 48%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--accent) 76%, white);
+}
+[data-mode="dark"] .nav .links a,
+[data-mode="dark"] .nav .links a:hover { color: #fff; }
+
+.hero-cube .lw-cube-face-index {
+  fill: var(--ink);
+  stroke: var(--bg);
+  stroke-width: 0.7px;
+  font-size: 5.2px;
+}
+.hero-cube.is-cube .lw-cube-innerglass {
+  fill: color-mix(in srgb, var(--accent) 36%, transparent);
+}
+.hero-cube .lw-shine { opacity: 0.8; }
+.hero-cube .lw-caustic { opacity: 0.3; }
+
+.tenet {
+  display: grid;
+  grid-template-rows: auto auto 5.1rem minmax(11.5rem, 1fr) auto;
+}
+.tenet h3 {
+  align-self: end;
+  margin: 1.8rem 0 0.8rem;
+  font-size: clamp(1rem, 2vw, 1.72rem);
+  line-height: 1;
+  white-space: nowrap;
+}
+.tenet > p { max-width: none; }
+.tenet ul { margin-top: 0; }
+
+#components .kit-grid.gallery {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 1px;
+  column-count: auto;
+}
+#components .kit-grid.gallery .kit-cell {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  height: 100%;
+  min-width: 0;
+  margin: 0;
+  break-inside: auto;
+}
+.sl-button-specimen {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
+.kit-filter.active {
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-color: var(--accent);
+}
+.kit-filter.active:hover { color: var(--accent-ink); }
+[data-mode="dark"] .kit-filter.active {
+  background: color-mix(in srgb, var(--accent) 54%, var(--bg-2));
+  color: #fff;
+  border-color: color-mix(in srgb, var(--accent) 76%, white);
+}
+[data-mode="dark"] .kit-filter.active:hover { color: #fff; }
+[data-mode="dark"] .kit-filters[data-axis="kind"] .kit-filter.active {
+  background: color-mix(in srgb, var(--accent) 32%, transparent);
+  color: #fff;
+}
+.foot {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.foot .foot-legal { text-align: left; }
+
+@media (max-width: 1080px) {
+  .nav .brand .name { display: none; }
+  .nav .links a { padding-inline: 0.58rem; }
+}
+@media (max-width: 780px) {
+  .nav { padding-left: 0.5rem; }
+  .nav-cluster { gap: 0.28rem; }
+  .nav-label { display: none; }
+  .nav .links a:not(.nav-cta) { display: inline-flex; }
+  .nav .links a { width: 2.45rem; justify-content: center; padding-inline: 0; }
+  .nav .nav-utility { padding-inline: 0.58rem; }
+}
+@media (max-width: 600px) {
+  #components .kit-grid.gallery { grid-template-columns: 1fr; }
+  .nav .nav-utility { font-size: 0; gap: 0; }
+  .tenet {
+    display: flex;
+    min-height: auto;
+  }
+  .tenet h3 { white-space: normal; font-size: 1.55rem; }
+}
+
+@media (max-width: 900px) {
+  .hero {
+    min-height: auto;
+  }
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+  .hero-cube-wrap {
+    position: absolute;
+    right: -6rem;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.28;
+  }
+  .hero-grid > div:first-child {
+    max-width: 720px;
+    z-index: 1;
+  }
+}
+@media (max-width: 700px) {
+  .hero {
+    padding-top: 7rem;
+  }
+  .wordmark {
+    font-size: clamp(3.4rem, 18vw, 6rem);
+  }
+  .hero-tags {
+    grid-template-columns: 1fr;
+  }
+  .hero-tags .tag {
+    border-right: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
+  }
+  .hero-tags .tag:last-child {
+    border-bottom: 0;
+  }
+  .tenets {
+    grid-template-columns: 1fr;
+  }
+  .tenet {
+    min-height: auto;
+    border-right: 0;
+    border-bottom: 1px solid rgb(var(--edge));
+  }
+  .tenet:last-child {
+    border-bottom: 0;
+  }
+  .tenet ul {
+    margin-top: 2rem;
+    padding-top: 0;
+  }
+  .nav .links .nav-cta {
+    padding-inline: 0.62rem;
+  }
+  .tenet-neobrutalism {
+    transform: none;
+  }
+  .cta-panel {
+    text-align: left;
+  }
+}
diff --git a/docs/component-audit-2026-08.md b/docs/component-audit-2026-08.md
index 71c3987..1b04290 100644
--- a/docs/component-audit-2026-08.md
+++ b/docs/component-audit-2026-08.md
@@ -9,15 +9,17 @@ The Structured Liquidity registry was compared with the active Interspace, Obser
 | Product activity and changelog entries | Interspace changelog and investor updates; Exobase signals and tenant changelogs; Universe changelog | `activity-feed`    |
 | File intake and evidence upload        | Universe song and lyric upload; Observatory attachments; Exobase media forms                         | `dropzone`         |
 | Plans, packages, and subscriptions     | Interspace advisory packages; Exobase pricing display; Universe Pro and top-up cards                 | `pricing-card`     |
+| Profile and operator identity          | Construct profile presentation and identity facts                                                    | `profile-card`     |
 
-Each addition keeps the language constraints: square containers, load-bearing black borders, neutral glass, flat zero-blur shadows, one accent, Inter for headings and body, and Space Mono for metadata.
+Each addition keeps the language constraints: square containers, load-bearing black borders, neutral glass, selective flat zero-blur shadows, one accent, Inter for headings and body, and Space Mono for metadata.
 
 ## Covered by existing components
 
 - Portfolio and metric summaries: `card`, `stat`, `table`, and `filter-toolbar`.
 - Research inspection: `detail-panel`, `tabs`, `resizable`, and `scroll-area`.
 - Command and AI workflows: `omnibar`, `command`, `ai-chat`, and `sheet`.
-- Mobile navigation: `mobile-nav`, `drawer`, and `segmented-nav` variants.
+- Mobile navigation: one `mobile-nav` composition combining the floating liquid tab marker with the drawer; the redundant standalone tab and segmented-nav specimens are no longer showcased.
+- Selection and loading: one styled `select`/options pattern and one consolidated `skeleton` specimen replace duplicate native/dropdown and card/text/list examples.
 - Trust and identity: `testimonial-card`, `logo-grid`, and `profile-header`.
 
 ## Next candidates
diff --git a/docs/design-ethos-v2.md b/docs/design-ethos-v2.md
new file mode 100644
index 0000000..5a1f396
--- /dev/null
+++ b/docs/design-ethos-v2.md
@@ -0,0 +1,38 @@
+# Structured Liquidity design ethos
+
+## The operating model
+
+**Neobrutalist structure. Liquid motion. Scientific modern clarity.**
+
+Structured Liquidity is a trifecta of three orthogonal design tenets, represented by the three visible faces of its cube:
+
+1. **Neobrutalist structure:** How the interface is physically framed—buttons, borders, navigation, footers, body containers, panels, square geometry, and selective flat shadows. It makes boundaries and actions tangible before effects are added.
+2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible. Motion never becomes the only carrier of meaning, and every interaction has a complete reduced-motion state.
+3. **Scientific Modern Clarity:** How information is organized and meaning is communicated—rational grids, disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. It is informed by Swiss modernism and the International Typographic Style, whose purpose is to make information legible, ordered, and unmistakable. Every screen remains complete and useful without relying on color, glass, or motion.
+
+## Decision ownership
+
+| Question                                                        | Owner                     |
+| --------------------------------------------------------------- | ------------------------- |
+| What physically frames the interface and makes action tangible? | Neobrutalist structure    |
+| How does the system behave?                                     | Liquid Motion             |
+| How is information organized and meaning communicated?          | Scientific Modern Clarity |
+
+## Expression rules
+
+- Use one accent for selection, progression, or a single key relationship. Monochrome does the explanatory work.
+- Establish one dominant typographic statement per view, then use a restrained body measure, exact baselines, and mono evidence labels.
+- Treat diagrams as explanatory figures: label them, number them when useful, and provide a caption or source state.
+- Let the grid, alignment, and hierarchy convey order before adding borders or glass.
+- Reserve hard shadows for tactile affordances and deliberately layered cutout surfaces; not every container needs one.
+- Keep information surfaces flat. Gradients are not a default expression of liquidity.
+- Dark mode is a single color-responsive atmospheric palette, not a separate black mode. Derive its deep page field from the active accent—purple becomes aubergine, green becomes deep green, yellow becomes ochre—while tactile components may remain charcoal or near-black.
+- Express Liquid Motion through shared markers and continuity between navbar actions, menu options, tabs, filters, overlays, and page areas.
+- Keep the rigid frame still. Motion happens within it to explain state, continuity, or spatial relationship.
+- A reduced-motion or static rendering is a complete rendering, not a degraded fallback.
+
+## Short language
+
+Primary phrase: **Neobrutalist structure. Liquid motion. Scientific modern clarity.**
+
+Manifesto phrase: **Three faces. One design language.**
diff --git a/replit.md b/replit.md
index 0cad2f0..86f7584 100644
--- a/replit.md
+++ b/replit.md
@@ -1,6 +1,6 @@
 # Structured Liquidity
 
-A live, deployable specimen + landing page for **Structured Liquidity** — an open UI design language that pairs rigid containment (sharp 90° corners, flat blurless offset shadows, strict grid) with viscous depth (semi-transparent light-reflecting glass) and semantic clarity. The page is both the specimen and the documentation of the language, with a live in-page theme tweaker, and it **dogfoods its own React components**. It also publishes those components as a **shadcn-installable registry** at `/r/*.json`. Structured Liquidity is an Interspace Venture (est. 2026); the source is on GitHub at https://github.com/heyinterspace/Structured.
+A live, deployable specimen + landing page for **Structured Liquidity** — **Neobrutalist structure. Liquid motion. Scientific modern clarity.** Neobrutalist structure owns the physical frame of the interface: buttons, borders, navigation, footers, body containers, panels, square geometry, and selective flat shadows. Liquid Motion makes system behavior perceptible through shared markers and transitions between navbar actions, menu options, tabs, filters, overlays, and page areas without becoming the only carrier of meaning; default information surfaces remain flat, gradients are not shorthand for liquidity, and every interaction has a complete reduced-motion state. Scientific Modern Clarity organizes information and communicates meaning through rational grids, disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: information should be legible, ordered, and unmistakable, and every screen remains complete without relying on color, glass, or motion. These three tenets form the Structured Liquidity trifecta, represented by the cube's three visible faces. The page is both the specimen and the documentation of the language, with a live in-page theme tweaker, and it **dogfoods its own React components**. It also publishes those components as a **shadcn-installable registry** at `/r/*.json`. Structured Liquidity is an Interspace Venture (est. 2026); the source is on GitHub at https://github.com/heyinterspace/Structured.
 
 ## Run & Operate
 
@@ -20,7 +20,7 @@ A live, deployable specimen + landing page for **Structured Liquidity** — an o
 ## Where things live
 
 - `artifacts/structured-liquidity/index.html` — minimal React shell (`<div id="root">` + `<script src="/src/main.tsx">`)
-- `artifacts/structured-liquidity/src/main.tsx`, `src/App.tsx` — entry + page composition (Nav, Hero, Pillars, Components/gallery, Templates, Showcase, Adopt, FooterCta, Footer, Tweaker, Toaster, overlays)
+- `artifacts/structured-liquidity/src/main.tsx`, `src/App.tsx` — entry + page composition (Nav, Hero, Tenets, Components/gallery, Templates, Showcase, Adopt, FooterCta, Footer, Tweaker, Toaster, overlays)
 - `artifacts/structured-liquidity/src/index.css` — Tailwind entry: `@theme` + imports of the SL styles in `src/styles/` (`10-tokens-base.css`, `20-components.css`, `30-kit.css`, `40-inline.css`)
 - `artifacts/structured-liquidity/src/components/ui/*` — ~64 shadcn-style SL components (Button, Badge, Input, Select, Tabs, Accordion, Dialog, …). **Plain React + `lucide-react`, no Radix** — each emits SL classes and uses `cn()` from `src/lib/utils.ts`.
 - `artifacts/structured-liquidity/src/components/templates/*` — installable page structures distilled from the production portfolio: marketing site, data dashboard, guided flow, and immersive app.
@@ -55,11 +55,11 @@ Cross-item URLs use `REGISTRY_BASE_URL` (default `https://structured.glass`). Th
 - **Showcase is a scalable product-card grid** (`.show-grid` of `.show-card`): each card is a clickable `<a class="show-card glass">` with a real screenshot from `public/`; description + Visit CTA reveal on hover/focus (persistent bottom panel on touch). Add a product = one `.show-card` + its screenshot.
 - Asset references are relative; the artifact is served at base `/`.
 - Public sites built with the framework must include a visible footer attribution to `https://structured.glass`; use `FrameworkAttribution` or the plain HTML recipe in `ATTRIBUTION.md`. Immersive full-viewport apps may put it in a persistent information panel.
-- Navigation and footer chrome use `--shell-w` and remain slightly wider than the `--content-w` reading/application column.
+- Navigation, body surface, and footer chrome share `--shell-w`. The body remains an independent near-background surface, while tenant layouts may set a narrower internal reading measure.
 
 ## Product
 
-A single-page specimen + reference for the Structured Liquidity design language: it explains the three pillars (each with its working rules), demonstrates a full component kit (the same React components it ships), lets visitors retheme it live (accent, glass blur, corner radius, border weight, flat-shadow offset, display font, dark/light mode), and lets them install it via shadcn.
+A single-page specimen + reference for the Structured Liquidity design language: it explains the trifecta in order—Neobrutalist structure as the physical frame, Liquid Motion as behavior, Scientific Modern Clarity as information and communication—demonstrates a curated component gallery backed by the full registry, lets visitors retheme it live, and lets them install it via shadcn. The cube's three visible faces represent the trifecta; there is no fourth group.
 
 ## Design language tokens (the knobs the page reads)
 
@@ -68,10 +68,10 @@ Defined in `src/styles/10-tokens-base.css` / `public/structured-liquidity.css` `
 - `--accent` (default `#a388ee`) + `--accent-ink` (luminance-derived black/white)
 - `--glass-blur` (18px), `--glass-tint` (rgb), `--glass-alpha`
 - `--border-w` (2px), `--hard-x`/`--hard-y` (7px, flat offset shadow), `--radius` (0px)
-- `--display` (Archivo, headings/buttons/brand — controlled by the live tweaker), `--mono` (Space Mono), `--body` (Outfit)
+- `--display` and `--body` (Inter), `--mono` (Space Mono)
 - `data-mode` attribute on `<html>`: `dark` | `light`
-- Tweaker ranges: blur 0–40, radius 0–40, border 0–5, shadow 0–16; accents `#a388ee #7c9cff #3dd7c8 #ffb454 #ff7a90`; fonts Archivo / Space Grotesk / Syne
-- **Font pairings** (Header · Body · Detail): `Archivo · Outfit · Space Mono` (Canonical, default), `Syne · Inter · IBM Plex Mono` (Editorial), `Bricolage Grotesque · Plus Jakarta Sans · JetBrains Mono` (Modern). Never two header faces; never body copy in the header face; detail mono only for labels/data/code.
+- Tweaker ranges: blur 0–40, radius 0–40, border 0–5, shadow 0–16; accents `#a388ee #7c9cff #3dd7c8 #ffb454 #ff7a90`; typography stays fixed.
+- **Canonical font roles** (Header · Body · Detail): `Inter · Inter · Space Mono`. Use Inter across hierarchy and reading; reserve mono for labels, evidence, data, and code.
 
 ## User preferences