deploy: sync 712e5bc -> HF

.claude/commands/job.md

@@ -0,0 +1,55 @@
+Open a tmux window named `job:<window>` inside apptainer with the qwen35 mamba env activated.
+
+Usage:
+  `/job <window-name>`                    — open window, drop into shell
+  `/job <window-name>: <command>`         — open window and run command immediately
+
+Examples:
+  `/job work`
+  `/job train`
+  `/job train-alt: python train.py --phase alternate --episodes-per-phase 20`
+
+`$ARGUMENTS` is parsed as `<window>` or `<window>: <command>`.
+Window name defaults to "work" if omitted.
+
+```bash
+TMUX_BIN="$HOME/.local/bin/tmux"
+SESSION="job"
+ENV_PATH="/dev/shm/qwen35"
+
+# Parse arguments: "window-name: command to run"  OR  just "window-name"
+ARGS="$ARGUMENTS"
+if [[ "$ARGS" == *": "* ]]; then
+    WINDOW="${ARGS%%: *}"
+    COMMAND="${ARGS#*: }"
+else
+    WINDOW="${ARGS:-work}"
+    COMMAND=""
+fi
+
+# Create session if it doesn't exist
+$TMUX_BIN has-session -t "$SESSION" 2>/dev/null || $TMUX_BIN new-session -d -s "$SESSION" -x 220 -y 50
+
+# Reuse existing window or create new one
+IS_NEW=false
+if $TMUX_BIN list-windows -t "$SESSION" -F "#{window_name}" 2>/dev/null | grep -qx "$WINDOW"; then
+    echo "Reusing existing window: $SESSION:$WINDOW"
+else
+    IS_NEW=true
+    $TMUX_BIN new-window -t "$SESSION" -n "$WINDOW"
+    INIT_CMD="apptainer exec --nv ~/apptainer-images/cuda-custom-amal_latest.sif bash --rcfile <(echo 'source ~/.bashrc; export MAMBA_EXE=\$HOME/.local/bin/micromamba; export MAMBA_ROOT_PREFIX=\$HOME/micromamba; eval \"\$(\$MAMBA_EXE shell hook --shell bash --root-prefix \$MAMBA_ROOT_PREFIX 2>/dev/null)\"; micromamba activate ${ENV_PATH}; export LD_PRELOAD=${ENV_PATH}/lib/libstdc++.so.6; cd ~/workspace/vision-coder-openenv; echo \"[job] apptainer ready | env: ${ENV_PATH} | session: ${SESSION}:${WINDOW}\"')"
+    $TMUX_BIN send-keys -t "$SESSION:$WINDOW" "$INIT_CMD" Enter
+    echo "Created window $SESSION:$WINDOW — apptainer + qwen35 env starting"
+fi
+
+# Send command if provided (wait for apptainer to boot on new windows)
+if [[ -n "$COMMAND" ]]; then
+    if $IS_NEW; then
+        sleep 7
+    fi
+    $TMUX_BIN send-keys -t "$SESSION:$WINDOW" "$COMMAND" Enter
+    echo "Sent to $SESSION:$WINDOW: $COMMAND"
+fi
+
+echo "Attach with: ~/.local/bin/tmux attach -t $SESSION"
+```

.claude/commands/rsync-server.md

@@ -0,0 +1,9 @@
+Pull the latest code from the remote server into the local workspace.
+
+Use $ARGUMENTS as the SSH host if provided, otherwise default to "param".
+
+Run exactly this bash command:
+
+rsync -avz --delete --progress --exclude='.venv' --exclude='__pycache__' --exclude='*.pyc' --exclude='.git' --exclude='checkpoints' --exclude='*.output' ${ARGUMENTS:-param}:~/workspace/vision-coder-openenv/ /Users/amaljoe/Desktop/Workspace/AI/vision-coder-openenv/
+
+After it completes, print a one-line summary: how many files were transferred and total bytes received. If rsync fails, show the error.

.github/workflows/deploy-hf.yml

@@ -0,0 +1,57 @@
+name: Deploy to HF Space
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    name: Deploy to HF Space
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install huggingface_hub
+        run: pip install huggingface_hub -q
+
+      - name: Upload to HF Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          python3 - <<'EOF'
+          from huggingface_hub import HfApi
+          import os, pathlib, tempfile
+
+          api = HfApi(token=os.environ["HF_TOKEN"])
+          repo_id = "amaljoe88/vision-coder-openenv"
+          sha = os.environ.get("GITHUB_SHA", "")[:8]
+          raw_base = "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/"
+
+          # Upload everything except blog.md and binary PNGs.
+          # delete_patterns removes HF files that no longer exist in GitHub.
+          api.upload_folder(
+              folder_path=".",
+              repo_id=repo_id,
+              repo_type="space",
+              ignore_patterns=["assets/*.png", "*.png", "__pycache__", "*.pyc",
+                               ".git", "checkpoints/", "*.log", "blog.md"],
+              delete_patterns=["*.py", "*.md", "*.sh", "*.yaml", "*.yml",
+                               "*.txt", "*.toml", "*.lock", "*.json", "*.jsonl"],
+              commit_message=f"deploy: sync {sha} from GitHub Actions",
+          )
+
+          # Upload blog.md with local asset paths replaced by GitHub raw URLs
+          content = pathlib.Path("blog.md").read_text()
+          content = content.replace("assets/", raw_base + "assets/")
+          tmp = pathlib.Path(tempfile.mktemp(suffix=".md"))
+          tmp.write_text(content)
+          api.upload_file(
+              path_or_fileobj=str(tmp),
+              path_in_repo="blog.md",
+              repo_id=repo_id,
+              repo_type="space",
+              commit_message=f"deploy: blog.md with GitHub raw URLs ({sha})",
+          )
+          tmp.unlink()
+          print(f"Deployed to https://huggingface.co/spaces/{repo_id}")
+          EOF

.gitignore

@@ -0,0 +1,18 @@
+__pycache__/
+*.pyc
+*.pyo
+*.egg-info/
+.env
+debug_renders/
+outputs/
+.claude/*
+!.claude/commands/
+.venv/
+venv/
+dist/
+build/
+# Test case renders (gitignored, regenerated with --render)
+data/tests/*/renders/
+data/tests/last_run_report.json
+# Bundled dataset (tracked intentionally — use git add -f data/)
+

CLAUDE.md

