gerardrecinto · Oct 5, 2026 · Oct 5, 2026 · Oct 5, 2026 · Oct 5, 2026 · Oct 5, 2026
diff --git a/.github/workflows/site-check.yml b/.github/workflows/site-check.yml
@@ -48,5 +48,10 @@ jobs:
           npm ci || npm install
           npm run build
 
+      - name: Check the homepage stylesheet is up to date
+        run: |
+          scripts/build-css.sh
+          git diff --exit-code demo/tailwind.css
+
       - name: Assemble the site and check every referenced file
         run: scripts/assemble-site.sh _site
diff --git a/demo/index.html b/demo/index.html
@@ -25,44 +25,12 @@
   <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
   <link rel="alternate icon" href="./favicon.ico" />
 
-  <!-- Tailwind CSS CDN -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          colors: {
-            brand: {
-              50: '#ecfdf5',
-              100: '#d1fae5',
-              400: '#34d399',
-              500: '#10b981',
-              600: '#059669',
-              700: '#047857',
-            },
-            dark: {
-              950: '#07090E',
-              900: '#0B0F17',
-              850: '#111726',
-              800: '#182238',
-              700: '#22304E',
-              600: '#334155'
-            },
-            accent: {
-              cyan: '#06B6D4',
-              violet: '#8B5CF6',
-              amber: '#F59E0B'
-            }
-          },
-          fontFamily: {
-            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-            mono: ['JetBrains Mono', 'Fira Code', 'monospace']
-          }
-        }
-      }
-    }
-  </script>
+  <!-- Start the icon CDN connection and the 6 MB engine download while the HTML is still parsing -->
+  <link rel="preconnect" href="https://unpkg.com" crossorigin>
+  <link rel="preload" href="sop.wasm" as="fetch" type="application/wasm" crossorigin>
+
+  <!-- Built by scripts/build-css.sh from this page; replaces the Tailwind CDN script -->
+  <link rel="stylesheet" href="./tailwind.css" />
 
   <!-- Google Fonts & Lucide Icons -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -425,22 +393,6 @@
     </div>
   </div>
 
-  <!-- WASM Loading Overlay -->
-  <div id="wasm-loader-overlay" class="fixed inset-0 bg-dark-950/90 backdrop-blur-md z-50 flex flex-col items-center justify-center p-4 transition-opacity duration-500">
-    <div class="w-16 h-16 relative flex items-center justify-center mb-6">
-      <div class="absolute inset-0 rounded-full border-4 border-brand-500/20"></div>
-      <div class="absolute inset-0 rounded-full border-4 border-brand-500 border-t-transparent animate-spin"></div>
-      <i data-lucide="cpu" class="w-6 h-6 text-brand-400"></i>
-    </div>
-    <h3 class="text-lg font-bold text-white mb-2">Booting Embedded Go WASM Kernel</h3>
-    <p class="text-sm text-slate-400 text-center max-w-md mb-4 font-mono">
-      Compiling B-Tree transaction log, vector index, and ACID isolation manager into browser memory sandbox...
-    </p>
-    <div class="w-64 bg-dark-800 h-1.5 rounded-full overflow-hidden">
-      <div class="bg-gradient-to-r from-brand-500 to-accent-cyan h-full w-full animate-pulse"></div>
-    </div>
-  </div>
-
   <!-- Main Container -->
   <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
 
@@ -503,6 +455,18 @@ <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-t
       </div>
     </section>
 
+    <!-- Second video (YouTube Short, vertical) -->
+    <section aria-label="Joltrin short video" class="mb-8 mx-auto max-w-sm rounded-2xl overflow-hidden border border-dark-700/80 bg-dark-900">
+      <div class="relative w-full" style="aspect-ratio:9/16">
+        <iframe class="absolute inset-0 w-full h-full" loading="lazy"
+          src="https://www.youtube-nocookie.com/embed/oS1bfq_ZDkg?playsinline=1&rel=0"
+          title="Joltrin short video"
+          allow="encrypted-media; picture-in-picture; fullscreen"
+          allowfullscreen
+          referrerpolicy="strict-origin-when-cross-origin"></iframe>
+      </div>
+    </section>
+
     <!-- Three live experiences, right after the hero -->
     <section id="live-experiences" aria-label="Live experiences" class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
       <a href="#under-the-hood" class="p-5 rounded-2xl bg-dark-900 hover:bg-dark-850 border border-brand-500/40 hover:border-brand-500/70 transition flex flex-col justify-between group">
@@ -1013,7 +977,24 @@ <h3 class="font-bold text-white text-sm">Zero Server Roundtrips</h3>
     </section>
 
     <!-- SECTION 8: UNDER THE HOOD (DATABASE & STORAGE ENGINEERING CREDIBILITY) -->
