cssints 0.1.0 → 0.3.0

package/docs/API.md

@@ -1,21 +1,21 @@
 # CSS in TS
 
-The 0.1 API. Setup (the Vite plugin, the stylesheet import) is in the [README](../README.md). Decisions and findings are in [wayfinder.md](wayfinder.md).
+The 0.x API, **alpha**: it can still change between minor versions. Setup (the Vite plugin, the stylesheet import) is in the [README](../README.md). Decisions and findings are in [wayfinder.md](wayfinder.md).
 
 Every `ts` block here is type-checked against the workspace `cssints` types by `packages/cssints/test/docs.mjs` (`bun run test`). A line that ends in `// error` must fail to type-check. Blocks fenced `ts skip` (output) are not checked. A few blocks show a build-time error that the types cannot see; their comments give the message.
 
 ### Authoring surface (decided 2026-09-29, cssints-5dbi)
 
-- **Import.** `with { type: "cssints" }` marks code that runs at build time: cssints itself, plugins such as icons, and your own helper modules. The plugin finds call sites by this attribute. The one runtime helper, `cx`, is imported without it. Using a build-time member without the attribute is a build error.
+- **Import.** `with { type: "cssints" }` marks code that runs at build time: cssints itself, plugins such as icons, and your own helper modules. The plugin finds call sites by this attribute. Nothing is imported without it: the few runtime lines a module needs (`__cx` for a `cn()` with runtime arguments, `__cv` for a `cv()`) are imported by the plugin. Using a build-time member without the attribute is a build error.
 - **Names.** Every mdn property as camelCase (`paddingLeft`, `alignItems`, `justifyContent`), plus a short set: `p pt pr pb pl`, `m mt mr mb ml`, `bg`. Everything is available both as named exports and through the namespace (`css.p`). There is no `items` or `justify`: they were ambiguous (`align-items` or `align-content`, `justify-content` or `justify-items`).
 - **Numbers.** A bare number is a spacing step of 0.25rem in `padding*`, `margin*`, `gap*` and `inset*` (`p(4)` is `1rem`). In any other property it is a CSS `<number>`: `opacity(0.5)`, `zIndex(3)`.
 - **Values.** A property takes one or more parts joined by a space. Each part is a string or a Typed OM value: `border("1px solid", accent)`, `padding(CSS.rem(1), CSS.rem(2))`, `padding("1rem 2rem")`. Parts are checked against the mdn grammar in types and again at build time. `CSS.px`, `rem`, `em`, `percent`, `number`, `CSSUnitValue` and `CSSColorValue` come from `cssints`, imported with the attribute.
 - **Editor.** A bad part is marked on that part: `padding("2px", "red")` puts the error on `"red"`, with the message of the whole value. While a string is not a value yet, the editor offers the keywords of the property that the word under the cursor begins (`display("fl…")` gives `flex`, `flow`, `flow-root`; `border("1px", "so…")` gives `solid`), and all of them in an empty part (`border("1px", "")`; an empty part is an error). The offer is the keywords of the whole grammar, not only those that fit at that point, it stops once the string is valid, and functions such as `rgb(` are not offered.
 - **Math.** `calc()`, `min()`, `max()`, `clamp()` and the other CSS Values 4 math functions are accepted wherever their type is, as strings (`width("calc(100% - 2rem)")`, checked by the build: `calc(1px + 2s)` is an error) and as calls that take tokens (`calc(t.space.md, "*", 2)`, see "Functions").
-- **Layout contexts.** `flex()` and `grid()` without arguments set `display` and chain only their container properties. Names drop only the context prefix: `flex().direction("column").wrap("wrap").alignItems("center").justifyContent("space-between")`, `grid().templateColumns("1fr 2fr").gap(4)`. Plain styles do not chain; merge them with `cn(...)` or `cx(...)`. Item properties (`flexGrow`, `alignSelf`, `gridColumn`, `order`) are plain functions.
+- **Layout contexts.** `flex()` and `grid()` without arguments set `display` and chain only their container properties. Names drop only the context prefix: `flex().direction("column").wrap("wrap").alignItems("center").justifyContent("space-between")`, `grid().templateColumns("1fr 2fr").gap(4)`. Plain styles do not chain; merge them with `cn(...)`. Item properties (`flexGrow`, `alignSelf`, `gridColumn`, `order`) are plain functions.
 - **`flex(...parts)` and `grid(...parts)` are the shorthand properties.** With at least one argument the call is the `flex` (or `grid`) property, checked by its grammar like any member: `flex("1")`, `flex(1)` and `flex("1 1 0")` are `flex: 1`, `flex: 1` and `flex: 1 1 0`, `grid("auto / 1fr 1fr")` is `grid: auto / 1fr 1fr`. A bare number is a `<number>` here, not a spacing step. The result is a plain style: it sets no `display` and does not chain. The types tell the two forms apart by overload.
 - **`container` is the condition.** `container("sidebar (width < 30rem)")` is a query; the `container` shorthand property is written with its longhands `containerName` and `containerType`.
-- **Arguments are build-time values.** The plugin runs your module at build time and replaces each call with a class string. A literal, a `const`, a token or a value from another attributed module works. A value that exists only at runtime (a prop, state) does not: `p(n)` with `n` a parameter is a build error (`css arguments must be known at build time: n is not defined where the call is evaluated`) that points at the call, also when the local is named like a global (`open`, `name`) or like a module binding. The types do not catch it: a helper module may take parameters (below), so a `string` or `number` is a fine argument there. Choose between styles with `cx(on && p(4))`, a `cv` variant, or a token set in a `style` prop. A helper module imported with the attribute may take parameters, because each call of it is a site with its own arguments: `stack(4)` below is a build-time call in the file that makes it.
+- **Arguments are build-time values.** The plugin runs your module at build time and replaces each call with a class string. A literal, a `const`, a token or a value from another attributed module works. A value that exists only at runtime (a prop, state) does not: `p(n)` with `n` a parameter is a build error (`css arguments must be known at build time: n is not defined where the call is evaluated`) that points at the call, also when the local is named like a global (`open`, `name`) or like a module binding. The types do not catch it: a helper module may take parameters (below), so a `string` or `number` is a fine argument there. Choose between styles with `cn(base, on && p(4))` (see "Runtime: `cn`, `cv`"), a `cv` variant, or a token set in a `style` prop. A helper module imported with the attribute may take parameters, because each call of it is a site with its own arguments: `stack(4)` below is a build-time call in the file that makes it.
 - **Top-level code runs at build time.** A call the run does not reach (`false && p(4)`, a branch not taken, a ternary arm) still gets its class string: it is evaluated after the module has loaded, like a call inside a function, so its arguments may use the bindings of the module but not the locals of the branch. A `cv(...)` at the top of a module works too: during the build it is the same function the browser gets, so `button({ size: "lg" })` at the top of a module gives its classes.
 
 ```ts
@@ -30,49 +30,75 @@ export const stack = (gap: number) => css.flex().direction("column").gap(gap);
 ### Basic usage
 
 ```tsx
-import { cx } from "cssints";
-import { alignItems, justifyContent, p } from "cssints" with { type: "cssints" };
+import { alignItems, cn, justifyContent, p } from "cssints" with { type: "cssints" };
 import * as css from "cssints" with { type: "cssints" };
 
 export const A = () => (
-	<div className={cx(css.display("flex"), alignItems("center"), justifyContent("center"), prop && p(4))}>Hello, world!</div>
+  <div
+    className={cn(
+      css.display("flex"),
+      alignItems("center"),
+      justifyContent("center"),
+      prop && p(4),
+    )}
+  >
+    Hello, world!
+  </div>
 );
 // or with a layout context
 export const B = () => (
-	<div className={cx(css.flex().alignItems("center").justifyContent("center"), prop && css.p(4))}>Hello, world!</div>
+  <div className={cn(css.flex().alignItems("center").justifyContent("center"), prop && css.p(4))}>
+    Hello, world!
+  </div>
 );
 ```
 
 Output for `A`:
 
 ```tsx skip
-import { cx } from "cssints";
+import { _cx as __cx } from "cssints";
 
-export const A = () => <div className={cx("_1s47490", "_1ob5z5m", "_cn8dee", prop && "_lwugp7")}>Hello, world!</div>;
+export const A = () => (
+  <div className={__cx([], "_1s47490 _1ob5z5m _cn8dee", prop && "_lwugp7")}>Hello, world!</div>
+);
 ```
 
+The static arguments of `cn` are one class string; `prop && p(4)` depends on a runtime value, so it stays an argument of the runtime call, and the `p(4)` in it is already its class.
+
 ```css
 @layer _.k, _.a, _.b, _.c, _.d, _.e;
 @layer _.a {
-	._lwugp7 { padding: 1rem; }
-	._1ob5z5m { align-items: center; }
-	._1s47490 { display: flex; }
-	._cn8dee { justify-content: center; }
+  ._lwugp7 {
+    padding: 1rem;
+  }
+  ._1ob5z5m {
+    align-items: center;
+  }
+  ._1s47490 {
+    display: flex;
+  }
+  ._cn8dee {
+    justify-content: center;
+  }
 }
 ```
 
 - **The class names** are a hash of the declaration (and its conditions), so the same declaration gives the same class in every file.
 - **One sheet.** All rules are in `virtual:cssints.css`, each once, sorted by layer, then condition, then shorthand before longhand (`border` before `border-top`, counted from Chrome's own expansion of each shorthand), then class name. So a longhand wins over a shorthand that contains it, whatever the order of the arguments: `cn(pl(2), p(4))` keeps `padding-left: 0.5rem`.
-- **`cn()` keeps the later of the same property.** `cn(p(4), p(2))` is `p(2)`: the earlier declaration is dropped at build time (also for an alias: `wordWrap` is `overflowWrap`). Under different conditions both stay, because they are in different layers: `cn(md(p(6)), p(2))`. Two properties that overlap without one containing the other are a build error, because the sheet cannot order them by the arguments: `cn(borderTop("1px solid red"), borderColor("blue"))` both set `border-top-color`; so do a physical and a logical side (`marginLeft` and `marginInline`, `width` and `inlineSize`), since which physical side a logical one is depends on the writing mode. A logical property inside a physical shorthand that sets every side is contained, not overlapping: `cn(border(...), borderInline(...))` is fine, and `borderInline` wins. Styles that only meet in `cx()` in the browser are not seen at build time.
+- **`cn()` keeps the later of the same property.** `cn(p(4), p(2))` is `p(2)`: the earlier declaration is dropped at build time (also for an alias: `wordWrap` is `overflowWrap`). Under different conditions both stay, because they are in different layers: `cn(md(p(6)), p(2))`. Two properties that overlap without one containing the other are a build error, because the sheet cannot order them by the arguments: `cn(borderTop("1px solid red"), borderColor("blue"))` both set `border-top-color`; so do a physical and a logical side (`marginLeft` and `marginInline`, `width` and `inlineSize`), since which physical side a logical one is depends on the writing mode. A logical property inside a physical shorthand that sets every side is contained, not overlapping: `cn(border(...), borderInline(...))` is fine, and `borderInline` wins. A style in a runtime argument is compared with the static arguments at build time, and replaces the classes it overrides while it is active (see "Runtime: `cn`, `cv`").
 - **A layout context** gives one string: `flex().alignItems("center")` is `"_1s47490 _1ob5z5m"`.
-- **Also exported:** `css` (the namespace as a value) and `cn`, `cv`, `firstThatWorks`, `media`, `container`, `supports`, `attr`, `within`, `group`, `global`, `token`, `style`, `createTokens`, `createGlobalTheme`, `check`. `cx` is the only runtime export.
+- **Also exported:** `css` (the namespace as a value) and `cn`, `cv`, `firstThatWorks`, `media`, `container`, `supports`, `attr`, `within`, `group`, `global`, `token`, `style`, `createTokens`, `createGlobalTheme`, `check`. Nothing is exported for the browser: the runtime is the plugin's.
 
 ### Without runtime
 
 ```tsx
 import * as css from "cssints" with { type: "cssints" };
 
-export const C = () => <div className={css.cn(css.flex().alignItems("center").justifyContent("center"), css.p(4))}>Hello, world!</div>;
+export const C = () => (
+  <div className={css.cn(css.flex().alignItems("center").justifyContent("center"), css.p(4))}>
+    Hello, world!
+  </div>
+);
 ```
 
 Output:
@@ -81,14 +107,13 @@ Output:
 export const C = () => <div className="_1s47490 _1ob5z5m _cn8dee _lwugp7">Hello, world!</div>;
 ```
 
-- **`cn(...)`** merges styles at build time into one class string. Its arguments are fixed, so nothing is left at runtime and no `cx` is imported.
+- **`cn(...)`** merges styles at build time into one class string. With arguments that are all known at build time nothing is left at runtime and the runtime is not imported.
 
 ### Conditions and layers (decided 2026-09-29, cssints-kpq1)
 
 Conditions are wrapper functions. A wrapper takes styles and returns them under its condition. Wrappers nest.
 
 ```ts
-import { cx } from "cssints";
 import * as css from "cssints" with { type: "cssints" };
 
 const md = css.media("(width >= 40rem)");
@@ -98,14 +123,21 @@ const dark = css.media("(prefers-color-scheme: dark)");
 const narrow = css.container("sidebar (width < 30rem)");
 const grid = css.supports("(display: grid)");
 
-export const styles = cx(
-	css.p(2),
-	md(css.pl("8ch"), css.pt(4)),
-	css.hover(css.bg("#eee")),
-	md(css.hover(css.bg("#ddd"))),
-	prop && lg(css.p(8)),
+export const styles = css.cn(
+  css.p(2),
+  md(css.pl("8ch"), css.pt(4)),
+  css.hover(css.bg("#eee")),
+  md(css.hover(css.bg("#ddd"))),
+  prop && lg(css.p(8)),
+);
+export const forms = css.cn(
+  dark(css.bg("#111")),
+  narrow(css.m(0)),
+  grid(css.display("grid")),
+  tablet(css.m(1)),
+  wide(css.m(2)),
+  sm(css.m(3)),
 );
-export const forms = cx(dark(css.bg("#111")), narrow(css.m(0)), grid(css.display("grid")), tablet(css.m(1)), wide(css.m(2)), sm(css.m(3)));
 ```
 
 - **Pseudo-classes** are ready-made wrappers named after the selector: `hover`, `focus`, `focusVisible`, `active`, `disabled`, and so on: 49 of them, from mdn-data `selectors.json` (standard pseudo-classes without arguments). Functional ones (`:nth-child()`) are not wrappers.
