diff --git a/docs/showcase/book-spread.png b/docs/showcase/book-spread.png
index 72a3c77..2e1f002 100644
Binary files a/docs/showcase/book-spread.png and b/docs/showcase/book-spread.png differ
diff --git a/docs/showcase/book.png b/docs/showcase/book.png
index 9f97c0a..3837d0b 100644
Binary files a/docs/showcase/book.png and b/docs/showcase/book.png differ
diff --git a/docs/showcase/newsletter-tables.png b/docs/showcase/newsletter-tables.png
index 95dea8d..e2f4022 100644
Binary files a/docs/showcase/newsletter-tables.png and b/docs/showcase/newsletter-tables.png differ
diff --git a/docs/showcase/newsletter.png b/docs/showcase/newsletter.png
index 72f7a6a..2f0d6f5 100644
Binary files a/docs/showcase/newsletter.png and b/docs/showcase/newsletter.png differ
diff --git a/docs/showcase/thesis-contents.png b/docs/showcase/thesis-contents.png
index 66c49d1..8afbcc0 100644
Binary files a/docs/showcase/thesis-contents.png and b/docs/showcase/thesis-contents.png differ
diff --git a/docs/showcase/thesis-dark.png b/docs/showcase/thesis-dark.png
index 4ec4fb9..b6ad4a2 100644
Binary files a/docs/showcase/thesis-dark.png and b/docs/showcase/thesis-dark.png differ
diff --git a/docs/showcase/thesis-overview.png b/docs/showcase/thesis-overview.png
index 9122950..14d998d 100644
Binary files a/docs/showcase/thesis-overview.png and b/docs/showcase/thesis-overview.png differ
diff --git a/docs/showcase/thesis-review.png b/docs/showcase/thesis-review.png
index 25f492b..1dc086e 100644
Binary files a/docs/showcase/thesis-review.png and b/docs/showcase/thesis-review.png differ
diff --git a/docs/showcase/thesis.png b/docs/showcase/thesis.png
index 4ab6a63..3107b9d 100644
Binary files a/docs/showcase/thesis.png and b/docs/showcase/thesis.png differ
diff --git a/scripts/showcase/run.mjs b/scripts/showcase/run.mjs
index a604f98..a74f7bf 100644
--- a/scripts/showcase/run.mjs
+++ b/scripts/showcase/run.mjs
@@ -13,7 +13,8 @@ const DOCS = ['thesis', 'thesis-review', 'book', 'newsletter'].filter((n) => !on
 
 await mkdir(OUT, { recursive: true });
 const server = await devServer(PORT);
-const { browser, page, pageErrors } = await openApp(PORT);
+// Same CSS viewport as the tests, shot at 2x so the README images stay sharp when scaled.
+const { browser, page, pageErrors } = await openApp(PORT, { deviceScaleFactor: 2 });
 const url = `http://localhost:${PORT}/`;
 
 const ready = async () => {
diff --git a/tests/browser.mjs b/tests/browser.mjs
index 8f01941..35b7e33 100644
--- a/tests/browser.mjs
+++ b/tests/browser.mjs
@@ -49,14 +49,14 @@ export async function devServer(port) {
 
 // BROWSER=chromium|firefox|webkit picks the engine (Chromium by default). Fixed locale,
 // so the UI labels a test clicks are deterministic across machines.
-export async function openApp(port) {
+export async function openApp(port, opts = {}) {
   const name = process.env.BROWSER ?? 'chromium';
   const engine = playwright[name];
   if (!engine) throw new Error(`unknown BROWSER "${name}": chromium, firefox or webkit`);
   const args = name === 'chromium' ? ['--no-sandbox'] : [];
   const browser = await engine.launch({ executablePath: engine.executablePath(), args });
   console.log(`engine: ${name} ${browser.version()}`);
-  const page = await browser.newPage({ viewport: { width: 1400, height: 1000 }, locale: 'en-US' });
+  const page = await browser.newPage({ viewport: { width: 1400, height: 1000 }, locale: 'en-US', ...opts });
   const pageErrors = [];
   // The text box's ResizeObserver refits the wrapper it observes, so the browser defers
   // the rest of the round to the next frame and reports it — a converging loop, not an error.