fix: hero demo popup closes on any outside click, add close button

Outside-click handling was scoped to the demo scene, so clicks elsewhere
on the page left the popup open and it felt unclosable. A document-level
listener now collapses it from anywhere, like a real extension popup,
and the popup header gained an explicit close button next to the version
link (hidden in the static mobile mockup).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

website/app.js

@@ -789,6 +789,26 @@ document.addEventListener('DOMContentLoaded', () => {
         scene.addEventListener('pointerdown', takeOver, true);
         scene.addEventListener('keydown', takeOver, true);
 
+        // Clicking anywhere else on the page also closes the popup, like a
+        // real browser extension popup would.
+        document.addEventListener('pointerdown', (e) => {
+            if (!scene.classList.contains('popup-open')) return;
+            if (scene.contains(e.target)) return; // in-scene clicks are handled by takeOver
+            userTookOver = true;
+            finishDemo();
+            setPopupOpen(false);
+        }, true);
+
+        // Explicit close button in the popup header
+        const popupCloseBtn = scene.querySelector('#demo-popup-close');
+        if (popupCloseBtn) {
+            popupCloseBtn.addEventListener('click', () => {
+                userTookOver = true;
+                finishDemo();
+                setPopupOpen(false);
+            });
+        }
+
         const runDemo = async () => {
             if (demoStarted || userTookOver || reduceMotion) return;
             demoStarted = true;

website/style.css

@@ -755,6 +755,35 @@ html.theme-light .koala-speech-bubble::after {
     color: var(--accent);
 }
 
+/* Close button for the hero demo popup (hidden in the static mobile mockup) */
+.mock-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin-left: 8px;
+    padding: 0;
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+}
+
+.mock-close-btn:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 1024px) {
+    .mock-close-btn {
+        display: none;
+    }
+}
+
 .mock-tabs {
     display: flex;
     gap: 4px;

website/template.html

@@ -444,6 +444,9 @@
                             <svg viewBox="0 0 16 16" fill="currentColor" style="width: 12px; height: 12px; display: block;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
                             <span class="mockup-version">{{VERSION}}</span>
                         </a>
+                        <button class="mock-close-btn" id="demo-popup-close" type="button" aria-label="Close popup" title="Close popup">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" width="13" height="13" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                        </button>
                     </div>
                     <div class="mock-tabs">
                         <button class="mock-tab active" data-target="mock-room" title="Room settings and connection">Room</button>