CSS experiments should teach the grammar, not only show decoration.

This route tunes three low-level axes that can travel to the rest of the site: contour profile, stroke profile, and field resonance. The settings are browser-local and persist after you leave the lab, so you can tune here, then inspect the same atmosphere on the website design route or the broader website field guide.

@ "css_bundle_register"

Choose A Baseline, Then Refine

The bundle buttons set a coherent starting point. The chips below them let you separate contour, stroke, wonder carryover, and field reach so the grammar becomes inspectable instead of magical.

contour: Balanced stroke: Structural field: Field memory: Connected

Contour Profile

Corner families and blur depth. This changes how components feel cut, braced, or softened.

Stroke Profile

Line width, annotation weight, and the severity of structural seams.

Field Resonance

How widely the page's local attention field echoes when operators are hovered, focused, or remembered.

Wonder Carryover

This uses the site's existing wonder-memory setting so the tuned field can remain nearby or travel route-to-route.

These controls save locally and remain active on later routes.

^ "css_specimens"

Watch The Same Variables Touch Multiple Surface Types

The point is not a single pretty card. The same grammar should shape panels, annotations, chips, separators, and hover-field behavior together.

#> surface specimen

Primary card

Contour profile changes the cut of the card. Stroke profile changes the felt seriousness of the border. Field resonance changes how strongly matching operators glow back at you.

Annotation rail

The rail and divider are useful because they expose boundary weight faster than a hero card does.

#>website #>surface ? boundary ? contour ~ diagram ~ carryover

Read contour first

If contour changes feel unclear, ignore color and look only at corner cut, blur edge, and seam softness.

Then read stroke

Stroke shows up in dividers, annotation rails, SVG paths, and border insistence. It should feel structural, not merely thicker.

Then read field

Hover matching chips and compare how far the resonance spreads. That is the field, not just decoration.

? "css_token_register"

Current Token Register

These are live computed values from the document root, not hard-coded copy. They update when the experiment settings change.

`--shape-component`

Small control and chip radius.

5px

`--shape-surface`

Frame and panel radius.

8px

`--line-mid`

Primary structural divider weight.

1.5px

`--material-blur`

Shared blur depth for glass-like surfaces.

6px

`--attention-field-radius`

How broad operator resonance feels.

0.4

`--spw-wonder-memory-reach`

How much wonder memory spills into the rest of the site.

0.54