From 67d0cc1787cd8c6e5e928c2fdcf9350f5b15b6c6 Mon Sep 17 00:00:00 2001
From: Samir <hey@samir.xyz>
Date: Wed, 19 Aug 2026 22:25:22 -0400
Subject: [PATCH] IV-107 flatten scientific modernism surfaces

---
 .agents/memory/structured-liquidity-motion.md |   2 +-
 .agents/memory/structured-liquidity.md        |   6 +-
 .agents/skills/structured-liquidity/SKILL.md  |   4 +-
 .../public/design-tokens.json                 |   6 +-
 .../structured-liquidity/public/llms.txt      |   3 +-
 .../public/r/structured-liquidity-agent.json  |   2 +-
 .../public/r/structured-liquidity.json        |   6 +-
 .../structured-liquidity-components.css       |  53 +++-----
 .../public/structured-liquidity-kit.css       |  23 ++--
 .../public/structured-liquidity.css           | 101 ++--------------
 .../src/components/site/Adopt.tsx             |   3 +-
 .../src/components/site/Nav.tsx               |  97 +++++++++++----
 .../components/site/kit/KitFormsInputs.tsx    |   2 +-
 .../src/styles/10-tokens-base.css             | 101 ++--------------
 .../src/styles/20-components.css              |  53 +++-----
 .../src/styles/30-kit.css                     |  23 ++--
 .../src/styles/40-inline.css                  | 113 ++++++++++++------
 docs/design-ethos-v2.md                       |   2 +
 replit.md                                     |   2 +-
 19 files changed, 252 insertions(+), 350 deletions(-)

diff --git a/.agents/memory/structured-liquidity-motion.md b/.agents/memory/structured-liquidity-motion.md
index af9bcfa..ef10795 100644
--- a/.agents/memory/structured-liquidity-motion.md
+++ b/.agents/memory/structured-liquidity-motion.md
@@ -5,7 +5,7 @@ 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.
diff --git a/.agents/memory/structured-liquidity.md b/.agents/memory/structured-liquidity.md
index 8fdd02e..fe78515 100644
--- a/.agents/memory/structured-liquidity.md
+++ b/.agents/memory/structured-liquidity.md
@@ -5,7 +5,7 @@ description: The durable decisions behind the SL specimen port — what it is, a
 
 # Structured Liquidity
 
-An open UI design language—**Structured framing. Liquid motion. Scientific clarity.**—shipped as a live specimen at `artifacts/structured-liquidity`. Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, tactile interaction, and flat offset shadows used selectively for interactive or deliberately layered cutout surfaces. Liquid Motion makes system behavior perceptible through neutral translucency, continuity, and purposeful motion; glass is not a default card treatment. Scientific Clarity communicates meaning through 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. Scientific Clarity includes the quality test that every screen remains complete and useful without color, glass, or motion. Together the three pillars form the Structured Liquidity trifecta, represented by the cube's three visible faces. Token reference, file map, and pillars are documented in `replit.md` — don't duplicate them; read there.
+An open UI design language—**Structured framing. Liquid motion. Scientific clarity.**—shipped as a live specimen at `artifacts/structured-liquidity`. Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, 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. Default information surfaces are flat; gradients are not shorthand for liquidity, and neutral glass is reserved for moving state boundaries. Scientific Clarity communicates meaning through 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. Scientific Clarity includes the quality test that every screen remains complete and useful without color, glass, or motion. Together the three pillars form the Structured Liquidity trifecta, represented by the cube's three visible faces. Token reference, file map, and pillars are documented in `replit.md` — don't duplicate them; read there.
 
 ## The non-obvious trap (why the port isn't a verbatim copy)
 
