From f40fee44e8f256328ca1419863b5441123a1014e Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Fri, 10 Apr 2026 10:23:20 +0300
Subject: Release v0.1.0

Splash: skip via ?splash=0 on pagination to index; frosted panel and vignette
for readable copy; brighter hint/tag colors. Pagination links only at bottom
of each page. Tests updated for prev href to index.

Made-with: Cursor
---
 internal/generator/doc.go             |   3 +-
 internal/generator/generator.go       |  11 ++-
 internal/generator/generator_test.go  |   4 +-
 internal/generator/shared.go          | 139 +++++++++++++++++++++++++++++++++-
 internal/generator/theme_aurora.go    |  59 ++++++++++++++-
 internal/generator/theme_brutalist.go |  49 +++++++++++-
 internal/generator/theme_glass.go     |  68 ++++++++++++++++-
 internal/generator/theme_matrix.go    |  61 ++++++++++++++-
 internal/generator/theme_minimal.go   |  63 ++++++++++++++-
 internal/generator/theme_neon.go      |  67 ++++++++++++++--
 internal/generator/theme_ocean.go     |  57 +++++++++++++-
 internal/generator/theme_paper.go     |  60 ++++++++++++++-
 internal/generator/theme_retro.go     |  54 ++++++++++++-
 internal/generator/theme_synthwave.go |  72 +++++++++++++++++-
 internal/generator/theme_terminal.go  |  48 +++++++++++-
 15 files changed, 782 insertions(+), 33 deletions(-)

(limited to 'internal/generator')

diff --git a/internal/generator/doc.go b/internal/generator/doc.go
index 55db6cb..b22ede6 100644
--- a/internal/generator/doc.go
+++ b/internal/generator/doc.go
@@ -9,7 +9,8 @@
 //   - themes.go — Theme registry (name → template string) and getTheme /
 //     ListThemes for the CLI.
 //   - theme_*.go — One file per visual theme: full-page HTML that invokes
-//     {{template "navhints" .}}, {{template "navmodal" .}}, {{template "navscript" .}}.
+//     {{template "splashGate"}}, {{template "navhints" .}}, {{template "navmodal" .}},
+//     {{template "navscript" .}}.
 //   - shared.go — navDefs: shared {{define}} blocks merged at parse time with
 //     the chosen theme so a single html/template parse sees every name.
 //   - templates.go — Short pointer: where templates and registry live.
diff --git a/internal/generator/generator.go b/internal/generator/generator.go
index 9fed673..e880ba3 100644
--- a/internal/generator/generator.go
+++ b/internal/generator/generator.go
@@ -114,6 +114,11 @@ func pageFilename(index int) string {
 	return fmt.Sprintf("page%d.html", index+1)
 }
 
+// indexPageNavURL is the href for pagination links to the first page. splash=0
+// is read by splashGate so the splash does not run (referrer is unreliable for
+// keyboard / programmatic navigation from page2.html → index.html).
+const indexPageNavURL = "index.html?splash=0"
+
 // writePage renders one HTML page and writes it to cfg.OutputDir.
 func writePage(tmpl *template.Template, posts []*post.Post, pageIndex, totalPages int, cfg *config.Config) error {
 	data := buildPageData(posts, pageIndex, totalPages)
@@ -148,7 +153,11 @@ func buildPageData(posts []*post.Post, pageIndex, totalPages int) pageData {
 
 	// "Prev" means newer — page index decreases.
 	if pageIndex > 0 {
-		prevPage = pageFilename(pageIndex - 1)
+		if pageIndex == 1 {
+			prevPage = indexPageNavURL
+		} else {
+			prevPage = pageFilename(pageIndex - 1)
+		}
 	}
 
 	// "Next" means older — page index increases.
diff --git a/internal/generator/generator_test.go b/internal/generator/generator_test.go
index ba0964e..cfab15e 100644
--- a/internal/generator/generator_test.go
+++ b/internal/generator/generator_test.go
@@ -130,9 +130,9 @@ func TestBuildPageData_navLinks(t *testing.T) {
 			name:           "middle",
 			pageIndex:      1,
 			totalPages:     3,
-			wantPrev:       "index.html",
+			wantPrev:       "index.html?splash=0",
 			wantNext:       "page3.html",
-			wantPrevJSON:   `"index.html"`,
+			wantPrevJSON:   `"index.html?splash=0"`,
 			wantNextJSON:   `"page3.html"`,
 			wantPostsCount: 1,
 		},
diff --git a/internal/generator/shared.go b/internal/generator/shared.go
index a34c5a5..583851c 100644
--- a/internal/generator/shared.go
+++ b/internal/generator/shared.go
@@ -1,15 +1,48 @@
 package generator
 
 // navDefs is appended to every theme template when parsing.
-// It defines three named sub-templates shared across all themes:
+// It defines named sub-templates shared across all themes:
+//   - "splashGate" — synchronous script: first child of <body>; sets html.sno-splash-skip when
+//     splash should not run (?splash=0, not index.html, or Referer from same-site index/pageN).
 //   - "navhints"  — keyboard shortcut hint bar HTML
 //   - "navmodal"  — full-screen expanded-post modal HTML + image-sizing CSS
 //   - "navscript" — keyboard navigation JavaScript with distinct sounds per action
 //
-// Each theme calls {{template "navhints" .}}, {{template "navmodal" .}}, and
-// {{template "navscript" .}} at the appropriate points in its HTML.
+// Each theme calls {{template "splashGate"}}, {{template "navhints" .}}, {{template "navmodal" .}},
+// and {{template "navscript" .}} at the appropriate points in its HTML.
 // All theme-specific CSS lives in each theme file so themes stay self-contained.
 const navDefs = `
+{{define "splashGate"}}
+<script>
+(function(){
+  try {
+    var sp = new URLSearchParams(location.search);
+    if (sp.get('splash') === '0') {
+      document.documentElement.classList.add('sno-splash-skip');
+      return;
+    }
+  } catch (_) {}
+  var parts = location.pathname.split('/').filter(function(s) { return s.length; });
+  var seg = (parts.length ? parts[parts.length - 1] : '').toLowerCase();
+  var onIndex = (!seg || seg === 'index.html');
+  var ref = document.referrer;
+  function refIsSameSiteBlogPage(url) {
+    if (!url) return false;
+    try {
+      var ru = new URL(url), cu = new URL(location.href);
+      if (ru.origin !== cu.origin) return false;
+      var rp = ru.pathname.split('/').filter(function(s) { return s.length; });
+      var rs = (rp.length ? rp[rp.length - 1] : '').toLowerCase();
+      if (rs === 'index.html' || rs === '') return true;
+      if (/^page\d+\.html$/.test(rs)) return true;
+      return false;
+    } catch (_) { return false; }
+  }
+  if (!onIndex || refIsSameSiteBlogPage(ref)) document.documentElement.classList.add('sno-splash-skip');
+})();
+</script>
+{{end}}
+
 {{define "navhints"}}
 <div class="nav-hints" aria-label="keyboard shortcuts">
     <span><kbd>j</kbd><kbd>k</kbd> or <kbd>↑</kbd><kbd>↓</kbd> select post</span>
@@ -29,6 +62,37 @@ const navDefs = `
 .post-modal { background:rgba(0,0,0,0.55) !important; backdrop-filter:blur(6px) !important; }
 /* Content area max-width across all themes */
 .overlay { max-width:1200px; margin-left:auto; margin-right:auto; }
+/* Pagination: newer + older side by side at the bottom of the feed */
+.page-nav-dual { display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
+                gap:clamp(16px,4vw,48px); }
+/* Host note under the site subtitle (all themes) */
+.logo-host { font-size:0.65rem; opacity:0.55; margin-top:4px; letter-spacing:0.3px; line-height:1.3; }
+/* Atom feed link in header (paired with transmit in .nav) */
+.nav { display:flex; align-items:center; gap:clamp(10px,2.2vw,20px); flex-wrap:wrap; justify-content:flex-end; }
+a.header-feed-link { font-size:0.8rem; text-decoration:none; opacity:0.82; letter-spacing:0.04em; white-space:nowrap; }
+a.header-feed-link:hover { opacity:1; text-decoration:underline; }
+/* Full-viewport splash (theme-specific colours/animation on each .splash-THEMENAME) */
+#splash-overlay { position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; align-items:center;
+  justify-content:center; text-align:center; padding:max(16px,4vw); box-sizing:border-box; cursor:pointer;
+  transition:opacity .55s ease, visibility .55s ease, transform .55s ease; }
+#splash-overlay.splash--dismissed { opacity:0 !important; visibility:hidden !important;
+  pointer-events:none !important; transform:scale(1.02); }
+#splash-overlay:focus { outline:2px solid rgba(255,255,255,0.35); outline-offset:4px; }
+/* Vignette over WebGL so 3D motion does not overpower the edges */
+#splash-overlay::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
+  background: radial-gradient(ellipse 92% 82% at 50% 42%, rgba(0,0,0,0) 32%, rgba(0,0,0,0.26) 68%, rgba(0,0,0,0.48) 100%); }
+.splash-title { font-weight:700; letter-spacing:0.06em; line-height:1.15; }
+.splash-tag { margin-top:0.35rem; font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase; }
+.splash-hint { margin-top:1.25rem; font-size:0.72rem; letter-spacing:0.12em; }
+#splash-overlay .splash-gl-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
+/* Frosted panel so title/tag/hint stay readable over busy shaders */
+#splash-overlay .splash-inner { position:relative; z-index:2; max-width:min(520px,92vw);
+  padding: clamp(1.15rem, 3.2vw, 1.75rem) clamp(1.3rem, 3.8vw, 1.95rem); border-radius:14px;
+  background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
+#splash-overlay.splash-brutalist .splash-inner.splash-frame {
+  padding: clamp(1.4rem, 4.5vw, 2.25rem) clamp(1.1rem, 3.5vw, 1.9rem); background: rgba(0, 0, 0, 0.78); }
+html.sno-splash-skip #splash-overlay { display:none !important; visibility:hidden !important; pointer-events:none !important; }
 </style>
 <div class="post-modal" id="post-modal">
     <div class="modal-inner">
