diff --git a/website/app.js b/website/app.js
index c16f5d9..49d3391 100644
--- a/website/app.js
+++ b/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;
diff --git a/website/style.css b/website/style.css
index 9e453d6..8d7f43e 100644
--- a/website/style.css
+++ b/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;
diff --git a/website/template.html b/website/template.html
index c951622..5f834d8 100644
--- a/website/template.html
+++ b/website/template.html
@@ -444,6 +444,9 @@
{{VERSION}}
+