@@ -130,9 +130,7 @@ Every demo inside the `#components` kit (sidebar, navbar, nav-menu flyout, bread
 
 **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
 
diff --git a/.agents/skills/structured-liquidity/SKILL.md b/.agents/skills/structured-liquidity/SKILL.md
index e226f8a..6e547e0 100644
--- a/.agents/skills/structured-liquidity/SKILL.md
+++ b/.agents/skills/structured-liquidity/SKILL.md
@@ -21,7 +21,7 @@ Follow these literally — they are what keep generated output on-brand:
 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 state and depth, not decoration.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent and use it where continuity, layering, or motion matters—not on every card.
+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`, Archivo) = headings/buttons/brand; body (`--body`, Archivo) = reading copy; mono (`--mono`, IBM Plex Mono) = labels/data/captions/eyebrows.
 8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.
@@ -75,7 +75,7 @@ Three roles — header / body / detail (display / body / mono). Archivo carries
 
 ## Motion contract
 
-The rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. 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.
+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
 
diff --git a/artifacts/structured-liquidity/public/design-tokens.json b/artifacts/structured-liquidity/public/design-tokens.json
index bf034a0..ddb577c 100644
--- a/artifacts/structured-liquidity/public/design-tokens.json
+++ b/artifacts/structured-liquidity/public/design-tokens.json
@@ -57,19 +57,19 @@
     "blur": {
       "$type": "dimension",
       "$value": "14px",
-      "$description": "backdrop-filter blur radius for liquid glass surfaces.",
+      "$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.72,
-      "$description": "Glass fill opacity for the light-first default. Dark mode lowers this to 0.08.",
+      "$description": "Translucent boundary opacity for the light-first default. Dark mode lowers this to 0.08.",
       "$extensions": { "cssVar": "--glass-alpha" }
     }
   },
diff --git a/artifacts/structured-liquidity/public/llms.txt b/artifacts/structured-liquidity/public/llms.txt
index f0ea6c3..c0a978f 100644
--- a/artifacts/structured-liquidity/public/llms.txt
+++ b/artifacts/structured-liquidity/public/llms.txt
@@ -24,7 +24,8 @@ Scientific Clarity includes the quality test that every screen remains complete,
 - 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 and communicates state, continuity, or depth; it is not the default treatment for every card.
+- 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.
diff --git a/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json b/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
index 35eda80..eebc8f0 100644
--- a/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
+++ b/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/rules/structured-liquidity/SKILL.md",
-      "content": "---\nname: structured-liquidity\ndescription: Apply the Structured Liquidity UI design language — Structured Framing, Liquid Motion, and Scientific 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**Structured framing. Liquid motion. Scientific clarity.**\n\n1. **Structured Framing:** How information is organized—load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows.\n2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible.\n3. **Scientific Clarity:** How meaning is communicated—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.\n\nTogether they form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Scientific Clarity includes the quality test that every screen remains complete, legible, and useful without color, glass, or motion. 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. **Glass is state and depth, not decoration.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent and use it where continuity, layering, or motion matters—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`, Archivo) = headings/buttons/brand; body (`--body`, Archivo) = reading copy; mono (`--mono`, IBM Plex 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 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.\n12. **Clarity survives effects.** Every screen must remain complete, legible, and useful without color, glass, or motion.\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: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"IBM Plex 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: set `data-mode=\"dark\"` on `<html>` and override `--bg:#171717; --bg-2:#0f0f0f; --ink:#f3f1eb; --ink-dim:#aaa9a4; --neg:#343434; --neg-ink:#fff; --glass-alpha:0.08`.\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). Archivo carries both sans-serif roles; use scale, weight, measure, and alignment for hierarchy. Use IBM Plex 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. 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**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Archivo and IBM Plex 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",
+      "content": "---\nname: structured-liquidity\ndescription: Apply the Structured Liquidity UI design language — Structured Framing, Liquid Motion, and Scientific 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**Structured framing. Liquid motion. Scientific clarity.**\n\n1. **Structured Framing:** How information is organized—load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows.\n2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible.\n3. **Scientific Clarity:** How meaning is communicated—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.\n\nTogether they form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Scientific Clarity includes the quality test that every screen remains complete, legible, and useful without color, glass, or motion. 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`, Archivo) = headings/buttons/brand; body (`--body`, Archivo) = reading copy; mono (`--mono`, IBM Plex 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 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.\n12. **Clarity survives effects.** Every screen must remain complete, legible, and useful without color, glass, or motion.\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: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"IBM Plex 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: set `data-mode=\"dark\"` on `<html>` and override `--bg:#171717; --bg-2:#0f0f0f; --ink:#f3f1eb; --ink-dim:#aaa9a4; --neg:#343434; --neg-ink:#fff; --glass-alpha:0.08`.\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). Archivo carries both sans-serif roles; use scale, weight, measure, and alignment for hierarchy. Use IBM Plex 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**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Archivo and IBM Plex 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 1ab17c9..d8a1c9c 100644
--- a/artifacts/structured-liquidity/public/r/structured-liquidity.json
+++ b/artifacts/structured-liquidity/public/r/structured-liquidity.json
@@ -53,19 +53,19 @@
   "files": [
     {
       "path": "registry/styles/structured-liquidity.css",
-      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — Structured framing. Liquid motion.\n   Scientific 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 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: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"IBM Plex 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  --bg: #171717;\n  --bg-2: #0f0f0f;\n  --ink: #f3f1eb;\n  --ink-dim: #aaa9a4;\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 — 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;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: -2;\n  overflow: hidden;\n  pointer-events: none;\n  background:\n    radial-gradient(\n      36vw 26vw at 86% 4%,\n      color-mix(in srgb, var(--accent) 18%, transparent),\n      transparent 72%\n    ),\n    radial-gradient(\n      30vw 24vw at 12% 42%,\n      color-mix(in srgb, var(--accent) 10%, transparent),\n      transparent 74%\n    ),\n    linear-gradient(var(--bg), var(--bg));\n  background-repeat: no-repeat;\n  animation: fieldshift 34s ease-in-out infinite alternate;\n}\n[data-mode=\"light\"] .field {\n  opacity: 1;\n}\n[data-mode=\"dark\"] .field {\n  opacity: 0.72;\n}\n@keyframes fieldshift {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-3vw);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .field {\n    animation: none;\n  }\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  mask-image: linear-gradient(\n    180deg,\n    #000,\n    #000 40%,\n    rgba(0, 0, 0, 0.25) 75%,\n    transparent\n  );\n  -webkit-mask-image: linear-gradient(\n    180deg,\n    #000,\n    #000 40%,\n    rgba(0, 0, 0, 0.25) 75%,\n    transparent\n  );\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  opacity: 0.08;\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: linear-gradient(\n    135deg,\n    rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)),\n    rgba(var(--glass-tint), var(--glass-alpha))\n  );\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: inset 0 1px 0 rgba(255, 255, 255, 0.62);\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),\n    transparent 60%\n  );\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n.glass:hover::before {\n  opacity: 1;\n}\n.glass::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: linear-gradient(\n    115deg,\n    transparent 30%,\n    rgba(255, 255, 255, 0.1) 45%,\n    transparent 55%\n  );\n  background-size: 250% 250%;\n  background-position: 100% 100%;\n  opacity: 0.7;\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(150px, 2fr) minmax(0, 7fr);\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  align-self: start;\n}\n.section-head .section-title,\n.section-head .lead {\n  grid-column: 2;\n}\n.section-head .lead {\n  margin-top: 1rem;\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  }\n  .section-head .section-title {\n    margin-top: 1.25rem;\n  }\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",
+      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — Structured framing. Liquid motion.\n   Scientific 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 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: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"IBM Plex 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  --bg: #171717;\n  --bg-2: #0f0f0f;\n  --ink: #f3f1eb;\n  --ink-dim: #aaa9a4;\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(150px, 2fr) minmax(0, 7fr);\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  align-self: start;\n}\n.section-head .section-title,\n.section-head .lead {\n  grid-column: 2;\n}\n.section-head .lead {\n  margin-top: 1rem;\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  }\n  .section-head .section-title {\n    margin-top: 1.25rem;\n  }\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: 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/* 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) 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: 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\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",
+      "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: 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: 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 { 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: 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 { 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\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",
       "type": "registry:file",
       "target": "styles/structured-liquidity-kit.css"
     },
diff --git a/artifacts/structured-liquidity/public/structured-liquidity-components.css b/artifacts/structured-liquidity/public/structured-liquidity-components.css
index 4a9bcf9..ec71b6a 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); }
 
