v0.16.3: native DSSL spec, and the seven bugs writing it found

native/ holds a written specification of DSSL (12 chapters, two generated appendices), the shared
vocabulary data, and a Rust crate stub. No browser implements DSSL natively; this is the spec a
browser team would implement from, checked against the engine by scripts/test-native-spec.mjs.

Writing it showed where the engine and the language disagreed. Fixed:
- an unquoted url(http://...) lost the rest of the line to the comment stripper
- a typo at the end of a token path silently resolved to its parent token
- nesting under a selector list joined the wrong way (.a, .b { .c {} } and hover {})
- a backslash did not escape a quote in a value
- a nested li (or any HTML element name) got a "did you mean link" warning
New warnings, both compile fine: an unknown @layer name, and radius: xl with no token.

Every .dssl file in the repo and every doc example resolve to identical output before and after.
Open: D-6 (registry rule across files) needs a browser test. Binaries follow in a separate commit.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

GUIDE.md

@@ -950,7 +950,7 @@ and listed, so the file you get always compiles.
 ```js
 import { DSSL } from '/dssl/index.js'     // or just use window.DSSL after boot
 
-DSSL.version                          // "0.16.2": a string, not a function
+DSSL.version                          // "0.16.3": a string, not a function
 DSSL.compile(source)                  // { ok, errors, warnings, stats, doc }: parse and resolve, no DOM
 DSSL.apply(source, { name, scope, replace })
 await DSSL.load(['a.dssl', 'b.dssl'])
@@ -985,7 +985,7 @@ Three ways to get it:
 
 1. VSCodium: open the Extensions tab, search "DSSL" and install. It is on Open VSX:
    https://open-vsx.org/extension/ehs-studio/dssl-vscode
-2. VS Code: download `dssl-vscode/dssl-vscode-0.16.2.vsix` from the repo files, then
+2. VS Code: download `dssl-vscode/dssl-vscode-0.16.3.vsix` from the repo files, then
    Extensions panel, `...`, Install from VSIX. (The Microsoft Marketplace listing is not published yet.)
 3. Build it yourself: `cd dssl-vscode && npx @vscode/vsce package --no-dependencies`.
 

PARITY.md

@@ -62,6 +62,10 @@ so the boundary is explicit, not folklore.
 - loud errors with did-you-mean, and a warnings channel for cascade-order footguns
 - `freeze()` / `unfreeze()`: a live engine that can be parked at zero cost
 
+## v0.16.3
+
+Seven places where the engine disagreed with the language are fixed: unquoted `url(http://...)`, token paths with a typo at the end, nesting under a selector list, an escaped quote in a value, and the false "did you mean link" warning on `li`. An unknown `@layer` name and `radius: xl` with no token now warn. All of them were found by writing a specification for native, JavaScript-free DSSL (`native/spec/`). A browser that implements DSSL natively does not exist yet: this is a written spec and checks, not a browser feature.
+
 ## v0.16.2
 
 `DSSL.lint`'s `css-loses` skips the output of `dssl build` (recognised by its `@layer tokens, base, components, utilities, pin` statement), because its reset is built to sit under the engine. The docs page of this site went from 4,314 false findings (0.16.0), to 111 (0.16.1), to none from its own CSS.

README.md

@@ -68,7 +68,7 @@ Both drop a `dssl-engine/` folder next to you: the engine, a starter token set,
 
 Prefer to click: [dssl-engine.zip](https://dssl-sable.vercel.app/dssl-engine.zip) or [dssl-engine.tar.gz](https://dssl-sable.vercel.app/dssl-engine.tar.gz). Same package, straight from the browser.
 
-Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API). In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.16.2.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. See `dssl-vscode/PUBLISHING.md` for publishing.
+Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API). In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.16.3.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. See `dssl-vscode/PUBLISHING.md` for publishing.
 
 AI agents and machine reviewers: this repo ships `llms.txt` (dense, structured facts), `AGENTS.md` (how to work on the codebase) and `PARITY.md` (the honest feature matrix against CSS). The site serves the same `llms.txt` at https://dssl-sable.vercel.app/llms.txt
 
@@ -470,7 +470,7 @@ await DSSL.lint(root)                  // contrast against the real background,
 DSSL.play(el, 'boing', opts)           // a one-shot motion from JS, as a promise
 DSSL.motion('full')                    // run every motion whatever the system asks for
 DSSL.auraZ(20)                         // where the aura canvas sits in the stack
-DSSL.version                           // "0.16.2", a string
+DSSL.version                           // "0.16.3", a string
 ```
 
 Auto-boot picks up every `link[rel="stylesheet/dssl"]` and `style[type="text/dssl"]`, applies them, and fires `dssl-ready` on `window`. `<html data-dssl-reset>` enables the small built-in reset.
@@ -546,7 +546,7 @@ const rep = DSSL.explain(document.querySelector('.doc-card'))
 
 The matcher also pre-filters every rule through a cheap class/tag/id gate extracted from the selector's rightmost compound, so a recompute skips obvious non-matches instead of asking the browser rule by rule. The gate only ever says no; anything it does not fully understand falls back to native matching.
 
-## What works today (v0.16.2)
+## What works today (v0.16.3)
 
 - the full selector surface, including `:nth-child`, `:not`, `:is`, `:where`, `:has`
 - flexbox and grid with `row:` / `column:` / `grid:` / `stack:` / `center:` sugar, place words now own an axis (`between` is main-axis, `stretch` is cross-axis) and conflicts warn instead of silently overwriting
@@ -586,7 +586,7 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 
 ## Status
 
-v0.16.2, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite, and the docs examples are rendered and asserted in a real browser, so the guide cannot lie. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; when a page must work without JavaScript, build the static subset with `dssl build` or pick another tool for that page. Freeze makes big static pages viable; live interaction is what the engine is for.
+v0.16.3, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite, and the docs examples are rendered and asserted in a real browser, so the guide cannot lie. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; when a page must work without JavaScript, build the static subset with `dssl build` or pick another tool for that page. Freeze makes big static pages viable; live interaction is what the engine is for.
 
 ## License
 

dssl-vscode/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.16.3
+
+- Bundled engine 0.16.3: seven bug fixes found while writing the native spec (unquoted `url(http://...)`, nesting under selector lists, token path typos, escaped quotes, a false `li` warning) and two new warnings (unknown `@layer` name, `radius: xl` without a token).
+
 ## 0.16.2
 
 - Bundled engine 0.16.2: `DSSL.lint` also skips the output of `dssl build` (its reset sits under the engine on purpose).

dssl-vscode/lib/engine/parser.js

@@ -111,6 +111,17 @@ function stripComments(src) {
       continue;
     }
     if (c === '"' || c === "'") { q = c; out += c; continue; }
+    // An unquoted url(...) is one token: the // in http://x.com/a.png is not a comment. Copy it through the
+    // closing paren untouched (newlines included, so line numbers hold). A quoted url is handled by the string rule above.
+    if ((c === 'u' || c === 'U') && /^url\(/i.test(src.slice(i, i + 4)) && !/[\w-]/.test(src[i - 1] || '')) {
+      let k = i + 4;
+      while (k < src.length && /\s/.test(src[k])) k++;
+      if (src[k] !== '"' && src[k] !== "'") {
+        let e = k;
+        while (e < src.length && src[e] !== ')') e += src[e] === '\\' ? 2 : 1;
+        if (e < src.length) { out += src.slice(i, e + 1); i = e; continue; }
+      }
+    }
     if (c === '/' && n === '/') {
       // v0.7.1 bugfix: this handler used to emit its own '\n' AND rewind so
       // the main loop emitted the same newline again - every // comment

dssl-vscode/lib/engine/resolver.js

@@ -182,6 +182,13 @@ const LENGTH_FN = new Set('calc,min,max,clamp,round,mod,rem,abs,sign,hypot,pow,s
  *   - token references become var(--dssl-…), `token/NN` becomes color-mix
  *   - unknown identifiers are errors (with did-you-mean)
  */
+/** HTML element names: a bare one nested in a rule is a descendant selector on purpose, never a mistyped state word */
+const HTML_ELEMENTS = new Set(('a,abbr,acronym,address,area,article,aside,audio,b,base,bdi,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,' +
+  'data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,' +
+  'i,iframe,img,input,ins,kbd,label,legend,li,link,main,map,mark,marquee,menu,meta,meter,nav,nobr,noscript,object,ol,optgroup,option,output,p,param,picture,pre,progress,q,' +
+  'rp,rt,ruby,s,samp,script,search,section,select,slot,small,source,span,strike,strong,style,sub,summary,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,' +
+  'track,tt,u,ul,var,video,wbr,svg,math').split(','));
+
 /** split a selector list at top-level commas (not inside :is(...) and friends) */
 function splitTopLevel(sel) {
   const out = []; let depth = 0, cur = '';
@@ -209,7 +216,7 @@ function resolveValue(raw, ctx) {
 
     if (c === '"' || c === "'") {
       let j = i + 1;
-      while (j < n && raw[j] !== c) j++;
+      while (j < n && raw[j] !== c) j += raw[j] === '\\' ? 2 : 1;   // a backslash escapes the next character
       out += raw.slice(i, j + 1);
       i = j + 1;
       continue;
@@ -247,7 +254,7 @@ function resolveValue(raw, ctx) {
           if (raw[j] === ')') depth--;
           if (depth > 0 && (raw[j] === '"' || raw[j] === "'")) {
             const q = raw[j]; j++;
-            while (j < n && raw[j] !== q) j++;
+            while (j < n && raw[j] !== q) j += raw[j] === '\\' ? 2 : 1;
           }
           j++;
         }
@@ -386,16 +393,8 @@ function topSplit(str, sep) {
 }
 
 function findToken(tokens, ident) {
-  if (tokens.has(ident)) return ident;
-  // try progressive dot paths (a.b.c defined, user typed a.b.c - exact only, plus flat fallback)
-  if (ident.includes('.')) {
-    const parts = ident.split('.');
-    for (let k = parts.length - 1; k > 0; k--) {
-      const key = parts.slice(0, k).join('.');
-      if (tokens.has(key)) return key; // hmm - partial match would change meaning; require exact
-    }
-  }
-  return null;
+  // exact key only: color.ink2.bogus must not quietly become color.ink2, it falls through to "unknown value"
+  return tokens.has(ident) ? ident : null;
 }
 
 /* ------------------------------------------------------------------ *
@@ -438,7 +437,7 @@ function splitLayers(s) {
   const out = []; let depth = 0, q = null, cur = '';
   for (let i = 0; i < s.length; i++) {
     const c = s[i];
-    if (q) { cur += c; if (c === q) q = null; continue; }
+    if (q) { cur += c; if (c === q && s[i - 1] !== '\\') q = null; continue; }
     if (c === '"' || c === "'") { q = c; cur += c; continue; }
     if (c === '(' || c === '[') depth++;
     else if (c === ')' || c === ']') depth = Math.max(0, depth - 1);
@@ -866,7 +865,12 @@ const SEMANTIC = {
   radius(v, ctx) {
     const atoms = v.trim().split(/\s+/).filter(Boolean);
     const out = atoms.map(a => {
-      if (['sm', 'md', 'lg', 'full', 'xl'].includes(a)) return `var(--dssl-radius-${a})`;
+      if (['sm', 'md', 'lg', 'full', 'xl'].includes(a)) {
+        if (ctx.tokens && !ctx.tokens.has('radius.' + a) && ctx.warnings) {
+          ctx.warnings.push({ file: ctx.file, line: ctx.line, message: `radius "${a}" is not defined, so it will not apply`, hint: `add it with  tokens { radius { ${a}: 32 } }` });
+        }
+        return `var(--dssl-radius-${a})`;
+      }
       if (/^[A-Za-z][\w-]*$/.test(a) && ctx.tokens && ctx.tokens.has('radius.' + a)) return `var(--dssl-radius-${a})`;   // 0.14.0: radius { pill: 99 }  then  radius: pill
       return resolveValue(a, ctx);
     });
@@ -1614,7 +1618,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
           break;
         }
         case 'selector': {
-          if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(node.sel) && ctx.sel) {
+          if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(node.sel) && ctx.sel && !HTML_ELEMENTS.has(node.sel.toLowerCase())) {
             const near = didYouMean(node.sel.toLowerCase(), [...STATE_WORDS]);
             if (near) warnings.push({ file, line: node.line, message: `"${node.sel}" compiled as a descendant selector ("${combine(ctx.sel, node.sel)}")`, hint: `if you meant the state, it is spelled "${near}" - this block currently styles descendants called <${node.sel}>` });
           }
@@ -1632,7 +1636,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
             break;
           }
           flushPending(node.line);
-          const childCtx = { ...ctx, sel: ctx.sel + ':' + node.name };
+          const childCtx = { ...ctx, sel: withState(ctx.sel, node.name) };
           // v0.7.2 - the arrow is motion/gradient-stop syntax; inside a seen
           // block it compiled into an inline style the browser rejects, so the
           // element just sat at its base style forever. Say so, loudly, and
@@ -1678,7 +1682,11 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
         }
         case 'layer':
         case 'pin': {
-          const layer = node.kind === 'pin' ? 'pin' : (['tokens', 'base', 'components', 'utilities', 'pin'].includes(node.name) ? node.name : 'components');
+          const LAYERS = ['tokens', 'base', 'components', 'utilities', 'pin'];
+          const layer = node.kind === 'pin' ? 'pin' : (LAYERS.includes(node.name) ? node.name : 'components');
+          if (node.kind === 'layer' && !LAYERS.includes(node.name)) {
+            warnings.push({ file, line: node.line, message: `unknown layer "${node.name}", treated as "components"`, hint: didYouMean(node.name, LAYERS) || 'the layers are tokens, base, components, utilities, pin' });
+          }
           flushPending(node.line);
           const childCtx = { ...ctx, layer };
           const sub = { decls: [] };
@@ -1688,6 +1696,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
         }
         case 'pseudo': {
           const base = ctx.sel || '*'; // top-level ::selection etc. means every element
+          const parts = splitTopLevel(base);
           const srule = {
             id: ruleId++, sel: base, pseudo: node.name,
             media: ctx.media, signals: ctx.signals, containers: ctx.containers,
@@ -1724,6 +1733,17 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
           fill(srule, node.children);
           if (srule.decls.length) shadowRules.push(srule);
           for (const st of stateRules) if (st.decls.length) shadowRules.push(st);
+          // a selector list in front of the block (.a, .b { ::before { } }): the rules above were built on the whole
+          // list; give every further part its own copy so each gets its own pseudo-element rule
+          if (parts.length > 1) {
+            const built = [srule, ...stateRules].filter((r) => r.decls.length);
+            for (const part of parts.slice(1)) {
+              for (const r of built) {
+                shadowRules.push({ ...r, decls: r.decls.map((d) => ({ ...d })), id: ruleId++, order: order++, sel: part + r.sel.slice(base.length) });
+              }
+            }
+            for (const r of built) r.sel = parts[0] + r.sel.slice(base.length);
+          }
           break;
         }
         case 'tokens': {
@@ -1994,10 +2014,24 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
   return { rules, shadowRules, raws, fontLinks, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
 }
 
-/** naive `&` substitution + descendant join */
+/** `&` substitution + descendant join. Lists are split at top-level commas and every parent part is joined with
+ *  every child part (parent-major), so `.a, .b { .c { } }` is `.a .c, .b .c`. Commas inside :is( ) or [ ] stay put. */
 function combine(parent, child) {
-  if (child.includes('&')) return child.split('&').join(parent);
-  return parent + ' ' + child;
+  const pp = splitTopLevel(parent), cp = splitTopLevel(child);
+  if (pp.length <= 1 && cp.length <= 1) {
+    if (child.includes('&')) return child.split('&').join(parent);
+    return parent + ' ' + child;
+  }
+  const out = [];
+  for (const p of pp) for (const c of cp) out.push(c.includes('&') ? c.split('&').join(p) : p + ' ' + c);
+  return out.join(', ');
+}
+
+/** append a state to every part of a selector list: `.a, .b` + hover is `.a:hover, .b:hover` */
+function withState(sel, name) {
+  const parts = splitTopLevel(sel);
+  if (parts.length <= 1) return sel + ':' + name;
+  return parts.map((p) => p + ':' + name).join(', ');
 }
 
 /* v0.5.0 - where does a selector carry a pseudo-element?

dssl-vscode/package.json

@@ -2,7 +2,7 @@
   "name": "dssl-vscode",
   "displayName": "DSSL Language Support",
   "description": "The DSSL style language in your editor: syntax highlighting, real-compiler diagnostics (the same errors the browser console shows), completions from the live token registry and for textures, auras and sliders, hover docs, an interactive designer with sliders and live previews for aura, texture and range sliders, and a CSS to DSSL converter. Works in VS Code and VSCodium.",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",

llms.txt

@@ -5,7 +5,7 @@
 - Site (docs, playground, changelog, bench): https://dssl-sable.vercel.app
 - Repo + full docs in the README: https://huggingface.co/EHS-Studio/dssl
 - Install: `curl -fsSL https://dssl-sable.vercel.app/install.sh | sh` (or the zip: https://dssl-sable.vercel.app/dssl-engine.zip)
-- Version: 0.16.2 (engine), MIT license
+- Version: 0.16.3 (engine), MIT license
 - Feature matrix vs CSS: see PARITY.md in the repo
 - For agents working ON the codebase: see AGENTS.md in the repo
 
@@ -64,6 +64,10 @@ DSSL.replay(sel) / DSSL.refresh([el]) / DSSL.errors() (a function) / DSSL.versio
 - Alpha on a named colour works: `white/12`, `currentColor/20`. It used to compile to `white/12px`.
 - The playground has a canvas.html tab, `?example=` links, lint warnings and an "as CSS" tab. The canvas keeps a short allow-list of tags and drops scripts, handlers, styles and ids.
 
+## 0.16.3
+- Seven bugs found by writing the native spec (`native/spec/`) are fixed. An unquoted `url(http://x.com/a.png)` no longer loses the rest of the line to the comment stripper (also inside `raw { }`). A typo at the end of a token path (`color.ink.bogus`) is an `unknown value` error instead of quietly becoming `color.ink`. Nesting under a selector list joins every part: `.a, .b { .c { } }` is `.a .c, .b .c`, `hover { }` gives `.a:hover, .b:hover`, `.c, .d { }` under `.a` gives `.a .c, .a .d`, and `::before { }` gets one rule per part. A backslash escapes a quote in a value (`content: "a\"b"`). A nested `li` or any other HTML element name no longer gets a "did you mean link" warning.
+- Two new warnings, both compile fine: an unknown `@layer` name (it is treated as `components`) and `radius: xl` when no `radius.xl` token exists.
+
 ## 0.16.2
 - `DSSL.lint`'s `css-loses` no longer judges the output of `dssl build` (its reset is built to sit under the engine), and ignores a rule whose value is the same as what DSSL wrote inline. On this site's docs page it reported 4,314 findings in 0.16.0; it now reports none from the site's own CSS.
 
@@ -132,4 +136,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## Editor support
 
-The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.16.2.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.16.3.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

native/.gitignore

@@ -0,0 +1 @@
+target/

native/Cargo.lock

@@ -0,0 +1,158 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "aho-corasick"
+version = "1.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c982642fa9e8606056828ee9a8505737230110bb1099153c79efe865c59d12ba"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "bit-set"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08807e080ed7f9d5433fa9b275196cfc35414f66a0c79d864dc51a0d825231a3"
+dependencies = [
+ "bit-vec",
+]
+
+[[package]]
+name = "bit-vec"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e764a1d40d510daf35e07be9eb06e75770908c27d411ee6c92109c9840eaaf7"
+
+[[package]]
+name = "dssl-native"
+version = "0.1.0"
+dependencies = [
+ "fancy-regex",
+ "serde_json",
+]
+
+[[package]]
+name = "fancy-regex"
+version = "0.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e24cb5a94bcae1e5408b0effca5cd7172ea3c5755049c5f3af4cd283a165298"
+dependencies = [
+ "bit-set",
+ "regex-automata",
+ "regex-syntax",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f42a60cbdf9a97f5d2305f08a87dc4e09308d1276d28c869c684d7777685682"
+
+[[package]]
+name = "memchr"
+version = "2.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cf8baf1c55e62ffcace7a9f06f4bd9cd3f0c4beb022d3b367256b91b87513d98"
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.107"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "985e7ec9bb745e6ce6535b544d84d6cd6f7ad8bd711c398938ae983b91a766d9"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.47"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fbf4db142a473a8d80c26bbf18454ed458bf8d26c8219c331daecfdbd079001"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "regex-automata"
+version = "0.4.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ad8553b9b26413251cbf30e620595c7a41b3887f03da04579c0e6b0d6a06b4b2"
+dependencies = [
+ "aho-corasick",
+ "memchr",
+ "regex-syntax",
+]
+
+[[package]]
+name = "regex-syntax"
+version = "0.8.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d6f6ff9a378485b298a5286656da665ba74413d36db0979633275d2e708145d4"
+
+[[package]]
+name = "serde"
+version = "1.0.229"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4148590afebada386688f18773da617792bf2ef03ffc1e4cbd2b1d45b023e0ba"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.229"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67dca2c9c51e58a4791a4b1ed58308b39c64224d349a935ab5039aa360942a48"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.229"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e7a5d71263a5a7d47b41f6b3f06ba276f10cc18b0931f1799f710578e2309348"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.154"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e7e9cc8b1b85264074fbcc02a88680c4096b1e47df8f739dceb03bf482f04bd6"
+dependencies = [
+ "itoa",
+ "memchr",
+ "serde",
+ "serde_core",
+ "zmij",
+]
+
+[[package]]
+name = "syn"
+version = "3.0.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d78c8dee4c7bf0e14673097256fed6142ce9d3b85a408189d07482442145823b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2c754d6c33795a1c324727428e5a7dedb5b06195f9890bdbcba760d3e246563"
+
+[[package]]
+name = "zmij"
+version = "1.0.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "29666d0abbfad1e3dc4dcf6144730dd3a3ab225bbbdac83319345b1b44ccfc1b"

native/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "dssl-native"
+version = "0.1.0"
+edition = "2021"
+description = "DSSL reference compiler: a native, JavaScript-free implementation of the DSSL language"
+license = "MIT"
+
+[lib]
+name = "dssl"
+path = "src/lib.rs"
+
+[[bin]]
+name = "dssl-native"
+path = "src/main.rs"
+
+[dependencies]
+serde_json = "1"
+fancy-regex = "0.14"

native/README.md

@@ -0,0 +1,42 @@
+# Native DSSL
+
+DSSL today runs as a JavaScript engine. This folder is the start of DSSL as a language that does
+not need JavaScript, the way CSS does not: a written specification, and a reference
+implementation in Rust that a browser team can port or link.
+
+## What is here
+
+| Path | What it is | State |
+|---|---|---|
+| `spec/` | The specification, chapters 1 to 12 and two generated appendices | Written (draft, against engine 0.16.3) |
+| `data/vocabulary.json` | Every word list the language uses, in the engine's order | Generated |
+| `src/`, `Cargo.toml` | The Rust crate (`dssl-native`) | A stub that builds. No parser yet. |
+| `../scripts/test-native-spec.mjs` | Runs every spec example, checks the prose and the fixed bugs, checks the generated files | Passing |
+| `../scripts/gen-native-vocab.mjs` | Writes the data file and the appendices from the engine | Working |
+
+## Honest status
+
+- The spec covers the whole language, but not to the same depth everywhere. Syntax, values,
+  tokens, cascade, properties and motion are written precisely enough to implement from. The paint
+  half of texture, aura, slider and overlap is marked **Pending**: it is defined by the JavaScript
+  generators until it is written as prose (chapter 8).
+- The Rust crate does nothing yet. Next is the parser (chapter 2), then the resolver (chapters 3
+  to 7), checked against the JavaScript engine over a corpus (chapter 10). Matching elements,
+  computing styles and paint are later levels (chapter 1.4).
+- Nothing here is in a browser. Chapter 11 says what that would take.
+
+## Bugs the spec found in the engine
+
+Checking the spec against the engine found eight places where the engine did not behave as the
+language promises (chapter 12). Seven are fixed in 0.16.3 and `scripts/test-v0163.mjs` keeps them
+fixed. The eighth (D-6, how base tokens carry over between files) needs a two-file test in a
+browser before anyone decides whether it is a bug.
+
+## Commands
+
+```sh
+node scripts/test-native-spec.mjs          # spec examples, prose promises, fixed bugs, generated files
+node scripts/gen-native-vocab.mjs          # rewrite native/data and the appendices after an engine change
+node scripts/gen-native-vocab.mjs --check  # fail if they are out of date
+cd native && cargo build                   # the crate (a stub today)
+```

native/data/vocabulary.json

@@ -0,0 +1,4567 @@
+{
+ "_about": "Generated by scripts/gen-native-vocab.mjs from public/dssl. Do not edit by hand. Array order is the engine's insertion order.",
+ "version": "0.16.3",
+ "stateWords": [
+  "hover",
+  "focus",
+  "focus-visible",
+  "active",
+  "disabled",
+  "checked",
+  "empty",
+  "target",
+  "required",
+  "invalid",
+  "valid",
+  "open",
+  "closed",
+  "placeholder-shown",
+  "read-only",
+  "read-write",
+  "enabled",
+  "indeterminate",
+  "first-child",
+  "last-child",
+  "only-child",
+  "first-of-type",
+  "last-of-type",
+  "link",
+  "visited",
+  "seen"
+ ],
+ "pseudoElements": [
+  "before",
+  "after",
+  "placeholder",
+  "selection",
+  "marker",
+  "first-line",
+  "first-letter",
+  "backdrop",
+  "file-selector-button",
+  "part",
+  "slotted"
+ ],
+ "vendorPseudoSource": "^-(webkit|moz|ms)-",
+ "cssKeywords": [
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer",
+  "none",
+  "auto",
+  "currentcolor",
+  "transparent",
+  "from",
+  "stroke",
+  "markers",
+  "normal",
+  "black",
+  "silver",
+  "gray",
+  "white",
+  "maroon",
+  "red",
+  "purple",
+  "fuchsia",
+  "green",
+  "lime",
+  "olive",
+  "yellow",
+  "navy",
+  "blue",
+  "teal",
+  "aqua",
+  "orange",
+  "gold",
+  "pink",
+  "brown",
+  "violet",
+  "cyan",
+  "magenta",
+  "indigo",
+  "crimson",
+  "coral",
+  "tomato",
+  "goldenrod",
+  "khaki",
+  "slategray",
+  "slategrey",
+  "dimgray",
+  "dimgrey",
+  "lightgray",
+  "lightgrey",
+  "darkgray",
+  "darkgrey",
+  "gainsboro",
+  "whitesmoke",
+  "ghostwhite",
+  "ivory",
+  "beige",
+  "linen",
+  "seashell",
+  "snow",
+  "honeydew",
+  "mintcream",
+  "azure",
+  "aliceblue",
+  "lavender",
+  "canvas",
+  "canvastext",
+  "linktext",
+  "visitedtext",
+  "activetext",
+  "buttonface",
+  "buttontext",
+  "buttonborder",
+  "field",
+  "fieldtext",
+  "highlight",
+  "highlighttext",
+  "solid",
+  "dashed",
+  "dotted",
+  "double",
+  "groove",
+  "ridge",
+  "inset",
+  "outset",
+  "hidden",
+  "visible",
+  "block",
+  "inline",
+  "inline-block",
+  "flex",
+  "inline-flex",
+  "grid",
+  "inline-grid",
+  "flow-root",
+  "contents",
+  "table",
+  "table-row",
+  "table-cell",
+  "list-item",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "static",
+  "start",
+  "end",
+  "center",
+  "left",
+  "right",
+  "between",
+  "around",
+  "evenly",
+  "baseline",
+  "stretch",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "wrap",
+  "nowrap",
+  "reverse",
+  "row",
+  "column",
+  "row-reverse",
+  "column-reverse",
+  "bold",
+  "bolder",
+  "lighter",
+  "italic",
+  "oblique",
+  "small-caps",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "underline",
+  "overline",
+  "line-through",
+  "blink",
+  "ellipsis",
+  "clip",
+  "break-word",
+  "anywhere",
+  "pre",
+  "pre-wrap",
+  "pre-line",
+  "subpixel-antialiased",
+  "antialiased",
+  "pointer",
+  "progress",
+  "default",
+  "move",
+  "text",
+  "wait",
+  "help",
+  "grab",
+  "grabbing",
+  "not-allowed",
+  "zoom-in",
+  "zoom-out",
+  "copy",
+  "alias",
+  "crosshair",
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-serif",
+  "ui-rounded",
+  "-apple-system",
+  "Roboto",
+  "Helvetica",
+  "Arial",
+  "Menlo",
+  "Consolas",
+  "SFMono-Regular",
+  "Liberation-Mono",
+  "Inter",
+  "Noto-Sans",
+  "Ubuntu",
+  "Cantarell",
+  "Oxygen",
+  "Fira-Sans",
+  "Droid-Sans",
+  "border-box",
+  "content-box",
+  "padding-box",
+  "fill-box",
+  "stroke-box",
+  "view-box",
+  "no-repeat",
+  "repeat-x",
+  "repeat-y",
+  "space",
+  "round",
+  "scroll",
+  "local",
+  "contain",
+  "cover",
+  "fill",
+  "fit-content",
+  "min-content",
+  "max-content",
+  "minmax",
+  "repeat",
+  "clamp",
+  "calc",
+  "var",
+  "url",
+  "env",
+  "attr",
+  "auto-fill",
+  "auto-fit",
+  "subgrid",
+  "dense",
+  "span",
+  "scaleX",
+  "scaleY",
+  "translateX",
+  "translateY",
+  "translate",
+  "rotate",
+  "skew",
+  "skewX",
+  "skewY",
+  "matrix",
+  "ease",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  "linear",
+  "step-start",
+  "step-end",
+  "steps",
+  "cubic-bezier",
+  "spring",
+  "bounce",
+  "smooth",
+  "snap",
+  "forwards",
+  "backwards",
+  "both",
+  "infinite",
+  "alternate",
+  "alternate-reverse",
+  "running",
+  "paused",
+  "safe",
+  "unsafe",
+  "legacy",
+  "loose",
+  "strict",
+  "spell-out",
+  "letters",
+  "isolate",
+  "isolation",
+  "blend",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+  "plus-lighter",
+  "blur",
+  "brightness",
+  "contrast",
+  "grayscale",
+  "invert",
+  "opacity",
+  "sepia",
+  "saturate",
+  "drop-shadow",
+  "pointer coarse fine hover interactive",
+  "first",
+  "last",
+  "odd",
+  "even",
+  "all",
+  "portrait",
+  "landscape",
+  "print",
+  "and",
+  "not",
+  "only",
+  "inline-size",
+  "size",
+  "scroll-state",
+  "snapped",
+  "physical",
+  "logical",
+  "in",
+  "oklab",
+  "oklch",
+  "srgb",
+  "srgb-linear",
+  "display-p3",
+  "a98-rgb",
+  "prophoto-rgb",
+  "rec2020",
+  "xyz",
+  "xyz-d50",
+  "xyz-d65",
+  "shorter",
+  "longer",
+  "deg",
+  "grad",
+  "rad",
+  "turn",
+  "to",
+  "top",
+  "bottom",
+  "above",
+  "below",
+  "closest-side",
+  "farthest-side",
+  "ellipse",
+  "circle",
+  "at",
+  "plaintext",
+  "sideways",
+  "upright",
+  "mixed",
+  "ltr",
+  "rtl",
+  "transform",
+  "-webkit-box",
+  "-webkit-inline-box",
+  "thin",
+  "thick",
+  "medium",
+  "separate",
+  "collapse",
+  "vertical",
+  "horizontal",
+  "balance",
+  "pretty",
+  "orphans",
+  "manual",
+  "pixelated",
+  "crisp-edges",
+  "optimizeSpeed",
+  "optimizeLegibility",
+  "geometricPrecision",
+  "flex-start",
+  "flex-end",
+  "self-start",
+  "self-end",
+  "snap-block",
+  "snap-inline",
+  "swap",
+  "fallback",
+  "optional",
+  "-apple-pay-button",
+  "-infinity",
+  "-moz-mac-unified-toolbar",
+  "-moz-win-borderless-glass",
+  "-moz-win-browsertabbar-toolbox",
+  "-moz-win-communications-toolbox",
+  "-moz-win-communicationstext",
+  "-moz-win-exclude-glass",
+  "-moz-win-glass",
+  "-moz-win-media-toolbox",
+  "-moz-win-mediatext",
+  "-moz-window-button-box",
+  "-moz-window-button-box-maximized",
+  "-moz-window-button-close",
+  "-moz-window-button-maximize",
+  "-moz-window-button-minimize",
+  "-moz-window-button-restore",
+  "-moz-window-frame-bottom",
+  "-moz-window-frame-left",
+  "-moz-window-frame-right",
+  "-moz-window-titlebar",
+  "-moz-window-titlebar-maximized",
+  "-ms-autohiding-scrollbar",
+  "-n",
+  "-n-",
+  "accumulate",
+  "active",
+  "add",
+  "after",
+  "all-petite-caps",
+  "all-scroll",
+  "all-small-caps",
+  "allow-discrete",
+  "allow-end",
+  "allow-keywords",
+  "alpha",
+  "alphabetic",
+  "always",
+  "anchor-center",
+  "anchors-valid",
+  "anchors-visible",
+  "angle",
+  "annotation",
+  "antiquewhite",
+  "any",
+  "aquamarine",
+  "arcs",
+  "auto-add",
+  "auto-flow",
+  "auto-phrase",
+  "avoid",
+  "avoid-column",
+  "avoid-page",
+  "avoid-region",
+  "bar",
+  "before",
+  "bevel",
+  "bidi-override",
+  "bisque",
+  "blanchedalmond",
+  "blank",
+  "block-axis",
+  "block-end",
+  "block-start",
+  "blueviolet",
+  "border",
+  "border-area",
+  "both-edges",
+  "bottom-center",
+  "bottom-left",
+  "bottom-left-corner",
+  "bottom-right",
+  "bottom-right-corner",
+  "box-decoration",
+  "break-all",
+  "break-spaces",
+  "bt",
+  "burlywood",
+  "butt",
+  "button",
+  "button-arrow-down",
+  "button-arrow-next",
+  "button-arrow-previous",
+  "button-arrow-up",
+  "button-bevel",
+  "button-focus",
+  "cadetblue",
+  "cap",
+  "cap-height",
+  "caption",
+  "caret",
+  "cell",
+  "central",
+  "ch-width",
+  "chained",
+  "character-variant",
+  "chartreuse",
+  "checkbox",
+  "checkbox-container",
+  "checkbox-label",
+  "checkmenuitem",
+  "chocolate",
+  "clear",
+  "clone",
+  "close-quote",
+  "closest-corner",
+  "cm",
+  "col-resize",
+  "common-ligatures",
+  "compact",
+  "condensed",
+  "consistent",
+  "constrained",
+  "content",
+  "content-block-size",
+  "content-height",
+  "content-inline-size",
+  "content-width",
+  "context-fill",
+  "context-menu",
+  "context-stroke",
+  "contextual",
+  "cornflowerblue",
+  "cornsilk",
+  "cyclic",
+  "dark",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgreen",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "decreasing",
+  "deeppink",
+  "deepskyblue",
+  "default-button",
+  "definite-first",
+  "destination-atop",
+  "destination-in",
+  "destination-out",
+  "destination-over",
+  "diagonal-fractions",
+  "digits",
+  "disabled",
+  "discretionary-ligatures",
+  "display-p3-linear",
+  "dodgerblue",
+  "dot",
+  "double-circle",
+  "down",
+  "drag",
+  "dualbutton",
+  "e-resize",
+  "each-line",
+  "economy",
+  "edges",
+  "element",
+  "em",
+  "embed",
+  "emoji",
+  "enabled",
+  "entry",
+  "entry-crossing",
+  "evenodd",
+  "ew-resize",
+  "ex",
+  "ex-height",
+  "exact",
+  "exclude",
+  "exit",
+  "exit-crossing",
+  "expanded",
+  "extra-condensed",
+  "extra-expanded",
+  "false",
+  "fangsong",
+  "farthest-corner",
+  "fill-opacity",
+  "filled",
+  "firebrick",
+  "first-letter",
+  "fixed-position",
+  "flat",
+  "flex-flow",
+  "flex-visual",
+  "flip",
+  "flip-block",
+  "flip-inline",
+  "flip-start",
+  "floralwhite",
+  "flow",
+  "force-end",
+  "forestgreen",
+  "frequency",
+  "from-font",
+  "from-image",
+  "full-size-kana",
+  "full-width",
+  "grammar-error",
+  "greenyellow",
+  "grey",
+  "grid-columns",
+  "grid-order",
+  "grid-rows",
+  "grippers",
+  "groupbox",
+  "grow",
+  "hanging",
+  "height",
+  "hide",
+  "historical-forms",
+  "historical-ligatures",
+  "horizontal-tb",
+  "hotpink",
+  "hsl",
+  "hwb",
+  "i",
+  "ic",
+  "ic-height",
+  "ic-width",
+  "icon",
+  "ideograph-alpha",
+  "ideograph-numeric",
+  "ideograph-parenthesis",
+  "ideograph-space",
+  "ideographic",
+  "ideographic-ink",
+  "ignore",
+  "in-flow",
+  "inactive",
+  "increasing",
+  "indianred",
+  "inert",
+  "infinity",
+  "inline-axis",
+  "inline-end",
+  "inline-list-item",
+  "inline-start",
+  "inline-table",
+  "inner-spin-button",
+  "inside",
+  "integer",
+  "inter-character",
+  "inter-word",
+  "intersect",
+  "isolate-override",
+  "jis04",
+  "jis78",
+  "jis83",
+  "jis90",
+  "jump-both",
+  "jump-end",
+  "jump-none",
+  "jump-start",
+  "justify",
+  "keep-all",
+  "lab",
+  "large",
+  "larger",
+  "lavenderblush",
+  "lawngreen",
+  "layout",
+  "lch",
+  "leading-spaces",
+  "ledger",
+  "left-bottom",
+  "left-middle",
+  "left-top",
+  "legal",
+  "lemonchiffon",
+  "length",
+  "letter",
+  "lh",
+  "light",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgreen",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "limegreen",
+  "lining-nums",
+  "listbox",
+  "listitem",
+  "literal-punctuation",
+  "lr",
+  "luminance",
+  "mandatory",
+  "manipulation",
+  "margin-box",
+  "match-element",
+  "match-parent",
+  "match-source",
+  "math",
+  "math-auto",
+  "mathematical",
+  "maximum",
+  "media-controls-background",
+  "media-controls-fullscreen-background",
+  "media-current-time-display",
+  "media-enter-fullscreen-button",
+  "media-exit-fullscreen-button",
+  "media-fullscreen-button",
+  "media-mute-button",
+  "media-overlay-play-button",
+  "media-play-button",
+  "media-seek-back-button",
+  "media-seek-forward-button",
+  "media-slider",
+  "media-sliderthumb",
+  "media-time-remaining-display",
+  "media-toggle-closed-captions-button",
+  "media-volume-slider",
+  "media-volume-slider-container",
+  "media-volume-sliderthumb",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "menu",
+  "menuarrow",
+  "menubar",
+  "menucheckbox",
+  "menuimage",
+  "menuitem",
+  "menuitemtext",
+  "menulist",
+  "menulist-button",
+  "menulist-text",
+  "menulist-textfield",
+  "menupopup",
+  "menuradio",
+  "menuseparator",
+  "message-box",
+  "meter",
+  "meterbar",
+  "meterchunk",
+  "middle",
+  "midnightblue",
+  "mistyrose",
+  "miter",
+  "miter-clip",
+  "mm",
+  "moccasin",
+  "most-block-size",
+  "most-height",
+  "most-inline-size",
+  "most-width",
+  "ms",
+  "multiple",
+  "n-",
+  "n-resize",
+  "navajowhite",
+  "ne-resize",
+  "nearest",
+  "nesw-resize",
+  "never",
+  "next",
+  "no-clip",
+  "no-close-quote",
+  "no-common-ligatures",
+  "no-contextual",
+  "no-discretionary-ligatures",
+  "no-drag",
+  "no-drop",
+  "no-historical-ligatures",
+  "no-limit",
+  "no-open-quote",
+  "no-overflow",
+  "no-punctuation",
+  "non-rotation",
+  "non-scaling-size",
+  "non-scaling-stroke",
+  "nonzero",
+  "notch",
+  "ns-resize",
+  "number",
+  "numeric",
+  "numeric-only",
+  "nw-resize",
+  "nwse-resize",
+  "objects",
+  "off",
+  "oldlace",
+  "oldstyle-nums",
+  "olivedrab",
+  "on",
+  "open",
+  "open-quote",
+  "or",
+  "orangered",
+  "orchid",
+  "ordered",
+  "ordinal",
+  "ornaments",
+  "outside",
+  "over",
+  "pack",
+  "padding",
+  "page",
+  "paint",
+  "painted",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "pan-down",
+  "pan-left",
+  "pan-right",
+  "pan-up",
+  "pan-x",
+  "pan-y",
+  "papayawhip",
+  "pause",
+  "pc",
+  "peachpuff",
+  "per-line",
+  "per-line-all",
+  "peru",
+  "petite-caps",
+  "pi",
+  "pinch-zoom",
+  "play",
+  "play-backwards",
+  "play-forwards",
+  "play-once",
+  "plum",
+  "plus-darker",
+  "position",
+  "powderblue",
+  "preserve",
+  "preserve-3d",
+  "preserve-breaks",
+  "preserve-parent-color",
+  "preserve-spaces",
+  "progress-bar",
+  "progress-bar-value",
+  "progressbar",
+  "progressbar-vertical",
+  "progresschunk",
+  "progresschunk-vertical",
+  "proportional-nums",
+  "proportional-width",
+  "proximity",
+  "pt",
+  "push-button",
+  "px",
+  "radio",
+  "radio-container",
+  "radio-label",
+  "radiomenuitem",
+  "railed",
+  "range",
+  "range-thumb",
+  "raw-string",
+  "read-only",
+  "read-write",
+  "read-write-plaintext-only",
+  "rebeccapurple",
+  "recto",
+  "region",
+  "rem",
+  "replace",
+  "replay",
+  "reset",
+  "resizer",
+  "resizerpanel",
+  "right-bottom",
+  "right-middle",
+  "right-top",
+  "rl",
+  "rlh",
+  "root",
+  "rosybrown",
+  "row-resize",
+  "royalblue",
+  "ruby",
+  "ruby-base",
+  "ruby-base-container",
+  "ruby-text",
+  "ruby-text-container",
+  "run-in",
+  "s",
+  "s-resize",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "scale-down",
+  "scale-horizontal",
+  "scale-vertical",
+  "scalethumb-horizontal",
+  "scalethumb-vertical",
+  "scalethumbend",
+  "scalethumbstart",
+  "scalethumbtick",
+  "scoop",
+  "scroll-position",
+  "scrollbar",
+  "scrollbarbutton-down",
+  "scrollbarbutton-left",
+  "scrollbarbutton-right",
+  "scrollbarbutton-up",
+  "scrollbarthumb-horizontal",
+  "scrollbarthumb-vertical",
+  "scrollbartrack-horizontal",
+  "scrollbartrack-vertical",
+  "se-resize",
+  "seagreen",
+  "searchfield",
+  "searchfield-cancel-button",
+  "searchfield-decoration",
+  "searchfield-results-button",
+  "searchfield-results-decoration",
+  "select",
+  "select-after",
+  "select-all",
+  "select-before",
+  "select-menu",
+  "select-same",
+  "self",
+  "self-block",
+  "self-block-end",
+  "self-block-start",
+  "self-inline",
+  "self-inline-end",
+  "self-inline-start",
+  "semi-condensed",
+  "semi-expanded",
+  "separator",
+  "sesame",
+  "sheet",
+  "show",
+  "shrink",
+  "sides",
+  "sideways-lr",
+  "sideways-rl",
+  "sienna",
+  "simplified",
+  "single",
+  "skyblue",
+  "slashed-zero",
+  "slateblue",
+  "slice",
+  "slider-horizontal",
+  "slider-vertical",
+  "sliderthumb-horizontal",
+  "sliderthumb-vertical",
+  "small",
+  "small-caption",
+  "smaller",
+  "source-atop",
+  "source-in",
+  "source-order",
+  "source-out",
+  "source-over",
+  "space-all",
+  "space-first",
+  "spaces",
+  "span-all",
+  "span-block-end",
+  "span-block-start",
+  "span-bottom",
+  "span-end",
+  "span-inline-end",
+  "span-inline-start",
+  "span-left",
+  "span-right",
+  "span-self-block-end",
+  "span-self-block-start",
+  "span-self-end",
+  "span-self-inline-end",
+  "span-self-inline-start",
+  "span-self-start",
+  "span-start",
+  "span-top",
+  "span-x-end",
+  "span-x-self-end",
+  "span-x-self-start",
+  "span-x-start",
+  "span-y-end",
+  "span-y-self-end",
+  "span-y-self-start",
+  "span-y-start",
+  "spelling-error",
+  "spinner",
+  "spinner-downbutton",
+  "spinner-textfield",
+  "spinner-upbutton",
+  "splitter",
+  "springgreen",
+  "square",
+  "square-button",
+  "squircle",
+  "stable",
+  "stacked-fractions",
+  "standard",
+  "status-bar",
+  "statusbar",
+  "statusbarpanel",
+  "steelblue",
+  "stretch-to-fit",
+  "string",
+  "stroke-opacity",
+  "style",
+  "styleset",
+  "stylistic",
+  "sub",
+  "subtract",
+  "super",
+  "sw-resize",
+  "swash",
+  "symbolic",
+  "tab",
+  "tab-scroll-arrow-back",
+  "tab-scroll-arrow-forward",
+  "table-caption",
+  "table-column",
+  "table-column-group",
+  "table-footer-group",
+  "table-header-group",
+  "table-row-group",
+  "tabpanel",
+  "tabpanels",
+  "tabular-nums",
+  "tan",
+  "tb",
+  "text-after-edge",
+  "text-before-edge",
+  "text-bottom",
+  "text-top",
+  "textarea",
+  "textfield",
+  "textfield-multiline",
+  "thistle",
+  "time",
+  "titling-caps",
+  "to-zero",
+  "toolbar",
+  "toolbarbutton",
+  "toolbarbutton-dropdown",
+  "toolbargripper",
+  "toolbox",
+  "tooltip",
+  "top-center",
+  "top-left",
+  "top-left-corner",
+  "top-right",
+  "top-right-corner",
+  "touch",
+  "traditional",
+  "trailing-spaces",
+  "treeheader",
+  "treeheadercell",
+  "treeheadersortarrow",
+  "treeitem",
+  "treeline",
+  "treetwisty",
+  "treetwistyopen",
+  "treeview",
+  "triangle",
+  "trim-both",
+  "trim-end",
+  "trim-start",
+  "true",
+  "turquoise",
+  "ultra-condensed",
+  "ultra-expanded",
+  "under",
+  "underscore",
+  "unicase",
+  "unicode",
+  "up",
+  "vb",
+  "verso",
+  "vertical-lr",
+  "vertical-rl",
+  "vertical-text",
+  "vertical-to-horizontal",
+  "vh",
+  "vi",
+  "vmax",
+  "vmin",
+  "vw",
+  "w-resize",
+  "wavy",
+  "weight",
+  "wheat",
+  "width",
+  "wrap-reverse",
+  "write-only",
+  "x",
+  "x-end",
+  "x-large",
+  "x-self-end",
+  "x-self-start",
+  "x-small",
+  "x-start",
+  "xor",
+  "xx-large",
+  "xx-small",
+  "xxx-large",
+  "y",
+  "y-end",
+  "y-self-end",
+  "y-self-start",
+  "y-start",
+  "yellowgreen",
+  "z",
+  "zoom"
+ ],
+ "knownProps": [
+  "all",
+  "appearance",
+  "accent-color",
+  "align-content",
+  "align-items",
+  "align-self",
+  "align-tracks",
+  "aspect-ratio",
+  "backdrop-filter",
+  "backface-visibility",
+  "background",
+  "background-attachment",
+  "background-blend-mode",
+  "background-clip",
+  "background-color",
+  "background-image",
+  "background-origin",
+  "background-position",
+  "background-repeat",
+  "background-size",
+  "block-size",
+  "border",
+  "border-block",
+  "border-block-color",
+  "border-block-end",
+  "border-block-end-color",
+  "border-block-end-style",
+  "border-block-end-width",
+  "border-block-start",
+  "border-block-start-color",
+  "border-block-start-style",
+  "border-block-start-width",
+  "border-block-style",
+  "border-block-width",
+  "border-bottom",
+  "border-bottom-color",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "border-bottom-style",
+  "border-bottom-width",
+  "border-collapse",
+  "border-color",
+  "border-end-end-radius",
+  "border-end-start-radius",
+  "border-image",
+  "border-image-outset",
+  "border-image-repeat",
+  "border-image-slice",
+  "border-image-source",
+  "border-image-width",
+  "border-inline",
+  "border-inline-color",
+  "border-inline-end",
+  "border-inline-end-color",
+  "border-inline-end-style",
+  "border-inline-end-width",
+  "border-inline-start",
+  "border-inline-start-color",
+  "border-inline-start-style",
+  "border-inline-start-width",
+  "border-inline-style",
+  "border-inline-width",
+  "border-left",
+  "border-left-color",
+  "border-left-style",
+  "border-left-width",
+  "border-radius",
+  "border-right",
+  "border-right-color",
+  "border-right-style",
+  "border-right-width",
+  "border-spacing",
+  "border-start-end-radius",
+  "border-start-start-radius",
+  "border-style",
+  "border-top",
+  "border-top-color",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-top-style",
+  "border-top-width",
+  "border-width",
+  "bottom",
+  "counter-reset",
+  "counter-increment",
+  "counter-set",
+  "box-decoration-break",
+  "box-shadow",
+  "box-sizing",
+  "break-after",
+  "break-before",
+  "break-inside",
+  "caret-color",
+  "caret-shape",
+  "clear",
+  "clip",
+  "clip-path",
+  "color",
+  "color-scheme",
+  "column-count",
+  "column-fill",
+  "column-gap",
+  "column-rule",
+  "column-rule-color",
+  "column-rule-style",
+  "column-rule-width",
+  "column-span",
+  "column-width",
+  "columns",
+  "contain",
+  "contain-intrinsic-size",
+  "container",
+  "container-name",
+  "container-type",
+  "content",
+  "content-visibility",
+  "cursor",
+  "caret",
+  "display",
+  "empty-cells",
+  "filter",
+  "flex",
+  "flex-basis",
+  "flex-direction",
+  "flex-flow",
+  "flex-grow",
+  "flex-shrink",
+  "flex-wrap",
+  "float",
+  "fill",
+  "fill-rule",
+  "fill-opacity",
+  "stroke",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-opacity",
+  "stroke-width",
+  "font",
+  "font-family",
+  "font-feature-settings",
+  "font-kerning",
+  "font-language-override",
+  "font-optical-sizing",
+  "font-palette",
+  "font-size",
+  "font-size-adjust",
+  "font-stretch",
+  "font-style",
+  "font-synthesis",
+  "font-variant",
+  "font-variant-caps",
+  "font-variant-east-asian",
+  "font-variant-ligatures",
+  "font-variant-numeric",
+  "font-variant-position",
+  "font-variation-settings",
+  "font-weight",
+  "forced-color-adjust",
+  "gap",
+  "grid",
+  "grid-area",
+  "grid-auto-columns",
+  "grid-auto-flow",
+  "grid-auto-rows",
+  "grid-column",
+  "grid-column-end",
+  "grid-column-gap",
+  "grid-column-start",
+  "grid-gap",
+  "grid-row",
+  "grid-row-end",
+  "grid-row-gap",
+  "grid-row-start",
+  "grid-template",
+  "grid-template-areas",
+  "grid-template-columns",
+  "grid-template-rows",
+  "hanging-punctuation",
+  "height",
+  "hyphenate-character",
+  "hyphenate-limit-chars",
+  "hyphens",
+  "image-orientation",
+  "image-rendering",
+  "inline-size",
+  "inset",
+  "inset-block",
+  "inset-block-end",
+  "inset-block-start",
+  "inset-inline",
+  "inset-inline-end",
+  "inset-inline-start",
+  "isolation",
+  "justify-content",
+  "justify-items",
+  "justify-self",
+  "justify-tracks",
+  "left",
+  "letter-spacing",
+  "line-break",
+  "line-height",
+  "list-style",
+  "list-style-image",
+  "list-style-position",
+  "list-style-type",
+  "margin",
+  "margin-block",
+  "margin-block-end",
+  "margin-block-start",
+  "margin-bottom",
+  "margin-inline",
+  "margin-inline-end",
+  "margin-inline-start",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "margin-trim",
+  "mask",
+  "mask-border",
+  "mask-border-mode",
+  "mask-border-outset",
+  "mask-border-repeat",
+  "mask-border-slice",
+  "mask-border-source",
+  "mask-border-width",
+  "mask-clip",
+  "mask-composite",
+  "mask-image",
+  "mask-mode",
+  "mask-origin",
+  "mask-position",
+  "mask-repeat",
+  "mask-size",
+  "max-height",
+  "max-inline-size",
+  "max-width",
+  "min-block-size",
+  "min-height",
+  "min-inline-size",
+  "min-width",
+  "mix-blend-mode",
+  "object-fit",
+  "object-position",
+  "offset",
+  "offset-anchor",
+  "offset-distance",
+  "offset-path",
+  "offset-rotate",
+  "opacity",
+  "order",
+  "outline",
+  "outline-color",
+  "outline-offset",
+  "outline-style",
+  "outline-width",
+  "overflow",
+  "overflow-anchor",
+  "overflow-clip-margin",
+  "overflow-wrap",
+  "overflow-x",
+  "overflow-y",
+  "overscroll-behavior",
+  "overscroll-behavior-block",
+  "overscroll-behavior-inline",
+  "overscroll-behavior-x",
+  "overscroll-behavior-y",
+  "padding",
+  "padding-block",
+  "padding-block-end",
+  "padding-block-start",
+  "padding-bottom",
+  "padding-inline",
+  "padding-inline-end",
+  "padding-inline-start",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "page-break-after",
+  "page-break-before",
+  "page-break-inside",
+  "paint-order",
+  "perspective",
+  "perspective-origin",
+  "place-content",
+  "place-items",
+  "place-self",
+  "pointer-events",
+  "position",
+  "print-color-adjust",
+  "quotes",
+  "resize",
+  "right",
+  "rotate",
+  "row-gap",
+  "ruby-align",
+  "ruby-merge",
+  "scale",
+  "scroll-behavior",
+  "scroll-margin",
+  "scroll-margin-block",
+  "scroll-margin-block-end",
+  "scroll-margin-block-start",
+  "scroll-margin-bottom",
+  "scroll-margin-inline",
+  "scroll-margin-inline-end",
+  "scroll-margin-inline-start",
+  "scroll-margin-left",
+  "scroll-margin-right",
+  "scroll-margin-top",
+  "scroll-padding",
+  "scroll-padding-block",
+  "scroll-padding-bottom",
+  "scroll-padding-inline",
+  "scroll-padding-left",
+  "scroll-padding-right",
+  "scroll-padding-top",
+  "scroll-snap-align",
+  "scroll-snap-stop",
+  "scroll-snap-type",
+  "scrollbar-color",
+  "scrollbar-gutter",
+  "scrollbar-width",
+  "shape-image-threshold",
+  "shape-margin",
+  "shape-outside",
+  "tab-size",
+  "table-layout",
+  "text-align",
+  "text-align-last",
+  "text-combine-upright",
+  "text-decoration",
+  "text-decoration-color",
+  "text-decoration-line",
+  "text-decoration-skip-ink",
+  "text-decoration-style",
+  "text-decoration-thickness",
+  "text-emphasis",
+  "text-emphasis-color",
+  "text-emphasis-position",
+  "text-emphasis-style",
+  "text-indent",
+  "text-justify",
+  "text-orientation",
+  "text-overflow",
+  "text-rendering",
+  "text-shadow",
+  "text-transform",
+  "text-underline-offset",
+  "text-underline-position",
+  "text-wrap",
+  "top",
+  "touch-action",
+  "transform",
+  "transform-box",
+  "transform-origin",
+  "transform-style",
+  "transition",
+  "transition-behavior",
+  "transition-delay",
+  "transition-duration",
+  "transition-property",
+  "transition-timing-function",
+  "translate",
+  "unicode-bidi",
+  "user-select",
+  "vertical-align",
+  "visibility",
+  "white-space",
+  "white-space-collapse",
+  "width",
+  "will-change",
+  "word-break",
+  "word-spacing",
+  "word-wrap",
+  "writing-mode",
+  "z-index",
+  "zoom",
+  "animation",
+  "animation-composition",
+  "animation-delay",
+  "animation-direction",
+  "animation-duration",
+  "animation-fill-mode",
+  "animation-iteration-count",
+  "animation-name",
+  "animation-play-state",
+  "animation-range",
+  "animation-timeline",
+  "animation-timing-function",
+  "view-transition-name",
+  "interpolate-size",
+  "text-box",
+  "text-box-edge",
+  "text-box-trim",
+  "dynamic-range-limit",
+  "field-sizing",
+  "anchor-name",
+  "position-anchor",
+  "position-area",
+  "scroll-timeline",
+  "scroll-timeline-axis",
+  "scroll-timeline-name",
+  "timeline-scope",
+  "view-timeline",
+  "view-timeline-axis",
+  "view-timeline-name",
+  "-webkit-background-clip",
+  "-webkit-text-fill-color",
+  "-webkit-box-orient",
+  "-webkit-line-clamp",
+  "-webkit-tap-highlight-color",
+  "-webkit-font-smoothing",
+  "-moz-osx-font-smoothing",
+  "-webkit-box-shadow",
+  "-webkit-text-stroke",
+  "-webkit-user-select",
+  "-webkit-touch-callout",
+  "-webkit-overflow-scrolling",
+  "-webkit-appearance",
+  "-moz-appearance",
+  "-moz-binding",
+  "-moz-border-bottom-colors",
+  "-moz-border-left-colors",
+  "-moz-border-right-colors",
+  "-moz-border-top-colors",
+  "-moz-context-properties",
+  "-moz-float-edge",
+  "-moz-force-broken-image-icon",
+  "-moz-orient",
+  "-moz-outline-radius",
+  "-moz-outline-radius-bottomleft",
+  "-moz-outline-radius-bottomright",
+  "-moz-outline-radius-topleft",
+  "-moz-outline-radius-topright",
+  "-moz-stack-sizing",
+  "-moz-text-blink",
+  "-moz-user-focus",
+  "-moz-user-input",
+  "-moz-user-modify",
+  "-moz-window-dragging",
+  "-moz-window-shadow",
+  "-ms-accelerator",
+  "-ms-block-progression",
+  "-ms-content-zoom-chaining",
+  "-ms-content-zoom-limit",
+  "-ms-content-zoom-limit-max",
+  "-ms-content-zoom-limit-min",
+  "-ms-content-zoom-snap",
+  "-ms-content-zoom-snap-points",
+  "-ms-content-zoom-snap-type",
+  "-ms-content-zooming",
+  "-ms-filter",
+  "-ms-flow-from",
+  "-ms-flow-into",
+  "-ms-grid-columns",
+  "-ms-grid-rows",
+  "-ms-high-contrast-adjust",
+  "-ms-hyphenate-limit-chars",
+  "-ms-hyphenate-limit-lines",
+  "-ms-hyphenate-limit-zone",
+  "-ms-ime-align",
+  "-ms-overflow-style",
+  "-ms-scroll-chaining",
+  "-ms-scroll-limit",
+  "-ms-scroll-limit-x-max",
+  "-ms-scroll-limit-x-min",
+  "-ms-scroll-limit-y-max",
+  "-ms-scroll-limit-y-min",
+  "-ms-scroll-rails",
+  "-ms-scroll-snap-points-x",
+  "-ms-scroll-snap-points-y",
+  "-ms-scroll-snap-type",
+  "-ms-scroll-snap-x",
+  "-ms-scroll-snap-y",
+  "-ms-scroll-translation",
+  "-ms-scrollbar-3dlight-color",
+  "-ms-scrollbar-arrow-color",
+  "-ms-scrollbar-base-color",
+  "-ms-scrollbar-darkshadow-color",
+  "-ms-scrollbar-face-color",
+  "-ms-scrollbar-highlight-color",
+  "-ms-scrollbar-shadow-color",
+  "-ms-scrollbar-track-color",
+  "-ms-text-autospace",
+  "-ms-touch-select",
+  "-ms-user-select",
+  "-ms-wrap-flow",
+  "-ms-wrap-margin",
+  "-ms-wrap-through",
+  "-webkit-border-after",
+  "-webkit-border-after-color",
+  "-webkit-border-after-style",
+  "-webkit-border-after-width",
+  "-webkit-border-before",
+  "-webkit-border-before-color",
+  "-webkit-border-before-style",
+  "-webkit-border-before-width",
+  "-webkit-border-end",
+  "-webkit-border-end-color",
+  "-webkit-border-end-style",
+  "-webkit-border-end-width",
+  "-webkit-border-start",
+  "-webkit-border-start-color",
+  "-webkit-border-start-style",
+  "-webkit-border-start-width",
+  "-webkit-box-reflect",
+  "-webkit-mask",
+  "-webkit-mask-attachment",
+  "-webkit-mask-clip",
+  "-webkit-mask-composite",
+  "-webkit-mask-image",
+  "-webkit-mask-origin",
+  "-webkit-mask-position",
+  "-webkit-mask-position-x",
+  "-webkit-mask-position-y",
+  "-webkit-mask-repeat",
+  "-webkit-mask-repeat-x",
+  "-webkit-mask-repeat-y",
+  "-webkit-mask-size",
+  "-webkit-text-stroke-color",
+  "-webkit-text-stroke-width",
+  "-webkit-user-modify",
+  "alignment-baseline",
+  "anchor-scope",
+  "animation-range-end",
+  "animation-range-start",
+  "animation-trigger",
+  "background-position-x",
+  "background-position-y",
+  "baseline-shift",
+  "baseline-source",
+  "border-shape",
+  "box-align",
+  "box-direction",
+  "box-flex",
+  "box-flex-group",
+  "box-lines",
+  "box-ordinal-group",
+  "box-orient",
+  "box-pack",
+  "caption-side",
+  "caret-animation",
+  "clip-rule",
+  "color-interpolation-filters",
+  "column-height",
+  "column-wrap",
+  "contain-intrinsic-block-size",
+  "contain-intrinsic-height",
+  "contain-intrinsic-inline-size",
+  "contain-intrinsic-width",
+  "corner-block-end-shape",
+  "corner-block-start-shape",
+  "corner-bottom-left-shape",
+  "corner-bottom-right-shape",
+  "corner-bottom-shape",
+  "corner-end-end-shape",
+  "corner-end-start-shape",
+  "corner-inline-end-shape",
+  "corner-inline-start-shape",
+  "corner-left-shape",
+  "corner-right-shape",
+  "corner-shape",
+  "corner-start-end-shape",
+  "corner-start-start-shape",
+  "corner-top-left-shape",
+  "corner-top-right-shape",
+  "corner-top-shape",
+  "cx",
+  "cy",
+  "d",
+  "direction",
+  "dominant-baseline",
+  "flex-line-count",
+  "flood-color",
+  "flood-opacity",
+  "font-smooth",
+  "font-synthesis-position",
+  "font-synthesis-small-caps",
+  "font-synthesis-style",
+  "font-synthesis-weight",
+  "font-variant-alternates",
+  "font-variant-emoji",
+  "font-width",
+  "frame-sizing",
+  "image-resolution",
+  "initial-letter",
+  "initial-letter-align",
+  "interactivity",
+  "interest-delay",
+  "interest-delay-end",
+  "interest-delay-start",
+  "lighting-color",
+  "line-clamp",
+  "line-height-step",
+  "link-parameters",
+  "marker",
+  "marker-end",
+  "marker-mid",
+  "marker-start",
+  "mask-type",
+  "masonry-auto-flow",
+  "math-depth",
+  "math-shift",
+  "math-style",
+  "max-block-size",
+  "max-lines",
+  "object-view-box",
+  "offset-position",
+  "orphans",
+  "overflow-block",
+  "overflow-clip-box",
+  "overflow-inline",
+  "overlay",
+  "page",
+  "path-length",
+  "position-try",
+  "position-try-fallbacks",
+  "position-try-order",
+  "position-visibility",
+  "r",
+  "reading-flow",
+  "reading-order",
+  "ruby-overhang",
+  "ruby-position",
+  "rx",
+  "ry",
+  "scroll-axis-lock",
+  "scroll-initial-target",
+  "scroll-marker-group",
+  "scroll-padding-block-end",
+  "scroll-padding-block-start",
+  "scroll-padding-inline-end",
+  "scroll-padding-inline-start",
+  "scroll-target-group",
+  "shape-rendering",
+  "speak-as",
+  "stop-color",
+  "stop-opacity",
+  "stroke-color",
+  "stroke-miterlimit",
+  "text-anchor",
+  "text-autospace",
+  "text-decoration-inset",
+  "text-decoration-skip",
+  "text-fit",
+  "text-size-adjust",
+  "text-spacing-trim",
+  "text-wrap-mode",
+  "text-wrap-style",
+  "timeline-trigger",
+  "timeline-trigger-activation-range",
+  "timeline-trigger-activation-range-end",
+  "timeline-trigger-activation-range-start",
+  "timeline-trigger-active-range",
+  "timeline-trigger-active-range-end",
+  "timeline-trigger-active-range-start",
+  "timeline-trigger-name",
+  "timeline-trigger-source",
+  "trigger-scope",
+  "vector-effect",
+  "view-timeline-inset",
+  "view-transition-class",
+  "view-transition-scope",
+  "widows",
+  "window-drag",
+  "x",
+  "y"
+ ],
+ "unitlessProps": [
+  "opacity",
+  "line-height",
+  "z-index",
+  "font-weight",
+  "flex-grow",
+  "flex-shrink",
+  "flex",
+  "order",
+  "scale",
+  "widows",
+  "orphans",
+  "column-count",
+  "aspect-ratio",
+  "animation-iteration-count",
+  "flood-opacity",
+  "fill-opacity",
+  "stop-opacity",
+  "shape-image-threshold",
+  "counter-reset",
+  "counter-increment",
+  "counter-set",
+  "grid-row",
+  "grid-column",
+  "grid-area",
+  "font-feature-settings",
+  "font-variation-settings",
+  "tab-size",
+  "-webkit-line-clamp",
+  "line-clamp",
+  "stroke-miterlimit",
+  "stroke-opacity",
+  "initial-letter",
+  "font-size-adjust"
+ ],
+ "timeProps": [
+  "transition-delay",
+  "transition-duration",
+  "animation-delay",
+  "animation-duration",
+  "animation"
+ ],
+ "unitlessFns": [
+  "oklch",
+  "oklab",
+  "lab",
+  "lch",
+  "hsl",
+  "hsla",
+  "rgb",
+  "rgba",
+  "hwb",
+  "color",
+  "color-mix",
+  "light-dark",
+  "brightness",
+  "saturate",
+  "contrast",
+  "grayscale",
+  "sepia",
+  "invert",
+  "opacity",
+  "scale",
+  "scalex",
+  "scaley",
+  "scalez",
+  "scale3d",
+  "steps",
+  "cubic-bezier",
+  "linear",
+  "radial",
+  "conic"
+ ],
+ "lengthFns": [
+  "calc",
+  "min",
+  "max",
+  "clamp",
+  "round",
+  "mod",
+  "rem",
+  "abs",
+  "sign",
+  "hypot",
+  "pow",
+  "sqrt",
+  "log",
+  "exp",
+  "blur",
+  "drop-shadow"
+ ],
+ "colorWords": [
+  "black",
+  "silver",
+  "gray",
+  "white",
+  "maroon",
+  "red",
+  "purple",
+  "fuchsia",
+  "green",
+  "lime",
+  "olive",
+  "yellow",
+  "navy",
+  "blue",
+  "teal",
+  "aqua",
+  "orange",
+  "gold",
+  "pink",
+  "brown",
+  "violet",
+  "cyan",
+  "magenta",
+  "indigo",
+  "crimson",
+  "coral",
+  "tomato",
+  "goldenrod",
+  "khaki",
+  "slategray",
+  "slategrey",
+  "dimgray",
+  "dimgrey",
+  "lightgray",
+  "lightgrey",
+  "darkgray",
+  "darkgrey",
+  "gainsboro",
+  "whitesmoke",
+  "ghostwhite",
+  "ivory",
+  "beige",
+  "linen",
+  "seashell",
+  "snow",
+  "honeydew",
+  "mintcream",
+  "azure",
+  "aliceblue",
+  "lavender",
+  "canvas",
+  "canvastext",
+  "linktext",
+  "visitedtext",
+  "activetext",
+  "buttonface",
+  "buttontext",
+  "buttonborder",
+  "field",
+  "fieldtext",
+  "highlight",
+  "highlighttext",
+  "currentcolor",
+  "transparent"
+ ],
+ "fluidProps": [
+  "font-size",
+  "width",
+  "height",
+  "inline-size",
+  "block-size",
+  "min-width",
+  "max-width",
+  "min-height",
+  "max-height",
+  "gap",
+  "row-gap",
+  "column-gap",
+  "padding",
+  "margin",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "padding-inline",
+  "padding-block",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "margin-inline",
+  "margin-block",
+  "letter-spacing",
+  "border-radius"
+ ],
+ "placeWords": {
+  "center": [
+   "center",
+   "center"
+  ],
+  "start": [
+   "start",
+   "flex-start"
+  ],
+  "end": [
+   "end",
+   "flex-end"
+  ],
+  "between": [
+   "center",
+   "space-between"
+  ],
+  "around": [
+   "center",
+   "space-around"
+  ],
+  "evenly": [
+   "center",
+   "space-evenly"
+  ],
+  "stretch": [
+   "stretch",
+   "flex-start"
+  ],
+  "baseline": [
+   "baseline",
+   "flex-start"
+  ]
+ },
+ "easings": {
+  "snap": "cubic-bezier(0.2, 0.9, 0.3, 1)",
+  "smooth": "cubic-bezier(0.4, 0, 0.2, 1)",
+  "bounce": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  "linear": "linear",
+  "ease": "ease",
+  "ease-in": "ease-in",
+  "ease-out": "ease-out",
+  "ease-in-out": "ease-in-out"
+ },
+ "defaultTokens": {
+  "color.ink": "#16161d",
+  "color.paper": "#faf7f2",
+  "color.card": "#ffffff",
+  "color.muted": "#6f6a7a",
+  "color.line": "#e5ded2",
+  "color.accent": "oklch(62% 0.19 35)",
+  "color.accent-ink": "#fff6ee",
+  "color.ok": "#2e7d4f",
+  "color.err": "#b3372e",
+  "space.1": "4",
+  "space.2": "8",
+  "space.3": "12",
+  "space.4": "16",
+  "space.5": "24",
+  "space.6": "32",
+  "space.7": "48",
+  "space.8": "64",
+  "radius.sm": "8",
+  "radius.md": "14",
+  "radius.lg": "22",
+  "radius.full": "999",
+  "shadow.sm": "0 1 2 color.ink/8, 0 1 3 color.ink/6",
+  "shadow.md": "0 2 4 color.ink/10, 0 4 12 color.ink/8",
+  "shadow.lg": "0 4 8 color.ink/12, 0 12 32 color.ink/12",
+  "shadow.xl": "0 8 16 color.ink/14, 0 24 64 color.ink/16",
+  "font.sans": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+  "font.mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace"
+ },
+ "semanticNames": [
+  "size",
+  "row",
+  "column",
+  "grid",
+  "stack",
+  "place",
+  "center",
+  "cover",
+  "sticky",
+  "font",
+  "fluid",
+  "shadow",
+  "radius",
+  "circle",
+  "align",
+  "z",
+  "grow",
+  "shrink",
+  "basis",
+  "truncate",
+  "visually-hidden",
+  "transition",
+  "animate",
+  "stagger",
+  "overlap",
+  "bend",
+  "bend-y",
+  "bend-up",
+  "fold",
+  "bend-around",
+  "stretch",
+  "gradient",
+  "text-stroke",
+  "yield",
+  "outline-shape",
+  "rotate",
+  "gradient-text",
+  "gradient-flow",
+  "texture",
+  "aura",
+  "aura-glow",
+  "aura-particle",
+  "aura-particles",
+  "glow-particle",
+  "glow-particles",
+  "aura-glow-particle",
+  "aura-glow-particles",
+  "glass",
+  "tilt",
+  "slider"
+ ],
+ "namedColors": {
+  "aliceblue": "#f0f8ff",
+  "antiquewhite": "#faebd7",
+  "aqua": "#00ffff",
+  "aquamarine": "#7fffd4",
+  "azure": "#f0ffff",
+  "beige": "#f5f5dc",
+  "bisque": "#ffe4c4",
+  "black": "#000000",
+  "blanchedalmond": "#ffebcd",
+  "blue": "#0000ff",
+  "blueviolet": "#8a2be2",
+  "brown": "#a52a2a",
+  "burlywood": "#deb887",
+  "cadetblue": "#5f9ea0",
+  "chartreuse": "#7fff00",
+  "chocolate": "#d2691e",
+  "coral": "#ff7f50",
+  "cornflowerblue": "#6495ed",
+  "cornsilk": "#fff8dc",
+  "crimson": "#dc143c",
+  "cyan": "#00ffff",
+  "darkblue": "#00008b",
+  "darkcyan": "#008b8b",
+  "darkgoldenrod": "#b8860b",
+  "darkgray": "#a9a9a9",
+  "darkgreen": "#006400",
+  "darkgrey": "#a9a9a9",
+  "darkkhaki": "#bdb76b",
+  "darkmagenta": "#8b008b",
+  "darkolivegreen": "#556b2f",
+  "darkorange": "#ff8c00",
+  "darkorchid": "#9932cc",
+  "darkred": "#8b0000",
+  "darksalmon": "#e9967a",
+  "darkseagreen": "#8fbc8f",
+  "darkslateblue": "#483d8b",
+  "darkslategray": "#2f4f4f",
+  "darkslategrey": "#2f4f4f",
+  "darkturquoise": "#00ced1",
+  "darkviolet": "#9400d3",
+  "deeppink": "#ff1493",
+  "deepskyblue": "#00bfff",
+  "dimgray": "#696969",
+  "dimgrey": "#696969",
+  "dodgerblue": "#1e90ff",
+  "firebrick": "#b22222",
+  "floralwhite": "#fffaf0",
+  "forestgreen": "#228b22",
+  "fuchsia": "#ff00ff",
+  "gainsboro": "#dcdcdc",
+  "ghostwhite": "#f8f8ff",
+  "gold": "#ffd700",
+  "goldenrod": "#daa520",
+  "gray": "#808080",
+  "green": "#008000",
+  "greenyellow": "#adff2f",
+  "grey": "#808080",
+  "honeydew": "#f0fff0",
+  "hotpink": "#ff69b4",
+  "indianred": "#cd5c5c",
+  "indigo": "#4b0082",
+  "ivory": "#fffff0",
+  "khaki": "#f0e68c",
+  "lavender": "#e6e6fa",
+  "lavenderblush": "#fff0f5",
+  "lawngreen": "#7cfc00",
+  "lemonchiffon": "#fffacd",
+  "lightblue": "#add8e6",
+  "lightcoral": "#f08080",
+  "lightcyan": "#e0ffff",
+  "lightgoldenrodyellow": "#fafad2",
+  "lightgray": "#d3d3d3",
+  "lightgreen": "#90ee90",
+  "lightgrey": "#d3d3d3",
+  "lightpink": "#ffb6c1",
+  "lightsalmon": "#ffa07a",
+  "lightseagreen": "#20b2aa",
+  "lightskyblue": "#87cefa",
+  "lightslategray": "#778899",
+  "lightslategrey": "#778899",
+  "lightsteelblue": "#b0c4de",
+  "lightyellow": "#ffffe0",
+  "lime": "#00ff00",
+  "limegreen": "#32cd32",
+  "linen": "#faf0e6",
+  "magenta": "#ff00ff",
+  "maroon": "#800000",
+  "mediumaquamarine": "#66cdaa",
+  "mediumblue": "#0000cd",
+  "mediumorchid": "#ba55d3",
+  "mediumpurple": "#9370db",
+  "mediumseagreen": "#3cb371",
+  "mediumslateblue": "#7b68ee",
+  "mediumspringgreen": "#00fa9a",
+  "mediumturquoise": "#48d1cc",
+  "mediumvioletred": "#c71585",
+  "midnightblue": "#191970",
+  "mintcream": "#f5fffa",
+  "mistyrose": "#ffe4e1",
+  "moccasin": "#ffe4b5",
+  "navajowhite": "#ffdead",
+  "navy": "#000080",
+  "oldlace": "#fdf5e6",
+  "olive": "#808000",
+  "olivedrab": "#6b8e23",
+  "orange": "#ffa500",
+  "orangered": "#ff4500",
+  "orchid": "#da70d6",
+  "palegoldenrod": "#eee8aa",
+  "palegreen": "#98fb98",
+  "paleturquoise": "#afeeee",
+  "palevioletred": "#db7093",
+  "papayawhip": "#ffefd5",
+  "peachpuff": "#ffdab9",
+  "peru": "#cd853f",
+  "pink": "#ffc0cb",
+  "plum": "#dda0dd",
+  "powderblue": "#b0e0e6",
+  "purple": "#800080",
+  "rebeccapurple": "#663399",
+  "red": "#ff0000",
+  "rosybrown": "#bc8f8f",
+  "royalblue": "#4169e1",
+  "saddlebrown": "#8b4513",
+  "salmon": "#fa8072",
+  "sandybrown": "#f4a460",
+  "seagreen": "#2e8b57",
+  "seashell": "#fff5ee",
+  "sienna": "#a0522d",
+  "silver": "#c0c0c0",
+  "skyblue": "#87ceeb",
+  "slateblue": "#6a5acd",
+  "slategray": "#708090",
+  "slategrey": "#708090",
+  "snow": "#fffafa",
+  "springgreen": "#00ff7f",
+  "steelblue": "#4682b4",
+  "tan": "#d2b48c",
+  "teal": "#008080",
+  "thistle": "#d8bfd8",
+  "tomato": "#ff6347",
+  "turquoise": "#40e0d0",
+  "violet": "#ee82ee",
+  "wheat": "#f5deb3",
+  "white": "#ffffff",
+  "whitesmoke": "#f5f5f5",
+  "yellow": "#ffff00",
+  "yellowgreen": "#9acd32"
+ },
+ "texture": {
+  "generators": [
+   "noise",
+   "bump",
+   "lines",
+   "dots",
+   "grid",
+   "checker",
+   "weave",
+   "carbon",
+   "waves",
+   "hex",
+   "rings",
+   "bricks",
+   "herringbone",
+   "plaid",
+   "scales",
+   "chevron",
+   "diamonds",
+   "triangles",
+   "starfield",
+   "terrazzo"
+  ],
+  "blendModes": [
+   "normal",
+   "multiply",
+   "screen",
+   "overlay",
+   "soft-light",
+   "hard-light",
+   "color-burn",
+   "color-dodge",
+   "darken",
+   "lighten",
+   "difference",
+   "exclusion"
+  ],
+  "keys": {
+   "scale": {
+    "words": 1,
+    "kind": "number",
+    "min": 0.1,
+    "max": 2000,
+    "doc": "feature size in px: how big the grains, cells or lines are"
+   },
+   "intensity": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 2,
+    "doc": "how strong the layer is, 0 to 1 (more than 1 over-drives it)"
+   },
+   "contrast": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 40,
+    "doc": "noise contrast: 1 is as generated, higher is harsher"
+   },
+   "threshold": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 1,
+    "doc": "noise cut-off: only values above it show (glitter uses a high one)"
+   },
+   "contour": {
+    "words": 1,
+    "kind": "number",
+    "min": 0.005,
+    "max": 0.5,
+    "doc": "draw thin lines where the noise crosses the threshold, instead of a plain cut: veins, rings, contours"
+   },
+   "octaves": {
+    "words": 1,
+    "kind": "number",
+    "min": 1,
+    "max": 8,
+    "int": true,
+    "doc": "noise detail layers, 1 is smooth, 5 is rough"
+   },
+   "seed": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 99999,
+    "int": true,
+    "doc": "a different random pattern with the same look"
+   },
+   "stretch": {
+    "words": 2,
+    "kind": "numbers",
+    "min": 0.1,
+    "max": 200,
+    "doc": "stretch noise features along x and y, e.g. stretch 40 1 for wood grain"
+   },
+   "depth": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 30,
+    "doc": "bump height: how deep the relief looks"
+   },
+   "light": {
+    "words": 1,
+    "kind": "number",
+    "min": -360,
+    "max": 360,
+    "doc": "bump light direction in degrees"
+   },
+   "angle": {
+    "words": 1,
+    "kind": "number",
+    "min": -360,
+    "max": 360,
+    "doc": "direction of lines and patterns, in degrees"
+   },
+   "thickness": {
+    "words": 1,
+    "kind": "number",
+    "min": 0.1,
+    "max": 500,
+    "doc": "line or grid-line width in px"
+   },
+   "radius": {
+    "words": 1,
+    "kind": "number",
+    "min": 0.02,
+    "max": 1,
+    "doc": "dot size as a fraction of the cell (plaid: how wide the bands are as a fraction of the repeat)"
+   },
+   "softness": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 1,
+    "doc": "how soft the edges of dots and lines are"
+   },
+   "animate": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 60000,
+    "doc": "milliseconds per shimmer step (film-grain flicker); 0 is still"
+   },
+   "type": {
+    "words": 1,
+    "kind": "word",
+    "values": [
+     "fractal",
+     "turbulence"
+    ],
+    "doc": "noise flavour: fractal is clouds, turbulence is veins"
+   },
+   "blend": {
+    "words": 1,
+    "kind": "word",
+    "values": [
+     "normal",
+     "multiply",
+     "screen",
+     "overlay",
+     "soft-light",
+     "hard-light",
+     "color-burn",
+     "color-dodge",
+     "darken",
+     "lighten",
+     "difference",
+     "exclusion"
+    ],
+    "doc": "how the layer mixes with what is under it"
+   },
+   "color": {
+    "words": 1,
+    "kind": "color",
+    "doc": "the main colour (dark end of noise, ink of lines and dots)"
+   },
+   "color2": {
+    "words": 1,
+    "kind": "color",
+    "doc": "the second colour (light end of noise, background cell of patterns)"
+   },
+   "figure": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 1,
+    "doc": "rings generator: how strongly the growth rings arch into a cathedral figure, 0 is straight grain"
+   },
+   "warp": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 1,
+    "doc": "rings generator: how much each ring wobbles along its length"
+   },
+   "pores": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 1,
+    "doc": "rings generator: fine fibre and pore streaks between the rings"
+   },
+   "knots": {
+    "words": 1,
+    "kind": "number",
+    "min": 0,
+    "max": 8,
+    "int": true,
+    "doc": "rings generator: how many knots in one tile (the pattern repeats, so keep it small)"
+   },
+   "planks": {
+    "words": 1,
+    "kind": "number",
+    "min": 24,
+    "max": 1200,
+    "doc": "rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each"
+   },
+   "symmetrical": {
+    "words": 1,
+    "kind": "word",
+    "values": [
+     "both",
+     "x",
+     "y"
+    ],
+    "optional": true,
+    "doc": "mirror every other tile, so each edge meets its own reflection: no seam, and the repeat is twice as far apart. x mirrors left to right, y top to bottom, both (the default) does both. Works on the image-based textures (noise, bump, rings, waves, hex)."
+   },
+   "density": {
+    "words": 1,
+    "kind": "number",
+    "min": 0.05,
+    "max": 20,
+    "doc": "starfield and terrazzo: how many stars or chips in a tile, 1 is normal"
+   },
+   "invert": {
+    "words": 0,
+    "kind": "flag",
+    "doc": "swap the two colours"
+   }
+  },
+  "presetNames": [
+   "grain",
+   "noise",
+   "rough",
+   "sand",
+   "paper",
+   "cloud",
+   "concrete",
+   "stone",
+   "crumpled",
+   "glitter",
+   "frost",
+   "marble",
+   "wood",
+   "oak",
+   "walnut",
+   "cherry",
+   "maple",
+   "pine",
+   "mahogany",
+   "ebony",
+   "birch",
+   "oak-planks",
+   "walnut-planks",
+   "bark",
+   "leather",
+   "brushed",
+   "canvas",
+   "linen",
+   "denim",
+   "carbon",
+   "scanlines",
+   "halftone",
+   "dots",
+   "lines",
+   "grid",
+   "checker",
+   "crosshatch",
+   "stripes",
+   "waves",
+   "hex",
+   "bricks",
+   "bricks-old",
+   "herringbone",
+   "plaid",
+   "tartan",
+   "gingham",
+   "scales",
+   "mermaid",
+   "shingles",
+   "chevron",
+   "argyle",
+   "lowpoly",
+   "tiles",
+   "blueprint",
+   "granite",
+   "slate",
+   "sandstone",
+   "terrazzo",
+   "confetti",
+   "rust",
+   "corrugated",
+   "cork",
+   "kraft",
+   "felt",
+   "burlap",
+   "stucco",
+   "starfield",
+   "snow",
+   "grass",
+   "water",
+   "rain",
+   "lava",
+   "topo"
+  ],
+  "presets": {
+   "grain": {
+    "doc": "fine film grain, neutral on any colour",
+    "mask": true,
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.1,
+      "octaves": 2,
+      "contrast": 1.7,
+      "intensity": 0.5,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "noise": {
+    "doc": "coarser static",
+    "mask": true,
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 2.6,
+      "octaves": 3,
+      "contrast": 1.9,
+      "intensity": 0.5,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "rough": {
+    "doc": "gritty relief, like a rough cast wall",
+    "mask": true,
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 3,
+      "octaves": 4,
+      "depth": 3.4,
+      "light": 135,
+      "intensity": 0.75,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "sand": {
+    "doc": "warm fine sand grains",
+    "mask": true,
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 1.5,
+      "octaves": 3,
+      "depth": 2.2,
+      "light": 130,
+      "intensity": 0.7,
+      "color": "#5a4426",
+      "color2": "#fff1d0",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "paper": {
+    "doc": "soft paper fibre with a little unevenness",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.5,
+      "octaves": 4,
+      "contrast": 1.2,
+      "intensity": 0.3,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     },
+     {
+      "gen": "noise",
+      "scale": 120,
+      "octaves": 3,
+      "contrast": 1.3,
+      "intensity": 0.25,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light",
+      "seed": 7
+     }
+    ]
+   },
+   "cloud": {
+    "doc": "big soft cloudy variation",
+    "mask": true,
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 90,
+      "octaves": 5,
+      "contrast": 1.6,
+      "intensity": 0.7,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light"
+     }
+    ]
+   },
+   "concrete": {
+    "doc": "pitted concrete",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 6,
+      "octaves": 5,
+      "depth": 2.6,
+      "light": 135,
+      "intensity": 0.7,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     },
+     {
+      "gen": "noise",
+      "scale": 140,
+      "octaves": 4,
+      "contrast": 1.5,
+      "intensity": 0.45,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light",
+      "seed": 3
+     }
+    ]
+   },
+   "stone": {
+    "doc": "carved stone with broad relief",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 26,
+      "octaves": 5,
+      "depth": 2.4,
+      "light": 125,
+      "intensity": 0.75,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "crumpled": {
+    "doc": "crumpled foil or paper, big creases",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 34,
+      "octaves": 4,
+      "depth": 4,
+      "light": 135,
+      "intensity": 0.8,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 11
+     }
+    ]
+   },
+   "glitter": {
+    "doc": "sparse bright sparkles",
+    "mask": true,
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.2,
+      "octaves": 1,
+      "contrast": 16,
+      "threshold": 0.66,
+      "intensity": 1,
+      "color": "rgba(255,255,255,0)",
+      "color2": "#fff",
+      "blend": "screen",
+      "seed": 5
+     }
+    ]
+   },
+   "frost": {
+    "doc": "fine icy crystals",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 2.2,
+      "octaves": 4,
+      "depth": 3.2,
+      "light": 140,
+      "intensity": 0.95,
+      "color": "rgba(160,210,255,0)",
+      "color2": "#ffffff",
+      "blend": "screen"
+     }
+    ]
+   },
+   "marble": {
+    "doc": "veined marble",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 120,
+      "octaves": 5,
+      "contour": 0.035,
+      "threshold": 0.5,
+      "intensity": 0.9,
+      "color": "#6c6877",
+      "color2": "rgba(247,245,240,0)",
+      "blend": "multiply",
+      "seed": 4
+     },
+     {
+      "gen": "noise",
+      "scale": 120,
+      "octaves": 5,
+      "contour": 0.16,
+      "threshold": 0.5,
+      "intensity": 0.25,
+      "color": "#9b97a6",
+      "color2": "rgba(247,245,240,0)",
+      "blend": "multiply",
+      "seed": 4
+     },
+     {
+      "gen": "noise",
+      "scale": 200,
+      "octaves": 3,
+      "contrast": 1.4,
+      "intensity": 0.3,
+      "color": "#cfc9c0",
+      "color2": "#fbfaf7",
+      "blend": "soft-light",
+      "seed": 21
+     }
+    ]
+   },
+   "wood": {
+    "doc": "long wood grain, along x (use angle 90 for vertical)",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 4,
+      "octaves": 3,
+      "contrast": 1.8,
+      "stretch": [
+       40,
+       1
+      ],
+      "intensity": 1,
+      "color": "#7a4b24",
+      "color2": "#c99a62",
+      "blend": "multiply"
+     }
+    ]
+   },
+   "oak": {
+    "doc": "oak: open grain, tan with brown rings",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 11,
+      "color": "#8a5f33",
+      "color2": "#c9a574",
+      "contrast": 1.3,
+      "figure": 0.55,
+      "warp": 0.45,
+      "pores": 0.5,
+      "seed": 3,
+      "blend": "normal"
+     }
+    ]
+   },
+   "walnut": {
+    "doc": "walnut: dark chocolate with black-brown rings",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 9,
+      "color": "#2b1a10",
+      "color2": "#6a4631",
+      "contrast": 1.2,
+      "figure": 0.5,
+      "warp": 0.55,
+      "pores": 0.45,
+      "seed": 8,
+      "blend": "normal"
+     }
+    ]
+   },
+   "cherry": {
+    "doc": "cherry: warm red-brown with fine rings",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 8,
+      "color": "#7a3a1c",
+      "color2": "#bb7443",
+      "contrast": 1.1,
+      "figure": 0.4,
+      "warp": 0.35,
+      "pores": 0.35,
+      "seed": 5,
+      "blend": "normal"
+     }
+    ]
+   },
+   "maple": {
+    "doc": "maple: pale, tight, nearly plain grain",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 13,
+      "color": "#c79a5a",
+      "color2": "#ecd6ab",
+      "contrast": 0.8,
+      "figure": 0.25,
+      "warp": 0.3,
+      "pores": 0.25,
+      "seed": 11,
+      "blend": "normal"
+     }
+    ]
+   },
+   "pine": {
+    "doc": "pine: light yellow wood with wide rings and knots",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 16,
+      "color": "#b5742f",
+      "color2": "#e6c081",
+      "contrast": 1.4,
+      "figure": 0.65,
+      "warp": 0.5,
+      "pores": 0.4,
+      "knots": 2,
+      "seed": 14,
+      "blend": "normal"
+     }
+    ]
+   },
+   "mahogany": {
+    "doc": "mahogany: deep red-brown, straight grain",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 10,
+      "color": "#4a2012",
+      "color2": "#8c4727",
+      "contrast": 1.1,
+      "figure": 0.3,
+      "warp": 0.3,
+      "pores": 0.4,
+      "seed": 6,
+      "blend": "normal"
+     }
+    ]
+   },
+   "ebony": {
+    "doc": "ebony: nearly black with faint streaks",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 12,
+      "color": "#0c0908",
+      "color2": "#2d2621",
+      "contrast": 0.7,
+      "figure": 0.2,
+      "warp": 0.25,
+      "pores": 0.3,
+      "seed": 2,
+      "blend": "normal"
+     }
+    ]
+   },
+   "birch": {
+    "doc": "birch: creamy pale wood with fine rings",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 10,
+      "color": "#d2ae74",
+      "color2": "#f0dfb9",
+      "contrast": 0.9,
+      "figure": 0.3,
+      "warp": 0.35,
+      "pores": 0.25,
+      "seed": 9,
+      "blend": "normal"
+     }
+    ]
+   },
+   "oak-planks": {
+    "doc": "oak laid as planks, with seams",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 11,
+      "color": "#8a5f33",
+      "color2": "#c9a574",
+      "contrast": 1.3,
+      "figure": 0.55,
+      "warp": 0.45,
+      "pores": 0.5,
+      "planks": 110,
+      "seed": 3,
+      "blend": "normal"
+     }
+    ]
+   },
+   "walnut-planks": {
+    "doc": "walnut laid as planks, with seams",
+    "layers": [
+     {
+      "gen": "rings",
+      "scale": 9,
+      "color": "#2b1a10",
+      "color2": "#6a4631",
+      "contrast": 1.2,
+      "figure": 0.5,
+      "warp": 0.55,
+      "pores": 0.45,
+      "planks": 96,
+      "seed": 8,
+      "blend": "normal"
+     }
+    ]
+   },
+   "bark": {
+    "doc": "rough vertical bark",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 10,
+      "octaves": 4,
+      "depth": 5,
+      "stretch": [
+       1,
+       6
+      ],
+      "light": 150,
+      "intensity": 0.8,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "leather": {
+    "doc": "pebbled leather",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 5,
+      "octaves": 2,
+      "depth": 4.2,
+      "light": 120,
+      "intensity": 0.85,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "brushed": {
+    "doc": "brushed metal, fine lines along x",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.2,
+      "octaves": 2,
+      "contrast": 1.5,
+      "stretch": [
+       60,
+       1
+      ],
+      "intensity": 0.5,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "canvas": {
+    "doc": "artist canvas weave",
+    "layers": [
+     {
+      "gen": "weave",
+      "scale": 3,
+      "thickness": 1,
+      "intensity": 0.5,
+      "color": "#000",
+      "blend": "multiply"
+     },
+     {
+      "gen": "noise",
+      "scale": 1.4,
+      "octaves": 3,
+      "contrast": 1.3,
+      "intensity": 0.3,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "linen": {
+    "doc": "loose linen weave with slubs",
+    "layers": [
+     {
+      "gen": "weave",
+      "scale": 4,
+      "thickness": 1.2,
+      "intensity": 0.4,
+      "color": "#5a4a32",
+      "blend": "multiply"
+     },
+     {
+      "gen": "noise",
+      "scale": 80,
+      "octaves": 3,
+      "contrast": 1.4,
+      "stretch": [
+       8,
+       1
+      ],
+      "intensity": 0.25,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light",
+      "seed": 9
+     }
+    ]
+   },
+   "denim": {
+    "doc": "diagonal twill, blue by default",
+    "layers": [
+     {
+      "gen": "lines",
+      "angle": 45,
+      "scale": 3,
+      "thickness": 1.4,
+      "intensity": 0.45,
+      "color": "#0d2147",
+      "blend": "multiply"
+     },
+     {
+      "gen": "noise",
+      "scale": 1.3,
+      "octaves": 3,
+      "contrast": 1.4,
+      "intensity": 0.3,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 2
+     }
+    ]
+   },
+   "carbon": {
+    "doc": "carbon fibre twill",
+    "layers": [
+     {
+      "gen": "carbon",
+      "scale": 20,
+      "intensity": 1,
+      "color": "#151515",
+      "color2": "#262626",
+      "blend": "normal"
+     }
+    ]
+   },
+   "scanlines": {
+    "doc": "CRT scanlines",
+    "layers": [
+     {
+      "gen": "lines",
+      "angle": 0,
+      "scale": 4,
+      "thickness": 2,
+      "intensity": 0.28,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "halftone": {
+    "doc": "newsprint dots",
+    "layers": [
+     {
+      "gen": "dots",
+      "scale": 8,
+      "radius": 0.2,
+      "softness": 0.2,
+      "intensity": 0.55,
+      "color": "#000",
+      "blend": "multiply",
+      "stagger": true
+     }
+    ]
+   },
+   "dots": {
+    "doc": "a plain dot grid",
+    "layers": [
+     {
+      "gen": "dots",
+      "scale": 14,
+      "radius": 0.16,
+      "softness": 0.05,
+      "intensity": 0.35,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "lines": {
+    "doc": "diagonal hairlines",
+    "layers": [
+     {
+      "gen": "lines",
+      "angle": 45,
+      "scale": 8,
+      "thickness": 1,
+      "intensity": 0.3,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "grid": {
+    "doc": "a square grid, like graph paper",
+    "layers": [
+     {
+      "gen": "grid",
+      "scale": 24,
+      "thickness": 1,
+      "intensity": 0.25,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "checker": {
+    "doc": "checkerboard",
+    "layers": [
+     {
+      "gen": "checker",
+      "scale": 24,
+      "intensity": 0.12,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "crosshatch": {
+    "doc": "crossed hairlines",
+    "layers": [
+     {
+      "gen": "lines",
+      "angle": 45,
+      "scale": 6,
+      "thickness": 1,
+      "intensity": 0.28,
+      "color": "#000",
+      "blend": "normal"
+     },
+     {
+      "gen": "lines",
+      "angle": -45,
+      "scale": 6,
+      "thickness": 1,
+      "intensity": 0.28,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "stripes": {
+    "doc": "bold diagonal stripes",
+    "layers": [
+     {
+      "gen": "lines",
+      "angle": 45,
+      "scale": 32,
+      "thickness": 16,
+      "intensity": 0.12,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "waves": {
+    "doc": "soft repeating waves",
+    "layers": [
+     {
+      "gen": "waves",
+      "scale": 40,
+      "thickness": 1.2,
+      "intensity": 0.3,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "hex": {
+    "doc": "honeycomb",
+    "layers": [
+     {
+      "gen": "hex",
+      "scale": 28,
+      "thickness": 1,
+      "intensity": 0.28,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "bricks": {
+    "doc": "a red brick wall, light mortar",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 3,
+      "octaves": 3,
+      "depth": 2.2,
+      "light": 135,
+      "intensity": 0.55,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 3
+     },
+     {
+      "gen": "bricks",
+      "scale": 56,
+      "thickness": 3.5,
+      "intensity": 1,
+      "color": "#d9d0c4",
+      "color2": "#a4402b",
+      "blend": "normal"
+     }
+    ]
+   },
+   "bricks-old": {
+    "doc": "weathered dark brick",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 40,
+      "octaves": 4,
+      "contrast": 1.5,
+      "intensity": 0.5,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light",
+      "seed": 12
+     },
+     {
+      "gen": "bump",
+      "scale": 3,
+      "octaves": 4,
+      "depth": 3.2,
+      "light": 135,
+      "intensity": 0.7,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 5
+     },
+     {
+      "gen": "bricks",
+      "scale": 52,
+      "thickness": 4,
+      "intensity": 1,
+      "color": "#6d665e",
+      "color2": "#74301f",
+      "blend": "normal"
+     }
+    ]
+   },
+   "herringbone": {
+    "doc": "parquet laid in a zigzag, every board a slightly different shade",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.2,
+      "octaves": 3,
+      "contrast": 1.4,
+      "stretch": [
+       30,
+       1
+      ],
+      "intensity": 0.25,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 4
+     },
+     {
+      "gen": "herringbone",
+      "scale": 22,
+      "thickness": 1.4,
+      "intensity": 1,
+      "color": "#2a1a0e",
+      "color2": "#b9854d",
+      "seed": 4,
+      "blend": "normal"
+     }
+    ]
+   },
+   "plaid": {
+    "doc": "simple plaid: wide bands crossing, thin lines between",
+    "layers": [
+     {
+      "gen": "plaid",
+      "scale": 64,
+      "thickness": 2,
+      "intensity": 0.5,
+      "color": "#9b1b1b",
+      "blend": "multiply"
+     }
+    ]
+   },
+   "tartan": {
+    "doc": "a red tartan with green and navy bands",
+    "layers": [
+     {
+      "gen": "plaid",
+      "scale": 96,
+      "thickness": 3,
+      "radius": 0.18,
+      "intensity": 0.6,
+      "color": "#0f1f55",
+      "blend": "multiply"
+     },
+     {
+      "gen": "plaid",
+      "scale": 48,
+      "thickness": 2,
+      "radius": 0.3,
+      "intensity": 0.65,
+      "color": "#12503a",
+      "blend": "multiply"
+     },
+     {
+      "gen": "plaid",
+      "scale": 48,
+      "thickness": 1,
+      "radius": 0.001,
+      "intensity": 1,
+      "color": "#a11d24",
+      "color2": "#a11d24",
+      "blend": "normal"
+     }
+    ]
+   },
+   "gingham": {
+    "doc": "small checks, the picnic cloth",
+    "layers": [
+     {
+      "gen": "plaid",
+      "scale": 28,
+      "thickness": 1,
+      "radius": 0.5,
+      "intensity": 0.5,
+      "color": "#c0392b",
+      "color2": "#ffffff",
+      "blend": "normal"
+     }
+    ]
+   },
+   "scales": {
+    "doc": "overlapping scales",
+    "layers": [
+     {
+      "gen": "scales",
+      "scale": 36,
+      "thickness": 1.2,
+      "intensity": 0.4,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "mermaid": {
+    "doc": "teal fish scales",
+    "layers": [
+     {
+      "gen": "scales",
+      "scale": 34,
+      "thickness": 1.4,
+      "intensity": 1,
+      "color": "#0a5560",
+      "color2": "#1fa8a0",
+      "blend": "normal"
+     }
+    ]
+   },
+   "shingles": {
+    "doc": "roof shingles",
+    "layers": [
+     {
+      "gen": "scales",
+      "scale": 60,
+      "thickness": 2,
+      "intensity": 1,
+      "color": "#201c1a",
+      "color2": "#5b4a42",
+      "blend": "normal"
+     }
+    ]
+   },
+   "chevron": {
+    "doc": "zigzag bands",
+    "layers": [
+     {
+      "gen": "chevron",
+      "scale": 40,
+      "thickness": 6,
+      "intensity": 0.3,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "argyle": {
+    "doc": "a diamond lattice, filled",
+    "layers": [
+     {
+      "gen": "diamonds",
+      "scale": 44,
+      "thickness": 1.4,
+      "intensity": 0.9,
+      "color": "#e8e0d0",
+      "color2": "#2f3e6b",
+      "blend": "normal"
+     }
+    ]
+   },
+   "lowpoly": {
+    "doc": "low-poly facets in two tones",
+    "layers": [
+     {
+      "gen": "triangles",
+      "scale": 72,
+      "intensity": 0.5,
+      "color": "#000",
+      "color2": "#fff",
+      "seed": 3,
+      "blend": "overlay"
+     }
+    ]
+   },
+   "tiles": {
+    "doc": "square tiles with grout",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 40,
+      "octaves": 2,
+      "depth": 1.4,
+      "light": 135,
+      "intensity": 0.4,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 6
+     },
+     {
+      "gen": "grid",
+      "scale": 64,
+      "thickness": 3,
+      "intensity": 0.5,
+      "color": "#000",
+      "blend": "normal"
+     }
+    ]
+   },
+   "blueprint": {
+    "doc": "drafting grid, fine and coarse",
+    "layers": [
+     {
+      "gen": "grid",
+      "scale": 100,
+      "thickness": 1.4,
+      "intensity": 0.5,
+      "color": "#ffffff",
+      "blend": "normal"
+     },
+     {
+      "gen": "grid",
+      "scale": 20,
+      "thickness": 1,
+      "intensity": 0.22,
+      "color": "#ffffff",
+      "blend": "normal"
+     }
+    ]
+   },
+   "granite": {
+    "doc": "speckled granite",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.8,
+      "octaves": 1,
+      "contrast": 9,
+      "threshold": 0.62,
+      "intensity": 0.5,
+      "color": "rgba(0,0,0,0)",
+      "color2": "#000",
+      "blend": "multiply",
+      "seed": 2
+     },
+     {
+      "gen": "noise",
+      "scale": 1.8,
+      "octaves": 1,
+      "contrast": 9,
+      "threshold": 0.7,
+      "intensity": 0.55,
+      "color": "rgba(255,255,255,0)",
+      "color2": "#fff",
+      "blend": "screen",
+      "seed": 7
+     },
+     {
+      "gen": "bump",
+      "scale": 8,
+      "octaves": 3,
+      "depth": 1.2,
+      "light": 135,
+      "intensity": 0.4,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 4
+     }
+    ]
+   },
+   "slate": {
+    "doc": "layered slate",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 18,
+      "octaves": 4,
+      "depth": 2.4,
+      "stretch": [
+       2.4,
+       1
+      ],
+      "light": 135,
+      "intensity": 0.8,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 5
+     },
+     {
+      "gen": "noise",
+      "scale": 90,
+      "octaves": 3,
+      "contrast": 1.4,
+      "intensity": 0.35,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light",
+      "seed": 8
+     }
+    ]
+   },
+   "sandstone": {
+    "doc": "banded sandstone",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 3,
+      "octaves": 3,
+      "depth": 1.6,
+      "light": 130,
+      "intensity": 0.5,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 9
+     },
+     {
+      "gen": "noise",
+      "scale": 10,
+      "octaves": 3,
+      "contrast": 1.6,
+      "stretch": [
+       30,
+       1
+      ],
+      "intensity": 0.8,
+      "color": "#8a5a3a",
+      "color2": "#e2b784",
+      "blend": "multiply",
+      "seed": 14
+     }
+    ]
+   },
+   "terrazzo": {
+    "doc": "chips of stone in cement",
+    "layers": [
+     {
+      "gen": "terrazzo",
+      "scale": 240,
+      "density": 1,
+      "intensity": 0.9,
+      "color": "#c9a98f",
+      "color2": "#6b7a8f",
+      "seed": 6,
+      "blend": "normal"
+     }
+    ]
+   },
+   "confetti": {
+    "doc": "bright scraps scattered, flat",
+    "layers": [
+     {
+      "gen": "terrazzo",
+      "scale": 260,
+      "density": 0.5,
+      "intensity": 1,
+      "color": "#ff4d6d",
+      "color2": "#4dabf7",
+      "seed": 11,
+      "blend": "normal"
+     }
+    ]
+   },
+   "rust": {
+    "doc": "rusted metal",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 4,
+      "octaves": 4,
+      "depth": 3,
+      "light": 135,
+      "intensity": 0.6,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 3
+     },
+     {
+      "gen": "noise",
+      "scale": 70,
+      "octaves": 5,
+      "contrast": 1.9,
+      "intensity": 0.85,
+      "color": "#3b1d0b",
+      "color2": "#b4602a",
+      "blend": "multiply",
+      "seed": 5
+     }
+    ]
+   },
+   "corrugated": {
+    "doc": "corrugated metal sheet",
+    "layers": [
+     {
+      "gen": "lines",
+      "angle": 90,
+      "scale": 12,
+      "thickness": 6,
+      "softness": 1,
+      "intensity": 0.3,
+      "color": "#000",
+      "blend": "overlay"
+     }
+    ]
+   },
+   "cork": {
+    "doc": "cork board",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 4,
+      "octaves": 3,
+      "depth": 3,
+      "light": 135,
+      "intensity": 0.7,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 2
+     },
+     {
+      "gen": "noise",
+      "scale": 3,
+      "octaves": 3,
+      "contrast": 2.2,
+      "intensity": 0.8,
+      "color": "#8a5a2b",
+      "color2": "#d6a566",
+      "blend": "multiply",
+      "seed": 8
+     }
+    ]
+   },
+   "kraft": {
+    "doc": "brown packing paper",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.4,
+      "octaves": 3,
+      "contrast": 1.4,
+      "stretch": [
+       6,
+       1
+      ],
+      "intensity": 0.35,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 2
+     },
+     {
+      "gen": "noise",
+      "scale": 60,
+      "octaves": 3,
+      "contrast": 1.3,
+      "intensity": 0.25,
+      "color": "#6b4a2a",
+      "color2": "#d1a874",
+      "blend": "multiply",
+      "seed": 7
+     }
+    ]
+   },
+   "felt": {
+    "doc": "soft wool felt",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1,
+      "octaves": 4,
+      "contrast": 1.2,
+      "intensity": 0.45,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 3
+     },
+     {
+      "gen": "noise",
+      "scale": 40,
+      "octaves": 3,
+      "contrast": 1.2,
+      "intensity": 0.2,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light",
+      "seed": 9
+     }
+    ]
+   },
+   "burlap": {
+    "doc": "coarse sacking",
+    "layers": [
+     {
+      "gen": "weave",
+      "scale": 7,
+      "thickness": 2.2,
+      "intensity": 0.55,
+      "color": "#3b2a14",
+      "blend": "multiply"
+     },
+     {
+      "gen": "noise",
+      "scale": 30,
+      "octaves": 3,
+      "contrast": 1.5,
+      "stretch": [
+       6,
+       1
+      ],
+      "intensity": 0.3,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 4
+     }
+    ]
+   },
+   "stucco": {
+    "doc": "rough plaster",
+    "layers": [
+     {
+      "gen": "bump",
+      "scale": 9,
+      "octaves": 3,
+      "depth": 3.6,
+      "light": 135,
+      "intensity": 0.7,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "overlay",
+      "seed": 6
+     },
+     {
+      "gen": "noise",
+      "scale": 120,
+      "octaves": 3,
+      "contrast": 1.2,
+      "intensity": 0.2,
+      "color": "#000",
+      "color2": "#fff",
+      "blend": "soft-light",
+      "seed": 1
+     }
+    ]
+   },
+   "starfield": {
+    "doc": "a night sky of small and large stars",
+    "layers": [
+     {
+      "gen": "starfield",
+      "scale": 300,
+      "thickness": 2.4,
+      "density": 0.25,
+      "intensity": 1,
+      "color": "#cfe3ff",
+      "seed": 9,
+      "blend": "normal"
+     },
+     {
+      "gen": "starfield",
+      "scale": 240,
+      "thickness": 1.2,
+      "density": 1.3,
+      "intensity": 0.9,
+      "color": "#ffffff",
+      "seed": 5,
+      "blend": "normal"
+     }
+    ]
+   },
+   "snow": {
+    "doc": "fresh snow with a few sparkles",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 1.2,
+      "octaves": 1,
+      "contrast": 16,
+      "threshold": 0.72,
+      "intensity": 1,
+      "color": "rgba(255,255,255,0)",
+      "color2": "#fff",
+      "blend": "screen",
+      "seed": 5
+     },
+     {
+      "gen": "noise",
+      "scale": 90,
+      "octaves": 4,
+      "contrast": 1.4,
+      "intensity": 0.5,
+      "color": "#9fb6d6",
+      "color2": "#ffffff",
+      "blend": "soft-light",
+      "seed": 3
+     }
+    ]
+   },
+   "grass": {
+    "doc": "blades of grass seen from above",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 2,
+      "octaves": 4,
+      "contrast": 2,
+      "stretch": [
+       1,
+       9
+      ],
+      "intensity": 0.9,
+      "color": "#2f6b2a",
+      "color2": "#8cc152",
+      "blend": "multiply",
+      "seed": 4
+     }
+    ]
+   },
+   "water": {
+    "doc": "water with light ripples",
+    "layers": [
+     {
+      "gen": "waves",
+      "scale": 56,
+      "thickness": 1.6,
+      "intensity": 0.22,
+      "color": "#ffffff",
+      "blend": "normal"
+     },
+     {
+      "gen": "noise",
+      "scale": 100,
+      "octaves": 4,
+      "contrast": 1.5,
+      "intensity": 0.8,
+      "color": "#0a3d62",
+      "color2": "#3c9bd6",
+      "blend": "multiply",
+      "seed": 6
+     }
+    ]
+   },
+   "rain": {
+    "doc": "slanted rain streaks",
+    "layers": [
+     {
+      "gen": "lines",
+      "angle": 100,
+      "scale": 14,
+      "thickness": 1,
+      "softness": 0.6,
+      "intensity": 0.35,
+      "color": "#ffffff",
+      "blend": "normal"
+     }
+    ]
+   },
+   "lava": {
+    "doc": "glowing cracks in dark rock",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 90,
+      "octaves": 4,
+      "contour": 0.05,
+      "threshold": 0.5,
+      "intensity": 1,
+      "color": "#ffb300",
+      "color2": "rgba(255,60,0,0)",
+      "blend": "screen",
+      "seed": 7
+     },
+     {
+      "gen": "noise",
+      "scale": 60,
+      "octaves": 5,
+      "contrast": 1.8,
+      "intensity": 0.9,
+      "color": "#1a0500",
+      "color2": "#7a1a00",
+      "blend": "multiply",
+      "seed": 3
+     }
+    ]
+   },
+   "topo": {
+    "doc": "contour lines, like a map",
+    "layers": [
+     {
+      "gen": "noise",
+      "scale": 140,
+      "octaves": 4,
+      "contour": 0.02,
+      "threshold": 0.4,
+      "intensity": 0.35,
+      "color": "#000",
+      "color2": "rgba(0,0,0,0)",
+      "blend": "normal",
+      "seed": 8
+     },
+     {
+      "gen": "noise",
+      "scale": 140,
+      "octaves": 4,
+      "contour": 0.02,
+      "threshold": 0.5,
+      "intensity": 0.5,
+      "color": "#000",
+      "color2": "rgba(0,0,0,0)",
+      "blend": "normal",
+      "seed": 8
+     },
+     {
+      "gen": "noise",
+      "scale": 140,
+      "octaves": 4,
+      "contour": 0.02,
+      "threshold": 0.6,
+      "intensity": 0.35,
+      "color": "#000",
+      "color2": "rgba(0,0,0,0)",
+      "blend": "normal",
+      "seed": 8
+     }
+    ]
+   }
+  }
+ },
+ "aura": {
+  "fromWords": [
+   "edge",
+   "outline",
+   "bottom",
+   "top",
+   "left",
+   "right",
+   "center",
+   "corners",
+   "thumb"
+  ],
+  "shapes": [
+   "circle",
+   "spark",
+   "square",
+   "ring",
+   "star",
+   "flame",
+   "smoke",
+   "line",
+   "heart",
+   "diamond",
+   "triangle",
+   "plus",
+   "drop",
+   "bubble",
+   "snowflake",
+   "confetti",
+   "leaf"
+  ],
+  "dirWords": {
+   "up": -90,
+   "down": 90,
+   "left": 180,
+   "right": 0,
+   "out": "out",
+   "in": "in"
+  },
+  "blends": [
+   "add",
+   "normal"
+  ],
+  "glowKeys": {
+   "color": {
+    "kind": "color",
+    "words": 1,
+    "doc": "the light colour (default: the element's text colour)"
+   },
+   "radius": {
+    "kind": "number",
+    "words": 1,
+    "min": 1,
+    "max": 400,
+    "doc": "how far the glow reaches, in px"
+   },
+   "intensity": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 4,
+    "doc": "brightness, 1 is normal"
+   },
+   "pulse": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 60000,
+    "doc": "milliseconds for one breath in and out; 0 is steady"
+   },
+   "depth": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 1,
+    "doc": "how deep the pulse goes, 0 to 1"
+   },
+   "flicker": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 1,
+    "doc": "random flicker, like a flame: 0 is steady, 1 is wild"
+   },
+   "seed": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 99999,
+    "int": true,
+    "doc": "a different random flicker with the same look"
+   },
+   "texture": {
+    "kind": "texture",
+    "words": 1,
+    "doc": "texture(grain scale 2): break the light up with a texture"
+   },
+   "essential": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "keep animating even when the visitor prefers reduced motion"
+   },
+   "unclipped": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "let the light spill out of a parent that clips (overflow: hidden, auto, scroll). Without it the aura is cut at that edge, like the element itself"
+   },
+   "around": {
+    "kind": "around",
+    "words": 1,
+    "doc": "the shape the light follows: follow (the default: the element's clip-path or rounded corners), box, round, pill, diamond, triangle, hexagon, octagon, pentagon, star, star4, star6, cross, heart, drop, bolt, alpha (an <img> or <canvas>'s visible pixels), or polygon(50% 0, 100% 50%, 50% 100%, 0 50%)"
+   },
+   "inner": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "light inside the edge (a rim) instead of outside it"
+   },
+   "rays": {
+    "kind": "number",
+    "words": 1,
+    "min": 1,
+    "max": 64,
+    "int": true,
+    "doc": "that many beams of light from the middle, slowly turning (see spin)"
+   },
+   "spin": {
+    "kind": "number",
+    "words": 1,
+    "min": -3600,
+    "max": 3600,
+    "doc": "rays turn this many degrees a second (default 10); on particles, how fast each one tumbles"
+   },
+   "ripple": {
+    "kind": "number",
+    "words": 1,
+    "min": 200,
+    "max": 60000,
+    "doc": "rings that spread out from the shape and fade, one every this many milliseconds"
+   },
+   "nohalo": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "only the rays and ripples, without the soft halo"
+   },
+   "always": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "keep emitting even when the element cannot be seen (opacity 0, display: none, visibility: hidden, on it or an ancestor): for an invisible anchor that smoke or sparks come out of"
+   },
+   "z": {
+    "kind": "number",
+    "words": 1,
+    "min": -1000000,
+    "max": 2147483000,
+    "int": true,
+    "doc": "the z-index of the layer this light is drawn on: `z 5` puts it under a hill with z-index 10. It meets elements in the page's root stacking context"
+   }
+  },
+  "particleKeys": {
+   "color": {
+    "kind": "colors",
+    "words": 1,
+    "doc": "colours over a particle's life: color #ff0 -> #f60 -> transparent"
+   },
+   "count": {
+    "kind": "number",
+    "words": 1,
+    "min": 1,
+    "max": 600,
+    "int": true,
+    "doc": "how many particles are alive at once"
+   },
+   "size": {
+    "kind": "range",
+    "words": 2,
+    "min": 0.5,
+    "max": 300,
+    "doc": "diameter in px: size 4, or size 10 4 (start and end of a random range)"
+   },
+   "life": {
+    "kind": "range",
+    "words": 2,
+    "min": 50,
+    "max": 60000,
+    "doc": "how long one lives, in ms: life 900, or life 600 1200"
+   },
+   "speed": {
+    "kind": "range",
+    "words": 2,
+    "min": 0,
+    "max": 3000,
+    "doc": "px per second: speed 60, or speed 30 90"
+   },
+   "dir": {
+    "kind": "dir",
+    "words": 1,
+    "doc": "where they head: up, down, left, right, out, in, or degrees (-90 is up)"
+   },
+   "spread": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 360,
+    "doc": "how wide the fan of directions is, in degrees"
+   },
+   "gravity": {
+    "kind": "number",
+    "words": 1,
+    "min": -2000,
+    "max": 2000,
+    "doc": "px/s squared; negative pulls up (flames), positive down (snow)"
+   },
+   "drag": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 10,
+    "doc": "air resistance: how fast particles slow down"
+   },
+   "turbulence": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 1000,
+    "doc": "random sideways wobble, px/s"
+   },
+   "from": {
+    "kind": "word",
+    "words": 1,
+    "values": [
+     "edge",
+     "outline",
+     "bottom",
+     "top",
+     "left",
+     "right",
+     "center",
+     "corners",
+     "thumb"
+    ],
+    "doc": "where they are born: edge or outline (along the element's real outline, see around), bottom, top, left, right, center, corners, thumb (range sliders)"
+   },
+   "shape": {
+    "kind": "word",
+    "words": 1,
+    "values": [
+     "circle",
+     "spark",
+     "square",
+     "ring",
+     "star",
+     "flame",
+     "smoke",
+     "line",
+     "heart",
+     "diamond",
+     "triangle",
+     "plus",
+     "drop",
+     "bubble",
+     "snowflake",
+     "confetti",
+     "leaf"
+    ],
+    "doc": "circle, spark, square, ring, star, flame, smoke, line, heart, diamond, triangle, plus, drop, bubble, snowflake, confetti or leaf"
+   },
+   "grow": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 10,
+    "doc": "size at the end of life as a multiple of the start: 0.2 shrinks, 3 swells"
+   },
+   "blend": {
+    "kind": "word",
+    "words": 1,
+    "values": [
+     "add",
+     "normal"
+    ],
+    "doc": "add makes overlapping particles brighter, normal just stacks them"
+   },
+   "glowing": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "soft glowing particles that add light"
+   },
+   "behind": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "draw only outside the element's box, as if the element hid them"
+   },
+   "seed": {
+    "kind": "number",
+    "words": 1,
+    "min": 0,
+    "max": 99999,
+    "int": true,
+    "doc": "a different random pattern with the same look"
+   },
+   "texture": {
+    "kind": "texture",
+    "words": 1,
+    "doc": "texture(grain): grainy particles"
+   },
+   "essential": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "keep animating even when the visitor prefers reduced motion"
+   },
+   "unclipped": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "let the particles leave a parent that clips (overflow: hidden, auto, scroll). Without it they are cut at that edge"
+   },
+   "around": {
+    "kind": "around",
+    "words": 1,
+    "doc": "the shape `from edge` and `from outline` follow: follow (the default), box, round, pill, diamond, triangle, hexagon, octagon, pentagon, star, star4, star6, cross, heart, drop, bolt, or polygon(...)"
+   },
+   "palette": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "each particle takes ONE of the colours (confetti) instead of fading through them"
+   },
+   "spin": {
+    "kind": "number",
+    "words": 1,
+    "min": -3600,
+    "max": 3600,
+    "doc": "how fast each particle tumbles, in degrees a second (random direction)"
+   },
+   "wind": {
+    "kind": "number",
+    "words": 1,
+    "min": -3000,
+    "max": 3000,
+    "doc": "a sideways push, px/s squared; negative pushes left"
+   },
+   "orbit": {
+    "kind": "number",
+    "words": 1,
+    "min": -3600,
+    "max": 3600,
+    "doc": "the particles circle the middle of the element, this many degrees a second"
+   },
+   "always": {
+    "kind": "flag",
+    "words": 0,
+    "doc": "keep emitting even when the element cannot be seen (opacity 0, display: none, visibility: hidden, on it or an ancestor): for an invisible anchor that smoke or sparks come out of"
+   },
+   "z": {
+    "kind": "number",
+    "words": 1,
+    "min": -1000000,
+    "max": 2147483000,
+    "int": true,
+    "doc": "the z-index of the layer these particles are drawn on: `z 5` puts them under a hill with z-index 10. It meets elements in the page's root stacking context"
+   }
+  },
+  "glowDefaults": {
+   "radius": 24,
+   "intensity": 1,
+   "pulse": 0,
+   "depth": 0.35,
+   "flicker": 0,
+   "seed": 1
+  },
+  "particleDefaults": {
+   "count": 40,
+   "size": [
+    4,
+    4
+   ],
+   "life": [
+    900,
+    900
+   ],
+   "speed": [
+    40,
+    40
+   ],
+   "dir": -90,
+   "spread": 30,
+   "gravity": 0,
+   "drag": 0,
+   "turbulence": 0,
+   "from": "edge",
+   "shape": "circle",
+   "grow": 0.3,
+   "blend": null,
+   "glowing": false,
+   "seed": 1
+  },
+  "aroundNames": [
+   "follow",
+   "box",
+   "round",
+   "pill",
+   "alpha",
+   "diamond",
+   "triangle",
+   "hexagon",
+   "octagon",
+   "pentagon",
+   "star",
+   "star4",
+   "star6",
+   "cross",
+   "heart",
+   "drop",
+   "bolt"
+  ]
+ },
+ "slider": {
+  "clauses": {
+   "track": "track [height] [color] [radius <n>|full]",
+   "fill": "fill <color> | fill none",
+   "thumb": "thumb <size> [color]",
+   "shape": "shape circle | square | diamond | pill | bar",
+   "ring": "ring <width> <color>",
+   "glow": "glow <color> <radius>",
+   "ticks": "ticks <count> [color] [length]",
+   "graph": "graph <v1> <v2> ... (each 0 to 100)",
+   "graph-height": "graph-height <px>",
+   "graph-gap": "graph-gap <px>"
+  },
+  "thumbShapes": [
+   "circle",
+   "square",
+   "diamond",
+   "pill",
+   "bar"
+  ]
+ },
+ "effects": {
+  "glassWords": {
+   "blur": "a number: how many px to blur what is behind the element (default 16)",
+   "saturate": "saturate <n>: colour boost for what shows through, 1 is unchanged (default 1.5)",
+   "bright": "bright <n>: brightness of what shows through, 1 is unchanged",
+   "tint": "tint <color> | tint none: the milky layer on top (default: a faint wash of the text colour)"
+  },
+  "tiltWords": {
+   "max": "a number: the largest tilt in degrees (default 8)",
+   "lift": "lift <n>: scale while the pointer is over it, e.g. 1.04",
+   "perspective": "perspective <px>: how strong the 3D depth looks (default 900)",
+   "speed": "speed <0.05 to 1>: how quickly it follows (default 0.18)",
+   "invert": "invert: tilt away from the pointer instead of toward it",
+   "glare": "glare: also keep --dssl-gx and --dssl-gy (0% to 100%) pointing at the pointer, for your own highlight"
+  }
+ },
+ "fonts": {
+  "words": {
+   "weights": "a weight (400), several (400 700), or a variable range (100..900)",
+   "italic": "also load the italic of each weight",
+   "display": "display <swap|block|fallback|optional>: how the text behaves while the font loads (default swap)",
+   "from": "from \"/path/to/file.woff2\": use your own file instead of Google Fonts"
+  }
+ }
+}

native/spec/01-overview.md

@@ -0,0 +1,136 @@
+# 1. Overview
+
+## 1.1 What DSSL is
+
+DSSL is a style language. A DSSL file is plain text. It holds tokens (named design values),
+rules (selector blocks), states, conditions, motions and a few effect descriptions. A DSSL
+implementation reads that text and decides how every element in a document should look.
+
+A DSSL file describes a result. It does not say how to reach it. That is the whole idea of a
+style language, and it is what makes native support possible: the author says what, the
+engine decides how.
+
+## 1.2 What CSS does (and what that means for DSSL)
+
+CSS is not compiled. There is no step that turns a stylesheet into machine code or into some
+other language that the browser then runs. A browser engine is an interpreter for a
+declarative language, and it keeps the interpreted form alive for as long as the page lives.
+
+Here is what a browser does with a stylesheet, in order:
+
+1. **Tokenize and parse.** The engine's own code (C++ in Chrome and Safari, Rust in Firefox)
+   reads the text and builds rule objects. The collection of rule objects is the CSSOM.
+2. **Style resolution.** For every element, the engine finds the rules whose selectors match,
+   sorts them by the cascade (origin, layer, specificity, order), picks the winning
+   declaration for each property, and resolves it into a computed value. The result is one
+   computed style per element.
+3. **Layout.** Using the computed styles, the engine works out the size and position of every
+   box.
+4. **Paint.** The engine turns boxes and computed values into drawing commands: fill this
+   rectangle, draw this text, blur that shadow.
+5. **Composite.** Painted layers are combined on the GPU and shown.
+
+Engines do optimise stage 2. They index rules by class, id and tag so they do not test every
+selector against every element, they cache results, and some compile selectors to machine
+code. None of that changes what a stylesheet means. It is an implementation detail.
+
+Every CSS property is built-in code inside the engine. `background` is a paint routine,
+`width` is a layout input, `border-radius` changes the shape that paint clips to. Nothing in
+this path runs JavaScript.
+
+### What native DSSL means
+
+Native DSSL means a browser reads DSSL text with its own parser and feeds the result into the
+same stages. Which stages matter depends on the feature:
+
+| DSSL feature | CSS stage it joins | What the engine must add |
+|---|---|---|
+| Syntax, tokens, semantic properties (`row:`, `radius:`, `fluid`) | 1 and 2 | A DSSL parser. After that, they are ordinary computed values. |
+| Layers, states, media, containers | 2 | Nothing new: the cascade already has these concepts. |
+| `@signal` | 2 | A way for the page to set named values the cascade can read. |
+| `motion`, `animate` | 2 and 4 | Mapping to the engine's existing keyframe animation. |
+| `texture`, `aura`, `glass`, `slider` | 4 | New drawing code, the way `box-shadow` once was new. |
+| `fold`, `bend-around`, `tilt`, `overlap` | 3 and 4 | Hooks that see box sizes, so they must run during or after layout. |
+
+The first four rows are small. The last two rows are where real engineering is needed, and
+chapter 11 says exactly what.
+
+## 1.3 Processing model
+
+An implementation takes DSSL source text and a document, and produces styled output. The
+model has six stages. A conforming implementation does not have to run them as separate
+passes, but its results MUST be the same as if it had.
+
+```
+source text
+   |  1. decode, strip comments, split into logical lines
+   v
+syntax tree                      (chapter 2)
+   |  2. classify headers, resolve values, expand semantic properties,
+   |     flatten nesting, collect tokens and motions
+   v
+resolved document                (chapters 3 to 8, output defined in chapter 10)
+   |  3. for each element: match rules, apply conditions
+   v
+matched rules
+   |  4. sort by (layer, order), last declaration per property wins
+   v
+declared values                  (chapter 5)
+   |  5. compute: same as CSS from here
+   v
+computed style + effect descriptors
+   |  6. layout and paint, supplied by the host
+   v
+pixels
+```
+
+Stages 1 and 2 need no document. They are pure functions of the source text (and the tokens
+and motions that earlier files defined, see 4.5). That is why they can be tested without a
+browser, and why this repository tests them by comparing outputs.
+
+## 1.4 Conformance levels
+
+An implementation claims a level. Each level includes the one before it.
+
+| Level | Name | What it must do |
+|---|---|---|
+| 1 | Parser | Stage 1. Produce the syntax tree and the syntax errors defined in chapter 2. |
+| 2 | Resolver | Stages 1 and 2. Produce a resolved document equal to the reference output (chapter 10), including errors and warnings. |
+| 3 | Style engine | Stages 1 to 5. Give every element the declared values chapter 5 defines. |
+| 4 | Renderer | Stage 6 for the effects in chapter 8: texture, aura, slider, glass, tilt, deform. |
+
+The reference crate in this repository aims at level 2 first, then 3 and 4. It is not there
+yet: `native/README.md` says exactly where it stands.
+
+## 1.5 Selectors are CSS selectors
+
+DSSL does not define a selector language. Selectors are CSS selectors as defined by the
+Selectors specification, and matching is done by the host. This is how the JavaScript engine
+works too: it calls `Element.matches`.
+
+Two things sit on top of that:
+
+- **State words.** A block header that is exactly one of the state words (chapter 2) means
+  "the parent selector plus this pseudo-class". `hover { ... }` inside `.card` means
+  `.card:hover`.
+- **`seen`.** `:seen` is not a CSS pseudo-class. It is defined in 5.7.
+
+A selector goes through the resolver as text. The resolver only looks at it to find
+pseudo-elements (5.8) and to scan states. It never rewrites one except to join nested
+selectors (5.3).
+
+## 1.6 Versioning
+
+The spec has the same version as the language it describes. This draft describes DSSL 0.16.
+A change that makes a previously valid source invalid, or changes what a valid source means,
+is listed in the changelog of the language and raises the second number.
+
+## 1.7 What is out of scope
+
+- The selector language (see 1.5).
+- Layout and paint for ordinary CSS properties. DSSL passes those through unchanged.
+- The CSS value grammar. DSSL checks that a word is a known CSS word and gives numbers
+  their units. It does not check that a value is valid for its property. The host does that
+  when it computes the style.
+- The editor extension, the designer and the build tools (`dssl check`, `dssl build`,
+  `dssl import`). Chapter 11 says how the build lane relates to native support.

native/spec/02-syntax.md

@@ -0,0 +1,212 @@
+# 2. Syntax
+
+This chapter turns source text into a syntax tree. It needs no tokens, no document and no
+vocabulary except the lists in the appendices.
+
+## 2.1 Source text
+
+- **SYN-1.** Source is a sequence of Unicode characters. Line numbers start at 1 and count
+  `\n` characters. A parser that reads bytes MUST decode UTF-8 first. `\r` is not special: a
+  `\r\n` file leaves a `\r` at the end of each line, and values are trimmed, so it does no
+  harm.
+- **SYN-2.** Every diagnostic carries the file name and a 1-based line number. For a
+  construct that spans several lines, the line is the one where the construct started.
+
+## 2.2 Comments
+
+There are two comment forms: `// to the end of the line` and `/* a block */`.
+
+- **SYN-3.** Comments are removed before anything else is parsed, in one pass over the whole
+  source, left to right.
+- **SYN-4.** A quote character (`"` or `'`) that is not inside a comment starts a string. A
+  string ends at the next occurrence of the same quote character that is not directly
+  preceded by a backslash. Comment markers inside a string are plain text.
+- **SYN-5.** A line comment runs to, but not including, the next `\n`. A block comment runs
+  to the first `*/`, or to the end of the source if there is none. Inside a block comment,
+  every character except `\n` is replaced by a space and every `\n` is kept. Removing a
+  comment therefore never changes the line number of anything after it.
+- **SYN-6.** An unquoted `url(` ... `)` is one token for the comment pass. When the letters
+  `url(` (any case) are not directly preceded by a letter, digit, `_` or `-`, and the first
+  character after the `(` and any white space is not a quote, the text through the closing `)`
+  is kept exactly as written, newlines included, so a `//` inside it (`url(https://x.com/a.png)`)
+  is not a comment. A `url(` with no closing `)` is not special. A quoted `url("...")` is
+  covered by SYN-4. (Before 0.16.3 the engine treated that `//` as a comment, see D-1.)
+
+Comments are removed from everything else, including the body of `raw { }`.
+
+```dssl
+// a line comment
+.card {
+  padding: 16   /* a block comment, even in the middle of a line */
+}
+```
+
+## 2.3 Logical lines
+
+The comment-free source is split on `\n` into physical lines. Physical lines are joined into
+logical chunks, and each chunk is processed by 2.4.
+
+- **SYN-7.** A blank physical line is skipped. (Inside a `raw { }` capture it is kept. See
+  2.7.)
+- **SYN-8.** A chunk is *incomplete* when any of these holds:
+  1. its parentheses or square brackets are unbalanced (more opening than closing, counting
+     outside quoted strings), or
+  2. after trimming trailing white space, it ends in `,`, or
+  3. after trimming trailing white space, it ends in `:`.
+- **SYN-9.** While the buffer is incomplete, the next non-blank physical line is trimmed and
+  appended to the buffer with one space between them. When the buffer becomes complete, it is
+  processed as one chunk, with the line number of the first physical line. A chunk that is
+  incomplete at the end of the file is processed as it stands.
+
+Why: this is how multi-line values, multi-line selector lists and `prop:` followed by the
+value on the next line all work with no semicolons.
+
+```dssl
+.card,
+.panel {
+  background: linear-gradient(
+    to bottom, red, blue
+  )
+  color:
+    color.ink
+}
+```
+
+## 2.4 Processing a chunk
+
+A chunk is a string. The parser keeps a stack of open blocks. The root is always at the
+bottom of the stack. It repeats the following on the chunk until nothing is left:
+
+1. Trim the chunk. If it is empty, stop.
+2. Find the first top-level `{` and the first top-level `}`. "Top-level" means not inside a
+   quoted string and not inside parentheses or square brackets.
+3. If there is a `}` and either there is no `{` or the `}` comes first:
+   - treat the text before it as declarations (2.6) if it is not empty,
+   - if the stack holds only the root, report `unexpected "}"` (SYN-10); otherwise pop one
+     block,
+   - continue with the text after the `}`.
+4. Else if there is a `{`: the text before it is the *header text*.
+   - **SYN-11.** If the header text contains a top-level `;`, everything before the last such
+     `;` is treated as declarations (2.6) and the header is the text after it. This is what
+     lets `.card { background: red; hover { background: blue } }` work on one line. If the
+     remaining header is empty, report `block is missing a header before "{"` and skip the
+     `{`.
+   - If the header text is empty, report the same error and skip the `{`.
+   - Otherwise classify the header (2.5), append a node to the block on top of the stack, and
+     run the block-open rule (2.7). If the block is not closed on this line, push it.
+5. Else the whole chunk is declarations (2.6). Stop.
+
+A node always carries the line number of its chunk.
+
+## 2.5 Classifying a header
+
+The header is trimmed. The first row that matches wins.
+
+| Header | Node kind | Notes |
+|---|---|---|
+| exactly `tokens` | `tokens` | 4.1 |
+| exactly `pin` | `pin` | the must-win layer, 5.2 |
+| exactly `raw` or `@css` | `raw` | verbatim CSS, 2.7 |
+| exactly `fonts` | `fonts` | 8.7 |
+| starts with `behavior ` | `behavior`, name = rest, trimmed | 6.9 |
+| starts with `motion ` | `motion`, name = rest, trimmed | chapter 7 |
+| starts with `@layer ` | `layer`, name = rest, trimmed | 5.2 |
+| starts with `@media ` | `media`, query = rest, trimmed | 5.5 |
+| starts with `@container` | `container`, query = rest after the 10 characters, trimmed | 5.6 |
+| starts with `@signal ` | `signal`, expr = rest, trimmed | 5.9 |
+| starts with any other `@` | `bogus` | error `unknown at-rule "<first word>"`, the whole block is skipped (2.7) |
+| starts with `::` | `pseudo`, name = text after `::` up to the first space or `(` | 5.8. If the name is not a pseudo-element name and not a vendor pseudo, error `unknown pseudo-element "::name"` and the block is skipped |
+| exactly one of the state words | `state`, name = the word | 5.7 |
+| anything else | `selector`, sel = the header | a CSS selector list |
+
+The state words, the pseudo-element names and the vendor-pseudo pattern are in appendix A.
+
+- **SYN-12.** Matching of `tokens`, `pin`, `raw`, `@css` and `fonts` is on the whole trimmed
+  header. `tokens foo {` is a selector. `@media(width>1)` (no space) is an unknown at-rule.
+  `@container` is the one at-rule that does not require a space.
+
+Unknown at-rules are skipped whole, so nothing inside them leaks out. For verbatim CSS the
+author writes `raw { }`.
+
+```dssl
+raw {
+  @supports (display: grid) {
+    .box { display: grid; }
+  }
+}
+```
+
+## 2.6 Declarations
+
+A declaration text is split on top-level `;`. Inside a `tokens` block (the block on top of
+the stack, or any block below it is a `tokens` block), each piece is further split by the
+token-pair rule (2.8). Each non-empty trimmed piece is one declaration:
+
+- **SYN-13.** Find the first top-level `:` in the piece.
+- **SYN-14.** If there is none:
+  - `use <name>` where `<name>` matches `[A-Za-z][\w-]*` is a declaration with property
+    `use` and value `<name>`.
+  - A bare word matching `[a-z][a-z0-9-]*` (case-insensitive) is a declaration with that word
+    lowercased as the property and an empty value. (This is how `truncate` and
+    `visually-hidden` are written.)
+  - Anything else is the error `expected ":" in "<first 40 characters>"` with the hint
+    `declarations look like  prop: value`.
+- **SYN-15.** The property is the text before the colon, trimmed and lowercased. The value is
+  the text after it, trimmed, with its case kept. An empty property is the error
+  `declaration is missing a property name`.
+- **SYN-16.** A property that is all digits with an optional fraction (`9`, `2.5`) is legal
+  only when some block on the stack is a `tokens` block. Elsewhere it is the error
+  `"<prop>" is not a valid property name`, with a hint about token keys.
+- **SYN-17.** Any other property MUST match
+  `^(-{1,2}[a-z][a-z0-9.-]*|[a-z][a-z0-9-]*)$` (case-insensitive), otherwise the error
+  `"<prop>" is not a valid property name` is reported and the declaration is dropped. Dotted
+  names are legal only after a leading `--` (`--color.accent`).
+
+A valid declaration becomes a `decl` node `{ prop, value, line }` appended to the block on
+top of the stack.
+
+## 2.7 Block-open rule
+
+After a header is classified and its node is appended:
+
+- **`raw` and `fonts`.**
+  - **SYN-18.** They are legal only at the top level (the stack holds only the root).
+    Otherwise report `raw { } must be top-level` (or `fonts { } ...`) with the hint
+    `move it out of the enclosing block`, and skip the balanced block.
+  - **SYN-19.** The body is captured verbatim into `node.css`. If the matching `}` is on the
+    same line as the header, the body is the text between the braces. Otherwise capture
+    continues on following physical lines: each one is appended followed by `\n`, blank lines
+    included, until the braces balance. The first line contributes only the text after the
+    `{`. Brace matching ignores quoted strings. Text after the closing `}` is processed as a
+    new chunk. If the file ends first, report `the raw { } block was never closed with "}"`
+    and the CSS captured so far is discarded.
+- **`bogus`.**
+  - **SYN-20.** The block is skipped: the parser finds the matching `}` (quote-aware) and
+    continues after it. If there is none, report
+    `the "<first 30 characters>" block was never closed with "}"` and discard the rest of the
+    chunk.
+- **Everything else.** The node is pushed on the stack.
+
+At the end of the file, if more than the root is on the stack, report
+`<n> block(s) were never closed with "}"`.
+
+## 2.8 Token pairs
+
+- **SYN-21.** Inside a `tokens` block, `pill: 999 card: 22` on one line is two declarations.
+  A piece is split at a space when all of these hold: a top-level `:` (not part of `::`) has
+  already been seen in the piece, the space is outside strings, parentheses and brackets, and
+  the text after the space looks like `name:` where `name` matches `[A-Za-z0-9][\w.-]*`
+  followed by optional spaces and a `:` that is not `::`.
+
+## 2.9 The syntax tree
+
+```
+root        { kind: 'root', children: [...] }
+node        { kind, line, children: [...], ...extra }
+decl        { kind: 'decl', prop, value, line }
+```
+
+Extra fields by kind: `behavior` and `motion` have `name`, `layer` has `name`, `media` and
+`container` have `query`, `signal` has `expr`, `selector` has `sel`, `state` and `pseudo`
+have `name`, `raw` and `fonts` have `css`. Child order is source order. The tree is data: a
+Level 1 parser is tested by comparing its tree and its errors with the reference.

native/spec/03-values.md

@@ -0,0 +1,199 @@
+# 3. Values
+
+This chapter fixes how a value string such as `0 2 4 color.ink/10` becomes CSS. The algorithm
+is applied to the value of an ordinary declaration, to token values, and to the pieces that
+semantic properties pass on (chapter 6).
+
+## 3.1 The resolution context
+
+Every value is resolved with a context:
+
+| Field | Meaning |
+|---|---|
+| `prop` | the property name the value belongs to (a token key for token values) |
+| `unitless` | when true, a bare number stays a bare number. When false, it gets a unit. |
+| `bareIdents` | when true, an unknown identifier is allowed through (font names, counter names) |
+| `tokens` | the current token map (chapter 4) |
+
+- **VAL-1.** For an ordinary property, `unitless` is true exactly when the property is in the
+  unitless list (appendix A). A semantic property chooses its own context for each piece it
+  passes on (chapter 6).
+- **VAL-2.** `bareIdents` is true for `font-family`, for any property whose name starts with
+  `counter-`, for custom properties (`--name`), and for tokens whose key starts with `font`.
+  It is also switched on inside `counter()`, `counters()`, `attr()`, `env()`, `format()`,
+  `local()`, `paint()` and `element()`.
+
+## 3.2 The scan
+
+The value is scanned left to right. At each position, the first of these rules that applies
+is used.
+
+1. **White space** is copied as it is.
+2. **Strings.** `"` or `'` starts a string that runs to the next occurrence of the same
+   quote. A backslash makes the character after it part of the string, so `"a\"b"` is one
+   string. It is copied verbatim. The same applies to strings inside function arguments and in
+   layer lists. (Before 0.16.3 the backslash was ignored here, see D-5.)
+3. **Numbers.** A number starts at a digit, at `.` followed by a digit, or at `-` or `+`
+   followed by a digit or `.`. It continues over digits and `.`. If letters or `%` follow,
+   they are the unit and are lowercased. The output is the number text plus:
+   - the unit, if there is one,
+   - otherwise nothing, if `unitless` is true,
+   - otherwise `ms`, if `prop` is a time property (appendix A),
+   - otherwise `px`.
+4. **Identifiers.** An identifier matches
+   `^-?(?:[A-Za-z_]|--[A-Za-z_])[A-Za-z0-9_.\\-]*`. Note that `.` and `-` are part of an
+   identifier, so `color.ink` and `ease-out` are single identifiers, and so is `a-1`.
+   What happens next, in order:
+   1. A name starting `--` is copied as it is (a custom property).
+   2. If the next character is `(`, it is a **function call** (3.3).
+   3. If the identifier is a **token** (3.4), it is replaced by a variable reference.
+   4. If it is a known **keyword** (3.5), it is copied as it is.
+   5. If `bareIdents` is true and the identifier is plain letters, digits, `_` and `-`
+      starting with a letter, it is copied as it is.
+   6. Otherwise it is an error (3.6). The identifier is copied and scanning continues.
+5. **Hex colors.** `#` followed by hex digits is copied. An alpha suffix follows the rules in
+   3.4.
+6. **Anything else** (`/`, `,`, `+`, `*`, `%`, `(`, `)`, `->`) is copied one character at a
+   time.
+
+- **VAL-3.** Rule 3 means `0` becomes `0px`, `margin: 0 auto` becomes `0px auto`, and
+  `opacity: 0.5` stays `0.5` because `opacity` is unitless.
+- **VAL-4.** `--name` custom property values are resolved like any other, with
+  `unitless: false` and `bareIdents: true`.
+
+```dssl
+.a {
+  padding: 0
+  margin: 0 auto
+  opacity: 0.5
+  line-height: 1.5
+  transition-delay: 200
+}
+```
+
+The five lines resolve to `0px`, `0px auto`, `0.5`, `1.5` and `200ms`.
+
+## 3.3 Function calls
+
+The text from the `(` to its matching `)` is the argument text. Matching counts nested
+parentheses and skips quoted strings.
+
+- **VAL-5.** `url( )` is atomic. The output is `url(` + the argument text trimmed + `)`. Nothing
+  inside is looked at.
+- **VAL-6.** `repeat(N, tracks)`, when the first argument is a number, keeps `N` as it is
+  (never a length) and resolves the rest with the same context. When the first argument is
+  not a plain number (`auto-fill`, `auto-fit`), the call falls through to VAL-7.
+- **VAL-7.** Any other call resolves its argument text recursively. The inner context is:
+  - `unitless: true` for the functions in the *unitless functions* list (colors, filters
+    that take numbers, `scale*`, `steps`, `cubic-bezier`, `linear`, `radial`, `conic`),
+  - `unitless: false` for the *length functions* list (`calc`, `min`, `max`, `clamp`, the
+    other math functions, `blur`, `drop-shadow`),
+  - the outer context's `unitless` for any other function.
+  Function names are matched lowercase. The output keeps the written name.
+
+Both lists are in appendix A.
+
+```dssl
+.a {
+  width: calc(100% - 24)
+  background: oklch(62% 0.19 35)
+  grid-template-columns: repeat(4, 1fr)
+  transform: scale(1.2)
+}
+```
+
+`calc(100% - 24)` becomes `calc(100% - 24px)`. The `oklch` numbers and the `scale` factor
+stay bare. `repeat(4, 1fr)` keeps its `4`.
+
+## 3.4 Tokens and alpha
+
+A reference to a token is the token's key written as an identifier (`color.ink`, `space.4`).
+How a key is found is in 4.4. A reference becomes `var(--dssl-<key>)`, where every `.` in
+the key is replaced by `-`.
+
+- **VAL-8.** *Alpha modifier.* A token reference, a named color, `currentcolor` or a hex
+  color may be followed by `/` and a number, with optional white space and an optional `%`:
+  `color.ink/20`, `white/12`, `#ff0000/50`. The whole thing becomes
+  `color-mix(in oklab, <color> N%, transparent)`, where `N` is the number text as written.
+  The number is always a percentage, with or without the `%` sign.
+- **VAL-9.** A named color is a keyword for which the color table (appendix A) has an entry.
+
+```dssl
+tokens { color { x: #123456 } }
+.a {
+  color: color.x/50
+  background: #ff0000/50
+  border-color: white/12
+}
+```
+
+These three become `color-mix(in oklab, var(--dssl-color-x) 50%, transparent)`,
+`color-mix(in oklab, #ff0000 50%, transparent)` and
+`color-mix(in oklab, white 12%, transparent)`.
+
+## 3.5 Keywords
+
+The keyword set (appendix A) holds every word DSSL accepts as a bare CSS value: color names,
+display values, easing names, units of measure words and everything the CSS property
+definitions mention. It is generated from the engine's vocabulary module.
+
+- **VAL-10.** A keyword matches if the identifier is in the set, or its lowercase form is.
+
+Why: DSSL is loud about typos. An identifier that is not a token, not a keyword and not
+allowed by `bareIdents` is a mistake, and 3.6 says so.
+
+## 3.6 Unknown identifiers
+
+- **VAL-11.** An unknown identifier is the error `unknown value "<id>" for property "<prop>"`.
+  The hint is the best did-you-mean (9.3) over the token keys followed by the keywords, or no
+  hint if nothing is close. The identifier is copied to the output, so the value still
+  resolves as far as it can.
+
+```dssl error
+.a { color: colour }
+```
+
+## 3.7 Fluid sizes
+
+`fluid` is sugar for a `clamp()` that moves linearly between two viewport widths. It has two
+spellings.
+
+- `font-size: fluid 16 24`: the value is `fluid` followed by arguments. It is allowed on the
+  properties in the *fluid properties* list (appendix A).
+- `fluid: 16, 24`: the semantic property `fluid` (6.4) writes `font-size`.
+
+The arguments are, in order: the first size, the second size, the lower viewport width
+(default `360`), the upper viewport width (default `1200`). Arguments are separated by
+white space or commas.
+
+- **VAL-12.** A size is a number with an optional unit of `px`, `rem` or `em`. A bare number
+  is `px`. A `%` is an error (`cannot be a percentage, use px, rem or em`). The two sizes
+  MUST have the same unit (`mixes units, give both sizes the same unit`). The viewport
+  widths are in `px` and the upper MUST be larger than the lower.
+- **VAL-13.** Let `a`, `b` be the sizes, `v0`, `v1` the viewport widths, `f` = 1 for `px`
+  and 16 for `rem` and `em`. Then
+  `slope = ((b - a) * f) / (v1 - v0)`, `vw = slope * 100` and
+  `intercept = a - (slope * v0) / f`. The output is
+  `clamp(<min><unit>, calc(<intercept><unit> + <vw>vw), <max><unit>)`, where `min` and `max`
+  are the smaller and larger of `a` and `b`, and every number is written with at most three
+  decimal places and no trailing zeros.
+- **VAL-14.** On an error the property gets the value `0px` and the error is reported.
+
+```dssl
+h1 { font-size: fluid 28 44 }
+.stack { gap: fluid 8 16 }
+.hero { font-size: fluid 16 24 400 800 }
+```
+
+For `fluid 16 24` the output is `clamp(16px, calc(12.571px + 0.952vw), 24px)`.
+
+## 3.8 Important
+
+- **VAL-15.** The text `!important` (any case, any space after `!`) outside a quoted string
+  is not valid DSSL. The declaration is dropped and the error
+  `!important does not exist in DSSL - "<prop>: <value>" was NOT applied` is reported, with
+  the hint to use `pin { }`.
+
+```dssl error
+.a { color: red !important }
+```

native/spec/04-tokens.md

@@ -0,0 +1,133 @@
+# 4. Tokens
+
+A token is a named design value: a color, a space, a radius, a shadow, a font stack. Tokens
+become CSS custom properties, so they follow the page's normal inheritance and can be
+re-declared in any subtree.
+
+## 4.1 The tokens block
+
+```dssl
+tokens {
+  color {
+    ink: #16161d
+    accent: oklch(62% 0.19 35)
+  }
+  space { 1: 4  2: 8  9: 96 }
+  radius { md: 14 }
+  shadow { md: 0 2 4 color.ink/10, 0 4 12 color.ink/8 }
+}
+```
+
+- **TOK-1.** A `tokens` block may appear at the top level, or inside `@media`, `@container`,
+  `@signal` and `@layer` blocks that themselves have no selector around them. Inside a
+  selector it is the error `tokens must be top-level or inside @media / @signal`, and the
+  block is ignored.
+- **TOK-2.** Inside a `tokens` block, a declaration `name: value` defines the token whose key
+  is the path to that block plus the name. A nested block whose header is a plain word
+  (`color { ... }`) adds that word to the path. A nested `tokens` block does the same with
+  the header text `tokens`. Any other nested block kind is the error
+  `unexpected "<kind>" inside tokens`.
+- **TOK-3.** Numeric names (`1`, `9`) are legal keys (SYN-16). `space { 9: 96 }` defines
+  `space.9`.
+- **TOK-4.** The value of a token is kept as written. It is resolved (chapter 3) when the
+  token is emitted (4.3), with `prop` set to the token key and `unitless` false.
+
+Why: tokens resolve late, so a token may refer to another token, to alpha, or to a function,
+and each reference is checked in the place it is used.
+
+## 4.2 Keys and variable names
+
+- **TOK-5.** A token key is a dotted path such as `color.ink` or `shadow.md`.
+- **TOK-6.** The variable name for a key is `--dssl-` followed by the key with each `.`
+  replaced by `-`. So `color.ink` is `--dssl-color-ink` and `space.9` is `--dssl-space-9`.
+  Two keys that differ only by `.` against `-` (`a.b-c` and `a.b.c`) therefore share a
+  variable. Authors SHOULD avoid that.
+
+## 4.3 Emission
+
+A token that is defined becomes a declaration on `:root` in the layer `tokens`.
+
+- **TOK-7.** Before reading any rule, the resolver collects the tokens of every `tokens` block
+  in the file, however deeply nested in conditions, into one map. When the same key is
+  defined twice, the later definition in source order replaces the earlier one in that map.
+  The map is also seeded with the tokens the host passes in (4.5), starting from the
+  built-in defaults.
+- **TOK-8.** Each `tokens` block, when it is reached during the walk (5.4), emits one rule
+  with selector `:root`, layer `tokens`, the media, containers and signals of the context it
+  is in, and one declaration per key it defines itself, in the order the keys were written.
+  The value of each declaration is the value that block wrote, not the final value in the
+  map.
+- **TOK-9.** Before the walk, the resolver also builds the *registry rule*: selector `:root`,
+  layer `tokens`, no conditions, one declaration for every key in the map in map order. It
+  takes the first order number (0). It is returned beside the rules and is not part of the
+  rules list. Hosts install it first, so every token has a value even before its block is
+  reached. Because it is built from the map, it carries the last definition of each key.
+- **TOK-10.** An error in a token value is reported at the line where the token was written,
+  and only by the file that defines it. A token that comes from the host (4.5) is not checked
+  again.
+
+```dssl
+tokens { color { bg: white } }
+@media dark { tokens { color { bg: black } } }
+.a { background: color.bg }
+```
+
+This yields one `:root` rule for `white` and one for `black` under the dark condition. Both
+are in the layer `tokens`, and the second has a later order, so it wins when dark applies.
+
+## 4.4 Looking up a token
+
+- **TOK-11.** An identifier in a value is a token reference when its text is exactly a key in
+  the map.
+- **TOK-12.** Only an exact key matches. `color.ink2.bogus` is not `color.ink2`: it is not a
+  token, so it falls through to the keyword rule and is the error `unknown value`. (Before
+  0.16.3 the engine shortened the path from the right and used the first prefix that was a
+  key, which hid typos, see D-2.)
+
+## 4.5 Tokens across files
+
+A page usually loads several DSSL files. The host keeps a *registry* of token values and a
+registry of motions (7.3) and passes both into the resolver for each new file, in load order.
+The registry starts as the built-in defaults.
+
+- **TOK-13.** For a file, the starting map is the registry. The resolver adds the file's own
+  tokens on top. After the file, the host updates the registry from the file's final map.
+- **TOK-14.** The built-in defaults are in appendix A. They are defined with ordinary token
+  syntax and can be replaced by any `tokens` block.
+
+Why: this is how `tokens.dssl` can define a palette that every later file uses, and how a
+later file can override one token from an earlier one.
+
+## 4.6 Scoped tokens
+
+A custom property with a dotted name re-declares a token for the element it is on.
+
+```dssl
+.danger { --color.accent: color.err }
+```
+
+- **TOK-15.** A declaration whose property starts with `--` and contains a `.` is written
+  with the property `--dssl-` followed by the rest of the name with dots replaced by dashes
+  (`--color.accent` becomes `--dssl-color-accent`). The value is resolved with
+  `bareIdents: true`. Custom properties inherit, so every `var()` in the subtree sees the new
+  value.
+- **TOK-16.** A custom property without a dot (`--brand`) is passed through with only its
+  value resolved.
+
+## 4.7 Token shortcuts
+
+Three semantic properties take a token name as a word (chapter 6): `shadow:`, `radius:`.
+
+- **TOK-17.** `shadow: sm|md|lg|xl` is `box-shadow: var(--dssl-shadow-<word>)` whether or not
+  that token exists. `shadow: none` is `box-shadow: none`. A word that matches
+  `[A-Za-z][\w-]*` and for which `shadow.<word>` is a key in the map becomes
+  `box-shadow: var(--dssl-shadow-<word>)`. Anything else is resolved as an ordinary value.
+- **TOK-18.** `radius:` takes one to four words. Each of `sm`, `md`, `lg`, `full`, `xl` becomes
+  `var(--dssl-radius-<word>)` whether or not it exists. Any other word that matches
+  `[A-Za-z][\w-]*` and for which `radius.<word>` is a key becomes the same kind of reference.
+  Everything else is resolved as an ordinary value. The words are joined by spaces into
+  `border-radius`. When one of the five words is used and `radius.<word>` is not a key, the
+  reference is still written, and the warning is
+  `radius "<word>" is not defined, so it will not apply` with the hint
+  `add it with  tokens { radius { <word>: 32 } }`. By default only `sm`, `md`, `lg` and `full`
+  exist, so `xl` warns until the author defines it (D-4).

native/spec/05-cascade.md

@@ -0,0 +1,291 @@
+# 5. Cascade
+
+The resolver flattens the nested blocks of a file into a flat list of *rules*. The cascade
+then decides, per element, which declaration of each property wins. This chapter defines both.
+
+## 5.1 The rule record
+
+A rule is a record with these fields.
+
+| Field | Meaning |
+|---|---|
+| `id` | a number, unique inside the document, in creation order |
+| `sel` | the full selector text, nesting already joined (5.3) |
+| `media` | a list of normalized media conditions (5.5). All must hold. |
+| `signals` | a list of signal conditions (5.9). All must hold. |
+| `containers` | a list of container conditions (5.6). All must hold. |
+| `layer` | one of `tokens`, `base`, `components`, `utilities`, `pin` |
+| `order` | a number: this rule's place in the file, counted from 0 (5.4) |
+| `decls` | a list of declarations: `{ prop, value, line }` plus extras |
+| `file`, `line` | where the rule came from |
+| `pseudo` | the pseudo-element name for a shadow rule, else null |
+| `states` | the set of state words found in `sel` (5.7) |
+
+A *shadow rule* has the same fields. It is a rule whose `sel` names a pseudo-element target
+(5.8).
+
+## 5.2 Layers
+
+- **CAS-1.** The layers are ranked `tokens` (0), `base` (1), `components` (2), `utilities`
+  (3), `pin` (4).
+- **CAS-2.** Rules outside any layer block are in `components`. `@layer <name> { }` puts the
+  rules inside it in layer `<name>` when that is one of the five names, and in `components`
+  for any other name, with the warning `unknown layer "<name>", treated as "components"`. The
+  hint is the did-you-mean over the five names, or
+  `the layers are tokens, base, components, utilities, pin` when none is close. (D-3)
+- **CAS-3.** `pin { }` puts its rules in layer `pin`. Declarations in `pin` behave as if
+  `!important`: they beat declarations from every other layer, and they beat inline styles
+  that the page itself wrote (5.11).
+- **CAS-4.** The layer `tokens` is used only for token rules (chapter 4).
+- **CAS-5.** There is no specificity. For two matching rules, a lower layer rank loses to a
+  higher one. Within a layer, the later `order` wins.
+
+```dssl
+.a { color: red }
+pin { .a { color: blue } }
+@layer base { .a { color: green } }
+```
+
+All three match. `base` is below `components`, so `red` beats `green`, and `pin` beats both.
+The element is blue.
+
+## 5.3 Nesting
+
+A selector block may contain declarations, other selector blocks, state blocks, pseudo-element
+blocks, `@media`, `@container`, `@signal`, `@layer` and `pin` blocks, and `use` lines.
+
+- **CAS-6.** Nested selectors are joined to the parent selector. If the child contains `&`,
+  each `&` is replaced by the parent selector. Otherwise the result is the parent, a space
+  and the child (a descendant selector). A block at the top level is used as written.
+- **CAS-7.** Lists are split at top-level commas (not inside parentheses or brackets, so
+  `:is(.x, .y)` stays whole) on both sides. Every parent part is joined with every child part,
+  parent-major: for each parent part in order, each child part in order. The results are
+  joined with `, `. So `.a, .b { .c { } }` means `.a .c, .b .c`, `.a { .c, .d { } }` means
+  `.a .c, .a .d`, and `&` is replaced by each parent part in turn. With no commas on either
+  side the result is the plain join of CAS-6. (Before 0.16.3 the lists were joined as whole
+  text, giving `.a, .b .c`. That was D-7.)
+- **CAS-8.** A nested block whose header is a single plain word that is close to a state word
+  but not equal to it (`hove`, `focs`) is still a selector, but the resolver reports a
+  warning: `"<word>" compiled as a descendant selector`, with the hint naming the state.
+  This applies only when the header is a bare word of letters, digits and dashes, and there is
+  a parent selector. "Close" is the did-you-mean rule (9.3). The warning never fires for a
+  word that is an HTML element name (`li`, `td`, `menu`, and the rest of the list in the
+  reference engine), because a nested element name is a descendant selector on purpose. (Before
+  0.16.3 `li` was warned about, being two edits from `link`. That was D-8.)
+- **CAS-9.** Conditions nest. `@media`, `@container` and `@signal` add one entry to the
+  `media`, `containers` or `signals` list of everything inside. A layer block replaces the
+  layer of everything inside.
+- **CAS-10.** A state block adds `:<state>` to the parent selector (5.7). A pseudo-element
+  block makes a shadow rule (5.8).
+
+```dssl
+.card {
+  background: color.card
+  hover { background: color.paper }
+  @media dark { background: color.ink }
+  &.on { background: color.accent }
+}
+```
+
+## 5.4 Order
+
+- **CAS-11.** Each rule, shadow rule and `raw` block gets the next order number at the moment
+  it is emitted. The registry rule (4.3) gets 0. Token rules get a number at the moment their
+  block is reached.
+- **CAS-12.** A rule is emitted when its block ends, or when a nested block starts, if it has
+  declarations waiting. So a block with declarations before and after a nested block makes
+  two rules, one for each fragment, in source order:
+
+```dssl
+.a {
+  color: red
+  hover { color: blue }
+  padding: 4
+}
+```
+
+This makes `.a { color }` (order 1), `.a:hover { color }` (order 2) and `.a { padding }`
+(order 3). The hover rule beats the base rule because it comes later. Writing the hover block
+before `color: red` would make `color: red` win while hovering.
+
+- **CAS-13.** A nested block is fully walked, and its own rule is emitted, before the rest of
+  its parent. Blocks nested inside it are emitted first.
+- **CAS-14.** A rule with no declarations after resolution is not emitted.
+- **CAS-15.** Declarations that appear with no selector around them are the error
+  `declarations must live inside a selector`, at the line of the first (line 0 for the file
+  top level).
+- **CAS-16.** `order` is local to a file. When the host loads several files, it MUST place
+  them in load order and give every rule one position in that single sequence: the numbers of
+  a later file continue after the largest number of the earlier one. A later file wins over
+  an earlier one for equal layers.
+
+Why: before 0.8.2 each file counted from zero and the numbers were compared across files,
+which made a later file lose to an earlier one for no visible reason.
+
+## 5.5 Media conditions
+
+`@media <query>` adds one normalized query to `media`.
+
+- **CAS-17.** The query is trimmed. An empty query is the error `@media needs a condition`
+  and the query `(min-width: 0)`.
+- **CAS-18.** The single words `dark`, `light` and `reduced-motion` (any case) become
+  `(prefers-color-scheme: dark)`, `(prefers-color-scheme: light)` and
+  `(prefers-reduced-motion: reduce)`.
+- **CAS-19.** `N` or `>= N` becomes `(min-width: Npx)`. `<= N` becomes `(max-width: Npx)`.
+  `A..B` becomes `(min-width: Apx) and (max-width: Bpx)`. `N`, `A` and `B` are numbers.
+- **CAS-20.** Any other query is kept, except that in any comparison, a bare number after
+  `>`, `<` or `=` that has no unit gets `px`: `(width >= 768)` becomes `(width >= 768px)`.
+- **CAS-21.** A condition holds when the host's media query evaluation says it holds.
+
+```dssl
+.a {
+  @media 768 { padding: 24 }
+  @media <= 480 { padding: 12 }
+  @media 480..960 { gap: 4 }
+}
+```
+
+## 5.6 Container conditions
+
+- **CAS-22.** `@container <query>` adds one normalized query (same rules as 5.5, with the
+  empty case `(min-width: 0)`) to `containers`.
+- **CAS-23.** A container condition holds for an element when the nearest ancestor (or the
+  element itself) that the page marked as a container has a content width that satisfies every
+  bound in the query. A bound is `(min-width: N)`, `(max-width: N)`, `(width >= N)` or
+  `(width <= N)`. If no ancestor is a container, the condition does not hold.
+
+## 5.7 States
+
+- **CAS-24.** A state block `name { ... }` in a block with selector `S` makes a rule with
+  selector `S:name`. When `S` is a list, the state is added to every part (`.a, .b` with
+  `hover` is `.a:hover, .b:hover`). The state words are in appendix A. State blocks can nest
+  (`hover { focus { } }` gives `S:hover:focus`).
+- **CAS-25.** A state block with no selector around it is the error `"<name>" needs a
+  selector around it`.
+- **CAS-26.** All state words except `seen` are the CSS pseudo-classes of the same name and
+  are matched by the host.
+- **CAS-27.** `seen` is not a CSS pseudo-class. An element is *seen* once at least part of it
+  has been inside the viewport, and stays seen. A rule whose selector contains `:seen`
+  matches when the selector with `:seen` removed (or `*` if nothing is left) matches and the
+  element is seen. An implementation MUST re-evaluate the element when it becomes seen.
+- **CAS-28.** Inside a `seen` block, a value that contains `->` is the error
+  `"<prop>: <value>" - the -> arrow is motion syntax and does nothing inside seen { }`. The
+  rule is still emitted.
+- **CAS-29.** `states` is the set of state words found in `sel` as `:word`, from the list:
+  hover, focus-visible, focus, active, disabled, checked, empty, target, invalid, valid,
+  required, open, closed, read-only, read-write, placeholder-shown, first-child, last-child,
+  only-child, seen.
+
+## 5.8 Pseudo-elements and shadow rules
+
+Inline styles cannot reach pseudo-elements, so the reference engine puts them in a separate
+stylesheet. A native implementation has no such limit, but the resolver output still keeps
+them in `shadowRules`, so that results are comparable.
+
+- **CAS-30.** A block `::name { }` inside a selector block `S` makes a shadow rule with
+  `sel` = `S` and `pseudo` = `name`. When `S` is a list, there is one shadow rule per part
+  (and per state block inside it), each with its own copy of the declarations. At the top
+  level (no selector), `sel` is `*`.
+- **CAS-31.** Inside a pseudo-element block, only declarations and state blocks are allowed.
+  Anything else is the error
+  `only declarations and states (hover { }) may appear inside a pseudo-element block`. A
+  state block inside makes a second shadow rule with `sel` = `S:<state>`. `seen` there is
+  the error `"seen" is engine-native and has no meaning on a pseudo-element`.
+- **CAS-32.** A bare `content:` (no value) inside a pseudo-element becomes `content: ""`.
+- **CAS-33.** Engine-native declarations (the `@` ones in 6.8) are not allowed on a
+  pseudo-element, except `@animate`. Each is the error
+  `"<prop>" is engine-native and has no meaning on ::<name> - a pseudo-element has no DOM
+  handle`, and is dropped.
+- **CAS-34.** The same applies when the pseudo-element is written in the selector itself
+  (`.card::before { }`). The selector is split at the first top-level `::`. If every part of
+  a selector list has a pseudo-element, the rule becomes one shadow rule per part. If only
+  some do, the error is `selector list mixes pseudo-element and plain selectors: "<sel>"`
+  and nothing is emitted.
+- **CAS-35.** A pseudo-element name MUST be in the pseudo-element list or match the vendor
+  pseudo pattern (appendix A), otherwise: `unknown pseudo-element "::<name>"`. `::slotted()`
+  is the error `::slotted() only exists inside a shadow tree, and DSSL styles the light DOM`.
+  `:seen` combined with a pseudo-element is an error.
+- **CAS-36.** If every declaration of a shadow rule was rejected, nothing is emitted.
+
+```dssl
+.btn {
+  ::after {
+    content: ""
+    opacity: 0
+    hover { opacity: 1 }
+  }
+}
+```
+
+## 5.9 Signals
+
+A signal is a named value that the page sets. It is how DSSL reads state that CSS cannot see
+(a theme chosen in a menu, a game screen). Chapter 11 says how a browser could expose it.
+
+- **CAS-37.** `@signal <expr>` adds one condition to `signals`. The forms are:
+
+  | Form | Condition record |
+  |---|---|
+  | `name` | `{ name, op: 'truthy', value: null }` |
+  | `name == value` | `{ name, op: '==', value }` |
+  | `name != value` | `{ name, op: '!=', value }` |
+  | `name in (a, b)` | `{ name, op: 'in', value: 'a,b', values: ['a','b'] }` |
+  | `name not in (a, b)` | `{ name, op: 'notin', value: 'a,b', values: ['a','b'] }` |
+
+  A name matches `[A-Za-z_][\w-]*`. A value may be quoted with `"` or `'`, and the quotes are
+  removed. List values are trimmed, unquoted, and empty ones removed.
+- **CAS-38.** An expression in none of these forms is the error
+  `bad @signal expression "<expr>"` and is treated as `truthy` on the whole text. An empty
+  list is the error `@signal <name> <in|not in> ( ) has no values`.
+- **CAS-39.** A signal's value is looked up on the element, then on each ancestor, then at the
+  document level. The first place that has the name wins. Values are compared as strings.
+- **CAS-40.** A signal condition holds when:
+  - `truthy`: the name has a value that is not `false`, `null`, the string `false`, `0` or
+    the string `0`,
+  - `==`: the name has a value and its string equals the condition's value,
+  - `!=`: the name has no value, or its string differs,
+  - `in`: the name has a value and it is in the list,
+  - `notin`: the name has no value, or it is not in the list.
+
+## 5.10 Which rules apply to an element
+
+- **CAS-41.** A rule applies to an element when all of these hold:
+  1. its selector matches the element. A rule with selector `:root` applies only to the
+     document's root element;
+  2. if the selector contains `:seen`, CAS-27 holds;
+  3. every `media` condition holds;
+  4. every `signals` condition holds;
+  5. every `containers` condition holds.
+- **CAS-42.** Applicable rules are sorted by layer rank, then by `order` (both ascending). The
+  declarations of the sorted rules are flattened in that order, each rule's declarations in
+  their written order.
+- **CAS-43.** For each property, the last declaration in that sequence wins. Engine-native
+  declarations (6.8) each have their own combination rule, given with their feature.
+
+## 5.11 What else decides the value
+
+These rules are about where DSSL meets the page.
+
+- **CAS-44.** *Inline styles written by the page.* A declaration that the page itself put in
+  the element's `style` attribute, or set from a script, beats any rule that is not in `pin`.
+  A `pin` rule beats it. A property the page removes is free for rules again.
+- **CAS-45.** *Shorthand and longhand.* A shorthand expands into its longhands in cascade
+  position. Of a shorthand and one of its longhands, the one that comes later in the
+  flattened sequence wins for that longhand. This holds for `border` and its `-color`,
+  `-width` and `-style` longhands, and for `padding`, `margin` and `gap` and their sides.
+- **CAS-46.** *Handing back with yield.* After the sequence is flattened, properties named by
+  the last applicable `yield:` (6.7) are removed from the DSSL result, so ordinary CSS decides
+  them. `yield: none` clears the list.
+- **CAS-47.** *Alignment makes a box.* If the winning declarations include any of
+  `place-items`, `place-content`, `align-items`, `justify-items`, `align-content` or
+  `justify-content`, and the element has no declared `display`, and the element's natural
+  `display` is not `flex`, `inline-flex`, `grid` or `inline-grid` (and is not `none` or
+  `contents`), then `display` is set to `inline-grid` when the natural `display` is `inline` or
+  starts with `inline-`, and to `grid` otherwise. An explicit `display` from any rule wins over
+  this.
+
+Why: alignment properties do nothing on a plain `span` or `button`, and DSSL treats that as a
+silent failure.
+
+- **CAS-48.** *Border and positional shorthands in the inline lane.* A browser that computes
+  styles natively does not need extra rules for CAS-45: the CSS cascade already does it.

native/spec/06-properties.md

@@ -0,0 +1,261 @@
+# 6. Properties
+
+A declaration `prop: value` becomes zero or more *output declarations*. An output declaration
+is either an ordinary CSS declaration `{ prop, value }`, or an *engine-native declaration*
+whose property starts with `@` (6.8).
+
+## 6.1 Lookup order
+
+- **PRP-1.** For each declaration, the resolver does the first of these that applies:
+  1. If the value contains `!important` (VAL-15): report the error, emit nothing.
+  2. If `prop` starts with `--`: it is a custom property (TOK-15, TOK-16).
+  3. If `prop` is a semantic property (the names in 6.2 to 6.7, and appendix A): call that
+     property's expansion. It returns its own output declarations.
+  4. If `prop` is `animation` or `animation-name`: resolve the value with `bareIdents: true`
+     and `unitless` per the unitless list. (Motion names are bare words, and must not be
+     reported as unknown values.)
+  5. If the value is `fluid ...` and `prop` is in the fluid list: VAL-12 to VAL-14.
+  6. If `prop` is not a known CSS property (appendix A): report
+     `unknown property "<prop>"`, hint = did-you-mean over the known properties and the
+     semantic property names. Emit nothing.
+  7. Otherwise: one output declaration with the same property and the value resolved by
+     chapter 3.
+
+The known-property list holds every property that CSS defines, plus a few vendor ones. It is
+generated from the engine's vocabulary module (appendix A).
+
+Each output declaration also carries the `line` of the source declaration.
+
+```dssl error
+.a { colour: red }
+```
+
+## 6.2 Size and flow words
+
+- **PRP-2.** `size: w [h]`. Two declarations `width` and `height`. The height defaults to the
+  width. Both are lengths.
+- **PRP-3.** `circle: s`. `width: s`, `height: s`, `border-radius: 50%`.
+- **PRP-4.** `z: n` is `z-index: n` (a plain number). `grow`, `shrink` are `flex-grow`,
+  `flex-shrink` (a plain number, default 1 when empty). `basis: l` is `flex-basis: l`.
+- **PRP-5.** `cover [position]` is `position: <position or absolute>` and `inset: 0`.
+  `sticky [top]` is `position: sticky` and `top: <top or 0>`.
+- **PRP-6.** `truncate` (no value) is `overflow: hidden`, `text-overflow: ellipsis`,
+  `white-space: nowrap`.
+- **PRP-7.** `visually-hidden` (no value) is `position: absolute; width: 1px; height: 1px;
+  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+  border: 0`, in that order.
+
+## 6.3 Row, column, grid, stack, place, center
+
+*Place words* map to two values, `(cross, main)`:
+
+| word | cross | main |
+|---|---|---|
+| `center` | `center` | `center` |
+| `start` | `start` | `flex-start` |
+| `end` | `end` | `flex-end` |
+| `between` | `center` | `space-between` |
+| `around` | `center` | `space-around` |
+| `evenly` | `center` | `space-evenly` |
+| `stretch` | `stretch` | `flex-start` |
+| `baseline` | `baseline` | `flex-start` |
+
+- **PRP-8.** `row: words` and `column: words` start with `display: flex` and
+  `flex-direction: row|column`, then read the words in order:
+  - `gap N`: `gap: N` (a length). Missing `N` is the error `gap needs a value`.
+  - `wrap` / `nowrap`: `flex-wrap`.
+  - `reverse`: the direction becomes `row-reverse` or `column-reverse`.
+  - `inline`: `display` becomes `inline-flex`.
+  - a place word: see PRP-9.
+  - anything else: error `unknown word "<w>" in <row|column>`, hint = did-you-mean over
+    `gap center start end between around evenly stretch baseline wrap nowrap reverse inline`.
+- **PRP-9.** Each place word has an axis role. `between`, `around`, `evenly` are *main*
+  (they write `justify-content`). `stretch` and `baseline` are *cross* (they write
+  `align-items`). `center`, `start`, `end` are *both*: they write whichever axes have not been
+  written yet by an earlier word in this declaration.
+  - A word that writes an axis a second time overrides it, with a warning:
+    `two words in <dir> write <prop>: "<new>" overrides "<old>"`, or when the same word, `"<w>"
+    is written twice in <dir> - the second copy wins`.
+  - A *both* word with both axes already taken writes nothing and warns
+    `"<w>" has nowhere to go: justify-content came from "<a>", align-items came from "<b>"`
+    (or the "written twice" form when it is the same word).
+- **PRP-10.** `grid: words`. Words `gap N` and `rows N` are taken out first. The rest are the
+  column spec:
+  - nothing: error `grid needs columns`, columns are `none`,
+  - one integer `N`: `repeat(N, 1fr)`,
+  - `auto-fill L` or `auto-fit L`: `repeat(auto-fill, minmax(L, 1fr))` with `L` a length,
+  - otherwise each word is a length, joined by spaces.
+  The output is `display: grid`, `grid-template-columns`, then `gap` if given, then
+  `grid-template-rows` if given (`repeat(N, 1fr)` for an integer, a length otherwise).
+- **PRP-11.** `stack: word` (default `center`) is `display: grid`,
+  `place-items: <cross> <main>` and `@stack: "1"`. An unknown word is the error
+  `unknown place "<w>" in stack` and only `@stack` is emitted.
+- **PRP-12.** `place: word` is `place-items` and `place-content`, both `<cross> <main>`.
+  Unknown: `unknown place "<w>"`.
+- **PRP-13.** `center: both|x|y` (default `both`). `both`: `place-items: center center` and
+  `place-content: center center`. `x`: `justify-items: center`, `justify-content: center`.
+  `y`: `align-items: center`, `align-content: center`. Unknown:
+  `unknown center axis "<v>"`.
+- **PRP-14.** `align: center|start|end|stretch|baseline` is `align-items` with that word.
+  Unknown: `unknown align "<v>"`.
+
+```dssl
+.toolbar { row: gap 8 between center }
+.board   { grid: 3 gap 12 }
+.pane    { stack: center }
+.hero    { center: both }
+```
+
+The first rule gives `display: flex; flex-direction: row; gap: 8px;
+justify-content: space-between; align-items: center`.
+
+## 6.4 Text and look
+
+- **PRP-15.** `font: size[/line-height] [color]`. DSSL's `font:` is not the CSS shorthand.
+  It writes `font-size` (a length, default `16`), then `line-height` (a plain number) if a `/`
+  part is there, then `color` if more words follow.
+  If the value looks like the CSS shorthand (it contains `"`, `'` or `,`, or its first word is
+  one of `italic oblique bold bolder lighter normal small-caps condensed expanded caption icon
+  menu message-box small-caption status-bar system-ui serif sans-serif monospace`, or it is a
+  weight `100`..`900` followed by a sized word), the result is the error
+  `font: "<v>" looks like the CSS font shorthand, but DSSL's font: means size, line height and
+  colour` and nothing is emitted.
+- **PRP-16.** `fluid: a, b[, v0, v1]` is `font-size` through VAL-12 to VAL-14.
+- **PRP-17.** `shadow` and `radius`: TOK-17, TOK-18.
+- **PRP-18.** `text-stroke: width [color] [inside]`, or `none`. It writes
+  `-webkit-text-stroke: <width> <color>` (width in px if bare, color default `currentcolor`),
+  and `paint-order: stroke fill` unless `inside` is given. `none` writes
+  `-webkit-text-stroke: 0` and `paint-order: normal`. A missing or non-numeric width is the
+  error `text-stroke needs a width first`.
+- **PRP-19.** `outline-shape: width [color]`, or `none`. It writes one `filter` made of four
+  `drop-shadow(x y 0 color)` terms for `(w,0)`, `(-w,0)`, `(0,w)`, `(0,-w)`. `none` is
+  `filter: none`. A missing width is the error `outline-shape needs a width first`.
+- **PRP-20.** `rotate: v`. A bare number `n` is `n` degrees. `x|y|z n` and four numbers also
+  get `deg`. Anything else is resolved as a unitless value.
+
+## 6.5 transition
+
+`transition: part, part, ...` or `none`. Each part is `duration [easing] [property]`.
+
+- **PRP-21.** The duration is a number with an optional `ms` or `s` unit. A bare number is
+  milliseconds. The easing is an easing name (appendix A) or a `cubic-bezier(...)` or
+  `steps(...)` call. The property is a known CSS property, or one of the deform names
+  (`bend`, `bend-y`, `bend-up`, `fold`, `stretch`, which mean `transform`), and defaults to
+  `all`. The part becomes `<property> <duration> <easing>`, with the easing defaulting to
+  `ease`. Parts are joined by `, `.
+- **PRP-22.** If a part does not start with a time but contains one (the CSS habit,
+  `color .2s ease`), the error is `transition: the CSS form (property first) is not DSSL`,
+  with a hint that rewrites the part in DSSL order. A part with no time at all is the error
+  `transition duration "<d>" is not a time`. An unknown property is
+  `unknown transition property "<p>"`. A part with an error is dropped. If no part survives,
+  nothing is emitted.
+
+## 6.6 gradient
+
+`gradient: layer + layer + ...`. The first layer is on top. Each layer is a *kind sentence*
+optionally followed by *layer options*.
+
+- **PRP-23.** Layers are split on a top-level `+` that has white space on both sides.
+- **PRP-24.** Layer options may follow the sentence, in any order, each at the end of the text:
+  `tile W [H]` (background size, bare numbers are px, H defaults to W), `offset X Y`
+  (background position) and one of `no-repeat`, `repeat-x`, `repeat-y`.
+- **PRP-25.** If the layer (after options) starts with a CSS gradient function, `url(`,
+  `image-set(` or `-webkit-`, it is resolved as an ordinary value. Otherwise it is a sentence.
+- **PRP-26.** A sentence is `[repeating] linear|radial|conic <head> <stops>` or
+  `mesh <base>, <blob>, ...`. The output is the CSS function `linear-gradient(...)`,
+  `radial-gradient(...)`, `conic-gradient(...)` (with `repeating-` first when asked).
+- **PRP-27.** Stops are separated by `->` or by commas. Each is a color (a token, hex, named
+  color, color function, alpha form) with up to two trailing positions, or a lone position
+  (a midpoint hint). Bare numbers in positions are px (degrees for `conic`), except `0`
+  which stays `0`. A stop word that is a plain word but not a color name is the error
+  `gradient stop "<s>" is not a color`.
+- **PRP-28.** A *linear* head is an angle (a bare number is degrees, `45deg` also works) or
+  `to <side> [<side>]`. Default `180deg`. A *radial* head is made of `circle`, `ellipse`,
+  position words, lengths and `at`. A *conic* head is `from <angle>` and/or `at <position>`.
+  Anything else is an error saying what is not part of the gradient. An interpolation space
+  (`in oklch`, `in hsl longer hue`, ...) may end the head.
+- **PRP-29.** `mesh` takes a base color first (an item without `at`), then blobs
+  `color at X Y [size S]` (size defaults to 60%). Each blob is
+  `radial-gradient(circle farthest-side at X Y, color, transparent S)`. The base is
+  `linear-gradient(base, base)`. The blobs come first, the base last.
+- **PRP-30.** Errors: `gradient needs a kind: ...`, `gradient needs at least two stops`,
+  `"<s>" is a midpoint, so it has to sit between two colours`, `a gradient stop is missing its
+  color`, `mesh needs a base colour and at least one blob`, `mesh item "<i>" needs a position`,
+  `mesh needs a base colour first (an item without "at")`.
+- **PRP-31.** `gradient:` writes `background-image` marked as coming from a gradient, plus
+  `background-size`, `background-position` and `background-repeat` only when some layer set
+  one (with `auto`, `0 0` and `repeat` for the layers that did not).
+- **PRP-32.** `gradient-text: layers` writes the same image, then `background-clip: text`,
+  `-webkit-background-clip: text`, `color: transparent`, `-webkit-text-fill-color: transparent`.
+- **PRP-33.** `gradient-flow: duration [easing] [alternate|alternate-reverse]` or `none`
+  writes `@gradient-flow` with `{ duration (ms), easing, direction }`. `none` and an empty
+  value write `@gradient-flow: null`. The easing default is `linear` and the direction
+  default is `normal`.
+
+```dssl
+.stripes { gradient: repeating linear 45, #fff 0 10, color.ink 10 20 }
+.blend   { gradient: linear 90 in oklch, #ff0055 -> #00d4ff }
+.sheen   { gradient: radial at top left, #fff/40 -> transparent + linear 135, #123 -> #456 }
+```
+
+## 6.7 yield
+
+`yield: name name ...` hands properties back to ordinary CSS.
+
+- **PRP-34.** The names are separated by spaces or commas and lowercased. Each MUST be a known
+  CSS property or a semantic property name, otherwise the error
+  `yield: "<n>" is not a CSS property` and nothing is emitted. An empty list is the error
+  `yield needs the properties to hand back`. `none` writes `@yield: null`. Otherwise it writes
+  `@yield` with the list of names.
+- **PRP-35.** For a name that is a shorthand, its longhands are handed back too (`padding`
+  hands back `padding-top` and the rest).
+
+## 6.8 Engine-native declarations
+
+Declarations whose property starts with `@` are not CSS. They describe behavior that needs
+more than a computed style. Each is produced by exactly one DSSL property and consumed by the
+feature it belongs to.
+
+| Output property | Produced by | Value | Chapter |
+|---|---|---|---|
+| `@animate` | `animate:` | a spec record, or null | 7 |
+| `@stagger` | `stagger:` | milliseconds or null | 7 |
+| `@overlap` | `overlap:` | `allow`, `deny`, `auto` | 8.6 |
+| `@stack` | `stack:` | `"1"` | 6.3 |
+| `@bend`, `@bend-y`, `@bend-up`, `@fold` | `bend`, `bend-y`, `bend-up`, `fold` | degrees | 8.5 |
+| `@stretch` | `stretch:` | `{ factor, axis }` | 8.5 |
+| `@bend-around` | `bend-around:` | degrees | 8.5 |
+| `@gradient-flow` | `gradient-flow:` | spec record or null | 6.6 |
+| `@texture` | `texture:` | list of layers or null | 8.1 |
+| `@aura-glow`, `@aura-particles` | the aura family | list of layers or null | 8.2 |
+| `@slider` | `slider:` | spec record | 8.3 |
+| `@tilt` | `tilt:` | spec record or null | 8.4 |
+| `@yield` | `yield:` | list of names or null | 6.7 |
+
+- **PRP-36.** Engine-native declarations are not CSS and a host MUST NOT pass them to the
+  style system as properties. A Level 3 implementation combines them with the rule for each
+  feature. The default combination is the CSS one: for each name, the last in cascade order
+  wins. Exceptions are `@animate` (all of them are kept, 7.2) and `@yield` (names accumulate,
+  5.11).
+
+## 6.9 behavior and use
+
+```dssl
+behavior focus-ring {
+  outline: 2 solid color.accent
+  outline-offset: 2
+}
+
+.btn { use focus-ring }
+```
+
+- **PRP-37.** A top-level `behavior name { ... }` defines a named block of declarations and
+  nested blocks. A second block with the same name is the error `behavior "<n>" is defined
+  twice`. Behaviors are collected before the walk, so a behavior may be used above its
+  definition. `behavior` is allowed only at the top level.
+- **PRP-38.** `use name` inside a block replays the behavior's children there, as if they had
+  been written in that place, with the same context. An unknown name is
+  `unknown behavior "<n>"` with a did-you-mean over the defined names. A behavior that uses
+  itself, directly or through others, is `behavior cycle involving "<n>"`.
+- **PRP-39.** The declarations of a behavior are resolved at the place they are used, so
+  tokens, conditions and layers there apply to them.

native/spec/07-motion.md

@@ -0,0 +1,104 @@
+# 7. Motion
+
+DSSL separates *defining* a motion from *running* it. `motion` defines keyframes. `animate:`
+runs one on an element. `seen` and states decide when.
+
+## 7.1 Defining a motion
+
+```dssl
+motion rise-in {
+  from { opacity: 0; translate: 0 18 }
+  to   { opacity: 1; translate: 0 0 }
+}
+
+motion pulse {
+  essential
+  0%   { opacity: 1 }
+  50%  { opacity: 0.6 }
+  100% { opacity: 1 }
+}
+```
+
+- **MOT-1.** `motion <name> { ... }` is allowed only at the top level. A motion block holds
+  keyframe blocks and the word `essential`. Any other declaration is the error `"<prop>" is
+  not allowed inside motion`, with the hint `motions take from/to/at blocks and essential`.
+- **MOT-2.** A keyframe block header is one of `from` (0), `to` (100), `at N%` or `N%` or
+  `N`, or a comma list of these (`0%, 100%`). Every offset MUST be between 0 and 100. A bad
+  header is the error `bad keyframe selector "<h>"`.
+- **MOT-3.** `essential` (alone, or as `essential: true`) marks the motion as one that keeps
+  playing under `prefers-reduced-motion`.
+- **MOT-4.** Declarations inside a keyframe are resolved like any other declaration
+  (chapter 6) with `prop` set to the source property. Custom properties are dropped. Each
+  output property is named in camelCase (`background-color` becomes `backgroundColor`).
+- **MOT-5.** In a keyframe, the deform words (`bend`, `bend-y`, `bend-up`, `fold`, `stretch`)
+  are not kept as properties. They are composed into one `transform` (8.5), with an extra
+  `transformOrigin` for the edge-pinned ones, because there is no box yet when keyframes are
+  built. A deform value of 0 is a real reset.
+- **MOT-6.** A list header makes one frame per offset with the same properties. The frames of a
+  motion are sorted by offset (a stable sort).
+- **MOT-7.** The result is `{ essential: bool, frames: [{ offset, props }] }`. A motion block
+  is parsed once, the first time it is needed.
+
+## 7.2 Running a motion
+
+`animate: part, part, ...` or `none`. Each part is `name [words]`.
+
+- **MOT-8.** The spec record starts as
+  `{ motion: name, duration: 400, easing: smooth, fill: 'both', delay: 0 }`. `smooth` is the
+  `cubic-bezier(0.4, 0, 0.2, 1)` easing from appendix A.
+- **MOT-9.** Words after the name are read in order:
+  - `delay N`, `jitter N`, `iterations N`: the next word is a number with an optional `ms` or
+    `s` unit (for `iterations` a plain count). Missing: error `<word> needs a number`.
+  - `essential`: sets `essentialHere`.
+  - a number with optional unit: the first word after the name is the duration (`s` means
+    seconds, otherwise ms); a later one is the delay.
+  - an easing name: sets the easing.
+  - `both`, `forwards`, `backwards`, `none`, `auto`: the fill mode.
+  - `infinite`: iterations is infinity.
+  - `alternate`, `alternate-reverse`, `reverse`, `normal`: the direction.
+  - anything else: error `unknown animate part "<w>"`, hint = did-you-mean over the easing
+    names and the words above.
+- **MOT-10.** One part gives one `@animate` declaration. Several parts (a top-level comma)
+  give several, in order. `animate: none` gives `@animate: null`.
+- **MOT-11.** After the whole file is walked, every `@animate` with a motion name is linked:
+  the motion is looked up in this file, then in the motions the host passed in (7.3). If
+  found, the spec gets `frames`, and `essential` is true when the motion or the spec says so.
+  If not found, the error is `unknown motion "<n>"`, with a did-you-mean over the file's
+  motions, or a hint showing how to define one, and the spec is marked `broken`.
+- **MOT-12.** Several `@animate` declarations matched by one element all run, in cascade
+  order. `@animate: null` from a later rule cancels the ones before it.
+
+## 7.3 Motions across files
+
+- **MOT-13.** The host passes the already-built motions of earlier files to the resolver (the
+  motion registry). A motion defined in an earlier file can be used by a later one, like a
+  token. A motion in the current file shadows one in the registry.
+- **MOT-14.** After resolving, every motion in the file is built (not only the referenced
+  ones) and returned as `motionFrames`, for any consumer that wants all of them (the static
+  emitter, 11.4).
+
+## 7.4 The animation shorthand
+
+- **MOT-15.** The plain CSS properties `animation` and `animation-name` pass through (PRP-1,
+  item 4), with a bare number meaning ms. If a rule has one whose words do not include the
+  name of any motion in this file or the registry, the warning is
+  `animation "<v>" references no motion defined in this sheet - it will not run`.
+- **MOT-16.** `animation-delay`, `-duration`, `-iteration-count`, `-direction`, `-fill-mode`,
+  `-timing-function` and `-play-state` do nothing in a rule that has no `animation` or
+  `animation-name`. The warning is `<prop> does nothing here: this rule has no CSS animation
+  to tune`, with a hint to put the setting in the `animate:` line.
+
+## 7.5 stagger
+
+`stagger: N` on a parent offsets the delay of each element child's animations by
+`index * N` ms, where `index` is the child's position among the parent's element children.
+
+- **MOT-17.** The value is a number with optional `ms` or `s`, or `none`. Anything else is the
+  error `stagger needs a duration like "60" or "120ms", or "none"`. It writes `@stagger` with
+  milliseconds, or `@stagger: null`.
+
+## 7.6 Reduced motion
+
+- **MOT-18.** When the user prefers reduced motion, a motion plays only if it is `essential`
+  (by its own flag or by `essential` on the `animate:` line). Others do not run. Textures,
+  auras and tilt follow their own rules in chapter 8.

native/spec/08-effects.md

@@ -0,0 +1,279 @@
+# 8. Effects
+
+Effects are the parts of DSSL that CSS has no equivalent for, or only a clumsy one. Each effect
+has two halves:
+
+- a **description**: the text the author writes and the record the resolver produces from it.
+  This half is fully specified here and a Level 2 implementation MUST produce the same records.
+- a **rendering contract**: what a Level 4 renderer must draw. Where the contract depends on
+  generator code that is not yet written down as prose, this chapter says so. Those parts are
+  *defined by the reference implementation* (`public/dssl/texture.js`, `aura.js`, `slider.js`)
+  until a prose definition replaces them. They are marked **Pending**.
+
+All vocabulary tables (setting names, ranges, presets) are generated into appendix A.
+
+## 8.1 Texture
+
+`texture:` lays a generated image on top of an element's own background.
+
+```dssl
+.card   { background: #c9a66b; texture: wood }
+.sheet  { background: linear-gradient(135deg, #ff7a00, #7a1fff); texture: grain intensity 0.6 }
+.poster { background: #e9e2d0; texture: paper, scanlines intensity 0.1 }
+```
+
+**Description.**
+
+- **FX-1.** The value is `none`, or a comma-separated list of layers. `none` writes
+  `@texture: null`. An empty value is the error `texture needs a name`. Any error anywhere in
+  the value drops the whole declaration.
+- **FX-2.** Each layer starts with a preset name or a generator name (appendix A). Otherwise
+  the error is `unknown texture "<w>"`, with a did-you-mean over presets and generators.
+- **FX-3.** After the name come settings. A setting is a key from the texture settings table
+  (appendix A), followed by as many values as that key takes. A key has one *kind*:
+  `flag` (no value), `number`, `numbers` (several), `word` (one of a list) or `color`.
+  - A number outside the key's range is the error `texture "<key>" must be between <min> and
+    <max>`. A non-number is `texture setting "<key>" needs a number, got "<v>"`.
+  - A word not in the list is `unknown <key> "<w>"` with a did-you-mean.
+  - A missing value is `texture setting "<key>" needs a value` (or `N values`). A value that is
+    itself a setting key counts as missing.
+  - A color value is resolved by chapter 3 (tokens, alpha and all). A bad color drops the
+    declaration.
+  - An unknown key is `unknown texture setting "<key>"` with a did-you-mean.
+  - A key marked *optional* (`symmetrical`) may stand alone, and then takes its first listed
+    value.
+- **FX-4.** A preset is a stored list of layers. Writing a preset name gives those layers.
+  Settings apply to every layer of the preset, except that `color` and `color2` apply only to
+  the first layer when the preset has several. A generator name gives one layer made of the
+  generator's defaults.
+- **FX-5.** The output is `@texture` with the list of layer records, each being the preset or
+  generator layer with the author's overrides applied, and a `preset` field naming the preset
+  (null for a bare generator).
+
+**Rendering contract.**
+
+- **FX-6.** The texture is drawn above the element's own background and below its content. The
+  author's background (a color, a gradient, or several layers, written as `background` or
+  `background-image`) is never replaced, and removing the texture gives back exactly the
+  original.
+- **FX-7.** A texture is deterministic. The same layer record, including `seed`, MUST give the
+  same pixels on every machine and every engine. The tile MUST repeat without a visible seam.
+  (Why: the reference implementation draws from `seed` and plain arithmetic only.)
+- **FX-8.** `symmetrical` mirrors every other tile on the chosen axis (`x`, `y`, or both), so
+  the pattern repeats twice as far apart and each tile edge meets its own reflection. It applies
+  to textures made as images (noise, bump, rings, waves, hex) and is ignored by the pure
+  pattern generators (lines, dots, grid, checker, carbon).
+- **FX-9.** `animate N` steps the texture every `N` ms. It stands still when the user prefers
+  reduced motion.
+- **FX-10.** Colors given as tokens follow the token, including under a theme change.
+
+**Pending.** The generators (`noise`, `bump`, `lines`, `dots`, `grid`, `checker`, `weave`,
+`carbon`, `waves`, `hex`, `rings`) and the seeded random number generator are defined by
+`texture.js`. A prose definition of each is the first item of the Level 4 work.
+
+## 8.2 Aura
+
+An aura is light and particles around an element. There are no presets. Fire, snow and sparks
+are written by the author, usually as a `behavior`.
+
+**Description.**
+
+- **FX-11.** The properties are `aura`, `aura-glow`, `aura-particle` (and `aura-particles`),
+  `glow-particle` (and `-particles`), `aura-glow-particle` (and `-particles`). They write two
+  slots, `@aura-glow` and `@aura-particles`. A property that does not touch a slot leaves it
+  out of its output.
+
+  | Property | Writes |
+  |---|---|
+  | `aura` | both slots, as `glow ..., particles ...` clauses; it replaces both |
+  | `aura-glow` | the glow slot |
+  | `aura-particle(s)` | the particles slot |
+  | `glow-particle(s)` | the particles slot, with every particle glowing |
+  | `aura-glow-particle(s)` | both slots, with shared settings; both a glow and particles are required |
+
+- **FX-12.** `none` clears exactly the slots the property owns (`aura-glow: none` leaves the
+  particles alone). An empty value is the error `<prop> needs a value`. An empty list writes
+  `null` for the slot.
+- **FX-13.** A value is a comma-separated list of layers. In `aura`, each layer starts with
+  `glow`, `particles` or `particle`, otherwise the error
+  `an aura layer starts with glow or particles, not "<w>"`.
+- **FX-14.** Inside a layer, the first color (or `->`-joined color list) and the first number
+  are positional: for a glow they are the color and the radius, for particles they are the
+  colors and the count. Everything else is a named setting from the glow or particle table
+  (appendix A). A leftover or unknown word is an error, with a did-you-mean.
+- **FX-15.** The output is `@aura-glow` and/or `@aura-particles`, each a list of layer records
+  or `null`.
+
+**Rendering contract.** (From the reference implementation. All of it is **Pending** as prose.)
+
+- **FX-16.** The glow is drawn only outside the element's box. `behind` does the same for
+  particles.
+- **FX-17.** An element that is off screen, hidden, clipped away by an overflow container, or
+  removed emits nothing. When no aura is active, the renderer stops its loop.
+- **FX-18.** At most 1800 particles are alive across the page. When requests exceed that, every
+  emitter gets a fair share.
+- **FX-19.** Under reduced motion, glows stand still and particles are not emitted, unless the
+  layer says `essential`.
+- **FX-20.** A state block can change the aura. Leaving the state lets live particles finish,
+  then the emitter goes.
+- **FX-21.** `from thumb` makes particles leave a range slider's thumb at the current value.
+
+## 8.3 Slider
+
+`slider:` styles `<input type="range">` from one description. Without it, every engine needs
+its own vendor pseudo-elements.
+
+```dssl
+input.volume {
+  slider: track 6 color.line radius full, fill color.accent,
+          thumb 24 color.paper, ring 3 color.accent, glow color.accent 14,
+          ticks 10 color.muted
+}
+```
+
+**Description.**
+
+- **FX-22.** The value is a comma-separated list of clauses. A clause starts with one of
+  `track`, `fill`, `thumb`, `shape`, `ring`, `glow`, `ticks`, `graph`, `graph-height`,
+  `graph-gap`. An unknown head is `unknown slider setting "<w>"` with a did-you-mean. An empty
+  value is `slider needs a description`.
+- **FX-23.** Every word after a clause's head MUST be used by that clause. A leftover is the
+  error `unexpected "<words>" in the <head> setting`, with a hint about the missing comma.
+- **FX-24.** The default record is: track height 6, color `var(--dssl-color-line)`, radius
+  `full`; fill `var(--dssl-color-accent)`; thumb size 22, color `var(--dssl-color-accent)`;
+  shape `circle`; no ring, no glow, no ticks, no graph; graph height 40, graph gap 2. Clauses
+  change the record in order.
+- **FX-25.** Clause forms and limits are in appendix A. The notable ones: `ticks` needs a count
+  of at least 2, `graph` needs 2 to 120 numbers each in 0 to 100, `graph-height` is at least 8,
+  `graph-gap` is not negative.
+- **FX-26.** The output is `@slider` with the record. When the rule is emitted (5.4), the
+  resolver turns the record into CSS: base declarations on the element, put *first* in the rule
+  so the author's own declarations in the same rule win, plus one shadow rule per vendor
+  pseudo-element. That CSS is defined by `sliderCss`. **Pending.**
+
+**Rendering contract.**
+
+- **FX-27.** The fill and the graph bars follow the value, which CSS cannot know. The renderer
+  keeps `--dssl-p` (the value as 0 to 1) up to date on the input, for typing, dragging, arrow
+  keys and programmatic changes.
+- **FX-28.** A native engine that styles the slider parts itself does not need the vendor
+  pseudo-elements. It MUST give the same appearance as the record describes.
+
+## 8.4 Glass and tilt
+
+```dssl
+.pane {
+  glass: 18 saturate 1.6
+  tilt: 10 lift 1.04 glare
+}
+```
+
+**Glass (plain CSS).**
+
+- **FX-29.** `glass: words` or `none`. `none` writes `backdrop-filter: none`. Otherwise the
+  words are: a number (blur in px, default 16, not negative), `saturate N` (default 1.5),
+  `bright N`, `tint <color>` or `tint none`, and a bare color word counts as a tint. A word
+  that is none of these is `unknown glass setting "<w>"`. A missing number is
+  `<word> needs a number`. A color is recognised as a bare tint when it starts with `#`, `rgb`,
+  `hsl`, `oklch`, `oklab` or `color`, contains `/`, looks like `name.key`, or is `white`,
+  `black` or `transparent`.
+- **FX-30.** The output is `backdrop-filter: blur(Bpx) saturate(S)` followed by
+  ` brightness(R)` when given. Then `background-color: <tint>` unless the tint is `none`, where
+  the default tint is `color-mix(in srgb, currentColor 8%, transparent)`. The author's own
+  `background` written after `glass:` replaces the wash.
+
+**Tilt (needs the pointer).**
+
+- **FX-31.** `tilt: words` or `none`. The words are a number (max degrees, 0 to 45, default 8),
+  `lift N` (scale on hover, above 0), `perspective N` (px, at least 100, default 900),
+  `speed N` (0.02 to 1, default 0.18), `invert` and `glare`. The record is
+  `{ max, lift, perspective, speed, invert, glare }`. `none` writes `@tilt: null`. An empty value
+  is `tilt needs a number of degrees`. Out-of-range values are errors that name the range.
+- **FX-32.** The renderer adds, after the element's own `transform`:
+  `perspective(<P>px) rotateX(var(--dssl-tx, 0deg)) rotateY(var(--dssl-ty, 0deg))
+  scale(var(--dssl-ts, 1))`, and updates the three variables from the pointer, so that moving
+  the pointer never triggers a restyle. With `glare`, it also keeps `--dssl-gx` and
+  `--dssl-gy` (0% to 100%) pointing at the pointer.
+- **FX-33.** Tilt ignores touch, stays flat under reduced motion, and stops when the page is
+  frozen. It combines with `translate`, `scale` and `rotate`. It does not combine with `bend`
+  or `fold`, because both write `transform`.
+
+## 8.5 Deform
+
+`bend`, `bend-y`, `bend-up`, `fold`, `stretch` and `bend-around` deform an element, or for
+`bend-around` its children.
+
+- **FX-34.** `bend`, `bend-y`, `bend-up`, `fold` take a bare number of degrees (or `Ndeg`).
+  Anything else is `<name> takes a bare number of degrees`. They write `@bend`, `@bend-y`,
+  `@bend-up`, `@fold` with the number.
+- **FX-35.** `stretch: F [horizontal|vertical|x|y]` with `F` above 0. It writes `@stretch`
+  `{ factor, axis }`, axis default `horizontal`. A bad value is
+  `stretch needs a positive factor, ...`; `F <= 0` is `stretch: F would flatten the element to
+  nothing`.
+- **FX-36.** `bend-around: D` is a bare number of degrees between -170 and 170, otherwise
+  `bend-around caps at ±170° ...`. It writes `@bend-around`.
+- **FX-37.** *Composition.* The deform parts of an element combine into one transform string,
+  in this order, followed by the element's own transform (when it is not `none`). `d` is the
+  record of numbers, `h` the element height in px (0 when there is no box yet):
+  1. if any of bend, bend-y, fold, bend-up is non-zero: `perspective(900px)`;
+  2. if bend: `rotateX(<bend>deg)`; if bend-y: `rotateY(<bend-y>deg)`;
+  3. if fold: with `h > 0`: `translateY(<-h/2>px) rotateX(<fold>deg) translateY(<h/2>px)`;
+     without a box: `rotateX(<fold>deg)` and the origin `50% 0%`;
+  4. if bend-up: with `h > 0`: `translateY(<h/2>px) rotateX(<up>deg) translateY(<-h/2>px)`;
+     without a box: `rotateX(<up>deg)` and the origin `50% 100%`;
+  5. if stretch is set and not 1: for the horizontal axis
+     `scaleX(<f>) scaleY(<1/f rounded to 4 places>)`, for vertical
+     `scaleY(<f>) scaleX(<1/f>)`.
+
+  Translations are rounded to 2 decimal places. The result is `none` when there are no parts.
+  In keyframes (7.1) there is no box, so the second form of fold and bend-up is used.
+- **FX-38.** *Arc layout.* `bend-around: D` lays `n` children along an arc. It does nothing
+  when `n < 2`, the container has no width, or `|D|` is too small (`sin(|D|/2) < 0.0001`).
+  Otherwise let `half = |D|/2` in radians, `R = round2((width/2) / sin(half))`, and the angle of
+  child `i` (from 0) is `round2(-D/2 + D*i/(n-1))` degrees. `round2(v)` is
+  `round(v * 100) / 100`. A positive `D` makes a dome, negative a smile.
+
+## 8.6 Overlap
+
+- **FX-39.** `overlap: allow|none|deny|auto`. It writes `@overlap` with `allow` (for `none` too),
+  `deny` or `auto`. Anything else is `unknown overlap policy "<v>"`. The value inherits down the
+  tree.
+- **FX-40.** `deny`: the element yields out of any overlap with other elements. `auto`: it
+  yields only while its opacity is below 100%. `allow` is the default. How an element yields is
+  defined by the reference engine's `overlapNudge`. **Pending.**
+
+## 8.7 Fonts
+
+`fonts { }` loads fonts. A font is a stylesheet link or an `@font-face`, and neither belongs
+in a rule, so it has its own block.
+
+```dssl
+fonts {
+  Fraunces: 500 700 800
+  "Hanken Grotesk": 400 700 italic
+  Inter: 100..900 display optional
+  Brand: from "/fonts/brand.woff2" 400
+}
+```
+
+- **FX-41.** The body is verbatim text (2.7). Block comments are blanked, and a `//` comment
+  that starts a line or follows white space is removed. Each remaining line has a trailing `;`
+  removed and is `Family: words`. The family is everything before the first colon outside
+  quotes, unquoted, with runs of white space collapsed to one space. A line with no colon is
+  `expected "Family: weights" in "<text>"`.
+- **FX-42.** The words are: weights (`400`, or a range `100..900`, each from 1 to 1000, a range
+  rising), `italic`, `display <swap|block|fallback|optional|auto>`, `from "<file>"`. Anything
+  else is `unknown font setting "<w>"`.
+- **FX-43.** Without `from`, the font is from Google Fonts. All Google families together make
+  one link:
+  `https://fonts.googleapis.com/css2?family=<parts>&display=<d>` where each part is
+  `Name:wght@400;700` (sorted by number, spaces in the name as `+`), or `Name:ital,wght@0,400;
+  0,700;1,400;1,700` with italics (all weights, upright first), or `Name` alone for no weights,
+  or `Name:ital@0;1` for italics with no weights. The `display` is the last one given on any
+  Google line, default `swap`. The link records the line of the `fonts` block.
+- **FX-44.** With `from`, the line makes an `@font-face` block (as a `raw` entry, so it goes into
+  the page stylesheet) with `font-family`, `src: url("<file>")` plus `format("woff2"|"woff"|
+  "truetype"|"opentype")` by extension, `font-weight` (a range written with a space),
+  `font-style` and `font-display` (default `swap`). A `from` line takes at most one weight.
+- **FX-45.** Google's servers see every visitor who loads one of their fonts. Authors who need
+  to avoid that use `from`.

native/spec/09-diagnostics.md

@@ -0,0 +1,81 @@
+# 9. Diagnostics
+
+DSSL is loud. A mistake is an error with a place and a hint, not a silent no-op.
+
+## 9.1 Records
+
+- **DIA-1.** A diagnostic is `{ file, line, message, hint? }`. `hint` is omitted (not null)
+  when there is none. Messages and hints are English text and are compared exactly by the
+  conformance tests, so an implementation MUST use the wording in this spec.
+- **DIA-2.** *Errors* mean something was wrong and was dropped or replaced. A source is `ok`
+  when it has no errors. *Warnings* mean the source compiles and runs but is probably not what
+  the author meant. Warnings never change `ok`.
+- **DIA-3.** A tool may offer a strict mode that treats warnings as failures
+  (`dssl check --strict`). That is a tool choice, not part of resolving.
+- **DIA-4.** Errors from the parser come first, then errors from the resolver, each in the
+  order found.
+- **DIA-5.** *Deduplication.* At the end of resolving, errors with the same file, line and
+  message are reduced to one, keeping the last occurrence, and the order of the others is
+  unchanged.
+- **DIA-6.** Unknown words are errors, never noise. A word that is left over after a construct
+  has used what it understands is an error, not ignored.
+- **DIA-7.** A lint or any other helper MUST NOT be able to break a compile. If it fails, its
+  warnings are dropped and everything else stands.
+
+## 9.2 Where each message is defined
+
+Each message appears in the chapter that defines the construct it belongs to, in code font. The
+conformance corpus (chapter 10) covers every message at least once. Appendix B is generated from
+the reference implementation and lists every message template, so a gap between this spec and
+the corpus shows up as a failing check.
+
+## 9.3 Did-you-mean
+
+- **DIA-8.** `didYouMean(word, candidates)` returns the best candidate, or nothing:
+  1. If the word or the candidate list is empty, return nothing.
+  2. Lowercase the word. For each candidate in order, skipping empty ones, compute the
+     Levenshtein distance (insert, delete, substitute, each cost 1) between the lowercase word
+     and the lowercase text of the candidate.
+  3. Keep the first candidate with the smallest distance. A later candidate with an equal
+     distance does not replace it.
+  4. The tolerance is `max(2, floor(length of the word / 3))`. If the smallest distance is
+     larger, return nothing. Otherwise return the candidate as text, in its original case.
+- **DIA-9.** The order of the candidates is the order of the sets and lists in appendix A,
+  which is the insertion order in the reference implementation. A different order can change
+  which of two equally close words is suggested, so implementations MUST keep it.
+
+## 9.4 Warnings the resolver emits
+
+| Where | Message starts with |
+|---|---|
+| 5.3, nested word near a state word | `"<w>" compiled as a descendant selector` |
+| 6.3, row and column words | `two words in ...`, `"<w>" is written twice in ...`, `"<w>" has nowhere to go ...` |
+| 6.6, `gradient:` and another image | `"<sel>" sets the background image twice` |
+| 7.4, animation shorthand | `animation "<v>" references no motion ...`, `<prop> does nothing here ...` |
+| 2.7, `raw { }` | `raw { } is verbatim CSS, so this line needs a ";" at the end` |
+| same-rule display clash | `"<prop>:" expands to display: <v>, which overrides the earlier ...` |
+
+- **DIA-10.** *Display clash.* Inside one rule, when a semantic property that expands to
+  `display` (`row`, `column`, `grid`, `stack`) comes after an explicit `display:` with a
+  different value, the warning is
+  `"<via>:" expands to display: <new>, which overrides the earlier "display: <old>" (line <n>)
+  in the same rule - later wins, so the earlier one is dead`. At most 400 warnings of this kind
+  are kept per file. Overrides across different rules are the cascade at work and get no
+  warning.
+- **DIA-11.** *Raw semicolons.* In a `raw { }` body (comments blanked), a line that looks like
+  `name: value`, does not end in `;`, `{`, `}` or `,`, and is followed by another declaration
+  line or a line starting with `}`, is a warning at the line of that declaration inside the
+  block.
+
+## 9.5 Lint
+
+A lint pass runs on the finished rules and adds warnings. It covers text contrast (WCAG ratio,
+4.5 for body text, 3 for large text), an outline removed from something you can tab to with no
+`focus-visible` replacement, and an explicit width or height under 24px on a button or link. It
+looks only at unconditional rules, follows tokens, alpha and `color-mix`, and is defined by
+`lint.js`.
+
+- **DIA-12.** A Level 2 implementation MAY omit the lint pass. It then declares `lint: false`,
+  and conformance tests compare warnings with the lint warnings removed. A lint warning is one
+  whose message starts with `text contrast is`, starts with `the focus outline is removed`, or
+  ends with `the smallest target WCAG 2.2 allows`.

native/spec/10-resolved-document.md

@@ -0,0 +1,86 @@
+# 10. The resolved document
+
+The resolver turns one source file into a *resolved document*. This chapter defines its exact
+shape and how two implementations are compared. This is what makes Level 2 testable without a
+browser.
+
+## 10.1 Inputs
+
+- **DOC-1.** The resolver takes: the source text, the file name, the token registry (4.5) and
+  the motion registry (7.3). The registry defaults are the built-in tokens and no motions.
+
+## 10.2 The document
+
+```
+{
+  errors:        [ { file, line, message, hint? } ],      // parser errors, then resolver errors
+  warnings:      [ { file, line, message, hint? } ],
+  rules:         [ Rule ],
+  shadowRules:   [ Rule ],
+  raws:          [ { css, file, line, order } ],
+  fontLinks:     [ { url, line, file } ],
+  motionNames:   [ name ],                                // motions defined in this file, in source order
+  motionFrames:  { name: { essential, frames: [ { offset, props } ] } },
+  mediaQueries:  [ query ],                               // distinct, in first-use order
+  tokens:        { key: value },                          // the final token map
+  registryRule:  Rule
+}
+Rule = { id, sel, media, signals, containers, layer, order, decls, file, line, pseudo, states }
+decl = { prop, value, line, via?, fromGradient? }
+```
+
+- **DOC-2.** `rules` holds the ordinary rules and the token rules from `tokens` blocks, in the
+  order they were emitted. `shadowRules` holds pseudo-element rules (5.8). `raws` holds `raw`
+  and `fonts` font-face blocks in emission order. The registry rule is not in `rules`.
+- **DOC-3.** `mediaQueries` lists every distinct entry of `media` found in `rules` and
+  `shadowRules`, in the order first seen, rules first.
+- **DOC-4.** `tokens` is the final map of 4.3 (every key, with the last definition in source
+  order). Keys are compared as a set; the canonical form sorts them.
+- **DOC-5.** A declaration may carry `via` (the semantic property that produced a `display`
+  value) and `fromGradient` (true for the `background-image` from `gradient:`). Both are part
+  of the record.
+- **DOC-6.** `states` is a set of state words. It is written as a sorted array.
+- **DOC-7.** `ok` is not stored. It is `errors.length == 0`.
+
+## 10.3 Canonical form
+
+To compare two documents they are written as JSON in this form.
+
+- **DOC-8.** Object keys are sorted by code point. Arrays keep their order, except `states`
+  and the `tokens` object, which are sorted.
+- **DOC-9.** Numbers are written as the shortest decimal that reads back to the same
+  double, with no exponent for values between 1e-6 and 1e21, and no `-0`. Infinity is the
+  string `"Infinity"` (an `iterations` of `infinite`).
+- **DOC-10.** A field that is `undefined` is omitted. A field that is `null` is `null`.
+- **DOC-11.** Strings are compared as UTF-8 text.
+- **DOC-12.** Two implementations are equal on a source when their canonical JSON is
+  byte-identical, after removing lint warnings from implementations that declared `lint: false`
+  (DIA-12).
+
+## 10.4 The corpus
+
+The comparison needs inputs. The corpus is a folder of `.dssl` files:
+
+- every stylesheet the site ships (`public/styles/*.dssl`),
+- every fenced `dssl` block from the guide, the readme and this spec,
+- the fixtures of the existing test suites,
+- one file per diagnostic message, written to trigger it.
+
+For each input, `scripts/native-dump.mjs` writes the canonical JSON of the reference engine's
+output to `native/expected/`. The Rust test `native/tests/differential.rs` resolves the same
+input and compares.
+
+- **DOC-13.** The expected files are generated. They are committed so that a change in the
+  reference engine shows up in review as a change in expected output, and so the Rust tests run
+  without Node.
+- **DOC-14.** A divergence (chapter 12) is excluded from the comparison by listing the input in
+  `native/corpus/EXCLUDED.md` with the divergence id. An excluded input is still run, and its
+  diff is printed, so a fix is noticed.
+- **DOC-15.** Once the harness exists, `native/PARITY.md` lists, per chapter, how many corpus
+  inputs pass, fail and are excluded. It is generated by the test run and not written by hand.
+
+## 10.5 What the document does not contain
+
+- The syntax tree (Level 1 compares it separately, 2.9).
+- Behaviors (they are expanded during the walk and do not appear in the output).
+- Anything about a particular element. Matching is stage 3 and needs a document.

native/spec/11-browser-integration.md

@@ -0,0 +1,155 @@
+# 11. Browser integration
+
+This chapter is informative. It says how a browser could host DSSL natively, stage by stage,
+and which parts are cheap and which are real engineering. Nothing here is proposed to a
+standards body, no browser implements it, and the reference crate has not been wired into any
+engine. It is written so that a browser team can judge the size of the job.
+
+## 11.1 Delivery
+
+DSSL needs a way to reach the parser, the way CSS has `<link rel="stylesheet">` and `<style>`.
+
+- **INT-1.** A DSSL stylesheet is text with the media type `text/dssl`. (No registration is
+  proposed. This is a placeholder name.)
+- **INT-2.** `<link rel="stylesheet" type="text/dssl" href="...">` and
+  `<style type="text/dssl">...</style>` load DSSL. A browser that does not know the type does
+  not load it, which is how CSS has always been introduced.
+- **INT-3.** Several stylesheets are one cascade in load order (CAS-16), the same as CSS.
+  Tokens and motions flow from earlier files to later ones (4.5, 7.3) in that order.
+
+Authors who need a page to work in a browser with no DSSL support can ship the output of
+`dssl build` as CSS. That is the *static lane*. It is an author's choice, not a part of native
+support, and it is described in 11.5.
+
+## 11.2 Where the parser sits
+
+In every engine, a stylesheet becomes a list of rule objects, and nothing after that stage
+cares what syntax the rules came from. A DSSL front end replaces the tokenizer and parser (CSS
+stage 1) and produces the same kind of rule objects.
+
+```
+CSS text   --> CSS tokenizer + parser   --\
+                                           >--> rule objects --> style resolution --> layout --> paint
+DSSL text  --> DSSL parser + resolver   --/
+```
+
+- **INT-4.** The resolved document (chapter 10) is the hand-off. Each rule record maps to an
+  engine rule: `sel` to the selector list, `decls` to the declaration block, `layer` to a
+  cascade layer, `media` and `containers` to conditional wrappers, and `order` to source order.
+- **INT-5.** Engine-native declarations (`@...`, 6.8) are not properties. They go to the feature
+  that owns them (11.4), not to the style system's property table.
+
+This is also how new CSS syntax has entered engines before. Nesting and cascade layers are
+parsed into the same rule tree as everything else.
+
+## 11.3 The part that lowers to CSS
+
+A large part of DSSL is already expressible in CSS. The proof is `dssl build`, which does exactly
+that. Here is real output, from the reference engine, for a small source:
+
+```dssl
+tokens { color { brand: #c2185b } }
+.card {
+  background: color.brand
+  padding: 16
+  row: gap 8 between center
+  radius: md
+  hover { background: color.brand/80 }
+  @media dark { background: #181310 }
+}
+```
+
+compiles to the following (reformatted, and without the built-in token declarations):
+
+```css
+@layer tokens, base, components, utilities, pin;
+
+@layer tokens {
+  :where(:root) { --dssl-color-brand: #c2185b; }
+}
+
+@layer components {
+  :where(.card) {
+    background: var(--dssl-color-brand);
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--dssl-radius-md);
+  }
+  :where(.card:hover) {
+    background: color-mix(in oklab, var(--dssl-color-brand) 80%, transparent);
+  }
+  @media (prefers-color-scheme: dark) {
+    :where(.card) { background: #181310; }
+  }
+}
+```
+
+The mapping:
+
+| DSSL | CSS it lowers to |
+|---|---|
+| tokens | custom properties on `:root`, inside `@layer tokens` |
+| layers and `pin` | `@layer`, with `!important` for `pin` |
+| no specificity | every selector wrapped in `:where()` so order alone decides |
+| states | pseudo-classes |
+| `@media`, `@container` | the same at-rules |
+| semantic properties (`row`, `grid`, `radius`, `fluid`, ...) | longhand properties and `clamp()` |
+| alpha (`color.ink/20`) | `color-mix(in oklab, ..., transparent)` |
+| `motion` | `@keyframes` |
+| `raw` | verbatim |
+| `glass` | `backdrop-filter` and a background color |
+
+- **INT-6.** A native engine MAY implement this part by lowering to its own CSS rule objects.
+  The result must equal the cascade of chapter 5. In particular, the `:where()` wrapping is how
+  CSS reproduces "no specificity", and the layer ranks reproduce CAS-1.
+
+## 11.4 The part that needs engine work
+
+| Feature | What is missing from CSS | What a native engine adds |
+|---|---|---|
+| `@signal` | Named values set by the page, readable by the cascade | A page-visible store of named values, with ancestor lookup (CAS-39), invalidating style when one changes. The nearest CSS feature is a container style query on a custom property. Support differs between engines and must be checked before relying on it. |
+| `seen` | A pseudo-class that matches once an element has been in view | An element flag set by the same machinery as intersection observation, and style invalidation when it flips (CAS-27). |
+| `animate` | Per-element motion lists with `jitter`, `essential` and `stagger` | Mapping to the engine's keyframe animation, with a delay offset per child. `essential` and reduced motion are policy on top. |
+| `texture` | A generated image layer that sits on the author's own background | A background image generator keyed by the layer record (FX-7), cached per tile. |
+| `aura` | Glow and particles outside the box, over everything, with a particle budget | A page-level paint layer above content that does not take pointer events, with the budget of FX-18. |
+| `slider` | One description for all engines' range-input parts | Direct styling of the control parts, plus a value-as-fraction the style can read (FX-27). |
+| `tilt` | Pointer-driven 3D transform without restyling | A compositor-driven transform from pointer position (FX-32). |
+| `bend`, `fold`, `bend-around` | Transforms that need the element's own box, or a container's children | These run during or after layout, because they need box sizes (FX-37, FX-38). |
+| `overlap` | A rule that moves elements out of overlaps | Hook after layout (FX-40). This is the hardest item and is not specified yet. |
+| alignment promotion | A box type chosen from an alignment word | Rule CAS-47 at computed-value time. |
+
+- **INT-7.** For each row, the spec's description half (chapter 8) and corpus fixes what the
+  feature means. How the engine realises it is the engine's business, as long as the rendering
+  contract holds.
+
+## 11.5 The static lane and native support
+
+`dssl build` already exists. Today it is the exit lane for pages that need no JavaScript. With
+native support, the rows of 11.3 stop needing it, because the browser lowers them itself. What
+stays on the author's side is what 11.4 lists and nothing else.
+
+The build report already counts those leftovers (`@signal` rules, engine-native declarations),
+so it is a ready measure of how much of a given page is the cheap part and how much is the
+engine-work part.
+
+## 11.6 How a browser team would check their work
+
+- Level 1 and 2: run the corpus (chapter 10). The expected JSON is committed. No browser
+  needed.
+- Level 3: element-level tests, in the style of the web platform tests. A fixture is a small
+  HTML file, a DSSL file and the expected computed value of chosen properties on chosen
+  elements. These do not exist yet. They are the first thing to write after milestone 1.
+- Level 4: reftests, comparing a rendering to a reference rendering, and pixel tests for the
+  effects (the repository already has pixel helpers in `scripts/lib/pixels.mjs`).
+
+## 11.7 What is not claimed
+
+- No browser supports DSSL natively today, and this repository does not change that.
+- The reference crate does not exist yet beyond a stub (see `native/README.md`). When it does,
+  it will parse and resolve. It will not match elements, compute styles or paint.
+- The lowering table in 11.3 is the claim of the existing build lane, checked by the repository's
+  static parity test. It has not been run in browsers other than Chromium.

native/spec/12-known-divergences.md

@@ -0,0 +1,93 @@
+# 12. Known divergences
+
+Writing this spec from the reference engine and checking it against the engine turned up places
+where the engine did not do what a careful reader of the language would expect. They were found
+on 0.16.2. Seven are fixed in 0.16.3 and one is still open. This chapter keeps the record, so
+that a second implementation knows which behavior is old and which is current.
+
+| Id | Where | Summary | Status |
+|---|---|---|---|
+| D-1 | 2.2 | `//` inside an unquoted `url(...)` started a comment | fixed in 0.16.3 (SYN-6) |
+| D-2 | 4.4 | A token path with a typo at the end resolved to its parent | fixed in 0.16.3 (TOK-12) |
+| D-3 | 5.2 | An unknown `@layer` name was silently `components` | fixed in 0.16.3, now warns (CAS-2) |
+| D-4 | 4.7 | `radius: xl` pointed at a token that does not exist | fixed in 0.16.3, now warns (TOK-18) |
+| D-5 | 3.2 | A backslash did not escape a quote inside a value | fixed in 0.16.3 (VAL rule 2) |
+| D-6 | 4.3 | The registry rule carries the last definition of a token | open, needs a browser test |
+| D-7 | 5.3 | Nesting under a selector list joined the wrong way | fixed in 0.16.3 (CAS-7, CAS-24, CAS-30) |
+| D-8 | 5.3 | A nested `li` got a "did you mean link" warning | fixed in 0.16.3 (CAS-8) |
+
+A conformance corpus built from 0.16.3 or later has no exclusions for D-1 to D-5, D-7 and D-8.
+Inputs produced by an older engine do.
+
+## D-1: `//` in an unquoted url (fixed)
+
+```dssl
+.a { background: url(http://x.com/a.png) }
+```
+
+The comment stripper did not know about `url( )`, so `//x.com/a.png) }` was removed as a line
+comment. The value became `url(http` and the file reported one unclosed block. Inside `raw { }`
+the closing brace of the `raw` block was eaten too. Now an unquoted `url(` ... `)` is copied as
+written, and a comment right after it still works.
+
+## D-2: token path prefix match (fixed)
+
+```dssl error
+tokens { color { ink2: #111 } }
+.a { color: color.ink2.bogus }
+```
+
+This used to resolve to `var(--dssl-color-ink2)` with no error, because the lookup shortened the
+dotted path from the right and used the first prefix that was a token. A typo at the end of a
+path is now the loud `unknown value` error, with a did-you-mean.
+
+## D-3 and D-4: silent fallbacks (fixed, now warnings)
+
+`@layer weird { .a { color: red } }` puts the rule in `components`, and now says so. `radius: xl`
+becomes `var(--dssl-radius-xl)`, and now warns when no `radius.xl` token exists, because by
+default only `sm`, `md`, `lg` and `full` do. Both are warnings, so `ok` stays true and the output
+is the same as before.
+
+## D-5: escaped quote in a value (fixed)
+
+```dssl
+.a { content: "a\"b" }
+```
+
+The parser's string scan honored the backslash, but the value resolver stopped the string at the
+escaped quote and reported `unknown value "b"`. Strings in values, in function arguments and in
+layer lists now skip the character after a backslash.
+
+## D-6: the registry rule (open)
+
+The registry rule is built from the final token map (TOK-9). When a token is defined once at the
+top level and again, later in the file, inside `@media dark`, the map holds the dark value, so
+the registry rule carries it as an unconditional value. Within one file this does no harm,
+because the registry rule has the lowest order and the file's own token rules come after it.
+Whether it can override an earlier file's unconditional value depends on where the host installs
+that bundle in the cascade, and that has not been tested.
+
+Action: write a two-file test (a base palette, then a second file with a dark override) and run
+it in a browser before deciding whether this is a bug.
+
+## D-7: nesting under a selector list (fixed)
+
+```dssl
+.a, .b { .c { color: red } }
+```
+
+used to produce `.a, .b .c`, which means `.a` and `.b .c`. The same applied to state blocks
+(`.a, .b { hover { } }` gave `.a, .b:hover`, so only `.b` got the hover), to a child list
+(`.a { .c, .d { } }` gave `.a .c, .d`) and to pseudo-element blocks. Parents and children are now
+split at top-level commas and every parent part is joined with every child part, and a state is
+added to every part. A selector with no commas is joined exactly as before.
+
+## D-8: false "did you mean" warning on element names (fixed)
+
+```dssl
+.menu { li { color: red } }
+```
+
+compiled correctly to `.menu li` and also warned that the author may have meant `link`, because
+`li` is two edits from it. A nested word that is an HTML element name no longer warns. A real typo
+such as `hove` still does.

native/spec/README.md

@@ -0,0 +1,54 @@
+# DSSL specification
+
+Status: working draft, written against the reference engine 0.16.3 (the bugs of chapter 12 were found on 0.16.2).
+This is not a standard. It is the document a browser team (or anyone writing a second
+implementation) would read to build DSSL without reading the JavaScript engine.
+
+## Why this exists
+
+DSSL today is a JavaScript engine that writes inline styles. That is one way to run the
+language. It is not the language. CSS is a language that browsers implement natively, and
+this spec says what it would take to do the same for DSSL: what the text means, what every
+stage produces, and what a correct implementation has to do.
+
+The Rust crate next to this folder (`native/`) is the reference implementation of this spec
+that does not use JavaScript. It is checked against the JavaScript engine by running both on
+the same inputs and comparing the results.
+
+## Chapters
+
+| # | Chapter | What it fixes |
+|---|---|---|
+| 1 | [Overview](01-overview.md) | The processing model, conformance levels, what CSS actually does |
+| 2 | [Syntax](02-syntax.md) | Text to syntax tree: comments, blocks, declarations, raw |
+| 3 | [Values](03-values.md) | Bare numbers, identifiers, functions, colors, alpha |
+| 4 | [Tokens](04-tokens.md) | Design tokens and how they become custom properties |
+| 5 | [Cascade](05-cascade.md) | Layers, order, states, media, containers, signals |
+| 6 | [Properties](06-properties.md) | The semantic properties and how each one expands |
+| 7 | [Motion](07-motion.md) | `motion`, `animate`, `seen`, `stagger` |
+| 8 | [Effects](08-effects.md) | Texture, aura, slider, glass, tilt, deform, fonts |
+| 9 | [Diagnostics](09-diagnostics.md) | Errors, warnings, did-you-mean, lint |
+| 10 | [Resolved document](10-resolved-document.md) | The exact output a resolver produces, and how conformance is tested |
+| 11 | [Browser integration](11-browser-integration.md) | How a browser would host this, stage by stage |
+| 12 | [Known divergences](12-known-divergences.md) | Places where the JavaScript engine does not yet match this spec |
+
+## Conventions
+
+- MUST, MUST NOT, SHOULD and MAY are used the way RFC 2119 uses them.
+- Every testable rule has an id such as `SYN-4` or `CAS-7`. Conformance tests name the ids
+  they cover.
+- Prose in the margin of a rule that starts with "Why:" is informative.
+- Examples are executed. Every fenced `dssl` block is compiled by
+  `scripts/test-native-spec.mjs` against the JavaScript engine, and must produce no errors.
+  A block fenced as `dssl error` must produce at least one.
+- The tables in the appendices are generated from the engine's own vocabulary modules by
+  `scripts/gen-native-vocab.mjs`. They are not edited by hand, so they cannot drift.
+
+## Normative and informative
+
+Chapters 2 to 10 are normative. Chapters 1 and 11 are informative apart from the
+conformance levels defined in 1.4. Chapter 12 is a list of bugs, and is informative.
+
+Where this spec and the JavaScript engine disagree, chapter 12 says which one is wrong and
+what the fix is. Until the engine is fixed, conformance tests for those cases are excluded
+from the comparison and listed by id.

native/spec/appendix-a-vocabulary.md

@@ -0,0 +1,265 @@
+# Appendix A: vocabulary
+
+Generated by `scripts/gen-native-vocab.mjs` from the engine. Not edited by hand.
+The full word lists, in the engine's own order, are in `native/data/vocabulary.json`.
+
+## A.1 State words
+
+`hover`, `focus`, `focus-visible`, `active`, `disabled`, `checked`, `empty`, `target`, `required`, `invalid`, `valid`, `open`, `closed`, `placeholder-shown`, `read-only`, `read-write`, `enabled`, `indeterminate`, `first-child`, `last-child`, `only-child`, `first-of-type`, `last-of-type`, `link`, `visited`, `seen`
+
+## A.2 Pseudo-elements
+
+`before`, `after`, `placeholder`, `selection`, `marker`, `first-line`, `first-letter`, `backdrop`, `file-selector-button`, `part`, `slotted`
+
+A vendor pseudo-element name matches `^-(webkit|moz|ms)-`.
+
+## A.3 Unitless and time properties
+
+Unitless (a bare number stays bare):
+
+`opacity`, `line-height`, `z-index`, `font-weight`, `flex-grow`, `flex-shrink`, `flex`, `order`, `scale`, `widows`, `orphans`, `column-count`, `aspect-ratio`, `animation-iteration-count`, `flood-opacity`, `fill-opacity`, `stop-opacity`, `shape-image-threshold`, `counter-reset`, `counter-increment`, `counter-set`, `grid-row`, `grid-column`, `grid-area`, `font-feature-settings`, `font-variation-settings`, `tab-size`, `-webkit-line-clamp`, `line-clamp`, `stroke-miterlimit`, `stroke-opacity`, `initial-letter`, `font-size-adjust`
+
+Time (a bare number is milliseconds):
+
+`transition-delay`, `transition-duration`, `animation-delay`, `animation-duration`, `animation`
+
+## A.4 Functions
+
+Unitless functions (numbers inside stay bare):
+
+`oklch`, `oklab`, `lab`, `lch`, `hsl`, `hsla`, `rgb`, `rgba`, `hwb`, `color`, `color-mix`, `light-dark`, `brightness`, `saturate`, `contrast`, `grayscale`, `sepia`, `invert`, `opacity`, `scale`, `scalex`, `scaley`, `scalez`, `scale3d`, `steps`, `cubic-bezier`, `linear`, `radial`, `conic`
+
+Length functions (bare numbers inside are px):
+
+`calc`, `min`, `max`, `clamp`, `round`, `mod`, `rem`, `abs`, `sign`, `hypot`, `pow`, `sqrt`, `log`, `exp`, `blur`, `drop-shadow`
+
+## A.5 Fluid properties
+
+`font-size`, `width`, `height`, `inline-size`, `block-size`, `min-width`, `max-width`, `min-height`, `max-height`, `gap`, `row-gap`, `column-gap`, `padding`, `margin`, `inset`, `top`, `right`, `bottom`, `left`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `padding-inline`, `padding-block`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `margin-inline`, `margin-block`, `letter-spacing`, `border-radius`
+
+## A.6 Place words
+
+| word | cross | main |
+|---|---|---|
+| `center` | `center` | `center` |
+| `start` | `start` | `flex-start` |
+| `end` | `end` | `flex-end` |
+| `between` | `center` | `space-between` |
+| `around` | `center` | `space-around` |
+| `evenly` | `center` | `space-evenly` |
+| `stretch` | `stretch` | `flex-start` |
+| `baseline` | `baseline` | `flex-start` |
+
+## A.7 Easings
+
+| name | CSS |
+|---|---|
+| `snap` | `cubic-bezier(0.2, 0.9, 0.3, 1)` |
+| `smooth` | `cubic-bezier(0.4, 0, 0.2, 1)` |
+| `bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
+| `linear` | `linear` |
+| `ease` | `ease` |
+| `ease-in` | `ease-in` |
+| `ease-out` | `ease-out` |
+| `ease-in-out` | `ease-in-out` |
+
+## A.8 Built-in tokens
+
+| key | value |
+|---|---|
+| `color.ink` | `#16161d` |
+| `color.paper` | `#faf7f2` |
+| `color.card` | `#ffffff` |
+| `color.muted` | `#6f6a7a` |
+| `color.line` | `#e5ded2` |
+| `color.accent` | `oklch(62% 0.19 35)` |
+| `color.accent-ink` | `#fff6ee` |
+| `color.ok` | `#2e7d4f` |
+| `color.err` | `#b3372e` |
+| `space.1` | `4` |
+| `space.2` | `8` |
+| `space.3` | `12` |
+| `space.4` | `16` |
+| `space.5` | `24` |
+| `space.6` | `32` |
+| `space.7` | `48` |
+| `space.8` | `64` |
+| `radius.sm` | `8` |
+| `radius.md` | `14` |
+| `radius.lg` | `22` |
+| `radius.full` | `999` |
+| `shadow.sm` | `0 1 2 color.ink/8, 0 1 3 color.ink/6` |
+| `shadow.md` | `0 2 4 color.ink/10, 0 4 12 color.ink/8` |
+| `shadow.lg` | `0 4 8 color.ink/12, 0 12 32 color.ink/12` |
+| `shadow.xl` | `0 8 16 color.ink/14, 0 24 64 color.ink/16` |
+| `font.sans` | `system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` |
+| `font.mono` | `ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace` |
+
+## A.9 Semantic properties
+
+`size`, `row`, `column`, `grid`, `stack`, `place`, `center`, `cover`, `sticky`, `font`, `fluid`, `shadow`, `radius`, `circle`, `align`, `z`, `grow`, `shrink`, `basis`, `truncate`, `visually-hidden`, `transition`, `animate`, `stagger`, `overlap`, `bend`, `bend-y`, `bend-up`, `fold`, `bend-around`, `stretch`, `gradient`, `text-stroke`, `yield`, `outline-shape`, `rotate`, `gradient-text`, `gradient-flow`, `texture`, `aura`, `aura-glow`, `aura-particle`, `aura-particles`, `glow-particle`, `glow-particles`, `aura-glow-particle`, `aura-glow-particles`, `glass`, `tilt`, `slider`
+
+## A.10 Big sets
+
+| set | count | where |
+|---|---|---|
+| CSS keywords | 1095 | `cssKeywords` in the data file |
+| known CSS properties | 669 | `knownProps` |
+| named colors | 148 | `namedColors` |
+
+Color words allowed as gradient stops:
+
+`black`, `silver`, `gray`, `white`, `maroon`, `red`, `purple`, `fuchsia`, `green`, `lime`, `olive`, `yellow`, `navy`, `blue`, `teal`, `aqua`, `orange`, `gold`, `pink`, `brown`, `violet`, `cyan`, `magenta`, `indigo`, `crimson`, `coral`, `tomato`, `goldenrod`, `khaki`, `slategray`, `slategrey`, `dimgray`, `dimgrey`, `lightgray`, `lightgrey`, `darkgray`, `darkgrey`, `gainsboro`, `whitesmoke`, `ghostwhite`, `ivory`, `beige`, `linen`, `seashell`, `snow`, `honeydew`, `mintcream`, `azure`, `aliceblue`, `lavender`, `canvas`, `canvastext`, `linktext`, `visitedtext`, `activetext`, `buttonface`, `buttontext`, `buttonborder`, `field`, `fieldtext`, `highlight`, `highlighttext`, `currentcolor`, `transparent`
+
+## A.11 Texture
+
+Generators: `noise`, `bump`, `lines`, `dots`, `grid`, `checker`, `weave`, `carbon`, `waves`, `hex`, `rings`, `bricks`, `herringbone`, `plaid`, `scales`, `chevron`, `diamonds`, `triangles`, `starfield`, `terrazzo`
+
+Blend modes: `normal`, `multiply`, `screen`, `overlay`, `soft-light`, `hard-light`, `color-burn`, `color-dodge`, `darken`, `lighten`, `difference`, `exclusion`
+
+Presets (73): `grain`, `noise`, `rough`, `sand`, `paper`, `cloud`, `concrete`, `stone`, `crumpled`, `glitter`, `frost`, `marble`, `wood`, `oak`, `walnut`, `cherry`, `maple`, `pine`, `mahogany`, `ebony`, `birch`, `oak-planks`, `walnut-planks`, `bark`, `leather`, `brushed`, `canvas`, `linen`, `denim`, `carbon`, `scanlines`, `halftone`, `dots`, `lines`, `grid`, `checker`, `crosshatch`, `stripes`, `waves`, `hex`, `bricks`, `bricks-old`, `herringbone`, `plaid`, `tartan`, `gingham`, `scales`, `mermaid`, `shingles`, `chevron`, `argyle`, `lowpoly`, `tiles`, `blueprint`, `granite`, `slate`, `sandstone`, `terrazzo`, `confetti`, `rust`, `corrugated`, `cork`, `kraft`, `felt`, `burlap`, `stucco`, `starfield`, `snow`, `grass`, `water`, `rain`, `lava`, `topo`
+
+Settings:
+
+| key | kind | values | range | what it does |
+|---|---|---|---|---|
+| `scale` | number | 1 | 0.1 to 2000 | feature size in px: how big the grains, cells or lines are |
+| `intensity` | number | 1 | 0 to 2 | how strong the layer is, 0 to 1 (more than 1 over-drives it) |
+| `contrast` | number | 1 | 0 to 40 | noise contrast: 1 is as generated, higher is harsher |
+| `threshold` | number | 1 | 0 to 1 | noise cut-off: only values above it show (glitter uses a high one) |
+| `contour` | number | 1 | 0.005 to 0.5 | draw thin lines where the noise crosses the threshold, instead of a plain cut: veins, rings, contours |
+| `octaves` | number | 1 | 1 to 8 | noise detail layers, 1 is smooth, 5 is rough |
+| `seed` | number | 1 | 0 to 99999 | a different random pattern with the same look |
+| `stretch` | numbers | 2 | 0.1 to 200 | stretch noise features along x and y, e.g. stretch 40 1 for wood grain |
+| `depth` | number | 1 | 0 to 30 | bump height: how deep the relief looks |
+| `light` | number | 1 | -360 to 360 | bump light direction in degrees |
+| `angle` | number | 1 | -360 to 360 | direction of lines and patterns, in degrees |
+| `thickness` | number | 1 | 0.1 to 500 | line or grid-line width in px |
+| `radius` | number | 1 | 0.02 to 1 | dot size as a fraction of the cell (plaid: how wide the bands are as a fraction of the repeat) |
+| `softness` | number | 1 | 0 to 1 | how soft the edges of dots and lines are |
+| `animate` | number | 1 | 0 to 60000 | milliseconds per shimmer step (film-grain flicker); 0 is still |
+| `type` | word | 1 | `fractal`, `turbulence` | noise flavour: fractal is clouds, turbulence is veins |
+| `blend` | word | 1 | `normal`, `multiply`, `screen`, `overlay`, `soft-light`, `hard-light`, `color-burn`, `color-dodge`, `darken`, `lighten`, `difference`, `exclusion` | how the layer mixes with what is under it |
+| `color` | color | 1 |  | the main colour (dark end of noise, ink of lines and dots) |
+| `color2` | color | 1 |  | the second colour (light end of noise, background cell of patterns) |
+| `figure` | number | 1 | 0 to 1 | rings generator: how strongly the growth rings arch into a cathedral figure, 0 is straight grain |
+| `warp` | number | 1 | 0 to 1 | rings generator: how much each ring wobbles along its length |
+| `pores` | number | 1 | 0 to 1 | rings generator: fine fibre and pore streaks between the rings |
+| `knots` | number | 1 | 0 to 8 | rings generator: how many knots in one tile (the pattern repeats, so keep it small) |
+| `planks` | number | 1 | 24 to 1200 | rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each |
+| `symmetrical` | word | 1 | `both`, `x`, `y` | mirror every other tile, so each edge meets its own reflection: no seam, and the repeat is twice as far apart. x mirrors left to right, y top to bottom, both (the default) does both. Works on the image-based textures (noise, bump, rings, waves, hex). |
+| `density` | number | 1 | 0.05 to 20 | starfield and terrazzo: how many stars or chips in a tile, 1 is normal |
+| `invert` | flag | 0 |  | swap the two colours |
+
+## A.12 Aura
+
+From words: `edge`, `outline`, `bottom`, `top`, `left`, `right`, `center`, `corners`, `thumb`
+
+Shapes: `circle`, `spark`, `square`, `ring`, `star`, `flame`, `smoke`, `line`, `heart`, `diamond`, `triangle`, `plus`, `drop`, `bubble`, `snowflake`, `confetti`, `leaf`
+
+Direction words: `up`, `down`, `left`, `right`, `out`, `in`
+
+Blends: `add`, `normal`
+
+Around shapes: `follow`, `box`, `round`, `pill`, `alpha`, `diamond`, `triangle`, `hexagon`, `octagon`, `pentagon`, `star`, `star4`, `star6`, `cross`, `heart`, `drop`, `bolt`
+
+Glow settings:
+
+| key | kind | range | what it does |
+|---|---|---|---|
+| `color` | color |  | the light colour (default: the element's text colour) |
+| `radius` | number | 1 to 400 | how far the glow reaches, in px |
+| `intensity` | number | 0 to 4 | brightness, 1 is normal |
+| `pulse` | number | 0 to 60000 | milliseconds for one breath in and out; 0 is steady |
+| `depth` | number | 0 to 1 | how deep the pulse goes, 0 to 1 |
+| `flicker` | number | 0 to 1 | random flicker, like a flame: 0 is steady, 1 is wild |
+| `seed` | number | 0 to 99999 | a different random flicker with the same look |
+| `texture` | texture |  | texture(grain scale 2): break the light up with a texture |
+| `essential` | flag |  | keep animating even when the visitor prefers reduced motion |
+| `unclipped` | flag |  | let the light spill out of a parent that clips (overflow: hidden, auto, scroll). Without it the aura is cut at that edge, like the element itself |
+| `around` | around |  | the shape the light follows: follow (the default: the element's clip-path or rounded corners), box, round, pill, diamond, triangle, hexagon, octagon, pentagon, star, star4, star6, cross, heart, drop, bolt, alpha (an <img> or <canvas>'s visible pixels), or polygon(50% 0, 100% 50%, 50% 100%, 0 50%) |
+| `inner` | flag |  | light inside the edge (a rim) instead of outside it |
+| `rays` | number | 1 to 64 | that many beams of light from the middle, slowly turning (see spin) |
+| `spin` | number | -3600 to 3600 | rays turn this many degrees a second (default 10); on particles, how fast each one tumbles |
+| `ripple` | number | 200 to 60000 | rings that spread out from the shape and fade, one every this many milliseconds |
+| `nohalo` | flag |  | only the rays and ripples, without the soft halo |
+| `always` | flag |  | keep emitting even when the element cannot be seen (opacity 0, display: none, visibility: hidden, on it or an ancestor): for an invisible anchor that smoke or sparks come out of |
+| `z` | number | -1000000 to 2147483000 | the z-index of the layer this light is drawn on: `z 5` puts it under a hill with z-index 10. It meets elements in the page's root stacking context |
+
+Glow defaults: `{"radius":24,"intensity":1,"pulse":0,"depth":0.35,"flicker":0,"seed":1}`
+
+Particle settings:
+
+| key | kind | range | what it does |
+|---|---|---|---|
+| `color` | colors |  | colours over a particle's life: color #ff0 -> #f60 -> transparent |
+| `count` | number | 1 to 600 | how many particles are alive at once |
+| `size` | range | 0.5 to 300 | diameter in px: size 4, or size 10 4 (start and end of a random range) |
+| `life` | range | 50 to 60000 | how long one lives, in ms: life 900, or life 600 1200 |
+| `speed` | range | 0 to 3000 | px per second: speed 60, or speed 30 90 |
+| `dir` | dir |  | where they head: up, down, left, right, out, in, or degrees (-90 is up) |
+| `spread` | number | 0 to 360 | how wide the fan of directions is, in degrees |
+| `gravity` | number | -2000 to 2000 | px/s squared; negative pulls up (flames), positive down (snow) |
+| `drag` | number | 0 to 10 | air resistance: how fast particles slow down |
+| `turbulence` | number | 0 to 1000 | random sideways wobble, px/s |
+| `from` | word | `edge`, `outline`, `bottom`, `top`, `left`, `right`, `center`, `corners`, `thumb` | where they are born: edge or outline (along the element's real outline, see around), bottom, top, left, right, center, corners, thumb (range sliders) |
+| `shape` | word | `circle`, `spark`, `square`, `ring`, `star`, `flame`, `smoke`, `line`, `heart`, `diamond`, `triangle`, `plus`, `drop`, `bubble`, `snowflake`, `confetti`, `leaf` | circle, spark, square, ring, star, flame, smoke, line, heart, diamond, triangle, plus, drop, bubble, snowflake, confetti or leaf |
+| `grow` | number | 0 to 10 | size at the end of life as a multiple of the start: 0.2 shrinks, 3 swells |
+| `blend` | word | `add`, `normal` | add makes overlapping particles brighter, normal just stacks them |
+| `glowing` | flag |  | soft glowing particles that add light |
+| `behind` | flag |  | draw only outside the element's box, as if the element hid them |
+| `seed` | number | 0 to 99999 | a different random pattern with the same look |
+| `texture` | texture |  | texture(grain): grainy particles |
+| `essential` | flag |  | keep animating even when the visitor prefers reduced motion |
+| `unclipped` | flag |  | let the particles leave a parent that clips (overflow: hidden, auto, scroll). Without it they are cut at that edge |
+| `around` | around |  | the shape `from edge` and `from outline` follow: follow (the default), box, round, pill, diamond, triangle, hexagon, octagon, pentagon, star, star4, star6, cross, heart, drop, bolt, or polygon(...) |
+| `palette` | flag |  | each particle takes ONE of the colours (confetti) instead of fading through them |
+| `spin` | number | -3600 to 3600 | how fast each particle tumbles, in degrees a second (random direction) |
+| `wind` | number | -3000 to 3000 | a sideways push, px/s squared; negative pushes left |
+| `orbit` | number | -3600 to 3600 | the particles circle the middle of the element, this many degrees a second |
+| `always` | flag |  | keep emitting even when the element cannot be seen (opacity 0, display: none, visibility: hidden, on it or an ancestor): for an invisible anchor that smoke or sparks come out of |
+| `z` | number | -1000000 to 2147483000 | the z-index of the layer these particles are drawn on: `z 5` puts them under a hill with z-index 10. It meets elements in the page's root stacking context |
+
+Particle defaults: `{"count":40,"size":[4,4],"life":[900,900],"speed":[40,40],"dir":-90,"spread":30,"gravity":0,"drag":0,"turbulence":0,"from":"edge","shape":"circle","grow":0.3,"blend":null,"glowing":false,"seed":1}`
+
+## A.13 Slider
+
+| clause | form |
+|---|---|
+| `track` | `track [height] [color] [radius <n>\|full]` |
+| `fill` | `fill <color> \| fill none` |
+| `thumb` | `thumb <size> [color]` |
+| `shape` | `shape circle \| square \| diamond \| pill \| bar` |
+| `ring` | `ring <width> <color>` |
+| `glow` | `glow <color> <radius>` |
+| `ticks` | `ticks <count> [color] [length]` |
+| `graph` | `graph <v1> <v2> ... (each 0 to 100)` |
+| `graph-height` | `graph-height <px>` |
+| `graph-gap` | `graph-gap <px>` |
+
+Thumb shapes: `circle`, `square`, `diamond`, `pill`, `bar`
+
+## A.14 Glass and tilt
+
+| word | meaning |
+|---|---|
+| `blur` | a number: how many px to blur what is behind the element (default 16) |
+| `saturate` | saturate <n>: colour boost for what shows through, 1 is unchanged (default 1.5) |
+| `bright` | bright <n>: brightness of what shows through, 1 is unchanged |
+| `tint` | tint <color> \| tint none: the milky layer on top (default: a faint wash of the text colour) |
+| `max` | a number: the largest tilt in degrees (default 8) |
+| `lift` | lift <n>: scale while the pointer is over it, e.g. 1.04 |
+| `perspective` | perspective <px>: how strong the 3D depth looks (default 900) |
+| `speed` | speed <0.05 to 1>: how quickly it follows (default 0.18) |
+| `invert` | invert: tilt away from the pointer instead of toward it |
+| `glare` | glare: also keep --dssl-gx and --dssl-gy (0% to 100%) pointing at the pointer, for your own highlight |
+
+## A.15 Fonts
+
+| word | meaning |
+|---|---|
+| `weights` | a weight (400), several (400 700), or a variable range (100..900) |
+| `italic` | also load the italic of each weight |
+| `display` | display <swap\|block\|fallback\|optional>: how the text behaves while the font loads (default swap) |
+| `from` | from "/path/to/file.woff2": use your own file instead of Google Fonts |
+

native/spec/appendix-b-messages.md

@@ -0,0 +1,171 @@
+# Appendix B: message templates
+
+Generated by `scripts/gen-native-vocab.mjs`. Every error and warning template found in the engine
+source, by file and line. `${...}` marks a value filled in at run time. The extraction is by pattern,
+so it can include a string that is not a message and can miss one built in an unusual way. It is a
+checklist for the corpus, not the definition: the definition is in the chapters.
+
+## parser.js
+
+| line | template |
+|---|---|
+| 177 | `unknown at-rule "${h.split(' ')[0]}"` |
+| 183 | `unknown pseudo-element "::${name}"` |
+| 205 | `unexpected "}"` |
+| 224 | `block is missing a header before "{"` |
+| 261 | `${meta.kind} { } must be top-level` |
+| 282 | `the "${(meta.sel \|\| '').slice(0, 30) \|\| 'block'}" block was never closed with "}"` |
+| 350 | `expected ":" in "${part.slice(0, 40)}"` |
+| 356 | `declaration is missing a property name` |
+| 367 | `"${prop}" is not a valid property name` |
+
+## resolver.js
+
+| line | template |
+|---|---|
+| 415 | `${what} takes a bare number of degrees` |
+| 500 | `mesh needs a base colour and at least one blob` |
+| 504 | `mesh item "${it}" needs a position` |
+| 509 | `mesh needs a base colour first (an item without "at")` |
+| 521 | `gradient needs a kind: "linear", "radial", "conic" or "mesh" (any of them can be "repeating")` |
+| 558 | `gradient needs at least two stops` |
+| 576 | `"${head}" is not a linear gradient direction` |
+| 587 | `"${a}" is not part of a radial gradient shape` |
+| 602 | `"${head}" is not a conic gradient prefix` |
+| 617 | `"${s}" is a midpoint, so it has to sit between two colours` |
+| 626 | `a gradient stop is missing its color (got "${s}")` |
+| 633 | `gradient stop "${s}" is not a color` |
+| 666 | `gap needs a value` |
+| 680 | `"${a}" is written twice in ${dir} - the second copy wins` |
+| 681 | `two words in ${dir} write ${prop}: "${a}" overrides "${prev}"` |
+| 706 | `unknown word "${a}" in ${dir}` |
+| 728 | `${a} needs a number` |
+| 745 | `unknown animate part "${a}"` |
+| 773 | `grid needs columns` |
+| 791 | `unknown place "${word}" in stack` |
+| 799 | `unknown place "${v}"` |
+| 819 | `unknown center axis "${v}"` |
+| 840 | `font: "${v.trim()}" looks like the CSS font shorthand, but DSSL's font: means size, line height and colour` |
+| 870 | `radius "${a}" is not defined, so it will not apply` |
+| 891 | `unknown align "${v}"` |
+| 947 | `transition: the CSS form (property first) is not DSSL` |
+| 952 | `transition duration "${dur}" is not a time` |
+| 968 | `unknown transition property "${raw}"` |
+| 997 | `stagger needs a duration like "60" or "120ms", or "none"` |
+| 1016 | `unknown overlap policy "${(v \|\| '').trim()}"` |
+| 1040 | `bend-around caps at ±170° - past that the arc folds back on itself` |
+| 1053 | `stretch needs a positive factor, like "stretch: 1.2" or "stretch: 1.4 vertical"` |
+| 1062 | `stretch: ${m[1]} would flatten the element to nothing` |
+| 1095 | `text-stroke needs a width first` |
+| 1112 | `yield needs the properties to hand back` |
+| 1115 | `yield: "${n}" is not a CSS property` |
+| 1128 | `outline-shape needs a width first` |
+| 1166 | `gradient-flow takes a duration like "6s" or "6000ms", or "none"` |
+| 1179 | `unknown gradient-flow part "${a}"` |
+| 1202 | `fluid: "${s}" ${why}` |
+| 1216 | `${parts[0]} ${parts[1]}` |
+| 1217 | `${parts[2]} ${parts[3]}` |
+| 1306 | `!important does not exist in DSSL - "${prop}: ${String(value).replace(/\s*!\s*important\s*/i, '')}" was NOT applied` |
+| 1346 | `unknown property "${prop}"` |
+| 1374 | `@media needs a condition` |
+| 1402 | `@signal ${list[1]} ${list[2]} ( ) has no values` |
+| 1412 | `bad @signal expression "${expr}"` |
+| 1451 | `unexpected "${child.kind}" inside tokens` |
+| 1460 | `behavior "${node.name}" is defined twice` |
+| 1503 | `"${child.prop}" is not allowed inside motion` |
+| 1509 | `bad keyframe selector "${child.sel}"` |
+| 1601 | `unknown behavior "${name}"` |
+| 1604 | `behavior cycle involving "${name}"` |
+| 1623 | `"${node.sel}" compiled as a descendant selector ("${combine(ctx.sel, node.sel)}")` |
+| 1635 | `"${node.name}" needs a selector around it` |
+| 1647 | `"${d.prop}: ${d.value}" - the -> arrow is motion syntax and does nothing inside seen { }` |
+| 1688 | `unknown layer "${node.name}", treated as "components"` |
+| 1710 | `"seen" is engine-native and has no meaning on a pseudo-element` |
+| 1716 | `only declarations and states (hover { }) may appear inside a pseudo-element block` |
+| 1725 | `"${d.prop}" is engine-native and has no meaning on ::${node.name} - a pseudo-element has no DOM handle` |
+| 1750 | `tokens must be top-level or inside @media / @signal` |
+| 1789 | `raw { } is verbatim CSS, so this line needs a ";" at the end ("${t.slice(0, 40)}")` |
+| 1797 | `${node.kind} "${node.name}" must be top-level` |
+| 1808 | `declarations must live inside a selector` |
+| 1824 | `"${d.prop}" is engine-native and has no meaning on ::${ps.parts[0].pseudo.split(/[\s:(]/)[0]} - a pseudo-element has no DOM handle` |
+| 1834 | `unknown pseudo-element "::${pseudo}"` |
+| 1842 | `::slotted() only exists inside a shadow tree, and DSSL styles the light DOM` |
+| 1850 | `the engine-native "seen" state can't combine with "::${name}" in shadow CSS` |
+| 1868 | `selector list mixes pseudo-element and plain selectors: "${ctx.sel}"` |
+| 1913 | `"${d.via}:" expands to display: ${d.value}, which overrides the earlier "display: ${explicit.value}" (line ${explicit.line}) in the same rule - later wins, so the earlier one is dead` |
+| 1937 | `"${r.sel}" sets the background image twice (gradient: and ${other.prop}): the later one replaces the earlier, so one of them never shows` |
+| 1953 | `${x.prop} does nothing here: this rule has no CSS animation to tune${usesAnimate ? ', it runs its motion through animate:' : ''}` |
+| 1965 | `unknown motion "${d.value.motion}"` |
+| 1984 | `animation "${d.value}" references no motion defined in this sheet - it will not run` |
+
+## texture.js
+
+| line | template |
+|---|---|
+| 380 | `texture needs a name` |
+| 390 | `unknown texture "${first}"` |
+| 398 | `unknown texture setting "${key}"` |
+| 406 | `texture setting "${key}" needs ${def.words === 1 ? 'a value' : def.words + ' values'}` |
+| 412 | `texture setting "${key}" needs a number, got "${vals.join(' ')}"` |
+| 413 | `texture "${key}" must be between ${def.min} and ${def.max}` |
+| 417 | `unknown ${key} "${vals[0]}"` |
+
+## aura.js
+
+| line | template |
+|---|---|
+| 84 | `unknown around "${w}"` |
+| 89 | `polygon needs "x y" pairs in percent, got "${part.trim()}"` |
+| 92 | `a polygon needs at least 3 points` |
+| 325 | `${prop} needs a value` |
+| 342 | `an aura layer starts with glow or particles, not "${head}"` |
+| 377 | `unknown aura property "${prop}"` |
+
+## slider.js
+
+| line | template |
+|---|---|
+| 69 | `slider needs a description` |
+| 78 | `unknown slider setting "${head}"` |
+| 92 | `track radius needs a number or "full"` |
+| 102 | `thumb needs a size in px` |
+| 107 | `unknown thumb shape "${rest[0] ?? ''}"` |
+| 111 | `ring needs a width and a colour` |
+| 116 | `glow needs a colour and a radius` |
+| 121 | `ticks needs a count of at least 2` |
+| 127 | `graph needs at least two numbers` |
+| 128 | `graph values are 0 to 100` |
+| 129 | `graph is limited to 120 bars` |
+| 132 | `graph-height needs a number of px, at least 8` |
+| 136 | `graph-gap needs a number of px` |
+| 141 | `unexpected "${rest.slice(used).join(' ')}" in the ${head} setting` |
+
+## effects.js
+
+| line | template |
+|---|---|
+| 43 | `${x} needs a number` |
+| 49 | `tint needs a color or "none"` |
+| 58 | `unknown glass setting "${x}"` |
+| 60 | `glass blur cannot be negative` |
+| 72 | `tilt needs a number of degrees` |
+| 87 | `unknown tilt setting "${x}"` |
+| 89 | `tilt degrees should be between 0 and 45` |
+| 90 | `lift must be above 0` |
+| 91 | `perspective must be at least 100px` |
+| 92 | `speed must be between 0.02 and 1` |
+
+## fonts.js
+
+| line | template |
+|---|---|
+
+## lint.js
+
+| line | template |
+|---|---|
+| 119 | `text contrast is ${ratio.toFixed(1)}:1 (${toHex(fgSolid)} on ${toHex(bg)}), below the ${need}:1 that readers need${large ? ' for large text' : ''}` |
+| 147 | `${dim}: ${px}px on "${r.sel}" is below 24px, the smallest target WCAG 2.2 allows` |
+| 160 | `the focus outline is removed from "${k.sel}" and nothing replaces it, so keyboard users lose their place` |
+| 269 | `${p.a.props.join(', ')} in "${p.a.sel}" can never apply: "${p.b.sel}" (${p.b.file \|\| ''}${p.b.file ? ':' : ''}${p.b.line}) comes later, matches every element this rule matches, and sets ${p.a.props.length > 1 ? 'the same properties' : 'the same property'}` |
+

native/src/lib.rs

@@ -0,0 +1 @@
+pub fn hello() -> &'static str { "dssl" }

native/src/main.rs

@@ -0,0 +1 @@
+fn main() { println!("{}", dssl::hello()); }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dssl",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "private": true,
   "description": "The DSSL style language and the website that is written in it.",
   "scripts": {

public/dssl/index.js

@@ -19,7 +19,7 @@ import { resolve, DEFAULT_TOKENS, EASINGS } from './resolver.js';
 import { toCSS as docToCSS } from './static.js';
 import { DsslEngine } from './engine.js';
 
-export const VERSION = '0.16.2';
+export const VERSION = '0.16.3';
 
 let counter = 0;
 const loadedUrls = new Set();   // every .dssl file fetched by load(), so DSSL.watch() knows what to follow

public/dssl/parser.js

@@ -111,6 +111,17 @@ function stripComments(src) {
       continue;
     }
     if (c === '"' || c === "'") { q = c; out += c; continue; }
+    // An unquoted url(...) is one token: the // in http://x.com/a.png is not a comment. Copy it through the
+    // closing paren untouched (newlines included, so line numbers hold). A quoted url is handled by the string rule above.
+    if ((c === 'u' || c === 'U') && /^url\(/i.test(src.slice(i, i + 4)) && !/[\w-]/.test(src[i - 1] || '')) {
+      let k = i + 4;
+      while (k < src.length && /\s/.test(src[k])) k++;
+      if (src[k] !== '"' && src[k] !== "'") {
+        let e = k;
+        while (e < src.length && src[e] !== ')') e += src[e] === '\\' ? 2 : 1;
+        if (e < src.length) { out += src.slice(i, e + 1); i = e; continue; }
+      }
+    }
     if (c === '/' && n === '/') {
       // v0.7.1 bugfix: this handler used to emit its own '\n' AND rewind so
       // the main loop emitted the same newline again - every // comment

public/dssl/resolver.js

@@ -182,6 +182,13 @@ const LENGTH_FN = new Set('calc,min,max,clamp,round,mod,rem,abs,sign,hypot,pow,s
  *   - token references become var(--dssl-…), `token/NN` becomes color-mix
  *   - unknown identifiers are errors (with did-you-mean)
  */
+/** HTML element names: a bare one nested in a rule is a descendant selector on purpose, never a mistyped state word */
+const HTML_ELEMENTS = new Set(('a,abbr,acronym,address,area,article,aside,audio,b,base,bdi,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,' +
+  'data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,' +
+  'i,iframe,img,input,ins,kbd,label,legend,li,link,main,map,mark,marquee,menu,meta,meter,nav,nobr,noscript,object,ol,optgroup,option,output,p,param,picture,pre,progress,q,' +
+  'rp,rt,ruby,s,samp,script,search,section,select,slot,small,source,span,strike,strong,style,sub,summary,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,' +
+  'track,tt,u,ul,var,video,wbr,svg,math').split(','));
+
 /** split a selector list at top-level commas (not inside :is(...) and friends) */
 function splitTopLevel(sel) {
   const out = []; let depth = 0, cur = '';
@@ -209,7 +216,7 @@ function resolveValue(raw, ctx) {
 
     if (c === '"' || c === "'") {
       let j = i + 1;
-      while (j < n && raw[j] !== c) j++;
+      while (j < n && raw[j] !== c) j += raw[j] === '\\' ? 2 : 1;   // a backslash escapes the next character
       out += raw.slice(i, j + 1);
       i = j + 1;
       continue;
@@ -247,7 +254,7 @@ function resolveValue(raw, ctx) {
           if (raw[j] === ')') depth--;
           if (depth > 0 && (raw[j] === '"' || raw[j] === "'")) {
             const q = raw[j]; j++;
-            while (j < n && raw[j] !== q) j++;
+            while (j < n && raw[j] !== q) j += raw[j] === '\\' ? 2 : 1;
           }
           j++;
         }
@@ -386,16 +393,8 @@ function topSplit(str, sep) {
 }
 
 function findToken(tokens, ident) {
-  if (tokens.has(ident)) return ident;
-  // try progressive dot paths (a.b.c defined, user typed a.b.c - exact only, plus flat fallback)
-  if (ident.includes('.')) {
-    const parts = ident.split('.');
-    for (let k = parts.length - 1; k > 0; k--) {
-      const key = parts.slice(0, k).join('.');
-      if (tokens.has(key)) return key; // hmm - partial match would change meaning; require exact
-    }
-  }
-  return null;
+  // exact key only: color.ink2.bogus must not quietly become color.ink2, it falls through to "unknown value"
+  return tokens.has(ident) ? ident : null;
 }
 
 /* ------------------------------------------------------------------ *
@@ -438,7 +437,7 @@ function splitLayers(s) {
   const out = []; let depth = 0, q = null, cur = '';
   for (let i = 0; i < s.length; i++) {
     const c = s[i];
-    if (q) { cur += c; if (c === q) q = null; continue; }
+    if (q) { cur += c; if (c === q && s[i - 1] !== '\\') q = null; continue; }
     if (c === '"' || c === "'") { q = c; cur += c; continue; }
     if (c === '(' || c === '[') depth++;
     else if (c === ')' || c === ']') depth = Math.max(0, depth - 1);
@@ -866,7 +865,12 @@ const SEMANTIC = {
   radius(v, ctx) {
     const atoms = v.trim().split(/\s+/).filter(Boolean);
     const out = atoms.map(a => {
-      if (['sm', 'md', 'lg', 'full', 'xl'].includes(a)) return `var(--dssl-radius-${a})`;
+      if (['sm', 'md', 'lg', 'full', 'xl'].includes(a)) {
+        if (ctx.tokens && !ctx.tokens.has('radius.' + a) && ctx.warnings) {
+          ctx.warnings.push({ file: ctx.file, line: ctx.line, message: `radius "${a}" is not defined, so it will not apply`, hint: `add it with  tokens { radius { ${a}: 32 } }` });
+        }
+        return `var(--dssl-radius-${a})`;
+      }
       if (/^[A-Za-z][\w-]*$/.test(a) && ctx.tokens && ctx.tokens.has('radius.' + a)) return `var(--dssl-radius-${a})`;   // 0.14.0: radius { pill: 99 }  then  radius: pill
       return resolveValue(a, ctx);
     });
@@ -1614,7 +1618,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
           break;
         }
         case 'selector': {
-          if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(node.sel) && ctx.sel) {
+          if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(node.sel) && ctx.sel && !HTML_ELEMENTS.has(node.sel.toLowerCase())) {
             const near = didYouMean(node.sel.toLowerCase(), [...STATE_WORDS]);
             if (near) warnings.push({ file, line: node.line, message: `"${node.sel}" compiled as a descendant selector ("${combine(ctx.sel, node.sel)}")`, hint: `if you meant the state, it is spelled "${near}" - this block currently styles descendants called <${node.sel}>` });
           }
@@ -1632,7 +1636,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
             break;
           }
           flushPending(node.line);
-          const childCtx = { ...ctx, sel: ctx.sel + ':' + node.name };
+          const childCtx = { ...ctx, sel: withState(ctx.sel, node.name) };
           // v0.7.2 - the arrow is motion/gradient-stop syntax; inside a seen
           // block it compiled into an inline style the browser rejects, so the
           // element just sat at its base style forever. Say so, loudly, and
@@ -1678,7 +1682,11 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
         }
         case 'layer':
         case 'pin': {
-          const layer = node.kind === 'pin' ? 'pin' : (['tokens', 'base', 'components', 'utilities', 'pin'].includes(node.name) ? node.name : 'components');
+          const LAYERS = ['tokens', 'base', 'components', 'utilities', 'pin'];
+          const layer = node.kind === 'pin' ? 'pin' : (LAYERS.includes(node.name) ? node.name : 'components');
+          if (node.kind === 'layer' && !LAYERS.includes(node.name)) {
+            warnings.push({ file, line: node.line, message: `unknown layer "${node.name}", treated as "components"`, hint: didYouMean(node.name, LAYERS) || 'the layers are tokens, base, components, utilities, pin' });
+          }
           flushPending(node.line);
           const childCtx = { ...ctx, layer };
           const sub = { decls: [] };
@@ -1688,6 +1696,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
         }
         case 'pseudo': {
           const base = ctx.sel || '*'; // top-level ::selection etc. means every element
+          const parts = splitTopLevel(base);
           const srule = {
             id: ruleId++, sel: base, pseudo: node.name,
             media: ctx.media, signals: ctx.signals, containers: ctx.containers,
@@ -1724,6 +1733,17 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
           fill(srule, node.children);
           if (srule.decls.length) shadowRules.push(srule);
           for (const st of stateRules) if (st.decls.length) shadowRules.push(st);
+          // a selector list in front of the block (.a, .b { ::before { } }): the rules above were built on the whole
+          // list; give every further part its own copy so each gets its own pseudo-element rule
+          if (parts.length > 1) {
+            const built = [srule, ...stateRules].filter((r) => r.decls.length);
+            for (const part of parts.slice(1)) {
+              for (const r of built) {
+                shadowRules.push({ ...r, decls: r.decls.map((d) => ({ ...d })), id: ruleId++, order: order++, sel: part + r.sel.slice(base.length) });
+              }
+            }
+            for (const r of built) r.sel = parts[0] + r.sel.slice(base.length);
+          }
           break;
         }
         case 'tokens': {
@@ -1994,10 +2014,24 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null, baseMotion
   return { rules, shadowRules, raws, fontLinks, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
 }
 
-/** naive `&` substitution + descendant join */
+/** `&` substitution + descendant join. Lists are split at top-level commas and every parent part is joined with
+ *  every child part (parent-major), so `.a, .b { .c { } }` is `.a .c, .b .c`. Commas inside :is( ) or [ ] stay put. */
 function combine(parent, child) {
-  if (child.includes('&')) return child.split('&').join(parent);
-  return parent + ' ' + child;
+  const pp = splitTopLevel(parent), cp = splitTopLevel(child);
+  if (pp.length <= 1 && cp.length <= 1) {
+    if (child.includes('&')) return child.split('&').join(parent);
+    return parent + ' ' + child;
+  }
+  const out = [];
+  for (const p of pp) for (const c of cp) out.push(c.includes('&') ? c.split('&').join(p) : p + ' ' + c);
+  return out.join(', ');
+}
+
+/** append a state to every part of a selector list: `.a, .b` + hover is `.a:hover, .b:hover` */
+function withState(sel, name) {
+  const parts = splitTopLevel(sel);
+  if (parts.length <= 1) return sel + ':' + name;
+  return parts.map((p) => p + ':' + name).join(', ');
 }
 
 /* v0.5.0 - where does a selector carry a pseudo-element?

public/llms.txt

@@ -5,7 +5,7 @@
 - Site (docs, playground, changelog, bench): https://dssl-sable.vercel.app
 - Repo + full docs in the README: https://huggingface.co/EHS-Studio/dssl
 - Install: `curl -fsSL https://dssl-sable.vercel.app/install.sh | sh` (or the zip: https://dssl-sable.vercel.app/dssl-engine.zip)
-- Version: 0.16.2 (engine), MIT license
+- Version: 0.16.3 (engine), MIT license
 - Feature matrix vs CSS: see PARITY.md in the repo
 - For agents working ON the codebase: see AGENTS.md in the repo
 
@@ -64,6 +64,10 @@ DSSL.replay(sel) / DSSL.refresh([el]) / DSSL.errors() (a function) / DSSL.versio
 - Alpha on a named colour works: `white/12`, `currentColor/20`. It used to compile to `white/12px`.
 - The playground has a canvas.html tab, `?example=` links, lint warnings and an "as CSS" tab. The canvas keeps a short allow-list of tags and drops scripts, handlers, styles and ids.
 
+## 0.16.3
+- Seven bugs found by writing the native spec (`native/spec/`) are fixed. An unquoted `url(http://x.com/a.png)` no longer loses the rest of the line to the comment stripper (also inside `raw { }`). A typo at the end of a token path (`color.ink.bogus`) is an `unknown value` error instead of quietly becoming `color.ink`. Nesting under a selector list joins every part: `.a, .b { .c { } }` is `.a .c, .b .c`, `hover { }` gives `.a:hover, .b:hover`, `.c, .d { }` under `.a` gives `.a .c, .a .d`, and `::before { }` gets one rule per part. A backslash escapes a quote in a value (`content: "a\"b"`). A nested `li` or any other HTML element name no longer gets a "did you mean link" warning.
+- Two new warnings, both compile fine: an unknown `@layer` name (it is treated as `components`) and `radius: xl` when no `radius.xl` token exists.
+
 ## 0.16.2
 - `DSSL.lint`'s `css-loses` no longer judges the output of `dssl build` (its reset is built to sit under the engine), and ignores a rule whose value is the same as what DSSL wrote inline. On this site's docs page it reported 4,314 findings in 0.16.0; it now reports none from the site's own CSS.
 
@@ -132,4 +136,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## Editor support
 
-The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.16.2.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.16.3.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

public/showcase/wood/wood.css

@@ -1,4 +1,4 @@
-/* generated by dssl build from tokens.dssl + static.dssl - the static subset of DSSL v0.16.2.
+/* generated by dssl build from tokens.dssl + static.dssl - the static subset of DSSL v0.16.3.
    @signal rules and engine-native properties (animate, aura, tilt, ...) stay in the runtime.
    Textures are baked in as background images when their colours are known at build time. */
 @import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700;800&family=Hanken+Grotesk:wght@400;500;700&display=swap");

scripts/gen-native-vocab.mjs

@@ -0,0 +1,178 @@
+#!/usr/bin/env node
+/* gen-native-vocab.mjs: write the vocabulary the native crate and the spec appendices share.
+ *
+ *   node scripts/gen-native-vocab.mjs           write the files
+ *   node scripts/gen-native-vocab.mjs --check   fail if a file on disk is out of date
+ *
+ * Outputs:
+ *   native/data/vocabulary.json            every word list, in the engine's own order (order decides did-you-mean ties)
+ *   native/spec/appendix-a-vocabulary.md   the small tables, in prose form
+ *   native/spec/appendix-b-messages.md     every error and warning template found in the engine source
+ *
+ * The resolver keeps several tables private. Rather than touch the engine, this reads resolver.js as text,
+ * appends one export line to a temporary copy, and imports that. Nothing in public/dssl is changed. */
+import { readFileSync, writeFileSync, mkdirSync, mkdtempSync, existsSync } from 'node:fs';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { tmpdir } from 'node:os';
+import { join, dirname } from 'node:path';
+
+const root = fileURLToPath(new URL('../', import.meta.url));
+const engineDir = join(root, 'public/dssl');
+const check = process.argv.includes('--check');
+
+async function loadResolverInternals() {
+  let src = readFileSync(join(engineDir, 'resolver.js'), 'utf8');
+  const base = pathToFileURL(engineDir).href + '/';
+  src = src.replace(/from '\.\//g, `from '${base}`);
+  src += '\nexport const __VOCAB = { TIME_PROPS, UNITLESS_FN, LENGTH_FN, COLOR_WORDS, FLUID_PROPS, PLACE_WORDS, SEMANTIC_NAMES: Object.keys(SEMANTIC) };\n';
+  const dir = mkdtempSync(join(tmpdir(), 'dssl-vocab-'));
+  const file = join(dir, 'resolver-vocab.mjs');
+  writeFileSync(file, src);
+  return import(pathToFileURL(file).href);
+}
+
+const R = await loadResolverInternals();
+const P = await import(pathToFileURL(join(engineDir, 'parser.js')).href);
+const C = await import(pathToFileURL(join(engineDir, 'color.js')).href);
+const T = await import(pathToFileURL(join(engineDir, 'texture.js')).href);
+const A = await import(pathToFileURL(join(engineDir, 'aura.js')).href);
+const S = await import(pathToFileURL(join(engineDir, 'slider.js')).href);
+const E = await import(pathToFileURL(join(engineDir, 'effects.js')).href);
+const F = await import(pathToFileURL(join(engineDir, 'fonts.js')).href);
+
+const V = R.__VOCAB;
+const vocab = {
+  _about: 'Generated by scripts/gen-native-vocab.mjs from public/dssl. Do not edit by hand. Array order is the engine\'s insertion order.',
+  version: (/export const VERSION = '([^']+)'/.exec(readFileSync(join(engineDir, 'index.js'), 'utf8')) || [])[1] || 'unknown',
+  stateWords: [...P.STATE_WORDS],
+  pseudoElements: [...P.PSEUDO_ELEMENTS],
+  vendorPseudoSource: P.VENDOR_PSEUDO.source,
+  cssKeywords: [...R.CSS_KEYWORDS],
+  knownProps: [...R.KNOWN_PROPS],
+  unitlessProps: [...R.UNITLESS_PROPS],
+  timeProps: [...V.TIME_PROPS],
+  unitlessFns: [...V.UNITLESS_FN],
+  lengthFns: [...V.LENGTH_FN],
+  colorWords: [...V.COLOR_WORDS],
+  fluidProps: [...V.FLUID_PROPS],
+  placeWords: V.PLACE_WORDS,
+  easings: R.EASINGS,
+  defaultTokens: R.DEFAULT_TOKENS,
+  semanticNames: V.SEMANTIC_NAMES,
+  namedColors: C.NAMED,
+  texture: { generators: T.GENERATORS, blendModes: T.BLEND_MODES, keys: T.TEXTURE_KEYS, presetNames: T.PRESET_NAMES, presets: T.PRESETS },
+  aura: { fromWords: A.FROM_WORDS, shapes: A.SHAPES, dirWords: A.DIR_WORDS, blends: A.AURA_BLENDS, glowKeys: A.GLOW_KEYS, particleKeys: A.PARTICLE_KEYS, glowDefaults: A.GLOW_DEFAULTS, particleDefaults: A.PARTICLE_DEFAULTS, aroundNames: A.AROUND_NAMES },
+  slider: { clauses: S.SLIDER_CLAUSES, thumbShapes: S.THUMB_SHAPES },
+  effects: { glassWords: E.GLASS_WORDS, tiltWords: E.TILT_WORDS },
+  fonts: { words: F.FONT_WORDS },
+};
+
+/* ---------------- appendix A ---------------- */
+
+const code = (x) => '`' + x + '`';
+const list = (a) => a.map(code).join(', ');
+const table = (head, rows) => [`| ${head.join(' | ')} |`, `|${head.map(() => '---').join('|')}|`, ...rows.map((r) => `| ${r.join(' | ')} |`)].join('\n');
+const esc = (s) => String(s).replace(/\|/g, '\\|');
+
+function appendixA() {
+  const o = [];
+  o.push('# Appendix A: vocabulary', '',
+    'Generated by `scripts/gen-native-vocab.mjs` from the engine. Not edited by hand.',
+    `The full word lists, in the engine's own order, are in \`native/data/vocabulary.json\`.`, '');
+  o.push('## A.1 State words', '', list(vocab.stateWords), '');
+  o.push('## A.2 Pseudo-elements', '', list(vocab.pseudoElements), '',
+    `A vendor pseudo-element name matches \`${vocab.vendorPseudoSource}\`.`, '');
+  o.push('## A.3 Unitless and time properties', '',
+    'Unitless (a bare number stays bare):', '', list(vocab.unitlessProps), '',
+    'Time (a bare number is milliseconds):', '', list(vocab.timeProps), '');
+  o.push('## A.4 Functions', '',
+    'Unitless functions (numbers inside stay bare):', '', list(vocab.unitlessFns), '',
+    'Length functions (bare numbers inside are px):', '', list(vocab.lengthFns), '');
+  o.push('## A.5 Fluid properties', '', list(vocab.fluidProps), '');
+  o.push('## A.6 Place words', '', table(['word', 'cross', 'main'], Object.entries(vocab.placeWords).map(([k, v]) => [code(k), code(v[0]), code(v[1])])), '');
+  o.push('## A.7 Easings', '', table(['name', 'CSS'], Object.entries(vocab.easings).map(([k, v]) => [code(k), code(v)])), '');
+  o.push('## A.8 Built-in tokens', '', table(['key', 'value'], Object.entries(vocab.defaultTokens).map(([k, v]) => [code(k), code(esc(v))])), '');
+  o.push('## A.9 Semantic properties', '', list(vocab.semanticNames), '');
+  o.push('## A.10 Big sets', '', table(['set', 'count', 'where'], [
+    ['CSS keywords', vocab.cssKeywords.length, '`cssKeywords` in the data file'],
+    ['known CSS properties', vocab.knownProps.length, '`knownProps`'],
+    ['named colors', Object.keys(vocab.namedColors).length, '`namedColors`'],
+  ]), '', 'Color words allowed as gradient stops:', '', list(vocab.colorWords), '');
+  o.push('## A.11 Texture', '',
+    `Generators: ${list(vocab.texture.generators)}`, '',
+    `Blend modes: ${list(vocab.texture.blendModes)}`, '',
+    `Presets (${vocab.texture.presetNames.length}): ${list(vocab.texture.presetNames)}`, '',
+    'Settings:', '',
+    table(['key', 'kind', 'values', 'range', 'what it does'], Object.entries(vocab.texture.keys).map(([k, d]) => [
+      code(k), d.kind, d.words ?? '', d.values ? list(d.values) : (d.min !== undefined ? `${d.min} to ${d.max}` : ''), esc(d.doc || ''),
+    ])), '');
+  o.push('## A.12 Aura', '',
+    `From words: ${list(vocab.aura.fromWords)}`, '',
+    `Shapes: ${list(vocab.aura.shapes)}`, '',
+    `Direction words: ${list(Object.keys(vocab.aura.dirWords))}`, '',
+    `Blends: ${list(vocab.aura.blends)}`, '',
+    `Around shapes: ${list(vocab.aura.aroundNames)}`, '',
+    'Glow settings:', '',
+    table(['key', 'kind', 'range', 'what it does'], Object.entries(vocab.aura.glowKeys).map(([k, d]) => [code(k), d.kind, d.min !== undefined ? `${d.min} to ${d.max}` : (d.values ? list(d.values) : ''), esc(d.doc || '')])), '',
+    `Glow defaults: ${code(JSON.stringify(vocab.aura.glowDefaults))}`, '',
+    'Particle settings:', '',
+    table(['key', 'kind', 'range', 'what it does'], Object.entries(vocab.aura.particleKeys).map(([k, d]) => [code(k), d.kind, d.min !== undefined ? `${d.min} to ${d.max}` : (d.values ? list(d.values) : ''), esc(d.doc || '')])), '',
+    `Particle defaults: ${code(JSON.stringify(vocab.aura.particleDefaults))}`, '');
+  o.push('## A.13 Slider', '', table(['clause', 'form'], Object.entries(vocab.slider.clauses).map(([k, v]) => [code(k), code(esc(v))])), '',
+    `Thumb shapes: ${list(vocab.slider.thumbShapes)}`, '');
+  o.push('## A.14 Glass and tilt', '',
+    table(['word', 'meaning'], [...Object.entries(vocab.effects.glassWords), ...Object.entries(vocab.effects.tiltWords)].map(([k, v]) => [code(k), esc(v)])), '');
+  o.push('## A.15 Fonts', '', table(['word', 'meaning'], Object.entries(vocab.fonts.words).map(([k, v]) => [code(k), esc(v)])), '');
+  return o.join('\n') + '\n';
+}
+
+/* ---------------- appendix B ---------------- */
+
+function appendixB() {
+  const files = ['parser.js', 'resolver.js', 'texture.js', 'aura.js', 'slider.js', 'effects.js', 'fonts.js', 'lint.js'];
+  const re = /(?:\bmessage:\s*|\berr\(\s*\w+\s*,\s*|\b(?:bad|hooks\.error)\(\s*)(`(?:[^`\\]|\\.)*`|'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")/g;
+  const o = ['# Appendix B: message templates', '',
+    'Generated by `scripts/gen-native-vocab.mjs`. Every error and warning template found in the engine',
+    'source, by file and line. `${...}` marks a value filled in at run time. The extraction is by pattern,',
+    'so it can include a string that is not a message and can miss one built in an unusual way. It is a',
+    'checklist for the corpus, not the definition: the definition is in the chapters.', ''];
+  for (const f of files) {
+    const text = readFileSync(join(engineDir, f), 'utf8');
+    const seen = new Set();
+    const rows = [];
+    for (const m of text.matchAll(re)) {
+      const raw = m[1].slice(1, -1).replace(/\\n/g, ' ').replace(/\\(['"`])/g, '$1');
+      if (raw.length < 6 || seen.has(raw)) continue;
+      seen.add(raw);
+      const line = text.slice(0, m.index).split('\n').length;
+      rows.push([String(line), code(esc(raw).replace(/`/g, "'"))]);
+    }
+    o.push(`## ${f}`, '', table(['line', 'template'], rows), '');
+  }
+  return o.join('\n') + '\n';
+}
+
+/* ---------------- write or check ---------------- */
+
+const outputs = [
+  ['native/data/vocabulary.json', JSON.stringify(vocab, null, 1) + '\n'],
+  ['native/spec/appendix-a-vocabulary.md', appendixA()],
+  ['native/spec/appendix-b-messages.md', appendixB()],
+];
+
+let stale = 0;
+for (const [rel, text] of outputs) {
+  const path = join(root, rel);
+  if (check) {
+    const now = existsSync(path) ? readFileSync(path, 'utf8') : null;
+    if (now !== text) { console.error('STALE ' + rel + ' (run node scripts/gen-native-vocab.mjs)'); stale++; }
+    continue;
+  }
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, text);
+  console.log('wrote ' + rel + ' (' + text.length + ' bytes)');
+}
+if (check) {
+  if (stale) process.exit(1);
+  console.log('vocabulary files are up to date');
+}

scripts/test-all.mjs

@@ -15,7 +15,7 @@ const SUITES = [
   ['engine 0.5', 'test-v050.mjs'], ['engine 0.6', 'test-v060.mjs'], ['engine 0.7', 'test-v070.mjs'], ['parser lines 0.7.1', 'test-v071.mjs'],
   ['review fixes 0.7.2', 'test-v072.mjs'], ['exit lane 0.8.0', 'test-v073.mjs'], ['follow-up 0.8.1', 'test-v081.mjs'], ['cascade 0.8.2', 'test-v082.mjs'],
   ['color, texture, aura, slider, lint, import, share 0.9.0', 'test-v090.mjs'], ['editor extension', 'test-extension-lib.mjs'],
-  ['site stylesheets compile', 'dssl-styles-check.mjs'], ['guide examples compile', 'test-guide-examples.mjs'],
+  ['site stylesheets compile', 'dssl-styles-check.mjs'], ['guide examples compile', 'test-guide-examples.mjs'], ['native spec: examples, prose, known bugs', 'test-native-spec.mjs'], ['known divergences fixed 0.16.3', 'test-v0163.mjs'],
   ['designer: state to DSSL and back', 'test-designer.mjs'], ['designer: editor wiring (fake vscode)', 'test-designer-host.mjs'],
   ['guide examples in a browser', 'test-guide-browser.mjs', true], ['0.9.0 in a browser', 'test-browser-v090.mjs', true], ['designer panel in a browser', 'test-designer-browser.mjs', true], ['glass, tilt, wood, baked textures, counters 0.10-0.11', 'test-v0100.mjs', true], ['symmetrical, fonts, gradients, inspector, hot reload 0.12', 'test-v0120.mjs', true], ['build fidelity, source maps, strict CSP, server rendering 0.13', 'test-v0130.mjs', true], ['made for games, docs match the code 0.14', 'test-v0140.mjs', true], ['the second game review 0.15', 'test-v0150.mjs', true], ['round three: yield, shapes, textures 0.16', 'test-v0160.mjs', true], ['built CSS with JavaScript off vs the engine, every page', 'test-static-parity.mjs', true],
 ];

scripts/test-native-spec.mjs

@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+/* test-native-spec.mjs: keep native/spec honest.
+ *
+ *   1. every ```dssl block in the spec compiles with no errors, and every ```dssl error block has at least one
+ *   2. the numbers and strings the prose promises are what the engine produces
+ *   3. the divergences of chapter 12 stay fixed
+ *   4. the generated appendices and data file are up to date
+ *
+ * Exit code is 0 only when every check passed. */
+import { readFileSync, readdirSync } from 'node:fs';
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+import { parse } from '../public/dssl/parser.js';
+import { resolve, DEFAULT_TOKENS } from '../public/dssl/resolver.js';
+
+const root = fileURLToPath(new URL('../', import.meta.url));
+const specDir = join(root, 'native/spec');
+
+let pass = 0, fail = 0;
+const ok = (name) => { pass++; };
+const bad = (name, why) => { fail++; console.error('FAIL ' + name + (why ? '\n     ' + why : '')); };
+
+function run(src, file = 'spec.dssl') {
+  const p = parse(src, file);
+  const d = resolve(p.ast, file, { ...DEFAULT_TOKENS });
+  return { doc: d, errors: [...p.errors, ...d.errors], warnings: d.warnings || [] };
+}
+const rule = (doc, sel) => doc.rules.find((r) => r.sel === sel);
+const val = (doc, sel, prop) => { const r = rule(doc, sel); const d = r && r.decls.find((x) => x.prop === prop); return d ? d.value : undefined; };
+
+/* 1. fenced examples */
+const chapters = readdirSync(specDir).filter((f) => /^\d\d-.*\.md$/.test(f)).sort();
+let blocks = 0;
+for (const f of chapters) {
+  const text = readFileSync(join(specDir, f), 'utf8');
+  let i = 0;
+  for (const m of text.matchAll(/```dssl( error)?\n([\s\S]*?)```/g)) {
+    i++; blocks++;
+    const expectError = !!m[1];
+    const { errors } = run(m[2], `${f} block ${i}`);
+    if (expectError && errors.length) ok();
+    else if (expectError) bad(`${f} block ${i}`, 'is marked "error" but compiled cleanly');
+    else if (errors.length) bad(`${f} block ${i}`, errors.map((e) => `line ${e.line}: ${e.message}`).join('; '));
+    else ok();
+  }
+}
+if (blocks < 20) bad('spec examples', `only ${blocks} fenced blocks found, expected the chapters to carry many more`);
+
+/* 2. promises made in the prose */
+const eq = (name, got, want) => (JSON.stringify(got) === JSON.stringify(want) ? ok() : bad(name, `got ${JSON.stringify(got)}, wanted ${JSON.stringify(want)}`));
+
+{ // 3.2 numbers
+  const { doc } = run('.a { padding: 0; margin: 0 auto; opacity: 0.5; line-height: 1.5; transition-delay: 200 }');
+  eq('VAL-3 padding', val(doc, '.a', 'padding'), '0px');
+  eq('VAL-3 margin', val(doc, '.a', 'margin'), '0px auto');
+  eq('VAL-3 opacity', val(doc, '.a', 'opacity'), '0.5');
+  eq('VAL-3 line-height', val(doc, '.a', 'line-height'), '1.5');
+  eq('3.2 time prop', val(doc, '.a', 'transition-delay'), '200ms');
+}
+{ // 3.3 functions
+  const { doc } = run('.a { width: calc(100% - 24); background: oklch(62% 0.19 35); grid-template-columns: repeat(4, 1fr); transform: scale(1.2) }');
+  eq('VAL-7 calc', val(doc, '.a', 'width'), 'calc(100% - 24px)');
+  eq('VAL-7 oklch', val(doc, '.a', 'background'), 'oklch(62% 0.19 35)');
+  eq('VAL-6 repeat', val(doc, '.a', 'grid-template-columns'), 'repeat(4, 1fr)');
+  eq('VAL-7 scale', val(doc, '.a', 'transform'), 'scale(1.2)');
+}
+{ // 3.4 alpha
+  const { doc } = run('tokens { color { x: #123456 } }\n.a { color: color.x/50; background: #ff0000/50; border-color: white/12 }');
+  eq('VAL-8 token alpha', val(doc, '.a', 'color'), 'color-mix(in oklab, var(--dssl-color-x) 50%, transparent)');
+  eq('VAL-8 hex alpha', val(doc, '.a', 'background'), 'color-mix(in oklab, #ff0000 50%, transparent)');
+  eq('VAL-8 named alpha', val(doc, '.a', 'border-color'), 'color-mix(in oklab, white 12%, transparent)');
+}
+{ // 3.7 fluid
+  const { doc } = run('h1 { font-size: fluid 16 24 }');
+  eq('VAL-13 fluid', val(doc, 'h1', 'font-size'), 'clamp(16px, calc(12.571px + 0.952vw), 24px)');
+}
+{ // 5.2 layers
+  const { doc } = run('.a { color: red }\npin { .a { color: blue } }\n@layer base { .a { color: green } }');
+  eq('CAS-2/5 layer ranks', doc.rules.filter((r) => r.sel === '.a').map((r) => [r.layer, val(doc.rules.length ? { rules: [r] } : doc, '.a', 'color')]), [['components', 'red'], ['pin', 'blue'], ['base', 'green']]);
+}
+{ // 5.4 fragments
+  const { doc } = run('.a {\n color: red\n hover { color: blue }\n padding: 4\n}');
+  eq('CAS-12 fragments', doc.rules.filter((r) => r.sel.startsWith('.a')).map((r) => [r.sel, r.decls[0].prop]), [['.a', 'color'], ['.a:hover', 'color'], ['.a', 'padding']]);
+  const orders = doc.rules.filter((r) => r.sel.startsWith('.a')).map((r) => r.order);
+  eq('CAS-11 orders 1,2,3', orders, [1, 2, 3]);
+  eq('TOK-9 registry order 0', doc.registryRule.order, 0);
+}
+{ // 5.5 media
+  const { doc } = run('.a { @media 768 { padding: 24 } @media <= 480 { padding: 12 } @media 480..960 { gap: 4 } @media dark { gap: 1 } }');
+  eq('CAS-19 media', doc.rules.filter((r) => r.sel === '.a').map((r) => r.media), [['(min-width: 768px)'], ['(max-width: 480px)'], ['(min-width: 480px) and (max-width: 960px)'], ['(prefers-color-scheme: dark)']]);
+}
+{ // 5.9 signals
+  const { doc } = run('.a { @signal theme == dark { color: red } @signal screen in (a, b) { color: blue } @signal on { color: green } }');
+  eq('CAS-37 signals', doc.rules.filter((r) => r.sel === '.a').map((r) => r.signals[0]), [
+    { name: 'theme', op: '==', value: 'dark' }, { name: 'screen', op: 'in', value: 'a,b', values: ['a', 'b'] }, { name: 'on', op: 'truthy', value: null }]);
+}
+{ // 6.3 row
+  const { doc } = run('.toolbar { row: gap 8 between center }');
+  eq('PRP-8 row', rule(doc, '.toolbar').decls.map((d) => d.prop + ':' + d.value), ['display:flex', 'flex-direction:row', 'gap:8px', 'justify-content:space-between', 'align-items:center']);
+}
+{ // 4.3 conditional tokens
+  const { doc } = run('tokens { color { bg: white } }\n@media dark { tokens { color { bg: black } } }\n.a { background: color.bg }');
+  const toks = doc.rules.filter((r) => r.layer === 'tokens');
+  eq('TOK-8 two token rules', toks.map((r) => [r.media, r.decls[0].value]), [[[], 'white'], [['(prefers-color-scheme: dark)'], 'black']]);
+  eq('TOK-9 registry carries the last definition', doc.registryRule.decls.find((d) => d.prop === '--dssl-color-bg').value, 'black');
+}
+{ // 3.8, 6.1
+  const { errors } = run('.a { color: red !important }');
+  eq('VAL-15 important', errors.length === 1 && /^!important does not exist in DSSL/.test(errors[0].message), true);
+}
+
+/* 3. the divergences of chapter 12 stay fixed (0.16.3). D-6 is open and needs a browser test, so it is not checked here. */
+{ // D-1, SYN-6
+  const { errors, doc } = run('.a { background: url(http://x.com/a.png) }');
+  eq('D-1 unquoted url keeps its //', [errors.length, val(doc, '.a', 'background')], [0, 'url(http://x.com/a.png)']);
+}
+{ // D-2, TOK-12
+  const { errors } = run('tokens { color { ink2: #111 } }\n.a { color: color.ink2.bogus }');
+  eq('D-2 a typo in a token path is an error', errors.some((e) => /unknown value "color.ink2.bogus"/.test(e.message)), true);
+}
+{ // D-3, CAS-2
+  const { errors, warnings } = run('@layer weird { .a { color: red } }');
+  eq('D-3 unknown layer warns', [errors.length, warnings.some((w) => /^unknown layer "weird", treated as "components"/.test(w.message))], [0, true]);
+}
+{ // D-4, TOK-18
+  const { doc, errors, warnings } = run('.a { radius: xl }');
+  eq('D-4 radius xl warns, same output', [errors.length, warnings.some((w) => /^radius "xl" is not defined/.test(w.message)), val(doc, '.a', 'border-radius')], [0, true, 'var(--dssl-radius-xl)']);
+}
+{ // D-5, VAL string rule
+  const { errors } = run('.a { content: "a\\"b" }');
+  eq('D-5 an escaped quote stays inside the string', errors.length, 0);
+}
+{ // D-7, CAS-7, CAS-24
+  const sels = (src, hit) => run(src).doc.rules.filter((r) => hit.test(r.sel)).map((r) => r.sel);
+  eq('D-7 parent list', sels('.a, .b { .c { color: red } }', /\.c/), ['.a .c, .b .c']);
+  eq('D-7 state on a list', sels('.a, .b { hover { color: red } }', /hover/), ['.a:hover, .b:hover']);
+  eq('D-7 child list', sels('.a { .c, .d { color: red } }', /\.c/), ['.a .c, .a .d']);
+}
+{ // D-8, CAS-8
+  const { warnings } = run('.menu { li { color: red } hove { color: red } }');
+  eq('D-8 li is quiet, hove still warns', [warnings.some((w) => /"li" compiled/.test(w.message)), warnings.some((w) => /"hove" compiled/.test(w.message))], [false, true]);
+}
+
+/* 4. generated files */
+{
+  const r = spawnSync(process.execPath, ['--no-warnings', join(root, 'scripts/gen-native-vocab.mjs'), '--check'], { encoding: 'utf8' });
+  if (r.status === 0) ok(); else bad('generated vocabulary files are up to date', (r.stderr || r.stdout || '').trim());
+}
+
+console.log(`${blocks} spec examples checked`);
+console.log(`${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

scripts/test-v0163.mjs

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+/* test-v0163.mjs: seven known divergences fixed (D-1 to D-5, D-7, D-8): unquoted url() with //, token prefix matching,
+ * unknown @layer, undefined radius word, escaped quotes in values, selector lists when nesting, HTML element names
+ * that look like state typos. Pure Node, no browser. */
+import { compile } from '../public/dssl/index.js';
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => { if (cond) { pass++; console.log(`  ok  ${name}`); } else { fail++; console.log(`FAIL  ${name}${extra !== undefined ? '; ' + extra : ''}`); } };
+const section = (t) => console.log(`\n== ${t}`);
+const run = (src) => compile(src, 't.dssl');
+const sels = (src) => run(src).doc.rules.filter((r) => r.layer !== 'tokens').map((r) => r.sel);
+const shadow = (src) => run(src).doc.shadowRules.map((r) => `${r.sel}::${r.pseudo}`);
+const decl = (src, prop) => { for (const r of run(src).doc.rules) for (const d of r.decls) if (d.prop === prop) return d.value; return undefined; };
+const J = JSON.stringify;
+
+section('D-1. // inside an unquoted url()');
+{
+  const r = run('.a { background: url(http://x.com/a.png) }');
+  ok('unquoted url with // compiles clean', r.errors.length === 0 && r.ok, J(r.errors));
+  ok('and keeps the whole url', decl('.a { background: url(http://x.com/a.png) }', 'background') === 'url(http://x.com/a.png)');
+  ok('a declaration after it on the next line survives', decl('.a { background: url(http://x.com/a.png)\n  color: red }', 'color') === 'red');
+  ok('upper case URL( with spaces', run('.a { background: URL( http://x.com/a.png ) }').errors.length === 0);
+  ok('inside raw { } the closing brace is kept', run('raw { .a { background: url(http://x.com/a.png) } }\n.b { color: red }').errors.length === 0);
+  ok('quoted url still fine', run('.a { background: url("http://x.com/a.png") }').errors.length === 0 && decl('.a { background: url("http://x.com/a.png") }', 'background') === 'url("http://x.com/a.png")');
+  ok('a real comment after the url still works', decl('.a { background: url(a.png) // note\n  color: red }', 'color') === 'red' && run('.a { background: url(a.png) // note\n  color: red }').errors.length === 0);
+  ok('a // comment elsewhere still strips', run('.a { color: red } // trailing\n.b { color: blue }').errors.length === 0);
+  const e = run('.a { background: url(http://x.com/a.png)\n  color: nonsense }').errors;
+  ok('line numbers do not drift after the url', e.length === 1 && e[0].line === 2, J(e));
+}
+
+section('D-2. token lookup is exact');
+{
+  const src = 'tokens { color { ink2: #111 } }\n.a { color: color.ink2.bogus }';
+  const r = run(src);
+  ok('color.ink2.bogus is an unknown value', r.errors.length === 1 && /unknown value "color\.ink2\.bogus"/.test(r.errors[0].message), J(r.errors));
+  ok('the error carries file, line, message, hint keys', r.errors[0] && ['file', 'line', 'message', 'hint'].every((k) => k in r.errors[0]));
+  ok('color.ink2 itself still resolves', decl('tokens { color { ink2: #111 } }\n.a { color: color.ink2 }', 'color') === 'var(--dssl-color-ink2)');
+  ok('alpha on an exact token still works', /color-mix/.test(decl('tokens { color { ink2: #111 } }\n.a { color: color.ink2/50 }', 'color')));
+  ok('built-in tokens still resolve', run('.a { color: color.ink }').errors.length === 0);
+}
+
+section('D-3. unknown @layer warns');
+{
+  const r = run('@layer weird { .a { color: red } }');
+  ok('warns, never errors', r.errors.length === 0 && r.ok && r.warnings.length === 1, J(r.warnings));
+  ok('message and hint', r.warnings[0].message === 'unknown layer "weird", treated as "components"' && r.warnings[0].hint === 'the layers are tokens, base, components, utilities, pin', J(r.warnings));
+  ok('warning has the usual shape', ['file', 'line', 'message', 'hint'].every((k) => k in r.warnings[0]) && r.warnings[0].line === 1);
+  ok('still compiled as components', r.doc.rules.find((x) => x.sel === '.a').layer === 'components');
+  const t = run('@layer compnents { .a { color: red } }');
+  ok('a near miss gets a did-you-mean', t.warnings.length === 1 && t.warnings[0].hint === 'components', J(t.warnings));
+  ok('known layers are silent', ['tokens', 'base', 'components', 'utilities', 'pin'].every((l) => run(`@layer ${l} { .a { color: red } }`).warnings.length === 0));
+  ok('pin { } is silent', run('pin { .a { color: red } }').warnings.length === 0);
+}
+
+section('D-4. radius word with no token');
+{
+  const r = run('.a { radius: xl }');
+  ok('radius: xl warns', r.errors.length === 0 && r.ok && r.warnings.some((w) => w.message === 'radius "xl" is not defined, so it will not apply' && w.hint === 'add it with  tokens { radius { xl: 32 } }'), J(r.warnings));
+  ok('same declaration is still emitted', decl('.a { radius: xl }', 'border-radius') === 'var(--dssl-radius-xl)');
+  ok('no default token was added', !('radius.xl' in run('.a { radius: xl }').doc.tokens));
+  ok('defining it silences the warning', run('tokens { radius { xl: 32 } }\n.a { radius: xl }').warnings.length === 0);
+  ok('sm, md, lg, full are silent', ['sm', 'md', 'lg', 'full'].every((w) => run(`.a { radius: ${w} }`).warnings.length === 0));
+  ok('a number is silent', run('.a { radius: 8 }').warnings.length === 0);
+  ok('a custom radius token is silent', run('tokens { radius { pill: 99 } }\n.a { radius: pill }').warnings.length === 0);
+}
+
+section('D-5. a backslash escapes a quote in a value');
+{
+  const r = run('.a { content: "a\\"b" }');
+  ok('content: "a\\"b" has no error', r.errors.length === 0, J(r.errors));
+  ok('and is passed through', decl('.a { content: "a\\"b" }', 'content') === '"a\\"b"');
+  ok('single quotes too', run(".a { content: 'it\\'s' }").errors.length === 0);
+  ok('inside a function', run('.a { content: attr(x) "q\\"r" }').errors.length === 0 && run('.a { background: image-set("a\\"b.png" 1x) }').errors.length === 0);
+  ok('a plain string is unchanged', decl('.a { content: "ab" }', 'content') === '"ab"');
+  ok('an unknown word after an escaped string is still an error', run('.a { content: "a\\"b" nonsense }').errors.length === 1);
+}
+
+section('D-7. nesting under selector lists');
+{
+  ok('.a, .b { .c { } }', J(sels('.a, .b { .c { color: red } }')) === J(['.a .c, .b .c']), J(sels('.a, .b { .c { color: red } }')));
+  ok('.a, .b { hover { } }', J(sels('.a, .b { hover { color: red } }')) === J(['.a:hover, .b:hover']), J(sels('.a, .b { hover { color: red } }')));
+  ok('.a { .c, .d { } }', J(sels('.a { .c, .d { color: red } }')) === J(['.a .c, .a .d']), J(sels('.a { .c, .d { color: red } }')));
+  ok('.a, .b { .c, .d { } } is parent-major', J(sels('.a, .b { .c, .d { color: red } }')) === J(['.a .c, .a .d, .b .c, .b .d']), J(sels('.a, .b { .c, .d { color: red } }')));
+  ok('.a, .b { &.on { } }', J(sels('.a, .b { &.on { color: red } }')) === J(['.a.on, .b.on']), J(sels('.a, .b { &.on { color: red } }')));
+  ok('.a, .b { & > .c { } }', J(sels('.a, .b { & > .c { color: red } }')) === J(['.a > .c, .b > .c']));
+  ok('.a { .x &, & + & { } } substitutes every &', J(sels('.a { .x &, & + & { color: red } }')) === J(['.x .a, .a + .a']), J(sels('.a { .x &, & + & { color: red } }')));
+  ok('state inside a nested list child', J(sels('.a, .b { .c { hover { color: red } } }')) === J(['.a .c:hover, .b .c:hover']));
+  ok('a comma inside :is( ) is NOT split (parent)', J(sels('.a:is(.x, .y) { .c { color: red } }')) === J(['.a:is(.x, .y) .c']));
+  ok('a comma inside :is( ) is NOT split (child)', J(sels('.a { .c:is(.x, .y) { color: red } }')) === J(['.a .c:is(.x, .y)']));
+  ok('a comma inside [ ] is NOT split', J(sels('.a { [data-x="1,2"] { color: red } }')) === J(['.a [data-x="1,2"]']));
+  ok('a state on :is( ) parent', J(sels('.a:is(.x, .y) { hover { color: red } }')) === J(['.a:is(.x, .y):hover']));
+  ok('plain .a { .b { } } is unchanged', J(sels('.a { .b { color: red } }')) === J(['.a .b']));
+  ok('plain & is unchanged', J(sels('.a { &.on { color: red } }')) === J(['.a.on']));
+  ok('plain state is unchanged', J(sels('.a { hover { color: red } }')) === J(['.a:hover']));
+  ok('deep plain nesting is unchanged', J(sels('.a { .b { .c { color: red } } }')) === J(['.a .b .c']));
+  ok('no errors for any of it', run('.a, .b { .c, .d { hover { color: red } } }').errors.length === 0);
+  const sh = shadow('.a, .b { ::before { content: ""\n color: red } }');
+  ok('.a, .b { ::before { } } gives one shadow rule per part', J(sh) === J(['.a::before', '.b::before']), J(sh));
+  const sh2 = shadow('.a, .b { ::before { content: ""\n hover { color: red } } }');
+  ok('and a state inside it follows each part', J(sh2) === J(['.a::before', '.a:hover::before', '.b::before', '.b:hover::before']), J(sh2));
+  ok('plain .a { ::before { } } is unchanged', J(shadow('.a { ::before { content: "" } }')) === J(['.a::before']));
+  ok('the shadow rules do not share declaration objects', (() => { const r = run('.a, .b { ::before { content: "" } }').doc.shadowRules; return r.length === 2 && r[0].decls !== r[1].decls && r[0].id !== r[1].id; })());
+  ok('a top-level list of pseudo-elements is unchanged', J(shadow('.a::before, .b::before { content: "" }')) === J(['.a::before', '.b::before']));
+}
+
+section('D-8. HTML element names are not state typos');
+{
+  const w = (src) => run(src).warnings.filter((x) => /compiled as a descendant selector/.test(x.message));
+  ok('li under a rule does not warn', w('.menu { li { color: red } }').length === 0);
+  const names = 'a abbr address article aside audio b blockquote body br button canvas caption code col details dialog div em fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr html i iframe img input label legend li main mark menu nav ol optgroup option p pre section select small span strong sub summary sup table tbody td textarea tfoot th thead time tr u ul video'.split(' ');
+  const noisy = names.filter((n) => w(`.x { ${n} { color: red } }`).length);
+  ok(`none of ${names.length} element names warn`, noisy.length === 0, noisy.join(','));
+  ok('and they still compile as descendants', J(sels('.menu { li { color: red } }')) === J(['.menu li']));
+  ok('hove still warns', w('.a { hove { color: red } }').length === 1 && /"hover"/.test(w('.a { hove { color: red } }')[0].hint));
+  ok('focs still warns', w('.a { focs { color: red } }').length === 1 && /"focus"/.test(w('.a { focs { color: red } }')[0].hint));
+  ok('warnings never become errors', run('.a { hove { color: red } }').errors.length === 0 && run('.a { hove { color: red } }').ok);
+  ok('a custom word far from any state is silent', w('.a { widget { color: red } }').length === 0);
+}
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,14 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.16.3",
+    date: "growth phase \u00b7 the spec found seven bugs",
+    title: "Writing the native spec found seven bugs. They are fixed.",
+    why: "a language a browser could implement needs a spec that can be checked against the engine, and checking it showed where the engine and the language disagreed.",
+    kind: "add",
+    body: "An unquoted url(http://...) no longer loses the rest of the line. A typo at the end of a token path is an error instead of quietly becoming its parent. Nesting under a selector list (.a, .b { .c { } }, hover { }) now joins every part. A backslash escapes a quote in a value. A nested li no longer gets a did you mean link warning. An unknown @layer name and radius: xl with no token now warn instead of failing silently.",
+  },
   {
     version: "v0.16.2",
     date: "growth phase \u00b7 a second small fix",