diff --git a/.changeset/plenty-donkeys-shake.md b/.changeset/plenty-donkeys-shake.md
new file mode 100644
index 00000000..17a137de
--- /dev/null
+++ b/.changeset/plenty-donkeys-shake.md
@@ -0,0 +1,75 @@
+---
+'@youversion/platform-core': major
+'@youversion/platform-react-hooks': major
+'@youversion/platform-react-ui': major
+---
+
+Scope all SDK CSS to `data-yv-sdk` subtrees, so the global CSS of a host app
+cannot change SDK components.
+
+Every SDK selector now carries the gate
+`:is([data-yv-sdk], [data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *)))`.
+The stylesheet then ships in two halves: everything on a property exemption list
+stays unlayered and normal, and every other declaration goes into a cascade layer
+named `yv` and carries `!important`. `theme.css` also declares the inherited
+properties (`font`, `color`, `box-sizing`, `margin`, `padding`, `border`) on SDK
+roots and on their descendants. A gate on a selector does not stop inheritance
+from consumer DOM.
+
+**What this corrects.** A host reset such as `* { box-sizing: content-box }`, a
+bare `button { padding: 1rem }`, Tailwind Preflight, a `body { font-family;
+color; line-height }` block, `button { padding: 2rem !important }` and
+`#app button { padding: 1rem }` all changed the appearance of SDK components
+before. None of them change it now. A regression harness in
+`packages/ui/src/components/style-isolation.stories.tsx` measures every component
+against seven host-CSS fixtures and asserts zero leaks on all of them.
+
+**Your own content inside an SDK component keeps your styling.** Content you
+pass as `children` or as a render prop is wrapped in an element marked
+`data-yv-slot`, and no SDK rule matches inside it. Inheritance still applies:
+your content inherits `color`, `font-size` and the rest from where it sits.
+`BibleReader.Root` children and a picker `Trigger` rendered with `asChild` do
+not get the wrapper — add `data-yv-slot` to your own element there.
+
+**Your root font size no longer scales SDK components.** A host page with
+`html { font-size: 62.5% }` used to shrink every SDK size by 37.5 percent,
+because a `rem` resolves against the document root and no selector or layer can
+stop that. The build now converts every `rem` in the sheet to `px` at
+1rem = 16px, and the SDK root declares `font-size: 16px`. The trade-off is that
+SDK text no longer grows with a reader's raised browser default font size.
+Browser zoom is unaffected. To scale the SDK on purpose, override
+`[data-yv-sdk] { font-size }` — it stays outside the layer for that reason — or
+pass a component's `fontSize` prop.
+
+**What breaks.** Any consumer CSS that overrides an SDK declaration.
+
+- Rules that target SDK internals (our class names, `data-slot` values or DOM
+  structure) now lose the cascade. SDK rules gained specificity: the gate adds
+  `0,1,0` on its own, on top of whatever the rule already had.
+- Rules that depend on inheritance into SDK components now lose. The SDK declares
+  those properties itself.
+- **Rules that use `!important` now lose too.** For important declarations the
+  cascade reverses layer order and ranks unlayered CSS last, so a declaration in
+  `@layer yv` beats an unlayered important one at any specificity. This was the
+  documented escape hatch in earlier previews of this release. It is gone.
+
+**What you can still change.** A short property list stays outside the layer,
+because our popovers and animations set it at runtime: `position`,
+`top`/`right`/`bottom`/`left`, `inset-*`, `z-index`, `min-width`, `visibility`,
+`pointer-events`, `transform` and the rest of the transform pipeline, `opacity`,
+`height`, `filter`, every `animation-*` and `transition-*`, `font-size`,
+`background-color`, `border-*` and their shorthands, and every `--*` custom
+property.
+
+**How to migrate.** Replace each consumer CSS override with a supported path:
+
+1. Set `--yv-*` design tokens on `[data-yv-sdk]`.
+2. Use the `theme` prop on `YouVersionProvider`, or the `background` prop on a
+   component.
+3. Open an issue if neither path covers your case.
+
+For the rationale and the rejected alternatives (`@scope` and shadow DOM), read
+`docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md`,
+`docs/adr/0006-layer-and-importantize-the-sdk-sheet.md`,
+`docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md` and
+`docs/adr/0008-stop-sdk-css-at-consumer-slots.md`.
diff --git a/docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md b/docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md
new file mode 100644
index 00000000..f6288d08
--- /dev/null
+++ b/docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md
@@ -0,0 +1,299 @@
+# 5. Scope SDK CSS to `[data-yv-sdk]` subtrees instead of cascade layers
+
+Date: 2026-08-06
+
+## Status
+
+Accepted. This decision replaces the cascade-layer strategy from `bcfb868`
+(v1.20.0).
+
+Amended 2026-08-07 by
+[ADR-0006](0006-layer-and-importantize-the-sdk-sheet.md). The
+`:is([data-yv-sdk], [data-yv-sdk] *)` gate below is unchanged and still carries
+the outbound guarantee. Two statements below are superseded: the sheet is no
+longer in no layer, and a consumer `!important` rule no longer reaches our
+components. ADR-0006 has the cascade math and the property exemption list. The
+sections marked **Superseded** name what changed.
+
+Amended again 2026-08-07 by
+[ADR-0008](0008-stop-sdk-css-at-consumer-slots.md). The gate's descendant arm is
+now `[data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *))`, so SDK CSS
+stops at consumer content the SDK only passed through. The gate still adds
+0,1,0: the exclusion sits inside `:where()`, which contributes nothing, so every
+specificity claim below still holds. Every literal gate string below is the
+pre-0008 form. Read it as an outline of the mechanism, not as the shipped
+selector.
+
+## Context
+
+A partner puts `BibleTextView` into their app. Their `button { padding: 1rem }`
+changes the shape of our version picker trigger. Their
+`body { font-family: Comic Sans }` changes our verse text. The partner sees a
+broken Bible experience and has no supported way to correct it. Ticket YPE-4113
+covers this problem.
+
+### This decision changed three times before
+
+| Date | Commit | Version | Position |
+| --- | --- | --- | --- |
+| 2026-01-09 | `8e3a672` | 0.10.1 | Added `scripts/strip-layers.js`. SDK CSS in no layer. |
+| 2026-01-13 | `694325f` | 1.6.2 | "Opt out of CSS layers." Deleted `strip-layers.js`. |
+| 2026-03-09 | `bcfb868` | 1.20.0 | Used layers again, written into `global.css` source. |
+
+Only the changelog records the last change. This ADR exists to prevent a fourth
+change by accident.
+
+### Why cascade layers cannot work
+
+`global.css:33` declared nine layers and put every SDK rule into a `yv-sdk-*`
+layer. CSS Cascade 5 [§6.1](https://www.w3.org/TR/css-cascade-5/#cascade-sort)
+states two facts. A declaration that is in no layer joins an implicit final
+layer. The browser compares layer order **before** specificity.
+[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) says it plainly:
+"Styles that are not defined in a layer always override styles declared in named
+and anonymous layers."
+
+A consumer `button {}` rule in no layer, at 0,0,1, thus overrides every `yv:`
+utility at any specificity. This was not a fault in the layer setup. The layer
+setup worked as designed. `bcfb868` chose layers on purpose, to stop SDK styles
+from overriding consumer CSS. The same choice guaranteed the leak in the other
+direction.
+
+### Two channels for a leak, not one
+
+| Channel | Example | Why it overrides the SDK rule |
+| --- | --- | --- |
+| Direct match | `button { padding: 1rem }` matches our button | CSS in no layer overrides layered CSS at any specificity |
+| Inheritance | `body { color: green }` flows into our text | The SDK declares no `color`, so the value is inherited |
+
+The second channel is independent of the cascade. An inherited value applies
+where the element declares nothing. Specificity and layer order do not change
+this. Only a declaration changes it.
+
+## Decision
+
+### 1. SDK CSS in no layer, with a `[data-yv-sdk]` gate on every selector
+
+> **Superseded in part by ADR-0006.** The gate stands. "In no layer" now holds
+> only for the exempt half of the sheet. Everything else ships in `@layer yv`
+> and is `!important`. The reasoning below — that a layered *normal* declaration
+> loses to unlayered consumer CSS — is correct, and it is why ADR-0006 splits
+> the sheet by property instead of layering all of it.
+
+Do not protect the consumer with cascade order. Protect the consumer with the
+DOM subtree.
+
+```css
+/* before */
+.yv\:mt-4 { margin-top: 1rem }
+
+/* after */
+:is([data-yv-sdk], [data-yv-sdk] *).yv\:mt-4 { margin-top: 1rem }
+```
+
+`:is()` takes the specificity of its most specific argument, so the gate adds
+exactly 0,1,0. The compound form matches the marked root and its descendants in
+one selector.
+
+This corrects both directions at the same time:
+
+- **Outbound.** SDK CSS cannot match DOM that the SDK did not render. This is a
+  structural guarantee, not a bet on cascade order. It is stronger than the
+  protection that layers gave the consumer.
+- **Inbound.** Inside an SDK subtree, every SDK rule is at 0,1,0 or more. It thus
+  overrides a consumer element selector at 0,0,1 and a universal selector at
+  0,0,0.
+
+The rewrite runs after the Tailwind build, in
+`packages/ui/scripts/scope-selectors.mjs`. Tailwind v4 has no equivalent
+function. `prefix(yv)` only renames classes. `@import "tailwindcss" important`
+takes no selector argument. The v3 option `important: '#app'` has no v4
+replacement. Adam Wathan says that a selector around the import works "mostly by
+coincidence"
+([discussion #13779](https://github.com/tailwindlabs/tailwindcss/discussions/13779)).
+It also breaks: after the nesting is flattened it emits `[data-yv-sdk] :root`,
+which can never match.
+
+The script uses Lightning CSS, not a regular expression and not
+`postcss-prefix-selector`. Its `Selector` visitor is a typed structural API, so
+it cannot corrupt an escaped class name such as `.yv\:mt-4`. `@keyframes`,
+`@font-face` and `@property` produce no `Selector` nodes, so the script skips
+them by construction. The script also flattens CSS nesting. Flattening is
+necessary because `bible-reader.css` and `@utility touch-hitbox` emit nested `&`
+rules, which a simple prefixer corrupts. We tested `postcss-prefix-selector@2.1.1`
+against the real output of this repo and rejected it. It rewrites `:host` into
+`[data-yv-sdk] :host`, which can never match, and thus removes every theme
+variable without a warning.
+
+`:root` and `:host` keep no gate. Those rules declare only `--yv-*` custom
+properties. They render nothing and cannot collide.
+
+The script parses its own output again and fails the build on any selector
+without a gate. That check is the guarantee, not a comment and not a string
+match. `scripts/verify-styles.js` adds two more checks. `dist/index.js` must
+contain `:is([data-yv-sdk],[data-yv-sdk] *)`, and it must not contain
+`@layer yv-sdk-`. The second check names the `yv-sdk-` prefix on purpose.
+Tailwind emits `@layer properties` by itself for the `@property` fallback,
+whatever our directives say.
+
+### 2. Declare the inherited properties, and close the holes that the gate cannot reach
+
+The gate increases specificity. It does nothing about a property that the SDK
+never declares. Three changes to `packages/core/src/styles/theme.css` close that
+class of hole:
+
+1. **Remove the `:where()`.** The reset block was `:where([data-yv-sdk])` at
+   0,0,0, which a bare `button {}` overrides. It is now `[data-yv-sdk]`.
+2. **Declare the inherited set on the SDK root**: `font-family`, `color`,
+   `letter-spacing`, `word-spacing`, `text-align`, `text-transform`,
+   `text-indent`, `white-space`, `text-shadow`, `font-variant`. Every element
+   with `data-yv-sdk` declares the full set again, so portalled surfaces that
+   inherit directly from `document.body` are covered too. `direction` is not in
+   the set: `bible-reader.css` controls RTL, and `text-align: start` follows the
+   direction.
+3. **Add `color: inherit` to the descendant block, and the box model to the
+   root.** The harness found these two, not the plan. `color` on the root stops
+   `body { color: … }`, because that value arrives only by inheritance. It does
+   nothing about `ul { color: #f0f }`, which matches an SDK element directly. The
+   descendant block is `[data-yv-sdk] *`, which does not match the marked
+   element. A consumer `* { box-sizing: content-box }` rule does match it.
+
+We considered `revert-layer` and rejected it. CSS Cascade 5 §7 returns a property
+to the layer below, or to the previous origin when no layer is below. For an
+inherited property the UA origin declares nothing. The returned value is thus the
+inherited value, which is the consumer `body` rule. `revert-layer` removes rules
+that target our elements. It does not stop inherited values.
+
+### 3. `@scope` rejected, without a test
+
+`@scope` limits the rules written inside it. It does not block inbound styles.
+[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope) is explicit:
+"while `@scope` allows you to isolate the application of selectors to specific DOM
+subtrees, it does not completely isolate the applied styles to within those
+subtrees. This is most noticeable with inheritance. Properties that are inherited
+by children (for example `color` or `font-family`) will still be inherited,
+beyond any set scope limit."
+
+[CSS Cascade 6 §2.5.3](https://www.w3.org/TR/css-cascade-6/#scope-nesting)
+limits only the selectors in the block. A stylesheet elsewhere in the document
+can still match elements inside a scoped subtree. Scope proximity is a cascade
+criterion below specificity, so it cannot decide a comparison that the gate does
+not decide already.
+
+`@scope` gives what `:is([data-yv-sdk], [data-yv-sdk] *)` gives already, without
+the specificity. It also adds a dependency with Baseline status "newly available"
+(December 2025). There is nothing to test.
+
+### 4. Shadow DOM not adopted. The condition, fixed before the numbers existed
+
+> **Still not adopted, and the condition is now moot.** ADR-0006 closed the
+> `!important` residual as well, so there is no measured residual of either
+> kind. The costs table below is unchanged and still applies.
+
+**If the residual leak includes rules that do not use `!important`, recommend
+shadow DOM. If it does not, do not recommend shadow DOM.**
+
+A consumer who writes `!important` against our elements makes an explicit choice.
+We treat that choice as out of contract. The design discussion recorded this
+condition before the harness produced one number. The recommendation thus cannot
+be adjusted to fit the answer.
+
+**Measured result: 100 percent of the residual uses `!important`.**
+`docs/style-isolation-residual-leak.md` has the numbers. Four of the five consumer CSS
+groups report zero leaks on all thirteen consumer-host stories. The remaining
+leaks come from two consumer declarations. Both use `!important` and both target
+`button`: 880 leaks on 155 buttons in 8 components. No rule without `!important`
+gets through.
+
+The condition is not met. We do not adopt shadow DOM.
+
+Shadow DOM has these costs, all found during the research:
+
+| Cost | Evidence |
+| --- | --- |
+| Radix portals mount to `document.body`, outside the shadow root | `popover.tsx:43`, `dialog.tsx:28`. No `container` prop anywhere in the repo |
+| Radix `FocusScope` breaks at the boundary. `document.activeElement` returns the host | [radix-ui/primitives#3353](https://github.com/radix-ui/primitives/issues/3353), open |
+| `aria-hidden` hides open dropdown content from the accessibility tree | [radix-ui/primitives#1772](https://github.com/radix-ui/primitives/issues/1772), open |
+| Dismissable-layer outside-click reads `event.target` as the host | [radix-ui/primitives#2433](https://github.com/radix-ui/primitives/pull/2433), open, "Needs Investigation" |
+| Font and color values still cross the boundary by inheritance | [MDN, "Using shadow DOM"](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). Top-level shadow elements inherit from the host |
+| React 19 `<style precedence>` hoisting inside a shadow root is undocumented | No React document covers it. `facebook/react#21728` is a type change only |
+| Tailwind v4 does not target shadow DOM | Tailwind Labs, [discussion #15556](https://github.com/tailwindlabs/tailwindcss/discussions/15556): "Shadow dom has other issues around `@property` which we rely on in v4" |
+| Layer order is per encapsulation context | CSS Cascade 5 [§6.4.3](https://www.w3.org/TR/css-cascade-5/#layer-ordering) |
+| Theming moves per root | Tokens are declared on `[data-yv-sdk]` and stamped again per portal today |
+
+Compare the third row with the fifth. Shadow DOM does not close the inheritance
+channel either. It blocks selector matching, not inheritance, so `theme.css`
+still needs every declaration in decision 2.
+
+### 5. No consumer opt-out
+
+`YouVersionProvider` has no `styleIsolation` prop. Customization is `--yv-*`
+design tokens plus component props, which is what YPE-4113 decided.
+
+An opt-out returns the ambiguity that this ADR closes. It also doubles the
+surface we test and keeps the leaky path available forever. `<YvStyles />` and
+`<YvFonts />` have no opt-out either. ADR-0004 records the same choice for the
+same reason. We can add a prop later without a breaking change, if a real partner
+reports a real break.
+
+## Consequences
+
+- **Every exported component now renders as designed under consumer global CSS.**
+  Thirteen consumer-host stories in
+  `packages/ui/src/components/style-isolation.stories.tsx` measure 32 computed
+  properties on every element of the subtree. They fail CI if the leak returns.
+
+- **This is a breaking change, and it ships as a major version.** Token overrides
+  continue to work. A consumer `[data-yv-sdk] { --yv-primary: … }` rule has the
+  same 0,1,0 specificity as our token block and wins on source order.
+  `ConsumerTokenOverrideStillApplies` asserts this. What breaks is consumer CSS
+  that overrides an SDK *declaration*. We never supported it, but it has worked
+  since `bcfb868`, and someone depends on it.
+
+- **`dist/tailwind.css` is 15.7 percent larger raw and 3.2 percent larger
+  gzipped**: 97,402 bytes to 112,665, and 13,369 gzipped to 13,800. The gate is
+  one 33-character string in 462 places, so gzip removes almost all of it.
+  Selector count, `@property` count and `@keyframes` count are the same before
+  and after, so no rule was lost.
+
+- **The build chain has one more step.** `build:css` now writes
+  `.cache/tailwind.raw.css`, and `build:css:scope` rewrites that file into
+  `dist/tailwind.css`. Tailwind output without the gate never reaches `dist/`,
+  which is what we publish. `dev` and `storybook` run the scope script with
+  `--watch`, next to the Tailwind watcher.
+
+- **A component without `data-yv-sdk` now loses all of its styling.** The
+  attribute changed from a scoping convenience into a requirement.
+  `packages/ui/src/components/scope-attribute.test.tsx` renders every export and
+  fails on a missing attribute. It also fails on an export that it does not list,
+  so a new component cannot pass unnoticed.
+
+- **Every stamp must name a theme, and the theme must be the theme of the
+  enclosing scope.** `theme.css` declares the light tokens on the bare
+  `[data-yv-sdk]` selector, with dark as a nested override. An element that gets
+  `data-yv-sdk` inside a dark scope declares the light tokens on itself again and
+  returns to light.
+
+- **`ui/button.tsx` has no stamp, on purpose.** `Button` has no local theme in
+  scope. `useTheme()` returns the provider theme, and `BibleReader.Root` resolves
+  its own theme from `background`. An audit of all 31 call sites is a separate
+  change. `Button` is safe without a stamp. It is not exported, and it always
+  sits inside a stamped ancestor, which the descendant arm of the gate covers.
+
+- **Specificity inside the SDK increased uniformly.** All 642 utility rules
+  gained the same 0,1,0, so the relative order among utilities is unchanged.
+  Hand-written rules in `global.css` and `bible-reader.css` did move relative to
+  the utilities. The integration suite is the only check on that, and it covers
+  computed properties rather than visual fidelity.
+
+- ~~**A consumer `!important` rule still reaches our components.**~~ True when
+  this ADR was written, and closed by
+  [ADR-0006](0006-layer-and-importantize-the-sdk-sheet.md) on 2026-08-07. The
+  measurement that made the case is in this repo's history;
+  `docs/style-isolation-residual-leak.md` now records the two residuals that
+  remain.
+
+- **A reversal is not a small change.** To restore layers, restore three things:
+  the `@layer` declaration, the five `layer(...)` modifiers, and the `:where()`
+  in `theme.css`. Then delete the scope script and its build step. The 13
+  consumer-host stories fail first, which is why we keep them.
diff --git a/docs/adr/0006-layer-and-importantize-the-sdk-sheet.md b/docs/adr/0006-layer-and-importantize-the-sdk-sheet.md
new file mode 100644
index 00000000..e7aeda57
--- /dev/null
+++ b/docs/adr/0006-layer-and-importantize-the-sdk-sheet.md
@@ -0,0 +1,227 @@
+# 6. Put the SDK sheet in `@layer yv` and mark it `!important`, minus an exemption list
+
+Date: 2026-08-07
+
+## Status
+
+Accepted. This decision extends
+[ADR-0005](0005-scope-sdk-css-to-data-yv-sdk-subtrees.md). The
+`:is([data-yv-sdk], [data-yv-sdk] *)` gate from that decision is unchanged here.
+
+Amended 2026-08-07 by
+[ADR-0008](0008-stop-sdk-css-at-consumer-slots.md), which added a slot exclusion
+to the gate's descendant arm. Every gate literal below is the pre-0008 form. The
+split into a layered important half and an unlayered normal half is unchanged,
+and so is every specificity number below: 0008 puts its exclusion inside
+`:where()`, which costs nothing. That placement is a consequence of this
+decision. The exempt half is normal, so its rank against consumer CSS is decided
+by specificity alone, and a gate that gained 0,1,0 would have moved it up.
+ADR-0008 has the measurement that made the call.
+
+## Context
+
+ADR-0005 gated every SDK selector and shipped the sheet in no cascade layer.
+That closed every leak the harness measured except one. A consumer rule with
+`!important` still reached our components:
+
+```css
+button { padding: 2rem !important }        /* reached 155 buttons */
+button { border-radius: 0 !important }     /* reached 65 of those 155 */
+```
+
+ADR-0005 called this out of contract. `docs/style-isolation-residual-leak.md`
+measured 880 leaks and recommended against shadow DOM on that basis.
+
+### What changed: the cascade math was wrong
+
+The residual-leak report said no light-DOM technique corrects an `!important`
+leak, because "a consumer `!important` rule still ties and wins on source order,
+because their sheet loads after ours". That is true for two *unlayered*
+important declarations. It is false once one of them is in a layer.
+
+[CSS Cascade 5 §6.1](https://www.w3.org/TR/css-cascade-5/#cascade-sort) sorts
+declarations by origin-and-importance first, then by cascade layer, then by
+specificity, then by order of appearance. §6.4.4 states the layer rule:
+
+> Cascade layers … are sorted by order of declaration … **for normal rules**,
+> and in **reverse order of declaration** for important rules … declarations
+> not in any layer act as if they were in a final anonymous layer.
+
+Read the two together and a consequence falls out that neither ADR-0005 nor the
+leak report used:
+
+| Both declarations are | Layer order | Winner |
+| --- | --- | --- |
+| normal | low to high, unlayered last | the **unlayered** one |
+| important | high to low, unlayered last | the **layered** one |
+
+A declaration inside `@layer yv` and marked `!important` therefore beats an
+unlayered `!important` consumer rule. Specificity never enters the comparison,
+because the layer decides it first. This was checked in a browser on 2026-08-07
+before the implementation started, and the integration harness re-checks it in
+Chromium on every run.
+
+The same fact closes the high-specificity case for free. Importance is sorted
+above specificity, so `#app button { padding: 1rem }` at 1,0,1 loses to a
+layered important declaration at 0,2,0.
+
+### Why blanket importantization is still wrong
+
+Three hazards, all in the same specification:
+
+1. **An author `!important` declaration outranks the inline `style` attribute.**
+   Radix positions poppers and dialogs with an inline `style`: `position`,
+   `left`, `top`, `transform`, `min-width`, `z-index`, `visibility`. An
+   important declaration of any of those pins the popover wherever our utility
+   class put it.
+2. **An important *cascaded* declaration outranks the CSS animation origin.**
+   Cascade origin order runs UA normal, user normal, author normal, animations,
+   author important. An important `opacity` therefore holds every fade at its
+   declared value. The animation still runs; it just has no effect.
+3. **`!important` inside a `@keyframes` body is invalid CSS and is ignored.**
+   Keyframe bodies must never be touched.
+
+### Why the layer cannot hold the whole sheet
+
+An exempt declaration cannot be important, by definition. A *normal* declaration
+inside `@layer yv` loses to ordinary unlayered consumer CSS at any specificity —
+which is the exact failure mode ADR-0005 was written to escape.
+
+This is measured, not reasoned. Wrapping the whole sheet in the layer and
+importantizing everything except the exemption list ran the harness at
+**14 failed, 522 passed**. Every failure came from the `preflight` group and
+from exactly four property families: `font-size` (56 leaks), `line-height` (56,
+derived from `font-size`), and the four `border-*-width` (16 each). Those are
+precisely the exempt properties, demoted below plain Tailwind Preflight by the
+layer that was supposed to protect them.
+
+## Decision
+
+### 1. Split every rule by property into two halves
+
+`packages/ui/scripts/scope-selectors.mjs` now emits the sheet twice over:
+
+```css
+@layer yv;                                    /* declared first, before @import */
+:is([data-yv-sdk],[data-yv-sdk] *).card{position:absolute}          /* exempt, normal */
+@layer yv{
+  :is([data-yv-sdk],[data-yv-sdk] *).card{color:red!important}      /* the rest */
+}
+```
+
+- **Unlayered and normal**: every property in `EXEMPT_PROPERTIES`. This is
+  exactly the cascade position those declarations had before this change, so no
+  exempt property regresses.
+- **`@layer yv` and `!important`**: everything else.
+
+The two halves hold disjoint property sets, so they never compete with each
+other. The split costs nothing in the SDK's own internal cascade.
+
+The bare `@layer yv;` statement comes first, ahead of the `@import`s. It fixes
+the layer's position in the order. Only `@charset` and a bare `@layer` statement
+may precede `@import`.
+
+Tailwind's own `@layer properties` block — which it emits for the `@property`
+fallback whatever our directives say — is entirely `--tw-*` custom properties,
+and custom properties are exempt as a family. The block therefore lands whole in
+the unlayered half, with the shape and the cascade position Tailwind shipped. We
+do not nest it inside `yv`.
+
+### 2. The exemption list
+
+Every entry is a property that something outside this stylesheet must be able to
+set. Nothing is on the list because it feels risky. Two rules keep it honest: a
+shorthand is exempt when any of its longhands is exempt, and the build fails
+when a `@keyframes` in this sheet animates a property that is not on the list.
+
+| Family | Properties | Who sets it, and what breaks |
+| --- | --- | --- |
+| 1. Animated by a `@keyframes` in this sheet | `opacity`, `transform`, `height`, `filter` | `tw-animate-css` spin/pulse, the Radix enter/exit set, accordion-down/up. Important, the animation runs with no visible effect |
+| 2. Composes with `transform` | `translate`, `scale`, `rotate`, `transform-origin`, `transform-style`, `transform-box`, `perspective`, `perspective-origin`, `backface-visibility`, `will-change` | Importantizing half the transform pipeline while the animated half stays normal gives a transform that is right in neither state |
+| 3. Animation and transition controls | all `animation-*` and `animation`; all `transition-*` and `transition` | Radix `Presence` writes `animation-fill-mode` inline to hold an exit frame while it measures. Important, the element unmounts mid-exit |
+| 4. Written inline by Radix or floating-ui | `position`, `top`, `right`, `bottom`, `left`, all `inset-*`, `z-index`, `min-width`, `visibility`, `pointer-events` | The Radix Popper wrapper positions poppers and dialogs with an inline `style`. `DismissableLayer` and the Dialog overlay write `pointer-events`. Important, the popover pins to the top-left of the viewport |
+| 5. Written inline by an SDK component | `font-size`; `background-color`; all `border-*-width`, `border-*-color`, `border-*-style` | Preflight and `theme.css` compile *into* this sheet and declare these on bare elements. Important, this sheet beats our own components: `font-size` (verse.tsx, bible-reader.tsx, bible-version-picker.tsx), `background-color` and `border` (the highlight swatch in verse-action-popover.tsx), `border-color` and `border-width` (YouVersionAuthButton) |
+| Shorthands | `font`, `background`, `border`, `border-top/right/bottom/left`, `border-block*`, `border-inline*`, `all` | Each holds at least one exempt longhand. `border` in particular arrives as Preflight's `border: 0 solid` on every element; important, it erases the highlight swatch's inline border |
+| Custom properties | every `--*` name | A consumer `[data-yv-sdk] { --yv-primary: … }` override must keep winning. `ConsumerTokenOverrideStillApplies` asserts it |
+
+An author-written `!important` already in the source keeps whichever half its
+property belongs to. `yv:h-6!` in verse-of-the-day.tsx is the only one in the
+sheet today; it stays unlayered, exactly where it was.
+
+### 3. Text surgery, not a Lightning CSS visitor
+
+The `!important` pass is a string rewrite of Lightning CSS's *printed* output,
+not a `Declaration` visitor. This is forced, not preferred.
+
+**Lightning CSS 1.31.1 cannot round-trip any declaration whose value contains
+`var()` through the JS visitor API.** Returning such a node throws
+`failed to deserialize; expected an object-like struct named Specifier, found ()`.
+Mutating the node in place is silently ignored. `Declaration` and
+`DeclarationExit` fail identically. Reproduced with `.a { --x: var(--y) }`,
+`.a { color: var(--y) }` and `.a { --tw-shadow: 0 0 #0000; box-shadow:
+var(--tw-shadow) }`; `--x: red`, `color: oklch(…)`, `url(…)` and `font-family`
+all succeed. Read-only visitors that return `undefined` are unaffected, which is
+why the `Selector` gate from ADR-0005 keeps using one.
+
+Safety comes from re-parsing the finished text with Lightning CSS. `verifyOutput`
+fails the build on any of:
+
+- a selector without the gate (ADR-0005's check, unchanged);
+- a non-exempt declaration that is not `!important`;
+- an exempt declaration that is `!important`, unless it was important in the
+  source;
+- any `!important` inside a `@keyframes` body;
+- a `@keyframes` that animates a property missing from the exemption list;
+- a structural layer fault: more than one `@layer yv` block, or a block that is
+  not last.
+
+A corrupted rewrite does not reach these checks at all — it throws in the
+parser. That is how the `@import` bug below was caught.
+
+`scripts/verify-styles.js` adds the shipped-artifact check: `dist/index.js` must
+contain `@layer yv{`, must contain the gate, and must not contain
+`@layer yv-sdk-`.
+
+## Consequences
+
+- **A consumer `!important` rule no longer reaches our components.** All six
+  consumer-CSS groups now report zero leaks on all fifteen components. The
+  `important` group went from 944 leaks to 0. The new `highSpecificity` group
+  (`#yv-consumer-host-root button { padding: 1.5rem; margin: 1.25rem;
+  border-radius: 0 }`) went from 1,570 leaks to 0. Both "before" figures are the
+  fifteen-story harness run against the ADR-0005 sheet; the 880 in the old
+  residual-leak report was the same `important` group over thirteen stories. The
+  run after this change is 43 files, 541 tests, all passed.
+
+- **ADR-0005's shadow-DOM condition is now moot, and the answer is unchanged.**
+  That condition was: recommend shadow DOM if the residual includes rules
+  *without* `!important`. It never did, and now the `!important` rules are gone
+  too. Do not adopt shadow DOM.
+
+- **The migration message to consumers changed.** ADR-0005 told partners that
+  `!important` still overrides us. It no longer does.
+  `packages/ui/README.md` and the changeset say so. The supported paths are
+  unchanged: `--yv-*` tokens, the `theme` and `background` props, or an issue.
+
+- **Two residuals remain, both deliberate.** A consumer rule that is
+  `!important` *and* sits in a layer they declared before `yv` still wins — a
+  consumer who writes that has opted in. And every exempt property keeps its
+  pre-change cascade position, which is the price of a working popover and a
+  working animation. `docs/style-isolation-residual-leak.md` has both.
+
+- **`dist/tailwind.css` is 13.7 percent larger raw and 6.1 percent larger
+  gzipped**: 112,665 bytes to 128,093, and 13,800 gzipped to 14,639. The cost is
+  841 `!important` tokens plus the rules that appear in both halves.
+
+- **Nothing in `packages/core/src/styles/theme.css` changed.** Its declarations
+  are compiled into this sheet and are importantized by the same pass, so the
+  reset now beats a consumer `!important` too.
+
+- **`--minify` output is the shipped output, and only it is asserted.** The
+  pretty-printed path is a dev convenience for `--watch`. Its whitespace is not
+  pinned by any test.
+
+- **A reversal is one function.** Delete `splitByImportance`, restore
+  `assembleSheet` to a pass-through, and drop the two new checks in
+  `verifyOutput`. The `important` and `highSpecificity` harness groups fail
+  first, which is why they assert rather than record.
diff --git a/docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md b/docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md
new file mode 100644
index 00000000..7bc46ed6
--- /dev/null
+++ b/docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md
@@ -0,0 +1,238 @@
+# 7. Convert every `rem` in the SDK sheet to `px`, and anchor the root font size
+
+Date: 2026-08-07
+
+## Status
+
+Accepted. This decision extends
+[ADR-0005](0005-scope-sdk-css-to-data-yv-sdk-subtrees.md) and
+[ADR-0006](0006-layer-and-importantize-the-sdk-sheet.md). The
+`:is([data-yv-sdk], [data-yv-sdk] *)` gate and the layered-important split are
+both unchanged here.
+
+Amended 2026-08-07 by
+[ADR-0008](0008-stop-sdk-css-at-consumer-slots.md), which added a slot exclusion
+to the gate's descendant arm. The rem-to-px conversion is unchanged. The root
+`font-size: 16px` on `[data-yv-sdk]` is unchanged, and it still reaches consumer
+slot content, because it reaches it by inheritance rather than by matching.
+
+## Context
+
+ADR-0006 closed the last cascade leak. The harness then reported zero leaks on
+all fifteen components across all six consumer-CSS groups.
+
+One channel was never measured, because it is not in the cascade.
+
+A `rem` resolves against the **document root element**. A host page that writes
+`html { font-size: 62.5% }` makes `1rem` equal `10px` for the whole document.
+Tailwind v4 emits `rem` for nearly all spacing and typography, so every size the
+SDK ships shrinks by 37.5 percent. No selector reaches that. No cascade layer
+reaches it. `!important` does not reach it either. The leak is in the unit, not
+in the cascade.
+
+The 62.5 percent rule is not a hostile edge case. It is a common authoring
+trick: it lets a developer write `1.6rem` and mean 16px.
+
+### Measurement
+
+A seventh harness group, `remRebase`, injects exactly `html { font-size: 62.5% }`
+and nothing else.
+
+The fixture is checked before the numbers are trusted. The harness injects into
+`document.head`, so the story asserts
+`getComputedStyle(document.documentElement).fontSize === '10px'`. It reads
+`10px`, so the rule reaches the document root in the test environment.
+
+Against the ADR-0006 sheet, the group leaked **2,098 computed-style
+differences** across the fifteen stories:
+
+| Story | Leaks | Story | Leaks |
+| --- | --- | --- | --- |
+| BibleChapterPicker | 1,044 | FootnoteContent | 35 |
+| BibleVersionPicker | 408 | BibleVersionPickerLanguageTrigger | 20 |
+| BibleReader | 119 | BibleTextView | 13 |
+| BibleLanguagePickerContent | 117 | Textarea | 10 |
+| VerseOfTheDay | 87 | ProfileAvatar | 4 |
+| BibleCard | 69 | Separator | 2 |
+| VerseActionPopover | 66 | | |
+| BibleThemeSettingsContent | 62 | | |
+| YouVersionAuthButton | 42 | | |
+
+The other six groups stayed at zero, so this is a new channel and not a
+regression of an old one.
+
+### The alternative that was proposed, and what it measured
+
+The handoff for this work suggested a different fix: declare an explicit
+`font-size` on the `[data-yv-sdk]` root and stop there.
+
+That was measured on its own, on a single throwaway story, before any code
+changed:
+
+| Sheet under test | Leaks |
+| --- | --- |
+| `remRebase` alone | 120 |
+| `remRebase` + `[data-yv-sdk] { font-size: 16px }` | 110 |
+
+It removes 10 of 120, or 8.3 percent. The reason is the one the specification
+gives: a `rem` resolves against the document root element and never against an
+ancestor. Declaring a font size on our own root cannot change what a `rem`
+inside our sheet means.
+
+What the 10 are is still worth knowing. They are `font-size` on five elements
+and the `line-height` those five derive from it. Those elements had no
+`font-size` of their own and inherited the consumer's `body` value.
+`packages/core/src/styles/theme.css` declares `font-family`, `line-height`,
+`color`, `letter-spacing` and the rest of the inherited text properties on the
+SDK root — but not `font-size`.
+
+So the alternative is not a rival to the rem rebase. It is the smaller half of
+the same fix, and it addresses a second channel: inheritance. The two together
+are the decision below.
+
+## Decision
+
+### 1. Convert every `rem` length in the sheet to `px` at 1rem = 16px
+
+`packages/ui/scripts/scope-selectors.mjs` gains a pass between the selector gate
+and the print:
+
+```js
+const ROOT_FONT_SIZE_PX = 16;
+
+function rebaseLength(length) {
+  if (length.unit !== 'rem') return undefined;
+  return { unit: 'px', value: length.value * ROOT_FONT_SIZE_PX };
+}
+```
+
+16, because that is the browser default. Every shipped size therefore keeps the
+pixel value it had on an unmodified host page. Nothing looks different where
+nothing was wrong.
+
+**A Lightning CSS `Length` visitor, not a text pass.** A text replace of `rem`
+would corrupt the sheet. `dist/tailwind.css` holds the string `rem` inside
+escaped class names that Tailwind generates from arbitrary values —
+`.yv\:text-\[0\.5rem\]`, `.yv\:w-\[11\.875rem\]`,
+`.yv\:min-w-\[calc\(0\.25rem\*4\*2\+3ch\)\]` — and inside `.rem`, a real class
+that `bible-reader.css` declares. Those are names, not lengths, and they are
+correct as they are.
+
+The `Length` visitor is also safe to use, unlike the `Declaration` visitor.
+ADR-0006 records that Lightning CSS 1.31.1 cannot round-trip a declaration whose
+value contains `var()`. `Length` is a different node type and does not hit that
+bug. It was verified by hand on 1.31.1 to convert a `rem` in a declaration
+value, a custom property value, a `calc()` operand, a `var()` fallback, a media
+query condition, a `@keyframes` frame and a `max()` argument, while leaving
+selectors untouched.
+
+Four places deserve their reasoning written down:
+
+- **Custom properties.** Converted. `--yv-radius: 2rem` becomes `32px`. Miss
+  these and the rebase means little, because the theme ships its sizes as
+  tokens and the utilities read them through `var()`.
+- **`calc()` and `var()` fallbacks.** Converted. `calc(100vw - 2rem)` becomes
+  `calc(100vw - 32px)`. A `rem` inside an expression resolves the same way a
+  bare one does.
+- **Media queries.** Converted, and safe for a *different* reason.
+  [Media Queries Level 4 §1.3](https://www.w3.org/TR/mediaqueries-4/#units)
+  resolves a relative unit in a query against the **initial** value of
+  `font-size`, not the root element's computed value. A host
+  `html { font-size: 62.5% }` therefore never moved our breakpoints. Converting
+  `40rem` to `640px` is exact at browser defaults and changes nothing there. It
+  is not exact for a reader who raised the browser's own default font size; see
+  the trade-off below.
+- **`@keyframes`.** Converted. A frame is a declaration list and a `rem` in it
+  resolves like any other.
+
+### 2. The SDK root declares its own font size
+
+`packages/ui/src/styles/global.css` adds:
+
+```css
+[data-yv-sdk] {
+  font-size: 16px;
+}
+```
+
+This closes the inheritance channel that the rem rebase cannot see: an element
+with no `font-size` of its own, inheriting the consumer's `body` value.
+
+`font-size` is on `EXEMPT_PROPERTIES` (ADR-0006, family 5), so the declaration
+stays unlayered and normal at 0,1,0. A consumer can still override it. That is
+deliberate, and it is the accessibility escape hatch named below.
+
+It goes in the UI package's `global.css` and not in
+`packages/core/src/styles/theme.css`, which was out of scope for this change.
+`global.css` compiles into the same sheet, so the effect is identical.
+
+### 3. Inline `rem` in component source is converted too
+
+An inline `style` never passes through `scope-selectors.mjs`, so the build
+cannot reach it. Three literals existed and are now `px`:
+
+- `verse.tsx`, the footnote verse-context block: `1.25rem` to `20px`.
+- `YouVersionAuthButton.tsx`, twice, the rectangular variant:
+  `--yv-radius: 0.65rem` to `10.4px`.
+
+The first one is what the harness caught after the build fix landed:
+FootnoteContent still leaked four values, at exactly 62.5 percent.
+
+### 4. The build fails if a `rem` survives
+
+`verifyOutput` re-parses its own output with a read-only `Length` visitor and
+pushes a problem for every `rem` it still finds. This is the sixth check in that
+function and it runs on every build.
+
+The guard is symmetric with the rebase pass: both read the lengths the parser
+produces, so no input makes it fire while the pass is in place. What it catches
+is the pass being removed, reordered or broken by a Lightning CSS upgrade.
+
+## Consequences
+
+- **`remRebase` went from 2,098 leaks to 0**, on all fifteen components. The
+  other six groups are unchanged at 0. The full run is 43 files, 548 tests, all
+  passed.
+
+- **The SDK no longer responds to a raised browser default font size.** This is
+  a real accessibility cost and it is the point of the trade-off, not an
+  oversight. A reader who sets their browser's default text size to "Large" used
+  to see larger SDK text, because Tailwind's `rem` sizes tracked it. They no
+  longer do.
+
+  What still works:
+
+  - **Browser zoom.** Ctrl-plus and Ctrl-minus scale `px` exactly as they scale
+    `rem`. This is how most readers enlarge a page, and it is unaffected.
+  - **A consumer override.** `[data-yv-sdk] { font-size: 1.25rem }` in the host
+    sheet raises the root anchor, and it wins, because our declaration is
+    unlayered and normal at 0,1,0. The sheet's own `px` sizes do not follow it,
+    but text that inherits does.
+  - **`--yv-*` tokens.** A consumer can raise any size token the theme exposes.
+  - **Component props.** `BibleReader` and the reader components take a
+    `fontSize` prop and honor it.
+
+  This is the trade-off a browser-extension UI accepts to stay isolated from a
+  page it does not control. We chose predictable rendering in every host over
+  automatic response to one accessibility setting, and we kept an explicit
+  opt-in for consumers who want the latter.
+
+- **Breakpoints stop tracking the browser default too.** By the Media Queries
+  Level 4 rule above, `40rem` was already immune to a host
+  `html { font-size }`. It was *not* immune to the reader's own browser default,
+  which is what "initial value" means. After the conversion, `640px` is fixed.
+  A reader on a raised default now crosses our breakpoints at the same viewport
+  width as everyone else.
+
+- **`dist/tailwind.css` is 8 bytes smaller raw and 22 bytes larger gzipped**:
+  128,093 to 128,085, and 14,639 to 14,661. `4px` and `.25rem` are the same
+  length; the gzip difference is noise in the dictionary.
+
+- **New `rem` can still enter through an inline style.** The build guard reads
+  the sheet, and an inline `style` is not in it. Write `px` in a `style` prop.
+  The harness is the backstop: a `rem` there shows up as a `remRebase` leak.
+
+- **A reversal is one function and one rule.** Delete `rebaseLength` and its
+  pass, delete the `Length` visitor in `verifyOutput`, and delete the
+  `[data-yv-sdk] { font-size }` block. The `remRebase` harness group fails
+  first, which is why it asserts rather than records.
diff --git a/docs/adr/0008-stop-sdk-css-at-consumer-slots.md b/docs/adr/0008-stop-sdk-css-at-consumer-slots.md
new file mode 100644
index 00000000..44c20dac
--- /dev/null
+++ b/docs/adr/0008-stop-sdk-css-at-consumer-slots.md
@@ -0,0 +1,185 @@
+# 8. Stop SDK CSS at consumer slots
+
+Date: 2026-08-07
+
+## Status
+
+Accepted. This decision changes the gate from
+[ADR-0005](0005-scope-sdk-css-to-data-yv-sdk-subtrees.md). The layered-important
+split of [ADR-0006](0006-layer-and-importantize-the-sdk-sheet.md) and the
+rem-to-px conversion of [ADR-0007](0007-convert-rem-to-px-in-the-sdk-sheet.md)
+are both unchanged.
+
+## Context
+
+ADR-0005 gated every SDK selector on `[data-yv-sdk]`:
+
+```css
+:is([data-yv-sdk], [data-yv-sdk] *).yv\:mt-4 { margin-top: 16px }
+```
+
+The gate reads "the SDK rendered this subtree". That claim is false for one kind
+of element. An SDK component that accepts `children`, or a render prop, renders
+the consumer's own markup inside its own stamped root. The second arm of the
+gate, `[data-yv-sdk] *`, matched all of it.
+
+`packages/core/src/styles/theme.css` made the same claim. Its descendant block
+declares `font: inherit`, `color: inherit`, `box-sizing`, `margin`, `padding`
+and `border` on every descendant of a stamped root. That block was resetting the
+consumer's own markup.
+
+ADR-0006 made this worse. Everything outside the exemption list moved into
+`@layer yv` and became `!important`. So the SDK was not only restyling consumer
+content, it was doing so with declarations the consumer could not override from
+an ordinary sheet.
+
+Nobody had measured this direction.
+
+### Measurement
+
+The forward direction asks whether consumer CSS moves SDK DOM, and it answers by
+removing the consumer sheet. The reverse direction cannot answer by removing the
+SDK sheet. That would also remove every SDK value that consumer content
+legitimately **inherits**, and inheritance is not a leak: content placed
+anywhere in a page inherits from its ancestors.
+
+So the baseline is a placement, not a sheet state. The harness renders the same
+consumer markup twice in one document, with the SDK sheet present for both:
+
+- `outside`: in the page, with no `[data-yv-sdk]` ancestor.
+- `inside`: in an SDK component's consumer slot.
+
+A difference between the two is SDK CSS matching consumer DOM, and nothing else.
+The fixture declares all 32 tracked properties on every element it renders, so
+inheritance is not part of the comparison.
+
+Before the change:
+
+| Placement | Leaks |
+| --- | --- |
+| `BibleReader.Root` children | 255 |
+| `BibleChapterPicker.Trigger` children | 68 |
+| `BibleVersionPicker.Trigger` children | 68 |
+
+The 255 covers 21 elements: `box-sizing`, `color`, `font-family`, all four
+margins and all four paddings on every one of them, plus `background-color`,
+`border-radius`, `font-size`, `line-height`, `border-top-width`, `font-weight`,
+`list-style-type` and `text-indent` where the reset names a specific element.
+
+## Decision
+
+Add a slot boundary. An element stamped `data-yv-slot`, and everything under it,
+is consumer territory. No SDK selector matches it.
+
+The gate's descendant arm becomes:
+
+```css
+:is([data-yv-sdk], [data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *)))
+```
+
+Three parts ship together.
+
+1. `packages/ui/scripts/scope-selectors.mjs` emits the new arm.
+2. `packages/core/src/styles/theme.css` writes the same `:where(:not(…))` by
+   hand on every descendant selector. The script skips those selectors, because
+   they carry the gate already.
+3. `packages/ui/src/lib/consumer-slot.tsx` exports `ConsumerSlot`, a
+   `<span data-yv-slot style="display: contents">`. `display: contents`
+   generates no box, so stamping a slot never changes layout.
+
+The `dark` custom variant in `packages/ui/src/styles/global.css` carries the
+gate itself, so its exclusion is hand-written too.
+
+### Specificity
+
+The exclusion sits inside `:where()`, which contributes no specificity. The gate
+still adds exactly 0,1,0, for the `[data-yv-sdk]` attribute. Nothing in the sheet
+changes rank — not against another SDK rule, and not against a consumer rule.
+
+That placement was chosen after measuring the alternative. A bare `:not()` takes
+the specificity of its most specific argument, so it would have raised the gate
+to 0,2,0 uniformly. Uniform is not harmless. The sheet ships in two halves
+(ADR-0006), and the unlayered half carries **normal** declarations whose only
+defence is specificity. Raising the gate lifted `font-size`, `background-color`
+and the `border-*-width` longhands above an ordinary consumer rule at 0,1,0, and
+consumer content that is not in a slot went from 255 leaks to **416** — worse
+than before the slot work. `:where()` restores the pre-change math exactly while
+keeping the boundary.
+
+The `dark` variant needed no compensation as a result. It compiles to
+`:is([data-yv-sdk][data-yv-theme='dark'] *)`, which the script does not rewrite.
+A base utility is 0,2,0 (gate plus class) and a `dark:` utility is 0,3,0 (class
+plus that 0,2,0 `:is()`), the same one-step margin as before. Its exclusion is
+there because the build check requires every gated selector to carry one, not to
+hold a specificity balance.
+
+## Consequences
+
+### The slot boundary works
+
+After the change, the same three placements read **zero**. All seven
+consumer-CSS groups on all fifteen components still read zero, and every
+pre-existing assertion still passes.
+
+### The boundary stops selectors, not inheritance
+
+Consumer content in a slot still inherits `color`, `font-family`, `font-size`
+and the rest from its SDK ancestors. That is ordinary CSS, and it is what
+happens to the same markup anywhere else in a page. A consumer who wants
+different values declares them, and now nothing of ours overrides the
+declaration.
+
+### Content that is not in a slot is exactly as it was
+
+The harness has a positive control that renders the same fixture with no slot.
+It reads 255, the number it read before this change. The boundary takes content
+out of the sheet's reach when it is stamped, and leaves everything else where it
+was. Nothing got worse.
+
+That is a property of `:where()`, and it is the reason the placement matters. The
+first version of this change used a bare `:not()` and pushed the same control to
+416. The fix for a consumer hitting the 255 is to stamp a slot. `ConsumerSlot`
+does it for the sites listed below; a consumer can put `data-yv-slot` on their
+own wrapper anywhere else.
+
+### Three sites cannot be stamped
+
+`asChild` merges our props onto the consumer's own element. There is no element
+left to wrap, and wrapping one changes the rendered DOM shape, which is the
+whole point of `asChild`.
+
+| Site | Why |
+| --- | --- |
+| `BibleReader.Root` children | One stamped `div` holds both SDK compound children (`Toolbar`, `Content`) and consumer children. A slot around all of them would switch off the styling the SDK children need. |
+| `BibleChapterPicker.Trigger` with `asChild` | `cloneElement` and the Radix `asChild` path both target the consumer's own element. |
+| `BibleVersionPicker.Trigger` with `asChild` | Same. |
+
+A consumer can close all three by wrapping their own content in an element with
+`data-yv-slot`. The harness story `BibleReaderConsumerSlot` does exactly that,
+and reads zero.
+
+### One residual selector shape remains
+
+The build check reads `data-yv-sdk` where it appears literally in a compound. It
+does not fire for a Tailwind variant whose subject sits past the gate compound,
+such as `.yv\:space-y-4 > :not(:last-child)`. Those can still reach the slot
+wrapper element the SDK renders. They cannot reach the consumer's elements below
+it, because a child combinator does not go that deep.
+[docs/style-isolation-residual-leak.md](../style-isolation-residual-leak.md)
+records it.
+
+## Alternatives considered
+
+**A bare `:not(…)`, without the `:where()`.** Shipped first, then reverted. It is
+easier to read in a compiled selector, and the uniform 0,2,0 rise strengthens the
+forward direction the SDK is graded on. It also cost 161 extra leaks on consumer
+content outside a slot, which is a regression against the behaviour this ADR set
+out to improve. The measurement decided it.
+
+**Shadow DOM.** Rejected in ADR-0005 for reasons that have not changed. It also
+does not help here: consumer `children` passed into a shadow root through a slot
+are styled by the shadow sheet's `::slotted()` rules, which is the same problem
+with different syntax.
+
+**Documenting the behavior instead of fixing it.** "Your markup is ours once you
+pass it to us" is not a defensible contract for a component library.
diff --git a/docs/style-isolation-residual-leak.md b/docs/style-isolation-residual-leak.md
new file mode 100644
index 00000000..0dd76984
--- /dev/null
+++ b/docs/style-isolation-residual-leak.md
@@ -0,0 +1,283 @@
+# Residual-leak report: SDK components under consumer host CSS
+
+Date: 2026-08-07 (supersedes the 2026-08-06 measurement)
+Ticket: YPE-4113
+Decision records: [ADR-0005](adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md),
+[ADR-0006](adr/0006-layer-and-importantize-the-sdk-sheet.md),
+[ADR-0007](adr/0007-convert-rem-to-px-in-the-sdk-sheet.md),
+[ADR-0008](adr/0008-stop-sdk-css-at-consumer-slots.md)
+
+## Conclusion
+
+**No consumer rule in the fixture reaches an SDK component. All seven groups
+report zero leaks on all fifteen components.**
+
+**And no SDK rule reaches consumer content in a slot.** That is the reverse
+direction, added by ADR-0008 and measured further down this report.
+
+The previous version of this report named two rules that got through:
+
+```css
+button { padding: 2rem !important }        /* reached 155 buttons */
+button { border-radius: 0 !important }     /* reached 65 of those 155 */
+```
+
+ADR-0006 closed both. The SDK sheet now ships in `@layer yv` with `!important`
+on every non-exempt declaration, and a layered important declaration outranks an
+unlayered important one at any specificity.
+
+A third rule was found after that, and it is a different class of leak:
+
+```css
+html { font-size: 62.5% }                  /* shrank every SDK size by 37.5% */
+```
+
+This one is not in the cascade at all. A `rem` resolves against the document
+root element, so no selector, layer or `!important` reaches it. ADR-0007 closed
+it by converting every `rem` in the sheet to `px` at build time, and by giving
+the SDK root an explicit `font-size`.
+
+**Do not adopt shadow DOM.** ADR-0005 set one condition: a residual that
+includes rules without `!important`. There was never such a residual, and now
+there is no measured residual of either kind.
+
+## How we produced these numbers
+
+The harness is in the repo and runs in CI.
+
+```bash
+pnpm turbo build --filter=@youversion/platform-react-ui
+pnpm --filter @youversion/platform-react-ui test:integration
+```
+
+Each story renders one component. It removes all consumer CSS and records 32
+computed properties on every element of the SDK subtree. It then adds one
+consumer CSS group at a time and records the properties again. Each (element,
+property) pair with a changed value is one leak.
+
+The run captured for this report: 43 test files, 548 tests, all passed.
+
+| Path | What it is |
+| --- | --- |
+| `packages/ui/src/test/consumer-host.ts` | The seven consumer CSS groups |
+| `packages/ui/src/test/style-diff.ts` | The 32 tracked properties and the diff |
+| `packages/ui/src/components/style-isolation.stories.tsx` | 20 stories: one per component, the token-override check, and four reverse-direction stories |
+
+The measured root is always the SDK's own element, never the Storybook canvas.
+The canvas is consumer DOM. A count that includes the canvas reports a false
+leak on every run.
+
+## Result by consumer CSS group
+
+"Before" is the same fifteen-story harness run against the sheet that preceded
+the fix, on 2026-08-07. For the first six groups that is the ADR-0005 sheet; for
+`remRebase` it is the ADR-0006 sheet. The four zero groups were zero throughout.
+
+| Group | What it models | Before | After |
+| --- | --- | --- | --- |
+| `preflight` | A consumer running Tailwind v4 Preflight | 0 | **0** |
+| `bareElements` | `button, a, p, ul, input { padding; margin; color; font-size; border; border-radius }` | 0 | **0** |
+| `aggressiveReset` | `* { box-sizing: content-box; margin: 0 }` | 0 | **0** |
+| `inheritedTypography` | `body { font-family; color; line-height; letter-spacing; word-spacing; text-align; text-transform; text-indent; white-space }` | 0 | **0** |
+| `important` | `button { border-radius: 0 !important; padding: 2rem !important }` | 944 | **0** |
+| `highSpecificity` | `#yv-consumer-host-root button { padding: 1.5rem; margin: 1.25rem; border-radius: 0 }` | 1,570 | **0** |
+| `remRebase` | `html { font-size: 62.5% }` | 2,098 | **0** |
+
+Zero means zero on every component, not an average.
+
+The id in `highSpecificity` goes on `document.body`, so the rule reaches
+Radix-portalled DOM as well as the in-tree subtree. Every story that renders a
+`<button>` also asserts that the button matches `#yv-consumer-host-root button`
+and that the `important` style tag is still in the document. Without that
+positive control, a zero could mean "the fixture stopped matching" rather than
+"the SDK held".
+
+`remRebase` has its own positive control, for the same reason. The harness
+injects into `document.head`, so a story could plausibly read zero because the
+rule never reached the document root. Each story asserts
+`getComputedStyle(document.documentElement).fontSize === '10px'` alongside the
+leak count.
+
+## The residual, by component
+
+| Component | Before: `important` | Before: `highSpecificity` | Before: `remRebase` | After, all three |
+| --- | --- | --- | --- | --- |
+| `BibleChapterPicker` | 496 | 876 | 1,044 | **0** |
+| `BibleVersionPicker` | 144 | 216 | 408 | **0** |
+| `BibleReader` | 92 | 149 | 119 | **0** |
+| `VerseActionPopover` | 56 | 84 | 66 | **0** |
+| `BibleLanguagePickerContent` | 56 | 84 | 117 | **0** |
+| `BibleTextView` | 44 | 77 | 13 | **0** |
+| `BibleThemeSettingsContent` | 32 | 48 | 62 | **0** |
+| `VerseOfTheDay` | 8 | 12 | 87 | **0** |
+| `YouVersionAuthButton` | 8 | 12 | 42 | **0** |
+| `BibleVersionPickerLanguageTrigger` | 8 | 12 | 20 | **0** |
+| `BibleCard` | 0 | 0 | 69 | **0** |
+| `FootnoteContent` | 0 | 0 | 35 | **0** |
+| `ProfileAvatar` | 0 | 0 | 4 | **0** |
+| `Separator` | 0 | 0 | 2 | **0** |
+| `Textarea` | 0 | 0 | 10 | **0** |
+
+The five components that measured zero on the first two groups render no
+`<button>`, and both of those fixture rules target `button`. `remRebase` reaches
+every component, because every component ships `rem` sizes.
+
+## The reverse direction: SDK CSS reaching into consumer content
+
+An SDK component that renders `children`, or render-prop output, puts the
+consumer's own markup inside a `[data-yv-sdk]` subtree. Until ADR-0008 the gate
+matched all of it, and `theme.css` reset and recolored it.
+
+### The baseline
+
+This direction needs a different baseline from the one above. The forward
+direction removes the consumer sheet. The reverse direction cannot remove the SDK
+sheet, because that would also remove every value consumer content legitimately
+**inherits**, and inheritance is not a leak.
+
+So the baseline is a placement. The harness renders the same consumer markup
+twice in one document, with the SDK sheet present for both: once with no
+`[data-yv-sdk]` ancestor, once inside an SDK component's consumer slot. A
+difference between the two is SDK CSS matching consumer DOM, and nothing else.
+The fixture declares all 32 tracked properties on every element, so inheritance
+is not part of the comparison.
+
+### Result
+
+| Placement | Before | After |
+| --- | --- | --- |
+| `BibleReader.Root` children, in a `data-yv-slot` wrapper | 255 | **0** |
+| `BibleChapterPicker.Trigger` children | 68 | **0** |
+| `BibleVersionPicker.Trigger` children | 68 | **0** |
+| `BibleReader.Root` children, no slot (positive control) | 255 | 255 |
+
+The last row is the positive control. It has to stay non-zero, or the harness is
+measuring nothing. It also has to stay at 255: content the SDK still reaches must
+not be reached *harder* than before. That is what the `:where()` in the gate
+buys, and the first version of ADR-0008 got it wrong — a bare `:not()` put this
+row at 416. See residual 4 below.
+
+## What still gets through
+
+Five things. All are deliberate, and none is in the forward fixture.
+
+### 1. A consumer rule that is `!important` and in a layer declared before `yv`
+
+```css
+@layer theirs, yv;                      /* their layer declared first */
+@layer theirs { button { padding: 2rem !important } }
+```
+
+For important declarations the layer order reverses, so the layer declared
+*first* wins. A consumer who writes this has read the cascade specification and
+decided to override us. That is a supported way to opt out, not a leak. It costs
+them a `@layer` declaration in a fixed order, which no consumer writes by
+accident.
+
+We do not close this. Closing it would need a layer declared before every layer
+a consumer might name, which is not expressible.
+
+### 2. The exempt properties
+
+`packages/ui/scripts/scope-selectors.mjs` keeps a property exemption list.
+Those declarations stay unlayered and normal, which is exactly the cascade
+position they had before ADR-0006. A consumer rule that targets one of them,
+with `!important` or at higher specificity, still wins.
+
+The list and the reason for each family are in
+[ADR-0006](adr/0006-layer-and-importantize-the-sdk-sheet.md). In summary:
+
+| Family | Why it cannot be important |
+| --- | --- |
+| `opacity`, `transform`, `height`, `filter` | Animated by a `@keyframes` in this sheet. An important cascaded declaration outranks the animation origin and freezes the animation |
+| The rest of the transform pipeline | Composes with `transform` at runtime |
+| `animation-*`, `transition-*` | Radix `Presence` writes `animation-fill-mode` inline to hold an exit frame |
+| `position`, `top`/`right`/`bottom`/`left`, `inset-*`, `z-index`, `min-width`, `visibility`, `pointer-events` | Radix and floating-ui write these inline to place a popper. An author `!important` outranks the inline `style` attribute |
+| `font-size`, `background-color`, `border-*` and their shorthands | SDK components write these inline. Preflight and `theme.css` compile into this sheet and would beat our own components |
+| Every `--*` custom property | A consumer `[data-yv-sdk] { --yv-primary: … }` override must keep winning. This is the documented customization path |
+
+The trade is explicit: a working popover and a working animation, at the price
+of a consumer being able to override the properties that make them work.
+
+### 3. The root font size, on purpose
+
+`[data-yv-sdk] { font-size: 16px }` is a `font-size` declaration, so it is
+exempt by the rule above. It stays unlayered and normal at 0,1,0, and a consumer
+rule beats it.
+
+That is the design. It is the one way a consumer can make the SDK scale with
+their own type size, now that the sheet ships `px`.
+
+The cost is an accessibility one and it is stated plainly in
+[ADR-0007](adr/0007-convert-rem-to-px-in-the-sdk-sheet.md): the SDK no longer
+grows when a reader raises their **browser's** default font size. Browser zoom
+still works, because zoom scales `px`. A consumer who needs type scaling has
+four supported paths: override `[data-yv-sdk] { font-size }`, raise a `--yv-*`
+size token, pass a component's `fontSize` prop, or open an issue.
+
+### 4. Consumer content that is not in a slot
+
+Three sites render consumer content and cannot be stamped:
+
+| Site | Why |
+| --- | --- |
+| `BibleReader.Root` children | One stamped `div` holds SDK compound children (`Toolbar`, `Content`) and consumer children together. A slot around all of them switches off the styling the SDK children need |
+| `BibleChapterPicker.Trigger` with `asChild` | `asChild` merges our props onto the consumer's own element. There is no element left to wrap |
+| `BibleVersionPicker.Trigger` with `asChild` | Same |
+
+Content at those sites is restyled exactly as it was before ADR-0008: the
+no-slot control reads 255, the number it read before. The slot boundary sits
+inside `:where()`, so it costs no specificity and moves nothing it does not
+match.
+
+That placement was measured, not assumed. A bare `:not()` raises the gate to
+0,2,0, which lifts the SDK's normal declarations — the exempt ones, which stay
+unlayered — above a consumer rule at 0,1,0. The first version of ADR-0008 shipped
+that form and put this control at 416, adding `font-size`, `font-style`,
+`font-weight` and the four `border-*-width` longhands that `theme.css` sets
+through `font: inherit` and `border: 0 solid`. `:where()` closes it.
+
+The fix for the 255 is one attribute. A consumer wraps their content in an
+element with `data-yv-slot`, and the count returns to zero. The harness story
+`BibleReaderConsumerSlot` does exactly that.
+
+### 5. A selector whose subject sits past the gate compound
+
+The build check reads `data-yv-sdk` where it appears literally in a compound. A
+Tailwind variant such as `.yv\:space-y-4 > :not(:last-child)` carries the gate on
+its *first* compound, and its subject is a later one. The check does not fire,
+and such a rule can still match the slot wrapper element the SDK renders.
+
+It cannot reach the consumer's own elements below the wrapper, because a child
+combinator does not go that deep. The reverse harness measures the outcome, and
+it reads zero on all three slotted placements.
+
+## Keeping this report accurate
+
+Every group is asserted, not only recorded. The three former leak groups now
+assert zero, and each carries its own positive control: a button story asserts
+the fixture still matches the button, and `remRebase` asserts the document root
+really reads `10px`. A zero that comes from a non-matching fixture fails the
+story.
+
+The build-time checks back the harness up, in
+`packages/ui/scripts/scope-selectors.mjs` and `scripts/verify-styles.js`. They
+fail the build on an ungated selector, a gated selector that reaches past the
+gate without a slot exclusion, a non-exempt declaration that is not
+important, an exempt declaration that is important, an `!important` inside a
+`@keyframes` body, a `@keyframes` animating a property missing from the
+exemption list, a surviving `rem` length, a missing or misplaced `@layer yv`
+block, and a `dist/index.js` without `@layer yv{`.
+
+**Not covered by any automated check:** popover and dialog *placement*, and
+enter/exit animation *appearance*. The harness compares computed styles on a
+settled DOM; it does not watch a transition run or read a popper's final
+position against its trigger. A manual Storybook pass covers those.
+
+**Also not covered by the build check:** a `rem` written in an inline `style`
+prop. The check reads the compiled sheet, and an inline style is not in it.
+Write `px` in a `style` prop. The harness catches one that slips through, as a
+`remRebase` leak.
+
+To produce the numbers in this file again, run the commands at the top of this
+report. Then read the per-group counts that each story writes to the console.
diff --git a/packages/core/src/styles/theme-inherited-properties.test.ts b/packages/core/src/styles/theme-inherited-properties.test.ts
new file mode 100644
index 00000000..a2cc3c59
--- /dev/null
+++ b/packages/core/src/styles/theme-inherited-properties.test.ts
@@ -0,0 +1,122 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+/**
+ * Guards the inherited-property declarations on the SDK root.
+ *
+ * A consumer `body { font-family: … }` rule matches no SDK element, so the
+ * cascade cannot fight it. The value arrives by inheritance, and inheritance
+ * applies only where the element declares nothing itself. A declaration of each
+ * of these properties on `[data-yv-sdk]` is the whole fix. The removal of one
+ * declaration opens the leak again for that one property, without a warning. No
+ * test that renders a component finds that, unless the test reads that exact
+ * property.
+ *
+ * This test reads the CSS source from disk, and not the computed styles. It
+ * follows `packages/ui/src/styles/font-tokens.test.ts`. Neither jsdom nor node
+ * loads a stylesheet, so the source text is the only available evidence. The
+ * consumer-host integration stories in `packages/ui` prove that the declarations
+ * work in a browser.
+ *
+ * See YPE-4113.
+ */
+const themeCss = readFileSync(resolve(import.meta.dirname, './theme.css'), 'utf8');
+
+/** Every property that the SDK root must declare, so the host cannot inherit into us. */
+const PINNED_INHERITED_PROPERTIES = [
+  'color',
+  'font-family',
+  'font-variant',
+  'letter-spacing',
+  'line-height',
+  'text-align',
+  'text-indent',
+  'text-shadow',
+  'text-transform',
+  'white-space',
+  'word-spacing',
+] as const;
+
+function stripComments(css: string): string {
+  return css.replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+/**
+ * Returns the body of the first `{ … }` block that opens at or after `from`.
+ *
+ * This function counts braces, and does not use a regular expression. The reset
+ * block holds nested rules, and a non-greedy match stops at the first inner `}`.
+ */
+function blockBodyAt(css: string, from: number): string {
+  const open = css.indexOf('{', from);
+  expect(open, 'expected a rule body to follow the selector').toBeGreaterThan(-1);
+
+  let depth = 0;
+  for (let i = open; i < css.length; i += 1) {
+    if (css[i] === '{') depth += 1;
+    else if (css[i] === '}') {
+      depth -= 1;
+      if (depth === 0) return css.slice(open + 1, i);
+    }
+  }
+
+  throw new Error('theme.css has an unbalanced rule body');
+}
+
+/** Removes the nested rules. Only the declarations on the element itself remain. */
+function ownDeclarations(body: string): string {
+  let depth = 0;
+  let out = '';
+
+  for (const character of body) {
+    if (character === '{') depth += 1;
+    else if (character === '}') depth -= 1;
+    else if (depth === 0) out += character;
+  }
+
+  return out;
+}
+
+/**
+ * The reset block, in whichever selector form it now uses.
+ *
+ * `theme.css` has two top-level `[data-yv-sdk]` rules: the token block and the
+ * reset block. The reset block resets the box model, so `box-sizing` tells the
+ * two apart. The selector match is loose because Phase 4 of YPE-4113 removes the
+ * `:where()` wrapper, and this test must survive that change.
+ */
+function findResetBlock(): string {
+  const css = stripComments(themeCss);
+  const selector = /(?:^|\})\s*(?::where\(\s*)?\[data-yv-sdk\]\s*\)?\s*\{/gm;
+
+  for (const match of css.matchAll(selector)) {
+    const body = blockBodyAt(css, match.index);
+    if (body.includes('box-sizing')) return body;
+  }
+
+  throw new Error('could not find the [data-yv-sdk] reset block in theme.css');
+}
+
+describe('[data-yv-sdk] inherited-property reset', () => {
+  const declarations = ownDeclarations(findResetBlock());
+
+  it.each(PINNED_INHERITED_PROPERTIES)('declares %s on the SDK root', (property) => {
+    // The pattern anchors on `;` or on the start of a line. A property name that
+    // is part of another name thus cannot satisfy the wrong case.
+    const declared = new RegExp(`(?:^|;)\\s*${property}\\s*:`, 'm').test(declarations);
+    expect(declared, `theme.css must declare \`${property}\` on [data-yv-sdk]`).toBe(true);
+  });
+
+  it('leaves direction to the host, so RTL content still works', () => {
+    // bible-reader.css handles `[dir='rtl']`, and `text-align: start` follows
+    // the direction. A `direction: ltr` declaration here breaks Hebrew and
+    // Arabic Bibles. The absence of that declaration is on purpose.
+    expect(/(?:^|;)\s*direction\s*:/m.test(declarations)).toBe(false);
+  });
+
+  it('resolves color from the theme token, not a literal', () => {
+    // A literal value does not change with `data-yv-theme='dark'`.
+    expect(declarations).toMatch(/(?:^|;)\s*color:\s*var\(--yv-foreground\)/m);
+  });
+});
diff --git a/packages/core/src/styles/theme.css b/packages/core/src/styles/theme.css
index 4cc241bf..b57a208f 100644
--- a/packages/core/src/styles/theme.css
+++ b/packages/core/src/styles/theme.css
@@ -156,125 +156,221 @@
 }
 
 /*
-  * :where() is a CSS pseudo-class that drops the specificity of
-  * everything inside it to zero (0,0,0,0). The selectors still
-  * match, but they never win a specificity fight. This is desired.
+  * No :where() here, on purpose.
+  *
+  * This block used to read `:where([data-yv-sdk])`. `:where()` drops everything
+  * inside it to specificity 0,0,0. The selectors matched, and they never won, so
+  * a consumer bare `button {}` rule at 0,0,1 overrode the whole reset. That was
+  * correct while SDK CSS sat in `yv-sdk-*` cascade layers and had to lose. It is
+  * wrong now.
+  *
+  * The plain attribute selector gives every rule below 0,1,0 or higher. The gate
+  * also means that these rules can never match DOM that the SDK did not render.
+  * Protection of the host app moved from cascade rank to territory.
+  *
+  * See docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md.
   */
-:where([data-yv-sdk]) {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
+
+/*
+  * Every descendant rule below carries `:where(:not([data-yv-slot], [data-yv-slot] *))`.
+  *
+  * `[data-yv-sdk]` means "the SDK rendered this subtree". That is also true of
+  * consumer `children` and render-prop output, because an SDK component renders
+  * them inside its own stamped root. Without the exclusion, this reset recolors
+  * and re-boxes content the SDK only passed through — and since ADR-0006 it does
+  * that with `!important`. `data-yv-slot` marks the element that holds consumer
+  * content, and the reset stops there.
+  *
+  * The exclusion goes on the *subject* compound, which is the element the rule
+  * styles. `[data-yv-sdk]:not(…) a` excludes the wrong element.
+  *
+  * The `:where()` wrapper is what makes the exclusion free. A bare `:not()`
+  * takes the specificity of its most specific argument, so it would add 0,1,0 to
+  * every rule here. `:where()` contributes zero. That matters because the rise
+  * would also lift the *unlayered, normal* half of the sheet — `font-size`,
+  * `background-color`, `border-*-width` — above an ordinary consumer rule at
+  * 0,1,0, and restyle consumer content harder anywhere a slot is missing.
+  * Measured: 255 leaks to 416. So the exclusion changes what matches and nothing
+  * about what wins.
+  *
+  * This file ships two ways: compiled into the UI sheet through
+  * `packages/ui/scripts/scope-selectors.mjs`, and unprocessed as
+  * `@youversion/platform-core/browser/styles/theme.css`. The script cannot add
+  * the exclusion here, because these selectors already carry the gate and it
+  * skips them. So the exclusion is hand-written, and `SLOT_ATTRIBUTE` in that
+  * script is the other half. Keep the two in sync. The script's re-parse pass
+  * fails the build if a selector here loses its exclusion.
+  *
+  * See docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+  */
+[data-yv-sdk] {
+  *:where(:not([data-yv-slot], [data-yv-slot] *)),
+  *:where(:not([data-yv-slot], [data-yv-slot] *))::after,
+  *:where(:not([data-yv-slot], [data-yv-slot] *))::before,
+  *:where(:not([data-yv-slot], [data-yv-slot] *))::backdrop,
+  *:where(:not([data-yv-slot], [data-yv-slot] *))::file-selector-button {
     font: inherit;
     font-family: var(--yv-font-sans);
+    /*
+     * `color: inherit` is here for the same reason as `font: inherit`, and it is
+     * not in the Tailwind preflight.
+     *
+     * A `color` declaration on the SDK root stops a consumer `body { color: … }`
+     * rule, because that value arrives only by inheritance. It does nothing
+     * about a consumer `ul { color: … }` rule. That rule matches an SDK element
+     * directly, so it replaces the inherited value, whatever the root declares.
+     * A `color` declaration on every descendant closes that channel. At 0,1,0 it
+     * overrides any bare element selector, and `inherit` lets the SDK color
+     * cascade flow through unchanged.
+     */
+    color: inherit;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     border: 0 solid;
   }
 
+  /*
+   * The box model, repeated for the marked element itself.
+   *
+   * The block above matches descendants only, and misses the root. A consumer
+   * `* { box-sizing: content-box }` rule does not
+   * miss the root. Without these four declarations, the SDK root is the one
+   * element in the subtree that a universal reset can still move.
+   */
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+
+  /*
+   * Inherited properties, declared on the SDK root.
+   *
+   * A consumer `body { letter-spacing: .5em }` rule never matches an SDK
+   * element, so no specificity and no cascade rank stops it. The value arrives
+   * by inheritance, and inheritance applies only where the element declares
+   * nothing itself. A declaration of each property here closes that channel. It
+   * works at zero specificity for the same reason: no other declaration is
+   * present to lose to.
+   *
+   * Every element with `data-yv-sdk` declares the whole set again. Portalled
+   * surfaces (popovers, dialogs) inherit direct from `document.body`, and this
+   * block covers them too.
+   *
+   * `direction` is absent on purpose. bible-reader.css handles RTL, and
+   * `text-align: start` follows the direction. See YPE-4113.
+   */
+  font-family: var(--yv-font-sans);
   line-height: 1.5;
+  color: var(--yv-foreground);
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-transform: none;
+  text-indent: 0;
+  white-space: normal;
+  text-shadow: none;
+  font-variant: normal;
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   -webkit-tap-highlight-color: transparent;
 
-  hr {
+  hr:where(:not([data-yv-slot], [data-yv-slot] *)) {
     height: 0;
     color: inherit;
     border-top-width: 1px;
   }
 
-  abbr:where([title]) {
+  abbr:where(:not([data-yv-slot], [data-yv-slot] *)):where([title]) {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1:where(:not([data-yv-slot], [data-yv-slot] *)),
+  h2:where(:not([data-yv-slot], [data-yv-slot] *)),
+  h3:where(:not([data-yv-slot], [data-yv-slot] *)),
+  h4:where(:not([data-yv-slot], [data-yv-slot] *)),
+  h5:where(:not([data-yv-slot], [data-yv-slot] *)),
+  h6:where(:not([data-yv-slot], [data-yv-slot] *)) {
     font-size: inherit;
     font-weight: inherit;
   }
 
-  a {
+  a:where(:not([data-yv-slot], [data-yv-slot] *)) {
     color: inherit;
     -webkit-text-decoration: inherit;
     text-decoration: inherit;
   }
 
-  b,
-  strong {
+  b:where(:not([data-yv-slot], [data-yv-slot] *)),
+  strong:where(:not([data-yv-slot], [data-yv-slot] *)) {
     font-weight: bolder;
   }
 
-  code,
-  kbd,
-  samp,
-  pre {
+  code:where(:not([data-yv-slot], [data-yv-slot] *)),
+  kbd:where(:not([data-yv-slot], [data-yv-slot] *)),
+  samp:where(:not([data-yv-slot], [data-yv-slot] *)),
+  pre:where(:not([data-yv-slot], [data-yv-slot] *)) {
     font-family: var(--yv-font-sans);
     font-size: 1em;
   }
 
-  small {
+  small:where(:not([data-yv-slot], [data-yv-slot] *)) {
     font-size: 80%;
   }
 
-  sub,
-  sup {
+  sub:where(:not([data-yv-slot], [data-yv-slot] *)),
+  sup:where(:not([data-yv-slot], [data-yv-slot] *)) {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
 
-  sub {
+  sub:where(:not([data-yv-slot], [data-yv-slot] *)) {
     bottom: -0.25em;
   }
 
-  sup {
+  sup:where(:not([data-yv-slot], [data-yv-slot] *)) {
     top: -0.5em;
   }
 
-  table {
+  table:where(:not([data-yv-slot], [data-yv-slot] *)) {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
   }
 
-  ol,
-  ul,
-  menu {
+  ol:where(:not([data-yv-slot], [data-yv-slot] *)),
+  ul:where(:not([data-yv-slot], [data-yv-slot] *)),
+  menu:where(:not([data-yv-slot], [data-yv-slot] *)) {
     list-style: none;
   }
 
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
+  img:where(:not([data-yv-slot], [data-yv-slot] *)),
+  svg:where(:not([data-yv-slot], [data-yv-slot] *)),
+  video:where(:not([data-yv-slot], [data-yv-slot] *)),
+  canvas:where(:not([data-yv-slot], [data-yv-slot] *)),
+  audio:where(:not([data-yv-slot], [data-yv-slot] *)),
+  iframe:where(:not([data-yv-slot], [data-yv-slot] *)),
+  embed:where(:not([data-yv-slot], [data-yv-slot] *)),
+  object:where(:not([data-yv-slot], [data-yv-slot] *)) {
     display: block;
     vertical-align: middle;
   }
 
-  img,
-  video {
+  img:where(:not([data-yv-slot], [data-yv-slot] *)),
+  video:where(:not([data-yv-slot], [data-yv-slot] *)) {
     max-width: 100%;
     height: auto;
   }
 
-  button,
-  input,
-  select,
-  optgroup,
-  textarea,
-  ::file-selector-button {
+  button:where(:not([data-yv-slot], [data-yv-slot] *)),
+  input:where(:not([data-yv-slot], [data-yv-slot] *)),
+  select:where(:not([data-yv-slot], [data-yv-slot] *)),
+  optgroup:where(:not([data-yv-slot], [data-yv-slot] *)),
+  textarea:where(:not([data-yv-slot], [data-yv-slot] *)),
+  *:where(:not([data-yv-slot], [data-yv-slot] *))::file-selector-button {
     font: inherit;
     font-family: var(--yv-font-sans);
     font-feature-settings: inherit;
@@ -286,21 +382,25 @@
     opacity: 1;
   }
 
-  ::placeholder {
+  *:where(:not([data-yv-slot], [data-yv-slot] *))::placeholder {
     opacity: 1;
   }
 
-  textarea {
+  textarea:where(:not([data-yv-slot], [data-yv-slot] *)) {
     resize: vertical;
   }
 
-  button,
-  input:where([type='button'], [type='reset'], [type='submit']),
-  ::file-selector-button {
+  button:where(:not([data-yv-slot], [data-yv-slot] *)),
+  input:where(:not([data-yv-slot], [data-yv-slot] *)):where(
+      [type='button'],
+      [type='reset'],
+      [type='submit']
+    ),
+  *:where(:not([data-yv-slot], [data-yv-slot] *))::file-selector-button {
     appearance: button;
   }
 
-  [hidden]:where(:not([hidden='until-found'])) {
+  [hidden]:where(:not([data-yv-slot], [data-yv-slot] *)):where(:not([hidden='until-found'])) {
     display: none !important;
   }
 }
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
new file mode 100644
index 00000000..eeeb7c82
--- /dev/null
+++ b/packages/ui/.gitignore
@@ -0,0 +1,4 @@
+# Raw Tailwind output, before scripts/scope-selectors.mjs adds the
+# [data-yv-sdk] gate. It stays out of dist/, so the ungated sheet can never be
+# published.
+.cache/
diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
index 670e37ce..a1dc57d3 100644
--- a/packages/ui/.storybook/preview.tsx
+++ b/packages/ui/.storybook/preview.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import type { Preview, ReactRenderer } from '@storybook/react-vite';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/csf';
 
@@ -12,6 +12,28 @@ import { initialize, mswLoader } from 'msw-storybook-addon';
 import { StorybookEnvCheck } from '../src/test/StorybookEnvCheck';
 import { YouVersionProvider } from '../src/components/YouVersionProvider';
 import { globalHandlers } from '../src/test/mocks/handlers';
+import {
+  injectConsumerCss,
+  resetConsumerHost,
+  resolveConsumerCssGroups,
+} from '../src/test/consumer-host';
+import type { ConsumerCssGroup } from '../src/test/consumer-host';
+
+/**
+ * Consumer host CSS, per story, through `parameters.consumerHost`.
+ *
+ * `'all'` injects every group. An array injects only the named groups. Without
+ * the parameter, the decorator injects nothing, and every earlier story is
+ * unchanged.
+ */
+type ConsumerHostParameter = ConsumerCssGroup[] | 'all' | undefined;
+
+function getConsumerCssGroups(parameters: {
+  consumerHost?: ConsumerHostParameter;
+}): ConsumerCssGroup[] {
+  const value = parameters.consumerHost;
+  return value === undefined ? [] : resolveConsumerCssGroups(value);
+}
 
 const THEME_BACKGROUNDS: Record<string, string> = {
   light: '#ffffff',
@@ -63,6 +85,24 @@ const preview: Preview = {
         };
       }, [theme]);
 
+      // A string key, not the array, so the effect does not run again on every
+      // render.
+      const consumerKey = getConsumerCssGroups(context.parameters).join(',');
+
+      // Layout effect, not effect. The SDK `<style precedence="yv-sdk">` tag is
+      // in <head> by commit time, so an append here always lands after it. That
+      // is the source order that a real consumer app produces.
+      useLayoutEffect(() => {
+        if (consumerKey === '') return undefined;
+        injectConsumerCss(consumerKey.split(',') as ConsumerCssGroup[]);
+
+        // resetConsumerHost, and not the cleanup function that injectConsumerCss
+        // returns. A play function injects again during a measurement, and those
+        // tags have no owner. A tag left behind follows the next story into the
+        // same iframe, and so does the body id that `highSpecificity` targets.
+        return resetConsumerHost;
+      }, [consumerKey]);
+
       const includeAuth = context.parameters.includeAuth !== false;
       const requiredEnvVars = includeAuth
         ? ['STORYBOOK_YOUVERSION_APP_KEY', 'STORYBOOK_AUTH_REDIRECT_URL']
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index c07284de..ace58c5a 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -19,6 +19,7 @@ export — treat those two as public API and breaking-change territory.
 ✅ Do: Use Radix UI primitives from `components/ui/` for low-level behaviors (modals, popovers, etc.)
 ✅ Do: Use Tailwind classes with the `yv:` prefix only
 ✅ Do: Use semantic theme tokens (`yv:text-muted-foreground`, `yv:bg-destructive`) instead of arbitrary colors
+✅ Do: Put `data-yv-sdk` on the root element of every new exported component
 
 ❌ Don't: Make raw network requests from UI components
 ❌ Don't: Import from `@youversion/platform-core` directly (except re-exports in index.ts)
@@ -36,11 +37,87 @@ export — treat those two as public API and breaking-change territory.
 - CSS embedded as `__YV_STYLES__` constant via tsup define
 - Built Tailwind CSS: `dist/tailwind.css` → embedded as JS string at build time
 - Static CSS also available via `import '@youversion/platform-react-ui/styles.css'` for non-React consumers
-- Each component includes a `data-yv-sdk` attribute on its root element for style scoping (consumers don't need to add this)
 - Tailwind CSS classes must be prefixed with `yv:` to prevent class naming collision when someone uses our components in their app. For example, `mt-4` becomes `yv:mt-4`
 - Light/dark mode via CSS variables (`[data-yv-sdk]`)
 - Use semantic theme tokens (`yv:text-muted-foreground`, `yv:bg-destructive`) instead of arbitrary color values
 
+### Style isolation (`data-yv-sdk`)
+
+The build rewrites every SDK selector to
+`:is([data-yv-sdk], [data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *)))`.
+A rule applies only inside a subtree that carries `data-yv-sdk`, and it stops at
+any element that carries `data-yv-slot`. The `:where()` keeps the gate at 0,1,0,
+so the boundary changes what the sheet matches and nothing about what it wins.
+See
+[ADR-0005](../../docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md),
+[ADR-0006](../../docs/adr/0006-layer-and-importantize-the-sdk-sheet.md),
+[ADR-0007](../../docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md) and
+[ADR-0008](../../docs/adr/0008-stop-sdk-css-at-consumer-slots.md).
+
+- **Put `data-yv-sdk` on the root element of every new exported component.**
+  Without the attribute, the component renders with no SDK styling.
+- **Wrap consumer content in `ConsumerSlot`.** Any place a component renders a
+  consumer's `children` or render-prop output inside a stamped subtree is a
+  slot. `ConsumerSlot` (`src/lib/consumer-slot.tsx`) is a
+  `<span data-yv-slot style="display: contents">`, so it adds no box and changes
+  no layout. Wrap only content the consumer supplied. A stamp on our own default
+  markup switches off the styling that markup asks for.
+- **Do not force a slot onto an `asChild` path.** `asChild` merges our props onto
+  the consumer's own element, so a wrapper would change the rendered DOM shape.
+  Those sites ship unstamped, and ADR-0008 lists them.
+- The slot boundary stops selector matching. It does not stop inheritance, and
+  it is not meant to. Slot content inherits `color`, `font-size` and the rest
+  from its SDK ancestors, the way any content inherits from where it sits.
+- A hand-written gated selector writes its own `:where(:not([data-yv-slot],
+  [data-yv-slot] *))`. The rewrite skips a selector that already carries the
+  gate, so `src/styles/global.css` and `packages/core/src/styles/theme.css` do it
+  themselves. The build fails when one of them loses the exclusion. Keep the
+  `:where()`: a bare `:not()` adds 0,1,0, and a rise there lifts the unlayered
+  half of the sheet over ordinary consumer CSS. ADR-0008 has the measurement.
+- Consumers never add the attribute. The components add it themselves.
+- Internal primitives in `src/components/ui/` carry no attribute, on purpose.
+  They normally render inside a stamped public component, and a second stamp
+  does nothing.
+- **Portal exception:** when a `ui/` primitive portals outside every stamped
+  ancestor (for example Radix Dialog Overlay/Content into `document.body`), it
+  MUST stamp `data-yv-sdk` (and `data-yv-theme` when theme applies). See
+  `src/components/ui/dialog.tsx`.
+- **The sheet ships in two halves, split by property.** Every property on the
+  exemption list in `scripts/scope-selectors.mjs` stays unlayered and normal.
+  Everything else goes into `@layer yv` and gets `!important`. Layer order
+  reverses for important declarations and ranks unlayered last, so the layered
+  half beats a consumer `!important` rule at any specificity. The unlayered half
+  keeps its pre-ADR-0006 cascade position, because a layered *normal*
+  declaration would lose to ordinary consumer CSS.
+- **Never importantize a property something sets at runtime.** An author
+  `!important` outranks the inline `style` attribute and the CSS animation
+  origin. Radix positions poppers inline; our keyframes animate `opacity`,
+  `transform`, `height` and `filter`. Add to `EXEMPT_PROPERTIES` with a reason,
+  never to "be safe". `!important` inside `@keyframes` is invalid CSS.
+- `packages/core/src/styles/theme.css` declares the inherited properties
+  (`font`, `color`, `box-sizing`, `margin`, `padding`, `border`) on the root and
+  on the descendants. The gate alone does not stop inheritance from consumer DOM.
+- **The sheet ships `px`, never `rem`.** `scope-selectors.mjs` converts every
+  `rem` length to `px` at 1rem = 16px, and fails the build if one survives. A
+  `rem` resolves against the *document root*, so a host `html { font-size }`
+  rescales it and no selector, layer or `!important` can stop that.
+  `src/styles/global.css` also declares `font-size: 16px` on `[data-yv-sdk]`,
+  which closes the inheritance half of the same leak.
+- **Write `px` in an inline `style` prop, not `rem`.** An inline style never
+  passes through the build, so the rebase cannot reach it. The `remRebase`
+  harness group is the backstop.
+- Residuals remain, and
+  [docs/style-isolation-residual-leak.md](../../docs/style-isolation-residual-leak.md)
+  records them: a consumer rule that is `!important` *and* in a layer declared
+  before `yv`, the exempt properties, the root `font-size` we leave overridable
+  on purpose, the three slot sites that cannot be stamped, and one selector shape
+  that can still reach a slot wrapper.
+- The regression harness is `src/components/style-isolation.stories.tsx`, with
+  `src/test/consumer-host.ts` and `src/test/style-diff.ts`. It runs in two
+  directions. Add a consumer-host story when you add an exported component, and a
+  reverse story when that component renders consumer `children` or render-prop
+  output.
+
 ## REFERENCES
 
 Storybook stories are the live reference for every component's props and states.
@@ -54,5 +131,28 @@ type-checked; prefer them over any prose description of a component's API.
 
 ## CRITICAL
 - **No module side effects**: styles are rendered via React 19 `<style precedence>` in the `YouVersionProvider` wrapper
-- **Build sub-steps are order-dependent**: `build:css` (Tailwind + `strip-layers.js`) → `build:js` (tsup, injects `__YV_STYLES__`) → `build:types`. Never skip `build:css` — without it the `__YV_STYLES__` constant is empty.
+- **Build sub-steps are order-dependent**. The chain is:
+  1. `build:css`: Tailwind CLI, `src/styles/global.css` to `.cache/tailwind.raw.css`
+  2. `build:css:scope`: `scripts/scope-selectors.mjs`, adds the gate to every
+     selector, converts every `rem` length to `px`, splits the sheet into the
+     unlayered exempt half and the `@layer yv` important half, writes
+     `dist/tailwind.css`. It re-parses its own output and fails on an ungated
+     selector, a gated selector that reaches past the gate without a slot
+     exclusion, a non-exempt normal declaration, an exempt important declaration,
+     an `!important` inside `@keyframes`, a `@keyframes` animating a property
+     missing from the exemption list, a surviving `rem` length, or a missing or
+     misplaced `@layer yv` block.
+  3. `build:js`: tsup, injects `dist/tailwind.css` as the `__YV_STYLES__` constant
+  4. `verify:styles`: `scripts/verify-styles.js`, fails the build if the gate is absent, if `@layer yv{` is absent, or if a `@layer yv-sdk-*` block remains
+  5. `build:types`: tsc declarations
+
+  If you skip `build:css`, `__YV_STYLES__` is empty. If you skip
+  `build:css:scope`, the bundle ships CSS without the gate, and `verify:styles`
+  rejects it.
+- **Keep all three watchers in `dev` and `storybook`.** Tailwind writes
+  `.cache/tailwind.raw.css`, and `scope-selectors.mjs --watch` adds the gate and
+  writes `dist/tailwind.css`. If you point the Tailwind watcher at
+  `dist/tailwind.css`, it overwrites the gated file with ungated output on the
+  next content rescan. A dev server started before this chain existed continues
+  to do this until you restart it.
 - Always rebuild after CSS changes
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 39af9d7e..c25144c8 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -51,7 +51,70 @@ All component CSS is automatically injected when you wrap your app with `YouVers
 import '@youversion/platform-react-ui/styles.css';
 ```
 
-All component classes are prefixed with `yv:` to avoid collisions with your app's styles. Override design tokens with CSS variables on `[data-yv-sdk]` (see [Custom CSS variables](#custom-css-variables)).
+All component classes are prefixed with `yv:` to avoid collisions with your app's styles.
+
+### Your CSS and our CSS
+
+**Our styles stay inside our components. Your styles stay outside them.**
+
+Every SDK rule applies only to elements marked `data-yv-sdk`. The components add
+that attribute themselves, so no rule in the SDK stylesheet can reach your
+markup. In the other direction, your global CSS no longer changes ours. A reset
+such as `* { box-sizing: content-box }`, or a rule such as
+`button { padding: 1rem }`, changed the appearance of our components before. It
+does not change them now.
+
+Read these five points before you upgrade:
+
+- **You cannot style SDK internals, and we never supported it.** If you target
+  our elements from your stylesheet, our rule overrides yours. Class names,
+  `data-slot` values and DOM structure are internal. They change without a major
+  version.
+- **`!important` no longer overrides our rules, and neither does an id.** The
+  SDK stylesheet ships in a cascade layer named `yv`, and its declarations carry
+  `!important`. For important declarations the cascade reverses layer order and
+  ranks unlayered CSS last, so `button { padding: 2rem !important }` in your
+  global CSS no longer changes our buttons. `#app button { padding: 1rem }` does
+  not either — importance is sorted above specificity.
+- **A short list of properties is still yours to change.** We leave `position`,
+  `top`/`left`/`right`/`bottom`, `z-index`, `transform`, `opacity`,
+  `animation-*`, `transition-*`, `font-size`, `background-color`, `border-*` and
+  every `--*` custom property out of the layer, because our popovers and
+  animations set them at runtime. The
+  [residual-leak report](https://github.com/youversion/platform-sdk-react/blob/main/docs/style-isolation-residual-leak.md)
+  has the full list and the reason for each one.
+- **Your own content inside our components keeps your styling.** When you pass
+  `children` or a render prop into an SDK component, we wrap it in an element
+  marked `data-yv-slot`. No SDK rule matches inside that wrapper, so our reset
+  and our type styles leave your markup alone. Inheritance still works the
+  normal way: your content inherits `color`, `font-size` and the rest from where
+  it sits, because a selector boundary does not stop inheritance. Two places do
+  not get the wrapper — `BibleReader.Root` children, and a picker `Trigger` you
+  render with `asChild`. Add `data-yv-slot` to your own wrapper element there.
+- **Your root font size no longer scales our components.** A page with
+  `html { font-size: 62.5% }` used to shrink every SDK size by 37.5 percent. Our
+  stylesheet now ships `px` instead of `rem`, and our root declares
+  `font-size: 16px`. Browser zoom still works. If you want our components to
+  scale with your type size, set `[data-yv-sdk] { font-size: … }` — that
+  property is one of the ones we leave to you.
+
+To change the appearance of the components, use a supported path:
+
+- **Design tokens.** Set `--yv-*` variables on `[data-yv-sdk]`. See
+  [Custom CSS variables](#custom-css-variables).
+- **Theme.** Use the `theme` prop on `YouVersionProvider`, or the `background`
+  prop on an individual component. See [Theming](#theming).
+- **Ask us.** If the tokens do not cover what you need,
+  [open an issue](https://github.com/youversion/platform-sdk-react/issues).
+
+For the full rationale, read
+[ADR-0005](https://github.com/youversion/platform-sdk-react/blob/main/docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md)
+,
+[ADR-0006](https://github.com/youversion/platform-sdk-react/blob/main/docs/adr/0006-layer-and-importantize-the-sdk-sheet.md)
+,
+[ADR-0007](https://github.com/youversion/platform-sdk-react/blob/main/docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md)
+and
+[ADR-0008](https://github.com/youversion/platform-sdk-react/blob/main/docs/adr/0008-stop-sdk-css-at-consumer-slots.md).
 
 ### Content Security Policy
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b9797d86..dec86cb2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,18 +29,19 @@
   "scripts": {
     "build:types": "tsc -p tsconfig.build.json",
     "build:js": "tsup",
-    "build:css": "tailwindcss -i src/styles/global.css -o dist/tailwind.css --minify",
+    "build:css": "tailwindcss -i src/styles/global.css -o .cache/tailwind.raw.css",
+    "build:css:scope": "node scripts/scope-selectors.mjs --minify",
     "verify:styles": "node scripts/verify-styles.js",
     "generate:i18n": "node scripts/generate-i18n-resources.mjs",
-    "build": "pnpm generate:i18n && pnpm build:css && pnpm build:js && pnpm verify:styles && pnpm build:types",
-    "dev": "concurrently \"node scripts/generate-i18n-resources.mjs --watch\" \"tailwindcss -i src/styles/global.css -o dist/tailwind.css --watch\" \"NODE_ENV=development tsup --watch\"",
+    "build": "pnpm generate:i18n && pnpm build:css && pnpm build:css:scope && pnpm build:js && pnpm verify:styles && pnpm build:types",
+    "dev": "concurrently \"node scripts/generate-i18n-resources.mjs --watch\" \"tailwindcss -i src/styles/global.css -o .cache/tailwind.raw.css --watch\" \"node scripts/scope-selectors.mjs --watch\" \"NODE_ENV=development tsup --watch\"",
     "test": "pnpm generate:i18n && vitest run --project unit",
     "test:watch": "pnpm generate:i18n && vitest --project unit",
     "test:coverage": "pnpm generate:i18n && vitest run --project unit --coverage",
     "typecheck": "pnpm generate:i18n && tsc --noEmit",
     "lint": "eslint . --max-warnings 0",
     "prepublishOnly": "YVP_PUBLISH_BUILD=true pnpm --filter @youversion/platform-core build && pnpm build && node ../../scripts/check-sdk-version-stamp.mjs ui",
-    "storybook": "concurrently \"node scripts/generate-i18n-resources.mjs --watch\" \"tailwindcss -i src/styles/global.css -o dist/tailwind.css --watch\" \"storybook dev -p 6006\"",
+    "storybook": "concurrently \"node scripts/generate-i18n-resources.mjs --watch\" \"tailwindcss -i src/styles/global.css -o .cache/tailwind.raw.css --watch\" \"node scripts/scope-selectors.mjs --watch\" \"storybook dev -p 6006\"",
     "build-storybook": "pnpm generate:i18n && storybook build",
     "test:integration": "vitest run"
   },
@@ -91,6 +92,7 @@
     "dotenv-cli": "7.4.2",
     "eslint-plugin-storybook": "10.3.5",
     "jsdom": "27.0.1",
+    "lightningcss": "1.31.1",
     "markdown-to-jsx": "^9.6.1",
     "msw": "2.13.4",
     "msw-storybook-addon": "2.0.7",
diff --git a/packages/ui/scripts/scope-selectors.d.mts b/packages/ui/scripts/scope-selectors.d.mts
new file mode 100644
index 00000000..31f625f2
--- /dev/null
+++ b/packages/ui/scripts/scope-selectors.d.mts
@@ -0,0 +1,32 @@
+/**
+ * Types for `scope-selectors.mjs`.
+ *
+ * The script itself is plain JavaScript, because the build runs it with bare
+ * `node`, before any TypeScript step exists. This declaration lets
+ * `src/styles/scope-selectors.test.ts` import the script under `--noEmit`.
+ */
+export interface ScopeCssOptions {
+  /** Minify the rewritten output. The published sheet is minified. The tests are not. */
+  minify?: boolean;
+  /** The filename that Lightning CSS reports in parse errors. */
+  filename?: string;
+}
+
+export interface ScopeCssResult {
+  /** The rewritten stylesheet. */
+  code: string;
+  /**
+   * Selectors that can still match consumer DOM, found by a second parse of
+   * `code`. A non-empty list is a build failure.
+   */
+  ungated: string[];
+  /**
+   * Everything else the second parse rejected: a missing `@layer yv` wrapper, a
+   * non-exempt declaration that is not important, `!important` inside a
+   * `@keyframes` body, or a keyframe-animated property that is not exempt. A
+   * non-empty list is a build failure.
+   */
+  problems: string[];
+}
+
+export declare function scopeCss(source: string, options?: ScopeCssOptions): ScopeCssResult;
diff --git a/packages/ui/scripts/scope-selectors.mjs b/packages/ui/scripts/scope-selectors.mjs
new file mode 100644
index 00000000..61dd77a5
--- /dev/null
+++ b/packages/ui/scripts/scope-selectors.mjs
@@ -0,0 +1,1464 @@
+#!/usr/bin/env node
+/**
+ * Hardens the compiled SDK stylesheet in three ways.
+ *
+ * 0. It converts every `rem` length to `px` at 1rem = 16px.
+ *
+ *      padding: .25rem  →  padding: 4px
+ *
+ *    This one is not a cascade fix, because the leak it closes is not in the
+ *    cascade. A `rem` resolves against the *document root* element, so a host
+ *    page with `html { font-size: 62.5% }` shrinks every `rem` the SDK ships by
+ *    37.5 percent. No selector, no layer and no `!important` can reach that. The
+ *    unit has to go. See docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md.
+ *
+ * 1. It adds a `[data-yv-sdk]` gate to every selector.
+ *
+ *      .yv\:mt-4
+ *        →  :is([data-yv-sdk],
+ *               [data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *))
+ *              ).yv\:mt-4
+ *
+ *    The gate is the outbound guarantee. SDK CSS cannot match DOM that the SDK
+ *    did not render, and it stops again at a `data-yv-slot` element, which is
+ *    where an SDK component renders consumer `children` or render-prop output.
+ *    Inside an SDK subtree, `:is()` adds exactly 0,1,0, for the attribute. The
+ *    slot exclusion sits inside `:where()`, which contributes zero, so the
+ *    boundary changes what the sheet *matches* and nothing about what it wins.
+ *    Our rules still override bare element selectors, and no consumer rule that
+ *    used to beat an SDK declaration stops doing so.
+ *    See docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+ *
+ * 2. It splits every rule in two, by property, and ships the halves differently.
+ *
+ *      @layer yv { … }   every property NOT in `EXEMPT_PROPERTIES`, `!important`
+ *      (no layer)        every property in `EXEMPT_PROPERTIES`, normal
+ *
+ * The layer and the `!important` are one decision, not two. They only work
+ * together.
+ *
+ *   - For a *normal* declaration, layer order runs low-to-high and unlayered
+ *     author CSS ranks highest. A layered SDK rule thus loses to any consumer
+ *     rule. That is why the SDK used to ship in no layer at all.
+ *   - For an *important* declaration, CSS Cascade 5 §6.1 reverses the layer
+ *     order, and unlayered-important ranks *last*. A layered important
+ *     declaration therefore beats an unlayered important one, whatever the
+ *     specificity on either side.
+ *
+ * So `@layer yv` plus `!important` beats a consumer's `button { padding: 2rem
+ * !important }` and their `#app button { padding: 1rem }` alike, while the two
+ * halves on their own each lose. Importance ranks above specificity, which is
+ * why the high-specificity case falls out for free.
+ *
+ * The split is what the exemption list costs. An exempt declaration must stay
+ * beatable by an inline style and by a running animation, so it cannot be
+ * important — and a *normal* declaration inside `@layer yv` loses to ordinary
+ * consumer CSS, which is strictly worse than shipping it in no layer. Measured:
+ * putting the whole sheet in the layer leaked `font-size` and `border-*-width`
+ * out of plain Tailwind Preflight, on 14 of the harness stories. The two halves
+ * never compete with each other, because they hold disjoint property sets, so
+ * splitting costs nothing in the SDK's own cascade.
+ *
+ * The one case this does not close: a consumer rule that is important *and*
+ * sits in a layer they declared before `yv`. That is deliberate. A consumer who
+ * writes that has opted into overriding us. An exempt property is the other
+ * documented residual, and it is the price of a working popover. See
+ * docs/style-isolation-residual-leak.md.
+ *
+ * The script uses Lightning CSS, not a regular expression and not
+ * postcss-prefix-selector, for three reasons. Its `Selector` visitor is a typed
+ * structural API, so it cannot corrupt an escaped class name such as
+ * `.yv\:mt-4`. `@keyframes`, `@font-face` and `@property` produce no `Selector`
+ * nodes and no `Rule.style` nodes, so the script skips them by construction
+ * rather than by an exclusion list. It also flattens CSS nesting, which is what
+ * makes the visitor safe: `bible-reader.css` and `@utility touch-hitbox` both
+ * emit nested `&` rules, and a prefix on a nested selector corrupts it. We
+ * rejected `postcss-prefix-selector@2.1.1`. It rewrites `:host` into
+ * `[data-yv-sdk] :host`, which can never match, and thus removes every theme
+ * variable without a warning.
+ *
+ * Usage:
+ *   node scripts/scope-selectors.mjs [--minify] [--watch] [--in=PATH] [--out=PATH]
+ *
+ * See docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md,
+ * docs/adr/0006-layer-and-importantize-the-sdk-sheet.md,
+ * docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md and YPE-4113.
+ */
+import { existsSync, mkdirSync, readFileSync, watch, writeFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { Features, transform } from 'lightningcss';
+
+const SCOPE_ATTRIBUTE = 'data-yv-sdk';
+
+/**
+ * The attribute that marks an element as holding consumer content.
+ *
+ * `data-yv-sdk` says "the SDK rendered this subtree". That is true of consumer
+ * `children` and render-prop output too, because an SDK component renders them
+ * inside its own stamped root. The gate alone therefore restyles content the SDK
+ * only passed through. `data-yv-slot` is the boundary that ends the subtree
+ * again: the element itself and everything under it is the consumer's.
+ *
+ * The same exclusion is hand-written in `packages/core/src/styles/theme.css`,
+ * which ships unprocessed as well as through this script. Keep the two in sync.
+ */
+const SLOT_ATTRIBUTE = 'data-yv-slot';
+
+/**
+ * The cascade layer that holds the whole SDK sheet.
+ *
+ * The name is `yv`, not `yv-sdk-something`. It is one layer, not a set of them.
+ * The earlier `yv-sdk-*` layers were sub-layers of a priority scheme that we
+ * deleted, and `verify-styles.js` still asserts that no `@layer yv-sdk-` name
+ * comes back.
+ */
+const LAYER_NAME = 'yv';
+
+/**
+ * Attributes that already limit a selector to SDK-rendered DOM.
+ *
+ * `bible-reader.css:1-2` matches `data-yv-sdk-bible-reader`, and nothing in the
+ * repo sets it today. It stays a valid gate. It is a documented public hook for
+ * non-React consumers who render Bible HTML themselves. A build failure for a
+ * rule that is already safe helps nobody.
+ */
+const GATE_ATTRIBUTES = new Set([SCOPE_ATTRIBUTE, 'data-yv-sdk-bible-reader']);
+
+/** `[data-slot='yv-bible-renderer']` is the attribute and value that `verse.tsx` stamps. */
+const GATE_ATTRIBUTE_VALUES = new Map([['data-slot', 'yv-bible-renderer']]);
+
+/**
+ * Pseudo-classes whose argument list can carry the gate for the selector.
+ *
+ * `:not()` is absent, because a gate inside a negation is the opposite of a
+ * gate. `:has()` is absent, because `.foo:has([data-yv-sdk])` matches consumer
+ * DOM.
+ */
+const GATE_BEARING_PSEUDO_CLASSES = new Set(['is', 'where', 'any']);
+
+/**
+ * Selectors that keep no gate.
+ *
+ * `:root` and `:host` carry Tailwind's theme variables, and every one of those
+ * variables has the `--yv-*` namespace. They declare nothing that renders and
+ * cannot collide, so a gate adds risk and gives no measurable gain. Change this
+ * in one case only: we need a strict guarantee that the SDK writes nothing at
+ * the document root.
+ */
+const UNSCOPED_PSEUDO_CLASSES = new Set(['root', 'host']);
+
+const ATTRIBUTE_OPERATORS = {
+  equal: '=',
+  includes: '~=',
+  'dash-match': '|=',
+  prefix: '^=',
+  substring: '*=',
+  suffix: '$=',
+};
+
+const COMBINATORS = {
+  descendant: ' ',
+  child: ' > ',
+  'next-sibling': ' + ',
+  'later-sibling': ' ~ ',
+  deep: ' >>> ',
+  'deep-descendant': ' /deep/ ',
+};
+
+/**
+ * A new `:where(:not([data-yv-slot], [data-yv-slot] *))` node.
+ *
+ * Two branches inside the `:not()`, not one. `[data-yv-slot]` alone would
+ * exclude the slot element and then restyle every one of its children, which is
+ * the whole of the consumer content.
+ *
+ * The `:where()` wrapper is what keeps the gate at 0,1,0. A bare `:not()` takes
+ * the specificity of its most specific argument, so it would add 0,1,0 of its
+ * own and lift every SDK rule to 0,2,0. That is not free: `font-size`,
+ * `background-color` and `border-*-width` ship in the *unlayered, normal* half
+ * of the sheet, and a uniform rise lifts those declarations above an ordinary
+ * consumer rule at 0,1,0. Measured on the harness: consumer content that is not
+ * in a slot went from 255 leaks to 416. `:where()` contributes zero, so the
+ * exclusion changes what matches without changing what wins.
+ * See docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+ */
+function slotExclusion() {
+  const attribute = { type: 'attribute', namespace: null, name: SLOT_ATTRIBUTE, operation: null };
+
+  return {
+    type: 'pseudo-class',
+    kind: 'where',
+    selectors: [
+      [
+        {
+          type: 'pseudo-class',
+          kind: 'not',
+          selectors: [
+            [attribute],
+            [attribute, { type: 'combinator', value: 'descendant' }, { type: 'universal' }],
+          ],
+        },
+      ],
+    ],
+  };
+}
+
+/**
+ * A new `:is([data-yv-sdk], [data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *)))`
+ * node.
+ *
+ * The first branch is the SDK root itself, which no consumer slot can be. The
+ * second branch is everything under it *except* a slot and a slot's descendants.
+ * Lightning CSS prints `[data-yv-sdk] :where(…)` for the second branch: it drops
+ * the redundant `*`, and the two forms are the same selector at the same
+ * specificity.
+ */
+function scopeGate() {
+  const attribute = { type: 'attribute', namespace: null, name: SCOPE_ATTRIBUTE, operation: null };
+
+  return {
+    type: 'pseudo-class',
+    kind: 'is',
+    selectors: [
+      [attribute],
+      [
+        attribute,
+        { type: 'combinator', value: 'descendant' },
+        { type: 'universal' },
+        slotExclusion(),
+      ],
+    ],
+  };
+}
+
+function isGateAttribute(component) {
+  if (GATE_ATTRIBUTES.has(component.name)) return true;
+
+  const required = GATE_ATTRIBUTE_VALUES.get(component.name);
+  return (
+    required !== undefined &&
+    component.operation?.operator === 'equal' &&
+    component.operation.value === required
+  );
+}
+
+/** True when the selector cannot match outside an SDK-rendered subtree. */
+function hasScopeGate(components) {
+  return components.some((component) => {
+    if (component.type === 'attribute') return isGateAttribute(component);
+
+    if (
+      component.type === 'pseudo-class' &&
+      GATE_BEARING_PSEUDO_CLASSES.has(component.kind) &&
+      Array.isArray(component.selectors) &&
+      component.selectors.length > 0
+    ) {
+      // Every branch, not some branches. `:is([data-yv-sdk], .card)` still
+      // reaches consumer DOM through its second branch.
+      return component.selectors.every(hasScopeGate);
+    }
+
+    return false;
+  });
+}
+
+function isUnscopedByDesign(components) {
+  return (
+    components.length === 1 &&
+    components[0].type === 'pseudo-class' &&
+    UNSCOPED_PSEUDO_CLASSES.has(components[0].kind)
+  );
+}
+
+function isAllowed(components) {
+  return hasScopeGate(components) || isUnscopedByDesign(components);
+}
+
+/**
+ * True when `component` is exactly `:where(:not([data-yv-slot], [data-yv-slot] *))`.
+ *
+ * A bare `:not([data-yv-slot], [data-yv-slot] *)` also passes. It excludes the
+ * same elements. It costs 0,1,0 to do it, which is the whole reason the shipped
+ * form wraps it in `:where()`, but a hand-written selector that pays that cost
+ * is still correct about what it matches, so the check accepts it.
+ */
+function isSlotExclusion(component) {
+  if (component.type !== 'pseudo-class') return false;
+
+  if (component.kind === 'where') {
+    return (
+      Array.isArray(component.selectors) &&
+      component.selectors.length === 1 &&
+      component.selectors[0].length === 1 &&
+      isSlotExclusion(component.selectors[0][0])
+    );
+  }
+
+  if (component.kind !== 'not') return false;
+  if (!Array.isArray(component.selectors) || component.selectors.length !== 2) return false;
+
+  const isSlotAttribute = (node) =>
+    node?.type === 'attribute' && node.name === SLOT_ATTRIBUTE && !node.operation;
+
+  const [own, descendants] = component.selectors;
+
+  return (
+    own.length === 1 &&
+    isSlotAttribute(own[0]) &&
+    descendants.length === 3 &&
+    isSlotAttribute(descendants[0]) &&
+    descendants[1]?.type === 'combinator' &&
+    descendants[1].value === 'descendant' &&
+    descendants[2]?.type === 'universal'
+  );
+}
+
+/** Splits a complex selector into its compounds, dropping the combinators. */
+function compoundsOf(components) {
+  const compounds = [[]];
+
+  for (const component of components) {
+    if (component.type === 'combinator') compounds.push([]);
+    else compounds[compounds.length - 1].push(component);
+  }
+
+  return compounds;
+}
+
+/**
+ * Reports every selector that reaches past a `[data-yv-sdk]` element and does
+ * not stop at a slot.
+ *
+ * The rule is on the *subject* compound, which is the one after the last
+ * combinator. That is the element the rule styles. `[data-yv-sdk]:not(…) a`
+ * excludes the wrong element and still restyles the consumer's link.
+ *
+ * A branch of `:is()` or `:where()` is a complex selector in its own right, so
+ * the walk recurses into one. That is where the injected gate lives, and where
+ * the `dark` custom variant in `src/styles/global.css` lives.
+ *
+ * Known limit: the check reads the `data-yv-sdk` attribute where it appears
+ * literally in a compound. It does not fire for a Tailwind variant whose subject
+ * sits past the gate compound, such as `.yv\:space-y-4 > :not(:last-child)`,
+ * where the gate is inside an `:is()` on the *first* compound. Those selectors
+ * can still reach the slot wrapper the SDK renders. They cannot reach the
+ * consumer's own elements below it, because a child combinator does not go that
+ * deep, and the reverse-direction harness measures the result.
+ * See docs/style-isolation-residual-leak.md.
+ *
+ * @returns {string[]} the offending selectors, approximately formatted.
+ */
+function findSlotLeaks(components) {
+  const leaks = [];
+  const compounds = compoundsOf(components);
+  const subject = compounds[compounds.length - 1] ?? [];
+
+  const bearsScope = (compound) =>
+    compound.some((component) => component.type === 'attribute' && component.name === SCOPE_ATTRIBUTE);
+
+  if (compounds.slice(0, -1).some(bearsScope) && !subject.some(isSlotExclusion)) {
+    leaks.push(formatSelector(components));
+  }
+
+  for (const compound of compounds) {
+    for (const component of compound) {
+      if (
+        component.type === 'pseudo-class' &&
+        GATE_BEARING_PSEUDO_CLASSES.has(component.kind) &&
+        Array.isArray(component.selectors)
+      ) {
+        for (const branch of component.selectors) leaks.push(...findSlotLeaks(branch));
+      }
+    }
+  }
+
+  return leaks;
+}
+
+/**
+ * Puts the gate into the first compound of the selector.
+ *
+ * The gate goes at position 0, unless a type or universal selector is there
+ * already. `:is(…)a` is invalid CSS, and `a:is(…)` is valid. A gate on the first
+ * compound is enough for the whole selector. Anything that the rest of the
+ * selector matches is a descendant of an element inside the SDK subtree.
+ */
+function gateSelector(components) {
+  if (isAllowed(components)) return components;
+
+  const first = components[0];
+  const index = first && (first.type === 'type' || first.type === 'universal') ? 1 : 0;
+
+  return [...components.slice(0, index), scopeGate(), ...components.slice(index)];
+}
+
+function formatComponent(component) {
+  switch (component.type) {
+    case 'universal':
+      return '*';
+    case 'type':
+      return component.name;
+    case 'class':
+      return `.${component.name}`;
+    case 'id':
+      return `#${component.name}`;
+    case 'nesting':
+      return '&';
+    case 'combinator':
+      return COMBINATORS[component.value] ?? ' ';
+    case 'attribute': {
+      if (!component.operation) return `[${component.name}]`;
+      const operator = ATTRIBUTE_OPERATORS[component.operation.operator] ?? '=';
+      return `[${component.name}${operator}'${component.operation.value}']`;
+    }
+    case 'pseudo-class':
+      return Array.isArray(component.selectors)
+        ? `:${component.kind}(${component.selectors.map(formatSelector).join(', ')})`
+        : `:${component.kind}`;
+    case 'pseudo-element':
+      return `::${component.kind}`;
+    default:
+      return `<${component.type}>`;
+  }
+}
+
+/** Approximate selector text, used only in the build-failure message. */
+function formatSelector(components) {
+  return components.map(formatComponent).join('');
+}
+
+/* -------------------------------------------------------------------------- */
+/* Root font size                                                              */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The pixel value that one `rem` becomes.
+ *
+ * 16 is the initial value of `font-size`, which is what `medium` computes to in
+ * every major browser at its default settings. It is therefore the value a
+ * `rem` already had for a host that never touched the root font size, so the
+ * conversion changes nothing for that host. It only removes the SDK's response
+ * to a host that did touch it.
+ */
+const ROOT_FONT_SIZE_PX = 16;
+
+/**
+ * Rewrites one `rem` length as the `px` length it means at a 16px root.
+ *
+ * Lightning CSS calls this for every length in the sheet, and only for lengths.
+ * A selector is never a length, so `.yv\:text-\[0\.5rem\]` and the `.rem` class
+ * in `bible-reader.css` are untouched. That is the whole reason this pass uses a
+ * visitor and not a text pass: the string `rem` appears in both.
+ *
+ * The `Length` visitor is not affected by the `var()` round-trip bug that forces
+ * `splitByImportance` into text surgery. That bug is in the `Declaration`
+ * visitor. A length inside `var(--x, 0 0 1rem #000)` converts correctly, and so
+ * does a length inside `calc()`, inside a `@keyframes` body, inside a `--yv-*`
+ * custom property and inside a media query condition.
+ *
+ * Four places deserve their own note:
+ *
+ *   - **Custom properties.** `--yv-spacing: .25rem` becomes `4px`. This is where
+ *     most of the win is. Tailwind writes almost every spacing utility as
+ *     `calc(var(--yv-spacing) * 4)`, so one token carries hundreds of rules.
+ *   - **`calc()` and `var()` fallbacks.** Converted in place. A `calc()` that
+ *     mixes units, such as `calc(100vw - 2rem)`, keeps its shape and loses only
+ *     the `rem` term.
+ *   - **Media query conditions.** A `rem` in a media query never tracked the root
+ *     element to begin with. Media Queries 4 §1.3 says relative units in a query
+ *     resolve against the *initial* value of `font-size`, so that a declaration
+ *     can never change which query matches. Converting at 16px is therefore
+ *     exact for a reader on browser defaults. It is not exact for a reader who
+ *     raised the browser's default font size, whose breakpoints stop moving with
+ *     it. ADR-0007 records that.
+ *   - **`@keyframes`.** Converted like any other declaration. A frame is not a
+ *     cascaded declaration, so nothing here interacts with the exemption list.
+ *
+ * @param {{ unit: string, value: number }} length
+ * @returns {{ unit: string, value: number } | undefined} The replacement, or
+ *   `undefined` to keep the length as it is.
+ */
+function rebaseLength(length) {
+  if (length.unit !== 'rem') return undefined;
+  return { unit: 'px', value: length.value * ROOT_FONT_SIZE_PX };
+}
+
+/* -------------------------------------------------------------------------- */
+/* Importance                                                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The properties that stay *normal* when everything else becomes `!important`.
+ *
+ * Blanket importantization is wrong, and the reason is the cascade order itself.
+ * An author `!important` declaration outranks both the inline `style` attribute
+ * and the CSS animation origin. So an important declaration of a property that
+ * something else drives at runtime does not "win an argument". It removes the
+ * runtime behaviour.
+ *
+ * Every entry below is a property that something outside this stylesheet must
+ * be able to set. Each family says who sets it and what breaks without the
+ * exemption. Nothing goes on this list because it "feels risky".
+ *
+ * Two rules keep the list honest:
+ *
+ *   - A shorthand is exempt when any of its longhands is exempt. See
+ *     `EXEMPT_SHORTHAND_PROPERTIES`.
+ *   - The verification pass fails the build when a `@keyframes` in this sheet
+ *     animates a property that is not on this list. The list cannot silently
+ *     fall behind the animations.
+ */
+const EXEMPT_PROPERTIES = new Set([
+  /*
+   * 1. Animated by a `@keyframes` inside this sheet.
+   *
+   * An important cascaded declaration outranks the animation origin, so an
+   * important `opacity` freezes every fade at its declared value. These four
+   * are the properties that `tw-animate-css` and our own keyframes animate:
+   * spin and pulse (`transform`, `opacity`), the Radix enter/exit set
+   * (`opacity`, `transform`, `filter`), accordion-down/up (`height`).
+   */
+  'opacity',
+  'transform',
+  'height',
+  'filter',
+
+  /*
+   * 2. Composes with `transform` at runtime.
+   *
+   * `translate`, `scale` and `rotate` are independent transform properties, and
+   * `transform-origin` and friends change what a transform means. Importantizing
+   * half of the transform pipeline while the animated half stays normal produces
+   * a transform that is right in neither state.
+   */
+  'translate',
+  'scale',
+  'rotate',
+  'transform-origin',
+  'transform-style',
+  'transform-box',
+  'perspective',
+  'perspective-origin',
+  'backface-visibility',
+  'will-change',
+
+  /*
+   * 3. Drives an animation or a transition.
+   *
+   * Radix `Presence` writes `animation-fill-mode` inline to hold an exit frame
+   * while it measures. An important `animation-fill-mode` unmounts the element
+   * mid-exit. The rest of the family is here for the same reason: these
+   * properties are the controls, and a control that cannot be changed is not a
+   * control.
+   */
+  'animation',
+  'animation-name',
+  'animation-duration',
+  'animation-timing-function',
+  'animation-delay',
+  'animation-iteration-count',
+  'animation-direction',
+  'animation-fill-mode',
+  'animation-play-state',
+  'animation-composition',
+  'animation-timeline',
+  'animation-range',
+  'animation-range-start',
+  'animation-range-end',
+  'transition',
+  'transition-property',
+  'transition-duration',
+  'transition-timing-function',
+  'transition-delay',
+  'transition-behavior',
+
+  /*
+   * 4. Written as an inline style by Radix or floating-ui.
+   *
+   * The Radix Popper wrapper positions poppers and dialogs with an inline
+   * `style`: `position`, `left`, `top`, `transform`, `will-change`, `min-width`,
+   * `z-index`, `visibility`. `DismissableLayer` and the Dialog overlay write
+   * `pointer-events`. An important declaration of any of these pins the popover
+   * to wherever our utility class put it, which is the top-left corner of the
+   * viewport.
+   */
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'inset',
+  'inset-block',
+  'inset-block-start',
+  'inset-block-end',
+  'inset-inline',
+  'inset-inline-start',
+  'inset-inline-end',
+  'z-index',
+  'min-width',
+  'visibility',
+  'pointer-events',
+
+  /*
+   * 5. Written as an inline style by an SDK component.
+   *
+   * Tailwind Preflight and `theme.css` are compiled *into* this sheet, and both
+   * declare `background-color` and `border-*` on bare elements. Importantizing
+   * them makes this sheet beat our own components:
+   *
+   *   - `font-size`: verse.tsx, bible-reader.tsx, bible-version-picker.tsx
+   *   - `background-color` and `border`: the highlight swatch in
+   *     verse-action-popover.tsx
+   *   - `border-color` and `border-width`: YouVersionAuthButton
+   *   - `height`: animated-height.tsx (already exempt under family 1)
+   */
+  'font-size',
+  'background-color',
+  'border-width',
+  'border-top-width',
+  'border-right-width',
+  'border-bottom-width',
+  'border-left-width',
+  'border-block-start-width',
+  'border-block-end-width',
+  'border-inline-start-width',
+  'border-inline-end-width',
+  'border-color',
+  'border-top-color',
+  'border-right-color',
+  'border-bottom-color',
+  'border-left-color',
+  'border-block-start-color',
+  'border-block-end-color',
+  'border-inline-start-color',
+  'border-inline-end-color',
+  'border-style',
+  'border-top-style',
+  'border-right-style',
+  'border-bottom-style',
+  'border-left-style',
+  'border-block-start-style',
+  'border-block-end-style',
+  'border-inline-start-style',
+  'border-inline-end-style',
+]);
+
+/**
+ * Shorthands that hold at least one exempt longhand.
+ *
+ * `font: inherit !important` would freeze `font-size`, which an SDK component
+ * sets inline. The comment on each entry names the exempt longhand that puts it
+ * here. `inset`, `transition` and `animation` are shorthands too, and they are
+ * already in `EXEMPT_PROPERTIES` because every one of their longhands is exempt.
+ */
+const EXEMPT_SHORTHAND_PROPERTIES = new Set([
+  'font', // font-size
+  'background', // background-color
+
+  /*
+   * `border` reaches this sheet as Preflight's `border: 0 solid` on every
+   * element. Important, it erases the highlight swatch's inline
+   * `border: 1px solid rgba(…)` in verse-action-popover.tsx, and the inline
+   * `borderColor` / `borderWidth` on YouVersionAuthButton.
+   */
+  'border',
+  'border-top', // border-top-width / -color / -style
+  'border-right',
+  'border-bottom',
+  'border-left',
+  'border-block',
+  'border-block-start',
+  'border-block-end',
+  'border-inline',
+  'border-inline-start',
+  'border-inline-end',
+  'all', // every longhand, exempt ones included
+]);
+
+const VENDOR_PREFIX = /^-(?:webkit|moz|ms|o|khtml|epub)-/;
+
+/**
+ * The property name a Lightning CSS declaration node carries.
+ *
+ * Three shapes exist. A known property is `{ property: 'color' }`. A property
+ * whose value holds a `var()` is `{ property: 'unparsed', value: { propertyId }
+ * }`. A custom property is `{ property: 'custom', value: { name } }`.
+ */
+function declarationProperty(declaration) {
+  if (declaration.property === 'custom') {
+    return typeof declaration.value?.name === 'string' ? declaration.value.name : 'custom';
+  }
+
+  if (declaration.property === 'unparsed') {
+    const propertyId = declaration.value?.propertyId;
+    if (!propertyId) return 'unparsed';
+    return propertyId.property === 'custom' && typeof propertyId.name === 'string'
+      ? propertyId.name
+      : propertyId.property;
+  }
+
+  return declaration.property;
+}
+
+/**
+ * True when the declaration must stay normal.
+ *
+ * Custom properties are exempt as a family. Two reasons, and either is enough.
+ * `--yv-*` tokens are the supported customization API, and an important token
+ * cannot be overridden by the consumer, which is the whole point of a token.
+ * Tailwind writes `--tw-*` fallbacks into its own `@layer properties` block, and
+ * that block is a *lower*-priority fallback for the same names. Importantizing
+ * both sides reverses which one wins, because layer order reverses for
+ * important declarations.
+ */
+function isExemptProperty(property) {
+  if (property.startsWith('--')) return true;
+
+  const name = property.replace(VENDOR_PREFIX, '');
+  return EXEMPT_PROPERTIES.has(name) || EXEMPT_SHORTHAND_PROPERTIES.has(name);
+}
+
+/**
+ * At-rules whose block holds descriptors, not declarations.
+ *
+ * `!important` is invalid in every one of these, and a browser drops the whole
+ * descriptor when it sees one. Inside `@keyframes` that is the worst case: the
+ * frame silently stops animating the property. The walk does not descend into
+ * these blocks at all.
+ */
+const DESCRIPTOR_AT_RULES = new Set([
+  'keyframes',
+  '-webkit-keyframes',
+  '-moz-keyframes',
+  'font-face',
+  'property',
+  'counter-style',
+  'font-palette-values',
+  'font-feature-values',
+  'view-transition',
+  'position-try',
+  'color-profile',
+  'page',
+  'viewport',
+]);
+
+/**
+ * At-rules whose block holds whatever its parent's block held.
+ *
+ * `@media`, `@supports` and friends are conditions around content. At the top
+ * level their content is rules; inside a style rule it is declarations. The walk
+ * therefore carries the parent's context through them unchanged.
+ */
+const CONDITIONAL_AT_RULES = new Set([
+  'media',
+  'supports',
+  'container',
+  'layer',
+  'scope',
+  'starting-style',
+  'document',
+]);
+
+/** Matches a declaration that is already important. */
+const ALREADY_IMPORTANT = /!\s*important\s*$/i;
+
+/**
+ * Splits `code` into the half that goes in `@layer yv` and the half that does
+ * not, marking the first half `!important`.
+ *
+ * Every non-exempt declaration goes to `layered` and gains `!important`. Every
+ * exempt declaration goes to `unlayered` unchanged. A rule that holds both kinds
+ * is emitted twice, once in each half, under the same selector. Descriptor
+ * at-rules — `@keyframes`, `@font-face`, `@property` — go to `unlayered` whole:
+ * they declare no cascading declarations, and `!important` is invalid in them.
+ *
+ * This is text surgery, and it is deliberate. Lightning CSS 1.31.1 cannot
+ * round-trip a declaration through its JS visitor API once the value holds a
+ * `var()`: returning the node throws `failed to deserialize; expected an
+ * object-like struct named Specifier`. Mutating the node in place is ignored.
+ * `Declaration` and `DeclarationExit` fail the same way. Nearly every rule in
+ * this sheet reads a `--yv-*` or `--tw-*` token, so the visitor route covers
+ * almost nothing of what has to be covered.
+ *
+ * What makes the surgery safe is not the walk below. It is `verifyOutput`, which
+ * parses the result and fails the build when any non-exempt declaration is still
+ * normal, when an exempt one became important, or when the text no longer parses
+ * at all. A walk that mis-read the sheet cannot ship.
+ *
+ * @param {string} code Printed CSS.
+ * @param {boolean} minify Whether the printed CSS is minified.
+ * @returns {{ layered: string, unlayered: string, exemptAlreadyImportant: Set<string> }}
+ *   The two halves, and the exempt properties that were already important on the
+ *   way in. `verifyOutput` needs the third value to tell "the source shipped
+ *   this" from "the walk importantized something it must not have".
+ */
+function splitByImportance(code, minify) {
+  const exemptAlreadyImportant = new Set();
+  const suffix = minify ? '!important' : ' !important';
+
+  /** Routes one declaration to a half, keeping its surrounding whitespace. */
+  function routeDeclaration(statement, halves) {
+    const [, before, text, after] = /^(\s*)([\s\S]*?)(\s*)$/.exec(statement);
+    if (text === '') return;
+
+    const colon = text.indexOf(':');
+    if (colon === -1) {
+      halves.unlayered += statement + ';';
+      return;
+    }
+
+    const property = text.slice(0, colon).trim().toLowerCase();
+    const exempt = isExemptProperty(property);
+
+    if (ALREADY_IMPORTANT.test(text)) {
+      if (exempt) exemptAlreadyImportant.add(property);
+      // An `!important` the author wrote. It keeps whichever half its property
+      // belongs to, so `yv:h-6!` stays as important and unlayered as it was.
+      halves[exempt ? 'unlayered' : 'layered'] += statement + ';';
+      return;
+    }
+
+    if (exempt) halves.unlayered += statement + ';';
+    else halves.layered += `${before}${text}${suffix}${after};`;
+  }
+
+  /** Splits one `prelude { body }` rule into its two halves. */
+  function splitRule(prelude, body, declarationContext) {
+    const at = /^@([\w-]+)/.exec(prelude.trim());
+    const name = at?.[1].toLowerCase();
+
+    if (name && DESCRIPTOR_AT_RULES.has(name)) return { layered: '', unlayered: body };
+    if (name && CONDITIONAL_AT_RULES.has(name)) return walk(body, declarationContext);
+    return walk(body, name ? declarationContext : true);
+  }
+
+  /**
+   * Splits the contents of one block.
+   *
+   * `declarationContext` says what a `;`-terminated statement is here. Inside a
+   * style rule it is a declaration. At the top level, or inside `@media` at the
+   * top level, it is an at-statement such as `@import` or `@layer yv;`. Those go
+   * to `unlayered` untouched, where `assembleSheet` lifts them back to the top.
+   */
+  function walk(body, declarationContext) {
+    const halves = { layered: '', unlayered: '' };
+    let start = 0;
+    let parens = 0;
+
+    const flush = (statement) => {
+      if (declarationContext) routeDeclaration(statement, halves);
+      else if (statement.trim() !== '') halves.unlayered += statement + ';';
+    };
+
+    for (let index = 0; index < body.length; index += 1) {
+      const character = body[index];
+
+      if (character === '/' && body[index + 1] === '*') {
+        const end = body.indexOf('*/', index + 2);
+        index = end === -1 ? body.length : end + 1;
+        continue;
+      }
+      if (character === '"' || character === "'") {
+        index = skipString(body, index);
+        continue;
+      }
+      if (character === '\\') {
+        index += 1;
+        continue;
+      }
+      if (character === '(') {
+        parens += 1;
+        continue;
+      }
+      if (character === ')') {
+        parens -= 1;
+        continue;
+      }
+      if (parens > 0) continue;
+
+      if (character === ';') {
+        flush(body.slice(start, index));
+        start = index + 1;
+        continue;
+      }
+      if (character === '{') {
+        const close = findBlockEnd(body, index);
+        const prelude = body.slice(start, index);
+        const inner = splitRule(prelude, body.slice(index + 1, close), declarationContext);
+
+        // An empty half means this rule had nothing of that kind. Emitting the
+        // wrapper anyway would ship an empty rule for most of the sheet.
+        for (const half of ['layered', 'unlayered']) {
+          if (inner[half].trim() === '') continue;
+          // The pretty-printed path loses the newline that used to sit before
+          // the closing brace, because it belonged to the dropped `;`.
+          const tail = minify || inner[half].endsWith('\n') ? '' : '\n';
+          halves[half] += `${prelude}{${inner[half]}${tail}}`;
+        }
+
+        index = close;
+        start = index + 1;
+      }
+    }
+
+    flush(body.slice(start));
+
+    // A block's last declaration needs no `;`, and the minifier drops it. We
+    // append one after every declaration and drop the last again here, rather
+    // than look ahead to find out which declaration ends up last in its half.
+    if (minify && declarationContext) {
+      for (const half of ['layered', 'unlayered']) {
+        if (halves[half].endsWith(';')) halves[half] = halves[half].slice(0, -1);
+      }
+    }
+
+    return halves;
+  }
+
+  return { ...walk(code, false), exemptAlreadyImportant };
+}
+
+/** The index of the `}` that closes the `{` at `open`. */
+function findBlockEnd(code, open) {
+  let depth = 0;
+
+  for (let index = open; index < code.length; index += 1) {
+    const character = code[index];
+
+    if (character === '/' && code[index + 1] === '*') {
+      const end = code.indexOf('*/', index + 2);
+      index = end === -1 ? code.length : end + 1;
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      index = skipString(code, index);
+      continue;
+    }
+    if (character === '\\') {
+      index += 1;
+      continue;
+    }
+    if (character === '{') depth += 1;
+    if (character === '}') {
+      depth -= 1;
+      if (depth === 0) return index;
+    }
+  }
+
+  return code.length;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Layer wrapper                                                               */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Splits `code` into the at-statements that must stay at the top, and the rest.
+ *
+ * `@charset` has to be the very first byte of the file. `@import` has to precede
+ * every rule, and `@layer <name>;` is one of the two things allowed before it.
+ * The output order is therefore charset, `@layer yv;`, imports, then the block.
+ */
+function splitLeadingStatements(code) {
+  let cursor = 0;
+
+  const consumeWhitespace = () => {
+    while (cursor < code.length && /\s/.test(code[cursor])) cursor += 1;
+  };
+
+  if (/^@charset\b/i.test(code)) {
+    const end = findStatementEnd(code, 0);
+    if (end !== -1) {
+      cursor = end + 1;
+      consumeWhitespace();
+    }
+  }
+
+  const charset = code.slice(0, cursor);
+  const headStart = cursor;
+
+  for (;;) {
+    consumeWhitespace();
+
+    if (code.startsWith('/*', cursor)) {
+      const end = code.indexOf('*/', cursor + 2);
+      cursor = end === -1 ? code.length : end + 2;
+      continue;
+    }
+    if (!/^@import\b/i.test(code.slice(cursor, cursor + 8))) break;
+
+    const end = findStatementEnd(code, cursor);
+    if (end === -1) break;
+    cursor = end + 1;
+  }
+
+  return { charset, head: code.slice(headStart, cursor), body: code.slice(cursor) };
+}
+
+/**
+ * The index of the `;` that ends the statement starting at `start`, or -1.
+ *
+ * This has to skip strings, and that is not a detail. The sheet's one `@import`
+ * is a Google Fonts URL, and `family=Inter:wght@400;700` puts a semicolon inside
+ * the quoted URL. A regex that stops at the first `;` cuts the statement in half
+ * and produces CSS that no longer parses.
+ */
+function findStatementEnd(code, start) {
+  for (let index = start; index < code.length; index += 1) {
+    const character = code[index];
+
+    if (character === '/' && code[index + 1] === '*') {
+      const end = code.indexOf('*/', index + 2);
+      index = end === -1 ? code.length : end + 1;
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      index = skipString(code, index);
+      continue;
+    }
+    if (character === '\\') {
+      index += 1;
+      continue;
+    }
+    if (character === ';') return index;
+    if (character === '{') return -1;
+  }
+
+  return -1;
+}
+
+/**
+ * Joins the two halves into the sheet that ships.
+ *
+ * The order is `@charset`, `@layer yv;`, the `@import`s, the unlayered half,
+ * then the `@layer yv { … }` block. The first three are where the parser
+ * requires them: `@charset` is the first byte, `@import` precedes every rule,
+ * and a bare `@layer <name>;` is one of the two things allowed before an
+ * `@import`. Declaring `yv` there, rather than letting the block declare it,
+ * puts the sheet's layer on the first line where a reader looks for it.
+ *
+ * The two halves' relative order carries no meaning. They hold disjoint property
+ * sets, so no declaration in one ever competes with a declaration in the other.
+ *
+ * Tailwind emits an `@layer properties` block of its own, for the `@property`
+ * fallback, whatever our directives say. Its contents are all `--tw-*` custom
+ * properties, which are exempt, so the whole block lands in the unlayered half
+ * and keeps the shape Tailwind shipped: a lower-priority fallback for the same
+ * names, in the same place in the cascade it has today.
+ *
+ * This runs after the last Lightning CSS print, and it has to. Lightning CSS
+ * treats the leading `@layer yv;` as redundant next to a block that declares the
+ * same name and prints only the block. `verifyOutput` parses the result, so an
+ * assembly that produced invalid CSS fails the build rather than shipping.
+ */
+function assembleSheet(layered, unlayered, minify) {
+  const { charset, head, body } = splitLeadingStatements(unlayered);
+
+  const open = minify ? '{' : ' {\n';
+  const close = minify ? '}' : '\n}\n';
+  const gap = minify ? '' : '\n';
+  const layer =
+    layered.trim() === '' ? '' : `@layer ${LAYER_NAME}${open}${layered}${close}${gap}`;
+
+  return `${charset}@layer ${LAYER_NAME};${gap}${head}${body}${gap}${layer}`;
+}
+
+/** Advances past a quoted string that starts at `index`. */
+function skipString(code, index) {
+  const quote = code[index];
+
+  for (let cursor = index + 1; cursor < code.length; cursor += 1) {
+    if (code[cursor] === '\\') {
+      cursor += 1;
+      continue;
+    }
+    if (code[cursor] === quote) return cursor;
+  }
+
+  return code.length;
+}
+
+/**
+ * The `{ … }` blocks at nesting depth zero, with the prelude that introduces
+ * each one. Comments, strings and escapes are skipped, so a `}` inside
+ * `content: "}"` or an escaped class name cannot shift the depth.
+ */
+function findTopLevelBlocks(code) {
+  const blocks = [];
+  let depth = 0;
+  let preludeStart = 0;
+
+  for (let index = 0; index < code.length; index += 1) {
+    const character = code[index];
+
+    if (character === '/' && code[index + 1] === '*') {
+      const end = code.indexOf('*/', index + 2);
+      index = end === -1 ? code.length : end + 1;
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      index = skipString(code, index);
+      continue;
+    }
+    if (character === '\\') {
+      index += 1;
+      continue;
+    }
+    if (character === '{') {
+      if (depth === 0) blocks.push({ prelude: code.slice(preludeStart, index).trim(), open: index });
+      depth += 1;
+      continue;
+    }
+    if (character === '}') {
+      depth -= 1;
+      if (depth === 0 && blocks.length > 0) {
+        blocks[blocks.length - 1].close = index;
+        // The next block's prelude starts here, not at the last `;`. Without
+        // this, the block after a block reads its prelude as `}@layer yv`.
+        preludeStart = index + 1;
+      }
+      continue;
+    }
+    if (character === ';' && depth === 0) preludeStart = index + 1;
+  }
+
+  return blocks;
+}
+
+/**
+ * Structural check on the layer.
+ *
+ * The sheet must declare `yv` first, hold exactly one `@layer yv` block, and end
+ * with it. One block, because a second one would let the two halves of a split
+ * rule interleave in a way the assembler never intended. Last, because that is
+ * where the assembler puts it, and a rule that drifted out of the block is a
+ * rule whose `!important` no longer has a layer behind it.
+ */
+function findLayerProblems(code) {
+  const problems = [];
+
+  if (!new RegExp(`^\\s*(?:@charset\\b[^;]*;\\s*)?@layer\\s+${LAYER_NAME}\\s*;`).test(code)) {
+    problems.push(`the output does not open with \`@layer ${LAYER_NAME};\``);
+  }
+
+  const blocks = findTopLevelBlocks(code);
+  const wrappers = blocks.filter((block) => block.prelude === `@layer ${LAYER_NAME}`);
+
+  // Zero is legal, and only for a sheet whose every declaration is exempt. The
+  // `unimportant` check is what catches a layered half that went empty by
+  // mistake: it fires on the first non-exempt declaration left normal.
+  if (wrappers.length > 1) {
+    problems.push(
+      `the output has ${String(wrappers.length)} \`@layer ${LAYER_NAME}\` blocks; ` +
+        `it must have at most one`,
+    );
+    return problems;
+  }
+  if (wrappers.length === 0) return problems;
+
+  const [wrapper] = wrappers;
+
+  if (wrapper !== blocks[blocks.length - 1]) {
+    problems.push(`the \`@layer ${LAYER_NAME}\` block is not the last block in the sheet`);
+  }
+  if (wrapper.close === undefined || code.slice(wrapper.close + 1).trim() !== '') {
+    problems.push(`the output has content after the \`@layer ${LAYER_NAME}\` block`);
+  }
+
+  return problems;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Verification                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Parses the rewritten CSS again and reports everything that must not ship.
+ *
+ * This is the real guarantee. A string search proves that the script ran. Only
+ * a second parse proves that the script left nothing behind. The build has no
+ * browser, so these seven checks stand in for what a person would otherwise have
+ * to look for by hand:
+ *
+ *   1. Every selector carries the gate.
+ *   1a. Every selector that reaches past a `[data-yv-sdk]` element stops at a
+ *      slot, so consumer `children` keep the consumer's own styling.
+ *   2. Every non-exempt declaration is important, so no ordinary consumer rule
+ *      outranks it.
+ *   3. No exempt declaration is important, so nothing froze an animation or
+ *      pinned a popover. This is the check that makes the text pass in
+ *      `importantizeCss` safe.
+ *   4. No `@keyframes` body holds `!important`, where it is invalid CSS.
+ *   5. The whole sheet sits inside one `@layer yv` block.
+ *   6. No `rem` length survives anywhere, so the host's root font size cannot
+ *      rescale the sheet.
+ *
+ * A `@keyframes` that animates a property missing from `EXEMPT_PROPERTIES` is a
+ * seventh failure, and it is the one that keeps the list from falling behind.
+ *
+ * Check 6 reads every length the parser produces, which covers a declaration
+ * value, a custom property value, a `calc()` operand, a `var()` fallback, a
+ * media query condition and a `@keyframes` frame. It does not read the string
+ * `rem` inside a selector, and it must not: `.yv\:text-\[0\.5rem\]` is a class
+ * name, and `.rem` is a class `bible-reader.css` declares. Both are names, not
+ * lengths, and both are correct as they are.
+ *
+ * @returns {{ ungated: string[], problems: string[] }}
+ */
+function verifyOutput(code, filename, exemptAlreadyImportant = new Set()) {
+  const ungated = [];
+  const slotLeaks = new Set();
+  const unimportant = new Set();
+  const wronglyImportant = new Set();
+  const importantKeyframes = new Set();
+  const unexemptAnimated = new Set();
+  const survivingRem = new Set();
+
+  // A throw here is the point: it means the layer wrap produced CSS that no
+  // longer parses, and that must never reach `dist/`.
+  transform({
+    filename,
+    code: Buffer.from(code),
+    minify: false,
+    visitor: {
+      Selector(components) {
+        if (!isAllowed(components)) ungated.push(formatSelector(components));
+        for (const leak of findSlotLeaks(components)) slotLeaks.add(leak);
+      },
+      Length(length) {
+        // Read only. The rebase already happened in pass 3; this walk exists to
+        // catch the length that pass missed.
+        if (length.unit === 'rem') survivingRem.add(`${String(length.value)}rem`);
+        return undefined;
+      },
+      Rule: {
+        style(rule) {
+          for (const declaration of rule.value?.declarations?.declarations ?? []) {
+            const property = declarationProperty(declaration);
+            if (!isExemptProperty(property)) unimportant.add(property);
+          }
+          // The other direction. An important declaration of an exempt property
+          // is exactly the failure the exemption list exists to prevent, so a
+          // walk that over-applied must fail the build too.
+          for (const declaration of rule.value?.declarations?.importantDeclarations ?? []) {
+            const property = declarationProperty(declaration);
+            if (isExemptProperty(property) && !exemptAlreadyImportant.has(property)) {
+              wronglyImportant.add(property);
+            }
+          }
+          return undefined;
+        },
+        keyframes(rule) {
+          for (const frame of rule.value?.keyframes ?? []) {
+            // `!important` inside a @keyframes body is invalid CSS. The browser
+            // drops the whole declaration, so the frame silently stops
+            // animating that property.
+            for (const declaration of frame.declarations?.importantDeclarations ?? []) {
+              importantKeyframes.add(declarationProperty(declaration));
+            }
+            for (const declaration of frame.declarations?.declarations ?? []) {
+              const property = declarationProperty(declaration);
+              if (!isExemptProperty(property)) unexemptAnimated.add(property);
+            }
+          }
+          return undefined;
+        },
+      },
+    },
+  });
+
+  const problems = findLayerProblems(code);
+
+  if (slotLeaks.size > 0) {
+    problems.push(
+      `${String(slotLeaks.size)} selector(s) reach past a [${SCOPE_ATTRIBUTE}] element without ` +
+        `stopping at a slot. Add :where(:not([${SLOT_ATTRIBUTE}], [${SLOT_ATTRIBUTE}] *)) to the ` +
+        `subject compound: ${[...slotLeaks].sort().join(', ')}`,
+    );
+  }
+  if (unimportant.size > 0) {
+    problems.push(
+      `${String(unimportant.size)} non-exempt propert(ies) are not important: ` +
+        [...unimportant].sort().join(', '),
+    );
+  }
+  if (wronglyImportant.size > 0) {
+    problems.push(
+      `${String(wronglyImportant.size)} exempt propert(ies) became important: ` +
+        [...wronglyImportant].sort().join(', '),
+    );
+  }
+  if (importantKeyframes.size > 0) {
+    problems.push(
+      `@keyframes bodies must never hold !important, and these do: ` +
+        [...importantKeyframes].sort().join(', '),
+    );
+  }
+  if (unexemptAnimated.size > 0) {
+    problems.push(
+      `these propert(ies) are animated by a @keyframes but are not in ` +
+        `EXEMPT_PROPERTIES, so an important declaration would freeze the ` +
+        `animation: ${[...unexemptAnimated].sort().join(', ')}`,
+    );
+  }
+  if (survivingRem.size > 0) {
+    problems.push(
+      `${String(survivingRem.size)} \`rem\` length(s) survived the rebase, and a ` +
+        `host \`html { font-size }\` would rescale them: ` +
+        [...survivingRem].sort().join(', '),
+    );
+  }
+
+  return { ungated: [...new Set(ungated)], problems };
+}
+
+/**
+ * Rewrites `source` so that no selector can match outside `[data-yv-sdk]`, and
+ * so that no ordinary consumer rule can override what it declares.
+ *
+ * @param {string} source Compiled Tailwind CSS.
+ * @param {{ minify?: boolean, filename?: string }} [options]
+ * @returns {{ code: string, ungated: string[], problems: string[] }} The
+ *   rewritten CSS, every selector that has no gate after the rewrite, and every
+ *   other structural fault the re-parse found. A non-empty list of either kind
+ *   is a build failure, not a warning.
+ */
+export function scopeCss(source, options = {}) {
+  const { minify = false, filename = 'tailwind.css' } = options;
+
+  // Pass 1: flatten the nesting. `bible-reader.css` nests rules under
+  // `[data-slot='yv-bible-renderer']` with `&`, and `@utility touch-hitbox`
+  // emits a nested `&:before`. A visitor that runs against those sees a partial
+  // selector and prefixes it into an invalid one. After the flattening, the
+  // visitor sees only complete selectors.
+  const { code: flattened } = transform({
+    filename,
+    code: Buffer.from(source),
+    include: Features.Nesting,
+    minify: false,
+  });
+
+  // Pass 2: add the gate.
+  const { code: gated } = transform({
+    filename,
+    code: flattened,
+    minify: false,
+    visitor: { Selector: gateSelector },
+  });
+
+  // Pass 3: convert every `rem` length to `px`. Separate from pass 2 so that a
+  // failure names one job. The two visitors never see the same node anyway: one
+  // walks selectors, the other walks lengths.
+  const { code: rebased } = transform({
+    filename,
+    code: gated,
+    minify: false,
+    visitor: { Length: rebaseLength },
+  });
+
+  // Pass 4: print the final sheet.
+  const { code: printed } = transform({ filename, code: rebased, minify });
+
+  // Pass 5: split the sheet by property, mark the layered half important, and
+  // join the two halves. Both steps are text edits, and both run after the last
+  // print. Lightning CSS cannot express either one: see `splitByImportance` for
+  // the visitor limitation and `assembleSheet` for the dropped `@layer yv;`.
+  const { layered, unlayered, exemptAlreadyImportant } = splitByImportance(
+    printed.toString(),
+    minify,
+  );
+  const code = assembleSheet(layered, unlayered, minify);
+
+  // Pass 6: check the result.
+  return { code, ...verifyOutput(code, filename, exemptAlreadyImportant) };
+}
+
+/* -------------------------------------------------------------------------- */
+/* CLI                                                                         */
+/* -------------------------------------------------------------------------- */
+
+const PACKAGE_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const DEFAULT_INPUT = resolve(PACKAGE_ROOT, '.cache/tailwind.raw.css');
+const DEFAULT_OUTPUT = resolve(PACKAGE_ROOT, 'dist/tailwind.css');
+
+function parseArguments(argv) {
+  const flag = (name) => argv.includes(`--${name}`);
+  const value = (name) => {
+    const match = argv.find((argument) => argument.startsWith(`--${name}=`));
+    return match?.slice(name.length + 3);
+  };
+
+  const input = value('in');
+  const output = value('out');
+
+  return {
+    minify: flag('minify'),
+    watch: flag('watch'),
+    input: input ? resolve(process.cwd(), input) : DEFAULT_INPUT,
+    output: output ? resolve(process.cwd(), output) : DEFAULT_OUTPUT,
+  };
+}
+
+/** @returns {boolean} true when the rewrite produced a publishable stylesheet. */
+function runOnce({ input, output, minify }) {
+  if (!existsSync(input)) {
+    console.error(`❌ ${input} is missing. Run build:css first.`);
+    return false;
+  }
+
+  const source = readFileSync(input, 'utf-8');
+  const { code, ungated, problems } = scopeCss(source, { minify, filename: input });
+
+  if (ungated.length > 0) {
+    console.error(
+      `❌ ${String(ungated.length)} selector(s) are not gated on [${SCOPE_ATTRIBUTE}]:\n` +
+        ungated.map((selector) => `  - ${selector}`).join('\n') +
+        '\n\nSDK CSS must not be able to match DOM the SDK did not render.',
+    );
+    return false;
+  }
+
+  if (problems.length > 0) {
+    console.error(
+      `❌ the rewritten sheet is not isolated:\n` +
+        problems.map((problem) => `  - ${problem}`).join('\n') +
+        '\n\nSee EXEMPT_PROPERTIES in scripts/scope-selectors.mjs.',
+    );
+    return false;
+  }
+
+  mkdirSync(dirname(output), { recursive: true });
+  writeFileSync(output, code);
+  console.log(
+    `✅ Scoped ${output} to [${SCOPE_ATTRIBUTE}] in @layer ${LAYER_NAME} ` +
+      `(${String(code.length)} bytes)`,
+  );
+  return true;
+}
+
+function main() {
+  const options = parseArguments(process.argv.slice(2));
+  const ok = runOnce(options);
+
+  if (!options.watch) {
+    if (!ok) process.exit(1);
+    return;
+  }
+
+  mkdirSync(dirname(options.input), { recursive: true });
+
+  // Watch the directory, not the file. The Tailwind CLI replaces its output
+  // file, and a file watch does not survive a replacement on every platform.
+  let pending;
+  watch(dirname(options.input), (_event, filename) => {
+    if (filename && !options.input.endsWith(filename)) return;
+    clearTimeout(pending);
+    pending = setTimeout(() => runOnce(options), 50);
+  });
+  console.log(`👀 Watching ${options.input}`);
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  main();
+}
diff --git a/packages/ui/scripts/verify-styles.js b/packages/ui/scripts/verify-styles.js
index 1cee7dc0..6adcb71b 100644
--- a/packages/ui/scripts/verify-styles.js
+++ b/packages/ui/scripts/verify-styles.js
@@ -24,9 +24,44 @@ if (!existsSync(jsPath)) {
     errors.push('dist/index.js missing style precedence — React 19 integration not in bundle');
   }
 
-  if (!js.includes('@layer yv-sdk-styles')) {
+  // This check proves two things at once. __YV_STYLES__ holds real CSS, not the
+  // empty string that tsup substitutes when dist/tailwind.css is absent. And
+  // build:css:scope ran, because only scope-selectors.mjs emits this string.
+  //
+  // The `:where(:not(…))` is the slot boundary, and it is part of the literal on
+  // purpose. A build that emitted the older gate without it would ship a sheet
+  // that restyles consumer `children`, and a check for the older gate alone
+  // would pass. The `:where()` keeps the gate at 0,1,0. Lightning CSS drops the
+  // redundant `*` before it.
+  // See docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+  if (
+    !js.includes(':is([data-yv-sdk],[data-yv-sdk] :where(:not([data-yv-slot],[data-yv-slot] *)))')
+  ) {
     errors.push(
-      'dist/index.js missing actual CSS content — __YV_STYLES__ was not replaced with real CSS',
+      'dist/index.js has no gated selectors. __YV_STYLES__ is empty, or build:css:scope did not run',
+    );
+  }
+
+  // The sheet ships inside one declared `@layer yv`. Together with the
+  // `!important` pass in scope-selectors.mjs, that is what beats a consumer's
+  // important and high-specificity rules: CSS Cascade 5 reverses layer order for
+  // important declarations, and ranks unlayered-important last.
+  if (!/@layer yv\{/.test(js)) {
+    errors.push(
+      'dist/index.js has no `@layer yv{` wrapper. Without the layer, the !important pass ' +
+        'in build:css:scope loses to an unlayered consumer !important rule',
+    );
+  }
+
+  // The `yv-sdk-` prefix is deliberate, and this check is not the one above.
+  // `yv-sdk-*` was a set of *priority sub-layers* that we deleted; nothing may
+  // bring them back. A check for `@layer` alone would also fail on Tailwind's
+  // own `@layer properties` block, which it emits for the @property fallback
+  // whatever our directives say.
+  if (/@layer yv-sdk-/.test(js)) {
+    errors.push(
+      'SDK CSS uses the deleted `yv-sdk-*` priority sub-layers. The sheet ships in one ' +
+        '`@layer yv` block instead',
     );
   }
 }
diff --git a/packages/ui/src/components/YouVersionAuthButton.tsx b/packages/ui/src/components/YouVersionAuthButton.tsx
index c80a2579..1132da56 100644
--- a/packages/ui/src/components/YouVersionAuthButton.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.tsx
@@ -212,9 +212,11 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
           onClick={(e) => void handleClick(e)}
           size="icon"
           style={{
+            // px, not rem. An inline style skips scope-selectors.mjs, so the rem
+            // rebase cannot reach it. 10.4px is 0.65rem at the browser default.
             ...(radius === 'rectangular'
               ? ({
-                  '--yv-radius': '0.65rem',
+                  '--yv-radius': '10.4px',
                 } as React.CSSProperties)
               : {}),
             borderColor: theme === 'light' ? 'var(--yv-gray-15)' : 'var(--yv-gray-35)',
@@ -248,9 +250,11 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
         onClick={(e) => void handleClick(e)}
         size="lg"
         style={{
+          // px, not rem. An inline style skips scope-selectors.mjs, so the rem
+          // rebase cannot reach it. 10.4px is 0.65rem at the browser default.
           ...(radius === 'rectangular'
             ? ({
-                '--yv-radius': '0.65rem',
+                '--yv-radius': '10.4px',
               } as React.CSSProperties)
             : {}),
           borderColor: theme === 'light' ? 'var(--yv-gray-15)' : 'var(--yv-gray-35)',
diff --git a/packages/ui/src/components/bible-chapter-picker.tsx b/packages/ui/src/components/bible-chapter-picker.tsx
index 1173f5e1..3fc9db06 100644
--- a/packages/ui/src/components/bible-chapter-picker.tsx
+++ b/packages/ui/src/components/bible-chapter-picker.tsx
@@ -16,6 +16,7 @@ import {
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useBooks, useTheme } from '@youversion/platform-react-hooks';
 import { type BibleBook } from '@youversion/platform-core';
+import { ConsumerSlot } from '@/lib/consumer-slot';
 import { InfoIcon } from './icons/info';
 import { SearchIcon } from './icons/search';
 import { Button } from './ui/button';
@@ -247,11 +248,20 @@ function Trigger({ asChild = true, children, ...props }: TriggerProps) {
     ? t('loadingEllipsis')
     : `${currentBook?.title || t('selectChapter')}${chapterLabel ? ` ${chapterLabel}` : ''}`;
 
+  // `children` here is consumer content, and the fallback Button is ours. Only
+  // the first gets a slot: stamping our own Button would switch off the styling
+  // it is asking for.
+  const fromConsumer = typeof children === 'function' || Boolean(children);
   const content =
     typeof children === 'function'
       ? children({ book, chapter, chapterLabel, currentBook, loading })
       : children || <Button variant="secondary">{buttonText}</Button>;
 
+  // `asChild` merges our props onto the consumer's own element, so there is no
+  // element left to wrap without changing the rendered DOM. Those two paths ship
+  // unstamped and are recorded in docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+  const slotted = fromConsumer ? <ConsumerSlot>{content}</ConsumerSlot> : content;
+
   const handlePress = (event: React.MouseEvent<HTMLButtonElement>) => {
     props.onClick?.(event);
     scrollToCurrentBook();
@@ -272,7 +282,7 @@ function Trigger({ asChild = true, children, ...props }: TriggerProps) {
 
     return (
       <button type="button" data-yv-sdk data-yv-theme={theme} {...props} onClick={handlePress}>
-        {content}
+        {slotted}
       </button>
     );
   }
@@ -290,7 +300,7 @@ function Trigger({ asChild = true, children, ...props }: TriggerProps) {
       {...props}
       onClick={handleOpenPopover}
     >
-      {content}
+      {asChild ? content : slotted}
     </PopoverTrigger>
   );
 }
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index d70fa3ca..0229ebd9 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -1152,7 +1152,7 @@ function UserMenu() {
   const { t } = useTranslation(undefined, { i18n });
   const { auth, signIn, signOut, userInfo } = useYVAuth();
   const yvContext = useContext(YouVersionContext);
-  const { onSignInPress, onSignOutPress } = useBibleReaderContext();
+  const { background, onSignInPress, onSignOutPress } = useBibleReaderContext();
 
   // Prefer host-supplied native actions (e.g. the Expo DOM wrapper bridges these to
   // native PKCE sign-in). Fall back to the Web SDK's own auth for pure-web usage.
@@ -1180,6 +1180,11 @@ function UserMenu() {
               name={userInfo?.name}
               src={userInfo?.getAvatarUrl(32, 32)?.toString()}
               aria-label={userInfo?.name || t('userAvatarAlt')}
+              // ProfileAvatar stamps `data-yv-sdk`, which declares the `--yv-*`
+              // tokens again on itself. The reader `background` can differ from
+              // the provider theme. Pass the reader theme here, or the avatar
+              // returns to the light tokens inside a dark reader.
+              data-yv-theme={background}
               className="yv:size-full"
             />
           </Button>
diff --git a/packages/ui/src/components/bible-version-picker.tsx b/packages/ui/src/components/bible-version-picker.tsx
index d94e047f..9c361544 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -24,6 +24,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { ConsumerSlot } from '@/lib/consumer-slot';
 import { cn } from '@/lib/utils';
 import { ArrowLeftIcon } from './icons/arrow-left';
 import { GlobeIcon } from './icons/globe';
@@ -466,6 +467,10 @@ function Trigger({ asChild = true, children, ...props }: BibleVersionPickerTrigg
     useBibleVersionPickerContext();
   const { version, loading } = useVersion(versionId);
 
+  // `children` here is consumer content, and the fallback Button is ours. Only
+  // the first gets a slot: stamping our own Button would switch off the styling
+  // it is asking for.
+  const fromConsumer = typeof children === 'function' || Boolean(children);
   const content =
     typeof children === 'function'
       ? children({ version, loading })
@@ -475,6 +480,11 @@ function Trigger({ asChild = true, children, ...props }: BibleVersionPickerTrigg
           </Button>
         );
 
+  // `asChild` merges our props onto the consumer's own element, so there is no
+  // element left to wrap without changing the rendered DOM. Those two paths ship
+  // unstamped and are recorded in docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+  const slotted = fromConsumer ? <ConsumerSlot>{content}</ConsumerSlot> : content;
+
   const handlePress = (event: MouseEvent<HTMLButtonElement>) => {
     props.onClick?.(event);
     if (!event.defaultPrevented) {
@@ -494,14 +504,14 @@ function Trigger({ asChild = true, children, ...props }: BibleVersionPickerTrigg
 
     return (
       <button type="button" data-yv-sdk data-yv-theme={background} {...props} onClick={handlePress}>
-        {content}
+        {slotted}
       </button>
     );
   }
 
   return (
     <PopoverTrigger data-yv-sdk data-yv-theme={background} asChild={asChild} {...props}>
-      {content}
+      {asChild ? content : slotted}
     </PopoverTrigger>
   );
 }
@@ -524,6 +534,7 @@ export function BibleVersionPickerLanguageTrigger({
 }: BibleVersionPickerLanguageTriggerProps): React.ReactElement {
   const { t } = useTranslation(undefined, { i18n });
   const {
+    background,
     filteredVersions,
     filteredRecentVersions,
     setIsLanguagesOpen,
@@ -543,6 +554,12 @@ export function BibleVersionPickerLanguageTrigger({
   return (
     <Button
       aria-label={ariaLabel ?? t('selectLanguageAriaLabel')}
+      // A public export whose root is a plain `Button`, so no element above it
+      // is guaranteed to be SDK DOM. The theme comes from the picker context,
+      // and not from the provider, because `Root` lets a caller override it
+      // with `background`.
+      data-yv-sdk=""
+      data-yv-theme={background}
       className={cn(
         'yv:ml-auto yv:bg-card yv:border yv:border-transparent yv:hover:bg-card yv:hover:border-border yv:max-w-40',
         className,
diff --git a/packages/ui/src/components/profile-avatar.tsx b/packages/ui/src/components/profile-avatar.tsx
index 80379da0..289611fd 100644
--- a/packages/ui/src/components/profile-avatar.tsx
+++ b/packages/ui/src/components/profile-avatar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTheme } from '@youversion/platform-react-hooks';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { cn } from '@/lib/utils';
@@ -29,10 +30,17 @@ export function ProfileAvatar({
   ...props
 }: ProfileAvatarProps): React.ReactNode {
   const initial = getInitials(name);
+  const theme = useTheme();
   const [imageLoaded, setImageLoaded] = React.useState(false);
   return (
     <Avatar
       aria-label={name?.trim() || undefined}
+      // `yv:bg-(--yv-gray-10)` below reads a token that only `[data-yv-sdk]`
+      // declares, so the root must carry the gate attribute itself.
+      // `{...props}` stays last. A caller inside a scope with another theme
+      // (see `UserMenu` in `bible-reader.tsx`) thus overrides `data-yv-theme`.
+      data-yv-sdk=""
+      data-yv-theme={theme}
       className={cn(src && imageLoaded && 'yv:bg-(--yv-gray-10) yv:p-[3px]', className)}
       {...props}
     >
diff --git a/packages/ui/src/components/scope-attribute.test.tsx b/packages/ui/src/components/scope-attribute.test.tsx
new file mode 100644
index 00000000..26d034c7
--- /dev/null
+++ b/packages/ui/src/components/scope-attribute.test.tsx
@@ -0,0 +1,394 @@
+/**
+ * @vitest-environment jsdom
+ */
+/**
+ * Every exported component carries `data-yv-sdk` on its root.
+ *
+ * The whole style-isolation fix keys on that attribute. SDK utilities apply only
+ * inside `[data-yv-sdk]`. A component without the attribute thus loses all of
+ * its styling. That failure is quiet, because the component still renders. A
+ * test catches it. A review convention does not.
+ *
+ * The list of cases is compared with `./index.ts` itself. A new export without a
+ * new case here fails the suite, and the suite does not skip it.
+ */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import type { ReactElement } from 'react';
+import type { BibleBook, BiblePassage, BibleVersion, Language } from '@youversion/platform-core';
+
+// Radix Popover (through @floating-ui/dom) and VersionAbbreviationIcon both
+// observe element size. jsdom has no ResizeObserver.
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;
+
+// jsdom on this Node version refuses localStorage for an opaque origin
+// (`SecurityError`). BibleReader.Root and the version picker both read
+// localStorage on mount. The suite thus gets an in-memory replacement.
+const memoryStore = new Map<string, string>();
+Object.defineProperty(globalThis, 'localStorage', {
+  configurable: true,
+  writable: true,
+  value: {
+    get length() {
+      return memoryStore.size;
+    },
+    clear: () => memoryStore.clear(),
+    getItem: (key: string) => memoryStore.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      memoryStore.set(key, String(value));
+    },
+    removeItem: (key: string) => {
+      memoryStore.delete(key);
+    },
+    key: (index: number) => [...memoryStore.keys()][index] ?? null,
+  } satisfies Storage,
+});
+
+if (!Element.prototype.scrollTo) {
+  Element.prototype.scrollTo = () => {};
+}
+
+// Only the data hooks are mocked. `useTheme` and the providers stay real,
+// because the attribute under test comes from the resolved theme. A mocked
+// provider hides a regression in that path.
+vi.mock('@youversion/platform-react-hooks', async () => {
+  const actual = await vi.importActual('@youversion/platform-react-hooks');
+  return {
+    ...actual,
+    useBooks: vi.fn(),
+    useFilteredVersions: vi.fn(),
+    useHighlights: vi.fn(),
+    useLanguage: vi.fn(),
+    useLanguages: vi.fn(),
+    useOrganizations: vi.fn(),
+    usePassage: vi.fn(),
+    useVerseOfTheDay: vi.fn(),
+    useVersion: vi.fn(),
+    useVersions: vi.fn(),
+    useYVAuth: vi.fn(),
+  };
+});
+
+import {
+  useBooks,
+  useFilteredVersions,
+  useHighlights,
+  useLanguage,
+  useLanguages,
+  useOrganizations,
+  usePassage,
+  useVerseOfTheDay,
+  useVersion,
+  useVersions,
+  useYVAuth,
+} from '@youversion/platform-react-hooks';
+import { YouVersionProvider } from './YouVersionProvider';
+import * as componentExports from './index';
+import {
+  BibleCard,
+  BibleChapterPicker,
+  BibleLanguagePickerContent,
+  BibleReader,
+  BibleTextView,
+  BibleThemeSettingsContent,
+  BibleVersionPicker,
+  BibleVersionPickerLanguageTrigger,
+  FootnoteContent,
+  ProfileAvatar,
+  Separator,
+  Textarea,
+  VerseActionPopover,
+  VerseOfTheDay,
+  YouVersionAuthButton,
+} from './index';
+
+const mockBooks: BibleBook[] = [
+  {
+    id: 'JHN',
+    title: 'John',
+    full_title: 'The Gospel According to John',
+    canon: 'new_testament',
+    abbreviation: 'John',
+    chapters: [{ id: '1', title: '1', passage_id: 'JHN.1' }],
+  },
+];
+
+const mockVersion = {
+  id: 111,
+  localized_abbreviation: 'NIV',
+  abbreviation: 'NIV',
+  title: 'New International Version',
+  language_tag: 'en',
+} as BibleVersion;
+
+const mockPassage: BiblePassage = {
+  id: 'JHN.1',
+  content:
+    '<div><div class="p"><span class="yv-v" v="1"></span>' +
+    '<span class="yv-vlbl">1</span>In the beginning was the Word.</div></div>',
+  reference: 'John 1',
+};
+
+const mockLanguage = {
+  id: 'en',
+  language: 'English',
+  display_names: { en: 'English' },
+} as Language;
+
+function setupHookMocks(): void {
+  vi.mocked(useBooks).mockReturnValue({
+    books: { data: [...mockBooks], next_page_token: null },
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  vi.mocked(useVersion).mockReturnValue({
+    version: mockVersion,
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  vi.mocked(useVersions).mockReturnValue({
+    versions: { data: [mockVersion], next_page_token: null },
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  vi.mocked(usePassage).mockReturnValue({
+    passage: mockPassage,
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  vi.mocked(useVerseOfTheDay).mockReturnValue({
+    data: { day: 1, passage_id: 'JHN.1.1' },
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  vi.mocked(useHighlights).mockReturnValue({
+    highlights: { data: [], next_page_token: null },
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+    createHighlight: vi.fn(),
+    deleteHighlight: vi.fn(),
+  });
+  vi.mocked(useLanguage).mockReturnValue({
+    language: mockLanguage,
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  vi.mocked(useLanguages).mockReturnValue({
+    languages: { data: [mockLanguage], next_page_token: null },
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  vi.mocked(useFilteredVersions).mockReturnValue([mockVersion]);
+  vi.mocked(useOrganizations).mockReturnValue({ organizations: new Map() });
+  vi.mocked(useYVAuth).mockReturnValue({
+    auth: {
+      isAuthenticated: false,
+      isLoading: false,
+      error: null,
+      accessToken: null,
+      result: null,
+    },
+    signIn: vi.fn(),
+    signOut: vi.fn(),
+    processCallback: vi.fn(),
+    userInfo: null,
+  });
+}
+
+const noop = () => {};
+
+/** Props that satisfy `VerseActionPopover`, with no test of its behavior. */
+const verseActionPopoverProps = {
+  open: true,
+  onOpenChange: noop,
+  activeHighlights: new Set<string>(),
+  selectedVerses: [1],
+  highlightedVerses: {},
+  anchorElement: null,
+  onHighlight: noop,
+  onClearHighlight: noop,
+  onCopy: noop,
+  onShare: noop,
+};
+
+type RenderCase = {
+  render: () => ReactElement;
+  /**
+   * Where the root of the component lands. The default is the first element in
+   * the render container. A portalled component mounts to `document.body`, so
+   * that case names its root by a selector.
+   */
+  rootSelector?: string;
+};
+
+/**
+ * One case per exported component. A compound export renders the sub-component
+ * that owns the root element. A component that needs a context renders inside
+ * the provider that supplies the context.
+ */
+const RENDER_CASES: Record<string, RenderCase> = {
+  BibleCard: {
+    render: () => <BibleCard reference="JHN.1.1" versionId={111} />,
+  },
+  BibleChapterPicker: {
+    render: () => (
+      <BibleChapterPicker.Root
+        book="JHN"
+        onBookChange={noop}
+        chapter="1"
+        onChapterChange={noop}
+        versionId={111}
+      >
+        <BibleChapterPicker.Trigger />
+      </BibleChapterPicker.Root>
+    ),
+  },
+  BibleLanguagePickerContent: {
+    render: () => (
+      <BibleVersionPicker.Root versionId={111} onVersionChange={noop}>
+        <BibleLanguagePickerContent open />
+      </BibleVersionPicker.Root>
+    ),
+  },
+  BibleReader: {
+    render: () => (
+      <BibleReader.Root defaultVersionId={111} defaultBook="JHN" defaultChapter="1">
+        <BibleReader.Content />
+      </BibleReader.Root>
+    ),
+  },
+  BibleTextView: {
+    render: () => <BibleTextView reference="JHN.1" versionId={111} />,
+  },
+  BibleThemeSettingsContent: {
+    render: () => (
+      <BibleThemeSettingsContent
+        theme="light"
+        fontSize={16}
+        fontFamily="inter"
+        lineSpacing={1.7}
+        onFontSelected={noop}
+        onFontIncreased={noop}
+        onFontDecreased={noop}
+        onChangeLineSpacing={noop}
+      />
+    ),
+  },
+  BibleVersionPicker: {
+    render: () => (
+      <BibleVersionPicker.Root versionId={111} onVersionChange={noop}>
+        <BibleVersionPicker.Trigger />
+      </BibleVersionPicker.Root>
+    ),
+  },
+  BibleVersionPickerLanguageTrigger: {
+    render: () => (
+      <BibleVersionPicker.Root versionId={111} onVersionChange={noop}>
+        <BibleVersionPickerLanguageTrigger />
+      </BibleVersionPicker.Root>
+    ),
+  },
+  FootnoteContent: {
+    render: () => (
+      <FootnoteContent
+        verseNum="1"
+        reference="John 1:1"
+        notes={['A note.']}
+        verseHtml="<span>In the beginning was the Word.</span>"
+      />
+    ),
+  },
+  ProfileAvatar: {
+    render: () => <ProfileAvatar name="Cam Anderson" />,
+  },
+  Separator: {
+    render: () => <Separator />,
+  },
+  Textarea: {
+    render: () => <Textarea />,
+  },
+  VerseActionPopover: {
+    render: () => <VerseActionPopover {...verseActionPopoverProps} />,
+    // Radix renders the content into document.body, so the container is empty.
+    rootSelector: '[role="dialog"]',
+  },
+  VerseOfTheDay: {
+    render: () => <VerseOfTheDay versionId={111} />,
+  },
+  YouVersionAuthButton: {
+    render: () => <YouVersionAuthButton mode="signIn" />,
+  },
+};
+
+/**
+ * Value exports that are not components. This list is written by hand, and not
+ * detected. A new component with a name that looks like a helper name thus still
+ * fails the coverage check below.
+ */
+const NON_COMPONENT_EXPORTS = new Set([
+  'BIBLE_READER_FONT',
+  'HIGHLIGHT_COLORS',
+  'clampBibleReaderFontSize',
+  'createBibleThemeSettingsContentHandlers',
+  'nextBibleReaderFontSizeDown',
+  'nextBibleReaderFontSizeUp',
+]);
+
+describe('scope attribute', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    memoryStore.clear();
+    setupHookMocks();
+  });
+
+  it('covers every value export from ./index.ts', () => {
+    const uncovered = Object.keys(componentExports).filter(
+      (name) => !(name in RENDER_CASES) && !NON_COMPONENT_EXPORTS.has(name),
+    );
+
+    expect(
+      uncovered,
+      'A new export needs a RENDER_CASES entry (component) or a NON_COMPONENT_EXPORTS entry (helper).',
+    ).toEqual([]);
+  });
+
+  it('has no RENDER_CASES entry for an export that no longer exists', () => {
+    const stale = Object.keys(RENDER_CASES).filter((name) => !(name in componentExports));
+
+    expect(stale).toEqual([]);
+  });
+
+  it.each(Object.keys(RENDER_CASES))('%s stamps data-yv-sdk on its root', (name) => {
+    const testCase = RENDER_CASES[name];
+    if (!testCase) throw new Error(`No render case for ${name}`);
+
+    const { container } = render(
+      <YouVersionProvider appKey="test-app-key">{testCase.render()}</YouVersionProvider>,
+    );
+
+    const root = testCase.rootSelector
+      ? document.body.querySelector(testCase.rootSelector)
+      : container.firstElementChild;
+
+    expect(root, `${name} rendered nothing to assert on`).not.toBeNull();
+    expect(root).toHaveAttribute('data-yv-sdk');
+    // The token block on `[data-yv-sdk]` declares the light `--yv-*` values
+    // again. A gated element inside a dark scope must thus restate its theme,
+    // or it returns to light without a warning.
+    expect(root).toHaveAttribute('data-yv-theme');
+  });
+});
diff --git a/packages/ui/src/components/style-isolation.stories.tsx b/packages/ui/src/components/style-isolation.stories.tsx
new file mode 100644
index 00000000..617515ab
--- /dev/null
+++ b/packages/ui/src/components/style-isolation.stories.tsx
@@ -0,0 +1,832 @@
+/**
+ * Consumer-host regression stories.
+ *
+ * Each story renders one exported component in a page whose global CSS tries to
+ * break it. The story then measures the damage, and asserts on the measurement.
+ *
+ * Every consumer CSS group must now report zero on every component:
+ *
+ * - `inheritedTypography` closed when `theme.css` started to declare the whole
+ *   inherited set on `[data-yv-sdk]`. Cascade rank cannot stop inheritance. Only
+ *   a declaration of the property can stop it.
+ * - `preflight`, `bareElements` and `aggressiveReset` closed when SDK CSS left
+ *   its `yv-sdk-*` cascade layers, and every selector gained a
+ *   `:is([data-yv-sdk], [data-yv-sdk] …)` gate. The gate adds 0,1,0. That
+ *   overrides a bare element selector at 0,0,1, and a universal selector at
+ *   0,0,0.
+ * - `important` and `highSpecificity` closed when the sheet moved into a
+ *   declared `@layer yv` and its declarations became `!important`. Layer order
+ *   reverses for important declarations, and unlayered-important ranks last, so
+ *   a layered important SDK rule beats both. Importance also outranks
+ *   specificity, which is why the id selector at 1,0,1 loses too.
+ * - `remRebase` closed when the build started to convert every `rem` length in
+ *   the sheet to `px`, and `src/styles/global.css` started to declare a
+ *   `font-size` on the SDK root. That leak is in the unit and in inheritance,
+ *   not in the cascade, so no selector, layer or `!important` could reach it.
+ *
+ * These stories are also the visual evidence. Open one in Storybook. The
+ * component now looks correct, under CSS built to break it.
+ *
+ * See docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md and
+ * docs/adr/0006-layer-and-importantize-the-sdk-sheet.md.
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { useLayoutEffect, useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+
+import { INTER_FONT } from '@/lib/verse-html-utils';
+import { BibleCard } from './bible-card';
+import { BibleChapterPicker } from './bible-chapter-picker';
+import { BibleReader, BibleThemeSettingsContent } from './bible-reader';
+import {
+  BibleLanguagePickerContent,
+  BibleVersionPicker,
+  BibleVersionPickerLanguageTrigger,
+} from './bible-version-picker';
+import { ProfileAvatar } from './profile-avatar';
+import { Separator } from './ui/separator';
+import { Textarea } from './ui/textarea';
+import { BibleTextView, FootnoteContent } from './verse';
+import { VerseActionPopover } from './verse-action-popover';
+import { VerseOfTheDay } from './verse-of-the-day';
+import { YouVersionAuthButton } from './YouVersionAuthButton';
+import {
+  ALL_CONSUMER_CSS_GROUPS,
+  CONSUMER_CONTENT_CLASS,
+  CONSUMER_HOST_ROOT_ID,
+  injectConsumerContentCss,
+  injectConsumerCss,
+  removeConsumerCss,
+} from '../test/consumer-host';
+import type { ConsumerCssGroup } from '../test/consumer-host';
+import {
+  diffPlacements,
+  diffSnapshots,
+  formatLeakReport,
+  snapshotComputedStyles,
+} from '../test/style-diff';
+import type { StyleLeak, StyleSnapshot } from '../test/style-diff';
+
+function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const SETTLE_INTERVAL_MS = 100;
+const SETTLE_MAX_ATTEMPTS = 30;
+
+/**
+ * Takes a snapshot after the subtree becomes stable.
+ *
+ * A new or a removed stylesheet starts every CSS transition that the new values
+ * touch, and SDK components transition color and spacing. A snapshot taken one
+ * frame later reads interpolated values, which then appear as leaks that no
+ * amount of scoping corrects. This function polls until two reads in a row
+ * agree, which separates a real leak from an animation frame.
+ */
+async function stableSnapshot(root: Element): Promise<StyleSnapshot> {
+  let previous = snapshotComputedStyles(root);
+
+  for (let attempt = 0; attempt < SETTLE_MAX_ATTEMPTS; attempt += 1) {
+    await wait(SETTLE_INTERVAL_MS);
+    const current = snapshotComputedStyles(root);
+    if (diffSnapshots(previous, current).length === 0) return current;
+    previous = current;
+  }
+
+  throw new Error(
+    `Computed styles never settled after ${String(
+      SETTLE_MAX_ATTEMPTS * SETTLE_INTERVAL_MS,
+    )}ms. A tracked property is being animated, so the diff cannot be trusted.`,
+  );
+}
+
+type LeakReport = {
+  /** Leaks under every consumer CSS group at once. */
+  total: StyleLeak[];
+  /** Leaks from each group on its own. The residual report reads this record. */
+  byGroup: Record<ConsumerCssGroup, StyleLeak[]>;
+};
+
+/**
+ * Measures how far the host CSS moves a rendered subtree.
+ *
+ * Consumer CSS is document-global, so a clean tree and a consumer tree cannot
+ * exist together. The harness separates them in time, not in space. It removes
+ * the consumer styles and takes a snapshot. Then it adds them back one consumer
+ * CSS group at a time, and takes another snapshot. The structural path keys line
+ * up because the harness measures the same nodes every time.
+ *
+ * The function leaves every group injected at the end, so the story stays
+ * visibly broken for a manual inspection.
+ */
+async function measureLeaks(label: string, root: Element): Promise<LeakReport> {
+  removeConsumerCss();
+  const clean = await stableSnapshot(root);
+
+  const byGroup = {} as Record<ConsumerCssGroup, StyleLeak[]>;
+
+  for (const group of ALL_CONSUMER_CSS_GROUPS) {
+    removeConsumerCss();
+    const cleanup = injectConsumerCss([group]);
+    byGroup[group] = diffSnapshots(clean, await stableSnapshot(root));
+    cleanup();
+  }
+
+  removeConsumerCss();
+  injectConsumerCss('all');
+  const total = diffSnapshots(clean, await stableSnapshot(root));
+
+  const perGroup = ALL_CONSUMER_CSS_GROUPS.map(
+    (group) => `  ${group}: ${byGroup[group].length} leak(s)`,
+  ).join('\n');
+  console.info(`${formatLeakReport(label, total)}\nby group:\n${perGroup}`);
+
+  return { total, byGroup };
+}
+
+type IsolationStoryConfig = {
+  /** Names the component in the console report. */
+  label: string;
+  render: () => ReactElement;
+  /**
+   * Waits for the component to finish its load, then returns the element to
+   * snapshot. Return the SDK root, never the Storybook canvas. The canvas is
+   * consumer DOM, and a leak report on it is a false positive.
+   */
+  ready: (canvasElement: HTMLElement) => Promise<Element>;
+};
+
+type Story = StoryObj<Meta>;
+
+/**
+ * The assertions are per group, never on the combined total.
+ *
+ * Groups can cancel each other. `preflight` sets `box-sizing: border-box` on
+ * `*`, and `aggressiveReset` sets `content-box` on `*`. With both groups
+ * injected, the later sheet wins, and the value returns to its start value.
+ * `Separator` measures zero combined leaks for that reason, and `preflight`
+ * alone still moves it. A read of the combined total calls that component
+ * isolated, and it is not.
+ */
+function isolationStory(config: IsolationStoryConfig): Story {
+  return {
+    render: config.render,
+    play: async ({ canvasElement }) => {
+      const root = await config.ready(canvasElement);
+      const report = await measureLeaks(config.label, root);
+
+      // The inheritance channel. Nine properties on `body`, and none of them
+      // match an SDK element. Everything that this group moves thus arrived by
+      // inheritance. Zero means that `theme.css` declares the whole inherited
+      // set on `[data-yv-sdk]`.
+      await expect(report.byGroup.inheritedTypography).toEqual([]);
+
+      // The direct-match channel, with one adversary per specificity band:
+      // `aggressiveReset` at 0,0,0, and `bareElements` and `preflight` at 0,0,1.
+      // The gate puts every SDK rule at 0,1,0 or higher, so all three lose.
+      await expect(report.byGroup.aggressiveReset).toEqual([]);
+      await expect(report.byGroup.bareElements).toEqual([]);
+      await expect(report.byGroup.preflight).toEqual([]);
+
+      // The two channels that specificity alone cannot win. `important` is
+      // 0,0,1 and important. `highSpecificity` is 1,0,1 and normal. Both lose to
+      // a layered important declaration, and neither used to.
+      await expect(report.byGroup.important).toEqual([]);
+      await expect(report.byGroup.highSpecificity).toEqual([]);
+
+      // The unit channel. `html { font-size: 62.5% }` rescales every `rem` in
+      // the document, and no selector can stop it: `rem` resolves against the
+      // document root. Zero means the build converted the sheet's `rem` lengths
+      // to `px`, and that the SDK root declares its own `font-size`.
+      await expect(report.byGroup.remRebase).toEqual([]);
+
+      // The positive control for `remRebase`. A root font-size that never
+      // applied would make the zero above meaningless. `measureLeaks` leaves
+      // every group injected, so the fixture is in place here.
+      await expect(getComputedStyle(document.documentElement).fontSize).toBe('10px');
+
+      // The positive control for the two groups above. Both fixtures target
+      // `button`, so on a component with no button they measure zero for the
+      // uninteresting reason. Assert that the selectors really match before
+      // reading the zero as a result. `measureLeaks` leaves every group
+      // injected, so the body id is in place here.
+      const button = root.matches('button') ? root : root.querySelector('button');
+
+      if (button) {
+        await expect(button.matches(`#${CONSUMER_HOST_ROOT_ID} button`)).toBe(true);
+        await expect(document.querySelector(`style[data-yv-consumer-host="important"]`)).not.toBe(
+          null,
+        );
+      }
+    },
+  };
+}
+
+/** Waits for a selector to appear anywhere in the document and returns it. */
+async function findIn(scope: ParentNode, selector: string): Promise<Element> {
+  let found: Element | null = null;
+
+  await waitFor(
+    async () => {
+      found = scope.querySelector(selector);
+      await expect(found).not.toBeNull();
+    },
+    { timeout: 10000 },
+  );
+
+  return found as unknown as Element;
+}
+
+const meta = {
+  title: 'Style Isolation/Consumer Host',
+  parameters: {
+    layout: 'fullscreen',
+    // Every story in this file runs inside a consumer page.
+    consumerHost: 'all',
+  },
+  tags: ['integration'],
+} satisfies Meta;
+
+export default meta;
+
+export const BibleCardInConsumerHost: Story = isolationStory({
+  label: 'BibleCard',
+  render: () => (
+    <div className="yv:w-full yv:p-8">
+      <BibleCard reference="LUK.1.39-45" versionId={111} />
+    </div>
+  ),
+  ready: async (canvasElement) => {
+    await findIn(canvasElement, '[data-slot="yv-bible-renderer"]');
+    return findIn(canvasElement, 'section[data-yv-sdk]');
+  },
+});
+
+export const VerseOfTheDayInConsumerHost: Story = isolationStory({
+  label: 'VerseOfTheDay',
+  render: () => (
+    <div className="yv:w-full yv:p-8">
+      <VerseOfTheDay versionId={111} showSunIcon showBibleAppAttribution showShareButton />
+    </div>
+  ),
+  ready: async (canvasElement) => {
+    await findIn(canvasElement, '[data-slot="yv-bible-renderer"]');
+    return findIn(canvasElement, '[data-yv-sdk]');
+  },
+});
+
+export const BibleTextViewInConsumerHost: Story = isolationStory({
+  label: 'BibleTextView',
+  render: () => (
+    <div className="yv:w-full yv:p-8">
+      <BibleTextView reference="JHN.1" versionId={111} renderNotes showVerseNumbers />
+    </div>
+  ),
+  ready: async (canvasElement) => {
+    // `bareElements` targets the footnote buttons. Wait for one of them.
+    await findIn(canvasElement, 'button');
+    return findIn(canvasElement, '[data-yv-sdk]');
+  },
+});
+
+export const FootnoteContentInConsumerHost: Story = isolationStory({
+  label: 'FootnoteContent',
+  render: () => (
+    <div className="yv:w-full yv:p-8">
+      <FootnoteContent
+        verseNum="51"
+        reference="John 1:51"
+        notes={['The Greek is plural.', 'Or: heaven opened.']}
+        verseHtml='<span>He then added, "Very truly I tell you, you will see heaven open."</span>'
+        hasVerseContext
+      />
+    </div>
+  ),
+  ready: (canvasElement) => findIn(canvasElement, '[data-yv-sdk]'),
+});
+
+function VerseActionPopoverHarness(): ReactElement {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const noop = useRef(() => {
+    /* the harness measures layout, not behavior */
+  }).current;
+
+  return (
+    <div data-yv-sdk className="yv:p-24">
+      <p ref={setAnchor}>Selected verse</p>
+      <VerseActionPopover
+        open={anchor !== null}
+        onOpenChange={noop}
+        activeHighlights={new Set<string>()}
+        selectedVerses={[16]}
+        highlightedVerses={{}}
+        anchorElement={anchor}
+        onHighlight={noop}
+        onClearHighlight={noop}
+        onCopy={noop}
+        onShare={noop}
+      />
+    </div>
+  );
+}
+
+export const VerseActionPopoverInConsumerHost: Story = isolationStory({
+  label: 'VerseActionPopover',
+  render: () => <VerseActionPopoverHarness />,
+  // The popover renders into document.body, so the canvas cannot reach it.
+  ready: () => findIn(document.body, '[data-yv-sdk][role="dialog"]'),
+});
+
+function ChapterPickerHarness(): ReactElement {
+  const [book, setBook] = useState('MAT');
+  const [chapter, setChapter] = useState('5');
+
+  return (
+    <div data-yv-sdk className="yv:flex yv:justify-center yv:p-12">
+      <BibleChapterPicker.Root
+        book={book}
+        onBookChange={setBook}
+        chapter={chapter}
+        onChapterChange={setChapter}
+        versionId={111}
+      >
+        <BibleChapterPicker.Trigger />
+      </BibleChapterPicker.Root>
+    </div>
+  );
+}
+
+export const BibleChapterPickerInConsumerHost: Story = isolationStory({
+  label: 'BibleChapterPicker',
+  render: () => <ChapterPickerHarness />,
+  // The closed trigger is two elements. Open the picker, so that the measurement
+  // includes the book list. Almost all of the picker DOM is in that list.
+  ready: async (canvasElement) => {
+    await userEvent.click(await findIn(canvasElement, 'button'));
+    await findIn(document.body, '[data-slot="accordion-trigger"]');
+    return findIn(document.body, '[data-slot="popover-content"][data-yv-sdk]');
+  },
+});
+
+function VersionPickerHarness(): ReactElement {
+  const [versionId, setVersionId] = useState(111);
+
+  return (
+    <div data-yv-sdk className="yv:flex yv:justify-center yv:p-12">
+      <BibleVersionPicker.Root versionId={versionId} onVersionChange={setVersionId}>
+        <BibleVersionPicker.Trigger />
+        <BibleVersionPicker.Content />
+      </BibleVersionPicker.Root>
+    </div>
+  );
+}
+
+export const BibleVersionPickerInConsumerHost: Story = isolationStory({
+  label: 'BibleVersionPicker',
+  render: () => <VersionPickerHarness />,
+  // Same reason as the chapter picker: measure the open list, not the trigger.
+  ready: async (canvasElement) => {
+    await userEvent.click(await findIn(canvasElement, 'button'));
+    await findIn(document.body, '[data-testid="version-list"] [role="listitem"]');
+    return findIn(document.body, '[data-slot="popover-content"][data-yv-sdk]');
+  },
+});
+
+function VersionPickerLanguageTriggerHarness(): ReactElement {
+  const [versionId, setVersionId] = useState(111);
+
+  return (
+    <div className="yv:flex yv:justify-center yv:p-12">
+      <BibleVersionPicker.Root versionId={versionId} onVersionChange={setVersionId}>
+        <BibleVersionPickerLanguageTrigger />
+      </BibleVersionPicker.Root>
+    </div>
+  );
+}
+
+export const BibleVersionPickerLanguageTriggerInConsumerHost: Story = isolationStory({
+  label: 'BibleVersionPickerLanguageTrigger',
+  render: () => <VersionPickerLanguageTriggerHarness />,
+  // The trigger is itself a stamped public root (`button[data-yv-sdk]`).
+  ready: (canvasElement) => findIn(canvasElement, 'button[data-yv-sdk]'),
+});
+
+function LanguagePickerContentHarness(): ReactElement {
+  const [versionId, setVersionId] = useState(111);
+
+  return (
+    <div className="yv:flex yv:justify-center yv:p-12">
+      <BibleVersionPicker.Root versionId={versionId} onVersionChange={setVersionId}>
+        <BibleLanguagePickerContent open />
+      </BibleVersionPicker.Root>
+    </div>
+  );
+}
+
+export const BibleLanguagePickerContentInConsumerHost: Story = isolationStory({
+  label: 'BibleLanguagePickerContent',
+  render: () => <LanguagePickerContentHarness />,
+  // Standalone content stays in the tree; search `document.body` anyway so a
+  // portal mount still resolves. Wait for a language row (or the tabs when the
+  // suggested list is empty) before measuring.
+  ready: async () => {
+    await findIn(
+      document.body,
+      '[data-yv-sdk][data-open] [role="listitem"], [data-yv-sdk][data-open] [role="tab"]',
+    );
+    return findIn(document.body, '[data-yv-sdk][data-open]');
+  },
+});
+
+export const BibleReaderInConsumerHost: Story = isolationStory({
+  label: 'BibleReader',
+  render: () => (
+    <div className="yv:h-screen yv:bg-background">
+      <BibleReader.Root
+        defaultVersionId={111}
+        defaultBook="JHN"
+        defaultChapter="1"
+        fontFamily={INTER_FONT}
+        lineSpacing={1.7}
+        showVerseNumbers
+      >
+        <BibleReader.Content />
+        <BibleReader.Toolbar />
+      </BibleReader.Root>
+    </div>
+  ),
+  ready: async (canvasElement) => {
+    await findIn(canvasElement, '[data-slot="yv-bible-renderer"]');
+    return findIn(canvasElement, '[data-yv-sdk]');
+  },
+});
+
+function ThemeSettingsHarness(): ReactElement {
+  const noop = useRef(() => {
+    /* the harness measures layout, not behavior */
+  }).current;
+
+  return (
+    <div className="yv:p-12">
+      <BibleThemeSettingsContent
+        theme="light"
+        fontSize={16}
+        fontFamily={INTER_FONT}
+        lineSpacing={1.7}
+        onFontSelected={noop}
+        onFontIncreased={noop}
+        onFontDecreased={noop}
+        onChangeLineSpacing={noop}
+      />
+    </div>
+  );
+}
+
+export const BibleThemeSettingsContentInConsumerHost: Story = isolationStory({
+  label: 'BibleThemeSettingsContent',
+  render: () => <ThemeSettingsHarness />,
+  ready: async (canvasElement) => {
+    await findIn(canvasElement, 'button');
+    return findIn(canvasElement, '[data-yv-sdk]');
+  },
+});
+
+export const YouVersionAuthButtonInConsumerHost: Story = isolationStory({
+  label: 'YouVersionAuthButton',
+  render: () => (
+    <div className="yv:p-12">
+      <YouVersionAuthButton mode="signIn" />
+    </div>
+  ),
+  ready: async (canvasElement) => {
+    await findIn(canvasElement, 'button');
+    return findIn(canvasElement, '[data-yv-sdk]');
+  },
+});
+
+export const ProfileAvatarInConsumerHost: Story = isolationStory({
+  label: 'ProfileAvatar',
+  render: () => (
+    <div className="yv:p-12">
+      <ProfileAvatar name="Cam Anderson" className="yv:size-16" />
+    </div>
+  ),
+  ready: (canvasElement) => findIn(canvasElement, '[data-yv-sdk]'),
+});
+
+export const SeparatorInConsumerHost: Story = isolationStory({
+  label: 'Separator',
+  render: () => (
+    <div className="yv:w-full yv:p-12">
+      <Separator />
+    </div>
+  ),
+  ready: (canvasElement) => findIn(canvasElement, '[data-yv-sdk]'),
+});
+
+export const TextareaInConsumerHost: Story = isolationStory({
+  label: 'Textarea',
+  render: () => (
+    <div className="yv:w-full yv:p-12">
+      <Textarea defaultValue="For God so loved the world." />
+    </div>
+  ),
+  ready: (canvasElement) => findIn(canvasElement, '[data-yv-sdk]'),
+});
+
+/** The one consumer override that the README promises, in the form a consumer writes. */
+const CONSUMER_TOKEN_OVERRIDE = `
+[data-yv-sdk] {
+  --yv-primary: rgb(255, 0, 255);
+}
+`;
+
+const OVERRIDDEN_PRIMARY = 'rgb(255, 0, 255)';
+
+/**
+ * The other half of the guarantee: the theme still works.
+ *
+ * The gate on every selector raised SDK specificity. A change that walls the
+ * consumer out of their own theme is a regression, not a fix. The token block in
+ * `theme.css` is `[data-yv-sdk]` at 0,1,0, and a consumer override is the same
+ * selector at the same weight. The tie thus resolves on source order, and the
+ * consumer sheet always loads after ours.
+ *
+ * `yv:bg-primary` is the whole chain in one class. `@theme inline` compiles it
+ * to `background-color: var(--yv-primary)`, and not to a frozen literal. That is
+ * what lets a runtime token override reach a build-time utility.
+ *
+ * Consumer CSS is off here on purpose. This story measures one channel.
+ */
+export const ConsumerTokenOverrideStillApplies: Story = {
+  parameters: { consumerHost: [] },
+  render: () => (
+    <div data-yv-sdk className="yv:p-12">
+      <div data-testid="primary-swatch" className="yv:size-16 yv:bg-primary" />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const swatch = await findIn(canvasElement, '[data-testid="primary-swatch"]');
+
+    // Without this assertion, a token that never resolved passes the next
+    // assertion by accident.
+    await expect(getComputedStyle(swatch).backgroundColor).not.toBe(OVERRIDDEN_PRIMARY);
+
+    const style = document.createElement('style');
+    style.textContent = CONSUMER_TOKEN_OVERRIDE;
+    document.head.appendChild(style);
+
+    try {
+      // waitFor, not a direct read. A change to a token starts any transition on
+      // background-color, and the first frame reports an interpolated value.
+      await waitFor(async () => {
+        await expect(getComputedStyle(swatch).backgroundColor).toBe(OVERRIDDEN_PRIMARY);
+      });
+    } finally {
+      style.remove();
+    }
+  },
+};
+
+/* -------------------------------------------------------------------------- */
+/* Reverse direction: SDK CSS reaching into consumer content                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The other direction, and the one nothing measured before.
+ *
+ * Every story above asks whether consumer CSS moves SDK DOM. These stories ask
+ * whether SDK CSS moves consumer DOM. An SDK component that renders `children`
+ * or render-prop output puts consumer markup inside a `[data-yv-sdk]` subtree,
+ * where the old `[data-yv-sdk] *` arm matched it. `theme.css` then recolored it
+ * and reset its box model, and after the layered-important change those
+ * declarations carried `!important` as well.
+ *
+ * The answer is `data-yv-slot`. An SDK component stamps it on the element that
+ * holds consumer content, and the gate stops there:
+ *
+ *   :is([data-yv-sdk],
+ *       [data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *)))
+ *
+ * The exclusion sits inside `:where()`, which contributes no specificity. The
+ * boundary changes what the sheet matches and nothing about what it wins.
+ *
+ * The baseline is a placement, not a sheet state. See `diffPlacements` in
+ * `src/test/style-diff.ts` for why, and `CONSUMER_CONTENT_CSS` in
+ * `src/test/consumer-host.ts` for how the inheritance channel is closed. The
+ * short version: a slot child that declares nothing still inherits `font-size`,
+ * `color` and `font-family` from its SDK ancestors. That is normal CSS, it
+ * happens to consumer content anywhere else in their page too, and it is not a
+ * leak. The slot boundary stops selector matching only.
+ *
+ * See docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+ */
+
+/** Injects the consumer's own sheet, so the story is also correct to look at. */
+function ConsumerContentStyles(): null {
+  useLayoutEffect(() => injectConsumerContentCss(), []);
+  return null;
+}
+
+/**
+ * Consumer markup, block level.
+ *
+ * Every element here is one that `theme.css` names: `h1`-`h6`, `a`, `b`/`strong`,
+ * `code`, `small`, `sub`/`sup`, `table`, `ol`/`ul`, `hr`, `button`, `input` and
+ * `textarea`. A fixture of plain `div`s would only exercise the `*` rule and
+ * would call the rest of the reset isolated without testing it.
+ */
+function ConsumerBlockContent({ testId }: { testId: string }): ReactElement {
+  return (
+    <div className={CONSUMER_CONTENT_CLASS} data-testid={testId}>
+      <h2>Consumer heading</h2>
+      <p>
+        Consumer copy with <strong>strong</strong>, <em>emphasis</em>, <code>code</code>,{' '}
+        <small>small</small>, <sub>sub</sub>, <sup>sup</sup> and{' '}
+        <a href="#consumer-content">a link</a>.
+      </p>
+      <ul>
+        <li>First consumer item</li>
+        <li>Second consumer item</li>
+      </ul>
+      <table>
+        <tbody>
+          <tr>
+            <td>Consumer cell</td>
+          </tr>
+        </tbody>
+      </table>
+      <hr />
+      <button type="button">Consumer button</button>
+      <input readOnly value="Consumer input" />
+      <textarea readOnly value="Consumer textarea" />
+    </div>
+  );
+}
+
+/**
+ * Consumer markup, phrasing content only.
+ *
+ * The trigger slots render inside a `<button>`. An `<a>`, a nested `<button>` or
+ * a `<div>` there is invalid HTML, and the two placements would then not hold
+ * the same DOM.
+ */
+function ConsumerPhrasingContent({ testId }: { testId: string }): ReactElement {
+  return (
+    <span className={CONSUMER_CONTENT_CLASS} data-testid={testId}>
+      <strong>Consumer strong</strong>
+      <em>Consumer emphasis</em>
+      <code>Consumer code</code>
+      <small>Consumer small</small>
+      <span>Consumer span</span>
+    </span>
+  );
+}
+
+const OUTSIDE_TEST_ID = 'reverse-outside';
+const INSIDE_TEST_ID = 'reverse-inside';
+
+type ReverseStoryConfig = {
+  /** Names the component in the console report. */
+  label: string;
+  render: () => ReactElement;
+  /** Waits for the SDK component around the slot to finish its load. */
+  ready?: () => Promise<unknown>;
+  /**
+   * The positive control sets this. A story that measures zero proves nothing
+   * unless another story, run the same way, measures more than zero.
+   */
+  expectLeaks?: boolean;
+};
+
+function reverseStory(config: ReverseStoryConfig): Story {
+  return {
+    // No host CSS. This direction measures the SDK sheet, and a hostile consumer
+    // sheet on top of it would only add noise the story does not assert on.
+    parameters: { consumerHost: [] },
+    render: config.render,
+    play: async () => {
+      if (config.ready) await config.ready();
+
+      const outside = await findIn(document.body, `[data-testid="${OUTSIDE_TEST_ID}"]`);
+      const inside = await findIn(document.body, `[data-testid="${INSIDE_TEST_ID}"]`);
+
+      // The placements have to be what their names say, or the diff is between
+      // two copies of the same thing and reads zero for the wrong reason.
+      await expect(outside.closest('[data-yv-sdk]')).toBe(null);
+      await expect(inside.closest('[data-yv-sdk]')).not.toBe(null);
+
+      const leaks = diffPlacements(await stableSnapshot(outside), await stableSnapshot(inside));
+      console.info(formatLeakReport(`${config.label} (reverse)`, leaks));
+
+      if (config.expectLeaks) {
+        await expect(leaks.length).toBeGreaterThan(0);
+        return;
+      }
+
+      // The slot boundary has to exist before a zero means anything.
+      await expect(inside.closest('[data-yv-slot]')).not.toBe(null);
+      await expect(leaks).toEqual([]);
+    },
+  };
+}
+
+/**
+ * `BibleReader.Root` renders SDK compound children and consumer children into
+ * the same stamped `<div>`. The SDK cannot stamp that container as a slot: it
+ * would strip the styling from `BibleReader.Content` and `BibleReader.Toolbar`.
+ * So the slot here is the consumer's own, and `data-yv-slot` is a documented
+ * opt-in. This story is that documentation, executed.
+ */
+function BibleReaderSlotHarness(): ReactElement {
+  return (
+    <div>
+      <ConsumerContentStyles />
+      <ConsumerBlockContent testId={OUTSIDE_TEST_ID} />
+      <BibleReader.Root defaultVersionId={111} defaultBook="JHN" defaultChapter="1">
+        <div data-yv-slot>
+          <ConsumerBlockContent testId={INSIDE_TEST_ID} />
+        </div>
+      </BibleReader.Root>
+    </div>
+  );
+}
+
+export const BibleReaderConsumerSlot: Story = reverseStory({
+  label: 'BibleReader.Root children',
+  render: () => <BibleReaderSlotHarness />,
+});
+
+/** The same markup in the same place, with no `data-yv-slot` on it. */
+function BibleReaderUnmarkedHarness(): ReactElement {
+  return (
+    <div>
+      <ConsumerContentStyles />
+      <ConsumerBlockContent testId={OUTSIDE_TEST_ID} />
+      <BibleReader.Root defaultVersionId={111} defaultBook="JHN" defaultChapter="1">
+        <ConsumerBlockContent testId={INSIDE_TEST_ID} />
+      </BibleReader.Root>
+    </div>
+  );
+}
+
+/**
+ * The positive control. Consumer content with no slot marker still takes the SDK
+ * reset, by design: the gate cannot tell it apart from SDK DOM. A zero here
+ * would mean the harness measures nothing.
+ */
+export const BibleReaderUnmarkedConsumerContentStillLeaks: Story = reverseStory({
+  label: 'BibleReader.Root children, unmarked',
+  render: () => <BibleReaderUnmarkedHarness />,
+  expectLeaks: true,
+});
+
+function ChapterPickerSlotHarness(): ReactElement {
+  const [book, setBook] = useState('MAT');
+  const [chapter, setChapter] = useState('5');
+
+  return (
+    <div>
+      <ConsumerContentStyles />
+      <ConsumerPhrasingContent testId={OUTSIDE_TEST_ID} />
+      <BibleChapterPicker.Root
+        book={book}
+        onBookChange={setBook}
+        chapter={chapter}
+        onChapterChange={setChapter}
+        versionId={111}
+      >
+        <BibleChapterPicker.Trigger asChild={false}>
+          <ConsumerPhrasingContent testId={INSIDE_TEST_ID} />
+        </BibleChapterPicker.Trigger>
+      </BibleChapterPicker.Root>
+    </div>
+  );
+}
+
+export const BibleChapterPickerTriggerConsumerSlot: Story = reverseStory({
+  label: 'BibleChapterPicker.Trigger children',
+  render: () => <ChapterPickerSlotHarness />,
+});
+
+function VersionPickerSlotHarness(): ReactElement {
+  const [versionId, setVersionId] = useState(111);
+
+  return (
+    <div>
+      <ConsumerContentStyles />
+      <ConsumerPhrasingContent testId={OUTSIDE_TEST_ID} />
+      <BibleVersionPicker.Root versionId={versionId} onVersionChange={setVersionId}>
+        <BibleVersionPicker.Trigger asChild={false}>
+          <ConsumerPhrasingContent testId={INSIDE_TEST_ID} />
+        </BibleVersionPicker.Trigger>
+      </BibleVersionPicker.Root>
+    </div>
+  );
+}
+
+export const BibleVersionPickerTriggerConsumerSlot: Story = reverseStory({
+  label: 'BibleVersionPicker.Trigger children',
+  render: () => <VersionPickerSlotHarness />,
+});
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index 82c442bf..32d665e5 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -27,6 +27,11 @@ function DialogContent({
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
+        // The overlay renders into `document.body`, so it has no SDK ancestor
+        // to inherit the gate from. Without the attribute, it loses its
+        // backdrop once every utility is gated on `[data-yv-sdk]`.
+        data-yv-sdk
+        data-yv-theme={theme}
         className={cn(
           'yv:fixed yv:inset-0 yv:z-50 yv:bg-black/50',
           'yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out',
diff --git a/packages/ui/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
index 04315ca7..f3424ea3 100644
--- a/packages/ui/src/components/ui/separator.tsx
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { useTheme } from '@youversion/platform-react-hooks';
 
 import { cn } from '@/lib/utils';
 
@@ -9,9 +10,17 @@ function Separator({
   decorative = true,
   ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.ReactNode {
+  const theme = useTheme();
+
   return (
     <SeparatorPrimitive.Root
       data-slot="separator"
+      // Separator is exported from the package root, so it can be the outermost
+      // SDK element on the page. It carries the gate attribute itself, and does
+      // not depend on an SDK ancestor. `{...props}` stays last, so a caller
+      // inside a scope with another theme can override `data-yv-theme`.
+      data-yv-sdk=""
+      data-yv-theme={theme}
       decorative={decorative}
       orientation={orientation}
       className={cn(
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
index 0cf5844c..75217091 100644
--- a/packages/ui/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -1,11 +1,20 @@
 import * as React from 'react';
+import { useTheme } from '@youversion/platform-react-hooks';
 
 import { cn } from '@/lib/utils';
 
 function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): React.ReactElement {
+  const theme = useTheme();
+
   return (
     <textarea
       data-slot="textarea"
+      // Textarea is exported from the package root, so it can be the outermost
+      // SDK element on the page. It carries the gate attribute itself, and does
+      // not depend on an SDK ancestor. `{...props}` stays last, so a caller
+      // inside a scope with another theme can override `data-yv-theme`.
+      data-yv-sdk=""
+      data-yv-theme={theme}
       className={cn(
         'yv:border-input yv:placeholder:text-muted-foreground yv:focus-visible:border-ring yv:focus-visible:ring-ring/50 yv:aria-invalid:ring-destructive/20 yv:dark:aria-invalid:ring-destructive/40 yv:aria-invalid:border-destructive yv:dark:bg-input/30 yv:flex yv:field-sizing-content yv:min-h-16 yv:w-full yv:rounded-md yv:border yv:bg-transparent yv:px-3 yv:py-2 yv:text-base yv:shadow-xs yv:transition-[color,box-shadow] yv:outline-none yv:focus-visible:ring-[3px] yv:disabled:cursor-not-allowed yv:disabled:opacity-50 yv:md:text-sm',
         className,
diff --git a/packages/ui/src/components/verse.tsx b/packages/ui/src/components/verse.tsx
index d0f36068..ac3affc2 100644
--- a/packages/ui/src/components/verse.tsx
+++ b/packages/ui/src/components/verse.tsx
@@ -60,18 +60,27 @@ export function FootnoteContent({
   hasVerseContext,
 }: FootnoteContentProps): React.ReactElement {
   const { t } = useTranslation(undefined, { i18n });
+  const providerTheme = useTheme();
   const verseReference = reference ? `${reference}:${verseNum}` : t('verseLabel', { verseNum });
   const showVerseContext = hasVerseContext ?? verseHtml.length > 0;
 
   return (
-    <div data-yv-sdk data-yv-theme={theme}>
+    // The root must name a theme, and not only the gate. `[data-yv-sdk]`
+    // declares the light `--yv-*` tokens again. Without `data-yv-theme` here,
+    // `yv:bg-background` stayed light, whatever the caller wanted.
+    <div data-yv-sdk data-yv-theme={theme ?? providerTheme}>
       <div className="yv:p-3 yv:overflow-y-auto yv:bg-background yv:text-foreground">
         {showVerseContext && (
           <>
             <div className="yv:font-bold yv:mb-2">{verseReference}</div>
             <div
               className="yv:mb-3 yv:font-serif yv:*:font-serif"
-              style={{ fontSize: fontSize ? `${fontSize}px` : '1.25rem' }}
+              // px, not rem. An inline style never passes through
+              // scope-selectors.mjs, so the rem rebase cannot reach it, and a
+              // host `html { font-size }` would rescale it. 20px is 1.25rem at
+              // the browser default. See
+              // docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md.
+              style={{ fontSize: fontSize ? `${fontSize}px` : '20px' }}
               // biome-ignore lint/security/noDangerouslySetInnerHtml: Bible footnote HTML comes from our YouVersion APIs and is safe
               dangerouslySetInnerHTML={{ __html: verseHtml }}
             />
diff --git a/packages/ui/src/lib/consumer-slot.tsx b/packages/ui/src/lib/consumer-slot.tsx
new file mode 100644
index 00000000..e7a26472
--- /dev/null
+++ b/packages/ui/src/lib/consumer-slot.tsx
@@ -0,0 +1,40 @@
+import type { ReactElement, ReactNode } from 'react';
+
+/**
+ * Marks a piece of DOM as consumer territory, so SDK CSS stops there.
+ *
+ * The SDK sheet is gated on `[data-yv-sdk]`, and the gate's descendant arm used
+ * to be `[data-yv-sdk] *`. That arm matched everything inside an SDK subtree,
+ * including the `children` a consumer passed into an SDK component. The
+ * consumer's own markup was being reset and recolored by our sheet, and after
+ * the layered-`!important` change those declarations were important too.
+ *
+ * The gate arm is now
+ * `[data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *))`. Wrapping
+ * consumer
+ * content in this component puts `data-yv-slot` on the boundary, and no SDK
+ * selector matches the wrapper or anything under it.
+ *
+ * Two things this does not do, both on purpose:
+ *
+ * - It does not stop inheritance. `color`, `font-family` and the rest still flow
+ *   in from the SDK ancestors, the way any content inherits from where it is
+ *   placed. A consumer who wants different values declares them. The reverse
+ *   harness measures selector matching only, for that reason.
+ * - It does not stop a selector whose subject sits past the gate compound, such
+ *   as a `space-y-*` utility's `> :not(:last-child)`. Such a selector can reach
+ *   this wrapper, though not the consumer elements below it. See
+ *   docs/style-isolation-residual-leak.md.
+ *
+ * `display: contents` keeps the wrapper out of layout, so stamping a slot never
+ * changes how the content is laid out.
+ *
+ * See docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+ */
+export function ConsumerSlot({ children }: { children: ReactNode }): ReactElement {
+  return (
+    <span data-yv-slot style={{ display: 'contents' }}>
+      {children}
+    </span>
+  );
+}
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index 01568998..4efe741f 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -1,48 +1,65 @@
 /*
- * Tailwind v4 CSS Layer Strategy
- * ==============================
- * All SDK styles are wrapped in custom @layer directives (yv-sdk-*) so that
- * they sit below unlayered author styles in the CSS cascade. This prevents
- * our SDK from overriding consumer CSS.
+ * Style isolation by territory, not by cascade rank
+ * =================================================
+ * SDK CSS is UNLAYERED, and every SDK selector is gated on `[data-yv-sdk]`.
  *
- * LAYER ORDER IS CRITICAL. We declare Tailwind v4's standard layer names
- * (theme, base, components, utilities) BEFORE our yv-sdk-* layers. Each
- * public component renders a React 19 <style href="yv-sdk-styles"
- * precedence="yv-sdk"> element which React hoists to <head>, deduplicates,
- * and includes in SSR-streamed HTML. This establishes the document's layer
- * order before the consumer's Tailwind can. This ensures:
+ * There is no @layer declaration here, on purpose. Cascade layers were the old
+ * strategy. SDK rules sat in `yv-sdk-*` layers, below the unlayered author CSS
+ * of the consumer, so the consumer always won. That protected the consumer, and
+ * it also guaranteed the leak in the other direction. A bare consumer
+ * `button {}` rule overrode every `yv:`-prefixed SDK utility, at any
+ * specificity, because unlayered CSS overrides every named layer (CSS Cascade 5
+ * §6.1).
  *
- *   1. Consumer Tailwind layers (theme/base/utilities) = LOW priority
- *   2. SDK layers (yv-sdk-*)                           = MEDIUM priority
- *   3. Consumer unlayered author CSS                   = HIGH priority (always wins)
+ * The replacement is structural. `scripts/scope-selectors.mjs` runs after the
+ * Tailwind build, and rewrites every selector in the compiled sheet:
  *
- * Without the standard Tailwind names here, the consumer's Tailwind would
- * declare them AFTER ours, giving consumer layers higher priority and causing
- * their resets/utilities to bleed into SDK components.
+ *   .yv\:mt-4
+ *     →  :is([data-yv-sdk],
+ *            [data-yv-sdk] *:where(:not([data-yv-slot], [data-yv-slot] *))
+ *           ).yv\:mt-4
+ *
+ * That does two things at once. Outbound, SDK CSS cannot match DOM that the SDK
+ * did not render, which is a stronger guarantee than a loss in the cascade.
+ * Inbound, `:is()` takes the specificity of its most specific argument, so every
+ * rule gains exactly 0,1,0 and overrides a consumer bare element selector.
+ *
+ * The `:where(:not(…))` is the consumer-slot boundary. A consumer's `children`
+ * render inside our subtree, so the gate matched them too. An element stamped
+ * `data-yv-slot`, and everything under it, is consumer territory, and SDK
+ * selectors stop there. `:where()` contributes no specificity, so the boundary
+ * changes what the sheet matches and nothing about what it wins. See
+ * docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+ *
+ * The script fails the build when one selector reaches `dist/tailwind.css`
+ * without the gate, or with a gate that has no slot exclusion. Those checks, and
+ * not this comment, are the guarantee.
+ *
+ * Consumer customization is unchanged and still supported. A `--yv-*` token
+ * override on `[data-yv-sdk]` ties our token block at 0,1,0, and wins on source
+ * order. Consumer CSS that reaches into SDK internals is not supported.
  *
  * The `prefix(yv)` ensures all Tailwind classes use a `yv:` prefix to avoid
  * collisions with consumer Tailwind setups.
  *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
+ * See docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md.
  *
  * NOTE: We intentionally do NOT import 'tailwindcss/preflight.css' globally.
  * Instead, a simplified preflight CSS reset exists in
  * @youversion/platform-core/browser/styles/theme.css so our SDK components
  * get the benefits of a reset without nuking consumer app styles.
  */
-@layer theme, base, components, utilities, yv-sdk-fonts, yv-sdk-styles, yv-sdk-theme, yv-sdk-utilities, yv-sdk-bible-reader;
 
 /**
   * Why do this versus importing @youversion/platform-core/browser/styles/fonts.css?
-  * It's because you cannot nest @import inside a @layer block directly, of which that
-  * file has an @import in it, so since we're using layers, we have to do it this way.
+  * That file has an @import of its own, and an @import can only be at the top of
+  * a stylesheet. The URL here is inline, which keeps it in a legal position.
   */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+4:wght@400;700&display=swap')
-layer(yv-sdk-fonts);
-@import '@youversion/platform-core/browser/styles/theme.css' layer(yv-sdk-styles);
-@import 'tailwindcss/theme.css' layer(yv-sdk-theme) prefix(yv);
-@import 'tailwindcss/utilities.css' layer(yv-sdk-utilities) prefix(yv);
-@import '@youversion/platform-core/browser/styles/bible-reader.css' layer(yv-sdk-bible-reader);
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+4:wght@400;700&display=swap');
+@import '@youversion/platform-core/browser/styles/theme.css';
+@import 'tailwindcss/theme.css' prefix(yv);
+@import 'tailwindcss/utilities.css' prefix(yv);
+@import '@youversion/platform-core/browser/styles/bible-reader.css';
 @import 'tw-animate-css';
 
 /* Untitled Serif has no @font-face here on purpose. Its stylesheet URL needs the
@@ -54,77 +71,107 @@ layer(yv-sdk-fonts);
    serif fallback. */
 
 /* #region shadcn UI theme */
-@custom-variant dark (&:is([data-yv-sdk][data-yv-theme='dark'] *));
-
-@layer yv-sdk-theme {
-  [data-yv-sdk] {
-    @theme inline {
-      /* Untitled Serif is the brand serif, loaded from the gated Fonts API stylesheet
-         endpoint by <YvFonts /> — see docs/adr/0004-adopt-untitled-serif-via-fonts-api.md.
-         NOTE: the serif stack is duplicated verbatim in
-         packages/core/src/styles/theme.css (--yv-font-serif). It cannot be an alias:
-         core can't import Tailwind, and @theme inline values are inlined into utilities
-         rather than emitted as runtime custom properties. Edit both together —
-         font-tokens.test.ts guards drift. */
-      --font-sans: 'Inter', sans-serif;
-      --font-serif: 'Untitled Serif', 'Source Serif 4', serif;
-      --color-background: var(--yv-background);
-      --color-foreground: var(--yv-foreground);
-      --color-card: var(--yv-card);
-      --color-card-foreground: var(--yv-card-foreground);
-      --color-popover: var(--yv-popover);
-      --color-popover-foreground: var(--yv-popover-foreground);
-      --color-primary: var(--yv-primary);
-      --color-primary-foreground: var(--yv-primary-foreground);
-      --color-secondary: var(--yv-secondary);
-      --color-secondary-foreground: var(--yv-secondary-foreground);
-      --color-muted: var(--yv-muted);
-      --color-muted-foreground: var(--yv-muted-foreground);
-      --color-accent: var(--yv-accent);
-      --color-accent-foreground: var(--yv-accent-foreground);
-      --color-destructive: var(--yv-destructive);
-      --color-destructive-foreground: var(--yv-destructive-foreground);
-      --color-border: var(--yv-border);
-      --color-input: var(--yv-input);
-      --color-ring: var(--yv-ring);
-      --color-chart-1: var(--yv-chart-1);
-      --color-chart-2: var(--yv-chart-2);
-      --color-chart-3: var(--yv-chart-3);
-      --color-chart-4: var(--yv-chart-4);
-      --color-chart-5: var(--yv-chart-5);
-      --radius-sm: calc(var(--yv-radius) - 4px);
-      --radius-md: calc(var(--yv-radius) - 2px);
-      --radius-lg: var(--yv-radius);
-      --radius-xl: calc(var(--yv-radius) + 4px);
-      --color-sidebar: var(--yv-sidebar);
-      --color-sidebar-foreground: var(--yv-sidebar-foreground);
-      --color-sidebar-primary: var(--yv-sidebar-primary);
-      --color-sidebar-primary-foreground: var(--yv-sidebar-primary-foreground);
-      --color-sidebar-accent: var(--yv-sidebar-accent);
-      --color-sidebar-accent-foreground: var(--yv-sidebar-accent-foreground);
-      --color-sidebar-border: var(--yv-sidebar-border);
-      --color-sidebar-ring: var(--yv-sidebar-ring);
-    }
+/* This variant already carries the gate, so scope-selectors.mjs leaves it alone.
+   That means the slot exclusion is written here by hand, and the build check
+   requires it: the variant reaches past a `[data-yv-sdk]` compound.
+   The `:where()` is what keeps the margin over a base utility intact. A base
+   utility is 0,2,0 (gate 0,1,0 plus the class) and a `dark:` utility is 0,3,0
+   (the class plus this 0,2,0 `:is()`), exactly as before the slot work. A bare
+   `:not()` here and in the gate would push both up a step and preserve the
+   margin too, but it would also lift the unlayered half of the sheet over
+   ordinary consumer CSS — see the ADR. `:where()` adds nothing on either side.
+   See docs/adr/0008-stop-sdk-css-at-consumer-slots.md. */
+@custom-variant dark (&:is([data-yv-sdk][data-yv-theme='dark'] *:where(:not([data-yv-slot], [data-yv-slot] *))));
+
+[data-yv-sdk] {
+  @theme inline {
+    /* Untitled Serif is the brand serif, loaded from the gated Fonts API stylesheet
+       endpoint by <YvFonts /> — see docs/adr/0004-adopt-untitled-serif-via-fonts-api.md.
+       NOTE: the serif stack is duplicated verbatim in
+       packages/core/src/styles/theme.css (--yv-font-serif). It cannot be an alias:
+       core can't import Tailwind, and @theme inline values are inlined into utilities
+       rather than emitted as runtime custom properties. Edit both together —
+       font-tokens.test.ts guards drift. */
+    --font-sans: 'Inter', sans-serif;
+    --font-serif: 'Untitled Serif', 'Source Serif 4', serif;
+    --color-background: var(--yv-background);
+    --color-foreground: var(--yv-foreground);
+    --color-card: var(--yv-card);
+    --color-card-foreground: var(--yv-card-foreground);
+    --color-popover: var(--yv-popover);
+    --color-popover-foreground: var(--yv-popover-foreground);
+    --color-primary: var(--yv-primary);
+    --color-primary-foreground: var(--yv-primary-foreground);
+    --color-secondary: var(--yv-secondary);
+    --color-secondary-foreground: var(--yv-secondary-foreground);
+    --color-muted: var(--yv-muted);
+    --color-muted-foreground: var(--yv-muted-foreground);
+    --color-accent: var(--yv-accent);
+    --color-accent-foreground: var(--yv-accent-foreground);
+    --color-destructive: var(--yv-destructive);
+    --color-destructive-foreground: var(--yv-destructive-foreground);
+    --color-border: var(--yv-border);
+    --color-input: var(--yv-input);
+    --color-ring: var(--yv-ring);
+    --color-chart-1: var(--yv-chart-1);
+    --color-chart-2: var(--yv-chart-2);
+    --color-chart-3: var(--yv-chart-3);
+    --color-chart-4: var(--yv-chart-4);
+    --color-chart-5: var(--yv-chart-5);
+    --radius-sm: calc(var(--yv-radius) - 4px);
+    --radius-md: calc(var(--yv-radius) - 2px);
+    --radius-lg: var(--yv-radius);
+    --radius-xl: calc(var(--yv-radius) + 4px);
+    --color-sidebar: var(--yv-sidebar);
+    --color-sidebar-foreground: var(--yv-sidebar-foreground);
+    --color-sidebar-primary: var(--yv-sidebar-primary);
+    --color-sidebar-primary-foreground: var(--yv-sidebar-primary-foreground);
+    --color-sidebar-accent: var(--yv-sidebar-accent);
+    --color-sidebar-accent-foreground: var(--yv-sidebar-accent-foreground);
+    --color-sidebar-border: var(--yv-sidebar-border);
+    --color-sidebar-ring: var(--yv-sidebar-ring);
   }
 }
 /* #endregion */
 
-@layer yv-sdk-utilities {
-  .trim-both {
-    text-box-trim: trim-both;
-  }
+/* The SDK root anchors its own font size.
+
+   theme.css declares `font-family`, `line-height` and the rest of the inherited
+   text properties on this element, but not `font-size`. Without this rule the
+   root inherits the consumer's `body` font size, and every SDK component grows
+   or shrinks with it. The build converts the sheet's `rem` lengths to `px`, so
+   the sheet itself no longer tracks the document root, but inheritance is a
+   second channel and needs its own answer.
+
+   16px, because that is the browser default and the value the rem rebase uses.
+   `font-size` is on EXEMPT_PROPERTIES, so this declaration stays unlayered and
+   normal at 0,1,0. A consumer who wants the SDK to scale can still override it,
+   and that is the escape hatch for a reader who needs larger text.
+
+   See docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md. */
+[data-yv-sdk] {
+  font-size: 16px;
 }
 
-/* Verse selection — an underline under the selected verse's text. Sits in the
-   bible-reader layer alongside the `.yv-v` verse structure. Highlight fills are
-   applied as inline styles in verse.tsx (per-verse color), so they aren't here. */
-@layer yv-sdk-bible-reader {
-  [data-yv-sdk] .yv-v-selected {
-    text-decoration-line: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 2px;
-    text-decoration-color: var(--yv-foreground);
-  }
+/* `.trim-both` has no `yv:` prefix, because a person wrote it and Tailwind did
+   not generate it. scope-selectors.mjs adds the gate to it, as it does to every
+   other rule. */
+.trim-both {
+  text-box-trim: trim-both;
+}
+
+/* Verse selection: an underline under the text of the selected verse. It sits
+   with the `.yv-v` verse structure from bible-reader.css. Highlight fills are
+   inline styles in verse.tsx (one color per verse), so they are not here.
+
+   The rule carries the gate already, so scope-selectors.mjs does not rewrite it,
+   and the slot exclusion is hand-written. The build check rejects the rule
+   without it. */
+[data-yv-sdk] .yv-v-selected:where(:not([data-yv-slot], [data-yv-slot] *)) {
+  text-decoration-line: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--yv-foreground);
 }
 
 @utility touch-hitbox {
diff --git a/packages/ui/src/styles/scope-selectors.test.ts b/packages/ui/src/styles/scope-selectors.test.ts
new file mode 100644
index 00000000..9a4c67c4
--- /dev/null
+++ b/packages/ui/src/styles/scope-selectors.test.ts
@@ -0,0 +1,464 @@
+import { describe, expect, it } from 'vitest';
+
+import { scopeCss } from '../../scripts/scope-selectors.mjs';
+
+/**
+ * Covers the post-build rewrite that is the whole style-isolation guarantee.
+ *
+ * The build already fails on a non-empty `ungated` or `problems` list. These
+ * tests are thus not the safety net. They are the specification. They pin the
+ * shape of the gate, the four cases that stay unchanged, the split into a
+ * `@layer yv` half and an unlayered half, and which properties may not become
+ * `!important`. They also pin the constructs that a plain string rewrite
+ * corrupts: escaped class names, `@keyframes`, `@property`, and nested `&`
+ * rules.
+ *
+ * See YPE-4113, docs/adr/0005-scope-sdk-css-to-data-yv-sdk-subtrees.md,
+ * docs/adr/0006-layer-and-importantize-the-sdk-sheet.md and
+ * docs/adr/0008-stop-sdk-css-at-consumer-slots.md.
+ */
+
+/**
+ * The gate, as Lightning CSS prints it.
+ *
+ * The descendant arm carries the slot exclusion, which is what stops SDK CSS at
+ * consumer content. It sits inside `:where()` so it costs no specificity.
+ * Lightning CSS drops the redundant `*` before it, so the printed arm is
+ * `[data-yv-sdk] :where(…)`, not `[data-yv-sdk] *:where(…)`. The two are the
+ * same selector.
+ */
+const GATE = ':is([data-yv-sdk], [data-yv-sdk] :where(:not([data-yv-slot], [data-yv-slot] *)))';
+
+/** The same gate, without the spaces that the minifier removes. */
+const MINIFIED_GATE =
+  ':is([data-yv-sdk],[data-yv-sdk] :where(:not([data-yv-slot],[data-yv-slot] *)))';
+
+/** The exclusion on its own, for a hand-written selector that carries the gate already. */
+const SLOT_EXCLUSION = ':where(:not([data-yv-slot], [data-yv-slot] *))';
+
+/** Rewrites `source`. The test fails when the rewrite left anything unsafe. */
+function scope(source: string): string {
+  const { code, ungated, problems } = scopeCss(source);
+  expect(ungated, 'every selector must be gated after the rewrite').toEqual([]);
+  expect(problems, 'the rewrite must leave no structural fault').toEqual([]);
+  return code;
+}
+
+describe('scopeCss', () => {
+  describe('gates selectors that can otherwise match consumer DOM', () => {
+    it('prepends the gate to a class selector', () => {
+      expect(scope('.card { color: red }')).toContain(`${GATE}.card`);
+    });
+
+    it('keeps a leading type selector first, because :is(…)a is invalid CSS', () => {
+      // A compound selector must start with its type selector. `:is(…)button`
+      // parses as nothing. The browser accepts `button:is(…)`.
+      expect(scope('button { padding: 0 }')).toContain(`button${GATE}`);
+    });
+
+    it('gates only the first compound, since the rest is already inside the subtree', () => {
+      const code = scope('.list .item { color: red }');
+      expect(code).toContain(`${GATE}.list .item`);
+    });
+
+    it('gates a pseudo-element selector', () => {
+      expect(scope('.field::placeholder { opacity: 1 }')).toContain(`${GATE}.field::placeholder`);
+    });
+
+    it('gates every selector in a list independently', () => {
+      const code = scope('.a, .b { color: red }');
+      expect(code).toContain(`${GATE}.a`);
+      expect(code).toContain(`${GATE}.b`);
+    });
+
+    it('gates the universal selector', () => {
+      // `*:is(…)` and `:is(…)` are the same selector, and Lightning CSS removes
+      // the unnecessary `*`. The gate is what matters.
+      const code = scope('*, ::before { --tw-x: 1 }');
+      expect(code).toContain(GATE);
+      expect(code).not.toMatch(/(^|\})\s*\*/);
+    });
+  });
+
+  describe('leaves selectors that are already safe', () => {
+    it('leaves a selector that already names [data-yv-sdk]', () => {
+      // A hand-written gated selector writes its own slot exclusion. The build
+      // rejects it without one — see the `stops at consumer slots` block.
+      const code = scope(
+        `[data-yv-sdk] .yv-v-selected${SLOT_EXCLUSION} { text-decoration-line: underline }`,
+      );
+      expect(code).not.toContain(GATE);
+      expect(code).toContain(`[data-yv-sdk] .yv-v-selected${SLOT_EXCLUSION}`);
+    });
+
+    it('leaves the Bible renderer slot', () => {
+      const code = scope("[data-slot='yv-bible-renderer'] { display: block }");
+      expect(code).not.toContain(GATE);
+    });
+
+    it('leaves [data-yv-sdk-bible-reader], the non-React consumer hook', () => {
+      const code = scope('[data-yv-sdk-bible-reader] { display: block }');
+      expect(code).not.toContain(GATE);
+    });
+
+    it('leaves :root and :host, which only carry --yv-* variables', () => {
+      // A gate on these two works, because every portal stamps the attribute
+      // again. It adds risk and gives no gain. They render nothing, and every
+      // name has the `--yv-*` namespace.
+      const code = scope(':root, :host { --yv-font-sans: Inter }');
+      expect(code).not.toContain(GATE);
+      expect(code).toContain(':root');
+      expect(code).toContain(':host');
+    });
+
+    it('leaves a gate carried inside :is()', () => {
+      const code = scope(
+        `[data-yv-sdk]:is([data-yv-theme='dark']) .x${SLOT_EXCLUSION} { color: red }`,
+      );
+      expect(code).not.toContain(GATE);
+    });
+  });
+
+  describe('rejects a partial gate', () => {
+    it('re-gates :is() when only one branch is scoped', () => {
+      // `:is([data-yv-sdk], .card)` reaches consumer DOM through its second
+      // branch. It is thus not a gate. Every branch needs the gate, not some.
+      const code = scope(':is([data-yv-sdk], .card) { color: red }');
+      expect(code).toContain(GATE);
+    });
+
+    it('does not treat a gate inside :not() as a gate', () => {
+      const code = scope(':not([data-yv-sdk]) { color: red }');
+      expect(code).toContain(GATE);
+    });
+  });
+
+  describe('stops at consumer slots', () => {
+    it('excludes a slot, and everything under it, from the gate', () => {
+      // The whole point of the change. A consumer's `children` render inside our
+      // subtree, and the old `[data-yv-sdk] *` arm matched every one of them.
+      expect(scope('.card { color: red }')).toContain(
+        ':is([data-yv-sdk], [data-yv-sdk] :where(:not([data-yv-slot], [data-yv-slot] *)))',
+      );
+    });
+
+    it('costs no specificity, because the exclusion sits inside :where()', () => {
+      // A bare `:not()` would take the specificity of its most specific
+      // argument and lift every rule in the sheet by 0,1,0. Measured, that
+      // lifted the unlayered half of the sheet over ordinary consumer CSS and
+      // made consumer content outside a slot worse off than before the change.
+      const code = scope('.card { color: red }');
+      expect(code).toContain(':where(:not([data-yv-slot], [data-yv-slot] *))');
+      expect(code).not.toContain('*:not([data-yv-slot]');
+    });
+
+    it('accepts a bare :not() exclusion in a hand-written selector', () => {
+      // It excludes the same elements. It pays 0,1,0 to do it, which is why the
+      // shipped form does not, but it is not a structural fault.
+      const { problems } = scopeCss(
+        '[data-yv-sdk] .yv-v-selected:not([data-yv-slot], [data-yv-slot] *) { color: red }',
+      );
+      expect(problems).toEqual([]);
+    });
+
+    it('reports a hand-written gated selector that has no slot exclusion', () => {
+      // `src/styles/global.css` and `packages/core/src/styles/theme.css` write
+      // their own gate, so the rewrite skips them. This check is what keeps the
+      // two halves of the boundary in step.
+      const { problems } = scopeCss('[data-yv-sdk] .yv-v-selected { color: red }');
+      expect(problems).toHaveLength(1);
+      expect(problems[0]).toContain('data-yv-slot');
+    });
+
+    it('reports a missing exclusion inside an :is() branch', () => {
+      // The `dark` custom variant lives in exactly this position.
+      const { problems } = scopeCss(
+        "&:is([data-yv-sdk][data-yv-theme='dark'] *) { color: red }".replace('&', '.x'),
+      );
+      expect(problems).toHaveLength(1);
+    });
+
+    it('accepts a hand-written gated selector that carries the exclusion', () => {
+      const { problems } = scopeCss(`[data-yv-sdk] .yv-v-selected${SLOT_EXCLUSION} { color: red }`);
+      expect(problems).toEqual([]);
+    });
+
+    it('wants the exclusion on the subject, not on the gate compound', () => {
+      // `[data-yv-sdk]:not(…) a` excludes the wrong element and still restyles
+      // the consumer's link.
+      const { problems } = scopeCss(`[data-yv-sdk]${SLOT_EXCLUSION} a { color: red }`);
+      expect(problems).toHaveLength(1);
+    });
+  });
+
+  describe('does not corrupt the constructs that a string rewrite corrupts', () => {
+    it('preserves escaped class names', () => {
+      const code = scope('.yv\\:mt-4 { margin-top: 1rem }');
+      expect(code).toContain(`${GATE}.yv\\:mt-4`);
+    });
+
+    it('preserves an escaped variant class with a pseudo-class', () => {
+      const code = scope('.yv\\:hover\\:underline:hover { text-decoration-line: underline }');
+      expect(code).toContain(`${GATE}.yv\\:hover\\:underline:hover`);
+    });
+
+    it('leaves @keyframes alone, because keyframe selectors are not selectors', () => {
+      const code = scope('@keyframes yv-spin { from { opacity: 0 } to { opacity: 1 } }');
+      expect(code).toContain('@keyframes yv-spin');
+      expect(code).not.toContain(GATE);
+    });
+
+    it('leaves @property alone', () => {
+      const code = scope(
+        '@property --tw-scale-x { syntax: "<number>"; inherits: false; initial-value: 1 }',
+      );
+      expect(code).toContain('@property --tw-scale-x');
+      expect(code).not.toContain(GATE);
+    });
+
+    it('leaves @font-face alone', () => {
+      const code = scope("@font-face { font-family: Inter; src: url('/inter.woff2') }");
+      expect(code).toContain('@font-face');
+      expect(code).not.toContain(GATE);
+    });
+
+    it('gates selectors inside an @media wrapper', () => {
+      const code = scope('@media (min-width: 40rem) { .card { color: red } }');
+      expect(code).toContain('@media');
+      expect(code).toContain(`${GATE}.card`);
+    });
+
+    it('gates selectors inside an @supports wrapper', () => {
+      const code = scope('@supports (color: red) { *, ::before { --tw-x: 1 } }');
+      expect(code).toContain('@supports');
+      expect(code).toContain(GATE);
+    });
+
+    it('gates rules inside a cascade layer Tailwind emits on its own', () => {
+      // Tailwind writes `@layer properties` for the @property fallback, whatever
+      // our directives say. The rewrite must thus reach inside a layer block.
+      const code = scope('@layer properties { .card { --tw-x: 1 } }');
+      expect(code).toContain(`${GATE}.card`);
+    });
+  });
+
+  describe('flattens CSS nesting before gating', () => {
+    it('expands a nested & rule into a complete selector', () => {
+      // A gate on `&:before` in place produces `:is(…)&:before`, which is
+      // invalid. The flatten pass first is what makes the visitor safe.
+      const code = scope('.touch-hitbox { position: relative; &:before { content: "" } }');
+      expect(code).toContain(`${GATE}.touch-hitbox`);
+      expect(code).not.toContain('&');
+      expect(code).toMatch(/:before|::before/);
+    });
+
+    it('expands a nested descendant rule under an already-gated root', () => {
+      const code = scope(
+        "[data-slot='yv-bible-renderer'] { display: block; & * { font-size: inherit } }",
+      );
+      expect(code).not.toContain(GATE);
+      expect(code).not.toContain('&');
+      expect(code).toContain('[data-slot="yv-bible-renderer"] *');
+    });
+
+    it('gates a nested rule whose parent needs gating', () => {
+      const code = scope('.card { color: red; & .title { font-weight: 700 } }');
+      expect(code).toContain(`${GATE}.card .title`);
+    });
+  });
+
+  describe('splits the sheet into a layered half and an unlayered half', () => {
+    it('declares the layer first, then opens it, and closes it at the end', () => {
+      const code = scope('.card { color: red }');
+      expect(code).toMatch(/^@layer yv;\s*@layer yv \{/);
+      expect(code.trimEnd().endsWith('}')).toBe(true);
+    });
+
+    it('uses the bare name `yv`, never a yv-sdk-* sub-layer', () => {
+      // `verify-styles.js` fails the build on `@layer yv-sdk-`. Those were the
+      // priority sub-layers that this change replaced.
+      expect(scope('.card { color: red }')).not.toContain('@layer yv-sdk-');
+    });
+
+    it('emits one rule into both halves when it holds both kinds of property', () => {
+      // The two halves hold disjoint property sets, so they never compete with
+      // each other, and the split costs nothing in the SDK's own cascade.
+      const { code } = scopeCss('.card { color: red; position: absolute }', { minify: true });
+      expect(code).toBe(
+        '@layer yv;' +
+          `${MINIFIED_GATE}.card{position:absolute}` +
+          `@layer yv{${MINIFIED_GATE}.card{color:red!important}}`,
+      );
+    });
+
+    it('opens no layer at all when every declaration is exempt', () => {
+      // A layered normal declaration loses to an unlayered consumer one at any
+      // specificity. Exempt properties must thus stay outside the layer.
+      const code = scope(':root { --yv-primary: red }');
+      expect(code).not.toContain('@layer yv {');
+      expect(code).toContain('@layer yv;');
+    });
+
+    it("leaves Tailwind's own @layer properties where Tailwind put it", () => {
+      // Tailwind emits `@layer properties` for the @property fallback whatever
+      // our directives say. Its body is all `--tw-*` custom properties, which
+      // are exempt as a family, so the whole block lands in the unlayered half
+      // with the cascade position Tailwind shipped.
+      const code = scope('@layer properties { .card { --tw-x: 1 } }');
+      expect(code).toContain('@layer properties');
+      expect(code).not.toContain('@layer yv {');
+    });
+
+    it('carries a conditional wrapper into whichever half needs it', () => {
+      // 40rem arrives as 640px, because the rem rebase reaches into the media
+      // query too. See the `rem` describe block below for why that is correct.
+      const { code } = scopeCss('@media (min-width: 40rem) { .card { color: red; top: 0 } }', {
+        minify: true,
+      });
+      expect(code).toContain(`@media (width>=640px){${MINIFIED_GATE}.card{top:0}}`);
+      expect(code).toContain(
+        `@layer yv{@media (width>=640px){${MINIFIED_GATE}.card{color:red!important}}}`,
+      );
+    });
+
+    it('keeps @import above the layer block, where the parser needs it', () => {
+      // `@import` must precede every rule. A bare `@layer <name>;` statement is
+      // one of the two things allowed before it.
+      const code = scope("@import 'https://example.test/f.css'; .card { color: red }");
+      expect(code.indexOf('@import')).toBeLessThan(code.indexOf('@layer yv {'));
+      expect(code.indexOf('@layer yv;')).toBeLessThan(code.indexOf('@import'));
+    });
+
+    it('does not cut an @import at a semicolon inside its quoted URL', () => {
+      // The Google Fonts URL carries `wght@400;700`. A `[^;]*;` scan splits the
+      // sheet in the middle of the string and produces unparsable CSS.
+      const code = scope('@import "https://fonts.test/x?w=400;700"; .card { color: red }');
+      expect(code).toContain('@import "https://fonts.test/x?w=400;700"');
+    });
+  });
+
+  describe('marks declarations !important', () => {
+    it('importantizes an ordinary declaration', () => {
+      expect(scope('.card { color: red }')).toContain('color: red !important');
+    });
+
+    it('leaves a keyframe-animated property alone, or the animation freezes', () => {
+      // An important cascaded declaration outranks the animation origin. An
+      // important `opacity` holds every fade at its declared value.
+      const code = scope('.card { opacity: .5; transform: none; height: 2px; filter: none }');
+      expect(code).not.toContain('!important');
+    });
+
+    it('leaves the properties Radix writes inline, or the popover cannot be placed', () => {
+      const code = scope('.card { position: absolute; left: 0; top: 0; z-index: 50 }');
+      expect(code).not.toContain('!important');
+    });
+
+    it('leaves custom properties alone, so a --yv-* token override still wins', () => {
+      const code = scope(':root { --yv-primary: red }');
+      expect(code).not.toContain('!important');
+    });
+
+    it('leaves a shorthand alone when one of its longhands is exempt', () => {
+      // `font: inherit !important` freezes `font-size`, which verse.tsx sets
+      // inline. Same story for `background` and `background-color`.
+      const code = scope('.card { font: inherit; background: none }');
+      expect(code).not.toContain('!important');
+    });
+
+    it('never puts !important inside a @keyframes body, where it is invalid CSS', () => {
+      const code = scope('@keyframes fade { from { opacity: 0 } to { opacity: 1 } }');
+      expect(code).not.toContain('!important');
+    });
+
+    it('keeps an author-written !important on an exempt property', () => {
+      // `yv:h-6!` in verse-of-the-day.tsx writes `height: … !important` by hand.
+      // The pass neither strips it nor moves it into the layer.
+      const { code, problems } = scopeCss('.card { height: 1.5rem !important }');
+      expect(problems).toEqual([]);
+      expect(code).toContain('!important');
+      expect(code).not.toContain('@layer yv {');
+    });
+
+    it('reports a keyframe-animated property that is missing from the exemption list', () => {
+      // The guard that keeps the list from falling behind the animations.
+      const { problems } = scopeCss('@keyframes grow { to { width: 10px } } .a { color: red }');
+      expect(problems.join('\n')).toContain('width');
+    });
+  });
+
+  describe('converts every rem length to px', () => {
+    // A `rem` resolves against the document root element. A host page with
+    // `html { font-size: 62.5% }` therefore shrinks every `rem` the SDK ships
+    // by 37.5 percent, and no selector, layer or `!important` reaches that.
+    // 1rem = 16px is the browser default, so the sheet keeps the size it had.
+    // See docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md.
+
+    it('rebases a plain declaration', () => {
+      expect(scope('.a { padding: 0.25rem }')).toContain('padding: 4px');
+    });
+
+    it('rebases a custom property value', () => {
+      // The value a `var()` later resolves to. Miss this one and the rebase
+      // means nothing, because the theme ships its sizes as tokens.
+      expect(scope(':root { --yv-radius: 2rem }')).toContain('--yv-radius: 32px');
+    });
+
+    it('rebases inside calc() and inside a var() fallback', () => {
+      const code = scope('.a { width: calc(100% - 1rem); height: var(--x, 0.5rem) }');
+      expect(code).toContain('calc(100% - 16px)');
+      expect(code).toContain('var(--x, 8px)');
+    });
+
+    it('rebases a media query condition', () => {
+      // Safe, and for a different reason than the rest. Media Queries Level 4
+      // resolves a relative unit in a query against the *initial* value of
+      // `font-size`, not the root element's computed value, so a host
+      // `html { font-size }` never moved these breakpoints anyway. 16px is
+      // that initial value at browser defaults.
+      expect(scope('@media (min-width: 40rem) { .a { color: red } }')).toContain('width >= 640px');
+    });
+
+    it('rebases inside a @keyframes frame', () => {
+      const code = scope('@keyframes slide { to { transform: translateX(1rem) } }');
+      expect(code).toContain('translateX(16px)');
+    });
+
+    it('leaves a class name that contains the string rem alone', () => {
+      // `.rem` is a real class in bible-reader.css, and Tailwind escapes an
+      // arbitrary value into the selector. Both are names, not lengths.
+      const code = scope('.rem { color: red } .yv\\:text-\\[0\\.5rem\\] { font-size: 0.5rem }');
+      expect(code).toContain('.rem');
+      expect(code).toContain('.yv\\:text-\\[0\\.5rem\\]');
+      expect(code).toContain('font-size: 8px');
+    });
+
+    it('reports no surviving rem, which is the guard that fails the build', () => {
+      // `verifyOutput` re-parses the result and pushes a problem for every
+      // `rem` it still finds. The guard fires if someone removes or reorders
+      // the rebase pass. No input can make it fire while the pass is in place,
+      // because the pass and the guard read the same lengths, so this asserts
+      // the clean side.
+      const { problems } = scopeCss('.a { padding: 1rem; --x: 2rem }');
+      expect(problems).toEqual([]);
+    });
+  });
+
+  describe('output shape', () => {
+    it('minifies when asked', () => {
+      const { code } = scopeCss('.card { color: red }', { minify: true });
+      expect(code).toBe(`@layer yv;@layer yv{${MINIFIED_GATE}.card{color:red!important}}`);
+    });
+
+    it('adds exactly 0,1,0 of specificity, so relative order inside the SDK is unchanged', () => {
+      // Every rule gains the same gate. `:is()` takes the specificity of its
+      // most specific argument, which is one attribute. The slot exclusion sits
+      // inside `:where()` and contributes zero, so the gain is 0,1,0 — the same
+      // 0,1,0 the gate cost before the slot boundary existed, for every rule in
+      // the sheet.
+      const code = scope('.a { color: red } .b .c { color: blue }');
+      const gates = code.split(GATE).length - 1;
+      expect(gates).toBe(2);
+    });
+  });
+});
diff --git a/packages/ui/src/test/consumer-host.ts b/packages/ui/src/test/consumer-host.ts
new file mode 100644
index 00000000..1fd26941
--- /dev/null
+++ b/packages/ui/src/test/consumer-host.ts
@@ -0,0 +1,472 @@
+/**
+ * Consumer-host fixture: the global CSS that a consuming app can ship.
+ *
+ * The SDK promises that a partner can put Bible components into any app and get
+ * the components we designed. This file is the test of that promise. Each group
+ * is a separate `<style>` element. The residual-leak report can thus name the
+ * class of consumer rule that still leaks, and not one undifferentiated block.
+ *
+ * The groups come from the YPE-4113 acceptance criteria:
+ *
+ * | Group                 | What it models                                       |
+ * | --------------------- | ---------------------------------------------------- |
+ * | `preflight`           | A consumer that runs Tailwind v4 with Preflight on   |
+ * | `bareElements`        | Hand-written element selectors (`button {}`, `p {}`)  |
+ * | `aggressiveReset`     | A `*` reset                                          |
+ * | `inheritedTypography` | Typography set on `body` and inherited downward      |
+ * | `important`           | `!important` overrides                               |
+ * | `highSpecificity`     | An id selector, at 1,0,1                             |
+ * | `remRebase`           | A root font-size that rescales every `rem`           |
+ *
+ * The injection order matters. Every group is appended to `document.head`
+ * *after* the SDK's `<style precedence="yv-sdk">` tag. A tie on source order
+ * thus resolves as it does in a real consumer app, in the consumer's favor.
+ */
+
+/**
+ * Tailwind v4 Preflight, in the form that a consumer ships.
+ *
+ * This is the `preflight.css` of `tailwindcss@4.1.15`, after the Tailwind CLI
+ * resolved its build-time `--theme()` calls. The source file on disk is not
+ * usable here. A browser drops `font-family: --theme(...)` as invalid. The raw
+ * file thus under-tests the font-family channel, and gives no warning.
+ *
+ * To generate the file again:
+ *   echo '@import "tailwindcss/preflight.css";' > in.css
+ *   npx tailwindcss -i in.css -o out.css
+ */
+const PREFLIGHT = `
+*, ::after, ::before, ::backdrop, ::file-selector-button {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+}
+html, :host {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+b, strong {
+  font-weight: bolder;
+}
+code, kbd, samp, pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-size: 1em;
+}
+small {
+  font-size: 80%;
+}
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+:-moz-focusring {
+  outline: auto;
+}
+progress {
+  vertical-align: baseline;
+}
+summary {
+  display: list-item;
+}
+ol, ul, menu {
+  list-style: none;
+}
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  vertical-align: middle;
+}
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+button, input, select, optgroup, textarea, ::file-selector-button {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  border-radius: 0;
+  background-color: transparent;
+  opacity: 1;
+}
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+::placeholder {
+  opacity: 1;
+}
+textarea {
+  resize: vertical;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-date-and-time-value {
+  min-height: 1lh;
+  text-align: inherit;
+}
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
+  appearance: button;
+}
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  height: auto;
+}
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+`;
+
+/**
+ * Bare element selectors, the leak that the ticket names first. Specificity
+ * 0,0,1, in no layer. Before the gate existed, these rules overrode every
+ * `yv:`-prefixed SDK utility.
+ */
+const BARE_ELEMENTS = `
+button, a, p, ul, input {
+  padding: 1rem;
+  margin: 0.75rem;
+  color: #ff00ff;
+  font-size: 9px;
+  border-width: 3px;
+  border-style: dashed;
+  border-color: #00ffff;
+  border-radius: 0;
+}
+ul {
+  list-style-type: square;
+}
+a {
+  text-decoration-line: underline;
+}
+`;
+
+/**
+ * The universal reset. It has two declarations, and the SDK's own reset sets
+ * both of them. After the cascade fix, this group must produce zero leaks.
+ */
+const AGGRESSIVE_RESET = `
+* {
+  box-sizing: content-box;
+  margin: 0;
+}
+`;
+
+/**
+ * Typography on `body`. Nothing here matches an SDK element directly. Every
+ * value arrives by inheritance, which is why cascade order cannot stop it. Each
+ * property here is one that the SDK did not declare before this change.
+ */
+const INHERITED_TYPOGRAPHY = `
+body {
+  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
+  color: #00ff00;
+  line-height: 3;
+  letter-spacing: 0.5em;
+  word-spacing: 1em;
+  text-align: right;
+  text-transform: uppercase;
+  text-indent: 2em;
+  white-space: pre-wrap;
+}
+`;
+
+/**
+ * `!important`, unlayered. This group used to be the recorded residual.
+ *
+ * It is not one any more. The SDK sheet ships inside a declared `@layer yv`, and
+ * every non-exempt declaration in it is important. CSS Cascade 5 §6.1 reverses
+ * layer order for important declarations and ranks unlayered-important *last*,
+ * so a layered important SDK rule beats this one. The group stays, because it is
+ * the measurement that proves the claim.
+ */
+const IMPORTANT = `
+button {
+  border-radius: 0 !important;
+  padding: 2rem !important;
+}
+`;
+
+/**
+ * The id that the `highSpecificity` group targets, placed on `document.body`.
+ *
+ * A story asserts that `#${CONSUMER_HOST_ROOT_ID} button` really matches a
+ * rendered button before it asserts zero leaks. A zero-leak assertion against a
+ * selector that matches nothing passes for the wrong reason, and would keep
+ * passing after the isolation broke.
+ *
+ * The id sits on `document.body`, not on `#storybook-root`. Radix portals the
+ * popovers and dialogs straight into `document.body`, and a fixture that cannot
+ * reach the portalled DOM tests half of the components.
+ */
+export const CONSUMER_HOST_ROOT_ID = 'yv-consumer-host-root';
+
+/**
+ * An id selector, at 1,0,1. The gate only adds 0,1,0, so specificity alone loses
+ * here. Importance is what wins, because the cascade compares importance before
+ * specificity.
+ */
+const HIGH_SPECIFICITY = `
+#${CONSUMER_HOST_ROOT_ID} button {
+  padding: 1.5rem;
+  margin: 1.25rem;
+  border-radius: 0;
+}
+`;
+
+/**
+ * The "62.5% trick": a root font-size that rescales every `rem` in the document.
+ *
+ * This group attacks the unit, not the cascade. `rem` resolves against the
+ * *document root* element, so no selector, no layer and no `!important` on an
+ * SDK rule can change what a `rem` in that rule means. A host that writes
+ * `html { font-size: 62.5% }` makes `1rem` equal `10px`, and every `rem` length
+ * the SDK ships shrinks by 37.5 percent.
+ *
+ * The trick is common. It lets an author write `1.6rem` for 16px. Tailwind v4
+ * emits `rem` for nearly all spacing and typography, so the SDK sheet was full
+ * of the unit.
+ *
+ * The fix is in the build, not in this file:
+ * `scripts/scope-selectors.mjs` converts every `rem` length in the compiled
+ * sheet to `px` at 1rem = 16px. See
+ * docs/adr/0007-convert-rem-to-px-in-the-sdk-sheet.md.
+ */
+const REM_REBASE = `
+html {
+  font-size: 62.5%;
+}
+`;
+
+export const CONSUMER_CSS_GROUPS = {
+  preflight: PREFLIGHT,
+  bareElements: BARE_ELEMENTS,
+  aggressiveReset: AGGRESSIVE_RESET,
+  inheritedTypography: INHERITED_TYPOGRAPHY,
+  important: IMPORTANT,
+  highSpecificity: HIGH_SPECIFICITY,
+  remRebase: REM_REBASE,
+} satisfies Record<string, string>;
+
+export type ConsumerCssGroup = keyof typeof CONSUMER_CSS_GROUPS;
+
+/** Marks every `<style>` element this module owns, so cleanup never removes the SDK's. */
+export const CONSUMER_HOST_STYLE_ATTRIBUTE = 'data-yv-consumer-host';
+
+/* -------------------------------------------------------------------------- */
+/* Reverse direction: consumer content inside an SDK subtree                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The class a consumer puts on content they pass into an SDK component.
+ *
+ * The seven groups above measure one direction: consumer CSS reaching into SDK
+ * DOM. This class measures the other direction: SDK CSS reaching into consumer
+ * DOM that an SDK component renders as `children` or as render-prop output.
+ */
+export const CONSUMER_CONTENT_CLASS = 'yv-consumer-content';
+
+/** Marks the `<style>` element that holds `CONSUMER_CONTENT_CSS`. */
+export const CONSUMER_CONTENT_STYLE_ATTRIBUTE = 'data-yv-consumer-content';
+
+/**
+ * A consumer's own styling for their own content, declared on every element.
+ *
+ * Every one of the 32 entries in `TRACKED_PROPERTIES` appears here, on the
+ * content root and on every descendant of it. That is deliberate, and it is what
+ * makes a zero achievable.
+ *
+ * Inheritance is not a leak. An SDK component declares `font-size`, `color` and
+ * `font-family` on its own root, and a child inherits them. A consumer's content
+ * placed anywhere else in their page inherits from its ancestors in exactly the
+ * same way. The slot boundary stops *selector matching*; it does not, and should
+ * not, stop inheritance. So this fixture declares every tracked property
+ * outright, which closes the inheritance channel and leaves only the channel
+ * under test.
+ *
+ * Specificity is 0,1,0 on both selectors, and the tag is appended after the SDK
+ * sheet. So an SDK rule that still matches this content wins only by being
+ * important, or by being more specific than 0,1,0. Both are leaks.
+ *
+ * The values are arbitrary but distinct per side, so a shorthand that collapses
+ * (for example `border-width: 6px 2px 3px 4px`) cannot hide a difference. The
+ * top border width is 6px and not 1px on purpose: `theme.css` declares
+ * `hr { border-top-width: 1px }`, and a matching value would hide that rule.
+ */
+export const CONSUMER_CONTENT_CSS = `
+.${CONSUMER_CONTENT_CLASS},
+.${CONSUMER_CONTENT_CLASS} * {
+  box-sizing: content-box;
+  padding: 3px 5px 7px 9px;
+  margin: 11px 13px 15px 17px;
+  border-width: 6px 2px 3px 4px;
+  border-style: dotted;
+  border-color: rgb(0, 0, 255);
+  border-radius: 1px 2px 3px 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  font-weight: 300;
+  font-style: italic;
+  line-height: 21px;
+  letter-spacing: 2px;
+  word-spacing: 3px;
+  text-align: right;
+  text-transform: lowercase;
+  text-indent: 4px;
+  white-space: pre-line;
+  text-decoration-line: overline;
+  list-style-type: square;
+  color: rgb(1, 2, 3);
+  background-color: rgb(4, 5, 6);
+}
+`;
+
+/**
+ * Appends `CONSUMER_CONTENT_CSS` to `document.head`, after the SDK tag.
+ *
+ * `removeConsumerCss` does not remove this tag. The two fixtures answer
+ * different questions and the reverse-direction stories inject no host groups at
+ * all, so they never need to come and go together.
+ *
+ * @returns a cleanup function that removes only the tag this call added.
+ */
+export function injectConsumerContentCss(): () => void {
+  const style = document.createElement('style');
+  style.setAttribute(CONSUMER_CONTENT_STYLE_ATTRIBUTE, '');
+  style.textContent = CONSUMER_CONTENT_CSS;
+  document.head.appendChild(style);
+
+  return () => {
+    style.remove();
+  };
+}
+
+export const ALL_CONSUMER_CSS_GROUPS = Object.keys(CONSUMER_CSS_GROUPS) as ConsumerCssGroup[];
+
+/** Expands the `'all'` value into the explicit group list. */
+export function resolveConsumerCssGroups(groups: ConsumerCssGroup[] | 'all'): ConsumerCssGroup[] {
+  return groups === 'all' ? [...ALL_CONSUMER_CSS_GROUPS] : [...groups];
+}
+
+/** The page's own body id, so the harness can hand it back. */
+let previousBodyId: string | null = null;
+
+/** Puts `CONSUMER_HOST_ROOT_ID` on `document.body`, so `highSpecificity` matches. */
+function claimBodyId(): void {
+  if (document.body.id === CONSUMER_HOST_ROOT_ID) return;
+  previousBodyId = document.body.id;
+  document.body.id = CONSUMER_HOST_ROOT_ID;
+}
+
+/** Hands the body id back. An id the harness did not set is left alone. */
+function releaseBodyId(): void {
+  if (document.body.id !== CONSUMER_HOST_ROOT_ID) return;
+  document.body.id = previousBodyId ?? '';
+  previousBodyId = null;
+}
+
+/**
+ * Appends one `<style>` element per group to `document.head`, after the SDK tag.
+ *
+ * The id goes on `document.body` for every call, not only for the
+ * `highSpecificity` group. An id on its own selects nothing and inherits
+ * nothing, so it cannot move a measurement. Setting it unconditionally keeps the
+ * DOM identical across the clean snapshot and every group snapshot, which is the
+ * condition the diff depends on.
+ *
+ * @returns a cleanup function that removes only the tags that this call added.
+ */
+export function injectConsumerCss(groups: ConsumerCssGroup[] | 'all'): () => void {
+  const added: HTMLStyleElement[] = [];
+  claimBodyId();
+
+  for (const group of resolveConsumerCssGroups(groups)) {
+    const style = document.createElement('style');
+    style.setAttribute(CONSUMER_HOST_STYLE_ATTRIBUTE, group);
+    style.textContent = CONSUMER_CSS_GROUPS[group];
+    // appendChild, not prepend. The precedence-hoisted SDK tag is in <head>
+    // already, and a real consumer sheet loads after it.
+    document.head.appendChild(style);
+    added.push(style);
+  }
+
+  return () => {
+    for (const style of added) style.remove();
+  };
+}
+
+/**
+ * Removes every consumer CSS `<style>` element in the document, whichever code
+ * added it. The measurement harness needs a clean baseline it can trust, and a
+ * story that unmounted during a run can leave a tag behind.
+ *
+ * The body id stays. `measureLeaks` calls this between groups, and a body id
+ * that came and went would change the DOM under the diff.
+ */
+export function removeConsumerCss(): void {
+  for (const style of document.querySelectorAll(`style[${CONSUMER_HOST_STYLE_ATTRIBUTE}]`)) {
+    style.remove();
+  }
+}
+
+/** Undoes everything `injectConsumerCss` did, including the body id. */
+export function resetConsumerHost(): void {
+  removeConsumerCss();
+  releaseBodyId();
+}
diff --git a/packages/ui/src/test/style-diff.test.ts b/packages/ui/src/test/style-diff.test.ts
new file mode 100644
index 00000000..51ff0484
--- /dev/null
+++ b/packages/ui/src/test/style-diff.test.ts
@@ -0,0 +1,215 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  ALL_CONSUMER_CSS_GROUPS,
+  CONSUMER_CSS_GROUPS,
+  resolveConsumerCssGroups,
+  type ConsumerCssGroup,
+} from './consumer-host';
+import {
+  TRACKED_PROPERTIES,
+  diffSnapshots,
+  formatLeakReport,
+  leakedProperties,
+  snapshotComputedStyles,
+  summarizeLeaks,
+  type StyleSnapshot,
+} from './style-diff';
+
+/** Makes a snapshot by hand. The diff logic is then testable without a browser. */
+function snapshot(entries: Record<string, Record<string, string>>): StyleSnapshot {
+  return new Map(Object.entries(entries));
+}
+
+describe('diffSnapshots', () => {
+  it('reports nothing when the two snapshots agree', () => {
+    const clean = snapshot({ div: { color: 'rgb(0, 0, 0)', 'font-size': '16px' } });
+    const consumer = snapshot({ div: { color: 'rgb(0, 0, 0)', 'font-size': '16px' } });
+
+    expect(diffSnapshots(clean, consumer)).toEqual([]);
+  });
+
+  it('reports the element, property, and both values for a changed property', () => {
+    const clean = snapshot({ 'div > p': { color: 'rgb(0, 0, 0)' } });
+    const consumer = snapshot({ 'div > p': { color: 'rgb(255, 0, 255)' } });
+
+    expect(diffSnapshots(clean, consumer)).toEqual([
+      { path: 'div > p', property: 'color', clean: 'rgb(0, 0, 0)', consumer: 'rgb(255, 0, 255)' },
+    ]);
+  });
+
+  it('reports every changed property on the same element separately', () => {
+    const clean = snapshot({ div: { 'padding-top': '0px', 'box-sizing': 'border-box' } });
+    const consumer = snapshot({ div: { 'padding-top': '16px', 'box-sizing': 'content-box' } });
+
+    expect(diffSnapshots(clean, consumer)).toHaveLength(2);
+  });
+
+  it('skips paths that exist in only one snapshot, since the shape changed', () => {
+    const clean = snapshot({ div: { color: 'rgb(0, 0, 0)' } });
+    const consumer = snapshot({ span: { color: 'rgb(255, 0, 255)' } });
+
+    expect(diffSnapshots(clean, consumer)).toEqual([]);
+  });
+
+  it('skips a property missing from the consumer snapshot', () => {
+    const clean = snapshot({ div: { color: 'rgb(0, 0, 0)', 'font-size': '16px' } });
+    const consumer = snapshot({ div: { color: 'rgb(0, 0, 0)' } });
+
+    expect(diffSnapshots(clean, consumer)).toEqual([]);
+  });
+});
+
+describe('leakedProperties', () => {
+  it('de-duplicates across elements and sorts', () => {
+    const clean = snapshot({
+      div: { color: 'rgb(0, 0, 0)', 'box-sizing': 'border-box' },
+      'div > p': { color: 'rgb(0, 0, 0)', 'box-sizing': 'border-box' },
+    });
+    const consumer = snapshot({
+      div: { color: 'rgb(0, 255, 0)', 'box-sizing': 'content-box' },
+      'div > p': { color: 'rgb(0, 255, 0)', 'box-sizing': 'border-box' },
+    });
+
+    expect(leakedProperties(diffSnapshots(clean, consumer))).toEqual(['box-sizing', 'color']);
+  });
+
+  it('returns an empty list for an empty leak set', () => {
+    expect(leakedProperties([])).toEqual([]);
+  });
+});
+
+describe('summarizeLeaks and formatLeakReport', () => {
+  it('counts leaks per property, most frequent first', () => {
+    const leaks = [
+      { path: 'a', property: 'color', clean: '1', consumer: '2' },
+      { path: 'b', property: 'color', clean: '1', consumer: '2' },
+      { path: 'a', property: 'box-sizing', clean: '1', consumer: '2' },
+    ];
+
+    expect(summarizeLeaks(leaks)).toEqual([
+      { property: 'color', count: 2 },
+      { property: 'box-sizing', count: 1 },
+    ]);
+  });
+
+  it('says so plainly when there are no leaks', () => {
+    expect(formatLeakReport('BibleCard', [])).toBe('BibleCard: no leaks');
+  });
+
+  it('names the label and the leak count', () => {
+    const report = formatLeakReport('BibleCard', [
+      { path: 'a', property: 'color', clean: '1', consumer: '2' },
+    ]);
+
+    expect(report).toContain('BibleCard: 1 leak(s)');
+    expect(report).toContain('color x1');
+  });
+});
+
+describe('snapshotComputedStyles', () => {
+  it('keys the root by its tag name alone', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    expect([...snapshotComputedStyles(root).keys()]).toEqual(['div']);
+
+    root.remove();
+  });
+
+  it('keys descendants by their ancestor chain', () => {
+    const root = document.createElement('div');
+    root.innerHTML = '<ul><li><button></button></li></ul>';
+    document.body.appendChild(root);
+
+    expect([...snapshotComputedStyles(root).keys()]).toEqual([
+      'div',
+      'div > ul',
+      'div > ul > li',
+      'div > ul > li > button',
+    ]);
+
+    root.remove();
+  });
+
+  it('indexes same-tag siblings and leaves the first one unindexed', () => {
+    const root = document.createElement('div');
+    root.innerHTML = '<p></p><p></p><p></p>';
+    document.body.appendChild(root);
+
+    expect([...snapshotComputedStyles(root).keys()]).toEqual([
+      'div',
+      'div > p',
+      'div > p[1]',
+      'div > p[2]',
+    ]);
+
+    root.remove();
+  });
+
+  it('counts sibling index per tag, not per position', () => {
+    const root = document.createElement('div');
+    root.innerHTML = '<p></p><span></span><p></p>';
+    document.body.appendChild(root);
+
+    expect([...snapshotComputedStyles(root).keys()]).toEqual([
+      'div',
+      'div > p',
+      'div > span',
+      'div > p[1]',
+    ]);
+
+    root.remove();
+  });
+
+  it('skips style and script elements, which have no visible box', () => {
+    const root = document.createElement('div');
+    root.innerHTML = '<style></style><p></p>';
+    document.body.appendChild(root);
+
+    expect([...snapshotComputedStyles(root).keys()]).toEqual(['div', 'div > p']);
+
+    root.remove();
+  });
+
+  it('records every tracked property for each element', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const values = snapshotComputedStyles(root).get('div');
+
+    expect(Object.keys(values ?? {})).toEqual([...TRACKED_PROPERTIES]);
+
+    root.remove();
+  });
+});
+
+describe('consumer-host groups', () => {
+  it('covers every class of consumer CSS the ticket names', () => {
+    expect(ALL_CONSUMER_CSS_GROUPS).toEqual([
+      'preflight',
+      'bareElements',
+      'aggressiveReset',
+      'inheritedTypography',
+      'important',
+      'highSpecificity',
+      'remRebase',
+    ]);
+  });
+
+  it('gives every group non-empty CSS', () => {
+    for (const group of ALL_CONSUMER_CSS_GROUPS) {
+      expect(CONSUMER_CSS_GROUPS[group].trim().length).toBeGreaterThan(0);
+    }
+  });
+
+  it("widens 'all' into the full group list", () => {
+    expect(resolveConsumerCssGroups('all')).toEqual(ALL_CONSUMER_CSS_GROUPS);
+  });
+
+  it('passes an explicit group list through unchanged', () => {
+    const groups: ConsumerCssGroup[] = ['aggressiveReset', 'important'];
+
+    expect(resolveConsumerCssGroups(groups)).toEqual(groups);
+  });
+});
diff --git a/packages/ui/src/test/style-diff.ts b/packages/ui/src/test/style-diff.ts
new file mode 100644
index 00000000..d0e875dd
--- /dev/null
+++ b/packages/ui/src/test/style-diff.ts
@@ -0,0 +1,238 @@
+/**
+ * Computed-style diff harness.
+ *
+ * "The component looks wrong" is not a test result. This module turns that
+ * judgment into a number. It reads every tracked computed property on every
+ * element of an SDK subtree. It does that once clean, and once under consumer
+ * host CSS. Then it reports the exact (element, property) pairs that moved.
+ *
+ * The output is the residual-leak report that YPE-4113 asks for. The same
+ * numbers are the pass/fail gate for the later isolation phases.
+ */
+
+/**
+ * The properties that the report watches.
+ *
+ * Longhands only. A shorthand such as `padding` reads back as one string in some
+ * engines, and as an empty string in others. The phase gates also name
+ * individual sides (`padding-top`). Each entry here is one of three kinds:
+ *
+ * - A box-model property that a consumer reset can move.
+ * - A typography property that a consumer `body` rule can inherit into us.
+ * - A color.
+ *
+ * Two properties are absent on purpose: `transform` and `opacity`.
+ * `tw-animate-css` animates both. A sample taken during an animation reports a
+ * leak that is only a timing artifact.
+ */
+export const TRACKED_PROPERTIES = [
+  // Box model
+  'box-sizing',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+  'margin-top',
+  'margin-right',
+  'margin-bottom',
+  'margin-left',
+  'border-top-width',
+  'border-right-width',
+  'border-bottom-width',
+  'border-left-width',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-bottom-right-radius',
+  'border-bottom-left-radius',
+  // Typography
+  'font-family',
+  'font-size',
+  'font-weight',
+  'font-style',
+  'line-height',
+  'letter-spacing',
+  'word-spacing',
+  'text-align',
+  'text-transform',
+  'text-indent',
+  'white-space',
+  'text-decoration-line',
+  'list-style-type',
+  // Color
+  'color',
+  'background-color',
+] as const;
+
+export type TrackedProperty = (typeof TRACKED_PROPERTIES)[number];
+
+/** Structural path -> computed values for the element at that path. */
+export type StyleSnapshot = Map<string, Record<string, string>>;
+
+/** Elements whose computed style says nothing about how the component looks. */
+const IGNORED_TAGS = new Set(['SCRIPT', 'STYLE', 'LINK', 'META', 'TEMPLATE']);
+
+/**
+ * A path that identifies an element by its position, not by its name.
+ *
+ * Class names do change between a clean render and a consumer render. That is not
+ * the worry. The worry is that any identity based on styling is circular. A tag
+ * name plus a same-tag sibling index is stable while the DOM shape is stable.
+ * A diff is meaningful under that same condition only.
+ *
+ * @example `div > ul > li[2] > button`
+ */
+function pathOf(element: Element, parentPath: string | null): string {
+  const tag = element.tagName.toLowerCase();
+
+  if (parentPath === null) return tag;
+
+  const parent = element.parentElement;
+  let index = 0;
+  if (parent) {
+    for (const sibling of parent.children) {
+      if (sibling === element) break;
+      if (sibling.tagName === element.tagName) index += 1;
+    }
+  }
+
+  const segment = index === 0 ? tag : `${tag}[${index}]`;
+  return `${parentPath} > ${segment}`;
+}
+
+/**
+ * Reads every tracked property on `root` and on its descendants.
+ *
+ * Call this function against the SDK subtree, not against the Storybook canvas.
+ * The canvas root is consumer DOM, and the SDK makes no promise about it. A
+ * snapshot that holds the canvas root reports a false positive on every run.
+ */
+export function snapshotComputedStyles(root: Element): StyleSnapshot {
+  const snapshot: StyleSnapshot = new Map();
+
+  const visit = (element: Element, parentPath: string | null): void => {
+    if (IGNORED_TAGS.has(element.tagName)) return;
+
+    const path = pathOf(element, parentPath);
+    const computed = getComputedStyle(element);
+    const values: Record<string, string> = {};
+
+    for (const property of TRACKED_PROPERTIES) {
+      values[property] = computed.getPropertyValue(property);
+    }
+
+    snapshot.set(path, values);
+
+    for (const child of element.children) visit(child, path);
+  };
+
+  visit(root, null);
+  return snapshot;
+}
+
+/** One property on one element that the host CSS moved. */
+export type StyleLeak = {
+  path: string;
+  property: string;
+  clean: string;
+  consumer: string;
+};
+
+/**
+ * Compares two snapshots of the same subtree.
+ *
+ * A path that is in one snapshot only is skipped, not reported. A missing path
+ * means that the DOM shape changed between the two renders. That is a harness
+ * error, not a style leak, and a report of it hides the real findings.
+ */
+export function diffSnapshots(clean: StyleSnapshot, consumer: StyleSnapshot): StyleLeak[] {
+  const leaks: StyleLeak[] = [];
+
+  for (const [path, cleanValues] of clean) {
+    const consumerValues = consumer.get(path);
+    if (!consumerValues) continue;
+
+    for (const property of Object.keys(cleanValues)) {
+      const cleanValue = cleanValues[property];
+      const consumerValue = consumerValues[property];
+
+      if (consumerValue === undefined) continue;
+      if (cleanValue === consumerValue) continue;
+
+      leaks.push({ path, property, clean: cleanValue ?? '', consumer: consumerValue });
+    }
+  }
+
+  return leaks;
+}
+
+/**
+ * Compares the same markup rendered in two places in one document.
+ *
+ * This is the reverse direction, and it needs a different baseline from
+ * `diffSnapshots`. The forward direction asks "did consumer CSS move SDK DOM",
+ * and it answers by removing the consumer sheet. The reverse direction asks "did
+ * SDK CSS move consumer DOM", and it cannot answer by removing the SDK sheet.
+ * Removing it would also remove every SDK declaration that a consumer's content
+ * legitimately *inherits*, and inheritance is not a leak: content dropped
+ * anywhere in a page inherits from its ancestors.
+ *
+ * So the baseline is a placement, not a sheet state. The harness renders the
+ * same consumer markup twice in the same document, with the SDK sheet present
+ * for both:
+ *
+ *   - `outside`: in the page, with no `[data-yv-sdk]` ancestor.
+ *   - `inside`: in an SDK component's consumer slot.
+ *
+ * A difference is then SDK CSS matching consumer DOM, and nothing else. The
+ * fixture in `consumer-host.ts` declares every tracked property on every element
+ * of the markup, which removes the inheritance channel from the comparison.
+ *
+ * @throws when the two snapshots hold different paths. Here the two subtrees are
+ *   the same markup, so a mismatch is a harness error and must not be skipped
+ *   quietly the way `diffSnapshots` skips it.
+ */
+export function diffPlacements(outside: StyleSnapshot, inside: StyleSnapshot): StyleLeak[] {
+  const outsidePaths = [...outside.keys()].sort();
+  const insidePaths = [...inside.keys()].sort();
+
+  if (outsidePaths.join('|') !== insidePaths.join('|')) {
+    throw new Error(
+      `The two placements rendered different DOM, so the diff means nothing.\n` +
+        `  outside: ${outsidePaths.join(', ')}\n` +
+        `  inside:  ${insidePaths.join(', ')}`,
+    );
+  }
+
+  return diffSnapshots(outside, inside);
+}
+
+/** The distinct property names in a leak set, sorted. The tests assert on this list. */
+export function leakedProperties(leaks: StyleLeak[]): string[] {
+  return [...new Set(leaks.map((leak) => leak.property))].sort();
+}
+
+/** Leak counts per property, highest count first. The residual report reads this list. */
+export function summarizeLeaks(leaks: StyleLeak[]): { property: string; count: number }[] {
+  const counts = new Map<string, number>();
+
+  for (const leak of leaks) {
+    counts.set(leak.property, (counts.get(leak.property) ?? 0) + 1);
+  }
+
+  return [...counts.entries()]
+    .map(([property, count]) => ({ property, count }))
+    .sort((a, b) => b.count - a.count || a.property.localeCompare(b.property));
+}
+
+/**
+ * Formats a leak set as a table for the console.
+ *
+ * A person reads the residual report to decide whether to ship shadow DOM. The
+ * harness thus prints the findings, and does not only assert on them.
+ */
+export function formatLeakReport(label: string, leaks: StyleLeak[]): string {
+  if (leaks.length === 0) return `${label}: no leaks`;
+
+  const lines = summarizeLeaks(leaks).map(({ property, count }) => `  ${property} x${count}`);
+  return [`${label}: ${leaks.length} leak(s)`, ...lines].join('\n');
+}
diff --git a/packages/ui/tsconfig.build.json b/packages/ui/tsconfig.build.json
index b4ba286d..44bd0474 100644
--- a/packages/ui/tsconfig.build.json
+++ b/packages/ui/tsconfig.build.json
@@ -19,5 +19,8 @@
     }
   },
   "include": ["src", "index.d.ts"],
-  "exclude": ["**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"]
+  // src/test holds fixtures and harnesses that only the tests and the stories
+  // import. It ships no public type. It is written against the browser lib from
+  // the test tsconfig, and not against the narrower lib of this build.
+  "exclude": ["**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx", "src/test"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52c43ee8..b5e42794 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -361,6 +361,9 @@ importers:
       jsdom:
         specifier: 27.0.1
         version: 27.0.1(postcss@8.5.6)
+      lightningcss:
+        specifier: 1.31.1
+        version: 1.31.1
       markdown-to-jsx:
         specifier: ^9.6.1
         version: 9.6.1(react@19.1.2)