@@ -110,18 +103,11 @@
   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);
@@ -257,8 +243,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 +252,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 bf58281..79b0a5d 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); }
@@ -125,8 +123,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); }
@@ -260,9 +257,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); }
diff --git a/artifacts/structured-liquidity/public/structured-liquidity.css b/artifacts/structured-liquidity/public/structured-liquidity.css
index b6666e9..dec269c 100644
--- a/artifacts/structured-liquidity/public/structured-liquidity.css
+++ b/artifacts/structured-liquidity/public/structured-liquidity.css
@@ -103,10 +103,8 @@ body {
 }
 
 /* ============================================================
-   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 {
@@ -118,39 +116,13 @@ body {
   z-index: -2;
   overflow: hidden;
   pointer-events: none;
-  background:
-    radial-gradient(
-      36vw 26vw at 86% 4%,
-      color-mix(in srgb, var(--accent) 18%, transparent),
-      transparent 72%
-    ),
-    radial-gradient(
-      30vw 24vw at 12% 42%,
-      color-mix(in srgb, var(--accent) 10%, transparent),
-      transparent 74%
-    ),
-    linear-gradient(var(--bg), var(--bg));
-  background-repeat: no-repeat;
-  animation: fieldshift 34s ease-in-out infinite alternate;
+  background: var(--bg);
 }
 [data-mode="light"] .field {
   opacity: 1;
 }
 [data-mode="dark"] .field {
-  opacity: 0.72;
-}
-@keyframes fieldshift {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-3vw);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .field {
-    animation: none;
-  }
+  opacity: 1;
 }
 
 .field .grid {
@@ -160,20 +132,7 @@ 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 {
@@ -184,61 +143,25 @@ body {
   height: 100%;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.08;
-  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: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+  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.1) 45%,
-    transparent 55%
-  );
-  background-size: 250% 250%;
-  background-position: 100% 100%;
-  opacity: 0.7;
+  content: none;
 }
 
 .flat {
diff --git a/artifacts/structured-liquidity/src/components/site/Adopt.tsx b/artifacts/structured-liquidity/src/components/site/Adopt.tsx
index 9131e7b..a632121 100644
--- a/artifacts/structured-liquidity/src/components/site/Adopt.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Adopt.tsx
@@ -21,7 +21,8 @@ Rules:
 - 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 neutral translucent surfaces; use it to communicate state and depth, not as a default card treatment.
+- 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.
 - Type: Archivo for headings/buttons/brand and body, IBM Plex Mono for labels and data.
 - Scientific Clarity: communicate meaning with a rational grid, exact alignment, measured line lengths, purposeful whitespace, evidence, and one dominant statement per view.
diff --git a/artifacts/structured-liquidity/src/components/site/Nav.tsx b/artifacts/structured-liquidity/src/components/site/Nav.tsx
index cb238cb..5e99299 100644
--- a/artifacts/structured-liquidity/src/components/site/Nav.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Nav.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useRef } from "react";
 import { Sparkles, Github } from "lucide-react";
 import { Hypercube } from "./liquid";
 import { InstallButton } from "./InstallButton";
@@ -5,36 +6,86 @@ import { InstallButton } from "./InstallButton";
 const GITHUB = "https://github.com/heyinterspace/Structured";
 
 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">
-        <InstallButton
-          className="btn solid nav-cta"
-          style={
-            { "--hard-x": "3px", "--hard-y": "3px" } as React.CSSProperties
-          }
-        />
-        <a
-          className="btn glassy nav-cta"
-          href={GITHUB}
-          target="_blank"
-          rel="noopener"
-          style={
-            { "--hard-x": "3px", "--hard-y": "3px" } as React.CSSProperties
-          }
+      <div
+        className="links"
+        ref={linksRef}
+        onPointerLeave={() => positionMarker(0)}
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) positionMarker(0);
+        }}
+      >
+        <span className="nav-liquid-marker" aria-hidden="true" />
+        <span
+          className="nav-action-slot"
+          onPointerEnter={() => positionMarker(0)}
+          onFocus={() => positionMarker(0)}
+        >
+          <InstallButton className="btn nav-cta" />
+        </span>
+        <span
+          className="nav-action-slot"
+          onPointerEnter={() => positionMarker(1)}
+          onFocus={() => positionMarker(1)}
+        >
+          <a className="btn nav-cta" href={GITHUB} target="_blank" rel="noopener">
+            <Github />
+            Source
+          </a>
+        </span>
+        <span
+          className="nav-action-slot"
+          onPointerEnter={() => positionMarker(2)}
+          onFocus={() => positionMarker(2)}
         >
-          <Github />
-          Source
-        </a>
-        <a className="btn glassy nav-cta" href="#showcase">
-          <Sparkles />
-          Showcase
-        </a>
+          <a className="btn nav-cta" href="#showcase">
+            <Sparkles />
+            Showcase
+          </a>
+        </span>
       </div>
+      <span className="nav-page-progress" aria-hidden="true" />
     </nav>
   );
 }
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx
index 7388f68..8174394 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitFormsInputs.tsx
@@ -124,7 +124,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>
diff --git a/artifacts/structured-liquidity/src/styles/10-tokens-base.css b/artifacts/structured-liquidity/src/styles/10-tokens-base.css
index b6666e9..dec269c 100644
--- a/artifacts/structured-liquidity/src/styles/10-tokens-base.css
+++ b/artifacts/structured-liquidity/src/styles/10-tokens-base.css
@@ -103,10 +103,8 @@ body {
 }
 
 /* ============================================================
-   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 {
@@ -118,39 +116,13 @@ body {
   z-index: -2;
   overflow: hidden;
   pointer-events: none;
-  background:
-    radial-gradient(
-      36vw 26vw at 86% 4%,
-      color-mix(in srgb, var(--accent) 18%, transparent),
-      transparent 72%
-    ),
-    radial-gradient(
-      30vw 24vw at 12% 42%,
-      color-mix(in srgb, var(--accent) 10%, transparent),
-      transparent 74%
-    ),
-    linear-gradient(var(--bg), var(--bg));
-  background-repeat: no-repeat;
-  animation: fieldshift 34s ease-in-out infinite alternate;
+  background: var(--bg);
 }
 [data-mode="light"] .field {
   opacity: 1;
 }
 [data-mode="dark"] .field {
-  opacity: 0.72;
-}
-@keyframes fieldshift {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-3vw);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .field {
-    animation: none;
-  }
+  opacity: 1;
 }
 
 .field .grid {
@@ -160,20 +132,7 @@ 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 {
@@ -184,61 +143,25 @@ body {
   height: 100%;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.08;
-  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: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+  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.1) 45%,
-    transparent 55%
-  );
-  background-size: 250% 250%;
-  background-position: 100% 100%;
-  opacity: 0.7;
+  content: none;
 }
 
 .flat {
diff --git a/artifacts/structured-liquidity/src/styles/20-components.css b/artifacts/structured-liquidity/src/styles/20-components.css
index 4a9bcf9..ec71b6a 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); }
 
@@ -110,18 +103,11 @@
   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);
@@ -257,8 +243,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 +252,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 bf58281..79b0a5d 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); }
@@ -125,8 +123,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); }
@@ -260,9 +257,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); }
diff --git a/artifacts/structured-liquidity/src/styles/40-inline.css b/artifacts/structured-liquidity/src/styles/40-inline.css
index 961a87b..cfebfe2 100644
--- a/artifacts/structured-liquidity/src/styles/40-inline.css
+++ b/artifacts/structured-liquidity/src/styles/40-inline.css
@@ -50,7 +50,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);}
@@ -215,7 +215,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);
@@ -423,10 +423,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;}
@@ -577,7 +577,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
@@ -613,7 +613,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);}
@@ -660,7 +660,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). */
@@ -670,7 +670,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);}
@@ -926,15 +926,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) --- */
@@ -1071,7 +1066,7 @@ body {
   top: 0;
   padding: 0.7rem 0;
   border-width: 0 0 1px;
-  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  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%);
@@ -1085,16 +1080,68 @@ body {
   --s: 38px;
 }
 .nav .links {
-  gap: 0.45rem;
+  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;
-  box-shadow: 3px 3px 0 var(--hard-shadow);
+  color: var(--ink);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  transform: none;
 }