@@ -0,0 +1,494 @@
+# VisionCoder OpenEnv — Claude Code Guide
+
+## Project
+Screenshot-to-HTML RL environment for the Scaler x Meta PyTorch Hackathon.
+OpenEnv-compatible HTTP API: `reset()` / `step()` / `render()` / `state()`.
+
+**Round 1** (backup branch `round1`): single-step, single-agent inference.
+**Round 2** (current `main`): multi-step iterative environment + multi-agent (Developer + Critic) + RL training.
+
+## Package structure
+- `src/` — maps to `openenv` package (`client.py`, `models.py`, `agents.py`, `prompts.py`, `inference.py`, `train.py`, `dataset.py`)
+- `src/server/` — maps to `openenv.server` (`app.py`, `environment.py`)
+- `src/server/rewards/` — maps to `openenv.server.rewards` (one file per reward function)
+- `data/` — bundled synthetic samples (5 per difficulty, ~40KB each)
+- `data/tests/` — reward stability test cases (0-14; committed HTML + expected scores; renders gitignored)
+- `tests/test_rewards.py` — unified test suite (unit + stability + correlation tests)
+
+## Running on rmgpu006 (cluster)
+
+### Step 1 — start vLLM (tmux session: `vllm`)
+```bash
+~/.local/bin/tmux new-session -s vllm
+# inside that session:
+apptainer exec --nv ~/apptainer-images/cuda-custom-amal_latest.sif bash -c \
+  'export LD_PRELOAD=/dev/shm/qwen35/lib/libstdc++.so.6;
+   /dev/shm/qwen35/bin/python -m vllm.entrypoints.openai.api_server \
+   --model ~/models/Qwen3.5-2B --served-model-name qwen35 \
+   --tensor-parallel-size 2 --port 8001 --host 0.0.0.0 \
+   --max-model-len 65536 --enable-auto-tool-choice --tool-call-parser hermes' \
+   2>&1 | tee ~/vllm_qwen35.log
+```
+**`--enable-auto-tool-choice --tool-call-parser hermes` is mandatory** — without it every Developer call fails with 400 Bad Request and falls back to FALLBACK_HTML.
+
+### Step 2 — start env server (tmux session: `openenv`, no apptainer needed)
+```bash
+~/.local/bin/tmux new-session -s openenv
+# inside that session:
+export PLAYWRIGHT_BROWSERS_PATH=~/playwright-browsers
+cd ~/workspace/vision-coder-openenv
+/dev/shm/qwen35/bin/python -m uvicorn openenv.server.app:app --host 127.0.0.1 --port 18080
+```
+
+### Step 3 — run inference (same openenv session or a new window)
+```bash
+export API_BASE_URL=http://localhost:8001/v1
+export MODEL_NAME=qwen35
+export HF_TOKEN=sk-local
+export MAX_STEPS=2
+export PLAYWRIGHT_BROWSERS_PATH=~/playwright-browsers
+cd ~/workspace/vision-coder-openenv
+/dev/shm/qwen35/bin/python inference.py
+```
+
+### First-time setup
+```bash
+# Install package (once per env build)
+/dev/shm/qwen35/bin/pip install -e .
+
+# Download model (once, needs proxy sourced)
+source ~/proxy-setup/scripts/proxy_env.sh
+/dev/shm/qwen35/bin/python -c "
+from huggingface_hub import snapshot_download
+snapshot_download('Qwen/Qwen3.5-2B', local_dir='$HOME/models/Qwen3.5-2B')
+"
+```
+
+## Running locally (generic)
+```bash
+pip install -e .
+uvicorn openenv.server.app:app --host 0.0.0.0 --port 7860
+```
+
+## Running inference (HF router)
+```bash
+export API_BASE_URL=https://router.huggingface.co/v1
+export MODEL_NAME=Qwen/Qwen3.5-35B-A3B
+export HF_TOKEN=hf_...
+python inference.py
+```
+
+## Environment variables
+- `API_BASE_URL` — OpenAI-compatible LLM endpoint (required)
+- `MODEL_NAME` — vision-capable model ID (required); Developer and Critic share this endpoint
+- `HF_TOKEN` — Hugging Face token / API key for LLM calls (primary auth key)
+- `MAX_STEPS` — max developer turns per episode (default: 5)
+- `INFERENCE_SERVER_PORT` — env server port (default: 18080)
+- `DEBUG` — set to `1` to enable full episode debug logging. Creates `outputs/<run_id>/` with:
+  - `<difficulty>.md` — per-episode markdown log (reference image, all step renders, HTML, rewards, critic text)
+  - `images/` — PNGs saved separately (reference, each step's rendered output, critic comparison views)
+  - Run: `DEBUG=1 API_BASE_URL=... MODEL_NAME=... /dev/shm/qwen35/bin/python inference.py`
+- `ONE_SHOT` — removed. Zero-shot outperforms few-shot (mean 0.679 vs 0.653) on this model; few-shot was causing early termination from hallucinated items and content contamination from example pages.
+
+## Python version
+Use `python3.13` locally (pip maps to python3.13 here, not `python3`).
+On rmgpu006: use `/dev/shm/qwen35/bin/python`.
+
+---
+
+## Reward function
+
+Composite of 8 sub-rewards, weighted and normalised to [0, 1]:
+
+| Reward | Weight | What it measures |
+|---|---|---|
+| `format` | 0.5 | Has ` ```html ` fence + `<!DOCTYPE html>` |
+| `validity` | 0.5 | Structural completeness (`html`/`head`/`body`, diverse tags) |
+| `structural` | 0.5 | Tag-sequence similarity + inline-style property coverage |
+| `text_block` | 3.0 | Hungarian-matched text block IoU + text similarity |
+| `position` | 1.0 | Hungarian-matched centroid distance |
+| `color` | 1.5 | Spatial CIEDE2000 on reference non-white pixels |
+| `clip` | 2.5 | CLIP ViT-B/32 cosine similarity, renormalised (threshold 0.65) |
+| `ssim` | 1.5 | Pixel-level SSIM (skimage, 320×240 RGB) — near-perfect zone sensitivity |
+
+**Weight sum = 11.0.** `format`/`validity`/`structural` reduced (saturate early); `color`/`clip`/`ssim` boosted for continuous near-perfect discrimination.
+
+**Content multiplier:** applied to the weighted total. If reference has content but prediction is nearly blank (< 0.5% non-white pixels at 32×32), multiplier scales linearly from 0 to 1. Ensures blank predictions score 0.0 even if individual sub-rewards are nonzero.
+
+**CLIP renormalisation:** raw cosine ≤ 0.65 → score 0; 1.0 → 1.0. Makes blank pages (raw ~0.45) and unstyled pages (raw ~0.76) meaningfully separated.
+
+**Observed scores on 15 test cases (averages):**
+```
+perfect    0.977    minor_diff  0.883    bad_colors  0.740
+half_styled 0.524   no_layout   0.469    no_style    0.393    blank 0.000
+```
+Global Spearman ρ vs canonical targets = 0.955 (15/15 PASS). Gaps improved: perfect→minor_diff +58%, minor_diff→bad_colors +51% vs old weights.
+
+---
+
+## Reward stability tests
+
+Test suite at `tests/test_rewards.py`. Test data in `data/tests/<num>/` (0-14, mapping easy/0-4, medium/0-4, hard/0-4).
+
+Each case has:
+- `reference.html`, `variants/*.html` (7 quality levels) — committed
+- `expected_scores.json` — per-case baseline scores — committed
+- `renders/` — PNG renders + block JSONs — **gitignored**, auto-generated
+
+```bash
+# First run on a new machine (needs apptainer for Playwright on rmgpu006)
+apptainer exec ~/apptainer-images/cuda-custom-amal_latest.sif bash -c \
+  'export PLAYWRIGHT_BROWSERS_PATH=~/playwright-browsers
+   /dev/shm/qwen35/bin/python tests/test_rewards.py --render'
+
+# Score only (fast, uses cached renders — works outside apptainer)
+/dev/shm/qwen35/bin/python tests/test_rewards.py
+
+# Re-render specific cases
+/dev/shm/qwen35/bin/python tests/test_rewards.py --render --cases 0,1,5
+
+# After changing reward functions, lock in new baseline
+/dev/shm/qwen35/bin/python tests/test_rewards.py --update-expected
+
+# As pytest (unit tests only, no Playwright needed)
+/dev/shm/qwen35/bin/python -m pytest tests/test_rewards.py -v -m "not integration"
+```
+
+Pass criteria: Spearman ρ ≥ 0.80 per case, global ρ ≥ 0.85, blank ≤ 0.05, perfect ≥ 0.80.
+
+---
+
+## Round 2 architecture
+
+### Models
+| Role | Inference (eval) | Training |
+|---|---|---|
+| Developer | `Qwen/Qwen3.5-35B-A3B` via HF router | `Qwen/Qwen3.5-2B` with LoRA (rank=16) |
+| Critic | `Qwen/Qwen3.5-35B-A3B` via HF router | shared 2B base |
+
+- Qwen3.5 is unified vision+text — no separate VL variant needed
+- 2B fits 2×A100 with LoRA; training completes in ~2h for 20 episodes × 4 rollouts
+- Run 2 uses `--resume-from checkpoints/run2/developer_final` for continued improvement
+
+### Environment changes (server/)
+- `reset()` returns task + `session_id`; session state lives in-memory per episode
+- `step(html, session_id)` → `{reward, render_low (base64), render_full (base64), done}`
+- `render(html)` → `{image (base64)}` — renders only, no reward (used by Developer tool call)
+- `done=true` when max steps reached
+
+### Multi-agent inference loop (inference.py)
+```
+for each task (episode):
+    state = env.reset()                        # → session_id, reference_image
+    code, critique, render_prev = "", None, None
+
+    for step i in range(MAX_STEPS):
+        # Developer: fast mode, render() tool available
+        # Input: reference_image (low-res) + code + critique
+        # Calls render(new_html) mid-generation to self-check
+        code = developer.generate(ref_image, code, critique)
+
+        result = env.step(code, session_id)    # → reward, render_low, render_full, done
+        log_step(i, code, result.reward, result.done)
+        if result.done: break
+
+        # Critic: thinking mode on
+        # Input: reference_image (full-res) + render_{i-1} + critique_{i-1} + render_i
+        critique = critic.review(ref_image, render_prev, critique, result.render_full)
+        if "DONE" in critique: break
+
+        render_prev = result.render_full
+
+log_end(...)
+```
+
+### RL training (train.py)
+
+**Reward function (per turn t in trajectory):**
+```
+R_total(t) = R_terminal + λ · Σ(r_s - r_{s-1}  for s = t..n)
+
+R_terminal = environment score at final step n    ← main signal
+r_s - r_{s-1} = per-step improvement delta        ← shaped signal
+λ = 0.2                                           ← keeps shaped signal subordinate
+```
+
+- `R_terminal` propagates backward to all turns (solves long-horizon credit assignment)
+- Shaped reward gives additional gradient signal at early turns without dominating
+- Both Developer and Critic tokens receive this advantage; Critic's shaped reward
+  is the improvement delta from step i+1 onward (first step after its critique)
+
+**Training algorithm: full-episode GRPO**
+```
+for each task:
+    sample K full trajectories τ_1..τ_K  (different temperatures/seeds)
+    score each trajectory: R_terminal_k + shaped deltas
+    compute group-relative advantage: A_t = (G_t - mean_k) / std_k
+    update: ∇ log π(a_t | s_t) · A_t  for all tokens in trajectory
+```
+
+**Alternating training schedule:**
+```
+Phase A (N episodes): Train Developer (LoRA), freeze Critic
+Phase B (N episodes): Train Critic   (LoRA, thinking on), freeze Developer
+Repeat until convergence
+```
+
+### inference.py output format (unchanged from Round 1)
+```
+[START] task=<difficulty> env=vision-coder model=<model>
+[STEP]  step=<n> action=<html_preview> reward=<0.00> done=<true|false> error=<msg|null>
+[END]   success=<true|false> steps=<n> score=<0.000> rewards=<r1,...>
+```
+
+---
+
+## Git remotes
+Two remotes must both be kept in sync:
+- `origin` → GitHub (`https://github.com/amaljoe/vision-coder-openenv`)
+- `hf` → HuggingFace Spaces (`https://huggingface.co/spaces/amaljoe88/vision-coder-openenv`)
+
+**A `post-push` hook auto-pushes to `hf` whenever you push to `origin`.** Never push only to origin and forget HF — that's what caused multiple Phase 2 failures (HF Space was 10 commits behind for most of the day).
+
+To deploy manually use the `/deploy` skill which pushes both, waits for build, and health-checks `/reset`.
+
+---
+
+## Submission workflow
+
+### 1. Push code
+```bash
+git push origin main   # post-push hook auto-syncs to hf
+```
+
+### 2. Verify HF Space is live
+```bash
+curl -s "https://huggingface.co/api/spaces/amaljoe88/vision-coder-openenv" \
+  | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['runtime']['stage'], d['sha'][:8])"
+```
+Wait for `stage: RUNNING`. Docker build with CLIP takes 5–10 minutes.
+
+### 3. Health check
+```bash
+curl -X POST "https://amaljoe88-vision-coder-openenv.hf.space/reset?difficulty=easy" -o /dev/null -w "%{http_code}"
+# Must return 200
+```
+
+### 4. Submit via dashboard
+Only the team lead submits at: `https://www.scaler.com/school-of-technology/meta-pytorch-hackathon/dashboard`
+- GitHub URL: `https://github.com/amaljoe/vision-coder-openenv`
+- HF Space URL: `https://huggingface.co/spaces/amaljoe88/vision-coder-openenv`
+
+### 5. Check submission status
+Use the `/check-hackathon-status` skill or:
+```bash
+curl -s "https://www.scaler.com/meta-pytorch-hackathon/api/v1/submissions/status?round=1" \
+  -H "Authorization: Bearer BAh7B0kiDHVzZXJfaWQGOgZFVGkCcp1JIg5pc3N1ZWRfYXQGOwBUbCsHLfLDaQ==--bf98a96719f439decefc69bb1a42fe0d28fa29f82fb956d8546f326225af310d" \
+  | python3 -m json.tool
+```
+Check `validation.agentic_evaluation.status` — target is `"success"` with all 5 steps `"pass"`.
+
+---
+
+## How evaluation works
+
+The evaluator does NOT use the HF Space to run inference. The flow is:
+1. **HF Space ping** — pre-submission only: `POST /reset` must return 200
+2. **Agentic eval**:
+   - Clones GitHub repo to `/tmp/workspace/`
+   - `docker build` from `Dockerfile`
+   - Runs `inference.py` inside Docker with `HF_TOKEN`, `API_BASE_URL`, `MODEL_NAME` set
+   - Parses `[START]`/`[STEP]`/`[END]` stdout
+   - Validates task scores
+
+Eval pipeline: `docker_build` → `inference` → `parse_output` → `task_validation` → `llm_check`
+
+---
+
+## inference.py requirements (critical)
+
+Rules enforced by evaluator parser:
+- `action=` must be a plain string — **no `!r` repr quoting** (caused one failure)
+- `done` and `success` are lowercase: `true`/`false`
+- `error` is `null` if none
+- `[END]` must always be emitted — put it in a `finally` block
+- Exit code must be 0 — wrap everything in try/except
+- LLM call must be inside try/except with a fallback HTML so it never crashes
+
+Auth variable priority (evaluator sets `HF_TOKEN`, not `OPENAI_API_KEY`):
+```python
+API_KEY = os.getenv("HF_TOKEN") or os.getenv("API_KEY") or os.getenv("OPENAI_API_KEY") or "sk-placeholder"
+```
+
+---
+
+## Challenges faced and lessons learned
+
+### 1. HF Space drifted 10 commits behind
+**What happened:** `git push origin main` only updates GitHub. HF Spaces has a separate `hf` remote that needs an explicit `git push hf main`. We pushed all code fixes to GitHub but forgot to push to HF, so the Space ran month-old code for the entire evaluation window.
+
+**Fix:** Added `.git/hooks/post-push` that auto-pushes to `hf` whenever `origin` is pushed.
+
+---
+
+### 2. Auth failure — wrong API key env var
+**What happened:** Old `inference.py` read `OPENAI_API_KEY` but the evaluator only sets `HF_TOKEN`. This caused every LLM call to use `"sk-placeholder"` → 401 auth error → crash.
+
+**Fix:** Read `HF_TOKEN` first, fall back through `API_KEY` → `OPENAI_API_KEY` → placeholder.
+
+---
+
+### 3. Timing race — 3-minute window between commit and submission
+**What happened:** Commit `4dc307c` (inference.py rewrite with auth fix) was pushed at 11:49 AM. User submitted at 11:52 AM — only 3 minutes later. The evaluator cloned the repo before the push fully propagated and ran the older version without proper try/except. The submission failed despite the fix being "live".
+
+**Lesson:** After pushing a critical fix, wait at least 5–10 minutes before resubmitting to avoid the evaluator picking up stale code.
+
+---
+
+### 4. `!r` repr quoting on action field broke output parsing
+**What happened:** `log_step` used `f"action={action!r}"` which wraps the HTML string in Python quotes: `action='<!DOCTYPE...'`. The evaluator parser expected `action=<!DOCTYPE...` (no quotes). Found by comparing against the sample inference script.
+
+**Fix:** Changed `{action_summary!r}` to `{action_summary}`.
+
+---
+
+### 5. transformers v5 API change for CLIP
+**What happened:** `model.get_image_features()` in transformers v5 returns a dataclass (`BaseModelOutputWithPooling`), not a raw tensor. Code that did `features / features.norm()` crashed with `'BaseModelOutputWithPooling' object has no attribute 'norm'`.
+
+**Fix:**
+```python
+out = model.get_image_features(pixel_values=pv)
+features = out.pooler_output if hasattr(out, "pooler_output") else out
+```
+
+---
+
+### 6. Docker build downloads ~1.2GB — fragile on slow networks
+The Dockerfile downloads: `torch` CPU (~600MB), CLIP model weights (~600MB), Playwright Chromium (~400MB). If any download fails or times out during `docker build`, the whole eval fails at `docker_build` step.
+
+**Mitigation:** Keep these RUN layers cached by not changing requirements.txt or the download commands unnecessarily.
+
+---
+
+### 7. 4 Playwright browser launches per step (performance)
+**What happened:** `text_block_reward`, `position_reward`, `color_reward`, and `clip_visual_reward` each launched Playwright independently — 4–6 browser sessions per `step()` call.
+
+**Fix:** Render the predicted HTML once in `environment.py`, pass the `PIL.Image` as `pred_image` parameter to both `color_reward` and `clip_visual_reward` to skip duplicate renders.
+
+---
+
+### 9. `color_reward` false positive on white-background pages
+**What happened:** Original implementation sampled non-white pixels independently from each image, then compared them. A blank white prediction vs a mostly-white reference (e.g. `#f0f2f5` login form) both sampled near-white pixels → CIEDE2000 ≈ 0 → score 0.80–0.96 (false high).
+
+**Fix:** Spatial comparison — resize both images to 128×128, compute per-pixel CIEDE2000, average only over positions where the **reference** is non-white. Blank prediction at those positions gets correct high ΔE. Falls back to full mean when reference is nearly all white (< 2% non-white).
+
+---
+
+### 10. `structural_reward` trivially inflated for inline-style HTML
+**What happened:** All 15 reference HTMLs use inline `style=""` attributes, not CSS classes. The CSS class overlap term always returned 1.0 (neither ref nor pred had classes), making blank pages score 0.50 on structural instead of ~0.25.
+
+**Fix:** When ref has no CSS classes, fall back to inline style **property name** coverage: `len(pred_props ∩ ref_props) / len(ref_props)`. Blank page has 1–2 style props vs 15–25 in ref → score 0.08–0.25. Perfect match (same HTML) → same props → 1.0.
+
+---
+
+### 11. `validity_reward` too generous on blank pages
+**What happened:** `_MIN_DIVERSE_TAGS` was 5. A blank page with 4 tags (`html`, `head`, `title`, `body`) scored 4/5 = 0.80 on diversity, giving total validity ≈ 0.90.
+
+**Fix:** Raised to 8. Blank page now scores 4/8 = 0.50 on diversity → total validity ≈ 0.75.
+
+---
+
+### 12. Per-step GRPO loses long-horizon signal (Round 2 lesson)
+**What happened (design trap):** Applying GRPO independently at each step means Dev_0 only sees `r_0` — the final reward never flows back. Early turns get misguided signal regardless of episode outcome.
+
+**Fix:** Full-episode GRPO — sample K complete trajectories, apply group-relative advantage to all tokens uniformly. Augment with shaped improvement-delta reward (λ=0.2) for early-turn credit assignment. See `train.py`.
+
+---
+
+### 13. Critic DONE-too-early collapses GRPO variance
+**What happened:** The training CRITIC_TRAIN_SYSTEM said "Output DONE if closely matches" (too permissive). The Critic said DONE after step 1 on medium/hard tasks regardless of quality. With all 4 rollouts at 1 step and similar rewards, group std ≈ 0 → advantages ≈ 0 → no gradient signal.
+
+**Fix:** Stricter prompt: "Output DONE only if >90% visual similarity. If ANY section is missing/wrong, list it — do NOT output DONE." Fixes variance collapse for run 2.
+
+---
+
+### 14. MAX_NEW_TOKENS=1024 caused truncated HTML → artificially low training rewards
+**What happened:** Complex HTML pages need 1500–2500 tokens. With MAX_NEW_TOKENS=1024, the model generated truncated HTML missing closing tags and lower sections. Reward was dominated by fmt/validity only (clip=0 because truncated HTML renders blank/broken).
+
+**Fix:** Increased to 2048 in src/train.py. Also helps that 2B model's training rewards (0.23–0.35) were far below vLLM inference rewards (0.6+) — gap partly explained by truncation.
+
+---
+
+### 15. GRPO breakthrough emerges at ep=16 (easy difficulty)
+**What happened:** After 15 episodes of noisy rewards (0.23–0.35 for easy), ep=16 easy jumped to 0.496 mean reward. Individual rollouts reached 0.82 with clip=0.95 (raw cosine ~0.98). The model learned to generate HTML with high visual similarity.
+
+**Why it happened:** GRPO with variance in rollouts — when 1 of 4 rollouts achieves clip=0.90+ while others get 0.00, the group advantage strongly reinforces the high-scoring generation strategy. This is the critical moment when GRPO starts working.
+
+**Observation:** Medium and hard tasks didn't break through in run 1 due to Critic early-termination. Run 2 (with fixed CRITIC_TRAIN_SYSTEM) should show similar breakthrough for all difficulties.
+
+---
+
+### 16. eval_lora.py — comparing trained vs base without vLLM
+**Command (runs after training, outside apptainer):**
+```bash
+export PLAYWRIGHT_BROWSERS_PATH=~/playwright-browsers
+/dev/shm/qwen35/bin/python eval_lora.py \
+    --lora-path checkpoints/run2/developer_final \
+    --model ~/models/Qwen3.5-2B \
+    --episodes 2
+```
+Outputs blog-ready markdown table + saves `checkpoints/eval_results.json`.
+
+**Run 1 results** (20/20 episodes, `checkpoints/run2/developer_final`, 2 ep/difficulty, temperature=0.3):
+| Difficulty | Base 2B | Trained 2B | Delta |
+|---|---|---|---|
+| easy | 0.924 | **0.961** | +0.037 |
+| medium | 0.937 | **0.955** | +0.018 |
+| hard | 0.919 | **0.952** | +0.034 |
+| **mean** | 0.927 | **0.956** | **+3.2%** |
+
+> Evaluated on bundled training samples (in-distribution). Relative delta is the meaningful signal.
+
+**Command to restart vLLM with trained LoRA** (in tmux `vllm` session, after killing old process):
+```bash
+LORA_PATH=checkpoints/run2/developer_final LORA_NAME=qwen35-trained bash scripts/vllm.sh 2b
+# Then use MODEL_NAME=qwen35-trained in inference.py for trained model
+```
+
+**Command to start run 2 (resume from run 1 LoRA):**
+```bash
+apptainer exec --nv ~/apptainer-images/cuda-custom-amal_latest.sif bash -c '
+export LD_PRELOAD=/dev/shm/qwen35/lib/libstdc++.so.6
+/dev/shm/qwen35/bin/python train.py \
+    --phase developer \
+    --episodes 10 \
+    --k-rollouts 4 \
+    --model ~/models/Qwen3.5-2B \
+    --checkpoint-dir checkpoints/run3 \
+    --resume-from checkpoints/run2/developer_final
+' 2>&1 | tee checkpoints/train_run3.log
+```
+
+---
+
+## Self-Update Protocol
+
+**This file is a living document. Claude must keep it current.**
+
+Whenever you discover something not already recorded here — a new flag, env var, command, lesson, bug, or architectural decision — add it immediately. Do not wait to be asked.
+
+### What to update and where
+
+| Discovery | Where to add |
+|---|---|
+| New `--flag` for vLLM / uvicorn / inference | Relevant step in "Running on rmgpu006" |
+| New environment variable | "Environment variables" section |
+| New bug or production incident | "Challenges faced and lessons learned" (next numbered entry) |
+| New architectural decision | Relevant subsection under "Round 2 architecture" |
+| Change to submission / eval behavior | "Submission workflow" or "How evaluation works" |
+| New debug flag or mode | "Environment variables" section with a note on what it enables |
+
+### Rules
+- Write lessons in past tense under "Challenges faced" — **What happened**, **Fix** format.
+- Keep commands copy-pasteable and tested; update them if they change.
+- After updating this file, commit it: `git add CLAUDE.md && git commit -m "docs: update CLAUDE.md — <one-line summary>"`

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install pip dependencies first (layer cache)
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Install torch CPU-only (avoids ~2 GB of GPU kernels)
+RUN pip install --no-cache-dir torch torchvision --index-url https://download.pytorch.org/whl/cpu
+
+# Pre-download CLIP model so first request isn't slow
+RUN python -c "from transformers import CLIPModel, CLIPProcessor; CLIPModel.from_pretrained('openai/clip-vit-base-patch32'); CLIPProcessor.from_pretrained('openai/clip-vit-base-patch32'); print('CLIP ready')"
+
+# Let Playwright install Chromium + all its own system dependencies
+RUN playwright install chromium --with-deps
+
+# Copy source and install package
+COPY . .
+RUN pip install --no-cache-dir -e .
+
+EXPOSE 7860
+
+ENV PORT=7860
+
+CMD ["sh", "-c", "uvicorn openenv.server.app:app --host 0.0.0.0 --port ${PORT}"]

README.md

@@ -0,0 +1,103 @@
+---
+title: Vision Coder OpenEnv
+emoji: 🖼️
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+models:
+  - Qwen/Qwen3.5-2B
+tags:
+  - reinforcement-learning
+  - html-generation
+  - computer-vision
+  - grpo
+short_description: RL environment for screenshot-to-HTML generation
+---
+
+# VisionCoder OpenEnv
+
+An RL environment for screenshot-to-HTML generation. An agent receives a UI screenshot and iteratively refines HTML until the rendered output visually matches the reference.
+
+**[Live environment](https://huggingface.co/spaces/amaljoe88/vision-coder-openenv) · [Blog](https://github.com/amaljoe/vision-coder-openenv/blob/main/blog.md) · [Interactive demo](https://amaljoe.github.io/vision-coder-openenv/)**
+
+---
+
+## The Problem
+
+A single LLM call can produce structurally valid HTML that looks nothing like the reference — the model has no way to see its own rendered output and no feedback loop to improve. We frame this as RL: generate HTML, render in a real browser, compute visual reward, iterate.
+
+---
+
+## How It Works
+
+### API
+
+```
+POST /reset?difficulty=easy|medium|hard  →  { session_id, screenshot_b64 }
+POST /step   { html, session_id }         →  { reward, render_low, render_full, done }
+POST /render { html }                     →  { image_b64 }
+```
+
+Episodes run for up to 5 steps. Every submission is rendered by Playwright (headless Chromium) at `320×240` (low-res preview) and `640×480` (full-res, used for reward and Critic).
+
+### Two-Agent Loop
+
+A **Developer** generates HTML; a **Critic** compares the render against the reference and produces selector-specific CSS fix instructions.
+
+![Dual-agent architecture](https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/assets/dual-agent-architecture.png)
+
+The Critic compresses ~5,000 tokens of visual+code context into ~200 tokens of actionable fix instructions the Developer can apply directly.
+
+### Reward Function
+
+8 sub-rewards weighted by discriminativeness (weight sum = 11.0):
+
+| Signal | Weight |
+|---|---|
+| `format` + `validity` + `structural` | 0.5 each — saturate early |
+| `position` | 1.0 |
+| `color` + `ssim` | 1.5 each |
+| `clip` | 2.5 |
+| `text_block` | **3.0** |
+
+A content multiplier forces blank renders to score 0.0 regardless of sub-reward values.  
+**Spearman ρ = 0.955** vs human quality rankings across 15 test cases.
+
+The reward test suite runs across all 15 cases. Browse all renders, scores, and per-sub-reward breakdowns in the **[interactive demo](https://amaljoe.github.io/vision-coder-openenv/)**.
+
+---
+
+## Results
+
+Training Qwen3.5-2B with full-episode GRPO for 20 episodes on 2× A100 80GB (~2h):
+
+![Training Curve](https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/assets/training_curve.png)
+
+| Difficulty | Base | Trained | Delta |
+|---|---|---|---|
+| easy | 0.629 | 0.634 | +0.005 |
+| medium | 0.488 | 0.634 | +0.146 |
+| hard | 0.346 | 0.564 | +0.218 |
+| **mean** | **0.488** | **0.611** | **+25.2%** |
+
+Hard tasks improve the most — complex layouts have the most to gain from the Critic's structured feedback.
+
+![Episode reward progression](https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/assets/episode_progression.png)
+
+---
+
+## Quickstart
+
+```bash
+pip install -e .
+uvicorn openenv.server.app:app --host 0.0.0.0 --port 7860
+```
+
+```bash
+export API_BASE_URL=https://router.huggingface.co/v1
+export MODEL_NAME=Qwen/Qwen3.5-35B-A3B
+export HF_TOKEN=hf_...
+python inference.py
+```

benchmark.py

@@ -0,0 +1,251 @@
+"""Benchmark three inference approaches on 15 examples (5 per difficulty).
+
+Approaches:
+  A — Multi-agent: Developer (full-res ref + Critic TODO) + Critic (full-res ref + renders)
+  B — Long-horizon Developer: full-res ref + all previous renders + all previous HTML, no Critic
+  C — Short-horizon Developer: full-res ref + only last render + only last HTML, no Critic
+
+Usage:
+  export API_BASE_URL=http://localhost:8001/v1
+  export MODEL_NAME=qwen35
+  export HF_TOKEN=sk-local
+  export MAX_STEPS=5
+  export PLAYWRIGHT_BROWSERS_PATH=~/playwright-browsers
+  cd ~/workspace/vision-coder-openenv
+  /dev/shm/qwen35/bin/python benchmark.py 2>&1 | tee benchmark_results.txt
+"""
+from __future__ import annotations
+
+import json
+import os
+import sys
+import threading
+import time
+import urllib.request
+from datetime import datetime
+from pathlib import Path
+from typing import Dict, List, Tuple
+
+import uvicorn
+
+API_KEY = os.getenv("HF_TOKEN") or os.getenv("API_KEY") or os.getenv("OPENAI_API_KEY") or "sk-placeholder"
+API_BASE_URL = os.getenv("API_BASE_URL") or "https://router.huggingface.co/v1"
+MODEL_NAME = os.getenv("MODEL_NAME") or "Qwen/Qwen3.5-35B-A3B"
+SERVER_PORT = int(os.environ.get("INFERENCE_SERVER_PORT", "18080"))
+SERVER_URL = f"http://127.0.0.1:{SERVER_PORT}"
+MAX_STEPS = int(os.environ.get("MAX_STEPS", "5"))
+NUM_EPISODES = int(os.environ.get("NUM_EPISODES", "5"))   # per difficulty
+DIFFICULTIES = ["easy", "medium", "hard"]
+
+# Partial results written here after every episode so a crash loses nothing
+_RUN_ID = datetime.now().strftime("%Y%m%d_%H%M%S")
+PARTIAL_PATH = Path(f"benchmark_partial_{_RUN_ID}.json")
+_partial: dict = {}  # keyed by "A/easy/1", etc.
+
+
+def _flush_partial() -> None:
+    PARTIAL_PATH.write_text(json.dumps(_partial, indent=2))
+
+
+def _start_server() -> None:
+    from openenv.server.app import app
+    config = uvicorn.Config(app, host="127.0.0.1", port=SERVER_PORT, log_level="error")
+    uvicorn.Server(config).run()
+
+
+def _wait_for_server(timeout: float = 120.0) -> None:
+    deadline = time.time() + timeout
+    while time.time() < deadline:
+        try:
+            urllib.request.urlopen(f"{SERVER_URL}/health", timeout=2)
+            return
+        except Exception:
+            time.sleep(1.0)
+    raise RuntimeError(f"Env server did not start within {timeout}s")
+
+
+def _run_approach(
+    label: str,
+    approach_id: str,
+    env_client,
+    config,
+) -> Tuple[List[float], float]:
+    """Run approach on all examples. Returns (rewards_per_episode, total_wall_time)."""
+    from openenv.agents import run_episode, run_episode_long_dev, run_episode_short_dev, run_episode_d
+
+    runners = {
+        "A": run_episode,
+        "B": run_episode_long_dev,
+        "C": run_episode_short_dev,
+        "D": run_episode_d,
+    }
+    runner = runners[approach_id]
+
+    # Reset dataset indices so every approach sees the same samples
+    env_client.post("/reset_dataset")
+
+    all_rewards: List[float] = []
+    approach_start = time.time()
+
+    for difficulty in DIFFICULTIES:
+        for ep in range(1, NUM_EPISODES + 1):
+            ep_start = time.time()
+            final_reward = 0.0
+            all_step_rewards: List[float] = []
+
+            try:
+                resp = env_client.post("/reset", params={"difficulty": difficulty})
+                resp.raise_for_status()
+                obs = resp.json()
+                session_id = obs["session_id"]
+                ref_b64 = obs["screenshot_b64"]
+
+                results = runner(
+                    env_client, config, session_id, ref_b64,
+                    dbg=None, on_step=None,
+                )
+                if results:
+                    final_reward = results[-1].reward
+                    all_step_rewards = [r.reward for r in results]
+
+            except Exception as exc:
+                print(f"[BENCH] ERROR approach={approach_id} difficulty={difficulty} ep={ep}: {exc}", flush=True)
+
+            ep_time = time.time() - ep_start
+            all_rewards.append(final_reward)
+
+            # Save final render as PNG
+            if results and results[-1].render_full_b64:
+                import base64 as _b64
+                renders_dir = Path("benchmark_renders") / _RUN_ID / approach_id
+                renders_dir.mkdir(parents=True, exist_ok=True)
+                png_path = renders_dir / f"{difficulty}_ep{ep}_r{final_reward:.3f}.png"
+                png_path.write_bytes(_b64.b64decode(results[-1].render_full_b64))
+
+            # Persist after every episode
+            key = f"{approach_id}/{difficulty}/{ep}"
+            _partial[key] = {
+                "approach": approach_id,
+                "difficulty": difficulty,
+                "episode": ep,
+                "final_reward": final_reward,
+                "step_rewards": all_step_rewards,
+                "time_s": round(ep_time, 2),
+            }
+            _flush_partial()
+
+            print(
+                f"[BENCH] approach={approach_id} difficulty={difficulty} ep={ep} "
+                f"reward={final_reward:.4f} time={ep_time:.1f}s",
+                flush=True,
+            )
+
+    total_time = time.time() - approach_start
+    return all_rewards, total_time
+
+
+def _print_table(results: Dict[str, Tuple[str, List[float], float]]) -> None:
+    """Print per-approach summary and per-difficulty breakdown."""
+    print("\n" + "=" * 70, flush=True)
+    print("BENCHMARK RESULTS", flush=True)
+    print("=" * 70, flush=True)
+
+    header = f"{'Approach':<32} {'Mean Rwd':>9} {'Total Rwd':>10} {'Time':>8}"
+    print(header, flush=True)
+    print("-" * 70, flush=True)
+
+    for approach_id, (label, rewards, total_time) in results.items():
+        mean_r = sum(rewards) / len(rewards) if rewards else 0.0
+        total_r = sum(rewards)
+        print(
+            f"  {label:<30} {mean_r:>9.4f} {total_r:>10.4f} {total_time:>7.1f}s",
+            flush=True,
+        )
+
+    print("\nPer-difficulty breakdown (mean reward):", flush=True)
+    print(f"{'Approach':<32} {'easy':>8} {'medium':>8} {'hard':>8}", flush=True)
+    print("-" * 70, flush=True)
+
+    for approach_id, (label, rewards, _) in results.items():
+        # rewards: [easy×5, medium×5, hard×5]
+        easy_r   = sum(rewards[0:5])   / 5 if len(rewards) >= 5  else 0.0
+        medium_r = sum(rewards[5:10])  / 5 if len(rewards) >= 10 else 0.0
+        hard_r   = sum(rewards[10:15]) / 5 if len(rewards) >= 15 else 0.0
+        print(
+            f"  {label:<30} {easy_r:>8.4f} {medium_r:>8.4f} {hard_r:>8.4f}",
+            flush=True,
+        )
+
+    print("=" * 70, flush=True)
+
+
+def main() -> None:
+    import httpx
+    from openenv.agents import AgentConfig
+
+    # Start env server only if not already running
+    try:
+        urllib.request.urlopen(f"{SERVER_URL}/health", timeout=2)
+        print("Environment server already running — skipping startup.", flush=True)
+    except Exception:
+        t = threading.Thread(target=_start_server, daemon=True)
+        t.start()
+        print("Waiting for environment server …", flush=True)
+        try:
+            _wait_for_server()
+        except RuntimeError as exc:
+            print(f"[BENCH] Server startup failed: {exc}", flush=True)
+            sys.exit(1)
+        print("Server ready.", flush=True)
+
+    config = AgentConfig(
+        api_key=API_KEY,
+        api_base=API_BASE_URL,
+        model=MODEL_NAME,
+        max_steps=MAX_STEPS,
+    )
+    env_client = httpx.Client(base_url=SERVER_URL, timeout=180.0)
+
+    _only = os.getenv("ONLY_APPROACHES", "").upper().split(",") if os.getenv("ONLY_APPROACHES") else None
+    APPROACHES = [
+        (aid, lbl) for aid, lbl in [
+            ("A", "A: Multi-agent (Dev+Critic)"),
+            ("B", "B: Long-horizon Developer"),
+            ("C", "C: Short-horizon Developer"),
+            ("D", "D: LongDev(low-res)+SimpleCritic"),
+        ] if _only is None or aid in _only
+    ]
+
+    print(f"[BENCH] Partial results → {PARTIAL_PATH} (flushed after every episode)", flush=True)
+
+    results: Dict[str, Tuple[str, List[float], float]] = {}
+    for approach_id, label in APPROACHES:
+        print(f"\n{'='*60}", flush=True)
+        print(f"Running approach {label}  ({NUM_EPISODES} eps × {len(DIFFICULTIES)} difficulties = {NUM_EPISODES * len(DIFFICULTIES)} episodes)", flush=True)
+        print(f"{'='*60}", flush=True)
+        rewards, total_time = _run_approach(label, approach_id, env_client, config)
+        results[approach_id] = (label, rewards, total_time)
+        mean_r = sum(rewards) / len(rewards) if rewards else 0.0
+        print(f"[BENCH] Approach {approach_id} done — mean={mean_r:.4f} time={total_time:.1f}s", flush=True)
+
+    env_client.close()
+    _print_table(results)
+
+    # Write final summary JSON
+    summary_path = Path(f"benchmark_summary_{_RUN_ID}.json")
+    summary = {
+        approach_id: {
+            "label": label,
+            "mean_reward": round(sum(rw) / len(rw), 6) if rw else 0.0,
+            "total_reward": round(sum(rw), 6),
+            "total_time_s": round(tt, 2),
+            "rewards": rw,
+        }
+        for approach_id, (label, rw, tt) in results.items()
+    }
+    summary_path.write_text(json.dumps(summary, indent=2))
+    print(f"[BENCH] Final summary → {summary_path}", flush=True)
+
+
+if __name__ == "__main__":
+    main()

data/easy/0.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f0f2f5;display:flex;align-items:center;justify-content:center;min-height:100vh;">
+  <div style="background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;">
+    <h2 style="margin:0 0 24px;text-align:center;color:#1a1a1a;">Sign In</h2>
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Email</label>
+    <input type="email" placeholder="you@example.com" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:16px;">
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Password</label>
+    <input type="password" placeholder="••••••••" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;">
+    <button style="width:100%;padding:12px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;">Sign In</button>
+    <p style="text-align:center;margin-top:16px;font-size:13px;color:#888;">Don't have an account? <a href="#" style="color:#4f46e5;">Sign up</a></p>
+  </div>
+</body>
+</html>

data/easy/1.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body style="margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;">
+  <p style="font-size:13px;color:#888;margin-bottom:8px;">TECHNOLOGY · 5 MIN READ</p>
+  <h1 style="font-size:32px;line-height:1.3;margin:0 0 16px;">The Rise of AI-Assisted Development</h1>
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;">
+    <div style="width:40px;height:40px;border-radius:50%;background:#4f46e5;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;">AJ</div>
+    <div>
+      <p style="margin:0;font-size:14px;font-weight:bold;color:#333;">Amal Joe</p>
+      <p style="margin:0;font-size:13px;color:#888;">April 8, 2026</p>
+    </div>
+  </div>
+  <div style="background:#f8f8f8;border-left:4px solid #4f46e5;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;">
+    <p style="margin:0;font-style:italic;color:#555;">"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p style="line-height:1.8;margin-bottom:20px;">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p style="line-height:1.8;">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/easy/2.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Contact</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#222;max-width:560px;margin:0 auto;padding:60px 20px;">
+  <h1 style="font-size:28px;margin:0 0 8px;">Get in Touch</h1>
+  <p style="color:#666;margin:0 0 32px;">We'll get back to you within 24 hours.</p>
+  <div style="display:flex;gap:16px;margin-bottom:20px;">
+    <div style="flex:1;">
+      <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;">First Name</label>
+      <input style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;">
+    </div>
+    <div style="flex:1;">
+      <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;">Last Name</label>
+      <input style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;">
+    </div>
+  </div>
+  <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;">Email</label>
+  <input type="email" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;margin-bottom:20px;">
+  <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;">Message</label>
+  <textarea rows="5" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;resize:vertical;margin-bottom:24px;"></textarea>
+  <button style="padding:12px 28px;background:#111;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;">Send Message</button>
+</body>
+</html>

data/easy/3.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Product</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#111;max-width:800px;margin:0 auto;padding:40px 20px;">
+  <div style="display:flex;gap:40px;align-items:flex-start;">
+    <div style="flex:1;background:#f5f5f5;border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;">
+      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+    </div>
+    <div style="flex:1;">
+      <p style="margin:0 0 8px;font-size:13px;color:#999;letter-spacing:.05em;">ELECTRONICS</p>
+      <h1 style="font-size:26px;margin:0 0 12px;">UltraView Monitor 27"</h1>
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
+        <span style="color:#f59e0b;font-size:16px;">★★★★☆</span>
+        <span style="font-size:13px;color:#888;">4.2 (318 reviews)</span>
+      </div>
+      <p style="font-size:28px;font-weight:700;margin:0 0 20px;">$349<span style="font-size:16px;color:#888;font-weight:400;text-decoration:line-through;margin-left:10px;">$429</span></p>
+      <p style="line-height:1.7;color:#555;font-size:14px;margin-bottom:24px;">4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>
+      <button style="width:100%;padding:14px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:12px;">Add to Cart</button>
+      <button style="width:100%;padding:14px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;">Save for Later</button>
+    </div>
+  </div>
+</body>
+</html>

data/easy/4.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>About</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#222;">
+  <div style="background:#0f172a;color:#fff;padding:60px 40px;text-align:center;">
+    <div style="width:80px;height:80px;border-radius:50%;background:#4f46e5;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;">N</div>
+    <h1 style="font-size:28px;margin:0 0 10px;">Nova Technologies</h1>
+    <p style="color:#94a3b8;max-width:500px;margin:0 auto;">Building the next generation of developer tools since 2020.</p>
+  </div>
+  <div style="max-width:700px;margin:0 auto;padding:60px 20px;">
+    <h2 style="font-size:22px;margin:0 0 16px;">Our Mission</h2>
+    <p style="line-height:1.8;color:#555;margin-bottom:40px;">We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>
+    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;">
+      <div style="text-align:center;padding:24px;background:#f8fafc;border-radius:10px;">
+        <p style="font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;">50K+</p>
+        <p style="font-size:13px;color:#888;margin:0;">Developers</p>
+      </div>
+      <div style="text-align:center;padding:24px;background:#f8fafc;border-radius:10px;">
+        <p style="font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;">120+</p>
+        <p style="font-size:13px;color:#888;margin:0;">Countries</p>
+      </div>
+      <div style="text-align:center;padding:24px;background:#f8fafc;border-radius:10px;">
+        <p style="font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;">99.9%</p>
+        <p style="font-size:13px;color:#888;margin:0;">Uptime</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

data/hard/0.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Dashboard</title></head>
+<body style="margin:0;font-family:sans-serif;background:#0f172a;color:#e2e8f0;display:flex;min-height:100vh;">
+  <aside style="width:200px;background:#1e293b;padding:24px 0;flex-shrink:0;">
+    <div style="padding:0 20px 24px;font-size:18px;font-weight:700;color:#fff;border-bottom:1px solid #334155;">⚡ Pulsar</div>
+    <nav style="padding:16px 0;">
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#fff;background:#334155;text-decoration:none;margin-bottom:2px;">📊 Overview</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">🚀 Deployments</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">📁 Projects</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">👥 Team</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;">⚙️ Settings</a>
+    </nav>
+  </aside>
+  <main style="flex:1;padding:32px;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;">
+      <h1 style="margin:0;font-size:22px;">Overview</h1>
+      <button style="padding:9px 18px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">+ New Project</button>
+    </div>
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;">
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">DEPLOYMENTS</p><p style="margin:0;font-size:28px;font-weight:700;">1,284</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 12% this week</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">SUCCESS RATE</p><p style="margin:0;font-size:28px;font-weight:700;">99.2%</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 0.3% this week</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">AVG BUILD TIME</p><p style="margin:0;font-size:28px;font-weight:700;">28s</p><p style="margin:4px 0 0;font-size:12px;color:#fb923c;">↓ 3s slower</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">ACTIVE PROJECTS</p><p style="margin:0;font-size:28px;font-weight:700;">47</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 3 new</p></div>
+    </div>
+    <div style="background:#1e293b;border-radius:10px;padding:24px;">
+      <h2 style="margin:0 0 20px;font-size:16px;">Recent Deployments</h2>
+      <table style="width:100%;border-collapse:collapse;font-size:13px;">
+        <thead><tr style="color:#64748b;border-bottom:1px solid #334155;"><th style="text-align:left;padding:8px 0;">Project</th><th style="text-align:left;padding:8px 0;">Branch</th><th style="text-align:left;padding:8px 0;">Status</th><th style="text-align:left;padding:8px 0;">Time</th></tr></thead>
+        <tbody>
+          <tr style="border-bottom:1px solid #1e293b;"><td style="padding:12px 0;color:#e2e8f0;">api-service</td><td style="padding:12px 0;color:#94a3b8;">main</td><td style="padding:12px 0;"><span style="background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:20px;font-size:11px;">✓ Success</span></td><td style="padding:12px 0;color:#94a3b8;">2 min ago</td></tr>
+          <tr style="border-bottom:1px solid #1e293b;"><td style="padding:12px 0;color:#e2e8f0;">web-frontend</td><td style="padding:12px 0;color:#94a3b8;">feat/auth</td><td style="padding:12px 0;"><span style="background:#fef3c7;color:#d97706;padding:3px 10px;border-radius:20px;font-size:11px;">⟳ Building</span></td><td style="padding:12px 0;color:#94a3b8;">5 min ago</td></tr>
+          <tr><td style="padding:12px 0;color:#e2e8f0;">ml-pipeline</td><td style="padding:12px 0;color:#94a3b8;">main</td><td style="padding:12px 0;"><span style="background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:20px;font-size:11px;">✗ Failed</span></td><td style="padding:12px 0;color:#94a3b8;">18 min ago</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</body>
+</html>

data/hard/1.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>E-commerce</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#111;">
+  <nav style="background:#111;color:#fff;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;">
+    <span style="font-weight:700;font-size:20px;letter-spacing:-.5px;">SHOP<span style="color:#f59e0b;">.</span></span>
+    <div style="display:flex;gap:28px;font-size:14px;color:#ccc;">
+      <a href="#" style="color:#fff;text-decoration:none;font-weight:500;">New</a>
+      <a href="#" style="color:#ccc;text-decoration:none;">Men</a>
+      <a href="#" style="color:#ccc;text-decoration:none;">Women</a>
+      <a href="#" style="color:#ccc;text-decoration:none;">Sale</a>
+    </div>
+    <div style="display:flex;gap:16px;align-items:center;">
+      <span style="font-size:14px;color:#ccc;">🔍</span>
+      <span style="font-size:14px;color:#ccc;">🛒 3</span>
+    </div>
+  </nav>
+  <div style="display:flex;max-width:1200px;margin:0 auto;padding:32px 20px;gap:32px;">
+    <aside style="width:200px;flex-shrink:0;">
+      <h3 style="font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;">Category</h3>
+      <div style="font-size:14px;line-height:2.4;border-bottom:1px solid #eee;margin-bottom:20px;padding-bottom:16px;">
+        <p style="margin:0;cursor:pointer;font-weight:600;color:#111;">All (128)</p>
+        <p style="margin:0;cursor:pointer;color:#555;">T-Shirts (34)</p>
+        <p style="margin:0;cursor:pointer;color:#555;">Hoodies (28)</p>
+        <p style="margin:0;cursor:pointer;color:#555;">Jackets (22)</p>
+        <p style="margin:0;cursor:pointer;color:#555;">Pants (44)</p>
+      </div>
+      <h3 style="font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;">Price</h3>
+      <div style="font-size:14px;line-height:2.4;">
+        <p style="margin:0;cursor:pointer;color:#555;">Under $50</p>
+        <p style="margin:0;cursor:pointer;color:#555;">$50 – $100</p>
+        <p style="margin:0;cursor:pointer;font-weight:600;color:#111;">$100 – $200</p>
+        <p style="margin:0;cursor:pointer;color:#555;">Over $200</p>
+      </div>
+    </aside>
+    <div style="flex:1;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;">
+        <p style="margin:0;font-size:14px;color:#888;">128 products</p>
+        <select style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;">
+          <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>
+        </select>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">
+        <div><div style="background:#f5f5f5;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;">👕</div><p style="margin:0 0 4px;font-size:14px;font-weight:500;">Essential Tee</p><p style="margin:0;font-size:14px;color:#888;">$38</p></div>
+        <div><div style="background:#e8f4fd;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;"><span style="position:absolute;top:10px;left:10px;background:#ef4444;color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;">SALE</span>🧥</div><p style="margin:0 0 4px;font-size:14px;font-weight:500;">Puffer Jacket</p><p style="margin:0;font-size:14px;"><span style="color:#ef4444;font-weight:600;">$89</span> <span style="color:#bbb;text-decoration:line-through;font-size:13px;">$149</span></p></div>
+        <div><div style="background:#fdf5e8;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;">👔</div><p style="margin:0 0 4px;font-size:14px;font-weight:500;">Oxford Shirt</p><p style="margin:0;font-size:14px;color:#888;">$75</p></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

data/hard/2.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Analytics</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f8fafc;color:#1e293b;">
+  <nav style="background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;">
+    <div style="display:flex;align-items:center;gap:24px;">
+      <span style="font-weight:700;font-size:17px;color:#4f46e5;">Analytics</span>
+      <div style="display:flex;gap:4px;background:#f1f5f9;border-radius:6px;padding:3px;">
+        <button style="padding:5px 14px;background:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);">7d</button>
+        <button style="padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;">30d</button>
+        <button style="padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;">90d</button>
+      </div>
+    </div>
+    <button style="padding:8px 16px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">Export CSV</button>
+  </nav>
+  <div style="padding:28px;">
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;">
+      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Total Revenue</p><p style="margin:0;font-size:26px;font-weight:700;">$84,231</p><p style="margin:6px 0 0;font-size:12px;color:#16a34a;">↑ 18.2% vs last period</p></div>
+      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Visitors</p><p style="margin:0;font-size:26px;font-weight:700;">24,891</p><p style="margin:6px 0 0;font-size:12px;color:#16a34a;">↑ 7.4%</p></div>
+      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Conversion</p><p style="margin:0;font-size:26px;font-weight:700;">3.6%</p><p style="margin:6px 0 0;font-size:12px;color:#ef4444;">↓ 0.4%</p></div>
+      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Avg Order</p><p style="margin:0;font-size:26px;font-weight:700;">$94.30</p><p style="margin:6px 0 0;font-size:12px;color:#16a34a;">↑ 10.1%</p></div>
+    </div>
+    <div style="display:grid;grid-template-columns:2fr 1fr;gap:16px;">
+      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;">
+        <h3 style="margin:0 0 20px;font-size:15px;">Revenue Over Time</h3>
+        <div style="display:flex;align-items:flex-end;gap:8px;height:120px;">
+          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:40%;"></div>
+          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:55%;"></div>
+          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:48%;"></div>
+          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:72%;"></div>
+          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:60%;"></div>
+          <div style="flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:85%;"></div>
+          <div style="flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:100%;"></div>
+        </div>
+        <div style="display:flex;gap:8px;margin-top:8px;font-size:11px;color:#94a3b8;">
+          <span style="flex:1;text-align:center;">Mon</span><span style="flex:1;text-align:center;">Tue</span><span style="flex:1;text-align:center;">Wed</span><span style="flex:1;text-align:center;">Thu</span><span style="flex:1;text-align:center;">Fri</span><span style="flex:1;text-align:center;">Sat</span><span style="flex:1;text-align:center;">Sun</span>
+        </div>
+      </div>
+      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;">
+        <h3 style="margin:0 0 16px;font-size:15px;">Top Sources</h3>
+        <div style="font-size:13px;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><span>Google</span><div style="display:flex;align-items:center;gap:8px;"><div style="width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;"><div style="width:62%;height:100%;background:#4f46e5;border-radius:3px;"></div></div><span style="color:#888;font-size:12px;">62%</span></div></div>
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><span>Direct</span><div style="display:flex;align-items:center;gap:8px;"><div style="width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;"><div style="width:22%;height:100%;background:#818cf8;border-radius:3px;"></div></div><span style="color:#888;font-size:12px;">22%</span></div></div>
+          <div style="display:flex;justify-content:space-between;align-items:center;"><span>Social</span><div style="display:flex;align-items:center;gap:8px;"><div style="width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;"><div style="width:16%;height:100%;background:#c4b5fd;border-radius:3px;"></div></div><span style="color:#888;font-size:12px;">16%</span></div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

data/hard/3.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Docs</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#1e293b;display:flex;flex-direction:column;min-height:100vh;">
+  <nav style="border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10;">
+    <div style="display:flex;align-items:center;gap:32px;">
+      <span style="font-weight:700;font-size:17px;color:#4f46e5;">Docs</span>
+      <div style="display:flex;gap:20px;font-size:14px;color:#64748b;">
+        <a href="#" style="color:#4f46e5;text-decoration:none;font-weight:500;">Guide</a>
+        <a href="#" style="color:#64748b;text-decoration:none;">API Reference</a>
+        <a href="#" style="color:#64748b;text-decoration:none;">Examples</a>
+      </div>
+    </div>
+    <div style="background:#f1f5f9;border-radius:6px;padding:7px 14px;font-size:13px;color:#94a3b8;width:200px;">🔍 Search docs...</div>
+  </nav>
+  <div style="display:flex;flex:1;max-width:1100px;margin:0 auto;padding:32px 20px;gap:40px;width:100%;box-sizing:border-box;">
+    <aside style="width:200px;flex-shrink:0;">
+      <p style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;">Getting Started</p>
+      <nav style="font-size:14px;margin-bottom:24px;">
+        <a style="display:block;padding:5px 0;color:#4f46e5;font-weight:600;text-decoration:none;">Introduction</a>
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">Installation</a>
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">Quick Start</a>
+      </nav>
+      <p style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;">Core Concepts</p>
+      <nav style="font-size:14px;margin-bottom:24px;">
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">Environments</a>
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">Actions & Obs</a>
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">Rewards</a>
+      </nav>
+      <p style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;">API</p>
+      <nav style="font-size:14px;">
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">POST /reset</a>
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">POST /step</a>
+        <a style="display:block;padding:5px 0;color:#64748b;text-decoration:none;">GET /state</a>
+      </nav>
+    </aside>
+    <main style="flex:1;min-width:0;">
+      <div style="display:flex;gap:8px;font-size:12px;color:#94a3b8;margin-bottom:24px;">
+        <span>Docs</span><span>›</span><span>Getting Started</span><span>›</span><span style="color:#4f46e5;">Introduction</span>
+      </div>
+      <h1 style="font-size:30px;margin:0 0 12px;">Introduction</h1>
+      <p style="color:#64748b;font-size:15px;margin:0 0 28px;line-height:1.7;">OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>
+      <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-bottom:28px;">
+        <p style="margin:0 0 10px;font-size:13px;font-weight:600;color:#64748b;">INSTALLATION</p>
+        <code style="font-family:monospace;font-size:13px;color:#4f46e5;">pip install openenv-core</code>
+      </div>
+      <h2 style="font-size:20px;margin:0 0 14px;">How it works</h2>
+      <p style="color:#475569;line-height:1.8;margin-bottom:16px;">Each environment exposes three endpoints: <code style="background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;">/reset</code> to start an episode, <code style="background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;">/step</code> to submit an action, and <code style="background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;">/state</code> to inspect current state.</p>
+      <div style="display:flex;gap:12px;margin-top:32px;font-size:14px;">
+        <button style="padding:10px 20px;background:#4f46e5;color:#fff;border:none;border-radius:6px;cursor:pointer;">Next: Installation →</button>
+      </div>
+    </main>
+  </div>
+</body>
+</html>

data/hard/4.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Kanban</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f1f5f9;color:#1e293b;min-height:100vh;">
+  <nav style="background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;">
+    <div style="display:flex;align-items:center;gap:16px;">
+      <span style="font-weight:700;font-size:16px;">🗂 Sprint 24</span>
+      <span style="font-size:13px;color:#94a3b8;">Apr 1 – Apr 14</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;">
+      <div style="display:flex;"><div style="width:28px;height:28px;border-radius:50%;background:#4f46e5;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;">A</div><div style="width:28px;height:28px;border-radius:50%;background:#34d399;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;">M</div><div style="width:28px;height:28px;border-radius:50%;background:#fb923c;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;">P</div></div>
+      <button style="padding:7px 14px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">+ Add Task</button>
+    </div>
+  </nav>
+  <div style="display:flex;gap:16px;padding:24px;overflow-x:auto;">
+    <div style="min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;"><h3 style="margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;">Backlog</h3><span style="background:#94a3b8;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;">5</span></div>
+      <div style="background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);"><p style="margin:0 0 8px;font-size:13px;font-weight:500;">Redesign onboarding flow</p><div style="display:flex;justify-content:space-between;align-items:center;"><span style="background:#ede9fe;color:#7c3aed;font-size:11px;padding:2px 8px;border-radius:4px;">Design</span><span style="font-size:11px;color:#94a3b8;">P</span></div></div>
+      <div style="background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);"><p style="margin:0 0 8px;font-size:13px;font-weight:500;">Add dark mode support</p><div style="display:flex;justify-content:space-between;align-items:center;"><span style="background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;">Frontend</span><span style="font-size:11px;color:#94a3b8;">A</span></div></div>
+    </div>
+    <div style="min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;"><h3 style="margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;">In Progress</h3><span style="background:#f59e0b;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;">3</span></div>
+      <div style="background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;"><p style="margin:0 0 8px;font-size:13px;font-weight:500;">Implement OAuth 2.0 login</p><div style="display:flex;justify-content:space-between;align-items:center;"><span style="background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;">🔴 High</span><span style="font-size:11px;color:#94a3b8;">M</span></div></div>
+      <div style="background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;"><p style="margin:0 0 8px;font-size:13px;font-weight:500;">Write API documentation</p><div style="display:flex;justify-content:space-between;align-items:center;"><span style="background:#fef3c7;color:#d97706;font-size:11px;padding:2px 8px;border-radius:4px;">Docs</span><span style="font-size:11px;color:#94a3b8;">A</span></div></div>
+    </div>
+    <div style="min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;"><h3 style="margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;">Review</h3><span style="background:#6366f1;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;">2</span></div>
+      <div style="background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);"><p style="margin:0 0 8px;font-size:13px;font-weight:500;">Fix payment webhook bug</p><div style="display:flex;justify-content:space-between;align-items:center;"><span style="background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;">🔴 Critical</span><span style="font-size:11px;color:#94a3b8;">P</span></div></div>
+    </div>
+    <div style="min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;"><h3 style="margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;">Done</h3><span style="background:#16a34a;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;">8</span></div>
+      <div style="background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;"><p style="margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;">Setup CI/CD pipeline</p><div style="display:flex;justify-content:space-between;align-items:center;"><span style="background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;">DevOps</span><span style="font-size:11px;color:#94a3b8;">M</span></div></div>
+      <div style="background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;"><p style="margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;">Database schema migration</p><div style="display:flex;justify-content:space-between;align-items:center;"><span style="background:#f1f5f9;color:#64748b;font-size:11px;padding:2px 8px;border-radius:4px;">Backend</span><span style="font-size:11px;color:#94a3b8;">A</span></div></div>
+    </div>
+  </div>
+</body>
+</html>

data/medium/0.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>SaaS Landing</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#111;">
+  <nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:1px solid #f0f0f0;">
+    <span style="font-size:20px;font-weight:700;color:#4f46e5;">Streamline</span>
+    <div style="display:flex;gap:28px;font-size:14px;color:#555;">
+      <a href="#" style="text-decoration:none;color:#555;">Features</a>
+      <a href="#" style="text-decoration:none;color:#555;">Pricing</a>
+      <a href="#" style="text-decoration:none;color:#555;">Docs</a>
+    </div>
+    <button style="padding:9px 20px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;">Get Started</button>
+  </nav>
+  <div style="text-align:center;padding:80px 20px 60px;background:linear-gradient(135deg,#f0f0ff 0%,#fff 100%);">
+    <span style="background:#ede9fe;color:#4f46e5;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;letter-spacing:.05em;">NOW IN BETA</span>
+    <h1 style="font-size:48px;font-weight:800;margin:20px 0 16px;line-height:1.2;">Ship faster,<br>break nothing.</h1>
+    <p style="font-size:18px;color:#666;max-width:480px;margin:0 auto 32px;line-height:1.6;">The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>
+    <div style="display:flex;gap:12px;justify-content:center;">
+      <button style="padding:14px 28px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;">Start for free</button>
+      <button style="padding:14px 28px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;">Watch demo →</button>
+    </div>
+  </div>
+  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;padding:60px 20px;">
+    <div style="padding:28px;border:1px solid #f0f0f0;border-radius:12px;">
+      <div style="width:44px;height:44px;background:#ede9fe;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;">⚡</div>
+      <h3 style="margin:0 0 10px;font-size:17px;">Fast Deploys</h3>
+      <p style="margin:0;font-size:14px;color:#666;line-height:1.6;">Push to production in under 30 seconds with zero downtime.</p>
+    </div>
+    <div style="padding:28px;border:1px solid #f0f0f0;border-radius:12px;">
+      <div style="width:44px;height:44px;background:#dcfce7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;">🔒</div>
+      <h3 style="margin:0 0 10px;font-size:17px;">Secure by Default</h3>
+      <p style="margin:0;font-size:14px;color:#666;line-height:1.6;">SOC2 compliant. Secrets management and audit logs built in.</p>
+    </div>
+    <div style="padding:28px;border:1px solid #f0f0f0;border-radius:12px;">
+      <div style="width:44px;height:44px;background:#fef3c7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;">📊</div>
+      <h3 style="margin:0 0 10px;font-size:17px;">Live Monitoring</h3>
+      <p style="margin:0;font-size:14px;color:#666;line-height:1.6;">Real-time metrics, error tracking, and alerting out of the box.</p>
+    </div>
+  </div>
+</body>
+</html>

data/medium/1.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Pricing</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f9fafb;color:#111;padding:60px 20px;">
+  <h1 style="text-align:center;font-size:36px;margin:0 0 12px;">Simple, transparent pricing</h1>
+  <p style="text-align:center;color:#666;font-size:16px;margin:0 0 48px;">Start free. Scale as you grow.</p>
+  <div style="display:flex;gap:24px;max-width:900px;margin:0 auto;align-items:flex-start;">
+    <div style="flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;">
+      <h2 style="font-size:18px;margin:0 0 8px;">Hobby</h2>
+      <p style="font-size:13px;color:#888;margin:0 0 20px;">For personal projects</p>
+      <p style="font-size:36px;font-weight:700;margin:0 0 24px;">$0<span style="font-size:14px;font-weight:400;color:#888;">/mo</span></p>
+      <ul style="list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;">
+        <li>✓ 3 projects</li><li>✓ 1 GB storage</li><li>✓ Community support</li>
+      </ul>
+      <button style="width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;">Get started</button>
+    </div>
+    <div style="flex:1;background:#4f46e5;border-radius:12px;padding:32px;color:#fff;position:relative;">
+      <span style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;">MOST POPULAR</span>
+      <h2 style="font-size:18px;margin:0 0 8px;">Pro</h2>
+      <p style="font-size:13px;color:#c7d2fe;margin:0 0 20px;">For growing teams</p>
+      <p style="font-size:36px;font-weight:700;margin:0 0 24px;">$29<span style="font-size:14px;font-weight:400;color:#c7d2fe;">/mo</span></p>
+      <ul style="list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#e0e7ff;line-height:2;">
+        <li>✓ Unlimited projects</li><li>✓ 50 GB storage</li><li>✓ Priority support</li><li>✓ Team collaboration</li>
+      </ul>
+      <button style="width:100%;padding:12px;background:#fff;color:#4f46e5;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;">Start free trial</button>
+    </div>
+    <div style="flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;">
+      <h2 style="font-size:18px;margin:0 0 8px;">Enterprise</h2>
+      <p style="font-size:13px;color:#888;margin:0 0 20px;">For large organisations</p>
+      <p style="font-size:36px;font-weight:700;margin:0 0 24px;">Custom</p>
+      <ul style="list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;">
+        <li>✓ Unlimited everything</li><li>✓ SSO & SAML</li><li>✓ SLA guarantee</li><li>✓ Dedicated support</li>
+      </ul>
+      <button style="width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;">Contact sales</button>
+    </div>
+  </div>
+</body>
+</html>

data/medium/2.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Team</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#111;padding:60px 20px;">
+  <h1 style="text-align:center;font-size:34px;margin:0 0 12px;">Meet the Team</h1>
+  <p style="text-align:center;color:#888;margin:0 0 48px;">The people building the future of development tooling.</p>
+  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:0 auto;">
+    <div style="text-align:center;">
+      <div style="width:80px;height:80px;border-radius:50%;background:#818cf8;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;">S</div>
+      <p style="font-weight:600;margin:0 0 4px;">Sarah Chen</p>
+      <p style="font-size:13px;color:#888;margin:0 0 10px;">CEO & Co-founder</p>
+      <p style="font-size:13px;color:#555;line-height:1.5;">Previously at Google Brain. PhD in ML from Stanford.</p>
+    </div>
+    <div style="text-align:center;">
+      <div style="width:80px;height:80px;border-radius:50%;background:#34d399;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;">M</div>
+      <p style="font-weight:600;margin:0 0 4px;">Marcus Lee</p>
+      <p style="font-size:13px;color:#888;margin:0 0 10px;">CTO & Co-founder</p>
+      <p style="font-size:13px;color:#555;line-height:1.5;">Built infra at Stripe. Open source contributor.</p>
+    </div>
+    <div style="text-align:center;">
+      <div style="width:80px;height:80px;border-radius:50%;background:#fb923c;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;">P</div>
+      <p style="font-weight:600;margin:0 0 4px;">Priya Nair</p>
+      <p style="font-size:13px;color:#888;margin:0 0 10px;">Head of Design</p>
+      <p style="font-size:13px;color:#555;line-height:1.5;">Design systems expert. Ex-Figma and Notion.</p>
+    </div>
+    <div style="text-align:center;">
+      <div style="width:80px;height:80px;border-radius:50%;background:#f472b6;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;">J</div>
+      <p style="font-weight:600;margin:0 0 4px;">Jake Torres</p>
+      <p style="font-size:13px;color:#888;margin:0 0 10px;">Lead Engineer</p>
+      <p style="font-size:13px;color:#555;line-height:1.5;">Full-stack dev. Rust and TypeScript enthusiast.</p>
+    </div>
+  </div>
+</body>
+</html>

data/medium/3.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Article</title></head>
+<body style="margin:0;font-family:sans-serif;background:#fff;color:#111;">
+  <nav style="display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid #eee;">
+    <span style="font-weight:700;font-size:18px;">DevDigest</span>
+    <div style="display:flex;gap:24px;font-size:14px;color:#555;">
+      <a href="#" style="text-decoration:none;color:#555;">Articles</a>
+      <a href="#" style="text-decoration:none;color:#555;">Newsletter</a>
+      <a href="#" style="text-decoration:none;color:#555;">Jobs</a>
+    </div>
+  </nav>
+  <div style="display:flex;max-width:1000px;margin:40px auto;padding:0 20px;gap:48px;">
+    <main style="flex:2;">
+      <span style="background:#fee2e2;color:#dc2626;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;">RUST</span>
+      <h1 style="font-size:28px;line-height:1.3;margin:12px 0 20px;">Why Rust is Winning the Systems Programming War</h1>
+      <p style="font-size:14px;color:#888;margin-bottom:24px;">By <strong style="color:#555;">Alex Kim</strong> · 8 min read · Apr 8, 2026</p>
+      <p style="line-height:1.8;color:#333;margin-bottom:18px;">Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>
+      <p style="line-height:1.8;color:#333;margin-bottom:18px;">The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend — it's a fundamental shift in how critical infrastructure is built.</p>
+      <h2 style="font-size:20px;margin:32px 0 12px;">The Ownership Model</h2>
+      <p style="line-height:1.8;color:#333;">Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>
+    </main>
+    <aside style="flex:1;">
+      <div style="background:#f9fafb;border-radius:10px;padding:20px;margin-bottom:24px;">
+        <h3 style="margin:0 0 14px;font-size:15px;">Trending</h3>
+        <div style="font-size:13px;color:#555;line-height:2.2;border-top:1px solid #eee;padding-top:12px;">
+          <p style="margin:0;">1. Go vs Rust in 2026</p>
+          <p style="margin:0;">2. The React Server Components Guide</p>
+          <p style="margin:0;">3. Postgres vs SQLite at scale</p>
+          <p style="margin:0;">4. Building your own LLM</p>
+        </div>
+      </div>
+      <div style="background:#ede9fe;border-radius:10px;padding:20px;">
+        <h3 style="margin:0 0 8px;font-size:15px;color:#4f46e5;">Newsletter</h3>
+        <p style="font-size:13px;color:#555;margin:0 0 12px;">Weekly digest of the best dev articles.</p>
+        <input placeholder="your@email.com" style="width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid #c4b5fd;border-radius:6px;font-size:13px;margin-bottom:8px;">
+        <button style="width:100%;padding:8px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">Subscribe</button>
+      </div>
+    </aside>
+  </div>
+</body>
+</html>

data/medium/4.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Settings</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f9fafb;color:#111;display:flex;min-height:100vh;">
+  <aside style="width:220px;background:#fff;border-right:1px solid #e5e7eb;padding:24px 0;">
+    <div style="padding:0 20px 24px;border-bottom:1px solid #e5e7eb;">
+      <div style="display:flex;align-items:center;gap:10px;">
+        <div style="width:36px;height:36px;border-radius:50%;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;">A</div>
+        <div><p style="margin:0;font-size:13px;font-weight:600;">Amal Joe</p><p style="margin:0;font-size:11px;color:#888;">Pro Plan</p></div>
+      </div>
+    </div>
+    <nav style="padding:12px 0;">
+      <a style="display:block;padding:10px 20px;font-size:14px;color:#4f46e5;background:#ede9fe;font-weight:600;text-decoration:none;">Profile</a>
+      <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Security</a>
+      <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Notifications</a>
+      <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Billing</a>
+      <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Integrations</a>
+    </nav>
+  </aside>
+  <main style="flex:1;padding:40px;">
+    <h1 style="font-size:22px;margin:0 0 6px;">Profile Settings</h1>
+    <p style="color:#888;font-size:14px;margin:0 0 32px;">Manage your personal information.</p>
+    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:28px;max-width:560px;">
+      <div style="display:flex;gap:16px;margin-bottom:24px;">
+        <div style="flex:1;"><label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">First Name</label><input value="Amal" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;"></div>
+        <div style="flex:1;"><label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">Last Name</label><input value="Joe" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;"></div>
+      </div>
+      <label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">Email</label>
+      <input value="amaljoe88@gmail.com" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;">
+      <label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">Bio</label>
+      <textarea rows="3" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;resize:vertical;">Building AI tools for developers.</textarea>
+      <button style="padding:10px 24px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;">Save Changes</button>
+    </div>
+  </main>
+</body>
+</html>

data/tests/0/expected_scores.json

@@ -0,0 +1,9 @@
+{
+  "perfect": 0.9773,
+  "minor_diff": 0.8837,
+  "bad_colors": 0.7253,
+  "half_styled": 0.4663,
+  "no_layout": 0.5222,
+  "no_style": 0.4424,
+  "blank": 0.0
+}

data/tests/0/meta.json

@@ -0,0 +1,5 @@
+{
+  "source": "easy/0",
+  "difficulty": "easy",
+  "idx": 0
+}

data/tests/0/reference.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f0f2f5;display:flex;align-items:center;justify-content:center;min-height:100vh;">
+  <div style="background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;">
+    <h2 style="margin:0 0 24px;text-align:center;color:#1a1a1a;">Sign In</h2>
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Email</label>
+    <input type="email" placeholder="you@example.com" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:16px;">
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Password</label>
+    <input type="password" placeholder="••••••••" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;">
+    <button style="width:100%;padding:12px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;">Sign In</button>
+    <p style="text-align:center;margin-top:16px;font-size:13px;color:#888;">Don't have an account? <a href="#" style="color:#4f46e5;">Sign up</a></p>
+  </div>
+</body>
+</html>

data/tests/0/variants/bad_colors.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body style="margin:0;font-family:sans-serif;background:#0f0d0a;display:flex;align-items:center;justify-content:center;min-height:100vh;">
+  <div style="background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;">
+    <h2 style="margin:0 0 24px;text-align:center;color:#e5e5e5;">Sign In</h2>
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Email</label>
+    <input type="email" placeholder="you@example.com" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:16px;">
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Password</label>
+    <input type="password" placeholder="••••••••" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;">
+    <button style="width:100%;padding:12px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;">Sign In</button>
+    <p style="text-align:center;margin-top:16px;font-size:13px;color:#888;">Don't have an account? <a href="#" style="color:#b0b91a;">Sign up</a></p>
+  </div>
+</body>
+</html>

data/tests/0/variants/blank.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title>Page</title></head><body style="background:#fff;"></body></html>

data/tests/0/variants/half_styled.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body style="margin:0; background:#f0f2f5; align-items:center; min-height:100vh">
+  <div style="background:#fff; border-radius:8px; width:320px">
+    <h2 style="margin:0 0 24px; color:#1a1a1a">Sign In</h2>
+    <label style="display:block; font-size:14px">Email</label>
+    <input type="email" placeholder="you@example.com" style="width:100%; padding:10px 12px; border-radius:6px; margin-bottom:16px">
+    <label style="display:block; font-size:14px">Password</label>
+    <input type="password" placeholder="••••••••" style="width:100%; padding:10px 12px; border-radius:6px; margin-bottom:24px">
+    <button style="width:100%; background:#4f46e5; border:none; font-size:15px">Sign In</button>
+    <p style="text-align:center; font-size:13px">Don't have an account? <a href="#" style="color:#4f46e5">Sign up</a></p>
+  </div>
+</body>
+</html>

data/tests/0/variants/minor_diff.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body style="margin:0;font-family:sans-serif;background:#888888;display:flex;align-items:center;justify-content:center;min-height:100vh;">
+  <div style="background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;">
+    <h2 style="margin:0 0 24px;text-align:center;color:#1a1a1a;">Sign In</h2>
+    <label style="display:block;margin-bottom:6px;font-size:10px;color:#555;">Email</label>
+    <input type="email" placeholder="you@example.com" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:10px;margin-bottom:16px;">
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Password</label>
+    <input type="password" placeholder="••••••••" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;">
+    <button style="width:100%;padding:12px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;">Sign In</button>
+    <p style="text-align:center;margin-top:16px;font-size:13px;color:#888;">Don't have an account? <a href="#" style="color:#4f46e5;">Sign up</a></p>
+  </div>
+</body>
+</html>

data/tests/0/variants/no_layout.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body style="font-family:sans-serif; background:#f0f2f5">
+  <div style="background:#fff">
+    <h2 style="text-align:center; color:#1a1a1a">Sign In</h2>
+    <label style="font-size:14px; color:#555">Email</label>
+    <input type="email" placeholder="you@example.com" style="border:1px solid #ddd; font-size:14px">
+    <label style="font-size:14px; color:#555">Password</label>
+    <input type="password" placeholder="••••••••" style="border:1px solid #ddd; font-size:14px">
+    <button style="background:#4f46e5; color:#fff; border:none; font-size:15px; cursor:pointer">Sign In</button>
+    <p style="text-align:center; font-size:13px; color:#888">Don't have an account? <a href="#" style="color:#4f46e5">Sign up</a></p>
+  </div>
+</body>
+</html>

data/tests/0/variants/no_style.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body>
+  <div>
+    <h2>Sign In</h2>
+    <label>Email</label>
+    <input type="email" placeholder="you@example.com">
+    <label>Password</label>
+    <input type="password" placeholder="••••••••">
+    <button>Sign In</button>
+    <p>Don't have an account? <a href="#">Sign up</a></p>
+  </div>
+</body>
+</html>

data/tests/0/variants/perfect.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Login</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f0f2f5;display:flex;align-items:center;justify-content:center;min-height:100vh;">
+  <div style="background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;">
+    <h2 style="margin:0 0 24px;text-align:center;color:#1a1a1a;">Sign In</h2>
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Email</label>
+    <input type="email" placeholder="you@example.com" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:16px;">
+    <label style="display:block;margin-bottom:6px;font-size:14px;color:#555;">Password</label>
+    <input type="password" placeholder="••••••••" style="width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;">
+    <button style="width:100%;padding:12px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;">Sign In</button>
+    <p style="text-align:center;margin-top:16px;font-size:13px;color:#888;">Don't have an account? <a href="#" style="color:#4f46e5;">Sign up</a></p>
+  </div>
+</body>
+</html>

data/tests/1/expected_scores.json

@@ -0,0 +1,9 @@
+{
+  "perfect": 0.9773,
+  "minor_diff": 0.7689,
+  "bad_colors": 0.9176,
+  "half_styled": 0.7297,
+  "no_layout": 0.5567,
+  "no_style": 0.543,
+  "blank": 0.0
+}

data/tests/1/meta.json

@@ -0,0 +1,5 @@
+{
+  "source": "easy/1",
+  "difficulty": "easy",
+  "idx": 1
+}

data/tests/1/reference.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body style="margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;">
+  <p style="font-size:13px;color:#888;margin-bottom:8px;">TECHNOLOGY · 5 MIN READ</p>
+  <h1 style="font-size:32px;line-height:1.3;margin:0 0 16px;">The Rise of AI-Assisted Development</h1>
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;">
+    <div style="width:40px;height:40px;border-radius:50%;background:#4f46e5;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;">AJ</div>
+    <div>
+      <p style="margin:0;font-size:14px;font-weight:bold;color:#333;">Amal Joe</p>
+      <p style="margin:0;font-size:13px;color:#888;">April 8, 2026</p>
+    </div>
+  </div>
+  <div style="background:#f8f8f8;border-left:4px solid #4f46e5;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;">
+    <p style="margin:0;font-style:italic;color:#555;">"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p style="line-height:1.8;margin-bottom:20px;">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p style="line-height:1.8;">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/tests/1/variants/bad_colors.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body style="margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;">
+  <p style="font-size:13px;color:#888;margin-bottom:8px;">TECHNOLOGY · 5 MIN READ</p>
+  <h1 style="font-size:32px;line-height:1.3;margin:0 0 16px;">The Rise of AI-Assisted Development</h1>
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;">
+    <div style="width:40px;height:40px;border-radius:50%;background:#b0b91a;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;">AJ</div>
+    <div>
+      <p style="margin:0;font-size:14px;font-weight:bold;color:#333;">Amal Joe</p>
+      <p style="margin:0;font-size:13px;color:#888;">April 8, 2026</p>
+    </div>
+  </div>
+  <div style="background:#070707;border-left:4px solid #b0b91a;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;">
+    <p style="margin:0;font-style:italic;color:#555;">"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p style="line-height:1.8;margin-bottom:20px;">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p style="line-height:1.8;">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/tests/1/variants/blank.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title>Page</title></head><body style="background:#fff;"></body></html>

data/tests/1/variants/half_styled.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body style="margin:0; background:#fff; max-width:680px; padding:40px 20px">
+  <p style="font-size:13px; margin-bottom:8px">TECHNOLOGY · 5 MIN READ</p>
+  <h1 style="font-size:32px; margin:0 0 16px">The Rise of AI-Assisted Development</h1>
+  <div style="display:flex; gap:12px">
+    <div style="width:40px; border-radius:50%; display:flex; justify-content:center; font-weight:bold">AJ</div>
+    <div>
+      <p style="margin:0; font-weight:bold">Amal Joe</p>
+      <p style="margin:0; color:#888">April 8, 2026</p>
+    </div>
+  </div>
+  <div style="background:#f8f8f8; padding:16px 20px; border-radius:0 6px 6px 0">
+    <p style="margin:0; color:#555">"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p style="line-height:1.8">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p style="line-height:1.8">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/tests/1/variants/minor_diff.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body style="margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;">
+  <p style="font-size:9px;color:#888;margin-bottom:8px;">TECHNOLOGY · 5 MIN READ</p>
+  <h1 style="font-size:28px;line-height:1.3;margin:0 0 16px;">The Rise of AI-Assisted Development</h1>
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;">
+    <div style="width:40px;height:40px;border-radius:50%;background:#888888;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;">AJ</div>
+    <div>
+      <p style="margin:0;font-size:14px;font-weight:bold;color:#333;">Amal Joe</p>
+      <p style="margin:0;font-size:13px;color:#888;">April 8, 2026</p>
+    </div>
+  </div>
+  <div style="background:#f8f8f8;border-left:4px solid #4f46e5;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;">
+    <p style="margin:0;font-style:italic;color:#555;">"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p style="line-height:1.8;margin-bottom:20px;">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p style="line-height:1.8;">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/tests/1/variants/no_layout.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body style="font-family:Georgia,serif; background:#fff; color:#222; max-width:680px">
+  <p style="font-size:13px; color:#888">TECHNOLOGY · 5 MIN READ</p>
+  <h1 style="font-size:32px; line-height:1.3">The Rise of AI-Assisted Development</h1>
+  <div style="gap:12px">
+    <div style="background:#4f46e5; color:#fff; font-weight:bold">AJ</div>
+    <div>
+      <p style="font-size:14px; font-weight:bold; color:#333">Amal Joe</p>
+      <p style="font-size:13px; color:#888">April 8, 2026</p>
+    </div>
+  </div>
+  <div style="background:#f8f8f8; border-left:4px solid #4f46e5">
+    <p style="font-style:italic; color:#555">"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p style="line-height:1.8">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p style="line-height:1.8">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/tests/1/variants/no_style.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body>
+  <p>TECHNOLOGY · 5 MIN READ</p>
+  <h1>The Rise of AI-Assisted Development</h1>
+  <div>
+    <div>AJ</div>
+    <div>
+      <p>Amal Joe</p>
+      <p>April 8, 2026</p>
+    </div>
+  </div>
+  <div>
+    <p>"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p>Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p>The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/tests/1/variants/perfect.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Blog Post</title></head>
+<body style="margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;">
+  <p style="font-size:13px;color:#888;margin-bottom:8px;">TECHNOLOGY · 5 MIN READ</p>
+  <h1 style="font-size:32px;line-height:1.3;margin:0 0 16px;">The Rise of AI-Assisted Development</h1>
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;">
+    <div style="width:40px;height:40px;border-radius:50%;background:#4f46e5;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;">AJ</div>
+    <div>
+      <p style="margin:0;font-size:14px;font-weight:bold;color:#333;">Amal Joe</p>
+      <p style="margin:0;font-size:13px;color:#888;">April 8, 2026</p>
+    </div>
+  </div>
+  <div style="background:#f8f8f8;border-left:4px solid #4f46e5;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;">
+    <p style="margin:0;font-style:italic;color:#555;">"AI is not replacing developers — it's giving them superpowers."</p>
+  </div>
+  <p style="line-height:1.8;margin-bottom:20px;">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>
+  <p style="line-height:1.8;">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>
+</body>
+</html>

data/tests/10/expected_scores.json

@@ -0,0 +1,9 @@
+{
+  "perfect": 0.9773,
+  "minor_diff": 0.8818,
+  "bad_colors": 0.6161,
+  "half_styled": 0.5619,
+  "no_layout": 0.4915,
+  "no_style": 0.2505,
+  "blank": 0.0
+}

data/tests/10/meta.json

@@ -0,0 +1,5 @@
+{
+  "source": "hard/0",
+  "difficulty": "hard",
+  "idx": 0
+}

data/tests/10/reference.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Dashboard</title></head>
+<body style="margin:0;font-family:sans-serif;background:#0f172a;color:#e2e8f0;display:flex;min-height:100vh;">
+  <aside style="width:200px;background:#1e293b;padding:24px 0;flex-shrink:0;">
+    <div style="padding:0 20px 24px;font-size:18px;font-weight:700;color:#fff;border-bottom:1px solid #334155;">⚡ Pulsar</div>
+    <nav style="padding:16px 0;">
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#fff;background:#334155;text-decoration:none;margin-bottom:2px;">📊 Overview</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">🚀 Deployments</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">📁 Projects</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">👥 Team</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;">⚙️ Settings</a>
+    </nav>
+  </aside>
+  <main style="flex:1;padding:32px;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;">
+      <h1 style="margin:0;font-size:22px;">Overview</h1>
+      <button style="padding:9px 18px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">+ New Project</button>
+    </div>
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;">
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">DEPLOYMENTS</p><p style="margin:0;font-size:28px;font-weight:700;">1,284</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 12% this week</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">SUCCESS RATE</p><p style="margin:0;font-size:28px;font-weight:700;">99.2%</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 0.3% this week</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">AVG BUILD TIME</p><p style="margin:0;font-size:28px;font-weight:700;">28s</p><p style="margin:4px 0 0;font-size:12px;color:#fb923c;">↓ 3s slower</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">ACTIVE PROJECTS</p><p style="margin:0;font-size:28px;font-weight:700;">47</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 3 new</p></div>
+    </div>
+    <div style="background:#1e293b;border-radius:10px;padding:24px;">
+      <h2 style="margin:0 0 20px;font-size:16px;">Recent Deployments</h2>
+      <table style="width:100%;border-collapse:collapse;font-size:13px;">
+        <thead><tr style="color:#64748b;border-bottom:1px solid #334155;"><th style="text-align:left;padding:8px 0;">Project</th><th style="text-align:left;padding:8px 0;">Branch</th><th style="text-align:left;padding:8px 0;">Status</th><th style="text-align:left;padding:8px 0;">Time</th></tr></thead>
+        <tbody>
+          <tr style="border-bottom:1px solid #1e293b;"><td style="padding:12px 0;color:#e2e8f0;">api-service</td><td style="padding:12px 0;color:#94a3b8;">main</td><td style="padding:12px 0;"><span style="background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:20px;font-size:11px;">✓ Success</span></td><td style="padding:12px 0;color:#94a3b8;">2 min ago</td></tr>
+          <tr style="border-bottom:1px solid #1e293b;"><td style="padding:12px 0;color:#e2e8f0;">web-frontend</td><td style="padding:12px 0;color:#94a3b8;">feat/auth</td><td style="padding:12px 0;"><span style="background:#fef3c7;color:#d97706;padding:3px 10px;border-radius:20px;font-size:11px;">⟳ Building</span></td><td style="padding:12px 0;color:#94a3b8;">5 min ago</td></tr>
+          <tr><td style="padding:12px 0;color:#e2e8f0;">ml-pipeline</td><td style="padding:12px 0;color:#94a3b8;">main</td><td style="padding:12px 0;"><span style="background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:20px;font-size:11px;">✗ Failed</span></td><td style="padding:12px 0;color:#94a3b8;">18 min ago</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</body>
+</html>

data/tests/10/variants/bad_colors.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Dashboard</title></head>
+<body style="margin:0;font-family:sans-serif;background:#f0e8d5;color:#1d170f;display:flex;min-height:100vh;">
+  <aside style="width:200px;background:#e1d6c4;padding:24px 0;flex-shrink:0;">
+    <div style="padding:0 20px 24px;font-size:18px;font-weight:700;color:#fff;border-bottom:1px solid #ccbeaa;">⚡ Pulsar</div>
+    <nav style="padding:16px 0;">
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#fff;background:#ccbeaa;text-decoration:none;margin-bottom:2px;">📊 Overview</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;margin-bottom:2px;">🚀 Deployments</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;margin-bottom:2px;">📁 Projects</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;margin-bottom:2px;">👥 Team</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;">⚙️ Settings</a>
+    </nav>
+  </aside>
+  <main style="flex:1;padding:32px;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;">
+      <h1 style="margin:0;font-size:22px;">Overview</h1>
+      <button style="padding:9px 18px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">+ New Project</button>
+    </div>
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;">
+      <div style="background:#e1d6c4;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#6b5c47;">DEPLOYMENTS</p><p style="margin:0;font-size:28px;font-weight:700;">1,284</p><p style="margin:4px 0 0;font-size:12px;color:#cb2c66;">↑ 12% this week</p></div>
+      <div style="background:#e1d6c4;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#6b5c47;">SUCCESS RATE</p><p style="margin:0;font-size:28px;font-weight:700;">99.2%</p><p style="margin:4px 0 0;font-size:12px;color:#cb2c66;">↑ 0.3% this week</p></div>
+      <div style="background:#e1d6c4;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#6b5c47;">AVG BUILD TIME</p><p style="margin:0;font-size:28px;font-weight:700;">28s</p><p style="margin:4px 0 0;font-size:12px;color:#046dc3;">↓ 3s slower</p></div>
+      <div style="background:#e1d6c4;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#6b5c47;">ACTIVE PROJECTS</p><p style="margin:0;font-size:28px;font-weight:700;">47</p><p style="margin:4px 0 0;font-size:12px;color:#cb2c66;">↑ 3 new</p></div>
+    </div>
+    <div style="background:#e1d6c4;border-radius:10px;padding:24px;">
+      <h2 style="margin:0 0 20px;font-size:16px;">Recent Deployments</h2>
+      <table style="width:100%;border-collapse:collapse;font-size:13px;">
+        <thead><tr style="color:#9b8b74;border-bottom:1px solid #ccbeaa;"><th style="text-align:left;padding:8px 0;">Project</th><th style="text-align:left;padding:8px 0;">Branch</th><th style="text-align:left;padding:8px 0;">Status</th><th style="text-align:left;padding:8px 0;">Time</th></tr></thead>
+        <tbody>
+          <tr style="border-bottom:1px solid #e1d6c4;"><td style="padding:12px 0;color:#1d170f;">api-service</td><td style="padding:12px 0;color:#6b5c47;">main</td><td style="padding:12px 0;"><span style="background:#230318;color:#e95cb5;padding:3px 10px;border-radius:20px;font-size:11px;">✓ Success</span></td><td style="padding:12px 0;color:#6b5c47;">2 min ago</td></tr>
+          <tr style="border-bottom:1px solid #e1d6c4;"><td style="padding:12px 0;color:#1d170f;">web-frontend</td><td style="padding:12px 0;color:#6b5c47;">feat/auth</td><td style="padding:12px 0;"><span style="background:#010c38;color:#2688f9;padding:3px 10px;border-radius:20px;font-size:11px;">⟳ Building</span></td><td style="padding:12px 0;color:#6b5c47;">5 min ago</td></tr>
+          <tr><td style="padding:12px 0;color:#1d170f;">ml-pipeline</td><td style="padding:12px 0;color:#6b5c47;">main</td><td style="padding:12px 0;"><span style="background:#011d1d;color:#23d9d9;padding:3px 10px;border-radius:20px;font-size:11px;">✗ Failed</span></td><td style="padding:12px 0;color:#6b5c47;">18 min ago</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</body>
+</html>

data/tests/10/variants/blank.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title>Page</title></head><body style="background:#fff;"></body></html>

data/tests/10/variants/half_styled.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Dashboard</title></head>
+<body style="margin:0; background:#0f172a; display:flex">
+  <aside style="width:200px; padding:24px 0">
+    <div style="padding:0 20px 24px; font-weight:700; border-bottom:1px solid #334155">⚡ Pulsar</div>
+    <nav style="padding:16px 0">
+      <a style="display:flex; gap:10px; font-size:13px; background:#334155; margin-bottom:2px">📊 Overview</a>
+      <a style="display:flex; gap:10px; font-size:13px; text-decoration:none">🚀 Deployments</a>
+      <a style="display:flex; gap:10px; font-size:13px; text-decoration:none">📁 Projects</a>
+      <a style="display:flex; gap:10px; font-size:13px; text-decoration:none">👥 Team</a>
+      <a style="display:flex; gap:10px; font-size:13px; text-decoration:none">⚙️ Settings</a>
+    </nav>
+  </aside>
+  <main style="flex:1">
+    <div style="display:flex; align-items:center">
+      <h1 style="margin:0">Overview</h1>
+      <button style="padding:9px 18px; color:#fff; border-radius:6px; cursor:pointer">+ New Project</button>
+    </div>
+    <div style="display:grid; gap:16px">
+      <div style="background:#1e293b; padding:20px"><p style="margin:0 0 8px; color:#94a3b8">DEPLOYMENTS</p><p style="margin:0; font-weight:700">1,284</p><p style="margin:4px 0 0; color:#34d399">↑ 12% this week</p></div>
+      <div style="background:#1e293b; padding:20px"><p style="margin:0 0 8px; color:#94a3b8">SUCCESS RATE</p><p style="margin:0; font-weight:700">99.2%</p><p style="margin:4px 0 0; color:#34d399">↑ 0.3% this week</p></div>
+      <div style="background:#1e293b; padding:20px"><p style="margin:0 0 8px; color:#94a3b8">AVG BUILD TIME</p><p style="margin:0; font-weight:700">28s</p><p style="margin:4px 0 0; color:#fb923c">↓ 3s slower</p></div>
+      <div style="background:#1e293b; padding:20px"><p style="margin:0 0 8px; color:#94a3b8">ACTIVE PROJECTS</p><p style="margin:0; font-weight:700">47</p><p style="margin:4px 0 0; color:#34d399">↑ 3 new</p></div>
+    </div>
+    <div style="background:#1e293b; padding:24px">
+      <h2 style="margin:0 0 20px">Recent Deployments</h2>
+      <table style="width:100%; font-size:13px">
+        <thead><tr style="color:#64748b"><th style="text-align:left">Project</th><th style="text-align:left">Branch</th><th style="text-align:left">Status</th><th style="text-align:left">Time</th></tr></thead>
+        <tbody>
+          <tr style="border-bottom:1px solid #1e293b"><td style="padding:12px 0">api-service</td><td style="padding:12px 0">main</td><td style="padding:12px 0"><span style="background:#dcfce7; padding:3px 10px; font-size:11px">✓ Success</span></td><td style="padding:12px 0">2 min ago</td></tr>
+          <tr style="border-bottom:1px solid #1e293b"><td style="padding:12px 0">web-frontend</td><td style="padding:12px 0">feat/auth</td><td style="padding:12px 0"><span style="background:#fef3c7; padding:3px 10px; font-size:11px">⟳ Building</span></td><td style="padding:12px 0">5 min ago</td></tr>
+          <tr><td style="padding:12px 0">ml-pipeline</td><td style="padding:12px 0">main</td><td style="padding:12px 0"><span style="background:#fee2e2; padding:3px 10px; font-size:11px">✗ Failed</span></td><td style="padding:12px 0">18 min ago</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</body>
+</html>

data/tests/10/variants/minor_diff.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Dashboard</title></head>
+<body style="margin:0;font-family:sans-serif;background:#888888;color:#e2e8f0;display:flex;min-height:100vh;">
+  <aside style="width:200px;background:#1e293b;padding:24px 0;flex-shrink:0;">
+    <div style="padding:0 20px 24px;font-size:14px;font-weight:700;color:#fff;border-bottom:1px solid #334155;">⚡ Pulsar</div>
+    <nav style="padding:16px 0;">
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:9px;color:#fff;background:#334155;text-decoration:none;margin-bottom:2px;">📊 Overview</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">🚀 Deployments</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">📁 Projects</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;">👥 Team</a>
+      <a style="display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;">⚙️ Settings</a>
+    </nav>
+  </aside>
+  <main style="flex:1;padding:32px;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;">
+      <h1 style="margin:0;font-size:22px;">Overview</h1>
+      <button style="padding:9px 18px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">+ New Project</button>
+    </div>
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;">
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">DEPLOYMENTS</p><p style="margin:0;font-size:28px;font-weight:700;">1,284</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 12% this week</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">SUCCESS RATE</p><p style="margin:0;font-size:28px;font-weight:700;">99.2%</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 0.3% this week</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">AVG BUILD TIME</p><p style="margin:0;font-size:28px;font-weight:700;">28s</p><p style="margin:4px 0 0;font-size:12px;color:#fb923c;">↓ 3s slower</p></div>
+      <div style="background:#1e293b;border-radius:10px;padding:20px;"><p style="margin:0 0 8px;font-size:12px;color:#94a3b8;">ACTIVE PROJECTS</p><p style="margin:0;font-size:28px;font-weight:700;">47</p><p style="margin:4px 0 0;font-size:12px;color:#34d399;">↑ 3 new</p></div>
+    </div>
+    <div style="background:#1e293b;border-radius:10px;padding:24px;">
+      <h2 style="margin:0 0 20px;font-size:16px;">Recent Deployments</h2>
+      <table style="width:100%;border-collapse:collapse;font-size:13px;">
+        <thead><tr style="color:#64748b;border-bottom:1px solid #334155;"><th style="text-align:left;padding:8px 0;">Project</th><th style="text-align:left;padding:8px 0;">Branch</th><th style="text-align:left;padding:8px 0;">Status</th><th style="text-align:left;padding:8px 0;">Time</th></tr></thead>
+        <tbody>
+          <tr style="border-bottom:1px solid #1e293b;"><td style="padding:12px 0;color:#e2e8f0;">api-service</td><td style="padding:12px 0;color:#94a3b8;">main</td><td style="padding:12px 0;"><span style="background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:20px;font-size:11px;">✓ Success</span></td><td style="padding:12px 0;color:#94a3b8;">2 min ago</td></tr>
+          <tr style="border-bottom:1px solid #1e293b;"><td style="padding:12px 0;color:#e2e8f0;">web-frontend</td><td style="padding:12px 0;color:#94a3b8;">feat/auth</td><td style="padding:12px 0;"><span style="background:#fef3c7;color:#d97706;padding:3px 10px;border-radius:20px;font-size:11px;">⟳ Building</span></td><td style="padding:12px 0;color:#94a3b8;">5 min ago</td></tr>
+          <tr><td style="padding:12px 0;color:#e2e8f0;">ml-pipeline</td><td style="padding:12px 0;color:#94a3b8;">main</td><td style="padding:12px 0;"><span style="background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:20px;font-size:11px;">✗ Failed</span></td><td style="padding:12px 0;color:#94a3b8;">18 min ago</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</body>
+</html>