---
name: remotion-dev-studio-css-reset
description: "Style Remotion Studio UI inside `.css-reset` containers without relying on inherited reset properties."
license: "NOASSERTION"
metadata:
  decimalai-skill-id: "6c02a1ac-947c-4c09-bb0e-01c5d5365eef"
  decimalai-version-id: "f78a54bd-d161-4b1b-9428-614c30f018a7"
  decimalai-version: "2"
  decimalai-body-sha256: "5fdbd84821b17613f1806c0b5da0cde9efe5852bda2270a728053349d7e79ee5"
  decimalai-name: "remotion-dev/studio-css-reset"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/remotion-dev-studio-css-reset@2/SKILL.md"
---
# Studio CSS reset

Studio uses `.css-reset` containers to limit the effect of user styles on its UI. The bundler injects this rule in `packages/bundler/src/setup-environment.ts`:

```css
.css-reset, .css-reset * {
  font-size: 16px;
  line-height: 1.5;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background: transparent;
  box-sizing: border-box;
}
```

The rule applies to each reset container and every descendant, but only to the properties shown. It does not cover elements outside those containers or prevent a stronger user CSS rule from winning.

## Must-follow rule

Do not rely on inheritance for a property in this reset. Each descendant receives its own reset value, so styling a parent alone will not style nested text or SVG shapes. Set the needed value on the element that renders it, or use a CSS selector that explicitly styles that descendant.