Timeline

One settings page. Scrub the slider and watch it move through design history. Pick a different palette and the shapes stay put while every colour changes.

What is actually changing

The slider sets one attribute, data-era, on the wrapper element. The palette select sets another, data-palette. Every token is a CSS custom property scoped to those attributes, so the morph is the browser resolving different variables, not React rendering different components.

This is also why the dialog in the danger zone tab keeps its era: it renders back into that same wrapper rather than into document.body, where the variables would not reach it.