OmniStepBench project page

.gitattributes

@@ -0,0 +1,63 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.avro filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.lz4 filter=lfs diff=lfs merge=lfs -text
+*.mds filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+# Audio files - uncompressed
+*.pcm filter=lfs diff=lfs merge=lfs -text
+*.sam filter=lfs diff=lfs merge=lfs -text
+*.raw filter=lfs diff=lfs merge=lfs -text
+# Audio files - compressed
+*.aac filter=lfs diff=lfs merge=lfs -text
+*.flac filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.ogg filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+# Image files - uncompressed
+*.bmp filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.tiff filter=lfs diff=lfs merge=lfs -text
+# Image files - compressed
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+# Video files - compressed
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.webm filter=lfs diff=lfs merge=lfs -text
+# Web fonts and documents
+*.woff2 filter=lfs diff=lfs merge=lfs -text
+*.pdf filter=lfs diff=lfs merge=lfs -text

DEPLOY.md

@@ -0,0 +1,117 @@
+# OmniStepBench project page
+
+The official project page for **OmniStepBench: Deployment-Aware Agent Evaluation across Modalities and Task Complexity**
+(arXiv [2609.06059](https://arxiv.org/abs/2609.06059), code [SeerRay-Lab/OmniStepBench](https://github.com/SeerRay-Lab/OmniStepBench)).
+
+It is a static site: HTML, CSS and plain JavaScript, with no build step, no framework and no network
+dependencies. Fonts are bundled, so the page renders fully offline (and from mainland China).
+
+This folder is the Hugging Face Space [SeerRay-Lab/OmniStepBench](https://huggingface.co/spaces/SeerRay-Lab/OmniStepBench), a mirror of the project page at https://seerray-lab.github.io/OmniStepBench/. It is
+generated from the page's source folder
+`homepage/site/` by `huggingface/_build/build_space.py`; this file is that folder's `README.md`, renamed so that it
+does not replace the Space card. Paths such as `../tools/` below are relative to `homepage/site/`.
+
+## Preview
+
+- Open `index.html` directly in a browser. It works over `file://`: scripts are classic `<script src>`
+  tags, data comes from a global (`window.OSB`) rather than `fetch()`, and there are no ES-module imports.
+- Or serve the folder: `python3 -m http.server 8000` in this directory, then open http://localhost:8000.
+
+## Deploy
+
+This folder is deployed as a Hugging Face **static Space**: [SeerRay-Lab/OmniStepBench](https://huggingface.co/spaces/SeerRay-Lab/OmniStepBench). Hugging Face serves the files
+at https://seerray-lab-omnistepbench.static.hf.space/ and shows that page inside the Space. The Space already exists, so
+upload the whole folder as the Space repo root, e.g. from this folder:
+`hf upload SeerRay-Lab/OmniStepBench . . --repo-type space --delete "*"` (`--delete` removes files the rebuilt site no longer has),
+or `git push` to the Space repo. Nothing here needs a build step.
+
+What differs from the source folder `homepage/site/` (all applied by `build_space.py`; do not edit this folder by
+hand: change the source or the script and rebuild):
+
+- `README.md` is the Space card: its YAML front matter holds the Space settings (`sdk: static`,
+  `app_file: index.html`, title, emoji, colours, tags, linked dataset).
+- `.gitattributes` stores images, fonts and other binaries with Git LFS (the Hub rejects binaries committed as
+  plain Git objects).
+- `index.html`: the social preview images (`og:image`, `twitter:image`) are absolute
+  (https://seerray-lab-omnistepbench.static.hf.space/assets/img/social-card.png) and `<link rel="canonical">` points to the primary homepage (https://seerray-lab.github.io/OmniStepBench/), since the Space is a mirror. (The Hugging Face dataset links in
+  the hero, cite and footer rows are part of the source page itself.)
+- Hugging Face embeds the page in a sandboxed frame that cannot navigate the whole window, and sites such as
+  GitHub refuse to be framed, so a small script in `index.html` opens links to other sites in a new tab, only
+  while the page is framed.
+- `_shots/` (review screenshots) is left out.
+
+The same files also work on any other static host (GitHub Pages, Netlify, an nginx folder, ...). There, change the
+absolute `og:image` / `twitter:image` URLs and the canonical URL in `index.html` to the new address; crawlers
+ignore relative image URLs.
+
+## Layout
+
+```
+index.html                  page skeleton (no data digits in static text), SVG sprite and mascot inline
+assets/data/data.js         window.OSB: every number, name and paper text shown on the page
+assets/js/util.js           helpers: DOM builder, tooltips, radiogroups, roving focus, copy, lightbox
+assets/js/content.js        hero, motivation, overview, findings, case study, cite, footer
+assets/js/workloads.js      2x3 workload matrix, source benchmarks, task explorer
+assets/js/leaderboard.js    Table 1 leaderboard (Full / Text track, API / Local filter, sorting)
+assets/js/cost.js           Fig. 1 accuracy-cost scatter and the tokens-vs-dollars chart (Table 2)
+assets/js/reliability.js    evidence-based audit, hallucination patterns (Table 3), Figs. 5-6, taxonomy
+assets/js/quickstart.js     README quick start, tools used in the paper, task-file anatomy
+assets/js/main.js           boot: each section renders inside its own try/catch
+assets/css/palette.css      validated color tokens (data colors, surfaces, status)
+assets/css/style.css        the "underwater storybook" skin and all components
+assets/fonts/               self-hosted woff2 (SIL OFL 1.1, licenses in licenses/)
+assets/img/                 paper figures, task images (img/examples/), favicon.svg, social-card.png
+```
+
+## Updating numbers
+
+**All numbers come from `assets/data/data.js`. The paper is the single source of truth.**
+
+1. Edit `assets/data/data.js` (or regenerate it with the data builder and copy it here). The comment
+   header at the top documents every key. Keep `data.js` a plain `window.OSB = {...};` assignment.
+2. Do not type numbers into `index.html` or the JS modules. Charts, tables, tiles and prose read their
+   values from `window.OSB`; derived values (for example an Overall accuracy the paper does not tabulate)
+   use the paper's own definition and are labelled as derived on the page. Overall = the paper's prose value
+   where it states one, otherwise (162 × Table 1 Text Avg + 71 × MM Avg) / 233 (Eq. 11); this form reproduces
+   all 9 prose-stated Overalls. The round-1 QA patch that sets this (and withholds the task-file rubric) is
+   `homepage/tools/data_build/patch_data_r1.py`; the round-2 patch `homepage/tools/data_build/patch_data_r2.py`
+   keeps the example tasks disjoint from the tasks shown in the paper figures on the page (Fig. 3 =
+   `task_agentvista_00`, Fig. 5 = `task_simplevqa_07`, Fig. 6 = `task_tablebench_10`, whose answers those
+   figures show). The data builder re-applies both after every build. An English rendering of a Chinese
+   prompt that the paper does not give is stored as `englishTranslation` and labelled "our translation"
+   (`englishGloss` is reserved for wording quoted from the paper).
+3. Paper-vs-code mismatches go into `discrepancies` in `data.js`. That list is never displayed.
+4. Re-run the checks below.
+
+Figures referenced by `data.js` (for example `img/overview.png`) resolve under `assets/`.
+
+## Checks
+
+The review tools live next to this folder, in `../tools/` (Node + Playwright Chromium; they are not part of
+the deploy):
+
+| Command | What it checks |
+|---|---|
+| `node ../tools/smoke.cjs` | 101 interaction checks: leaderboard tracks/filters/sorting/medals and the compact (overflowing) layout, workload matrix, table views, scatter and keyboard navigation, keyboard tooltips, focus rings, accessible names, lightbox, copy buttons, mobile menu (incl. focus leaving it), the Pause animations button, reduced motion, no horizontal overflow at 360–1920 px, zero console errors; round-2 regressions (no example task shown in an on-page figure, slim phone leaderboard, focused sort buttons never hidden under the sticky column, text-only notice inside the visible table, sources table scrolls in its card); round-3 regressions (every chart table view on a 390 px phone is a named, focusable region with its caption outside the scroller, a swipe hint while it overflows and arrow-key scrolling to the last column; a pixel diff shows the hero kelp never paints over hero text at 1024–1280 px, at rest or at either end of its sway) |
+| `node ../tools/numbers.cjs` | static HTML has no digits in visible text; every number rendered on the page traces back to `data.js` |
+| `node ../tools/labels.cjs` | scatter: every point is named or numbered (numbers are keyed under the chart) at every width; no label/label, label/point or label/tick overlaps; every name or number sits closer to its own dot than to any other, and a name next to its dot never runs over another dot that is nearer its centre |
+| `node ../tools/audit.cjs` | real `file://` policy: fonts load, no external requests, WCAG AA text contrast, focus indicators, headings, landmarks, page weight |
+| `node ../tools/shoot.cjs <dir> --full` | desktop (1440) and mobile (390) section screenshots, plus a full-page capture |
+| `python3 ../tools/make-social-card.py` | rebuilds `assets/img/social-card.png` (1200x630) from the page's own art and data |
+
+## Browser support and accessibility notes
+
+- Tested in Chromium (desktop and mobile widths, real `file://` policy). Fonts load from `assets/fonts/fonts.css`.
+  Firefox gives every `file://` page its own origin and may refuse web fonts loaded from files, so a small
+  inline script in `<head>` switches to `assets/fonts/fonts.inline.css` (the same fonts as data URIs) only
+  when the page is opened from disk in Firefox. Served over http(s), every browser uses the woff2 files.
+- Light theme only. Every chart has a hover and keyboard-focus tooltip and a table view; charts use one
+  Tab stop with arrow-key navigation (the leaderboard is a real table: its cell tooltips repeat what the
+  headers, crowns, ◆ marks and footnotes already show). All ambient motion stops under
+  `prefers-reduced-motion`, pauses when off screen, and can be paused with the "Pause animations" button in
+  the hero (remembered in localStorage).
+
+## Credits
+
+Illustrations (the lobster evaluator and the sea creatures) are original SVG art made for this page.
+Figures 1, 2, 3, 5 and 6 are reproduced from the paper (Fig. 4 and the appendix case images are not used on the page). The page acknowledges OpenClaw and the 22 source benchmarks.

README.md

@@ -0,0 +1,28 @@
+---
+title: OmniStepBench
+emoji: 🦞
+colorFrom: red
+colorTo: blue
+sdk: static
+app_file: index.html
+pinned: true
+short_description: Deployment-Aware Agent Evaluation across Modalities
+tags:
+- benchmark
+- agents
+- openclaw
+- evaluation
+- leaderboard
+datasets:
+- SeerRay-Lab/OmniStepBench
+thumbnail: https://seerray-lab-omnistepbench.static.hf.space/assets/img/social-card.png
+---
+
+# OmniStepBench: Deployment-Aware Agent Evaluation across Modalities and Task Complexity
+
+Project page for OmniStepBench (mirror of https://seerray-lab.github.io/OmniStepBench/). A benchmark for deployment-aware agent evaluation across modalities and task complexity.
+
+- 🌐 Homepage: https://seerray-lab.github.io/OmniStepBench/
+- 📄 Paper: [arXiv 2609.06059](https://arxiv.org/abs/2609.06059)
+- 💻 Code: [SeerRay-Lab/OmniStepBench](https://github.com/SeerRay-Lab/OmniStepBench)
+- 🤗 Dataset: [SeerRay-Lab/OmniStepBench](https://huggingface.co/datasets/SeerRay-Lab/OmniStepBench)

assets/css/palette.css

@@ -0,0 +1,156 @@
+/* ==========================================================================
+   OmniStepBench homepage: color tokens (light theme only)
+   --------------------------------------------------------------------------
+   Visual source: the paper's Fig. 2 panel colors (1 blue / 2 green /
+   3 orange / 4 purple) plus the OpenClaw lobster red.
+   Method: dataviz color formula. Every DATA token below was checked with the
+   official validator (validate_palette.js, --mode light) against both page
+   surfaces, cream #FFF8EC and white #FFFFFF.
+   Verdicts are in palette.json; the usage rules are summarized below.
+
+   RULES FOR CHART AUTHORS
+   - Marks carry series colors. Labels, values, legends and axis text use ink
+     tokens, never a series color.
+   - Color follows the entity, not its rank. Keep the slot order below fixed.
+   - WARN: the light workload steps (--wl-text-ss, --wl-mm-ss) and
+     --pareto-muted are below 3:1 on the surface. Any chart that uses them
+     needs a relief channel: visible direct labels or the table view (every
+     chart ships a table view anyway).
+   - Status colors are reserved for state. Always pair them with an icon and
+     a label. Never use them for a series.
+   - Labels inside a colored mark use the matching --*-on token, which is the
+     one that clears 4.5:1. If a fill has no 4.5:1 on-color, put the label
+     outside the bar end in --ink.
+   ========================================================================== */
+
+:root {
+  color-scheme: light;
+
+  /* ---- Surfaces ---------------------------------------------------------- */
+  --surface-page:   #FFF8EC;  /* cream page plane (validator surface #1) */
+  --surface-card:   #FFFFFF;  /* chart cards / figures (validator surface #2) */
+  --surface-sunken: #F6ECDA;  /* code blocks, table zebra, wells */
+
+  /* ---- Ink (text + cartoon outline) --------------------------------------
+     Contrast on cream / white:
+       ink 14.92 / 15.75, ink-2 7.84 / 8.28, ink-muted 5.89 / 6.22 (all pass AA) */
+  --ink:          #2B2118;    /* primary text, thick cartoon outlines, hard shadows */
+  --ink-2:        #5A4C3D;    /* secondary text */
+  --ink-muted:    #6B5F50;    /* captions, axis tick labels (still >= 4.5:1) */
+  --ink-inverse:  #FFFFFF;
+  --outline:      var(--ink);
+
+  /* ---- Chart chrome (hairlines, recessive) ------------------------------- */
+  --chart-grid:   #ECE3D3;    /* 1px solid gridlines */
+  --chart-axis:   #CDBFA8;    /* 1px baseline / axis rule */
+  --chart-ring:   var(--surface-card); /* 2px surface ring around dots */
+  --chart-gap:    var(--surface-card); /* 2px surface gap between touching bars */
+
+  /* ---- Brand: OpenClaw lobster (UI accent, NOT a data color) -------------- */
+  --lobster:      #EC624A;    /* fills, logo, big shapes; ink text on it 4.81:1 */
+  --lobster-ink:  #B93D27;    /* lobster-colored text/links: 5.29 cream / 5.59 white */
+
+  /* ---- Section chrome (from Fig. 2 panels; UI only, NOT data colors) -----
+     Contrast: fill vs --ink >= 13.6; sec ink vs its fill >= 4.9; edge vs cream >= 3.27;
+     white on badge >= 5.17 */
+  --sec-blue-fill:    #EAF2FD;  --sec-blue-edge:    #4774CA;  --sec-blue-badge:    #1455B8;  --sec-blue-ink:    #1455B8;
+  --sec-green-fill:   #EDF8EA;  --sec-green-edge:   #578E31;  --sec-green-badge:   #29793A;  --sec-green-ink:   #29793A;
+  --sec-orange-fill:  #FDF0E2;  --sec-orange-edge:  #D86C1F;  --sec-orange-badge:  #B0520C;  --sec-orange-ink:  #A94F0A;
+  --sec-purple-fill:  #F1ECFB;  --sec-purple-edge:  #6F2F9F;  --sec-purple-badge:  #6C47AD;  --sec-purple-ink:  #6C47AD;
+
+  /* ======================================================================
+     DATA COLORS
+     ====================================================================== */
+
+  /* (a) Deployment: API vs Local. 2 slots, fixed order.
+     PASS on cream and white: CVD dE 23.7 (deutan), normal dE 31.1, both >= 3:1 */
+  --series-api:     #7444B4;  /* violet, from Fig. 2 panel 4 */
+  --series-local:   #3C8836;  /* green, from Fig. 2 panel 2 */
+  --series-api-on:  #FFFFFF;  /* 6.50:1 */
+  --series-local-on:#FFFFFF;  /* 4.41:1, so bold >= 14pt only; otherwise label outside the bar in --ink */
+
+  /* (b) Modality: Text vs Multimodal. 2 slots, fixed order.
+     PASS on cream and white: CVD dE 28.6 (protan), normal dE 31.6, both >= 3:1.
+     These are the middle steps of the two workload families in (c). */
+  --series-text:    #4A7AE4;  /* blue, from Fig. 2 panel 1 */
+  --series-mm:      #CC580B;  /* orange, from Fig. 2 panel 3 */
+  --series-text-on: #FFFFFF;  /* 4.04:1, so bold >= 14pt only */
+  --series-mm-on:   #FFFFFF;  /* 4.23:1, so bold >= 14pt only */
+  /* (b') Overall = both modalities combined (the leaderboard's aggregate column).
+     A DELIBERATE NEUTRAL, not a third categorical hue: it must not compete with
+     text/mm, and every free hue is taken (violet = API, green = local,
+     raspberry = Pareto, teal = heat ramp, reds/yellows = status).
+     validate_palette "#4A7AE4,#CC580B,#5B6878" (white and #F3FAFB):
+     lightness band PASS, CVD PASS (dE 13.6 protan), normal-vision PASS
+     (dE 21.1), contrast PASS (5.68:1 on white); chroma floor FAIL as expected
+     for a neutral (C 0.03). Distinct from the text token --ink-2 (1.48:1). */
+  --series-overall: #5B6878;
+
+  /* (c) Workload groups. 6 slots in a FIXED order:
+         text-ss, text-ms, text-mt, mm-ss, mm-ms, mm-mt
+     Composite encoding: hue = modality (blue family / orange family) and
+     lightness = execution complexity (single-step light, multi-step mid,
+     multi-step+tools dark), which mirrors the paper's Workload Matrix.
+     Categorical, adjacent pairs: PASS on both surfaces (worst CVD dE 13.6,
+     normal dE 15.7). The same holds on all pairs, so scatter and small
+     multiples are allowed.
+     WARN: contrast. --wl-text-ss (2.21 cream / 2.33 white) and --wl-mm-ss
+     (2.28 / 2.41) are below 3:1 and need relief (direct labels or table view).
+     Each family also PASSES the --ordinal ramp check (monotone L, dL >= 0.06,
+     hue spread 36 deg). */
+  --wl-text-ss:     #18B6F2;
+  --wl-text-ms:     #4A7AE4;
+  --wl-text-mt:     #2C45AE;
+  --wl-mm-ss:       #E29805;
+  --wl-mm-ms:       #CC580B;
+  --wl-mm-mt:       #922B01;
+  /* in-mark label colors (>= 4.5:1 only where noted; else label outside in --ink) */
+  --wl-text-ss-on:  #2B2118;  /* 6.76 */
+  --wl-text-mt-on:  #FFFFFF;  /* 8.17 */
+  --wl-mm-ss-on:    #2B2118;  /* 6.54 */
+  --wl-mm-mt-on:    #FFFFFF;  /* 8.18 */
+  /* --wl-text-ms and --wl-mm-ms: best on-color is 4.04 / 4.23, so use only for
+     bold text >= 14pt (18.66px), otherwise put the label outside the bar */
+
+  /* (d) Sequential heat ramp for leaderboard cells: one hue (teal), light to dark.
+     Teal is not used by any series, so a heat cell never reads as a modality or
+     a deployment type. Lightness is monotone and every step gap is >= 0.06.
+     Full 100-700 ramp: the light end recedes to the surface by design
+     (sequential), so the ordinal "light-end >= 2:1" check FAILS as expected.
+     Steps 400-700 used as an ordinal ramp: PASS on both surfaces. The
+     leaderboard's heat mode uses exactly these four steps (light end 2.16:1
+     on white, validate_palette --ordinal PASS).
+     Always print the number in the cell and show a scale legend, so color never
+     carries the value alone. */
+  --seq-100: #DEFAF7;  --seq-100-on: #2B2118;  /* 14.34 */
+  --seq-200: #B0EBE7;  --seq-200-on: #2B2118;  /* 11.91 */
+  --seq-300: #7EDAD7;  --seq-300-on: #2B2118;  /*  9.67 */
+  --seq-400: #40C2C3;  --seq-400-on: #2B2118;  /*  7.29 */
+  --seq-500: #02A6AD;  --seq-500-on: #2B2118;  /*  5.29 */
+  --seq-600: #0A818B;  --seq-600-on: #FFFFFF;  /*  4.64 */
+  --seq-700: #055F6C;  --seq-700-on: #FFFFFF;  /*  7.34 */
+
+  /* (e) Pareto emphasis: highlight the frontier, mute everything else.
+     The highlight is raspberry, a hue no series uses, so it reads the same in
+     the Text and Multimodal panels.
+     Highlight alone: PASS (L 0.52, C 0.20, 5.84 cream / 6.16 white).
+     Highlight vs muted: CVD dE 17.7 (deutan), normal dE 26.9, PASS. The
+     separation is carried mainly by lightness, which survives CVD.
+     Expected findings on the muted gray: chroma-floor FAIL (it is a
+     de-emphasis gray, not a categorical slot) and a contrast WARN
+     (2.54 cream / 2.68 white), so give muted points hover/focus tooltips
+     plus the table view.
+     All-pairs co-occurrence PASS: with (b) {text, mm, pareto-hi}, worst CVD
+     dE 16.8; with (a) {api, local, pareto-hi}, worst CVD dE 10.1. */
+  --pareto-hi:      #B51C79;
+  --pareto-hi-on:   #FFFFFF;  /* 6.16 */
+  --pareto-muted:   #A59D92;
+  --pareto-muted-on:#2B2118;  /* 5.88 */
+
+  /* ---- Status (fixed, reserved; always icon + label, never a series) ----- */
+  --status-good:     #0CA30C;
+  --status-warning:  #FAB219;
+  --status-serious:  #EC835A;
+  --status-critical: #D03B3B;
+  --status-good-text:#006300; /* success text on light surfaces */
+}

assets/fonts/README.md

@@ -0,0 +1,77 @@
+# OmniStepBench homepage: local webfonts
+
+These fonts are self-hosted, so the pages render offline, from mainland China and
+over `file://`, with no CDN. Every file is a WOFF2 **latin subset**, downloaded
+from the Google Fonts CSS2 API (fonts.gstatic.com), and all six families are licensed under the
+**SIL Open Font License 1.1**. The license texts are in `licenses/`, copied from
+github.com/google/fonts `ofl/<family>/OFL.txt`.
+
+Include the fonts with `<link rel="stylesheet" href="shared/fonts/fonts.css">`.
+The path is relative to the page. The `url()`s inside `fonts.css` are relative
+to that CSS file.
+
+`fonts.inline.css` is a generated alternative with the same `@font-face`
+rules, but every font is inlined as a base64 `data:` URI (357 KB). Use it
+instead of `fonts.css` only when a page is **not** in the same directory as
+`shared/`, or in a parent of it, and must also work over `file://` in Firefox.
+Firefox's strict file-origin policy can block font files from a parent
+directory. Chromium loads both variants over `file://`; this was tested.
+Only Chromium was available here, so Firefox itself was not tested.
+
+| CSS `font-family` | Role (token in fonts.css) | File | Axis / weights | Style | Upstream version | License |
+|---|---|---|---|---|---|---|
+| `"Fredoka"` | rounded cartoon display (`--font-display`) | `fredoka-latin-wght.woff2` (29.7 KB) | variable wght 300–700 | normal | Fredoka 2.001 (gstatic v17) | OFL 1.1, © 2016 The Fredoka Project Authors |
+| `"Bangers"` | comic headline, all-caps (`--font-comic`) | `bangers-latin-400.woff2` (23.5 KB) | 400 | normal | Bangers 2.100 (v25) | OFL 1.1, © 2010 The Bangers Project Authors |
+| `"Patrick Hand"` | hand-drawn accent, small notes (`--font-hand`) | `patrickhand-latin-400.woff2` (23.9 KB) | 400 | normal | Patrick Hand 1.003 (v25) | OFL 1.1, © 2010–2012 Patrick Wagesreiter |
+| `"Caveat"` | handwritten scribble, large annotations only (`--font-scribble`) | `caveat-latin-wght.woff2` (74.9 KB) | variable wght 400–700 | normal | Caveat 2.000 (v23) | OFL 1.1, © 2014 The Caveat Project Authors |
+| `"Nunito"` | body text, UI, chart text (`--font-body`) | `nunito-latin-wght.woff2` (39.1 KB) | variable wght 200–1000 | normal | Nunito 3.602 (v32) | OFL 1.1, © 2014 The Nunito Project Authors |
+| `"Nunito"` | body italic | `nunito-latin-wght-italic.woff2` (41.8 KB) | variable wght 200–1000 | italic | Nunito 3.602 (v32) | OFL 1.1 |
+| `"JetBrains Mono"` | code, CLI flags, task ids (`--font-mono`) | `jetbrainsmono-latin-wght.woff2` (31.4 KB) | variable wght 400–800 (use 400/700) | normal | JetBrains Mono 2.211 (v24) | OFL 1.1, © 2020 The JetBrains Mono Project Authors |
+
+Total: about 264 KB. A browser downloads a face only when some text uses it.
+
+## Verification (2026-09-23)
+
+- Each file starts with the `wOF2` magic bytes. Each also decodes with Node's
+  built-in brotli, and its `name`, `fvar`, `maxp` and `cmap` tables parse. The
+  inspector is `homepage/tools/fonts/woff2info.cjs`.
+- Each file's md5 matches a fresh re-download of the same gstatic URL.
+- Axis ranges are read from the `fvar` table:
+  - Fredoka: wght 300–700
+  - Caveat: wght 400–700
+  - Nunito: wght 200–1000
+  - JetBrains Mono: wght 400–800
+- Coverage: every face maps ASCII A–Z, a–z, 0–9 and the usual punctuation, plus
+  `– — ’ “ ” · × ±`. None of the latin subsets contains `→` (U+2192) or `≈`
+  (U+2248). These characters render in the next font of the stack, so use
+  inline SVG icons for arrows in headings.
+- A specimen page was rendered in headless Chromium over `file://`:
+  `homepage/tools/fonts/specimen.html`, with screenshots in `shots/`.
+  With both `fonts.css` and `fonts.inline.css`, all seven faces reported
+  "loaded", `document.fonts.check()` returned true for every family and
+  weight, and the page had no console errors and no failed requests. The
+  glyphs were inspected visually.
+
+## Usage notes
+
+- **Bangers** has uppercase-style glyphs only, so lowercase input renders as
+  small caps. Use it for short punchy labels such as section kickers and
+  badges. Do not use it for sentences or numbers that people need to read
+  precisely.
+- **Numbers.** Nunito's default figures are already **tabular**. In Chromium
+  at 40px, `1111` and `0000` both measure 96.0px. The subset has no `tnum` or
+  `pnum` feature, so `font-variant-numeric` changes nothing. As a result,
+  leaderboard and table columns align on their own; right-align them. Hero
+  numbers will also use equal-width digits, which is an accepted trade-off.
+  Fredoka figures are proportional (`1111` 64px vs `0000` 92px). Do not use
+  Fredoka or Bangers for numbers in tables, charts or stat tiles: keep figures
+  in `--font-body` (dataviz rule: no display face on figures).
+- **JetBrains Mono ligatures.** The subset has `calt` ligatures, so `=>`
+  renders as a single arrow glyph. Set `font-variant-ligatures: none` on code
+  and CLI blocks so users see the literal characters they will type.
+- **Luckiest Guy** was considered and **rejected**: it is Apache-2.0, not OFL.
+  Bangers fills the comic-headline role.
+- To refresh the fonts, request
+  `https://fonts.googleapis.com/css2?family=...&display=swap` with a modern Chrome
+  User-Agent. Take only the `/* latin */` block of each family. Keep the
+  `unicode-range` shown in `fonts.css`.

assets/fonts/bangers-latin-400.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04f54ff42ea2b8fc50b4259c29c60b1e05e606b769c2fb541c98624346c9767c
+size 23528

assets/fonts/caveat-latin-wght.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:891951df5e8b5b0f0bc760d31375405e795c666b5add70437de12d4a6482b33f
+size 74932

assets/fonts/fonts.css

@@ -0,0 +1,89 @@
+/* ==========================================================================
+   OmniStepBench homepage: local webfonts (latin subset, woff2, SIL OFL 1.1).
+   Self-hosted, no network or CDN dependency. The URLs are relative to this
+   file, so the fonts also load when the page is opened via file://.
+   Details and license texts: README.md and licenses/ in this folder.
+   ========================================================================== */
+
+/* Latin subset coverage (same unicode-range Google Fonts uses for "latin").
+   Characters outside it, e.g. the arrow and approx signs, fall back to the next
+   family in the stack. */
+
+/* Fredoka: rounded cartoon display face (variable, wght 300-700) */
+@font-face {
+  font-family: "Fredoka";
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url("fredoka-latin-wght.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Bangers: comic headline face (400 only; all caps by design) */
+@font-face {
+  font-family: "Bangers";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("bangers-latin-400.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Patrick Hand: hand-drawn accent (400). Legible at small sizes (notes, badges). */
+@font-face {
+  font-family: "Patrick Hand";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("patrickhand-latin-400.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Caveat: handwritten scribble (variable, wght 400-700). Use only for short, large annotations. */
+@font-face {
+  font-family: "Caveat";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("caveat-latin-wght.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Nunito: friendly, readable body face (variable, wght 200-1000, upright + italic) */
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url("nunito-latin-wght.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Nunito";
+  font-style: italic;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url("nunito-latin-wght-italic.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* JetBrains Mono: code, CLI flags, task ids (variable, wght 400-800; use 400 and 700) */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url("jetbrainsmono-latin-wght.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Font-stack tokens. Every stack ends in a system fallback, so text stays
+   readable if a woff2 fails to load. */
+:root {
+  --font-display: "Fredoka", "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
+  --font-comic:   "Bangers", "Fredoka", "Impact", "Arial Black", system-ui, sans-serif;
+  --font-hand:    "Patrick Hand", "Caveat", "Comic Sans MS", "Segoe Print", cursive;
+  --font-scribble:"Caveat", "Patrick Hand", "Segoe Print", cursive;
+  --font-body:    "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
+  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+}

assets/fonts/fredoka-latin-wght.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:99d6c78e043710d4f83ed90716779798b7b04eb690f73e0ad0e8f32d1f0e98c2
+size 29732

assets/fonts/jetbrainsmono-latin-wght.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:83c005d49d8a6a50474c73a5a36ac0468076e9c4a29da7bdb14995d80560a5be
+size 31432

assets/fonts/licenses/bangers-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/licenses/caveat-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The Caveat Project Authors (https://github.com/googlefonts/caveat)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/licenses/fredoka-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Fredoka Project Authors (https://github.com/hafontia/Fredoka-One)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/licenses/jetbrainsmono-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/licenses/nunito-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The Nunito Project Authors (https://github.com/googlefonts/nunito)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/licenses/patrickhand-OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2012 Patrick Wagesreiter (mail@patrickwagesreiter.at)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/nunito-latin-wght-italic.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6cfcc3786d5ba3b5c3a41797f95272e57f4290ccbd283a4bfd0033a3d857e64c
+size 41760

assets/fonts/nunito-latin-wght.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba344451eab25b217a165363b1982048a5e5830a0daf36577973955a04cac793
+size 39128

assets/fonts/patrickhand-latin-400.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ac5bc9033b2572bf84d39f7150c1634e37ed16e8dbee632d6d0bceac0bbf0199
+size 23944

assets/js/content.js

@@ -0,0 +1,291 @@
+/* Hero, motivation, overview, findings, case study, cite, footer.
+   Every number is read from window.OSB; prose here paraphrases or quotes the paper. */
+(function () {
+  'use strict';
+  var U = window.U, D = U.D, h = U.h, S = D.stats, M = D.meta;
+
+  function finding(key) { return D.findings.filter(function (x) { return x.key === key; })[0]; }
+
+  /* ---------------- hero ---------------- */
+  function hero() {
+    var pill = U.$('#hero-arxiv');
+    pill.textContent = 'arXiv:' + M.arxivId + ' · ' + M.arxivCategory + ' · ' + M.arxivDate;
+
+    var ul = U.$('#authors');
+    ul.textContent = ''; /* replace the static no-JS fallback */
+    M.authors.forEach(function (a, i) {
+      var li = h('li', null, a.name);
+      var sup = h('sup', { text: a.affils.join(',') });
+      if (a.equalContribution) sup.appendChild(h('span', { class: 'mark', text: M.authorNotes.equalSymbol, attrs: { title: M.authorNotes.equalContribution } }));
+      if (a.corresponding) sup.appendChild(h('span', { class: 'mark', text: M.authorNotes.correspondingSymbol, attrs: { title: M.authorNotes.corresponding } }));
+      li.appendChild(sup);
+      if (i < M.authors.length - 1) li.appendChild(document.createTextNode(','));
+      ul.appendChild(li);
+    });
+    var ol = U.$('#affils');
+    ol.textContent = '';
+    M.affiliations.forEach(function (af) { ol.appendChild(h('li', null, h('sup', { text: String(af.id) }), af.name)); });
+    var an = U.$('#author-notes');
+    an.textContent = '';
+    an.appendChild(h('span', { class: 'nowrap', text: M.authorNotes.equalSymbol + ' ' + M.authorNotes.equalContribution }));
+    an.appendChild(document.createTextNode('   '));
+    an.appendChild(h('span', { class: 'nowrap', text: M.authorNotes.correspondingSymbol + ' ' + M.authorNotes.corresponding }));
+
+    var tiles = [
+      { v: U.int(S.tasks), l: 'agent tasks', sub: U.int(S.textTasks) + ' text · ' + U.int(S.mmTasks) + ' multimodal', icon: 'i-paper', bg: 'var(--sec-blue-fill)', c: 'var(--sec-blue-ink)' },
+      { v: U.int(S.sources), l: 'source benchmarks', sub: 'selected and adapted', icon: 'i-compass', bg: 'var(--sec-blue-fill)', c: 'var(--sec-blue-ink)' },
+      { v: U.matrixLabel(), l: 'workload matrix', sub: 'modality × execution form', icon: 'i-token', bg: 'var(--sec-green-fill)', c: 'var(--sec-green-ink)' },
+      { v: U.int(S.models), l: 'models evaluated', sub: U.int(S.apiModels) + ' API + ' + U.int(S.localModels) + ' local', icon: 'i-server', bg: 'var(--sec-green-fill)', c: 'var(--sec-green-ink)' },
+      { v: U.int(S.runs), l: 'model–task runs', sub: 'in one shared OpenClaw runtime', icon: 'i-loop', bg: 'var(--sec-orange-fill)', c: 'var(--sec-orange-ink)' },
+      { v: U.int(S.unsupportedRemoved), l: 'unsupported positive scores removed', sub: 'by the evidence-based audit', icon: 'i-eye', bg: 'var(--sec-purple-fill)', c: 'var(--sec-purple-ink)', burst: 'BUSTED!' }
+    ];
+    var box = U.$('#stat-tiles');
+    tiles.forEach(function (t) {
+      var ic = h('span', { class: 'stat__icon', style: { background: t.bg, color: t.c } }, U.icon(t.icon));
+      var li = h('li', { class: 'stat' + (t.burst ? ' stat--burst' : '') }, ic, h('span', { class: 'stat__value', text: t.v }), h('span', { class: 'stat__label', text: t.l }), h('span', { class: 'stat__sub', text: t.sub }));
+      if (t.burst) li.appendChild(U.burst(t.burst, 'red'));
+      box.appendChild(li);
+    });
+  }
+
+  /* ---------------- why ---------------- */
+  function why() {
+    U.$('#why-lead').textContent = 'As language models become general-purpose agents, evaluation has to look beyond static answer correctness. The paper argues that a benchmark used to choose and deploy an agent model has to answer three questions:';
+    var art = { interpretable: ['ic-grid', 'theme-blue'], attributable: ['ic-bowl', 'theme-green'], trustworthy: ['ic-shield', 'theme-orange'] };
+    var list = U.$('#why-grid');
+    M.why.forEach(function (w) {
+      var a = art[w.key] || ['ic-shield', 'theme-blue'];
+      var word = w.key.charAt(0).toUpperCase() + w.key.slice(1) + '?';
+      list.appendChild(h('li', { class: 'why reveal ' + a[1] },
+        h('div', { class: 'why__top' },
+          h('span', { class: 'why__art' }, U.icon(a[0])),
+          h('h3', { class: 'why__q' }, h('span', { class: 'why__word', text: word }), w.question)),
+        h('p', { class: 'why__problem', text: w.problem }),
+        h('p', { class: 'why__answer' }, h('strong', { text: M.shortName + '’s answer' }), w.answer)));
+    });
+    var tl = U.$('#tldr-list');
+    [M.taglines[1], M.taglines[2], M.taglines[3]].forEach(function (t) { tl.appendChild(h('li', { text: t })); });
+    U.$('#abstract-text').textContent = M.abstract;
+  }
+
+  /* ---------------- overview ---------------- */
+  function overview() {
+    var f2 = U.fig('fig2');
+    U.$('#overview-lead').textContent = 'The pipeline turns heterogeneous source benchmarks into comparable, auditable reports: tasks are curated and classified, every model executes them in the same agent runtime, scores are computed and audited, and results are summarized per workload together with tokens and cost.';
+    var img = U.$('#overview-img');
+    img.src = U.IMG + f2.file; img.alt = f2.alt;
+    var cap = U.$('#overview-cap');
+    cap.appendChild(h('b', { text: f2.label + '. ' }));
+    cap.appendChild(document.createTextNode(f2.caption));
+    U.$('#overview-zoom').addEventListener('click', function () { U.lightbox(U.IMG + f2.file, f2.alt, f2.label + '. ' + f2.caption); });
+
+    var sc = S.scoring, rt = S.runtime;
+    var stages = [
+      { cls: 'blue', art: 'ic-chest', title: 'Construct',
+        text: U.int(S.tasks) + ' tasks are selected and adapted from ' + U.int(S.sources) + ' source benchmarks through feasibility, difficulty and representativeness filters, then organized into a ' + U.matrixLabel() + ' workload matrix by input modality and execution form.',
+        chips: [U.int(S.textTasks) + ' text', U.int(S.mmTasks) + ' multimodal'] },
+      { cls: 'green', art: 'cr-octopus', title: 'Execute',
+        text: 'Every model runs in one shared OpenClaw environment (common agent loop, tool interface, workspace and logging) with web search, web fetch and ' + rt.clawhubSkillsInPaper + ' Clawhub skills. A task contract fixes the workspace, tools, artifact, scorer and time budget.',
+        chips: ['OpenClaw ' + rt.openclaw] },
+      { cls: 'orange', art: 'ic-scale', title: 'Score & audit',
+        text: 'Each task is scored by automated checks, an LLM judge, or a weighted hybrid. Post-hoc rules flag suspicious positive scores, and a meta-judge from a different model family checks them against the evidence.',
+        chips: [sc.auto + ' auto · ' + sc.judge + ' judge · ' + sc.hybrid + ' hybrid tasks'] },
+      { cls: 'purple', art: 'ic-board', title: 'Report',
+        text: 'Audited accuracy overall and per workload group, tokens per task, and reference cost from public API prices, with accuracy–cost Pareto frontiers for API models drawn separately for text and multimodal workloads.',
+        chips: [U.int(S.models) + ' models', U.int(S.runs) + ' runs'] }
+    ];
+    var ol = U.$('#stages');
+    stages.forEach(function (s) {
+      var chips = h('div', { class: 'stage__chips' });
+      s.chips.forEach(function (c) { chips.appendChild(h('span', { class: 'pill', text: c })); });
+      ol.appendChild(h('li', { class: 'stage reveal stage--' + s.cls },
+        U.icon(s.art, 'stage__art'), h('h3', { text: s.title }), h('p', { text: s.text }), chips));
+    });
+  }
+
+  /* ---------------- findings ---------------- */
+  function findings() {
+    var meta = {
+      'workload-winners': { icon: 'i-crown', cls: 'fi-blue', wide: true, jump: '#leaderboard', jl: 'Explore the leaderboard', lb: { deploy: 'all', track: 'full' } },
+      'open-weight-gap': { icon: 'i-server', cls: 'fi-green', jump: '#leaderboard', jl: 'Show local models in the leaderboard', lb: { deploy: 'local', track: 'full' } },
+      'pareto': { icon: 'i-frontier', cls: 'fi-orange', jump: '#cost', jl: 'See the frontiers' },
+      'tokens-vs-dollars': { icon: 'i-coins', cls: 'fi-orange', jump: '#tokens-card', jl: 'Compare tokens and dollars' },
+      'judge-hallucination': { icon: 'i-eye', cls: 'fi-purple', jump: '#reliability', jl: 'Inside the audit' },
+      'deployment-failures': { icon: 'i-loop', cls: 'fi-purple', jump: '#pattern-grid', jl: 'Hallucination patterns' },
+      'model-evolution': { icon: 'i-sprout', cls: 'fi-green', jump: '#leaderboard', jl: 'Show local models in the leaderboard', lb: { deploy: 'local', track: 'full' } },
+      'local-tokens': { icon: 'i-token', cls: 'fi-green', jump: '#taxonomy', jl: 'PPPA in the failure taxonomy' },
+      'failure-taxonomy': { icon: 'i-compass', cls: 'fi-blue', jump: '#taxonomy', jl: 'Failure taxonomy' }
+    };
+    var order = ['workload-winners', 'open-weight-gap', 'pareto', 'tokens-vs-dollars', 'local-tokens', 'judge-hallucination', 'deployment-failures', 'model-evolution', 'failure-taxonomy'];
+    var grid = U.$('#findings-grid');
+    order.forEach(function (key, idx) {
+      var f = finding(key);
+      if (!f) return;
+      var m = meta[key];
+      var card = h('article', { class: 'finding reveal ' + m.cls + (m.wide ? ' finding--wide' : ''), attrs: { 'aria-labelledby': 'f-' + key } },
+        h('div', { class: 'finding__top' }, h('span', { class: 'finding__icon' }, U.icon(m.icon)), h('span', { class: 'finding__sec', text: f.section })),
+        h('h3', { text: f.title, attrs: { id: 'f-' + key } }));
+      if (key === 'workload-winners') card.appendChild(winners());
+      if (key === 'open-weight-gap') card.appendChild(gapVisual(f));
+      if (key === 'tokens-vs-dollars') card.appendChild(chainVisual(f));
+      if (key === 'judge-hallucination') card.appendChild(auditVisual(f));
+      var body = h('p', { class: 'finding__text', attrs: { id: 'ft-' + key } }, U.emphNums(f.statement));
+      card.appendChild(body);
+      var more = null;
+      if (f.statement.length > 230 && !m.wide) {
+        more = h('button', { class: 'finding__more', attrs: { type: 'button', 'aria-expanded': 'false', 'aria-controls': 'ft-' + key } }, 'Read the full finding');
+        more.addEventListener('click', function () {
+          var open = card.classList.toggle('is-open');
+          more.setAttribute('aria-expanded', String(open));
+          more.textContent = open ? 'Show less' : 'Read the full finding';
+        });
+        card.classList.add('is-clampable');
+      }
+      var a = h('a', { class: 'jump', attrs: { href: m.jump } }, m.jl, U.icon('i-arrow'));
+      if (m.lb) a.addEventListener('click', function () { if (U.lbSet) U.lbSet(m.lb); });
+      card.appendChild(h('div', { class: 'finding__actions' }, more || null, a));
+      grid.appendChild(card);
+    });
+  }
+  function winners() {
+    var box = h('div', { class: 'winners', attrs: { role: 'table', 'aria-label': 'Best model per workload group (Table 1)' } });
+    var forms = [];
+    U.GROUPS.forEach(function (g) { if (forms.indexOf(g.form) < 0) forms.push(g.form); });
+    var formLabel = { 'single-step': 'Single-step', 'multi-step': 'Multi-step', 'multi-step+tools': 'Multi-step + tools' };
+    var hr = h('div', { attrs: { role: 'row' }, style: { display: 'contents' } });
+    hr.appendChild(h('span', { attrs: { role: 'columnheader' }, class: 'winners__h' }));
+    forms.forEach(function (f) { hr.appendChild(h('span', { class: 'winners__h', text: formLabel[f] || f, attrs: { role: 'columnheader' } })); });
+    box.appendChild(hr);
+    ['text', 'multimodal'].forEach(function (mod) {
+      var row = h('div', { attrs: { role: 'row' }, style: { display: 'contents' } });
+      row.appendChild(h('span', { class: 'winners__r', attrs: { role: 'rowheader' } }, h('span', { class: 'lg-only', text: mod === 'text' ? 'Text' : 'Multimodal' }), h('span', { class: 'sm-only', text: mod === 'text' ? 'Text' : 'MM', attrs: { 'aria-hidden': 'true' } })));
+      forms.forEach(function (f) {
+        var g = U.GROUPS.filter(function (x) { return x.modality === mod && x.form === f; })[0];
+        row.appendChild(h('span', { class: 'winner', style: { '--c': U.wlVar(g.key) }, attrs: { role: 'cell', title: g.longLabel } },
+          h('b', { text: g.best.model }), h('span', null, h('span', { class: 'lg-only', text: g.label + ' · ' }), U.pct(g.best.acc))));
+      });
+      box.appendChild(row);
+    });
+    return box;
+  }
+  /* deployment gap: for each tool-mediated group the paper compares (§4.2), the best local score
+     next to the best API score it states */
+  function gapVisual(f) {
+    var groups = [], by = {};
+    f.numbers.forEach(function (n) {
+      if (!n.group || n.acc == null) return;
+      if (!by[n.group]) { by[n.group] = []; groups.push(n.group); }
+      by[n.group].push(n);
+    });
+    var box = h('div', { class: 'mini-bars mini-bars--gap' });
+    var bars = [];
+    groups.forEach(function (key) {
+      var g = U.group(key);
+      box.appendChild(h('p', { class: 'mini-bars__h', text: g.longLabel }));
+      by[key].forEach(function (n) {
+        var m = U.model(n.model), dep = m && m.deployment === 'local' ? 'local' : 'api', depLab = dep === 'local' ? 'Local' : 'API';
+        var bar = h('div', { class: 'mini-bar', attrs: { role: 'img', 'aria-label': n.model + ' (' + depLab + '): ' + g.label + ' ' + U.pct(n.acc) + ' percent (stated in ' + f.section + ')' } },
+          h('span', { class: 'mini-bar__n', text: m ? m.shortName : n.model, attrs: { 'aria-hidden': 'true' } }),
+          h('span', { class: 'mini-bar__t', attrs: { 'aria-hidden': 'true' } }, h('span', { class: 'mini-bar__f', style: { width: n.acc + '%', background: 'var(--series-' + dep + ')' } })),
+          h('span', { class: 'mini-bar__v', text: U.pct(n.acc), attrs: { 'aria-hidden': 'true' } }));
+        U.hoverTip(bar, function () {
+          return { title: n.model, rows: [{ label: g.longLabel + ' accuracy', value: U.pct(n.acc) + '%', color: U.css('--series-' + dep) }],
+            note: (m ? m.vendor + ' · ' : '') + depLab + ' · stated in the paper (' + f.section + ')' };
+        });
+        bars.push(bar);
+        box.appendChild(bar);
+      });
+    });
+    if (!bars.length) return h('span');
+    U.roving(bars);
+    var legend = h('div', { class: 'legend mini-legend' });
+    [['var(--series-local)', 'best local'], ['var(--series-api)', 'best API']].forEach(function (x) {
+      legend.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__sw', style: { background: x[0] } }), x[1]));
+    });
+    return h('div', { class: 'mini-wrap' }, legend, box);
+  }
+  /* token use vs dollars: the four extremes the paper names in §4.2 (Text Avg per task) are four
+     different models */
+  function chainVisual(f) {
+    function ext(field, max) {
+      var xs = f.numbers.filter(function (n) { return n[field] != null; });
+      return xs.sort(function (a, b) { return max ? b[field] - a[field] : a[field] - b[field]; })[0];
+    }
+    var cells = [['fewest tokens', ext('tokensText'), function (n) { return U.tok(n.tokensText); }],
+      ['most tokens', ext('tokensText', true), function (n) { return U.tok(n.tokensText); }],
+      ['cheapest', ext('costText'), function (n) { return '$' + n.costText.toFixed(3); }],
+      ['most expensive', ext('costText', true), function (n) { return '$' + n.costText.toFixed(3); }]];
+    if (cells.some(function (c) { return !c[1]; })) return h('span');
+    var list = h('ul', { class: 'xchips' });
+    cells.forEach(function (c) {
+      list.appendChild(h('li', { class: 'vs-chip' }, h('span', { class: 'xchips__k', text: c[0] }), h('b', { text: c[1].model }), h('span', { class: 'vs-chip__big', text: c[2](c[1]) })));
+    });
+    return h('div', { class: 'mini-wrap' }, list, h('p', { class: 'xchips__note', text: 'Text Avg, per task' }));
+  }
+
+  /* judge hallucination: the audit counts and the MAE change, as stated in §4.3 / Appendix C */
+  function auditVisual(f) {
+    var n = Array.isArray(f.numbers) ? f.numbers[0] : f.numbers;
+    var steps = [[U.int(n.judgeCalls), 'judge calls'], [U.int(n.flagged), 'flagged'], [U.int(n.confirmed), 'removed']];
+    var row = h('div', { class: 'mini-funnel', attrs: { role: 'img', 'aria-label': steps.map(function (x) { return x[0] + ' ' + x[1]; }).join(', then ') } });
+    steps.forEach(function (x, i) {
+      if (i) row.appendChild(U.icon('i-arrow', 'mini-funnel__arr'));
+      row.appendChild(h('span', { class: 'mini-funnel__s' + (i === steps.length - 1 ? ' is-final' : '') }, h('b', { text: x[0] }), h('span', { text: x[1] })));
+    });
+    return h('div', { class: 'mini-wrap' }, row,
+      h('p', { class: 'mini-mae' }, 'MAE vs. human experts: ', h('b', { text: n.maeJudge.toFixed(3) }), ' → ', h('b', { text: n.maeMeta.toFixed(3) }), h('span', { class: 'scribble scribble--sm', text: ' about half' })));
+  }
+
+  /* ---------------- case study (Fig. 3) ---------------- */
+  /* §4.4 of the paper, quoted verbatim (sentences 2–5). */
+  var PAPER_4_4 = 'The task requires filtering foods by two visual constraints before retrieving their glycemic-index values. Qwen3.5-9B misreads the chart and retains Avocado despite the CO2 threshold; this early error changes the candidate set and leads to the wrong answer. It also relies on unverified sources. In contrast, Claude Opus 4.8 applies both constraints and checks retrieved values against authoritative sources.';
+  function caseStudy() {
+    var f = U.fig('fig3');
+    var box = U.$('#case-study');
+    var parts = f.caption.split(/\.\s+(?=Example Task:)/);
+    var title = parts[0];
+    var task = (parts[1] || '').replace(/^Example Task:\s*/, '');
+    var t = D.tasks.filter(function (x) { return x.id === f.taskId; })[0];
+    var g = t ? U.group(t.group) : null;
+    box.appendChild(h('div', { class: 'case__fig' }, U.zoomable(U.IMG + f.file, f.alt, f.label + '. ' + f.caption, f.label)));
+    var chips = h('p', { class: 'case__chips' });
+    if (t) {
+      chips.appendChild(h('span', { class: 'pill', text: U.source(t.source).name }));
+      chips.appendChild(h('span', { class: 'pill' }, h('span', { class: 'dot', style: { background: U.wlVar(g.key) } }), g.label));
+    }
+    box.appendChild(h('figcaption', null,
+      h('p', { class: 'case__label', text: 'Case study · ' + f.label + ' (' + f.section + ')' }),
+      h('h3', { text: title }),
+      h('div', { class: 'case__task' }, h('span', { class: 'case__tag', text: 'Example task' }), h('p', { text: task })),
+      h('blockquote', { class: 'case__quote' }, h('p', { text: PAPER_4_4 }), h('footer', { text: 'Paper, ' + f.section })),
+      chips));
+  }
+
+  /* ---------------- cite + footer ---------------- */
+  function cite() {
+    U.$('#bibtex').textContent = M.bibtex;
+    var links = h('div', { class: 'cite__links' },
+      h('span', { class: 'btn-pair' },
+        h('a', { class: 'btn btn--sm btn--navy', attrs: { href: M.arxivUrl, rel: 'noopener' } }, U.icon('i-paper'), 'arXiv ' + M.arxivId),
+        h('a', { class: 'btn btn--sm btn--ghost', attrs: { href: M.pdfUrl, rel: 'noopener' } }, U.icon('i-pdf'), 'PDF')),
+      h('span', { class: 'btn-pair' },
+        h('a', { class: 'btn btn--sm btn--ghost', attrs: { href: M.github, rel: 'noopener' } }, U.icon('i-github'), 'Code'),
+        M.hfDataset ? h('a', { class: 'btn btn--sm btn--ghost', attrs: { href: M.hfDataset, rel: 'noopener', title: M.shortName + ' on Hugging Face' } }, U.icon('i-data'), 'HF Dataset') : null));
+    U.$('.cite__body').appendChild(links);
+    U.$$('[data-copy-target]').forEach(function (b) {
+      b.addEventListener('click', function () { U.copy(document.getElementById(b.getAttribute('data-copy-target')).textContent, b); });
+    });
+    var fa = U.$('#footer-affils');
+    M.affiliations.forEach(function (a) { fa.appendChild(h('li', { text: a.name, attrs: { value: String(a.id) } })); });
+    U.$('#footer-ack').textContent = M.shortName + ' runs every model in the OpenClaw agent runtime (version ' + S.runtime.openclaw + ' in the paper). Its ' + U.int(S.tasks) + ' tasks are selected and adapted from ' + U.int(S.sources) + ' public source benchmarks, and we gratefully acknowledge their authors:';
+    var fs = U.$('#footer-srcs');
+    fs.textContent = '';
+    D.sources.forEach(function (s, i) {
+      fs.appendChild(h('span', { class: 'src-i', text: s.name + (i < D.sources.length - 1 ? ' ·' : '') }));
+      if (i < D.sources.length - 1) fs.appendChild(document.createTextNode(' '));
+    });
+    U.$('#footer-base').textContent = 'All numbers on this page follow the ' + M.shortName + ' paper. Illustrations are original; figures are reproduced from the paper.';
+  }
+
+  U.initContent = function () { hero(); why(); overview(); findings(); caseStudy(); cite(); };
+})();

assets/js/cost.js

@@ -0,0 +1,531 @@
+/* Accuracy–cost scatter (the paper's Fig. 1: plotted models and frontiers exactly as drawn)
+   and the tokens-vs-dollars small multiples (Table 2). */
+(function () {
+  'use strict';
+  var U = window.U, D = U.D, h = U.h, s = U.s;
+  var mode = 'text';
+  var tokSort = 'tokens';
+
+  function field() { return mode === 'text' ? 'textAvg' : 'mmAvg'; }
+  function acc(m) { return mode === 'text' ? m.textAvg : m.mmAvg; }
+  function cost(m) { return m.cost[field()]; }
+  function costTxt(m) { return m.costText[field()]; }
+  function tok(m) { return m.tokens[field()]; }
+  function modeColor() { return mode === 'text' ? U.css('--series-text') : U.css('--series-mm'); }
+  function modeLabel() { return mode === 'text' ? 'Text' : 'Multimodal'; }
+  function plotted() { return D.pareto.fig1Models[mode].map(U.model); }
+  function frontier() { return D.pareto[mode].map(U.model); }
+  function isFront(m) { return D.pareto[mode].indexOf(m.name) >= 0; }
+  function apiModels() { return D.models.filter(function (m) { return m.deployment === 'api' && cost(m) != null && tok(m) != null; }); }
+  function finding(k) { return D.findings.filter(function (x) { return x.key === k; })[0]; }
+  /* models the paper names in its §4.2 prose: always labelled when plotted */
+  function namedInProse(m) {
+    var txt = [finding('pareto').statement, finding('tokens-vs-dollars').statement].join(' ');
+    var re = new RegExp(m.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '(?![\\w.-]*\\w)');
+    return re.test(txt);
+  }
+
+  function tipSpec(m) {
+    return { title: m.name, rows: [
+      { label: modeLabel() + ' accuracy', value: U.pct(acc(m)) + '%', color: isFront(m) ? U.css('--pareto-hi') : U.css('--pareto-muted') },
+      { label: 'Cost per task', value: U.usd(costTxt(m)) },
+      { label: 'Tokens per task', value: U.tok(tok(m)) }
+    ], note: m.vendor + (isFront(m) ? ' · on the Pareto frontier drawn in Fig. 1' : '') };
+  }
+
+  /* ---------------- scatter ---------------- */
+  function drawScatter() {
+    var box = U.$('#scatter-box');
+    var W = Math.max(280, Math.round(box.clientWidth));
+    var narrow = W < 560;
+    var H = W >= 900 ? 500 : narrow ? 540 : 460;
+    var m = { l: narrow ? 42 : 54, r: 10, t: 14, b: 54 };
+    var pw = W - m.l - m.r, ph = H - m.t - m.b;
+    var pts = plotted();
+    var costs = pts.map(cost), accs = pts.map(acc);
+    var lo = Math.log10(Math.min.apply(null, costs) / 1.7), hi = Math.log10(Math.max.apply(null, costs) * (narrow ? 1.7 : 3.2));
+    var ylo = Math.floor((Math.min.apply(null, accs) - 2) / 5) * 5, yhi = Math.ceil((Math.max.apply(null, accs) + 2) / 5) * 5;
+    function X(c) { return m.l + (Math.log10(c) - lo) / (hi - lo) * pw; }
+    function Y(a) { return m.t + (1 - (a - ylo) / (yhi - ylo)) * ph; }
+
+    box.textContent = '';
+    var svg = s('svg', { width: W, height: H, viewBox: '0 0 ' + W + ' ' + H, role: 'group', 'aria-label': modeLabel() + ' accuracy versus cost per task for ' + pts.length + ' API models. One Tab stop: use the arrow keys to move between models in order of cost.' }, box);
+    var g = s('g', { class: 'axis', 'aria-hidden': 'true' }, svg);
+    U.ticks(ylo, yhi, 5).forEach(function (v) {
+      s('line', { class: 'grid-line', x1: m.l, x2: W - m.r, y1: Y(v), y2: Y(v) }, g);
+      var t = s('text', { x: m.l - 8, y: Y(v) + 4, 'text-anchor': 'end' }, g); t.textContent = String(v);
+    });
+    var xt = [];
+    for (var e = Math.floor(lo); e <= Math.ceil(hi); e++) [1, 2, 5].forEach(function (k) { var v = k * Math.pow(10, e); if (Math.log10(v) >= lo && Math.log10(v) <= hi) xt.push({ v: v, k: k, x: X(v) }); });
+    xt.forEach(function (o) { s('line', { class: 'grid-line', x1: o.x, x2: o.x, y1: m.t, y2: m.t + ph }, g); });
+    /* tick labels: 1s first, then 5s and 2s only where they do not collide */
+    U.fitTicks(xt, U.usdTick, 0, W, '400 12.5px Nunito', 10).forEach(function (o) {
+      var t = s('text', { x: o.x, y: m.t + ph + 18, 'text-anchor': 'middle' }, g); t.textContent = U.usdTick(o.v);
+    });
+    s('line', { class: 'axis-line', x1: m.l, x2: W - m.r, y1: m.t + ph, y2: m.t + ph }, g);
+    var xtitle = s('text', { class: 'axis-title', x: m.l + pw / 2, y: H - 10, 'text-anchor': 'middle' }, g); xtitle.textContent = 'Cost per task (USD, log scale)';
+    var ytitle = s('text', { class: 'axis-title', transform: 'translate(' + 13 + ' ' + (m.t + ph / 2) + ') rotate(-90)', 'text-anchor': 'middle' }, g); ytitle.textContent = modeLabel() + ' accuracy (%)';
+
+    /* frontier: dashed, as in the paper's Fig. 1 */
+    var fr = frontier().slice().sort(function (a, b) { return cost(a) - cost(b); });
+    s('path', { class: 'frontier', 'aria-hidden': 'true', d: fr.map(function (p, i) { return (i ? 'L' : 'M') + X(cost(p)).toFixed(1) + ' ' + Y(acc(p)).toFixed(1); }).join(' '),
+      fill: 'none', stroke: U.css('--pareto-hi'), 'stroke-width': 2.2, 'stroke-dasharray': '7 5', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, svg);
+
+    var nodes = pts.map(function (p) {
+      var front = isFront(p);
+      return { m: p, x: X(cost(p)), y: Y(acc(p)), r: front ? 6.5 : 5.5, front: front, must: namedInProse(p) };
+    });
+    var leadLayer = s('g', { class: 'leaders', 'aria-hidden': 'true' }, svg);
+    var ptLayer = s('g', { 'aria-hidden': 'true' }, svg);
+    nodes.slice().sort(function (a, b) { return (a.front ? 1 : 0) - (b.front ? 1 : 0); }).forEach(function (n) {
+      n.dot = s('circle', { class: 'pt', cx: n.x, cy: n.y, r: n.r, fill: n.front ? U.css('--pareto-hi') : U.css('--pareto-muted'), stroke: '#fff', 'stroke-width': 2 }, ptLayer);
+    });
+
+    /* ---- label placement: every model where it fits; leader lines when the near slots are taken.
+       Greedy by priority (frontier, then models the paper names, then the rest; crowded points first),
+       with an ambiguity check, and up to three retries that promote any unlabelled priority point. ---- */
+    var labLayer = s('g', { 'aria-hidden': 'true' }, svg);
+    var baseObs = nodes.map(function (n) { return { x1: n.x - n.r - 2, y1: n.y - n.r - 2, x2: n.x + n.r + 2, y2: n.y + n.r + 2, owner: n }; });
+    for (var fi = 1; fi < fr.length; fi++) {
+      var ax = X(cost(fr[fi - 1])), ay = Y(acc(fr[fi - 1])), bx = X(cost(fr[fi])), by = Y(acc(fr[fi]));
+      var steps = Math.max(2, Math.round(Math.hypot(bx - ax, by - ay) / 8));
+      for (var si = 1; si < steps; si++) { var px = ax + (bx - ax) * si / steps, py = ay + (by - ay) * si / steps; baseObs.push({ x1: px - 3, y1: py - 3, x2: px + 3, y2: py + 3 }); }
+    }
+    var bounds = { x1: m.l + 2, y1: 2, x2: W - 2, y2: m.t + ph - 3 };
+    var fs = narrow ? 10.5 : 12;
+    function rectDist(b, x, y) { var dx = Math.max(b.x1 - x, 0, x - b.x2), dy = Math.max(b.y1 - y, 0, y - b.y2); return Math.hypot(dx, dy); }
+
+    function layout(order) {
+      var obstacles = baseObs.slice(), out = [];
+      function hit(b, self) {
+        if (b.x1 < bounds.x1 || b.x2 > bounds.x2 || b.y1 < bounds.y1 || b.y2 > bounds.y2) return true;
+        /* never on top of its own dot either (its padded obstacle is skipped, its bounding box is not) */
+        if (self && b.x1 + 2 < self.x + self.r && b.x2 - 2 > self.x - self.r && b.y1 + 1 < self.y + self.r && b.y2 - 1 > self.y - self.r) return true;
+        for (var i = 0; i < obstacles.length; i++) {
+          var o = obstacles[i];
+          if (o.owner && o.owner === self) continue;
+          if (b.x1 < o.x2 && b.x2 > o.x1 && b.y1 < o.y2 && b.y2 > o.y1) return true;
+        }
+        return false;
+      }
+      function ambiguous(b, self, led) {
+        var own = rectDist(b, self.x, self.y);
+        var bx = (b.x1 + b.x2) / 2, by = (b.y1 + b.y2) / 2, ownC = Math.hypot(bx - self.x, by - self.y);
+        for (var i = 0; i < nodes.length; i++) {
+          var o = nodes[i];
+          if (o === self) continue;
+          var d = rectDist(b, o.x, o.y);
+          if (d < own + 3) return true;
+          /* centre penalty (labels next to their dot; a leader line already shows ownership): a label that
+             runs over or right next to another dot and whose centre is nearer that dot than its own reads as
+             the other model's label (e.g. Claude-Opus-4.8 over the Claude-Opus-4.6 dot) */
+          if (!led && d < 22 && Math.hypot(bx - o.x, by - o.y) < ownC) return true;
+        }
+        return false;
+      }
+      function segClear(x0, y0, x1, y1, self) {
+        var len = Math.hypot(x1 - x0, y1 - y0), n = Math.max(2, Math.ceil(len / 3));
+        for (var i = 1; i < n; i++) {
+          var px = x0 + (x1 - x0) * i / n, py = y0 + (y1 - y0) * i / n;
+          if (hit({ x1: px - 1, y1: py - 1, x2: px + 1, y2: py + 1 }, self)) return false;
+        }
+        return true;
+      }
+      function keep(n, c, b, text, bold, lead) {
+        obstacles.push(b);
+        if (lead) {
+          var len = Math.hypot(lead[2] - lead[0], lead[3] - lead[1]), k = Math.max(2, Math.ceil(len / 4));
+          for (var i = 1; i < k; i++) { var px = lead[0] + (lead[2] - lead[0]) * i / k, py = lead[1] + (lead[3] - lead[1]) * i / k; obstacles.push({ x1: px - 1.5, y1: py - 1.5, x2: px + 1.5, y2: py + 1.5 }); }
+        }
+        out.push({ n: n, c: c, b: b, text: text, bold: bold, lead: lead });
+        return true;
+      }
+      function place(n) {
+        var bold = n.front;
+        var text = n.m.shortName + (n.front && !narrow ? ' [' + U.tok(tok(n.m)) + ']' : '');
+        var font = (bold ? '800 ' : '700 ') + (bold ? fs + 0.5 : fs) + 'px Nunito';
+        var w = Math.ceil(U.textWidth(text, font)), hh = fs + 3, r = n.r;
+        var near = [
+          [n.x + r + 4, n.y + 4, 'start'], [n.x - r - 4, n.y + 4, 'end'],
+          [n.x, n.y - r - 5, 'middle'], [n.x, n.y + r + hh, 'middle'],
+          [n.x + r + 1, n.y - r - 2, 'start'], [n.x - r - 1, n.y - r - 2, 'end'],
+          [n.x + r + 1, n.y + r + hh - 2, 'start'], [n.x - r - 1, n.y + r + hh - 2, 'end']
+        ];
+        if (n.front) near = [near[2], near[4], near[5], near[0], near[1], near[3], near[6], near[7]];
+        /* near the plot edges: a label centred above/below its dot may slide sideways to stay inside,
+           as long as it still spans its own dot */
+        [[n.x, n.y - r - 5], [n.x, n.y + r + hh]].forEach(function (p) {
+          if (p[0] - w / 2 - 2 < bounds.x1 && bounds.x1 + 2 + w - 6 > n.x) near.push([bounds.x1 + 2, p[1], 'start']);
+          if (p[0] + w / 2 + 2 > bounds.x2 && bounds.x2 - 2 - w + 6 < n.x) near.push([bounds.x2 - 2, p[1], 'end']);
+        });
+        function boxFor(c) {
+          var x1 = c[2] === 'start' ? c[0] : c[2] === 'end' ? c[0] - w : c[0] - w / 2;
+          var fsz = bold ? fs + 0.5 : fs;
+          return { x1: x1 - 2, y1: c[1] - fsz * 1.02 - 1, x2: x1 + w + 2, y2: c[1] + fsz * 0.37 + 1 };
+        }
+        for (var i = 0; i < near.length; i++) {
+          var b = boxFor(near[i]);
+          if (!hit(b, n) && !ambiguous(b, n)) return keep(n, near[i], b, text, bold, null);
+        }
+        var angles = [0, 180, -30, -150, 30, 150, -60, -120, 60, 120, -90, 90, -15, -165, 15, 165];
+        /* short leaders only (a long leader across the cloud reads as someone else's label) */
+        var dists = narrow ? [16, 22, 28, 36, 46, 58] : [22, 30, 40, 52, 66];
+        for (var di = 0; di < dists.length; di++) {
+          for (var ai = 0; ai < angles.length; ai++) {
+            var a = angles[ai] * Math.PI / 180, cx = Math.cos(a), cy = Math.sin(a);
+            var lx = n.x + cx * dists[di], ly = n.y + cy * dists[di];
+            var anchor = cx > 0.3 ? 'start' : cx < -0.3 ? 'end' : 'middle';
+            var c = [lx, ly + (cy < -0.3 ? -2 : cy > 0.3 ? hh - 2 : 4), anchor];
+            var bb = boxFor(c);
+            var ex = Math.max(bb.x1, Math.min(n.x, bb.x2)), ey = Math.max(bb.y1, Math.min(n.y, bb.y2));
+            var sx = n.x + cx * (r + 2), sy = n.y + cy * (r + 2);
+            /* the label must still sit closer to its own dot than to any other dot */
+            if (!hit(bb, n) && !ambiguous(bb, n, true) && segClear(sx, sy, ex, ey, n)) return keep(n, c, bb, text, bold, [sx, sy, ex, ey]);
+          }
+        }
+        return false;
+      }
+      order.forEach(place);
+      return out;
+    }
+
+    nodes.forEach(function (n) { n.crowd = nodes.filter(function (o) { return o !== n && Math.hypot(o.x - n.x, o.y - n.y) < 70; }).length; });
+    function byCrowd(a, b) { return b.crowd - a.crowd || acc(b.m) - acc(a.m); }
+    /* phones: label only the frontier and the models the paper names; the rest are in the tooltip and table */
+    var tiers = [nodes.filter(function (n) { return n.front; }),
+      nodes.filter(function (n) { return !n.front && n.must; }).sort(byCrowd),
+      narrow ? [] : nodes.filter(function (n) { return !n.front && !n.must; }).sort(byCrowd)];
+    var result = layout([].concat(tiers[0], tiers[1], tiers[2]));
+    for (var attempt = 0; attempt < 3; attempt++) {
+      var got = result.map(function (x) { return x.n; });
+      var missingPri = tiers[0].concat(tiers[1]).filter(function (n) { return got.indexOf(n) < 0; });
+      if (!missingPri.length) break;
+      tiers.forEach(function (t, ti) { tiers[ti] = missingPri.filter(function (n) { return t.indexOf(n) >= 0; }).concat(t.filter(function (n) { return missingPri.indexOf(n) < 0; })); });
+      var next = layout([].concat(tiers[0], tiers[1], tiers[2]));
+      var nextMissing = tiers[0].concat(tiers[1]).filter(function (n) { return next.map(function (x) { return x.n; }).indexOf(n) < 0; }).length;
+      if (nextMissing < missingPri.length || (nextMissing === missingPri.length && next.length > result.length)) result = next;
+    }
+    result.forEach(function (L) {
+      if (L.lead) s('line', { class: 'leader', x1: L.lead[0].toFixed(1), y1: L.lead[1].toFixed(1), x2: L.lead[2].toFixed(1), y2: L.lead[3].toFixed(1) }, leadLayer);
+      var t = s('text', { class: 'pt-label' + (L.bold ? '' : ' pt-label--muted'), x: L.c[0].toFixed(1), y: L.c[1].toFixed(1), 'text-anchor': L.c[2], style: 'font-size:' + (L.bold ? fs + 0.5 : fs) + 'px' }, labLayer);
+      var i2 = L.text.indexOf(' [');
+      if (L.bold && i2 > 0) {
+        t.appendChild(document.createTextNode(L.text.slice(0, i2)));
+        var ts = s('tspan', { class: 'pt-label__tok' }, t); ts.textContent = L.text.slice(i2);
+      } else t.textContent = L.text;
+      L.n.labelled = true;
+    });
+    /* ---- points that did not get a name get a small number next to their dot, keyed under the chart,
+       placed with the same rules (no collisions; the number sits closer to its own dot than to any other) ---- */
+    var obs2 = baseObs.slice();
+    result.forEach(function (L) {
+      obs2.push(L.b);
+      if (L.lead) { var len = Math.hypot(L.lead[2] - L.lead[0], L.lead[3] - L.lead[1]), k = Math.max(2, Math.ceil(len / 4)); for (var i = 1; i < k; i++) { var px = L.lead[0] + (L.lead[2] - L.lead[0]) * i / k, py = L.lead[1] + (L.lead[3] - L.lead[1]) * i / k; obs2.push({ x1: px - 1.5, y1: py - 1.5, x2: px + 1.5, y2: py + 1.5 }); } }
+    });
+    var keyed = [], nfs = 10.5;
+    /* near-coincident unnamed points (< 8 px apart) share one tag such as "3/4" */
+    var groups = [];
+    nodes.filter(function (n) { return !n.labelled; }).sort(function (a, b) { return a.x - b.x || a.y - b.y; }).forEach(function (n) {
+      var g = groups.filter(function (gr) { return gr.some(function (o) { return Math.hypot(o.x - n.x, o.y - n.y) < 8; }); })[0];
+      if (g) g.push(n); else groups.push([n]);
+    });
+    groups.forEach(function (grp) {
+      var nums = grp.map(function (n, i) { return keyed.length + i + 1; });
+      var txt = nums.join('/'), w = Math.ceil(U.textWidth(txt, '800 ' + nfs + 'px Nunito'));
+      var cx = grp.reduce(function (a, n) { return a + n.x; }, 0) / grp.length, cy = grp.reduce(function (a, n) { return a + n.y; }, 0) / grp.length;
+      var r = Math.max.apply(null, grp.map(function (n) { return n.r + Math.hypot(n.x - cx, n.y - cy); }));
+      var cand = [];
+      [0, 4].forEach(function (d) {
+        cand.push([cx + r + 3 + d, cy + 4, 'start'], [cx - r - 3 - d, cy + 4, 'end'], [cx, cy - r - 3 - d, 'middle'], [cx, cy + r + nfs + 1 + d, 'middle'],
+          [cx + r + 2 + d, cy - r - 1 - d, 'start'], [cx - r - 2 - d, cy - r - 1 - d, 'end'], [cx + r + 2 + d, cy + r + nfs - 1 + d, 'start'], [cx - r - 2 - d, cy + r + nfs - 1 + d, 'end']);
+      });
+      for (var i = 0; i < cand.length; i++) {
+        var c = cand[i], x1 = c[2] === 'start' ? c[0] : c[2] === 'end' ? c[0] - w : c[0] - w / 2;
+        var b = { x1: x1 - 1.5, y1: c[1] - nfs * 1.08 - 1, x2: x1 + w + 1.5, y2: c[1] + nfs * 0.37 + 1 };
+        if (b.x1 < bounds.x1 || b.x2 > bounds.x2 || b.y1 < bounds.y1 || b.y2 > bounds.y2) continue;
+        if (grp.some(function (n) { return b.x1 < n.x + n.r && b.x2 > n.x - n.r && b.y1 < n.y + n.r && b.y2 > n.y - n.r; })) continue;
+        var clash = obs2.some(function (o) { return grp.indexOf(o.owner) < 0 && b.x1 < o.x2 && b.x2 > o.x1 && b.y1 < o.y2 && b.y2 > o.y1; });
+        if (clash) continue;
+        var own = Math.max.apply(null, grp.map(function (n) { return rectDist(b, n.x, n.y); }));
+        if (nodes.some(function (o) { return grp.indexOf(o) < 0 && rectDist(b, o.x, o.y) < own + 3; })) continue;
+        obs2.push(b);
+        var t = s('text', { class: 'pt-num', x: c[0].toFixed(1), y: c[1].toFixed(1), 'text-anchor': c[2], style: 'font-size:' + nfs + 'px' }, labLayer);
+        t.textContent = txt;
+        grp.forEach(function (n) { keyed.push(n); n.labelled = true; });
+        return;
+      }
+    });
+    if (keyed.length) {
+      var key = h('p', { class: 'pt-key' }, h('span', { class: 'legend__title', text: 'Numbered points:' }));
+      keyed.forEach(function (n, i) { key.appendChild(h('span', { class: 'pt-key__i' }, h('b', { text: String(i + 1) }), ' ' + n.m.shortName)); });
+      box.appendChild(key);
+    }
+    var unl = nodes.filter(function (n) { return !n.labelled; }).length;
+
+    /* ---- interaction: nearest-point hover + one Tab stop with arrow keys (ordered by cost) ---- */
+    var hitLayer = s('g', null, svg);
+    var active = null;
+    function activate(n, ev) {
+      if (active && active !== n) deactivate();
+      active = n;
+      n.dot.setAttribute('r', n.r + 2.5);
+      n.dot.setAttribute('stroke', U.css('--ink'));
+      n.dot.setAttribute('stroke-width', 2.5);
+      if (ev) U.tip.show(tipSpec(n.m), ev.clientX, ev.clientY, svg);
+    }
+    function deactivate() {
+      if (!active) return;
+      active.dot.setAttribute('r', active.r);
+      active.dot.setAttribute('stroke', '#fff');
+      active.dot.setAttribute('stroke-width', 2);
+      active = null;
+    }
+    var byCost = nodes.slice().sort(function (a, b) { return cost(a.m) - cost(b.m) || acc(a.m) - acc(b.m); });
+    byCost.forEach(function (n) {
+      n.hit = s('circle', { class: 'pt-hit', cx: n.x, cy: n.y, r: 13, role: 'img',
+        'aria-label': n.m.name + ': ' + modeLabel().toLowerCase() + ' accuracy ' + U.pct(acc(n.m)) + ' percent, ' + U.usd(costTxt(n.m)) + ' per task, ' + U.tok(tok(n.m)) + ' tokens per task' + (n.front ? ', on the Pareto frontier drawn in Fig. 1' : '') }, hitLayer);
+      n.hit.addEventListener('focus', function () { activate(n); U.tip.focus(function () { return tipSpec(n.m); }, n.hit); });
+      n.hit.addEventListener('blur', function () { deactivate(); U.tip.blur(n.hit); });
+    });
+    U.roving(byCost.map(function (n) { return n.hit; }));
+    svg.addEventListener('pointermove', function (e) {
+      var r = svg.getBoundingClientRect(), px = e.clientX - r.left, py = e.clientY - r.top;
+      var best = null, bd = 30 * 30;
+      nodes.forEach(function (n) { var d = (n.x - px) * (n.x - px) + (n.y - py) * (n.y - py); if (d < bd) { bd = d; best = n; } });
+      if (best) activate(best, e); else { deactivate(); U.tip.hide(svg); }
+    });
+    svg.addEventListener('pointerleave', function () { deactivate(); U.tip.hide(svg); });
+
+    var capNote = D.pareto.note.replace(/^.*?\(caption\)\.\s*/, '');
+    U.$('#scatter-cap').textContent = capNote + (unl ? ' ' + unl + (unl === 1 ? ' point is' : ' points are') + ' unlabeled at this width; hover, focus or use the table view.' : '');
+  }
+
+  function scatterMeta() {
+    var n = plotted().length;
+    U.$('#scatter-title').textContent = (mode === 'text' ? '(a) Text' : '(b) Multimodal') + ': accuracy vs. cost per task';
+    U.$('#scatter-sub').textContent = 'The ' + n + ' API models plotted in the paper’s Fig. 1' + (mode === 'text' ? '(a)' : '(b)') + '. Accuracy is the Table 1 ' + (mode === 'text' ? 'Text Avg' : 'MM Avg') + '; cost is the Table 2 reference cost. On wider screens, frontier labels show tokens per task, as in the paper.';
+    var lg = U.$('#scatter-legend');
+    lg.textContent = '';
+    lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__line legend__line--dash' }), 'Pareto frontier (dashed, as drawn in Fig. 1)'));
+    lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__dot', style: { background: 'var(--pareto-muted)' } }), 'Other API models'));
+    var rows = plotted().slice().sort(function (a, b) { return cost(a) - cost(b); });
+    U.tableView(U.$('#scatter-table'), U.table([
+      { label: 'Model', get: modelCell },
+      { label: 'Vendor', cls: 'col-vendor', get: function (m) { return m.vendor; } },
+      { label: 'Accuracy (%)', num: true, get: function (m) { return U.pct(acc(m)); } },
+      { label: 'Cost / task', num: true, get: function (m) { return U.usd(costTxt(m)); } },
+      { label: 'Tokens / task', num: true, get: function (m) { return U.tok(tok(m)); } },
+      { label: 'Frontier (Fig. 1)', get: function (m) { return isFront(m) ? 'Yes' : ''; } }
+    ], rows, modeLabel() + ': accuracy and cost of the models in Fig. 1, sorted by cost'));
+  }
+  /* table views: on phones the Vendor column folds into a second line of the model cell */
+  function modelCell(m) { return [m.name, h('span', { class: 'cell-sub', text: m.vendor })]; }
+
+  function notes() {
+    var aside = U.$('#cost-notes');
+    aside.textContent = '';
+    var chain = h('ol', { class: 'chain' });
+    D.pareto[mode].map(U.model).forEach(function (m) {
+      chain.appendChild(h('li', null, h('b', { text: m.shortName }), h('span', { class: 'num', text: U.usd(costTxt(m)) + ' · ' + U.pct(acc(m)) + '%' })));
+    });
+    aside.appendChild(h('div', { class: 'note-card' },
+      h('h3', null, U.icon('i-frontier'), (mode === 'text' ? 'Text' : 'Multimodal') + ' frontier, cheapest first'),
+      chain));
+    var f = finding('pareto');
+    aside.appendChild(h('div', { class: 'note-card' }, h('h3', { text: 'What the paper observes' }), h('p', null, U.emphNums(f.statement))));
+    var lt = finding('local-tokens');
+    if (lt) aside.appendChild(h('div', { class: 'note-card' }, h('h3', null, U.icon('i-server'), 'And the local models? (' + lt.section + ')'), h('p', null, U.emphNums(lt.statement))));
+  }
+
+  /* ---------------- tokens vs dollars: shared rows, token bars (linear) + cost dots (log) ---------------- */
+  function drawTokens() {
+    var box = U.$('#tokens-box');
+    var W = Math.max(260, Math.round(box.clientWidth));
+    /* phones: two full-width panels (tokens, then cost) in the same row order, names above the marks,
+       so each plot keeps the full card width instead of ~50 px beside a name column */
+    var stacked = W < 600, wide = W >= 820, compact = W < 700;
+    var list = apiModels();
+    var rows = list.slice().sort(tokSort === 'tokens'
+      ? function (a, b) { return tok(a) - tok(b) || cost(a) - cost(b); }
+      : function (a, b) { return cost(a) - cost(b) || tok(a) - tok(b); });
+    var byTok = list.slice().sort(function (a, b) { return tok(a) - tok(b); });
+    var byCost = list.slice().sort(function (a, b) { return cost(a) - cost(b); });
+    var tags = {};
+    function tag(m, t) { (tags[m.name] = tags[m.name] || []).push(t); }
+    tag(byTok[0], 'fewest tokens'); tag(byTok[byTok.length - 1], 'most tokens');
+    tag(byCost[0], 'cheapest'); tag(byCost[byCost.length - 1], 'most expensive');
+    var maxTok = tok(byTok[byTok.length - 1]);
+    var cLo = Math.log10(cost(byCost[0]) / 1.4), cHi = Math.log10(cost(byCost[byCost.length - 1]) * 1.25);
+    var color = modeColor();
+    var fs = stacked ? 12 : compact ? 11.5 : 12.5;
+    var tickFont = '400 12.5px Nunito';
+
+    box.textContent = '';
+    var hits = [], rowEls = {};
+    function hot(m, on) { (rowEls[m.name] || []).forEach(function (g) { g.classList.toggle('is-hot', on); }); }
+    function rightRound(x, y, w, h) {
+      /* bar with a rounded data end (radius <= half the width, so short bars stay proportional) */
+      var r = Math.min(4, w / 2, h / 2);
+      return 'M' + x + ' ' + y + ' h' + (w - r) + ' a' + r + ' ' + r + ' 0 0 1 ' + r + ' ' + r + ' v' + (h - 2 * r) + ' a' + r + ' ' + r + ' 0 0 1 -' + r + ' ' + r + ' h-' + (w - r) + ' z';
+    }
+    function costTicks(x0, x1, CX) {
+      var t = [];
+      for (var e = Math.floor(cLo); e <= Math.ceil(cHi); e++) [1, 2, 5].forEach(function (k) {
+        var v = k * Math.pow(10, e);
+        if (Math.log10(v) >= cLo && Math.log10(v) <= cHi) t.push({ v: v, k: k, x: CX(v) });
+      });
+      return { all: t, labelled: U.fitTicks(t, U.usdTick, x0, x1, tickFont, 10) };
+    }
+    function label(m) {
+      return m.name + ': ' + U.tok(tok(m)) + ' tokens per task, ' + U.usd(costTxt(m)) + ' per task' + (tags[m.name] ? ' (' + tags[m.name].join(', ') + ')' : '');
+    }
+    function wire(hitR, m, focusable) {
+      hitR.addEventListener('pointermove', function (ev) { hot(m, true); U.tip.show(tipSpec(m), ev.clientX, ev.clientY, hitR); });
+      hitR.addEventListener('pointerleave', function () { hot(m, false); U.tip.hide(hitR); });
+      if (!focusable) return;
+      hitR.addEventListener('focus', function () { hot(m, true); U.tip.focus(function () { return tipSpec(m); }, hitR); });
+      hitR.addEventListener('blur', function () { hot(m, false); U.tip.blur(hitR); });
+      hits.push(hitR);
+    }
+    var svg, ax, H;
+
+    if (stacked) {
+      var rowH = 27, head = 46, pgap = 30;
+      var panelH = head + rows.length * rowH;
+      H = panelH * 2 + pgap;
+      var barMax = W - 2;
+      var CXs = function (c) { return 6 + (Math.log10(c) - cLo) / (cHi - cLo) * (W - 12); };
+      svg = s('svg', { width: W, height: H, viewBox: '0 0 ' + W + ' ' + H, role: 'group', 'aria-label': 'API models ' + (tokSort === 'tokens' ? 'sorted by tokens per task' : 'sorted by cost per task') + ': first panel, token bars on a linear scale; second panel, cost dots on a log scale, in the same row order. One Tab stop: use the arrow keys to move between models.' }, box);
+      ax = s('g', { class: 'axis', 'aria-hidden': 'true' }, svg);
+      var hdr = function (y, txt) { var t = s('text', { class: 'chains-head', x: 0, y: y }, ax); t.textContent = txt; };
+      var tickTxt = function (x, y, txt, anchor) { var t = s('text', { class: 'tick', x: x, y: y, 'text-anchor': anchor }, ax); t.textContent = txt; };
+      /* panel 1: tokens */
+      hdr(16, 'Tokens per task');
+      var tstep = maxTok > 300 ? 200 : 100;
+      for (var tv = 0; tv <= maxTok; tv += tstep) {
+        var tx = tv / maxTok * barMax;
+        s('line', { class: 'grid-line', x1: tx, x2: tx, y1: head - 6, y2: panelH }, ax);
+        tickTxt(tx, head - 12, tv === 0 ? '0' : tv + 'k', tv === 0 ? 'start' : 'middle');
+      }
+      /* panel 2: cost (log) */
+      var y2 = panelH + pgap;
+      hdr(y2 + 16, 'Cost per task (USD, log scale)');
+      var ct = costTicks(0, W, CXs);
+      ct.all.forEach(function (o) { s('line', { class: 'grid-line', x1: o.x, x2: o.x, y1: y2 + head - 6, y2: H }, ax); });
+      ct.labelled.forEach(function (o) { tickTxt(o.x, y2 + head - 12, U.usdTick(o.v), 'middle'); });
+      rows.forEach(function (m, i) {
+        rowEls[m.name] = [];
+        [0, 1].forEach(function (panel) {
+          var y = (panel ? y2 : 0) + head + i * rowH;
+          var gr = s('g', { class: 'tk-row' + (tags[m.name] ? ' is-key' : ''), transform: 'translate(0 ' + y + ')', 'aria-hidden': 'true' }, svg);
+          rowEls[m.name].push(gr);
+          s('rect', { class: 'tk-band', x: -4, y: 0, width: W + 8, height: rowH - 1, rx: 6 }, gr);
+          var nm = s('text', { class: 'nm', x: 0, y: 11.5, style: 'font-size:' + fs + 'px' }, gr); nm.textContent = m.shortName;
+          var val = s('text', { class: 'val', x: W, y: 11.5, 'text-anchor': 'end', style: 'font-size:' + (fs - 0.5) + 'px' }, gr);
+          if (panel === 0) {
+            val.textContent = U.tok(tok(m));
+            s('path', { d: rightRound(0, 15, Math.max(1, tok(m) / maxTok * barMax), 8), fill: color }, gr);
+          } else {
+            val.textContent = U.usd(costTxt(m));
+            s('line', { class: 'tk-stem', x1: 0, x2: CXs(cost(m)), y1: 19, y2: 19 }, gr);
+            s('circle', { cx: CXs(cost(m)), cy: 19, r: 5, fill: color, stroke: '#fff', 'stroke-width': 2 }, gr);
+          }
+          var hitR = s('rect', { class: 'tk-hit', x: 0, y: y, width: W, height: rowH, rx: 6 }, svg);
+          if (panel === 0) { hitR.setAttribute('role', 'img'); hitR.setAttribute('aria-label', label(m)); }
+          else hitR.setAttribute('aria-hidden', 'true');
+          wire(hitR, m, panel === 0);
+        });
+      });
+    } else {
+      var nameW = Math.ceil(Math.max.apply(null, list.map(function (m) { return U.textWidth(m.shortName, '800 ' + fs + 'px Nunito'); }))) + 10;
+      var valW = compact ? 46 : 52, tagW = wide ? 150 : 0, gap = compact ? 16 : 22;
+      var panelW = (W - nameW - valW - tagW - gap * 2) / 2;
+      var tokX = nameW + 6, tokValPad = compact ? 36 : 40, tokBarMax = panelW - tokValPad;
+      var costX = tokX + panelW + gap, costW = panelW;
+      var rowH2 = compact ? 24 : 26, head2 = 54;
+      H = head2 + rows.length * rowH2 + 8;
+      var CX = function (c) { return costX + 6 + (Math.log10(c) - cLo) / (cHi - cLo) * (costW - 12); };
+      svg = s('svg', { width: W, height: H, viewBox: '0 0 ' + W + ' ' + H, role: 'group', 'aria-label': 'API models ' + (tokSort === 'tokens' ? 'sorted by tokens per task' : 'sorted by cost per task') + ': token bars on a linear scale and cost dots on a log scale. One Tab stop: use the arrow keys to move between rows.' }, box);
+      ax = s('g', { class: 'axis', 'aria-hidden': 'true' }, svg);
+      var headText = function (x, y, txt, cls, anchor) { var t = s('text', { class: cls, x: x, y: y, 'text-anchor': anchor || 'start' }, ax); t.textContent = txt; return t; };
+      headText(tokX, 16, 'Tokens per task', 'chains-head');
+      headText(costX, 16, compact ? 'Cost per task (log)' : 'Cost per task (USD, log)', 'chains-head');
+      var tstep2 = maxTok > 300 ? 200 : 100;
+      for (var tv2 = 0; tv2 <= maxTok; tv2 += tstep2) {
+        var x = tokX + tv2 / maxTok * tokBarMax;
+        s('line', { class: 'grid-line', x1: x, x2: x, y1: head2 - 6, y2: H - 6 }, ax);
+        headText(x, head2 - 12, tv2 === 0 ? '0' : tv2 + 'k', 'tick', tv2 === 0 ? 'start' : 'middle');
+      }
+      var ct2 = costTicks(costX, costX + costW, CX);
+      ct2.all.forEach(function (o) { s('line', { class: 'grid-line', x1: o.x, x2: o.x, y1: head2 - 6, y2: H - 6 }, ax); });
+      ct2.labelled.forEach(function (o) { headText(o.x, head2 - 12, U.usdTick(o.v), 'tick', 'middle'); });
+      rows.forEach(function (m, i) {
+        var y = head2 + i * rowH2;
+        var gr = s('g', { class: 'tk-row' + (tags[m.name] ? ' is-key' : ''), transform: 'translate(0 ' + y + ')', 'aria-hidden': 'true' }, svg);
+        rowEls[m.name] = [gr];
+        s('rect', { class: 'tk-band', x: 0, y: 1, width: W, height: rowH2 - 2, rx: 6 }, gr);
+        var cy = rowH2 / 2;
+        var nm = s('text', { class: 'nm', x: nameW - 4, y: cy + 4.5, 'text-anchor': 'end', style: 'font-size:' + fs + 'px' }, gr); nm.textContent = m.shortName;
+        var bw = Math.max(1, tok(m) / maxTok * tokBarMax);
+        var bh = Math.min(12, rowH2 - 12);
+        s('path', { d: rightRound(tokX, cy - bh / 2, bw, bh), fill: color }, gr);
+        var tvt = s('text', { class: 'val', x: tokX + bw + 5, y: cy + 4.5, style: 'font-size:' + (fs - 0.5) + 'px' }, gr); tvt.textContent = U.tok(tok(m));
+        s('line', { class: 'tk-stem', x1: costX + 6, x2: CX(cost(m)), y1: cy, y2: cy }, gr);
+        s('circle', { cx: CX(cost(m)), cy: cy, r: 5.5, fill: color, stroke: '#fff', 'stroke-width': 2 }, gr);
+        var cvt = s('text', { class: 'val', x: W - tagW - 2, y: cy + 4.5, 'text-anchor': 'end', style: 'font-size:' + (fs - 0.5) + 'px' }, gr); cvt.textContent = U.usd(costTxt(m));
+        if (wide && tags[m.name]) {
+          var tg = s('text', { class: 'tk-tag', x: W - tagW + 12, y: cy + 5 }, gr);
+          tg.textContent = '← ' + tags[m.name].join(', ');
+        }
+        var hitR = s('rect', { class: 'tk-hit', x: 0, y: y, width: W, height: rowH2, role: 'img', 'aria-label': label(m) }, svg);
+        wire(hitR, m, true);
+      });
+    }
+    U.roving(hits);
+
+    U.$('#tokens-sub').textContent = 'Tokens and reference cost per task for the ' + list.length + ' API models in Table 2 (' + (mode === 'text' ? 'Text Avg' : 'MM Avg') + (stacked ? '), in the same row order in both panels. ' : '), on shared rows. ') +
+      (tokSort === 'tokens' ? 'Rows are sorted by tokens: if tokens predicted cost, the dots would climb steadily to the right.' : 'Rows are sorted by cost: if cost predicted tokens, the bars would grow steadily.');
+    var cap = U.$('#tokens-cap');
+    cap.textContent = '';
+    var ext = h('p', { class: 'tokens-ext' });
+    [['fewest tokens', byTok[0], U.tok(tok(byTok[0]))], ['most tokens', byTok[byTok.length - 1], U.tok(tok(byTok[byTok.length - 1]))],
+      ['cheapest', byCost[0], U.usd(costTxt(byCost[0]))], ['most expensive', byCost[byCost.length - 1], U.usd(costTxt(byCost[byCost.length - 1]))]].forEach(function (x) {
+      ext.appendChild(h('span', { class: 'tokens-ext__i' }, h('span', { class: 'scribble scribble--sm', text: x[0] }), h('b', { text: x[1].shortName }), ' ' + x[2]));
+    });
+    cap.appendChild(ext);
+    cap.appendChild(h('p', { class: 'note' }, U.emphNums(finding('tokens-vs-dollars').statement)));
+
+    U.tableView(U.$('#tokens-table'), U.table([
+      { label: 'Model', get: modelCell },
+      { label: 'Vendor', cls: 'col-vendor', get: function (m) { return m.vendor; } },
+      { label: 'Tokens / task', num: true, get: function (m) { return U.tok(tok(m)); } },
+      { label: 'Cost / task', num: true, get: function (m) { return U.usd(costTxt(m)); } },
+      { label: 'Accuracy (%)', num: true, get: function (m) { return U.pct(acc(m)); } }
+    ], rows, modeLabel() + ': API models (Table 2), ' + (tokSort === 'tokens' ? 'sorted by tokens per task' : 'sorted by cost per task')));
+  }
+
+  function renderAll() { scatterMeta(); drawScatter(); notes(); drawTokens(); }
+
+  U.initCost = function () {
+    U.$('#cost-lead').textContent = 'Reference cost per task comes from public API prices, so the paper analyzes accuracy–cost trade-offs for API models. Text and multimodal workloads trace different Pareto frontiers, and the models that use the fewest tokens are not the ones that cost the least.';
+    U.seg(U.$('#cost-mode'), [
+      { value: 'text', label: 'Text', dot: 'var(--series-text)' },
+      { value: 'mm', label: 'Multimodal', dot: 'var(--series-mm)' }
+    ], mode, function (v) { mode = v; renderAll(); });
+    U.seg(U.$('#tokens-sort'), [
+      { value: 'tokens', label: 'Sort by tokens' },
+      { value: 'cost', label: 'Sort by cost' }
+    ], tokSort, function (v) { tokSort = v; drawTokens(); });
+    var f1 = U.fig('fig1');
+    U.$('#fig1-btn-lab').textContent = 'Paper’s ' + f1.label;
+    U.$('#fig1-btn').setAttribute('aria-label', 'Open the paper’s ' + f1.label + ' (accuracy–cost plot) in a larger view');
+    U.$('#fig1-btn').addEventListener('click', function () { U.lightbox(U.IMG + f1.file, f1.alt, f1.label + '. ' + f1.caption); });
+    renderAll();
+    /* labels are measured with the web font: redraw once it has loaded */
+    if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { drawScatter(); drawTokens(); });
+    U.onResize(U.$('#scatter-box'), function () { drawScatter(); });
+    U.onResize(U.$('#tokens-box'), function () { drawTokens(); });
+    document.addEventListener('viewtoggle', function (e) { if (!e.detail.table) { if (e.detail.target === 'scatter') drawScatter(); if (e.detail.target === 'tokens') drawTokens(); } });
+  };
+  U.costMode = function () { return mode; };
+})();

assets/js/leaderboard.js

@@ -0,0 +1,315 @@
+/* Interactive leaderboard: paper Table 1 (audited accuracy), every model in data.js.
+   Column order follows Table 1 (Text groups, Text Avg, MM groups, MM Avg) plus Overall (Eq. 11). */
+(function () {
+  'use strict';
+  var U = window.U, D = U.D, h = U.h, S = D.stats;
+  var state = { track: 'full', deploy: 'all', style: 'bars', sort: 'overall', dir: 'desc' };
+  var segs = {};
+  /* heat mode: four bins on teal steps 400-700, the subset that passes the ordinal checks
+     (light end 2.16:1 on white; validate_palette --ordinal). Thresholds are display scaffolding. */
+  var BINS = [40, 60, 80];
+  var STEPS = [400, 500, 600, 700];
+  var compact = false; // summary columns first + swipe hint: used whenever the full layout overflows
+  var FORM_SHORT = { 'single-step': 'Single', 'multi-step': 'Multi', 'multi-step+tools': 'Multi+Tools' };
+
+  function isStated(m) { return /^paper prose/.test(m.overallSource || ''); }
+  function colDefs() {
+    var c = [];
+    U.TEXT_GROUPS.forEach(function (g) { c.push({ key: g.key, label: g.label, short: FORM_SHORT[g.form], long: g.longLabel, group: g.key, mod: 'text', get: function (m) { return m.acc[g.key]; } }); });
+    c.push({ key: 'textAvg', label: 'Text Avg', short: 'Avg', long: 'Text average (Table 1, task-weighted)', avg: true, mod: 'text', get: function (m) { return m.textAvg; } });
+    if (state.track === 'full') {
+      U.MM_GROUPS.forEach(function (g) { c.push({ key: g.key, label: g.label, short: FORM_SHORT[g.form], long: g.longLabel, group: g.key, mod: 'mm', get: function (m) { return m.acc[g.key]; } }); });
+      c.push({ key: 'mmAvg', label: 'MM Avg', short: 'Avg', long: 'Multimodal average (Table 1, task-weighted)', avg: true, mod: 'mm', get: function (m) { return m.mmAvg; } });
+      c.push({ key: 'overall', label: 'Overall', short: 'Overall', long: 'Overall accuracy over all applicable tasks (Eq. 11)', avg: true, overall: true, mod: 'all', get: function (m) { return m.textOnly ? null : m.overall; } });
+    }
+    if (compact) {
+      /* the table overflows its card: summary columns first so they are visible without swiping */
+      var avgs = c.filter(function (x) { return x.avg; }).sort(function (a, b) { return (b.overall ? 1 : 0) - (a.overall ? 1 : 0); });
+      var groups = c.filter(function (x) { return !x.avg; });
+      if (groups.length) groups[0].sep = true;
+      return avgs.concat(groups);
+    }
+    c.forEach(function (x) { if (x.overall || (x.mod === 'mm' && x.group === U.MM_GROUPS[0].key)) x.sep = true; });
+    return c;
+  }
+  function depOk(m) { return state.deploy === 'all' || m.deployment === state.deploy; }
+  function step(v) { var i = 0; while (i < BINS.length && v >= BINS[i]) i++; return STEPS[i]; }
+  function overallNote(m) {
+    if (isStated(m)) return 'Stated in the paper (' + m.overallSource.replace(/^paper prose\s*\(?/, '').replace(/\)$/, '') + ')';
+    return 'Derived with the paper’s definition: task-count-weighted over ' + m.overallTasks + ' tasks (Eq. 11), from the Table 1 Text Avg (' + S.textTasks + ' tasks) and MM Avg (' + S.mmTasks + ' tasks)';
+  }
+  function barColor(c) { return c.overall ? 'var(--series-overall)' : c.mod === 'text' ? 'var(--series-text)' : 'var(--series-mm)'; }
+
+  /* Render in the full layout; if the table then overflows its scroller, re-render compact. */
+  function render() {
+    compact = false;
+    draw();
+    var sc = U.$('#lb-table').parentNode, t = U.$('#lb-table');
+    if (t.getBoundingClientRect().width > sc.clientWidth + 1) { compact = true; draw(); }
+    overflowUi();
+  }
+  var FADE = 40; // the right-edge fade of an overflowing table (style.css mask, 36 px) plus a little air
+  function overflowUi() {
+    var sc = U.$('#lb-table').parentNode, card = sc.closest('.lb');
+    var over = sc.scrollWidth > sc.clientWidth + 1;
+    card.classList.toggle('is-overflow', over);
+    sc.classList.toggle('at-end', !over || sc.scrollLeft + sc.clientWidth >= sc.scrollWidth - 2);
+    /* the visible width of the scroller: the full-width notice row wraps inside it instead of running
+       past the right edge */
+    sc.style.setProperty('--lb-vis', sc.clientWidth + 'px');
+    /* keyboard focus never lands under the sticky Rank · Model column or the right-edge fade (WCAG 2.4.11) */
+    var st = U.$('#lb-table thead th.c-model');
+    sc.style.scrollPaddingLeft = over && st ? st.offsetWidth + 'px' : '';
+    sc.style.scrollPaddingRight = over ? FADE + 'px' : '';
+  }
+  /* fallback for browsers that ignore scroll-padding when focus scrolls: bring the focused control
+     fully into the part of the scroller that the sticky column and the fade do not cover */
+  function revealFocused(e) {
+    var el = e.target, sc = U.$('#lb-table').parentNode;
+    if (!el || !el.classList || !el.classList.contains('sort-btn') || !sc.contains(el)) return;
+    var st = U.$('#lb-table thead th.c-model');
+    var s = sc.getBoundingClientRect(), r = el.getBoundingClientRect();
+    var left = s.left + (st ? st.getBoundingClientRect().width : 0), right = s.left + sc.clientWidth - (sc.scrollWidth > sc.clientWidth + 1 ? FADE : 0);
+    if (r.left < left) sc.scrollLeft -= left - r.left;
+    else if (r.right > right) sc.scrollLeft += Math.min(r.right - right, r.left - left);
+  }
+  function draw() {
+    var C = colDefs();
+    var main, extra = [];
+    if (state.track === 'full') {
+      main = D.models.filter(function (m) { return !m.textOnly && depOk(m); });
+      extra = D.models.filter(function (m) { return m.textOnly && depOk(m); });
+    } else {
+      main = D.models.filter(depOk);
+    }
+    var sortCol = C.filter(function (c) { return c.key === state.sort; })[0];
+    if (!sortCol) { state.sort = state.track === 'full' ? 'overall' : 'textAvg'; state.dir = 'desc'; sortCol = C.filter(function (c) { return c.key === state.sort; })[0]; }
+    var ranks = U.rank(main, sortCol.get);
+    function cmp(a, b) {
+      var va = sortCol.get(a), vb = sortCol.get(b);
+      if (va == null && vb == null) return 0; if (va == null) return 1; if (vb == null) return -1;
+      var d = vb - va;
+      if (d === 0) d = D.models.indexOf(a) - D.models.indexOf(b); // ties keep Table 1 order
+      return state.dir === 'desc' ? d : -d;
+    }
+    main.sort(cmp); extra.sort(cmp);
+    /* best value per column among every row shown (text-only rows included for text columns, as Table 1 marks places) */
+    var best = {};
+    C.forEach(function (c) { var mx = null; main.concat(extra).forEach(function (m) { var v = c.get(m); if (v != null && (mx == null || v > mx)) mx = v; }); best[c.key] = mx; });
+
+    var t = U.$('#lb-table');
+    t.textContent = '';
+    t.className = 'lb-table style-' + state.style + (state.track === 'text' ? ' lb-table--text' : '');
+    t.appendChild(h('caption', { class: 'sr-only', attrs: { id: 'lb-caption' } },
+      'Leaderboard, ' + (state.track === 'full' ? 'full track (text and multimodal)' : 'text track') + ', ' +
+      (state.deploy === 'all' ? 'all models' : state.deploy === 'api' ? 'API models' : 'local models') + ', sorted by ' + sortCol.long + ' ' + (state.dir === 'desc' ? 'descending' : 'ascending') + '. Audited accuracy in percent.'));
+
+    var thead = h('thead');
+    var gr = h('tr', { class: 'lb-groups' + (compact ? ' is-hidden-row' : '') });
+    gr.appendChild(h('td', { class: 'c-model sticky' }));
+    var nText = C.filter(function (c) { return c.mod === 'text'; }).length, nMM = C.filter(function (c) { return c.mod === 'mm'; }).length;
+    gr.appendChild(h('th', { attrs: { colspan: String(nText), scope: 'colgroup' }, class: 'grp grp--text' }, h('span', { class: 'gdot', style: { background: 'var(--series-text)' } }), 'Text'));
+    if (nMM) gr.appendChild(h('th', { attrs: { colspan: String(nMM), scope: 'colgroup' }, class: 'grp grp--mm' }, h('span', { class: 'gdot', style: { background: 'var(--series-mm)' } }), 'Multimodal'));
+    if (state.track === 'full') gr.appendChild(h('th', { attrs: { scope: 'col' }, class: 'grp grp--all', text: 'All' }));
+    thead.appendChild(gr);
+
+    var hr = h('tr');
+    hr.appendChild(h('th', { attrs: { scope: 'col' }, class: 'c-model sticky' }, h('span', { class: 'c-model__h', text: 'Rank · Model' })));
+    C.forEach(function (c) {
+      var th = h('th', { class: (c.avg ? 'is-avg' : '') + (c.overall ? ' is-overall' : '') + (c.sep ? ' is-sep' : ''), attrs: { scope: 'col', 'aria-sort': c.key === state.sort ? (state.dir === 'desc' ? 'descending' : 'ascending') : 'none' } });
+      /* accessible name starts with the visible label (WCAG 2.5.3); th[aria-sort] carries the sort state */
+      var b = h('button', { class: 'sort-btn', attrs: { type: 'button', 'data-col': c.key } });
+      var inner = h('span', { class: 'sort-btn__lab' });
+      if (c.group) inner.appendChild(h('span', { class: 'gtick', style: { background: U.wlVar(c.group) } }));
+      inner.appendChild(h('span', { class: 'lab-lg', text: c.label }));
+      inner.appendChild(h('span', { class: 'sr-only', text: 'sort by ' + c.long }));
+      b.appendChild(inner);
+      b.appendChild(h('span', { class: 'arr', attrs: { 'aria-hidden': 'true' }, text: c.key === state.sort ? (state.dir === 'desc' ? '▼' : '▲') : '▽' }));
+      b.addEventListener('click', function () {
+        if (state.sort === c.key) state.dir = state.dir === 'desc' ? 'asc' : 'desc';
+        else { state.sort = c.key; state.dir = 'desc'; }
+        render();
+        var again = U.$('#lb-table thead .sort-btn[data-col="' + c.key + '"]');
+        if (again) again.focus();
+        var line = U.$('#lb-bubble .narrator-bubble__line');
+        U.$('#live').textContent = 'Sorted by ' + c.long + ', ' + (state.dir === 'desc' ? 'highest first' : 'lowest first') + '. ' + (line ? line.textContent : '');
+      });
+      th.appendChild(b);
+      hr.appendChild(th);
+    });
+    thead.appendChild(hr);
+    t.appendChild(thead);
+
+    var tb = h('tbody');
+    main.forEach(function (m) { tb.appendChild(row(m, C, ranks.get(m), best, sortCol)); });
+    t.appendChild(tb);
+    if (extra.length) {
+      var tb2 = h('tbody', { class: 'lb-extra' });
+      var btn = h('button', { class: 'linkish', attrs: { type: 'button' } }, 'Compare them in the Text track');
+      btn.addEventListener('click', function () { U.lbSet({ track: 'text' }); var r = U.$('#lb-track [aria-checked="true"]'); if (r) r.focus(); });
+      tb2.appendChild(h('tr', { class: 'lb-divider' }, h('td', { attrs: { colspan: String(C.length + 1) } },
+        h('span', { class: 'lb-divider__in' }, U.icon('i-info'), h('span', null, 'Text-only models: evaluated on the ' + U.int(S.textTasks) + ' text tasks only, so they have no multimodal scores and no Overall here. Not ranked in this track. ', btn)))));
+      extra.forEach(function (m) { tb2.appendChild(row(m, C, null, best, sortCol)); });
+      t.appendChild(tb2);
+    }
+
+    notes(main, extra);
+    legend();
+    bubble(sortCol, main);
+  }
+
+  function row(m, C, r, best, sortCol) {
+    var tr = h('tr', { class: m.textOnly && state.track === 'full' ? 'is-extra' : '' });
+    var rc;
+    if (r == null) rc = h('span', { class: 'c-rank c-rank--none', attrs: { 'aria-hidden': 'true' } });
+    else if (r <= 3) rc = h('span', { class: 'medal medal--' + r, text: String(r), attrs: { title: 'Rank ' + r + ' by ' + sortCol.label + ' in this view' } });
+    else rc = h('span', { class: 'c-rank', text: String(r) });
+    var meta = h('span', { class: 'm-meta' },
+      h('span', { class: 'm-dep m-dep--' + m.deployment, text: m.deployment === 'api' ? 'API' : 'Local' }),
+      h('span', { class: 'm-vendor', text: m.vendor }));
+    if (m.textOnly) meta.appendChild(h('span', { class: 'm-tag', text: 'text-only' }));
+    tr.appendChild(h('th', { class: 'c-model sticky', attrs: { scope: 'row' } }, h('div', { class: 'c-model__in' }, rc, h('div', null, h('span', { class: 'm-name', text: m.name }), meta))));
+    C.forEach(function (c) {
+      var v = c.get(m);
+      var td = h('td', { class: 'cellv' + (c.avg ? ' is-avg' : '') + (c.overall ? ' is-overall' : '') + (c.key === state.sort ? ' is-sorted' : '') + (c.sep ? ' is-sep' : ''), data: { m: m.name, c: c.key } });
+      if (v == null) {
+        td.classList.add('is-na');
+        td.appendChild(h('span', { attrs: { 'aria-hidden': 'true' }, text: '—' }));
+        td.appendChild(h('span', { class: 'sr-only', text: m.textOnly ? 'not evaluated (text-only model)' : 'not available' }));
+        tr.appendChild(td); return;
+      }
+      var isBest = v === best[c.key];
+      var cell = h('span', { class: 'cell' });
+      if (isBest) { td.classList.add('is-best'); cell.appendChild(U.icon('i-crown', 'crown')); }
+      cell.appendChild(h('span', { class: 'v', text: U.pct(v) }));
+      if (c.overall && isStated(m)) cell.appendChild(h('span', { class: 'stated', attrs: { title: 'Value stated in the paper’s text' }, text: '◆' }));
+      if (state.style === 'heat') {
+        var s = step(v);
+        td.style.background = 'var(--seq-' + s + ')';
+        td.style.color = 'var(--seq-' + s + '-on)';
+      } else {
+        cell.appendChild(h('span', { class: 'cbar', attrs: { 'aria-hidden': 'true' } }, h('span', { style: { width: v + '%', background: barColor(c) } })));
+      }
+      td.appendChild(cell);
+      if (isBest) td.appendChild(h('span', { class: 'sr-only', text: ' (best in column)' }));
+      if (c.overall && isStated(m)) td.appendChild(h('span', { class: 'sr-only', text: ' (stated in the paper)' }));
+      tr.appendChild(td);
+    });
+    return tr;
+  }
+
+  function notes(main, extra) {
+    var textOnly = D.models.filter(function (m) { return m.textOnly; }).length;
+    var note = U.$('#lb-note');
+    note.textContent = '';
+    note.appendChild(U.icon('i-info'));
+    if (state.track === 'full') {
+      note.appendChild(h('span', { text: 'Full track: the ' + S.multimodalModels + ' multimodal-capable models, ranked over all ' + S.tasks + ' tasks. The ' + textOnly + ' text-only models were not evaluated on multimodal tasks; they are listed below the ranking and compete in the Text track (' + S.textTasks + ' text tasks).' }));
+    } else {
+      note.appendChild(h('span', { text: 'Text track: all ' + S.models + ' models on the ' + S.textTasks + ' text tasks, ranked by the paper’s Text Avg by default. Text-only models are tagged.' }));
+    }
+    var foot = U.$('#lb-foot');
+    foot.textContent = '';
+    var stated = D.models.filter(isStated);
+    foot.appendChild(h('p', null, h('strong', { text: 'Audited scores. ' }), 'Every accuracy is computed from audited task scores, ' + D.audit.rule.replace(/\.$/, '') + '. Group accuracies and the Text/MM averages are the paper’s Table 1 values (averages are task-count-weighted).'));
+    if (state.track === 'full') {
+      foot.appendChild(h('p', null, h('strong', { text: 'Overall. ' }),
+        'Table 1 has no Overall column. Overall is the task-count-weighted mean over each model’s applicable tasks (Eq. 11). Values the paper states in its text are shown as stated and marked ',
+        h('span', { class: 'stated', text: '◆' }), ' (' + stated.map(function (m) { return m.shortName + ' ' + U.pct(m.overall); }).join(', ') + '); the others are derived from Table 1 with the same definition.'));
+    }
+    foot.appendChild(h('p', null, h('strong', { text: 'Places. ' }), 'Table 1 marks first to third place within each deployment mode. Here the medals follow the current track, filter and sort column (competition ranking; ties share a place), and a crown marks the best value in each column among the rows shown.'));
+  }
+
+  function legend() {
+    var lg = U.$('#lb-legend');
+    lg.textContent = '';
+    if (state.style === 'heat') {
+      var ramp = h('span', { class: 'ramp', attrs: { role: 'img', 'aria-label': 'Accuracy color scale in ' + STEPS.length + ' bins: ' + STEPS.map(function (s, i) { return i === 0 ? 'below ' + BINS[0] : i === STEPS.length - 1 ? BINS[BINS.length - 1] + ' and above' : BINS[i - 1] + ' to ' + BINS[i]; }).join(', ') } });
+      STEPS.forEach(function (s, i) {
+        var lab = i === 0 ? '<' + BINS[0] : i === STEPS.length - 1 ? '≥' + BINS[BINS.length - 1] : BINS[i - 1] + '–' + BINS[i];
+        ramp.appendChild(h('span', { text: lab, style: { background: 'var(--seq-' + s + ')', color: 'var(--seq-' + s + '-on)' } }));
+      });
+      lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__title', text: 'Accuracy (%)' }), ramp));
+    } else {
+      lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__title', text: 'Bar length = accuracy (0–100):' })));
+      [['var(--series-text)', 'Text'], ['var(--series-mm)', 'Multimodal'], ['var(--series-overall)', 'Overall (all tasks)']].forEach(function (x) {
+        if (state.track === 'text' && x[1] !== 'Text') return;
+        lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__bar', style: { background: x[0] } }), x[1]));
+      });
+    }
+    lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'best-chip' }, U.icon('i-crown', 'crown')), 'best in column'));
+    if (state.track === 'full') lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'stated', text: '◆' }), 'Overall stated in the paper'));
+    lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__title', text: 'Deployment:' }), h('span', { class: 'm-dep m-dep--api', text: 'API' }), h('span', { class: 'm-dep m-dep--local', text: 'Local' })));
+  }
+
+  /* narrator: the mascot names the leader of the current sort column */
+  function bubble(sortCol, main) {
+    var host = U.$('#lb-bubble');
+    host.textContent = '';
+    var valid = main.filter(function (m) { return sortCol.get(m) != null; });
+    if (!valid.length) { host.textContent = 'No models match this filter.'; return; }
+    var top = valid.slice().sort(function (a, b) { return sortCol.get(b) - sortCol.get(a); });
+    var lead = top.filter(function (m) { return sortCol.get(m) === sortCol.get(top[0]); });
+    var v = sortCol.get(lead[0]);
+    host.appendChild(h('span', { class: 'narrator-bubble__lab', text: sortCol.group ? sortCol.long : sortCol.label }));
+    var line = h('span', { class: 'narrator-bubble__line' }, h('b', { text: lead.map(function (m) { return m.name; }).join(' & ') }), (lead.length > 1 ? ' lead with ' : ' leads with ') + U.pct(v));
+    if (sortCol.overall && !isStated(lead[0])) { line.appendChild(document.createTextNode(' ')); line.appendChild(h('span', { class: 'nowrap', text: '(derived, Eq. 11)' })); }
+    line.appendChild(document.createTextNode('.'));
+    host.appendChild(line);
+    host.appendChild(h('span', { class: 'narrator-bubble__hint', text: 'Sort by another column and watch the gold medal move.' }));
+  }
+
+  function tooltips() {
+    var t = U.$('#lb-table');
+    t.addEventListener('pointermove', function (e) {
+      var td = e.target.closest ? e.target.closest('td.cellv') : null;
+      if (!td || td.classList.contains('is-na')) { U.tip.hide(); return; }
+      var m = U.model(td.dataset.m), key = td.dataset.c;
+      var c = colDefs().filter(function (x) { return x.key === key; })[0];
+      if (!c) return;
+      var v = c.get(m);
+      var rowsSpec = [{ label: c.long, value: U.pct(v) + '%', color: c.group ? U.css('--wl-' + c.group) : null }];
+      var note = m.vendor + ' · ' + (m.deployment === 'api' ? 'API' : 'Local') + (m.textOnly ? ' · text-only' : '');
+      if (td.classList.contains('is-best')) note += ' · best in this column';
+      if (c.overall) note += '. ' + overallNote(m) + '.';
+      else note += '. Paper Table 1.';
+      U.tip.show({ title: m.name, rows: rowsSpec, note: note }, e.clientX, e.clientY, t);
+    });
+    t.addEventListener('pointerleave', function () { U.tip.hide(); });
+  }
+
+  U.initLeaderboard = function () {
+    U.$('#lb-lead').textContent = 'Audited accuracy (%) of ' + S.apiModels + ' commercial API models and ' + S.localModels + ' locally deployed open-weight models on each workload group, from the paper’s Table 1. Positive scores that the meta-judge confirmed as unsupported were set to zero before averaging. Sort any column: the leader changes with the workload.';
+    segs.track = U.seg(U.$('#lb-track'), [
+      { value: 'full', label: 'Full (text + MM)', title: 'Multimodal-capable models on all tasks' },
+      { value: 'text', label: 'Text track (all ' + S.models + ')', title: 'All models on the text tasks' }
+    ], state.track, function (v) { state.track = v; state.sort = v === 'full' ? 'overall' : 'textAvg'; state.dir = 'desc'; render(); });
+    segs.deploy = U.seg(U.$('#lb-deploy'), [
+      { value: 'all', label: 'All' },
+      { value: 'api', label: 'API' },
+      { value: 'local', label: 'Local' }
+    ], state.deploy, function (v) { state.deploy = v; render(); });
+    U.seg(U.$('#lb-style'), [
+      { value: 'bars', label: 'Bars' },
+      { value: 'heat', label: 'Heat' }
+    ], state.style, function (v) { state.style = v; render(); });
+    tooltips();
+    render();
+    var sc = U.$('#lb-table').parentNode;
+    sc.addEventListener('scroll', function () { overflowUi(); }, { passive: true });
+    sc.addEventListener('focusin', function (e) { requestAnimationFrame(function () { revealFocused(e); }); });
+    /* re-decide the layout when the card width changes (keeps focus on the active sort button) */
+    U.onResize(sc, function () {
+      var a = document.activeElement, col = a && a.classList && a.classList.contains('sort-btn') ? a.dataset.col : null;
+      render();
+      if (col) { var again = U.$('#lb-table thead .sort-btn[data-col="' + col + '"]'); if (again) again.focus(); }
+    });
+    if (document.fonts && document.fonts.ready) document.fonts.ready.then(render);
+  };
+  U.lbState = state;
+  U.lbSet = function (o) {
+    if (o.track && o.track !== state.track) { state.track = o.track; state.sort = o.track === 'full' ? 'overall' : 'textAvg'; state.dir = 'desc'; segs.track.select(o.track); }
+    if (o.deploy) { state.deploy = o.deploy; segs.deploy.select(o.deploy); }
+    render();
+  };
+})();

assets/js/main.js

@@ -0,0 +1,95 @@
+/* Bootstrap: bindings, sections (each isolated in try/catch), navigation, reveal-on-scroll. */
+(function () {
+  'use strict';
+  var U = window.U;
+
+  function nav() {
+    var toggle = U.$('.nav__toggle'), menu = U.$('#nav-menu');
+    function setOpen(open) {
+      toggle.setAttribute('aria-expanded', String(open));
+      menu.classList.toggle('is-open', open);
+    }
+    toggle.addEventListener('click', function () { setOpen(toggle.getAttribute('aria-expanded') !== 'true'); });
+    U.$$('a', menu).forEach(function (a) { a.addEventListener('click', function () { setOpen(false); }); });
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && menu.classList.contains('is-open')) { setOpen(false); toggle.focus(); } });
+    document.addEventListener('click', function (e) { if (menu.classList.contains('is-open') && !menu.contains(e.target) && !toggle.contains(e.target)) setOpen(false); });
+    /* keyboard: tabbing out of the open menu closes it, so it never covers the newly focused control */
+    menu.addEventListener('focusout', function (e) {
+      var to = e.relatedTarget;
+      if (menu.classList.contains('is-open') && to && !menu.contains(to) && to !== toggle) setOpen(false);
+    });
+
+    var links = U.$$('.nav__links a');
+    var ids = links.map(function (a) { return a.getAttribute('href').slice(1); });
+    var secs = U.$$('main > section');
+    var bar = U.$('.nav__progress span');
+    var ticking = false, lastY = window.scrollY, header = U.$('.nav');
+    header.addEventListener('focusin', function () { header.classList.remove('is-hidden'); });
+    function update() {
+      ticking = false;
+      var y = window.scrollY;
+      if (menu.classList.contains('is-open') || header.contains(document.activeElement) || y < 240) header.classList.remove('is-hidden');
+      else if (y > lastY + 6) header.classList.add('is-hidden');
+      else if (y < lastY - 6) header.classList.remove('is-hidden');
+      lastY = y;
+      var probe = window.innerHeight * 0.35;
+      var cur = null;
+      secs.forEach(function (s) { var r = s.getBoundingClientRect(); if (r.top <= probe && r.bottom > probe) cur = s.id; });
+      links.forEach(function (a, i) { if (ids[i] === cur) a.setAttribute('aria-current', 'true'); else a.removeAttribute('aria-current'); });
+      var max = document.documentElement.scrollHeight - window.innerHeight;
+      bar.style.transform = 'scaleX(' + (max > 0 ? Math.min(1, window.scrollY / max) : 0) + ')';
+    }
+    window.addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(update); } }, { passive: true });
+    window.addEventListener('resize', update);
+    update();
+  }
+
+  function reveal() {
+    var els = U.$$('.reveal');
+    if (!('IntersectionObserver' in window)) return;
+    document.documentElement.classList.add('js-reveal');
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
+    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });
+    els.forEach(function (e) { io.observe(e); });
+  }
+
+  /* Ambient animations (fish, bubbles, kelp, bobbing art) only run while their section is on screen. */
+  function pauseOffscreen() {
+    if (!('IntersectionObserver' in window)) return;
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (en) { en.target.classList.toggle('is-offscreen', !en.isIntersecting); });
+    }, { rootMargin: '80px 0px' });
+    U.$$('main > section, footer').forEach(function (el) { io.observe(el); });
+  }
+
+  /* In-page pause for the ambient loops (WCAG 2.2.2), remembered across visits. */
+  function motionToggle() {
+    var btn = U.$('#motion-toggle'), root = document.documentElement, KEY = 'omnistepbench-motion-paused';
+    if (!btn) return;
+    function set(paused, store) {
+      root.classList.toggle('motion-paused', paused);
+      btn.setAttribute('aria-pressed', String(paused));
+      if (store) { try { localStorage.setItem(KEY, paused ? '1' : '0'); } catch (e) { /* storage unavailable (file://, private mode) */ } }
+    }
+    var saved = null;
+    try { saved = localStorage.getItem(KEY); } catch (e) { saved = null; }
+    set(saved === '1', false);
+    btn.addEventListener('click', function () { set(btn.getAttribute('aria-pressed') !== 'true', true); });
+  }
+
+  function start() {
+    U.bindAll(document);
+    var steps = [
+      ['content', U.initContent], ['workloads', U.initWorkloads], ['leaderboard', U.initLeaderboard],
+      ['cost', U.initCost], ['reliability', U.initReliability], ['quickstart', U.initQuickstart]
+    ];
+    steps.forEach(function (s) {
+      try { s[1](); } catch (e) { console.error('[' + U.D.meta.shortName + '] ' + s[0] + ' failed:', e); }
+    });
+    [['toggles', U.initViewToggles], ['lightbox', U.initLightbox], ['nav', nav], ['reveal', reveal], ['motion', pauseOffscreen], ['motion-toggle', motionToggle]].forEach(function (s) {
+      try { s[1](); } catch (e) { console.error('[' + U.D.meta.shortName + '] ' + s[0] + ' failed:', e); }
+    });
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start();
+})();

assets/js/quickstart.js

@@ -0,0 +1,206 @@
+/* Quick start (README, verbatim) and the annotated task-file anatomy. */
+(function () {
+  'use strict';
+  var U = window.U, D = U.D, h = U.h, Q = D.quickstart, A = D.taskAnatomy;
+
+  function codeBlock(code, lang, label) {
+    var pre = h('pre', { attrs: { tabindex: '0', 'aria-label': (lang || 'code') + ' snippet' } });
+    code.split('\n').forEach(function (line, i, arr) {
+      var span;
+      if (/^\s*#/.test(line) && lang !== 'python') span = h('span', { class: 'c-com', text: line });
+      else {
+        span = h('span');
+        var m = line.match(/^(\s*)(\S+)(.*)$/);
+        if (m && lang === 'bash') { span.appendChild(document.createTextNode(m[1])); span.appendChild(h('span', { class: 'c-cmd', text: m[2] })); span.appendChild(document.createTextNode(m[3])); }
+        else span.textContent = line;
+      }
+      pre.appendChild(span);
+      if (i < arr.length - 1) pre.appendChild(document.createTextNode('\n'));
+    });
+    if (label) pre.setAttribute('aria-label', label);
+    return h('div', { class: 'codeblock' }, U.copyButton(function () { return code; }, 'Copy: ' + (label || 'code')), pre);
+  }
+
+  function steps() {
+    var ol = U.$('#qs-steps');
+    /* 1. OpenClaw + skills (README) */
+    ol.appendChild(h('li', { class: 'step' }, h('h3', { text: Q.step1.title }), codeBlock(Q.step1.code, Q.step1.lang, 'install commands for OpenClaw and Clawhub skills')));
+    /* 2. clone */
+    ol.appendChild(h('li', { class: 'step' }, h('h3', { text: Q.clone.title }), codeBlock(Q.clone.code, Q.clone.lang, 'clone commands')));
+    /* 3. judge */
+    ol.appendChild(h('li', { class: 'step' }, h('h3', { text: Q.judge.title }), h('p', null, U.mdCode(Q.judge.text)), codeBlock(Q.judge.code, Q.judge.lang, 'judge model setting'),
+      h('p', { class: 'note', style: { 'margin-top': '10px', 'margin-bottom': '0' }, text: 'In the paper, the primary judge is ' + D.audit.primaryJudge + ' and the meta-judge is ' + D.audit.metaJudge + '.' })));
+    /* 4. run */
+    var runBox = h('div');
+    var seg = h('div', { class: 'seg run-tabs', attrs: { role: 'radiogroup', 'aria-label': 'Run mode' } });
+    function draw(i) {
+      runBox.textContent = '';
+      var r = Q.run[i];
+      runBox.appendChild(h('p', { class: 'run-title', text: r.title }));
+      runBox.appendChild(codeBlock(r.code, 'bash', r.mode + ' run command'));
+      runBox.appendChild(h('p', { class: 'note', style: { 'margin-top': '10px', 'margin-bottom': '0' } }, U.mdCode(r.note)));
+    }
+    U.seg(seg, Q.run.map(function (r, i) { return { value: i, label: r.mode.charAt(0).toUpperCase() + r.mode.slice(1), title: r.title }; }), 0, draw);
+    draw(0);
+    ol.appendChild(h('li', { class: 'step' }, h('h3', { text: 'Run the benchmark' }), seg, runBox));
+
+    /* what every model gets in the paper (§4.1, §A.2) */
+    U.$('#qs-tools-lead').textContent = 'In the paper, all models share the same tools with identical visibility and permissions (§4.1, §A.2).';
+    var tools = U.$('#qs-tools');
+    var base = h('ul', { class: 'tool-base' },
+      h('li', null, U.icon('i-code'), h('span', null, h('b', { text: 'Default OpenClaw tool suite' }), ' — file I/O, shell execution, agent-loop control')),
+      h('li', null, U.icon('i-search'), h('span', null, h('code', { text: 'web_search' }), ' (Brave Search)')),
+      h('li', null, U.icon('i-globe'), h('span', null, h('code', { text: 'web_fetch' }), ' (URL-to-markdown)')));
+    tools.appendChild(base);
+    var groups = [];
+    Q.paperSkills.forEach(function (sk) { if (groups.indexOf(sk.group) < 0) groups.push(sk.group); });
+    tools.appendChild(h('p', { class: 'tool-h', text: Q.paperSkills.length + ' Clawhub skills integrated in the paper’s runs' }));
+    groups.forEach(function (gname) {
+      var dl = h('div', { class: 'tool-group' }, h('p', { class: 'tool-group__h', text: gname }));
+      var ul2 = h('ul', { class: 'tool-skills' });
+      Q.paperSkills.filter(function (sk) { return sk.group === gname; }).forEach(function (sk) {
+        var li = h('li', { class: 'tool-skill', attrs: { tabindex: '0' } }, h('code', { text: sk.name }));
+        U.hoverTip(li, function () { return { title: sk.name, rows: [], note: sk.description }; });
+        li.setAttribute('aria-label', sk.name + ': ' + sk.description);
+        ul2.appendChild(li);
+      });
+      dl.appendChild(ul2);
+      tools.appendChild(dl);
+    });
+
+    /* requirements */
+    var req = U.$('#qs-reqs');
+    Q.requirements.forEach(function (r) {
+      var li = h('li');
+      var m = r.match(/^(.*)\((https?:\/\/[^)]+)\)(.*)$/);
+      if (m) { li.appendChild(U.mdCode(m[1])); li.appendChild(h('a', { text: m[2].replace(/^https?:\/\//, ''), attrs: { href: m[2], rel: 'noopener' } })); li.appendChild(U.mdCode(m[3])); }
+      else li.appendChild(U.mdCode(r));
+      req.appendChild(li);
+    });
+    /* flags */
+    var dl = U.$('#qs-flags');
+    Q.flags.forEach(function (f) {
+      var dd = h('dd', null, U.mdCode(f.description));
+      U.$$('code', dd).forEach(function (c) {
+        var parts = c.textContent.split('/');
+        if (parts.length < 2) { c.classList.add('nowrap'); return; }
+        c.textContent = '';
+        parts.forEach(function (p, i) {
+          c.appendChild(h('span', { class: 'seg-n', text: p + (i < parts.length - 1 ? '/' : '') }));
+          if (i < parts.length - 1) c.appendChild(document.createElement('wbr'));
+        });
+      });
+      dl.appendChild(h('div', null, h('dt', null, U.mdCode(f.flagMarkdown)), dd));
+    });
+  }
+
+  /* ---------------- anatomy ---------------- */
+  function symNode(sym) {
+    var f = document.createDocumentFragment();
+    if (sym === 'W0') { f.appendChild(h('span', { class: 'math', text: 'W' })); f.appendChild(h('sup', { text: '0' })); }
+    else if (sym === 't_max') { f.appendChild(h('span', { class: 'math', text: 't' })); f.appendChild(h('sup', { text: 'max' })); }
+    else f.appendChild(h('span', { class: 'math', text: sym }));
+    return f;
+  }
+  var lineEls = [], tupleBtns = {}, pinned = 'p';
+
+  function anatomy() {
+    U.$('#anat-sub').textContent = 'A task file from the repository (' + A.file + '), mapped to the paper’s task tuple. Select a component to highlight where it lives.';
+    var cap = U.$('#anat-cap');
+    if (cap) cap.textContent = A.note;
+    U.$('#anat-file').textContent = A.file;
+    /* equation */
+    var eq = U.$('#anat-eq');
+    eq.appendChild(h('span', { class: 'math', text: 'τ' }));
+    eq.appendChild(document.createTextNode(' = ('));
+    A.tuple.forEach(function (t, i) {
+      eq.appendChild(symNode(t.symbol));
+      if (i < A.tuple.length - 1) eq.appendChild(document.createTextNode(', '));
+    });
+    eq.appendChild(document.createTextNode(')'));
+
+    /* build lines */
+    var L = [];
+    function add(text, cls, syms) { L.push({ text: text, cls: cls || '', syms: syms || [] }); }
+    add('---', 'fm');
+    A.frontmatter.split('\n').forEach(function (ln) {
+      var syms = [];
+      if (/^(environment:|\s+type:|\s+requirements:|workspace_files:)/.test(ln)) syms.push('W0');
+      if (/^(grading_type:|grading_weights:|\s+automated:|\s+llm_judge:)/.test(ln)) syms.push('G');
+      if (/^timeout_seconds:/.test(ln)) syms.push('t_max');
+      add(ln, 'fm', syms);
+    });
+    add('---', 'fm');
+    add('');
+    add('## Prompt', 'h2', ['p']);
+    A.prompt.split('\n').forEach(function (ln) {
+      var syms = ['p'];
+      if (/answer\.txt/.test(ln)) syms.push('C');
+      if (/tools or skills/.test(ln)) syms.push('T');
+      if (/complete the task in/.test(ln)) syms.push('t_max');
+      add(ln, '', syms);
+    });
+    add('');
+    add('## Expected Behavior', 'h2');
+    A.expectedBehavior.split('\n').forEach(function (ln) { add(ln); });
+    add('');
+    add('## Grading Criteria', 'h2', ['G']);
+    A.gradingCriteria.split('\n').forEach(function (ln) { add(ln, /^\[withheld/.test(ln) ? 'withheld' : '', /answer_written/.test(ln) ? ['G', 'C'] : ['G']); });
+    add('');
+    add('## Automated Checks', 'h2', ['G', 'C']);
+    add('```python', '', ['G']);
+    A.automatedChecks.split('\n').forEach(function (ln) { add(ln, '', /answer_file|answer_written|answer\.txt/.test(ln) ? ['G', 'C'] : ['G']); });
+    add('```', '', ['G']);
+    add('');
+    add('## LLM Judge Rubric', 'h2', ['G']);
+    A.rubric.split('\n').forEach(function (ln) { add(ln, /^\[withheld/.test(ln) ? 'withheld' : /\[REDACTED\]/.test(ln) ? 'redact' : '', ['G']); });
+
+    var pre = U.$('#anat-code');
+    L.forEach(function (l) {
+      var el = h('span', { class: 'ln ' + l.cls, text: l.text === '' ? '​' : l.text });
+      el._syms = l.syms;
+      lineEls.push(el);
+      pre.appendChild(el);
+    });
+
+    /* tuple list */
+    var list = U.$('#anat-tuple');
+    A.tuple.forEach(function (t) {
+      var b = h('button', { class: 'sym-' + t.symbol, attrs: { type: 'button', 'aria-pressed': String(t.symbol === pinned), 'aria-controls': 'anat-code', 'aria-label': t.name + ' (' + t.symbol.replace('_', ' ') + '): highlight its lines in the task file. ' + t.value } },
+        h('span', { class: 'tuple__sym' }, h('span', null, symNode(t.symbol))),
+        h('span', { class: 'tuple__name', text: t.name }),
+        h('span', { class: 'tuple__where', text: t.where }),
+        h('span', { class: 'tuple__val', text: t.value }));
+      b.addEventListener('click', function () { pinned = t.symbol; sync(); highlight(t.symbol, true); });
+      b.addEventListener('pointerenter', function () { highlight(t.symbol, false); });
+      b.addEventListener('pointerleave', function () { highlight(pinned, false); });
+      b.addEventListener('focus', function () { highlight(t.symbol, true); });
+      tupleBtns[t.symbol] = b;
+      list.appendChild(h('li', null, b));
+    });
+    list.parentNode.insertBefore(h('p', { class: 'tuple-val', attrs: { id: 'anat-val', 'aria-live': 'polite' } }), list.nextSibling);
+    sync();
+    highlight(pinned, false);
+  }
+  function sync() {
+    Object.keys(tupleBtns).forEach(function (k) { tupleBtns[k].setAttribute('aria-pressed', String(k === pinned)); });
+    var t = A.tuple.filter(function (x) { return x.symbol === pinned; })[0], cap = U.$('#anat-val');
+    if (t && cap) { cap.textContent = ''; cap.appendChild(h('b', { text: t.name + ' · ' })); cap.appendChild(h('span', { class: 'tuple-val__where', text: t.where + ' — ' })); cap.appendChild(document.createTextNode(t.value)); }
+  }
+  function highlight(sym, scroll) {
+    var pre = U.$('#anat-code'), first = null;
+    pre.className = 'codefile__body sym-' + sym;
+    lineEls.forEach(function (el) {
+      var on = el._syms.indexOf(sym) >= 0;
+      el.classList.toggle('is-hl', on);
+      if (on && !first) first = el;
+    });
+    if (scroll && first) pre.scrollTo({ top: Math.max(0, first.offsetTop - 24), behavior: U.reduceMotion ? 'auto' : 'smooth' });
+  }
+
+  U.initQuickstart = function () {
+    steps(); anatomy();
+    var fl = U.$('#qs-flags-box');
+    if (fl && window.matchMedia && window.matchMedia('(max-width: 720px)').matches) fl.removeAttribute('open');
+  };
+})();

assets/js/reliability.js

@@ -0,0 +1,179 @@
+/* Evidence-based audit: funnel, judges, MAE, hallucination patterns (Table 3),
+   paper figures 5/6, and the failure taxonomy (Tables 4/5). */
+(function () {
+  'use strict';
+  var U = window.U, D = U.D, h = U.h, A = D.audit, S = D.stats;
+  var DEP = [
+    { key: 'api', label: 'API', color: 'var(--series-api)', cssVar: '--series-api' },
+    { key: 'local', label: 'Local', color: 'var(--series-local)', cssVar: '--series-local' }
+  ];
+  var ART = { 'deadlock-loop': 'cr-crab', 'rubric-leakage': 'cr-fish', 'pseudo-tool-call-credulity': 'cr-hermit', 'output-instability': 'cr-jelly', 'timeout-with-credit': 'cr-snail' };
+
+  function depLegend(host) {
+    host.textContent = '';
+    DEP.forEach(function (d) { host.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__sw', style: { background: d.color } }), d.label)); });
+  }
+
+  /* keep a parenthetical such as "(score set to 0)" on one line */
+  function nowrapParens(text) {
+    var frag = document.createDocumentFragment();
+    String(text).split(/(\([^)]*\))/).forEach(function (part) {
+      if (!part) return;
+      frag.appendChild(part.charAt(0) === '(' ? h('span', { class: 'nowrap', text: part }) : document.createTextNode(part));
+    });
+    return frag;
+  }
+
+  function lead() {
+    var w = D.meta.why.filter(function (x) { return x.key === 'trustworthy'; })[0];
+    U.$('#rel-lead').textContent = w.problem + ' ' + D.meta.shortName + ' applies deterministic post-hoc rules to every score that involves the primary judge; flagged cases go to a meta-judge from a different model family, which decides whether the execution evidence supports the awarded positive score.';
+  }
+
+  /* Audit funnel as step cards: every number is printed, no bars (the stages differ by
+     orders of magnitude, so bars on one scale would hide the last two steps, and bars on
+     per-stage scales would mislead). */
+  function funnel() {
+    var ol = U.$('#funnel');
+    var sub = {
+      runs: 'every applicable model–task pair, in one shared OpenClaw runtime',
+      judgeCalls: 'scores that involve the primary judge (judge or hybrid tasks)',
+      flagged: 'suspicious positive scores routed to the meta-judge',
+      confirmed: 'positive credit that the trajectory and artifacts do not support'
+    };
+    A.funnel.forEach(function (st, i) {
+      var last = i === A.funnel.length - 1;
+      var li = h('li', { class: 'astep' + (last ? ' astep--final' : '') },
+        h('span', { class: 'astep__n', attrs: { 'aria-hidden': 'true' }, text: String(i + 1) }),
+        h('div', { class: 'astep__body' },
+          h('span', { class: 'astep__v', text: U.int(st.value) }),
+          h('span', { class: 'astep__l' }, nowrapParens(st.label)),
+          sub[st.key] ? h('span', { class: 'astep__s', text: sub[st.key] }) : null));
+      if (last) li.appendChild(U.burst('BUSTED!', 'red'));
+      ol.appendChild(li);
+    });
+    var rule = U.$('#audit-rule');
+    rule.appendChild(h('p', { class: 'funnel__rule-h', text: 'Audited score (Eq. 10)' }));
+    rule.appendChild(h('code', { text: A.rule }));
+    var feats = h('div', { class: 'feats' }, h('span', { class: 'note', text: 'Rule features (Appendix C):' }));
+    A.triggerFeatures.forEach(function (f) { feats.appendChild(h('code', { text: f })); });
+    rule.appendChild(feats);
+  }
+
+  function judges() {
+    var c = U.$('#judge-chain');
+    function node(icon, bg, title, sub) {
+      return h('div', { class: 'jnode' }, h('span', { class: 'jnode__icon', style: { background: bg } }, U.icon(icon)), h('div', null, h('b', { text: title }), h('span', { text: sub })));
+    }
+    c.appendChild(node('i-bubble', 'var(--sec-orange-fill)', 'Primary judge: ' + A.primaryJudge, 'Scores judge and hybrid tasks against a task-level rubric.'));
+    c.appendChild(h('span', { class: 'jarrow' }, U.icon('i-down'), 'rule-flagged positive scores'));
+    c.appendChild(node('i-eye', 'var(--sec-purple-fill)', 'Meta-judge: ' + A.metaJudge, 'A different model family. Sees the prompt, trajectory, artifacts, rubric and the primary judge’s rationale.'));
+    c.appendChild(h('span', { class: 'jarrow' }, U.icon('i-down'), 'verdict'));
+    c.appendChild(node('i-check', 'var(--sec-green-fill)', 'Unsupported → score set to zero', 'Otherwise the original score is kept.'));
+
+    var mae = U.$('#mae');
+    mae.appendChild(h('h4', { class: 'sr-only', text: 'Agreement with human experts' }));
+    mae.appendChild(h('div', { class: 'mae__tiles' },
+      h('div', { class: 'mae__tile' }, h('div', { class: 'mae__v', text: A.mae.primaryJudge.toFixed(3) }), h('div', { class: 'mae__l', text: 'MAE, primary judge' })),
+      h('div', { class: 'mae__mid' }, h('span', { class: 'scribble scribble--sm', text: 'about half' }), U.icon('i-arrow', 'mae__arrow')),
+      h('div', { class: 'mae__tile mae__tile--after' }, h('div', { class: 'mae__v', text: A.mae.afterMetaJudge.toFixed(3) }), h('div', { class: 'mae__l', text: 'MAE, after meta-judge' }))));
+    /* the sample size goes in brackets only when the definition does not already state it */
+    var def = A.mae.definition.replace(/\.$/, ''), nTxt = String(A.mae.n);
+    mae.appendChild(h('p', { class: 'mae__cap', text: def + (new RegExp('\\b' + nTxt + '\\b').test(def) ? '.' : ' (n = ' + nTxt + ').') + ' Lower is better; the paper notes the corrected error is approximately half that of the primary judge (Appendix C).' }));
+  }
+
+  function patterns() {
+    U.$('#patterns-sub').textContent = 'Unsupported positive scores confirmed by the meta-judge, split by deployment mode (Table 3): ' + A.totals.total + ' in total, ' + A.totals.local + ' from local and ' + A.totals.api + ' from API models.';
+    depLegend(U.$('#patterns-legend'));
+    var max = 0;
+    A.patterns.forEach(function (p) { max = Math.max(max, p.api, p.local); });
+    var grid = U.$('#pattern-grid');
+    var patternRows = [];
+    A.patterns.forEach(function (p) {
+      var bars = h('div', { class: 'pbars' });
+      DEP.forEach(function (d) {
+        var v = p[d.key];
+        var track = h('span', { class: 'pbar__track' },
+          h('span', { class: 'pbar__fill', style: { width: 'calc((100% - 30px) * ' + (v / max) + ')', background: d.color, 'min-width': v ? '3px' : '0' } }),
+          h('span', { class: 'pbar__v', text: String(v), style: { left: 'calc((100% - 30px) * ' + (v / max) + ' + ' + (v ? 6 : 0) + 'px)' } }));
+        var row = h('div', { class: 'pbar', attrs: { role: 'img', 'aria-label': p.name + ', ' + d.label + ': ' + v } }, h('span', { text: d.label, attrs: { 'aria-hidden': 'true' } }), track);
+        U.hoverTip(row, function () {
+          return { title: p.name, rows: DEP.map(function (x) { return { label: x.label, value: String(p[x.key]), color: U.css(x.cssVar) }; }), note: 'Table 3, confirmed unsupported positive scores' };
+        });
+        patternRows.push(row);
+        bars.appendChild(row);
+      });
+      grid.appendChild(h('li', { class: 'pattern reveal' },
+        U.icon(ART[p.key] || 'cr-crab', 'pattern__art'),
+        h('div', { class: 'pattern__txt' }, h('h4', { text: p.name }), h('p', { text: p.definition })),
+        bars));
+    });
+    /* one Tab stop for the chart; arrow keys move between bars, each with its tooltip */
+    U.roving(patternRows);
+    var rows = A.patterns.concat([{ name: 'Total', definition: '', local: A.totals.local, api: A.totals.api, total: A.totals.total }]);
+    U.tableView(U.$('#patterns-table'), U.table([
+      { label: 'Pattern', get: function (p) { return p.name; } },
+      { label: 'Definition', get: function (p) { return p.definition; } },
+      { label: 'API', num: true, get: function (p) { return String(p.api); } },
+      { label: 'Local', num: true, get: function (p) { return String(p.local); } },
+      { label: 'Total', num: true, get: function (p) { return String(p.total); } }
+    ], rows, 'Hallucination patterns (Table 3)'));
+  }
+
+  function figs() {
+    var box = U.$('#audit-figs');
+    A.figures.forEach(function (k) {
+      var f = U.fig(k);
+      if (!f) return;
+      var parts = f.caption.split(/\.\s+(?=Task:)/);
+      box.appendChild(h('figure', { class: 'afig card card--blob' },
+        U.zoomable(U.IMG + f.file, f.alt, f.label + '. ' + f.caption, f.label),
+        h('figcaption', null,
+          h('p', { class: 'afig__label', text: f.label + ' · ' + f.section }),
+          h('h4', { text: parts[0] }),
+          h('p', { text: parts[1] ? parts[1] : '' }))));
+    });
+  }
+
+  /* ---------- failure taxonomy (Tables 4/5) ---------- */
+  function taxonomy() {
+    var T = D.errorTaxonomy;
+    U.$('#tax-sub').textContent = T.note + ' Counts of failure codes among ' + T.totals.api.sampled + ' API and ' + T.totals.local.sampled + ' local sampled failures (Table 5 totals).';
+    depLegend(U.$('#tax-legend'));
+    var host = U.$('#tax-box');
+    host.textContent = '';
+    var max = 0;
+    T.codes.forEach(function (c) { max = Math.max(max, T.totals.api[c.code], T.totals.local[c.code]); });
+    var list = h('ul', { class: 'taxrows' });
+    var taxRows = [];
+    T.codes.forEach(function (c) {
+      var bars = h('div', { class: 'pbars' });
+      DEP.forEach(function (d) {
+        var v = T.totals[d.key][c.code];
+        var track = h('span', { class: 'pbar__track' },
+          h('span', { class: 'pbar__fill', style: { width: 'calc((100% - 30px) * ' + (v / max) + ')', background: d.color, 'min-width': v ? '3px' : '0' } }),
+          h('span', { class: 'pbar__v', text: String(v), style: { left: 'calc((100% - 30px) * ' + (v / max) + ' + ' + (v ? 6 : 0) + 'px)' } }));
+        var row = h('div', { class: 'pbar', attrs: { role: 'img', 'aria-label': c.code + ' (' + c.name + '), ' + d.label + ': ' + v + '. ' + c.definition } }, h('span', { text: d.label, attrs: { 'aria-hidden': 'true' } }), track);
+        U.hoverTip(row, function () {
+          return { title: c.code + ' · ' + c.name, rows: DEP.map(function (x) { return { label: x.label, value: String(T.totals[x.key][c.code]), color: U.css(x.cssVar) }; }), note: c.definition };
+        });
+        taxRows.push(row);
+        bars.appendChild(row);
+      });
+      list.appendChild(h('li', { class: 'taxrow' },
+        h('div', { class: 'taxrow__lab' }, h('b', { text: c.code }), h('span', { text: c.name })),
+        bars));
+    });
+    host.appendChild(list);
+    U.roving(taxRows);
+    U.tableView(U.$('#tax-table'), U.table([
+      { label: 'Code', get: function (c) { return c.code; } },
+      { label: 'Name', get: function (c) { return c.name; } },
+      { label: 'Definition', get: function (c) { return c.definition; } },
+      { label: 'API', num: true, get: function (c) { return String(T.totals.api[c.code]); } },
+      { label: 'Local', num: true, get: function (c) { return String(T.totals.local[c.code]); } },
+      { label: 'All', num: true, get: function (c) { return String(T.totals.all[c.code]); } }
+    ], T.codes, 'Failure taxonomy (Table 4) with Table 5 totals'));
+  }
+
+  U.initReliability = function () { lead(); funnel(); judges(); patterns(); figs(); taxonomy(); };
+})();

assets/js/util.js

@@ -0,0 +1,431 @@
+/* OmniStepBench project page: shared helpers. Classic script (works over file://).
+   Every number rendered on the page is read from window.OSB (assets/data/data.js). */
+(function () {
+  'use strict';
+  var D = window.OSB;
+  var U = (window.U = {});
+  U.D = D;
+  U.IMG = 'assets/'; // data.js image paths (img/...) live under assets/
+
+  var SVGNS = 'http://www.w3.org/2000/svg';
+
+  U.$ = function (s, r) { return (r || document).querySelector(s); };
+  U.$$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
+
+  /* Element builder. attrs: class, text, attrs{}, data{}, on{}, style{}; children: nodes/strings. */
+  U.h = function (tag, o) {
+    var el = document.createElement(tag);
+    o = o || {};
+    if (o.class) el.className = o.class;
+    if (o.text != null) el.textContent = o.text;
+    if (o.attrs) for (var k in o.attrs) if (o.attrs[k] != null && o.attrs[k] !== false) el.setAttribute(k, o.attrs[k] === true ? '' : o.attrs[k]);
+    if (o.data) for (var d in o.data) el.dataset[d] = o.data[d];
+    if (o.style) for (var st in o.style) el.style.setProperty(st, o.style[st]);
+    if (o.on) for (var ev in o.on) el.addEventListener(ev, o.on[ev]);
+    for (var i = 2; i < arguments.length; i++) U.append(el, arguments[i]);
+    return el;
+  };
+  U.append = function (el, c) {
+    if (c == null || c === false) return el;
+    if (Array.isArray(c)) { c.forEach(function (x) { U.append(el, x); }); return el; }
+    el.appendChild(typeof c === 'string' || typeof c === 'number' ? document.createTextNode(String(c)) : c);
+    return el;
+  };
+  U.s = function (tag, attrs, parent) {
+    var el = document.createElementNS(SVGNS, tag);
+    if (attrs) for (var k in attrs) if (attrs[k] != null) el.setAttribute(k, attrs[k]);
+    if (parent) parent.appendChild(el);
+    return el;
+  };
+  /* <svg><use href="#id"/></svg> icon */
+  U.icon = function (id, cls) {
+    var svg = document.createElementNS(SVGNS, 'svg');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    if (cls) svg.setAttribute('class', cls);
+    var use = document.createElementNS(SVGNS, 'use');
+    use.setAttribute('href', '#' + id);
+    svg.appendChild(use);
+    return svg;
+  };
+
+  /* ---- data access ---- */
+  U.get = function (path) {
+    return String(path).split('.').reduce(function (o, k) { return o == null ? o : o[k]; }, D);
+  };
+  var byName = {};
+  D.models.forEach(function (m) { byName[m.name] = m; byName[m.shortName] = m; });
+  U.model = function (n) { return byName[n]; };
+  U.group = function (k) { return D.groups.filter(function (g) { return g.key === k; })[0]; };
+  U.source = function (k) { return D.sources.filter(function (s) { return s.key === k; })[0]; };
+  U.GROUPS = D.groupOrder.map(U.group);
+  U.TEXT_GROUPS = U.GROUPS.filter(function (g) { return g.modality === 'text'; });
+  U.MM_GROUPS = U.GROUPS.filter(function (g) { return g.modality !== 'text'; });
+  U.wlVar = function (k) { return 'var(--wl-' + k + ')'; };
+  U.css = function (name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); };
+
+  /* ---- formatting (display only; never recomputes paper values) ---- */
+  U.int = function (n) { return Number(n).toLocaleString('en-US'); };
+  U.pct = function (n) { return n == null ? '—' : Number(n).toFixed(1); };
+  U.tok = function (k) { return k == null ? '—' : k + 'k'; };
+  U.usd = function (txt) { return txt == null ? '—' : (txt.charAt(0) === '<' ? '<$' + txt.slice(1) : '$' + txt); };
+  U.modalityCount = function () {
+    var m = {}, f = {};
+    D.groups.forEach(function (g) { m[g.modality] = 1; f[g.form] = 1; });
+    return [Object.keys(m).length, Object.keys(f).length];
+  };
+  U.matrixLabel = function () { var mc = U.modalityCount(); return mc[0] + '×' + mc[1]; };
+  U.scoringLabel = { auto: 'Auto', judge: 'Judge', hybrid: 'Hybrid' };
+  U.SCORING_ORDER = ['auto', 'hybrid', 'judge']; // ordinal: increasing reliance on the LLM judge
+  U.scoringVar = function (k) { return 'var(--score-' + k + ')'; };
+
+  /* Competition ranking (1,2,2,4) by value descending */
+  U.rank = function (items, val) {
+    var sorted = items.slice().sort(function (a, b) { return val(b) - val(a); });
+    var ranks = new Map();
+    sorted.forEach(function (it, i) {
+      if (i > 0 && val(it) === val(sorted[i - 1])) ranks.set(it, ranks.get(sorted[i - 1]));
+      else ranks.set(it, i + 1);
+    });
+    return ranks;
+  };
+
+  /* Wrap numbers in a sentence with <b> (text built with DOM nodes, not innerHTML) */
+  U.emphNums = function (text) {
+    /* Bold standalone numbers only (not digits inside names such as GPT-5.4 or Qwen3.6-27B). */
+    var frag = document.createDocumentFragment();
+    var re = /(^|[\s(~+\u2248\u2192:;,])((?:\$|<\$?|[+\u2212])?\d[\d,]*(?:\.\d+)?(?:k|%|\u00d7)?)(?![\w\-.]*\w)/g, last = 0, m;
+    while ((m = re.exec(text))) {
+      var start = m.index + m[1].length;
+      if (start > last) frag.appendChild(document.createTextNode(text.slice(last, start)));
+      frag.appendChild(U.h('b', { text: m[2] }));
+      last = start + m[2].length;
+    }
+    if (last < text.length) frag.appendChild(document.createTextNode(text.slice(last)));
+    return frag;
+  };
+  /* Render `code` spans from README markdown */
+  U.mdCode = function (text) {
+    var frag = document.createDocumentFragment();
+    String(text).split(/(`[^`]+`)/g).forEach(function (part) {
+      if (!part) return;
+      if (part.charAt(0) === '`' && part.charAt(part.length - 1) === '`') frag.appendChild(U.h('code', { text: part.slice(1, -1) }));
+      else frag.appendChild(document.createTextNode(part));
+    });
+    return frag;
+  };
+
+  /* ---- bindings ---- */
+  U.bindAll = function (root) {
+    U.$$('[data-bind]', root).forEach(function (el) {
+      var v = U.get(el.getAttribute('data-bind'));
+      if (v != null) el.textContent = v;
+    });
+    U.$$('[data-href]', root).forEach(function (el) {
+      var v = U.get(el.getAttribute('data-href'));
+      if (v) { el.setAttribute('href', v); el.setAttribute('rel', 'noopener'); }
+    });
+  };
+
+  /* ---- tooltip ---- */
+  var tip, tipOwner = null;
+  U.tip = {
+    el: function () { return tip || (tip = document.getElementById('tip')); },
+    /* spec: {title, rows:[{label, value, color}], note} */
+    show: function (spec, x, y, owner) {
+      var t = U.tip.el();
+      t.textContent = '';
+      if (spec.title) t.appendChild(U.h('div', { class: 'tip__title', text: spec.title }));
+      (spec.rows || []).forEach(function (r) {
+        var key = U.h('span', { class: 'tip__key' });
+        if (r.color) key.style.borderTopColor = r.color; else key.style.borderTopColor = 'transparent';
+        t.appendChild(U.h('div', { class: 'tip__row' }, key, U.h('span', { class: 'tip__lab', text: r.label }), U.h('span', { class: 'tip__val', text: r.value })));
+      });
+      if (spec.note) t.appendChild(U.h('div', { class: 'tip__note', text: spec.note }));
+      t.hidden = false;
+      tipOwner = owner || null;
+      var w = t.offsetWidth, hgt = t.offsetHeight, vw = window.innerWidth, vh = window.innerHeight;
+      var left = x + 16, top = y + 16;
+      if (left + w > vw - 8) left = Math.max(8, x - w - 16);
+      if (top + hgt > vh - 8) top = Math.max(8, y - hgt - 16);
+      t.style.left = left + 'px';
+      t.style.top = top + 'px';
+    },
+    showAt: function (spec, el) {
+      var r = el.getBoundingClientRect();
+      U.tip.show(spec, r.left + r.width / 2, r.top + r.height / 2, el);
+    },
+    hide: function (owner) {
+      if (owner && tipOwner && owner !== tipOwner) return;
+      var t = U.tip.el(); if (t) t.hidden = true; tipOwner = null;
+    },
+    /* keyboard focus: show next to the element and remember it, so the tooltip can be
+       re-anchored after a scroll instead of floating detached from its owner */
+    focus: function (specFn, el) {
+      focusOwner = { el: el, spec: specFn };
+      U.tip.showAt(specFn(), el);
+    },
+    blur: function (el) {
+      if (focusOwner && focusOwner.el === el) focusOwner = null;
+      U.tip.hide(el);
+    }
+  };
+  var focusOwner = null, scrollTimer = null;
+  /* Attach hover + focus tooltip to an element; specFn returns the spec */
+  U.hoverTip = function (el, specFn) {
+    el.addEventListener('pointermove', function (e) { U.tip.show(specFn(), e.clientX, e.clientY, el); });
+    el.addEventListener('pointerleave', function () { U.tip.hide(el); });
+    el.addEventListener('focus', function () { U.tip.focus(specFn, el); });
+    el.addEventListener('blur', function () { U.tip.blur(el); });
+  };
+  window.addEventListener('scroll', function () {
+    U.tip.hide();
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(function () {
+      if (!focusOwner || document.activeElement !== focusOwner.el) { focusOwner = null; return; }
+      var r = focusOwner.el.getBoundingClientRect();
+      if (r.bottom > 0 && r.top < window.innerHeight) U.tip.showAt(focusOwner.spec(), focusOwner.el);
+    }, 160);
+  }, { passive: true });
+  /* Escape dismisses the tooltip for good: forget the focus owner so a later scroll does not re-open it */
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { focusOwner = null; U.tip.hide(); } });
+
+  /* ---- chart <-> table toggles ---- */
+  U.initViewToggles = function () {
+    U.$$('.view-toggle').forEach(function (btn) {
+      var t = btn.getAttribute('data-target');
+      var chart = document.getElementById(t + '-chart'), table = document.getElementById(t + '-table');
+      if (!chart || !table) return;
+      /* the visible label says what the button will show next ("View as table" / "View as chart"),
+         so no aria-pressed: a changing name plus a pressed state would double-signal */
+      btn.removeAttribute('aria-pressed');
+      btn.setAttribute('aria-controls', t + '-chart ' + t + '-table');
+      btn.addEventListener('click', function () {
+        var showTable = table.hidden;
+        btn.classList.toggle('is-on', showTable);
+        chart.hidden = showTable; table.hidden = !showTable;
+        btn.querySelector('span').textContent = showTable ? 'View as chart' : 'View as table';
+        var use = btn.querySelector('use'); if (use) use.setAttribute('href', showTable ? '#i-chart' : '#i-table');
+        U.tip.hide();
+        document.dispatchEvent(new CustomEvent('viewtoggle', { detail: { target: t, table: showTable } }));
+      });
+    });
+  };
+
+  /* Build a simple data table: cols [{label, num?, cls?, get(row)->string|node}] */
+  U.table = function (cols, rows, caption) {
+    var t = U.h('table', { class: 'data-table' });
+    if (caption) t.appendChild(U.h('caption', { text: caption }));
+    var thead = U.h('thead'), tr = U.h('tr');
+    cols.forEach(function (c) { tr.appendChild(U.h('th', { class: c.num ? 'num' : (c.cls || ''), text: c.label, attrs: { scope: 'col' } })); });
+    thead.appendChild(tr); t.appendChild(thead);
+    var tb = U.h('tbody');
+    rows.forEach(function (r) {
+      var row = U.h('tr');
+      cols.forEach(function (c, i) {
+        var v = c.get(r);
+        var cell = U.h(i === 0 && c.rowHeader !== false ? 'th' : 'td', { class: c.num ? 'num' : (c.cls || '') });
+        if (i === 0 && c.rowHeader !== false) cell.setAttribute('scope', 'row');
+        U.append(cell, v == null ? '—' : v);
+        row.appendChild(cell);
+      });
+      tb.appendChild(row);
+    });
+    t.appendChild(tb);
+    return t;
+  };
+
+  /* Put a U.table into a chart's table view (host = the .view--table element), replacing what was there.
+     The caption moves above the scroller so it never scrolls away with the columns; the scroller is a
+     named, focusable region (keyboard users can scroll it with the arrow keys), and while it overflows a
+     "swipe" hint shows and the right edge fades until the last column is reached. */
+  U.tableView = function (host, table) {
+    host.textContent = '';
+    host.classList.add('tview');
+    var capEl = table.querySelector('caption'), capId = host.id + '-cap';
+    var cap = U.h('p', { class: 'tview__cap', text: capEl ? capEl.textContent : '', attrs: { id: capId } });
+    if (capEl) capEl.parentNode.removeChild(capEl);
+    table.setAttribute('aria-labelledby', capId);
+    var sc = U.h('div', { class: 'table-scroll', attrs: { tabindex: '0', role: 'region', 'aria-labelledby': capId } }, table);
+    sc.addEventListener('scroll', function () { tviewState(host, sc); }, { passive: true });
+    host.appendChild(cap);
+    host.appendChild(U.h('p', { class: 'tview__swipe', text: 'swipe the table sideways →', attrs: { 'aria-hidden': 'true' } }));
+    host.appendChild(sc);
+    tviewState(host, sc);
+    return sc;
+  };
+  function tviewState(host, sc) {
+    var over = sc.scrollWidth > sc.clientWidth + 1;
+    host.classList.toggle('is-over', over);
+    sc.classList.toggle('at-end', !over || sc.scrollLeft + sc.clientWidth >= sc.scrollWidth - 2);
+  }
+  function tviewAll() {
+    U.$$('.tview').forEach(function (host) { var sc = U.$('.table-scroll', host); if (sc) tviewState(host, sc); });
+  }
+  var tviewTimer;
+  window.addEventListener('resize', function () { clearTimeout(tviewTimer); tviewTimer = setTimeout(tviewAll, 80); });
+  document.addEventListener('viewtoggle', tviewAll);
+  if (document.fonts && document.fonts.ready) document.fonts.ready.then(tviewAll);
+
+  /* ---- segmented radio control ---- */
+  U.seg = function (container, options, value, onChange) {
+    container.textContent = '';
+    var btns = options.map(function (o) {
+      var b = U.h('button', { attrs: { type: 'button', role: 'radio', 'aria-checked': String(o.value === value), tabindex: o.value === value ? '0' : '-1' } });
+      if (o.dot) b.appendChild(U.h('span', { class: 'dot', style: { background: o.dot } }));
+      b.appendChild(document.createTextNode(o.label));
+      if (o.title) b.title = o.title;
+      b.addEventListener('click', function () { select(o.value, true); });
+      container.appendChild(b);
+      return b;
+    });
+    function select(v, fire) {
+      options.forEach(function (o, i) {
+        var on = o.value === v;
+        btns[i].setAttribute('aria-checked', String(on));
+        btns[i].tabIndex = on ? 0 : -1;
+      });
+      if (fire) onChange(v);
+    }
+    container.addEventListener('keydown', function (e) {
+      var idx = btns.indexOf(document.activeElement);
+      if (idx < 0) return;
+      var n = null;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = (idx + 1) % btns.length;
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') n = (idx - 1 + btns.length) % btns.length;
+      if (n != null) { e.preventDefault(); btns[n].focus(); btns[n].click(); }
+    });
+    return { select: select };
+  };
+
+  /* ---- copy to clipboard ---- */
+  U.copy = function (text, btn) {
+    function done(ok) {
+      var span = btn.querySelector('span');
+      var prev = span.textContent;
+      span.textContent = ok ? 'Copied' : 'Press Ctrl+C';
+      btn.classList.toggle('is-done', ok);
+      var use = btn.querySelector('use'); if (use && ok) use.setAttribute('href', '#i-check');
+      var live = document.getElementById('live'); if (live) live.textContent = ok ? 'Copied to clipboard' : 'Copy failed';
+      setTimeout(function () { span.textContent = prev === 'Copied' ? 'Copy' : prev; btn.classList.remove('is-done'); if (use) use.setAttribute('href', '#i-copy'); }, 1600);
+    }
+    function fallback() {
+      var ta = U.h('textarea', { attrs: { readonly: true, 'aria-hidden': 'true' }, style: { position: 'fixed', left: '-9999px', top: '0' } });
+      ta.value = text; document.body.appendChild(ta); ta.select();
+      var ok = false; try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
+      document.body.removeChild(ta); done(ok);
+    }
+    if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(text).then(function () { done(true); }, fallback);
+    else fallback();
+  };
+  U.copyButton = function (getText, label) {
+    var b = U.h('button', { class: 'copy-btn', attrs: { type: 'button', 'aria-label': label || 'Copy to clipboard' } }, U.icon('i-copy'), U.h('span', { text: 'Copy', attrs: { 'aria-hidden': 'true' } }));
+    b.addEventListener('click', function () { U.copy(getText(), b); });
+    return b;
+  };
+
+  /* ---- lightbox ---- */
+  U.lightbox = function (src, alt, caption) {
+    var dlg = document.getElementById('lightbox');
+    var img = document.getElementById('lightbox-img');
+    /* on phones, show the figure near its natural size inside a pannable box */
+    var pan = window.matchMedia && window.matchMedia('(max-width: 720px)').matches;
+    dlg.classList.toggle('is-pan', !!pan);
+    img.style.width = '';
+    img.onload = function () { if (pan) img.style.width = Math.min(img.naturalWidth, 1400) + 'px'; };
+    img.src = src; img.alt = alt || '';
+    if (pan && img.complete && img.naturalWidth) img.style.width = Math.min(img.naturalWidth, 1400) + 'px';
+    document.getElementById('lightbox-cap').textContent = caption || '';
+    if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open', '');
+  };
+  U.initLightbox = function () {
+    var dlg = document.getElementById('lightbox');
+    document.getElementById('lightbox-close').addEventListener('click', function () { dlg.close ? dlg.close() : dlg.removeAttribute('open'); });
+    dlg.addEventListener('click', function (e) { if (e.target === dlg) dlg.close(); });
+  };
+  U.fig = function (key) { return D.caseStudy.figures.filter(function (f) { return f.key === key; })[0]; };
+  /* zoomable figure button */
+  U.zoomable = function (src, alt, caption, label, opts) {
+    opts = opts || {};
+    var img = U.h('img', { attrs: { src: src, alt: alt || '', loading: opts.eager ? null : 'lazy', decoding: 'async' } });
+    var b = U.h('button', { class: 'zoomable', attrs: { type: 'button', 'aria-label': 'Enlarge ' + (label || 'figure') } }, img,
+      U.h('span', { class: 'zoomable__hint' }, U.icon('i-zoom'), 'Enlarge'));
+    b.addEventListener('click', function () { U.lightbox(src, alt, caption); });
+    return b;
+  };
+
+  /* ---- resize ---- */
+  U.onResize = function (el, fn) {
+    var last = 0, t;
+    var ro = new ResizeObserver(function (entries) {
+      var w = Math.round(entries[0].contentRect.width);
+      if (w === last || w === 0) return;
+      last = w; clearTimeout(t); t = setTimeout(function () { fn(w); }, 60);
+    });
+    ro.observe(el);
+  };
+  U.reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  /* Nice linear ticks */
+  U.ticks = function (lo, hi, n) {
+    var span = hi - lo, step = Math.pow(10, Math.floor(Math.log10(span / n))), err = span / n / step;
+    if (err >= 7.5) step *= 10; else if (err >= 3.5) step *= 5; else if (err >= 1.5) step *= 2;
+    var out = [], v = Math.ceil(lo / step) * step;
+    for (; v <= hi + 1e-9; v += step) out.push(Math.round(v * 1e6) / 1e6);
+    return out;
+  };
+
+
+  /* Log-axis tick labels (1-2-5 per decade) without collisions: 1s first, then 5s, then 2s;
+     a label is kept only if it clears every kept label by `gap` px and stays inside [x0, x1].
+     ticks: [{v, k, x}] -> returns the subset whose labels should be drawn. */
+  U.fitTicks = function (ticks, fmt, x0, x1, font, gap) {
+    gap = gap == null ? 8 : gap;
+    var kept = [];
+    [1, 5, 2].forEach(function (k) {
+      ticks.filter(function (t) { return t.k === k; }).forEach(function (t) {
+        var w = U.textWidth(fmt(t.v), font || '400 12.5px Nunito');
+        var a = t.x - w / 2, b = t.x + w / 2;
+        if (a < x0 - 1 || b > x1 + 1) return;
+        for (var i = 0; i < kept.length; i++) if (a < kept[i].b + gap && b > kept[i].a - gap) return;
+        kept.push({ a: a, b: b, t: t });
+      });
+    });
+    return kept.map(function (x) { return x.t; });
+  };
+  U.usdTick = function (v) { var dec = Math.max(0, -Math.floor(Math.log10(v) + 1e-9)); return '$' + v.toFixed(dec); };
+
+  /* ---- roving focus: one Tab stop for a set of marks, arrow keys move between them ----
+     items: array of focusable elements (in navigation order). onFocus(i) is called when
+     an item receives focus. Returns {set(i)} to move the tab stop programmatically. */
+  U.roving = function (items, onFocus, opts) {
+    opts = opts || {};
+    var cur = Math.max(0, Math.min(items.length - 1, opts.start || 0));
+    items.forEach(function (el, i) {
+      el.setAttribute('tabindex', i === cur ? '0' : '-1');
+      el.addEventListener('focus', function () { cur = i; items.forEach(function (x, j) { x.setAttribute('tabindex', j === i ? '0' : '-1'); }); if (onFocus) onFocus(i); });
+      el.addEventListener('keydown', function (e) {
+        var n = null;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = Math.min(items.length - 1, i + 1);
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') n = Math.max(0, i - 1);
+        else if (e.key === 'Home') n = 0;
+        else if (e.key === 'End') n = items.length - 1;
+        if (n != null) { e.preventDefault(); items[n].focus(); }
+      });
+    });
+    return { set: function (i) { cur = i; items.forEach(function (x, j) { x.setAttribute('tabindex', j === i ? '0' : '-1'); }); } };
+  };
+
+  /* ---- comic starburst accent (decorative; the number it sits next to is real text) ---- */
+  U.burst = function (text, variant) {
+    return U.h('span', { class: 'burst' + (variant ? ' burst--' + variant : ''), attrs: { 'aria-hidden': 'true' } }, U.h('span', { class: 'burst__t', text: text }));
+  };
+
+  /* Text width measurement for SVG label layout */
+  var measureCtx;
+  U.textWidth = function (text, font) {
+    measureCtx = measureCtx || document.createElement('canvas').getContext('2d');
+    measureCtx.font = font || '800 12.5px Nunito';
+    return measureCtx.measureText(text).width;
+  };
+})();

assets/js/workloads.js

@@ -0,0 +1,320 @@
+/* Workload matrix, cell detail, source composition, task explorer. */
+(function () {
+  'use strict';
+  var U = window.U, D = U.D, h = U.h;
+  var FORM_LABEL = { 'single-step': 'Single-step', 'multi-step': 'Multi-step', 'multi-step+tools': 'Multi-step + tools' };
+  var MOD_LABEL = { text: 'Text', multimodal: 'Multimodal' };
+  var selected = null, cellBtns = {}, exampleIdx = {};
+
+  function forms() { var f = []; U.GROUPS.forEach(function (g) { if (f.indexOf(g.form) < 0) f.push(g.form); }); return f; }
+  function mods() { var m = []; U.GROUPS.forEach(function (g) { if (m.indexOf(g.modality) < 0) m.push(g.modality); }); return m; }
+  function groupAt(mod, form) { return U.GROUPS.filter(function (g) { return g.modality === mod && g.form === form; })[0]; }
+
+  function mixbar(scoring, lg) {
+    var bar = h('span', { class: 'mixbar' + (lg ? ' mixbar--lg' : ''), attrs: { 'aria-hidden': 'true' } });
+    U.SCORING_ORDER.forEach(function (k) {
+      if (!scoring[k]) return;
+      bar.appendChild(h('span', { style: { background: U.scoringVar(k), flex: scoring[k] + ' 1 0' } }));
+    });
+    return bar;
+  }
+  function mixText(scoring) {
+    return U.SCORING_ORDER.filter(function (k) { return scoring[k]; }).map(function (k) { return scoring[k] + ' ' + U.scoringLabel[k].toLowerCase(); }).join(', ');
+  }
+  function scoringLegend() {
+    var lg = h('div', { class: 'legend' }, h('span', { class: 'legend__title', text: 'Scoring' }));
+    U.SCORING_ORDER.forEach(function (k) {
+      lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__sw', style: { background: U.scoringVar(k) } }), U.scoringLabel[k]));
+    });
+    return lg;
+  }
+
+  /* ---------------- matrix ---------------- */
+  function buildMatrix() {
+    var host = U.$('#matrix');
+    var grid = h('div', { class: 'matrix__grid' });
+    grid.appendChild(h('span', { class: 'matrix__corner', text: 'input ↓ / execution →' }));
+    forms().forEach(function (f) { grid.appendChild(h('span', { class: 'matrix__col', text: FORM_LABEL[f] || f })); });
+    grid.appendChild(h('span', { class: 'matrix__axis', attrs: { 'aria-hidden': 'true' } }, h('span', { text: 'increasing execution complexity' })));
+    mods().forEach(function (mod) {
+      grid.appendChild(h('span', { class: 'matrix__row', text: MOD_LABEL[mod] || mod }));
+      forms().forEach(function (f) {
+        var g = groupAt(mod, f);
+        var srcNames = g.sources.map(function (k) { return U.source(k).name; });
+        /* the accessible name is the visible text plus a hidden gloss, so it contains the visible label (WCAG 2.5.3) */
+        var btn = h('button', {
+          class: 'wcell', style: { '--c': U.wlVar(g.key) },
+          attrs: { type: 'button', 'aria-pressed': 'false', 'aria-controls': 'cell-detail' }
+        },
+          h('span', { class: 'wcell__count', text: String(g.count) }),
+          h('span', { class: 'wcell__unit', text: 'tasks' }),
+          h('span', { class: 'wcell__label', text: g.label }),
+          h('span', { class: 'wcell__sr', text: ' (' + g.longLabel + ')' }),
+          h('span', { class: 'wcell__src', text: srcNames.join(', ') }),
+          h('span', { class: 'wcell__sr', text: ' Scoring: ' + mixText(g.scoring) + '.' }),
+          mixbar(g.scoring));
+        btn.addEventListener('click', function () { select(g.key, true); });
+        U.hoverTip(btn, function () {
+          return { title: g.longLabel, rows: [{ label: 'Tasks', value: String(g.count), color: U.css('--wl-' + g.key) }].concat(U.SCORING_ORDER.filter(function (k) { return g.scoring[k]; }).map(function (k) {
+            return { label: U.scoringLabel[k] + ' scoring', value: String(g.scoring[k]), color: U.css('--score-' + k) };
+          })), note: srcNames.join(', ') };
+        });
+        cellBtns[g.key] = btn;
+        grid.appendChild(btn);
+      });
+    });
+    host.appendChild(grid);
+    host.appendChild(h('div', { class: 'matrix__foot' }, scoringLegend(), h('span', { class: 'matrix__hint', text: 'select a cell to dive in' })));
+  }
+
+  function select(key, focusDetail) {
+    selected = key;
+    Object.keys(cellBtns).forEach(function (k) { cellBtns[k].setAttribute('aria-pressed', String(k === key)); });
+    renderDetail(key);
+  }
+
+  function renderDetail(key) {
+    var g = U.group(key), box = U.$('#cell-detail');
+    box.textContent = '';
+    box.appendChild(h('div', { class: 'cd__head' },
+      h('span', { class: 'cd__sw', style: { background: U.wlVar(key) } }),
+      h('h3', { class: 'cd__title', text: g.longLabel }),
+      h('span', { class: 'cd__count', text: g.count + ' tasks · ' + g.applicableModels + ' models' })));
+
+    var grid = h('div', { class: 'cd__grid' });
+    /* sources + scoring */
+    var left = h('div', { class: 'cd__block' }, h('h4', { text: 'Sources' }));
+    var srcs = h('div', { class: 'cd__srcs' });
+    g.sources.forEach(function (k) {
+      var s = U.source(k);
+      srcs.appendChild(h('span', { class: 'pill', attrs: { title: s.capability } }, s.name, h('span', { class: 'chip__n', text: String(s.count) })));
+    });
+    left.appendChild(srcs);
+    left.appendChild(h('h4', { text: 'Scoring modes', style: { 'margin-top': '14px' } }));
+    var mixRows = h('div', { class: 'cd__mixrows' });
+    U.SCORING_ORDER.forEach(function (k) {
+      if (!g.scoring[k]) return;
+      mixRows.appendChild(h('span', null, h('span', { class: 'legend__sw', style: { background: U.scoringVar(k) } }), g.scoring[k] + ' ' + U.scoringLabel[k].toLowerCase()));
+    });
+    left.appendChild(h('div', { class: 'cd__mix' }, mixbar(g.scoring, true), mixRows));
+    grid.appendChild(left);
+
+    /* top models (Table 1) */
+    var right = h('div', { class: 'cd__block' }, h('h4', { text: 'Top models (audited accuracy, %)' }));
+    var models = D.models.filter(function (m) { return m.acc[key] != null; });
+    var ranks = U.rank(models, function (m) { return m.acc[key]; });
+    var top = models.filter(function (m) { return ranks.get(m) <= 3; }).sort(function (a, b) { return b.acc[key] - a.acc[key]; });
+    var max = 100;
+    var ol = h('ol', { class: 'top3' });
+    var items = [];
+    top.forEach(function (m) {
+      var r = ranks.get(m);
+      var li = h('li', null,
+        h('span', { class: 'medal medal--' + r + ' top3__rank' }, h('span', { class: 'sr-only', text: 'Rank ' }), String(r)),
+        h('span', { class: 'top3__name' }, m.name, h('span', { class: 'top3__vendor', text: m.vendor + ' · ' + (m.deployment === 'api' ? 'API' : 'Local') })),
+        h('span', { class: 'top3__val', text: U.pct(m.acc[key]) }),
+        h('span', { class: 'top3__bar', attrs: { 'aria-hidden': 'true' }, style: { width: (m.acc[key] / max * 100) + '%', background: U.wlVar(key) } }));
+      U.hoverTip(li, function () {
+        return { title: m.name, rows: [{ label: g.longLabel + ' accuracy', value: U.pct(m.acc[key]) + '%', color: U.css('--wl-' + key) }],
+          note: m.vendor + ' · ' + (m.deployment === 'api' ? 'API' : 'Local') + ' · rank ' + r + ' of ' + models.length + ' models (Table 1, audited accuracy)' };
+      });
+      items.push(li);
+      ol.appendChild(li);
+    });
+    /* one Tab stop for the mini chart; arrow keys move between its bars */
+    if (items.length) U.roving(items);
+    right.appendChild(ol);
+    var locals = models.filter(function (m) { return m.deployment === 'local'; }).sort(function (a, b) { return b.acc[key] - a.acc[key]; });
+    if (locals.length) right.appendChild(h('p', { class: 'cd__local' }, 'Best local model: ', h('b', { text: locals[0].shortName }), ' (' + U.pct(locals[0].acc[key]) + ')'));
+    grid.appendChild(right);
+    box.appendChild(grid);
+
+    /* example task */
+    var exs = D.examples.filter(function (e) { return e.group === key; });
+    if (exs.length) {
+      var idx = exampleIdx[key] || 0;
+      var ex = h('div', { class: 'example' });
+      var tabs = h('div', { class: 'example__tabs' }, h('h4', { text: 'Example task from the repo' }));
+      var seg = h('div', { class: 'seg', attrs: { role: 'radiogroup', 'aria-label': 'Example task' } });
+      tabs.appendChild(seg);
+      ex.appendChild(tabs);
+      var body = h('div');
+      ex.appendChild(body);
+      U.seg(seg, exs.map(function (e, i) { return { value: i, label: e.sourceName }; }), idx, function (v) { exampleIdx[key] = v; drawExample(body, exs[v]); });
+      drawExample(body, exs[idx]);
+      box.appendChild(ex);
+    }
+  }
+
+  function drawExample(body, e) {
+    body.textContent = '';
+    var card = h('div', { class: 'example__card example__card--taped' + (e.imageFile ? ' has-img' : '') });
+    if (e.imageFile) {
+      var zb = U.zoomable(U.IMG + e.imageFile, e.imageAlt || '', e.imageAlt || '', 'task image for ' + e.id);
+      card.appendChild(h('div', { class: 'example__img' }, zb));
+    }
+    var txt = h('div');
+    txt.appendChild(h('p', { class: 'example__prompt', text: e.promptExcerpt, attrs: { lang: /[一-鿿]/.test(e.promptExcerpt) ? 'zh' : null } }));
+    if (e.englishGloss) txt.appendChild(h('p', { class: 'example__gloss', text: 'English wording in the paper: “' + e.englishGloss + '”' }));
+    /* a translation made for the page (the paper does not give one): labelled as such */
+    else if (e.englishTranslation) txt.appendChild(h('p', { class: 'example__gloss', text: 'In English (our translation): “' + e.englishTranslation + '”' }));
+    var meta = h('div', { class: 'example__meta' },
+      h('span', { class: 'pill pill--soft example__id', text: e.id }),
+      h('span', { class: 'pill', text: e.scoring + ' scoring' }),
+      h('span', { class: 'pill', text: e.timeoutSeconds + ' s budget' }),
+      h('span', { class: 'pill', text: 'artifact: ' + e.artifact }));
+    txt.appendChild(meta);
+    var notes = [e.excerptNote];
+    if (e.paperRef) notes.push(e.paperRef + '.');
+    txt.appendChild(h('p', { class: 'example__note', text: notes.join(' ') }));
+    card.appendChild(txt);
+    body.appendChild(card);
+  }
+
+  /* ---------------- sources ---------------- */
+  var chipBtns = {}, segEls = {}, pinned = null;
+  function buildSources() {
+    U.$('#sources-sub').textContent = D.stats.sources + ' public benchmarks contribute ' + D.stats.tasks + ' tasks. Bar width is the number of tasks each source contributes; color shows its workload group.';
+    /* the paper's task-composition sunburst (appendix), opened in the lightbox like the Fig. 1 button */
+    var sb = U.fig('fig-sunburst');
+    if (sb) {
+      var sbBtn = h('button', { class: 'btn btn--sm btn--ghost', attrs: { type: 'button', id: 'sunburst-btn', 'aria-label': 'Paper’s figure: task composition (' + sb.section + '), opens a larger view' } }, U.icon('i-image'), h('span', { text: 'Paper’s figure' }));
+      sbBtn.addEventListener('click', function () { U.lightbox(U.IMG + sb.file, sb.alt, sb.caption + ' (' + sb.section + ')'); });
+      var btns = U.$('#sources-btns');
+      btns.insertBefore(sbBtn, btns.firstChild);
+    }
+    var lg = U.$('#sources-legend');
+    U.GROUPS.forEach(function (g) {
+      lg.appendChild(h('span', { class: 'legend__item' }, h('span', { class: 'legend__sw', style: { background: U.wlVar(g.key) } }), g.label));
+    });
+    var bar = U.$('#compbar');
+    D.sources.forEach(function (s) {
+      var g = U.group(s.group);
+      /* pointer-only view of the composition: the source chips below are the keyboard and
+         screen-reader equivalent (same tooltip, same pin action), so the bar is aria-hidden */
+      var seg = h('div', { class: 'compbar__seg', style: { background: U.wlVar(s.group), flex: s.count + ' 1 0', 'min-width': '0' } });
+      seg.addEventListener('pointermove', function (e) { U.tip.show(srcTip(s), e.clientX, e.clientY, seg); });
+      seg.addEventListener('pointerleave', function () { U.tip.hide(seg); });
+      seg.addEventListener('pointerenter', function () { hot(s.key, true); });
+      seg.addEventListener('pointerleave', function () { hot(s.key, false); });
+      seg.addEventListener('click', function () { pin(s.key); });
+      segEls[s.key] = seg;
+      bar.appendChild(seg);
+    });
+    var wall = U.$('#chipwall');
+    U.GROUPS.forEach(function (g) {
+      /* lane title breaks only between "modality · form", never inside a part; the count never splits */
+      var title = h('span', { class: 'lane__title' });
+      g.longLabel.split(' · ').forEach(function (part, i, arr) { title.appendChild(h('span', { class: 'nowrap', text: part + (i < arr.length - 1 ? ' ·' : '') })); if (i < arr.length - 1) title.appendChild(document.createTextNode(' ')); });
+      var lane = h('div', { class: 'lane' }, h('div', { class: 'lane__head' }, h('span', { class: 'legend__sw', style: { background: U.wlVar(g.key) } }), title, h('small', { text: g.count + ' tasks' })));
+      var chips = h('div', { class: 'lane__chips' });
+      g.sources.forEach(function (k) {
+        var s = U.source(k);
+        var c = h('button', { class: 'chip', attrs: { type: 'button', 'aria-pressed': 'false', 'aria-controls': 'source-info', 'aria-label': s.name + ', ' + s.count + ' tasks' } }, s.name, h('span', { class: 'chip__n', text: String(s.count) }));
+        U.hoverTip(c, function () { return srcTip(s); });
+        c.addEventListener('pointerenter', function () { hot(k, true); });
+        c.addEventListener('pointerleave', function () { hot(k, false); });
+        c.addEventListener('click', function () { pin(k); });
+        chipBtns[k] = c;
+        chips.appendChild(c);
+      });
+      lane.appendChild(chips);
+      wall.appendChild(lane);
+    });
+    U.$('#source-info').appendChild(h('p', { class: 'source-info__empty', text: 'select a benchmark to read what it tests' }));
+
+    /* a named, focusable scroller with the caption above it, like the other table views */
+    U.tableView(U.$('#sources-table'), U.table([
+      { label: 'Benchmark', get: function (s) { return s.name; } },
+      { label: 'Capability', get: function (s) { return s.capability; } },
+      { label: '# Tasks', num: true, get: function (s) { return String(s.count); } },
+      { label: 'Group', get: function (s) { return U.group(s.group).label; } },
+      { label: 'Scoring', get: function (s) { return s.scoring; } }
+    ], D.sources, 'Source benchmarks (Table 11)'));
+  }
+  function srcTip(s) {
+    var g = U.group(s.group);
+    return { title: s.name, rows: [
+      { label: 'Tasks', value: String(s.count), color: U.css('--wl-' + s.group) },
+      { label: 'Group', value: g.label },
+      { label: 'Scoring', value: s.scoring }
+    ], note: s.capability };
+  }
+  function hot(k, on) {
+    if (chipBtns[k]) chipBtns[k].classList.toggle('is-hot', on);
+    if (segEls[k]) segEls[k].classList.toggle('is-hot', on);
+  }
+  function pin(k) {
+    pinned = pinned === k ? null : k;
+    Object.keys(chipBtns).forEach(function (x) { chipBtns[x].setAttribute('aria-pressed', String(x === pinned)); });
+    var box = U.$('#source-info');
+    box.textContent = '';
+    if (!pinned) { box.appendChild(h('p', { class: 'source-info__empty', text: 'select a benchmark to read what it tests' })); return; }
+    var s = U.source(pinned), g = U.group(s.group);
+    var cite = s.citation || {};
+    box.appendChild(h('div', { class: 'source-info__card' },
+      h('h4', { text: s.fullName && s.fullName !== s.name ? s.name + ' — ' + s.fullName : s.name }),
+      h('div', { class: 'source-info__meta' },
+        h('span', { class: 'pill' }, h('span', { class: 'dot', style: { background: U.wlVar(s.group) } }), g.label),
+        h('span', { class: 'pill', text: s.count + ' tasks' }),
+        h('span', { class: 'pill', text: s.scoring }),
+        h('span', { class: 'pill pill--soft', text: s.capability })),
+      h('p', { text: s.description }),
+      cite.title ? h('p', { class: 'source-info__cite', text: (cite.text ? cite.text + '. ' : '') + cite.title + (cite.venue ? '. ' + cite.venue : '') }) : null));
+  }
+
+  /* ---------------- explorer ---------------- */
+  function buildExplorer() {
+    U.$('#explorer-sub').textContent = D.tasks.length + ' tasks · id and name, source, group, scoring, level and time budget';
+    var fg = U.$('#f-group'), fs = U.$('#f-source'), fsc = U.$('#f-scoring'), fq = U.$('#f-q');
+    fg.appendChild(h('option', { text: 'All groups', attrs: { value: '' } }));
+    U.GROUPS.forEach(function (g) { fg.appendChild(h('option', { text: g.label, attrs: { value: g.key } })); });
+    fs.appendChild(h('option', { text: 'All sources', attrs: { value: '' } }));
+    D.sources.forEach(function (s) { fs.appendChild(h('option', { text: s.name, attrs: { value: s.key } })); });
+    fsc.appendChild(h('option', { text: 'All modes', attrs: { value: '' } }));
+    ['Auto', 'Hybrid', 'Judge'].forEach(function (s) { fsc.appendChild(h('option', { text: s, attrs: { value: s } })); });
+    var table = U.$('#task-table');
+    table.appendChild(h('caption', { class: 'sr-only', text: 'Task metadata from the repository (no prompts or answers)' }));
+    var thead = h('thead', null, h('tr', null,
+      h('th', { text: 'Task id · name', attrs: { scope: 'col' } }), h('th', { text: 'Source', attrs: { scope: 'col' } }),
+      h('th', { text: 'Group', attrs: { scope: 'col' } }), h('th', { text: 'Scoring', attrs: { scope: 'col' } }),
+      h('th', { text: 'Level', attrs: { scope: 'col' } }), h('th', { class: 'num', text: 'Time budget (s)', attrs: { scope: 'col' } })));
+    var tb = h('tbody');
+    table.appendChild(thead); table.appendChild(tb);
+    function draw() {
+      var q = fq.value.trim().toLowerCase();
+      var rows = D.tasks.filter(function (t) {
+        return (!fg.value || t.group === fg.value) && (!fs.value || t.source === fs.value) && (!fsc.value || t.scoring === fsc.value) &&
+          (!q || t.id.toLowerCase().indexOf(q) >= 0 || (t.name || '').toLowerCase().indexOf(q) >= 0);
+      });
+      tb.textContent = '';
+      var frag = document.createDocumentFragment();
+      rows.forEach(function (t) {
+        var g = U.group(t.group);
+        frag.appendChild(h('tr', null,
+          h('th', { class: 'mono', attrs: { scope: 'row' } }, t.id, t.name ? h('span', { class: 'task-name', text: t.name }) : null),
+          h('td', { text: U.source(t.source).name }),
+          h('td', null, h('span', { class: 'legend__item' }, h('span', { class: 'legend__sw', style: { background: U.wlVar(t.group), width: '10px', height: '10px' } }), g.label)),
+          h('td', { text: t.scoring }),
+          h('td', { text: t.level || '—' }),
+          h('td', { class: 'num', text: String(t.timeoutSeconds) })));
+      });
+      tb.appendChild(frag);
+      U.$('#explorer-count').textContent = 'Showing ' + rows.length + ' of ' + D.tasks.length + ' tasks';
+    }
+    [fg, fs, fsc].forEach(function (el) { el.addEventListener('change', draw); });
+    fq.addEventListener('input', draw);
+    /* the 233-row table is only built the first time the explorer is opened */
+    var ex = U.$('#explorer'), built = false;
+    function ensure() { if (!built && ex.open) { built = true; draw(); } }
+    ex.addEventListener('toggle', ensure);
+    ensure();
+  }
+
+  U.initWorkloads = function () {
+    buildMatrix();
+    select(D.groupOrder[0]);
+    buildSources();
+    buildExplorer();
+  };
+})();

index.html

@@ -0,0 +1,1142 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light">
+<meta name="theme-color" content="#FFF8EC">
+<title>OmniStepBench: Deployment-Aware Agent Evaluation across Modalities and Task Complexity</title>
+<meta name="description" content="OmniStepBench is a benchmark for deployment-aware agent evaluation across modalities and task complexity: 233 tasks from 22 source benchmarks in a 2×3 workload matrix, one shared OpenClaw runtime with task contracts, and an evidence-based audit of LLM-judge scores.">
+<meta name="author" content="Yu Liu, Zhilin Liu, Zhiwei Yang, Shaojie Zhang, Zheyuan Deng, Tingwei Huang, Zhenbo Luo, Lei Jiang, Yanbing Liu, Pei Fu">
+
+<!-- Open Graph / social cards. Image URLs are absolute (this Space's static host, see DEPLOY.md). -->
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="OmniStepBench">
+<meta property="og:title" content="OmniStepBench: Deployment-Aware Agent Evaluation across Modalities and Task Complexity">
+<meta property="og:description" content="A benchmark for deployment-aware agent evaluation across modalities and task complexity. No model dominates all six workload groups.">
+<meta property="og:image" content="https://seerray-lab-omnistepbench.static.hf.space/assets/img/social-card.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="OmniStepBench project card with the lobster evaluator mascot">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="OmniStepBench: Deployment-Aware Agent Evaluation across Modalities and Task Complexity">
+<meta name="twitter:description" content="A benchmark for deployment-aware agent evaluation across modalities and task complexity.">
+<meta name="twitter:image" content="https://seerray-lab-omnistepbench.static.hf.space/assets/img/social-card.png">
+
+<!-- Google Scholar -->
+<meta name="citation_title" content="OmniStepBench: Deployment-Aware Agent Evaluation across Modalities and Task Complexity">
+<meta name="citation_author" content="Liu, Yu">
+<meta name="citation_author" content="Liu, Zhilin">
+<meta name="citation_author" content="Yang, Zhiwei">
+<meta name="citation_author" content="Zhang, Shaojie">
+<meta name="citation_author" content="Deng, Zheyuan">
+<meta name="citation_author" content="Huang, Tingwei">
+<meta name="citation_author" content="Luo, Zhenbo">
+<meta name="citation_author" content="Jiang, Lei">
+<meta name="citation_author" content="Liu, Yanbing">
+<meta name="citation_author" content="Fu, Pei">
+<meta name="citation_publication_date" content="2026/09/05">
+<meta name="citation_arxiv_id" content="2609.06059">
+<meta name="citation_abstract_html_url" content="https://arxiv.org/abs/2609.06059">
+<meta name="citation_pdf_url" content="https://arxiv.org/pdf/2609.06059">
+
+<link rel="canonical" href="https://seerray-lab.github.io/OmniStepBench/">
+<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="assets/fonts/fonts.css" id="fonts-css">
+<script>
+  /* Firefox gives every file:// page its own origin and can refuse web fonts loaded from files.
+     Only in that case, swap in the same fonts embedded as data URIs (fonts.inline.css). */
+  if (location.protocol === 'file:' && /firefox/i.test(navigator.userAgent)) document.getElementById('fonts-css').href = 'assets/fonts/fonts.inline.css';
+</script>
+<script>
+  /* Hugging Face shows this Space inside a sandboxed frame that cannot navigate the whole window, and sites such as
+     GitHub refuse to be framed. Only while framed, open links to other sites in a new tab. */
+  if (window.self !== window.top) document.addEventListener('click', function (e) {
+    var a = e.target && e.target.closest ? e.target.closest('a[href]') : null;
+    if (a && /^https?:$/.test(a.protocol) && a.host !== location.host) a.target = '_blank';
+  }, true);
+</script>
+<link rel="stylesheet" href="assets/css/palette.css">
+<link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+<a class="skip-link" href="#main">Skip to content</a>
+<svg xmlns="http://www.w3.org/2000/svg" class="sprite" aria-hidden="true" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden">
+  <defs>
+    <!-- ============ CAMEO CREATURES (viewBox 0 0 120 120) ============ -->
+
+    <!-- Crab walking in circles: "deadlock loop" -->
+    <symbol id="cr-crab" viewBox="0 0 120 120">
+      <path d="M60 12 A 48 48 0 1 1 22 30" fill="none" stroke="#7FB8C9" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="2 9"/>
+      <path d="M14 22 L 22 31 L 31 24" fill="none" stroke="#1E3450" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <g fill="none" stroke-width="3.5">
+          <path d="M36 76 L 24 84 L 22 94"/><path d="M38 84 L 28 94 L 28 102"/>
+          <path d="M84 76 L 96 84 L 98 94"/><path d="M82 84 L 92 94 L 92 102"/>
+          <path d="M38 66 L 26 56"/><path d="M82 66 L 94 56"/>
+          <path d="M52 58 L 48 44"/><path d="M68 58 L 72 44"/>
+        </g>
+        <ellipse cx="60" cy="74" rx="28" ry="19" fill="#F08A4B" stroke-width="3"/>
+        <path d="M44 66 Q 60 58 76 66" fill="none" stroke="#FFFFFF" stroke-width="3" opacity=".5"/>
+        <path d="M14 52 C 10 40, 18 32, 27 34 L 25 43 L 33 39 C 36 48, 30 57, 21 58 C 17 58, 15 56, 14 52 Z" fill="#F08A4B" stroke-width="3"/>
+        <path d="M106 52 C 110 40, 102 32, 93 34 L 95 43 L 87 39 C 84 48, 90 57, 99 58 C 103 58, 105 56, 106 52 Z" fill="#F08A4B" stroke-width="3"/>
+        <circle cx="47" cy="40" r="8" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="73" cy="40" r="8" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="50" cy="42" r="3.4" fill="#1E3450" stroke="none"/>
+        <circle cx="76" cy="42" r="3.4" fill="#1E3450" stroke="none"/>
+        <path d="M53 80 Q 60 76 67 80" fill="none" stroke-width="3"/>
+        <path d="M44 88 Q 47 84 50 88 M 70 88 Q 73 84 76 88" fill="none" stroke-width="2" opacity=".45"/>
+      </g>
+    </symbol>
+
+    <!-- Fish peeking at the rubric: "rubric leakage" -->
+    <symbol id="cr-fish" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="rotate(8 92 58)">
+          <rect x="74" y="30" width="36" height="46" rx="5" fill="#FFFFFF" stroke-width="3"/>
+          <path d="M81 42 L 103 42 M 81 51 L 100 51 M 81 60 L 96 60" fill="none" stroke-width="2.6" opacity=".55"/>
+          <path d="M92 67 L 104 67" fill="none" stroke="#7A55C4" stroke-width="3"/>
+        </g>
+        <path d="M86 82 C 86 88, 92 88, 92 82 C 92 78, 89 76, 89 74 C 89 76, 86 78, 86 82 Z" fill="#9B7BD8" stroke-width="2.2"/>
+        <path d="M95 96 C 95 101, 100 101, 100 96 C 100 93, 97.5 91, 97.5 89 C 97.5 91, 95 93, 95 96 Z" fill="#9B7BD8" stroke-width="2.2"/>
+        <path d="M22 64 L 4 48 Q 2 64 4 80 Z" fill="#F2B84B" stroke-width="3"/>
+        <ellipse cx="44" cy="64" rx="30" ry="23" fill="#FFCF5C" stroke-width="3"/>
+        <path d="M36 44 Q 46 30 58 44" fill="#F2B84B" stroke-width="3"/>
+        <path d="M30 60 Q 34 66 30 72 M 38 58 Q 42 66 38 74" fill="none" stroke-width="2.2" opacity=".35"/>
+        <circle cx="58" cy="58" r="10" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="62" cy="57" r="4.5" fill="#1E3450" stroke="none"/>
+        <circle cx="63.5" cy="55" r="1.6" fill="#FFFFFF" stroke="none"/>
+        <path d="M66 72 Q 70 74 72 70" fill="none" stroke-width="3"/>
+        <path d="M40 84 Q 44 92 50 86" fill="#F2B84B" stroke-width="2.6"/>
+      </g>
+    </symbol>
+
+    <!-- Hermit crab in a cardboard "tool" shell: "pseudo-tool-call credulity" -->
+    <symbol id="cr-hermit" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <g fill="none" stroke-width="3.2">
+          <path d="M42 88 L 34 100"/><path d="M52 90 L 48 102"/><path d="M62 90 L 64 102"/>
+        </g>
+        <rect x="46" y="30" width="62" height="56" rx="6" fill="#EBC792" stroke-width="3" stroke-dasharray="7 5"/>
+        <path d="M46 44 L 108 44" fill="none" stroke-width="2.4" stroke-dasharray="5 5" opacity=".6"/>
+        <path d="M68 70 L 86 52 M 82 50 C 84 46, 90 45, 93 48 L 88 53 L 91 56 L 96 51 C 99 54, 98 60, 94 62 M 72 66 C 70 70, 64 72, 62 68 L 67 63 L 64 60 L 59 65 C 56 62, 57 56, 61 54" fill="none" stroke-width="3" stroke-dasharray="5 4"/>
+        <path d="M22 86 C 16 70, 26 56, 46 58 L 48 88 Z" fill="#F08A4B" stroke-width="3"/>
+        <path d="M30 60 L 26 44 M 40 58 L 40 42" fill="none" stroke-width="3"/>
+        <circle cx="25" cy="39" r="7" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="40" cy="37" r="7" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="27" cy="41" r="3" fill="#1E3450" stroke="none"/>
+        <circle cx="42" cy="39" r="3" fill="#1E3450" stroke="none"/>
+        <path d="M8 78 C 4 68, 10 60, 18 62 L 17 69 L 24 66 C 26 73, 22 80, 15 81 C 11 81, 9 80, 8 78 Z" fill="#F08A4B" stroke-width="3"/>
+        <path d="M30 76 Q 34 79 38 76" fill="none" stroke-width="2.6"/>
+      </g>
+    </symbol>
+
+    <!-- Wobbly jellyfish: "output instability" -->
+    <symbol id="cr-jelly" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <g fill="none" stroke-width="3">
+          <path d="M40 66 C 34 76, 46 82, 40 92 C 36 98, 42 104, 40 108"/>
+          <path d="M54 68 L 50 78 M 52 84 L 56 94 M 53 100 L 50 108"/>
+          <path d="M68 68 C 74 78, 62 84, 68 94 C 72 100, 66 104, 68 110"/>
+          <path d="M82 66 L 86 76 M 84 82 L 80 92"/>
+        </g>
+        <path d="M28 64 C 26 34, 94 30, 94 64 Q 86 70 78 64 Q 70 70 61 64 Q 52 70 44 64 Q 36 70 28 64 Z" fill="#CDB8F5" stroke-width="3"/>
+        <path d="M40 44 Q 48 36 58 38" fill="none" stroke="#FFFFFF" stroke-width="4" opacity=".8"/>
+        <circle cx="50" cy="54" r="3.4" fill="#1E3450" stroke="none"/>
+        <circle cx="72" cy="54" r="3.4" fill="#1E3450" stroke="none"/>
+        <path d="M54 60 L 58 57 L 62 61 L 66 57" fill="none" stroke-width="2.6"/>
+        <path d="M100 30 L 106 26 M 102 40 L 110 40 M 12 34 L 18 38" fill="none" stroke="#9B7BD8" stroke-width="3"/>
+      </g>
+    </symbol>
+
+    <!-- Snail with a clock shell and a gold star: "timeout-with-credit" -->
+    <symbol id="cr-snail" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M10 92 C 10 78, 20 70, 30 70 L 34 70 C 36 82, 46 88, 60 88 L 100 88 C 108 88, 110 96, 102 98 L 18 98 C 12 98, 10 96, 10 92 Z" fill="#9ED3A0" stroke-width="3"/>
+        <path d="M22 72 L 16 52 M 30 70 L 30 50" fill="none" stroke-width="3"/>
+        <circle cx="16" cy="48" r="5" fill="#FFFFFF" stroke-width="2.6"/>
+        <circle cx="30" cy="46" r="5" fill="#FFFFFF" stroke-width="2.6"/>
+        <circle cx="17" cy="49" r="2.2" fill="#1E3450" stroke="none"/>
+        <circle cx="31" cy="47" r="2.2" fill="#1E3450" stroke="none"/>
+        <path d="M18 84 Q 22 87 26 84" fill="none" stroke-width="2.4"/>
+        <circle cx="66" cy="60" r="28" fill="#F2B84B" stroke-width="3"/>
+        <circle cx="66" cy="60" r="20" fill="#FFFFFF" stroke-width="2.6"/>
+        <path d="M66 46 L 66 60 L 76 66" fill="none" stroke-width="3.2"/>
+        <path d="M66 42 L 66 44 M 84 60 L 82 60 M 66 78 L 66 76 M 48 60 L 50 60" fill="none" stroke-width="2.6"/>
+        <path d="M100 14 L 104 24 L 115 25 L 107 32 L 110 43 L 100 37 L 90 43 L 93 32 L 85 25 L 96 24 Z" fill="#FFD166" stroke-width="2.6"/>
+      </g>
+    </symbol>
+
+    <!-- Octopus juggling tools: "shared execution" -->
+    <symbol id="cr-octopus" viewBox="0 0 120 130">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M22 24 A 44 30 0 0 1 98 24" fill="none" stroke="#9FC9D6" stroke-width="2.6" stroke-dasharray="2 7"/>
+        <g transform="translate(10 18) rotate(-20)">
+          <path d="M0 10 L 14 -4 M 12 -8 C 13 -12, 19 -13, 21 -10 L 17 -6 L 20 -3 L 24 -7 C 27 -4, 26 1, 22 3" fill="none" stroke-width="3"/>
+        </g>
+        <rect x="46" y="2" width="28" height="20" rx="4" fill="#1E3450" stroke-width="2.6"/>
+        <path d="M51 9 L 55 12 L 51 15 M 58 16 L 66 16" fill="none" stroke="#FFFFFF" stroke-width="2.4"/>
+        <circle cx="100" cy="22" r="11" fill="#BFE9F3" stroke-width="2.6"/>
+        <path d="M89 22 L 111 22 M 100 11 C 94 16, 94 28, 100 33 M 100 11 C 106 16, 106 28, 100 33" fill="none" stroke-width="2"/>
+        <g fill="#B28BE3" stroke-width="3">
+          <path d="M40 92 C 34 104, 22 104, 18 96 C 26 98, 30 92, 32 84 Z"/>
+          <path d="M80 92 C 86 104, 98 104, 102 96 C 94 98, 90 92, 88 84 Z"/>
+          <path d="M48 96 C 46 110, 40 120, 32 118 C 38 112, 40 104, 40 94 Z"/>
+          <path d="M72 96 C 74 110, 80 120, 88 118 C 82 112, 80 104, 80 94 Z"/>
+          <path d="M56 98 C 56 112, 54 122, 48 124 C 52 116, 52 108, 50 98 Z"/>
+          <path d="M64 98 C 64 112, 66 122, 72 124 C 68 116, 68 108, 70 98 Z"/>
+        </g>
+        <path d="M34 50 C 20 44, 14 32, 18 24" fill="none" stroke-width="9"/>
+        <path d="M34 50 C 20 44, 14 32, 18 24" fill="none" stroke="#B28BE3" stroke-width="4.5"/>
+        <path d="M86 50 C 100 44, 106 34, 104 30" fill="none" stroke-width="9"/>
+        <path d="M86 50 C 100 44, 106 34, 104 30" fill="none" stroke="#B28BE3" stroke-width="4.5"/>
+        <path d="M30 78 C 24 46, 40 30, 60 30 C 80 30, 96 46, 90 78 C 88 92, 32 92, 30 78 Z" fill="#B28BE3" stroke-width="3"/>
+        <ellipse cx="46" cy="46" rx="9" ry="5" transform="rotate(-30 46 46)" fill="#FFFFFF" opacity=".45" stroke="none"/>
+        <circle cx="50" cy="64" r="7" fill="#FFFFFF" stroke-width="2.6"/>
+        <circle cx="70" cy="64" r="7" fill="#FFFFFF" stroke-width="2.6"/>
+        <circle cx="51.5" cy="62" r="3.2" fill="#1E3450" stroke="none"/>
+        <circle cx="71.5" cy="62" r="3.2" fill="#1E3450" stroke="none"/>
+        <path d="M54 76 Q 60 81 66 76" fill="none" stroke-width="2.6"/>
+        <ellipse cx="42" cy="74" rx="5" ry="3" fill="#FF9EB5" opacity=".7" stroke="none"/>
+        <ellipse cx="78" cy="74" rx="5" ry="3" fill="#FF9EB5" opacity=".7" stroke="none"/>
+      </g>
+    </symbol>
+
+    <!-- Treasure chest of task cards: "construct" -->
+    <symbol id="ic-chest" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="rotate(-12 44 40)"><rect x="30" y="18" width="30" height="38" rx="4" fill="#FFFFFF" stroke-width="2.6"/><path d="M36 28 L 54 28 M 36 36 L 50 36" fill="none" stroke-width="2.2" opacity=".5"/></g>
+        <g transform="rotate(10 78 38)"><rect x="62" y="14" width="30" height="40" rx="4" fill="#EAF2FD" stroke-width="2.6"/><path d="M68 24 L 86 24 M 68 32 L 82 32" fill="none" stroke-width="2.2" opacity=".5"/></g>
+        <rect x="46" y="10" width="30" height="42" rx="4" fill="#FDF0E2" stroke-width="2.6"/>
+        <path d="M52 20 L 70 20 M 52 28 L 66 28 M 52 36 L 68 36" fill="none" stroke-width="2.2" opacity=".5"/>
+        <path d="M16 56 C 16 42, 104 42, 104 56 L 104 60 L 16 60 Z" fill="#B97A3E" stroke-width="3"/>
+        <rect x="16" y="58" width="88" height="46" rx="6" fill="#D9964F" stroke-width="3"/>
+        <path d="M16 72 L 104 72" fill="none" stroke-width="2.6" opacity=".5"/>
+        <path d="M34 58 L 34 104 M 86 58 L 86 104" fill="none" stroke="#8B5A2B" stroke-width="5"/>
+        <rect x="52" y="64" width="16" height="18" rx="4" fill="#F2B84B" stroke-width="2.6"/>
+        <circle cx="60" cy="72" r="2.6" fill="#1E3450" stroke="none"/>
+        <path d="M104 18 L 104 26 M 100 22 L 108 22 M 14 28 L 14 34 M 11 31 L 17 31" fill="none" stroke="#F2B84B" stroke-width="3"/>
+      </g>
+    </symbol>
+
+    <!-- Balance scale with gear (auto) and speech bubble (judge): "score" -->
+    <symbol id="ic-scale" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M60 22 L 60 100" fill="none" stroke-width="4"/>
+        <path d="M40 104 L 80 104 C 80 96, 40 96, 40 104 Z" fill="#9AA8B8" stroke-width="3"/>
+        <path d="M20 30 L 100 30" fill="none" stroke-width="4"/>
+        <circle cx="60" cy="22" r="6" fill="#F2B84B" stroke-width="3"/>
+        <path d="M20 30 L 8 64 M 20 30 L 32 64 M 100 30 L 88 64 M 100 30 L 112 64" fill="none" stroke-width="2.4"/>
+        <path d="M4 64 L 36 64 C 34 76, 6 76, 4 64 Z" fill="#EAF2FD" stroke-width="3"/>
+        <path d="M84 64 L 116 64 C 114 76, 86 76, 84 64 Z" fill="#FDF0E2" stroke-width="3"/>
+        <g transform="translate(20 52)"><circle r="7" fill="#9AA8B8" stroke-width="2.6"/><circle r="2.5" fill="#FFFFFF" stroke-width="2"/><path d="M0 -10 L 0 -7 M 0 7 L 0 10 M -10 0 L -7 0 M 7 0 L 10 0 M -7 -7 L -5 -5 M 5 5 L 7 7 M -7 7 L -5 5 M 5 -5 L 7 -7" fill="none" stroke-width="2.6"/></g>
+        <path d="M90 44 L 110 44 C 113 44, 114 46, 114 48 L 114 56 C 114 58, 112 60, 110 60 L 98 60 L 93 64 L 94 60 L 90 60 C 88 60, 86 58, 86 56 L 86 48 C 86 46, 88 44, 90 44 Z" fill="#FFFFFF" stroke-width="2.6"/>
+        <path d="M92 52 L 108 52" fill="none" stroke-width="2.2" opacity=".6"/>
+      </g>
+    </symbol>
+
+    <!-- Report board with bars + frontier curve: "report" -->
+    <symbol id="ic-board" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M60 86 L 60 110" fill="none" stroke="#8B5A2B" stroke-width="7"/>
+        <path d="M60 86 L 60 110" fill="none" stroke-width="2" opacity="0"/>
+        <path d="M44 112 Q 60 104 76 112" fill="#F2D9A6" stroke-width="3"/>
+        <rect x="10" y="14" width="100" height="74" rx="10" fill="#FFFFFF" stroke-width="3"/>
+        <path d="M24 74 L 98 74" fill="none" stroke-width="2.4" opacity=".5"/>
+        <rect x="28" y="54" width="10" height="20" rx="2" fill="#4A7AE4" stroke-width="2.4"/>
+        <rect x="44" y="44" width="10" height="30" rx="2" fill="#CC580B" stroke-width="2.4"/>
+        <rect x="60" y="36" width="10" height="38" rx="2" fill="#4A7AE4" stroke-width="2.4"/>
+        <rect x="76" y="48" width="10" height="26" rx="2" fill="#CC580B" stroke-width="2.4"/>
+        <path d="M26 44 Q 44 30, 60 28 T 96 22" fill="none" stroke="#B51C79" stroke-width="3.4"/>
+        <circle cx="60" cy="28" r="3.6" fill="#B51C79" stroke="#FFFFFF" stroke-width="1.6"/>
+        <circle cx="96" cy="22" r="3.6" fill="#B51C79" stroke="#FFFFFF" stroke-width="1.6"/>
+      </g>
+    </symbol>
+
+    <!-- Fishbowl with three fish: "attributable / shared runtime" -->
+    <symbol id="ic-bowl" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M36 20 L 84 20 L 84 26 C 104 36, 112 58, 104 80 C 96 102, 24 102, 16 80 C 8 58, 16 36, 36 26 Z" fill="#E8F7FB" stroke-width="3"/>
+        <path d="M18 56 C 40 50, 80 62, 102 54 C 108 70, 104 84, 96 92 C 80 104, 40 104, 24 92 C 16 84, 12 70, 18 56 Z" fill="#BFE6EF" stroke="none"/>
+        <path d="M36 20 L 84 20 L 84 26 C 104 36, 112 58, 104 80 C 96 102, 24 102, 16 80 C 8 58, 16 36, 36 26 Z" fill="none" stroke-width="3"/>
+        <path d="M30 40 Q 26 50 28 60" fill="none" stroke="#FFFFFF" stroke-width="4" opacity=".9"/>
+        <g transform="translate(40 66)"><path d="M-12 0 L -18 -6 L -18 6 Z" fill="#F08A4B" stroke-width="2.2"/><ellipse rx="10" ry="7" fill="#F08A4B" stroke-width="2.4"/><circle cx="4" cy="-1" r="1.8" fill="#1E3450" stroke="none"/></g>
+        <g transform="translate(76 60) scale(-1 1)"><path d="M-12 0 L -18 -6 L -18 6 Z" fill="#FFCF5C" stroke-width="2.2"/><ellipse rx="10" ry="7" fill="#FFCF5C" stroke-width="2.4"/><circle cx="4" cy="-1" r="1.8" fill="#1E3450" stroke="none"/></g>
+        <g transform="translate(62 84)"><path d="M-12 0 L -18 -6 L -18 6 Z" fill="#B28BE3" stroke-width="2.2"/><ellipse rx="10" ry="7" fill="#B28BE3" stroke-width="2.4"/><circle cx="4" cy="-1" r="1.8" fill="#1E3450" stroke="none"/></g>
+        <circle cx="86" cy="42" r="3" fill="#FFFFFF" stroke-width="1.8"/>
+        <circle cx="92" cy="32" r="2" fill="#FFFFFF" stroke-width="1.6"/>
+      </g>
+    </symbol>
+
+    <!-- Grid under a magnifier: "interpretable" -->
+    <symbol id="ic-grid" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="8" y="22" width="26" height="26" rx="6" fill="#18B6F2" stroke-width="2.6"/>
+        <rect x="38" y="22" width="26" height="26" rx="6" fill="#4A7AE4" stroke-width="2.6"/>
+        <rect x="68" y="22" width="26" height="26" rx="6" fill="#2C45AE" stroke-width="2.6"/>
+        <rect x="8" y="52" width="26" height="26" rx="6" fill="#E29805" stroke-width="2.6"/>
+        <rect x="38" y="52" width="26" height="26" rx="6" fill="#CC580B" stroke-width="2.6"/>
+        <rect x="68" y="52" width="26" height="26" rx="6" fill="#922B01" stroke-width="2.6"/>
+        <path d="M86 88 L 108 110" fill="none" stroke-width="11"/>
+        <path d="M86 88 L 108 110" fill="none" stroke="#8B5A2B" stroke-width="6"/>
+        <circle cx="72" cy="72" r="24" fill="#F2B84B" stroke-width="3"/>
+        <circle cx="72" cy="72" r="17" fill="#EAF7FB" fill-opacity=".85" stroke-width="2.6"/>
+        <path d="M62 66 Q 64 60 70 58" fill="none" stroke="#FFFFFF" stroke-width="3.4"/>
+      </g>
+    </symbol>
+
+    <!-- Shield with check and tiny magnifier: "trustworthy" -->
+    <symbol id="ic-shield" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M56 10 C 70 20, 84 22, 98 20 C 100 58, 90 90, 56 108 C 22 90, 12 58, 14 20 C 28 22, 42 20, 56 10 Z" fill="#DCEFD8" stroke-width="3"/>
+        <path d="M56 20 C 66 27, 78 30, 89 29 C 89 58, 80 82, 56 97 Z" fill="#B9DFB1" stroke="none"/>
+        <path d="M36 58 L 50 72 L 78 42" fill="none" stroke="#2E7D46" stroke-width="7"/>
+        <path d="M96 96 L 110 110" fill="none" stroke-width="8"/>
+        <path d="M96 96 L 110 110" fill="none" stroke="#8B5A2B" stroke-width="4"/>
+        <circle cx="88" cy="88" r="13" fill="#F2B84B" stroke-width="2.6"/>
+        <circle cx="88" cy="88" r="8" fill="#EAF7FB" stroke-width="2.2"/>
+      </g>
+    </symbol>
+
+    <!-- Clam with a pearl: "cite" -->
+    <symbol id="ic-clam" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M14 70 C 14 40, 106 40, 106 70 Z" fill="#F7B7A6" stroke-width="3" transform="rotate(-14 60 70)"/>
+        <path d="M40 60 L 44 44 M 60 56 L 60 38 M 80 60 L 76 44" fill="none" stroke-width="2.4" opacity=".45" transform="rotate(-14 60 70)"/>
+        <path d="M12 72 L 108 72 C 108 100, 12 100, 12 72 Z" fill="#F4A08C" stroke-width="3"/>
+        <path d="M36 76 L 38 92 M 60 76 L 60 96 M 84 76 L 82 92" fill="none" stroke-width="2.4" opacity=".45"/>
+        <circle cx="60" cy="66" r="12" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="56" cy="62" r="3.6" fill="#EAF2FD" stroke="none"/>
+        <path d="M98 30 L 98 38 M 94 34 L 102 34" fill="none" stroke="#F2B84B" stroke-width="3"/>
+      </g>
+    </symbol>
+
+    <!-- Terminal with bubbles: "quick start" -->
+    <symbol id="ic-terminal" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="10" y="26" width="92" height="70" rx="10" fill="#14293F" stroke-width="3"/>
+        <path d="M10 40 L 102 40" fill="none" stroke="#3A4F66" stroke-width="3"/>
+        <circle cx="20" cy="33" r="2.6" fill="#EC624A" stroke="none"/>
+        <circle cx="29" cy="33" r="2.6" fill="#F2B84B" stroke="none"/>
+        <circle cx="38" cy="33" r="2.6" fill="#7BC47F" stroke="none"/>
+        <path d="M24 56 L 34 64 L 24 72" fill="none" stroke="#7FE0E0" stroke-width="4"/>
+        <path d="M42 74 L 62 74" fill="none" stroke="#FFFFFF" stroke-width="4"/>
+        <circle cx="104" cy="16" r="6" fill="#FFFFFF" stroke-width="2.4"/>
+        <circle cx="112" cy="30" r="3.6" fill="#FFFFFF" stroke-width="2"/>
+      </g>
+    </symbol>
+
+    <!-- ============ DECOR ============ -->
+    <symbol id="dc-star" viewBox="0 0 60 60">
+      <path d="M30 4 C 33 16, 36 20, 56 22 C 42 30, 40 34, 46 54 C 36 44, 30 42, 16 54 C 20 38, 18 32, 4 22 C 22 22, 26 16, 30 4 Z" fill="#F7A072" stroke="#1E3450" stroke-width="2.6" stroke-linejoin="round"/>
+      <circle cx="30" cy="30" r="2" fill="#1E3450"/><circle cx="24" cy="26" r="1.5" fill="#FFFFFF" opacity=".8"/><circle cx="36" cy="36" r="1.5" fill="#FFFFFF" opacity=".8"/>
+    </symbol>
+    <symbol id="dc-shell" viewBox="0 0 60 60">
+      <path d="M30 8 C 50 10, 58 34, 52 48 L 8 48 C 2 34, 10 10, 30 8 Z" fill="#FBD3C4" stroke="#1E3450" stroke-width="2.6" stroke-linejoin="round"/>
+      <path d="M30 12 L 30 48 M 18 16 L 22 48 M 42 16 L 38 48 M 10 28 L 16 48 M 50 28 L 44 48" fill="none" stroke="#1E3450" stroke-width="2" opacity=".4" stroke-linecap="round"/>
+      <path d="M22 48 L 26 56 L 34 56 L 38 48" fill="#FBD3C4" stroke="#1E3450" stroke-width="2.6" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="dc-weed" viewBox="0 0 60 200">
+      <path d="M30 200 C 20 170, 42 150, 30 120 C 18 90, 42 70, 30 40 C 24 24, 30 10, 34 2" fill="none" stroke="#1E3450" stroke-width="13" stroke-linecap="round"/>
+      <path d="M30 200 C 20 170, 42 150, 30 120 C 18 90, 42 70, 30 40 C 24 24, 30 10, 34 2" fill="none" stroke="#4E9F63" stroke-width="8" stroke-linecap="round"/>
+      <path d="M31 150 C 44 142, 52 130, 50 118 M 29 96 C 16 88, 8 76, 10 64" fill="none" stroke="#1E3450" stroke-width="9" stroke-linecap="round"/>
+      <path d="M31 150 C 44 142, 52 130, 50 118 M 29 96 C 16 88, 8 76, 10 64" fill="none" stroke="#6BBF7A" stroke-width="4.5" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="dc-fish" viewBox="0 0 60 40">
+      <path d="M14 20 L 2 10 L 3 30 Z" fill="#FFCF5C" stroke="#1E3450" stroke-width="2.4" stroke-linejoin="round"/>
+      <ellipse cx="32" cy="20" rx="20" ry="13" fill="#FFCF5C" stroke="#1E3450" stroke-width="2.4"/>
+      <path d="M26 10 Q 32 4 38 10" fill="#F2B84B" stroke="#1E3450" stroke-width="2.2"/>
+      <circle cx="42" cy="17" r="3.4" fill="#1E3450"/><circle cx="43" cy="16" r="1.2" fill="#FFFFFF"/>
+      <path d="M22 14 Q 25 20 22 26" fill="none" stroke="#1E3450" stroke-width="1.8" opacity=".4"/>
+    </symbol>
+
+    <!-- Logo: lobster face in a bubble -->
+    <symbol id="logo" viewBox="0 0 64 64">
+      <circle cx="32" cy="32" r="30" fill="#DDF3F8" stroke="#1E3450" stroke-width="2.5"/>
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M27 24 C 24 14, 18 10, 12 10 M 37 24 C 40 14, 46 10, 52 10" fill="none" stroke-width="2.4"/>
+        <path d="M10 38 C 6 30, 10 22, 16 22 L 17 29 L 21 23 C 26 26, 26 34, 22 38 C 18 42, 12 42, 10 38 Z" fill="#EC624A" stroke-width="2.2"/>
+        <path d="M54 38 C 58 30, 54 22, 48 22 L 47 29 L 43 23 C 38 26, 38 34, 42 38 C 46 42, 52 42, 54 38 Z" fill="#EC624A" stroke-width="2.2"/>
+        <path d="M32 26 C 44 26, 46 36, 46 42 C 46 52, 40 56, 32 56 C 24 56, 18 52, 18 42 C 18 36, 20 26, 32 26 Z" fill="#EC624A" stroke-width="2.4"/>
+        <circle cx="26" cy="22" r="6" fill="#FFFFFF" stroke-width="2.2"/>
+        <circle cx="38" cy="22" r="6" fill="#FFFFFF" stroke-width="2.2"/>
+        <circle cx="27.5" cy="23" r="2.6" fill="#1E3450" stroke="none"/>
+        <circle cx="39.5" cy="23" r="2.6" fill="#1E3450" stroke="none"/>
+        <path d="M27 42 Q 32 47 37 42" fill="none" stroke-width="2.2"/>
+      </g>
+    </symbol>
+
+    <!-- ============ UI ICONS (24x24 line, currentColor) ============ -->
+    <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-down" viewBox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-paper" viewBox="0 0 24 24"><path d="M7 3h7l5 5v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M14 3v5h5M9 13h6M9 17h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
+    <symbol id="i-pdf" viewBox="0 0 24 24"><path d="M7 3h7l5 5v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M12 10v7M9 14l3 3 3-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-code" viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-github" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.4 1.1 3 .8.1-.6.4-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.8-1 2.8-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z" fill="currentColor"/></symbol>
+    <symbol id="i-data" viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="7" ry="3" fill="none" stroke="currentColor" stroke-width="2"/><path d="M5 6v12c0 1.66 3.13 3 7 3s7-1.34 7-3V6M5 12c0 1.66 3.13 3 7 3s7-1.34 7-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-trophy" viewBox="0 0 24 24"><path d="M8 4h8v5a4 4 0 0 1-8 0V4zM8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 20h8M9 17h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-quote" viewBox="0 0 24 24"><path d="M6 17c-1.5 0-3-1.2-3-3.5C3 9 6 6.5 9 6l.5 1.2C7.5 8 6.5 9.5 6.5 11c2 0 3.5 1.2 3.5 3s-1.7 3-4 3zm10 0c-1.5 0-3-1.2-3-3.5C13 9 16 6.5 19 6l.5 1.2c-2 .8-3 2.3-3 3.8 2 0 3.5 1.2 3.5 3s-1.7 3-4 3z" fill="currentColor"/></symbol>
+    <symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+    <symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-table" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M3 9.5h18M3 15h18M9 4v16" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+    <symbol id="i-chart" viewBox="0 0 24 24"><path d="M4 20V4M4 20h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="9" cy="14" r="1.8" fill="currentColor"/><circle cx="13" cy="10" r="1.8" fill="currentColor"/><circle cx="18" cy="7" r="1.8" fill="currentColor"/></symbol>
+    <symbol id="i-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
+    <symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
+    <symbol id="i-zoom" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" stroke-width="2.2"/><path d="M15.5 15.5L20 20M10.5 7.5v6M7.5 10.5h6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></symbol>
+    <symbol id="i-crown" viewBox="0 0 24 24"><path d="M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5L3 8z" fill="currentColor" stroke="#1E3450" stroke-width="1.6" stroke-linejoin="round"/></symbol>
+    <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
+    <symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
+    <symbol id="i-bubble" viewBox="0 0 24 24"><path d="M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8l-4 3v-3H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
+    <symbol id="i-mix" viewBox="0 0 24 24"><circle cx="8" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="16" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+    <symbol id="i-server" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="4" y="13" width="16" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 7.5h.01M8 16.5h.01" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></symbol>
+    <symbol id="i-cloud" viewBox="0 0 24 24"><path d="M7 18a4 4 0 0 1-.5-8A6 6 0 0 1 18 9a4.5 4.5 0 0 1-.5 9H7z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
+    <symbol id="i-coins" viewBox="0 0 24 24"><ellipse cx="9" cy="7" rx="6" ry="3" fill="none" stroke="currentColor" stroke-width="2"/><path d="M3 7v5c0 1.7 2.7 3 6 3s6-1.3 6-3V7M9 15v2.5c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5V12c0-1.4-2.7-2.5-6-2.5" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+    <symbol id="i-frontier" viewBox="0 0 24 24"><path d="M3 21h18M3 21V3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M6 15l5-6 4-2 5-1" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="6" cy="15" r="1.8" fill="currentColor"/><circle cx="11" cy="9" r="1.8" fill="currentColor"/><circle cx="20" cy="6" r="1.8" fill="currentColor"/></symbol>
+    <symbol id="i-eye" viewBox="0 0 24 24"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+    <symbol id="i-loop" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-sprout" viewBox="0 0 24 24"><path d="M12 21V11M12 11C12 7 9 5 5 5c0 4 3 6 7 6zM12 13c0-4 3-6 7-6 0 4-3 6-7 6z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-compass" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M15.5 8.5l-2 5-5 2 2-5 5-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
+    <symbol id="i-token" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="13" y="4" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="4" y="13" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+    <symbol id="i-search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" stroke-width="2.2"/><path d="M15.5 15.5L20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></symbol>
+
+    <!-- ============ NEW (final page) ============ -->
+    <!-- Mascot peeking over a card edge. The flat bottom of the head sits on y=92 (the card's top edge);
+         the claws hang over the edge. viewBox 0 0 160 104 -->
+    <symbol id="mascot-peek" viewBox="0 0 160 104">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M70 58 C 62 34, 46 16, 22 10 C 12 8, 8 16, 14 20" fill="none" stroke-width="7"/>
+        <path d="M70 58 C 62 34, 46 16, 22 10 C 12 8, 8 16, 14 20" fill="none" stroke="#D9533B" stroke-width="3.2"/>
+        <path d="M90 58 C 98 34, 114 16, 138 10 C 148 8, 152 16, 146 20" fill="none" stroke-width="7"/>
+        <path d="M90 58 C 98 34, 114 16, 138 10 C 148 8, 152 16, 146 20" fill="none" stroke="#D9533B" stroke-width="3.2"/>
+        <path d="M34 92 C 34 50, 126 50, 126 92 Z" fill="#EC624A" stroke-width="3"/>
+        <ellipse cx="62" cy="66" rx="12" ry="6" transform="rotate(-24 62 66)" fill="#FFFFFF" opacity=".35" stroke="none"/>
+        <path d="M68 60 L 62 40" fill="none" stroke-width="11"/>
+        <path d="M68 60 L 62 40" fill="none" stroke="#EC624A" stroke-width="6"/>
+        <path d="M92 60 L 98 40" fill="none" stroke-width="11"/>
+        <path d="M92 60 L 98 40" fill="none" stroke="#EC624A" stroke-width="6"/>
+        <circle cx="60" cy="31" r="15" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="100" cy="31" r="15" fill="#FFFFFF" stroke-width="3"/>
+        <circle cx="62" cy="37" r="7" fill="#1E3450" stroke="none"/>
+        <circle cx="102" cy="37" r="7" fill="#1E3450" stroke="none"/>
+        <circle cx="64.5" cy="34" r="2.4" fill="#FFFFFF" stroke="none"/>
+        <circle cx="104.5" cy="34" r="2.4" fill="#FFFFFF" stroke="none"/>
+        <path d="M46 14 Q 56 9, 68 13 M 92 13 Q 104 9, 114 14" fill="none" stroke-width="2.6"/>
+        <ellipse cx="54" cy="82" rx="8" ry="4.5" fill="#FF8A8A" opacity=".8" stroke="none"/>
+        <ellipse cx="106" cy="82" rx="8" ry="4.5" fill="#FF8A8A" opacity=".8" stroke="none"/>
+        <path d="M72 80 Q 80 87 88 80" fill="none" stroke-width="2.6"/>
+        <path d="M8 102 C 2 90, 8 78, 18 76 L 20 86 L 26 77 C 36 80, 38 92, 32 100 C 26 107, 12 108, 8 102 Z" fill="#EC624A" stroke-width="3"/>
+        <path d="M152 102 C 158 90, 152 78, 142 76 L 140 86 L 134 77 C 124 80, 122 92, 128 100 C 134 107, 148 108, 152 102 Z" fill="#EC624A" stroke-width="3"/>
+      </g>
+    </symbol>
+
+    <!-- Narrator bust (head + bow tie) for speech bubbles. viewBox 0 0 120 120 -->
+    <symbol id="mascot-bust" viewBox="0 0 120 120">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M50 46 C 44 26, 32 14, 16 10 C 8 8, 4 14, 9 18" fill="none" stroke-width="6.5"/>
+        <path d="M50 46 C 44 26, 32 14, 16 10 C 8 8, 4 14, 9 18" fill="none" stroke="#D9533B" stroke-width="3"/>
+        <path d="M70 46 C 76 26, 88 14, 104 10 C 112 8, 116 14, 111 18" fill="none" stroke-width="6.5"/>
+        <path d="M70 46 C 76 26, 88 14, 104 10 C 112 8, 116 14, 111 18" fill="none" stroke="#D9533B" stroke-width="3"/>
+        <path d="M60 44 C 90 44, 102 66, 102 86 C 102 106, 84 116, 60 116 C 36 116, 18 106, 18 86 C 18 66, 30 44, 60 44 Z" fill="#EC624A" stroke-width="3"/>
+        <ellipse cx="42" cy="64" rx="10" ry="5" transform="rotate(-28 42 64)" fill="#FFFFFF" opacity=".35" stroke="none"/>
+        <path d="M52 50 L 48 34 M 68 50 L 72 34" fill="none" stroke-width="9"/>
+        <path d="M52 50 L 48 34 M 68 50 L 72 34" fill="none" stroke="#EC624A" stroke-width="4.5"/>
+        <circle cx="46" cy="27" r="12" fill="#FFFFFF" stroke-width="2.8"/>
+        <circle cx="74" cy="27" r="12" fill="#FFFFFF" stroke-width="2.8"/>
+        <circle cx="49" cy="29" r="5.5" fill="#1E3450" stroke="none"/>
+        <circle cx="77" cy="29" r="5.5" fill="#1E3450" stroke="none"/>
+        <circle cx="51" cy="26.5" r="1.9" fill="#FFFFFF" stroke="none"/>
+        <circle cx="79" cy="26.5" r="1.9" fill="#FFFFFF" stroke="none"/>
+        <ellipse cx="38" cy="80" rx="7" ry="4" fill="#FF8A8A" opacity=".8" stroke="none"/>
+        <ellipse cx="82" cy="80" rx="7" ry="4" fill="#FF8A8A" opacity=".8" stroke="none"/>
+        <path d="M50 76 Q 60 88 70 76 Q 60 81 50 76 Z" fill="#7A2A1C" stroke-width="2.4"/>
+        <path d="M60 100 L 46 93 Q 42 100 46 107 Z" fill="#7A55C4" stroke-width="2.4"/>
+        <path d="M60 100 L 74 93 Q 78 100 74 107 Z" fill="#7A55C4" stroke-width="2.4"/>
+        <rect x="55" y="95" width="10" height="10" rx="3" fill="#5E3FA3" stroke-width="2.4"/>
+      </g>
+    </symbol>
+
+    <!-- Small UI glyphs -->
+    <symbol id="i-star" viewBox="0 0 24 24"><path d="M12 2.8l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 16.8l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z" fill="currentColor" stroke="#1E3450" stroke-width="1.5" stroke-linejoin="round"/></symbol>
+    <symbol id="i-wrench" viewBox="0 0 24 24"><path d="M14.5 5.5a4 4 0 0 0 4.9 4.9l-9 9a2 2 0 0 1-2.8-2.8l9-9a4 4 0 0 0-4.9-4.9l2.3 2.3-.5 2.2-2.2.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
+    <symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+    <symbol id="i-sort" viewBox="0 0 24 24"><path d="M7 4v16M7 20l-3-3M7 20l3-3M17 20V4M17 4l-3 3M17 4l3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+    <symbol id="i-pause" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></symbol>
+    <symbol id="i-play" viewBox="0 0 24 24"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></symbol>
+    <symbol id="i-image" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="9" cy="10" r="2" fill="currentColor"/><path d="M4 18l5-5 4 4 3-3 4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
+  </defs>
+</svg>
+
+
+<header class="nav" id="top">
+  <div class="nav__inner wrap">
+    <a class="nav__brand" href="#hero" aria-label="OmniStepBench, back to top">
+      <svg class="nav__logo" aria-hidden="true"><use href="#logo"/></svg>
+      <span class="nav__word">Omni<span class="nav__s">Step</span><span>Bench</span></span>
+    </a>
+    <button class="nav__toggle" type="button" aria-expanded="false" aria-controls="nav-menu">
+      <svg aria-hidden="true"><use href="#i-menu"/></svg><span class="sr-only">Menu</span>
+    </button>
+    <nav class="nav__menu" id="nav-menu" aria-label="Sections">
+      <ul class="nav__links">
+        <li><a href="#overview">Overview</a></li>
+        <li><a href="#workloads">Workloads</a></li>
+        <li><a href="#leaderboard">Leaderboard</a></li>
+        <li><a href="#cost">Cost</a></li>
+        <li><a href="#reliability">Reliability</a></li>
+        <li><a href="#quickstart">Quick Start</a></li>
+        <li><a href="#cite">Cite</a></li>
+      </ul>
+      <div class="nav__cta">
+        <a class="btn btn--sm btn--ghost" data-href="meta.arxivUrl" href="https://arxiv.org/abs/2609.06059" rel="noopener"><svg aria-hidden="true"><use href="#i-paper"/></svg>Paper</a>
+        <a class="btn btn--sm btn--navy" data-href="meta.github" href="https://github.com/SeerRay-Lab/OmniStepBench" rel="noopener"><svg aria-hidden="true"><use href="#i-github"/></svg>GitHub</a>
+      </div>
+    </nav>
+  </div>
+  <div class="nav__progress" aria-hidden="true"><span></span></div>
+</header>
+
+<noscript>
+  <p class="noscript">This page draws the benchmark tables and charts with JavaScript. Please enable it, or read the paper directly on <a href="https://arxiv.org/abs/2609.06059">arXiv</a> and the code on <a href="https://github.com/SeerRay-Lab/OmniStepBench">GitHub</a>.</p>
+</noscript>
+
+<main id="main">
+
+<!-- ================= HERO ================= -->
+<section id="hero" class="hero" aria-labelledby="hero-title">
+  <div class="hero__scene" aria-hidden="true">
+    <svg class="hero__sun" viewBox="0 0 120 120"><g class="sun-rays" stroke="#F2B84B" stroke-width="4" stroke-linecap="round"><path d="M60 6v10M60 104v10M6 60h10M104 60h10M22 22l7 7M91 91l7 7M22 98l7-7M91 29l7-7"/></g><circle cx="60" cy="60" r="44" fill="#FFE7B0" opacity=".6"/><circle cx="60" cy="60" r="30" fill="#FFD27A" stroke="#1E3450" stroke-width="2.5"/><path d="M50 60 Q 60 70 70 60" fill="none" stroke="#1E3450" stroke-width="2.5" stroke-linecap="round"/><circle cx="51" cy="53" r="2.6" fill="#1E3450"/><circle cx="69" cy="53" r="2.6" fill="#1E3450"/></svg>
+    <svg class="hero__cloud hero__cloud--a" viewBox="0 0 160 60"><path d="M24 50 C 6 50, 6 28, 24 28 C 26 12, 52 8, 60 22 C 70 6, 104 8, 106 28 C 128 22, 146 34, 136 50 Z" fill="#FFFFFF" stroke="#1E3450" stroke-width="2.5" stroke-linejoin="round"/><path d="M40 40 Q 50 34 60 38" fill="none" stroke="#DDEFF4" stroke-width="3" stroke-linecap="round"/></svg>
+    <svg class="hero__cloud hero__cloud--b" viewBox="0 0 160 60"><path d="M24 50 C 6 50, 6 28, 24 28 C 26 12, 52 8, 60 22 C 70 6, 104 8, 106 28 C 128 22, 146 34, 136 50 Z" fill="#FFFFFF" stroke="#1E3450" stroke-width="2.5" stroke-linejoin="round"/></svg>
+    <svg class="hero__gull" viewBox="0 0 60 24"><path d="M4 16 Q 16 4, 30 14 Q 44 4, 56 16" fill="none" stroke="#1E3450" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    <svg class="hero__surface" viewBox="0 0 1440 48" preserveAspectRatio="none">
+      <path d="M0 22 C 120 6, 240 6, 360 22 S 600 38, 720 22 S 960 6, 1080 22 S 1320 38, 1440 22 L 1440 48 L 0 48 Z" fill="#D9F1F6"/>
+      <path d="M0 22 C 120 6, 240 6, 360 22 S 600 38, 720 22 S 960 6, 1080 22 S 1320 38, 1440 22" fill="none" stroke="#1E3450" stroke-width="2.5" vector-effect="non-scaling-stroke"/>
+      <path d="M0 30 C 120 16, 240 16, 360 30 S 600 44, 720 30 S 960 16, 1080 30 S 1320 44, 1440 30" fill="none" stroke="#FFFFFF" stroke-width="3" opacity=".8" vector-effect="non-scaling-stroke"/>
+    </svg>
+    <svg class="hero__rays" viewBox="0 0 1000 700" preserveAspectRatio="xMidYMin slice">
+      <defs><linearGradient id="ray" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".55"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs>
+      <path d="M180 0 L 250 0 L 120 700 L 20 700 Z" fill="url(#ray)"/>
+      <path d="M390 0 L 420 0 L 360 700 L 300 700 Z" fill="url(#ray)" opacity=".7"/>
+      <path d="M600 0 L 680 0 L 700 700 L 560 700 Z" fill="url(#ray)" opacity=".8"/>
+      <path d="M830 0 L 860 0 L 960 700 L 900 700 Z" fill="url(#ray)" opacity=".6"/>
+    </svg>
+    <svg class="hero__fish hero__fish--a"><use href="#dc-fish"/></svg>
+    <svg class="hero__fish hero__fish--b"><use href="#dc-fish"/></svg>
+    <svg class="hero__fish hero__fish--c"><use href="#dc-fish"/></svg>
+    <div class="bubbles">
+      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+    </div>
+    <svg class="kelp kelp--l" viewBox="0 0 160 420" preserveAspectRatio="xMidYMax meet">
+      <g class="sway sway--a"><path d="M40 420 C 20 360, 60 320, 40 260 C 22 206, 62 170, 44 110 C 34 76, 44 40, 52 20" fill="none" stroke="#1E3450" stroke-width="17" stroke-linecap="round"/><path d="M40 420 C 20 360, 60 320, 40 260 C 22 206, 62 170, 44 110 C 34 76, 44 40, 52 20" fill="none" stroke="#4E9F63" stroke-width="11" stroke-linecap="round"/><path d="M42 300 C 64 290, 76 272, 74 252 M 40 196 C 18 186, 8 168, 12 148 M 46 132 C 66 122, 74 104, 72 88" fill="none" stroke="#1E3450" stroke-width="11" stroke-linecap="round"/><path d="M42 300 C 64 290, 76 272, 74 252 M 40 196 C 18 186, 8 168, 12 148 M 46 132 C 66 122, 74 104, 72 88" fill="none" stroke="#6BBF7A" stroke-width="5.5" stroke-linecap="round"/></g>
+      <g class="sway sway--b"><path d="M100 420 C 84 380, 118 350, 100 300 C 86 262, 116 236, 104 196" fill="none" stroke="#1E3450" stroke-width="15" stroke-linecap="round"/><path d="M100 420 C 84 380, 118 350, 100 300 C 86 262, 116 236, 104 196" fill="none" stroke="#3E8C55" stroke-width="9" stroke-linecap="round"/><path d="M102 330 C 124 322, 136 306, 134 288" fill="none" stroke="#1E3450" stroke-width="10" stroke-linecap="round"/><path d="M102 330 C 124 322, 136 306, 134 288" fill="none" stroke="#6BBF7A" stroke-width="5" stroke-linecap="round"/></g>
+    </svg>
+    <svg class="kelp kelp--r" viewBox="0 0 160 420" preserveAspectRatio="xMidYMax meet">
+      <g class="sway sway--b"><path d="M110 420 C 130 360, 92 320, 112 260 C 128 212, 96 176, 112 124 C 120 96, 112 60, 104 40" fill="none" stroke="#1E3450" stroke-width="17" stroke-linecap="round"/><path d="M110 420 C 130 360, 92 320, 112 260 C 128 212, 96 176, 112 124 C 120 96, 112 60, 104 40" fill="none" stroke="#4E9F63" stroke-width="11" stroke-linecap="round"/><path d="M110 290 C 88 282, 76 264, 78 244 M 114 200 C 136 190, 146 172, 142 152" fill="none" stroke="#1E3450" stroke-width="11" stroke-linecap="round"/><path d="M110 290 C 88 282, 76 264, 78 244 M 114 200 C 136 190, 146 172, 142 152" fill="none" stroke="#6BBF7A" stroke-width="5.5" stroke-linecap="round"/></g>
+      <g class="sway sway--a"><path d="M52 420 C 66 384, 36 356, 52 316 C 64 284, 44 262, 52 236" fill="none" stroke="#1E3450" stroke-width="15" stroke-linecap="round"/><path d="M52 420 C 66 384, 36 356, 52 316 C 64 284, 44 262, 52 236" fill="none" stroke="#3E8C55" stroke-width="9" stroke-linecap="round"/></g>
+    </svg>
+    <svg class="coral" viewBox="0 0 200 170">
+      <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M100 168 L 100 110 C 100 90, 84 80, 72 60 M 100 124 C 110 104, 130 96, 138 70 M 84 84 C 72 80, 62 70, 58 52 M 128 88 C 142 84, 152 74, 156 58 M 100 110 C 100 90, 104 72, 102 46" fill="none" stroke-width="20"/>
+        <path d="M100 168 L 100 110 C 100 90, 84 80, 72 60 M 100 124 C 110 104, 130 96, 138 70 M 84 84 C 72 80, 62 70, 58 52 M 128 88 C 142 84, 152 74, 156 58 M 100 110 C 100 90, 104 72, 102 46" fill="none" stroke="#F4A08C" stroke-width="14"/>
+        <circle cx="72" cy="60" r="3" fill="#FFFFFF" stroke="none" opacity=".7"/><circle cx="138" cy="70" r="3" fill="#FFFFFF" stroke="none" opacity=".7"/>
+        <path d="M30 168 C 26 140, 50 124, 76 130 C 96 118, 128 124, 132 146 C 150 142, 170 154, 170 168 Z" fill="#9AA8B8" stroke-width="3"/>
+        <path d="M50 146 Q 60 140 70 146 M 110 140 Q 118 136 124 140" fill="none" stroke-width="2.4" opacity=".4"/>
+      </g>
+    </svg>
+    <svg class="hero__sand" viewBox="0 0 1440 140" preserveAspectRatio="none">
+      <path d="M0 52 C 180 20, 360 30, 540 48 S 900 70, 1080 44 S 1340 24, 1440 40 L 1440 140 L 0 140 Z" fill="#F3DCA8"/>
+      <path d="M0 52 C 180 20, 360 30, 540 48 S 900 70, 1080 44 S 1340 24, 1440 40" fill="none" stroke="#1E3450" stroke-width="2.5" vector-effect="non-scaling-stroke"/>
+      <path d="M0 76 C 200 60, 420 68, 640 82 S 1040 92, 1440 70 L 1440 140 L 0 140 Z" fill="#EFD198" opacity=".7"/>
+    </svg>
+    <svg class="hero__decor hero__decor--star"><use href="#dc-star"/></svg>
+    <svg class="hero__decor hero__decor--shell"><use href="#dc-shell"/></svg>
+  </div>
+
+  <div class="wrap hero__grid">
+    <div class="hero__copy">
+      <div class="hero__meta">
+        <span class="pill pill--glass" id="hero-arxiv"></span>
+        <button class="motion-toggle" type="button" id="motion-toggle" aria-pressed="false"><svg class="i-pause" aria-hidden="true"><use href="#i-pause"/></svg><svg class="i-play" aria-hidden="true"><use href="#i-play"/></svg><span>Pause animations</span></button>
+      </div>
+      <h1 id="hero-title" class="wordmark" aria-label="OmniStepBench"><span class="wordmark__a" aria-hidden="true">Omni</span><span class="wordmark__s" aria-hidden="true">Step</span><wbr><span class="wordmark__b" aria-hidden="true">Bench</span></h1>
+      <p class="hero__expansion" data-bind="meta.expansion">Deployment-Aware Agent Evaluation across Modalities and Task Complexity</p>
+      <p class="hero__tagline" data-bind="meta.taglines.2">No model dominates all six workload groups.</p>
+      <ul class="authors" id="authors" aria-label="Authors"><li>Yu Liu,</li><li>Zhilin Liu,</li><li>Zhiwei Yang,</li><li>Shaojie Zhang,</li><li>Zheyuan Deng,</li><li>Tingwei Huang,</li><li>Zhenbo Luo,</li><li>Lei Jiang,</li><li>Yanbing Liu,</li><li>Pei Fu</li></ul>
+      <ol class="affils" id="affils" aria-label="Affiliations"><li>Institute of Information Engineering, Chinese Academy of Sciences</li><li>School of Cyber Security, University of Chinese Academy of Sciences</li><li>MiLM Plus, Xiaomi Inc.</li><li>Department of Computer Science, Brown University</li></ol>
+      <p class="author-notes" id="author-notes"></p>
+      <div class="hero__btns">
+        <span class="btn-pair">
+          <a class="btn btn--navy" data-href="meta.arxivUrl" href="https://arxiv.org/abs/2609.06059" rel="noopener"><svg aria-hidden="true"><use href="#i-paper"/></svg>arXiv</a>
+          <a class="btn btn--ghost" data-href="meta.pdfUrl" href="https://arxiv.org/pdf/2609.06059" rel="noopener"><svg aria-hidden="true"><use href="#i-pdf"/></svg>PDF</a>
+        </span>
+        <span class="btn-pair">
+          <a class="btn btn--ghost" data-href="meta.github" href="https://github.com/SeerRay-Lab/OmniStepBench" rel="noopener"><svg aria-hidden="true"><use href="#i-github"/></svg>Code</a>
+          <a class="btn btn--ghost" data-href="meta.hfDataset" href="https://huggingface.co/datasets/SeerRay-Lab/OmniStepBench" rel="noopener" title="OmniStepBench on Hugging Face"><svg aria-hidden="true"><use href="#i-data"/></svg>HF Dataset</a>
+        </span>
+        <span class="btn-pair">
+          <a class="btn btn--coral" href="#leaderboard"><svg aria-hidden="true"><use href="#i-trophy"/></svg>Leaderboard</a>
+          <a class="btn btn--ghost" href="#cite"><svg aria-hidden="true"><use href="#i-quote"/></svg>BibTeX</a>
+        </span>
+      </div>
+    </div>
+    <div class="hero__mascot">
+      <p class="hero__bubble" aria-hidden="true">checking the evidence&hellip;</p>
+      <svg viewBox="0 0 440 580" class="mascot-svg" role="img" aria-labelledby="mascot-title">
+  <title id="mascot-title">Cartoon lobster evaluator holding a magnifying glass and a clipboard</title>
+  <defs>
+    <radialGradient id="lob-body" cx="38%" cy="32%" r="75%">
+      <stop offset="0" stop-color="#F7876F"/>
+      <stop offset="0.55" stop-color="#EC624A"/>
+      <stop offset="1" stop-color="#D84B33"/>
+    </radialGradient>
+    <linearGradient id="lens-glass" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#F4FCFE"/>
+      <stop offset="1" stop-color="#BFE9F3"/>
+    </linearGradient>
+  </defs>
+  <!-- rock the lobster stands on (its base hides behind the stat tiles) -->
+  <g stroke="#1E3450" stroke-linejoin="round" stroke-linecap="round">
+    <path d="M40 580 C 34 520, 70 468, 150 458 C 200 450, 262 450, 310 460 C 380 474, 414 520, 408 580 Z" fill="#A9B7C6" stroke-width="3.5"/>
+    <path d="M70 520 C 110 490, 170 482, 226 484 M 300 490 C 330 496, 360 512, 372 530" fill="none" stroke="#FFFFFF" stroke-width="5" opacity=".45"/>
+    <path d="M120 540 Q 140 530 160 540 M 250 530 Q 268 520 288 530 M 330 556 Q 346 548 362 556" fill="none" stroke-width="2.5" opacity=".35"/>
+    <circle cx="96" cy="552" r="5" fill="#8C9BAC" stroke="none"/><circle cx="210" cy="560" r="4" fill="#8C9BAC" stroke="none"/>
+    <path d="M384 500 C 380 480, 392 466, 396 452 M 392 502 C 398 486, 410 478, 418 468" fill="none" stroke="#4E9F63" stroke-width="5"/>
+  </g>
+  <!-- ground shadow -->
+  <ellipse cx="222" cy="462" rx="120" ry="12" fill="#1E3450" opacity=".16"/>
+  <g class="mascot-bob">
+  <g stroke="#1E3450" stroke-linecap="round" stroke-linejoin="round">
+    <!-- antennae: outline + fill strokes -->
+    <path d="M200 150 C 186 96, 160 58, 118 42 C 96 34, 84 50, 96 60" fill="none" stroke-width="9"/>
+    <path d="M200 150 C 186 96, 160 58, 118 42 C 96 34, 84 50, 96 60" fill="none" stroke="#D9533B" stroke-width="4.5"/>
+    <path d="M240 150 C 254 96, 282 58, 324 42 C 346 34, 358 50, 346 60" fill="none" stroke-width="9"/>
+    <path d="M240 150 C 254 96, 282 58, 324 42 C 346 34, 358 50, 346 60" fill="none" stroke="#D9533B" stroke-width="4.5"/>
+    <!-- small antennules -->
+    <path d="M208 150 C 202 128, 196 118, 186 112" fill="none" stroke-width="6"/>
+    <path d="M208 150 C 202 128, 196 118, 186 112" fill="none" stroke="#F58A72" stroke-width="2.5"/>
+    <path d="M232 150 C 238 128, 244 118, 254 112" fill="none" stroke-width="6"/>
+    <path d="M232 150 C 238 128, 244 118, 254 112" fill="none" stroke="#F58A72" stroke-width="2.5"/>
+
+    <!-- tail fan -->
+    <path d="M186 404 L 254 404 L 284 446 Q 270 462 254 450 Q 242 468 228 454 Q 220 470 212 454 Q 198 468 186 450 Q 170 462 156 446 Z" fill="#E4583F" stroke-width="3.5"/>
+    <path d="M212 408 L 212 452 M 228 408 L 232 450 M 196 408 L 190 448 M 242 408 L 256 446 M 182 410 L 168 442" fill="none" stroke-width="2" opacity=".45"/>
+    <!-- abdomen segments (bottom first) -->
+    <rect x="178" y="384" width="84" height="30" rx="15" fill="#E65B42" stroke-width="3.5"/>
+    <rect x="168" y="360" width="104" height="32" rx="16" fill="#EA6149" stroke-width="3.5"/>
+    <rect x="158" y="334" width="124" height="34" rx="17" fill="#EC654D" stroke-width="3.5"/>
+
+    <!-- walking legs (behind body) -->
+    <g fill="none">
+      <path d="M156 292 L 118 306 L 108 334" stroke-width="10"/>
+      <path d="M156 292 L 118 306 L 108 334" stroke="#E4583F" stroke-width="5"/>
+      <path d="M160 312 L 126 332 L 120 356" stroke-width="10"/>
+      <path d="M160 312 L 126 332 L 120 356" stroke="#E4583F" stroke-width="5"/>
+      <path d="M284 292 L 322 306 L 332 334" stroke-width="10"/>
+      <path d="M284 292 L 322 306 L 332 334" stroke="#E4583F" stroke-width="5"/>
+      <path d="M280 312 L 314 332 L 320 356" stroke-width="10"/>
+      <path d="M280 312 L 314 332 L 320 356" stroke="#E4583F" stroke-width="5"/>
+    </g>
+
+    <!-- arms -->
+    <g fill="none">
+      <path d="M160 246 C 132 238, 112 222, 100 196" stroke-width="24"/>
+      <path d="M160 246 C 132 238, 112 222, 100 196" stroke="#E95E46" stroke-width="17"/>
+      <path d="M280 246 C 306 244, 322 236, 334 222" stroke-width="24"/>
+      <path d="M280 246 C 306 244, 322 236, 334 222" stroke="#E95E46" stroke-width="17"/>
+    </g>
+
+    <!-- carapace -->
+    <path d="M220 140 C 278 140, 312 188, 312 246 C 312 304, 272 342, 220 342 C 168 342, 128 304, 128 246 C 128 188, 162 140, 220 140 Z" fill="url(#lob-body)" stroke-width="3.5"/>
+    <!-- belly plate -->
+    <path d="M160 300 Q 220 326 280 300" fill="none" stroke-width="2.5" opacity=".3"/>
+    <path d="M176 318 Q 220 336 264 318" fill="none" stroke-width="2.5" opacity=".22"/>
+    <!-- highlight -->
+    <ellipse cx="180" cy="184" rx="26" ry="13" transform="rotate(-28 180 184)" fill="#FFFFFF" opacity=".35" stroke="none"/>
+    <!-- spots -->
+    <circle cx="276" cy="210" r="5" fill="#D84B33" stroke="none" opacity=".7"/>
+    <circle cx="288" cy="232" r="3.5" fill="#D84B33" stroke="none" opacity=".7"/>
+    <circle cx="160" cy="232" r="4" fill="#D84B33" stroke="none" opacity=".6"/>
+
+    <!-- eye stalks -->
+    <path d="M200 160 L 190 122" fill="none" stroke-width="15"/>
+    <path d="M200 160 L 190 122" fill="none" stroke="#EC624A" stroke-width="9"/>
+    <path d="M240 160 L 250 122" fill="none" stroke-width="15"/>
+    <path d="M240 160 L 250 122" fill="none" stroke="#EC624A" stroke-width="9"/>
+    <!-- eyes -->
+    <circle cx="186" cy="102" r="27" fill="#FFFFFF" stroke-width="3.5"/>
+    <circle cx="254" cy="102" r="27" fill="#FFFFFF" stroke-width="3.5"/>
+    <g class="mascot-pupils" stroke="none">
+      <circle cx="193" cy="108" r="12.5" fill="#1E3450"/>
+      <circle cx="261" cy="108" r="12.5" fill="#1E3450"/>
+      <circle cx="198" cy="102" r="4.5" fill="#FFFFFF"/>
+      <circle cx="266" cy="102" r="4.5" fill="#FFFFFF"/>
+      <circle cx="189" cy="113" r="2" fill="#FFFFFF"/>
+      <circle cx="257" cy="113" r="2" fill="#FFFFFF"/>
+    </g>
+    <!-- brows -->
+    <path d="M168 68 Q 184 60, 200 66" fill="none" stroke-width="3.5"/>
+    <path d="M240 66 Q 256 60, 272 68" fill="none" stroke-width="3.5"/>
+
+    <!-- face -->
+    <ellipse cx="176" cy="226" rx="14" ry="8" fill="#FF8A8A" opacity=".75" stroke="none"/>
+    <ellipse cx="264" cy="226" rx="14" ry="8" fill="#FF8A8A" opacity=".75" stroke="none"/>
+    <path d="M200 218 Q 220 244 240 218 Q 220 228 200 218 Z" fill="#7A2A1C" stroke-width="3"/>
+    <path d="M211 232 Q 220 238 229 232 Q 220 229 211 232 Z" fill="#FF8A8A" stroke="none"/>
+
+    <!-- bow tie -->
+    <path d="M220 266 L 196 254 Q 190 266 196 278 Z" fill="#7A55C4" stroke-width="3"/>
+    <path d="M220 266 L 244 254 Q 250 266 244 278 Z" fill="#7A55C4" stroke-width="3"/>
+    <rect x="212" y="258" width="16" height="16" rx="5" fill="#5E3FA3" stroke-width="3"/>
+
+    <!-- magnifying glass (left claw) -->
+    <path d="M92 170 L 66 124" fill="none" stroke-width="15"/>
+    <path d="M92 170 L 66 124" fill="none" stroke="#8B5A2B" stroke-width="9"/>
+    <circle cx="52" cy="96" r="34" fill="#F2B84B" stroke-width="3.5"/>
+    <circle cx="52" cy="96" r="25" fill="url(#lens-glass)" stroke-width="3"/>
+    <path d="M36 86 Q 40 74, 52 72" fill="none" stroke="#FFFFFF" stroke-width="5" opacity=".95"/>
+    <!-- left claw -->
+    <path d="M70 196 C 62 172, 70 150, 88 144 L 94 168 L 104 146 C 124 150, 132 176, 122 198 C 112 218, 80 218, 70 196 Z" fill="#EC624A" stroke-width="3.5"/>
+    <path d="M84 206 Q 96 212 110 206" fill="none" stroke-width="2.5" opacity=".4"/>
+    <circle cx="80" cy="180" r="3" fill="#D84B33" stroke="none"/>
+
+    <!-- clipboard (right claw) -->
+    <g transform="rotate(9 370 214)">
+      <rect x="322" y="150" width="96" height="124" rx="11" fill="#D9964F" stroke-width="3.5"/>
+      <rect x="331" y="166" width="78" height="100" rx="5" fill="#FFFFFF" stroke-width="2.5"/>
+      <rect x="352" y="140" width="36" height="20" rx="6" fill="#9AA8B8" stroke-width="3"/>
+      <!-- rows -->
+      <rect x="339" y="180" width="13" height="13" rx="3" fill="#FFFFFF" stroke-width="2.2"/>
+      <path d="M341 186 L 345 190 L 352 180" fill="none" stroke="#2E8B57" stroke-width="3.2"/>
+      <path d="M358 187 L 399 187" fill="none" stroke-width="2.4" opacity=".55"/>
+      <rect x="339" y="204" width="13" height="13" rx="3" fill="#FFFFFF" stroke-width="2.2"/>
+      <path d="M341 210 L 345 214 L 352 204" fill="none" stroke="#2E8B57" stroke-width="3.2"/>
+      <path d="M358 211 L 392 211" fill="none" stroke-width="2.4" opacity=".55"/>
+      <rect x="339" y="228" width="13" height="13" rx="3" fill="#FFFFFF" stroke-width="2.2"/>
+      <path d="M341 230 L 350 239 M 350 230 L 341 239" fill="none" stroke="#E0533D" stroke-width="3"/>
+      <path d="M358 235 L 396 235" fill="none" stroke-width="2.4" opacity=".55"/>
+      <path d="M339 254 L 380 254" fill="none" stroke-width="2.4" opacity=".3"/>
+    </g>
+    <!-- right claw gripping the clipboard edge -->
+    <path d="M318 246 C 306 226, 312 204, 330 198 L 338 220 L 348 202 C 368 208, 372 234, 360 250 C 348 266, 326 264, 318 246 Z" fill="#EC624A" stroke-width="3.5"/>
+    <path d="M330 256 Q 342 262 354 256" fill="none" stroke-width="2.5" opacity=".4"/>
+  </g>
+  </g>
+</svg>
+
+    </div>
+  </div>
+  <div class="wrap hero__stats-wrap">
+    <ul class="stat-tiles" id="stat-tiles" aria-label="OmniStepBench at a glance"></ul>
+  </div>
+</section>
+
+<!-- ================= WHY ================= -->
+<section id="why" class="sec sec--sand" aria-labelledby="why-title">
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Motivation</p>
+        <h2 id="why-title">What deployment-oriented agent evaluation must <span class="squiggle">answer</span></h2>
+        <p class="lead" id="why-lead"></p>
+      </div>
+    </div>
+    <ol class="why-grid" id="why-grid"></ol>
+    <div class="tldr card card--blob">
+      <div class="tldr__head">
+        <p class="tldr__label">TL;DR</p>
+      </div>
+      <ul class="tldr__list" id="tldr-list"></ul>
+      <details class="abstract">
+        <summary><span>Read the abstract</span></summary>
+        <p id="abstract-text"></p>
+      </details>
+    </div>
+  </div>
+</section>
+
+<!-- ================= OVERVIEW ================= -->
+<section id="overview" class="sec sec--sea" aria-labelledby="overview-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 40 C 200 10, 380 10, 560 32 S 940 60, 1120 30 S 1360 14, 1440 26 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 44 C 240 24, 420 60, 700 40 S 1100 16, 1440 44 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Overview</p>
+        <h2 id="overview-title">From source benchmarks to deployment <span class="squiggle">reports</span></h2>
+        <p class="lead" id="overview-lead"></p>
+      </div>
+      <svg class="sec-head__art" aria-hidden="true"><use href="#cr-octopus"/></svg>
+    </div>
+    <figure class="figure-frame card card--blob">
+      <button class="zoomable" type="button" id="overview-zoom" aria-label="Enlarge Figure 2: overview of OmniStepBench">
+        <img id="overview-img" alt="" width="2157" height="944" decoding="async">
+        <span class="zoomable__hint"><svg aria-hidden="true"><use href="#i-zoom"/></svg><span class="lg-only">Click to enlarge</span><span class="sm-only">Tap to enlarge and pan</span></span>
+      </button>
+      <figcaption id="overview-cap"></figcaption>
+    </figure>
+    <ol class="stages" id="stages"></ol>
+  </div>
+</section>
+
+<!-- ================= WORKLOADS ================= -->
+<section id="workloads" class="sec sec--sand" aria-labelledby="workloads-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 30 C 220 56, 420 56, 640 34 S 1040 8, 1240 30 S 1400 44, 1440 36 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 42 C 260 60, 520 20, 780 38 S 1200 58, 1440 38 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Workload matrix</p>
+        <h2 id="workloads-title">Tasks organized by what the agent has to <span class="squiggle">do</span></h2>
+        <p class="lead">Instead of reporting by source benchmark, OmniStepBench groups tasks along two workload dimensions: input modality (text or multimodal) and execution form (single-step, multi-step, or multi-step with tools). Each source benchmark maps to exactly one group. Select a cell to see its sources, scoring modes, an example prompt and the strongest models.</p>
+      </div>
+      <svg class="sec-head__art" aria-hidden="true"><use href="#ic-grid"/></svg>
+    </div>
+
+    <div class="matrix-layout">
+      <div class="matrix card card--blob" id="matrix" role="group" aria-label="Workload matrix"></div>
+      <div class="cell-detail card card--blob" id="cell-detail" aria-live="polite"></div>
+    </div>
+
+    <div class="sources card card--blob" id="sources-block">
+      <div class="card-head">
+        <div>
+          <h3 id="sources-title">Source benchmarks</h3>
+          <p class="card-sub" id="sources-sub"></p>
+        </div>
+        <div class="card-head__btns" id="sources-btns">
+          <button class="btn btn--sm btn--ghost view-toggle" type="button" data-target="sources"><svg aria-hidden="true"><use href="#i-table"/></svg><span>View as table</span></button>
+        </div>
+      </div>
+      <div class="view view--chart" id="sources-chart">
+        <div class="legend" id="sources-legend"></div>
+        <div class="compbar" id="compbar" aria-hidden="true"></div>
+        <div class="chipwall" id="chipwall"></div>
+        <div class="source-info" id="source-info" aria-live="polite"></div>
+      </div>
+      <div class="view view--table" id="sources-table" hidden></div>
+    </div>
+
+    <details class="explorer card card--blob" id="explorer">
+      <summary>
+        <span class="explorer__title">Browse every task file</span>
+        <span class="explorer__sub" id="explorer-sub"></span>
+      </summary>
+      <div class="explorer__body">
+        <div class="filters" role="group" aria-label="Task filters">
+          <label>Group <select id="f-group"></select></label>
+          <label>Source <select id="f-source"></select></label>
+          <label>Scoring <select id="f-scoring"></select></label>
+          <label class="filters__search">Search id or name <input id="f-q" type="search" autocomplete="off" spellcheck="false"></label>
+        </div>
+        <p class="explorer__count" id="explorer-count" aria-live="polite"></p>
+        <div class="table-scroll table-scroll--tall" tabindex="0" role="region" aria-label="Task metadata table">
+          <table class="data-table" id="task-table"></table>
+        </div>
+        <p class="note">Metadata only (from the task files' frontmatter). Group and scoring follow the paper's source mapping; prompts, answers and rubrics are not shown.</p>
+      </div>
+    </details>
+  </div>
+</section>
+
+<!-- ================= LEADERBOARD ================= -->
+<section id="leaderboard" class="sec sec--sea" aria-labelledby="leaderboard-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 40 C 200 10, 380 10, 560 32 S 940 60, 1120 30 S 1360 14, 1440 26 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 44 C 240 24, 420 60, 700 40 S 1100 16, 1440 44 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Leaderboard</p>
+        <h2 id="leaderboard-title">No model <span class="squiggle">dominates</span> all six workload groups</h2>
+        <p class="lead" id="lb-lead"></p>
+      </div>
+    </div>
+
+    <div class="lb card card--blob has-peek">
+      <svg class="peek" aria-hidden="true"><use href="#mascot-peek"/></svg>
+      <div class="lb__top">
+        <div class="lb__top-left">
+          <div class="controls" role="group" aria-label="Leaderboard controls">
+            <div class="seg" role="radiogroup" aria-label="Track" id="lb-track"></div>
+            <div class="seg" role="radiogroup" aria-label="Deployment" id="lb-deploy"></div>
+            <div class="seg" role="radiogroup" aria-label="Cell style" id="lb-style"></div>
+          </div>
+          <p class="lb__note" id="lb-note"></p>
+          <div class="lb__legend" id="lb-legend"></div>
+        </div>
+        <p class="narrator-bubble" id="lb-bubble"></p>
+      </div>
+      <p class="lb__swipe" aria-hidden="true">swipe the table sideways &rarr;</p>
+      <div class="table-scroll" tabindex="0" role="region" aria-labelledby="lb-caption">
+        <table class="lb-table" id="lb-table"></table>
+      </div>
+      <div class="lb__foot" id="lb-foot"></div>
+    </div>
+  </div>
+</section>
+
+<!-- ================= COST ================= -->
+<section id="cost" class="sec sec--sand" aria-labelledby="cost-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 30 C 220 56, 420 56, 640 34 S 1040 8, 1240 30 S 1400 44, 1440 36 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 42 C 260 60, 520 20, 780 38 S 1200 58, 1440 38 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Accuracy &amp; cost</p>
+        <h2 id="cost-title">Text and multimodal workloads have different <span class="squiggle">frontiers</span></h2>
+        <p class="lead" id="cost-lead"></p>
+      </div>
+      <svg class="sec-head__art" aria-hidden="true"><use href="#ic-chest"/></svg>
+    </div>
+
+    <div class="controls controls--bar" role="group" aria-label="Cost view controls">
+      <div class="seg" role="radiogroup" aria-label="Modality" id="cost-mode"></div>
+      <p class="controls__hint">Scopes every chart and note in this section.</p>
+    </div>
+
+    <div class="cost-grid">
+      <figure class="chart-card card card--blob" id="scatter-card">
+        <div class="card-head">
+          <div>
+            <h3 id="scatter-title"></h3>
+            <p class="card-sub" id="scatter-sub"></p>
+          </div>
+          <div class="card-head__btns">
+            <button class="btn btn--sm btn--ghost" type="button" id="fig1-btn"><svg aria-hidden="true"><use href="#i-image"/></svg><span id="fig1-btn-lab">Paper's figure</span></button>
+            <button class="btn btn--sm btn--ghost view-toggle" type="button" data-target="scatter"><svg aria-hidden="true"><use href="#i-table"/></svg><span>View as table</span></button>
+          </div>
+        </div>
+        <div class="view view--chart" id="scatter-chart">
+          <div class="legend" id="scatter-legend"></div>
+          <div class="chart-box" id="scatter-box"></div>
+        </div>
+        <div class="view view--table" id="scatter-table" hidden></div>
+        <figcaption class="note" id="scatter-cap"></figcaption>
+      </figure>
+      <aside class="cost-notes" id="cost-notes" aria-label="Frontier notes"></aside>
+    </div>
+
+    <figure class="chart-card card card--blob" id="tokens-card">
+      <div class="card-head">
+        <div>
+          <h3 id="tokens-title">Tokens and dollars rank models differently</h3>
+          <p class="card-sub" id="tokens-sub"></p>
+        </div>
+        <div class="card-head__btns">
+          <div class="seg seg--sm" role="radiogroup" aria-label="Sort rows" id="tokens-sort"></div>
+          <button class="btn btn--sm btn--ghost view-toggle" type="button" data-target="tokens"><svg aria-hidden="true"><use href="#i-table"/></svg><span>View as table</span></button>
+        </div>
+      </div>
+      <div class="view view--chart" id="tokens-chart">
+        <div class="chart-box" id="tokens-box"></div>
+      </div>
+      <div class="view view--table" id="tokens-table" hidden></div>
+      <figcaption class="tokens-cap" id="tokens-cap"></figcaption>
+    </figure>
+  </div>
+</section>
+
+<!-- ================= RELIABILITY ================= -->
+<section id="reliability" class="sec sec--sea" aria-labelledby="reliability-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 40 C 200 10, 380 10, 560 32 S 940 60, 1120 30 S 1360 14, 1440 26 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 44 C 240 24, 420 60, 700 40 S 1100 16, 1440 44 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Evidence-based audit</p>
+        <h2 id="reliability-title">Removing credit the <span class="squiggle">evidence</span> does not support</h2>
+        <p class="lead" id="rel-lead"></p>
+      </div>
+      <svg class="sec-head__art" aria-hidden="true"><use href="#ic-shield"/></svg>
+    </div>
+
+    <div class="audit-grid">
+      <div class="funnel card card--blob has-peek">
+        <svg class="peek peek--left" aria-hidden="true"><use href="#mascot-peek"/></svg>
+        <h3>The audit funnel</h3>
+        <ol class="audit-steps" id="funnel"></ol>
+        <div class="funnel__rule" id="audit-rule"></div>
+      </div>
+      <div class="judges card card--blob">
+        <h3>Two judges, two model families</h3>
+        <div class="judges__chain" id="judge-chain"></div>
+        <div class="mae" id="mae"></div>
+      </div>
+    </div>
+
+    <div class="patterns card card--blob">
+      <div class="card-head">
+        <div>
+          <h3>Hallucination patterns caught by the audit</h3>
+          <p class="card-sub" id="patterns-sub"></p>
+        </div>
+        <button class="btn btn--sm btn--ghost view-toggle" type="button" data-target="patterns"><svg aria-hidden="true"><use href="#i-table"/></svg><span>View as table</span></button>
+      </div>
+      <div class="view view--chart" id="patterns-chart">
+        <div class="legend" id="patterns-legend"></div>
+        <ul class="pattern-grid" id="pattern-grid"></ul>
+      </div>
+      <div class="view view--table" id="patterns-table" hidden></div>
+    </div>
+
+    <div class="audit-figs" id="audit-figs"></div>
+  </div>
+</section>
+
+<!-- ================= FINDINGS ================= -->
+<section id="findings" class="sec sec--sand" aria-labelledby="findings-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 30 C 220 56, 420 56, 640 34 S 1040 8, 1240 30 S 1400 44, 1440 36 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 42 C 260 60, 520 20, 780 38 S 1200 58, 1440 38 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Key findings</p>
+        <h2 id="findings-title">What the results say about <span class="squiggle">choosing</span> an agent model</h2>
+        <p class="lead" data-bind="meta.taglines.3">Deployment decisions should rest on workload profiles, deployment mode, and accuracy–cost trade-offs rather than a single aggregate score.</p>
+      </div>
+      <svg class="sec-head__art" aria-hidden="true"><use href="#ic-scale"/></svg>
+    </div>
+    <div class="findings-grid" id="findings-grid"></div>
+
+    <div class="taxonomy card card--blob" id="taxonomy">
+      <div class="card-head">
+        <div>
+          <h3>Where agents fail</h3>
+          <p class="card-sub" id="tax-sub"></p>
+        </div>
+        <button class="btn btn--sm btn--ghost view-toggle" type="button" data-target="tax"><svg aria-hidden="true"><use href="#i-table"/></svg><span>View as table</span></button>
+      </div>
+      <div class="view view--chart" id="tax-chart">
+        <div class="legend" id="tax-legend"></div>
+        <div class="chart-box" id="tax-box"></div>
+      </div>
+      <div class="view view--table" id="tax-table" hidden></div>
+    </div>
+
+    <figure class="case card card--blob" id="case-study"></figure>
+  </div>
+</section>
+
+<!-- ================= QUICK START ================= -->
+<section id="quickstart" class="sec sec--sea" aria-labelledby="quickstart-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 40 C 200 10, 380 10, 560 32 S 940 60, 1120 30 S 1360 14, 1440 26 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 44 C 240 24, 420 60, 700 40 S 1100 16, 1440 44 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap">
+    <div class="sec-head">
+      <div class="sec-head__text">
+        <p class="kicker">Quick start</p>
+        <h2 id="quickstart-title">Evaluate your <span class="squiggle">own</span> model</h2>
+        <p class="lead">The commands below are taken verbatim from the repository README. The repository holds the task files, graders and run scripts; by default, runs go through an OpenClaw agent runtime, as in the paper.</p>
+      </div>
+      <svg class="sec-head__art" aria-hidden="true"><use href="#ic-terminal"/></svg>
+    </div>
+    <div class="card card--blob reqs reqs--strip">
+      <h3>Requirements</h3>
+      <ul id="qs-reqs"></ul>
+    </div>
+    <div class="qs-grid">
+      <ol class="steps" id="qs-steps"></ol>
+      <aside class="qs-side">
+        <div class="card card--blob tools-card">
+          <h3>What every model gets in the paper</h3>
+          <p class="card-sub" id="qs-tools-lead"></p>
+          <div id="qs-tools"></div>
+        </div>
+        <details class="card card--blob flags" id="qs-flags-box" open>
+          <summary><h3>Command-line flags</h3></summary>
+          <dl class="flaglist" id="qs-flags"></dl>
+        </details>
+      </aside>
+    </div>
+
+    <div class="anatomy card card--blob">
+      <div class="card-head">
+        <div>
+          <h3>Anatomy of a task file</h3>
+          <p class="card-sub" id="anat-sub"></p>
+        </div>
+      </div>
+      <p class="anatomy__eq" id="anat-eq"></p>
+      <div class="anatomy__grid">
+        <ul class="tuple" id="anat-tuple" aria-label="Task tuple components"></ul>
+        <div class="codefile">
+          <div class="codefile__bar"><span class="codefile__dots" aria-hidden="true"><i></i><i></i><i></i></span><span id="anat-file"></span></div>
+          <pre class="codefile__body" id="anat-code" tabindex="0" aria-label="Task file contents"></pre>
+        </div>
+      </div>
+      <p class="anat-cap" id="anat-cap"></p>
+    </div>
+  </div>
+</section>
+
+<!-- ================= CITE ================= -->
+<section id="cite" class="sec sec--sand" aria-labelledby="cite-title">
+  <svg class="wave" viewBox="0 0 1440 64" preserveAspectRatio="none" aria-hidden="true"><path class="wave__back" d="M0 30 C 220 56, 420 56, 640 34 S 1040 8, 1240 30 S 1400 44, 1440 36 L 1440 64 L 0 64 Z"/><path class="wave__front" d="M0 42 C 260 60, 520 20, 780 38 S 1200 58, 1440 38 L 1440 64 L 0 64 Z"/></svg>
+  <div class="wrap cite-wrap">
+    <div class="cite__art" aria-hidden="true">
+      <p class="cite__bubble">thanks for diving in!</p>
+      <svg><use href="#mascot-bust"/></svg>
+    </div>
+    <div class="cite__body">
+      <p class="kicker">Cite</p>
+      <h2 id="cite-title">If OmniStepBench helps your <span class="squiggle">work</span></h2>
+      <p class="lead">Please cite the paper:</p>
+      <div class="codeblock">
+        <button class="copy-btn" type="button" data-copy-target="bibtex" aria-label="Copy BibTeX"><svg aria-hidden="true"><use href="#i-copy"/></svg><span>Copy</span></button>
+        <pre id="bibtex" tabindex="0" aria-label="BibTeX entry"></pre>
+      </div>
+    </div>
+  </div>
+</section>
+
+</main>
+
+<footer id="footer" class="footer">
+  <svg class="footer__wave" viewBox="0 0 1440 90" preserveAspectRatio="none" aria-hidden="true"><path d="M0 50 C 180 20, 360 30, 540 48 S 900 70, 1080 44 S 1340 24, 1440 40 L 1440 90 L 0 90 Z" fill="#F3DCA8"/><path d="M0 50 C 180 20, 360 30, 540 48 S 900 70, 1080 44 S 1340 24, 1440 40" fill="none" stroke="#1E3450" stroke-width="2.5" vector-effect="non-scaling-stroke"/></svg>
+  <div class="footer__floor">
+    <svg class="footer__weed footer__weed--l" aria-hidden="true"><use href="#dc-weed"/></svg>
+    <svg class="footer__weed footer__weed--r" aria-hidden="true"><use href="#dc-weed"/></svg>
+    <svg class="footer__decor footer__decor--star" aria-hidden="true"><use href="#dc-star"/></svg>
+    <svg class="footer__decor footer__decor--shell" aria-hidden="true"><use href="#dc-shell"/></svg>
+    <div class="wrap footer__grid">
+      <div class="footer__brand">
+        <a class="nav__brand" href="#hero"><svg class="nav__logo" aria-hidden="true"><use href="#logo"/></svg><span class="nav__word">Omni<span class="nav__s">Step</span><span>Bench</span></span></a>
+        <p data-bind="meta.expansion">Deployment-Aware Agent Evaluation across Modalities and Task Complexity</p>
+        <p class="footer__links">
+          <a data-href="meta.arxivUrl" href="https://arxiv.org/abs/2609.06059" rel="noopener">arXiv</a>
+          <a data-href="meta.pdfUrl" href="https://arxiv.org/pdf/2609.06059" rel="noopener">PDF</a>
+          <a data-href="meta.htmlUrl" href="https://arxiv.org/html/2609.06059" rel="noopener">HTML</a>
+          <a data-href="meta.github" href="https://github.com/SeerRay-Lab/OmniStepBench" rel="noopener">GitHub</a>
+          <a data-href="meta.hfDataset" href="https://huggingface.co/datasets/SeerRay-Lab/OmniStepBench" rel="noopener">HF Dataset</a>
+        </p>
+      </div>
+      <div class="footer__col">
+        <h2 class="footer__h">Affiliations</h2>
+        <ol class="footer__affils" id="footer-affils"></ol>
+      </div>
+      <div class="footer__col footer__col--wide">
+        <h2 class="footer__h">Acknowledgements</h2>
+        <p id="footer-ack"></p>
+        <p class="footer__srcs" id="footer-srcs"></p>
+      </div>
+    </div>
+    <div class="wrap footer__base">
+      <p id="footer-base"></p>
+      <a class="footer__top" href="#hero"><svg aria-hidden="true"><use href="#i-down"/></svg>Back to the surface</a>
+    </div>
+  </div>
+</footer>
+
+<div class="tip" id="tip" role="tooltip" hidden></div>
+<dialog class="lightbox" id="lightbox" aria-labelledby="lightbox-cap">
+  <div class="lightbox__inner">
+    <button class="lightbox__close btn btn--sm btn--ghost" type="button" id="lightbox-close"><svg aria-hidden="true"><use href="#i-close"/></svg>Close</button>
+    <div class="lightbox__img"><img id="lightbox-img" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></div>
+    <p id="lightbox-cap" class="lightbox__cap"></p>
+  </div>
+</dialog>
+<div class="sr-only" id="live" aria-live="polite"></div>
+
+<script src="assets/data/data.js"></script>
+<script src="assets/js/util.js"></script>
+<script src="assets/js/content.js"></script>
+<script src="assets/js/workloads.js"></script>
+<script src="assets/js/leaderboard.js"></script>
+<script src="assets/js/cost.js"></script>
+<script src="assets/js/reliability.js"></script>
+<script src="assets/js/quickstart.js"></script>
+<script src="assets/js/main.js"></script>
+</body>
+</html>