Add search/filter/share to index, external link previews, and grazing cow pets

- Search bar with basic title/description search and a deep search that fetches
post content for full-text matches; filter popup to sort posts by date.
- Share button (copies ?post= link) on index cards and article pages.
- External post links open in a new tab and show a hover preview card.
- Fix seton-labs/Partnerships link to bench-labs/Members in Collab.html.
- Add cow pets that walk the grass strip, graze with flying grass-bit particles,
and can be patted (open-hand cursor, wiggle + sparkle animation).

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

index.html

@@ -21,6 +21,46 @@
         </p>
     </header>
 
+    <div class="search-bar">
+        <form class="search-pill" id="search-form">
+            <input type="search" id="search-input" name="q" placeholder="Search posts…" aria-label="Search post titles and descriptions" autocomplete="off">
+            <button type="submit" class="search-circle-btn" id="search-btn" aria-label="Search" title="Search titles &amp; descriptions">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                    <circle cx="11" cy="11" r="6"/>
+                    <line x1="20" y1="20" x2="15.5" y2="15.5"/>
+                </svg>
+            </button>
+            <button type="button" class="search-circle-btn deep-search-btn" id="deep-search-btn" aria-label="Deep search" title="Deep search — also searches inside post content">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="2.5" y="3" width="9" height="11" rx="1.5"/>
+                    <line x1="5.3" y1="6.7" x2="9.2" y2="6.7"/>
+                    <line x1="5.3" y1="9.7" x2="9.2" y2="9.7"/>
+                    <circle cx="16" cy="15.5" r="5" stroke-width="2"/>
+                    <line x1="19.8" y1="19.3" x2="22" y2="21.5" stroke-width="2"/>
+                </svg>
+            </button>
+        </form>
+        <button type="button" class="search-circle-btn filter-btn" id="filter-btn" aria-label="Filter" aria-expanded="false" title="Filter">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <line x1="4" y1="6" x2="20" y2="6"/>
+                <circle cx="9" cy="6" r="2"/>
+                <line x1="4" y1="12" x2="20" y2="12"/>
+                <circle cx="16" cy="12" r="2"/>
+                <line x1="4" y1="18" x2="20" y2="18"/>
+                <circle cx="7" cy="18" r="2"/>
+            </svg>
+        </button>
+        <div class="filter-popup" id="filter-popup" hidden>
+            <div class="filter-popup-title">Sort by Date</div>
+            <div class="filter-popup-choices">
+                <button type="button" class="filter-choice" data-sort="new">Recent → Old</button>
+                <button type="button" class="filter-choice" data-sort="old">Old → Recent</button>
+            </div>
+        </div>
+    </div>
+
+    <p class="deep-search-status" id="deep-search-status" hidden></p>
+
     <section class="posts">
 
       <article class="post-card">

posts/Collab.html

@@ -16,6 +16,7 @@
 
 <body>
 <script type="module" src="../summarize.js" defer></script>
+<script src="../script.js" defer></script>
 
 <div class="background"></div>
 
@@ -58,7 +59,7 @@ The more people we can gather, more organized everything will be.
 You can start a discussion on your server (discord) or the huggingface disscussions.
 <br><br>
 <h2>Join now</h2>
-<a href="https://huggingface.co/spaces/seton-labs/Partnerships">https://huggingface.co/spaces/seton-labs/Partnerships</a>
+<a href="https://huggingface.co/spaces/bench-labs/Members">https://huggingface.co/spaces/bench-labs/Members</a>
 <br><br>
 
 With ❤️ for AI capability.

posts/bench-effortless-6-2026.html

@@ -16,6 +16,7 @@
 
 <body>
 <script type="module" src="../summarize.js" defer></script>
+<script src="../script.js" defer></script>
 
 <div class="background"></div>
 

posts/benchmarks.html

@@ -16,6 +16,7 @@
 
 <body>
 <script type="module" src="../summarize.js" defer></script>
+<script src="../script.js" defer></script>
 
 <div class="background"></div>
 

posts/introducing-Bench-labs.html

@@ -9,6 +9,7 @@
 </head>
 <body>
 <script type="module" src="../summarize.js" defer></script>
+<script src="../script.js" defer></script>
 
 <div class="background"></div>
 

posts/join-welcome.html

