Four declarations and thirty-six custom properties, all on `.text-formatted` itself. The measure is the one to know: `max-width: 65ch` is set on the block, so the class does not only style what is inside it, it sizes the element it is on. Every frame on this page is as wide as it is because of that one declaration. The colour is the only thing the theme overrides -- `libraries/global/base/typography.formatted.css` redefines `--un-prose-body` as `var(--color-content)` and `--un-prose-bullets` as `var(--list-bullet-color)`, and wins because `base.css` is aggregated after `unocss.css`. The rest of that file is commented out.

`h1` to `h4` are styled and `h5` and `h6` are not -- the preset has no rule for either, so they arrive at whatever the browser and the rest of the theme leave them at, which is why the two at the bottom of this sample are smaller than the body text above them. Sizes are in `em`, so a heading is sized against the block rather than against the root, and the `strong` and `code` inside a heading are handled separately at every level: `strong` takes the weight up one step and both drop their own colour back to `inherit` so they do not fight the heading colour.

One element and one class. `lead` is the only class the preset styles, and it is matched as `[class~="lead"]` rather than as an element, so it can go on anything -- the sample puts it on a paragraph because that is what it is for. Note that its margins are 1.2em of its own 1.25em font size, which is 1.5rem, wider than the 1.25em of an ordinary paragraph.

The backticks around inline code are the thing to know here: the preset puts them there with `content: "`"` on `::before` and `::after`, so a `code` element in a body of text renders with a pair of literal backticks around it that are in no field anybody edited. They are suppressed inside `pre` and nowhere else. `kbd` is styled but its shadow is not painted -- see the last section but two for why. `em` has no rule at all, so its italic is the browser's.

The preset restates `list-style-type` on `ol` and `ul`, which matters because `presetWind4`'s reset -- which would have removed the markers -- is switched off in `uno.config.js`, so these are re-declaring what the browser already did. What is not restated is the nesting: the browser alternates disc, circle and square on its own and the preset does not touch it, so a nested list keeps the marker the browser gives it. The nine `ol[type]` rules are the interesting part, because CKEditor writes that attribute when an author picks a numbering style, and they come in pairs -- one case-insensitive, one with the `s` flag -- so that `type="a"` and `type="A"` stay distinguishable. Markers are coloured through `::marker`, and `--un-prose-bullets` is the second of the two properties the theme overrides.

A blockquote is given a `quotes` value and then two pseudo-elements that spend it: `open-quote` before the first paragraph and `close-quote` after the last. So a quotation renders with curly quotation marks around it that are not in the content, and a blockquote holding two paragraphs gets one pair around the whole thing rather than a pair each -- which is what `:first-of-type` and `:last-of-type` are for. The border is on the inline start edge, so it moves to the right in a right-to-left language on its own.

`pre` is the only element the preset gives a background to, and it is a dark one whatever the rest of the page is doing: `--un-prose-pre-bg` is a fixed slate, so a code block is dark on a light page by design rather than by accident. Everything the inline `code` rule did is then undone on `pre code` -- the size, the weight, the colour, the padding, the background and both backticks -- so that a `code` inside a `pre` is a plain run of text and the block around it carries the styling. This is the pairing `basic_pages` shows with Prism's `language-*` classes on it; here it is the bare form.

Nineteen of the seventy-odd rules are about tables, and the shape they describe is a table with no vertical rules and no outer border: a line under the head, a line under each body row except the last, a line over the foot, and nothing else. The horizontal padding is dropped on the first and last cell of every row, so the text of the first column lines up with the paragraph above the table rather than being indented by a cell. Note `text-align: start` rather than `left`, which is the pattern through the whole preset -- every directional property here is logical. This is also the section where the theme disagrees most: `elements.css` gives every `table`, `th` and `td` a solid border, and the preset has no rule to take it away.

