Layout behavior lab
Resize the same component and compare how Flexbox, Grid, and container-query ownership handle real content pressure.
Demos
CSS demos and decision tools
Each demo is static, inspectable, and focused on one production behavior.
Use these when a CSS choice is easier to evaluate by changing inputs than by reading another snippet. Each demo pairs with a guide so the visible behavior connects back to a maintainable implementation decision.
Cascade repair lab
Reproduce an override conflict and compare source order, selector escalation, and component-owned state as different fixes.
Responsive typography lab
Compare viewport-driven type with a constrained article component as the same headline moves through narrow and wide slots.