@@ -40,6 +104,67 @@ const navDefs = `
 
 {{define "navscript"}}
 <script>
+    (function splashSetup() {
+        var el = document.getElementById('splash-overlay');
+        if (!el) return;
+        if (document.documentElement.classList.contains('sno-splash-skip')) {
+            if (typeof window._snonuxSplashWebGLCleanup === 'function') {
+                try { window._snonuxSplashWebGLCleanup(); } catch (_) {}
+                window._snonuxSplashWebGLCleanup = null;
+            }
+            el.remove();
+            return;
+        }
+        var splashAudioCtx = null;
+        var splashChimePlayed = false;
+        // Soft major arpeggio (G4 → C5 → E5 → G5); works once autopolicy allows audio.
+        function playSplashChime() {
+            if (splashChimePlayed) return;
+            try {
+                if (!splashAudioCtx) {
+                    splashAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                }
+                var ctx = splashAudioCtx;
+                function ring() {
+                    splashChimePlayed = true;
+                    var now = ctx.currentTime;
+                    var freqs = [392, 523.25, 659.25, 783.99];
+                    var i, osc, g, t0;
+                    for (i = 0; i < freqs.length; i++) {
+                        osc = ctx.createOscillator();
+                        g = ctx.createGain();
+                        osc.connect(g);
+                        g.connect(ctx.destination);
+                        osc.type = 'sine';
+                        osc.frequency.value = freqs[i];
+                        t0 = now + i * 0.075;
+                        g.gain.setValueAtTime(0, t0);
+                        g.gain.linearRampToValueAtTime(0.1, t0 + 0.028);
+                        g.gain.exponentialRampToValueAtTime(0.001, t0 + 0.52);
+                        osc.start(t0);
+                        osc.stop(t0 + 0.55);
+                    }
+                }
+                ctx.resume().then(ring).catch(function() {});
+            } catch (_) {}
+        }
+        playSplashChime();
+        el.addEventListener('pointerdown', function() { playSplashChime(); }, { passive: true });
+        function dismiss() {
+            if (el.classList.contains('splash--dismissed')) return;
+            playSplashChime();
+            if (typeof window._snonuxSplashWebGLCleanup === 'function') {
+                try { window._snonuxSplashWebGLCleanup(); } catch (_) {}
+                window._snonuxSplashWebGLCleanup = null;
+            }
+            el.classList.add('splash--dismissed');
+            setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 600);
+        }
+        el.addEventListener('click', function(e) { e.preventDefault(); dismiss(); });
+        window._snonuxDismissSplash = dismiss;
+        el.focus({ preventScroll: true });
+    })();
+
     // === KEYBOARD NAVIGATION ===
     // j / ArrowDown  → next post       k / ArrowUp    → previous post
     // h / ArrowLeft  → previous page   l / ArrowRight → next page
@@ -121,6 +246,14 @@ const navDefs = `
 
     document.addEventListener('keydown', function(e) {
         if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        var splash = document.getElementById('splash-overlay');
+        if (splash && !splash.classList.contains('splash--dismissed')) {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Escape') {
+                e.preventDefault();
+                if (window._snonuxDismissSplash) window._snonuxDismissSplash();
+            }
+            return;
+        }
         if (document.getElementById('post-modal').classList.contains('active')) {
             if (e.key === 'Escape') { closeModal(); e.preventDefault(); }
             return;
diff --git a/internal/generator/theme_aurora.go b/internal/generator/theme_aurora.go
index 4fa85f6..887f936 100644
--- a/internal/generator/theme_aurora.go
+++ b/internal/generator/theme_aurora.go
@@ -29,6 +29,8 @@ const auroraTemplate = `<!DOCTYPE html>
         .transmit-btn { border:1px solid var(--teal); color:var(--teal); padding:9px 20px;
                         border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
         .transmit-btn:hover { background:var(--teal); color:var(--navy); }
+        a.header-feed-link { color:var(--green); }
+        a.header-feed-link:hover { color:var(--teal); text-shadow:0 0 8px var(--green); }
         .nav-hints { background:rgba(5,13,26,0.6); border-bottom:1px solid rgba(0,255,179,0.15);
                      color:rgba(224,248,240,0.45); padding:5px 28px; display:flex; gap:18px;
                      font-size:0.68rem; flex-wrap:wrap; }
@@ -62,9 +64,56 @@ const auroraTemplate = `<!DOCTYPE html>
         .modal-close { float:right; background:none; border:none; color:var(--teal);
                        font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
         @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+        .splash-overlay.splash-aurora {
+            background: linear-gradient(125deg, var(--navy) 0%, #0a1a2e 40%, #0d2840 70%, var(--navy) 100%);
+            background-size: 200% 200%;
+            animation: splashAuroraShift 8s ease infinite;
+        }
+        @keyframes splashAuroraShift { 0%,100%{background-position:0% 40%} 50%{background-position:100% 60%} }
+        .splash-aurora .splash-ribbons {
+            width:min(280px,75vw); height:8px; margin:0 auto 1.25rem; border-radius:4px;
+            background: linear-gradient(90deg, transparent, var(--green), var(--teal), var(--purple), transparent);
+            opacity:0.85; animation: splashRibbonFlow 3s ease-in-out infinite alternate;
+            box-shadow: 0 0 24px var(--green), 0 0 40px var(--purple);
+        }
+        @keyframes splashRibbonFlow { from { transform: scaleX(0.85); opacity:0.65; } to { transform: scaleX(1); opacity:1; } }
+        .splash-aurora .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#e0f8f0;
+            text-shadow:0 0 20px var(--green); }
+        .splash-aurora .splash-tag { background:linear-gradient(90deg,var(--green),var(--teal));
+            -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
+        .splash-aurora .splash-hint { color:rgba(224,248,240,0.88); }
+        .splash-aurora .splash-inner { text-shadow: 0 2px 18px rgba(0,0,0,0.75); }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-aurora" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-inner">
+            <div class="splash-ribbons" aria-hidden="true"></div>
+            <div class="splash-title">snonux.foo</div>
+            <div class="splash-tag">Aurora uplink</div>
+            <div class="splash-hint">Click or Enter to open the feed</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),i,m;
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,80);ca.position.set(0,0.3,9);
+        var cols=[0x00ffb3,0x00cfe8,0xc084fc];
+        for(i=0;i<3;i++){m=new THREE.Mesh(new THREE.TorusKnotGeometry(1.05,0.28,48,6,2,3),new THREE.MeshBasicMaterial({color:cols[i],transparent:true,opacity:0.55,wireframe:i===2}));m.rotation.y=i*2.1;m.userData.o=i;g.add(m);}
+        sc.add(g);sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=t*0.28;g.children.forEach(function(c,ix){c.rotation.x=Math.sin(t*0.8+c.userData.o)*0.35;});ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -73,15 +122,16 @@ const auroraTemplate = `<!DOCTYPE html>
                 <div class="logo-title">
                     <h1>snonux.foo</h1>
                     <p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+                    <p class="logo-host">Site served by a Raspberry Pi 3</p>
                 </div>
             </div>
             <div class="nav">
+                <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
                 <a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
             </div>
         </header>
         {{template "navhints" .}}
         <div class="content" id="post-content">
-            {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
             {{range $i, $post := .Posts}}
             <div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
                 <div class="post-header">
@@ -91,7 +141,12 @@ const auroraTemplate = `<!DOCTYPE html>
                 <div class="post-text">{{$post.ContentHTML}}</div>
             </div>
             {{end}}
-            {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+            {{if or .PrevPage .NextPage}}
+            <div class="page-nav page-nav-dual">
+                {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+                {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+            </div>
+            {{end}}
         </div>
     </div>
     {{template "navmodal" .}}
diff --git a/internal/generator/theme_brutalist.go b/internal/generator/theme_brutalist.go
index aa0729d..2bb54da 100644
--- a/internal/generator/theme_brutalist.go
+++ b/internal/generator/theme_brutalist.go
@@ -30,6 +30,8 @@ const brutalistTemplate = `<!DOCTYPE html>
                         border-radius:0; text-decoration:none; font-family:Impact; font-size:1.05rem;
                         letter-spacing:2px; transition:all 0.1s; }
         .transmit-btn:hover { background:var(--red); color:#000; }
+        a.header-feed-link { color:#aaa; font-family:'Courier New',monospace; font-size:0.78rem; }
+        a.header-feed-link:hover { color:var(--red); }
         .nav-hints { background:#111; border-bottom:2px solid #333; color:#888;
                      padding:5px 24px; display:flex; gap:18px; font-family:'Courier New',monospace;
                      font-size:0.7rem; flex-wrap:wrap; }
@@ -62,9 +64,46 @@ const brutalistTemplate = `<!DOCTYPE html>
         .modal-close { float:right; background:none; border:none; color:var(--red);
                        font-family:Impact; font-size:1.3rem; cursor:pointer; letter-spacing:2px; }
         @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .logo-mark{font-size:2rem;} }
+        .splash-overlay.splash-brutalist { background:#000; }
+        .splash-brutalist .splash-frame {
+            border:6px solid #fff; padding:clamp(1.5rem,5vw,2.5rem) clamp(1.25rem,4vw,2rem);
+            box-shadow: 12px 12px 0 var(--red); animation: splashBrutalJolt 3s steps(2,end) infinite;
+        }
+        @keyframes splashBrutalJolt { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2px,-2px); } }
+        .splash-brutalist .splash-title { font-family:Impact,sans-serif; font-size:clamp(1.8rem,6vw,2.8rem); color:#fff; }
+        .splash-brutalist .splash-tag { font-family:'Courier New',monospace; color:var(--red); }
+        .splash-brutalist .splash-hint { font-family:'Courier New',monospace; color:#c8c8c8; }
+        .splash-brutalist .splash-inner { text-shadow: 0 0 12px #000, 0 2px 8px #000; }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-brutalist" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-inner splash-frame">
+            <div class="splash-title">SNONUX.FOO</div>
+            <div class="splash-tag">Brutalist channel</div>
+            <div class="splash-hint">[ CLICK OR ENTER TO TRANSMIT ]</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,80);ca.position.z=8;
+        var b1=new THREE.LineSegments(new THREE.EdgesGeometry(new THREE.BoxGeometry(3.4,2.4,2.4)),new THREE.LineBasicMaterial({color:0xffffff}));
+        var b2=new THREE.LineSegments(new THREE.EdgesGeometry(new THREE.BoxGeometry(2.2,1.6,1.6)),new THREE.LineBasicMaterial({color:0xff2200}));
+        b2.position.set(0.3,0.2,0.5);g.add(b1);g.add(b2);sc.add(g);sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.x=t*0.51;g.rotation.y=t*0.73;ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -73,15 +112,16 @@ const brutalistTemplate = `<!DOCTYPE html>
                 <div class="logo-title">
                     <h1>SNONUX.FOO</h1>
                     <p class="subtitle">MICROBLOG &mdash; <a href="https://foo.zone">FOO.ZONE</a> IS THE REAL BLOG</p>
+                    <p class="logo-host">Site served by a Raspberry Pi 3</p>
                 </div>
             </div>
             <div class="nav">
+                <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
                 <a href="https://foo.zone/about" class="transmit-btn">TRANSMIT</a>
             </div>
         </header>
         {{template "navhints" .}}
         <div class="content" id="post-content">
-            {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; NEWER</a></div>{{end}}
             {{range $i, $post := .Posts}}
             <div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
                 <div class="post-header">
@@ -91,7 +131,12 @@ const brutalistTemplate = `<!DOCTYPE html>
                 <div class="post-text">{{$post.ContentHTML}}</div>
             </div>
             {{end}}
-            {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">OLDER &rarr;</a></div>{{end}}
+            {{if or .PrevPage .NextPage}}
+            <div class="page-nav page-nav-dual">
+                {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; NEWER</a>{{end}}
+                {{if .NextPage}}<a href="{{.NextPage}}">OLDER &rarr;</a>{{end}}
+            </div>
+            {{end}}
         </div>
     </div>
     {{template "navmodal" .}}
diff --git a/internal/generator/theme_glass.go b/internal/generator/theme_glass.go
index 3fc951b..40e3ee3 100644
--- a/internal/generator/theme_glass.go
+++ b/internal/generator/theme_glass.go
@@ -30,6 +30,8 @@ const cosmosTemplate = `<!DOCTYPE html>
         .transmit-btn { border:1px solid var(--gold); color:var(--gold); padding:9px 20px;
                         border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
         .transmit-btn:hover { background:var(--gold); color:var(--bg); }
+        a.header-feed-link { color:var(--blue); }
+        a.header-feed-link:hover { color:var(--gold); }
         .nav-hints { background:rgba(2,2,20,0.6); border-bottom:1px solid rgba(255,209,102,0.12);
                      color:rgba(212,232,255,0.4); padding:5px 28px; display:flex; gap:18px;
                      font-size:0.68rem; flex-wrap:wrap; }
@@ -62,9 +64,65 @@ const cosmosTemplate = `<!DOCTYPE html>
         .modal-close { float:right; background:none; border:none; color:var(--gold);
                        font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
         @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+        .splash-overlay.splash-cosmos { background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(155,93,229,0.2) 0%, transparent 55%), var(--bg); }
+        .splash-cosmos .splash-stars {
+            position:absolute; inset:0; pointer-events:none; opacity:0.5;
+            background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.9), transparent),
+                radial-gradient(1px 1px at 80% 20%, rgba(255,209,102,0.8), transparent),
+                radial-gradient(1px 1px at 40% 70%, rgba(76,201,240,0.7), transparent),
+                radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.6), transparent);
+            background-size: 100% 100%;
+            animation: splashTwinkle 4s ease-in-out infinite alternate;
+        }
+        @keyframes splashTwinkle { from { opacity:0.35; } to { opacity:0.65; } }
+        .splash-cosmos .splash-inner { position:relative; z-index:1; }
+        .splash-cosmos .splash-orbit {
+            width:72px; height:72px; margin:0 auto 1rem; border:2px solid rgba(255,209,102,0.5);
+            border-radius:50%; animation: splashOrbitSpin 12s linear infinite;
+            box-shadow: 0 0 30px rgba(155,93,229,0.4);
+        }
+        @keyframes splashOrbitSpin { to { transform: rotate(360deg); } }
+        .splash-cosmos .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#d4e8ff; }
+        .splash-cosmos .splash-tag {
+            background:linear-gradient(90deg,var(--gold),var(--purple));
+            -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
+        .splash-cosmos .splash-hint { color:rgba(212,232,255,0.88); }
+        .splash-cosmos .splash-stars { z-index:1; }
+        .splash-cosmos .splash-inner { text-shadow: 0 2px 20px rgba(0,0,0,0.85); }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-cosmos" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-stars" aria-hidden="true"></div>
+        <div class="splash-inner">
+            <div class="splash-orbit" aria-hidden="true"></div>
+            <div class="splash-title">snonux.foo</div>
+            <div class="splash-tag">Cosmos gate</div>
+            <div class="splash-hint">Engage — click or Enter</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(48,1,0.1,90);ca.position.set(0,0.5,10);
+        var planet=new THREE.Mesh(new THREE.SphereGeometry(1.35,24,24),new THREE.MeshBasicMaterial({color:0xc8853a,transparent:true,opacity:0.92}));
+        var ring=new THREE.Mesh(new THREE.TorusGeometry(2.1,0.05,8,64),new THREE.MeshBasicMaterial({color:0xffd166,transparent:true,opacity:0.85}));
+        ring.rotation.x=Math.PI/2.25;var moon=new THREE.Mesh(new THREE.SphereGeometry(0.35,12,12),new THREE.MeshBasicMaterial({color:0x9b5de5,transparent:true,opacity:0.8}));
+        moon.position.set(2.8,0.6,0.5);g.add(planet);g.add(ring);g.add(moon);sc.add(g);sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=t*0.22;planet.rotation.y=t*0.35;
+            moon.position.x=2.6*Math.cos(t*0.7);moon.position.z=2.6*Math.sin(t*0.7);ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -73,15 +131,16 @@ const cosmosTemplate = `<!DOCTYPE html>
                 <div class="logo-title">
                     <h1>snonux.foo</h1>
                     <p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+                    <p class="logo-host">Site served by a Raspberry Pi 3</p>
                 </div>
             </div>
             <div class="nav">
+                <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
                 <a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
             </div>
         </header>
         {{template "navhints" .}}
         <div class="content" id="post-content">
-            {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
             {{range $i, $post := .Posts}}
             <div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
                 <div class="post-header">
@@ -91,7 +150,12 @@ const cosmosTemplate = `<!DOCTYPE html>
                 <div class="post-text">{{$post.ContentHTML}}</div>
             </div>
             {{end}}
-            {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+            {{if or .PrevPage .NextPage}}
+            <div class="page-nav page-nav-dual">
+                {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+                {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+            </div>
+            {{end}}
         </div>
     </div>
     {{template "navmodal" .}}
diff --git a/internal/generator/theme_matrix.go b/internal/generator/theme_matrix.go
index 8d35d7c..d964a11 100644
--- a/internal/generator/theme_matrix.go
+++ b/internal/generator/theme_matrix.go
@@ -40,6 +40,8 @@ const matrixTemplate = `<!DOCTYPE html>
                         text-decoration:none; font-size:0.82rem; letter-spacing:2px;
                         transition:all 0.1s; }
         .transmit-btn:hover { background:var(--g); color:var(--bg); }
+        a.header-feed-link { color:var(--g2); }
+        a.header-feed-link:hover { color:var(--g); text-shadow:0 0 8px var(--g); }
         .nav-hints { background:#000; border-bottom:1px solid var(--g3); color:var(--g2);
                      padding:4px 24px; display:flex; gap:18px; font-size:0.68rem; flex-wrap:wrap; }
         .nav-hints kbd { background:transparent; border:1px solid var(--g3); color:var(--g);
@@ -70,9 +72,58 @@ const matrixTemplate = `<!DOCTYPE html>
         .modal-close { float:right; background:none; border:none; color:var(--g2);
                        font-family:monospace; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
         @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 16px;} }
+        .splash-overlay.splash-matrix { background: #000; font-family:'Courier New',monospace; }
+        .splash-matrix .splash-rain {
+            position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0.35; z-index:1;
+            font-size:11px; line-height:14px; color:var(--g2); text-align:left; padding:8px;
+            white-space:pre; animation: splashMatrixScroll 16s linear infinite;
+        }
+        @keyframes splashMatrixScroll { to { transform: translateY(-24px); } }
+        .splash-matrix .splash-title {
+            position:relative; z-index:1; font-size:clamp(1.1rem,3.5vw,1.5rem); color:var(--g);
+            text-shadow:0 0 20px var(--g); letter-spacing:0.35em;
+            animation: splashMatrixGlow 1.8s ease-in-out infinite alternate;
+        }
+        @keyframes splashMatrixGlow { from { opacity:0.85; } to { opacity:1; text-shadow:0 0 28px var(--g); } }
+        .splash-matrix .splash-tag { position:relative; z-index:1; color:rgba(0,255,65,0.88); }
+        .splash-matrix .splash-hint { position:relative; z-index:1; color:rgba(0,255,65,0.82); }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-matrix" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-rain" aria-hidden="true">01001110 01000101 01001111
+10101010 11001100 00110011
+01110011 01101110 01101111
+11001010 10100101 01011010</div>
+        <div class="splash-inner">
+            <div class="splash-title">SNONUX.FOO</div>
+            <div class="splash-tag">Follow the signal</div>
+            <div class="splash-hint">wake up — click or enter</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,pts,pos,t0=performance.now(),N=28,i,arr;
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(55,1,0.1,80);ca.position.set(0,0.5,10);
+        arr=new Float32Array(N*3*20);for(i=0;i<arr.length;i+=3){arr[i]=(Math.random()-0.5)*16;arr[i+1]=Math.random()*22;arr[i+2]=(Math.random()-0.5)*8;}
+        var geo=new THREE.BufferGeometry();geo.setAttribute('position',new THREE.BufferAttribute(arr,3));
+        pts=new THREE.Points(geo,new THREE.PointsMaterial({color:0x00ff41,size:0.14,transparent:true,opacity:0.85,blending:THREE.AdditiveBlending,depthWrite:false,sizeAttenuation:true}));
+        sc.add(pts);pos=geo.attributes.position;sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001,j,p;
+            for(j=0;j<pos.count;j++){p=j*3;pos.array[p+1]-=0.045+Math.sin(t+j*0.1)*0.012;if(pos.array[p+1]<-2)pos.array[p+1]=20;}
+            pos.needsUpdate=true;pts.rotation.y=t*0.15;ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -81,15 +132,16 @@ const matrixTemplate = `<!DOCTYPE html>
                 <div class="logo-title">
                     <h1>SNONUX.FOO</h1>
                     <p class="subtitle">MICROBLOG / <a href="https://foo.zone">FOO.ZONE</a> IS THE REAL BLOG</p>
+                    <p class="logo-host">Site served by a Raspberry Pi 3</p>
                 </div>
             </div>
             <div class="nav">
+                <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">atom.xml</a>
                 <a href="https://foo.zone/about" class="transmit-btn">TRANSMIT</a>
             </div>
         </header>
         {{template "navhints" .}}
         <div class="content" id="post-content">
-            {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&lt;-- NEWER</a></div>{{end}}
             {{range $i, $post := .Posts}}
             <div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
                 <div class="post-header">
@@ -99,7 +151,12 @@ const matrixTemplate = `<!DOCTYPE html>
                 <div class="post-text">{{$post.ContentHTML}}</div>
             </div>
             {{end}}
-            {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">OLDER --&gt;</a></div>{{end}}
+            {{if or .PrevPage .NextPage}}
+            <div class="page-nav page-nav-dual">
+                {{if .PrevPage}}<a href="{{.PrevPage}}">&lt;-- NEWER</a>{{end}}
+                {{if .NextPage}}<a href="{{.NextPage}}">OLDER --&gt;</a>{{end}}
+            </div>
+            {{end}}
         </div>
     </div>
     {{template "navmodal" .}}
diff --git a/internal/generator/theme_minimal.go b/internal/generator/theme_minimal.go
index 00e9a17..4b7de26 100644
--- a/internal/generator/theme_minimal.go
+++ b/internal/generator/theme_minimal.go
@@ -30,6 +30,8 @@ const plasmaTemplate = `<!DOCTYPE html>
         .transmit-btn { border:1px solid var(--magenta); color:var(--magenta); padding:9px 20px;
                         border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
         .transmit-btn:hover { background:var(--magenta); color:var(--bg); }
+        a.header-feed-link { color:var(--cyan); }
+        a.header-feed-link:hover { color:var(--magenta); }
         .nav-hints { background:rgba(5,0,8,0.65); border-bottom:1px solid rgba(0,240,255,0.12);
                      color:rgba(232,224,255,0.4); padding:5px 28px; display:flex; gap:18px;
                      font-size:0.68rem; flex-wrap:wrap; }
@@ -63,9 +65,60 @@ const plasmaTemplate = `<!DOCTYPE html>
         .modal-close { float:right; background:none; border:none; color:var(--cyan);
                        font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
         @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+        .splash-overlay.splash-plasma { background: var(--bg); overflow:hidden; }
+        .splash-plasma .splash-blobs {
+            position:absolute; width:140%; height:140%; left:-20%; top:-20%; pointer-events:none;
+            background:
+                radial-gradient(ellipse at 30% 40%, rgba(0,240,255,0.25) 0%, transparent 45%),
+                radial-gradient(ellipse at 70% 60%, rgba(255,0,224,0.22) 0%, transparent 50%),
+                radial-gradient(ellipse at 50% 80%, rgba(255,238,0,0.12) 0%, transparent 40%);
+            animation: splashPlasmaDrift 10s ease-in-out infinite alternate;
+            filter: blur(2px);
+        }
+        @keyframes splashPlasmaDrift {
+            from { transform: translate(0,0) rotate(0deg); }
+            to { transform: translate(-4%,3%) rotate(8deg); }
+        }
+        .splash-plasma .splash-inner { position:relative; z-index:1; }
+        .splash-plasma .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#e8e0ff;
+            text-shadow:0 0 24px var(--cyan), 0 0 48px rgba(255,0,224,0.35); }
+        .splash-plasma .splash-tag { color:var(--magenta); letter-spacing:0.18em; }
+        .splash-plasma .splash-hint { color:rgba(232,224,255,0.86); }
+        .splash-plasma .splash-blobs { z-index:1; }
+        .splash-plasma .splash-inner { text-shadow: 0 2px 22px rgba(0,0,0,0.9); }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-plasma" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-blobs" aria-hidden="true"></div>
+        <div class="splash-inner">
+            <div class="splash-title">snonux.foo</div>
+            <div class="splash-tag">Plasma lock</div>
+            <div class="splash-hint">Merge — click or Enter</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),spec=[[0x00f0ff,1.45,0,0,0],[0xff00e0,1.05,1.2,0.4,0],[0xffee00,0.75,-1.1,-0.3,0]];
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,60);ca.position.z=6.5;
+        spec.forEach(function(s){var m=new THREE.Mesh(new THREE.SphereGeometry(s[1],20,20),new THREE.MeshBasicMaterial({color:s[0],transparent:true,opacity:0.42,blending:THREE.AdditiveBlending,depthWrite:false}));
+            m.position.set(s[2],s[3],s[4]);m.userData.ph=s;g.add(m);});
+        sc.add(g);sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;
+            g.children.forEach(function(c,ix){var ph=c.userData.ph;c.position.x=ph[2]+Math.sin(t*0.9+ix)*0.35;c.position.y=ph[3]+Math.cos(t*0.7+ix*1.3)*0.28;c.scale.setScalar(1+Math.sin(t*1.5+ix)*0.06);});
+            ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -74,15 +127,16 @@ const plasmaTemplate = `<!DOCTYPE html>
                 <div class="logo-title">
                     <h1>snonux.foo</h1>
                     <p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+                    <p class="logo-host">Site served by a Raspberry Pi 3</p>
                 </div>
             </div>
             <div class="nav">
+                <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
                 <a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
             </div>
         </header>
         {{template "navhints" .}}
         <div class="content" id="post-content">
-            {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
             {{range $i, $post := .Posts}}
             <div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
                 <div class="post-header">
@@ -92,7 +146,12 @@ const plasmaTemplate = `<!DOCTYPE html>
                 <div class="post-text">{{$post.ContentHTML}}</div>
             </div>
             {{end}}
-            {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+            {{if or .PrevPage .NextPage}}
+            <div class="page-nav page-nav-dual">
+                {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+                {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+            </div>
+            {{end}}
         </div>
     </div>
     {{template "navmodal" .}}
diff --git a/internal/generator/theme_neon.go b/internal/generator/theme_neon.go
index 3197d6f..eccf558 100644
--- a/internal/generator/theme_neon.go
+++ b/internal/generator/theme_neon.go
@@ -27,7 +27,8 @@ const neonTemplate = `<!DOCTYPE html>
         .logo-title .subtitle { font-size:0.68rem; opacity:0.6; letter-spacing:1px; margin-top:2px; }
         .logo-title .subtitle a { color:var(--neon-cyan); text-decoration:none; }
         .logo-title .subtitle a:hover { text-shadow:0 0 8px var(--neon-cyan); }
-        .nav { display:flex; gap:16px; align-items:center; }
+        .nav { gap:16px; }
+        a.header-feed-link { color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,245,255,0.35); }
         .transmit-btn { background:transparent; border:3px solid var(--neon-yellow); color:var(--neon-yellow);
                         padding:12px 28px; border-radius:9999px; font-weight:600; letter-spacing:1px;
                         display:flex; align-items:center; gap:10px; box-shadow:0 0 30px var(--neon-yellow);
@@ -80,9 +81,61 @@ const neonTemplate = `<!DOCTYPE html>
             header { padding:14px 20px; } .transmit-btn { padding:9px 16px; font-size:0.8rem; }
             .nav-hints { display:none; } .modal-inner { padding:24px 16px; }
         }
+        .splash-overlay.splash-neon {
+            background: radial-gradient(ellipse 120% 80% at 50% 35%, rgba(0,245,255,0.14) 0%, transparent 55%),
+                radial-gradient(ellipse 90% 55% at 75% 85%, rgba(255,0,204,0.12) 0%, transparent 50%),
+                #0b001a;
+        }
+        .splash-neon .splash-deco {
+            width:100px; height:100px; margin:0 auto 1.25rem; border-radius:50%;
+            border:3px solid var(--neon-cyan); box-shadow:0 0 36px var(--neon-cyan), inset 0 0 26px rgba(0,245,255,0.15);
+            animation: splashNeonSpin 5s linear infinite;
+        }
+        @keyframes splashNeonSpin { to { transform: rotate(360deg); } }
+        .splash-neon .splash-title {
+            font-size: clamp(1.5rem, 5vw, 2.35rem);
+            animation: splashNeonPulse 2s ease-in-out infinite alternate;
+        }
+        @keyframes splashNeonPulse {
+            from { text-shadow: 0 0 12px var(--neon-cyan), 0 0 24px rgba(255,0,204,0.4); }
+            to { text-shadow: 0 0 26px var(--neon-cyan), 0 0 48px var(--neon-magenta); }
+        }
+        .splash-neon .splash-tag { color: var(--neon-yellow); }
+        .splash-neon .splash-hint { color: rgba(224,248,255,0.9); font-family: 'Orbitron', sans-serif; }
+        .splash-neon .splash-inner { text-shadow: 0 2px 24px rgba(0,0,0,0.85), 0 0 40px rgba(11,0,26,0.9); }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-neon" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-inner">
+            <div class="splash-deco" aria-hidden="true"></div>
+            <div class="splash-title">snonux.foo</div>
+            <div class="splash-tag">Neon Nexus</div>
+            <div class="splash-hint">Click or Enter &mdash; establish link</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now();
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren){ren.dispose();}ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});
+        ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(52,1,0.1,100);ca.position.set(0,0.4,9);
+        var cols=[0x00f5ff,0xff00cc,0xffe700],i,m;
+        for(i=0;i<3;i++){m=new THREE.Mesh(new THREE.TorusGeometry(1.55+i*0.48,0.055,8,48),new THREE.MeshBasicMaterial({color:cols[i],transparent:true,opacity:0.92}));m.rotation.x=Math.PI/2;m.userData.sp=0.01+i*0.004;g.add(m);}
+        g.add(new THREE.Mesh(new THREE.SphereGeometry(0.52,20,20),new THREE.MeshBasicMaterial({color:0xffe700,transparent:true,opacity:0.95})));
+        sc.add(g);sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;g.rotation.y=t*0.42;g.rotation.x=Math.sin(t*0.65)*0.12;g.children.forEach(function(c){if(c.userData.sp)c.rotation.z+=c.userData.sp;});ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -123,9 +176,11 @@ const neonTemplate = `<!DOCTYPE html>
                 <div class="logo-title">
                     <h1>snonux.foo</h1>
                     <p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+                    <p class="logo-host">Site served by a Raspberry Pi 3</p>
                 </div>
             </div>
             <div class="nav">
+                <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
                 <a href="https://foo.zone/about" class="transmit-btn">
                     <i class="fa-solid fa-feather-pointed"></i> TRANSMIT TO NEXUS
                 </a>
@@ -133,9 +188,6 @@ const neonTemplate = `<!DOCTYPE html>
         </header>
         {{template "navhints" .}}
         <div class="content" id="post-content">
-            {{if .PrevPage}}
-            <div class="page-nav"><a href="{{.PrevPage}}">&larr; NEWER TRANSMISSIONS</a></div>
-            {{end}}
             {{range $i, $post := .Posts}}
             <div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
                 <div class="post-header">
@@ -145,8 +197,11 @@ const neonTemplate = `<!DOCTYPE html>
                 <div class="post-text">{{$post.ContentHTML}}</div>
             </div>
             {{end}}
-            {{if .NextPage}}
-            <div class="page-nav"><a href="{{.NextPage}}">OLDER TRANSMISSIONS &rarr;</a></div>
+            {{if or .PrevPage .NextPage}}
+            <div class="page-nav page-nav-dual">
+                {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; NEWER TRANSMISSIONS</a>{{end}}
+                {{if .NextPage}}<a href="{{.NextPage}}">OLDER TRANSMISSIONS &rarr;</a>{{end}}
+            </div>
             {{end}}
         </div>
     </div>
diff --git a/internal/generator/theme_ocean.go b/internal/generator/theme_ocean.go
index af4c80b..76469e5 100644
--- a/internal/generator/theme_ocean.go
+++ b/internal/generator/theme_ocean.go
@@ -28,6 +28,8 @@ const oceanTemplate = `<!DOCTYPE html>
         .transmit-btn { border:1px solid var(--teal); color:var(--teal); padding:9px 20px;
                         border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
         .transmit-btn:hover { background:var(--teal); color:var(--navy); }
+        a.header-feed-link { color:var(--aqua); }
+        a.header-feed-link:hover { color:var(--foam); }
         .nav-hints { background:rgba(3,4,94,0.65); border-bottom:1px solid rgba(0,180,216,0.18);
                      color:rgba(202,240,248,0.45); padding:5px 28px; display:flex; gap:18px;
                      font-size:0.68rem; flex-wrap:wrap; }
@@ -60,9 +62,54 @@ const oceanTemplate = `<!DOCTYPE html>
         .modal-close { float:right; background:none; border:none; color:var(--teal);
                        font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
         @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+        .splash-overlay.splash-ocean {
+            background: linear-gradient(180deg, var(--navy) 0%, var(--deep) 45%, #001a3d 100%);
+        }
+        .splash-ocean .splash-wave {
+            width:min(320px,88vw); height:14px; margin:0 auto 1.2rem; border-radius:50%;
+            background: radial-gradient(ellipse at 50% 0%, var(--aqua), transparent 70%);
+            opacity:0.7; animation: splashWaveBob 2.8s ease-in-out infinite;
+            box-shadow: 0 8px 40px rgba(0,180,216,0.35);
+        }
+        @keyframes splashWaveBob { 0%,100%{ transform: translateY(0) scaleX(1); } 50%{ transform: translateY(-6px) scaleX(1.05); } }
+        .splash-ocean .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:var(--foam);
+            text-shadow:0 0 18px var(--teal); }
+        .splash-ocean .splash-tag { color:var(--aqua); letter-spacing:0.2em; }
+        .splash-ocean .splash-hint { color:rgba(202,240,248,0.88); }
+        .splash-ocean .splash-inner { text-shadow: 0 2px 16px rgba(3,4,94,0.9); }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-ocean" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-inner">
+            <div class="splash-wave" aria-hidden="true"></div>
+            <div class="splash-title">snonux.foo</div>
+            <div class="splash-tag">Deep channel</div>
+            <div class="splash-hint">Surface — click or Enter</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),i;
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(50,1,0.1,70);ca.position.set(0,0.2,9);
+        for(i=0;i<5;i++){var b=new THREE.Mesh(new THREE.SphereGeometry(0.25+Math.random()*0.35,12,12),new THREE.MeshBasicMaterial({color:0x48cae4,transparent:true,opacity:0.65}));
+            b.position.set((Math.random()-0.5)*7,(Math.random()-0.5)*4,(Math.random()-0.5)*3);b.userData.dy=0.02+Math.random()*0.03;b.userData.x=b.position.x;b.userData.y0=b.position.y;g.add(b);}
+        var jelly=new THREE.Mesh(new THREE.SphereGeometry(1.1,16,16),new THREE.MeshBasicMaterial({color:0x00b4d8,transparent:true,opacity:0.35,wireframe:true}));
+        g.add(jelly);sc.add(g);sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001;jelly.rotation.y=t*0.4;
+            g.children.forEach(function(c){if(c.userData.dy){c.position.y+=Math.sin(t*2+c.userData.x)*0.008;c.position.x=c.userData.x+Math.sin(t+c.userData.y0)*0.15;}});ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -71,15 +118,16 @@ const oceanTemplate = `<!DOCTYPE html>
                 <div class="logo-title">
                     <h1>snonux.foo</h1>
                     <p class="subtitle">microblog &mdash; <a href="https://foo.zone">foo.zone</a> is the real blog</p>
+                    <p class="logo-host">Site served by a Raspberry Pi 3</p>
                 </div>
             </div>
             <div class="nav">
+                <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a>
                 <a href="https://foo.zone/about" class="transmit-btn">Transmit</a>
             </div>
         </header>
         {{template "navhints" .}}
         <div class="content" id="post-content">
-            {{if .PrevPage}}<div class="page-nav"><a href="{{.PrevPage}}">&larr; Newer</a></div>{{end}}
             {{range $i, $post := .Posts}}
             <div class="post" data-index="{{$i}}" onclick="selectPost({{$i}})">
                 <div class="post-header">
@@ -89,7 +137,12 @@ const oceanTemplate = `<!DOCTYPE html>
                 <div class="post-text">{{$post.ContentHTML}}</div>
             </div>
             {{end}}
-            {{if .NextPage}}<div class="page-nav"><a href="{{.NextPage}}">Older &rarr;</a></div>{{end}}
+            {{if or .PrevPage .NextPage}}
+            <div class="page-nav page-nav-dual">
+                {{if .PrevPage}}<a href="{{.PrevPage}}">&larr; Newer</a>{{end}}
+                {{if .NextPage}}<a href="{{.NextPage}}">Older &rarr;</a>{{end}}
+            </div>
+            {{end}}
         </div>
     </div>
     {{template "navmodal" .}}
diff --git a/internal/generator/theme_paper.go b/internal/generator/theme_paper.go
index 9ed40a2..02b0bb8 100644
--- a/internal/generator/theme_paper.go
+++ b/internal/generator/theme_paper.go
@@ -28,6 +28,8 @@ const volcanoTemplate = `<!DOCTYPE html>
         .transmit-btn { border:1px solid var(--lava); color:var(--lava); padding:9px 20px;
                         border-radius:4px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
         .transmit-btn:hover { background:var(--lava); color:var(--bg); }
+        a.header-feed-link { color:var(--ember); }
+        a.header-feed-link:hover { color:var(--hot); text-shadow:0 0 8px var(--lava); }
         .nav-hints { background:rgba(13,8,2,0.7); border-bottom:1px solid rgba(255,68,0,0.15);
                      color:rgba(255,232,204,0.4); padding:5px 28px; display:flex; gap:18px;
                      font-size:0.68rem; flex-wrap:wrap; }
@@ -60,9 +62,57 @@ const volcanoTemplate = `<!DOCTYPE html>
         .modal-close { float:right; background:none; border:none; color:var(--ember);
                        font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
         @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+        .splash-overlay.splash-volcano {
+            background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,68,0,0.35) 0%, transparent 50%), var(--bg);
+        }
+        .splash-volcano .splash-ember {
+            width:min(200px,55vw); height:4px; margin:0 auto 1.3rem; border-radius:2px;
+            background: linear-gradient(90deg, transparent, var(--lava), var(--hot), var(--ember), transparent);
+            animation: splashEmberPulse 1.6s ease-in-out infinite alternate;
+            box-shadow: 0 0 20px var(--lava), 0 6px 30px rgba(255,68,0,0.4);
+        }
+        @keyframes splashEmberPulse { from { opacity:0.6; transform: scaleX(0.9); } to { opacity:1; transform: scaleX(1); } }
+        .splash-volcano .splash-title { font-size:clamp(1.45rem,4.5vw,2rem); color:#ffe8cc;
+            text-shadow:0 0 20px var(--lava); }
+        .splash-volcano .splash-tag { color:var(--ember); letter-spacing:0.15em; }
+        .splash-volcano .splash-hint { color:rgba(255,232,204,0.88); }
+        .splash-volcano .splash-inner { text-shadow: 0 2px 18px rgba(0,0,0,0.85); }
     </style>
 </head>
 <body>
+    {{template "splashGate"}}
+    <div id="splash-overlay" class="splash-overlay splash-volcano" tabindex="-1" aria-label="Open microblog">
+        <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas>
+        <div class="splash-inner">
+            <div class="splash-ember" aria-hidden="true"></div>
+            <div class="splash-title">snonux.foo</div>
+            <div class="splash-tag">Volcano vent</div>
+            <div class="splash-hint">Erupt into feed — click or Enter</div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,g=new THREE.Group(),t0=performance.now(),N=180,i,arr,geo,pts,pos;
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(52,1,0.1,70);ca.position.set(0,1.2,9);
+        var cone=new THREE.Mesh(new THREE.ConeGeometry(1.5,4.2,10,1,true),new THREE.MeshBasicMaterial({color:0xff4400,wireframe:true,transparent:true,opacity:0.55}));
+        cone.position.y=-0.8;g.add(cone);
+        arr=new Float32Array(N*3);for(i=0;i<N;i++){arr[i*3]=(Math.random()-0.5)*5;arr[i*3+1]=Math.random()*5;arr[i*3+2]=(Math.random()-0.5)*5;}
+        geo=new THREE.BufferGeometry();geo.setAttribute('position',new THREE.BufferAttribute(arr,3));
+        pts=new THREE.Points(geo,new THREE.PointsMaterial({color:0xff8c00,size:0.1,transparent:true,opacity:0.75,blending:THREE.AdditiveBlending,depthWrite:false,sizeAttenuation:true}));
+        g.add(pts);pos=geo.attributes.position;sc.add(g);sz();window.addEventListener('resize',sz);
+        function loop(now){raf=requestAnimationFrame(loop);var t=(now-t0)*0.001,j,p,sp;
+            for(j=0;j<pos.count;j++){p=j*3;sp=0.05+Math.sin(t*2.2+j*0.13)*0.018;pos.array[p+1]+=sp;if(pos.array[p+1]>6){pos.array[p+1]=-0.5;pos.array[p]=Math.sin(j*1.7+t)*2.2;}}
+            pos.needsUpdate=true;cone.rotation.y=t*0.25;ren.render(sc,ca);}
+        raf=requestAnimationFrame(loop);
+    })();
+    </script>
     <canvas id="three-canvas"></canvas>
     <div class="overlay">
         <header>
@@ -71,15 +121,16 @@ const volcanoTemplate = `<!DOCTYPE html>
                 <div cl