docs: AMO listing: add screenshots and a description that covers every way to use the extension (#24)

docs/amo/README.md holds a paste-ready summary, description and screenshot
captions for the 1.3 listing. The copy covers the address bar, right-click,
keyboard shortcut and toolbar button, says the extension is small on
purpose, and follows the "filled in, never sent" copy rule. A cat joke
replaces the programmer joke.

The five 1280x800 images are the options page's drawings, enlarged by
docs/amo/screenshots.html and rendered with headless Firefox. The README
explains how to regenerate them. docs/ stays out of the package.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/amo/screenshots.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<!-- Renders the options page drawings as 1280x800 images for the
+     addons.mozilla.org listing. Open with a #fragment (#1-address-bar) to
+     show one image; without one, every image is shown in order.
+     README.md in this folder explains how to regenerate them. Keep the
+     markup in step with the drawings in options/options.html. -->
+<meta charset="utf-8" />
+<title>Add-ons listing images</title>
+<link rel="stylesheet" href="../../options/options.css" />
+<style>
+  body {
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    background: #ffffff;
+  }
+
+  .shot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1280px;
+    height: 800px;
+  }
+
+  body:has(.shot:target) .shot:not(:target) {
+    display: none;
+  }
+
+  /* zoom re-lays the drawing out at the larger size, so text stays sharp. */
+  .stage {
+    width: 24rem;
+    zoom: 2.6;
+  }
+
+  .stage-wide {
+    width: 26rem;
+    zoom: 2.4;
+  }
+
+  .stage .drawing {
+    margin: 0;
+    max-width: none;
+  }
+
+  .stage .drawing-keycaps {
+    padding-top: 0.5rem;
+  }
+</style>
+
+<section class="shot" id="1-address-bar">
+  <div class="stage stage-wide">
+    <div class="drawing">
+      <div class="drawing-urlbar">
+        <span class="drawing-chip"><img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />ChatGPT</span>
+        <span class="drawing-typed">why does my cat knock things over?</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="2-right-click">
+  <div class="stage">
+    <div class="drawing">
+      <p class="drawing-page">Nobody knows <mark>why cats knock things over</mark>…</p>
+      <div class="drawing-menu">
+        <div>Copy</div>
+        <div>Select All</div>
+        <hr />
+        <div class="drawing-menu-active"><img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />Ask ChatGPT</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="3-keyboard">
+  <div class="stage">
+    <div class="drawing">
+      <p class="drawing-page">Cats sleep for <mark>sixteen hours a day</mark>.</p>
+      <div class="drawing-keycaps">
+        <kbd class="drawing-key">Alt</kbd>+<kbd class="drawing-key">Shift</kbd>+<kbd class="drawing-key">G</kbd>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="4-toolbar">
+  <div class="stage">
+    <div class="drawing">
+      <div class="drawing-toolbar">
+        <span class="drawing-address">example.com</span>
+        <span class="drawing-button">
+          <svg viewBox="0 0 16 16"><path d="M2 5.5h3a2 2 0 1 1 3.2 0h3.3v2.8a2 2 0 1 1 0 3.2v3H2z" /></svg>
+        </span>
+        <span class="drawing-button drawing-button-hover">
+          <img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />
+          <svg class="drawing-pointer" viewBox="0 0 12 18"><path d="M1 1v14.5l3.6-3.4 2.6 5.6 2.2-1-2.6-5.5H11z" /></svg>
+        </span>
+        <span class="drawing-button">
+          <svg viewBox="0 0 16 16"><path d="M3 4.5h10M3 8h10M3 11.5h10" /></svg>
+        </span>
+        <span class="drawing-tooltip">Ask ChatGPT</span>
+      </div>
+      <p class="drawing-content"><mark>Why cats sit in every box</mark></p>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="5-advanced-menu">
+  <div class="stage">
+    <div class="drawing">
+      <div class="drawing-menus">
+        <div class="drawing-menu">
+          <div>Copy</div>
+          <div>Select All</div>
+          <hr />
+          <div class="drawing-menu-active"><img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />Ask ChatGPT<span class="drawing-submenu-arrow">›</span></div>
+        </div>
+        <div class="drawing-menu drawing-submenu">
+          <div>Ask normally</div>
+          <hr />
+          <div class="drawing-menu-active">Explain</div>
+          <div>Summarize</div>
+          <div>Debug code</div>
+          <div>Translate…</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>