docs: document Gotcha #14 (body over html), retake screenshots for light theme

web/index.html

@@ -8,7 +8,9 @@
     <!-- Apply stored theme before first paint — prevents FOUT flash on dark/hacker themes.
          Mirrors the logic in useTheme.initTheme(). Must run before the <style> below. -->
     <script>try{if(localStorage.getItem('cf-hacker-mode')==='true'){document.documentElement.dataset.theme='hacker';}else{var t=localStorage.getItem('cf-theme');if(t&&t!=='auto')document.documentElement.dataset.theme=t;}}catch(e){}</script>
-    <!-- FOUT prevention: background only on html (body is transparent).
+    <!-- FOUT prevention: background only on html (body is transparent). Gotcha #14.
+         body paints on top of html — a hardcoded body background covers html's CSS-
+         variable-driven color even when it resolves correctly. Keep background off body.
          Covers auto mode (media query) and all explicit theme choices. -->
     <style>
       html, body { margin: 0; min-height: 100vh; }

web/src/App.vue

@@ -71,6 +71,10 @@ html {
 }
 
 body {
+  /* Gotcha #14: do NOT set background on body. body paints on top of html —
+     a hardcoded body background will cover html's CSS-variable-driven color
+     even when html { background: var(--color-surface) } resolves correctly.
+     FOUT prevention lives in index.html on html only, not body. */
   min-height: 100dvh;   /* dynamic viewport — mobile chrome-aware. Gotcha #13. */
   overflow-x: hidden;
 }