diff --git a/diff-checker/index.html b/diff-checker/index.html
new file mode 100644
index 0000000..0b4c854
--- /dev/null
+++ b/diff-checker/index.html
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="theme-color" content="#eef0f4">
+  <title>Diff Checker</title>
+  <style>
+    /* Single self-contained file — no remote fonts, scripts, styles or network.
+       Every colour goes through a token so dark mode flips for free. Diff itself
+       is a pure-JS LCS edit script; the browser does the rest. */
+    :root {
+      color-scheme: light dark;
+
+      --primary: #4d63ff;
+      --primary-text: #3b50e0;
+      --primary-active: #6f82ff;
+      --primary-pale: #e6ebff;
+      --on-primary: #ffffff;
+
+      --ink: #111318;
+      --body: #454852;
+      --mute: #868a93;
+
+      --canvas: #ffffff;
+      --canvas-soft: #eef0f4;
+      --line: #dfe3ec;
+
+      /* Semantic families (from the design system) drive the diff highlights.
+         Added = positive green, Removed = negative red. Never colour-only:
+         additions are underlined, deletions struck through. */
+      --add-fill: #22a559;
+      --add-text: #0c5230;
+      --add-bg: #e2f5ea;
+      --del-fill: #e0453f;
+      --del-text: #b02a2a;
+      --del-bg: #fbe3e2;
+
+      --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --primary: #8b9bff;
+        --primary-text: #8b9bff;
+        --primary-active: #a8b4ff;
+        --primary-pale: #232842;
+        --on-primary: #111318;
+
+        --ink: #eceff5;
+        --body: #a9b0bf;
+        --mute: #7d8494;
+
+        --canvas: #20242e;
+        --canvas-soft: #14161b;
+        --line: #2f333d;
+
+        --add-fill: #34d17f;
+        --add-text: #8fe6b4;
+        --add-bg: #14301f;
+        --del-fill: #f2766f;
+        --del-text: #f6a6a2;
+        --del-bg: #34161a;
+      }
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: var(--sans);
+      font-feature-settings: "calt";
+      background: var(--canvas-soft);
+      color: var(--ink);
+      min-height: 100dvh;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 28px 20px;
+    }
+
+    .container {
+      background: var(--canvas);
+      border-radius: 24px;
+      padding: 32px;
+      width: 100%;
+      max-width: 940px;
+    }
+
+    header { margin-bottom: 22px; }
+    .eyebrow {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: var(--primary-text);
+      margin-bottom: 6px;
+    }
+    h1 {
+      font-family: var(--display);
+      font-size: clamp(1.8rem, 5vw, 2.4rem);
+      font-weight: 900;
+      letter-spacing: -0.02em;
+      line-height: 1.05;
+      color: var(--ink);
+    }
+    p.sub { color: var(--body); margin-top: 8px; max-width: 60ch; }
+
+    /* ── input grid ─────────────────────────────────────────── */
+    .inputs {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+    @media (max-width: 640px) { .inputs { grid-template-columns: 1fr; } }
+
+    .field { display: flex; flex-direction: column; gap: 8px; }
+    .field label {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--mute);
+    }
+    textarea {
+      font-family: var(--mono);
+      font-size: 0.9rem;
+      line-height: 1.55;
+      color: var(--ink);
+      background: var(--canvas-soft);
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      padding: 14px 16px;
+      resize: vertical;
+      min-height: 150px;
+      width: 100%;
+      transition: border-color 0.15s;
+    }
+    textarea::placeholder { color: var(--mute); }
+    textarea:focus-visible {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px var(--primary-pale);
+    }
+
+    /* ── controls ───────────────────────────────────────────── */
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 12px;
+      margin: 20px 0 16px;
+    }
+    .segmented {
+      display: inline-flex;
+      background: var(--canvas-soft);
+      border: 1px solid var(--line);
+      border-radius: 24px;
+      padding: 4px;
+      gap: 2px;
+    }
+    .segmented button {
+      font-family: inherit;
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--body);
+      background: transparent;
+      border: none;
+      border-radius: 20px;
+      padding: 7px 18px;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+    .segmented button[aria-pressed="true"] {
+      background: var(--primary);
+      color: var(--on-primary);
+    }
+    .segmented button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+
+    .spacer { flex: 1 1 auto; }
+
+    .ghost {
+      font-family: inherit;
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--body);
+      background: transparent;
+      border: 1px solid var(--line);
+      border-radius: 24px;
+      padding: 8px 16px;
+      cursor: pointer;
+      transition: border-color 0.15s, color 0.15s;
+    }
+    .ghost:hover { border-color: var(--primary); color: var(--primary-text); }
+    .ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+
+    /* ── stats ──────────────────────────────────────────────── */
+    .stats {
+      display: flex;
+      gap: 18px;
+      align-items: center;
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--mute);
+    }
+    .stat { display: inline-flex; align-items: center; gap: 6px; }
+    .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
+    .dot.add { background: var(--add-fill); }
+    .dot.del { background: var(--del-fill); }
+    .stat.add b { color: var(--add-text); }
+    .stat.del b { color: var(--del-text); }
+
+    /* ── result ─────────────────────────────────────────────── */
+    .result {
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      background: var(--canvas-soft);
+      padding: 18px 20px;
+      min-height: 120px;
+      font-family: var(--mono);
+      font-size: 0.9rem;
+      line-height: 1.7;
+      color: var(--ink);
+      overflow-x: auto;
+    }
+    .result.words { white-space: pre-wrap; word-break: break-word; }
+
+    ins {
+      text-decoration: none;
+      background: var(--add-bg);
+      color: var(--add-text);
+      border-bottom: 2px solid var(--add-fill);
+      border-radius: 3px;
+      padding: 0 1px;
+    }
+    del {
+      text-decoration: line-through;
+      text-decoration-color: var(--del-fill);
+      background: var(--del-bg);
+      color: var(--del-text);
+      border-radius: 3px;
+      padding: 0 1px;
+    }
+
+    /* line mode rows */
+    .row { display: flex; gap: 12px; padding: 1px 4px; border-radius: 4px; }
+    .row .gutter { flex: none; width: 1.2em; text-align: center; color: var(--mute); font-weight: 700; user-select: none; }
+    .row .text { white-space: pre-wrap; word-break: break-word; flex: 1 1 auto; }
+    .row.add { background: var(--add-bg); }
+    .row.add .gutter, .row.add .text { color: var(--add-text); }
+    .row.del { background: var(--del-bg); }
+    .row.del .gutter, .row.del .text { color: var(--del-text); }
+
+    .empty { color: var(--mute); font-family: var(--sans); font-style: italic; }
+    .notice {
+      color: var(--del-text);
+      font-family: var(--sans);
+      font-size: 0.85rem;
+      margin-bottom: 12px;
+      display: none;
+    }
+    .notice.show { display: block; }
+
+    footer { margin-top: 16px; font-size: 0.8rem; color: var(--mute); }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="eyebrow">Writing &middot; Compare</div>
+      <h1>Diff Checker</h1>
+      <p class="sub">Paste two versions of your text and see exactly what changed — additions and
+        deletions highlighted inline, word by word or line by line. Everything stays on your device.</p>
+    </header>
+
+    <div class="inputs">
+      <div class="field">
+        <label for="a">Original</label>
+        <textarea id="a" spellcheck="false" placeholder="Paste the original text…"></textarea>
+      </div>
+      <div class="field">
+        <label for="b">Changed</label>
+        <textarea id="b" spellcheck="false" placeholder="Paste the changed text…"></textarea>
+      </div>
+    </div>
+
+    <div class="controls">
+      <div class="segmented" role="group" aria-label="Comparison granularity">
+        <button id="mode-words" aria-pressed="true">Words</button>
+        <button id="mode-lines" aria-pressed="false">Lines</button>
+      </div>
+      <div class="stats" aria-live="polite">
+        <span class="stat add"><span class="dot add"></span><b id="add-count">0</b>&nbsp;added</span>
+        <span class="stat del"><span class="dot del"></span><b id="del-count">0</b>&nbsp;removed</span>
+      </div>
+      <span class="spacer"></span>
+      <button class="ghost" id="swap" title="Swap original and changed">⇄ Swap</button>
+      <button class="ghost" id="clear">Clear</button>
+    </div>
+
+    <p class="notice" id="notice"></p>
+    <div class="result words" id="result" aria-live="polite"></div>
+
+    <footer>Tip: “Words” is best for prose; “Lines” reads like a code / list diff. Your text is saved locally.</footer>
+  </div>
+
+  <script>
+    const NS = 'diff-checker:';
+    const aEl = document.getElementById('a');
+    const bEl = document.getElementById('b');
+    const resultEl = document.getElementById('result');
+    const noticeEl = document.getElementById('notice');
+    const addCountEl = document.getElementById('add-count');
+    const delCountEl = document.getElementById('del-count');
+    const modeWordsBtn = document.getElementById('mode-words');
+    const modeLinesBtn = document.getElementById('mode-lines');
+
+    // Guard against pathological O(n·m) blow-ups. Well beyond any normal note.
+    const MAX_TOKENS = 2600;
+
+    let mode = localStorage.getItem(NS + 'mode') === 'lines' ? 'lines' : 'words';
+
+    // A short worked example on the very first visit — shows what the tool does
+    // and gives new users something to edit. Cleared state is stored as '' (not
+    // removed), so the sample never comes back once you've made the panes your own.
+    const SAMPLE_A = 'The quick brown fox jumps over the lazy dog.\nWe ship the update on Friday.';
+    const SAMPLE_B = 'The swift brown fox leaps over the sleeping dog.\nWe ship the update on Monday.';
+
+    // Restore saved text, or seed the example on first run.
+    const savedA = localStorage.getItem(NS + 'a');
+    const savedB = localStorage.getItem(NS + 'b');
+    if (savedA === null && savedB === null) {
+      aEl.value = SAMPLE_A;
+      bEl.value = SAMPLE_B;
+    } else {
+      aEl.value = savedA || '';
+      bEl.value = savedB || '';
+    }
+
+    // ── LCS edit script ──────────────────────────────────────
+    // Returns ordered ops: ['eq'|'del'|'ins', token]. Longest common
+    // subsequence via bottom-up DP, then a single forward backtrack.
+    function lcsDiff(a, b) {
+      const n = a.length, m = b.length;
+      const dp = [];
+      for (let i = 0; i <= n; i++) dp.push(new Uint32Array(m + 1));
+      for (let i = n - 1; i >= 0; i--) {
+        const row = dp[i], next = dp[i + 1];
+        for (let j = m - 1; j >= 0; j--) {
+          row[j] = a[i] === b[j] ? next[j + 1] + 1 : Math.max(next[j], row[j + 1]);
+        }
+      }
+      const ops = [];
+      let i = 0, j = 0;
+      while (i < n && j < m) {
+        if (a[i] === b[j]) { ops.push(['eq', a[i]]); i++; j++; }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) { ops.push(['del', a[i]]); i++; }
+        else { ops.push(['ins', b[j]]); j++; }
+      }
+      while (i < n) { ops.push(['del', a[i++]]); }
+      while (j < m) { ops.push(['ins', b[j++]]); }
+      return ops;
+    }
+
+    // Collapse runs of the same op type into { type, text }.
+    function groupOps(ops) {
+      const groups = [];
+      for (const [type, tok] of ops) {
+        const last = groups[groups.length - 1];
+        if (last && last.type === type) last.text += tok;
+        else groups.push({ type, text: tok });
+      }
+      return groups;
+    }
+
+    // Word-mode tokens keep whitespace as its own tokens, so the rebuilt
+    // output preserves spacing and line breaks exactly (via white-space:pre-wrap).
+    function wordTokens(s) { return s.match(/\s+|\S+/g) || []; }
+    const isWord = (t) => /\S/.test(t);
+
+    function render() {
+      const a = aEl.value, b = bEl.value;
+      noticeEl.classList.remove('show');
+
+      if (!a && !b) {
+        resultEl.className = 'result words';
+        resultEl.innerHTML = '<span class="empty">Your comparison will appear here.</span>';
+        addCountEl.textContent = '0';
+        delCountEl.textContent = '0';
+        return;
+      }
+
+      let effectiveMode = mode;
+      if (mode === 'words') {
+        const ta = wordTokens(a), tb = wordTokens(b);
+        if (ta.length > MAX_TOKENS || tb.length > MAX_TOKENS) {
+          effectiveMode = 'lines';
+          noticeEl.textContent = 'Text is large — showing a line-by-line diff for performance.';
+          noticeEl.classList.add('show');
+        } else {
+          renderWords(ta, tb);
+          return;
+        }
+      }
+      renderLines(a, b, effectiveMode === 'lines' && mode === 'words');
+    }
+
+    function renderWords(ta, tb) {
+      const groups = groupOps(lcsDiff(ta, tb));
+      resultEl.className = 'result words';
+      resultEl.textContent = '';
+      let added = 0, removed = 0;
+      for (const g of groups) {
+        let node;
+        if (g.type === 'ins') { node = document.createElement('ins'); added += (g.text.match(/\S+/g) || []).length; }
+        else if (g.type === 'del') { node = document.createElement('del'); removed += (g.text.match(/\S+/g) || []).length; }
+        else node = document.createTextNode(g.text);
+        if (node.nodeType !== 3) node.textContent = g.text;
+        resultEl.appendChild(node);
+      }
+      if (!groups.length) resultEl.innerHTML = '<span class="empty">Both sides are identical.</span>';
+      addCountEl.textContent = String(added);
+      delCountEl.textContent = String(removed);
+    }
+
+    function renderLines(a, b) {
+      const la = a.length ? a.split('\n') : [];
+      const lb = b.length ? b.split('\n') : [];
+      if (la.length > MAX_TOKENS * 2 || lb.length > MAX_TOKENS * 2) {
+        resultEl.className = 'result';
+        resultEl.innerHTML = '<span class="empty">Text is too large to diff. Try comparing smaller sections.</span>';
+        noticeEl.classList.remove('show');
+        return;
+      }
+      const ops = lcsDiff(la, lb);
+      resultEl.className = 'result';
+      resultEl.textContent = '';
+      let added = 0, removed = 0;
+      for (const [type, text] of ops) {
+        const row = document.createElement('div');
+        row.className = 'row' + (type === 'ins' ? ' add' : type === 'del' ? ' del' : '');
+        const gutter = document.createElement('span');
+        gutter.className = 'gutter';
+        gutter.textContent = type === 'ins' ? '+' : type === 'del' ? '−' : '';
+        const txt = document.createElement('span');
+        txt.className = 'text';
+        txt.textContent = text === '' ? ' ' : text;
+        row.appendChild(gutter);
+        row.appendChild(txt);
+        resultEl.appendChild(row);
+        if (type === 'ins') added++;
+        else if (type === 'del') removed++;
+      }
+      if (!ops.length) resultEl.innerHTML = '<span class="empty">Both sides are identical.</span>';
+      addCountEl.textContent = String(added);
+      delCountEl.textContent = String(removed);
+    }
+
+    function setMode(next) {
+      mode = next;
+      localStorage.setItem(NS + 'mode', mode);
+      modeWordsBtn.setAttribute('aria-pressed', String(mode === 'words'));
+      modeLinesBtn.setAttribute('aria-pressed', String(mode === 'lines'));
+      render();
+    }
+
+    // Debounce so typing stays snappy on large inputs.
+    let raf = 0;
+    function schedule() {
+      localStorage.setItem(NS + 'a', aEl.value);
+      localStorage.setItem(NS + 'b', bEl.value);
+      clearTimeout(raf);
+      raf = setTimeout(render, 120);
+    }
+
+    aEl.addEventListener('input', schedule);
+    bEl.addEventListener('input', schedule);
+    modeWordsBtn.addEventListener('click', () => setMode('words'));
+    modeLinesBtn.addEventListener('click', () => setMode('lines'));
+    document.getElementById('swap').addEventListener('click', () => {
+      const t = aEl.value; aEl.value = bEl.value; bEl.value = t;
+      schedule();
+    });
+    document.getElementById('clear').addEventListener('click', () => {
+      aEl.value = ''; bEl.value = '';
+      localStorage.setItem(NS + 'a', '');
+      localStorage.setItem(NS + 'b', '');
+      render();
+    });
+
+    setMode(mode);
+  </script>
+</body>
+</html>
diff --git a/screenshots/diff-checker.webp b/screenshots/diff-checker.webp
new file mode 100644
index 0000000..c05044d
Binary files /dev/null and b/screenshots/diff-checker.webp differ
diff --git a/tools.json b/tools.json
index 56f41fa..5e50282 100644
--- a/tools.json
+++ b/tools.json
@@ -1,5 +1,5 @@
 {
-  "catalogVersion": 23,
+  "catalogVersion": 24,
   "tools": [
     {
       "dir": "color-capture",
@@ -224,6 +224,14 @@
       "glyph": "🎯",
       "color": "#4d63ff",
       "version": 2
+    },
+    {
+      "dir": "diff-checker",
+      "name": "Diff Checker",
+      "description": "Compare two versions of any text and see exactly what changed — additions and deletions highlighted inline, word by word or line by line.",
+      "glyph": "🔀",
+      "color": "#c026d3",
+      "version": 1
     }
   ]
 }
