diff --git a/.changeset/plain-peas-cough.md b/.changeset/plain-peas-cough.md
new file mode 100644
index 00000000..907cb150
--- /dev/null
+++ b/.changeset/plain-peas-cough.md
@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_code': minor
+---
+
+refactor: make `sh` the primary shell lang, with `bash` and `shell` as aliases
diff --git a/CLAUDE.md b/CLAUDE.md
index a07283c3..5105a2bb 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -3,10 +3,9 @@
 > Syntax highlighting - hand-written single-pass lexers
 
 fuz_code (`@fuzdev/fuz_code`) is a runtime syntax highlighting library optimized
-for HTML generation with CSS classes. It originated as a PrismJS fork and keeps
-its `.token_*` class vocabulary, but the tokenizer is a full rewrite — one
-hand-written single-pass lexer per language emitting a flat token event stream,
-with zero regular expressions.
+for HTML generation with CSS classes. It originated as a PrismJS fork, but the
+tokenizer is a full rewrite — one hand-written single-pass lexer per language
+emitting a flat token event stream, without regular expressions.
 
 For coding conventions, see Skill(fuz-stack).
 
@@ -73,7 +72,9 @@ src/
 │   ├── lexer_*.ts              # hand-written lexers (json, ts, css, bash, markup, svelte, md)
 │   ├── Code.svelte             # main Svelte component
 │   ├── CodeHighlight.svelte    # experimental CSS Highlight API
+│   ├── CodeTextarea.svelte     # experimental live-highlighted textarea
 │   ├── highlight_manager.ts    # CSS Highlight API manager
+│   ├── range_highlighting.svelte.ts # shared range-highlighting helper
 │   ├── highlight_priorities.ts # generated token priorities
 │   ├── theme.css               # token CSS classes
 │   ├── theme_variables.css     # CSS variable fallbacks
@@ -89,9 +90,9 @@ src/
 │       ├── check.test.ts       # fixture validation
 │       └── update.task.ts      # fixture regeneration task
 └── routes/                     # demo/docs site
-    ├── samples/                # language samples showcase
+    ├── samples/                # shared sample data (all.gen.ts)
     ├── benchmark/              # interactive benchmark UI
-    └── docs/                   # API documentation
+    └── docs/                   # tomes: usage, samples, textarea, benchmark, api
 ```
 
 ### Core system
@@ -125,8 +126,9 @@ One `SyntaxLang` lexer per language, registered via `add_lang`:
 - `lexer_ts.ts` - TypeScript; also registers the `js`/`javascript` aliases
   (TS is a syntactic superset — there is no separate JS lexer)
 - `lexer_css.ts` - CSS (including native nesting)
-- `lexer_bash.ts` - Bash; also registers the `sh`/`shell` aliases (POSIX sh
-  is a syntactic subset for highlighting — bash-family only, no fish etc.)
+- `lexer_bash.ts` - the bash-family shell lexer, registered as `sh` with
+  `bash`/`shell` as aliases (POSIX sh is a syntactic subset for highlighting —
+  bash-family only, no fish etc.)
 - `lexer_markup.ts` - HTML (`markup`/`html`/`mathml`/`svg`: rawtext
   script/style/textarea/title, `style=`/`on*=` attribute embedding) and XML
   (`xml`/`ssml`/`atom`/`rss`: plain tag scanning), one shared scanner
@@ -162,15 +164,17 @@ can't overflow the call stack; past the cap a region stays plain text.
 
 **Code.svelte props:**
 
-- `content` (required) - source code to highlight
-- `lang` - language identifier (default: 'svelte')
+- `content` - source code to highlight (or pass `dangerous_raw_html` from the
+  preprocessor instead)
+- `lang` - language identifier (default: 'svelte'; `null` disables highlighting)
 - `inline` - boolean for inline vs block
 - `wrap` - boolean for text wrapping
 - `nomargin` - boolean for margin control
+- `syntax_styler` - custom `SyntaxStyler` (default: `syntax_styler_global`)
 
 ## Supported languages
 
-`ts`, `js`, `css`, `html`, `json`, `svelte`, `md`, `bash`
+`ts`, `js`, `css`, `html`, `json`, `svelte`, `md`, `sh`
 
 ## Testing
 
@@ -214,8 +218,8 @@ engines).
 ### Updating committed result snapshots
 
 `benchmark/compare/results.md` is linked from `README.md` as evidence for
-the "vastly faster than Shiki" claim — it's load-bearing for the public
-narrative, not just incidental output. `benchmark/results.md` is referenced
+the "about two orders of magnitude faster" claim vs Shiki — it's load-bearing
+for the public narrative, not just incidental output. `benchmark/results.md` is referenced
 locally as a perf baseline. `benchmark/baseline.json` is the machine-readable
 counterpart used by `benchmark_baseline_compare` for regression detection.
 It's **gitignored** (per the fuz_util/fuz_ui convention) — perf numbers
@@ -223,15 +227,6 @@ vary across machines, so the baseline is a per-developer local tracker,
 re-seeded on each machine that runs benchmarks. PR review still relies on
 the committed `results.md`.
 
-Workflow:
-
-```bash
-npm run benchmark             # check current perf against your local baseline
-npm run benchmark:save        # accept the change: rewrites results.md + baseline.json
-npm run benchmark:clean       # nuke the local baseline (re-seed on next --save)
-npm run benchmark:vs:write    # full overwrite of benchmark/compare/results.md
-```
-
 `--save` is a single switch by design — accepting a perf change should
 update both the doc artifact and the local regression baseline atomically,
 so they can't drift apart.
@@ -269,6 +264,7 @@ If the baseline schema version in `@fuzdev/fuz_util` advances, a stale
 highlighting. Limited browser support - use `Code.svelte` for production.
 
 - `mode` prop: 'auto', 'ranges', or 'html'
+- `CodeTextarea.svelte` - editable `<textarea>` with live range highlighting
 - `HighlightManager` class manages highlights per element
 - `theme_highlight.css` provides both `.token_*` classes and `::highlight()`
   pseudo-elements
@@ -335,8 +331,8 @@ New languages are written as lexers:
 
 ## Demo pages
 
-- `/samples` - code samples in all supported languages
-- `/benchmark` - interactive performance testing
+- `/docs` - tomes: usage, samples, textarea, benchmark, api
+- `/benchmark` - interactive browser benchmark (work vs paint timing)
 
 ## Project standards
 
diff --git a/README.md b/README.md
index a00dbb8d..d1f6f00f 100644
--- a/README.md
+++ b/README.md
@@ -8,35 +8,35 @@
 
 `fuz_code` is a runtime syntax highlighter: it turns source code into HTML with
 `.token_*` CSS classes, and knows nothing about the DOM. It originated as a fork
-of [Prism](https://github.com/PrismJS/prism) ([prismjs.com](https://prismjs.com/))
-and keeps its `.token_*` class vocabulary, but the tokenizer is now a full
-rewrite — one hand-written single-pass lexer per language emitting a flat token
-event stream, with zero regular expressions.
+of [Prism](https://github.com/PrismJS/prism) ([prismjs.com](https://prismjs.com/)),
+but the tokenizer is now a full rewrite — one hand-written single-pass lexer per
+language emitting a flat token event stream, without regular expressions.
 
 Highlights:
 
 - a minimal, explicit API to generate stylized HTML — `stylize(code, lang)`
 - stateless ES modules, instead of globals with side effects
-- written in TypeScript, with zero runtime dependencies
+- written in TypeScript, with no runtime dependencies
 - eight built-in languages (see below), extensible by writing a lexer
 
 Two optional integrations:
 
-- optional builtin [Svelte](https://svelte.dev/) support with a
+- builtin [Svelte](https://svelte.dev/) support with a
   [Svelte lexer](src/lib/lexer_svelte.ts) and a
-  [Svelte component](src/lib/Code.svelte) for convenient usage.
-- The [default theme](src/lib/theme.css) integrates
-  with my CSS library [fuz_css](https://github.com/fuzdev/fuz_css) for colors that adapt to the user's runtime `color-scheme` preference.
-  Non-fuz_css users should import [theme_variables.css](src/lib/theme_variables.css)
-  or otherwise define those variables.
-
-Compared to [Shiki](https://github.com/shikijs/shiki), fuz_code is much lighter
-and [vastly faster](./benchmark/compare/results.md) for runtime usage: it runs
-hand-written single-pass lexers rather than the
+  [Svelte component](src/lib/Code.svelte)
+- the [default theme](src/lib/theme.css) integrates with
+  [fuz_css](https://github.com/fuzdev/fuz_css) for colors that adapt to the
+  user's runtime `color-scheme` preference — without fuz_css, import
+  [theme_variables.css](src/lib/theme_variables.css) or otherwise define those
+  variables
+
+Compared to [Shiki](https://github.com/shikijs/shiki), fuz_code is smaller and
+[about two orders of magnitude faster](./benchmark/compare/results.md) for
+runtime usage: it runs hand-written single-pass lexers rather than the
 [Oniguruma regexp engine](https://shiki.matsu.io/guide/regex-engines) that
-TextMate grammars require, and has zero runtime dependencies instead of 38. Shiki
+TextMate grammars require, and has no runtime dependencies instead of 38. Shiki
 targets build-time use and supports far more languages and themes — pick the
-tool that fits; fuz_code is optimized for small, fast, runtime highlighting.
+tool that fits; fuz_code is optimized for small, fast runtime highlighting.
 
 ## Usage
 
@@ -74,8 +74,8 @@ With SvelteKit:
 import '@fuzdev/fuz_code/theme.css';
 ```
 
