🧩 Native CSS nesting — write nested, watch it flatten

Edit the nested CSS on the left. Watch & expand differently depending on what follows it — live, in both the flattened CSS and a genuinely rendered card.

1 Nested CSS — edit me

Type here. Every keystroke re-flattens the CSS below and re-renders the card at the bottom — nothing is precomputed.

2 What each form expands to

Pick a form above to see exactly what it compiles to, highlighted on the right.

3 Compiled / flattened CSS

This is a plain-text illustration of what the browser resolves internally — it is not what runs the preview below.

4 Live preview — real browser nesting, not a simulation
Parsed OK — updated live.

The card above renders inside a real sandboxed page using your exact nested CSS — the browser is doing the parsing, nothing here is faked. Toggle the viewport width to trigger the nested @media query.