Build a CSS @scope block to scope styles to a subtree without renaming classes. Pick a scoping root (where the scope starts), an optional scoping limit (where it ends — the "donut hole"), and add the rules that should apply inside. The tool emits production-ready @scope CSS and previews it live in a sandboxed iframe.
:scope to style the scoping root itself. Bare selectors like h2 or a match only inside the scope.@scope block, so always provide reasonable defaults outside it.
@scope lets a stylesheet say "these rules only apply inside this subtree." The scoping root is the upper boundary, and the optional scoping limit is the lower boundary — descendants matching the limit (and their subtrees) are excluded. The result is sometimes called a "donut" because the scope wraps around an inner exclusion. :scope inside the block refers to the root element itself, and bare type selectors (like a) only match descendants of the root. Specificity comes from the rule's own selector — @scope does not bump it up — but rules in a deeper scope win ties over rules in a shallower scope.