-The primary themes (currently just [one](src/lib/theme.css)) have a dependency
-on my CSS library [fuz_css](https://github.com/fuzdev/fuz_css)
+The primary themes (currently just [one](src/lib/theme.css)) depend on
+[fuz_css](https://github.com/fuzdev/fuz_css)
 for [color-scheme](https://css.fuz.dev/docs/themes) awareness.
 See the [fuz_css docs](https://css.fuz.dev/) for its usage.
 
@@ -98,7 +98,7 @@ import '@fuzdev/fuz_code/theme_variables.css';
 - [@fuzdev/fuz_code/Code.svelte](src/lib/Code.svelte) -
   Svelte component for syntax highlighting with HTML generation
 
-I encourage you to poke around [`src/lib`](src/lib) if you're interested in using fuz_code.
+See [`src/lib`](src/lib) for the full set of modules.
 
 ### Languages
 
@@ -111,7 +111,7 @@ Registered by default in `syntax_styler_global` — one hand-written lexer each:
 - [`ts`](src/lib/lexer_ts.ts) (TypeScript — also serves `js`/`javascript`, a syntactic subset)
 - [`css`](src/lib/lexer_css.ts)
 - [`json`](src/lib/lexer_json.ts) (with comments — jsonc)
-- [`bash`](src/lib/lexer_bash.ts) (`sh`/`shell`)
+- [`sh`](src/lib/lexer_bash.ts) (POSIX/bash family — also serves `bash`/`shell`)
 
 Add a language by writing a `SyntaxLang` lexer and registering it with
 `add_lang` — see the existing `lexer_*.ts` modules.
@@ -123,11 +123,11 @@ Docs are a work in progress:
 - this readme has basic usage instructions
 - [CLAUDE.md](./CLAUDE.md) has more high-level docs including benchmarks
 - [code.fuz.dev](https://code.fuz.dev/) has usage examples with the Svelte component
-- [samples](https://code.fuz.dev/samples) on the website
+- [samples](https://code.fuz.dev/docs/samples) on the website
   (also see the [sample files](src/test/fixtures/samples/))
 - [tests](src/test/)
 
-Please open issues if you need any help.
+Issues and questions are welcome.
 
 ## Experimental highlight support
 
@@ -136,11 +136,10 @@ For browsers that support the
 fuz_code provides an experimental component that can use native browser highlighting
 as an alternative to HTML generation.
 
-This feature is experimental, browser support is limited,
-and there can be subtle differences because some CSS like bold/italics are not supported.
-(nor are font sizes and other layout-affecting styles, in case your theme uses those)
-The standard `Code.svelte` component
-using HTML generation is recommended for most use cases.
+Browser support is limited, and the API can't apply layout-affecting styles —
+bold, italics, font sizes — so themes that use them render differently.
+The standard [Code.svelte](src/lib/Code.svelte) component using HTML generation
+is recommended for most use cases.
 
 ```svelte
 <script lang="ts">
@@ -179,7 +178,6 @@ originally forked from [Prism](https://github.com/PrismJS/prism)
 with the Svelte support originally based on
 [`prism-svelte`](https://github.com/pngwn/prism-svelte) by
 [@pngwn](https://github.com/pngwn). The tokenizer has since been rewritten as
-hand-written lexers, but the `.token_*` class vocabulary and the fork's lineage
-remain.
+hand-written lexers, but the fork's lineage remains.
 
 [MIT](LICENSE)
diff --git a/benchmark/compare/compare.ts b/benchmark/compare/compare.ts
index a3bdd4c5..1882d695 100644
--- a/benchmark/compare/compare.ts
+++ b/benchmark/compare/compare.ts
@@ -112,7 +112,12 @@ export const run_comparison_benchmark = async (
 			const content = getSampleContent(lang, large);
 			const size_label = large ? 'large' : 'small';
 
-			// Tokenization benchmarks (fuz_code and Prism only)
+			// Tokenization benchmarks — raw tokenizer, no HTML rendering, so the
+			// output-shape difference (CSS classes vs Shiki's inlined theme colors)
+			// drops out and this is the cleanest apples-to-apples view. Shiki's
+			// `codeToTokensBase` is its lowest-level public tokenizer (single theme);
+			// it resolves per-token colors but the grammar walk dominates, so it's a
+			// fair analog to fuz_code's `lex` and Prism's `tokenize`.
 			bench.add(`fuz_code_tokenize_${lang}_${size_label}`, () => {
 				syntax_styler_global.lex(content, fuz_lang);
 			});
@@ -123,6 +128,14 @@ export const run_comparison_benchmark = async (
 				});
 			}
 
+			bench.add(`shiki_js_tokenize_${lang}_${size_label}`, () => {
+				shiki_js.codeToTokensBase(content, {lang: shiki_lang, theme: 'nord'});
+			});
+
+			bench.add(`shiki_oniguruma_tokenize_${lang}_${size_label}`, () => {
+				shiki_oniguruma.codeToTokensBase(content, {lang: shiki_lang, theme: 'nord'});
+			});
+
 			// Stylization benchmarks (all implementations)
 			bench.add(`fuz_code_stylize_${lang}_${size_label}`, () => {
 				syntax_styler_global.stylize(content, fuz_lang);
@@ -159,10 +172,11 @@ export const run_comparison_benchmark = async (
  * column headers like `vs fuz_code_stylize_ts_large`).
  *
  * Each filter narrows by name suffix (`_${lang}_${size}$`) plus an operation
- * substring so e.g. the "ts tokenize small" group catches only
- * `fuz_code_tokenize_ts_small` and `prism_tokenize_ts_small`, not the stylize
- * variants. The trailing `$` matters — without it, "ts_small" would also match
- * "ts_small_*" if such a name ever existed.
+ * substring so e.g. the "ts tokenize small" group catches
+ * `fuz_code_tokenize_ts_small`, `prism_tokenize_ts_small`, and the two
+ * `shiki_*_tokenize_ts_small` variants, not the stylize ones. The trailing `$`
+ * matters — without it, "ts_small" would also match "ts_small_*" if such a name
+ * ever existed.
  */
 const build_groups = (languages: ReadonlyArray<SupportedLanguage>): Array<BenchmarkGroup> => {
 	const groups: Array<BenchmarkGroup> = [];
@@ -192,6 +206,14 @@ export const format_comparison_results = (results: Array<BenchmarkResult>): stri
 		'',
 		'Comparing fuz_code vs Prism vs Shiki across multiple languages and content sizes.',
 		'',
+		'`tokenize` rows compare raw tokenizers with no HTML rendering — the',
+		'shape-neutral, apples-to-apples view. `stylize` rows compare the HTML each',
+		'library actually ships: fuz_code and Prism emit CSS-class spans',
+		'(`<span class="token_x">`) styled by a static stylesheet, while Shiki has no',
+		'native class output and inlines resolved theme colors on every span plus a',
+		'`<pre>` wrapper — so its `stylize` cost includes per-token color work the',
+		'class-based libraries offload to CSS.',
+		'',
 		'## Results',
 		'',
 		benchmark_format_markdown_grouped(results, groups),
diff --git a/benchmark/compare/results.md b/benchmark/compare/results.md
index fb5d0744..baa23ee6 100644
--- a/benchmark/compare/results.md
+++ b/benchmark/compare/results.md
@@ -2,145 +2,192 @@
 
 Comparing fuz_code vs Prism vs Shiki across multiple languages and content sizes.
 
+`tokenize` rows compare raw tokenizers with no HTML rendering — the
+shape-neutral, apples-to-apples view. `stylize` rows compare the HTML each
+library actually ships: fuz_code and Prism emit CSS-class spans
+(`<span class="token_x">`) styled by a static stylesheet, while Shiki has no
+native class output and inlines resolved theme colors on every span plus a
+`<pre>` wrapper — so its `stylize` cost includes per-token color work the
+class-based libraries offload to CSS.
+
 ## Results
 
 ### ts tokenize (small)
 
-| Task Name                  | ops/sec  | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
-| -------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_ts_small | 1,800.91 |   422.27 |   785.68 |   808.71 |   824.34 |   856.34 |   379.51 |   880.66 |    1.60x |
-| prism_tokenize_ts_small    | 2,876.79 |   346.81 |   350.92 |   357.42 |   362.12 |   370.37 |   336.36 |   374.03 | baseline |
+| Task Name                         | ops/sec   | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| --------------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_ts_small        | 32,466.07 |     0.03 |     0.03 |     0.03 |     0.04 |     0.05 |     0.03 |     3.86 | baseline |
+| prism_tokenize_ts_small           |  2,921.07 |     0.34 |     0.35 |     0.36 |     0.38 |     0.51 |     0.33 |     2.09 |   11.11x |
+| shiki_js_tokenize_ts_small        |    123.47 |     8.06 |     8.27 |     8.70 |     9.01 |    10.25 |     7.67 |    12.25 |  262.94x |
+| shiki_oniguruma_tokenize_ts_small |    168.09 |     5.92 |     6.18 |     6.67 |     7.32 |     8.57 |     5.55 |    13.10 |  193.14x |
+
 ### ts tokenize (large)
 
-| Task Name                  | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| -------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_ts_large |   11.39 |    87.15 |    88.17 |    89.02 |    93.38 |    93.66 |    86.07 |    93.78 |    1.76x |
-| prism_tokenize_ts_large    |   20.00 |    49.87 |    50.82 |    51.72 |    52.29 |    53.56 |    48.14 |    54.53 | baseline |
+| Task Name                         | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| --------------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_ts_large        |  290.93 |     3.44 |     3.49 |     3.66 |     3.79 |     4.83 |     3.26 |     7.03 | baseline |
+| prism_tokenize_ts_large           |   19.70 |    50.75 |    52.40 |    58.21 |    59.73 |    60.64 |    48.51 |    62.28 |   14.77x |
+| shiki_js_tokenize_ts_large        |    0.94 |  1059.10 |  1063.36 |  1065.29 |  1065.78 |  1066.18 |  1051.07 |  1066.27 |  307.95x |
+| shiki_oniguruma_tokenize_ts_large |    1.69 |   592.71 |   594.61 |   601.29 |   603.11 |   604.31 |   582.09 |   604.61 |  172.62x |
+
 ### ts stylize (small)
 
-| Task Name                        | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| -------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_ts_small        | 1,760.58 |     0.57 |     0.57 |     0.58 |     0.59 |     0.61 |     0.55 |     0.61 | baseline |
-| prism_stylize_ts_small           | 1,757.10 |     0.57 |     0.58 |     0.59 |     0.60 |     0.61 |     0.55 |     0.62 |    1.00x |
-| shiki_js_stylize_ts_small        |   106.61 |     9.35 |     9.50 |     9.65 |     9.74 |     9.90 |     9.02 |    10.15 |   16.51x |
-| shiki_oniguruma_stylize_ts_small |   139.30 |     7.10 |     7.33 |     7.53 |     7.74 |     8.04 |     6.83 |     8.14 |   12.64x |
+| Task Name                        | ops/sec   | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| -------------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_stylize_ts_small        | 19,441.89 |     0.05 |     0.05 |     0.05 |     0.06 |     0.09 |     0.05 |     0.54 | baseline |
+| prism_stylize_ts_small           |  1,762.95 |     0.57 |     0.58 |     0.60 |     0.63 |     0.91 |     0.54 |     1.44 |   11.03x |
+| shiki_js_stylize_ts_small        |     75.83 |    13.20 |    13.57 |    14.71 |    15.43 |    16.05 |    12.09 |    17.68 |  256.40x |
+| shiki_oniguruma_stylize_ts_small |    122.00 |     8.17 |     8.59 |     9.26 |    10.57 |    11.86 |     7.37 |    14.75 |  159.36x |
+
 ### ts stylize (large)
 
 | Task Name                        | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
 | -------------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_ts_large        |    7.39 |   122.29 |   153.39 |   155.09 |   156.25 |   159.12 |   112.96 |   159.32 |    1.39x |
-| prism_stylize_ts_large           |   10.30 |   101.82 |   107.15 |   113.31 |   120.89 |   122.71 |    81.86 |   123.42 | baseline |
-| shiki_js_stylize_ts_large        |    0.77 |  1295.46 |  1310.87 |  1311.54 |  1311.59 |  1311.64 |  1278.61 |  1311.65 |   13.37x |
-| shiki_oniguruma_stylize_ts_large |    1.29 |   775.47 |   786.70 |   789.07 |   792.63 |   796.28 |   751.15 |   797.20 |    7.96x |
+| fuz_code_stylize_ts_large        |  174.63 |     5.70 |     5.85 |     6.08 |     6.60 |     9.88 |     5.45 |    10.83 | baseline |
+| prism_stylize_ts_large           |    9.42 |   112.30 |   119.85 |   124.74 |   126.66 |   136.80 |    83.51 |   141.61 |   18.54x |
+| shiki_js_stylize_ts_large        |    0.81 |  1225.51 |  1238.92 |  1242.92 |  1244.87 |  1246.44 |  1214.31 |  1246.83 |  214.61x |
+| shiki_oniguruma_stylize_ts_large |    1.25 |   798.18 |   818.45 |   855.70 |   879.02 |   897.62 |   741.31 |   902.27 |  139.34x |
+
 ### css tokenize (small)
 
-| Task Name                   | ops/sec   | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
-| --------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_css_small | 57,067.36 |    17.49 |    17.76 |    18.25 |    18.63 |    19.13 |    16.39 |    19.45 | baseline |
-| prism_tokenize_css_small    | 54,564.70 |    18.27 |    18.59 |    19.09 |    19.47 |    20.01 |    17.18 |    20.34 |    1.05x |
+| Task Name                          | ops/sec    | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
+| ---------------------------------- | ---------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_css_small        | 306,302.85 |     3.28 |     3.56 |     5.13 |     6.14 |     9.53 |     2.98 |  4396.76 | baseline |
+| prism_tokenize_css_small           |  51,543.28 |    19.36 |    20.09 |    23.82 |    30.90 |    41.81 |    18.32 |   562.69 |    5.94x |
+| shiki_js_tokenize_css_small        |   3,856.66 |   257.84 |   272.54 |   305.12 |   369.73 |   551.93 |   227.98 |  5243.98 |   79.42x |
+| shiki_oniguruma_tokenize_css_small |   1,297.18 |   768.32 |   810.38 |   926.11 |  1063.95 |  1469.76 |   696.57 |  4792.35 |  236.13x |
+
 ### css tokenize (large)
 
-| Task Name                   | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| --------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_css_large |  577.24 |     1.71 |     1.78 |     1.88 |     1.94 |     2.00 |     1.60 |     2.02 | baseline |
-| prism_tokenize_css_large    |  570.23 |     1.73 |     1.79 |     1.87 |     1.92 |     1.98 |     1.63 |     2.00 |    1.01x |
+| Task Name                          | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ---------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_css_large        | 3,248.46 |     0.31 |     0.31 |     0.32 |     0.34 |     0.54 |     0.29 |     3.28 | baseline |
+| prism_tokenize_css_large           |   525.80 |     1.89 |     1.99 |     2.22 |     2.82 |     3.50 |     1.72 |     5.61 |    6.18x |
+| shiki_js_tokenize_css_large        |    37.98 |    26.30 |    27.22 |    28.38 |    29.54 |    32.18 |    23.65 |    36.55 |   85.53x |
+| shiki_oniguruma_tokenize_css_large |    12.80 |    77.77 |    79.26 |    81.36 |    81.83 |    85.84 |    75.05 |    89.18 |  253.77x |
+
 ### css stylize (small)
 
-| Task Name                         | ops/sec   | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
-| --------------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_css_small        | 25,753.39 |    38.77 |    39.40 |    40.13 |    40.55 |    42.00 |    36.22 |    42.78 | baseline |
-| prism_stylize_css_small           | 21,603.52 |    46.18 |    47.04 |    47.76 |    48.43 |    50.15 |    43.27 |    50.80 |    1.19x |
-| shiki_js_stylize_css_small        |  1,967.37 |   502.83 |   520.16 |   545.22 |   561.10 |   584.30 |   462.31 |   593.79 |   13.09x |
-| shiki_oniguruma_stylize_css_small |    904.88 |  1108.22 |  1153.73 |  1204.62 |  1255.66 |  1353.74 |   963.55 |  1426.17 |   28.46x |
+| Task Name                         | ops/sec    | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
+| --------------------------------- | ---------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_stylize_css_small        | 163,634.94 |     6.09 |     6.36 |     7.15 |     9.07 |    14.05 |     5.45 |   400.93 | baseline |
+| prism_stylize_css_small           |  21,083.33 |    47.51 |    48.40 |    50.92 |    61.85 |    91.72 |    43.35 |  3252.97 |    7.76x |
+| shiki_js_stylize_css_small        |   1,891.12 |   526.62 |   562.66 |   661.94 |   753.08 |  3497.01 |   465.60 |  7216.99 |   86.53x |
+| shiki_oniguruma_stylize_css_small |     996.59 |  1003.30 |  1038.25 |  1135.82 |  1401.73 |  4107.00 |   925.07 |  7005.72 |  164.19x |
+
 ### css stylize (large)
 
-| Task Name                         | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| --------------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_css_large        |  254.05 |     3.89 |     3.98 |     4.18 |     4.26 |     4.32 |     3.73 |     4.35 | baseline |
-| prism_stylize_css_large           |  215.62 |     4.60 |     4.68 |     4.85 |     4.93 |     5.01 |     4.44 |     5.03 |    1.18x |
-| shiki_js_stylize_css_large        |   19.07 |    52.26 |    52.86 |    53.74 |    55.09 |    55.59 |    50.63 |    55.93 |   13.32x |
-| shiki_oniguruma_stylize_css_large |    8.70 |   114.91 |   115.63 |   116.48 |   116.78 |   117.41 |   111.79 |   118.20 |   29.21x |
+| Task Name                         | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| --------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_stylize_css_large        | 1,563.61 |     0.64 |     0.65 |     0.66 |     0.69 |     1.25 |     0.60 |     1.86 | baseline |
+| prism_stylize_css_large           |   190.23 |     5.20 |     5.57 |     6.03 |     7.83 |     9.64 |     4.60 |    11.92 |    8.22x |
+| shiki_js_stylize_css_large        |    17.08 |    58.54 |    60.59 |    63.74 |    67.18 |    69.51 |    51.75 |    73.02 |   91.54x |
+| shiki_oniguruma_stylize_css_large |     9.20 |   108.30 |   110.64 |   114.65 |   116.91 |   119.58 |   101.16 |   120.22 |  169.92x |
+
 ### html tokenize (small)
 
-| Task Name                    | ops/sec   | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
-| ---------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_html_small | 14,695.38 |    67.86 |    68.81 |    69.79 |    70.27 |    72.15 |    64.72 |    72.93 |    1.25x |
-| prism_tokenize_html_small    | 18,301.56 |    54.64 |    55.38 |    56.00 |    56.64 |    58.60 |    51.18 |    59.26 | baseline |
+| Task Name                           | ops/sec    | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
+| ----------------------------------- | ---------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_html_small        | 109,228.45 |     9.14 |     9.65 |    12.18 |    14.54 |    22.39 |     8.03 |  3783.31 | baseline |
+| prism_tokenize_html_small           |  17,330.90 |    57.93 |    58.83 |    59.58 |    61.80 |    88.10 |    53.66 |   567.89 |    6.30x |
+| shiki_js_tokenize_html_small        |   1,193.09 |   837.34 |   870.58 |   916.51 |  1026.24 |  1848.22 |   765.53 |  4752.86 |   91.55x |
+| shiki_oniguruma_tokenize_html_small |   1,150.60 |   864.19 |   897.42 |   947.73 |  1018.70 |  1840.75 |   814.92 |  3136.35 |   94.93x |
+
 ### html tokenize (large)
 
-| Task Name                    | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| ---------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_html_large |  119.02 |     8.31 |     8.58 |     9.02 |     9.28 |     9.69 |     7.84 |     9.82 |    1.44x |
-| prism_tokenize_html_large    |  170.96 |     5.71 |     5.97 |     6.40 |     6.56 |     6.62 |     5.51 |     6.64 | baseline |
+| Task Name                           | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ----------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_html_large        | 1,219.01 |     0.82 |     0.84 |     0.86 |     0.92 |     1.89 |     0.77 |     4.69 | baseline |
+| prism_tokenize_html_large           |   167.84 |     5.90 |     6.38 |     7.69 |     9.03 |    10.38 |     5.63 |    12.25 |    7.26x |
+| shiki_js_tokenize_html_large        |    12.11 |    82.24 |    83.65 |    86.93 |    87.79 |    89.53 |    78.54 |    92.32 |  100.67x |
+| shiki_oniguruma_tokenize_html_large |    10.65 |    89.80 |   122.17 |   136.51 |   151.98 |   158.48 |    83.59 |   183.76 |  114.42x |
+
 ### html stylize (small)
 
-| Task Name                          | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| ---------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_html_small        | 7,505.98 |     0.13 |     0.14 |     0.14 |     0.14 |     0.15 |     0.12 |     0.15 |    1.07x |
-| prism_stylize_html_small           | 8,011.02 |     0.12 |     0.13 |     0.13 |     0.13 |     0.13 |     0.12 |     0.13 | baseline |
-| shiki_js_stylize_html_small        |   868.67 |     1.14 |     1.17 |     1.22 |     1.24 |     1.28 |     1.09 |     1.29 |    9.22x |
-| shiki_oniguruma_stylize_html_small |   819.75 |     1.21 |     1.25 |     1.31 |     1.35 |     1.40 |     1.13 |     1.42 |    9.77x |
+| Task Name                          | ops/sec   | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ---------------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_stylize_html_small        | 63,517.77 |     0.02 |     0.02 |     0.02 |     0.02 |     0.03 |     0.01 |     0.87 | baseline |
+| prism_stylize_html_small           |  8,030.70 |     0.13 |     0.13 |     0.13 |     0.14 |     0.21 |     0.12 |     2.90 |    7.91x |
+| shiki_js_stylize_html_small        |    852.32 |     1.17 |     1.21 |     1.29 |     1.42 |     2.99 |     1.11 |     5.26 |   74.52x |
+| shiki_oniguruma_stylize_html_small |    826.15 |     1.20 |     1.25 |     1.35 |     1.46 |     3.53 |     1.14 |     5.83 |   76.88x |
+
 ### html stylize (large)
 
 | Task Name                          | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
 | ---------------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_html_large        |   52.77 |    18.69 |    19.63 |    20.93 |    21.78 |    22.66 |    17.15 |    22.92 |    1.08x |
-| prism_stylize_html_large           |   57.13 |    17.36 |    18.48 |    19.50 |    20.07 |    21.65 |    15.05 |    22.61 | baseline |
-| shiki_js_stylize_html_large        |    8.07 |   123.75 |   125.68 |   128.04 |   129.15 |   132.25 |   117.52 |   132.52 |    7.08x |
-| shiki_oniguruma_stylize_html_large |    7.56 |   131.65 |   134.84 |   137.91 |   139.19 |   144.76 |   124.59 |   146.06 |    7.56x |
+| fuz_code_stylize_html_large        |  640.42 |     1.57 |     1.60 |     1.66 |     2.19 |     2.54 |     1.47 |     4.91 | baseline |
+| prism_stylize_html_large           |   57.59 |    17.30 |    18.69 |    21.48 |    27.99 |    32.02 |    15.17 |    38.23 |   11.12x |
+| shiki_js_stylize_html_large        |    7.97 |   125.11 |   128.80 |   132.79 |   133.86 |   138.73 |   116.45 |   141.55 |   80.31x |
+| shiki_oniguruma_stylize_html_large |    7.96 |   125.78 |   128.28 |   134.29 |   140.28 |   150.75 |   120.94 |   158.57 |   80.43x |
+
 ### json tokenize (small)
 
-| Task Name                    | ops/sec   | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
-| ---------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_json_small | 62,236.30 |    15.97 |    16.27 |    16.73 |    16.98 |    17.28 |    14.62 |    17.40 |    1.06x |
-| prism_tokenize_json_small    | 65,992.13 |    15.05 |    15.34 |    15.83 |    16.11 |    16.41 |    13.72 |    16.51 | baseline |
+| Task Name                           | ops/sec    | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
+| ----------------------------------- | ---------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_json_small        | 487,937.86 |     2.00 |     2.48 |     2.85 |     3.65 |     5.17 |     1.74 |  3578.19 | baseline |
+| prism_tokenize_json_small           |  66,838.82 |    14.93 |    15.30 |    15.93 |    16.85 |    22.53 |    13.90 |   406.38 |    7.30x |
+| shiki_js_tokenize_json_small        |   5,961.86 |   167.31 |   171.58 |   178.21 |   186.98 |   288.62 |   158.69 |  4755.00 |   81.84x |
+| shiki_oniguruma_tokenize_json_small |   5,244.91 |   191.19 |   195.14 |   209.88 |   234.05 |   365.63 |   176.74 |  5591.47 |   93.03x |
+
 ### json tokenize (large)
 
-| Task Name                    | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| ---------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_json_large |  584.89 |     1.69 |     1.74 |     1.83 |     1.89 |     1.94 |     1.54 |     1.96 |    1.12x |
-| prism_tokenize_json_large    |  653.66 |     1.51 |     1.55 |     1.64 |     1.68 |     1.73 |     1.41 |     1.74 | baseline |
+| Task Name                           | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ----------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_json_large        | 5,585.66 |     0.18 |     0.18 |     0.18 |     0.20 |     0.35 |     0.17 |     6.94 | baseline |
+| prism_tokenize_json_large           |   651.45 |     1.53 |     1.60 |     1.85 |     2.20 |     2.75 |     1.44 |     6.21 |    8.57x |
+| shiki_js_tokenize_json_large        |    37.79 |    25.79 |    30.48 |    36.83 |    42.19 |    60.50 |    17.70 |    91.11 |  147.80x |
+| shiki_oniguruma_tokenize_json_large |    44.26 |    21.80 |    25.85 |    30.99 |    34.94 |    40.08 |    19.01 |    46.37 |  126.21x |
+
 ### json stylize (small)
 
-| Task Name                          | ops/sec   | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
-| ---------------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_json_small        | 25,427.38 |    39.19 |    39.83 |    40.34 |    40.69 |    41.67 |    36.32 |    42.23 | baseline |
-| prism_stylize_json_small           | 22,397.68 |    44.63 |    45.37 |    46.11 |    46.95 |    48.47 |    40.66 |    48.97 |    1.14x |
-| shiki_js_stylize_json_small        |  2,415.36 |   404.54 |   427.11 |   459.26 |   478.50 |   499.56 |   372.65 |   504.77 |   10.53x |
-| shiki_oniguruma_stylize_json_small |  2,336.40 |   423.00 |   437.55 |   460.71 |   475.04 |   492.08 |   386.43 |   497.01 |   10.88x |
+| Task Name                          | ops/sec    | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
+| ---------------------------------- | ---------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_stylize_json_small        | 230,589.21 |     4.34 |     4.51 |     5.46 |     7.06 |     8.60 |     3.89 |   903.46 | baseline |
+| prism_stylize_json_small           |  23,604.76 |    42.35 |    43.42 |    44.63 |    46.62 |    70.38 |    39.71 |   572.63 |    9.77x |
+| shiki_js_stylize_json_small        |   2,546.67 |   391.11 |   405.00 |   429.26 |   477.65 |  2923.93 |   368.25 |  6914.97 |   90.55x |
+| shiki_oniguruma_stylize_json_small |   2,439.59 |   407.91 |   423.31 |   451.42 |   497.07 |   962.54 |   384.99 |  5192.08 |   94.52x |
+
 ### json stylize (large)
 
-| Task Name                          | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| ---------------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_json_large        |  241.16 |     4.09 |     4.25 |     4.48 |     4.64 |     4.86 |     3.73 |     4.93 | baseline |
-| prism_stylize_json_large           |  197.89 |     4.91 |     5.31 |     5.82 |     6.11 |     6.41 |     4.38 |     6.57 |    1.22x |
-| shiki_js_stylize_json_large        |   21.05 |    47.21 |    48.41 |    49.80 |    50.67 |    51.91 |    44.06 |    52.64 |   11.46x |
-| shiki_oniguruma_stylize_json_large |   20.32 |    49.32 |    50.23 |    51.34 |    52.11 |    54.72 |    43.71 |    54.87 |   11.87x |
+| Task Name                          | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ---------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_stylize_json_large        | 2,047.03 |     0.49 |     0.55 |     0.93 |     1.03 |     1.09 |     0.44 |     4.18 | baseline |
+| prism_stylize_json_large           |   119.31 |     8.00 |     9.84 |    12.12 |    13.23 |    15.77 |     4.57 |    20.07 |   17.16x |
+| shiki_js_stylize_json_large        |    21.35 |    46.31 |    48.91 |    51.50 |    53.22 |    57.96 |    41.99 |    59.51 |   95.89x |
+| shiki_oniguruma_stylize_json_large |    20.27 |    49.54 |    50.67 |    52.00 |    53.47 |    58.27 |    44.68 |    58.73 |  100.97x |
+
 ### svelte tokenize (small)
 
-| Task Name                      | ops/sec  | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
-| ------------------------------ | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_svelte_small | 3,016.75 |   329.90 |   336.78 |   347.46 |   353.03 |   360.04 |   299.81 |   362.25 | baseline |
-| prism_tokenize_svelte_small    | 2,829.52 |   350.85 |   359.48 |   370.41 |   377.07 |   386.25 |   320.35 |   389.56 |    1.07x |
+| Task Name                             | ops/sec   | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ------------------------------------- | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_svelte_small        | 27,383.82 |     0.04 |     0.04 |     0.04 |     0.04 |     0.05 |     0.03 |     0.42 | baseline |
+| prism_tokenize_svelte_small           |  2,748.87 |     0.37 |     0.37 |     0.39 |     0.41 |     0.63 |     0.34 |     1.20 |    9.96x |
+| shiki_js_tokenize_svelte_small        |    113.60 |     8.73 |     9.07 |     9.39 |     9.64 |    10.13 |     8.20 |    14.78 |  241.04x |
+| shiki_oniguruma_tokenize_svelte_small |     98.19 |    10.19 |    10.59 |    11.10 |    11.44 |    12.19 |     8.41 |    14.27 |  278.88x |
+
 ### svelte tokenize (large)
 
-| Task Name                      | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| ------------------------------ | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_tokenize_svelte_large |   24.98 |    38.32 |    41.83 |    47.66 |    48.54 |    48.84 |    34.78 |    48.95 |    1.09x |
-| prism_tokenize_svelte_large    |   27.28 |    36.31 |    39.72 |    42.41 |    43.90 |    45.67 |    30.60 |    50.20 | baseline |
+| Task Name                             | ops/sec | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ------------------------------------- | ------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_tokenize_svelte_large        |  246.86 |     4.04 |     4.15 |     4.36 |     4.61 |     6.08 |     3.82 |     9.71 | baseline |
+| prism_tokenize_svelte_large           |   27.17 |    36.00 |    39.75 |    42.47 |    43.38 |    46.62 |    30.93 |    52.31 |    9.09x |
+| shiki_js_tokenize_svelte_large        |    1.14 |   873.91 |   912.67 |   934.80 |   970.08 |  1003.06 |   854.82 |  1011.31 |  216.60x |
+| shiki_oniguruma_tokenize_svelte_large |    1.08 |   920.54 |   934.92 |   958.07 |   967.11 |   974.34 |   885.00 |   976.15 |  228.22x |
+
 ### svelte stylize (small)
 
-| Task Name                            | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| ------------------------------------ | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| fuz_code_stylize_svelte_small        | 1,860.47 |     0.53 |     0.55 |     0.57 |     0.58 |     0.60 |     0.49 |     0.61 | baseline |
-| prism_stylize_svelte_small           | 1,691.30 |     0.59 |     0.60 |     0.63 |     0.64 |     0.66 |     0.54 |     0.67 |    1.10x |
-| shiki_js_stylize_svelte_small        |    95.79 |    10.31 |    10.87 |    11.41 |    11.71 |    12.22 |     9.28 |    12.54 |   19.42x |
-| shiki_oniguruma_stylize_svelte_small |    88.07 |    11.27 |    11.74 |    12.29 |    12.58 |    12.94 |     9.87 |    13.46 |   21.12x |
+| Task Name                            | ops/sec   | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ------------------------------------ | --------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| fuz_code_stylize_svelte_small        | 17,591.42 |     0.06 |     0.06 |     0.06 |     0.06 |     0.09 |     0.05 |     0.49 | baseline |
+| prism_stylize_svelte_small           |  1,712.97 |     0.58 |     0.60 |     0.63 |     0.67 |     0.95 |     0.55 |     1.55 |   10.27x |
+| shiki_js_stylize_svelte_small        |     99.67 |     9.89 |    10.43 |    10.88 |    11.09 |    11.64 |     9.35 |    17.97 |  176.50x |
+| shiki_oniguruma_stylize_svelte_small |     90.95 |    10.89 |    11.50 |    12.12 |    12.49 |    13.56 |     9.68 |    17.16 |  193.42x |
+
 ### svelte stylize (large)
 
 | Task Name                            | ops/sec | p50 (s) | p75 (s) | p90 (s) | p95 (s) | p99 (s) | min (s) | max (s) | vs Best  |
 | ------------------------------------ | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | -------- |
-| fuz_code_stylize_svelte_large        |    9.81 |    0.10 |    0.12 |    0.13 |    0.13 |    0.14 |    0.06 |    0.14 |    1.06x |
-| prism_stylize_svelte_large           |   10.39 |    0.10 |    0.11 |    0.11 |    0.12 |    0.12 |    0.07 |    0.14 | baseline |
-| shiki_js_stylize_svelte_large        |    0.94 |    1.05 |    1.07 |    1.08 |    1.08 |    1.08 |    1.04 |    1.08 |   11.00x |
-| shiki_oniguruma_stylize_svelte_large |    0.87 |    1.16 |    1.17 |    1.17 |    1.17 |    1.17 |    1.13 |    1.17 |   12.01x |
+| fuz_code_stylize_svelte_large        |  156.96 |    0.01 |    0.01 |    0.01 |    0.01 |    0.01 |    0.01 |    0.01 | baseline |
+| prism_stylize_svelte_large           |   11.03 |    0.10 |    0.10 |    0.11 |    0.11 |    0.12 |    0.06 |    0.12 |   14.23x |
+| shiki_js_stylize_svelte_large        |    0.40 |    2.49 |    2.65 |    2.81 |    2.86 |    2.90 |    2.19 |    2.91 |  395.70x |
+| shiki_oniguruma_stylize_svelte_large |    0.95 |    1.06 |    1.06 |    1.07 |    1.07 |    1.07 |    1.04 |    1.07 |  165.19x |
diff --git a/benchmark/results.md b/benchmark/results.md
index 2835d40a..8e90c8cf 100644
--- a/benchmark/results.md
+++ b/benchmark/results.md
@@ -8,75 +8,133 @@
 
 | Task Name               | ops/sec    | p50 (μs) | p75 (μs) | p90 (μs) | p95 (μs) | p99 (μs) | min (μs) | max (μs) | vs Best  |
 | ----------------------- | ---------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| baseline:json_complex   | 243,220.27 |     4.12 |     4.46 |     7.23 |     8.25 |    11.85 |     3.71 |  1899.81 | baseline |
-| baseline:css_complex    | 161,243.83 |     6.21 |     6.48 |     9.99 |    11.54 |    17.02 |     5.77 |  5623.44 |    1.51x |
-| baseline:ts_complex     |  17,591.93 |    56.87 |    57.82 |    62.92 |    76.14 |   108.89 |    53.03 |  5454.17 |   13.83x |
-| baseline:html_complex   |  64,995.01 |    15.35 |    15.97 |    19.97 |    25.49 |    32.18 |    14.03 |  3856.62 |    3.74x |
-| baseline:svelte_complex |  18,577.11 |    53.85 |    54.90 |    60.82 |    80.54 |   105.30 |    50.23 |  3536.41 |   13.09x |
-| baseline:md_complex     |  21,204.77 |    47.17 |    48.08 |    51.35 |    61.06 |    92.99 |    44.06 |  2994.40 |   11.47x |
-| baseline:bash_complex   |  25,712.77 |    38.89 |    39.62 |    41.19 |    53.38 |    74.29 |    36.28 |   503.38 |    9.46x |
+| baseline:json_complex   | 260,069.90 |     3.85 |     4.56 |     7.40 |     8.46 |    14.65 |     3.45 |  1563.51 | baseline |
+| baseline:css_complex    | 167,012.07 |     5.99 |     6.32 |     9.97 |    13.07 |    19.59 |     5.50 | 11815.94 |    1.56x |
+| baseline:ts_complex     |  19,432.01 |    51.52 |    52.43 |    55.23 |    64.98 |    94.46 |    48.46 |  4094.13 |   13.38x |
+| baseline:html_complex   |  65,731.39 |    15.19 |    15.67 |    17.33 |    21.50 |    31.21 |    13.96 |  1749.55 |    3.96x |
+| baseline:svelte_complex |  17,331.59 |    57.70 |    58.83 |    62.36 |    71.82 |   110.52 |    54.46 |   602.01 |   15.01x |
+| baseline:md_complex     |  19,371.82 |    51.64 |    52.63 |    56.05 |    63.93 |    95.81 |    48.53 |  2740.51 |   13.43x |
+| baseline:sh_complex     |  23,532.17 |    42.47 |    43.24 |    44.49 |    48.70 |    75.43 |    40.15 |  1410.32 |   11.05x |
 
 ### Large (100x content)
 
 | Task Name            | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
 | -------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| large:json_complex   | 2,223.38 |     0.45 |     0.46 |     0.49 |     0.60 |     0.80 |     0.42 |     2.14 | baseline |
-| large:css_complex    | 1,464.53 |     0.68 |     0.71 |     0.85 |     1.08 |     1.29 |     0.63 |     3.06 |    1.52x |
-| large:ts_complex     |   137.71 |     7.21 |     7.55 |     8.11 |     9.19 |    12.21 |     6.64 |    14.09 |   16.15x |
-| large:html_complex   |   597.91 |     1.67 |     1.77 |     2.06 |     2.20 |     2.70 |     1.56 |     3.32 |    3.72x |
-| large:svelte_complex |   149.85 |     6.58 |     7.09 |     7.98 |     8.31 |     9.13 |     5.97 |    12.76 |   14.84x |
-| large:md_complex     |   107.60 |     9.27 |     9.72 |    11.72 |    12.13 |    12.79 |     8.67 |    14.58 |   20.66x |
-| large:bash_complex   |   209.69 |     4.74 |     5.03 |     6.15 |     6.88 |     7.72 |     4.43 |    10.20 |   10.60x |
+| large:json_complex   | 2,153.19 |     0.46 |     0.47 |     0.50 |     0.55 |     0.76 |     0.44 |     1.27 | baseline |
+| large:css_complex    | 1,422.42 |     0.70 |     0.72 |     0.74 |     0.83 |     1.29 |     0.67 |     1.76 |    1.51x |
+| large:ts_complex     |   156.82 |     6.37 |     6.48 |     6.68 |     7.25 |    10.36 |     6.15 |    11.25 |   13.73x |
+| large:html_complex   |   634.84 |     1.57 |     1.61 |     1.77 |     2.24 |     2.51 |     1.49 |     5.02 |    3.39x |
+| large:svelte_complex |   153.08 |     6.52 |     6.73 |     7.43 |    10.55 |    11.06 |     6.18 |    12.00 |   14.07x |
+| large:md_complex     |   155.49 |     6.42 |     6.66 |     7.51 |     7.78 |     8.25 |     6.11 |    10.59 |   13.85x |
+| large:sh_complex     |   210.39 |     4.75 |     4.85 |     5.45 |     6.53 |     7.01 |     4.58 |     8.57 |   10.23x |
 
 ### Pathological (generated, 32KB)
 
-| Task Name                            | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
-| ------------------------------------ | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
-| pathological:ts_colon_dense          |   485.87 |     2.05 |     2.18 |     2.38 |     2.71 |     3.26 |     1.96 |     3.83 |   14.01x |
-| pathological:ts_angle_dense          |   529.38 |     1.88 |     2.01 |     2.26 |     2.54 |     3.26 |     1.74 |     4.36 |   12.86x |
-| pathological:ts_paren_dense          |   539.91 |     1.85 |     1.94 |     2.34 |     2.58 |     3.21 |     1.77 |     3.67 |   12.61x |
-| pathological:ts_deep_template        |   309.85 |     3.21 |     3.37 |     3.59 |     3.75 |     4.22 |     3.07 |     4.83 |   21.97x |
-| pathological:ts_huge_line            |   893.42 |     1.12 |     1.15 |     1.32 |     1.57 |     1.88 |     1.05 |     2.74 |    7.62x |
-| pathological:ts_long_string          | 6,258.79 |     0.16 |     0.17 |     0.22 |     0.29 |     0.34 |     0.15 |     3.82 |    1.09x |
-| pathological:ts_escape_heavy         | 6,806.33 |     0.15 |     0.15 |     0.18 |     0.23 |     0.29 |     0.14 |     3.99 | baseline |
-| pathological:ts_many_tiny            |   484.70 |     2.05 |     2.19 |     2.53 |     2.77 |     3.25 |     1.92 |     4.85 |   14.04x |
-| pathological:json_deep_array         | 3,027.37 |     0.33 |     0.34 |     0.38 |     0.44 |     0.59 |     0.31 |     2.38 |    2.25x |
-| pathological:html_angle_flood        | 1,108.13 |     0.90 |     0.93 |     1.07 |     1.30 |     1.58 |     0.82 |     2.31 |    6.14x |
-| pathological:html_attr_dense         |   542.58 |     1.84 |     1.90 |     2.14 |     2.57 |     2.89 |     1.70 |     4.12 |   12.54x |
-| pathological:html_entity_dense       | 2,179.84 |     0.46 |     0.47 |     0.50 |     0.65 |     1.04 |     0.42 |     1.77 |    3.12x |
-| pathological:svelte_expression_dense |   271.40 |     3.66 |     3.83 |     4.21 |     4.56 |     4.87 |     3.42 |     5.56 |   25.08x |
-| pathological:md_emphasis_dense       | 2,236.90 |     0.45 |     0.46 |     0.50 |     0.59 |     0.82 |     0.43 |     2.47 |    3.04x |
-| pathological:md_fence_dense          |   778.02 |     1.29 |     1.33 |     1.50 |     1.69 |     2.09 |     1.20 |    11.81 |    8.75x |
-| pathological:md_bracket_dense        | 2,725.11 |     0.37 |     0.37 |     0.41 |     0.45 |     0.63 |     0.34 |     2.25 |    2.50x |
-| pathological:md_link_paren_dense     | 2,390.37 |     0.42 |     0.42 |     0.44 |     0.51 |     0.77 |     0.39 |     2.25 |    2.85x |
-| pathological:svelte_attr_expr_dense  |   520.96 |     1.92 |     2.00 |     2.26 |     2.37 |     2.93 |     1.81 |     3.45 |   13.07x |
-| pathological:css_deep_nesting        | 1,123.53 |     0.89 |     0.92 |     1.07 |     1.27 |     1.55 |     0.82 |     3.52 |    6.06x |
-| pathological:bash_deep_command_sub   |   468.33 |     2.14 |     2.20 |     2.43 |     2.83 |     3.14 |     2.00 |     3.93 |   14.53x |
+| Task Name                                | ops/sec  | p50 (ms) | p75 (ms) | p90 (ms) | p95 (ms) | p99 (ms) | min (ms) | max (ms) | vs Best  |
+| ---------------------------------------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
+| pathological:ts_colon_dense              |   595.01 |     1.68 |     1.71 |     1.79 |     1.95 |     2.94 |     1.60 |     3.74 |   11.06x |
+| pathological:ts_angle_dense              |   624.93 |     1.60 |     1.63 |     1.76 |     1.91 |     2.94 |     1.53 |     4.47 |   10.53x |
+| pathological:ts_paren_dense              |   579.86 |     1.73 |     1.75 |     1.81 |     1.98 |     2.44 |     1.65 |     5.74 |   11.34x |
+| pathological:ts_deep_template            |   666.61 |     1.50 |     1.54 |     1.69 |     1.77 |     2.04 |     1.42 |     2.68 |    9.87x |
+| pathological:ts_huge_line                | 1,017.25 |     0.98 |     1.01 |     1.11 |     1.56 |     1.86 |     0.91 |     4.74 |    6.47x |
+| pathological:ts_long_string              | 5,299.46 |     0.19 |     0.19 |     0.20 |     0.23 |     0.32 |     0.17 |     2.56 |    1.24x |
+| pathological:ts_escape_heavy             | 6,578.47 |     0.15 |     0.15 |     0.16 |     0.17 |     0.22 |     0.14 |     1.58 | baseline |
+| pathological:ts_many_tiny                |   560.31 |     1.79 |     1.81 |     1.91 |     2.40 |     2.54 |     1.72 |     3.26 |   11.74x |
+| pathological:json_deep_array             | 3,137.71 |     0.32 |     0.32 |     0.34 |     0.37 |     0.58 |     0.30 |     1.80 |    2.10x |
+| pathological:html_angle_flood            | 1,171.54 |     0.86 |     0.87 |     0.90 |     0.99 |     1.37 |     0.82 |     1.75 |    5.62x |
+| pathological:html_attr_dense             |   733.30 |     1.36 |     1.39 |     1.49 |     1.92 |     2.18 |     1.29 |     2.84 |    8.97x |
+| pathological:html_entity_dense           | 1,959.96 |     0.51 |     0.52 |     0.53 |     0.56 |     1.02 |     0.48 |     1.53 |    3.36x |
+| pathological:svelte_expression_dense     |   306.70 |     3.24 |     3.34 |     3.55 |     3.66 |     3.86 |     3.07 |     4.89 |   21.45x |
+| pathological:md_emphasis_dense           | 2,267.50 |     0.44 |     0.45 |     0.48 |     0.51 |     0.72 |     0.42 |     2.17 |    2.90x |
+| pathological:md_fence_dense              |   733.96 |     1.36 |     1.38 |     1.42 |     1.60 |     1.94 |     1.32 |     2.12 |    8.96x |
+| pathological:md_bracket_dense            | 2,549.72 |     0.39 |     0.40 |     0.42 |     0.44 |     0.68 |     0.38 |     2.19 |    2.58x |
+| pathological:md_link_paren_dense         | 2,196.22 |     0.46 |     0.46 |     0.49 |     0.51 |     0.83 |     0.44 |     2.45 |    3.00x |
+| pathological:svelte_attr_expr_dense      |   464.01 |     2.15 |     2.20 |     2.38 |     2.44 |     2.77 |     2.06 |     4.17 |   14.18x |
+| pathological:svelte_tag_only_dense       |   673.00 |     1.49 |     1.52 |     1.65 |     2.35 |     2.58 |     1.39 |     3.78 |    9.77x |
+| pathological:html_no_entity_dense        |   664.61 |     1.51 |     1.54 |     1.63 |     1.93 |     2.53 |     1.42 |     2.76 |    9.90x |
+| pathological:md_tag_per_line             |   669.58 |     1.49 |     1.52 |     1.65 |     1.98 |     2.50 |     1.41 |     3.77 |    9.82x |
+| pathological:md_link_paren_per_line      | 1,676.69 |     0.60 |     0.60 |     0.63 |     0.64 |     0.80 |     0.57 |     2.21 |    3.92x |
+| pathological:css_deep_nesting            | 1,168.69 |     0.86 |     0.87 |     0.92 |     1.04 |     1.29 |     0.81 |     1.69 |    5.63x |
+| pathological:bash_deep_command_sub       | 1,077.93 |     0.93 |     0.95 |     1.03 |     1.19 |     1.78 |     0.88 |     2.32 |    6.10x |
+| pathological:ts_template_full_depth      |   580.57 |     1.72 |     1.78 |     2.91 |     3.30 |     3.54 |     1.63 |     4.74 |   11.33x |
+| pathological:bash_cmdsub_full_depth      |   686.52 |     1.45 |     1.52 |     2.01 |     2.70 |     3.09 |     1.35 |     4.28 |    9.58x |
+| pathological:bash_heredoc_sub_full_depth |   404.31 |     2.48 |     2.51 |     2.65 |     2.93 |     3.20 |     2.39 |     3.72 |   16.27x |
+| pathological:bash_heredoc_dense          | 1,064.06 |     0.94 |     0.96 |     0.99 |     1.12 |     1.45 |     0.90 |     1.90 |    6.18x |
+| pathological:md_deep_self_embed          |    89.08 |    11.21 |    11.46 |    11.66 |    12.21 |    15.35 |    10.75 |    16.87 |   73.85x |
+
+### Output metrics
+
+Deterministic DOM-cost proxies (not timed): spans rendered and utf8 HTML bytes per case.
+
+| task | input chars | spans | html bytes | bytes/char |
+| :-- | --: | --: | --: | --: |
+| baseline:json_complex | 327 | 77 | 3175 | 9.71 |
+| baseline:css_complex | 502 | 73 | 3263 | 6.50 |
+| baseline:ts_complex | 2883 | 577 | 25443 | 8.83 |
+| baseline:html_complex | 733 | 230 | 11416 | 15.57 |
+| baseline:svelte_complex | 2517 | 680 | 30931 | 12.29 |
+| baseline:md_complex | 2799 | 525 | 25681 | 9.18 |
+| baseline:sh_complex | 2749 | 344 | 15497 | 5.64 |
+| pathological:ts_colon_dense | 32768 | 16384 | 622592 | 19.00 |
+| pathological:ts_angle_dense | 32768 | 16384 | 671744 | 20.50 |
+| pathological:ts_paren_dense | 32769 | 21846 | 851994 | 26.00 |
+| pathological:ts_deep_template | 32763 | 38994 | 2285772 | 69.77 |
+| pathological:ts_huge_line | 32760 | 10920 | 433524 | 13.23 |
+| pathological:ts_long_string | 32767 | 4 | 32911 | 1.00 |
+| pathological:ts_escape_heavy | 32767 | 4 | 32911 | 1.00 |
+| pathological:ts_many_tiny | 32768 | 24576 | 925696 | 28.25 |
+| pathological:json_deep_array | 32767 | 3 | 32879 | 1.00 |
+| pathological:html_angle_flood | 32769 | 10925 | 469775 | 14.34 |
+| pathological:html_attr_dense | 32775 | 28405 | 1343775 | 41.00 |
+| pathological:html_entity_dense | 32766 | 5461 | 344043 | 10.50 |
+| pathological:svelte_expression_dense | 32769 | 43692 | 1758603 | 53.67 |
+| pathological:md_emphasis_dense | 32766 | 0 | 32766 | 1.00 |
+| pathological:md_fence_dense | 32760 | 12480 | 547560 | 16.71 |
+| pathological:md_bracket_dense | 32768 | 0 | 32768 | 1.00 |
+| pathological:md_link_paren_dense | 32768 | 0 | 32768 | 1.00 |
+| pathological:svelte_attr_expr_dense | 32775 | 32775 | 1420250 | 43.33 |
+| pathological:svelte_tag_only_dense | 32768 | 32768 | 1564672 | 47.75 |
+| pathological:html_no_entity_dense | 32768 | 32768 | 1564672 | 47.75 |
+| pathological:md_tag_per_line | 32775 | 28405 | 1383105 | 42.20 |
+| pathological:md_link_paren_per_line | 32766 | 0 | 32766 | 1.00 |
+| pathological:css_deep_nesting | 32754 | 20703 | 809580 | 24.72 |
+| pathological:bash_deep_command_sub | 32893 | 16256 | 687197 | 20.89 |
+| pathological:ts_template_full_depth | 32766 | 39319 | 2313244 | 70.60 |
+| pathological:bash_cmdsub_full_depth | 32767 | 32766 | 1408939 | 43.00 |
+| pathological:bash_heredoc_sub_full_depth | 32761 | 10920 | 589681 | 18.00 |
+| pathological:bash_heredoc_dense | 32760 | 9555 | 499590 | 15.25 |
+| pathological:md_deep_self_embed | 32766 | 195 | 41216 | 1.26 |
+
 
 <!-- node-bench:end -->
 
 ## Browser Benchmark Results
 
-html 90.09ms avg time 22 ops/sec 1.4% CV
-
-ranges 26.17ms avg time 48 ops/sec 4.8% CV +244.3% vs baseline
-
-| Language | Implementation | Mean (ms) | Median (ms) | Std Dev | CV   | P75 (ms) | P90 (ms) | P95 (ms) | P99 (ms) | Ops/sec | Outliers | Failed | Stability |
-| -------- | -------------- | --------- | ----------- | ------- | ---- | -------- | -------- | -------- | -------- | ------- | -------- | ------ | --------- |
-| ts       | html           | 72.54     | 72.50       | 3.66    | 5.1% | 74.00    | 76.76    | 77.68    | 78.42    | 14      | 0/5      | 0      | 100%      |
-| ts       | ranges         | 37.82     | 37.70       | 2.15    | 5.7% | 39.70    | 40.24    | 40.42    | 40.56    | 26      | 0/5      | 0      | 100%      |
-| css      | html           | 13.73     | 13.70       | 0.05    | 0.3% | 13.75    | 13.78    | 13.79    | 13.80    | 73      | 2/5      | 0      | 100%      |
-| css      | ranges         | 13.80     | 13.80       | 0.00    | 0.0% | 13.80    | 13.80    | 13.80    | 13.80    | 72      | 2/5      | 0      | 100%      |
-| html     | html           | 112.80    | 112.60      | 0.53    | 0.5% | 112.88   | 113.37   | 113.54   | 113.67   | 9       | 1/5      | 0      | 100%      |
-| html     | ranges         | 15.48     | 15.00       | 1.43    | 9.2% | 15.90    | 17.16    | 17.58    | 17.92    | 65      | 0/5      | 0      | 100%      |
-| json     | html           | 188.20    | 188.20      | 0.49    | 0.3% | 188.50   | 188.68   | 188.74   | 188.79   | 5       | 2/5      | 0      | 100%      |
-| json     | ranges         | 13.72     | 13.75       | 0.08    | 0.6% | 13.80    | 13.80    | 13.80    | 13.80    | 73      | 1/5      | 0      | 100%      |
-| svelte   | html           | 98.42     | 97.80       | 1.66    | 1.7% | 98.87    | 100.27   | 100.73   | 101.11   | 10      | 1/5      | 0      | 100%      |
-| svelte   | ranges         | 38.94     | 39.80       | 2.28    | 5.9% | 40.80    | 41.10    | 41.20    | 41.28    | 26      | 0/5      | 0      | 100%      |
-| md       | html           | 54.86     | 55.00       | 0.45    | 0.8% | 55.10    | 55.34    | 55.42    | 55.48    | 18      | 0/5      | 0      | 100%      |
-| md       | ranges         | 37.24     | 35.90       | 2.79    | 7.5% | 39.30    | 40.68    | 41.14    | 41.51    | 27      | 0/5      | 0      | 100%      |
-
-Legend CV: Coefficient of Variation (std_dev/mean) - lower is better, <15% is
-good P75/P90/P95/P99: Percentiles - X% of measurements were faster than this
-Ops/sec: Operations per second (throughput) Stability: Percentage of iterations
-with stable system metrics
+- html: 50.01ms avg, 40 ops/sec, 2.6% CV
+- ranges: 7.25ms avg, 222 ops/sec, 7.2% CV (+590.2% vs baseline)
+
+| Language | Implementation | Mean (ms) | Paint (ms) | Median (ms) | Std Dev | CV    | P75 (ms) | P90 (ms) | P95 (ms) | P99 (ms) | Ops/sec | Outliers | Failed | Stability |
+| -------- | -------------- | --------- | ---------- | ----------- | ------- | ----- | -------- | -------- | -------- | -------- | ------- | -------- | ------ | --------- |
+| ts       | html           | 91.23     | 108.45     | 93.80       | 6.66    | 7.3%  | 94.30    | 95.02    | 95.26    | 95.45    | 11      | 1/5      | 0      | 100%      |
+| ts       | ranges         | 11.80     | 55.15      | 11.20       | 1.44    | 12.2% | 12.80    | 13.40    | 13.60    | 13.76    | 85      | 0/5      | 0      | 100%      |
+| css      | html           | 10.52     | 32.62      | 10.50       | 0.26    | 2.5%  | 10.60    | 10.78    | 10.84    | 10.89    | 95      | 0/5      | 0      | 100%      |
+| css      | ranges         | 2.58      | 32.42      | 2.60        | 0.11    | 4.2%  | 2.60     | 2.66     | 2.68     | 2.70     | 388     | 0/5      | 0      | 100%      |
+| html     | html           | 28.24     | 32.22      | 28.50       | 0.58    | 2.0%  | 28.60    | 28.72    | 28.76    | 28.79    | 35      | 0/5      | 0      | 100%      |
+| html     | ranges         | 3.96      | 32.54      | 3.90        | 0.42    | 10.5% | 4.10     | 4.40     | 4.50     | 4.58     | 253     | 0/5      | 0      | 100%      |
+| json     | html           | 10.60     | 33.10      | 10.60       | 0.39    | 3.7%  | 10.70    | 11.00    | 11.10    | 11.18    | 94      | 0/5      | 0      | 100%      |
+| json     | ranges         | 1.92      | 32.82      | 1.90        | 0.27    | 14.0% | 2.10     | 2.16     | 2.18     | 2.20     | 521     | 0/5      | 0      | 100%      |
+| svelte   | html           | 91.38     | 107.83     | 92.00       | 1.06    | 1.2%  | 92.50    | 108.40   | 113.70   | 117.94   | 11      | 1/5      | 0      | 100%      |
+| svelte   | ranges         | 12.52     | 78.36      | 12.80       | 0.88    | 7.0%  | 13.20    | 13.32    | 13.36    | 13.39    | 80      | 0/5      | 0      | 100%      |
+| md       | html           | 69.38     | 74.98      | 69.50       | 0.70    | 1.0%  | 70.30    | 75.94    | 77.82    | 79.32    | 14      | 1/5      | 0      | 100%      |
+| md       | ranges         | 9.78      | 32.20      | 9.70        | 0.20    | 2.1%  | 10.00    | 10.00    | 10.00    | 10.00    | 102     | 0/5      | 0      | 100%      |
+| sh       | html           | 48.70     | 53.70      | 48.70       | 0.37    | 0.8%  | 48.90    | 49.08    | 49.14    | 49.19    | 21      | 0/5      | 0      | 100%      |
+| sh       | ranges         | 8.16      | 32.54      | 8.20        | 0.05    | 0.7%  | 8.20     | 8.20     | 8.20     | 8.20     | 123     | 0/5      | 0      | 100%      |
+
+Legend:
+
+- Mean/Median/percentiles: work time — stylize + DOM commit + layout
+- Paint (ms): paint-settle time after commit, tracked separately from work time
+- CV: Coefficient of Variation (std_dev/mean) — lower is better, <15% is good
+- P75/P90/P95/P99: percentiles — X% of measurements were faster than this
+- Ops/sec: operations per second (throughput)
+- Stability: percentage of iterations with stable system metrics
diff --git a/src/lib/Code.svelte b/src/lib/Code.svelte
index 990b7864..4ebcac04 100644
--- a/src/lib/Code.svelte
+++ b/src/lib/Code.svelte
@@ -36,50 +36,37 @@
 			  }
 		) & {
 			/**
-			 * Language identifier (e.g., 'ts', 'css', 'html', 'json', 'svelte', 'md').
-			 *
-			 * **Purpose:**
-			 * - Selects the registered lexer used to highlight `content`
-			 * - Sets the `data-lang` attribute and determines `language_supported`
-			 *
-			 * **Special values:**
-			 * - `null` - Explicitly disables syntax highlighting (content rendered as plain text)
-			 * - `undefined` - Falls back to default ('svelte')
+			 * Language identifier (e.g. 'ts', 'css', 'html', 'json', 'svelte', 'md').
+			 * Selects the registered lexer and sets the `data-lang` attribute. `null`
+			 * disables highlighting (content renders as plain text); `undefined`
+			 * falls back to the default ('svelte').
 			 *
 			 * @default 'svelte'
 			 */
 			lang?: string | null;
 			/**
-			 * Whether to render as inline code or block code.
-			 * Controls display via CSS classes.
+			 * Whether to render as inline code instead of a block.
 			 *
 			 * @default false
 			 */
 			inline?: boolean;
 			/**
-			 * Whether to wrap long lines in block code.
-			 * Sets `white-space: pre-wrap` instead of `white-space: pre`.
-			 *
-			 * **Behavior:**
-			 * - Wraps at whitespace (spaces, newlines)
-			 * - Long tokens without spaces (URLs, hashes) will still scroll horizontally
-			 * - Default `false` provides traditional code block behavior
-			 *
-			 * Only affects block code (ignored for inline mode).
+			 * Whether to wrap long lines in block code (`white-space: pre-wrap`
+			 * instead of `pre`). Wraps at whitespace — long unbroken tokens (URLs,
+			 * hashes) still scroll horizontally. Ignored for inline code.
 			 *
 			 * @default false
 			 */
 			wrap?: boolean;
 			/**
-			 * Whether to disable the default margin-bottom on block code.
-			 * Block code has `margin-bottom: var(--space_lg)` by default when not `:last-child`.
+			 * Whether to disable the default margin-bottom on block code
+			 * (`var(--space_lg)` when not `:last-child`).
 			 *
 			 * @default false
 			 */
 			nomargin?: boolean;
 			/**
-			 * Custom `SyntaxStyler` instance to use for highlighting.
-			 * Allows using a different styler with custom languages or configuration.
+			 * Custom `SyntaxStyler` instance, e.g. with different languages registered.
 			 *
 			 * @default syntax_styler_global
 			 */
diff --git a/src/lib/CodeHighlight.svelte b/src/lib/CodeHighlight.svelte
index 9ebb5289..9d2f6c3b 100644
--- a/src/lib/CodeHighlight.svelte
+++ b/src/lib/CodeHighlight.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	/**
-	 * Uses the CSS Custom Highlight API when available --
+	 * Renders code with the CSS Custom Highlight API when available, falling
+	 * back to HTML generation —
 	 * https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
 	 *
 	 * Requires importing `theme_highlight.css` instead of `theme.css`.
@@ -27,57 +28,40 @@
 		/** The source code to syntax highlight. */
 		content: string;
 		/**
-		 * Language identifier (e.g., 'ts', 'css', 'html', 'json', 'svelte', 'md').
-		 *
-		 * **Purpose:**
-		 * - Selects the registered lexer used to highlight `content`
-		 * - Sets the `data-lang` attribute and determines `language_supported`
-		 *
-		 * **Special values:**
-		 * - `null` - Explicitly disables syntax highlighting (content rendered as plain text)
-		 * - `undefined` - Falls back to default ('svelte')
+		 * Language identifier (e.g. 'ts', 'css', 'html', 'json', 'svelte', 'md').
+		 * Selects the registered lexer and sets the `data-lang` attribute. `null`
+		 * disables highlighting (content renders as plain text); `undefined`
+		 * falls back to the default ('svelte').
 		 *
 		 * @default 'svelte'
 		 */
 		lang?: string | null;
 		/**
-		 * Highlighting mode for this component.
-		 *
-		 * **Options:**
-		 * - `'auto'` - Uses CSS Custom Highlight API if supported, falls back to HTML mode
-		 * - `'ranges'` - Forces CSS Custom Highlight API (requires browser support)
-		 * - `'html'` - Forces HTML generation with CSS classes
-		 *
-		 * **Note:** CSS Custom Highlight API has limitations and limited browser support.
-		 * Requires importing `theme_highlight.css` instead of `theme.css`.
+		 * Highlighting mode: `'auto'` uses the CSS Custom Highlight API when
+		 * supported and falls back to HTML, `'ranges'` forces the Highlight API
+		 * (requires browser support), `'html'` forces HTML generation with CSS
+		 * classes. The Highlight API has limited browser support and requires
+		 * `theme_highlight.css` instead of `theme.css`.
 		 *
 		 * @default 'auto'
 		 */
 		mode?: HighlightMode;
 		/**
-		 * Whether to render as inline code or block code.
-		 * Controls display via CSS classes.
+		 * Whether to render as inline code instead of a block.
 		 *
 		 * @default false
 		 */
 		inline?: boolean;
 		/**
-		 * Whether to wrap long lines in block code.
-		 * Sets `white-space: pre-wrap` instead of `white-space: pre`.
-		 *
-		 * **Behavior:**
-		 * - Wraps at whitespace (spaces, newlines)
-		 * - Long tokens without spaces (URLs, hashes) will still scroll horizontally
-		 * - Default `false` provides traditional code block behavior
-		 *
-		 * Only affects block code (ignored for inline mode).
+		 * Whether to wrap long lines in block code (`white-space: pre-wrap`
+		 * instead of `pre`). Wraps at whitespace — long unbroken tokens (URLs,
+		 * hashes) still scroll horizontally. Ignored for inline code.
 		 *
 		 * @default false
 		 */
 		wrap?: boolean;
 		/**
-		 * Custom `SyntaxStyler` instance to use for highlighting.
-		 * Allows using a different styler with custom languages or configuration.
+		 * Custom `SyntaxStyler` instance, e.g. with different languages registered.
 		 *
 		 * @default syntax_styler_global
 		 */
diff --git a/src/lib/code_sample.ts b/src/lib/code_sample.ts
index 065e130b..da240b1e 100644
--- a/src/lib/code_sample.ts
+++ b/src/lib/code_sample.ts
@@ -5,6 +5,6 @@ export interface CodeSample {
 }
 
 // Languages ordered from simple to complex
-export const sample_langs = ['json', 'css', 'ts', 'html', 'svelte', 'md', 'bash'] as const;
+export const sample_langs = ['json', 'css', 'ts', 'html', 'svelte', 'md', 'sh'] as const;
 
 export type SampleLang = (typeof sample_langs)[number];
diff --git a/src/lib/lexer_bash.ts b/src/lib/lexer_bash.ts
index 4ebf5b2e..d723fe5b 100644
--- a/src/lib/lexer_bash.ts
+++ b/src/lib/lexer_bash.ts
@@ -42,11 +42,11 @@ import {
  * unquoted heredoc bodies) runs on an explicit pooled frame stack, so
  * arbitrarily deep input tokenizes fully without touching the JS call stack.
  *
- * Scope: the bash family — `sh`/`shell` alias this lexer. POSIX sh is a
- * syntactic subset of bash for highlighting purposes (everything sh scripts
- * use — `$(…)`, `$((…))`, backticks, heredocs, `${…}` — is shared syntax),
- * and bash-only forms don't occur in sh input. Shells with their own
- * syntax (fish, PowerShell) are out of scope.
+ * Scope: the bash family — registered as `sh`, with `bash`/`shell` as
+ * aliases. POSIX sh is a syntactic subset of bash for highlighting purposes
+ * (everything sh scripts use — `$(…)`, `$((…))`, backticks, heredocs, `${…}`
+ * — is shared syntax), and bash-only forms don't occur in sh input. Shells
+ * with their own syntax (fish, PowerShell) are out of scope.
  *
  * Resilience: unterminated single-line constructs stop at the line boundary;
  * unterminated strings, command substitutions, and heredocs extend to the
@@ -993,11 +993,11 @@ const lex_bash = (l: Lexer): void => {
 };
 
 /**
- * The Bash language registration for the lexer engine.
+ * The shell (bash-family) language registration for the lexer engine.
  *
- * `sh` and `shell` alias this lexer: POSIX sh is a syntactic subset of bash
- * for highlighting purposes, and the bash-only constructs this lexer
- * additionally recognizes don't occur in sh input, so running it on sh
+ * Registered as `sh`; `bash` and `shell` alias it: POSIX sh is a syntactic
+ * subset of bash for highlighting purposes, and the bash-only constructs this
+ * lexer additionally recognizes don't occur in sh input, so running it on sh
  * scripts is exact. There is no separate sh lexer.
  */
-export const lexer_bash: SyntaxLang = {id: 'bash', aliases: ['sh', 'shell'], lex: lex_bash};
+export const lexer_bash: SyntaxLang = {id: 'sh', aliases: ['bash', 'shell'], lex: lex_bash};
diff --git a/src/lib/lexer_md.ts b/src/lib/lexer_md.ts
index 2b687428..e29a42c7 100644
--- a/src/lib/lexer_md.ts
+++ b/src/lib/lexer_md.ts
@@ -94,7 +94,7 @@ add_fence_lang('css', 'css', T_LANG_CSS);
 add_fence_lang('html markup', 'markup', T_LANG_MARKUP);
 add_fence_lang('json', 'json', T_LANG_JSON);
 add_fence_lang('svelte', 'svelte', T_LANG_SVELTE);
-add_fence_lang('bash sh shell', 'bash', T_LANG_BASH);
+add_fence_lang('sh bash shell', 'sh', T_LANG_BASH);
 add_fence_lang('md markdown', 'md', T_LANG_MD);
 
 // line-internal whitespace — `is_space` from the toolkit includes newlines
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dab63a08..9e955723 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import 'virtual:fuz.css';
 	import '$lib/theme.css';
-	import './style.css';
 
 	import ThemeRoot from '@fuzdev/fuz_ui/ThemeRoot.svelte';
 	import {SiteState, site_context} from '@fuzdev/fuz_ui/site.svelte.ts';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1e40c88c..daf9aeaa 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import DocsFooter from '@fuzdev/fuz_ui/DocsFooter.svelte';
 	import {site_context} from '@fuzdev/fuz_ui/site.svelte.ts';
-	import {FUZ_DEV_URL} from '@fuzdev/fuz_ui/constants.ts';
+	import {FUZ_DEV_URL, MAIN_HEADER_MARGIN_TOP} from '@fuzdev/fuz_ui/constants.ts';
+	import {DOCS_PATH} from '@fuzdev/fuz_ui/docs_helpers.svelte.ts';
 	import Card from '@fuzdev/fuz_ui/Card.svelte';
 	import Svg from '@fuzdev/fuz_ui/Svg.svelte';
 	import {logo_fuz_code} from '@fuzdev/fuz_ui/logos.ts';
@@ -11,65 +12,35 @@
 
 	const site = site_context.get();
 
-	const svelte_example = '<h1>hello {name}</h1>';
-	const ts_example = 'const x: number = 42;';
-	const css_example = '.card { color: var(--color_a); }';
+	const hero_example = '<h1>hello {name}</h1>';
 </script>
 
+<svelte:head>
+	<title>@fuzdev/fuz_code</title>
+</svelte:head>
+
 <main class="box width:100% mb_xl5" style:padding="var(--space_xl3) 0">
 	<div class="width_atmost_md">
-		<section class="box" style:padding-top="var(--docs_primary_nav_height, 60px)">
+		<section class="box" style:padding-top={MAIN_HEADER_MARGIN_TOP}>
 			<h1>fuz_code</h1>
 			<Svg data={logo_fuz_code} size="var(--icon_size_xl2)" />
 		</section>
-		<section class="box">
-			<Card href={resolve('/docs')}>docs{#snippet icon()}{site.glyph}{/snippet}</Card>
-		</section>
 		<section>
 			<p>
-				fuz_code is a library for syntax highlighting. It can output strings of HTML and Svelte
-				components, and it has a <a href={resolve('/docs/usage#Preprocessor' as any)}
-					>preprocessor</a
-				>
-				for static compilation. It runs one hand-written lexer per language with zero regular expressions;
-				it originated as a fork of
+				fuz_code is a syntax highlighting library. It runs one hand-written lexer per language
+				without regular expressions, outputs HTML strings or Svelte components, and can compile
+				static content at build time. It originated as a fork of
 				<a href="https://github.com/PrismJS/prism">Prism</a>
-				(<a href="https://prismjs.com/">prismjs.com</a>) by
-				<a href="https://lea.verou.me/">Lea Verou</a>
-				and keeps its <code>.token_*</code> class vocabulary. More at the
-				<a href={resolve('/docs')}>docs</a>.
-			</p>
-			<p>
-				To use fuz_css with Svelte, import the theme CSS file and <code>Code</code> component:
-			</p>
-			<Code
-				lang="ts"
-				content={`import '@fuzdev/fuz_code/theme.css';
-import Code from '@fuzdev/fuz_code/Code.svelte';`}
-			/>
-			<p>Svelte highlights by default:</p>
-			<Code content={`<Code content={'${svelte_example}'} />`} />
-			<Code content={svelte_example} />
-			<p>Set <code>lang</code> for other languages, like TypeScript:</p>
-			<Code content={`<Code lang="ts" content="${ts_example}" />`} />
-			<p>Renders:</p>
-			<Code lang="ts" content={ts_example} />
-			<p>Or CSS:</p>
-			<Code content={`<Code lang="css" content={"${css_example}"} />`} />
-			<p>Renders:</p>
-			<Code lang="css" content={css_example} />
-			<p>
-				See the <a href={resolve('/docs')}>docs</a> for more.
+				by <a href="https://lea.verou.me/">Lea Verou</a>.
 			</p>
 		</section>
-		<section class="box gap_xl3 font_size_xl2">
-			<div class="panel box p_lg gap_sm">
-				<!-- TODO large variants of the chip? using `--font_size`? -->
-				<a href={resolve('/samples')} class="chip px_xl py_sm">samples</a>
-				<a href={resolve('/textarea')} class="chip px_xl py_sm">textarea</a>
-				<a href={resolve('/benchmark')} class="chip px_xl py_sm">benchmark</a>
-				<a href={resolve('/about')} class="chip px_xl py_sm">about</a>
-			</div>
+		<section class="box width:100%">
+			<Code content={hero_example} />
+		</section>
+		<section class="box gap_md width:100%">
+			<Card href={DOCS_PATH}>docs{#snippet icon()}{/snippet}</Card>
+			<Card href={resolve('/docs/samples')}>samples{#snippet icon()}{/snippet}</Card>
+			<Card href={resolve('/docs/benchmark')}>benchmark{#snippet icon()}{/snippet}</Card>
 		</section>
 		<section>
 			<DocsFooter repo_url={site.repo_url} root_url={FUZ_DEV_URL} />
diff --git a/src/routes/CodeTome.svelte b/src/routes/CodeTome.svelte
deleted file mode 100644
index a86a7551..00000000
--- a/src/routes/CodeTome.svelte
+++ /dev/null
@@ -1,201 +0,0 @@
-<script lang="ts">
-	import TomeLink from '@fuzdev/fuz_ui/TomeLink.svelte';
-	import ModuleLink from '@fuzdev/fuz_ui/ModuleLink.svelte';
-	import DeclarationLink from '@fuzdev/fuz_ui/DeclarationLink.svelte';
-	import TomeSection from '@fuzdev/fuz_ui/TomeSection.svelte';
-	import TomeSectionHeader from '@fuzdev/fuz_ui/TomeSectionHeader.svelte';
-
-	import Code from '$lib/Code.svelte';
-	import {syntax_styler_global} from '$lib/syntax_styler_global.ts';
-
-	// TODO what convention? `DocsTome`? Maybe just `Tome`? `/tomes`? both? what other options?
-
-	// const LIBRARY_ITEM_NAME = 'Code';
-
-	const programmatic_example = `const x: number = 42;`;
-	const programmatic_result = syntax_styler_global.stylize(programmatic_example, 'ts');
-</script>
-
-<!-- eslint-disable svelte/no-useless-mustaches -->
-
-<!-- <DocsItem name={LIBRARY_ITEM_NAME}> -->
-<section>
-	<p>
-		The
-		<DeclarationLink name="Code" />
-		Svelte component supports syntax styling with hand-written per-language lexers. fuz_code originated
-		as a fork of
-		<a href="https://github.com/PrismJS/prism">Prism</a> (<a href="https://prismjs.com/"
-			>prismjs.com</a
-		>) by
-		<a href="https://lea.verou.me/">Lea Verou</a>
-		and keeps its <code>.token_*</code> class vocabulary.
-	</p>
-	<p>To use it, import the default theme or your own:</p>
-	<Code
-		lang="ts"
-		content="// +layout.svelte
-import '@fuzdev/fuz_code/theme.css'; // add this"
-	/>
-	<p>then use <DeclarationLink name="Code" />:</p>
-	<Code
-		content={'<' +
-			`script>\n\t// Something.svelte\n\timport Code from '@fuzdev/fuz_code/Code.svelte';\n</script>\n\n<Code content="<header>hello world</header>" />`}
-	/>
-	<p>outputs:</p>
-	<Code content="<header>hello world</header>" />
-</section>
-<TomeSection>
-	<TomeSectionHeader text="Dependencies" />
-	<p>
-		By default fuz_code depends on <a href="https://css.fuz.dev">fuz_css</a> to provide
-		color-schema-aware color variables. If you're not using it, import
-		<code>theme_variables.css</code> or bring your own:
-	</p>
-	<Code
-		lang="ts"
-		content="// +layout.svelte
-import '@fuzdev/fuz_code/theme.css';
-import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using fuz_css"
-	/>
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="Preprocessor" />
-	<p>
-		The <ModuleLink module_path="svelte_preprocess_fuz_code.ts"
-			>svelte_preprocess_fuz_code</ModuleLink
-		> preprocessor compiles static
-		<DeclarationLink name="Code" /> content at build time, replacing runtime syntax highlighting:
-	</p>
-	<Code
-		lang="ts"
-		content={`// svelte.config.js
-import {svelte_preprocess_fuz_code} from '@fuzdev/fuz_code/svelte_preprocess_fuz_code.js';
-
-export default {
-  preprocess: [
-    svelte_preprocess_fuz_code(),
-    vitePreprocess(),
-  ],
-};`}
-	/>
-	<p>
-		Static string <code>content</code> props are highlighted at build time and replaced with pre-rendered
-		HTML. Dynamic content is left unchanged for runtime highlighting.
-	</p>
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="Svelte support" />
-	<p>
-		<DeclarationLink name="Code" /> styles
-		<a href="https://svelte.dev/">Svelte</a>
-		by default, originally based on
-		<a href="https://github.com/pngwn/prism-svelte"><code>prism-svelte</code></a>
-		by <a href="https://github.com/pngwn">@pngwn</a>:
-	</p>
-	<Code content={'<Code content="<scr..." />'} />
-	<p>styled:</p>
-	<div>
-		<Code
-			content={'<' +
-				`script lang="ts">
-	import Card from '@fuz.dev/fuz-library/Card.svelte';
-	console.log('hello Card', Card);
-</script>
-
-<Card>
-	<div class="greeting">hi {friend}</div>
-</Card>`}
-		/>
-	</div>
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="TypeScript support" />
-	<p>
-		<DeclarationLink name="Code" /> supports TypeScript with <code>lang="ts"</code>:
-	</p>
-	<Code content={`<Code lang="ts" content="export type A<T> = ('b' | 3) & T;" />`} />
-	<div>
-		<Code lang="ts" content={`export type A<T> = ('b' | 3) & T;`} />
-	</div>
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="Markdown support" />
-	<p>
-		<DeclarationLink name="Code" /> supports Markdown with <code>lang="md"</code>, and fenced blocks
-		for all languages:
-	</p>
-	<Code content={`<Code lang="md" content="# hello \`world\` ..." />`} />
-	<div>
-		<Code lang="md" content={`# hello \`world\`\n\n\`\`\`ts\n\tconst a = 1;\n\`\`\``} />
-	</div>
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="Fallback to no styling" />
-	<p>
-		Passing <code>lang={'{'}null}</code> disables syntax styling:
-	</p>
-	<Code content={'<Code lang={null} content="<aside>all is gray</aside>" />'} />
-	<Code lang={null} content={`<aside>all is gray</aside>`} />
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="Layout" />
-	<p>
-		<DeclarationLink name="Code" /> is a block by default:
-	</p>
-	<div>ab<Code content="c" /></div>
-	<Code content={'<div>ab<Code content="c" /></div>'} />
-	<p>
-		It can be inlined with <Code inline content={`<Code inline content="..." />`} />
-	</p>
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="Programmatic usage" />
-	<p>
-		fuz_code can be used directly from TypeScript without Svelte. Import <DeclarationLink
-			name="syntax_styler_global"
-		/> for a pre-configured instance with all built-in languages:
-	</p>
-	<Code
-		lang="ts"
-		content={`import {syntax_styler_global} from '@fuzdev/fuz_code/syntax_styler_global.js';
-
-const html = syntax_styler_global.stylize('${programmatic_example}', 'ts');`}
-	/>
-	<p>returns HTML string:</p>
-	<Code content={programmatic_result} />
-	<p>then rendered with:</p>
-	<Code content={'<code data-lang="ts">{@html programmatic_result}</code>'} />
-	<p>we get:</p>
-	<p>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		<code data-lang="ts">{@html programmatic_result}</code>
-	</p>
-	<p>
-		For a custom configuration, create your own <DeclarationLink name="SyntaxStyler" /> and register only
-		the languages you need:
-	</p>
-	<Code
-		lang="ts"
-		content={`import {SyntaxStyler} from '@fuzdev/fuz_code/syntax_styler.js';
-import {lexer_markup} from '@fuzdev/fuz_code/lexer_markup.js';
-import {lexer_css} from '@fuzdev/fuz_code/lexer_css.js';
-
-const styler = new SyntaxStyler();
-styler.add_lang(lexer_markup);
-styler.add_lang(lexer_css);
-
-const html = styler.stylize('<div class="example">hello</div>', 'html');`}
-	/>
-</TomeSection>
-<TomeSection>
-	<TomeSectionHeader text="Experimental highlighting API" />
-	<p>
-		The <DeclarationLink name="Code" /> component generates HTML with CSS classes for text highlighting.
-		It also includes experimental support for the CSS Custom Highlight API with
-		<DeclarationLink name="CodeHighlight" />, see the
-		<TomeLink slug="samples" />
-		for more.
-	</p>
-</TomeSection>
-<!-- </DocsItem> -->
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
deleted file mode 100644
index cba94e76..00000000
--- a/src/routes/Footer.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import Breadcrumb from '@fuzdev/fuz_ui/Breadcrumb.svelte';
-</script>
-
-<section class="mb_xl5 box">
-	<Breadcrumb />
-</section>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
deleted file mode 100644
index b14b628c..00000000
--- a/src/routes/about/+page.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-	import LibraryDetail from '@fuzdev/fuz_ui/LibraryDetail.svelte';
-	import {Library, library_context} from '@fuzdev/fuz_ui/library.svelte.ts';
-	import DocsFooter from '@fuzdev/fuz_ui/DocsFooter.svelte';
-	import {site_context} from '@fuzdev/fuz_ui/site.svelte.ts';
-	import {FUZ_DEV_URL} from '@fuzdev/fuz_ui/constants.ts';
-	import EcosystemLinksPanel from '@fuzdev/fuz_ui/EcosystemLinksPanel.svelte';
-	import Breadcrumb from '@fuzdev/fuz_ui/Breadcrumb.svelte';
-
-	import {library_json} from '$routes/library.ts';
-
-	const library = new Library(library_json);
-	library_context.set(() => library);
-	const site = site_context.get();
-</script>
-
-<main class="box mx_auto width_atmost_md pb_xl9">
-	<section class="box">
-		<header>
-			<h1 class="mt_xl5 text-align:center">{library.repo_name}</h1>
-		</header>
-		<Breadcrumb />
-	</section>
-	<section class="box width:100% mb_lg">
-		<div class="panel p_md width_atmost_md">
-			<LibraryDetail {library} />
-		</div>
-	</section>
-	<EcosystemLinksPanel />
-	<section class="box">
-		<DocsFooter repo_url={site.repo_url} root_url={FUZ_DEV_URL}>
-			<div class="mb_lg">
-				<Breadcrumb />
-			</div>
-		</DocsFooter>
-	</section>
-</main>
diff --git a/src/routes/benchmark/+page.svelte b/src/routes/benchmark/+page.svelte
index 9ad8e744..da38b10f 100644
--- a/src/routes/benchmark/+page.svelte
+++ b/src/routes/benchmark/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import {resolve} from '$app/paths';
+
 	import {samples as all_samples} from '$routes/samples/all.ts';
 	import BenchmarkResults from './BenchmarkResults.svelte';
 	import BenchmarkHarness from './BenchmarkHarness.svelte';
@@ -83,7 +85,9 @@
 
 <div class="box width_atmost_lg mx_auto">
 	<h1 class="mt_xl5">benchmark</h1>
+	<p><a href={resolve('/docs/benchmark')}>← benchmark docs</a></p>
 	<p>
+		For steadier numbers, expose GC:
 		<code class="font-weight:400 font_size_sm">chromium --js-flags="--expose-gc"</code>
 	</p>
 
diff --git a/src/routes/benchmark/BenchmarkHarness.svelte b/src/routes/benchmark/BenchmarkHarness.svelte
index 200be76e..b1499e1d 100644
--- a/src/routes/benchmark/BenchmarkHarness.svelte
+++ b/src/routes/benchmark/BenchmarkHarness.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import {tick, type Component} from 'svelte';
 
-	import type {BenchmarkComponentProps} from './benchmark_types.ts';
+	import type {BenchmarkComponentProps, IterationTiming} from './benchmark_types.ts';
 	import BenchmarkInstance from './BenchmarkInstance.svelte';
-	import {ensure_paint} from './benchmark_dom.ts';
 
 	/* eslint-disable no-console */
 
@@ -11,12 +10,23 @@
 
 	let current_component: Component<BenchmarkComponentProps> | null = $state.raw(null);
 	let current_props: BenchmarkComponentProps | null = $state.raw(null);
-	let render_resolver: (() => void) | null = null;
+	let commit_resolver: (() => void) | null = null;
+	let commit_rejector: ((error: Error) => void) | null = null;
+	let paint_resolver: (() => void) | null = null;
+	let paint_rejector: ((error: Error) => void) | null = null;
 	let iteration_key = $state.raw(0);
-	const handle_render_complete = () => {
-		if (render_resolver) {
-			render_resolver();
-			render_resolver = null;
+	const handle_commit = () => {
+		if (commit_resolver) {
+			commit_resolver();
+			commit_resolver = null;
+			commit_rejector = null;
+		}
+	};
+	const handle_paint = () => {
+		if (paint_resolver) {
+			paint_resolver();
+			paint_resolver = null;
+			paint_rejector = null;
 		}
 	};
 
@@ -24,41 +34,58 @@
 	export const run_iteration = async (
 		component: Component<BenchmarkComponentProps>,
 		props: BenchmarkComponentProps,
-	): Promise<number> => {
+	): Promise<IterationTiming> => {
 		iteration_key++;
 
-		const render_promise: Promise<void> = new Promise((resolve, reject) => {
-			render_resolver = resolve;
-
-			active_timeout_id = setTimeout(() => {
-				if (render_resolver) {
-					console.error('[Harness] Render timeout after', RENDER_TIMEOUT_MS, 'ms');
-					render_resolver = null;
-					active_timeout_id = undefined;
-					reject(new Error(`Render timeout after ${RENDER_TIMEOUT_MS}ms`));
-				}
-			}, RENDER_TIMEOUT_MS);
+		// Both boundaries are measured from the same `start`. The commit promise
+		// resolves when the highlight work is laid out; the paint promise resolves
+		// a couple of frames later once pixels settle.
+		const commit_promise: Promise<void> = new Promise((resolve, reject) => {
+			commit_resolver = resolve;
+			commit_rejector = reject;
+		});
+		const paint_promise: Promise<void> = new Promise((resolve, reject) => {
+			paint_resolver = resolve;
+			paint_rejector = reject;
 		});
 
+		// The timeout rejects whichever boundary is still pending, so a render that
+		// never commits (component throws in onMount) fails the iteration instead of
+		// hanging on `await commit_promise`. Only the awaited boundary is rejected —
+		// the other is either already resolved or never awaited past this point.
+		active_timeout_id = setTimeout(() => {
+			console.error('[Harness] Render timeout after', RENDER_TIMEOUT_MS, 'ms');
+			const error = new Error(`Render timeout after ${RENDER_TIMEOUT_MS}ms`);
+			if (commit_resolver) {
+				commit_rejector?.(error);
+			} else if (paint_resolver) {
+				paint_rejector?.(error);
+			}
+			commit_resolver = null;
+			commit_rejector = null;
+			paint_resolver = null;
+			paint_rejector = null;
+			active_timeout_id = undefined;
+		}, RENDER_TIMEOUT_MS);
+
 		const start = performance.now();
 
 		try {
 			current_component = component;
 			current_props = props;
 
-			await render_promise;
+			await commit_promise;
+			const work_ms = performance.now() - start;
+
+			await paint_promise;
+			const paint_ms = performance.now() - start;
 
 			if (active_timeout_id) {
 				clearTimeout(active_timeout_id);
 				active_timeout_id = undefined;
 			}
 
-			const end = performance.now();
-			const elapsed = end - start;
-
-			await ensure_paint();
-
-			return elapsed;
+			return {work_ms, paint_ms};
 		} catch (error) {
 			console.error('[Harness] Render failed:', error);
 			throw error;
@@ -69,7 +96,10 @@
 	export const cleanup = async (): Promise<void> => {
 		current_component = null;
 		current_props = null;
-		render_resolver = null;
+		commit_resolver = null;
+		commit_rejector = null;
+		paint_resolver = null;
+		paint_rejector = null;
 
 		if (active_timeout_id) {
 			clearTimeout(active_timeout_id);
@@ -81,11 +111,32 @@
 </script>
 
 {#if current_component && current_props}
-	{#key iteration_key}
-		<BenchmarkInstance
-			BenchmarkedComponent={current_component}
-			props={current_props}
-			on_render_complete={handle_render_complete}
-		/>
-	{/key}
+	<!-- Render the measured content in a visible on-screen region so the browser
+	     actually rasterizes it each iteration. An off-screen render settles the
+	     paint promise on the rAF floor (~2 idle frames) without painting real
+	     pixels, which flattens the paint numbers. Fixed to the right edge, clipped
+	     to the viewport, and non-interactive so the running UI stays usable. -->
+	<div class="benchmark-stage" aria-hidden="true">
+		{#key iteration_key}
+			<BenchmarkInstance
+				BenchmarkedComponent={current_component}
+				props={current_props}
+				on_commit={handle_commit}
+				on_paint={handle_paint}
+			/>
+		{/key}
+	</div>
 {/if}
+
+<style>
+	.benchmark-stage {
+		position: fixed;
+		inset-block: 0;
+		right: 0;
+		width: min(50vw, 600px);
+		overflow: hidden;
+		pointer-events: none;
+		z-index: 100;
+		background-color: var(--fg_05);
+	}
+</style>
diff --git a/src/routes/benchmark/BenchmarkInstance.svelte b/src/routes/benchmark/BenchmarkInstance.svelte
index 0155f036..40f857ea 100644
--- a/src/routes/benchmark/BenchmarkInstance.svelte
+++ b/src/routes/benchmark/BenchmarkInstance.svelte
@@ -7,20 +7,28 @@
 	const {
 		BenchmarkedComponent = null,
 		props = null,
-		on_render_complete = () => {},
+		on_commit = () => {},
+		on_paint = () => {},
 	}: {
 		BenchmarkedComponent: Component<BenchmarkComponentProps> | null;
 		props: BenchmarkComponentProps | null;
-		on_render_complete?: () => void;
+		/** Fires once the highlight work is committed and laid out (work boundary). */
+		on_commit?: () => void;
+		/** Fires once the browser has settled pixels, ~1-2 frames later (paint boundary). */
+		on_paint?: () => void;
 	} = $props();
 
 	let container_el: HTMLDivElement;
 
-	// Signal completion after mount+paint
+	// The child component mounts and inserts its DOM before this parent onMount
+	// runs, so reading layout here forces style + layout to complete synchronously.
+	// `on_commit` therefore marks the end of the actual highlight work (stylize +
+	// DOM build + layout); `on_paint` fires after `ensure_paint` once pixels have
+	// settled. The two are reported separately so the frame-quantized paint wait
+	// doesn't get charged to the highlighter's compute cost.
 	onMount(async () => {
-		// TODO any tweaks to this, including order?
 		// Force layout recalculation for all modes to ensure consistent timing,
-		// and use them to ensure they can't be optimized.
+		// and read the values so they can't be optimized away.
 		const code_el = container_el.querySelector('code');
 		const rect = code_el!.getBoundingClientRect();
 		const height = code_el!.offsetHeight;
@@ -28,9 +36,11 @@
 			console.error('Unexpected negative dimensions'); // eslint-disable-line no-console
 		}
 
+		on_commit();
+
 		await ensure_paint();
 
-		on_render_complete();
+		on_paint();
 	});
 </script>
 
diff --git a/src/routes/benchmark/BenchmarkResults.svelte b/src/routes/benchmark/BenchmarkResults.svelte
index 25eed517..dd3e9f3e 100644
--- a/src/routes/benchmark/BenchmarkResults.svelte
+++ b/src/routes/benchmark/BenchmarkResults.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import {scale} from 'svelte/transition';
 	import CopyToClipboard from '@fuzdev/fuz_ui/CopyToClipboard.svelte';
 
 	import {fmt} from './benchmark_stats.ts';
@@ -88,13 +89,28 @@
 
 		<div class="mt_md">
 			<CopyToClipboard text={results_to_markdown(results)}>
-				copy results as markdown
+				{#snippet children(copied, failed)}
+					{#if copied}
+						<span in:scale={{duration: 200}}>copied ✓</span>
+					{:else if failed}
+						<span>copy failed</span>
+					{:else}
+						copy results as markdown
+					{/if}
+				{/snippet}
 			</CopyToClipboard>
 		</div>
 
 		<div>
 			<h3>Legend</h3>
 			<ul>
+				<li>
+					<strong>Mean / Median / percentiles</strong>: work time — stylize + DOM commit + layout,
+					the highlighter's compute cost
+				</li>
+				<li>
+					<strong>Paint</strong>: mean time until pixels settle (work plus ~1–2 animation frames)
+				</li>
 				<li>
 					<strong>CV</strong>: Coefficient of Variation (std_dev/mean) - lower is better, &lt;15% is
 					good
diff --git a/src/routes/benchmark/benchmark_fixtures.ts b/src/routes/benchmark/benchmark_fixtures.ts
index 4f0c7b25..a9b37e9f 100644
--- a/src/routes/benchmark/benchmark_fixtures.ts
+++ b/src/routes/benchmark/benchmark_fixtures.ts
@@ -44,5 +44,5 @@ export const implementations: Array<BenchmarkedImplementation> = [
 ];
 
 // Languages to test
-export const languages = ['ts', 'css', 'html', 'json', 'svelte', 'md', 'bash'] as const;
+export const languages = ['ts', 'css', 'html', 'json', 'svelte', 'md', 'sh'] as const;
 export type Language = (typeof languages)[number];
diff --git a/src/routes/benchmark/benchmark_results.ts b/src/routes/benchmark/benchmark_results.ts
index 8deae9d6..743ceccc 100644
--- a/src/routes/benchmark/benchmark_results.ts
+++ b/src/routes/benchmark/benchmark_results.ts
@@ -35,6 +35,10 @@ export const RESULT_COLUMNS: Array<ResultColumn> = [
 		header: 'Mean (ms)',
 		get_value: (r) => fmt(ns_to_ms(r.stats.core.mean_ns)),
 	},
+	{
+		header: 'Paint (ms)',
+		get_value: (r) => fmt(ns_to_ms(r.stats.paint.mean_ns)),
+	},
 	{
 		header: 'Median (ms)',
 		get_value: (r) => fmt(ns_to_ms(r.stats.core.p50_ns)),
diff --git a/src/routes/benchmark/benchmark_runner.ts b/src/routes/benchmark/benchmark_runner.ts
index e4c95017..ce6c0daf 100644
--- a/src/routes/benchmark/benchmark_runner.ts
+++ b/src/routes/benchmark/benchmark_runner.ts
@@ -27,6 +27,9 @@ const MIN_VALID_TIMING_MS = 0.01;
 const MAX_VALID_TIMING_MS = 60000;
 const SUSPICIOUS_MEAN_MS = 0.1;
 const HIGH_OUTLIER_RATIO = 0.2;
+// Cap the rolling jitter window so it can't grow unbounded across a long suite;
+// `calculate_timing_jitter` only reads the last handful of entries anyway.
+const MAX_RECENT_TIMINGS = 50;
 
 // Warmup phase using harness with large content
 export const warmup_phase = async (
@@ -60,7 +63,8 @@ export const measurement_phase = async (
 	on_progress?: () => void,
 	should_stop?: () => boolean,
 ): Promise<MeasurementData> => {
-	const times_ms: Array<number> = [];
+	const work_ms: Array<number> = [];
+	const paint_ms: Array<number> = [];
 	const stability_checks = [];
 	const timestamps = [];
 
@@ -93,35 +97,46 @@ export const measurement_phase = async (
 		console.log(`[Measurement] Running iteration ${i + 1}...`);
 
 		try {
-			const elapsed = await harness.run_iteration(impl.component, props);
-
-			// Validate the timing
-			if (elapsed <= 0) {
-				console.warn(`[Measurement] Suspicious timing (${elapsed}ms) - marking as failed`);
-				times_ms.push(NaN);
+			const {work_ms: work, paint_ms: paint} = await harness.run_iteration(impl.component, props);
+
+			// Validate against the work time — the highlighter's compute cost — and
+			// keep the two series index-aligned (a failed iteration is NaN in both).
+			if (work <= 0) {
+				console.warn(`[Measurement] Suspicious timing (${work}ms) - marking as failed`);
+				work_ms.push(NaN);
+				paint_ms.push(NaN);
 				timestamps.push(Date.now());
-			} else if (elapsed < MIN_VALID_TIMING_MS) {
-				console.warn(
-					`[Measurement] Suspiciously fast timing (${elapsed}ms) - possible no-op render`,
-				);
-				times_ms.push(elapsed);
+			} else if (work < MIN_VALID_TIMING_MS) {
+				console.warn(`[Measurement] Suspiciously fast timing (${work}ms) - possible no-op render`);
+				work_ms.push(work);
+				paint_ms.push(paint);
 				timestamps.push(Date.now());
-				recent_timings.push(elapsed);
-			} else if (elapsed > MAX_VALID_TIMING_MS) {
-				console.warn(`[Measurement] Extremely slow timing (${elapsed}ms) - possible hang`);
-				times_ms.push(NaN);
+				recent_timings.push(work);
+			} else if (work > MAX_VALID_TIMING_MS) {
+				console.warn(`[Measurement] Extremely slow timing (${work}ms) - possible hang`);
+				work_ms.push(NaN);
+				paint_ms.push(NaN);
 				timestamps.push(Date.now());
 			} else {
-				console.log(`[Measurement] Iteration ${i + 1} complete: ${elapsed.toFixed(2)}ms`);
-				times_ms.push(elapsed);
+				console.log(
+					`[Measurement] Iteration ${i + 1} complete: ${work.toFixed(2)}ms work / ${paint.toFixed(2)}ms paint`,
+				);
+				work_ms.push(work);
+				paint_ms.push(paint);
 				timestamps.push(Date.now());
-				recent_timings.push(elapsed);
+				recent_timings.push(work);
+			}
+
+			// Bound the rolling jitter window (see `MAX_RECENT_TIMINGS`).
+			if (recent_timings.length > MAX_RECENT_TIMINGS) {
+				recent_timings.splice(0, recent_timings.length - MAX_RECENT_TIMINGS);
 			}
 		} catch (error) {
 			console.error(`[Measurement] Iteration ${i + 1} failed:`, error);
 			// Continue with next iteration instead of failing entire test
 			// Record a null/NaN to indicate failure
-			times_ms.push(NaN);
+			work_ms.push(NaN);
+			paint_ms.push(NaN);
 			timestamps.push(Date.now());
 		}
 
@@ -134,7 +149,7 @@ export const measurement_phase = async (
 		}
 	}
 
-	return {times_ms, stability_checks, timestamps};
+	return {work_ms, paint_ms, stability_checks, timestamps};
 };
 
 // Run complete benchmark suite
diff --git a/src/routes/benchmark/benchmark_stats.ts b/src/routes/benchmark/benchmark_stats.ts
index aeeccd79..f84574de 100644
--- a/src/routes/benchmark/benchmark_stats.ts
+++ b/src/routes/benchmark/benchmark_stats.ts
@@ -18,11 +18,11 @@ import type {
  * Converts millisecond timings to nanoseconds for fuz_util's BenchmarkStats.
  */
 export const analyze_results = (data: MeasurementData): BrowserBenchmarkStats => {
-	// Convert milliseconds to nanoseconds for BenchmarkStats
-	const timings_ns = data.times_ms.map((ms) => ms * TIME_NS_PER_MS);
-
-	// Create core stats using fuz_util
-	const core = new BenchmarkStats(timings_ns);
+	// Convert milliseconds to nanoseconds for BenchmarkStats. `core` is the work
+	// time (the highlighter's compute cost); `paint` adds the frames until pixels
+	// settle. Both series are index-aligned, so failed iterations drop out of each.
+	const core = new BenchmarkStats(data.work_ms.map((ms) => ms * TIME_NS_PER_MS));
+	const paint = new BenchmarkStats(data.paint_ms.map((ms) => ms * TIME_NS_PER_MS));
 
 	// Calculate browser-specific stability metrics
 	const unstable_count = data.stability_checks.filter((s) => !s.is_stable).length;
@@ -31,6 +31,7 @@ export const analyze_results = (data: MeasurementData): BrowserBenchmarkStats =>
 
 	return {
 		core,
+		paint,
 		stability_ratio,
 		unstable_iterations: unstable_count,
 	};
diff --git a/src/routes/benchmark/benchmark_types.ts b/src/routes/benchmark/benchmark_types.ts
index 2d690a49..a183496b 100644
--- a/src/routes/benchmark/benchmark_types.ts
+++ b/src/routes/benchmark/benchmark_types.ts
@@ -30,8 +30,21 @@ export interface StabilityCheck {
 	jitter: number;
 }
 
+/**
+ * One iteration's two timings, both measured from the same start (props set):
+ * `work_ms` ends when the highlight work is committed and laid out; `paint_ms`
+ * ends once the browser has settled pixels (adds ~1-2 animation frames).
+ */
+export interface IterationTiming {
+	work_ms: number;
+	paint_ms: number;
+}
+
 export interface MeasurementData {
-	times_ms: Array<number>;
+	/** Per-iteration work time — stylize + DOM commit + forced layout (ms). */
+	work_ms: Array<number>;
+	/** Per-iteration paint-settled time — work plus the frames until pixels update (ms). */
+	paint_ms: Array<number>;
 	stability_checks: Array<StabilityCheck>;
 	timestamps: Array<number>;
 }
@@ -41,8 +54,10 @@ export interface MeasurementData {
  * Uses milliseconds for display (mean_ms, median_ms, etc.) while storing nanoseconds internally.
  */
 export interface BrowserBenchmarkStats {
-	/** Core stats from fuz_util (in nanoseconds) */
+	/** Work-time stats — stylize + DOM commit, the highlighter's compute cost (in nanoseconds). */
 	core: FuzBenchmarkStats;
+	/** Paint-settled stats — work plus the frames until pixels update (in nanoseconds). */
+	paint: FuzBenchmarkStats;
 	/** Browser-specific: ratio of stable iterations (0-1) */
 	stability_ratio: number;
 	/** Browser-specific: count of unstable iterations */
@@ -72,7 +87,7 @@ export interface BenchmarkHarnessController {
 	run_iteration: (
 		component: Component<BenchmarkComponentProps>,
 		props: BenchmarkComponentProps,
-	) => Promise<number>;
+	) => Promise<IterationTiming>;
 	cleanup: () => Promise<void>;
 }
 
diff --git a/src/routes/docs/benchmark/+page.svelte b/src/routes/docs/benchmark/+page.svelte
index 6a605e16..49f0f20b 100644
--- a/src/routes/docs/benchmark/+page.svelte
+++ b/src/routes/docs/benchmark/+page.svelte
@@ -1,16 +1,265 @@
 <script lang="ts">
+	import {resolve} from '$app/paths';
 	import TomeContent from '@fuzdev/fuz_ui/TomeContent.svelte';
+	import TomeSection from '@fuzdev/fuz_ui/TomeSection.svelte';
+	import TomeSectionHeader from '@fuzdev/fuz_ui/TomeSectionHeader.svelte';
+	import TomeLink from '@fuzdev/fuz_ui/TomeLink.svelte';
+	import DeclarationLink from '@fuzdev/fuz_ui/DeclarationLink.svelte';
+	import ModuleLink from '@fuzdev/fuz_ui/ModuleLink.svelte';
 	import {tome_get_by_slug} from '@fuzdev/fuz_ui/tome.ts';
-	import {resolve} from '$app/paths';
 
-	const tome = tome_get_by_slug('benchmark');
+	const TOME_SLUG = 'benchmark';
+	const tome = tome_get_by_slug(TOME_SLUG);
+
+	const RESULTS_URL = 'https://github.com/fuzdev/fuz_code/blob/main/benchmark/compare/results.md';
+
+	// representative end-to-end `stylize` speedups on larger (100×) inputs, rounded
+	// from the committed comparison results and measured against the faster of
+	// Shiki's two engines (the conservative choice) — see `RESULTS_URL` for the
+	// full per-engine, per-size matrix
+	const speedups: Array<{lang: string; vs_prism: string; vs_shiki: string}> = [
+		{lang: 'ts', vs_prism: '~18×', vs_shiki: '~140×'},
+		{lang: 'css', vs_prism: '~8×', vs_shiki: '~90×'},
+		{lang: 'html', vs_prism: '~11×', vs_shiki: '~80×'},
+		{lang: 'json', vs_prism: '~17×', vs_shiki: '~95×'},
+		{lang: 'svelte', vs_prism: '~14×', vs_shiki: '~165×'},
+	];
+
+	// work time in ms (stylize + DOM commit) per language for each renderer, rounded
+	// from one interactive-benchmark run on a single machine — illustrative, not a
+	// spec; run the tool for numbers on your own hardware
+	const browser_results: Array<{lang: string; html: number; ranges: number}> = [
+		{lang: 'ts', html: 91, ranges: 12},
+		{lang: 'css', html: 11, ranges: 3},
+		{lang: 'html', html: 28, ranges: 4},
+		{lang: 'json', html: 11, ranges: 2},
+		{lang: 'svelte', html: 91, ranges: 13},
+		{lang: 'md', html: 69, ranges: 10},
+		{lang: 'sh', html: 49, ranges: 8},
+	];
+	// bars scale to the slowest single result so lengths compare across languages
+	const browser_max = Math.max(...browser_results.flatMap((r) => [r.html, r.ranges]));
 </script>
 
 <TomeContent {tome}>
 	<section>
-		<p>Performance benchmarking for testing syntax highlighting across all supported languages:</p>
 		<p>
-			<a href={resolve('/benchmark')} class="chip color_d font_size_lg">run benchmark</a>
+			fuz_code is optimized for runtime highlighting, including streaming usecases. It runs one
+			hand-written single-pass lexer per language without regular expressions, emitting a flat token
+			event stream that renders to HTML in one forward pass. There is no grammar interpreter and no
+			backtracking, so highlighting cost stays linear in the length of the input, including partial
+			or malformed source.
 		</p>
 	</section>
+	<TomeSection>
+		<TomeSectionHeader text="Compared to Shiki and Prism" />
+		<p>
+			The cross-implementation benchmark measures fuz_code against
+			<a href="https://github.com/PrismJS/prism">Prism</a> and
+			<a href="https://github.com/shikijs/shiki">Shiki</a>
+			(both its <a href="https://shiki.matsu.io/guide/regex-engines">Oniguruma regexp engine</a> and its
+			reimplementation in JS). Shiki targets build-time use and works with TextMate grammars, trading
+			runtime speed for capability and compatibility with its large ecosystem of grammars and themes.
+			fuz_code trades that coverage for an efficient runtime path (and also provides tools for pre-compilation),
+			where you can bring your own lexers for languages it doesn't support.
+		</p>
+		<p>
+			For end-to-end <code>stylize</code> calls turning a string of code into a string of stylized HTML,
+			fuz_code is about an order of magnitude faster than Prism and about two orders of magnitude faster
+			than Shiki:
+		</p>
+		<div class="overflow-x:auto">
+			<table>
+				<thead>
+					<tr>
+						<th>language</th>
+						<th>fuz_code vs Prism</th>
+						<th>fuz_code vs Shiki</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each speedups as { lang, vs_prism, vs_shiki } (lang)}
+						<tr>
+							<td><code>{lang}</code></td>
+							<td>{vs_prism}</td>
+							<td>{vs_shiki}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+		<p>
+			<small
+				>Representative <code>stylize</code> results on larger inputs from one machine; absolute
+				numbers vary by hardware. See the
+				<a href={RESULTS_URL}>committed comparison results</a> for the full matrix across engines and
+				sizes, plus tokenize-only rows that compare the raw lexers without HTML generation.</small
+			>
+		</p>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="In the browser" />
+		<p>
+			The <a href={resolve('/benchmark')}>interactive benchmark ⚡</a> runs in your browser,
+			measuring real DOM rendering rather than pure compute. It times fuz_code's two renderers — the
+			standard HTML path (<DeclarationLink name="Code" />) and the experimental CSS Custom Highlight
+			API path (<DeclarationLink name="CodeHighlight" />, ranges) — across every supported language,
+			reporting mean, median, percentiles, coefficient of variation, and throughput, with
+			system-stability gating between samples.
+		</p>
+		<p>
+			Set the iteration count, warmup runs, cooldown, and content multiplier, then run it on your
+			own hardware. For the steadiest numbers, launch Chromium with garbage collection exposed (<code
+				>chromium --js-flags="--expose-gc"</code
+			>) so the harness can settle the heap between samples.
+		</p>
+		<p>
+			A sample run of work time — stylize plus DOM commit — per language for each renderer. The
+			default <DeclarationLink name="Code" /> path builds a <code>.token_*</code> span per token;
+			the experimental <DeclarationLink name="CodeHighlight" /> path skips that DOM, so it commits less:
+		</p>
+		<div class="perf-legend">
+			<span><span class="perf-swatch perf-html"></span> <code>Code</code> (html)</span>
+			<span><span class="perf-swatch perf-ranges"></span> <code>CodeHighlight</code> (ranges)</span>
+		</div>
+		<div class="perf-bars">
+			{#each browser_results as { lang, html, ranges } (lang)}
+				<div class="perf-lang"><code>{lang}</code></div>
+				<div class="perf-set">
+					<div class="perf-row">
+						<div class="perf-track">
+							<div class="perf-fill perf-html" style:width="{(html / browser_max) * 100}%"></div>
+						</div>
+						<span class="perf-num">{html}<span class="unit"> ms</span></span>
+					</div>
+					<div class="perf-row">
+						<div class="perf-track">
+							<div
+								class="perf-fill perf-ranges"
+								style:width="{(ranges / browser_max) * 100}%"
+							></div>
+						</div>
+						<span class="perf-num">{ranges}<span class="unit"> ms</span></span>
+					</div>
+				</div>
+			{/each}
+		</div>
+		<p>
+			<small
+				>Lower is better. The benchmark uses complex samples at the tool's default size, so this is
+				illustrative, not representative of most inputs. The live tool also reports paint-settle
+				time, percentiles, and throughput.</small
+			>
+		</p>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="On your machine" />
+		<p>The command-line benchmarks run from a checkout of the repo:</p>
+		<ul>
+			<li>
+				<code>npm run benchmark</code> — the internal suite, timing every sample at normal and 100× sizes
+				against a local baseline for regression detection.
+			</li>
+			<li>
+				<code>npm run benchmark:vs</code> — the cross-implementation shootout against Prism and Shiki
+				that produces the comparison results above.
+			</li>
+		</ul>
+		<p>
+			The internal suite includes a <code>pathological</code> group of adversarial inputs (deeply nested
+			and degenerate source) that pins the lexer's worst-case behavior to linear time; the same generators
+			back the linearity tests. The engine keeps no resumable state, so it re-lexes the whole document
+			on every change rather than tokenizing incrementally — whole-document lexing is already sub-frame
+			at these speeds.
+		</p>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Why it's fast" />
+		<ul>
+			<li>
+				No regular expressions — char-code scanning, native <code>indexOf</code>, keyword maps.
+			</li>
+			<li>
+				One single-pass lexer per language emitting a flat <code>Int32Array</code> event stream, rendered
+				to HTML in a single forward pass.
+			</li>
+			<li>
+				Linear-time by construction — every scan loop advances, so there is no catastrophic
+				backtracking on adversarial input.
+			</li>
+			<li>No runtime dependencies — nothing heavier than the lexers ships to the browser.</li>
+		</ul>
+		<p>
+			The same entry points power all of it: <DeclarationLink name="syntax_styler_global" /> and the
+			<ModuleLink module_path="syntax_styler.ts">SyntaxStyler</ModuleLink> class expose
+			<code>lex</code>
+			(the flat event stream) and <code>stylize</code> (HTML). See the
+			<TomeLink slug="usage" /> for the API and the <TomeLink slug="samples" /> for output in every language.
+		</p>
+	</TomeSection>
 </TomeContent>
+
+<style>
+	.perf-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space_md);
+		margin-bottom: var(--space_md);
+		font-size: var(--font_size_sm);
+		color: var(--text_50);
+	}
+	.perf-swatch {
+		display: inline-block;
+		width: 0.8rem;
+		height: 0.8rem;
+		border-radius: var(--border_radius_xs);
+		vertical-align: middle;
+	}
+	.perf-bars {
+		display: grid;
+		grid-template-columns: 6rem 1fr;
+		align-items: center;
+		column-gap: var(--space_md);
+		row-gap: var(--space_md);
+		margin-bottom: var(--space_lg);
+	}
+	.perf-lang {
+		text-align: right;
+	}
+	.perf-set {
+		display: flex;
+		flex-direction: column;
+	}
+	.perf-row {
+		display: grid;
+		grid-template-columns: 1fr 3.5rem;
+		align-items: center;
+		gap: var(--space_sm);
+	}
+	.perf-track {
+		height: 0.4rem;
+		background: var(--fg_05);
+		border-radius: var(--border_radius_xs);
+		overflow: hidden;
+	}
+	.perf-fill {
+		height: 100%;
+		min-width: 2px;
+		border-radius: var(--border_radius_xs);
+		transition: width 0.3s ease;
+	}
+	.perf-html {
+		background: var(--color_j_50);
+	}
+	.perf-ranges {
+		background: var(--color_g_50);
+	}
+	.perf-num {
+		font-size: var(--font_size_sm);
+		text-align: right;
+		white-space: nowrap;
+	}
+	.unit {
+		color: var(--text_50);
+	}
+</style>
diff --git a/src/routes/docs/library/+page.svelte b/src/routes/docs/library/+page.svelte
deleted file mode 100644
index 18d71fe8..00000000
--- a/src/routes/docs/library/+page.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import LibraryDetail from '@fuzdev/fuz_ui/LibraryDetail.svelte';
-	import TomeContent from '@fuzdev/fuz_ui/TomeContent.svelte';
-	import {tome_get_by_slug} from '@fuzdev/fuz_ui/tome.ts';
-	import {library_context} from '@fuzdev/fuz_ui/library.svelte.ts';
-
-	const tome = tome_get_by_slug('library');
-
-	const get_library = library_context.get();
-	const library = $derived(get_library());
-</script>
-
-<TomeContent {tome}>
-	<section>
-		<LibraryDetail {library} />
-	</section>
-</TomeContent>
diff --git a/src/routes/docs/samples/+page.svelte b/src/routes/docs/samples/+page.svelte
index 1c2d0418..d6192c1f 100644
--- a/src/routes/docs/samples/+page.svelte
+++ b/src/routes/docs/samples/+page.svelte
@@ -1,23 +1,162 @@
 <script lang="ts">
+	// the Highlight API rules live in theme_highlight.css (not theme.css)
+	import '$lib/theme_highlight.css';
+
+	import {page} from '$app/state';
+	import {SvelteSet} from 'svelte/reactivity';
+	import {DOCS_PATH} from '@fuzdev/fuz_ui/docs_helpers.svelte.ts';
+	import {tome_get_by_slug} from '@fuzdev/fuz_ui/tome.ts';
 	import TomeContent from '@fuzdev/fuz_ui/TomeContent.svelte';
+	import TomeLink from '@fuzdev/fuz_ui/TomeLink.svelte';
 	import DeclarationLink from '@fuzdev/fuz_ui/DeclarationLink.svelte';
-	import {tome_get_by_slug} from '@fuzdev/fuz_ui/tome.ts';
-	import {resolve} from '$app/paths';
 
-	const tome = tome_get_by_slug('samples');
+	import Code from '$lib/Code.svelte';
+	import CodeHighlight from '$lib/CodeHighlight.svelte';
+	import {sample_langs} from '$lib/code_sample.ts';
+	import {samples} from '$routes/samples/all.ts';
+	import {lang_colors} from '$routes/lang_color.ts';
+
+	const TOME_SLUG = 'samples';
+	const tome = tome_get_by_slug(TOME_SLUG);
+
+	// `DocsContent` mounts every tome inline on the `/docs` index; render a stub
+	// there so the full interactive sample grid only renders on this route.
+	const at_root = $derived(page.url.pathname === DOCS_PATH);
+
+	// language filter — every language shown at first, toggle each off/on
+	const shown_langs = new SvelteSet<string>(sample_langs);
+	const toggle_lang = (lang: string): void => {
+		if (shown_langs.has(lang)) shown_langs.delete(lang);
+		else shown_langs.add(lang);
+	};
+
+	// `all` flips the whole row between every language and none
+	const all_shown = $derived(shown_langs.size === sample_langs.length);
+	const toggle_all = (): void => {
+		if (all_shown) shown_langs.clear();
+		else for (const lang of sample_langs) shown_langs.add(lang);
+	};
+
+	// renderer toggles — HTML (`Code`) on by default, the experimental CSS
+	// Custom Highlight API (`CodeHighlight` ranges) off by default; with both
+	// on, each sample renders side by side
+	let show_html = $state(true);
+	let show_highlight = $state(false);
+
+	// each renderer takes half the row when both show, otherwise the full width
+	const column_width = $derived(show_html && show_highlight ? '50%' : '100%');
+
+	const shown_samples = $derived(
+		Object.values(samples).filter((sample) => shown_langs.has(sample.lang)),
+	);
 </script>
 
 <TomeContent {tome}>
-	<section>
-		<p>
-			Here's some code samples in all supported languages, rendered with both <DeclarationLink
-				name="Code"
-			/>
-			(standard HTML mode) and <DeclarationLink name="CodeHighlight" /> (experimental CSS Custom Highlight
-			API):
-		</p>
-		<p>
-			<a href={resolve('/samples')} class="chip color_g font_size_lg">view samples</a>
-		</p>
-	</section>
+	{#if at_root}
+		<section>
+			<p>
+				Syntax-highlighted <TomeLink slug="samples" /> in every supported language, rendered with
+				<DeclarationLink name="Code" /> and the experimental <DeclarationLink
+					name="CodeHighlight"
+				/>.
+			</p>
+		</section>
+	{:else}
+		<section>
+			<p>
+				Code samples in every supported language. Filter by language and toggle the renderers:
+				<DeclarationLink name="Code" /> (standard HTML with <code>.token_*</code> classes) and the
+				experimental <DeclarationLink name="CodeHighlight" /> (CSS Custom Highlight API, ranges). With
+				both on, each sample renders side by side.
+			</p>
+
+			<div class="row gap_xs flex-wrap:wrap mb_md">
+				{#each sample_langs as lang (lang)}
+					<button
+						type="button"
+						class="sm deselectable {lang_colors[lang]}"
+						class:selected={shown_langs.has(lang)}
+						onclick={() => toggle_lang(lang)}
+					>
+						{lang}
+					</button>
+				{/each}
+				<button
+					type="button"
+					class="sm deselectable"
+					class:selected={all_shown}
+					onclick={toggle_all}
+				>
+					all
+				</button>
+			</div>
+
+			<div class="row gap_xs flex-wrap:wrap mb_lg">
+				<button
+					type="button"
+					class="deselectable"
+					class:selected={show_html}
+					onclick={() => (show_html = !show_html)}
+				>
+					html renderer
+				</button>
+				<button
+					type="button"
+					class="deselectable"
+					class:selected={show_highlight}
+					onclick={() => (show_highlight = !show_highlight)}
+				>
+					highlight renderer
+				</button>
+			</div>
+
+			{#if show_highlight}
+				<aside class="panel p_md mb_lg">
+					<p>
+						⚠️ <strong>Experimental:</strong> the <code>highlight</code> renderer uses the
+						<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API"
+							>CSS Custom Highlight API</a
+						>, which has limited browser support and can't apply layout-affecting styles like font
+						weight (<a href="https://github.com/w3c/csswg-drafts/issues/8355">csswg-drafts#8355</a
+						>). It requires <code>theme_highlight.css</code> instead of <code>theme.css</code>.
+					</p>
+				</aside>
+			{/if}
+
+			{#each shown_samples as sample (sample.name)}
+				<section class="box mb_xl3">
+					<h3 class="panel p_md mb_xs width:100% box">{sample.lang}</h3>
+					<div class="renderers">
+						{#if show_html}
+							<div style:width={column_width}>
+								<Code content={sample.content} lang={sample.lang} />
+							</div>
+						{/if}
+						{#if show_highlight}
+							<div style:width={column_width}>
+								<CodeHighlight content={sample.content} lang={sample.lang} mode="ranges" />
+							</div>
+						{/if}
+					</div>
+					{#if !show_html && !show_highlight}
+						<p class="color_e_50">Select a renderer above.</p>
+					{/if}
+				</section>
+			{/each}
+		</section>
+	{/if}
 </TomeContent>
+
+<style>
+	.renderers {
+		max-width: 100%;
+		display: flex;
+		gap: var(--space_md);
+		align-items: flex-start;
+	}
+	/* width is set inline (50% when both renderers show, else 100%); min-width:0
+	   lets the column shrink to that width so the code scrolls internally */
+	.renderers > div {
+		min-width: 0;
+	}
+</style>
diff --git a/src/routes/docs/textarea/+page.svelte b/src/routes/docs/textarea/+page.svelte
new file mode 100644
index 00000000..034cc5ac
--- /dev/null
+++ b/src/routes/docs/textarea/+page.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	// the Highlight API rules live in theme_highlight.css (not theme.css)
+	import '$lib/theme_highlight.css';
+
+	import {page} from '$app/state';
+	import {DOCS_PATH} from '@fuzdev/fuz_ui/docs_helpers.svelte.ts';
+	import {tome_get_by_slug} from '@fuzdev/fuz_ui/tome.ts';
+	import TomeContent from '@fuzdev/fuz_ui/TomeContent.svelte';
+	import TomeLink from '@fuzdev/fuz_ui/TomeLink.svelte';
+	import DeclarationLink from '@fuzdev/fuz_ui/DeclarationLink.svelte';
+
+	import {supports_css_highlight_api} from '$lib/highlight_manager.ts';
+	import CodeTextarea from '$lib/CodeTextarea.svelte';
+	import {sample_langs, type SampleLang} from '$lib/code_sample.ts';
+	import {samples} from '$routes/samples/all.ts';
+	import {lang_colors} from '$routes/lang_color.ts';
+
+	const TOME_SLUG = 'textarea';
+	const tome = tome_get_by_slug(TOME_SLUG);
+
+	// `DocsContent` mounts every tome inline on the `/docs` index; render a stub
+	// there so the live editor only mounts on this route.
+	const at_root = $derived(page.url.pathname === DOCS_PATH);
+
+	const supported = supports_css_highlight_api();
+
+	let lang: SampleLang = $state('ts');
+
+	const sample_for = (l: string): string =>
+		Object.values(samples).find((s) => s.lang === l)?.content ?? '';
+
+	let value = $state(sample_for('ts'));
+
+	const select_lang = (l: SampleLang): void => {
+		lang = l;
+		value = sample_for(l);
+	};
+</script>
+
+<TomeContent {tome}>
+	{#if at_root}
+		<section>
+			<p>
+				An experimental editable, live-highlighted <TomeLink slug="textarea" /> backed by
+				<DeclarationLink name="CodeTextarea" />.
+			</p>
+		</section>
+	{:else}
+		<section>
+			<p>
+				<DeclarationLink name="CodeTextarea" /> highlights an editable <code>&lt;textarea&gt;</code>
+				live using the
+				<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API"
+					>CSS Custom Highlight API</a
+				>. Type below to see it re-highlight. Requires <code>theme_highlight.css</code>.
+			</p>
+			{#if !supported}
+				<p class="color_e_50">
+					⚠️ This browser does not support the CSS Custom Highlight API — the textarea still works,
+					but text is shown without highlighting.
+				</p>
+			{/if}
+
+			<div class="row gap_xs flex-wrap:wrap mb_md">
+				{#each sample_langs as l (l)}
+					<button
+						type="button"
+						class="sm {lang_colors[l]}"
+						class:selected={l === lang}
+						onclick={() => select_lang(l)}
+					>
+						{l}
+					</button>
+				{/each}
+			</div>
+
+			<CodeTextarea bind:value {lang} />
+		</section>
+	{/if}
+</TomeContent>
+
+<style>
+	/* the editor defaults to fuz_css's 100px textarea height — give the demo room */
+	section :global(.code_textarea textarea) {
+		height: 600px;
+	}
+</style>
diff --git a/src/routes/docs/tomes.ts b/src/routes/docs/tomes.ts
index a138eecf..020fc484 100644
--- a/src/routes/docs/tomes.ts
+++ b/src/routes/docs/tomes.ts
@@ -1,16 +1,16 @@
 import type {Tome} from '@fuzdev/fuz_ui/tome.ts';
 import UsagePage from './usage/+page.svelte';
-import ApiPage from './api/+page.svelte';
-import LibraryPage from './library/+page.svelte';
 import SamplesPage from './samples/+page.svelte';
+import TextareaPage from './textarea/+page.svelte';
 import BenchmarkPage from './benchmark/+page.svelte';
+import ApiPage from './api/+page.svelte';
 
 export const tomes: Array<Tome> = [
 	{
 		slug: 'usage',
 		category: 'guide',
 		Component: UsagePage,
-		related_tomes: ['api', 'samples'],
+		related_tomes: ['samples', 'textarea', 'benchmark'],
 		related_modules: [
 			'syntax_styler.ts',
 			'syntax_styler_global.ts',
@@ -18,35 +18,35 @@ export const tomes: Array<Tome> = [
 		],
 		related_declarations: ['Code', 'SyntaxStyler', 'syntax_styler_global'],
 	},
-	{
-		slug: 'api',
-		category: 'reference',
-		Component: ApiPage,
-		related_tomes: ['usage'],
-		related_modules: [],
-		related_declarations: [],
-	},
-	{
-		slug: 'library',
-		category: 'reference',
-		Component: LibraryPage,
-		related_tomes: [],
-		related_modules: [],
-		related_declarations: [],
-	},
 	{
 		slug: 'samples',
 		category: 'explore',
 		Component: SamplesPage,
-		related_tomes: ['usage', 'benchmark'],
+		related_tomes: ['usage', 'textarea', 'benchmark'],
 		related_modules: [],
 		related_declarations: ['Code', 'CodeHighlight'],
 	},
+	{
+		slug: 'textarea',
+		category: 'explore',
+		Component: TextareaPage,
+		related_tomes: ['usage', 'samples'],
+		related_modules: [],
+		related_declarations: ['CodeTextarea', 'CodeHighlight'],
+	},
 	{
 		slug: 'benchmark',
 		category: 'explore',
 		Component: BenchmarkPage,
-		related_tomes: ['samples'],
+		related_tomes: ['usage', 'samples'],
+		related_modules: ['syntax_styler.ts', 'syntax_styler_global.ts'],
+		related_declarations: ['syntax_styler_global', 'SyntaxStyler', 'Code'],
+	},
+	{
+		slug: 'api',
+		category: 'reference',
+		Component: ApiPage,
+		related_tomes: ['usage'],
 		related_modules: [],
 		related_declarations: [],
 	},
diff --git a/src/routes/docs/usage/+page.svelte b/src/routes/docs/usage/+page.svelte
index f59ac1de..83bf7d7f 100644
--- a/src/routes/docs/usage/+page.svelte
+++ b/src/routes/docs/usage/+page.svelte
@@ -1,14 +1,194 @@
 <script lang="ts">
 	import TomeContent from '@fuzdev/fuz_ui/TomeContent.svelte';
+	import TomeLink from '@fuzdev/fuz_ui/TomeLink.svelte';
+	import ModuleLink from '@fuzdev/fuz_ui/ModuleLink.svelte';
+	import DeclarationLink from '@fuzdev/fuz_ui/DeclarationLink.svelte';
+	import TomeSection from '@fuzdev/fuz_ui/TomeSection.svelte';
+	import TomeSectionHeader from '@fuzdev/fuz_ui/TomeSectionHeader.svelte';
 	import {tome_get_by_slug} from '@fuzdev/fuz_ui/tome.ts';
 
-	import CodeTome from '$routes/CodeTome.svelte';
+	import Code from '$lib/Code.svelte';
+	import {syntax_styler_global} from '$lib/syntax_styler_global.ts';
 
-	const LIBRARY_ITEM_NAME = 'usage';
+	const TOME_SLUG = 'usage';
+	const tome = tome_get_by_slug(TOME_SLUG);
 
-	const tome = tome_get_by_slug(LIBRARY_ITEM_NAME);
+	const programmatic_example = `const x: number = 42;`;
+	const programmatic_result = syntax_styler_global.stylize(programmatic_example, 'ts');
 </script>
 
+<!-- eslint-disable svelte/no-useless-mustaches -->
+
 <TomeContent {tome}>
-	<CodeTome />
+	<section>
+		<p>
+			fuz_code highlights code with one hand-written lexer per language, generating HTML with
+			<code>.token_*</code> classes that a theme styles. The <DeclarationLink name="Code" /> Svelte component
+			is the typical entry point.
+		</p>
+		<p>To use it, import the default theme or your own:</p>
+		<Code
+			lang="ts"
+			content="// +layout.svelte
+import '@fuzdev/fuz_code/theme.css'; // add this"
+		/>
+		<p>then use <DeclarationLink name="Code" />:</p>
+		<Code
+			content={'<' +
+				`script>\n\t// Something.svelte\n\timport Code from '@fuzdev/fuz_code/Code.svelte';\n</script>\n\n<Code content="<header>hello world</header>" />`}
+		/>
+		<p>outputs:</p>
+		<Code content="<header>hello world</header>" />
+	</section>
+	<TomeSection>
+		<TomeSectionHeader text="Dependencies" />
+		<p>
+			By default fuz_code depends on <a href="https://css.fuz.dev">fuz_css</a> to provide
+			color-scheme-aware color variables. If you're not using it, import
+			<code>theme_variables.css</code> or bring your own:
+		</p>
+		<Code
+			lang="ts"
+			content="// +layout.svelte
+import '@fuzdev/fuz_code/theme.css';
+import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using fuz_css"
+		/>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Preprocessor" />
+		<p>
+			The <ModuleLink module_path="svelte_preprocess_fuz_code.ts"
+				>svelte_preprocess_fuz_code</ModuleLink
+			> preprocessor compiles static
+			<DeclarationLink name="Code" /> content at build time, replacing runtime syntax highlighting:
+		</p>
+		<Code
+			lang="ts"
+			content={`// svelte.config.js
+import {svelte_preprocess_fuz_code} from '@fuzdev/fuz_code/svelte_preprocess_fuz_code.js';
+
+export default {
+  preprocess: [
+    svelte_preprocess_fuz_code(),
+    vitePreprocess(),
+  ],
+};`}
+		/>
+		<p>
+			Static string <code>content</code> props are highlighted at build time and replaced with pre-rendered
+			HTML. Dynamic content is left unchanged for runtime highlighting.
+		</p>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Svelte support" />
+		<p>
+			<DeclarationLink name="Code" /> styles
+			<a href="https://svelte.dev/">Svelte</a>
+			by default, originally based on
+			<a href="https://github.com/pngwn/prism-svelte"><code>prism-svelte</code></a>
+			by <a href="https://github.com/pngwn">@pngwn</a> (<a href="https://pngwn.at/">pngwn.at</a>):
+		</p>
+		<Code content={'<Code content="<scr..." />'} />
+		<p>styled:</p>
+		<div>
+			<Code
+				content={'<' +
+					`script lang="ts">
+	import Card from '@fuzdev/fuz_ui/Card.svelte';
+	console.log('hello Card', Card);
+</script>
+
+<Card>
+	<div class="greeting">hi {friend}</div>
+</Card>`}
+			/>
+		</div>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="TypeScript support" />
+		<p>
+			<DeclarationLink name="Code" /> supports TypeScript with <code>lang="ts"</code>:
+		</p>
+		<Code content={`<Code lang="ts" content="export type A<T> = ('b' | 3) & T;" />`} />
+		<div>
+			<Code lang="ts" content={`export type A<T> = ('b' | 3) & T;`} />
+		</div>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Markdown support" />
+		<p>
+			<DeclarationLink name="Code" /> supports Markdown with <code>lang="md"</code>, and fenced
+			blocks for all languages:
+		</p>
+		<Code content={`<Code lang="md" content="# hello \`world\` ..." />`} />
+		<div>
+			<Code lang="md" content={`# hello \`world\`\n\n\`\`\`ts\n\tconst a = 1;\n\`\`\``} />
+		</div>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Disabling styling" />
+		<p>
+			Passing <code>lang={'{'}null}</code> disables syntax styling:
+		</p>
+		<Code content={'<Code lang={null} content="<aside>all is gray</aside>" />'} />
+		<Code lang={null} content={`<aside>all is gray</aside>`} />
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Layout" />
+		<p>
+			<DeclarationLink name="Code" /> is a block by default:
+		</p>
+		<div>ab<Code content="c" /></div>
+		<Code content={'<div>ab<Code content="c" /></div>'} />
+		<p>
+			It can be inlined with <Code inline content={`<Code inline content="..." />`} />
+		</p>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Programmatic usage" />
+		<p>
+			fuz_code can be used directly from TypeScript without Svelte. Import <DeclarationLink
+				name="syntax_styler_global"
+			/> for a pre-configured instance with all built-in languages:
+		</p>
+		<Code
+			lang="ts"
+			content={`import {syntax_styler_global} from '@fuzdev/fuz_code/syntax_styler_global.js';
+
+const html = syntax_styler_global.stylize('${programmatic_example}', 'ts');`}
+		/>
+		<p>returns HTML string:</p>
+		<Code content={programmatic_result} />
+		<p>then rendered with:</p>
+		<Code content={'<code data-lang="ts">{@html programmatic_result}</code>'} />
+		<p>we get:</p>
+		<p>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<code data-lang="ts">{@html programmatic_result}</code>
+		</p>
+		<p>
+			For a custom configuration, create your own <DeclarationLink name="SyntaxStyler" /> and register
+			only the languages you need:
+		</p>
+		<Code
+			lang="ts"
+			content={`import {SyntaxStyler} from '@fuzdev/fuz_code/syntax_styler.js';
+import {lexer_markup} from '@fuzdev/fuz_code/lexer_markup.js';
+import {lexer_css} from '@fuzdev/fuz_code/lexer_css.js';
+
+const styler = new SyntaxStyler();
+styler.add_lang(lexer_markup);
+styler.add_lang(lexer_css);
+
+const html = styler.stylize('<div class="example">hello</div>', 'html');`}
+		/>
+	</TomeSection>
+	<TomeSection>
+		<TomeSectionHeader text="Experimental highlighting API" />
+		<p>
+			fuz_code also has experimental support for the CSS Custom Highlight API with
+			<DeclarationLink name="CodeHighlight" /> — see the <TomeLink slug="samples" /> and
+			<TomeLink slug="textarea" />.
+		</p>
+	</TomeSection>
 </TomeContent>
diff --git a/src/routes/lang_color.ts b/src/routes/lang_color.ts
new file mode 100644
index 00000000..505dd40e
--- /dev/null
+++ b/src/routes/lang_color.ts
@@ -0,0 +1,15 @@
+import type {SampleLang} from '$lib/code_sample.ts';
+
+/**
+ * A `color_*` utility class per demo language, chosen to evoke each language's
+ * identity, for tinting the language buttons in the docs.
+ */
+export const lang_colors: Record<SampleLang, string> = {
+	json: 'color_e', // gold
+	css: 'color_d', // purple
+	ts: 'color_a', // blue
+	html: 'color_c', // red
+	svelte: 'color_h', // orange
+	md: 'color_f', // brown
+	sh: 'color_b', // green
+};
diff --git a/src/routes/samples/+page.svelte b/src/routes/samples/+page.svelte
deleted file mode 100644
index f4aa2c15..00000000
--- a/src/routes/samples/+page.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-	import '$lib/theme_highlight.css';
-
-	import Breadcrumb from '@fuzdev/fuz_ui/Breadcrumb.svelte';
-	import DeclarationLink from '@fuzdev/fuz_ui/DeclarationLink.svelte';
-	import {Library, library_context} from '@fuzdev/fuz_ui/library.svelte.ts';
-
-	import Code from '$lib/Code.svelte';
-	import CodeHighlight from '$lib/CodeHighlight.svelte';
-	import {samples} from './all.ts';
-	import Footer from '$routes/Footer.svelte';
-	import {library_json} from '$routes/library.ts';
-
-	// `/samples` renders `DeclarationLink`s, so it provides its own `library_context`
-	// (this page loads the heavy analyzed `modules`; the landing deliberately doesn't).
-	const library = new Library(library_json);
-	library_context.set(() => library);
-</script>
-
-<main class="width_atmost_lg mx_auto py_xl5">
-	<header class="box">
-		<Breadcrumb />
-	</header>
-
-	<section class="mb_xl5">
-		<h2 class="text-align:center">HTML rendering (default)</h2>
-		<aside
-			class="panel p_md mb_xl3 width_atmost_md mx_auto
-		"
-		>
-			<p>
-				These samples use the normal <DeclarationLink name="Code" /> component, which renders using HTML.
-				See
-				<a href="#experimental">below</a> for the experimental <DeclarationLink
-					name="CodeHighlight"
-				/> that uses the Highlight API.
-			</p>
-		</aside>
-		{#each Object.values(samples) as sample (sample.name)}
-			<div class="box mb_xl3">
-				<h3 class="panel p_md mb_xs width:100% box">{sample.lang}</h3>
-				<Code content={sample.content} lang={sample.lang} />
-			</div>
-		{/each}
-	</section>
-
-	<hr class="my_xl5" />
-
-	<section id="experimental">
-		<h2 class="text-align:center">CSS Custom Highlight API (experimental)</h2>
-		<aside
-			class="panel p_md mb_xl3 width_atmost_md mx_auto
-		"
-		>
-			<p>
-				⚠️ <strong>Experimental:</strong> the comparison below uses
-				<DeclarationLink name="CodeHighlight" /> instead of <DeclarationLink name="Code" />
-				with both HTML mode and
-				<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API"
-					>CSS Custom Highlight API</a
-				>.
-			</p>
-			<p>
-				A limitation: layout-affecting styles like font weight do not work, even for monospaced
-				fonts:
-				<a href="https://github.com/w3c/csswg-drafts/issues/8355"
-					>github.com/w3c/csswg-drafts/issues/8355</a
-				>
-			</p>
-			<p>
-				The Highlight API has limited browser support as of October 2025 and is not recommended for
-				production use yet. Note <code>theme_highlight.css</code> is required instead of
-				<code>theme.css</code>.
-			</p>
-		</aside>
-		{#each Object.values(samples) as sample (sample.name)}
-			<section>
-				<h2 class="panel p_md mb_0 box">{sample.lang}</h2>
-				<div class="display:flex justify-content:center flex-wrap:wrap gap_sm py_xl5">
-					<div class="constrain-width">
-						<h3>{sample.lang} html strings</h3>
-						<CodeHighlight content={sample.content} lang={sample.lang} mode="html" />
-					</div>
-					<div class="constrain-width">
-						<h3>{sample.lang} highlighted ranges</h3>
-						<CodeHighlight content={sample.content} lang={sample.lang} mode="ranges" />
-					</div>
-				</div>
-			</section>
-			<hr />
-		{/each}
-	</section>
-
-	<Footer />
-</main>
diff --git a/src/routes/samples/all.gen.ts b/src/routes/samples/all.gen.ts
index 6a640a32..f2e1cc2a 100644
--- a/src/routes/samples/all.gen.ts
+++ b/src/routes/samples/all.gen.ts
@@ -9,7 +9,7 @@ import {sample_langs} from '$lib/code_sample.ts';
 export const gen: Gen = async ({origin_path}) => {
 	// Discover all sample files dynamically
 	const sample_files = await fs_search('src/test/fixtures/samples', {
-		file_filter: (path) => /sample_[^/]+\.(ts|css|html|json|svelte|md|bash)$/.test(path),
+		file_filter: (path) => /sample_[^/]+\.(ts|css|html|json|svelte|md|sh)$/.test(path),
 	});
 
 	// Create flat structure with lang_variant keys
diff --git a/src/routes/samples/all.ts b/src/routes/samples/all.ts
index f2994874..2853a57a 100644
--- a/src/routes/samples/all.ts
+++ b/src/routes/samples/all.ts
@@ -9,7 +9,7 @@ export type SampleKey =
 	| 'html_complex'
 	| 'svelte_complex'
 	| 'md_complex'
-	| 'bash_complex';
+	| 'sh_complex';
 
 export const samples: Record<SampleKey, CodeSample> = {
 	json_complex: {
@@ -670,9 +670,9 @@ const example = 'embedded code';
 </div>
 `,
 	},
-	bash_complex: {
-		name: 'bash_complex',
-		lang: 'bash',
+	sh_complex: {
+		name: 'sh_complex',
+		lang: 'sh',
 		content: `#!/bin/bash
 
 # This is a comment
diff --git a/src/routes/style.css b/src/routes/style.css
deleted file mode 100644
index b85e234d..00000000
--- a/src/routes/style.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* TODO upstream to fuz_css? */
-.constrain-width {
-	min-width: 0;
-	max-width: 100%;
-}
diff --git a/src/routes/textarea/+page.svelte b/src/routes/textarea/+page.svelte
deleted file mode 100644
index 18c1dfa3..00000000
--- a/src/routes/textarea/+page.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	// the Highlight API rules live in theme_highlight.css (not theme.css)
-	import '$lib/theme_highlight.css';
-
-	import Breadcrumb from '@fuzdev/fuz_ui/Breadcrumb.svelte';
-	import {supports_css_highlight_api} from '$lib/highlight_manager.ts';
-	import CodeTextarea from '$lib/CodeTextarea.svelte';
-	import {sample_langs, type SampleLang} from '$lib/code_sample.ts';
-	import {samples} from '$routes/samples/all.ts';
-	import Footer from '$routes/Footer.svelte';
-
-	const supported = supports_css_highlight_api();
-
-	let lang: SampleLang = $state('ts');
-
-	const sample_for = (l: string): string =>
-		Object.values(samples).find((s) => s.lang === l)?.content ?? '';
-
-	let value = $state(sample_for('ts'));
-
-	const select_lang = (l: SampleLang): void => {
-		lang = l;
-		value = sample_for(l);
-	};
-</script>
-
-<main class="width_atmost_md mx_auto py_xl5">
-	<header class="box">
-		<Breadcrumb />
-	</header>
-
-	<section class="mb_xl3">
-		<h2 class="text-align:center">Editable highlighted textarea (experimental)</h2>
-		<aside class="panel p_md mb_lg">
-			<p>
-				<code>CodeTextarea</code> highlights an editable <code>&lt;textarea&gt;</code> live using
-				the
-				<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API"
-					>CSS Custom Highlight API</a
-				>. Type below to see it re-highlight. Requires <code>theme_highlight.css</code>.
-			</p>
-			{#if !supported}
-				<p class="color_e_50">
-					⚠️ This browser does not support the CSS Custom Highlight API — the textarea still works,
-					but text is shown without highlighting.
-				</p>
-			{/if}
-		</aside>
-
-		<div class="row gap_xs mb_md flex-wrap:wrap">
-			{#each sample_langs as l (l)}
-				<button type="button" class:selected={l === lang} onclick={() => select_lang(l)}>
-					{l}
-				</button>
-			{/each}
-		</div>
-
-		<CodeTextarea bind:value {lang} />
-	</section>
-
-	<Footer />
-</main>
-
-<style>
-	/* the editor defaults to fuz_css's 100px textarea height — give the demo room */
-	section :global(.code_textarea textarea) {
-		height: 600px;
-	}
-</style>
diff --git a/src/test/fixtures/check.test.ts b/src/test/fixtures/check.test.ts
index 2f89a578..c378a1be 100644
--- a/src/test/fixtures/check.test.ts
+++ b/src/test/fixtures/check.test.ts
@@ -4,16 +4,9 @@ import {discover_samples, process_sample, get_fixture_path} from './helpers.ts';
 import {sample_langs} from '$lib/code_sample.ts';
 
 /**
- * Test Architecture Overview
- * =========================
- *
- * This test suite verifies that our syntax highlighters produce consistent,
- * correct output by comparing runtime behavior against generated fixtures.
- *
- * Tests generated fixture files to ensure:
- * - HTML rendering matches generated fixtures
- * - Token ranges are properly nested (no invalid overlaps)
- * - All expected tokens are present
+ * Verifies runtime lexer output against the generated fixtures: HTML
+ * rendering matches, token ranges nest without invalid overlaps, and all
+ * expected tokens are present.
  */
 
 describe('generated fixtures match runtime', async () => {
diff --git a/src/test/fixtures/generated/bash/bash_complex.html b/src/test/fixtures/generated/sh/sh_complex.html
similarity index 100%
rename from src/test/fixtures/generated/bash/bash_complex.html
rename to src/test/fixtures/generated/sh/sh_complex.html
diff --git a/src/test/fixtures/generated/bash/bash_complex.txt b/src/test/fixtures/generated/sh/sh_complex.txt
similarity index 100%
rename from src/test/fixtures/generated/bash/bash_complex.txt
rename to src/test/fixtures/generated/sh/sh_complex.txt
diff --git a/src/test/fixtures/helpers.ts b/src/test/fixtures/helpers.ts
index d3fa04b2..65f5904c 100644
--- a/src/test/fixtures/helpers.ts
+++ b/src/test/fixtures/helpers.ts
@@ -22,7 +22,7 @@ export interface GeneratedOutput {
  */
 export const discover_samples = async (): Promise<Array<SampleSpec>> => {
 	const sample_files = await fs_search('src/test/fixtures/samples', {
-		file_filter: (path) => /sample_[^/]+\.(ts|css|html|json|svelte|md|bash)$/.test(path),
+		file_filter: (path) => /sample_[^/]+\.(ts|css|html|json|svelte|md|sh)$/.test(path),
 	});
 
 	const samples: Array<SampleSpec> = [];
diff --git a/src/test/fixtures/samples/sample_complex.bash b/src/test/fixtures/samples/sample_complex.sh
similarity index 100%
rename from src/test/fixtures/samples/sample_complex.bash
rename to src/test/fixtures/samples/sample_complex.sh
diff --git a/src/test/lexer_bash.test.ts b/src/test/lexer_bash.test.ts
index 45c80edb..764f6397 100644
--- a/src/test/lexer_bash.test.ts
+++ b/src/test/lexer_bash.test.ts
@@ -293,7 +293,7 @@ describe('lexer_bash comments', () => {
 });
 
 describe('lexer_bash sample', () => {
-	const content = readFileSync('src/test/fixtures/samples/sample_complex.bash', 'utf8');
+	const content = readFileSync('src/test/fixtures/samples/sample_complex.sh', 'utf8');
 
 	test('sample lexes with valid invariants', () => {
 		const lexed = syntax_styler_global.lex(content, 'bash');
diff --git a/src/test/pathological.ts b/src/test/pathological.ts
index 840a27ce..583f3991 100644
--- a/src/test/pathological.ts
+++ b/src/test/pathological.ts
@@ -195,7 +195,7 @@ export const PATHOLOGICAL_CASES: Array<PathologicalCase> = [
 	{
 		// command substitutions NESTING_DEPTH deep
 		name: 'bash_deep_command_sub',
-		lang: 'bash',
+		lang: 'sh',
 		generate: (size) =>
 			repeat_to_size(
 				'echo $('.repeat(NESTING_DEPTH) + 'ls' + ')'.repeat(NESTING_DEPTH) + '\n',
@@ -215,7 +215,7 @@ export const PATHOLOGICAL_CASES: Array<PathologicalCase> = [
 	{
 		// one command-substitution nest as deep as the input allows
 		name: 'bash_cmdsub_full_depth',
-		lang: 'bash',
+		lang: 'sh',
 		generate: (size: number): string => {
 			const depth = Math.max(1, Math.floor(size / 3));
 			return '$('.repeat(depth) + 'x' + ')'.repeat(depth);
@@ -227,7 +227,7 @@ export const PATHOLOGICAL_CASES: Array<PathologicalCase> = [
 		// delimiter must be discovered in the same forward pass (a per-heredoc
 		// close-prescan would be O(depth²), the bug this case guards against)
 		name: 'bash_heredoc_sub_full_depth',
-		lang: 'bash',
+		lang: 'sh',
 		generate: (size: number): string => {
 			const depth = Math.max(1, Math.floor(size / 12));
 			return '$(cat <<EOF\n'.repeat(depth) + 'x';
@@ -237,7 +237,7 @@ export const PATHOLOGICAL_CASES: Array<PathologicalCase> = [
 		// many sequential heredocs with expanded, substitution-bearing bodies —
 		// exercises the line-walk close scan and the suspend/resume drain at scale
 		name: 'bash_heredoc_dense',
-		lang: 'bash',
+		lang: 'sh',
 		generate: (size) => repeat_to_size('cat <<EOF\nx $y $(z)\nEOF\n', size),
 	},
 	{