v0.8.0 the exit drop: row/column axis roles (between center bug), unknown at-rules skip balanced (@font-face crash, @supports leak), url() atomic, !important loud, animation/transition teaching errors; raw { } escape hatch; dssl CLI (check + build) + DSSL.toCSS static emitter; headless-Chromium docs tests; fluid sugar; engine packages + 0.8.0 vsix (engine verified byte-identical inside)

.gitignore

@@ -58,3 +58,6 @@ server.log
 
 .env
 mini-services/
+
+# local screenshots, never published
+.zscripts/

.vercelignore

@@ -0,0 +1,16 @@
+/download/
+/upload/
+/tool-results/
+/scripts/
+/tests/
+/examples/
+/mini-services/
+/db/
+/prisma/
+/node_modules/
+/worklog.md
+/*.tar.gz
+/dev.log
+/server.log
+/.vercel
+/package/

Caddyfile

@@ -0,0 +1,23 @@
+:81 {
+	@transform_port_query {
+		query XTransformPort=*
+	}
+
+	handle @transform_port_query {
+		reverse_proxy localhost:{query.XTransformPort} {
+			header_up Host {host}
+			header_up X-Forwarded-For {remote_host}
+			header_up X-Forwarded-Proto {scheme}
+			header_up X-Real-IP {remote_host}
+		}
+	}
+
+	handle {
+		reverse_proxy localhost:3000 {
+			header_up Host {host}
+			header_up X-Forwarded-For {remote_host}
+			header_up X-Forwarded-Proto {scheme}
+			header_up X-Real-IP {remote_host}
+		}
+	}
+}

GUIDE.md

@@ -109,6 +109,44 @@ Token overrides can be scoped under `@media` or `@signal` for themes.
 .hero    { center: both }
 ```
 
+Each place word owns an axis (v0.8.0 — the example above used to silently
+lose the `between` because every word wrote both axes):
+
+- `between`, `around`, `evenly` are main-axis words (`justify-content`)
+- `stretch`, `baseline` are cross-axis words (`align-items`)
+- `center`, `start`, `end` fill whichever axes are still free
+
+One distribution word + one alignment word is the whole grammar. A word
+whose axes are already taken warns loudly ("has nowhere to go") instead of
+overwriting, and a word written twice warns too.
+
+### Sizing that moves: fluid
+
+`font-size: fluid 16 24` (and any length-ish property: width, height, gap,
+padding, margin…) compiles to the linear `clamp()` between 360px and 1200px
+viewports — the formula everyone writes wrong by hand. Custom bounds:
+`font-size: fluid 16 24 400 800`. The comma form still works: `fluid: 16, 24`.
+
+### raw { } — the escape hatch
+
+DSSL has no sugar for `@font-face`, `@keyframes`, `@supports`, `@import` or
+`@property` yet. `raw { }` (alias `@css { }`) drops verbatim CSS into the
+page stylesheet, top-level only:
+
+```dssl
+raw {
+  @font-face {
+    font-family: Inter
+    src: url(/fonts/inter.woff2)
+  }
+}
+```
+
+Unknown at-rules outside `raw { }` are skipped whole, with one clean error
+and a pointer here — they never leak their inner rules (that was a real
+0.7.2 bug: `@supports (display:grid) { .a { … } }` applied `.a` everywhere
+after erroring).
+
 ### The cascade is (layer, order)
 
 No specificity, no `!important`. Later wins inside a layer. Layers sort
@@ -211,7 +249,7 @@ for liveness. `unfreeze()` re-arms everything.
 
 Three ways to get it:
 
-1. Download `dssl-vscode/dssl-vscode-0.7.2.vsix` from the repo files, then
+1. Download `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files, then
    Extensions panel, `...`, Install from VSIX. Works in VS Code and VSCodium.
 2. Build it: `cd dssl-vscode && npx @vscode/vsce package --no-dependencies`.
 3. Registry listing: staged for Open VSX (the registry VSCodium searches).
@@ -222,10 +260,31 @@ did-you-mean included, line numbers accurate since the v0.7.1 parser fix),
 completions folded from your workspace token registry, hover docs, a TextMate
 grammar for `.dssl`.
 
+### The exit lane: dssl check + dssl build
+
+v0.8.0 answers the honest limits below without giving up the language:
+
+```sh
+node cli/dssl.mjs check styles.dssl --strict   # CI: real compiler, exit 1 on errors, --json
+node cli/dssl.mjs build styles.dssl -o styles.css
+```
+
+`build` compiles the static subset to a real stylesheet: tokens become
+custom properties, states become `:hover`, `@media`/`@container` pass
+through, layers become `@layer`, motions become `@keyframes`, `pin` becomes
+`!important`, `raw { }` passes through verbatim, and `seen` applies its
+final state unconditionally (the graceful no-JS look). What needs the
+runtime stays out and gets counted: `@signal` rules and `animate:`.
+The same output is available in the browser as `DSSL.toCSS(source)`.
+
 ## 6. Tooling and tests
 
 ```sh
-node scripts/test-v072.mjs      # latest regression suite (40 assertions)
+node cli/dssl.mjs check public/styles/*.dssl   # compile everything, exit code for CI
+node scripts/test-v073.mjs      # 0.8.0 regression suite (65 assertions)
+node scripts/test-guide-examples.mjs        # every guide example compiles
+node scripts/test-guide-browser.mjs         # guide examples asserted in headless Chromium
+node scripts/test-v072.mjs      # 0.7.2 regression suite (40 assertions)
 node scripts/test-v071.mjs      # parser line-number suite
 node scripts/test-v070.mjs      # v0.7 feature suite (60)
 node scripts/test-v050.mjs      # v0.5 feature suite (61)
@@ -242,16 +301,24 @@ run the sync script so the editor extension ships the same compiler.
 
 Read this before choosing DSSL for a real site.
 
-- **JavaScript is required.** No JS, no styles. The engine ships no CSS
-  fallback because there is no CSS. If a page must work without JS, use CSS.
+- **JavaScript is required** for the live engine. No JS, no styles at runtime.
+  v0.8.0 adds the exit lane: `dssl build styles.dssl -o styles.css` compiles
+  the static subset to a real stylesheet you can `<link>` instead of the
+  engine — tokens as custom properties, states as `:hover`, layers as
+  `@layer`, motions as `@keyframes`, `raw { }` verbatim. What genuinely needs
+  JS (`@signal`, `animate:`, deform, overlap) stays out and is counted in the
+  report, so you always know what a no-JS page gives up. If a page must work
+  without JS AND uses the dynamic features, use CSS.
 - **First paint.** Styles are applied by the engine after it loads, so large
-  pages can flash unstyled content (CLS). The docs site solves this by
-  inlining its stylesheets into the SSR HTML. The planned prerender mode
-  (server renders the final inline styles) is the real fix and is on the
-  PARITY roadmap as the next big item.
+  pages can flash unstyled content (CLS). The build output fixes this for
+  static pages (real CSS paints before any JS). For live pages, the docs site
+  solves it by inlining its stylesheets into the SSR HTML. The planned
+  prerender mode (server renders the final inline styles) is the real fix
+  and is on the PARITY roadmap as the next big item.
 - **CSP.** Pseudo-elements compile to one real stylesheet the engine injects;
   strict `style-src 'self'` blocks inline style attributes and that sheet.
-  DSSL wants `unsafe-inline` for styles today.
+  DSSL wants `unsafe-inline` for styles today — or use the `dssl build`
+  output, which is a normal external stylesheet and CSP-clean.
 - **Interop is invasive.** DSSL normal declarations beat external CSS, and
   `pin` beats external `!important`. Mixing with an existing CSS design
   system works but the engine wins by design.

PARITY.md

@@ -28,9 +28,9 @@ The point of this table is to stop two bad arguments: "DSSL is missing everythin
 | print styles (`@media print`) | not implemented | planned | |
 | `!important` | by design no | by-design-no | `pin { }` is the must-win block; specificity wars are the thing DSSL deletes |
 | Cascade | (layer, source order) | shipped | later wins; identical selectors resolve by order, deterministically |
-| Static extraction / view-source styling | live engine only today; prerender snapshot planned | planned | freeze() already makes big static pages zero-cost after first paint |
+| Static extraction / view-source styling | `dssl build` emits real CSS (v0.8.0); prerender snapshot for live pages planned | partially shipped | freeze() already makes big static pages zero-cost after first paint |
 | DevTools story | `DSSL.explain(el)` returns the cascade as data | shipped | matched rules with file/line, winning declaration per property, pseudo rules; browser-extension panel planned |
-| Work without JavaScript | not possible for first paint (today) | planned (prerender) | the honest trade; content pages should wait for prerender or pick another tool |
+| Work without JavaScript | `dssl build` emits the static subset as real CSS (v0.8.0); `@signal`/`animate:` stay runtime-only and counted | shipped for the static subset; prerender snapshot still planned for live pages | the honest trade has an exit now |
 
 ## The exit story
 
@@ -39,6 +39,14 @@ Abandoning DSSL leaves you: a DOM of valid inline styles, one small `<style>` el
 keeps working with the engine removed. No other styling replacement can say that, because
 no other replacement styles with the platform's own primitives.
 
+And since v0.8.0 there is a second exit: `dssl build styles.dssl -o styles.css`
+compiles the static subset to a real stylesheet before you ever ship — no runtime,
+no inline styles, CSP-clean, works without JavaScript. Tokens become custom properties,
+states become pseudo-classes, layers become `@layer`, motions become `@keyframes`,
+`pin` becomes `!important`, `raw { }` passes through verbatim, `seen` applies its final
+state. `@signal` rules and `animate:` stay runtime-only and are counted in the report,
+so the boundary is explicit, not folklore.
+
 ## What DSSL adds that CSS does not have
 
 - live tokens and signals: change one value or fire one bridge call, the whole DOM re-resolves
@@ -49,6 +57,36 @@ no other replacement styles with the platform's own primitives.
 - 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.8.0 review-driven corrections
+
+The second external review (repro snippets, headless browser) found five bugs and
+asked for the static build first. All fixed or shipped:
+
+- `row: gap 8 between center` — the guide's own example — kept its `between`
+  (every place word used to write both axes; the later word overwrote
+  `justify-content` silently). Place words now own an axis: between/around/evenly
+  are main-axis, stretch/baseline cross-axis, center/start/end fill free axes;
+  conflicts and duplicates warn loudly.
+- `@font-face { ... }` crashed the compiler with an uncaught throw. Unknown
+  at-rules now skip their entire balanced block with one clean error.
+- `@supports (...) { .a { ... } }` used to error AND still apply `.a`
+  unconditionally. The whole block is skipped now; nothing leaks.
+- Unquoted `url(a.png)` false-errored ("unknown value a.png"); `url()` is
+  atomic now, and the missing background words (`no-repeat`, `repeat-x/y`,
+  `space`, `round`, `scroll`, `local`) joined the vocabulary.
+- `color: red !important` used to error AND emit `red !important` (which the
+  browser then silently dropped). `!important` is now one loud error, nothing
+  is emitted, and the hint names `pin { }` as the actual answer.
+- `animation: spin ...` suggested "did you mean span"; it now passes motion
+  names through, warns when the motion is undefined, and bare durations are ms.
+- `transition: color .2s ease` (CSS order) is an error whose hint shows the
+  exact DSSL conversion (`transition: 200 ease color`).
+
+And the wishlist items that shipped: `raw { }` / `@css { }` verbatim passthrough,
+`dssl build` + `dssl check` (the CLI, with `--json` and CI exit codes),
+`DSSL.toCSS()`, headless-Chromium computed-style tests for every guide example
+(`scripts/test-guide-browser.mjs`), and `font-size: fluid 16 24` clamp sugar.
+
 ## v0.7.2 review-driven corrections
 
 An external agent review reproduced a batch of real bugs; all of them are fixed

README.md

@@ -6,7 +6,7 @@ license: mit
 
 DSSL is a style language for the web. For the pages it fits, it replaces writing CSS entirely. It does not replace the CSS platform: the engine ends in inline styles that the browser parses, and it needs JavaScript. Where it wins is the authoring experience: tokens, words-as-layout, states and motion in one grammar, loud errors, zero build. PARITY.md keeps the honest feature ledger.
 
-Not a preprocessor that spits out stylesheets. Not a utility class graveyard. You write `.dssl` files, the page loads a small engine, and the engine walks your DOM in real time and applies every rule it matches straight onto the elements it finds. Nothing is compiled. There is no build step for styles.
+Not a preprocessor that spits out stylesheets. Not a utility class graveyard. You write `.dssl` files, the page loads a small engine, and the engine walks your DOM in real time and applies every rule it matches straight onto the elements it finds. Nothing compiles at runtime — and since v0.8.0 there is also an exit lane: `dssl build` compiles the static subset of the same source to a real `.css` file for pages that must work without JavaScript or sit behind a strict CSP. You choose per page: live engine, built CSS, or both.
 
 Elements that show up later get styled the moment they appear. Change a rule and the page updates on the next pass. The language is the runtime.
 
@@ -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): download `dssl-vscode/dssl-vscode-0.7.2.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. An Open VSX listing (so it appears in VSCodium's Extensions tab, searchable) is staged and publishes with one Open VSX token; see `dssl-vscode/PUBLISHING.md`.
+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): download `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. An Open VSX listing (so it appears in VSCodium's Extensions tab, searchable) is staged and publishes with one Open VSX token; see `dssl-vscode/PUBLISHING.md`.
 
 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
 
@@ -369,6 +369,28 @@ DSSL.version                           // '0.7.0'
 
 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.
 
+## The exit lane: dssl check + dssl build (v0.8.0)
+
+The same compiler that runs in your browser runs in your terminal:
+
+```sh
+node cli/dssl.mjs check styles.dssl --strict    # CI: exit 1 on errors, --json for machines
+node cli/dssl.mjs build styles.dssl -o styles.css
+```
+
+`build` emits real CSS from the static subset: tokens become custom properties,
+states become `:hover`, `@media`/`@container` pass through, layers become
+`@layer`, motions become `@keyframes`, `pin` becomes `!important`, `raw { }`
+passes through verbatim, and `seen` applies its final state (the graceful
+no-JS look). What genuinely needs the runtime (`@signal`, `animate:`, deform,
+overlap) stays out and gets counted in the report, so the boundary is explicit
+instead of folklore.
+
+Two more tools from v0.8.0: `raw { }` (alias `@css { }`) drops verbatim CSS
+like `@font-face` or `@keyframes` into the page stylesheet, and
+`font-size: fluid 16 24` compiles to the linear `clamp()` between 360 and
+1200px viewports.
+
 ## Performance: freeze, explain, and the cost of live
 
 DSSL is a runtime. It walks the DOM, matches rules, and writes inline styles. That buys live tokens, live signals and live layout, and it costs more than a static stylesheet by design. Three things tip the ledger back:
@@ -398,10 +420,10 @@ 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.7.1)
+## What works today (v0.8.0)
 
 - the full selector surface, including `:nth-child`, `:not`, `:is`, `:where`, `:has`
-- flexbox and grid with `row:` / `column:` / `grid:` / `stack:` / `center:` sugar
+- 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
 - behaviors and `use`
 - design tokens, numeric keys included, scoped per file and per subtree
 - states, engine-native `seen`, `stagger` choreography
@@ -410,25 +432,30 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 - gradient sentences: `gradient`, `gradient-text`, `gradient-flow`
 - the overlap policy and `pointer-events` pass-through for veils
 - pseudo-elements in any spelling (shadow CSS), themed scrollbars included
-- compiler warnings for cascade-order footguns
-- `DSSL.freeze()` / `DSSL.unfreeze()` / `DSSL.explain()`
+- `raw { }` / `@css { }` for verbatim CSS (`@font-face`, `@keyframes`, `@supports`); unknown at-rules skip their whole block with one clean error
+- `fluid 16 24` sizing sugar on any length property
+- the CLI: `dssl check` (CI, --json) and `dssl build` (real CSS from the static subset)
+- compiler warnings for cascade-order footguns and duplicate axis words
+- `DSSL.freeze()` / `DSSL.unfreeze()` / `DSSL.explain()` / `DSSL.toCSS()`
 - bare font names, `hyphens: manual`, loud did-you-mean errors
 - honest line numbers: a v0.7.1 parser bug (every `//` comment shifted later lines +1, so diagnostics pointed one line late) is fixed and regression-tested
 - the editor extension bundles the real compiler, so editor squiggles and browser console agree
+- every guide example is asserted in headless Chromium (computed styles, real mouse hover, real IntersectionObserver), so docs examples cannot drift from the engine again
 
 ## Repo layout
 
-- `public/dssl/` the engine: parser, resolver, engine, boot
+- `public/dssl/` the engine: parser, resolver, engine, boot, and `static.js` (the build target)
 - `public/styles/` the styles that drive the site
+- `cli/dssl.mjs` the CLI: `check` + `build`, no dependencies
 - `package/` what ships in the download: engine, starter files, usage guide, installers
 - `src/` the Next.js site (docs, playground, changelog)
-- `scripts/` smoke tests for the engine
+- `scripts/` smoke tests, regression suites, and the headless-browser docs tests
 - `dssl-vscode/` the editor extension (VS Code + VSCodium, bundles the real parser/resolver)
-- `llms.txt`, `AGENTS.md`, `PARITY.md` for machine reviewers and contributors
+- `llms.txt`, `AGENTS.md`, `PARITY.md`, `GUIDE.md` for machine reviewers and contributors
 
 ## Status
 
-v0.7.1, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; if a page must work without JavaScript, a style runtime is not the right tool for it. Freeze makes big static pages viable; live interaction is what the engine is for.
+v0.8.0, 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
 

cli/dssl.mjs

@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+/* =========================================================================
+ * dssl — the command line for the DSSL style language
+ *
+ *   dssl check styles.dssl [more.dssl …] [--json] [--strict] [--quiet]
+ *       Compile files with the REAL parser + resolver (the same engine the
+ *       browser runs). Prints file:line diagnostics with did-you-mean hints.
+ *       Exit 1 on errors, 2 on usage problems. --strict makes warnings fatal.
+ *       --json emits machine-readable diagnostics for CI and editors.
+ *
+ *   dssl build styles.dssl [-o out.css] [--json] [--no-banner]
+ *       The exit lane: compile the static subset to a real .css file.
+ *       Tokens become custom properties, states become :hover, layers become
+ *       @layer, motions become @keyframes, raw { } passes through verbatim.
+ *       @signal rules and animate:/engine-native properties stay in the
+ *       runtime — the report says exactly what was left behind.
+ *
+ * Files are compiled in the order given; every bundle's tokens fold into the
+ * next (name a tokens.dssl first, exactly like <link> order in the browser).
+ * ========================================================================= */
+import { readFileSync, writeFileSync, statSync } from 'node:fs';
+import { dirname, resolve as pathResolve, basename, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// the engine is plain ESM in public/dssl — import directly, no build step
+const here = pathResolve(dirname(fileURLToPath(import.meta.url)), '..');
+const { parse } = await import('file://' + join(here, 'public/dssl/parser.js'));
+const { resolve } = await import('file://' + join(here, 'public/dssl/resolver.js'));
+const { toCSS } = await import('file://' + join(here, 'public/dssl/static.js'));
+const { VERSION } = await import('file://' + join(here, 'public/dssl/index.js'));
+
+const USAGE = `dssl v${VERSION} — the DSSL style language
+
+  dssl check <files…>    compile with the real engine, print diagnostics
+                         --json    machine-readable output
+                         --strict  warnings are errors too (exit 1)
+                         --quiet   only print diagnostics, no summary
+  dssl build <file>      compile the static subset to a real .css file
+                         -o <out.css>   output path (default: <file>.css)
+                         --json         machine-readable report
+                         --no-banner    omit the generated-file header
+  dssl --version         print the version`;
+
+const readArg = (args, flag) => {
+  const i = args.indexOf(flag);
+  if (i === -1) return null;
+  args.splice(i, 1);
+  return args.splice(i, 1)[0] || null;
+};
+
+const readSource = (file) => {
+  try {
+    statSync(file);
+    return readFileSync(file, 'utf8');
+  } catch {
+    console.error(`dssl: cannot read ${file}`);
+    process.exit(2);
+  }
+};
+
+/** compile files in order, folding tokens forward like the browser does */
+function compileAll(files) {
+  const out = [];
+  let tokenBase = null;
+  for (const file of files) {
+    const src = readSource(file);
+    const name = basename(file);
+    const { ast, errors: parseErrors } = parse(src, name);
+    let doc;
+    try {
+      doc = resolve(ast, name, tokenBase);
+    } catch (e) {
+      // the compiler must never throw — this is a bug report if it happens
+      doc = { rules: [], shadowRules: [], raws: [], errors: [{ file: name, line: 0, message: `internal compiler error: ${e.message}`, hint: 'please report this — a snippet that crashes the compiler is a bug in DSSL, not in your code' }], warnings: [], tokens: {} };
+    }
+    const all = [...parseErrors.map(e => ({ ...e, file: name })), ...doc.errors.map(e => ({ ...e, file: e.file || name }))];
+    out.push({ file, name, doc, errors: all, warnings: doc.warnings || [] });
+    tokenBase = { ...(tokenBase || {}), ...doc.tokens };
+  }
+  return out;
+}
+
+const printDiags = (results, quiet) => {
+  let errCount = 0, warnCount = 0;
+  for (const r of results) {
+    for (const e of r.errors) {
+      errCount++;
+      console.error(`${e.file || r.name}:${e.line ?? 0} — error — ${e.message}${e.hint ? `\n    ${e.hint}` : ''}`);
+    }
+    for (const w of r.warnings) {
+      warnCount++;
+      console.error(`${w.file || r.name}:${w.line ?? 0} — warning — ${w.message}${w.hint ? `\n    ${w.hint}` : ''}`);
+    }
+  }
+  if (!quiet && results.length > 1) {
+    console.error(`\n${results.length} file(s), ${errCount} error(s), ${warnCount} warning(s)`);
+  }
+  return { errCount, warnCount };
+};
+
+const args = process.argv.slice(2);
+const cmd = args.shift();
+
+if (!cmd || cmd === '--help' || cmd === '-h') {
+  console.log(USAGE);
+  process.exit(cmd ? 0 : 2);
+}
+if (cmd === '--version' || cmd === '-v') {
+  console.log(VERSION);
+  process.exit(0);
+}
+
+if (cmd === 'check') {
+  const json = args.includes('--json');
+  const strict = args.includes('--strict');
+  const quiet = args.includes('--quiet');
+  for (const f of ['--json', '--strict', '--quiet']) { const i = args.indexOf(f); if (i !== -1) args.splice(i, 1); }
+  if (!args.length) { console.error('dssl check: give me at least one .dssl file'); process.exit(2); }
+  const results = compileAll(args);
+  if (json) {
+    console.log(JSON.stringify({
+      version: VERSION,
+      files: results.map(r => ({
+        file: r.file,
+        ok: r.errors.length === 0 && (!strict || r.warnings.length === 0),
+        errors: r.errors.map(e => ({ file: e.file || r.name, line: e.line ?? 0, message: e.message, hint: e.hint || null })),
+        warnings: r.warnings.map(w => ({ file: w.file || r.name, line: w.line ?? 0, message: w.message, hint: w.hint || null })),
+      })),
+    }, null, 2));
+  } else {
+    printDiags(results, quiet);
+  }
+  const bad = results.some(r => r.errors.length || (strict && r.warnings.length));
+  process.exit(bad ? 1 : 0);
+}
+
+if (cmd === 'build') {
+  const json = args.includes('--json');
+  const banner = !args.includes('--no-banner');
+  for (const f of ['--json', '--no-banner']) { const i = args.indexOf(f); if (i !== -1) args.splice(i, 1); }
+  const outPath = readArg(args, '-o') || readArg(args, '--out');
+  if (!args.length) { console.error('dssl build: give me a .dssl file to build'); process.exit(2); }
+  const input = args[0];
+  const results = compileAll([input]);
+  const r = results[0];
+  const built = toCSS(r.doc, { file: r.name, banner });
+  const outputPath = outPath || (input.replace(/\.dssl$/i, '') + '.css');
+  if (json) {
+    console.log(JSON.stringify({
+      version: VERSION,
+      input: r.file,
+      output: outputPath,
+      ok: r.errors.length === 0,
+      errors: r.errors.map(e => ({ file: e.file || r.name, line: e.line ?? 0, message: e.message, hint: e.hint || null })),
+      warnings: r.warnings.map(w => ({ file: w.file || r.name, line: w.line ?? 0, message: w.message, hint: w.hint || null })),
+      report: built.report,
+      css: built.css,
+    }, null, 2));
+  } else {
+    writeFileSync(outputPath, built.css);
+    const rep = built.report;
+    console.log(`built ${outputPath} from ${r.file}`);
+    console.log(`  ${rep.rules} rule(s), ${rep.shadowRules} pseudo-element rule(s), ${rep.keyframes} @keyframes, ${rep.raws} raw block(s)`);
+    if (rep.layers.length) console.log(`  layers: ${rep.layers.join(' < ')}`);
+    if (rep.seenStripped) console.log(`  ${rep.seenStripped} seen rule(s) applied unconditionally (the no-JS state)`);
+    if (rep.skippedSignals || rep.skippedEngine) {
+      console.log(`  stays in the runtime: ${rep.skippedSignals} @signal rule(s), ${rep.skippedEngine} engine-native rule(s)`);
+    }
+    printDiags(results, true);
+  }
+  process.exit(r.errors.length ? 1 : 0);
+}
+
+console.error(`dssl: unknown command "${cmd}"\n\n${USAGE}`);
+process.exit(2);

dssl-vscode/lib/engine/parser.js

@@ -12,7 +12,7 @@
  * resolution happens in resolver.js.
  * ========================================================================= */
 
-const STATE_WORDS = new Set([
+export const STATE_WORDS = new Set([
   'hover', 'focus', 'focus-visible', 'active', 'disabled', 'checked',
   'empty', 'target', 'required', 'invalid', 'valid', 'open', 'closed',
   'placeholder-shown', 'read-only', 'read-write', 'enabled',
@@ -28,6 +28,11 @@ const STATE_WORDS = new Set([
 export const PSEUDO_ELEMENTS = new Set([
   'before', 'after', 'placeholder', 'selection', 'marker',
   'first-line', 'first-letter', 'backdrop', 'file-selector-button',
+  // v0.7.2 — ::part() rides the shadow-CSS pipeline (a document stylesheet
+  // CAN style shadow parts of custom elements). ::slotted() is accepted by
+  // the parser but rejected by the resolver with a loud explanation: it only
+  // exists inside a shadow tree, which is not a place DSSL styles.
+  'part', 'slotted',
 ]);
 
 // v0.4.2 — vendor pseudo-elements pass through verbatim (::-webkit-scrollbar
@@ -50,6 +55,20 @@ function scanFor(str, ch, from = 0) {
   return -1;
 }
 
+/** find index of LAST top-level occurrence of `ch` (skips strings + parens) */
+function scanForLast(str, ch) {
+  let depth = 0, q = null, found = -1;
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (q) { if (c === q && str[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; continue; }
+    if (c === '(' || c === '[') { depth++; continue; }
+    if (c === ')' || c === ']') { depth = Math.max(0, depth - 1); continue; }
+    if (depth === 0 && c === ch) found = i;
+  }
+  return found;
+}
+
 /** split a string on a top-level separator */
 function splitTop(str, sep) {
   const out = [];
@@ -67,6 +86,20 @@ function splitTop(str, sep) {
   return out;
 }
 
+/** find index of the matching close brace for the '{' just before `from`
+ * (string-aware). Returns -1 when the block is never closed. */
+function matchBrace(str, from) {
+  let depth = 1, q = null;
+  for (let i = from; i < str.length; i++) {
+    const c = str[i];
+    if (q) { if (c === q && str[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; continue; }
+    if (c === '{') depth++;
+    else if (c === '}') { depth--; if (depth === 0) return i; }
+  }
+  return -1;
+}
+
 /** strip comments (respecting strings), newlines preserved so lines survive */
 function stripComments(src) {
   let out = '', q = null;
@@ -115,6 +148,7 @@ export function parse(source, file = 'inline.dssl') {
     const h = header.trim();
     if (h === 'tokens') return { kind: 'tokens' };
     if (h === 'pin') return { kind: 'pin' };
+    if (h === 'raw' || h === '@css') return { kind: 'raw' };
     if (h.startsWith('behavior ')) return { kind: 'behavior', name: h.slice(9).trim() };
     if (h.startsWith('motion ')) return { kind: 'motion', name: h.slice(7).trim() };
     if (h.startsWith('@layer ')) return { kind: 'layer', name: h.slice(7).trim() };
@@ -122,7 +156,13 @@ export function parse(source, file = 'inline.dssl') {
     if (h.startsWith('@container')) return { kind: 'container', query: h.slice(10).trim() };
     if (h.startsWith('@signal ')) return { kind: 'signal', expr: h.slice(8).trim() };
     if (h.startsWith('@')) {
-      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'try @media, @container, @signal or @layer');
+      // v0.8.0 — unknown at-rules are skipped WHOLE (balanced braces). They
+      // used to error and then keep parsing inside their block, so the inner
+      // rules leaked out unconditionally: `@supports (display:grid) { .a { … } }
+      // applied .a everywhere. The block is now dropped in its entirety —
+      // and raw { } is the documented escape hatch for CSS DSSL has no sugar
+      // for yet (@font-face, @keyframes, @supports, @import…).
+      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'the whole block is skipped — for verbatim CSS like @font-face / @keyframes / @supports, wrap it in raw { }');
       return { kind: 'bogus' };
     }
     if (h.startsWith('::')) {
@@ -158,12 +198,34 @@ export function parse(source, file = 'inline.dssl') {
 
       if (open !== -1) {
         const header = rest.slice(0, open).trim();
+        // v0.7.2 — declarations and a nested block sharing one line:
+        // `.card { background: red; hover { ... } }`. Everything before the
+        // header used to be swallowed whole into it, so `background: red`
+        // silently became part of a selector named "background: red; hover"
+        // and vanished. Declarations before the LAST top-level ';' are now
+        // processed as declarations; the header is what follows them.
+        if (header) {
+          const semi = scanForLast(header, ';');
+          if (semi !== -1) {
+            processContent(header.slice(0, semi), line);
+            const realHeader = header.slice(semi + 1).trim();
+            if (!realHeader) { err(line, 'block is missing a header before "{"'); rest = rest.slice(open + 1); continue; }
+            const meta = classify(realHeader, line);
+            const node = { ...meta, line, children: [] };
+            stack[stack.length - 1].children.push(node);
+            const after = openBlock(meta, node, rest, open, line);
+            if (after === null) { rest = rest.slice(open + 1); if (meta.kind !== 'bogus') stack.push(node); continue; }
+            rest = after;
+            continue;
+          }
+        }
         if (!header) { err(line, 'block is missing a header before "{"'); rest = rest.slice(open + 1); continue; }
         const meta = classify(header, line);
         const node = { ...meta, line, children: [] };
         stack[stack.length - 1].children.push(node);
-        if (meta.kind !== 'bogus') stack.push(node);
-        rest = rest.slice(open + 1);
+        const after = openBlock(meta, node, rest, open, line);
+        if (after === null) { rest = rest.slice(open + 1); if (meta.kind !== 'bogus') stack.push(node); continue; }
+        rest = after;
         continue;
       }
 
@@ -172,6 +234,63 @@ export function parse(source, file = 'inline.dssl') {
     }
   };
 
+  /** v0.8.0 — what happens right after a block header opens.
+   *  - raw { } (top level): capture the block body VERBATIM as node.css and
+   *    return the remainder of the chunk — or enter multi-line capture mode
+   *    (returns '' with rawCapture armed).
+   *  - bogus (unknown at-rule / pseudo-element): skip the whole balanced
+   *    block so its content can never leak into the parent.
+   *  - anything else: return null so the caller pushes the node and keeps
+   *    parsing normally. */
+  let rawCapture = null; // { node, depth } while a multi-line raw { } is open
+  const openBlock = (meta, node, rest, open, line) => {
+    if (meta.kind === 'raw') {
+      if (stack.length > 1) {
+        err(line, 'raw { } must be top-level — it drops verbatim CSS into the page stylesheet', 'move it out of the enclosing block');
+        const close = matchBrace(rest, open + 1);
+        return close === -1 ? '' : rest.slice(close + 1);
+      }
+      const close = matchBrace(rest, open + 1);
+      if (close !== -1) {
+        node.css = rest.slice(open + 1, close);
+        return rest.slice(close + 1);
+      }
+      rawCapture = { node, depth: 1 };
+      return '';
+    }
+    if (meta.kind === 'bogus') {
+      const close = matchBrace(rest, open + 1);
+      if (close === -1) {
+        err(line, `the "${(meta.sel || '').slice(0, 30) || 'block'}" block was never closed with "}"`, 'every "{" needs a matching "}"');
+        return '';
+      }
+      return rest.slice(close + 1);
+    }
+    return null;
+  };
+
+  /** consume one source line while a multi-line raw { } is being captured */
+  const feedRawCapture = (raw, line) => {
+    let q = null;
+    for (let i = 0; i < raw.length; i++) {
+      const c = raw[i];
+      if (q) { if (c === q && raw[i - 1] !== '\\') q = null; continue; }
+      if (c === '"' || c === "'") { q = c; continue; }
+      if (c === '{') rawCapture.depth++;
+      else if (c === '}') {
+        rawCapture.depth--;
+        if (rawCapture.depth === 0) {
+          rawCapture.node.css += raw.slice(0, i);
+          const rest = raw.slice(i + 1);
+          rawCapture = null;
+          if (rest.trim()) processChunk(rest, line);
+          return;
+        }
+      }
+    }
+    rawCapture.node.css += raw + '\n';
+  };
+
   const processContent = (content, line) => {
     for (const piece of splitTop(content, ';')) {
       const part = piece.trim();
@@ -245,7 +364,8 @@ export function parse(source, file = 'inline.dssl') {
   lines.forEach((raw, idx) => {
     const line = idx + 1;
     const trimmed = raw.trim();
-    if (!trimmed) return; // blank lines never split a pending chunk
+    if (!trimmed) { if (rawCapture) rawCapture.node.css += raw + '\n'; return; } // blank lines never split a pending chunk
+    if (rawCapture) { feedRawCapture(raw, line); return; }
     const candidate = buf ? buf + ' ' + trimmed : raw;
     if (buf && needsMore(candidate)) { buf = candidate; return; }
     if (buf) { processChunk(candidate, bufLine || line); buf = ''; return; }
@@ -253,6 +373,9 @@ export function parse(source, file = 'inline.dssl') {
     processChunk(candidate, line);
   });
   if (buf.trim()) processChunk(buf, bufLine);
+  if (rawCapture) {
+    err(lines.length, 'the raw { } block was never closed with "}"', 'every "{" needs a matching "}" — the CSS captured so far is discarded');
+  }
 
   if (stack.length > 1) {
     err(lines.length, `${stack.length - 1} block(s) were never closed with "}"`, 'every "{" needs a matching "}"');

dssl-vscode/lib/engine/resolver.js

@@ -20,7 +20,7 @@
 import { levenshtein, didYouMean, composeDeform } from './utils.js';
 // v0.5.0 — the resolver validates the `::name` half of full selectors so a
 // typo like .card::befor is a LOUD error, never a silently dead rule.
-import { PSEUDO_ELEMENTS, VENDOR_PSEUDO } from './parser.js';
+import { PSEUDO_ELEMENTS, VENDOR_PSEUDO, STATE_WORDS } from './parser.js';
 
 /* ------------------------------------------------------------------ *
  * Vocabulary
@@ -45,6 +45,10 @@ export const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,
   'serif,sans-serif,monospace,cursive,fantasy,system-ui,ui-sans-serif,ui-monospace,ui-serif,ui-rounded,' +
   'system-ui,-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,' +
+  // v0.8.0 — the background repeat/attachment words the url() fix exposed:
+  // `background: url(a.png) no-repeat` was a false error because "no-repeat"
+  // was missing while "repeat" existed
+  '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,stretch,span,' +
   'scaleX,scaleY,translateX,translateY,translate,rotate,skew,skewX,skewY,matrix,' +
@@ -68,11 +72,23 @@ const UNITLESS_PROPS = new Set([
   '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', 'animation-delay', 'transition-delay',
+  'shape-image-threshold',
   // grid line placement takes integers, not lengths:  grid-column: span 2
   'grid-row', 'grid-column', 'grid-area',
 ]);
 
+// v0.7.2 — time properties: a bare number is milliseconds, never px, and
+// never unitless (both used to emit values the browser silently rejected).
+// transition-delay/animation-delay used to sit in UNITLESS_PROPS, which is
+// why `transition-delay: 200` shipped as invalid unitless 200.
+const TIME_PROPS = new Set([
+  'transition-delay', 'transition-duration', 'animation-delay', 'animation-duration',
+  // v0.8.0 — the animation shorthand takes bare numbers as ms too:
+  // `animation: spin 1s infinite` is fine, but `animation: ghost 400` used
+  // to become "ghost 400px" (invalid). 400 → 400ms, matching animate:.
+  'animation',
+]);
+
 // A practical whitelist of standard CSS properties (loud errors beat silent ones)
 const KNOWN_PROPS = new Set(('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,' +
@@ -82,8 +98,8 @@ const KNOWN_PROPS = new Set(('all,appearance,accent-color,align-content,align-it
   '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,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,cursor,caret,display,empty-cells,filter,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,float,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,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,' +
+  'bottom,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').split(','));
@@ -182,7 +198,7 @@ function resolveValue(raw, ctx) {
         unit = raw.slice(j, k).toLowerCase();
         j = k;
       }
-      out += num + (unit ? unit : (ctx.unitless ? '' : 'px'));
+      out += num + (unit ? unit : (ctx.unitless ? '' : TIME_PROPS.has(ctx.prop) ? 'ms' : 'px'));
       i = j;
       continue;
     }
@@ -208,6 +224,15 @@ function resolveValue(raw, ctx) {
         }
         const inner = raw.slice(i + 1, j - 1);
         const fname = ident.toLowerCase();
+        // v0.8.0 — url() is atomic. The validator used to tokenize INSIDE it,
+        // so `url(a.png)` raised "unknown value a.png" (quoted urls worked
+        // only because strings were already consumed whole). CSS allows the
+        // unquoted form; DSSL passes it through untouched now.
+        if (fname === 'url') {
+          out += 'url(' + inner.trim() + ')';
+          i = j;
+          continue;
+        }
         // v0.3.2 fix: repeat(COUNT, tracks) — the leading count is an integer,
         // never a length. `repeat(4, 1fr)` used to become `repeat(4px, 1fr)`,
         // which the browser rejected and the whole grid silently collapsed.
@@ -267,8 +292,18 @@ function resolveValue(raw, ctx) {
     if (c === '#') { // hex color
       let j = i + 1;
       while (j < n && /[0-9a-fA-F]/.test(raw[j])) j++;
-      out += raw.slice(i, j);
+      const hex = raw.slice(i, j);
+      out += hex;
       i = j;
+      // v0.7.2 — alpha on a raw hex color: #ff0000/50 used to become
+      // #ff0000/50px (the bare number got the generic px treatment) — invalid
+      // CSS, silently dropped by the browser. Tokens always had /NN via
+      // color-mix; raw hex now gets the same treatment.
+      const am = raw.slice(i).match(/^\s*\/\s*([0-9.]+)\s*%?/);
+      if (am) {
+        out = out.slice(0, out.length - hex.length) + `color-mix(in oklab, ${hex} ${am[1]}%, transparent)`;
+        i += am[0].length;
+      }
       continue;
     }
     out += c;
@@ -469,7 +504,21 @@ function buildGradient(v, ctx) {
 
 function parseFlexWords(value, ctx, dir) {
   const out = [{ prop: 'display', value: 'flex' }, { prop: 'flex-direction', value: dir }];
+  // v0.8.0 — axis roles. Every place word used to write BOTH axes, so
+  // `row: gap 8 between center` (the guide's own example) compiled to
+  // justify-content: space-between followed by justify-content: center —
+  // and center won, bunching everything in the middle. Words now declare
+  // the axis they are actually about: distribution words (between/around/
+  // evenly) own the main axis, stretch/baseline own the cross axis, and
+  // center/start/end fill whichever axes are still free. A word whose axes
+  // are all taken is a loud warning instead of a silent overwrite.
+  const FLEX_AXIS = {
+    between: 'main', around: 'main', evenly: 'main',
+    stretch: 'cross', baseline: 'cross',
+    center: 'both', start: 'both', end: 'both',
+  };
   const atoms = value.split(/\s+/).filter(Boolean);
+  let mainSet = null, crossSet = null;
   for (let k = 0; k < atoms.length; k++) {
     const a = atoms[k];
     if (a === 'gap') {
@@ -482,9 +531,36 @@ function parseFlexWords(value, ctx, dir) {
     if (a === 'nowrap') { out.push({ prop: 'flex-wrap', value: 'nowrap' }); continue; }
     if (a === 'reverse') { out[1].value = dir + '-reverse'; continue; }
     if (a === 'inline') { out[0].value = 'inline-flex'; continue; }
-    if (PLACE_WORDS[a]) {
-      out.push({ prop: 'align-items', value: PLACE_WORDS[a][0] });
-      out.push({ prop: 'justify-content', value: PLACE_WORDS[a][1] });
+    if (FLEX_AXIS[a]) {
+      const role = FLEX_AXIS[a];
+      const pc = PLACE_WORDS[a]; // [cross, main]
+      const axisWarn = (prop, prev) => {
+        ctx.warnings = ctx.warnings || [];
+        ctx.warnings.push(prev === a
+          ? { file: ctx.file, line: ctx.line, message: `"${a}" is written twice in ${dir} — the second copy wins`, hint: `drop the duplicate; one distribution word + one alignment word is the whole grammar` }
+          : { file: ctx.file, line: ctx.line, message: `two words in ${dir} write ${prop}: "${a}" overrides "${prev}"`, hint: `later words win — drop one, or reorder so the distribution word comes first` });
+      };
+      let wrote = false;
+      if (role === 'main' || (role === 'both' && !mainSet)) {
+        if (mainSet) axisWarn('justify-content', mainSet);
+        out.push({ prop: 'justify-content', value: pc[1] });
+        mainSet = a; wrote = true;
+      }
+      if (role === 'cross' || (role === 'both' && !crossSet)) {
+        if (crossSet) axisWarn('align-items', crossSet);
+        out.push({ prop: 'align-items', value: pc[0] });
+        crossSet = a; wrote = true;
+      }
+      if (!wrote) {
+        ctx.warnings = ctx.warnings || [];
+        ctx.warnings.push({
+          file: ctx.file, line: ctx.line,
+          message: mainSet === a || crossSet === a
+            ? `"${a}" is written twice in ${dir} — both axes already came from it`
+            : `"${a}" has nowhere to go: justify-content came from "${mainSet}", align-items came from "${crossSet}"`,
+          hint: 'one distribution word + one alignment word is the whole grammar — the extra word is dropped',
+        });
+      }
       continue;
     }
     ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown word "${a}" in ${dir}`, hint: didYouMean(a, ['gap', 'center', 'start', 'end', 'between', 'around', 'evenly', 'stretch', 'baseline', 'wrap', 'nowrap', 'reverse', 'inline']) });
@@ -510,15 +586,31 @@ const SEMANTIC = {
   column: (v, ctx) => parseFlexWords(v, ctx, 'column'),
   grid(v, ctx) {
     const atoms = v.split(/\s+/).filter(Boolean);
+    // v0.7.2 — `grid: 3 gap 12` (the documented form) used to die: the gap
+    // atoms were fed into grid-template-columns → "3px gap 12px", invalid.
+    // gap and rows are now first-class words of the shorthand.
+    let gap = null, rows = null;
+    const rest = [];
+    for (let i = 0; i < atoms.length; i++) {
+      if (atoms[i] === 'gap' && atoms[i + 1]) { gap = atoms[++i]; continue; }
+      if (atoms[i] === 'rows' && atoms[i + 1]) { rows = atoms[++i]; continue; }
+      rest.push(atoms[i]);
+    }
     let cols;
-    if (atoms.length === 1 && /^[0-9]+$/.test(atoms[0])) {
-      cols = `repeat(${atoms[0]}, 1fr)`;
-    } else if ((atoms[0] === 'auto-fill' || atoms[0] === 'auto-fit') && atoms[1]) {
-      cols = `repeat(${atoms[0]}, minmax(${len(atoms[1], ctx)}, 1fr))`;
+    if (!rest.length) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: 'grid needs columns', hint: 'grid: 3 · grid: auto-fill 200 · grid: 200px 1fr — optionally with gap N and rows N' });
+      cols = 'none';
+    } else if (rest.length === 1 && /^[0-9]+$/.test(rest[0])) {
+      cols = `repeat(${rest[0]}, 1fr)`;
+    } else if ((rest[0] === 'auto-fill' || rest[0] === 'auto-fit') && rest[1]) {
+      cols = `repeat(${rest[0]}, minmax(${len(rest[1], ctx)}, 1fr))`;
     } else {
-      cols = atoms.map(a => len(a, ctx)).join(' ');
+      cols = rest.map(a => len(a, ctx)).join(' ');
     }
-    return [{ prop: 'display', value: 'grid' }, { prop: 'grid-template-columns', value: cols }];
+    const out = [{ prop: 'display', value: 'grid' }, { prop: 'grid-template-columns', value: cols }];
+    if (gap) out.push({ prop: 'gap', value: len(gap, ctx) });
+    if (rows) out.push({ prop: 'grid-template-rows', value: /^[0-9]+$/.test(rows) ? `repeat(${rows}, 1fr)` : len(rows, ctx) });
+    return out;
   },
   stack(v, ctx) {
     const word = (v || 'center').trim();
@@ -579,17 +671,7 @@ const SEMANTIC = {
     return out;
   },
   fluid(v, ctx) {
-    const parts = v.split(',').map(s => s.trim());
-    const px = (s) => {
-      const m = String(s).match(/^([0-9.]+)\s*(px|rem|em|%)?$/);
-      if (!m) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" is not a size` }); return '0px'; }
-      return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
-    };
-    const min = px(parts[0]); const max = px(parts[1]);
-    const vmin = px(parts[2] || '360'); const vmax = px(parts[3] || '1200');
-    const mv = parseFloat(min), xv = parseFloat(max);
-    const slope = ((xv - mv) / (parseFloat(vmax) - parseFloat(vmin))) * 100;
-    return [{ prop: 'font-size', value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+    return buildFluidParts(v.split(',').map(s => s.trim()).filter(Boolean), ctx);
   },
   shadow(v, ctx) {
     const t = v.trim();
@@ -663,6 +745,22 @@ const SEMANTIC = {
       const atoms = part.split(/\s+/);
       const dur = atoms[0];
       if (!/^\d*\.?\d+(ms|s)?$/.test(dur)) {
+        // v0.8.0 — the CSS habit is property-first (`transition: color .2s
+        // ease`). That used to be a generic "not a time" error and the part
+        // silently dropped. The error now REWRITES the value into the DSSL
+        // order (time · easing · property) so the fix is a copy-paste.
+        const timeAtom = atoms.find(a => /^\d*\.?\d+(ms|s)?$/.test(a));
+        const easeAtom = atoms.find(a => EASINGS[a]);
+        const propAtom = atoms.find(a => a !== timeAtom && a !== easeAtom && (KNOWN_PROPS.has(a) || DEFORM_TO_TRANSFORM[a]));
+        if (timeAtom) {
+          const msOut = /^\d+$/.test(timeAtom) ? timeAtom : /ms$/.test(timeAtom) ? timeAtom.replace(/ms$/, '') : String(parseFloat(timeAtom) * 1000);
+          ctx.errors.push({
+            file: ctx.file, line: ctx.line,
+            message: `transition: the CSS form (property first) is not DSSL`,
+            hint: `write  transition: ${msOut}${easeAtom ? ' ' + easeAtom : ''}${propAtom ? ' ' + propAtom : ''}  — time first, easing, property last`,
+          });
+          continue;
+        }
         ctx.errors.push({ file: ctx.file, line: ctx.line, message: `transition duration "${dur}" is not a time`, hint: 'order is duration · easing · property — try 200 or 0.2s' });
         continue;
       }
@@ -842,13 +940,51 @@ const SEMANTIC = {
   },
 };
 
+/* v0.8.0 — fluid sizing sugar. `fluid: 16, 24` keeps working (font-size),
+ * and now any length-ish property takes it inline: `font-size: fluid 16 24`.
+ * Both compile to a clamp() that scales linearly between the viewport bounds
+ * (360px and 1200px by default) — the formula everyone writes by hand and
+ * gets wrong. */
+const FLUID_PROPS = new Set(('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').split(','));
+
+function buildFluidParts(parts, ctx, prop = 'font-size') {
+  const px = (s) => {
+    const m = String(s).match(/^([0-9.]+)\s*(px|rem|em|%)?$/);
+    if (!m) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" is not a size`, hint: 'fluid takes two sizes and optionally the viewport bounds — fluid 16 24, or fluid 16 24 360 1200' });
+      return '0px';
+    }
+    return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
+  };
+  const min = px(parts[0]); const max = px(parts[1]);
+  const vmin = px(parts[2] || '360'); const vmax = px(parts[3] || '1200');
+  const mv = parseFloat(min), xv = parseFloat(max);
+  const slope = ((xv - mv) / (parseFloat(vmax) - parseFloat(vmin))) * 100;
+  return [{ prop, value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+}
+
 /* ------------------------------------------------------------------ *
  * resolveDecl — one declaration → zero or more engine decls
  * ------------------------------------------------------------------ */
 
 function resolveDecl(prop, value, ctx) {
   const errors = ctx.errors;
-  const ctx2 = { ...ctx, prop, errors };
+  const ctx2 = { ...ctx, prop, errors, warnings: ctx.warnings };
+
+  // v0.8.0 — !important does not exist in DSSL. It used to fall through as a
+  // value: the compiler said "unknown value important" AND still emitted
+  // `red !important`, which the browser then silently dropped as an invalid
+  // inline value. Now: one loud error, nothing emitted, and the pin { }
+  // answer to the actual question.
+  if (hasImportant(value)) {
+    errors.push({
+      file: ctx.file, line: ctx.line,
+      message: `!important does not exist in DSSL — "${prop}: ${String(value).replace(/\s*!\s*important\s*/i, '')}" was NOT applied`,
+      hint: 'the cascade is (layer, order) and later wins — put the rule in pin { } when it genuinely must win',
+    });
+    return [];
+  }
 
   if (prop.startsWith('--')) {
     // v0.4.0 — scoped tokens. Dotted names are token re-declarations:
@@ -865,6 +1001,22 @@ function resolveDecl(prop, value, ctx) {
   const sem = SEMANTIC[prop];
   if (sem) return sem(value, ctx2);
 
+  // v0.8.0 — the animation shorthand passes through (it is legal CSS), but
+  // bare motion names must not pay the generic unknown-value tax: "spin"
+  // used to error with the surreal suggestion "did you mean span?". Motion
+  // names pass silently here and a dedicated warning in the final loop says
+  // the DSSL way (motion + animate) when the name matches nothing.
+  if (prop === 'animation' || prop === 'animation-name') {
+    return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: true }) }];
+  }
+
+  // v0.8.0 — inline fluid sugar on any length-ish property:
+  // font-size: fluid 16 24  →  clamp(16px, calc(16px + 0.952vw), 24px)
+  const fluidM = /^fluid\s+([\s\S]+)$/.exec(String(value).trim());
+  if (fluidM && FLUID_PROPS.has(prop)) {
+    return buildFluidParts(fluidM[1].split(/[\s,]+/).filter(Boolean), ctx2, prop);
+  }
+
   if (!KNOWN_PROPS.has(prop)) {
     errors.push({
       file: ctx.file, line: ctx.line,
@@ -876,6 +1028,19 @@ function resolveDecl(prop, value, ctx) {
   return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' }) }];
 }
 
+/** string-aware !important scan — quoted content: "!important" must not trip it */
+function hasImportant(v) {
+  const s = String(v);
+  let q = null;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (q) { if (c === q && s[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; continue; }
+    if (c === '!' && /\s*important/i.test(s.slice(i + 1))) return true;
+  }
+  return false;
+}
+
 /* ------------------------------------------------------------------ *
  * Media / container / signal normalization
  * ------------------------------------------------------------------ */
@@ -926,6 +1091,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   const errors = [];
   const rules = [];
   const shadowRules = [];
+  const raws = []; // v0.8.0 — raw { } / @css { } verbatim passthrough blocks
   const motions = {};
   const behaviors = {};
   // v0.7.0 — compile-time warnings: things that compile and run but are
@@ -965,7 +1131,10 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       } else if (node.kind === 'motion') {
         motions[node.name] = node;
       } else {
-        for (const child of node.children) if (child.kind !== 'decl') prepass([child]);
+        // v0.8.0 — defensive `|| []`: a malformed tree can throw from here
+        // and take the whole stylesheet down (the @font-face crash report).
+        // The parser now skips unknown at-rules whole, but the guard stays.
+        for (const child of (node.children || [])) if (child.kind !== 'decl') prepass([child]);
       }
     }
   };
@@ -984,7 +1153,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       const m = label.match(/^at\s+([0-9.]+)\s*%?$/);
       return m ? parseFloat(m[1]) : null;
     };
-    const ctxBase = { file, line: node.line, errors, tokens: tokenMap, tokenNames: [...tokenMap.keys()], prop: 'motion', unitless: false };
+    const ctxBase = { file, line: node.line, errors, warnings, tokens: tokenMap, tokenNames: [...tokenMap.keys()], prop: 'motion', unitless: false };
     for (const child of node.children) {
       if (child.kind === 'decl' && child.prop === 'essential') {
         node._parsed.essential = child.value === '' || child.value === 'true';
@@ -1041,7 +1210,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
 
   const resolveTokenDecls = (keys, conds) => {
     const decls = [];
-    const ctxBase = { file, line: 0, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: 'token', unitless: false };
+    const ctxBase = { file, line: 0, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: 'token', unitless: false };
     for (const key of keys) {
       const raw = tokenMap.get(key);
       const prop = '--dssl-' + key.replace(/\./g, '-');
@@ -1064,6 +1233,22 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   /* ---- main recursive walk ---- */
 
   const walk = (children, ctx, ctxRule) => {
+    // v0.7.2 — parent-first flush. Two real bugs lived here. (1) A nested
+    // block (hover { }, @media, a nested selector) was emitted BEFORE the
+    // parent's own declarations got their cascade order, so `background: red`
+    // on the parent always beat `hover { background: red }` nested inside it
+    // — the exact pattern the docs taught, and the external review's headline
+    // finding. (2) media/container/signal/layer blocks flushed with the
+    // PARENT context, dropping the condition or layer entirely: a nested
+    // `@media dark` was silently unconditional AND sorted before base.
+    // Nested blocks now flush everything the parent has said so far first,
+    // and every block flushes with the context it was actually walked with.
+    const flushPending = (line) => {
+      if (ctxRule && ctxRule.decls.length && ctx.sel) {
+        flush(ctxRule, ctx, line);
+        ctxRule.decls = [];
+      }
+    };
     for (const node of children) {
       switch (node.kind) {
         case 'decl': {
@@ -1080,7 +1265,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
             bh._active = false;
             break;
           }
-          const resolved = resolveDecl(node.prop, node.value, { file, line: node.line, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: node.prop, unitless: false });
+          const resolved = resolveDecl(node.prop, node.value, { file, line: node.line, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: node.prop, unitless: false });
           for (const r of resolved) {
             // v0.7.0 — remember WHICH source property wrote a display value,
             // so the ordering linter can tell an explicit "display:" from a
@@ -1091,6 +1276,11 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           break;
         }
         case 'selector': {
+          if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(node.sel) && ctx.sel) {
+            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}>` });
+          }
+          flushPending(node.line);
           const sel = ctx.sel === '' ? node.sel : combine(ctx.sel, node.sel);
           const childCtx = { ...ctx, sel };
           const sub = { decls: [] };
@@ -1103,7 +1293,19 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
             errors.push({ file, line: node.line, message: `"${node.name}" needs a selector around it` });
             break;
           }
+          flushPending(node.line);
           const childCtx = { ...ctx, sel: 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
+          // point at the two real patterns (final value, or a motion).
+          if (node.name === 'seen') {
+            for (const d of node.children) {
+              if (d.kind === 'decl' && typeof d.value === 'string' && d.value.includes('->')) {
+                errors.push({ file, line: d.line, message: `"${d.prop}: ${d.value}" — the -> arrow is motion syntax and does nothing inside seen { }`, hint: 'write the final style (seen { opacity: 1 }) or attach a motion (seen { animate: rise-in 400 })' });
+              }
+            }
+          }
           const sub = { decls: [] };
           walk(node.children, childCtx, sub);
           flush(sub, childCtx, node.line);
@@ -1111,31 +1313,39 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
         }
         case 'media': {
           const q = normalizeMedia(node.query, { errors, file, line: node.line }, node.line);
+          flushPending(node.line);
+          const childCtx = { ...ctx, media: [...ctx.media, q] };
           const sub = { decls: [] };
-          walk(node.children, { ...ctx, media: [...ctx.media, q] }, sub);
-          flush(sub, ctx, node.line);
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
           break;
         }
         case 'container': {
           const q = normalizeMedia(node.query || '(min-width: 0)', { errors, file, line: node.line }, node.line);
+          flushPending(node.line);
+          const childCtx = { ...ctx, containers: [...ctx.containers, q] };
           const sub = { decls: [] };
-          walk(node.children, { ...ctx, containers: [...ctx.containers, q] }, sub);
-          flush(sub, ctx, node.line);
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
           break;
         }
         case 'signal': {
           const sig = parseSignal(node.expr, { errors, file, line: node.line }, node.line);
+          flushPending(node.line);
+          const childCtx = { ...ctx, signals: [...ctx.signals, sig] };
           const sub = { decls: [] };
-          walk(node.children, { ...ctx, signals: [...ctx.signals, sig] }, sub);
-          flush(sub, ctx, node.line);
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
           break;
         }
         case 'layer':
         case 'pin': {
           const layer = node.kind === 'pin' ? 'pin' : (['tokens', 'base', 'components', 'utilities', 'pin'].includes(node.name) ? node.name : 'components');
+          flushPending(node.line);
+          const childCtx = { ...ctx, layer };
           const sub = { decls: [] };
-          walk(node.children, { ...ctx, layer }, sub);
-          flush(sub, ctx, node.line);
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
           break;
         }
         case 'pseudo': {
@@ -1148,7 +1358,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           for (const d of node.children) {
             if (d.kind !== 'decl') { errors.push({ file, line: d.line, message: 'only declarations may appear inside a pseudo-element block (v0.2)' }); continue; }
             if (d.prop === 'content' && d.value === '') { srule.decls.push({ prop: 'content', value: '""', line: d.line }); continue; }
-            const resolved = resolveDecl(d.prop, d.value, { file, line: d.line, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: d.prop, unitless: false });
+            const resolved = resolveDecl(d.prop, d.value, { file, line: d.line, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: d.prop, unitless: false });
             // v0.5.0 — engine-native properties have no pseudo-element story:
             // there is no DOM handle to nudge, animate, stack or stagger. They
             // used to leak into the shadow sheet as junk CSS the browser
@@ -1174,6 +1384,14 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           if (tr) rules.push(tr);
           break;
         }
+        case 'raw': {
+          // v0.8.0 — verbatim CSS escape hatch (@font-face, @keyframes,
+          // @supports, @import, @property…). The parser captured the body
+          // untouched; it rides the same document stylesheet as the
+          // pseudo-element rules and survives `dssl build` verbatim.
+          if ((node.css || '').trim()) raws.push({ css: node.css.trim(), file, line: node.line, order: order++ });
+          break;
+        }
         case 'behavior':
         case 'motion':
           if (ctx.depth) errors.push({ file, line: node.line, message: `${node.kind} "${node.name}" must be top-level` });
@@ -1214,7 +1432,15 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           errors.push({
             file, line,
             message: `unknown pseudo-element "::${pseudo}"`,
-            hint: 'try ::before, ::after, ::selection, or a vendor one like ::-webkit-scrollbar-thumb',
+            hint: 'try ::before, ::after, ::selection, ::part(name), or a vendor one like ::-webkit-scrollbar-thumb',
+          });
+          continue;
+        }
+        if (name === 'slotted') {
+          errors.push({
+            file, line,
+            message: '::slotted() only exists inside a shadow tree, and DSSL styles the light DOM',
+            hint: 'style the slotted element itself with a normal selector — it IS reachable from the page',
           });
           continue;
         }
@@ -1283,7 +1509,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   flush(rootRule, topCtx, 0);
 
   // parse all motions that were referenced
-  for (const r of rules) {
+  for (const r of [...rules, ...shadowRules]) {
     for (const d of r.decls) {
       if (d.prop === '@animate' && d.value && d.value.motion) {
         const m = parseMotion(d.value.motion);
@@ -1291,7 +1517,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           errors.push({
             file, line: d.line,
             message: `unknown motion "${d.value.motion}"`,
-            hint: didYouMean(d.value.motion, Object.keys(motions)),
+            hint: didYouMean(d.value.motion, Object.keys(motions)) || `define it first:  motion ${d.value.motion} { from { } to { } }  — then "animate: ${d.value.motion} 400" runs it`,
           });
           d.value.broken = true;
         } else {
@@ -1299,13 +1525,36 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           d.value.essential = m.essential;
         }
       }
+      // v0.8.0 — the animation shorthand is CSS passthrough, so a motion
+      // name that matches nothing used to be a SILENT no-op (no @keyframes
+      // can exist in DSSL). Warn with the whole story; if the keyframes come
+      // from raw { } or another stylesheet, the warning says it can be ignored.
+      if ((d.prop === 'animation' || d.prop === 'animation-name') && typeof d.value === 'string') {
+        const words = d.value.split(/[\s,]+/).filter(w => /^[A-Za-z][\w-]*$/.test(w));
+        const named = words.find(w => motions[w]);
+        if (words.length && !named) {
+          warnings.push({
+            file, line: d.line,
+            message: `animation "${d.value}" references no motion defined in this sheet — it will not run`,
+            hint: `motions are defined with  motion name { from { } to { } }  and run with  animate: name 400  — @keyframes does not exist in DSSL; raw { } can carry verbatim keyframes`,
+          });
+        }
+      }
     }
   }
 
+  // v0.8.0 — pre-parse EVERY motion (not just referenced ones) so the static
+  // emitter can turn the whole motion vocabulary into real @keyframes.
+  const motionFrames = {};
+  for (const name of Object.keys(motions)) {
+    const m = parseMotion(name);
+    if (m && m.frames.length) motionFrames[name] = m;
+  }
+
   const mediaQueries = new Set();
   for (const r of [...rules, ...shadowRules]) r.media.forEach(q => mediaQueries.add(q));
 
-  return { rules, shadowRules, motions, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
+  return { rules, shadowRules, raws, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
 }
 
 /** naive `&` substitution + descendant join */

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, hover docs. Works in VS Code and VSCodium.",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",

engine-package/USAGE.md

@@ -0,0 +1,119 @@
+# DSSL engine — quickstart
+
+DSSL is a style language that runs in the browser. You write `.dssl` files, add two tags to your page, and the engine does the rest. No compiler, no build step, no CSS output. The engine walks your DOM live and writes styles straight onto the elements it matches, including elements that show up later.
+
+## 1. Get the engine
+
+Copy the `dssl/` folder from this package into your project, or grab it fresh from a terminal:
+
+```sh
+curl -fsSL https://dssl-sable.vercel.app/install.sh | sh
+```
+
+That drops a `dssl-engine/` folder next to you with everything you need.
+
+## 2. Wire it up
+
+```html
+<!doctype html>
+<html data-dssl-reset>
+<head>
+  <script type="module" src="/dssl/boot.js"></script>
+  <link rel="stylesheet/dssl" href="/styles/tokens.dssl">
+  <link rel="stylesheet/dssl" href="/examples/hello.dssl">
+</head>
+<body>
+  <h1>Styled by DSSL</h1>
+</body>
+</html>
+```
+
+What those lines do:
+
+- `data-dssl-reset` (optional) turns on the small built-in reset.
+- `boot.js` is the whole install. It boots the engine on page load.
+- Every `<link rel="stylesheet/dssl">` is fetched and applied automatically, in the order you list them. Tokens first, then your styles.
+- Inline styles work too: `<style type="text/dssl"> ... </style>`.
+- When booting is done the page fires a `dssl-ready` event.
+
+## 3. Write some DSSL
+
+`examples/hello.dssl` in this package:
+
+```dssl
+body {
+  background: #f5f0e4
+  color: #26201a
+  padding: 40
+}
+
+.card {
+  background: #fdfaf2
+  border: 1 solid #ddd2bc
+  radius: 6
+  padding: 24
+
+  hover {
+    box-shadow: 0 6 18 #26201a/16
+  }
+}
+```
+
+Bare numbers are pixels. States like `hover` are nested blocks. The engine keeps them working forever, even for elements added to the page later.
+
+## The JavaScript API
+
+`window.DSSL` is available after boot:
+
+- `DSSL.load(urls)` fetch and apply one or more `.dssl` files (fetched in parallel, applied in order)
+- `DSSL.apply(source, { name, scope })` apply a source string
+- `DSSL.compile(source)` parse and resolve without touching the DOM, returns `ok`, `errors` and stats
+- `DSSL.signal(name, value)` drive styles from JS with `@signal` conditions in your `.dssl`
+- `DSSL.refresh()` force a full recompute
+- `DSSL.replay(selector)` replay entrance motions on matching elements
+- `DSSL.errors` the last reported errors (also grouped in the console, with did-you-mean hints)
+- `DSSL.version` engine version
+
+## Scoped engines
+
+```js
+DSSL.apply(source, { scope: '#widget' })
+```
+
+gives one subtree its own engine, its own tokens and its own cascade. The playground on the live site is built exactly this way.
+
+## The exit lane (v0.8.0)
+
+The engine is a JS runtime. When a page needs to work without JavaScript, sit
+behind a strict CSP, or paint before any script, build the static subset to a
+real stylesheet:
+
+```sh
+node cli/dssl.mjs check styles.dssl --strict    # CI: the real compiler, exit 1 on errors, --json for machines
+node cli/dssl.mjs build styles.dssl -o styles.css
+```
+
+`build` emits real CSS: tokens become custom properties, states become
+`:hover`, layers become `@layer`, motions become `@keyframes`, `pin` becomes
+`!important`, `raw { }` passes through verbatim, and `seen` applies its final
+state (the graceful no-JS look). The report counts what stays runtime-only
+(`@signal` rules, `animate:`), so the boundary is explicit.
+
+In the browser the same output is `DSSL.toCSS(source)` → `{ css, report }`.
+
+Two more v0.8.0 tools worth knowing: `raw { }` (alias `@css { }`) drops
+verbatim CSS like `@font-face` into the page stylesheet, and
+`font-size: fluid 16 24` compiles to the linear `clamp()` between 360 and
+1200px viewports.
+
+## Files in this package
+
+- `dssl/` the engine. `boot.js` is the entry, `index.js` the public API, `static.js` the build-target compiler.
+- `cli/dssl.mjs` the CLI (`check` + `build`), no dependencies, Node 18+
+- `styles/tokens.dssl` the starter token set (colors, fonts, radii, shadows)
+- `examples/hello.dssl` a tiny starter stylesheet
+- `USAGE.md` this file
+- `LICENSE` MIT
+
+Live site: https://dssl-sable.vercel.app
+Source and full language docs: https://huggingface.co/EHS-Studio/dssl

engine-package/hello.dssl

@@ -0,0 +1,39 @@
+// hello.dssl — a tiny starter stylesheet
+// bare numbers are px, hover is a nested state, /14 at the end of a color is alpha
+
+body {
+  background: #f5f0e4
+  color: #26201a
+  padding: 40
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+}
+
+h1 {
+  color: #7c2d2d
+}
+
+.card {
+  background: #fdfaf2
+  border: 1 solid #ddd2bc
+  radius: 6
+  padding: 24
+  box-shadow: 0 2 6 #26201a/14
+  transition: 200
+
+  hover {
+    box-shadow: 0 6 18 #26201a/16
+  }
+}
+
+button {
+  background: #7c2d2d
+  color: #f9efdd
+  padding: 10 18
+  radius: 6
+  border: 0
+  transition: 200
+
+  hover {
+    background: #5e1f1f
+  }
+}

engine-package/install.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+# DSSL engine installer
+#   curl -fsSL https://dssl-sable.vercel.app/install.sh | sh
+set -e
+BASE="https://dssl-sable.vercel.app"
+ZIP="/tmp/dssl-engine-$$.zip"
+
+command -v curl >/dev/null 2>&1 || { echo "DSSL installer: 'curl' is required."; exit 1; }
+command -v unzip >/dev/null 2>&1 || { echo "DSSL installer: 'unzip' is required."; exit 1; }
+
+echo "fetching the DSSL engine..."
+curl -fsSL "$BASE/dssl-engine.zip" -o "$ZIP"
+rm -rf dssl-engine
+unzip -q "$ZIP" -d .
+rm -f "$ZIP"
+
+echo ""
+echo "DSSL engine installed to ./dssl-engine"
+echo "read dssl-engine/USAGE.md to wire it into a page."

examples/websocket/frontend.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+type User = {
+  id: string;
+  username: string;
+}
+
+type Message = {
+  id: string;
+  username: string;
+  content: string;
+  timestamp: Date | string;
+  type: 'user' | 'system';
+}
+
+export default function SocketDemo() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputMessage, setInputMessage] = useState('');
+  const [username, setUsername] = useState('');
+  const [isUsernameSet, setIsUsernameSet] = useState(false);
+  const [socket, setSocket] = useState<any>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    // Connect to websocket server
+    // Never use PORT in the URL, alyways use XTransformPort
+    // DO NOT change the path, it is used by Caddy to forward the request to the correct port
+    const socketInstance = io('/?XTransformPort=3003', {
+      transports: ['websocket', 'polling'],
+      forceNew: true,
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000,
+      timeout: 10000
+    })
+
+    setSocket(socketInstance);
+
+    socketInstance.on('connect', () => {
+      setIsConnected(true);
+    });
+
+    socketInstance.on('disconnect', () => {
+      setIsConnected(false);
+    });
+
+    socketInstance.on('message', (msg: Message) => {
+      setMessages(prev => [...prev, msg]);
+    });
+
+    socketInstance.on('user-joined', (data: { user: User; message: Message }) => {
+      setMessages(prev => [...prev, data.message]);
+      setUsers(prev => {
+        if (!prev.find(u => u.id === data.user.id)) {
+          return [...prev, data.user];
+        }
+        return prev;
+      });
+    });
+
+    socketInstance.on('user-left', (data: { user: User; message: Message }) => {
+      setMessages(prev => [...prev, data.message]);
+      setUsers(prev => prev.filter(u => u.id !== data.user.id));
+    });
+
+    socketInstance.on('users-list', (data: { users: User[] }) => {
+      setUsers(data.users);
+    });
+
+    return () => {
+      socketInstance.disconnect();
+    };
+  }, []);
+
+  const handleJoin = () => {
+    if (socket && username.trim() && isConnected) {
+      socket.emit('join', { username: username.trim() });
+      setIsUsernameSet(true);
+    }
+  };
+
+  const sendMessage = () => {
+    if (socket && inputMessage.trim() && username.trim()) {
+      socket.emit('message', {
+        content: inputMessage.trim(),
+        username: username.trim()
+      });
+      setInputMessage('');
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      sendMessage();
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4 max-w-2xl">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            WebSocket Demo
+            <span className={`text-sm px-2 py-1 rounded ${isConnected ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+              {isConnected ? 'Connected' : 'Disconnected'}
+            </span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!isUsernameSet ? (
+            <div className="space-y-2">
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    handleJoin();
+                  }
+                }}
+                placeholder="Enter your username..."
+                disabled={!isConnected}
+                className="flex-1"
+              />
+              <Button
+                onClick={handleJoin}
+                disabled={!isConnected || !username.trim()}
+                className="w-full"
+              >
+                Join Chat
+              </Button>
+            </div>
+          ) : (
+            <>
+              <ScrollArea className="h-80 w-full border rounded-md p-4">
+                <div className="space-y-2">
+                  {messages.length === 0 ? (
+                    <p className="text-gray-500 text-center">No messages yet</p>
+                  ) : (
+                    messages.map((msg) => (
+                      <div key={msg.id} className="border-b pb-2 last:border-b-0">
+                        <div className="flex justify-between items-start">
+                          <div className="flex-1">
+                            <p className={`text-sm font-medium ${msg.type === 'system'
+                                ? 'text-blue-600 italic'
+                                : 'text-gray-700'
+                              }`}>
+                              {msg.username}
+                            </p>
+                            <p className={`${msg.type === 'system'
+                                ? 'text-blue-500 italic'
+                                : 'text-gray-900'
+                              }`}>
+                              {msg.content}
+                            </p>
+                          </div>
+                          <span className="text-xs text-gray-500">
+                            {new Date(msg.timestamp).toLocaleTimeString()}
+                          </span>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </ScrollArea>
+
+              <div className="flex space-x-2">
+                <Input
+                  value={inputMessage}
+                  onChange={(e) => setInputMessage(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                  placeholder="Type a message..."
+                  disabled={!isConnected}
+                  className="flex-1"
+                />
+                <Button
+                  onClick={sendMessage}
+                  disabled={!isConnected || !inputMessage.trim()}
+                >
+                  Send
+                </Button>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

examples/websocket/server.ts

@@ -0,0 +1,138 @@
+import { createServer } from 'http'
+import { Server } from 'socket.io'
+
+const httpServer = createServer()
+const io = new Server(httpServer, {
+  // DO NOT change the path, it is used by Caddy to forward the request to the correct port
+  path: '/',
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"]
+  },
+  pingTimeout: 60000,
+  pingInterval: 25000,
+})
+
+interface User {
+  id: string
+  username: string
+}
+
+interface Message {
+  id: string
+  username: string
+  content: string
+  timestamp: Date
+  type: 'user' | 'system'
+}
+
+const users = new Map<string, User>()
+
+const generateMessageId = () => Math.random().toString(36).substr(2, 9)
+
+const createSystemMessage = (content: string): Message => ({
+  id: generateMessageId(),
+  username: 'System',
+  content,
+  timestamp: new Date(),
+  type: 'system'
+})
+
+const createUserMessage = (username: string, content: string): Message => ({
+  id: generateMessageId(),
+  username,
+  content,
+  timestamp: new Date(),
+  type: 'user'
+})
+
+io.on('connection', (socket) => {
+  console.log(`User connected: ${socket.id}`)
+
+  // Add test event handler
+  socket.on('test', (data) => {
+    console.log('Received test message:', data)
+    socket.emit('test-response', { 
+      message: 'Server received test message', 
+      data: data,
+      timestamp: new Date().toISOString()
+    })
+  })
+
+  socket.on('join', (data: { username: string }) => {
+    const { username } = data
+    
+    // Create user object
+    const user: User = {
+      id: socket.id,
+      username
+    }
+    
+    // Add to user list
+    users.set(socket.id, user)
+    
+    // Send join message to all users
+    const joinMessage = createSystemMessage(`${username} joined the chat room`)
+    io.emit('user-joined', { user, message: joinMessage })
+    
+    // Send current user list to new user
+    const usersList = Array.from(users.values())
+    socket.emit('users-list', { users: usersList })
+    
+    console.log(`${username} joined the chat room, current online users: ${users.size}`)
+  })
+
+  socket.on('message', (data: { content: string; username: string }) => {
+    const { content, username } = data
+    const user = users.get(socket.id)
+    
+    if (user && user.username === username) {
+      const message = createUserMessage(username, content)
+      io.emit('message', message)
+      console.log(`${username}: ${content}`)
+    }
+  })
+
+  socket.on('disconnect', () => {
+    const user = users.get(socket.id)
+    
+    if (user) {
+      // Remove from user list
+      users.delete(socket.id)
+      
+      // Send leave message to all users
+      const leaveMessage = createSystemMessage(`${user.username} left the chat room`)
+      io.emit('user-left', { user: { id: socket.id, username: user.username }, message: leaveMessage })
+      
+      console.log(`${user.username} left the chat room, current online users: ${users.size}`)
+    } else {
+      console.log(`User disconnected: ${socket.id}`)
+    }
+  })
+
+  socket.on('error', (error) => {
+    console.error(`Socket error (${socket.id}):`, error)
+  })
+})
+
+const PORT = 3003
+httpServer.listen(PORT, () => {
+  console.log(`WebSocket server running on port ${PORT}`)
+})
+
+// Graceful shutdown
+process.on('SIGTERM', () => {
+  console.log('Received SIGTERM signal, shutting down server...')
+  httpServer.close(() => {
+    console.log('WebSocket server closed')
+    process.exit(0)
+  })
+})
+
+process.on('SIGINT', () => {
+  console.log('Received SIGINT signal, shutting down server...')
+  httpServer.close(() => {
+    console.log('WebSocket server closed')
+    process.exit(0)
+  })
+})

llms.txt

@@ -1,28 +1,28 @@
 # DSSL
 
-> DSSL is a style language for the web. For JS-guaranteed pages it replaces writing CSS; it does not replace the CSS platform (the engine ends in inline styles the browser parses). You write `.dssl` files, the page loads a ~20 kB engine, and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
+> DSSL is a style language for the web. For JS-guaranteed pages it replaces writing CSS; it does not replace the CSS platform. You write `.dssl` files, the page loads a ~20 kB engine, and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS at runtime — but v0.8.0 adds the exit lane: `dssl build` compiles the static subset to a real .css file for no-JS, strict-CSP or size-critical pages. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
 
 - 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.7.2 (engine), MIT license
+- Version: 0.8.0 (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
 
 ## The five things reviewers ask about
 
 1. No build step. Styles are source files linked with `<link rel="stylesheet/dssl">` or embedded in the page as `<style type="text/dssl">` / `<script type="text/dssl">` blocks (auto-booted in document order). The engine restyles the live DOM, including nodes added later.
-2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled. For content pages that must not happen, use prerendering (snapshot the engine's first pass to static HTML; planned, tracked in PARITY.md) or choose another tool. The engine's own docs say this plainly.
+2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled — unless you build the static subset: `dssl build styles.dssl -o styles.css` emits real CSS (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, `raw { }` verbatim, `seen` applied as its no-JS final state) and the report counts what stays runtime-only (`@signal` rules, `animate:`). For content pages that must not flash, use the build output or choose another tool.
 3. Exit cost is zero. Abandoning DSSL leaves you a page of valid inline styles and one small shadow stylesheet for pseudo-elements. There is nothing to un-install from your markup.
 4. Speed has a handbrake. `DSSL.freeze()` detaches every observer and listener after first paint and leaves the resolved look at zero engine cost; `unfreeze()` re-arms. A gate prefilter skips obvious non-matches before native matching. The Bench page on the site measures 100 / 1,000 / 10,000 nodes on your machine: CSS `<style>` vs DSSL live vs DSSL frozen.
 5. The cascade is (layer, source order). No specificity, no !important. Nested state blocks sort after the parent rule's own declarations (v0.7.2 fix: they used to lose), and nested `@media`/`@signal`/`@layer` keep their condition. `pin { }` is the only must-win block. The compiler refuses to guess: unknown tokens, properties and values fail loudly with did-you-mean; `--*` custom properties pass through unvalidated on purpose.
 
-## Language surface (v0.7.2)
+## Language surface (v0.8.0)
 
 - Selectors: the full CSS surface rides native matching, including `:nth-child()`, `:not()`, `:is()`, `:where()`, `:has()`, combinators, attributes, nesting with `&`.
 - States as nested blocks: `hover`, `focus`, `focus-visible`, `active`, `disabled`, `checked`, `empty`, `target`, plus `seen` (fires once on first viewport entry, composes with `stagger:`).
 - Tokens built in: `color.*`, `space.1-8`, `radius.*`, `shadow.*`, `font.*`; custom `tokens { }` blocks with numeric keys (`space { 9: 96 }`), alpha suffixes (`color.ink/85`), per-subtree re-declaration (`--color.accent: color.err`).
-- Layout sugar: `row: gap space.4 between center`, `column:`, `grid: 3 gap 12`, `stack: center`, `center: both` (promotes a formatting context so alignment can never silently no-op), `size: 40 20`.
+- Layout sugar: `row: gap space.4 between center`, `column:`, `grid: 3 gap 12`, `stack: center`, `center: both` (promotes a formatting context so alignment can never silently no-op), `size: 40 20`. v0.8.0 axis roles: distribution words (`between`/`around`/`evenly`) own the main axis, `stretch`/`baseline` own the cross axis, `center`/`start`/`end` fill free axes, and a word with nowhere to go warns instead of overwriting silently.
 - Pseudo-elements (`::before`, `::after`, `::placeholder`, `::selection`, `::marker`, `::backdrop`, `::first-line`, `::first-letter`, vendor ones) compile to one real shadow stylesheet; unknown pseudo names are compile errors.
 - Conditions: `@media` (with `dark`, `light`, `reduced-motion` sugar and `<=` ranges), `@container`, `@signal menuOpen { }` bridged from `DSSL.signal()`, `@layer base|components|utilities`, `pin { }`.
 - Motion: `motion name { from { } to { } }` via WAAPI; `animate: pulse 1600 infinite alternate`; `stagger: 70`; reduced-motion respected unless a motion declares `essential`.
@@ -30,6 +30,9 @@
 - Gradients as sentences: `gradient: linear 135, color.accent -> color.ok`, `gradient-text:`, `gradient-flow: 6s alternate`. Non-color stops are compile errors.
 - Overlap policy: nothing below 100% opacity overlaps anything unless `overlap: allow`; `deny` is unconditional; pairs with `pointer-events: none` so veils stop eating clicks and text selection.
 - Behaviors: named rule groups applied with `use focus-ring`.
+- Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error.
+- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports; `fluid: 16, 24` still works.
+- v0.8.0 review-driven fixes, all regression-tested incl. headless-Chromium computed-style tests of the docs: row/column axis roles (the documented `between center` example laid out wrong before); @font-face no longer crashes the compiler (unknown at-rules skip balanced); @supports inner rules no longer leak unconditionally; `url(...)` is atomic (unquoted form no longer false-errors); `!important` is a loud error that emits nothing; the animation shorthand warns when its motion is undefined instead of suggesting "span"; CSS-order transition values get the exact DSSL conversion in the error hint.
 - v0.7.2 review-driven fixes, all regression-tested: gate prefilter runs before native matches(); hover state events scope candidate recomputation to the touched subtree plus ancestors (was page-wide); checkbox/details states listen to `change`/`toggle`; raw hex alpha (`#ff0000/50` -> color-mix); bare numbers on time properties are ms; `::part()` supported, `::slotted()` rejected with an explanation; SVG properties (`fill`, `stroke*`) and `text-wrap`/`content-visibility` in the vocabulary.
 - Warnings channel (v0.7): things that compile but are probably wrong, e.g. a layout shorthand expanding to `display` and clobbering an earlier explicit `display:` in the same rule.
 
@@ -39,14 +42,24 @@
 DSSL.load(['/styles/site.dssl'])   // fetch + apply, in order
 DSSL.apply(src, { scope, name })   // scoped engines for widgets
 DSSL.compile(src)                  // parse + resolve, no DOM (powers editors)
+DSSL.toCSS(src)                    // v0.8.0: the exit lane -> { css, report }
 DSSL.signal('menuOpen', true)      // the JS -> styles bridge
 DSSL.freeze() / DSSL.unfreeze()    // the speed handbrake
 DSSL.explain(el, { quiet: true })  // matched rules, file/line, winning decls per property
 DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 ```
 
+## CLI (v0.8.0)
+
+```sh
+node cli/dssl.mjs check styles.dssl --strict   # CI: exit 1 on errors, --json for machines
+node cli/dssl.mjs build styles.dssl -o styles.css  # the static subset as real CSS
+```
+
+`check` runs the real compiler with file:line diagnostics and did-you-mean hints. `build` compiles the static subset (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, raw { } verbatim, pin → !important, seen → its no-JS final state) and prints a report of what was emitted and what stays runtime-only.
+
 Wait for the `dssl-ready` event on `window` before measuring layout: the engine styles the DOM after DOMContentLoaded, and scripts that measure earlier read a half-styled world.
 
 ## 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. Install `dssl-vscode/dssl-vscode-0.7.2.vsix` from the repo files; older vsix packages (0.7.1 and below) were packaged before the review-driven fixes and carry the old compiler. 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. Install `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.

public/dssl/engine.js

@@ -173,15 +173,19 @@ export class DsslEngine {
   rebuild() {
     const rules = [];
     const shadowRules = [];
+    const raws = [];
     const bundles = [...this.bundles.values()].sort((a, b) => a.seq - b.seq);
     for (const b of bundles) {
       for (const r of b.rules) {
         rules.push(r); // scoped engines map :root rules onto the scope element
       }
       shadowRules.push(...b.shadowRules);
+      // v0.8.0 — raw { } verbatim CSS rides the same document stylesheet
+      if (b.raws) raws.push(...b.raws);
     }
     this.rules = rules;
     this.shadowRules = shadowRules;
+    this.raws = raws;
 
     // unique media queries → MediaQueryList cache
     for (const r of rules) for (const q of r.media) this.mql(q);
@@ -1311,6 +1315,12 @@ export class DsslEngine {
 
     let css = this.shadowRules.map(cssFor).join('\n\n');
 
+    // v0.8.0 — raw { } blocks: verbatim CSS (@font-face, @keyframes,
+    // @supports, @import…), appended after the pseudo-element rules
+    if (this.raws && this.raws.length) {
+      css += '\n\n' + this.raws.map(r => r.css).join('\n\n');
+    }
+
     if (this.reset) {
       css += `
 

public/dssl/index.js

@@ -16,9 +16,10 @@
 
 import { parse } from './parser.js';
 import { resolve, DEFAULT_TOKENS } from './resolver.js';
+import { toCSS as docToCSS } from './static.js';
 import { DsslEngine } from './engine.js';
 
-export const VERSION = '0.7.2';
+export const VERSION = '0.8.0';
 
 let counter = 0;
 const engines = new Map();
@@ -143,6 +144,18 @@ export async function load(urls, opts = {}) {
   return results;
 }
 
+/** v0.8.0 — the exit lane: compile a DSSL source string to a real CSS
+ *  stylesheet (tokens → custom properties, states → :hover, @media as-is,
+ *  layers → @layer, motions → @keyframes, raw { } verbatim). Returns
+ *  { css, report } — report counts what was emitted and what stays
+ *  engine-only (@signal rules, animate: and friends). */
+export function toCSS(source, opts = {}) {
+  const file = opts.file || 'inline.dssl';
+  const result = compile(source, file);
+  const built = docToCSS(result.doc, { file, banner: opts.banner });
+  return { ...built, ok: result.ok, errors: result.errors, warnings: result.warnings };
+}
+
 export function signal(name, value) { for (const e of engines.values()) e.signal(name, value); }
 export function getSignal(name) { return engines.get('global')?.getSignal(name); }
 export function refresh() { for (const e of engines.values()) e.computeAll(); }
@@ -193,7 +206,7 @@ export function explain(el, opts = {}) {
 }
 
 export const DSSL = {
-  version: VERSION, compile, apply, load, signal, getSignal, refresh, replay, errors,
+  version: VERSION, compile, apply, load, toCSS, signal, getSignal, refresh, replay, errors,
   freeze, unfreeze, explain,
   __debug: { engines },
 };

public/dssl/parser.js

@@ -86,6 +86,20 @@ function splitTop(str, sep) {
   return out;
 }
 
+/** find index of the matching close brace for the '{' just before `from`
+ * (string-aware). Returns -1 when the block is never closed. */
+function matchBrace(str, from) {
+  let depth = 1, q = null;
+  for (let i = from; i < str.length; i++) {
+    const c = str[i];
+    if (q) { if (c === q && str[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; continue; }
+    if (c === '{') depth++;
+    else if (c === '}') { depth--; if (depth === 0) return i; }
+  }
+  return -1;
+}
+
 /** strip comments (respecting strings), newlines preserved so lines survive */
 function stripComments(src) {
   let out = '', q = null;
@@ -134,6 +148,7 @@ export function parse(source, file = 'inline.dssl') {
     const h = header.trim();
     if (h === 'tokens') return { kind: 'tokens' };
     if (h === 'pin') return { kind: 'pin' };
+    if (h === 'raw' || h === '@css') return { kind: 'raw' };
     if (h.startsWith('behavior ')) return { kind: 'behavior', name: h.slice(9).trim() };
     if (h.startsWith('motion ')) return { kind: 'motion', name: h.slice(7).trim() };
     if (h.startsWith('@layer ')) return { kind: 'layer', name: h.slice(7).trim() };
@@ -141,7 +156,13 @@ export function parse(source, file = 'inline.dssl') {
     if (h.startsWith('@container')) return { kind: 'container', query: h.slice(10).trim() };
     if (h.startsWith('@signal ')) return { kind: 'signal', expr: h.slice(8).trim() };
     if (h.startsWith('@')) {
-      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'try @media, @container, @signal or @layer');
+      // v0.8.0 — unknown at-rules are skipped WHOLE (balanced braces). They
+      // used to error and then keep parsing inside their block, so the inner
+      // rules leaked out unconditionally: `@supports (display:grid) { .a { … } }
+      // applied .a everywhere. The block is now dropped in its entirety —
+      // and raw { } is the documented escape hatch for CSS DSSL has no sugar
+      // for yet (@font-face, @keyframes, @supports, @import…).
+      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'the whole block is skipped — for verbatim CSS like @font-face / @keyframes / @supports, wrap it in raw { }');
       return { kind: 'bogus' };
     }
     if (h.startsWith('::')) {
@@ -192,8 +213,9 @@ export function parse(source, file = 'inline.dssl') {
             const meta = classify(realHeader, line);
             const node = { ...meta, line, children: [] };
             stack[stack.length - 1].children.push(node);
-            if (meta.kind !== 'bogus') stack.push(node);
-            rest = rest.slice(open + 1);
+            const after = openBlock(meta, node, rest, open, line);
+            if (after === null) { rest = rest.slice(open + 1); if (meta.kind !== 'bogus') stack.push(node); continue; }
+            rest = after;
             continue;
           }
         }
@@ -201,8 +223,9 @@ export function parse(source, file = 'inline.dssl') {
         const meta = classify(header, line);
         const node = { ...meta, line, children: [] };
         stack[stack.length - 1].children.push(node);
-        if (meta.kind !== 'bogus') stack.push(node);
-        rest = rest.slice(open + 1);
+        const after = openBlock(meta, node, rest, open, line);
+        if (after === null) { rest = rest.slice(open + 1); if (meta.kind !== 'bogus') stack.push(node); continue; }
+        rest = after;
         continue;
       }
 
@@ -211,6 +234,63 @@ export function parse(source, file = 'inline.dssl') {
     }
   };
 
+  /** v0.8.0 — what happens right after a block header opens.
+   *  - raw { } (top level): capture the block body VERBATIM as node.css and
+   *    return the remainder of the chunk — or enter multi-line capture mode
+   *    (returns '' with rawCapture armed).
+   *  - bogus (unknown at-rule / pseudo-element): skip the whole balanced
+   *    block so its content can never leak into the parent.
+   *  - anything else: return null so the caller pushes the node and keeps
+   *    parsing normally. */
+  let rawCapture = null; // { node, depth } while a multi-line raw { } is open
+  const openBlock = (meta, node, rest, open, line) => {
+    if (meta.kind === 'raw') {
+      if (stack.length > 1) {
+        err(line, 'raw { } must be top-level — it drops verbatim CSS into the page stylesheet', 'move it out of the enclosing block');
+        const close = matchBrace(rest, open + 1);
+        return close === -1 ? '' : rest.slice(close + 1);
+      }
+      const close = matchBrace(rest, open + 1);
+      if (close !== -1) {
+        node.css = rest.slice(open + 1, close);
+        return rest.slice(close + 1);
+      }
+      rawCapture = { node, depth: 1 };
+      return '';
+    }
+    if (meta.kind === 'bogus') {
+      const close = matchBrace(rest, open + 1);
+      if (close === -1) {
+        err(line, `the "${(meta.sel || '').slice(0, 30) || 'block'}" block was never closed with "}"`, 'every "{" needs a matching "}"');
+        return '';
+      }
+      return rest.slice(close + 1);
+    }
+    return null;
+  };
+
+  /** consume one source line while a multi-line raw { } is being captured */
+  const feedRawCapture = (raw, line) => {
+    let q = null;
+    for (let i = 0; i < raw.length; i++) {
+      const c = raw[i];
+      if (q) { if (c === q && raw[i - 1] !== '\\') q = null; continue; }
+      if (c === '"' || c === "'") { q = c; continue; }
+      if (c === '{') rawCapture.depth++;
+      else if (c === '}') {
+        rawCapture.depth--;
+        if (rawCapture.depth === 0) {
+          rawCapture.node.css += raw.slice(0, i);
+          const rest = raw.slice(i + 1);
+          rawCapture = null;
+          if (rest.trim()) processChunk(rest, line);
+          return;
+        }
+      }
+    }
+    rawCapture.node.css += raw + '\n';
+  };
+
   const processContent = (content, line) => {
     for (const piece of splitTop(content, ';')) {
       const part = piece.trim();
@@ -284,7 +364,8 @@ export function parse(source, file = 'inline.dssl') {
   lines.forEach((raw, idx) => {
     const line = idx + 1;
     const trimmed = raw.trim();
-    if (!trimmed) return; // blank lines never split a pending chunk
+    if (!trimmed) { if (rawCapture) rawCapture.node.css += raw + '\n'; return; } // blank lines never split a pending chunk
+    if (rawCapture) { feedRawCapture(raw, line); return; }
     const candidate = buf ? buf + ' ' + trimmed : raw;
     if (buf && needsMore(candidate)) { buf = candidate; return; }
     if (buf) { processChunk(candidate, bufLine || line); buf = ''; return; }
@@ -292,6 +373,9 @@ export function parse(source, file = 'inline.dssl') {
     processChunk(candidate, line);
   });
   if (buf.trim()) processChunk(buf, bufLine);
+  if (rawCapture) {
+    err(lines.length, 'the raw { } block was never closed with "}"', 'every "{" needs a matching "}" — the CSS captured so far is discarded');
+  }
 
   if (stack.length > 1) {
     err(lines.length, `${stack.length - 1} block(s) were never closed with "}"`, 'every "{" needs a matching "}"');

public/dssl/resolver.js

@@ -45,6 +45,10 @@ export const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,
   'serif,sans-serif,monospace,cursive,fantasy,system-ui,ui-sans-serif,ui-monospace,ui-serif,ui-rounded,' +
   'system-ui,-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,' +
+  // v0.8.0 — the background repeat/attachment words the url() fix exposed:
+  // `background: url(a.png) no-repeat` was a false error because "no-repeat"
+  // was missing while "repeat" existed
+  '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,stretch,span,' +
   'scaleX,scaleY,translateX,translateY,translate,rotate,skew,skewX,skewY,matrix,' +
@@ -79,6 +83,10 @@ const UNITLESS_PROPS = new Set([
 // why `transition-delay: 200` shipped as invalid unitless 200.
 const TIME_PROPS = new Set([
   'transition-delay', 'transition-duration', 'animation-delay', 'animation-duration',
+  // v0.8.0 — the animation shorthand takes bare numbers as ms too:
+  // `animation: spin 1s infinite` is fine, but `animation: ghost 400` used
+  // to become "ghost 400px" (invalid). 400 → 400ms, matching animate:.
+  'animation',
 ]);
 
 // A practical whitelist of standard CSS properties (loud errors beat silent ones)
@@ -216,6 +224,15 @@ function resolveValue(raw, ctx) {
         }
         const inner = raw.slice(i + 1, j - 1);
         const fname = ident.toLowerCase();
+        // v0.8.0 — url() is atomic. The validator used to tokenize INSIDE it,
+        // so `url(a.png)` raised "unknown value a.png" (quoted urls worked
+        // only because strings were already consumed whole). CSS allows the
+        // unquoted form; DSSL passes it through untouched now.
+        if (fname === 'url') {
+          out += 'url(' + inner.trim() + ')';
+          i = j;
+          continue;
+        }
         // v0.3.2 fix: repeat(COUNT, tracks) — the leading count is an integer,
         // never a length. `repeat(4, 1fr)` used to become `repeat(4px, 1fr)`,
         // which the browser rejected and the whole grid silently collapsed.
@@ -487,7 +504,21 @@ function buildGradient(v, ctx) {
 
 function parseFlexWords(value, ctx, dir) {
   const out = [{ prop: 'display', value: 'flex' }, { prop: 'flex-direction', value: dir }];
+  // v0.8.0 — axis roles. Every place word used to write BOTH axes, so
+  // `row: gap 8 between center` (the guide's own example) compiled to
+  // justify-content: space-between followed by justify-content: center —
+  // and center won, bunching everything in the middle. Words now declare
+  // the axis they are actually about: distribution words (between/around/
+  // evenly) own the main axis, stretch/baseline own the cross axis, and
+  // center/start/end fill whichever axes are still free. A word whose axes
+  // are all taken is a loud warning instead of a silent overwrite.
+  const FLEX_AXIS = {
+    between: 'main', around: 'main', evenly: 'main',
+    stretch: 'cross', baseline: 'cross',
+    center: 'both', start: 'both', end: 'both',
+  };
   const atoms = value.split(/\s+/).filter(Boolean);
+  let mainSet = null, crossSet = null;
   for (let k = 0; k < atoms.length; k++) {
     const a = atoms[k];
     if (a === 'gap') {
@@ -500,9 +531,36 @@ function parseFlexWords(value, ctx, dir) {
     if (a === 'nowrap') { out.push({ prop: 'flex-wrap', value: 'nowrap' }); continue; }
     if (a === 'reverse') { out[1].value = dir + '-reverse'; continue; }
     if (a === 'inline') { out[0].value = 'inline-flex'; continue; }
-    if (PLACE_WORDS[a]) {
-      out.push({ prop: 'align-items', value: PLACE_WORDS[a][0] });
-      out.push({ prop: 'justify-content', value: PLACE_WORDS[a][1] });
+    if (FLEX_AXIS[a]) {
+      const role = FLEX_AXIS[a];
+      const pc = PLACE_WORDS[a]; // [cross, main]
+      const axisWarn = (prop, prev) => {
+        ctx.warnings = ctx.warnings || [];
+        ctx.warnings.push(prev === a
+          ? { file: ctx.file, line: ctx.line, message: `"${a}" is written twice in ${dir} — the second copy wins`, hint: `drop the duplicate; one distribution word + one alignment word is the whole grammar` }
+          : { file: ctx.file, line: ctx.line, message: `two words in ${dir} write ${prop}: "${a}" overrides "${prev}"`, hint: `later words win — drop one, or reorder so the distribution word comes first` });
+      };
+      let wrote = false;
+      if (role === 'main' || (role === 'both' && !mainSet)) {
+        if (mainSet) axisWarn('justify-content', mainSet);
+        out.push({ prop: 'justify-content', value: pc[1] });
+        mainSet = a; wrote = true;
+      }
+      if (role === 'cross' || (role === 'both' && !crossSet)) {
+        if (crossSet) axisWarn('align-items', crossSet);
+        out.push({ prop: 'align-items', value: pc[0] });
+        crossSet = a; wrote = true;
+      }
+      if (!wrote) {
+        ctx.warnings = ctx.warnings || [];
+        ctx.warnings.push({
+          file: ctx.file, line: ctx.line,
+          message: mainSet === a || crossSet === a
+            ? `"${a}" is written twice in ${dir} — both axes already came from it`
+            : `"${a}" has nowhere to go: justify-content came from "${mainSet}", align-items came from "${crossSet}"`,
+          hint: 'one distribution word + one alignment word is the whole grammar — the extra word is dropped',
+        });
+      }
       continue;
     }
     ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown word "${a}" in ${dir}`, hint: didYouMean(a, ['gap', 'center', 'start', 'end', 'between', 'around', 'evenly', 'stretch', 'baseline', 'wrap', 'nowrap', 'reverse', 'inline']) });
@@ -613,17 +671,7 @@ const SEMANTIC = {
     return out;
   },
   fluid(v, ctx) {
-    const parts = v.split(',').map(s => s.trim());
-    const px = (s) => {
-      const m = String(s).match(/^([0-9.]+)\s*(px|rem|em|%)?$/);
-      if (!m) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" is not a size` }); return '0px'; }
-      return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
-    };
-    const min = px(parts[0]); const max = px(parts[1]);
-    const vmin = px(parts[2] || '360'); const vmax = px(parts[3] || '1200');
-    const mv = parseFloat(min), xv = parseFloat(max);
-    const slope = ((xv - mv) / (parseFloat(vmax) - parseFloat(vmin))) * 100;
-    return [{ prop: 'font-size', value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+    return buildFluidParts(v.split(',').map(s => s.trim()).filter(Boolean), ctx);
   },
   shadow(v, ctx) {
     const t = v.trim();
@@ -697,6 +745,22 @@ const SEMANTIC = {
       const atoms = part.split(/\s+/);
       const dur = atoms[0];
       if (!/^\d*\.?\d+(ms|s)?$/.test(dur)) {
+        // v0.8.0 — the CSS habit is property-first (`transition: color .2s
+        // ease`). That used to be a generic "not a time" error and the part
+        // silently dropped. The error now REWRITES the value into the DSSL
+        // order (time · easing · property) so the fix is a copy-paste.
+        const timeAtom = atoms.find(a => /^\d*\.?\d+(ms|s)?$/.test(a));
+        const easeAtom = atoms.find(a => EASINGS[a]);
+        const propAtom = atoms.find(a => a !== timeAtom && a !== easeAtom && (KNOWN_PROPS.has(a) || DEFORM_TO_TRANSFORM[a]));
+        if (timeAtom) {
+          const msOut = /^\d+$/.test(timeAtom) ? timeAtom : /ms$/.test(timeAtom) ? timeAtom.replace(/ms$/, '') : String(parseFloat(timeAtom) * 1000);
+          ctx.errors.push({
+            file: ctx.file, line: ctx.line,
+            message: `transition: the CSS form (property first) is not DSSL`,
+            hint: `write  transition: ${msOut}${easeAtom ? ' ' + easeAtom : ''}${propAtom ? ' ' + propAtom : ''}  — time first, easing, property last`,
+          });
+          continue;
+        }
         ctx.errors.push({ file: ctx.file, line: ctx.line, message: `transition duration "${dur}" is not a time`, hint: 'order is duration · easing · property — try 200 or 0.2s' });
         continue;
       }
@@ -876,13 +940,51 @@ const SEMANTIC = {
   },
 };
 
+/* v0.8.0 — fluid sizing sugar. `fluid: 16, 24` keeps working (font-size),
+ * and now any length-ish property takes it inline: `font-size: fluid 16 24`.
+ * Both compile to a clamp() that scales linearly between the viewport bounds
+ * (360px and 1200px by default) — the formula everyone writes by hand and
+ * gets wrong. */
+const FLUID_PROPS = new Set(('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').split(','));
+
+function buildFluidParts(parts, ctx, prop = 'font-size') {
+  const px = (s) => {
+    const m = String(s).match(/^([0-9.]+)\s*(px|rem|em|%)?$/);
+    if (!m) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" is not a size`, hint: 'fluid takes two sizes and optionally the viewport bounds — fluid 16 24, or fluid 16 24 360 1200' });
+      return '0px';
+    }
+    return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
+  };
+  const min = px(parts[0]); const max = px(parts[1]);
+  const vmin = px(parts[2] || '360'); const vmax = px(parts[3] || '1200');
+  const mv = parseFloat(min), xv = parseFloat(max);
+  const slope = ((xv - mv) / (parseFloat(vmax) - parseFloat(vmin))) * 100;
+  return [{ prop, value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+}
+
 /* ------------------------------------------------------------------ *
  * resolveDecl — one declaration → zero or more engine decls
  * ------------------------------------------------------------------ */
 
 function resolveDecl(prop, value, ctx) {
   const errors = ctx.errors;
-  const ctx2 = { ...ctx, prop, errors };
+  const ctx2 = { ...ctx, prop, errors, warnings: ctx.warnings };
+
+  // v0.8.0 — !important does not exist in DSSL. It used to fall through as a
+  // value: the compiler said "unknown value important" AND still emitted
+  // `red !important`, which the browser then silently dropped as an invalid
+  // inline value. Now: one loud error, nothing emitted, and the pin { }
+  // answer to the actual question.
+  if (hasImportant(value)) {
+    errors.push({
+      file: ctx.file, line: ctx.line,
+      message: `!important does not exist in DSSL — "${prop}: ${String(value).replace(/\s*!\s*important\s*/i, '')}" was NOT applied`,
+      hint: 'the cascade is (layer, order) and later wins — put the rule in pin { } when it genuinely must win',
+    });
+    return [];
+  }
 
   if (prop.startsWith('--')) {
     // v0.4.0 — scoped tokens. Dotted names are token re-declarations:
@@ -899,6 +1001,22 @@ function resolveDecl(prop, value, ctx) {
   const sem = SEMANTIC[prop];
   if (sem) return sem(value, ctx2);
 
+  // v0.8.0 — the animation shorthand passes through (it is legal CSS), but
+  // bare motion names must not pay the generic unknown-value tax: "spin"
+  // used to error with the surreal suggestion "did you mean span?". Motion
+  // names pass silently here and a dedicated warning in the final loop says
+  // the DSSL way (motion + animate) when the name matches nothing.
+  if (prop === 'animation' || prop === 'animation-name') {
+    return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: true }) }];
+  }
+
+  // v0.8.0 — inline fluid sugar on any length-ish property:
+  // font-size: fluid 16 24  →  clamp(16px, calc(16px + 0.952vw), 24px)
+  const fluidM = /^fluid\s+([\s\S]+)$/.exec(String(value).trim());
+  if (fluidM && FLUID_PROPS.has(prop)) {
+    return buildFluidParts(fluidM[1].split(/[\s,]+/).filter(Boolean), ctx2, prop);
+  }
+
   if (!KNOWN_PROPS.has(prop)) {
     errors.push({
       file: ctx.file, line: ctx.line,
@@ -910,6 +1028,19 @@ function resolveDecl(prop, value, ctx) {
   return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' }) }];
 }
 
+/** string-aware !important scan — quoted content: "!important" must not trip it */
+function hasImportant(v) {
+  const s = String(v);
+  let q = null;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (q) { if (c === q && s[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; continue; }
+    if (c === '!' && /\s*important/i.test(s.slice(i + 1))) return true;
+  }
+  return false;
+}
+
 /* ------------------------------------------------------------------ *
  * Media / container / signal normalization
  * ------------------------------------------------------------------ */
@@ -960,6 +1091,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   const errors = [];
   const rules = [];
   const shadowRules = [];
+  const raws = []; // v0.8.0 — raw { } / @css { } verbatim passthrough blocks
   const motions = {};
   const behaviors = {};
   // v0.7.0 — compile-time warnings: things that compile and run but are
@@ -999,7 +1131,10 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       } else if (node.kind === 'motion') {
         motions[node.name] = node;
       } else {
-        for (const child of node.children) if (child.kind !== 'decl') prepass([child]);
+        // v0.8.0 — defensive `|| []`: a malformed tree can throw from here
+        // and take the whole stylesheet down (the @font-face crash report).
+        // The parser now skips unknown at-rules whole, but the guard stays.
+        for (const child of (node.children || [])) if (child.kind !== 'decl') prepass([child]);
       }
     }
   };
@@ -1018,7 +1153,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       const m = label.match(/^at\s+([0-9.]+)\s*%?$/);
       return m ? parseFloat(m[1]) : null;
     };
-    const ctxBase = { file, line: node.line, errors, tokens: tokenMap, tokenNames: [...tokenMap.keys()], prop: 'motion', unitless: false };
+    const ctxBase = { file, line: node.line, errors, warnings, tokens: tokenMap, tokenNames: [...tokenMap.keys()], prop: 'motion', unitless: false };
     for (const child of node.children) {
       if (child.kind === 'decl' && child.prop === 'essential') {
         node._parsed.essential = child.value === '' || child.value === 'true';
@@ -1075,7 +1210,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
 
   const resolveTokenDecls = (keys, conds) => {
     const decls = [];
-    const ctxBase = { file, line: 0, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: 'token', unitless: false };
+    const ctxBase = { file, line: 0, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: 'token', unitless: false };
     for (const key of keys) {
       const raw = tokenMap.get(key);
       const prop = '--dssl-' + key.replace(/\./g, '-');
@@ -1130,7 +1265,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
             bh._active = false;
             break;
           }
-          const resolved = resolveDecl(node.prop, node.value, { file, line: node.line, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: node.prop, unitless: false });
+          const resolved = resolveDecl(node.prop, node.value, { file, line: node.line, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: node.prop, unitless: false });
           for (const r of resolved) {
             // v0.7.0 — remember WHICH source property wrote a display value,
             // so the ordering linter can tell an explicit "display:" from a
@@ -1223,7 +1358,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           for (const d of node.children) {
             if (d.kind !== 'decl') { errors.push({ file, line: d.line, message: 'only declarations may appear inside a pseudo-element block (v0.2)' }); continue; }
             if (d.prop === 'content' && d.value === '') { srule.decls.push({ prop: 'content', value: '""', line: d.line }); continue; }
-            const resolved = resolveDecl(d.prop, d.value, { file, line: d.line, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: d.prop, unitless: false });
+            const resolved = resolveDecl(d.prop, d.value, { file, line: d.line, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: d.prop, unitless: false });
             // v0.5.0 — engine-native properties have no pseudo-element story:
             // there is no DOM handle to nudge, animate, stack or stagger. They
             // used to leak into the shadow sheet as junk CSS the browser
@@ -1249,6 +1384,14 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           if (tr) rules.push(tr);
           break;
         }
+        case 'raw': {
+          // v0.8.0 — verbatim CSS escape hatch (@font-face, @keyframes,
+          // @supports, @import, @property…). The parser captured the body
+          // untouched; it rides the same document stylesheet as the
+          // pseudo-element rules and survives `dssl build` verbatim.
+          if ((node.css || '').trim()) raws.push({ css: node.css.trim(), file, line: node.line, order: order++ });
+          break;
+        }
         case 'behavior':
         case 'motion':
           if (ctx.depth) errors.push({ file, line: node.line, message: `${node.kind} "${node.name}" must be top-level` });
@@ -1366,7 +1509,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   flush(rootRule, topCtx, 0);
 
   // parse all motions that were referenced
-  for (const r of rules) {
+  for (const r of [...rules, ...shadowRules]) {
     for (const d of r.decls) {
       if (d.prop === '@animate' && d.value && d.value.motion) {
         const m = parseMotion(d.value.motion);
@@ -1374,7 +1517,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           errors.push({
             file, line: d.line,
             message: `unknown motion "${d.value.motion}"`,
-            hint: didYouMean(d.value.motion, Object.keys(motions)),
+            hint: didYouMean(d.value.motion, Object.keys(motions)) || `define it first:  motion ${d.value.motion} { from { } to { } }  — then "animate: ${d.value.motion} 400" runs it`,
           });
           d.value.broken = true;
         } else {
@@ -1382,13 +1525,36 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           d.value.essential = m.essential;
         }
       }
+      // v0.8.0 — the animation shorthand is CSS passthrough, so a motion
+      // name that matches nothing used to be a SILENT no-op (no @keyframes
+      // can exist in DSSL). Warn with the whole story; if the keyframes come
+      // from raw { } or another stylesheet, the warning says it can be ignored.
+      if ((d.prop === 'animation' || d.prop === 'animation-name') && typeof d.value === 'string') {
+        const words = d.value.split(/[\s,]+/).filter(w => /^[A-Za-z][\w-]*$/.test(w));
+        const named = words.find(w => motions[w]);
+        if (words.length && !named) {
+          warnings.push({
+            file, line: d.line,
+            message: `animation "${d.value}" references no motion defined in this sheet — it will not run`,
+            hint: `motions are defined with  motion name { from { } to { } }  and run with  animate: name 400  — @keyframes does not exist in DSSL; raw { } can carry verbatim keyframes`,
+          });
+        }
+      }
     }
   }
 
+  // v0.8.0 — pre-parse EVERY motion (not just referenced ones) so the static
+  // emitter can turn the whole motion vocabulary into real @keyframes.
+  const motionFrames = {};
+  for (const name of Object.keys(motions)) {
+    const m = parseMotion(name);
+    if (m && m.frames.length) motionFrames[name] = m;
+  }
+
   const mediaQueries = new Set();
   for (const r of [...rules, ...shadowRules]) r.media.forEach(q => mediaQueries.add(q));
 
-  return { rules, shadowRules, motions, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
+  return { rules, shadowRules, raws, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
 }
 
 /** naive `&` substitution + descendant join */

public/dssl/static.js

@@ -0,0 +1,133 @@
+/* =========================================================================
+ * DSSL — static.js — the exit lane
+ *
+ * toCSS(doc) compiles a resolved document into a real CSS stylesheet:
+ *   tokens      → :root custom properties (inside @layer tokens)
+ *   states      → native pseudo-classes (:hover, :focus-visible, …)
+ *   @media      → as-is          ·   @container → as-is
+ *   layers      → native @layer (tokens < base < components < utilities < pin)
+ *   pin { }     → !important (the one must-win block, same as the engine)
+ *   motions     → @keyframes (so `animation: name` shorthand works too)
+ *   raw { }     → verbatim
+ *   ::before …  → shadow-rule output, as-is
+ *   seen        → applied unconditionally (graceful no-JS state)
+ *
+ * What stays engine-only (skipped, and counted in the report):
+ *   @signal rules (the JS bridge), `animate:`/engine-native properties
+ *   (WAAPI lives in the runtime).
+ *
+ * The point: the SAME source can ship as a .css file when a page needs
+ * no-JS, a strict CSP, first-paint-before-JS, or 4.5x smaller HTML.
+ * ========================================================================= */
+
+const LAYER_RANK = { tokens: 0, base: 1, components: 2, utilities: 3, pin: 4 };
+const LAYER_NAMES = ['tokens', 'base', 'components', 'utilities', 'pin'];
+
+const kebab = (p) => p.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+const declLine = (d, pin) => {
+  const value = pin && !/^--/.test(d.prop) ? d.value + ' !important' : d.value;
+  return `  ${d.prop}: ${value};`;
+};
+
+const isEngineProp = (p) => p && p.startsWith('@');
+
+function emitRule(r, { pin = false, pseudo = null } = {}) {
+  let sel = r.sel;
+  if (pseudo) sel = sel + '::' + pseudo;
+  let out = `${sel} {\n${r.decls.map(d => declLine(d, pin)).join('\n')}\n}`;
+  for (const q of [...(r.containers || [])].reverse()) out = `@container ${q} {\n${out}\n}`;
+  for (const q of [...(r.media || [])].reverse()) out = `@media ${q} {\n${out}\n}`;
+  return out;
+}
+
+/** split one rule into { static, engineProps } — static decls survive */
+function splitDecls(decls) {
+  const keep = [];
+  let engineProps = 0;
+  for (const d of decls) {
+    if (isEngineProp(d.prop)) { engineProps++; continue; }
+    keep.push(d);
+  }
+  return { keep, engineProps };
+}
+
+export function toCSS(doc, opts = {}) {
+  const file = opts.file || 'styles.dssl';
+  const report = {
+    file,
+    rules: 0, shadowRules: 0, keyframes: 0, raws: 0,
+    skippedSignals: 0, skippedEngine: 0, seenStripped: 0,
+    layers: [],
+  };
+
+  const chunks = [];
+  const header = opts.banner !== false
+    ? `/* generated by dssl build from ${file} — the static subset of DSSL v0.8.0.\n   @signal rules and animate:/engine-native properties stay in the runtime. */\n`
+    : '';
+  let out = header;
+
+  const allRules = [...(doc.registryRule ? [doc.registryRule] : []), ...(doc.rules || [])];
+
+  // ---- keyframes from motions (name kept, so `animation: name` works) ----
+  const motionFrames = doc.motionFrames || {};
+  for (const [name, m] of Object.entries(motionFrames)) {
+    const frames = m.frames.map(f => {
+      const off = f.offset === 0 ? '0%' : f.offset === 100 ? '100%' : `${f.offset}%`;
+      const body = Object.entries(f.props).map(([p, v]) => `  ${kebab(p)}: ${v};`).join('\n');
+      return `${off} {\n${body}\n}`;
+    });
+    if (frames.length) {
+      chunks.push({ layer: null, css: `@keyframes ${name} {\n${frames.join('\n')}\n}` });
+      report.keyframes++;
+    }
+  }
+
+  // ---- regular rules ----
+  for (const r of allRules) {
+    if (r.signals && r.signals.length) { report.skippedSignals++; continue; }
+    const { keep, engineProps } = splitDecls(r.decls || []);
+    if (!keep.length) { if (engineProps) report.skippedEngine++; continue; }
+    const rule = { ...r, decls: keep };
+    // seen → the no-JS graceful state: apply the final style unconditionally
+    if (/:seen\b/.test(rule.sel)) {
+      rule.sel = rule.sel.replace(/:seen\b/g, '').replace(/\s{2,}/g, ' ').trim();
+      report.seenStripped++;
+      if (!rule.sel) rule.sel = '*';
+    }
+    const pin = rule.layer === 'pin';
+    chunks.push({ layer: rule.layer, css: emitRule(rule, { pin }), order: rule.order });
+    report.rules++;
+  }
+
+  // ---- pseudo-element rules (the shadow-CSS lane, native in a build) ----
+  for (const r of doc.shadowRules || []) {
+    if (r.signals && r.signals.length) { report.skippedSignals++; continue; }
+    const { keep, engineProps } = splitDecls(r.decls || []);
+    if (!keep.length) { if (engineProps) report.skippedEngine++; continue; }
+    chunks.push({ layer: r.layer, css: emitRule({ ...r, decls: keep }, { pin: r.layer === 'pin', pseudo: r.pseudo }), order: r.order });
+    report.shadowRules++;
+  }
+
+  // ---- layers: emit the order statement once, then group ----
+  const usedLayers = [...new Set(chunks.map(c => c.layer).filter(Boolean))]
+    .sort((a, b) => (LAYER_RANK[a] ?? 2) - (LAYER_RANK[b] ?? 2));
+  if (usedLayers.length) {
+    report.layers = usedLayers;
+    out += `@layer ${LAYER_NAMES.join(', ')};\n\n`;
+    for (const layer of usedLayers) {
+      const inLayer = chunks.filter(c => c.layer === layer).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+      out += `@layer ${layer} {\n${inLayer.map(c => c.css).join('\n\n')}\n}\n\n`;
+    }
+  }
+  for (const c of chunks.filter(x => x.layer === null)) out += c.css + '\n\n';
+
+  // ---- raw { } verbatim ----
+  for (const r of doc.raws || []) {
+    if (!r.css) continue;
+    out += `/* raw @ ${r.file || file}:${r.line} */\n` + r.css + '\n\n';
+    report.raws++;
+  }
+
+  return { css: out.trimEnd() + '\n', report };
+}

public/llms.txt

@@ -1,28 +1,28 @@
 # DSSL
 
-> DSSL is a style language for the web that replaces CSS. You write `.dssl` files, the page loads a ~20 kB engine, and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
+> DSSL is a style language for the web. For JS-guaranteed pages it replaces writing CSS; it does not replace the CSS platform. You write `.dssl` files, the page loads a ~20 kB engine, and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS at runtime — but v0.8.0 adds the exit lane: `dssl build` compiles the static subset to a real .css file for no-JS, strict-CSP or size-critical pages. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
 
 - 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.7.1 (engine), MIT license
+- Version: 0.8.0 (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
 
 ## The five things reviewers ask about
 
-1. No build step. Styles are source files linked with `<link rel="stylesheet/dssl">`. The engine auto-boots and restyles the live DOM, including nodes added later.
-2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled. For content pages that must not happen, use prerendering (snapshot the engine's first pass to static HTML; planned, tracked in PARITY.md) or choose another tool. The engine's own docs say this plainly.
+1. No build step. Styles are source files linked with `<link rel="stylesheet/dssl">` or embedded in the page as `<style type="text/dssl">` / `<script type="text/dssl">` blocks (auto-booted in document order). The engine restyles the live DOM, including nodes added later.
+2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled — unless you build the static subset: `dssl build styles.dssl -o styles.css` emits real CSS (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, `raw { }` verbatim, `seen` applied as its no-JS final state) and the report counts what stays runtime-only (`@signal` rules, `animate:`). For content pages that must not flash, use the build output or choose another tool.
 3. Exit cost is zero. Abandoning DSSL leaves you a page of valid inline styles and one small shadow stylesheet for pseudo-elements. There is nothing to un-install from your markup.
 4. Speed has a handbrake. `DSSL.freeze()` detaches every observer and listener after first paint and leaves the resolved look at zero engine cost; `unfreeze()` re-arms. A gate prefilter skips obvious non-matches before native matching. The Bench page on the site measures 100 / 1,000 / 10,000 nodes on your machine: CSS `<style>` vs DSSL live vs DSSL frozen.
-5. The cascade is (layer, source order). No specificity, no !important. `pin { }` is the only must-win block. The compiler refuses to guess: unknown tokens, properties and values fail loudly with did-you-mean; `--*` custom properties pass through unvalidated on purpose.
+5. The cascade is (layer, source order). No specificity, no !important. Nested state blocks sort after the parent rule's own declarations (v0.7.2 fix: they used to lose), and nested `@media`/`@signal`/`@layer` keep their condition. `pin { }` is the only must-win block. The compiler refuses to guess: unknown tokens, properties and values fail loudly with did-you-mean; `--*` custom properties pass through unvalidated on purpose.
 
-## Language surface (v0.7.1)
+## Language surface (v0.8.0)
 
 - Selectors: the full CSS surface rides native matching, including `:nth-child()`, `:not()`, `:is()`, `:where()`, `:has()`, combinators, attributes, nesting with `&`.
 - States as nested blocks: `hover`, `focus`, `focus-visible`, `active`, `disabled`, `checked`, `empty`, `target`, plus `seen` (fires once on first viewport entry, composes with `stagger:`).
 - Tokens built in: `color.*`, `space.1-8`, `radius.*`, `shadow.*`, `font.*`; custom `tokens { }` blocks with numeric keys (`space { 9: 96 }`), alpha suffixes (`color.ink/85`), per-subtree re-declaration (`--color.accent: color.err`).
-- Layout sugar: `row: gap space.4 between center`, `column:`, `grid: 3 gap 12`, `stack: center`, `center: both` (promotes a formatting context so alignment can never silently no-op), `size: 40 20`.
+- Layout sugar: `row: gap space.4 between center`, `column:`, `grid: 3 gap 12`, `stack: center`, `center: both` (promotes a formatting context so alignment can never silently no-op), `size: 40 20`. v0.8.0 axis roles: distribution words (`between`/`around`/`evenly`) own the main axis, `stretch`/`baseline` own the cross axis, `center`/`start`/`end` fill free axes, and a word with nowhere to go warns instead of overwriting silently.
 - Pseudo-elements (`::before`, `::after`, `::placeholder`, `::selection`, `::marker`, `::backdrop`, `::first-line`, `::first-letter`, vendor ones) compile to one real shadow stylesheet; unknown pseudo names are compile errors.
 - Conditions: `@media` (with `dark`, `light`, `reduced-motion` sugar and `<=` ranges), `@container`, `@signal menuOpen { }` bridged from `DSSL.signal()`, `@layer base|components|utilities`, `pin { }`.
 - Motion: `motion name { from { } to { } }` via WAAPI; `animate: pulse 1600 infinite alternate`; `stagger: 70`; reduced-motion respected unless a motion declares `essential`.
@@ -30,6 +30,10 @@
 - Gradients as sentences: `gradient: linear 135, color.accent -> color.ok`, `gradient-text:`, `gradient-flow: 6s alternate`. Non-color stops are compile errors.
 - Overlap policy: nothing below 100% opacity overlaps anything unless `overlap: allow`; `deny` is unconditional; pairs with `pointer-events: none` so veils stop eating clicks and text selection.
 - Behaviors: named rule groups applied with `use focus-ring`.
+- Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error.
+- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports; `fluid: 16, 24` still works.
+- v0.8.0 review-driven fixes, all regression-tested incl. headless-Chromium computed-style tests of the docs: row/column axis roles (the documented `between center` example laid out wrong before); @font-face no longer crashes the compiler (unknown at-rules skip balanced); @supports inner rules no longer leak unconditionally; `url(...)` is atomic (unquoted form no longer false-errors); `!important` is a loud error that emits nothing; the animation shorthand warns when its motion is undefined instead of suggesting "span"; CSS-order transition values get the exact DSSL conversion in the error hint.
+- v0.7.2 review-driven fixes, all regression-tested: gate prefilter runs before native matches(); hover state events scope candidate recomputation to the touched subtree plus ancestors (was page-wide); checkbox/details states listen to `change`/`toggle`; raw hex alpha (`#ff0000/50` -> color-mix); bare numbers on time properties are ms; `::part()` supported, `::slotted()` rejected with an explanation; SVG properties (`fill`, `stroke*`) and `text-wrap`/`content-visibility` in the vocabulary.
 - Warnings channel (v0.7): things that compile but are probably wrong, e.g. a layout shorthand expanding to `display` and clobbering an earlier explicit `display:` in the same rule.
 
 ## JS API
@@ -38,14 +42,24 @@
 DSSL.load(['/styles/site.dssl'])   // fetch + apply, in order
 DSSL.apply(src, { scope, name })   // scoped engines for widgets
 DSSL.compile(src)                  // parse + resolve, no DOM (powers editors)
+DSSL.toCSS(src)                    // v0.8.0: the exit lane -> { css, report }
 DSSL.signal('menuOpen', true)      // the JS -> styles bridge
 DSSL.freeze() / DSSL.unfreeze()    // the speed handbrake
 DSSL.explain(el, { quiet: true })  // matched rules, file/line, winning decls per property
 DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 ```
 
+## CLI (v0.8.0)
+
+```sh
+node cli/dssl.mjs check styles.dssl --strict   # CI: exit 1 on errors, --json for machines
+node cli/dssl.mjs build styles.dssl -o styles.css  # the static subset as real CSS
+```
+
+`check` runs the real compiler with file:line diagnostics and did-you-mean hints. `build` compiles the static subset (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, raw { } verbatim, pin → !important, seen → its no-JS final state) and prints a report of what was emitted and what stays runtime-only.
+
 Wait for the `dssl-ready` event on `window` before measuring layout: the engine styles the DOM after DOMContentLoaded, and scripts that measure earlier read a half-styled world.
 
 ## 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. 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. Install `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.

public/styles/site.dssl

@@ -118,7 +118,8 @@ select { use focus-ring }
 [data-view="cheat"] .nl-cheat,
 [data-view="spec"] .nl-spec,
 [data-view="playground"] .nl-playground,
-[data-view="changelog"] .nl-changelog {
+[data-view="changelog"] .nl-changelog,
+[data-view="bench"] .nl-bench {
   color: color.accent
   border-bottom-color: color.accent
 }

scripts/build-engine-package.sh

@@ -6,10 +6,11 @@ ROOT=/home/z/my-project
 STAGE=$(mktemp -d)
 trap 'rm -rf "$STAGE"' EXIT
 
-mkdir -p "$STAGE/dssl-engine/dssl" "$STAGE/dssl-engine/styles" "$STAGE/dssl-engine/examples"
+mkdir -p "$STAGE/dssl-engine/dssl" "$STAGE/dssl-engine/styles" "$STAGE/dssl-engine/examples" "$STAGE/dssl-engine/cli"
 cp "$ROOT"/public/dssl/boot.js "$ROOT"/public/dssl/index.js "$ROOT"/public/dssl/engine.js \
-   "$ROOT"/public/dssl/parser.js "$ROOT"/public/dssl/resolver.js "$ROOT"/public/dssl/utils.js \
+   "$ROOT"/public/dssl/parser.js "$ROOT"/public/dssl/resolver.js "$ROOT"/public/dssl/static.js "$ROOT"/public/dssl/utils.js \
    "$STAGE/dssl-engine/dssl/"
+cp "$ROOT/cli/dssl.mjs" "$STAGE/dssl-engine/cli/"
 cp "$ROOT/public/styles/tokens.dssl" "$STAGE/dssl-engine/styles/"
 cp "$ROOT/engine-package/USAGE.md" "$ROOT/engine-package/install.sh" "$STAGE/dssl-engine/"
 cp "$ROOT/engine-package/hello.dssl" "$STAGE/dssl-engine/examples/hello.dssl"

scripts/repro-v073.mjs

@@ -0,0 +1,91 @@
+/* repro-v073.mjs — reproduce every claim from the 2026-10-23 Claude review
+ * of v0.7.2 before touching any code. Green = the bug exists as reported. */
+import { parse, STATE_WORDS } from '../public/dssl/parser.js';
+import { resolve } from '../public/dssl/resolver.js';
+
+const compileDoc = (src, file = 'repro.dssl') => {
+  const { ast, errors } = parse(src, file);
+  const doc = resolve(ast, file);
+  return { parseErrors: errors, doc };
+};
+
+let found = 0;
+const repro = (name, cond) => {
+  if (cond) { found++; console.log(`REPRODUCED  ${name}`); }
+  else console.log(`not repro'd  ${name}`);
+};
+
+// --- bug 1: row: gap 8 between center loses "between" --------------------
+{
+  const { doc } = compileDoc('toolbar { row: gap 8 between center }');
+  const decls = doc.rules[0]?.decls || [];
+  const jc = decls.filter(d => d.prop === 'justify-content');
+  const ai = decls.filter(d => d.prop === 'align-items');
+  console.log('  decls:', decls.map(d => `${d.prop}:${d.value}`).join(' | '));
+  repro('bug1: justify-content written twice (last wins = center)', jc.length === 2 && jc[1].value === 'center');
+  repro('bug1: bare center also writes align-items (both axes)', ai.length === 1);
+}
+
+// --- bug 2: @font-face crashes the compiler -------------------------------
+{
+  let threw = null, out = '';
+  try {
+    const r = compileDoc('@font-face { font-family: X; src: url(x.woff2) }');
+    out = JSON.stringify(r.doc.rules || []);
+  } catch (e) { threw = e; }
+  repro('bug2: @font-face THROWS instead of compile error', !!threw);
+  if (threw) console.log('  throw:', threw.message);
+}
+
+// --- bug 3: @supports leaks inner rule unconditionally --------------------
+{
+  const { parseErrors, doc } = compileDoc('@supports (display:grid) { .a { display: grid } }');
+  const leaked = (doc.rules || []).some(r => (r.sel || '').includes('a'));
+  const atErr = parseErrors.some(e => /@supports/.test(e.message));
+  console.log('  parse errors:', parseErrors.map(e => e.message).join(' ; ').slice(0, 120));
+  repro('bug3: unknown at-rule errors reported', atErr);
+  repro('bug3: inner rule STILL APPLIES unconditionally', leaked);
+}
+
+// --- bug 4: unquoted url() gives false errors ------------------------------
+{
+  const { parseErrors, doc } = compileDoc('.a { background: url(a.png) no-repeat }');
+  const msgs = parseErrors.map(e => e.message).join(' ; ');
+  const badValue = /unknown value "(a\.png|no-repeat)"/.test(msgs);
+  const emitted = (doc.rules[0]?.decls || []).some(d => /url\(a\.png\)/.test(d.value));
+  console.log('  errors:', msgs.slice(0, 140) || '(none)');
+  repro('bug4: false unknown-value errors for unquoted url parts', badValue);
+  repro('bug4: declaration still emitted (error + emit confusion)', emitted);
+  // control: quoted form is fine
+  const q = compileDoc('.a { background: url("a.png") no-repeat }');
+  console.log('  quoted errors:', q.parseErrors.map(e => e.message).join(';').slice(0, 100) || '(none)');
+}
+
+// --- bug 5a: animation: spin 1s infinite -> did you mean "span" -----------
+{
+  const { parseErrors } = compileDoc('.a { animation: spin 1s infinite }');
+  const silly = parseErrors.some(e => /span/.test(e.message));
+  console.log('  errors:', parseErrors.map(e => `${e.message}${e.hint ? ' [' + e.hint + ']' : ''}`).join(' ; ').slice(0, 160));
+  repro('bug5a: silly "span" suggestion instead of motion guidance', silly);
+}
+
+// --- bug 5b: !important errors AND still emits ----------------------------
+{
+  const { parseErrors, doc } = compileDoc('.a { color: red !important }');
+  const wrongErr = parseErrors.some(e => /unknown value "important"/.test(e.message));
+  const emitted = (doc.rules[0]?.decls || []).some(d => /important/.test(d.value));
+  console.log('  errors:', parseErrors.map(e => e.message).join(';').slice(0, 120));
+  console.log('  emitted value:', doc.rules[0]?.decls.map(d => d.value).join('|'));
+  repro('bug5b: !important reported as unknown value "important"', wrongErr);
+  repro('bug5b: !important still emitted in the value', emitted);
+}
+
+// --- bug 5c: transition CSS form gives no conversion hint ------------------
+{
+  const { parseErrors } = compileDoc('.a { transition: color .2s ease }');
+  const hint = parseErrors.some(e => /200/.test(e.hint || '') && /transition/.test(e.hint || ''));
+  console.log('  errors:', parseErrors.map(e => `${e.message}${e.hint ? ' [' + e.hint + ']' : ''}`).join(' ; ').slice(0, 200) || '(none)');
+  repro('bug5c: CSS transition form rejected with no DSSL-form hint', parseErrors.length > 0 && !hint);
+}
+
+console.log(`\n${found} claim(s) reproduced`);

scripts/test-extension-lib.mjs

@@ -0,0 +1,44 @@
+/* test-extension-lib.mjs — functional smoke for the editor extension lib.
+ * Confirms the bundled engine copy (lib/engine) + analysis.js still agree:
+ * diagnostics, did-you-mean, completions, and the v0.7.2 cascade fix all
+ * behave through the exact code the .vsix ships. Run before packaging. */
+import { resolve } from '../dssl-vscode/lib/engine/resolver.js';
+import { parse, STATE_WORDS } from '../dssl-vscode/lib/engine/parser.js';
+import { analyzeWorkspace, diagnosticsFor } from '../dssl-vscode/lib/analysis.js';
+
+let pass = 0, fail = 0;
+const ok = (name, cond) => { if (cond) { pass++; console.log(`  ok  ${name}`); } else { fail++; console.log(`FAIL  ${name}`); } };
+const compileDoc = (src, file) => resolve(parse(src, file).ast, file);
+
+// 1. the fixed quickstart pattern: nested hover must override base bg
+const quickstart = 'card {\n  background: #fff\n  hover { background: #f5f0e8 }\n}\n';
+const doc = compileDoc(quickstart, 'test.dssl');
+const base = doc.rules.find(r => r.sel === 'card');
+const hov = doc.rules.find(r => r.sel === 'card:hover');
+ok('nested hover rule exists', !!hov);
+ok('hover overrides base bg', hov && hov.decls.some(d => d.prop === 'background' && d.value === '#f5f0e8'));
+ok('hover sorts AFTER base (same layer)', base && hov && base.layer === hov.layer && hov.order > base.order);
+ok('no invalid hex-alpha in output', JSON.stringify(doc).includes('#f5f0e8') && !JSON.stringify(doc).includes('/14px'));
+
+// 2. diagnostics: typo caught with did-you-mean, no false positive on valid code
+const ws = analyzeWorkspace(new Map([['test.dssl', 'card {\n  bakground: red\n}\n']]));
+const typoDiags = diagnosticsFor(ws, 'test.dssl');
+ok('typo surfaces a diagnostic', typoDiags.some(d => /bakground|unknown property/i.test(d.message)));
+ok('did-you-mean suggests background', typoDiags.some(d => /background/i.test(d.message)));
+const cleanWs = analyzeWorkspace(new Map([['test.dssl', quickstart]]));
+const cleanDiags = diagnosticsFor(cleanWs, 'test.dssl');
+ok('valid quickstart produces zero errors', !cleanDiags.some(d => d.severity === 'error'));
+
+// 3. raw hex alpha now legal (was the /50px bug)
+const hexDoc = compileDoc('card { color: #ff0000/50 }', 'a.dssl');
+ok('hex /50 compiles to color-mix, not /50px', hexDoc.rules[0].decls[0].value.includes('color-mix'));
+
+// 4. STATE_WORDS export exists (used for the did-you-mean warning)
+ok('STATE_WORDS exported by bundled parser', STATE_WORDS instanceof Set && STATE_WORDS.has('hover'));
+
+// 5. TIME_PROPS fix reachable through the bundle: bare delay becomes ms
+const tDoc = compileDoc('card { transition-delay: 200 }', 't.dssl');
+ok('bare transition-delay becomes 200ms', /200\s*ms|200ms/.test(JSON.stringify(tDoc.rules[0].decls)));
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

scripts/test-guide-browser.mjs

@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+/* test-guide-browser.mjs — DOM-level tests for the docs (review item 3).
+ *
+ * The between-center bug compiled clean and laid out wrong, which is exactly
+ * the gap "it compiles" cannot cover. This harness serves the repo over a
+ * local port, boots the REAL engine in headless Chromium, applies every
+ * GUIDE.md example via the documented <script type="text/dssl"> boot path,
+ * and asserts the computed styles the guide promises. Run before any release. */
+import { readFileSync, writeFileSync, unlinkSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { extname, join } from 'node:path';
+import { chromium } from 'playwright';
+
+const ROOT = '/home/z/my-project';
+const PORT = 8931 + Math.floor(Math.random() * 200);
+
+const MIME = { '.js': 'text/javascript', '.html': 'text/html', '.css': 'text/css', '.json': 'application/json' };
+const server = createServer((req, res) => {
+  const p = req.url.split('?')[0];
+  if (p === '/favicon.ico') { res.writeHead(204); return res.end(); }
+  // the site serves /dssl/* out of public/ — mirror that mapping
+  const file = p.startsWith('/dssl/')
+    ? join(ROOT, 'public', p.slice(1))
+    : join(ROOT, p === '/' ? 'index.html' : p.slice(1));
+  try {
+    const body = readFileSync(file);
+    res.writeHead(200, { 'content-type': MIME[extname(file)] || 'application/octet-stream', 'access-control-allow-origin': '*' });
+    res.end(body);
+  } catch {
+    res.writeHead(404); res.end('nope');
+  }
+});
+await new Promise(r => server.listen(PORT, '127.0.0.1', r));
+
+// the five GUIDE.md blocks, verbatim, applied through the auto-boot path
+const guide = readFileSync(join(ROOT, 'GUIDE.md'), 'utf8');
+const blocks = [...guide.matchAll(/```dssl\n([\s\S]*?)```/g)].map(m => m[1]);
+if (blocks.length < 5) { console.error('expected 5 guide blocks, found ' + blocks.length); process.exit(1); }
+
+const html = `<!doctype html><html><head><meta charset="utf8">
+<style>body { margin: 0 } .board { width: 600px; container-type: inline-size } .gallery { width: 400px }</style>
+</head><body>
+<div class="card">card</div>
+<div class="toolbar"><span>a</span><span>b</span></div>
+<div class="sidebar"><span>a</span><span>b</span></div>
+<div class="board"><span>1</span><span>2</span><span>3</span><span>4</span></div>
+<div class="gallery"><span>1</span><span>2</span><span>3</span></div>
+<div class="modal"><span>mid</span></div>
+<div class="hero"><span>hero</span></div>
+${blocks.map(b => `<script type="text/dssl">\n${b}\n</script>`).join('\n')}
+<script type="module">
+  import '/dssl/index.js';
+</script>
+</body></html>`;
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra ? ' — ' + extra : ''}`); }
+};
+
+// served over the local server so module imports are same-origin
+const harnessPath = join(ROOT, '.guide-harness.html');
+writeFileSync(harnessPath, html);
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1200, height: 900 } });
+const consoleErrors = [];
+page.on('console', m => { if (m.type() === 'error' || m.type() === 'warning') consoleErrors.push(m.type() + ': ' + m.text()); });
+page.on('pageerror', e => consoleErrors.push('pageerror: ' + e.message));
+
+await page.goto(`http://127.0.0.1:${PORT}/.guide-harness.html`, { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => window.DSSL && window.__dsslBooted, { timeout: 8000 }).catch(() => {});
+await page.waitForTimeout(600); // IntersectionObserver + animations settle
+
+const cs = (sel, prop, pseudo) => page.evaluate(([sel, prop, pseudo]) => {
+  const el = document.querySelector(sel);
+  if (!el) return null;
+  return getComputedStyle(el, pseudo || null).getPropertyValue(prop).trim();
+}, [sel, prop, pseudo]);
+
+/* block 1 — tokens + card base. Note: the guide composes — block 4 adds
+ * @media 768 { padding: 24 }, which legitimately wins at 1200px wide. */
+ok('B1 card background is the token ink value', (await cs('.card', 'background-color')) === 'rgb(22, 22, 29)', await cs('.card', 'background-color'));
+ok('B1 card padding at 1200px is block 4\'s @media 768 value (24px)', (await cs('.card', 'padding')) === '24px', await cs('.card', 'padding'));
+ok('B1 card radius is radius.md (14px)', (await cs('.card', 'border-radius')) === '14px', await cs('.card', 'border-radius'));
+ok('B1 card shadow resolves the md token (0 2 4 + alpha)', (await cs('.card', 'box-shadow')).includes('0px 2px 4px'), await cs('.card', 'box-shadow'));
+
+/* block 2 — the layout words (the between-center bug lives here) */
+ok('B2 toolbar justify-content space-between (the review bug)', (await cs('.toolbar', 'justify-content')) === 'space-between', await cs('.toolbar', 'justify-content'));
+ok('B2 toolbar align-items center survives the same line', (await cs('.toolbar', 'align-items')) === 'center', await cs('.toolbar', 'align-items'));
+ok('B2 toolbar is flex row with 8px gap', (await cs('.toolbar', 'display')) === 'flex' && (await cs('.toolbar', 'gap')) === '8px');
+ok('B2 sidebar is a column with 16px gap', (await cs('.sidebar', 'flex-direction')) === 'column' && (await cs('.sidebar', 'gap')) === '16px');
+const boardCols = await cs('.board', 'grid-template-columns');
+ok('B2 board is a grid (auto-fill 220 form wins as the later rule)', (await cs('.board', 'display')) === 'grid' && boardCols.split(' ').length >= 2, boardCols);
+ok('B2 gallery grid: 2 cols, rows 3, gap 8', (await cs('.gallery', 'grid-template-columns')).split(' ').length === 2 && (await cs('.gallery', 'gap')) === '8px', `${await cs('.gallery', 'grid-template-columns')} / ${await cs('.gallery', 'gap')}`);
+const modalAI = await cs('.modal', 'align-items'), modalJI = await cs('.modal', 'justify-items');
+ok('B2 modal stack centers both axes', modalAI === 'center' && modalJI === 'center', `${modalAI} / ${modalJI}`);
+const heroPlace = await cs('.hero', 'place-items');
+ok('B2 hero center: both centers everything', (heroPlace === 'center center') || (await cs('.hero', 'display')) === 'grid', heroPlace);
+
+/* block 3 — hover beats base, by order (the 0.7.2 headline fix) */
+const before = await cs('.card', 'background-color');
+await page.hover('.card');
+await page.waitForTimeout(120);
+const after = await cs('.card', 'background-color');
+ok('B3 hover changes the card background (real mouse)', before !== after && after === 'rgb(58, 47, 38)', `${before} -> ${after}`);
+await page.mouse.move(0, 0);
+await page.waitForTimeout(120);
+ok('B3 un-hoving restores the base', (await cs('.card', 'background-color')) === before);
+
+/* block 4 — media conditions */
+await page.emulateMedia({ colorScheme: 'dark' });
+await page.waitForTimeout(150);
+ok('B4 dark mode applies (#181310)', (await cs('.card', 'background-color')) === 'rgb(24, 19, 16)', await cs('.card', 'background-color'));
+await page.setViewportSize({ width: 700, height: 900 });
+await page.waitForTimeout(150);
+ok('B4 below 768 the wide padding is gone', (await cs('.card', 'padding')) === '16px', await cs('.card', 'padding'));
+await page.setViewportSize({ width: 900, height: 900 });
+await page.waitForTimeout(150);
+ok('B4 at 900px padding: 24 applies', (await cs('.card', 'padding')) === '24px', await cs('.card', 'padding'));
+await page.emulateMedia({ colorScheme: 'light' });
+await page.setViewportSize({ width: 1200, height: 900 });
+await page.waitForTimeout(150);
+
+/* block 5 — seen + hover animations (WAAPI) */
+const animCount = await page.evaluate(() => {
+  const el = document.querySelector('.card');
+  el.scrollIntoView();
+  return new Promise(res => setTimeout(() => res(el.getAnimations().length), 400));
+});
+ok('B5 seen fires a real animation on the card', animCount > 0, 'animations: ' + animCount);
+await page.hover('.card');
+await page.waitForTimeout(120);
+const liftAnims = await page.evaluate(() => document.querySelector('.card').getAnimations().length);
+ok('B5 hover plays the lift motion', liftAnims > 0, 'animations on hover: ' + liftAnims);
+
+ok('no console errors or warnings during the whole run', consoleErrors.length === 0, consoleErrors.slice(0, 3).join(' | '));
+
+await browser.close();
+server.close();
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

scripts/test-v072.mjs

@@ -131,7 +131,10 @@ const declsOf = (doc, sel) => doc.rules.filter(r => r.sel === sel).flatMap(r =>
 }
 /* 12 — version */
 {
-  ok(VERSION === '0.7.2', 'engine VERSION is 0.7.2');
+  // v0.8.0 — pin loosened the same way v070's was: the suite must survive
+  // later releases, but catch an accidental DOWNGRADE below 0.7.2.
+  const [maj, min, pat] = String(VERSION).split('.').map(Number);
+  ok(maj === 0 && (min > 7 || (min === 7 && pat >= 2)), 'engine VERSION is >= 0.7.2 (got ' + VERSION + ')');
   ok(STATE_WORDS.has('hover') && STATE_WORDS.has('seen'), 'STATE_WORDS exported');
 }
 

scripts/test-v073.mjs

@@ -0,0 +1,217 @@
+/* test-v073.mjs — one assertion per fix in the 0.8.0 "the exit drop".
+ * Source: the 2026-10-23 Claude review (5 bugs) + wishlist items 1/3/4/6/8.
+ * Every claim was reproduced first (scripts/repro-v073.mjs), these assert the
+ * fixes and the new features against the real compiler. */
+import { parse } from '../public/dssl/parser.js';
+import { resolve } from '../public/dssl/resolver.js';
+import { toCSS } from '../public/dssl/static.js';
+import { execFileSync } from 'node:child_process';
+import { writeFileSync, readFileSync, mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra ? ' — ' + extra : ''}`); }
+};
+
+const compileDoc = (src, file = 't.dssl') => {
+  const { ast, errors } = parse(src, file);
+  const doc = resolve(ast, file);
+  return { doc, errors: [...errors, ...doc.errors] };
+};
+const declsOf = (doc, i = 0) => doc.rules[i]?.decls || [];
+const count = (decls, prop) => decls.filter(d => d.prop === prop).length;
+const val = (decls, prop) => decls.find(d => d.prop === prop)?.value;
+const lastVal = (decls, prop) => decls.filter(d => d.prop === prop).pop()?.value;
+
+/* ---- bug 1: row/column axis roles ---- */
+{
+  const { doc, errors } = compileDoc('toolbar { row: gap 8 between center }');
+  const d = declsOf(doc);
+  ok('1a. between center: justify-content is space-between, written once', count(d, 'justify-content') === 1 && val(d, 'justify-content') === 'space-between');
+  ok('1b. between center: align-items is center', val(d, 'align-items') === 'center');
+  ok('1c. between center: zero errors', errors.length === 0);
+  const w = compileDoc('toolbar { row: gap 8 center between }');
+  ok('1d. center between: warns about the justify-content override', w.doc.warnings.some(x => /overrides "center"/.test(x.message)));
+  ok('1e. center between: space-between still wins (later word, cascade takes last)', lastVal(declsOf(w.doc), 'justify-content') === 'space-between');
+  const dupe = compileDoc('toolbar { row: center center }');
+  ok('1f. center center: duplicate-word warning', dupe.doc.warnings.some(x => /written twice/.test(x.message)));
+  const nowhere = compileDoc('toolbar { row: start end }');
+  ok('1g. start end: "end" has nowhere to go, loudly', nowhere.doc.warnings.some(x => /nowhere to go/.test(x.message)));
+  const stretch = compileDoc('toolbar { row: gap 8 stretch }');
+  ok('1h. row: stretch sets align-items only (no justify-content filler)', count(declsOf(stretch.doc), 'align-items') === 1 && count(declsOf(stretch.doc), 'justify-content') === 0);
+  const stack = compileDoc('.wrap { stack: center }');
+  ok('1i. stack: center unchanged (place-items center center)', val(declsOf(stack.doc), 'place-items') === 'center center');
+  const col = compileDoc('.list { column: gap 2 evenly stretch }');
+  const cd = declsOf(col.doc);
+  ok('1j. column evenly stretch: main space-evenly + cross stretch', val(cd, 'justify-content') === 'space-evenly' && val(cd, 'align-items') === 'stretch');
+}
+
+/* ---- bug 2: @font-face must not throw ---- */
+{
+  let threw = null, doc = null, errors = [];
+  try {
+    const r = compileDoc('@font-face { font-family: X; src: url(x.woff2) }');
+    doc = r.doc; errors = r.errors;
+  } catch (e) { threw = e; }
+  ok('2a. @font-face does not throw', !threw, threw && threw.message);
+  ok('2b. @font-face reports exactly one clean error', errors.length === 1 && /@font-face/.test(errors[0].message));
+  ok('2c. @font-face inner decls leak nowhere', !doc.rules.some(r => r.decls?.some(d => d.prop === 'src' || d.prop === 'font-family')));
+}
+
+/* ---- bug 3: unknown at-rules skip their whole block ---- */
+{
+  const { doc, errors } = compileDoc('@supports (display:grid) { .a { display: grid } }\n.b { color: blue }');
+  ok('3a. @supports inner rule does NOT apply unconditionally', !doc.rules.some(r => r.sel === 'a' || r.sel === '.a'));
+  ok('3b. one clean error for @supports (no stray unexpected })', errors.length === 1 && /@supports/.test(errors[0].message));
+  ok('3c. the rule after the block still parses', doc.rules.some(r => (r.sel || '').includes('b')));
+  ok('3d. the hint points at raw { }', /raw \{ \}/.test(errors[0].hint || ''));
+  const unclosed = compileDoc('@font-face { font-family: X');
+  ok('3e. unclosed unknown block says so instead of eating the file', unclosed.errors.some(e => /never closed/.test(e.message)));
+}
+
+/* ---- bug 4: url() is atomic ---- */
+{
+  const { doc, errors } = compileDoc('.a { background: url(a.png) no-repeat }');
+  ok('4a. unquoted url() + no-repeat: zero errors', errors.length === 0);
+  ok('4b. value passes through untouched', val(declsOf(doc), 'background') === 'url(a.png) no-repeat');
+  const q = compileDoc('.a { background: url("a.png") no-repeat center / cover }');
+  ok('4c. quoted url + position/size also clean', q.errors.length === 0 && /url\("a\.png"\) no-repeat center \/ cover/.test(val(declsOf(q.doc), 'background')));
+  const s = compileDoc('.a { background-image: url(img/hero.png), linear-gradient(90, red -> blue) }');
+  ok('4d. unquoted url inside a list with a gradient: clean', s.errors.length === 0);
+}
+
+/* ---- bug 5a: animation gets motion guidance, not "span" ---- */
+{
+  const defined = compileDoc('motion spin { from { opacity: 0 } to { opacity: 1 } }\n.a { animation: spin 1s infinite }');
+  ok('5a-1. animation with a defined motion: silent', defined.errors.length === 0 && defined.doc.warnings.length === 0);
+  const missing = compileDoc('.a { animation: ghost 1s infinite }');
+  ok('5a-2. animation with an undefined motion: warning names the DSSL way', missing.doc.warnings.some(w => /motion/.test(w.message) && /animate/.test(w.hint || '')));
+  ok('5a-3. no "span" suggestion anywhere', !JSON.stringify(missing.errors).includes('span'));
+  ok('5a-4. bare duration becomes ms, not px', /400ms/.test((() => { const r = compileDoc('.a { animation: ghost 400 }'); return val(declsOf(r.doc), 'animation'); })()));
+  const animateHint = compileDoc('.a { animate: spin 400 }');
+  ok('5a-5. unknown motion hint teaches the motion block', /motion spin \{/.test(animateHint.errors[0].hint || ''));
+}
+
+/* ---- bug 5b: !important is loud and NOT emitted ---- */
+{
+  const { doc, errors } = compileDoc('.a { color: red !important }');
+  ok('5b-1. !important errors', errors.length === 1 && /!important does not exist/.test(errors[0].message));
+  ok('5b-2. the error names pin { } as the answer', /pin \{ \}/.test(errors[0].hint || ''));
+  ok('5b-3. nothing is emitted', declsOf(doc).length === 0);
+  const quoted = compileDoc('.a { content: "!important" }');
+  ok('5b-4. quoted "!important" is just text, no false trip', quoted.errors.length === 0 && val(declsOf(quoted.doc), 'content') === '"!important"');
+}
+
+/* ---- bug 5c: CSS transition form teaches the DSSL form ---- */
+{
+  const { errors } = compileDoc('.a { transition: color .2s ease }');
+  ok('5c-1. CSS transition form errors (not silently dropped)', errors.length === 1);
+  ok('5c-2. the hint shows the exact conversion', /transition: 200 ease color/.test(errors[0].hint || ''));
+  const dssl = compileDoc('.a { transition: 200 ease color }');
+  ok('5c-3. the DSSL form still compiles clean', dssl.errors.length === 0 && val(declsOf(dssl.doc), 'transition') === 'color 200ms ease');
+}
+
+/* ---- feature: raw { } / @css { } verbatim passthrough ---- */
+{
+  const one = compileDoc('raw { @font-face { font-family: X; src: url(x.woff2) } }');
+  ok('6a. raw { } captured verbatim', one.doc.raws.length === 1 && one.doc.raws[0].css.includes('@font-face') && one.doc.raws[0].css.includes('url(x.woff2)'));
+  const alias = compileDoc('@css { @keyframes x { from { opacity: 0 } } }');
+  ok('6b. @css alias works', alias.doc.raws.length === 1 && alias.doc.raws[0].css.includes('@keyframes x'));
+  const multi = compileDoc('raw {\n  @supports (display: grid) {\n    .a { display: grid }\n  }\n}\n.b { color: red }');
+  ok('6c. multi-line raw captured whole, parsing resumes after', multi.doc.raws.length === 1 && multi.doc.raws[0].css.includes('@supports') && multi.doc.rules.some(r => (r.sel || '').includes('b')));
+  const nested = compileDoc('.card { raw { a } }');
+  ok('6d. nested raw is a loud error', nested.errors.some(e => /raw \{ \} must be top-level/.test(e.message)));
+  const unclosed = compileDoc('raw { @font-face {');
+  ok('6e. unclosed raw is a loud error', unclosed.errors.some(e => /raw \{ \} block was never closed/.test(e.message)));
+}
+
+/* ---- feature: fluid sugar ---- */
+{
+  const inline = compileDoc('.a { font-size: fluid 16 24 }');
+  ok('7a. font-size: fluid 16 24 → clamp', val(declsOf(inline.doc), 'font-size') === 'clamp(16px, calc(16px + 0.952vw), 24px)');
+  const bounds = compileDoc('.a { font-size: fluid 16 24 400 800 }');
+  ok('7b. custom viewport bounds change the slope', val(declsOf(bounds.doc), 'font-size') === 'clamp(16px, calc(16px + 2.000vw), 24px)');
+  const gap = compileDoc('.a { gap: fluid 8 16 }');
+  ok('7c. gap takes inline fluid too', val(declsOf(gap.doc), 'gap') === 'clamp(8px, calc(8px + 0.952vw), 16px)');
+  const legacy = compileDoc('.a { fluid: 16, 24 }');
+  ok('7d. the fluid: 16, 24 form still works', val(declsOf(legacy.doc), 'font-size') === 'clamp(16px, calc(16px + 0.952vw), 24px)');
+}
+
+/* ---- feature: toCSS — the exit lane ---- */
+{
+  const src = `tokens { color { ink: #16161d } }
+@layer utilities { .toolbar { row: gap 8 between center } }
+.card {
+  background: color.card
+  hover { background: #f5f0e8 }
+  seen { opacity: 1 }
+  display: grid
+  animate: rise 400
+  ::before { content: "→" }
+}
+pin { .legal { color: red } }
+@media dark { .card { background: #111 } }
+@signal theme == dark { .card { background: #000 } }
+motion rise { from { opacity: 0 } to { opacity: 1 } }
+raw { @font-face { font-family: X; src: url(x.woff2) } }`;
+  const { ast, errors } = parse(src, 'build.dssl');
+  const doc = resolve(ast, 'build.dssl');
+  const built = toCSS(doc, { file: 'build.dssl', banner: false });
+  const css = built.css;
+  ok('8a. @layer statement declares the engine order', css.includes('@layer tokens, base, components, utilities, pin;'));
+  ok('8b. tokens become :root custom properties', css.includes('--dssl-color-ink: #16161d'));
+  ok('8c. nested hover becomes .card:hover', /\.card:hover\s*\{[^}]*#f5f0e8/.test(css));
+  ok('8d. seen applies unconditionally in the build', /\.card\s*\{[^}]*opacity: 1/.test(css) && !/\.card:seen/.test(css));
+  ok('8e. ::before is native CSS in the build', /\.card::before\s*\{[^}]*content: "→"/.test(css));
+  ok('8f. pin becomes !important', /\.legal\s*\{[^}]*color: red !important/.test(css));
+  ok('8g. @media dark wraps the rule', css.includes('@media (prefers-color-scheme: dark)'));
+  ok('8h. motion becomes @keyframes rise', css.includes('@keyframes rise'));
+  ok('8i. raw { } lands verbatim', css.includes('@font-face { font-family: X; src: url(x.woff2) }'));
+  ok('8i-2. animate-only decls are dropped, static ones kept', /\.card\s*\{[^}]*display: grid/.test(css) && !css.includes('@animate'));
+  ok('8j. @signal rules are skipped and counted', built.report.skippedSignals === 1 && !css.includes('theme == dark'));
+  ok('8k. report counts what shipped', built.report.rules >= 5 && built.report.keyframes === 1 && built.report.raws === 1 && built.report.seenStripped === 1);
+}
+
+/* ---- feature: the CLI ---- */
+{
+  const dir = mkdtempSync(join(tmpdir(), 'dssl-cli-'));
+  const cleanFile = join(dir, 'clean.dssl');
+  const badFile = join(dir, 'bad.dssl');
+  const warnFile = join(dir, 'warn.dssl');
+  writeFileSync(cleanFile, '.a { color: red\n  hover { color: blue } }\n');
+  writeFileSync(badFile, '.a { color: red !important }\n');
+  writeFileSync(warnFile, '.a { animation: ghost 400 }\n');
+  const cli = join(import.meta.dirname, '..', 'cli', 'dssl.mjs');
+  const run = (args) => {
+    try { return { out: execFileSync('node', [cli, ...args], { encoding: 'utf8' }), code: 0 }; }
+    catch (e) { return { out: (e.stdout || '') + (e.stderr || ''), code: e.status }; }
+  };
+  const c0 = run(['check', cleanFile]);
+  ok('9a. check clean file exits 0', c0.code === 0);
+  const c1 = run(['check', badFile]);
+  ok('9b. check file with errors exits 1', c1.code === 1 && /!important/.test(c1.out));
+  const cj = JSON.parse(run(['check', badFile, '--json']).out);
+  ok('9c. check --json is machine-readable', cj.files[0].ok === false && cj.files[0].errors[0].line === 1);
+  const cs = run(['check', warnFile, '--strict']);
+  ok('9d. check --strict makes warnings fatal', cs.code === 1);
+  const cw = run(['check', warnFile]);
+  ok('9e. check without --strict: warnings are not fatal', cw.code === 0);
+  const cssOut = join(dir, 'out.css');
+  const b = run(['build', cleanFile, '-o', cssOut]);
+  ok('9f. build writes a .css file and reports', b.code === 0 && /\.css/.test(b.out));
+  const built = readFileSync(cssOut, 'utf8');
+  ok('9g. built CSS contains the hover rule', /\.a:hover\s*\{[^}]*blue/.test(built));
+  const bj = JSON.parse(run(['build', cleanFile, '--json']).out);
+  ok('9h. build --json carries css + report', typeof bj.css === 'string' && bj.report.rules >= 1);
+  const missing = run(['check', join(dir, 'nope.dssl')]);
+  ok('9i. missing file exits 2', missing.code === 2);
+  const v = run(['--version']);
+  ok('9j. --version prints 0.8.0', v.out.trim() === '0.8.0');
+  rmSync(dir, { recursive: true, force: true });
+}
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

src/components/dssl/SiteRoot.tsx

@@ -122,7 +122,7 @@ export default function SiteRoot() {
           </nav>
 
           <div className="nav-side">
-            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.7.1</a>
+            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.8.0</a>
             <button type="button" className="theme-btn" onClick={cycleTheme} aria-label="Toggle color theme" title="Theme: auto / light / dark">
               <span className="icon-sun"><SunIcon /></span>
               <span className="icon-moon"><MoonIcon /></span>
@@ -151,7 +151,7 @@ export default function SiteRoot() {
         <div className="wrap footer-inner">
           <div className="footer-col">
             <div className="footer-note">
-              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.7.1 while
+              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.8.0 while
               building this site; every feature it needed, it grew, and every bug you sent got
               fixed for real. This page runs on its own engine, no CSS files attached —
               the engine styles this DOM directly.

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,50 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.8.0",
+    date: "growth phase · the exit drop",
+    title: "A second review found five bugs. The answer fixes them and adds the exit lane.",
+    why: "another external review landed with repro snippets: a layout word bug that compiled clean and laid out wrong, an at-rule that crashed the compiler, an @supports leak, url() false errors, and a wishlist that said build-a-CSS-exit first. Every claim was reproduced against the real compiler before anything moved, the same discipline as last time",
+    kind: "spec",
+    body:
+      "The layout bug was the worst kind: silent and documented. row: gap 8 between center — the guide's own example — compiled with zero errors and lost the between, because every place word wrote BOTH axes and the later center overwrote justify-content. Words now own their axis: between/around/evenly are main-axis words, stretch/baseline are cross-axis words, center/start/end fill whichever axes are still free, and a word with nowhere to go is a loud warning instead of a silent overwrite. @font-face used to crash the whole compiler (node.children is not iterable — an uncaught throw, the entire stylesheet dead); unknown at-rules now skip their whole balanced block with one clean error, which also kills the @supports leak where the inner rule applied unconditionally after an error. url() is atomic now, so url(a.png) no-repeat stopped raising two false errors. !important errors loudly and emits NOTHING (it used to error AND still emit red !important, which the browser then silently dropped). The animation shorthand stopped suggesting did you mean \"span\" for motion names and warns the DSSL way instead (motion name { } + animate:), and the CSS transition form now teaches the conversion in the error: transition: color .2s ease → write transition: 200 ease color. Then the wishlist's top four, because they fix tested problems: raw { } / @css { } drops verbatim CSS (@font-face, @keyframes, @supports, @import) into the page stylesheet; DSSL.toCSS() and dssl build compile the static subset to a real .css file — tokens to custom properties, states to :hover, layers to @layer, motions to @keyframes, pin to !important, seen to its no-JS final state, with a report that counts what stays in the runtime; dssl check puts the real compiler in CI with exit codes and --json; and the docs examples are now rendered in headless Chromium with computed-style assertions (real mouse hover, real IntersectionObserver, dark mode, viewport widths) because \"it compiles\" is what let the layout bug ship. Bonus sugar: font-size: fluid 16 24 compiles to the clamp() everyone writes wrong by hand.",
+    code: `# the exit lane: same source, real CSS, no runtime required
+$ dssl check styles.dssl            # CI: exit 1 on errors, --json for editors
+$ dssl build styles.dssl -o styles.css
+  built styles.css from styles.dssl
+    6 rule(s), 1 pseudo-element rule(s), 1 @keyframes, 1 raw block(s)
+    layers: tokens < components < utilities
+    1 seen rule(s) applied unconditionally (the no-JS state)
+
+/* tokens → custom properties · states → :hover · layers → @layer
+   motions → @keyframes · raw { } → verbatim · pin → !important */
+.toolbar {
+  display: flex;
+  justify-content: space-between;   /* the guide example, now true */
+  align-items: center;
+  font-size: clamp(16px, calc(16px + 0.952vw), 24px);
+}`,
+  },
+  {
+    version: "v0.7.2",
+    date: "growth phase · the review drop",
+    title: "An external review reproduced twelve bugs. This release is the answer.",
+    why: "a thorough third-party agent review landed with repro cases instead of vibes: nested-state cascade loss, dead nested @media, broken docs examples, unitless delays, silent hex alpha, page-wide hover recomputes. The only honest response was to reproduce every claim, fix what was real, and make the docs examples test-verified",
+    kind: "spec",
+    body:
+      "The headline bug: a nested hover block sorted BEFORE its parent\u2019s own declarations, so background: red on the parent always beat hover { background: red } nested inside it \u2014 the exact pattern the docs and the starter teach. Same walk, worse: nested @media, @signal and @layer blocks flushed with the parent context, so their condition was dropped entirely and they sorted before base. A nested dark mode was silently dead. Both fixed at the resolver walk: nested blocks now flush after everything the parent said so far, and every block flushes with the context it was actually walked with. The parser got its own fix: declarations and a nested block sharing one line (background: red; hover { ... }) used to swallow the declaration into the block\u2019s selector, so it vanished. Raw hex alpha is real now: #ff0000/50 compiles to color-mix instead of the invalid #ff0000/50px. transition-delay and friends take bare numbers as ms (they used to ship unitless-invalid or px). grid: 3 gap 12 \u2014 the documented form \u2014 actually works, and rows N joined it. seen { opacity: 0 -> 1 } now fails LOUD with the two real patterns in the hint. A nested hovr typo warns did-you-mean instead of silently becoming a descendant selector. fill, stroke, text-wrap and content-visibility joined the vocabulary. ::part() rides the shadow pipeline; ::slotted() gets a loud explanation of why it cannot work from the light DOM. The engine caught up too: the gate prefilter actually runs before native matches() now (the review caught it in the wrong order), hover recomputes are scoped to the hovered subtree and its ancestors instead of the whole page (the review measured 33,060 recomputes for hovering 8 cards in a 1k list \u2014 the candidate collection that caused it is gone), and checkbox states finally hear change and toggle events, so unchecking with Space unstyles immediately. And the feature everyone asked about shipped as documentation: DSSL has been embeddable in HTML all along via <style type=\"text/dssl\">, and now <script type=\"text/dssl\"> works too. One distribution note the release has to carry: the editor extension bundles this same engine, but the packaged 0.7.1 vsix was built before these fixes landed, so anyone who installed it was still getting the old compiler's squiggles. The 0.7.2 vsix replaces it in the repo files and is the first package that actually contains this changelog.",
+    code: `// the pattern the docs teach, now actually true:
+.card {
+  background: color.card
+  shadow: sm
+  hover { background: color.card-hover; shadow: lg }
+
+  @media dark { background: color.card-dark }
+
+  seen { animate: rise-in 400 snap }
+}`,
+  },
   {
     version: "v0.7.1",
     date: "growth phase · the credibility drop",

src/components/dssl/views/SpecView.tsx

@@ -11,7 +11,7 @@ export default function SpecView() {
         <p className="page-sub">
           The v0.1 draft was put to a seven-point vote. This document is the ratified
           v0.2 result — every decision below is implemented by the engine serving this
-          page. The engine itself has kept growing since: it is now at v0.7.1 (see the
+          page. The engine itself has kept growing since: it is now at v0.8.0 (see the
           changelog for what the site demanded).
         </p>
       </div>