@@ -121,29 +153,40 @@ Output of `styles`; each form in `forms` gives one more rule in `_.b` (`dark`, `
 
 ```css
 @layer _.a {
-	._1t8gqy5 { padding: 0.5rem; }
+  ._1t8gqy5 {
+    padding: 0.5rem;
+  }
 }
 @layer _.b {
-	._16f8jrr:hover { background-color: #eee; }
-	@media (width >= 40rem) {
-		._1q848uz { padding-top: 1rem; }
-		._t70zhd { padding-left: 8ch; }
-	}
-	@media (width >= 60rem) {
-		._1khcbr2 { padding: 2rem; }
-	}
+  ._16f8jrr:hover {
+    background-color: #eee;
+  }
+  @media (width >= 40rem) {
+    ._1q848uz {
+      padding-top: 1rem;
+    }
+    ._t70zhd {
+      padding-left: 8ch;
+    }
+  }
+  @media (width >= 60rem) {
+    ._1khcbr2 {
+      padding: 2rem;
+    }
+  }
 }
 @layer _.c {
-	@media (width >= 40rem) {
-		._ronnd2:hover { background-color: #ddd; }
-	}
+  @media (width >= 40rem) {
+    ._ronnd2:hover {
+      background-color: #ddd;
+    }
+  }
 }
 ```
 
 ### Global rules, attributes and parent states (decided 2026-10-03, cssints-635k, cssints-eaob)
 
 ```ts
-import { cx } from "cssints";
 import * as css from "cssints" with { type: "cssints" };
 
 const dark = css.media("(prefers-color-scheme: dark)");
@@ -159,13 +202,16 @@ css.global("a", css.hover(css.color("red"))); // global() takes media(), contain
 
 // an attribute state, and the state of a marked ancestor
 export const row = css.cn(css.group(), css.p(2));
-export const link = cx(
-	css.color("gray"),
-	css.attr("aria-current", "page")(css.color("blue")),
-	css.within(css.hover)(css.textDecoration("underline")),
+export const link = css.cn(
+  css.color("gray"),
+  css.attr("aria-current", "page")(css.color("blue")),
+  css.within(css.hover)(css.textDecoration("underline")),
 );
 export const icon = css.attr("href", ".pdf", "$=")(css.opacity(0.8));
-export const nested = css.cn(css.group("card"), css.within(css.focusVisible, "card")(css.outline("2px solid")));
+export const nested = css.cn(
+  css.group("card"),
+  css.within(css.focusVisible, "card")(css.outline("2px solid")),
+);
 css.attr("a b"); // error: a name has no space
 css.attr("a", "x", "!="); // error: not an operator
 css.within(css.media("(width >= 40rem)")); // error: a media query is not a state
@@ -182,15 +228,36 @@ css.within(css.media("(width >= 40rem)")); // error: a media query is not a stat
 
 ```css
 @layer _.k {
-	*, *::before, *::after{box-sizing:border-box}
-	body{margin:8px}
-	:root{color-scheme:light}@media (prefers-color-scheme: dark){:root{color-scheme:dark}}
-	a[href^='http'] > b{color:red}
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  body {
+    margin: 8px;
+  }
+  :root {
+    color-scheme: light;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+    }
+  }
+  a[href^="http"] > b {
+    color: red;
+  }
 }
 @layer _.b {
-	:where(._g:hover) ._72037{text-decoration:underline}
-	._fc1pxh[aria-current="page"]{color:blue}
-	._pl3vkk[href$=".pdf"]{opacity:0.8}
+  :where(._g:hover) ._72037 {
+    text-decoration: underline;
+  }
+  ._fc1pxh[aria-current="page"] {
+    color: blue;
+  }
+  ._pl3vkk[href$=".pdf"] {
+    opacity: 0.8;
+  }
 }
 ```
 
@@ -216,9 +283,9 @@ css.token.set(muted, "red"); // error: private tokens cannot be set
 
 ```css
 @property --color-primary {
-	syntax: "<color>";
-	inherits: true;
-	initial-value: blue;
+  syntax: "<color>";
+  inherits: true;
+  initial-value: blue;
 }
 ```
 
@@ -235,14 +302,14 @@ Tokens come from an inline DTCG-shaped `const` object. Every leaf is a token (se
 import * as css from "cssints" with { type: "cssints" };
 
 const t = css.createTokens({
-	color: {
-		$type: "color",
-		bg: { $value: "#ffffff" },
-		fg: { $value: "#111827" },
-		accent: { $value: "oklch(62% 0.19 259)" },
-		link: { $value: "{color.accent}" },
-	},
-	space: { $type: "dimension", md: { $value: "16px" } },
+  color: {
+    $type: "color",
+    bg: { $value: "#ffffff" },
+    fg: { $value: "#111827" },
+    accent: { $value: "oklch(62% 0.19 259)" },
+    link: { $value: "{color.accent}" },
+  },
+  space: { $type: "dimension", md: { $value: "16px" } },
 });
 
 const dark = css.media("(prefers-color-scheme: dark)");
@@ -252,7 +319,9 @@ css.createGlobalTheme(t.color, css.container("(width < 30rem)"), { bg: "#eee" })
 
 css.check.contrast(t.color.fg, t.color.bg, { min: 4.5 });
 
-export const A = () => <div className={css.cn(css.bg(t.color.bg), css.color(t.color.fg), css.p(t.space.md))} />;
+export const A = () => (
+  <div className={css.cn(css.bg(t.color.bg), css.color(t.color.fg), css.p(t.space.md))} />
+);
 css.createGlobalTheme(t, dark, { color: { nope: "red" } }); // error: no token at this path
 css.createGlobalTheme(t, css.hover, { color: { bg: "red" } }); // error: a pseudo-class is not a theme condition
 ```
@@ -264,12 +333,12 @@ css.createGlobalTheme(t, css.hover, { color: { bg: "red" } }); // error: a pseud
   - **A plain token** (`token.color("oklch(0.637 0.203 345)", "accent")`, a `createTokens()` leaf): `@property --accent{…initial-value:#db4aa7}` and `:root{--accent:oklch(0.637 0.203 345)}`, which LightningCSS lowers like any custom property (`--accent:#db4aa7`, then the wide-gamut `lab()` under `@supports (color: lab(0% 0 0))`). A browser that parses the value gets the wide one, so a modern browser reads the same colour as before, written as `lab()` (`:where(*)` stands for `:root` when the token does not inherit).
   - **A derived token or a theme value that holds `var()`** (`oklch(0.637 0.203 {hue.accent})`, `color-mix()` over a token, `{path}` references): LightningCSS cannot lower a value with `var()`. Its default is the lowered literal (the references replaced by the values the tokens start with) and the live value comes after it under `@supports` of the literal itself, the feature the value needs and no table of features: `:root{--accent:#db4aa7}` then `@supports (color:oklch(0.637 0.203 345)){:root{--accent:oklch(0.637 0.203 var(--hue-accent))}}`. A browser that parses the literal reads the live value, so the hue slider works; one that does not keeps the default, unless the runtime of the next bullet computes the value. A theme does the same inside its own rule, `@supports (…){@media (…){:root{…}}}` or `@supports (…){.dark{…}}`, after the default of that theme. An alias (`{color.accent}` as the whole value) stays live, since it needs no feature of its own, and reads the default of its target. A theme that sets a token a derived token depends on declares that derived token again (live, as above), and an older browser keeps the default of the derived token there.
   - The support warning for those values is gone: the fallback handles it. A token value that LightningCSS leaves alone keeps its warning and its single declaration, as today.
-  - Checked in Chromium 109 (`apps/sky/test/old-browser.mjs`: Mu pink in real colours, light and dark, before the runtime of the next bullet moves anything) and Chrome 154 (the colours stay `oklch()` and follow the slider). The cost on sky is one more `:root` declaration per token and one `@supports` rule per derived value: 27.97 kB to 29.58 kB of CSS with the default targets.
-- **Derived tokens in older browsers: a runtime** (cssints-i9xo). Where a target cannot parse a derived colour (`oklch(0.637 0.203 var(--hue-accent))`, `lab(from color(from var(--color-accent) srgb-linear …) …)`), the slider would do nothing. The engine then ships a small browser module, `cssints/derived`, that computes the live values in JavaScript. Tokens are not members, so this is not a plugin you import: the engine registers the runtime itself when a derived colour needs it, and delivers it the way it delivers a plugin's runtime (`virtual:cssints/runtime/derived`, empty, `export {};`, unless a browserslist target lacks a feature the literals need and has `@property`; the same `needed()` decision). The client modules that use such a token import it. With targets that parse every value nothing is written or shipped: sky built for `chrome 154` is byte-identical to a build without the runtime.
+  - Checked in Chromium 109 (`apps/csssky/test/old-browser.mjs`: Mu pink in real colours, light and dark, before the runtime of the next bullet moves anything) and Chrome 154 (the colours stay `oklch()` and follow the slider). The cost on csssky is one more `:root` declaration per token and one `@supports` rule per derived value: 27.97 kB to 29.58 kB of CSS with the default targets.
+- **Derived tokens in older browsers: a runtime** (cssints-i9xo). Where a target cannot parse a derived colour (`oklch(0.637 0.203 var(--hue-accent))`, `lab(from color(from var(--color-accent) srgb-linear …) …)`), the slider would do nothing. The engine then ships a small browser module, `cssints/derived`, that computes the live values in JavaScript. Tokens are not members, so this is not a plugin you import: the engine registers the runtime itself when a derived colour needs it, and delivers it the way it delivers a plugin's runtime (`virtual:cssints/runtime/derived`, empty, `export {};`, unless a browserslist target lacks a feature the literals need and has `@property`; the same `needed()` decision). The client modules that use such a token import it. With targets that parse every value nothing is written or shipped: csssky built for `chrome 154` is byte-identical to a build without the runtime.
   - **The data** is one custom property on `:root` in layer `_.k` (`--_derived`, JSON in a string) with only what the sheet uses: `p`, the literals a browser must parse for the runtime to stay idle (the same literals as the `@supports` tests); `b`, the template of each derived colour of the default theme (`oklch(0.637 0.203 var(--hue-accent))`); `t`, per theme in sheet order, its condition (a selector, or `@media (…)`) and the templates it sets, `0` for a token it sets to a literal. A token that a theme overrides with a plain `{path}` alias stays live and is released by the runtime.
   - **The runtime** does nothing without a `document`, and nothing when the browser parses every `p` (Chrome 154 gets the same CSS as an old one and writes nothing on `<html>`). Otherwise it picks the themes that apply to `<html>` (`matches()` of the selector, `matchMedia()` of the condition), evaluates the templates over the computed values of the inputs (`--hue-accent` and any other token a template reads; the runtime's own results are used as they are, not read back), and writes the results as inline custom properties on `<html>`, as `rgb()`. It runs again on any attribute change of `<html>` (class, style: the slider, the theme classes) and when a theme's media query changes (`prefers-color-scheme`), and once the stylesheet has loaded if it was not there at the start. It reads every input before the first write, so one input costs one style recalculation. A token it cannot compute at the moment (an input is missing) keeps its static default.
   - **The subset** is hex, `rgb()`/`rgba()`, `oklch()`, `oklab()`, `lab()`, `color(srgb | srgb-linear …)`, `color-mix()` in `srgb`, `srgb-linear`, `oklab` or `lab` (shares that add up to 100%), the names `black`, `white` and `transparent`; relative colour (`from`) with the channel keywords, numbers, percentages, `deg`, `+ - * /`, parentheses, `calc()`, `clamp()`, `min()`, `max()` and `var()`. A colour outside sRGB is clipped to it (an old browser has no wider gamut). Anything else (`light-dark()`, `hsl()`, a polar `color-mix()`, a wide-gamut `color()`, another unit), a derived token that is not a colour, one that does not inherit, and a value in a `container()` theme stays at its static default, and the build warns, naming the token and the target: `tf.color.mixed: "color-mix(in oklch, …)" stays at its static default in chrome 109: the runtime for derived tokens does not evaluate "oklch"`. The themes it reads are those of `<html>` (`:root`, a selector that matches it, a media query), not of an element inside the page. A template should read plain tokens and derived tokens, not an alias of a derived token (it would be read one update late).
-  - **Cost.** `cssints/derived` is 7.2 kB minified, 3.1 kB gzipped; sky's CSS grows by the data (29.6 kB to 31.4 kB with the default targets, about 0.6 kB gzipped). The colours of the default theme take 10 µs of JavaScript per input; in Chromium 109 a slider input costs 1.2 ms against 0.6 ms for the style recalculation alone, which the browser pays on any change of the hue. Checked in `apps/sky/test/old-browser.mjs`: in Chromium 109 the four accent steps, the label's onAccent and the page background at hues 0, ±90 and ±180 are within 1/255 of the pixels Chrome 154 paints, in light, dim, dark and system under a light and a dark scheme, and the system scheme changing recomputes them; `packages/cssints/test/derived-runtime.mjs` holds the evaluator to culori (the maths of `check.contrast`) on the sky templates and random inputs.
+  - **Cost.** `cssints/derived` is 7.2 kB minified, 3.1 kB gzipped; csssky's CSS grows by the data (29.6 kB to 31.4 kB with the default targets, about 0.6 kB gzipped). The colours of the default theme take 10 µs of JavaScript per input; in Chromium 109 a slider input costs 1.2 ms against 0.6 ms for the style recalculation alone, which the browser pays on any change of the hue. Checked in `apps/csssky/test/old-browser.mjs`: in Chromium 109 the four accent steps, the label's onAccent and the page background at hues 0, ±90 and ±180 are within 1/255 of the pixels Chrome 154 paints, in light, dim, dark and system under a light and a dark scheme, and the system scheme changing recomputes them; `packages/cssints/test/derived-runtime.mjs` holds the evaluator to culori (the maths of `check.contrast`) on the csssky templates and random inputs.
 - **Themes:** `createGlobalTheme(tokens, condition | selector, overrides, { layer?, scope? }?)` re-declares the overridden tokens under a `media()` condition on `:root`, or under a selector. Under `container()` it declares them on `:where(*)`, since `:root` has no container above it and would never match. `layer` names a top-level layer for the rule (`{ layer: "app" }` puts an app look in `@layer app`, above the engine's `:root` fallbacks) that `layers()` has declared, in this module or one it imports: an undeclared layer is a build error at the call. Without `layer` the rule is in `_.k`. `scope` (with a selector) confines the rule to a subtree, `@scope (article.post) { [data-mode="hero"] { ... } }`, so a foreign look cannot repaint the rest of the page; it is a selector, checked by the build like the one of `global()` and balanced in the types, and it is an error with a condition (`:root` is not inside a scope). Overrides are checked against the token types, and an unknown path is a type error; they take the same values as tokens, and `tokens` may be a group (`t.color`). `supports()` and pseudo-classes are not themes: `createGlobalTheme(t, hover, …)` is a type error, and a build error when the types are bypassed. A module that uses a token gets the theme rules that set it, with the `@property` rules of the tokens it uses and of those their values refer to, not of every token the theme sets.
 - **`layers(...names)`** declares top-level layers in order. The sheet prints `@layer app, author, viewer;` once, right after the engine's `@layer _.k, _.a, …;`, however many modules declare it (a module's sheet has the statements of its own `layers()` calls and of the layers it uses). The same names again are fine; names in another order (`layers("viewer", "app")` after the one above), or sharing layers without one statement holding the other (`layers("viewer", "base")`), are a build error at the second call, since the sheet could not say which comes first. A statement that holds another is printed first; statements that share nothing are printed longest first. A name is letters, digits, `_` and `-`.
 - **`layers(...names, { before: true })`** declares them before the engine's: the sheet prints `@layer reset;` above `@layer _.k, _.a, …;`, so `_.k`, the classes and every layer declared after rank above what is in them (a reset that any style beats). The rules above hold among the statements before, in the same order; a layer declared both before and after (`layers("reset")` once `layers("reset", { before: true })` has run, or the other way) is a build error at the second call. A stylesheet's own layer goes between a reset and cssints with `layers("reset", "base", { before: true })`.
@@ -280,7 +349,12 @@ import * as css from "cssints" with { type: "cssints" };
 css.layers("app", "author", "viewer");
 const t = css.createTokens({ color: { $type: "color", bg: { $value: "#fff" } } });
 css.createGlobalTheme(t, '[data-mode="dark"]', { color: { bg: "#000" } }, { layer: "viewer" });
-css.createGlobalTheme(t, '[data-mode="hero"]', { color: { bg: "#123" } }, { layer: "author", scope: "article.post" });
+css.createGlobalTheme(
+  t,
+  '[data-mode="hero"]',
+  { color: { bg: "#123" } },
+  { layer: "author", scope: "article.post" },
+);
 css.createGlobalTheme(t, ".x", { color: { bg: "#000" } }, { scope: "a[href" }); // error: unbalanced brackets in the scope
 css.layers(); // error: a declaration has a name
 css.layers("reset", { before: true }); // @layer reset; before @layer _.k, _.a, …;
@@ -295,11 +369,11 @@ css.layers("reset", { before: true }); // @layer reset; before @layer _.k, _.a,
 import * as css from "cssints" with { type: "cssints" };
 
 export const t = css.createTokens({
-	color: {
-		$type: "color",
-		accent: { $value: "#2563eb" },
-		hover: { $value: "color-mix(in oklab, {color.accent}, black 15%)" },
-	},
+  color: {
+    $type: "color",
+    accent: { $value: "#2563eb" },
+    hover: { $value: "color-mix(in oklab, {color.accent}, black 15%)" },
+  },
 });
 css.createGlobalTheme(t, ".brand", { color: { accent: "#db2777" } }); // hover follows
 ```
@@ -310,12 +384,15 @@ css.createGlobalTheme(t, ".brand", { color: { accent: "#db2777" } }); // hover f
 import * as css from "cssints" with { type: "cssints" };
 
 export const t = css.createTokens({
-	hue: { $type: "number", accent: { $value: 345 } },
-	radius: { $type: "dimension", sm: { $value: "4px" }, md: { $value: "8px" } },
-	color: { $type: "color", accent: { $value: "oklch(0.6 0.2 {hue.accent})" } },
+  hue: { $type: "number", accent: { $value: 345 } },
+  radius: { $type: "dimension", sm: { $value: "4px" }, md: { $value: "8px" } },
+  color: { $type: "color", accent: { $value: "oklch(0.6 0.2 {hue.accent})" } },
 });
 css.createGlobalTheme(t, ".square", { radius: { md: "{radius.sm}" } });
-css.createGlobalTheme(t, ".dim", { hue: { accent: 12 }, color: { accent: "oklch(0.7 0.1 {hue.accent})" } });
+css.createGlobalTheme(t, ".dim", {
+  hue: { accent: 12 },
+  color: { accent: "oklch(0.7 0.1 {hue.accent})" },
+});
 css.createGlobalTheme(t, ".x", { radius: { md: "{hue.accent}" } }); // error: a number, not a length
 ```
 
@@ -332,45 +409,71 @@ import { register } from "@tokens-studio/sd-transforms";
 register(StyleDictionary);
 const DTCG = { fontSize: "dimension", lineHeight: "number", opacity: "number" }; // the types sd-transforms leaves
 StyleDictionary.registerFormat({
-	name: "cssints/dtcg",
-	format: ({ dictionary }) => {
-		const out = {};
-		for (const t of dictionary.allTokens) {
-			let group = out;
-			for (const key of t.path.slice(0, -1)) group = group[key] ??= {};
-			const type = t.$type ?? t.type;
-			group[t.path.at(-1)] = { $type: DTCG[type] ?? type, $value: t.$value ?? t.value };
-		}
-		return JSON.stringify(out, null, 2);
-	},
+  name: "cssints/dtcg",
+  format: ({ dictionary }) => {
+    const out = {};
+    for (const t of dictionary.allTokens) {
+      let group = out;
+      for (const key of t.path.slice(0, -1)) group = group[key] ??= {};
+      const type = t.$type ?? t.type;
+      group[t.path.at(-1)] = { $type: DTCG[type] ?? type, $value: t.$value ?? t.value };
+    }
+    return JSON.stringify(out, null, 2);
+  },
 });
 await new StyleDictionary({
-	source: ["tokens/**/*.json"],
-	preprocessors: ["tokens-studio"],
-	platforms: { cssints: { transformGroup: "tokens-studio", files: [{ destination: "tokens.json", format: "cssints/dtcg" }] } },
+  source: ["tokens/**/*.json"],
+  preprocessors: ["tokens-studio"],
+  platforms: {
+    cssints: {
+      transformGroup: "tokens-studio",
+      files: [{ destination: "tokens.json", format: "cssints/dtcg" }],
+    },
+  },
 }).buildAllPlatforms();
 ```
 
-  - **Build errors** for what would be misread: `value`/`type` without `$` (`global.Main.0 has value and type without $, the legacy format of Tokens Studio …`), `$themes` or `$metadata` in the tree, a Tokens Studio type (the error names the DTCG type: `"spacing" is a Tokens Studio type: its DTCG type is "dimension"`), math outside `calc()` (`write "calc({spacing.base} * 2)"`), a Tokens Studio colour modifier (`$extensions["studio.tokens"].modify`), a Figma boolean (`com.figma.type: "boolean"` on a number), and more than one mode in `$extensions` (`mode`, or `modes` of `com.figma`). `string`, `boolean`, `fontFamily` and the composite types are errors as before (no token type), so leave them out of the file (Figma: a collection without them; TokensBrücke: no styles). Samples of each tool are in `packages/cssints/test/fixtures/importers`.
+- **Build errors** for what would be misread: `value`/`type` without `$` (`global.Main.0 has value and type without $, the legacy format of Tokens Studio …`), `$themes` or `$metadata` in the tree, a Tokens Studio type (the error names the DTCG type: `"spacing" is a Tokens Studio type: its DTCG type is "dimension"`), math outside `calc()` (`write "calc({spacing.base} * 2)"`), a Tokens Studio colour modifier (`$extensions["studio.tokens"].modify`), a Figma boolean (`com.figma.type: "boolean"` on a number), and more than one mode in `$extensions` (`mode`, or `modes` of `com.figma`). `string`, `boolean`, `fontFamily` and the composite types are errors as before (no token type), so leave them out of the file (Figma: a collection without them; TokensBrücke: no styles). Samples of each tool are in `packages/cssints/test/fixtures/importers`.
 - **The sheet:** token sets and themes are rules of layer `_.k`, after the global rules of `css.global()` and before the class layers. They set custom properties only, and no class does, so the layer order never decides between them; `_.k` is the lowest layer, so your own unlayered `--color-bg` rule wins over a theme. The `:root` rules of aliases come first, then themes under a condition, then themes under a selector, each in source order, so a selector theme beats a condition theme on the same element. A module has the rules of the tokens it uses, from wherever they were made, and of the tokens those are made of (the references of a derived token or of a theme value, through chains: a `hue.accent` that no class uses still gets its `@property` rule), and its own; import a theme module (`import "./theme.ts"`) to have all of it.
-- **`css.check.contrast(fg, bg, { min })`** computes the WCAG 2.x contrast ratio (`min` from 1 to 21) for the default values and for every theme that sets either token or one they are aliases of. It reads themes one at a time, except those of one selector: themes with the same selector (and scope) meet on one element, so they are read together, laid over each other in the order of the cascade (no layer first, then the declared layers in order, then source order). A viewer look that sets only the text colour is checked on the background of the app look under the same selector. Themes of different selectors, or a selector and a condition, are still read one at a time, not in their combinations. A value that is set at run time (a slider that sets `--hue-accent` on `<html>`) belongs to no theme and is checked at its default only; a theme per value would put each rule in the sheet and hold it to the thresholds of the other themes, since a check applies to every theme that touches its tokens, so measure a range outside the build (apps/sky `test/contrast.mjs`). A ratio below `min` is a build error that names the theme and both resolved values (the ratio is cut, not rounded: 4.499 is 4.49). A value the check cannot evaluate (`color-mix()`, a relative colour, `light-dark()`, `currentColor`, a system colour) or a translucent one is a warning that names the token; a build says it once, and a dev server says it again after each edit. A derived token (or a theme value with `{path}` references) is read in each theme by putting that theme's values, or the defaults, in place of its references, through a chain of derived tokens: a ratio when the result is a colour (`oklch(0.6 0.2 {hue.accent})`), a warning that names the theme when it is not (`color-mix()` over another token), and a theme that sets any token a checked colour depends on, directly, through an alias or through references, is checked. The colour library (culori, `culori/fn`: 27 kB minified, 9 kB gzipped) is build-only and never ships. The check runs when its module has run, and again at the end of a build over the themes of every module.
+- **`css.check.contrast(fg, bg, { min })`** computes the WCAG 2.x contrast ratio (`min` from 1 to 21) for the default values and for every theme that sets either token or one they are aliases of. It reads themes one at a time, except those of one selector: themes with the same selector (and scope) meet on one element, so they are read together, laid over each other in the order of the cascade (no layer first, then the declared layers in order, then source order). A viewer look that sets only the text colour is checked on the background of the app look under the same selector. Themes of different selectors, or a selector and a condition, are still read one at a time, not in their combinations. A value that is set at run time (a slider that sets `--hue-accent` on `<html>`) belongs to no theme and is checked at its default only; a theme per value would put each rule in the sheet and hold it to the thresholds of the other themes, since a check applies to every theme that touches its tokens, so measure a range outside the build (apps/csssky `test/contrast.mjs`). A ratio below `min` is a build error that names the theme and both resolved values (the ratio is cut, not rounded: 4.499 is 4.49). A value the check cannot evaluate (`color-mix()`, a relative colour, `light-dark()`, `currentColor`, a system colour) or a translucent one is a warning that names the token; a build says it once, and a dev server says it again after each edit. A derived token (or a theme value with `{path}` references) is read in each theme by putting that theme's values, or the defaults, in place of its references, through a chain of derived tokens: a ratio when the result is a colour (`oklch(0.6 0.2 {hue.accent})`), a warning that names the theme when it is not (`color-mix()` over another token), and a theme that sets any token a checked colour depends on, directly, through an alias or through references, is checked. The colour library (culori, `culori/fn`: 27 kB minified, 9 kB gzipped) is build-only and never ships. The check runs when its module has run, and again at the end of a build over the themes of every module.
 
 Output (the `@property` rules of `space-md` and `color-fg` are not shown):
 
 ```css
 @layer _.k, _.a, _.b, _.c, _.d, _.e;
-@property --color-accent { syntax: "<color>"; inherits: true; initial-value: oklch(62% 0.19 259); }
-@property --color-bg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
-@property --color-link { syntax: "<color>"; inherits: true; initial-value: oklch(62% 0.19 259); }
+@property --color-accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(62% 0.19 259);
+}
+@property --color-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+@property --color-link {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(62% 0.19 259);
+}
 @layer _.k {
-	:root { --color-link: var(--color-accent); }
-	@media (prefers-color-scheme: dark) {
-		:root { --color-bg: #0b0b0f; --color-fg: #f3f4f6; }
-	}
-	@container (width < 30rem) {
-		:where(*) { --color-bg: #eee; }
-	}
-	.light { --color-bg: #fff; }
+  :root {
+    --color-link: var(--color-accent);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-bg: #0b0b0f;
+      --color-fg: #f3f4f6;
+    }
+  }
+  @container (width < 30rem) {
+    :where(*) {
+      --color-bg: #eee;
+    }
+  }
+  .light {
+    --color-bg: #fff;
+  }
 }
 ```
 
@@ -404,10 +507,25 @@ export const d = minHeight(firstThatWorks("100dvh", "100vhh")); // error: the fa
 `keyframes()` and `positionTry()` define an at-rule next to the styles that use it and return its name, a typed value that fits where the grammar wants a name.
 
 ```ts
-import { animation, cn, hover, keyframes, margin, opacity, positionTry, positionTryFallbacks, top, transform } from "cssints" with { type: "cssints" };
+import {
+  animation,
+  cn,
+  hover,
+  keyframes,
+  margin,
+  opacity,
+  positionTry,
+  positionTryFallbacks,
+  top,
+  transform,
+} from "cssints" with { type: "cssints" };
 
 export const fade = keyframes({ from: opacity(0), to: opacity(1) });
-export const wiggle = keyframes({ from: transform("rotate(0deg)"), "50%": cn(transform("rotate(8deg)"), opacity(0.5)), to: transform("rotate(0deg)") });
+export const wiggle = keyframes({
+  from: transform("rotate(0deg)"),
+  "50%": cn(transform("rotate(8deg)"), opacity(0.5)),
+  to: transform("rotate(0deg)"),
+});
 export const above = positionTry(cn(top("anchor(bottom)"), margin(2)));
 
 export const a = animation(fade, "200ms", "ease-out");
@@ -428,32 +546,71 @@ export const f = positionTryFallbacks(fade); // error: a keyframes name is not a
 
 ```css
 @layer _.k {
-	@keyframes kf-0e6af964{from{opacity:0}to{opacity:1}}
-	@position-try --pt-23965b44{top:anchor(bottom);margin:0.5rem}
+  @keyframes kf-0e6af964 {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @position-try --pt-23965b44 {
+    top: anchor(bottom);
+    margin: 0.5rem;
+  }
 }
 @layer _.a {
-	._44ecsn{animation:kf-0e6af964 200ms ease-out}
+  ._44ecsn {
+    animation: kf-0e6af964 200ms ease-out;
+  }
 }
 ```
 
-### Runtime: `cx`, `cn`, `cv` (decided 2026-09-29, cssints-lo9x; `cv` without `_cv` 2026-10-07, cssints-ep2l)
+### Runtime: `cn`, `cv` (decided 2026-09-29, cssints-lo9x; `cv` without `_cv` 2026-10-07, cssints-ep2l; `cx` folded into `cn` 2026-10-11, cssints-4e9f)
+
+- **One runtime package: `cssints` itself.** You import nothing for the browser. A module with a `cn()` that has runtime arguments, or a `cv()`, gets `import { _cx as __cx, _cv as __cv } from "cssints"` from the plugin, and those few lines are the only code that ships. `@cssints/variants` is gone.
+- **`cn(...)` is the one function that merges.** Arguments known at build time merge into one class string, as above. An argument that depends on a runtime value is joined when the code runs, and the `css.*` calls inside it are still class strings made at build time: only the choice is left.
+
+```ts
+import { bg, cn, hover, p } from "cssints" with { type: "cssints" };
+
+export const box = (props: { on: boolean; class?: string }) =>
+  cn(p(2), bg("white"), props.on && p(4), hover(bg("#eee")), props.class);
+export const row = (kind: "a" | "b", items: boolean[]) =>
+  cn(
+    p(1),
+    kind === "a" ? p(2) : bg("red"),
+    items.map((x) => x && p(3)),
+  );
+export const bad = (n: number) => cn(p(2), p(n)); // the build refuses it: css arguments must be known at build time
+```
+
+```tsx skip
+import { _cx as __cx } from "cssints";
 
-- **One runtime package: `cssints` itself.** `import { cx } from "cssints"` has no attribute and is the only code that ships to the browser, together with the few lines the plugin puts in place of each `cv()`. `@cssints/variants` is gone.
-- **`cx(...)`** joins strings, skips falsy values and flattens nested arrays: `cx(base, on && p(4), [a, b])`. It takes no clsx-style objects; write `cond && style` instead.
-- **`cn(...)`** runs at build time only. Under the attribute, `cn(p(4), bg("red"))` becomes one class string, and nothing is left at runtime.
+export const box = (props) =>
+  __cx([["_lwugp7", "_1t8gqy5"]], "_1t8gqy5 _1ebepn0 _16f8jrr", props.on && "_lwugp7", props.class);
+```
+
+- **What is a runtime argument.** One that needs a binding the build does not have: it names a parameter, a prop, a signal or any other local of the function or block around the call (`on && p(4)`, `cond ? a : b`, `state() && p(4)`, `props.class`, `items.map(...)`), or a string or template literal, or a call of something that is not a `css.*` member (`button({ size })`, a `cv` result: a class string at build time too). Everything else is known at build time, a module `const` too, and merges. A spread (`...list`) is judged by what it spreads. Strings, `false`, `null`, `undefined` and `0` are skipped, arrays are flattened; there are no clsx-style objects (`cond && style`). A `false`, `null` or `undefined` that is known at build time (`dev && p(4)` with a module `const dev = false`) is no style and is skipped there.
+- **What the build settles.** Of two parts, static or runtime, the later one replaces the earlier one for a property it sets again under the same conditions (the same property, an alias, or a shorthand over it, as in `cv`): the plugin lists, per class, the classes it drops, and the runtime leaves them out while that class is active. So `cn(p(2), on && p(4))` gives `p-4` when `on` and `p-2` otherwise, and `cn(on && p(4), p(2))` always gives `p-2`. The sheet order never decides. Under another condition (`hover`, a media query) a class replaces nothing: `cn(p(2), on && hover(p(4)))` keeps both, as in a build-time `cn`. A longhand after a shorthand needs no drop. Two properties that overlap without one containing the other, in parts that can be active together, are a build error as above (`cssints: cn() padding-inline and padding-left overlap ...`); both arms of `cond ? a : b` count as active together.
+- **Opaque strings are only appended.** `props.class`, `"legacy"` or a style held in a variable inside a runtime argument (`on && blurred`) has no declarations in the argument, so nothing is dropped for it or by it; write the call there (`on && p(4)`) to have it settled.
+- **A style whose own argument is a runtime value is a build error.** `cn(p(2), p(n))` with `n` a parameter stays `css arguments must be known at build time: n is not defined where the call is evaluated`; choose between styles (`n > 1 ? p(2) : p(4)`), or use a `cv` variant or a token set in `style`.
+- **The call.** `__cx(drops, ...parts)`: `drops` is a list of `[class, "classes it replaces"]`, empty when nothing conflicts; the parts are class strings, runtime values and arrays. With no static argument there is no static string: `cn(props.class)` is `__cx([], props.class)`. Nothing is imported when every argument is static.
+- **`cx` is gone.** `import { cx } from "cssints"` is a build error in a module the plugin handles, with or without the attribute: `cssints: <file> imports cx from "cssints", which is gone: cn(...) takes runtime values now. Write cn(base, on && p(4)) with cn from "cssints" with { type: "cssints" }`, and a type error (the name is now the SVG property `cx`, which you write `css.cx(...)`). The fix is mechanical: add `cn` to the attributed import and write `cn(` for `cx(`. Arguments that were only joined are now merged and checked at build time, so `cx(p(4), p(2))` (both classes, the sheet decides) is `cn(p(4), p(2))` (`p(2)`).
 - **`cv(config)`** takes `css.*` values, so types check them, and is the function you call: one call, no wrapper. The plugin replaces the site by a call of the small runtime (and imports it for you; `_cv` is not exported any more) with a config of class strings. The props are typed from `variants`: a name or a value that is not there is a type error, in the props and in `defaultVariants` and `compoundVariants` alike.
 
 ```ts
 import { cn, cv, fontSize, opacity, p } from "cssints" with { type: "cssints" };
 
 const button = cv({
-	base: cn(p(2), fontSize("1rem")),
-	variants: {
-		size: { sm: p(1), lg: cn(p(4), fontSize("1.25rem")) },
-		disabled: { true: opacity(0.5), false: opacity(1) },
-	},
-	defaultVariants: { size: "sm", disabled: false },
-	compoundVariants: [{ size: "lg", disabled: true, class: opacity(0.3) }],
+  base: cn(p(2), fontSize("1rem")),
+  variants: {
+    size: { sm: p(1), lg: cn(p(4), fontSize("1.25rem")) },
+    disabled: { true: opacity(0.5), false: opacity(1) },
+  },
+  defaultVariants: { size: "sm", disabled: false },
+  compoundVariants: [{ size: "lg", disabled: true, class: opacity(0.3) }],
 });
 
 export const classes = () => button({ size: "lg" }); // "_lwugp7 _z6yj9k _1t0bw2x"
@@ -465,7 +622,7 @@ export const bad2 = cv({ base: "padding: 1rem" }); // error: a base is a css val
 - **What ships** for `button` is `__cv({ base: "_1t8gqy5 _6tpir7", variants: { size: { sm: "_lqk467", lg: "_lwugp7 _z6yj9k" }, ... }, defaultVariants: { size: "sm", disabled: false }, ... })` with `import { _cv as __cv } from "cssints"` added to the module: class strings only. `cv()` works in a function, at the top of a module and in a library.
 - **Old code.** `import { _cv } from "cssints"` is a type error (no such export) and, in a module the plugin handles, a build error at the import: `cssints: <file> imports _cv from "cssints", which is gone: cv({ ... }) is the function now. Write const button = cv({ base, variants }) ...`. It does not keep working for a release: `_cv(cv(...))` would hand a function to the runtime, and a shim would keep two spellings of one thing. The fix is mechanical: drop `_cv(` and its closing bracket. A library built the old way fails with the same error, naming its file.
 - **Boolean variants.** A variant whose keys are `true` and `false` (or only one of them) takes a boolean: `button({ disabled: true })`, and a default is a boolean too. `false` is a value, not a missing one: `button({ disabled: false })` selects the `false` key even when the default is `true`. `undefined` is the default.
-- **`compoundVariants`** as in cva: each entry names values (any of the variants, a boolean for a boolean one) and the style that is added when all of them are active. The key is `class`, as in cva, since what the entry adds is a class (a `cx` or `style()` key would suggest an inline style, and cssints has `style()` for that; `css` is the namespace). Its value is a `css.*` style like the others, not a string. The values of an entry are one value each, not a list of values.
+- **`compoundVariants`** as in cva: each entry names values (any of the variants, a boolean for a boolean one) and the style that is added when all of them are active. The key is `class`, as in cva, since what the entry adds is a class (a `cn` or `style()` key would suggest an inline style, and cssints has `style()` for that; `css` is the namespace). Its value is a `css.*` style like the others, not a string. The values of an entry are one value each, not a list of values.
 - **Values** of `base` and of each variant are one property, `cn(...)`, or a `flex()`/`grid()` chain. A CSS string is a build error that shows the new form: `cv() base must be a css.* value (cn(...), a flex() chain or one property), got "padding: 1rem". CSS strings are gone: write cn(p(4), fontSize("1rem"))`.
 
 - **The variant wins.** The function joins the base and the variants that are active at runtime, so the build compares them. Under one condition, a variant that sets what the base sets (the same property, an alias, or a shorthand over a base longhand: `pl(2)` in the base, `p(4)` in the variant) replaces it: the base class is dropped from the string while that value is active, which the runtime does from a `drops` entry in the config (`drops: { size: { lg: "_77ujlx" } }`, only where there is one). Which rule comes later in the sheet does not decide. A variant longhand inside a base shorthand needs no drop, since the sheet puts a longhand after its shorthand: base `border(...)` with `active: { yes: borderBottomColor(...) }` is fine. Under different conditions both stay, as in `cn()`.
@@ -507,13 +664,19 @@ css.supports("(display: grdi)"); // @supports: unexpected "grdi" in "(display: g
 - Clamping text to N lines is the WebKit box, in every engine today: `display("-webkit-box")` (the `display` grammar takes `-webkit-box` and `-webkit-inline-box`), `WebkitBoxOrient("vertical")` and `WebkitLineClamp(N)`, with `overflow("hidden")`. The three are quiet: BCD files them under prefixed standard names, which the support lookup does not follow. LightningCSS passes them through and adds nothing. The standard `lineClamp(N)` (css-overflow-4) is a member too, and warns for the default targets: no engine ships it unprefixed (Chrome 154 rejects it) and LightningCSS does not prefix it.
 
 ```ts
-import { cn, display, overflow, WebkitBoxOrient, WebkitLineClamp } from "cssints" with { type: "cssints" };
+import {
+  cn,
+  display,
+  overflow,
+  WebkitBoxOrient,
+  WebkitLineClamp,
+} from "cssints" with { type: "cssints" };
 
 export const clamp2 = cn(
-	display("-webkit-box"),
-	WebkitBoxOrient("vertical"),
-	WebkitLineClamp(2),
-	overflow("hidden"),
+  display("-webkit-box"),
+  WebkitBoxOrient("vertical"),
+  WebkitLineClamp(2),
+  overflow("hidden"),
 );
 ```
 
@@ -522,39 +685,47 @@ export const clamp2 = cn(
 
 ### Plugins (decided 2026-09-30, cssints-zho2; `scope()` 2026-10-05, cssints-8ogz)
 
-A plugin is a module that exports the members of a `scope()` from `cssints/plugin`: `scope("name", table).build(impl).export()`. The table says what the plugin has (syntax names, kernels, a runtime, conflicts, token sets, other scopes, and its members); the members are typed from the table, with no second file of types. User code imports the plugin with the attribute, like `cssints` itself: `import { ring } from "./ring.ts" with { type: "cssints" }`. There is no registration in `vite.config` and no type augmentation; the engine finds the sites by the attribute, and learns kernels, runtimes and conflicts from the style each member returns. In user code a member returns a class string, so it goes into `cn()`, `cx()` and the conditions like any `css.*` value.
+A plugin is a module that exports the members of a `scope()` from `cssints/plugin`: `scope("name", table).build(impl).export()`. The table says what the plugin has (syntax names, kernels, a runtime, conflicts, token sets, other scopes, and its members); the members are typed from the table, with no second file of types. User code imports the plugin with the attribute, like `cssints` itself: `import { ring } from "./ring.ts" with { type: "cssints" }`. There is no registration in `vite.config` and no type augmentation; the engine finds the sites by the attribute, and learns kernels, runtimes and conflicts from the style each member returns. In user code a member returns a class string, so it goes into `cn()` and the conditions like any `css.*` value.
 
 ```ts
 import { cn, p } from "cssints" with { type: "cssints" };
 import { scope } from "cssints/plugin";
 
 export const { ring, dot, webkitFontSmoothing } = scope("ring", {
-	// a local syntax name: `<width>` in a grammar of this scope (it does not leak into mdn's names)
-	width: "<length [0,∞]> | thin | thick",
-	// a kernel: global CSS, once. `&` is the class the engine mints for it, `--_w` is the custom property `--ring-w`
-	"#core": {
-		css: "& { outline: var(--_w) solid var(--_c); outline-offset: 2px }",
-		atProperty: '@property --_w { syntax: "<length>"; inherits: false; initial-value: 2px; }',
-		requires: ["css.at-rules.property"],
-	},
-	"#noOutline": { props: ["outline", /^outline-/], message: "ring() sets the outline: use its methods" },
-	// a chain member, like flex(): a call gives the marker and the kernel, each method emits custom properties
-	ring: {
-		uses: ["core", "noOutline"],
-		chain: {
-			width: { args: "<width>", spacing: true, emit: (v) => [["--_w", v]] },
-			color: { args: "<color>", emit: (v) => [["--_c", v]] },
-		},
-	},
-	// a property of your own, typed by its grammar (it is not in mdn-data); the key starts with `-`
-	"-webkit-font-smoothing": "auto | none | antialiased | subpixel-antialiased",
-	// a call member: its function is the entry of the same name in build()
-	dot: { args: "small | large" },
+  // a local syntax name: `<width>` in a grammar of this scope (it does not leak into mdn's names)
+  width: "<length [0,∞]> | thin | thick",
+  // a kernel: global CSS, once. `&` is the class the engine mints for it, `--_w` is the custom property `--ring-w`
+  "#core": {
+    css: "& { outline: var(--_w) solid var(--_c); outline-offset: 2px }",
+    atProperty: '@property --_w { syntax: "<length>"; inherits: false; initial-value: 2px; }',
+    requires: ["css.at-rules.property"],
+  },
+  "#noOutline": {
+    props: ["outline", /^outline-/],
+    message: "ring() sets the outline: use its methods",
+  },
+  // a chain member, like flex(): a call gives the marker and the kernel, each method emits custom properties
+  ring: {
+    uses: ["core", "noOutline"],
+    chain: {
+      width: { args: "<width>", spacing: true, emit: (v) => [["--_w", v]] },
+      color: { args: "<color>", emit: (v) => [["--_c", v]] },
+    },
+  },
+  // a property of your own, typed by its grammar (it is not in mdn-data); the key starts with `-`
+  "-webkit-font-smoothing": "auto | none | antialiased | subpixel-antialiased",
+  // a call member: its function is the entry of the same name in build()
+  dot: { args: "small | large" },
 })
-	.build({ dot: (size) => ({ decls: [["--_size", size === "small" ? "4px" : "8px"]] }) })
-	.export();
-
-export const card = cn(p(2), ring().width("thin").color("red"), webkitFontSmoothing("antialiased"), dot("small"));
+  .build({ dot: (size) => ({ decls: [["--_size", size === "small" ? "4px" : "8px"]] }) })
+  .export();
+
+export const card = cn(
+  p(2),
+  ring().width("thin").color("red"),
+  webkitFontSmoothing("antialiased"),
+  dot("small"),
+);
 export const twice = ring().width("1px").width("2px"); // error: a method is used once
 export const wrong = ring().width("red"); // error: not a width
 export const bad = webkitFontSmoothing("bold"); // error: not in the grammar
@@ -578,15 +749,15 @@ import { scope } from "cssints/plugin";
 
 // A member that sets tokens in a look: `mode(t, "dark", { color: { bg: "#000" } })` is `[data-mode="dark"] { --color-bg: #000 }` in @layer viewer
 export const { mode } = scope("mode", {
-	layers: { layers: ["app", "viewer"] },
-	mode: { args: ["$tokens", "<custom-ident>", "$overrides"], uses: ["layers"] },
+  layers: { layers: ["app", "viewer"] },
+  mode: { args: ["$tokens", "<custom-ident>", "$overrides"], uses: ["layers"] },
 })
-	.build({
-		mode: (tokens, name, overrides) => ({
-			themes: [{ tokens, overrides, selector: `[data-mode="${name}"]`, layer: "viewer" }],
-		}),
-	})
-	.export();
+  .build({
+    mode: (tokens, name, overrides) => ({
+      themes: [{ tokens, overrides, selector: `[data-mode="${name}"]`, layer: "viewer" }],
+    }),
+  })
+  .export();
 ```
 
 - **Conditions in a kernel written as styles.** `hover` and the other pseudo-classes, `attr()`, `within()`, `media()`, `container()` and `supports()` wrap the kernel's styles as they wrap a user's: `css.hover(css.opacity(0.8))`, `css.media("(width >= 40rem)")(css.padding("1rem"))`. The rules are printed under the kernel's class, in layer `_.k`, in the order of the sheet (fewer conditions first, then queries by width and pseudo-classes by place, a shorthand before its longhands), so the order the author writes them in does not matter; the declarations of one selector share a block. At most four conditions, as everywhere.
@@ -596,15 +767,15 @@ import { cn, paddingLeft } from "cssints" with { type: "cssints" };
 import { scope } from "cssints/plugin";
 
 export const { chip } = scope("chip", {
-	core: {
-		css: (css) => [
-			css.padding("var(--_p)"),
-			css.border("1px solid"),
-			css.hover(css.opacity(0.8)),
-			css.media("(width >= 40rem)")(css.padding("1rem")),
-		],
-	},
-	chip: { uses: ["core"], chain: { padding: { args: "<length>", emit: (v) => [["--_p", v]] } } },
+  core: {
+    css: (css) => [
+      css.padding("var(--_p)"),
+      css.border("1px solid"),
+      css.hover(css.opacity(0.8)),
+      css.media("(width >= 40rem)")(css.padding("1rem")),
+    ],
+  },
+  chip: { uses: ["core"], chain: { padding: { args: "<length>", emit: (v) => [["--_p", v]] } } },
 }).export();
 
 // layer _.k: ._chip-core{border:1px solid;padding:var(--chip-p)} ._chip-core:hover{opacity:0.8} @media (width >= 40rem){._chip-core{padding:1rem}}
@@ -622,15 +793,15 @@ import { scope } from "cssints/plugin";
 const fade = keyframes({ from: opacity(0) });
 
 export const { row } = scope("row", {
-	core: {
-		css: (css) => [
-			css.vars({ "--_gap": "1rem", "--_fade": fade }),
-			css.display("flex"),
-			css.animation("var(--_fade) 200ms"),
-			css.nest("& > * + *")(css.marginInlineStart("var(--_gap)")),
-		],
-	},
-	row: { uses: ["core"], chain: { gap: { args: "<length>", emit: (v) => [["--_gap", v]] } } },
+  core: {
+    css: (css) => [
+      css.vars({ "--_gap": "1rem", "--_fade": fade }),
+      css.display("flex"),
+      css.animation("var(--_fade) 200ms"),
+      css.nest("& > * + *")(css.marginInlineStart("var(--_gap)")),
+    ],
+  },
+  row: { uses: ["core"], chain: { gap: { args: "<length>", emit: (v) => [["--_gap", v]] } } },
 }).export();
 
 // layer _.k: @keyframes kf-…{from{opacity:0}} ._row-core{animation:var(--row-fade) 200ms;--row-gap:1rem;--row-fade:kf-…;display:flex} ._row-core > * + *{margin-inline-start:var(--row-gap)}
@@ -652,10 +823,10 @@ import { lacking } from "cssints/plugin";
 
 const old = lacking("css.at-rules.container.scroll-state_queries").length > 0; // ["firefox 140"] or []
 export const stuck = (...styles: Style[]) =>
-	cn(
-		container("scroll-state(stuck: top)")(...styles),
-		...(old ? [within(attr("data-stuck", "top", "~="), "stuck")(...styles)] : []),
-	);
+  cn(
+    container("scroll-state(stuck: top)")(...styles),
+    ...(old ? [within(attr("data-stuck", "top", "~="), "stuck")(...styles)] : []),
+  );
 export const title = stuck(color("red"));
 ```
 
@@ -668,13 +839,26 @@ import { color } from "cssints" with { type: "cssints" };
 import { dependsOn } from "cssints/plugin";
 
 export const swatch = (file: string) => {
-	dependsOn(file);
-	return color(readFileSync(file, "utf8").trim());
+  dependsOn(file);
+  return color(readFileSync(file, "utf8").trim());
 };
 ```
 
 A dependency is a file, not a directory: a file added to a directory is not seen. Vite's watcher skips `node_modules`, so a file there (a collection of `@iconify-json`, `@fontsource`) is not watched. An evaluation that fails records nothing: after a build error, edit the module or reload.
 
+- **`inGroup(group, property, value)`** says whether a declaration is in an export group (`widely-available`, `baseline-2022/with-downstream`, `css-grid-2`, ...; see "Export groups"): the group has the property, and the value holds no word it bans (a keyword of that property, a function, a unit). It is the scan that `cssints/<group>` runs on a call, from the same data (2026-10-11, cssints-l5z5). A property cssints has no member for (a custom property, `-webkit-text-size-adjust`) names no feature of the data and is in every group; `limited-availability` is everything; an unknown group is an error. A plugin that has a variant per group emits only what passes (`@cssints/reset/widely-available`). The data covers properties, keywords, functions, units and the pseudo-classes without arguments, not a selector as a whole: `:where()`, `::backdrop`, attribute selectors and combinators are not checked. Build time, like `scope()`:
+
+```ts
+import { inGroup } from "cssints/plugin";
+
+const keep = (group: string, decls: [string, string][]) =>
+  decls.filter(([p, v]) => inGroup(group, p, v));
+export const heading = keep("widely-available", [
+  ["text-wrap", "balance"],
+  ["overflow-wrap", "break-word"],
+]); // overflow-wrap only
+```
+
 - **Types.** `cssints/plugin` points at `author.ts` and `scope.ts`: the signatures and the type-level code (`Members`, `Chain`, `Expand`, the call checks) and no code that runs, because a program that imports a plugin must not need Node's types or a newer `lib`. The engine is `scope-engine.ts`; `macro.ts` registers it when the library loads.
 - **Not in 0.2:** `keyword` members, completions of keywords inside plugin grammar strings (the message still names the grammar), and a plugin that is a package of members you install other than `@cssints/icons`.
 
@@ -686,9 +870,9 @@ Every CSS function that mdn-data has a grammar for is a member of `css` and a na
 import * as css from "cssints" with { type: "cssints" };
 
 const t = css.createTokens({
-	color: { $type: "color", accent: { $value: "oklch(62% 0.19 259)" }, bg: { $value: "white" } },
-	space: { $type: "dimension", sm: { $value: "8px" }, md: { $value: "16px" } },
-	time: { $type: "duration", fast: { $value: "100ms" } },
+  color: { $type: "color", accent: { $value: "oklch(62% 0.19 259)" }, bg: { $value: "white" } },
+  space: { $type: "dimension", sm: { $value: "8px" }, md: { $value: "16px" } },
+  time: { $type: "duration", fast: { $value: "100ms" } },
 });
 
 export const a = css.width(css.calc(t.space.md, "*", 2)); // width: calc(var(--space-md) * 2)
@@ -698,7 +882,9 @@ export const d = css.maxWidth(css.min("48rem", "100%"));
 export const e = css.color(css.lightDark("white", t.color.bg)); // color: light-dark(white, var(--color-bg))
 export const f = css.color(css.colorMix("in oklab", t.color.accent, "black 15%"));
 export const g = css.color(css.oklch(0.7, 0.1, 200, "/", 0.5)); // color: oklch(0.7 0.1 200 / 0.5)
-export const h = css.backgroundImage(css.linearGradient("to right", [t.color.accent, "25%"], "blue"));
+export const h = css.backgroundImage(
+  css.linearGradient("to right", [t.color.accent, "25%"], "blue"),
+);
 export const i = css.transitionTimingFunction(css.cubicBezier(0.1, 0.7, 1, 0.1));
 export const img = css.backgroundImage(css.url('"a.png"')); // url("a.png"): the quotes are yours
 export const j = css.transform(css.translateFn(t.space.md, 0), css.rotateFn("10deg"));
@@ -723,8 +909,8 @@ A token is its `var()` already, so `var(--name)` is not written. `css.var(token,
 import * as css from "cssints" with { type: "cssints" };
 
 const t = css.createTokens({
-	color: { $type: "color", accent: { $value: "red" } },
-	space: { $type: "dimension", sm: { $value: "8px" } },
+  color: { $type: "color", accent: { $value: "red" } },
+  space: { $type: "dimension", sm: { $value: "8px" } },
 });
 
 export const a = css.padding(css.var(t.space.sm, "4px")); // padding: var(--space-sm, 4px)
@@ -743,11 +929,11 @@ import { scope } from "cssints/plugin";
 
 // `args` is the grammar of the parts, joined by a space: `value` gets each one as text, a token as its var(--name).
 export const { tint, step } = scope("units", {
-	tint: {
-		args: "<color> <percentage>",
-		value: ([color, share]) => new CSSColorValue(`color-mix(in oklab, ${color}, white ${share})`),
-	},
-	step: { args: "<number>", value: ([n]) => `${Number(n) * 4}px` },
+  tint: {
+    args: "<color> <percentage>",
+    value: ([color, share]) => new CSSColorValue(`color-mix(in oklab, ${color}, white ${share})`),
+  },
+  step: { args: "<number>", value: ([n]) => `${Number(n) * 4}px` },
 }).export();
 
 tint("red", "20%");
@@ -762,11 +948,12 @@ step(2);
 import { arg, fn, scope } from "cssints/plugin";
 
 export const { shade } = scope("shades", {
-	shade: fn({
-		args: ["<color>", { "by?": "<percentage>", "dark?": arg<boolean>() }],
-		label: "tint.shade",
-		value: ([color, { by = "10%", dark }]) => `color-mix(in oklab, ${color}, ${dark ? "black" : "white"} ${by})`,
-	}),
+  shade: fn({
+    args: ["<color>", { "by?": "<percentage>", "dark?": arg<boolean>() }],
+    label: "tint.shade",
+    value: ([color, { by = "10%", dark }]) =>
+      `color-mix(in oklab, ${color}, ${dark ? "black" : "white"} ${by})`,
+  }),
 }).export();
 
 shade("red");
@@ -791,10 +978,17 @@ import { frame } from "cssints/frame" with { type: "cssints" };
 const radius = css.token.length("12px", "radius-lg");
 
 // radius 24px, padding 16px, border 1px: the field inside gets 24 - 16 - 1 = 7px
-export const card = css.cn(frame().radius("1.5rem").padding(4).border("1px"), css.bg("white"), css.borderColor("#9ca3af"));
+export const card = css.cn(
+  frame().radius("1.5rem").padding(4).border("1px"),
+  css.bg("white"),
+  css.borderColor("#9ca3af"),
+);
 export const field = css.cn(frame().padding(2).border("1px"), css.borderColor("#9ca3af"));
 // a token is a length; a condition just sets the custom property, and the whole subtree follows
-export const panel = css.cn(frame().radius(radius).padding(2), css.media("(width >= 40rem)")(frame().padding(6)));
+export const panel = css.cn(
+  frame().radius(radius).padding(2),
+  css.media("(width >= 40rem)")(frame().padding(6)),
+);
 
 export const noNumber = frame().radius(4); // error: a bare number is a spacing step in padding and margin only
 export const noPercent = frame().padding("5%"); // error: a length, not a percentage
@@ -803,7 +997,7 @@ export const own = frame().color("red"); // error: a frame chains its own method
 ```
 
 - **Methods**, each once and in any order: `radius(<length>)`, `padding(<length> | step)`, `border(<length>)` (a width; the style is `solid`), `margin(<length> | step)`. `radius` is the radius of the outermost frame; inside a frame it is ignored (the radius is computed). A lone number in `padding` and `margin` is a step of the spacing scale (0.25rem). Tokens go anywhere a length does.
-- **Build errors** (at the call site): a negative radius, padding or border, a percentage, and a `cn()` that holds `frame()` and a property it sets: `padding*`, `margin*`, `border-radius` and its corners, `border`, `border-width`, `border-style` and the border sides (`cssints: frame: frame() sets padding, margin, border-radius and the border: use its methods (this style also sets padding)`). Border colours (`borderColor`, `borderTopColor`) are plain styles and do not conflict. Conflicts across `cx()` are not seen, as for any plugin.
+- **Build errors** (at the call site): a negative radius, padding or border, a percentage, and a `cn()` that holds `frame()` and a property it sets: `padding*`, `margin*`, `border-radius` and its corners, `border`, `border-width`, `border-style` and the border sides (`cssints: frame: frame() sets padding, margin, border-radius and the border: use its methods (this style also sets padding)`). Border colours (`borderColor`, `borderTopColor`) are plain styles and do not conflict. Conflicts with an opaque runtime string in `cn()` are not seen, as for any plugin.
 - **What it emits:** the class `_frame-core` and one class per method (`._x{--frame-p:0.5rem}`, in `_.a`, or `_.b` inside a condition). The kernel `frame.core` (about 1.2 kB minified with its registrations and fallback, once, in `_.k`) is two `@container style(--frame-c: ...)` rules that alternate two names, because a property cannot read itself; the `@property` rules of its custom properties (`--frame-*`) are at the top of the sheet. The names are the scope's own (`--_x` in the source is `--frame-x`, `&` is `_frame-core`), which is why they are longer than the `--fr-*` and `_f` of the helpers it was first written on. The inputs are registered lengths, so `em`, `calc()` and tokens reach the child as exact lengths (an `em` padding is the parent's `em`, not the child's). The 24-line kernel for px and rem only was not chosen: `@property` is the floor of the runtime anyway, and the registered one costs about 0.2 kB more.
 - **Browsers.** The kernel needs `@container style()` on custom properties (Chrome 111, Safari 18, Firefox 151) and `@property` (Chrome 85, Safari 16.4, Firefox 128). For a target that has `@property` and lacks style queries the build ships the fallback instead: `polyfills: ["css.at-rules.container.style_queries_for_custom_properties"]` and `cssints/parent-vars` (about 1 kB gzip, shared with other plugins), which copies each frame's inner radius to its frame children, and the fallback CSS. The script probes the browser and stays off where style queries work. Below `@property` (Firefox 127, Safari 16.3) the kernel is a build warning and nothing is shipped: a frame keeps no concentric radius there.
 - **Limits of the runtime.** It costs about two or three times the style-query kernel on a first pass (190 ms for 5 500 nested frames in Firefox 128); a `transition` of your own on a frame replaces the sentinel that lets `:hover`, media and container conditions reach the script (the script still follows class and style changes); shadow roots are not crossed; a first paint before the script runs shows declared radii.
@@ -830,8 +1024,8 @@ export const noValue = surface().ink("black"); // error: ink() takes no value
 export const own = surface().radius("4px"); // error: a surface chains its own methods only
 ```
 
-- **Methods**, each once and in any order: `color(<color> | token)` is an absolute base (without it the base is the nearest surface around, or `Canvas` for the outermost); `lighten(step)`, `darken(step)` and `contrast(step)` move the lightness of the base by a `<number [0,1]>`, and only one of the three goes in a chain; `ink()` sets the text colour to black or white by the lightness of the surface (above 0.5636 black, else white). `contrast` moves *away* from the parent: a light parent is darkened, a dark one lightened. The base may be a relative colour (`oklch(from var(--brand) l c h)`).
-- **Build errors** (at the call site): a step outside 0 to 1, a bad colour, a method used twice or with another step, and a `cn()` that holds `surface()` and `background` or `background-color`, `bg()` included (`cssints: surface: surface() sets the background colour: use its methods (this style also sets background-color)`). `backgroundImage`, `color` and the border colours do not conflict. Conflicts across `cx()` are not seen, as for any plugin.
+- **Methods**, each once and in any order: `color(<color> | token)` is an absolute base (without it the base is the nearest surface around, or `Canvas` for the outermost); `lighten(step)`, `darken(step)` and `contrast(step)` move the lightness of the base by a `<number [0,1]>`, and only one of the three goes in a chain; `ink()` sets the text colour to black or white by the lightness of the surface (above 0.5636 black, else white). `contrast` moves _away_ from the parent: a light parent is darkened, a dark one lightened. The base may be a relative colour (`oklch(from var(--brand) l c h)`).
+- **Build errors** (at the call site): a step outside 0 to 1, a bad colour, a method used twice or with another step, and a `cn()` that holds `surface()` and `background` or `background-color`, `bg()` included (`cssints: surface: surface() sets the background colour: use its methods (this style also sets background-color)`). `backgroundImage`, `color` and the border colours do not conflict. Conflicts with an opaque runtime string in `cn()` are not seen, as for any plugin.
 - **What it emits:** the class `_surface-core` and one class per method (`._x{--surface-d:0.06}`, in `_.a`, or `_.b` inside a condition: a `hover()` or a media query moves every surface below). The kernel `surface.core` (about 1 kB minified with its registrations and fallback, once, in `_.k`) is two `@container style(--surface-p: ...)` rules that alternate two registered `<color>` properties, `--surface-e` and `--surface-o`, because a property cannot read itself; the step `--surface-d` is not registered, since it may contain `l`, which only means something inside `oklch(from …)`. Its names are `--surface-*`; frame's are `--frame-*`, so a frame and a surface can be one element, or nest in each other, with no collision.
 - **Not a contrast guarantee.** A lightness threshold of 0.5636 gives 4.6:1 at the worst on greys, but 3.7:1 on 3 000 random chromatic colours (research, Chrome). `ink()` on a saturated surface can fall short of WCAG AA. For a ratio, declare the colours as tokens and use `css.check.contrast` (see Themes): it checks the declared pair at build time, which the kernel cannot do because it never sees the parent.
 - **Browsers.** The kernel needs `@container style()` on custom properties (Chrome 111, Safari 18, Firefox 151), `@property` (Chrome 85, Safari 16.4, Firefox 128) and relative colour (Chrome 122, Safari 18, Firefox 128). Chrome 119 to 121 and Safari 16.4 to 17.6 have an early relative colour with other channel scales: the steps come out wrong (in Chrome `l` is a number from 0 to 100), so the kernel's `requires` asks for the whole feature (`exact`, see Plugins) and a target set that holds one of them gets the warning. Safari 17 has no style queries, so it gets the runtime as well, which does not change the steps; Chrome 120 has style queries and gets no runtime, only the warning. For a target that has `@property` and relative colour but lacks style queries (Firefox 128 to 150) the build ships the same fallback as `frame()`: the shared `cssints/parent-vars` script (one observer however many plugins use it) copies each surface's colour to its surface children. A surface that is also a frame needs both transition sentinels, so the fallback has a rule for `._surface-core._frame-core` (the surface scope embeds the frame scope for that class: `&(frame.core)`). Below `@property` or relative colour the kernel is a build warning: a surface keeps no tonal step there.
@@ -847,8 +1041,8 @@ import { icons } from "@cssints/icons" with { type: "cssints" };
 
 // icons.ts: a build-time module (it runs while the build runs, and never reaches the browser)
 export const mdi = icons<typeof import("@iconify-json/mdi/icons.json")>({
-	provider: "iconify-json",
-	collection: "mdi",
+  provider: "iconify-json",
+  collection: "mdi",
 });
 export const brand = icons({ provider: "fs", dir: "src/icons" });
 
@@ -860,12 +1054,20 @@ export const typo = mdi("clos"); // error: not an icon of mdi
 
 ```css
 /* kernel icons.mask, layer _.k; LightningCSS adds -webkit-mask for your targets */
-._icons-mask { display: inline-block; width: 1em; height: 1em; background-color: currentColor; mask: var(--icons-svg) no-repeat center / 100% 100%; }
+._icons-mask {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  mask: var(--icons-svg) no-repeat center / 100% 100%;
+}
 /* the only per-icon rule */
-._x1 { --icons-svg: url("data:image/svg+xml,%3Csvg …"); }
+._x1 {
+  --icons-svg: url("data:image/svg+xml,%3Csvg …");
+}
 ```
 
-- **`icons({ provider: "iconify-json", collection })`** reads `@iconify-json/<collection>/icons.json` from the `node_modules` of the working directory, while the module runs. **`icons({ provider: "fs", dir })`** reads `<dir>/<name>.svg` (`dir` is relative to the working directory; the SVG needs a `viewBox`). The result is a function of the icon name: `mdi("home")` is a style that goes into `cn()`, `cx()` and the conditions like any member. Call `icons()` in a module of its own, imported with the attribute, as above.
+- **`icons({ provider: "iconify-json", collection })`** reads `@iconify-json/<collection>/icons.json` from the `node_modules` of the working directory, while the module runs. **`icons({ provider: "fs", dir })`** reads `<dir>/<name>.svg` (`dir` is relative to the working directory; the SVG needs a `viewBox`). The result is a function of the icon name: `mdi("home")` is a style that goes into `cn()` and the conditions like any member. Call `icons()` in a module of its own, imported with the attribute, as above.
 - **Names.** TypeScript cannot read a module type from a string, so the names of a collection come from the type argument: `icons<typeof import("@iconify-json/mdi/icons.json")>(…)` types `mdi(name)` as the icons and aliases of that collection, and a typo is an error in the editor. Without the type argument, and for `fs`, a name is any string. In every case a name that does not exist is a build error at the call, with the nearest name when it is close: `cssints: icons: no icon "hom" in iconify-json mdi, did you mean home?`.
 - **Mask or image.** An icon that paints with `currentColor` (every one-colour icon of a collection) gets the marker `_icons-mask` and takes the text `color`. Any other (a logo with its own colours) gets `_icons-image`, a background image. This is iconify's own rule. A non-square icon is centred on a square view box, so `width` and `height` set its size (`1em` by default).
 - **Cost.** The kernel is printed once. Each icon adds one class, and the same icon is the same class everywhere. The kernel has no `requires`: LightningCSS adds `-webkit-mask` for targets that have only the prefixed form.
@@ -876,24 +1078,24 @@ export const typo = mdi("clos"); // error: not an icon of mdi
 
 More plugins on `scope()`, each a package of its own with its rules and limits in its README. Import them with the attribute, like `cssints`.
 
-| Package | Members | What it does |
-|---|---|---|
-| [`@cssints/fluid`](../packages/fluid/README.md) | `fluid(min, max, { from?, to?, zoom? })`, `fluid.container(...)` | A `clamp()` that grows between two widths, computed at build time; a range that fails WCAG 1.4.4 is a build error |
-| [`@cssints/layout`](../packages/layout/README.md) | `stack()`, `cluster()`, `sidebar()`, `switcher()`, `cover()`, `autoGrid()` | Every Layout primitives as chain members |
-| [`@cssints/fonts`](../packages/fonts/README.md) | `font(family, { provider, ... })` → `.family()`, `.trim()` | `@font-face` and a metric-matched fallback face; cap-height trimming by `text-box`, else capsize's margins |
-| [`@cssints/reset`](../packages/reset/README.md) | `reset({ media?, prose? })` | A modern reset in a top-level `@layer reset` declared before the engine's, below every style |
-| [`@cssints/tokens`](../packages/tokens/README.md) | `/open-props`, `/radix`, `/flexoki`, `/reasonable-colors` | DTCG data for `createTokens` |
-| [`@cssints/gradient`](../packages/gradient/README.md) | `gradient(kind, direction, from, to, easing?, stops?)` | Eased colour stops mixed in oklab at build time |
-| [`@cssints/motion`](../packages/motion/README.md) | `motion().preset().duration().delay().easing()` | Animation presets over `keyframes()`, with reduced motion |
-| [`@cssints/squircle`](../packages/squircle/README.md) | `squircle().radius()` | `corner-shape: squircle`, else a CSS `mask` of the same shape |
-| [`@cssints/reveal`](../packages/reveal/README.md) | `reveal().preset().range().duration().easing()` | motion's entrance presets on `animation-timeline: view()`; for other targets a script plays it once on entry (delivered by the runtime) |
-| [`@cssints/stuck`](../packages/stuck/README.md) | `sticky().top()`, `stuck(styles)`, `stuck("bottom")(styles)` | Styles inside a sticky element while it is stuck, by `@container scroll-state()`; for other targets an `IntersectionObserver` (delivered by the runtime) |
-| [`@cssints/balance`](../packages/balance/README.md) | `balance()`, `pretty()` | `text-wrap: balance` / `pretty`; for targets without balance a script balances the lines (delivered by the runtime) |
-| [`@cssints/masonry`](../packages/masonry/README.md) | `masonry().columns().gap()` | `display: grid-lanes`, else CSS `columns` (top to bottom per column) |
-| [`@cssints/placeholder`](../packages/placeholder/README.md) | `placeholder(path, { mode? })` | An `<image>` from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG |
-| [`@cssints/ramp`](../packages/ramp/README.md) | `ramp(base, { mode, steps \| ratios, background })`, `overrides(ramp)` | An OKLCH palette as DTCG data for `createTokens`; the contrast mode meets each ratio against its background |
-| [`@cssints/rybitten`](../packages/rybitten/README.md) | `color(hue, { cube })`, `wheel(steps, { cube })`, `shades(hue, lightness)`, `overrides(group)` | RYBitten's red-yellow-blue colours (36 historical cubes) as DTCG data for `createTokens`: a hue, a wheel of hues, a hue at several lightnesses |
-| [`@cssints/skeleton`](../packages/skeleton/README.md) | `skeleton().radius().color().highlight()` | Loading placeholders whose shimmer is in phase across the page (one clock on `:root`), static under reduced motion |
+| Package                                                     | Members                                                                                        | What it does                                                                                                                                                              |
+| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@cssints/fluid`](../packages/fluid/README.md)             | `fluid(min, max, { from?, to?, zoom? })`, `fluid.container(...)`                               | A `clamp()` that grows between two widths, computed at build time; a range that fails WCAG 1.4.4 is a build error                                                         |
+| [`@cssints/layout`](../packages/layout/README.md)           | `stack()`, `cluster()`, `sidebar()`, `switcher()`, `cover()`, `autoGrid()`                     | Every Layout primitives as chain members                                                                                                                                  |
+| [`@cssints/fonts`](../packages/fonts/README.md)             | `font(family, { provider, ... })` → `.family()`, `.trim()`                                     | `@font-face` and a metric-matched fallback face; cap-height trimming by `text-box`, else capsize's margins                                                                |
+| [`@cssints/reset`](../packages/reset/README.md)             | `reset({ media?, prose? })`                                                                    | A modern reset in a top-level `@layer reset` declared before the engine's, below every style; `@cssints/reset/<baseline group>` keeps only the declarations of that group |
+| [`@cssints/tokens`](../packages/tokens/README.md)           | `/open-props`, `/radix`, `/flexoki`, `/reasonable-colors`                                      | DTCG data for `createTokens`                                                                                                                                              |
+| [`@cssints/gradient`](../packages/gradient/README.md)       | `gradient(kind, direction, from, to, easing?, stops?)`                                         | Eased colour stops mixed in oklab at build time                                                                                                                           |
+| [`@cssints/motion`](../packages/motion/README.md)           | `motion().preset().duration().delay().easing()`                                                | Animation presets over `keyframes()`, with reduced motion                                                                                                                 |
+| [`@cssints/squircle`](../packages/squircle/README.md)       | `squircle().radius()`                                                                          | `corner-shape: squircle`, else a CSS `mask` of the same shape                                                                                                             |
+| [`@cssints/reveal`](../packages/reveal/README.md)           | `reveal().preset().range().duration().easing()`                                                | motion's entrance presets on `animation-timeline: view()`; for other targets a script plays it once on entry (delivered by the runtime)                                   |
+| [`@cssints/stuck`](../packages/stuck/README.md)             | `sticky().top()`, `stuck(styles)`, `stuck("bottom")(styles)`                                   | Styles inside a sticky element while it is stuck, by `@container scroll-state()`; for other targets an `IntersectionObserver` (delivered by the runtime)                  |
+| [`@cssints/balance`](../packages/balance/README.md)         | `balance()`, `pretty()`                                                                        | `text-wrap: balance` / `pretty`; for targets without balance a script balances the lines (delivered by the runtime)                                                       |
+| [`@cssints/masonry`](../packages/masonry/README.md)         | `masonry().columns().gap()`                                                                    | `display: grid-lanes`, else CSS `columns` (top to bottom per column)                                                                                                      |
+| [`@cssints/placeholder`](../packages/placeholder/README.md) | `placeholder(path, { mode? })`                                                                 | An `<image>` from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG                                              |
+| [`@cssints/ramp`](../packages/ramp/README.md)               | `ramp(base, { mode, steps \| ratios, background })`, `overrides(ramp)`                         | An OKLCH palette as DTCG data for `createTokens`; the contrast mode meets each ratio against its background                                                               |
+| [`@cssints/rybitten`](../packages/rybitten/README.md)       | `color(hue, { cube })`, `wheel(steps, { cube })`, `shades(hue, lightness)`, `overrides(group)` | RYBitten's red-yellow-blue colours (36 historical cubes) as DTCG data for `createTokens`: a hue, a wheel of hues, a hue at several lightnesses                            |
+| [`@cssints/skeleton`](../packages/skeleton/README.md)       | `skeleton().radius().color().highlight()`                                                      | Loading placeholders whose shimmer is in phase across the page (one clock on `:root`), static under reduced motion                                                        |
 
 ### Publishing a library (decided 2026-10-02, cssints-0l3f)
 
@@ -919,7 +1121,7 @@ import { t } from "my-ui" with { type: "cssints" };
 createGlobalTheme(t, ".dark", { color: { brand: "#ef4444" } });
 ```
 
-- **Build with tsdown** (`vp pack`), with `cssints` external and `dts: true`. tsdown keeps the import attributes, so there is no option to set. It also merges `import { cx } from "cssints"` into the attributed import of the same module; the engine reads `cx` as runtime wherever it is written, so that is fine. The built `.d.ts` types `button` as `(props?: …) => string`, with the props of its variants. Do not minify, bundle or transform the JS further with a tool that drops import attributes, and do not bundle `cssints` into it.
+- **Build with tsdown** (`vp pack`), with `cssints` external and `dts: true`. tsdown keeps the import attributes, so there is no option to set. The built `.d.ts` types `button` as `(props?: …) => string`, with the props of its variants. Do not minify, bundle or transform the JS further with a tool that drops import attributes, and do not bundle `cssints` into it.
 - **Keep in the package:** `cssints` in `peerDependencies` (the app needs it to build; a library that imports it must list it), the JS with the attributes, the `.d.ts` (it types `cssints` members as class strings and tokens as tokens, so the app is checked across the boundary), and no `.css` file: the library has no sheet of its own.
 - **The app needs cssints and its plugin.** The package has no classes until the app's `cssints()` plugin has evaluated it, so an app without cssints cannot use it. Pre-compiled output (class strings plus a sheet fragment for apps without cssints) is not supported yet; it waits for a first user.
 - **The package must be a direct dependency of the app.** `cssints/vite` reads the `package.json` of the app and of each of its dependencies, and for a dependency that lists `cssints` it adds the package to `optimizeDeps.exclude` (the dev optimizer would pre-bundle it with esbuild and drop the attributes) and to `ssr.noExternal` (the engine's runner would otherwise load it as native Node, which does not know the attribute). This is a few file reads at startup, one per dependency, and nothing else. A package that is only a dependency of another package is not found; add it to the app's own dependencies (or to those two options).
@@ -946,7 +1148,7 @@ In dev the sheet has a source map: each rule with a class points at the first `c
 export default defineConfig({ plugins: [cssints()], css: { devSourcemap: true } });
 ```
 
-A class is a hash of its declaration, so a class that many calls share points at its first call in the module that comes first by path. The place is the whole site (`cn(...)`, `cx(...)`), not the argument inside it. Token, theme and `@property` rules carry no class and map nowhere.
+A class is a hash of its declaration, so a class that many calls share points at its first call in the module that comes first by path. The place is the whole site (`cn(...)`, a member call), not the argument inside it. Token, theme and `@property` rules carry no class and map nowhere.
 
 A build maps the sheet too, when the app asks for maps (`build: { sourcemap: true }`, `"hidden"` or `"inline"`, as for its JS): the CSS asset that holds the sheet gets `<file>.css.map` and a `sourceMappingURL` comment (`"hidden"`: the file only; `"inline"`: a data URL). Vite writes no CSS map in a build, so cssints maps the asset as written, after LightningCSS and the minify: each rule with a class points at its call, the rest maps nowhere. Bundle analysers read it to split the sheet's bytes by module (docs/research/devtools.md: Sonda). Without `build.sourcemap` nothing is recorded and the output is unchanged. Devtools that read the CSSOM (atomic-css-devtools) see the sheet as any other; what they miss is in docs/research/devtools.md.
 
@@ -980,7 +1182,8 @@ TOKENS
   the initial value of its @property
 ```
 
-- **Classes by call.** The element's classes, grouped by the `css.*` call that made them (`cn(...)`, `cx(...)`, a member), the call that covers most of them first; the link opens the file at that line through Vite's `/__open-in-editor`, and the call's source is shown under it. Each class shows its declarations, its conditions (green: holds now) and its layer; a marker shows its kernel (`marker of kernel frame.core`), a member's class its scope (`(frame)`); a class that is not cssints' is listed as such.
+- **Classes by call.** The element's classes, grouped by the `css.*` call that made them (`cn(...)`, a member), the call that covers most of them first; the link opens the file at that line through Vite's `/__open-in-editor`, and the call's source is shown under it. Each class shows its declarations, its conditions (green: holds now) and its layer; a marker shows its kernel (`marker of kernel frame.core`), a member's class its scope (`(frame)`); a class that is not cssints' is listed as such.
+- **Readable classes (dev only, decided 2026-10-12, cssints-12tp).** With `devtools` on in the dev server, the plugin adds one class to the string of each `cn(...)` and `cv({...})` site, to find an element in the DOM inspector and in the panel: `cs-<owner>[-<label>]`. The owner is the nearest enclosing function or class with a PascalCase name (`Landing`, `Button`), else the file's name (`page` for `landing/page.ts`; `index.ts` takes its folder's). The label is what the call is assigned to: a variable, an object property, a class field or method, a helper function that returns it, or a JSX attribute other than `class` and `className` (`<Tone tone={cn(...)}>` gives `cs-Button-tone`); no label if there is none. So `const logo = cn(...)` at the top of `landing/page.ts` gives `cs-page-logo`, inside `function Landing()` `cs-Landing-logo`, and `<div class={cn(...)}>` in `Button` `cs-Button`. Only `[A-Za-z0-9_-]`, an owner and a label cut at 24 and 20 characters. The name comes from where the call stands, so editing code elsewhere does not change it; two calls in one place can share a name. A call whose shape has no name to read still gets its file's name; a `css.p(4)` or other member on its own, and a `cn` inside the runtime arguments of another `cn`, get none. The `cs-` prefix keeps it off the app's own classes. It is text in the module the browser gets and nothing else: not in the hashes, the dedupe, the `drops` of a `cn` with runtime arguments or of a `cv` (it stays a static class, never dropped), the sheet or the table. The panel shows it first in its bar and in the hover tag, and the prompt's `Classes:` line lists it with the others. A build, a dev server without `devtools`, and the `ssr` environment (where the plugin evaluates; its modules hold calls, not class strings) are byte-identical to before.
 - **Properties.** Per property, the winning declaration, what it beat (struck through) and what does not apply now, with the condition that fails. The winner is the highest by **layer, then specificity, then the sheet's order**, among the rules that apply: a rule applies when its selector matches the element now and each of its at-rules holds for it, which the browser decides (a probe sheet around the element, so `@container`, `@container style()`, `@supports` and `@scope` are evaluated where the element is). A shorthand counts for each of its longhands: `padding` beside a `padding-left` of a higher layer says `except padding-left`. Kernels and global rules in `_.k`, themes and looks in their layers are rules like the others.
 - **Checked against the browser.** Each winner is set inline on a childless clone of the element, in its place, and the clone's computed value must equal the element's: ✓. When it does not (✗), the panel says why: the element's `style` attribute, a rule of another sheet (a rule outside every layer beats every layer, cssints' too: `.mine { color: … } in src/inspect.css beats it`), or a running animation. A value that depends on the element's content (`width: auto`, grid tracks) is `?`, not checked. A custom property is checked with its declaration as the page's sheet has it, since LightningCSS reprints it (`0.04` as `.04`) and an unregistered one computes to its tokens as written (cssints-g3u1).
 - **Tokens.** Each custom property the element's rules read: its value on the element, its path (`color.surface`), and the rule that sets it on the element or the nearest ancestor (a theme, a look in `@scope`, a member's class).
@@ -994,7 +1197,7 @@ TOKENS
   // or: opencode: { agent: "build", skills: ["cssints"] }
   ```
 
-  The dev server, never the page, talks to the OpenCode V2 service that is running on the machine (the one `opencode serve --service` and the desktop app register; found with `Service.discover` of `@opencode/client`, so the page holds no address and no credentials). It creates a session in the workspace root (the nearest folder up from the Vite root with a `.git`), sends the prompt, waits for the session to end, and tells the overlay the status over the same HMR channel (`cssints:devtools:ask` from the page, `cssints:devtools:asked` back: no route that another origin could post to). The box shows `sending`, then `running · ses_…`, then `completed`, `failed` or `interrupted`; with no service running it says so and keeps your text. `@opencode/client` is an optional peer dependency: install it in the app (the message names it when it is missing). The prompt is made of cssints' own data, not source markers added to the markup, and is bounded (8 call sites, 24 properties, 3 beaten declarations each, 12 tokens, a call cut at 400 characters; the server cuts the whole at 16000):
+  The dev server, never the page, talks to the OpenCode V2 service that is running on the machine (the one `opencode serve --service` and the desktop app register; found with `Service.discover` of `@opencode/client`, so the page holds no address and no credentials). It sends the prompt to the session that the OpenCode command `/cssints-devtools` attached to this dev server (the plugin is `@cssints/devtools/opencode`, loaded from `.opencode/plugins/`; the files they share are in `<repository>/node_modules/.cache/cssints-devtools/`), or, with none attached, creates a session in the workspace root (the nearest folder up from the Vite root with a `.git`) and sends it there, waits for the session to end, and tells the overlay the status over the same HMR channel (`cssints:devtools:ask` from the page, `cssints:devtools:asked` back: no route that another origin could post to). The box shows `sending`, then `running · ses_…`, then `completed`, `failed` or `interrupted`; with no service running it says so and keeps your text. `@opencode/client` is an optional peer dependency: install it in the app (the message names it when it is missing). The prompt is made of cssints' own data, not source markers added to the markup, and is bounded (8 call sites, 24 properties, 3 beaten declarations each, 12 tokens, a call cut at 400 characters; the server cuts the whole at 16000):
 
   ```text skip
   Change the UI of the running app as the instruction says.
@@ -1020,6 +1223,7 @@ TOKENS
   ```
 
   A build has none of it: the server side is in the `apply: "serve"` plugin, and `devtools: "build"` with `opencode` on still gives a loader without a way to ask (the dormant box is part of the overlay chunk, about 1 kB). The idea and the V2 client calls follow brendonovich/vite-plugin-opencode (MIT).
+
 - **Its own styles do not touch yours.** The overlay is a custom element with a shadow root and its own cssints sheet, built with the package: the page's rules do not reach it, and its classes are not in your sheet or in the table.
 - **Limits.** The proximity of `@scope` is not ranked (no two looks set one property on one element), and a logical and a physical property (`margin-inline-start`, `margin-left`) are two properties, as `cn()` treats them; an element inside another shadow root is picked as its host; a page that Vite does not serve as HTML (server rendering) gets no entry.
 
@@ -1042,7 +1246,7 @@ Jaeger takes traces only, which is all there is: a warning or an error is an eve
 
 The process must end the exporter or Node stays alive: `vite build` and `server.close()` do it (the `closeBundle` hook flushes and stops it); a script that exits by itself calls `closeTrace()` from `cssints/src/trace.ts` first. A backend that is not there costs a retry of up to three seconds at the end and loses the trace, nothing else.
 
-`packages/cssints/test/trace.mjs` (in `bun run test`) checks the spans, the file attribute and the error's trace id against an in-process collector. `node packages/cssints/test/trace-live.mjs` builds apps/sky and runs its HMR test traced, then reads both traces back through Jaeger's API (`GET /api/traces?service=cssints`) and prints span counts and the slowest hooks; it skips when no backend answers. Effect's DevTools (the VS Code extension, `effect/devtools`) is not wired: it needs the editor's extension listening, so neither a script nor an agent can read it.
+`packages/cssints/test/trace.mjs` (in `bun run test`) checks the spans, the file attribute and the error's trace id against an in-process collector. `node packages/cssints/test/trace-live.mjs` builds apps/csssky and runs its HMR test traced, then reads both traces back through Jaeger's API (`GET /api/traces?service=cssints`) and prints span counts and the slowest hooks; it skips when no backend answers. Effect's DevTools (the VS Code extension, `effect/devtools`) is not wired: it needs the editor's extension listening, so neither a script nor an agent can read it.
 
 ### Checks for tools: `cssints/check` (2026-10-09, cssints-p3d2)
 
@@ -1066,17 +1270,19 @@ A terminal app writes its styles with `cssints/tui`, and the same Vite plugin co
 ```ts
 import * as css from "cssints/tui" with { type: "cssints" };
 
-const t = css.createTokens({ color: { $type: "color", bg: { $value: "#1e1e2e" }, accent: { $value: "#89b4fa" } } });
+const t = css.createTokens({
+  color: { $type: "color", bg: { $value: "#1e1e2e" }, accent: { $value: "#89b4fa" } },
+});
 css.createGlobalTheme(t, "light", { color: { bg: "#eff1f5", accent: "#1e66f5" } });
 
 export const button = css.cn(
-	css.border("rounded", "#585b70"),
-	css.p(0, 1),
-	css.width(12),
-	css.bg(t.color.bg),
-	css.cursor("pointer"),
-	css.hover(css.borderColor(t.color.accent)),
-	css.active(css.borderStyle("double")),
+  css.border("rounded", "#585b70"),
+  css.p(0, 1),
+  css.width(12),
+  css.bg(t.color.bg),
+  css.cursor("pointer"),
+  css.hover(css.borderColor(t.color.accent)),
+  css.active(css.borderStyle("double")),
 );
 css.width("10rem"); // error: a terminal counts cells
 css.boxShadow("0 0 1px red"); // error: no such member in a terminal
@@ -1084,13 +1290,30 @@ css.color("blu"); // error: not a colour
 ```
 
 ```ts skip
-export const button = { border: true, borderStyle: "rounded", borderColor: "#585b70", paddingTop: 0, paddingRight: 1, paddingBottom: 0, paddingLeft: 1, width: 12, backgroundColor: "#1e1e2e", cursor: "pointer", ":hover": { borderColor: "#89b4fa" }, ":active": { border: true, borderStyle: "double" }, themes: { light: { backgroundColor: "#eff1f5", ":hover": { borderColor: "#1e66f5" } } }, vars: { backgroundColor: "color-bg", ":hover": { borderColor: "color-accent" } } };
+export const button = {
+  border: true,
+  borderStyle: "rounded",
+  borderColor: "#585b70",
+  paddingTop: 0,
+  paddingRight: 1,
+  paddingBottom: 0,
+  paddingLeft: 1,
+  width: 12,
+  backgroundColor: "#1e1e2e",
+  cursor: "pointer",
+  ":hover": { borderColor: "#89b4fa" },
+  ":active": { border: true, borderStyle: "double" },
+  themes: { light: { backgroundColor: "#eff1f5", ":hover": { borderColor: "#1e66f5" } } },
+  vars: { backgroundColor: "color-bg", ":hover": { borderColor: "color-accent" } },
+};
 ```
 
 ```tsx skip
 import { attach, setTheme, use } from "@cssints/tui/opentui";
 
-<box {...use(button)}><text>Save</text></box>; // Solid or React: the spread is a ref that calls attach
+<box {...use(button)}>
+  <text>Save</text>
+</box>; // Solid or React: the spread is a ref that calls attach
 <text {...use(() => (active() ? tabActive : tab))}>Home</text>; // a style that changes: an accessor
 attach(new BoxRenderable(renderer, {}), button); // core
 setTheme("light");
@@ -1102,6 +1325,7 @@ setTheme("light");
 - **Colours** are checked by the web's `color` grammar in the types, read at build time and written as `#rrggbb` (`#rrggbbaa` when translucent). `currentColor`, system colours and `light-dark()` are build errors.
 - **`cn()`** merges in argument order (a later prop wins). States wrap styles and do not nest; the runtime lays `:hover`, then `:focus`, then `:active` over the props.
 - **Themes.** A theme is named by its selector argument (`"light"`). Every colour token is resolved at build time, per theme, aliases and derived tokens included; the site holds the default values and, under `themes`, what each theme changes. `setTheme(name)` swaps them on every attached renderable; `""` is the default. A theme under `media()` is not read.
+- **Terminal tokens are not the sheet's** (cssints-0s1z, 2026-10-11). The `createTokens` and `createGlobalTheme` of `cssints/tui` keep their tokens and themes in tables of their own: no `@property` rule, no `:root` rule and no theme reaches a stylesheet, and a web token of the same name in the same build (`--color-bg` of the site and of a terminal app) is another token, with no clash. A terminal style reads terminal tokens and themes only; a web style reads web ones only. Two terminal modules that give one token name two values are an error, as on the web (`--color-bg is already declared with another @property`). A set of one `createTokens` given to the other's `createGlobalTheme` is a build error at the call that names the right import (`these are web tokens of "cssints": theme them with the createGlobalTheme of "cssints"`, and the other way round; 2026-10-11, cssints-v872). A token set still ships as `var(--name)` strings, which the system theme reads.
 - **The adapter.** `attach(renderable, style)` sets the props (`color` is OpenTUI's `fg`, the text attributes are the bits of `attributes`, the caret is an editable's `cursorStyle` and `cursorColor`), follows `over`/`out`, `down`/`up` and `focused`/`blurred`, and sets the mouse pointer of `cursor` on over and `default` on out. A prop the renderable lacks is not set. A focused renderable draws colours of its own (a box `focusedBorderColor`, also while a descendant has the focus; an editable or a select `focusedBackgroundColor` and `focusedTextColor`): each follows the style's `borderColor`, `backgroundColor` and `color` in the current state, theme included, so a focused box draws its `:focus` border, not OpenTUI's `#00AAFF` (2026-10-10, cssints-pkpg). On an editable or a select, `color` is `textColor`. A text node (`<span>`, `<a>`, `<b>` of `@opentui/solid`: a `TextNodeRenderable`) takes the props (`fg`, `bg`, `attributes`) and the theme, not the states: it has no mouse events and no focus, so `:hover` belongs on the `<text>` around it; its theme listener stops when it is destroyed, as `@opentui/solid` does with what it removes (2026-10-10, cssints-5vnf). To change the style of a renderable, attach it again: `attach(r, next)` on a renderable it has attached swaps the style and keeps the states, the theme and the hooks; a prop only the old style set goes back to the renderable's own value (OpenTUI's default, or the element's own prop), the `focused*` colours follow, and under the mouse the pointer turns to the new `cursor` (or `default`). `use()` takes a style or an accessor, `use(() => (active() ? a : b))`: Solid calls a ref in a render effect, so the signals the accessor reads run it again and each run swaps the style; React calls the new ref of each render, which swaps it too and no longer stacks the hooks. The adapter imports no framework (2026-10-10, cssints-332g). `resolve(style, state, theme)` of `@cssints/tui` is the renderer-neutral part, for other adapters.
 - **The bomb.sh adapter** (cssints-kotl, 2026-10-10). `@cssints/tui/bomb` is for [@bomb.sh/tty](https://bomb.sh/docs/tty/api/), where a frame is a list of ops: `createTracker()` gives `ui.open(id, style, extra?)` and `ui.text(content, style, id?, extra?)`, the ops with the options of the style in the state of that element id, and `ui.render(term, build, { pointer })`, which reads the frame's `pointerenter`/`pointerleave` events and a press of `pointer.down`, draws the frame again when a state changed, and adds the OSC 22 pointer of `cursor` and the caret (DECSCUSR, OSC 12) of the element of `ui.focus(id)`; `ui.reset()` gives them back on exit. Sizes are `fixed`, `percent`, `fit`, and `grow` for `flexGrow`; `rounded` is a corner radius; `double` and `heavy` are drawn single; margins, `flexShrink`, `flexBasis`, `flexWrap`, `alignSelf`, `opacity` and `space-*` are not drawn (the table is in research/tui.md). `openProps(props)` and `textProps(props)` are the plain mapping of `resolve()`.
 
@@ -1122,14 +1346,18 @@ process.stdout.write(ui.render(term, build, { pointer: { x, y, down } }).output)
 import { createSystemTheme } from "@cssints/tui/system";
 import { t } from "./styles.ts";
 
-export const system = createSystemTheme(t, {
-	color: {
-		bg: { surface: true },
-		card: { surface: true, on: [t.color.bg], contrast: 1.1 },
-		text: { hue: "fg", on: [t.color.bg, t.color.card], contrast: 7 },
-		accent: { hue: "blue", on: [t.color.bg, t.color.card], contrast: 3 },
-	},
-}, { themes: { light: "light" } });
+export const system = createSystemTheme(
+  t,
+  {
+    color: {
+      bg: { surface: true },
+      card: { surface: true, on: [t.color.bg], contrast: 1.1 },
+      text: { hue: "fg", on: [t.color.bg, t.color.card], contrast: 7 },
+      accent: { hue: "blue", on: [t.color.bg, t.color.card], contrast: 3 },
+    },
+  },
+  { themes: { light: "light" } },
+);
 
 // OpenTUI: renderer.getPalette() and its theme_mode event
 await followSystemTheme(await createCliRenderer(), system);
@@ -1139,7 +1367,47 @@ process.stdin.on("data", (bytes) => dispatch(input.scan(follow.feed(bytes)).even
 ```
 
 - **The theme table** (cssints-q1j3). A site holds, besides its values and static `themes`, `vars`: the token of each colour prop set to a lone token (`vars: { backgroundColor: "color-bg" }`, the name without `--`). `defineTheme(name, values, base)` of `@cssints/tui` registers a run-time theme: a colour per token name, laid over the static theme `base` for every prop with a token; `setTheme(name)` selects it, and `defineTheme` of the theme in use resolves every attached renderable again. The system theme is one; static themes stay inline, since they need no registration and no import order. A colour that is not a lone token (`color-mix()` over one) keeps its static value.
-- **Cost.** A colour member costs what the same web member costs in the types (the `color` grammar); `bench/tui.ts` is 184k instantiations (tsc) for 16 calls and a token set. No terminal HMR in this version. The system theme brings culori's rgb, oklab, oklch and okhsl modes to the app (45 kB unminified in sky-tui's bundle).
+- **Live in the browser** (cssints-ey13, 2026-10-11). [The TUI page](https://cssints.dev/tui) of this site runs apps/csssky-tui's styles on `@cssints/tui/bomb` in a real terminal: Ghostty's emulator compiled to WebAssembly (ghostty-web) draws csssky's feed and thread from its recorded fixtures, with keys and the mouse. The page is the terminal: it answers the system theme's queries (OSC 10, 11, 4, `CSI ? 996 n`) from the site's display settings and reports a change of them (mode 2031), so the theme is solved again as the palette or the mode changes. OpenTUI is not shown: its renderer is native Zig over `bun:ffi`. On a change notification, `followSystemTheme` of `@cssints/tui/bomb` asks the colours again (`COLOURS` of `@cssints/tui/system`), not the scheme report: its reply is the same sequence as a notification, and asking it looped with a terminal that answers it.
+- **Cost.** A colour member costs what the same web member costs in the types (the `color` grammar); `bench/tui.ts` is 184k instantiations (tsc) for 16 calls and a token set. No terminal HMR in this version. The system theme brings culori's rgb, oklab, oklch and okhsl modes to the app (45 kB unminified in csssky-tui's bundle).
+
+### Export groups: `cssints/widely-available`, `cssints/css-grid-2`, … (decided 2026-10-11, cssints-n7z3)
+
+A group is a subpath of `cssints` that exports the members of `cssints` which a set of CSS features has, and refuses a value that holds a feature outside the set. It is the same import (`with { type: "cssints" }`), the same members, the same classes:
+
+```ts
+import { color, display, media } from "cssints/widely-available" with { type: "cssints" };
+
+export const card = [
+  display("grid"),
+  color("rebeccapurple"),
+  media("(width >= 40rem)")(color("black")),
+];
+
+display("grid-lanes"); // error: display: "grid-lanes" is not in cssints/widely-available
+color("light-dark(white, black)"); // error: color: "light-dark()" is not in cssints/widely-available
+media("(prefers-reduced-data: reduce)"); // error: @media: "prefers-reduced-data" is not in cssints/widely-available
+```
+
+```ts
+import { inlineSize } from "cssints/widely-available/with-downstream" with { type: "cssints" };
+import { color } from "cssints/baseline-2022" with { type: "cssints" };
+
+inlineSize("10rem");
+inlineSize("fit-content"); // error: inline-size: "fit-content" is not in cssints/widely-available/with-downstream
+color("rebeccapurple");
+color("color-mix(in oklab, red, blue)"); // error: color: "color-mix()" is not in cssints/baseline-2022
+```
+
+- **Baseline groups** (web-features 3.42, the status of each BCD key): `widely-available` is Baseline high, `newly-available` is high and low, `limited-availability` is everything (it is `cssints` itself, under its Baseline name) and `not-discouraged` is everything web-features does not mark `discouraged` (`clip`, the `page-break-*` aliases, `ime-mode`, `word-break: break-word`, `text-decoration-line: blink`, device media features). A feature web-features does not know is limited availability.
+- **Downstream groups** (cssints-n12x, 2026-10-11): `widely-available/with-downstream` and `newly-available/with-downstream` are the Baseline group also checked against Opera, Opera Mobile, Samsung Internet, Android WebView, UC and QQ, as `browserslist-config-baseline/with-downstream` is. A feature is in one when the Baseline group has it and every one of those browsers has it, by BCD, at the minimum version that [baseline-browser-mapping](https://www.npmjs.com/package/baseline-browser-mapping) 2.11.28 gives for the target (the rule of the support warnings: no prefix, no flag; UC and QQ are Blink, checked as Chrome at the Blink version of that build). `widely-available/with-downstream` has 520 of the 521 members (not `maskImage`: Opera has `-webkit-mask-image` only) and refuses `inline-size: fit-content` (Samsung Internet), `shape-outside: xywh()` and `prefers-contrast`; `newly-available/with-downstream` has 533 of 567 (UC and QQ are on Blink 123 and 121).
+- **Baseline years:** `baseline-2015` to `baseline-2026` (the first year web-features has to the current one) and `baseline-YYYY/with-downstream`, as `browserslist-config-baseline/YYYY` has them. `baseline-YYYY` is **cumulative**: what was Baseline (newly available, `baseline_low_date`) by the end of YYYY, so `baseline-2022` refuses `color-mix()` (2023) and `baseline-2023` refuses `light-dark()` (2024). 220 members in `baseline-2015`, 387 in `baseline-2020`, 537 in `baseline-2024`. `baseline-2026` is `newly-available` today.
+- **Spec groups** are named by the W3C shortname that @webref/css uses: `cssints/css-grid-2`, `cssints/css-color-4`, `cssints/mediaqueries-4`, `cssints/selectors-4`, … (92 of them). A group holds what the spec defines, and **a level includes the levels of its series before it**: `css-color-5` has what Color 3, 4 and 5 define, `css-color-4` has Color 3 and 4. A level is a delta (Color 5 over Color 4) or a rewrite (Media Queries 4 over 3), and "I write for Color 5" means both. What only a later level defines is refused: `css-color-4` has no `colorMix` and refuses `color-mix()`, `mediaqueries-4` refuses `prefers-color-scheme`. A group has the properties, functions, pseudo-class wrappers and conditions its spec defines, so `display` is in `css-display-4` and `gridTemplateColumns` in `css-grid-2`: import from several groups in one file.
+- **What is a member:** the properties (and their short names), the functions, the pseudo-class wrappers, `media`, `container`, `supports`, `keyframes` and `positionTry`. Everything else (`cn`, `cv`, `firstThatWorks`, `token`, `createTokens`, `createGlobalTheme`, `check`, `style`, `global`, `layers`, `attr`, `within`, `group`, the Typed OM values) is in every group. A group has no `css` object: write `import * as css from "cssints/widely-available"`.
+- **What is refused**, in the types (an error on the argument) and in the build (an error at the call), with the same words: a keyword of the property, a function (as a call of a member, or as text, in a `firstThatWorks` too), a unit (`10rch`), a media feature, a `scroll-state()` or `style()` container query and a `selector()` support query, and a property, function or condition the group does not have (`flex().gap()` is checked as `gap`). A value that is not valid CSS is still the usual error.
+- **What is not:** the types a spec only references (`<color>` in `accent-color` is any colour of any group), a feature of a module that is not in the series of the group (`css-ui-4`'s `accentColor` takes `color-mix()` as text), and what nothing attributes to a feature: the grammar of a value that no BCD key names is not narrowed. A function with no BCD key counts as limited availability. A keyword of `cursor` has the status of `cursor` (web-features counts it limited for iOS Safari, which has no pointer).
+- **Cost:** a program that does not import a group pays nothing. In one that does, a call costs about 250 instantiations more (a 105-call bench: +2.9%). The 122 subpaths add 1 MB of declarations to `dist/` (the tarball: 303 kB for the first 96 groups, 384 kB with the Baseline years and the downstream groups; a downstream group re-exports the members it shares with its Baseline group, and a group the same as another is that group, so the editor's message may name the other).
+
+`bun run groups` (in `packages/cssints`) regenerates `src/groups/<id>.ts` and `src/groups-data.ts` from web-features, @webref/css 6 (one file per level; 8 keeps the latest level of a series only) and BCD. Research and numbers: [research/groups.md](research/groups.md).
 
 ### Browser support and what 0.1 does not have