Site: version badge and size claim now measured from the engine

- The nav badge and footer said v0.8.0 after the 0.8.1 release, because the
version was hardcoded in SiteRoot. The site now reads VERSION from
public/dssl/index.js when it is built, so it cannot drift again.
- The hero claimed "~20 kB engine". The engine is about 190 kB as plain
source and about 58 kB gzipped. The hero, the page description and
llms.txt now say the real gzipped size, measured at build time.
- Page title, hero copy, footer and home page text no longer use em dashes.

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

llms.txt

@@ -1,6 +1,6 @@
 # DSSL
 
-> 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.
+> 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 the engine (about 58 kB gzipped, about 190 kB as plain source), 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

public/llms.txt

@@ -1,6 +1,6 @@
 # DSSL
 
-> 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.
+> 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 the engine (about 58 kB gzipped, about 190 kB as plain source), 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

src/app/layout.tsx

@@ -2,11 +2,13 @@ import type { Metadata, Viewport } from "next";
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import "./globals.css";
+import { readEngineInfo } from "@/lib/engine-info";
+
+const engine = readEngineInfo();
 
 export const metadata: Metadata = {
-  title: "DSSL — Domain Specific Style Language",
-  description:
-    "DSSL is a styling language for the web: design tokens, its own cascade, loud errors and zero specificity wars. Ships as a ~20 kB engine, no build step.",
+  title: "DSSL: Domain Specific Style Language",
+  description: `DSSL is a styling language for the web: design tokens, its own cascade, loud errors and zero specificity wars. The engine is ${engine.gzKb} kB gzipped, with no build step.`,
   keywords: ["DSSL", "CSS alternative", "style language", "design tokens", "web"],
   icons: { icon: "/favicon.svg" },
 };

src/app/page.tsx

@@ -1,5 +1,6 @@
 import SiteRoot from "@/components/dssl/SiteRoot";
+import { readEngineInfo } from "@/lib/engine-info";
 
 export default function Home() {
-  return <SiteRoot />;
+  return <SiteRoot info={readEngineInfo()} />;
 }

src/components/dssl/SiteRoot.tsx

@@ -9,6 +9,8 @@ import PlaygroundView from "./views/PlaygroundView";
 import ChangelogView from "./views/ChangelogView";
 import BenchView from "./views/BenchView";
 import { SunIcon, MoonIcon, MenuIcon } from "./icons";
+import { EngineInfoProvider } from "./engine-info";
+import type { EngineInfo } from "@/lib/engine-info";
 
 export type ViewName = "home" | "docs" | "cheat" | "spec" | "playground" | "changelog" | "bench";
 
@@ -62,7 +64,7 @@ export interface DsslApplyResult {
   stats: { rules: number; shadowRules: number; motions: number; tokens: number; mediaQueries: number };
 }
 