Media gets margins and nothing else -- no width, no border, no radius. The rule worth understanding is the pair `figure` and `figure > *`: the figure takes the 2em above and below, and then every child of it is zeroed, so an image inside a figure does not add its own 2em to the figure's and the caption sits against the image rather than a line below it. `picture > img` is the same trick one level down. There is no `max-width` on an image anywhere in the preset; what keeps the one below inside its frame is the theme's `img { max-width: 100% }` in `elements.css`. The video has no source, so what it shows is its poster -- which is all that is needed to see the margins.

`hr + *`, `h2 + *`, `h3 + *` and `h4 + *` all zero the top margin of whatever follows, which is how a heading comes to own the space under it rather than sharing it with the paragraph below. It is worth reading as one rule with four subjects, because it is the only place in the preset where the spacing of an element depends on what precedes it. The `hr` itself is the clearest case on this page of the theme winning: the preset asks for a 1px top border in the hr colour, and `elements.css` has `hr { @apply bg-black h-1 m-y-8 border-none }` -- `border-none` sets `border-style: none`, so the border the preset draws is never painted and what you see is the theme's 4px black bar, with the preset's 3em margins because those do win on specificity.

Every descendant rule in the stylesheet ends in `:not(:where([class~="not-text-formatted"], [class~="not-text-formatted"] *))`. It is generated from the preset's default, which is the selector name with `not-` in front of it, and its effect is that a subtree marked with that class is dropped out of the prose styling entirely -- itself and everything under it. That is the supported way to put a piece of built markup, a rendered entity or a component, inside a body of formatted text without the prose rules reaching into it. Nothing has to be added to the theme to use it: the class is already in every selector. Note that it is written as `:where()` inside the `:not()`, so it costs no specificity and adding it changes nothing about what overrides what.

Thirty-six properties, all defined on `.text-formatted` itself, and the whole colour scheme of the stylesheet passes through them -- no rule above names a colour directly. Each is defined twice, once plainly and once with an `invert-` prefix, and the inverted half is what `text-formatted-invert` would switch to on a dark ground. That class is not generated in this build, so the second column here is the only place those values are visible. Two of the plain values are overridden by the theme and are shown as the theme sets them; the rest are the preset's defaults, which are Tailwind's grays.

Three things in the built stylesheet are inert, and none of them fails loudly. The first is the group of rules the preset keys with a leading child combinator -- `> :first-child`, `> :last-child`, `> ul > li p` and the four `> ol|ul > li > p:first-child|last-child` -- which come out of the build as `:where()` with an empty selector list. An empty forgiving selector list matches nothing, so the rules are in the file and never apply. The visible consequence is the one that matters most: the first child of a block of formatted text is meant to lose its top margin and the last child its bottom margin, and here neither does, so every `.text-formatted` block carries a margin inside its own box. All seven of those rules collapse onto the same empty selector, so only the last two survive the merge at all. The second is the `kbd` shadow: `--un-prose-kbd-shadows` is a hex colour and the rule spends it as `rgb(var(--un-prose-kbd-shadows) / 10%)`, which is not valid syntax, so the whole `box-shadow` declaration is dropped and a `kbd` renders with its padding and radius but no ring. The third is a matter of scale rather than of breakage: the preset can emit `sm`, `lg`, `xl` and `2xl` sizes and an inverted scheme, but UnoCSS only generates a class something asks for, `content.filesystem` in `uno.config.js` scans Twig and CSS and not PHP, and no Twig template names any of them -- so the base size is the entire stylesheet. A page that wanted `text-formatted-lg` would have to put it in `libraries/global/utilities/safelist.txt` and rebuild the theme.

Nothing above renders in isolation. `libraries/global/base/elements.css` styles the same elements as bare tags, and the arithmetic is always the same: a generated rule is `.text-formatted :where(…)`, one class and no more, because `:where()` costs nothing -- so it beats a bare element selector on every property both of them set, and leaves every property only the element rule sets alone. That is why a code block here has the preset's colours and the theme's `display: block`, and why an `hr` has the preset's margins and the theme's black bar. Worth checking against this list before adding a rule to either file, because a declaration added to `elements.css` for an element in this stylesheet will not reach formatted text.