diff --git a/web/package-lock.json b/web/package-lock.json
index 9764b07c..25f1ad69 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,7 +15,6 @@
         "@supabase/supabase-js": "^2.108.2",
         "@types/three": "^0.185.1",
         "@xyflow/react": "^12.11.2",
-        "clsx": "^2.1.1",
         "prism-react-renderer": "^2.4.1",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
@@ -36,9 +35,14 @@
         "@docusaurus/tsconfig": "3.10.1",
         "@docusaurus/types": "3.10.1",
         "@playwright/test": "^1.61.1",
+        "autoprefixer": "^10.5.4",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "gray-matter": "^4.0.3",
         "remark": "^15.0.1",
         "strip-markdown": "^6.0.0",
+        "tailwind-merge": "^3.6.0",
+        "tailwindcss": "^3.4.19",
         "typescript": "~5.6.2"
       },
       "engines": {
@@ -278,6 +282,19 @@
         "node": ">= 14.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -7115,6 +7132,13 @@
         "node": ">=14"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -7179,9 +7203,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.5.2",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.2.tgz",
-      "integrity": "sha512-rD5t5DwOjJdmSORcTq64j8MawTC+tbQ+HHqjR4NDumamy/ambn1UJrlKL+KdwujWxMkFjPM3pPHOEA9tl4767Q==",
+      "version": "10.5.4",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.4.tgz",
+      "integrity": "sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==",
       "funding": [
         {
           "type": "opencollective",
@@ -7198,8 +7222,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.28.4",
-        "caniuse-lite": "^1.0.30001799",
+        "browserslist": "^4.28.6",
+        "caniuse-lite": "^1.0.30001806",
         "fraction.js": "^5.3.4",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
@@ -7305,9 +7329,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.40",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.40.tgz",
-      "integrity": "sha512-BSSLZ9/Cjjv7Gtj5B68ZzXcXUg8iOf3fme+FCuh8rC/Go+Kmh8cox7M3A8dolou16s64QjLPOSdngh7GxXvkSw==",
+      "version": "2.10.43",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.43.tgz",
+      "integrity": "sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -7452,9 +7476,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz",
-      "integrity": "sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==",
+      "version": "4.28.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.6.tgz",
+      "integrity": "sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw==",
       "funding": [
         {
           "type": "opencollective",
@@ -7471,10 +7495,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.10.38",
-        "caniuse-lite": "^1.0.30001799",
-        "electron-to-chromium": "^1.5.376",
-        "node-releases": "^2.0.48",
+        "baseline-browser-mapping": "^2.10.42",
+        "caniuse-lite": "^1.0.30001803",
+        "electron-to-chromium": "^1.5.389",
+        "node-releases": "^2.0.51",
         "update-browserslist-db": "^1.2.3"
       },
       "bin": {
@@ -7628,6 +7652,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -7641,9 +7675,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001799",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
-      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
+      "version": "1.0.30001806",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz",
+      "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==",
       "funding": [
         {
           "type": "opencollective",
@@ -7821,6 +7855,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/classcat": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
@@ -9096,6 +9143,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -9108,6 +9162,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dns-packet": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@@ -9251,9 +9312,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.380",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.380.tgz",
-      "integrity": "sha512-W6d5AbuEoRayO447cqrg6lKJIlscgRnnxOZl/08kfV71BQDoEBC7Wwis68z87LjyK6f4kWyTaubuDbhHKrZkbA==",
+      "version": "1.5.393",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.393.tgz",
+      "integrity": "sha512-kiDJdIUawuEIcp9XoICKp1iTYDEbgguIPq526N1Q7jIQDeQ3CqoMx71025PI/7E48Ddtw2HuWsVjY7afEgNxmg==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -14606,6 +14667,18 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.15",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
@@ -14665,9 +14738,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.50",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz",
-      "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==",
+      "version": "2.0.51",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz",
+      "integrity": "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -14802,6 +14875,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -15236,6 +15319,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
@@ -15902,6 +16005,50 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
     "node_modules/postcss-lab-function": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-7.0.12.tgz",
@@ -15931,6 +16078,49 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
@@ -16177,6 +16367,32 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-nesting": {
       "version": "13.0.2",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.2.tgz",
@@ -17208,6 +17424,16 @@
         "react": ">=15"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -18716,6 +18942,39 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -18794,6 +19053,68 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
@@ -18920,6 +19241,29 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "license": "MIT"
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/thingies": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.6.0.tgz",
@@ -18960,6 +19304,54 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinypool": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
@@ -19035,6 +19427,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
diff --git a/web/package.json b/web/package.json
index c9ec4ac5..c5363b24 100644
--- a/web/package.json
+++ b/web/package.json
@@ -26,7 +26,6 @@
     "@supabase/supabase-js": "^2.108.2",
     "@types/three": "^0.185.1",
     "@xyflow/react": "^12.11.2",
-    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -47,9 +46,14 @@
     "@docusaurus/tsconfig": "3.10.1",
     "@docusaurus/types": "3.10.1",
     "@playwright/test": "^1.61.1",
+    "autoprefixer": "^10.5.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
     "remark": "^15.0.1",
     "strip-markdown": "^6.0.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.6.2"
   },
   "browserslist": {
diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
new file mode 100644
index 00000000..12a703d9
--- /dev/null
+++ b/web/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/web/src/components/CommentInput.tsx b/web/src/components/CommentInput.tsx
new file mode 100644
index 00000000..9172854f
--- /dev/null
+++ b/web/src/components/CommentInput.tsx
@@ -0,0 +1,73 @@
+import React, { memo, type KeyboardEvent as ReactKeyboardEvent, useCallback, useState } from 'react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+
+export interface CommentInputProps {
+  onSubmit: (text: string) => void;
+  onCancel: () => void;
+  filePath?: string;
+  startLine?: number;
+  endLine?: number;
+}
+
+export const CommentInput: React.FC<CommentInputProps> = memo(
+  ({ onSubmit, onCancel, filePath, startLine, endLine }) => {
+    const [text, setText] = useState('');
+
+    const handleSubmit = useCallback(() => {
+      if (text.trim()) onSubmit(text.trim());
+    }, [text, onSubmit]);
+
+    const handleKeyDown = useCallback(
+      (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.metaKey || e.ctrlKey) {
+          const key = e.key.toLowerCase();
+          if (['a', 'c', 'x', 'v', 'z', 'y'].includes(key)) {
+            e.stopPropagation();
+            return;
+          }
+        }
+        if (e.key === 'Escape') onCancel();
+        else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') handleSubmit();
+      },
+      [onCancel, handleSubmit],
+    );
+
+    const lineLabel =
+      startLine && endLine
+        ? startLine === endLine
+          ? `L${startLine}`
+          : `L${startLine}–${endLine}`
+        : null;
+
+    return (
+      <div className="bg-muted border border-border rounded-md mx-2 my-1 px-4 py-3 font-sans text-base">
+        {filePath && lineLabel && (
+          <div className="mb-2 text-sm text-muted-foreground font-mono">
+            {filePath}:{lineLabel}
+          </div>
+        )}
+        {!filePath && lineLabel && (
+          <div className="mb-2 text-sm text-muted-foreground font-mono">{lineLabel}</div>
+        )}
+        <Textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Add a comment…"
+          className="mb-2 font-sans min-h-[70px]"
+          autoFocus
+          onKeyDown={handleKeyDown}
+        />
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" size="sm" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button size="sm" onClick={handleSubmit} disabled={!text.trim()}>
+            Add Comment
+          </Button>
+        </div>
+      </div>
+    );
+  },
+);
+CommentInput.displayName = 'CommentInput';
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
new file mode 100644
index 00000000..5a46185a
--- /dev/null
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40',
+  {
+    variants: {
+      size: {
+        default: 'h-10 px-4 py-2 text-base',
+        icon: 'h-10 w-10',
+        lg: 'h-11 px-6 text-lg',
+        sm: 'h-8 px-3 text-sm',
+        xs: 'h-6 px-2 text-sm',
+      },
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/85 active:bg-primary/75 shadow-sm',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/85 shadow-sm',
+        ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-accent/80',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/70 active:bg-secondary/60',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      className={cn(buttonVariants({ className, size, variant }))}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..6de93bb6
--- /dev/null
+++ b/web/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-sm border border-input bg-background px-3 py-2 transition-colors ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 resize-none',
+        className,
+      )}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck={false}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/web/src/css/custom.css b/web/src/css/custom.css
index 0a40d9f9..6b502d9d 100644
--- a/web/src/css/custom.css
+++ b/web/src/css/custom.css
@@ -4,6 +4,58 @@
  * work well for content-centric websites.
  */
 
+/* Tailwind utilities (no preflight — Infima handles base styles) */
+@tailwind components;
+@tailwind utilities;
+
+/* ── Shared design-system tokens ──────────────────────────────────────────────
+   These mirror the desktop app's src/index.css so that shared React components
+   (CommentInput, Button, etc.) render identically in both contexts.          */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --primary: 211 100% 62%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 220 13% 95%;
+  --secondary-foreground: 0 0% 13%;
+  --muted: 220 13% 96%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 220 13% 95%;
+  --accent-foreground: 0 0% 13%;
+  --destructive: 0 85% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 13% 88%;
+  --input: 220 13% 91%;
+  --ring: 211 100% 62%;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+}
+
+[data-theme='dark'] {
+  --background: 0 0% 9%;
+  --foreground: 0 0% 95%;
+  --card: 0 0% 12%;
+  --card-foreground: 0 0% 95%;
+  --primary: 211 100% 55%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 20%;
+  --secondary-foreground: 0 0% 95%;
+  --muted: 0 0% 18%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 20%;
+  --accent-foreground: 0 0% 95%;
+  --destructive: 0 85% 58%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 25%;
+  --input: 0 0% 22%;
+  --ring: 211 100% 55%;
+}
+
 /* You can override the default Infima variables here. */
 :root {
   /* Font tokens. Real webfonts are self-hosted (see fonts.css); each is
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 00000000..9ad0df42
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
new file mode 100644
index 00000000..f00a0114
--- /dev/null
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -0,0 +1,1078 @@
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { cn } from '../../lib/utils';
+import { CommentInput } from '../../components/CommentInput';
+import styles from './markdown-annotator.module.css';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface Annotation {
+  id: string;
+  lineStart: number;
+  lineEnd: number;
+  selectedText: string;
+  comment: string;
+  view: 'code' | 'preview';
+}
+
+export type ViewMode = 'code' | 'preview';
+
+interface MdBlock {
+  lineStart: number;
+  lineEnd: number;
+  html: string;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+export function uid() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+export function parseGithubUrl(url: string): { rawUrl: string; displayUrl: string } | null {
+  try {
+    const u = new URL(url);
+    if (u.hostname !== 'github.com') return null;
+    const parts = u.pathname.split('/').filter(Boolean);
+    if (parts.length < 5 || parts[2] !== 'blob') return null;
+    const [owner, repo, , ...rest] = parts;
+    const branch = rest[0];
+    const filePath = rest.slice(1).join('/');
+    const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${filePath}`;
+    return { rawUrl, displayUrl: url };
+  } catch {
+    return null;
+  }
+}
+
+export function detectLanguage(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+  const map: Record<string, string> = {
+    ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
+    py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java',
+    c: 'c', cpp: 'cpp', h: 'cpp', cs: 'csharp', php: 'php',
+    sh: 'bash', bash: 'bash', zsh: 'bash', yaml: 'yaml', yml: 'yaml',
+    json: 'json', toml: 'toml', md: 'markdown', mdx: 'markdown',
+    html: 'html', css: 'css', scss: 'scss', sql: 'sql', xml: 'xml',
+  };
+  return map[ext] ?? 'text';
+}
+
+export function isMarkdown(filename: string): boolean {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+  return ext === 'md' || ext === 'mdx';
+}
+
+export function encodeContentForUrl(content: string): string {
+  const bytes = new TextEncoder().encode(content);
+  let binary = '';
+  bytes.forEach((b) => (binary += String.fromCharCode(b)));
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+export function decodeContentFromUrl(encoded: string): string {
+  const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
+  const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return new TextDecoder().decode(bytes);
+}
+
+// ── Markdown block renderer ───────────────────────────────────────────────────
+
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function inlineFmt(text: string): string {
+  return text
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    .replace(/~~(.+?)~~/g, '<del>$1</del>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+}
+
+function renderMarkdownBlocks(md: string): MdBlock[] {
+  const blocks: MdBlock[] = [];
+  const rawLines = md.split('\n');
+  let i = 0;
+
+  // Every non-blank line becomes its own annotatable block (one row per source
+  // line, like a code diff) — only fenced code blocks span multiple lines,
+  // since splitting mid-fence would break the syntax.
+  while (i < rawLines.length) {
+    const raw = rawLines[i];
+    const lineNum = i + 1;
+
+    if (!raw.trim()) { i++; continue; }
+
+    if (raw.trimStart().startsWith('```')) {
+      const start = i;
+      const lang = raw.replace(/^\s*```/, '').trim();
+      i++;
+      const codeLines: string[] = [];
+      while (i < rawLines.length && !rawLines[i].trimStart().startsWith('```')) {
+        codeLines.push(esc(rawLines[i]));
+        i++;
+      }
+      i++;
+      blocks.push({
+        lineStart: start + 1,
+        lineEnd: i,
+        html: `<pre><code class="language-${lang || 'text'}">${codeLines.join('\n')}</code></pre>`,
+      });
+      continue;
+    }
+
+    const hMatch = raw.match(/^(#{1,6})\s+(.*)/);
+    if (hMatch) {
+      const level = hMatch[1].length;
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<h${level}>${inlineFmt(esc(hMatch[2]))}</h${level}>` });
+      i++;
+      continue;
+    }
+
+    if (/^[-*_]{3,}\s*$/.test(raw)) {
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: '<hr/>' });
+      i++;
+      continue;
+    }
+
+    if (raw.startsWith('>')) {
+      const text = inlineFmt(esc(raw.replace(/^>\s?/, '')));
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<blockquote><p>${text}</p></blockquote>` });
+      i++;
+      continue;
+    }
+
+    const ulMatch = raw.match(/^[-*+]\s(.*)/);
+    if (ulMatch) {
+      const text = inlineFmt(esc(ulMatch[1]));
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<ul><li>${text}</li></ul>` });
+      i++;
+      continue;
+    }
+
+    const olMatch = raw.match(/^(\d+)\.\s(.*)/);
+    if (olMatch) {
+      const [, num, rest] = olMatch;
+      const text = inlineFmt(esc(rest));
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<ol start="${num}"><li>${text}</li></ol>` });
+      i++;
+      continue;
+    }
+
+    blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<p>${inlineFmt(esc(raw))}</p>` });
+    i++;
+  }
+
+  return blocks;
+}
+
+// ── Review prompt ─────────────────────────────────────────────────────────────
+
+export function buildReviewPrompt(opts: {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  annotations: Annotation[];
+  summary: string;
+}): string {
+  const { content, filename, sourceUrl, annotations, summary } = opts;
+  const out: string[] = [];
+
+  out.push('# File Review');
+  out.push('');
+
+  if (sourceUrl) {
+    out.push(`**File:** \`${filename}\``);
+    out.push(`**Source:** ${sourceUrl}`);
+    out.push('');
+  }
+
+  if (annotations.length > 0) {
+    out.push('## Inline Annotations');
+    out.push('');
+    for (const a of annotations) {
+      const range = a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`;
+      out.push(`### ${range}`);
+      if (a.selectedText) { out.push(''); out.push('```'); out.push(a.selectedText); out.push('```'); }
+      out.push(''); out.push(a.comment); out.push('');
+    }
+  }
+
+  if (summary.trim()) { out.push('## Summary'); out.push(''); out.push(summary.trim()); out.push(''); }
+
+  out.push('## File Contents');
+  out.push('');
+  out.push('```' + (sourceUrl ? detectLanguage(filename) : 'text'));
+  out.push(content);
+  out.push('```');
+
+  return out.join('\n');
+}
+
+// ── Inline annotation card (matches app's HunkLines comment card) ─────────────
+
+interface AnnotCardProps {
+  annotation: Annotation;
+  onDelete: (id: string) => void;
+}
+
+function AnnotCard({ annotation: a, onDelete }: AnnotCardProps) {
+  return (
+    <div className="border-t border-b border-[hsl(var(--primary)/0.2)] bg-[hsl(var(--primary)/0.03)] px-0 py-2">
+      <div
+        data-testid="inline-comment-card"
+        className="group mx-3 bg-background rounded-md border border-border"
+        style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}
+      >
+        <div className="flex items-start gap-2 p-3">
+          <div className="flex-1 min-w-0">
+            <div className="text-[11px] text-muted-foreground font-mono mb-1.5">
+              {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
+            </div>
+            {a.selectedText && (
+              <pre
+                className="text-[11px] rounded py-1.5 px-2.5 whitespace-pre-wrap break-words font-mono mb-2"
+                style={{ background: 'hsl(var(--muted))', color: 'hsl(var(--foreground)/0.7)', margin: 0 }}
+              >
+                {a.selectedText.length > 200 ? a.selectedText.slice(0, 200) + '…' : a.selectedText}
+              </pre>
+            )}
+            <p className="text-sm whitespace-pre-wrap m-0" style={{ fontFamily: 'inherit' }}>{a.comment}</p>
+          </div>
+          <button
+            className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive text-xs px-1.5 py-0.5 rounded hover:bg-destructive/10 flex-shrink-0 mt-0.5"
+            onClick={() => onDelete(a.id)}
+            title="Delete comment"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Code view ─────────────────────────────────────────────────────────────────
+
+interface CodeViewProps {
+  lines: string[];
+  annotations: Annotation[];
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string, comment: string) => void;
+  onAnnotationDelete: (id: string) => void;
+}
+
+export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDelete }: CodeViewProps) {
+  const [anchorLine, setAnchorLine] = useState<number | null>(null);
+  const [hoverLine, setHoverLine] = useState<number | null>(null);
+  const [inlineForm, setInlineForm] = useState<{ lineStart: number; lineEnd: number } | null>(null);
+
+  const getRange = (a: number, b: number): [number, number] => a <= b ? [a, b] : [b, a];
+
+  const handleAddClick = (lineNum: number) => {
+    if (anchorLine !== null && anchorLine !== lineNum) {
+      const [start, end] = getRange(anchorLine, lineNum);
+      setInlineForm({ lineStart: start, lineEnd: end });
+    } else {
+      setInlineForm({ lineStart: lineNum, lineEnd: lineNum });
+    }
+    setAnchorLine(null);
+  };
+
+  const handleLineNumClick = (lineNum: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (inlineForm) return;
+    setAnchorLine((prev) => (prev === lineNum ? null : lineNum));
+  };
+
+  const handleInlineSubmit = (text: string) => {
+    if (!inlineForm) return;
+    const selectedText = lines.slice(inlineForm.lineStart - 1, inlineForm.lineEnd).join('\n');
+    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, text);
+    setInlineForm(null);
+  };
+
+  const [rangeStart, rangeEnd] =
+    anchorLine !== null && hoverLine !== null ? getRange(anchorLine, hoverLine) : [null, null];
+
+  const annotsByLine = new Map<number, Annotation[]>();
+  for (const a of annotations) {
+    const arr = annotsByLine.get(a.lineStart) ?? [];
+    arr.push(a);
+    annotsByLine.set(a.lineStart, arr);
+  }
+
+  const annotatedLines = new Set(annotations.flatMap((a) => {
+    const out: number[] = [];
+    for (let l = a.lineStart; l <= a.lineEnd; l++) out.push(l);
+    return out;
+  }));
+
+  return (
+    <div className="flex flex-col">
+      <div className={cn('overflow-y-auto', styles.ghCodeScroll)} style={{ maxHeight: 'calc(100vh - 220px)' }}>
+        {/*
+          GitHub-style diff table:
+          - Two columns only: [gutter] [code]
+          - Gutter contains the line number + "+" add-button (hidden until row hover)
+          - No visible borders between columns or rows — just a subtle background on the gutter
+          - Full-width code column that word-wraps instead of scrolling horizontally
+        */}
+        <table
+          className={cn('w-full font-mono text-[13px] leading-5', styles.ghCodeTable)}
+          style={{ borderCollapse: 'collapse', tableLayout: 'fixed' }}
+        >
+          <colgroup>
+            {/* Gutter: fixed width for line-number + add-button */}
+            <col style={{ width: '56px' }} />
+            {/* Code: takes remaining width */}
+            <col style={{ width: 'auto' }} />
+          </colgroup>
+          <tbody>
+            {lines.map((lineContent, idx) => {
+              const lineNum = idx + 1;
+              const isInRange = rangeStart !== null && rangeEnd !== null && lineNum >= rangeStart && lineNum <= rangeEnd;
+              const isAnchor = lineNum === anchorLine;
+              const isAnnotated = annotatedLines.has(lineNum);
+              const annotsHere = annotsByLine.get(lineNum) ?? [];
+              const isFormEnd = inlineForm?.lineEnd === lineNum;
+              const isFormRange = inlineForm !== null && lineNum >= inlineForm.lineStart && lineNum <= inlineForm.lineEnd;
+
+              const rowBg = (isInRange || isAnchor)
+                ? 'hsl(var(--primary)/0.1)'
+                : isFormRange
+                ? 'hsl(var(--primary)/0.05)'
+                : isAnnotated
+                ? 'hsl(40 96% 60% / 0.06)'
+                : undefined;
+
+              return (
+                <React.Fragment key={lineNum}>
+                  <tr
+                    className="group"
+                    style={{ background: rowBg ?? 'transparent' }}
+                    onMouseEnter={() => setHoverLine(lineNum)}
+                    onMouseLeave={() => setHoverLine(null)}
+                  >
+                    {/* ── Gutter: add-button + line number in one cell ── */}
+                    <td
+                      className="select-none align-top p-0"
+                      style={{
+                        background: rowBg ?? 'hsl(var(--muted)/0.5)',
+                        position: 'relative',
+                        verticalAlign: 'top',
+                      }}
+                    >
+                      <div className="flex items-start justify-end h-full gap-1 pl-1 pr-1">
+                        {/* Line number */}
+                        <span
+                          className={cn(
+                            'text-right py-[2px] text-[12px] cursor-pointer',
+                            'text-muted-foreground hover:text-foreground',
+                            isAnchor && 'text-primary font-semibold',
+                          )}
+                          onClick={(e) => handleLineNumClick(lineNum, e)}
+                          title="Click to anchor a range selection"
+                        >
+                          {isAnnotated && (
+                            <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 mr-1 mb-[1px]" />
+                          )}
+                          {lineNum}
+                        </span>
+                        {/* "+" add-button — invisible until row hover, sits right of the line number */}
+                        <button
+                          className={cn(
+                            'flex items-center justify-center flex-shrink-0',
+                            'w-4 h-5 mt-[2px]',
+                            'rounded text-[11px] font-bold leading-none',
+                            'text-primary-foreground bg-primary',
+                            'opacity-0 group-hover:opacity-100 transition-opacity',
+                            isAnchor && '!opacity-100',
+                          )}
+                          onClick={() => handleAddClick(lineNum)}
+                          title={
+                            anchorLine !== null && anchorLine !== lineNum
+                              ? `Comment on lines ${Math.min(anchorLine, lineNum)}–${Math.max(anchorLine, lineNum)}`
+                              : 'Add comment'
+                          }
+                          tabIndex={-1}
+                        >
+                          +
+                        </button>
+                      </div>
+                    </td>
+
+                    {/* ── Code content ── */}
+                    <td className="align-top p-0">
+                      <pre
+                        style={{
+                          margin: 0,
+                          padding: '2px 16px 2px 8px',
+                          whiteSpace: 'pre-wrap',
+                          wordBreak: 'break-word',
+                          overflowWrap: 'anywhere',
+                          background: 'transparent',
+                          border: 'none',
+                          fontFamily: 'inherit',
+                          fontSize: 'inherit',
+                          lineHeight: 'inherit',
+                          fontWeight: 'normal',
+                          color: 'inherit',
+                          overflow: 'visible',
+                        }}
+                      >
+                        {lineContent || '​'}
+                      </pre>
+                    </td>
+                  </tr>
+
+                  {/* ── Inline comment form ── */}
+                  {isFormEnd && (
+                    <tr>
+                      <td colSpan={2} style={{ padding: 0 }}>
+                        <CommentInput
+                          startLine={inlineForm.lineStart}
+                          endLine={inlineForm.lineEnd}
+                          onSubmit={handleInlineSubmit}
+                          onCancel={() => setInlineForm(null)}
+                        />
+                      </td>
+                    </tr>
+                  )}
+
+                  {/* ── Annotation cards ── */}
+                  {annotsHere.map((a) => (
+                    <tr key={a.id}>
+                      <td colSpan={2} style={{ padding: 0 }}>
+                        <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
+                      </td>
+                    </tr>
+                  ))}
+                </React.Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+      {anchorLine !== null && (
+        <div
+          className="px-4 py-1.5 text-xs select-none border-t"
+          style={{
+            color: 'hsl(var(--primary))',
+            background: 'hsl(var(--primary)/0.05)',
+            borderColor: 'hsl(var(--primary)/0.2)',
+          }}
+        >
+          Line {anchorLine} selected — click "+" on another line to comment on a range, or click the line number to deselect
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Preview view ──────────────────────────────────────────────────────────────
+
+interface PreviewViewProps {
+  content: string;
+  annotations: Annotation[];
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string, comment: string) => void;
+  onAnnotationDelete: (id: string) => void;
+}
+
+export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotationDelete }: PreviewViewProps) {
+  const blocks = useMemo(() => renderMarkdownBlocks(content), [content]);
+  const rawLines = content.split('\n');
+
+  const [anchorLine, setAnchorLine] = useState<number | null>(null);
+  const [hoverLine, setHoverLine] = useState<number | null>(null);
+  const [inlineForm, setInlineForm] = useState<{ blockIdx: number; lineStart: number; lineEnd: number } | null>(null);
+
+  const getRange = (a: number, b: number): [number, number] => a <= b ? [a, b] : [b, a];
+
+  const handleAddClick = (block: MdBlock, blockIdx: number) => {
+    if (anchorLine !== null && anchorLine !== block.lineStart) {
+      const [start, end] = getRange(anchorLine, block.lineStart);
+      setInlineForm({ blockIdx, lineStart: start, lineEnd: end });
+    } else {
+      setInlineForm({ blockIdx, lineStart: block.lineStart, lineEnd: block.lineEnd });
+    }
+    setAnchorLine(null);
+  };
+
+  const handleLineNumClick = (lineNum: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (inlineForm) return;
+    setAnchorLine((prev) => (prev === lineNum ? null : lineNum));
+  };
+
+  const handleInlineSubmit = (text: string) => {
+    if (!inlineForm) return;
+    const selectedText = rawLines.slice(inlineForm.lineStart - 1, inlineForm.lineEnd).join('\n');
+    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, text);
+    setInlineForm(null);
+  };
+
+  const [rangeStart, rangeEnd] =
+    anchorLine !== null && hoverLine !== null ? getRange(anchorLine, hoverLine) : [null, null];
+
+  const annotsByLine = new Map<number, Annotation[]>();
+  for (const a of annotations) {
+    const arr = annotsByLine.get(a.lineStart) ?? [];
+    arr.push(a);
+    annotsByLine.set(a.lineStart, arr);
+  }
+
+  return (
+    <div className="flex flex-col">
+      {blocks.map((block, blockIdx) => {
+        const annotsHere = annotsByLine.get(block.lineStart) ?? [];
+        const isFormHere = inlineForm?.blockIdx === blockIdx;
+        const isInRange = rangeStart !== null && rangeEnd !== null && block.lineStart >= rangeStart && block.lineStart <= rangeEnd;
+        const isAnchor = block.lineStart === anchorLine;
+        const isFormRange = inlineForm !== null && block.lineStart >= inlineForm.lineStart && block.lineStart <= inlineForm.lineEnd;
+
+        const rowBg = (isInRange || isAnchor)
+          ? 'hsl(var(--primary)/0.1)'
+          : isFormRange
+          ? 'hsl(var(--primary)/0.05)'
+          : undefined;
+
+        return (
+          <React.Fragment key={blockIdx}>
+            {/* Line row: [line#] [+btn] [content] */}
+            <div
+              className="group flex items-start py-0.5 rounded-sm"
+              style={{ background: rowBg }}
+              onMouseEnter={() => setHoverLine(block.lineStart)}
+              onMouseLeave={() => setHoverLine(null)}
+            >
+              {/* Gutter: line number + add-button, button sits right of the number */}
+              <div className="w-14 flex-shrink-0 flex items-start justify-end gap-1 pt-1 pr-1 select-none">
+                <span
+                  className={cn(
+                    'text-right text-xs font-mono cursor-pointer text-muted-foreground hover:text-foreground',
+                    isAnchor && 'text-primary font-semibold',
+                  )}
+                  onClick={(e) => handleLineNumClick(block.lineStart, e)}
+                  title="Click to anchor a range selection"
+                >
+                  {block.lineStart}
+                  {block.lineEnd > block.lineStart && <span className="text-muted-foreground/60">–{block.lineEnd}</span>}
+                </span>
+                <button
+                  className={cn(
+                    'flex items-center justify-center flex-shrink-0 w-4 h-4 mt-[1px]',
+                    'rounded text-[11px] font-bold leading-none text-primary-foreground bg-primary',
+                    'opacity-0 group-hover:opacity-100 transition-opacity',
+                    isAnchor && '!opacity-100',
+                  )}
+                  onClick={() => handleAddClick(block, blockIdx)}
+                  title={
+                    anchorLine !== null && anchorLine !== block.lineStart
+                      ? `Comment on lines ${Math.min(anchorLine, block.lineStart)}–${Math.max(anchorLine, block.lineStart)}`
+                      : 'Add comment'
+                  }
+                  tabIndex={-1}
+                >
+                  +
+                </button>
+              </div>
+
+              {/* Rendered markdown block */}
+              <div
+                className={styles.previewBlockContent}
+                dangerouslySetInnerHTML={{ __html: block.html }}
+              />
+            </div>
+
+            {/* Inline comment form */}
+            {isFormHere && (
+              <div className="flex">
+                <div className="w-14 flex-shrink-0" />
+                <div className="flex-1 min-w-0 pr-4">
+                  <CommentInput
+                    startLine={inlineForm.lineStart}
+                    endLine={inlineForm.lineEnd}
+                    onSubmit={handleInlineSubmit}
+                    onCancel={() => setInlineForm(null)}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Annotation cards */}
+            {annotsHere.map((a) => (
+              <div key={a.id} className="flex">
+                <div className="w-14 flex-shrink-0" />
+                <div className="flex-1 min-w-0 pr-4 py-1">
+                  <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
+                </div>
+              </div>
+            ))}
+          </React.Fragment>
+        );
+      })}
+      {anchorLine !== null && (
+        <div
+          className="px-4 py-1.5 text-xs select-none border-t"
+          style={{
+            color: 'hsl(var(--primary))',
+            background: 'hsl(var(--primary)/0.05)',
+            borderColor: 'hsl(var(--primary)/0.2)',
+          }}
+        >
+          Line {anchorLine} selected — click "+" on another line to comment on a range, or click the line number to deselect
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── File loader ───────────────────────────────────────────────────────────────
+
+interface FileLoaderProps {
+  onLoad: (content: string, filename: string, sourceUrl: string | null) => void;
+}
+
+export function FileLoader({ onLoad }: FileLoaderProps) {
+  const [urlInput, setUrlInput] = useState('');
+  const [pasteContent, setPasteContent] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchFromGithub = async () => {
+    if (!urlInput.trim()) return;
+    setError(null);
+    const parsed = parseGithubUrl(urlInput.trim());
+    if (!parsed) {
+      setError('Invalid GitHub URL. Expected: github.com/owner/repo/blob/branch/path/to/file');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch(parsed.rawUrl);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const text = await res.text();
+      const filename = parsed.rawUrl.split('/').pop() ?? 'file';
+      onLoad(text, filename, parsed.displayUrl);
+    } catch (e) {
+      setError(`Failed to fetch: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadPasted = () => {
+    if (!pasteContent.trim()) { setError('No content to load.'); return; }
+    onLoad(pasteContent, '', null);
+  };
+
+  return (
+    <div className={styles.loader}>
+      {/* GitHub URL */}
+      <div className={styles.loaderSection}>
+        <label className={styles.loaderLabel}>GitHub file URL</label>
+        <div className={styles.loaderRow}>
+          <input
+            className={styles.loaderInput}
+            type="url"
+            placeholder="https://github.com/owner/repo/blob/main/README.md"
+            value={urlInput}
+            onChange={(e) => { setUrlInput(e.target.value); setError(null); }}
+            onKeyDown={(e) => { if (e.key === 'Enter') fetchFromGithub(); }}
+          />
+          <button className="button button--primary button--sm" onClick={fetchFromGithub} disabled={loading || !urlInput.trim()}>
+            {loading ? 'Loading…' : 'Fetch'}
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.loaderDivider}>
+        <span>or paste content below</span>
+      </div>
+
+      {/* Paste */}
+      <div className={styles.loaderSection}>
+        <textarea
+          className={styles.loaderTextarea}
+          placeholder="Paste file contents here…"
+          value={pasteContent}
+          onChange={(e) => { setPasteContent(e.target.value); setError(null); }}
+          rows={10}
+        />
+        <button
+          className="button button--primary button--sm"
+          onClick={loadPasted}
+          disabled={!pasteContent.trim()}
+          style={{ alignSelf: 'flex-start' }}
+        >
+          Load
+        </button>
+      </div>
+
+      {error && <div className={styles.loaderError}>{error}</div>}
+    </div>
+  );
+}
+
+// ── Review panel ──────────────────────────────────────────────────────────────
+
+interface ReviewPanelProps {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  annotations: Annotation[];
+  onBack: () => void;
+}
+
+export function ReviewPanel({ content, filename, sourceUrl, annotations, onBack }: ReviewPanelProps) {
+  const [summary, setSummary] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const prompt = buildReviewPrompt({ content, filename, sourceUrl, annotations, summary });
+  const claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
+  const chatgptUrl = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(prompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={styles.reviewPanel}>
+      <div className={styles.reviewPanelHeader}>
+        <span className={styles.reviewPanelTitle}>Finish Review</span>
+      </div>
+      <div className={styles.reviewStats}>
+        <span className={styles.reviewStat}>{annotations.length} annotation{annotations.length !== 1 ? 's' : ''}</span>
+        <span className={styles.reviewStat}>{content.split('\n').length} lines</span>
+        {sourceUrl && (
+          <a className={styles.reviewSourceLink} href={sourceUrl} target="_blank" rel="noopener noreferrer">View source</a>
+        )}
+      </div>
+      <div className={styles.reviewSummarySection}>
+        <label className={styles.reviewLabel}>Summary (optional)</label>
+        <textarea
+          className={styles.reviewSummary}
+          placeholder="Add overall review notes, context, or questions…"
+          value={summary}
+          onChange={(e) => setSummary(e.target.value)}
+          rows={4}
+        />
+      </div>
+      <div className={styles.reviewActions}>
+        <button className="button button--secondary button--sm" onClick={handleCopy}>{copied ? '✓ Copied!' : 'Copy prompt'}</button>
+        <a className={styles.reviewOpenClaude} href={claudeUrl} target="_blank" rel="noopener noreferrer">Open in Claude</a>
+        <a className={styles.reviewOpenChatgpt} href={chatgptUrl} target="_blank" rel="noopener noreferrer">Open in ChatGPT</a>
+      </div>
+      <div className={styles.reviewPromptPreview}>
+        <div className={styles.reviewPromptHeader}><span className={styles.reviewPromptLabel}>Prompt preview</span></div>
+        <pre className={styles.reviewPromptText}>{prompt}</pre>
+      </div>
+      <button className="button button--secondary button--sm" style={{ alignSelf: 'flex-start' }} onClick={onBack}>← Back to annotations</button>
+    </div>
+  );
+}
+
+// ── Embed panel ───────────────────────────────────────────────────────────────
+
+const EMBED_BASE = 'https://treq.dev/tools/markdown-annotator-embed';
+const CONTENT_SIZE_LIMIT = 60_000;
+
+interface EmbedPanelProps {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  onClose: () => void;
+}
+
+function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps) {
+  const [width, setWidth] = useState(900);
+  const [height, setHeight] = useState(650);
+  const [copied, setCopied] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const tooLarge = !sourceUrl && content.length > CONTENT_SIZE_LIMIT;
+
+  const embedUrl = sourceUrl
+    ? `${EMBED_BASE}?url=${encodeURIComponent(sourceUrl)}`
+    : tooLarge
+    ? null
+    : `${EMBED_BASE}?content=${encodeContentForUrl(content)}&filename=${encodeURIComponent(filename || 'file')}`;
+
+  const iframeCode = embedUrl
+    ? `<iframe\n  src="${embedUrl}"\n  width="${width}"\n  height="${height}"\n  frameborder="0"\n  style="border-radius:8px;border:1px solid #e5e7eb;"\n></iframe>`
+    : null;
+
+  const handleCopy = async () => {
+    if (!iframeCode) return;
+    await navigator.clipboard.writeText(iframeCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={styles.embedPanel}>
+      <div className={styles.embedPanelHeader}>
+        <div className={styles.embedPanelTitleRow}>
+          <span className={styles.embedPanelTitle}>Embed this file</span>
+          <button className={styles.embedPanelClose} onClick={onClose}>✕</button>
+        </div>
+        <p className={styles.embedPanelDesc}>
+          Copy the code below and paste it into any HTML page to embed this file annotator.
+        </p>
+      </div>
+
+      {tooLarge && (
+        <div className={styles.embedWarning}>
+          Content is too large to encode in a URL ({(content.length / 1024).toFixed(0)} KB). Use a GitHub URL to enable embedding.
+        </div>
+      )}
+
+      {!tooLarge && embedUrl && (
+        <>
+          <div className={styles.embedSizeRow}>
+            <label className={styles.embedSizeLabel}>
+              Width
+              <input className={styles.embedSizeInput} type="number" value={width} min={320} max={2560}
+                onChange={(e) => setWidth(Math.max(320, Number(e.target.value)))} />
+              <span className={styles.embedSizeUnit}>px</span>
+            </label>
+            <span className={styles.embedSizeSep}>×</span>
+            <label className={styles.embedSizeLabel}>
+              Height
+              <input className={styles.embedSizeInput} type="number" value={height} min={300} max={2000}
+                onChange={(e) => setHeight(Math.max(300, Number(e.target.value)))} />
+              <span className={styles.embedSizeUnit}>px</span>
+            </label>
+          </div>
+
+          <div className={styles.embedCodeSection}>
+            <div className={styles.embedCodeLabel}>Embed code</div>
+            <div className={styles.embedCodeRow}>
+              <input
+                ref={inputRef}
+                className={styles.embedCodeInput}
+                type="text"
+                readOnly
+                value={iframeCode ?? ''}
+                onClick={() => inputRef.current?.select()}
+              />
+              <button className="button button--primary button--sm" onClick={handleCopy}>
+                {copied ? '✓ Copied' : 'Copy'}
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.embedPreviewRow}>
+            <a className={styles.embedPreviewLink} href={embedUrl} target="_blank" rel="noopener noreferrer">
+              Preview embed ↗
+            </a>
+          </div>
+
+          <div className={styles.embedInstructions}>
+            <div className={styles.embedInstructionsTitle}>How to embed</div>
+            <ol className={styles.embedInstructionsList}>
+              <li>Copy the embed code above.</li>
+              <li>Paste it into any HTML page where you want the annotator to appear.</li>
+              <li>Adjust <code>width</code> and <code>height</code> to fit your layout — <code>width="100%"</code> works for responsive layouts.</li>
+              <li>Viewers can annotate the file and export their review to Claude or ChatGPT directly from the embed.</li>
+            </ol>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── Annotator tool ────────────────────────────────────────────────────────────
+
+interface InitialFileState {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+}
+
+interface AnnotatorToolProps {
+  compact?: boolean;
+  initialFile?: InitialFileState;
+}
+
+export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolProps) {
+  const [content, setContent] = useState<string | null>(initialFile?.content ?? null);
+  const [filename, setFilename] = useState(initialFile?.filename ?? '');
+  const [sourceUrl, setSourceUrl] = useState<string | null>(initialFile?.sourceUrl ?? null);
+  const [viewMode, setViewMode] = useState<ViewMode>(() =>
+    initialFile ? (isMarkdown(initialFile.filename) ? 'preview' : 'code') : 'code'
+  );
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [showReview, setShowReview] = useState(false);
+  const [showEmbed, setShowEmbed] = useState(false);
+
+  const lines = content?.split('\n') ?? [];
+
+  const handleLoad = useCallback((c: string, fn: string, url: string | null) => {
+    setContent(c);
+    setFilename(fn);
+    setSourceUrl(url);
+    setAnnotations([]);
+    setViewMode(isMarkdown(fn) ? 'preview' : 'code');
+    setShowReview(false);
+    setShowEmbed(false);
+  }, []);
+
+  const handleAnnotationAdd = useCallback(
+    (lineStart: number, lineEnd: number, selectedText: string, comment: string) => {
+      setAnnotations((prev) => [
+        ...prev,
+        { id: uid(), lineStart, lineEnd, selectedText, comment, view: viewMode },
+      ]);
+    },
+    [viewMode]
+  );
+
+  const handleAnnotationDelete = useCallback((id: string) => {
+    setAnnotations((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const handleClear = useCallback(() => {
+    if (compact) return;
+    setContent(null);
+    setFilename('');
+    setSourceUrl(null);
+    setAnnotations([]);
+    setShowReview(false);
+    setShowEmbed(false);
+  }, [compact]);
+
+  if (!content) {
+    return (
+      <div className={styles.toolRoot}>
+        <div className={styles.toolHeader}>
+          {!compact && (
+            <div className={styles.breadcrumb}>
+              <a href="/tools">Tools</a>
+              <span> / </span>
+              <span>Markdown Annotator</span>
+            </div>
+          )}
+          <h1 className={styles.toolTitle}>Markdown Annotator</h1>
+          <p className={styles.toolSubtitle}>
+            Annotate markdown and code files like a PR review. Add inline comments, then export a review prompt for Claude or ChatGPT.
+          </p>
+        </div>
+        <FileLoader onLoad={handleLoad} />
+      </div>
+    );
+  }
+
+  if (showReview) {
+    return (
+      <div className={styles.toolRoot}>
+        <div className={styles.toolHeader}>
+          {!compact && (
+            <div className={styles.breadcrumb}>
+              <a href="/tools">Tools</a>
+              <span> / </span>
+              <button className={styles.breadcrumbBtn} onClick={() => setShowReview(false)}>Markdown Annotator</button>
+              <span> / </span>
+              <span>Review</span>
+            </div>
+          )}
+          <h1 className={styles.toolTitle}>Review{filename ? `: ${filename}` : ''}</h1>
+        </div>
+        <ReviewPanel
+          content={content}
+          filename={filename}
+          sourceUrl={sourceUrl}
+          annotations={annotations}
+          onBack={() => setShowReview(false)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.toolRoot}>
+      <div className={styles.toolHeader}>
+        {!compact && (
+          <div className={styles.breadcrumb}>
+            <a href="/tools">Tools</a>
+            <span> / </span>
+            <span>Markdown Annotator</span>
+          </div>
+        )}
+        <div className={styles.toolTitleRow}>
+          <h1 className={compact ? styles.toolTitleCompact : styles.toolTitle}>
+            {filename || 'Untitled'}
+          </h1>
+          <div className={styles.toolHeaderActions}>
+            {!compact && (
+              <>
+                <button
+                  className={`button button--sm ${showEmbed ? 'button--primary' : 'button--secondary'}`}
+                  onClick={() => setShowEmbed((v) => !v)}
+                >
+                  {showEmbed ? 'Hide embed' : '‹/› Embed'}
+                </button>
+                <button className="button button--secondary button--sm" onClick={handleClear}>Change file</button>
+              </>
+            )}
+            <button className="button button--primary button--sm" onClick={() => setShowReview(true)}>
+              Finish review ({annotations.length})
+            </button>
+          </div>
+        </div>
+        {sourceUrl && (
+          <div className={styles.sourceUrlBar}>
+            <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className={styles.sourceUrlLink}>{sourceUrl}</a>
+          </div>
+        )}
+      </div>
+
+      {showEmbed && !compact && (
+        <EmbedPanel content={content} filename={filename} sourceUrl={sourceUrl} onClose={() => setShowEmbed(false)} />
+      )}
+
+      <div className={styles.toolBody}>
+        {/* GitHub-style Code/Preview tabs at the top of the review container — markdown is always assumed */}
+        <div className={styles.bodyTabs}>
+          <button
+            className={cn(styles.bodyTab, viewMode === 'code' && styles.bodyTabActive)}
+            onClick={() => setViewMode('code')}
+          >
+            Code
+          </button>
+          <button
+            className={cn(styles.bodyTab, viewMode === 'preview' && styles.bodyTabActive)}
+            onClick={() => setViewMode('preview')}
+          >
+            Preview
+          </button>
+        </div>
+        {viewMode === 'code' ? (
+          <CodeView
+            lines={lines}
+            annotations={annotations}
+            onAnnotationAdd={handleAnnotationAdd}
+            onAnnotationDelete={handleAnnotationDelete}
+          />
+        ) : (
+          <PreviewView
+            content={content}
+            annotations={annotations}
+            onAnnotationAdd={handleAnnotationAdd}
+            onAnnotationDelete={handleAnnotationDelete}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/tools/index.tsx b/web/src/pages/tools/index.tsx
index 2bdc899a..1700b6e8 100644
--- a/web/src/pages/tools/index.tsx
+++ b/web/src/pages/tools/index.tsx
@@ -53,6 +53,14 @@ const tools = [
     icon: '🦆',
     tags: ['fun', 'debugging', 'rubber-duck'],
   },
+  {
+    name: 'Markdown Annotator',
+    slug: 'markdown-annotator',
+    description:
+      'Review markdown and code files with inline annotations. Fetch from a GitHub URL or paste content, add line-level comments, then export a review prompt for Claude or ChatGPT.',
+    icon: '📝',
+    tags: ['markdown', 'review', 'ai'],
+  },
 ];
 
 const TOOLS_SCHEMA = {
diff --git a/web/src/pages/tools/markdown-annotator-embed.module.css b/web/src/pages/tools/markdown-annotator-embed.module.css
new file mode 100644
index 00000000..f7ab76ca
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator-embed.module.css
@@ -0,0 +1,126 @@
+/* ── Embed root ───────────────────────────────────────────────────────────────
+   Fills the iframe viewport. The #__docusaurus wrapper is forced to
+   height: 100vh by the injected <style> in the page <Head>.                  */
+
+.embedRoot {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--ifm-background-color);
+}
+
+/* Let the toolRoot inside fill the available space */
+.embedRoot > div:first-child:not(.badge):not(.loadingState):not(.errorState) {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+/* ── Loading / error states ──────────────────────────────────────────────────── */
+
+.loadingState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  flex: 1;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.9rem;
+}
+
+.loadingSpinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--ifm-color-emphasis-200);
+  border-top-color: var(--ifm-color-primary);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.errorState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 0.6rem;
+  padding: 2rem;
+  text-align: center;
+}
+
+.errorIcon {
+  font-size: 2rem;
+  color: #f59e0b;
+}
+
+.errorMsg {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  max-width: 440px;
+}
+
+.errorHint {
+  font-size: 0.78rem;
+  color: var(--ifm-color-emphasis-500);
+  max-width: 440px;
+  word-break: break-all;
+}
+
+.errorHint code {
+  font-family: monospace;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+
+/* ── Treq badge ───────────────────────────────────────────────────────────────
+   Fixed to the bottom-right corner of the iframe viewport.                   */
+
+.badge {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 20px;
+  padding: 4px 10px 4px 6px;
+  text-decoration: none;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.72rem;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.15s, transform 0.12s;
+  pointer-events: auto;
+  user-select: none;
+}
+
+.badge:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  transform: translateY(-1px);
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.badgeLogo {
+  width: 16px;
+  height: 16px;
+  display: block;
+  flex-shrink: 0;
+}
+
+.badgeText {
+  letter-spacing: 0.01em;
+}
diff --git a/web/src/pages/tools/markdown-annotator-embed.tsx b/web/src/pages/tools/markdown-annotator-embed.tsx
new file mode 100644
index 00000000..476df26f
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator-embed.tsx
@@ -0,0 +1,163 @@
+import React, { useState, useEffect, lazy, Suspense } from 'react';
+import Head from '@docusaurus/Head';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import styles from './markdown-annotator-embed.module.css';
+
+const AnnotatorTool = lazy(() =>
+  import('./_MarkdownAnnotatorContent').then((m) => ({ default: m.AnnotatorTool }))
+);
+
+// ── Treq badge ────────────────────────────────────────────────────────────────
+
+function TreqBadge() {
+  return (
+    <a
+      href="https://treq.dev"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.badge}
+      title="Made with Treq"
+    >
+      <img src="/img/favicon.svg" alt="Treq" className={styles.badgeLogo} />
+      <span className={styles.badgeText}>treq.dev</span>
+    </a>
+  );
+}
+
+// ── Embed loader ──────────────────────────────────────────────────────────────
+
+interface LoadedFile {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+}
+
+function EmbedLoader({ onLoad, onError }: { onLoad: (f: LoadedFile) => void; onError: (msg: string) => void }) {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const urlParam = params.get('url');
+    const contentParam = params.get('content');
+    const filenameParam = params.get('filename') ?? 'untitled.md';
+
+    if (urlParam) {
+      let rawUrl: string;
+      let displayUrl = urlParam;
+
+      try {
+        const u = new URL(urlParam);
+        if (u.hostname === 'github.com') {
+          const parts = u.pathname.split('/').filter(Boolean);
+          if (parts.length >= 5 && parts[2] === 'blob') {
+            const [owner, repo, , ...rest] = parts;
+            const branch = rest[0];
+            const filePath = rest.slice(1).join('/');
+            rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${filePath}`;
+          } else {
+            onError('Invalid GitHub URL format. Expected: github.com/owner/repo/blob/branch/path');
+            return;
+          }
+        } else if (u.hostname === 'raw.githubusercontent.com') {
+          rawUrl = urlParam;
+        } else {
+          onError('Only github.com URLs are supported.');
+          return;
+        }
+      } catch {
+        onError('Invalid URL.');
+        return;
+      }
+
+      fetch(rawUrl)
+        .then((r) => {
+          if (!r.ok) throw new Error(`HTTP ${r.status}`);
+          return r.text();
+        })
+        .then((text) => {
+          const filename = rawUrl.split('/').pop() ?? filenameParam;
+          onLoad({ content: text, filename, sourceUrl: displayUrl });
+        })
+        .catch((e) => onError(`Failed to fetch file: ${e instanceof Error ? e.message : String(e)}`));
+
+      return;
+    }
+
+    if (contentParam) {
+      try {
+        const base64 = contentParam.replace(/-/g, '+').replace(/_/g, '/');
+        const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+        const binary = atob(padded);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+        const decoded = new TextDecoder().decode(bytes);
+        onLoad({ content: decoded, filename: filenameParam, sourceUrl: null });
+      } catch {
+        onError('Failed to decode content. The embed URL may be malformed.');
+      }
+      return;
+    }
+
+    onError('No content provided. Add ?url= or ?content= to the URL.');
+  }, [onLoad, onError]);
+
+  return (
+    <div className={styles.loadingState}>
+      <div className={styles.loadingSpinner} />
+      <span>Loading file…</span>
+    </div>
+  );
+}
+
+// ── Embed page inner ──────────────────────────────────────────────────────────
+
+function EmbedInner() {
+  const [file, setFile] = useState<LoadedFile | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = (f: LoadedFile) => { setFile(f); setLoaded(true); };
+  const handleError = (msg: string) => { setError(msg); setLoaded(true); };
+
+  return (
+    <div className={styles.embedRoot}>
+      {!loaded && <EmbedLoader onLoad={handleLoad} onError={handleError} />}
+
+      {loaded && error && (
+        <div className={styles.errorState}>
+          <div className={styles.errorIcon}>⚠</div>
+          <div className={styles.errorMsg}>{error}</div>
+          <div className={styles.errorHint}>
+            Example: <code>?url=https://github.com/owner/repo/blob/main/README.md</code>
+          </div>
+        </div>
+      )}
+
+      {loaded && file && (
+        <Suspense fallback={<div className={styles.loadingState}><div className={styles.loadingSpinner} />Loading tool…</div>}>
+          <AnnotatorTool compact initialFile={file} />
+        </Suspense>
+      )}
+
+      <TreqBadge />
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function MarkdownAnnotatorEmbedPage() {
+  return (
+    <>
+      <Head>
+        <title>Markdown Annotator — Treq</title>
+        <meta name="robots" content="noindex" />
+        <style>{`
+          body { margin: 0 !important; padding: 0 !important; overflow: hidden; }
+          #__docusaurus { height: 100vh; overflow: hidden; }
+        `}</style>
+      </Head>
+      <BrowserOnly fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading…</div>}>
+        {() => <EmbedInner />}
+      </BrowserOnly>
+    </>
+  );
+}
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
new file mode 100644
index 00000000..88f855c7
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -0,0 +1,1375 @@
+/* ── Root ────────────────────────────────────────────────────────────────────── */
+
+.toolRoot {
+  max-width: none;
+  margin: 0;
+  padding: 0 1.5rem 4rem;
+  width: 100%;
+}
+
+/* Tailwind's preflight is disabled site-wide (to avoid fighting Infima), so
+   raw <button> elements keep the browser's default UA border/appearance.
+   Reset that here — but leave Infima's own `.button` classes untouched, since
+   they set their own intentional border. */
+.toolRoot button:not(.button) {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+}
+
+/* ── Header ──────────────────────────────────────────────────────────────────── */
+
+.toolHeader {
+  padding: 1.75rem 0 1rem;
+}
+
+.breadcrumb {
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-600);
+  margin-bottom: 0.5rem;
+}
+
+.breadcrumb a,
+.breadcrumbBtn {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.breadcrumb a:hover,
+.breadcrumbBtn:hover {
+  text-decoration: underline;
+}
+
+.toolTitle {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toolSubtitle {
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0 0 0.75rem;
+}
+
+.toolTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.toolTitleRow .toolTitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.toolHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.sourceUrlBar {
+  margin-top: 0.3rem;
+  font-size: 0.8rem;
+}
+
+.sourceUrlLink {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.sourceUrlLink:hover { text-decoration: underline; }
+
+/* ── View toggle ─────────────────────────────────────────────────────────────── */
+
+.viewToggle {
+  display: flex;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  overflow: hidden;
+}
+
+.viewToggleBtn {
+  background: none;
+  border: none;
+  padding: 0.35rem 0.9rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s, color 0.12s;
+}
+
+.viewToggleBtnActive {
+  background: var(--ifm-color-primary);
+  color: #fff;
+}
+
+.viewToggleBtn:not(.viewToggleBtnActive):hover {
+  background: var(--ifm-color-emphasis-100);
+}
+
+/* ── Header buttons ──────────────────────────────────────────────────────────── */
+
+.changeFileBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.changeFileBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.finishReviewBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.35rem 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+  white-space: nowrap;
+}
+
+.finishReviewBtn:hover { opacity: 0.85; }
+
+/* ── Tool body ───────────────────────────────────────────────────────────────── */
+
+.toolBody {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+  width: 100%;
+}
+
+/* ── Body tabs (GitHub-style Code/Preview tabs at top of container) ──────────── */
+
+.bodyTabs {
+  display: flex;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  padding: 0 0.75rem;
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.015));
+}
+
+[data-theme='dark'] .bodyTabs {
+  background: rgba(255,255,255,0.015);
+}
+
+.bodyTab {
+  background: none;
+  border: none;
+  padding: 0.65rem 0.9rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-600);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color 0.12s, border-color 0.12s;
+}
+
+.bodyTabActive {
+  color: var(--ifm-font-color-base);
+  border-bottom-color: var(--ifm-color-primary);
+  font-weight: 600;
+}
+
+.bodyTab:hover:not(.bodyTabActive) {
+  color: var(--ifm-font-color-base);
+}
+
+/* ── GitHub-style code table ───────────────────────────────────────────────────
+   Infima's global `table` selector (unscoped — applies to every table on the
+   site) sets `display: block; overflow: auto;`, which blockifies the table
+   and makes its internal content shrink-wrap instead of filling the
+   container, and stripes every 2nd row via `table tr:nth-child(2n)`. Both
+   need to be explicitly overridden here since they otherwise bleed into any
+   <table> we render, regardless of the JS-driven row highlighting below. */
+
+.ghCodeTable {
+  display: table;
+  width: 100%;
+  overflow: visible;
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+
+.ghCodeTable tr,
+.ghCodeTable td,
+.ghCodeTable th {
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+
+.ghCodeTable tbody tr,
+.ghCodeTable tbody tr:nth-child(2n) {
+  background-color: transparent;
+}
+
+.ghCodeScroll {
+  scrollbar-gutter: stable;
+}
+
+/* ── File loader ─────────────────────────────────────────────────────────────── */
+
+.loader {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  background: var(--ifm-background-surface-color);
+  overflow: hidden;
+  max-width: 700px;
+}
+
+.loaderTabs {
+  display: flex;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.loaderTab {
+  background: none;
+  border: none;
+  padding: 0.7rem 1.2rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-600);
+  border-bottom: 2px solid transparent;
+  transition: color 0.12s, border-color 0.12s;
+  margin-bottom: -1px;
+}
+
+.loaderTabActive {
+  color: var(--ifm-color-primary);
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+.loaderSection {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.loaderDesc {
+  font-size: 0.85rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.loaderRow {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.loaderInput {
+  flex: 1;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+}
+
+.loaderInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.loaderFilenameInput {
+  flex: 1;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: monospace;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+}
+
+.loaderFilenameInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.loaderTextarea {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.8rem;
+  font-family: monospace;
+  resize: vertical;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  min-height: 180px;
+}
+
+.loaderTextarea:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.loaderBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.5rem 1.1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+  white-space: nowrap;
+  align-self: flex-start;
+}
+
+.loaderBtn:hover:not(:disabled) { opacity: 0.85; }
+.loaderBtn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.loaderError {
+  margin: 0 1.25rem 1.25rem;
+  padding: 0.6rem 0.85rem;
+  background: #fef2f2;
+  color: #dc2626;
+  border-radius: 6px;
+  font-size: 0.85rem;
+}
+
+[data-theme='dark'] .loaderError {
+  background: #450a0a;
+  color: #f87171;
+}
+
+/* ── Code view ───────────────────────────────────────────────────────────────── */
+
+.codeView {
+  display: flex;
+  flex-direction: column;
+}
+
+.codeHint {
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-500);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  user-select: none;
+}
+
+[data-theme='dark'] .codeHint {
+  background: rgba(255,255,255,0.02);
+}
+
+.codeScroll {
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: calc(100vh - 220px);
+}
+
+.codeTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: monospace;
+  font-size: 0.82rem;
+  line-height: 1.55;
+}
+
+.codeLine {
+  transition: background 0.08s;
+}
+
+.codeLine:hover .lineNum {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.codeLineSelected {
+  background: rgba(99, 102, 241, 0.08);
+}
+
+.codeLineAnnotated {
+  background: rgba(245, 158, 11, 0.06);
+}
+
+[data-theme='dark'] .codeLineSelected {
+  background: rgba(99, 102, 241, 0.15);
+}
+
+[data-theme='dark'] .codeLineAnnotated {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.lineNum {
+  padding: 0 0.75rem;
+  min-width: 48px;
+  text-align: right;
+  color: var(--ifm-color-emphasis-400);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-right: 1px solid var(--ifm-color-emphasis-200);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: top;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  position: relative;
+}
+
+[data-theme='dark'] .lineNum {
+  background: rgba(255,255,255,0.02);
+}
+
+.lineNum:hover {
+  color: var(--ifm-color-primary);
+  background: var(--ifm-color-emphasis-100);
+}
+
+.lineNumAnchor {
+  background: rgba(99, 102, 241, 0.12) !important;
+  color: var(--ifm-color-primary) !important;
+}
+
+.annotDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f59e0b;
+  vertical-align: middle;
+  margin-right: 4px;
+  margin-top: -1px;
+}
+
+.lineContent {
+  padding: 0;
+  vertical-align: top;
+  width: 100%;
+}
+
+.lineCode {
+  margin: 0;
+  padding: 0 1rem;
+  white-space: pre;
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  border: none;
+}
+
+/* ── Annotation rows (code view) ─────────────────────────────────────────────── */
+
+.annotRow {
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.01));
+}
+
+[data-theme='dark'] .annotRow {
+  background: rgba(255,255,255,0.02);
+}
+
+.annotCell {
+  padding: 0.5rem 0.75rem;
+}
+
+.annotBlock {
+  border-left: 3px solid #f59e0b;
+  background: rgba(245, 158, 11, 0.06);
+  border-radius: 0 6px 6px 0;
+  padding: 0.5rem 0.75rem;
+}
+
+[data-theme='dark'] .annotBlock {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.annotMeta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.3rem;
+}
+
+.annotRange {
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-500);
+  font-family: monospace;
+}
+
+.annotDelete {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-400);
+  font-size: 0.75rem;
+  padding: 0 0.2rem;
+  line-height: 1;
+  border-radius: 3px;
+  transition: color 0.12s, background 0.12s;
+}
+
+.annotDelete:hover {
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.08);
+}
+
+.annotComment {
+  font-size: 0.85rem;
+  color: var(--ifm-font-color-base);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Preview view ────────────────────────────────────────────────────────────── */
+
+.previewView {
+  display: flex;
+  flex-direction: column;
+}
+
+.selectionBar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 1rem;
+  background: rgba(99, 102, 241, 0.08);
+  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+  font-size: 0.82rem;
+  flex-wrap: wrap;
+}
+
+.selectionInfo {
+  color: var(--ifm-color-emphasis-700);
+  flex: 1;
+}
+
+.selectionAddBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+.selectionAddBtn:hover { opacity: 0.85; }
+
+.selectionCancelBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-600);
+  transition: background 0.12s;
+}
+
+.selectionCancelBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.previewContent {
+  padding: 1.5rem 2rem;
+  max-width: 860px;
+  overflow-x: auto;
+}
+
+/* Markdown rendered content */
+.previewContent h1,
+.previewContent h2,
+.previewContent h3,
+.previewContent h4,
+.previewContent h5,
+.previewContent h6 {
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.previewContent h1 { font-size: 1.8rem; }
+.previewContent h2 { font-size: 1.4rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.3em; }
+.previewContent h3 { font-size: 1.15rem; }
+
+.previewContent p { margin: 0.8em 0; line-height: 1.7; }
+
+.previewContent code {
+  font-family: monospace;
+  font-size: 0.85em;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+
+.previewContent pre {
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 7px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.previewContent pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.82rem;
+}
+
+.previewContent ul,
+.previewContent ol {
+  padding-left: 1.5rem;
+  margin: 0.8em 0;
+}
+
+.previewContent li { margin: 0.3em 0; }
+
+.previewContent blockquote {
+  border-left: 4px solid var(--ifm-color-emphasis-300);
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-radius: 0 6px 6px 0;
+}
+
+.previewContent hr {
+  border: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  margin: 1.5em 0;
+}
+
+.previewContent a { color: var(--ifm-color-primary); }
+.previewContent strong { font-weight: 700; }
+.previewContent em { font-style: italic; }
+.previewContent del { text-decoration: line-through; }
+
+.previewAnnotations {
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.previewAnnotationsTitle {
+  font-size: 0.82rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+  margin-bottom: 0.25rem;
+}
+
+.previewAnnotBlock {
+  border-left: 3px solid #f59e0b;
+  background: rgba(245, 158, 11, 0.06);
+  border-radius: 0 6px 6px 0;
+  padding: 0.5rem 0.75rem;
+}
+
+[data-theme='dark'] .previewAnnotBlock {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.annotQuote {
+  font-family: monospace;
+  font-size: 0.78rem;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  padding: 0.4rem 0.6rem;
+  margin: 0.3rem 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--ifm-color-emphasis-700);
+}
+
+[data-theme='dark'] .annotQuote {
+  background: rgba(255,255,255,0.06);
+}
+
+/* ── Annotation dialog ───────────────────────────────────────────────────────── */
+
+.dialogOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeOverlay 0.12s ease;
+}
+
+@keyframes fadeOverlay {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.dialog {
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  padding: 1.25rem;
+  width: min(480px, 92vw);
+  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
+  animation: slideDialog 0.15s ease;
+}
+
+@keyframes slideDialog {
+  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.dialogHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.dialogTitle {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.dialogClose {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--ifm-color-emphasis-500);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  transition: background 0.12s;
+}
+
+.dialogClose:hover { background: var(--ifm-color-emphasis-100); color: var(--ifm-font-color-base); }
+
+.dialogSelection {
+  margin-bottom: 0.75rem;
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+}
+
+.dialogSelectionText {
+  margin: 0;
+  font-size: 0.78rem;
+  font-family: monospace;
+  color: var(--ifm-color-emphasis-700);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dialogTextarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  resize: vertical;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  min-height: 90px;
+  transition: border-color 0.12s;
+}
+
+.dialogTextarea:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.dialogActions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  justify-content: flex-end;
+}
+
+.dialogCancel {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.4rem 0.85rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s;
+}
+
+.dialogCancel:hover { background: var(--ifm-color-emphasis-100); }
+
+.dialogConfirm {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.4rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+.dialogConfirm:hover:not(:disabled) { opacity: 0.85; }
+.dialogConfirm:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.dialogHint {
+  font-size: 0.72rem;
+  color: var(--ifm-color-emphasis-400);
+  margin-top: 0.4rem;
+  text-align: right;
+}
+
+/* ── Review panel ────────────────────────────────────────────────────────────── */
+
+.reviewPanel {
+  max-width: 820px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.reviewPanelHeader {
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.reviewPanelTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.reviewStats {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.reviewStat {
+  font-size: 0.82rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.reviewSourceLink {
+  font-size: 0.82rem;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.reviewSourceLink:hover { text-decoration: underline; }
+
+.reviewSummarySection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.reviewLabel {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.reviewSummary {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  padding: 0.6rem 0.85rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  resize: vertical;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  transition: border-color 0.12s;
+}
+
+.reviewSummary:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.reviewActions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.reviewCopyBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s;
+}
+
+.reviewCopyBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.reviewOpenClaude {
+  display: inline-flex;
+  align-items: center;
+  background: #7c3aed;
+  color: #fff;
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.12s;
+}
+
+.reviewOpenClaude:hover { opacity: 0.85; color: #fff; text-decoration: none; }
+
+.reviewOpenChatgpt {
+  display: inline-flex;
+  align-items: center;
+  background: #10a37f;
+  color: #fff;
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.12s;
+}
+
+.reviewOpenChatgpt:hover { opacity: 0.85; color: #fff; text-decoration: none; }
+
+.reviewPromptPreview {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+}
+
+.reviewPromptHeader {
+  padding: 0.5rem 0.85rem;
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.reviewPromptLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+}
+
+.reviewPromptText {
+  margin: 0;
+  padding: 1rem;
+  font-size: 0.78rem;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--ifm-font-color-base);
+}
+
+.reviewNewBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s;
+  align-self: flex-start;
+}
+
+.reviewNewBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+/* ── Compact title (embed mode) ───────────────────────────────────────────── */
+
+.toolTitleCompact {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Embed toggle button ─────────────────────────────────────────────────────── */
+
+.embedToggleBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+  white-space: nowrap;
+  font-family: monospace;
+}
+
+.embedToggleBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.embedToggleBtnActive {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  background: rgba(99, 102, 241, 0.06);
+}
+
+/* ── Embed panel ─────────────────────────────────────────────────────────────── */
+
+.embedPanel {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  background: var(--ifm-background-surface-color);
+  margin-bottom: 1rem;
+  overflow: hidden;
+  animation: slideDown 0.16s ease;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.embedPanelHeader {
+  padding: 1rem 1.25rem 0.75rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.embedPanelTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.35rem;
+}
+
+.embedPanelTitle {
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.embedPanelClose {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--ifm-color-emphasis-500);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  transition: background 0.12s;
+}
+
+.embedPanelClose:hover { background: var(--ifm-color-emphasis-100); color: var(--ifm-font-color-base); }
+
+.embedPanelDesc {
+  font-size: 0.83rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.embedWarning {
+  margin: 0.85rem 1.25rem;
+  padding: 0.6rem 0.85rem;
+  background: #fffbeb;
+  color: #92400e;
+  border-radius: 6px;
+  font-size: 0.83rem;
+  border: 1px solid #fcd34d;
+}
+
+[data-theme='dark'] .embedWarning {
+  background: #1c1400;
+  color: #fcd34d;
+  border-color: #78350f;
+}
+
+.embedSizeRow {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1.25rem 0;
+  flex-wrap: wrap;
+}
+
+.embedSizeLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.embedSizeInput {
+  width: 72px;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.82rem;
+  font-family: monospace;
+  text-align: right;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  transition: border-color 0.12s;
+}
+
+.embedSizeInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.embedSizeSep {
+  font-size: 1rem;
+  color: var(--ifm-color-emphasis-400);
+  margin-top: 1px;
+}
+
+.embedSizeUnit {
+  font-size: 0.78rem;
+  color: var(--ifm-color-emphasis-400);
+}
+
+.embedCodeSection {
+  padding: 0.85rem 1.25rem 0;
+}
+
+.embedCodeLabel {
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+  margin-bottom: 0.45rem;
+}
+
+.embedCodeRow {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.embedCodeInput {
+  flex: 1;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.78rem;
+  font-family: monospace;
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  color: var(--ifm-font-color-base);
+  cursor: text;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-theme='dark'] .embedCodeInput {
+  background: rgba(255,255,255,0.03);
+}
+
+.embedCodeInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.embedCopyBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.5rem 1rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.embedCopyBtn:hover { opacity: 0.85; }
+
+.embedPreviewRow {
+  padding: 0.55rem 1.25rem 0;
+}
+
+.embedPreviewLink {
+  font-size: 0.82rem;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.embedPreviewLink:hover { text-decoration: underline; }
+
+.embedInstructions {
+  padding: 0.75rem 1.25rem 1rem;
+  margin-top: 0.25rem;
+}
+
+.embedInstructionsTitle {
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+  margin-bottom: 0.5rem;
+}
+
+.embedInstructionsList {
+  margin: 0;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.embedInstructionsList li {
+  font-size: 0.83rem;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.5;
+}
+
+.embedInstructionsList code {
+  font-family: monospace;
+  font-size: 0.82em;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+}
+
+/* ── File loader additions ────────────────────────────────────────────────────── */
+
+.loaderLabel {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.loaderDivider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 1.25rem;
+  color: var(--ifm-color-emphasis-400);
+  font-size: 0.8rem;
+}
+
+.loaderDivider::before,
+.loaderDivider::after {
+  content: '';
+  flex: 1;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* ── Preview block content (markdown element styles) ─────────────────────────── */
+
+.previewBlockContent {
+  flex: 1;
+  min-width: 0;
+  padding: 0 1.5rem 0.5rem 0.5rem;
+  overflow-x: auto;
+}
+
+.previewBlockContent h1,
+.previewBlockContent h2,
+.previewBlockContent h3,
+.previewBlockContent h4,
+.previewBlockContent h5,
+.previewBlockContent h6 {
+  margin-top: 0.2em;
+  margin-bottom: 0.4em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.previewBlockContent h1 { font-size: 1.8rem; }
+.previewBlockContent h2 { font-size: 1.4rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.3em; }
+.previewBlockContent h3 { font-size: 1.15rem; }
+.previewBlockContent p { margin: 0; line-height: 1.7; }
+
+.previewBlockContent code {
+  font-family: monospace;
+  font-size: 0.85em;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+
+.previewBlockContent pre {
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 7px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 0.25em 0;
+}
+
+.previewBlockContent pre code { background: none; padding: 0; font-size: 0.82rem; }
+
+/* Each list item / blockquote line is rendered as its own standalone
+   ul/ol/blockquote (one per source line, for line-level annotation) —
+   zero out their margins so consecutive lines read as one continuous list. */
+.previewBlockContent ul, .previewBlockContent ol { padding-left: 1.5rem; margin: 0; }
+.previewBlockContent li { margin: 0; }
+
+.previewBlockContent blockquote {
+  border-left: 4px solid var(--ifm-color-emphasis-300);
+  margin: 0;
+  padding: 0.15em 0.85em;
+  color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-radius: 0 6px 6px 0;
+}
+
+.previewBlockContent blockquote p { line-height: 1.6; }
+
+.previewBlockContent hr { border: none; border-top: 1px solid var(--ifm-color-emphasis-300); margin: 0.75em 0; }
+.previewBlockContent a { color: var(--ifm-color-primary); }
+.previewBlockContent strong { font-weight: 700; }
+.previewBlockContent em { font-style: italic; }
+.previewBlockContent del { text-decoration: line-through; }
+
+/* ── Responsive ──────────────────────────────────────────────────────────────── */
+
+@media (max-width: 680px) {
+  .toolTitleRow { flex-direction: column; align-items: flex-start; }
+  .toolHeaderActions { width: 100%; }
+  .previewContent { padding: 1rem; }
+  .reviewActions { flex-direction: column; }
+  .reviewOpenClaude,
+  .reviewOpenChatgpt { justify-content: center; }
+  .embedSizeRow { gap: 0.5rem; }
+  .embedCodeRow { flex-direction: column; }
+  .embedCopyBtn { align-self: flex-start; }
+}
diff --git a/web/src/pages/tools/markdown-annotator.tsx b/web/src/pages/tools/markdown-annotator.tsx
new file mode 100644
index 00000000..7c1f7a49
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator.tsx
@@ -0,0 +1,43 @@
+import React, { lazy, Suspense } from 'react';
+import Layout from '@theme/Layout';
+import Head from '@docusaurus/Head';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+const AnnotatorTool = lazy(() =>
+  import('./_MarkdownAnnotatorContent').then((m) => ({ default: m.AnnotatorTool }))
+);
+
+const loadingFallback = <div style={{ padding: '4rem', textAlign: 'center' }}>Loading…</div>;
+
+const SCHEMA = {
+  '@context': 'https://schema.org',
+  '@type': 'WebApplication',
+  name: 'Markdown Annotator',
+  description:
+    'Annotate markdown and code files with inline review comments. Fetch from GitHub or paste content, add line-level comments, then export a review prompt for Claude or ChatGPT.',
+  url: 'https://treq.dev/tools/markdown-annotator',
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Any',
+  isAccessibleForFree: true,
+  provider: { '@type': 'Organization', name: 'Treq', url: 'https://treq.dev' },
+};
+
+export default function MarkdownAnnotatorPage() {
+  return (
+    <Layout
+      title="Markdown Annotator"
+      description="Annotate markdown and code files with inline review comments, then export as a prompt for Claude or ChatGPT."
+    >
+      <Head>
+        <script type="application/ld+json">{JSON.stringify(SCHEMA)}</script>
+      </Head>
+      <BrowserOnly fallback={loadingFallback}>
+        {() => (
+          <Suspense fallback={loadingFallback}>
+            <AnnotatorTool />
+          </Suspense>
+        )}
+      </BrowserOnly>
+    </Layout>
+  );
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
new file mode 100644
index 00000000..7cb96caa
--- /dev/null
+++ b/web/tailwind.config.js
@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Docusaurus sets data-theme="dark" on <html>, not a .dark class
+  darkMode: ['selector', '[data-theme="dark"]'],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  corePlugins: {
+    // Disable Tailwind's CSS reset — Infima/Docusaurus handles base styles
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      // Mirror the app's CSS variable–driven color system so shared components
+      // render identically on both the desktop app and the docs site.
+      colors: {
+        border:       'hsl(var(--border))',
+        input:        'hsl(var(--input))',
+        ring:         'hsl(var(--ring))',
+        background:   'hsl(var(--background))',
+        foreground:   'hsl(var(--foreground))',
+        primary: {
+          DEFAULT:    'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT:    'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT:    'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT:    'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT:    'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT:    'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius-lg)',
+        md: 'var(--radius-md)',
+        sm: 'var(--radius-sm)',
+      },
+      fontFamily: {
+        mono: ['SF Mono', 'Menlo', 'Monaco', 'Courier New', 'monospace'],
+      },
+    },
+  },
+};