fix(site): actually use both themes of every screenshot

Capture rendered 10 images; the docs referenced 5. The other five were dead
weight, and the ones in use mixed themes arbitrarily — topology-light sat
among four dark shots, which reads as a mistake rather than a choice.

A docs site with a theme toggle should show the matching screenshot, so both
are now emitted per view and Starlight's own light:sl-hidden /
dark:sl-hidden utilities pick one. That is the mechanism Starlight's docs use
for theme-specific images, so it tracks the toggle with no script of ours.

Needed MDX for the two pages, since a themed pair can't be expressed as a
markdown image. ThemedShot resolves the pair via an eager import.meta.glob so
Astro still optimises both to webp, and throws a named error pointing at
 if one is missing — verified by deleting one.

Claude-Session: https://claude.ai/code/session_01RgSnMCa3JQigphGnPbazdw

Author: RAR

site/src/components/ThemedShot.astro

@@ -0,0 +1,51 @@
+---
+// A device-UI screenshot that follows the reader's theme.
+//
+// capture.mjs renders every view in both themes. Showing only one of them means
+// half the readers see a dark screenshot on a light page (or the reverse), and
+// it also left five generated images unused. Both are emitted here and Starlight's
+// own `light:sl-hidden` / `dark:sl-hidden` utilities pick one — the same
+// mechanism its docs use for theme-specific images, so it stays in sync with
+// the theme toggle without any script of ours.
+//
+// `name` is the view stem: "dashboard" resolves dashboard-light.png and
+// dashboard-dark.png.
+import { Image } from 'astro:assets';
+
+interface Props {
+  name: string;
+  alt: string;
+}
+const { name, alt } = Astro.props;
+
+// import.meta.glob is eager so Astro processes and optimises both files at
+// build time; a runtime import() would leave them unoptimised.
+const shots = import.meta.glob<{ default: ImageMetadata }>(
+  '../assets/screenshots/*.png',
+  { eager: true },
+);
+
+const pick = (theme: string) => {
+  const key = `../assets/screenshots/${name}-${theme}.png`;
+  const mod = shots[key];
+  if (!mod) {
+    throw new Error(
+      `ThemedShot: no screenshot at ${key}. ` +
+      `Run \`npm run screenshots\` — these are generated, not committed.`,
+    );
+  }
+  return mod.default;
+};
+---
+
+<Image src={pick('light')} alt={alt} class="tigo-shot dark:sl-hidden" loading="lazy" />
+<Image src={pick('dark')} alt={alt} class="tigo-shot light:sl-hidden" loading="lazy" />
+
+<style is:global>
+  .tigo-shot {
+    width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    border: 1px solid var(--sl-color-gray-5);
+  }
+</style>

…c/content/docs/guides/getting-started.md …/content/docs/guides/getting-started.mdxsite/src/content/docs/guides/getting-started.md renamed to site/src/content/docs/guides/getting-started.mdx site/src/content/docs/guides/getting-started.md renamed to site/src/content/docs/guides/getting-started.mdx

@@ -2,6 +2,8 @@
 title: Start Here
 description: What Tigo Monitor does, what you need to buy, and the five steps from parts on the desk to a live per-panel dashboard.
 ---
+import ThemedShot from '../../../components/ThemedShot.astro';
+
 
 If your roof has Tigo optimizers on it, your panels are already reporting how much
 power each one makes. That information goes to Tigo's box and, usually, to Tigo's
@@ -14,8 +16,7 @@ equipment, so it can't disturb anything.
 
 ## What you'll end up with
 
-![The Tigo Monitor dashboard: a coloured tile per panel, grouped by string, with
-one shaded panel showing amber.](../../../assets/screenshots/dashboard-dark.png)
+<ThemedShot name="dashboard" alt="The Tigo Monitor dashboard: a coloured tile per panel, grouped by string, with one shaded panel showing amber." />
 
 - A web page on your home network showing **every panel individually** — watts,
   volts, amps, temperature — updating live.

…te/src/content/docs/guides/web-server.md …e/src/content/docs/guides/web-server.mdxsite/src/content/docs/guides/web-server.md renamed to site/src/content/docs/guides/web-server.mdx site/src/content/docs/guides/web-server.md renamed to site/src/content/docs/guides/web-server.mdx

@@ -1,6 +1,8 @@
 ---
 title: Web Server & API
 ---
+import ThemedShot from '../../../components/ThemedShot.astro';
+
 
 The device serves its own dashboard. Type its IP address into any browser on your
 home network and it's there — no app to install, nothing to sign into, and it
@@ -24,23 +26,19 @@ anyone who wants to pull the numbers into their own scripts.
 
 ### What it looks like
 
-![Dashboard — a tile per panel, grouped by string. The amber tile is a shaded
-panel.](../../../assets/screenshots/dashboard-dark.png)
+<ThemedShot name="dashboard" alt="Dashboard — a tile per panel, grouped by string. The amber tile is a shaded panel." />
 
-![History — power and energy over the selected range, read from the on-device
-database.](../../../assets/screenshots/history-dark.png)
+<ThemedShot name="history" alt="History — power and energy over the selected range, read from the on-device database." />
 
-![Topology — your array as inverter, string and panel, with live
-readings.](../../../assets/screenshots/topology-light.png)
+<ThemedShot name="topology" alt="Topology — your array as inverter, string and panel, with live readings." />
 
-![Node Table — every panel the device has seen, sortable and
-filterable.](../../../assets/screenshots/nodes-dark.png)
+<ThemedShot name="nodes" alt="Node Table — every panel the device has seen, sortable and filterable." />
 
-![Diagnostics — memory, network, UART counters and time-series database
-stats.](../../../assets/screenshots/diagnostics-dark.png)
+<ThemedShot name="diagnostics" alt="Diagnostics — memory, network, UART counters and time-series database stats." />
 
-These are generated automatically from the current UI against synthetic data —
-no real install's serials, addresses or account details appear in them.
+These are generated from the current UI against synthetic data — no real
+install's serials, addresses or account details appear in them. They follow
+this page's theme, so what you see is what the device will look like for you.
 
 ### Two things worth knowing