What the Style drawer does

The Style drawer is a visual CSS editor on the left of the playground canvas. You pick (or click in the preview) an element, twiddle a small set of named controls, and the drawer writes the matching rule straight into your CSS file — same file your hand-written CSS and AI-generated CSS live in. There is no parallel store; the drawer is just a friendlier surface on top of plain CSS.

Opening it

Click the Style icon in the left rail of the editor. The canvas shrinks to make room. Only one left drawer (Style, Behaviors, or AI assistant) can be open at a time — opening Style closes the others automatically.

Picking an element

From Inspect. Toggle Inspect (in the bottom drawer's Inspect tab) and click any element in the preview. The Style drawer focuses on that element's generated selector, and if no rule already targets it the drawer offers "Create rule for <selector>".
From the dropdown. Open the Style drawer without Inspect and pick any selector that already appears in your CSS from the dropdown.
Multiple rules. If several rules target the same selector (e.g. a base rule plus an @media override), they appear as chips so you can edit each one.

Whichever element is active in the drawer is outlined in the preview as "this is what you're editing".

The eight visual controls

Phase 1 of the Style drawer covers the most common visual edits:

Background colour
Text colour
Padding
Margin
Border radius
Font size
Text alignment
Font weight

Anything not in the list — gradients, transforms, animations, grid templates, etc. — should be authored in the CSS code tab or asked of the AI assistant.

Breakpoints

The drawer has three breakpoint tabs:

Desktop — base styles, no @media wrapper.
Tablet — wraps the rule in @media (max-width: 1024px).
Mobile — wraps the rule in @media (max-width: 640px).

Tablet and Mobile show greyed inherited values from Desktop so it's obvious which properties are overridden at that breakpoint and which are inherited.

How writes land in your CSS

When you change a value, the drawer patches the matching rule in your live CSS source (creating the rule, and an @media wrapper if needed, when one doesn't already exist). The iframe re-renders immediately, the editor's "Save" button glows, and clicking Save persists the new CSS to the server. The patch path is the same one used by the AI assistant and by hand-editing in the Code tab — there is one source of truth.

Tips

Give an element a stable id or unique class before styling it heavily; the Inspect-generated tag:nth-of-type(...) selectors are fine for small edits but fragile if the DOM changes around them.
The drawer doesn't try to round-trip every existing CSS rule — if your CSS is highly compressed or uses CSS variables it's safer to inspect the property in the Code tab.
The device-picker (Desktop / Tablet / Mobile) at the top of the Preview only resizes the canvas; it does not change which breakpoint the Style drawer writes into. Pick the breakpoint tab inside the drawer explicitly.

Visual styles (Style drawer)