diff --git a/firebase.json b/firebase.json
index 2f16842b..ab4d69df 100644
--- a/firebase.json
+++ b/firebase.json
@@ -13,7 +13,7 @@
       "trailingSlash": true,
       "headers": [
         {
-          "source": "**/*.@(js|css|woff|woff2|ttf|eot|otf)",
+          "source": "/_next/static/**",
           "headers": [
             {
               "key": "Cache-Control",
@@ -26,7 +26,7 @@
           ]
         },
         {
-          "source": "**/*.@(jpg|jpeg|png|gif|webp|avif|ico|svg)",
+          "source": "**/*.@(jpg|jpeg|png|gif|webp|avif|ico|svg|woff|woff2|ttf|eot|otf)",
           "headers": [
             {
               "key": "Cache-Control",
@@ -43,7 +43,7 @@
           "headers": [
             {
               "key": "Cache-Control",
-              "value": "public, max-age=3600, s-maxage=86400"
+              "value": "public, max-age=0, must-revalidate"
             },
             {
               "key": "X-Content-Type-Options",
diff --git a/sites/hacklytics2027/app/globals.css b/sites/hacklytics2027/app/globals.css
index f75fb39b..8de0c3e9 100644
--- a/sites/hacklytics2027/app/globals.css
+++ b/sites/hacklytics2027/app/globals.css
@@ -29,10 +29,65 @@
   --rule: #2a312d;
 
   --bloom: #ff4f8b;
+  --bloom-hover: #ff6a9d;
   --bloom-deep: #b8285a;
   --on-bloom: #16060c;
+  --line-border: #39413c;
+
+  /* Neon halo on blooming flowers. */
+  --glow-1: #ff4f8b;
+  --glow-2: #ff4f8b;
+  --glow-3: rgba(255, 79, 139, 0.45);
 
   --navbar-height: 72px;
+  color-scheme: dark;
+}
+
+/* Day: the same greenhouse with the lights on. A cool sage ground (not
+   cream), near-black ink, and a deeper pink, since the night pink is too
+   light to read as text on a pale ground. Used when the visitor picks light,
+   or has no choice saved and their system is light. */
+:root[data-theme="light"] {
+  --ground: #eef1ec;
+  --raised: #f7f8f5;
+  --ink: #121613;
+  --ink-2: #444c46;
+  --ink-3: #5f6761; /* meta: ≥4.5:1 on ground */
+  --rule: #d3d9d3;
+
+  --bloom: #c2185b;
+  --bloom-hover: #a8134d;
+  --bloom-deep: #8e0f41;
+  --on-bloom: #ffffff;
+  --line-border: #bfc7c0;
+
+  --glow-1: rgba(194, 24, 91, 0.55);
+  --glow-2: rgba(194, 24, 91, 0.35);
+  --glow-3: rgba(194, 24, 91, 0.18);
+
+  color-scheme: light;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --ground: #eef1ec;
+    --raised: #f7f8f5;
+    --ink: #121613;
+    --ink-2: #444c46;
+    --ink-3: #5f6761;
+    --rule: #d3d9d3;
+
+    --bloom: #c2185b;
+    --bloom-hover: #a8134d;
+    --bloom-deep: #8e0f41;
+    --on-bloom: #ffffff;
+    --line-border: #bfc7c0;
+
+    --glow-1: rgba(194, 24, 91, 0.55);
+    --glow-2: rgba(194, 24, 91, 0.35);
+    --glow-3: rgba(194, 24, 91, 0.18);
+
+    color-scheme: light;
+  }
 }
 
 /* ─── Base ─── */
@@ -115,10 +170,10 @@ body {
     background: var(--bloom);
     color: var(--on-bloom);
   }
-  .btn-bloom:hover { background: #ff6a9d; }
+  .btn-bloom:hover { background: var(--bloom-hover); }
   .btn-bloom:active { background: var(--bloom-deep); color: var(--ink); }
   .btn-line {
-    border: 1px solid #39413c;
+    border: 1px solid var(--line-border);
     color: var(--ink);
   }
   .btn-line:hover { border-color: var(--ink-3); }
@@ -174,9 +229,9 @@ body {
   will-change: opacity;
   transform-origin: 50% calc(var(--top) / 2);
   filter:
-    drop-shadow(0 0 2px #ff4f8b)
-    drop-shadow(0 0 8px #ff4f8b)
-    drop-shadow(0 0 22px rgba(255, 79, 139, 0.45));
+    drop-shadow(0 0 2px var(--glow-1))
+    drop-shadow(0 0 8px var(--glow-2))
+    drop-shadow(0 0 22px var(--glow-3));
 }
 
 [data-bloom="on"] .flower-stem {
diff --git a/sites/hacklytics2027/app/layout.tsx b/sites/hacklytics2027/app/layout.tsx
index a1bbce16..ffa061cc 100644
--- a/sites/hacklytics2027/app/layout.tsx
+++ b/sites/hacklytics2027/app/layout.tsx
@@ -22,9 +22,16 @@ const silkscreen = Silkscreen({
 });
 
 export const viewport: Viewport = {
-  themeColor: "#131715",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#eef1ec" },
+    { media: "(prefers-color-scheme: dark)", color: "#131715" },
+  ],
 };
 
+// Runs before first paint so a saved light/dark choice never flashes the
+// other theme. Kept tiny and dependency-free; the key matches ThemeToggle.
+const themeScript = `try{var t=localStorage.getItem("hl-theme");if(t==="light"||t==="dark")document.documentElement.dataset.theme=t}catch(e){}`;
+
 export const metadata: Metadata = {
   title: "Hacklytics 2027: Digital Bloom · Data Science Hackathon at Georgia Tech",
   description:
@@ -109,8 +116,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html
       lang="en"
       className={`${instrumentSans.variable} ${silkscreen.variable}`}
+      suppressHydrationWarning
     >
       <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
diff --git a/sites/hacklytics2027/components/Navbar.tsx b/sites/hacklytics2027/components/Navbar.tsx
index 160def0d..256674b5 100644
--- a/sites/hacklytics2027/components/Navbar.tsx
+++ b/sites/hacklytics2027/components/Navbar.tsx
@@ -2,6 +2,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { INTEREST_URL } from "@/lib/links";
+import ThemeToggle from "./ThemeToggle";
 
 const navItems = [
   { name: "About", href: "/#about" },
@@ -66,9 +67,13 @@ export default function Navbar() {
     return () => document.body.classList.remove("overflow-hidden");
   }, [open]);
 
-  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+  const handleNavClick = (
+    e: React.MouseEvent<HTMLAnchorElement>,
+    href: string,
+  ) => {
     // Cmd/ctrl-click opens a new tab; that is the browser's to handle.
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0)
+      return;
     setOpen(false);
     const id = href.replace("/#", "");
     const el = document.getElementById(id);
@@ -128,33 +133,36 @@ export default function Navbar() {
             ))}
           </nav>
 
-          <a
-            href={INTEREST_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Notify me (opens a sign-up form)"
-            className="btn btn-bloom hidden lg:inline-flex px-4 py-2.5 text-sm shrink-0"
-          >
-            Notify me
-          </a>
+          <div className="flex items-center gap-3 shrink-0">
+            <ThemeToggle />
+            <a
+              href={INTEREST_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Notify me (opens a sign-up form)"
+              className="btn btn-bloom hidden lg:inline-flex px-4 py-2.5 text-sm shrink-0"
+            >
+              Notify me
+            </a>
 
-          <button
-            aria-label="Toggle menu"
-            aria-expanded={open}
-            aria-controls="mobile-menu"
-            onClick={() => setOpen((s) => !s)}
-            className="lg:hidden w-11 h-11 rounded-full flex flex-col justify-center items-center gap-[6px] border border-rule hover:border-ink-3 transition-colors bg-transparent"
-          >
-            <span
-              className={`block w-4 h-[1px] bg-ink transition-all duration-300 ${open ? "rotate-45 translate-y-[7px]" : ""}`}
-            />
-            <span
-              className={`block w-4 h-[1px] bg-ink transition-all duration-300 ${open ? "opacity-0 scale-x-0" : ""}`}
-            />
-            <span
-              className={`block w-4 h-[1px] bg-ink transition-all duration-300 ${open ? "-rotate-45 -translate-y-[7px]" : ""}`}
-            />
-          </button>
+            <button
+              aria-label="Toggle menu"
+              aria-expanded={open}
+              aria-controls="mobile-menu"
+              onClick={() => setOpen((s) => !s)}
+              className="lg:hidden w-11 h-11 rounded-full flex flex-col justify-center items-center gap-[6px] border border-rule hover:border-ink-3 transition-colors bg-transparent"
+            >
+              <span
+                className={`block w-4 h-[1px] bg-ink transition-all duration-300 ${open ? "rotate-45 translate-y-[7px]" : ""}`}
+              />
+              <span
+                className={`block w-4 h-[1px] bg-ink transition-all duration-300 ${open ? "opacity-0 scale-x-0" : ""}`}
+              />
+              <span
+                className={`block w-4 h-[1px] bg-ink transition-all duration-300 ${open ? "-rotate-45 -translate-y-[7px]" : ""}`}
+              />
+            </button>
+          </div>
         </div>
       </header>
 
diff --git a/sites/hacklytics2027/components/ThemeToggle.tsx b/sites/hacklytics2027/components/ThemeToggle.tsx
new file mode 100644
index 00000000..ea290cc0
--- /dev/null
+++ b/sites/hacklytics2027/components/ThemeToggle.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/** localStorage key; also read by the pre-paint script in app/layout.tsx. */
+export const THEME_KEY = "hl-theme";
+
+type Theme = "light" | "dark";
+
+const subscribe = (onChange: () => void) => {
+  const media = window.matchMedia("(prefers-color-scheme: light)");
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"],
+  });
+  media.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media.removeEventListener("change", onChange);
+  };
+};
+
+// An explicit choice wins; otherwise the system setting decides, which is
+// what globals.css does with no data-theme attribute.
+const current = (): Theme => {
+  const set = document.documentElement.dataset.theme;
+  if (set === "light" || set === "dark") return set;
+  return window.matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
+};
+
+/**
+ * Night / day switch. The greenhouse at night stays the default look for
+ * anyone whose system is dark; this lets either side pick the other.
+ */
+export default function ThemeToggle({
+  className = "",
+}: {
+  className?: string;
+}) {
+  // Server render has no theme; the button is drawn as "dark" until hydrated,
+  // which only affects the icon, never the page colours (set pre-paint).
+  const theme = useSyncExternalStore<Theme>(subscribe, current, () => "dark");
+  const next: Theme = theme === "dark" ? "light" : "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        document.documentElement.dataset.theme = next;
+        try {
+          localStorage.setItem(THEME_KEY, next);
+        } catch {
+          // Private mode or blocked storage: the choice lasts this page view.
+        }
+      }}
+      aria-label={
+        next === "light" ? "Switch to light mode" : "Switch to dark mode"
+      }
+      title={next === "light" ? "Light mode" : "Dark mode"}
+      className={`w-11 h-11 rounded-full flex items-center justify-center border border-rule hover:border-ink-3 text-ink transition-colors bg-transparent shrink-0 ${className}`}
+    >
+      {theme === "dark" ? (
+        // Sun, drawn on the pixel grid like the rest of the site.
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          shapeRendering="crispEdges"
+          aria-hidden="true"
+          fill="currentColor"
+        >
+          <rect x="6" y="5" width="4" height="6" />
+          <rect x="5" y="6" width="6" height="4" />
+          <rect x="7" y="1" width="2" height="2" />
+          <rect x="7" y="13" width="2" height="2" />
+          <rect x="1" y="7" width="2" height="2" />
+          <rect x="13" y="7" width="2" height="2" />
+          <rect x="3" y="3" width="2" height="2" />
+          <rect x="11" y="3" width="2" height="2" />
+          <rect x="3" y="11" width="2" height="2" />
+          <rect x="11" y="11" width="2" height="2" />
+        </svg>
+      ) : (
+        // Moon.
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          shapeRendering="crispEdges"
+          aria-hidden="true"
+          fill="currentColor"
+        >
+          <rect x="6" y="2" width="5" height="2" />
+          <rect x="4" y="4" width="4" height="2" />
+          <rect x="3" y="6" width="4" height="4" />
+          <rect x="4" y="10" width="4" height="2" />
+          <rect x="6" y="12" width="5" height="2" />
+          <rect x="10" y="10" width="3" height="2" />
+          <rect x="11" y="4" width="2" height="2" />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/sites/hacklytics2027/public/sw.js b/sites/hacklytics2027/public/sw.js
index e90b02f4..01711cdc 100644
--- a/sites/hacklytics2027/public/sw.js
+++ b/sites/hacklytics2027/public/sw.js
@@ -1,9 +1,11 @@
 // Service Worker for Hacklytics 2027 — Digital Bloom
-// Implements cache-first for static assets, stale-while-revalidate for pages
+// Pages network-first (cache only when offline), fingerprinted build output
+// cache-first, other public files stale-while-revalidate.
 
-// Bumped when cached assets must be dropped: v3 flushes images that v2 served
-// cache-first forever under unchanged filenames.
-const CACHE_VERSION = "hacklytics-v3";
+// Bumped when cached assets must be dropped: v3 flushed images that v2 served
+// cache-first forever; v4 drops every page cached before the greenhouse
+// redesign. Activation deletes every other cache name.
+const CACHE_VERSION = "hacklytics-v4";
 
 // Shell routes worth having offline. 404 is included so a bad link still
 // renders the themed page instead of the browser's offline error.
@@ -113,17 +115,16 @@ async function cacheFirst(request) {
 
 /**
  * Stale-while-revalidate: return cached version instantly while
- * fetching a fresh copy in the background for the next visit.
+ * fetching a fresh copy in the background for the next visit. Used for
+ * images and fonts from public/, not pages.
  */
-async function staleWhileRevalidate(request, preloadResponse) {
+async function staleWhileRevalidate(request) {
   const cache = await caches.open(CACHE_VERSION);
 
   const cached = await cache.match(request);
 
-  // Kick off a background revalidation regardless of cache hit. If the browser
-  // already started a navigation preload, reuse that in-flight response
-  // instead of issuing a second request.
-  const networkPromise = (preloadResponse ? Promise.resolve(preloadResponse) : fetch(request))
+  // Kick off a background revalidation regardless of cache hit.
+  const networkPromise = fetch(request)
     .then((response) => {
       if (response && response.ok) {
         cache.put(request, response.clone());
@@ -148,6 +149,32 @@ async function staleWhileRevalidate(request, preloadResponse) {
   });
 }
 
+/**
+ * Pages: network-first, so a deploy is what the next visit sees. Pages used to
+ * be stale-while-revalidate, which showed the previous deploy first and kept
+ * returning visitors on the old site. The cache is only the offline fallback,
+ * and "/" stands in for a page that was never cached.
+ */
+async function pageNetworkFirst(request, preloadResponse) {
+  const cache = await caches.open(CACHE_VERSION);
+  try {
+    const response = (await preloadResponse) || (await fetch(request));
+    if (response && response.ok) {
+      cache.put(request, response.clone());
+      trimCache(CACHE_VERSION, MAX_ENTRIES);
+    }
+    return response;
+  } catch {
+    const cached = (await cache.match(request)) || (await cache.match("/"));
+    if (cached) return cached;
+    return new Response("Offline", {
+      status: 503,
+      statusText: "Service Unavailable",
+      headers: { "Content-Type": "text/plain" },
+    });
+  }
+}
+
 /**
  * Network-first: try the network and fall back to cache on failure.
  * Used for API calls and other dynamic requests.
@@ -185,11 +212,7 @@ self.addEventListener("fetch", (event) => {
   } else if (isPublicAsset(url)) {
     event.respondWith(staleWhileRevalidate(event.request));
   } else if (isNavigationRequest(event.request, url)) {
-    event.respondWith(
-      event.preloadResponse
-        .then((preload) => staleWhileRevalidate(event.request, preload))
-        .catch(() => staleWhileRevalidate(event.request)),
-    );
+    event.respondWith(pageNetworkFirst(event.request, event.preloadResponse));
   } else {
     event.respondWith(networkFirst(event.request));
   }
diff --git a/sites/mainweb/app/(portal)/hacklytics/layout.tsx b/sites/mainweb/app/(portal)/hacklytics/layout.tsx
index 749312c5..21032edb 100644
--- a/sites/mainweb/app/(portal)/hacklytics/layout.tsx
+++ b/sites/mainweb/app/(portal)/hacklytics/layout.tsx
@@ -1,6 +1,22 @@
 import type { Metadata } from "next";
+import { Instrument_Sans, Silkscreen } from "next/font/google";
 import { db, hackathons, inArray, eq, and, asc } from "@query/db";
 
+// The Hacklytics site's own faces (sites/hacklytics2027): Silkscreen for
+// headings, Instrument Sans for text. Scoped to this route by .hl-theme.
+const silkscreen = Silkscreen({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  variable: "--font-hl-pixel",
+  display: "swap",
+});
+
+const instrumentSans = Instrument_Sans({
+  subsets: ["latin"],
+  variable: "--font-hl-sans",
+  display: "swap",
+});
+
 const SITE = "https://datasciencegt.org";
 const URL = `${SITE}/hacklytics`;
 
@@ -65,7 +81,7 @@ export async function generateMetadata(): Promise<Metadata> {
       // The root layout's template appends the organisation.
       title: "Hacklytics",
       description:
-        "Georgia Tech's premier data science hackathon, run by Data Science @ Georgia Tech.",
+        "Georgia Tech's data science hackathon, run by Data Science @ Georgia Tech.",
       alternates: { canonical: URL },
     };
   }
@@ -73,7 +89,7 @@ export async function generateMetadata(): Promise<Metadata> {
   const dates = formatRange(edition.startDate, edition.endDate);
   const description =
     edition.description ??
-    "Georgia Tech's premier data science hackathon, open to students nationwide.";
+    "Georgia Tech's data science hackathon, open to students nationwide.";
   const title = `${edition.name} | ${dates}`;
 
   return {
@@ -141,7 +157,7 @@ async function EventJsonLd() {
     eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
     description:
       edition.description ??
-      "Georgia Tech's premier data science hackathon, open to students nationwide.",
+      "Georgia Tech's data science hackathon, open to students nationwide.",
     url: URL,
     image: [`${SITE}/logo512.png`],
     organizer: {
@@ -201,9 +217,11 @@ export default function HacklyticsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <div
+      className={`hl-theme ${silkscreen.variable} ${instrumentSans.variable}`}
+    >
       <EventJsonLd />
       {children}
-    </>
+    </div>
   );
 }
diff --git a/sites/mainweb/app/(portal)/hacklytics/page.tsx b/sites/mainweb/app/(portal)/hacklytics/page.tsx
index 535bb534..0949fcfb 100644
--- a/sites/mainweb/app/(portal)/hacklytics/page.tsx
+++ b/sites/mainweb/app/(portal)/hacklytics/page.tsx
@@ -68,19 +68,115 @@ const formatDeadline = (deadline: Date) =>
   });
 
 /**
- * The sidebar is suppressed here, so the page carries its own masthead line:
- * the club's wordmark, linking home.
+ * The sidebar is suppressed here, so the page carries its own masthead: the
+ * Hacklytics wordmark (linking to the event site) and who runs it.
  */
 function Masthead() {
   return (
     <div className={`flex items-baseline justify-between gap-4 ${mastRule}`}>
-      <Link
-        href="/"
-        className="font-[family-name:var(--font-display)] text-[26px] font-semibold leading-none tracking-[-0.01em] text-[var(--text-primary)]"
+      <a
+        href="https://hacklytics.io"
+        className="font-[family-name:var(--font-display)] text-[18px] font-bold leading-none text-[var(--text-primary)]"
       >
-        Query<span className="text-accent">.</span>
-      </Link>
-      <span className={meta}>Data Science @ GT</span>
+        Hacklytics
+      </a>
+      <span className={meta}>by Data Science @ GT</span>
+    </div>
+  );
+}
+
+/**
+ * The flower bed from hacklytics.io, still: mostly dormant grey plants with
+ * a few in bloom. Pixel maps and colours match sites/hacklytics2027/
+ * components/pixel/sprites.ts. Decorative, so hidden from assistive tech.
+ */
+const DAISY = [
+  "....ppp....",
+  "...pPPPp...",
+  "..pPcccPp..",
+  "..pPcYcPp..",
+  "..pPcccPp..",
+  "...pPPPp...",
+  "....ppp....",
+  ".....g.....",
+  ".....g.....",
+  "..GG.g.....",
+  ".G..Gg.....",
+  ".....g.GG..",
+  ".....gG..G.",
+  ".....g.....",
+  ".....g.....",
+  "....ggg....",
+];
+const TULIP = [
+  "..p.p.p..",
+  ".pPpPpPp.",
+  ".pPPcPPp.",
+  ".pPPcPPp.",
+  "..pPcPp..",
+  "...ppp...",
+  "....g....",
+  "....g....",
+  "..GGg....",
+  ".G..g....",
+  "....gGG..",
+  "....g..G.",
+  "....g....",
+  "....g....",
+  "...ggg...",
+];
+const STEM = { g: "#2f6b3a", G: "#4c9a55" };
+const BLOOM = { ...STEM, p: "#b8285a", P: "#ff4f8b", c: "#ffc2d6", Y: "#ffe9f0" };
+const DORMANT = { ...STEM, p: "#3a403c", P: "#5a625c", c: "#8a938c", Y: "#c9cfc9" };
+
+function spriteUri(map: string[], colors: Record<string, string>) {
+  let rects = "";
+  map.forEach((row, y) =>
+    [...row].forEach((ch, x) => {
+      if (colors[ch]) {
+        rects += `<rect x="${x}" y="${y}" width="1" height="1" fill="${colors[ch]}"/>`;
+      }
+    }),
+  );
+  const w = Math.max(...map.map((r) => r.length));
+  return `data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${map.length}" shape-rendering="crispEdges">${rects}</svg>`,
+  )}`;
+}
+
+const BED = Array.from({ length: 14 }, (_, i) => ({
+  map: i % 3 === 1 ? TULIP : DAISY,
+  bloom: i % 4 === 2,
+  scale: i % 2 ? 4 : 5,
+}));
+
+function FlowerBed() {
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none mt-16 flex items-end justify-around overflow-x-clip border-b border-[var(--border-subtle)]"
+    >
+      {BED.map((plant, i) => {
+        const width = Math.max(...plant.map.map((r) => r.length)) * plant.scale;
+        return (
+          <img
+            key={i}
+            src={spriteUri(plant.map, plant.bloom ? BLOOM : DORMANT)}
+            alt=""
+            width={width}
+            height={plant.map.length * plant.scale}
+            className={`${i % 2 ? "hidden sm:block" : "block"} [image-rendering:pixelated]`}
+            style={
+              plant.bloom
+                ? {
+                    filter:
+                      "drop-shadow(0 0 2px #ff4f8b) drop-shadow(0 0 10px rgba(255,79,139,.45))",
+                  }
+                : undefined
+            }
+          />
+        );
+      })}
     </div>
   );
 }
@@ -122,6 +218,7 @@ export default function HacklyticsPage() {
           The next Hacklytics has not been announced. Follow Data Science @ GT
           and it will show up here first.
         </p>
+        <FlowerBed />
       </main>
     );
   }
@@ -226,6 +323,8 @@ export default function HacklyticsPage() {
           More about {event.name}
         </a>
       ) : null}
+
+      <FlowerBed />
     </main>
   );
 }
diff --git a/sites/mainweb/app/(portal)/liquid-glass.css b/sites/mainweb/app/(portal)/liquid-glass.css
index 113e249f..b467607e 100644
--- a/sites/mainweb/app/(portal)/liquid-glass.css
+++ b/sites/mainweb/app/(portal)/liquid-glass.css
@@ -403,3 +403,48 @@ a {
 .card-printed {
   position: relative;
 }
+
+/* ===== HACKLYTICS (the public /hacklytics page) =====
+   The page people reach from hacklytics.io, so it wears that site's look,
+   not the portal's: dark grey ground, one bloom pink, pixel headings. The
+   tokens are overridden on the wrapper, so the portal primitives and the
+   interest form inside follow without their own variants. Same values as
+   sites/hacklytics2027/app/globals.css. */
+.hl-theme {
+  --bg-primary: #131715;
+  --bg-secondary: #1a1f1d;
+  --bg-tertiary: #131715;
+  --bg-card: #1a1f1d;
+  --bg-elevated: #1a1f1d;
+  --bg-input: #1a1f1d;
+  --text-primary: #edefea;
+  --text-secondary: #c3c9c4;
+  --text-muted: #a9b0aa;
+  --text-subtle: #868e88;
+  --text-on-accent: #16060c;
+  --border-subtle: #2a312d;
+  --border-medium: #39413c;
+  --border-hover: #5a625c;
+  --border-accent: #ff4f8b;
+  --accent: #ff4f8b;
+  --accent-primary: #ff4f8b;
+  --accent-secondary: #ff6a9d;
+  --accent-hover: #ff6a9d;
+  --accent-dim: rgba(255, 79, 139, 0.12);
+  --font-display: var(--font-hl-pixel), ui-monospace, monospace;
+  --font-ui: var(--font-hl-sans), ui-sans-serif, system-ui, sans-serif;
+  color-scheme: dark;
+  min-height: 100vh;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+}
+
+/* Pixel glyphs carry their own spacing; the serif's negative tracking would
+   run them together. */
+.hl-theme h1,
+.hl-theme h2,
+.hl-theme h3 {
+  letter-spacing: 0;
+  font-weight: 700;
+}