From a5cb9f7ad4b2bcb7ac367854147f661ab83c5ec1 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Sat, 25 Apr 2026 22:13:32 +0300
Subject: can swap themes dynamically

---
 internal/generator/doc.go                          |   33 +-
 internal/generator/favicon.go                      |   27 +-
 internal/generator/generator.go                    |  198 ++-
 internal/generator/generator_test.go               |   32 +-
 internal/generator/templates.go                    |   11 +-
 internal/generator/templates/embed.go              |   65 +-
 .../generator/templates/shared/favicon_head.tmpl   |    2 -
 internal/generator/templates/shared/nav.tmpl       | 1772 +-------------------
 internal/generator/templates/shared/shared.css     |  925 ++++++++++
 internal/generator/templates/shared/shared.js      | 1343 +++++++++++++++
 internal/generator/templates/shell.tmpl            |   77 +
 internal/generator/templates/themes/aurora.tmpl    |  359 ----
 .../generator/templates/themes/aurora/meta.json    |    7 +
 .../generator/templates/themes/aurora/theme.css    |   94 ++
 .../generator/templates/themes/aurora/theme.js     |  200 +++
 internal/generator/templates/themes/biomech.tmpl   |  217 ---
 .../generator/templates/themes/biomech/meta.json   |    7 +
 .../generator/templates/themes/biomech/theme.css   |   52 +
 .../generator/templates/themes/biomech/theme.js    |   98 ++
 internal/generator/templates/themes/brutalist.tmpl |  260 ---
 .../generator/templates/themes/brutalist/meta.json |    7 +
 .../generator/templates/themes/brutalist/theme.css |   65 +
 .../generator/templates/themes/brutalist/theme.js  |  132 ++
 internal/generator/templates/themes/cathedral.tmpl |  303 ----
 .../generator/templates/themes/cathedral/meta.json |    7 +
 .../generator/templates/themes/cathedral/theme.css |   79 +
 .../generator/templates/themes/cathedral/theme.js  |  155 ++
 internal/generator/templates/themes/cosmos.tmpl    |  385 -----
 .../generator/templates/themes/cosmos/meta.json    |    7 +
 .../generator/templates/themes/cosmos/theme.css    |   81 +
 .../generator/templates/themes/cosmos/theme.js     |  239 +++
 internal/generator/templates/themes/dos.tmpl       |  302 ----
 internal/generator/templates/themes/dos/meta.json  |    7 +
 internal/generator/templates/themes/dos/theme.css  |   79 +
 internal/generator/templates/themes/dos/theme.js   |  157 ++
 internal/generator/templates/themes/matrix.tmpl    |  315 ----
 .../generator/templates/themes/matrix/meta.json    |    7 +
 .../generator/templates/themes/matrix/theme.css    |   76 +
 .../generator/templates/themes/matrix/theme.js     |  172 ++
 internal/generator/templates/themes/neon.tmpl      |  348 ----
 internal/generator/templates/themes/neon/meta.json |    7 +
 internal/generator/templates/themes/neon/theme.css |   94 ++
 internal/generator/templates/themes/neon/theme.js  |  155 ++
 internal/generator/templates/themes/noir.tmpl      |  308 ----
 internal/generator/templates/themes/noir/meta.json |    7 +
 internal/generator/templates/themes/noir/theme.css |   77 +
 internal/generator/templates/themes/noir/theme.js  |  162 ++
 internal/generator/templates/themes/ocean.tmpl     |  387 -----
 .../generator/templates/themes/ocean/meta.json     |    7 +
 .../generator/templates/themes/ocean/theme.css     |   69 +
 internal/generator/templates/themes/ocean/theme.js |  254 +++
 internal/generator/templates/themes/plasma.tmpl    |  306 ----
 .../generator/templates/themes/plasma/meta.json    |    7 +
 .../generator/templates/themes/plasma/theme.css    |   78 +
 .../generator/templates/themes/plasma/theme.js     |  164 ++
 internal/generator/templates/themes/retro.tmpl     |  309 ----
 .../generator/templates/themes/retro/meta.json     |    7 +
 .../generator/templates/themes/retro/theme.css     |   79 +
 internal/generator/templates/themes/retro/theme.js |  167 ++
 .../generator/templates/themes/retrofuture.tmpl    |  374 -----
 .../templates/themes/retrofuture/meta.json         |    7 +
 .../templates/themes/retrofuture/theme.css         |  105 ++
 .../templates/themes/retrofuture/theme.js          |  193 +++
 internal/generator/templates/themes/spaceage.tmpl  |  350 ----
 .../generator/templates/themes/spaceage/meta.json  |    7 +
 .../generator/templates/themes/spaceage/theme.css  |   80 +
 .../generator/templates/themes/spaceage/theme.js   |  205 +++
 .../generator/templates/themes/surveillance.tmpl   |  224 ---
 .../templates/themes/surveillance/meta.json        |    7 +
 .../templates/themes/surveillance/theme.css        |   50 +
 .../templates/themes/surveillance/theme.js         |  107 ++
 internal/generator/templates/themes/synthwave.tmpl |  326 ----
 .../generator/templates/themes/synthwave/meta.json |    7 +
 .../generator/templates/themes/synthwave/theme.css |   85 +
 .../generator/templates/themes/synthwave/theme.js  |  174 ++
 internal/generator/templates/themes/terminal.tmpl  |  275 ---
 .../generator/templates/themes/terminal/meta.json  |    7 +
 .../generator/templates/themes/terminal/theme.css  |   70 +
 .../generator/templates/themes/terminal/theme.js   |  141 ++
 internal/generator/templates/themes/tropicale.tmpl |  575 -------
 .../generator/templates/themes/tropicale/meta.json |    7 +
 .../generator/templates/themes/tropicale/theme.css |   81 +
 .../generator/templates/themes/tropicale/theme.js  |  429 +++++
 internal/generator/templates/themes/volcano.tmpl   |  400 -----
 .../generator/templates/themes/volcano/meta.json   |    7 +
 .../generator/templates/themes/volcano/theme.css   |   69 +
 .../generator/templates/themes/volcano/theme.js    |  267 +++
 internal/generator/themes.go                       |   33 +-
 88 files changed, 7812 insertions(+), 8196 deletions(-)
 delete mode 100644 internal/generator/templates/shared/favicon_head.tmpl
 create mode 100644 internal/generator/templates/shared/shared.css
 create mode 100644 internal/generator/templates/shared/shared.js
 create mode 100644 internal/generator/templates/shell.tmpl
 delete mode 100644 internal/generator/templates/themes/aurora.tmpl
 create mode 100644 internal/generator/templates/themes/aurora/meta.json
 create mode 100644 internal/generator/templates/themes/aurora/theme.css
 create mode 100644 internal/generator/templates/themes/aurora/theme.js
 delete mode 100644 internal/generator/templates/themes/biomech.tmpl
 create mode 100644 internal/generator/templates/themes/biomech/meta.json
 create mode 100644 internal/generator/templates/themes/biomech/theme.css
 create mode 100644 internal/generator/templates/themes/biomech/theme.js
 delete mode 100644 internal/generator/templates/themes/brutalist.tmpl
 create mode 100644 internal/generator/templates/themes/brutalist/meta.json
 create mode 100644 internal/generator/templates/themes/brutalist/theme.css
 create mode 100644 internal/generator/templates/themes/brutalist/theme.js
 delete mode 100644 internal/generator/templates/themes/cathedral.tmpl
 create mode 100644 internal/generator/templates/themes/cathedral/meta.json
 create mode 100644 internal/generator/templates/themes/cathedral/theme.css
 create mode 100644 internal/generator/templates/themes/cathedral/theme.js
 delete mode 100644 internal/generator/templates/themes/cosmos.tmpl
 create mode 100644 internal/generator/templates/themes/cosmos/meta.json
 create mode 100644 internal/generator/templates/themes/cosmos/theme.css
 create mode 100644 internal/generator/templates/themes/cosmos/theme.js
 delete mode 100644 internal/generator/templates/themes/dos.tmpl
 create mode 100644 internal/generator/templates/themes/dos/meta.json
 create mode 100644 internal/generator/templates/themes/dos/theme.css
 create mode 100644 internal/generator/templates/themes/dos/theme.js
 delete mode 100644 internal/generator/templates/themes/matrix.tmpl
 create mode 100644 internal/generator/templates/themes/matrix/meta.json
 create mode 100644 internal/generator/templates/themes/matrix/theme.css
 create mode 100644 internal/generator/templates/themes/matrix/theme.js
 delete mode 100644 internal/generator/templates/themes/neon.tmpl
 create mode 100644 internal/generator/templates/themes/neon/meta.json
 create mode 100644 internal/generator/templates/themes/neon/theme.css
 create mode 100644 internal/generator/templates/themes/neon/theme.js
 delete mode 100644 internal/generator/templates/themes/noir.tmpl
 create mode 100644 internal/generator/templates/themes/noir/meta.json
 create mode 100644 internal/generator/templates/themes/noir/theme.css
 create mode 100644 internal/generator/templates/themes/noir/theme.js
 delete mode 100644 internal/generator/templates/themes/ocean.tmpl
 create mode 100644 internal/generator/templates/themes/ocean/meta.json
 create mode 100644 internal/generator/templates/themes/ocean/theme.css
 create mode 100644 internal/generator/templates/themes/ocean/theme.js
 delete mode 100644 internal/generator/templates/themes/plasma.tmpl
 create mode 100644 internal/generator/templates/themes/plasma/meta.json
 create mode 100644 internal/generator/templates/themes/plasma/theme.css
 create mode 100644 internal/generator/templates/themes/plasma/theme.js
 delete mode 100644 internal/generator/templates/themes/retro.tmpl
 create mode 100644 internal/generator/templates/themes/retro/meta.json
 create mode 100644 internal/generator/templates/themes/retro/theme.css
 create mode 100644 internal/generator/templates/themes/retro/theme.js
 delete mode 100644 internal/generator/templates/themes/retrofuture.tmpl
 create mode 100644 internal/generator/templates/themes/retrofuture/meta.json
 create mode 100644 internal/generator/templates/themes/retrofuture/theme.css
 create mode 100644 internal/generator/templates/themes/retrofuture/theme.js
 delete mode 100644 internal/generator/templates/themes/spaceage.tmpl
 create mode 100644 internal/generator/templates/themes/spaceage/meta.json
 create mode 100644 internal/generator/templates/themes/spaceage/theme.css
 create mode 100644 internal/generator/templates/themes/spaceage/theme.js
 delete mode 100644 internal/generator/templates/themes/surveillance.tmpl
 create mode 100644 internal/generator/templates/themes/surveillance/meta.json
 create mode 100644 internal/generator/templates/themes/surveillance/theme.css
 create mode 100644 internal/generator/templates/themes/surveillance/theme.js
 delete mode 100644 internal/generator/templates/themes/synthwave.tmpl
 create mode 100644 internal/generator/templates/themes/synthwave/meta.json
 create mode 100644 internal/generator/templates/themes/synthwave/theme.css
 create mode 100644 internal/generator/templates/themes/synthwave/theme.js
 delete mode 100644 internal/generator/templates/themes/terminal.tmpl
 create mode 100644 internal/generator/templates/themes/terminal/meta.json
 create mode 100644 internal/generator/templates/themes/terminal/theme.css
 create mode 100644 internal/generator/templates/themes/terminal/theme.js
 delete mode 100644 internal/generator/templates/themes/tropicale.tmpl
 create mode 100644 internal/generator/templates/themes/tropicale/meta.json
 create mode 100644 internal/generator/templates/themes/tropicale/theme.css
 create mode 100644 internal/generator/templates/themes/tropicale/theme.js
 delete mode 100644 internal/generator/templates/themes/volcano.tmpl
 create mode 100644 internal/generator/templates/themes/volcano/meta.json
 create mode 100644 internal/generator/templates/themes/volcano/theme.css
 create mode 100644 internal/generator/templates/themes/volcano/theme.js

