docs(website): add dark-mode styles to the favicon and social card (#6909)

The favicon tile (#20252b) is almost invisible on a dark browser tab
strip, and the social card opened on its own is light only. Add one
prefers-color-scheme: dark block to each SVG. Each edit is a pure
insertion, and the light render is 0 pixels different in magick and in
CairoSVG. CairoSVG ignores the block, so the PNG that link previews
fetch stays light. website/figures.md says so.

🤖 Generated with Claude Code (Sonnet 5.5) 🦊

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

website/figures.md

@@ -52,6 +52,11 @@ preparation. Check the rendered image for readable text and spacing before
 publishing. The build uses DejaVu Sans for consistent typography; only the SVG
 source is committed. Metadata and build instructions are in the website README.
 
+The card and `public/assets/favicon.svg` each carry a dark
+`prefers-color-scheme` block for people who open the SVG directly or use a dark
+browser tab strip. CairoSVG ignores it, so the PNG that link previews fetch
+stays light.
+
 ## Beginner homepage and dinosaur reconstruction
 
 The manual/agent comparison and Calculator percentage controls are semantic

website/public/assets/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="5" fill="#20252b"/><path fill="#fff" d="M9 7h7.5c5 0 7.5 2.3 7.5 6.2 0 2.8-1.4 4.7-4 5.6L25 25h-5l-4.5-5.8H13V25H9zm4 3.5v5.2h3.5c2.3 0 3.5-.8 3.5-2.6s-1.2-2.6-3.5-2.6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>@media (prefers-color-scheme: dark){rect{fill:#89b4fa}path{fill:#11111b}}</style><rect width="32" height="32" rx="5" fill="#20252b"/><path fill="#fff" d="M9 7h7.5c5 0 7.5 2.3 7.5 6.2 0 2.8-1.4 4.7-4 5.6L25 25h-5l-4.5-5.8H13V25H9zm4 3.5v5.2h3.5c2.3 0 3.5-.8 3.5-2.6s-1.2-2.6-3.5-2.6z"/></svg>

website/public/assets/social-card.svg

@@ -1,6 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
   <title id="title">REA — Find out how software works.</title>
   <desc id="desc">Reverse engineering with your coding agent. REA connects your agent to analysis tools and returns evidence.</desc>
+  <style>
+@media (prefers-color-scheme: dark){
+[fill="#ffffff"]{fill:#181825}
+[fill="#f0f5fa"]{fill:#313244}
+[fill="#20252b"]{fill:#cdd6f4}
+[fill="#5b6570"]{fill:#a6adc8}
+[fill="#294f82"]{fill:#89b4fa}
+[stroke="#dce2e8"]{stroke:#45475a}
+[stroke="#5b6570"]{stroke:#a6adc8}
+[stroke="#294f82"]{stroke:#89b4fa}
+}
+  </style>
   <rect width="1200" height="630" fill="#ffffff"/>
   <g font-family="DejaVu Sans, sans-serif" fill="#20252b">
     <text x="72" y="110" font-size="44" font-weight="700">REA</text>