@@ -16,6 +16,7 @@
 
 <body>
 <script type="module" src="../summarize.js" defer></script>
+<script src="../script.js" defer></script>
 
 <div class="background"></div>
 

posts/pixelmodel.html

@@ -8,6 +8,7 @@
 </head>
 <body>
 <script type="module" src="../summarize.js" defer></script>
+<script src="../script.js" defer></script>
 
 <div class="background"></div>
 

script.js

@@ -127,6 +127,138 @@
 
       document.body.appendChild(svg);
 
+      // ---- Grazing cow pets: walk back and forth along the grass, pausing at each
+      // end to graze (head dips down, tiny grass bits fly from the mouth). One shared
+      // per-cow timeline (duration + a randomized negative delay) drives three synced
+      // animations — body walk/turn, leg-bounce, head bob — so everything lines up;
+      // the JS particle bursts are scheduled against that same timeline. ----
+      if (!document.querySelector(".cow-pen")) {
+        const pen = document.createElement("div");
+        pen.className = "cow-pen";
+        pen.setAttribute("aria-hidden", "true");
+
+        const cowCount = isMobile ? 1 : 2;
+        const positions = isMobile ? [55] : [14, 68];
+        const GRAZE_FRACTIONS = [0.37, 0.87]; // where in the cycle the head is down (matches cow-head-bob below)
+
+        for (let i = 0; i < cowCount; i++) {
+          const anchor = document.createElement("div");
+          anchor.className = "cow-anchor";
+          anchor.style.left = positions[i] + "%";
+          anchor.style.setProperty("--cow-scale", isMobile ? 0.8 : (1 + (i % 2) * 0.12).toFixed(2));
+
+          const cow = document.createElement("div");
+          cow.className = "cow";
+          cow.innerHTML =
+            '<svg viewBox="0 0 100 64" class="cow-svg">' +
+              '<g class="cow-walkbody">' +
+                '<ellipse class="cow-shadow" cx="52" cy="59" rx="32" ry="4"/>' +
+                '<g class="cow-legs">' +
+                  '<rect x="26" y="42" width="7" height="17" rx="3"/>' +
+                  '<rect x="41" y="44" width="7" height="15" rx="3"/>' +
+                  '<rect x="58" y="44" width="7" height="15" rx="3"/>' +
+                  '<rect x="72" y="42" width="7" height="17" rx="3"/>' +
+                '</g>' +
+                '<ellipse class="cow-body" cx="52" cy="34" rx="32" ry="20"/>' +
+                '<path class="cow-spot" d="M20 10c6-3 14-3 20 1-2 4-16 5-20-1z"/>' +
+                '<path class="cow-spot" d="M46 20c5-2 11 0 12 4-3 3-11 3-14-1z"/>' +
+                '<path class="cow-spot" d="M60 42c5-2 12 0 13 4-4 3-12 2-13-4z"/>' +
+                '<path class="cow-tail" d="M84 30q10 2 7 15"/>' +
+              '</g>' +
+              '<g class="cow-head">' +
+                '<ellipse cx="18" cy="26" rx="15" ry="13"/>' +
+                '<path class="cow-horn" d="M13 12q-2-5 1-7"/>' +
+                '<path class="cow-horn" d="M25 12q2-5-1-7"/>' +
+                '<path class="cow-ear" d="M9 14q-6-4-9 1q4 3 9 2z"/>' +
+                '<circle class="cow-eye" cx="16" cy="20" r="1.6"/>' +
+                '<ellipse class="cow-muzzle" cx="8" cy="32" rx="8" ry="6"/>' +
+                '<circle class="cow-nostril" cx="5" cy="31" r="1.1"/>' +
+                '<circle class="cow-nostril" cx="10" cy="33" r="1.1"/>' +
+              '</g>' +
+            '</svg>';
+
+          const duration = 12000 + Math.random() * 4000; // ms — one full walk-graze-walk-graze loop
+          const offset = Math.random() * duration; // desyncs cows from each other
+          const walkbody = cow.querySelector(".cow-walkbody");
+          const head = cow.querySelector(".cow-head");
+          [cow, walkbody, head].forEach((el) => {
+            el.style.animationDuration = duration + "ms";
+            el.style.animationDelay = -offset + "ms";
+          });
+
+          anchor.appendChild(cow);
+          pen.appendChild(anchor);
+
+          if (!prefersReducedMotion) {
+            const muzzle = cow.querySelector(".cow-muzzle");
+            const burst = () => {
+              if (!muzzle.isConnected) return;
+              const rect = muzzle.getBoundingClientRect();
+              const count = isMobile ? 1 : 2 + Math.floor(Math.random() * 2);
+              for (let b = 0; b < count; b++) {
+                setTimeout(() => spawnGrassBit(rect), b * 80);
+              }
+            };
+            GRAZE_FRACTIONS.forEach((fraction) => {
+              const target = duration * fraction;
+              const firstFire = ((target - offset) % duration + duration) % duration;
+              setTimeout(() => {
+                burst();
+                setInterval(burst, duration);
+              }, firstFire);
+            });
+          }
+
+          // ---- Pat: click a cow for a happy wiggle + a couple of sparkles.
+          // The wiggle animates the <svg> itself (untouched by walk/bounce/bob,
+          // which all live on elements inside it), so it layers on top for free. ----
+          const svgEl = cow.querySelector(".cow-svg");
+          cow.addEventListener("click", () => {
+            svgEl.classList.remove("is-patted");
+            void svgEl.offsetWidth; // force a reflow so re-adding the class restarts the animation
+            svgEl.classList.add("is-patted");
+            if (!prefersReducedMotion) {
+              const rect = cow.getBoundingClientRect();
+              for (let s = 0; s < 3; s++) {
+                setTimeout(() => spawnPatSparkle(rect), s * 70);
+              }
+            }
+          });
+          svgEl.addEventListener("animationend", (e) => {
+            if (e.animationName === "cow-pat-wiggle") svgEl.classList.remove("is-patted");
+          });
+        }
+
+        document.body.appendChild(pen);
+      }
+
+      // A tiny fixed-position bit of grass, spawned at a live getBoundingClientRect()
+      // (so it starts exactly at the mouth regardless of the cow's current walk/turn/bob
+      // state) then falls and fades on its own, independent of the cow's animation.
+      function spawnGrassBit(rect) {
+        const bit = document.createElement("span");
+        bit.className = "grass-bit";
+        bit.style.left = rect.left + rect.width / 2 + "px";
+        bit.style.top = rect.top + rect.height / 2 + "px";
+        bit.style.setProperty("--dx", (Math.random() * 16 - 8).toFixed(1) + "px");
+        bit.style.setProperty("--rot", (Math.random() * 90 - 45).toFixed(0) + "deg");
+        bit.style.animationDuration = (500 + Math.random() * 250).toFixed(0) + "ms";
+        document.body.appendChild(bit);
+        bit.addEventListener("animationend", () => bit.remove());
+      }
+
+      // A little heart/sparkle pop for the pat feature, same fixed-position-from-rect trick.
+      function spawnPatSparkle(rect) {
+        const el = document.createElement("span");
+        el.className = "pat-sparkle";
+        el.textContent = Math.random() < 0.5 ? "❤" : "✦";
+        el.style.left = rect.left + rect.width * (0.25 + Math.random() * 0.5) + "px";
+        el.style.top = rect.top + "px";
+        el.style.setProperty("--dx", (Math.random() * 20 - 10).toFixed(1) + "px");
+        document.body.appendChild(el);
+        el.addEventListener("animationend", () => el.remove());
+      }
+
       // ---- Scroll-driven spring physics (DESKTOP ONLY) ----
       if (!isMobile && !prefersReducedMotion) {
         let squash = 0;
@@ -200,10 +332,342 @@
       pre.appendChild(btn);
     });
 
