diff --git a/.gitattributes b/.gitattributes
index a36bf9195..83b87289d 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -29,3 +29,7 @@
 *.jpg       binary
 *.pdf       binary
 *.sqlite    binary
+
+# A torture fixture whose CRLF line endings ARE the trap it sets (a BOM and CRLF in one
+# page); normalising it would remove the case the suite asserts.
+parser/src/test-data/web/torture/quirks.html -text
diff --git a/bin/axiomcode b/bin/axiomcode
index 313b110aa..c3948dfad 100755
--- a/bin/axiomcode
+++ b/bin/axiomcode
@@ -393,7 +393,7 @@ case "$cmd" in
     run_suite(){ local s="$1"; shift; echo "══ $s"; bash "$ROOT/graph/test/$s/run-tests.sh" "$@" || rc=1; }
     case "$which" in
       java|typescript|python|javascript|csharp) run_suite "$which" "$@";;
-      parser) for t in java-extractor-tests typescript-tests python-tests javascript-tests csharp-tests gradle-tests services-tests discovery-tests; do
+      parser) for t in java-extractor-tests typescript-tests python-tests javascript-tests csharp-tests gradle-tests services-tests web-tests web-torture discovery-tests; do
                 [ -f "$ROOT/parser/src/test/$t.ts" ] || continue; echo "══ parser: $t"; (cd "$ROOT/parser" && npx tsx "src/test/$t.ts") || rc=1; done;;
       all) for l in java typescript python javascript csharp; do run_suite "$l" "$@"; done; "$0" test parser || rc=1;;
       *) die "test: unknown suite $which (java | typescript | python | javascript | csharp | parser | all)";;
diff --git a/package.json b/package.json
index 4fd812a5e..426f256c3 100644
--- a/package.json
+++ b/package.json
@@ -55,10 +55,13 @@
     "LICENSE.md"
   ],
   "dependencies": {
+    "entities": "^6.0.0",
     "sax": "^1.4.4",
     "tree-sitter": "^0.21.1",
     "tree-sitter-c-sharp": "0.23.1",
+    "tree-sitter-css": "0.23.0",
     "tree-sitter-groovy": "^0.1.2",
+    "tree-sitter-html": "0.23.2",
     "tree-sitter-java": "0.23.4",
     "tree-sitter-python": "^0.21.0",
     "typescript": "^5.3.3",
diff --git a/parser/README.md b/parser/README.md
index c6c5517ab..5b199ebaf 100644
--- a/parser/README.md
+++ b/parser/README.md
@@ -89,6 +89,23 @@ same tables and be compared.
 | **YAML** | Beta | 2 | yaml | Configuration entries with anchor and alias tracking, multi document support. |
 | **META-INF/services** | Stable | 2 | custom | Provider-configuration files: the service each file configures, taken from its name, and every implementation class it names, with the file and line. |
 | **Gradle** | Beta | 8 | tree-sitter-groovy | Scripts and their role in the build, blocks, declarations, dependency coordinates split into group/artifact/version, version catalogs, value references with resolution, comments, and parse gaps. Groovy and Kotlin DSL. |
+| **HTML** | Beta | 9 | tree-sitter-html | Documents with their doctype and template dialects, the element tree as written (nothing a browser would imply) with XPath-like paths, attributes by kind, class tokens, every URL a page names (scripts, stylesheets, links, images, forms, frames, htmx requests) classified and resolved to a file where one exists, `<script>` elements with their type and inline body range (inside inline `<svg>` too), the calls written in event-handler attributes, `javascript:` URLs and framework event bindings, template expressions (Vue, Angular, Alpine, Jinja, Handlebars, ERB and the others: the directive, its argument and modifiers, the expression text, the names it calls and reads, the variables a loop declares), and parse gaps. `.html`, `.htm`, `.xhtml`. Inline `<style>` elements and `style` attributes are extracted as CSS. |
+| **CSS** | Beta | 8 | tree-sitter-css | Stylesheets (files and `<style>` elements), rules and at-rules as a tree including CSS nesting, selectors with specificity, simple selectors (type, class, id, attribute, pseudo-class, pseudo-element, nesting) with combinators, declarations, the names values refer to (custom properties, URLs, imports, keyframes, layers, containers, font families), comments and parse gaps. `.css` only; a preprocessor dialect is recorded as a gap, not parsed. |
+
+HTML and CSS are one front end, extracted structurally the way the configuration formats are:
+a page's `<link rel="stylesheet">` and `<script src>` are resolved to the files they name, a
+`class` attribute's tokens and a stylesheet's class selectors are rows that join by name, and a
+handler attribute's calls carry their callee names for the engine to resolve against the scripts
+the page loads. Nothing is rendered: a template dialect (Jinja, Thymeleaf, Handlebars, Razor, ERB,
+PHP, Angular, Vue, Alpine, htmx) is detected from its markers and recorded on the document, so a
+consumer knows a URL holding `{{` is a template's and not a path. Each template construct is also
+a row of its own: `v-for="item in items"` is a LOOP that declares `item` and reads `items`,
+`@click="save(id)"` is an EVENT_HANDLER whose call `save` is a handler-call row like an `onclick`'s,
+`:class="{ on: open }"` is a BINDING of `class` that reads `open`, `{{ user.name }}` an INTERPOLATION,
+and a Jinja `{% for %}` or an Angular `*ngIf` the same with their own dialect. The expression inside is
+read by the TypeScript syntax layer where the dialect's expression language is JavaScript's, and a
+value that does not parse is a gap on the row, not a guess. A `<base href>` is honoured when URLs
+are resolved, as a browser would.
 
 Python and Java are the two languages with full semantic resolution. TypeScript and C# resolve what
 one file decides and leave the cross-file call graph to the engine, as Java does for type references. The configuration formats are
@@ -172,7 +189,7 @@ detection  ->  parsing  ->  extraction  ->  models  ->  resolution  ->  export
 | Layer | Directory | Responsibility |
 |---|---|---|
 | Detection | `language-detectors/` | Identify which languages and build systems a project uses. |
-| Parsing | `parsers/<lang>/` | Produce a syntax tree. tree-sitter for Java, Python, C# and Gradle; the TypeScript compiler's syntax layer for TypeScript and JavaScript; sax for XML; the `yaml` package for YAML; a hand written scanner for Properties and for META-INF/services. |
+| Parsing | `parsers/<lang>/` | Produce a syntax tree. tree-sitter for Java, Python, C#, Gradle, HTML and CSS; the TypeScript compiler's syntax layer for TypeScript and JavaScript; sax for XML; the `yaml` package for YAML; a hand written scanner for Properties and for META-INF/services. |
 | Extraction | `parsers/<lang>/extractors/` | Walk the tree and emit rows. One extractor per relation family, implementing `BaseExtractor`. |
 | Models | `analysis-types/<lang>/` | One class per relation. Builder pattern, content addressed key, CSV serialisation. |
 | Resolution | `parsers/<lang>/**/*-resolution-linker.ts` | Fill in cross entity foreign keys, first within a file and then across the project. |
@@ -251,6 +268,24 @@ Every gate therefore uses something not written for this purpose.
 | A runtime tracer | Which TypeScript declaration a call actually reaches | A source rewrite that records, as a project's own test suite runs, the declaration entered at each call site. The compiler says what it resolved; this says what ran, and the two disagree in ways that matter. |
 | Gradle `projects` | The build's project graph | Gradle is the implementation that decides which projects a settings file creates. On its first real run it found a directory this parser was reporting as a project and Gradle was not. |
 
+The web front end's oracle is `tools/web-corpus-bench`, a development-only bench that runs the
+front end and reference parsers (parse5 and htmlparser2 for HTML; css-tree, postcss and
+`@bramus/specificity` for CSS) over downloaded corpora (html5lib, web-platform-tests, the csstree
+and postcss fixtures, several real applications, live pages and CDN stylesheets) and reports every
+measure on which they differ; its last baseline is committed next to it. tree-sitter-html and
+tree-sitter-css build the trees, and both grammars are narrower than the languages: the HTML grammar knows void elements,
+raw text and implicit end tags but does not run the browser's tree construction (nothing is
+implied, a stray end tag is an error), and the CSS grammar rejects some valid shapes — an unquoted
+`url(../x)`, an attribute selector's `i` flag, a `@container` name, a range media query, `&` after
+a compound — each of which the front end reads back from the source text and marks as recovered
+rather than as a gap. What this repository adds (URL classification and resolution, specificity,
+the names a value refers to, the calls in a handler, positions through an inline `<style>`, the
+recoveries) is checked by format checks written from the HTML, CSS Syntax, Selectors and URL
+specifications, each paired with the wrong implementation it rules out, by an enum-emission
+audit over the fixture, and by the torture suite below. A browser-side oracle (a DOM built by a
+browser engine, `getComputedStyle` for the cascade) would be the next independent check, and is
+not there.
+
 Call graph quality is measured at three increasing strictnesses, because each answers a question the
 previous cannot. **Discovery** asks whether a call site was found at all, against the compiled
 bytecode, which lists every call whether or not the branch runs. **Target correctness** asks whether
@@ -349,11 +384,14 @@ Both call the same core in `src/extract.ts`.
 
 Tab separated files, one per relation. Java relations are named `all-*.csv`; every other language
 is prefixed by name: `all-python-*.csv`, `all-typescript-*.csv`, `all-javascript-*.csv`,
-`all-csharp-*.csv`, `all-gradle-*.csv`, `all-xml-*.csv` and so on. The `skipped-*-files.csv` files
+`all-csharp-*.csv`, `all-gradle-*.csv`, `all-xml-*.csv`, `all-html-*.csv`, `all-css-*.csv` and so on. The `skipped-*-files.csv` files
 record every file that was not analysed and why, and a file the extractor loses part way leaves a row
 saying so, so a consumer can distinguish an empty result from an unanalysed one.
 
-`--per-language` writes `outputDir/<lang>/` instead of one flat folder. `--library` marks the tree as
+`--per-language` writes `outputDir/<lang>/` instead of one flat folder. The HTML and CSS tables are
+copied into every folder among `java/`, `javascript/` and `typescript/` that exists, since a page is
+read by whichever of those engines the repository runs; their frozen schema is
+`src/schema/web/schema.json` and the matching declarations `src/schema/web/decls_base_web.dl`. `--library` marks the tree as
 a dependency being staged rather than the project under analysis, so a build output directory its
 `package.json` ships from is walked as its source.
 
@@ -376,6 +414,8 @@ npx tsx src/test/javascript-tests.ts
 npx tsx src/test/csharp-tests.ts
 npx tsx src/test/gradle-tests.ts
 npx tsx src/test/services-tests.ts
+npx tsx src/test/web-tests.ts
+npx tsx src/test/web-torture.ts
 npx tsx src/test/discovery-tests.ts
 npx tsx src/test/java-gates/source-walk.ts
 ```
@@ -388,6 +428,19 @@ and torture scripts — dense files where each line is a known trap for a hand-r
 the language's answer asserted by line. `--corpus <dir>` adds sweeps over a real corpus that are
 development-only: absent from the plain run and failing, not passing, when the corpus is missing.
 
+The web suite is split the same way. `web-tests.ts` is the specification: format checks with the
+wrong implementation each rules out, a fixture tree with a golden for drift, key uniqueness,
+foreign-key integrity, schema arity and domains, determinism and the enum-emission audit.
+`web-torture.ts` is the adversary: it runs the analyzer over `src/test-data/web/torture`, a project
+written to hold every trap a static reader of a web project meets (a `<base href>`, links with query
+strings and fragments, `../` escaping the root, uppercase `REL`, declarative shadow roots, inline
+SVG with its own `<style>` and `<script>`, XHTML, quirks-mode markup, Jinja and Vue templates,
+escaped and non-ASCII class names, CSS nesting, layers, container queries, keyframes, `@import`
+chains, minified and 90 KB sheets) and asserts, join by join, that the IR carries what the
+documented joins need. Every check carries its verdict when it fails: a DEFECT (the parser could have
+read it) fails the run; a GAP (the IR cannot yet express it) and a LIMIT (nothing static can know
+it) are reported, so the list of what the front end does not do is explicit and kept current.
+
 What ships is what Python and TypeScript ship: fixtures, in-repo gates, committed expectations. The
 oracle harness that computes an expectation, and the `bless` command that writes it, live in a
 separate repository so that a suite cannot authorise its own expectations. One consequence is real
diff --git a/parser/package.json b/parser/package.json
index 175cb0199..d928c6d15 100644
--- a/parser/package.json
+++ b/parser/package.json
@@ -16,10 +16,13 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
+    "entities": "6.0.1",
     "sax": "^1.4.4",
     "tree-sitter": "^0.21.1",
     "tree-sitter-c-sharp": "0.23.1",
+    "tree-sitter-css": "0.23.0",
     "tree-sitter-groovy": "^0.1.2",
+    "tree-sitter-html": "0.23.2",
     "tree-sitter-java": "0.23.4",
     "tree-sitter-python": "^0.21.0",
     "typescript": "^5.3.3",
diff --git a/parser/src/analysis-types/css/CssComment.ts b/parser/src/analysis-types/css/CssComment.ts
new file mode 100644
index 000000000..eb98761eb
--- /dev/null
+++ b/parser/src/analysis-types/css/CssComment.ts
@@ -0,0 +1,49 @@
+import { WEB_COMMENT_TEXT_LIMIT } from '@/constants/web-constants';
+
+import { WebRow, boundedText, num } from '../web/web-row';
+
+/** A `/* … *\/` comment, with its text, for parity with the other front ends. */
+export class CssComment extends WebRow {
+  static readonly COLUMNS = [
+    'text', 'startLine', 'startColumn', 'endLine', 'endColumn', 'stylesheetLinkHash',
+    'serviceVersionLinkHash', 'cssCommentUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_comment';
+  readonly columns = CssComment.COLUMNS;
+
+  readonly text: string;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly endColumn: number;
+  readonly stylesheetLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    text: string; startLine: number; startColumn: number; endLine: number; endColumn: number;
+    stylesheetLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.text = props.text;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.endColumn = props.endColumn;
+    this.stylesheetLinkHash = props.stylesheetLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `CSS_COMMENT_md5(stylesheetLinkHash ‖ startLine ‖ startColumn)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('CSS_COMMENT', this.stylesheetLinkHash, this.startLine, this.startColumn);
+  }
+
+  protected values(): string[] {
+    return [
+      boundedText(this.text, WEB_COMMENT_TEXT_LIMIT), num(this.startLine), num(this.startColumn),
+      num(this.endLine), num(this.endColumn), this.stylesheetLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/CssDeclaration.ts b/parser/src/analysis-types/css/CssDeclaration.ts
new file mode 100644
index 000000000..9ddb9f628
--- /dev/null
+++ b/parser/src/analysis-types/css/CssDeclaration.ts
@@ -0,0 +1,77 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+
+import { WebRow, bool, boundedText, num, text } from '../web/web-row';
+
+/**
+ * One `property: value` pair.
+ *
+ * It belongs to exactly one of two owners, and the two are separate columns rather
+ * than one polymorphic link: `ruleLinkHash` for a declaration inside a rule block,
+ * `htmlAttributeLinkHash` for one written in a `style="…"` attribute. A polymorphic
+ * key defeats a referential-integrity gate — "the hash exists in one of two tables"
+ * is not integrity — so each column points at one relation and exactly one is set.
+ * `property` is kept as written: a custom property is case-sensitive and a vendor
+ * prefix is information.
+ */
+export class CssDeclaration extends WebRow {
+  static readonly COLUMNS = [
+    'property', 'valueText', 'isImportant', 'isCustomProperty', 'vendorPrefix', 'position',
+    'startLine', 'startColumn', 'endLine', 'endColumn', 'ruleLinkHash', 'htmlAttributeLinkHash',
+    'stylesheetLinkHash', 'serviceVersionLinkHash', 'cssDeclarationUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_declaration';
+  readonly columns = CssDeclaration.COLUMNS;
+
+  readonly property: string;
+  readonly valueText: string;
+  readonly isImportant: boolean;
+  readonly isCustomProperty: boolean;
+  readonly vendorPrefix: string;
+  readonly position: number;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly endColumn: number;
+  readonly ruleLinkHash: string;
+  readonly htmlAttributeLinkHash: string;
+  readonly stylesheetLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    property: string; valueText: string; isImportant: boolean; isCustomProperty: boolean; vendorPrefix: string;
+    position: number; startLine: number; startColumn: number; endLine: number; endColumn: number;
+    ruleLinkHash: string; htmlAttributeLinkHash: string; stylesheetLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.property = props.property;
+    this.valueText = props.valueText;
+    this.isImportant = props.isImportant;
+    this.isCustomProperty = props.isCustomProperty;
+    this.vendorPrefix = props.vendorPrefix;
+    this.position = props.position;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.endColumn = props.endColumn;
+    this.ruleLinkHash = props.ruleLinkHash;
+    this.htmlAttributeLinkHash = props.htmlAttributeLinkHash;
+    this.stylesheetLinkHash = props.stylesheetLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `CSS_DECLARATION_md5(ruleLinkHash ‖ htmlAttributeLinkHash ‖ position)` — one owner is empty. */
+  generateHash(): void {
+    this.hash = WebRow.key('CSS_DECLARATION', this.ruleLinkHash, this.htmlAttributeLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      text(this.property), boundedText(this.valueText, WEB_TEXT_LIMIT), bool(this.isImportant),
+      bool(this.isCustomProperty), text(this.vendorPrefix), num(this.position), num(this.startLine),
+      num(this.startColumn), num(this.endLine), num(this.endColumn), this.ruleLinkHash,
+      this.htmlAttributeLinkHash, this.stylesheetLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/CssParseGap.ts b/parser/src/analysis-types/css/CssParseGap.ts
new file mode 100644
index 000000000..6310e1f99
--- /dev/null
+++ b/parser/src/analysis-types/css/CssParseGap.ts
@@ -0,0 +1,55 @@
+import { WEB_COMMENT_TEXT_LIMIT } from '@/constants/web-constants';
+import { CssParseGapKind } from '@/enums/css/CssParseGapKind';
+
+import { WebRow, boundedText, num } from '../web/web-row';
+
+/** One region of a stylesheet whose rows are missing or suspect, recorded as data. */
+export class CssParseGap extends WebRow {
+  static readonly COLUMNS = [
+    'gapKind', 'detail', 'startLine', 'startColumn', 'endLine', 'endColumn', 'relatedRuleLinkHash',
+    'stylesheetLinkHash', 'serviceVersionLinkHash', 'cssParseGapUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_parse_gap';
+  readonly columns = CssParseGap.COLUMNS;
+
+  readonly gapKind: CssParseGapKind;
+  readonly detail: string;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly endColumn: number;
+  readonly relatedRuleLinkHash: string;
+  readonly stylesheetLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    gapKind: CssParseGapKind; detail: string; startLine: number; startColumn: number; endLine: number;
+    endColumn: number; relatedRuleLinkHash: string; stylesheetLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.gapKind = props.gapKind;
+    this.detail = props.detail;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.endColumn = props.endColumn;
+    this.relatedRuleLinkHash = props.relatedRuleLinkHash;
+    this.stylesheetLinkHash = props.stylesheetLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `CSS_PARSE_GAP_md5(stylesheetLinkHash ‖ gapKind ‖ startLine ‖ startColumn ‖ detail)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('CSS_PARSE_GAP', this.stylesheetLinkHash, this.gapKind, this.startLine, this.startColumn, this.detail);
+  }
+
+  protected values(): string[] {
+    return [
+      this.gapKind, boundedText(this.detail, WEB_COMMENT_TEXT_LIMIT), num(this.startLine), num(this.startColumn),
+      num(this.endLine), num(this.endColumn), this.relatedRuleLinkHash, this.stylesheetLinkHash,
+      this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/CssRule.ts b/parser/src/analysis-types/css/CssRule.ts
new file mode 100644
index 000000000..74b356a62
--- /dev/null
+++ b/parser/src/analysis-types/css/CssRule.ts
@@ -0,0 +1,95 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+import { CssRuleKind } from '@/enums/css/CssRuleKind';
+
+import { WebRow, boundedText, num, text } from '../web/web-row';
+
+/**
+ * A style rule or an at-rule, in the tree the stylesheet writes them in.
+ *
+ * `parentRuleLinkHash` is the enclosing `@media` / `@supports` / `@layer` block, or the
+ * style rule a nested rule sits in; empty at the top level. `position` is the ordinal
+ * among its siblings, and (parent, position) is the key, so two identical `.a {}` rules
+ * in one block are two rows. `name` is the thing an at-rule declares where it declares
+ * one — the `@keyframes` name, the `@layer` name, the `@container` name, the `@property`
+ * name, a `@font-face`'s `font-family` — the column a reference joins on.
+ */
+export class CssRule extends WebRow {
+  static readonly COLUMNS = [
+    'ruleKind', 'atRuleName', 'name', 'preludeText', 'selectorCount', 'declarationCount',
+    'childRuleCount', 'nestingDepth', 'position', 'startLine', 'startColumn', 'endLine', 'endColumn',
+    'parentRuleLinkHash', 'stylesheetLinkHash', 'serviceVersionLinkHash', 'cssRuleUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_rule';
+  readonly columns = CssRule.COLUMNS;
+
+  readonly ruleKind: CssRuleKind;
+  readonly atRuleName: string;
+  readonly preludeText: string;
+  readonly nestingDepth: number;
+  readonly position: number;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly endColumn: number;
+  readonly parentRuleLinkHash: string;
+  readonly stylesheetLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  private name: string;
+  private selectorCount = 0;
+  private declarationCount = 0;
+  private childRuleCount = 0;
+
+  constructor(props: {
+    ruleKind: CssRuleKind; atRuleName: string; name: string; preludeText: string; nestingDepth: number;
+    position: number; startLine: number; startColumn: number; endLine: number; endColumn: number;
+    parentRuleLinkHash: string; stylesheetLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.ruleKind = props.ruleKind;
+    this.atRuleName = props.atRuleName;
+    this.name = props.name;
+    this.preludeText = props.preludeText;
+    this.nestingDepth = props.nestingDepth;
+    this.position = props.position;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.endColumn = props.endColumn;
+    this.parentRuleLinkHash = props.parentRuleLinkHash;
+    this.stylesheetLinkHash = props.stylesheetLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `CSS_RULE_md5(stylesheetLinkHash ‖ parentRuleLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('CSS_RULE', this.stylesheetLinkHash, this.parentRuleLinkHash, this.position);
+  }
+
+  setCounts(counts: { selectorCount: number; declarationCount: number; childRuleCount: number }): void {
+    this.selectorCount = counts.selectorCount;
+    this.declarationCount = counts.declarationCount;
+    this.childRuleCount = counts.childRuleCount;
+  }
+
+  /** A `@font-face` learns its name from its `font-family` declaration, after its block is read. */
+  setName(name: string): void {
+    this.name = name;
+  }
+
+  getName(): string { return this.name; }
+  getSelectorCount(): number { return this.selectorCount; }
+  getDeclarationCount(): number { return this.declarationCount; }
+  getChildRuleCount(): number { return this.childRuleCount; }
+
+  protected values(): string[] {
+    return [
+      this.ruleKind, text(this.atRuleName), text(this.name), boundedText(this.preludeText, WEB_TEXT_LIMIT),
+      num(this.selectorCount), num(this.declarationCount), num(this.childRuleCount), num(this.nestingDepth),
+      num(this.position), num(this.startLine), num(this.startColumn), num(this.endLine), num(this.endColumn),
+      this.parentRuleLinkHash, this.stylesheetLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/CssSelector.ts b/parser/src/analysis-types/css/CssSelector.ts
new file mode 100644
index 000000000..3b81a3ec4
--- /dev/null
+++ b/parser/src/analysis-types/css/CssSelector.ts
@@ -0,0 +1,77 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+
+import { WebRow, bool, boundedText, num } from '../web/web-row';
+
+/**
+ * One complex selector of a style rule's selector list: `.a > b, #c` is two rows.
+ *
+ * Specificity is the (ids, classes, types) triple of the Selectors specification,
+ * computed from the parts: `:is()`/`:not()`/`:has()` take the most specific argument,
+ * `:where()` adds nothing, `&` adds the parent's. A nested rule's specificity here is
+ * the selector's OWN; the parent's contribution is a join through `css_rule`.
+ */
+export class CssSelector extends WebRow {
+  static readonly COLUMNS = [
+    'selectorText', 'position', 'specificityA', 'specificityB', 'specificityC', 'compoundCount',
+    'hasNesting', 'hasPseudoElement', 'startLine', 'startColumn', 'endLine', 'endColumn',
+    'ruleLinkHash', 'stylesheetLinkHash', 'serviceVersionLinkHash', 'cssSelectorUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_selector';
+  readonly columns = CssSelector.COLUMNS;
+
+  readonly selectorText: string;
+  readonly position: number;
+  readonly specificityA: number;
+  readonly specificityB: number;
+  readonly specificityC: number;
+  readonly compoundCount: number;
+  readonly hasNesting: boolean;
+  readonly hasPseudoElement: boolean;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly endColumn: number;
+  readonly ruleLinkHash: string;
+  readonly stylesheetLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    selectorText: string; position: number; specificityA: number; specificityB: number; specificityC: number;
+    compoundCount: number; hasNesting: boolean; hasPseudoElement: boolean; startLine: number;
+    startColumn: number; endLine: number; endColumn: number; ruleLinkHash: string;
+    stylesheetLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.selectorText = props.selectorText;
+    this.position = props.position;
+    this.specificityA = props.specificityA;
+    this.specificityB = props.specificityB;
+    this.specificityC = props.specificityC;
+    this.compoundCount = props.compoundCount;
+    this.hasNesting = props.hasNesting;
+    this.hasPseudoElement = props.hasPseudoElement;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.endColumn = props.endColumn;
+    this.ruleLinkHash = props.ruleLinkHash;
+    this.stylesheetLinkHash = props.stylesheetLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `CSS_SELECTOR_md5(ruleLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('CSS_SELECTOR', this.ruleLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      boundedText(this.selectorText, WEB_TEXT_LIMIT), num(this.position), num(this.specificityA),
+      num(this.specificityB), num(this.specificityC), num(this.compoundCount), bool(this.hasNesting),
+      bool(this.hasPseudoElement), num(this.startLine), num(this.startColumn), num(this.endLine),
+      num(this.endColumn), this.ruleLinkHash, this.stylesheetLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/CssSelectorPart.ts b/parser/src/analysis-types/css/CssSelectorPart.ts
new file mode 100644
index 000000000..db8c6d96f
--- /dev/null
+++ b/parser/src/analysis-types/css/CssSelectorPart.ts
@@ -0,0 +1,84 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+import { CssCombinator, CssSelectorPartKind } from '@/enums/css/CssSelectorPartKind';
+
+import { WebRow, boundedText, num, text } from '../web/web-row';
+
+/**
+ * One simple selector of a complex selector, in writing order.
+ *
+ * `compoundIndex` groups the parts between combinators; `combinatorBefore` is the
+ * combinator written before this part's compound (NONE inside a compound and on the
+ * first). A functional pseudo-class's argument selectors are child parts — `depth` 1,
+ * `parentPartLinkHash` the `:not` / `:is` / `:has` part, `argumentIndex` which of its
+ * comma-separated arguments the part belongs to — so `.nav:not(.open, .busy) a` is six
+ * rows, the CLASS `open` is distinguishable as negated, and `open` and `busy` as two
+ * alternatives rather than one compound. `position` is the pre-order ordinal over the
+ * whole tree, and (selector, position) is the key.
+ */
+export class CssSelectorPart extends WebRow {
+  static readonly COLUMNS = [
+    'partKind', 'name', 'value', 'attributeMatcher', 'attributeFlags', 'combinatorBefore',
+    'compoundIndex', 'position', 'depth', 'argumentIndex', 'startLine', 'startColumn', 'parentPartLinkHash',
+    'selectorLinkHash', 'ruleLinkHash', 'serviceVersionLinkHash', 'cssSelectorPartUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_selector_part';
+  readonly columns = CssSelectorPart.COLUMNS;
+
+  readonly partKind: CssSelectorPartKind;
+  readonly name: string;
+  readonly value: string;
+  readonly attributeMatcher: string;
+  readonly attributeFlags: string;
+  readonly combinatorBefore: CssCombinator;
+  readonly compoundIndex: number;
+  readonly position: number;
+  readonly depth: number;
+  readonly argumentIndex: number;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly parentPartLinkHash: string;
+  readonly selectorLinkHash: string;
+  readonly ruleLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    partKind: CssSelectorPartKind; name: string; value: string; attributeMatcher: string; attributeFlags: string;
+    combinatorBefore: CssCombinator; compoundIndex: number; position: number; depth: number; argumentIndex: number;
+    startLine: number; startColumn: number; parentPartLinkHash: string; selectorLinkHash: string;
+    ruleLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.partKind = props.partKind;
+    this.name = props.name;
+    this.value = props.value;
+    this.attributeMatcher = props.attributeMatcher;
+    this.attributeFlags = props.attributeFlags;
+    this.combinatorBefore = props.combinatorBefore;
+    this.compoundIndex = props.compoundIndex;
+    this.position = props.position;
+    this.depth = props.depth;
+    this.argumentIndex = props.argumentIndex;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.parentPartLinkHash = props.parentPartLinkHash;
+    this.selectorLinkHash = props.selectorLinkHash;
+    this.ruleLinkHash = props.ruleLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `CSS_SELECTOR_PART_md5(selectorLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('CSS_SELECTOR_PART', this.selectorLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      this.partKind, text(this.name), boundedText(this.value, WEB_TEXT_LIMIT), text(this.attributeMatcher),
+      text(this.attributeFlags), this.combinatorBefore, num(this.compoundIndex), num(this.position),
+      num(this.depth), num(this.argumentIndex), num(this.startLine), num(this.startColumn), this.parentPartLinkHash,
+      this.selectorLinkHash, this.ruleLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/CssStylesheet.ts b/parser/src/analysis-types/css/CssStylesheet.ts
new file mode 100644
index 000000000..d3118b172
--- /dev/null
+++ b/parser/src/analysis-types/css/CssStylesheet.ts
@@ -0,0 +1,95 @@
+import { CssSourceProvenance, CssStylesheetSource } from '@/enums/css/CssStylesheetSource';
+
+import { stableRootId } from '../stable-root-id';
+import { WebRow, num, text } from '../web/web-row';
+
+/**
+ * One stylesheet — the root of every CSS key.
+ *
+ * A `.css` file is keyed on its path from the root (portable, as the HTML document is).
+ * A `<style>` element's sheet is keyed on the HTML ELEMENT that holds it, so the same
+ * text in two pages is two sheets and a page with two `<style>` blocks has two rows
+ * at two positions; `filePath` is then the page's and `startLine` is where the CSS
+ * begins inside it. The counts are back-patched after extraction.
+ */
+export class CssStylesheet extends WebRow {
+  static readonly COLUMNS = [
+    'name', 'fileName', 'filePath', 'baseMservPath', 'relativePath', 'sourceKind', 'sourceProvenance',
+    'ownerHtmlElementLinkHash', 'htmlDocumentLinkHash', 'startLine', 'startColumn', 'endLine',
+    'ruleCount', 'declarationCount', 'parseGapCount', 'serviceVersionLinkHash', 'cssStylesheetUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_stylesheet';
+  readonly columns = CssStylesheet.COLUMNS;
+
+  readonly name: string;
+  readonly fileName: string;
+  readonly filePath: string;
+  readonly baseMservPath: string;
+  readonly relativePath: string;
+  readonly sourceKind: CssStylesheetSource;
+  readonly sourceProvenance: CssSourceProvenance;
+  readonly ownerHtmlElementLinkHash: string;
+  readonly htmlDocumentLinkHash: string;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly serviceVersionLinkHash: string;
+
+  private ruleCount = 0;
+  private declarationCount = 0;
+  private parseGapCount = 0;
+
+  constructor(props: {
+    name: string; fileName: string; filePath: string; baseMservPath: string; relativePath: string;
+    sourceKind: CssStylesheetSource; sourceProvenance: CssSourceProvenance; ownerHtmlElementLinkHash: string;
+    htmlDocumentLinkHash: string; startLine: number; startColumn: number; endLine: number;
+    serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.name = props.name;
+    this.fileName = props.fileName;
+    this.filePath = props.filePath;
+    this.baseMservPath = props.baseMservPath;
+    this.relativePath = props.relativePath;
+    this.sourceKind = props.sourceKind;
+    this.sourceProvenance = props.sourceProvenance;
+    this.ownerHtmlElementLinkHash = props.ownerHtmlElementLinkHash;
+    this.htmlDocumentLinkHash = props.htmlDocumentLinkHash;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /**
+   * **PK** a file: `CSS_STYLESHEET_md5(FILE ‖ relativePath ‖ rootId ‖ serviceVersionLinkHash)`;
+   * a `<style>` element: `CSS_STYLESHEET_md5(HTML_STYLE_ELEMENT ‖ ownerHtmlElementLinkHash)`.
+   */
+  generateHash(): void {
+    this.hash = this.sourceKind === CssStylesheetSource.FILE
+      ? WebRow.key('CSS_STYLESHEET', this.sourceKind, this.relativePath, stableRootId(this.baseMservPath), this.serviceVersionLinkHash)
+      : WebRow.key('CSS_STYLESHEET', this.sourceKind, this.ownerHtmlElementLinkHash);
+  }
+
+  setCounts(counts: { ruleCount: number; declarationCount: number; parseGapCount: number }): void {
+    this.ruleCount = counts.ruleCount;
+    this.declarationCount = counts.declarationCount;
+    this.parseGapCount = counts.parseGapCount;
+  }
+
+  getRuleCount(): number { return this.ruleCount; }
+  getDeclarationCount(): number { return this.declarationCount; }
+  getParseGapCount(): number { return this.parseGapCount; }
+
+  protected values(): string[] {
+    return [
+      text(this.name), text(this.fileName), text(this.filePath), text(this.baseMservPath),
+      text(this.relativePath), this.sourceKind, this.sourceProvenance, this.ownerHtmlElementLinkHash,
+      this.htmlDocumentLinkHash, num(this.startLine), num(this.startColumn), num(this.endLine),
+      num(this.ruleCount), num(this.declarationCount), num(this.parseGapCount),
+      this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/CssValueReference.ts b/parser/src/analysis-types/css/CssValueReference.ts
new file mode 100644
index 000000000..a53701d9b
--- /dev/null
+++ b/parser/src/analysis-types/css/CssValueReference.ts
@@ -0,0 +1,77 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+import { CssValueReferenceKind } from '@/enums/css/CssValueReferenceKind';
+import { WebUrlKind } from '@/enums/web/WebUrlKind';
+
+import { WebRow, bool, boundedText, num, text } from '../web/web-row';
+
+/**
+ * A name a value refers to: a custom property, a file, a keyframes animation, a layer,
+ * a container, a font family.
+ *
+ * Owned by a declaration (`ownerDeclarationLinkHash`) or, for `@import` / `@layer` /
+ * `@container` preludes, by the at-rule (`ownerRuleLinkHash`); exactly one is set.
+ * `urlKind`, `resolvedFilePath` and `isResolved` are meaningful for URL and IMPORT
+ * only and empty otherwise. No link to the declaration or rule the name reaches: that
+ * depends on the cascade, and the engine decides it by joining on `name`.
+ */
+export class CssValueReference extends WebRow {
+  static readonly COLUMNS = [
+    'referenceKind', 'name', 'fallbackText', 'urlKind', 'resolvedFilePath', 'isResolved', 'position',
+    'startLine', 'startColumn', 'ownerDeclarationLinkHash', 'ownerRuleLinkHash', 'stylesheetLinkHash',
+    'serviceVersionLinkHash', 'cssValueReferenceUniqueHash',
+  ] as const;
+
+  readonly relation = 'css_value_reference';
+  readonly columns = CssValueReference.COLUMNS;
+
+  readonly referenceKind: CssValueReferenceKind;
+  readonly name: string;
+  readonly fallbackText: string;
+  readonly urlKind: WebUrlKind | '';
+  readonly resolvedFilePath: string;
+  readonly isResolved: boolean;
+  readonly position: number;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly ownerDeclarationLinkHash: string;
+  readonly ownerRuleLinkHash: string;
+  readonly stylesheetLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    referenceKind: CssValueReferenceKind; name: string; fallbackText: string; urlKind: WebUrlKind | '';
+    resolvedFilePath: string; isResolved: boolean; position: number; startLine: number; startColumn: number;
+    ownerDeclarationLinkHash: string; ownerRuleLinkHash: string; stylesheetLinkHash: string;
+    serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.referenceKind = props.referenceKind;
+    this.name = props.name;
+    this.fallbackText = props.fallbackText;
+    this.urlKind = props.urlKind;
+    this.resolvedFilePath = props.resolvedFilePath;
+    this.isResolved = props.isResolved;
+    this.position = props.position;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.ownerDeclarationLinkHash = props.ownerDeclarationLinkHash;
+    this.ownerRuleLinkHash = props.ownerRuleLinkHash;
+    this.stylesheetLinkHash = props.stylesheetLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `CSS_VALUE_REFERENCE_md5(ownerDeclarationLinkHash ‖ ownerRuleLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('CSS_VALUE_REFERENCE', this.ownerDeclarationLinkHash, this.ownerRuleLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      this.referenceKind, boundedText(this.name, WEB_TEXT_LIMIT), boundedText(this.fallbackText, WEB_TEXT_LIMIT),
+      this.urlKind, text(this.resolvedFilePath), bool(this.isResolved), num(this.position), num(this.startLine),
+      num(this.startColumn), this.ownerDeclarationLinkHash, this.ownerRuleLinkHash, this.stylesheetLinkHash,
+      this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/css/index.ts b/parser/src/analysis-types/css/index.ts
new file mode 100644
index 000000000..dc434d49c
--- /dev/null
+++ b/parser/src/analysis-types/css/index.ts
@@ -0,0 +1,8 @@
+export { CssComment } from '@/analysis-types/css/CssComment';
+export { CssDeclaration } from '@/analysis-types/css/CssDeclaration';
+export { CssParseGap } from '@/analysis-types/css/CssParseGap';
+export { CssRule } from '@/analysis-types/css/CssRule';
+export { CssSelector } from '@/analysis-types/css/CssSelector';
+export { CssSelectorPart } from '@/analysis-types/css/CssSelectorPart';
+export { CssStylesheet } from '@/analysis-types/css/CssStylesheet';
+export { CssValueReference } from '@/analysis-types/css/CssValueReference';
diff --git a/parser/src/analysis-types/html/HtmlAttribute.ts b/parser/src/analysis-types/html/HtmlAttribute.ts
new file mode 100644
index 000000000..cd4a20820
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlAttribute.ts
@@ -0,0 +1,63 @@
+import { WEB_ATTRIBUTE_VALUE_LIMIT } from '@/constants/web-constants';
+import { HtmlAttributeKind } from '@/enums/html/HtmlAttributeKind';
+
+import { WebRow, bool, boundedText, num, text } from '../web/web-row';
+
+/**
+ * One attribute of one element. The HTML algorithm keeps the FIRST of two attributes
+ * with one name and reports the second as a parse error, so (element, prefix, name) is
+ * unique and is the key. `hasValue` separates `disabled` from `disabled=""`, which the
+ * tree does not: both reach the parser as the empty string.
+ */
+export class HtmlAttribute extends WebRow {
+  static readonly COLUMNS = [
+    'name', 'prefix', 'value', 'attributeKind', 'hasValue', 'startLine', 'startColumn',
+    'ownerElementLinkHash', 'documentLinkHash', 'serviceVersionLinkHash', 'htmlAttributeUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_attribute';
+  readonly columns = HtmlAttribute.COLUMNS;
+
+  readonly name: string;
+  readonly prefix: string;
+  readonly value: string;
+  readonly attributeKind: HtmlAttributeKind;
+  readonly hasValue: boolean;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly ownerElementLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    name: string; prefix: string; value: string; attributeKind: HtmlAttributeKind; hasValue: boolean;
+    startLine: number; startColumn: number; ownerElementLinkHash: string; documentLinkHash: string;
+    serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.name = props.name;
+    this.prefix = props.prefix;
+    this.value = props.value;
+    this.attributeKind = props.attributeKind;
+    this.hasValue = props.hasValue;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.ownerElementLinkHash = props.ownerElementLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_ATTRIBUTE_md5(ownerElementLinkHash ‖ prefix ‖ name)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_ATTRIBUTE', this.ownerElementLinkHash, this.prefix, this.name);
+  }
+
+  protected values(): string[] {
+    return [
+      text(this.name), text(this.prefix), boundedText(this.value, WEB_ATTRIBUTE_VALUE_LIMIT),
+      this.attributeKind, bool(this.hasValue), num(this.startLine), num(this.startColumn),
+      this.ownerElementLinkHash, this.documentLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/HtmlClassReference.ts b/parser/src/analysis-types/html/HtmlClassReference.ts
new file mode 100644
index 000000000..ea1403c44
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlClassReference.ts
@@ -0,0 +1,50 @@
+import { WebRow, num, text } from '../web/web-row';
+
+/**
+ * One token of a `class` attribute: the row `css_selector_part` (kind CLASS) joins on.
+ * A class written twice on one element is two rows at two positions, as written.
+ */
+export class HtmlClassReference extends WebRow {
+  static readonly COLUMNS = [
+    'className', 'position', 'startLine', 'ownerElementLinkHash', 'attributeLinkHash',
+    'documentLinkHash', 'serviceVersionLinkHash', 'htmlClassReferenceUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_class_reference';
+  readonly columns = HtmlClassReference.COLUMNS;
+
+  readonly className: string;
+  readonly position: number;
+  readonly startLine: number;
+  readonly ownerElementLinkHash: string;
+  readonly attributeLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    className: string; position: number; startLine: number; ownerElementLinkHash: string;
+    attributeLinkHash: string; documentLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.className = props.className;
+    this.position = props.position;
+    this.startLine = props.startLine;
+    this.ownerElementLinkHash = props.ownerElementLinkHash;
+    this.attributeLinkHash = props.attributeLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_CLASS_REFERENCE_md5(attributeLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_CLASS_REFERENCE', this.attributeLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      text(this.className), num(this.position), num(this.startLine), this.ownerElementLinkHash,
+      this.attributeLinkHash, this.documentLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/HtmlDocument.ts b/parser/src/analysis-types/html/HtmlDocument.ts
new file mode 100644
index 000000000..9ab5fe306
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlDocument.ts
@@ -0,0 +1,111 @@
+import { CssSourceProvenance } from '@/enums/css/CssStylesheetSource';
+import { HtmlDocumentKind } from '@/enums/html/HtmlDocumentKind';
+import { HtmlTemplateDialect } from '@/enums/html/HtmlTemplateDialect';
+
+import { stableRootId } from '../stable-root-id';
+import { WebRow, commaSet, num, text } from '../web/web-row';
+
+/**
+ * One HTML file — the root of every HTML key.
+ *
+ * `relativePath` is the file's path from `baseMservPath` with `/` separators, so the
+ * key is portable across machines; `filePath` is the absolute path a reader opens.
+ * The counts are back-patched once the tree is walked: they describe the document
+ * and are not part of its identity.
+ */
+export class HtmlDocument extends WebRow {
+  static readonly COLUMNS = [
+    'name', 'fileName', 'filePath', 'baseMservPath', 'relativePath', 'documentKind', 'doctype',
+    'lang', 'title', 'templateDialects', 'sourceProvenance', 'elementCount', 'scriptCount',
+    'inlineScriptCount', 'stylesheetReferenceCount', 'inlineStyleCount', 'parseGapCount',
+    'startLine', 'endLine', 'serviceVersionLinkHash', 'htmlDocumentUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_document';
+  readonly columns = HtmlDocument.COLUMNS;
+
+  readonly name: string;
+  readonly fileName: string;
+  readonly filePath: string;
+  readonly baseMservPath: string;
+  readonly relativePath: string;
+  readonly documentKind: HtmlDocumentKind;
+  readonly doctype: string;
+  readonly lang: string;
+  readonly templateDialects: ReadonlySet<HtmlTemplateDialect>;
+  readonly sourceProvenance: CssSourceProvenance;
+  readonly startLine: number;
+  readonly endLine: number;
+  readonly serviceVersionLinkHash: string;
+
+  /** Back-patched: the `<title>` is met during the walk, after the row is minted; it is not part of the key. */
+  private title: string;
+  private elementCount = 0;
+  private scriptCount = 0;
+  private inlineScriptCount = 0;
+  private stylesheetReferenceCount = 0;
+  private inlineStyleCount = 0;
+  private parseGapCount = 0;
+
+  constructor(props: {
+    name: string; fileName: string; filePath: string; baseMservPath: string; relativePath: string;
+    documentKind: HtmlDocumentKind; doctype: string; lang: string; title: string;
+    templateDialects: ReadonlySet<HtmlTemplateDialect>; sourceProvenance: CssSourceProvenance;
+    startLine: number; endLine: number; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.name = props.name;
+    this.fileName = props.fileName;
+    this.filePath = props.filePath;
+    this.baseMservPath = props.baseMservPath;
+    this.relativePath = props.relativePath;
+    this.documentKind = props.documentKind;
+    this.doctype = props.doctype;
+    this.lang = props.lang;
+    this.title = props.title;
+    this.templateDialects = props.templateDialects;
+    this.sourceProvenance = props.sourceProvenance;
+    this.startLine = props.startLine;
+    this.endLine = props.endLine;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_DOCUMENT_md5(relativePath ‖ rootId ‖ serviceVersionLinkHash)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_DOCUMENT', this.relativePath, stableRootId(this.baseMservPath), this.serviceVersionLinkHash);
+  }
+
+  setCounts(counts: {
+    elementCount: number; scriptCount: number; inlineScriptCount: number;
+    stylesheetReferenceCount: number; inlineStyleCount: number; parseGapCount: number;
+  }): void {
+    this.elementCount = counts.elementCount;
+    this.scriptCount = counts.scriptCount;
+    this.inlineScriptCount = counts.inlineScriptCount;
+    this.stylesheetReferenceCount = counts.stylesheetReferenceCount;
+    this.inlineStyleCount = counts.inlineStyleCount;
+    this.parseGapCount = counts.parseGapCount;
+  }
+
+  setTitle(title: string): void {
+    this.title = title;
+  }
+
+  getTitle(): string { return this.title; }
+  getElementCount(): number { return this.elementCount; }
+  getParseGapCount(): number { return this.parseGapCount; }
+
+  protected values(): string[] {
+    return [
+      text(this.name), text(this.fileName), text(this.filePath), text(this.baseMservPath),
+      text(this.relativePath), this.documentKind, text(this.doctype), text(this.lang),
+      text(this.title), commaSet(this.templateDialects), this.sourceProvenance,
+      num(this.elementCount), num(this.scriptCount), num(this.inlineScriptCount),
+      num(this.stylesheetReferenceCount), num(this.inlineStyleCount), num(this.parseGapCount),
+      num(this.startLine), num(this.endLine), this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
+
+
diff --git a/parser/src/analysis-types/html/HtmlElement.ts b/parser/src/analysis-types/html/HtmlElement.ts
new file mode 100644
index 000000000..ccd490ecd
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlElement.ts
@@ -0,0 +1,92 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+import { HtmlNamespace } from '@/enums/html/HtmlNamespace';
+
+import { WebRow, bool, boundedText, commaList, num, text } from '../web/web-row';
+
+/**
+ * One element of a page.
+ *
+ * `path` is an XPath-like address with sibling indexes (`/html[1]/body[1]/div[2]/a[1]`),
+ * unique within a document, and it is what the key chains on: two `<a>` on one line are
+ * two elements. `id` and `classNames` are repeated here from the attributes because they
+ * are the two columns a consumer joins CSS and script references on; the attribute rows
+ * still exist and carry the position.
+ *
+ * Only elements WRITTEN in the source are rows: the grammar does not insert the `html`,
+ * `head` and `body` a browser would imply, so a fragment's top-level elements have no
+ * parent and chain straight to the document.
+ */
+export class HtmlElement extends WebRow {
+  static readonly COLUMNS = [
+    'tagName', 'namespace', 'path', 'depth', 'id', 'classNames', 'textContent', 'isVoid', 'childElementCount', 'attributeCount', 'position', 'startLine', 'startColumn',
+    'endLine', 'endColumn', 'parentElementLinkHash', 'documentLinkHash',
+    'serviceVersionLinkHash', 'htmlElementUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_element';
+  readonly columns = HtmlElement.COLUMNS;
+
+  readonly tagName: string;
+  readonly namespace: HtmlNamespace;
+  readonly path: string;
+  readonly depth: number;
+  readonly id: string;
+  readonly classNames: readonly string[];
+  readonly textContent: string;
+  readonly isVoid: boolean;
+  readonly childElementCount: number;
+  readonly attributeCount: number;
+  readonly position: number;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly endColumn: number;
+  readonly parentElementLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    tagName: string; namespace: HtmlNamespace; path: string; depth: number; id: string;
+    classNames: readonly string[]; textContent: string; isVoid: boolean;
+    childElementCount: number; attributeCount: number; position: number; startLine: number;
+    startColumn: number; endLine: number; endColumn: number; parentElementLinkHash: string;
+    documentLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.tagName = props.tagName;
+    this.namespace = props.namespace;
+    this.path = props.path;
+    this.depth = props.depth;
+    this.id = props.id;
+    this.classNames = props.classNames;
+    this.textContent = props.textContent;
+    this.isVoid = props.isVoid;
+    this.childElementCount = props.childElementCount;
+    this.attributeCount = props.attributeCount;
+    this.position = props.position;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.endColumn = props.endColumn;
+    this.parentElementLinkHash = props.parentElementLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_ELEMENT_md5(documentLinkHash ‖ path)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_ELEMENT', this.documentLinkHash, this.path);
+  }
+
+  protected values(): string[] {
+    return [
+      text(this.tagName), this.namespace, text(this.path), num(this.depth), text(this.id),
+      text(commaList(this.classNames)), boundedText(this.textContent, WEB_TEXT_LIMIT),
+      bool(this.isVoid), num(this.childElementCount),
+      num(this.attributeCount), num(this.position), num(this.startLine), num(this.startColumn),
+      num(this.endLine), num(this.endColumn), this.parentElementLinkHash, this.documentLinkHash,
+      this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/HtmlHandlerCall.ts b/parser/src/analysis-types/html/HtmlHandlerCall.ts
new file mode 100644
index 000000000..598339039
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlHandlerCall.ts
@@ -0,0 +1,80 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+import { HtmlHandlerSource } from '@/enums/html/HtmlHandlerSource';
+
+import { WebRow, bool, boundedText, num, text } from '../web/web-row';
+
+/**
+ * One call written inside an event-handler attribute or a `javascript:` URL.
+ *
+ * `onclick="save(this); tracker.log('x')"` is two rows. The callee is kept three ways —
+ * `calleeName` is the last identifier (`log`), `receiverText` what it is called on
+ * (`tracker`, or empty), `calleeText` the whole callee as written — because a global
+ * function from a classic `<script src>` resolves by `calleeName` alone and a member
+ * call needs its receiver. Every call in the text is a row, nested ones too:
+ * `if (confirm('?')) remove()` reaches both. Resolution is the engine's, exactly as
+ * for a JavaScript call site: the row carries the name, not a target.
+ */
+export class HtmlHandlerCall extends WebRow {
+  static readonly COLUMNS = [
+    'handlerSource', 'eventName', 'calleeName', 'receiverText', 'calleeText', 'argumentCount',
+    'isNew', 'position', 'startLine', 'startColumn', 'ownerElementLinkHash', 'attributeLinkHash',
+    'documentLinkHash', 'serviceVersionLinkHash', 'htmlHandlerCallUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_handler_call';
+  readonly columns = HtmlHandlerCall.COLUMNS;
+
+  readonly handlerSource: HtmlHandlerSource;
+  readonly eventName: string;
+  readonly calleeName: string;
+  readonly receiverText: string;
+  readonly calleeText: string;
+  readonly argumentCount: number;
+  readonly isNew: boolean;
+  readonly position: number;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly ownerElementLinkHash: string;
+  readonly attributeLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    handlerSource: HtmlHandlerSource; eventName: string; calleeName: string; receiverText: string;
+    calleeText: string; argumentCount: number; isNew: boolean; position: number; startLine: number;
+    startColumn: number; ownerElementLinkHash: string; attributeLinkHash: string;
+    documentLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.handlerSource = props.handlerSource;
+    this.eventName = props.eventName;
+    this.calleeName = props.calleeName;
+    this.receiverText = props.receiverText;
+    this.calleeText = props.calleeText;
+    this.argumentCount = props.argumentCount;
+    this.isNew = props.isNew;
+    this.position = props.position;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.ownerElementLinkHash = props.ownerElementLinkHash;
+    this.attributeLinkHash = props.attributeLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_HANDLER_CALL_md5(attributeLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_HANDLER_CALL', this.attributeLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      this.handlerSource, text(this.eventName), text(this.calleeName),
+      boundedText(this.receiverText, WEB_TEXT_LIMIT), boundedText(this.calleeText, WEB_TEXT_LIMIT),
+      num(this.argumentCount), bool(this.isNew), num(this.position), num(this.startLine),
+      num(this.startColumn), this.ownerElementLinkHash, this.attributeLinkHash,
+      this.documentLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/HtmlParseGap.ts b/parser/src/analysis-types/html/HtmlParseGap.ts
new file mode 100644
index 000000000..791b4d9e1
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlParseGap.ts
@@ -0,0 +1,59 @@
+import { WEB_COMMENT_TEXT_LIMIT } from '@/constants/web-constants';
+import { HtmlParseGapKind } from '@/enums/html/HtmlParseGapKind';
+
+import { WebRow, boundedText, num } from '../web/web-row';
+
+/**
+ * One thing the HTML front end could not read as the author meant it. Recorded as data
+ * rather than a log line, so "this page has no handler calls" and "this page's handlers
+ * did not parse" are different rows.
+ */
+export class HtmlParseGap extends WebRow {
+  static readonly COLUMNS = [
+    'gapKind', 'detail', 'startLine', 'startColumn', 'endLine', 'endColumn',
+    'relatedElementLinkHash', 'documentLinkHash', 'serviceVersionLinkHash', 'htmlParseGapUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_parse_gap';
+  readonly columns = HtmlParseGap.COLUMNS;
+
+  readonly gapKind: HtmlParseGapKind;
+  readonly detail: string;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly endLine: number;
+  readonly endColumn: number;
+  readonly relatedElementLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    gapKind: HtmlParseGapKind; detail: string; startLine: number; startColumn: number; endLine: number;
+    endColumn: number; relatedElementLinkHash: string; documentLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.gapKind = props.gapKind;
+    this.detail = props.detail;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.endLine = props.endLine;
+    this.endColumn = props.endColumn;
+    this.relatedElementLinkHash = props.relatedElementLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_PARSE_GAP_md5(documentLinkHash ‖ gapKind ‖ startLine ‖ startColumn ‖ detail)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_PARSE_GAP', this.documentLinkHash, this.gapKind, this.startLine, this.startColumn, this.detail);
+  }
+
+  protected values(): string[] {
+    return [
+      this.gapKind, boundedText(this.detail, WEB_COMMENT_TEXT_LIMIT), num(this.startLine),
+      num(this.startColumn), num(this.endLine), num(this.endColumn), this.relatedElementLinkHash,
+      this.documentLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/HtmlReference.ts b/parser/src/analysis-types/html/HtmlReference.ts
new file mode 100644
index 000000000..f431d3256
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlReference.ts
@@ -0,0 +1,84 @@
+import { WEB_ATTRIBUTE_VALUE_LIMIT } from '@/constants/web-constants';
+import { HtmlReferenceKind } from '@/enums/html/HtmlReferenceKind';
+import { WebUrlKind } from '@/enums/web/WebUrlKind';
+
+import { WebRow, bool, boundedText, num, text } from '../web/web-row';
+
+/**
+ * One URL a page names: a script, a stylesheet, a link, an image, a form target.
+ *
+ * `resolvedFilePath` is filled only when the URL is RELATIVE or ROOT_RELATIVE and the
+ * file EXISTS where the text says; `isResolved` says which. A URL that resolves to
+ * nothing is still a row — the reference is real, the file is not there — and the
+ * engine joins `resolvedFilePath` to the module, stylesheet or document it names.
+ * A `srcset` is several candidates in one attribute; `position` tells them apart.
+ */
+export class HtmlReference extends WebRow {
+  static readonly COLUMNS = [
+    'referenceKind', 'urlAsWritten', 'urlKind', 'path', 'query', 'fragment', 'resolvedFilePath',
+    'isResolved', 'position', 'attributeName', 'startLine', 'startColumn', 'ownerElementLinkHash',
+    'attributeLinkHash', 'documentLinkHash', 'serviceVersionLinkHash', 'htmlReferenceUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_reference';
+  readonly columns = HtmlReference.COLUMNS;
+
+  readonly referenceKind: HtmlReferenceKind;
+  readonly urlAsWritten: string;
+  readonly urlKind: WebUrlKind;
+  readonly path: string;
+  readonly query: string;
+  readonly fragment: string;
+  readonly resolvedFilePath: string;
+  readonly isResolved: boolean;
+  readonly position: number;
+  readonly attributeName: string;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly ownerElementLinkHash: string;
+  readonly attributeLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    referenceKind: HtmlReferenceKind; urlAsWritten: string; urlKind: WebUrlKind; path: string;
+    query: string; fragment: string; resolvedFilePath: string; isResolved: boolean; position: number;
+    attributeName: string; startLine: number; startColumn: number; ownerElementLinkHash: string;
+    attributeLinkHash: string; documentLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.referenceKind = props.referenceKind;
+    this.urlAsWritten = props.urlAsWritten;
+    this.urlKind = props.urlKind;
+    this.path = props.path;
+    this.query = props.query;
+    this.fragment = props.fragment;
+    this.resolvedFilePath = props.resolvedFilePath;
+    this.isResolved = props.isResolved;
+    this.position = props.position;
+    this.attributeName = props.attributeName;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.ownerElementLinkHash = props.ownerElementLinkHash;
+    this.attributeLinkHash = props.attributeLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_REFERENCE_md5(attributeLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_REFERENCE', this.attributeLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      this.referenceKind, boundedText(this.urlAsWritten, WEB_ATTRIBUTE_VALUE_LIMIT), this.urlKind,
+      boundedText(this.path, WEB_ATTRIBUTE_VALUE_LIMIT), boundedText(this.query, WEB_ATTRIBUTE_VALUE_LIMIT),
+      boundedText(this.fragment, WEB_ATTRIBUTE_VALUE_LIMIT), text(this.resolvedFilePath),
+      bool(this.isResolved), num(this.position), text(this.attributeName), num(this.startLine),
+      num(this.startColumn), this.ownerElementLinkHash, this.attributeLinkHash,
+      this.documentLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/HtmlScript.ts b/parser/src/analysis-types/html/HtmlScript.ts
new file mode 100644
index 000000000..b57e69854
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlScript.ts
@@ -0,0 +1,86 @@
+import { WEB_ATTRIBUTE_VALUE_LIMIT } from '@/constants/web-constants';
+import { HtmlScriptKind, HtmlScriptType } from '@/enums/html/HtmlScriptKind';
+
+import { WebRow, bool, boundedText, num, text } from '../web/web-row';
+
+/**
+ * One `<script>` element, 1:1 with its `html_element` row.
+ *
+ * For an INLINE script the body range locates the code in the page, line and column,
+ * so a script front end can read it at its own offsets; the body itself is not copied
+ * into the relation. For an EXTERNAL one `referenceLinkHash` is the `html_reference`
+ * row that resolves the `src`.
+ */
+export class HtmlScript extends WebRow {
+  static readonly COLUMNS = [
+    'scriptKind', 'scriptType', 'typeAsWritten', 'src', 'resolvedFilePath', 'isAsync', 'isDefer',
+    'isNoModule', 'bodyStartLine', 'bodyStartColumn', 'bodyEndLine', 'bodyEndColumn', 'bodyLength',
+    'ownerElementLinkHash', 'referenceLinkHash', 'documentLinkHash', 'serviceVersionLinkHash',
+    'htmlScriptUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_script';
+  readonly columns = HtmlScript.COLUMNS;
+
+  readonly scriptKind: HtmlScriptKind;
+  readonly scriptType: HtmlScriptType;
+  readonly typeAsWritten: string;
+  readonly src: string;
+  readonly resolvedFilePath: string;
+  readonly isAsync: boolean;
+  readonly isDefer: boolean;
+  readonly isNoModule: boolean;
+  readonly bodyStartLine: number;
+  readonly bodyStartColumn: number;
+  readonly bodyEndLine: number;
+  readonly bodyEndColumn: number;
+  readonly bodyLength: number;
+  readonly ownerElementLinkHash: string;
+  readonly referenceLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    scriptKind: HtmlScriptKind; scriptType: HtmlScriptType; typeAsWritten: string; src: string;
+    resolvedFilePath: string; isAsync: boolean; isDefer: boolean; isNoModule: boolean;
+    bodyStartLine: number; bodyStartColumn: number; bodyEndLine: number; bodyEndColumn: number;
+    bodyLength: number; ownerElementLinkHash: string; referenceLinkHash: string;
+    documentLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.scriptKind = props.scriptKind;
+    this.scriptType = props.scriptType;
+    this.typeAsWritten = props.typeAsWritten;
+    this.src = props.src;
+    this.resolvedFilePath = props.resolvedFilePath;
+    this.isAsync = props.isAsync;
+    this.isDefer = props.isDefer;
+    this.isNoModule = props.isNoModule;
+    this.bodyStartLine = props.bodyStartLine;
+    this.bodyStartColumn = props.bodyStartColumn;
+    this.bodyEndLine = props.bodyEndLine;
+    this.bodyEndColumn = props.bodyEndColumn;
+    this.bodyLength = props.bodyLength;
+    this.ownerElementLinkHash = props.ownerElementLinkHash;
+    this.referenceLinkHash = props.referenceLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_SCRIPT_md5(ownerElementLinkHash)` — a pure 1:1 chain off the element. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_SCRIPT', this.ownerElementLinkHash);
+  }
+
+  protected values(): string[] {
+    return [
+      this.scriptKind, this.scriptType, text(this.typeAsWritten),
+      boundedText(this.src, WEB_ATTRIBUTE_VALUE_LIMIT), text(this.resolvedFilePath),
+      bool(this.isAsync), bool(this.isDefer), bool(this.isNoModule), num(this.bodyStartLine),
+      num(this.bodyStartColumn), num(this.bodyEndLine), num(this.bodyEndColumn), num(this.bodyLength),
+      this.ownerElementLinkHash, this.referenceLinkHash, this.documentLinkHash,
+      this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/HtmlTemplateExpression.ts b/parser/src/analysis-types/html/HtmlTemplateExpression.ts
new file mode 100644
index 000000000..bb1c81a20
--- /dev/null
+++ b/parser/src/analysis-types/html/HtmlTemplateExpression.ts
@@ -0,0 +1,87 @@
+import { WEB_TEXT_LIMIT } from '@/constants/web-constants';
+import { HtmlTemplateDialect } from '@/enums/html/HtmlTemplateDialect';
+import { HtmlTemplateExpressionKind } from '@/enums/html/HtmlTemplateExpressionKind';
+
+import { WebRow, boundedText, commaList, commaSet, num, text } from '../web/web-row';
+
+/**
+ * One expression a template dialect evaluates: a directive's value or a `{{ }}` interpolation.
+ *
+ * Owned by the attribute that carries it, or, for an interpolation, by the element whose
+ * text holds it; exactly one of the two links is set, and `position` orders the expressions
+ * of one owner. `directive` is the attribute name as written (`@click`, `v-bind:href`,
+ * `*ngIf`), `argument` what it was applied to (`click`, `href`), `modifiers` the dotted
+ * suffixes (`enter,prevent`). For a JavaScript-shaped dialect (Vue, Alpine, Angular) the
+ * expression is read by the TypeScript syntax layer: `calleeNames` are the functions it
+ * calls and `identifiers` the free names it reads, which is what resolves `select(item)`
+ * to a method of the component and `item` to the `v-for` that declared it (`declares`).
+ * For the others (Jinja, Thymeleaf, Handlebars) the text is kept and the name columns are
+ * empty: their expression languages are not JavaScript, and a guess would be a wrong edge.
+ */
+export class HtmlTemplateExpression extends WebRow {
+  static readonly COLUMNS = [
+    'dialect', 'expressionKind', 'directive', 'argument', 'modifiers', 'expressionText', 'calleeNames',
+    'identifiers', 'declares', 'position', 'startLine', 'startColumn', 'ownerElementLinkHash',
+    'attributeLinkHash', 'documentLinkHash', 'serviceVersionLinkHash', 'htmlTemplateExpressionUniqueHash',
+  ] as const;
+
+  readonly relation = 'html_template_expression';
+  readonly columns = HtmlTemplateExpression.COLUMNS;
+
+  readonly dialect: HtmlTemplateDialect;
+  readonly expressionKind: HtmlTemplateExpressionKind;
+  readonly directive: string;
+  readonly argument: string;
+  readonly modifiers: readonly string[];
+  readonly expressionText: string;
+  readonly calleeNames: ReadonlySet<string>;
+  readonly identifiers: ReadonlySet<string>;
+  readonly declares: readonly string[];
+  readonly position: number;
+  readonly startLine: number;
+  readonly startColumn: number;
+  readonly ownerElementLinkHash: string;
+  readonly attributeLinkHash: string;
+  readonly documentLinkHash: string;
+  readonly serviceVersionLinkHash: string;
+
+  constructor(props: {
+    dialect: HtmlTemplateDialect; expressionKind: HtmlTemplateExpressionKind; directive: string; argument: string;
+    modifiers: readonly string[]; expressionText: string; calleeNames: ReadonlySet<string>; identifiers: ReadonlySet<string>;
+    declares: readonly string[]; position: number; startLine: number; startColumn: number; ownerElementLinkHash: string;
+    attributeLinkHash: string; documentLinkHash: string; serviceVersionLinkHash: string;
+  }) {
+    super();
+    this.dialect = props.dialect;
+    this.expressionKind = props.expressionKind;
+    this.directive = props.directive;
+    this.argument = props.argument;
+    this.modifiers = props.modifiers;
+    this.expressionText = props.expressionText;
+    this.calleeNames = props.calleeNames;
+    this.identifiers = props.identifiers;
+    this.declares = props.declares;
+    this.position = props.position;
+    this.startLine = props.startLine;
+    this.startColumn = props.startColumn;
+    this.ownerElementLinkHash = props.ownerElementLinkHash;
+    this.attributeLinkHash = props.attributeLinkHash;
+    this.documentLinkHash = props.documentLinkHash;
+    this.serviceVersionLinkHash = props.serviceVersionLinkHash;
+    this.generateHash();
+  }
+
+  /** **PK** `HTML_TEMPLATE_EXPRESSION_md5(attributeLinkHash ‖ ownerElementLinkHash ‖ position)`. */
+  generateHash(): void {
+    this.hash = WebRow.key('HTML_TEMPLATE_EXPRESSION', this.attributeLinkHash, this.ownerElementLinkHash, this.position);
+  }
+
+  protected values(): string[] {
+    return [
+      this.dialect, this.expressionKind, text(this.directive), text(this.argument), text(commaList(this.modifiers)),
+      boundedText(this.expressionText, WEB_TEXT_LIMIT), text(commaSet(this.calleeNames)), text(commaSet(this.identifiers)),
+      text(commaList(this.declares)), num(this.position), num(this.startLine), num(this.startColumn),
+      this.ownerElementLinkHash, this.attributeLinkHash, this.documentLinkHash, this.serviceVersionLinkHash, this.hash,
+    ];
+  }
+}
diff --git a/parser/src/analysis-types/html/index.ts b/parser/src/analysis-types/html/index.ts
new file mode 100644
index 000000000..8251474bf
--- /dev/null
+++ b/parser/src/analysis-types/html/index.ts
@@ -0,0 +1,9 @@
+export { HtmlAttribute } from '@/analysis-types/html/HtmlAttribute';
+export { HtmlClassReference } from '@/analysis-types/html/HtmlClassReference';
+export { HtmlDocument } from '@/analysis-types/html/HtmlDocument';
+export { HtmlElement } from '@/analysis-types/html/HtmlElement';
+export { HtmlHandlerCall } from '@/analysis-types/html/HtmlHandlerCall';
+export { HtmlParseGap } from '@/analysis-types/html/HtmlParseGap';
+export { HtmlReference } from '@/analysis-types/html/HtmlReference';
+export { HtmlScript } from '@/analysis-types/html/HtmlScript';
+export { HtmlTemplateExpression } from '@/analysis-types/html/HtmlTemplateExpression';
diff --git a/parser/src/analysis-types/index.ts b/parser/src/analysis-types/index.ts
index d5aa18f45..7192572cd 100644
--- a/parser/src/analysis-types/index.ts
+++ b/parser/src/analysis-types/index.ts
@@ -19,3 +19,14 @@ export { XmlValueReference } from '@/analysis-types/xml/XmlValueReference';
 // YAML analysis types
 export { YamlProperty } from '@/analysis-types/yaml/YamlProperty';
 export { YamlValueSegment } from '@/analysis-types/yaml/YamlValueSegment';
+
+// HTML analysis types (the web front end)
+export {
+  HtmlAttribute, HtmlClassReference, HtmlDocument, HtmlElement, HtmlHandlerCall, HtmlParseGap, HtmlReference, HtmlScript,
+  HtmlTemplateExpression,
+} from '@/analysis-types/html';
+
+// CSS analysis types (the web front end)
+export {
+  CssComment, CssDeclaration, CssParseGap, CssRule, CssSelector, CssSelectorPart, CssStylesheet, CssValueReference,
+} from '@/analysis-types/css';
diff --git a/parser/src/analysis-types/web/web-row.ts b/parser/src/analysis-types/web/web-row.ts
new file mode 100644
index 000000000..2f7e9cd94
--- /dev/null
+++ b/parser/src/analysis-types/web/web-row.ts
@@ -0,0 +1,109 @@
+import { ENTITY_IDENTIFIERS } from '@/constants/entity-constants';
+import { EntityIdentifiable } from '@/interfaces/EntityIdentifiable';
+import { EntityUtils } from '@/utils/entity-utils';
+
+/**
+ * Shared row plumbing for the HTML and CSS relations.
+ *
+ * The same discipline as `js-row.ts` and `ts-row.ts`, restated for this front end
+ * rather than imported from one of them: the front ends are separate by ruling, so a
+ * change to one language's row rules must not silently reshape another's output.
+ *
+ * ## Why arity is asserted at runtime
+ *
+ * The Soufflé declarations carry positional `c0..cN` and nothing else, so a column
+ * dropped or transposed in a `values()` produces a file that loads cleanly and means
+ * something different: every later column is shifted by one and the relation still has
+ * rows. There is no type error, no parse error and no failing join. The assertion here
+ * is the emit-side half of the schema check; `web-tests.ts` holds the other half, which
+ * compares every header against `schema/web/schema.json`.
+ */
+export abstract class WebRow implements EntityIdentifiable {
+  /** The relation's name, as the Soufflé declaration spells it. */
+  abstract readonly relation: string;
+  /** The header, in column order. Every row class exposes it as a static `COLUMNS` too. */
+  abstract readonly columns: readonly string[];
+
+  protected hash = ABSENT;
+
+  /** The row's values, in column order. The last one is the row's own key. */
+  protected abstract values(): string[];
+
+  abstract generateHash(): void;
+
+  getHash(): string {
+    return this.hash;
+  }
+
+  getEntryCombined(): string {
+    return `${this.relation}[hash=${this.hash}]`;
+  }
+
+  toCsv(): string {
+    return joinRow(this.values(), this.columns.length, this.relation);
+  }
+
+  getCsvHeader(): string {
+    return joinRow(this.columns, this.columns.length, this.relation);
+  }
+
+  /** A content-addressed key under the given prefix. */
+  protected static key(prefix: keyof typeof ENTITY_IDENTIFIERS, ...components: (string | number | boolean)[]): string {
+    return EntityUtils.generateEntityHash(ENTITY_IDENTIFIERS[prefix], keyOf(...components));
+  }
+}
+
+export function joinRow(columns: readonly string[], expectedArity: number, relation: string): string {
+  if (columns.length !== expectedArity) {
+    throw new Error(
+      `${relation}: emitted ${columns.length} columns, the header declares ${expectedArity}. `
+        + 'Column ORDER is the contract and a shifted column loads without error — fix values(), never the header.'
+    );
+  }
+  return columns.join('\t');
+}
+
+/** Soufflé has no nulls: `""` is the legal "absent" value everywhere in this schema. */
+export const ABSENT = '';
+
+/** A boolean column, written as the literal `true`/`false` the rules compare against. */
+export function bool(value: boolean): string {
+  return value ? 'true' : 'false';
+}
+
+/** A numeric column. */
+export function num(value: number): string {
+  return String(value);
+}
+
+/** Free text bound for TSV: newlines and tabs escaped, quotes doubled. */
+export function text(value: string): string {
+  return EntityUtils.escapeTsv(value);
+}
+
+/**
+ * Free text with a length bound, applied BEFORE escaping: truncating after escaping can
+ * cut an escape sequence in half, which produces a cell that is malformed rather than short.
+ */
+export function boundedText(value: string, limit: number): string {
+  return EntityUtils.escapeTsv(value.length > limit ? value.slice(0, limit) : value);
+}
+
+/** A comma-LIST column, order preserved: `a,b,a` keeps both the repetition and the order. */
+export function commaList(values: Iterable<string>): string {
+  return Array.from(values).map((v) => v.replace(/,/g, '\\,')).join(',');
+}
+
+/** A comma-SET column, sorted, so the value is independent of source order. */
+export function commaSet(values: Iterable<string>): string {
+  return Array.from(new Set(values)).sort().join(',');
+}
+
+/**
+ * The `||` join used by every primary key in this schema. Components go through
+ * `String` untouched: they are hashes, names, numbers and enum values, and escaping
+ * them would make two different keys collide in the escaping rather than in the content.
+ */
+export function keyOf(...components: (string | number | boolean)[]): string {
+  return components.map(String).join('||');
+}
diff --git a/parser/src/constants/entity-constants.ts b/parser/src/constants/entity-constants.ts
index 37f640569..1172fb8aa 100644
--- a/parser/src/constants/entity-constants.ts
+++ b/parser/src/constants/entity-constants.ts
@@ -175,4 +175,30 @@ export const ENTITY_IDENTIFIERS = {
   CS_PARSE_GAP: 'CS_PARSE_GAP',
   CS_PREPROC_REGION: 'CS_PREPROC_REGION',
   CS_DECLARATION_GROUP: 'CS_DECLARATION_GROUP',
-} as const;
\ No newline at end of file
+
+  // ------------------------------------------------------------------- Web
+  // HTML and CSS share one front end (constants/web-constants.ts). HTML_DOCUMENT
+  // and CSS_STYLESHEET are the two roots; every child key chains off its parent's
+  // hash, never off a re-derived name, because a web name collides by design:
+  // every page has a `div`, every stylesheet has a `.active`, and one `--gap` is
+  // declared in `:root` and again in every theme. A `<style>` element is a
+  // CSS_STYLESHEET whose key chains off the HTML element that holds it, so the
+  // same CSS text in two pages stays two stylesheets.
+  HTML_DOCUMENT: 'HTML_DOCUMENT',
+  HTML_ELEMENT: 'HTML_ELEMENT',
+  HTML_ATTRIBUTE: 'HTML_ATTRIBUTE',
+  HTML_CLASS_REFERENCE: 'HTML_CLASS_REFERENCE',
+  HTML_REFERENCE: 'HTML_REFERENCE',
+  HTML_SCRIPT: 'HTML_SCRIPT',
+  HTML_HANDLER_CALL: 'HTML_HANDLER_CALL',
+  HTML_TEMPLATE_EXPRESSION: 'HTML_TEMPLATE_EXPRESSION',
+  HTML_PARSE_GAP: 'HTML_PARSE_GAP',
+  CSS_STYLESHEET: 'CSS_STYLESHEET',
+  CSS_RULE: 'CSS_RULE',
+  CSS_SELECTOR: 'CSS_SELECTOR',
+  CSS_SELECTOR_PART: 'CSS_SELECTOR_PART',
+  CSS_DECLARATION: 'CSS_DECLARATION',
+  CSS_VALUE_REFERENCE: 'CSS_VALUE_REFERENCE',
+  CSS_COMMENT: 'CSS_COMMENT',
+  CSS_PARSE_GAP: 'CSS_PARSE_GAP',
+} as const;
diff --git a/parser/src/constants/web-constants.ts b/parser/src/constants/web-constants.ts
new file mode 100644
index 000000000..a97147f74
--- /dev/null
+++ b/parser/src/constants/web-constants.ts
@@ -0,0 +1,89 @@
+/**
+ * Constants of the WEB front end: HTML documents and CSS stylesheets.
+ *
+ * HTML and CSS are one front end rather than two, because the two languages nest: a
+ * `<style>` element is a stylesheet, a `style="…"` attribute is a declaration list, and a
+ * `<link rel="stylesheet">` is a reference from one to the other. One analyzer walks both
+ * extension sets and writes every relation once, so no two writers ever race on a CSS table.
+ *
+ * Neither language has a project shape of its own — a page sits in a Java resources folder,
+ * a Django templates directory or a Vite root alike — so the front end is a FILE-TYPE
+ * analyzer like XML and YAML: it walks every scan target and attributes each file to the most
+ * specific project that contains it.
+ */
+
+/** Extensions read as HTML. `.xhtml` is XML by serialisation and HTML by vocabulary; the HTML grammar reads it. */
+export const HTML_EXTENSIONS = ['.html', '.htm', '.xhtml'] as const;
+
+/**
+ * Extensions read as CSS. Preprocessor dialects (`.scss`, `.sass`, `.less`, `.styl`) are
+ * deliberately absent: the CSS grammar is tolerant, but tolerance on a dialect it does not know
+ * yields a tree that is wrong without saying so. A dialect is a separate front end.
+ */
+export const CSS_EXTENSIONS = ['.css'] as const;
+
+/** `html_element.textContent`, `css_rule.preludeText` and `css_declaration.valueText` are cut here. */
+export const WEB_TEXT_LIMIT = 1_024;
+
+/** `html_attribute.value` is cut here: a data URI or an inline SVG attribute can run to megabytes. */
+export const WEB_ATTRIBUTE_VALUE_LIMIT = 4_096;
+
+/** `css_comment.text` and gap details are cut here. */
+export const WEB_COMMENT_TEXT_LIMIT = 2_048;
+
+/**
+ * Parse gaps recorded per file before the rest are summarised into one row.
+ *
+ * A minified page or a template in a dialect the HTML parser does not know can
+ * raise an error per tag. Each one is real, but ten thousand rows about one file
+ * say less than two hundred plus a count, and the count is what the consumer needs
+ * to decide whether to trust the file's other rows.
+ */
+export const WEB_PARSE_GAP_LIMIT = 200;
+
+/**
+ * A line longer than this marks a stylesheet or a page as MINIFIED output.
+ *
+ * Labelled, never skipped: the rows are still emitted in full and the label lets a
+ * consumer exclude them from a denominator by column (the JavaScript front end's rule
+ * for bundles). The threshold is the JavaScript one.
+ */
+export const WEB_MINIFIED_LINE_LENGTH_THRESHOLD = 5_000;
+
+/** A `.min.css` / `.min.html` name is minified output whatever its line lengths are. */
+export const WEB_MINIFIED_NAME_PATTERN = /\.min\.(css|html?)$/i;
+
+/** CSV file names of the web relations, and the two skip reports. */
+export const WEB_CSV_FILES = {
+  HTML_DOCUMENTS: 'all-html-documents.csv',
+  HTML_ELEMENTS: 'all-html-elements.csv',
+  HTML_ATTRIBUTES: 'all-html-attributes.csv',
+  HTML_CLASS_REFERENCES: 'all-html-class-references.csv',
+  HTML_REFERENCES: 'all-html-references.csv',
+  HTML_SCRIPTS: 'all-html-scripts.csv',
+  HTML_HANDLER_CALLS: 'all-html-handler-calls.csv',
+  HTML_TEMPLATE_EXPRESSIONS: 'all-html-template-expressions.csv',
+  HTML_PARSE_GAPS: 'all-html-parse-gaps.csv',
+  CSS_STYLESHEETS: 'all-css-stylesheets.csv',
+  CSS_RULES: 'all-css-rules.csv',
+  CSS_SELECTORS: 'all-css-selectors.csv',
+  CSS_SELECTOR_PARTS: 'all-css-selector-parts.csv',
+  CSS_DECLARATIONS: 'all-css-declarations.csv',
+  CSS_VALUE_REFERENCES: 'all-css-value-references.csv',
+  CSS_COMMENTS: 'all-css-comments.csv',
+  CSS_PARSE_GAPS: 'all-css-parse-gaps.csv',
+  SKIPPED_HTML_FILES: 'skipped-html-files.csv',
+  SKIPPED_CSS_FILES: 'skipped-css-files.csv',
+} as const;
+
+/**
+ * Above this many characters a file is parsed through tree-sitter's callback interface, in
+ * chunks, to stay under the runtime's 32,767-character single-buffer ceiling. The same
+ * threshold and chunk size as the Java and Python front ends (python-constants.ts explains
+ * the two properties of the limit: characters not bytes, and the chunk carries the ceiling).
+ */
+export const WEB_CALLBACK_PARSE_THRESHOLD = 30_000;
+export const WEB_PARSE_CHUNK_SIZE = 8_192;
+
+/** Chunk size for CSV writes, matching the other analyzers. */
+export const WEB_CSV_CHUNK_SIZE = 50_000;
diff --git a/parser/src/enums/css/CssParseGapKind.ts b/parser/src/enums/css/CssParseGapKind.ts
new file mode 100644
index 000000000..a6162228d
--- /dev/null
+++ b/parser/src/enums/css/CssParseGapKind.ts
@@ -0,0 +1,27 @@
+/**
+ * What the CSS front end could not read, recorded as data.
+ *
+ * The CSS grammar is tolerant: an error inside a block ends that rule or declaration and
+ * parsing resumes at the next. So a gap here is a bounded region of the file whose
+ * rows are missing or whose text was kept RAW, and the stylesheet's other rows stand.
+ */
+export enum CssParseGapKind {
+  /** An `ERROR` region or a token the grammar had to invent; `detail` says which, with the text. */
+  PARSE_ERROR = 'PARSE_ERROR',
+
+  /**
+   * Text the grammar read as something CSS has no place for — a declaration outside any
+   * rule, a rule inside a `style` attribute — so no row carries it. `detail` is the text, bounded.
+   */
+  UNPARSED_FRAGMENT = 'UNPARSED_FRAGMENT',
+
+  /**
+   * A `.css` file carrying preprocessor syntax (`$var`, `@mixin`, `@include`, `@extend`):
+   * a Sass or Less file by content. Its rows are emitted as the grammar read them and this
+   * row says they may be wrong.
+   */
+  PREPROCESSOR_SYNTAX = 'PREPROCESSOR_SYNTAX',
+
+  /** More gaps than `WEB_PARSE_GAP_LIMIT` in one stylesheet: one row with the count of the rest. */
+  GAP_LIMIT_REACHED = 'GAP_LIMIT_REACHED',
+}
diff --git a/parser/src/enums/css/CssRuleKind.ts b/parser/src/enums/css/CssRuleKind.ts
new file mode 100644
index 000000000..609d5339b
--- /dev/null
+++ b/parser/src/enums/css/CssRuleKind.ts
@@ -0,0 +1,8 @@
+/** The two shapes a rule can have. */
+export enum CssRuleKind {
+  /** `selector-list { declarations }` — a qualified (style) rule, possibly nested. */
+  STYLE_RULE = 'STYLE_RULE',
+
+  /** `@name prelude;` or `@name prelude { … }` — `atRuleName` carries the name. */
+  AT_RULE = 'AT_RULE',
+}
diff --git a/parser/src/enums/css/CssSelectorPartKind.ts b/parser/src/enums/css/CssSelectorPartKind.ts
new file mode 100644
index 000000000..341cbd6b9
--- /dev/null
+++ b/parser/src/enums/css/CssSelectorPartKind.ts
@@ -0,0 +1,60 @@
+/**
+ * A simple selector, or the combinator between two compounds.
+ *
+ * `css_selector_part` is the selector as a sequence a consumer can JOIN on: a CLASS
+ * part's `name` is what `html_class_reference.className` holds, an ID part's `name` is
+ * what `html_element.id` holds, a TYPE part's `name` is `html_element.tagName`. The
+ * combinator is a column on the part it precedes (`combinatorBefore`), not a part of
+ * its own, so "the compound after a `>`" is one row and not a pair.
+ */
+export enum CssSelectorPartKind {
+  /** `div`; a namespaced type (`svg|rect`) is the name `rect` with the prefix `svg|` as its value. */
+  TYPE = 'TYPE',
+
+  /** `*` */
+  UNIVERSAL = 'UNIVERSAL',
+
+  /** `.name` */
+  CLASS = 'CLASS',
+
+  /** `#name` */
+  ID = 'ID',
+
+  /** `[name]`, `[name=value i]` — `attributeMatcher` and `value` carry the rest. */
+  ATTRIBUTE = 'ATTRIBUTE',
+
+  /** `:hover`, `:nth-child(2n)`, `:not(.x)` — a functional one's argument selectors are child parts. */
+  PSEUDO_CLASS = 'PSEUDO_CLASS',
+
+  /** `::before`, `::part(name)`; also the legacy single-colon `:before`. */
+  PSEUDO_ELEMENT = 'PSEUDO_ELEMENT',
+
+  /** `&` — the parent rule's selector, in CSS nesting. */
+  NESTING = 'NESTING',
+
+  /**
+   * A selector node of a kind this reader does not classify, kept as text in `value` so the
+   * rule still has a row per selector it was written with.
+   */
+  RAW = 'RAW',
+}
+
+/** The combinator written BEFORE a compound. `NONE` on the first compound of a selector. */
+export enum CssCombinator {
+  NONE = 'NONE',
+
+  /** whitespace */
+  DESCENDANT = 'DESCENDANT',
+
+  /** `>` */
+  CHILD = 'CHILD',
+
+  /** `+` */
+  NEXT_SIBLING = 'NEXT_SIBLING',
+
+  /** `~` */
+  SUBSEQUENT_SIBLING = 'SUBSEQUENT_SIBLING',
+
+  /** `||` */
+  COLUMN = 'COLUMN',
+}
diff --git a/parser/src/enums/css/CssStylesheetSource.ts b/parser/src/enums/css/CssStylesheetSource.ts
new file mode 100644
index 000000000..2cda5464e
--- /dev/null
+++ b/parser/src/enums/css/CssStylesheetSource.ts
@@ -0,0 +1,22 @@
+/** Where a stylesheet's text came from. */
+export enum CssStylesheetSource {
+  /** A `.css` file. */
+  FILE = 'FILE',
+
+  /** A `<style>` element; `ownerHtmlElementLinkHash` names it and `filePath` is the page's. */
+  HTML_STYLE_ELEMENT = 'HTML_STYLE_ELEMENT',
+}
+
+/**
+ * Whether a stylesheet is source or a build's output.
+ *
+ * Labelled and emitted in full, never skipped: a bundle's rules are real rules, and a
+ * consumer excludes them from a count by column. The JavaScript front end's rule.
+ */
+export enum CssSourceProvenance {
+  /** Hand-written, as far as the text shows. */
+  PROJECT = 'PROJECT',
+
+  /** A `.min.css` name, or a line past `WEB_MINIFIED_LINE_LENGTH_THRESHOLD`. */
+  MINIFIED = 'MINIFIED',
+}
diff --git a/parser/src/enums/css/CssValueReferenceKind.ts b/parser/src/enums/css/CssValueReferenceKind.ts
new file mode 100644
index 000000000..f7690a890
--- /dev/null
+++ b/parser/src/enums/css/CssValueReferenceKind.ts
@@ -0,0 +1,30 @@
+/**
+ * A name a declaration's value (or an at-rule's prelude) REFERS TO.
+ *
+ * Each is a join the engine makes, not the parser: `var(--x)` reaches every declaration
+ * of `--x` that applies, which depends on the cascade; `animation: spin 1s` reaches the
+ * `@keyframes spin` of whichever stylesheet wins. The parser emits the name as written
+ * and resolves only what a name alone decides — a URL to a file on disk.
+ */
+export enum CssValueReferenceKind {
+  /** `var(--name)`, `var(--name, fallback)` — `name` is `--name`; `fallbackText` the fallback. */
+  VARIABLE = 'VARIABLE',
+
+  /** `url(…)` in any property: `background`, `src` of `@font-face`, `cursor`, `mask`, … */
+  URL = 'URL',
+
+  /** The target of `@import url(x) …;` or `@import "x" …;` — on the at-rule, not a declaration. */
+  IMPORT = 'IMPORT',
+
+  /** The identifier in `animation` / `animation-name` that names an `@keyframes` rule. */
+  KEYFRAMES = 'KEYFRAMES',
+
+  /** `@layer a, b;` / `@layer a { }` / `@import … layer(a)` — a cascade layer name. */
+  LAYER = 'LAYER',
+
+  /** `container-name: x` / `@container x (…)` — a container query name. */
+  CONTAINER = 'CONTAINER',
+
+  /** `font-family: "Inter", sans-serif` — each family name; joins to `@font-face { font-family }`. */
+  FONT_FAMILY = 'FONT_FAMILY',
+}
diff --git a/parser/src/enums/css/index.ts b/parser/src/enums/css/index.ts
new file mode 100644
index 000000000..21d929e89
--- /dev/null
+++ b/parser/src/enums/css/index.ts
@@ -0,0 +1,5 @@
+export { CssParseGapKind } from '@/enums/css/CssParseGapKind';
+export { CssRuleKind } from '@/enums/css/CssRuleKind';
+export { CssCombinator, CssSelectorPartKind } from '@/enums/css/CssSelectorPartKind';
+export { CssSourceProvenance, CssStylesheetSource } from '@/enums/css/CssStylesheetSource';
+export { CssValueReferenceKind } from '@/enums/css/CssValueReferenceKind';
diff --git a/parser/src/enums/html/HtmlAttributeKind.ts b/parser/src/enums/html/HtmlAttributeKind.ts
new file mode 100644
index 000000000..70cec1a08
--- /dev/null
+++ b/parser/src/enums/html/HtmlAttributeKind.ts
@@ -0,0 +1,61 @@
+/**
+ * What an attribute DOES, decided from its name (and for a few, its element).
+ *
+ * The kind is the column a consumer filters on: "every event handler in the page",
+ * "every URL", "every template directive". It is deliberately coarse — a `data-*`
+ * attribute is DATA whatever its suffix — because the suffix is the attribute's name
+ * and the name column already carries it.
+ */
+export enum HtmlAttributeKind {
+  /** `id` — the element's identity; also carried on `html_element.id`. */
+  ID = 'ID',
+
+  /** `class` — tokenised into `html_class_reference` rows as well. */
+  CLASS = 'CLASS',
+
+  /** `style` — a declaration list; its declarations are `css_declaration` rows. */
+  STYLE = 'STYLE',
+
+  /** `onclick`, `onload`, `onsubmit`, … — script text; its calls are `html_handler_call` rows. */
+  EVENT_HANDLER = 'EVENT_HANDLER',
+
+  /** `src`, `href`, `action`, `formaction`, `data`, `poster`, `cite`, `manifest`, `ping`, `background`. */
+  URL = 'URL',
+
+  /** `srcset`, `imagesrcset` — a comma list of URL candidates with descriptors. */
+  SRCSET = 'SRCSET',
+
+  /** `data-*` */
+  DATA = 'DATA',
+
+  /** `aria-*`, `role` */
+  ARIA = 'ARIA',
+
+  /** `for` on a label or output — names an element id. */
+  FOR = 'FOR',
+
+  /** `form`, `list`, `aria-labelledby`-style idrefs: `form`, `list`, `headers`, `usemap` (`#name`), `popovertarget`, `commandfor`. */
+  ID_REFERENCE = 'ID_REFERENCE',
+
+  /** `name` — the submit name of a control, the target name of a frame, the key of a meta. */
+  NAME = 'NAME',
+
+  /** `type` — the MIME type or control type. */
+  TYPE = 'TYPE',
+
+  /** `rel` — the relationship of a link or anchor. */
+  REL = 'REL',
+
+  /**
+   * A template engine's attribute: `th:*`, `v-*`, `:x`, `@x`, `*ngX`, `[x]`, `(x)`,
+   * `x-*` (Alpine), `hx-*` (htmx), `ng-*`, `data-bind` (Knockout), `wire:*` (Livewire),
+   * `phx-*` (LiveView), `_` (hyperscript).
+   */
+  TEMPLATE_DIRECTIVE = 'TEMPLATE_DIRECTIVE',
+
+  /** `xmlns`, `xmlns:*`, `xml:*` — namespace plumbing. */
+  NAMESPACE = 'NAMESPACE',
+
+  /** Anything else: `alt`, `title`, `width`, `disabled`, `value`, `placeholder`, … */
+  OTHER = 'OTHER',
+}
diff --git a/parser/src/enums/html/HtmlDocumentKind.ts b/parser/src/enums/html/HtmlDocumentKind.ts
new file mode 100644
index 000000000..4500ee090
--- /dev/null
+++ b/parser/src/enums/html/HtmlDocumentKind.ts
@@ -0,0 +1,15 @@
+/**
+ * Whether a file is a whole page or a piece of one.
+ *
+ * A template engine's partial (`_header.html`, a Django `include`) has no `<html>`,
+ * no `<head>` and usually no doctype. A browser would wrap it in implied elements; the
+ * grammar does not, so a fragment's top-level elements have no parent row, and this
+ * column is how a consumer tells a page from a piece of one.
+ */
+export enum HtmlDocumentKind {
+  /** The source writes `<html>`, a doctype, or both. */
+  DOCUMENT = 'DOCUMENT',
+
+  /** Neither is written: a partial, a component template, a snippet. */
+  FRAGMENT = 'FRAGMENT',
+}
diff --git a/parser/src/enums/html/HtmlHandlerSource.ts b/parser/src/enums/html/HtmlHandlerSource.ts
new file mode 100644
index 000000000..e2f09bdd4
--- /dev/null
+++ b/parser/src/enums/html/HtmlHandlerSource.ts
@@ -0,0 +1,16 @@
+/** Where an `html_handler_call`'s text came from. */
+export enum HtmlHandlerSource {
+  /** An `on*` attribute: `onclick="save()"`. */
+  EVENT_ATTRIBUTE = 'EVENT_ATTRIBUTE',
+
+  /** A `javascript:` URL: `href="javascript:toggle()"`. */
+  JAVASCRIPT_URL = 'JAVASCRIPT_URL',
+
+  /**
+   * A template dialect's event directive: `@click="select(item)"` (Vue, Alpine),
+   * `(click)="onClick($event)"` (Angular). A bare name or member path there is the handler
+   * the framework calls, so it is recorded as a call of it with no arguments, as Vue's own
+   * compiler treats it.
+   */
+  TEMPLATE_EVENT = 'TEMPLATE_EVENT',
+}
diff --git a/parser/src/enums/html/HtmlNamespace.ts b/parser/src/enums/html/HtmlNamespace.ts
new file mode 100644
index 000000000..68c33c8b7
--- /dev/null
+++ b/parser/src/enums/html/HtmlNamespace.ts
@@ -0,0 +1,11 @@
+/**
+ * The namespace an element is in, which the HTML algorithm decides from context: an
+ * `<svg>` opens the SVG namespace, `<math>` MathML, and `<foreignObject>` returns to HTML.
+ * A `<script>` or `<style>` in SVG is not the HTML element of that name, so the front end
+ * reads scripts and styles only in the HTML namespace.
+ */
+export enum HtmlNamespace {
+  HTML = 'HTML',
+  SVG = 'SVG',
+  MATHML = 'MATHML',
+}
diff --git a/parser/src/enums/html/HtmlParseGapKind.ts b/parser/src/enums/html/HtmlParseGapKind.ts
new file mode 100644
index 000000000..b77b03610
--- /dev/null
+++ b/parser/src/enums/html/HtmlParseGapKind.ts
@@ -0,0 +1,28 @@
+/**
+ * What the HTML front end could not read, recorded as data.
+ *
+ * The grammar never fails a file: what it cannot read becomes an error region and
+ * parsing resumes at the next tag. So a gap here is never "no tree" — it is a place
+ * where the rows around it may not be what the author meant, which is exactly where a
+ * consumer should distrust them.
+ */
+export enum HtmlParseGapKind {
+  /**
+   * A region the grammar could not read as HTML, a token it had to invent, an end tag
+   * with no open element, or a second attribute with a name already used (the first
+   * wins, as in a browser). `detail` names which, with the text.
+   */
+  PARSE_ERROR = 'PARSE_ERROR',
+
+  /** An event-handler attribute or `javascript:` URL whose text is not a JavaScript script. */
+  HANDLER_SYNTAX = 'HANDLER_SYNTAX',
+
+  /** A `style` attribute whose text is not a declaration list; its readable declarations are still emitted. */
+  STYLE_ATTRIBUTE_SYNTAX = 'STYLE_ATTRIBUTE_SYNTAX',
+
+  /**
+   * More parse errors than `WEB_PARSE_GAP_LIMIT` in one file: one row carrying the
+   * count of the rest, so a minified or foreign-dialect file says how much is missing.
+   */
+  GAP_LIMIT_REACHED = 'GAP_LIMIT_REACHED',
+}
diff --git a/parser/src/enums/html/HtmlReferenceKind.ts b/parser/src/enums/html/HtmlReferenceKind.ts
new file mode 100644
index 000000000..118759096
--- /dev/null
+++ b/parser/src/enums/html/HtmlReferenceKind.ts
@@ -0,0 +1,46 @@
+/**
+ * What a URL-bearing attribute points AT, decided from element and attribute together.
+ *
+ * `<script src>` and `<img src>` share an attribute name and mean entirely different
+ * things to a consumer building a dependency graph: one is code the page runs, the
+ * other is a byte stream it shows. The kind is what makes `html_reference` joinable to
+ * the right table — SCRIPT to `js_module`, STYLESHEET to `css_stylesheet`, PAGE to
+ * `html_document` — without the consumer re-deriving element semantics.
+ */
+export enum HtmlReferenceKind {
+  /** `<script src>` — a script the page runs; `html_script` carries the rest. */
+  SCRIPT = 'SCRIPT',
+
+  /** `<link rel="stylesheet" href>` — a stylesheet the page applies. */
+  STYLESHEET = 'STYLESHEET',
+
+  /** `<link rel="modulepreload|preload|prefetch|icon|manifest|…" href>` — a resource hint or asset. */
+  LINK_RESOURCE = 'LINK_RESOURCE',
+
+  /** `<a href>`, `<area href>` — navigation. */
+  ANCHOR = 'ANCHOR',
+
+  /** `<img src>`, `<picture><source srcset>`, `<input type="image" src>`, `<img srcset>`. */
+  IMAGE = 'IMAGE',
+
+  /** `<video src>`, `<audio src>`, `<source src>`, `<track src>`, `<video poster>`. */
+  MEDIA = 'MEDIA',
+
+  /** `<iframe src>`, `<frame src>`, `<embed src>`, `<object data>` — an embedded document. */
+  FRAME = 'FRAME',
+
+  /** `<form action>`, `<button formaction>`, `<input formaction>` — where a submission goes. */
+  FORM_ACTION = 'FORM_ACTION',
+
+  /** `<base href>` — the base every relative URL in the page resolves against. */
+  BASE = 'BASE',
+
+  /** `<meta http-equiv="refresh" content="0; url=…">` — a redirect. */
+  META_REFRESH = 'META_REFRESH',
+
+  /** `hx-get="/api/items"`, `hx-post`, `hx-put`, `hx-patch`, `hx-delete` — a request the element makes at runtime. */
+  REQUEST = 'REQUEST',
+
+  /** `cite`, `ping`, `manifest`, `background`, `longdesc`, `profile`, `usemap`, `codebase`, `data`. */
+  OTHER = 'OTHER',
+}
diff --git a/parser/src/enums/html/HtmlScriptKind.ts b/parser/src/enums/html/HtmlScriptKind.ts
new file mode 100644
index 000000000..4057c49dc
--- /dev/null
+++ b/parser/src/enums/html/HtmlScriptKind.ts
@@ -0,0 +1,42 @@
+/** Where a `<script>` element's code is. */
+export enum HtmlScriptKind {
+  /** `<script src="…">` — the body, if any, is ignored by the browser and by this parser. */
+  EXTERNAL = 'EXTERNAL',
+
+  /** `<script>…</script>` — the body is the code; `bodyStartLine`…`bodyEndLine` locate it. */
+  INLINE = 'INLINE',
+}
+
+/**
+ * How the browser treats a `<script>` element's contents, from its `type` attribute.
+ *
+ * Decided by the HTML specification's rules for the `type` attribute: absent, empty or a
+ * JavaScript MIME type is a classic script; `module` is a module; `importmap` and
+ * `speculationrules` are JSON the browser reads; any other value is a data block the
+ * browser ignores, which is how templating libraries hide templates in a page.
+ */
+export enum HtmlScriptType {
+  /** No `type`, an empty one, or a JavaScript MIME type (`text/javascript`, `application/javascript`, …). */
+  CLASSIC = 'CLASSIC',
+
+  /** `type="module"` */
+  MODULE = 'MODULE',
+
+  /** `type="importmap"` — JSON mapping specifiers to URLs. */
+  IMPORTMAP = 'IMPORTMAP',
+
+  /** `type="speculationrules"` */
+  SPECULATION_RULES = 'SPECULATION_RULES',
+
+  /** `type="application/json"`, `application/ld+json` — data the page's scripts read. */
+  JSON = 'JSON',
+
+  /** `text/x-template`, `text/template`, `text/x-handlebars-template`, `text/html` — a client-side template. */
+  TEMPLATE = 'TEMPLATE',
+
+  /** `text/babel`, `text/jsx`, `text/typescript`, `text/coffeescript` — source a tool transforms first. */
+  TRANSPILED = 'TRANSPILED',
+
+  /** `text/x-mathjax-config`, a custom MIME type, anything else: a data block. */
+  DATA_BLOCK = 'DATA_BLOCK',
+}
diff --git a/parser/src/enums/html/HtmlTemplateDialect.ts b/parser/src/enums/html/HtmlTemplateDialect.ts
new file mode 100644
index 000000000..e08b3efac
--- /dev/null
+++ b/parser/src/enums/html/HtmlTemplateDialect.ts
@@ -0,0 +1,50 @@
+/**
+ * A server- or client-side template syntax found in a page, by its MARKERS.
+ *
+ * An `.html` file is routinely not HTML alone: it is Jinja, Thymeleaf, Handlebars or
+ * Razor around HTML. The HTML parser reads through the markers (they land in text and
+ * attribute values), but a consumer must know the file is a template before it trusts
+ * a URL or an id: `href="{{ url }}"` names nothing on disk. Several may hold at once,
+ * so `html_document.templateDialects` is a comma set of these.
+ *
+ * Detection is by syntax, never by file name or directory, and it names the FAMILY a
+ * marker belongs to rather than one engine: `{% %}` is Jinja, Django, Twig, Liquid and
+ * Nunjucks alike, and nothing in the text distinguishes them.
+ */
+export enum HtmlTemplateDialect {
+  /** `{{ … }}` interpolation: Mustache, Handlebars, Jinja, Django, Vue, Angular, Go templates. */
+  MUSTACHE = 'MUSTACHE',
+
+  /** `{% … %}` tags: Jinja, Django, Twig, Liquid, Nunjucks. */
+  JINJA = 'JINJA',
+
+  /** `{{#…}}` / `{{/…}}` / `{{>…}}` sections and partials: Handlebars, Mustache. */
+  HANDLEBARS = 'HANDLEBARS',
+
+  /** `<% … %>`, `<%= … %>`: ERB, EJS, JSP, classic ASP, Underscore. */
+  ERB = 'ERB',
+
+  /** `<?php … ?>` */
+  PHP = 'PHP',
+
+  /** `@model`, `@{ … }`, `@if`, `@foreach`, `@Html.`: Razor. */
+  RAZOR = 'RAZOR',
+
+  /** `th:*` attributes: Thymeleaf. */
+  THYMELEAF = 'THYMELEAF',
+
+  /** `*ngIf`, `[prop]`, `(event)`, `[(model)]`, `@if (…) {`: Angular. */
+  ANGULAR = 'ANGULAR',
+
+  /** `v-if`, `v-for`, `:prop`, `@event`, `v-bind`: Vue in a plain `.html`. */
+  VUE = 'VUE',
+
+  /** `${ … }` placeholders: FreeMarker, JSP EL, Thymeleaf inlining, Lit templates. */
+  DOLLAR_BRACE = 'DOLLAR_BRACE',
+
+  /** `x-data`, `x-on:`, `@click`, `x-bind`: Alpine.js. */
+  ALPINE = 'ALPINE',
+
+  /** `hx-get`, `hx-post`, `hx-target`: htmx. */
+  HTMX = 'HTMX',
+}
diff --git a/parser/src/enums/html/HtmlTemplateExpressionKind.ts b/parser/src/enums/html/HtmlTemplateExpressionKind.ts
new file mode 100644
index 000000000..0c44354b6
--- /dev/null
+++ b/parser/src/enums/html/HtmlTemplateExpressionKind.ts
@@ -0,0 +1,39 @@
+/**
+ * What a template expression DOES in its dialect, decided from the directive's name.
+ *
+ * `@click="select(item)"` in Vue, `(click)="select(item)"` in Angular and `x-on:click`
+ * in Alpine are one thing to a consumer — a handler the framework runs on an event —
+ * and the kind is what lets the three be asked for together. The directive as written
+ * is kept beside it, so nothing is lost by the grouping.
+ */
+export enum HtmlTemplateExpressionKind {
+  /** `{{ expr }}` in text: Vue, Angular, Handlebars, Jinja, Mustache. */
+  INTERPOLATION = 'INTERPOLATION',
+
+  /** `@event`, `v-on:event`, `x-on:event`, `(event)`, `th:onclick`: a handler the framework runs. */
+  EVENT_HANDLER = 'EVENT_HANDLER',
+
+  /** `:prop`, `v-bind:prop`, `x-bind:prop`, `[prop]`, `th:href`, `x-text`: a value bound to an attribute or property. */
+  BINDING = 'BINDING',
+
+  /** `v-if`, `v-else-if`, `v-show`, `x-if`, `x-show`, `*ngIf`, `th:if`, `th:unless`. */
+  CONDITION = 'CONDITION',
+
+  /** `v-for`, `x-for`, `*ngFor`, `th:each`: the expression introduces the names in `declares`. */
+  LOOP = 'LOOP',
+
+  /** `v-model`, `x-model`, `[(ngModel)]`: two-way binding. */
+  MODEL = 'MODEL',
+
+  /** `#name`, `v-slot:name`: a slot, whose props are in `declares`. */
+  SLOT = 'SLOT',
+
+  /** `#ref` (Angular), `x-ref`, `ref` with a Vue binding: a template reference variable. */
+  REFERENCE = 'REFERENCE',
+
+  /** `hx-get`, `hx-post`, …: a request the element makes; the URL is also an `html_reference` of kind REQUEST. */
+  REQUEST = 'REQUEST',
+
+  /** Any other directive of a known dialect: `v-once`, `x-data`, `x-init`, `th:text`, `*ngSwitch`, `hx-target`. */
+  DIRECTIVE = 'DIRECTIVE',
+}
diff --git a/parser/src/enums/html/index.ts b/parser/src/enums/html/index.ts
new file mode 100644
index 000000000..210b9019d
--- /dev/null
+++ b/parser/src/enums/html/index.ts
@@ -0,0 +1,9 @@
+export { HtmlAttributeKind } from '@/enums/html/HtmlAttributeKind';
+export { HtmlDocumentKind } from '@/enums/html/HtmlDocumentKind';
+export { HtmlHandlerSource } from '@/enums/html/HtmlHandlerSource';
+export { HtmlNamespace } from '@/enums/html/HtmlNamespace';
+export { HtmlParseGapKind } from '@/enums/html/HtmlParseGapKind';
+export { HtmlReferenceKind } from '@/enums/html/HtmlReferenceKind';
+export { HtmlScriptKind, HtmlScriptType } from '@/enums/html/HtmlScriptKind';
+export { HtmlTemplateDialect } from '@/enums/html/HtmlTemplateDialect';
+export { HtmlTemplateExpressionKind } from '@/enums/html/HtmlTemplateExpressionKind';
diff --git a/parser/src/enums/index.ts b/parser/src/enums/index.ts
index 69a3f6ffe..dc8c5ae53 100644
--- a/parser/src/enums/index.ts
+++ b/parser/src/enums/index.ts
@@ -11,3 +11,6 @@ export * from '@/enums/python';
 export { SkippedFileReason } from '@/enums/SkippedFileReason';
 export * from '@/enums/xml';
 export * from '@/enums/yaml';
+export * from '@/enums/web';
+export * from '@/enums/html';
+export * from '@/enums/css';
diff --git a/parser/src/enums/web/WebUrlKind.ts b/parser/src/enums/web/WebUrlKind.ts
new file mode 100644
index 000000000..b42e80845
--- /dev/null
+++ b/parser/src/enums/web/WebUrlKind.ts
@@ -0,0 +1,44 @@
+/**
+ * What kind of URL a reference holds, decided from its TEXT alone.
+ *
+ * The same classification serves `html_reference` (`src`, `href`, `action`, …) and
+ * `css_value_reference` (`url()`, `@import`): both are strings a browser would resolve
+ * against the document, and both need the same first question answered — can this
+ * name a file in the repository at all? Only RELATIVE and ROOT_RELATIVE can; the rest
+ * are recorded as what they are, so a consumer can count external resources rather
+ * than see them as unresolved.
+ */
+export enum WebUrlKind {
+  /** `img/logo.png`, `../app.js`, `./x.css` — resolved against the file's directory. */
+  RELATIVE = 'RELATIVE',
+
+  /** `/static/app.js` — resolved against the served root, which the parser takes to be the project root. */
+  ROOT_RELATIVE = 'ROOT_RELATIVE',
+
+  /** `https://cdn.example/x.js`, `http://…` — another origin, never a repository file. */
+  ABSOLUTE = 'ABSOLUTE',
+
+  /** `//cdn.example/x.js` — scheme of the page, host of the URL. */
+  PROTOCOL_RELATIVE = 'PROTOCOL_RELATIVE',
+
+  /** `#section` — a same-document anchor; `targetFragment` carries the id. */
+  FRAGMENT = 'FRAGMENT',
+
+  /** `data:…` — the resource is inline in the attribute. */
+  DATA_URI = 'DATA_URI',
+
+  /** `javascript:…` — a script, not a location; its calls land in `html_handler_call`. */
+  JAVASCRIPT_URI = 'JAVASCRIPT_URI',
+
+  /** `mailto:`, `tel:`, `sms:`, `ftp:`, `file:`, a custom app scheme — not a web resource. */
+  OTHER_SCHEME = 'OTHER_SCHEME',
+
+  /**
+   * `{{ asset('x') }}`, `<%= path %>`, `${url}`, `th:href` targets — a template produces
+   * the URL at render time and the text here is not it. Recorded, never resolved.
+   */
+  TEMPLATE_EXPRESSION = 'TEMPLATE_EXPRESSION',
+
+  /** `href=""` — legal, and means the document itself. */
+  EMPTY = 'EMPTY',
+}
diff --git a/parser/src/enums/web/index.ts b/parser/src/enums/web/index.ts
new file mode 100644
index 000000000..7eb17f6ae
--- /dev/null
+++ b/parser/src/enums/web/index.ts
@@ -0,0 +1 @@
+export { WebUrlKind } from '@/enums/web/WebUrlKind';
diff --git a/parser/src/extract.ts b/parser/src/extract.ts
index 20037524e..78d2aa2e8 100644
--- a/parser/src/extract.ts
+++ b/parser/src/extract.ts
@@ -13,6 +13,7 @@ import { DEFAULT_EXCLUDES as PYTHON_DEFAULT_EXCLUDES, PythonProjectAnalyzer } fr
 import { ServicesProjectAnalyzer } from '@/workflows/services/services-project-analyzer';
 import { JavaScriptProjectAnalyzer } from '@/workflows/javascript/javascript-project-analyzer';
 import { TypeScriptProjectAnalyzer } from '@/workflows/typescript/typescript-project-analyzer';
+import { WebProjectAnalyzer } from '@/workflows/web/web-project-analyzer';
 import { XmlProjectAnalyzer } from '@/workflows/xml/xml-project-analyzer';
 import { YamlProjectAnalyzer } from '@/workflows/yaml/yaml-project-analyzer';
 import { clearGitIgnored, loadGitIgnored } from '@/utils/git-ignored';
@@ -130,6 +131,22 @@ async function mergeProjectOutputs(scratchDirs: string[], outputDir: string): Pr
   }
 }
 
+/**
+ * Copy every relation file of `src` into each of `targets`. Used for the web tables, which
+ * several languages read; a copy is cheap next to the Java or JavaScript relations beside it,
+ * and a hard link would make the two folders share a file one of them may rewrite.
+ */
+async function copyRelationFiles(src: string, targets: readonly string[]): Promise<void> {
+  let names: string[] = [];
+  try { names = (await fsp.readdir(src)).filter((n) => n.endsWith('.csv')); } catch { return; }
+  for (const target of targets) {
+    fs.mkdirSync(target, { recursive: true });
+    for (const name of names) {
+      await fsp.copyFile(path.join(src, name), path.join(target, name));
+    }
+  }
+}
+
 /** A fresh scratch folder per project, under the output directory so it is on the same volume. */
 function scratchFor(outputDir: string, language: string, index: number): string {
   const dir = path.join(outputDir, `.${language}-project-${index}`);
@@ -291,12 +308,20 @@ export async function extractProject(opts: ExtractOptions): Promise<void> {
   // is discarded rather than into a java/ folder that would announce a language absent here.
   const configOut = perLanguage ? (javaOut ?? scratchFor(baseOut, 'config', 0)) : outputDir;
 
+  // HTML and CSS are read by more than one engine: a page's <script src> reaches a JavaScript or
+  // TypeScript module and a server template sits beside Java. In per-language mode the web
+  // tables are therefore extracted ONCE into a scratch folder and copied into every language
+  // folder that exists among those readers (web-project-analyzer.ts), rather than written into
+  // one of them and lost to the others. Flat mode writes them beside everything else.
+  const webScratch = perLanguage ? scratchFor(baseOut, 'web', 0) : undefined;
+  const webOut = webScratch ?? outputDir;
   const javaAnalyzer = new JavaProjectAnalyzer(undefined, javaOut ?? (perLanguage ? scratchFor(baseOut, 'java', 0) : outputDir));
   const propertiesAnalyzer = new PropertiesProjectAnalyzer(configOut);
   const xmlAnalyzer = new XmlProjectAnalyzer(configOut);
   const yamlAnalyzer = new YamlProjectAnalyzer(configOut);
   const gradleAnalyzer = new GradleProjectAnalyzer(configOut);
   const servicesAnalyzer = new ServicesProjectAnalyzer(configOut);
+  const webAnalyzer = new WebProjectAnalyzer(webOut);
   const pythonAnalyzer = new PythonProjectAnalyzer();
   const typescriptAnalyzer = new TypeScriptProjectAnalyzer();
   const javascriptAnalyzer = new JavaScriptProjectAnalyzer();
@@ -307,7 +332,7 @@ export async function extractProject(opts: ExtractOptions): Promise<void> {
   // gradle's void return, and the mistake surfaced only as a type error — so a
   // new analyzer is APPENDED rather than inserted, and the destructuring below
   // is checked against this list rather than against memory.
-  const [, , , , , , typescriptSummaries, pythonSummaries, javascriptSummaries, csharpSummaries]
+  const [, , , , , , typescriptSummaries, pythonSummaries, javascriptSummaries, csharpSummaries, webSummary]
     = await Promise.all([
     javaAnalyzer.analyzeJavaProjects(javaProjects, opts.versionLink, excludeTests),
     propertiesAnalyzer.analyzePropertiesFiles(scanTargets, opts.versionLink),
@@ -415,6 +440,9 @@ export async function extractProject(opts: ExtractOptions): Promise<void> {
                'test', 'tests', 'Tests', 'UnitTests', 'IntegrationTests']
             : undefined,
         }).then((summary) => [summary])),
+    // HTML and CSS are APPENDED, as the comment above the destructuring asks. Every scan
+    // target, like the other file-type analyzers: a page has no project shape of its own.
+    webAnalyzer.analyzeWebFiles(scanTargets, opts.versionLink),
   ]);
 
   // Every per-project scratch folder is merged into its language's folder now, in project
@@ -434,8 +462,16 @@ export async function extractProject(opts: ExtractOptions): Promise<void> {
     const promoted = dirFor('javascript', true)!;
     await mergeProjectOutputs([path.join(baseOut, '.javascript-project-0')], promoted);
   }
+  // The web tables reach every reader that has a folder: java (server templates), javascript and
+  // typescript (pages that load modules). A reader with no folder gets none, and a repository with
+  // none of the three keeps no web folder either — the tables would announce a language absent here.
+  if (webScratch !== undefined && webSummary.filesAnalysed > 0) {
+    const readers = [javaOut, javascriptOut ?? (fs.existsSync(path.join(baseOut, 'javascript')) ? path.join(baseOut, 'javascript') : undefined), typescriptOut]
+      .filter((d): d is string => d !== undefined);
+    await copyRelationFiles(webScratch, readers);
+  }
   if (perLanguage) {
-    for (const stray of ['.config-project-0', '.java-project-0', '.javascript-project-0']) {
+    for (const stray of ['.config-project-0', '.java-project-0', '.javascript-project-0', '.web-project-0']) {
       fs.rmSync(path.join(baseOut, stray), { recursive: true, force: true });
     }
   }
@@ -449,6 +485,9 @@ export async function extractProject(opts: ExtractOptions): Promise<void> {
   reportLanguage('TypeScript', typescriptSummaries.seconds, typescriptSummaries.value);
   reportLanguage('C#', csharpSummaries.seconds, csharpSummaries.value);
   reportLanguage('JavaScript', javascriptSummaries.seconds, javascriptSummaries.value);
+  if (webSummary.htmlFilesSeen + webSummary.cssFilesSeen > 0) {
+    console.log(`\n📊 ${'HTML/CSS files analysed:'.padEnd(30)}${webSummary.filesAnalysed} of ${webSummary.htmlFilesSeen + webSummary.cssFilesSeen}`);
+  }
 
   // Wall clock for the whole run. The per-language figures above will NOT sum to
   // it: the analyzers run concurrently, so their durations overlap. Reporting
diff --git a/parser/src/parsers/css/css-parser.ts b/parser/src/parsers/css/css-parser.ts
new file mode 100644
index 000000000..1bfb15353
--- /dev/null
+++ b/parser/src/parsers/css/css-parser.ts
@@ -0,0 +1,1558 @@
+import Parser from 'tree-sitter';
+import Css from 'tree-sitter-css';
+
+import { CssComment } from '@/analysis-types/css/CssComment';
+import { CssDeclaration } from '@/analysis-types/css/CssDeclaration';
+import { CssParseGap } from '@/analysis-types/css/CssParseGap';
+import { CssRule } from '@/analysis-types/css/CssRule';
+import { CssSelector } from '@/analysis-types/css/CssSelector';
+import { CssSelectorPart } from '@/analysis-types/css/CssSelectorPart';
+import { CssStylesheet } from '@/analysis-types/css/CssStylesheet';
+import { CssValueReference } from '@/analysis-types/css/CssValueReference';
+import { WEB_COMMENT_TEXT_LIMIT, WEB_PARSE_GAP_LIMIT } from '@/constants/web-constants';
+import { CssParseGapKind } from '@/enums/css/CssParseGapKind';
+import { CssRuleKind } from '@/enums/css/CssRuleKind';
+import { CssCombinator, CssSelectorPartKind } from '@/enums/css/CssSelectorPartKind';
+import { CssValueReferenceKind } from '@/enums/css/CssValueReferenceKind';
+import { WebUrlKind } from '@/enums/web/WebUrlKind';
+import { LineIndex, mapEmbeddedPosition } from '@/utils/web/line-index';
+import { parseWithTreeSitter } from '@/utils/web/tree-sitter-parse';
+import { applyBase, BaseUrl, classifyUrl, resolveUrlToFile } from '@/utils/web/url-reference';
+
+type SyntaxNode = Parser.SyntaxNode;
+type Pos = { line: number; column: number };
+
+/** Where a stylesheet's text sits, so every position lands in the host file. */
+export interface CssOrigin {
+  /** The row every CSS row of this text chains off. */
+  readonly stylesheet: CssStylesheet;
+  /** 1-based line and column of the text's first character in the host file. */
+  readonly line: number;
+  readonly column: number;
+  /** The file a relative `url()` resolves against, and the project root for a root-relative one. */
+  readonly filePath: string;
+  readonly projectRoot: string;
+  readonly serviceVersionLinkHash: string;
+  /** The page's `<base href>`, when the CSS sits in a page that has one: relative URLs resolve against it, as in a browser. */
+  readonly baseHref?: BaseUrl;
+}
+
+/** Where a `style="…"` attribute's declaration list sits. */
+export interface CssDeclarationListOrigin {
+  readonly htmlAttributeLinkHash: string;
+  readonly line: number;
+  readonly column: number;
+  readonly baseHref?: BaseUrl;
+  readonly filePath: string;
+  readonly projectRoot: string;
+  readonly serviceVersionLinkHash: string;
+}
+
+/** Everything one stylesheet text produces. The stylesheet row itself is the caller's. */
+export interface CssExtraction {
+  rules: CssRule[];
+  selectors: CssSelector[];
+  selectorParts: CssSelectorPart[];
+  declarations: CssDeclaration[];
+  valueReferences: CssValueReference[];
+  comments: CssComment[];
+  parseGaps: CssParseGap[];
+}
+
+/** What a `style` attribute produces. A syntax error is the caller's to record, against the page. */
+export interface CssDeclarationListExtraction {
+  declarations: CssDeclaration[];
+  valueReferences: CssValueReference[];
+  errors: { message: string; line: number; column: number }[];
+}
+
+/** `font-family` values that name a generic family, never a `@font-face`. */
+const GENERIC_FONT_FAMILIES = new Set([
+  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif',
+  'ui-monospace', 'ui-rounded', 'emoji', 'math', 'fangsong', 'inherit', 'initial', 'unset', 'revert',
+  'revert-layer',
+]);
+
+/** Identifiers of the `animation` shorthand that are keywords, not a `@keyframes` name. */
+const ANIMATION_KEYWORDS = new Set([
+  'none', 'infinite', 'normal', 'reverse', 'alternate', 'alternate-reverse', 'forwards', 'backwards',
+  'both', 'running', 'paused', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start',
+  'step-end', 'inherit', 'initial', 'unset', 'revert', 'revert-layer', 'auto', 'replace', 'add',
+  'accumulate',
+]);
+
+/** Single-colon pseudo-elements the Selectors specification still admits. */
+const LEGACY_PSEUDO_ELEMENTS = new Set(['before', 'after', 'first-line', 'first-letter']);
+
+/** Functional pseudo-classes whose specificity is that of their most specific argument. */
+const SPECIFICITY_OF_ARGUMENT = new Set(['is', 'not', 'has', 'matches', '-webkit-any', '-moz-any', 'host', 'host-context']);
+
+/** Functional pseudo-classes whose argument is a selector list (plus `nth-*`'s `of S`, handled apart). */
+const SELECTOR_ARGUMENT_PSEUDOS = new Set(['is', 'not', 'where', 'has', 'matches', '-webkit-any', '-moz-any', 'host', 'host-context', 'slotted']);
+
+/** Preprocessor syntax that cannot be CSS. Each is a (name, pattern) so the gap names what it saw. */
+const PREPROCESSOR_MARKERS: ReadonlyArray<readonly [string, RegExp]> = [
+  ['sass variable', /(^|[\s;{])\$[A-Za-z_][\w-]*\s*:/m],
+  ['sass directive', /@(mixin|include|extend|function|return|each|while|use|forward)\b/],
+  // An at-rule name followed by a colon is a Less variable only when it is not a CSS at-rule
+  // (`@page :first` is one), and Less writes no space before the colon.
+  ['less variable', /^\s*@(?!(?:page|media|import|charset|namespace|supports|font-face|keyframes|layer|container|property|scope|counter-style|font-feature-values|font-palette-values|position-try|view-transition|starting-style|document|viewport|-[a-z]+-[a-z-]+)\b)[A-Za-z_][\w-]*:/m],
+  ['less mixin call', /^\s*\.[A-Za-z_][\w-]*\s*\([^)]*\)\s*;/m],
+];
+
+/**
+ * A CSS escape: a backslash and up to six hex digits with an optional trailing space, or a
+ * backslash and any other character. Tailwind writes `.md\:flex` and `.w-1\/2`; a hand
+ * written sheet writes `#\31 23` for an id starting with a digit.
+ */
+const CSS_ESCAPE = /\\(?:[0-9a-fA-F]{1,6} ?|[^\n0-9a-fA-F])/g;
+
+/**
+ * The text the GRAMMAR is handed, same length as the source so every offset is the source's.
+ *
+ * tree-sitter-css has no rule for an escape in an identifier: `.md\:flex` ends the class at
+ * `\` and the rest is an error that can swallow the next rule whole. Each escape is replaced
+ * by underscores of the same length, which the grammar reads as part of the identifier, and
+ * every name is then read from the ORIGINAL text at the node's offsets and unescaped. A
+ * dotted `@layer a.b` is sanitised the same way: the grammar reads `.b` as a class selector
+ * and starts a rule, so the dots of a layer name become underscores for the grammar only.
+ */
+function sanitiseForGrammar(text: string): string {
+  let out = text.replace(CSS_ESCAPE, (m) => '_'.repeat(m.length));
+  // A non-ASCII character in an identifier (`.日本語`, `.emoji-🚀`) is legal CSS the grammar
+  // rejects; every code unit above ASCII becomes an underscore of the same length.
+  out = out.replace(/[^\x00-\x7f]/g, '_');
+  out = out.replace(/@layer\s+[\w.-]+(?:\s*,\s*[\w.-]+)*|\blayer\(\s*[\w.-]+\s*\)/g, (m) => m.replace(/\./g, '_'));
+  // `<!--` and `-->` around a stylesheet (the old way of hiding CSS from a browser without
+  // `<style>`) are tokens CSS ignores at the top level; the grammar does not know them.
+  out = out.replace(/(^|\s)(<!--|-->)(?=\s|$)/g, (_m, lead: string, token: string) => lead + ' '.repeat(token.length));
+  // A single-quoted string inside `:not([a*='x'])` is an error to the grammar where the
+  // double-quoted one is not; a single-quoted string holding no `"` is requoted for it.
+  out = out.replace(/'([^'"\n\\]*)'/g, (_m, inner: string) => `"${inner}"`);
+  // `!IMPORTANT` is important (CSS keywords are case-insensitive); the grammar knows the lowercase spelling only.
+  out = out.replace(/!\s*important\b/gi, (m) => m.toLowerCase());
+  return out;
+}
+
+/** The text with every comment's inside blanked, same length, for scans that must not read comments. */
+function withoutComments(text: string): string {
+  return text.replace(/\/\*[\s\S]*?\*\//g, (m) => '/*' + ' '.repeat(m.length - 4) + '*/');
+}
+
+/** An identifier as written, with its CSS escapes decoded: `md\:flex` is `md:flex`, `\31 23` is `123`. */
+function unescapeCss(text: string): string {
+  return text.replace(CSS_ESCAPE, (m) => {
+    const hex = /^\\([0-9a-fA-F]{1,6}) ?$/.exec(m);
+    if (hex !== null) {
+      const code = parseInt(hex[1]!, 16);
+      return code === 0 || code > 0x10ffff ? '\ufffd' : String.fromCodePoint(code);
+    }
+    return m.slice(1);
+  });
+}
+
+/** The grammar's at-rule statement node types; `at_rule` is the generic one. */
+const AT_RULE_TYPES = new Set([
+  'media_statement', 'supports_statement', 'keyframes_statement', 'import_statement', 'charset_statement',
+  'namespace_statement', 'at_rule', 'postcss_statement',
+]);
+
+/** The grammar's combinator node types, each binary: left selector, operator, right selector. */
+const COMBINATOR_TYPES: Record<string, CssCombinator> = {
+  descendant_selector: CssCombinator.DESCENDANT,
+  child_selector: CssCombinator.CHILD,
+  adjacent_sibling_selector: CssCombinator.NEXT_SIBLING,
+  sibling_selector: CssCombinator.SUBSEQUENT_SIBLING,
+};
+
+const IDENTIFIER = /^-?[A-Za-z_][\w-]*$/;
+
+/** Words a `@container` prelude may begin with that are not a container's name. */
+const CONTAINER_QUERY_KEYWORDS = new Set(['not', 'and', 'or', 'style', 'scroll-state']);
+
+/**
+ * A second parser for selector TEXT the grammar left raw inside an argument: `:nth-child(2n of
+ * .x)` is an `ERROR` to it, and the selector after `of` is read here as a rule of its own.
+ */
+let selectorTextParser: Parser | undefined;
+function selectorNodesFromText(text: string): SyntaxNode[] {
+  if (selectorTextParser === undefined) {
+    selectorTextParser = new Parser();
+    selectorTextParser.setLanguage(Css);
+  }
+  const root = selectorTextParser.parse(sanitiseForGrammar(`${text}{}`)).rootNode;
+  const selectors = root.namedChildren.find((c) => c.type === 'rule_set')?.namedChildren.find((c) => c.type === 'selectors');
+  return selectors === undefined ? [] : selectors.namedChildren.filter((c) => c.type !== 'ERROR' && c.type !== 'comment');
+}
+
+/** One simple selector as the grammar and this file read it. */
+interface Part {
+  kind: CssSelectorPartKind;
+  name: string;
+  value: string;
+  matcher: string;
+  flags: string;
+  offset: number;
+  /** The selector roots inside a functional pseudo-class's parentheses. */
+  args: SyntaxNode[];
+  /** When `args` were read from text (`of S`): that text and the sheet offset it begins at, so its parts are cited where S sits. */
+  argument?: { text: string; offset: number };
+  /** A region the grammar rejected that the text read: its error is not a gap. */
+  recovered?: [number, number];
+}
+
+/** One compound: the parts between two combinators, and the combinator written before it. */
+interface Compound {
+  combinator: CssCombinator;
+  parts: Part[];
+}
+
+/** The text being read and where it sits, shared by every method of one parse. */
+interface Sheet {
+  readonly text: string;
+  readonly lines: LineIndex;
+  readonly host: Pos;
+  readonly filePath: string;
+  readonly projectRoot: string;
+  readonly version: string;
+  readonly stylesheetLinkHash: string;
+  /** The host page's `<base href>`, for CSS written in a page. */
+  readonly baseHref?: BaseUrl;
+  /**
+   * For a VIEW over a wrapper text (`*{ … }` around a fragment): the sheet the fragment
+   * came from and the function taking a wrapper offset to that sheet's offset. Positions
+   * resolve through the chain, so a row read from the wrapper is cited in the real file.
+   */
+  readonly base?: Sheet;
+  readonly toBase?: (offset: number) => number;
+}
+
+/** An offset of a sheet (or a wrapper view) as an offset of the base sheet. */
+function baseOffset(sheet: Sheet, offset: number): number {
+  return sheet.base !== undefined && sheet.toBase !== undefined ? baseOffset(sheet.base, sheet.toBase(offset)) : offset;
+}
+
+/** The host-file position of an offset in a sheet, through any wrapper views. */
+function locate(sheet: Sheet, offset: number): Pos {
+  if (sheet.base !== undefined && sheet.toBase !== undefined) {
+    return locate(sheet.base, sheet.toBase(offset));
+  }
+  return mapEmbeddedPosition(sheet.host, sheet.lines.positionOf(offset));
+}
+
+/** A view over `*{ text }` whose fragment sits at `offset` of `sheet`. */
+function wrapperView(sheet: Sheet, wrapped: string, offset: number): Sheet {
+  return {
+    ...sheet,
+    text: wrapped,
+    lines: new LineIndex(wrapped),
+    base: sheet,
+    toBase: (o: number) => Math.max(0, o - 2) + offset,
+  };
+}
+
+/**
+ * The CSS front end: tree-sitter-css's tree, read into rows.
+ *
+ * ## What the grammar decides and what this file decides
+ *
+ * tree-sitter-css tokenises and builds the tree, tolerantly: a construct it does not know
+ * becomes an `ERROR` node and parsing resumes at the next rule or declaration. It knows
+ * selectors as a nested binary tree (`a > b c` is `descendant(child(a, b), c)`), rules
+ * nested in rules, the common at-rules, and `call_expression` values. It does not know
+ * every shape this file meets — an unquoted `url(../x)`, an attribute selector's `i` flag,
+ * `@container`'s name, a range media query — so where the tree is broken the text is read
+ * directly: every value reference (`var()`, `url()`, a keyframes or font name) is scanned
+ * from the declaration's text rather than its nodes, and a prelude is a source slice.
+ * Each `ERROR` is still a recorded gap, so a consumer knows where the tree was weak.
+ *
+ * ## Positions are the host file's
+ *
+ * A `<style>` block's CSS begins at some (line, column) of a page; every offset is mapped
+ * through `mapEmbeddedPosition` so a reader opening `page.html:41` sees the declaration.
+ * A `.css` file is the degenerate case with an origin of (1, 1).
+ */
+export class CssParser {
+  private readonly parser: Parser;
+
+  constructor() {
+    this.parser = new Parser();
+    this.parser.setLanguage(Css);
+  }
+
+  /** A whole stylesheet: a `.css` file or a `<style>` body. */
+  parseStylesheet(text: string, origin: CssOrigin): CssExtraction {
+    const out: CssExtraction = {
+      rules: [], selectors: [], selectorParts: [], declarations: [], valueReferences: [], comments: [], parseGaps: [],
+    };
+    const sheet: Sheet = {
+      text, lines: new LineIndex(text), host: { line: origin.line, column: origin.column }, filePath: origin.filePath,
+      projectRoot: origin.projectRoot, version: origin.serviceVersionLinkHash, stylesheetLinkHash: origin.stylesheet.getHash(),
+      baseHref: origin.baseHref,
+    };
+    const gaps = new GapCollector(out.parseGaps);
+    const root = parseWithTreeSitter(this.parser, sanitiseForGrammar(text)).rootNode;
+    this.walkBlock(root, '', 0, sheet, out, gaps, '');
+    this.recordSyntaxErrors(root, sheet, gaps);
+    const uncommented = withoutComments(text);
+    for (const [name, pattern] of PREPROCESSOR_MARKERS) {
+      const m = pattern.exec(uncommented);
+      if (m !== null) {
+        gaps.add(sheet, CssParseGapKind.PREPROCESSOR_SYNTAX, `${name}: ${m[0].trim()}`, m.index, m.index + m[0].length, '');
+        break;
+      }
+    }
+    gaps.finish(sheet);
+    origin.stylesheet.setCounts({
+      ruleCount: out.rules.length,
+      declarationCount: out.declarations.length,
+      parseGapCount: out.parseGaps.length,
+    });
+    return out;
+  }
+
+  /**
+   * A `style="…"` attribute's declaration list. The grammar has no declaration-list entry
+   * point, so the text is read inside a throwaway `*{ … }` rule and every offset is shifted
+   * back by the two characters of that prefix.
+   */
+  parseDeclarationList(text: string, origin: CssDeclarationListOrigin): CssDeclarationListExtraction {
+    const out: CssDeclarationListExtraction = { declarations: [], valueReferences: [], errors: [] };
+    const sheet: Sheet = {
+      text, lines: new LineIndex(text), host: { line: origin.line, column: origin.column }, filePath: origin.filePath,
+      projectRoot: origin.projectRoot, version: origin.serviceVersionLinkHash, stylesheetLinkHash: '', baseHref: origin.baseHref,
+    };
+    const collected: CssExtraction = {
+      rules: [], selectors: [], selectorParts: [], declarations: [], valueReferences: [], comments: [], parseGaps: [],
+    };
+    const gaps = new GapCollector(collected.parseGaps);
+    this.declarationsFromText(text, 0, '', origin.htmlAttributeLinkHash, sheet, collected, gaps, 0);
+    gaps.finish(sheet);
+    out.declarations = collected.declarations;
+    out.valueReferences = collected.valueReferences;
+    out.errors = collected.parseGaps.map((g) => ({ message: g.detail, line: g.startLine, column: g.startColumn }));
+    return out;
+  }
+
+  // ── blocks ────────────────────────────────────────────────────────────────
+
+  /**
+   * The children of a block (or of the stylesheet), in order. `ERROR` nodes are looked
+   * into for the rules and declarations they still hold, and reported by the sweep.
+   * Returns the counts the owning rule records.
+   */
+  private walkBlock(
+    container: SyntaxNode,
+    parentRule: string,
+    depth: number,
+    sheet: Sheet,
+    out: CssExtraction,
+    gaps: GapCollector,
+    parentAtRule: string,
+    declarationPosition = { n: 0 }
+  ): { rules: number; declarations: number } {
+    let position = 0;
+    const counts = { rules: 0, declarations: 0 };
+    // The rule a top-level declaration continues: the previous rule, when its block ended
+    // on a grammar error. Reset by anything else, since a rule that closed cleanly is done.
+    let spilled: { rule: string; positions: { n: number } } | undefined;
+    let leadingCombinator: SyntaxNode | undefined;
+    for (const node of liftedChildrenKeepingHeaders(container, sheet)) {
+      if (node.type === 'declaration') {
+        // handled below; the spill context must survive a run of them
+      } else if (node.type === 'rule_set' && parentRule === '' && node.hasError && lastBlockUnclosed(node, sheet)) {
+        spilled = { rule: '', positions: { n: 0 } };
+      } else if (node.type === 'ERROR' && parentRule === '' && isRejectedHeader(sourceOf(sheet, node))) {
+        // A rule HEADER the grammar rejected, possibly with the start of its block swallowed
+        // (`tag[a="b c"]{--x:1`): the text up to the `{` is the rule, read through the
+        // selector reader; the text after it and the declarations that follow are its block.
+        const rule = this.ruleFromText(node, position++, depth, sheet, out, gaps);
+        counts.rules += 1;
+        spilled = { rule: rule.getHash(), positions: { n: 0 } };
+        const text = sourceOf(sheet, node);
+        const brace = text.indexOf('{');
+        if (brace >= 0 && text.slice(brace + 1).trim() !== '') {
+          const emitted = this.declarationsFromText(text.slice(brace + 1), node.startIndex + brace + 1, rule.getHash(), '', sheet, out, gaps, 0, spilled.positions);
+          counts.declarations += emitted;
+        }
+        continue;
+      } else if (node.type === 'ERROR' && /keyframes$/.test(parentAtRule) && /^[\s\d.%,]*(?:from|to)?[\s\d.%,]*$/.test(sourceOf(sheet, node))) {
+        // `10%, 20% { }` or `68.2% { }`: the grammar reads one integer percentage per keyframe
+        // block and rejects the rest of the selector; it is the next block's prelude.
+        leadingCombinator = node;
+        continue;
+      } else if (node.type === 'ERROR' && LEADING_SELECTOR_FRAGMENT.test(sourceOf(sheet, node))) {
+        // A relative selector's leading combinator (`> .f` in a nested rule), or the first
+        // `&` of `& &`, is an ERROR beside the rule it begins; the rule reads it from the text.
+        leadingCombinator = node;
+        continue;
+      } else if (node.type === 'ERROR' && parentRule !== '' && container.type === 'block' && isDeclarationRun(sourceOf(sheet, node))) {
+        // `color red; a: b; c: d`: one malformed declaration takes the block's remaining
+        // declarations into its ERROR. The text is read again, declaration by declaration;
+        // the malformed one is reported from there, so the grammar's whole-run error is not.
+        gaps.recover(sheet, node.startIndex, node.endIndex);
+        counts.declarations += this.declarationsFromText(sourceOf(sheet, node), node.startIndex, parentRule, '', sheet, out, gaps, declarationPosition.n, declarationPosition);
+        continue;
+      } else {
+        spilled = undefined;
+      }
+      if (node.type === 'rule_set') {
+        const before = out.rules.length;
+        this.styleRule(node, parentRule, position++, depth, sheet, out, gaps, parentAtRule, leadingCombinator);
+        leadingCombinator = undefined;
+        counts.rules += 1;
+        if (spilled !== undefined && out.rules.length > before) {
+          const rule = out.rules[before]!;
+          spilled = { rule: rule.getHash(), positions: { n: rule.getDeclarationCount() } };
+        }
+      } else if (node.type === 'keyframe_block') {
+        this.keyframeBlock(node, parentRule, position++, depth, sheet, out, gaps, leadingCombinator);
+        leadingCombinator = undefined;
+        counts.rules += 1;
+      } else if (AT_RULE_TYPES.has(node.type)) {
+        this.atRule(node, parentRule, position++, depth, sheet, out, gaps);
+        counts.rules += 1;
+      } else if (node.type === 'declaration') {
+        if (parentRule === '') {
+          // A declaration at the top level of a stylesheet. When the rule before it ended on
+          // a grammar error, the grammar closed that rule early and these are the rest of
+          // its block (`rgb(0 0 0/10%)` did this to a `:root` block of sixty custom
+          // properties): they belong to that rule. Otherwise (`$primary: red;`) CSS allows
+          // no declaration here and it is a gap, not a row.
+          if (spilled !== undefined) {
+            counts.declarations += this.declaration(node, spilled.rule, '', sheet, out, gaps, spilled.positions);
+            const owner = out.rules.find((r) => r.getHash() === spilled!.rule);
+            if (owner !== undefined) {
+              owner.setCounts({ selectorCount: owner.getSelectorCount(), declarationCount: spilled.positions.n, childRuleCount: owner.getChildRuleCount() });
+            }
+            continue;
+          }
+          gaps.add(sheet, CssParseGapKind.UNPARSED_FRAGMENT, `declaration outside a rule: ${snippet(sourceOf(sheet, node))}`, node.startIndex, node.endIndex, '');
+          continue;
+        }
+        counts.declarations += this.declaration(node, parentRule, '', sheet, out, gaps, declarationPosition);
+      } else if (node.type === 'comment') {
+        this.comment(node, sheet, out);
+      } else if (node.type === 'js_comment') {
+        gaps.add(sheet, CssParseGapKind.PREPROCESSOR_SYNTAX, `line comment: ${snippet(node.text)}`, node.startIndex, node.endIndex, parentRule);
+      }
+    }
+    return counts;
+  }
+
+  private styleRule(
+    node: SyntaxNode,
+    parentRule: string,
+    position: number,
+    depth: number,
+    sheet: Sheet,
+    out: CssExtraction,
+    gaps: GapCollector,
+    parentAtRule: string,
+    leadingCombinator?: SyntaxNode
+  ): void {
+    const selectors = node.namedChildren.find((c) => c.type === 'selectors');
+    const block = node.namedChildren.find((c) => c.type === 'block');
+    const preludeEnd = block?.startIndex ?? selectors?.endIndex ?? node.endIndex;
+    const ruleStart = leadingCombinator?.startIndex ?? node.startIndex;
+    const preludeText = collapse(sheet.text.slice(ruleStart, preludeEnd));
+    const start = this.at(sheet, ruleStart);
+    const end = this.at(sheet, node.endIndex);
+    const rule = new CssRule({
+      ruleKind: CssRuleKind.STYLE_RULE, atRuleName: '', name: '', preludeText, nestingDepth: depth, position,
+      startLine: start.line, startColumn: start.column, endLine: end.line, endColumn: end.column,
+      parentRuleLinkHash: parentRule, stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    });
+    out.rules.push(rule);
+    let selectorCount = 0;
+    if (selectors !== undefined) {
+      const keyframes = /keyframes$/.test(parentAtRule);
+      const groups = selectorGroups(selectors);
+      // What the grammar rejected beside the selector list is an ERROR sibling of it: after
+      // the list (`.title &`) it belongs to the last selector written, before it (`> .f`, a
+      // relative selector's leading combinator) to the first.
+      const first = groups[0];
+      const last = groups[groups.length - 1];
+      if (leadingCombinator !== undefined && first !== undefined) {
+        first.start = leadingCombinator.startIndex;
+        gaps.recover(sheet, leadingCombinator.startIndex, leadingCombinator.endIndex);
+      }
+      for (const sibling of node.children) {
+        if (sibling.type !== 'ERROR' || sibling.endIndex > preludeEnd || /^[\s,]*$/.test(sourceOf(sheet, sibling))) {
+          continue;
+        }
+        if (sibling.startIndex >= selectors.endIndex && last !== undefined) {
+          last.nodes.push(sibling);
+          last.end = sibling.endIndex;
+        } else if (sibling.endIndex <= selectors.startIndex && first !== undefined) {
+          first.start = sibling.startIndex;
+          gaps.recover(sheet, sibling.startIndex, sibling.endIndex);
+        }
+      }
+      for (const group of groups) {
+        this.selector(group, selectorCount++, rule, sheet, out, gaps, keyframes);
+      }
+    }
+    const counts = block === undefined ? { rules: 0, declarations: 0 }
+      : this.walkBlock(block, rule.getHash(), depth + 1, sheet, out, gaps, parentAtRule);
+    rule.setCounts({ selectorCount, declarationCount: counts.declarations, childRuleCount: counts.rules });
+  }
+
+  /** A style rule whose header the grammar rejected, read from the header's text; its block is the declarations that follow. */
+  private ruleFromText(header: SyntaxNode, position: number, depth: number, sheet: Sheet, out: CssExtraction, gaps: GapCollector): CssRule {
+    const text = sourceOf(sheet, header);
+    const preludeText = collapse(text.slice(0, text.indexOf('{')));
+    const start = this.at(sheet, header.startIndex);
+    const end = this.at(sheet, header.endIndex);
+    const rule = new CssRule({
+      ruleKind: CssRuleKind.STYLE_RULE, atRuleName: '', name: '', preludeText, nestingDepth: depth, position,
+      startLine: start.line, startColumn: start.column, endLine: end.line, endColumn: end.column,
+      parentRuleLinkHash: '', stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    });
+    out.rules.push(rule);
+    gaps.recover(sheet, header.startIndex, header.endIndex);
+    gaps.add(sheet, CssParseGapKind.UNPARSED_FRAGMENT, `rule header read from text: ${snippet(preludeText)}`, header.startIndex, header.endIndex, rule.getHash());
+    let selectorCount = 0;
+    for (const root of selectorNodesFromText(preludeText)) {
+      const localSheet: Sheet = { ...sheet, text: `${preludeText}{}` };
+      const group: SelectorGroup = { nodes: [root], start: root.startIndex, end: root.endIndex };
+      const compounds = flattenGroup(group, localSheet);
+      const s = specificity(compounds, localSheet);
+      const row = new CssSelector({
+        selectorText: collapse(preludeText.slice(root.startIndex, root.endIndex)), position: selectorCount++, specificityA: s.a, specificityB: s.b,
+        specificityC: s.c, compoundCount: compounds.length, hasNesting: s.nesting, hasPseudoElement: s.pseudoElement,
+        startLine: start.line, startColumn: start.column, endLine: start.line, endColumn: start.column,
+        ruleLinkHash: rule.getHash(), stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+      });
+      out.selectors.push(row);
+      const counter = { position: 0 };
+      this.emitParts(compounds, row, rule, '', 0, { ...localSheet, lines: new LineIndex(`${preludeText}{}`), host: start, base: undefined, toBase: undefined }, out, counter);
+    }
+    rule.setCounts({ selectorCount, declarationCount: 0, childRuleCount: 0 });
+    return rule;
+  }
+
+  /** `from { … }`, `50% { … }`, `to { … }` inside `@keyframes`: a rule whose selector is a moment, not an element. */
+  private keyframeBlock(node: SyntaxNode, parentRule: string, position: number, depth: number, sheet: Sheet, out: CssExtraction, gaps: GapCollector, leading?: SyntaxNode): void {
+    const block = node.namedChildren.find((c) => c.type === 'block');
+    const ruleStart = leading?.startIndex ?? node.startIndex;
+    const preludeText = collapse(sheet.text.slice(ruleStart, block?.startIndex ?? node.endIndex));
+    // What the grammar rejected in the selector (`68.2%`, a `10%, 20%` list) the text has read.
+    gaps.recover(sheet, ruleStart, block?.startIndex ?? node.endIndex);
+    const start = this.at(sheet, ruleStart);
+    const end = this.at(sheet, node.endIndex);
+    const rule = new CssRule({
+      ruleKind: CssRuleKind.STYLE_RULE, atRuleName: '', name: '', preludeText, nestingDepth: depth, position,
+      startLine: start.line, startColumn: start.column, endLine: end.line, endColumn: end.column,
+      parentRuleLinkHash: parentRule, stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    });
+    out.rules.push(rule);
+    const selectorEnd = this.at(sheet, (block?.startIndex ?? node.endIndex));
+    out.selectors.push(new CssSelector({
+      selectorText: preludeText, position: 0, specificityA: 0, specificityB: 0, specificityC: 0, compoundCount: 0,
+      hasNesting: false, hasPseudoElement: false, startLine: start.line, startColumn: start.column,
+      endLine: selectorEnd.line, endColumn: selectorEnd.column, ruleLinkHash: rule.getHash(),
+      stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    }));
+    const counts = block === undefined ? { rules: 0, declarations: 0 } : this.walkBlock(block, rule.getHash(), depth + 1, sheet, out, gaps, 'keyframes');
+    rule.setCounts({ selectorCount: 1, declarationCount: counts.declarations, childRuleCount: counts.rules });
+  }
+
+  private atRule(node: SyntaxNode, parentRule: string, position: number, depth: number, sheet: Sheet, out: CssExtraction, gaps: GapCollector): void {
+    const keyword = node.children.find((c) => c.text.startsWith('@'));
+    const name = (keyword === undefined ? '@' : sourceOf(sheet, keyword)).slice(1).toLowerCase();
+    const block = node.namedChildren.find((c) => c.type === 'block' || c.type === 'keyframe_block_list');
+    const preludeStart = keyword?.endIndex ?? node.startIndex;
+    let preludeEnd = block?.startIndex ?? node.endIndex;
+    if (block === undefined && sheet.text[preludeEnd - 1] === ';') {
+      preludeEnd -= 1;
+    }
+    const preludeText = collapse(sheet.text.slice(preludeStart, preludeEnd));
+    const start = this.at(sheet, node.startIndex);
+    const end = this.at(sheet, node.endIndex);
+    const rule = new CssRule({
+      ruleKind: CssRuleKind.AT_RULE, atRuleName: name, name: atRuleDeclaredName(name, preludeText), preludeText,
+      nestingDepth: depth, position, startLine: start.line, startColumn: start.column, endLine: end.line,
+      endColumn: end.column, parentRuleLinkHash: parentRule, stylesheetLinkHash: sheet.stylesheetLinkHash,
+      serviceVersionLinkHash: sheet.version,
+    });
+    out.rules.push(rule);
+    if (node.type === 'postcss_statement') {
+      gaps.add(sheet, CssParseGapKind.PREPROCESSOR_SYNTAX, `postcss statement: ${snippet(node.text)}`, node.startIndex, node.endIndex, rule.getHash());
+    }
+    this.preludeReferences(name, preludeText, preludeStart, rule.getHash(), sheet, out, gaps);
+    let counts = { rules: 0, declarations: 0 };
+    if (block !== undefined) {
+      const bare = name.replace(/^-[a-z]+-/, '');
+      counts = this.walkBlock(block, rule.getHash(), depth + 1, sheet, out, gaps, bare);
+      if (bare === 'font-face') {
+        const family = out.declarations.find((d) => d.ruleLinkHash === rule.getHash() && d.property.toLowerCase() === 'font-family');
+        if (family !== undefined) {
+          rule.setName(family.valueText.replace(/^["']|["']$/g, ''));
+        }
+      }
+    }
+    rule.setCounts({ selectorCount: 0, declarationCount: counts.declarations, childRuleCount: counts.rules });
+  }
+
+  // ── selectors ─────────────────────────────────────────────────────────────
+
+  private selector(group: SelectorGroup, position: number, rule: CssRule, sheet: Sheet, out: CssExtraction, gaps: GapCollector, keyframes: boolean): void {
+    const start = this.at(sheet, group.start);
+    const end = this.at(sheet, group.end);
+    const selectorText = collapse(sheet.text.slice(group.start, group.end));
+    const compounds = keyframes ? [] : flattenGroup(group, sheet);
+    for (const compound of compounds) {
+      for (const part of compound.parts) {
+        if (part.recovered !== undefined) {
+          gaps.recover(sheet, part.recovered[0], part.recovered[1]);
+        }
+      }
+    }
+    const s = specificity(compounds, sheet);
+    const row = new CssSelector({
+      selectorText, position, specificityA: s.a, specificityB: s.b, specificityC: s.c, compoundCount: compounds.length,
+      hasNesting: s.nesting || /(^|[\s>+~(])&/.test(selectorText), hasPseudoElement: s.pseudoElement,
+      startLine: start.line, startColumn: start.column, endLine: end.line, endColumn: end.column,
+      ruleLinkHash: rule.getHash(), stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    });
+    out.selectors.push(row);
+    const counter = { position: 0 };
+    this.emitParts(compounds, row, rule, '', 0, sheet, out, counter);
+  }
+
+  private emitParts(
+    compounds: readonly Compound[],
+    selector: CssSelector,
+    rule: CssRule,
+    parentPart: string,
+    depth: number,
+    sheet: Sheet,
+    out: CssExtraction,
+    counter: { position: number },
+    argumentIndex = 0
+  ): void {
+    compounds.forEach((compound, compoundIndex) => {
+      compound.parts.forEach((part, index) => {
+        const at = this.at(sheet, part.offset);
+        const row = new CssSelectorPart({
+          partKind: part.kind, name: part.name, value: part.value, attributeMatcher: part.matcher, attributeFlags: part.flags,
+          combinatorBefore: index === 0 ? compound.combinator : CssCombinator.NONE, compoundIndex, position: counter.position++,
+          depth, argumentIndex, startLine: at.line, startColumn: at.column, parentPartLinkHash: parentPart, selectorLinkHash: selector.getHash(),
+          ruleLinkHash: rule.getHash(), serviceVersionLinkHash: sheet.version,
+        });
+        out.selectorParts.push(row);
+        // `of S` was read from its own text: its nodes carry that text's offsets, so they are
+        // read through a view whose origin is where S sits in the sheet.
+        const argumentSheet: Sheet = part.argument === undefined ? sheet : {
+          ...sheet, text: `${part.argument.text}{}`, lines: new LineIndex(`${part.argument.text}{}`),
+          host: this.at(sheet, part.argument.offset), base: undefined, toBase: undefined,
+        };
+        part.args.forEach((argument, argumentIndex) => {
+          this.emitParts(flatten(argument, argumentSheet), selector, rule, row.getHash(), depth + 1, argumentSheet, out, counter, argumentIndex);
+        });
+      });
+    });
+  }
+
+  // ── declarations and the names their values refer to ──────────────────────
+
+  /**
+   * One declaration node, and the declarations the grammar folded into it after an
+   * error: `color: ;` swallows `top: 1px` into its own node, so the text past the error is
+   * read again as a declaration list. Returns how many declarations were emitted.
+   */
+  private declaration(
+    node: SyntaxNode,
+    ruleLinkHash: string,
+    htmlAttributeLinkHash: string,
+    sheet: Sheet,
+    out: CssExtraction,
+    gaps: GapCollector,
+    positions: { n: number }
+  ): number {
+    const propertyNode = node.namedChildren.find((c) => c.type === 'property_name');
+    const property = propertyNode === undefined ? '' : unescapeCss(sourceOf(sheet, propertyNode));
+    const colon = node.children.find((c) => !c.isNamed && c.type === ':');
+    let error = node.children.find((c) => c.type === 'ERROR');
+    let important = node.namedChildren.find((c) => c.type === 'important') !== undefined;
+    const valueStart = colon?.endIndex ?? node.startIndex;
+    let valueEnd = important ? node.namedChildren.find((c) => c.type === 'important')!.startIndex : node.endIndex;
+    // `! important` with a space is legal and the grammar rejects it: the `!` and the word
+    // become ERROR children. The text says what was meant, and the errors are recovered.
+    const spaced = /!\s+important\s*;?\s*$/i.exec(sheet.text.slice(valueStart, node.endIndex));
+    if (spaced !== null && error !== undefined && error.startIndex >= valueStart + spaced.index) {
+      important = true;
+      valueEnd = valueStart + spaced.index;
+      gaps.recover(sheet, valueStart + spaced.index, node.endIndex);
+      error = undefined;
+    }
+    if (error !== undefined && error.startIndex < valueEnd) {
+      valueEnd = error.startIndex;
+    }
+    if (sheet.text[valueEnd - 1] === ';') {
+      valueEnd -= 1;
+    }
+    const valueText = collapse(sheet.text.slice(valueStart, Math.max(valueStart, valueEnd)));
+    const end = error?.endIndex ?? node.endIndex;
+    const declaration = this.declarationRow(property, valueText, important, node.startIndex, end, positions.n++, ruleLinkHash, htmlAttributeLinkHash, sheet);
+    out.declarations.push(declaration);
+    for (const v of this.valueReferences(sheet.text.slice(valueStart, Math.max(valueStart, valueEnd)), valueStart, property, declaration.getHash(), sheet, gaps)) {
+      out.valueReferences.push(v);
+    }
+    // A custom property may legally be empty (`--bs-nav-link-font-weight: ;` in Bootstrap);
+    // any other property with no value is a grammar-level error the grammar does not report.
+    if (valueText === '' && !property.startsWith('--')) {
+      gaps.add(sheet, CssParseGapKind.PARSE_ERROR, `empty value for ${property}`, node.startIndex, node.endIndex, ruleLinkHash);
+    }
+    let emitted = 1;
+    if (error !== undefined && error.endIndex < node.endIndex) {
+      const rest = sheet.text.slice(error.endIndex, node.endIndex);
+      emitted += this.declarationsFromText(rest, error.endIndex, ruleLinkHash, htmlAttributeLinkHash, sheet, out, gaps, positions.n, positions);
+    }
+    return emitted;
+  }
+
+  /**
+   * Reads `text`, which sits at `offset` of the sheet, as a declaration list through a
+   * throwaway `*{ … }` rule. Used for `style` attributes and for the text a broken
+   * declaration swallowed. Returns how many declarations were emitted.
+   */
+  private declarationsFromText(
+    text: string,
+    offset: number,
+    ruleLinkHash: string,
+    htmlAttributeLinkHash: string,
+    sheet: Sheet,
+    out: CssExtraction,
+    gaps: GapCollector,
+    firstPosition: number,
+    positions: { n: number } = { n: firstPosition }
+  ): number {
+    if (text.trim() === '') {
+      return 0;
+    }
+    const wrapped = `*{${text}}`;
+    const root = parseWithTreeSitter(this.parser, sanitiseForGrammar(wrapped)).rootNode;
+    const block = root.namedChildren.find((c) => c.type === 'rule_set')?.namedChildren.find((c) => c.type === 'block');
+    if (block === undefined) {
+      gaps.add(sheet, CssParseGapKind.UNPARSED_FRAGMENT, snippet(text), offset, offset + text.length, ruleLinkHash);
+      return 0;
+    }
+    // The wrapper's nodes carry the wrapper's offsets; the view maps them back to the sheet.
+    const view = wrapperView(sheet, wrapped, offset);
+    const children = liftedChildren(block);
+    if (!children.some((c) => c.type === 'declaration') && !errorNodes(block).next().done) {
+      // The grammar rejected the list whole (`color red; a: b`). Each `;`-separated segment
+      // is read on its own, so the malformed one is the only loss, and it is the one reported.
+      const segments = splitTopLevel(text, ';');
+      if (segments.length > 1) {
+        let emitted = 0;
+        for (const segment of segments) {
+          gaps.recover(sheet, offset + segment.offset, offset + segment.offset + segment.text.length);
+          const got = this.declarationsFromText(segment.text, offset + segment.offset, ruleLinkHash, htmlAttributeLinkHash, sheet, out, gaps, positions.n, positions);
+          if (got === 0) {
+            gaps.add(sheet, CssParseGapKind.UNPARSED_FRAGMENT, `declaration not read: ${snippet(segment.text)}`, offset + segment.offset, offset + segment.offset + segment.text.length, ruleLinkHash);
+          }
+          emitted += got;
+        }
+        return emitted;
+      }
+    }
+    let emitted = 0;
+    for (const child of children) {
+      if (child.type === 'declaration') {
+        emitted += this.declaration(child, ruleLinkHash, htmlAttributeLinkHash, view, out, gaps, positions);
+      } else if (child.type === 'comment') {
+        this.comment(child, view, out);
+      } else if (child.type === 'rule_set' || AT_RULE_TYPES.has(child.type)) {
+        gaps.add(view, CssParseGapKind.UNPARSED_FRAGMENT, snippet(child.text), child.startIndex, child.endIndex, ruleLinkHash);
+      }
+    }
+    for (const node of errorNodes(block)) {
+      gaps.add(view, CssParseGapKind.PARSE_ERROR, node.isMissing ? `missing ${node.type}` : `syntax error: ${snippet(node.text)}`, node.startIndex, node.endIndex, ruleLinkHash);
+    }
+    return emitted;
+  }
+
+  private declarationRow(
+    property: string,
+    valueText: string,
+    important: boolean,
+    startOffset: number,
+    endOffset: number,
+    position: number,
+    ruleLinkHash: string,
+    htmlAttributeLinkHash: string,
+    sheet: Sheet
+  ): CssDeclaration {
+    const start = this.at(sheet, startOffset);
+    const end = this.at(sheet, endOffset);
+    const custom = property.startsWith('--');
+    return new CssDeclaration({
+      property, valueText, isImportant: important, isCustomProperty: custom,
+      vendorPrefix: custom ? '' : (/^-[a-z]+-/i.exec(property)?.[0] ?? ''), position,
+      startLine: start.line, startColumn: start.column, endLine: end.line, endColumn: end.column,
+      ruleLinkHash, htmlAttributeLinkHash, stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    });
+  }
+
+  /**
+   * The names a value refers to, scanned from the value's TEXT: `var()` and `url()` anywhere,
+   * plus what the property's grammar says about bare identifiers. Text rather than nodes,
+   * because the grammar breaks on an unquoted path and a reference inside an `ERROR` is a
+   * reference still.
+   */
+  private valueReferences(
+    rawValue: string,
+    valueStart: number,
+    property: string,
+    declarationHash: string,
+    sheet: Sheet,
+    gaps: GapCollector
+  ): CssValueReference[] {
+    const refs: CssValueReference[] = [];
+    const emit = (kind: CssValueReferenceKind, name: string, fallback: string, offset: number, url?: string): void => {
+      const at = this.at(sheet, valueStart + offset);
+      let urlKind: WebUrlKind | '' = '';
+      let resolved = '';
+      if (url !== undefined) {
+        const written = classifyUrl(url);
+        urlKind = written.kind;
+        resolved = resolveUrlToFile(applyBase(written, sheet.baseHref), sheet.filePath, sheet.projectRoot);
+      }
+      refs.push(new CssValueReference({
+        referenceKind: kind, name, fallbackText: fallback, urlKind, resolvedFilePath: resolved, isResolved: resolved !== '',
+        position: refs.length, startLine: at.line, startColumn: at.column, ownerDeclarationLinkHash: declarationHash,
+        ownerRuleLinkHash: '', stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+      }));
+    };
+    // A string literal's inside is not CSS: `content: "var(--x) url(y.png)"` refers to nothing.
+    // The scan runs over the value with every string blanked to spaces, same length.
+    const scannable = blankStrings(rawValue);
+    const functions = /\b(var|url)\(/gi;
+    for (let m = functions.exec(scannable); m !== null; m = functions.exec(scannable)) {
+      const open = m.index + m[0].length - 1;
+      const close = matchingParen(rawValue, open);
+      const inner = rawValue.slice(open + 1, close);
+      if (m[1]!.toLowerCase() === 'var') {
+        const name = /^\s*(--[\w-]+)/.exec(inner)?.[1];
+        if (name !== undefined) {
+          const comma = topLevelComma(inner);
+          emit(CssValueReferenceKind.VARIABLE, name, comma < 0 ? '' : collapse(inner.slice(comma + 1)), m.index);
+        }
+      } else {
+        // `url(a\)b.png)`: an escape in an unquoted URL (or a string) is decoded as in an identifier.
+        const url = unescapeCss(inner.trim().replace(/^(["'])([\s\S]*)\1$/, '$2'));
+        emit(CssValueReferenceKind.URL, url, '', m.index, url);
+        // The grammar rejects an unquoted path's `../` and `/`; the text read it whole.
+        gaps.recover(sheet, valueStart + m.index, valueStart + close + 1);
+      }
+    }
+    const lower = property.toLowerCase();
+    if (lower === 'animation-name' || lower === 'animation') {
+      for (const segment of commaSegments(rawValue)) {
+        const token = tokens(segment.text).find((t) => (IDENTIFIER.test(t.text) && !ANIMATION_KEYWORDS.has(t.text.toLowerCase())) || /^["']/.test(t.text));
+        if (token !== undefined) {
+          emit(CssValueReferenceKind.KEYFRAMES, unquote(token.text), '', segment.offset + token.offset);
+        }
+      }
+    } else if (lower === 'font-family') {
+      for (const segment of commaSegments(rawValue)) {
+        const family = familyName(segment.text);
+        if (family !== undefined && !GENERIC_FONT_FAMILIES.has(family.toLowerCase())) {
+          emit(CssValueReferenceKind.FONT_FAMILY, family, '', segment.offset + (segment.text.length - segment.text.trimStart().length));
+        }
+      }
+    } else if (lower === 'font') {
+      // The shorthand: `[style weight variant stretch] size[/line-height] family, family`. The
+      // families are everything after the size token; a system keyword (`font: menu`) has none.
+      const first = commaSegments(rawValue)[0];
+      const sizeToken = first === undefined ? undefined : tokens(first.text).find((t) => /^(\d|\.\d|[a-z-]+\/|[a-z]*\d)/.test(t.text) && /\d|\//.test(t.text) || /^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|larger|smaller)$/.test(t.text));
+      if (first !== undefined && sizeToken !== undefined) {
+        const familyStart = sizeToken.offset + sizeToken.text.length;
+        const families = rawValue.slice(familyStart);
+        for (const segment of commaSegments(families)) {
+          const family = familyName(segment.text);
+          if (family !== undefined && !GENERIC_FONT_FAMILIES.has(family.toLowerCase())) {
+            emit(CssValueReferenceKind.FONT_FAMILY, family, '', familyStart + segment.offset + (segment.text.length - segment.text.trimStart().length));
+          }
+        }
+      }
+    } else if (lower === 'container-name' || lower === 'container') {
+      for (const token of tokens(rawValue)) {
+        if (token.text === '/') {
+          break;
+        }
+        if (IDENTIFIER.test(token.text) && token.text.toLowerCase() !== 'none') {
+          emit(CssValueReferenceKind.CONTAINER, token.text, '', token.offset);
+        }
+      }
+    }
+    return refs;
+  }
+
+  /** The references an at-rule's PRELUDE makes: `@import`'s target and layer, `@layer`'s names, `@container`'s name. */
+  private preludeReferences(name: string, preludeText: string, preludeStart: number, ruleHash: string, sheet: Sheet, out: CssExtraction, gaps: GapCollector): void {
+    const at = this.at(sheet, preludeStart);
+    let position = 0;
+    const emit = (kind: CssValueReferenceKind, value: string, url?: string): void => {
+      let urlKind: WebUrlKind | '' = '';
+      let resolved = '';
+      if (url !== undefined) {
+        const written = classifyUrl(url);
+        urlKind = written.kind;
+        resolved = resolveUrlToFile(applyBase(written, sheet.baseHref), sheet.filePath, sheet.projectRoot);
+      }
+      out.valueReferences.push(new CssValueReference({
+        referenceKind: kind, name: value, fallbackText: '', urlKind, resolvedFilePath: resolved, isResolved: resolved !== '',
+        position: position++, startLine: at.line, startColumn: at.column, ownerDeclarationLinkHash: '', ownerRuleLinkHash: ruleHash,
+        stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+      }));
+    };
+    if (name === 'import') {
+      const m = /^\s*(?:url\(\s*(?:"([^"]*)"|'([^']*)'|([^)\s]*))\s*\)|"([^"]*)"|'([^']*)')/i.exec(preludeText);
+      const target = m?.[1] ?? m?.[2] ?? m?.[3] ?? m?.[4] ?? m?.[5];
+      if (target !== undefined) {
+        emit(CssValueReferenceKind.IMPORT, target, target);
+      }
+      const layer = /\blayer\(\s*([^)]*?)\s*\)/.exec(preludeText);
+      if (layer !== null && layer[1] !== '') {
+        emit(CssValueReferenceKind.LAYER, layer[1]!);
+        gaps.recover(sheet, preludeStart, preludeStart + preludeText.length + 1);
+      }
+      return;
+    }
+    if (name === 'layer') {
+      for (const part of preludeText.split(',')) {
+        const trimmed = part.trim();
+        if (trimmed !== '') {
+          emit(CssValueReferenceKind.LAYER, trimmed);
+        }
+      }
+      return;
+    }
+    if (name === 'container') {
+      const m = /^\s*([A-Za-z_-][\w-]*)\s*(?:\(|$)/.exec(preludeText);
+      if (m !== null && !CONTAINER_QUERY_KEYWORDS.has(m[1]!.toLowerCase())) {
+        emit(CssValueReferenceKind.CONTAINER, m[1]!);
+        // The grammar has no place for the container's name; the text read it.
+        gaps.recover(sheet, preludeStart, preludeStart + preludeText.length + 1);
+      }
+    }
+  }
+
+  // ── comments and errors ───────────────────────────────────────────────────
+
+  private comment(node: SyntaxNode, sheet: Sheet, out: CssExtraction): void {
+    const start = this.at(sheet, node.startIndex);
+    const end = this.at(sheet, node.endIndex);
+    const text = node.text.replace(/^\/\*/, '').replace(/\*\/$/, '');
+    out.comments.push(new CssComment({
+      text: text.length > WEB_COMMENT_TEXT_LIMIT ? text.slice(0, WEB_COMMENT_TEXT_LIMIT) : text,
+      startLine: start.line, startColumn: start.column, endLine: end.line, endColumn: end.column,
+      stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    }));
+  }
+
+  /** Every `ERROR` region and every token the grammar had to invent, once each. */
+  private recordSyntaxErrors(root: SyntaxNode, sheet: Sheet, gaps: GapCollector): void {
+    for (const node of errorNodes(root)) {
+      // A semicolon alone (`;;`, a `;` after a nested block) is an empty declaration CSS ignores.
+      if (!node.isMissing && sourceOf(sheet, node).trim() === ';') {
+        continue;
+      }
+      gaps.add(
+        sheet,
+        CssParseGapKind.PARSE_ERROR,
+        node.isMissing ? `missing ${node.type}` : `syntax error: ${snippet(node.text)}`,
+        node.startIndex,
+        node.endIndex,
+        ''
+      );
+    }
+  }
+
+  // ── positions ─────────────────────────────────────────────────────────────
+
+  private at(sheet: Sheet, offset: number): Pos {
+    return locate(sheet, offset);
+  }
+}
+
+// ── selectors as the grammar writes them ────────────────────────────────────
+
+/** A node's text from the ORIGINAL source (the grammar read a sanitised copy of the same length). */
+function sourceOf(sheet: Sheet, node: SyntaxNode): string {
+  return sheet.text.slice(node.startIndex, node.endIndex);
+}
+
+/** One complex selector of a selector list: the nodes between two commas, and its text span. */
+interface SelectorGroup {
+  readonly nodes: SyntaxNode[];
+  start: number;
+  end: number;
+}
+
+/**
+ * A `selectors` list split at its commas. A group is usually one node; where the grammar
+ * rejected part of a selector (`.title &`, `col || td`) it is a node and an `ERROR`, and the
+ * group keeps both so the selector's text and its readable parts stay together.
+ */
+function selectorGroups(selectors: SyntaxNode): SelectorGroup[] {
+  const groups: SelectorGroup[] = [];
+  let current: SyntaxNode[] = [];
+  const close = (): void => {
+    if (current.length > 0) {
+      groups.push({ nodes: current, start: current[0]!.startIndex, end: current[current.length - 1]!.endIndex });
+    }
+    current = [];
+  };
+  for (const child of selectors.children) {
+    if (!child.isNamed && child.type === ',') {
+      close();
+    } else if (child.type === 'ERROR' && /^[\s,]*$/.test(child.text)) {
+      // A stray comma (`.card,, .nav`) is a node between two selectors to the grammar. It
+      // stays a gap (a browser drops the whole rule) and belongs to neither selector's text.
+      close();
+    } else if (child.type !== 'comment') {
+      current.push(child);
+    }
+  }
+  close();
+  return groups;
+}
+
+/** A group's compounds: each node flattened, a node after a rejected region joining as a descendant. */
+function flattenGroup(group: SelectorGroup, sheet: Sheet): Compound[] {
+  const compounds: Compound[] = [];
+  for (const node of group.nodes) {
+    const more = node.type === 'ERROR' ? node.namedChildren.flatMap((c) => flatten(c, sheet)) : flatten(node, sheet);
+    if (node.type === 'ERROR') {
+      for (const compound of more) {
+        for (const part of compound.parts) {
+          part.recovered = [node.startIndex, node.endIndex];
+        }
+      }
+    }
+    if (compounds.length > 0 && more.length > 0 && more[0]!.combinator === CssCombinator.NONE) {
+      more[0]!.combinator = CssCombinator.DESCENDANT;
+    }
+    compounds.push(...more);
+  }
+  // A RELATIVE selector (`> .f`, `+ .g` in a nested rule) begins with a combinator the grammar
+  // rejects; the text says which, and the first compound carries it.
+  const leading = /^\s*(>|\+|~)/.exec(sheet.text.slice(group.start, group.end));
+  if (leading !== null && compounds.length > 0 && compounds[0]!.combinator === CssCombinator.NONE) {
+    compounds[0]!.combinator = leading[1] === '>' ? CssCombinator.CHILD : leading[1] === '+' ? CssCombinator.NEXT_SIBLING : CssCombinator.SUBSEQUENT_SIBLING;
+    for (const part of compounds[0]!.parts) {
+      part.recovered = [group.start, group.start + leading[0].length];
+    }
+  }
+  // `& &`: the grammar rejects the first `&` and keeps the second. The text between the
+  // group's start and its first readable node says a nesting part stands there, and the
+  // combinator written after it (none: a descendant) is the next compound's.
+  const firstNode = group.nodes.find((n) => n.type !== 'ERROR');
+  const prefix = firstNode === undefined ? null : /^\s*&\s*([>+~]?)\s*$/.exec(sheet.text.slice(group.start, firstNode.startIndex));
+  if (prefix !== null && firstNode !== undefined && compounds.length > 0) {
+    compounds[0]!.combinator = prefix[1] === '>' ? CssCombinator.CHILD : prefix[1] === '+' ? CssCombinator.NEXT_SIBLING
+      : prefix[1] === '~' ? CssCombinator.SUBSEQUENT_SIBLING : CssCombinator.DESCENDANT;
+    compounds.unshift({ combinator: CssCombinator.NONE, parts: [{
+      kind: CssSelectorPartKind.NESTING, name: '&', value: '', matcher: '', flags: '', args: [],
+      offset: group.start + prefix[0].indexOf('&'), recovered: [group.start, firstNode.startIndex],
+    }] });
+  }
+  return compounds;
+}
+
+/**
+ * A complex selector as compounds: the grammar nests combinators as binary nodes and
+ * chains a compound's parts as nested nodes (`li.item:hover` is `pseudo(class(tag li,
+ * item), hover)`), so both are unwound here, left to right.
+ */
+function flatten(node: SyntaxNode, sheet: Sheet): Compound[] {
+  const combinator = COMBINATOR_TYPES[node.type];
+  if (combinator !== undefined) {
+    const named = node.namedChildren.filter((c) => c.type !== 'comment');
+    const left = named[0];
+    const right = named[named.length - 1];
+    if (left === undefined || right === undefined || left === right) {
+      return left === undefined ? [] : flatten(left, sheet);
+    }
+    const rightCompounds = flatten(right, sheet);
+    if (rightCompounds.length > 0) {
+      rightCompounds[0]!.combinator = combinator;
+    }
+    return [...flatten(left, sheet), ...rightCompounds];
+  }
+  if (node.type === 'ERROR') {
+    return [];
+  }
+  if (node.type === 'namespace_selector') {
+    // `svg|rect.svg-rect`: the grammar hangs the whole compound off the `|`. The local side
+    // is flattened as a compound of its own, and its type (or universal) part takes the
+    // prefix as its value: name `rect`, value `svg|`, so `html_element.tagName` joins the name.
+    const bar = node.children.findIndex((c) => !c.isNamed && c.type === '|');
+    const prefixNode = node.children.slice(0, bar).find((c) => c.isNamed && c.type !== 'comment');
+    const after = node.children.slice(bar + 1);
+    const local = after.find((c) => c.isNamed && c.type !== 'comment' && c.type !== 'ERROR');
+    if (local === undefined) {
+      return [];
+    }
+    // `col || td` is the column combinator, which the grammar reads as a namespace separator
+    // followed by a stray `|`: two compounds, the second joined by COLUMN.
+    const secondBar = after.find((c) => c.type === 'ERROR' && c.endIndex <= local.startIndex && sourceOf(sheet, c).trim() === '|');
+    if (secondBar !== undefined && prefixNode !== undefined) {
+      const left = flatten(prefixNode, sheet);
+      const right = flatten(local, sheet);
+      if (right.length > 0) {
+        right[0]!.combinator = CssCombinator.COLUMN;
+        for (const part of right[0]!.parts) {
+          part.recovered = [node.children[bar]!.startIndex, secondBar.endIndex];
+        }
+      }
+      return [...left, ...right];
+    }
+    const compounds = flatten(local, sheet);
+    const first = compounds[0]?.parts[0];
+    if (first !== undefined && (first.kind === CssSelectorPartKind.TYPE || first.kind === CssSelectorPartKind.UNIVERSAL)) {
+      first.value = `${prefixNode === undefined ? '' : unescapeCss(sourceOf(sheet, prefixNode))}|`;
+      first.offset = node.startIndex;
+    }
+    return compounds;
+  }
+  const own = ownPart(node, sheet);
+  if (own === undefined) {
+    return [];
+  }
+  const compounds = own.base === undefined ? [{ combinator: CssCombinator.NONE, parts: [] }] : flatten(own.base, sheet);
+  if (compounds.length === 0) {
+    compounds.push({ combinator: CssCombinator.NONE, parts: [] });
+  }
+  if (own.part !== undefined) {
+    compounds[compounds.length - 1]!.parts.push(own.part);
+  }
+  return compounds;
+}
+
+/** A compound node's own part and the node it is chained onto (its base), if any. */
+function ownPart(node: SyntaxNode, sheet: Sheet): { base: SyntaxNode | undefined; part: Part | undefined } | undefined {
+  const part = (kind: CssSelectorPartKind, name: string, value = '', matcher = '', flags = '', offset = node.startIndex, args: SyntaxNode[] = []): Part =>
+    ({ kind, name, value, matcher, flags, offset, args });
+  const operatorIndex = (symbols: readonly string[]): number => node.children.findIndex((c) => !c.isNamed && symbols.includes(c.type));
+  const baseBefore = (index: number): SyntaxNode | undefined => node.children.slice(0, index).find((c) => c.isNamed && c.type !== 'comment');
+  const nameOf = (n: SyntaxNode): string => unescapeCss(sourceOf(sheet, n));
+  switch (node.type) {
+    case 'tag_name':
+      return { base: undefined, part: part(CssSelectorPartKind.TYPE, nameOf(node).toLowerCase()) };
+    case 'universal_selector':
+      return { base: undefined, part: part(CssSelectorPartKind.UNIVERSAL, '*') };
+    case 'nesting_selector':
+      return { base: undefined, part: part(CssSelectorPartKind.NESTING, '&') };
+    case 'class_selector': {
+      const op = operatorIndex(['.']);
+      const name = node.children.slice(op + 1).find((c) => c.type === 'class_name');
+      return { base: baseBefore(op), part: name === undefined ? undefined : part(CssSelectorPartKind.CLASS, nameOf(name), '', '', '', name.startIndex - 1) };
+    }
+    case 'id_selector': {
+      const op = operatorIndex(['#']);
+      const name = node.children.slice(op + 1).find((c) => c.type === 'id_name');
+      return { base: baseBefore(op), part: name === undefined ? undefined : part(CssSelectorPartKind.ID, nameOf(name), '', '', '', name.startIndex - 1) };
+    }
+    case 'attribute_selector': {
+      const op = operatorIndex(['[']);
+      const after = node.children.slice(op + 1);
+      const name = after.find((c) => c.type === 'attribute_name');
+      const matcher = after.find((c) => !c.isNamed && /^[~|^$*]?=$/.test(c.type));
+      const valueNode = matcher === undefined ? undefined : after.find((c) => c.isNamed && c.startIndex >= matcher.endIndex && c.type !== 'ERROR');
+      // The `i` / `s` flag is an ERROR to the grammar; it is read back from the text before `]`.
+      const flags = /\s([is])\s*\]$/i.exec(sourceOf(sheet, node))?.[1] ?? '';
+      const row = name === undefined ? undefined : part(CssSelectorPartKind.ATTRIBUTE, nameOf(name), valueNode === undefined ? '' : unescapeCss(unquote(sourceOf(sheet, valueNode))), matcher?.type ?? '', flags, node.children[op]!.startIndex);
+      if (row !== undefined && flags !== '') {
+        row.recovered = [node.startIndex, node.endIndex];
+      }
+      return { base: baseBefore(op), part: row };
+    }
+    case 'pseudo_class_selector': {
+      const op = operatorIndex([':']);
+      const after = node.children.slice(op + 1);
+      const name = after.find((c) => c.type === 'class_name');
+      const args = after.find((c) => c.type === 'arguments');
+      if (name === undefined) {
+        return { base: baseBefore(op), part: undefined };
+      }
+      const lower = nameOf(name).toLowerCase();
+      const kind = LEGACY_PSEUDO_ELEMENTS.has(lower) ? CssSelectorPartKind.PSEUDO_ELEMENT : CssSelectorPartKind.PSEUDO_CLASS;
+      const value = args === undefined ? '' : collapse(sourceOf(sheet, args).slice(1, -1));
+      // `:nth-child(2n of S)`: the grammar does not know `of`, so S is read from its own text,
+      // and the part remembers where S sits so its parts are cited at their real positions.
+      const ofMatch = args !== undefined && lower.startsWith('nth-') ? /\bof\s+(?=\S)/.exec(sourceOf(sheet, args)) : null;
+      const ofSelector = ofMatch === null || args === undefined ? undefined : {
+        text: sourceOf(sheet, args).slice(ofMatch.index + ofMatch[0].length, -1),
+        offset: args.startIndex + ofMatch.index + ofMatch[0].length,
+      };
+      // Only the pseudo-classes that TAKE selectors have selector arguments: `:nth-child(odd)`,
+      // `:lang(en)` and `:dir(rtl)` take keywords, which the grammar reads as type selectors.
+      const argumentNodes = ofSelector !== undefined ? selectorNodesFromText(ofSelector.text)
+        : args === undefined || !SELECTOR_ARGUMENT_PSEUDOS.has(lower) ? [] : selectorArguments(args);
+      const row = part(kind, lower, value, '', '', name.startIndex - 1, argumentNodes);
+      if (ofSelector !== undefined && args !== undefined) {
+        row.recovered = [args.startIndex, args.endIndex];
+        row.argument = ofSelector;
+      }
+      return { base: baseBefore(op), part: row };
+    }
+    case 'pseudo_element_selector': {
+      const op = operatorIndex(['::']);
+      const after = node.children.slice(op + 1);
+      const name = after.find((c) => c.type === 'tag_name');
+      const args = after.find((c) => c.type === 'arguments');
+      const lower = name === undefined ? '' : nameOf(name).toLowerCase();
+      return {
+        base: baseBefore(op),
+        part: name === undefined ? undefined : part(CssSelectorPartKind.PSEUDO_ELEMENT, lower, args === undefined ? '' : collapse(sourceOf(sheet, args).slice(1, -1)), '', '', name.startIndex - 2,
+          args !== undefined && lower === 'slotted' ? selectorArguments(args) : []),
+      };
+    }
+    default:
+      return { base: undefined, part: part(CssSelectorPartKind.RAW, '', collapse(sourceOf(sheet, node))) };
+  }
+}
+
+/** The selector roots inside a functional pseudo-class's parentheses: `:not(.a, .b)` has two. */
+function selectorArguments(args: SyntaxNode): SyntaxNode[] {
+  return args.namedChildren.filter((c) => c.type !== 'comment' && c.type !== 'ERROR' && (c.type in COMBINATOR_TYPES || c.type.endsWith('_selector') || c.type === 'tag_name'));
+}
+
+/** Specificity per Selectors Level 4 over the flattened compounds, plus the two flags the selector row carries. */
+function specificity(compounds: readonly Compound[], sheet: Sheet): { a: number; b: number; c: number; nesting: boolean; pseudoElement: boolean } {
+  let a = 0;
+  let b = 0;
+  let c = 0;
+  let nesting = false;
+  let pseudoElement = false;
+  for (const compound of compounds) {
+    for (const part of compound.parts) {
+      switch (part.kind) {
+        case CssSelectorPartKind.ID: a += 1; break;
+        case CssSelectorPartKind.CLASS:
+        case CssSelectorPartKind.ATTRIBUTE: b += 1; break;
+        case CssSelectorPartKind.TYPE: c += 1; break;
+        case CssSelectorPartKind.PSEUDO_ELEMENT: c += 1; pseudoElement = true; break;
+        case CssSelectorPartKind.NESTING: nesting = true; break;
+        case CssSelectorPartKind.PSEUDO_CLASS: {
+          if (part.name === 'where') break;
+          const inner = argumentSpecificity(part.args, sheet);
+          if (inner.nesting) nesting = true;
+          if (SPECIFICITY_OF_ARGUMENT.has(part.name)) {
+            if (part.name === 'host' || part.name === 'host-context') b += 1;
+            a += inner.a; b += inner.b; c += inner.c;
+          } else if (part.name === 'nth-child' || part.name === 'nth-last-child') {
+            b += 1 + inner.b; a += inner.a; c += inner.c;
+          } else {
+            b += 1;
+          }
+          break;
+        }
+        default: break;
+      }
+    }
+  }
+  return { a, b, c, nesting, pseudoElement };
+}
+
+/** The most specific selector among a functional pseudo-class's arguments. */
+function argumentSpecificity(args: readonly SyntaxNode[], sheet: Sheet): { a: number; b: number; c: number; nesting: boolean } {
+  let best = { a: 0, b: 0, c: 0, nesting: false };
+  for (const argument of args) {
+    const s = specificity(flatten(argument, sheet), sheet);
+    if (s.a > best.a || (s.a === best.a && (s.b > best.b || (s.b === best.b && s.c > best.c)))) {
+      best = { a: s.a, b: s.b, c: s.c, nesting: s.nesting || best.nesting };
+    } else if (s.nesting) {
+      best = { ...best, nesting: true };
+    }
+  }
+  return best;
+}
+
+// ── values as text ──────────────────────────────────────────────────────────
+
+/** The text with every string literal's inside replaced by spaces, same length. */
+function blankStrings(text: string): string {
+  return text.replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, (m) => m[0]! + ' '.repeat(Math.max(0, m.length - 2)) + m[m.length - 1]!);
+}
+
+/** The index of the `)` matching the `(` at `open`, or the text's end. */
+function matchingParen(text: string, open: number): number {
+  let depth = 0;
+  let quote = '';
+  for (let i = open; i < text.length; i += 1) {
+    const ch = text[i]!;
+    if (quote !== '') {
+      if (ch === '\\') i += 1;
+      else if (ch === quote) quote = '';
+      continue;
+    }
+    if (ch === '\\') {
+      i += 1;
+      continue;
+    }
+    if (ch === '"' || ch === '\'') quote = ch;
+    else if (ch === '(') depth += 1;
+    else if (ch === ')') {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return text.length;
+}
+
+/** The index of the first comma outside parentheses and quotes, or -1. */
+function topLevelComma(text: string): number {
+  return topLevelIndex(text, ',');
+}
+
+/** The index of the first `separator` outside strings and parentheses, or -1. */
+function topLevelIndex(text: string, separator: string): number {
+  let depth = 0;
+  let quote = '';
+  for (let i = 0; i < text.length; i += 1) {
+    const ch = text[i]!;
+    if (quote !== '') {
+      if (ch === '\\') i += 1;
+      else if (ch === quote) quote = '';
+      continue;
+    }
+    if (ch === '"' || ch === '\'') quote = ch;
+    else if (ch === '(') depth += 1;
+    else if (ch === ')') depth -= 1;
+    else if (ch === separator && depth === 0) return i;
+  }
+  return -1;
+}
+
+/** A value split at its top-level commas, each segment with its offset in the value. */
+function commaSegments(text: string): Array<{ text: string; offset: number }> {
+  return splitTopLevel(text, ',');
+}
+
+/** `text` split at every top-level `separator`, blank segments dropped, each with its offset in `text`. */
+function splitTopLevel(text: string, separator: string): Array<{ text: string; offset: number }> {
+  const segments: Array<{ text: string; offset: number }> = [];
+  let start = 0;
+  let rest = text;
+  for (;;) {
+    const at = topLevelIndex(rest, separator);
+    if (at < 0) {
+      segments.push({ text: rest, offset: start });
+      break;
+    }
+    segments.push({ text: rest.slice(0, at), offset: start });
+    start += at + 1;
+    rest = rest.slice(at + 1);
+  }
+  return segments.filter((s) => s.text.trim() !== '');
+}
+
+/** The whitespace-separated tokens of a value, quoted strings kept whole, each with its offset. */
+function tokens(text: string): Array<{ text: string; offset: number }> {
+  const out: Array<{ text: string; offset: number }> = [];
+  const pattern = /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|[^\s,]+/g;
+  for (let m = pattern.exec(text); m !== null; m = pattern.exec(text)) {
+    out.push({ text: m[0], offset: m.index });
+  }
+  return out;
+}
+
+/** `"Segoe UI"` or `Segoe UI` (two identifiers) as one family name. */
+function familyName(segment: string): string | undefined {
+  const parts = tokens(segment);
+  const first = parts[0];
+  if (first === undefined) {
+    return undefined;
+  }
+  if (/^["']/.test(first.text)) {
+    return unquote(first.text);
+  }
+  const idents = parts.filter((t) => IDENTIFIER.test(t.text));
+  return idents.length === 0 ? undefined : idents.map((t) => t.text).join(' ');
+}
+
+function unquote(text: string): string {
+  return text.replace(/^(["'])([\s\S]*)\1$/, '$2');
+}
+
+function collapse(text: string): string {
+  return text.replace(/\s+/g, ' ').trim();
+}
+
+function snippet(text: string): string {
+  const t = collapse(text);
+  return t.length > 80 ? `${t.slice(0, 80)}…` : t;
+}
+
+/** The name an at-rule declares, read from its prelude text. */
+function atRuleDeclaredName(name: string, preludeText: string): string {
+  const bare = name.replace(/^-[a-z]+-/, '');
+  if (bare === 'keyframes' || bare === 'property' || bare === 'counter-style' || bare === 'font-feature-values'
+    || bare === 'font-palette-values' || bare === 'position-try' || bare === 'view-transition' || bare === 'scope') {
+    return preludeText.trim();
+  }
+  if (bare === 'container') {
+    const m = /^([A-Za-z_-][\w-]*)\s*(?:\(|$)/.exec(preludeText.trim());
+    return m !== null && !CONTAINER_QUERY_KEYWORDS.has(m[1]!.toLowerCase()) ? m[1]! : '';
+  }
+  if (bare === 'layer') {
+    return preludeText.includes(',') ? '' : preludeText.trim();
+  }
+  return '';
+}
+
+// ── the tree ────────────────────────────────────────────────────────────────
+
+/** What may stand rejected before a nested rule's selector list: a relative combinator, or the first `&` of `& &`. */
+const LEADING_SELECTOR_FRAGMENT = /^\s*(?:[>+~]|&\s*[>+~]?)\s*$/;
+
+/** An ERROR inside a block that is a run of declarations the grammar rejected whole: `color red; a: b`. A brace inside a string is a string's. */
+function isDeclarationRun(text: string): boolean {
+  const outside = blankStrings(text);
+  return /[:;]/.test(outside) && !/[{}]/.test(outside);
+}
+
+/** An ERROR that is a rule header the grammar rejected: selector text, a `{`, and no `}` before it. */
+function isRejectedHeader(text: string): boolean {
+  const brace = text.indexOf('{');
+  if (brace <= 0) {
+    return false;
+  }
+  const header = text.slice(0, brace).trim();
+  return header !== '' && !/[;}]/.test(header) && !text.slice(brace).includes('}');
+}
+
+/** Whether a rule's block ended on an error rather than its own `}`: the text after the error is the block's. */
+function lastBlockUnclosed(rule: SyntaxNode, sheet: Sheet): boolean {
+  const block = rule.namedChildren.find((c) => c.type === 'block');
+  if (block === undefined) {
+    return false;
+  }
+  const closing = block.children[block.children.length - 1];
+  return closing === undefined || closing.type !== '}' || sourceOf(sheet, closing) !== '}';
+}
+
+/**
+ * `liftedChildren`, except that an `ERROR` which is a rejected rule header (its text ends in
+ * `{`) is kept as a node of its own, so the walk can read the rule from the text.
+ */
+function liftedChildrenKeepingHeaders(node: SyntaxNode, sheet: Sheet): SyntaxNode[] {
+  const out: SyntaxNode[] = [];
+  const visit = (n: SyntaxNode): void => {
+    for (const child of n.namedChildren) {
+      if (child.type === 'ERROR') {
+        const text = sourceOf(sheet, child);
+        // A run of declarations the grammar rejected whole is kept too, with whatever
+        // declarations it managed to read inside it: the walk re-reads the run from its text.
+        if (((isRejectedHeader(text) || LEADING_SELECTOR_FRAGMENT.test(text)) && child.namedChildren.every((c) => c.type !== 'rule_set' && c.type !== 'declaration'))
+          || (node.type === 'block' && isDeclarationRun(text) && child.namedChildren.every((c) => c.type !== 'rule_set'))) {
+          out.push(child);
+        } else {
+          visit(child);
+        }
+      } else {
+        out.push(child);
+      }
+    }
+  };
+  visit(node);
+  return out;
+}
+
+/** A block's named children with an `ERROR` node's own named children lifted into the list. */
+function liftedChildren(node: SyntaxNode): SyntaxNode[] {
+  const out: SyntaxNode[] = [];
+  const visit = (n: SyntaxNode): void => {
+    for (const child of n.namedChildren) {
+      if (child.type === 'ERROR') {
+        visit(child);
+      } else {
+        out.push(child);
+      }
+    }
+  };
+  visit(node);
+  return out;
+}
+
+/** Every `ERROR` node and every MISSING token under `root`, an `ERROR`'s inside not reported again. */
+function* errorNodes(root: SyntaxNode): Generator<SyntaxNode> {
+  const stack: SyntaxNode[] = [root];
+  while (stack.length > 0) {
+    const node = stack.pop()!;
+    if (node.type === 'ERROR' || node.isMissing) {
+      yield node;
+      continue;
+    }
+    if (!node.hasError) {
+      continue;
+    }
+    const children = node.children;
+    for (let i = children.length - 1; i >= 0; i -= 1) {
+      stack.push(children[i]!);
+    }
+  }
+}
+
+/** Collects a stylesheet's gaps, deduplicated and capped. */
+class GapCollector {
+  private readonly seen = new Set<string>();
+  private readonly recovered: Array<[number, number]> = [];
+  private overflow = 0;
+
+  constructor(private readonly out: CssParseGap[]) {}
+
+  /**
+   * Marks `[start, end)` of the sheet as read by a text-level recovery, so the grammar's
+   * error inside it is not a gap: an unquoted `url(../x)`, an attribute selector's flag, a
+   * `layer()` in `@import`, a `&` after a compound. Offsets are the base sheet's.
+   */
+  recover(sheet: Sheet, start: number, end: number): void {
+    this.recovered.push([baseOffset(sheet, start), baseOffset(sheet, end)]);
+  }
+
+  /** Records a gap at offsets of `sheet`, which may be a wrapper view; the position is the host file's. */
+  add(sheet: Sheet, kind: CssParseGapKind, detail: string, startOffset: number, endOffset: number, relatedRule: string): void {
+    if (kind === CssParseGapKind.PARSE_ERROR) {
+      const from = baseOffset(sheet, startOffset);
+      const to = baseOffset(sheet, endOffset);
+      if (this.recovered.some(([a, b]) => from >= a && to <= b)) {
+        return;
+      }
+    }
+    const s = locate(sheet, startOffset);
+    const e = locate(sheet, endOffset);
+    const bounded = detail.length > WEB_COMMENT_TEXT_LIMIT ? detail.slice(0, WEB_COMMENT_TEXT_LIMIT) : detail;
+    const key = `${kind}|${s.line}|${s.column}|${bounded}`;
+    if (this.seen.has(key)) {
+      return;
+    }
+    this.seen.add(key);
+    if (this.out.length >= WEB_PARSE_GAP_LIMIT) {
+      this.overflow += 1;
+      return;
+    }
+    this.out.push(new CssParseGap({
+      gapKind: kind, detail: bounded, startLine: s.line, startColumn: s.column, endLine: e.line, endColumn: e.column,
+      relatedRuleLinkHash: relatedRule, stylesheetLinkHash: sheet.stylesheetLinkHash, serviceVersionLinkHash: sheet.version,
+    }));
+  }
+
+  finish(sheet: Sheet): void {
+    if (this.overflow > 0) {
+      this.out.push(new CssParseGap({
+        gapKind: CssParseGapKind.GAP_LIMIT_REACHED, detail: `${this.overflow} further gap(s) not recorded`,
+        startLine: sheet.host.line, startColumn: sheet.host.column, endLine: sheet.host.line,
+        endColumn: sheet.host.column, relatedRuleLinkHash: '', stylesheetLinkHash: sheet.stylesheetLinkHash,
+        serviceVersionLinkHash: sheet.version,
+      }));
+    }
+  }
+}
diff --git a/parser/src/parsers/css/index.ts b/parser/src/parsers/css/index.ts
new file mode 100644
index 000000000..d2f384415
--- /dev/null
+++ b/parser/src/parsers/css/index.ts
@@ -0,0 +1,2 @@
+export { CssParser } from '@/parsers/css/css-parser';
+export type { CssExtraction, CssOrigin, CssDeclarationListOrigin, CssDeclarationListExtraction } from '@/parsers/css/css-parser';
diff --git a/parser/src/parsers/html/html-parser.ts b/parser/src/parsers/html/html-parser.ts
new file mode 100644
index 000000000..a2e529d2b
--- /dev/null
+++ b/parser/src/parsers/html/html-parser.ts
@@ -0,0 +1,1240 @@
+import * as path from 'path';
+
+import { decodeHTML, decodeHTMLAttribute } from 'entities';
+import Parser from 'tree-sitter';
+import Html from 'tree-sitter-html';
+
+import { CssDeclaration } from '@/analysis-types/css/CssDeclaration';
+import { CssStylesheet } from '@/analysis-types/css/CssStylesheet';
+import { CssValueReference } from '@/analysis-types/css/CssValueReference';
+import { HtmlAttribute } from '@/analysis-types/html/HtmlAttribute';
+import { HtmlClassReference } from '@/analysis-types/html/HtmlClassReference';
+import { HtmlDocument } from '@/analysis-types/html/HtmlDocument';
+import { HtmlElement } from '@/analysis-types/html/HtmlElement';
+import { HtmlHandlerCall } from '@/analysis-types/html/HtmlHandlerCall';
+import { HtmlParseGap } from '@/analysis-types/html/HtmlParseGap';
+import { HtmlReference } from '@/analysis-types/html/HtmlReference';
+import { HtmlScript } from '@/analysis-types/html/HtmlScript';
+import { HtmlTemplateExpression } from '@/analysis-types/html/HtmlTemplateExpression';
+import {
+  WEB_MINIFIED_LINE_LENGTH_THRESHOLD,
+  WEB_MINIFIED_NAME_PATTERN,
+  WEB_PARSE_GAP_LIMIT,
+} from '@/constants/web-constants';
+import { CssSourceProvenance, CssStylesheetSource } from '@/enums/css/CssStylesheetSource';
+import { HtmlAttributeKind } from '@/enums/html/HtmlAttributeKind';
+import { HtmlDocumentKind } from '@/enums/html/HtmlDocumentKind';
+import { HtmlHandlerSource } from '@/enums/html/HtmlHandlerSource';
+import { HtmlNamespace } from '@/enums/html/HtmlNamespace';
+import { HtmlParseGapKind } from '@/enums/html/HtmlParseGapKind';
+import { HtmlReferenceKind } from '@/enums/html/HtmlReferenceKind';
+import { HtmlScriptKind, HtmlScriptType } from '@/enums/html/HtmlScriptKind';
+import { HtmlTemplateDialect } from '@/enums/html/HtmlTemplateDialect';
+import { HtmlTemplateExpressionKind } from '@/enums/html/HtmlTemplateExpressionKind';
+import { WebUrlKind } from '@/enums/web/WebUrlKind';
+import { CssExtraction, CssParser } from '@/parsers/css/css-parser';
+import { handlerCallsOf } from '@/utils/web/handler-calls';
+import { LineIndex } from '@/utils/web/line-index';
+import {
+  DirectiveReading, MEMBER_PATH, TemplateFlavour, names, readDirective, readJsExpression, readLoop, templateFlavourOf,
+} from '@/utils/web/template-expressions';
+import { namedChildrenThroughErrors, parseWithTreeSitter } from '@/utils/web/tree-sitter-parse';
+import { applyBase, ClassifiedUrl, classifyUrl, resolveUrlToFile, TEMPLATE_MARKER } from '@/utils/web/url-reference';
+
+type SyntaxNode = Parser.SyntaxNode;
+type Pos = { line: number; column: number };
+
+/** Everything one page produces, its inline CSS included. */
+export interface HtmlExtraction {
+  document: HtmlDocument;
+  elements: HtmlElement[];
+  attributes: HtmlAttribute[];
+  classReferences: HtmlClassReference[];
+  references: HtmlReference[];
+  scripts: HtmlScript[];
+  handlerCalls: HtmlHandlerCall[];
+  templateExpressions: HtmlTemplateExpression[];
+  parseGaps: HtmlParseGap[];
+  /** One per `<style>` element. */
+  stylesheets: CssStylesheet[];
+  /** The rows of every `<style>` element and every `style` attribute, together. */
+  css: CssExtraction;
+}
+
+/** The grammar's three element node types; `script_element` and `style_element` hold raw text. */
+const ELEMENT_TYPES = new Set(['element', 'script_element', 'style_element']);
+
+const VOID_ELEMENTS = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr',
+]);
+
+/** Elements whose content is text with character references and no markup (RCDATA). */
+const RCDATA_ELEMENTS = new Set(['title', 'textarea']);
+
+const URL_ATTRIBUTES = new Set([
+  'src', 'href', 'action', 'formaction', 'poster', 'cite', 'manifest', 'ping', 'background', 'longdesc',
+  'usemap', 'codebase', 'profile', 'archive',
+]);
+
+const ID_REFERENCE_ATTRIBUTES = new Set(['form', 'list', 'headers', 'popovertarget', 'commandfor', 'contextmenu', 'itemref']);
+
+/** An attribute name that is a template dialect's, read as written (the dialects are case-sensitive). */
+const TEMPLATE_DIRECTIVE = /^(th:|v-|x-|hx-|ng-|wire:|phx-|sec:|data-bind$|_$|[:@*[(#])/;
+
+const JAVASCRIPT_MIME = /^(text\/(javascript|ecmascript|jscript|livescript|x-ecmascript|x-javascript|javascript1\.\d)|application\/(javascript|ecmascript|x-ecmascript|x-javascript))$/;
+
+/** Attribute prefixes that are namespace plumbing in foreign content. */
+const FOREIGN_ATTRIBUTE_PREFIXES = new Set(['xlink', 'xml', 'xmlns']);
+
+/**
+ * The SVG attributes whose case the HTML tree builder restores after the tokenizer has
+ * lowercased them ("adjust SVG attributes" in the HTML specification), by lowercase name.
+ */
+const SVG_ADJUSTED_ATTRIBUTES = new Map([
+  'attributeName', 'attributeType', 'baseFrequency', 'baseProfile', 'calcMode', 'clipPathUnits',
+  'diffuseConstant', 'edgeMode', 'filterUnits', 'glyphRef', 'gradientTransform', 'gradientUnits',
+  'kernelMatrix', 'kernelUnitLength', 'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust',
+  'limitingConeAngle', 'markerHeight', 'markerUnits', 'markerWidth', 'maskContentUnits',
+  'maskUnits', 'numOctaves', 'pathLength', 'patternContentUnits', 'patternTransform',
+  'patternUnits', 'pointsAtX', 'pointsAtY', 'pointsAtZ', 'preserveAlpha', 'preserveAspectRatio',
+  'primitiveUnits', 'refX', 'refY', 'repeatCount', 'repeatDur', 'requiredExtensions',
+  'requiredFeatures', 'specularConstant', 'specularExponent', 'spreadMethod', 'startOffset',
+  'stdDeviation', 'stitchTiles', 'surfaceScale', 'systemLanguage', 'tableValues', 'targetX',
+  'targetY', 'textLength', 'viewBox', 'viewTarget', 'xChannelSelector', 'yChannelSelector',
+  'zoomAndPan',
+].map((name) => [name.toLowerCase(), name]));
+
+/**
+ * A server-side template TAG, which may sit anywhere in a page including inside a start tag:
+ * Jinja/Django/Twig `{% %}` and `{{ }}`, ERB/EJS/JSP `<% %>`, Jinja comments `{# #}`, PHP `<? ?>`.
+ */
+const TEMPLATE_TAG = /\{%[\s\S]*?%\}|\{\{[\s\S]*?\}\}|<%[\s\S]*?%>|\{#[\s\S]*?#\}|<\?[\s\S]*?\?>/g;
+
+/** Text-level template markers, each naming the family it belongs to. */
+const TEXT_DIALECTS: ReadonlyArray<readonly [HtmlTemplateDialect, RegExp]> = [
+  [HtmlTemplateDialect.HANDLEBARS, /\{\{[#/>^]/],
+  [HtmlTemplateDialect.MUSTACHE, /\{\{(?![#/>^!])/],
+  [HtmlTemplateDialect.JINJA, /\{%/],
+  [HtmlTemplateDialect.ERB, /<%[=\-#@]?[\s\S]*?%>/],
+  [HtmlTemplateDialect.PHP, /<\?php\b|<\?=/],
+  [HtmlTemplateDialect.RAZOR, /(^|[\s>])@(model|using|inherits|page|section|if|foreach|for|while|switch|Html\.|Url\.|Model\b|\{)/m],
+  [HtmlTemplateDialect.DOLLAR_BRACE, /\$\{[^}]*\}/],
+];
+
+/**
+ * The HTML front end: tree-sitter-html's tree, read into rows.
+ *
+ * ## What the grammar decides and what this file decides
+ *
+ * tree-sitter-html tokenises and builds the tree, with an external scanner that knows the
+ * HTML rules a tokenizer alone cannot: raw text inside `<script>` and `<style>`, void
+ * elements without an end tag, and the implicit end tags (`<p>` closed by the next `<p>`,
+ * `<li>` by the next `<li>`). It does NOT run the browser's tree-construction stage: no
+ * `html`, `head` or `body` is implied, and a stray end tag is an error rather than a
+ * recovery. So the rows are the elements WRITTEN, and what a browser would add is left to
+ * the consumer, which the document's `documentKind` makes decidable.
+ *
+ * The grammar is also narrower than HTML in four places this file reads around, each
+ * measured on real corpora: it matches end tags case-sensitively (`<p>…</P>` is an error
+ * to it), so tag names are lowercased in the copy it is handed and every name is read
+ * from the original; it reads RCDATA (`<title>`, `<textarea>`) as markup, so those are
+ * read as text; a bare `>` or `&` in text is an error to it, so an error region holding
+ * no `<` is text; and a server-side template tag inside a start tag (`<div {% if x %}
+ * class="a"{% endif %}>`) breaks its attribute list, so a start tag holding one is
+ * re-read from its text with the template tags set aside as directives.
+ *
+ * ## What a template is to this parser
+ *
+ * An `.html` file is often Jinja, Thymeleaf, Vue or Handlebars around HTML. The markup is
+ * read as HTML and the file is labelled with the dialects its markers show. Each
+ * directive's value and each `{{ }}` interpolation is an `html_template_expression` row;
+ * for the JavaScript-shaped dialects (Vue, Alpine, Angular) the names it calls and reads
+ * are extracted, and an event directive's handler is an `html_handler_call` exactly as an
+ * `onclick` is. Nothing is rendered or rewritten.
+ */
+export class HtmlParser {
+  private readonly parser: Parser;
+
+  constructor(private readonly css: CssParser = new CssParser()) {
+    this.parser = new Parser();
+    this.parser.setLanguage(Html);
+  }
+
+  parse(content: string, filePath: string, baseMservPath: string, serviceVersionLinkHash: string): HtmlExtraction {
+    const lines = new LineIndex(content);
+    const root = parseWithTreeSitter(this.parser, sanitiseForGrammar(content)).rootNode;
+    const top = namedChildrenThroughErrors(root);
+    const src = (n: SyntaxNode): string => content.slice(n.startIndex, n.endIndex);
+    const doctypeNode = top.find((n) => n.type === 'doctype');
+    const htmlNode = top.find((n) => n.type === 'element' && tagNameOf(n, content)?.toLowerCase() === 'html');
+
+    const fileName = path.basename(filePath);
+    const relativePath = path.relative(baseMservPath, filePath).split(path.sep).join('/');
+    const dialects = new Set<HtmlTemplateDialect>();
+    for (const [dialect, pattern] of TEXT_DIALECTS) {
+      if (pattern.test(content)) {
+        dialects.add(dialect);
+      }
+    }
+    const flavour = templateFlavourOf(content);
+    const langAttribute = htmlNode === undefined ? undefined
+      : readAttributes(htmlNode, content, flavour).find((a) => a.name.toLowerCase() === 'lang');
+    const document = new HtmlDocument({
+      name: fileName.replace(/\.[^.]+$/, ''),
+      fileName,
+      filePath,
+      baseMservPath,
+      relativePath,
+      documentKind: htmlNode !== undefined || doctypeNode !== undefined ? HtmlDocumentKind.DOCUMENT : HtmlDocumentKind.FRAGMENT,
+      doctype: doctypeNode === undefined ? '' : doctypeText(src(doctypeNode)),
+      lang: langAttribute?.value ?? '',
+      title: '',
+      templateDialects: dialects,
+      sourceProvenance: WEB_MINIFIED_NAME_PATTERN.test(fileName) || lines.longestLine > WEB_MINIFIED_LINE_LENGTH_THRESHOLD
+        ? CssSourceProvenance.MINIFIED : CssSourceProvenance.PROJECT,
+      startLine: 1,
+      endLine: Math.max(1, lines.lineCount),
+      serviceVersionLinkHash,
+    });
+
+    const walk = new Walk(this.css, content, lines, document, filePath, baseMservPath, serviceVersionLinkHash, dialects, flavour);
+    const roots = new Map<string, number>();
+    top.filter((n) => ELEMENT_TYPES.has(n.type)).forEach((child, index) => walk.element(child, '', '', 0, roots, index, HtmlNamespace.HTML));
+    walk.recordSyntaxErrors(root);
+    walk.finish();
+    return walk.result();
+  }
+}
+
+/**
+ * The text the GRAMMAR is handed, same length as the source so every offset is the source's.
+ * HTML tag names are case-insensitive and the grammar's end-tag matching is not, so
+ * `<P>…</P>` and `<p>…</P>` would both be errors to it; every tag name is lowercased for
+ * the grammar only, and names are read from the original text at the node's offsets.
+ */
+function sanitiseForGrammar(text: string): string {
+  return text.replace(/<\/?([A-Za-z][^\s/>]*)/g, (m) => m.toLowerCase());
+}
+
+/** One attribute as written: its name, its decoded value, and where it sits. */
+interface ReadAttribute {
+  readonly name: string;
+  readonly value: string;
+  readonly hasValue: boolean;
+  /** 0-based offset of the attribute's name, and of the end of the attribute. */
+  readonly start: number;
+  readonly end: number;
+  /** 0-based offset of the value's first character, or undefined for a value-less attribute. */
+  readonly valueStart: number | undefined;
+  /** A template TAG that sat in the start tag (`{% if x %}`), not an attribute at all. */
+  readonly templateTag: boolean;
+}
+
+/** The state of one page's walk. */
+class Walk {
+  private readonly out: HtmlExtraction;
+  private readonly attributeDialects = new Set<HtmlTemplateDialect>();
+  private title: string | undefined;
+  private baseHref: ClassifiedUrl | undefined;
+  private readonly xml: boolean;
+  private scriptCount = 0;
+  private inlineScriptCount = 0;
+  private stylesheetReferenceCount = 0;
+  private readonly gapKeys = new Set<string>();
+  private readonly recovered: Array<[number, number]> = [];
+  private gapOverflow = 0;
+
+  constructor(
+    private readonly css: CssParser,
+    private readonly content: string,
+    private readonly lines: LineIndex,
+    document: HtmlDocument,
+    private readonly filePath: string,
+    private readonly projectRoot: string,
+    private readonly version: string,
+    private readonly dialects: Set<HtmlTemplateDialect>,
+    private readonly flavour: TemplateFlavour
+  ) {
+    // An XML document (`.xhtml`) keeps every name as written; an HTML document's tokenizer
+    // lowercases tag and attribute names, foreign content included.
+    this.xml = /\.xht(?:ml)?$/i.test(filePath);
+    this.out = {
+      document, elements: [], attributes: [], classReferences: [], references: [], scripts: [], handlerCalls: [],
+      templateExpressions: [], parseGaps: [], stylesheets: [],
+      css: { rules: [], selectors: [], selectorParts: [], declarations: [], valueReferences: [], comments: [], parseGaps: [] },
+    };
+  }
+
+  result(): HtmlExtraction {
+    return this.out;
+  }
+
+  finish(): void {
+    for (const d of this.attributeDialects) {
+      this.dialects.add(d);
+    }
+    if (this.gapOverflow > 0) {
+      this.out.parseGaps.push(new HtmlParseGap({
+        gapKind: HtmlParseGapKind.GAP_LIMIT_REACHED, detail: `${this.gapOverflow} further gap(s) not recorded`,
+        startLine: 1, startColumn: 1, endLine: 1, endColumn: 1, relatedElementLinkHash: '',
+        documentLinkHash: this.out.document.getHash(), serviceVersionLinkHash: this.version,
+      }));
+    }
+    this.out.document.setCounts({
+      elementCount: this.out.elements.length,
+      scriptCount: this.scriptCount,
+      inlineScriptCount: this.inlineScriptCount,
+      stylesheetReferenceCount: this.stylesheetReferenceCount,
+      inlineStyleCount: this.out.stylesheets.length,
+      parseGapCount: this.out.parseGaps.length,
+    });
+    if (this.title !== undefined) {
+      this.out.document.setTitle(this.title);
+    }
+  }
+
+  private src(node: SyntaxNode): string {
+    return this.content.slice(node.startIndex, node.endIndex);
+  }
+
+  // ── elements ──────────────────────────────────────────────────────────────
+
+  /**
+   * Walks `node` and everything under it, pre-order, with an explicit stack: a generated
+   * page or one with thousands of unclosed tags nests as deep as it is long, and the only
+   * recursion limit here would have been this walker's.
+   */
+  element(
+    node: SyntaxNode,
+    parentHash: string,
+    parentPath: string,
+    depth: number,
+    siblingCounts: Map<string, number>,
+    position: number,
+    namespace: HtmlNamespace
+  ): void {
+    const stack: Array<{
+      node: SyntaxNode; parentHash: string; parentPath: string; depth: number;
+      siblingCounts: Map<string, number>; position: number; namespace: HtmlNamespace;
+    }> = [{ node, parentHash, parentPath, depth, siblingCounts, position, namespace }];
+    while (stack.length > 0) {
+      const frame = stack.pop()!;
+      const result = this.oneElement(frame.node, frame.parentHash, frame.parentPath, frame.depth, frame.siblingCounts, frame.position, frame.namespace);
+      if (result === undefined) {
+        continue;
+      }
+      const counts = new Map<string, number>();
+      for (let i = result.children.length - 1; i >= 0; i -= 1) {
+        stack.push({
+          node: result.children[i]!, parentHash: result.row.getHash(), parentPath: result.row.path, depth: frame.depth + 1,
+          siblingCounts: counts, position: i, namespace: result.childNamespace,
+        });
+      }
+    }
+  }
+
+  /** One element's rows; returns the row and the element children still to walk, or nothing for a tagless node. */
+  private oneElement(
+    node: SyntaxNode,
+    parentHash: string,
+    parentPath: string,
+    depth: number,
+    siblingCounts: Map<string, number>,
+    position: number,
+    namespace: HtmlNamespace
+  ): { row: HtmlElement; children: SyntaxNode[]; childNamespace: HtmlNamespace } | undefined {
+    const tagNode = openingTagOf(node);
+    const rawTag = tagNode === undefined ? undefined : tagNameOf(node, this.content);
+    if (tagNode === undefined || rawTag === undefined) {
+      return undefined;
+    }
+    // The browser lowercases HTML tag names and keeps foreign ones as written (`foreignObject`).
+    const tag = namespace === HtmlNamespace.HTML ? rawTag.toLowerCase() : rawTag;
+    const ownNamespace = namespace === HtmlNamespace.HTML && tag === 'svg' ? HtmlNamespace.SVG
+      : namespace === HtmlNamespace.HTML && tag === 'math' ? HtmlNamespace.MATHML : namespace;
+    const lower = tag.toLowerCase();
+    const childNamespace = (ownNamespace === HtmlNamespace.SVG && lower === 'foreignobject')
+      || (ownNamespace === HtmlNamespace.MATHML && lower === 'annotation-xml') ? HtmlNamespace.HTML : ownNamespace;
+    const isVoid = ownNamespace === HtmlNamespace.HTML && VOID_ELEMENTS.has(tag);
+    const isRcdata = ownNamespace === HtmlNamespace.HTML && RCDATA_ELEMENTS.has(tag);
+
+    const ordinal = (siblingCounts.get(tag) ?? 0) + 1;
+    siblingCounts.set(tag, ordinal);
+    const pathHere = `${parentPath}/${tag}[${ordinal}]`;
+    // A void element has no contents: what the grammar's implicit close left under it belongs
+    // to its parent, so a void child's children are lifted beside it and a void element keeps
+    // none. An RCDATA element's contents are text, whatever the grammar made of them.
+    const tagEnd = startTagEnd(this.content, tagNode);
+    const children = isVoid || isRcdata ? [] : contentChildren(node, childNamespace, this.content).filter((c) => c.startIndex >= tagEnd);
+    const elementChildren = children.filter((c) => ELEMENT_TYPES.has(c.type));
+    const start = this.lines.positionOf(node.startIndex);
+    const end = this.lines.positionOf(isVoid ? tagNode.endIndex : node.endIndex);
+    const attributes = readAttributes(node, this.content, this.flavour);
+    const own = (name: string): ReadAttribute | undefined => attributes.find((a) => !a.templateTag && splitAttributeName(a.name, ownNamespace, this.xml).name === name);
+    const textContent = isRcdata ? this.rcdataText(node, tagNode) : node.type === 'element' ? this.directText(children) : '';
+    const row = new HtmlElement({
+      tagName: tag,
+      namespace: ownNamespace,
+      path: pathHere,
+      depth,
+      id: own('id')?.value.trim() ?? '',
+      classNames: classTokens(own('class')?.value ?? ''),
+      textContent,
+      isVoid,
+      childElementCount: elementChildren.length,
+      attributeCount: attributes.filter((a) => !a.templateTag).length,
+      position,
+      startLine: start.line,
+      startColumn: start.column,
+      endLine: end.line,
+      endColumn: end.column,
+      parentElementLinkHash: parentHash,
+      documentLinkHash: this.out.document.getHash(),
+      serviceVersionLinkHash: this.version,
+    });
+    this.out.elements.push(row);
+    if (tag === 'title' && this.title === undefined && ownNamespace === HtmlNamespace.HTML) {
+      this.title = textContent;
+    }
+    if (isRcdata) {
+      // The grammar built elements out of RCDATA; their regions are text, not errors.
+      this.recovered.push([tagNode.endIndex, node.endIndex]);
+    }
+
+    const attributeRows = this.attributes(node, row, attributes, ownNamespace, tagNode);
+    this.textExpressions(children, row);
+    // A <script> or <style> inside inline <svg> is run and applied by the browser as the
+    // page's, so both namespaces are read; MathML has neither.
+    if (node.type === 'script_element' && ownNamespace !== HtmlNamespace.MATHML) {
+      this.script(node, row, attributes, attributeRows, tagNode);
+    } else if (node.type === 'style_element' && ownNamespace !== HtmlNamespace.MATHML) {
+      this.style(node, row, attributes, tagNode);
+    }
+    return { row, children: elementChildren, childNamespace };
+  }
+
+  /** The text and entity children of an element, decoded, whitespace-normalised; an error region without markup is text too. */
+  private directText(children: readonly SyntaxNode[]): string {
+    return children
+      .filter((c) => c.type === 'text' || c.type === 'entity' || (c.type === 'ERROR' && isTextError(this.src(c))))
+      .map((c) => decodeHTML(this.src(c)))
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+  }
+
+  /** `<title>` and `<textarea>` hold text with character references and no markup, whatever the grammar built. */
+  private rcdataText(node: SyntaxNode, tagNode: SyntaxNode): string {
+    const endTag = node.namedChildren.find((c) => c.type === 'end_tag');
+    const inner = this.content.slice(tagNode.endIndex, endTag?.startIndex ?? node.endIndex);
+    return decodeHTML(inner).replace(/\s+/g, ' ').trim();
+  }
+
+  // ── attributes ────────────────────────────────────────────────────────────
+
+  private attributes(node: SyntaxNode, element: HtmlElement, attributes: readonly ReadAttribute[], namespace: HtmlNamespace, tagNode: SyntaxNode): Map<string, HtmlAttribute> {
+    const rows = new Map<string, HtmlAttribute>();
+    const tag = element.tagName;
+    const typeAttr = attributes.find((a) => !a.templateTag && a.name.toLowerCase() === 'type')?.value.trim().toLowerCase() ?? '';
+    const relAttr = attributes.find((a) => !a.templateTag && a.name.toLowerCase() === 'rel')?.value.toLowerCase() ?? '';
+    if (attributes.some((a) => a.templateTag) || tagNode.hasError) {
+      // The start tag was re-read from its text (a template tag or a grammar error sat in it);
+      // what the grammar reported inside it is covered by that reading.
+      this.recovered.push([tagNode.startIndex, tagNode.endIndex]);
+    }
+    let expressionPosition = 0;
+    for (const attr of attributes) {
+      const at = this.lines.positionOf(attr.start);
+      if (attr.templateTag) {
+        // `{% if x %}` inside a start tag: a directive of the template's, not an attribute.
+        const key = `template:${attr.start}`;
+        const row = new HtmlAttribute({
+          name: attr.name, prefix: '', value: '', attributeKind: HtmlAttributeKind.TEMPLATE_DIRECTIVE, hasValue: false,
+          startLine: at.line, startColumn: at.column, ownerElementLinkHash: element.getHash(),
+          documentLinkHash: this.out.document.getHash(), serviceVersionLinkHash: this.version,
+        });
+        this.out.attributes.push(row);
+        rows.set(key, row);
+        this.templateExpression(row, element, textDialect(attr.name, this.flavour), HtmlTemplateExpressionKind.DIRECTIVE, attr.name, '', [], attr.name, expressionPosition++, at, false);
+        continue;
+      }
+      const { prefix, name } = splitAttributeName(attr.name, namespace, this.xml);
+      const key = prefix === '' ? name : `${prefix}:${name}`;
+      // The first attribute with a name wins and a repeat is a parse error, as in a browser.
+      if (rows.has(key)) {
+        this.gap(HtmlParseGapKind.PARSE_ERROR, 'duplicate-attribute', at, this.lines.positionOf(attr.end), element.getHash());
+        continue;
+      }
+      const directive = readDirective(attr.name, this.flavour);
+      const kind = this.attributeKind(name, prefix, tag, directive !== undefined);
+      this.noteDialect(name, prefix, directive);
+      const row = new HtmlAttribute({
+        name, prefix, value: attr.value, attributeKind: kind, hasValue: attr.hasValue,
+        startLine: at.line, startColumn: at.column, ownerElementLinkHash: element.getHash(),
+        documentLinkHash: this.out.document.getHash(), serviceVersionLinkHash: this.version,
+      });
+      this.out.attributes.push(row);
+      rows.set(key, row);
+      const valueAt = attr.valueStart === undefined ? at : this.lines.positionOf(attr.valueStart);
+      if (directive === undefined && attr.hasValue) {
+        this.valueExpressions(attr, row, element, expressionPosition);
+        expressionPosition += [...attr.value.matchAll(TEMPLATE_TAG)].length;
+      }
+      switch (kind) {
+        case HtmlAttributeKind.CLASS:
+          classTokens(attr.value).forEach((className, index) => {
+            this.out.classReferences.push(new HtmlClassReference({
+              className, position: index, startLine: at.line, ownerElementLinkHash: element.getHash(),
+              attributeLinkHash: row.getHash(), documentLinkHash: this.out.document.getHash(),
+              serviceVersionLinkHash: this.version,
+            }));
+          });
+          break;
+        case HtmlAttributeKind.STYLE:
+          this.styleAttribute(attr.value, row, element, valueAt);
+          break;
+        case HtmlAttributeKind.EVENT_HANDLER:
+          this.handler(attr.value, HtmlHandlerSource.EVENT_ATTRIBUTE, name.slice(2), row, element, attr.valueStart, valueAt);
+          break;
+        case HtmlAttributeKind.URL: {
+          const referenceKind = this.referenceKind(tag, name, prefix, typeAttr, relAttr, node);
+          // `ping` holds a set of URLs separated by whitespace; every other URL attribute holds one.
+          const urls = name === 'ping' ? attr.value.split(/[ \t\n\f\r]+/).filter((u) => u !== '') : [attr.value];
+          urls.forEach((url, index) => this.reference(url, index, referenceKind, row, element, valueAt));
+          if (classifyUrl(attr.value).kind === WebUrlKind.JAVASCRIPT_URI) {
+            const script = attr.value.trim().slice('javascript:'.length);
+            const offset = attr.valueStart === undefined ? undefined : attr.valueStart + attr.value.indexOf(script);
+            this.handler(script, HtmlHandlerSource.JAVASCRIPT_URL, '', row, element, offset, valueAt);
+          }
+          break;
+        }
+        case HtmlAttributeKind.SRCSET: {
+          const referenceKind = this.referenceKind(tag, name, prefix, typeAttr, relAttr, node);
+          srcsetCandidates(attr.value).forEach((url, index) => this.reference(url, index, referenceKind, row, element, valueAt));
+          break;
+        }
+        case HtmlAttributeKind.TEMPLATE_DIRECTIVE:
+          if (directive !== undefined) {
+            this.directiveExpression(directive, attr, row, element, expressionPosition++, valueAt);
+          }
+          break;
+        default:
+          break;
+      }
+      if (tag === 'meta' && name === 'content' && prefix === '') {
+        const httpEquiv = attributes.find((a) => !a.templateTag && a.name.toLowerCase() === 'http-equiv')?.value.trim().toLowerCase();
+        const m = httpEquiv === 'refresh' ? /url\s*=\s*['"]?([^'"\s;]+)/i.exec(attr.value) : null;
+        if (m !== null) {
+          this.reference(m[1]!, 0, HtmlReferenceKind.META_REFRESH, row, element, valueAt);
+        }
+      }
+    }
+    return rows;
+  }
+
+  private attributeKind(name: string, prefix: string, tag: string, isDirective: boolean): HtmlAttributeKind {
+    if (prefix === 'xmlns' || prefix === 'xml' || name === 'xmlns' || name.startsWith('xmlns:') || name.startsWith('xml:')) {
+      return HtmlAttributeKind.NAMESPACE;
+    }
+    if (prefix === 'xlink' && name === 'href') {
+      return HtmlAttributeKind.URL;
+    }
+    if (prefix !== '') {
+      return HtmlAttributeKind.OTHER;
+    }
+    if (isDirective || TEMPLATE_DIRECTIVE.test(name)) {
+      return HtmlAttributeKind.TEMPLATE_DIRECTIVE;
+    }
+    if (/^on[a-z]/.test(name)) {
+      return HtmlAttributeKind.EVENT_HANDLER;
+    }
+    if (name.startsWith('data-')) {
+      return HtmlAttributeKind.DATA;
+    }
+    if (name.startsWith('aria-') || name === 'role') {
+      return HtmlAttributeKind.ARIA;
+    }
+    switch (name) {
+      case 'id': return HtmlAttributeKind.ID;
+      case 'class': return HtmlAttributeKind.CLASS;
+      case 'style': return HtmlAttributeKind.STYLE;
+      case 'for': return HtmlAttributeKind.FOR;
+      case 'name': return HtmlAttributeKind.NAME;
+      case 'type': return HtmlAttributeKind.TYPE;
+      case 'rel': return HtmlAttributeKind.REL;
+      case 'srcset':
+      case 'imagesrcset':
+        return HtmlAttributeKind.SRCSET;
+      case 'data':
+        return tag === 'object' ? HtmlAttributeKind.URL : HtmlAttributeKind.OTHER;
+      default:
+        break;
+    }
+    if (URL_ATTRIBUTES.has(name)) {
+      return HtmlAttributeKind.URL;
+    }
+    if (ID_REFERENCE_ATTRIBUTES.has(name)) {
+      return HtmlAttributeKind.ID_REFERENCE;
+    }
+    return HtmlAttributeKind.OTHER;
+  }
+
+  private noteDialect(name: string, prefix: string, directive: DirectiveReading | undefined): void {
+    if (directive !== undefined) {
+      this.attributeDialects.add(directive.dialect);
+      return;
+    }
+    const full = prefix === '' ? name : `${prefix}:${name}`;
+    if (full.startsWith('th:')) this.attributeDialects.add(HtmlTemplateDialect.THYMELEAF);
+    if (/^(\*ng|ng-|\[|\()/.test(full)) this.attributeDialects.add(HtmlTemplateDialect.ANGULAR);
+    if (full.startsWith('hx-')) this.attributeDialects.add(HtmlTemplateDialect.HTMX);
+    if (full.startsWith('v-') || full.startsWith(':')) this.attributeDialects.add(HtmlTemplateDialect.VUE);
+  }
+
+  // ── template expressions ──────────────────────────────────────────────────
+
+  /** A directive attribute's value as an expression row, and, for an event, as handler calls. */
+  private directiveExpression(directive: DirectiveReading, attr: ReadAttribute, row: HtmlAttribute, element: HtmlElement, position: number, at: Pos): void {
+    const text = attr.value;
+    let declares: string[] = [];
+    let source = text;
+    if (directive.kind === HtmlTemplateExpressionKind.LOOP) {
+      const loop = readLoop(directive.dialect, text);
+      declares = loop.declares;
+      source = loop.source;
+    } else if (directive.kind === HtmlTemplateExpressionKind.SLOT) {
+      declares = names(text);
+      source = '';
+    }
+    const expression = this.templateExpression(row, element, directive.dialect, directive.kind, attr.name, directive.argument, directive.modifiers, text, position, at, directive.javascript && source !== '', source, declares);
+    if (directive.kind === HtmlTemplateExpressionKind.EVENT_HANDLER && directive.javascript && text.trim() !== '') {
+      this.templateHandler(text, directive.argument, row, element, attr.valueStart, at);
+    }
+    if (directive.kind === HtmlTemplateExpressionKind.REQUEST && text.trim() !== '') {
+      this.reference(text, 0, HtmlReferenceKind.REQUEST, row, element, at);
+    }
+    void expression;
+  }
+
+  /** The template tags inside a plain attribute's value: `href="{{ url_for('home') }}"`, `class="btn {{ cls }}"`. */
+  private valueExpressions(attr: ReadAttribute, row: HtmlAttribute, element: HtmlElement, firstPosition: number): void {
+    let position = firstPosition;
+    for (const m of attr.value.matchAll(TEMPLATE_TAG)) {
+      const tag = m[0];
+      const at = attr.valueStart === undefined ? this.lines.positionOf(attr.start) : this.lines.positionOf(attr.valueStart + m.index);
+      const dialect = textDialect(tag, this.flavour);
+      const interpolation = tag.startsWith('{{') ? !/^\{\{[#/>^!]/.test(tag) : /^<%[=-]/.test(tag) || tag.startsWith('<?=');
+      const inner = tag.startsWith('{{') ? tag.slice(2, -2) : tag.startsWith('<%') ? tag.slice(2, -2).replace(/^[=\-#@]/, '') : tag.slice(2, -2);
+      const javascript = interpolation && (dialect === HtmlTemplateDialect.VUE || dialect === HtmlTemplateDialect.ANGULAR);
+      this.templateExpression(row, element, dialect, interpolation ? HtmlTemplateExpressionKind.INTERPOLATION : HtmlTemplateExpressionKind.DIRECTIVE, row.name, row.name, [], inner.trim(), position++, at, javascript);
+    }
+  }
+
+  /** The `{{ }}` interpolations and `{% %}` / `<% %>` tags in an element's own text. */
+  private textExpressions(children: readonly SyntaxNode[], element: HtmlElement): void {
+    let position = 0;
+    for (const child of children) {
+      if (child.type !== 'text' && child.type !== 'ERROR') {
+        continue;
+      }
+      const text = this.src(child);
+      if (!TEMPLATE_MARKER.test(text)) {
+        continue;
+      }
+      // An error region made of a template tag (`<%= name %>`, `<?php … ?>`) is the template's, not a gap.
+      if (child.type === 'ERROR') {
+        this.recovered.push([child.startIndex, child.endIndex]);
+      }
+      for (const m of text.matchAll(TEMPLATE_TAG)) {
+        const tag = m[0];
+        const at = this.lines.positionOf(child.startIndex + m.index);
+        const dialect = textDialect(tag, this.flavour);
+        const interpolation = tag.startsWith('{{') ? !/^\{\{[#/>^!]/.test(tag) : /^<%[=-]/.test(tag) || tag.startsWith('<?=');
+        const inner = tag.startsWith('{{') ? tag.slice(2, -2) : tag.startsWith('<%') ? tag.slice(2, -2).replace(/^[=\-#@]/, '') : tag.slice(2, -2);
+        const javascript = interpolation && (dialect === HtmlTemplateDialect.VUE || dialect === HtmlTemplateDialect.ANGULAR);
+        this.templateExpression(undefined, element, dialect, interpolation ? HtmlTemplateExpressionKind.INTERPOLATION : HtmlTemplateExpressionKind.DIRECTIVE, '', '', [], inner.trim(), position++, at, javascript);
+      }
+    }
+  }
+
+  private templateExpression(
+    attribute: HtmlAttribute | undefined,
+    element: HtmlElement,
+    dialect: HtmlTemplateDialect,
+    kind: HtmlTemplateExpressionKind,
+    directive: string,
+    argument: string,
+    modifiers: readonly string[],
+    text: string,
+    position: number,
+    at: Pos,
+    javascript: boolean,
+    source = text,
+    declares: string[] = []
+  ): HtmlTemplateExpression {
+    let callees = new Set<string>();
+    let identifiers = new Set<string>();
+    if (javascript && source.trim() !== '') {
+      const shape = kind === HtmlTemplateExpressionKind.EVENT_HANDLER ? 'statements' : 'expression';
+      // Angular and Vue 2 pipes (`name | uppercase`) are the one common non-JavaScript shape;
+      // the expression before the first pipe is JavaScript and is what is read.
+      const read = readJsExpression(shape === 'expression' ? source.split(/\s\|\s/)[0]! : source, shape);
+      callees = read.callees;
+      identifiers = read.identifiers;
+    }
+    for (const d of declares) {
+      identifiers.delete(d);
+    }
+    const row = new HtmlTemplateExpression({
+      dialect, expressionKind: kind, directive, argument, modifiers, expressionText: text, calleeNames: callees,
+      identifiers, declares, position, startLine: at.line, startColumn: at.column,
+      ownerElementLinkHash: element.getHash(), attributeLinkHash: attribute?.getHash() ?? '',
+      documentLinkHash: this.out.document.getHash(), serviceVersionLinkHash: this.version,
+    });
+    this.out.templateExpressions.push(row);
+    return row;
+  }
+
+  /**
+   * A template event directive's handler as calls. A bare name or member path is the
+   * handler the framework CALLS (`@click="save"` runs `save`), so it is one call with no
+   * arguments; anything else is the statement the framework runs, read as a handler is.
+   */
+  private templateHandler(text: string, eventName: string, attribute: HtmlAttribute, element: HtmlElement, offset: number | undefined, fallbackAt: Pos): void {
+    if (MEMBER_PATH.test(text)) {
+      const callee = text.trim();
+      const dot = callee.lastIndexOf('.');
+      this.out.handlerCalls.push(new HtmlHandlerCall({
+        handlerSource: HtmlHandlerSource.TEMPLATE_EVENT, eventName, calleeName: dot < 0 ? callee : callee.slice(dot + 1).trim(),
+        receiverText: dot < 0 ? '' : callee.slice(0, dot).trim(), calleeText: callee, argumentCount: 0, isNew: false, position: 0,
+        startLine: fallbackAt.line, startColumn: fallbackAt.column, ownerElementLinkHash: element.getHash(),
+        attributeLinkHash: attribute.getHash(), documentLinkHash: this.out.document.getHash(), serviceVersionLinkHash: this.version,
+      }));
+      return;
+    }
+    this.handler(text, HtmlHandlerSource.TEMPLATE_EVENT, eventName, attribute, element, offset, fallbackAt);
+  }
+
+  // ── references ────────────────────────────────────────────────────────────
+
+  private referenceKind(tag: string, attr: string, prefix: string, type: string, rel: string, node: SyntaxNode): HtmlReferenceKind {
+    if (prefix === 'xlink') {
+      return HtmlReferenceKind.OTHER;
+    }
+    switch (tag) {
+      case 'script': return attr === 'src' ? HtmlReferenceKind.SCRIPT : HtmlReferenceKind.OTHER;
+      case 'link':
+        if (attr !== 'href' && attr !== 'imagesrcset') return HtmlReferenceKind.OTHER;
+        return rel.split(/\s+/).includes('stylesheet') ? HtmlReferenceKind.STYLESHEET : HtmlReferenceKind.LINK_RESOURCE;
+      case 'a':
+      case 'area':
+        return attr === 'href' ? HtmlReferenceKind.ANCHOR : HtmlReferenceKind.OTHER;
+      case 'img':
+        return attr === 'src' || attr === 'srcset' ? HtmlReferenceKind.IMAGE : HtmlReferenceKind.OTHER;
+      case 'input':
+        if (attr === 'formaction') return HtmlReferenceKind.FORM_ACTION;
+        return attr === 'src' && type === 'image' ? HtmlReferenceKind.IMAGE : HtmlReferenceKind.OTHER;
+      case 'button':
+        return attr === 'formaction' ? HtmlReferenceKind.FORM_ACTION : HtmlReferenceKind.OTHER;
+      case 'source': {
+        const parent = node.parent;
+        const inPicture = parent !== null && ELEMENT_TYPES.has(parent.type) && tagNameOf(parent, this.content)?.toLowerCase() === 'picture';
+        if (attr !== 'src' && attr !== 'srcset') return HtmlReferenceKind.OTHER;
+        return inPicture ? HtmlReferenceKind.IMAGE : HtmlReferenceKind.MEDIA;
+      }
+      case 'video':
+      case 'audio':
+      case 'track':
+        return attr === 'src' || attr === 'poster' ? HtmlReferenceKind.MEDIA : HtmlReferenceKind.OTHER;
+      case 'iframe':
+      case 'frame':
+      case 'embed':
+        return attr === 'src' ? HtmlReferenceKind.FRAME : HtmlReferenceKind.OTHER;
+      case 'object':
+        return attr === 'data' ? HtmlReferenceKind.FRAME : HtmlReferenceKind.OTHER;
+      case 'form':
+        return attr === 'action' ? HtmlReferenceKind.FORM_ACTION : HtmlReferenceKind.OTHER;
+      case 'base':
+        return attr === 'href' ? HtmlReferenceKind.BASE : HtmlReferenceKind.OTHER;
+      default:
+        return HtmlReferenceKind.OTHER;
+    }
+  }
+
+  private reference(url: string, position: number, kind: HtmlReferenceKind, attribute: HtmlAttribute, element: HtmlElement, at: Pos): void {
+    const classified = classifyUrl(url);
+    if (kind === HtmlReferenceKind.BASE && this.baseHref === undefined && (classified.kind === WebUrlKind.RELATIVE || classified.kind === WebUrlKind.ROOT_RELATIVE)) {
+      this.baseHref = classified;
+    }
+    // A `<base href>` is what every later relative URL resolves against, as in a browser.
+    const effective = kind === HtmlReferenceKind.BASE ? classified : applyBase(classified, this.baseHref);
+    const resolved = resolveUrlToFile(effective, this.filePath, this.projectRoot);
+    if (kind === HtmlReferenceKind.STYLESHEET) {
+      this.stylesheetReferenceCount += 1;
+    }
+    this.out.references.push(new HtmlReference({
+      referenceKind: kind, urlAsWritten: url.trim(), urlKind: classified.kind, path: classified.path,
+      query: classified.query, fragment: classified.fragment, resolvedFilePath: resolved, isResolved: resolved !== '',
+      position, attributeName: attribute.prefix === '' ? attribute.name : `${attribute.prefix}:${attribute.name}`,
+      startLine: at.line, startColumn: at.column, ownerElementLinkHash: element.getHash(),
+      attributeLinkHash: attribute.getHash(), documentLinkHash: this.out.document.getHash(),
+      serviceVersionLinkHash: this.version,
+    }));
+  }
+
+  // ── handlers ──────────────────────────────────────────────────────────────
+
+  private handler(text: string, source: HtmlHandlerSource, eventName: string, attribute: HtmlAttribute, element: HtmlElement, offset: number | undefined, fallbackAt: Pos): void {
+    if (text.trim() === '') {
+      return;
+    }
+    if (TEMPLATE_MARKER.test(text)) {
+      // `onclick="{{ handler }}"` is a FunctionBody only once rendered. `{{ x }}` even parses
+      // as JavaScript (two nested blocks), so a gap is recorded on the marker, not on a
+      // syntax error, and no call is read: the calls in there are the template's.
+      this.gap(HtmlParseGapKind.HANDLER_SYNTAX, `${attribute.name}: template expression in handler`, fallbackAt, fallbackAt, element.getHash());
+      return;
+    }
+    const parsed = handlerCallsOf(text);
+    parsed.calls.forEach((call, index) => {
+      const at = offset === undefined ? fallbackAt : this.lines.positionOf(offset + call.offset);
+      this.out.handlerCalls.push(new HtmlHandlerCall({
+        handlerSource: source, eventName, calleeName: call.calleeName, receiverText: call.receiverText,
+        calleeText: call.calleeText, argumentCount: call.argumentCount, isNew: call.isNew, position: index,
+        startLine: at.line, startColumn: at.column, ownerElementLinkHash: element.getHash(),
+        attributeLinkHash: attribute.getHash(), documentLinkHash: this.out.document.getHash(),
+        serviceVersionLinkHash: this.version,
+      }));
+    });
+    if (parsed.error !== undefined) {
+      const at = offset === undefined ? fallbackAt : this.lines.positionOf(offset + parsed.error.offset);
+      this.gap(HtmlParseGapKind.HANDLER_SYNTAX, `${attribute.name}: ${parsed.error.message}`, at, at, element.getHash());
+    }
+  }
+
+  // ── scripts ───────────────────────────────────────────────────────────────
+
+  private script(node: SyntaxNode, element: HtmlElement, attributes: readonly ReadAttribute[], rows: Map<string, HtmlAttribute>, tagNode: SyntaxNode): void {
+    this.scriptCount += 1;
+    const attr = (name: string): ReadAttribute | undefined => attributes.find((a) => !a.templateTag && a.name.toLowerCase() === name);
+    const src = attr('src')?.value;
+    const typeAsWritten = attr('type')?.value.trim() ?? '';
+    const external = src !== undefined && src.trim() !== '';
+    const body = this.bodyRange(node, tagNode);
+    if (!external) {
+      this.inlineScriptCount += 1;
+    }
+    const srcAttribute = rows.get('src');
+    const reference = srcAttribute === undefined ? undefined
+      : this.out.references.find((r) => r.attributeLinkHash === srcAttribute.getHash() && r.position === 0);
+    this.out.scripts.push(new HtmlScript({
+      scriptKind: external ? HtmlScriptKind.EXTERNAL : HtmlScriptKind.INLINE,
+      scriptType: scriptType(typeAsWritten),
+      typeAsWritten,
+      src: src?.trim() ?? '',
+      resolvedFilePath: reference?.resolvedFilePath ?? '',
+      isAsync: attr('async') !== undefined,
+      isDefer: attr('defer') !== undefined,
+      isNoModule: attr('nomodule') !== undefined,
+      bodyStartLine: external ? 0 : body.start.line,
+      bodyStartColumn: external ? 0 : body.start.column,
+      bodyEndLine: external ? 0 : body.end.line,
+      bodyEndColumn: external ? 0 : body.end.column,
+      bodyLength: external ? 0 : body.length,
+      ownerElementLinkHash: element.getHash(),
+      referenceLinkHash: reference?.getHash() ?? '',
+      documentLinkHash: this.out.document.getHash(),
+      serviceVersionLinkHash: this.version,
+    }));
+  }
+
+  /** The raw text between an element's start tag and its end tag: the `raw_text` node, or the empty span after the start tag. */
+  private bodyRange(node: SyntaxNode, tagNode: SyntaxNode): { start: Pos; end: Pos; text: string; length: number } {
+    const raw = node.namedChildren.find((c) => c.type === 'raw_text');
+    const startOffset = raw?.startIndex ?? tagNode.endIndex;
+    const endOffset = raw?.endIndex ?? tagNode.endIndex;
+    const text = this.content.slice(startOffset, endOffset);
+    return { start: this.lines.positionOf(startOffset), end: this.lines.positionOf(endOffset), text, length: text.length };
+  }
+
+  // ── styles ────────────────────────────────────────────────────────────────
+
+  private style(node: SyntaxNode, element: HtmlElement, attributes: readonly ReadAttribute[], tagNode: SyntaxNode): void {
+    const type = attributes.find((a) => !a.templateTag && a.name.toLowerCase() === 'type')?.value.trim().toLowerCase() ?? '';
+    if (type !== '' && type !== 'text/css') {
+      return;
+    }
+    const body = this.bodyRange(node, tagNode);
+    const sheet = new CssStylesheet({
+      name: `${this.out.document.name}#style${this.out.stylesheets.length + 1}`,
+      fileName: this.out.document.fileName,
+      filePath: this.filePath,
+      baseMservPath: this.out.document.baseMservPath,
+      relativePath: this.out.document.relativePath,
+      sourceKind: CssStylesheetSource.HTML_STYLE_ELEMENT,
+      sourceProvenance: this.out.document.sourceProvenance,
+      ownerHtmlElementLinkHash: element.getHash(),
+      htmlDocumentLinkHash: this.out.document.getHash(),
+      startLine: body.start.line,
+      startColumn: body.start.column,
+      endLine: body.end.line,
+      serviceVersionLinkHash: this.version,
+    });
+    this.out.stylesheets.push(sheet);
+    const extracted = this.css.parseStylesheet(body.text, {
+      stylesheet: sheet, line: body.start.line, column: body.start.column, filePath: this.filePath,
+      projectRoot: this.projectRoot, serviceVersionLinkHash: this.version, baseHref: this.baseHref,
+    });
+    // Loops, not `push(...rows)`: a spread passes every row as an argument and overflows
+    // the stack on a <style> of tens of thousands of rules.
+    for (const r of extracted.rules) this.out.css.rules.push(r);
+    for (const r of extracted.selectors) this.out.css.selectors.push(r);
+    for (const r of extracted.selectorParts) this.out.css.selectorParts.push(r);
+    for (const r of extracted.declarations) this.out.css.declarations.push(r);
+    for (const r of extracted.valueReferences) this.out.css.valueReferences.push(r);
+    for (const r of extracted.comments) this.out.css.comments.push(r);
+    for (const r of extracted.parseGaps) this.out.css.parseGaps.push(r);
+  }
+
+  private styleAttribute(value: string, attribute: HtmlAttribute, element: HtmlElement, at: Pos): void {
+    if (value.trim() === '') {
+      return;
+    }
+    if (TEMPLATE_MARKER.test(value)) {
+      // `style="width: {{ w }}px"` is a declaration list only once rendered.
+      this.gap(HtmlParseGapKind.STYLE_ATTRIBUTE_SYNTAX, 'template expression in style attribute', at, at, element.getHash());
+      return;
+    }
+    const extracted = this.css.parseDeclarationList(value, {
+      htmlAttributeLinkHash: attribute.getHash(), line: at.line, column: at.column, filePath: this.filePath,
+      projectRoot: this.projectRoot, serviceVersionLinkHash: this.version, baseHref: this.baseHref,
+    });
+    for (const d of extracted.declarations as CssDeclaration[]) this.out.css.declarations.push(d);
+    for (const v of extracted.valueReferences as CssValueReference[]) this.out.css.valueReferences.push(v);
+    for (const error of extracted.errors) {
+      const where = { line: error.line, column: error.column };
+      this.gap(HtmlParseGapKind.STYLE_ATTRIBUTE_SYNTAX, error.message, where, where, element.getHash());
+    }
+  }
+
+  // ── gaps ──────────────────────────────────────────────────────────────────
+
+  /**
+   * Every place the grammar could not read as HTML: an `ERROR` region, a token it had to
+   * invent (`MISSING`), and an end tag with no open element. Not reported: an error region
+   * that is text (a bare `>` or `&`), a construct HTML defines as a comment (`<?xml …?>`,
+   * `<![CDATA[…]]>`), and a region a text-level reading has covered.
+   */
+  recordSyntaxErrors(root: SyntaxNode): void {
+    const stack: SyntaxNode[] = [root];
+    while (stack.length > 0) {
+      const node = stack.pop()!;
+      if (node.type === 'ERROR' || node.isMissing || node.type === 'erroneous_end_tag') {
+        if (this.recovered.some(([a, b]) => node.startIndex >= a && node.endIndex <= b)) {
+          continue;
+        }
+        const text = this.src(node);
+        if (node.type === 'ERROR' && (isTextError(text) || /^<\?[\s\S]*\?>$/.test(text) || /^<!\[CDATA\[/.test(text) || TEMPLATE_MARKER.test(text))) {
+          continue;
+        }
+        const detail = node.isMissing ? `missing-token: ${node.type}`
+          : node.type === 'erroneous_end_tag' ? `erroneous-end-tag: ${snippet(text)}` : `syntax-error: ${snippet(text)}`;
+        this.gap(HtmlParseGapKind.PARSE_ERROR, detail, this.lines.positionOf(node.startIndex), this.lines.positionOf(node.endIndex), '');
+        continue;
+      }
+      if (!node.hasError) {
+        continue;
+      }
+      const children = node.children;
+      for (let i = children.length - 1; i >= 0; i -= 1) {
+        stack.push(children[i]!);
+      }
+    }
+  }
+
+  private gap(kind: HtmlParseGapKind, detail: string, start: Pos, end: Pos, related: string): void {
+    const key = `${kind}|${start.line}|${start.column}|${detail}`;
+    if (this.gapKeys.has(key)) {
+      return;
+    }
+    this.gapKeys.add(key);
+    if (this.out.parseGaps.length >= WEB_PARSE_GAP_LIMIT) {
+      this.gapOverflow += 1;
+      return;
+    }
+    this.out.parseGaps.push(new HtmlParseGap({
+      gapKind: kind, detail, startLine: start.line, startColumn: start.column, endLine: end.line,
+      endColumn: end.column, relatedElementLinkHash: related, documentLinkHash: this.out.document.getHash(),
+      serviceVersionLinkHash: this.version,
+    }));
+  }
+}
+
+// ── helpers ─────────────────────────────────────────────────────────────────
+
+/** An error region that holds no `<`: a bare `>`, `&` or `=` in text, which HTML reads as characters. */
+function isTextError(text: string): boolean {
+  return !text.includes('<');
+}
+
+/** The dialect a text-level template tag belongs to, decided by its delimiters and the page's company. */
+function textDialect(tag: string, flavour: TemplateFlavour): HtmlTemplateDialect {
+  if (tag.startsWith('<?')) return HtmlTemplateDialect.PHP;
+  if (tag.startsWith('<%')) return HtmlTemplateDialect.ERB;
+  if (tag.startsWith('{%') || tag.startsWith('{#')) return HtmlTemplateDialect.JINJA;
+  if (/^\{\{[#/>^]/.test(tag) || flavour.handlebars) return HtmlTemplateDialect.HANDLEBARS;
+  if (flavour.jinja) return HtmlTemplateDialect.JINJA;
+  if (flavour.angular && !flavour.vue) return HtmlTemplateDialect.ANGULAR;
+  if (flavour.vue) return HtmlTemplateDialect.VUE;
+  return HtmlTemplateDialect.MUSTACHE;
+}
+
+/**
+ * The content children of an element: its named children except the tags, with a VOID
+ * child's own children lifted up beside it, since a void element cannot hold them.
+ */
+function contentChildren(node: SyntaxNode, namespace: HtmlNamespace, content: string): SyntaxNode[] {
+  const out: SyntaxNode[] = [];
+  const visit = (parent: SyntaxNode): void => {
+    for (const child of parent.namedChildren) {
+      if (child.type.endsWith('_tag')) {
+        continue;
+      }
+      if (child.type === 'ERROR') {
+        // An error region: its elements are the parent's, and its text is text.
+        out.push(child);
+        for (const inner of child.namedChildren) {
+          if (ELEMENT_TYPES.has(inner.type) || inner.type === 'text' || inner.type === 'entity') {
+            out.push(inner);
+          }
+        }
+        continue;
+      }
+      out.push(child);
+      if (namespace === HtmlNamespace.HTML && ELEMENT_TYPES.has(child.type)) {
+        const tag = tagNameOf(child, content)?.toLowerCase();
+        if (tag !== undefined && VOID_ELEMENTS.has(tag)) {
+          visit(child);
+        }
+      }
+    }
+  };
+  visit(node);
+  return out;
+}
+
+/** An element's `start_tag` or `self_closing_tag` node. */
+function openingTagOf(node: SyntaxNode): SyntaxNode | undefined {
+  return node.namedChildren.find((c) => c.type === 'start_tag' || c.type === 'self_closing_tag');
+}
+
+function tagNameOf(node: SyntaxNode, content: string): string | undefined {
+  const name = openingTagOf(node)?.namedChildren.find((c) => c.type === 'tag_name');
+  return name === undefined ? undefined : content.slice(name.startIndex, name.endIndex);
+}
+
+/**
+ * An element's attributes. From the grammar's nodes when the start tag parsed cleanly and
+ * holds no template tag; from the start tag's TEXT otherwise, because a template tag
+ * (`{% if x %}class="a"{% endif %}`) or an unquoted value the grammar rejects (`href=a?b=1`)
+ * breaks the grammar's attribute list, and the text still says what was written.
+ */
+function readAttributes(node: SyntaxNode, content: string, flavour: TemplateFlavour): ReadAttribute[] {
+  void flavour;
+  const tagNode = openingTagOf(node);
+  if (tagNode === undefined) {
+    return [];
+  }
+  const tagEnd = startTagEnd(content, tagNode);
+  const tagText = content.slice(tagNode.startIndex, tagEnd);
+  if (tagNode.hasError || TEMPLATE_TAG.test(tagText)) {
+    TEMPLATE_TAG.lastIndex = 0;
+    return rawAttributes(tagText, tagNode.startIndex);
+  }
+  TEMPLATE_TAG.lastIndex = 0;
+  return tagNode.namedChildren.filter((c) => c.type === 'attribute').map((attr) => {
+    const nameNode = attr.namedChildren.find((c) => c.type === 'attribute_name');
+    const hasValue = attr.children.some((c) => !c.isNamed && c.type === '=');
+    const quoted = attr.namedChildren.find((c) => c.type === 'quoted_attribute_value');
+    const inner = quoted?.namedChildren.find((c) => c.type === 'attribute_value')
+      ?? attr.namedChildren.find((c) => c.type === 'attribute_value');
+    const valueStart = !hasValue ? undefined : inner?.startIndex ?? (quoted === undefined ? undefined : quoted.startIndex + 1);
+    return {
+      name: nameNode === undefined ? '' : content.slice(nameNode.startIndex, nameNode.endIndex),
+      value: decodeHTMLAttribute(inner === undefined ? '' : content.slice(inner.startIndex, inner.endIndex)),
+      hasValue,
+      start: attr.startIndex,
+      end: attr.endIndex,
+      valueStart,
+      templateTag: false,
+    };
+  }).filter((a) => a.name !== '');
+}
+
+/**
+ * Where a start tag really ends: the grammar's node, or, when the grammar gave up inside it
+ * (a template tag broke its attribute list), the first `>` outside quotes and template tags.
+ */
+export function startTagEnd(content: string, tagNode: SyntaxNode): number {
+  if (!tagNode.hasError) {
+    return tagNode.endIndex;
+  }
+  let i = tagNode.startIndex + 1;
+  let quote = '';
+  while (i < content.length) {
+    const ch = content[i]!;
+    if (quote !== '') {
+      if (ch === quote) quote = '';
+      i += 1;
+      continue;
+    }
+    TEMPLATE_TAG.lastIndex = i;
+    const m = TEMPLATE_TAG.exec(content);
+    if (m !== null && m.index === i) {
+      i += m[0].length;
+      continue;
+    }
+    if (ch === '"' || ch === '\'') {
+      quote = ch;
+    } else if (ch === '>') {
+      TEMPLATE_TAG.lastIndex = 0;
+      return i + 1;
+    } else if (ch === '<' && i > tagNode.startIndex + 1 && /[A-Za-z/!]/.test(content[i + 1] ?? '')) {
+      // The next tag began: this one never closed.
+      TEMPLATE_TAG.lastIndex = 0;
+      return Math.max(tagNode.endIndex, i);
+    }
+    i += 1;
+  }
+  TEMPLATE_TAG.lastIndex = 0;
+  return tagNode.endIndex;
+}
+
+/**
+ * A start tag's attributes read from its text: template tags set aside (each becomes a
+ * TEMPLATE_DIRECTIVE pseudo-attribute), then `name`, `name=value`, `name="value"` and
+ * `name='value'` in what remains, with values taken from the ORIGINAL text so a template
+ * tag inside a quoted value survives whole.
+ */
+function rawAttributes(tagText: string, tagStart: number): ReadAttribute[] {
+  const open = /^<[^\s/>]+/.exec(tagText);
+  const from = open === null ? 1 : open[0].length;
+  const closing = tagText.endsWith('/>') ? 2 : tagText.endsWith('>') ? 1 : 0;
+  const body = tagText.slice(from, tagText.length - closing);
+  const out: ReadAttribute[] = [];
+  let masked = body;
+  const tags: Array<{ start: number; end: number; text: string }> = [];
+  for (const m of body.matchAll(TEMPLATE_TAG)) {
+    tags.push({ start: m.index, end: m.index + m[0].length, text: m[0] });
+    masked = masked.slice(0, m.index) + ' '.repeat(m[0].length) + masked.slice(m.index + m[0].length);
+  }
+  const attribute = /([^\s"'=<>/]+)(\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>"'][^\s>]*)))?/g;
+  for (const m of masked.matchAll(attribute)) {
+    const name = m[1]!;
+    const hasValue = m[2] !== undefined;
+    let valueStart: number | undefined;
+    let rawValue = '';
+    if (hasValue) {
+      const eq = m[0].indexOf('=');
+      const afterEq = m[0].slice(eq + 1);
+      const quote = afterEq.trimStart()[0];
+      const valueOffsetInMatch = eq + 1 + (afterEq.length - afterEq.trimStart().length) + (quote === '"' || quote === '\'' ? 1 : 0);
+      const length = m[3]?.length ?? m[4]?.length ?? m[5]?.length ?? 0;
+      valueStart = tagStart + from + m.index + valueOffsetInMatch;
+      rawValue = body.slice(m.index + valueOffsetInMatch, m.index + valueOffsetInMatch + length);
+    }
+    out.push({ name, value: decodeHTMLAttribute(rawValue), hasValue, start: tagStart + from + m.index, end: tagStart + from + m.index + m[0].length, valueStart, templateTag: false });
+  }
+  // A template tag standing between attributes is a directive of the template's; one inside
+  // an attribute's value is that attribute's expression and is read with the attribute.
+  for (const tag of tags) {
+    const inside = out.some((a) => a.valueStart !== undefined && tagStart + from + tag.start >= a.valueStart && tagStart + from + tag.end <= a.end);
+    if (!inside) {
+      out.push({ name: tag.text.replace(/\s+/g, ' ').trim(), value: '', hasValue: false, start: tagStart + from + tag.start, end: tagStart + from + tag.end, valueStart: undefined, templateTag: true });
+    }
+  }
+  return out.sort((a, b) => a.start - b.start);
+}
+
+/**
+ * `xlink:href` on an SVG element is a prefixed attribute; `xmlns:th` on an HTML element
+ * is one attribute whose name has a colon in it. The split follows the browser's: only in
+ * foreign content, and only for the three namespace prefixes it knows. A template
+ * dialect's attribute keeps its case (`*ngIf`); every other name is lowercased, as the HTML
+ * tokenizer does in foreign content too (`<rect ID="x">` has the id `x`), with the SVG
+ * attributes the tree builder re-cases (`viewBox`) restored. In an XML document (`xml`)
+ * names are case-sensitive and kept as written.
+ */
+function splitAttributeName(raw: string, namespace: HtmlNamespace, xml: boolean): { prefix: string; name: string } {
+  if (namespace !== HtmlNamespace.HTML) {
+    const name = xml || TEMPLATE_DIRECTIVE.test(raw) ? raw : raw.toLowerCase();
+    const colon = name.indexOf(':');
+    if (colon > 0 && FOREIGN_ATTRIBUTE_PREFIXES.has(name.slice(0, colon))) {
+      return { prefix: name.slice(0, colon), name: name.slice(colon + 1) };
+    }
+    return { prefix: '', name: xml ? name : SVG_ADJUSTED_ATTRIBUTES.get(name) ?? name };
+  }
+  return { prefix: '', name: TEMPLATE_DIRECTIVE.test(raw) ? raw : raw.toLowerCase() };
+}
+
+/** The class tokens of a value, with any template tag in it set aside: `btn {{ cls }}` is one class and a template's. */
+function classTokens(value: string): string[] {
+  return value.replace(TEMPLATE_TAG, ' ').split(/[ \t\n\f\r]+/).filter((t) => t !== '');
+}
+
+/** `<!DOCTYPE html PUBLIC "…" "…">` as `html PUBLIC "…" "…"`, whitespace-normalised. */
+function doctypeText(raw: string): string {
+  const m = /^<!\s*doctype\s*([\s\S]*?)\s*>$/i.exec(raw.trim());
+  return (m?.[1] ?? '').replace(/\s+/g, ' ').trim();
+}
+
+function snippet(text: string): string {
+  const t = text.replace(/\s+/g, ' ').trim();
+  return t.length > 80 ? `${t.slice(0, 80)}…` : t;
+}
+
+/**
+ * The URLs of a `srcset`, per the HTML specification's parsing algorithm: a URL runs to the
+ * next whitespace, so a comma inside it (`a.png?x=1,2 100w`) does not split; a URL ending in
+ * commas ends its candidate there, otherwise the descriptors run to the next comma outside
+ * parentheses.
+ */
+function srcsetCandidates(value: string): string[] {
+  const urls: string[] = [];
+  const space = /[ \t\n\f\r]/;
+  let i = 0;
+  while (i < value.length) {
+    while (i < value.length && (space.test(value[i]!) || value[i] === ',')) i += 1;
+    if (i >= value.length) break;
+    const start = i;
+    while (i < value.length && !space.test(value[i]!)) i += 1;
+    let url = value.slice(start, i);
+    const endedByComma = url.endsWith(',');
+    url = url.replace(/,+$/, '');
+    if (url !== '') urls.push(url);
+    if (!endedByComma) {
+      let depth = 0;
+      while (i < value.length) {
+        const ch = value[i]!;
+        i += 1;
+        if (ch === '(') depth += 1;
+        else if (ch === ')') depth -= 1;
+        else if (ch === ',' && depth <= 0) break;
+      }
+    }
+  }
+  return urls;
+}
+
+function scriptType(type: string): HtmlScriptType {
+  // A MIME type's parameters (`;charset=utf-8`) do not change what it is.
+  const t = type.toLowerCase().split(';')[0]!.trim();
+  if (t === '' || JAVASCRIPT_MIME.test(t)) return HtmlScriptType.CLASSIC;
+  if (t === 'module') return HtmlScriptType.MODULE;
+  if (t === 'importmap') return HtmlScriptType.IMPORTMAP;
+  if (t === 'speculationrules') return HtmlScriptType.SPECULATION_RULES;
+  if (/json$/.test(t)) return HtmlScriptType.JSON;
+  if (/template|text\/html|handlebars|mustache|x-tmpl|jsrender|jquery-tmpl|x-dot/.test(t)) return HtmlScriptType.TEMPLATE;
+  if (/babel|jsx|typescript|coffeescript|tsx|x-ts/.test(t)) return HtmlScriptType.TRANSPILED;
+  return HtmlScriptType.DATA_BLOCK;
+}
diff --git a/parser/src/parsers/html/index.ts b/parser/src/parsers/html/index.ts
new file mode 100644
index 000000000..5f565ffd0
--- /dev/null
+++ b/parser/src/parsers/html/index.ts
@@ -0,0 +1,2 @@
+export { HtmlParser } from '@/parsers/html/html-parser';
+export type { HtmlExtraction } from '@/parsers/html/html-parser';
diff --git a/parser/src/parsers/index.ts b/parser/src/parsers/index.ts
index 12af27e81..e1beed1a1 100644
--- a/parser/src/parsers/index.ts
+++ b/parser/src/parsers/index.ts
@@ -10,3 +10,5 @@ export {
   PythonParser,
   PythonScopeExtractor,
 } from '@/parsers/python';
+export { HtmlParser } from '@/parsers/html';
+export { CssParser } from '@/parsers/css';
diff --git a/parser/src/schema/web/decls_base_web.dl b/parser/src/schema/web/decls_base_web.dl
new file mode 100644
index 000000000..dd2b552c0
--- /dev/null
+++ b/parser/src/schema/web/decls_base_web.dl
@@ -0,0 +1,114 @@
+// ============================================================================
+// Base input relations — HTML and CSS parser IR (the web front end).
+//
+// GENERATED FROM schema.json BY gen_decls.py — DO NOT HAND-EDIT.
+// Re-run `python3 gen_decls.py --check` in CI; drift here is a silent schema break.
+//
+// CLIENT-ONLY, like Java's XML and YAML tables: no lib_ pair is declared, because a
+// dependency's pages and stylesheets are not the project's. An engine that reads these
+// copies the .decl lines it needs into its decls_base.dl and maps the CSV in client-ir.map:
+//
+//     html_<entity>   all-html-<entities>.csv       css_<entity>   all-css-<entities>.csv
+//
+// COLUMN ORDER IS THE CONTRACT. All columns are `symbol`. New columns append ONLY.
+// The last column of every relation is the row's own unique hash.
+//
+// JOINS AN ENGINE AUTHOR WILL WANT:
+//   html_reference.resolvedFilePath (SCRIPT)     = <script front end>'s module file path
+//   html_reference.resolvedFilePath (STYLESHEET) = css_stylesheet.filePath
+//   html_class_reference.className              = css_selector_part.name where partKind = CLASS
+//   html_element.id                             = css_selector_part.name where partKind = ID
+//   html_element.tagName                        = css_selector_part.name where partKind = TYPE
+//   html_handler_call.calleeName                = a global function of a classic script the page loads
+//   css_value_reference.name (VARIABLE)         = css_declaration.property where isCustomProperty
+//   css_value_reference.name (KEYFRAMES)        = css_rule.name where atRuleName = keyframes
+// ============================================================================
+
+// One HTML file; the root of every HTML key. c5 documentKind says whether the file writes
+// <html>/a doctype or is a fragment the algorithm wrapped; c9 templateDialects is a comma
+// set of the template families whose markers the text shows.
+// (21 columns)
+.decl html_document(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol,c17:symbol,c18:symbol,c19:symbol,c20:symbol)
+
+// One element, keyed on its XPath-like c2 path. c4 id and c5 classNames are repeated from the
+// attributes because they are what CSS and script references join on. c7 isImplied marks
+// an element the HTML algorithm inserted (html, head, body, tbody).
+// (19 columns)
+.decl html_element(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol,c17:symbol,c18:symbol)
+
+// One attribute; (element, prefix, name) is unique by the algorithm. c3 attributeKind is what
+// the attribute does: ID, CLASS, STYLE, EVENT_HANDLER, URL, TEMPLATE_DIRECTIVE, ...
+// (11 columns)
+.decl html_attribute(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol)
+
+// One token of a class attribute: the row css_selector_part (CLASS) joins on.
+// (8 columns)
+.decl html_class_reference(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol)
+
+// One URL a page names. c0 referenceKind says what it points at (SCRIPT, STYLESHEET, ANCHOR,
+// IMAGE, FORM_ACTION, ...); c2 urlKind what kind of URL it is; c6 resolvedFilePath the file
+// on disk when a RELATIVE or ROOT_RELATIVE URL names one, else empty, with c7 isResolved.
+// (17 columns)
+.decl html_reference(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol)
+
+// One <script>, 1:1 with its element. EXTERNAL rows carry the src and its resolution;
+// INLINE rows carry the body's line/column range so a script front end can read it in place.
+// (18 columns)
+.decl html_script(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol,c17:symbol)
+
+// One call written in an on* attribute, a javascript: URL or a template dialect's event
+// directive (c0 handlerSource). The callee is kept as name, receiver and full text;
+// resolution is the engine's, as for a JavaScript call site.
+// (15 columns)
+.decl html_handler_call(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol)
+
+// One expression a template dialect evaluates: a directive's value (c2 directive as written,
+// c1 expressionKind what it does, c3 argument the event or property) or a {{ }} interpolation.
+// c6 calleeNames and c7 identifiers are read for the JavaScript-shaped dialects (Vue, Alpine,
+// Angular); c8 declares are the names a loop or slot introduces.
+// (17 columns)
+.decl html_template_expression(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol)
+
+// What the HTML grammar could not read (c1 names the error region, missing token, stray end tag
+// or duplicate attribute), a handler or style attribute that did not parse, or the overflow count.
+// (10 columns)
+.decl html_parse_gap(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol)
+
+// One stylesheet: a .css file (keyed on its path) or a <style> element (keyed on the element,
+// c7 ownerHtmlElementLinkHash). c6 sourceProvenance labels minified output; never a skip.
+// (17 columns)
+.decl css_stylesheet(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol)
+
+// A style rule or an at-rule, in the tree as written: c13 parentRuleLinkHash is the enclosing
+// block. c2 name is what an at-rule declares (the @keyframes, @layer, @container, @property
+// name; a @font-face's font-family), the column a css_value_reference joins on.
+// (17 columns)
+.decl css_rule(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol)
+
+// One complex selector of a rule's selector list, with its (a,b,c) specificity.
+// (16 columns)
+.decl css_selector(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol)
+
+// One simple selector, in writing order; c5 combinatorBefore is the combinator written
+// before its compound. A functional pseudo-class's arguments are child parts (c8 depth,
+// c11 parentPartLinkHash). CLASS/ID/TYPE names join html_class_reference, html_element; a
+// namespaced type (svg|rect) is the name rect with value svg|.
+// (17 columns)
+.decl css_selector_part(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol,c15:symbol,c16:symbol)
+
+// One property: value. Owned by a rule (c10) OR a style attribute (c11), never both.
+// (15 columns)
+.decl css_declaration(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol,c14:symbol)
+
+// A name a value refers to: VARIABLE (var(--x)), URL, IMPORT, KEYFRAMES, LAYER, CONTAINER,
+// FONT_FAMILY. URL and IMPORT carry c3 urlKind and c4 resolvedFilePath; the rest join by c1 name.
+// (14 columns)
+.decl css_value_reference(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol,c10:symbol,c11:symbol,c12:symbol,c13:symbol)
+
+// A /* */ comment with its text and range.
+// (8 columns)
+.decl css_comment(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol)
+
+// An error region of the CSS grammar, text CSS has no place for, a preprocessor marker in a .css file, or the overflow count.
+// (10 columns)
+.decl css_parse_gap(c0:symbol,c1:symbol,c2:symbol,c3:symbol,c4:symbol,c5:symbol,c6:symbol,c7:symbol,c8:symbol,c9:symbol)
diff --git a/parser/src/schema/web/gen_decls.py b/parser/src/schema/web/gen_decls.py
new file mode 100644
index 000000000..4dde64e75
--- /dev/null
+++ b/parser/src/schema/web/gen_decls.py
@@ -0,0 +1,150 @@
+#!/usr/bin/env python3
+"""Generate decls_base_web.dl FROM schema.json, the frozen column lists of the HTML and CSS relations.
+
+The .dl carries positional `c0..cN` and nothing else, so column ORDER is the contract with
+the Soufflé engine: a rename is free after the freeze and a reorder is not. Generating the
+declarations from the one place the columns are listed is what makes that asymmetry safe,
+and `web-tests.ts` checks the parser's own headers against the same file, so the three
+cannot drift apart. Run with --check to diff instead of write (for CI).
+
+The web relations are CONFIG-SHAPED, like Java's XML and YAML tables: client-only, with no
+`lib_` pair, because a dependency's pages and stylesheets are not the project's.
+"""
+import json
+import os
+import sys
+
+HERE = os.path.dirname(os.path.abspath(__file__))
+DOC = os.path.join(HERE, "schema.json")
+OUT = os.path.join(HERE, "decls_base_web.dl")
+
+DOCS = {
+    "html_document": "One HTML file; the root of every HTML key. c5 documentKind says whether the file writes\n"
+                     "// <html>/a doctype or is a fragment the algorithm wrapped; c9 templateDialects is a comma\n"
+                     "// set of the template families whose markers the text shows.",
+    "html_element": "One element, keyed on its XPath-like c2 path. c4 id and c5 classNames are repeated from the\n"
+                    "// attributes because they are what CSS and script references join on. c7 isImplied marks\n"
+                    "// an element the HTML algorithm inserted (html, head, body, tbody).",
+    "html_attribute": "One attribute; (element, prefix, name) is unique by the algorithm. c3 attributeKind is what\n"
+                      "// the attribute does: ID, CLASS, STYLE, EVENT_HANDLER, URL, TEMPLATE_DIRECTIVE, ...",
+    "html_class_reference": "One token of a class attribute: the row css_selector_part (CLASS) joins on.",
+    "html_reference": "One URL a page names. c0 referenceKind says what it points at (SCRIPT, STYLESHEET, ANCHOR,\n"
+                      "// IMAGE, FORM_ACTION, ...); c2 urlKind what kind of URL it is; c6 resolvedFilePath the file\n"
+                      "// on disk when a RELATIVE or ROOT_RELATIVE URL names one, else empty, with c7 isResolved.",
+    "html_script": "One <script>, 1:1 with its element. EXTERNAL rows carry the src and its resolution;\n"
+                   "// INLINE rows carry the body's line/column range so a script front end can read it in place.",
+    "html_handler_call": "One call written in an on* attribute, a javascript: URL or a template dialect's event\n"
+                         "// directive (c0 handlerSource). The callee is kept as name, receiver and full text;\n"
+                         "// resolution is the engine's, as for a JavaScript call site.",
+    "html_template_expression": "One expression a template dialect evaluates: a directive's value (c2 directive as written,\n"
+                                "// c1 expressionKind what it does, c3 argument the event or property) or a {{ }} interpolation.\n"
+                                "// c6 calleeNames and c7 identifiers are read for the JavaScript-shaped dialects (Vue, Alpine,\n"
+                                "// Angular); c8 declares are the names a loop or slot introduces.",
+    "html_parse_gap": "What the HTML grammar could not read (c1 names the error region, missing token, stray end tag\n"
+                      "// or duplicate attribute), a handler or style attribute that did not parse, or the overflow count.",
+    "css_stylesheet": "One stylesheet: a .css file (keyed on its path) or a <style> element (keyed on the element,\n"
+                      "// c7 ownerHtmlElementLinkHash). c6 sourceProvenance labels minified output; never a skip.",
+    "css_rule": "A style rule or an at-rule, in the tree as written: c13 parentRuleLinkHash is the enclosing\n"
+                "// block. c2 name is what an at-rule declares (the @keyframes, @layer, @container, @property\n"
+                "// name; a @font-face's font-family), the column a css_value_reference joins on.",
+    "css_selector": "One complex selector of a rule's selector list, with its (a,b,c) specificity.",
+    "css_selector_part": "One simple selector, in writing order; c5 combinatorBefore is the combinator written\n"
+                         "// before its compound. A functional pseudo-class's arguments are child parts (c8 depth,\n"
+                         "// c11 parentPartLinkHash). CLASS/ID/TYPE names join html_class_reference, html_element; a\n"
+                         "// namespaced type (svg|rect) is the name rect with value svg|.",
+    "css_declaration": "One property: value. Owned by a rule (c10) OR a style attribute (c11), never both.",
+    "css_value_reference": "A name a value refers to: VARIABLE (var(--x)), URL, IMPORT, KEYFRAMES, LAYER, CONTAINER,\n"
+                           "// FONT_FAMILY. URL and IMPORT carry c3 urlKind and c4 resolvedFilePath; the rest join by c1 name.",
+    "css_comment": "A /* */ comment with its text and range.",
+    "css_parse_gap": "An error region of the CSS grammar, text CSS has no place for, a preprocessor marker in a .css file, or the overflow count.",
+}
+
+
+def parse_doc():
+    schema = json.load(open(DOC))
+    rels, errors, seen = [], [], set()
+    for name, spec in schema["relations"].items():
+        if not (name.startswith("html_") or name.startswith("css_")):
+            errors.append("%s: not an html_ or css_ relation" % name)
+        if name in seen:
+            errors.append("%s: declared twice" % name)
+        seen.add(name)
+        cols = spec.get("columns", [])
+        if not cols:
+            errors.append("%s: no columns — arity unverifiable" % name)
+        if len(set(cols)) != len(cols):
+            errors.append("%s: a column name repeats" % name)
+        if cols and not cols[-1].endswith("UniqueHash"):
+            errors.append("%s: the last column is not the row's own key" % name)
+        rels.append((name, len(cols)))
+    for name, _ in rels:
+        if name not in DOCS:
+            errors.append("%s: no purpose comment in gen_decls.py DOCS" % name)
+    for name in DOCS:
+        if name not in seen:
+            errors.append("%s: has a DOCS comment but no entry in schema.json" % name)
+    return rels, errors
+
+
+def decl(name, arity):
+    return ".decl %s(%s)" % (name, ",".join("c%d:symbol" % i for i in range(arity)))
+
+
+def render(rels):
+    out = ["""// ============================================================================
+// Base input relations — HTML and CSS parser IR (the web front end).
+//
+// GENERATED FROM schema.json BY gen_decls.py — DO NOT HAND-EDIT.
+// Re-run `python3 gen_decls.py --check` in CI; drift here is a silent schema break.
+//
+// CLIENT-ONLY, like Java's XML and YAML tables: no lib_ pair is declared, because a
+// dependency's pages and stylesheets are not the project's. An engine that reads these
+// copies the .decl lines it needs into its decls_base.dl and maps the CSV in client-ir.map:
+//
+//     html_<entity>   all-html-<entities>.csv       css_<entity>   all-css-<entities>.csv
+//
+// COLUMN ORDER IS THE CONTRACT. All columns are `symbol`. New columns append ONLY.
+// The last column of every relation is the row's own unique hash.
+//
+// JOINS AN ENGINE AUTHOR WILL WANT:
+//   html_reference.resolvedFilePath (SCRIPT)     = <script front end>'s module file path
+//   html_reference.resolvedFilePath (STYLESHEET) = css_stylesheet.filePath
+//   html_class_reference.className              = css_selector_part.name where partKind = CLASS
+//   html_element.id                             = css_selector_part.name where partKind = ID
+//   html_element.tagName                        = css_selector_part.name where partKind = TYPE
+//   html_handler_call.calleeName                = a global function of a classic script the page loads
+//   css_value_reference.name (VARIABLE)         = css_declaration.property where isCustomProperty
+//   css_value_reference.name (KEYFRAMES)        = css_rule.name where atRuleName = keyframes
+// ============================================================================"""]
+    for name, arity in rels:
+        out.append("")
+        out.append("// " + DOCS[name])
+        out.append("// (%d columns)" % arity)
+        out.append(decl(name, arity))
+    out.append("")
+    return "\n".join(out)
+
+
+def main():
+    check = "--check" in sys.argv
+    rels, errors = parse_doc()
+    if errors:
+        print("SCHEMA DOC ERRORS — refusing to generate:")
+        for e in errors:
+            print("  " + e)
+        return 2
+    text = render(rels)
+    if check:
+        have = open(OUT).read() if os.path.exists(OUT) else ""
+        if have != text:
+            print("DRIFT: %s does not match %s — run python3 src/schema/web/gen_decls.py" % (os.path.basename(OUT), os.path.basename(DOC)))
+            return 1
+        print("OK  %d relations, %d columns — .dl matches schema.json" % (len(rels), sum(a for _, a in rels)))
+        return 0
+    open(OUT, "w").write(text)
+    print("wrote %s — %d relations, %d columns" % (os.path.basename(OUT), len(rels), sum(a for _, a in rels)))
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/parser/src/schema/web/schema.json b/parser/src/schema/web/schema.json
new file mode 100644
index 000000000..868d1b020
--- /dev/null
+++ b/parser/src/schema/web/schema.json
@@ -0,0 +1,532 @@
+{
+ "$comment": "FROZEN web (HTML + CSS) fact schema — relation column order is the contract; new columns append only. Enum domains where a column holds one; commaSets names the columns that hold a comma-separated SET of values from a domain. Generated from the row classes by the first freeze; edit here and keep the classes in step (web-tests.ts checks).",
+ "relations": {
+  "html_document": {
+   "columns": [
+    "name",
+    "fileName",
+    "filePath",
+    "baseMservPath",
+    "relativePath",
+    "documentKind",
+    "doctype",
+    "lang",
+    "title",
+    "templateDialects",
+    "sourceProvenance",
+    "elementCount",
+    "scriptCount",
+    "inlineScriptCount",
+    "stylesheetReferenceCount",
+    "inlineStyleCount",
+    "parseGapCount",
+    "startLine",
+    "endLine",
+    "serviceVersionLinkHash",
+    "htmlDocumentUniqueHash"
+   ],
+   "domains": {
+    "documentKind": [
+     "DOCUMENT",
+     "FRAGMENT"
+    ],
+    "sourceProvenance": [
+     "MINIFIED",
+     "PROJECT"
+    ],
+    "templateDialects": [
+     "ALPINE",
+     "ANGULAR",
+     "DOLLAR_BRACE",
+     "ERB",
+     "HANDLEBARS",
+     "HTMX",
+     "JINJA",
+     "MUSTACHE",
+     "PHP",
+     "RAZOR",
+     "THYMELEAF",
+     "VUE"
+    ]
+   },
+   "commaSets": [
+    "templateDialects"
+   ]
+  },
+  "html_element": {
+   "columns": [
+    "tagName",
+    "namespace",
+    "path",
+    "depth",
+    "id",
+    "classNames",
+    "textContent",
+    "isVoid",
+    "childElementCount",
+    "attributeCount",
+    "position",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "endColumn",
+    "parentElementLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlElementUniqueHash"
+   ],
+   "domains": {
+    "namespace": [
+     "HTML",
+     "MATHML",
+     "SVG"
+    ]
+   }
+  },
+  "html_attribute": {
+   "columns": [
+    "name",
+    "prefix",
+    "value",
+    "attributeKind",
+    "hasValue",
+    "startLine",
+    "startColumn",
+    "ownerElementLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlAttributeUniqueHash"
+   ],
+   "domains": {
+    "attributeKind": [
+     "ARIA",
+     "CLASS",
+     "DATA",
+     "EVENT_HANDLER",
+     "FOR",
+     "ID",
+     "ID_REFERENCE",
+     "NAME",
+     "NAMESPACE",
+     "OTHER",
+     "REL",
+     "SRCSET",
+     "STYLE",
+     "TEMPLATE_DIRECTIVE",
+     "TYPE",
+     "URL"
+    ]
+   }
+  },
+  "html_class_reference": {
+   "columns": [
+    "className",
+    "position",
+    "startLine",
+    "ownerElementLinkHash",
+    "attributeLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlClassReferenceUniqueHash"
+   ]
+  },
+  "html_reference": {
+   "columns": [
+    "referenceKind",
+    "urlAsWritten",
+    "urlKind",
+    "path",
+    "query",
+    "fragment",
+    "resolvedFilePath",
+    "isResolved",
+    "position",
+    "attributeName",
+    "startLine",
+    "startColumn",
+    "ownerElementLinkHash",
+    "attributeLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlReferenceUniqueHash"
+   ],
+   "domains": {
+    "referenceKind": [
+     "ANCHOR",
+     "BASE",
+     "FORM_ACTION",
+     "FRAME",
+     "IMAGE",
+     "LINK_RESOURCE",
+     "MEDIA",
+     "META_REFRESH",
+     "OTHER",
+     "REQUEST",
+     "SCRIPT",
+     "STYLESHEET"
+    ],
+    "urlKind": [
+     "ABSOLUTE",
+     "DATA_URI",
+     "EMPTY",
+     "FRAGMENT",
+     "JAVASCRIPT_URI",
+     "OTHER_SCHEME",
+     "PROTOCOL_RELATIVE",
+     "RELATIVE",
+     "ROOT_RELATIVE",
+     "TEMPLATE_EXPRESSION"
+    ]
+   }
+  },
+  "html_script": {
+   "columns": [
+    "scriptKind",
+    "scriptType",
+    "typeAsWritten",
+    "src",
+    "resolvedFilePath",
+    "isAsync",
+    "isDefer",
+    "isNoModule",
+    "bodyStartLine",
+    "bodyStartColumn",
+    "bodyEndLine",
+    "bodyEndColumn",
+    "bodyLength",
+    "ownerElementLinkHash",
+    "referenceLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlScriptUniqueHash"
+   ],
+   "domains": {
+    "scriptKind": [
+     "EXTERNAL",
+     "INLINE"
+    ],
+    "scriptType": [
+     "CLASSIC",
+     "DATA_BLOCK",
+     "IMPORTMAP",
+     "JSON",
+     "MODULE",
+     "SPECULATION_RULES",
+     "TEMPLATE",
+     "TRANSPILED"
+    ]
+   }
+  },
+  "html_handler_call": {
+   "columns": [
+    "handlerSource",
+    "eventName",
+    "calleeName",
+    "receiverText",
+    "calleeText",
+    "argumentCount",
+    "isNew",
+    "position",
+    "startLine",
+    "startColumn",
+    "ownerElementLinkHash",
+    "attributeLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlHandlerCallUniqueHash"
+   ],
+   "domains": {
+    "handlerSource": [
+     "EVENT_ATTRIBUTE",
+     "JAVASCRIPT_URL",
+     "TEMPLATE_EVENT"
+    ]
+   }
+  },
+  "html_template_expression": {
+   "columns": [
+    "dialect",
+    "expressionKind",
+    "directive",
+    "argument",
+    "modifiers",
+    "expressionText",
+    "calleeNames",
+    "identifiers",
+    "declares",
+    "position",
+    "startLine",
+    "startColumn",
+    "ownerElementLinkHash",
+    "attributeLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlTemplateExpressionUniqueHash"
+   ],
+   "domains": {
+    "dialect": [
+     "ALPINE",
+     "ANGULAR",
+     "DOLLAR_BRACE",
+     "ERB",
+     "HANDLEBARS",
+     "HTMX",
+     "JINJA",
+     "MUSTACHE",
+     "PHP",
+     "RAZOR",
+     "THYMELEAF",
+     "VUE"
+    ],
+    "expressionKind": [
+     "BINDING",
+     "CONDITION",
+     "DIRECTIVE",
+     "EVENT_HANDLER",
+     "INTERPOLATION",
+     "LOOP",
+     "MODEL",
+     "REFERENCE",
+     "REQUEST",
+     "SLOT"
+    ]
+   }
+  },
+  "html_parse_gap": {
+   "columns": [
+    "gapKind",
+    "detail",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "endColumn",
+    "relatedElementLinkHash",
+    "documentLinkHash",
+    "serviceVersionLinkHash",
+    "htmlParseGapUniqueHash"
+   ],
+   "domains": {
+    "gapKind": [
+     "GAP_LIMIT_REACHED",
+     "HANDLER_SYNTAX",
+     "PARSE_ERROR",
+     "STYLE_ATTRIBUTE_SYNTAX"
+    ]
+   }
+  },
+  "css_stylesheet": {
+   "columns": [
+    "name",
+    "fileName",
+    "filePath",
+    "baseMservPath",
+    "relativePath",
+    "sourceKind",
+    "sourceProvenance",
+    "ownerHtmlElementLinkHash",
+    "htmlDocumentLinkHash",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "ruleCount",
+    "declarationCount",
+    "parseGapCount",
+    "serviceVersionLinkHash",
+    "cssStylesheetUniqueHash"
+   ],
+   "domains": {
+    "sourceKind": [
+     "FILE",
+     "HTML_STYLE_ELEMENT"
+    ],
+    "sourceProvenance": [
+     "MINIFIED",
+     "PROJECT"
+    ]
+   }
+  },
+  "css_rule": {
+   "columns": [
+    "ruleKind",
+    "atRuleName",
+    "name",
+    "preludeText",
+    "selectorCount",
+    "declarationCount",
+    "childRuleCount",
+    "nestingDepth",
+    "position",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "endColumn",
+    "parentRuleLinkHash",
+    "stylesheetLinkHash",
+    "serviceVersionLinkHash",
+    "cssRuleUniqueHash"
+   ],
+   "domains": {
+    "ruleKind": [
+     "AT_RULE",
+     "STYLE_RULE"
+    ]
+   }
+  },
+  "css_selector": {
+   "columns": [
+    "selectorText",
+    "position",
+    "specificityA",
+    "specificityB",
+    "specificityC",
+    "compoundCount",
+    "hasNesting",
+    "hasPseudoElement",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "endColumn",
+    "ruleLinkHash",
+    "stylesheetLinkHash",
+    "serviceVersionLinkHash",
+    "cssSelectorUniqueHash"
+   ]
+  },
+  "css_selector_part": {
+   "columns": [
+    "partKind",
+    "name",
+    "value",
+    "attributeMatcher",
+    "attributeFlags",
+    "combinatorBefore",
+    "compoundIndex",
+    "position",
+    "depth",
+    "argumentIndex",
+    "startLine",
+    "startColumn",
+    "parentPartLinkHash",
+    "selectorLinkHash",
+    "ruleLinkHash",
+    "serviceVersionLinkHash",
+    "cssSelectorPartUniqueHash"
+   ],
+   "domains": {
+    "partKind": [
+     "ATTRIBUTE",
+     "CLASS",
+     "ID",
+     "NESTING",
+     "PSEUDO_CLASS",
+     "PSEUDO_ELEMENT",
+     "RAW",
+     "TYPE",
+     "UNIVERSAL"
+    ],
+    "combinatorBefore": [
+     "CHILD",
+     "COLUMN",
+     "DESCENDANT",
+     "NEXT_SIBLING",
+     "NONE",
+     "SUBSEQUENT_SIBLING"
+    ]
+   }
+  },
+  "css_declaration": {
+   "columns": [
+    "property",
+    "valueText",
+    "isImportant",
+    "isCustomProperty",
+    "vendorPrefix",
+    "position",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "endColumn",
+    "ruleLinkHash",
+    "htmlAttributeLinkHash",
+    "stylesheetLinkHash",
+    "serviceVersionLinkHash",
+    "cssDeclarationUniqueHash"
+   ]
+  },
+  "css_value_reference": {
+   "columns": [
+    "referenceKind",
+    "name",
+    "fallbackText",
+    "urlKind",
+    "resolvedFilePath",
+    "isResolved",
+    "position",
+    "startLine",
+    "startColumn",
+    "ownerDeclarationLinkHash",
+    "ownerRuleLinkHash",
+    "stylesheetLinkHash",
+    "serviceVersionLinkHash",
+    "cssValueReferenceUniqueHash"
+   ],
+   "domains": {
+    "referenceKind": [
+     "CONTAINER",
+     "FONT_FAMILY",
+     "IMPORT",
+     "KEYFRAMES",
+     "LAYER",
+     "URL",
+     "VARIABLE"
+    ],
+    "urlKind": [
+     "ABSOLUTE",
+     "DATA_URI",
+     "EMPTY",
+     "FRAGMENT",
+     "JAVASCRIPT_URI",
+     "OTHER_SCHEME",
+     "PROTOCOL_RELATIVE",
+     "RELATIVE",
+     "ROOT_RELATIVE",
+     "TEMPLATE_EXPRESSION"
+    ]
+   }
+  },
+  "css_comment": {
+   "columns": [
+    "text",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "endColumn",
+    "stylesheetLinkHash",
+    "serviceVersionLinkHash",
+    "cssCommentUniqueHash"
+   ]
+  },
+  "css_parse_gap": {
+   "columns": [
+    "gapKind",
+    "detail",
+    "startLine",
+    "startColumn",
+    "endLine",
+    "endColumn",
+    "relatedRuleLinkHash",
+    "stylesheetLinkHash",
+    "serviceVersionLinkHash",
+    "cssParseGapUniqueHash"
+   ],
+   "domains": {
+    "gapKind": [
+     "GAP_LIMIT_REACHED",
+     "PARSE_ERROR",
+     "PREPROCESSOR_SYNTAX",
+     "UNPARSED_FRAGMENT"
+    ]
+   }
+  }
+ }
+}
diff --git a/parser/src/test-data/web/_golden/css-comments.txt b/parser/src/test-data/web/_golden/css-comments.txt
new file mode 100644
index 000000000..538845a58
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-comments.txt
@@ -0,0 +1 @@
+text= theme tokens 	startLine=2	startColumn=1	endLine=2	endColumn=19
diff --git a/parser/src/test-data/web/_golden/css-declarations.txt b/parser/src/test-data/web/_golden/css-declarations.txt
new file mode 100644
index 000000000..56970a58d
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-declarations.txt
@@ -0,0 +1,39 @@
+property=--brand	valueText=#09f	isImportant=false	isCustomProperty=true	vendorPrefix=	position=1	startLine=6	startColumn=21	endLine=6	endColumn=35
+property=--gap	valueText=8px	isImportant=false	isCustomProperty=true	vendorPrefix=	position=0	startLine=6	startColumn=9	endLine=6	endColumn=20
+property=-webkit-font-smoothing	valueText=antialiased	isImportant=false	isCustomProperty=false	vendorPrefix=-webkit-	position=1	startLine=1	startColumn=19	endLine=1	endColumn=54
+property=animation	valueText=spin 1s linear infinite	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=8	startColumn=100	endLine=8	endColumn=135
+property=background	valueText=url(../img/bg.png) no-repeat	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=8	startColumn=58	endLine=8	endColumn=99
+property=background	valueText=url(static/img/hero.png)	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=13	startColumn=34	endLine=13	endColumn=70
+property=box-sizing	valueText=border-box	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=18	startColumn=5	endLine=18	endColumn=27
+property=color	valueText=	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=16	startColumn=11	endLine=16	endColumn=19
+property=color	valueText=	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=3	startColumn=6	endLine=3	endColumn=14
+property=color	valueText=	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=4	startColumn=16	endLine=4	endColumn=24
+property=color	valueText=blue	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=1	startColumn=17	endLine=1	endColumn=27
+property=color	valueText=blue	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=15	startColumn=6	endLine=15	endColumn=18
+property=color	valueText=green	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=15	startColumn=49	endLine=15	endColumn=61
+property=color	valueText=red	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=1	startColumn=4	endLine=1	endColumn=13
+property=color	valueText=red	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=15	startColumn=26	endLine=15	endColumn=36
+property=color	valueText=var(--brand)	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=13	startColumn=13	endLine=13	endColumn=33
+property=color	valueText=var(--brand)	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=25	startColumn=49	endLine=25	endColumn=69
+property=color	valueText=var(--brand, red)	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=7	startColumn=62	endLine=7	endColumn=87
+property=container-name	valueText=sidebar	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=14	startColumn=12	endLine=14	endColumn=36
+property=container-type	valueText=inline-size	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=14	startColumn=37	endLine=14	endColumn=64
+property=content	valueText=""""""	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=17	startColumn=33	endLine=17	endColumn=44
+property=display	valueText=flex	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=2	startColumn=15	endLine=2	endColumn=29
+property=display	valueText=grid	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=12	startColumn=37	endLine=12	endColumn=50
+property=font-family	valueText="""Inter"""	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=11	startColumn=14	endLine=11	endColumn=35
+property=font-family	valueText="""Inter"", Segoe UI, sans-serif"	isImportant=false	isCustomProperty=false	vendorPrefix=	position=2	startLine=8	startColumn=136	endLine=8	endColumn=178
+property=gap	valueText=1rem	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=13	startColumn=49	endLine=13	endColumn=58
+property=gap	valueText=var(--gap)	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=7	startColumn=88	endLine=7	endColumn=103
+property=margin	valueText=0	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=1	startColumn=31	endLine=1	endColumn=40
+property=margin	valueText=0	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=1	startColumn=8	endLine=1	endColumn=18
+property=margin	valueText=0	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=19	startColumn=15	endLine=19	endColumn=24
+property=margin	valueText=0	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=20	startColumn=13	endLine=20	endColumn=22
+property=margin	valueText=0	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=25	startColumn=70	endLine=25	endColumn=78
+property=margin	valueText=0	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=4	startColumn=25	endLine=4	endColumn=34
+property=opacity	valueText=.5	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=10	startColumn=55	endLine=10	endColumn=66
+property=padding	valueText=0	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=1	startColumn=40	endLine=1	endColumn=49
+property=padding	valueText=calc(var(--gap) * 2)	isImportant=true	isCustomProperty=false	vendorPrefix=	position=0	startLine=9	startColumn=36	endLine=9	endColumn=76
+property=src	valueText="url(/fonts/inter.woff2) format(""woff2"")"	isImportant=false	isCustomProperty=false	vendorPrefix=	position=1	startLine=11	startColumn=36	endLine=11	endColumn=80
+property=transform	valueText=rotate(0)	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=10	startColumn=26	endLine=10	endColumn=46
+property=transform	valueText=rotate(1turn)	isImportant=false	isCustomProperty=false	vendorPrefix=	position=0	startLine=10	startColumn=74	endLine=10	endColumn=98
diff --git a/parser/src/test-data/web/_golden/css-parse-gaps.txt b/parser/src/test-data/web/_golden/css-parse-gaps.txt
new file mode 100644
index 000000000..6b7f31088
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-parse-gaps.txt
@@ -0,0 +1,7 @@
+gapKind=PARSE_ERROR	detail=empty value for color	startLine=16	startColumn=11	endLine=16	endColumn=19
+gapKind=PARSE_ERROR	detail=empty value for color	startLine=3	startColumn=6	endLine=3	endColumn=22
+gapKind=PARSE_ERROR	detail=syntax error: $	startLine=1	startColumn=1	endLine=1	endColumn=2
+gapKind=PARSE_ERROR	detail=syntax error: $	startLine=3	startColumn=13	endLine=3	endColumn=14
+gapKind=PARSE_ERROR	detail=syntax error: primary;	startLine=3	startColumn=14	endLine=3	endColumn=22
+gapKind=PREPROCESSOR_SYNTAX	detail=sass variable: $primary:	startLine=1	startColumn=1	endLine=1	endColumn=10
+gapKind=UNPARSED_FRAGMENT	detail=declaration outside a rule: primary: #333;	startLine=1	startColumn=2	endLine=1	endColumn=16
diff --git a/parser/src/test-data/web/_golden/css-rules.txt b/parser/src/test-data/web/_golden/css-rules.txt
new file mode 100644
index 000000000..37e3d5059
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-rules.txt
@@ -0,0 +1,35 @@
+ruleKind=AT_RULE	atRuleName=charset	name=	preludeText="""utf-8"""	selectorCount=0	declarationCount=0	childRuleCount=0	nestingDepth=0	position=0	startLine=1	startColumn=1	endLine=1	endColumn=18
+ruleKind=AT_RULE	atRuleName=container	name=sidebar	preludeText=sidebar (min-width: 400px)	selectorCount=0	declarationCount=0	childRuleCount=1	nestingDepth=0	position=11	startLine=13	startColumn=1	endLine=13	endColumn=62
+ruleKind=AT_RULE	atRuleName=font-face	name=Inter	preludeText=	selectorCount=0	declarationCount=2	childRuleCount=0	nestingDepth=0	position=9	startLine=11	startColumn=1	endLine=11	endColumn=82
+ruleKind=AT_RULE	atRuleName=import	name=	preludeText="""missing.css"""	selectorCount=0	declarationCount=0	childRuleCount=0	nestingDepth=0	position=2	startLine=4	startColumn=1	endLine=4	endColumn=23
+ruleKind=AT_RULE	atRuleName=import	name=	preludeText="url(""base.css"") layer(base)"	selectorCount=0	declarationCount=0	childRuleCount=0	nestingDepth=0	position=1	startLine=3	startColumn=1	endLine=3	endColumn=37
+ruleKind=AT_RULE	atRuleName=include	name=	preludeText=flex	selectorCount=0	declarationCount=0	childRuleCount=0	nestingDepth=1	position=0	startLine=3	startColumn=23	endLine=3	endColumn=37
+ruleKind=AT_RULE	atRuleName=keyframes	name=spin	preludeText=spin	selectorCount=0	declarationCount=0	childRuleCount=3	nestingDepth=0	position=8	startLine=10	startColumn=1	endLine=10	endColumn=102
+ruleKind=AT_RULE	atRuleName=layer	name=	preludeText=base, components	selectorCount=0	declarationCount=0	childRuleCount=0	nestingDepth=0	position=3	startLine=5	startColumn=1	endLine=5	endColumn=25
+ruleKind=AT_RULE	atRuleName=media	name=	preludeText=(min-width: 40em)	selectorCount=0	declarationCount=0	childRuleCount=1	nestingDepth=0	position=7	startLine=9	startColumn=1	endLine=9	endColumn=80
+ruleKind=AT_RULE	atRuleName=mixin	name=	preludeText=flex	selectorCount=0	declarationCount=1	childRuleCount=0	nestingDepth=0	position=0	startLine=2	startColumn=1	endLine=2	endColumn=31
+ruleKind=AT_RULE	atRuleName=supports	name=	preludeText=(display: grid)	selectorCount=0	declarationCount=0	childRuleCount=1	nestingDepth=0	position=10	startLine=12	startColumn=1	endLine=12	endColumn=54
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=".nav > li.item:not(.hidden) a[href^=""http"" i]:hover::after"	selectorCount=1	declarationCount=2	childRuleCount=0	nestingDepth=0	position=5	startLine=7	startColumn=1	endLine=7	endColumn=105
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=#main .card, .card--wide, ul li:nth-child(2n of .item)	selectorCount=3	declarationCount=3	childRuleCount=0	nestingDepth=0	position=6	startLine=8	startColumn=1	endLine=8	endColumn=180
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=&:hover	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=1	startLine=15	startColumn=39	endLine=15	endColumn=63
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=*	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=0	position=16	startLine=18	startColumn=1	endLine=18	endColumn=29
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.a	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=0	position=0	startLine=1	startColumn=1	endLine=1	endColumn=14
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.a	selectorCount=1	declarationCount=1	childRuleCount=2	nestingDepth=0	position=13	startLine=15	startColumn=1	endLine=15	endColumn=65
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.b	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=0	position=1	startLine=1	startColumn=14	endLine=1	endColumn=28
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.b &	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=0	startLine=15	startColumn=19	endLine=15	endColumn=38
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.broken	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=0	position=14	startLine=16	startColumn=1	endLine=16	endColumn=21
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.c	selectorCount=1	declarationCount=2	childRuleCount=0	nestingDepth=0	position=2	startLine=1	startColumn=28	endLine=1	endColumn=50
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.card	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=0	startLine=13	startColumn=41	endLine=13	endColumn=60
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.card	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=0	startLine=9	startColumn=28	endLine=9	endColumn=78
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.grid	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=0	startLine=12	startColumn=29	endLine=12	endColumn=52
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.hero	selectorCount=1	declarationCount=2	childRuleCount=0	nestingDepth=0	position=0	startLine=13	startColumn=5	endLine=13	endColumn=72
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.sidebar	selectorCount=1	declarationCount=2	childRuleCount=0	nestingDepth=0	position=12	startLine=14	startColumn=1	endLine=14	endColumn=66
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.title::before, .title:before	selectorCount=2	declarationCount=1	childRuleCount=0	nestingDepth=0	position=15	startLine=17	startColumn=1	endLine=17	endColumn=46
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=.x	selectorCount=1	declarationCount=1	childRuleCount=1	nestingDepth=0	position=1	startLine=3	startColumn=1	endLine=3	endColumn=39
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=50%	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=1	startLine=10	startColumn=49	endLine=10	endColumn=68
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=:root	selectorCount=1	declarationCount=2	childRuleCount=0	nestingDepth=0	position=4	startLine=6	startColumn=1	endLine=6	endColumn=37
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=body	selectorCount=1	declarationCount=2	childRuleCount=0	nestingDepth=0	position=0	startLine=1	startColumn=1	endLine=1	endColumn=56
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=col || td	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=0	position=18	startLine=20	startColumn=1	endLine=20	endColumn=24
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=from	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=0	startLine=10	startColumn=19	endLine=10	endColumn=48
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=h1 + p ~ em	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=0	position=17	startLine=19	startColumn=1	endLine=19	endColumn=26
+ruleKind=STYLE_RULE	atRuleName=	name=	preludeText=to	selectorCount=1	declarationCount=1	childRuleCount=0	nestingDepth=1	position=2	startLine=10	startColumn=69	endLine=10	endColumn=100
diff --git a/parser/src/test-data/web/_golden/css-selector-parts.txt b/parser/src/test-data/web/_golden/css-selector-parts.txt
new file mode 100644
index 000000000..5abd658cd
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-selector-parts.txt
@@ -0,0 +1,43 @@
+partKind=ATTRIBUTE	name=href	value=http	attributeMatcher=^=	attributeFlags=i	combinatorBefore=NONE	compoundIndex=2	position=6	depth=0	argumentIndex=0	startLine=7	startColumn=30
+partKind=CLASS	name=a	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=1	startColumn=1
+partKind=CLASS	name=a	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=15	startColumn=1
+partKind=CLASS	name=b	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=1	startColumn=14
+partKind=CLASS	name=b	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=15	startColumn=19
+partKind=CLASS	name=broken	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=16	startColumn=1
+partKind=CLASS	name=c	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=1	startColumn=28
+partKind=CLASS	name=card	value=	attributeMatcher=	attributeFlags=	combinatorBefore=DESCENDANT	compoundIndex=1	position=1	depth=0	argumentIndex=0	startLine=8	startColumn=7
+partKind=CLASS	name=card	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=13	startColumn=41
+partKind=CLASS	name=card	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=9	startColumn=28
+partKind=CLASS	name=card--wide	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=8	startColumn=14
+partKind=CLASS	name=grid	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=12	startColumn=29
+partKind=CLASS	name=hero	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=13	startColumn=5
+partKind=CLASS	name=hidden	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=4	depth=1	argumentIndex=0	startLine=7	startColumn=20
+partKind=CLASS	name=item	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=3	depth=1	argumentIndex=0	startLine=8	startColumn=49
+partKind=CLASS	name=item	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=1	position=2	depth=0	argumentIndex=0	startLine=7	startColumn=10
+partKind=CLASS	name=nav	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=7	startColumn=1
+partKind=CLASS	name=sidebar	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=14	startColumn=1
+partKind=CLASS	name=title	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=17	startColumn=1
+partKind=CLASS	name=title	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=17	startColumn=17
+partKind=CLASS	name=x	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=3	startColumn=1
+partKind=ID	name=main	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=8	startColumn=1
+partKind=NESTING	name=&	value=	attributeMatcher=	attributeFlags=	combinatorBefore=DESCENDANT	compoundIndex=1	position=1	depth=0	argumentIndex=0	startLine=15	startColumn=22
+partKind=NESTING	name=&	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=15	startColumn=39
+partKind=PSEUDO_CLASS	name=hover	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=1	depth=0	argumentIndex=0	startLine=15	startColumn=40
+partKind=PSEUDO_CLASS	name=hover	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=2	position=7	depth=0	argumentIndex=0	startLine=7	startColumn=46
+partKind=PSEUDO_CLASS	name=not	value=.hidden	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=1	position=3	depth=0	argumentIndex=0	startLine=7	startColumn=15
+partKind=PSEUDO_CLASS	name=nth-child	value=2n of .item	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=1	position=2	depth=0	argumentIndex=0	startLine=8	startColumn=32
+partKind=PSEUDO_CLASS	name=root	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=6	startColumn=1
+partKind=PSEUDO_ELEMENT	name=after	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=2	position=8	depth=0	argumentIndex=0	startLine=7	startColumn=52
+partKind=PSEUDO_ELEMENT	name=before	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=1	depth=0	argumentIndex=0	startLine=17	startColumn=23
+partKind=PSEUDO_ELEMENT	name=before	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=1	depth=0	argumentIndex=0	startLine=17	startColumn=7
+partKind=TYPE	name=a	value=	attributeMatcher=	attributeFlags=	combinatorBefore=DESCENDANT	compoundIndex=2	position=5	depth=0	argumentIndex=0	startLine=7	startColumn=29
+partKind=TYPE	name=body	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=1	startColumn=1
+partKind=TYPE	name=col	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=20	startColumn=1
+partKind=TYPE	name=em	value=	attributeMatcher=	attributeFlags=	combinatorBefore=SUBSEQUENT_SIBLING	compoundIndex=2	position=2	depth=0	argumentIndex=0	startLine=19	startColumn=10
+partKind=TYPE	name=h1	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=19	startColumn=1
+partKind=TYPE	name=li	value=	attributeMatcher=	attributeFlags=	combinatorBefore=CHILD	compoundIndex=1	position=1	depth=0	argumentIndex=0	startLine=7	startColumn=8
+partKind=TYPE	name=li	value=	attributeMatcher=	attributeFlags=	combinatorBefore=DESCENDANT	compoundIndex=1	position=1	depth=0	argumentIndex=0	startLine=8	startColumn=30
+partKind=TYPE	name=p	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NEXT_SIBLING	compoundIndex=1	position=1	depth=0	argumentIndex=0	startLine=19	startColumn=6
+partKind=TYPE	name=td	value=	attributeMatcher=	attributeFlags=	combinatorBefore=COLUMN	compoundIndex=1	position=1	depth=0	argumentIndex=0	startLine=20	startColumn=8
+partKind=TYPE	name=ul	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=8	startColumn=27
+partKind=UNIVERSAL	name=*	value=	attributeMatcher=	attributeFlags=	combinatorBefore=NONE	compoundIndex=0	position=0	depth=0	argumentIndex=0	startLine=18	startColumn=1
diff --git a/parser/src/test-data/web/_golden/css-selectors.txt b/parser/src/test-data/web/_golden/css-selectors.txt
new file mode 100644
index 000000000..282f2e901
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-selectors.txt
@@ -0,0 +1,27 @@
+selectorText=".nav > li.item:not(.hidden) a[href^=""http"" i]:hover::after"	position=0	specificityA=0	specificityB=5	specificityC=3	compoundCount=3	hasNesting=false	hasPseudoElement=true	startLine=7	startColumn=1	endLine=7	endColumn=59
+selectorText=#main .card	position=0	specificityA=1	specificityB=1	specificityC=0	compoundCount=2	hasNesting=false	hasPseudoElement=false	startLine=8	startColumn=1	endLine=8	endColumn=12
+selectorText=&:hover	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=true	hasPseudoElement=false	startLine=15	startColumn=39	endLine=15	endColumn=46
+selectorText=*	position=0	specificityA=0	specificityB=0	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=18	startColumn=1	endLine=18	endColumn=2
+selectorText=.a	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=1	startColumn=1	endLine=1	endColumn=3
+selectorText=.a	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=15	startColumn=1	endLine=15	endColumn=3
+selectorText=.b	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=1	startColumn=14	endLine=1	endColumn=16
+selectorText=.b &	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=2	hasNesting=true	hasPseudoElement=false	startLine=15	startColumn=19	endLine=15	endColumn=23
+selectorText=.broken	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=16	startColumn=1	endLine=16	endColumn=8
+selectorText=.c	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=1	startColumn=28	endLine=1	endColumn=30
+selectorText=.card	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=13	startColumn=41	endLine=13	endColumn=46
+selectorText=.card	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=9	startColumn=28	endLine=9	endColumn=33
+selectorText=.card--wide	position=1	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=8	startColumn=14	endLine=8	endColumn=25
+selectorText=.grid	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=12	startColumn=29	endLine=12	endColumn=34
+selectorText=.hero	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=13	startColumn=5	endLine=13	endColumn=10
+selectorText=.sidebar	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=14	startColumn=1	endLine=14	endColumn=9
+selectorText=.title::before	position=0	specificityA=0	specificityB=1	specificityC=1	compoundCount=1	hasNesting=false	hasPseudoElement=true	startLine=17	startColumn=1	endLine=17	endColumn=15
+selectorText=.title:before	position=1	specificityA=0	specificityB=1	specificityC=1	compoundCount=1	hasNesting=false	hasPseudoElement=true	startLine=17	startColumn=17	endLine=17	endColumn=30
+selectorText=.x	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=3	startColumn=1	endLine=3	endColumn=3
+selectorText=50%	position=0	specificityA=0	specificityB=0	specificityC=0	compoundCount=0	hasNesting=false	hasPseudoElement=false	startLine=10	startColumn=49	endLine=10	endColumn=53
+selectorText=:root	position=0	specificityA=0	specificityB=1	specificityC=0	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=6	startColumn=1	endLine=6	endColumn=6
+selectorText=body	position=0	specificityA=0	specificityB=0	specificityC=1	compoundCount=1	hasNesting=false	hasPseudoElement=false	startLine=1	startColumn=1	endLine=1	endColumn=5
+selectorText=col || td	position=0	specificityA=0	specificityB=0	specificityC=2	compoundCount=2	hasNesting=false	hasPseudoElement=false	startLine=20	startColumn=1	endLine=20	endColumn=10
+selectorText=from	position=0	specificityA=0	specificityB=0	specificityC=0	compoundCount=0	hasNesting=false	hasPseudoElement=false	startLine=10	startColumn=19	endLine=10	endColumn=24
+selectorText=h1 + p ~ em	position=0	specificityA=0	specificityB=0	specificityC=3	compoundCount=3	hasNesting=false	hasPseudoElement=false	startLine=19	startColumn=1	endLine=19	endColumn=12
+selectorText=to	position=0	specificityA=0	specificityB=0	specificityC=0	compoundCount=0	hasNesting=false	hasPseudoElement=false	startLine=10	startColumn=69	endLine=10	endColumn=72
+selectorText=ul li:nth-child(2n of .item)	position=2	specificityA=0	specificityB=2	specificityC=2	compoundCount=2	hasNesting=false	hasPseudoElement=false	startLine=8	startColumn=27	endLine=8	endColumn=55
diff --git a/parser/src/test-data/web/_golden/css-stylesheets.txt b/parser/src/test-data/web/_golden/css-stylesheets.txt
new file mode 100644
index 000000000..0fec58333
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-stylesheets.txt
@@ -0,0 +1,5 @@
+name=app	fileName=app.css	relativePath=static/css/app.css	sourceKind=FILE	sourceProvenance=PROJECT	startLine=1	startColumn=1	endLine=20	ruleCount=27	declarationCount=25	parseGapCount=1
+name=base	fileName=base.css	relativePath=static/css/base.css	sourceKind=FILE	sourceProvenance=PROJECT	startLine=1	startColumn=1	endLine=1	ruleCount=1	declarationCount=2	parseGapCount=0
+name=index#style1	fileName=index.html	relativePath=index.html	sourceKind=HTML_STYLE_ELEMENT	sourceProvenance=PROJECT	startLine=12	startColumn=10	endLine=14	ruleCount=1	declarationCount=2	parseGapCount=0
+name=sassy	fileName=sassy.css	relativePath=vendor/sassy.css	sourceKind=FILE	sourceProvenance=PROJECT	startLine=1	startColumn=1	endLine=3	ruleCount=3	declarationCount=2	parseGapCount=6
+name=vendor.min	fileName=vendor.min.css	relativePath=static/css/vendor.min.css	sourceKind=FILE	sourceProvenance=MINIFIED	startLine=1	startColumn=1	endLine=1	ruleCount=3	declarationCount=4	parseGapCount=0
diff --git a/parser/src/test-data/web/_golden/css-value-references.txt b/parser/src/test-data/web/_golden/css-value-references.txt
new file mode 100644
index 000000000..9c8536730
--- /dev/null
+++ b/parser/src/test-data/web/_golden/css-value-references.txt
@@ -0,0 +1,19 @@
+referenceKind=CONTAINER	name=sidebar	fallbackText=	urlKind=	isResolved=false	position=0	startLine=13	startColumn=11
+referenceKind=CONTAINER	name=sidebar	fallbackText=	urlKind=	isResolved=false	position=0	startLine=14	startColumn=28
+referenceKind=FONT_FAMILY	name=Inter	fallbackText=	urlKind=	isResolved=false	position=0	startLine=11	startColumn=27
+referenceKind=FONT_FAMILY	name=Inter	fallbackText=	urlKind=	isResolved=false	position=0	startLine=8	startColumn=149
+referenceKind=FONT_FAMILY	name=Segoe UI	fallbackText=	urlKind=	isResolved=false	position=1	startLine=8	startColumn=158
+referenceKind=IMPORT	name=base.css	fallbackText=	urlKind=RELATIVE	isResolved=true	position=0	startLine=3	startColumn=8
+referenceKind=IMPORT	name=missing.css	fallbackText=	urlKind=RELATIVE	isResolved=false	position=0	startLine=4	startColumn=8
+referenceKind=KEYFRAMES	name=spin	fallbackText=	urlKind=	isResolved=false	position=0	startLine=8	startColumn=111
+referenceKind=LAYER	name=base	fallbackText=	urlKind=	isResolved=false	position=0	startLine=5	startColumn=7
+referenceKind=LAYER	name=base	fallbackText=	urlKind=	isResolved=false	position=1	startLine=3	startColumn=8
+referenceKind=LAYER	name=components	fallbackText=	urlKind=	isResolved=false	position=1	startLine=5	startColumn=7
+referenceKind=URL	name=../img/bg.png	fallbackText=	urlKind=RELATIVE	isResolved=false	position=0	startLine=8	startColumn=70
+referenceKind=URL	name=/fonts/inter.woff2	fallbackText=	urlKind=ROOT_RELATIVE	isResolved=false	position=0	startLine=11	startColumn=41
+referenceKind=URL	name=static/img/hero.png	fallbackText=	urlKind=RELATIVE	isResolved=true	position=0	startLine=13	startColumn=46
+referenceKind=VARIABLE	name=--brand	fallbackText=	urlKind=	isResolved=false	position=0	startLine=13	startColumn=20
+referenceKind=VARIABLE	name=--brand	fallbackText=	urlKind=	isResolved=false	position=0	startLine=25	startColumn=56
+referenceKind=VARIABLE	name=--brand	fallbackText=red	urlKind=	isResolved=false	position=0	startLine=7	startColumn=69
+referenceKind=VARIABLE	name=--gap	fallbackText=	urlKind=	isResolved=false	position=0	startLine=7	startColumn=93
+referenceKind=VARIABLE	name=--gap	fallbackText=	urlKind=	isResolved=false	position=0	startLine=9	startColumn=50
diff --git a/parser/src/test-data/web/_golden/html-attributes.txt b/parser/src/test-data/web/_golden/html-attributes.txt
new file mode 100644
index 000000000..520203927
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-attributes.txt
@@ -0,0 +1,113 @@
+name=#default	prefix=	value={ item }	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=8	startColumn=15
+name=#list	prefix=	value=	attributeKind=TEMPLATE_DIRECTIVE	hasValue=false	startLine=2	startColumn=63
+name=(click)	prefix=	value=toggle()	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=2	startColumn=44
+name=*ngFor	prefix=	value=let item of items; let i = index	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=3	startColumn=7
+name=*ngIf	prefix=	value=items.length	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=2	startColumn=5
+name=:class	prefix=	value={ on: open }	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=1	startColumn=84
+name=:key	prefix=	value=row.id	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=7	startColumn=32
+name=@click	prefix=	value=open = !open	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=1	startColumn=46
+name=@keyup.enter	prefix=	value=search()	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=10	startColumn=31
+name=@select	prefix=	value=pick(row)	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=7	startColumn=65
+name=[(ngModel)]	prefix=	value=item.qty	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=3	startColumn=49
+name=[class.on]	prefix=	value=open	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=2	startColumn=26
+name=action	prefix=	value=/submit	attributeKind=URL	hasValue=true	startLine=29	startColumn=11
+name=alt	prefix=	value=	attributeKind=OTHER	hasValue=true	startLine=11	startColumn=55
+name=alt	prefix=	value=	attributeKind=OTHER	hasValue=true	startLine=27	startColumn=95
+name=alt	prefix=	value=hero	attributeKind=OTHER	hasValue=true	startLine=28	startColumn=101
+name=aria-label	prefix=	value=Main	attributeKind=ARIA	hasValue=true	startLine=25	startColumn=97
+name=async	prefix=	value=	attributeKind=OTHER	hasValue=false	startLine=10	startColumn=30
+name=charset	prefix=	value=utf-8	attributeKind=OTHER	hasValue=true	startLine=4	startColumn=9
+name=class	prefix=	value=card card--wide	attributeKind=CLASS	hasValue=true	startLine=25	startColumn=18
+name=class	prefix=	value=home dark	attributeKind=CLASS	hasValue=true	startLine=17	startColumn=7
+name=class	prefix=	value=item	attributeKind=CLASS	hasValue=true	startLine=20	startColumn=11
+name=class	prefix=	value=item	attributeKind=CLASS	hasValue=true	startLine=22	startColumn=11
+name=class	prefix=	value=item hidden	attributeKind=CLASS	hasValue=true	startLine=21	startColumn=11
+name=class	prefix=	value=label	attributeKind=CLASS	hasValue=true	startLine=2	startColumn=9
+name=class	prefix=	value=link	attributeKind=CLASS	hasValue=true	startLine=3	startColumn=35
+name=class	prefix=	value=nav	attributeKind=CLASS	hasValue=true	startLine=18	startColumn=8
+name=class	prefix=	value=partial	attributeKind=CLASS	hasValue=true	startLine=1	startColumn=6
+name=class	prefix=	value=title	attributeKind=CLASS	hasValue=true	startLine=10	startColumn=12
+name=class	prefix=	value=tpl	attributeKind=CLASS	hasValue=true	startLine=37	startColumn=21
+name=class	prefix=	value=widget	attributeKind=CLASS	hasValue=true	startLine=1	startColumn=6
+name=class	prefix=	value=wrapper	attributeKind=CLASS	hasValue=true	startLine=3	startColumn=31
+name=class	prefix=	value=x	attributeKind=CLASS	hasValue=true	startLine=15	startColumn=26
+name=content	prefix=	value=5; url=index.html	attributeKind=OTHER	hasValue=true	startLine=4	startColumn=28
+name=data-role	prefix=	value=main	attributeKind=DATA	hasValue=true	startLine=25	startColumn=80
+name=defer	prefix=	value=	attributeKind=OTHER	hasValue=false	startLine=11	startColumn=48
+name=disabled	prefix=	value=	attributeKind=OTHER	hasValue=false	startLine=30	startColumn=70
+name=for	prefix=	value=q	attributeKind=FOR	hasValue=true	startLine=30	startColumn=14
+name=form	prefix=	value=f	attributeKind=ID_REFERENCE	hasValue=true	startLine=12	startColumn=23
+name=formaction	prefix=	value=/alt	attributeKind=URL	hasValue=true	startLine=31	startColumn=15
+name=href	prefix=	value=	attributeKind=URL	hasValue=true	startLine=13	startColumn=4
+name=href	prefix=	value=/	attributeKind=URL	hasValue=true	startLine=6	startColumn=9
+name=href	prefix=	value=/about#team	attributeKind=URL	hasValue=true	startLine=20	startColumn=27
+name=href	prefix=	value=javascript:toggle()	attributeKind=URL	hasValue=true	startLine=34	startColumn=8
+name=href	prefix=	value=javascript:void(0)	attributeKind=URL	hasValue=true	startLine=35	startColumn=8
+name=href	prefix=	value=js/app.js	attributeKind=URL	hasValue=true	startLine=9	startColumn=29
+name=href	prefix=	value=mailto:hi@example.com	attributeKind=URL	hasValue=true	startLine=22	startColumn=27
+name=href	prefix=	value=page.html?x=1#top	attributeKind=URL	hasValue=true	startLine=21	startColumn=34
+name=href	prefix=	value=static/css/app.css	attributeKind=URL	hasValue=true	startLine=3	startColumn=49
+name=href	prefix=	value=static/css/app.css	attributeKind=URL	hasValue=true	startLine=7	startColumn=26
+name=href	prefix=	value=static/img/favicon.png	attributeKind=URL	hasValue=true	startLine=8	startColumn=20
+name=href	prefix=	value=static/img/sprite.svg#icon	attributeKind=URL	hasValue=true	startLine=38	startColumn=35
+name=href	prefix=	value={{ url_for('home') }}	attributeKind=URL	hasValue=true	startLine=3	startColumn=6
+name=href	prefix=xlink	value=#local	attributeKind=URL	hasValue=true	startLine=38	startColumn=75
+name=http-equiv	prefix=	value=refresh	attributeKind=OTHER	hasValue=true	startLine=4	startColumn=7
+name=hx-get	prefix=	value=/items	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=1	startColumn=68
+name=id	prefix=	value=choices	attributeKind=ID	hasValue=true	startLine=12	startColumn=54
+name=id	prefix=	value=dup	attributeKind=ID	hasValue=true	startLine=15	startColumn=6
+name=id	prefix=	value=main	attributeKind=ID	hasValue=true	startLine=25	startColumn=8
+name=id	prefix=	value=q	attributeKind=ID	hasValue=true	startLine=30	startColumn=42
+name=id	prefix=	value=top	attributeKind=ID	hasValue=true	startLine=10	startColumn=5
+name=id	prefix=	value=tpl-row	attributeKind=ID	hasValue=true	startLine=45	startColumn=34
+name=id	prefix=	value=vue-root	attributeKind=ID	hasValue=true	startLine=6	startColumn=6
+name=lang	prefix=	value=en	attributeKind=OTHER	hasValue=true	startLine=2	startColumn=7
+name=list	prefix=	value=choices	attributeKind=ID_REFERENCE	hasValue=true	startLine=12	startColumn=8
+name=method	prefix=	value=post	attributeKind=OTHER	hasValue=true	startLine=29	startColumn=28
+name=name	prefix=	value=q	attributeKind=NAME	hasValue=true	startLine=30	startColumn=49
+name=onclick	prefix=	value=app.submit(event)	attributeKind=EVENT_HANDLER	hasValue=true	startLine=32	startColumn=29
+name=onclick	prefix=	value=if (confirm('?')) remove(1)	attributeKind=EVENT_HANDLER	hasValue=true	startLine=31	startColumn=33
+name=onclick	prefix=	value=save(	attributeKind=EVENT_HANDLER	hasValue=true	startLine=5	startColumn=11
+name=onclick	prefix=	value=track('nav', this); return go()	attributeKind=EVENT_HANDLER	hasValue=true	startLine=20	startColumn=46
+name=onclick	prefix=	value={{ handler }}	attributeKind=EVENT_HANDLER	hasValue=true	startLine=35	startColumn=34
+name=onload	prefix=	value=start()	attributeKind=EVENT_HANDLER	hasValue=true	startLine=9	startColumn=7
+name=poster	prefix=	value=static/img/poster.png	attributeKind=URL	hasValue=true	startLine=39	startColumn=33
+name=rel	prefix=	value=icon	attributeKind=REL	hasValue=true	startLine=8	startColumn=9
+name=rel	prefix=	value=modulepreload	attributeKind=REL	hasValue=true	startLine=9	startColumn=9
+name=rel	prefix=	value=stylesheet	attributeKind=REL	hasValue=true	startLine=3	startColumn=34
+name=rel	prefix=	value=stylesheet	attributeKind=REL	hasValue=true	startLine=7	startColumn=9
+name=role	prefix=	value=region	attributeKind=ARIA	hasValue=true	startLine=25	startColumn=115
+name=src	prefix=	value=//cdn.example.com/x.js	attributeKind=URL	hasValue=true	startLine=8	startColumn=9
+name=src	prefix=	value=/assets/main.js	attributeKind=URL	hasValue=true	startLine=2	startColumn=15
+name=src	prefix=	value=data:image/gif;base64,R0lGODlhAQABAAAAACw=	attributeKind=URL	hasValue=true	startLine=11	startColumn=6
+name=src	prefix=	value=https://cdn.example.com/lib.js	attributeKind=URL	hasValue=true	startLine=11	startColumn=11
+name=src	prefix=	value=js/vendor.js	attributeKind=URL	hasValue=true	startLine=10	startColumn=11
+name=src	prefix=	value=media/clip.mp4	attributeKind=URL	hasValue=true	startLine=39	startColumn=12
+name=src	prefix=	value=partials/frame.html	attributeKind=URL	hasValue=true	startLine=36	startColumn=13
+name=src	prefix=	value=static/img/hero.png	attributeKind=URL	hasValue=true	startLine=28	startColumn=75
+name=src	prefix=	value=static/img/logo.png	attributeKind=URL	hasValue=true	startLine=27	startColumn=10
+name=srcset	prefix=	value=static/img/hero.webp	attributeKind=SRCSET	hasValue=true	startLine=28	startColumn=22
+name=srcset	prefix=	value=static/img/logo.png 1x, static/img/logo@2x.png 2x	attributeKind=SRCSET	hasValue=true	startLine=27	startColumn=36
+name=style	prefix=	value=color: ; margin: 0	attributeKind=STYLE	hasValue=true	startLine=4	startColumn=9
+name=style	prefix=	value=color: var(--brand); margin:0	attributeKind=STYLE	hasValue=true	startLine=25	startColumn=42
+name=th:text	prefix=	value=${title}	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=3	startColumn=12
+name=type	prefix=	value=application/ld+json	attributeKind=TYPE	hasValue=true	startLine=46	startColumn=11
+name=type	prefix=	value=image/webp	attributeKind=TYPE	hasValue=true	startLine=28	startColumn=52
+name=type	prefix=	value=importmap	attributeKind=TYPE	hasValue=true	startLine=15	startColumn=11
+name=type	prefix=	value=module	attributeKind=TYPE	hasValue=true	startLine=41	startColumn=11
+name=type	prefix=	value=speculationrules	attributeKind=TYPE	hasValue=true	startLine=5	startColumn=9
+name=type	prefix=	value=submit	attributeKind=TYPE	hasValue=true	startLine=32	startColumn=15
+name=type	prefix=	value=text	attributeKind=TYPE	hasValue=true	startLine=12	startColumn=32
+name=type	prefix=	value=text	attributeKind=TYPE	hasValue=true	startLine=30	startColumn=58
+name=type	prefix=	value=text/babel	attributeKind=TYPE	hasValue=true	startLine=6	startColumn=9
+name=type	prefix=	value=text/x-mathjax-config	attributeKind=TYPE	hasValue=true	startLine=7	startColumn=9
+name=type	prefix=	value=text/x-template	attributeKind=TYPE	hasValue=true	startLine=45	startColumn=11
+name=v-for	prefix=	value=row in rows	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=7	startColumn=12
+name=v-model	prefix=	value=selected	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=7	startColumn=46
+name=v-model.trim	prefix=	value=query	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=10	startColumn=10
+name=viewBox	prefix=	value=0 0 10 10	attributeKind=OTHER	hasValue=true	startLine=38	startColumn=10
+name=x-data	prefix=	value={ open: false }	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=1	startColumn=21
+name=x-data	prefix=	value={ open: false }	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=11	startColumn=8
+name=x-ref	prefix=	value=panel	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=11	startColumn=33
+name=x-show	prefix=	value=open	attributeKind=TEMPLATE_DIRECTIVE	hasValue=true	startLine=11	startColumn=47
+name=xmlns:th	prefix=	value=http://www.thymeleaf.org	attributeKind=NAMESPACE	hasValue=true	startLine=1	startColumn=7
diff --git a/parser/src/test-data/web/_golden/html-class-references.txt b/parser/src/test-data/web/_golden/html-class-references.txt
new file mode 100644
index 000000000..5a0851a11
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-class-references.txt
@@ -0,0 +1,17 @@
+className=card	position=0	startLine=25
+className=card--wide	position=1	startLine=25
+className=dark	position=1	startLine=17
+className=hidden	position=1	startLine=21
+className=home	position=0	startLine=17
+className=item	position=0	startLine=20
+className=item	position=0	startLine=21
+className=item	position=0	startLine=22
+className=label	position=0	startLine=2
+className=link	position=0	startLine=3
+className=nav	position=0	startLine=18
+className=partial	position=0	startLine=1
+className=title	position=0	startLine=10
+className=tpl	position=0	startLine=37
+className=widget	position=0	startLine=1
+className=wrapper	position=0	startLine=3
+className=x	position=0	startLine=15
diff --git a/parser/src/test-data/web/_golden/html-documents.txt b/parser/src/test-data/web/_golden/html-documents.txt
new file mode 100644
index 000000000..e3a1acbed
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-documents.txt
@@ -0,0 +1,6 @@
+name=fragment	fileName=fragment.html	relativePath=templates/fragment.html	documentKind=FRAGMENT	doctype=	lang=	title=	templateDialects=ALPINE,ERB,HANDLEBARS,HTMX,MUSTACHE	sourceProvenance=PROJECT	elementCount=3	scriptCount=0	inlineScriptCount=0	stylesheetReferenceCount=0	inlineStyleCount=0	parseGapCount=0	startLine=1	endLine=4
+name=frame	fileName=frame.html	relativePath=partials/frame.html	documentKind=FRAGMENT	doctype=	lang=	title=	templateDialects=JINJA,MUSTACHE	sourceProvenance=PROJECT	elementCount=5	scriptCount=0	inlineScriptCount=0	stylesheetReferenceCount=0	inlineStyleCount=0	parseGapCount=3	startLine=1	endLine=6
+name=index	fileName=index.html	relativePath=index.html	documentKind=DOCUMENT	doctype=html	lang=en	title=Fixture site	templateDialects=MUSTACHE	sourceProvenance=PROJECT	elementCount=45	scriptCount=6	inlineScriptCount=4	stylesheetReferenceCount=1	inlineStyleCount=1	parseGapCount=1	startLine=1	endLine=48
+name=layout	fileName=layout.html	relativePath=templates/layout.html	documentKind=DOCUMENT	doctype=	lang=	title=	templateDialects=DOLLAR_BRACE,THYMELEAF	sourceProvenance=PROJECT	elementCount=6	scriptCount=1	inlineScriptCount=0	stylesheetReferenceCount=0	inlineStyleCount=0	parseGapCount=0	startLine=1	endLine=4
+name=mixed	fileName=mixed.html	relativePath=templates/mixed.html	documentKind=FRAGMENT	doctype=	lang=	title=	templateDialects=ALPINE,ANGULAR,MUSTACHE,PHP,RAZOR,VUE	sourceProvenance=PROJECT	elementCount=7	scriptCount=0	inlineScriptCount=0	stylesheetReferenceCount=0	inlineStyleCount=0	parseGapCount=0	startLine=1	endLine=12
+name=page	fileName=page.html	relativePath=page.html	documentKind=DOCUMENT	doctype=html	lang=	title=Second	templateDialects=	sourceProvenance=PROJECT	elementCount=21	scriptCount=4	inlineScriptCount=3	stylesheetReferenceCount=1	inlineStyleCount=0	parseGapCount=1	startLine=1	endLine=18
diff --git a/parser/src/test-data/web/_golden/html-elements.txt b/parser/src/test-data/web/_golden/html-elements.txt
new file mode 100644
index 000000000..dfa959993
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-elements.txt
@@ -0,0 +1,87 @@
+tagName=a	namespace=HTML	path=/div[1]/a[1]	depth=1	id=	classNames=link	textContent=Home	isVoid=false	childElementCount=0	attributeCount=2	position=1	startLine=3	startColumn=3	endLine=3	endColumn=56
+tagName=a	namespace=HTML	path=/html[1]/body[1]/a[1]	depth=2	id=	classNames=	textContent=self	isVoid=false	childElementCount=0	attributeCount=1	position=4	startLine=13	startColumn=1	endLine=13	endColumn=20
+tagName=a	namespace=HTML	path=/html[1]/body[1]/div[1]/a[1]	depth=3	id=	classNames=	textContent=toggle	isVoid=false	childElementCount=0	attributeCount=1	position=3	startLine=34	startColumn=5	endLine=34	endColumn=45
+tagName=a	namespace=HTML	path=/html[1]/body[1]/div[1]/a[2]	depth=3	id=	classNames=	textContent=template handler	isVoid=false	childElementCount=0	attributeCount=2	position=4	startLine=35	startColumn=5	endLine=35	endColumn=78
+tagName=a	namespace=HTML	path=/html[1]/body[1]/nav[1]/ul[1]/li[1]/a[1]	depth=5	id=	classNames=	textContent=About	isVoid=false	childElementCount=0	attributeCount=2	position=0	startLine=20	startColumn=24	endLine=20	endColumn=97
+tagName=a	namespace=HTML	path=/html[1]/body[1]/nav[1]/ul[1]/li[2]/a[1]	depth=5	id=	classNames=	textContent=Page	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=21	startColumn=31	endLine=21	endColumn=67
+tagName=a	namespace=HTML	path=/html[1]/body[1]/nav[1]/ul[1]/li[3]/a[1]	depth=5	id=	classNames=	textContent=Mail	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=22	startColumn=24	endLine=22	endColumn=64
+tagName=b	namespace=HTML	path=/html[1]/body[1]/p[1]/b[1]	depth=3	id=	classNames=	textContent=tag and a stray end tag.	isVoid=false	childElementCount=0	attributeCount=0	position=0	startLine=14	startColumn=28	endLine=14	endColumn=62
+tagName=base	namespace=HTML	path=/html[1]/head[1]/base[1]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=1	position=2	startLine=6	startColumn=3	endLine=6	endColumn=18
+tagName=body	namespace=HTML	path=/html[1]/body[1]	depth=1	id=	classNames=	textContent=	isVoid=false	childElementCount=2	attributeCount=0	position=1	startLine=3	startColumn=1	endLine=3	endColumn=75
+tagName=body	namespace=HTML	path=/html[1]/body[1]	depth=1	id=	classNames=	textContent=	isVoid=false	childElementCount=8	attributeCount=1	position=1	startLine=9	startColumn=1	endLine=17	endColumn=8
+tagName=body	namespace=HTML	path=/html[1]/body[1]	depth=1	id=	classNames=home,dark	textContent=	isVoid=false	childElementCount=5	attributeCount=1	position=1	startLine=17	startColumn=1	endLine=47	endColumn=8
+tagName=button	namespace=HTML	path=/div[1]/button[1]	depth=1	id=	classNames=	textContent=broken handler	isVoid=false	childElementCount=0	attributeCount=1	position=3	startLine=5	startColumn=3	endLine=5	endColumn=50
+tagName=button	namespace=HTML	path=/html[1]/body[1]/div[1]/form[1]/button[1]	depth=4	id=	classNames=	textContent=Go	isVoid=false	childElementCount=0	attributeCount=2	position=2	startLine=31	startColumn=7	endLine=31	endColumn=82
+tagName=button	namespace=HTML	path=/html[1]/body[1]/div[1]/form[1]/button[2]	depth=4	id=	classNames=	textContent=Send	isVoid=false	childElementCount=0	attributeCount=2	position=3	startLine=32	startColumn=7	endLine=32	endColumn=70
+tagName=datalist	namespace=HTML	path=/html[1]/body[1]/datalist[1]	depth=2	id=choices	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=3	startLine=12	startColumn=44	endLine=12	endColumn=78
+tagName=div	namespace=HTML	path=/div[1]	depth=0	id=	classNames=partial	textContent=	isVoid=false	childElementCount=4	attributeCount=1	position=0	startLine=1	startColumn=1	endLine=6	endColumn=7
+tagName=div	namespace=HTML	path=/div[1]	depth=0	id=	classNames=widget	textContent=	isVoid=false	childElementCount=2	attributeCount=5	position=0	startLine=1	startColumn=1	endLine=4	endColumn=7
+tagName=div	namespace=HTML	path=/div[1]	depth=0	id=vue-root	classNames=	textContent=	isVoid=false	childElementCount=3	attributeCount=1	position=1	startLine=6	startColumn=1	endLine=12	endColumn=7
+tagName=div	namespace=HTML	path=/div[1]/div[1]	depth=1	id=	classNames=	textContent=alpine	isVoid=false	childElementCount=0	attributeCount=3	position=2	startLine=11	startColumn=3	endLine=11	endColumn=73
+tagName=div	namespace=HTML	path=/html[1]/body[1]/div[1]	depth=2	id=	classNames=wrapper	textContent=x	isVoid=false	childElementCount=0	attributeCount=2	position=0	startLine=3	startColumn=7	endLine=3	endColumn=54
+tagName=div	namespace=HTML	path=/html[1]/body[1]/div[1]	depth=2	id=dup	classNames=x	textContent=	isVoid=false	childElementCount=0	attributeCount=3	position=6	startLine=15	startColumn=1	endLine=15	endColumn=42
+tagName=div	namespace=HTML	path=/html[1]/body[1]/div[1]	depth=2	id=main	classNames=card,card--wide	textContent=	isVoid=false	childElementCount=9	attributeCount=6	position=1	startLine=25	startColumn=3	endLine=40	endColumn=9
+tagName=em	namespace=HTML	path=/div[1]/em[1]	depth=1	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=0	position=1	startLine=3	startColumn=20	endLine=3	endColumn=45
+tagName=form	namespace=HTML	path=/html[1]/body[1]/div[1]/form[1]	depth=3	id=	classNames=	textContent=	isVoid=false	childElementCount=4	attributeCount=2	position=2	startLine=29	startColumn=5	endLine=33	endColumn=12
+tagName=h1	namespace=HTML	path=/html[1]/body[1]/h1[1]	depth=2	id=top	classNames=title	textContent=Second	isVoid=false	childElementCount=0	attributeCount=2	position=0	startLine=10	startColumn=1	endLine=10	endColumn=35
+tagName=h2	namespace=HTML	path=/div[1]/h2[1]	depth=1	id=	classNames=	textContent={% block title %}Partial{% endblock %}	isVoid=false	childElementCount=0	attributeCount=0	position=0	startLine=2	startColumn=3	endLine=2	endColumn=50
+tagName=head	namespace=HTML	path=/html[1]/head[1]	depth=1	id=	classNames=	textContent=	isVoid=false	childElementCount=1	attributeCount=0	position=0	startLine=2	startColumn=1	endLine=2	endColumn=53
+tagName=head	namespace=HTML	path=/html[1]/head[1]	depth=1	id=	classNames=	textContent=	isVoid=false	childElementCount=10	attributeCount=0	position=0	startLine=3	startColumn=1	endLine=16	endColumn=8
+tagName=head	namespace=HTML	path=/html[1]/head[1]	depth=1	id=	classNames=	textContent=	isVoid=false	childElementCount=7	attributeCount=0	position=0	startLine=3	startColumn=1	endLine=8	endColumn=54
+tagName=html	namespace=HTML	path=/html[1]	depth=0	id=	classNames=	textContent=	isVoid=false	childElementCount=2	attributeCount=0	position=0	startLine=2	startColumn=1	endLine=18	endColumn=8
+tagName=html	namespace=HTML	path=/html[1]	depth=0	id=	classNames=	textContent=	isVoid=false	childElementCount=2	attributeCount=1	position=0	startLine=1	startColumn=1	endLine=4	endColumn=8
+tagName=html	namespace=HTML	path=/html[1]	depth=0	id=	classNames=	textContent=	isVoid=false	childElementCount=2	attributeCount=1	position=0	startLine=2	startColumn=1	endLine=48	endColumn=8
+tagName=iframe	namespace=HTML	path=/html[1]/body[1]/div[1]/iframe[1]	depth=3	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=5	startLine=36	startColumn=5	endLine=36	endColumn=48
+tagName=img	namespace=HTML	path=/html[1]/body[1]/div[1]/p[2]/img[1]	depth=4	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=3	position=0	startLine=27	startColumn=5	endLine=27	endColumn=102
+tagName=img	namespace=HTML	path=/html[1]/body[1]/div[1]/p[2]/picture[1]/img[1]	depth=5	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=1	startLine=28	startColumn=70	endLine=28	endColumn=112
+tagName=img	namespace=HTML	path=/html[1]/body[1]/img[1]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=1	startLine=11	startColumn=1	endLine=11	endColumn=62
+tagName=input	namespace=HTML	path=/div[1]/input[1]	depth=1	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=1	startLine=10	startColumn=3	endLine=10	endColumn=55
+tagName=input	namespace=HTML	path=/html[1]/body[1]/div[1]/form[1]/input[1]	depth=4	id=q	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=4	position=1	startLine=30	startColumn=35	endLine=30	endColumn=79
+tagName=input	namespace=HTML	path=/html[1]/body[1]/input[1]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=3	position=2	startLine=12	startColumn=1	endLine=12	endColumn=44
+tagName=label	namespace=HTML	path=/html[1]/body[1]/div[1]/form[1]/label[1]	depth=4	id=	classNames=	textContent=Query	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=30	startColumn=7	endLine=30	endColumn=35
+tagName=li	namespace=HTML	path=/html[1]/body[1]/nav[1]/ul[1]/li[1]	depth=4	id=	classNames=item	textContent=	isVoid=false	childElementCount=1	attributeCount=1	position=0	startLine=20	startColumn=7	endLine=20	endColumn=102
+tagName=li	namespace=HTML	path=/html[1]/body[1]/nav[1]/ul[1]/li[2]	depth=4	id=	classNames=item,hidden	textContent=	isVoid=false	childElementCount=1	attributeCount=1	position=1	startLine=21	startColumn=7	endLine=21	endColumn=72
+tagName=li	namespace=HTML	path=/html[1]/body[1]/nav[1]/ul[1]/li[3]	depth=4	id=	classNames=item	textContent=	isVoid=false	childElementCount=1	attributeCount=1	position=2	startLine=22	startColumn=7	endLine=22	endColumn=69
+tagName=li	namespace=HTML	path=/ul[1]/li[1]	depth=1	id=	classNames=	textContent=@Model.Count items	isVoid=false	childElementCount=0	attributeCount=2	position=0	startLine=3	startColumn=3	endLine=3	endColumn=95
+tagName=link	namespace=HTML	path=/html[1]/head[1]/link[1]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=1	startLine=3	startColumn=28	endLine=3	endColumn=73
+tagName=link	namespace=HTML	path=/html[1]/head[1]/link[1]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=3	startLine=7	startColumn=3	endLine=7	endColumn=52
+tagName=link	namespace=HTML	path=/html[1]/head[1]/link[2]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=4	startLine=8	startColumn=3	endLine=8	endColumn=50
+tagName=link	namespace=HTML	path=/html[1]/head[1]/link[3]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=5	startLine=9	startColumn=3	endLine=9	endColumn=46
+tagName=meta	namespace=HTML	path=/html[1]/head[1]/meta[1]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=1	position=0	startLine=4	startColumn=3	endLine=4	endColumn=25
+tagName=meta	namespace=HTML	path=/html[1]/head[1]/meta[1]	depth=2	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=2	startLine=4	startColumn=1	endLine=4	endColumn=56
+tagName=my-list	namespace=HTML	path=/div[1]/my-list[1]	depth=1	id=	classNames=	textContent=	isVoid=false	childElementCount=1	attributeCount=4	position=0	startLine=7	startColumn=3	endLine=9	endColumn=13
+tagName=nav	namespace=HTML	path=/html[1]/body[1]/nav[1]	depth=2	id=	classNames=nav	textContent=	isVoid=false	childElementCount=1	attributeCount=1	position=0	startLine=18	startColumn=3	endLine=24	endColumn=9
+tagName=p	namespace=HTML	path=/html[1]/body[1]/div[1]/p[1]	depth=3	id=	classNames=	textContent=Hello	isVoid=false	childElementCount=0	attributeCount=0	position=0	startLine=26	startColumn=5	endLine=26	endColumn=13
+tagName=p	namespace=HTML	path=/html[1]/body[1]/div[1]/p[2]	depth=3	id=	classNames=	textContent=unclosed paragraph	isVoid=false	childElementCount=2	attributeCount=0	position=1	startLine=26	startColumn=13	endLine=29	endColumn=5
+tagName=p	namespace=HTML	path=/html[1]/body[1]/p[1]	depth=2	id=	classNames=	textContent=${name}	isVoid=false	childElementCount=0	attributeCount=0	position=1	startLine=3	startColumn=54	endLine=3	endColumn=68
+tagName=p	namespace=HTML	path=/html[1]/body[1]/p[1]	depth=2	id=	classNames=	textContent=A page with an unclosed	isVoid=false	childElementCount=1	attributeCount=0	position=5	startLine=14	startColumn=1	endLine=14	endColumn=66
+tagName=picture	namespace=HTML	path=/html[1]/body[1]/div[1]/p[2]/picture[1]	depth=4	id=	classNames=	textContent=	isVoid=false	childElementCount=2	attributeCount=0	position=1	startLine=28	startColumn=5	endLine=28	endColumn=122
+tagName=script	namespace=HTML	path=/html[1]/body[1]/script[1]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=2	startLine=41	startColumn=3	endLine=44	endColumn=12
+tagName=script	namespace=HTML	path=/html[1]/body[1]/script[2]	depth=2	id=tpl-row	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=2	position=3	startLine=45	startColumn=3	endLine=45	endColumn=84
+tagName=script	namespace=HTML	path=/html[1]/body[1]/script[3]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=4	startLine=46	startColumn=3	endLine=46	endColumn=81
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[1]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=2	startColumn=7	endLine=2	endColumn=46
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[1]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=3	startLine=5	startColumn=1	endLine=5	endColumn=101
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[1]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=2	position=6	startLine=10	startColumn=3	endLine=10	endColumn=45
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[2]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=4	startLine=6	startColumn=1	endLine=6	endColumn=51
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[2]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=2	position=7	startLine=11	startColumn=3	endLine=11	endColumn=63
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[3]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=5	startLine=7	startColumn=1	endLine=7	endColumn=70
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[3]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=9	startLine=15	startColumn=3	endLine=15	endColumn=76
+tagName=script	namespace=HTML	path=/html[1]/head[1]/script[4]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=6	startLine=8	startColumn=1	endLine=8	endColumn=47
+tagName=source	namespace=HTML	path=/html[1]/body[1]/div[1]/p[2]/picture[1]/source[1]	depth=5	id=	classNames=	textContent=	isVoid=true	childElementCount=0	attributeCount=2	position=0	startLine=28	startColumn=14	endLine=28	endColumn=70
+tagName=span	namespace=HTML	path=/div[1]/span[1]	depth=1	id=	classNames=	textContent=bad style	isVoid=false	childElementCount=0	attributeCount=1	position=2	startLine=4	startColumn=3	endLine=4	endColumn=52
+tagName=span	namespace=HTML	path=/div[1]/span[1]	depth=1	id=	classNames=label	textContent={{#each items}}{{this}}{{/each}}	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=2	startColumn=3	endLine=2	endColumn=62
+tagName=span	namespace=HTML	path=/html[1]/body[1]/div[1]/template[1]/span[1]	depth=4	id=	classNames=tpl	textContent=t	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=37	startColumn=15	endLine=37	endColumn=41
+tagName=style	namespace=HTML	path=/html[1]/head[1]/style[1]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=0	position=8	startLine=12	startColumn=3	endLine=14	endColumn=11
+tagName=svg	namespace=SVG	path=/html[1]/body[1]/div[1]/svg[1]	depth=3	id=	classNames=	textContent=	isVoid=false	childElementCount=2	attributeCount=1	position=7	startLine=38	startColumn=5	endLine=38	endColumn=102
+tagName=table	namespace=HTML	path=/html[1]/body[1]/table[1]	depth=2	id=	classNames=	textContent=	isVoid=false	childElementCount=1	attributeCount=0	position=7	startLine=16	startColumn=1	endLine=16	endColumn=47
+tagName=td	namespace=HTML	path=/html[1]/body[1]/table[1]/tr[1]/td[1]	depth=4	id=	classNames=	textContent=implied tbody	isVoid=false	childElementCount=0	attributeCount=0	position=0	startLine=16	startColumn=12	endLine=16	endColumn=34
+tagName=template	namespace=HTML	path=/div[1]/my-list[1]/template[1]	depth=2	id=	classNames=	textContent={{ format(item.name) }}	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=8	startColumn=5	endLine=8	endColumn=69
+tagName=template	namespace=HTML	path=/html[1]/body[1]/div[1]/template[1]	depth=3	id=	classNames=	textContent=	isVoid=false	childElementCount=1	attributeCount=0	position=6	startLine=37	startColumn=5	endLine=37	endColumn=52
+tagName=title	namespace=HTML	path=/html[1]/head[1]/title[1]	depth=2	id=	classNames=	textContent=Fixture site	isVoid=false	childElementCount=0	attributeCount=0	position=1	startLine=5	startColumn=3	endLine=5	endColumn=30
+tagName=title	namespace=HTML	path=/html[1]/head[1]/title[1]	depth=2	id=	classNames=	textContent=Second	isVoid=false	childElementCount=0	attributeCount=0	position=0	startLine=3	startColumn=7	endLine=3	endColumn=28
+tagName=tr	namespace=HTML	path=/html[1]/body[1]/table[1]/tr[1]	depth=3	id=	classNames=	textContent=	isVoid=false	childElementCount=1	attributeCount=0	position=0	startLine=16	startColumn=8	endLine=16	endColumn=39
+tagName=ul	namespace=HTML	path=/html[1]/body[1]/nav[1]/ul[1]	depth=3	id=	classNames=	textContent=	isVoid=false	childElementCount=3	attributeCount=0	position=0	startLine=19	startColumn=5	endLine=23	endColumn=10
+tagName=ul	namespace=HTML	path=/ul[1]	depth=0	id=	classNames=	textContent=	isVoid=false	childElementCount=1	attributeCount=4	position=0	startLine=2	startColumn=1	endLine=5	endColumn=6
+tagName=use	namespace=SVG	path=/html[1]/body[1]/div[1]/svg[1]/use[1]	depth=4	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=0	startLine=38	startColumn=30	endLine=38	endColumn=70
+tagName=use	namespace=SVG	path=/html[1]/body[1]/div[1]/svg[1]/use[2]	depth=4	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=1	position=1	startLine=38	startColumn=70	endLine=38	endColumn=96
+tagName=video	namespace=HTML	path=/html[1]/body[1]/div[1]/video[1]	depth=3	id=	classNames=	textContent=	isVoid=false	childElementCount=0	attributeCount=2	position=8	startLine=39	startColumn=5	endLine=39	endColumn=72
diff --git a/parser/src/test-data/web/_golden/html-handler-calls.txt b/parser/src/test-data/web/_golden/html-handler-calls.txt
new file mode 100644
index 000000000..1607feee3
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-handler-calls.txt
@@ -0,0 +1,11 @@
+handlerSource=EVENT_ATTRIBUTE	eventName=click	calleeName=confirm	receiverText=	calleeText=confirm	argumentCount=1	isNew=false	position=0	startLine=31	startColumn=46
+handlerSource=EVENT_ATTRIBUTE	eventName=click	calleeName=go	receiverText=	calleeText=go	argumentCount=0	isNew=false	position=1	startLine=20	startColumn=82
+handlerSource=EVENT_ATTRIBUTE	eventName=click	calleeName=remove	receiverText=	calleeText=remove	argumentCount=1	isNew=false	position=1	startLine=31	startColumn=60
+handlerSource=EVENT_ATTRIBUTE	eventName=click	calleeName=save	receiverText=	calleeText=save	argumentCount=0	isNew=false	position=0	startLine=5	startColumn=20
+handlerSource=EVENT_ATTRIBUTE	eventName=click	calleeName=submit	receiverText=app	calleeText=app.submit	argumentCount=1	isNew=false	position=0	startLine=32	startColumn=38
+handlerSource=EVENT_ATTRIBUTE	eventName=click	calleeName=track	receiverText=	calleeText=track	argumentCount=2	isNew=false	position=0	startLine=20	startColumn=55
+handlerSource=EVENT_ATTRIBUTE	eventName=load	calleeName=start	receiverText=	calleeText=start	argumentCount=0	isNew=false	position=0	startLine=9	startColumn=15
+handlerSource=JAVASCRIPT_URL	eventName=	calleeName=toggle	receiverText=	calleeText=toggle	argumentCount=0	isNew=false	position=0	startLine=34	startColumn=25
+handlerSource=TEMPLATE_EVENT	eventName=click	calleeName=toggle	receiverText=	calleeText=toggle	argumentCount=0	isNew=false	position=0	startLine=2	startColumn=53
+handlerSource=TEMPLATE_EVENT	eventName=keyup	calleeName=search	receiverText=	calleeText=search	argumentCount=0	isNew=false	position=0	startLine=10	startColumn=45
+handlerSource=TEMPLATE_EVENT	eventName=select	calleeName=pick	receiverText=	calleeText=pick	argumentCount=1	isNew=false	position=0	startLine=7	startColumn=74
diff --git a/parser/src/test-data/web/_golden/html-parse-gaps.txt b/parser/src/test-data/web/_golden/html-parse-gaps.txt
new file mode 100644
index 000000000..41b4d6644
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-parse-gaps.txt
@@ -0,0 +1,5 @@
+gapKind=HANDLER_SYNTAX	detail=onclick: ')' expected.	startLine=5	startColumn=25	endLine=5	endColumn=25
+gapKind=HANDLER_SYNTAX	detail=onclick: template expression in handler	startLine=35	startColumn=43	endLine=35	endColumn=43
+gapKind=PARSE_ERROR	detail=duplicate-attribute	startLine=15	startColumn=15	endLine=15	endColumn=25
+gapKind=STYLE_ATTRIBUTE_SYNTAX	detail=empty value for color	startLine=4	startColumn=16	endLine=4	endColumn=16
+gapKind=STYLE_ATTRIBUTE_SYNTAX	detail=syntax error: ;	startLine=4	startColumn=23	endLine=4	endColumn=23
diff --git a/parser/src/test-data/web/_golden/html-references.txt b/parser/src/test-data/web/_golden/html-references.txt
new file mode 100644
index 000000000..3c8cdd315
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-references.txt
@@ -0,0 +1,31 @@
+referenceKind=ANCHOR	urlAsWritten=	urlKind=EMPTY	path=	query=	fragment=	isResolved=false	position=0	attributeName=href	startLine=13	startColumn=10
+referenceKind=ANCHOR	urlAsWritten=/about#team	urlKind=ROOT_RELATIVE	path=/about	query=	fragment=team	isResolved=false	position=0	attributeName=href	startLine=20	startColumn=33
+referenceKind=ANCHOR	urlAsWritten=javascript:toggle()	urlKind=JAVASCRIPT_URI	path=	query=	fragment=	isResolved=false	position=0	attributeName=href	startLine=34	startColumn=14
+referenceKind=ANCHOR	urlAsWritten=javascript:void(0)	urlKind=JAVASCRIPT_URI	path=	query=	fragment=	isResolved=false	position=0	attributeName=href	startLine=35	startColumn=14
+referenceKind=ANCHOR	urlAsWritten=mailto:hi@example.com	urlKind=OTHER_SCHEME	path=mailto:hi@example.com	query=	fragment=	isResolved=false	position=0	attributeName=href	startLine=22	startColumn=33
+referenceKind=ANCHOR	urlAsWritten=page.html?x=1#top	urlKind=RELATIVE	path=page.html	query=x=1	fragment=top	isResolved=true	position=0	attributeName=href	startLine=21	startColumn=40
+referenceKind=ANCHOR	urlAsWritten={{ url_for('home') }}	urlKind=TEMPLATE_EXPRESSION	path={{ url_for('home') }}	query=	fragment=	isResolved=false	position=0	attributeName=href	startLine=3	startColumn=12
+referenceKind=BASE	urlAsWritten=/	urlKind=ROOT_RELATIVE	path=/	query=	fragment=	isResolved=false	position=0	attributeName=href	startLine=6	startColumn=15
+referenceKind=FORM_ACTION	urlAsWritten=/alt	urlKind=ROOT_RELATIVE	path=/alt	query=	fragment=	isResolved=false	position=0	attributeName=formaction	startLine=31	startColumn=27
+referenceKind=FORM_ACTION	urlAsWritten=/submit	urlKind=ROOT_RELATIVE	path=/submit	query=	fragment=	isResolved=false	position=0	attributeName=action	startLine=29	startColumn=19
+referenceKind=FRAME	urlAsWritten=partials/frame.html	urlKind=RELATIVE	path=partials/frame.html	query=	fragment=	isResolved=true	position=0	attributeName=src	startLine=36	startColumn=18
+referenceKind=IMAGE	urlAsWritten=data:image/gif;base64,R0lGODlhAQABAAAAACw=	urlKind=DATA_URI	path=	query=	fragment=	isResolved=false	position=0	attributeName=src	startLine=11	startColumn=11
+referenceKind=IMAGE	urlAsWritten=static/img/hero.png	urlKind=RELATIVE	path=static/img/hero.png	query=	fragment=	isResolved=true	position=0	attributeName=src	startLine=28	startColumn=80
+referenceKind=IMAGE	urlAsWritten=static/img/hero.webp	urlKind=RELATIVE	path=static/img/hero.webp	query=	fragment=	isResolved=false	position=0	attributeName=srcset	startLine=28	startColumn=30
+referenceKind=IMAGE	urlAsWritten=static/img/logo.png	urlKind=RELATIVE	path=static/img/logo.png	query=	fragment=	isResolved=true	position=0	attributeName=src	startLine=27	startColumn=15
+referenceKind=IMAGE	urlAsWritten=static/img/logo.png	urlKind=RELATIVE	path=static/img/logo.png	query=	fragment=	isResolved=true	position=0	attributeName=srcset	startLine=27	startColumn=44
+referenceKind=IMAGE	urlAsWritten=static/img/logo@2x.png	urlKind=RELATIVE	path=static/img/logo@2x.png	query=	fragment=	isResolved=false	position=1	attributeName=srcset	startLine=27	startColumn=44
+referenceKind=LINK_RESOURCE	urlAsWritten=js/app.js	urlKind=RELATIVE	path=js/app.js	query=	fragment=	isResolved=true	position=0	attributeName=href	startLine=9	startColumn=35
+referenceKind=LINK_RESOURCE	urlAsWritten=static/img/favicon.png	urlKind=RELATIVE	path=static/img/favicon.png	query=	fragment=	isResolved=false	position=0	attributeName=href	startLine=8	startColumn=26
+referenceKind=MEDIA	urlAsWritten=media/clip.mp4	urlKind=RELATIVE	path=media/clip.mp4	query=	fragment=	isResolved=false	position=0	attributeName=src	startLine=39	startColumn=17
+referenceKind=MEDIA	urlAsWritten=static/img/poster.png	urlKind=RELATIVE	path=static/img/poster.png	query=	fragment=	isResolved=false	position=0	attributeName=poster	startLine=39	startColumn=41
+referenceKind=META_REFRESH	urlAsWritten=index.html	urlKind=RELATIVE	path=index.html	query=	fragment=	isResolved=true	position=0	attributeName=content	startLine=4	startColumn=37
+referenceKind=OTHER	urlAsWritten=#local	urlKind=FRAGMENT	path=	query=	fragment=local	isResolved=false	position=0	attributeName=xlink:href	startLine=38	startColumn=87
+referenceKind=OTHER	urlAsWritten=static/img/sprite.svg#icon	urlKind=RELATIVE	path=static/img/sprite.svg	query=	fragment=icon	isResolved=true	position=0	attributeName=href	startLine=38	startColumn=41
+referenceKind=REQUEST	urlAsWritten=/items	urlKind=ROOT_RELATIVE	path=/items	query=	fragment=	isResolved=false	position=0	attributeName=hx-get	startLine=1	startColumn=76
+referenceKind=SCRIPT	urlAsWritten=//cdn.example.com/x.js	urlKind=PROTOCOL_RELATIVE	path=//cdn.example.com/x.js	query=	fragment=	isResolved=false	position=0	attributeName=src	startLine=8	startColumn=14
+referenceKind=SCRIPT	urlAsWritten=/assets/main.js	urlKind=ROOT_RELATIVE	path=/assets/main.js	query=	fragment=	isResolved=true	position=0	attributeName=src	startLine=2	startColumn=20
+referenceKind=SCRIPT	urlAsWritten=https://cdn.example.com/lib.js	urlKind=ABSOLUTE	path=https://cdn.example.com/lib.js	query=	fragment=	isResolved=false	position=0	attributeName=src	startLine=11	startColumn=16
+referenceKind=SCRIPT	urlAsWritten=js/vendor.js	urlKind=RELATIVE	path=js/vendor.js	query=	fragment=	isResolved=true	position=0	attributeName=src	startLine=10	startColumn=16
+referenceKind=STYLESHEET	urlAsWritten=static/css/app.css	urlKind=RELATIVE	path=static/css/app.css	query=	fragment=	isResolved=true	position=0	attributeName=href	startLine=3	startColumn=54
+referenceKind=STYLESHEET	urlAsWritten=static/css/app.css	urlKind=RELATIVE	path=static/css/app.css	query=	fragment=	isResolved=true	position=0	attributeName=href	startLine=7	startColumn=32
diff --git a/parser/src/test-data/web/_golden/html-scripts.txt b/parser/src/test-data/web/_golden/html-scripts.txt
new file mode 100644
index 000000000..3d498d457
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-scripts.txt
@@ -0,0 +1,11 @@
+scriptKind=EXTERNAL	scriptType=CLASSIC	typeAsWritten=	src=//cdn.example.com/x.js	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=0	bodyStartColumn=0	bodyEndLine=0	bodyEndColumn=0	bodyLength=0
+scriptKind=EXTERNAL	scriptType=CLASSIC	typeAsWritten=	src=/assets/main.js	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=0	bodyStartColumn=0	bodyEndLine=0	bodyEndColumn=0	bodyLength=0
+scriptKind=EXTERNAL	scriptType=CLASSIC	typeAsWritten=	src=https://cdn.example.com/lib.js	isAsync=false	isDefer=true	isNoModule=false	bodyStartLine=0	bodyStartColumn=0	bodyEndLine=0	bodyEndColumn=0	bodyLength=0
+scriptKind=EXTERNAL	scriptType=CLASSIC	typeAsWritten=	src=js/vendor.js	isAsync=true	isDefer=false	isNoModule=false	bodyStartLine=0	bodyStartColumn=0	bodyEndLine=0	bodyEndColumn=0	bodyLength=0
+scriptKind=INLINE	scriptType=DATA_BLOCK	typeAsWritten=text/x-mathjax-config	src=	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=7	bodyStartColumn=38	bodyEndLine=7	bodyEndColumn=61	bodyLength=23
+scriptKind=INLINE	scriptType=IMPORTMAP	typeAsWritten=importmap	src=	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=15	bodyStartColumn=28	bodyEndLine=15	bodyEndColumn=67	bodyLength=39
+scriptKind=INLINE	scriptType=JSON	typeAsWritten=application/ld+json	src=	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=46	bodyStartColumn=38	bodyEndLine=46	bodyEndColumn=72	bodyLength=34
+scriptKind=INLINE	scriptType=MODULE	typeAsWritten=module	src=	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=41	bodyStartColumn=25	bodyEndLine=44	bodyEndColumn=3	bodyLength=55
+scriptKind=INLINE	scriptType=SPECULATION_RULES	typeAsWritten=speculationrules	src=	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=5	bodyStartColumn=33	bodyEndLine=5	bodyEndColumn=92	bodyLength=59
+scriptKind=INLINE	scriptType=TEMPLATE	typeAsWritten=text/x-template	src=	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=45	bodyStartColumn=47	bodyEndLine=45	bodyEndColumn=75	bodyLength=28
+scriptKind=INLINE	scriptType=TRANSPILED	typeAsWritten=text/babel	src=	isAsync=false	isDefer=false	isNoModule=false	bodyStartLine=6	bodyStartColumn=27	bodyEndLine=6	bodyEndColumn=42	bodyLength=15
diff --git a/parser/src/test-data/web/_golden/html-template-expressions.txt b/parser/src/test-data/web/_golden/html-template-expressions.txt
new file mode 100644
index 000000000..5aa125258
--- /dev/null
+++ b/parser/src/test-data/web/_golden/html-template-expressions.txt
@@ -0,0 +1,33 @@
+dialect=ALPINE	expressionKind=BINDING	directive=:class	argument=class	modifiers=	expressionText={ on: open }	calleeNames=	identifiers=open	declares=	position=3	startLine=1	startColumn=92
+dialect=ALPINE	expressionKind=CONDITION	directive=x-show	argument=	modifiers=	expressionText=open	calleeNames=	identifiers=open	declares=	position=2	startLine=11	startColumn=55
+dialect=ALPINE	expressionKind=DIRECTIVE	directive=x-data	argument=	modifiers=	expressionText={ open: false }	calleeNames=	identifiers=	declares=	position=0	startLine=1	startColumn=29
+dialect=ALPINE	expressionKind=DIRECTIVE	directive=x-data	argument=	modifiers=	expressionText={ open: false }	calleeNames=	identifiers=	declares=	position=0	startLine=11	startColumn=16
+dialect=ALPINE	expressionKind=EVENT_HANDLER	directive=@click	argument=click	modifiers=	expressionText=open = !open	calleeNames=	identifiers=open	declares=	position=1	startLine=1	startColumn=54
+dialect=ALPINE	expressionKind=REFERENCE	directive=x-ref	argument=	modifiers=	expressionText=panel	calleeNames=	identifiers=	declares=	position=1	startLine=11	startColumn=40
+dialect=ANGULAR	expressionKind=BINDING	directive=[class.on]	argument=class.on	modifiers=	expressionText=open	calleeNames=	identifiers=open	declares=	position=1	startLine=2	startColumn=38
+dialect=ANGULAR	expressionKind=CONDITION	directive=*ngIf	argument=	modifiers=	expressionText=items.length	calleeNames=	identifiers=items	declares=	position=0	startLine=2	startColumn=12
+dialect=ANGULAR	expressionKind=EVENT_HANDLER	directive=(click)	argument=click	modifiers=	expressionText=toggle()	calleeNames=toggle	identifiers=toggle	declares=	position=2	startLine=2	startColumn=53
+dialect=ANGULAR	expressionKind=LOOP	directive=*ngFor	argument=	modifiers=	expressionText=let item of items; let i = index	calleeNames=	identifiers=items	declares=item,i	position=0	startLine=3	startColumn=15
+dialect=ANGULAR	expressionKind=MODEL	directive=[(ngModel)]	argument=ngModel	modifiers=	expressionText=item.qty	calleeNames=	identifiers=item	declares=	position=1	startLine=3	startColumn=62
+dialect=ERB	expressionKind=DIRECTIVE	directive=	argument=	modifiers=	expressionText=if (user) {	calleeNames=	identifiers=	declares=	position=0	startLine=3	startColumn=3
+dialect=ERB	expressionKind=DIRECTIVE	directive=	argument=	modifiers=	expressionText=}	calleeNames=	identifiers=	declares=	position=1	startLine=3	startColumn=45
+dialect=ERB	expressionKind=INTERPOLATION	directive=	argument=	modifiers=	expressionText=user.name	calleeNames=	identifiers=	declares=	position=0	startLine=3	startColumn=24
+dialect=HANDLEBARS	expressionKind=DIRECTIVE	directive=	argument=	modifiers=	expressionText=#each items	calleeNames=	identifiers=	declares=	position=0	startLine=2	startColumn=23
+dialect=HANDLEBARS	expressionKind=DIRECTIVE	directive=	argument=	modifiers=	expressionText=/each	calleeNames=	identifiers=	declares=	position=2	startLine=2	startColumn=46
+dialect=HANDLEBARS	expressionKind=INTERPOLATION	directive=	argument=	modifiers=	expressionText=this	calleeNames=	identifiers=	declares=	position=1	startLine=2	startColumn=38
+dialect=HTMX	expressionKind=REQUEST	directive=hx-get	argument=get	modifiers=	expressionText=/items	calleeNames=	identifiers=	declares=	position=2	startLine=1	startColumn=76
+dialect=JINJA	expressionKind=DIRECTIVE	directive=	argument=	modifiers=	expressionText=block title	calleeNames=	identifiers=	declares=	position=0	startLine=2	startColumn=7
+dialect=JINJA	expressionKind=DIRECTIVE	directive=	argument=	modifiers=	expressionText=endblock	calleeNames=	identifiers=	declares=	position=1	startLine=2	startColumn=31
+dialect=JINJA	expressionKind=INTERPOLATION	directive=href	argument=href	modifiers=	expressionText=url_for('home')	calleeNames=	identifiers=	declares=	position=0	startLine=3	startColumn=12
+dialect=MUSTACHE	expressionKind=INTERPOLATION	directive=onclick	argument=onclick	modifiers=	expressionText=handler	calleeNames=	identifiers=	declares=	position=0	startLine=35	startColumn=43
+dialect=PHP	expressionKind=DIRECTIVE	directive=	argument=	modifiers=	expressionText=php echo $total;	calleeNames=	identifiers=	declares=	position=0	startLine=4	startColumn=3
+dialect=THYMELEAF	expressionKind=BINDING	directive=th:text	argument=text	modifiers=	expressionText=${title}	calleeNames=	identifiers=	declares=	position=0	startLine=3	startColumn=21
+dialect=VUE	expressionKind=BINDING	directive=:key	argument=key	modifiers=	expressionText=row.id	calleeNames=	identifiers=row	declares=	position=1	startLine=7	startColumn=38
+dialect=VUE	expressionKind=EVENT_HANDLER	directive=@keyup.enter	argument=keyup	modifiers=enter	expressionText=search()	calleeNames=search	identifiers=search	declares=	position=1	startLine=10	startColumn=45
+dialect=VUE	expressionKind=EVENT_HANDLER	directive=@select	argument=select	modifiers=	expressionText=pick(row)	calleeNames=pick	identifiers=pick,row	declares=	position=3	startLine=7	startColumn=74
+dialect=VUE	expressionKind=INTERPOLATION	directive=	argument=	modifiers=	expressionText=format(item.name)	calleeNames=format	identifiers=format,item	declares=	position=0	startLine=8	startColumn=35
+dialect=VUE	expressionKind=LOOP	directive=v-for	argument=	modifiers=	expressionText=row in rows	calleeNames=	identifiers=rows	declares=row	position=0	startLine=7	startColumn=19
+dialect=VUE	expressionKind=MODEL	directive=v-model	argument=	modifiers=	expressionText=selected	calleeNames=	identifiers=selected	declares=	position=2	startLine=7	startColumn=55
+dialect=VUE	expressionKind=MODEL	directive=v-model.trim	argument=	modifiers=trim	expressionText=query	calleeNames=	identifiers=query	declares=	position=0	startLine=10	startColumn=24
+dialect=VUE	expressionKind=SLOT	directive=#default	argument=default	modifiers=	expressionText={ item }	calleeNames=	identifiers=	declares=item	position=0	startLine=8	startColumn=25
+dialect=VUE	expressionKind=SLOT	directive=#list	argument=list	modifiers=	expressionText=	calleeNames=	identifiers=	declares=	position=3	startLine=2	startColumn=63
diff --git a/parser/src/test-data/web/fixture/app/package.json b/parser/src/test-data/web/fixture/app/package.json
new file mode 100644
index 000000000..530e6df25
--- /dev/null
+++ b/parser/src/test-data/web/fixture/app/package.json
@@ -0,0 +1 @@
+{ "name": "fixture-app", "version": "1.0.0" }
diff --git a/parser/src/test-data/web/fixture/app/public/assets/main.js b/parser/src/test-data/web/fixture/app/public/assets/main.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/fixture/app/templates/fragment.html b/parser/src/test-data/web/fixture/app/templates/fragment.html
new file mode 100644
index 000000000..d84b2033f
--- /dev/null
+++ b/parser/src/test-data/web/fixture/app/templates/fragment.html
@@ -0,0 +1,4 @@
+<div class="widget" x-data="{ open: false }" @click="open = !open" hx-get="/items" :class="{ on: open }">
+  <span class="label">{{#each items}}{{this}}{{/each}}</span>
+  <% if (user) { %><em><%= user.name %></em><% } %>
+</div>
diff --git a/parser/src/test-data/web/fixture/app/templates/layout.html b/parser/src/test-data/web/fixture/app/templates/layout.html
new file mode 100644
index 000000000..742c73b00
--- /dev/null
+++ b/parser/src/test-data/web/fixture/app/templates/layout.html
@@ -0,0 +1,4 @@
+<html xmlns:th="http://www.thymeleaf.org">
+<head><script src="/assets/main.js"></script></head>
+<body><div th:text="${title}" class="wrapper">x</div><p>${name}</p></body>
+</html>
diff --git a/parser/src/test-data/web/fixture/app/templates/mixed.html b/parser/src/test-data/web/fixture/app/templates/mixed.html
new file mode 100644
index 000000000..18100565c
--- /dev/null
+++ b/parser/src/test-data/web/fixture/app/templates/mixed.html
@@ -0,0 +1,12 @@
+@model Shop.Models.Cart
+<ul *ngIf="items.length" [class.on]="open" (click)="toggle()" #list>
+  <li *ngFor="let item of items; let i = index" [(ngModel)]="item.qty">@Model.Count items</li>
+  <?php echo $total; ?>
+</ul>
+<div id="vue-root">
+  <my-list v-for="row in rows" :key="row.id" v-model="selected" @select="pick(row)">
+    <template #default="{ item }">{{ format(item.name) }}</template>
+  </my-list>
+  <input v-model.trim="query" @keyup.enter="search()">
+  <div x-data="{ open: false }" x-ref="panel" x-show="open">alpine</div>
+</div>
diff --git a/parser/src/test-data/web/fixture/docs/apidocs/element-list b/parser/src/test-data/web/fixture/docs/apidocs/element-list
new file mode 100644
index 000000000..b80f0bd60
--- /dev/null
+++ b/parser/src/test-data/web/fixture/docs/apidocs/element-list
@@ -0,0 +1 @@
+app
diff --git a/parser/src/test-data/web/fixture/docs/apidocs/index.html b/parser/src/test-data/web/fixture/docs/apidocs/index.html
new file mode 100644
index 000000000..34e348891
--- /dev/null
+++ b/parser/src/test-data/web/fixture/docs/apidocs/index.html
@@ -0,0 +1 @@
+<html><body><p class="generated">javadoc</p></body></html>
diff --git a/parser/src/test-data/web/fixture/site/index.html b/parser/src/test-data/web/fixture/site/index.html
new file mode 100644
index 000000000..f20f8896d
--- /dev/null
+++ b/parser/src/test-data/web/fixture/site/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Fixture site</title>
+  <base href="/">
+  <link rel="stylesheet" href="static/css/app.css">
+  <link rel="icon" href="static/img/favicon.png">
+  <link rel="modulepreload" href="js/app.js">
+  <script src="js/vendor.js" async></script>
+  <script src="https://cdn.example.com/lib.js" defer></script>
+  <style>
+    .hero { color: var(--brand); background: url(static/img/hero.png) }
+  </style>
+  <script type="importmap">{ "imports": { "lib": "./js/lib.js" } }</script>
+</head>
+<body class="home dark">
+  <nav class="nav">
+    <ul>
+      <li class="item"><a href="/about#team" onclick="track('nav', this); return go()">About</a></li>
+      <li class="item hidden"><a href="page.html?x=1#top">Page</a></li>
+      <li class="item"><a href="mailto:hi@example.com">Mail</a></li>
+    </ul>
+  </nav>
+  <div id="main" class="card card--wide" style="color: var(--brand); margin:0" data-role="main" aria-label="Main" role="region">
+    <p>Hello<p>unclosed paragraph
+    <img src="static/img/logo.png" srcset="static/img/logo.png 1x, static/img/logo@2x.png 2x" alt="">
+    <picture><source srcset="static/img/hero.webp" type="image/webp"><img src="static/img/hero.png" alt="hero"></picture>
+    <form action="/submit" method="post">
+      <label for="q">Query</label><input id="q" name="q" type="text" disabled>
+      <button formaction="/alt" onclick="if (confirm('?')) remove(1)">Go</button>
+      <button type="submit" onclick="app.submit(event)">Send</button>
+    </form>
+    <a href="javascript:toggle()">toggle</a>
+    <a href="javascript:void(0)" onclick="{{ handler }}">template handler</a>
+    <iframe src="partials/frame.html"></iframe>
+    <template><span class="tpl">t</span></template>
+    <svg viewBox="0 0 10 10"><use href="static/img/sprite.svg#icon"/><use xlink:href="#local"/></svg>
+    <video src="media/clip.mp4" poster="static/img/poster.png"></video>
+  </div>
+  <script type="module">
+    import { init } from './js/app.js';
+    init();
+  </script>
+  <script type="text/x-template" id="tpl-row"><tr><td>{{ name }}</td></tr></script>
+  <script type="application/ld+json">{"@context": "https://schema.org"}</script>
+</body>
+</html>
diff --git a/parser/src/test-data/web/fixture/site/js/app.js b/parser/src/test-data/web/fixture/site/js/app.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/fixture/site/js/vendor.js b/parser/src/test-data/web/fixture/site/js/vendor.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/fixture/site/page.html b/parser/src/test-data/web/fixture/site/page.html
new file mode 100644
index 000000000..9595250cc
--- /dev/null
+++ b/parser/src/test-data/web/fixture/site/page.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head><title>Second</title><link rel=stylesheet href=static/css/app.css>
+<meta http-equiv="refresh" content="5; url=index.html">
+<script type="speculationrules">{"prerender": [{"source": "list", "urls": ["index.html"]}]}</script>
+<script type="text/babel">const x = <b/>;</script>
+<script type="text/x-mathjax-config">MathJax.Hub.Config({});</script>
+<script src="//cdn.example.com/x.js"></script></head>
+<body onload="start()">
+<h1 id=top class=title>Second</h1>
+<img src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" alt="">
+<input list="choices" form="f" type="text"><datalist id="choices"></datalist>
+<a href="">self</a>
+<p>A page with an unclosed <b>tag and a </span>stray end tag.</p>
+<div id="dup" id="again" class="x"></div>
+<table><tr><td>implied tbody</td></tr></table>
+</body>
+</html>
diff --git a/parser/src/test-data/web/fixture/site/partials/frame.html b/parser/src/test-data/web/fixture/site/partials/frame.html
new file mode 100644
index 000000000..323136fbe
--- /dev/null
+++ b/parser/src/test-data/web/fixture/site/partials/frame.html
@@ -0,0 +1,6 @@
+<div class="partial">
+  <h2>{% block title %}Partial{% endblock %}</h2>
+  <a href="{{ url_for('home') }}" class="link">Home</a>
+  <span style="color: ; margin: 0">bad style</span>
+  <button onclick="save(">broken handler</button>
+</div>
diff --git a/parser/src/test-data/web/fixture/site/static/css/app.css b/parser/src/test-data/web/fixture/site/static/css/app.css
new file mode 100644
index 000000000..dd2d582c4
--- /dev/null
+++ b/parser/src/test-data/web/fixture/site/static/css/app.css
@@ -0,0 +1,20 @@
+@charset "utf-8";
+/* theme tokens */
+@import url("base.css") layer(base);
+@import "missing.css";
+@layer base, components;
+:root { --gap: 8px; --brand: #09f; }
+.nav > li.item:not(.hidden) a[href^="http" i]:hover::after { color: var(--brand, red); gap: var(--gap) }
+#main .card, .card--wide, ul li:nth-child(2n of .item) { background: url(../img/bg.png) no-repeat; animation: spin 1s linear infinite; font-family: "Inter", Segoe UI, sans-serif }
+@media (min-width: 40em) { .card { padding: calc(var(--gap) * 2) !important } }
+@keyframes spin { from { transform: rotate(0) } 50% { opacity: .5 } to { transform: rotate(1turn) } }
+@font-face { font-family: "Inter"; src: url(/fonts/inter.woff2) format("woff2") }
+@supports (display: grid) { .grid { display: grid } }
+@container sidebar (min-width: 400px) { .card { gap: 1rem } }
+.sidebar { container-name: sidebar; container-type: inline-size }
+.a { color: blue; .b & { color: red } &:hover { color: green } }
+.broken { color: ; }
+.title::before, .title:before { content: "" }
+* { box-sizing: border-box }
+h1 + p ~ em { margin: 0 }
+col || td { margin: 0 }
diff --git a/parser/src/test-data/web/fixture/site/static/css/base.css b/parser/src/test-data/web/fixture/site/static/css/base.css
new file mode 100644
index 000000000..7493ecf6a
--- /dev/null
+++ b/parser/src/test-data/web/fixture/site/static/css/base.css
@@ -0,0 +1 @@
+body { margin: 0; -webkit-font-smoothing: antialiased }
diff --git a/parser/src/test-data/web/fixture/site/static/css/empty.css b/parser/src/test-data/web/fixture/site/static/css/empty.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/fixture/site/static/css/vendor.min.css b/parser/src/test-data/web/fixture/site/static/css/vendor.min.css
new file mode 100644
index 000000000..d030db289
--- /dev/null
+++ b/parser/src/test-data/web/fixture/site/static/css/vendor.min.css
@@ -0,0 +1 @@
+.a{color:red}.b{color:blue}.c{margin:0;padding:0}
diff --git a/parser/src/test-data/web/fixture/site/static/img/hero.png b/parser/src/test-data/web/fixture/site/static/img/hero.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/fixture/site/static/img/logo.png b/parser/src/test-data/web/fixture/site/static/img/logo.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/fixture/site/static/img/sprite.svg b/parser/src/test-data/web/fixture/site/static/img/sprite.svg
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/fixture/site/vendor/sassy.css b/parser/src/test-data/web/fixture/site/vendor/sassy.css
new file mode 100644
index 000000000..14a04a99f
--- /dev/null
+++ b/parser/src/test-data/web/fixture/site/vendor/sassy.css
@@ -0,0 +1,3 @@
+$primary: #333;
+@mixin flex { display: flex; }
+.x { color: $primary; @include flex; }
diff --git a/parser/src/test-data/web/torture/css/alt.css b/parser/src/test-data/web/torture/css/alt.css
new file mode 100644
index 000000000..97121e944
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/alt.css
@@ -0,0 +1 @@
+.alt-only { color: red }
diff --git a/parser/src/test-data/web/torture/css/app.css b/parser/src/test-data/web/torture/css/app.css
new file mode 100644
index 000000000..04e4d5d50
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/app.css
@@ -0,0 +1,237 @@
+@charset "utf-8";
+/* C01 import chain: app -> tokens -> theme; layered, conditional, missing, absolute, in a layer and with media */
+@import url("tokens.css") layer(tokens);
+@import "layers.css";
+@import url(nested.css) supports(selector(&)) screen and (min-width: 1px);
+@import "missing.css";
+@import url("https://fonts.example.com/inter.css");
+@import "strings.css" layer(vendor.strings);
+@import "fonts.css";
+@import 'selectors.css';
+@import url( "gaps.css" );
+@import "app.css";                      /* self import: a cycle for the recursive join */
+
+@layer tokens, base, components, utilities;
+@namespace svg url(http://www.w3.org/2000/svg);
+@namespace url(http://www.w3.org/1999/xhtml);
+
+/* C02 the class joins the HTML fixtures are built around */
+.card { color: var(--brand); }
+.card--wide { max-width: var(--wide, 60rem); }
+.is-active { outline: 1px solid var(--brand, var(--fallback-brand, red)); }
+.nav > a[href^="#"] { color: var(--anchor); }
+.upper { color: red }                   /* HTML has Upper: no join by case */
+.SHOUT { color: red }                   /* HTML has SHOUT via CLASS="SHOUT": joins */
+#loud { color: red }                    /* HTML has ID="LOUD": no join by case */
+#LOUD { color: red }
+#padded-id { color: red }               /* HTML id="  padded-id  ": trimmed on the element row */
+.dup { color: red }
+.a\&b { color: red }                    /* HTML class a&amp;b decodes to a&b */
+.tpl-class, .hbs-class, .ko-class, .srcdoc-class { color: red }   /* classes written only inside script/srcdoc text */
+.in-template, .in-template-style { color: red }
+.noscript-class, .ie-only, .commented-out, .in-jinja-comment { color: red }
+.js-ready, .open { color: red }         /* classes only a script adds */
+.never-used-anywhere { color: red }     /* dead CSS */
+.div-in-p, .li-one, .li-two, .cell, .after-self-closing-div, .unclosed-at-eof { color: red }
+.custom, .customized-builtin, .hidden-attr, .dup-attr { color: red }
+.static-class, .item, .wrapper, .ng-static, .vue-static, .alpine-static, .htmx-static { color: red }
+.xhtml-class, .cdata-class, .after-xml-self-closing { color: red }
+.in-foreign, .in-annotation, .math-class, .nested-rect, .svg-rect, .use-class, .symbol-class { color: red }
+.popover, .light-card, .shadow-only, .closed-only, .slotted-item, .default-slotted, .inert-class, .deep { color: red }
+
+/* C03 structural selectors: the HTML writes no tbody, no html, no head, no body */
+table > tbody > tr > td.cell { color: red }
+table tr td.cell { color: blue }
+html > body > div.card { color: red }
+body > .card { color: red }
+ul > li.li-two { color: red }
+p > div.div-in-p { color: red }
+div > span.after-self-closing-div { color: red }
+a a { color: red }
+
+/* C04 functional pseudo-classes: parts at depth > 0 */
+:is(.card, .nav) .item { color: red }
+:where(.card) .item { color: red }
+.card:not(.is-active, #section-one) { color: red }
+.card:has(> .item:hover, + .nav) { color: red }
+li:nth-child(2n + 1 of .li-one, .li-two) { color: red }
+:nth-last-child(-n+2) { color: red }
+:not(:is(.a, .b)) { color: red }
+.card:is(:hover, :focus-visible):not([disabled]) { color: red }
+a:not([href]) { color: red }
+:host(.featured) { color: red }
+:host-context(.dark) .card { color: red }
+::slotted(.slotted-item) { color: red }
+my-card::part(title) { color: red }
+input::placeholder, ::selection, ::backdrop, ::marker, ::file-selector-button, ::highlight(h), ::view-transition-group(root), ::cue(v[voice="a"]) { color: red }
+:lang(en), :dir(rtl), :state(checked), :focus-within, :target, :empty, :root, :scope, :defined, :popover-open, :modal, :user-invalid, :placeholder-shown, :indeterminate, :read-write, :autofill, :fullscreen, :picture-in-picture, :playing, :paused, :link, :any-link, :visited, :local-link, :target-within, :current, :past, :future, :active-view-transition { color: red }
+
+/* C05 attribute selectors: every matcher, flags, quoted/unquoted, namespaced */
+[data-page] { color: red }
+[data-page="index"] { color: red }
+[data-page=index] { color: red }
+[class~="card"] { color: red }
+[class*="card"] { color: red }
+[class^=card] { color: red }
+[class$="wide" i] { color: red }
+[class$="wide" s] { color: red }
+[id|="section"] { color: red }
+[href$=".pdf" i] { color: red }
+[xlink|href] { color: red }
+[*|href] { color: red }
+[|href] { color: red }
+a[target][href][rel] { color: red }
+[aria-labelledby~="section-one"] { color: red }
+[style*="var("] { color: red }
+input[type="IMAGE" i] { color: red }
+
+/* C06 combinators and universal/namespace selectors */
+* { box-sizing: border-box }
+*|* { color: red }
+svg|* { color: red }
+|rect { color: red }
+svg|rect.svg-rect { color: red }
+h2 + p ~ em > b { color: red }
+.a>.b+.c~.d { color: red }
+col || td { color: red }
+.a   .b	.c
+.d { color: red }
+.card/* comment in a selector */.is-active { color: red }
+.card, /* comment between selectors */ .nav, { color: red }
+.card,, .nav { color: red }
+.card .  broken { color: red }
+.123 { color: red }
+.-valid-dash { color: red }
+.--double-dash { color: red }
+._underscore { color: red }
+#1digit { color: red }
+.a.b.c.d.e.f.g.h.i.j.k { color: red }
+.a#b.c#d { color: red }
+div#b.c[x]:hover::before { color: red }
+DIV.Card:HOVER::BEFORE { color: red }
+.before:before, .after::after, ::before, :after, ::first-line, ::first-letter, :first-letter { color: red }
+
+/* C07 the cascade torture: same element, same property, many sources */
+#section-one { color: rgb(1, 1, 1) }                              /* (1,0,0) */
+.card.card--wide.is-active { color: rgb(2, 2, 2) }                /* (0,3,0) */
+section.card { color: rgb(3, 3, 3) !important }                   /* important beats everything unlayered */
+@layer base { .card { color: rgb(4, 4, 4) } section#section-one { color: rgb(5, 5, 5) !important } }
+@layer utilities { .card { color: rgb(6, 6, 6) } }
+@layer { .card { color: rgb(7, 7, 7) } }                          /* anonymous layer */
+.card { color: rgb(8, 8, 8) }
+.card { color: rgb(9, 9, 9) }                                     /* later in source order wins over the one above */
+:where(.card.card--wide.is-active#section-one) { color: rgb(10, 10, 10) }   /* (0,0,0) */
+:is(#section-one, .card) { color: rgb(11, 11, 11) }               /* (1,0,0) via :is */
+.card:not(#nope) { color: rgb(12, 12, 12) }                       /* (1,1,0) via :not */
+[id="section-one"] { color: rgb(13, 13, 13) }                     /* (0,1,0) attribute, not id */
+@media screen { .card { color: rgb(14, 14, 14) } }
+@media print { .card { color: rgb(15, 15, 15) } }
+@supports (color: red) { .card { color: rgb(16, 16, 16) } }
+@supports not (display: grid) { .card { color: rgb(17, 17, 17) } }
+@container sidebar (min-width: 1px) { .card { color: rgb(18, 18, 18) } }
+@scope (.card) to (.item) { :scope { color: rgb(19, 19, 19) } .is-active { color: rgb(20, 20, 20) } }
+@media (400px <= width <= 700px) { .card { color: rgb(21, 21, 21) } }
+@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .card { color: rgb(22, 22, 22) } }
+@media (prefers-color-scheme: dark) { :root { --brand: black } .card { color: var(--brand) } }
+@starting-style { .card { opacity: 0 } }
+@page :first { margin: 1in }
+@page { @top-center { content: "x" } }
+@font-feature-values Inter { @styleset { nice-style: 12 } }
+@counter-style thumbs { system: cyclic; symbols: "👍"; suffix: " " }
+@position-try --fallback { top: anchor(bottom) }
+@view-transition { navigation: auto }
+@-moz-document url-prefix() { .card { color: red } }
+@-webkit-keyframes vendor-spin { from { opacity: 0 } to { opacity: 1 } }
+@media screen { @supports (display: grid) { @layer components { .card .item { color: rgb(23, 23, 23) } } } }
+
+/* C08 properties: custom, vendor, hacks, important variants, duplicates, uppercase, empty */
+.props {
+  --Brand: red;                 /* custom properties are case-sensitive: --Brand is not --brand */
+  --brand: blue;
+  --empty:;
+  --with-brace: { a: b };
+  --json: [1, 2, 3];
+  --url: url(img/bg.png);
+  --nested: var(--brand, var(--Brand, var(--missing, red)));
+  color: var(--Brand);
+  background: var(--url);
+  -webkit-transition: all 1s;
+  -moz-transition: all 1s;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000');
+  *zoom: 1;
+  _height: 1px;
+  color: red\9;
+  width: expression(document.body.clientWidth > 800 ? "800px" : "auto");
+  margin: 0 ! important;
+  padding: 0!important;
+  color: red !IMPORTANT;
+  color: red;;
+  color: ;
+  : red;
+  color red;
+  COLOR: RED;
+  Color: Red;
+  display: grid; display: -ms-grid;
+  grid-template-areas: "a b" "c d";
+  content: "a; } b { c: d }";          /* string with declaration-ending characters */
+  content: "var(--not-a-var) url(not-a-url.png)";   /* string that looks like functions */
+  background: url( "img/bg.png" );
+  background: url('img/bg.png?v=1#frag');
+  background: url(img/bg.png?v=1#frag);
+  background: url(  img/bg.png  );
+  background: url("img/space name.png");
+  background: url(img/space\ name.png);
+  background: url(data:image/png;base64,iVBORw0KGgo=);
+  background: url(//cdn.example.com/x.png);
+  background: url(/img/bg.png);
+  background: url(../img/bg.png);
+  background: url(#inline-ref);
+  background: url();
+  background: url(""), url(img/bg.png), url(img/missing.png);
+  background: image-set("img/hero.png" 1x, "img/hero@2x.png" 2x);
+  background: -webkit-image-set(url(img/hero.png) 1x);
+  background: src("img/bg.png");
+  mask: url(img/sprite.svg#mask);
+  cursor: url(img/cursor.cur) 2 2, url(img/cursor.cur), pointer;
+  list-style: url(img/bg.png);
+  border-image: url(img/bg.png) 30 round;
+  background: URL(img/bg.png);
+  color: color-mix(in srgb, var(--brand) 50%, var(--Brand));
+  width: calc(100% - var(--gap, 8px) * 2);
+  padding: env(safe-area-inset-top, var(--pad));
+  font: italic bold 12px/30px Inter, "Segoe UI", serif;      /* font SHORTHAND: family names at the end */
+  font: 12px system-ui;
+  font: menu;
+  font-family: Inter;
+  font-family: "Inter", 'Roboto Mono', Segoe UI, ui-sans-serif, sans-serif;
+  font-family: inherit;
+  font-family: var(--font);
+  animation: spin 1s linear infinite, fade 2s;
+  animation: 1s ease-in-out infinite reverse spin;
+  animation: 2s steps(4, end) slide;
+  animation: "quoted-name" 1s;
+  animation: none;
+  animation: linear 1s;                /* linear is a keyword, not a name */
+  animation: var(--anim) 1s;
+  animation-name: spin, fade, missing-keyframes, vendor-spin;
+  animation-name: none;
+  animation-name: ease;                /* a keyframes named like a keyword */
+  container: sidebar / inline-size;
+  container: a b / size;
+  container-name: sidebar other;
+  container-name: none;
+  container-type: inline-size;
+  transition: color var(--duration) var(--easing, ease);
+  will-change: transform;
+  content: counter(item) ". ";
+  grid-area: header;
+  position-try-fallbacks: --fallback;
+  anchor-name: --anchor;
+  position-anchor: --anchor;
+  view-transition-name: hero;
+  offset-path: url(#motion-path);
+  clip-path: url(img/sprite.svg#clip);
+  shape-outside: url(img/bg.png);
+  src: url(fonts/inter.woff2);         /* src outside @font-face */
+}
diff --git a/parser/src/test-data/web/torture/css/base.css b/parser/src/test-data/web/torture/css/base.css
new file mode 100644
index 000000000..9a0e91a38
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/base.css
@@ -0,0 +1,2 @@
+.base-class { color: red }
+.card { color: rgb(100,100,100) }
diff --git a/parser/src/test-data/web/torture/css/big.css b/parser/src/test-data/web/torture/css/big.css
new file mode 100644
index 000000000..217950d0f
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/big.css
@@ -0,0 +1,1500 @@
+.big-0 { color: var(--brand); background: url(img/bg.png) }
+.big-1 { color: var(--brand); background: url(img/bg.png) }
+.big-2 { color: var(--brand); background: url(img/bg.png) }
+.big-3 { color: var(--brand); background: url(img/bg.png) }
+.big-4 { color: var(--brand); background: url(img/bg.png) }
+.big-5 { color: var(--brand); background: url(img/bg.png) }
+.big-6 { color: var(--brand); background: url(img/bg.png) }
+.big-7 { color: var(--brand); background: url(img/bg.png) }
+.big-8 { color: var(--brand); background: url(img/bg.png) }
+.big-9 { color: var(--brand); background: url(img/bg.png) }
+.big-10 { color: var(--brand); background: url(img/bg.png) }
+.big-11 { color: var(--brand); background: url(img/bg.png) }
+.big-12 { color: var(--brand); background: url(img/bg.png) }
+.big-13 { color: var(--brand); background: url(img/bg.png) }
+.big-14 { color: var(--brand); background: url(img/bg.png) }
+.big-15 { color: var(--brand); background: url(img/bg.png) }
+.big-16 { color: var(--brand); background: url(img/bg.png) }
+.big-17 { color: var(--brand); background: url(img/bg.png) }
+.big-18 { color: var(--brand); background: url(img/bg.png) }
+.big-19 { color: var(--brand); background: url(img/bg.png) }
+.big-20 { color: var(--brand); background: url(img/bg.png) }
+.big-21 { color: var(--brand); background: url(img/bg.png) }
+.big-22 { color: var(--brand); background: url(img/bg.png) }
+.big-23 { color: var(--brand); background: url(img/bg.png) }
+.big-24 { color: var(--brand); background: url(img/bg.png) }
+.big-25 { color: var(--brand); background: url(img/bg.png) }
+.big-26 { color: var(--brand); background: url(img/bg.png) }
+.big-27 { color: var(--brand); background: url(img/bg.png) }
+.big-28 { color: var(--brand); background: url(img/bg.png) }
+.big-29 { color: var(--brand); background: url(img/bg.png) }
+.big-30 { color: var(--brand); background: url(img/bg.png) }
+.big-31 { color: var(--brand); background: url(img/bg.png) }
+.big-32 { color: var(--brand); background: url(img/bg.png) }
+.big-33 { color: var(--brand); background: url(img/bg.png) }
+.big-34 { color: var(--brand); background: url(img/bg.png) }
+.big-35 { color: var(--brand); background: url(img/bg.png) }
+.big-36 { color: var(--brand); background: url(img/bg.png) }
+.big-37 { color: var(--brand); background: url(img/bg.png) }
+.big-38 { color: var(--brand); background: url(img/bg.png) }
+.big-39 { color: var(--brand); background: url(img/bg.png) }
+.big-40 { color: var(--brand); background: url(img/bg.png) }
+.big-41 { color: var(--brand); background: url(img/bg.png) }
+.big-42 { color: var(--brand); background: url(img/bg.png) }
+.big-43 { color: var(--brand); background: url(img/bg.png) }
+.big-44 { color: var(--brand); background: url(img/bg.png) }
+.big-45 { color: var(--brand); background: url(img/bg.png) }
+.big-46 { color: var(--brand); background: url(img/bg.png) }
+.big-47 { color: var(--brand); background: url(img/bg.png) }
+.big-48 { color: var(--brand); background: url(img/bg.png) }
+.big-49 { color: var(--brand); background: url(img/bg.png) }
+.big-50 { color: var(--brand); background: url(img/bg.png) }
+.big-51 { color: var(--brand); background: url(img/bg.png) }
+.big-52 { color: var(--brand); background: url(img/bg.png) }
+.big-53 { color: var(--brand); background: url(img/bg.png) }
+.big-54 { color: var(--brand); background: url(img/bg.png) }
+.big-55 { color: var(--brand); background: url(img/bg.png) }
+.big-56 { color: var(--brand); background: url(img/bg.png) }
+.big-57 { color: var(--brand); background: url(img/bg.png) }
+.big-58 { color: var(--brand); background: url(img/bg.png) }
+.big-59 { color: var(--brand); background: url(img/bg.png) }
+.big-60 { color: var(--brand); background: url(img/bg.png) }
+.big-61 { color: var(--brand); background: url(img/bg.png) }
+.big-62 { color: var(--brand); background: url(img/bg.png) }
+.big-63 { color: var(--brand); background: url(img/bg.png) }
+.big-64 { color: var(--brand); background: url(img/bg.png) }
+.big-65 { color: var(--brand); background: url(img/bg.png) }
+.big-66 { color: var(--brand); background: url(img/bg.png) }
+.big-67 { color: var(--brand); background: url(img/bg.png) }
+.big-68 { color: var(--brand); background: url(img/bg.png) }
+.big-69 { color: var(--brand); background: url(img/bg.png) }
+.big-70 { color: var(--brand); background: url(img/bg.png) }
+.big-71 { color: var(--brand); background: url(img/bg.png) }
+.big-72 { color: var(--brand); background: url(img/bg.png) }
+.big-73 { color: var(--brand); background: url(img/bg.png) }
+.big-74 { color: var(--brand); background: url(img/bg.png) }
+.big-75 { color: var(--brand); background: url(img/bg.png) }
+.big-76 { color: var(--brand); background: url(img/bg.png) }
+.big-77 { color: var(--brand); background: url(img/bg.png) }
+.big-78 { color: var(--brand); background: url(img/bg.png) }
+.big-79 { color: var(--brand); background: url(img/bg.png) }
+.big-80 { color: var(--brand); background: url(img/bg.png) }
+.big-81 { color: var(--brand); background: url(img/bg.png) }
+.big-82 { color: var(--brand); background: url(img/bg.png) }
+.big-83 { color: var(--brand); background: url(img/bg.png) }
+.big-84 { color: var(--brand); background: url(img/bg.png) }
+.big-85 { color: var(--brand); background: url(img/bg.png) }
+.big-86 { color: var(--brand); background: url(img/bg.png) }
+.big-87 { color: var(--brand); background: url(img/bg.png) }
+.big-88 { color: var(--brand); background: url(img/bg.png) }
+.big-89 { color: var(--brand); background: url(img/bg.png) }
+.big-90 { color: var(--brand); background: url(img/bg.png) }
+.big-91 { color: var(--brand); background: url(img/bg.png) }
+.big-92 { color: var(--brand); background: url(img/bg.png) }
+.big-93 { color: var(--brand); background: url(img/bg.png) }
+.big-94 { color: var(--brand); background: url(img/bg.png) }
+.big-95 { color: var(--brand); background: url(img/bg.png) }
+.big-96 { color: var(--brand); background: url(img/bg.png) }
+.big-97 { color: var(--brand); background: url(img/bg.png) }
+.big-98 { color: var(--brand); background: url(img/bg.png) }
+.big-99 { color: var(--brand); background: url(img/bg.png) }
+.big-100 { color: var(--brand); background: url(img/bg.png) }
+.big-101 { color: var(--brand); background: url(img/bg.png) }
+.big-102 { color: var(--brand); background: url(img/bg.png) }
+.big-103 { color: var(--brand); background: url(img/bg.png) }
+.big-104 { color: var(--brand); background: url(img/bg.png) }
+.big-105 { color: var(--brand); background: url(img/bg.png) }
+.big-106 { color: var(--brand); background: url(img/bg.png) }
+.big-107 { color: var(--brand); background: url(img/bg.png) }
+.big-108 { color: var(--brand); background: url(img/bg.png) }
+.big-109 { color: var(--brand); background: url(img/bg.png) }
+.big-110 { color: var(--brand); background: url(img/bg.png) }
+.big-111 { color: var(--brand); background: url(img/bg.png) }
+.big-112 { color: var(--brand); background: url(img/bg.png) }
+.big-113 { color: var(--brand); background: url(img/bg.png) }
+.big-114 { color: var(--brand); background: url(img/bg.png) }
+.big-115 { color: var(--brand); background: url(img/bg.png) }
+.big-116 { color: var(--brand); background: url(img/bg.png) }
+.big-117 { color: var(--brand); background: url(img/bg.png) }
+.big-118 { color: var(--brand); background: url(img/bg.png) }
+.big-119 { color: var(--brand); background: url(img/bg.png) }
+.big-120 { color: var(--brand); background: url(img/bg.png) }
+.big-121 { color: var(--brand); background: url(img/bg.png) }
+.big-122 { color: var(--brand); background: url(img/bg.png) }
+.big-123 { color: var(--brand); background: url(img/bg.png) }
+.big-124 { color: var(--brand); background: url(img/bg.png) }
+.big-125 { color: var(--brand); background: url(img/bg.png) }
+.big-126 { color: var(--brand); background: url(img/bg.png) }
+.big-127 { color: var(--brand); background: url(img/bg.png) }
+.big-128 { color: var(--brand); background: url(img/bg.png) }
+.big-129 { color: var(--brand); background: url(img/bg.png) }
+.big-130 { color: var(--brand); background: url(img/bg.png) }
+.big-131 { color: var(--brand); background: url(img/bg.png) }
+.big-132 { color: var(--brand); background: url(img/bg.png) }
+.big-133 { color: var(--brand); background: url(img/bg.png) }
+.big-134 { color: var(--brand); background: url(img/bg.png) }
+.big-135 { color: var(--brand); background: url(img/bg.png) }
+.big-136 { color: var(--brand); background: url(img/bg.png) }
+.big-137 { color: var(--brand); background: url(img/bg.png) }
+.big-138 { color: var(--brand); background: url(img/bg.png) }
+.big-139 { color: var(--brand); background: url(img/bg.png) }
+.big-140 { color: var(--brand); background: url(img/bg.png) }
+.big-141 { color: var(--brand); background: url(img/bg.png) }
+.big-142 { color: var(--brand); background: url(img/bg.png) }
+.big-143 { color: var(--brand); background: url(img/bg.png) }
+.big-144 { color: var(--brand); background: url(img/bg.png) }
+.big-145 { color: var(--brand); background: url(img/bg.png) }
+.big-146 { color: var(--brand); background: url(img/bg.png) }
+.big-147 { color: var(--brand); background: url(img/bg.png) }
+.big-148 { color: var(--brand); background: url(img/bg.png) }
+.big-149 { color: var(--brand); background: url(img/bg.png) }
+.big-150 { color: var(--brand); background: url(img/bg.png) }
+.big-151 { color: var(--brand); background: url(img/bg.png) }
+.big-152 { color: var(--brand); background: url(img/bg.png) }
+.big-153 { color: var(--brand); background: url(img/bg.png) }
+.big-154 { color: var(--brand); background: url(img/bg.png) }
+.big-155 { color: var(--brand); background: url(img/bg.png) }
+.big-156 { color: var(--brand); background: url(img/bg.png) }
+.big-157 { color: var(--brand); background: url(img/bg.png) }
+.big-158 { color: var(--brand); background: url(img/bg.png) }
+.big-159 { color: var(--brand); background: url(img/bg.png) }
+.big-160 { color: var(--brand); background: url(img/bg.png) }
+.big-161 { color: var(--brand); background: url(img/bg.png) }
+.big-162 { color: var(--brand); background: url(img/bg.png) }
+.big-163 { color: var(--brand); background: url(img/bg.png) }
+.big-164 { color: var(--brand); background: url(img/bg.png) }
+.big-165 { color: var(--brand); background: url(img/bg.png) }
+.big-166 { color: var(--brand); background: url(img/bg.png) }
+.big-167 { color: var(--brand); background: url(img/bg.png) }
+.big-168 { color: var(--brand); background: url(img/bg.png) }
+.big-169 { color: var(--brand); background: url(img/bg.png) }
+.big-170 { color: var(--brand); background: url(img/bg.png) }
+.big-171 { color: var(--brand); background: url(img/bg.png) }
+.big-172 { color: var(--brand); background: url(img/bg.png) }
+.big-173 { color: var(--brand); background: url(img/bg.png) }
+.big-174 { color: var(--brand); background: url(img/bg.png) }
+.big-175 { color: var(--brand); background: url(img/bg.png) }
+.big-176 { color: var(--brand); background: url(img/bg.png) }
+.big-177 { color: var(--brand); background: url(img/bg.png) }
+.big-178 { color: var(--brand); background: url(img/bg.png) }
+.big-179 { color: var(--brand); background: url(img/bg.png) }
+.big-180 { color: var(--brand); background: url(img/bg.png) }
+.big-181 { color: var(--brand); background: url(img/bg.png) }
+.big-182 { color: var(--brand); background: url(img/bg.png) }
+.big-183 { color: var(--brand); background: url(img/bg.png) }
+.big-184 { color: var(--brand); background: url(img/bg.png) }
+.big-185 { color: var(--brand); background: url(img/bg.png) }
+.big-186 { color: var(--brand); background: url(img/bg.png) }
+.big-187 { color: var(--brand); background: url(img/bg.png) }
+.big-188 { color: var(--brand); background: url(img/bg.png) }
+.big-189 { color: var(--brand); background: url(img/bg.png) }
+.big-190 { color: var(--brand); background: url(img/bg.png) }
+.big-191 { color: var(--brand); background: url(img/bg.png) }
+.big-192 { color: var(--brand); background: url(img/bg.png) }
+.big-193 { color: var(--brand); background: url(img/bg.png) }
+.big-194 { color: var(--brand); background: url(img/bg.png) }
+.big-195 { color: var(--brand); background: url(img/bg.png) }
+.big-196 { color: var(--brand); background: url(img/bg.png) }
+.big-197 { color: var(--brand); background: url(img/bg.png) }
+.big-198 { color: var(--brand); background: url(img/bg.png) }
+.big-199 { color: var(--brand); background: url(img/bg.png) }
+.big-200 { color: var(--brand); background: url(img/bg.png) }
+.big-201 { color: var(--brand); background: url(img/bg.png) }
+.big-202 { color: var(--brand); background: url(img/bg.png) }
+.big-203 { color: var(--brand); background: url(img/bg.png) }
+.big-204 { color: var(--brand); background: url(img/bg.png) }
+.big-205 { color: var(--brand); background: url(img/bg.png) }
+.big-206 { color: var(--brand); background: url(img/bg.png) }
+.big-207 { color: var(--brand); background: url(img/bg.png) }
+.big-208 { color: var(--brand); background: url(img/bg.png) }
+.big-209 { color: var(--brand); background: url(img/bg.png) }
+.big-210 { color: var(--brand); background: url(img/bg.png) }
+.big-211 { color: var(--brand); background: url(img/bg.png) }
+.big-212 { color: var(--brand); background: url(img/bg.png) }
+.big-213 { color: var(--brand); background: url(img/bg.png) }
+.big-214 { color: var(--brand); background: url(img/bg.png) }
+.big-215 { color: var(--brand); background: url(img/bg.png) }
+.big-216 { color: var(--brand); background: url(img/bg.png) }
+.big-217 { color: var(--brand); background: url(img/bg.png) }
+.big-218 { color: var(--brand); background: url(img/bg.png) }
+.big-219 { color: var(--brand); background: url(img/bg.png) }
+.big-220 { color: var(--brand); background: url(img/bg.png) }
+.big-221 { color: var(--brand); background: url(img/bg.png) }
+.big-222 { color: var(--brand); background: url(img/bg.png) }
+.big-223 { color: var(--brand); background: url(img/bg.png) }
+.big-224 { color: var(--brand); background: url(img/bg.png) }
+.big-225 { color: var(--brand); background: url(img/bg.png) }
+.big-226 { color: var(--brand); background: url(img/bg.png) }
+.big-227 { color: var(--brand); background: url(img/bg.png) }
+.big-228 { color: var(--brand); background: url(img/bg.png) }
+.big-229 { color: var(--brand); background: url(img/bg.png) }
+.big-230 { color: var(--brand); background: url(img/bg.png) }
+.big-231 { color: var(--brand); background: url(img/bg.png) }
+.big-232 { color: var(--brand); background: url(img/bg.png) }
+.big-233 { color: var(--brand); background: url(img/bg.png) }
+.big-234 { color: var(--brand); background: url(img/bg.png) }
+.big-235 { color: var(--brand); background: url(img/bg.png) }
+.big-236 { color: var(--brand); background: url(img/bg.png) }
+.big-237 { color: var(--brand); background: url(img/bg.png) }
+.big-238 { color: var(--brand); background: url(img/bg.png) }
+.big-239 { color: var(--brand); background: url(img/bg.png) }
+.big-240 { color: var(--brand); background: url(img/bg.png) }
+.big-241 { color: var(--brand); background: url(img/bg.png) }
+.big-242 { color: var(--brand); background: url(img/bg.png) }
+.big-243 { color: var(--brand); background: url(img/bg.png) }
+.big-244 { color: var(--brand); background: url(img/bg.png) }
+.big-245 { color: var(--brand); background: url(img/bg.png) }
+.big-246 { color: var(--brand); background: url(img/bg.png) }
+.big-247 { color: var(--brand); background: url(img/bg.png) }
+.big-248 { color: var(--brand); background: url(img/bg.png) }
+.big-249 { color: var(--brand); background: url(img/bg.png) }
+.big-250 { color: var(--brand); background: url(img/bg.png) }
+.big-251 { color: var(--brand); background: url(img/bg.png) }
+.big-252 { color: var(--brand); background: url(img/bg.png) }
+.big-253 { color: var(--brand); background: url(img/bg.png) }
+.big-254 { color: var(--brand); background: url(img/bg.png) }
+.big-255 { color: var(--brand); background: url(img/bg.png) }
+.big-256 { color: var(--brand); background: url(img/bg.png) }
+.big-257 { color: var(--brand); background: url(img/bg.png) }
+.big-258 { color: var(--brand); background: url(img/bg.png) }
+.big-259 { color: var(--brand); background: url(img/bg.png) }
+.big-260 { color: var(--brand); background: url(img/bg.png) }
+.big-261 { color: var(--brand); background: url(img/bg.png) }
+.big-262 { color: var(--brand); background: url(img/bg.png) }
+.big-263 { color: var(--brand); background: url(img/bg.png) }
+.big-264 { color: var(--brand); background: url(img/bg.png) }
+.big-265 { color: var(--brand); background: url(img/bg.png) }
+.big-266 { color: var(--brand); background: url(img/bg.png) }
+.big-267 { color: var(--brand); background: url(img/bg.png) }
+.big-268 { color: var(--brand); background: url(img/bg.png) }
+.big-269 { color: var(--brand); background: url(img/bg.png) }
+.big-270 { color: var(--brand); background: url(img/bg.png) }
+.big-271 { color: var(--brand); background: url(img/bg.png) }
+.big-272 { color: var(--brand); background: url(img/bg.png) }
+.big-273 { color: var(--brand); background: url(img/bg.png) }
+.big-274 { color: var(--brand); background: url(img/bg.png) }
+.big-275 { color: var(--brand); background: url(img/bg.png) }
+.big-276 { color: var(--brand); background: url(img/bg.png) }
+.big-277 { color: var(--brand); background: url(img/bg.png) }
+.big-278 { color: var(--brand); background: url(img/bg.png) }
+.big-279 { color: var(--brand); background: url(img/bg.png) }
+.big-280 { color: var(--brand); background: url(img/bg.png) }
+.big-281 { color: var(--brand); background: url(img/bg.png) }
+.big-282 { color: var(--brand); background: url(img/bg.png) }
+.big-283 { color: var(--brand); background: url(img/bg.png) }
+.big-284 { color: var(--brand); background: url(img/bg.png) }
+.big-285 { color: var(--brand); background: url(img/bg.png) }
+.big-286 { color: var(--brand); background: url(img/bg.png) }
+.big-287 { color: var(--brand); background: url(img/bg.png) }
+.big-288 { color: var(--brand); background: url(img/bg.png) }
+.big-289 { color: var(--brand); background: url(img/bg.png) }
+.big-290 { color: var(--brand); background: url(img/bg.png) }
+.big-291 { color: var(--brand); background: url(img/bg.png) }
+.big-292 { color: var(--brand); background: url(img/bg.png) }
+.big-293 { color: var(--brand); background: url(img/bg.png) }
+.big-294 { color: var(--brand); background: url(img/bg.png) }
+.big-295 { color: var(--brand); background: url(img/bg.png) }
+.big-296 { color: var(--brand); background: url(img/bg.png) }
+.big-297 { color: var(--brand); background: url(img/bg.png) }
+.big-298 { color: var(--brand); background: url(img/bg.png) }
+.big-299 { color: var(--brand); background: url(img/bg.png) }
+.big-300 { color: var(--brand); background: url(img/bg.png) }
+.big-301 { color: var(--brand); background: url(img/bg.png) }
+.big-302 { color: var(--brand); background: url(img/bg.png) }
+.big-303 { color: var(--brand); background: url(img/bg.png) }
+.big-304 { color: var(--brand); background: url(img/bg.png) }
+.big-305 { color: var(--brand); background: url(img/bg.png) }
+.big-306 { color: var(--brand); background: url(img/bg.png) }
+.big-307 { color: var(--brand); background: url(img/bg.png) }
+.big-308 { color: var(--brand); background: url(img/bg.png) }
+.big-309 { color: var(--brand); background: url(img/bg.png) }
+.big-310 { color: var(--brand); background: url(img/bg.png) }
+.big-311 { color: var(--brand); background: url(img/bg.png) }
+.big-312 { color: var(--brand); background: url(img/bg.png) }
+.big-313 { color: var(--brand); background: url(img/bg.png) }
+.big-314 { color: var(--brand); background: url(img/bg.png) }
+.big-315 { color: var(--brand); background: url(img/bg.png) }
+.big-316 { color: var(--brand); background: url(img/bg.png) }
+.big-317 { color: var(--brand); background: url(img/bg.png) }
+.big-318 { color: var(--brand); background: url(img/bg.png) }
+.big-319 { color: var(--brand); background: url(img/bg.png) }
+.big-320 { color: var(--brand); background: url(img/bg.png) }
+.big-321 { color: var(--brand); background: url(img/bg.png) }
+.big-322 { color: var(--brand); background: url(img/bg.png) }
+.big-323 { color: var(--brand); background: url(img/bg.png) }
+.big-324 { color: var(--brand); background: url(img/bg.png) }
+.big-325 { color: var(--brand); background: url(img/bg.png) }
+.big-326 { color: var(--brand); background: url(img/bg.png) }
+.big-327 { color: var(--brand); background: url(img/bg.png) }
+.big-328 { color: var(--brand); background: url(img/bg.png) }
+.big-329 { color: var(--brand); background: url(img/bg.png) }
+.big-330 { color: var(--brand); background: url(img/bg.png) }
+.big-331 { color: var(--brand); background: url(img/bg.png) }
+.big-332 { color: var(--brand); background: url(img/bg.png) }
+.big-333 { color: var(--brand); background: url(img/bg.png) }
+.big-334 { color: var(--brand); background: url(img/bg.png) }
+.big-335 { color: var(--brand); background: url(img/bg.png) }
+.big-336 { color: var(--brand); background: url(img/bg.png) }
+.big-337 { color: var(--brand); background: url(img/bg.png) }
+.big-338 { color: var(--brand); background: url(img/bg.png) }
+.big-339 { color: var(--brand); background: url(img/bg.png) }
+.big-340 { color: var(--brand); background: url(img/bg.png) }
+.big-341 { color: var(--brand); background: url(img/bg.png) }
+.big-342 { color: var(--brand); background: url(img/bg.png) }
+.big-343 { color: var(--brand); background: url(img/bg.png) }
+.big-344 { color: var(--brand); background: url(img/bg.png) }
+.big-345 { color: var(--brand); background: url(img/bg.png) }
+.big-346 { color: var(--brand); background: url(img/bg.png) }
+.big-347 { color: var(--brand); background: url(img/bg.png) }
+.big-348 { color: var(--brand); background: url(img/bg.png) }
+.big-349 { color: var(--brand); background: url(img/bg.png) }
+.big-350 { color: var(--brand); background: url(img/bg.png) }
+.big-351 { color: var(--brand); background: url(img/bg.png) }
+.big-352 { color: var(--brand); background: url(img/bg.png) }
+.big-353 { color: var(--brand); background: url(img/bg.png) }
+.big-354 { color: var(--brand); background: url(img/bg.png) }
+.big-355 { color: var(--brand); background: url(img/bg.png) }
+.big-356 { color: var(--brand); background: url(img/bg.png) }
+.big-357 { color: var(--brand); background: url(img/bg.png) }
+.big-358 { color: var(--brand); background: url(img/bg.png) }
+.big-359 { color: var(--brand); background: url(img/bg.png) }
+.big-360 { color: var(--brand); background: url(img/bg.png) }
+.big-361 { color: var(--brand); background: url(img/bg.png) }
+.big-362 { color: var(--brand); background: url(img/bg.png) }
+.big-363 { color: var(--brand); background: url(img/bg.png) }
+.big-364 { color: var(--brand); background: url(img/bg.png) }
+.big-365 { color: var(--brand); background: url(img/bg.png) }
+.big-366 { color: var(--brand); background: url(img/bg.png) }
+.big-367 { color: var(--brand); background: url(img/bg.png) }
+.big-368 { color: var(--brand); background: url(img/bg.png) }
+.big-369 { color: var(--brand); background: url(img/bg.png) }
+.big-370 { color: var(--brand); background: url(img/bg.png) }
+.big-371 { color: var(--brand); background: url(img/bg.png) }
+.big-372 { color: var(--brand); background: url(img/bg.png) }
+.big-373 { color: var(--brand); background: url(img/bg.png) }
+.big-374 { color: var(--brand); background: url(img/bg.png) }
+.big-375 { color: var(--brand); background: url(img/bg.png) }
+.big-376 { color: var(--brand); background: url(img/bg.png) }
+.big-377 { color: var(--brand); background: url(img/bg.png) }
+.big-378 { color: var(--brand); background: url(img/bg.png) }
+.big-379 { color: var(--brand); background: url(img/bg.png) }
+.big-380 { color: var(--brand); background: url(img/bg.png) }
+.big-381 { color: var(--brand); background: url(img/bg.png) }
+.big-382 { color: var(--brand); background: url(img/bg.png) }
+.big-383 { color: var(--brand); background: url(img/bg.png) }
+.big-384 { color: var(--brand); background: url(img/bg.png) }
+.big-385 { color: var(--brand); background: url(img/bg.png) }
+.big-386 { color: var(--brand); background: url(img/bg.png) }
+.big-387 { color: var(--brand); background: url(img/bg.png) }
+.big-388 { color: var(--brand); background: url(img/bg.png) }
+.big-389 { color: var(--brand); background: url(img/bg.png) }
+.big-390 { color: var(--brand); background: url(img/bg.png) }
+.big-391 { color: var(--brand); background: url(img/bg.png) }
+.big-392 { color: var(--brand); background: url(img/bg.png) }
+.big-393 { color: var(--brand); background: url(img/bg.png) }
+.big-394 { color: var(--brand); background: url(img/bg.png) }
+.big-395 { color: var(--brand); background: url(img/bg.png) }
+.big-396 { color: var(--brand); background: url(img/bg.png) }
+.big-397 { color: var(--brand); background: url(img/bg.png) }
+.big-398 { color: var(--brand); background: url(img/bg.png) }
+.big-399 { color: var(--brand); background: url(img/bg.png) }
+.big-400 { color: var(--brand); background: url(img/bg.png) }
+.big-401 { color: var(--brand); background: url(img/bg.png) }
+.big-402 { color: var(--brand); background: url(img/bg.png) }
+.big-403 { color: var(--brand); background: url(img/bg.png) }
+.big-404 { color: var(--brand); background: url(img/bg.png) }
+.big-405 { color: var(--brand); background: url(img/bg.png) }
+.big-406 { color: var(--brand); background: url(img/bg.png) }
+.big-407 { color: var(--brand); background: url(img/bg.png) }
+.big-408 { color: var(--brand); background: url(img/bg.png) }
+.big-409 { color: var(--brand); background: url(img/bg.png) }
+.big-410 { color: var(--brand); background: url(img/bg.png) }
+.big-411 { color: var(--brand); background: url(img/bg.png) }
+.big-412 { color: var(--brand); background: url(img/bg.png) }
+.big-413 { color: var(--brand); background: url(img/bg.png) }
+.big-414 { color: var(--brand); background: url(img/bg.png) }
+.big-415 { color: var(--brand); background: url(img/bg.png) }
+.big-416 { color: var(--brand); background: url(img/bg.png) }
+.big-417 { color: var(--brand); background: url(img/bg.png) }
+.big-418 { color: var(--brand); background: url(img/bg.png) }
+.big-419 { color: var(--brand); background: url(img/bg.png) }
+.big-420 { color: var(--brand); background: url(img/bg.png) }
+.big-421 { color: var(--brand); background: url(img/bg.png) }
+.big-422 { color: var(--brand); background: url(img/bg.png) }
+.big-423 { color: var(--brand); background: url(img/bg.png) }
+.big-424 { color: var(--brand); background: url(img/bg.png) }
+.big-425 { color: var(--brand); background: url(img/bg.png) }
+.big-426 { color: var(--brand); background: url(img/bg.png) }
+.big-427 { color: var(--brand); background: url(img/bg.png) }
+.big-428 { color: var(--brand); background: url(img/bg.png) }
+.big-429 { color: var(--brand); background: url(img/bg.png) }
+.big-430 { color: var(--brand); background: url(img/bg.png) }
+.big-431 { color: var(--brand); background: url(img/bg.png) }
+.big-432 { color: var(--brand); background: url(img/bg.png) }
+.big-433 { color: var(--brand); background: url(img/bg.png) }
+.big-434 { color: var(--brand); background: url(img/bg.png) }
+.big-435 { color: var(--brand); background: url(img/bg.png) }
+.big-436 { color: var(--brand); background: url(img/bg.png) }
+.big-437 { color: var(--brand); background: url(img/bg.png) }
+.big-438 { color: var(--brand); background: url(img/bg.png) }
+.big-439 { color: var(--brand); background: url(img/bg.png) }
+.big-440 { color: var(--brand); background: url(img/bg.png) }
+.big-441 { color: var(--brand); background: url(img/bg.png) }
+.big-442 { color: var(--brand); background: url(img/bg.png) }
+.big-443 { color: var(--brand); background: url(img/bg.png) }
+.big-444 { color: var(--brand); background: url(img/bg.png) }
+.big-445 { color: var(--brand); background: url(img/bg.png) }
+.big-446 { color: var(--brand); background: url(img/bg.png) }
+.big-447 { color: var(--brand); background: url(img/bg.png) }
+.big-448 { color: var(--brand); background: url(img/bg.png) }
+.big-449 { color: var(--brand); background: url(img/bg.png) }
+.big-450 { color: var(--brand); background: url(img/bg.png) }
+.big-451 { color: var(--brand); background: url(img/bg.png) }
+.big-452 { color: var(--brand); background: url(img/bg.png) }
+.big-453 { color: var(--brand); background: url(img/bg.png) }
+.big-454 { color: var(--brand); background: url(img/bg.png) }
+.big-455 { color: var(--brand); background: url(img/bg.png) }
+.big-456 { color: var(--brand); background: url(img/bg.png) }
+.big-457 { color: var(--brand); background: url(img/bg.png) }
+.big-458 { color: var(--brand); background: url(img/bg.png) }
+.big-459 { color: var(--brand); background: url(img/bg.png) }
+.big-460 { color: var(--brand); background: url(img/bg.png) }
+.big-461 { color: var(--brand); background: url(img/bg.png) }
+.big-462 { color: var(--brand); background: url(img/bg.png) }
+.big-463 { color: var(--brand); background: url(img/bg.png) }
+.big-464 { color: var(--brand); background: url(img/bg.png) }
+.big-465 { color: var(--brand); background: url(img/bg.png) }
+.big-466 { color: var(--brand); background: url(img/bg.png) }
+.big-467 { color: var(--brand); background: url(img/bg.png) }
+.big-468 { color: var(--brand); background: url(img/bg.png) }
+.big-469 { color: var(--brand); background: url(img/bg.png) }
+.big-470 { color: var(--brand); background: url(img/bg.png) }
+.big-471 { color: var(--brand); background: url(img/bg.png) }
+.big-472 { color: var(--brand); background: url(img/bg.png) }
+.big-473 { color: var(--brand); background: url(img/bg.png) }
+.big-474 { color: var(--brand); background: url(img/bg.png) }
+.big-475 { color: var(--brand); background: url(img/bg.png) }
+.big-476 { color: var(--brand); background: url(img/bg.png) }
+.big-477 { color: var(--brand); background: url(img/bg.png) }
+.big-478 { color: var(--brand); background: url(img/bg.png) }
+.big-479 { color: var(--brand); background: url(img/bg.png) }
+.big-480 { color: var(--brand); background: url(img/bg.png) }
+.big-481 { color: var(--brand); background: url(img/bg.png) }
+.big-482 { color: var(--brand); background: url(img/bg.png) }
+.big-483 { color: var(--brand); background: url(img/bg.png) }
+.big-484 { color: var(--brand); background: url(img/bg.png) }
+.big-485 { color: var(--brand); background: url(img/bg.png) }
+.big-486 { color: var(--brand); background: url(img/bg.png) }
+.big-487 { color: var(--brand); background: url(img/bg.png) }
+.big-488 { color: var(--brand); background: url(img/bg.png) }
+.big-489 { color: var(--brand); background: url(img/bg.png) }
+.big-490 { color: var(--brand); background: url(img/bg.png) }
+.big-491 { color: var(--brand); background: url(img/bg.png) }
+.big-492 { color: var(--brand); background: url(img/bg.png) }
+.big-493 { color: var(--brand); background: url(img/bg.png) }
+.big-494 { color: var(--brand); background: url(img/bg.png) }
+.big-495 { color: var(--brand); background: url(img/bg.png) }
+.big-496 { color: var(--brand); background: url(img/bg.png) }
+.big-497 { color: var(--brand); background: url(img/bg.png) }
+.big-498 { color: var(--brand); background: url(img/bg.png) }
+.big-499 { color: var(--brand); background: url(img/bg.png) }
+.big-500 { color: var(--brand); background: url(img/bg.png) }
+.big-501 { color: var(--brand); background: url(img/bg.png) }
+.big-502 { color: var(--brand); background: url(img/bg.png) }
+.big-503 { color: var(--brand); background: url(img/bg.png) }
+.big-504 { color: var(--brand); background: url(img/bg.png) }
+.big-505 { color: var(--brand); background: url(img/bg.png) }
+.big-506 { color: var(--brand); background: url(img/bg.png) }
+.big-507 { color: var(--brand); background: url(img/bg.png) }
+.big-508 { color: var(--brand); background: url(img/bg.png) }
+.big-509 { color: var(--brand); background: url(img/bg.png) }
+.big-510 { color: var(--brand); background: url(img/bg.png) }
+.big-511 { color: var(--brand); background: url(img/bg.png) }
+.big-512 { color: var(--brand); background: url(img/bg.png) }
+.big-513 { color: var(--brand); background: url(img/bg.png) }
+.big-514 { color: var(--brand); background: url(img/bg.png) }
+.big-515 { color: var(--brand); background: url(img/bg.png) }
+.big-516 { color: var(--brand); background: url(img/bg.png) }
+.big-517 { color: var(--brand); background: url(img/bg.png) }
+.big-518 { color: var(--brand); background: url(img/bg.png) }
+.big-519 { color: var(--brand); background: url(img/bg.png) }
+.big-520 { color: var(--brand); background: url(img/bg.png) }
+.big-521 { color: var(--brand); background: url(img/bg.png) }
+.big-522 { color: var(--brand); background: url(img/bg.png) }
+.big-523 { color: var(--brand); background: url(img/bg.png) }
+.big-524 { color: var(--brand); background: url(img/bg.png) }
+.big-525 { color: var(--brand); background: url(img/bg.png) }
+.big-526 { color: var(--brand); background: url(img/bg.png) }
+.big-527 { color: var(--brand); background: url(img/bg.png) }
+.big-528 { color: var(--brand); background: url(img/bg.png) }
+.big-529 { color: var(--brand); background: url(img/bg.png) }
+.big-530 { color: var(--brand); background: url(img/bg.png) }
+.big-531 { color: var(--brand); background: url(img/bg.png) }
+.big-532 { color: var(--brand); background: url(img/bg.png) }
+.big-533 { color: var(--brand); background: url(img/bg.png) }
+.big-534 { color: var(--brand); background: url(img/bg.png) }
+.big-535 { color: var(--brand); background: url(img/bg.png) }
+.big-536 { color: var(--brand); background: url(img/bg.png) }
+.big-537 { color: var(--brand); background: url(img/bg.png) }
+.big-538 { color: var(--brand); background: url(img/bg.png) }
+.big-539 { color: var(--brand); background: url(img/bg.png) }
+.big-540 { color: var(--brand); background: url(img/bg.png) }
+.big-541 { color: var(--brand); background: url(img/bg.png) }
+.big-542 { color: var(--brand); background: url(img/bg.png) }
+.big-543 { color: var(--brand); background: url(img/bg.png) }
+.big-544 { color: var(--brand); background: url(img/bg.png) }
+.big-545 { color: var(--brand); background: url(img/bg.png) }
+.big-546 { color: var(--brand); background: url(img/bg.png) }
+.big-547 { color: var(--brand); background: url(img/bg.png) }
+.big-548 { color: var(--brand); background: url(img/bg.png) }
+.big-549 { color: var(--brand); background: url(img/bg.png) }
+.big-550 { color: var(--brand); background: url(img/bg.png) }
+.big-551 { color: var(--brand); background: url(img/bg.png) }
+.big-552 { color: var(--brand); background: url(img/bg.png) }
+.big-553 { color: var(--brand); background: url(img/bg.png) }
+.big-554 { color: var(--brand); background: url(img/bg.png) }
+.big-555 { color: var(--brand); background: url(img/bg.png) }
+.big-556 { color: var(--brand); background: url(img/bg.png) }
+.big-557 { color: var(--brand); background: url(img/bg.png) }
+.big-558 { color: var(--brand); background: url(img/bg.png) }
+.big-559 { color: var(--brand); background: url(img/bg.png) }
+.big-560 { color: var(--brand); background: url(img/bg.png) }
+.big-561 { color: var(--brand); background: url(img/bg.png) }
+.big-562 { color: var(--brand); background: url(img/bg.png) }
+.big-563 { color: var(--brand); background: url(img/bg.png) }
+.big-564 { color: var(--brand); background: url(img/bg.png) }
+.big-565 { color: var(--brand); background: url(img/bg.png) }
+.big-566 { color: var(--brand); background: url(img/bg.png) }
+.big-567 { color: var(--brand); background: url(img/bg.png) }
+.big-568 { color: var(--brand); background: url(img/bg.png) }
+.big-569 { color: var(--brand); background: url(img/bg.png) }
+.big-570 { color: var(--brand); background: url(img/bg.png) }
+.big-571 { color: var(--brand); background: url(img/bg.png) }
+.big-572 { color: var(--brand); background: url(img/bg.png) }
+.big-573 { color: var(--brand); background: url(img/bg.png) }
+.big-574 { color: var(--brand); background: url(img/bg.png) }
+.big-575 { color: var(--brand); background: url(img/bg.png) }
+.big-576 { color: var(--brand); background: url(img/bg.png) }
+.big-577 { color: var(--brand); background: url(img/bg.png) }
+.big-578 { color: var(--brand); background: url(img/bg.png) }
+.big-579 { color: var(--brand); background: url(img/bg.png) }
+.big-580 { color: var(--brand); background: url(img/bg.png) }
+.big-581 { color: var(--brand); background: url(img/bg.png) }
+.big-582 { color: var(--brand); background: url(img/bg.png) }
+.big-583 { color: var(--brand); background: url(img/bg.png) }
+.big-584 { color: var(--brand); background: url(img/bg.png) }
+.big-585 { color: var(--brand); background: url(img/bg.png) }
+.big-586 { color: var(--brand); background: url(img/bg.png) }
+.big-587 { color: var(--brand); background: url(img/bg.png) }
+.big-588 { color: var(--brand); background: url(img/bg.png) }
+.big-589 { color: var(--brand); background: url(img/bg.png) }
+.big-590 { color: var(--brand); background: url(img/bg.png) }
+.big-591 { color: var(--brand); background: url(img/bg.png) }
+.big-592 { color: var(--brand); background: url(img/bg.png) }
+.big-593 { color: var(--brand); background: url(img/bg.png) }
+.big-594 { color: var(--brand); background: url(img/bg.png) }
+.big-595 { color: var(--brand); background: url(img/bg.png) }
+.big-596 { color: var(--brand); background: url(img/bg.png) }
+.big-597 { color: var(--brand); background: url(img/bg.png) }
+.big-598 { color: var(--brand); background: url(img/bg.png) }
+.big-599 { color: var(--brand); background: url(img/bg.png) }
+.big-600 { color: var(--brand); background: url(img/bg.png) }
+.big-601 { color: var(--brand); background: url(img/bg.png) }
+.big-602 { color: var(--brand); background: url(img/bg.png) }
+.big-603 { color: var(--brand); background: url(img/bg.png) }
+.big-604 { color: var(--brand); background: url(img/bg.png) }
+.big-605 { color: var(--brand); background: url(img/bg.png) }
+.big-606 { color: var(--brand); background: url(img/bg.png) }
+.big-607 { color: var(--brand); background: url(img/bg.png) }
+.big-608 { color: var(--brand); background: url(img/bg.png) }
+.big-609 { color: var(--brand); background: url(img/bg.png) }
+.big-610 { color: var(--brand); background: url(img/bg.png) }
+.big-611 { color: var(--brand); background: url(img/bg.png) }
+.big-612 { color: var(--brand); background: url(img/bg.png) }
+.big-613 { color: var(--brand); background: url(img/bg.png) }
+.big-614 { color: var(--brand); background: url(img/bg.png) }
+.big-615 { color: var(--brand); background: url(img/bg.png) }
+.big-616 { color: var(--brand); background: url(img/bg.png) }
+.big-617 { color: var(--brand); background: url(img/bg.png) }
+.big-618 { color: var(--brand); background: url(img/bg.png) }
+.big-619 { color: var(--brand); background: url(img/bg.png) }
+.big-620 { color: var(--brand); background: url(img/bg.png) }
+.big-621 { color: var(--brand); background: url(img/bg.png) }
+.big-622 { color: var(--brand); background: url(img/bg.png) }
+.big-623 { color: var(--brand); background: url(img/bg.png) }
+.big-624 { color: var(--brand); background: url(img/bg.png) }
+.big-625 { color: var(--brand); background: url(img/bg.png) }
+.big-626 { color: var(--brand); background: url(img/bg.png) }
+.big-627 { color: var(--brand); background: url(img/bg.png) }
+.big-628 { color: var(--brand); background: url(img/bg.png) }
+.big-629 { color: var(--brand); background: url(img/bg.png) }
+.big-630 { color: var(--brand); background: url(img/bg.png) }
+.big-631 { color: var(--brand); background: url(img/bg.png) }
+.big-632 { color: var(--brand); background: url(img/bg.png) }
+.big-633 { color: var(--brand); background: url(img/bg.png) }
+.big-634 { color: var(--brand); background: url(img/bg.png) }
+.big-635 { color: var(--brand); background: url(img/bg.png) }
+.big-636 { color: var(--brand); background: url(img/bg.png) }
+.big-637 { color: var(--brand); background: url(img/bg.png) }
+.big-638 { color: var(--brand); background: url(img/bg.png) }
+.big-639 { color: var(--brand); background: url(img/bg.png) }
+.big-640 { color: var(--brand); background: url(img/bg.png) }
+.big-641 { color: var(--brand); background: url(img/bg.png) }
+.big-642 { color: var(--brand); background: url(img/bg.png) }
+.big-643 { color: var(--brand); background: url(img/bg.png) }
+.big-644 { color: var(--brand); background: url(img/bg.png) }
+.big-645 { color: var(--brand); background: url(img/bg.png) }
+.big-646 { color: var(--brand); background: url(img/bg.png) }
+.big-647 { color: var(--brand); background: url(img/bg.png) }
+.big-648 { color: var(--brand); background: url(img/bg.png) }
+.big-649 { color: var(--brand); background: url(img/bg.png) }
+.big-650 { color: var(--brand); background: url(img/bg.png) }
+.big-651 { color: var(--brand); background: url(img/bg.png) }
+.big-652 { color: var(--brand); background: url(img/bg.png) }
+.big-653 { color: var(--brand); background: url(img/bg.png) }
+.big-654 { color: var(--brand); background: url(img/bg.png) }
+.big-655 { color: var(--brand); background: url(img/bg.png) }
+.big-656 { color: var(--brand); background: url(img/bg.png) }
+.big-657 { color: var(--brand); background: url(img/bg.png) }
+.big-658 { color: var(--brand); background: url(img/bg.png) }
+.big-659 { color: var(--brand); background: url(img/bg.png) }
+.big-660 { color: var(--brand); background: url(img/bg.png) }
+.big-661 { color: var(--brand); background: url(img/bg.png) }
+.big-662 { color: var(--brand); background: url(img/bg.png) }
+.big-663 { color: var(--brand); background: url(img/bg.png) }
+.big-664 { color: var(--brand); background: url(img/bg.png) }
+.big-665 { color: var(--brand); background: url(img/bg.png) }
+.big-666 { color: var(--brand); background: url(img/bg.png) }
+.big-667 { color: var(--brand); background: url(img/bg.png) }
+.big-668 { color: var(--brand); background: url(img/bg.png) }
+.big-669 { color: var(--brand); background: url(img/bg.png) }
+.big-670 { color: var(--brand); background: url(img/bg.png) }
+.big-671 { color: var(--brand); background: url(img/bg.png) }
+.big-672 { color: var(--brand); background: url(img/bg.png) }
+.big-673 { color: var(--brand); background: url(img/bg.png) }
+.big-674 { color: var(--brand); background: url(img/bg.png) }
+.big-675 { color: var(--brand); background: url(img/bg.png) }
+.big-676 { color: var(--brand); background: url(img/bg.png) }
+.big-677 { color: var(--brand); background: url(img/bg.png) }
+.big-678 { color: var(--brand); background: url(img/bg.png) }
+.big-679 { color: var(--brand); background: url(img/bg.png) }
+.big-680 { color: var(--brand); background: url(img/bg.png) }
+.big-681 { color: var(--brand); background: url(img/bg.png) }
+.big-682 { color: var(--brand); background: url(img/bg.png) }
+.big-683 { color: var(--brand); background: url(img/bg.png) }
+.big-684 { color: var(--brand); background: url(img/bg.png) }
+.big-685 { color: var(--brand); background: url(img/bg.png) }
+.big-686 { color: var(--brand); background: url(img/bg.png) }
+.big-687 { color: var(--brand); background: url(img/bg.png) }
+.big-688 { color: var(--brand); background: url(img/bg.png) }
+.big-689 { color: var(--brand); background: url(img/bg.png) }
+.big-690 { color: var(--brand); background: url(img/bg.png) }
+.big-691 { color: var(--brand); background: url(img/bg.png) }
+.big-692 { color: var(--brand); background: url(img/bg.png) }
+.big-693 { color: var(--brand); background: url(img/bg.png) }
+.big-694 { color: var(--brand); background: url(img/bg.png) }
+.big-695 { color: var(--brand); background: url(img/bg.png) }
+.big-696 { color: var(--brand); background: url(img/bg.png) }
+.big-697 { color: var(--brand); background: url(img/bg.png) }
+.big-698 { color: var(--brand); background: url(img/bg.png) }
+.big-699 { color: var(--brand); background: url(img/bg.png) }
+.big-700 { color: var(--brand); background: url(img/bg.png) }
+.big-701 { color: var(--brand); background: url(img/bg.png) }
+.big-702 { color: var(--brand); background: url(img/bg.png) }
+.big-703 { color: var(--brand); background: url(img/bg.png) }
+.big-704 { color: var(--brand); background: url(img/bg.png) }
+.big-705 { color: var(--brand); background: url(img/bg.png) }
+.big-706 { color: var(--brand); background: url(img/bg.png) }
+.big-707 { color: var(--brand); background: url(img/bg.png) }
+.big-708 { color: var(--brand); background: url(img/bg.png) }
+.big-709 { color: var(--brand); background: url(img/bg.png) }
+.big-710 { color: var(--brand); background: url(img/bg.png) }
+.big-711 { color: var(--brand); background: url(img/bg.png) }
+.big-712 { color: var(--brand); background: url(img/bg.png) }
+.big-713 { color: var(--brand); background: url(img/bg.png) }
+.big-714 { color: var(--brand); background: url(img/bg.png) }
+.big-715 { color: var(--brand); background: url(img/bg.png) }
+.big-716 { color: var(--brand); background: url(img/bg.png) }
+.big-717 { color: var(--brand); background: url(img/bg.png) }
+.big-718 { color: var(--brand); background: url(img/bg.png) }
+.big-719 { color: var(--brand); background: url(img/bg.png) }
+.big-720 { color: var(--brand); background: url(img/bg.png) }
+.big-721 { color: var(--brand); background: url(img/bg.png) }
+.big-722 { color: var(--brand); background: url(img/bg.png) }
+.big-723 { color: var(--brand); background: url(img/bg.png) }
+.big-724 { color: var(--brand); background: url(img/bg.png) }
+.big-725 { color: var(--brand); background: url(img/bg.png) }
+.big-726 { color: var(--brand); background: url(img/bg.png) }
+.big-727 { color: var(--brand); background: url(img/bg.png) }
+.big-728 { color: var(--brand); background: url(img/bg.png) }
+.big-729 { color: var(--brand); background: url(img/bg.png) }
+.big-730 { color: var(--brand); background: url(img/bg.png) }
+.big-731 { color: var(--brand); background: url(img/bg.png) }
+.big-732 { color: var(--brand); background: url(img/bg.png) }
+.big-733 { color: var(--brand); background: url(img/bg.png) }
+.big-734 { color: var(--brand); background: url(img/bg.png) }
+.big-735 { color: var(--brand); background: url(img/bg.png) }
+.big-736 { color: var(--brand); background: url(img/bg.png) }
+.big-737 { color: var(--brand); background: url(img/bg.png) }
+.big-738 { color: var(--brand); background: url(img/bg.png) }
+.big-739 { color: var(--brand); background: url(img/bg.png) }
+.big-740 { color: var(--brand); background: url(img/bg.png) }
+.big-741 { color: var(--brand); background: url(img/bg.png) }
+.big-742 { color: var(--brand); background: url(img/bg.png) }
+.big-743 { color: var(--brand); background: url(img/bg.png) }
+.big-744 { color: var(--brand); background: url(img/bg.png) }
+.big-745 { color: var(--brand); background: url(img/bg.png) }
+.big-746 { color: var(--brand); background: url(img/bg.png) }
+.big-747 { color: var(--brand); background: url(img/bg.png) }
+.big-748 { color: var(--brand); background: url(img/bg.png) }
+.big-749 { color: var(--brand); background: url(img/bg.png) }
+.big-750 { color: var(--brand); background: url(img/bg.png) }
+.big-751 { color: var(--brand); background: url(img/bg.png) }
+.big-752 { color: var(--brand); background: url(img/bg.png) }
+.big-753 { color: var(--brand); background: url(img/bg.png) }
+.big-754 { color: var(--brand); background: url(img/bg.png) }
+.big-755 { color: var(--brand); background: url(img/bg.png) }
+.big-756 { color: var(--brand); background: url(img/bg.png) }
+.big-757 { color: var(--brand); background: url(img/bg.png) }
+.big-758 { color: var(--brand); background: url(img/bg.png) }
+.big-759 { color: var(--brand); background: url(img/bg.png) }
+.big-760 { color: var(--brand); background: url(img/bg.png) }
+.big-761 { color: var(--brand); background: url(img/bg.png) }
+.big-762 { color: var(--brand); background: url(img/bg.png) }
+.big-763 { color: var(--brand); background: url(img/bg.png) }
+.big-764 { color: var(--brand); background: url(img/bg.png) }
+.big-765 { color: var(--brand); background: url(img/bg.png) }
+.big-766 { color: var(--brand); background: url(img/bg.png) }
+.big-767 { color: var(--brand); background: url(img/bg.png) }
+.big-768 { color: var(--brand); background: url(img/bg.png) }
+.big-769 { color: var(--brand); background: url(img/bg.png) }
+.big-770 { color: var(--brand); background: url(img/bg.png) }
+.big-771 { color: var(--brand); background: url(img/bg.png) }
+.big-772 { color: var(--brand); background: url(img/bg.png) }
+.big-773 { color: var(--brand); background: url(img/bg.png) }
+.big-774 { color: var(--brand); background: url(img/bg.png) }
+.big-775 { color: var(--brand); background: url(img/bg.png) }
+.big-776 { color: var(--brand); background: url(img/bg.png) }
+.big-777 { color: var(--brand); background: url(img/bg.png) }
+.big-778 { color: var(--brand); background: url(img/bg.png) }
+.big-779 { color: var(--brand); background: url(img/bg.png) }
+.big-780 { color: var(--brand); background: url(img/bg.png) }
+.big-781 { color: var(--brand); background: url(img/bg.png) }
+.big-782 { color: var(--brand); background: url(img/bg.png) }
+.big-783 { color: var(--brand); background: url(img/bg.png) }
+.big-784 { color: var(--brand); background: url(img/bg.png) }
+.big-785 { color: var(--brand); background: url(img/bg.png) }
+.big-786 { color: var(--brand); background: url(img/bg.png) }
+.big-787 { color: var(--brand); background: url(img/bg.png) }
+.big-788 { color: var(--brand); background: url(img/bg.png) }
+.big-789 { color: var(--brand); background: url(img/bg.png) }
+.big-790 { color: var(--brand); background: url(img/bg.png) }
+.big-791 { color: var(--brand); background: url(img/bg.png) }
+.big-792 { color: var(--brand); background: url(img/bg.png) }
+.big-793 { color: var(--brand); background: url(img/bg.png) }
+.big-794 { color: var(--brand); background: url(img/bg.png) }
+.big-795 { color: var(--brand); background: url(img/bg.png) }
+.big-796 { color: var(--brand); background: url(img/bg.png) }
+.big-797 { color: var(--brand); background: url(img/bg.png) }
+.big-798 { color: var(--brand); background: url(img/bg.png) }
+.big-799 { color: var(--brand); background: url(img/bg.png) }
+.big-800 { color: var(--brand); background: url(img/bg.png) }
+.big-801 { color: var(--brand); background: url(img/bg.png) }
+.big-802 { color: var(--brand); background: url(img/bg.png) }
+.big-803 { color: var(--brand); background: url(img/bg.png) }
+.big-804 { color: var(--brand); background: url(img/bg.png) }
+.big-805 { color: var(--brand); background: url(img/bg.png) }
+.big-806 { color: var(--brand); background: url(img/bg.png) }
+.big-807 { color: var(--brand); background: url(img/bg.png) }
+.big-808 { color: var(--brand); background: url(img/bg.png) }
+.big-809 { color: var(--brand); background: url(img/bg.png) }
+.big-810 { color: var(--brand); background: url(img/bg.png) }
+.big-811 { color: var(--brand); background: url(img/bg.png) }
+.big-812 { color: var(--brand); background: url(img/bg.png) }
+.big-813 { color: var(--brand); background: url(img/bg.png) }
+.big-814 { color: var(--brand); background: url(img/bg.png) }
+.big-815 { color: var(--brand); background: url(img/bg.png) }
+.big-816 { color: var(--brand); background: url(img/bg.png) }
+.big-817 { color: var(--brand); background: url(img/bg.png) }
+.big-818 { color: var(--brand); background: url(img/bg.png) }
+.big-819 { color: var(--brand); background: url(img/bg.png) }
+.big-820 { color: var(--brand); background: url(img/bg.png) }
+.big-821 { color: var(--brand); background: url(img/bg.png) }
+.big-822 { color: var(--brand); background: url(img/bg.png) }
+.big-823 { color: var(--brand); background: url(img/bg.png) }
+.big-824 { color: var(--brand); background: url(img/bg.png) }
+.big-825 { color: var(--brand); background: url(img/bg.png) }
+.big-826 { color: var(--brand); background: url(img/bg.png) }
+.big-827 { color: var(--brand); background: url(img/bg.png) }
+.big-828 { color: var(--brand); background: url(img/bg.png) }
+.big-829 { color: var(--brand); background: url(img/bg.png) }
+.big-830 { color: var(--brand); background: url(img/bg.png) }
+.big-831 { color: var(--brand); background: url(img/bg.png) }
+.big-832 { color: var(--brand); background: url(img/bg.png) }
+.big-833 { color: var(--brand); background: url(img/bg.png) }
+.big-834 { color: var(--brand); background: url(img/bg.png) }
+.big-835 { color: var(--brand); background: url(img/bg.png) }
+.big-836 { color: var(--brand); background: url(img/bg.png) }
+.big-837 { color: var(--brand); background: url(img/bg.png) }
+.big-838 { color: var(--brand); background: url(img/bg.png) }
+.big-839 { color: var(--brand); background: url(img/bg.png) }
+.big-840 { color: var(--brand); background: url(img/bg.png) }
+.big-841 { color: var(--brand); background: url(img/bg.png) }
+.big-842 { color: var(--brand); background: url(img/bg.png) }
+.big-843 { color: var(--brand); background: url(img/bg.png) }
+.big-844 { color: var(--brand); background: url(img/bg.png) }
+.big-845 { color: var(--brand); background: url(img/bg.png) }
+.big-846 { color: var(--brand); background: url(img/bg.png) }
+.big-847 { color: var(--brand); background: url(img/bg.png) }
+.big-848 { color: var(--brand); background: url(img/bg.png) }
+.big-849 { color: var(--brand); background: url(img/bg.png) }
+.big-850 { color: var(--brand); background: url(img/bg.png) }
+.big-851 { color: var(--brand); background: url(img/bg.png) }
+.big-852 { color: var(--brand); background: url(img/bg.png) }
+.big-853 { color: var(--brand); background: url(img/bg.png) }
+.big-854 { color: var(--brand); background: url(img/bg.png) }
+.big-855 { color: var(--brand); background: url(img/bg.png) }
+.big-856 { color: var(--brand); background: url(img/bg.png) }
+.big-857 { color: var(--brand); background: url(img/bg.png) }
+.big-858 { color: var(--brand); background: url(img/bg.png) }
+.big-859 { color: var(--brand); background: url(img/bg.png) }
+.big-860 { color: var(--brand); background: url(img/bg.png) }
+.big-861 { color: var(--brand); background: url(img/bg.png) }
+.big-862 { color: var(--brand); background: url(img/bg.png) }
+.big-863 { color: var(--brand); background: url(img/bg.png) }
+.big-864 { color: var(--brand); background: url(img/bg.png) }
+.big-865 { color: var(--brand); background: url(img/bg.png) }
+.big-866 { color: var(--brand); background: url(img/bg.png) }
+.big-867 { color: var(--brand); background: url(img/bg.png) }
+.big-868 { color: var(--brand); background: url(img/bg.png) }
+.big-869 { color: var(--brand); background: url(img/bg.png) }
+.big-870 { color: var(--brand); background: url(img/bg.png) }
+.big-871 { color: var(--brand); background: url(img/bg.png) }
+.big-872 { color: var(--brand); background: url(img/bg.png) }
+.big-873 { color: var(--brand); background: url(img/bg.png) }
+.big-874 { color: var(--brand); background: url(img/bg.png) }
+.big-875 { color: var(--brand); background: url(img/bg.png) }
+.big-876 { color: var(--brand); background: url(img/bg.png) }
+.big-877 { color: var(--brand); background: url(img/bg.png) }
+.big-878 { color: var(--brand); background: url(img/bg.png) }
+.big-879 { color: var(--brand); background: url(img/bg.png) }
+.big-880 { color: var(--brand); background: url(img/bg.png) }
+.big-881 { color: var(--brand); background: url(img/bg.png) }
+.big-882 { color: var(--brand); background: url(img/bg.png) }
+.big-883 { color: var(--brand); background: url(img/bg.png) }
+.big-884 { color: var(--brand); background: url(img/bg.png) }
+.big-885 { color: var(--brand); background: url(img/bg.png) }
+.big-886 { color: var(--brand); background: url(img/bg.png) }
+.big-887 { color: var(--brand); background: url(img/bg.png) }
+.big-888 { color: var(--brand); background: url(img/bg.png) }
+.big-889 { color: var(--brand); background: url(img/bg.png) }
+.big-890 { color: var(--brand); background: url(img/bg.png) }
+.big-891 { color: var(--brand); background: url(img/bg.png) }
+.big-892 { color: var(--brand); background: url(img/bg.png) }
+.big-893 { color: var(--brand); background: url(img/bg.png) }
+.big-894 { color: var(--brand); background: url(img/bg.png) }
+.big-895 { color: var(--brand); background: url(img/bg.png) }
+.big-896 { color: var(--brand); background: url(img/bg.png) }
+.big-897 { color: var(--brand); background: url(img/bg.png) }
+.big-898 { color: var(--brand); background: url(img/bg.png) }
+.big-899 { color: var(--brand); background: url(img/bg.png) }
+.big-900 { color: var(--brand); background: url(img/bg.png) }
+.big-901 { color: var(--brand); background: url(img/bg.png) }
+.big-902 { color: var(--brand); background: url(img/bg.png) }
+.big-903 { color: var(--brand); background: url(img/bg.png) }
+.big-904 { color: var(--brand); background: url(img/bg.png) }
+.big-905 { color: var(--brand); background: url(img/bg.png) }
+.big-906 { color: var(--brand); background: url(img/bg.png) }
+.big-907 { color: var(--brand); background: url(img/bg.png) }
+.big-908 { color: var(--brand); background: url(img/bg.png) }
+.big-909 { color: var(--brand); background: url(img/bg.png) }
+.big-910 { color: var(--brand); background: url(img/bg.png) }
+.big-911 { color: var(--brand); background: url(img/bg.png) }
+.big-912 { color: var(--brand); background: url(img/bg.png) }
+.big-913 { color: var(--brand); background: url(img/bg.png) }
+.big-914 { color: var(--brand); background: url(img/bg.png) }
+.big-915 { color: var(--brand); background: url(img/bg.png) }
+.big-916 { color: var(--brand); background: url(img/bg.png) }
+.big-917 { color: var(--brand); background: url(img/bg.png) }
+.big-918 { color: var(--brand); background: url(img/bg.png) }
+.big-919 { color: var(--brand); background: url(img/bg.png) }
+.big-920 { color: var(--brand); background: url(img/bg.png) }
+.big-921 { color: var(--brand); background: url(img/bg.png) }
+.big-922 { color: var(--brand); background: url(img/bg.png) }
+.big-923 { color: var(--brand); background: url(img/bg.png) }
+.big-924 { color: var(--brand); background: url(img/bg.png) }
+.big-925 { color: var(--brand); background: url(img/bg.png) }
+.big-926 { color: var(--brand); background: url(img/bg.png) }
+.big-927 { color: var(--brand); background: url(img/bg.png) }
+.big-928 { color: var(--brand); background: url(img/bg.png) }
+.big-929 { color: var(--brand); background: url(img/bg.png) }
+.big-930 { color: var(--brand); background: url(img/bg.png) }
+.big-931 { color: var(--brand); background: url(img/bg.png) }
+.big-932 { color: var(--brand); background: url(img/bg.png) }
+.big-933 { color: var(--brand); background: url(img/bg.png) }
+.big-934 { color: var(--brand); background: url(img/bg.png) }
+.big-935 { color: var(--brand); background: url(img/bg.png) }
+.big-936 { color: var(--brand); background: url(img/bg.png) }
+.big-937 { color: var(--brand); background: url(img/bg.png) }
+.big-938 { color: var(--brand); background: url(img/bg.png) }
+.big-939 { color: var(--brand); background: url(img/bg.png) }
+.big-940 { color: var(--brand); background: url(img/bg.png) }
+.big-941 { color: var(--brand); background: url(img/bg.png) }
+.big-942 { color: var(--brand); background: url(img/bg.png) }
+.big-943 { color: var(--brand); background: url(img/bg.png) }
+.big-944 { color: var(--brand); background: url(img/bg.png) }
+.big-945 { color: var(--brand); background: url(img/bg.png) }
+.big-946 { color: var(--brand); background: url(img/bg.png) }
+.big-947 { color: var(--brand); background: url(img/bg.png) }
+.big-948 { color: var(--brand); background: url(img/bg.png) }
+.big-949 { color: var(--brand); background: url(img/bg.png) }
+.big-950 { color: var(--brand); background: url(img/bg.png) }
+.big-951 { color: var(--brand); background: url(img/bg.png) }
+.big-952 { color: var(--brand); background: url(img/bg.png) }
+.big-953 { color: var(--brand); background: url(img/bg.png) }
+.big-954 { color: var(--brand); background: url(img/bg.png) }
+.big-955 { color: var(--brand); background: url(img/bg.png) }
+.big-956 { color: var(--brand); background: url(img/bg.png) }
+.big-957 { color: var(--brand); background: url(img/bg.png) }
+.big-958 { color: var(--brand); background: url(img/bg.png) }
+.big-959 { color: var(--brand); background: url(img/bg.png) }
+.big-960 { color: var(--brand); background: url(img/bg.png) }
+.big-961 { color: var(--brand); background: url(img/bg.png) }
+.big-962 { color: var(--brand); background: url(img/bg.png) }
+.big-963 { color: var(--brand); background: url(img/bg.png) }
+.big-964 { color: var(--brand); background: url(img/bg.png) }
+.big-965 { color: var(--brand); background: url(img/bg.png) }
+.big-966 { color: var(--brand); background: url(img/bg.png) }
+.big-967 { color: var(--brand); background: url(img/bg.png) }
+.big-968 { color: var(--brand); background: url(img/bg.png) }
+.big-969 { color: var(--brand); background: url(img/bg.png) }
+.big-970 { color: var(--brand); background: url(img/bg.png) }
+.big-971 { color: var(--brand); background: url(img/bg.png) }
+.big-972 { color: var(--brand); background: url(img/bg.png) }
+.big-973 { color: var(--brand); background: url(img/bg.png) }
+.big-974 { color: var(--brand); background: url(img/bg.png) }
+.big-975 { color: var(--brand); background: url(img/bg.png) }
+.big-976 { color: var(--brand); background: url(img/bg.png) }
+.big-977 { color: var(--brand); background: url(img/bg.png) }
+.big-978 { color: var(--brand); background: url(img/bg.png) }
+.big-979 { color: var(--brand); background: url(img/bg.png) }
+.big-980 { color: var(--brand); background: url(img/bg.png) }
+.big-981 { color: var(--brand); background: url(img/bg.png) }
+.big-982 { color: var(--brand); background: url(img/bg.png) }
+.big-983 { color: var(--brand); background: url(img/bg.png) }
+.big-984 { color: var(--brand); background: url(img/bg.png) }
+.big-985 { color: var(--brand); background: url(img/bg.png) }
+.big-986 { color: var(--brand); background: url(img/bg.png) }
+.big-987 { color: var(--brand); background: url(img/bg.png) }
+.big-988 { color: var(--brand); background: url(img/bg.png) }
+.big-989 { color: var(--brand); background: url(img/bg.png) }
+.big-990 { color: var(--brand); background: url(img/bg.png) }
+.big-991 { color: var(--brand); background: url(img/bg.png) }
+.big-992 { color: var(--brand); background: url(img/bg.png) }
+.big-993 { color: var(--brand); background: url(img/bg.png) }
+.big-994 { color: var(--brand); background: url(img/bg.png) }
+.big-995 { color: var(--brand); background: url(img/bg.png) }
+.big-996 { color: var(--brand); background: url(img/bg.png) }
+.big-997 { color: var(--brand); background: url(img/bg.png) }
+.big-998 { color: var(--brand); background: url(img/bg.png) }
+.big-999 { color: var(--brand); background: url(img/bg.png) }
+.big-1000 { color: var(--brand); background: url(img/bg.png) }
+.big-1001 { color: var(--brand); background: url(img/bg.png) }
+.big-1002 { color: var(--brand); background: url(img/bg.png) }
+.big-1003 { color: var(--brand); background: url(img/bg.png) }
+.big-1004 { color: var(--brand); background: url(img/bg.png) }
+.big-1005 { color: var(--brand); background: url(img/bg.png) }
+.big-1006 { color: var(--brand); background: url(img/bg.png) }
+.big-1007 { color: var(--brand); background: url(img/bg.png) }
+.big-1008 { color: var(--brand); background: url(img/bg.png) }
+.big-1009 { color: var(--brand); background: url(img/bg.png) }
+.big-1010 { color: var(--brand); background: url(img/bg.png) }
+.big-1011 { color: var(--brand); background: url(img/bg.png) }
+.big-1012 { color: var(--brand); background: url(img/bg.png) }
+.big-1013 { color: var(--brand); background: url(img/bg.png) }
+.big-1014 { color: var(--brand); background: url(img/bg.png) }
+.big-1015 { color: var(--brand); background: url(img/bg.png) }
+.big-1016 { color: var(--brand); background: url(img/bg.png) }
+.big-1017 { color: var(--brand); background: url(img/bg.png) }
+.big-1018 { color: var(--brand); background: url(img/bg.png) }
+.big-1019 { color: var(--brand); background: url(img/bg.png) }
+.big-1020 { color: var(--brand); background: url(img/bg.png) }
+.big-1021 { color: var(--brand); background: url(img/bg.png) }
+.big-1022 { color: var(--brand); background: url(img/bg.png) }
+.big-1023 { color: var(--brand); background: url(img/bg.png) }
+.big-1024 { color: var(--brand); background: url(img/bg.png) }
+.big-1025 { color: var(--brand); background: url(img/bg.png) }
+.big-1026 { color: var(--brand); background: url(img/bg.png) }
+.big-1027 { color: var(--brand); background: url(img/bg.png) }
+.big-1028 { color: var(--brand); background: url(img/bg.png) }
+.big-1029 { color: var(--brand); background: url(img/bg.png) }
+.big-1030 { color: var(--brand); background: url(img/bg.png) }
+.big-1031 { color: var(--brand); background: url(img/bg.png) }
+.big-1032 { color: var(--brand); background: url(img/bg.png) }
+.big-1033 { color: var(--brand); background: url(img/bg.png) }
+.big-1034 { color: var(--brand); background: url(img/bg.png) }
+.big-1035 { color: var(--brand); background: url(img/bg.png) }
+.big-1036 { color: var(--brand); background: url(img/bg.png) }
+.big-1037 { color: var(--brand); background: url(img/bg.png) }
+.big-1038 { color: var(--brand); background: url(img/bg.png) }
+.big-1039 { color: var(--brand); background: url(img/bg.png) }
+.big-1040 { color: var(--brand); background: url(img/bg.png) }
+.big-1041 { color: var(--brand); background: url(img/bg.png) }
+.big-1042 { color: var(--brand); background: url(img/bg.png) }
+.big-1043 { color: var(--brand); background: url(img/bg.png) }
+.big-1044 { color: var(--brand); background: url(img/bg.png) }
+.big-1045 { color: var(--brand); background: url(img/bg.png) }
+.big-1046 { color: var(--brand); background: url(img/bg.png) }
+.big-1047 { color: var(--brand); background: url(img/bg.png) }
+.big-1048 { color: var(--brand); background: url(img/bg.png) }
+.big-1049 { color: var(--brand); background: url(img/bg.png) }
+.big-1050 { color: var(--brand); background: url(img/bg.png) }
+.big-1051 { color: var(--brand); background: url(img/bg.png) }
+.big-1052 { color: var(--brand); background: url(img/bg.png) }
+.big-1053 { color: var(--brand); background: url(img/bg.png) }
+.big-1054 { color: var(--brand); background: url(img/bg.png) }
+.big-1055 { color: var(--brand); background: url(img/bg.png) }
+.big-1056 { color: var(--brand); background: url(img/bg.png) }
+.big-1057 { color: var(--brand); background: url(img/bg.png) }
+.big-1058 { color: var(--brand); background: url(img/bg.png) }
+.big-1059 { color: var(--brand); background: url(img/bg.png) }
+.big-1060 { color: var(--brand); background: url(img/bg.png) }
+.big-1061 { color: var(--brand); background: url(img/bg.png) }
+.big-1062 { color: var(--brand); background: url(img/bg.png) }
+.big-1063 { color: var(--brand); background: url(img/bg.png) }
+.big-1064 { color: var(--brand); background: url(img/bg.png) }
+.big-1065 { color: var(--brand); background: url(img/bg.png) }
+.big-1066 { color: var(--brand); background: url(img/bg.png) }
+.big-1067 { color: var(--brand); background: url(img/bg.png) }
+.big-1068 { color: var(--brand); background: url(img/bg.png) }
+.big-1069 { color: var(--brand); background: url(img/bg.png) }
+.big-1070 { color: var(--brand); background: url(img/bg.png) }
+.big-1071 { color: var(--brand); background: url(img/bg.png) }
+.big-1072 { color: var(--brand); background: url(img/bg.png) }
+.big-1073 { color: var(--brand); background: url(img/bg.png) }
+.big-1074 { color: var(--brand); background: url(img/bg.png) }
+.big-1075 { color: var(--brand); background: url(img/bg.png) }
+.big-1076 { color: var(--brand); background: url(img/bg.png) }
+.big-1077 { color: var(--brand); background: url(img/bg.png) }
+.big-1078 { color: var(--brand); background: url(img/bg.png) }
+.big-1079 { color: var(--brand); background: url(img/bg.png) }
+.big-1080 { color: var(--brand); background: url(img/bg.png) }
+.big-1081 { color: var(--brand); background: url(img/bg.png) }
+.big-1082 { color: var(--brand); background: url(img/bg.png) }
+.big-1083 { color: var(--brand); background: url(img/bg.png) }
+.big-1084 { color: var(--brand); background: url(img/bg.png) }
+.big-1085 { color: var(--brand); background: url(img/bg.png) }
+.big-1086 { color: var(--brand); background: url(img/bg.png) }
+.big-1087 { color: var(--brand); background: url(img/bg.png) }
+.big-1088 { color: var(--brand); background: url(img/bg.png) }
+.big-1089 { color: var(--brand); background: url(img/bg.png) }
+.big-1090 { color: var(--brand); background: url(img/bg.png) }
+.big-1091 { color: var(--brand); background: url(img/bg.png) }
+.big-1092 { color: var(--brand); background: url(img/bg.png) }
+.big-1093 { color: var(--brand); background: url(img/bg.png) }
+.big-1094 { color: var(--brand); background: url(img/bg.png) }
+.big-1095 { color: var(--brand); background: url(img/bg.png) }
+.big-1096 { color: var(--brand); background: url(img/bg.png) }
+.big-1097 { color: var(--brand); background: url(img/bg.png) }
+.big-1098 { color: var(--brand); background: url(img/bg.png) }
+.big-1099 { color: var(--brand); background: url(img/bg.png) }
+.big-1100 { color: var(--brand); background: url(img/bg.png) }
+.big-1101 { color: var(--brand); background: url(img/bg.png) }
+.big-1102 { color: var(--brand); background: url(img/bg.png) }
+.big-1103 { color: var(--brand); background: url(img/bg.png) }
+.big-1104 { color: var(--brand); background: url(img/bg.png) }
+.big-1105 { color: var(--brand); background: url(img/bg.png) }
+.big-1106 { color: var(--brand); background: url(img/bg.png) }
+.big-1107 { color: var(--brand); background: url(img/bg.png) }
+.big-1108 { color: var(--brand); background: url(img/bg.png) }
+.big-1109 { color: var(--brand); background: url(img/bg.png) }
+.big-1110 { color: var(--brand); background: url(img/bg.png) }
+.big-1111 { color: var(--brand); background: url(img/bg.png) }
+.big-1112 { color: var(--brand); background: url(img/bg.png) }
+.big-1113 { color: var(--brand); background: url(img/bg.png) }
+.big-1114 { color: var(--brand); background: url(img/bg.png) }
+.big-1115 { color: var(--brand); background: url(img/bg.png) }
+.big-1116 { color: var(--brand); background: url(img/bg.png) }
+.big-1117 { color: var(--brand); background: url(img/bg.png) }
+.big-1118 { color: var(--brand); background: url(img/bg.png) }
+.big-1119 { color: var(--brand); background: url(img/bg.png) }
+.big-1120 { color: var(--brand); background: url(img/bg.png) }
+.big-1121 { color: var(--brand); background: url(img/bg.png) }
+.big-1122 { color: var(--brand); background: url(img/bg.png) }
+.big-1123 { color: var(--brand); background: url(img/bg.png) }
+.big-1124 { color: var(--brand); background: url(img/bg.png) }
+.big-1125 { color: var(--brand); background: url(img/bg.png) }
+.big-1126 { color: var(--brand); background: url(img/bg.png) }
+.big-1127 { color: var(--brand); background: url(img/bg.png) }
+.big-1128 { color: var(--brand); background: url(img/bg.png) }
+.big-1129 { color: var(--brand); background: url(img/bg.png) }
+.big-1130 { color: var(--brand); background: url(img/bg.png) }
+.big-1131 { color: var(--brand); background: url(img/bg.png) }
+.big-1132 { color: var(--brand); background: url(img/bg.png) }
+.big-1133 { color: var(--brand); background: url(img/bg.png) }
+.big-1134 { color: var(--brand); background: url(img/bg.png) }
+.big-1135 { color: var(--brand); background: url(img/bg.png) }
+.big-1136 { color: var(--brand); background: url(img/bg.png) }
+.big-1137 { color: var(--brand); background: url(img/bg.png) }
+.big-1138 { color: var(--brand); background: url(img/bg.png) }
+.big-1139 { color: var(--brand); background: url(img/bg.png) }
+.big-1140 { color: var(--brand); background: url(img/bg.png) }
+.big-1141 { color: var(--brand); background: url(img/bg.png) }
+.big-1142 { color: var(--brand); background: url(img/bg.png) }
+.big-1143 { color: var(--brand); background: url(img/bg.png) }
+.big-1144 { color: var(--brand); background: url(img/bg.png) }
+.big-1145 { color: var(--brand); background: url(img/bg.png) }
+.big-1146 { color: var(--brand); background: url(img/bg.png) }
+.big-1147 { color: var(--brand); background: url(img/bg.png) }
+.big-1148 { color: var(--brand); background: url(img/bg.png) }
+.big-1149 { color: var(--brand); background: url(img/bg.png) }
+.big-1150 { color: var(--brand); background: url(img/bg.png) }
+.big-1151 { color: var(--brand); background: url(img/bg.png) }
+.big-1152 { color: var(--brand); background: url(img/bg.png) }
+.big-1153 { color: var(--brand); background: url(img/bg.png) }
+.big-1154 { color: var(--brand); background: url(img/bg.png) }
+.big-1155 { color: var(--brand); background: url(img/bg.png) }
+.big-1156 { color: var(--brand); background: url(img/bg.png) }
+.big-1157 { color: var(--brand); background: url(img/bg.png) }
+.big-1158 { color: var(--brand); background: url(img/bg.png) }
+.big-1159 { color: var(--brand); background: url(img/bg.png) }
+.big-1160 { color: var(--brand); background: url(img/bg.png) }
+.big-1161 { color: var(--brand); background: url(img/bg.png) }
+.big-1162 { color: var(--brand); background: url(img/bg.png) }
+.big-1163 { color: var(--brand); background: url(img/bg.png) }
+.big-1164 { color: var(--brand); background: url(img/bg.png) }
+.big-1165 { color: var(--brand); background: url(img/bg.png) }
+.big-1166 { color: var(--brand); background: url(img/bg.png) }
+.big-1167 { color: var(--brand); background: url(img/bg.png) }
+.big-1168 { color: var(--brand); background: url(img/bg.png) }
+.big-1169 { color: var(--brand); background: url(img/bg.png) }
+.big-1170 { color: var(--brand); background: url(img/bg.png) }
+.big-1171 { color: var(--brand); background: url(img/bg.png) }
+.big-1172 { color: var(--brand); background: url(img/bg.png) }
+.big-1173 { color: var(--brand); background: url(img/bg.png) }
+.big-1174 { color: var(--brand); background: url(img/bg.png) }
+.big-1175 { color: var(--brand); background: url(img/bg.png) }
+.big-1176 { color: var(--brand); background: url(img/bg.png) }
+.big-1177 { color: var(--brand); background: url(img/bg.png) }
+.big-1178 { color: var(--brand); background: url(img/bg.png) }
+.big-1179 { color: var(--brand); background: url(img/bg.png) }
+.big-1180 { color: var(--brand); background: url(img/bg.png) }
+.big-1181 { color: var(--brand); background: url(img/bg.png) }
+.big-1182 { color: var(--brand); background: url(img/bg.png) }
+.big-1183 { color: var(--brand); background: url(img/bg.png) }
+.big-1184 { color: var(--brand); background: url(img/bg.png) }
+.big-1185 { color: var(--brand); background: url(img/bg.png) }
+.big-1186 { color: var(--brand); background: url(img/bg.png) }
+.big-1187 { color: var(--brand); background: url(img/bg.png) }
+.big-1188 { color: var(--brand); background: url(img/bg.png) }
+.big-1189 { color: var(--brand); background: url(img/bg.png) }
+.big-1190 { color: var(--brand); background: url(img/bg.png) }
+.big-1191 { color: var(--brand); background: url(img/bg.png) }
+.big-1192 { color: var(--brand); background: url(img/bg.png) }
+.big-1193 { color: var(--brand); background: url(img/bg.png) }
+.big-1194 { color: var(--brand); background: url(img/bg.png) }
+.big-1195 { color: var(--brand); background: url(img/bg.png) }
+.big-1196 { color: var(--brand); background: url(img/bg.png) }
+.big-1197 { color: var(--brand); background: url(img/bg.png) }
+.big-1198 { color: var(--brand); background: url(img/bg.png) }
+.big-1199 { color: var(--brand); background: url(img/bg.png) }
+.big-1200 { color: var(--brand); background: url(img/bg.png) }
+.big-1201 { color: var(--brand); background: url(img/bg.png) }
+.big-1202 { color: var(--brand); background: url(img/bg.png) }
+.big-1203 { color: var(--brand); background: url(img/bg.png) }
+.big-1204 { color: var(--brand); background: url(img/bg.png) }
+.big-1205 { color: var(--brand); background: url(img/bg.png) }
+.big-1206 { color: var(--brand); background: url(img/bg.png) }
+.big-1207 { color: var(--brand); background: url(img/bg.png) }
+.big-1208 { color: var(--brand); background: url(img/bg.png) }
+.big-1209 { color: var(--brand); background: url(img/bg.png) }
+.big-1210 { color: var(--brand); background: url(img/bg.png) }
+.big-1211 { color: var(--brand); background: url(img/bg.png) }
+.big-1212 { color: var(--brand); background: url(img/bg.png) }
+.big-1213 { color: var(--brand); background: url(img/bg.png) }
+.big-1214 { color: var(--brand); background: url(img/bg.png) }
+.big-1215 { color: var(--brand); background: url(img/bg.png) }
+.big-1216 { color: var(--brand); background: url(img/bg.png) }
+.big-1217 { color: var(--brand); background: url(img/bg.png) }
+.big-1218 { color: var(--brand); background: url(img/bg.png) }
+.big-1219 { color: var(--brand); background: url(img/bg.png) }
+.big-1220 { color: var(--brand); background: url(img/bg.png) }
+.big-1221 { color: var(--brand); background: url(img/bg.png) }
+.big-1222 { color: var(--brand); background: url(img/bg.png) }
+.big-1223 { color: var(--brand); background: url(img/bg.png) }
+.big-1224 { color: var(--brand); background: url(img/bg.png) }
+.big-1225 { color: var(--brand); background: url(img/bg.png) }
+.big-1226 { color: var(--brand); background: url(img/bg.png) }
+.big-1227 { color: var(--brand); background: url(img/bg.png) }
+.big-1228 { color: var(--brand); background: url(img/bg.png) }
+.big-1229 { color: var(--brand); background: url(img/bg.png) }
+.big-1230 { color: var(--brand); background: url(img/bg.png) }
+.big-1231 { color: var(--brand); background: url(img/bg.png) }
+.big-1232 { color: var(--brand); background: url(img/bg.png) }
+.big-1233 { color: var(--brand); background: url(img/bg.png) }
+.big-1234 { color: var(--brand); background: url(img/bg.png) }
+.big-1235 { color: var(--brand); background: url(img/bg.png) }
+.big-1236 { color: var(--brand); background: url(img/bg.png) }
+.big-1237 { color: var(--brand); background: url(img/bg.png) }
+.big-1238 { color: var(--brand); background: url(img/bg.png) }
+.big-1239 { color: var(--brand); background: url(img/bg.png) }
+.big-1240 { color: var(--brand); background: url(img/bg.png) }
+.big-1241 { color: var(--brand); background: url(img/bg.png) }
+.big-1242 { color: var(--brand); background: url(img/bg.png) }
+.big-1243 { color: var(--brand); background: url(img/bg.png) }
+.big-1244 { color: var(--brand); background: url(img/bg.png) }
+.big-1245 { color: var(--brand); background: url(img/bg.png) }
+.big-1246 { color: var(--brand); background: url(img/bg.png) }
+.big-1247 { color: var(--brand); background: url(img/bg.png) }
+.big-1248 { color: var(--brand); background: url(img/bg.png) }
+.big-1249 { color: var(--brand); background: url(img/bg.png) }
+.big-1250 { color: var(--brand); background: url(img/bg.png) }
+.big-1251 { color: var(--brand); background: url(img/bg.png) }
+.big-1252 { color: var(--brand); background: url(img/bg.png) }
+.big-1253 { color: var(--brand); background: url(img/bg.png) }
+.big-1254 { color: var(--brand); background: url(img/bg.png) }
+.big-1255 { color: var(--brand); background: url(img/bg.png) }
+.big-1256 { color: var(--brand); background: url(img/bg.png) }
+.big-1257 { color: var(--brand); background: url(img/bg.png) }
+.big-1258 { color: var(--brand); background: url(img/bg.png) }
+.big-1259 { color: var(--brand); background: url(img/bg.png) }
+.big-1260 { color: var(--brand); background: url(img/bg.png) }
+.big-1261 { color: var(--brand); background: url(img/bg.png) }
+.big-1262 { color: var(--brand); background: url(img/bg.png) }
+.big-1263 { color: var(--brand); background: url(img/bg.png) }
+.big-1264 { color: var(--brand); background: url(img/bg.png) }
+.big-1265 { color: var(--brand); background: url(img/bg.png) }
+.big-1266 { color: var(--brand); background: url(img/bg.png) }
+.big-1267 { color: var(--brand); background: url(img/bg.png) }
+.big-1268 { color: var(--brand); background: url(img/bg.png) }
+.big-1269 { color: var(--brand); background: url(img/bg.png) }
+.big-1270 { color: var(--brand); background: url(img/bg.png) }
+.big-1271 { color: var(--brand); background: url(img/bg.png) }
+.big-1272 { color: var(--brand); background: url(img/bg.png) }
+.big-1273 { color: var(--brand); background: url(img/bg.png) }
+.big-1274 { color: var(--brand); background: url(img/bg.png) }
+.big-1275 { color: var(--brand); background: url(img/bg.png) }
+.big-1276 { color: var(--brand); background: url(img/bg.png) }
+.big-1277 { color: var(--brand); background: url(img/bg.png) }
+.big-1278 { color: var(--brand); background: url(img/bg.png) }
+.big-1279 { color: var(--brand); background: url(img/bg.png) }
+.big-1280 { color: var(--brand); background: url(img/bg.png) }
+.big-1281 { color: var(--brand); background: url(img/bg.png) }
+.big-1282 { color: var(--brand); background: url(img/bg.png) }
+.big-1283 { color: var(--brand); background: url(img/bg.png) }
+.big-1284 { color: var(--brand); background: url(img/bg.png) }
+.big-1285 { color: var(--brand); background: url(img/bg.png) }
+.big-1286 { color: var(--brand); background: url(img/bg.png) }
+.big-1287 { color: var(--brand); background: url(img/bg.png) }
+.big-1288 { color: var(--brand); background: url(img/bg.png) }
+.big-1289 { color: var(--brand); background: url(img/bg.png) }
+.big-1290 { color: var(--brand); background: url(img/bg.png) }
+.big-1291 { color: var(--brand); background: url(img/bg.png) }
+.big-1292 { color: var(--brand); background: url(img/bg.png) }
+.big-1293 { color: var(--brand); background: url(img/bg.png) }
+.big-1294 { color: var(--brand); background: url(img/bg.png) }
+.big-1295 { color: var(--brand); background: url(img/bg.png) }
+.big-1296 { color: var(--brand); background: url(img/bg.png) }
+.big-1297 { color: var(--brand); background: url(img/bg.png) }
+.big-1298 { color: var(--brand); background: url(img/bg.png) }
+.big-1299 { color: var(--brand); background: url(img/bg.png) }
+.big-1300 { color: var(--brand); background: url(img/bg.png) }
+.big-1301 { color: var(--brand); background: url(img/bg.png) }
+.big-1302 { color: var(--brand); background: url(img/bg.png) }
+.big-1303 { color: var(--brand); background: url(img/bg.png) }
+.big-1304 { color: var(--brand); background: url(img/bg.png) }
+.big-1305 { color: var(--brand); background: url(img/bg.png) }
+.big-1306 { color: var(--brand); background: url(img/bg.png) }
+.big-1307 { color: var(--brand); background: url(img/bg.png) }
+.big-1308 { color: var(--brand); background: url(img/bg.png) }
+.big-1309 { color: var(--brand); background: url(img/bg.png) }
+.big-1310 { color: var(--brand); background: url(img/bg.png) }
+.big-1311 { color: var(--brand); background: url(img/bg.png) }
+.big-1312 { color: var(--brand); background: url(img/bg.png) }
+.big-1313 { color: var(--brand); background: url(img/bg.png) }
+.big-1314 { color: var(--brand); background: url(img/bg.png) }
+.big-1315 { color: var(--brand); background: url(img/bg.png) }
+.big-1316 { color: var(--brand); background: url(img/bg.png) }
+.big-1317 { color: var(--brand); background: url(img/bg.png) }
+.big-1318 { color: var(--brand); background: url(img/bg.png) }
+.big-1319 { color: var(--brand); background: url(img/bg.png) }
+.big-1320 { color: var(--brand); background: url(img/bg.png) }
+.big-1321 { color: var(--brand); background: url(img/bg.png) }
+.big-1322 { color: var(--brand); background: url(img/bg.png) }
+.big-1323 { color: var(--brand); background: url(img/bg.png) }
+.big-1324 { color: var(--brand); background: url(img/bg.png) }
+.big-1325 { color: var(--brand); background: url(img/bg.png) }
+.big-1326 { color: var(--brand); background: url(img/bg.png) }
+.big-1327 { color: var(--brand); background: url(img/bg.png) }
+.big-1328 { color: var(--brand); background: url(img/bg.png) }
+.big-1329 { color: var(--brand); background: url(img/bg.png) }
+.big-1330 { color: var(--brand); background: url(img/bg.png) }
+.big-1331 { color: var(--brand); background: url(img/bg.png) }
+.big-1332 { color: var(--brand); background: url(img/bg.png) }
+.big-1333 { color: var(--brand); background: url(img/bg.png) }
+.big-1334 { color: var(--brand); background: url(img/bg.png) }
+.big-1335 { color: var(--brand); background: url(img/bg.png) }
+.big-1336 { color: var(--brand); background: url(img/bg.png) }
+.big-1337 { color: var(--brand); background: url(img/bg.png) }
+.big-1338 { color: var(--brand); background: url(img/bg.png) }
+.big-1339 { color: var(--brand); background: url(img/bg.png) }
+.big-1340 { color: var(--brand); background: url(img/bg.png) }
+.big-1341 { color: var(--brand); background: url(img/bg.png) }
+.big-1342 { color: var(--brand); background: url(img/bg.png) }
+.big-1343 { color: var(--brand); background: url(img/bg.png) }
+.big-1344 { color: var(--brand); background: url(img/bg.png) }
+.big-1345 { color: var(--brand); background: url(img/bg.png) }
+.big-1346 { color: var(--brand); background: url(img/bg.png) }
+.big-1347 { color: var(--brand); background: url(img/bg.png) }
+.big-1348 { color: var(--brand); background: url(img/bg.png) }
+.big-1349 { color: var(--brand); background: url(img/bg.png) }
+.big-1350 { color: var(--brand); background: url(img/bg.png) }
+.big-1351 { color: var(--brand); background: url(img/bg.png) }
+.big-1352 { color: var(--brand); background: url(img/bg.png) }
+.big-1353 { color: var(--brand); background: url(img/bg.png) }
+.big-1354 { color: var(--brand); background: url(img/bg.png) }
+.big-1355 { color: var(--brand); background: url(img/bg.png) }
+.big-1356 { color: var(--brand); background: url(img/bg.png) }
+.big-1357 { color: var(--brand); background: url(img/bg.png) }
+.big-1358 { color: var(--brand); background: url(img/bg.png) }
+.big-1359 { color: var(--brand); background: url(img/bg.png) }
+.big-1360 { color: var(--brand); background: url(img/bg.png) }
+.big-1361 { color: var(--brand); background: url(img/bg.png) }
+.big-1362 { color: var(--brand); background: url(img/bg.png) }
+.big-1363 { color: var(--brand); background: url(img/bg.png) }
+.big-1364 { color: var(--brand); background: url(img/bg.png) }
+.big-1365 { color: var(--brand); background: url(img/bg.png) }
+.big-1366 { color: var(--brand); background: url(img/bg.png) }
+.big-1367 { color: var(--brand); background: url(img/bg.png) }
+.big-1368 { color: var(--brand); background: url(img/bg.png) }
+.big-1369 { color: var(--brand); background: url(img/bg.png) }
+.big-1370 { color: var(--brand); background: url(img/bg.png) }
+.big-1371 { color: var(--brand); background: url(img/bg.png) }
+.big-1372 { color: var(--brand); background: url(img/bg.png) }
+.big-1373 { color: var(--brand); background: url(img/bg.png) }
+.big-1374 { color: var(--brand); background: url(img/bg.png) }
+.big-1375 { color: var(--brand); background: url(img/bg.png) }
+.big-1376 { color: var(--brand); background: url(img/bg.png) }
+.big-1377 { color: var(--brand); background: url(img/bg.png) }
+.big-1378 { color: var(--brand); background: url(img/bg.png) }
+.big-1379 { color: var(--brand); background: url(img/bg.png) }
+.big-1380 { color: var(--brand); background: url(img/bg.png) }
+.big-1381 { color: var(--brand); background: url(img/bg.png) }
+.big-1382 { color: var(--brand); background: url(img/bg.png) }
+.big-1383 { color: var(--brand); background: url(img/bg.png) }
+.big-1384 { color: var(--brand); background: url(img/bg.png) }
+.big-1385 { color: var(--brand); background: url(img/bg.png) }
+.big-1386 { color: var(--brand); background: url(img/bg.png) }
+.big-1387 { color: var(--brand); background: url(img/bg.png) }
+.big-1388 { color: var(--brand); background: url(img/bg.png) }
+.big-1389 { color: var(--brand); background: url(img/bg.png) }
+.big-1390 { color: var(--brand); background: url(img/bg.png) }
+.big-1391 { color: var(--brand); background: url(img/bg.png) }
+.big-1392 { color: var(--brand); background: url(img/bg.png) }
+.big-1393 { color: var(--brand); background: url(img/bg.png) }
+.big-1394 { color: var(--brand); background: url(img/bg.png) }
+.big-1395 { color: var(--brand); background: url(img/bg.png) }
+.big-1396 { color: var(--brand); background: url(img/bg.png) }
+.big-1397 { color: var(--brand); background: url(img/bg.png) }
+.big-1398 { color: var(--brand); background: url(img/bg.png) }
+.big-1399 { color: var(--brand); background: url(img/bg.png) }
+.big-1400 { color: var(--brand); background: url(img/bg.png) }
+.big-1401 { color: var(--brand); background: url(img/bg.png) }
+.big-1402 { color: var(--brand); background: url(img/bg.png) }
+.big-1403 { color: var(--brand); background: url(img/bg.png) }
+.big-1404 { color: var(--brand); background: url(img/bg.png) }
+.big-1405 { color: var(--brand); background: url(img/bg.png) }
+.big-1406 { color: var(--brand); background: url(img/bg.png) }
+.big-1407 { color: var(--brand); background: url(img/bg.png) }
+.big-1408 { color: var(--brand); background: url(img/bg.png) }
+.big-1409 { color: var(--brand); background: url(img/bg.png) }
+.big-1410 { color: var(--brand); background: url(img/bg.png) }
+.big-1411 { color: var(--brand); background: url(img/bg.png) }
+.big-1412 { color: var(--brand); background: url(img/bg.png) }
+.big-1413 { color: var(--brand); background: url(img/bg.png) }
+.big-1414 { color: var(--brand); background: url(img/bg.png) }
+.big-1415 { color: var(--brand); background: url(img/bg.png) }
+.big-1416 { color: var(--brand); background: url(img/bg.png) }
+.big-1417 { color: var(--brand); background: url(img/bg.png) }
+.big-1418 { color: var(--brand); background: url(img/bg.png) }
+.big-1419 { color: var(--brand); background: url(img/bg.png) }
+.big-1420 { color: var(--brand); background: url(img/bg.png) }
+.big-1421 { color: var(--brand); background: url(img/bg.png) }
+.big-1422 { color: var(--brand); background: url(img/bg.png) }
+.big-1423 { color: var(--brand); background: url(img/bg.png) }
+.big-1424 { color: var(--brand); background: url(img/bg.png) }
+.big-1425 { color: var(--brand); background: url(img/bg.png) }
+.big-1426 { color: var(--brand); background: url(img/bg.png) }
+.big-1427 { color: var(--brand); background: url(img/bg.png) }
+.big-1428 { color: var(--brand); background: url(img/bg.png) }
+.big-1429 { color: var(--brand); background: url(img/bg.png) }
+.big-1430 { color: var(--brand); background: url(img/bg.png) }
+.big-1431 { color: var(--brand); background: url(img/bg.png) }
+.big-1432 { color: var(--brand); background: url(img/bg.png) }
+.big-1433 { color: var(--brand); background: url(img/bg.png) }
+.big-1434 { color: var(--brand); background: url(img/bg.png) }
+.big-1435 { color: var(--brand); background: url(img/bg.png) }
+.big-1436 { color: var(--brand); background: url(img/bg.png) }
+.big-1437 { color: var(--brand); background: url(img/bg.png) }
+.big-1438 { color: var(--brand); background: url(img/bg.png) }
+.big-1439 { color: var(--brand); background: url(img/bg.png) }
+.big-1440 { color: var(--brand); background: url(img/bg.png) }
+.big-1441 { color: var(--brand); background: url(img/bg.png) }
+.big-1442 { color: var(--brand); background: url(img/bg.png) }
+.big-1443 { color: var(--brand); background: url(img/bg.png) }
+.big-1444 { color: var(--brand); background: url(img/bg.png) }
+.big-1445 { color: var(--brand); background: url(img/bg.png) }
+.big-1446 { color: var(--brand); background: url(img/bg.png) }
+.big-1447 { color: var(--brand); background: url(img/bg.png) }
+.big-1448 { color: var(--brand); background: url(img/bg.png) }
+.big-1449 { color: var(--brand); background: url(img/bg.png) }
+.big-1450 { color: var(--brand); background: url(img/bg.png) }
+.big-1451 { color: var(--brand); background: url(img/bg.png) }
+.big-1452 { color: var(--brand); background: url(img/bg.png) }
+.big-1453 { color: var(--brand); background: url(img/bg.png) }
+.big-1454 { color: var(--brand); background: url(img/bg.png) }
+.big-1455 { color: var(--brand); background: url(img/bg.png) }
+.big-1456 { color: var(--brand); background: url(img/bg.png) }
+.big-1457 { color: var(--brand); background: url(img/bg.png) }
+.big-1458 { color: var(--brand); background: url(img/bg.png) }
+.big-1459 { color: var(--brand); background: url(img/bg.png) }
+.big-1460 { color: var(--brand); background: url(img/bg.png) }
+.big-1461 { color: var(--brand); background: url(img/bg.png) }
+.big-1462 { color: var(--brand); background: url(img/bg.png) }
+.big-1463 { color: var(--brand); background: url(img/bg.png) }
+.big-1464 { color: var(--brand); background: url(img/bg.png) }
+.big-1465 { color: var(--brand); background: url(img/bg.png) }
+.big-1466 { color: var(--brand); background: url(img/bg.png) }
+.big-1467 { color: var(--brand); background: url(img/bg.png) }
+.big-1468 { color: var(--brand); background: url(img/bg.png) }
+.big-1469 { color: var(--brand); background: url(img/bg.png) }
+.big-1470 { color: var(--brand); background: url(img/bg.png) }
+.big-1471 { color: var(--brand); background: url(img/bg.png) }
+.big-1472 { color: var(--brand); background: url(img/bg.png) }
+.big-1473 { color: var(--brand); background: url(img/bg.png) }
+.big-1474 { color: var(--brand); background: url(img/bg.png) }
+.big-1475 { color: var(--brand); background: url(img/bg.png) }
+.big-1476 { color: var(--brand); background: url(img/bg.png) }
+.big-1477 { color: var(--brand); background: url(img/bg.png) }
+.big-1478 { color: var(--brand); background: url(img/bg.png) }
+.big-1479 { color: var(--brand); background: url(img/bg.png) }
+.big-1480 { color: var(--brand); background: url(img/bg.png) }
+.big-1481 { color: var(--brand); background: url(img/bg.png) }
+.big-1482 { color: var(--brand); background: url(img/bg.png) }
+.big-1483 { color: var(--brand); background: url(img/bg.png) }
+.big-1484 { color: var(--brand); background: url(img/bg.png) }
+.big-1485 { color: var(--brand); background: url(img/bg.png) }
+.big-1486 { color: var(--brand); background: url(img/bg.png) }
+.big-1487 { color: var(--brand); background: url(img/bg.png) }
+.big-1488 { color: var(--brand); background: url(img/bg.png) }
+.big-1489 { color: var(--brand); background: url(img/bg.png) }
+.big-1490 { color: var(--brand); background: url(img/bg.png) }
+.big-1491 { color: var(--brand); background: url(img/bg.png) }
+.big-1492 { color: var(--brand); background: url(img/bg.png) }
+.big-1493 { color: var(--brand); background: url(img/bg.png) }
+.big-1494 { color: var(--brand); background: url(img/bg.png) }
+.big-1495 { color: var(--brand); background: url(img/bg.png) }
+.big-1496 { color: var(--brand); background: url(img/bg.png) }
+.big-1497 { color: var(--brand); background: url(img/bg.png) }
+.big-1498 { color: var(--brand); background: url(img/bg.png) }
+.big-1499 { color: var(--brand); background: url(img/bg.png) }
diff --git a/parser/src/test-data/web/torture/css/bom.css b/parser/src/test-data/web/torture/css/bom.css
new file mode 100644
index 000000000..53fd637ba
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/bom.css
@@ -0,0 +1 @@
+.bom-class { color: red }
diff --git a/parser/src/test-data/web/torture/css/disabled.css b/parser/src/test-data/web/torture/css/disabled.css
new file mode 100644
index 000000000..bc3d0dc63
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/disabled.css
@@ -0,0 +1 @@
+.disabled-only { color: red }
diff --git a/parser/src/test-data/web/torture/css/fonts.css b/parser/src/test-data/web/torture/css/fonts.css
new file mode 100644
index 000000000..d4d5fefe0
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/fonts.css
@@ -0,0 +1,38 @@
+/* F01 font faces: multiple src, local(), format(), tech(), unicode-range; and the families that use them */
+@font-face {
+  font-family: "Inter";
+  src: local("Inter"), local(Inter-Regular),
+       url(../fonts/inter.woff2) format("woff2") tech(variations),
+       url("../fonts/inter.woff") format("woff"),
+       url(../fonts/missing.woff) format("woff"),
+       url(https://fonts.example.com/inter.woff2);
+  font-weight: 100 900;
+  unicode-range: U+0000-00FF, U+0131;
+  font-display: swap;
+}
+@font-face { font-family: Inter; src: url(../fonts/inter.woff2); font-weight: bold }
+@font-face { font-family: 'Roboto Mono'; src: url(../fonts/roboto.woff2) }
+@font-face { font-family: "Unused Face"; src: url(../fonts/unused.woff2) }
+@font-face { src: url(../fonts/nameless.woff2) }
+@font-face { font-family: var(--font); src: url(../fonts/x.woff2) }
+@font-face { font-family: "Segoe UI"; src: local("Segoe UI") }
+.f1 { font-family: Inter }
+.f2 { font-family: "Inter" }
+.f3 { font-family: 'Inter' }
+.f4 { font-family: inter }                           /* case-insensitive match in browsers */
+.f5 { font-family: Roboto Mono, monospace }
+.f6 { font-family: "Roboto Mono", monospace }
+.f7 { font-family: Segoe UI, Inter, Arial, sans-serif }
+.f8 { font: 12px Inter }
+.f9 { font: bold 12px/1 "Roboto Mono", monospace }
+.f10 { font: italic small-caps bold condensed 16px/2 cursive }
+.f11 { font: caption }
+.f12 { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto }
+.f13 { font-family: "Nonexistent Face" }
+.f14 { font-family: Inter !important }
+.f15 { font-family: var(--font, Inter) }
+.f16 { font-family: "Inter", }
+.f17 { font-family: , Inter }
+.f18 { font-family: "Inter"Inter }
+.f19 { font-family: Inter Inter }
+.f20 { font-family: "Inter" "Inter" }
diff --git a/parser/src/test-data/web/torture/css/gaps-many.css b/parser/src/test-data/web/torture/css/gaps-many.css
new file mode 100644
index 000000000..c9582e343
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/gaps-many.css
@@ -0,0 +1,300 @@
+.k0 { color: rgb(1, }
+.k1 { color: rgb(1, }
+.k2 { color: rgb(1, }
+.k3 { color: rgb(1, }
+.k4 { color: rgb(1, }
+.k5 { color: rgb(1, }
+.k6 { color: rgb(1, }
+.k7 { color: rgb(1, }
+.k8 { color: rgb(1, }
+.k9 { color: rgb(1, }
+.k10 { color: rgb(1, }
+.k11 { color: rgb(1, }
+.k12 { color: rgb(1, }
+.k13 { color: rgb(1, }
+.k14 { color: rgb(1, }
+.k15 { color: rgb(1, }
+.k16 { color: rgb(1, }
+.k17 { color: rgb(1, }
+.k18 { color: rgb(1, }
+.k19 { color: rgb(1, }
+.k20 { color: rgb(1, }
+.k21 { color: rgb(1, }
+.k22 { color: rgb(1, }
+.k23 { color: rgb(1, }
+.k24 { color: rgb(1, }
+.k25 { color: rgb(1, }
+.k26 { color: rgb(1, }
+.k27 { color: rgb(1, }
+.k28 { color: rgb(1, }
+.k29 { color: rgb(1, }
+.k30 { color: rgb(1, }
+.k31 { color: rgb(1, }
+.k32 { color: rgb(1, }
+.k33 { color: rgb(1, }
+.k34 { color: rgb(1, }
+.k35 { color: rgb(1, }
+.k36 { color: rgb(1, }
+.k37 { color: rgb(1, }
+.k38 { color: rgb(1, }
+.k39 { color: rgb(1, }
+.k40 { color: rgb(1, }
+.k41 { color: rgb(1, }
+.k42 { color: rgb(1, }
+.k43 { color: rgb(1, }
+.k44 { color: rgb(1, }
+.k45 { color: rgb(1, }
+.k46 { color: rgb(1, }
+.k47 { color: rgb(1, }
+.k48 { color: rgb(1, }
+.k49 { color: rgb(1, }
+.k50 { color: rgb(1, }
+.k51 { color: rgb(1, }
+.k52 { color: rgb(1, }
+.k53 { color: rgb(1, }
+.k54 { color: rgb(1, }
+.k55 { color: rgb(1, }
+.k56 { color: rgb(1, }
+.k57 { color: rgb(1, }
+.k58 { color: rgb(1, }
+.k59 { color: rgb(1, }
+.k60 { color: rgb(1, }
+.k61 { color: rgb(1, }
+.k62 { color: rgb(1, }
+.k63 { color: rgb(1, }
+.k64 { color: rgb(1, }
+.k65 { color: rgb(1, }
+.k66 { color: rgb(1, }
+.k67 { color: rgb(1, }
+.k68 { color: rgb(1, }
+.k69 { color: rgb(1, }
+.k70 { color: rgb(1, }
+.k71 { color: rgb(1, }
+.k72 { color: rgb(1, }
+.k73 { color: rgb(1, }
+.k74 { color: rgb(1, }
+.k75 { color: rgb(1, }
+.k76 { color: rgb(1, }
+.k77 { color: rgb(1, }
+.k78 { color: rgb(1, }
+.k79 { color: rgb(1, }
+.k80 { color: rgb(1, }
+.k81 { color: rgb(1, }
+.k82 { color: rgb(1, }
+.k83 { color: rgb(1, }
+.k84 { color: rgb(1, }
+.k85 { color: rgb(1, }
+.k86 { color: rgb(1, }
+.k87 { color: rgb(1, }
+.k88 { color: rgb(1, }
+.k89 { color: rgb(1, }
+.k90 { color: rgb(1, }
+.k91 { color: rgb(1, }
+.k92 { color: rgb(1, }
+.k93 { color: rgb(1, }
+.k94 { color: rgb(1, }
+.k95 { color: rgb(1, }
+.k96 { color: rgb(1, }
+.k97 { color: rgb(1, }
+.k98 { color: rgb(1, }
+.k99 { color: rgb(1, }
+.k100 { color: rgb(1, }
+.k101 { color: rgb(1, }
+.k102 { color: rgb(1, }
+.k103 { color: rgb(1, }
+.k104 { color: rgb(1, }
+.k105 { color: rgb(1, }
+.k106 { color: rgb(1, }
+.k107 { color: rgb(1, }
+.k108 { color: rgb(1, }
+.k109 { color: rgb(1, }
+.k110 { color: rgb(1, }
+.k111 { color: rgb(1, }
+.k112 { color: rgb(1, }
+.k113 { color: rgb(1, }
+.k114 { color: rgb(1, }
+.k115 { color: rgb(1, }
+.k116 { color: rgb(1, }
+.k117 { color: rgb(1, }
+.k118 { color: rgb(1, }
+.k119 { color: rgb(1, }
+.k120 { color: rgb(1, }
+.k121 { color: rgb(1, }
+.k122 { color: rgb(1, }
+.k123 { color: rgb(1, }
+.k124 { color: rgb(1, }
+.k125 { color: rgb(1, }
+.k126 { color: rgb(1, }
+.k127 { color: rgb(1, }
+.k128 { color: rgb(1, }
+.k129 { color: rgb(1, }
+.k130 { color: rgb(1, }
+.k131 { color: rgb(1, }
+.k132 { color: rgb(1, }
+.k133 { color: rgb(1, }
+.k134 { color: rgb(1, }
+.k135 { color: rgb(1, }
+.k136 { color: rgb(1, }
+.k137 { color: rgb(1, }
+.k138 { color: rgb(1, }
+.k139 { color: rgb(1, }
+.k140 { color: rgb(1, }
+.k141 { color: rgb(1, }
+.k142 { color: rgb(1, }
+.k143 { color: rgb(1, }
+.k144 { color: rgb(1, }
+.k145 { color: rgb(1, }
+.k146 { color: rgb(1, }
+.k147 { color: rgb(1, }
+.k148 { color: rgb(1, }
+.k149 { color: rgb(1, }
+.k150 { color: rgb(1, }
+.k151 { color: rgb(1, }
+.k152 { color: rgb(1, }
+.k153 { color: rgb(1, }
+.k154 { color: rgb(1, }
+.k155 { color: rgb(1, }
+.k156 { color: rgb(1, }
+.k157 { color: rgb(1, }
+.k158 { color: rgb(1, }
+.k159 { color: rgb(1, }
+.k160 { color: rgb(1, }
+.k161 { color: rgb(1, }
+.k162 { color: rgb(1, }
+.k163 { color: rgb(1, }
+.k164 { color: rgb(1, }
+.k165 { color: rgb(1, }
+.k166 { color: rgb(1, }
+.k167 { color: rgb(1, }
+.k168 { color: rgb(1, }
+.k169 { color: rgb(1, }
+.k170 { color: rgb(1, }
+.k171 { color: rgb(1, }
+.k172 { color: rgb(1, }
+.k173 { color: rgb(1, }
+.k174 { color: rgb(1, }
+.k175 { color: rgb(1, }
+.k176 { color: rgb(1, }
+.k177 { color: rgb(1, }
+.k178 { color: rgb(1, }
+.k179 { color: rgb(1, }
+.k180 { color: rgb(1, }
+.k181 { color: rgb(1, }
+.k182 { color: rgb(1, }
+.k183 { color: rgb(1, }
+.k184 { color: rgb(1, }
+.k185 { color: rgb(1, }
+.k186 { color: rgb(1, }
+.k187 { color: rgb(1, }
+.k188 { color: rgb(1, }
+.k189 { color: rgb(1, }
+.k190 { color: rgb(1, }
+.k191 { color: rgb(1, }
+.k192 { color: rgb(1, }
+.k193 { color: rgb(1, }
+.k194 { color: rgb(1, }
+.k195 { color: rgb(1, }
+.k196 { color: rgb(1, }
+.k197 { color: rgb(1, }
+.k198 { color: rgb(1, }
+.k199 { color: rgb(1, }
+.k200 { color: rgb(1, }
+.k201 { color: rgb(1, }
+.k202 { color: rgb(1, }
+.k203 { color: rgb(1, }
+.k204 { color: rgb(1, }
+.k205 { color: rgb(1, }
+.k206 { color: rgb(1, }
+.k207 { color: rgb(1, }
+.k208 { color: rgb(1, }
+.k209 { color: rgb(1, }
+.k210 { color: rgb(1, }
+.k211 { color: rgb(1, }
+.k212 { color: rgb(1, }
+.k213 { color: rgb(1, }
+.k214 { color: rgb(1, }
+.k215 { color: rgb(1, }
+.k216 { color: rgb(1, }
+.k217 { color: rgb(1, }
+.k218 { color: rgb(1, }
+.k219 { color: rgb(1, }
+.k220 { color: rgb(1, }
+.k221 { color: rgb(1, }
+.k222 { color: rgb(1, }
+.k223 { color: rgb(1, }
+.k224 { color: rgb(1, }
+.k225 { color: rgb(1, }
+.k226 { color: rgb(1, }
+.k227 { color: rgb(1, }
+.k228 { color: rgb(1, }
+.k229 { color: rgb(1, }
+.k230 { color: rgb(1, }
+.k231 { color: rgb(1, }
+.k232 { color: rgb(1, }
+.k233 { color: rgb(1, }
+.k234 { color: rgb(1, }
+.k235 { color: rgb(1, }
+.k236 { color: rgb(1, }
+.k237 { color: rgb(1, }
+.k238 { color: rgb(1, }
+.k239 { color: rgb(1, }
+.k240 { color: rgb(1, }
+.k241 { color: rgb(1, }
+.k242 { color: rgb(1, }
+.k243 { color: rgb(1, }
+.k244 { color: rgb(1, }
+.k245 { color: rgb(1, }
+.k246 { color: rgb(1, }
+.k247 { color: rgb(1, }
+.k248 { color: rgb(1, }
+.k249 { color: rgb(1, }
+.k250 { color: rgb(1, }
+.k251 { color: rgb(1, }
+.k252 { color: rgb(1, }
+.k253 { color: rgb(1, }
+.k254 { color: rgb(1, }
+.k255 { color: rgb(1, }
+.k256 { color: rgb(1, }
+.k257 { color: rgb(1, }
+.k258 { color: rgb(1, }
+.k259 { color: rgb(1, }
+.k260 { color: rgb(1, }
+.k261 { color: rgb(1, }
+.k262 { color: rgb(1, }
+.k263 { color: rgb(1, }
+.k264 { color: rgb(1, }
+.k265 { color: rgb(1, }
+.k266 { color: rgb(1, }
+.k267 { color: rgb(1, }
+.k268 { color: rgb(1, }
+.k269 { color: rgb(1, }
+.k270 { color: rgb(1, }
+.k271 { color: rgb(1, }
+.k272 { color: rgb(1, }
+.k273 { color: rgb(1, }
+.k274 { color: rgb(1, }
+.k275 { color: rgb(1, }
+.k276 { color: rgb(1, }
+.k277 { color: rgb(1, }
+.k278 { color: rgb(1, }
+.k279 { color: rgb(1, }
+.k280 { color: rgb(1, }
+.k281 { color: rgb(1, }
+.k282 { color: rgb(1, }
+.k283 { color: rgb(1, }
+.k284 { color: rgb(1, }
+.k285 { color: rgb(1, }
+.k286 { color: rgb(1, }
+.k287 { color: rgb(1, }
+.k288 { color: rgb(1, }
+.k289 { color: rgb(1, }
+.k290 { color: rgb(1, }
+.k291 { color: rgb(1, }
+.k292 { color: rgb(1, }
+.k293 { color: rgb(1, }
+.k294 { color: rgb(1, }
+.k295 { color: rgb(1, }
+.k296 { color: rgb(1, }
+.k297 { color: rgb(1, }
+.k298 { color: rgb(1, }
+.k299 { color: rgb(1, }
diff --git a/parser/src/test-data/web/torture/css/gaps.css b/parser/src/test-data/web/torture/css/gaps.css
new file mode 100644
index 000000000..5f8559ef5
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/gaps.css
@@ -0,0 +1,34 @@
+/* G01 syntax the grammar must survive, with rows still emitted for the readable rest */
+.before-gaps { color: red }
+.g1 { color: red
+.g2 { color: blue }
+.g3 { color: red }}
+}
+.g4 { ; color: red }
+.g5 { color: red; ; ; }
+.g6 { color }
+.g7 { : }
+.g8 { @media (x) { color: red } }
+.g9 { color: red } .g10
+.g11 { color: red } }
+@media { .g12 { color: red } }
+@media screen { .g13 { color: red }
+.g14 { color: red }
+@unknown-rule foo { .g15 { color: red } }
+@unknown-statement foo bar;
+@import "late.css";                         /* @import after rules is ignored by browsers */
+@charset "utf-8";                           /* @charset not first is ignored by browsers */
+.g16 { color: red } /* unclosed comment
+.g17 { color: red }
+*/
+.g18 { color: red }
+<!-- .g19 { color: red } -->
+.g20 { color: red }
+.g21 { background: url(img/bg.png }
+.g22 { color: rgb(1, 2 }
+.g23 { width: calc(1px + }
+.g24 { content: "x }
+.g25 { color: red }
+.g26 [ { color: red }
+.g27 ( { color: red }
+.g28 { color: red
diff --git a/parser/src/test-data/web/torture/css/imported-by-style.css b/parser/src/test-data/web/torture/css/imported-by-style.css
new file mode 100644
index 000000000..09a3be8f6
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/imported-by-style.css
@@ -0,0 +1,2 @@
+.imported-by-style { color: red }
+@import "tokens.css";
diff --git a/parser/src/test-data/web/torture/css/layers.css b/parser/src/test-data/web/torture/css/layers.css
new file mode 100644
index 000000000..91288b036
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/layers.css
@@ -0,0 +1,17 @@
+/* L01 cascade layers: statement, block, nested, dotted, anonymous, imported-into, media-wrapped */
+@layer reset, base, components.buttons, components.cards, utilities;
+@layer reset { * { margin: 0 } }
+@layer base { .card { color: red } @layer typography { h1 { font-size: 2rem } } }
+@layer components { @layer buttons { .btn { color: red } } @layer cards { .card { color: blue } } }
+@layer components.cards { .card .item { color: green } }
+@layer base.typography { h2 { font-size: 1rem } }
+@layer { .anonymous { color: red } }
+@media screen { @layer utilities { .u-hide { display: none } } }
+@layer utilities { @media print { .u-hide { display: block } } }
+@import "print.css" layer(print-layer);
+@import "alt.css" layer;
+@layer sub.sub.sub { .deep-layer { color: red } }
+@layer a, b, a;
+@layer reset;
+@layer    spaced   ,   names   ;
+.unlayered { color: red }
diff --git a/parser/src/test-data/web/torture/css/long-line.css b/parser/src/test-data/web/torture/css/long-line.css
new file mode 100644
index 000000000..af1eb44d3
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/long-line.css
@@ -0,0 +1 @@
+.m1{color:red}.m2{color:red}.m3{color:red}.m4{color:red}.m5{color:red}.m6{color:red}.m7{color:red}.m8{color:red}.m9{color:red}.m10{color:red}.m11{color:red}.m12{color:red}.m13{color:red}.m14{color:red}.m15{color:red}.m16{color:red}.m17{color:red}.m18{color:red}.m19{color:red}.m20{color:red}.m21{color:red}.m22{color:red}.m23{color:red}.m24{color:red}.m25{color:red}.m26{color:red}.m27{color:red}.m28{color:red}.m29{color:red}.m30{color:red}.m31{color:red}.m32{color:red}.m33{color:red}.m34{color:red}.m35{color:red}.m36{color:red}.m37{color:red}.m38{color:red}.m39{color:red}.m40{color:red}.m41{color:red}.m42{color:red}.m43{color:red}.m44{color:red}.m45{color:red}.m46{color:red}.m47{color:red}.m48{color:red}.m49{color:red}.m50{color:red}.m51{color:red}.m52{color:red}.m53{color:red}.m54{color:red}.m55{color:red}.m56{color:red}.m57{color:red}.m58{color:red}.m59{color:red}.m60{color:red}.m61{color:red}.m62{color:red}.m63{color:red}.m64{color:red}.m65{color:red}.m66{color:red}.m67{color:red}.m68{color:red}.m69{color:red}.m70{color:red}.m71{color:red}.m72{color:red}.m73{color:red}.m74{color:red}.m75{color:red}.m76{color:red}.m77{color:red}.m78{color:red}.m79{color:red}.m80{color:red}.m81{color:red}.m82{color:red}.m83{color:red}.m84{color:red}.m85{color:red}.m86{color:red}.m87{color:red}.m88{color:red}.m89{color:red}.m90{color:red}.m91{color:red}.m92{color:red}.m93{color:red}.m94{color:red}.m95{color:red}.m96{color:red}.m97{color:red}.m98{color:red}.m99{color:red}.m100{color:red}.m101{color:red}.m102{color:red}.m103{color:red}.m104{color:red}.m105{color:red}.m106{color:red}.m107{color:red}.m108{color:red}.m109{color:red}.m110{color:red}.m111{color:red}.m112{color:red}.m113{color:red}.m114{color:red}.m115{color:red}.m116{color:red}.m117{color:red}.m118{color:red}.m119{color:red}.m120{color:red}.m121{color:red}.m122{color:red}.m123{color:red}.m124{color:red}.m125{color:red}.m126{color:red}.m127{color:red}.m128{color:red}.m129{color:red}.m130{color:red}.m131{color:red}.m132{color:red}.m133{color:red}.m134{color:red}.m135{color:red}.m136{color:red}.m137{color:red}.m138{color:red}.m139{color:red}.m140{color:red}.m141{color:red}.m142{color:red}.m143{color:red}.m144{color:red}.m145{color:red}.m146{color:red}.m147{color:red}.m148{color:red}.m149{color:red}.m150{color:red}.m151{color:red}.m152{color:red}.m153{color:red}.m154{color:red}.m155{color:red}.m156{color:red}.m157{color:red}.m158{color:red}.m159{color:red}.m160{color:red}.m161{color:red}.m162{color:red}.m163{color:red}.m164{color:red}.m165{color:red}.m166{color:red}.m167{color:red}.m168{color:red}.m169{color:red}.m170{color:red}.m171{color:red}.m172{color:red}.m173{color:red}.m174{color:red}.m175{color:red}.m176{color:red}.m177{color:red}.m178{color:red}.m179{color:red}.m180{color:red}.m181{color:red}.m182{color:red}.m183{color:red}.m184{color:red}.m185{color:red}.m186{color:red}.m187{color:red}.m188{color:red}.m189{color:red}.m190{color:red}.m191{color:red}.m192{color:red}.m193{color:red}.m194{color:red}.m195{color:red}.m196{color:red}.m197{color:red}.m198{color:red}.m199{color:red}.m200{color:red}.m201{color:red}.m202{color:red}.m203{color:red}.m204{color:red}.m205{color:red}.m206{color:red}.m207{color:red}.m208{color:red}.m209{color:red}.m210{color:red}.m211{color:red}.m212{color:red}.m213{color:red}.m214{color:red}.m215{color:red}.m216{color:red}.m217{color:red}.m218{color:red}.m219{color:red}.m220{color:red}.m221{color:red}.m222{color:red}.m223{color:red}.m224{color:red}.m225{color:red}.m226{color:red}.m227{color:red}.m228{color:red}.m229{color:red}.m230{color:red}.m231{color:red}.m232{color:red}.m233{color:red}.m234{color:red}.m235{color:red}.m236{color:red}.m237{color:red}.m238{color:red}.m239{color:red}.m240{color:red}.m241{color:red}.m242{color:red}.m243{color:red}.m244{color:red}.m245{color:red}.m246{color:red}.m247{color:red}.m248{color:red}.m249{color:red}.m250{color:red}.m251{color:red}.m252{color:red}.m253{color:red}.m254{color:red}.m255{color:red}.m256{color:red}.m257{color:red}.m258{color:red}.m259{color:red}.m260{color:red}.m261{color:red}.m262{color:red}.m263{color:red}.m264{color:red}.m265{color:red}.m266{color:red}.m267{color:red}.m268{color:red}.m269{color:red}.m270{color:red}.m271{color:red}.m272{color:red}.m273{color:red}.m274{color:red}.m275{color:red}.m276{color:red}.m277{color:red}.m278{color:red}.m279{color:red}.m280{color:red}.m281{color:red}.m282{color:red}.m283{color:red}.m284{color:red}.m285{color:red}.m286{color:red}.m287{color:red}.m288{color:red}.m289{color:red}.m290{color:red}.m291{color:red}.m292{color:red}.m293{color:red}.m294{color:red}.m295{color:red}.m296{color:red}.m297{color:red}.m298{color:red}.m299{color:red}.m300{color:red}.m301{color:red}.m302{color:red}.m303{color:red}.m304{color:red}.m305{color:red}.m306{color:red}.m307{color:red}.m308{color:red}.m309{color:red}.m310{color:red}.m311{color:red}.m312{color:red}.m313{color:red}.m314{color:red}.m315{color:red}.m316{color:red}.m317{color:red}.m318{color:red}.m319{color:red}.m320{color:red}.m321{color:red}.m322{color:red}.m323{color:red}.m324{color:red}.m325{color:red}.m326{color:red}.m327{color:red}.m328{color:red}.m329{color:red}.m330{color:red}.m331{color:red}.m332{color:red}.m333{color:red}.m334{color:red}.m335{color:red}.m336{color:red}.m337{color:red}.m338{color:red}.m339{color:red}.m340{color:red}.m341{color:red}.m342{color:red}.m343{color:red}.m344{color:red}.m345{color:red}.m346{color:red}.m347{color:red}.m348{color:red}.m349{color:red}.m350{color:red}.m351{color:red}.m352{color:red}.m353{color:red}.m354{color:red}.m355{color:red}.m356{color:red}.m357{color:red}.m358{color:red}.m359{color:red}.m360{color:red}.m361{color:red}.m362{color:red}.m363{color:red}.m364{color:red}.m365{color:red}.m366{color:red}.m367{color:red}.m368{color:red}.m369{color:red}.m370{color:red}.m371{color:red}.m372{color:red}.m373{color:red}.m374{color:red}.m375{color:red}.m376{color:red}.m377{color:red}.m378{color:red}.m379{color:red}.m380{color:red}.m381{color:red}.m382{color:red}.m383{color:red}.m384{color:red}.m385{color:red}.m386{color:red}.m387{color:red}.m388{color:red}.m389{color:red}.m390{color:red}.m391{color:red}.m392{color:red}.m393{color:red}.m394{color:red}.m395{color:red}.m396{color:red}.m397{color:red}.m398{color:red}.m399{color:red}.m400{color:red}
\ No newline at end of file
diff --git a/parser/src/test-data/web/torture/css/nested.css b/parser/src/test-data/web/torture/css/nested.css
new file mode 100644
index 000000000..8832cf59a
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/nested.css
@@ -0,0 +1,45 @@
+/* N01 CSS nesting: every & position, implicit nesting, nested at-rules with bare declarations */
+.card {
+  color: red;
+  &:hover { color: blue }
+  & .item { color: green }
+  .item & { color: yellow }
+  & + & { margin: 0 }
+  &.is-active { outline: 1px }
+  &#section-one { outline: 2px }
+  & > .nav, & ~ .nav { color: red }
+  .item, .nav { color: red }                 /* implicit & descendant, two selectors */
+  > .direct { color: red }                   /* leading combinator */
+  + .sib { color: red }
+  ~ .gen { color: red }
+  :hover { color: red }                      /* implicit: &:hover? no, & :hover descendant */
+  .a &, .b & { color: red }
+  &, &.x { color: red }
+  :is(&, .alias) .item { color: red }
+  &:not(.is-active) .item { color: red }
+  .parent & .child { color: red }
+  && { color: red }
+  & & { color: red }
+  @media (min-width: 1px) { color: red; & .item { color: blue } .nested-in-media { color: green } }
+  @supports (display: grid) { display: grid }
+  @container sidebar (min-width: 1px) { color: red }
+  @layer nested-layer { color: red }
+  @scope (.card) { .item { color: red } }
+  @starting-style { opacity: 0 }
+  --nested-var: 1;
+  .deep { .deeper { .deepest { color: var(--nested-var) } } }
+  @media (a) { @media (b) { @supports (c) { .x { color: red } } } }
+  & .item { & .leaf { color: red } }
+  .item { .leaf { color: red } }
+  @nest .parent & { color: red }             /* pre-standard @nest */
+  color: blue;                               /* declaration after nested rules */
+}
+.card.is-active { & .item { color: red } }
+.a, .b { & .c { color: red } .d & { color: red } }
+@media (x) { .outer { .inner { color: red } } }
+@layer l { .outer { & .inner { color: red } } }
+.p { &__elem { color: red } &--mod { color: red } }     /* BEM-style: invalid in CSS nesting, valid in Sass */
+.q { &-suffix { color: red } }
+.r { &:is(.s) { color: red } }
+.t { .u & .v & { color: red } }
+.w { &.x.y > &.z { color: red } }
diff --git a/parser/src/test-data/web/torture/css/norel.css b/parser/src/test-data/web/torture/css/norel.css
new file mode 100644
index 000000000..867918fdd
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/norel.css
@@ -0,0 +1 @@
+.norel-only { color: red }
diff --git a/parser/src/test-data/web/torture/css/print.css b/parser/src/test-data/web/torture/css/print.css
new file mode 100644
index 000000000..8c1f9cba9
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/print.css
@@ -0,0 +1,2 @@
+@media print { .print-rule { color: red } }
+.print-only { color: red }
diff --git a/parser/src/test-data/web/torture/css/sassy.css b/parser/src/test-data/web/torture/css/sassy.css
new file mode 100644
index 000000000..8bb5165e0
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/sassy.css
@@ -0,0 +1,5 @@
+$primary: red;
+@mixin m { color: $primary }
+.sassy { @include m; &__elem { color: red } }
+// line comment
+.x { .y { color: red } }
diff --git a/parser/src/test-data/web/torture/css/selectors.css b/parser/src/test-data/web/torture/css/selectors.css
new file mode 100644
index 000000000..d1bf6329b
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/selectors.css
@@ -0,0 +1,34 @@
+/* E01 escaped identifiers: every form the CSS syntax admits */
+.md\:flex { display: flex }
+.md\3A flex { display: flex }
+.md\00003Aflex { display: flex }
+.w-1\/2 { width: 50% }
+.\31 23 { order: 1 }
+.\31 0 { order: 10 }
+.\-mt-2 { margin: 0 }
+.a\ b { color: red }
+.\@media { color: red }
+.\#hash { color: red }
+.\.dot { color: red }
+.\\backslash { color: red }
+.caf\e9 { color: red }
+.café { color: red }
+.\1F680 { color: red }
+.🚀 { color: red }
+#\31 23 { color: red }
+#id\:colon { color: red }
+[data-x\:y] { color: red }
+[data-x="a\"b"] { color: red }
+svg|rect\:x { color: red }
+.a\,b { color: red }
+.a\>b { color: red }
+.a\&b { color: red }
+.\[\&_svg\]\:size-4 svg { color: red }
+.\!font-bold { color: red }
+.\32 xl\:grid-cols-\[repeat\(auto-fill\2c minmax\(200px\2c 1fr\)\)\] { color: red }
+.group:hover .group-hover\:visible { color: red }
+.peer:checked ~ .peer-checked\:block { color: red }
+.data-\[state\=open\]\:bg-red[data-state="open"] { color: red }
+.aria-\[checked\]\:bg-red[aria-checked] { color: red }
+.supports-\[display\:grid\]\:grid { color: red }
+.has-\[\>img\]\:p-0:has(> img) { color: red }
diff --git a/parser/src/test-data/web/torture/css/strings.css b/parser/src/test-data/web/torture/css/strings.css
new file mode 100644
index 000000000..a87c61972
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/strings.css
@@ -0,0 +1,36 @@
+/* S01 strings and comments that contain CSS syntax */
+.s1 { content: "}" }
+.s2 { content: "{" }
+.s3 { content: ";" }
+.s4 { content: "a; color: red" }
+.s5 { content: "/* not a comment */" }
+.s6 { content: "url(not.png)" }
+.s7 { content: 'var(--not)' }
+.s8 { content: "\"" }
+.s9 { content: '\'' }
+.s10 { content: "\201C \201D" }
+.s11 { content: "line\
+continued" }
+.s12 { content: "unterminated }
+.s13 { color: red }
+.s14 { content: "\"; } .injected { color: red }" }
+.s15 { background: url("a)b.png") }
+.s16 { background: url('a"b.png') }
+.s17 { background: url(a\)b.png) }
+.s18 { font-family: "Font; Name" }
+.s19 { font-family: "Font } Name" }
+.s20 { quotes: "«" "»" }
+.s21 { content: attr(data-page) }
+.s22 { content: counter(a) " / " counter(b) }
+.s23 { grid-template-areas: "header header" "sidebar main" }
+.s24 { content: "{{ not_a_template }}" }
+.s25 { content: "<%= not_erb %>" }
+.s26 { content: "${not_dollar}" }
+.s27[data-x="}"] { color: red }
+.s28[data-x=";"] { color: red }
+.s29[data-x="url(x)"] { color: red }
+.s30:not([data-x="{"]) { color: red }
+/* .s31 { color: red } */
+/* a comment with url(img/bg.png) and var(--x) and .commented-class */
+/* unterminated comment at the end of the file
+.s32 { color: red }
diff --git a/parser/src/test-data/web/torture/css/theme.css b/parser/src/test-data/web/torture/css/theme.css
new file mode 100644
index 000000000..f6f831995
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/theme.css
@@ -0,0 +1,14 @@
+/* K02 the end of the import chain: app -> tokens -> theme; imports tokens back (cycle) */
+@import "tokens.css";
+.theme-light { --brand: #0af }
+.theme-dark { --brand: #a0f }
+@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
+@keyframes spin { from { transform: rotate(0) } 50% { opacity: .5 } to { transform: rotate(1turn) } }
+@keyframes spin { to { transform: rotate(2turn) } }       /* redefinition: the last one wins */
+@keyframes "quoted-name" { to { opacity: 0 } }
+@keyframes ease { to { opacity: 0 } }                     /* a keyframes named like a keyword */
+@keyframes none { to { opacity: 0 } }                     /* invalid name, written anyway */
+@keyframes slide { 0%, 50% { left: 0 } 100% { left: 1px } 33.3% { left: 2px } from, to { left: 3px } }
+@keyframes var-inside { to { color: var(--brand); background: url(img/bg.png) } }
+@-webkit-keyframes spin { to { transform: rotate(0) } }
+@-moz-keyframes spin { to { transform: rotate(0) } }
diff --git a/parser/src/test-data/web/torture/css/tokens.css b/parser/src/test-data/web/torture/css/tokens.css
new file mode 100644
index 000000000..7be1084f4
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/tokens.css
@@ -0,0 +1,35 @@
+/* K01 custom properties: defined at :root, overridden per theme, registered, used in fallbacks and shorthands */
+@import "theme.css";
+:root {
+  --brand: #09f;
+  --gap: 8px;
+  --anchor: var(--brand);
+  --fallback-brand: pink;
+  --font: Inter, sans-serif;
+  --anim: spin;
+  --duration: 1s;
+  --easing: ease-in;
+  --pad: 1px;
+  --wide: 70rem;
+}
+:root.dark, .dark, [data-theme="dark"], html[data-theme=dark] body { --brand: #fff; }
+@media (prefers-color-scheme: dark) { :root { --brand: #000 } }
+@property --brand { syntax: '<color>'; inherits: true; initial-value: red }
+@property --registered-never-used { syntax: '*'; inherits: false }
+.scoped { --gap: 4px; }
+.scoped .child { gap: var(--gap); }
+.uses-undefined { color: var(--undefined-anywhere); }
+.uses-undefined-with-fallback { color: var(--undefined-anywhere, red); }
+.defined-in-style-attr { padding: var(--local); }      /* --local is defined only in a style="" attribute of index.html */
+.var-in-selector-arg:is(.x) { --in-is: 1 }
+.var-name-cases { color: var(--BRAND); color: var( --brand ); color: var(--brand,); color: var(--brand , 1px 2px); color: var(--brand, url(img/bg.png)); color: var(--brand, var(--gap)) }
+.var-not-a-var { color: var(brand); color: var(); color: var(--); }
+.var-in-shorthand { margin: var(--gap) calc(var(--gap) * 2) 0 var(--gap, var(--pad)); }
+.var-in-important { color: var(--brand) !important; }
+.var-in-url { background: url(var(--url)); }           /* not valid CSS, but written */
+.var-in-string { content: "var(--brand)"; }
+.var-in-comment { /* color: var(--commented) */ color: red; }
+.var-in-custom { --alias: var(--brand); --chain: var(--alias); color: var(--chain); }
+.var-in-animation { animation: var(--anim) var(--duration); }
+.var-in-font { font-family: var(--font); font: 12px var(--font); }
+.var-in-container { container-name: var(--container-name); }
diff --git a/parser/src/test-data/web/torture/css/upper.css b/parser/src/test-data/web/torture/css/upper.css
new file mode 100644
index 000000000..f31c03643
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/upper.css
@@ -0,0 +1 @@
+.upper-only { color: red }
diff --git a/parser/src/test-data/web/torture/css/vendor.min.css b/parser/src/test-data/web/torture/css/vendor.min.css
new file mode 100644
index 000000000..154c5ba59
--- /dev/null
+++ b/parser/src/test-data/web/torture/css/vendor.min.css
@@ -0,0 +1 @@
+.vendor{color:red}.card{color:rgb(200,200,200)}
\ No newline at end of file
diff --git a/parser/src/test-data/web/torture/fonts/inter.woff b/parser/src/test-data/web/torture/fonts/inter.woff
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/fonts/inter.woff2 b/parser/src/test-data/web/torture/fonts/inter.woff2
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/forms.html b/parser/src/test-data/web/torture/forms.html
new file mode 100644
index 000000000..b95f45941
--- /dev/null
+++ b/parser/src/test-data/web/torture/forms.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Torture: id references</title>
+  <link rel="stylesheet" href="css/app.css">
+  <link rel="stylesheet" href="css/base.css">
+  <!-- F00 no <base> here: a query string and a fragment on a link, a ../ that escapes the root, cross-page fragments -->
+  <link rel="stylesheet" href="css/base.css?v=abc123#frag">
+  <link rel="stylesheet" href="../../outside.css">
+</head>
+<body>
+  <!-- F01 label/for, input/form, input/list, td/headers, output/for, button/popovertarget, img/usemap -->
+  <form id="the-form" action="/submit" method="post">
+    <label for="q">query</label><input id="q" name="q" type="text">
+    <label for="missing-input">dangling for</label>
+    <label for="  q  ">padded for</label>
+    <label for="Q">case-different for</label>
+    <input list="choices" name="pick"><datalist id="choices"><option value="a"></datalist>
+    <input list="no-such-list">
+    <button formaction="/alt" form="the-form" popovertarget="pop">go</button>
+    <output for="q pick" name="result"></output>
+    <table><tr><th id="h-name">name</th><th id="h-age">age</th></tr><tr><td headers="h-name h-age h-missing">x</td></tr></table>
+  </form>
+  <input form="the-form" name="outside">
+  <input form="not-a-form" name="orphan">
+  <div popover id="pop" class="popover">pop</div>
+  <button popovertarget="no-such-popover">no target</button>
+  <img src="img/logo.png" usemap="#site-map" alt=""><map name="site-map" id="site-map-id"><area href="#the-form" alt=""></map>
+  <img src="img/logo.png" usemap="#no-such-map" alt="">
+  <a name="legacy-anchor">legacy named anchor</a>
+  <a href="#legacy-anchor">to a name, not an id</a>
+  <a href="#the-form">to an id</a>
+  <a href="#The-Form">case-different fragment</a>
+  <a href="#">bare hash</a>
+  <a href="#top">implicit top</a>
+  <a href="index.html#section-one">to the other page</a>
+  <a href="index.html#LOUD">to an uppercase id on the other page</a>
+  <a href="index.html#nope">cross-page fragment, dangling</a>
+  <a href="missing.html#x">cross-page fragment, page missing</a>
+  <iframe name="frame-b" src="index.html"></iframe>
+  <a href="index.html" target="frame-b">targets frame-b</a>
+  <a href="index.html" target="_blank">targets a keyword</a>
+  <div aria-labelledby="h-name h-age"></div>
+  <div aria-owns="pop choices"></div>
+  <div aria-activedescendant="q"></div>
+  <div itemref="h-name h-age" itemscope></div>
+  <menu id="ctx"></menu><div contextmenu="ctx"></div>
+  <button commandfor="pop" command="show-popover"></button>
+  <input id="q">duplicate id with the first input
+</body>
+</html>
diff --git a/parser/src/test-data/web/torture/img/bg.png b/parser/src/test-data/web/torture/img/bg.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/cursor.cur b/parser/src/test-data/web/torture/img/cursor.cur
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/favicon.ico b/parser/src/test-data/web/torture/img/favicon.ico
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/hero.png b/parser/src/test-data/web/torture/img/hero.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/hero.webp b/parser/src/test-data/web/torture/img/hero.webp
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/logo.png b/parser/src/test-data/web/torture/img/logo.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/logo@2x.png b/parser/src/test-data/web/torture/img/logo@2x.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/space name.png b/parser/src/test-data/web/torture/img/space name.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/img/sprite.svg b/parser/src/test-data/web/torture/img/sprite.svg
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/index.html b/parser/src/test-data/web/torture/index.html
new file mode 100644
index 000000000..6dd32a5ac
--- /dev/null
+++ b/parser/src/test-data/web/torture/index.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8">
+  <title>Torture: the main page</title>
+  <!-- T01 base href: every relative URL below is, to a browser, relative to /static/ — not to this file's directory -->
+  <base href="/static/">
+  <!-- T02 stylesheet link variants: plain, alternate, print-only, disabled, preload-as-style, query-string, no rel, uppercase rel -->
+  <link rel="stylesheet" href="css/app.css">
+  <link rel="alternate stylesheet" href="css/alt.css" title="Alt">
+  <link rel="stylesheet" href="css/print.css" media="print">
+  <link rel="stylesheet" href="css/disabled.css" disabled>
+  <link rel="preload" as="style" href="css/base.css" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="stylesheet" href="css/base.css?v=abc123#frag">
+  <link href="css/norel.css">
+  <link REL="StyleSheet" HREF="css/upper.css">
+  <!-- T03 root-relative ambiguity: /css/dup.css exists under both public/ and static/ -->
+  <link rel="stylesheet" href="/css/dup.css">
+  <!-- T04 stylesheet that lives in another project folder, reached by ../ -->
+  <link rel="stylesheet" href="../css/app.css">
+  <link rel="icon" href="img/favicon.ico">
+  <link rel="modulepreload" href="js/module.js">
+  <!-- T05 scripts: classic, module, nomodule, external module, importmap, inline referencing globals -->
+  <script src="js/vendor.js" defer></script>
+  <script type="module" src="js/module.js"></script>
+  <script nomodule src="js/lib.js"></script>
+  <script type="importmap">{ "imports": { "lib": "./js/lib.js" } }</script>
+  <script>
+    // T06 inline classic script: defines globals the handlers below call
+    function track(a, b) { return a + b; }
+    var app = { submit: function (e) { return e; } };
+    document.body.classList.add('js-ready');       // class named only in script text
+    document.getElementById('late-id');             // id named only in script text
+  </script>
+  <!-- T07 inline styles: plain, media-scoped, type=text/less (ignored by browsers), empty, with @import -->
+  <style>
+    .inline-only { color: red; }
+    .md\:flex { display: flex; }                /* T08 escaped colon: HTML writes class="md:flex" */
+    .w-1\/2 { width: 50%; }                     /* escaped slash: HTML writes class="w-1/2" */
+    .\31 23 { order: 1; }                       /* escaped leading digit: HTML writes class="123" */
+    .hover\:bg-blue:hover { background: blue; } /* escaped colon plus a real pseudo-class */
+    .日本語 { font-weight: bold; }               /* unicode class, as written in both */
+    .emoji-🚀 { color: gold; }
+  </style>
+  <style media="print">.print-only { display: none }</style>
+  <style type="text/less">@c: red; .less-only { color: @c }</style>
+  <style></style>
+  <style>@import url("css/imported-by-style.css"); .after-import { color: green }</style>
+</head>
+<body class="home dark" onload="track('load', 1)" data-page="index">
+  <!-- T09 class attribute shapes -->
+  <div class="  spaced&#9;tabbed
+multi-line   dup dup  " id="  padded-id  ">whitespace, tab entity, newline, duplicate token, padded id</div>
+  <div class>valueless class attribute</div>
+  <div class="">empty class attribute</div>
+  <div class="a&amp;b &lt;c&gt; &quot;q&quot;">entity-bearing class tokens</div>
+  <div class="Upper lower MIXED">case variants: CSS .upper must NOT match Upper</div>
+  <DIV CLASS="SHOUT" ID="LOUD">uppercase tag and attribute names</DIV>
+  <div class="first" class="second">duplicate class attribute: first wins, second is a gap</div>
+
+  <!-- T10 id-based joins -->
+  <nav id="main-nav" class="nav">
+    <a href="#section-one">same-page fragment</a>
+    <a href="#missing-anchor">dangling fragment</a>
+    <a href="forms.html#the-form">cross-page fragment, resolvable</a>
+    <a href="forms.html#nope">cross-page fragment, dangling</a>
+    <a href="missing.html#x">cross-page fragment, page missing</a>
+    <a href="">empty href</a>
+    <a href="  index.html  ">padded href</a>
+    <a href="img/space%20name.png">percent-encoded path</a>
+    <a href="img/space name.png">literal space in path</a>
+    <a href="../outside.html">escapes the root</a>
+    <a href="./">directory</a>
+    <a href="css/">directory with slash</a>
+    <a href="INDEX.HTML">case-different name (case-insensitive FS hazard)</a>
+    <a href="tel:+1-555-0100">tel</a>
+    <a href="sms:+15550100?body=hi">sms</a>
+    <a href="file:///etc/hosts">file scheme</a>
+    <a href="C:\Users\x\page.html">windows path reads as scheme c</a>
+    <a href="//cdn.example.com/lib.js">protocol relative</a>
+    <a href="HTTPS://EXAMPLE.COM/A">uppercase scheme</a>
+    <a href="javascript:void(0)" onclick="go(1); return false;">js void plus handler</a>
+    <a href="JavaScript:toggle('nav')">mixed-case javascript scheme</a>
+    <a href="javascript:;">empty javascript</a>
+    <a href="javascript:{{ handler }}">template in javascript url</a>
+    <a href="{{ url_for('home') }}" class="{{ cls }} static-class">template url and template class</a>
+    <a href="/static/{{ name }}.js">template inside path</a>
+    <a href="${ctx}/x.html">dollar brace</a>
+    <a href="<%= path %>">erb</a>
+    <a href="@Url.Action(&quot;Index&quot;)">razor</a>
+    <a href="x.html" ping="/ping1 /ping2">ping list</a>
+    <a href="x.html" target="frame-a">targets a named iframe</a>
+  </nav>
+
+  <section id="section-one" class="card card--wide is-active">
+    <h2 id="section-one">duplicate id on the page</h2>
+    <!-- T11 inline style attribute shapes -->
+    <p style="color: var(--brand); margin:0">var in style attribute</p>
+    <p style="--local: 4px; padding: var(--local)">custom property defined in a style attribute</p>
+    <p style="background: url(img/bg.png) no-repeat; cursor: url(img/cursor.cur), auto">urls in style attribute, relative to the page</p>
+    <p style="background: url(/img/bg.png)">root-relative url in style attribute</p>
+    <p style="color: red !important; font: 12px/1.5 Inter, serif">important and font shorthand</p>
+    <p style="color: {{ color }}">template in style attribute</p>
+    <p style="color red; margin: 0">broken declaration list, second declaration must survive</p>
+    <p style=".x { color: red }">a rule where a declaration list belongs</p>
+    <p style="">empty style</p>
+    <p style="animation: spin 1s infinite; font-family: 'Inter'; container-name: sidebar">keyframes, font, container refs in a style attribute</p>
+    <p style="color: red; } .injected { color: blue">brace in a style attribute</p>
+    <p STYLE="COLOR: RED; Background-Color: Blue">uppercase property names</p>
+  </section>
+
+  <!-- T12 handler shapes -->
+  <button onclick="save()">simple</button>
+  <button onclick="app.submit(event)">member</button>
+  <button onclick="a.b.c.d(1,2,3)">deep member</button>
+  <button onclick="window['save']()">computed member</button>
+  <button onclick="new Widget(this).open()">new then call</button>
+  <button onclick="if (confirm('sure?')) { remove(1); } else { keep() }">three calls</button>
+  <button onclick="(function(){ inner() })()">iife</button>
+  <button onclick="save">no call, bare identifier</button>
+  <button onclick="return false">no call at all</button>
+  <button onclick="">empty handler</button>
+  <button onclick="save(&quot;a&quot;, &apos;b&apos;)">entities in handler</button>
+  <button onclick="save(a, b">unbalanced handler</button>
+  <button onclick="this.classList.toggle('open')">class named in handler string: CSS .open cannot join</button>
+  <button onclick="document.querySelector('#late-id .card')">selector in handler string</button>
+  <button ONCLICK="shout()">uppercase handler attribute</button>
+  <button onClick="camel()">camel-case handler attribute</button>
+  <button on:click="svelte()" @click="vue()" (click)="angular()" v-on:click="vueLong()" x-on:click="alpine()" hx-on:click="htmx()">framework handlers, none are on* attributes</button>
+  <button onclick="{{ handler }}">template handler</button>
+  <button onclick="<%= handler %>">erb handler</button>
+  <button ondblclick="save(); save(); save()">same callee three times</button>
+  <button onmouseover="javascript:hover()">javascript: label inside a handler</button>
+  <button onclick="save?.()">optional call</button>
+  <button onclick="await save()">top-level await in a handler</button>
+  <button onclick="save(...args)">spread</button>
+  <button onclick="save`tpl`">tagged template, not a call expression</button>
+
+  <!-- T13 script type variants -->
+  <script type="text/javascript">classic();</script>
+  <script type="TEXT/JAVASCRIPT">upperClassic();</script>
+  <script type="application/javascript;charset=utf-8">paramClassic();</script>
+  <script type="module">import { init } from './js/app.js'; init();</script>
+  <script type="text/x-template" id="tpl-row"><tr class="tpl-class"><td>{{ name }}</td></tr></script>
+  <script type="text/x-handlebars-template" id="hbs">{{#each items}}<li class="hbs-class">{{this}}</li>{{/each}}</script>
+  <script type="text/html" id="knockout"><div class="ko-class" data-bind="text: name"></div></script>
+  <script type="application/json" id="data">{"a": 1}</script>
+  <script type="application/ld+json">{"@context": "https://schema.org"}</script>
+  <script type="speculationrules">{"prerender": [{"source": "list", "urls": ["forms.html"]}]}</script>
+  <script type="text/babel">const x = <b/>;</script>
+  <script type="text/typescript">let x: number = 1;</script>
+  <script type="text/x-mathjax-config">MathJax.Hub.Config({});</script>
+  <script type="module" src="https://cdn.example.com/esm.js" integrity="sha384-x" crossorigin></script>
+  <script src="js/app.js">ignoredBody();</script>
+  <script src="">emptySrcIsInline();</script>
+  <script src="   ">blankSrcIsInline();</script>
+  <script>
+    // T14 a string that looks like a closing tag, and template literals
+    var s = "<\/script>"; var t = `</div>`;
+  </script>
+  <script>var closesEarly = "</script>"; trailingText();</script>
+
+  <!-- T15 media and embedded documents -->
+  <img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x" sizes="100vw" alt="">
+  <img srcset="img/hero.webp?w=100,200 100w, img/hero.png 200w" alt="comma inside a srcset url">
+  <img src="img/logo.png#frag" usemap="#site-map" alt="">
+  <map name="site-map"><area href="forms.html" shape="rect" coords="0,0,1,1" alt=""></map>
+  <picture><source srcset="img/hero.webp" type="image/webp"><source srcset="img/hero.png"><img src="img/hero.png" alt=""></picture>
+  <video src="media/clip.mp4" poster="media/poster.png"><source src="media/clip.mp4" type="video/mp4"><track src="media/clip.vtt" kind="captions"></video>
+  <audio><source src="media/clip.mp4"></audio>
+  <input type="image" src="img/logo.png" alt="">
+  <input type="IMAGE" src="img/logo.png" alt="">
+  <input type="text" src="img/logo.png">
+  <iframe src="forms.html" name="frame-a"></iframe>
+  <iframe srcdoc="<style>.srcdoc-class{color:red}</style><div class='srcdoc-class'></div>"></iframe>
+  <embed src="media/clip.mp4" type="video/mp4">
+  <object data="media/clip.mp4" type="video/mp4"><param name="movie" value="media/clip.mp4"></object>
+  <blockquote cite="forms.html">cite</blockquote>
+  <body background="img/bg.png"></body>
+  <meta property="og:image" content="img/hero.png">
+  <meta http-equiv="refresh" content="0; URL='forms.html'">
+  <meta http-equiv="Refresh" content="0;url=https://example.com/">
+
+  <!-- T16 element-tree shapes the browser repairs and the grammar may not -->
+  <div/>
+  <span class="after-self-closing-div">a browser makes me a CHILD of the div above</span>
+  <p>a <div class="div-in-p">div inside a p closes the p</div> trailing</p>
+  <ul><li class="li-one">one<li class="li-two">two</ul>
+  <select><option>one<option>two</select>
+  <table class="tbl"><tr><td class="cell">no tbody written</td></tr></table>
+  <table><caption>c</caption><thead><tr><th>h</th></tr></thead><tr><td>body row after thead</td></tr></table>
+  <a href="x.html">outer <a href="y.html">nested anchor</a></a>
+  <dl><dt>t<dd>d<dt>t2</dl>
+  <div class="unclosed-at-eof">
+  <template><div class="in-template"><style>.in-template-style { color: red }</style><script>inTemplate()</script></div></template>
+  <noscript><link rel="stylesheet" href="css/noscript.css"><div class="noscript-class"></div></noscript>
+  <custom-element class="custom" part="label"><slot name="s"></slot></custom-element>
+  <div is="x-foo" class="customized-builtin"></div>
+  <!--[if IE]><link rel="stylesheet" href="css/ie.css"><div class="ie-only"></div><![endif]-->
+  <!-- <div class="commented-out"><script>commented()</script></div> -->
+  <p>entities: &nbsp; &amp; &lt;tag&gt; &#x27; &#39; &unknown; &copy;</p>
+  <p title="a &amp; b" data-json='{"k": "v"}' aria-label="x" aria-labelledby="section-one missing-label" aria-describedby="late-id" aria-controls="main-nav" role="region">aria idrefs</p>
+  <div hidden class="hidden-attr"></div>
+  <div class="base-class">styled only by base.css, which this page does not load (its link is under the base)</div>
+  <div class="dup-attr" id="d1" id="d2" title="t" title="u"></div>
+  <input value="a" value="b" disabled disabled>
+</body>
+</html>
diff --git a/parser/src/test-data/web/torture/js/app.js b/parser/src/test-data/web/torture/js/app.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/js/lib.js b/parser/src/test-data/web/torture/js/lib.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/js/module.js b/parser/src/test-data/web/torture/js/module.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/js/vendor.js b/parser/src/test-data/web/torture/js/vendor.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/media/clip.mp4 b/parser/src/test-data/web/torture/media/clip.mp4
new file mode 100644
index 000000000..93db0574a
--- /dev/null
+++ b/parser/src/test-data/web/torture/media/clip.mp4
@@ -0,0 +1 @@
+a{color:red}
\ No newline at end of file
diff --git a/parser/src/test-data/web/torture/media/clip.vtt b/parser/src/test-data/web/torture/media/clip.vtt
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/media/poster.png b/parser/src/test-data/web/torture/media/poster.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/parser/src/test-data/web/torture/public/css/dup.css b/parser/src/test-data/web/torture/public/css/dup.css
new file mode 100644
index 000000000..9a7bd6df9
--- /dev/null
+++ b/parser/src/test-data/web/torture/public/css/dup.css
@@ -0,0 +1 @@
+body{margin:0}
diff --git a/parser/src/test-data/web/torture/quirks.html b/parser/src/test-data/web/torture/quirks.html
new file mode 100644
index 000000000..8b5052799
--- /dev/null
+++ b/parser/src/test-data/web/torture/quirks.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html>
+<head><title>Quirks</title>
+<link rel="stylesheet" href="css/app.css">
+</head>
+<body>
+<div class="crlf-class" id="crlf-id" style="color: var(--brand)">
+<p onclick="crlf()">crlf</p>
+</div>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+</span>
+<p class='quoted-single'>
+<p class=unquoted>
+<p class="unterminated>
+<div class="after-unterminated"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/parser/src/test-data/web/torture/shadow/shadow.html b/parser/src/test-data/web/torture/shadow/shadow.html
new file mode 100644
index 000000000..72f1a5d9a
--- /dev/null
+++ b/parser/src/test-data/web/torture/shadow/shadow.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Torture: scoping boundaries</title>
+  <link rel="stylesheet" href="../css/app.css">
+  <style>
+    .light-card { color: black }          /* S01 light DOM rule: must NOT reach .light-card inside a shadow root */
+    my-card::part(title) { color: red }   /* S02 ::part crosses the boundary via part="title" */
+    my-card { display: block }
+    .slotted-item { color: green }        /* S03 light-DOM class on a slotted element: styled by the OUTER sheet */
+  </style>
+</head>
+<body>
+  <div class="light-card">outside any shadow root</div>
+
+  <my-card id="card-1">
+    <!-- S04 declarative shadow root: its <style> applies only inside -->
+    <template shadowrootmode="open">
+      <style>
+        .light-card { color: white }      /* same class name, different scope */
+        :host { display: grid }
+        :host(.featured) { border: 1px solid }
+        :host-context(.dark) { color: silver }
+        ::slotted(.slotted-item) { font-weight: bold }
+        ::slotted(*) { margin: 0 }
+        .shadow-only { color: blue }
+        #inner-id { color: purple }
+      </style>
+      <div class="light-card" part="title">inside the shadow</div>
+      <div class="shadow-only" id="inner-id"></div>
+      <slot name="body"></slot>
+      <slot></slot>
+    </template>
+    <span slot="body" class="slotted-item">slotted from the light DOM</span>
+    <span class="default-slotted">default slot</span>
+  </my-card>
+
+  <my-card id="card-2" class="featured">
+    <template shadowrootmode="closed">
+      <style>.closed-only { color: gray }</style>
+      <div class="closed-only light-card"></div>
+    </template>
+  </my-card>
+
+  <!-- S05 inert template: nothing in here is rendered or styled -->
+  <template id="row-template">
+    <tr class="light-card"><td class="inert-class"></td></tr>
+    <style>.inert-style-class { color: red }</style>
+  </template>
+
+  <!-- S06 nested shadow roots -->
+  <outer-el>
+    <template shadowrootmode="open">
+      <style>.deep { color: red }</style>
+      <inner-el>
+        <template shadowrootmode="open">
+          <style>.deep { color: blue }</style>
+          <div class="deep">two levels in</div>
+        </template>
+      </inner-el>
+      <div class="deep">one level in</div>
+    </template>
+  </outer-el>
+  <div class="deep">zero levels in: no rule reaches me</div>
+
+  <!-- S07 id uniqueness is per tree: #inner-id again in the light DOM is legal -->
+  <div id="inner-id"></div>
+  <style>#inner-id { color: orange }</style>
+</body>
+</html>
diff --git a/parser/src/test-data/web/torture/static/css/dup.css b/parser/src/test-data/web/torture/static/css/dup.css
new file mode 100644
index 000000000..fb9395130
--- /dev/null
+++ b/parser/src/test-data/web/torture/static/css/dup.css
@@ -0,0 +1 @@
+body{margin:1px}
diff --git a/parser/src/test-data/web/torture/svg.html b/parser/src/test-data/web/torture/svg.html
new file mode 100644
index 000000000..5cec27409
--- /dev/null
+++ b/parser/src/test-data/web/torture/svg.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Torture: foreign content</title>
+  <link rel="stylesheet" href="css/app.css">
+  <style>
+    svg|rect { fill: red }            /* V01 namespaced type selector: name is "svg|rect", element tagName is "rect" */
+    rect { fill: blue }
+    .icon { width: 1em }              /* V02 class on an SVG element joins like any other */
+    #sym-icon { fill: green }
+    use { color: red }
+    foreignObject div { color: red }  /* V03 camelCase in a selector lowercases; the element keeps foreignObject */
+    foreignobject div { color: red }
+    math mi { font-style: italic }
+    .in-svg-style { color: red }
+  </style>
+</head>
+<body>
+  <svg class="icon" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- V04 SVG <style> and <script> inside an HTML document: browsers APPLY and RUN them -->
+    <style>.in-svg-style { color: blue } rect.svg-rect { stroke: black }</style>
+    <script>svgScript(); document.querySelector('.icon');</script>
+    <defs><symbol id="sym-icon" class="symbol-class"><rect class="svg-rect" width="1" height="1"/></symbol></defs>
+    <use href="#sym-icon" class="use-class"/>
+    <use xlink:href="#sym-icon"/>
+    <use href="img/sprite.svg#external-icon"/>
+    <use xlink:href="img/sprite.svg#external-icon"/>
+    <image href="img/logo.png" xlink:href="img/logo.png" width="1" height="1"/>
+    <a href="forms.html" xlink:href="forms.html"><text>svg anchor</text></a>
+    <rect CLASS="Case-Kept" ID="Case-Kept-Id" width="1" height="1" style="fill: var(--brand)" onclick="svgClick()"/>
+    <foreignObject width="10" height="10">
+      <div xmlns="http://www.w3.org/1999/xhtml" class="in-foreign" ONCLICK="backInHtml()">html again: tag and attribute names lowercase here</div>
+      <svg class="nested-svg"><rect class="nested-rect"/></svg>
+    </foreignObject>
+    <title>svg title must not become the document title</title>
+    <linearGradient id="grad"><stop offset="0"/></linearGradient>
+    <rect fill="url(#grad)" class="uses-gradient"/>
+    <rect fill="url(img/sprite.svg#pattern)"/>
+  </svg>
+  <math><mi class="math-class">x</mi><annotation-xml encoding="text/html"><div class="in-annotation"></div></annotation-xml></math>
+  <svg><rect class="icon"/></svg>
+</body>
+</html>
diff --git a/parser/src/test-data/web/torture/templates/jinja.html b/parser/src/test-data/web/torture/templates/jinja.html
new file mode 100644
index 000000000..08b80ea09
--- /dev/null
+++ b/parser/src/test-data/web/torture/templates/jinja.html
@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% block head %}
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
+  <link rel="stylesheet" href="{{ STATIC_URL }}css/base.css">
+  <script src="{% static 'js/app.js' %}"></script>
+{% endblock %}
+{% block body %}
+<div class="card {% if active %}is-active{% endif %} {{ extra_class }}" id="card-{{ item.id }}">
+  {% for item in items %}
+  <a href="{{ item.url }}" class="item" onclick="select({{ item.id }})">{{ item.name }}</a>
+  {% endfor %}
+  <span class="{{ 'a' if x else 'b' }}">conditional class</span>
+  <img src="{{ item.image }}" srcset="{{ item.image }} 1x, {{ item.image2x }} 2x">
+  <p style="color: {{ color }}; margin: 0">style with template value</p>
+  <p style="--brand: {{ brand }}">custom property from the template</p>
+  {# a jinja comment with <div class="in-jinja-comment"></div> #}
+  <!-- {{ not_rendered }} -->
+</div>
+<style>
+  .card-{{ item.id }} { color: red }
+  .item { color: {{ color }} }
+  {% if dark %}.card { background: black }{% endif %}
+</style>
+{% endblock %}
diff --git a/parser/src/test-data/web/torture/templates/mixed.html b/parser/src/test-data/web/torture/templates/mixed.html
new file mode 100644
index 000000000..0d7eb298f
--- /dev/null
+++ b/parser/src/test-data/web/torture/templates/mixed.html
@@ -0,0 +1,19 @@
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head>
+  <link rel="stylesheet" th:href="@{/css/app.css}" href="../css/app.css">
+  <script th:src="@{/js/app.js}" src="../js/app.js"></script>
+</head>
+<body>
+  <div th:text="${title}" th:class="${cls}" class="wrapper" th:classappend="${active} ? 'is-active'" sec:authorize="isAuthenticated()">x</div>
+  <div class="[[${cls}]] static">thymeleaf inline</div>
+  <div *ngIf="items.length" [class.on]="open" [ngClass]="{ 'is-active': active }" (click)="toggle()" [(ngModel)]="v" #ref class="ng-static">angular</div>
+  <div v-if="ok" :class="{ on: open, 'is-active': active }" v-bind:class="cls" @click="go()" v-on:click.prevent="go2()" class="vue-static">vue</div>
+  <div x-data="{ open: false }" x-bind:class="open ? 'is-open' : ''" :class="{ 'is-active': open }" @click="open = !open" x-on:click.away="open = false" class="alpine-static">alpine</div>
+  <div hx-get="/items" hx-target="#list" hx-swap="innerHTML" hx-trigger="click" class="htmx-static">htmx</div>
+  <div wire:click="save" wire:model="name" phx-click="inc" _="on click toggle .open on me" data-bind="css: { on: isOn }">livewire, liveview, hyperscript, knockout</div>
+  <div class="<%= cls %>" onclick="<%= handler %>()"><%= body %></div>
+  <div class="<?= $cls ?>" id="<?php echo $id; ?>"></div>
+  <ul>@foreach (var i in Model.Items) { <li class="@(i.Active ? "on" : "off")">@i.Name</li> }</ul>
+  <p>${name} and #{expr} and @{link} and {#block}</p>
+</body>
+</html>
diff --git a/parser/src/test-data/web/torture/templates/tailwind.html b/parser/src/test-data/web/torture/templates/tailwind.html
new file mode 100644
index 000000000..6fe4638b5
--- /dev/null
+++ b/parser/src/test-data/web/torture/templates/tailwind.html
@@ -0,0 +1,13 @@
+<div class="md:flex w-1/2 123 hover:bg-blue sm:w-1/3 [&>*]:p-4 group-hover:text-[#ff0000] -mt-2 !important peer/label">
+  <span class="md:flex">utility classes whose CSS selectors are escaped</span>
+  <span class="dark:md:hover:underline">stacked variants</span>
+</div>
+<style>
+  .sm\:w-1\/3 { width: 33% }
+  .\[\&\>\*\]\:p-4 > * { padding: 1rem }
+  .group-hover\:text-\[\#ff0000\] { color: #ff0000 }
+  .-mt-2 { margin-top: -0.5rem }
+  .\!important { font-weight: bold }
+  .peer\/label { color: red }
+  .dark\:md\:hover\:underline:hover { text-decoration: underline }
+</style>
diff --git a/parser/src/test-data/web/torture/xhtml/page.xhtml b/parser/src/test-data/web/torture/xhtml/page.xhtml
new file mode 100644
index 000000000..37a76c3de
--- /dev/null
+++ b/parser/src/test-data/web/torture/xhtml/page.xhtml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>Torture: XHTML</title>
+  <link rel="stylesheet" href="../css/app.css" />
+  <script type="text/javascript">
+  //<![CDATA[
+    function cdata() { return 1 < 2 && "</script>" }
+  //]]>
+  </script>
+  <style type="text/css"><![CDATA[ .cdata-class { color: red } ]]></style>
+</head>
+<body onload="cdata()">
+  <div class="xhtml-class" id="xhtml-id"></div>
+  <br />
+  <div />
+  <span class="after-xml-self-closing">a sibling in XML, a child in HTML</span>
+  <textarea></textarea>
+</body>
+</html>
diff --git a/parser/src/test/web-tests.ts b/parser/src/test/web-tests.ts
new file mode 100644
index 000000000..316994ff5
--- /dev/null
+++ b/parser/src/test/web-tests.ts
@@ -0,0 +1,1099 @@
+/**
+ * WEB (HTML + CSS) TESTS — one file, mirroring services-tests.ts.
+ *
+ *     npx tsx src/test/web-tests.ts            # everything
+ *     npx tsx src/test/web-tests.ts --list     # what runs, and what it proves
+ *     npx tsx src/test/web-tests.ts --bless    # rewrite the goldens
+ *
+ * NO BROWSER, NO NETWORK. Every check runs the parser and compares the result
+ * with expectations in this file or checked into src/test-data/web.
+ *
+ * ## What this suite can and cannot do
+ *
+ * The golden is drift detection: it was produced by this parser and agrees with
+ * whatever the parser currently does, mistakes included.
+ *
+ * The format checks are the part that can find a defect. Each is written from
+ * the HTML or CSS specification (the parsing algorithm, the Selectors specificity
+ * rules, the URL syntax) rather than from parser output, and each names the
+ * plausible wrong implementation it rules out — a reader that splits `class` on
+ * spaces only, a specificity that counts `:where()`, a resolver that follows
+ * `../..` out of the project. A check no plausible implementation fails proves
+ * nothing, so the `rules out` line is part of the check.
+ *
+ * The structural checks — primary-key uniqueness, foreign-key integrity across
+ * the sixteen relations, arity against the frozen schema, enum domains, and
+ * determinism across two runs — are the ones that catch what a fixture cannot
+ * foresee.
+ */
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+
+import { CssStylesheet } from '@/analysis-types/css/CssStylesheet';
+import { WEB_CSV_FILES, WEB_PARSE_GAP_LIMIT } from '@/constants/web-constants';
+import { CssSourceProvenance, CssStylesheetSource } from '@/enums/css/CssStylesheetSource';
+import { CssParseGapKind } from '@/enums/css/CssParseGapKind';
+import { CssSelectorPartKind, CssCombinator } from '@/enums/css/CssSelectorPartKind';
+import { CssValueReferenceKind } from '@/enums/css/CssValueReferenceKind';
+import { HtmlAttributeKind } from '@/enums/html/HtmlAttributeKind';
+import { HtmlDocumentKind } from '@/enums/html/HtmlDocumentKind';
+import { HtmlHandlerSource } from '@/enums/html/HtmlHandlerSource';
+import { HtmlNamespace } from '@/enums/html/HtmlNamespace';
+import { HtmlParseGapKind } from '@/enums/html/HtmlParseGapKind';
+import { HtmlScriptKind, HtmlScriptType } from '@/enums/html/HtmlScriptKind';
+import { HtmlTemplateDialect } from '@/enums/html/HtmlTemplateDialect';
+import { WebUrlKind } from '@/enums/web/WebUrlKind';
+import * as CssEnums from '@/enums/css';
+import * as HtmlEnums from '@/enums/html';
+import * as WebEnums from '@/enums/web';
+import { CssExtraction, CssParser } from '@/parsers/css/css-parser';
+import { HtmlExtraction, HtmlParser } from '@/parsers/html/html-parser';
+import { WebProjectAnalyzer } from '@/workflows/web/web-project-analyzer';
+
+const DATA = 'src/test-data/web';
+const GOLDEN = path.join(DATA, '_golden');
+const SCHEMA = JSON.parse(fs.readFileSync('src/schema/web/schema.json', 'utf-8')) as {
+  relations: Record<string, { columns: string[]; domains?: Record<string, string[]>; commaSets?: string[] }>;
+};
+
+/** The values a cell holds: one, or every member of a comma-set column. */
+function cellValues(relation: string, column: string, cell: string): string[] {
+  if (cell === '') return [];
+  return (SCHEMA.relations[relation]?.commaSets ?? []).includes(column) ? cell.split(',') : [cell];
+}
+const BLESS = process.argv.includes('--bless');
+
+/** Columns that cannot be compared across machines: absolute paths. */
+const VOLATILE = /^(baseMservPath|filePath|resolvedFilePath)$/;
+const HASH_COLUMN = /(Hash|hash)$/;
+
+type Row = Record<string, string>;
+
+const fail = (m: string): number => { console.log('  ✗ ' + m); return 1; };
+
+// ---------------------------------------------------------------------------
+// format checks — from the specifications, in memory, no fixture tree
+// ---------------------------------------------------------------------------
+
+/** A throwaway directory for checks that need real files to resolve against. */
+const TMP = fs.mkdtempSync(path.join(os.tmpdir(), 'axiom-web-'));
+function file(rel: string, content = ''): string {
+  const p = path.join(TMP, rel);
+  fs.mkdirSync(path.dirname(p), { recursive: true });
+  fs.writeFileSync(p, content);
+  return p;
+}
+
+function parseHtml(content: string, rel = 'site/page.html'): HtmlExtraction {
+  const p = file(rel, content);
+  return new HtmlParser().parse(content, p, path.join(TMP, 'site'), 'WEB_FIXTURE_VERSION');
+}
+
+function parseCss(content: string, rel = 'site/css/x.css', origin = { line: 1, column: 1 }): CssExtraction & { sheet: CssStylesheet } {
+  const p = file(rel, content);
+  const sheet = new CssStylesheet({
+    name: 'x', fileName: path.basename(p), filePath: p, baseMservPath: path.join(TMP, 'site'), relativePath: rel,
+    sourceKind: CssStylesheetSource.FILE, sourceProvenance: CssSourceProvenance.PROJECT, ownerHtmlElementLinkHash: '',
+    htmlDocumentLinkHash: '', startLine: 1, startColumn: 1, endLine: 1, serviceVersionLinkHash: 'WEB_FIXTURE_VERSION',
+  });
+  const x = new CssParser().parseStylesheet(content, {
+    stylesheet: sheet, line: origin.line, column: origin.column, filePath: p, projectRoot: path.join(TMP, 'site'),
+    serviceVersionLinkHash: 'WEB_FIXTURE_VERSION',
+  });
+  return { ...x, sheet };
+}
+
+/** (a,b,c) of the first selector of the first rule. */
+function specificity(selector: string): string {
+  const s = parseCss(`${selector} { color: red }`).selectors[0]!;
+  return `${s.specificityA},${s.specificityB},${s.specificityC}`;
+}
+
+function col(text: string, needle: string, occurrence = 1): { line: number; column: number } {
+  let from = 0;
+  let at = -1;
+  for (let i = 0; i < occurrence; i += 1) {
+    at = text.indexOf(needle, from);
+    from = at + 1;
+  }
+  const before = text.slice(0, at);
+  const line = before.split('\n').length;
+  const column = at - (before.lastIndexOf('\n') + 1) + 1;
+  return { line, column };
+}
+
+interface FormatCheck {
+  name: string;
+  /** The clause of the specification this check comes from. */
+  spec: string;
+  /** The plausible wrong implementation this check fails. */
+  rulesOut: string;
+  run: () => number;
+}
+
+const formatChecks: FormatCheck[] = [
+  // ── HTML: the tree ──────────────────────────────────────────────────────
+  {
+    name: 'a-fragment-is-the-elements-written-and-nothing-implied',
+    spec: 'the grammar builds the elements written; the html, head and body a browser implies are not in the source',
+    rulesOut: 'a reader that invents wrapper rows, or that calls a snippet a whole page',
+    run: () => {
+      const x = parseHtml('<p>only a paragraph</p>');
+      let bad = 0;
+      const tags = x.elements.map((e) => e.tagName).join(' ');
+      if (tags !== 'p') bad += fail(`elements=${tags}, expected p alone`);
+      if (x.document.documentKind !== HtmlDocumentKind.FRAGMENT) bad += fail(`documentKind=${x.document.documentKind}`);
+      const p = x.elements[0]!;
+      if (p.parentElementLinkHash !== '' || p.path !== '/p[1]' || p.depth !== 0) bad += fail(`a top-level element reads as ${p.path} at depth ${p.depth} with parent ${JSON.stringify(p.parentElementLinkHash)}`);
+      const whole = parseHtml('<!DOCTYPE html><html><body><p>x</p></body></html>');
+      if (whole.document.documentKind !== HtmlDocumentKind.DOCUMENT || whole.document.doctype !== 'html') {
+        bad += fail(`a full document reads as ${whole.document.documentKind} with doctype ${JSON.stringify(whole.document.doctype)}`);
+      }
+      if (whole.elements.map((e) => e.path).join(' ') !== '/html[1] /html[1]/body[1] /html[1]/body[1]/p[1]') bad += fail(`paths=${whole.elements.map((e) => e.path).join(' ')}`);
+      const noDoctype = parseHtml('<html><body></body></html>');
+      if (noDoctype.document.documentKind !== HtmlDocumentKind.DOCUMENT) bad += fail('a page with <html> and no doctype reads as a fragment');
+      return bad;
+    },
+  },
+  {
+    name: 'a-paragraph-is-closed-by-the-next-one',
+    spec: 'a p element\'s end tag may be omitted if it is immediately followed by another p',
+    rulesOut: 'a reader that nests the second p inside the first',
+    run: () => {
+      const text = '<div>\n<p>one\n<p>two\n</div>';
+      const x = parseHtml(text);
+      const ps = x.elements.filter((e) => e.tagName === 'p');
+      let bad = 0;
+      if (ps.length !== 2) return fail(`${ps.length} p elements, expected 2`);
+      if (ps[0]!.path !== '/div[1]/p[1]' || ps[1]!.path !== '/div[1]/p[2]') {
+        bad += fail(`paths ${ps.map((p) => p.path).join(' ')}: the second p is a sibling, not a child`);
+      }
+      if (ps[0]!.endLine !== 3) bad += fail(`first p ends on line ${ps[0]!.endLine}, expected 3 where the second opens`);
+      if (ps[0]!.textContent !== 'one' || ps[1]!.textContent !== 'two') bad += fail('text content crossed the implicit close');
+      if (ps[0]!.position !== 0 || ps[1]!.position !== 1) bad += fail('positions are not the sibling ordinals');
+      return bad;
+    },
+  },
+  {
+    name: 'template-content-is-walked',
+    spec: 'a template element\'s contents are a DocumentFragment, not children of the element',
+    rulesOut: 'a walker that reads childNodes and finds the template empty',
+    run: () => {
+      const x = parseHtml('<template><span class="tpl">t</span></template>');
+      const span = x.elements.find((e) => e.tagName === 'span');
+      if (span === undefined) return fail('no span inside the template');
+      let bad = 0;
+      if (span.path !== '/template[1]/span[1]') bad += fail(`path=${span.path}`);
+      if (!x.classReferences.some((c) => c.className === 'tpl')) bad += fail('the class inside the template was not read');
+      return bad;
+    },
+  },
+  {
+    name: 'a-void-element-has-no-end-tag-and-no-children',
+    spec: 'void elements have no end tag and never have contents',
+    rulesOut: 'a reader that swallows the following text into the img',
+    run: () => {
+      const x = parseHtml('<p><img src="a.png">after</p>');
+      const img = x.elements.find((e) => e.tagName === 'img')!;
+      const p = x.elements.find((e) => e.tagName === 'p')!;
+      let bad = 0;
+      if (!img.isVoid) bad += fail('img is not void');
+      const expectedEnd = '<p><img src="a.png">'.length + 1;
+      if (img.endColumn !== expectedEnd) bad += fail(`img ends at column ${img.endColumn}, expected ${expectedEnd} (just past its start tag)`);
+      if (p.textContent !== 'after') bad += fail(`p text=${JSON.stringify(p.textContent)}`);
+      return bad;
+    },
+  },
+  {
+    name: 'foreign-content-keeps-its-namespace-and-prefixed-attributes',
+    spec: 'svg and MathML elements are in their own namespaces; xlink:href is a prefixed attribute',
+    rulesOut: 'a reader that lowercases viewBox or loses the xlink prefix',
+    run: () => {
+      const x = parseHtml('<svg viewBox="0 0 1 1"><use xlink:href="#a"/><image href="pic.png"/></svg>');
+      const svg = x.elements.find((e) => e.tagName === 'svg')!;
+      let bad = 0;
+      if (svg.namespace !== HtmlNamespace.SVG) bad += fail(`svg namespace=${svg.namespace}`);
+      if (!x.attributes.some((a) => a.name === 'viewBox')) bad += fail('viewBox lost its case');
+      const xlink = x.attributes.find((a) => a.prefix === 'xlink');
+      if (xlink === undefined || xlink.name !== 'href' || xlink.attributeKind !== HtmlAttributeKind.URL) {
+        bad += fail('xlink:href is not a prefixed URL attribute');
+      }
+      const ref = x.references.find((r) => r.attributeName === 'xlink:href');
+      if (ref === undefined || ref.urlKind !== WebUrlKind.FRAGMENT || ref.fragment !== 'a') bad += fail('xlink:href="#a" is not a FRAGMENT reference to a');
+      return bad;
+    },
+  },
+  // ── HTML: attributes ────────────────────────────────────────────────────
+  {
+    name: 'a-value-less-attribute-is-distinguished-from-an-empty-one',
+    spec: 'an attribute without a value has the empty string as its value',
+    rulesOut: 'a reader that records both as value="" and cannot tell disabled from disabled=""',
+    run: () => {
+      const x = parseHtml('<input disabled required="" value=\'\' data-x = "y">');
+      const by = Object.fromEntries(x.attributes.map((a) => [a.name, a]));
+      let bad = 0;
+      if (by['disabled']?.hasValue !== false) bad += fail('disabled reports a value');
+      if (by['required']?.hasValue !== true) bad += fail('required="" reports no value');
+      if (by['value']?.hasValue !== true) bad += fail("value='' reports no value");
+      if (by['data-x']?.value !== 'y' || by['data-x']?.attributeKind !== HtmlAttributeKind.DATA) bad += fail('data-x = "y" with spaces around = was misread');
+      return bad;
+    },
+  },
+  {
+    name: 'a-duplicate-attribute-keeps-the-first-and-records-a-gap',
+    spec: 'the first attribute with a name wins; a repeat is a parse error',
+    rulesOut: 'a reader that emits two rows for one attribute name and collides their keys (the grammar reports no duplicate)',
+    run: () => {
+      const x = parseHtml('<div id="a" id="b"></div>');
+      const ids = x.attributes.filter((a) => a.name === 'id');
+      let bad = 0;
+      if (ids.length !== 1 || ids[0]!.value !== 'a') bad += fail(`id rows=${ids.map((a) => a.value).join(',')}, expected the first, a`);
+      if (!x.parseGaps.some((g) => g.gapKind === HtmlParseGapKind.PARSE_ERROR && g.detail === 'duplicate-attribute')) {
+        bad += fail('no duplicate-attribute gap');
+      }
+      if (x.elements.find((e) => e.tagName === 'div')!.id !== 'a') bad += fail('element id is not the first');
+      return bad;
+    },
+  },
+  {
+    name: 'class-tokens-split-on-ascii-whitespace-and-keep-repeats',
+    spec: 'the class attribute is a set of space-separated tokens; the tokenizer splits on space, tab, LF, FF, CR',
+    rulesOut: 'a reader that splits on a single space or deduplicates',
+    run: () => {
+      const x = parseHtml('<div class=" a\tb\n\n c  a ">');
+      const got = x.classReferences.map((c) => `${c.position}:${c.className}`).join(' ');
+      let bad = 0;
+      if (got !== '0:a 1:b 2:c 3:a') bad += fail(`tokens=${got}`);
+      if (new Set(x.classReferences.map((c) => c.getHash())).size !== 4) bad += fail('two occurrences of one class share a key');
+      const div = x.elements.find((e) => e.tagName === 'div')!;
+      if (div.toCsv().split('\t')[5] !== 'a,b,c,a') bad += fail(`classNames column=${div.toCsv().split('\t')[5]}`);
+      return bad;
+    },
+  },
+  {
+    name: 'attribute-kinds-follow-the-name',
+    spec: 'on* attributes are event handler content attributes; data-* and aria-* are reserved prefixes',
+    rulesOut: 'a classifier that calls a Vue @click or an Alpine x-on an event handler',
+    run: () => {
+      const x = parseHtml('<div onclick="a()" @click="b" v-if="c" x-data="{}" hx-get="/x" th:text="t" data-q="1" aria-hidden="true" role="x" for="i" form="f" rel="x" type="t" name="n" style="" ng-if="y" [prop]="z" (ev)="w"></div>');
+      const by = Object.fromEntries(x.attributes.map((a) => [a.name, a.attributeKind]));
+      const want: Record<string, HtmlAttributeKind> = {
+        onclick: HtmlAttributeKind.EVENT_HANDLER, '@click': HtmlAttributeKind.TEMPLATE_DIRECTIVE, 'v-if': HtmlAttributeKind.TEMPLATE_DIRECTIVE,
+        'x-data': HtmlAttributeKind.TEMPLATE_DIRECTIVE, 'hx-get': HtmlAttributeKind.TEMPLATE_DIRECTIVE, 'th:text': HtmlAttributeKind.TEMPLATE_DIRECTIVE,
+        'data-q': HtmlAttributeKind.DATA, 'aria-hidden': HtmlAttributeKind.ARIA, role: HtmlAttributeKind.ARIA, for: HtmlAttributeKind.FOR,
+        form: HtmlAttributeKind.ID_REFERENCE, rel: HtmlAttributeKind.REL, type: HtmlAttributeKind.TYPE, name: HtmlAttributeKind.NAME,
+        style: HtmlAttributeKind.STYLE, 'ng-if': HtmlAttributeKind.TEMPLATE_DIRECTIVE, '[prop]': HtmlAttributeKind.TEMPLATE_DIRECTIVE,
+        '(ev)': HtmlAttributeKind.TEMPLATE_DIRECTIVE,
+      };
+      let bad = 0;
+      for (const [name, kind] of Object.entries(want)) {
+        if (by[name] !== kind) bad += fail(`${name}: ${by[name]}, expected ${kind}`);
+      }
+      // `@click="b"` is a template event: Vue calls the handler it names, and the row says so by its source.
+      const b = x.handlerCalls.find((h) => h.calleeName === 'b');
+      if (b === undefined || b.handlerSource !== HtmlHandlerSource.TEMPLATE_EVENT || b.argumentCount !== 0) bad += fail('a template event directive is not a TEMPLATE_EVENT handler call');
+      if (x.handlerCalls.some((h) => h.handlerSource === HtmlHandlerSource.EVENT_ATTRIBUTE && h.calleeName !== 'a')) bad += fail('a template directive was read as an on* handler');
+      const dialects = [...x.document.templateDialects].sort().join(',');
+      if (!dialects.includes('ALPINE') || !dialects.includes('HTMX') || !dialects.includes('THYMELEAF') || !dialects.includes('VUE') || !dialects.includes('ANGULAR')) {
+        bad += fail(`dialects=${dialects}`);
+      }
+      return bad;
+    },
+  },
+  // ── HTML: URLs ──────────────────────────────────────────────────────────
+  {
+    name: 'url-kinds-are-decided-from-the-text',
+    spec: 'URL parsing: scheme, host-relative, path-absolute, path-relative and fragment-only forms',
+    rulesOut: 'a classifier that treats mailto: as a relative path or #x as a file',
+    run: () => {
+      const cases: Array<[string, WebUrlKind, string?]> = [
+        ['a/b.css', WebUrlKind.RELATIVE], ['./a.js', WebUrlKind.RELATIVE], ['../x', WebUrlKind.RELATIVE],
+        ['/static/a.js', WebUrlKind.ROOT_RELATIVE], ['https://h/x.js', WebUrlKind.ABSOLUTE], ['HTTP://h/x', WebUrlKind.ABSOLUTE],
+        ['//cdn/x.js', WebUrlKind.PROTOCOL_RELATIVE], ['#team', WebUrlKind.FRAGMENT, 'team'], ['data:image/png;base64,AAA', WebUrlKind.DATA_URI],
+        ['javascript:go()', WebUrlKind.JAVASCRIPT_URI], ['mailto:a@b', WebUrlKind.OTHER_SCHEME], ['tel:123', WebUrlKind.OTHER_SCHEME],
+        ['{{ url_for("x") }}', WebUrlKind.TEMPLATE_EXPRESSION], ['/static/{{ name }}.js', WebUrlKind.TEMPLATE_EXPRESSION],
+        ['<%= path %>', WebUrlKind.TEMPLATE_EXPRESSION], ['${ctx}/x', WebUrlKind.TEMPLATE_EXPRESSION], ['', WebUrlKind.EMPTY],
+        ['  ', WebUrlKind.EMPTY],
+      ];
+      let bad = 0;
+      for (const [url, kind, fragment] of cases) {
+        const x = parseHtml(`<a href="${url.replace(/"/g, '&quot;')}">x</a>`);
+        const r = x.references[0];
+        if (r === undefined) { bad += fail(`${JSON.stringify(url)}: no reference`); continue; }
+        if (r.urlKind !== kind) bad += fail(`${JSON.stringify(url)}: ${r.urlKind}, expected ${kind}`);
+        if (fragment !== undefined && r.fragment !== fragment) bad += fail(`${JSON.stringify(url)}: fragment=${r.fragment}`);
+      }
+      const split = parseHtml('<a href="page.html?x=1&y=2#top">x</a>').references[0]!;
+      if (split.path !== 'page.html' || split.query !== 'x=1&y=2' || split.fragment !== 'top') {
+        bad += fail(`split: path=${split.path} query=${split.query} fragment=${split.fragment}`);
+      }
+      return bad;
+    },
+  },
+  {
+    name: 'a-relative-url-resolves-against-the-file-and-never-outside-the-root',
+    spec: 'a relative reference resolves against the base URL, which defaults to the document\'s',
+    rulesOut: 'a resolver that follows ../.. out of the project, or resolves to a file that is not there',
+    run: () => {
+      file('site/css/present.css', 'a{}');
+      file('outside.css', 'b{}');
+      const x = parseHtml('<link rel="stylesheet" href="css/present.css"><link rel="stylesheet" href="css/absent.css"><link rel="stylesheet" href="../outside.css">', 'site/page.html');
+      const by = Object.fromEntries(x.references.map((r) => [r.urlAsWritten, r]));
+      let bad = 0;
+      if (by['css/present.css']?.resolvedFilePath !== path.join(TMP, 'site/css/present.css') || !by['css/present.css']?.isResolved) {
+        bad += fail('a present file was not resolved');
+      }
+      if (by['css/absent.css']?.isResolved !== false) bad += fail('an absent file reads as resolved');
+      if (by['../outside.css']?.isResolved !== false) bad += fail('a file outside the project root was resolved');
+      if (x.document.toCsv().split('\t')[14] !== '3') bad += fail(`stylesheetReferenceCount=${x.document.toCsv().split('\t')[14]}, expected 3`);
+      return bad;
+    },
+  },
+  {
+    name: 'a-root-relative-url-resolves-only-when-one-served-root-holds-it',
+    spec: 'a path-absolute URL resolves against the origin, which the repository does not record',
+    rulesOut: 'a resolver that guesses between two candidate roots, or never resolves /static/x',
+    run: () => {
+      file('app/public/static/one.js', '');
+      file('app/pages/deep/page.html', '');
+      file('app/public/static/two.js', '');
+      file('app/pages/static/two.js', '');
+      const content = '<script src="/static/one.js"></script><script src="/static/two.js"></script><script src="/static/none.js"></script>';
+      const p = file('app/pages/deep/page.html', content);
+      const x = new HtmlParser().parse(content, p, path.join(TMP, 'app'), 'V');
+      const by = Object.fromEntries(x.references.map((r) => [r.urlAsWritten, r]));
+      let bad = 0;
+      if (by['/static/one.js']?.resolvedFilePath !== path.join(TMP, 'app/public/static/one.js')) {
+        bad += fail(`one candidate: resolved to ${JSON.stringify(by['/static/one.js']?.resolvedFilePath)}`);
+      }
+      if (by['/static/two.js']?.isResolved !== false) bad += fail('two candidates were not refused');
+      if (by['/static/none.js']?.isResolved !== false) bad += fail('no candidate reads as resolved');
+      const script = x.scripts.find((s) => s.src === '/static/one.js')!;
+      if (script.resolvedFilePath !== by['/static/one.js']!.resolvedFilePath || script.referenceLinkHash !== by['/static/one.js']!.getHash()) {
+        bad += fail('the script row does not carry its reference\'s resolution');
+      }
+      return bad;
+    },
+  },
+  {
+    name: 'reference-kinds-follow-the-element',
+    spec: 'link rel=stylesheet is a stylesheet, source in picture is an image, elsewhere media',
+    rulesOut: 'a classifier that keys on the attribute name alone',
+    run: () => {
+      const x = parseHtml(
+        '<link rel="stylesheet" href="a.css"><link rel="icon" href="i.png"><link rel="preload stylesheet" href="b.css">'
+        + '<picture><source srcset="p.webp"><img src="p.png"></picture><video src="v.mp4" poster="v.png"><source src="v.webm"></video>'
+        + '<input type="image" src="btn.png"><input type="text" src="x"><form action="/f"><button formaction="/g">b</button></form>'
+        + '<iframe src="f.html"></iframe><object data="o.swf"></object><base href="/"><a href="l"></a><area href="m">'
+        + '<meta http-equiv="refresh" content="0; url=next.html">'
+      );
+      const got = x.references.map((r) => `${r.referenceKind}:${r.urlAsWritten}`).sort().join(' ');
+      const want = [
+        'STYLESHEET:a.css', 'LINK_RESOURCE:i.png', 'STYLESHEET:b.css', 'IMAGE:p.webp', 'IMAGE:p.png', 'MEDIA:v.mp4', 'MEDIA:v.png',
+        'MEDIA:v.webm', 'IMAGE:btn.png', 'OTHER:x', 'FORM_ACTION:/f', 'FORM_ACTION:/g', 'FRAME:f.html', 'FRAME:o.swf', 'BASE:/',
+        'ANCHOR:l', 'ANCHOR:m', 'META_REFRESH:next.html',
+      ].sort().join(' ');
+      return got === want ? 0 : fail(`got  ${got}\n      want ${want}`);
+    },
+  },
+  {
+    name: 'srcset-candidates-are-separate-references',
+    spec: 'a srcset is a comma-separated list of candidates, each a URL and an optional descriptor',
+    rulesOut: 'a reader that records the whole attribute as one URL',
+    run: () => {
+      const x = parseHtml('<img srcset="a.png 1x, b.png 2x,c.png 100w" src="d.png">');
+      const got = x.references.map((r) => `${r.position}:${r.urlAsWritten}`).join(' ');
+      return got === '0:a.png 1:b.png 2:c.png 0:d.png' ? 0 : fail(`got ${got}`);
+    },
+  },
+  // ── HTML: handlers and scripts ──────────────────────────────────────────
+  {
+    name: 'every-call-in-a-handler-is-a-row-at-its-column',
+    spec: 'an event handler content attribute\'s value is a FunctionBody',
+    rulesOut: 'a reader that keeps the first call only, or cites the attribute instead of the call',
+    run: () => {
+      const text = '<p>\n  <a href="javascript:toggle()" onclick="track(\'nav\', this); if (confirm(\'?\')) app.ui.remove(1); new Audio(\'x\')">x</a>';
+      const x = parseHtml(text);
+      const got = x.handlerCalls.map((h) => `${h.handlerSource === 'JAVASCRIPT_URL' ? 'url' : h.eventName}:${h.calleeText}/${h.calleeName}/${h.receiverText}/${h.argumentCount}${h.isNew ? '/new' : ''}`).join(' ');
+      const want = 'url:toggle/toggle//0 click:track/track//2 click:confirm/confirm//1 click:app.ui.remove/remove/app.ui/1 click:Audio/Audio//1/new';
+      let bad = 0;
+      if (got !== want) bad += fail(`got  ${got}\n      want ${want}`);
+      const remove = x.handlerCalls.find((h) => h.calleeName === 'remove')!;
+      const at = col(text, 'app.ui.remove');
+      if (remove.startLine !== at.line || remove.startColumn !== at.column) {
+        bad += fail(`remove cited at ${remove.startLine}:${remove.startColumn}, written at ${at.line}:${at.column}`);
+      }
+      const toggle = x.handlerCalls.find((h) => h.calleeName === 'toggle')!;
+      const tat = col(text, 'toggle()');
+      if (toggle.startLine !== tat.line || toggle.startColumn !== tat.column) bad += fail(`toggle cited at ${toggle.startLine}:${toggle.startColumn}, written at ${tat.line}:${tat.column}`);
+      if (x.parseGaps.length !== 0) bad += fail(`gaps on well-formed handlers: ${x.parseGaps.map((g) => g.detail).join('; ')}`);
+      return bad;
+    },
+  },
+  {
+    name: 'a-handler-that-is-not-javascript-is-a-gap-not-a-call',
+    spec: 'a template placeholder in a handler is not a FunctionBody until rendered',
+    rulesOut: 'a reader that silently drops the attribute, or invents a call named handler',
+    run: () => {
+      const x = parseHtml('<button onclick="{{ handler }}">x</button><button onclick="save(">y</button>');
+      let bad = 0;
+      const gaps = x.parseGaps.filter((g) => g.gapKind === HtmlParseGapKind.HANDLER_SYNTAX);
+      if (gaps.length !== 2) bad += fail(`${gaps.length} handler gaps, expected 2: ${x.parseGaps.map((g) => g.detail).join('; ')}`);
+      if (x.handlerCalls.some((h) => h.calleeName === 'handler')) bad += fail('a placeholder became a call');
+      if (!x.handlerCalls.some((h) => h.calleeName === 'save')) bad += fail('the call the recovered tree still holds was dropped');
+      return bad;
+    },
+  },
+  {
+    name: 'script-type-decides-what-the-browser-does-with-the-body',
+    spec: 'the type attribute: absent or a JavaScript MIME type runs; module; importmap; anything else is a data block',
+    rulesOut: 'a reader that runs every script or none',
+    run: () => {
+      const types: Array<[string, HtmlScriptType]> = [
+        ['', HtmlScriptType.CLASSIC], ['text/javascript', HtmlScriptType.CLASSIC], ['application/javascript', HtmlScriptType.CLASSIC],
+        ['module', HtmlScriptType.MODULE], ['importmap', HtmlScriptType.IMPORTMAP], ['speculationrules', HtmlScriptType.SPECULATION_RULES],
+        ['application/json', HtmlScriptType.JSON], ['application/ld+json', HtmlScriptType.JSON], ['text/x-template', HtmlScriptType.TEMPLATE],
+        ['text/x-handlebars-template', HtmlScriptType.TEMPLATE], ['text/babel', HtmlScriptType.TRANSPILED], ['text/x-mathjax-config', HtmlScriptType.DATA_BLOCK],
+      ];
+      let bad = 0;
+      for (const [type, want] of types) {
+        const x = parseHtml(`<script${type === '' ? '' : ` type="${type}"`}>1</script>`);
+        if (x.scripts[0]?.scriptType !== want) bad += fail(`type=${JSON.stringify(type)}: ${x.scripts[0]?.scriptType}, expected ${want}`);
+      }
+      return bad;
+    },
+  },
+  {
+    name: 'an-inline-script-body-is-located-exactly',
+    spec: 'script content is raw text between the start tag and the end tag',
+    rulesOut: 'a reader that trims the body or counts from the start tag',
+    run: () => {
+      const text = '<html>\n<body>\n  <script defer>\n    init();\n  </script>\n<script src="a.js">ignored()</script></body></html>';
+      const x = parseHtml(text);
+      const [inline, external] = x.scripts;
+      let bad = 0;
+      if (inline === undefined || external === undefined) return fail(`${x.scripts.length} scripts`);
+      if (inline.scriptKind !== HtmlScriptKind.INLINE || !inline.isDefer) bad += fail('inline/defer misread');
+      const bodyStart = text.indexOf('<script defer>') + '<script defer>'.length;
+      const bodyEnd = text.indexOf('</script>');
+      const s = col(text, text.slice(bodyStart, bodyEnd));
+      if (inline.bodyStartLine !== s.line || inline.bodyStartColumn !== s.column) bad += fail(`body starts ${inline.bodyStartLine}:${inline.bodyStartColumn}, expected ${s.line}:${s.column}`);
+      if (inline.bodyLength !== bodyEnd - bodyStart) bad += fail(`bodyLength=${inline.bodyLength}, expected ${bodyEnd - bodyStart}`);
+      if (inline.bodyEndLine !== 5 || inline.bodyEndColumn !== 3) bad += fail(`body ends ${inline.bodyEndLine}:${inline.bodyEndColumn}, expected 5:3`);
+      if (external.scriptKind !== HtmlScriptKind.EXTERNAL || external.bodyLength !== 0) bad += fail('an external script\'s body was read');
+      if (x.document.toCsv().split('\t')[12] !== '2' || x.document.toCsv().split('\t')[13] !== '1') bad += fail('script counts are wrong');
+      return bad;
+    },
+  },
+  // ── HTML: inline CSS ────────────────────────────────────────────────────
+  {
+    name: 'a-style-element-is-a-stylesheet-at-the-page-s-lines',
+    spec: 'a style element\'s content is a CSS stylesheet',
+    rulesOut: 'a reader that cites line 1 of the CSS for a rule on line 4 of the page',
+    run: () => {
+      const text = '<head>\n  <style>\n    .a { color: red }\n    .b { gap: var(--g) }\n  </style>\n</head>';
+      const x = parseHtml(text);
+      let bad = 0;
+      if (x.stylesheets.length !== 1) return fail(`${x.stylesheets.length} stylesheets`);
+      const sheet = x.stylesheets[0]!;
+      const style = x.elements.find((e) => e.tagName === 'style')!;
+      if (sheet.sourceKind !== CssStylesheetSource.HTML_STYLE_ELEMENT || sheet.ownerHtmlElementLinkHash !== style.getHash()) bad += fail('the sheet does not chain to its element');
+      if (sheet.startLine !== 2 || sheet.startColumn !== 10 || sheet.endLine !== 5) bad += fail(`sheet spans ${sheet.startLine}:${sheet.startColumn}-${sheet.endLine}`);
+      const b = x.css.rules.find((r) => r.preludeText === '.b')!;
+      if (b.startLine !== 4 || b.startColumn !== 5) bad += fail(`.b at ${b.startLine}:${b.startColumn}, expected 4:5`);
+      const gap = x.css.declarations.find((d) => d.property === 'gap')!;
+      if (gap.startLine !== 4 || gap.startColumn !== 10 || gap.stylesheetLinkHash !== sheet.getHash()) bad += fail(`gap at ${gap.startLine}:${gap.startColumn}`);
+      if (!x.css.valueReferences.some((v) => v.name === '--g' && v.startLine === 4)) bad += fail('var(--g) not read from the inline sheet');
+      if (sheet.getRuleCount() !== 2 || sheet.getDeclarationCount() !== 2) bad += fail('counts not back-patched');
+      const other = parseHtml('<style type="text/less">.a { .b; }</style>');
+      if (other.stylesheets.length !== 0) bad += fail('a non-CSS style type was parsed as CSS');
+      return bad;
+    },
+  },
+  {
+    name: 'a-style-attribute-is-a-declaration-list-owned-by-the-attribute',
+    spec: 'the style attribute\'s value is a <declaration-list>',
+    rulesOut: 'a reader that needs a rule to own a declaration, or drops the good half of a bad list',
+    run: () => {
+      const text = '<div style="color: red; margin:0"><span style="color: ; top: 1px">x</span></div>';
+      const x = parseHtml(text);
+      const div = x.attributes.find((a) => a.name === 'style' && a.value.startsWith('color: red'))!;
+      const mine = x.css.declarations.filter((d) => d.htmlAttributeLinkHash === div.getHash());
+      let bad = 0;
+      if (mine.map((d) => `${d.property}=${d.valueText}`).join(' ') !== 'color=red margin=0') bad += fail(`declarations=${mine.map((d) => d.property).join(',')}`);
+      if (mine.some((d) => d.ruleLinkHash !== '' || d.stylesheetLinkHash !== '')) bad += fail('a style attribute declaration claims a rule or a sheet');
+      const at = col(text, 'margin');
+      if (mine[1]!.startLine !== at.line || mine[1]!.startColumn !== at.column) bad += fail(`margin at ${mine[1]!.startLine}:${mine[1]!.startColumn}, written at ${at.line}:${at.column}`);
+      if (!x.css.declarations.some((d) => d.property === 'top')) bad += fail('the readable declaration after a bad one was dropped');
+      if (!x.parseGaps.some((g) => g.gapKind === HtmlParseGapKind.STYLE_ATTRIBUTE_SYNTAX)) bad += fail('no STYLE_ATTRIBUTE_SYNTAX gap');
+      return bad;
+    },
+  },
+  {
+    name: 'template-dialects-are-read-from-their-markers',
+    spec: 'the file is a template of the family whose delimiters it uses',
+    rulesOut: 'a detector keyed on the file extension, which is .html for all of them',
+    run: () => {
+      const cases: Array<[string, HtmlTemplateDialect[]]> = [
+        ['<p>{{ a }}</p>', [HtmlTemplateDialect.MUSTACHE]],
+        ['{% if a %}<p>{{ a }}</p>{% endif %}', [HtmlTemplateDialect.JINJA, HtmlTemplateDialect.MUSTACHE]],
+        ['{{#each items}}<li>{{this}}</li>{{/each}}', [HtmlTemplateDialect.HANDLEBARS, HtmlTemplateDialect.MUSTACHE]],
+        ['<% if (u) { %><p><%= u %></p><% } %>', [HtmlTemplateDialect.ERB]],
+        ['<?php echo $x; ?>', [HtmlTemplateDialect.PHP]],
+        ['@model Foo\n<p>@Model.Name</p>', [HtmlTemplateDialect.RAZOR]],
+        ['<p>${name}</p>', [HtmlTemplateDialect.DOLLAR_BRACE]],
+        ['<p th:text="${x}">x</p>', [HtmlTemplateDialect.DOLLAR_BRACE, HtmlTemplateDialect.THYMELEAF]],
+        ['<p>plain</p>', []],
+      ];
+      let bad = 0;
+      for (const [text, want] of cases) {
+        const got = [...parseHtml(text).document.templateDialects].sort().join(',');
+        if (got !== [...want].sort().join(',')) bad += fail(`${JSON.stringify(text)}: ${got || '(none)'}, expected ${want.join(',') || '(none)'}`);
+      }
+      return bad;
+    },
+  },
+  {
+    name: 'gaps-are-capped-with-a-count-of-the-rest',
+    spec: 'a parse error per attribute on a file with thousands of them is a count, not a table',
+    rulesOut: 'an extractor that emits ten thousand gap rows, or drops them with no trace',
+    run: () => {
+      const attrs = Array.from({ length: WEB_PARSE_GAP_LIMIT + 50 }, (_, i) => `a${i}="1" a${i}="2"`).join(' ');
+      const x = parseHtml(`<div ${attrs}></div>`);
+      const limit = x.parseGaps.find((g) => g.gapKind === HtmlParseGapKind.GAP_LIMIT_REACHED);
+      let bad = 0;
+      if (x.parseGaps.length !== WEB_PARSE_GAP_LIMIT + 1) bad += fail(`${x.parseGaps.length} gaps, expected ${WEB_PARSE_GAP_LIMIT} + 1`);
+      if (limit === undefined || !limit.detail.startsWith('50 ')) bad += fail(`limit row=${limit?.detail}`);
+      if (x.document.getParseGapCount() !== x.parseGaps.length) bad += fail('document gap count disagrees');
+      return bad;
+    },
+  },
+  // ── CSS: selectors ──────────────────────────────────────────────────────
+  {
+    name: 'specificity-follows-selectors-level-4',
+    spec: 'count ids (a); classes, attributes and pseudo-classes (b); types and pseudo-elements (c); :where() adds nothing; :is()/:not()/:has() add their most specific argument',
+    rulesOut: 'a counter that counts :where(), ignores :not()\'s argument, or counts *',
+    run: () => {
+      const cases: Array<[string, string]> = [
+        ['#a .b c::before', '1,1,2'], ['*', '0,0,0'], ['ul li', '0,0,2'], [':root', '0,1,0'],
+        [':is(#x, .y) p', '1,0,1'], [':where(.x) p', '0,0,1'], ['div:not(.a .b)', '0,2,1'], [':has(> img)', '0,0,1'],
+        ['li:nth-child(2n of .x)', '0,2,1'], ['a:hover', '0,1,1'], ['a:before', '0,0,2'], ['input[type="text"]', '0,1,1'],
+        [':host(.a)', '0,2,0'], ['.a.b.c', '0,3,0'], ['svg|rect', '0,0,1'], ['&:hover', '0,1,0'],
+      ];
+      let bad = 0;
+      for (const [selector, want] of cases) {
+        const got = specificity(selector);
+        if (got !== want) bad += fail(`${selector}: ${got}, expected ${want}`);
+      }
+      return bad;
+    },
+  },
+  {
+    name: 'selector-parts-keep-compounds-combinators-and-nesting',
+    spec: 'a complex selector is compounds separated by combinators; a functional pseudo-class takes selectors as arguments',
+    rulesOut: 'a flattener that loses which compound a class is in, or whether it was negated',
+    run: () => {
+      const x = parseCss('.nav > li.item:not(.hidden) + a[href^="http" i] ~ b::before, #x { color: red }');
+      const got = x.selectorParts.map((p) => `${p.position}:${p.partKind}:${p.name}${p.value ? '=' + p.value : ''}${p.attributeMatcher}${p.attributeFlags}@${p.compoundIndex}${p.combinatorBefore === CssCombinator.NONE ? '' : '<' + p.combinatorBefore}${p.depth ? '^' + p.depth : ''}`).join(' ');
+      const want = '0:CLASS:nav@0 1:TYPE:li@1<CHILD 2:CLASS:item@1 3:PSEUDO_CLASS:not=.hidden@1 4:CLASS:hidden@0^1 5:TYPE:a@2<NEXT_SIBLING 6:ATTRIBUTE:href=http^=i@2 7:TYPE:b@3<SUBSEQUENT_SIBLING 8:PSEUDO_ELEMENT:before@3 0:ID:x@0';
+      let bad = 0;
+      if (got !== want) bad += fail(`got  ${got}\n      want ${want}`);
+      const hidden = x.selectorParts.find((p) => p.name === 'hidden')!;
+      const not = x.selectorParts.find((p) => p.name === 'not')!;
+      if (hidden.parentPartLinkHash !== not.getHash()) bad += fail('the negated class does not chain to its :not');
+      if (x.selectors.length !== 2) bad += fail('two selectors expected');
+      if (x.selectors[0]!.compoundCount !== 4 || !x.selectors[0]!.hasPseudoElement) bad += fail('compoundCount / hasPseudoElement wrong');
+      if (x.selectorParts.some((p) => p.selectorLinkHash !== x.selectors[p.name === 'x' ? 1 : 0]!.getHash())) bad += fail('a part chains to the wrong selector');
+      return bad;
+    },
+  },
+  {
+    name: 'nested-rules-are-children-of-their-rule',
+    spec: 'CSS Nesting: a style rule may contain style rules and at-rules; & is the parent selector',
+    rulesOut: 'a reader that drops a nested rule, or loses the & the grammar rejects after a compound',
+    run: () => {
+      const text = '.card {\n  color: blue;\n  &:hover { color: red }\n  .title & { font-weight: bold }\n  @media (width > 40em) { padding: 1rem }\n}\n.after { x: y }';
+      const x = parseCss(text);
+      const card = x.rules.find((r) => r.preludeText === '.card')!;
+      const children = x.rules.filter((r) => r.parentRuleLinkHash === card.getHash());
+      let bad = 0;
+      if (children.map((r) => `${r.position}:${r.preludeText}`).join(' ') !== '0:&:hover 1:.title & 2:(width > 40em)') {
+        bad += fail(`children=${children.map((r) => r.preludeText).join(' | ')}`);
+      }
+      if (children.some((r) => r.nestingDepth !== 1)) bad += fail('nested rules are not at depth 1');
+      if (card.getDeclarationCount() !== 1) bad += fail(`card declarations=${card.getDeclarationCount()}, expected 1`);
+      const hover = children[0]!;
+      if (hover.startLine !== 3 || hover.startColumn !== 3) bad += fail(`&:hover at ${hover.startLine}:${hover.startColumn}, expected 3:3`);
+      const red = x.declarations.find((d) => d.ruleLinkHash === hover.getHash());
+      if (red === undefined || red.valueText !== 'red' || red.startLine !== 3) bad += fail('the nested rule\'s declaration is missing or misplaced');
+      if (!x.selectors.find((s) => s.selectorText === '&:hover')?.hasNesting) bad += fail('&:hover is not flagged hasNesting');
+      const title = x.selectors.find((s) => s.selectorText === '.title &');
+      if (title === undefined || !title.hasNesting) bad += fail('`.title &` lost its nesting selector');
+      if (!x.selectorParts.some((p) => p.partKind === CssSelectorPartKind.NESTING && p.selectorLinkHash === title?.getHash())) bad += fail('the & after a compound is not a NESTING part');
+      // The grammar rejects a range media query; the rule still stands and the gap says where.
+      if (x.parseGaps.some((g) => g.gapKind !== CssParseGapKind.PARSE_ERROR)) bad += fail(`unexpected gap kinds: ${x.parseGaps.map((g) => g.gapKind).join(', ')}`);
+      if (x.parseGaps.some((g) => g.detail.includes('&'))) bad += fail('a recovered & is still reported as a gap');
+      if (!x.rules.some((r) => r.preludeText === '.after' && r.parentRuleLinkHash === '')) bad += fail('the rule after the nested block was lost');
+      return bad;
+    },
+  },
+  {
+    name: 'at-rules-declare-names-and-nest-their-rules',
+    spec: '@keyframes, @layer, @container, @property and @font-face name something; @media and @supports wrap rules',
+    rulesOut: 'a reader that treats every at-rule as an opaque block',
+    run: () => {
+      const x = parseCss('@media (min-width: 1px) { .a { x: 1 } }\n@keyframes spin { from { x: 0 } 50% { x: 1 } to { x: 2 } }\n@font-face { font-family: "Inter"; src: url(a.woff2) }\n@layer base;\n@layer a, b;\n@container card (min-width: 1px) { .b { y: 2 } }\n@property --p { syntax: "<length>" }\n@import "x.css" layer(l);');
+      const at = (name: string, index = 0): typeof x.rules[number] => x.rules.filter((r) => r.atRuleName === name)[index]!;
+      let bad = 0;
+      if (at('keyframes').getName() !== 'spin') bad += fail(`keyframes name=${at('keyframes').getName()}`);
+      if (at('font-face').getName() !== 'Inter') bad += fail(`font-face name=${at('font-face').getName()}`);
+      if (at('layer', 0).getName() !== 'base' || at('layer', 1).getName() !== '') bad += fail('layer names: a single name is the rule\'s, a list is not');
+      if (at('container').getName() !== 'card') bad += fail(`container name=${at('container').getName()}`);
+      if (at('property').getName() !== '--p') bad += fail(`property name=${at('property').getName()}`);
+      const media = at('media');
+      const a = x.rules.find((r) => r.preludeText === '.a')!;
+      if (a.parentRuleLinkHash !== media.getHash() || media.preludeText !== '(min-width: 1px)') bad += fail('the rule inside @media does not chain to it');
+      const frames = x.rules.filter((r) => r.parentRuleLinkHash === at('keyframes').getHash());
+      if (frames.map((r) => r.preludeText).join(' ') !== 'from 50% to') bad += fail(`keyframe selectors=${frames.map((r) => r.preludeText).join(' ')}`);
+      if (x.selectorParts.some((p) => p.ruleLinkHash === frames[1]!.getHash())) bad += fail('a keyframe selector emitted element parts');
+      const refs = x.valueReferences.map((v) => `${v.referenceKind}:${v.name}`);
+      for (const want of ['LAYER:base', 'LAYER:a', 'LAYER:b', 'CONTAINER:card', 'IMPORT:x.css', 'LAYER:l', 'FONT_FAMILY:Inter', 'URL:a.woff2']) {
+        if (!refs.includes(want)) bad += fail(`missing reference ${want} in ${refs.join(' ')}`);
+      }
+      return bad;
+    },
+  },
+  // ── CSS: declarations and values ────────────────────────────────────────
+  {
+    name: 'declarations-keep-importance-custom-properties-prefixes-and-text-as-written',
+    spec: '!important, custom property names, vendor prefixes; the value is the text between the colon and the end',
+    rulesOut: 'a serialiser that writes url(x)no-repeat, or lowercases --Custom',
+    run: () => {
+      const x = parseCss(':root { --Brand: #09f; -webkit-font-smoothing: antialiased; background: url(a.png)   no-repeat !important; color: RED }');
+      const got = x.declarations.map((d) => `${d.position}:${d.property}=${d.valueText}${d.isImportant ? '!' : ''}${d.isCustomProperty ? '~' : ''}${d.vendorPrefix ? '(' + d.vendorPrefix + ')' : ''}`).join(' ');
+      const want = '0:--Brand=#09f~ 1:-webkit-font-smoothing=antialiased(-webkit-) 2:background=url(a.png) no-repeat! 3:color=RED';
+      return got === want ? 0 : fail(`got  ${got}\n      want ${want}`);
+    },
+  },
+  {
+    name: 'value-references-name-what-a-value-reaches',
+    spec: 'var() refers to a custom property with an optional fallback; url() to a resource; animation-name to a @keyframes; font-family to a family',
+    rulesOut: 'a reader that takes the keyword linear for an animation name, or sans-serif for a font',
+    run: () => {
+      file('site/css/img/bg.png', '');
+      const x = parseCss('.a { color: var(--c, var(--d, red)); background: url("img/bg.png"); animation: 1s linear infinite spin, fade .5s; font-family: Segoe UI, "Inter", sans-serif; container: side / inline-size; --x: url(img/bg.png) }');
+      const got = x.valueReferences.map((v) => `${v.referenceKind}:${v.name}${v.fallbackText ? '[' + v.fallbackText + ']' : ''}${v.isResolved ? '+' : ''}`).join(' ');
+      const want = 'VARIABLE:--c[var(--d, red)] VARIABLE:--d[red] URL:img/bg.png+ KEYFRAMES:spin KEYFRAMES:fade FONT_FAMILY:Segoe UI FONT_FAMILY:Inter CONTAINER:side URL:img/bg.png+';
+      let bad = 0;
+      if (got !== want) bad += fail(`got  ${got}\n      want ${want}`);
+      const first = x.valueReferences[0]!;
+      const owner = x.declarations.find((d) => d.property === 'color')!;
+      if (first.ownerDeclarationLinkHash !== owner.getHash() || first.ownerRuleLinkHash !== '') bad += fail('a var() does not chain to its declaration');
+      if (x.valueReferences.some((v) => v.referenceKind === CssValueReferenceKind.URL && v.urlKind !== WebUrlKind.RELATIVE)) bad += fail('url kind wrong');
+      return bad;
+    },
+  },
+  {
+    name: 'what-the-grammar-cannot-read-is-a-gap-and-the-rest-stands',
+    spec: 'error recovery: a bad declaration ends at the next semicolon; a bad rule at its block',
+    rulesOut: 'a parser that fails the file, drops the bad region silently, or loses the declaration the grammar folded into the bad one',
+    run: () => {
+      const x = parseCss('.a { color: ; top: 1px }\n.b { x: 1 }\n$primary: red;\n@mixin m { }');
+      let bad = 0;
+      const kinds = x.parseGaps.map((g) => g.gapKind);
+      if (!kinds.includes(CssParseGapKind.PARSE_ERROR)) bad += fail('no PARSE_ERROR for `color: ;`');
+      if (!kinds.includes(CssParseGapKind.PREPROCESSOR_SYNTAX)) bad += fail('no PREPROCESSOR_SYNTAX for $primary');
+      const top = x.declarations.find((d) => d.property === 'top');
+      if (top === undefined || top.valueText !== '1px' || top.startLine !== 1 || top.startColumn !== 15) bad += fail(`the declaration after the bad one: ${top === undefined ? 'lost' : `${top.valueText} at ${top.startLine}:${top.startColumn}`}`);
+      if (!x.rules.some((r) => r.preludeText === '.b')) bad += fail('the rule after the bad one was lost');
+      if (x.sheet.getParseGapCount() !== x.parseGaps.length) bad += fail('gap count not back-patched');
+      const y = parseCss('/* c1 */ .a { }\n/* two\nlines */');
+      if (y.comments.map((c) => `${c.text}@${c.startLine}:${c.startColumn}-${c.endLine}:${c.endColumn}`).join(' ') !== ' c1 @1:1-1:9  two\nlines @2:1-3:9') {
+        bad += fail(`comments=${y.comments.map((c) => JSON.stringify(c.text) + '@' + c.startLine + ':' + c.startColumn + '-' + c.endLine + ':' + c.endColumn).join(' ')}`);
+      }
+      return bad;
+    },
+  },
+  {
+    name: 'embedded-css-positions-are-offset-on-the-first-line-only',
+    spec: 'a <style> body begins mid-line; its second line begins at column 1 of the next page line',
+    rulesOut: 'a mapper that adds the host column to every line, or the host line to none',
+    run: () => {
+      const x = parseCss('.a { x: 1 }\n.b { y: 2 }', 'site/css/e.css', { line: 10, column: 12 });
+      const [a, b] = x.rules;
+      let bad = 0;
+      if (a!.startLine !== 10 || a!.startColumn !== 12) bad += fail(`.a at ${a!.startLine}:${a!.startColumn}, expected 10:12`);
+      if (b!.startLine !== 11 || b!.startColumn !== 1) bad += fail(`.b at ${b!.startLine}:${b!.startColumn}, expected 11:1`);
+      return bad;
+    },
+  },
+  {
+    name: 'keys-are-content-addressed-and-never-collide-on-a-name',
+    spec: 'every row has its own key; two rules spelled the same are two rules',
+    rulesOut: 'a key derived from the selector text or the class name',
+    run: () => {
+      const x = parseCss('.a { x: 1 }\n.a { x: 1 }\n@media (a) { .a { x: 1 } }');
+      let bad = 0;
+      const keys = new Set(x.rules.map((r) => r.getHash()));
+      if (keys.size !== 4) bad += fail(`${keys.size} distinct rule keys for 4 rules`);
+      if (new Set(x.selectors.map((s) => s.getHash())).size !== 3) bad += fail('identical selectors in different rules share a key');
+      if (new Set(x.declarations.map((d) => d.getHash())).size !== 3) bad += fail('identical declarations in different rules share a key');
+      const again = parseCss('.a { x: 1 }\n.a { x: 1 }\n@media (a) { .a { x: 1 } }');
+      if (again.rules.map((r) => r.getHash()).join() !== x.rules.map((r) => r.getHash()).join()) bad += fail('keys differ across two parses of one text');
+      const h1 = parseHtml('<style>.a{}</style>', 'site/one.html').stylesheets[0]!.getHash();
+      const h2 = parseHtml('<style>.a{}</style>', 'site/two.html').stylesheets[0]!.getHash();
+      if (h1 === h2) bad += fail('the same inline CSS in two pages shares a stylesheet key');
+      return bad;
+    },
+  },
+];
+
+// ---------------------------------------------------------------------------
+// fixture-tree machinery
+// ---------------------------------------------------------------------------
+
+function tsv(dir: string, f: string): Row[] {
+  const fp = path.join(dir, f);
+  if (!fs.existsSync(fp)) return [];
+  const lines = fs.readFileSync(fp, 'utf-8').split('\n').filter(Boolean);
+  if (!lines.length) return [];
+  const head = lines[0]!.split('\t');
+  return lines.slice(1).map((l) => {
+    const cells = l.split('\t');
+    return Object.fromEntries(head.map((h, i) => [h, cells[i] ?? ''])) as Row;
+  });
+}
+
+const RELATION_FILES = Object.entries(WEB_CSV_FILES)
+  .filter(([k]) => !k.startsWith('SKIPPED'))
+  .map(([, f]) => f);
+
+/** CSV file name → relation name, through the schema's `all-html-x-ys.csv` ↔ `html_x_y` convention. */
+const RELATION_OF: Record<string, string> = {
+  'all-html-documents.csv': 'html_document', 'all-html-elements.csv': 'html_element', 'all-html-attributes.csv': 'html_attribute',
+  'all-html-class-references.csv': 'html_class_reference', 'all-html-references.csv': 'html_reference', 'all-html-scripts.csv': 'html_script',
+  'all-html-handler-calls.csv': 'html_handler_call', 'all-html-template-expressions.csv': 'html_template_expression',
+  'all-html-parse-gaps.csv': 'html_parse_gap', 'all-css-stylesheets.csv': 'css_stylesheet',
+  'all-css-rules.csv': 'css_rule', 'all-css-selectors.csv': 'css_selector', 'all-css-selector-parts.csv': 'css_selector_part',
+  'all-css-declarations.csv': 'css_declaration', 'all-css-value-references.csv': 'css_value_reference', 'all-css-comments.csv': 'css_comment',
+  'all-css-parse-gaps.csv': 'css_parse_gap',
+};
+
+/** Which relation each link column points at. */
+const LINK_TARGET: Record<string, string> = {
+  documentLinkHash: 'html_document', htmlDocumentLinkHash: 'html_document',
+  ownerElementLinkHash: 'html_element', parentElementLinkHash: 'html_element', relatedElementLinkHash: 'html_element', ownerHtmlElementLinkHash: 'html_element',
+  attributeLinkHash: 'html_attribute', htmlAttributeLinkHash: 'html_attribute', referenceLinkHash: 'html_reference',
+  stylesheetLinkHash: 'css_stylesheet', ruleLinkHash: 'css_rule', parentRuleLinkHash: 'css_rule', relatedRuleLinkHash: 'css_rule', ownerRuleLinkHash: 'css_rule',
+  selectorLinkHash: 'css_selector', parentPartLinkHash: 'css_selector_part', ownerDeclarationLinkHash: 'css_declaration',
+};
+
+async function analyse(rootDir: string, outputDir: string, order: 'root-first' | 'root-last' = 'root-first'): Promise<string> {
+  fs.rmSync(outputDir, { recursive: true, force: true });
+  fs.mkdirSync(outputDir, { recursive: true });
+  const subs = [path.join(rootDir, 'site'), path.join(rootDir, 'app')];
+  const targets = (order === 'root-first' ? [rootDir, ...subs] : [...subs, rootDir]).map((p) => ({
+    name: path.basename(p), path: p, language: 'UNKNOWN' as never, hasSourceFiles: false,
+  }));
+  const silence = console.log;
+  console.log = () => {};
+  try {
+    await new WebProjectAnalyzer(outputDir).analyzeWebFiles(targets, 'WEB_FIXTURE_VERSION');
+  } finally {
+    console.log = silence;
+  }
+  return outputDir;
+}
+
+/** Every fact, sorted, volatile and hash columns dropped. Row order is not a contract. */
+function snapshot(out: string): Map<string, string[]> {
+  const snap = new Map<string, string[]>();
+  for (const f of RELATION_FILES) {
+    const rows = tsv(out, f);
+    if (!rows.length) continue;
+    const cols = Object.keys(rows[0]!).filter((c) => !VOLATILE.test(c) && !HASH_COLUMN.test(c));
+    snap.set(f.replace('all-', '').replace('.csv', ''), rows.map((r) => cols.map((c) => `${c}=${r[c] ?? ''}`).join('\t')).sort());
+  }
+  return snap;
+}
+
+function goldenCheck(out: string): number {
+  const snap = snapshot(out);
+  if (BLESS) {
+    fs.rmSync(GOLDEN, { recursive: true, force: true });
+    fs.mkdirSync(GOLDEN, { recursive: true });
+    for (const [rel, rows] of snap) fs.writeFileSync(path.join(GOLDEN, rel + '.txt'), rows.join('\n') + '\n');
+    console.log(`  ✎ blessed ${snap.size} relation(s)`);
+    return 0;
+  }
+  if (!fs.existsSync(GOLDEN)) return fail('no golden; run --bless');
+  let bad = 0;
+  const expected = new Set(fs.readdirSync(GOLDEN).map((f) => f.replace('.txt', '')));
+  for (const rel of expected) if (!snap.has(rel)) bad += fail(`relation ${rel} vanished`);
+  for (const [rel, rows] of snap) {
+    if (!expected.has(rel)) { bad += fail(`relation ${rel} appeared unexpectedly`); continue; }
+    const want = fs.readFileSync(path.join(GOLDEN, rel + '.txt'), 'utf-8').split('\n').filter(Boolean);
+    if (want.length !== rows.length) bad += fail(`${rel}: ${rows.length} rows, expected ${want.length}`);
+    for (let i = 0; i < Math.min(want.length, rows.length); i++) {
+      if (want[i] !== rows[i]) { bad += fail(`${rel} row ${i}\n      want ${want[i]}\n      got  ${rows[i]}`); break; }
+    }
+  }
+  return bad;
+}
+
+/** Arity against the frozen schema, the key last, and every enum column inside its domain. */
+function schemaCheck(out: string): number {
+  let bad = 0;
+  for (const f of RELATION_FILES) {
+    const fp = path.join(out, f);
+    const relation = RELATION_OF[f]!;
+    const spec = SCHEMA.relations[relation];
+    if (spec === undefined) { bad += fail(`${relation} is not in schema.json`); continue; }
+    if (!fs.existsSync(fp)) { bad += fail(`${f} was not written by the fixture`); continue; }
+    const lines = fs.readFileSync(fp, 'utf-8').split('\n').filter(Boolean);
+    const header = lines[0]!.split('\t');
+    if (header.join(',') !== spec.columns.join(',')) bad += fail(`${f}: header ${header.join(',')}\n      schema ${spec.columns.join(',')}`);
+    if (!/UniqueHash$/.test(header[header.length - 1]!)) bad += fail(`${f}: last column is not the row's own key`);
+    lines.slice(1).forEach((line, i) => {
+      const n = line.split('\t').length;
+      if (n !== header.length) bad += fail(`${f} row ${i}: ${n} fields, header has ${header.length}`);
+    });
+    const rows = tsv(out, f);
+    for (const [column, domain] of Object.entries(spec.domains ?? {})) {
+      const allowed = new Set(domain);
+      for (const r of rows) {
+        const outside = cellValues(relation, column, r[column] ?? '').find((v) => !allowed.has(v));
+        if (outside !== undefined) { bad += fail(`${f}: ${column}=${outside} is outside its domain`); break; }
+      }
+    }
+  }
+  return bad;
+}
+
+/** Primary keys unique within a relation; every link resolves to a row of the right relation. */
+function integrityCheck(out: string): number {
+  let bad = 0;
+  const keys = new Map<string, Set<string>>();
+  for (const f of RELATION_FILES) {
+    const rows = tsv(out, f);
+    const relation = RELATION_OF[f]!;
+    const keyColumn = SCHEMA.relations[relation]!.columns.slice(-1)[0]!;
+    const seen = new Set<string>();
+    for (const r of rows) {
+      const k = r[keyColumn] ?? '';
+      if (k === '') bad += fail(`${f}: a row has no key`);
+      if (seen.has(k)) bad += fail(`${f}: duplicate key ${k}`);
+      seen.add(k);
+    }
+    keys.set(relation, seen);
+  }
+  for (const f of RELATION_FILES) {
+    const rows = tsv(out, f);
+    if (!rows.length) continue;
+    for (const column of Object.keys(rows[0]!)) {
+      const target = LINK_TARGET[column];
+      if (target === undefined) continue;
+      const pool = keys.get(target) ?? new Set<string>();
+      let dangling = 0;
+      for (const r of rows) {
+        const v = r[column] ?? '';
+        if (v !== '' && !pool.has(v)) dangling += 1;
+      }
+      if (dangling > 0) bad += fail(`${f}.${column}: ${dangling} link(s) to no ${target} row`);
+    }
+  }
+  // Every declaration has exactly one owner.
+  for (const r of tsv(out, WEB_CSV_FILES.CSS_DECLARATIONS)) {
+    if ((r['ruleLinkHash'] === '') === (r['htmlAttributeLinkHash'] === '')) { bad += fail('a css_declaration has zero or two owners'); break; }
+  }
+  for (const r of tsv(out, WEB_CSV_FILES.CSS_VALUE_REFERENCES)) {
+    if ((r['ownerDeclarationLinkHash'] === '') === (r['ownerRuleLinkHash'] === '')) { bad += fail('a css_value_reference has zero or two owners'); break; }
+  }
+  return bad;
+}
+
+// ---------------------------------------------------------------------------
+// the enum-emission audit
+// ---------------------------------------------------------------------------
+
+/**
+ * Reserved values, scoped `Enum.VALUE`, split by WHY they are reserved — the JavaScript
+ * suite's rule. A value that is merely unobserved in this fixture is not one that cannot
+ * occur, and asserting zero rows on it would be a gate that passes because the fixture is
+ * small. So only UNREACHABLE_BY_CONSTRUCTION is asserted at zero rows; MERELY_UNOBSERVED
+ * is reported, and a row appearing there is news rather than a failure.
+ */
+const UNREACHABLE_BY_CONSTRUCTION: Readonly<Record<string, string>> = {};
+
+const MERELY_UNOBSERVED: Readonly<Record<string, string>> = {
+  'HtmlParseGapKind.GAP_LIMIT_REACHED': 'needs 200+ errors in one page; the format check gaps-are-capped produces it',
+  'CssParseGapKind.GAP_LIMIT_REACHED': 'needs 200+ gaps in one stylesheet; the HTML cap check covers the collector shape',
+  'CssSelectorPartKind.RAW': 'a selector node of a kind this reader does not classify; the grammar\'s own node set is covered, so the fixture produces none',
+  'HtmlNamespace.MATHML': 'no fixture page holds <math>; the namespace is decided from context exactly as SVG is',
+};
+
+/**
+ * Every declared enum value of the web front end is emitted somewhere in the fixture
+ * output, or is reserved above with a reason.
+ *
+ * The column each enum binds to is read from schema.json's domains: a column whose domain
+ * is exactly the enum's value set carries that enum, so a value is scored against the
+ * columns that declare it and never against a free-text column that happens to hold the
+ * same word. A correctly positioned row with the wrong kind is invisible to every count
+ * and integrity check above; this is the one that sees it.
+ */
+function enumEmissionAudit(out: string): number {
+  let bad = 0;
+  const declared = new Map<string, string[]>();
+  for (const bundle of [HtmlEnums, CssEnums, WebEnums]) {
+    for (const [name, enumObject] of Object.entries(bundle as unknown as Record<string, unknown>)) {
+      if (typeof enumObject !== 'object' || enumObject === null || Array.isArray(enumObject)) continue;
+      const values = Object.values(enumObject as Record<string, unknown>).filter((v): v is string => typeof v === 'string');
+      if (values.length > 0) declared.set(name, values);
+    }
+  }
+  if (declared.size < 10) return fail(`only ${declared.size} enums discovered — the audit cannot be trusted`);
+  for (const key of [...Object.keys(UNREACHABLE_BY_CONSTRUCTION), ...Object.keys(MERELY_UNOBSERVED)]) {
+    const [enumName, value] = key.split('.');
+    if (!(declared.get(enumName ?? '') ?? []).includes(value ?? '')) bad += fail(`allowlist key ${key} names no declared Enum.VALUE`);
+  }
+  // Which (relation, column) carries which enum: by exact domain match against schema.json.
+  const columnsByEnum = new Map<string, Array<[string, string]>>();
+  for (const [relation, spec] of Object.entries(SCHEMA.relations)) {
+    for (const [column, domain] of Object.entries(spec.domains ?? {})) {
+      const want = [...domain].sort().join('|');
+      for (const [enumName, values] of declared) {
+        if ([...values].sort().join('|') === want) columnsByEnum.set(enumName, [...(columnsByEnum.get(enumName) ?? []), [relation, column]]);
+      }
+    }
+  }
+  const fileOf = Object.fromEntries(Object.entries(RELATION_OF).map(([f, r]) => [r, f]));
+  const unbound = [...declared.keys()].filter((e) => !columnsByEnum.has(e));
+  if (unbound.length > 0) bad += fail(`enum(s) with no column declaring them in schema.json: ${unbound.join(', ')}`);
+  const unemitted: string[] = [];
+  for (const [enumName, values] of declared) {
+    const emitted = new Set<string>();
+    for (const [relation, column] of columnsByEnum.get(enumName) ?? []) {
+      for (const r of tsv(out, fileOf[relation]!)) for (const v of cellValues(relation, column, r[column] ?? '')) emitted.add(v);
+    }
+    for (const value of values) {
+      const scoped = `${enumName}.${value}`;
+      if (emitted.has(value)) {
+        if (scoped in UNREACHABLE_BY_CONSTRUCTION) bad += fail(`${scoped} is reserved as unreachable and was emitted`);
+        continue;
+      }
+      if (scoped in UNREACHABLE_BY_CONSTRUCTION || scoped in MERELY_UNOBSERVED) continue;
+      unemitted.push(scoped);
+    }
+  }
+  if (unemitted.length > 0) {
+    bad += fail(`${unemitted.length} enum value(s) neither emitted by the fixture nor reserved: ${unemitted.join(', ')}`);
+  }
+  console.log(`    ${declared.size} enums, ${Object.keys(MERELY_UNOBSERVED).length} merely unobserved, ${Object.keys(UNREACHABLE_BY_CONSTRUCTION).length} unreachable`);
+  return bad;
+}
+
+function fixtureChecks(out: string, root: string): number {
+  let bad = 0;
+  const docs = tsv(out, WEB_CSV_FILES.HTML_DOCUMENTS);
+  const rel = docs.map((d) => d['relativePath']).sort();
+  const want = ['index.html', 'page.html', 'partials/frame.html', 'templates/fragment.html', 'templates/layout.html', 'templates/mixed.html'];
+  if (rel.join(' ') !== want.join(' ')) bad += fail(`documents=${rel.join(' ')}\n      expected ${want.join(' ')}`);
+  // Attribution: a page under site/ belongs to site/, never to the root target that also reaches it.
+  for (const d of docs) {
+    const owner = path.basename(d['baseMservPath']!);
+    const expectedOwner = d['relativePath']!.startsWith('templates/') ? 'app' : 'site';
+    if (owner !== expectedOwner) bad += fail(`${d['relativePath']} attributed to ${owner}, expected ${expectedOwner}`);
+  }
+  if (docs.some((d) => d['filePath']!.includes('apidocs'))) bad += fail('a javadoc output page was analysed');
+  const sheets = tsv(out, WEB_CSV_FILES.CSS_STYLESHEETS);
+  const files = sheets.filter((s) => s['sourceKind'] === 'FILE').map((s) => s['relativePath']).sort().join(' ');
+  if (files !== 'static/css/app.css static/css/base.css static/css/vendor.min.css vendor/sassy.css') bad += fail(`css files=${files}`);
+  if (sheets.find((s) => s['fileName'] === 'vendor.min.css')?.['sourceProvenance'] !== 'MINIFIED') bad += fail('vendor.min.css is not MINIFIED');
+  if (sheets.filter((s) => s['sourceKind'] === 'HTML_STYLE_ELEMENT').length !== 1) bad += fail('one inline stylesheet expected');
+  const skipped = tsv(out, WEB_CSV_FILES.SKIPPED_CSS_FILES);
+  if (!skipped.some((s) => s['filePath']!.endsWith('empty.css') && s['reason'] === 'EMPTY_CONTENT')) bad += fail('empty.css is not a recorded skip');
+  const refs = tsv(out, WEB_CSV_FILES.HTML_REFERENCES);
+  const resolvedStylesheet = refs.find((r) => r['referenceKind'] === 'STYLESHEET' && r['isResolved'] === 'true');
+  if (resolvedStylesheet === undefined || !sheets.some((s) => s['filePath'] === resolvedStylesheet['resolvedFilePath'])) {
+    bad += fail('a resolved stylesheet reference does not name a css_stylesheet row\'s filePath');
+  }
+  const mainJs = refs.find((r) => r['urlAsWritten'] === '/assets/main.js');
+  if (mainJs?.['resolvedFilePath'] !== path.join(root, 'app/public/assets/main.js')) bad += fail(`/assets/main.js resolved to ${mainJs?.['resolvedFilePath']}`);
+  const gaps = tsv(out, WEB_CSV_FILES.CSS_PARSE_GAPS);
+  if (!gaps.some((g) => g['gapKind'] === 'PREPROCESSOR_SYNTAX')) bad += fail('sassy.css raised no PREPROCESSOR_SYNTAX gap');
+  const parts = tsv(out, WEB_CSV_FILES.CSS_SELECTOR_PARTS);
+  const classRefs = tsv(out, WEB_CSV_FILES.HTML_CLASS_REFERENCES);
+  const styled = new Set(parts.filter((p) => p['partKind'] === CssSelectorPartKind.CLASS).map((p) => p['name']));
+  const joined = classRefs.filter((c) => styled.has(c['className']!)).length;
+  if (joined < 5) bad += fail(`only ${joined} class references join a CSS class selector; the fixture has more`);
+  return bad;
+}
+
+async function fixtureSuite(): Promise<number> {
+  const root = path.resolve(DATA, 'fixture');
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'axiom-web-fixture-'));
+  let bad = 0;
+  try {
+    const a = await analyse(root, path.join(tmp, 'a'));
+    bad += goldenCheck(a);
+    bad += schemaCheck(a);
+    bad += integrityCheck(a);
+    bad += enumEmissionAudit(a);
+    bad += fixtureChecks(a, root);
+    const b = await analyse(root, path.join(tmp, 'b'));
+    for (const f of [...RELATION_FILES, WEB_CSV_FILES.SKIPPED_CSS_FILES]) {
+      const x = fs.existsSync(path.join(a, f)) ? fs.readFileSync(path.join(a, f), 'utf-8') : '';
+      const y = fs.existsSync(path.join(b, f)) ? fs.readFileSync(path.join(b, f), 'utf-8') : '';
+      if (x !== y) bad += fail(`${f} differs between two runs — extraction is not deterministic`);
+    }
+    const c = await analyse(root, path.join(tmp, 'c'), 'root-last');
+    const sa = snapshot(a);
+    const sc = snapshot(c);
+    for (const [rel, rows] of sa) {
+      if ((sc.get(rel) ?? []).join('\n') !== rows.join('\n')) bad += fail(`${rel}: attribution depends on target order`);
+    }
+  } finally {
+    fs.rmSync(tmp, { recursive: true, force: true });
+  }
+  return bad;
+}
+
+// ---------------------------------------------------------------------------
+// runner
+// ---------------------------------------------------------------------------
+
+async function main(): Promise<number> {
+  if (process.argv.includes('--list')) {
+    for (const c of formatChecks) {
+      console.log(`${c.name}\n    spec:      ${c.spec}\n    rules out: ${c.rulesOut}`);
+    }
+    console.log('fixture-tree\n    golden, schema arity and domains, key uniqueness, foreign keys, enum-emission audit, attribution, determinism');
+    return 0;
+  }
+  let bad = 0;
+  let ran = 0;
+  console.log('── format checks');
+  for (const c of formatChecks) {
+    ran += 1;
+    let r: number;
+    try {
+      r = c.run();
+    } catch (e) {
+      r = fail(`${c.name}: threw ${e instanceof Error ? e.stack ?? e.message : String(e)}`);
+    }
+    console.log(`  ${r === 0 ? '✓' : '✗'} ${c.name}`);
+    bad += r;
+  }
+  console.log('── fixture tree');
+  ran += 1;
+  const f = await fixtureSuite();
+  console.log(`  ${f === 0 ? '✓' : '✗'} fixture-tree`);
+  bad += f;
+  fs.rmSync(TMP, { recursive: true, force: true });
+  console.log(bad === 0 ? `\nOK  ${ran} check(s)` : `\nFAIL  ${bad} problem(s) in ${ran} check(s)`);
+  return bad === 0 ? 0 : 1;
+}
+
+main().then((code) => process.exit(code)).catch((e) => { console.error(e); process.exit(2); });
diff --git a/parser/src/test/web-torture-checks.ts b/parser/src/test/web-torture-checks.ts
new file mode 100644
index 000000000..1d570bd3a
--- /dev/null
+++ b/parser/src/test/web-torture-checks.ts
@@ -0,0 +1,1254 @@
+/**
+ * The torture checks. Each one names a construct in `src/test-data/web/torture`, the
+ * rows it must have produced, and the verdict when it did not. See web-torture.ts.
+ *
+ * Line numbers below are the fixture's; a fixture edit moves them, and the check then
+ * says so by failing to find the row rather than by passing vacuously (every lookup
+ * that comes back empty is a failure).
+ */
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+
+import { CssStylesheet } from '@/analysis-types/css/CssStylesheet';
+import { CssSourceProvenance, CssStylesheetSource } from '@/enums/css/CssStylesheetSource';
+import { CssExtraction, CssParser } from '@/parsers/css/css-parser';
+import { HtmlExtraction, HtmlParser } from '@/parsers/html/html-parser';
+
+import { Check, Ir, Row } from './web-torture-ir';
+
+type Fail = (message: string) => void;
+
+const names = (rows: Row[], col = 'name'): string[] => rows.map((r) => r[col]!);
+const same = (got: string[], want: string[]): boolean => got.length === want.length && got.every((g, i) => g === want[i]);
+function expectList(fail: Fail, what: string, got: string[], want: string[]): void {
+  if (!same(got, want)) fail(`${what}: got [${got.join(', ')}], want [${want.join(', ')}]`);
+}
+type Cell = string | number | boolean | undefined;
+function expectEq(fail: Fail, what: string, got: Cell, want: Cell): void {
+  if (got !== want) fail(`${what}: got ${JSON.stringify(got)}, want ${JSON.stringify(want)}`);
+}
+function expectRow(fail: Fail, what: string, row: Row | undefined): row is Row {
+  if (row === undefined) fail(`${what}: no row`);
+  return row !== undefined;
+}
+function refSummary(decl: Row, ir: Ir): string[] {
+  return ir.refsOfDecl(decl).map((v) => `${v['referenceKind']}:${v['name']}${v['fallbackText'] ? `[${v['fallbackText']}]` : ''}`);
+}
+
+// ===========================================================================
+// the checks
+// ===========================================================================
+
+export const CHECKS: Check[] = [
+  // ── integrity of the whole output ─────────────────────────────────────────
+  {
+    name: 'integrity: every key unique, every link lands on a row of the right relation, one owner per declaration',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const TARGET: Record<string, string> = {
+        documentLinkHash: 'HTML_DOCUMENTS', htmlDocumentLinkHash: 'HTML_DOCUMENTS', ownerElementLinkHash: 'HTML_ELEMENTS',
+        parentElementLinkHash: 'HTML_ELEMENTS', relatedElementLinkHash: 'HTML_ELEMENTS', ownerHtmlElementLinkHash: 'HTML_ELEMENTS',
+        attributeLinkHash: 'HTML_ATTRIBUTES', htmlAttributeLinkHash: 'HTML_ATTRIBUTES', referenceLinkHash: 'HTML_REFERENCES',
+        stylesheetLinkHash: 'CSS_STYLESHEETS', ruleLinkHash: 'CSS_RULES', parentRuleLinkHash: 'CSS_RULES', relatedRuleLinkHash: 'CSS_RULES',
+        ownerRuleLinkHash: 'CSS_RULES', selectorLinkHash: 'CSS_SELECTORS', parentPartLinkHash: 'CSS_SELECTOR_PARTS', ownerDeclarationLinkHash: 'CSS_DECLARATIONS',
+      };
+      const keys = new Map<string, Set<string>>();
+      for (const [table, rows] of Object.entries(ir.tables)) {
+        if (table.startsWith('SKIPPED') || rows.length === 0) continue;
+        const keyCol = Object.keys(rows[0]!).find((c) => c.endsWith('UniqueHash'))!;
+        const seen = new Set<string>();
+        for (const r of rows) {
+          if (seen.has(r[keyCol]!)) fail(`${table}: duplicate key ${r[keyCol]}`);
+          seen.add(r[keyCol]!);
+        }
+        keys.set(table, seen);
+      }
+      for (const [table, rows] of Object.entries(ir.tables)) {
+        if (table.startsWith('SKIPPED') || rows.length === 0) continue;
+        for (const col of Object.keys(rows[0]!)) {
+          const target = TARGET[col];
+          if (target === undefined) continue;
+          const dangling = rows.filter((r) => r[col] !== '' && !(keys.get(target) ?? new Set()).has(r[col]!)).length;
+          if (dangling > 0) fail(`${table}.${col}: ${dangling} link(s) to no ${target} row`);
+        }
+      }
+      for (const d of ir.declarations) {
+        if ((d['ruleLinkHash'] === '') === (d['htmlAttributeLinkHash'] === '')) { fail('a css_declaration has zero or two owners'); break; }
+      }
+      for (const v of ir.valueRefs) {
+        if ((v['ownerDeclarationLinkHash'] === '') === (v['ownerRuleLinkHash'] === '')) { fail('a css_value_reference has zero or two owners'); break; }
+      }
+      if (ir.documents.length !== 9) fail(`${ir.documents.length} documents, expected 9`);
+      if (ir.stylesheets.filter((s) => s['sourceKind'] === 'FILE').length !== 24) fail(`${ir.stylesheets.filter((s) => s['sourceKind'] === 'FILE').length} css files, expected 24`);
+    },
+  },
+
+  // ── documents ─────────────────────────────────────────────────────────────
+  {
+    name: 'documents: kind, doctype, lang, title and dialect set per page',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const index = ir.doc('index.html');
+      expectEq(fail, 'index kind', index['documentKind'], 'DOCUMENT');
+      expectEq(fail, 'index lang', index['lang'], 'en');
+      expectEq(fail, 'index title', index['title'], 'Torture: the main page');
+      for (const d of ['ALPINE', 'ANGULAR', 'HANDLEBARS', 'MUSTACHE', 'VUE', 'HTMX', 'ERB', 'DOLLAR_BRACE']) {
+        if (!index['templateDialects']!.split(',').includes(d)) fail(`index dialects lack ${d}: ${index['templateDialects']}`);
+      }
+      expectEq(fail, 'jinja kind', ir.doc('templates/jinja.html')['documentKind'], 'FRAGMENT');
+      expectEq(fail, 'jinja dialects', ir.doc('templates/jinja.html')['templateDialects'], 'JINJA,MUSTACHE');
+      expectEq(fail, 'tailwind kind', ir.doc('templates/tailwind.html')['documentKind'], 'FRAGMENT');
+      expectEq(fail, 'mixed kind (has <html>)', ir.doc('templates/mixed.html')['documentKind'], 'DOCUMENT');
+      for (const d of ['THYMELEAF', 'RAZOR', 'PHP', 'ANGULAR', 'VUE', 'ALPINE', 'HTMX', 'ERB']) {
+        if (!ir.doc('templates/mixed.html')['templateDialects']!.split(',').includes(d)) fail(`mixed dialects lack ${d}`);
+      }
+      const xhtml = ir.doc('xhtml/page.xhtml');
+      if (!xhtml['doctype']!.startsWith('html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"')) fail(`xhtml doctype ${xhtml['doctype']}`);
+      expectEq(fail, 'xhtml lang', xhtml['lang'], 'en');
+      expectEq(fail, 'svg page title is the HTML <title>, not the SVG one', ir.doc('svg.html')['title'], 'Torture: foreign content');
+      expectEq(fail, 'quirks (BOM, CRLF) title', ir.doc('quirks.html')['title'], 'Quirks');
+      expectEq(fail, 'index inline style count (text/less skipped, empty kept)', ir.doc('index.html')['inlineStyleCount'], '5');
+      expectEq(fail, 'index stylesheet link count', ir.doc('index.html')['stylesheetReferenceCount'], '9');
+    },
+  },
+  {
+    name: 'documents: a Razor URL helper in an attribute marks the page RAZOR',
+    verdict: 'GAP',
+    note: 'The RAZOR marker needs whitespace or > before @; `href="@Url.Action(...)"` has a quote. Widen the marker to attribute-value starts.',
+    run: (ir, fail) => {
+      if (!ir.doc('index.html')['templateDialects']!.split(',').includes('RAZOR')) fail('index.html has @Url.Action("Index") and no RAZOR dialect');
+      expectEq(fail, '@Url.Action url kind', ir.ref('index.html', '@Url.Action("Index")')?.['urlKind'], 'TEMPLATE_EXPRESSION');
+    },
+  },
+
+  // ── page → stylesheet ─────────────────────────────────────────────────────
+  {
+    name: 'page→sheet: a resolved <link rel=stylesheet> carries the css_stylesheet.filePath join key',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const r = ir.ref('forms.html', 'css/app.css');
+      if (!expectRow(fail, 'forms.html link', r)) return;
+      expectEq(fail, 'kind', r['referenceKind'], 'STYLESHEET');
+      expectEq(fail, 'resolved', r['isResolved'], 'true');
+      expectEq(fail, 'resolvedFilePath = css_stylesheet.filePath', r['resolvedFilePath'], ir.sheet('css/app.css')['filePath']);
+      const other = ir.ref('shadow/shadow.html', '../css/app.css');
+      expectEq(fail, 'shadow/../css/app.css resolved', other?.['resolvedFilePath'], ir.sheet('css/app.css')['filePath']);
+      expectEq(fail, 'xhtml link resolved', ir.ref('xhtml/page.xhtml', '../css/app.css')?.['isResolved'], 'true');
+      expectEq(fail, 'quirks (CRLF+BOM) link resolved', ir.ref('quirks.html', 'css/app.css')?.['isResolved'], 'true');
+    },
+  },
+  {
+    name: 'page→sheet: <base href="/static/"> re-roots every relative URL on the page (href, src, srcset, @import, url())',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'base recorded', ir.ref('index.html', '/static/')?.['referenceKind'], 'BASE');
+      expectEq(fail, 'css/app.css under base does NOT resolve (static/css/app.css is absent)', ir.ref('index.html', 'css/app.css')?.['isResolved'], 'false');
+      expectEq(fail, '../css/app.css under base resolves to /css/app.css', ir.ref('index.html', '../css/app.css')?.['resolvedFilePath'], ir.sheet('css/app.css')['filePath']);
+      expectEq(fail, 'js/vendor.js under base unresolved', ir.ref('index.html', 'js/vendor.js')?.['isResolved'], 'false');
+      expectEq(fail, 'img/logo.png under base unresolved', ir.ref('index.html', 'img/logo.png', 'src')?.['isResolved'], 'false');
+    },
+  },
+  {
+    name: 'page→sheet: <base href> applies to the CSS written in the page too (a <style> @import and a style="url()" resolve against the base, as in a browser)',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const imp = ir.valueRefsOfSheet('index.html#style4', 'IMPORT')[0];
+      expectEq(fail, '<style> @import "css/imported-by-style.css" under base', imp?.['isResolved'], 'false');
+      const bg = ir.styleAttrDeclsAtLine('index.html', 100)[0];
+      const url = bg === undefined ? undefined : ir.refsOfDecl(bg)[0];
+      expectEq(fail, 'style="background: url(img/bg.png)" under base (href on the same page is unresolved, this is resolved)', url?.['isResolved'], 'false');
+    },
+  },
+  {
+    name: 'page→sheet: link variants — query/fragment stripped, alternate/print/disabled still STYLESHEET, no-rel and preload are LINK_RESOURCE, REL is case-insensitive',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const q = ir.ref('index.html', 'css/base.css?v=abc123#frag');
+      if (expectRow(fail, 'query link', q)) {
+        expectEq(fail, 'path', q['path'], 'css/base.css');
+        expectEq(fail, 'query', q['query'], 'v=abc123');
+        expectEq(fail, 'fragment', q['fragment'], 'frag');
+        expectEq(fail, 'kind', q['referenceKind'], 'STYLESHEET');
+      }
+      expectEq(fail, 'alternate', ir.ref('index.html', 'css/alt.css')?.['referenceKind'], 'STYLESHEET');
+      const altLink = ir.element('index.html', '/head[1]/link[2]');
+      expectEq(fail, 'alternate rel attribute kept for the engine to exclude', altLink && ir.attr(altLink, 'rel')?.['value'], 'alternate stylesheet');
+      expectEq(fail, 'print media link', ir.ref('index.html', 'css/print.css')?.['referenceKind'], 'STYLESHEET');
+      const printLink = ir.element('index.html', '/head[1]/link[3]');
+      expectEq(fail, 'media attribute kept', printLink && ir.attr(printLink, 'media')?.['value'], 'print');
+      expectEq(fail, 'disabled link', ir.ref('index.html', 'css/disabled.css')?.['referenceKind'], 'STYLESHEET');
+      expectEq(fail, 'preload as=style', ir.ref('index.html', 'css/base.css', 'href')?.['referenceKind'], 'LINK_RESOURCE');
+      expectEq(fail, 'no rel', ir.ref('index.html', 'css/norel.css')?.['referenceKind'], 'LINK_RESOURCE');
+      expectEq(fail, 'REL="StyleSheet"', ir.ref('index.html', 'css/upper.css')?.['referenceKind'], 'STYLESHEET');
+      expectEq(fail, 'icon', ir.ref('index.html', 'img/favicon.ico')?.['referenceKind'], 'LINK_RESOURCE');
+      expectEq(fail, 'modulepreload', ir.ref('index.html', 'js/module.js', 'href')?.['referenceKind'], 'LINK_RESOURCE');
+      expectEq(fail, '<link> inside <noscript> is read', ir.ref('index.html', 'css/noscript.css')?.['referenceKind'], 'STYLESHEET');
+      if (ir.ref('index.html', 'css/ie.css') !== undefined) fail('a <link> inside a conditional comment produced a reference');
+    },
+  },
+  {
+    name: 'page→sheet: an ambiguous root-relative URL (two candidate web roots) is left unresolved',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const r = ir.ref('index.html', '/css/dup.css');
+      expectEq(fail, 'kind', r?.['urlKind'], 'ROOT_RELATIVE');
+      expectEq(fail, 'unresolved', r?.['isResolved'], 'false');
+      if (ir.stylesheets.filter((s) => s['fileName'] === 'dup.css').length !== 2) fail('both dup.css files should be stylesheet rows');
+    },
+  },
+  {
+    name: 'page→sheet: @import closure — every import of app.css is a value reference whose resolvedFilePath is a css_stylesheet.filePath',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const imports = ir.valueRefsOfSheet('css/app.css', 'IMPORT');
+      expectList(fail, 'import targets in order', names(imports),
+        ['tokens.css', 'layers.css', 'nested.css', 'missing.css', 'https://fonts.example.com/inter.css', 'strings.css', 'fonts.css', 'selectors.css', 'gaps.css', 'app.css']);
+      for (const v of imports) {
+        const expectResolved = v['name'] !== 'missing.css' && v['urlKind'] === 'RELATIVE';
+        expectEq(fail, `${v['name']} resolved`, v['isResolved'], expectResolved ? 'true' : 'false');
+        if (expectResolved) expectEq(fail, `${v['name']} joins a sheet`, v['resolvedFilePath'], ir.sheet(`css/${v['name']}`)['filePath']);
+        if (v['ownerRuleLinkHash'] === '' || ir.row(v['ownerRuleLinkHash'])?.['atRuleName'] !== 'import') fail(`${v['name']} is not owned by an @import rule`);
+      }
+      expectEq(fail, 'absolute import kind', imports.find((v) => v['name']!.startsWith('https'))?.['urlKind'], 'ABSOLUTE');
+      // The layer of an import is a LAYER reference on the same rule, after the target.
+      const first = ir.row(imports[0]!['ownerRuleLinkHash']!)!;
+      expectList(fail, '@import url("tokens.css") layer(tokens) references', ir.refsOfRule(first).map((v) => `${v['referenceKind']}:${v['name']}`), ['IMPORT:tokens.css', 'LAYER:tokens']);
+      expectEq(fail, 'tokens → theme', ir.valueRefsOfSheet('css/tokens.css', 'IMPORT')[0]?.['resolvedFilePath'], ir.sheet('css/theme.css')['filePath']);
+      expectEq(fail, 'theme → tokens (cycle, still a fact)', ir.valueRefsOfSheet('css/theme.css', 'IMPORT')[0]?.['resolvedFilePath'], ir.sheet('css/tokens.css')['filePath']);
+      expectEq(fail, '@import after rules (gaps.css "late.css") still recorded', ir.valueRefsOfSheet('css/gaps.css', 'IMPORT')[0]?.['name'], 'late.css');
+      const layered = ir.valueRefsOfSheet('css/layers.css').filter((v) => v['referenceKind'] === 'IMPORT' || (v['referenceKind'] === 'LAYER' && v['name'] === 'print-layer'));
+      expectList(fail, 'layers.css imports with layer()', layered.map((v) => `${v['referenceKind']}:${v['name']}`), ['IMPORT:print.css', 'LAYER:print-layer', 'IMPORT:alt.css']);
+    },
+  },
+  {
+    name: 'page→sheet: inline <style> elements — one sheet per element, owner link, host-file positions, type/media attributes',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const s1 = ir.sheet('index.html#style1');
+      expectEq(fail, 'style1 start line', s1['startLine'], '36');
+      expectEq(fail, 'style1 start column (after <style>)', s1['startColumn'], '10');
+      expectEq(fail, 'style1 owner is the <style> element', ir.row(s1['ownerHtmlElementLinkHash'])?.['path'], '/html[1]/head[1]/style[1]');
+      expectEq(fail, 'style1 document link', s1['htmlDocumentLinkHash'], ir.doc('index.html')['htmlDocumentUniqueHash']);
+      expectEq(fail, 'first declaration cited on the host line', ir.declAtLine('index.html#style1', 37, 'color')?.['valueText'], 'red');
+      expectEq(fail, 'print <style media>', ir.row(ir.sheet('index.html#style2')['ownerHtmlElementLinkHash']) && ir.attr(ir.row(ir.sheet('index.html#style2')['ownerHtmlElementLinkHash'])!, 'media')?.['value'], 'print');
+      expectEq(fail, 'empty <style> is a sheet with 0 rules', ir.sheet('index.html#style3')['ruleCount'], '0');
+      if (ir.stylesheets.some((s) => s['sourceKind'] === 'HTML_STYLE_ELEMENT' && ir.row(s['ownerHtmlElementLinkHash'])?.['startLine'] === '46')) fail('<style type="text/less"> became a sheet');
+      expectEq(fail, '<style> inside <template> is a sheet (owner path says it is inert)', ir.row(ir.sheet('index.html#style5')['ownerHtmlElementLinkHash'])?.['path'], '/html[1]/body[1]/div[10]/template[1]/div[1]/style[1]');
+      // shadow roots: seven inline sheets, each owned by a style whose ancestry an engine can read
+      expectEq(fail, 'shadow.html inline sheets', ir.doc('shadow/shadow.html')['inlineStyleCount'], '7');
+      expectEq(fail, 'shadow style owner inside the declarative template', ir.row(ir.sheet('shadow/shadow.html#style2')['ownerHtmlElementLinkHash'])?.['path'], '/html[1]/body[1]/my-card[1]/template[1]/style[1]');
+      const shadowTemplates = ir.ofDoc(ir.attributes, 'shadow/shadow.html').filter((a) => a['name'] === 'shadowrootmode');
+      expectList(fail, 'shadowrootmode attributes (the scope key)', shadowTemplates.map((a) => `${a['value']}@${ir.row(a['ownerElementLinkHash'])?.['path']}`),
+        ['open@/html[1]/body[1]/my-card[1]/template[1]', 'closed@/html[1]/body[1]/my-card[2]/template[1]', 'open@/html[1]/body[1]/outer-el[1]/template[1]', 'open@/html[1]/body[1]/outer-el[1]/template[1]/inner-el[1]/template[1]']);
+    },
+  },
+  {
+    name: 'page→sheet: <style> and <script> inside inline <svg> produce sheet and script rows (browsers apply and run them)',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const svgStyle = ir.element('svg.html', '/svg[1]/style[1]');
+      if (!ir.stylesheets.some((s) => s['ownerHtmlElementLinkHash'] === svgStyle?.['htmlElementUniqueHash'])) fail('svg.html <svg><style> has no css_stylesheet row');
+      if (!ir.ofDoc(ir.scripts, 'svg.html').some((s) => s['scriptKind'] === 'INLINE')) fail('svg.html <svg><script> has no html_script row');
+    },
+  },
+  {
+    name: 'page→sheet: a <style> wrapped in <![CDATA[ ]]> (XHTML) still yields its rule',
+    verdict: 'GAP',
+    note: 'Strip CDATA markers from <style> and <script> bodies of .xhtml files before handing them on.',
+    run: (ir, fail) => {
+      expectEq(fail, 'page.xhtml#style1 rules', ir.sheet('xhtml/page.xhtml#style1')['ruleCount'], '1');
+    },
+  },
+  {
+    name: 'page→sheet: provenance and bulk — 93KB sheet read in full, one-line sheet MINIFIED, BOM stripped, gap caps reached',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'big.css rules', ir.sheet('css/big.css')['ruleCount'], '1500');
+      expectEq(fail, 'big.css declarations', ir.sheet('css/big.css')['declarationCount'], '3000');
+      expectEq(fail, 'long-line.css provenance', ir.sheet('css/long-line.css')['sourceProvenance'], 'MINIFIED');
+      expectEq(fail, 'vendor.min.css provenance', ir.sheet('css/vendor.min.css')['sourceProvenance'], 'MINIFIED');
+      expectEq(fail, 'bom.css rule read (BOM stripped)', ir.sheet('css/bom.css')['ruleCount'], '1');
+      expectEq(fail, 'bom.css first selector column', ir.selector('css/bom.css', '.bom-class')?.['startColumn'], '1');
+      const capped = ir.cssGapsOf('css/gaps-many.css');
+      expectEq(fail, 'gaps-many.css gap rows (200 + 1 summary)', capped.length, 201);
+      expectEq(fail, 'gaps-many.css summary row', capped.filter((g) => g['gapKind'] === 'GAP_LIMIT_REACHED').length, 1);
+      const quirks = ir.ofDoc(ir.htmlGaps, 'quirks.html');
+      expectEq(fail, 'quirks.html gap rows', quirks.length, 201);
+      expectEq(fail, 'quirks.html summary row', quirks.filter((g) => g['gapKind'] === 'GAP_LIMIT_REACHED').length, 1);
+      expectEq(fail, 'quirks.html CRLF line numbers (first div)', ir.element('quirks.html', '/body[1]/div[1]')?.['startLine'], '7');
+      expectEq(fail, 'quirks.html element after 250 stray tags', ir.element('quirks.html', '/body[1]/p[1]')?.['startLine'], '260');
+      expectEq(fail, 'sassy.css flagged PREPROCESSOR_SYNTAX', ir.cssGapsOf('css/sassy.css').some((g) => g['gapKind'] === 'PREPROCESSOR_SYNTAX'), true);
+    },
+  },
+
+  // ── class / id / tag join keys ────────────────────────────────────────────
+  {
+    name: 'class keys: class attribute tokenised on ASCII whitespace, entities decoded, case kept, duplicates kept, valueless and empty yield none',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectList(fail, 'line 52 (spaces, tab entity, newline, dup)', ir.classesAtLine('index.html', 52), ['spaced', 'tabbed', 'multi-line', 'dup', 'dup']);
+      expectList(fail, 'line 54 valueless', ir.classesAtLine('index.html', 54), []);
+      expectList(fail, 'line 55 empty', ir.classesAtLine('index.html', 55), []);
+      expectList(fail, 'line 56 entities', ir.classesAtLine('index.html', 56), ['a&b', '<c>', '"q"']);
+      expectList(fail, 'line 57 case', ir.classesAtLine('index.html', 57), ['Upper', 'lower', 'MIXED']);
+      expectList(fail, 'line 58 CLASS= on <DIV>', ir.classesAtLine('index.html', 58), ['SHOUT']);
+      expectList(fail, 'line 59 duplicate class attribute: first wins', ir.classesAtLine('index.html', 59), ['first']);
+      if (!ir.ofDoc(ir.htmlGaps, 'index.html').some((g) => g['startLine'] === '59' && g['detail'] === 'duplicate-attribute')) fail('no duplicate-attribute gap on line 59');
+      const el = ir.elementsAtLine('index.html', 58)[0];
+      expectEq(fail, '<DIV> tag lowercased', el?.['tagName'], 'div');
+      expectEq(fail, 'ID="LOUD" kept', el?.['id'], 'LOUD');
+      expectEq(fail, 'id="  padded-id  " trimmed on the element', ir.elementsAtLine('index.html', 52)[0]?.['id'], 'padded-id');
+      expectEq(fail, 'id attribute value raw', ir.attr(ir.elementsAtLine('index.html', 52)[0]!, 'id')?.['value'], '  padded-id  ');
+      expectEq(fail, 'classNames column agrees with the tokens', ir.elementsAtLine('index.html', 52)[0]?.['classNames'], 'spaced,tabbed,multi-line,dup,dup');
+    },
+  },
+  {
+    name: 'class keys: template-bearing class attributes keep the static tokens and drop the template parts',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectList(fail, 'jinja line 8', ir.classesAtLine('templates/jinja.html', 8), ['card', 'is-active']);
+      expectList(fail, 'jinja line 12 ({{ … }} only)', ir.classesAtLine('templates/jinja.html', 12), []);
+      expectList(fail, 'index line 86 ({{ cls }} static-class)', ir.classesAtLine('index.html', 86), ['static-class']);
+      expectList(fail, 'mixed line 14 (<%= cls %>)', ir.classesAtLine('templates/mixed.html', 14), []);
+      expectList(fail, 'mixed line 15 (<?= $cls ?>)', ir.classesAtLine('templates/mixed.html', 15), []);
+    },
+  },
+  {
+    name: 'class keys: CSS escapes are decoded so .md\\:flex joins class="md:flex" — every Tailwind token has a CLASS part',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const tokens = ir.ofDoc(ir.classRefs, 'templates/tailwind.html').map((c) => c['className']!);
+      const parts = new Set([...ir.partsOfSheet('templates/tailwind.html#style1'), ...ir.partsOfSheet('index.html#style1'), ...ir.partsOfSheet('css/selectors.css')]
+        .filter((p) => p['partKind'] === 'CLASS').map((p) => p['name']!));
+      for (const t of tokens) if (!parts.has(t)) fail(`class token ${JSON.stringify(t)} has no CLASS selector part`);
+      const sel = names(ir.partsOfSheet('css/selectors.css').filter((p) => p['partKind'] === 'CLASS'));
+      for (const want of ['md:flex', 'w-1/2', '123', '10', '-mt-2', 'a b', '@media', '#hash', '.dot', '\\backslash', 'café', 'a,b', 'a>b', 'a&b', '!font-bold', '2xl:grid-cols-[repeat(auto-fill,minmax(200px,1fr))]']) {
+        if (!sel.includes(want)) fail(`selectors.css lacks decoded CLASS ${JSON.stringify(want)}`);
+      }
+      expectEq(fail, '\\3A and \\00003A both decode to md:flex', sel.filter((n) => n === 'md:flex').length, 3);
+      expectEq(fail, '#\\31 23 decodes', ir.partsOfSheet('css/selectors.css').find((p) => p['partKind'] === 'ID' && p['name'] === '123') !== undefined, true);
+      expectEq(fail, '[data-x\\:y] decodes', ir.partsOfSheet('css/selectors.css').find((p) => p['partKind'] === 'ATTRIBUTE' && p['name'] === 'data-x:y') !== undefined, true);
+    },
+  },
+  {
+    name: 'class keys: non-ASCII identifiers (.日本語, .🚀, .emoji-🚀) are read as class selectors, not as parse errors that leak the next property name as a CLASS part',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const idx = names(ir.partsOfSheet('index.html#style1').filter((p) => p['partKind'] === 'CLASS'));
+      if (!idx.includes('日本語')) fail(`index#style1 has no CLASS 日本語: ${idx.join(', ')}`);
+      if (!idx.includes('emoji-🚀')) fail(`index#style1 has no CLASS emoji-🚀: ${idx.join(', ')}`);
+      if (idx.includes('font-weight')) fail('index#style1 has a false CLASS part "font-weight" (the property after the unreadable selector)');
+      const sel = names(ir.partsOfSheet('css/selectors.css').filter((p) => p['partKind'] === 'CLASS'));
+      if (sel.includes('color')) fail('selectors.css has a false CLASS part "color" after .🚀');
+      if (!sel.includes('🚀')) fail('selectors.css lacks CLASS 🚀 written literally');
+    },
+  },
+  {
+    name: 'id/tag keys: ids and tags of foreign content — SVG tag names keep their case, classes on SVG elements are class references, MathML is its own namespace',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'foreignObject tag case kept', ir.element('svg.html', '/svg[1]/foreignObject[1]')?.['namespace'], 'SVG');
+      expectEq(fail, 'div inside foreignObject is HTML again', ir.element('svg.html', '/foreignObject[1]/div[1]')?.['namespace'], 'HTML');
+      expectEq(fail, 'svg inside foreignObject is SVG again', ir.element('svg.html', '/foreignObject[1]/svg[1]')?.['namespace'], 'SVG');
+      // The HTML tokenizer lowercases attribute names in foreign content too (only an .xhtml
+      // document is case-sensitive), so `CLASS=` and `ID=` on an SVG <rect> are its class and id.
+      expectEq(fail, 'ID="…" on an SVG element in an HTML document is the id', ir.element('svg.html', '/svg[1]/rect[1]')?.['id'], 'Case-Kept-Id');
+      expectEq(fail, 'math namespace', ir.element('svg.html', '/math[1]')?.['namespace'], 'MATHML');
+      expectEq(fail, 'annotation-xml child is HTML', ir.element('svg.html', '/annotation-xml[1]/div[1]')?.['namespace'], 'HTML');
+      expectList(fail, 'svg.html class tokens', ir.ofDoc(ir.classRefs, 'svg.html').map((c) => c['className']!),
+        ['icon', 'symbol-class', 'svg-rect', 'use-class', 'Case-Kept', 'in-foreign', 'nested-svg', 'nested-rect', 'uses-gradient', 'math-class', 'in-annotation', 'icon']);
+      expectEq(fail, 'xlink:href prefix split in SVG', ir.ofDoc(ir.attributes, 'svg.html').find((a) => a['prefix'] === 'xlink' && a['name'] === 'href')?.['attributeKind'], 'URL');
+      expectEq(fail, 'xmlns:xlink is NAMESPACE', ir.ofDoc(ir.attributes, 'svg.html').find((a) => a['prefix'] === 'xmlns')?.['attributeKind'], 'NAMESPACE');
+    },
+  },
+  {
+    name: 'id/tag keys: a namespaced or camelCase type selector carries a join key an element row can match',
+    verdict: 'GAP',
+    note: 'TYPE parts are lowercased (`foreignobject`) while element rows keep foreign case (`foreignObject`), and a browser matches type selectors against foreign elements case-sensitively. Keep a lowercase join form on the element, or compare case-insensitively for foreign elements.',
+    run: (ir, fail) => {
+      const parts = ir.partsOfSheet('svg.html#style1');
+      const ns = parts.find((p) => p['partKind'] === 'TYPE' && p['name']!.includes('|'));
+      if (ns !== undefined) fail(`TYPE part name ${JSON.stringify(ns['name'])} is not an html_element.tagName`);
+      const fo = parts.find((p) => p['partKind'] === 'TYPE' && p['name'] === 'foreignobject');
+      if (fo !== undefined && !ir.elements.some((e) => e['tagName'] === 'foreignobject')) fail('TYPE part "foreignobject" matches no element row (elements keep "foreignObject")');
+    },
+  },
+  {
+    name: 'selector keys: a class after a namespaced type (svg|rect.svg-rect) is its own CLASS part, and the prefix is the type part\'s value',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const sel = ir.selector('css/app.css', 'svg|rect.svg-rect');
+      if (!expectRow(fail, 'selector', sel)) return;
+      expectList(fail, 'parts', ir.partsOf(sel).map((p) => `${p['partKind']}:${p['name']}`), ['TYPE:rect', 'CLASS:svg-rect']);
+      expectEq(fail, 'namespace prefix as the type part\'s value', ir.partsOf(sel)[0]?.['value'], 'svg|');
+    },
+  },
+
+  // ── selectors ─────────────────────────────────────────────────────────────
+  {
+    name: 'selectors: combinators land on the first part of the compound they precede, for every combinator and across whitespace shapes',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const combs = (text: string): string[] => {
+        const s = ir.selector('css/app.css', text);
+        return s === undefined ? ['<no selector>'] : ir.partsOf(s).map((p) => `${p['combinatorBefore']}@${p['compoundIndex']}:${p['name']}`);
+      };
+      expectList(fail, '.a>.b+.c~.d', combs('.a>.b+.c~.d'), ['NONE@0:a', 'CHILD@1:b', 'NEXT_SIBLING@2:c', 'SUBSEQUENT_SIBLING@3:d']);
+      expectList(fail, 'h2 + p ~ em > b', combs('h2 + p ~ em > b'), ['NONE@0:h2', 'NEXT_SIBLING@1:p', 'SUBSEQUENT_SIBLING@2:em', 'CHILD@3:b']);
+      expectList(fail, '.a .b .c .d (spaces, tab, newline)', combs('.a .b .c .d'), ['NONE@0:a', 'DESCENDANT@1:b', 'DESCENDANT@2:c', 'DESCENDANT@3:d']);
+      expectList(fail, 'comment inside a compound', combs('.card/* comment in a selector */.is-active'), ['NONE@0:card', 'NONE@0:is-active']);
+      expectEq(fail, 'a a', ir.selector('css/app.css', 'a a')?.['compoundCount'], '2');
+    },
+  },
+  {
+    name: 'selectors: functional pseudo-classes nest their argument selectors as child parts with depth and parent link',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const tree = (sheet: string, text: string): string[] => {
+        const s = ir.selector(sheet, text);
+        return s === undefined ? ['<no selector>'] : ir.partsOf(s).map((p) => `${'  '.repeat(Number(p['depth']))}${p['partKind']}:${p['name']}@${p['compoundIndex']}${p['parentPartLinkHash'] === '' ? '' : '^' + ir.row(p['parentPartLinkHash'])?.['name']}`);
+      };
+      expectList(fail, ':is(.card, .nav) .item', tree('css/app.css', ':is(.card, .nav) .item'), ['PSEUDO_CLASS:is@0', '  CLASS:card@0^is', '  CLASS:nav@0^is', 'CLASS:item@1']);
+      expectList(fail, '.card:not(.is-active, #section-one)', tree('css/app.css', '.card:not(.is-active, #section-one)'), ['CLASS:card@0', 'PSEUDO_CLASS:not@0', '  CLASS:is-active@0^not', '  ID:section-one@0^not']);
+      expectList(fail, ':not(:is(.a, .b))', tree('css/app.css', ':not(:is(.a, .b))'), ['PSEUDO_CLASS:not@0', '  PSEUDO_CLASS:is@0^not', '    CLASS:a@0^is', '    CLASS:b@0^is']);
+      expectList(fail, '::slotted(.slotted-item)', tree('css/app.css', '::slotted(.slotted-item)'), ['PSEUDO_ELEMENT:slotted@0', '  CLASS:slotted-item@0^slotted']);
+      expectList(fail, ':host(.featured)', tree('css/app.css', ':host(.featured)'), ['PSEUDO_CLASS:host@0', '  CLASS:featured@0^host']);
+      expectList(fail, 'my-card::part(title)', tree('css/app.css', 'my-card::part(title)'), ['TYPE:my-card@0', 'PSEUDO_ELEMENT:part@0']);
+      expectEq(fail, '::part(title) value', ir.partsOf(ir.selector('css/app.css', 'my-card::part(title)')!)[1]?.['value'], 'title');
+      expectList(fail, ':lang(en) takes a keyword, not a selector', tree('css/app.css', ':lang(en)'), ['PSEUDO_CLASS:lang@0']);
+      expectList(fail, '.card:has(> .item:hover, + .nav)', tree('css/app.css', '.card:has(> .item:hover, + .nav)'), ['CLASS:card@0', 'PSEUDO_CLASS:has@0', '  CLASS:item@0^has', '  PSEUDO_CLASS:hover@0^has', '  CLASS:nav@1^has']);
+    },
+  },
+  {
+    name: 'selectors: the selector after `of` in :nth-child(An+B of S) is read with its own names and positions',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const s = ir.selector('css/app.css', 'li:nth-child(2n + 1 of .li-one, .li-two)');
+      if (!expectRow(fail, 'selector', s)) return;
+      const args = ir.partsOf(s).filter((p) => Number(p['depth']) === 1);
+      expectList(fail, 'argument parts', args.map((p) => `${p['partKind']}:${p['name']}`), ['CLASS:li-one', 'CLASS:li-two']);
+      for (const p of args) if (p['startLine'] !== '57') fail(`argument part ${p['name']} cited at line ${p['startLine']}, the selector is on 57`);
+    },
+  },
+  {
+    name: 'selectors: attribute parts carry name, matcher, unquoted value and flag; namespaced attribute names keep the prefix',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const attr = (text: string): string => {
+        const p = ir.partsOf(ir.selector('css/app.css', text)!).find((x) => x['partKind'] === 'ATTRIBUTE');
+        return p === undefined ? '<none>' : `${p['name']}|${p['attributeMatcher']}|${p['value']}|${p['attributeFlags']}`;
+      };
+      expectEq(fail, '[data-page]', attr('[data-page]'), 'data-page|||');
+      expectEq(fail, '[data-page="index"]', attr('[data-page="index"]'), 'data-page|=|index|');
+      expectEq(fail, '[data-page=index]', attr('[data-page=index]'), 'data-page|=|index|');
+      expectEq(fail, '[class~="card"]', attr('[class~="card"]'), 'class|~=|card|');
+      expectEq(fail, '[class$="wide" i]', attr('[class$="wide" i]'), 'class|$=|wide|i');
+      expectEq(fail, '[class$="wide" s]', attr('[class$="wide" s]'), 'class|$=|wide|s');
+      expectEq(fail, '[id|="section"]', attr('[id|="section"]'), 'id||=|section|');
+      expectEq(fail, '[xlink|href]', attr('[xlink|href]'), 'xlink|href|||');
+      expectEq(fail, 'input[type="IMAGE" i]', attr('input[type="IMAGE" i]'), 'type|=|IMAGE|i');
+      expectEq(fail, '[style*="var("]', attr('[style*="var("]'), 'style|*=|var(|');
+      expectEq(fail, '[data-x="a\\"b"] (selectors.css)', ir.partsOfSheet('css/selectors.css').find((p) => p['partKind'] === 'ATTRIBUTE' && p['name'] === 'data-x')?.['value'], 'a"b');
+    },
+  },
+  {
+    name: 'selectors: specificity per Selectors 4 (:where 0, :is/:not by argument, nth-child(of) counts itself, pseudo-elements, legacy single colon)',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const spec = (text: string): string => {
+        const s = ir.selector('css/app.css', text);
+        return s === undefined ? '<none>' : `${s['specificityA']},${s['specificityB']},${s['specificityC']}`;
+      };
+      expectEq(fail, '#section-one', spec('#section-one'), '1,0,0');
+      expectEq(fail, '.card.card--wide.is-active', spec('.card.card--wide.is-active'), '0,3,0');
+      expectEq(fail, ':where(…)', spec(':where(.card.card--wide.is-active#section-one)'), '0,0,0');
+      expectEq(fail, ':is(#section-one, .card)', spec(':is(#section-one, .card)'), '1,0,0');
+      expectEq(fail, '.card:not(#nope)', spec('.card:not(#nope)'), '1,1,0');
+      expectEq(fail, 'li:nth-child(2n + 1 of .li-one, .li-two)', spec('li:nth-child(2n + 1 of .li-one, .li-two)'), '0,2,1');
+      expectEq(fail, ':host(.featured)', spec(':host(.featured)'), '0,2,0');
+      expectEq(fail, 'div#b.c[x]:hover::before', spec('div#b.c[x]:hover::before'), '1,3,2');
+      expectEq(fail, 'DIV.Card:HOVER::BEFORE', spec('DIV.Card:HOVER::BEFORE'), '0,2,2');
+      expectEq(fail, ':after (legacy) is a pseudo-element', spec(':after'), '0,0,1');
+      expectEq(fail, ':first-letter (legacy)', spec(':first-letter'), '0,0,1');
+      expectEq(fail, 'a a', spec('a a'), '0,0,2');
+      expectEq(fail, '.a.b.c.d.e.f.g.h.i.j.k', spec('.a.b.c.d.e.f.g.h.i.j.k'), '0,11,0');
+      expectEq(fail, 'hasPseudoElement on ::before', ir.selector('css/app.css', 'div#b.c[x]:hover::before')?.['hasPseudoElement'], 'true');
+      expectEq(fail, 'DIV lowercased in the TYPE part', ir.partsOf(ir.selector('css/app.css', 'DIV.Card:HOVER::BEFORE')!)[0]?.['name'], 'div');
+      expectEq(fail, '.Card keeps its case', ir.partsOf(ir.selector('css/app.css', 'DIV.Card:HOVER::BEFORE')!)[1]?.['name'], 'Card');
+    },
+  },
+  {
+    name: 'selectors: a selector list keeps one row per selector, without the comma, even beside a stray comma or an inline comment',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const r100 = ir.ruleAtLine('css/app.css', 100);
+      if (expectRow(fail, 'rule on line 100', r100)) expectList(fail, 'line 100 (.card, /* c */ .nav, {)', names(ir.selectorsOf(r100), 'selectorText'), ['.card', '.nav']);
+      const r101 = ir.ruleAtLine('css/app.css', 101);
+      if (expectRow(fail, 'rule on line 101', r101)) expectList(fail, 'line 101 (.card,, .nav)', names(ir.selectorsOf(r101), 'selectorText'), ['.card', '.nav']);
+    },
+  },
+  {
+    name: 'selectors: an invalid selector (.123, #1digit, .card . broken) does not leak the next token as a CLASS/ID join key',
+    verdict: 'GAP',
+    note: 'tree-sitter-css reads `.123 { color: red }` as an error and `.-valid-dash` as the continuation; the recovered parts name `color` as a class and `digit` as an id. Both are gap-marked, but an engine joining on names sees false keys. Drop parts that come out of an ERROR region whose text does not start with the part\'s sigil.',
+    run: (ir, fail) => {
+      const parts = ir.partsOfSheet('css/app.css');
+      if (parts.some((p) => p['partKind'] === 'CLASS' && p['name'] === 'color')) fail('CLASS part "color" from `.123 { color: red }`');
+      if (parts.some((p) => p['partKind'] === 'ID' && p['name'] === 'digit')) fail('ID part "digit" from `#1digit`');
+      if (!parts.some((p) => p['partKind'] === 'CLASS' && p['name'] === '-valid-dash' && p['combinatorBefore'] === 'NONE')) fail('.-valid-dash should be a selector of its own, not a descendant of the broken one');
+    },
+  },
+  {
+    name: 'nesting: nested rules chain to their parent through at-rules, to any depth, and carry the written selector with its &',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const card = ir.ruleAtLine('css/nested.css', 2, '.card');
+      if (!expectRow(fail, '.card', card)) return;
+      const kids = ir.rules.filter((r) => r['parentRuleLinkHash'] === card['cssRuleUniqueHash']);
+      expectEq(fail, '.card child rules', kids.length, Number(card['childRuleCount']));
+      for (const [line, text] of [[4, '&:hover'], [5, '& .item'], [6, '.item &'], [7, '& + &'], [8, '&.is-active'], [9, '&#section-one'], [16, '.a &, .b &'], [20, '.parent & .child']] as const) {
+        const r = ir.ruleAtLine('css/nested.css', line);
+        expectEq(fail, `line ${line} prelude`, r?.['preludeText'], text);
+        if (r !== undefined && r['parentRuleLinkHash'] !== card['cssRuleUniqueHash']) fail(`line ${line} is not a child of .card`);
+        if (r !== undefined && !ir.selectorsOf(r).every((s) => s['hasNesting'] === 'true')) fail(`line ${line} selector lacks hasNesting`);
+      }
+      expectList(fail, '& + & parts', ir.partsOf(ir.selectorsOf(ir.ruleAtLine('css/nested.css', 7)!)[0]!).map((p) => `${p['partKind']}:${p['combinatorBefore']}`), ['NESTING:NONE', 'NESTING:NEXT_SIBLING']);
+      const deepest = ir.ruleAtLine('css/nested.css', 30, '.deepest');
+      if (expectRow(fail, '.deepest', deepest)) {
+        expectEq(fail, '.deepest depth', deepest['nestingDepth'], '3');
+        const chain: string[] = [];
+        for (let r: Row | undefined = deepest; r !== undefined; r = ir.row(r['parentRuleLinkHash'])) chain.push(r['preludeText']!);
+        expectList(fail, '.deepest ancestry', chain, ['.deepest', '.deeper', '.deep', '.card']);
+      }
+      const inMedia = ir.ruleAtLine('css/nested.css', 23, '& .item');
+      if (expectRow(fail, '& .item in @media', inMedia)) {
+        const media = ir.row(inMedia['parentRuleLinkHash']);
+        expectEq(fail, 'parent is the nested @media', media?.['atRuleName'], 'media');
+        expectEq(fail, '@media parent is .card', media && ir.row(media['parentRuleLinkHash'])?.['preludeText'], '.card');
+        expectEq(fail, 'bare declaration inside the nested @media is owned by it', media?.['declarationCount'], '1');
+      }
+      expectEq(fail, '.a, .b { & .c } fans out from a two-selector parent', ir.selectorsOf(ir.ruleAtLine('css/nested.css', 38, '.a, .b')!).length, 2);
+      expectEq(fail, '@nest .parent & is an at-rule with the declaration', ir.ruleAtLine('css/nested.css', 34)?.['declarationCount'], '1');
+      expectEq(fail, 'declaration after nested rules still belongs to .card', card['declarationCount'], '3');
+    },
+  },
+  {
+    name: 'nesting: a relative nested selector keeps its leading combinator (`> .direct`), and `& &` keeps both compounds',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      for (const [line, text, comb] of [[12, '> .direct', 'CHILD'], [13, '+ .sib', 'NEXT_SIBLING'], [14, '~ .gen', 'SUBSEQUENT_SIBLING']] as const) {
+        const r = ir.ruleAtLine('css/nested.css', line);
+        if (!expectRow(fail, `line ${line}`, r)) continue;
+        const sel = ir.selectorsOf(r)[0];
+        const first = sel === undefined ? undefined : ir.partsOf(sel)[0];
+        if (sel?.['selectorText'] !== text && first?.['combinatorBefore'] !== comb) {
+          fail(`line ${line}: selectorText=${JSON.stringify(sel?.['selectorText'])} first part combinator=${first?.['combinatorBefore']}; the leading ${comb} is lost, so an engine reads a descendant`);
+        }
+      }
+      const amp = ir.ruleAtLine('css/nested.css', 22);
+      if (amp !== undefined && ir.partsOf(ir.selectorsOf(amp)[0]!).length !== 2) fail(`line 22 "& &" has ${ir.partsOf(ir.selectorsOf(amp)[0]!).length} part(s), expected 2 (a descendant of itself)`);
+    },
+  },
+  {
+    name: 'layers: @layer statements, blocks, nesting, dotted names, anonymous blocks and import layer() are all facts an engine can compose',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const stmt = ir.ruleAtLine('css/layers.css', 2);
+      if (expectRow(fail, '@layer statement', stmt)) {
+        expectEq(fail, 'statement has no single name', stmt['name'], '');
+        expectList(fail, 'statement LAYER refs', names(ir.refsOfRule(stmt)), ['reset', 'base', 'components.buttons', 'components.cards', 'utilities']);
+      }
+      expectEq(fail, '@layer base {} name', ir.ruleAtLine('css/layers.css', 4, 'base')?.['name'], 'base');
+      const typography = ir.rulesOf('css/layers.css').find((r) => r['name'] === 'typography');
+      expectEq(fail, 'nested @layer typography parent is base', typography && ir.row(typography['parentRuleLinkHash'])?.['name'], 'base');
+      expectEq(fail, 'dotted block name', ir.ruleAtLine('css/layers.css', 6)?.['name'], 'components.cards');
+      expectEq(fail, 'anonymous block name empty', ir.ruleAtLine('css/layers.css', 8)?.['name'], '');
+      expectEq(fail, '@layer inside @media', ir.rulesOf('css/layers.css').find((r) => r['startLine'] === '9' && r['atRuleName'] === 'layer')?.['nestingDepth'], '1');
+      expectList(fail, '@layer a, b, a; keeps repetition and order', names(ir.refsOfRule(ir.ruleAtLine('css/layers.css', 14)!)), ['a', 'b', 'a']);
+      expectList(fail, '@layer    spaced   ,   names   ;', names(ir.refsOfRule(ir.ruleAtLine('css/layers.css', 16)!)), ['spaced', 'names']);
+      expectEq(fail, '`@import "alt.css" layer;` (anonymous) has no LAYER ref', ir.refsOfRule(ir.ruleAtLine('css/layers.css', 12)!).filter((v) => v['referenceKind'] === 'LAYER').length, 0);
+      const deep = ir.rulesOf('css/app.css').find((r) => r['startLine'] === '145' && r['atRuleName'] === 'layer');
+      expectEq(fail, '@media > @supports > @layer components depth', deep?.['nestingDepth'], '2');
+    },
+  },
+  {
+    name: 'at-rules: the declared name of every named at-rule (keyframes, vendor keyframes, container, property, counter-style, position-try, font-feature-values, font-face via font-family)',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const named = (sheet: string, at: string): string[] => ir.rulesOf(sheet).filter((r) => r['atRuleName'] === at).map((r) => r['name']!);
+      expectList(fail, 'theme.css @keyframes', named('css/theme.css', 'keyframes'), ['fade', 'spin', 'spin', 'ease', 'none', 'slide', 'var-inside']);
+      expectList(fail, 'theme.css @-webkit-keyframes', named('css/theme.css', '-webkit-keyframes'), ['spin']);
+      expectList(fail, 'app.css @-webkit-keyframes', named('css/app.css', '-webkit-keyframes'), ['vendor-spin']);
+      expectList(fail, '@container', named('css/app.css', 'container'), ['sidebar']);
+      expectList(fail, '@property', named('css/tokens.css', 'property'), ['--brand', '--registered-never-used']);
+      expectList(fail, '@counter-style', named('css/app.css', 'counter-style'), ['thumbs']);
+      expectList(fail, '@position-try', named('css/app.css', 'position-try'), ['--fallback']);
+      expectList(fail, '@font-feature-values', named('css/app.css', 'font-feature-values'), ['Inter']);
+      expectList(fail, '@font-face names (quoted, bare, nameless, var)', named('css/fonts.css', 'font-face'), ['Inter', 'Inter', 'Roboto Mono', 'Unused Face', '', 'var(--font)', 'Segoe UI']);
+      expectEq(fail, '@page :first prelude', ir.rulesOf('css/app.css').find((r) => r['atRuleName'] === 'page')?.['preludeText'], ':first');
+      expectEq(fail, '@media range syntax rule still holds its child', ir.ruleAtLine('css/app.css', 133)?.['childRuleCount'], '1');
+      expectEq(fail, '@-moz-document child', ir.ruleAtLine('css/app.css', 143)?.['childRuleCount'], '1');
+      expectEq(fail, '@starting-style child', ir.rulesOf('css/app.css').find((r) => r['atRuleName'] === 'starting-style')?.['childRuleCount'], '1');
+    },
+  },
+  {
+    name: 'at-rules: a quoted @keyframes name ("quoted-name") is a rule, and keyframe selector lists (0%, 50%) are blocks',
+    verdict: 'GAP',
+    note: 'tree-sitter-css rejects a string as a keyframes name and a comma list as a keyframe selector; `animation: "quoted-name" 1s` then has nothing to join. Read the @keyframes prelude from text as the other at-rules are.',
+    run: (ir, fail) => {
+      if (!ir.rulesOf('css/theme.css').some((r) => r['name'] === 'quoted-name')) fail('@keyframes "quoted-name" has no rule row');
+      const slide = ir.rulesOf('css/theme.css').find((r) => r['name'] === 'slide');
+      if (slide !== undefined && slide['childRuleCount'] !== '4') fail(`@keyframes slide has ${slide['childRuleCount']} blocks, the source has 4`);
+      if (ir.cssGapsOf('css/theme.css').some((g) => g['detail']!.includes('0%,'))) fail('`0%, 50% { }` is a parse gap');
+    },
+  },
+
+  // ── declarations and value references ─────────────────────────────────────
+  {
+    name: 'declarations: custom properties, vendor prefixes, !important variants, uppercase names, empty values and duplicates',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const props = ir.ruleAtLine('css/app.css', 148, '.props');
+      if (!expectRow(fail, '.props', props)) return;
+      const d = (line: number): Row | undefined => ir.declsOf(props).find((x) => x['startLine'] === String(line));
+      expectEq(fail, '--Brand custom', d(149)?.['isCustomProperty'], 'true');
+      expectEq(fail, '--Brand case kept', d(149)?.['property'], '--Brand');
+      expectEq(fail, '--empty value', d(151)?.['valueText'], '');
+      expectEq(fail, '--json value', d(153)?.['valueText'], '[1, 2, 3]');
+      expectEq(fail, '-webkit- prefix', d(158)?.['vendorPrefix'], '-webkit-');
+      expectEq(fail, '-ms-filter prefix', d(160)?.['vendorPrefix'], '-ms-');
+      expectEq(fail, 'custom property has no vendor prefix', d(149)?.['vendorPrefix'], '');
+      expectEq(fail, '_height hack kept', d(163)?.['property'], '_height');
+      expectEq(fail, 'margin: 0 ! important', d(166)?.['isImportant'], 'true');
+      expectEq(fail, 'padding: 0!important', d(167)?.['isImportant'], 'true');
+      expectEq(fail, 'color: red;; keeps the declaration', d(169)?.['valueText'], 'red');
+      expectEq(fail, 'color: ; is an empty value', d(170)?.['valueText'], '');
+      if (!ir.cssGapsOf('css/app.css').some((g) => g['detail'] === 'empty value for color')) fail('no gap for `color: ;`');
+      expectEq(fail, 'positions are consecutive', ir.declsOf(props).every((x, i) => x['position'] === String(i)), true);
+      expectEq(fail, 'uppercase property kept as written in a style attribute', ir.styleAttrDeclsAtLine('index.html', 109).map((x) => x['property']).join(','), 'COLOR,Background-Color');
+    },
+  },
+  {
+    name: 'declarations: `color: red !IMPORTANT` is important (the flag is case-insensitive)',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'line 168', ir.declAtLine('css/app.css', 168, 'color')?.['isImportant'], 'true');
+    },
+  },
+  {
+    name: 'declarations: one malformed declaration (`color red;`) loses only itself, not the rest of the block',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const props = ir.ruleAtLine('css/app.css', 148, '.props')!;
+      const lines = ir.declsOf(props).map((x) => Number(x['startLine']));
+      for (const want of [173, 174, 175, 176, 177, 178, 179]) if (!lines.includes(want)) fail(`declaration on line ${want} lost after \`color red;\` on 172`);
+      expectEq(fail, 'style="color red; margin: 0" keeps margin', ir.styleAttrDeclsAtLine('index.html', 104).map((x) => x['property']).join(','), 'margin');
+    },
+  },
+  {
+    name: 'declarations: a custom property whose value is a {} block (`--with-brace: { a: b }`) is one declaration',
+    verdict: 'GAP',
+    note: 'The grammar reads the block as a nested rule; the declaration vanishes and `a: b` appears as a declaration. Rare outside Polymer-era mixins.',
+    run: (ir, fail) => {
+      if (ir.declAtLine('css/app.css', 152, '--with-brace') === undefined) fail('--with-brace has no declaration row');
+    },
+  },
+  {
+    name: 'value refs: url() in every shape — quoted, unquoted, spaced, query/fragment, data:, //, root, ../, #, empty, list, nested in image-set, uppercase URL()',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const props = ir.ruleAtLine('css/app.css', 148, '.props')!;
+      const at = (line: number): string[] => {
+        const d = ir.declsOf(props).find((x) => x['startLine'] === String(line));
+        return d === undefined ? ['<no decl>'] : ir.refsOfDecl(d).map((v) => `${v['name']}(${v['urlKind']}${v['isResolved'] === 'true' ? '✓' : ''})`);
+      };
+      // app.css sits in css/: `img/…` is css/img/… (absent), `../img/…` and `/img/…` exist.
+      expectList(fail, "url('img/bg.png?v=1#frag')", at(180), ['img/bg.png?v=1#frag(RELATIVE)']);
+      expectList(fail, 'url(img/bg.png?v=1#frag)', at(181), ['img/bg.png?v=1#frag(RELATIVE)']);
+      expectList(fail, 'url(  img/bg.png  )', at(182), ['img/bg.png(RELATIVE)']);
+      expectList(fail, 'url("img/space name.png")', at(183), ['img/space name.png(RELATIVE)']);
+      expectList(fail, 'url(data:…)', at(185), ['data:image/png;base64,iVBORw0KGgo=(DATA_URI)']);
+      expectList(fail, 'url(//cdn…)', at(186), ['//cdn.example.com/x.png(PROTOCOL_RELATIVE)']);
+      expectList(fail, 'url(/img/bg.png) root-relative resolves', at(187), ['/img/bg.png(ROOT_RELATIVE✓)']);
+      expectList(fail, 'url(../img/bg.png) from css/ resolves', at(188), ['../img/bg.png(RELATIVE✓)']);
+      expectList(fail, 'url(#inline-ref)', at(189), ['#inline-ref(FRAGMENT)']);
+      expectList(fail, 'url()', at(190), ['(EMPTY)']);
+      expectList(fail, 'url(""), url(img/bg.png), url(img/missing.png)', at(191), ['(EMPTY)', 'img/bg.png(RELATIVE)', 'img/missing.png(RELATIVE)']);
+      expectList(fail, '-webkit-image-set(url(…))', at(193), ['img/hero.png(RELATIVE)']);
+      expectList(fail, 'cursor list', at(196), ['img/cursor.cur(RELATIVE)', 'img/cursor.cur(RELATIVE)']);
+      expectList(fail, 'mask: url(img/sprite.svg#mask)', at(195), ['img/sprite.svg#mask(RELATIVE)']);
+      expectList(fail, 'fonts.css ../fonts/inter.woff2 resolves', ir.valueRefsOfSheet('css/fonts.css', 'URL').slice(0, 1).map((v) => `${v['name']}(${v['urlKind']}${v['isResolved'] === 'true' ? '✓' : ''})`), ['../fonts/inter.woff2(RELATIVE✓)']);
+      expectList(fail, 'theme.css url relative to css/ (img/ is one level up)', ir.valueRefsOfSheet('css/theme.css', 'URL').map((v) => v['isResolved']!), ['false']);
+    },
+  },
+  {
+    name: 'value refs: URL(img/bg.png) in uppercase is a url() reference',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'line 199', ir.refsOfDecl(ir.declAtLine('css/app.css', 199, 'background')!).length, 1);
+    },
+  },
+  {
+    name: 'value refs: url(a\\)b.png) with an escaped paren is one URL',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'strings.css .s17', ir.refsOfDecl(ir.declAtLine('css/strings.css', 19, 'background')!)[0]?.['name'], 'a)b.png');
+    },
+  },
+  {
+    name: 'value refs: image-set("a.png" 1x) and src("a.png") name URLs',
+    verdict: 'GAP',
+    note: 'Only var() and url() are scanned; image-set() strings and src() are URL references too.',
+    run: (ir, fail) => {
+      expectEq(fail, 'image-set refs', ir.refsOfDecl(ir.declAtLine('css/app.css', 192, 'background')!).length, 2);
+      expectEq(fail, 'src() refs', ir.refsOfDecl(ir.declAtLine('css/app.css', 194, 'background')!).length, 1);
+    },
+  },
+  {
+    name: 'value refs: text inside a string is not a reference ("url(not.png)", "var(--not)", "var(--brand)")',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'strings.css .s6 content: "url(not.png)"', ir.refsOfDecl(ir.declAtLine('css/strings.css', 7, 'content')!).length, 0);
+      expectEq(fail, "strings.css .s7 content: 'var(--not)'", ir.refsOfDecl(ir.declAtLine('css/strings.css', 8, 'content')!).length, 0);
+      expectEq(fail, 'tokens.css .var-in-string', ir.refsOfDecl(ir.declAtLine('css/tokens.css', 30, 'content')!).length, 0);
+    },
+  },
+  {
+    name: 'value refs: var() — nested fallbacks are references of their own, fallback text kept, whitespace and case as written, non-variables ignored',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const nested = ir.declAtLine('css/app.css', 155, '--nested');
+      if (expectRow(fail, '--nested', nested)) expectList(fail, '--nested refs', refSummary(nested, ir), ['VARIABLE:--brand[var(--Brand, var(--missing, red))]', 'VARIABLE:--Brand[var(--missing, red)]', 'VARIABLE:--missing[red]']);
+      const cases = ir.declsOfSheet('css/tokens.css').filter((d) => d['startLine'] === '25');
+      const all = cases.flatMap((d) => refSummary(d, ir));
+      expectList(fail, '.var-name-cases', all, ['VARIABLE:--BRAND', 'VARIABLE:--brand', 'VARIABLE:--brand', 'VARIABLE:--brand[1px 2px]', 'VARIABLE:--brand[url(img/bg.png)]', 'URL:img/bg.png', 'VARIABLE:--brand[var(--gap)]', 'VARIABLE:--gap']);
+      expectEq(fail, '.var-not-a-var yields nothing', ir.declsOfSheet('css/tokens.css').filter((d) => d['startLine'] === '26').flatMap((d) => ir.refsOfDecl(d)).length, 0);
+      expectList(fail, 'calc(100% - var(--gap, 8px) * 2)', refSummary(ir.declAtLine('css/app.css', 201, 'width')!, ir), ['VARIABLE:--gap[8px]']);
+      expectList(fail, 'env(…, var(--pad))', refSummary(ir.declAtLine('css/app.css', 202, 'padding')!, ir), ['VARIABLE:--pad']);
+      expectList(fail, 'color-mix', refSummary(ir.declAtLine('css/app.css', 200, 'color')!, ir), ['VARIABLE:--brand', 'VARIABLE:--Brand']);
+      expectList(fail, 'a custom property defined from another (--alias: var(--brand))', refSummary(ir.declAtLine('css/tokens.css', 32, '--alias')!, ir), ['VARIABLE:--brand']);
+      expectList(fail, 'var() inside @keyframes block', refSummary(ir.declAtLine('css/theme.css', 12, 'color')!, ir), ['VARIABLE:--brand']);
+      expectEq(fail, 'a var() in a comment is not a reference', ir.declsOfSheet('css/tokens.css').filter((d) => d['startLine'] === '31').flatMap((d) => ir.refsOfDecl(d)).length, 0);
+    },
+  },
+  {
+    name: 'value refs: style attributes — declarations owned by the attribute, host positions, custom properties, url/var/animation/font/container refs',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const l98 = ir.styleAttrDeclsAtLine('index.html', 98);
+      expectList(fail, 'line 98 properties', names(l98, 'property'), ['color', 'margin']);
+      expectEq(fail, 'line 98 first column', l98[0]?.['startColumn'], '15');
+      expectEq(fail, 'line 98 second column', l98[1]?.['startColumn'], '36');
+      expectEq(fail, 'attribute-owned declarations have no rule', l98[0]?.['ruleLinkHash'], '');
+      expectEq(fail, 'owner attribute is the style attribute', ir.row(l98[0]?.['htmlAttributeLinkHash'])?.['attributeKind'], 'STYLE');
+      expectEq(fail, '--local custom in a style attribute', ir.styleAttrDeclsAtLine('index.html', 99)[0]?.['isCustomProperty'], 'true');
+      expectList(fail, 'padding: var(--local)', refSummary(ir.styleAttrDeclsAtLine('index.html', 99)[1]!, ir), ['VARIABLE:--local']);
+      expectEq(fail, 'color: red !important in an attribute', ir.styleAttrDeclsAtLine('index.html', 102)[0]?.['isImportant'], 'true');
+      expectList(fail, 'line 107 refs', ir.styleAttrDeclsAtLine('index.html', 107).flatMap((d) => refSummary(d, ir)), ['KEYFRAMES:spin', 'FONT_FAMILY:Inter', 'CONTAINER:sidebar']);
+      expectList(fail, 'style="color: red; } .injected {…" keeps the first declaration only', names(ir.styleAttrDeclsAtLine('index.html', 108), 'property'), ['color']);
+      expectList(fail, 'style=".x { color: red }" yields no declaration and a gap', names(ir.styleAttrDeclsAtLine('index.html', 105), 'property'), []);
+      if (!ir.ofDoc(ir.htmlGaps, 'index.html').some((g) => g['startLine'] === '105' && g['gapKind'] === 'STYLE_ATTRIBUTE_SYNTAX')) fail('no STYLE_ATTRIBUTE_SYNTAX gap on line 105');
+      if (!ir.ofDoc(ir.htmlGaps, 'index.html').some((g) => g['startLine'] === '103' && g['detail']!.includes('template'))) fail('no template gap for style="color: {{ color }}"');
+      expectList(fail, 'SVG rect style attribute', ir.styleAttrDeclsAtLine('svg.html', 30).flatMap((d) => refSummary(d, ir)), ['VARIABLE:--brand']);
+      expectList(fail, 'CRLF page style attribute', ir.styleAttrDeclsAtLine('quirks.html', 7).flatMap((d) => refSummary(d, ir)), ['VARIABLE:--brand']);
+    },
+  },
+  {
+    name: 'value refs: keyframes names from animation shorthands (any position, steps() skipped, keywords skipped, quoted) and animation-name lists',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const k = (line: number): string[] => ir.refsOfDecl(ir.declAtLine('css/app.css', line)!).filter((v) => v['referenceKind'] === 'KEYFRAMES').map((v) => v['name']!);
+      expectList(fail, 'spin 1s linear infinite, fade 2s', k(210), ['spin', 'fade']);
+      expectList(fail, '1s ease-in-out infinite reverse spin', k(211), ['spin']);
+      expectList(fail, '2s steps(4, end) slide', k(212), ['slide']);
+      expectList(fail, '"quoted-name" 1s', k(213), ['quoted-name']);
+      expectList(fail, 'none', k(214), []);
+      expectList(fail, 'linear 1s', k(215), []);
+      expectList(fail, 'var(--anim) 1s has no keyframes ref', k(216), []);
+      expectList(fail, 'animation-name list', k(217), ['spin', 'fade', 'missing-keyframes', 'vendor-spin']);
+      expectList(fail, 'animation-name: none', k(218), []);
+    },
+  },
+  {
+    name: 'value refs: `animation-name: ease` names a keyframes rule (keywords are reserved only in the shorthand)',
+    verdict: 'GAP',
+    note: 'The longhand excludes the shorthand keyword set; @keyframes ease { } in theme.css is then unjoinable. Apply ANIMATION_KEYWORDS to the shorthand only.',
+    run: (ir, fail) => {
+      expectEq(fail, 'line 219', ir.refsOfDecl(ir.declAtLine('css/app.css', 219)!).length, 1);
+    },
+  },
+  {
+    name: 'value refs: font families from font-family (quoted, unquoted multi-word, generics skipped) and the @font-face join',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const f = (sheet: string, line: number): string[] => ir.refsOfDecl(ir.declAtLine(sheet, line, 'font-family')!).filter((v) => v['referenceKind'] === 'FONT_FAMILY').map((v) => v['name']!);
+      expectList(fail, '"Inter", \'Roboto Mono\', Segoe UI, ui-sans-serif, sans-serif', f('css/app.css', 207), ['Inter', 'Roboto Mono', 'Segoe UI']);
+      expectList(fail, 'inherit', f('css/app.css', 208), []);
+      expectList(fail, 'var(--font) is a variable only', f('css/app.css', 209), []);
+      expectList(fail, 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto', f('css/fonts.css', 30), ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto']);
+      expectList(fail, '"Font; Name"', f('css/strings.css', 20), ['Font; Name']);
+      expectList(fail, '"Font } Name"', f('css/strings.css', 21), ['Font } Name']);
+      expectList(fail, 'Inter !important', f('css/fonts.css', 32), ['Inter']);
+      expectEq(fail, '@font-face src urls resolve against the sheet', ir.valueRefsOfSheet('css/fonts.css', 'URL').filter((v) => v['isResolved'] === 'true').length, 3);
+      expectEq(fail, '@font-face rule name joins font-family refs', ir.rulesOf('css/fonts.css').filter((r) => r['name'] === 'Inter').length, 2);
+    },
+  },
+  {
+    name: 'value refs: the `font` shorthand names families too (font: 12px Inter)',
+    verdict: 'GAP',
+    note: 'Only `font-family` is scanned. `font: italic bold 12px/30px Inter, "Segoe UI", serif` and `font: 12px Inter` produce no FONT_FAMILY row; a face used only through the shorthand reads as unused. Scan the segment after the size (and `/line-height`) of the shorthand.',
+    run: (ir, fail) => {
+      expectEq(fail, 'font: italic bold 12px/30px Inter, "Segoe UI", serif', ir.refsOfDecl(ir.declAtLine('css/app.css', 203, 'font')!).length, 2);
+      expectEq(fail, 'font: 12px Inter (fonts.css)', ir.refsOfDecl(ir.declAtLine('css/fonts.css', 26, 'font')!).length, 1);
+      expectEq(fail, 'style="font: 12px/1.5 Inter, serif"', ir.refsOfDecl(ir.styleAttrDeclsAtLine('index.html', 102)[1]!).length, 1);
+    },
+  },
+  {
+    name: 'value refs: container names from container / container-name, and the @container join',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const c = (line: number): string[] => ir.refsOfDecl(ir.declAtLine('css/app.css', line)!).map((v) => v['name']!);
+      expectList(fail, 'container: sidebar / inline-size', c(220), ['sidebar']);
+      expectList(fail, 'container: a b / size', c(221), ['a', 'b']);
+      expectList(fail, 'container-name: sidebar other', c(222), ['sidebar', 'other']);
+      expectList(fail, 'container-name: none', c(223), []);
+      expectList(fail, 'container-type is not a name', c(224), []);
+      const q = ir.rulesOf('css/app.css').find((r) => r['atRuleName'] === 'container');
+      expectList(fail, '@container prelude ref', q ? ir.refsOfRule(q).map((v) => `${v['referenceKind']}:${v['name']}`) : [], ['CONTAINER:sidebar']);
+    },
+  },
+  {
+    name: 'value refs: dashed-ident and custom-ident references to other at-rules (position-try-fallbacks, anchor-name, view-transition-name, grid-area, counter())',
+    verdict: 'GAP',
+    note: 'These name @position-try, anchors, view transitions, grid-template-areas and counters. No CssValueReferenceKind covers them yet; `position-try-fallbacks: --fallback` cannot reach `@position-try --fallback`.',
+    run: (ir, fail) => {
+      for (const [line, prop] of [[229, 'position-try-fallbacks'], [230, 'anchor-name'], [232, 'view-transition-name'], [228, 'grid-area']] as const) {
+        if (ir.refsOfDecl(ir.declAtLine('css/app.css', line, prop)!).length === 0) fail(`${prop} produces no reference`);
+      }
+    },
+  },
+  {
+    name: 'gaps: every unreadable region is a gap and the readable rest stands (strings.css, gaps.css, sassy.css, jinja <style>)',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const strings = names(ir.rulesOf('css/strings.css'), 'preludeText');
+      for (const want of ['.s1', '.s3', '.s4', '.s5', '.s6', '.s14', '.s15', '.s16', '.s17', '.s18', '.s19', '.s20', '.s23', '.s24', '.s25', '.s26']) if (!strings.includes(want)) fail(`strings.css lost rule ${want}`);
+      expectEq(fail, 'strings.css .s14 content with an escaped quote', ir.declAtLine('css/strings.css', 16, 'content')?.['valueText'], '"\\"; } .injected { color: red }"');
+      const gaps = names(ir.rulesOf('css/gaps.css'), 'preludeText');
+      for (const want of ['.before-gaps', '.g3', '.g4', '.g5', '.g8', '.g12', '.g13', '.g14', '.g15', '.g18', '.g19', '.g20', '.g21', '.g22', '.g23']) if (!gaps.includes(want)) fail(`gaps.css lost rule ${want}`);
+      expectEq(fail, 'gaps.css unknown statement is PREPROCESSOR_SYNTAX', ir.cssGapsOf('css/gaps.css').some((g) => g['detail']!.startsWith('postcss statement')), true);
+      expectEq(fail, 'gaps.css trailing declaration outside a rule is UNPARSED_FRAGMENT', ir.cssGapsOf('css/gaps.css').some((g) => g['gapKind'] === 'UNPARSED_FRAGMENT'), true);
+      expectEq(fail, 'sassy.css $var at top level is UNPARSED_FRAGMENT', ir.cssGapsOf('css/sassy.css').some((g) => g['gapKind'] === 'UNPARSED_FRAGMENT'), true);
+      expectEq(fail, 'sassy.css line comment flagged', ir.cssGapsOf('css/sassy.css').some((g) => g['detail']!.startsWith('line comment')), true);
+      expectEq(fail, 'jinja <style> keeps .item rule', ir.rulesOf('templates/jinja.html#style1').some((r) => r['preludeText'] === '.item'), true);
+      for (const g of ir.cssGaps) if (g['stylesheetLinkHash'] === '' || ir.row(g['stylesheetLinkHash']) === undefined) { fail('a css_parse_gap has no stylesheet'); break; }
+    },
+  },
+  {
+    name: 'gaps: a string containing `{` (content: "{") or left unterminated (content: "x }) does not swallow the next rule',
+    verdict: 'GAP',
+    note: 'tree-sitter-css reads the brace inside the string as a block, and runs an unterminated string past the newline where CSS ends it. Recoverable by re-reading the error text with a string-aware splitter.',
+    run: (ir, fail) => {
+      if (!names(ir.rulesOf('css/strings.css'), 'preludeText').includes('.s2')) fail('.s2 { content: "{" } has no rule row');
+      if (!names(ir.rulesOf('css/gaps.css'), 'preludeText').includes('.g25')) fail('.g25 after `.g24 { content: "x }` has no rule row');
+    },
+  },
+
+  // ── references ────────────────────────────────────────────────────────────
+  {
+    name: 'references: URL classification by text — schemes, case, protocol-relative, fragment, empty, javascript:, templates, Windows path',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const kind = (url: string): string => ir.ref('index.html', url)?.['urlKind'] ?? '<none>';
+      expectEq(fail, 'tel:', kind('tel:+1-555-0100'), 'OTHER_SCHEME');
+      expectEq(fail, 'sms: query split', ir.ref('index.html', 'sms:+15550100?body=hi')?.['query'], 'body=hi');
+      expectEq(fail, 'file:', kind('file:///etc/hosts'), 'OTHER_SCHEME');
+      expectEq(fail, 'C:\\ path', kind('C:\\Users\\x\\page.html'), 'OTHER_SCHEME');
+      expectEq(fail, '//cdn', kind('//cdn.example.com/lib.js'), 'PROTOCOL_RELATIVE');
+      expectEq(fail, 'HTTPS:// uppercase', kind('HTTPS://EXAMPLE.COM/A'), 'ABSOLUTE');
+      expectEq(fail, 'javascript:void(0)', kind('javascript:void(0)'), 'JAVASCRIPT_URI');
+      expectEq(fail, 'JavaScript: mixed case', kind("JavaScript:toggle('nav')"), 'JAVASCRIPT_URI');
+      expectEq(fail, 'javascript:;', kind('javascript:;'), 'JAVASCRIPT_URI');
+      expectEq(fail, 'javascript:{{ handler }}', kind('javascript:{{ handler }}'), 'TEMPLATE_EXPRESSION');
+      expectEq(fail, '{{ url_for }}', kind("{{ url_for('home') }}"), 'TEMPLATE_EXPRESSION');
+      expectEq(fail, '/static/{{ name }}.js', kind('/static/{{ name }}.js'), 'TEMPLATE_EXPRESSION');
+      expectEq(fail, '${ctx}/x.html', kind('${ctx}/x.html'), 'TEMPLATE_EXPRESSION');
+      expectEq(fail, '<%= path %>', kind('<%= path %>'), 'TEMPLATE_EXPRESSION');
+      expectEq(fail, 'empty href', ir.refsAtLine('index.html', 68)[0]?.['urlKind'], 'EMPTY');
+      expectEq(fail, 'padded href trimmed', ir.refsAtLine('index.html', 69)[0]?.['urlAsWritten'], 'index.html');
+      expectEq(fail, '#section-one', kind('#section-one'), 'FRAGMENT');
+      expectEq(fail, '#section-one fragment column', ir.ref('index.html', '#section-one')?.['fragment'], 'section-one');
+      expectEq(fail, 'bare # (forms)', ir.ref('forms.html', '#')?.['urlKind'], 'FRAGMENT');
+      expectEq(fail, './ unresolved', ir.ref('index.html', './')?.['isResolved'], 'false');
+      expectEq(fail, 'css/ directory unresolved', ir.ref('index.html', 'css/')?.['isResolved'], 'false');
+      expectEq(fail, '../outside.html unresolved', ir.ref('index.html', '../outside.html')?.['isResolved'], 'false');
+    },
+  },
+  {
+    name: 'references: reference kinds by element and attribute — image/media/frame/form/meta-refresh/cite/background/usemap/input type',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const k = (line: number): string[] => ir.refsAtLine('index.html', line).map((r) => `${r['referenceKind']}/${r['attributeName']}`);
+      expectList(fail, 'img src+srcset', k(164), ['IMAGE/src', 'IMAGE/srcset', 'IMAGE/srcset']);
+      expectList(fail, 'img src#frag + usemap', k(166), ['IMAGE/src', 'OTHER/usemap']);
+      expectEq(fail, 'usemap fragment', ir.refsAtLine('index.html', 166)[1]?.['fragment'], 'site-map');
+      expectList(fail, 'area href', k(167), ['ANCHOR/href']);
+      expectList(fail, 'picture sources + img', k(168), ['IMAGE/srcset', 'IMAGE/srcset', 'IMAGE/src']);
+      expectList(fail, 'video src poster source track', k(169), ['MEDIA/src', 'MEDIA/poster', 'MEDIA/src', 'MEDIA/src']);
+      expectList(fail, 'audio source', k(170), ['MEDIA/src']);
+      expectList(fail, 'input type=image', k(171), ['IMAGE/src']);
+      expectList(fail, 'input type=IMAGE', k(172), ['IMAGE/src']);
+      expectList(fail, 'input type=text src', k(173), ['OTHER/src']);
+      expectList(fail, 'iframe', k(174), ['FRAME/src']);
+      expectList(fail, 'embed', k(176), ['FRAME/src']);
+      expectList(fail, 'object data (param value is not a URL attribute)', k(177), ['FRAME/data']);
+      expectList(fail, 'blockquote cite', k(178), ['OTHER/cite']);
+      expectList(fail, 'body background', k(179), ['OTHER/background']);
+      expectList(fail, 'meta refresh with quoted URL', k(181), ['META_REFRESH/content']);
+      expectEq(fail, 'meta refresh URL', ir.refsAtLine('index.html', 181)[0]?.['urlAsWritten'], 'forms.html');
+      expectList(fail, 'meta Refresh (case) absolute', k(182), ['META_REFRESH/content']);
+      expectList(fail, 'script srcs: external module, src with ignored body, empty src, blank src', [153, 154, 155, 156].flatMap(k), ['SCRIPT/src', 'SCRIPT/src', 'SCRIPT/src', 'SCRIPT/src']);
+      expectList(fail, 'forms: action/formaction', ir.ofDoc(ir.references, 'forms.html').filter((r) => r['referenceKind'] === 'FORM_ACTION').map((r) => r['urlAsWritten']!), ['/submit', '/alt']);
+      expectList(fail, 'svg: use/image/a hrefs with and without xlink', ir.ofDoc(ir.references, 'svg.html').map((r) => `${r['referenceKind']}/${r['attributeName']}`),
+        ['STYLESHEET/href', 'OTHER/href', 'OTHER/xlink:href', 'OTHER/href', 'OTHER/xlink:href', 'OTHER/href', 'OTHER/xlink:href', 'ANCHOR/href', 'OTHER/xlink:href']);
+      expectEq(fail, 'svg sprite fragment kept with the resolved file', ir.ref('svg.html', 'img/sprite.svg#external-icon', 'href')?.['fragment'], 'external-icon');
+      expectEq(fail, 'htmx hx-get is a REQUEST reference', ir.ref('templates/mixed.html', '/items')?.['referenceKind'], 'REQUEST');
+    },
+  },
+  {
+    name: 'references: a srcset URL containing a comma (a.png?x=1,2 100w) is one candidate',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectList(fail, 'line 165 srcset', ir.refsAtLine('index.html', 165).map((r) => r['urlAsWritten']!), ['img/hero.webp?w=100,200', 'img/hero.png']);
+    },
+  },
+  {
+    name: 'references: ping="/ping1 /ping2" is a space-separated set of URLs',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectList(fail, 'ping refs', ir.refsAtLine('index.html', 91).filter((r) => r['attributeName'] === 'ping').map((r) => r['urlAsWritten']!), ['/ping1', '/ping2']);
+    },
+  },
+  {
+    name: 'references: URLs inside non-URL attributes and bodies (meta og:image content, param value, iframe srcdoc, SVG fill="url(#grad)") are not references',
+    verdict: 'LIMIT',
+    note: 'og:image and param value need per-vocabulary knowledge; srcdoc is a nested document; fill="url(#grad)" is a presentation attribute whose value is CSS. The html_attribute rows carry the text for an engine that wants them.',
+    run: (ir, fail) => {
+      if (ir.ref('index.html', 'img/hero.png', 'content') === undefined) fail('og:image content is not a reference (expected)');
+      if (!ir.attributes.some((a) => a['name'] === 'fill' && a['value'] === 'url(#grad)')) fail('fill attribute row missing');
+      else fail('fill="url(#grad)" has no reference row; the id join to <linearGradient id="grad"> is left to the engine');
+    },
+  },
+  {
+    name: 'references: cross-page fragments carry both the resolved document path and the fragment, and the target id exists as an element',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const r = ir.ref('forms.html', 'index.html#section-one');
+      if (!expectRow(fail, 'forms→index#section-one', r)) return;
+      expectEq(fail, 'resolvedFilePath = html_document.filePath', r['resolvedFilePath'], ir.doc('index.html')['filePath']);
+      expectEq(fail, 'fragment', r['fragment'], 'section-one');
+      expectEq(fail, 'target elements with that id (duplicate id, both rows)', ir.ofDoc(ir.elements, 'index.html').filter((e) => e['id'] === 'section-one').length, 2);
+      expectEq(fail, '#LOUD target keeps case', ir.ofDoc(ir.elements, 'index.html').some((e) => e['id'] === 'LOUD'), true);
+      expectEq(fail, 'forms.html#the-form from index (under base) still has path and fragment', ir.ref('index.html', 'forms.html#the-form')?.['fragment'], 'the-form');
+      expectEq(fail, '<use href="#sym-icon"> target id exists', ir.ofDoc(ir.elements, 'svg.html').some((e) => e['id'] === 'sym-icon'), true);
+    },
+  },
+  {
+    name: 'idrefs: for/form/list/headers/popovertarget/commandfor/itemref/contextmenu/aria-* carry kind and raw value; name attributes carry NAME; target is OTHER',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const kinds = ir.ofDoc(ir.attributes, 'forms.html').filter((a) => ['FOR', 'ID_REFERENCE', 'ARIA', 'NAME'].includes(a['attributeKind']!)).map((a) => `${a['name']}=${a['value']}:${a['attributeKind']}`);
+      for (const want of ['for=q:FOR', 'for=  q  :FOR', 'for=Q:FOR', 'list=choices:ID_REFERENCE', 'form=the-form:ID_REFERENCE', 'popovertarget=pop:ID_REFERENCE', 'for=q pick:FOR',
+        'headers=h-name h-age h-missing:ID_REFERENCE', 'name=site-map:NAME', 'name=legacy-anchor:NAME', 'name=frame-b:NAME', 'aria-labelledby=h-name h-age:ARIA', 'aria-owns=pop choices:ARIA',
+        'aria-activedescendant=q:ARIA', 'itemref=h-name h-age:ID_REFERENCE', 'contextmenu=ctx:ID_REFERENCE', 'commandfor=pop:ID_REFERENCE']) {
+        if (!kinds.includes(want)) fail(`forms.html lacks ${want}`);
+      }
+      expectEq(fail, 'target kind', ir.ofDoc(ir.attributes, 'forms.html').find((a) => a['name'] === 'target')?.['attributeKind'], 'OTHER');
+      for (const id of ['q', 'choices', 'the-form', 'pop', 'h-name', 'h-age', 'ctx', 'site-map-id']) if (!ir.ofDoc(ir.elements, 'forms.html').some((e) => e['id'] === id)) fail(`forms.html has no element with id ${id}`);
+      expectEq(fail, 'duplicate id q has two element rows', ir.ofDoc(ir.elements, 'forms.html').filter((e) => e['id'] === 'q').length, 2);
+      expectEq(fail, 'popover boolean attribute', ir.ofDoc(ir.attributes, 'forms.html').find((a) => a['name'] === 'popover')?.['hasValue'], 'false');
+    },
+  },
+
+  // ── scripts and handlers ──────────────────────────────────────────────────
+  {
+    name: 'scripts: kind and type for every <script> shape, body ranges for inline, src and resolution for external',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const s = ir.ofDoc(ir.scripts, 'index.html');
+      const types = s.map((x, i) => (i === 7 ? '*' : `${x['scriptKind']}:${x['scriptType']}`)); // #7 is the parameterised MIME type, checked on its own
+      expectList(fail, 'index.html scripts', types, [
+        'EXTERNAL:CLASSIC', 'EXTERNAL:MODULE', 'EXTERNAL:CLASSIC', 'INLINE:IMPORTMAP', 'INLINE:CLASSIC',
+        'INLINE:CLASSIC', 'INLINE:CLASSIC', '*', 'INLINE:MODULE', 'INLINE:TEMPLATE', 'INLINE:TEMPLATE', 'INLINE:TEMPLATE', 'INLINE:JSON', 'INLINE:JSON',
+        'INLINE:SPECULATION_RULES', 'INLINE:TRANSPILED', 'INLINE:TRANSPILED', 'INLINE:DATA_BLOCK', 'EXTERNAL:MODULE', 'EXTERNAL:CLASSIC', 'INLINE:CLASSIC', 'INLINE:CLASSIC', 'INLINE:CLASSIC', 'INLINE:CLASSIC', 'INLINE:CLASSIC']);
+      expectEq(fail, 'defer', s[0]?.['isDefer'], 'true');
+      expectEq(fail, 'nomodule', s[2]?.['isNoModule'], 'true');
+      expectEq(fail, 'first inline body range', `${s[4]?.['bodyStartLine']}:${s[4]?.['bodyStartColumn']}-${s[4]?.['bodyEndLine']}:${s[4]?.['bodyEndColumn']}`, '28:11-34:3');
+      expectEq(fail, 'external script links its reference row', ir.row(s[0]?.['referenceLinkHash'])?.['urlAsWritten'], 'js/vendor.js');
+      expectEq(fail, 'src="" is inline', s[20]?.['scriptKind'], 'INLINE');
+      expectEq(fail, 'src="   " is inline', s[21]?.['scriptKind'], 'INLINE');
+      expectEq(fail, '"<\\/script>" in a string does not end the body', s[22]?.['bodyEndLine'], '160');
+      expectEq(fail, '"</script>" in a string ends the body (as in a browser)', s[23]?.['bodyLength'], '19');
+      expectEq(fail, 'mixed.html ../js/app.js resolved', ir.ofDoc(ir.scripts, 'templates/mixed.html')[0]?.['resolvedFilePath'], ir.abs('js/app.js'));
+      expectEq(fail, 'jinja {% static %} src is a template expression', ir.ofDoc(ir.references, 'templates/jinja.html').find((r) => r['referenceKind'] === 'SCRIPT')?.['urlKind'], 'TEMPLATE_EXPRESSION');
+      expectEq(fail, 'template <script> inside <template> counted', s.length, Number(ir.doc('index.html')['scriptCount']));
+    },
+  },
+  {
+    name: 'scripts: a JavaScript MIME type with parameters (application/javascript;charset=utf-8) is CLASSIC',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, 'line 142', ir.ofDoc(ir.scripts, 'index.html').find((x) => x['typeAsWritten'] === 'application/javascript;charset=utf-8')?.['scriptType'], 'CLASSIC');
+    },
+  },
+  {
+    name: 'handlers: every call shape in on* attributes and javascript: URLs — callee, receiver, arguments, new, nesting order, entities, case, SVG, CRLF, XHTML',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const h = (line: number): string[] => ir.handlersAtLine('index.html', line).map((x) => `${x['receiverText'] ? x['receiverText'] + '.' : ''}${x['calleeName']}(${x['argumentCount']})${x['isNew'] === 'true' ? ' new' : ''}`);
+      expectList(fail, 'body onload', h(50), ['track(2)']);
+      expectEq(fail, 'onload event name', ir.handlersAtLine('index.html', 50)[0]?.['eventName'], 'load');
+      expectList(fail, 'javascript:void(0) + onclick', h(82), ['go(1)']);
+      expectList(fail, "JavaScript:toggle('nav')", h(83), ['toggle(1)']);
+      expectEq(fail, 'javascript: source', ir.handlersAtLine('index.html', 83)[0]?.['handlerSource'], 'JAVASCRIPT_URL');
+      expectList(fail, 'save()', h(113), ['save(0)']);
+      expectList(fail, 'app.submit(event)', h(114), ['app.submit(1)']);
+      expectList(fail, 'a.b.c.d(1,2,3)', h(115), ['a.b.c.d(3)']);
+      expectList(fail, "window['save']()", h(116), ['window.(0)']);
+      expectList(fail, 'new Widget(this).open()', h(117), ['new Widget(this).open(0)', 'Widget(1) new']);
+      expectList(fail, 'if/else three calls', h(118), ['confirm(1)', 'remove(1)', 'keep(0)']);
+      expectList(fail, 'iife', h(119), ['(0)', 'inner(0)']);
+      expectList(fail, 'bare identifier', h(120), []);
+      expectList(fail, 'return false', h(121), []);
+      expectList(fail, 'empty', h(122), []);
+      expectList(fail, 'entities in arguments', h(123), ['save(2)']);
+      expectList(fail, 'unbalanced still yields the call', h(124), ['save(2)']);
+      if (!ir.ofDoc(ir.htmlGaps, 'index.html').some((g) => g['startLine'] === '124' && g['gapKind'] === 'HANDLER_SYNTAX')) fail('no HANDLER_SYNTAX gap on line 124');
+      expectList(fail, "this.classList.toggle('open')", h(125), ['this.classList.toggle(1)']);
+      expectList(fail, 'ONCLICK', h(127), ['shout(0)']);
+      expectList(fail, 'onClick', h(128), ['camel(0)']);
+      expectList(fail, '{{ handler }} yields no call', h(130), []);
+      expectList(fail, 'ondblclick three positions', h(132), ['save(0)', 'save(0)', 'save(0)']);
+      expectList(fail, 'javascript: label inside a handler', h(133), ['hover(0)']);
+      expectList(fail, 'save?.()', h(134), ['save(0)']);
+      expectList(fail, 'await save()', h(135), ['save(0)']);
+      expectList(fail, 'save(...args)', h(136), ['save(1)']);
+      expectList(fail, 'tagged template is not a call', h(137), []);
+      expectEq(fail, 'svg rect onclick', ir.handlersAtLine('svg.html', 30)[0]?.['calleeName'], 'svgClick');
+      expectEq(fail, 'foreignObject ONCLICK', ir.handlersAtLine('svg.html', 32)[0]?.['calleeName'], 'backInHtml');
+      expectEq(fail, 'CRLF page handler', ir.handlersAtLine('quirks.html', 8)[0]?.['calleeName'], 'crlf');
+      expectEq(fail, 'xhtml onload', ir.handlersAtLine('xhtml/page.xhtml', 14)[0]?.['calleeName'], 'cdata');
+      const framework = ir.handlersAtLine('index.html', 129);
+      expectList(fail, 'framework event directives are TEMPLATE_EVENT, never EVENT_ATTRIBUTE', framework.map((x) => `${x['handlerSource']}:${x['calleeName']}`), ['TEMPLATE_EVENT:vue', 'TEMPLATE_EVENT:angular', 'TEMPLATE_EVENT:vueLong', 'TEMPLATE_EVENT:alpine']);
+    },
+  },
+  {
+    name: 'handlers: Svelte on:click and htmx hx-on:click are recorded as template events',
+    verdict: 'GAP',
+    note: 'Neither matches an on* attribute nor a known directive family; the calls (svelte(), htmx()) are not rows anywhere.',
+    run: (ir, fail) => {
+      const callees = ir.handlersAtLine('index.html', 129).map((x) => x['calleeName']);
+      if (!callees.includes('svelte')) fail('on:click="svelte()" produced no handler call');
+      if (!callees.includes('htmx')) fail('hx-on:click="htmx()" produced no handler call');
+    },
+  },
+  {
+    name: 'handlers: classes and ids named only inside script text are not class references (the JavaScript front end owns those strings)',
+    verdict: 'LIMIT',
+    note: "classList.add('js-ready'), getElementById('late-id'), classList.toggle('open') and querySelector('#late-id .card') are string literals in JS; the join is js_string_literal ↔ css_selector_part, made by the engine once both IRs are loaded.",
+    run: (ir, fail) => {
+      if (ir.ofDoc(ir.classRefs, 'index.html').some((c) => c['className'] === 'js-ready' || c['className'] === 'open')) fail('a script string became a class reference');
+      else fail('.js-ready / .open / #late-id are only in script text; nothing in the web IR joins them');
+    },
+  },
+
+  // ── the element tree ──────────────────────────────────────────────────────
+  {
+    name: 'tree: implicit closes the grammar knows (p by div, li by li, dt/dd), template contents walked, noscript walked, comments hidden, void elements lift their trailing content',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      expectEq(fail, '<p>a <div> closes the p', ir.element('index.html', '/body[1]/div[9]')?.['classNames'], 'div-in-p');
+      expectEq(fail, 'p text before the div', ir.element('index.html', '/body[1]/p[1]')?.['textContent'], 'a');
+      expectList(fail, 'li siblings', ir.ofDoc(ir.elements, 'index.html').filter((e) => e['path']!.startsWith('/html[1]/body[1]/ul[1]/')).map((e) => e['path']!), ['/html[1]/body[1]/ul[1]/li[1]', '/html[1]/body[1]/ul[1]/li[2]']);
+      expectList(fail, 'dl children', ir.ofDoc(ir.elements, 'index.html').filter((e) => e['path']!.startsWith('/html[1]/body[1]/dl[1]/')).map((e) => e['tagName']!), ['dt', 'dd', 'dt']);
+      expectEq(fail, 'template contents walked', ir.element('index.html', '/template[1]/div[1]')?.['classNames'], 'in-template');
+      expectEq(fail, 'noscript contents walked', ir.element('index.html', '/noscript[1]/div[1]')?.['classNames'], 'noscript-class');
+      if (ir.classRefs.some((c) => c['className'] === 'commented-out' || c['className'] === 'ie-only')) fail('a class inside an HTML comment became a reference');
+      expectEq(fail, 'entities in text decoded, unknown kept', ir.element('index.html', '/div[10]/p[1]')?.['textContent'], "entities: & < tag > ' ' &unknown; ©");
+      expectEq(fail, 'img is void', ir.element('index.html', '/body[1]/img[1]')?.['isVoid'], 'true');
+      expectEq(fail, 'map holds its area', ir.element('index.html', '/map[1]/area[1]') !== undefined, true);
+      expectEq(fail, 'custom element and slot', ir.element('index.html', '/custom-element[1]/slot[1]') !== undefined, true);
+      expectEq(fail, 'is="x-foo" attribute kept', ir.attr(ir.element('index.html', '/div[10]/div[1]')!, 'is')?.['value'], 'x-foo');
+      expectEq(fail, 'duplicate attributes: four gaps on lines 205-206', ir.ofDoc(ir.htmlGaps, 'index.html').filter((g) => g['detail'] === 'duplicate-attribute' && ['205', '206'].includes(g['startLine']!)).length, 4);
+      expectEq(fail, 'duplicate attribute gap names its element', ir.row(ir.ofDoc(ir.htmlGaps, 'index.html').find((g) => g['startLine'] === '205')?.['relatedElementLinkHash'])?.['classNames'], 'dup-attr');
+      expectEq(fail, 'quirks unterminated quote swallows to the next quote (as a browser does)', ir.element('quirks.html', '/body[1]/p[3]')?.['classNames'], 'unterminated>,<div,class=');
+    },
+  },
+  {
+    name: 'tree: browser tree-construction repairs the grammar does not do — <div/> stays open, <option> closes <option>, nested <a> closes <a>, a second <body> merges, tbody is implied',
+    verdict: 'GAP',
+    note: 'tree-sitter-html builds the tree as written. An engine comparing selectors like `table > tbody > tr` or paths after a self-closing non-void tag needs these repairs; either the parser runs the HTML tree-construction rules (adding isImplied rows) or the engine does.',
+    run: (ir, fail) => {
+      if (ir.element('index.html', '/body[1]/span[1]') !== undefined) fail('<div/> followed by <span>: span is a sibling, a browser makes it a child');
+      if (ir.element('index.html', '/option[1]/option[1]') !== undefined) fail('<option>one<option>two: the second option is nested, a browser closes the first');
+      if (ir.element('index.html', '/a[1]/a[1]') !== undefined) fail('<a><a>: nested, a browser closes the outer anchor');
+      if (ir.element('index.html', '/body[1]/body[1]') !== undefined) fail('<body background> inside body: a second body element, a browser merges the attribute');
+      if (!ir.elements.some((e) => e['tagName'] === 'tbody')) fail('no tbody anywhere: `table > tbody > tr` can never match the written tree');
+    },
+  },
+  {
+    name: 'tree: id-less, class-less wrappers still have rows and parents the matcher can walk',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const td = ir.element('index.html', '/table[1]/tr[1]/td[1]');
+      if (!expectRow(fail, 'td', td)) return;
+      const chain: string[] = [];
+      for (let e: Row | undefined = td; e !== undefined; e = ir.row(e['parentElementLinkHash'])) chain.push(e['tagName']!);
+      expectList(fail, 'td ancestry', chain, ['td', 'tr', 'table', 'body', 'html']);
+      expectEq(fail, 'td depth', td['depth'], '4');
+      expectEq(fail, 'table childElementCount', ir.element('index.html', '/body[1]/table[1]')?.['childElementCount'], '1');
+      expectEq(fail, 'sibling positions', ir.element('index.html', '/ul[1]/li[2]')?.['position'], '1');
+    },
+  },
+  {
+    name: 'template expressions: directives and interpolations of every dialect are rows with their callee names',
+    verdict: 'DEFECT',
+    run: (ir, fail) => {
+      const mixed = ir.ofDoc(ir.templateExpressions, 'templates/mixed.html');
+      const kinds = new Set(mixed.map((t) => `${t['dialect']}:${t['expressionKind']}`));
+      for (const want of ['THYMELEAF:BINDING', 'ANGULAR:CONDITION', 'ANGULAR:EVENT_HANDLER', 'ANGULAR:MODEL', 'VUE:CONDITION', 'VUE:BINDING', 'VUE:EVENT_HANDLER', 'ALPINE:EVENT_HANDLER', 'HTMX:REQUEST', 'ERB:INTERPOLATION', 'PHP:DIRECTIVE']) {
+        if (!kinds.has(want)) fail(`mixed.html lacks ${want}`);
+      }
+      expectEq(fail, '(click)="toggle()" callee', mixed.find((t) => t['directive'] === '(click)')?.['calleeNames'], 'toggle');
+      expectEq(fail, 'jinja has JINJA directives', ir.ofDoc(ir.templateExpressions, 'templates/jinja.html').filter((t) => t['dialect'] === 'JINJA').length > 10, true);
+    },
+  },
+];
+
+// ===========================================================================
+// probes: the parsers on micro-inputs, for cases a fixture file states less sharply
+// ===========================================================================
+
+const TMP = fs.mkdtempSync(path.join(os.tmpdir(), 'axiom-web-torture-probe-'));
+function probeFile(rel: string, content: string): string {
+  const p = path.join(TMP, rel);
+  fs.mkdirSync(path.dirname(p), { recursive: true });
+  fs.writeFileSync(p, content);
+  return p;
+}
+function css(text: string): CssExtraction {
+  const p = probeFile('site/x.css', text);
+  const sheet = new CssStylesheet({
+    name: 'x', fileName: 'x.css', filePath: p, baseMservPath: path.join(TMP, 'site'), relativePath: 'x.css', sourceKind: CssStylesheetSource.FILE,
+    sourceProvenance: CssSourceProvenance.PROJECT, ownerHtmlElementLinkHash: '', htmlDocumentLinkHash: '', startLine: 1, startColumn: 1, endLine: 1, serviceVersionLinkHash: 'V',
+  });
+  return new CssParser().parseStylesheet(text, { stylesheet: sheet, line: 1, column: 1, filePath: p, projectRoot: path.join(TMP, 'site'), serviceVersionLinkHash: 'V' });
+}
+function html(text: string, rel = 'site/page.html'): HtmlExtraction {
+  const p = probeFile(rel, text);
+  return new HtmlParser().parse(text, p, path.join(TMP, 'site'), 'V');
+}
+
+export const PROBES: Check[] = [
+  {
+    name: 'probe: `.x { color red; a: b; c: d }` keeps a and c',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      expectList(fail, 'declarations', css('.x { color red; a: b; c: d }').declarations.map((d) => d.property), ['a', 'c']);
+    },
+  },
+  {
+    name: 'probe: `!IMPORTANT` and `! important` are both important',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      expectList(fail, 'flags', css('.x { a: 1 !IMPORTANT; b: 2 ! important; c: 3 !Important }').declarations.map((d) => `${d.property}:${d.isImportant}`), ['a:true', 'b:true', 'c:true']);
+    },
+  },
+  {
+    name: 'probe: url( "a.png" ) with spaces around a quoted path is the path',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      expectList(fail, 'refs', css('.x { a: url( "a.png" ); b: url(  b.png  ) }').valueReferences.map((v) => v.name), ['a.png', 'b.png']);
+    },
+  },
+  {
+    name: 'probe: `URL(a.png)` and `Url(a.png)` are url() references',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      expectList(fail, 'refs', css('.x { a: URL(a.png); b: Url("b.png") }').valueReferences.map((v) => v.name), ['a.png', 'b.png']);
+    },
+  },
+  {
+    name: 'probe: a string with CSS syntax inside is one value and no reference',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      const x = css('.x { content: "a; } b { c: d }"; e: f; g: "url(h.png) var(--i)" }');
+      expectList(fail, 'declarations', x.declarations.map((d) => d.property), ['content', 'e', 'g']);
+      expectEq(fail, 'references', x.valueReferences.length, 0);
+    },
+  },
+  {
+    name: 'probe: `:nth-child(2n of .one, .two)` argument parts are named from their own text',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      const x = css('@charset "utf-8";\nli:nth-child(2n of .one, .two) { a: b }');
+      expectList(fail, 'parts', x.selectorParts.map((p) => `${p.partKind}:${p.name}@${p.depth}`), ['TYPE:li@0', 'PSEUDO_CLASS:nth-child@0', 'CLASS:one@1', 'CLASS:two@1']);
+    },
+  },
+  {
+    name: 'probe: srcset candidates per the HTML algorithm — a comma inside the URL does not split',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      const x = html('<img srcset="a.png?x=1,2 100w, b.png 2x,c.png">');
+      expectList(fail, 'candidates', x.references.map((r) => r.urlAsWritten), ['a.png?x=1,2', 'b.png', 'c.png']);
+    },
+  },
+  {
+    name: 'probe: a percent-encoded relative URL resolves to the decoded file',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      probeFile('site/img/space name.png', '');
+      const x = html('<img src="img/space%20name.png"><img src="img/space name.png">');
+      expectList(fail, 'resolved', x.references.map((r) => String(r.isResolved)), ['true', 'true']);
+    },
+  },
+  {
+    name: 'probe: resolution is case-sensitive even on a case-insensitive file system (INDEX.HTML must not resolve to index.html)',
+    verdict: 'LIMIT',
+    note: 'fs.statSync answers yes on macOS and Windows and no on Linux, so the same source yields a different IR per OS. Compare the URL against the directory listing to make resolution portable.',
+    run: (_ir, fail) => {
+      probeFile('site/index.html', '');
+      const x = html('<a href="INDEX.HTML">x</a>', 'site/other.html');
+      if (x.references[0]?.isResolved) fail('INDEX.HTML resolved on this file system; it would not on Linux');
+    },
+  },
+  {
+    name: 'probe: `<option>one<option>two` are siblings',
+    verdict: 'GAP',
+    note: 'The grammar\'s implicit-end-tag set lacks option (and optgroup, tr/td/th, thead/tbody). A browser closes them.',
+    run: (_ir, fail) => {
+      expectList(fail, 'paths', html('<select><option>one<option>two</select>').elements.map((e) => e.path), ['/select[1]', '/select[1]/option[1]', '/select[1]/option[2]']);
+    },
+  },
+  {
+    name: 'probe: `<div/>` followed by `<span>` makes the span a child (self-closing is ignored on non-void HTML elements)',
+    verdict: 'GAP',
+    note: 'tree-sitter-html honours the slash. In a .html file the browser does not; in a .xhtml file it does, so the fix must be per document kind.',
+    run: (_ir, fail) => {
+      expectList(fail, 'paths', html('<div/><span>s</span>').elements.map((e) => e.path), ['/div[1]', '/div[1]/span[1]']);
+    },
+  },
+  {
+    name: 'probe: a nested @media with bare declarations and a nested rule yields both, owned correctly',
+    verdict: 'DEFECT',
+    run: (_ir, fail) => {
+      const x = css('.a { color: red; @media (x) { color: blue; .b { color: green } } }');
+      const media = x.rules.find((r) => r.atRuleName === 'media')!;
+      expectEq(fail, '@media declaration count', media.getDeclarationCount(), 1);
+      expectEq(fail, '@media child rules', media.getChildRuleCount(), 1);
+      expectEq(fail, '.b parent is @media', x.rules.find((r) => r.preludeText === '.b')?.parentRuleLinkHash, media.getHash());
+      expectEq(fail, '.a declaration count excludes the nested one', x.rules.find((r) => r.preludeText === '.a')?.getDeclarationCount(), 1);
+    },
+  },
+];
diff --git a/parser/src/test/web-torture-ir.ts b/parser/src/test/web-torture-ir.ts
new file mode 100644
index 000000000..484805664
--- /dev/null
+++ b/parser/src/test/web-torture-ir.ts
@@ -0,0 +1,206 @@
+/**
+ * The torture suite's view of one analyzer run: the sixteen relations as rows, indexed
+ * by their keys, with the lookups the checks repeat. Nothing here interprets the IR —
+ * that is the engine's job — it only follows link columns.
+ */
+import * as path from 'path';
+
+export type Row = Record<string, string>;
+export type Verdict = 'DEFECT' | 'GAP' | 'LIMIT';
+
+export interface Check {
+  name: string;
+  verdict: Verdict;
+  /** For a GAP or LIMIT: what would close it, or why nothing can. */
+  note?: string;
+  run: (ir: Ir, fail: (message: string) => void) => void;
+}
+
+export class Ir {
+  readonly documents: Row[];
+  readonly elements: Row[];
+  readonly attributes: Row[];
+  readonly classRefs: Row[];
+  readonly references: Row[];
+  readonly scripts: Row[];
+  readonly handlerCalls: Row[];
+  readonly htmlGaps: Row[];
+  readonly stylesheets: Row[];
+  readonly rules: Row[];
+  readonly selectors: Row[];
+  readonly parts: Row[];
+  readonly declarations: Row[];
+  readonly valueRefs: Row[];
+  readonly comments: Row[];
+  readonly cssGaps: Row[];
+  readonly templateExpressions: Row[];
+  readonly tables: Record<string, Row[]>;
+
+  private readonly byKey = new Map<string, Row>();
+
+  constructor(readonly root: string, tables: Record<string, Row[]>) {
+    this.tables = tables;
+    const t = (k: string): Row[] => tables[k] ?? [];
+    this.documents = t('HTML_DOCUMENTS');
+    this.elements = t('HTML_ELEMENTS');
+    this.attributes = t('HTML_ATTRIBUTES');
+    this.classRefs = t('HTML_CLASS_REFERENCES');
+    this.references = t('HTML_REFERENCES');
+    this.scripts = t('HTML_SCRIPTS');
+    this.handlerCalls = t('HTML_HANDLER_CALLS');
+    this.htmlGaps = t('HTML_PARSE_GAPS');
+    this.stylesheets = t('CSS_STYLESHEETS');
+    this.rules = t('CSS_RULES');
+    this.selectors = t('CSS_SELECTORS');
+    this.parts = t('CSS_SELECTOR_PARTS');
+    this.declarations = t('CSS_DECLARATIONS');
+    this.valueRefs = t('CSS_VALUE_REFERENCES');
+    this.comments = t('CSS_COMMENTS');
+    this.cssGaps = t('CSS_PARSE_GAPS');
+    this.templateExpressions = t('HTML_TEMPLATE_EXPRESSIONS');
+    for (const rows of Object.values(tables)) {
+      for (const r of rows) {
+        const key = Object.keys(r).find((c) => c.endsWith('UniqueHash'));
+        if (key !== undefined) this.byKey.set(r[key]!, r);
+      }
+    }
+  }
+
+  /** The row a link column points at, or undefined for '' and for a dangling link. */
+  row(hash: string | undefined): Row | undefined {
+    return hash === undefined || hash === '' ? undefined : this.byKey.get(hash);
+  }
+
+  abs(rel: string): string {
+    return path.join(this.root, rel);
+  }
+
+  // ── documents and their rows ──────────────────────────────────────────────
+
+  doc(rel: string): Row {
+    const d = this.documents.find((x) => x['relativePath'] === rel);
+    if (d === undefined) throw new Error(`no html_document for ${rel}`);
+    return d;
+  }
+
+  /** Rows of a relation whose documentLinkHash is the page's. */
+  ofDoc(rows: Row[], rel: string): Row[] {
+    const key = this.doc(rel)['htmlDocumentUniqueHash'];
+    return rows.filter((r) => (r['documentLinkHash'] ?? r['htmlDocumentLinkHash']) === key);
+  }
+
+  element(rel: string, pathSuffix: string): Row | undefined {
+    return this.ofDoc(this.elements, rel).find((e) => e['path']!.endsWith(pathSuffix));
+  }
+
+  elementsAtLine(rel: string, line: number): Row[] {
+    return this.ofDoc(this.elements, rel).filter((e) => Number(e['startLine']) === line);
+  }
+
+  attrsOf(element: Row): Row[] {
+    return this.attributes.filter((a) => a['ownerElementLinkHash'] === element['htmlElementUniqueHash']);
+  }
+
+  attr(element: Row, name: string): Row | undefined {
+    return this.attrsOf(element).find((a) => a['name'] === name);
+  }
+
+  classesAtLine(rel: string, line: number): string[] {
+    return this.ofDoc(this.classRefs, rel).filter((c) => Number(c['startLine']) === line).map((c) => c['className']!);
+  }
+
+  refsAtLine(rel: string, line: number): Row[] {
+    return this.ofDoc(this.references, rel).filter((r) => Number(r['startLine']) === line);
+  }
+
+  ref(rel: string, url: string, attributeName?: string): Row | undefined {
+    return this.ofDoc(this.references, rel).find((r) => r['urlAsWritten'] === url && (attributeName === undefined || r['attributeName'] === attributeName));
+  }
+
+  handlersAtLine(rel: string, line: number): Row[] {
+    return this.ofDoc(this.handlerCalls, rel).filter((h) => Number(h['startLine']) === line).sort((a, b) => Number(a['position']) - Number(b['position']));
+  }
+
+  // ── stylesheets and their rows ────────────────────────────────────────────
+
+  /** A `.css` file by relative path, or a page's n-th `<style>` as `page.html#styleN`. */
+  sheet(ref: string): Row {
+    const hash = ref.indexOf('#');
+    const s = hash < 0
+      ? this.stylesheets.find((x) => x['relativePath'] === ref && x['sourceKind'] === 'FILE')
+      : this.stylesheets.find((x) => x['relativePath'] === ref.slice(0, hash) && x['name']!.endsWith(ref.slice(hash)));
+    if (s === undefined) throw new Error(`no css_stylesheet for ${ref}`);
+    return s;
+  }
+
+  rulesOf(sheetRef: string): Row[] {
+    const key = this.sheet(sheetRef)['cssStylesheetUniqueHash'];
+    return this.rules.filter((r) => r['stylesheetLinkHash'] === key);
+  }
+
+  ruleAtLine(sheetRef: string, line: number, prelude?: string): Row | undefined {
+    return this.rulesOf(sheetRef).find((r) => Number(r['startLine']) === line && (prelude === undefined || r['preludeText'] === prelude));
+  }
+
+  selectorsOf(rule: Row): Row[] {
+    return this.selectors.filter((s) => s['ruleLinkHash'] === rule['cssRuleUniqueHash']).sort((a, b) => Number(a['position']) - Number(b['position']));
+  }
+
+  /** The one selector with this text in the sheet, searched by text alone. */
+  selector(sheetRef: string, text: string): Row | undefined {
+    const rules = new Set(this.rulesOf(sheetRef).map((r) => r['cssRuleUniqueHash']));
+    return this.selectors.find((s) => rules.has(s['ruleLinkHash']!) && s['selectorText'] === text);
+  }
+
+  partsOf(selector: Row): Row[] {
+    return this.parts.filter((p) => p['selectorLinkHash'] === selector['cssSelectorUniqueHash']).sort((a, b) => Number(a['position']) - Number(b['position']));
+  }
+
+  partsOfSheet(sheetRef: string): Row[] {
+    const rules = new Set(this.rulesOf(sheetRef).map((r) => r['cssRuleUniqueHash']));
+    return this.parts.filter((p) => rules.has(p['ruleLinkHash']!));
+  }
+
+  declsOf(rule: Row): Row[] {
+    return this.declarations.filter((d) => d['ruleLinkHash'] === rule['cssRuleUniqueHash']).sort((a, b) => Number(a['position']) - Number(b['position']));
+  }
+
+  declsOfSheet(sheetRef: string): Row[] {
+    const key = this.sheet(sheetRef)['cssStylesheetUniqueHash'];
+    return this.declarations.filter((d) => d['stylesheetLinkHash'] === key);
+  }
+
+  declAtLine(sheetRef: string, line: number, property?: string): Row | undefined {
+    return this.declsOfSheet(sheetRef).find((d) => Number(d['startLine']) === line && (property === undefined || d['property'] === property));
+  }
+
+  /** Declarations of a page's `style` attributes, by line. */
+  styleAttrDeclsAtLine(rel: string, line: number): Row[] {
+    const attrs = new Set(this.ofDoc(this.attributes, rel).filter((a) => a['attributeKind'] === 'STYLE').map((a) => a['htmlAttributeUniqueHash']));
+    return this.declarations.filter((d) => attrs.has(d['htmlAttributeLinkHash']!) && Number(d['startLine']) === line).sort((a, b) => Number(a['position']) - Number(b['position']));
+  }
+
+  refsOfDecl(decl: Row): Row[] {
+    return this.valueRefs.filter((v) => v['ownerDeclarationLinkHash'] === decl['cssDeclarationUniqueHash']).sort((a, b) => Number(a['position']) - Number(b['position']));
+  }
+
+  refsOfRule(rule: Row): Row[] {
+    return this.valueRefs.filter((v) => v['ownerRuleLinkHash'] === rule['cssRuleUniqueHash']).sort((a, b) => Number(a['position']) - Number(b['position']));
+  }
+
+  valueRefsOfSheet(sheetRef: string, kind?: string): Row[] {
+    const key = this.sheet(sheetRef)['cssStylesheetUniqueHash'];
+    return this.valueRefs.filter((v) => v['stylesheetLinkHash'] === key && (kind === undefined || v['referenceKind'] === kind));
+  }
+
+  cssGapsOf(sheetRef: string): Row[] {
+    const key = this.sheet(sheetRef)['cssStylesheetUniqueHash'];
+    return this.cssGaps.filter((g) => g['stylesheetLinkHash'] === key);
+  }
+}
+
+/** `a=b c=d` of the columns named, for a failure message. */
+export function show(row: Row | undefined, ...cols: string[]): string {
+  if (row === undefined) return '<no row>';
+  return cols.map((c) => `${c}=${JSON.stringify(row[c] ?? '')}`).join(' ');
+}
diff --git a/parser/src/test/web-torture.ts b/parser/src/test/web-torture.ts
new file mode 100644
index 000000000..9261577a7
--- /dev/null
+++ b/parser/src/test/web-torture.ts
@@ -0,0 +1,126 @@
+/**
+ * WEB TORTURE — is the HTML/CSS IR valid, correct, and does it carry the join keys?
+ *
+ *     npx tsx src/test/web-torture.ts            # run every check, exit 1 on a DEFECT
+ *     npx tsx src/test/web-torture.ts --keep     # keep the IR directory for inspection
+ *     npx tsx src/test/web-torture.ts --only css # run the checks whose name contains "css"
+ *
+ * The parser's contract is "emit facts an engine can join". This suite is the fact-side
+ * half of that contract: it runs the real analyzer over `src/test-data/web/torture`, a
+ * tree written to hold every edge case a web project throws at a static reader, loads
+ * the relations back, and asserts — in plain TypeScript, no engine — that each case
+ * produced the rows, columns and keys the documented joins need:
+ *
+ *   html_reference.resolvedFilePath  = css_stylesheet.filePath / html_document.filePath
+ *   css_value_reference (IMPORT)     = css_stylesheet.filePath            (the @import closure)
+ *   html_class_reference.className   = css_selector_part.name (CLASS)     (escapes decoded)
+ *   html_element.id / tagName        = css_selector_part.name (ID / TYPE)
+ *   css_value_reference.name         = css_declaration.property / css_rule.name
+ *   html_attribute (FOR, ID_REFERENCE, ARIA, NAME, fragment hrefs) = html_element.id
+ *
+ * Every check carries a verdict for when it fails:
+ *   DEFECT  the IR is wrong or missing something the parser could have read — fails the run
+ *   GAP     the IR cannot yet express it (a grammar limit or an unmodelled construct) — reported
+ *   LIMIT   nothing static can know this — reported, so the list of impossibles is explicit
+ *
+ * `web-tests.ts` is the specification suite with its golden; this file is the adversary.
+ */
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+
+import { WEB_CSV_FILES } from '@/constants/web-constants';
+import { WebProjectAnalyzer } from '@/workflows/web/web-project-analyzer';
+
+import { CHECKS, PROBES } from './web-torture-checks';
+import { Check, Ir, Row, Verdict } from './web-torture-ir';
+
+const ROOT = path.resolve('src/test-data/web/torture');
+const KEEP = process.argv.includes('--keep');
+const ONLY = process.argv.includes('--only') ? process.argv[process.argv.indexOf('--only') + 1] ?? '' : '';
+
+async function analyse(outputDir: string): Promise<void> {
+  const silence = console.log;
+  console.log = () => {};
+  try {
+    await new WebProjectAnalyzer(outputDir).analyzeWebFiles(
+      [{ name: 'torture', path: ROOT, language: 'UNKNOWN' as never, hasSourceFiles: false }],
+      'WEB_TORTURE_VERSION'
+    );
+  } finally {
+    console.log = silence;
+  }
+}
+
+function tsv(fp: string): Row[] {
+  if (!fs.existsSync(fp)) return [];
+  const lines = fs.readFileSync(fp, 'utf-8').split('\n').filter(Boolean);
+  if (lines.length === 0) return [];
+  const head = lines[0]!.split('\t');
+  return lines.slice(1).map((l) => {
+    const cells = l.split('\t').map(unquote);
+    return Object.fromEntries(head.map((h, i) => [h, cells[i] ?? ''])) as Row;
+  });
+}
+
+/** The parser quotes a cell holding a quote and doubles the inner ones (RFC 4180). */
+function unquote(cell: string): string {
+  return cell.length >= 2 && cell.startsWith('"') && cell.endsWith('"') ? cell.slice(1, -1).replace(/""/g, '"') : cell;
+}
+
+async function main(): Promise<number> {
+  const irDir = fs.mkdtempSync(path.join(os.tmpdir(), 'axiom-web-torture-'));
+  const t0 = Date.now();
+  await analyse(irDir);
+  console.log(`── analyzer: ${((Date.now() - t0) / 1000).toFixed(2)}s over ${path.relative(process.cwd(), ROOT)}`);
+  const tables: Record<string, Row[]> = {};
+  for (const [key, file] of Object.entries(WEB_CSV_FILES)) {
+    tables[key] = tsv(path.join(irDir, file));
+    if (tables[key]!.length > 0) console.log(`   ${file.padEnd(36)} ${String(tables[key]!.length).padStart(6)} rows`);
+  }
+  const ir = new Ir(ROOT, tables);
+
+  let defects = 0;
+  let ran = 0;
+  const findings: Array<{ verdict: Verdict; name: string; detail: string; note?: string }> = [];
+  const run = (label: string, checks: Check[]): void => {
+    console.log(`\n── ${label}`);
+    for (const c of checks) {
+      if (ONLY !== '' && !c.name.includes(ONLY)) continue;
+      ran += 1;
+      const failures: string[] = [];
+      try {
+        c.run(ir, (m) => failures.push(m));
+      } catch (e) {
+        failures.push(`threw ${e instanceof Error ? e.message : String(e)}`);
+      }
+      if (failures.length === 0) {
+        console.log(`  ✓ ${c.name}`);
+        continue;
+      }
+      if (c.verdict === 'DEFECT') {
+        defects += 1;
+        console.log(`  ✗ ${c.name}`);
+        for (const f of failures) console.log(`      ${f}`);
+      } else {
+        console.log(`  ${c.verdict === 'GAP' ? '◌' : '○'} ${c.name}  [${c.verdict}]`);
+        findings.push({ verdict: c.verdict, name: c.name, detail: failures.join('; '), note: c.note });
+      }
+    }
+  };
+  run('IR over the torture tree', CHECKS);
+  run('probes (the parsers on micro-inputs)', PROBES);
+
+  if (findings.length > 0) {
+    console.log('\n── findings: what the IR does not yet carry (GAP) or no static reader can (LIMIT)');
+    for (const f of findings) {
+      console.log(`  [${f.verdict}] ${f.name}\n      ${f.detail}${f.note ? `\n      → ${f.note}` : ''}`);
+    }
+  }
+  if (KEEP) console.log(`\nIR kept at ${irDir}`);
+  else fs.rmSync(irDir, { recursive: true, force: true });
+  console.log(defects === 0 ? `\nOK  ${ran} check(s), ${findings.length} finding(s)` : `\nFAIL  ${defects} defect(s) in ${ran} check(s), ${findings.length} finding(s)`);
+  return defects === 0 ? 0 : 1;
+}
+
+main().then((code) => process.exit(code)).catch((e) => { console.error(e); process.exit(2); });
diff --git a/parser/src/utils/web/handler-calls.ts b/parser/src/utils/web/handler-calls.ts
new file mode 100644
index 000000000..824272130
--- /dev/null
+++ b/parser/src/utils/web/handler-calls.ts
@@ -0,0 +1,69 @@
+import * as ts from 'typescript';
+
+/** One call found in an event-handler attribute's text. */
+export interface HandlerCall {
+  readonly calleeName: string;
+  readonly receiverText: string;
+  readonly calleeText: string;
+  readonly argumentCount: number;
+  readonly isNew: boolean;
+  /** 0-based offset of the call's first token, within the handler text. */
+  readonly offset: number;
+}
+
+export interface HandlerParse {
+  readonly calls: HandlerCall[];
+  /** The first syntax error's message and offset, when the text is not a script. */
+  readonly error?: { message: string; offset: number };
+}
+
+/**
+ * Every call written in a handler's text, read by the TypeScript compiler's syntax
+ * layer as a JavaScript script — the same reader the JavaScript front end uses, so
+ * `onclick="a.b(c)"` is read exactly as `a.b(c)` in a `.js` file would be.
+ *
+ * Every call is reported, nested ones too, in source order: `if (ok()) go()` is two.
+ * A text that does not parse still reports the calls the recovered tree holds, with
+ * `error` set so the caller can record the gap; a template placeholder in a handler
+ * (`onclick="{{ fn }}"`) is the common case.
+ */
+export function handlerCallsOf(text: string): HandlerParse {
+  const sf = ts.createSourceFile('handler.js', text, ts.ScriptTarget.Latest, true, ts.ScriptKind.JS);
+  const calls: HandlerCall[] = [];
+  const visit = (node: ts.Node): void => {
+    if (ts.isCallExpression(node) || ts.isNewExpression(node)) {
+      const callee = node.expression;
+      let calleeName = '';
+      let receiverText = '';
+      if (ts.isIdentifier(callee)) {
+        calleeName = callee.text;
+      } else if (ts.isPropertyAccessExpression(callee)) {
+        calleeName = callee.name.text;
+        receiverText = callee.expression.getText(sf);
+      } else if (ts.isElementAccessExpression(callee)) {
+        receiverText = callee.expression.getText(sf);
+      }
+      calls.push({
+        calleeName,
+        receiverText,
+        calleeText: callee.getText(sf),
+        argumentCount: node.arguments?.length ?? 0,
+        isNew: ts.isNewExpression(node),
+        offset: node.getStart(sf),
+      });
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(sf);
+  const diagnostics = (sf as unknown as { parseDiagnostics?: readonly ts.Diagnostic[] }).parseDiagnostics ?? [];
+  const first = diagnostics[0];
+  return first === undefined
+    ? { calls }
+    : {
+      calls,
+      error: {
+        message: ts.flattenDiagnosticMessageText(first.messageText, ' '),
+        offset: first.start ?? 0,
+      },
+    };
+}
diff --git a/parser/src/utils/web/index.ts b/parser/src/utils/web/index.ts
new file mode 100644
index 000000000..0710a619d
--- /dev/null
+++ b/parser/src/utils/web/index.ts
@@ -0,0 +1,8 @@
+export { handlerCallsOf } from '@/utils/web/handler-calls';
+export type { HandlerCall, HandlerParse } from '@/utils/web/handler-calls';
+export { LineIndex, mapEmbeddedPosition } from '@/utils/web/line-index';
+export { classifyUrl, resolveUrlToFile, TEMPLATE_MARKER, WEB_ROOT_DIRECTORIES } from '@/utils/web/url-reference';
+export type { ClassifiedUrl } from '@/utils/web/url-reference';
+export { namedChildrenThroughErrors, parseWithTreeSitter } from '@/utils/web/tree-sitter-parse';
+export { MEMBER_PATH, names, readDirective, readJsExpression, readLoop, templateFlavourOf } from '@/utils/web/template-expressions';
+export type { DirectiveReading, ExpressionReading, TemplateFlavour } from '@/utils/web/template-expressions';
diff --git a/parser/src/utils/web/line-index.ts b/parser/src/utils/web/line-index.ts
new file mode 100644
index 000000000..ef8c07405
--- /dev/null
+++ b/parser/src/utils/web/line-index.ts
@@ -0,0 +1,64 @@
+/**
+ * Offset → (line, column) for one text, 1-based on both axes, matching every other
+ * front end's convention. Built once per file: the HTML parser asks for hundreds of
+ * positions per page and a `slice().split('\n')` per ask is quadratic.
+ */
+export class LineIndex {
+  private readonly starts: number[] = [0];
+
+  constructor(private readonly text: string) {
+    for (let i = 0; i < text.length; i += 1) {
+      if (text.charCodeAt(i) === 10) {
+        this.starts.push(i + 1);
+      }
+    }
+  }
+
+  /** 1-based line and column of a 0-based offset. An offset past the end lands on the last line. */
+  positionOf(offset: number): { line: number; column: number } {
+    const clamped = Math.max(0, Math.min(offset, this.text.length));
+    let lo = 0;
+    let hi = this.starts.length - 1;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (this.starts[mid]! <= clamped) {
+        lo = mid;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    return { line: lo + 1, column: clamped - this.starts[lo]! + 1 };
+  }
+
+  /** The number of lines, counting a final line without a newline and not counting a trailing one. */
+  get lineCount(): number {
+    if (this.text.length === 0) {
+      return 0;
+    }
+    return this.text.endsWith('\n') ? this.starts.length - 1 : this.starts.length;
+  }
+
+  /** The longest line, in characters. */
+  get longestLine(): number {
+    let longest = 0;
+    for (let i = 0; i < this.starts.length; i += 1) {
+      const end = i + 1 < this.starts.length ? this.starts[i + 1]! - 1 : this.text.length;
+      longest = Math.max(longest, end - this.starts[i]!);
+    }
+    return longest;
+  }
+}
+
+/**
+ * A position inside EMBEDDED text (a `<style>` body, a `style` attribute), mapped to the
+ * host file: the embedded text's line 1 is the host's `line`, and only on that first line
+ * does the host's column offset apply.
+ */
+export function mapEmbeddedPosition(
+  host: { line: number; column: number },
+  inner: { line: number; column: number }
+): { line: number; column: number } {
+  return inner.line === 1
+    ? { line: host.line, column: host.column + inner.column - 1 }
+    : { line: host.line + inner.line - 1, column: inner.column };
+}
diff --git a/parser/src/utils/web/template-expressions.ts b/parser/src/utils/web/template-expressions.ts
new file mode 100644
index 000000000..c970648c1
--- /dev/null
+++ b/parser/src/utils/web/template-expressions.ts
@@ -0,0 +1,244 @@
+import * as ts from 'typescript';
+
+import { HtmlTemplateDialect } from '@/enums/html/HtmlTemplateDialect';
+import { HtmlTemplateExpressionKind } from '@/enums/html/HtmlTemplateExpressionKind';
+
+/** Which template dialects a page shows markers of, decided once per file from its text. */
+export interface TemplateFlavour {
+  readonly vue: boolean;
+  readonly alpine: boolean;
+  readonly angular: boolean;
+  readonly thymeleaf: boolean;
+  readonly htmx: boolean;
+  readonly handlebars: boolean;
+  readonly jinja: boolean;
+}
+
+/**
+ * The dialect markers of a whole page, read before the walk so an ambiguous directive is
+ * decided by the company it keeps: `@click` is Alpine beside `x-data` and Vue otherwise,
+ * `#name` is a Vue slot beside `v-` directives and an Angular reference beside `*ngIf`.
+ */
+export function templateFlavourOf(text: string): TemplateFlavour {
+  return {
+    // `v-` directives name Vue outright; `:prop`, `@event` and `#slot` are shared with Alpine
+    // and are decided by whichever of the two has its own markers in the page.
+    vue: /\s(?:v-[a-z]|v-bind:|v-on:|v-slot)/.test(text),
+    alpine: /\sx-(?:data|on:|bind:|show|if|for|model|text|init|cloak|ref|effect)\b/.test(text),
+    angular: /\s(?:\*ng[A-Z]|\[[\w.()-]+\]\s*=|\([\w.-]+\)\s*=|ng-[a-z]+\s*=)/.test(text),
+    thymeleaf: /\sth:[a-z]/.test(text),
+    htmx: /\shx-[a-z]/.test(text),
+    handlebars: /\{\{[#/>^]/.test(text),
+    jinja: /\{%/.test(text),
+  };
+}
+
+/** How one directive attribute reads: its dialect, what it does, and what it was applied to. */
+export interface DirectiveReading {
+  readonly dialect: HtmlTemplateDialect;
+  readonly kind: HtmlTemplateExpressionKind;
+  /** The event, property or slot the directive names; empty when it names none. */
+  readonly argument: string;
+  /** Dotted suffixes: `enter`, `prevent`, `lazy`. */
+  readonly modifiers: readonly string[];
+  /** Whether the value is JavaScript-shaped and worth reading with the TypeScript syntax layer. */
+  readonly javascript: boolean;
+}
+
+const VUE_CONDITIONS = new Set(['v-if', 'v-else-if', 'v-show']);
+const ALPINE_DIRECTIVES = new Set(['x-data', 'x-init', 'x-effect', 'x-cloak', 'x-ignore', 'x-id', 'x-teleport', 'x-modelable', 'x-transition']);
+const HTMX_REQUESTS = new Set(['get', 'post', 'put', 'patch', 'delete']);
+const THYMELEAF_BINDINGS = new Set(['href', 'src', 'action', 'value', 'attr', 'class', 'classappend', 'style', 'text', 'utext', 'alt', 'title', 'placeholder', 'name', 'id', 'with', 'object', 'replace', 'insert', 'include', 'fragment', 'switch', 'case']);
+
+/**
+ * Reads an attribute NAME as a template directive, or returns `undefined` for a plain
+ * attribute. The name is as written: dialect directives are case-sensitive even where
+ * HTML is not (`*ngIf`, `[ngModel]`), so the caller must not lowercase it first.
+ */
+export function readDirective(name: string, flavour: TemplateFlavour): DirectiveReading | undefined {
+  const split = (rest: string): { argument: string; modifiers: string[] } => {
+    const [argument = '', ...modifiers] = rest.split('.');
+    return { argument, modifiers: modifiers.filter((m) => m !== '') };
+  };
+  const vueOrAlpine = flavour.alpine && !flavour.vue ? HtmlTemplateDialect.ALPINE : HtmlTemplateDialect.VUE;
+  let m: RegExpExecArray | null;
+  // Vue and Alpine share `@event` and `:prop`.
+  if ((m = /^@([\w-]+)((?:\.[\w-]+)*)$/.exec(name)) !== null) {
+    return { dialect: vueOrAlpine, kind: HtmlTemplateExpressionKind.EVENT_HANDLER, ...split(m[1]! + m[2]!), javascript: true };
+  }
+  if ((m = /^v-on:([\w-]+)((?:\.[\w-]+)*)$/.exec(name)) !== null) {
+    return { dialect: HtmlTemplateDialect.VUE, kind: HtmlTemplateExpressionKind.EVENT_HANDLER, ...split(m[1]! + m[2]!), javascript: true };
+  }
+  if ((m = /^x-on:([\w-]+)((?:\.[\w-]+)*)$/.exec(name)) !== null) {
+    return { dialect: HtmlTemplateDialect.ALPINE, kind: HtmlTemplateExpressionKind.EVENT_HANDLER, ...split(m[1]! + m[2]!), javascript: true };
+  }
+  if ((m = /^(?::|v-bind:|\.)([\w-]+)((?:\.[\w-]+)*)$/.exec(name)) !== null) {
+    return { dialect: name.startsWith('v-bind') ? HtmlTemplateDialect.VUE : vueOrAlpine, kind: HtmlTemplateExpressionKind.BINDING, ...split(m[1]! + m[2]!), javascript: true };
+  }
+  if ((m = /^x-bind:([\w-]+)((?:\.[\w-]+)*)$/.exec(name)) !== null) {
+    return { dialect: HtmlTemplateDialect.ALPINE, kind: HtmlTemplateExpressionKind.BINDING, ...split(m[1]! + m[2]!), javascript: true };
+  }
+  if ((m = /^(?:#|v-slot:)([\w-]*)$/.exec(name)) !== null) {
+    if (name.startsWith('#') && flavour.angular && !flavour.vue) {
+      return { dialect: HtmlTemplateDialect.ANGULAR, kind: HtmlTemplateExpressionKind.REFERENCE, argument: m[1]!, modifiers: [], javascript: false };
+    }
+    return { dialect: HtmlTemplateDialect.VUE, kind: HtmlTemplateExpressionKind.SLOT, argument: m[1]!, modifiers: [], javascript: false };
+  }
+  if ((m = /^(v-[a-z-]+)((?:\.[\w-]+)*)$/.exec(name)) !== null) {
+    const directive = m[1]!;
+    const modifiers = m[2]!.split('.').filter((x) => x !== '');
+    const kind = VUE_CONDITIONS.has(directive) ? HtmlTemplateExpressionKind.CONDITION
+      : directive === 'v-for' ? HtmlTemplateExpressionKind.LOOP
+        : directive === 'v-model' ? HtmlTemplateExpressionKind.MODEL
+          : directive === 'v-text' || directive === 'v-html' ? HtmlTemplateExpressionKind.BINDING
+            : HtmlTemplateExpressionKind.DIRECTIVE;
+    return { dialect: HtmlTemplateDialect.VUE, kind, argument: kind === HtmlTemplateExpressionKind.BINDING ? directive.slice(2) : '', modifiers, javascript: directive !== 'v-else' && directive !== 'v-pre' && directive !== 'v-cloak' && directive !== 'v-once' };
+  }
+  if ((m = /^(x-[a-z-]+)((?:\.[\w-]+)*)$/.exec(name)) !== null) {
+    const directive = m[1]!;
+    const modifiers = m[2]!.split('.').filter((x) => x !== '');
+    const kind = directive === 'x-if' || directive === 'x-show' ? HtmlTemplateExpressionKind.CONDITION
+      : directive === 'x-for' ? HtmlTemplateExpressionKind.LOOP
+        : directive === 'x-model' ? HtmlTemplateExpressionKind.MODEL
+          : directive === 'x-ref' ? HtmlTemplateExpressionKind.REFERENCE
+            : directive === 'x-text' || directive === 'x-html' ? HtmlTemplateExpressionKind.BINDING
+              : ALPINE_DIRECTIVES.has(directive) || flavour.alpine ? HtmlTemplateExpressionKind.DIRECTIVE : undefined;
+    if (kind === undefined) {
+      return undefined;
+    }
+    return { dialect: HtmlTemplateDialect.ALPINE, kind, argument: kind === HtmlTemplateExpressionKind.BINDING ? directive.slice(2) : '', modifiers, javascript: kind !== HtmlTemplateExpressionKind.REFERENCE && directive !== 'x-cloak' && directive !== 'x-ignore' && directive !== 'x-transition' };
+  }
+  // Angular.
+  if ((m = /^\(([\w.-]+)\)$/.exec(name)) !== null) {
+    return { dialect: HtmlTemplateDialect.ANGULAR, kind: HtmlTemplateExpressionKind.EVENT_HANDLER, argument: m[1]!, modifiers: [], javascript: true };
+  }
+  if ((m = /^\[\(([\w.-]+)\)\]$/.exec(name)) !== null) {
+    return { dialect: HtmlTemplateDialect.ANGULAR, kind: HtmlTemplateExpressionKind.MODEL, argument: m[1]!, modifiers: [], javascript: true };
+  }
+  if ((m = /^\[([\w.-]+)\]$/.exec(name)) !== null) {
+    return { dialect: HtmlTemplateDialect.ANGULAR, kind: HtmlTemplateExpressionKind.BINDING, argument: m[1]!, modifiers: [], javascript: true };
+  }
+  if ((m = /^\*(\w+)$/.exec(name)) !== null) {
+    const directive = m[1]!;
+    const kind = directive === 'ngIf' ? HtmlTemplateExpressionKind.CONDITION : directive === 'ngFor' ? HtmlTemplateExpressionKind.LOOP : HtmlTemplateExpressionKind.DIRECTIVE;
+    return { dialect: HtmlTemplateDialect.ANGULAR, kind, argument: '', modifiers: [], javascript: true };
+  }
+  if ((m = /^ng-([a-z-]+)$/.exec(name)) !== null) {
+    const directive = m[1]!;
+    const kind = /^(click|dblclick|change|submit|keyup|keydown|keypress|focus|blur|mouseenter|mouseleave|mousedown|mouseup|input)$/.test(directive) ? HtmlTemplateExpressionKind.EVENT_HANDLER
+      : /^(if|show|hide|switch)$/.test(directive) ? HtmlTemplateExpressionKind.CONDITION
+        : directive === 'repeat' ? HtmlTemplateExpressionKind.LOOP
+          : directive === 'model' ? HtmlTemplateExpressionKind.MODEL
+            : /^(bind|bind-html|src|href|class|style|value|disabled|checked|selected|readonly|required|open)$/.test(directive) ? HtmlTemplateExpressionKind.BINDING
+              : HtmlTemplateExpressionKind.DIRECTIVE;
+    return { dialect: HtmlTemplateDialect.ANGULAR, kind, argument: kind === HtmlTemplateExpressionKind.EVENT_HANDLER || kind === HtmlTemplateExpressionKind.BINDING ? directive : '', modifiers: [], javascript: true };
+  }
+  // Thymeleaf: its expressions (`${…}`, `*{…}`, `@{…}`) are not JavaScript.
+  if ((m = /^th:([\w-]+)$/.exec(name)) !== null) {
+    const directive = m[1]!.toLowerCase();
+    const kind = directive === 'if' || directive === 'unless' ? HtmlTemplateExpressionKind.CONDITION
+      : directive === 'each' ? HtmlTemplateExpressionKind.LOOP
+        : directive === 'field' ? HtmlTemplateExpressionKind.MODEL
+          : directive.startsWith('on') ? HtmlTemplateExpressionKind.EVENT_HANDLER
+            : THYMELEAF_BINDINGS.has(directive) ? HtmlTemplateExpressionKind.BINDING
+              : HtmlTemplateExpressionKind.DIRECTIVE;
+    const argument = kind === HtmlTemplateExpressionKind.EVENT_HANDLER ? directive.slice(2) : kind === HtmlTemplateExpressionKind.BINDING ? directive : '';
+    return { dialect: HtmlTemplateDialect.THYMELEAF, kind, argument, modifiers: [], javascript: kind === HtmlTemplateExpressionKind.EVENT_HANDLER };
+  }
+  // htmx: attribute values are URLs, selectors and keywords, never code.
+  if ((m = /^hx-([\w-]+)$/.exec(name)) !== null) {
+    const directive = m[1]!.toLowerCase();
+    return { dialect: HtmlTemplateDialect.HTMX, kind: HTMX_REQUESTS.has(directive) ? HtmlTemplateExpressionKind.REQUEST : HtmlTemplateExpressionKind.DIRECTIVE, argument: HTMX_REQUESTS.has(directive) ? directive : '', modifiers: [], javascript: false };
+  }
+  return undefined;
+}
+
+/** What a JavaScript-shaped expression refers to. */
+export interface ExpressionReading {
+  /** Names of the functions called, `select` for `select(item)`, `log` for `console.log(x)`. */
+  readonly callees: Set<string>;
+  /** Free identifiers read: `item`, `current`; not property names, not parameters the expression declares. */
+  readonly identifiers: Set<string>;
+  /** Set when the text does not parse as JavaScript; the sets then hold what the recovered tree gave. */
+  readonly error?: string;
+}
+
+/**
+ * Reads a template expression with the TypeScript syntax layer. A binding is wrapped in
+ * parentheses first, so an object literal (`:class="{ active: on }"`) is an expression and
+ * not a block; a handler is read as statements, since Vue allows `count++; log(x)`.
+ */
+export function readJsExpression(text: string, shape: 'expression' | 'statements'): ExpressionReading {
+  const source = shape === 'expression' ? `(${text})` : text;
+  const sf = ts.createSourceFile('template.js', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.JS);
+  const callees = new Set<string>();
+  const identifiers = new Set<string>();
+  const declared = new Set<string>();
+  const visit = (node: ts.Node): void => {
+    if (ts.isCallExpression(node) || ts.isNewExpression(node)) {
+      const callee = node.expression;
+      if (ts.isIdentifier(callee)) callees.add(callee.text);
+      else if (ts.isPropertyAccessExpression(callee)) callees.add(callee.name.text);
+    }
+    if (ts.isParameter(node) && ts.isIdentifier(node.name)) {
+      declared.add(node.name.text);
+    }
+    if (ts.isIdentifier(node)) {
+      const parent = node.parent;
+      const isPropertyName = (ts.isPropertyAccessExpression(parent) && parent.name === node)
+        || (ts.isPropertyAssignment(parent) && parent.name === node)
+        || (ts.isMethodDeclaration(parent) && parent.name === node)
+        || (ts.isParameter(parent) && parent.name === node)
+        || ts.isBindingElement(parent) && parent.propertyName === node;
+      if (!isPropertyName && !node.text.startsWith('$')) {
+        identifiers.add(node.text);
+      }
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(sf);
+  for (const d of declared) identifiers.delete(d);
+  const diagnostics = (sf as unknown as { parseDiagnostics?: readonly ts.Diagnostic[] }).parseDiagnostics ?? [];
+  const first = diagnostics[0];
+  return first === undefined ? { callees, identifiers } : { callees, identifiers, error: ts.flattenDiagnosticMessageText(first.messageText, ' ') };
+}
+
+/** A loop directive split into the names it declares and the expression it iterates. */
+export function readLoop(dialect: HtmlTemplateDialect, text: string): { declares: string[]; source: string } {
+  let m: RegExpExecArray | null;
+  if (dialect === HtmlTemplateDialect.ANGULAR) {
+    // `let item of items; let i = index; trackBy: fn` or AngularJS `item in items track by item.id`
+    if ((m = /let\s+([\w$]+)\s+of\s+([\s\S]+?)(?:;|$)/.exec(text)) !== null) {
+      const declares = [m[1]!];
+      for (const extra of text.matchAll(/let\s+([\w$]+)\s*=\s*\w+/g)) declares.push(extra[1]!);
+      return { declares, source: m[2]!.trim() };
+    }
+    if ((m = /^\s*\(?([^)]*?)\)?\s+in\s+([\s\S]+?)(?:\s+track\s+by\b|$)/.exec(text)) !== null) {
+      return { declares: names(m[1]!), source: m[2]!.trim() };
+    }
+    return { declares: [], source: text.trim() };
+  }
+  if (dialect === HtmlTemplateDialect.THYMELEAF) {
+    if ((m = /^\s*([\w$]+)(?:\s*,\s*([\w$]+))?\s*:\s*([\s\S]+)$/.exec(text)) !== null) {
+      return { declares: m[2] === undefined ? [m[1]!] : [m[1]!, m[2]], source: m[3]!.trim() };
+    }
+    return { declares: [], source: text.trim() };
+  }
+  // Vue and Alpine: `item in items`, `(item, index) in items`, `{ id, name } of items`
+  if ((m = /^\s*\(?([\s\S]*?)\)?\s+(?:in|of)\s+([\s\S]+)$/.exec(text)) !== null) {
+    return { declares: names(m[1]!), source: m[2]!.trim() };
+  }
+  return { declares: [], source: text.trim() };
+}
+
+/** The names a loop alias list or a slot-props pattern introduces: `(item, index)`, `{ id, name }`, `[a, b]`. */
+export function names(pattern: string): string[] {
+  const out: string[] = [];
+  for (const m of pattern.replace(/[{}[\]()]/g, ' ').matchAll(/(?:^|[\s,:])([A-Za-z_$][\w$]*)(?=\s*(?:[,=]|$))/g)) {
+    out.push(m[1]!);
+  }
+  return out;
+}
+
+/** A bare identifier or member path, which a framework CALLS as the handler: `save`, `app.submit`. */
+export const MEMBER_PATH = /^\s*[A-Za-z_$][\w$]*(?:\s*\.\s*[A-Za-z_$][\w$]*)*\s*$/;
diff --git a/parser/src/utils/web/tree-sitter-parse.ts b/parser/src/utils/web/tree-sitter-parse.ts
new file mode 100644
index 000000000..d8eebc912
--- /dev/null
+++ b/parser/src/utils/web/tree-sitter-parse.ts
@@ -0,0 +1,44 @@
+import Parser from 'tree-sitter';
+
+import { WEB_CALLBACK_PARSE_THRESHOLD, WEB_PARSE_CHUNK_SIZE } from '@/constants/web-constants';
+import { withRetry } from '@/utils/retry-decorator';
+
+/**
+ * Parses `text` with a tree-sitter parser, streaming it in chunks past the runtime's
+ * single-buffer ceiling, exactly as the Java and Python parsers do. The web front end
+ * meets the ceiling routinely: a minified stylesheet is one line of hundreds of
+ * kilobytes, and a generated page is larger still.
+ *
+ * Positions on the returned tree are UTF-16 code-unit offsets into `text`, the same
+ * units `String.prototype.indexOf` uses, so `LineIndex` maps them without conversion.
+ */
+export function parseWithTreeSitter(parser: Parser, text: string): Parser.Tree {
+  const parse = withRetry(
+    (code: string): Parser.Tree => {
+      if (code.length <= WEB_CALLBACK_PARSE_THRESHOLD) {
+        return parser.parse(code);
+      }
+      return parser.parse((index: number) => (index >= code.length
+        ? null
+        : code.substring(index, Math.min(index + WEB_PARSE_CHUNK_SIZE, code.length))));
+    },
+    { maxAttempts: 3, delayMs: 100, exponentialBackoff: true }
+  );
+  return parse(text);
+}
+
+/** The named children of a node, with an ERROR node's own named children lifted into the list. */
+export function namedChildrenThroughErrors(node: Parser.SyntaxNode): Parser.SyntaxNode[] {
+  const out: Parser.SyntaxNode[] = [];
+  const visit = (n: Parser.SyntaxNode): void => {
+    for (const child of n.namedChildren) {
+      if (child.type === 'ERROR') {
+        visit(child);
+      } else {
+        out.push(child);
+      }
+    }
+  };
+  visit(node);
+  return out;
+}
diff --git a/parser/src/utils/web/url-reference.ts b/parser/src/utils/web/url-reference.ts
new file mode 100644
index 000000000..3e14decca
--- /dev/null
+++ b/parser/src/utils/web/url-reference.ts
@@ -0,0 +1,181 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import { WebUrlKind } from '@/enums/web/WebUrlKind';
+
+/** A URL as a page or a stylesheet wrote it, classified and split. */
+export interface ClassifiedUrl {
+  readonly kind: WebUrlKind;
+  /** The part before `?` and `#`, as written (percent-encoding kept). */
+  readonly path: string;
+  /** After `?`, before `#`; empty when absent. */
+  readonly query: string;
+  /** After `#`; empty when absent. */
+  readonly fragment: string;
+}
+
+/** What a page's `<base href>` contributes: the kind and path every relative URL is joined onto. */
+export interface BaseUrl {
+  readonly kind: WebUrlKind;
+  readonly path: string;
+}
+
+/** `base` joined with a relative URL path, as a browser resolves it: `/app/` + `page.html` is `/app/page.html`. */
+export function joinUrlPath(base: string, relative: string): string {
+  const directory = base.endsWith('/') ? base : base.slice(0, base.lastIndexOf('/') + 1);
+  return directory + relative;
+}
+
+/** A relative URL re-rooted on the page's `<base href>`, when there is one; any other URL as classified. */
+export function applyBase(classified: ClassifiedUrl, base: BaseUrl | undefined): ClassifiedUrl {
+  return base !== undefined && classified.kind === WebUrlKind.RELATIVE
+    ? { ...classified, kind: base.kind, path: joinUrlPath(base.path, classified.path) }
+    : classified;
+}
+
+export const TEMPLATE_MARKER = /\{\{|\{%|<%|<\?|\$\{|@\{|\{#/;
+
+/**
+ * Directories a server conventionally serves as `/`: a root-relative URL is tried under
+ * each of these beneath every directory between the file and the project root. `dist`,
+ * `build` and `out` are not here because the walks never enter them.
+ */
+export const WEB_ROOT_DIRECTORIES = ['public', 'static', 'www', 'wwwroot', 'web', 'htdocs', 'site', 'assets', 'src', 'app', 'resources'] as const;
+const SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+
+/**
+ * Classifies a URL from its text alone. A template marker anywhere in it makes it a
+ * TEMPLATE_EXPRESSION before any other rule applies: `{{ static('x.css') }}` names
+ * nothing on disk, and `/static/{{ name }}.js` does not either.
+ */
+export function classifyUrl(raw: string): ClassifiedUrl {
+  const url = raw.trim();
+  if (url === '') {
+    return { kind: WebUrlKind.EMPTY, path: '', query: '', fragment: '' };
+  }
+  if (TEMPLATE_MARKER.test(url)) {
+    return { kind: WebUrlKind.TEMPLATE_EXPRESSION, path: url, query: '', fragment: '' };
+  }
+  const { base, query, fragment } = split(url);
+  if (url.startsWith('#')) {
+    return { kind: WebUrlKind.FRAGMENT, path: '', query: '', fragment };
+  }
+  if (url.startsWith('//')) {
+    return { kind: WebUrlKind.PROTOCOL_RELATIVE, path: base, query, fragment };
+  }
+  const scheme = SCHEME.exec(url)?.[0].slice(0, -1).toLowerCase();
+  if (scheme !== undefined) {
+    if (scheme === 'http' || scheme === 'https') {
+      return { kind: WebUrlKind.ABSOLUTE, path: base, query, fragment };
+    }
+    if (scheme === 'data') {
+      return { kind: WebUrlKind.DATA_URI, path: '', query: '', fragment: '' };
+    }
+    if (scheme === 'javascript') {
+      return { kind: WebUrlKind.JAVASCRIPT_URI, path: '', query: '', fragment: '' };
+    }
+    // `C:\x` is a Windows path, not a scheme, but a page never names one; a one-letter
+    // scheme is still OTHER_SCHEME here because `file:` and `about:` are what appear.
+    return { kind: WebUrlKind.OTHER_SCHEME, path: base, query, fragment };
+  }
+  if (url.startsWith('/')) {
+    return { kind: WebUrlKind.ROOT_RELATIVE, path: base, query, fragment };
+  }
+  return { kind: WebUrlKind.RELATIVE, path: base, query, fragment };
+}
+
+function split(url: string): { base: string; query: string; fragment: string } {
+  let rest = url;
+  let fragment = '';
+  const hash = rest.indexOf('#');
+  if (hash >= 0) {
+    fragment = rest.slice(hash + 1);
+    rest = rest.slice(0, hash);
+  }
+  let query = '';
+  const q = rest.indexOf('?');
+  if (q >= 0) {
+    query = rest.slice(q + 1);
+    rest = rest.slice(0, q);
+  }
+  return { base: rest, query, fragment };
+}
+
+/**
+ * The file a RELATIVE or ROOT_RELATIVE URL names, when it exists; `''` otherwise.
+ *
+ * A relative URL resolves against the referring file's directory, as a browser does.
+ * A root-relative one resolves against the served root, which the parser cannot know:
+ * it tries the project root, every directory between the file and that root, and the
+ * conventionally served directory names (`public/`, `static/`, `www/`, …) under each of
+ * those, and accepts the answer only when EXACTLY ONE of them holds the file —
+ * `/static/app.js` under `public/static/app.js` is that case, and two candidates is a
+ * guess the parser refuses to make. Nothing outside the project root is ever returned: a `../../etc`
+ * URL that escapes the root is a reference to nothing the repository holds.
+ */
+export function resolveUrlToFile(
+  url: ClassifiedUrl,
+  fromFile: string,
+  projectRoot: string
+): string {
+  if (url.path === '') {
+    return '';
+  }
+  let decoded = url.path;
+  try {
+    decoded = decodeURIComponent(url.path);
+  } catch {
+    // A `%` that is not an escape: use the text as written.
+  }
+  const root = path.resolve(projectRoot);
+  const inside = (candidate: string): boolean => {
+    const rel = path.relative(root, candidate);
+    return rel !== '' && !rel.startsWith('..') && !path.isAbsolute(rel);
+  };
+  const isFile = (candidate: string): boolean => {
+    try {
+      return fs.statSync(candidate).isFile();
+    } catch {
+      return false;
+    }
+  };
+  if (url.kind === WebUrlKind.RELATIVE) {
+    const candidate = path.resolve(path.dirname(fromFile), decoded);
+    return inside(candidate) && isFile(candidate) ? candidate : '';
+  }
+  if (url.kind === WebUrlKind.ROOT_RELATIVE) {
+    const hits: string[] = [];
+    let dir = path.dirname(path.resolve(fromFile));
+    const bases = new Set<string>();
+    while (inside(dir) || dir === root) {
+      bases.add(dir);
+      if (dir === root) {
+        break;
+      }
+      const parent = path.dirname(dir);
+      if (parent === dir) {
+        break;
+      }
+      dir = parent;
+    }
+    bases.add(root);
+    const tried = new Set<string>();
+    for (const base of [...bases]) {
+      for (const webRoot of WEB_ROOT_DIRECTORIES) {
+        bases.add(path.join(base, webRoot));
+      }
+    }
+    for (const base of bases) {
+      const candidate = path.resolve(base, '.' + decoded);
+      if (tried.has(candidate)) {
+        continue;
+      }
+      tried.add(candidate);
+      if (inside(candidate) && isFile(candidate)) {
+        hits.push(candidate);
+      }
+    }
+    return hits.length === 1 ? hits[0]! : '';
+  }
+  return '';
+}
diff --git a/parser/src/workflows/index.ts b/parser/src/workflows/index.ts
index a2829d213..c7863f09f 100644
--- a/parser/src/workflows/index.ts
+++ b/parser/src/workflows/index.ts
@@ -2,3 +2,4 @@ export { JavaProjectAnalyzer } from '@/workflows/java/java-project-analyzer';
 export { PropertiesProjectAnalyzer } from '@/workflows/properties/properties-project-analyzer';
 export { XmlProjectAnalyzer } from '@/workflows/xml/xml-project-analyzer';
 export { YamlProjectAnalyzer } from '@/workflows/yaml/yaml-project-analyzer';
+export { WebProjectAnalyzer } from '@/workflows/web/web-project-analyzer';
diff --git a/parser/src/workflows/web/web-project-analyzer.ts b/parser/src/workflows/web/web-project-analyzer.ts
new file mode 100644
index 000000000..1b5a00936
--- /dev/null
+++ b/parser/src/workflows/web/web-project-analyzer.ts
@@ -0,0 +1,378 @@
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+import { CssStylesheet } from '@/analysis-types/css/CssStylesheet';
+import { WebRow } from '@/analysis-types/web/web-row';
+import {
+  ANALYSIS_OUTPUT_DIR,
+  EXCLUDED_DIRS,
+  LARGE_FILE_BYTE_THRESHOLD,
+  LARGE_FILE_LINE_THRESHOLD,
+} from '@/constants/consts';
+import { ENTITY_IDENTIFIERS } from '@/constants/entity-constants';
+import {
+  CSS_EXTENSIONS,
+  HTML_EXTENSIONS,
+  WEB_CSV_CHUNK_SIZE,
+  WEB_CSV_FILES,
+  WEB_MINIFIED_LINE_LENGTH_THRESHOLD,
+  WEB_MINIFIED_NAME_PATTERN,
+} from '@/constants/web-constants';
+import { CssSourceProvenance, CssStylesheetSource } from '@/enums/css/CssStylesheetSource';
+import { SkippedFileReason } from '@/enums/SkippedFileReason';
+import { CssExtraction, CssParser } from '@/parsers/css/css-parser';
+import { HtmlParser } from '@/parsers/html/html-parser';
+import { ProjectInfo } from '@/types/ProjectInfo';
+import { EntityUtils } from '@/utils/entity-utils';
+import { groupOwnedFiles, resolveFileOwners } from '@/utils/file-ownership';
+import { isGeneratedOutputDirectory } from '@/utils/generated-output';
+import { isGitIgnoredDir } from '@/utils/git-ignored';
+import { LineIndex } from '@/utils/web/line-index';
+
+interface SkippedFile {
+  filePath: string;
+  baseMservPath: string;
+  serviceVersionHash: string;
+  reason: SkippedFileReason;
+  uniqueFileHash: string;
+}
+
+/** What one run produced, for the caller's report. */
+export interface WebAnalysisSummary {
+  htmlFilesSeen: number;
+  cssFilesSeen: number;
+  filesAnalysed: number;
+  filesSkipped: number;
+  counts: Record<string, number>;
+}
+
+/**
+ * The web front end's workflow: every `.html` and `.css` file under every scan target,
+ * attributed to the most specific project that contains it, read once, and written as
+ * sixteen relations plus two skip reports.
+ *
+ * ## One analyzer for two languages
+ *
+ * A page's `<style>` elements and `style` attributes are CSS, and their rows go in the
+ * CSS relations beside those of `.css` files. Two analyzers writing one relation would
+ * overwrite each other (the failure `extractProject` documents for TypeScript), so HTML
+ * and CSS are one workflow with one set of writers.
+ *
+ * ## File-type, not project-type
+ *
+ * Neither language has a project shape: a page sits in a Java resources folder, a Django
+ * templates directory and a Vite root alike. So, like the XML and YAML analyzers, this one
+ * walks every scan target rather than a per-language project list. A generated
+ * documentation tree (javadoc, Dokka) is skipped the way the JavaScript walk skips it:
+ * its pages are a build's output, not the project's.
+ */
+export class WebProjectAnalyzer {
+  private readonly html: HtmlParser;
+  private readonly css: CssParser;
+  private readonly outputDir: string;
+
+  private readonly rows: Record<keyof typeof WEB_CSV_FILES, WebRow[]> = {
+    HTML_DOCUMENTS: [], HTML_ELEMENTS: [], HTML_ATTRIBUTES: [], HTML_CLASS_REFERENCES: [], HTML_REFERENCES: [],
+    HTML_SCRIPTS: [], HTML_HANDLER_CALLS: [], HTML_TEMPLATE_EXPRESSIONS: [], HTML_PARSE_GAPS: [], CSS_STYLESHEETS: [], CSS_RULES: [],
+    CSS_SELECTORS: [], CSS_SELECTOR_PARTS: [], CSS_DECLARATIONS: [], CSS_VALUE_REFERENCES: [], CSS_COMMENTS: [],
+    CSS_PARSE_GAPS: [], SKIPPED_HTML_FILES: [], SKIPPED_CSS_FILES: [],
+  };
+  private readonly skippedHtml: SkippedFile[] = [];
+  private readonly skippedCss: SkippedFile[] = [];
+  private htmlSeen = 0;
+  private cssSeen = 0;
+  private analysed = 0;
+
+  constructor(outputDir?: string) {
+    this.css = new CssParser();
+    this.html = new HtmlParser(this.css);
+    this.outputDir = outputDir ?? ANALYSIS_OUTPUT_DIR;
+  }
+
+  /**
+   * Analyzes every HTML and CSS file under the scan targets.
+   *
+   * @param projects Overlapping scan targets: the repository root and every project found beneath it.
+   * @param serviceVersionLink The version to stamp on every row, UNHASHED; hashed here as every analyzer does.
+   */
+  async analyzeWebFiles(projects: ProjectInfo[], serviceVersionLink: string): Promise<WebAnalysisSummary> {
+    const startTime = Date.now();
+    const serviceVersionHash = EntityUtils.generateEntityHash(ENTITY_IDENTIFIERS.SERVICE_VERSION, serviceVersionLink);
+    await fs.mkdir(this.outputDir, { recursive: true });
+
+    const owners = await resolveFileOwners(projects, (root) => this.findWebFiles(root));
+    for (const [project, files] of groupOwnedFiles(owners)) {
+      await this.analyzeProject(project, files.sort(), serviceVersionHash);
+    }
+
+    await this.exportAll();
+
+    const counts: Record<string, number> = {};
+    for (const [key, rows] of Object.entries(this.rows)) {
+      counts[WEB_CSV_FILES[key as keyof typeof WEB_CSV_FILES]] = rows.length;
+    }
+    const seconds = ((Date.now() - startTime) / 1000).toFixed(2);
+    console.log(`\n📊 Total HTML documents extracted: ${this.rows.HTML_DOCUMENTS.length}`);
+    console.log(`📊 Total HTML elements extracted: ${this.rows.HTML_ELEMENTS.length}`);
+    console.log(`📊 Total HTML references extracted: ${this.rows.HTML_REFERENCES.length}`);
+    console.log(`📊 Total CSS stylesheets extracted: ${this.rows.CSS_STYLESHEETS.length}`);
+    console.log(`📊 Total CSS rules extracted: ${this.rows.CSS_RULES.length}`);
+    console.log(`📊 Total CSS declarations extracted: ${this.rows.CSS_DECLARATIONS.length}`);
+    if (this.skippedHtml.length + this.skippedCss.length > 0) {
+      console.log(`   ⏭  ${this.skippedHtml.length + this.skippedCss.length} file(s) skipped — see the skipped-files reports`);
+    }
+    console.log(`⏱️  HTML/CSS analysis completed in ${seconds}s`);
+    return {
+      htmlFilesSeen: this.htmlSeen,
+      cssFilesSeen: this.cssSeen,
+      filesAnalysed: this.analysed,
+      filesSkipped: this.skippedHtml.length + this.skippedCss.length,
+      counts,
+    };
+  }
+
+  private async analyzeProject(project: ProjectInfo, files: ReadonlyArray<string>, serviceVersionHash: string): Promise<void> {
+    if (files.length === 0) {
+      return;
+    }
+    const htmlFiles = files.filter((f) => isHtmlFile(f));
+    const cssFiles = files.filter((f) => isCssFile(f));
+    this.htmlSeen += htmlFiles.length;
+    this.cssSeen += cssFiles.length;
+    console.log(`\n📦 HTML/CSS in: ${project.name}`);
+    console.log(`   🔍 Found ${htmlFiles.length} HTML and ${cssFiles.length} CSS file(s)`);
+
+    for (const filePath of htmlFiles) {
+      const content = await this.readOrSkip(filePath, project, serviceVersionHash, this.skippedHtml);
+      if (content === undefined) {
+        continue;
+      }
+      try {
+        const x = this.html.parse(content, filePath, project.path, serviceVersionHash);
+        // Committed only once the whole file has parsed, and appended in a loop: `push(...rows)`
+        // passes every row as an argument and overflows the stack past ~100k of them, which on
+        // a generated page threw AFTER half the relations were already extended — rows of a
+        // file then recorded as skipped. A loop cannot throw, so the commit is all or nothing.
+        this.rows.HTML_DOCUMENTS.push(x.document);
+        append(this.rows.HTML_ELEMENTS, x.elements);
+        append(this.rows.HTML_ATTRIBUTES, x.attributes);
+        append(this.rows.HTML_CLASS_REFERENCES, x.classReferences);
+        append(this.rows.HTML_REFERENCES, x.references);
+        append(this.rows.HTML_SCRIPTS, x.scripts);
+        append(this.rows.HTML_HANDLER_CALLS, x.handlerCalls);
+        append(this.rows.HTML_TEMPLATE_EXPRESSIONS, x.templateExpressions);
+        append(this.rows.HTML_PARSE_GAPS, x.parseGaps);
+        append(this.rows.CSS_STYLESHEETS, x.stylesheets);
+        this.collectCss(x.css);
+        this.analysed += 1;
+      } catch (error) {
+        this.recordExtractionError(filePath, project, serviceVersionHash, this.skippedHtml, error);
+      }
+    }
+
+    for (const filePath of cssFiles) {
+      const content = await this.readOrSkip(filePath, project, serviceVersionHash, this.skippedCss);
+      if (content === undefined) {
+        continue;
+      }
+      try {
+        const lines = new LineIndex(content);
+        const fileName = path.basename(filePath);
+        const sheet = new CssStylesheet({
+          name: fileName.replace(/\.[^.]+$/, ''),
+          fileName,
+          filePath,
+          baseMservPath: project.path,
+          relativePath: path.relative(project.path, filePath).split(path.sep).join('/'),
+          sourceKind: CssStylesheetSource.FILE,
+          sourceProvenance: WEB_MINIFIED_NAME_PATTERN.test(fileName) || lines.longestLine > WEB_MINIFIED_LINE_LENGTH_THRESHOLD
+            ? CssSourceProvenance.MINIFIED : CssSourceProvenance.PROJECT,
+          ownerHtmlElementLinkHash: '',
+          htmlDocumentLinkHash: '',
+          startLine: 1,
+          startColumn: 1,
+          endLine: Math.max(1, lines.lineCount),
+          serviceVersionLinkHash: serviceVersionHash,
+        });
+        const x = this.css.parseStylesheet(content, {
+          stylesheet: sheet, line: 1, column: 1, filePath, projectRoot: project.path,
+          serviceVersionLinkHash: serviceVersionHash,
+        });
+        this.rows.CSS_STYLESHEETS.push(sheet);
+        this.collectCss(x);
+        this.analysed += 1;
+      } catch (error) {
+        this.recordExtractionError(filePath, project, serviceVersionHash, this.skippedCss, error);
+      }
+    }
+  }
+
+  private collectCss(x: CssExtraction): void {
+    append(this.rows.CSS_RULES, x.rules);
+    append(this.rows.CSS_SELECTORS, x.selectors);
+    append(this.rows.CSS_SELECTOR_PARTS, x.selectorParts);
+    append(this.rows.CSS_DECLARATIONS, x.declarations);
+    append(this.rows.CSS_VALUE_REFERENCES, x.valueReferences);
+    append(this.rows.CSS_COMMENTS, x.comments);
+    append(this.rows.CSS_PARSE_GAPS, x.parseGaps);
+  }
+
+  /**
+   * The file's text, or `undefined` with a skip row recorded. The guards are the XML
+   * analyzer's: empty, then BYTES before lines (a minified file is megabytes on one line),
+   * then the line count.
+   */
+  private async readOrSkip(filePath: string, project: ProjectInfo, serviceVersionHash: string, skipped: SkippedFile[]): Promise<string | undefined> {
+    let content: string;
+    try {
+      content = await fs.readFile(filePath, 'utf-8');
+    } catch (error) {
+      console.error(`   ❌ Error reading ${filePath}:`, error);
+      this.skip(filePath, project, serviceVersionHash, SkippedFileReason.READ_ERROR, skipped);
+      return undefined;
+    }
+    if (content.trim().length === 0) {
+      this.skip(filePath, project, serviceVersionHash, SkippedFileReason.EMPTY_CONTENT, skipped);
+      return undefined;
+    }
+    const byteLength = Buffer.byteLength(content, 'utf-8');
+    if (byteLength > LARGE_FILE_BYTE_THRESHOLD) {
+      console.log(`   ⏭️  Skipping very large file (${byteLength} bytes): ${filePath}`);
+      this.skip(filePath, project, serviceVersionHash, SkippedFileReason.FILE_TOO_LARGE, skipped);
+      return undefined;
+    }
+    const lineCount = content.split('\n').length;
+    if (lineCount > LARGE_FILE_LINE_THRESHOLD) {
+      console.log(`   ⏭️  Skipping very large file (${lineCount} lines): ${filePath}`);
+      this.skip(filePath, project, serviceVersionHash, SkippedFileReason.FILE_TOO_LARGE, skipped);
+      return undefined;
+    }
+    // A UTF-8 byte-order mark is not markup; the grammar would keep it as text before the doctype.
+    return content.charCodeAt(0) === 0xfeff ? content.slice(1) : content;
+  }
+
+  private recordExtractionError(filePath: string, project: ProjectInfo, serviceVersionHash: string, skipped: SkippedFile[], error: unknown): void {
+    // EXTRACTION_ERROR, not READ_ERROR: the environment did not fail, the parser did.
+    console.error(`   ❌ Error parsing ${filePath}:`, error);
+    this.skip(filePath, project, serviceVersionHash, SkippedFileReason.EXTRACTION_ERROR, skipped);
+  }
+
+  private skip(filePath: string, project: ProjectInfo, serviceVersionHash: string, reason: SkippedFileReason, skipped: SkippedFile[]): void {
+    const uniqueFileHash = EntityUtils.generateEntityHash(
+      ENTITY_IDENTIFIERS.SKIPPED_FILE,
+      `${filePath}||${project.path}||${serviceVersionHash}||${reason}`
+    );
+    skipped.push({ filePath, baseMservPath: project.path, serviceVersionHash, reason, uniqueFileHash });
+  }
+
+  // ── the walk ──────────────────────────────────────────────────────────────
+
+  private async findWebFiles(root: string): Promise<string[]> {
+    const files: string[] = [];
+    await this.scan(root, files);
+    return files;
+  }
+
+  private async scan(dirPath: string, files: string[]): Promise<void> {
+    let entries;
+    try {
+      entries = await fs.readdir(dirPath, { withFileTypes: true });
+    } catch (error) {
+      console.error(`Error scanning directory ${dirPath}:`, error);
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (EXCLUDED_DIRS.has(entry.name) || entry.name.startsWith('.')) {
+          continue;
+        }
+        if (isGitIgnoredDir(path.join(dirPath, entry.name)) || isGeneratedOutputDirectory(dirPath, entry.name)) {
+          continue;
+        }
+        await this.scan(path.join(dirPath, entry.name), files);
+      } else if (entry.isFile() && (isHtmlFile(entry.name) || isCssFile(entry.name))) {
+        files.push(path.join(dirPath, entry.name));
+      }
+    }
+  }
+
+  // ── export ────────────────────────────────────────────────────────────────
+
+  private async exportAll(): Promise<void> {
+    for (const [key, filename] of Object.entries(WEB_CSV_FILES) as [keyof typeof WEB_CSV_FILES, string][]) {
+      if (key === 'SKIPPED_HTML_FILES' || key === 'SKIPPED_CSS_FILES') {
+        continue;
+      }
+      await this.exportRows(this.rows[key], filename);
+    }
+    await this.exportSkipped(this.skippedHtml, WEB_CSV_FILES.SKIPPED_HTML_FILES);
+    await this.exportSkipped(this.skippedCss, WEB_CSV_FILES.SKIPPED_CSS_FILES);
+  }
+
+  /**
+   * One relation, in chunks. A relation with no rows is NOT written: the other file-type
+   * analyzers (XML, YAML) leave an empty relation absent, and the engine stages an absent
+   * mapped file as an empty one, so presence carries no information here.
+   */
+  private async exportRows(rows: readonly WebRow[], filename: string): Promise<void> {
+    if (rows.length === 0) {
+      return;
+    }
+    const outputPath = await this.writeAtomically(filename, async (handle) => {
+      await handle.write(rows[0]!.getCsvHeader() + '\n', null, 'utf-8');
+      for (let i = 0; i < rows.length; i += WEB_CSV_CHUNK_SIZE) {
+        await handle.write(rows.slice(i, i + WEB_CSV_CHUNK_SIZE).map((row) => row.toCsv()).join('\n') + '\n', null, 'utf-8');
+      }
+    });
+    console.log(`💾 ${filename} exported to: ${outputPath}`);
+  }
+
+  private async exportSkipped(skipped: readonly SkippedFile[], filename: string): Promise<void> {
+    if (skipped.length === 0) {
+      return;
+    }
+    const header = 'filePath\tbaseMservPath\tserviceVersionHash\treason\tuniqueFileHash';
+    const lines = skipped.map((f) => `${f.filePath}\t${f.baseMservPath}\t${f.serviceVersionHash}\t${f.reason}\t${f.uniqueFileHash}`);
+    const outputPath = await this.writeAtomically(filename, async (handle) => {
+      await handle.write([header, ...lines].join('\n') + '\n', null, 'utf-8');
+    });
+    console.log(`💾 ${filename} exported to: ${outputPath}`);
+  }
+
+  /**
+   * Writes a relation to a uniquely named `.partial` file, syncs it, and renames it into
+   * place, so a crash mid-write can never leave a relation that is half a file under the
+   * name a consumer reads — the guarantee the TypeScript and JavaScript writers make, and
+   * the unique temporary name is why two analyzers aimed at one directory cannot interleave.
+   */
+  private async writeAtomically(filename: string, body: (handle: fs.FileHandle) => Promise<void>): Promise<string> {
+    const outputPath = path.join(this.outputDir, filename);
+    const temporaryPath = `${outputPath}.${process.pid}-${Date.now()}.partial`;
+    const handle = await fs.open(temporaryPath, 'w');
+    try {
+      await body(handle);
+      await handle.sync();
+    } finally {
+      await handle.close();
+    }
+    await fs.rename(temporaryPath, outputPath);
+    return outputPath;
+  }
+}
+
+/** `target.push(...rows)` without the argument-count ceiling a spread has. */
+function append<T>(target: T[], rows: readonly T[]): void {
+  for (const row of rows) {
+    target.push(row);
+  }
+}
+
+export function isHtmlFile(fileName: string): boolean {
+  const lower = fileName.toLowerCase();
+  return HTML_EXTENSIONS.some((ext) => lower.endsWith(ext));
+}
+
+export function isCssFile(fileName: string): boolean {
+  const lower = fileName.toLowerCase();
+  return CSS_EXTENSIONS.some((ext) => lower.endsWith(ext));
+}
diff --git a/parser/tools/web-corpus-bench/.gitignore b/parser/tools/web-corpus-bench/.gitignore
new file mode 100644
index 000000000..2835193f2
--- /dev/null
+++ b/parser/tools/web-corpus-bench/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+corpus/
+results/
diff --git a/parser/tools/web-corpus-bench/BASELINE-2026-10-07.md b/parser/tools/web-corpus-bench/BASELINE-2026-10-07.md
new file mode 100644
index 000000000..043a1ef00
--- /dev/null
+++ b/parser/tools/web-corpus-bench/BASELINE-2026-10-07.md
@@ -0,0 +1,1078 @@
+# AxiomCode web front end vs reference parsers
+
+Generated 2026-10-07. HTML reference: parse5 (WHATWG tree construction, written elements only) and htmlparser2; CSS reference: css-tree 3 + postcss 8 + @bramus/specificity.
+
+## HTML
+
+| corpus | files | crashes | ref crashes | ax total ms | ref total ms | slowest file (ms) | elements ref / ax / htmlparser2 | files with element count = ref |
+|---|---:|---:|---:|---:|---:|---|---|---:|
+| angular | 684 | 0 | 0 | 1805 | 207 | src/components-examples/aria/menubar/men (217) | 12195 / 12208 / 12209 | 678 |
+| bootstrap | 14 | 0 | 0 | 439 | 158 | js/tests/visual/dropdown.html (126) | 1115 / 1115 / 1115 | 14 |
+| django | 373 | 0 | 0 | 836 | 175 | tests/utils_tests/files/strip_tags1.html (477) | 2206 / 2228 / 2230 | 365 |
+| dom-examples | 199 | 0 | 0 | 914 | 127 | execcommand/index.html (95) | 3919 / 3928 / 3928 | 196 |
+| h5bp | 4 | 0 | 0 | 81 | 11 | dist/index.html (61) | 58 / 58 / 58 | 4 |
+| html5lib | 1768 | 0 | 0 | 574 | 197 | noscript01.dat:128 (73) | 4012 / 2795 / 4203 | 1017 |
+| live | 25 | 0 | 0 | 43840 | 3750 | whatwg-html-spec.html (30355) | 396172 / 396671 / 396671 | 18 |
+| parse5-huge | 1 | 0 | 0 | 2064 | 640 | huge-page.html (2064) | 24558 / 24558 / 24558 | 1 |
+| parse5-loc | 5 | 0 | 0 | 3088 | 267 | wiki-42/data.html (1418) | 9767 / 9770 / 9770 | 3 |
+| petclinic | 12 | 0 | 0 | 174 | 39 | src/main/resources/templates/pets/create (59) | 293 / 293 / 293 | 12 |
+| wpt | 5191 | 0 | 0 | 16967 | 513 | html/semantics/embedded-content/the-img- (709) | 63640 / 63695 / 63713 | 5105 |
+
+### Slow files (> 3 s in axiom)
+
+- `live/whatwg-html-spec.html` 15640803 bytes: axiom 30355 ms, parse5 1929 ms
+- `live/cnn.html` 6791032 bytes: axiom 4112 ms, parse5 488 ms
+
+### Coverage totals (all corpora, non-crashing files)
+
+| measure | reference | axiom | axiom / reference |
+|---|---:|---:|---:|
+| written elements (parse5) | 517935 | 517319 | 99.88% |
+| attributes | 490969 | 491487 | 100.11% |
+| class tokens | 171188 | 171439 | 100.15% |
+| ids | 94544 | 94517 | 99.97% |
+| URL references | 113199 | 113550 | 100.31% |
+| script elements | 11594 | 11512 | 99.29% |
+| inline scripts | 4429 | 4348 | 98.17% |
+| inline script text (chars) | 8082378 | 8081124 | 99.98% |
+| style elements (css) | 3288 | 3287 | 99.97% |
+| style attribute declarations | 8995 | 9004 | 100.10% |
+| event-handler attributes (ax: attrs with a call or a gap) | 1859 | 2476 | 133.19% |
+| text (non-ws chars) | 5166412 | 5130458 | 99.30% |
+| <style> rules+at-rules | 38668 | 38764 | 100.25% |
+| <style> declarations | 120326 | 120030 | 99.75% |
+
+Files where axiom's element count differs from parse5's written-element count: 863 / 8276. Files with at least one parent-child edge mismatch: 1147. Files where axiom's max depth exceeds parse5's by more than 2: 14.
+
+### Tags parse5 has that axiom lacks (summed over files)
+
+| tag | missing | examples |
+|---|---:|---|
+| `p` | 149 | html5lib/adoption01.dat:318, html5lib/blocks.dat:1, html5lib/blocks.dat:30 |
+| `script` | 106 | html5lib/domjs-unsafe.dat:116, html5lib/domjs-unsafe.dat:132, html5lib/domjs-unsafe.dat:144 |
+| `table` | 93 | html5lib/namespace-sensitivity.dat:1, html5lib/pending-spec-changes-plain-text-unsafe.dat:1, html5lib/pending-spec-chang |
+| `svg` | 74 | html5lib/domjs-unsafe.dat:1, html5lib/domjs-unsafe.dat:15, html5lib/domjs-unsafe.dat:28 |
+| `a` | 68 | html5lib/adoption01.dat:186, html5lib/adoption02.dat:21, html5lib/main-element.dat:30 |
+| `div` | 60 | angular/src/dev-app/checkbox/checkbox-demo.html, html5lib/adoption02.dat:21, html5lib/blocks.dat:233 |
+| `td` | 60 | html5lib/math.dat:1, html5lib/math.dat:14, html5lib/namespace-sensitivity.dat:1 |
+| `tr` | 55 | html5lib/math.dat:1, html5lib/math.dat:14, html5lib/namespace-sensitivity.dat:1 |
+| `math` | 54 | html5lib/math.dat:1, html5lib/math.dat:14, html5lib/math.dat:28 |
+| `font` | 52 | html5lib/scripted/ark.dat:1, html5lib/tests1.dat:425, html5lib/tests16.dat:2567 |
+| `template` | 48 | html5lib/template.dat:312, html5lib/template.dat:326, html5lib/template.dat:341 |
+| `b` | 47 | html5lib/adoption01.dat:46, html5lib/adoption01.dat:108, html5lib/adoption01.dat:159 |
+| `button` | 45 | html5lib/tables01.dat:252, html5lib/tests19.dat:677, html5lib/tests20.dat:1 |
+| `body` | 44 | html5lib/namespace-sensitivity.dat:1, html5lib/pending-spec-changes-plain-text-unsafe.dat:1, html5lib/plain-text-unsafe. |
+| `select` | 43 | html5lib/plain-text-unsafe.dat:90, html5lib/tables01.dat:288, html5lib/template.dat:312 |
+| `span` | 41 | html5lib/template.dat:1405, html5lib/template.dat:1421, html5lib/template.dat:1436 |
+| `replaceme_container_tag` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `option` | 28 | html5lib/template.dat:341, html5lib/tests19.dat:364, html5lib/tests19.dat:377 |
+| `i` | 24 | html5lib/tests1.dat:425, html5lib/tests1.dat:928, html5lib/tests1.dat:943 |
+| `nobr` | 21 | html5lib/tests26.dat:1, html5lib/tests26.dat:43, html5lib/tests26.dat:71 |
+| `title` | 15 | html5lib/svg.dat:1, html5lib/svg.dat:14, html5lib/svg.dat:28 |
+| `tbody` | 14 | html5lib/math.dat:54, html5lib/math.dat:67, html5lib/svg.dat:54 |
+| `frameset` | 13 | html5lib/plain-text-unsafe.dat:236, html5lib/plain-text-unsafe.dat:253, html5lib/plain-text-unsafe.dat:270 |
+| `foo` | 12 | html5lib/foreign-fragment.dat:564, html5lib/foreign-fragment.dat:577, html5lib/foreign-fragment.dat:590 |
+| `mo` | 12 | html5lib/math.dat:1, html5lib/math.dat:14, html5lib/math.dat:28 |
+
+### Tags axiom has that parse5 does not count as written
+
+| tag | extra | examples |
+|---|---:|---|
+| `source` | 128 | html5lib/tests6.dat:623, live/apple.html |
+| `li` | 89 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/filter.html, django/d |
+| `a` | 87 | html5lib/tests16.dat:568, html5lib/tests16.dat:1870, html5lib/tests_innerHTML_1.dat:387 |
+| `ul` | 85 | live/bbc.html |
+| `img` | 55 | live/apple.html, live/guardian.html, live/wikipedia-css.html |
+| `picture` | 50 | live/apple.html |
+| `html` | 49 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `body` | 42 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `head` | 37 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `replaceme` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `frameset` | 22 | html5lib/foreign-fragment.dat:491, html5lib/plain-text-unsafe.dat:42, html5lib/plain-text-unsafe.dat:317 |
+| `script` | 19 | html5lib/tests16.dat:855, html5lib/tests16.dat:866, html5lib/tests16.dat:877 |
+| `div` | 14 | django/django/contrib/auth/templates/auth/widgets/read_only_password_hash.html, django/django/forms/jinja2/django/forms/ |
+| `tr` | 12 | angular/src/components-examples/material/table/table-wrapped/table-wrapped-example.html, angular/src/material/datepicker |
+| `svg` | 12 | html5lib/plain-text-unsafe.dat:287, html5lib/plain-text-unsafe.dat:302, html5lib/plain-text-unsafe.dat:333 |
+| `td` | 11 | angular/src/components-examples/material/table/table-wrapped/table-wrapped-example.html, angular/src/material/datepicker |
+| `frame` | 9 | html5lib/template.dat:560, html5lib/template.dat:934, html5lib/template.dat:1353 |
+| `colgroup` | 9 | html5lib/template.dat:693, html5lib/template.dat:1004, html5lib/template.dat:1032 |
+| `g` | 8 | html5lib/tests10.dat:261, html5lib/tests10.dat:285, html5lib/tests10.dat:343 |
+| `mi` | 8 | html5lib/tests9.dat:301, html5lib/tests9.dat:325, html5lib/tests9.dat:383 |
+| `col` | 7 | html5lib/tests1.dat:1681, html5lib/tests25.dat:68, html5lib/tests6.dat:468 |
+| `p` | 6 | django/django/forms/jinja2/django/forms/p.html, django/django/forms/templates/django/forms/p.html, html5lib/tests19.dat: |
+| `meta` | 6 | wpt/html/syntax/charset/in-noscript-after-template-after-1kb.html, wpt/html/syntax/charset/in-svg-in-cdata.html, wpt/htm |
+| `math` | 5 | html5lib/tests19.dat:904, html5lib/tests9.dat:48, html5lib/tests9.dat:60 |
+| `template` | 4 | html5lib/template.dat:547, wpt/html/semantics/scripting-1/the-template-element/resources/frameset-end-tag.html, wpt/html |
+
+### Tag count differences vs htmlparser2 (positive: htmlparser2 has more)
+
+| tag | delta | examples |
+|---|---:|---|
+| `p` | 184 | html5lib/adoption01.dat:1, html5lib/adoption01.dat:14, html5lib/adoption01.dat:83 |
+| `script` | 103 | html5lib/domjs-unsafe.dat:116, html5lib/domjs-unsafe.dat:132, html5lib/domjs-unsafe.dat:144 |
+| `table` | 94 | html5lib/namespace-sensitivity.dat:1, html5lib/pending-spec-changes-plain-text-unsafe.dat:1, html5lib/pending-spec-chang |
+| `fecolormatrix` | 90 | html5lib/tests11.dat:330, html5lib/tests11.dat:422, html5lib/tests11.dat:468 |
+| `svg` | 76 | html5lib/domjs-unsafe.dat:1, html5lib/domjs-unsafe.dat:15, html5lib/domjs-unsafe.dat:28 |
+| `fegaussianblur` | 75 | html5lib/tests11.dat:330, html5lib/tests11.dat:422, html5lib/tests11.dat:468 |
+| `femergenode` | 72 | html5lib/tests11.dat:330, html5lib/tests11.dat:422, html5lib/tests11.dat:468 |
+| `feoffset` | 64 | html5lib/tests11.dat:330, html5lib/tests11.dat:422, html5lib/tests11.dat:468 |
+| `td` | 63 | html5lib/math.dat:1, html5lib/math.dat:14, html5lib/namespace-sensitivity.dat:1 |
+| `tr` | 59 | django/django/forms/jinja2/django/forms/table.html, django/django/forms/templates/django/forms/table.html, html5lib/math |
+| `div` | 56 | angular/src/dev-app/checkbox/checkbox-demo.html, django/django/contrib/auth/templates/auth/widgets/read_only_password_ha |
+| `math` | 56 | html5lib/math.dat:1, html5lib/math.dat:14, html5lib/math.dat:28 |
+| `feColorMatrix` | 86 | live/wix.html |
+| `feGaussianBlur` | 71 | live/tailwind.html, live/wix.html |
+| `feMergeNode` | 68 | live/wix.html |
+| `feOffset` | 60 | live/wix.html |
+| `clipPath` | 49 | live/cnn.html, live/github.html, live/guardian.html |
+| `feBlend` | 43 | live/tailwind.html, live/wix.html |
+| `replaceme` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `linearGradient` | 34 | live/github.html, live/mdn-html.html, live/react.html |
+| `feMerge` | 34 | live/wix.html |
+| `foreignObject` | 23 | html5lib/tests10.dat:491, html5lib/tests10.dat:509, html5lib/tests10.dat:621 |
+| `radialGradient` | 20 | live/react.html, live/reddit.html, live/wix.html |
+| `feFlood` | 19 | live/tailwind.html, live/wix.html, wpt/css/css-animations/svg-color-visited-currentcolor.html |
+
+### Parent>child edges parse5 has that axiom lacks (nesting divergence)
+
+| edge | missing | examples |
+|---|---:|---|
+| `ol>li` | 255 | parse5-huge/huge-page.html, wpt/css/css-fonts/language-specific-01.html |
+| `table>td` | 212 | angular/docs/scenes/src/app/scenes/table/table-scene.html, angular/src/components-examples/cdk-experimental/popover-edit |
+| `table>th` | 180 | angular/docs/scenes/src/app/scenes/table/table-scene.html, angular/src/components-examples/cdk-experimental/popover-edit |
+| `>script` | 171 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `>p` | 138 | angular/tools/dgeni/templates/property.template.html, dom-examples/web-speech-api/audio-track-recognition/index.html, do |
+| `body>script` | 130 | live/hn.html, live/shopify.html, wpt/css/css-animations/CSSAnimation-getKeyframes-crash.html |
+| `>ng-container` | 117 | angular/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-exam |
+| `>div` | 109 | angular/tools/dgeni/templates/property.template.html, django/django/contrib/admin/templates/admin/base.html, dom-example |
+| `>link` | 84 | django/django/contrib/admin/templates/admin/base.html, dom-examples/web-speech-api/audio-track-recognition/index.html, d |
+| `>table` | 76 | html5lib/pending-spec-changes.dat:28, html5lib/plain-text-unsafe.dat:393, html5lib/plain-text-unsafe.dat:414 |
+| `head>script` | 56 | html5lib/tests3.dat:12, html5lib/tests3.dat:23, live/react.html |
+| `>svg` | 54 | django/django/contrib/admin/templates/admin/base.html, html5lib/domjs-unsafe.dat:1, html5lib/domjs-unsafe.dat:15 |
+| `>a` | 49 | django/django/contrib/admin/templates/admin/base.html, html5lib/adoption01.dat:83, html5lib/adoption01.dat:186 |
+| `body>p` | 48 | html5lib/tests10.dat:193, html5lib/tests10.dat:214, html5lib/tests10.dat:235 |
+| `table>tr` | 46 | html5lib/namespace-sensitivity.dat:1, html5lib/pending-spec-changes.dat:28, html5lib/plain-text-unsafe.dat:393 |
+| `>math` | 45 | html5lib/math.dat:1, html5lib/math.dat:14, html5lib/math.dat:28 |
+| `>body` | 41 | html5lib/namespace-sensitivity.dat:1, html5lib/pending-spec-changes-plain-text-unsafe.dat:1, html5lib/plain-text-unsafe. |
+| `p>button` | 39 | html5lib/tests20.dat:1, html5lib/tests20.dat:15, html5lib/tests20.dat:28 |
+| `font>font` | 34 | html5lib/scripted/ark.dat:1, html5lib/tests23.dat:1, html5lib/tests23.dat:41 |
+| `replaceme_container_tag>replaceme_container_tag` | 33 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `tr>td` | 31 | angular/src/components-examples/aria/combobox/combobox-datepicker/combobox-datepicker-example.html, angular/src/componen |
+| `>select` | 31 | html5lib/tables01.dat:100, html5lib/tables01.dat:114, html5lib/tables01.dat:131 |
+| `div>script` | 29 | wpt/css/css-animations/CSSAnimation-compositeOrder.tentative.html, wpt/css/selectors/attribute-selectors/attribute-case/ |
+| `>meta` | 26 | django/django/contrib/admin/templates/admin/base.html, django/django/views/templates/default_urlconf.html, django/django |
+| `html>body` | 25 | html5lib/tests1.dat:103, html5lib/tests1.dat:121, html5lib/tests1.dat:1548 |
+| `div>ng-container` | 24 | angular/src/components-examples/material/table/table-http/table-http-example.html, angular/src/components-examples/mater |
+| `>style` | 24 | django/django/views/templates/default_urlconf.html, html5lib/tests1.dat:680, wpt/css/css-variables/variable-css-wide-key |
+| `combobox>div` | 22 | angular/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html, angular/src |
+| `>span` | 22 | angular/src/material/datepicker/calendar-body.html, html5lib/tests_innerHTML_1.dat:1, html5lib/tests_innerHTML_1.dat:42 |
+| `>title` | 22 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `div>div` | 20 | angular/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit- |
+| `>template` | 18 | html5lib/template.dat:1144, html5lib/template.dat:1159, html5lib/template.dat:1174 |
+| `head>style` | 18 | html5lib/tests3.dat:1, html5lib/tests3.dat:23, html5lib/webkit01.dat:515 |
+| `math>mi` | 17 | html5lib/plain-text-unsafe.dat:435, html5lib/tests10.dat:604, html5lib/tests10.dat:621 |
+| `table>tbody` | 17 | html5lib/tests17.dat:1, html5lib/tests18.dat:114, html5lib/tests18.dat:141 |
+| `section>ng-container` | 16 | angular/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html, angular/src/compo |
+| `div>p` | 15 | angular/src/dev-app/checkbox/checkbox-demo.html, html5lib/blocks.dat:233, html5lib/tests1.dat:994 |
+| `>b` | 15 | html5lib/adoption01.dat:46, html5lib/adoption01.dat:108, html5lib/adoption01.dat:159 |
+| `select>option` | 15 | html5lib/template.dat:326, html5lib/template.dat:341, html5lib/tests19.dat:364 |
+| `template>template` | 15 | html5lib/template.dat:1108, html5lib/template.dat:1159, html5lib/template.dat:1187 |
+
+### Parent>child edges axiom has that parse5 lacks
+
+| edge | extra | examples |
+|---|---:|---|
+| `p>li` | 255 | html5lib/tests3.dat:241, parse5-huge/huge-page.html, wpt/css/selectors/has-specificity.html |
+| `ng-container>td` | 190 | angular/docs/scenes/src/app/scenes/table/table-scene.html, angular/src/components-examples/cdk-experimental/popover-edit |
+| `ng-container>th` | 179 | angular/docs/scenes/src/app/scenes/table/table-scene.html, angular/src/components-examples/cdk-experimental/popover-edit |
+| `table>ng-container` | 169 | angular/docs/scenes/src/app/scenes/table/table-scene.html, angular/src/components-examples/cdk-experimental/popover-edit |
+| `picture>source` | 127 | live/apple.html |
+| `>script` | 110 | html5lib/scripted/ark.dat:1, html5lib/tests10.dat:638, html5lib/tests16.dat:855 |
+| `html>script` | 105 | live/hn.html, live/react.html, wpt/css/css-animations/CSSAnimation-getKeyframes-crash.html |
+| `ul>li` | 87 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/filter.html, django/t |
+| `li>a` | 86 | django/django/contrib/admin/templates/admin/filter.html, django/tests/admin_views/templates/custom_filter_template.html, |
+| `ul>ul` | 84 | live/bbc.html |
+| `head>script` | 65 | django/django/contrib/admin/templates/admin/base.html, django/django/views/templates/technical_500.html, dom-examples/we |
+| `html>link` | 54 | wpt/css/css-fonts/matching/range-descriptor-reversed.html, wpt/css/selectors/invalidation/negated-always-matches-negated |
+| `picture>img` | 50 | live/apple.html |
+| `noscript>picture` | 50 | live/apple.html |
+| `head>div` | 40 | wpt/css/css-animations/stability/animation-event-destroy-renderer.html, wpt/css/css-cascade/important-transition-manual. |
+| `body>p` | 39 | dom-examples/web-speech-api/audio-track-recognition/index.html, dom-examples/web-speech-api/on-device-speech-color-chang |
+| `>p` | 38 | angular/src/dev-app/checkbox/checkbox-demo.html, django/django/forms/jinja2/django/forms/p.html, django/django/forms/tem |
+| `head>link` | 36 | django/django/contrib/admin/templates/admin/base.html, dom-examples/web-speech-api/audio-track-recognition/index.html, d |
+| `body>script` | 36 | django/django/contrib/admin/templates/admin/popup_response.html, dom-examples/web-speech-api/speech-color-changer/index. |
+| `div>div` | 33 | angular/docs/src/app/pages/component-sidenav/component-sidenav.html, angular/docs/src/app/shared/example-viewer/example- |
+| `replaceme>replaceme` | 33 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `>html` | 32 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `html>style` | 28 | wpt/css/css-animations/CSSAnimation-getKeyframes-crash.html, wpt/css/css-animations/animate-bg-color-with-change-during- |
+| `head>meta` | 27 | django/django/contrib/admin/templates/admin/base.html, django/django/views/templates/default_urlconf.html, django/django |
+| `>div` | 22 | angular/src/material/stepper/stepper.html, angular/src/material/tabs/tab-group.html, django/django/contrib/auth/template |
+| `head>title` | 22 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `head>body` | 21 | html5lib/tests1.dat:103, html5lib/tests1.dat:121, html5lib/tests1.dat:1548 |
+| `html>div` | 18 | wpt/css/selectors/invalidation/negated-always-matches-negated-first-of-type-when-ancestor-changes.html, wpt/css/selector |
+| `html>head` | 16 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `>frameset` | 16 | html5lib/foreign-fragment.dat:491, html5lib/plain-text-unsafe.dat:317, html5lib/tests19.dat:738 |
+| `>body` | 15 | html5lib/foreign-fragment.dat:509, html5lib/foreign-fragment.dat:536, wpt/html/semantics/scripting-1/the-script-element/ |
+| `>col` | 15 | html5lib/template.dat:531, html5lib/template.dat:1004, html5lib/template.dat:1018 |
+| `html>body` | 14 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/popup_response.html,  |
+| `>head` | 14 | html5lib/foreign-fragment.dat:500, html5lib/tests15.dat:45, html5lib/tests2.dat:434 |
+| `>table` | 14 | html5lib/template.dat:1144, html5lib/tests1.dat:372, html5lib/tests1.dat:1387 |
+| `tr>td` | 12 | angular/src/components-examples/material/table/table-wrapped/table-wrapped-example.html, angular/src/material/datepicker |
+| `>mat-pseudo-checkbox` | 12 | angular/src/dev-app/checkbox/checkbox-demo.html |
+| `body>div` | 12 | django/django/contrib/admin/templates/admin/base.html, dom-examples/web-speech-api/audio-track-recognition/index.html, h |
+| `head>style` | 12 | django/django/views/templates/default_urlconf.html, wpt/css/css-fonts/font-features-two-stylesheets-crash.html, wpt/css/ |
+| `>meta` | 11 | html5lib/tests1.dat:1412, wpt/css/css-fonts/language-specific-01.html, wpt/html/syntax/charset/after-head-after-1kb-crlf |
+
+### Attribute (tag@name) count differences (positive: parse5 has more)
+
+| tag@attr | delta | examples |
+|---|---:|---|
+| `font@size` | 41 | html5lib/scripted/ark.dat:1, html5lib/tests23.dat:1, html5lib/tests23.dat:41 |
+| `replaceme_container_tag@replaceme_src_attr` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `replaceme_container_tag@class` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `link@{%` | 23 | django/django/contrib/admin/templates/admin/auth/user/add_form.html, django/django/contrib/admin/templates/admin/auth/us |
+| `link@csp_nonce_attr` | 23 | django/django/contrib/admin/templates/admin/auth/user/add_form.html, django/django/contrib/admin/templates/admin/auth/us |
+| `link@%}` | 23 | django/django/contrib/admin/templates/admin/auth/user/add_form.html, django/django/contrib/admin/templates/admin/auth/us |
+| `link@admin` | 21 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `link@css` | 21 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `link@%}"` | 21 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `script@{%` | 10 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/change_form.html, dja |
+| `script@csp_nonce_attr` | 10 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/change_form.html, dja |
+| `script@%}` | 10 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/change_form.html, dja |
+| `div@{%` | 9 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `input@{%` | 9 | django/django/contrib/admin/templates/admin/search_form.html, django/django/contrib/admin/templates/admin/widgets/cleara |
+| `input@%}` | 9 | django/django/contrib/admin/templates/admin/search_form.html, django/django/contrib/admin/templates/admin/widgets/cleara |
+| `b@id` | 9 | html5lib/adoption01.dat:159, html5lib/scripted/adoption01.dat:1, html5lib/tests23.dat:135 |
+| `div@if` | 7 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `link@widgets.css"` | 6 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `link@forms.css"` | 6 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `div@endif` | 6 | django/django/contrib/admin/templates/admin/includes/fieldset.html, django/django/contrib/admin/templates/admin/widgets/ |
+| `source@srcset` | 127 | live/apple.html |
+| `source@media` | 127 | live/apple.html |
+| `li@class` | 88 | django/django/contrib/admin/templates/admin/filter.html, django/django/forms/jinja2/django/forms/ul.html, django/django/ |
+| `ul@class` | 85 | live/bbc.html |
+| `a@class` | 84 | live/bbc.html |
+| `a@href` | 78 | html5lib/tests1.dat:1149, html5lib/tests1.dat:1204, html5lib/tests26.dat:1 |
+| `source@type` | 63 | live/apple.html |
+| `img@alt` | 54 | live/apple.html, live/wikipedia-css.html, live/wikipedia-html.html |
+| `replaceme@_container_tag` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `replaceme@replaceme_src_attr` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `replaceme@class` | 35 | wpt/css/css-images/tools/template-object-fit-test.html, wpt/css/css-images/tools/template-object-position-test.html |
+| `img@data-src` | 27 | live/apple.html |
+| `img@src` | 26 | live/apple.html, live/guardian.html, live/wikipedia-css.html |
+| `html@class` | 18 | html5lib/foreign-fragment.dat:527, html5lib/noscript01.dat:14, wpt/css/selectors/invalidation/negated-always-matches-neg |
+| `picture@class` | 14 | live/apple.html |
+| `div@{% endif %}` | 11 | django/django/contrib/admin/templates/admin/widgets/related_widget_wrapper.html, django/django/contrib/admin/templates/r |
+| `link@{% csp_nonce_attr %}` | 9 | django/django/contrib/admin/templates/admin/auth/user/add_form.html, django/django/contrib/admin/templates/admin/index.h |
+| `input@{% endif %}` | 9 | django/django/contrib/admin/templates/admin/search_form.html, django/django/contrib/admin/templates/admin/widgets/cleara |
+| `html@lang` | 7 | django/django/views/templates/default_urlconf.html, django/django/views/templates/directory_index.html, dom-examples/web |
+| `td@class` | 6 | angular/src/components-examples/material/table/table-wrapped/table-wrapped-example.html, angular/src/material/datepicker |
+
+### Attribute name=value pairs parse5 has that axiom lacks (876 total)
+
+| name=value | files | examples |
+|---|---:|---|
+| `{%=` | 51 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/add_for |
+| `%}=` | 41 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/add_for |
+| `endif=` | 28 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/filter.html, djan |
+| `if=` | 23 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/includes/fieldset |
+| `%}"=` | 17 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `%}{%=` | 16 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/widgets/clearable_fil |
+| `csp_nonce_attr=` | 15 | django/django/contrib/admin/templates/admin/auth/user/add_form.html, django/django/contrib/admin/templates/admin/auth/us |
+| `admin=` | 15 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `css=` | 9 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `href={% static ` | 8 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `field.auto_id=` | 8 | django/django/forms/jinja2/django/forms/field.html, django/django/forms/jinja2/django/forms/p.html, django/django/forms/ |
+| `include=` | 8 | django/django/forms/jinja2/django/forms/widgets/input.html, django/django/forms/jinja2/django/forms/widgets/select.html, |
+| `class=show_output` | 7 | wpt/html/semantics/embedded-content/the-canvas-element/security.dataURI.html, wpt/html/semantics/embedded-content/the-ca |
+| `src={% static ` | 6 | django/django/contrib/admin/templates/admin/edit_inline/tabular.html, django/django/contrib/admin/templates/admin/popup_ |
+| `"django=` | 6 | django/django/forms/jinja2/django/forms/widgets/select.html, django/django/forms/jinja2/django/forms/widgets/select_opti |
+| `forms=` | 6 | django/django/forms/jinja2/django/forms/widgets/select.html, django/django/forms/jinja2/django/forms/widgets/select_opti |
+| `widgets=` | 6 | django/django/forms/jinja2/django/forms/widgets/select.html, django/django/forms/jinja2/django/forms/widgets/select_opti |
+| `attrs.html"=` | 6 | django/django/forms/jinja2/django/forms/widgets/select.html, django/django/forms/jinja2/django/forms/widgets/select_opti |
+| `widgets.css"=` | 5 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `size=4` | 5 | html5lib/scripted/ark.dat:1, html5lib/tests23.dat:1, html5lib/tests23.dat:41 |
+| `endwith=` | 4 | django/django/forms/templates/django/forms/div.html, django/django/forms/templates/django/forms/p.html, django/django/fo |
+| `<=` | 4 | html5lib/webkit01.dat:662, wpt/css/css-animations/CSSAnimation-compositeOrder.tentative.html, wpt/css/css-fonts/remove-l |
+| `href=//{{domains[nonexistent]}}:{{ports[http][0]}}` | 4 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-in-dsd-framed.sub.html, wpt/html/syntax/speculati |
+| `img=` | 3 | django/django/contrib/admin/templates/admin/edit_inline/tabular.html, django/django/contrib/admin/templates/admin/search |
+| `js=` | 3 | django/django/contrib/admin/templates/admin/popup_response.html, django/django/contrib/admin/templates/admin/prepopulate |
+| `widget.attrs.disabled=` | 3 | django/django/contrib/admin/templates/admin/widgets/clearable_file_input.html, django/django/forms/jinja2/django/forms/w |
+| `disabled{%=` | 3 | django/django/contrib/admin/templates/admin/widgets/clearable_file_input.html, django/django/forms/jinja2/django/forms/w |
+| `widget.attrs.checked=` | 3 | django/django/contrib/admin/templates/admin/widgets/clearable_file_input.html, django/django/forms/jinja2/django/forms/w |
+| `}}"=` | 3 | django/django/contrib/admindocs/templates/admin_doc/template_filter_index.html, django/django/contrib/admindocs/template |
+| `type=data` | 3 | html5lib/domjs-unsafe.dat:116, html5lib/domjs-unsafe.dat:132, html5lib/domjs-unsafe.dat:144 |
+| `{{=` | 2 | django/django/contrib/admin/templates/admin/change_list_results.html, django/tests/admin_views/templates/admin/admin_vie |
+| `header.class_attrib=` | 2 | django/django/contrib/admin/templates/admin/change_list_results.html, django/tests/admin_views/templates/admin/admin_vie |
+| `}}=` | 2 | django/django/contrib/admin/templates/admin/change_list_results.html, django/tests/admin_views/templates/admin/admin_vie |
+| `title={% translate ` | 2 | django/django/contrib/admin/templates/admin/change_list_results.html, django/tests/admin_views/templates/admin/admin_vie |
+| `remove=` | 2 | django/django/contrib/admin/templates/admin/change_list_results.html, django/tests/admin_views/templates/admin/admin_vie |
+| `from=` | 2 | django/django/contrib/admin/templates/admin/change_list_results.html, django/tests/admin_views/templates/admin/admin_vie |
+| `sorting"=` | 2 | django/django/contrib/admin/templates/admin/change_list_results.html, django/tests/admin_views/templates/admin/admin_vie |
+| `prepopulate_init.js"=` | 2 | django/django/contrib/admin/templates/admin/prepopulated_fields_js.html, django/tests/admin_views/templates/admin/admin_ |
+| `search.svg"=` | 2 | django/django/contrib/admin/templates/admin/search_form.html, django/tests/admin_views/templates/admin/admin_views/artic |
+| `not=` | 2 | django/django/contrib/admin/templates/admin/widgets/related_widget_wrapper.html, django/django/contrib/gis/templates/gis |
+
+### Attribute name=value pairs axiom has that parse5 lacks
+
+| name=value | files | examples |
+|---|---:|---|
+| `{% endif %}=` | 34 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/change_ |
+| `{% csp_nonce_attr %}=` | 16 | django/django/contrib/admin/templates/admin/auth/user/add_form.html, django/django/contrib/admin/templates/admin/auth/us |
+| `class=reftest-wait` | 15 | wpt/css/selectors/invalidation/negated-always-matches-negated-first-of-type-when-ancestor-changes.html, wpt/css/selector |
+| `{% include "django/forms/widgets/attrs.html" %}=` | 11 | django/django/contrib/admin/templates/admin/widgets/clearable_file_input.html, django/django/forms/jinja2/django/forms/w |
+| `{% if classes %}=` | 8 | django/django/forms/jinja2/django/forms/div.html, django/django/forms/jinja2/django/forms/p.html, django/django/forms/ji |
+| `{% if field.auto_id %}=` | 8 | django/django/forms/jinja2/django/forms/field.html, django/django/forms/jinja2/django/forms/p.html, django/django/forms/ |
+| `lang=en` | 7 | django/django/views/templates/directory_index.html, dom-examples/web-speech-api/audio-track-recognition/index.html, dom- |
+| `href={% static "admin/css/widgets.css" %}` | 6 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `href={% static "admin/css/forms.css" %}` | 6 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `href=//` | 6 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-href-script-src-framed.sub.html, wpt/html/syntax/ |
+| `:=` | 6 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-href-script-src-framed.sub.html, wpt/html/syntax/ |
+| `{{ports[http][0]}}=` | 6 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-href-script-src-framed.sub.html, wpt/html/syntax/ |
+| `class=foo` | 5 | html5lib/foreign-fragment.dat:527, html5lib/foreign-fragment.dat:536, html5lib/noscript01.dat:14 |
+| `{% endwith %}=` | 4 | django/django/forms/templates/django/forms/div.html, django/django/forms/templates/django/forms/p.html, django/django/fo |
+| `alt=` | 4 | live/wikipedia-css.html, live/wikipedia-html.html, parse5-loc/dx/data.html |
+| `width=1` | 4 | live/wikipedia-css.html, live/wikipedia-html.html, parse5-loc/dx/data.html |
+| `height=1` | 4 | live/wikipedia-css.html, live/wikipedia-html.html, parse5-loc/dx/data.html |
+| `{{domains[nonexistent]}}=` | 4 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-in-dsd-framed.sub.html, wpt/html/syntax/speculati |
+| `charset=windows-1253` | 4 | wpt/html/syntax/xmldecl/support/meta-inside-xml-charset-before-encoding-trail.htm, wpt/html/syntax/xmldecl/support/meta- |
+| `encoding=windows-1251` | 4 | wpt/html/syntax/xmldecl/support/meta-inside-xml-charset-before-encoding-trail.htm, wpt/html/syntax/xmldecl/support/meta- |
+| `?=` | 4 | wpt/html/syntax/xmldecl/support/meta-inside-xml-charset-before-encoding-trail.htm, wpt/html/syntax/xmldecl/support/meta- |
+| `{=` | 3 | angular/src/components-examples/aria/combobox/combobox-datepicker/combobox-datepicker-example.html, angular/src/componen |
+| `aria-hidden=true` | 3 | angular/src/material/datepicker/calendar-body.html, live/apple.html, live/shopify.html |
+| `{% if widget.attrs.disabled %}=` | 3 | django/django/contrib/admin/templates/admin/widgets/clearable_file_input.html, django/django/forms/jinja2/django/forms/w |
+| `disabled=` | 3 | django/django/contrib/admin/templates/admin/widgets/clearable_file_input.html, django/django/forms/jinja2/django/forms/w |
+
+### URLs parse5 sees in URL attributes that axiom has no reference row for (55 total)
+
+| url | files | examples |
+|---|---:|---|
+| `{% static` | 15 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `foo` | 9 | html5lib/tests1.dat:1149, html5lib/tests10.dat:376, html5lib/tests10.dat:388 |
+| `//{{domains[nonexistent]}}:{{ports[http][0]}}` | 4 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-in-dsd-framed.sub.html, wpt/html/syntax/speculati |
+| `#{{ library.grouper\|default:` | 2 | django/django/contrib/admindocs/templates/admin_doc/template_filter_index.html, django/django/contrib/admindocs/template |
+| `//{{domains[www1]}}:{{ports[http][0]}}` | 2 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-href-script-src-framed.sub.html, wpt/html/syntax/ |
+| `{% block stylesheet %}{% static` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{% block stylesheet_rtl %}{% static` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{{ password_url\|default:` | 1 | django/django/contrib/auth/templates/auth/widgets/read_only_password_hash.html |
+| `blah` | 1 | html5lib/tests1.dat:1204 |
+| `#2` | 1 | html5lib/tests26.dat:1 |
+| `#3` | 1 | html5lib/tests26.dat:1 |
+| `javascript:(() => { parent.javascriptUrlRan = true; })()` | 1 | wpt/html/semantics/embedded-content/the-iframe-element/resources/javascript_url_form_submission.html |
+| `scripts/include-1.js` | 1 | wpt/html/semantics/scripting-1/the-script-element/execution-timing/139.html |
+| `/resources/testharness.js` | 1 | wpt/html/semantics/scripting-1/the-script-element/script-text-xhtml.xhtml |
+| `support/svg-script-self-closing.js` | 1 | wpt/html/syntax/parsing/unclosed-svg-script.html |
+
+### URL reference rows axiom has that the reference does not
+
+| url | files | examples |
+|---|---:|---|
+| `{% static "admin/css/widgets.css" %}` | 6 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `{% static "admin/css/forms.css" %}` | 6 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `//` | 6 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/base-href-script-src-framed.sub.html, wpt/html/syntax/ |
+| `{% static "admin/js/prepopulate_init.js" %}` | 2 | django/django/contrib/admin/templates/admin/prepopulated_fields_js.html, django/tests/admin_views/templates/admin/admin_ |
+| `{% static "admin/img/search.svg" %}` | 2 | django/django/contrib/admin/templates/admin/search_form.html, django/tests/admin_views/templates/admin/admin_views/artic |
+| `https://en.wikipedia.org/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&us` | 2 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `/html/syntax/speculative-parsing/resources/stash.py?action=put&uuid={{GET[uuid]}}&encoding` | 2 | wpt/html/syntax/speculative-parsing/generated/page-load/resources/xmp-script-src-framed.sub.html, wpt/html/syntax/specul |
+| `{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{% static "admin/css/dark_mode.css" %}` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{% static "admin/js/theme.js" %}` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{% static "admin/css/nav_sidebar.css" %}` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{% static "admin/css/responsive.css" %}` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{% static "admin/css/responsive_rtl.css" %}` | 1 | django/django/contrib/admin/templates/admin/base.html |
+| `{{ form_url }}` | 1 | django/django/contrib/admin/templates/admin/change_form.html |
+| `{% static "admin/css/changelists.css" %}` | 1 | django/django/contrib/admin/templates/admin/change_list.html |
+| `{% static "admin/img/icon-unknown.svg" %}` | 1 | django/django/contrib/admin/templates/admin/edit_inline/tabular.html |
+| `{% static "admin/css/dashboard.css" %}` | 1 | django/django/contrib/admin/templates/admin/index.html |
+| `{% static "admin/css/login.css" %}` | 1 | django/django/contrib/admin/templates/admin/login.html |
+| `{% static "admin/js/popup_response.js" %}` | 1 | django/django/contrib/admin/templates/admin/popup_response.html |
+
+### Attributes carrying URL-looking values that axiom never references (candidates for URL_ATTRIBUTES)
+
+| tag@attr | occurrences | examples |
+|---|---:|---|
+| `svg@xmlns` | 632 | angular/docs/src/app/shared/example-viewer/example-viewer.html, angular/src/material/expansion/expansion-panel-header.ht |
+| `a@data-zjs-destination_url` | 342 | live/cnn.html |
+| `a@data-zjs-component_id` | 322 | live/cnn.html |
+| `link@about` | 290 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `span@about` | 273 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `sup@about` | 219 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `code@about` | 198 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `li@about` | 184 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `cite@about` | 165 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `stop@stop-color` | 154 | live/mdn-html.html, live/react.html, live/reddit.html |
+| `img@data-expect` | 144 | wpt/html/semantics/embedded-content/the-img-element/srcset/parse-a-srcset-attribute.html, wpt/html/semantics/embedded-co |
+| `li@data-open-link` | 134 | live/cnn.html |
+| `div@data-url` | 129 | django/tests/utils_tests/files/strip_tags1.html, live/cnn.html, parse5-loc/github-parse5/data.html |
+| `div@data-name` | 120 | live/cnn.html |
+| `path@fill` | 112 | django/django/views/templates/default_urlconf.html, live/cnn.html, live/guardian.html |
+| `div@about` | 82 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `path@stroke` | 61 | live/react.html, live/wix.html |
+| `button@data-bs-target` | 55 | bootstrap/js/tests/integration/index.html, bootstrap/js/tests/visual/carousel.html, bootstrap/js/tests/visual/dropdown.h |
+| `li@data-url` | 50 | live/cnn.html |
+| `li@data-thumbnail` | 50 | live/cnn.html |
+| `img@resource` | 39 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `html@xmlns` | 37 | live/apple.html, live/microsoft.html, parse5-loc/dx/data.html |
+| `a@about` | 35 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `style@about` | 34 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `style@data-href` | 29 | live/wix.html |
+| `link@data-mw` | 19 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `th@th:text` | 19 | petclinic/src/main/resources/templates/owners/ownerDetails.html, petclinic/src/main/resources/templates/owners/ownersLis |
+| `b@data-remote` | 17 | django/tests/utils_tests/files/strip_tags1.html |
+| `link@data-href` | 14 | live/github.html |
+| `a@data-discussion-id` | 14 | live/guardian.html |
+| `script@data-url` | 14 | live/wix.html |
+| `span@th:text` | 13 | petclinic/src/main/resources/templates/error.html, petclinic/src/main/resources/templates/fragments/inputField.html, pet |
+| `html@xmlns:th` | 12 | petclinic/src/main/resources/templates/error.html, petclinic/src/main/resources/templates/fragments/inputField.html, pet |
+| `a@data-mw-original-href` | 11 | live/wikipedia-css.html, live/wikipedia-html.html |
+| `div@itemtype` | 10 | django/tests/utils_tests/files/strip_tags1.html, live/whatwg-html-spec.html, parse5-loc/github-parse5/data.html |
+| `a@routerlink` | 9 | angular/docs/src/app/pages/guide-list/guide-list.html, angular/docs/src/app/pages/homepage/homepage.html, angular/docs/s |
+| `p@itemtype` | 9 | live/whatwg-html-spec.html |
+| `img@data-narrow` | 9 | wpt/html/semantics/embedded-content/the-img-element/environment-changes/iframed.sub.html |
+| `img@data-wide` | 9 | wpt/html/semantics/embedded-content/the-img-element/environment-changes/iframed.sub.html |
+| `button@data-login-href` | 8 | live/cnn.html |
+
+### Class token differences
+
+| class | delta | examples |
+|---|---:|---|
+| `%}` | 51 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/change_ |
+| `if` | 36 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/change_ |
+| `}}` | 23 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/base.html, django |
+| `endif` | 22 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `{{` | 22 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/change_list_results.h |
+| `flex-container{%` | 8 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/regist |
+| `errors{%` | 8 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/regist |
+| `{%` | 8 | django/django/contrib/admin/templates/admin/base.html, django/django/contrib/admin/templates/admin/edit_inline/tabular.h |
+| `classes` | 8 | django/django/forms/jinja2/django/forms/div.html, django/django/forms/jinja2/django/forms/p.html, django/django/forms/ji |
+| `show_output` | 7 | wpt/html/semantics/embedded-content/the-canvas-element/security.dataURI.html, wpt/html/semantics/embedded-content/the-ca |
+| `NoJsNavigation-styles__NoJsListStyled-sc-a2077f0f-1` | 85 | live/bbc.html |
+| `Navigation-styles__MainNavigationLink-sc-f1c1fa10-4` | 84 | live/bbc.html |
+| `gkFqwf` | 84 | live/bbc.html |
+| `reftest-wait` | 15 | wpt/css/selectors/invalidation/negated-always-matches-negated-first-of-type-when-ancestor-changes.html, wpt/css/selector |
+| `flex-container` | 8 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/regist |
+| `errors` | 8 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/regist |
+| `static` | 8 | live/apple.html |
+| `foo` | 5 | html5lib/foreign-fragment.dat:527, html5lib/foreign-fragment.dat:536, html5lib/noscript01.dat:14 |
+| `headline` | 5 | live/apple.html |
+| `mat-calendar-body-label` | 2 | angular/src/material/datepicker/calendar-body.html |
+
+### Id differences
+
+| id | delta | examples |
+|---|---:|---|
+| `` | 18 | django/django/forms/jinja2/django/forms/widgets/multiple_input.html, django/django/forms/templates/django/forms/widgets/ |
+| `a` | 8 | html5lib/tests23.dat:101, html5lib/tests23.dat:135 |
+| `{{ library.grouper\|default:` | 2 | django/django/contrib/admindocs/templates/admin_doc/template_filter_index.html, django/django/contrib/admindocs/template |
+| `A` | 2 | html5lib/adoption01.dat:159, html5lib/scripted/adoption01.dat:1 |
+| `B` | 2 | html5lib/adoption01.dat:159 |
+| `b` | 2 | html5lib/tests23.dat:101 |
+| `x` | 2 | html5lib/tests2.dat:697, html5lib/tests2.dat:709 |
+| `{{ library.grouper\|default:"built_in" }}-{{ filter.name }}` | 1 | django/django/contrib/admindocs/templates/admin_doc/template_filter_index.html |
+| `{{ library.grouper\|default:"built_in" }}-{{ tag.name }}` | 1 | django/django/contrib/admindocs/templates/admin_doc/template_tag_index.html |
+| `challenge-error-text` | 1 | live/stackoverflow.html |
+| `log` | 1 | wpt/html/semantics/scripting-1/the-script-element/script-text-xhtml.xhtml |
+| `noScriptContent` | 1 | wpt/html/syntax/parsing/noscript-template-querySelector.html |
+
+### Title mismatches
+
+| parse5 vs axiom | files | examples |
+|---|---:|---|
+| `"<!--<title>" vs "<!--<title></title>-->"` | 2 | html5lib/tests16.dat:1066, html5lib/tests16.dat:2338 |
+| `"test</body>" vs "test"` | 1 | html5lib/tests2.dat:609 |
+| `"abc" vs ""` | 1 | html5lib/tests20.dat:639 |
+| `"foo<span>bar</em><i>baz" vs ""` | 1 | html5lib/tests3.dat:192 |
+| `"" vs "content"` | 1 | html5lib/tests4.dat:60 |
+| `"<!--" vs "<!-- </title> -->"` | 1 | html5lib/tests5.dat:91 |
+
+### Parse gaps. Files with axiom gaps: 897; with parse5 errors: 2497; axiom gaps where parse5 is clean (false positives): 388; parse5 errors with no axiom gap: 1988
+
+| axiom gap kind/head | count | examples |
+|---|---:|---|
+| `PARSE_ERROR/syntax-error` | 843 | angular/src/dev-app/checkbox/checkbox-demo.html, angular/src/material/paginator/paginator.html, html5lib/adoption01.dat: |
+| `PARSE_ERROR/duplicate-attribute` | 151 | angular/src/components-examples/aria/combobox/combobox-datepicker/combobox-datepicker-example.html, angular/src/componen |
+| `PARSE_ERROR/erroneous-end-tag` | 46 | html5lib/adoption01.dat:83, html5lib/inbody01.dat:1, html5lib/inbody01.dat:29 |
+| `PARSE_ERROR/missing-token` | 24 | html5lib/tests16.dat:108, html5lib/tests16.dat:120, html5lib/tests16.dat:194 |
+| `STYLE_ATTRIBUTE_SYNTAX/syntax error` | 11 | parse5-loc/dx/data.html, parse5-loc/wiki-42/data.html, wpt/css/css-syntax/unclosed-url-at-eof.html |
+| `HANDLER_SYNTAX/onclick` | 4 | django/django/views/templates/technical_500.html, dom-examples/launch-handler/index.html |
+| `STYLE_ATTRIBUTE_SYNTAX/missing )` | 2 | wpt/css/css-variables/missing-closing-nested-fallback-crash.html, wpt/css/css-variables/missing-closing-nested-fallback. |
+| `STYLE_ATTRIBUTE_SYNTAX/empty value for animation-name` | 1 | wpt/css/css-animations/parsing/animation-name-edge-cases.html |
+
+#### Gap text where parse5 reports no error (digits replaced by #)
+
+| gap | files | examples |
+|---|---:|---|
+| `PARSE_ERROR syntax-error: </html>` | 14 | html5lib/tests15.dat:45, html5lib/tests16.dat:1196, html5lib/tests18.dat:309 |
+| `PARSE_ERROR syntax-error: </body>` | 7 | html5lib/tests15.dat:57, html5lib/tests15.dat:78, html5lib/tests2.dat:697 |
+| `PARSE_ERROR syntax-error: ></script>` | 5 | html5lib/tests16.dat:877, html5lib/tests16.dat:888, html5lib/tests16.dat:899 |
+| `PARSE_ERROR syntax-error: </body> </html>` | 5 | wpt/html/semantics/embedded-content/the-audio-element/audio-loading-load-deferred.html, wpt/html/semantics/embedded-cont |
+| `PARSE_ERROR syntax-error: <&>` | 5 | wpt/html/syntax/serializing-html-fragments/serializing.html |
+| `HANDLER_SYNTAX onclick: template expression in handler` | 4 | django/django/views/templates/technical_500.html, dom-examples/launch-handler/index.html |
+| `PARSE_ERROR syntax-error: </em>` | 4 | html5lib/adoption01.dat:339, html5lib/webkit02.dat:162, html5lib/webkit02.dat:261 |
+| `PARSE_ERROR syntax-error: ></style>` | 3 | html5lib/tests16.dat:964, html5lib/tests16.dat:989, html5lib/tests16.dat:1014 |
+| `PARSE_ERROR syntax-error: </head>` | 3 | html5lib/tests18.dat:64, html5lib/tests2.dat:669, wpt/css/css-cascade/revert-val-002.html |
+| `PARSE_ERROR syntax-error: </table><tr>` | 3 | html5lib/tests6.dat:495, html5lib/tests6.dat:573, html5lib/tests_innerHTML_1.dat:93 |
+| `STYLE_ATTRIBUTE_SYNTAX syntax error: ;` | 3 | parse5-loc/wiki-42/data.html |
+| `STYLE_ATTRIBUTE_SYNTAX syntax error: ;;` | 3 | parse5-loc/wiki-42/data.html |
+| `PARSE_ERROR syntax-error: <body class="show_output"> <h#>toDataURL.jpe` | 3 | wpt/html/semantics/embedded-content/the-canvas-element/toDataURL.jpeg.alpha.html, wpt/html/semantics/embedded-content/th |
+| `PARSE_ERROR syntax-error: </path>X` | 2 | html5lib/foreign-fragment.dat:32, html5lib/foreign-fragment.dat:43 |
+| `PARSE_ERROR syntax-error: <math><tr><td><mo><tr>` | 2 | html5lib/math.dat:1, html5lib/math.dat:14 |
+| `PARSE_ERROR erroneous-end-tag: </menuitem>` | 2 | html5lib/menuitem-element.dat:89, html5lib/menuitem-element.dat:118 |
+| `PARSE_ERROR syntax-error: <svg><tr><td><title><tr>` | 2 | html5lib/svg.dat:1, html5lib/svg.dat:14 |
+| `PARSE_ERROR erroneous-end-tag: </body>` | 2 | html5lib/tests1.dat:461, html5lib/tests19.dat:265 |
+| `PARSE_ERROR syntax-error: <body><table><caption><svg><g>foo</g><g>bar<` | 2 | html5lib/tests10.dat:193, html5lib/tests10.dat:214 |
+| `PARSE_ERROR erroneous-end-tag: </html>` | 2 | html5lib/tests15.dat:206, html5lib/tests19.dat:1031 |
+| `PARSE_ERROR syntax-error: </b>f` | 2 | html5lib/tests19.dat:1102, html5lib/tests19.dat:1169 |
+| `PARSE_ERROR syntax-error: <p><button><h#>` | 2 | html5lib/tests20.dat:340, html5lib/tests20.dat:353 |
+| `PARSE_ERROR syntax-error: </frameset>` | 2 | html5lib/tests6.dat:387, html5lib/tests_innerHTML_1.dat:828 |
+| `PARSE_ERROR syntax-error: </tr><td>` | 2 | html5lib/tests6.dat:432, html5lib/tests_innerHTML_1.dat:511 |
+| `PARSE_ERROR syntax-error: <body><table><caption><math><mi>foo</mi><mi>` | 2 | html5lib/tests9.dat:227, html5lib/tests9.dat:248 |
+| `PARSE_ERROR syntax-error: <body><span>` | 2 | html5lib/tests_innerHTML_1.dat:1, html5lib/tests_innerHTML_1.dat:31 |
+| `PARSE_ERROR syntax-error: <frameset><span>` | 2 | html5lib/tests_innerHTML_1.dat:42, html5lib/tests_innerHTML_1.dat:72 |
+| `PARSE_ERROR syntax-error: <span><frameset>` | 2 | html5lib/tests_innerHTML_1.dat:52, html5lib/tests_innerHTML_1.dat:62 |
+| `PARSE_ERROR syntax-error: <a><tr>` | 2 | html5lib/tests_innerHTML_1.dat:170, html5lib/tests_innerHTML_1.dat:473 |
+| `PARSE_ERROR syntax-error: <a><td>` | 2 | html5lib/tests_innerHTML_1.dat:194, html5lib/tests_innerHTML_1.dat:483 |
+| `PARSE_ERROR syntax-error: <caption><a>` | 2 | html5lib/tests_innerHTML_1.dat:396, html5lib/tests_innerHTML_1.dat:617 |
+| `PARSE_ERROR syntax-error: <tbody><a>` | 2 | html5lib/tests_innerHTML_1.dat:429, html5lib/tests_innerHTML_1.dat:647 |
+| `PARSE_ERROR syntax-error: <tfoot><a>` | 2 | html5lib/tests_innerHTML_1.dat:440, html5lib/tests_innerHTML_1.dat:657 |
+| `PARSE_ERROR syntax-error: <thead><a>` | 2 | html5lib/tests_innerHTML_1.dat:451, html5lib/tests_innerHTML_1.dat:677 |
+| `PARSE_ERROR syntax-error: </table><a>` | 2 | html5lib/tests_innerHTML_1.dat:462, html5lib/tests_innerHTML_1.dat:697 |
+| `STYLE_ATTRIBUTE_SYNTAX syntax error: (--token-#fea#-#b#e-#ed#-#-#e#c#c` | 2 | wpt/css/css-variables/missing-closing-nested-fallback-crash.html, wpt/css/css-variables/missing-closing-nested-fallback. |
+| `STYLE_ATTRIBUTE_SYNTAX missing )` | 2 | wpt/css/css-variables/missing-closing-nested-fallback-crash.html, wpt/css/css-variables/missing-closing-nested-fallback. |
+| `PARSE_ERROR syntax-error: <body class="show_output"> <h#>toDataURL.png` | 2 | wpt/html/semantics/embedded-content/the-canvas-element/toDataURL.png.complexcolours.html, wpt/html/semantics/embedded-co |
+| `PARSE_ERROR syntax-error: <address>bar<p>baz` | 1 | html5lib/blocks.dat:1 |
+| `PARSE_ERROR syntax-error: <article>bar<p>baz` | 1 | html5lib/blocks.dat:30 |
+
+#### parse5 error codes in files where axiom recorded no gap
+
+| parse5 code | files | examples |
+|---|---:|---|
+| `missing-doctype` | 1731 | angular/docs/scenes/src/app/scene-viewer/scene-viewer.html, angular/docs/scenes/src/app/scenes/autocomplete/autocomplete |
+| `unexpected-question-mark-instead-of-tag-name` | 126 | html5lib/comments01.dat:155, html5lib/comments01.dat:169, html5lib/comments01.dat:182 |
+| `non-void-html-element-start-tag-with-trailing-solidus` | 89 | angular/docs/scenes/src/app/scene-viewer/scene-viewer.html, angular/docs/scenes/src/app/scenes/datepicker/datepicker-sce |
+| `abandoned-head-element-child` | 64 | html5lib/template.dat:1534, html5lib/template.dat:1547, html5lib/template.dat:1560 |
+| `missing-whitespace-between-attributes` | 57 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/change_ |
+| `unexpected-null-character` | 54 | html5lib/domjs-unsafe.dat:42, html5lib/domjs-unsafe.dat:56, html5lib/domjs-unsafe.dat:71 |
+| `non-conforming-doctype` | 53 | html5lib/doctype01.dat:48, html5lib/doctype01.dat:62, html5lib/doctype01.dat:73 |
+| `unexpected-character-in-unquoted-attribute-value` | 46 | html5lib/html5test-com.dat:27, wpt/html/semantics/embedded-content/media-elements/track/track-element/cors/003.html, wpt |
+| `unexpected-character-in-attribute-name` | 38 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `control-character-reference` | 36 | html5lib/entities01.dat:295, html5lib/entities01.dat:308, html5lib/entities01.dat:321 |
+| `unexpected-solidus-in-tag` | 35 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `duplicate-attribute` | 33 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/change_ |
+| `missing-semicolon-after-character-reference` | 31 | html5lib/entities01.dat:11, html5lib/entities01.dat:24, html5lib/entities01.dat:47 |
+| `eof-in-element-that-can-contain-only-text` | 24 | html5lib/scriptdata01.dat:201, html5lib/scriptdata01.dat:218, html5lib/scriptdata01.dat:235 |
+| `misplaced-start-tag-for-head-element` | 22 | html5lib/noscript01.dat:157, html5lib/template.dat:1560, html5lib/tests3.dat:159 |
+| `eof-in-script-html-comment-like-text` | 13 | html5lib/scriptdata01.dat:201, html5lib/scriptdata01.dat:218, html5lib/scriptdata01.dat:235 |
+| `end-tag-without-matching-open-element` | 12 | html5lib/menuitem-element.dat:141, html5lib/menuitem-element.dat:151, html5lib/noscript01.dat:183 |
+| `closing-of-element-with-open-child-elements` | 10 | html5lib/template.dat:384, html5lib/template.dat:901, html5lib/template.dat:986 |
+| `character-reference-outside-unicode-range` | 8 | html5lib/entities01.dat:829, html5lib/entities01.dat:842, html5lib/entities01.dat:855 |
+| `absence-of-digits-in-numeric-character-reference` | 7 | html5lib/entities01.dat:158, html5lib/entities01.dat:171, html5lib/entities01.dat:197 |
+| `invalid-first-character-of-tag-name` | 6 | angular/src/material/datepicker/calendar-body.html, django/django/forms/jinja2/django/forms/label.html, django/django/fo |
+| `missing-quote-before-doctype-system-identifier` | 5 | html5lib/doctype01.dat:140, html5lib/doctype01.dat:154, html5lib/doctype01.dat:201 |
+| `disallowed-content-in-noscript-in-head` | 5 | html5lib/noscript01.dat:141, html5lib/noscript01.dat:196, html5lib/noscript01.dat:211 |
+| `invalid-character-sequence-after-doctype-name` | 4 | html5lib/doctype01.dat:84, html5lib/doctype01.dat:98, html5lib/doctype01.dat:215 |
+| `missing-whitespace-between-doctype-public-and-system-identifiers` | 4 | html5lib/doctype01.dat:420, html5lib/doctype01.dat:433, html5lib/doctype01.dat:446 |
+| `misplaced-doctype` | 4 | html5lib/domjs-unsafe.dat:359, html5lib/domjs-unsafe.dat:369, html5lib/domjs-unsafe.dat:379 |
+| `surrogate-character-reference` | 4 | html5lib/entities01.dat:731, html5lib/entities01.dat:744, html5lib/entities01.dat:757 |
+| `control-character-in-input-stream` | 4 | wpt/html/syntax/xmldecl/support/one-around-equals-trail.htm, wpt/html/syntax/xmldecl/support/one-around-equals.htm, wpt/ |
+| `end-tag-with-attributes` | 3 | django/django/contrib/admin/templates/admin/includes/fieldset.html, html5lib/scriptdata01.dat:82, html5lib/webkit01.dat: |
+| `missing-doctype-name` | 3 | html5lib/doctype01.dat:48, wpt/html/syntax/parsing/support/no-doctype-name-line.html, wpt/html/syntax/parsing/support/no |
+
+#### parse5 error code histogram
+
+| code | count | examples |
+|---|---:|---|
+| `unexpected-null-character` | 359992 | html5lib/domjs-unsafe.dat:42, html5lib/domjs-unsafe.dat:56, html5lib/domjs-unsafe.dat:71 |
+| `missing-doctype` | 2122 | angular/docs/scenes/src/app/scene-viewer/scene-viewer.html, angular/docs/scenes/src/app/scenes/autocomplete/autocomplete |
+| `invalid-first-character-of-tag-name` | 271 | angular/src/components-examples/aria/combobox/combobox-datepicker/combobox-datepicker-example.html, angular/src/componen |
+| `non-void-html-element-start-tag-with-trailing-solidus` | 211 | angular/docs/scenes/src/app/scene-viewer/scene-viewer.html, angular/docs/scenes/src/app/scenes/datepicker/datepicker-sce |
+| `unexpected-question-mark-instead-of-tag-name` | 189 | html5lib/comments01.dat:155, html5lib/comments01.dat:169, html5lib/comments01.dat:182 |
+| `eof-in-element-that-can-contain-only-text` | 152 | html5lib/domjs-unsafe.dat:116, html5lib/domjs-unsafe.dat:144, html5lib/scriptdata01.dat:68 |
+| `missing-whitespace-between-attributes` | 136 | django/django/contrib/admin/templates/admin/app_list.html, django/django/contrib/admin/templates/admin/auth/user/change_ |
+| `duplicate-attribute` | 135 | angular/src/dev-app/cdk-menu/cdk-menu-demo.html, angular/src/material/stepper/stepper.html, django/django/contrib/admin/ |
+| `abandoned-head-element-child` | 121 | html5lib/template.dat:1534, html5lib/template.dat:1547, html5lib/template.dat:1560 |
+| `unexpected-character-in-attribute-name` | 118 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `unexpected-solidus-in-tag` | 106 | django/django/contrib/admin/templates/admin/auth/user/change_password.html, django/django/contrib/admin/templates/admin/ |
+| `control-character-reference` | 98 | html5lib/entities01.dat:295, html5lib/entities01.dat:308, html5lib/entities01.dat:321 |
+| `missing-semicolon-after-character-reference` | 79 | html5lib/entities01.dat:11, html5lib/entities01.dat:24, html5lib/entities01.dat:47 |
+| `eof-in-script-html-comment-like-text` | 67 | html5lib/domjs-unsafe.dat:116, html5lib/domjs-unsafe.dat:144, html5lib/scriptdata01.dat:201 |
+| `non-conforming-doctype` | 63 | html5lib/doctype01.dat:34, html5lib/doctype01.dat:48, html5lib/doctype01.dat:62 |
+| `unexpected-character-in-unquoted-attribute-value` | 47 | html5lib/html5test-com.dat:27, wpt/html/semantics/embedded-content/media-elements/track/track-element/cors/003.html, wpt |
+| `end-tag-without-matching-open-element` | 24 | html5lib/menuitem-element.dat:141, html5lib/menuitem-element.dat:151, html5lib/noscript01.dat:183 |
+| `misplaced-start-tag-for-head-element` | 23 | html5lib/noscript01.dat:157, html5lib/template.dat:1560, html5lib/tests3.dat:159 |
+| `closing-of-element-with-open-child-elements` | 21 | html5lib/template.dat:61, html5lib/template.dat:384, html5lib/template.dat:901 |
+| `eof-in-tag` | 17 | html5lib/tests16.dat:120, html5lib/tests16.dat:206, html5lib/tests16.dat:358 |
+| `control-character-in-input-stream` | 17 | wpt/html/syntax/charset/without-inheritance.html, wpt/html/syntax/parsing-html-fragments/the-input-byte-stream-003.html, |
+| `eof-in-comment` | 9 | html5lib/comments01.dat:28, html5lib/comments01.dat:42, html5lib/comments01.dat:58 |
+| `character-reference-outside-unicode-range` | 8 | html5lib/entities01.dat:829, html5lib/entities01.dat:842, html5lib/entities01.dat:855 |
+| `incorrectly-opened-comment` | 8 | html5lib/plain-text-unsafe.dat:165, html5lib/plain-text-unsafe.dat:180, html5lib/tests1.dat:576 |
+| `end-tag-with-attributes` | 7 | django/django/contrib/admin/templates/admin/includes/fieldset.html, html5lib/scriptdata01.dat:82, html5lib/tests2.dat:23 |
+| `absence-of-digits-in-numeric-character-reference` | 7 | html5lib/entities01.dat:158, html5lib/entities01.dat:171, html5lib/entities01.dat:197 |
+| `eof-in-cdata` | 7 | html5lib/tests21.dat:40, html5lib/tests21.dat:55, html5lib/tests21.dat:92 |
+| `missing-whitespace-before-doctype-name` | 6 | html5lib/doctype01.dat:21, html5lib/tests2.dat:252, html5lib/tests2.dat:340 |
+| `missing-doctype-name` | 6 | html5lib/doctype01.dat:34, html5lib/doctype01.dat:48, html5lib/tests6.dat:48 |
+| `disallowed-content-in-noscript-in-head` | 6 | html5lib/noscript01.dat:141, html5lib/noscript01.dat:196, html5lib/noscript01.dat:211 |
+
+### Template dialects detected
+
+| dialect | files | examples |
+|---|---:|---|
+| `MUSTACHE` | 739 | angular/docs/scenes/src/app/scenes/autocomplete/autocomplete-scene.html, angular/docs/scenes/src/app/scenes/sort/sort-sc |
+| `ANGULAR` | 492 | angular/docs/scenes/src/app/scenes/autocomplete/autocomplete-scene.html, angular/docs/scenes/src/app/scenes/button-toggl |
+| `DOLLAR_BRACE` | 414 | angular/docs/src/assets/stackblitz/src/index.html, angular/src/dev-app/index.html, bootstrap/js/tests/visual/carousel.ht |
+| `JINJA` | 291 | angular/tools/dgeni/templates/class.template.html, angular/tools/dgeni/templates/constant.template.html, angular/tools/d |
+| `RAZOR` | 245 | angular/docs/scenes/src/app/scenes/autocomplete/autocomplete-scene.html, angular/docs/scenes/src/app/scenes/grid-list/gr |
+| `VUE` | 16 | angular/docs/scenes/src/app/scene-viewer/scene-viewer.html, angular/docs/scenes/src/app/scenes/tooltip/tooltip-scene.htm |
+| `THYMELEAF` | 12 | petclinic/src/main/resources/templates/error.html, petclinic/src/main/resources/templates/fragments/inputField.html, pet |
+| `HANDLEBARS` | 1 | live/cnn.html |
+
+### Inline <style> mismatches (samples)
+
+| sample | files | examples |
+|---|---:|---|
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L14: syntax error: >"]}` | 8 | wpt/css/selectors/has-style-sharing-001.html, wpt/css/selectors/has-style-sharing-002.html, wpt/css/selectors/has-style- |
+| `{"selMissing":[],"declMissing":["color\|var(--a)\|"],"gaps":[]}` | 7 | wpt/css/css-variables/variable-supports-01.html, wpt/css/css-variables/variable-supports-02.html, wpt/css/css-variables/ |
+| `{"selMissing":["#box[lang=\"es\"]"],"declMissing":[],"gaps":[]}` | 6 | wpt/css/selectors/i18n/css3-selectors-lang-041.html, wpt/css/selectors/i18n/css3-selectors-lang-042.html, wpt/css/select |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L1: syntax error: <!--..."]}` | 4 | html5lib/tests16.dat:989, html5lib/tests16.dat:1027, html5lib/tests16.dat:2261 |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L7: syntax error: ((.scope))"]}` | 4 | wpt/css/css-cascade/scope-import-inner-scope.html, wpt/css/css-cascade/scope-import-parent-pseudo.html, wpt/css/css-casc |
+| `{"selMissing":[],"declMissing":["font-synthesis-small-caps\|none\|"],"gaps":[]}` | 4 | wpt/css/css-fonts/font-synthesis-small-caps-first-letter.html, wpt/css/css-fonts/font-synthesis-small-caps-first-line.ht |
+| `{"selMissing":[],"declMissing":["font-synthesis-style\|none\|"],"gaps":[]}` | 4 | wpt/css/css-fonts/font-synthesis-style-binary.html, wpt/css/css-fonts/font-synthesis-style-first-letter.html, wpt/css/cs |
+| `{"selMissing":[],"declMissing":["font-synthesis-weight\|none\|"],"gaps":[]}` | 4 | wpt/css/css-fonts/font-synthesis-weight-binary.html, wpt/css/css-fonts/font-synthesis-weight-first-letter.html, wpt/css/ |
+| `{"selMissing":[],"declMissing":["--a\|var(--b)\|"],"gaps":[]}` | 4 | wpt/css/css-variables/variable-supports-33.html, wpt/css/css-variables/variable-supports-34.html, wpt/css/css-variables/ |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L20: syntax error: >"]}` | 4 | wpt/css/selectors/has-style-sharing-003.html, wpt/css/selectors/has-style-sharing-004.html, wpt/css/selectors/has-style- |
+| `{"selMissing":["#box[lang\|=\"es\"]","#relevance[lang\|=\"yy\"]"],"declMissing":[],"gaps":` | 4 | wpt/css/selectors/i18n/css3-selectors-lang-024.html, wpt/css/selectors/i18n/css3-selectors-lang-025.html, wpt/css/select |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L12: syntax error: >","PARSE_ERROR ` | 4 | wpt/css/selectors/invalidation/has-in-adjacent-position.html, wpt/css/selectors/invalidation/has-in-ancestor-position.ht |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L1: syntax error: </script>"]}` | 3 | html5lib/tests18.dat:361, html5lib/tests18.dat:399, html5lib/tests18.dat:414 |
+| `{"selMissing":[],"declMissing":["color\|light-dark(red,red)\|"],"gaps":[]}` | 3 | live/mdn-html.html |
+| `{"selMissing":["from","to"],"declMissing":[],"gaps":["PARSE_ERROR L20: syntax error: , to"` | 3 | wpt/css/css-animations/animation-name-in-shadow-part-inner-match.html, wpt/css/css-animations/animation-name-in-shadow-p |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L13: syntax error: >"]}` | 3 | wpt/css/css-nesting/has-nesting.html, wpt/css/selectors/has-style-sharing-pseudo-007.html, wpt/css/selectors/has-style-s |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L15: syntax error: ,"]}` | 3 | wpt/css/css-variables/variable-declaration-07.html, wpt/css/css-variables/variable-declaration-08.html, wpt/css/css-vari |
+| `{"selMissing":[],"declMissing":["--\\d800\|green\|"],"gaps":[]}` | 3 | wpt/css/css-variables/variable-declaration-34.html, wpt/css/css-variables/variable-reference-22.html, wpt/css/css-variab |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L17: syntax error: ,"]}` | 3 | wpt/css/css-variables/variable-reference-04.html, wpt/css/css-variables/variable-reference-06.html, wpt/css/css-variable |
+| `{"selMissing":[],"declMissing":[],"gaps":["UNPARSED_FRAGMENT L11: rule header read from te` | 3 | wpt/css/css-variables/variable-reference-25.html, wpt/css/css-variables/variable-reference-28.html, wpt/css/css-variable |
+| `{"selMissing":["#box[lang\|=\"az-Arab-IR\"]","#relevance[lang\|=\"yy\"]"],"declMissing":[]` | 3 | wpt/css/selectors/i18n/css3-selectors-lang-031.html, wpt/css/selectors/i18n/css3-selectors-lang-032.html, wpt/css/select |
+| `{"selMissing":["#box[lang=\"en-GB\"]"],"declMissing":[],"gaps":[]}` | 3 | wpt/css/selectors/i18n/css3-selectors-lang-048.html, wpt/css/selectors/i18n/css3-selectors-lang-049.html, wpt/css/select |
+| `{"selMissing":["#box[lang=\"az-Arab-IR\"]"],"declMissing":[],"gaps":[]}` | 3 | wpt/css/selectors/i18n/css3-selectors-lang-051.html, wpt/css/selectors/i18n/css3-selectors-lang-052.html, wpt/css/select |
+| `{"selMissing":[],"declMissing":["frame-sizing\|content-block-size\|"],"gaps":[]}` | 2 | dom-examples/responsive-iframe-sizing/basic/index.html, dom-examples/responsive-iframe-sizing/js-request-resize/index.ht |
+| `{"selMissing":[],"declMissing":[],"gaps":["PARSE_ERROR L1: syntax error: <tr>x"]}` | 2 | html5lib/tests15.dat:147, html5lib/tests7.dat:134 |
+
+## CSS
+
+| corpus | sheets | crashes | ax total ms | ref total ms | slowest (ms) | style rules ref/ax | at-rules ref/ax | declarations ref/ax | selectors ref/ax |
+|---|---:|---:|---:|---:|---|---|---|---|---|
+| angular | 271 | 0 | 1610 | 837 | src/components-examples/aria/accordion/a (227) | 981/986 | 3/3 | 2317/2321 | 1071/1076 |
+| bootstrap | 47 | 0 | 5983 | 2012 | dist/css/bootstrap-grid.css (1786) | 21031/21031 | 613/613 | 37885/37885 | 23343/23343 |
+| csstree | 403 | 0 | 1026 | 546 | fixtures/ast/atrule/atrule/supports.json (138) | 298/312 | 152/138 | 236/219 | 305/319 |
+| django | 47 | 0 | 1380 | 838 | django/contrib/admin/static/admin/css/au (377) | 1229/1229 | 29/28 | 2990/2990 | 1721/1721 |
+| dom-examples | 89 | 0 | 1716 | 1003 | css-custom-functions/color-adjust-functi (238) | 1003/1013 | 67/68 | 2371/2384 | 1144/1150 |
+| live | 17 | 0 | 10716 | 3257 | tailwind-2.min.css (3394) | 61606/61605 | 1315/1315 | 106105/106102 | 68728/68542 |
+| postcss-cases | 30 | 0 | 17 | 18 | apply.css (4) | 53/58 | 25/20 | 83/81 | 53/59 |
+| wpt | 60 | 0 | 701 | 405 | css/css-variables/support/external-varia (111) | 86/76 | 56/56 | 163/158 | 86/76 |
+
+### Coverage totals
+
+| measure | reference | axiom | axiom / reference |
+|---|---:|---:|---:|
+| style rules (incl. keyframe blocks) | 86287 | 86310 | 100.03% |
+| nested style rules | 14 | 51 | 364.29% |
+| at-rules | 2260 | 2241 | 99.16% |
+| selectors | 96451 | 96286 | 99.83% |
+| declarations | 152150 | 152140 | 99.99% |
+| custom property declarations | 45301 | 45291 | 99.98% |
+| var() references | 44050 | 44049 | 100.00% |
+| url() references | 359 | 366 | 101.95% |
+| @import targets | 35 | 31 | 88.57% |
+| @keyframes names | 447 | 447 | 100.00% |
+| @font-face families | 41 | 41 | 100.00% |
+| @layer names | 6 | 9 | 150.00% |
+| @container names | 16 | 13 | 81.25% |
+| comments | 84 | 3247 | 3865.48% |
+
+Selectors matched by text: ref 96451, missing in axiom 456, extra in axiom 291. Specificity checked 91040, mismatched 14. Selector-part kind counts checked 90818, mismatched 11. Declarations missing 160, extra 150.
+
+### Selectors in css-tree that axiom has no selector row for (normalised text)
+
+| selector | files | examples |
+|---|---:|---|
+| `.example-option[aria-selected="true"]::before` | 12 | angular/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css, angul |
+| `#�` | 12 | wpt/css/css-syntax/charset/support/at-charset-bogus.css, wpt/css/css-syntax/charset/support/at-charset-utf16.css, wpt/cs |
+| `0%` | 5 | live/animate.min.css, live/fontawesome.css, live/open-props.min.css |
+| `[a="b"i]` | 4 | csstree/fixtures/ast/selector/AttributeSelector.json#attrib.1 with flags and spaces, csstree/fixtures/ast/selector/Attri |
+| `.example-option[aria-disabled="true"]` | 3 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/cdk/listbox/cdk-list |
+| `a/deep/b` | 3 | csstree/fixtures/ast/selector/Combinator.json#legacy shadow-piercing descendant combinator, csstree/fixtures/ast/selecto |
+| `:nth-last-child(3n-2)` | 3 | csstree/fixtures/ast/selector/Nth.json#nthselector.1, csstree/fixtures/ast/selector/Nth.json#nthselector.c.1, csstree/fi |
+| `40%` | 3 | live/animate.min.css, live/fontawesome.css, live/semantic.css |
+| `[ngOption][data-active="true"]` | 2 | angular/src/components-examples/aria/autocomplete/autocomplete.css, angular/src/components-examples/aria/combobox/combob |
+| `[ngOption][aria-selected="true"]` | 2 | angular/src/components-examples/aria/autocomplete/autocomplete.css, angular/src/components-examples/aria/combobox/combob |
+| `.example-combobox-input[aria-expanded="true"]+.example-arrow-icon` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/toolbar/toolbar |
+| `.example-option[aria-selected="true"]` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/toolbar/toolbar |
+| `li[aria-expanded="false"]+ul[role="group"]` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/tree/tree-commo |
+| `.example-tree-item[aria-expanded="true"] .example-parent-icon` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/tree/tree-commo |
+| `.example-menu-bar-item[aria-expanded="true"]` | 2 | angular/src/components-examples/aria/menu/menu-example.css, angular/src/components-examples/cdk/menu/cdk-menu-menubar/cd |
+| `.example-option[aria-disabled="false"]:focus` | 2 | angular/src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css, ang |
+| `.example-standalone-item[aria-expanded="true"]` | 2 | angular/src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.css, angular/src/comp |
+| `[a=b]` | 2 | csstree/fixtures/ast/selector/AttributeSelector.json#attrib.s.0, csstree/fixtures/ast/selector/AttributeSelector.json#at |
+| `[a="b"]` | 2 | csstree/fixtures/ast/selector/AttributeSelector.json#attrib.s.1, csstree/fixtures/ast/selector/AttributeSelector.json#at |
+| `a b` | 2 | csstree/fixtures/ast/selector/Combinator.json#combinator with comments around #0, postcss-cases/selector.css |
+| `:nth-child(2n+1)` | 2 | csstree/fixtures/ast/selector/Nth.json#nthselector.0 case insensitive, csstree/fixtures/ast/selector/Nth.json#nthselecto |
+| `entry 0%` | 2 | dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/styles.css, dom-examples/css-carousels/scroll-button |
+| `exit 100%` | 2 | dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/styles.css, dom-examples/css-carousels/scroll-button |
+| `entry 1%` | 2 | dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/styles.css, dom-examples/css-carousels/scroll-button |
+| `exit 99%` | 2 | dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/styles.css, dom-examples/css-carousels/scroll-button |
+| `20%` | 2 | live/animate.min.css, live/semantic.css |
+| `70%` | 2 | live/animate.min.css, live/semantic.css |
+| `80%` | 2 | live/animate.min.css, live/semantic.css |
+| `90%` | 2 | live/animate.min.css, live/open-props.min.css |
+| `50%` | 2 | live/animate.min.css, live/semantic.css |
+| `25%` | 2 | live/animate.min.css, live/semantic.css |
+| `75%` | 2 | live/animate.min.css, live/tailwind-2.min.css |
+| `30%` | 2 | live/animate.min.css, live/semantic.css |
+| `10%` | 2 | live/animate.min.css, live/semantic.css |
+| `60%` | 2 | live/open-props.min.css, live/semantic.css |
+| `.example-accordion-header .example-accordion-trigger[data-active="true"]` | 1 | angular/src/components-examples/aria/accordion/accordion-examples.css |
+| `.example-accordion-header .example-accordion-trigger[aria-disabled="true"]` | 1 | angular/src/components-examples/aria/accordion/accordion-examples.css |
+| `input[ngCombobox][aria-disabled="true"]` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `[ngOption][aria-disabled="true"]` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `[ngOption]:not([aria-selected="true"]) .example-check-icon` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+
+### Selector rows in axiom with no css-tree counterpart
+
+| selector | files | examples |
+|---|---:|---|
+| `.example-option[aria-selected='true']::before` | 12 | angular/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css, angul |
+| `b` | 6 | csstree/fixtures/ast/selector/Combinator.json#legacy shadow-piercing descendant combinator, csstree/fixtures/ast/selecto |
+| `.example-option[aria-disabled='true']` | 3 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/cdk/listbox/cdk-list |
+| `[ngOption][data-active='true']` | 2 | angular/src/components-examples/aria/autocomplete/autocomplete.css, angular/src/components-examples/aria/combobox/combob |
+| `[ngOption][aria-selected='true']` | 2 | angular/src/components-examples/aria/autocomplete/autocomplete.css, angular/src/components-examples/aria/combobox/combob |
+| `.example-combobox-input[aria-expanded='true']+.example-arrow-icon` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/toolbar/toolbar |
+| `.example-option[aria-selected='true']` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/toolbar/toolbar |
+| `li[aria-expanded='false']+ul[role='group']` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/tree/tree-commo |
+| `.example-tree-item[aria-expanded='true'] .example-parent-icon` | 2 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/tree/tree-commo |
+| `.example-menu-bar-item[aria-expanded='true']` | 2 | angular/src/components-examples/aria/menu/menu-example.css, angular/src/components-examples/cdk/menu/cdk-menu-menubar/cd |
+| `.example-option[aria-disabled='false']:focus` | 2 | angular/src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css, ang |
+| `.example-standalone-item[aria-expanded='true']` | 2 | angular/src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.css, angular/src/comp |
+| `.bar &` | 2 | csstree/fixtures/ast/declarationList/nesting.json#don't parse nested rule when it not started with &, csstree/fixtures/a |
+| `div:hover` | 2 | csstree/fixtures/ast/declarationList/nesting.json#don't parse nested rule when it not started with &, csstree/fixtures/a |
+| `[ a='b' i ]` | 2 | csstree/fixtures/ast/selector/AttributeSelector.json#attrib.1 with flags and spaces, csstree/fixtures/ast/selector/Attri |
+| `.b` | 2 | csstree/fixtures/ast/stylesheet/tolerant.json#parser should respect bracket balance over stop token, csstree/fixtures/as |
+| `100%` | 2 | dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/styles.css, dom-examples/css-carousels/scroll-button |
+| `99%` | 2 | dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/styles.css, dom-examples/css-carousels/scroll-button |
+| `section` | 2 | dom-examples/view-transitions/mpa-chapter-nav-multiple-transition-types/style.css, dom-examples/view-transitions/mpa-cha |
+| `:root` | 2 | dom-examples/view-transitions/mpa-chapter-nav-transition-types/style.css, dom-examples/view-transitions/spa-gallery-tran |
+| `a` | 2 | postcss-cases/extends.css, postcss-cases/semicolons.css |
+| `x` | 2 | wpt/css/css-syntax/charset/support/at-charset-windows-1250-in-utf16.css, wpt/css/css-syntax/charset/support/at-charset-w |
+| `v ` | 2 | wpt/html/semantics/scripting-1/the-script-element/css-module/resources/bom-utf-16be.css, wpt/html/semantics/scripting-1/ |
+| `.example-accordion-header .example-accordion-trigger[data-active='true']` | 1 | angular/src/components-examples/aria/accordion/accordion-examples.css |
+| `.example-accordion-header .example-accordion-trigger[aria-disabled='true']` | 1 | angular/src/components-examples/aria/accordion/accordion-examples.css |
+| `input::-webkit-input-placeholder` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `input::-moz-placeholder` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `input:-ms-input-placeholder` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `input:-moz-placeholder` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `input::placeholder` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `input[ngCombobox][aria-disabled='true']` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `[ngOption][aria-disabled='true']` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `[ngOption]:not([aria-selected='true']) .example-check-icon` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `.example-datepicker-cell[aria-selected='true'] .example-datepicker-day-button` | 1 | angular/src/components-examples/aria/combobox/combobox-datepicker/combobox-datepicker-example.css |
+| `.example-combobox-container:has([readonly='true']:not([aria-disabled='true']))` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-combobox-input[readonly='true']:not([aria-disabled='true'])` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-option[aria-selected='true'] .example-checkbox-filled-icon` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-option[aria-selected='true'] .example-checkbox-blank-icon` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-option[aria-selected='true'] .example-selected-icon` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-combobox-container:not(.example-no-active-outline):focus-within [data-active='tru` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+
+### Specificity mismatches (ref=@bramus/specificity)
+
+| selector | files | examples |
+|---|---:|---|
+| `::view-transition-group(*) ref=0,0,0 ax=0,0,1` | 4 | dom-examples/view-transitions/match-element/style.css, dom-examples/view-transitions/mpa-chapter-nav-multiple-transition |
+| `.example-button:focus ref=0,2,0 ax=0,1,0` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-button:hover ref=0,2,0 ax=0,1,0` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-menu-trigger:hover ref=0,2,0 ax=0,1,0` | 1 | angular/src/components-examples/aria/menu/menu-example.css |
+| `.example-menu-bar-item:hover ref=0,2,0 ax=0,1,0` | 1 | angular/src/components-examples/aria/menu/menu-example.css |
+| `.example-menu-bar-item:focus-within ref=0,2,0 ax=0,1,0` | 1 | angular/src/components-examples/aria/menu/menu-example.css |
+| `[ngMenuBar]>[ngMenuItem]:hover ref=0,3,0 ax=0,2,0` | 1 | angular/src/components-examples/aria/menubar/menubar.css |
+| `[ngMenuBar]>[ngMenuItem]:focus-within ref=0,3,0 ax=0,2,0` | 1 | angular/src/components-examples/aria/menubar/menubar.css |
+| `.example-stateful:focus ref=0,2,0 ax=0,1,0` | 1 | angular/src/dev-app/common-classes.css |
+| `html::view-transition-old(*) ref=0,0,1 ax=0,0,2` | 1 | dom-examples/view-transitions/match-element/style.css |
+| `html::view-transition-new(*) ref=0,0,1 ax=0,0,2` | 1 | dom-examples/view-transitions/match-element/style.css |
+
+### Selector-part kind count mismatches (delta = ref - axiom per kind)
+
+| selector and delta | files | examples |
+|---|---:|---|
+| `.example-button:focus {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-button:hover {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `.example-menu-trigger:hover {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/components-examples/aria/menu/menu-example.css |
+| `.example-menu-bar-item:hover {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/components-examples/aria/menu/menu-example.css |
+| `.example-menu-bar-item:focus-within {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/components-examples/aria/menu/menu-example.css |
+| `[ngMenuBar]>[ngMenuItem]:hover {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/components-examples/aria/menubar/menubar.css |
+| `[ngMenuBar]>[ngMenuItem]:focus-within {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/components-examples/aria/menubar/menubar.css |
+| `.example-stateful:focus {"PSEUDO_CLASS":1,"RAW":-1}` | 1 | angular/src/dev-app/common-classes.css |
+| `*\|*:not(*) {"TYPE":1,"UNIVERSAL":-1}` | 1 | csstree/fixtures/ast/selector/Selector.json#negation with namespaced identifier |
+| `.test div#box.ÜÀÚ {"RAW":-2}` | 1 | wpt/html/syntax/parsing-html-fragments/support/encodingtests-15-inverse.css |
+| `.test div.ÜÀÚ {"RAW":-2}` | 1 | wpt/html/syntax/parsing-html-fragments/support/encodingtests-15.css |
+
+### At-rule count differences (positive: css-tree has more)
+
+| at-rule | delta | examples |
+|---|---:|---|
+| `supports` | 8 | csstree/fixtures/ast/atrule/atrule/supports.json#@supports with no block, csstree/fixtures/ast/atrule/atrule/supports.js |
+| `import` | 5 | csstree/fixtures/ast/atrule/atrule/import.json#@import with block is not an error, csstree/fixtures/ast/atrule/atrule/im |
+| `media` | 2 | csstree/fixtures/ast/atrule/atrule/media.json#@media with no block is not an error, csstree/fixtures/ast/atrule/atrule/m |
+| `test0` | 2 | csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet.3, csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet |
+| `test1` | 2 | csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet.3, csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet |
+| `nest` | 1 | csstree/fixtures/ast/atrule/atrule/nest.json#single media type |
+| `scope` | 1 | csstree/fixtures/ast/atrule/atrule/scope.json#bad selectors |
+| `atrule` | 1 | csstree/fixtures/ast/atrule/no-block.json#no at-rule ending on eof is not an error |
+| `bada` | 1 | csstree/fixtures/ast/atrule/tolerant.json#at-rule (unknown) may have no a semicolon |
+| `container` | 1 | csstree/fixtures/ast/rule/nesting.json#nested @container |
+| `-moz-document` | 1 | postcss-cases/atrule-params.css |
+| `test` | 4 | csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet.3, csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet |
+| `width` | 1 | postcss-cases/rule-at.css |
+| `a` | 1 | postcss-cases/semicolons.css |
+
+### Declarations css-tree has that axiom lacks (prop|value|important)
+
+| declaration | files | examples |
+|---|---:|---|
+| `visibility\|hidden\|` | 12 | wpt/css/css-syntax/charset/support/at-charset-bogus.css, wpt/css/css-syntax/charset/support/at-charset-utf16.css, wpt/cs |
+| `p\|v/*test*/\|` | 10 | csstree/fixtures/ast/atrule/block.json#block at-rule #c.0, csstree/fixtures/ast/atrule/block.json#block at-rule #c.1, cs |
+| `flex\|1\|` | 6 | csstree/fixtures/ast/atrule/atrule/supports.json#base test, csstree/fixtures/ast/atrule/atrule/supports.json#base test w |
+| `--var\|/*1*/\|` | 6 | csstree/fixtures/ast/declaration/custom-property.json#spaces and comments, csstree/fixtures/ast/declaration/custom-prope |
+| `foo\|1\|` | 4 | csstree/fixtures/ast/atrule/atrule/import.json#with supports(declaration), csstree/fixtures/ast/atrule/atrule/import.jso |
+| `p1\|v1/*test*/\|` | 4 | csstree/fixtures/ast/block/Block.json#block.c.4, csstree/fixtures/ast/declarationList/DeclarationList.json#block.c.4, cs |
+| `--var\|\|` | 4 | csstree/fixtures/ast/declaration/custom-property.json#empty, csstree/fixtures/ast/declaration/custom-property.json#empty |
+| `property\|value\|` | 3 | csstree/fixtures/ast/declaration/Declaration.json#declaration.c.1, csstree/fixtures/ast/declaration/Declaration.json#dec |
+| `--bs-btn-close-filter\|\|` | 2 | bootstrap/dist/css/bootstrap.min.css, bootstrap/dist/css/bootstrap.rtl.min.css |
+| `--bs-carousel-control-icon-filter\|\|` | 2 | bootstrap/dist/css/bootstrap.min.css, bootstrap/dist/css/bootstrap.rtl.min.css |
+| `--cards\|small\|` | 2 | csstree/fixtures/ast/atrule/atrule/container.json#style query, csstree/fixtures/ast/atrule/atrule/container.json#style q |
+| `--responsive\|true\|` | 2 | csstree/fixtures/ast/atrule/atrule/container.json#all together, csstree/fixtures/ast/rule/nesting.json#nested @container |
+| `property\|\|!` | 2 | csstree/fixtures/ast/declaration/Important.json#divided by comment, csstree/fixtures/ast/declaration/Important.json#divi |
+| `div\|hover{color:red;}\|` | 2 | csstree/fixtures/ast/declarationList/nesting.json#don't parse nested rule when it not started with &, csstree/fixtures/a |
+| `p0\|v0/*test*/\|` | 2 | csstree/fixtures/ast/rule/Rule.json#rule.c.1, csstree/fixtures/ast/rule/Rule.json#rule.c.3 |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffffff',endcolorstr='` | 2 | django/django/contrib/admin/static/admin/css/vendor/select2/select2.css, django/django/contrib/admin/static/admin/css/ve |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='#ffeeeeee',endcolorstr='` | 2 | django/django/contrib/admin/static/admin/css/vendor/select2/select2.css, django/django/contrib/admin/static/admin/css/ve |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='#ffeeeeee',endcolorstr='` | 2 | django/django/contrib/admin/static/admin/css/vendor/select2/select2.css, django/django/contrib/admin/static/admin/css/ve |
+| `input\|:-webkit-input-placeholder{color:var(--mat-sys-on-surface-variant);}input::-moz-pla` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `a\|b{}\|` | 1 | csstree/fixtures/ast/atrule/atrule/font-face.json#@font-face with declaration looks like a rule in block |
+| `flex\|1/*4*/\|` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#base test with comments |
+| `-vendor-name\|1\|` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#vendor property |
+| `--custom\|1\|` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#custom property |
+| `grid\|support\|` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#complex prelude |
+| `box-shadow\|somethingvar(--complex)\|!` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#using !important |
+| `//property\|value\|` | 1 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with // hack |
+| `/property\|value\|` | 1 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with / hack |
+| `$property\|value\|` | 1 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with $ hack |
+| `*property\|value\|` | 1 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with * hack |
+| `#property\|value\|` | 1 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with # hack |
+| `+property\|value\|` | 1 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with + hack |
+| `--var\|{foo:bar;baz:{}}\|` | 1 | csstree/fixtures/ast/declaration/custom-property.json#value is {}-block |
+| `--var\|{[({()})()()[({})]]}[{()}]([])\|` | 1 | csstree/fixtures/ast/declaration/custom-property.json#complex balanced |
+| `--var\|{!important}\|` | 1 | csstree/fixtures/ast/declaration/custom-property.json#should ignore everything inside block |
+| `--var\|/*1*//*2*/\|` | 1 | csstree/fixtures/ast/declaration/custom-property.json#whitespace beetween comments (parseCustomProperty:true) |
+| `*filter\|progid:dximagetransform.microsoft.alphaimageloader(src='images/transparent-border` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.2 |
+| `filter\|progid:dximagetransform.microsoft.alphaimageloader(src='images/transparent-border.` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.c.0 |
+| `filter\|progid:dximagetransform.microsoft.alphaimageloader(/*)*/src='images/transparent-bo` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.c.1 |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='$start',endcolorstr='$st` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.s.2 |
+| `filter\|alpha(opacity}\|` | 1 | csstree/fixtures/ast/declaration/filter.json#unclosed functions should not be invalid per spec, not sure it's true for I |
+| `//color\|red\|` | 1 | csstree/fixtures/ast/rule/Rule.json#declaration with // |
+| `prop\|value\|` | 1 | csstree/fixtures/ast/rule/nesting.json#nested @supports |
+| `prop2\|value2\|` | 1 | csstree/fixtures/ast/rule/nesting.json#nested @supports |
+| `color\|green\|` | 1 | csstree/fixtures/ast/rule/nesting.json#nested @container |
+| `--x\|(;color:green;}.b{color:red;--y:);width:10px}\|` | 1 | csstree/fixtures/ast/stylesheet/tolerant.json#parser should respect bracket balance over stop token |
+| `--x\|(;color:green;}.b{color:red;--y:})\|` | 1 | csstree/fixtures/ast/stylesheet/tolerant.json#parser should respect bracket balance over stop token #2 |
+| `*font-size\|100%\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `*font-size\|small\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `*font\|x-small\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `*font-size\|108%\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+
+### Declarations axiom has that css-tree lacks
+
+| declaration | files | examples |
+|---|---:|---|
+| `p\|/*test*/v\|` | 8 | csstree/fixtures/ast/atrule/block.json#block at-rule #c.0, csstree/fixtures/ast/atrule/block.json#block at-rule #c.1, cs |
+| `--var\|/*1*/\|!` | 6 | csstree/fixtures/ast/declaration/custom-property.json#spaces and comments, csstree/fixtures/ast/declaration/custom-prope |
+| `property\|value\|` | 5 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with / hack, csstree/fixtures/ast/declaration/Dec |
+| `--var\|\|!` | 5 | csstree/fixtures/ast/declaration/custom-property.json#should ignore everything inside block, csstree/fixtures/ast/declar |
+| `color\|red\|` | 5 | csstree/fixtures/ast/declarationList/nesting.json#don't parse nested rule when it not started with &, csstree/fixtures/a |
+| `property\|/*test*/value\|` | 3 | csstree/fixtures/ast/declaration/Declaration.json#declaration.c.1, csstree/fixtures/ast/declaration/Declaration.json#dec |
+| `color\|green\|` | 3 | csstree/fixtures/ast/declarationList/nesting.json#don't parse nested rule when it not started with &, csstree/fixtures/a |
+| `view-transition-name\|none\|` | 3 | dom-examples/view-transitions/mpa-chapter-nav-multiple-transition-types/style.css, dom-examples/view-transitions/mpa-cha |
+| `--bs-btn-close-filter\|\|!` | 2 | bootstrap/dist/css/bootstrap.min.css, bootstrap/dist/css/bootstrap.rtl.min.css |
+| `--bs-carousel-control-icon-filter\|\|!` | 2 | bootstrap/dist/css/bootstrap.min.css, bootstrap/dist/css/bootstrap.rtl.min.css |
+| `p\|v\|` | 2 | csstree/fixtures/ast/block/Block.json#block.c.2, csstree/fixtures/ast/declarationList/DeclarationList.json#block.c.2 |
+| `p1\|v1\|` | 2 | csstree/fixtures/ast/block/Block.json#block.c.4, csstree/fixtures/ast/declarationList/DeclarationList.json#block.c.4 |
+| `property\|\|` | 2 | csstree/fixtures/ast/declaration/Important.json#divided by comment, csstree/fixtures/ast/declaration/Important.json#divi |
+| `p0\|/*test*/v0/*test*/\|` | 2 | csstree/fixtures/ast/rule/Rule.json#rule.c.1, csstree/fixtures/ast/rule/Rule.json#rule.c.3 |
+| `p1\|/*test*/v1\|` | 2 | csstree/fixtures/ast/rule/Rule.json#rule.c.1, csstree/fixtures/ast/rule/Rule.json#rule.c.3 |
+| `--x\|(;color:green\|` | 2 | csstree/fixtures/ast/stylesheet/tolerant.json#parser should respect bracket balance over stop token, csstree/fixtures/as |
+| `--y\|\|` | 2 | csstree/fixtures/ast/stylesheet/tolerant.json#parser should respect bracket balance over stop token, csstree/fixtures/as |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffffff',endcolorstr='` | 2 | django/django/contrib/admin/static/admin/css/vendor/select2/select2.css, django/django/contrib/admin/static/admin/css/ve |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='#ffeeeeee',endcolorstr='` | 2 | django/django/contrib/admin/static/admin/css/vendor/select2/select2.css, django/django/contrib/admin/static/admin/css/ve |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='#ffeeeeee',endcolorstr='` | 2 | django/django/contrib/admin/static/admin/css/vendor/select2/select2.css, django/django/contrib/admin/static/admin/css/ve |
+| `view-transition-name\|chapter\|` | 2 | dom-examples/view-transitions/mpa-chapter-nav-multiple-transition-types/style.css, dom-examples/view-transitions/mpa-cha |
+| `y\|\|` | 2 | wpt/css/css-syntax/charset/support/bomless-utf16.css, wpt/css/css-syntax/charset/support/bomless-utf16be.css |
+| `r\|\|` | 2 | wpt/html/semantics/scripting-1/the-script-element/css-module/resources/bom-utf-16be.css, wpt/html/semantics/scripting-1/ |
+| `color\|var(--mat-sys-on-surface-variant)\|` | 1 | angular/src/components-examples/aria/autocomplete/autocomplete.css |
+| `foo\|value\|` | 1 | csstree/fixtures/ast/block/Block.json#bad symbol in a property name |
+| `bada\|boom\|` | 1 | csstree/fixtures/ast/block/Block.json#uncomplete !important |
+| `foo\|bar\|` | 1 | csstree/fixtures/ast/declaration/custom-property.json#value is {}-block |
+| `--var\|/*1*//*2*/\|!` | 1 | csstree/fixtures/ast/declaration/custom-property.json#whitespace beetween comments (parseCustomProperty:true) |
+| `filter\|progid:dximagetransform.microsoft.alphaimageloader(src='images/transparent-border.` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.2 |
+| `filter\|/*test*/progid:dximagetransform.microsoft.alphaimageloader(src='images/transparent` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.c.0 |
+| `filter\|/*test*/progid:dximagetransform.microsoft.alphaimageloader(/*)*/src='images/transp` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.c.1 |
+| `filter\|progid:dximagetransform.microsoft.gradient(startcolorstr='$start',endcolorstr='$st` | 1 | csstree/fixtures/ast/declaration/filter.json#filter.s.2 |
+| `filter\|alpha(opacity\|` | 1 | csstree/fixtures/ast/declaration/filter.json#unclosed functions should not be invalid per spec, not sure it's true for I |
+| `width\|10px\|` | 1 | csstree/fixtures/ast/stylesheet/tolerant.json#parser should respect bracket balance over stop token |
+| `font-size\|100%\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `float\|left\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `width\|32%\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `width\|66%\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `width\|24%\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+| `margin-left\|0\|` | 1 | django/docs/_theme/djangodocs/static/reset-fonts-grids.css |
+
+### var() / url() / @import / @keyframes / @font-face differences (positive: reference has more)
+
+| var | delta | examples |
+|---|---:|---|
+| `--complex` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#using !important |
+| `--a` | 1 | wpt/css/css-variables/support/external-variable-supports.css |
+| `--wide` | 1 | dom-examples/css-custom-functions/responsive-narrow-wide/style.css |
+
+| url | delta | examples |
+|---|---:|---|
+| `data:application/x-font-ttf;charset=utf-8;base64` | 4 | live/semantic.css |
+| `data:application/font-woff;charset=utf-8;base64` | 4 | live/semantic.css |
+| `data:image/gif;base64` | 1 | postcss-cases/function.css |
+| `%23a` | 5 | live/open-props.min.css |
+| `%23b` | 1 | django/tests/staticfiles_tests/project/documents/cached/data_uri_with_nested_url.css |
+| `%23c` | 1 | django/tests/staticfiles_tests/project/documents/cached/data_uri_with_nested_url.css |
+| `data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtY` | 1 | live/semantic.css |
+| `data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAoUAA4AAAAAEPQAAQAAAAAAAAAAAA` | 1 | live/semantic.css |
+| `data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtY` | 1 | live/semantic.css |
+| `data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAA` | 1 | live/semantic.css |
+| `data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtY` | 1 | live/semantic.css |
+| `data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAA` | 1 | live/semantic.css |
+| `data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjCBsAAAC8AAAAYGNtY` | 1 | live/semantic.css |
+| `data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABcUAAoAAAAAFswAAQAAAAAAAAAAAA` | 1 | live/semantic.css |
+| `data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7` | 1 | postcss-cases/function.css |
+
+| import | delta | examples |
+|---|---:|---|
+| `test` | 3 | csstree/fixtures/ast/atrule/atrule/import.json#should be case insensetive, csstree/fixtures/ast/atrule/atrule/import.jso |
+| `other.css` | 1 | django/tests/staticfiles_tests/project/documents/cached/styles_insensitive.css |
+
+_none_
+
+_none_
+
+### Parse gaps. Sheets with axiom gaps: 201; with css-tree errors: 48; postcss throws: 24; axiom gaps where css-tree and postcss are clean (false positives): 153; reference errors with no axiom gap: 13; preprocessor-flagged: 10
+
+| gap kind | count | examples |
+|---|---:|---|
+| `PARSE_ERROR` | 646 | angular/src/components-examples/aria/autocomplete/autocomplete.css, angular/src/components-examples/aria/combobox/combob |
+| `PREPROCESSOR_SYNTAX` | 10 | csstree/fixtures/ast/block/Block.json#at-rule in block, csstree/fixtures/ast/block/Block.json#at-rule in the ending of b |
+| `UNPARSED_FRAGMENT` | 3 | csstree/fixtures/ast/atrule/tolerant.json#unclosed block - known rule at-rule, live/water.css, postcss-cases/extends.css |
+
+#### Gap text where css-tree and postcss are clean (digits replaced by #)
+
+| gap | files | examples |
+|---|---:|---|
+| `PARSE_ERROR syntax error: #%,` | 23 | live/animate.min.css, live/fontawesome.css, live/open-props.min.css |
+| `PARSE_ERROR syntax error: )` | 19 | angular/src/components-examples/aria/autocomplete/autocomplete.css, angular/src/components-examples/aria/combobox/combob |
+| `PARSE_ERROR missing important` | 15 | bootstrap/dist/css/bootstrap.min.css, bootstrap/dist/css/bootstrap.rtl.min.css, csstree/fixtures/ast/declaration/custom- |
+| `PARSE_ERROR syntax error: src='images/transparent-border.png',` | 13 | csstree/fixtures/ast/declaration/filter.json#filter.0, csstree/fixtures/ast/declaration/filter.json#filter.1, csstree/fi |
+| `PARSE_ERROR missing )` | 11 | csstree/fixtures/ast/declaration/filter.json#filter.c.1, csstree/fixtures/ast/declaration/filter.json#filter.s.2, csstre |
+| `PARSE_ERROR syntax error: :not(` | 10 | angular/src/components-examples/aria/autocomplete/autocomplete.css, angular/src/components-examples/aria/combobox/combob |
+| `PARSE_ERROR syntax error: *` | 10 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with * hack, csstree/fixtures/ast/declaration/fil |
+| `PARSE_ERROR syntax error: #� { visibility:hidden }` | 10 | wpt/css/css-syntax/charset/support/at-charset-bogus.css, wpt/css/css-syntax/charset/support/at-charset-utf16.css, wpt/cs |
+| `PARSE_ERROR missing ;` | 8 | csstree/fixtures/ast/atrule/atrule/font-feature-values.json#with all feature types, csstree/fixtures/ast/atrule/atrule/i |
+| `PARSE_ERROR syntax error: .#%` | 8 | live/materialize.css |
+| `PARSE_ERROR syntax error: x` | 7 | csstree/fixtures/ast/atrule/block.json#block at-rule #1, csstree/fixtures/ast/atrule/block.json#block at-rule #s.1, csst |
+| `PARSE_ERROR syntax error: ,` | 7 | live/tailwind-2.min.css, postcss-cases/custom-properties.css |
+| `PARSE_ERROR syntax error: :` | 6 | csstree/fixtures/ast/atrule/block.json#@page, csstree/fixtures/ast/declaration/custom-property.json#value is {}-block, p |
+| `PARSE_ERROR syntax error: :focus-within` | 5 | angular/src/components-examples/aria/grid/grid-common.css, angular/src/dev-app/common-classes.css |
+| `PARSE_ERROR syntax error: !` | 5 | csstree/fixtures/ast/declaration/Important.json#divided by comment, csstree/fixtures/ast/declaration/Important.json#divi |
+| `PARSE_ERROR syntax error: ;` | 5 | django/django/contrib/admin/static/admin/css/vendor/select2/select2.css, postcss-cases/custom-properties.css |
+| `PARSE_ERROR syntax error: :has(` | 4 | angular/src/components-examples/aria/combobox/combobox-example.css, angular/src/components-examples/aria/grid/grid-commo |
+| `PARSE_ERROR syntax error: a` | 4 | csstree/fixtures/ast/atrule/block.json#shouldn't parse a atrule prelude when parseAtrulePrelude is false, csstree/fixtur |
+| `PARSE_ERROR empty value for property` | 4 | csstree/fixtures/ast/declaration/Important.json#\9 hack, csstree/fixtures/ast/declaration/Important.json#divided by comm |
+| `PARSE_ERROR syntax error: src='test.png',` | 4 | csstree/fixtures/ast/declaration/filter.json#filter.1, csstree/fixtures/ast/declaration/filter.json#filter.s.1, csstree/ |
+| `PARSE_ERROR syntax error: i` | 4 | csstree/fixtures/ast/selector/AttributeSelector.json#attrib.1 with flags, csstree/fixtures/ast/selector/AttributeSelecto |
+| `PARSE_ERROR syntax error: #` | 4 | csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet.3, csstree/fixtures/ast/stylesheet/StyleSheet.json#stylesheet |
+| `PARSE_ERROR syntax error: entry #%, exit` | 4 | dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/styles.css, dom-examples/css-carousels/scroll-button |
+| `PARSE_ERROR missing keyword_query` | 3 | csstree/fixtures/ast/atrule/atrule/media.json#@media with no prelude is not an error, csstree/fixtures/ast/atrule/atrule |
+| `PARSE_ERROR syntax error: +` | 3 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with + hack, live/bulma.css |
+| `PARSE_ERROR syntax error: \|` | 3 | csstree/fixtures/ast/selector/AttributeSelector.json#no namespace, csstree/fixtures/ast/selector/AttributeSelector.json# |
+| `PARSE_ERROR syntax error: #%,#%,` | 3 | live/animate.min.css, live/open-props.min.css |
+| `PARSE_ERROR syntax error: [ngTabList]:` | 2 | angular/src/components-examples/aria/tabs/tabs-common.css |
+| `PARSE_ERROR syntax error: y` | 2 | csstree/fixtures/ast/atrule/block.json#block at-rule #c.1, csstree/fixtures/ast/atrule/stylesheet.json#atruler.c.1 |
+| `PARSE_ERROR missing }` | 2 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with // hack, csstree/fixtures/ast/rule/Rule.json |
+| `PARSE_ERROR syntax error: important` | 2 | csstree/fixtures/ast/declaration/Important.json#divided by comment, csstree/fixtures/ast/declaration/Important.json#divi |
+| `PARSE_ERROR syntax error: ()` | 2 | csstree/fixtures/ast/declaration/custom-property.json#complex balanced, live/pico.css |
+| `PARSE_ERROR syntax error: {` | 2 | csstree/fixtures/ast/declaration/custom-property.json#should ignore everything inside block, live/water.css |
+| `PARSE_ERROR syntax error: }` | 2 | csstree/fixtures/ast/declaration/custom-property.json#should ignore everything inside block, live/water.css |
+| `PARSE_ERROR syntax error: :not(&)` | 2 | csstree/fixtures/ast/declarationList/nesting.json#basic, csstree/fixtures/ast/rule/nesting.json#basic |
+| `PARSE_ERROR syntax error: ([{}` | 2 | csstree/fixtures/ast/selector/PseudoClassSelector.json#unknown function pseudo class with nested blocks, csstree/fixture |
+| `PARSE_ERROR syntax error: ￾` | 2 | csstree/fixtures/ast/stylesheet/StyleSheet.json#BOM UTF-16LE, csstree/fixtures/ast/stylesheet/StyleSheet.json#BOM UTF-16 |
+| `PARSE_ERROR syntax error: #%,#%,#%,` | 2 | live/animate.min.css |
+| `PARSE_ERROR syntax error: ,#%` | 2 | live/tailwind-2.min.css |
+| `PARSE_ERROR syntax error: important;` | 2 | postcss-cases/important.css |
+| `PARSE_ERROR syntax error: ))` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `PARSE_ERROR syntax error: ):focus-within` | 1 | angular/src/components-examples/aria/combobox/combobox-example.css |
+| `PARSE_ERROR syntax error: :focus` | 1 | angular/src/dev-app/common-classes.css |
+| `PARSE_ERROR syntax error: :hover` | 1 | angular/src/dev-app/common-classes.css |
+| `PARSE_ERROR syntax error: < #px` | 1 | csstree/fixtures/ast/atrule/atrule/container.json#query with a range feature |
+| `PARSE_ERROR syntax error: style(--cards:` | 1 | csstree/fixtures/ast/atrule/atrule/container.json#style query |
+| `PARSE_ERROR syntax error: STYLE(--cards:` | 1 | csstree/fixtures/ast/atrule/atrule/container.json#style query should case-insensitive |
+| `PARSE_ERROR syntax error: 'test' all;` | 1 | csstree/fixtures/ast/atrule/atrule/import.json#should be case insensetive |
+| `PARSE_ERROR syntax error: (foo:#)` | 1 | csstree/fixtures/ast/atrule/atrule/import.json#with supports(declaration) |
+| `PARSE_ERROR syntax error: @import 'test' {}` | 1 | csstree/fixtures/ast/atrule/atrule/import.json#@import with block is not an error |
+| `PARSE_ERROR syntax error: @import 'test' /* comment */ {}` | 1 | csstree/fixtures/ast/atrule/atrule/import.json#white spaces and comment should not affect prelude consuming |
+| `PARSE_ERROR syntax error: screen` | 1 | csstree/fixtures/ast/atrule/atrule/media.json#missed 'and' keyword |
+| `PARSE_ERROR syntax error: @media;` | 1 | csstree/fixtures/ast/atrule/atrule/media.json#@media with no block is not an error |
+| `PARSE_ERROR syntax error: @media (foo:#` | 1 | csstree/fixtures/ast/atrule/atrule/media.json#@media with unclosed parentheses is not an error |
+| `PARSE_ERROR syntax error: @nest` | 1 | csstree/fixtures/ast/atrule/atrule/nest.json#single media type |
+| `PARSE_ERROR syntax error: (a) to` | 1 | csstree/fixtures/ast/atrule/atrule/scope.json#base syntax |
+| `PARSE_ERROR syntax error: to` | 1 | csstree/fixtures/ast/atrule/atrule/scope.json#only limit |
+| `PARSE_ERROR syntax error: @supports (flex: #)` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#@supports with no block |
+| `PARSE_ERROR syntax error: (.example)` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#@supports with selector() case-insensitive |
+| `PARSE_ERROR syntax error: @supports;` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#@supports with no block is not an error |
+
+#### Reference errors where axiom recorded no gap
+
+| error | files | examples |
+|---|---:|---|
+| `Identifier is expected` | 4 | csstree/fixtures/ast/declarationList/nesting.json#don't parse nested rule when it not started with &, csstree/fixtures/a |
+| `Colon is expected` | 3 | csstree/fixtures/ast/atrule/atrule/supports.json#complex prelude, dom-examples/view-transitions/mpa-chapter-nav-multiple |
+| `Number, dimension, ratio or identifier is expected` | 1 | csstree/fixtures/ast/atrule/atrule/container.json#complex query |
+| `Expected ":", "<", ">", "=" or ")"` | 1 | csstree/fixtures/ast/atrule/atrule/container.json#complex query |
+| `Unknown word <` | 1 | csstree/fixtures/ast/stylesheet/StyleSheet.json#CDO |
+| `Unknown word -->` | 1 | csstree/fixtures/ast/stylesheet/StyleSheet.json#CDC |
+| `Unclosed string` | 1 | csstree/fixtures/ast/stylesheet/StyleSheet.json#rule with a bad-string token (issue #93) |
+| `Unterminated string in JSON at position 30 (line 1 column 31)` | 1 | django/tests/staticfiles_tests/project/documents/cached/source_map_data_uri.css |
+| `")" is expected` | 1 | postcss-cases/atrule-rules.css |
+
+#### css-tree error histogram
+
+| error | files | examples |
+|---|---:|---|
+| `Identifier is expected` | 23 | csstree/fixtures/ast/atrule/atrule/scope.json#bad selectors, csstree/fixtures/ast/block/Block.json#bad symbol in a prope |
+| `Unexpected input` | 10 | csstree/fixtures/ast/atrule/atrule/import.json#with supports(condition), csstree/fixtures/ast/atrule/atrule/supports.jso |
+| `"{" is expected` | 9 | csstree/fixtures/ast/declaration/Declaration.json#declaration property with & hack, csstree/fixtures/ast/stylesheet/tole |
+| `Selector is expected` | 9 | csstree/fixtures/ast/stylesheet/tolerant.json#no block, postcss-cases/no-selector.css, postcss-cases/semicolons.css |
+| `")" is expected` | 8 | csstree/fixtures/ast/rule/Rule.json#shouldn't parse a selector when parseRulePrelude is false, csstree/fixtures/ast/styl |
+| `Colon is expected` | 5 | csstree/fixtures/ast/atrule/atrule/supports.json#complex prelude, csstree/fixtures/ast/declarationList/tolerant.json#no  |
+| `Semicolon or block is expected` | 4 | csstree/fixtures/ast/atrule/tolerant.json#at-rule (unknown) may have any content in prelude, csstree/fixtures/ast/atrule |
+| `Number, dimension, ratio or identifier is expected` | 2 | csstree/fixtures/ast/atrule/atrule/container.json#complex query, csstree/fixtures/ast/atrule/atrule/media.json#a list of |
+| `String or url() is expected` | 2 | csstree/fixtures/ast/atrule/tolerant.json#at-rule (known) may have any content in prelude, csstree/fixtures/ast/atrule/t |
+| `Expected ":", "<", ">", "=" or ")"` | 1 | csstree/fixtures/ast/atrule/atrule/container.json#complex query |
+| `Unknown feature func()` | 1 | csstree/fixtures/ast/atrule/atrule/supports.json#using function |
+| `Identifier is expected but function found` | 1 | postcss-cases/at-rule-brackets.css |
+| `Unknown feature --element()` | 1 | postcss-cases/at-rule-brackets.css |
+| `Name is expected` | 1 | wpt/css/css-syntax/charset/support/bomless-utf16.css |
+
+| preprocessor | files | examples |
+|---|---:|---|
+| `preprocessor flagged` | 10 | csstree/fixtures/ast/block/Block.json#at-rule in block, csstree/fixtures/ast/block/Block.json#at-rule in the ending of b |
diff --git a/parser/tools/web-corpus-bench/README.md b/parser/tools/web-corpus-bench/README.md
new file mode 100644
index 000000000..dbf2d0d24
--- /dev/null
+++ b/parser/tools/web-corpus-bench/README.md
@@ -0,0 +1,29 @@
+# web-corpus-bench
+
+Stress-tests the HTML/CSS front end against reference parsers over large corpora, and lists
+what it misses. Not part of the test suite: the corpora are downloaded (~500MB) and the
+reference parsers are extra dependencies.
+
+- HTML reference: **parse5** (the WHATWG tree-construction algorithm; only elements with a
+  source position count, so implied `html`/`head`/`body` are ignored) and **htmlparser2**
+  (elements as written). Compared per file: written-element count, tag multiset, parent>child
+  edge multiset, attribute name=value multiset, class tokens, ids, URL-bearing attributes vs
+  `html_reference` rows, script/style counts and inline script length, `style` attribute
+  declaration counts and `<style>` rule/declaration counts (css-tree), event-handler
+  attributes vs handler calls, direct text, title, parse errors vs parse gaps, timing.
+- CSS reference: **css-tree** (tolerant parse), **postcss** (does it throw) and
+  **@bramus/specificity**. Compared per sheet: style rules, at-rule names, selector texts,
+  specificity per selector, selector-part kinds per selector, declarations
+  (property|value|important), custom properties, `var()`/`url()`/`@import`/`@keyframes`/
+  `@font-face`/`@layer`/`@container` names, comments, errors vs gaps, timing.
+
+```
+npm install            # in this directory: parse5, htmlparser2, css-tree, postcss, @bramus/specificity
+./fetch-corpora.sh     # html5lib tree-construction, wpt (sparse), csstree + postcss fixtures,
+                       # Angular/Django/Bootstrap/petclinic/dom-examples repos, a set of live pages and CDN stylesheets
+./run.sh               # one process per corpus, then results/report.md
+```
+
+`results/*.jsonl` holds one record per file with the diffs and samples; `report.md` aggregates
+them: coverage totals, the top missing/extra tags, edges, attributes, URLs, selectors,
+declarations, and the gap texts recorded where the reference parsers saw no error.
diff --git a/parser/tools/web-corpus-bench/common.ts b/parser/tools/web-corpus-bench/common.ts
new file mode 100644
index 000000000..cf21fe7c4
--- /dev/null
+++ b/parser/tools/web-corpus-bench/common.ts
@@ -0,0 +1,84 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+export interface Case { id: string; file: string; root: string; content: string; corpus: string; fragmentContext?: string; scriptingOff?: boolean }
+
+export type Counter = Map<string, number>;
+export const inc = (c: Counter, k: string, n = 1): void => { c.set(k, (c.get(k) ?? 0) + n); };
+export const total = (c: Counter): number => { let t = 0; for (const v of c.values()) t += v; return t; };
+/** Entries where a and b differ, as {key: a-b}, capped. */
+export function diff(a: Counter, b: Counter, cap = 40): Record<string, number> {
+  const out: Record<string, number> = {};
+  const keys = new Set([...a.keys(), ...b.keys()]);
+  let n = 0;
+  for (const k of keys) {
+    const d = (a.get(k) ?? 0) - (b.get(k) ?? 0);
+    if (d !== 0) { out[k] = d; if (++n >= cap) break; }
+  }
+  return out;
+}
+export const toObj = (c: Counter): Record<string, number> => Object.fromEntries(c);
+
+export function walkFiles(dir: string, exts: string[], out: string[] = []): string[] {
+  let entries: fs.Dirent[];
+  try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return out; }
+  for (const e of entries) {
+    if (e.name === 'node_modules' || e.name === '.git') continue;
+    const p = path.join(dir, e.name);
+    if (e.isDirectory()) walkFiles(p, exts, out);
+    else if (exts.includes(path.extname(e.name).toLowerCase())) out.push(p);
+  }
+  return out;
+}
+
+export function* fileCases(corpus: string, root: string, exts: string[], maxBytes = 50_000_000): Generator<Case> {
+  for (const file of walkFiles(root, exts).sort()) {
+    const st = fs.statSync(file);
+    if (st.size > maxBytes) continue;
+    let content: string;
+    try { content = fs.readFileSync(file, 'utf-8'); } catch { continue; }
+    yield { id: path.relative(root, file), file, root, content, corpus };
+  }
+}
+
+/** html5lib tree-construction .dat files: one case per `#data` section. */
+export function* datCases(corpus: string, root: string): Generator<Case> {
+  for (const file of walkFiles(root, ['.dat']).sort()) {
+    const text = fs.readFileSync(file, 'utf-8');
+    const lines = text.split('\n');
+    let i = 0;
+    while (i < lines.length) {
+      if (lines[i] !== '#data') { i += 1; continue; }
+      const startLine = i + 1;
+      i += 1;
+      const data: string[] = [];
+      while (i < lines.length && !/^#(errors|new-errors|document|document-fragment|script-on|script-off)$/.test(lines[i]!)) { data.push(lines[i]!); i += 1; }
+      let fragmentContext: string | undefined;
+      let scriptingOff = false;
+      while (i < lines.length && lines[i] !== '#data') {
+        if (lines[i] === '#document-fragment') { fragmentContext = lines[i + 1]?.trim(); }
+        if (lines[i] === '#script-off') scriptingOff = true;
+        i += 1;
+      }
+      // the data block ends before the newline preceding '#errors'
+      const content = data.join('\n');
+      yield { id: `${path.relative(root, file)}:${startLine}`, file: `${file}.${startLine}.html`, root, content, corpus, fragmentContext, scriptingOff };
+    }
+  }
+}
+
+export class Jsonl {
+  private readonly fd: number;
+  constructor(file: string) { fs.mkdirSync(path.dirname(file), { recursive: true }); this.fd = fs.openSync(file, 'w'); }
+  write(obj: unknown): void { fs.writeSync(this.fd, JSON.stringify(obj) + '\n'); }
+  close(): void { fs.closeSync(this.fd); }
+}
+
+export const nonWs = (s: string): number => s.replace(/\s+/g, '').length;
+export const sample = <T>(arr: T[], n = 5): T[] => arr.slice(0, n);
+
+export function arg(name: string, def?: string): string | undefined {
+  const i = process.argv.indexOf(`--${name}`);
+  return i >= 0 ? process.argv[i + 1] : def;
+}
+export const flag = (name: string): boolean => process.argv.includes(`--${name}`);
diff --git a/parser/tools/web-corpus-bench/css-compare.ts b/parser/tools/web-corpus-bench/css-compare.ts
new file mode 100644
index 000000000..8a53157e9
--- /dev/null
+++ b/parser/tools/web-corpus-bench/css-compare.ts
@@ -0,0 +1,52 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { Case, Jsonl, arg, fileCases, walkFiles } from './common';
+import { axiomStylesheet, compareCss, postcssThrows, refStylesheet } from './css-ref';
+
+const corpus = arg('corpus')!;
+const root = arg('root')!;
+const mode = arg('mode', 'files');
+const out = new Jsonl(arg('out', path.resolve(__dirname, `results/css-${corpus}.jsonl`))!);
+
+/** csstree ast fixtures: every `source` wrapped into a stylesheet by its context directory. */
+function* csstreeFixtures(): Generator<Case> {
+  const WRAP: Record<string, (s: string) => string | null> = {
+    stylesheet: (s) => s, rule: (s) => s, atrule: (s) => s, block: (s) => `*${s}`,
+    declaration: (s) => `*{${s}}`, declarationList: (s) => `*{${s}}`, selector: (s) => `${s}{}`, selectorList: (s) => `${s}{}`,
+    atrulePrelude: () => null, mediaQuery: () => null, mediaQueryList: () => null, value: () => null,
+  };
+  for (const file of walkFiles(path.join(root, 'fixtures/ast'), ['.json']).sort()) {
+    const ctx = path.basename(path.dirname(file));
+    const wrap = WRAP[ctx];
+    if (wrap === undefined) continue;
+    const json = JSON.parse(fs.readFileSync(file, 'utf-8')) as Record<string, any>;
+    for (const [name, fixture] of Object.entries(json)) {
+      if (typeof fixture !== 'object' || fixture === null || typeof fixture.source !== 'string' || fixture.error !== undefined) continue;
+      if (fixture.options?.property !== undefined) continue;
+      const content = wrap(fixture.source);
+      if (content === null) continue;
+      yield { id: `${path.relative(root, file)}#${name}`, file: `${file}.css`, root, content, corpus };
+    }
+  }
+}
+
+const cases = mode === 'csstree' ? csstreeFixtures() : fileCases(corpus, root, ['.css']);
+let n = 0;
+for (const c of cases) {
+  n += 1;
+  if (n % 200 === 0) process.stderr.write(`${corpus}: ${n}\n`);
+  const rec: Record<string, unknown> = { corpus, id: c.id };
+  const ref = refStylesheet(c.content);
+  rec.postcssError = postcssThrows(c.content);
+  try {
+    const ax = axiomStylesheet(c.content, c.file, c.root);
+    Object.assign(rec, compareCss(ref, ax, c.content));
+  } catch (e: any) {
+    rec.crash = String(e?.stack ?? e).slice(0, 400);
+    rec.bytes = c.content.length;
+  }
+  if (c.content.length < 400) rec.source = c.content;
+  out.write(rec);
+}
+out.close();
+process.stderr.write(`${corpus}: done ${n}\n`);
diff --git a/parser/tools/web-corpus-bench/css-ref.ts b/parser/tools/web-corpus-bench/css-ref.ts
new file mode 100644
index 000000000..570bc48f0
--- /dev/null
+++ b/parser/tools/web-corpus-bench/css-ref.ts
@@ -0,0 +1,264 @@
+/** Reference-side CSS extraction (css-tree + postcss + @bramus/specificity) and the axiom-side read, as comparable shapes. */
+import * as csstree from 'css-tree';
+import postcss from 'postcss';
+import Specificity from '@bramus/specificity';
+
+import { Counter, inc, toObj, diff, total } from './common';
+
+const P = require('path').resolve(__dirname, '../../src');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { CssParser } = require(`${P}/parsers/css/css-parser`);
+const { CssStylesheet } = require(`${P}/analysis-types/css/CssStylesheet`);
+const { CssSourceProvenance, CssStylesheetSource } = require(`${P}/enums/css/CssStylesheetSource`);
+
+export const axiomCss = new CssParser();
+
+export interface CssShape {
+  styleRules: number;
+  atrules: Counter;            // name -> count
+  selectors: Counter;          // normalised selector text -> count
+  specificity: Map<string, string>;   // normalised selector -> "a,b,c" (first seen)
+  parts: Map<string, Counter>;        // normalised selector -> kind counter
+  declarations: Counter;       // prop|value|imp
+  customProps: number;
+  vars: Counter; urls: Counter; imports: Counter; keyframesNames: Counter; fontFaceFamilies: Counter;
+  layers: Counter; containers: Counter;
+  comments: number;
+  nestedStyleRules: number;    // style rules whose parent is a style rule
+  errors: string[];
+  ms: number;
+}
+
+export function normSel(s: string): string {
+  return s.replace(/\s+/g, ' ').replace(/\s*([>+~,|])\s*/g, '$1').replace(/\(\s+/g, '(').replace(/\s+\)/g, ')')
+    .replace(/\s*=\s*/g, '=').replace(/\s*\|\|\s*/g, '||').trim();
+}
+export function normVal(s: string): string { return s.replace(/\s+/g, '').toLowerCase(); }
+
+function scanRefs(value: string, shape: CssShape): void {
+  const re = /\b(var|url)\(\s*(?:(["'])([\s\S]*?)\2|([^)\s,]*))/g;
+  for (let m = re.exec(value); m !== null; m = re.exec(value)) {
+    const inner = (m[3] ?? m[4] ?? '').trim();
+    if (m[1] === 'var') { if (/^--/.test(inner)) inc(shape.vars, inner); }
+    else inc(shape.urls, inner);
+  }
+}
+
+function emptyShape(): CssShape {
+  return {
+    styleRules: 0, atrules: new Map(), selectors: new Map(), specificity: new Map(), parts: new Map(), declarations: new Map(),
+    customProps: 0, vars: new Map(), urls: new Map(), imports: new Map(), keyframesNames: new Map(), fontFaceFamilies: new Map(),
+    layers: new Map(), containers: new Map(), comments: 0, nestedStyleRules: 0, errors: [], ms: 0,
+  };
+}
+
+const PART_KIND: Record<string, string> = {
+  TypeSelector: 'TYPE', ClassSelector: 'CLASS', IdSelector: 'ID', AttributeSelector: 'ATTRIBUTE',
+  PseudoClassSelector: 'PSEUDO_CLASS', PseudoElementSelector: 'PSEUDO_ELEMENT', NestingSelector: 'NESTING',
+};
+
+export function refStylesheet(text: string): CssShape {
+  const shape = emptyShape();
+  const t0 = performance.now();
+  let ast: csstree.CssNode;
+  try {
+    ast = csstree.parse(text, { positions: true, parseValue: false, parseCustomProperty: false, onParseError: (e) => { shape.errors.push(e.message); } });
+  } catch (e) { shape.errors.push('THROW ' + String(e)); shape.ms = performance.now() - t0; return shape; }
+  csstree.walk(ast, {
+    enter(node: any) {
+      const atrule: any = (this as any).atrule;
+      const rule: any = (this as any).rule;
+      switch (node.type) {
+        case 'Rule': {
+          shape.styleRules += 1;
+          if (rule !== null && rule !== node) shape.nestedStyleRules += 1;
+          const inKeyframes = atrule !== null && /keyframes$/.test(String(atrule.name).toLowerCase());
+          if (node.prelude.type === 'SelectorList') {
+            node.prelude.children.forEach((sel: any) => {
+              const txt = normSel(csstree.generate(sel));
+              inc(shape.selectors, txt);
+              if (inKeyframes) return;
+              const kinds: Counter = new Map();
+              csstree.walk(sel, (n: any) => {
+                const k = PART_KIND[n.type];
+                if (k === undefined) return;
+                if (n.type === 'TypeSelector' && n.name === '*') inc(kinds, 'UNIVERSAL');
+                else if (n.type === 'PseudoClassSelector' && /^(before|after|first-line|first-letter)$/i.test(n.name)) inc(kinds, 'PSEUDO_ELEMENT');
+                else inc(kinds, k);
+              });
+              if (!shape.parts.has(txt)) shape.parts.set(txt, kinds);
+              if (!shape.specificity.has(txt)) {
+                try { const Spec: any = (Specificity as any).calculate ? Specificity : (Specificity as any).default; const s: any = Spec.calculate(csstree.generate(sel))[0]; const o: any = s?.asObject ?? s?.value ?? (typeof s?.toJSON === "function" ? s.toJSON().asObject : undefined); if (o) shape.specificity.set(txt, `${o.a},${o.b},${o.c}`); } catch { /* selector the library cannot read */ }
+              }
+            });
+          } else {
+            inc(shape.selectors, normSel(csstree.generate(node.prelude)));
+          }
+          break;
+        }
+        case 'Atrule': {
+          const name = String(node.name).toLowerCase();
+          inc(shape.atrules, name);
+          const prelude = node.prelude ? csstree.generate(node.prelude) : '';
+          if (name === 'import') {
+            const m = /^\s*(?:url\(\s*(?:"([^"]*)"|'([^']*)'|([^)\s]*))\s*\)|"([^"]*)"|'([^']*)')/.exec(prelude);
+            const target = m?.[1] ?? m?.[2] ?? m?.[3] ?? m?.[4] ?? m?.[5];
+            if (target !== undefined) inc(shape.imports, target);
+          } else if (/keyframes$/.test(name)) {
+            inc(shape.keyframesNames, prelude.trim().replace(/^["']|["']$/g, ''));
+          } else if (name === 'layer') {
+            for (const p of prelude.split(',')) if (p.trim()) inc(shape.layers, p.trim());
+          } else if (name === 'container') {
+            const m = /^\s*([A-Za-z_-][\w-]*)\s*(?:\(|$)/.exec(prelude);
+            if (m !== null && m[1] !== 'not') inc(shape.containers, m[1]!);
+          }
+          break;
+        }
+        case 'Declaration': {
+          if (rule === null && atrule === null) break;
+          const prop = String(node.property).toLowerCase();
+          const raw = node.value.type === 'Raw' ? node.value.value : csstree.generate(node.value);
+          inc(shape.declarations, `${prop}|${normVal(raw)}|${node.important ? '!' : ''}`);
+          if (prop.startsWith('--')) shape.customProps += 1;
+          scanRefs(raw, shape);
+          if (atrule !== null && String(atrule.name).toLowerCase().replace(/^-[a-z]+-/, '') === 'font-face' && prop === 'font-family' && rule === null) {
+            inc(shape.fontFaceFamilies, raw.trim().replace(/^["']|["']$/g, ''));
+          }
+          break;
+        }
+        case 'Comment': shape.comments += 1; break;
+        default: break;
+      }
+    },
+  });
+  shape.ms = performance.now() - t0;
+  return shape;
+}
+
+export function postcssThrows(text: string): string {
+  try { postcss.parse(text); return ''; } catch (e: any) { return String(e.reason ?? e.message ?? e).slice(0, 120); }
+}
+
+export function refDeclarationList(text: string): number {
+  let n = 0;
+  try {
+    const ast = csstree.parse(text, { context: 'declarationList', parseValue: false, parseCustomProperty: false, onParseError: () => {} });
+    csstree.walk(ast, (node) => { if (node.type === 'Declaration') n += 1; });
+  } catch { /* count stays */ }
+  return n;
+}
+
+export interface AxiomCssResult extends CssShape { gaps: Counter; gapSamples: string[]; preprocessor: boolean; raw: any }
+
+export function axiomStylesheet(text: string, file: string, root: string): AxiomCssResult {
+  const sheet = new CssStylesheet({
+    name: 'x', fileName: file.split('/').pop(), filePath: file, baseMservPath: root, relativePath: file.slice(root.length + 1),
+    sourceKind: CssStylesheetSource.FILE, sourceProvenance: CssSourceProvenance.PROJECT, ownerHtmlElementLinkHash: '',
+    htmlDocumentLinkHash: '', startLine: 1, startColumn: 1, endLine: 1, serviceVersionLinkHash: 'V',
+  });
+  const t0 = performance.now();
+  const x = axiomCss.parseStylesheet(text, { stylesheet: sheet, line: 1, column: 1, filePath: file, projectRoot: root, serviceVersionLinkHash: 'V' });
+  const ms = performance.now() - t0;
+  return { ...axiomShape(x, ms), raw: x };
+}
+
+export function axiomShape(x: any, ms: number): AxiomCssResult {
+  const shape = emptyShape() as AxiomCssResult;
+  shape.ms = ms;
+  shape.gaps = new Map(); shape.gapSamples = []; shape.preprocessor = false;
+  const ruleByHash = new Map<string, any>();
+  for (const r of x.rules) ruleByHash.set(r.getHash(), r);
+  for (const r of x.rules) {
+    if (r.ruleKind === 'STYLE_RULE') {
+      shape.styleRules += 1;
+      const parent = ruleByHash.get(r.parentRuleLinkHash);
+      if (parent !== undefined && parent.ruleKind === 'STYLE_RULE') shape.nestedStyleRules += 1;
+    } else {
+      inc(shape.atrules, r.atRuleName);
+      if (/keyframes$/.test(r.atRuleName)) inc(shape.keyframesNames, r.name);
+      if (r.atRuleName.replace(/^-[a-z]+-/, '') === 'font-face' && r.name !== '') inc(shape.fontFaceFamilies, r.name);
+    }
+  }
+  const partsBySel = new Map<string, Counter>();
+  for (const p of x.selectorParts) {
+    let c = partsBySel.get(p.selectorLinkHash);
+    if (c === undefined) { c = new Map(); partsBySel.set(p.selectorLinkHash, c); }
+    inc(c, p.partKind);
+  }
+  for (const s of x.selectors) {
+    const txt = normSel(s.selectorText);
+    inc(shape.selectors, txt);
+    if (!shape.specificity.has(txt)) shape.specificity.set(txt, `${s.specificityA},${s.specificityB},${s.specificityC}`);
+    if (!shape.parts.has(txt)) shape.parts.set(txt, partsBySel.get(s.getHash()) ?? new Map());
+  }
+  for (const d of x.declarations) {
+    inc(shape.declarations, `${d.property.toLowerCase()}|${normVal(d.valueText)}|${d.isImportant ? '!' : ''}`);
+    if (d.isCustomProperty) shape.customProps += 1;
+  }
+  for (const v of x.valueReferences) {
+    switch (v.referenceKind) {
+      case 'VARIABLE': inc(shape.vars, v.name); break;
+      case 'URL': inc(shape.urls, v.name); break;
+      case 'IMPORT': inc(shape.imports, v.name); break;
+      case 'LAYER': inc(shape.layers, v.name); break;
+      case 'CONTAINER': if (v.ownerRuleLinkHash !== '') inc(shape.containers, v.name); break;
+      default: break;
+    }
+  }
+  shape.comments = x.comments.length;
+  for (const g of x.parseGaps) {
+    inc(shape.gaps, g.gapKind);
+    if (g.gapKind === 'PREPROCESSOR_SYNTAX') shape.preprocessor = true;
+    if (shape.gapSamples.length < 8) shape.gapSamples.push(`${g.gapKind} L${g.startLine}: ${g.detail.slice(0, 100)}`);
+  }
+  return shape;
+}
+
+/** The comparison record for one stylesheet text. */
+export function compareCss(ref: CssShape, ax: AxiomCssResult, text: string): Record<string, unknown> {
+  const selMissing = diff(ref.selectors, ax.selectors, 1000);
+  const specMismatch: string[] = [];
+  const partsMismatch: string[] = [];
+  for (const [sel, spec] of ref.specificity) {
+    const a = ax.specificity.get(sel);
+    if (a !== undefined && a !== spec && specMismatch.length < 10) specMismatch.push(`${sel} ref=${spec} ax=${a}`);
+  }
+  let partsChecked = 0, partsBad = 0;
+  for (const [sel, kinds] of ref.parts) {
+    const a = ax.parts.get(sel);
+    if (a === undefined) continue;
+    partsChecked += 1;
+    const d = diff(kinds, a);
+    if (Object.keys(d).length > 0) { partsBad += 1; if (partsMismatch.length < 10) partsMismatch.push(`${sel} ${JSON.stringify(d)}`); }
+  }
+  const declDiff = diff(ref.declarations, ax.declarations, 2000);
+  const declMissing = Object.entries(declDiff).filter(([, v]) => v > 0);
+  const declExtra = Object.entries(declDiff).filter(([, v]) => v < 0);
+  const refErrs = ref.errors.length;
+  const axGaps = total(ax.gaps) - (ax.gaps.get('PREPROCESSOR_SYNTAX') ?? 0);
+  return {
+    bytes: text.length, refMs: Math.round(ref.ms), axMs: Math.round(ax.ms),
+    styleRules: [ref.styleRules, ax.styleRules], nestedStyleRules: [ref.nestedStyleRules, ax.nestedStyleRules],
+    atrules: [total(ref.atrules), total(ax.atrules)], atruleDiff: diff(ref.atrules, ax.atrules),
+    selectors: [total(ref.selectors), total(ax.selectors)],
+    selectorMissingCount: Object.values(selMissing).filter((v) => v > 0).reduce((a, b) => a + b, 0),
+    selectorExtraCount: -Object.values(selMissing).filter((v) => v < 0).reduce((a, b) => a + b, 0),
+    selectorMissing: Object.entries(selMissing).filter(([, v]) => v > 0).slice(0, 12).map(([k]) => k),
+    selectorExtra: Object.entries(selMissing).filter(([, v]) => v < 0).slice(0, 12).map(([k]) => k),
+    specChecked: ref.specificity.size, specMismatchCount: [...ref.specificity].filter(([s, v]) => ax.specificity.has(s) && ax.specificity.get(s) !== v).length,
+    specMismatch,
+    partsChecked, partsBad, partsMismatch,
+    declarations: [total(ref.declarations), total(ax.declarations)], customProps: [ref.customProps, ax.customProps],
+    declMissingCount: declMissing.reduce((a, [, v]) => a + v, 0), declExtraCount: -declExtra.reduce((a, [, v]) => a + v, 0),
+    declMissing: declMissing.slice(0, 12).map(([k]) => k), declExtra: declExtra.slice(0, 12).map(([k]) => k),
+    vars: [total(ref.vars), total(ax.vars)], varDiff: diff(ref.vars, ax.vars, 10),
+    urls: [total(ref.urls), total(ax.urls)], urlDiff: diff(ref.urls, ax.urls, 10),
+    imports: [total(ref.imports), total(ax.imports)], importDiff: diff(ref.imports, ax.imports, 10),
+    keyframesNames: [total(ref.keyframesNames), total(ax.keyframesNames)], keyframesDiff: diff(ref.keyframesNames, ax.keyframesNames, 10),
+    fontFaces: [total(ref.fontFaceFamilies), total(ax.fontFaceFamilies)], fontFaceDiff: diff(ref.fontFaceFamilies, ax.fontFaceFamilies, 10),
+    layers: [total(ref.layers), total(ax.layers)], containers: [total(ref.containers), total(ax.containers)],
+    comments: [ref.comments, ax.comments],
+    refErrors: refErrs, refErrorSamples: ref.errors.slice(0, 5), axGaps, axGapKinds: toObj(ax.gaps), axGapSamples: ax.gapSamples,
+    preprocessor: ax.preprocessor,
+  };
+}
diff --git a/parser/tools/web-corpus-bench/fetch-corpora.sh b/parser/tools/web-corpus-bench/fetch-corpora.sh
new file mode 100755
index 000000000..69d26fd10
--- /dev/null
+++ b/parser/tools/web-corpus-bench/fetch-corpora.sh
@@ -0,0 +1,35 @@
+#!/bin/bash
+# Pulls the HTML/CSS corpora the bench runs over into ./corpus (git-ignored). ~500MB, a few minutes.
+set -e
+cd "$(dirname "$0")"; mkdir -p corpus live/html live/css; cd corpus
+clone() { [ -d "$2" ] || git clone -q --depth 1 "https://github.com/$1.git" "$2"; }
+clone csstree/csstree csstree                      # css-tree AST fixtures (selector/at-rule/declaration edge cases)
+clone postcss/postcss-parser-tests postcss-parser-tests
+clone mdn/dom-examples dom-examples                # small real-world pages
+clone h5bp/html5-boilerplate html5-boilerplate
+clone spring-projects/spring-petclinic spring-petclinic   # Thymeleaf templates
+clone twbs/bootstrap bootstrap                     # dist css incl. minified
+clone angular/components components                # Angular templates, component css
+clone django/django django                         # Django templates, admin css
+clone inikulin/parse5 parse5                       # huge-page, location-info pages
+( cd parse5 && git config submodule.html5lib-tests.url https://github.com/html5lib/html5lib-tests.git \
+  && git submodule update --init --depth 1 test/data/html5lib-tests )   # html5lib tree-construction .dat
+if [ ! -d wpt ]; then
+  git clone -q --depth 1 --filter=blob:none --sparse https://github.com/web-platform-tests/wpt.git wpt
+  ( cd wpt && git sparse-checkout set html/syntax css/css-syntax css/selectors css/css-nesting css/css-variables css/css-cascade \
+      html/semantics/scripting-1 html/semantics/embedded-content css/css-fonts css/css-animations css/css-images )
+fi
+mkdir -p live/html live/css; cd live
+f() { [ -s "$2" ] || curl -sL --max-time 40 -A "Mozilla/5.0" -o "$2" "$1" || true; }
+f https://html.spec.whatwg.org/ html/whatwg-html-spec.html; f https://en.wikipedia.org/wiki/HTML html/wikipedia-html.html
+f https://github.com/ html/github.html; f https://developer.mozilla.org/en-US/docs/Web/HTML html/mdn-html.html
+f https://www.bbc.com/ html/bbc.html; f https://www.apple.com/ html/apple.html; f https://www.cnn.com/ html/cnn.html
+f https://getbootstrap.com/docs/5.3/components/navbar/ html/bootstrap-docs.html; f https://tailwindcss.com/ html/tailwind.html
+f https://news.ycombinator.com/ html/hn.html; f https://react.dev/ html/react.html; f https://www.theguardian.com/international html/guardian.html
+f https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css css/bootstrap.min.css
+f https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css css/tailwind-2.min.css
+f https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css css/fontawesome.css
+f https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.css css/bulma.css; f https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css css/animate.min.css
+f https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.css css/pico.css; f https://cdn.jsdelivr.net/npm/open-props@1.7.4/open-props.min.css css/open-props.min.css
+f https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.css css/semantic.css; f https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/css/materialize.css css/materialize.css
+echo "corpora ready"
diff --git a/parser/tools/web-corpus-bench/html-compare.ts b/parser/tools/web-corpus-bench/html-compare.ts
new file mode 100644
index 000000000..e409667ab
--- /dev/null
+++ b/parser/tools/web-corpus-bench/html-compare.ts
@@ -0,0 +1,240 @@
+import * as path from 'path';
+import * as parse5 from 'parse5';
+import { parseDocument } from 'htmlparser2';
+import { Counter, Case, Jsonl, arg, datCases, diff, fileCases, inc, nonWs, toObj, total } from './common';
+import { axiomCss, axiomShape, compareCss, refDeclarationList, refStylesheet } from './css-ref';
+
+const P = require('path').resolve(__dirname, '../../src');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { HtmlParser } = require(`${P}/parsers/html/html-parser`);
+
+const corpus = arg('corpus')!;
+const root = arg('root')!;
+const mode = arg('mode', 'files');
+const out = new Jsonl(arg('out', path.resolve(__dirname, `results/html-${corpus}.jsonl`))!);
+const html = new HtmlParser(axiomCss);
+
+const URL_ATTRS = new Set(['src', 'href', 'action', 'formaction', 'poster', 'cite', 'manifest', 'ping', 'background', 'longdesc', 'usemap', 'codebase', 'profile', 'archive', 'xlink:href', 'srcset', 'imagesrcset']);
+const URLISH = /^(https?:)?\/\/|^\.{0,2}\/|^#.|\.(css|js|png|jpe?g|svg|gif|webp|woff2?|ico|json|html?)(\?|#|$)|^(mailto|tel|data|javascript):/i;
+
+interface RefShape {
+  elements: number; tags: Counter; edges: Counter; attrs: Counter; attrValues: Counter; classes: Counter; ids: Counter;
+  urls: Counter; urlishAttrs: Counter; scripts: number; inlineScripts: number; scriptText: number; styles: number;
+  styleText: string[]; styleAttrs: string[]; handlers: number; text: number; title: string; doctype: boolean; errors: Counter;
+  maxDepth: number; ms: number;
+}
+function emptyRef(): RefShape {
+  return { elements: 0, tags: new Map(), edges: new Map(), attrs: new Map(), attrValues: new Map(), classes: new Map(), ids: new Map(),
+    urls: new Map(), urlishAttrs: new Map(), scripts: 0, inlineScripts: 0, scriptText: 0, styles: 0, styleText: [], styleAttrs: [],
+    handlers: 0, text: 0, title: '', doctype: false, errors: new Map(), maxDepth: 0, ms: 0 };
+}
+
+function refParse5(c: Case): RefShape {
+  const s = emptyRef();
+  const t0 = performance.now();
+  const opts: parse5.ParserOptions<parse5.DefaultTreeAdapterMap> = { sourceCodeLocationInfo: true, scriptingEnabled: !c.scriptingOff, onParseError: (e) => inc(s.errors, e.code) };
+  let rootNode: any;
+  if (c.fragmentContext !== undefined) {
+    const [a, b] = c.fragmentContext.split(/\s+/);
+    const ns = b === undefined ? parse5.html.NS.HTML : a === 'svg' ? parse5.html.NS.SVG : parse5.html.NS.MATHML;
+    const ctx = parse5.defaultTreeAdapter.createElement(b ?? a!, ns as any, []);
+    rootNode = parse5.parseFragment(ctx, c.content, opts);
+  } else {
+    rootNode = parse5.parse(c.content, opts);
+  }
+  const visit = (node: any, writtenParent: string, depth: number): void => {
+    const kids: any[] = node.childNodes ?? [];
+    if (node.nodeName === 'template' && node.content) kids.push(...(node.content.childNodes ?? []));
+    for (const k of kids) {
+      if (k.nodeName === '#documentType') { s.doctype = true; continue; }
+      if (k.nodeName === '#text') {
+        if (writtenParent !== '' && !/^(script|style)$/.test(node.tagName ?? '')) s.text += nonWs(k.value);
+        if (node.tagName === 'title' && s.title === '') s.title = k.value.replace(/\s+/g, ' ').trim();
+        continue;
+      }
+      if (k.tagName === undefined) continue;
+      const written = k.sourceCodeLocation !== null && k.sourceCodeLocation !== undefined;
+      const tag = k.namespaceURI === parse5.html.NS.HTML ? k.tagName.toLowerCase() : k.tagName;
+      if (!written) { visit(k, writtenParent, depth); continue; }
+      s.elements += 1;
+      if (depth > s.maxDepth) s.maxDepth = depth;
+      inc(s.tags, tag);
+      inc(s.edges, `${writtenParent}>${tag}`);
+      for (const a of k.attrs) {
+        const name = (a.prefix ? `${a.prefix}:${a.name}` : a.name).toLowerCase();
+        inc(s.attrs, `${tag}@${name}`);
+        inc(s.attrValues, `${name}=${a.value}`);
+        if (name === 'class') for (const t of a.value.split(/[ \t\n\f\r]+/)) if (t !== '') inc(s.classes, t);
+        if (name === 'id') inc(s.ids, a.value.trim());
+        if (/^on[a-z]/.test(name) && a.value.trim() !== '') s.handlers += 1;
+        if (name === 'style' && a.value.trim() !== '') s.styleAttrs.push(a.value);
+        if (name === 'srcset' || name === 'imagesrcset') {
+          for (const cand of a.value.split(/,(?=\s*\S)/)) { const u = cand.trim().split(/\s+/)[0] ?? ''; if (u !== '') inc(s.urls, u); }
+        } else if (URL_ATTRS.has(name) || (name === 'data' && tag === 'object')) {
+          inc(s.urls, a.value.trim());
+        } else if (URLISH.test(a.value.trim()) && !/^(class|id|style|type|rel|name|for|lang|title|alt|content)$/.test(name)) {
+          inc(s.urlishAttrs, `${tag}@${name}`);
+        }
+        if (tag === 'meta' && name === 'content') {
+          const he = k.attrs.find((x: any) => x.name === 'http-equiv')?.value?.trim().toLowerCase();
+          const m = he === 'refresh' ? /url\s*=\s*['"]?([^'"\s;]+)/i.exec(a.value) : null;
+          if (m !== null) inc(s.urls, m[1]!);
+        }
+      }
+      if (tag === 'script' && k.namespaceURI === parse5.html.NS.HTML) {
+        s.scripts += 1;
+        const src = k.attrs.find((x: any) => x.name === 'src')?.value;
+        if (src === undefined || src.trim() === '') { s.inlineScripts += 1; for (const t of k.childNodes) if (t.nodeName === '#text') s.scriptText += t.value.length; }
+      }
+      if (tag === 'style' && k.namespaceURI === parse5.html.NS.HTML) {
+        const type = k.attrs.find((x: any) => x.name === 'type')?.value?.trim().toLowerCase() ?? '';
+        if (type === '' || type === 'text/css') { s.styles += 1; s.styleText.push(k.childNodes.filter((t: any) => t.nodeName === '#text').map((t: any) => t.value).join('')); }
+      }
+      visit(k, tag, depth + 1);
+    }
+  };
+  visit(rootNode, '', 0);
+  s.ms = performance.now() - t0;
+  return s;
+}
+
+function refHtmlparser2(content: string): { elements: number; tags: Counter } {
+  const tags: Counter = new Map();
+  let elements = 0;
+  const doc = parseDocument(content, { lowerCaseTags: true, lowerCaseAttributeNames: true });
+  const visit = (n: any): void => {
+    for (const k of n.children ?? []) {
+      if (k.type === 'tag' || k.type === 'script' || k.type === 'style') { elements += 1; inc(tags, k.name); }
+      visit(k);
+    }
+  };
+  visit(doc);
+  return { elements, tags };
+}
+
+function axiomParse(c: Case): { shape: RefShape; x: any; gaps: Counter; gapSamples: string[]; dialects: string[]; cssInline: Record<string, unknown> } {
+  const s = emptyRef();
+  const t0 = performance.now();
+  const x = html.parse(c.content, c.file, c.root, 'V');
+  s.ms = performance.now() - t0;
+  const byHash = new Map<string, any>();
+  for (const e of x.elements) byHash.set(e.getHash(), e);
+  s.elements = x.elements.length;
+  for (const e of x.elements) {
+    inc(s.tags, e.tagName);
+    const parent = byHash.get(e.parentElementLinkHash);
+    inc(s.edges, `${parent?.tagName ?? ''}>${e.tagName}`);
+    if (e.depth > s.maxDepth) s.maxDepth = e.depth;
+    if (e.id !== '') inc(s.ids, e.id);
+    s.text += nonWs(e.textContent);
+  }
+  for (const a of x.attributes) {
+    const owner = byHash.get(a.ownerElementLinkHash);
+    const name = (a.prefix === '' ? a.name : `${a.prefix}:${a.name}`).toLowerCase();
+    inc(s.attrs, `${owner?.tagName}@${name}`);
+    inc(s.attrValues, `${name}=${a.value}`);
+  }
+  for (const cr of x.classReferences) inc(s.classes, cr.className);
+  for (const r of x.references) inc(s.urls, r.urlAsWritten);
+  s.scripts = x.scripts.length;
+  s.inlineScripts = x.scripts.filter((sc: any) => sc.scriptKind === 'INLINE').length;
+  for (const sc of x.scripts) s.scriptText += sc.bodyLength;
+  s.styles = x.stylesheets.length;
+  s.title = x.document.title;
+  s.doctype = x.document.doctype !== '';
+  const handlerAttrs = new Set<string>();
+  for (const h of x.handlerCalls) handlerAttrs.add(h.attributeLinkHash);
+  const gaps: Counter = new Map();
+  const gapSamples: string[] = [];
+  for (const g of x.parseGaps) {
+    const head = g.detail.split(':')[0];
+    inc(gaps, `${g.gapKind}/${head}`);
+    if (g.gapKind === 'HANDLER_SYNTAX') handlerAttrs.add(`${g.startLine}:${g.startColumn}`);
+    if (gapSamples.length < 6) gapSamples.push(`${g.gapKind} L${g.startLine}: ${g.detail.slice(0, 100)}`);
+  }
+  s.handlers = handlerAttrs.size;
+  // inline CSS: every <style> body against css-tree, every style attribute's declaration count
+  const cssInline: Record<string, unknown> = {};
+  if (x.stylesheets.length > 0) {
+    const refAll = { rules: 0, decls: 0, errors: 0 };
+    const axAll = { rules: 0, decls: 0, gaps: 0 };
+    const samples: string[] = [];
+    for (const sheet of x.stylesheets) {
+      const i = x.stylesheets.indexOf(sheet);
+      const text = (c as any).styleTexts?.[i];
+      if (text === undefined) continue;
+      const ref = refStylesheet(text);
+      const sub = {
+        rules: x.css.rules.filter((r: any) => r.stylesheetLinkHash === sheet.getHash()),
+        selectors: x.css.selectors.filter((r: any) => r.stylesheetLinkHash === sheet.getHash()),
+        selectorParts: x.css.selectorParts.filter((r: any) => x.css.rules.some((q: any) => q.getHash() === r.ruleLinkHash && q.stylesheetLinkHash === sheet.getHash())),
+        declarations: x.css.declarations.filter((r: any) => r.stylesheetLinkHash === sheet.getHash()),
+        valueReferences: x.css.valueReferences.filter((r: any) => r.stylesheetLinkHash === sheet.getHash()),
+        comments: x.css.comments.filter((r: any) => r.stylesheetLinkHash === sheet.getHash()),
+        parseGaps: x.css.parseGaps.filter((r: any) => r.stylesheetLinkHash === sheet.getHash()),
+      };
+      const ax = axiomShape(sub, 0);
+      const cmp = compareCss(ref, ax, text) as any;
+      refAll.rules += ref.styleRules + total(ref.atrules); refAll.decls += total(ref.declarations); refAll.errors += ref.errors.length;
+      axAll.rules += ax.styleRules + total(ax.atrules); axAll.decls += total(ax.declarations); axAll.gaps += cmp.axGaps;
+      if (samples.length < 4 && (cmp.selectorMissingCount > 0 || cmp.declMissingCount > 0 || cmp.axGaps > 0)) {
+        samples.push(JSON.stringify({ selMissing: cmp.selectorMissing.slice(0, 4), declMissing: cmp.declMissing.slice(0, 4), gaps: cmp.axGapSamples.slice(0, 3) }));
+      }
+    }
+    cssInline.styleElements = { ref: refAll, ax: axAll, samples };
+  }
+  return { shape: s, x, gaps, gapSamples, dialects: [...x.document.templateDialects], cssInline };
+}
+
+const cases = mode === 'dat' ? datCases(corpus, root) : fileCases(corpus, root, ['.html', '.htm', '.xhtml']);
+let n = 0;
+for (const c of cases) {
+  n += 1;
+  if (n % 200 === 0) process.stderr.write(`${corpus}: ${n}\n`);
+  const rec: Record<string, unknown> = { corpus, id: c.id, bytes: c.content.length, fragment: c.fragmentContext ?? '' };
+  if (c.content.length < 300) rec.source = c.content;
+  let ref: RefShape;
+  try { ref = refParse5(c); } catch (e: any) { rec.refCrash = String(e?.message ?? e).slice(0, 200); out.write(rec); continue; }
+  (c as any).styleTexts = ref.styleText;
+  let h2: { elements: number; tags: Counter } = { elements: 0, tags: new Map() };
+  try { h2 = refHtmlparser2(c.content); } catch { /* ignore */ }
+  rec.refMs = Math.round(ref.ms);
+  try {
+    const ax = axiomParse(c);
+    const a = ax.shape;
+    const styleAttrRef = ref.styleAttrs.reduce((acc, v) => acc + refDeclarationList(v), 0);
+    const styleAttrAx = ax.x.css.declarations.filter((d: any) => d.htmlAttributeLinkHash !== '').length;
+    const edgeDiff = diff(ref.edges, a.edges, 30);
+    const attrValueDiff = diff(ref.attrValues, a.attrValues, 400);
+    const urlDiff = diff(ref.urls, a.urls, 200);
+    Object.assign(rec, {
+      axMs: Math.round(a.ms),
+      elements: [ref.elements, a.elements, h2.elements],
+      tagDiff: diff(ref.tags, a.tags, 30), tagDiffH2: diff(h2.tags, a.tags, 30),
+      edgeDiffCount: Object.values(edgeDiff).filter((v) => v > 0).reduce((p, v) => p + v, 0), edgeDiff,
+      maxDepth: [ref.maxDepth, a.maxDepth],
+      attrs: [total(ref.attrs), total(a.attrs)], attrDiff: diff(ref.attrs, a.attrs, 20),
+      attrValueMissingCount: Object.values(attrValueDiff).filter((v) => v > 0).reduce((p, v) => p + v, 0),
+      attrValueMissing: Object.entries(attrValueDiff).filter(([, v]) => v > 0).slice(0, 8).map(([k]) => k.slice(0, 160)),
+      attrValueExtra: Object.entries(attrValueDiff).filter(([, v]) => v < 0).slice(0, 8).map(([k]) => k.slice(0, 160)),
+      classes: [total(ref.classes), total(a.classes)], classDiff: diff(ref.classes, a.classes, 10),
+      ids: [total(ref.ids), total(a.ids)], idDiff: diff(ref.ids, a.ids, 10),
+      urls: [total(ref.urls), total(a.urls)],
+      urlMissingCount: Object.values(urlDiff).filter((v) => v > 0).reduce((p, v) => p + v, 0),
+      urlMissing: Object.entries(urlDiff).filter(([, v]) => v > 0).slice(0, 8).map(([k]) => k.slice(0, 160)),
+      urlExtra: Object.entries(urlDiff).filter(([, v]) => v < 0).slice(0, 8).map(([k]) => k.slice(0, 160)),
+      urlishAttrs: toObj(ref.urlishAttrs),
+      scripts: [ref.scripts, a.scripts], inlineScripts: [ref.inlineScripts, a.inlineScripts], scriptText: [ref.scriptText, a.scriptText],
+      styles: [ref.styles, a.styles], styleAttrDecls: [styleAttrRef, styleAttrAx],
+      handlers: [ref.handlers, a.handlers], handlerCalls: ax.x.handlerCalls.length,
+      text: [ref.text, a.text], title: [ref.title, a.title], doctype: [ref.doctype, a.doctype],
+      refErrors: total(ref.errors), refErrorKinds: toObj(ref.errors), axGaps: total(ax.gaps), axGapKinds: toObj(ax.gaps), axGapSamples: ax.gapSamples,
+      dialects: ax.dialects, ...ax.cssInline,
+    });
+  } catch (e: any) {
+    rec.crash = String(e?.stack ?? e).slice(0, 500);
+  }
+  out.write(rec);
+}
+out.close();
+process.stderr.write(`${corpus}: done ${n}\n`);
diff --git a/parser/tools/web-corpus-bench/package.json b/parser/tools/web-corpus-bench/package.json
new file mode 100644
index 000000000..0523645f7
--- /dev/null
+++ b/parser/tools/web-corpus-bench/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "web-corpus-bench",
+  "private": true,
+  "description": "Stress-tests the HTML/CSS front end against parse5, htmlparser2, css-tree and postcss over large corpora.",
+  "dependencies": {
+    "@bramus/specificity": "^2.4.2",
+    "css-tree": "^3.1.0",
+    "htmlparser2": "^9.1.0",
+    "parse5": "^7.2.1",
+    "postcss": "^8.5.0",
+    "postcss-selector-parser": "^7.1.0"
+  }
+}
diff --git a/parser/tools/web-corpus-bench/report.ts b/parser/tools/web-corpus-bench/report.ts
new file mode 100644
index 000000000..c129ea4c9
--- /dev/null
+++ b/parser/tools/web-corpus-bench/report.ts
@@ -0,0 +1,222 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const R = path.resolve(__dirname, 'results');
+type Rec = Record<string, any>;
+const load = (prefix: string): Rec[] => fs.readdirSync(R).filter((f) => f.startsWith(prefix) && f.endsWith('.jsonl')).sort()
+  .flatMap((f) => fs.readFileSync(path.join(R, f), 'utf-8').split('\n').filter(Boolean).map((l) => JSON.parse(l) as Rec));
+
+type Agg = Map<string, { n: number; files: Set<string> }>;
+const agg = (): Agg => new Map();
+function add(a: Agg, key: string, n: number, file: string): void {
+  let e = a.get(key); if (e === undefined) { e = { n: 0, files: new Set() }; a.set(key, e); } e.n += n; if (e.files.size < 3) e.files.add(file);
+}
+function top(a: Agg, k = 25, sign: 1 | -1 = 1): string[] {
+  return [...a.entries()].filter(([, v]) => Math.sign(v.n) === sign).sort((x, y) => Math.abs(y[1].n) - Math.abs(x[1].n)).slice(0, k)
+    .map(([key, v]) => `| \`${key.replace(/\|/g, '\\|').slice(0, 90)}\` | ${Math.abs(v.n)} | ${[...v.files].join(', ').slice(0, 120)} |`);
+}
+const pct = (a: number, b: number): string => b === 0 ? 'n/a' : `${((100 * a) / b).toFixed(2)}%`;
+const sum = (rs: Rec[], f: (r: Rec) => number): number => rs.reduce((p, r) => p + (f(r) || 0), 0);
+const lines: string[] = [];
+const out = (s = ''): void => { lines.push(s); };
+const table = (rows: string[], header: string): void => { if (rows.length === 0) { out('_none_'); out(); return; } out(header); out('|---|---:|---|'); rows.forEach(out); out(); };
+
+// ───────────────────────────── HTML ─────────────────────────────
+const html = load('html-');
+out('# AxiomCode web front end vs reference parsers');
+out();
+out(`Generated ${new Date().toISOString().slice(0, 10)}. HTML reference: parse5 (WHATWG tree construction, written elements only) and htmlparser2; CSS reference: css-tree 3 + postcss 8 + @bramus/specificity.`);
+out();
+out('## HTML');
+out();
+out('| corpus | files | crashes | ref crashes | ax total ms | ref total ms | slowest file (ms) | elements ref / ax / htmlparser2 | files with element count = ref |');
+out('|---|---:|---:|---:|---:|---:|---|---|---:|');
+const byCorpus = new Map<string, Rec[]>();
+for (const r of html) { const l = byCorpus.get(r.corpus) ?? []; l.push(r); byCorpus.set(r.corpus, l); }
+for (const [c, rs] of byCorpus) {
+  const ok = rs.filter((r) => r.elements);
+  const slow = [...ok].sort((a, b) => b.axMs - a.axMs)[0];
+  out(`| ${c} | ${rs.length} | ${rs.filter((r) => r.crash).length} | ${rs.filter((r) => r.refCrash).length} | ${sum(ok, (r) => r.axMs)} | ${sum(ok, (r) => r.refMs)} | ${slow ? `${slow.id.slice(0, 40)} (${slow.axMs})` : ''} | ${sum(ok, (r) => r.elements[0])} / ${sum(ok, (r) => r.elements[1])} / ${sum(ok, (r) => r.elements[2])} | ${ok.filter((r) => r.elements[0] === r.elements[1]).length} |`);
+}
+out();
+const crashes = html.filter((r) => r.crash);
+if (crashes.length > 0) { out('### Crashes'); out(); for (const r of crashes.slice(0, 20)) out(`- \`${r.corpus}/${r.id}\`: ${r.crash.split('\n')[0]}`); out(); }
+const slow = html.filter((r) => r.axMs > 3000).sort((a, b) => b.axMs - a.axMs);
+if (slow.length > 0) { out('### Slow files (> 3 s in axiom)'); out(); for (const r of slow.slice(0, 15)) out(`- \`${r.corpus}/${r.id}\` ${r.bytes} bytes: axiom ${r.axMs} ms, parse5 ${r.refMs} ms`); out(); }
+
+const ok = html.filter((r) => r.elements);
+out('### Coverage totals (all corpora, non-crashing files)');
+out();
+out('| measure | reference | axiom | axiom / reference |');
+out('|---|---:|---:|---:|');
+const measures: Array<[string, (r: Rec) => number, (r: Rec) => number]> = [
+  ['written elements (parse5)', (r) => r.elements[0], (r) => r.elements[1]],
+  ['attributes', (r) => r.attrs[0], (r) => r.attrs[1]],
+  ['class tokens', (r) => r.classes[0], (r) => r.classes[1]],
+  ['ids', (r) => r.ids[0], (r) => r.ids[1]],
+  ['URL references', (r) => r.urls[0], (r) => r.urls[1]],
+  ['script elements', (r) => r.scripts[0], (r) => r.scripts[1]],
+  ['inline scripts', (r) => r.inlineScripts[0], (r) => r.inlineScripts[1]],
+  ['inline script text (chars)', (r) => r.scriptText[0], (r) => r.scriptText[1]],
+  ['style elements (css)', (r) => r.styles[0], (r) => r.styles[1]],
+  ['style attribute declarations', (r) => r.styleAttrDecls[0], (r) => r.styleAttrDecls[1]],
+  ['event-handler attributes (ax: attrs with a call or a gap)', (r) => r.handlers[0], (r) => r.handlers[1]],
+  ['text (non-ws chars)', (r) => r.text[0], (r) => r.text[1]],
+  ['<style> rules+at-rules', (r) => r.styleElements?.ref.rules ?? 0, (r) => r.styleElements?.ax.rules ?? 0],
+  ['<style> declarations', (r) => r.styleElements?.ref.decls ?? 0, (r) => r.styleElements?.ax.decls ?? 0],
+];
+for (const [name, a, b] of measures) { const ra = sum(ok, a); const rb = sum(ok, b); out(`| ${name} | ${ra} | ${rb} | ${pct(rb, ra)} |`); }
+out();
+out(`Files where axiom's element count differs from parse5's written-element count: ${ok.filter((r) => r.elements[0] !== r.elements[1]).length} / ${ok.length}. `
+  + `Files with at least one parent-child edge mismatch: ${ok.filter((r) => r.edgeDiffCount > 0).length}. `
+  + `Files where axiom's max depth exceeds parse5's by more than 2: ${ok.filter((r) => r.maxDepth[1] - r.maxDepth[0] > 2).length}.`);
+out();
+
+const tagMissing = agg(), tagExtra = agg(), tagH2 = agg(), edgeMissing = agg(), edgeExtra = agg(), attrDiff = agg(), attrValMissing = agg(), attrValExtra = agg(),
+  urlMissing = agg(), urlExtra = agg(), urlish = agg(), classDiff = agg(), idDiff = agg(), gapKinds = agg(), refErrKinds = agg(), dialects = agg(), titleBad = agg(), fpGaps = agg(), fnGaps = agg(), styleSamples = agg();
+for (const r of ok) {
+  const id = `${r.corpus}/${r.id}`;
+  for (const [k, v] of Object.entries<number>(r.tagDiff ?? {})) add(v > 0 ? tagMissing : tagExtra, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.tagDiffH2 ?? {})) add(tagH2, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.edgeDiff ?? {})) add(v > 0 ? edgeMissing : edgeExtra, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.attrDiff ?? {})) add(attrDiff, k, v, id);
+  for (const k of r.attrValueMissing ?? []) add(attrValMissing, k, 1, id);
+  for (const k of r.attrValueExtra ?? []) add(attrValExtra, k, 1, id);
+  for (const k of r.urlMissing ?? []) add(urlMissing, k, 1, id);
+  for (const k of r.urlExtra ?? []) add(urlExtra, k, 1, id);
+  for (const [k, v] of Object.entries<number>(r.urlishAttrs ?? {})) add(urlish, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.classDiff ?? {})) add(classDiff, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.idDiff ?? {})) add(idDiff, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.axGapKinds ?? {})) add(gapKinds, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.refErrorKinds ?? {})) add(refErrKinds, k, v, id);
+  for (const d of r.dialects ?? []) add(dialects, d, 1, id);
+  if (r.title[0] !== r.title[1]) add(titleBad, `${JSON.stringify(r.title[0]).slice(0, 50)} vs ${JSON.stringify(r.title[1]).slice(0, 50)}`, 1, id);
+  if (r.axGaps > 0 && r.refErrors === 0) for (const g of r.axGapSamples ?? []) add(fpGaps, g.replace(/L\d+: /, '').replace(/[0-9]+/g, '#').slice(0, 70), 1, id);
+  if (r.axGaps === 0 && r.refErrors > 0) for (const k of Object.keys(r.refErrorKinds ?? {})) add(fnGaps, k, 1, id);
+  for (const s of r.styleElements?.samples ?? []) add(styleSamples, s.slice(0, 140), 1, id);
+}
+out('### Tags parse5 has that axiom lacks (summed over files)'); out();
+table(top(tagMissing), '| tag | missing | examples |');
+out('### Tags axiom has that parse5 does not count as written'); out();
+table(top(tagExtra, 25, -1), '| tag | extra | examples |');
+out('### Tag count differences vs htmlparser2 (positive: htmlparser2 has more)'); out();
+table([...top(tagH2, 12), ...top(tagH2, 12, -1)], '| tag | delta | examples |');
+out('### Parent>child edges parse5 has that axiom lacks (nesting divergence)'); out();
+table(top(edgeMissing, 40), '| edge | missing | examples |');
+out('### Parent>child edges axiom has that parse5 lacks'); out();
+table(top(edgeExtra, 40, -1), '| edge | extra | examples |');
+out('### Attribute (tag@name) count differences (positive: parse5 has more)'); out();
+table([...top(attrDiff, 20), ...top(attrDiff, 20, -1)], '| tag@attr | delta | examples |');
+out(`### Attribute name=value pairs parse5 has that axiom lacks (${sum(ok, (r) => r.attrValueMissingCount)} total)`); out();
+table(top(attrValMissing, 40), '| name=value | files | examples |');
+out('### Attribute name=value pairs axiom has that parse5 lacks'); out();
+table(top(attrValExtra, 25), '| name=value | files | examples |');
+out(`### URLs parse5 sees in URL attributes that axiom has no reference row for (${sum(ok, (r) => r.urlMissingCount)} total)`); out();
+table(top(urlMissing, 30), '| url | files | examples |');
+out('### URL reference rows axiom has that the reference does not'); out();
+table(top(urlExtra, 20), '| url | files | examples |');
+out('### Attributes carrying URL-looking values that axiom never references (candidates for URL_ATTRIBUTES)'); out();
+table(top(urlish, 40), '| tag@attr | occurrences | examples |');
+out('### Class token differences'); out();
+table([...top(classDiff, 10), ...top(classDiff, 10, -1)], '| class | delta | examples |');
+out('### Id differences'); out();
+table([...top(idDiff, 10), ...top(idDiff, 10, -1)], '| id | delta | examples |');
+out('### Title mismatches'); out();
+table(top(titleBad, 20), '| parse5 vs axiom | files | examples |');
+out(`### Parse gaps. Files with axiom gaps: ${ok.filter((r) => r.axGaps > 0).length}; with parse5 errors: ${ok.filter((r) => r.refErrors > 0).length}; axiom gaps where parse5 is clean (false positives): ${ok.filter((r) => r.axGaps > 0 && r.refErrors === 0).length}; parse5 errors with no axiom gap: ${ok.filter((r) => r.axGaps === 0 && r.refErrors > 0).length}`); out();
+table(top(gapKinds, 20), '| axiom gap kind/head | count | examples |');
+out('#### Gap text where parse5 reports no error (digits replaced by #)'); out();
+table(top(fpGaps, 40), '| gap | files | examples |');
+out('#### parse5 error codes in files where axiom recorded no gap'); out();
+table(top(fnGaps, 30), '| parse5 code | files | examples |');
+out('#### parse5 error code histogram'); out();
+table(top(refErrKinds, 30), '| code | count | examples |');
+out('### Template dialects detected'); out();
+table(top(dialects, 20), '| dialect | files | examples |');
+out('### Inline <style> mismatches (samples)'); out();
+table(top(styleSamples, 25), '| sample | files | examples |');
+
+// ───────────────────────────── CSS ─────────────────────────────
+const css = load('css-');
+out('## CSS');
+out();
+out('| corpus | sheets | crashes | ax total ms | ref total ms | slowest (ms) | style rules ref/ax | at-rules ref/ax | declarations ref/ax | selectors ref/ax |');
+out('|---|---:|---:|---:|---:|---|---|---|---|---|');
+const cByCorpus = new Map<string, Rec[]>();
+for (const r of css) { const l = cByCorpus.get(r.corpus) ?? []; l.push(r); cByCorpus.set(r.corpus, l); }
+for (const [c, rs] of cByCorpus) {
+  const okc = rs.filter((r) => r.styleRules);
+  const sl = [...okc].sort((a, b) => b.axMs - a.axMs)[0];
+  out(`| ${c} | ${rs.length} | ${rs.filter((r) => r.crash).length} | ${sum(okc, (r) => r.axMs)} | ${sum(okc, (r) => r.refMs)} | ${sl ? `${sl.id.slice(0, 40)} (${sl.axMs})` : ''} | ${sum(okc, (r) => r.styleRules[0])}/${sum(okc, (r) => r.styleRules[1])} | ${sum(okc, (r) => r.atrules[0])}/${sum(okc, (r) => r.atrules[1])} | ${sum(okc, (r) => r.declarations[0])}/${sum(okc, (r) => r.declarations[1])} | ${sum(okc, (r) => r.selectors[0])}/${sum(okc, (r) => r.selectors[1])} |`);
+}
+out();
+const cc = css.filter((r) => r.crash);
+if (cc.length > 0) { out('### Crashes'); out(); for (const r of cc.slice(0, 20)) out(`- \`${r.corpus}/${r.id}\`: ${r.crash.split('\n')[0]}`); out(); }
+const okc = css.filter((r) => r.styleRules);
+out('### Coverage totals'); out();
+out('| measure | reference | axiom | axiom / reference |'); out('|---|---:|---:|---:|');
+const cm: Array<[string, (r: Rec) => number, (r: Rec) => number]> = [
+  ['style rules (incl. keyframe blocks)', (r) => r.styleRules[0], (r) => r.styleRules[1]],
+  ['nested style rules', (r) => r.nestedStyleRules[0], (r) => r.nestedStyleRules[1]],
+  ['at-rules', (r) => r.atrules[0], (r) => r.atrules[1]],
+  ['selectors', (r) => r.selectors[0], (r) => r.selectors[1]],
+  ['declarations', (r) => r.declarations[0], (r) => r.declarations[1]],
+  ['custom property declarations', (r) => r.customProps[0], (r) => r.customProps[1]],
+  ['var() references', (r) => r.vars[0], (r) => r.vars[1]],
+  ['url() references', (r) => r.urls[0], (r) => r.urls[1]],
+  ['@import targets', (r) => r.imports[0], (r) => r.imports[1]],
+  ['@keyframes names', (r) => r.keyframesNames[0], (r) => r.keyframesNames[1]],
+  ['@font-face families', (r) => r.fontFaces[0], (r) => r.fontFaces[1]],
+  ['@layer names', (r) => r.layers[0], (r) => r.layers[1]],
+  ['@container names', (r) => r.containers[0], (r) => r.containers[1]],
+  ['comments', (r) => r.comments[0], (r) => r.comments[1]],
+];
+for (const [name, a, b] of cm) { const ra = sum(okc, a); const rb = sum(okc, b); out(`| ${name} | ${ra} | ${rb} | ${pct(rb, ra)} |`); }
+out();
+out(`Selectors matched by text: ref ${sum(okc, (r) => r.selectors[0])}, missing in axiom ${sum(okc, (r) => r.selectorMissingCount)}, extra in axiom ${sum(okc, (r) => r.selectorExtraCount)}. `
+  + `Specificity checked ${sum(okc, (r) => r.specChecked)}, mismatched ${sum(okc, (r) => r.specMismatchCount)}. Selector-part kind counts checked ${sum(okc, (r) => r.partsChecked)}, mismatched ${sum(okc, (r) => r.partsBad)}. `
+  + `Declarations missing ${sum(okc, (r) => r.declMissingCount)}, extra ${sum(okc, (r) => r.declExtraCount)}.`);
+out();
+const selMiss = agg(), selExtra = agg(), specBad = agg(), partsBad = agg(), declMiss = agg(), declExtra = agg(), atDiff = agg(), varD = agg(), urlD = agg(), impD = agg(), kfD = agg(), ffD = agg(), cgap = agg(), cfp = agg(), cfn = agg(), pre = agg(), refErr = agg();
+for (const r of okc) {
+  const id = `${r.corpus}/${r.id}`;
+  for (const k of r.selectorMissing ?? []) add(selMiss, k, 1, id);
+  for (const k of r.selectorExtra ?? []) add(selExtra, k, 1, id);
+  for (const k of r.specMismatch ?? []) add(specBad, k, 1, id);
+  for (const k of r.partsMismatch ?? []) add(partsBad, k, 1, id);
+  for (const k of r.declMissing ?? []) add(declMiss, k, 1, id);
+  for (const k of r.declExtra ?? []) add(declExtra, k, 1, id);
+  for (const [k, v] of Object.entries<number>(r.atruleDiff ?? {})) add(atDiff, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.varDiff ?? {})) add(varD, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.urlDiff ?? {})) add(urlD, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.importDiff ?? {})) add(impD, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.keyframesDiff ?? {})) add(kfD, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.fontFaceDiff ?? {})) add(ffD, k, v, id);
+  for (const [k, v] of Object.entries<number>(r.axGapKinds ?? {})) add(cgap, k, v, id);
+  if (r.axGaps > 0 && r.refErrors === 0 && !r.postcssError) for (const g of r.axGapSamples ?? []) add(cfp, g.replace(/L\d+: /, '').replace(/[0-9]+/g, '#').slice(0, 80), 1, id);
+  if (r.axGaps === 0 && (r.refErrors > 0 || r.postcssError)) for (const e of [...(r.refErrorSamples ?? []), r.postcssError].filter(Boolean)) add(cfn, String(e).slice(0, 80), 1, id);
+  if (r.preprocessor) add(pre, 'preprocessor flagged', 1, id);
+  for (const e of r.refErrorSamples ?? []) add(refErr, String(e).replace(/[0-9]+/g, '#').slice(0, 80), 1, id);
+}
+out('### Selectors in css-tree that axiom has no selector row for (normalised text)'); out(); table(top(selMiss, 40), '| selector | files | examples |');
+out('### Selector rows in axiom with no css-tree counterpart'); out(); table(top(selExtra, 40), '| selector | files | examples |');
+out('### Specificity mismatches (ref=@bramus/specificity)'); out(); table(top(specBad, 40), '| selector | files | examples |');
+out('### Selector-part kind count mismatches (delta = ref - axiom per kind)'); out(); table(top(partsBad, 40), '| selector and delta | files | examples |');
+out('### At-rule count differences (positive: css-tree has more)'); out(); table([...top(atDiff, 20), ...top(atDiff, 20, -1)], '| at-rule | delta | examples |');
+out(`### Declarations css-tree has that axiom lacks (prop|value|important)`); out(); table(top(declMiss, 50), '| declaration | files | examples |');
+out('### Declarations axiom has that css-tree lacks'); out(); table(top(declExtra, 40), '| declaration | files | examples |');
+out('### var() / url() / @import / @keyframes / @font-face differences (positive: reference has more)'); out();
+table([...top(varD, 10), ...top(varD, 10, -1)], '| var | delta | examples |');
+table([...top(urlD, 15), ...top(urlD, 15, -1)], '| url | delta | examples |');
+table([...top(impD, 10), ...top(impD, 10, -1)], '| import | delta | examples |');
+table([...top(kfD, 10), ...top(kfD, 10, -1)], '| keyframes | delta | examples |');
+table([...top(ffD, 10), ...top(ffD, 10, -1)], '| font-face family | delta | examples |');
+out(`### Parse gaps. Sheets with axiom gaps: ${okc.filter((r) => r.axGaps > 0).length}; with css-tree errors: ${okc.filter((r) => r.refErrors > 0).length}; postcss throws: ${okc.filter((r) => r.postcssError).length}; axiom gaps where css-tree and postcss are clean (false positives): ${okc.filter((r) => r.axGaps > 0 && r.refErrors === 0 && !r.postcssError).length}; reference errors with no axiom gap: ${okc.filter((r) => r.axGaps === 0 && (r.refErrors > 0 || r.postcssError)).length}; preprocessor-flagged: ${okc.filter((r) => r.preprocessor).length}`); out();
+table(top(cgap, 10), '| gap kind | count | examples |');
+out('#### Gap text where css-tree and postcss are clean (digits replaced by #)'); out(); table(top(cfp, 60), '| gap | files | examples |');
+out('#### Reference errors where axiom recorded no gap'); out(); table(top(cfn, 30), '| error | files | examples |');
+out('#### css-tree error histogram'); out(); table(top(refErr, 30), '| error | files | examples |');
+table(top(pre, 5), '| preprocessor | files | examples |');
+
+fs.writeFileSync(path.join(R, 'report.md'), lines.join('\n'));
+console.log(`wrote ${path.join(R, 'report.md')} (${lines.length} lines)`);
diff --git a/parser/tools/web-corpus-bench/run.sh b/parser/tools/web-corpus-bench/run.sh
new file mode 100755
index 000000000..0db1503c1
--- /dev/null
+++ b/parser/tools/web-corpus-bench/run.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+# Runs every corpus through both comparisons and writes results/report.md.
+set -e
+cd "$(dirname "$0")"; B=$PWD; C=$B/corpus; R=$B/results; mkdir -p "$R"
+cd ..; cd ..   # parser/: tsx needs the parser tsconfig for the @/ aliases
+run() { npx tsx --tsconfig tsconfig.json "$@"; }
+H=$B/html-compare.ts; X=$B/css-compare.ts
+run $H --corpus html5lib --mode dat --root $C/parse5/test/data/html5lib-tests/tree-construction &
+run $H --corpus wpt --root $C/wpt & run $H --corpus angular --root $C/components & run $H --corpus django --root $C/django &
+run $H --corpus dom-examples --root $C/dom-examples & run $H --corpus live --root $C/live/html &
+run $H --corpus parse5-huge --root $C/parse5/test/data/huge-page & run $H --corpus parse5-loc --root $C/parse5/test/data/location-info &
+run $H --corpus bootstrap --root $C/bootstrap & run $H --corpus petclinic --root $C/spring-petclinic & run $H --corpus h5bp --root $C/html5-boilerplate &
+run $X --corpus csstree --mode csstree --root $C/csstree & run $X --corpus postcss-cases --root $C/postcss-parser-tests/cases &
+run $X --corpus live --root $C/live/css & run $X --corpus bootstrap --root $C/bootstrap & run $X --corpus angular --root $C/components &
+run $X --corpus django --root $C/django & run $X --corpus dom-examples --root $C/dom-examples & run $X --corpus wpt --root $C/wpt &
+wait
+run $B/report.ts