(limited to 'internal/generator')

diff --git a/internal/generator/doc.go b/internal/generator/doc.go
index d7d4a53..be82bdc 100644
--- a/internal/generator/doc.go
+++ b/internal/generator/doc.go
@@ -4,21 +4,26 @@
 // Responsibilities by area (file → role):
 //
 //   - generator.go — Orchestration: load posts from disk, sort newest-first,
-//     paginate, parse theme+nav templates, write index.html / pageN.html,
-//     then call atom.Generate.
-//   - 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 "navSharedCSSInner"}} inside <style>, then {{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.
-//   - theme_sounds.go — Per-theme Web Audio parameters (splash arpeggio, nav blip,
-//     modal open/close); embedded in pages as ThemeSoundsJSON for navscript.
-//   - templates.go — Short pointer: where templates and registry live.
+//     paginate, parse shell+nav templates, write index.html / pageN.html plus
+//     shared.css/shared.js and per-theme assets, then call atom.Generate.
+//   - themes.go — ListThemes / validThemeName helpers backed by the embedded FS.
+//   - shared.go — navDefs: shared {{define}} blocks (splashGate, navhints,
+//     navmodal) merged at parse time with shell.tmpl so a single html/template
+//     parse sees every name.
+//   - theme_sounds.go — Per-theme Web Audio parameters; one file is written per
+//     theme to dist/themes/<name>/sounds.json and the default theme's preset is
+//     also baked into shell.tmpl as window.SNONUX_SOUNDS so the splash chime
+//     can fire instantly.
+//   - favicon.go — Generates the 32×32 .ico binary written into the output dir.
+//   - templates.go — Short pointer: where templates and helpers live.
 //
-// Dependency direction: themes and shared nav templates are composed only for
+// Theme assets live as separate files under templates/themes/<name>/theme.css,
+// theme.js, and meta.json. The single shell.tmpl loads the active theme's CSS
+// synchronously in <head> (chosen from localStorage by a boot script) and
+// shared.js orchestrates the rest. Switching themes is a localStorage write
+// followed by location.reload().
+//
+// Dependency direction: shell and shared nav templates are composed only for
 // the HTML path (generator.go). Package atom depends on config and post only,
 // not on themes or html/template, so feed logic stays isolated from page chrome.
 package generator
diff --git a/internal/generator/favicon.go b/internal/generator/favicon.go
index a4a8251..8664183 100644
--- a/internal/generator/favicon.go
+++ b/internal/generator/favicon.go
@@ -6,35 +6,12 @@ import (
 	"fmt"
 	"image"
 	"image/color"
-	"log"
 	"os"
 	"path/filepath"
-	"strings"
-
-	"codeberg.org/snonux/snonux/internal/generator/templates"
 )
 