+    // ---- Share button: copies the canonical ?post= URL for a post ----
+    const SITE_BASE = "https://huggingface.co/spaces/bench-labs/blog";
+    const SHARE_ICON =
+      '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+      '<circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/>' +
+      '<line x1="8.2" y1="10.7" x2="15.8" y2="6.3"/><line x1="8.2" y1="13.3" x2="15.8" y2="17.7"/>' +
+      "</svg>";
+    const CHECK_ICON =
+      '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
+      '<polyline points="20 6 9 17 4 12"/></svg>';
+
+    function makeShareBtn(filename) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "share-btn";
+      btn.setAttribute("aria-label", "Copy share link");
+      btn.title = "Copy share link";
+      btn.innerHTML = SHARE_ICON;
+      btn.addEventListener("click", async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const url = `${SITE_BASE}?post=${filename}`;
+        try {
+          await navigator.clipboard.writeText(url);
+          btn.classList.remove("error");
+          btn.classList.add("copied");
+          btn.innerHTML = CHECK_ICON;
+          setTimeout(() => {
+            btn.classList.remove("copied");
+            btn.innerHTML = SHARE_ICON;
+          }, 1400);
+        } catch {
+          btn.classList.add("error");
+          setTimeout(() => btn.classList.remove("error"), 1400);
+        }
+      });
+      return btn;
+    }
+
+    // One share button per post card on the index page
+    document.querySelectorAll(".post-card").forEach((card) => {
+      if (card.querySelector(".share-btn")) return;
+      const link = card.querySelector('a[href^="posts/"]');
+      if (!link) return;
+      const filename = link.getAttribute("href").split("/").pop();
+      card.appendChild(makeShareBtn(filename));
+    });
+
+    // ---- Search bar (index page only): basic title/description filter,
+    // deep search across fetched post content, and a date-sort filter popup ----
+    const postsSection = document.querySelector(".posts");
+    if (postsSection) {
+      const form = document.getElementById("search-form");
+      const input = document.getElementById("search-input");
+      const deepBtn = document.getElementById("deep-search-btn");
+      const filterBtn = document.getElementById("filter-btn");
+      const filterPopup = document.getElementById("filter-popup");
+      const statusEl = document.getElementById("deep-search-status");
+      const cardData = Array.from(postsSection.querySelectorAll(".post-card")).map((card) => {
+        const link = card.querySelector('a[href^="posts/"]');
+        return {
+          card,
+          file: link ? link.getAttribute("href").split("/").pop() : null,
+          title: (card.querySelector("h2")?.textContent || "").trim(),
+          desc: (card.querySelector("p")?.textContent || "").trim(),
+          dateText: (card.querySelector(".date")?.textContent || "").trim(),
+        };
+      });
+
+      const deepTextCache = new Map(); // filename -> plain text content of that post
+
+      function clearSnippets() {
+        cardData.forEach(({ card }) => card.querySelector(".post-card-snippet")?.remove());
+      }
+
+      function showAll() {
+        clearSnippets();
+        cardData.forEach(({ card }) => (card.style.display = ""));
+      }
+
+      function runBasicSearch(query) {
+        const q = query.trim().toLowerCase();
+        clearSnippets();
+        if (!q) {
+          cardData.forEach(({ card }) => (card.style.display = ""));
+          return;
+        }
+        cardData.forEach(({ card, title, desc }) => {
+          const match = title.toLowerCase().includes(q) || desc.toLowerCase().includes(q);
+          card.style.display = match ? "" : "none";
+        });
+      }
+
+      async function fetchPostText(file) {
+        if (deepTextCache.has(file)) return deepTextCache.get(file);
+        const res = await fetch("posts/" + file);
+        const html = await res.text();
+        const doc = new DOMParser().parseFromString(html, "text/html");
+        const text = (doc.querySelector(".article") || doc.body).textContent.replace(/\s+/g, " ").trim();
+        deepTextCache.set(file, text);
+        return text;
+      }
+
+      function escapeHtml(s) {
+        return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      }
+
+      function makeSnippet(text, q) {
+        const idx = text.toLowerCase().indexOf(q);
+        if (idx === -1) return null;
+        const start = Math.max(0, idx - 50);
+        const end = Math.min(text.length, idx + q.length + 70);
+        let snippet = text.slice(start, end);
+        if (start > 0) snippet = "…" + snippet;
+        if (end < text.length) snippet += "…";
+        return snippet;
+      }
+
+      function highlightSnippet(snippet, q) {
+        const idx = snippet.toLowerCase().indexOf(q.toLowerCase());
+        if (idx === -1) return escapeHtml(snippet);
+        return (
+          escapeHtml(snippet.slice(0, idx)) +
+          "<mark>" + escapeHtml(snippet.slice(idx, idx + q.length)) + "</mark>" +
+          escapeHtml(snippet.slice(idx + q.length))
+        );
+      }
+
+      async function runDeepSearch(query) {
+        const q = query.trim().toLowerCase();
+        clearSnippets();
+        if (!q) {
+          showAll();
+          return;
+        }
+
+        deepBtn.classList.add("is-busy");
+        deepBtn.disabled = true;
+        statusEl.hidden = false;
+        statusEl.textContent = "Searching " + cardData.length + " posts…";
+
+        try {
+          await Promise.all(
+            cardData.map(async ({ card, title, desc, file }) => {
+              const titleHit = title.toLowerCase().includes(q);
+              const descHit = desc.toLowerCase().includes(q);
+              let snippet = null;
+
+              if (file) {
+                try {
+                  const text = await fetchPostText(file);
+                  snippet = makeSnippet(text, q);
+                } catch {
+                  // couldn't fetch this post's content — fall back to title/description match only
+                }
+              }
+
+              const match = titleHit || descHit || snippet;
+              card.style.display = match ? "" : "none";
+
+              if (match && snippet) {
+                const snippetEl = document.createElement("p");
+                snippetEl.className = "post-card-snippet";
+                snippetEl.innerHTML = "Found in post: " + highlightSnippet(snippet, q);
+                const readLink = card.querySelector('a[href^="posts/"]');
+                if (readLink) readLink.insertAdjacentElement("beforebegin", snippetEl);
+                else card.appendChild(snippetEl);
+              }
+            })
+          );
+        } finally {
+          deepBtn.classList.remove("is-busy");
+          deepBtn.disabled = false;
+          statusEl.hidden = true;
+        }
+      }
+
+      form?.addEventListener("submit", (e) => {
+        e.preventDefault();
+        runBasicSearch(input.value);
+      });
+
+      deepBtn?.addEventListener("click", () => {
+        runDeepSearch(input.value);
+      });
+
+      // ---- Filter popup: sort by date ----
+      function parseCardDate(dateText) {
+        const m = dateText.match(/^(\w+)\s+(\d{4})$/);
+        if (!m) return null;
+        const t = new Date(`${m[1]} 1, ${m[2]}`).getTime();
+        return Number.isNaN(t) ? null : t;
+      }
+
+      function applySort(direction) {
+        const withDate = cardData.filter((c) => parseCardDate(c.dateText) !== null);
+        const withoutDate = cardData.filter((c) => parseCardDate(c.dateText) === null);
+        withDate.sort((a, b) => {
+          const ta = parseCardDate(a.dateText);
+          const tb = parseCardDate(b.dateText);
+          return direction === "new" ? tb - ta : ta - tb;
+        });
+        [...withDate, ...withoutDate].forEach(({ card }) => postsSection.appendChild(card));
+      }
+
+      filterBtn?.addEventListener("click", () => {
+        const opening = filterPopup.hidden;
+        filterPopup.hidden = !opening;
+        filterBtn.setAttribute("aria-expanded", String(opening));
+      });
+
+      filterPopup?.querySelectorAll(".filter-choice").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          filterPopup.querySelectorAll(".filter-choice").forEach((b) => b.classList.remove("active"));
+          btn.classList.add("active");
+          applySort(btn.dataset.sort);
+        });
+      });
+
+      document.addEventListener("click", (e) => {
+        if (filterPopup && !filterPopup.hidden && !filterPopup.contains(e.target) && e.target !== filterBtn && !filterBtn.contains(e.target)) {
+          filterPopup.hidden = true;
+          filterBtn.setAttribute("aria-expanded", "false");
+        }
+      });
+    }
+
     // ---- Article-only features: sidebar + collapsible code ----
     const article = document.querySelector(".article");
     if (!article) return;
 
