import live www.sillylaird.ca webrootHEADmain

1 files changed, 1341 insertions, 0 deletions

diff --git a/assets/js/site.js b/assets/js/site.js
new file mode 100644
index 0000000..63ac6a8
--- /dev/null
+++ b/assets/js/site.js
@@ -0,0 +1,1341 @@
+(function () {
+  function byId(id) {
+    return document.getElementById(id);
+  }
+
+  /* ========================================================================
+     Theme Toggle (localStorage)
+     ======================================================================== */
+  function applyTheme(theme) {
+    var isLight = theme === "light";
+    document.body.classList.add("theme-transitioning");
+    window.setTimeout(function () {
+      document.body.classList.remove("theme-transitioning");
+    }, 400);
+    if (theme === "light") {
+      document.body.classList.add("light-mode");
+    } else {
+      document.body.classList.remove("light-mode");
+    }
+    document.documentElement.style.colorScheme = isLight ? "light" : "dark";
+    var themeColor = document.querySelector('meta[name="theme-color"]');
+    if (themeColor) {
+      themeColor.setAttribute("content", isLight ? "#fff8f1" : "#000000");
+    }
+    var btn = byId("theme-toggle");
+    if (btn) {
+      btn.textContent = theme === "light" ? "\u263E" : "\u2600";
+      btn.setAttribute("title",
+        theme === "light"
+          ? "Switch to dark theme"
+          : "Switch to light theme"
+      );
+      btn.setAttribute("aria-label",
+        theme === "light"
+          ? "Switch to dark theme"
+          : "Switch to light theme"
+      );
+    }
+    // Sync guestbook iframes
+    ["guestbook-form-iframe", "guestbook-comments-iframe"].forEach(function (id) {
+      var frame = byId(id);
+      if (!frame) return;
+      var src = frame.getAttribute("src") || "";
+      var base = src.split("?")[0];
+      var next = theme === "light" ? base + "?theme=light" : base;
+      if (src !== next) frame.setAttribute("src", next);
+    });
+  }
+
+  var stored = localStorage.getItem("siteTheme");
+  var prefersLight = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
+  var savedTheme = stored || (prefersLight ? "light" : "dark");
+  applyTheme(savedTheme);
+
+  if (window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", function (e) {
+      if (!localStorage.getItem("siteTheme")) {
+        applyTheme(e.matches ? "light" : "dark");
+      }
+    });
+  }
+
+  function syncHeaderOffset() {
+    var header = document.querySelector("header.site-header");
+    if (!header) return;
+    document.documentElement.style.setProperty(
+      "--site-header-height",
+      Math.ceil(header.getBoundingClientRect().height) + "px"
+    );
+  }
+
+  window.addEventListener("load", syncHeaderOffset);
+  window.addEventListener("resize", syncHeaderOffset);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", syncHeaderOffset);
+  } else {
+    syncHeaderOffset();
+  }
+
+  var themeBtn = byId("theme-toggle");
+  if (themeBtn) {
+    themeBtn.addEventListener("click", function () {
+      var next = document.body.classList.contains("light-mode") ? "dark" : "light";
+      localStorage.setItem("siteTheme", next);
+      applyTheme(next);
+    });
+  }
+
+  /* ========================================================================
+     Comfort spacing toggle (localStorage, site-wide)
+     ======================================================================== */
+  (function initComfortSpacing() {
+    if ((location.pathname || "").indexOf("/startpage") !== -1) return;
+    var KEY = "siteComfortSpacing_v1";
+    var btn = byId("comfort-toggle");
+    if (!btn) return;
+
+    function applyComfort(on) {
+      document.body.classList.toggle("comfort-spacing", on);
+      btn.setAttribute("aria-pressed", on ? "true" : "false");
+      btn.setAttribute("title", on ? "Comfort spacing: ON" : "Comfort spacing: OFF");
+      btn.setAttribute("aria-label", on ? "Comfort spacing on" : "Comfort spacing off");
+    }
+
+    applyComfort(localStorage.getItem(KEY) === "1");
+
+    btn.addEventListener("click", function () {
+      var next = !document.body.classList.contains("comfort-spacing");
+      localStorage.setItem(KEY, next ? "1" : "0");
+      applyComfort(next);
+    });
+  })();
+
+  /* ========================================================================
+     Menu & Language Dropdowns
+     ======================================================================== */
+  const menuBtn = byId("menu-toggle");
+  const nav = byId("site-nav");
+
+  const langToggle = byId("lang-toggle");
+  const langMenu = byId("lang-options");
+  const currentLang = byId("current-lang");
+
+  let openDropdown = null;
+
+  function closeMenu() {
+    if (!menuBtn || !nav) return;
+    menuBtn.classList.remove("active");
+    menuBtn.setAttribute("aria-expanded", "false");
+    nav.hidden = true;
+    if (openDropdown === "menu") openDropdown = null;
+  }
+
+  function closeLang() {
+    if (!langToggle || !langMenu) return;
+    langToggle.setAttribute("aria-expanded", "false");
+    langMenu.hidden = true;
+    if (openDropdown === "lang") openDropdown = null;
+  }
+
+  function toggleMenu(e) {
+    if (!menuBtn || !nav) return;
+    e.stopPropagation();
+
+    if (openDropdown === "lang") closeLang();
+
+    const open = menuBtn.getAttribute("aria-expanded") === "true";
+    if (open) {
+      closeMenu();
+      return;
+    }
+
+    menuBtn.classList.add("active");
+    menuBtn.setAttribute("aria-expanded", "true");
+    nav.hidden = false;
+    openDropdown = "menu";
+  }
+
+  function toggleLang(e) {
+    if (!langToggle || !langMenu) return;
+    e.stopPropagation();
+
+    if (openDropdown === "menu") closeMenu();
+
+    const open = langToggle.getAttribute("aria-expanded") === "true";
+    if (open) {
+      closeLang();
+      return;
+    }
+
+    langToggle.setAttribute("aria-expanded", "true");
+    langMenu.hidden = false;
+    openDropdown = "lang";
+  }
+
+  if (nav) nav.hidden = true;
+  if (langMenu) langMenu.hidden = true;
+
+  if (menuBtn && nav) {
+    menuBtn.addEventListener("click", toggleMenu);
+    nav.addEventListener("click", (e) => e.stopPropagation());
+  }
+
+  if (langToggle && langMenu) {
+    langToggle.addEventListener("click", toggleLang);
+    langMenu.addEventListener("click", (e) => e.stopPropagation());
+  }
+
+  if ((menuBtn && nav) || (langToggle && langMenu)) {
+    document.addEventListener("click", function (e) {
+      if (
+        menuBtn && nav &&
+        (menuBtn.contains(e.target) || nav.contains(e.target))
+      ) {
+        return;
+      }
+      if (
+        langToggle && langMenu &&
+        (langToggle.contains(e.target) || langMenu.contains(e.target))
+      ) {
+        return;
+      }
+      closeMenu();
+      closeLang();
+    });
+
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") {
+        closeMenu();
+        closeLang();
+      }
+    });
+  }
+
+  if (currentLang) {
+    const docLang = (document.documentElement.lang || "en").toLowerCase();
+    currentLang.textContent = docLang === "zh" ? "ZH" : docLang === "ja" ? "JP" : "EN";
+  }
+
+  if (langMenu) {
+    langMenu.querySelectorAll("a[data-lang]").forEach((a) => {
+      a.addEventListener("click", function () {
+        localStorage.setItem("preferredLang", this.getAttribute("data-lang") || "en");
+      });
+    });
+  }
+
+  // Language menu hrefs: convert current page to *_zh.php / *_jp.php.
+  function updateLangMenuHrefs() {
+    const links = document.querySelectorAll("a[data-lang-href][data-lang]");
+    if (!links.length) return;
+
+    let path = window.location.pathname || "/";
+    if (!path.startsWith("/")) path = "/" + path;
+
+    const isDir = path.endsWith("/");
+    const file = isDir ? "index.php" : (path.split("/").pop() || "index.php");
+    const base = isDir ? path : path.slice(0, -file.length);
+
+    const baseName = file.replace(/_(zh|jp)\.php$/i, ".php");
+    const map = {
+      en: baseName,
+      zh: baseName.replace(/(_(zh|jp))?\.php$/i, "_zh.php"),
+      jp: baseName.replace(/(_(zh|jp))?\.php$/i, "_jp.php"),
+    };
+
+    links.forEach((a) => {
+      const lang = (a.getAttribute("data-lang") || "en").toLowerCase();
+      const targetFile = map[lang] || map.en;
+      a.href = base + targetFile;
+    });
+  }
+
+  function updateAriaCurrent() {
+    const path = window.location.pathname || "/";
+    const normalized = path.startsWith("/") ? path : "/" + path;
+    const isDir = normalized.endsWith("/");
+    const file = isDir ? "index.php" : (normalized.split("/").pop() || "index.php");
+    const base = isDir ? normalized : normalized.slice(0, -file.length);
+    const indexPath = base + "index.php";
+    const dirPath = base || "/";
+    const candidates = new Set([normalized, indexPath, dirPath, dirPath.replace(/\/$/, "")]);
+
+    document.querySelectorAll("#site-nav a[href]").forEach((a) => {
+      const href = a.getAttribute("href") || "";
+      const hrefUrl = new URL(href, window.location.origin);
+      if (hrefUrl.origin !== window.location.origin) {
+        a.removeAttribute("aria-current");
+        return;
+      }
+      const hrefPath = hrefUrl.pathname;
+      if (candidates.has(hrefPath)) {
+        a.setAttribute("aria-current", "page");
+      } else {
+        a.removeAttribute("aria-current");
+      }
+    });
+
+    const docLang = (document.documentElement.lang || "en").toLowerCase();
+    // "ja" is valid BCP-47 for Japanese but we label it "jp" in data-lang
+    const normalizedDocLang = docLang === "ja" ? "jp" : docLang;
+    document.querySelectorAll("#lang-options a[data-lang]").forEach((a) => {
+      const lang = (a.getAttribute("data-lang") || "en").toLowerCase();
+      if (lang === normalizedDocLang) {
+        a.setAttribute("aria-current", "page");
+      } else {
+        a.removeAttribute("aria-current");
+      }
+    });
+  }
+
+  // Run once now...
+  updateLangMenuHrefs();
+  updateAriaCurrent();
+  // ...and again after layout/injection settles.
+  setTimeout(updateLangMenuHrefs, 0);
+  setTimeout(updateAriaCurrent, 0);
+
+  /* ========================================================================
+     Skeleton Screens — replace static "Loading…" text
+     ======================================================================== */
+  function injectSkeleton(container) {
+    if (!container) return;
+    container.innerHTML =
+      '<div class="skeleton-line"></div>' +
+      '<div class="skeleton-line"></div>' +
+      '<div class="skeleton-line"></div>' +
+      '<div class="skeleton-line"></div>';
+  }
+
+  /* ========================================================================
+     Home page: Blog list (optional)
+     ======================================================================== */
+  const blogList = byId("blog-list");
+  if (blogList) {
+    injectSkeleton(blogList);
+
+    const blogHost = "https://blog.sillylaird.ca";
+    const ctrl = new AbortController();
+    const timeout = setTimeout(() => ctrl.abort(), 3500);
+
+    fetch(blogHost + "/api/posts.php", { signal: ctrl.signal })
+      .then((r) => r.json())
+      .then((posts) => {
+        blogList.textContent = "";
+
+        const top = document.createElement("div");
+
+        const strong = document.createElement("strong");
+        strong.textContent = "Posts";
+        top.appendChild(strong);
+
+        top.appendChild(document.createTextNode(" ("));
+        const allLink = document.createElement("a");
+        allLink.href = blogHost;
+        allLink.textContent = "all";
+        top.appendChild(allLink);
+        top.appendChild(document.createTextNode(")"));
+
+        blogList.appendChild(top);
+
+        const list = document.createElement("ol");
+        (posts || []).forEach((post) => {
+          const li = document.createElement("li");
+
+          const a = document.createElement("a");
+          a.href = blogHost + "/" + String(post.path || "").replace(/^\/+/, "");
+          a.textContent = String(post.title || "Untitled");
+
+          const date = document.createElement("div");
+          date.className = "muted";
+
+          const y = String(post.year || "");
+          const m = String(post.month || "").padStart(2, "0");
+          const d = String(post.day || "").padStart(2, "0");
+          const iso = y && m && d ? `${y}-${m}-${d}` : "";
+
+          const time = document.createElement("time");
+          if (iso) time.setAttribute("datetime", iso);
+          time.textContent = iso || "";
+
+          li.appendChild(a);
+          li.appendChild(document.createElement("br"));
+          date.appendChild(time);
+          li.appendChild(date);
+
+          list.appendChild(li);
+        });
+
+        blogList.appendChild(list);
+
+        if (!list.children.length) {
+          const empty = document.createElement("div");
+          empty.className = "muted";
+          empty.textContent = "No posts yet.";
+          blogList.appendChild(empty);
+        }
+      })
+      .catch((err) => {
+        blogList.textContent = err && err.name === "AbortError"
+          ? "Blog list timed out."
+          : "Cannot load posts right now.";
+      })
+      .finally(() => clearTimeout(timeout));
+  }
+
+  /* ========================================================================
+     Home page: Changelog list (optional)
+     ======================================================================== */
+  const changelogList = byId("changelog-list");
+  if (changelogList) {
+    injectSkeleton(changelogList);
+
+    const changelogPage = "https://www.sillylaird.ca/changelog/latest.php";
+    const ctrl = new AbortController();
+    const timeout = setTimeout(() => ctrl.abort(), 3500);
+
+    fetch(changelogPage, { signal: ctrl.signal })
+      .then((r) => r.text())
+      .then((html) => {
+        changelogList.textContent = "";
+        const doc = new DOMParser().parseFromString(html, "text/html");
+        const entries = Array.from(doc.querySelectorAll(".changelog-entry"));
+
+        const top = document.createElement("div");
+
+        const strong = document.createElement("strong");
+        strong.textContent = "Entries";
+        top.appendChild(strong);
+
+        top.appendChild(document.createTextNode(" ("));
+        const allLink = document.createElement("a");
+        allLink.href = "https://www.sillylaird.ca/changelog/";
+        allLink.textContent = "all";
+        top.appendChild(allLink);
+        top.appendChild(document.createTextNode(")"));
+
+        changelogList.appendChild(top);
+
+        const list = document.createElement("ol");
+        entries.forEach((entry) => {
+          const li = document.createElement("li");
+
+          const titleText = (entry.querySelector("strong, b")?.textContent || "").trim();
+          const timeEl = entry.querySelector("time");
+          const dateText = (timeEl?.textContent || "").trim();
+          const dateIso = (timeEl?.getAttribute("datetime") || "").trim();
+          const bodyEl = entry.querySelector(".text");
+          const bodyText = (bodyEl?.textContent || "").trim();
+
+          const title = document.createElement("strong");
+          if (titleText) {
+            title.textContent = titleText;
+            li.appendChild(title);
+
+            if (dateText) {
+              const date = document.createElement("div");
+              date.className = "muted";
+              const time = document.createElement("time");
+              if (dateIso) time.setAttribute("datetime", dateIso);
+              time.textContent = dateText;
+              date.appendChild(time);
+              li.appendChild(date);
+            }
+          } else if (dateText) {
+            title.textContent = dateText;
+            li.appendChild(title);
+          }
+
+          if (bodyText) {
+            const body = document.createElement("div");
+            body.className = "changelog-body";
+            body.textContent = bodyText;
+            li.appendChild(body);
+          }
+
+          list.appendChild(li);
+        });
+
+        changelogList.appendChild(list);
+
+        const filesSection = doc.querySelector(".changelog-files-section");
+        if (filesSection) {
+          changelogList.appendChild(document.importNode(filesSection, true));
+        }
+
+        if (!list.children.length) {
+          const empty = document.createElement("div");
+          empty.className = "muted";
+          empty.textContent = "No updates yet.";
+          changelogList.appendChild(empty);
+        }
+      })
+      .catch((err) => {
+        changelogList.textContent = err && err.name === "AbortError"
+          ? "Changelog list timed out."
+          : "Cannot load changelog right now.";
+      })
+      .finally(() => clearTimeout(timeout));
+  }
+
+  /* ========================================================================
+     Guestbook helpers
+     ======================================================================== */
+  const formRefreshBtn = byId("guestbook-form-refresh");
+  if (formRefreshBtn) {
+    formRefreshBtn.addEventListener("click", () => {
+      const frame = byId("guestbook-form-iframe");
+      if (!frame) return;
+      setIframeLoading(frame);
+      resetIframe(frame);
+    });
+  }
+
+  function setIframeLoading(frame) {
+    if (!frame) return;
+    const clip = frame.closest(".iframe-clip");
+    if (!clip) return;
+    clip.classList.add("is-loading");
+    const onLoad = () => {
+      clip.classList.remove("is-loading");
+    };
+    frame.addEventListener("load", onLoad, { once: true });
+  }
+
+  function resetIframe(frame) {
+    if (!frame) return;
+    const src = frame.getAttribute("src") || frame.src;
+    if (src) {
+      frame.setAttribute("src", src);
+      return;
+    }
+    if (frame.contentWindow) frame.contentWindow.location.reload();
+  }
+
+  function loadGuestbookComments() {
+    var box = byId("guestbook-comments-inline");
+    if (!box) return;
+    box.innerHTML = '<div class="retro-loading">Loading recent comments...</div>';
+    fetch("/api/guestbook-recent.php?limit=6")
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+      .then(function (data) {
+        var entries = data && data.entries ? data.entries : [];
+        box.textContent = "";
+        if (!entries.length) {
+          var empty = document.createElement("p");
+          empty.className = "muted";
+          empty.textContent = "No comments yet — be the first to sign!";
+          box.appendChild(empty);
+          return;
+        }
+        entries.forEach(function (row) {
+          var art = document.createElement("article");
+          art.className = "guestbook-entry";
+          var strong = document.createElement("strong");
+          strong.textContent = row.name || "Anonymous";
+          art.appendChild(strong);
+          if (row.created_at) {
+            var time = document.createElement("time");
+            time.textContent = row.created_at;
+            time.setAttribute("datetime", row.created_at);
+            art.appendChild(time);
+          }
+          var p = document.createElement("p");
+          p.textContent = row.message || "";
+          art.appendChild(p);
+          box.appendChild(art);
+        });
+      })
+      .catch(function () {
+        box.innerHTML = '<p class="muted">Could not load comments. <a href="/guestbook.php">Open guestbook</a></p>';
+      });
+  }
+
+  var gbReload = byId("guestbook-comments-reload");
+  if (gbReload) {
+    gbReload.addEventListener("click", loadGuestbookComments);
+    loadGuestbookComments();
+  }
+
+  document.querySelectorAll(".iframe-clip iframe, .vibe-embed iframe").forEach(function (frame) {
+    var clip = frame.closest(".iframe-clip") || frame.closest(".vibe-embed");
+    if (!clip) return;
+    clip.classList.add("is-loading");
+    frame.addEventListener("load", function () {
+      clip.classList.remove("is-loading");
+    }, { once: true });
+  });
+
+  /* ========================================================================
+     Home page: Last.fm live refresh (The "Pro" Way)
+     ======================================================================== */
+  const lastfmList = byId("lastfm-list");
+  const lastfmNow = byId("lastfm-now");
+  if (lastfmList || lastfmNow) {
+    let lastDataStr = "";
+
+    function renderNowPlaying(tracks) {
+      if (!lastfmNow) return;
+      lastfmNow.textContent = "";
+      var current = null;
+      if (Array.isArray(tracks)) {
+        for (var i = 0; i < tracks.length; i++) {
+          if (tracks[i].nowplaying) { current = tracks[i]; break; }
+        }
+        if (!current && tracks[0]) current = tracks[0];
+      }
+      if (!current) {
+        var fallback = document.createElement("p");
+        fallback.className = "muted";
+        fallback.innerHTML = 'Nothing scrobbling — <a href="https://www.last.fm/user/SillyLaird" target="_blank" rel="noopener noreferrer">Last.fm profile</a>';
+        lastfmNow.appendChild(fallback);
+        return;
+      }
+      var card = document.createElement("a");
+      card.className = "lastfm-track lastfm-track--featured";
+      card.href = current.url || "https://www.last.fm/user/SillyLaird";
+      card.target = "_blank";
+      card.rel = "noopener noreferrer";
+      if (current.image) {
+        var wrap = document.createElement("span");
+        wrap.className = "lastfm-image-wrap";
+        var img = document.createElement("img");
+        img.src = current.image;
+        img.alt = (current.artist || "") + " — " + (current.name || "track");
+        img.loading = "lazy";
+        img.decoding = "async";
+        wrap.appendChild(img);
+        card.appendChild(wrap);
+      }
+      var info = document.createElement("span");
+      info.className = "lastfm-info";
+      var status = document.createElement("span");
+      status.className = "lastfm-status" + (current.nowplaying ? " is-playing" : "");
+      status.textContent = current.nowplaying ? "Now playing" : "Last scrobbled";
+      var title = document.createElement("span");
+      title.className = "lastfm-title";
+      title.textContent = current.name || "Unknown track";
+      var artist = document.createElement("span");
+      artist.className = "lastfm-artist";
+      artist.textContent = current.artist || "";
+      info.appendChild(status);
+      info.appendChild(title);
+      info.appendChild(artist);
+      card.appendChild(info);
+      lastfmNow.appendChild(card);
+    }
+
+    function updateLastFM() {
+      fetch("/api/lastfm.php")
+        .then(res => {
+          if (!res.ok) throw new Error("API error: " + res.status);
+          return res.json();
+        })
+        .then(tracks => {
+          if (tracks.error) throw new Error(tracks.message || "Unknown proxy error");
+          
+          // Only update DOM if the data has changed
+          const currentDataStr = JSON.stringify(tracks);
+          if (currentDataStr === lastDataStr) return;
+          lastDataStr = currentDataStr;
+
+          renderNowPlaying(tracks);
+
+          if (!lastfmList) return;
+          var ul = document.createElement("ul");
+          ul.className = "lastfm-text-list";
+          if (Array.isArray(tracks) && tracks.length > 0) {
+            tracks.forEach(function (track) {
+              var li = document.createElement("li");
+              if (track.nowplaying) {
+                var strong = document.createElement("strong");
+                strong.textContent = "\u25B6 Now playing: ";
+                li.appendChild(strong);
+              }
+              var a = document.createElement("a");
+              a.href = track.url;
+              a.target = "_blank";
+              a.rel = "noopener noreferrer";
+              a.textContent = track.name;
+              li.appendChild(a);
+              li.appendChild(document.createTextNode(" \u2014 " + track.artist));
+              ul.appendChild(li);
+            });
+          } else {
+            var empty = document.createElement("li");
+            empty.className = "muted";
+            empty.textContent = "No tracks found.";
+            ul.appendChild(empty);
+          }
+          lastfmList.textContent = "";
+          lastfmList.appendChild(ul);
+          lastfmList.dataset.loaded = "1";
+          if (lastfmNow) lastfmNow.dataset.loaded = "1";
+        })
+        .catch(err => {
+          console.error("Last.fm Widget Error:", err);
+          if (lastfmNow && !lastfmNow.dataset.loaded) {
+            lastfmNow.dataset.loaded = "1";
+            lastfmNow.innerHTML = '<p class="muted"><a href="https://www.last.fm/user/SillyLaird" target="_blank" rel="noopener noreferrer">Last.fm profile</a></p>';
+          }
+          if (lastfmList && !lastfmList.dataset.loaded) {
+            lastfmList.dataset.loaded = "1";
+            lastfmList.innerHTML = '<p class="muted"><a href="https://www.last.fm/user/SillyLaird" target="_blank" rel="noopener noreferrer">View recent tracks on Last.fm ↗</a></p>';
+          }
+        });
+    }
+
+    // Defer the first fetch until the widget scrolls into view (saves a
+    // third-party request on initial paint — matters on slow/Tor connections).
+    let refreshTimer = null;
+    function startLastFM() {
+      if (refreshTimer) return;
+      updateLastFM();
+      refreshTimer = setInterval(updateLastFM, 30000);
+    }
+    if ("IntersectionObserver" in window) {
+      const io = new IntersectionObserver(function (entries) {
+        if (entries.some(function (e) { return e.isIntersecting; })) {
+          io.disconnect();
+          startLastFM();
+        }
+      }, { rootMargin: "200px" });
+      io.observe(lastfmList || lastfmNow);
+    } else {
+      startLastFM();
+    }
+
+    // Manual refresh button
+    const refreshBtn = byId("lastfm-refresh");
+    if (refreshBtn) {
+      refreshBtn.addEventListener("click", () => {
+        refreshBtn.textContent = "Updating...";
+        refreshBtn.disabled = true;
+        updateLastFM();
+        setTimeout(() => {
+          refreshBtn.textContent = "Refresh";
+          refreshBtn.disabled = false;
+        }, 500);
+      });
+    }
+  }
+
+  /* ========================================================================
+     Footer helpers
+     ======================================================================== */
+  // Footer year: local time only.
+  (function () {
+    const el = byId("copyright-year");
+    if (!el) return;
+
+    el.textContent = String(new Date().getFullYear());
+  })();
+
+  // Footer last-updated: based on document.lastModified.
+  (function () {
+    const el = byId("last-updated");
+    if (!el) return;
+
+    const raw = document.lastModified;
+    const date = raw ? new Date(raw) : null;
+    if (!date || Number.isNaN(date.getTime())) return;
+
+    const iso = date.toISOString().slice(0, 10);
+    el.setAttribute("datetime", iso);
+    el.textContent = iso;
+  })();
+
+  /* ========================================================================
+     Force red text in same-origin iframes
+     ======================================================================== */
+  var _gbFrameIds = new Set(["guestbook-form-iframe", "guestbook-comments-iframe"]);
+
+  function forceIframeColors(frame) {
+    if (_gbFrameIds.has(frame.id)) return;
+    try {
+      var doc = frame.contentDocument || frame.contentWindow.document;
+      if (!doc) return;
+      if (doc.getElementById('forced-colors-style')) return;
+
+      var style = doc.createElement('style');
+      style.id = 'forced-colors-style';
+      style.textContent =
+        ':root { --ink: #8b0000; --bg: #000000; }' +
+        '* { color: #8b0000 !important; }' +
+        'a { color: #8b0000 !important; text-decoration: underline; }' +
+        'body { background-color: var(--bg, #000) !important; color: #8b0000 !important; }';
+      doc.head.appendChild(style);
+    } catch (e) {
+      // Cross-domain frames cannot be styled
+    }
+  }
+
+  function attachIframeColorForcing() {
+    document.querySelectorAll('iframe').forEach(function (frame) {
+      if (frame._colorForced) return;
+      frame._colorForced = true;
+      frame.addEventListener('load', function () { forceIframeColors(frame); });
+      // Also try immediately in case already loaded
+      forceIframeColors(frame);
+    });
+  }
+
+  window.addEventListener('load', attachIframeColorForcing);
+  document.addEventListener('DOMContentLoaded', attachIframeColorForcing);
+
+  /* ========================================================================
+     Global Header Search (unified search w/ engine picker)
+     Mirrors /startpage/ behavior; uses gh-* IDs to avoid collisions.
+     ======================================================================== */
+  var GH_SEARCH_ENGINES = [
+    { key: 'site',       label: '⌂', title: 'This site',         placeholder: 'Search pages on sillylaird.ca…', action: '#', param: 'q', local: true },
+    { key: 'google',     label: 'G',  title: 'Google Search',     placeholder: 'Search Google...',     action: 'https://www.google.ca/search',        param: 'q' },
+    { key: 'youtube',    label: 'YT', title: 'YouTube Search',    placeholder: 'Search YouTube...',    action: 'https://www.youtube.com/results',     param: 'search_query' },
+    { key: 'sillylaird', label: 'SL', title: 'SillyLaird Search', placeholder: 'Search SillyLaird...', action: 'https://search.sillylaird.ca/search', param: 'q' },
+    { key: '4get',       label: '4G', title: '4get Search',       placeholder: 'Search 4get...',       action: 'https://4get.sillylaird.ca/web',      param: 's' },
+    { key: 'gemini',     label: 'GM', title: 'Gemini Search',     placeholder: 'Ask Gemini...',        action: '/gemini-search.php',                  param: 'q' }
+  ];
+  var GH_SEARCH_KEY = 'siteHeaderSearchEngine_v1';
+
+  function initGlobalHeaderSearch() {
+    var form = byId('gh-search-form');
+    var input = byId('gh-search-input');
+    var toggle = byId('gh-search-engine-toggle');
+    var menu = byId('gh-search-engine-menu');
+    if (!form || !input || !toggle || !menu) return;
+    if (toggle._ghInit) return;
+    toggle._ghInit = true;
+
+    var saved = null;
+    try { saved = localStorage.getItem(GH_SEARCH_KEY); } catch (_) {}
+    var idx = GH_SEARCH_ENGINES.findIndex(function (e) { return e.key === saved; });
+    if (idx < 0) idx = GH_SEARCH_ENGINES.findIndex(function (e) { return e.key === 'google'; });
+    if (idx < 0) idx = 0;
+
+    GH_SEARCH_ENGINES.forEach(function (e, i) {
+      var li = document.createElement('li');
+      li.setAttribute('role', 'option');
+      li.dataset.index = String(i);
+      var icon = document.createElement('span');
+      icon.className = 'engine-icon';
+      icon.textContent = e.label;
+      var name = document.createElement('span');
+      name.className = 'engine-name';
+      name.textContent = e.title;
+      li.appendChild(icon);
+      li.appendChild(name);
+      li.addEventListener('click', function () {
+        idx = i;
+        apply(idx);
+        closeMenu();
+        input.focus();
+      });
+      menu.appendChild(li);
+    });
+
+    function apply(i) {
+      var e = GH_SEARCH_ENGINES[i];
+      form.setAttribute('action', e.local ? '#' : e.action);
+      if (e.local) {
+        form.removeAttribute('target');
+      } else {
+        form.setAttribute('target', '_blank');
+        form.setAttribute('rel', 'noopener noreferrer');
+      }
+      input.setAttribute('name', e.local ? 'site-q' : e.param);
+      input.setAttribute('placeholder', e.placeholder);
+      toggle.textContent = '';
+      toggle.appendChild(document.createTextNode(e.label + ' '));
+      var caret = document.createElement('span');
+      caret.className = 'search-engine-caret';
+      caret.textContent = '▾';
+      toggle.appendChild(caret);
+      toggle.setAttribute('title', 'Search engine: ' + e.title);
+      Array.prototype.forEach.call(menu.children, function (li, li_i) {
+        li.setAttribute('aria-selected', li_i === i ? 'true' : 'false');
+      });
+      try { localStorage.setItem(GH_SEARCH_KEY, e.key); } catch (_) {}
+    }
+
+    function openMenu() {
+      menu.hidden = false;
+      toggle.setAttribute('aria-expanded', 'true');
+    }
+    function closeMenu() {
+      menu.hidden = true;
+      toggle.setAttribute('aria-expanded', 'false');
+    }
+
+    toggle.addEventListener('click', function (ev) {
+      ev.stopPropagation();
+      if (menu.hidden) openMenu(); else closeMenu();
+    });
+
+    document.addEventListener('click', function (ev) {
+      if (menu.hidden) return;
+      if (ev.target === toggle || toggle.contains(ev.target)) return;
+      if (menu.contains(ev.target)) return;
+      closeMenu();
+    });
+
+    document.addEventListener('keydown', function (ev) {
+      if (ev.key === 'Escape' && !menu.hidden) closeMenu();
+    });
+
+    var siteHits = byId('site-search-hits');
+    var siteIndex = null;
+
+    function loadSiteIndex() {
+      if (siteIndex) return Promise.resolve(siteIndex);
+      return fetch('/assets/data/site-index.json')
+        .then(function (r) { return r.json(); })
+        .then(function (j) { siteIndex = Array.isArray(j) ? j : []; return siteIndex; })
+        .catch(function () { siteIndex = []; return siteIndex; });
+    }
+
+    function renderSiteHits(q) {
+      if (!siteHits) return;
+      var query = (q || '').trim().toLowerCase();
+      if (!query) { siteHits.hidden = true; siteHits.textContent = ''; return; }
+      loadSiteIndex().then(function (pages) {
+        var hits = pages.filter(function (p) {
+          var hay = (p.title + ' ' + p.url + ' ' + (p.tags || '')).toLowerCase();
+          return hay.indexOf(query) !== -1;
+        }).slice(0, 8);
+        siteHits.textContent = '';
+        if (!hits.length) { siteHits.hidden = true; return; }
+        hits.forEach(function (p) {
+          var li = document.createElement('li');
+          var a = document.createElement('a');
+          a.href = p.url;
+          if (/^https?:\/\//.test(p.url)) {
+            a.target = '_blank';
+            a.rel = 'noopener noreferrer';
+          }
+          a.textContent = p.title;
+          li.appendChild(a);
+          siteHits.appendChild(li);
+        });
+        siteHits.hidden = false;
+      });
+    }
+
+    input.addEventListener('input', function () {
+      if (GH_SEARCH_ENGINES[idx] && GH_SEARCH_ENGINES[idx].local) {
+        renderSiteHits(input.value);
+      } else if (siteHits) {
+        siteHits.hidden = true;
+      }
+    });
+
+    form.addEventListener('submit', function (ev) {
+      if (GH_SEARCH_ENGINES[idx] && GH_SEARCH_ENGINES[idx].local) {
+        ev.preventDefault();
+        var first = siteHits && siteHits.querySelector('a');
+        if (first) first.click();
+        else renderSiteHits(input.value);
+      }
+    });
+
+    apply(idx);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initGlobalHeaderSearch);
+  } else {
+    initGlobalHeaderSearch();
+  }
+
+  (function initRadioWidget() {
+    var box = byId('radio-widget');
+    if (!box) return;
+    function render(title) {
+      box.textContent = '';
+      var p = document.createElement('p');
+      if (title) {
+        p.className = 'radio-now-line';
+        var strong = document.createElement('strong');
+        strong.textContent = 'Radio: ';
+        p.appendChild(strong);
+        var span = document.createElement('span');
+        span.id = 'radio-nowplaying-title';
+        span.textContent = title;
+        p.appendChild(span);
+        p.appendChild(document.createTextNode(' — '));
+        var a = document.createElement('a');
+        a.href = 'https://radio.sillylaird.ca/';
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        a.textContent = 'Listen live';
+        p.appendChild(a);
+      } else {
+        p.className = 'muted';
+        p.textContent = 'Radio offline — ';
+        var link = document.createElement('a');
+        link.href = 'https://radio.sillylaird.ca/';
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+        link.textContent = 'radio.sillylaird.ca';
+        p.appendChild(link);
+      }
+      box.appendChild(p);
+    }
+    function poll() {
+      fetch('/api/nowplaying.php', { cache: 'no-store' })
+        .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
+        .then(function (j) {
+          var title = j && j.title ? String(j.title).trim() : '';
+          render(title);
+        })
+        .catch(function () { render(''); });
+    }
+    poll();
+    setInterval(poll, 30000);
+  })();
+
+  (function initLainEgg() {
+    var btn = byId('lain-avatar-btn');
+    if (!btn) return;
+    var secrets = [
+      btn.getAttribute('data-secret-1'),
+      btn.getAttribute('data-secret-2'),
+      btn.getAttribute('data-secret-3'),
+    ].filter(Boolean);
+    var i = 0;
+    btn.addEventListener('click', function () {
+      var msg = secrets[i % secrets.length] || "Let's all love Lain.";
+      i += 1;
+      btn.classList.add('is-lain-pulse');
+      window.setTimeout(function () { btn.classList.remove('is-lain-pulse'); }, 600);
+      var toast = document.createElement('div');
+      toast.className = 'lain-toast';
+      toast.setAttribute('role', 'status');
+      toast.textContent = msg;
+      document.body.appendChild(toast);
+      window.setTimeout(function () { toast.classList.add('is-visible'); }, 10);
+      window.setTimeout(function () {
+        toast.classList.remove('is-visible');
+        window.setTimeout(function () { toast.remove(); }, 350);
+      }, 2800);
+    });
+  })();
+
+  // Per-page visit counter: canonical implementation is visit-counter.js
+  // (nginx injects it network-wide). Fall back here if that script is absent.
+  (function initVisitCounter() {
+    if (window.__slVisitCounterInit) return;
+    if (document.querySelector('script[src*="visit-counter.js"]')) return;
+    var s = document.createElement('script');
+    // Always load from www so sibling hosts (blog/radio/…) resolve correctly
+    // even when this file itself was loaded cross-origin via nav.js.
+    s.src = 'https://www.sillylaird.ca/assets/js/visit-counter.js?v=2026080403';
+    s.defer = true;
+    document.head.appendChild(s);
+  })();
+
+  // Scroll-to-top: canonical implementation is scroll-to-top.js (nginx injects
+  // it network-wide alongside the visit counter). Fall back if absent.
+  (function initScrollToTop() {
+    if (window.__slScrollTopInit) return;
+    if (document.querySelector('script[src*="scroll-to-top.js"]')) return;
+    var s = document.createElement('script');
+    s.src = 'https://www.sillylaird.ca/assets/js/scroll-to-top.js?v=20260821b';
+    s.defer = true;
+    document.head.appendChild(s);
+  })();
+
+  (function initSectionDraw() {
+    var titles = document.querySelectorAll('.section-accent-title, .network-subtitle');
+    var sections = document.querySelectorAll('.home-content > section');
+    var targets = [];
+    titles.forEach(function (el) { targets.push(el); });
+    sections.forEach(function (el) { targets.push(el); });
+    if (!targets.length) return;
+
+    function markDrawn(el) {
+      el.classList.add('is-drawn');
+    }
+
+    if (!('IntersectionObserver' in window) ||
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      targets.forEach(markDrawn);
+      return;
+    }
+
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) return;
+        markDrawn(entry.target);
+        io.unobserve(entry.target);
+      });
+    }, { threshold: 0.35, rootMargin: '0px 0px -8% 0px' });
+
+    targets.forEach(function (el) { io.observe(el); });
+  })();
+
+  (function initNetworkAccordion() {
+    var items = document.querySelectorAll('.network-collapsible');
+    if (!items.length) return;
+    var mq = window.matchMedia('(max-width: 600px)');
+
+    function sync() {
+      var mobile = mq.matches;
+      items.forEach(function (el, i) {
+        el.open = mobile ? i === 0 : true;
+      });
+    }
+
+    sync();
+    if (typeof mq.addEventListener === 'function') {
+      mq.addEventListener('change', sync);
+    } else if (typeof mq.addListener === 'function') {
+      mq.addListener(sync);
+    }
+  })();
+
+  /* ========================================================================
+     Vibe facade: click-to-load embeds (no provider request until clicked)
+
+     The player iframe is created synchronously inside the click handler so
+     Chrome allows autoplay (gesture-driven). State is read straight from each
+     provider's postMessage protocol, so when the viewer pauses we show a
+     "paused" overlay that mirrors the load facade but with a pause glyph.
+
+     One provider entry per supported site. `state(data, iframe)` maps a raw
+     message to 'paused' | 'playing' | null. Bilibili exposes no cross-origin
+     pause event, so it has no entry and falls back to a plain autoplay iframe.
+     ======================================================================== */
+
+  function vibePost(iframe, msg, origin) {
+    try {
+      iframe.contentWindow.postMessage(typeof msg === 'string' ? msg : JSON.stringify(msg), origin || '*');
+    } catch (_) {}
+  }
+
+  function withParam(url, extra) {
+    return url + (url.indexOf('?') > -1 ? '&' : '?') + extra;
+  }
+
+  // Pause overlay — same menu as the load facade. Mode 'paused' shows a pause
+  // glyph + resume copy; mode 'ended' shows a replay glyph + replay copy.
+  function setOverlayMode(overlay, mode) {
+    if (mode === 'ended') {
+      overlay.classList.add('vibe-facade-ended');
+      overlay.setAttribute('aria-label', 'Replay the video');
+      overlay.innerHTML =
+        '<span class="vibe-facade-play" aria-hidden="true">↻</span>' +
+        '<span class="vibe-facade-text">Replay<br><small>Click to watch again</small></span>';
+    } else {
+      overlay.classList.remove('vibe-facade-ended');
+      overlay.setAttribute('aria-label', 'Resume the video');
+      overlay.innerHTML =
+        '<span class="vibe-facade-play" aria-hidden="true">⏸</span>' +
+        '<span class="vibe-facade-text">Paused<br><small>Click to resume</small></span>';
+    }
+  }
+
+  function makePauseOverlay() {
+    var overlay = document.createElement('button');
+    overlay.type = 'button';
+    overlay.className = 'vibe-facade vibe-facade-paused';
+    overlay.hidden = true;
+    setOverlayMode(overlay, 'paused');
+    return overlay;
+  }
+
+  var VIBE_PROVIDERS = {
+    youtube: {
+      match: /youtube(-nocookie)?\.com\/embed\//,
+      origin: /^https?:\/\/(www\.)?youtube(-nocookie)?\.com$/,
+      // youtube.com (not -nocookie): the postMessage API replies from
+      // youtube.com. Privacy is already moot once the user has clicked.
+      src: function (e) { return withParam(e.replace('youtube-nocookie.com', 'youtube.com'), 'autoplay=1&enablejsapi=1'); },
+      subscribe: function (f) {
+        vibePost(f, { event: 'listening', id: 1, channel: 'widget' });
+        vibePost(f, { event: 'command', func: 'addEventListener', args: ['onStateChange'] });
+      },
+      play: function (f) { vibePost(f, { event: 'command', func: 'playVideo', args: [] }); },
+      state: function (d) {
+        var s = null;
+        if (d.event === 'onStateChange') s = d.info;
+        else if (d.event === 'infoDelivery' && d.info && typeof d.info.playerState === 'number') s = d.info.playerState;
+        if (s === 0) return 'ended';              // 0 = ended → show replay button
+        if (s === 2) return 'paused';            // 2 = paused
+        if (s === 1 || s === 3) return 'playing'; // 1 = playing, 3 = buffering
+        return null;
+      }
+    },
+
+    vimeo: {
+      match: /player\.vimeo\.com\/video\//,
+      origin: /^https?:\/\/player\.vimeo\.com$/,
+      src: function (e) { return withParam(e, 'autoplay=1'); },
+      subscribe: function (f) {
+        vibePost(f, { method: 'addEventListener', value: 'play' }, 'https://player.vimeo.com');
+        vibePost(f, { method: 'addEventListener', value: 'pause' }, 'https://player.vimeo.com');
+      },
+      play: function (f) { vibePost(f, { method: 'play' }, 'https://player.vimeo.com'); },
+      state: function (d, f) {
+        if (d.event === 'ready') { this.subscribe(f); return null; } // (re)subscribe once ready
+        if (d.event === 'pause') return 'paused';
+        if (d.event === 'play' || d.event === 'playing') return 'playing';
+        return null;
+      }
+    },
+
+    dailymotion: {
+      match: /dailymotion\.com\/player/,
+      origin: /^https?:\/\/(geo\.)?dailymotion\.com$/,
+      src: function (e) { return withParam(e, 'autoplay=1'); },
+      play: function (f) {
+        vibePost(f, { command: 'play', parameters: [] });
+        vibePost(f, { method: 'play' });
+      },
+      state: function (d) {
+        var ev = d.event;
+        if (ev === 'pause' || ev === 'video_pause') return 'paused';
+        if (ev === 'play' || ev === 'playing' || ev === 'video_start') return 'playing';
+        return null;
+      }
+    },
+
+    niconico: {
+      match: /embed\.nicovideo\.jp\/watch\//,
+      origin: /^https?:\/\/embed\.nicovideo\.jp$/,
+      // jsapi=1&playerId=1 turns on Niconico's postMessage control API.
+      src: function (e) { return withParam(e, 'jsapi=1&playerId=1&autoplay=1'); },
+      play: function (f) {
+        vibePost(f, { sourceConnectorType: 1, playerId: f._vibeNicoId || '1', eventName: 'play' }, 'https://embed.nicovideo.jp');
+      },
+      state: function (d, f) {
+        if (d.playerId != null) f._vibeNicoId = d.playerId; // captured for play()
+        if (d.eventName === 'statusChange' || d.eventName === 'playerStatusChange') {
+          var ps = d.data && d.data.playerStatus;
+          if (ps === 3) return 'paused';  // 3 = pause
+          if (ps === 2) return 'playing'; // 2 = play
+        }
+        return null;
+      }
+    }
+  };
+
+  function vibeProviderFor(embed) {
+    for (var k in VIBE_PROVIDERS) {
+      if (VIBE_PROVIDERS.hasOwnProperty(k) && VIBE_PROVIDERS[k].match.test(embed)) return VIBE_PROVIDERS[k];
+    }
+    return null;
+  }
+
+  function loadProviderWithOverlay(wrap, facadeBtn, embed, prov) {
+    var f = document.createElement('iframe');
+    f.src = prov.src(embed);
+    f.title = 'Current vibe — video';
+    f.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+    f.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen');
+    f.setAttribute('allowfullscreen', '');
+    facadeBtn.replaceWith(f);
+
+    var overlay = makePauseOverlay();
+    wrap.appendChild(overlay);
+
+    overlay.addEventListener('click', function () {
+      overlay.hidden = true;
+      prov.play(f);
+    });
+
+    f.addEventListener('load', function () { if (prov.subscribe) prov.subscribe(f); });
+
+    window.addEventListener('message', function (ev) {
+      if (prov.origin && !prov.origin.test(ev.origin)) return;
+      var data = ev.data;
+      if (typeof data === 'string') {
+        try {
+          data = JSON.parse(data);
+        } catch (_) {
+          if (data.indexOf('=') === -1) return; // some players send querystring strings
+          var o = {};
+          data.split('&').forEach(function (kv) {
+            var p = kv.split('=');
+            o[decodeURIComponent(p[0])] = decodeURIComponent(p[1] || '');
+          });
+          data = o;
+        }
+      }
+      if (!data || typeof data !== 'object') return;
+      var st = prov.state(data, f);
+      if (st === 'ended') { setOverlayMode(overlay, 'ended'); overlay.hidden = false; }
+      else if (st === 'paused') { setOverlayMode(overlay, 'paused'); overlay.hidden = false; }
+      else if (st === 'playing') overlay.hidden = true;
+    });
+  }
+
+  // Direct linked media: native <video>/<audio> get the same pause overlay,
+  // driven by the element's own play/pause events (no postMessage). Audio has
+  // no video surface, so it gets a compact (icon + "Paused") variant.
+  function attachNativePauseOverlay(media, compact) {
+    var wrap;
+    if (compact) {
+      // Audio has no positioned container — wrap it so the overlay can sit on top.
+      wrap = media.parentNode;
+      if (!wrap || !wrap.classList.contains('vibe-audio-wrap')) {
+        wrap = document.createElement('div');
+        wrap.className = 'vibe-audio-wrap';
+        media.parentNode.insertBefore(wrap, media);
+        wrap.appendChild(media);
+      }
+    } else {
+      wrap = media.parentNode; // .vibe-embed (position:relative)
+    }
+    if (!wrap || wrap._vibePauseDone) return;
+    wrap._vibePauseDone = true;
+
+    var overlay = makePauseOverlay();
+    if (compact) overlay.classList.add('vibe-facade-compact');
+    wrap.appendChild(overlay);
+
+    overlay.addEventListener('click', function () {
+      overlay.hidden = true;
+      var p = media.play();
+      if (p && p.catch) p.catch(function () {});
+    });
+    // Only after playback has begun — don't cover the not-yet-started media.
+    media.addEventListener('pause', function () { if (!media.ended) { setOverlayMode(overlay, 'paused'); overlay.hidden = false; } });
+    media.addEventListener('play', function () { overlay.hidden = true; });
+    media.addEventListener('ended', function () { setOverlayMode(overlay, 'ended'); overlay.hidden = false; });
+  }
+
+  function scanNativeVibeMedia() {
+    var vids = document.querySelectorAll('.vibe-embed > video');
+    for (var i = 0; i < vids.length; i++) attachNativePauseOverlay(vids[i], false);
+    var auds = document.querySelectorAll('.vibe-media-audio');
+    for (var j = 0; j < auds.length; j++) attachNativePauseOverlay(auds[j], true);
+  }
+  scanNativeVibeMedia();
+  document.addEventListener('DOMContentLoaded', scanNativeVibeMedia);
+
+  document.addEventListener('click', function (ev) {
+    var b = ev.target.closest ? ev.target.closest('.vibe-facade') : null;
+    if (!b || !b.dataset.embed) return;
+    var embed = b.dataset.embed;
+    var wrap = b.parentNode; // .vibe-embed (position:relative)
+
+    // Supported provider → load with pause overlay.
+    var prov = wrap ? vibeProviderFor(embed) : null;
+    if (prov) {
+      loadProviderWithOverlay(wrap, b, embed, prov);
+      return;
+    }
+
+    // Bilibili / anything else → plain autoplay iframe.
+    var src = withParam(embed, 'autoplay=1');
+    var f = document.createElement('iframe');
+    f.src = src;
+    f.title = 'Current vibe — video';
+    f.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+    f.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen');
+    f.setAttribute('allowfullscreen', '');
+    b.replaceWith(f);
+  });
+
+})();