-export default function SiteRoot() {
+export default function SiteRoot({ info }: { info: EngineInfo }) {
   // the view IS the hash — derived, never stored twice
   const view = useSyncExternalStore(
     subscribeHash,
@@ -100,6 +102,7 @@ export default function SiteRoot() {
   }, []);
 
   return (
+    <EngineInfoProvider value={info}>
     <div className="site" data-view={view}>
       <header className="nav">
         <div className="wrap nav-inner">
@@ -122,7 +125,7 @@ export default function SiteRoot() {
           </nav>
 
           <div className="nav-side">
-            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.8.0</a>
+            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v{info.version}</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,13 +154,13 @@ 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.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.
+              <strong>DSSL</strong>, the domain specific style language. Built from v0.1 to v{info.version} 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 with no CSS files attached.
+              The engine styles this DOM directly.
             </div>
             <div className="footer-fine">
-              © 2026 <strong>DSSL. inc</strong> — named after the product, because naming things
+              © 2026 <strong>DSSL. inc</strong>, named after the product, because naming things
               is hard.
             </div>
           </div>
@@ -171,5 +174,6 @@ export default function SiteRoot() {
         </div>
       </footer>
     </div>
+    </EngineInfoProvider>
   );
 }

src/components/dssl/engine-info.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { EngineInfo } from "@/lib/engine-info";
+
+const EngineInfoContext = createContext<EngineInfo>({ version: "", rawKb: 0, gzKb: 0 });
+
+export const EngineInfoProvider = EngineInfoContext.Provider;
+export const useEngineInfo = () => useContext(EngineInfoContext);

src/components/dssl/views/HomeView.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import CodeBlock from "../CodeBlock";
 import { highlightDssl } from "../highlight";
 import { ArrowIcon, PlayIcon } from "../icons";
+import { useEngineInfo } from "../engine-info";
 import type { ViewName } from "../SiteRoot";
 
 const DEMOS = {
@@ -46,7 +47,7 @@ const DEMOS = {
 .demo-card {
   animate: rise-in 500 snap both
 }`,
-  // v0.4.0 — the reveal tab: seen + stagger, both engine-native
+  // v0.4.0, the reveal tab: seen + stagger, both engine-native
   reveal: `motion rise-in {
   from {
     opacity: 0
@@ -68,6 +69,7 @@ const DEMOS = {
 type DemoKey = keyof typeof DEMOS;
 
 export default function HomeView({ go }: { go: (v: ViewName) => void }) {
+  const info = useEngineInfo();
   const [demo, setDemo] = useState<DemoKey>("tokens");
   const [signalOn, setSignalOn] = useState(false);
 
@@ -95,9 +97,9 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
             </h1>
             <p className="hero-sub">
               A styling language for the web that pairs with any HTML and any JavaScript.
-              Its own cascade — no specificity math, no <code>!important</code> — design
-              tokens as the vocabulary, states you can read, motion in four words, and
-              errors that actually speak up. Zero dependencies, no build step.
+              Its own cascade with no specificity math and no <code>!important</code>.
+              Design tokens as the vocabulary, states you can read, motion in four words,
+              and errors that actually speak up. Zero dependencies, no build step.
             </p>
             <div className="hero-ctas">
               <button type="button" className="btn btn-primary" onClick={() => go("docs")}>
@@ -109,13 +111,13 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
               <a href="#get" className="btn btn-ghost">Get the engine</a>
             </div>
             <div className="hero-meta" aria-label="Engine facts">
-              <span>~20 kB engine</span>
+              <span>{info.gzKb} kB gzipped</span>
               <span>zero dependencies</span>
               <span>any HTML, any JS</span>
             </div>
           </div>
 
-          {/* live demo stage — the tabs swap real DSSL, the card below is styled by it */}
+          {/* live demo stage: the tabs swap real DSSL, the card below is styled by it */}
           <div className="demo" aria-label="Live DSSL demo">
             <div className="demo-tabs">
               {(Object.keys(DEMOS) as DemoKey[]).map(k => (
@@ -138,7 +140,7 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
                 <div className="demo-card">
                   <div className="demo-swatch" />
                   <h4>Styled by DSSL</h4>
-                  <p>Hover me — states, tokens and motion are all handled by the engine.</p>
+                  <p>Hover me. States, tokens and motion are all handled by the engine.</p>
                   <span className="demo-chip">live</span>
                 </div>
                 {demo === "motion" && (
@@ -213,7 +215,7 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
           <h2 className="section-title">The vocabulary is the difference</h2>
           <div className="compare sect-gap">
             <div className="compare-col">
-              <span className="compare-tag compare-tag-css">styles.css — 14 lines of machinery</span>
+              <span className="compare-tag compare-tag-css">styles.css: 14 lines of machinery</span>
               <CodeBlock plain code={`.card {
   background-color: var(--card);
   border-radius: 14px;
@@ -230,7 +232,7 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
 .card:hover .chip { background: var(--accent-soft); }`} />
             </div>
             <div className="compare-col">
-              <span className="compare-tag compare-tag-dssl">card.dssl — 8 lines of design</span>
+              <span className="compare-tag compare-tag-dssl">card.dssl: 8 lines of design</span>
               <CodeBlock plain code={`.card {
   background: color.card
   radius: md
@@ -255,7 +257,7 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
           <div className="kicker">the engine</div>
           <h2 className="section-title">No stylesheet is attached to this page</h2>
           <p className="section-sub">
-            Every rule below is implemented by the DSSL engine — it matches selectors
+            Every rule below is implemented by the DSSL engine. It matches selectors
             against the live DOM itself, runs its own cascade, and drives motion through
             the Web Animations API. Only pseudo-elements fall back to generated CSS.
           </p>
@@ -263,12 +265,12 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
             <div className="card card-hover feature">
               <span className="feature-icon">{"{}"}</span>
               <h3>Its own cascade</h3>
-              <p>Later wins. Layers when you care. No specificity score, no !important — ever.</p>
+              <p>Later wins. Layers when you care. No specificity score, no !important. Ever.</p>
             </div>
             <div className="card card-hover feature">
               <span className="feature-icon">◆</span>
               <h3>Tokens as vocabulary</h3>
-              <p>color.ink, space.4, radius.md — references compile to inspectable custom properties.</p>
+              <p>color.ink, space.4, radius.md: references compile to inspectable custom properties.</p>
             </div>
             <div className="card card-hover feature">
               <span className="feature-icon">→</span>
@@ -278,22 +280,22 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
             <div className="card card-hover feature">
               <span className="feature-icon">≋</span>
               <h3>One-word conditions</h3>
-              <p>@media dark. @media 768. @media 480..960. Same shape for @container and @signal — compose by nesting.</p>
+              <p>@media dark. @media 768. @media 480..960. Same shape for @container and @signal. Compose by nesting.</p>
             </div>
             <div className="card card-hover feature">
               <span className="feature-icon">✦</span>
               <h3>Motion in four words</h3>
-              <p>animate: rise-in 400 snap both. seen + stagger reveal grids on scroll — reduced-motion is respected by default.</p>
+              <p>animate: rise-in 400 snap both. seen + stagger reveal grids on scroll. Reduced-motion is respected by default.</p>
             </div>
             <div className="card card-hover feature">
               <span className="feature-icon">§</span>
               <h3>Behaviors</h3>
-              <p>Name a pattern once — focus rings, chips — and use it anywhere with one line.</p>
+              <p>Name a pattern once (focus rings, chips) and use it anywhere with one line.</p>
             </div>
             <div className="card card-hover feature">
               <span className="feature-icon">!</span>
               <h3>Loud errors</h3>
-              <p>Unknown property, unknown token, bad value — each fails with file, line and a suggestion.</p>
+              <p>Unknown property, unknown token, bad value: each fails with file, line and a suggestion.</p>
             </div>
             <div className="card card-hover feature">
               <span className="feature-icon">⇄</span>
@@ -311,18 +313,18 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
           <h2 className="section-title">One call restyles the page</h2>
           <div className="compare sect-gap" style={{ alignItems: "center" }}>
             <div className="compare-col">
-              <CodeBlock file="theme-toggle.js" code={`// flip a signal — DSSL re-evaluates
+              <CodeBlock file="theme-toggle.js" code={`// flip a signal and DSSL re-evaluates
 // every @signal rule in the page
 
 DSSL.signal('demo', 'on')   // on
 DSSL.signal('demo', null)   // off`} />
             </div>            <div className="compare-col demo-canvas" style={{ maxWidth: 480 }}>
               <button type="button" className="btn btn-primary" onClick={toggleSignal}>
-                {signalOn ? "signal: demo == on" : "signal: demo == off"} — click
+                {signalOn ? "signal: demo == on" : "signal: demo == off"}, click
               </button>
               <div className="demo-signal-card">
                 <strong>@signal demo == on</strong>
-                <span>This card is styled by a signal-conditional rule. Flip the signal and the engine recomputes it — inspect the html element to see the mirror attribute.</span>
+                <span>This card is styled by a signal-conditional rule. Flip the signal and the engine recomputes it. Inspect the html element to see the mirror attribute.</span>
               </div>
             </div>
           </div>
@@ -346,8 +348,8 @@ DSSL.signal('demo', null)   // off`} />
               <span className="get-os">macos · linux · bsd</span>
               <CodeBlock plain file="terminal" code="curl -fsSL https://dssl-sable.vercel.app/install.sh | sh" />
               <p className="get-note">
-                Runs on plain sh — dash, ash and busybox included, bash not
-                required. Downloads with curl or wget, whichever you have, and
+                Runs on plain sh (dash, ash and busybox included, bash not
+                required). Downloads with curl or wget, whichever you have, and
                 unpacks with tar, which every distro and macOS ship by default.
                 No tar? It falls back to unzip, then python3.
               </p>
@@ -409,7 +411,7 @@ DSSL.signal('demo', null)   // off`} />
             <h2>Write styles that read like design.</h2>
             <p>
               The full language tour takes about ten minutes. Or paste straight into the
-              playground and break things — the errors will keep you company.
+              playground and break things. The errors will keep you company.
             </p>
             <div className="hero-ctas">
               <button type="button" className="btn btn-primary" onClick={() => go("docs")}>

src/components/dssl/views/SpecView.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import CodeBlock from "../CodeBlock";
+import { useEngineInfo } from "../engine-info";
 
 export default function SpecView() {
+  const info = useEngineInfo();
   return (
     <div className="wrap">
       <div className="page-head">
@@ -10,8 +12,8 @@ export default function SpecView() {
         <h1 className="page-title">DSSL v0.2 — “First Light”, ratified</h1>
         <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.8.0 (see the
+          v0.2 result, and every decision below is implemented by the engine serving this
+          page. The engine itself has kept growing since: it is now at v{info.version} (see the
           changelog for what the site demanded).
         </p>
       </div>

src/lib/engine-info.ts

@@ -0,0 +1,33 @@
+import { readFileSync } from "node:fs";
+import { gzipSync } from "node:zlib";
+import path from "node:path";
+
+/** Facts about the engine that the site states out loud. They are measured from
+ *  public/dssl/ when the page is built, so the version badge and the size claim
+ *  cannot drift away from the code the way the hardcoded ones did. */
+export interface EngineInfo {
+  version: string;
+  /** whole engine, minified: no. Plain source, as served. */
+  rawKb: number;
+  /** the same files, gzipped, which is what a browser actually downloads */
+  gzKb: number;
+}
+
+const FILES = ["boot", "index", "engine", "parser", "resolver", "static", "utils"];
+
+export function readEngineInfo(): EngineInfo {
+  const dir = path.join(process.cwd(), "public", "dssl");
+  let version = "0.0.0";
+  let raw = 0;
+  let gz = 0;
+  try {
+    const parts = FILES.map((f) => readFileSync(path.join(dir, `${f}.js`)));
+    const m = /VERSION\s*=\s*'([^']+)'/.exec(readFileSync(path.join(dir, "index.js"), "utf8"));
+    if (m) version = m[1];
+    raw = parts.reduce((n, b) => n + b.length, 0);
+    gz = gzipSync(Buffer.concat(parts), { level: 9 }).length;
+  } catch {
+    // files missing at build time: say nothing wrong rather than something invented
+  }
+  return { version, rawKb: Math.round(raw / 1000), gzKb: Math.round(gz / 1000) };
+}