-    <section id="under-the-hood" class="mb-12">
+    <section id="under-the-hood" class="relative mb-12">
+      <!-- WASM loading overlay. It covers only this section, so the rest of the page is usable while the engine loads. -->
+      <div id="wasm-loader-overlay" class="absolute inset-0 z-30 rounded-2xl bg-dark-950/90 backdrop-blur-md transition-opacity duration-500">
+        <div class="sticky top-32 flex flex-col items-center justify-center p-4">
+          <div class="w-16 h-16 relative flex items-center justify-center mb-6">
+            <div class="absolute inset-0 rounded-full border-4 border-brand-500/20"></div>
+            <div class="absolute inset-0 rounded-full border-4 border-brand-500 border-t-transparent animate-spin"></div>
+            <i data-lucide="cpu" class="w-6 h-6 text-brand-400"></i>
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">Booting Embedded Go WASM Kernel</h3>
+          <p class="text-sm text-slate-400 text-center max-w-md mb-4 font-mono">
+            Compiling B-Tree transaction log, vector index, and ACID isolation manager into browser memory sandbox...
+          </p>
+          <div class="w-64 bg-dark-800 h-1.5 rounded-full overflow-hidden">
+            <div class="bg-gradient-to-r from-brand-500 to-accent-cyan h-full w-full animate-pulse"></div>
+          </div>
+        </div>
+      </div>
       <div class="max-w-3xl mb-6">
         <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-accent-cyan/10 border border-accent-cyan/30 text-accent-cyan text-xs font-mono font-semibold uppercase tracking-wider mb-2">
           <i data-lucide="database" class="w-3.5 h-3.5"></i>
@@ -1772,8 +1753,10 @@ <h4 class="font-mono text-xs uppercase font-bold text-white mb-3">Open Source &a
 
     // Initialize Lucide Icons
     document.addEventListener("DOMContentLoaded", () => {
-      lucide.createIcons();
+      // Start the engine first so a slow icon CDN cannot hold it up.
       initWasmEngine();
+      if (window.lucide) lucide.createIcons();
+      else console.error('Lucide icon library failed to load from unpkg.com; icons will not render.');
     });
 
     // WASM Engine Initializer

diff --git a/demo/logo-mark.png b/demo/logo-mark.png
diff --git a/demo/tailwind.config.cjs b/demo/tailwind.config.cjs
@@ -0,0 +1,35 @@
+module.exports = {
+  content: ['./index.html'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#ecfdf5',
+          100: '#d1fae5',
+          400: '#34d399',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+        },
+        dark: {
+          950: '#07090E',
+          900: '#0B0F17',
+          850: '#111726',
+          800: '#182238',
+          700: '#22304E',
+          600: '#334155',
+        },
+        accent: {
+          cyan: '#06B6D4',
+          violet: '#8B5CF6',
+          amber: '#F59E0B',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+      },
+    },
+  },
+};
diff --git a/demo/tailwind.css b/demo/tailwind.css
diff --git a/scripts/assemble-site.sh b/scripts/assemble-site.sh
@@ -14,7 +14,7 @@ rm -rf "$SITE"
 mkdir -p "$SITE/arena" "$SITE/agents" "$SITE/docs" "$SITE/assets"
 
 # Technical demo (WASM) lives at the site root: joltrinhq.com/
-cp demo/index.html demo/sop.wasm demo/wasm_exec.js demo/404.html demo/favicon.svg demo/favicon.ico demo/og-image.png demo/logo-mark.png "$SITE/"
+cp demo/index.html demo/tailwind.css demo/sop.wasm demo/wasm_exec.js demo/404.html demo/favicon.svg demo/favicon.ico demo/og-image.png demo/logo-mark.png "$SITE/"
 # The documentation index lives at joltrinhq.com/docs/
 cp docs/index.html "$SITE/docs/"
 # The homepage loads its replay and videos from ./assets/. Every file there ships.

diff --git a/scripts/build-css.sh b/scripts/build-css.sh
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+# Builds demo/tailwind.css, the stylesheet the homepage links. It replaces the
+# Tailwind CDN script, which compiled the page's classes in the browser before
+# first paint. Uses the Tailwind CLI that sop-arena already installs, so run
+# `npm ci` in sop-arena first. Commit the result when index.html changes; the
+# Site Check job fails if demo/tailwind.css is out of date.
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+cd "$REPO_ROOT/demo"
+
+TAILWIND="../sop-arena/node_modules/.bin/tailwindcss"
+[ -x "$TAILWIND" ] || { echo "run npm ci in sop-arena first" >&2; exit 1; }
+
+printf '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n' > "${TMPDIR:-/tmp}/joltrin-tailwind-in.css"
+"$TAILWIND" -c tailwind.config.cjs -i "${TMPDIR:-/tmp}/joltrin-tailwind-in.css" -o tailwind.css --minify
diff --git a/tools/blocklog/stats_test.go b/tools/blocklog/stats_test.go
@@ -167,3 +167,21 @@ func TestSummaryMatchesTheRowInSummaries(t *testing.T) {
 		t.Error("another runbook version must not match")
 	}
 }
+
+func TestStatsCountsARepeatedBlockOnceAndIgnoresRunsThatNeverBlocked(t *testing.T) {
+	l := New()
+	l.RecordRun(wf, ver, "r1")
+	l.RecordRun(wf, ver, "clean")
+	// The same step blocked three times in one run is one blocked step.
+	for i := 0; i < 3; i++ {
+		l.Record(entry("r1", "drop_prod_db"))
+	}
+	st := l.Stats(wf, ver)
+	if st.Runs != 2 || len(st.Rules) != 1 || st.Rules[0].BlockedRuns != 1 || st.Rules[0].RecoveredRuns != 0 {
+		t.Fatalf("want 2 runs and one rule that blocked 1 run: %+v", st)
+	}
+	l.RecordRecovery(wf, ver, "r1", "drop_prod_db")
+	if r := l.Stats(wf, ver).Rules[0]; r.BlockedRuns != 1 || r.RecoveredRuns != 1 {
+		t.Errorf("a repeated block recovers with one commit: %+v", r)
+	}
+}