+    // ---- Share button for the current post ----
+    {
+      const filename = location.pathname.split("/").pop();
+      if (filename && /\.html?$/i.test(filename) && !article.querySelector(".share-btn")) {
+        const shareBtn = makeShareBtn(filename);
+        shareBtn.classList.add("share-btn-article");
+        const back = article.querySelector(".back");
+        if (back) back.insertAdjacentElement("afterend", shareBtn);
+        else article.prepend(shareBtn);
+      }
+    }
+
+    // ---- External links: open in a new tab + hover preview card with fetched metadata ----
+    {
+      const linkMetaCache = new Map();
+
+      function faviconlessTitle(href) {
+        try {
+          const u = new URL(href);
+          const parts = u.pathname.split("/").filter(Boolean);
+          if (u.hostname === "huggingface.co" && parts[0] === "spaces" && parts.length >= 3) {
+            return `${parts[1]}/${parts[2]} · Hugging Face Space`;
+          }
+          if (u.hostname === "huggingface.co" && parts.length >= 2) {
+            return `${parts[0]}/${parts[1]} · Hugging Face Hub`;
+          }
+          return u.hostname;
+        } catch {
+          return href;
+        }
+      }
+
+      async function loadLinkMeta(href) {
+        if (linkMetaCache.has(href)) return linkMetaCache.get(href);
+        const metaPromise = (async () => {
+          try {
+            const res = await fetch(href, { mode: "cors" });
+            if (!res.ok) throw new Error("bad status");
+            const html = await res.text();
+            const doc = new DOMParser().parseFromString(html, "text/html");
+            const title = doc.querySelector("title")?.textContent?.trim() || null;
+            const desc =
+              doc.querySelector('meta[name="description"]')?.getAttribute("content")?.trim() ||
+              doc.querySelector('meta[property="og:description"]')?.getAttribute("content")?.trim() ||
+              null;
+            return { title, desc };
+          } catch {
+            return { title: null, desc: null };
+          }
+        })();
+        linkMetaCache.set(href, metaPromise);
+        return metaPromise;
+      }
+
+      article.querySelectorAll('a[href^="http"]').forEach((link) => {
+        link.addEventListener("click", (e) => {
+          e.preventDefault();
+          window.open(link.href, "_blank", "noopener,noreferrer");
+        });
+
+        let card = null;
+        let hideTimer = null;
+
+        link.addEventListener("mouseenter", () => {
+          clearTimeout(hideTimer);
+          card = document.createElement("div");
+          card.className = "link-preview-card";
+          const urlEl = document.createElement("div");
+          urlEl.className = "link-preview-url";
+          urlEl.textContent = link.href;
+          const titleEl = document.createElement("div");
+          titleEl.className = "link-preview-title";
+          titleEl.textContent = faviconlessTitle(link.href);
+          card.appendChild(titleEl);
+          card.appendChild(urlEl);
+          document.body.appendChild(card);
+
+          const rect = link.getBoundingClientRect();
+          card.style.top = rect.bottom + window.scrollY + 8 + "px";
+          const maxLeft = window.scrollX + document.documentElement.clientWidth - card.offsetWidth - 12;
+          card.style.left = Math.min(rect.left + window.scrollX, Math.max(12, maxLeft)) + "px";
+          requestAnimationFrame(() => card?.classList.add("visible"));
+
+          loadLinkMeta(link.href).then((meta) => {
+            if (!card || !card.isConnected) return;
+            if (meta.title) titleEl.textContent = meta.title;
+            if (meta.desc) {
+              const descEl = document.createElement("div");
+              descEl.className = "link-preview-desc";
+              descEl.textContent = meta.desc;
+              card.appendChild(descEl);
+            }
+          });
+        });
+
+        link.addEventListener("mouseleave", () => {
+          const toRemove = card;
+          card = null;
+          if (!toRemove) return;
+          toRemove.classList.remove("visible");
+          hideTimer = setTimeout(() => toRemove.remove(), 180);
+        });
+      });
+    }
+
     const headings = article.querySelectorAll("h1, h2, h3");
     const codeBlocks = article.querySelectorAll("pre");
 

