hyperframes/skills/product-launch-video/phases/design-system/style-presets/liquid-glass/preset.md

{
  "name": "liquid-glass",
  "label": "Liquid Glass",
  "fingerprint": {
    "shadow": "inset-highlight",
    "border": "hairline-translucent",
    "motion": "rise-and-settle",
    "density": "low",
    "contrast": "high-on-aurora"
  },
  "match_signals": [
    { "kind": "hairline_border",    "weight": 0.20 },
    { "kind": "minimal_decoration", "weight": 0.15 },
    { "kind": "shadow_zero_blur",   "weight": 0.10 }
  ],
  "requires_capabilities": [
    {
      "kind": "block_installed",
      "block": "liquid-glass-widgets",
      "verify_file": "hyperframes/compositions/liquid-glass-widgets.html",
      "verify_lib": "hyperframes/compositions/lib/liquid-glass.iife.js",
      "auto_install": "npx hyperframes add liquid-glass-widgets",
      "alternates": ["liquid-glass-notification", "liquid-glass-context-menu", "liquid-glass-media-controls", "ios26-liquid-glass", "macos-tahoe-liquid-glass", "vfx-liquid-glass"]
    },
    {
      "kind": "env_var_set",
      "var": "PRODUCER_HEADLESS_SHELL_PATH",
      "reason": "WebGPU-capable browser (Brave / Chrome Canary). Cannot auto-install — varies by OS / user environment.",
      "auto_install": null
    }
  ],
  "best_for": ["premium SaaS", "AI products", "hardware launches", "futuristic tech", "consumer apps with depth"],
  "avoid_for": ["print-feel brands", "low-power render targets", "warm hand-crafted registers"],
  "chromeFonts": {
    "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap",
    "display": "Inter",
    "body": "Inter",
    "script": "Inter",
    "mono": "JetBrains Mono"
  }
}

chromeFonts makes the doc chrome render in the preset's native fonts; brand fonts still apply to §6 components. Liquid-glass is a single-face system: Inter does display + body + script (refuses hand-script — refraction smears thin strokes), JetBrains Mono for metadata.

Liquid-glass auto-infers normally now (its match_signals light up on hairline-border + minimal-decoration sites), but requires_capabilities in the preset-meta gates auto-selection: build-design.mjs sets combined=0

• capabilities_missing=[...] when (a) lib/liquid-glass.iife.js is absent or (b) $PRODUCER_HEADLESS_SHELL_PATH is unset. The design-system subagent auto-runs npx hyperframes add liquid-glass-widgets when liquid-glass wins review and the block is missing; the env var is OS-specific and falls to the user — agent reports it as an anomaly in the completion summary.

§A Director's intent

Frosted glass over moving color. Surfaces are weightless — light passes through them, not off them. Type sits on glass; glass sits on aurora; aurora carries the brand. No element is the canvas; depth is the canvas.

One reading layer at a time. A scene has glass surfaces (panels, pills, cards) floating over an animated color field. The eye reads what's on the glass, not the glass itself. Decoration is reserved for the aurora — the surfaces stay neutral, just specular highlight + edge-light + chromatic fringe at the rim.

Entry motion: soft upward translate + scale 0.86→1.0 with back.out(1.04) — overshoot tiny on purpose. Hard cuts and bouncy springs break the wetness.

§B Decoration tokens (merge into design.html :root)

Wiring contract. The liquid-glass.iife.js shader reads exactly these raw --lg-* properties per panel: --lg-blur, --lg-refraction, --lg-corner-radius, --lg-z-radius, --lg-specular, --lg-fresnel, --lg-edge-highlight, --lg-chrom-aberration, --lg-saturation, --lg-tint, --lg-brightness, --lg-shadow-opacity, --lg-shadow-spread, --lg-shadow-offset-y, --lg-opacity, --lg-distortion, --lg-bevel-mode.

Three archetypes are declared here with archetype-namespaced keys (--lg-widget-*, --lg-notif-*, --lg-menu-*). Each component selects its archetype by aliasing the raw keys, e.g. --lg-blur: var(--lg-widget-blur). Tune a knob here → all panels of that archetype move together. Brand-DNA coupling (e.g. saturation tracking brand vibrancy) goes here too — anchored on --brand-* and resolved once, consumed by every component.

