Hero Section

Both header and dock use the "dark" variant here (no target — applies to all).

About Section

No data-midday-section attribute — both bars fall back to their "default" variant.

Accent Section

Only the top header changes to "accent" here. The bottom dock stays default (target="top").

Light Section

No variant specified. Both bars return to default.

Inverted Section

Both bars change to "inverted" — targeting both explicitly (target="top bottom").

Work Section

Back to the default variant again. Scroll up and down to see the transitions.

Bottom-only Dark Section

Only the bottom dock changes to "dark" here. The top header stays default (target="bottom").

Expanded Section

Both bars use "expanded" — the dock variant is taller than its container, with extra height revealed as the section scrolls past.