style.css

@@ -910,4 +910,371 @@ pre:hover .copy-btn { opacity: 1; }
 @media (prefers-reduced-motion: reduce) {
     .ai-sum-btn.is-busy svg { animation: none; }
     .ai-sum-ring.is-indeterminate .ai-sum-ring-fill { animation: none; stroke-dashoffset: 40; }
+}
+
+/* -------------------- SEARCH BAR -------------------- */
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 22px;
+    position: relative;
+}
+
+.search-pill {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 6px;
+    padding: 6px 6px 6px 20px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+    transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.search-pill:focus-within {
+    border-color: rgba(74, 144, 194, 0.5);
+    box-shadow: var(--shadow-hover);
+}
+
+.search-pill input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-family: inherit;
+    font-size: 0.95rem;
+    color: var(--text);
+    padding: 8px 4px;
+}
+
+.search-pill input::placeholder { color: var(--muted); }
+
+.search-circle-btn {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--surface-2);
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition), opacity var(--transition);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    font-family: inherit;
+}
+
+.search-circle-btn:hover:not(:disabled) {
+    background: #fff;
+    border-color: var(--accent);
+    transform: scale(1.06);
+}
+
+.search-circle-btn:disabled { opacity: 0.5; cursor: default; }
+.search-circle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.deep-search-btn.is-busy svg { animation: ai-sum-icon-pulse 1.4s ease-in-out infinite; }
+
+.filter-btn[aria-expanded="true"] {
+    background: #fff;
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.filter-popup {
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 200;
+    min-width: 220px;
+    padding: 14px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-hover);
+}
+
+.filter-popup-title {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    margin-bottom: 10px;
+}
+
+.filter-popup-choices {
+    display: flex;
+    gap: 8px;
+}
+
+.filter-choice {
+    flex: 1;
+    padding: 8px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--border-soft);
+    background: rgba(255,255,255,0.5);
+    color: var(--text);
+    font-size: 0.78rem;
+    cursor: pointer;
+    transition: background var(--transition), border-color var(--transition), color var(--transition);
+    font-family: inherit;
+}
+
+.filter-choice:hover { background: rgba(255,255,255,0.85); }
+
+.filter-choice.active {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+}
+
+.deep-search-status {
+    margin: -10px 0 20px;
+    color: var(--muted);
+    font-size: 0.82rem;
+}
+
+.post-card-snippet {
+    margin: -4px 0 14px;
+    padding: 10px 12px;
+    background: rgba(255,255,255,0.5);
+    border: 1px solid var(--border-soft);
+    border-radius: 10px;
+    color: var(--text);
+    font-size: 0.85rem;
+    line-height: 1.5;
+}
+.post-card-snippet mark { background: rgba(74,144,194,0.25); }
+
+@media (max-width: 560px) {
+    .search-bar { flex-wrap: wrap; }
+    .search-pill { width: 100%; }
+}
+
+/* -------------------- SHARE BUTTON -------------------- */
+
+.post-card { position: relative; }
+
+.share-btn {
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid var(--border-soft);
+    background: rgba(255,255,255,0.5);
+    color: var(--muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.share-btn:hover { background: #fff; border-color: var(--accent); color: var(--accent); transform: scale(1.06); }
+.share-btn.copied { color: var(--accent-green); border-color: var(--accent-green); }
+.share-btn.error { color: #b3503f; border-color: #b3503f; }
+.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.share-btn-article {
+    display: inline-flex;
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-bottom: 28px;
+}
+
+/* -------------------- EXTERNAL LINK PREVIEW -------------------- */
+
+.link-preview-card {
+    position: absolute;
+    z-index: 500;
+    max-width: 320px;
+    padding: 12px 14px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-hover);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    pointer-events: none;
+}
+
+.link-preview-card.visible { opacity: 1; transform: translateY(0); }
+
+.link-preview-title {
+    font-weight: 600;
+    color: var(--heading);
+    font-size: 0.88rem;
+    margin-bottom: 4px;
+}
+
+.link-preview-url {
+    color: var(--accent);
+    font-size: 0.75rem;
+    word-break: break-all;
+    margin-bottom: 4px;
+}
+
+.link-preview-desc {
+    color: var(--muted);
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .link-preview-card { transition: none; }
+}
+
+/* -------------------- COW PETS -------------------- */
+
+.cow-pen {
+    position: fixed;
+    left: 0;
+    bottom: 6px;
+    width: 100%;
+    height: 70px;
+    z-index: 51;
+    pointer-events: none;
+    overflow: visible;
+}
+
+.cow-anchor {
+    position: absolute;
+    bottom: 0;
+    width: 92px;
+    transform: translateX(-50%) scale(var(--cow-scale, 1));
+    transform-origin: bottom center;
+}
+
+.cow {
+    cursor: grab;
+    pointer-events: auto;
+    animation: cow-walk 14s ease-in-out infinite;
+    will-change: transform;
+}
+
+.cow:active { cursor: grabbing; }
+
+.cow-svg {
+    width: 100%;
+    display: block;
+    overflow: visible;
+    transform-origin: 50% 100%;
+}
+
+.cow-svg.is-patted { animation: cow-pat-wiggle 480ms ease-in-out; }
+
+.cow-walkbody {
+    animation: cow-bounce 14s ease-in-out infinite;
+}
+
+.cow-head {
+    transform-origin: 30px 26px;
+    animation: cow-head-bob 14s ease-in-out infinite;
+}
+
+.cow-shadow { fill: rgba(40, 60, 40, 0.18); }
+.cow-body, .cow-head > ellipse:first-child { fill: #fbfaf6; stroke: #d8d2c4; stroke-width: 0.6; }
+.cow-spot { fill: #3a3128; }
+.cow-legs rect { fill: #3a3128; }
+.cow-tail { fill: none; stroke: #3a3128; stroke-width: 2.5; stroke-linecap: round; }
+.cow-muzzle { fill: #e8c9b0; }
+.cow-nostril { fill: #6b4a38; }
+.cow-eye { fill: #241d18; }
+.cow-ear { fill: #f0c9ad; }
+.cow-horn { fill: none; stroke: #d8cdb8; stroke-width: 2; stroke-linecap: round; }
+
+/* Walk right, pause + graze, turn, walk left, pause + graze, turn — loops seamlessly
+   since 100% matches 0% exactly. */
+@keyframes cow-walk {
+    0%   { transform: translateX(0)    scaleX(-1); }
+    28%  { transform: translateX(80px) scaleX(-1); }
+    46%  { transform: translateX(80px) scaleX(-1); }
+    50%  { transform: translateX(80px) scaleX(1); }
+    78%  { transform: translateX(0)    scaleX(1); }
+    96%  { transform: translateX(0)    scaleX(1); }
+    100% { transform: translateX(0)    scaleX(-1); }
+}
+
+/* Gentle gait bounce during the two walking stretches, still while grazing/turning. */
+@keyframes cow-bounce {
+    0%, 2%    { transform: translateY(0); }
+    14%       { transform: translateY(-2px); }
+    26%, 50%  { transform: translateY(0); }
+    64%       { transform: translateY(-2px); }
+    76%, 100% { transform: translateY(0); }
+}
+
+/* Head dips down to graze during the two pauses in cow-walk above (GRAZE_FRACTIONS
+   in script.js targets the middle of these windows for the grass-bit bursts). */
+@keyframes cow-head-bob {
+    0%, 26%   { transform: translate(0, 0) rotate(0deg); }
+    32%, 42%  { transform: translate(1px, 7px) rotate(10deg); }
+    48%, 76%  { transform: translate(0, 0) rotate(0deg); }
+    82%, 92%  { transform: translate(1px, 7px) rotate(10deg); }
+    98%, 100% { transform: translate(0, 0) rotate(0deg); }
+}
+
+@keyframes cow-pat-wiggle {
+    0%   { transform: scale(1, 1) rotate(0deg); }
+    20%  { transform: scale(1.05, 0.92) rotate(-4deg); }
+    45%  { transform: scale(0.96, 1.05) rotate(3deg); }
+    70%  { transform: scale(1.03, 0.97) rotate(-2deg); }
+    100% { transform: scale(1, 1) rotate(0deg); }
+}
+
+.grass-bit {
+    position: fixed;
+    z-index: 60;
+    width: 3px;
+    height: 6px;
+    margin: -3px 0 0 -1px;
+    background: linear-gradient(#63ad64, #457f4b);
+    border-radius: 1px;
+    pointer-events: none;
+    animation: grass-bit-fall 650ms ease-in forwards;
+    will-change: transform, opacity;
+}
+
+@keyframes grass-bit-fall {
+    0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
+    100% { opacity: 0; transform: translate(var(--dx, 0px), 20px) rotate(var(--rot, 0deg)); }
+}
+
+.pat-sparkle {
+    position: fixed;
+    z-index: 61;
+    font-size: 14px;
+    line-height: 1;
+    pointer-events: none;
+    animation: pat-sparkle-pop 700ms ease-out forwards;
+    will-change: transform, opacity;
+}
+
+@keyframes pat-sparkle-pop {
+    0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
+    25%  { opacity: 1; transform: translate(0, -6px) scale(1.1) rotate(-8deg); }
+    100% { opacity: 0; transform: translate(var(--dx, 0px), -34px) scale(0.9) rotate(12deg); }
+}
+
+@media (max-width: 640px) {
+    .cow-pen { height: 56px; }
 }