Improve presentation layout and add backup video

- Fix title slide centering using explicit flexbox instead of Reveal.js center class
- Fix real-time-sync slide layout for consistent centering
- Add backup video for telemetry dashboard demo (1920x1080 HD)
- Add backup video link to dashboard slide
- Rename River slide to "River: Decentralized Chat" (not live demo)
- Adjust peer sync demo spacing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: sanity

hugo-site/static/slides/demo/dashboard.html

@@ -8,6 +8,9 @@ <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">Live Demo: Network Dashboard</
 
     <p style="margin-top: 0.8em; font-size: 0.9em; color: rgba(255,255,255,0.7);">
       Live: <a href="http://nova.locut.us:3133" target="_blank" style="color: #4facfe;">nova.locut.us:3133</a>
+      <span style="margin-left: 1.5em; font-size: 0.85em;">
+        <a href="/slides/demo/telemetry-dashboard.webm" target="_blank" style="color: rgba(255,255,255,0.5);">[backup video]</a>
+      </span>
     </p>
   </div>
 

hugo-site/static/slides/demo/river.html

@@ -1,5 +1,5 @@
 <section style="display: flex; flex-direction: column; height: 100vh;">
-  <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">Live Demo: River Chat</h2>
+  <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">River: Decentralized Chat</h2>
 
   <div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; gap: 0.8em;">
     <!-- Screenshot -->

hugo-site/static/slides/demo/telemetry-dashboard.webm

@@ -1,78 +1,21 @@
-<section style="display: flex; flex-direction: column; height: 100vh;">
-  <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">Real-Time Sync</h2>
+<section style="display: flex; flex-direction: column; justify-content: center; height: 100vh;">
+  <h2 style="margin-bottom: 0.3em;">Real-Time Sync</h2>
 
-  <style>
-    .realtime-content {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 1.5em;
-      min-height: 0;
-    }
-    .realtime-diagram {
-      flex: 1 1 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 200px;
-    }
-    .realtime-diagram img {
-      max-height: calc(100vh - 180px);
-      max-width: 100%;
-      object-fit: contain;
-    }
-    .realtime-text {
-      flex: 1 1 45%;
-      min-width: 280px;
-    }
-    .realtime-text ul {
-      font-size: 1.05em;
-      line-height: 1.7;
-    }
-    @media (max-width: 1400px) {
-      .realtime-content {
-        flex-direction: column;
-        justify-content: center;
-      }
-      .realtime-diagram {
-        flex: 0 0 auto;
-        width: 100%;
-        max-height: 45vh;
-      }
-      .realtime-diagram img {
-        max-height: 40vh;
-      }
-      .realtime-text {
-        flex: 1;
-        width: 100%;
-      }
-      .realtime-text ul {
-        font-size: 0.95em;
-      }
-    }
-  </style>
+  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0;">
+    <img src="/slides/hard-problems/real-time-sync.svg" alt="Commutative Sync" style="max-height: 100%; max-width: 90%; object-fit: contain;">
+  </div>
 
-  <div class="realtime-content">
-    <div class="realtime-diagram">
-      <img src="/slides/hard-problems/real-time-sync.svg" alt="Commutative Sync">
-    </div>
-    <div class="realtime-text">
-      <ul>
-        <li><strong>Problem:</strong> How do peers stay consistent without coordination?</li>
-        <li><strong>Solution:</strong> Commutative operations</li>
-        <li>A + B = B + A (order doesn't matter)</li>
-        <li>Peers exchange <span style="color: #43e97b;">deltas</span>, not full state</li>
-        <li><strong>Result:</strong> Eventual consistency, real-time updates</li>
-      </ul>
-    </div>
+  <div style="text-align: center; font-size: 1.1em;">
+    <span style="color: #4facfe;">A + B = B + A</span> ·
+    <span style="color: #43e97b;">Deltas</span>, not full state ·
+    Eventual consistency
   </div>
 
   <aside class="notes">
     • Problem: consistency without central authority
     • Solution: commutative operations (order doesn't matter)
-    • A + B = B + A → same final state
-    • Send deltas, not full state → efficient
-    • Result: real-time sync, no coordination overhead
+    • A + B = B + A → same final state regardless of order
+    • Peers exchange deltas, not full state → efficient
+    • Result: real-time sync with eventual consistency
   </aside>
 </section>

hugo-site/static/slides/hard-problems/real-time-sync.html

@@ -15,7 +15,7 @@ <h2 style="flex-shrink: 0; margin-bottom: 0.2em;">Peer Synchronization</h2>
       display: flex;
       justify-content: center;
       align-items: center;
-      gap: 8rem;
+      gap: 18rem;
       padding: 2rem 1rem;
       min-height: 200px;
     }
@@ -150,7 +150,7 @@ <h2 style="flex-shrink: 0; margin-bottom: 0.2em;">Peer Synchronization</h2>
         font-size: 0.8em;
       }
       .sync-peer-container {
-        gap: 4rem;
+        gap: 14rem;
       }
       .sync-peer {
         width: 120px;

hugo-site/static/slides/hard-problems/sync-demo.html

@@ -1,4 +1,4 @@
-<section class="title-slide center">
+<section class="title-slide" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;">
   <img src="/freenet_logo.svg" alt="Freenet" style="width: 200px; margin-bottom: 1em;">
   <h1>Freenet Lives!</h1>
   <p class="subtitle">Real-Time Decentralized Applications at Scale</p>