# Give the interface your style

Your project can theme the artwork's surrounding interface. Use ordinary CSS selectors so the same visual language reaches navigation, information and artwork controls.

## Where styles come from

The wizard posts its CSS to the code page with the `style.immutables.art` tag. The current client also serves mirrored `style.css` and `style.mobile.css` files per project for reliable loading. A live reader can fall back to page posts; an archive reader uses its cached styles. Coordinate publication of a separate mobile stylesheet with the platform rather than assuming a second wizard field exists.

Project styles are scoped to `#root`. Root selectors such as `body`, `html` and `:root` are mapped into that scope. Some platform or administration panels intentionally live outside it; do not assume project CSS should recolor every wallet or administrative flow.

## Start with the existing classes

```css
body { background: #000; color: #fff; }
.navbar { background: #000 !important; }
.btn, .form-control { border-radius: 0; }
.font-display { font-family: 'Major Mono Display', monospace; }
.artwork-controls .modal-content { background: #000; color: #fff; }
.artwork-controls .btn { color: #fff; border-color: #777; }
.artwork-control[aria-pressed="true"] { background: #333; }
.artwork-controls { --artwork-controls-gap: 8px; }
```

This is an example, not a required palette. Test selected, unselected, focused and disabled buttons. A theme can override the UI font too; keep body copy and small controls readable even if the artwork uses a distinctive display face.

## Layout and phones

Style `.cell` and `.selected` carefully. A mask or transform intended for the artwork should not hide its owner caption or interfere with taps. The control panel is a portal inside `#root`, outside the transformed artwork cell; use its documented classes instead of assuming it is nested inside a canvas wrapper.

Preserve 44-pixel touch targets and a visible focus indicator. Keep native input text at least 16 pixels on mobile, allow the on-screen keyboard room, and avoid fixed widths that overflow a narrow screen. The default controls already handle keyboard viewport changes and safe areas.

Do not override `.is-idle` in a way that leaves invisible buttons intercepting touches. The faint icon should become clear on hover or keyboard focus. Respect `prefers-reduced-motion` for interface effects.

## Preserve the visual dependencies

A remote font or CSS import is a dependency, even when the art source is on Ethereum. Choose a usable fallback and include external assets in your preservation plan. Use the full UI preview, a phone-sized viewport, a reload and a downloaded copy to test your styling.

Source basis: `scopeCss`, `projectAssets`, `ArtworkControls.css` and the wizard's CSS posting flow.