Add a hero image: a real guest framebuffer, captured by mcqemu

The splash hero was an empty right column. It now shows a genuine
vm_screenshot capture of KolibriOS running Tetris, set in a window frame
and captioned with the call that produced it, so the picture demonstrates
the tool rather than illustrating it.

The frame is markup plus CSS rather than baked into the raster, so it stays
crisp at any size and follows the theme in both light and dark.

The capture itself was driven through the tools: launch_vm with the ISO,
vm_mouse_move to dismiss KolibriOS's MTRR notification and open Tetris from
the desktop, vm_send_keys to play a few pieces for colour.

docs-site/src/content/docs/index.mdx

@@ -4,6 +4,26 @@ description: An MCP server for QEMU. Launch and drive virtual machines, run disp
 template: splash
 hero:
   tagline: Give an agent a hypervisor. Launch VMs, watch their screens, type into them, snapshot them mid-flight, and throw them away.
+  image:
+    html: |
+      <figure class="vm-frame">
+        <div class="vm-frame__bar">
+          <span class="vm-frame__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+          <span class="vm-frame__name">kolibri</span>
+          <span class="vm-frame__badge">running</span>
+        </div>
+        <img
+          src="/hero-kolibri.png"
+          width="1024"
+          height="768"
+          alt="The KolibriOS desktop running in a virtual machine, with a game of Tetris in progress, captured from the guest framebuffer."
+          loading="eager"
+          decoding="async"
+        />
+        <figcaption class="vm-frame__caption">
+          vm_screenshot(name="kolibri") &rarr; PNG
+        </figcaption>
+      </figure>
   actions:
     - text: Start the tutorial
       link: /tutorial/first-sandbox/

docs-site/src/styles/theme.css

@@ -39,6 +39,72 @@
   --sl-color-black: #ffffff;
 }
 
+/* The hero image is a real capture from a running guest, so it is framed as
+ * a screen rather than floated as artwork. The caption names the call that
+ * produced it, which is the whole point of the picture. */
+.vm-frame {
+  margin: 0;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.6rem;
+  overflow: hidden;
+  background: var(--sl-color-black);
+  box-shadow: 0 1rem 3rem -1rem rgb(0 0 0 / 0.65);
+}
+
+.vm-frame__bar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--sl-color-gray-6);
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  font-family: var(--sl-font-mono);
+  font-size: 0.8rem;
+}
+
+.vm-frame__dots {
+  display: inline-flex;
+  gap: 0.3rem;
+}
+
+.vm-frame__dots i {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--sl-color-gray-4);
+}
+
+.vm-frame__dots i:first-child {
+  background: var(--sl-color-accent);
+}
+
+.vm-frame__name {
+  color: var(--sl-color-gray-2);
+}
+
+.vm-frame__badge {
+  margin-inline-start: auto;
+  color: var(--sl-color-accent-high);
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.vm-frame img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.vm-frame__caption {
+  padding: 0.5rem 0.75rem;
+  background: var(--sl-color-gray-6);
+  border-top: 1px solid var(--sl-color-gray-5);
+  color: var(--sl-color-gray-3);
+  font-family: var(--sl-font-mono);
+  font-size: 0.75rem;
+}
+
 /* Starlight's staggered CardGrid rotates card icon backgrounds through a
  * built-in palette that includes purple and magenta. Hold the whole grid on
  * the accent so the page reads as one thing. */