DARK

Dark ground.
Glass over grey.

Default state: the dark pill over a dark page. Scroll down to drag the glass across white, saturated color, and pure black. URL params: ?nav3theme=light for the light navigation, ?nav3active=/features to simulate the active page (dots on Product and Rules).

Open the Product and AI panels on every section: the panel shares the pill glass and must stay readable on all of them.

WHITE
sticky probe: pins at var(--nav-height)

White noise.
Worst case for glass.

A light busy background under the dark pill is the hardest legibility case. The dot grid gives the blur fine detail to chew on; the blobs push saturated color right under the pill edge.

The black chip above is position: sticky with top: var(--nav-height) - it must stop right under the pill on desktop (6.5em) and 12px under the mobile pill (5.5em), same as production sticky blocks.

COLORS

Full saturation.

Vivid tiles under the glass: check how saturate(0.8) and brightness(1.15) treat loud color, and whether text on the pill keeps contrast.

BLACK

Pure black.

Thin light stripes on black: the opposite extreme. The pill fill must stay visible as a shape, not dissolve into the page.