/* Aurora canvas — overwrites brutalism/editorial canvas. */
--liquid-bg-deep: #0a0218; /* mandatory dark base — aurora needs blackpoint */
--liquid-bg-fallback: linear-gradient(160deg, #0a0218 0%, #15082a 60%, #062035 100%);

/* ── Archetype 1: WIDGET ────────────────────────────────────────
   ≤ 280px panels: stat cards, pill chips, small toggles. */
--lg-widget-blur: 0.42;
--lg-widget-refraction: 0.82;
--lg-widget-specular: 0.34;
--lg-widget-fresnel: 1.25;
--lg-widget-edge-highlight: 0.26;
--lg-widget-chrom-aberration: 0.08;
--lg-widget-saturation: 0.38;
--lg-widget-corner-radius: 28;
--lg-widget-z-radius: 46;

/* ── Archetype 2: NOTIFICATION / OVERLAY ────────────────────────
   280-600px floating panels needing cast shadow: toasts, banners,
   media bars, sliders. */
--lg-notif-blur: 0.22;
--lg-notif-refraction: 0.6;
--lg-notif-specular: 0.2;
--lg-notif-fresnel: 0.9;
--lg-notif-edge-highlight: 0.1;
--lg-notif-chrom-aberration: 0.05;
--lg-notif-saturation: 0.25;
--lg-notif-corner-radius: 36;
--lg-notif-z-radius: 38;
--lg-notif-shadow-opacity: 0.35;
--lg-notif-shadow-spread: 14;
--lg-notif-shadow-offset-y: 4;

/* ── Archetype 3: MENU / DENSE CONTENT ──────────────────────────
   ≥ 350px panels with text rows / list / dense UI. Desaturate +
   tint up so near-black ink stays legible on the lightened glass. */
--lg-menu-blur: 0.56;
--lg-menu-refraction: 0.52;
--lg-menu-specular: 0.26;
--lg-menu-fresnel: 1;
--lg-menu-edge-highlight: 0.2;
--lg-menu-chrom-aberration: 0.035;
--lg-menu-saturation: -0.24;
--lg-menu-tint: 0.88;
--lg-menu-brightness: 0.54;
--lg-menu-corner-radius: 30;
--lg-menu-z-radius: 48;

/* Type colors on glass */
--ink-on-glass: rgba(255, 255, 255, 0.96);
--ink-on-glass-soft: rgba(255, 255, 255, 0.74);
--ink-on-light-glass: rgb(0, 7, 14); /* for menu/light-tinted glass */
--text-shadow-glass: 0 2px 12px rgba(0, 0, 0, 0.42);

/* ── Glass-surface rim / highlight palette ──────────────────────
   The text-overlay rim fakes (§H "inner rim" exception) and small
   chrome glyphs read from these white-at-low-alpha + dark-base
   tokens, so every component overlay surface is token-strict and
   moves together if the glass register is re-tuned. NOT the IIFE
   panel itself (that's the shader) — these are the CSS rim/highlight
   layers painted on the transparent .text-overlay above each panel. */
--lg-rim-hi: rgba(255, 255, 255, 0.5); /* brightest inset highlight */
--lg-rim-hi-soft: rgba(255, 255, 255, 0.48);
--lg-rim-mid: rgba(255, 255, 255, 0.36); /* hairline edge / border */
--lg-rim-mid-soft: rgba(255, 255, 255, 0.34);
--lg-rim-edge: rgba(255, 255, 255, 0.18); /* glass-panel hairline border */
--lg-rim-glow: rgba(255, 255, 255, 0.32); /* radial glint / inset highlight */
--lg-rim-lo: rgba(255, 255, 255, 0.28); /* gradient stop / faint edge */
--lg-rim-lo-soft: rgba(255, 255, 255, 0.26);
--lg-rim-track: rgba(255, 255, 255, 0.24); /* slider/sep rail fill */
--lg-rim-faint: rgba(255, 255, 255, 0.16); /* mid gradient stop */
--lg-rim-glint: rgba(255, 255, 255, 0.14); /* toggle-pill base wash */
--lg-rim-ghost: rgba(255, 255, 255, 0.1); /* lowest gradient stop */
--lg-rim-haze: rgba(255, 255, 255, 0.09); /* lower inner bevel */
--lg-rim-mist: rgba(255, 255, 255, 0.08); /* inset under-glow */
--lg-rim-veil: rgba(255, 255, 255, 0.06); /* faintest fill */
--lg-rim-trace: rgba(255, 255, 255, 0.055); /* media-panel base wash */
--lg-rim-dust: rgba(255, 255, 255, 0.04); /* near-zero gradient stop */
--lg-glass-tint-menu: rgba(255, 255, 255, 0.15); /* light-tinted menu panel base */
--lg-glint-white: #fff; /* pure-white glint: slider fill, active toggle text, avatar ink */
--lg-glint-glow: rgba(255, 255, 255, 0.88); /* slider icon stroke */
--lg-glint-halo: rgba(255, 255, 255, 0.5); /* slider-fill glow */
--lg-base-veil: rgba(9, 18, 31, 0.2); /* dark base wash under widget rim */
--lg-base-shadow: rgba(0, 0, 0, 0.24); /* album-art cast shadow */
--lg-base-shadow-deep: rgba(0, 0, 0, 0.32); /* glass-panel cast shadow */
--lg-kbd-ink: rgba(0, 7, 14, 0.82); /* near-black kbd glyph on light glass */
--lg-light-emboss: rgba(255, 255, 255, 0.26); /* light-glass text emboss */

Picking the right archetype. Panel diameter is the deciding factor, not content:

• ≤ 280px (chip, button, small stat, toggle) → widget
• 280-600px floating over content (toast, alert, media-bar, slider) → notification (needs shadow)
• ≥ 350px containing text rows / list / dense UI (menu, popover) → menu (desaturate + tint up)

§D Font pairing fallback (if brand fonts not on Google Fonts)

• display: 'Inter' wght 800 · 'SF Pro Display' (system) · 'Geist'
• body: 'Inter' wght 500-650 · 'Public Sans' · 'DM Sans'
• mono: 'JetBrains Mono' · 'Geist Mono'

Liquid glass is type-on-glass, not type-as-hero. Body weight runs heavier than usual (550-700) because anti-aliasing fights with refraction — thin weights smear. Letterspacing 0 to -0.01em; never tight.

§T Type-role atlas (Phase 4b reads this to size text correctly)

The atlas is the sole authoring source for non-component text. Do NOT invent ad-hoc sizes — weight under 550 at body scale collapses through the IIFE shader. Every role assumes text over glass/aurora: text-shadow: var(--text-shadow-glass) is the default on all legibility-critical roles.

[
  {
    "id": "display-cover",
    "family": "display",
    "purpose": "cover hero on aurora — type sits on glass card or floats directly on the aurora",
    "px_min": 96, "px_max": 180, "weight": 800, "leading": "0.95", "tracking": "-0.01em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-display-cover\">{BRAND_NAME}</div>"
  },
  {
    "id": "headline",
    "family": "display",
    "purpose": "primary slide headline on glass panel",
    "px_min": 56, "px_max": 96, "weight": 700, "leading": "1", "tracking": "-0.01em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-headline\">Design together</div>"
  },
  {
    "id": "statement",
    "family": "display",
    "purpose": "long-form quoted statement on glass — wraps across panels",
    "px_min": 40, "px_max": 64, "weight": 650, "leading": "1.1", "tracking": "0", "case": "sentence",
    "sample_html": "<div class=\"t-trole-statement\">Light passes through. Surfaces stay weightless.</div>"
  },
  {
    "id": "stat-value",
    "family": "display",
    "purpose": "hero numeral inside widget glass card — numbers-as-nouns voice",
    "px_min": 64, "px_max": 120, "weight": 800, "leading": "1", "tracking": "-0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-stat-value\">48ms</div>"
  },
  {
    "id": "h3",
    "family": "display",
    "purpose": "sub-headline / panel title",
    "px_min": 28, "px_max": 44, "weight": 650, "leading": "1.15", "tracking": "0", "case": "sentence",
    "sample_html": "<div class=\"t-trole-h3\">Panel title</div>"
  },
  {
    "id": "lead",
    "family": "body",
    "purpose": "lead paragraph on glass — heavier than usual to survive refraction",
    "px_min": 26, "px_max": 36, "weight": 600, "leading": "1.45", "tracking": "0", "case": "sentence",
    "sample_html": "<p class=\"t-trole-lead\">The lead carries one idea per panel. Heavier weight than usual — refraction softens edges.</p>"
  },
  {
    "id": "label-eyebrow",
    "family": "body",
    "purpose": "uppercase tracked label above a headline (panel eyebrow / section label)",
    "px_min": 24, "px_max": 28, "weight": 650, "leading": "1.2", "tracking": "0.18em", "case": "upper",
    "sample_html": "<div class=\"t-trole-label-eyebrow\">Featured panel</div>"
  },
  {
    "id": "label-mono",
    "family": "mono",
    "purpose": "metadata chrome / slide counter — JetBrains Mono, soft white, wide-tracked caps",
    "px_min": 24, "px_max": 28, "weight": 550, "leading": "1.3", "tracking": "0.06em", "case": "upper",
    "sample_html": "<div class=\"t-trole-label-mono\">01 / Surfaces</div>"
  },
  {
    "id": "pill",
    "family": "body",
    "purpose": "gradient pill chip on glass — brand-primary→secondary fill, white text",
    "px_min": 24, "px_max": 28, "weight": 600, "leading": "1", "tracking": "0.04em", "case": "upper",
    "sample_html": "<div><span class=\"t-trole-pill\">Live now</span></div>"
  },
  {
    "id": "unit-suffix",
    "family": "mono",
    "purpose": "unit appended to a stat-value (ms / GB / %) — sits at ~30-40% of the numeral",
    "px_min": 28, "px_max": 44, "weight": 550, "leading": "1", "tracking": "0", "case": "sentence",
    "sample_html": "<div><span class=\"t-trole-stat-value\">48</span><span class=\"t-trole-unit-suffix\">ms</span></div>"
  }
]

§E Motion (GSAP consts — REPLACES site ease)

const EASE = {
  entry: "back.out(1.04)", // soft overshoot — tiny "settle"
  emphasis: "power3.inOut", // viscous, liquid acceleration
  exit: "power2.in", // sink, don't fly
  drift: "sine.inOut", // ambient float on idle panels
};
const DUR = {
  snap: 0.28,
  med: 0.5,
  slow: 1.1, // aurora cycles use longer than this
};
// RULE: every glass panel entry is a translate + scale, never opacity-only.
// RULE: never crossfade two glass panels — the lower one will look murky.
// RULE: panels are continuous — never "blink in". Move them onstage from off-canvas.

§E.5 Motion choreography

Allowed primitives

• Upward translate from top: 1160px (below frame) → final position with back.out(1.04).
• Scale 0.86 → 1.0 paired with the translate (separate transformOrigin per panel).
• Stagger 100-140ms between sibling panels (widgets), 30-60ms for menu items.
• Aurora time uniform uTime advances linearly over scene duration (driver tween).
• Idle drift on long-held panels: ±6-8px Y, 3-4s sine cycle, very subtle.

Forbidden

• Opacity-only entry. Panels must move; otherwise the refraction reveals no parallax.
• Rotation on glass. (Refraction maths assumes axis-aligned.)
• Crossfade between panels in the same canvas. Stack visually with z-index, not opacity.
• Sharp edges in the aurora — no hard shapes or text on the bg layer. It must stay diffuse so refraction has something to bend.
• Backdrop-filter shortcuts. --lg-blur is not CSS backdrop-filter; it's a uniform read by the IIFE shader. Don't substitute.

Transitions between scenes

Default is a held aurora (uniform shader across scenes) with panels lifting out (top: +=760, ease: power2.in) on the outgoing scene and rising in on the incoming. Aurora carries continuity — never reset uTime between scenes in the same composition.

§G Voice transform recipe (apply to brand's voice from §1 DNA)

Take the brand's product description / value prop. Transform with:

1. Present tense, declarative, no hedging. "Ships in seconds" not "can ship in seconds".
2. Surface > capability. Talk about what the user sees and touches, not what runs underneath. "Tap and hold" beats "leverages the new context API".
3. Numbers as nouns. "Forty-eight milliseconds." (Period.) — not "as fast as 48ms".
4. One verb, one object, one beat per panel. Captions sit on glass; long sentences won't.
5. No exclamation, no all-caps. The medium is dramatic enough.

Example:

• IN: Figma helps teams design products collaboratively in real time
• OUT: Design together. In real time. On glass.

§H Scene composition hints (Phase 4b layout guidance)

Runtime prerequisites — read first

Liquid glass scenes will NOT render in a default Puppeteer/Chrome stable. Before authoring or rendering a liquid-glass composition you must:

1. Install one of the liquid-glass runtime blocks to get lib/liquid-glass.iife.js and the three.js dependencies wired:

   npx hyperframes add liquid-glass-widgets
   # OR pick another:  liquid-glass-notification | liquid-glass-context-menu
   #                   liquid-glass-media-controls | ios26-liquid-glass
   #                   macos-tahoe-liquid-glass    | vfx-liquid-glass
   

   You only need one — they all ship the same lib/liquid-glass.iife.js.

2. Use a WebGPU-capable browser for rendering: Brave or Chrome Canary with WebGPU enabled. Set:

   export PRODUCER_HEADLESS_SHELL_PATH=/path/to/brave-or-canary
   

   The engine auto-passes --enable-unsafe-webgpu. See /hyperframes-animation → adapters/typegpu.md for the full setup.

3. Verify before authoring: npx hyperframes doctor should report webgpu: ok. If it says unsupported, fall back to a different preset — liquid-glass will silently render as blank panels otherwise.

Stage structure

• Every scene starts with the liquid-stage component (§F). The two canvases
  • text-overlay layer are non-negotiable; the IIFE looks for them by id.
• Glass panels go inside #glass-canvas as empty <div class="glass-panel ... liquid-glass">. The liquid-glass class is the IIFE hook — without it the panel won't be picked up. Don't put text inside the glass div — text lives in a sibling .text-overlay div absolutely positioned to overlap the panel.
• The text-overlay div itself MUST stay transparent (no background, no border, no box-shadow). The glass card visuals come from the IIFE pass underneath; the overlay only carries text + small icons + gradient pills. Adding a background to the overlay creates a visible rectangle that breaks the illusion the moment IIFE renders. (The .stat-text / .showcase-text inset highlights in §F are an intentional exception — they fake the inner rim of the glass card itself, not the body.)

Aurora shader — copy verbatim from registry

The Three.js aurora shader is byte-identical across all 8 registry liquid-glass blocks. Do not let an LLM rewrite it. When authoring a scene:

1. Copy the entire <script> block (vs string + fs string + Three.js renderer/scene/camera/uniforms/quad setup + the requestGlassRender / lg.waitForInit() block) from: registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html lines 485-601.
2. Keep uTime driven by your GSAP timeline (tl.eventCallback("onUpdate", () => requestGlassRender(tl.time()))) — already wired in the source.
3. The vec3 base = mix(vec3(0.10, 0.02, 0.22), vec3(0.04, 0.10, 0.25), …) line is the only place to retint the aurora toward a brand color — replace those two vec3 stops with desaturated versions of --brand-primary / --brand-secondary if you want brand-tinted aurora. Don't touch the snoise functions or the ridge math.

Density & focus

• 2-4 glass surfaces per scene maximum. More than that and the refraction passes start to mush each other.
• Surfaces don't overlap. A small chip next to a card is fine; a chip on a card produces a refraction double-bounce that reads as broken.
• Brand color lives in the aurora and the accent strokes, not the glass tint. Glass stays neutral (white at low opacity). To bring brand color forward, push the aurora warm/cool stops toward --brand-primary / --brand-secondary in the shader — don't paint the glass.

Typography on glass

• Body weight ≥ 550. Thinner reads as smudge through the refraction.
• Always include text-shadow: var(--text-shadow-glass) on labels — the glass refracts and softens edges, the shadow restores legibility.
• Min text size 14px, ideally 16-22px. Anything smaller disappears.
• For light-tinted glass (menu archetype): use --ink-on-light-glass (near-black with a subtle white text-shadow). The IIFE shader inverts the perceived contrast on menu panels.

Color discipline

• Canvas is the aurora, not a flat fill. Never set body { background: var(--canvas); } in a liquid-glass scene — the canvas variable is overridden to the deep base purple that the aurora needs as a blackpoint.
• Brand accent appears as: aurora hot zone tint, pill dots, button gradients, album-art conic gradients. Never as a glass panel fill.

Atmosphere

• Transitions between scenes: hold the aurora across scenes (single composition-wide uTime driver). Panels slide off the bottom on scene N, rise from the bottom on scene N+1. The aurora doesn't blink.

§I Page-level CSS (makes design.html itself read as liquid glass)

/* ── Preset-native typography vars (chromeFonts). Single-face system: Inter does
 * display/body/script (refraction smears thin-stroke scripts), JetBrains Mono
 * for metadata. */
:root {
  --f-disp-native:
    "Inter", "SF Pro Display", "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-body-native:
    "Inter", "Public Sans", "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-script-native:
    "Inter", "Public Sans", "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono-native:
    "JetBrains Mono", "Geist Mono", "IBM Plex Mono", "Menlo", ui-monospace, monospace;
}

/* .preset-native-scope: rebinds var(--font-*) to preset-native families for
 * component previews + §T atlas. Component source is untouched. */
.preset-native-scope {
  --font-display: var(--f-disp-native);
  --font-body: var(--f-body-native);
  --font-script: var(--f-script-native);
  --font-mono: var(--f-mono-native);
}

body {
  background:
    radial-gradient(
      ellipse 90% 60% at 22% 28%,
      color-mix(in oklab, var(--brand-primary) 60%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 60% at 82% 78%,
      color-mix(in oklab, var(--brand-secondary) 50%, transparent),
      transparent 60%
    ),
    linear-gradient(160deg, #0a0218 0%, #15082a 60%, #062035 100%) !important;
  background-attachment: fixed !important;
  color: rgba(255, 255, 255, 0.94) !important;
}

.title-card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.title-display {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}

.ds-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

/* Frosted swatches + frosted component cards for preview legibility */
.dna-swatch {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

.comp-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 48px rgba(0, 0, 0, 0.4) !important;
}
.comp-head {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.comp-name,
.comp-marker {
  color: rgba(255, 255, 255, 0.92);
}
.comp-preview {
  background: linear-gradient(160deg, #0a0218 0%, #15082a 60%, #062035 100%) !important;
}

.type-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.ds-code {
  background: rgba(7, 10, 18, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-pair {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

h2 {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* ── §T Type-role atlas. var(--font-*) → brand DNA; text-shadow-glass legibility
 * decoration is preset-declared. */
.ds-trole-box {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  margin-top: 24px;
}
.ds-trole-row {
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ds-trole-row:last-child {
  border-bottom: 0;
}
.ds-trole-sample {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 960px) {
  .ds-trole-row {
    padding: 24px;
  }
}

/* ── Type-role samples. var(--font-*) → brand DNA at render time. */
.t-trole-display-cover {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(96px, 12vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}
.t-trole-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: var(--text-shadow-glass);
}
.t-trole-statement {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: var(--text-shadow-glass);
  max-width: 26ch;
}
.t-trole-stat-value {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: var(--text-shadow-glass);
}
.t-trole-h3 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: var(--text-shadow-glass);
}
.t-trole-lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: var(--text-shadow-glass);
  max-width: 44ch;
  margin: 0;
}
.t-trole-label-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 650;
  font-size: clamp(24px, 1.6vw, 28px);
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: var(--text-shadow-glass);
}
.t-trole-label-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 550;
  font-size: clamp(24px, 1.6vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}
.t-trole-pill {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
  color: rgba(255, 255, 255, 0.98);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(24px, 1.6vw, 28px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 22px rgba(0, 0, 0, 0.3);
}
.t-trole-unit-suffix {
  font-family: var(--font-mono);
  font-weight: 550;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 0.18em;
}