fix(site/about): replace picture element with JS-driven star-history img

The <picture> element used media="(prefers-color-scheme: dark)" which only
responds to OS preference, not the Quarto toggle button. Replace with a
single <img> whose src is swapped by a MutationObserver watching
document.body.classList for the 'quarto-dark' class that the toggle adds.

Author: Shashank-Tripathi-07

site/about/index.qmd

@@ -63,12 +63,30 @@ It started with one course at one university in 2020. Within two years, ten univ
 ```{=html}
 <div style="text-align: center; margin: 1.5rem 0 2rem; background: var(--ab-card-bg); border: 1px solid var(--ab-border); border-radius: 12px; padding: 1.5rem;">
   <a href="https://www.star-history.com/?repos=harvard-edge%2Fcs249r_book&type=date&legend=top-left" target="_blank" rel="noopener">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/image?repos=harvard-edge/cs249r_book&type=date&theme=dark&legend=top-left" />
-      <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/image?repos=harvard-edge/cs249r_book&type=date&legend=top-left" />
-      <img src="https://api.star-history.com/image?repos=harvard-edge/cs249r_book&type=date&legend=top-left" alt="GitHub star growth chart showing adoption over time" style="max-width: 550px; width: 100%; border-radius: 6px;" loading="lazy" />
-    </picture>
+    <img id="star-history-img"
+         src="https://api.star-history.com/image?repos=harvard-edge/cs249r_book&type=date&legend=top-left"
+         alt="GitHub star growth chart showing adoption over time"
+         style="max-width: 550px; width: 100%; border-radius: 6px;"
+         loading="lazy" />
   </a>
+  <script>
+  (function () {
+    var DARK_SRC  = "https://api.star-history.com/image?repos=harvard-edge/cs249r_book&type=date&theme=dark&legend=top-left";
+    var LIGHT_SRC = "https://api.star-history.com/image?repos=harvard-edge/cs249r_book&type=date&legend=top-left";
+    var img = document.getElementById("star-history-img");
+    function syncSrc() {
+      if (!img) return;
+      img.src = document.body.classList.contains("quarto-dark") ? DARK_SRC : LIGHT_SRC;
+    }
+    syncSrc();
+    var observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (m) {
+        if (m.attributeName === "class") syncSrc();
+      });
+    });
+    observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+  })();
+  </script>
   <p style="color: var(--ab-text-muted); font-size: 0.85rem; margin: 1rem 0 0;">Everything here is free — our only ask is a <a href="https://github.com/harvard-edge/cs249r_book" target="_blank" rel="noopener" style="color: var(--ab-accent); font-weight: 600;">⭐ star on GitHub</a>. It tells universities, publishers, and funders that AI engineering education matters.</p>
 </div>
 </div>