-// faviconHeadHTML is the <link rel="icon"> fragment injected into every theme's
-// <head>. Loaded at startup from the embedded templates FS so no HTML lives in
-// the Go sources.
-var faviconHeadHTML = loadFaviconHeadHTML()
-
-func loadFaviconHeadHTML() string {
-	s, err := templates.Shared("favicon_head")
-	if err != nil {
-		log.Printf("warning: could not load favicon_head template: %v", err)
-		return ""
-	}
-	return s
-}
-
-func injectSharedHead(theme string) string {
-	if strings.Contains(theme, `rel="icon"`) {
-		return theme
-	}
-
-	return strings.Replace(theme, "</head>", faviconHeadHTML+"</head>", 1)
-}
+// shell.tmpl now embeds the favicon <link> directly, so no head-injection
+// helper is needed; favicon.go only generates and writes the .ico binary.
 
 func writeFavicon(outputDir string) error {
 	data, err := generateFaviconICO()
diff --git a/internal/generator/generator.go b/internal/generator/generator.go
index dc1f236..079cc38 100644
--- a/internal/generator/generator.go
+++ b/internal/generator/generator.go
@@ -12,17 +12,29 @@ import (
 
 	"codeberg.org/snonux/snonux/internal/config"
 	"codeberg.org/snonux/snonux/internal/generator/atom"
+	"codeberg.org/snonux/snonux/internal/generator/templates"
 	"codeberg.org/snonux/snonux/internal/post"
 )
 
 // pageData holds the template variables for a single HTML page.
+// Theme-specific values come from the default theme's meta.json — they are
+// what the user sees on first paint. shared.js may swap them out at runtime
+// when a non-default theme is saved in localStorage.
 type pageData struct {
-	Posts           []postView
-	PrevPage        string // URL of the newer page, empty if none
-	NextPage        string // URL of the older page, empty if none
-	PrevPageJSON    template.JS
-	NextPageJSON    template.JS
-	ThemeSoundsJSON template.JS // Web Audio preset for this theme (splash + nav)
+	Posts        []postView
+	PrevPage     string // URL of the newer page, empty if none
+	NextPage     string // URL of the older page, empty if none
+	PrevPageJSON template.JS
+	NextPageJSON template.JS
+
+	DefaultTheme      string        // baked into the shell as SNONUX_DEFAULT_THEME
+	AllThemesJSON     template.JS   // [...] of all available theme names, JS literal
+	DefaultTitle      string        // <title> contents for the default theme
+	DefaultHeaderHTML template.HTML // <header> innerHTML for the default theme
+	DefaultSplashHTML template.HTML // #splash-overlay innerHTML for the default theme
+	DefaultPrevText   template.HTML // pagination prev anchor text (theme-styled)
+	DefaultNextText   template.HTML // pagination next anchor text
+	DefaultSoundsJSON template.JS   // default theme's Web Audio preset (literal)
 }
 
 // postView is a render-friendly representation of a post for the HTML template.
@@ -32,23 +44,62 @@ type postView struct {
 	ContentHTML   template.HTML // pre-rendered; trusted — generated by this tool
 }
 
-// Run loads all posts, generates all HTML pages, and writes atom.xml.
+// themeMeta mirrors the JSON structure written by the migration tool and used
+// at runtime by shared.js to swap theme markup in.
+type themeMeta struct {
+	Title           string `json:"title"`
+	HeaderHTML      string `json:"header_html"`
+	SplashInnerHTML string `json:"splash_inner_html"`
+	PrevPageText    string `json:"prev_page_text"`
+	NextPageText    string `json:"next_page_text"`
+}
+
+func loadThemeMeta(name string) (themeMeta, error) {
+	var m themeMeta
+	b, err := templates.ThemeMeta(name)
+	if err != nil {
+		return m, fmt.Errorf("read theme meta %q: %w", name, err)
+	}
+	if err := json.Unmarshal(b, &m); err != nil {
+		return m, fmt.Errorf("parse theme meta %q: %w", name, err)
+	}
+	return m, nil
+}
+
+// allThemesJSON returns a JS array literal of all theme names.
+func allThemesJSON() (template.JS, error) {
+	names, err := templates.ThemeNames()
+	if err != nil {
+		return "", err
+	}
+	b, err := json.Marshal(names)
+	if err != nil {
+		return "", err
+	}
+	return template.JS(b), nil //nolint:gosec // marshalled from a fixed string slice
+}
+
+// Run loads all posts, generates all HTML pages, and writes atom.xml plus the
+// shared CSS/JS bundles and per-theme asset files.
 func Run(cfg *config.Config) error {
 	posts, err := loadAllPosts(cfg.OutputDir)
 	if err != nil {
 		return err
 	}
 
-	// Sort newest-first so page 1 (index.html) has the latest content.
 	sort.Slice(posts, func(i, j int) bool {
 		return posts[i].Timestamp.After(posts[j].Timestamp)
 	})
 
 	pages := paginate(posts, config.PostsPerPage)
 
-	// Combine the theme HTML (which uses {{template "navhints"}} etc.) with the
-	// shared navDefs sub-templates so a single parse call resolves all references.
-	combined := injectSharedHead(getTheme(cfg.Theme)) + "\n" + navDefs
+	// Combine shell.tmpl with nav.tmpl partials so a single parse call resolves
+	// references to splashGate, navhints, navmodal.
+	shellSrc, err := templates.Shell()
+	if err != nil {
+		return fmt.Errorf("load shell template: %w", err)
+	}
+	combined := shellSrc + "\n" + navDefs
 	tmpl, err := template.New("page").Parse(combined)
 	if err != nil {
 		return fmt.Errorf("parse page template: %w", err)
@@ -57,9 +108,25 @@ func Run(cfg *config.Config) error {
 	if err := writeFavicon(cfg.OutputDir); err != nil {
 		return err
 	}
+	if err := writeSharedAssets(cfg.OutputDir); err != nil {
+		return err
+	}
+	if err := writeAllThemeAssets(cfg.OutputDir); err != nil {
+		return err
+	}
+
+	defaultTheme := validThemeName(cfg.Theme)
+	defaultMeta, err := loadThemeMeta(defaultTheme)
+	if err != nil {
+		return err
+	}
+	all, err := allThemesJSON()
+	if err != nil {
+		return err
+	}
 
 	for i, page := range pages {
-		if err := writePage(tmpl, page, i, len(pages), cfg); err != nil {
+		if err := writePage(tmpl, page, i, len(pages), cfg, defaultTheme, defaultMeta, all); err != nil {
 			return err
 		}
 	}
@@ -126,8 +193,8 @@ func pageFilename(index int) string {
 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, cfg.Theme)
+func writePage(tmpl *template.Template, posts []*post.Post, pageIndex, totalPages int, cfg *config.Config, defaultTheme string, defaultMeta themeMeta, all template.JS) error {
+	data := buildPageData(posts, pageIndex, totalPages, defaultTheme, defaultMeta, all)
 
 	filename := pageFilename(pageIndex)
 	path := filepath.Join(cfg.OutputDir, filename)
@@ -146,7 +213,7 @@ func writePage(tmpl *template.Template, posts []*post.Post, pageIndex, totalPage
 }
 
 // buildPageData constructs the template data for a single page.
-func buildPageData(posts []*post.Post, pageIndex, totalPages int, theme string) pageData {
+func buildPageData(posts []*post.Post, pageIndex, totalPages int, defaultTheme string, meta themeMeta, all template.JS) pageData {
 	views := make([]postView, len(posts))
 	for i, p := range posts {
 		views[i] = postView{
@@ -173,12 +240,19 @@ func buildPageData(posts []*post.Post, pageIndex, totalPages int, theme string)
 	}
 
 	return pageData{
-		Posts:           views,
-		PrevPage:        prevPage,
-		NextPage:        nextPage,
-		PrevPageJSON:    jsonStringOrNull(prevPage),
-		NextPageJSON:    jsonStringOrNull(nextPage),
-		ThemeSoundsJSON: themeSoundsJSON(theme),
+		Posts:             views,
+		PrevPage:          prevPage,
+		NextPage:          nextPage,
+		PrevPageJSON:      jsonStringOrNull(prevPage),
+		NextPageJSON:      jsonStringOrNull(nextPage),
+		DefaultTheme:      defaultTheme,
+		AllThemesJSON:     all,
+		DefaultTitle:      meta.Title,
+		DefaultHeaderHTML: template.HTML(meta.HeaderHTML),      //nolint:gosec // source is in-tree theme metadata
+		DefaultSplashHTML: template.HTML(meta.SplashInnerHTML), //nolint:gosec // same
+		DefaultPrevText:   template.HTML(meta.PrevPageText),    //nolint:gosec // same
+		DefaultNextText:   template.HTML(meta.NextPageText),    //nolint:gosec // same
+		DefaultSoundsJSON: themeSoundsJSON(defaultTheme),
 	}
 }
 
@@ -202,3 +276,85 @@ func jsonStringOrNull(s string) template.JS {
 
 	return template.JS(strings.TrimSpace(string(b))) //nolint:gosec // filename is tool-generated
 }
+
+// writeSharedAssets dumps shared.css and shared.js to the output dir. They are
+// linked from every page and cached by browsers across navigations.
+func writeSharedAssets(outputDir string) error {
+	css, err := templates.SharedCSS()
+	if err != nil {
+		return fmt.Errorf("read shared.css: %w", err)
+	}
+	if err := os.WriteFile(filepath.Join(outputDir, "shared.css"), css, 0o644); err != nil {
+		return fmt.Errorf("write shared.css: %w", err)
+	}
+
+	js, err := templates.SharedJS()
+	if err != nil {
+		return fmt.Errorf("read shared.js: %w", err)
+	}
+	if err := os.WriteFile(filepath.Join(outputDir, "shared.js"), js, 0o644); err != nil {
+		return fmt.Errorf("write shared.js: %w", err)
+	}
+
+	return nil
+}
+
+// writeAllThemeAssets copies each theme's CSS, JS, meta.json, and writes its
+// sounds.json to dist/themes/<name>/. shared.js fetches these on theme switch.
+func writeAllThemeAssets(outputDir string) error {
+	names, err := templates.ThemeNames()
+	if err != nil {
+		return err
+	}
+
+	root := filepath.Join(outputDir, "themes")
+	if err := os.MkdirAll(root, 0o755); err != nil {
+		return fmt.Errorf("create themes dir: %w", err)
+	}
+
+	for _, name := range names {
+		dir := filepath.Join(root, name)
+		if err := os.MkdirAll(dir, 0o755); err != nil {
+			return fmt.Errorf("create theme dir %q: %w", name, err)
+		}
+		if err := writeThemeAsset(dir, name); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
+// writeThemeAsset copies the four per-theme files into dir.
+func writeThemeAsset(dir, name string) error {
+	css, err := templates.ThemeCSS(name)
+	if err != nil {
+		return fmt.Errorf("read %s/theme.css: %w", name, err)
+	}
+	if err := os.WriteFile(filepath.Join(dir, "theme.css"), css, 0o644); err != nil {
+		return fmt.Errorf("write %s/theme.css: %w", name, err)
+	}
+
+	js, err := templates.ThemeJS(name)
+	if err != nil {
+		return fmt.Errorf("read %s/theme.js: %w", name, err)
+	}
+	if err := os.WriteFile(filepath.Join(dir, "theme.js"), js, 0o644); err != nil {
+		return fmt.Errorf("write %s/theme.js: %w", name, err)
+	}
+
+	meta, err := templates.ThemeMeta(name)
+	if err != nil {
+		return fmt.Errorf("read %s/meta.json: %w", name, err)
+	}
+	if err := os.WriteFile(filepath.Join(dir, "meta.json"), meta, 0o644); err != nil {
+		return fmt.Errorf("write %s/meta.json: %w", name, err)
+	}
+
+	soundsJSON := themeSoundsJSON(name)
+	if err := os.WriteFile(filepath.Join(dir, "sounds.json"), []byte(soundsJSON), 0o644); err != nil {
+		return fmt.Errorf("write %s/sounds.json: %w", name, err)
+	}
+
+	return nil
+}
diff --git a/internal/generator/generator_test.go b/internal/generator/generator_test.go
index 7b0009c..d477275 100644
--- a/internal/generator/generator_test.go
+++ b/internal/generator/generator_test.go
@@ -179,10 +179,19 @@ func TestBuildPageData_navLinks(t *testing.T) {
 		},
 	}
 
+	meta, err := loadThemeMeta("neon")
+	if err != nil {
+		t.Fatalf("loadThemeMeta: %v", err)
+	}
+	all, err := allThemesJSON()
+	if err != nil {
+		t.Fatalf("allThemesJSON: %v", err)
+	}
+
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			t.Parallel()
-			data := buildPageData([]*post.Post{p}, tt.pageIndex, tt.totalPages, "neon")
+			data := buildPageData([]*post.Post{p}, tt.pageIndex, tt.totalPages, "neon", meta, all)
 			if data.PrevPage != tt.wantPrev {
 				t.Fatalf("PrevPage=%q; want %q", data.PrevPage, tt.wantPrev)
 			}
@@ -202,19 +211,24 @@ func TestBuildPageData_navLinks(t *testing.T) {
 	}
 }
 
-func TestGetTheme_unknownFallsBackToNeon(t *testing.T) {
+func TestValidThemeName_unknownFallsBackToNeon(t *testing.T) {
 	t.Parallel()
-	if got, want := getTheme("no-such-theme-"), getTheme("neon"); got != want {
-		t.Fatal("expected neon fallback")
+	if got := validThemeName("no-such-theme-"); got != "neon" {
+		t.Fatalf("validThemeName(\"no-such-theme-\") = %q; want \"neon\"", got)
+	}
+	if got := validThemeName("matrix"); got != "matrix" {
+		t.Fatalf("validThemeName(\"matrix\") = %q; want \"matrix\"", got)
 	}
 }
 
-func TestInjectSharedHead_addsFaviconLink(t *testing.T) {
+func TestLoadThemeMeta_neonHasFields(t *testing.T) {
 	t.Parallel()
-
-	got := injectSharedHead(getTheme("neon"))
-	if !strings.Contains(got, `rel="icon" href="favicon.ico"`) {
-		t.Fatalf("favicon link missing from theme head")
+	m, err := loadThemeMeta("neon")
+	if err != nil {
+		t.Fatalf("loadThemeMeta(neon): %v", err)
+	}
+	if m.Title == "" || m.HeaderHTML == "" || m.SplashInnerHTML == "" {
+		t.Fatalf("neon meta missing required fields: %+v", m)
 	}
 }
 
diff --git a/internal/generator/templates.go b/internal/generator/templates.go
index f50601a..df854ab 100644
--- a/internal/generator/templates.go
+++ b/internal/generator/templates.go
@@ -1,9 +1,10 @@
 package generator
 
-// HTML theme templates and shared sub-templates live as separate files under
-// internal/generator/templates/{themes,shared}/*.tmpl and are loaded into the
+// The unified shell template, shared CSS/JS bundles, and per-theme asset
+// triples live under internal/generator/templates/ and are loaded into the
 // binary via embed.FS; see internal/generator/templates/embed.go.
 //
-// themes.go exposes the theme registry and getTheme()/ListThemes() helpers.
-// shared.go loads templates/shared/nav.tmpl into navDefs.
-// favicon.go loads templates/shared/favicon_head.tmpl into faviconHeadHTML.
+// themes.go exposes ListThemes()/validThemeName().
+// shared.go loads templates/shared/nav.tmpl into navDefs (splashGate, navhints,
+// navmodal partials called from shell.tmpl).
+// favicon.go generates the favicon.ico binary written into each output dir.
diff --git a/internal/generator/templates/embed.go b/internal/generator/templates/embed.go
index 91ba07f..ac3efbd 100644
--- a/internal/generator/templates/embed.go
+++ b/internal/generator/templates/embed.go
@@ -1,8 +1,8 @@
-// Package templates exposes the embedded HTML theme and shared sub-templates
-// used by the generator. Themes and nav/HTML fragments live as separate files
-// under templates/themes/*.tmpl and templates/shared/*.tmpl so they can be
-// edited without recompiling logic; they are compiled into the binary via
-// //go:embed so snonux still ships as a single self-contained executable.
+// Package templates exposes the embedded HTML shell, shared CSS/JS bundles,
+// and per-theme assets used by the generator. Themes live as directories
+// under templates/themes/<name>/ containing theme.css, theme.js, and meta.json.
+// All assets are compiled into the binary via //go:embed so snonux still ships
+// as a single self-contained executable.
 package templates
 
 import (
@@ -11,24 +11,24 @@ import (
 	"io/fs"
 	"path"
 	"sort"
-	"strings"
 )
 
-//go:embed themes/*.tmpl shared/*.tmpl
+//go:embed shell.tmpl shared/*.tmpl shared/shared.css shared/shared.js themes/*/theme.css themes/*/theme.js themes/*/meta.json
 var FS embed.FS
 
-// Theme reads the raw HTML template body for a named theme.
-// The returned string is the outer page template; shared sub-templates
-// (navhints, navmodal, navscript, etc.) are obtained via Shared().
-func Theme(name string) (string, error) {
-	b, err := FS.ReadFile(path.Join("themes", name+".tmpl"))
+// Shell returns the body of shell.tmpl — the single page template used for
+// every generated HTML page. Theme-specific markup is injected at gen time
+// from the default theme's meta.json (and at runtime by shared.js for any
+// other selected theme).
+func Shell() (string, error) {
+	b, err := FS.ReadFile("shell.tmpl")
 	if err != nil {
-		return "", fmt.Errorf("read theme %q: %w", name, err)
+		return "", fmt.Errorf("read shell.tmpl: %w", err)
 	}
 	return string(b), nil
 }
 
-// Shared reads a named shared sub-template file from shared/*.tmpl.
+// Shared reads a named shared sub-template (currently only "nav").
 func Shared(name string) (string, error) {
 	b, err := FS.ReadFile(path.Join("shared", name+".tmpl"))
 	if err != nil {
@@ -37,8 +37,35 @@ func Shared(name string) (string, error) {
 	return string(b), nil
 }
 
+// SharedCSS returns the bundled CSS that every page links via shared.css.
+// Used by the generator to write dist/shared.css.
+func SharedCSS() ([]byte, error) {
+	return FS.ReadFile("shared/shared.css")
+}
+
+// SharedJS returns the bundled JS that every page references via shared.js.
+// Used by the generator to write dist/shared.js.
+func SharedJS() ([]byte, error) {
+	return FS.ReadFile("shared/shared.js")
+}
+
+// ThemeCSS returns the per-theme stylesheet bytes for the named theme.
+func ThemeCSS(name string) ([]byte, error) {
+	return FS.ReadFile(path.Join("themes", name, "theme.css"))
+}
+
+// ThemeJS returns the per-theme script bytes for the named theme.
+func ThemeJS(name string) ([]byte, error) {
+	return FS.ReadFile(path.Join("themes", name, "theme.js"))
+}
+
+// ThemeMeta returns the per-theme meta.json bytes for the named theme.
+func ThemeMeta(name string) ([]byte, error) {
+	return FS.ReadFile(path.Join("themes", name, "meta.json"))
+}
+
 // ThemeNames returns a sorted list of available theme names derived from the
-// files present under templates/themes/.
+// directories present under templates/themes/.
 func ThemeNames() ([]string, error) {
 	entries, err := fs.ReadDir(FS, "themes")
 	if err != nil {
@@ -47,14 +74,10 @@ func ThemeNames() ([]string, error) {
 
 	names := make([]string, 0, len(entries))
 	for _, e := range entries {
-		if e.IsDir() {
-			continue
-		}
-		n := e.Name()
-		if !strings.HasSuffix(n, ".tmpl") {
+		if !e.IsDir() {
 			continue
 		}
-		names = append(names, strings.TrimSuffix(n, ".tmpl"))
+		names = append(names, e.Name())
 	}
 
 	sort.Strings(names)
diff --git a/internal/generator/templates/shared/favicon_head.tmpl b/internal/generator/templates/shared/favicon_head.tmpl
deleted file mode 100644
index e35bd5d..0000000
--- a/internal/generator/templates/shared/favicon_head.tmpl
+++ /dev/null
@@ -1,2 +0,0 @@
-
-    <link rel="icon" href="favicon.ico" sizes="any">
diff --git a/internal/generator/templates/shared/nav.tmpl b/internal/generator/templates/shared/nav.tmpl
index 346294a..9794f2f 100644
--- a/internal/generator/templates/shared/nav.tmpl
+++ b/internal/generator/templates/shared/nav.tmpl
@@ -45,852 +45,27 @@
 
 {{define "navhints"}}
 <div class="nav-hints" role="region" aria-label="Keyboard shortcuts">
-    <span><kbd>j</kbd><kbd>k</kbd> or <kbd>↑</kbd><kbd>↓</kbd> select post</span>
-    <span><kbd>PgUp</kbd><kbd>PgDn</kbd> scroll</span>
-    <span><kbd>Enter</kbd> or click post to expand</span>
-    <span><kbd>Esc</kbd> close</span>
-    <span><kbd>h</kbd><kbd>l</kbd> or <kbd>←</kbd><kbd>→</kbd> change page</span>
-    <span><kbd>w</kbd> wild mode</span>
+    <div class="nav-hints-row nav-hints-nav">
+        <span class="nav-hints-label">nav</span>
+        <span><kbd>j</kbd><kbd>k</kbd><kbd>↑</kbd><kbd>↓</kbd> post</span>
+        <span><kbd>h</kbd><kbd>l</kbd><kbd>←</kbd><kbd>→</kbd> page</span>
+        <span><kbd>PgUp</kbd><kbd>PgDn</kbd> scroll</span>
+        <span><kbd>Enter</kbd> open</span>
+        <span><kbd>Esc</kbd> close</span>
+    </div>
+    <div class="nav-hints-row nav-hints-fx">
+        <span class="nav-hints-label">fx</span>
+        <button type="button" class="nav-fx-button" data-sno-fx="wild" aria-pressed="false" aria-label="Toggle wild mode"><kbd>w</kbd> wild</button>
+        <button type="button" class="nav-fx-button" data-sno-fx="crt" aria-pressed="false" aria-label="Toggle CRT effect"><kbd>c</kbd> crt</button>
+        <button type="button" class="nav-fx-button" data-sno-fx="ghost" aria-pressed="false" aria-label="Toggle ghost mode"><kbd>g</kbd> ghost</button>
+        <button type="button" class="nav-fx-button" data-sno-fx="flash" aria-label="Trigger flash effect"><kbd>p</kbd> flash</button>
+        <button type="button" class="nav-fx-button" data-sno-fx="scatter" aria-label="Trigger scatter effect"><kbd>x</kbd> scatter</button>
+        <span class="nav-hints-spacer"><kbd>t</kbd> theme</span>
+        <select id="sno-theme-select" class="nav-fx-button" aria-label="Theme"></select>
+    </div>
 </div>
 {{end}}
 
-{{define "navSharedCSSInner"}}
-/* Non-active posts are translucent so the WebGL background shows through.
-   The active/highlighted post snaps to full opacity for clear reading.
-   Hover on a non-active post partially reveals it before selection. */
-.post { position:relative; }
-.post:not(.post-active) { opacity: 0.55; transition: opacity 0.25s ease; }
-.post:not(.post-active):hover { opacity: 0.85; }
-.post.post-active { opacity: 1 !important; transition: opacity 0.15s ease; }
-/* Thumbnail sizing in list view; modal overrides to full width. */
-.post-image { max-height:220px; max-width:100%; object-fit:cover; cursor:pointer; }
-#post-modal .post-image { max-height:none; width:100%; max-width:100%; object-fit:contain; cursor:default; }
-/* Semi-transparent modal backdrop so the WebGL scene stays visible behind
-   the expanded post. Theme-specific modal-inner keeps its own background. */
-.post-modal { background:rgba(0,0,0,0.55) !important; backdrop-filter:blur(6px) !important; }
-#post-modal.active { display:flex !important; align-items:center; justify-content:center; }
-#post-modal .modal-inner { width:fit-content; max-width:min(100%, 90vw); max-height:calc(100vh - 80px); overflow:auto; margin:0 auto !important; will-change:transform; }
-/* Content area max-width across all themes */
-.overlay { max-width:1200px; margin-left:auto; margin-right:auto; }
-/* Pagination: newer + older in a footer bar (below scrollable posts, like the header) */
-.page-nav-dual { display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
-                gap:clamp(16px,4vw,48px); }
-/* Flex column layout: let #post-content shrink so overflow-y scrolls; footer stays visible */
-#post-content.content { min-height:0; }
-.page-nav-footer { flex-shrink:0; width:100%; box-sizing:border-box; }
-.page-nav-footer .page-nav { margin:0; }
-/* ~Half-height footer bar vs default .page-nav padding */
-.page-nav-footer .page-nav a { padding-top:4px; padding-bottom:4px; }
-/* Shared nav FX keyframes — themes apply these classes for brief effects */
-/* Modal open: post zooms/flies into the modal overlay */
-@keyframes sno-modal-zoom { 0%{transform:scale(0.82) translateY(18px);opacity:0} 60%{transform:scale(1.02) translateY(-3px);opacity:1} 100%{transform:scale(1) translateY(0);opacity:1} }
-@keyframes sno-modal-fly-up { 0%{transform:translateY(60px) scale(0.92);opacity:0} 70%{transform:translateY(-4px) scale(1.01);opacity:1} 100%{transform:translateY(0) scale(1);opacity:1} }
-@keyframes sno-modal-slide-in { 0%{transform:translateX(-40px) scale(0.96);opacity:0} 65%{transform:translateX(4px) scale(1.005);opacity:1} 100%{transform:translateX(0) scale(1);opacity:1} }
-@keyframes sno-modal-expand { 0%{transform:scale(0.05) rotate(-4deg);opacity:0} 55%{transform:scale(1.04) rotate(0.5deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
-.sno-modal-zoom   .modal-inner { animation:sno-modal-zoom    0.36s cubic-bezier(0.22,1,0.36,1) both !important; }
-.sno-modal-fly    .modal-inner { animation:sno-modal-fly-up   0.34s cubic-bezier(0.22,1,0.36,1) both !important; }
-.sno-modal-slide  .modal-inner { animation:sno-modal-slide-in 0.32s cubic-bezier(0.22,1,0.36,1) both !important; }
-.sno-modal-expand .modal-inner { animation:sno-modal-expand   0.4s  cubic-bezier(0.22,1,0.36,1) both !important; }
-@keyframes sno-shake { 0%,100%{transform:translate(0)} 14%{transform:translate(-7px,4px)} 28%{transform:translate(7px,-5px)} 42%{transform:translate(-5px,6px)} 56%{transform:translate(6px,-4px)} 70%{transform:translate(-4px,3px)} 86%{transform:translate(4px,-2px)} }
-@keyframes sno-zoom-fwd { 0%{transform:scale(1)} 40%{transform:scale(1.05)} 100%{transform:scale(1)} }
-@keyframes sno-glitch { 0%,100%{transform:translate(0) skewX(0)} 20%{transform:translate(-5px,0) skewX(-4deg)} 40%{transform:translate(5px,0) skewX(4deg)} 60%{transform:translate(-3px,0)} 80%{transform:translate(3px,0)} }
-@keyframes sno-bounce-left { 0%{transform:translateX(0)} 25%{transform:translateX(-18px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
-@keyframes sno-bounce-right { 0%{transform:translateX(0)} 25%{transform:translateX(18px)} 50%{transform:translateX(-6px)} 75%{transform:translateX(3px)} 100%{transform:translateX(0)} }
-@keyframes sno-bounce-left-wild { 0%{transform:translateX(0) rotate(0)} 15%{transform:translateX(-48px) rotate(-3deg)} 35%{transform:translateX(22px) rotate(2deg)} 55%{transform:translateX(-12px) rotate(-1.2deg)} 75%{transform:translateX(6px) rotate(0.5deg)} 100%{transform:translateX(0) rotate(0)} }
-@keyframes sno-bounce-right-wild { 0%{transform:translateX(0) rotate(0)} 15%{transform:translateX(48px) rotate(3deg)} 35%{transform:translateX(-22px) rotate(-2deg)} 55%{transform:translateX(12px) rotate(1.2deg)} 75%{transform:translateX(-6px) rotate(-0.5deg)} 100%{transform:translateX(0) rotate(0)} }
-.sno-fx-bounce-left  { animation:sno-bounce-left  0.35s cubic-bezier(.36,.07,.19,.97) both !important; }
-.sno-fx-bounce-right { animation:sno-bounce-right 0.35s cubic-bezier(.36,.07,.19,.97) both !important; }
-.sno-fx-bounce-left-wild  { animation:sno-bounce-left-wild  0.5s cubic-bezier(.36,.07,.19,.97) both !important; }
-.sno-fx-bounce-right-wild { animation:sno-bounce-right-wild 0.5s cubic-bezier(.36,.07,.19,.97) both !important; }
-/* Vertical boundary bounce (top/bottom post list) */
-@keyframes sno-bounce-up { 0%{transform:translateY(0)} 25%{transform:translateY(-14px)} 50%{transform:translateY(5px)} 75%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
-@keyframes sno-bounce-down { 0%{transform:translateY(0)} 25%{transform:translateY(14px)} 50%{transform:translateY(-5px)} 75%{transform:translateY(2px)} 100%{transform:translateY(0)} }
-@keyframes sno-bounce-up-wild { 0%{transform:translateY(0) rotate(0)} 15%{transform:translateY(-40px) rotate(-2.5deg)} 35%{transform:translateY(18px) rotate(1.5deg)} 55%{transform:translateY(-9px) rotate(-0.8deg)} 75%{transform:translateY(4px) rotate(0.3deg)} 100%{transform:translateY(0) rotate(0)} }
-@keyframes sno-bounce-down-wild { 0%{transform:translateY(0) rotate(0)} 15%{transform:translateY(40px) rotate(2.5deg)} 35%{transform:translateY(-18px) rotate(-1.5deg)} 55%{transform:translateY(9px) rotate(0.8deg)} 75%{transform:translateY(-4px) rotate(-0.3deg)} 100%{transform:translateY(0) rotate(0)} }
-.sno-fx-bounce-up    { animation:sno-bounce-up   0.35s cubic-bezier(.36,.07,.19,.97) both !important; }
-.sno-fx-bounce-down  { animation:sno-bounce-down 0.35s cubic-bezier(.36,.07,.19,.97) both !important; }
-.sno-fx-bounce-up-wild   { animation:sno-bounce-up-wild   0.5s cubic-bezier(.36,.07,.19,.97) both !important; }
-.sno-fx-bounce-down-wild { animation:sno-bounce-down-wild 0.5s cubic-bezier(.36,.07,.19,.97) both !important; }
-/* Post hover ripple — radial ring emanates from center on hover */
-@keyframes sno-hover-ripple { 0%{transform:translate(-50%,-50%) scale(0);opacity:0.5} 100%{transform:translate(-50%,-50%) scale(1);opacity:0} }
-.post:not(.post-active)::before { content:''; position:absolute; top:50%; left:50%; width:120%; height:120%;
-  border-radius:50%; border:2px solid currentColor; pointer-events:none;
-  transform:translate(-50%,-50%) scale(0); opacity:0; z-index:0; }
-.post:not(.post-active):hover::before { animation:sno-hover-ripple 0.6s ease-out forwards; }
-/* Modal scroll-end flash — brief glow at bottom of modal-inner when scrolled to end */
-@keyframes sno-scroll-end-flash { 0%{opacity:0.7} 100%{opacity:0} }
-.modal-inner .sno-scroll-end { position:sticky; bottom:0; left:0; right:0; height:3px; pointer-events:none;
-  background:linear-gradient(90deg, transparent, currentColor, transparent); opacity:0; }
-.modal-inner .sno-scroll-end.sno-scroll-end-active { animation:sno-scroll-end-flash 0.5s ease-out forwards; }
-/* Idle breathing — gentle glow pulse on active post after inactivity */
-@keyframes sno-idle-breathe { 0%,100%{box-shadow:inherit} 50%{box-shadow:0 0 18px 4px currentColor} }
-.post-active.sno-idle-breathe { animation:sno-idle-breathe 3s ease-in-out infinite; }
-/* First-visit particle burst */
-@keyframes sno-particle-fly { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--px),var(--py)) scale(0);opacity:0} }
-#sno-burst { position:fixed; inset:0; z-index:9999; pointer-events:none; }
-#sno-burst span { position:absolute; width:6px; height:6px; border-radius:50%; background:currentColor;
-  animation:sno-particle-fly var(--pdur) ease-out forwards; animation-delay:var(--pdel); opacity:0; }
-/* Cursor sparkle trail (normal mode) */
-@keyframes sno-sparkle { 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(0);opacity:0} }
-.sno-sparkle { position:fixed; pointer-events:none; z-index:9990; border-radius:50%; }
-/* Post afterimage — ghost of previously selected post */
-@keyframes sno-afterimage { 0%{opacity:0.4;transform:scale(1)} 100%{opacity:0;transform:scale(0.97)} }
-.sno-afterimage { position:absolute; inset:0; pointer-events:none; z-index:0;
-  border:1px solid currentColor; border-radius:inherit; opacity:0; }
-.sno-afterimage-active { animation:sno-afterimage 0.5s ease-out forwards; }
-/* Wild flying emoji */
-@keyframes sno-fly-lr { 0%{transform:translateX(-60px) translateY(var(--fy,0)) rotate(0)} 100%{transform:translateX(calc(100vw + 60px)) translateY(var(--fy,0)) rotate(var(--frot,360deg))} }
-@keyframes sno-fly-rl { 0%{transform:translateX(calc(100vw + 60px)) translateY(var(--fy,0)) rotate(0)} 100%{transform:translateX(-60px) translateY(var(--fy,0)) rotate(var(--frot,-360deg))} }
-#sno-flyzone { position:fixed; inset:0; z-index:9985; pointer-events:none; overflow:hidden; }
-#sno-flyzone span { position:absolute; top:var(--ftop,50%); font-size:clamp(1.2rem,2.5vw,2rem);
-  animation-timing-function:linear; animation-fill-mode:forwards; }
-/* Wild random post flip */
-@keyframes sno-flip-post { 0%{transform:scaleY(1)} 25%{transform:scaleY(-1)} 75%{transform:scaleY(-1)} 100%{transform:scaleY(1)} }
-.sno-fx-flip { animation:sno-flip-post 1.4s ease-in-out both !important; transform-origin:center; }
-/* Wild hue drift on body */
-@keyframes sno-hue-drift { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }
-body.sno-wild-hue { animation:sno-hue-drift 12s linear infinite; }
-@keyframes sno-wild-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
-/* Storm overlay that flickers like distant lightning while wild mode is on */
-@keyframes sno-wild-flicker { 0%,84%,87%,91%,94%,100%{opacity:0} 85%,90%{opacity:0.75} 86%,92%{opacity:0.35} }
-.sno-fx-shake { animation:sno-shake 0.38s cubic-bezier(.36,.07,.19,.97) both !important; transform-origin:center; }
-.sno-fx-zoom  { animation:sno-zoom-fwd 0.32s ease both !important; }
-.sno-fx-glitch { animation:sno-glitch 0.3s ease both !important; }
-/* Wild mode badge — only visible (opacity:1) when .sno-wild-on is present */
-#sno-wild-badge { position:fixed; top:10px; right:12px; z-index:5000; padding:3px 12px;
-  font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; border-radius:2px;
-  pointer-events:none; opacity:0; transition:opacity 0.4s;
-  background:rgba(220,0,0,0.92); color:#fff; border:1px solid rgba(255,100,100,0.8);
-  font-family:monospace; }
-/* Animation only runs when wild is actually on, preventing invisible badge pulse */
-#sno-wild-badge.sno-wild-on { opacity:1; animation:sno-wild-pulse 0.9s ease-in-out infinite; }
-#sno-wild-root { position:fixed; inset:0; z-index:18; pointer-events:none; opacity:0;
-  transition:opacity 0.35s ease; overflow:hidden; isolation:isolate; }
-body.sno-wild-active #sno-wild-root { opacity:1; }
-#sno-wild-root .sno-wild-layer,
-#sno-wild-root #sno-wild-scraps,
-#sno-wild-root #sno-wild-banner,
-#sno-wild-root #sno-wild-ticker { position:absolute; inset:0; }
-#sno-wild-colorwash {
-  background-image:var(--sno-wild-colorwash, none);
-  background-size:var(--sno-wild-colorwash-size, cover);
-  background-position:center;
-  mix-blend-mode:screen;
-  opacity:var(--sno-wild-colorwash-opacity, 0.55);
-  animation:sno-wild-drift 9s ease-in-out infinite;
-}
-#sno-wild-rain {
-  background-image:var(--sno-wild-rain, none);
-  background-size:var(--sno-wild-rain-size, 220px 220px);
-  background-repeat:repeat;
-  background-position:0 0;
-  mix-blend-mode:screen;
-  opacity:var(--sno-wild-rain-opacity, 0.18);
-  animation:sno-wild-rainfall var(--sno-wild-rain-speed, 1.2s) linear infinite;
-}
-#sno-wild-wave {
-  inset:auto 0 -8vh 0;
-  height:70vh;
-  background:var(--sno-wild-wave, none);
-  opacity:var(--sno-wild-wave-opacity, 0.32);
-  transform-origin:50% 100%;
-  animation:sno-wild-surge 6.4s ease-in-out infinite;
-}
-#sno-wild-beacon {
-  background:var(--sno-wild-beacon, none);
-  opacity:var(--sno-wild-beacon-opacity, 0.38);
-  filter:blur(var(--sno-wild-beacon-blur, 0px));
-  mix-blend-mode:screen;
-  animation:sno-wild-lens 4.5s ease-in-out infinite;
-}
-#sno-wild-noise {
-  background-image:
-    linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 100%),
-    linear-gradient(180deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 100%),
-    repeating-linear-gradient(180deg,
-      rgba(255,255,255,0.08) 0 2px,
-      rgba(0,0,0,0.02) 2px 4px,
-      transparent 4px 8px);
-  background-size:3px 3px, 100% 3px, 100% 8px;
-  mix-blend-mode:overlay;
-  opacity:var(--sno-wild-noise-opacity, 0.12);
-  animation:sno-wild-static-shift 0.22s steps(2) infinite;
-}
-#sno-wild-banner {
-  inset:18px auto auto 50%;
-  transform:translateX(-50%);
-  width:max-content;
-  max-width:min(92vw, 920px);
-  height:auto;
-  padding:10px 18px;
-  border:1px solid var(--sno-wild-accent, rgba(255,255,255,0.8));
-  background:var(--sno-wild-banner-bg, rgba(0,0,0,0.82));
-  color:var(--sno-wild-banner-color, #fff);
-  font:700 clamp(0.75rem, 1vw + 0.55rem, 1.15rem)/1.1 monospace;
-  letter-spacing:0.38em;
-  text-transform:uppercase;
-  text-align:center;
-  box-shadow:0 0 28px var(--sno-wild-banner-glow, rgba(255,255,255,0.25));
-  text-shadow:0 0 18px var(--sno-wild-banner-glow, rgba(255,255,255,0.25));
-  white-space:nowrap;
-  animation:sno-wild-banner-flicker 1.2s steps(2) infinite;
-}
-#sno-wild-ticker {
-  inset:auto 0 12px 0;
-  height:30px;
-  overflow:hidden;
-  opacity:0.92;
-  color:var(--sno-wild-accent, #fff);
-  font:700 0.76rem/30px monospace;
-  letter-spacing:0.32em;
-  text-transform:uppercase;
-  text-shadow:0 0 14px var(--sno-wild-banner-glow, rgba(255,255,255,0.28));
-}
-#sno-wild-ticker span {
-  position:absolute;
-  left:0;
-  top:0;
-  display:inline-block;
-  white-space:nowrap;
-  padding-left:100%;
-  animation:sno-wild-marquee 13s linear infinite;
-}
-#sno-wild-scraps span {
-  position:absolute;
-  left:var(--x);
-  top:var(--y);
-  transform:rotate(var(--rot));
-  color:var(--sno-wild-scrap-color, rgba(255,255,255,0.82));
-  font:700 clamp(0.6rem, 0.45rem + 0.45vw, 0.94rem)/1 monospace;
-  letter-spacing:0.24em;
-  text-transform:uppercase;
-  white-space:nowrap;
-  opacity:0;
-  text-shadow:0 0 10px var(--sno-wild-banner-glow, rgba(255,255,255,0.18));
-  animation:sno-wild-scrap var(--dur, 6s) linear infinite;
-  animation-delay:var(--delay, 0s);
-}
-body.sno-wild-active .overlay,
-body.sno-wild-active header,
-body.sno-wild-active .post,
-body.sno-wild-active .page-nav-footer { will-change:transform, filter, opacity; }
-body.sno-wild-active .overlay { position:relative; z-index:24 !important; isolation:isolate; }
-body.sno-wild-active .post:not(.post-active) {
-  opacity:0.32 !important;
-  filter:saturate(0.78) brightness(0.82);
-}
-body.sno-wild-active .post.post-active {
-  z-index:2;
-  opacity:1 !important;
-  background:rgba(0,0,0,0.84) !important;
-  backdrop-filter:blur(14px) saturate(0.94);
-  -webkit-backdrop-filter:blur(14px) saturate(0.94);
-  box-shadow:
-    0 0 0 2px var(--sno-wild-accent, rgba(255,255,255,0.82)),
-    0 18px 44px rgba(0,0,0,0.55),
-    inset 0 0 0 1px rgba(255,255,255,0.06) !important;
-  text-shadow:none !important;
-  filter:none !important;
-  animation:none !important;
-  transform:none !important;
-}
-body.sno-wild-active .post.post-active::after {
-  content:"";
-  position:absolute;
-  inset:0;
-  border-radius:inherit;
-  pointer-events:none;
-  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 38%, rgba(0,0,0,0.08));
-}
-body.sno-wild-active .post.post-active > * { position:relative; z-index:1; }
-@keyframes sno-wild-drift {
-  0%,100% { transform:translate3d(0,0,0) scale(1); }
-  50% { transform:translate3d(-2%,1.5%,0) scale(1.08); }
-}
-@keyframes sno-wild-rainfall {
-  from { background-position:0 0, 0 0, 0 0; }
-  to { background-position:0 280px, 160px 420px, -140px 640px; }
-}
-@keyframes sno-wild-surge {
-  0%,100% { transform:translateY(16%) scaleY(0.92) skewX(0deg); }
-  50% { transform:translateY(-8%) scaleY(1.12) skewX(-4deg); }
-}
-@keyframes sno-wild-lens {
-  0%,100% { transform:scale(0.9); opacity:0.18; }
-  50% { transform:scale(1.24); opacity:0.52; }
-}
-@keyframes sno-wild-static-shift {
-  0% { transform:translate3d(0,0,0); }
-  25% { transform:translate3d(-1.2%,0.6%,0); }
-  50% { transform:translate3d(1%, -0.6%,0); }
-  75% { transform:translate3d(0.7%,1.1%,0); }
-  100% { transform:translate3d(0,0,0); }
-}
-@keyframes sno-wild-banner-flicker {
-  0%,100% { opacity:0.95; }
-  12% { opacity:0.4; }
-  13% { opacity:1; }
-  32% { opacity:0.6; }
-  33% { opacity:1; }
-  61% { opacity:0.48; }
-  62% { opacity:0.98; }
-}
-@keyframes sno-wild-marquee {
-  from { transform:translateX(0); }
-  to { transform:translateX(-46%); }
-}
-@keyframes sno-wild-scrap {
-  0%   { transform:translate3d(0,0,0) rotate(var(--rot)); opacity:0; }
-  12%  { opacity:0.78; }
-  45%  { transform:translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--rot) + 10deg)); opacity:0.92; }
-  100% { transform:translate3d(calc(var(--dx) * -0.75), calc(var(--dy) * -0.75), 0) rotate(calc(var(--rot) - 8deg)); opacity:0.18; }
-}
-@keyframes sno-wild-hard-blink {
-  0%,44%,100% { filter:invert(0) grayscale(0) contrast(1.04); }
-  45%,49% { filter:invert(1) grayscale(1) contrast(1.8); }
-  50%,53% { filter:invert(0) grayscale(0) contrast(1.15); }
-  54%,58% { filter:invert(1) grayscale(1) contrast(1.9); }
-}
-@keyframes sno-wild-jitter {
-  0%,100% { transform:translate(0,0); }
-  20% { transform:translate(-4px,2px); }
-  40% { transform:translate(5px,-4px); }
-  60% { transform:translate(-3px,4px); }
-  80% { transform:translate(3px,-1px); }
-}
-@keyframes sno-wild-roll {
-  0%,100% { transform:translateY(0); }
-  28% { transform:translateY(-12px); }
-  29% { transform:translateY(16px); }
-  58% { transform:translateY(-8px); }
-  59% { transform:translateY(6px); }
-}
-@keyframes sno-wild-collapse {
-  0%,100% { transform:perspective(1200px) rotateX(0deg) scale(1); }
-  50% { transform:perspective(1200px) rotateX(10deg) scale(1.04) translateY(1.2%); }
-}
-@keyframes sno-wild-compress {
-  0%,100% { transform:scaleY(1); }
-  40% { transform:scaleY(0.9); }
-  70% { transform:scaleY(1.08); }
-}
-@keyframes sno-wild-text-burn {
-  0%,100% { text-shadow:0 0 0 transparent; }
-  33% { text-shadow:-2px 0 rgba(255,60,60,0.75), 2px 0 rgba(100,255,255,0.7); }
-  66% { text-shadow:2px 0 rgba(255,240,80,0.75), -2px 0 rgba(90,90,255,0.7); }
-}
-body[data-sno-theme="aurora"] {
-  --sno-wild-colorwash:
-    linear-gradient(112deg, transparent 0 16%, rgba(0,255,179,0.2) 26%, transparent 38%, rgba(0,207,232,0.24) 48%, transparent 60%, rgba(192,132,252,0.24) 70%, transparent 84%),
-    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.18) 0%, rgba(0,255,179,0.08) 20%, transparent 48%);
-  --sno-wild-rain:
-    linear-gradient(180deg, transparent 0 68%, rgba(236,255,255,0.9) 76% 80%, transparent 88%),
-    linear-gradient(180deg, transparent 0 72%, rgba(0,255,179,0.6) 80% 84%, transparent 92%),
-    linear-gradient(180deg, transparent 0 64%, rgba(192,132,252,0.55) 72% 78%, transparent 86%);
-  --sno-wild-rain-size:160px 240px, 220px 280px, 290px 330px;
-  --sno-wild-rain-opacity:0.3;
-  --sno-wild-rain-speed:1.05s;
-  --sno-wild-wave:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,255,179,0.08) 38%, rgba(192,132,252,0.22) 76%, rgba(3,8,17,0.88) 100%);
-  --sno-wild-wave-opacity:0.62;
-  --sno-wild-beacon:radial-gradient(circle at 50% 24%, rgba(255,255,255,0.3) 0%, rgba(0,255,179,0.14) 18%, transparent 54%);
-  --sno-wild-accent:#8fffe7;
-  --sno-wild-banner-bg:rgba(3,16,28,0.74);
-  --sno-wild-banner-color:#e9fff8;
-  --sno-wild-banner-glow:rgba(0,255,179,0.34);
-  --sno-wild-scrap-color:rgba(224,248,240,0.8);
-}
-body.sno-wild-active[data-sno-theme="aurora"] header,
-body.sno-wild-active[data-sno-theme="aurora"] .nav-hints,
-body.sno-wild-active[data-sno-theme="aurora"] .post:not(.post-active),
-body.sno-wild-active[data-sno-theme="aurora"] .page-nav-footer { animation:sno-wild-text-burn 1.9s steps(1) infinite; }
-body[data-sno-theme="brutalist"] {
-  --sno-wild-colorwash:
-    linear-gradient(134deg, transparent 0 24%, rgba(255,255,255,0.08) 24.5% 25.2%, transparent 26% 42%, rgba(255,255,255,0.06) 42.5% 43.2%, transparent 44%),
-    linear-gradient(28deg, transparent 0 30%, rgba(195,32,32,0.22) 30.5% 31.5%, transparent 32% 65%, rgba(255,255,255,0.07) 65.4% 66.2%, transparent 67%),
-    radial-gradient(circle at 50% 10%, rgba(255,130,80,0.18) 0%, transparent 44%);
-  --sno-wild-rain:
-    linear-gradient(180deg, transparent 0 72%, rgba(133,65,22,0.9) 82% 84%, transparent 90%),
-    linear-gradient(180deg, transparent 0 60%, rgba(255,255,255,0.35) 70% 72%, transparent 80%);
-  --sno-wild-rain-size:240px 300px, 340px 360px;
-  --sno-wild-rain-opacity:0.22;
-  --sno-wild-wave:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(24,24,24,0.22) 38%, rgba(92,16,16,0.4) 78%, rgba(0,0,0,0.88) 100%);
-  --sno-wild-accent:#ff5d52;
-  --sno-wild-banner-bg:rgba(12,12,12,0.84);
-  --sno-wild-banner-color:#fff3ef;
-  --sno-wild-banner-glow:rgba(255,93,82,0.28);
-  --sno-wild-scrap-color:rgba(255,214,204,0.82);
-}
-body.sno-wild-active[data-sno-theme="brutalist"] header,
-body.sno-wild-active[data-sno-theme="brutalist"] .nav-hints,
-body.sno-wild-active[data-sno-theme="brutalist"] .post:not(.post-active),
-body.sno-wild-active[data-sno-theme="brutalist"] .page-nav-footer { animation:sno-wild-jitter 0.22s steps(2) infinite; }
-body[data-sno-theme="cosmos"] {
-  --sno-wild-colorwash:
-    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.5) 0 2%, rgba(99,0,164,0.5) 6%, rgba(12,4,33,0.05) 16%, transparent 26%),
-    radial-gradient(circle at 50% 48%, transparent 0 22%, rgba(255,255,255,0.18) 26% 27%, transparent 31%),
-    conic-gradient(from 0deg at 50% 48%, rgba(255,255,255,0.28), transparent 18%, rgba(135,206,250,0.2) 32%, transparent 52%, rgba(255,240,150,0.24) 68%, transparent 84%, rgba(255,255,255,0.28));
-  --sno-wild-rain:
-    linear-gradient(180deg, transparent 0 70%, rgba(255,255,255,0.92) 80% 82%, transparent 90%),
-    linear-gradient(180deg, transparent 0 72%, rgba(180,128,255,0.7) 82% 84%, transparent 92%);
-  --sno-wild-rain-size:260px 280px, 320px 360px;
-  --sno-wild-rain-opacity:0.26;
-  --sno-wild-beacon:radial-gradient(circle at 50% 48%, rgba(255,255,255,0.75) 0%, rgba(155,115,255,0.24) 14%, transparent 36%);
-  --sno-wild-wave:radial-gradient(circle at 50% 110%, rgba(255,255,255,0.12) 0%, rgba(20,6,44,0.52) 45%, rgba(2,2,12,0.94) 100%);
-  --sno-wild-accent:#f8d9ff;
-  --sno-wild-banner-bg:rgba(8,6,24,0.82);
-  --sno-wild-banner-color:#ffffff;
-  --sno-wild-banner-glow:rgba(238,214,255,0.34);
-  --sno-wild-scrap-color:rgba(240,228,255,0.82);
-}
-body.sno-wild-active[data-sno-theme="cosmos"] header,
-body.sno-wild-active[data-sno-theme="cosmos"] .nav-hints,
-body.sno-wild-active[data-sno-theme="cosmos"] .post:not(.post-active),
-body.sno-wild-active[data-sno-theme="cosmos"] .page-nav-footer { animation:sno-wild-collapse 4.2s ease-in-out infinite; }
-body[data-sno-theme="dos"] {
-  --sno-wild-colorwash:
-    linear-gradient(90deg, rgba(255,255,255,0.12) 0 50%, rgba(0,0,0,0.16) 50% 100%),
-    radial-gradient(circle at 50% 14%, rgba(85,255,255,0.18) 0%, transparent 38%);
-  --sno-wild-rain:
-    linear-gradient(180deg, transparent 0 62%, rgba(255,255,255,0.95) 68% 72%, transparent 78%),
-    linear-gradient(180deg, transparent 0 54%, rgba(85,255,255,0.85) 60% 64%, transparent 70%),
-    linear-gradient(180deg, transparent 0 70%, rgba(255,255,85,0.75) 76% 80%, transparent 86%);
-  --sno-wild-rain-size:120px 180px, 190px 220px, 280px 260px;
-  --sno-wild-rain-opacity:0.34;
-  --sno-wild-rain-speed:0.62s;
-  --sno-wild-wave:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,170,0.18) 42%, rgba(0,0,0,0.82) 100%);
-  --sno-wild-accent:#ffff55;
-  --sno-wild-banner-bg:#0000aa;
-  --sno-wild-banner-color:#ffffff;
-  --sno-wild-banner-glow:rgba(85,255,255,0.28);
-  --sno-wild-scrap-color:#ffff55;
-}
-body.sno-wild-active[data-sno-theme="dos"] header,
-body.sno-wild-active[data-sno-theme="dos"] .nav-hints,
-body.sno-wild-active[data-sno-theme="dos"] .post:not(.post-active),
-body.sno-wild-active[data-sno-theme="dos"] .page-nav-footer {
-  animation:sno-wild-hard-blink 0.72s steps(1) infinite, sno-wild-jitter 0.14s steps(2) infinite;
-}
-body[data-sno-theme="matrix"] {
-  --sno-wild-colorwash:
-    radial-gradient(circle at 50% 0%, rgba(0,255,65,0.18) 0%, transparent 42%),
-    linear-gradient(180deg, rgba(0,40,0,0) 0%, rgba(0,255,65,0.09) 60%, rgba(0,0,0,0.62) 100%);
-  --sno-wild-rain:
-    linear-gradient(180deg, transparent 0 54%, rgba(187,255,210,1) 62% 68%, transparent 76%),
-    linear-gradient(180deg, transparent 0 44%, rgba(0,255,65,0.9) 52% 58%, transparent 66%),
-    linear-gradient(180deg, transparent 0 68%, rgba(140,255,180,0.72) 76% 82%, transparent 90%);
-  --sno-wild-rain-size:90px 180px, 130px 210px, 200px 280px;
-  --sno-wild-rain-opacity:0.5;
-  --sno-wild-rain-speed:0.38s;
-  --sno-wild-wave:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,255,65,0.04) 40%, rgba(0,0,0,0.92) 100%);
-  --sno-wild-accent:#98ffac;
-  --sno-wild-banner-bg:rgba(0,10,0,0.78);
-  --sno-wild-banner-color:#d8ffe2;
-  --sno-wild-banner-glow:rgba(0,255,65,0.32);
-  --sno-wild-scrap-color:rgba(152,255,172,0.84);
-}
-body.sno-wild-active[data-sno-theme="matrix"] header,
-body.sno-wild-active[data-sno-theme="matrix"] .nav-hints,
-body.sno-wild-active[data-sno-theme="matrix"] .post:not(.post-active),
-body.sno-wild-active[data-sno-theme="matrix"] .page-nav-footer { animation:sno-wild-text-burn 1.1s steps(1) infinite; }
-body[data-sno-theme="neon"] {
-  --sno-wild-colorwash:
-    conic-gradient(from 90deg at 50% 20%, rgba(255,231,0,0.16), transparent 18%, rgba(255,0,204,0.22) 32%, transparent 50%, rgba(0,245,255,0.24) 66%, transparent 84%, rgba(255,231,0,0.16)),
-    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.22) 0%, rgba(0,245,255,0.08) 26%, transparent 56%);
-  --sno-wild-rain:
-    linear-gradient(118deg, transparent 0 46%, rgba(255,255,255,0.95) 49% 50%, transparent 53%),
-    linear-gradient(62deg, transparent 0 45%, rgba(0,245,255,0.75) 48% 49%, transparent 52%),
-    linear-gradient(132deg, transparent 0 42%, rgba(255,0,204,0.82) 45% 46%, transparent 49%);
-  --sno-wild-rain-size:280px 280px, 360px 360px, 420px 420px;
-  --sno-wild-rain-opacity:0.34;
-  --sno-wild-rain-speed:0.72s;
-  --sno-wild-beacon:radial-gradient(circle at 50% 20%, rgba(255,255,255,0.44) 0%, rgba(255,0,204,0.18) 14%, transparent 42%);
-  --sno-wild-wave:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,0,204,0.08) 44%, rgba(11,0,26,0.88) 100%);
-  --sno-wild-accent:#ffe700;
-  --sno-wild-banner-bg:rgba(11,0,26,0.8);
-  --sno-wild-banner-color:#faff9c;
-  --sno-wild-banner-glow:rgba(255,231,0,0.42);
-  --sno-wild-scrap-color:rgba(255,245,174,0.88);
-}
-body.sno-wild-active[data-sno-theme="neon"] header,
-body.sno-wild-active[data-sno-theme="neon"] .nav-hints,
-body.sno-wild-active[data-sno-theme="neon"] .post:not(.post-active),
-body.sno-wild-active[data-sno-theme="neon"] .page-nav-footer { animation:sno-wild-text-burn 1.3s steps(1) infinite; }
-body[data-sno-theme="ocean"] {
-  --sno-wild-colorwash:
-    radial-gradient(circle at 50% 120%, rgba(0,180,255,0.22) 0%, rgba(0,31,63,0.08) 34%, transparent 56%),
-    radial-gradient(circle at 20% 28%, rgba(147,255,227,0.16) 0%, transparent 32%),
-    radial-gradient(circle at 78% 22%, rgba(120,255,235,0.14) 0%, transparent 30%);
-  --sno-wild-rain:
-    linear-gradient(165deg, transparent 0 58%, rgba(220,255,255,0.95) 62% 66%, transparent 72%),
-    linear-gradient(175deg, transparent 0 48%, rgba(98,255,228,0.72) 52% 56%, transparent 62%),
-    linear-gradient(170deg, transparent 0 68%, rgba(170,255,240,0.78) 72% 76%, transparent 82%);
-  --sno-wild-rain-size:170px 260px, 240px 320px, 310px 360px;
-  --sno-wild-rain-opacity:0.26;
-  --sno-wild-rain-speed:0.82s;
-  --sno-wild-wave:radial-gradient(circle at 50% 100%, rgba(0,255,220,0.3) 0%, rgba(0,80,120,0.32) 28%, rgba(1,20,40,0.92) 74%);
-  --sno-wild-wave-opacity:0.86;
-  --sno-wild-beacon:radial-gradient(circle at 50% 88%, rgba(147,255,227,0.18) 0%, transparent 38%);
-  --sno-wild-accent:#bafcff;
-  --sno-wild-banner-bg:rgba(0,24,42,0.8);
-  --sno-wild-banner-color:#e1ffff;
-  --sno-wild-banner-glow:rgba(120,255,235,0.34);
-  --sno-wild-scrap-color:rgba(202,240,248,0.86);
-}
-body.sno-wild-active[data-sno-theme="ocean"] header,
-body.sno-wild-active[data-sno-theme="ocean"] .nav-hints,
-body.sno-wild-active[data-sno-theme="ocean"] .post:not(.post-active),
-body.sno-wild-active[data-sno-theme="ocean"] .page-nav-footer { animation:sno-wild-collapse 5.2s ease-in-out infinite; }
-body[data-sno-theme="plasma"] {
-  --sno-wild-colorwash:
-    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.66) 0%, rgba(165,230,255,0.18) 10%, transparent 24%),
-    conic-gradient(from 0deg at 50% 48%, rgba(255,255,255,0.28), rgba(157,255,255,0.16), rgba(251,146,255,0.28), rgba(255,255,255,0.28)),
-    radial-gradient(circle at 50% 110%, rgba(65,14,90,0.34) 0%, transparent 52%);
-  --sno-wild-rain:
-    linear-gradient(180deg, transpare