-.nav .links .nav-cta.glassy {
-  background: color-mix(in srgb, var(--bg-2) 84%, transparent);
+.nav .links .nav-cta:hover,
+.nav .links .nav-cta:active {
+  color: var(--ink);
+  background: transparent;
+  box-shadow: none;
+  transform: none;
 }
 
 .hero {
@@ -1242,21 +1289,14 @@ body {
 }
 .pillar-framing {
   background: var(--bg-2);
-  box-shadow: 4px 4px 0 var(--hard-shadow);
-  z-index: 2;
-  transform: translate(-4px, -4px);
+  box-shadow: none;
+  transform: none;
 }
 .pillar-liquid {
-  background: linear-gradient(
-    145deg,
-    color-mix(in srgb, var(--accent) 13%, transparent),
-    rgb(var(--glass-tint) / var(--glass-alpha)) 60%
-  );
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
+  background: var(--bg-2);
 }
 .pillar-clarity {
-  background: transparent;
+  background: var(--bg-2);
 }
 #components .kit-filterbars {
   border-top: 1px solid var(--ink);
@@ -1332,7 +1372,7 @@ body {
   padding: clamp(3rem, 7vw, 6rem);
   text-align: left;
   align-items: flex-start;
-  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
+  background: var(--bg-2);
   box-shadow: none;
 }
 .cta-panel h2 {
@@ -1352,7 +1392,10 @@ body {
   background: color-mix(in srgb, var(--bg) 90%, transparent);
   border-color: color-mix(in srgb, var(--ink) 22%, transparent);
 }
+[data-mode="dark"] .glass,
 [data-mode="dark"] .pillar-framing,
+[data-mode="dark"] .pillar-liquid,
+[data-mode="dark"] .pillar-clarity,
 [data-mode="dark"] #components .kit-grid.gallery .kit-cell,
 [data-mode="dark"] .show-card,
 [data-mode="dark"] .adopt-gallery .kit-cell {
@@ -1413,8 +1456,8 @@ body {
     margin-top: 2rem;
     padding-top: 0;
   }
-  .pillar-framing {
-    transform: none;
+  .nav .links .nav-cta {
+    padding-inline: 0.62rem;
   }
   .cta-panel {
     text-align: left;
diff --git a/docs/design-ethos-v2.md b/docs/design-ethos-v2.md
index 7ae454b..70851fe 100644
--- a/docs/design-ethos-v2.md
+++ b/docs/design-ethos-v2.md
@@ -27,6 +27,8 @@ Scientific Clarity includes the system's quality test: every screen remains comp
 - 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.
+- 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.
 
diff --git a/replit.md b/replit.md
index ccd1ae7..2dde70f 100644
--- a/replit.md
+++ b/replit.md
@@ -1,6 +1,6 @@
 # Structured Liquidity
 
-A live, deployable specimen + landing page for **Structured Liquidity** — **Structured framing. Liquid motion. Scientific clarity.** Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows. Liquid Motion makes system behavior perceptible through neutral translucency, continuity, and purposeful motion. Scientific Clarity communicates meaning through 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. Scientific Clarity includes the quality test that every screen remains complete and useful without color, glass, or motion. The three pillars 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.
+A live, deployable specimen + landing page for **Structured Liquidity** — **Structured framing. Liquid motion. Scientific clarity.** Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, 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; default information surfaces remain flat and gradients are not shorthand for liquidity. Scientific Clarity communicates meaning through 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. Scientific Clarity includes the quality test that every screen remains complete and useful without color, glass, or motion. The three pillars 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