Mount the studio styling

A class of your own on the editor's root element.

Merged with nothing (this root carries no class of the package's own), so it simply lands. What it is FOR is the case the host's className cannot reach: the editor is one child of the host, and a layout that sizes the editor differently from the chrome beside it has to name the editor.

A styling hatch, which a surface takes when a host places it itself, as apiShape.test.tsx records.

Inline style on the editor's root element, merged OVER the layout this surface needs.

ElementStyle rather than React's CSSProperties, so style={{ "--mtya-accent": "#7048e8" }} type-checks: that spelling is the documented theming seam and CSSProperties refuses it.

The root's own height: 100dvh and position: relative are written first and a value here wins, which is deliberate: an editor embedded in a panel rather than filling a window has to be able to say style={{ height: "100%" }}, which the root's own values would otherwise refuse from outside.

A class of your own on the viewer's root element.

The viewer is mounted OUTSIDE MountayaStudioHost (on a share page, inside an iframe), so the host's own className is not available to it and this is the only way to reach the element. Merged with nothing, because this root carries no class of the package's own.

A styling hatch, which a surface takes when a host places it itself, as apiShape.test.tsx records.

Inline style on the viewer's root element, merged OVER the layout this surface needs.

ElementStyle rather than React's CSSProperties, so style={{ "--mtya-accent": "#7048e8" }} type-checks: the documented theming spelling, which CSSProperties refuses.

The root's own full-height layout is written first and a value here wins, which is the case this prop exists for: an embed in a fixed-aspect iframe is the COMMON viewer and 100dvh is the wrong height for it.