@mindexec/cli 0.2.476 → 0.2.478

package/wwwroot/_content/MindExecution.Shared/js/background-themes.js

@@ -6,29 +6,29 @@
         return;
     }
 
-    const THREE = globalThis.THREE;
-    let plusTexture = null; // Reusable '+' texture for SpatialGrid
-    const THEME_ANIMATION_MODE = Object.freeze({
-        None: 'none',
-        Camera: 'camera',
-        Continuous: 'continuous'
-    });
-    const THEME_ANIMATION_MODE_BY_NAME = Object.freeze({
-        SpatialGrid2D: THEME_ANIMATION_MODE.None,
-        GridPlane: THEME_ANIMATION_MODE.None,
-        XYGrid: THEME_ANIMATION_MODE.None,
-        SpinningBoxes: THEME_ANIMATION_MODE.Continuous,
-        Space3D: THEME_ANIMATION_MODE.Continuous,
-        SpiritFlow: THEME_ANIMATION_MODE.Continuous,
-        None: THEME_ANIMATION_MODE.None
-    });
-    const THEME_CAMERA_EPSILON = 0.001;
-    const THEME_SURFACE_BG = 0xe3e7ee;
-    const THEME_PLAIN_BG = 0xe8edf3;
-    const THEME_GRID_COLOR = 0xaab3bf;
-    const THEME_GRID_COLOR_SOFT = 0xaeb6c0;
-
-    // --- Helper 1: create '+' texture (for SpatialGrid) ---
+    const THREE = globalThis.THREE;
+    let plusTexture = null; // Reusable '+' texture for SpatialGrid
+    const THEME_ANIMATION_MODE = Object.freeze({
+        None: 'none',
+        Camera: 'camera',
+        Continuous: 'continuous'
+    });
+    const THEME_ANIMATION_MODE_BY_NAME = Object.freeze({
+        SpatialGrid2D: THEME_ANIMATION_MODE.None,
+        GridPlane: THEME_ANIMATION_MODE.None,
+        XYGrid: THEME_ANIMATION_MODE.None,
+        SpinningBoxes: THEME_ANIMATION_MODE.Continuous,
+        Space3D: THEME_ANIMATION_MODE.Continuous,
+        SpiritFlow: THEME_ANIMATION_MODE.Continuous,
+        None: THEME_ANIMATION_MODE.None
+    });
+    const THEME_CAMERA_EPSILON = 0.001;
+    const THEME_SURFACE_BG = 0xe3e7ee;
+    const THEME_PLAIN_BG = 0xe8edf3;
+    const THEME_GRID_COLOR = 0xaab3bf;
+    const THEME_GRID_COLOR_SOFT = 0xaeb6c0;
+
+    // --- Helper 1: create '+' texture (for SpatialGrid) ---
     function createPlusTexture() {
         if (plusTexture) return plusTexture; // Reuse if already created
 
@@ -36,8 +36,8 @@
         canvas.width = 64;
         canvas.height = 64;
         const ctx = canvas.getContext('2d');
-        // Neutral gray so it remains visible on the darker default canvas.
-        ctx.fillStyle = '#6f7782';
+        // Neutral gray so it remains visible on the darker default canvas.
+        ctx.fillStyle = '#6f7782';
         ctx.fillRect(28, 4, 8, 56);
         ctx.fillRect(4, 28, 56, 8);
 
@@ -48,11 +48,11 @@
     }
 
     // --- Helper 2: dispose theme resources ---
-    function disposeThemeObject(themeObject) {
-        if (!themeObject) return;
-        if (typeof themeObject.customDispose === 'function') {
-            themeObject.customDispose();
-            return;
+    function disposeThemeObject(themeObject) {
+        if (!themeObject) return;
+        if (typeof themeObject.customDispose === 'function') {
+            themeObject.customDispose();
+            return;
         }
         themeObject.traverse(child => {
             if (child.geometry) child.geometry.dispose();
@@ -63,256 +63,256 @@
                     if (child.material.map) child.material.map.dispose();
                     child.material.dispose();
                 }
-            }
-        });
-    }
-
-    function setThemeAnimationMode(themeObject, mode) {
-        if (!themeObject) return themeObject;
-        if (!themeObject.userData) {
-            themeObject.userData = {};
-        }
-        themeObject.userData.backgroundThemeAnimationMode = mode;
-        return themeObject;
-    }
-
-    function getThemeAnimationMode(themeName, themeObject) {
-        const objectMode = themeObject?.userData?.backgroundThemeAnimationMode;
-        if (objectMode) {
-            return objectMode;
-        }
-        return THEME_ANIMATION_MODE_BY_NAME[themeName] || THEME_ANIMATION_MODE.None;
-    }
-
-    function readFiniteNumber(value, fallback = 0) {
-        const number = Number(value);
-        return Number.isFinite(number) ? number : fallback;
-    }
-
-    function captureThemeCameraSignature(camera) {
-        if (!camera) return null;
-        return {
-            x: readFiniteNumber(camera.position?.x),
-            y: readFiniteNumber(camera.position?.y),
-            z: readFiniteNumber(camera.position?.z),
-            rx: readFiniteNumber(camera.rotation?.x),
-            ry: readFiniteNumber(camera.rotation?.y),
-            rz: readFiniteNumber(camera.rotation?.z),
-            zoom: readFiniteNumber(camera.zoom, 1),
-            fov: readFiniteNumber(camera.fov),
-            aspect: readFiniteNumber(camera.aspect)
-        };
-    }
-
-    function hasThemeCameraChanged(previous, next) {
-        if (!previous || !next) return true;
-        return Object.keys(next).some(key => Math.abs(next[key] - previous[key]) > THEME_CAMERA_EPSILON);
-    }
-
-    function getThemeAnimationState(themeObject) {
-        if (!themeObject) return null;
-        if (!themeObject.userData) {
-            themeObject.userData = {};
-        }
-        if (!themeObject.userData.backgroundThemeAnimationState) {
-            themeObject.userData.backgroundThemeAnimationState = {
-                lastCameraSignature: null
-            };
-        }
-        return themeObject.userData.backgroundThemeAnimationState;
-    }
-
-    function shouldAnimateTheme(themeName, themeObject, camera, options = {}) {
-        if (!themeObject || typeof themeObject.animate !== 'function') {
-            return false;
-        }
-        if (themeObject.userData?.localSnapGrid === true) {
-            return false;
-        }
-
-        const mode = getThemeAnimationMode(themeName, themeObject);
-        if (mode === THEME_ANIMATION_MODE.Continuous) {
-            return true;
-        }
-        if (mode === THEME_ANIMATION_MODE.None) {
-            return options.force === true;
-        }
-
-        const state = getThemeAnimationState(themeObject);
-        const nextSignature = captureThemeCameraSignature(camera);
-        return options.force === true || hasThemeCameraChanged(state?.lastCameraSignature, nextSignature);
-    }
-
-    function runThemeAnimationIfNeeded(themeName, themeObject, camera, options = {}) {
-        if (!shouldAnimateTheme(themeName, themeObject, camera, options)) {
-            return false;
-        }
-
-        themeObject.animate(camera, options);
-
-        const mode = getThemeAnimationMode(themeName, themeObject);
-        if (mode === THEME_ANIMATION_MODE.Camera || mode === THEME_ANIMATION_MODE.None) {
-            const state = getThemeAnimationState(themeObject);
-            if (state) {
-                state.lastCameraSignature = captureThemeCameraSignature(camera);
-            }
-        }
-
-        return true;
-    }
-
-    function resolveThemeGridColor(colorValue, fallback = THEME_GRID_COLOR) {
-        if (colorValue && colorValue.isColor) {
-            return colorValue.clone();
-        }
-
-        try {
-            return new THREE.Color(colorValue ?? fallback);
-        } catch {
-            return new THREE.Color(fallback);
-        }
-    }
-
-    function setInfiniteGridHelperOpacity(gridHelper, opacityFactor, baseSmallOpacity, baseLargeOpacity) {
-        if (!gridHelper || !gridHelper.children) return;
-
-        const visible = opacityFactor > 0.01;
-        gridHelper.visible = visible;
-        if (!visible) {
-            return;
-        }
-
-        if (gridHelper.children[0]?.material) {
-            gridHelper.children[0].material.opacity = baseSmallOpacity * opacityFactor;
-        }
-        if (gridHelper.children[1]?.material) {
-            gridHelper.children[1].material.opacity = baseLargeOpacity * opacityFactor;
-        }
-    }
-
-    function getAdaptiveXYGridOpacityFactors(cameraZ) {
-        if (cameraZ < 1800) {
-            return { fine: 1.0, coarse: 0.0, far: 0.0 };
-        }
-        if (cameraZ < 3600) {
-            const t = (cameraZ - 1800) / 1800;
-            return { fine: 1.0 - t, coarse: t, far: 0.0 };
-        }
-        if (cameraZ < 12000) {
-            return { fine: 0.0, coarse: 1.0, far: 0.0 };
-        }
-        if (cameraZ < 22000) {
-            const t = (cameraZ - 12000) / 10000;
-            return { fine: 0.0, coarse: 1.0 - t, far: t };
-        }
-        if (cameraZ < 50000) {
-            return { fine: 0.0, coarse: 0.0, far: 0.9 };
-        }
-        if (cameraZ < 80000) {
-            const t = (cameraZ - 50000) / 30000;
-            return { fine: 0.0, coarse: 0.0, far: 0.9 - (t * 0.35) };
-        }
-
-        return { fine: 0.0, coarse: 0.0, far: 0.55 };
-    }
-
-    function createAdaptiveXYGridOverlay(colorValue, options = {}) {
-        const settings = {
-            fineDistance: 45000,
-            coarseDistance: 120000,
-            farDistance: 320000,
-            fineSmallOpacity: 0.4,
-            fineLargeOpacity: 0.25,
-            coarseSmallOpacity: 0.34,
-            coarseLargeOpacity: 0.22,
-            farSmallOpacity: 0.26,
-            farLargeOpacity: 0.16,
-            ...options
-        };
-
-        if (settings.localCssOnly === true) {
-            return createLocalSnapGridTheme(null, {
-                themeAlias: settings.themeAlias || 'AdaptiveLocalSnapGrid',
-                localSnapGridStyle: settings.localSnapGridStyle || 'line'
-            });
-        }
-
-        const overlayGroup = new THREE.Group();
-        const color = resolveThemeGridColor(colorValue, THEME_GRID_COLOR);
-        const tmp = new THREE.Vector3();
-        const grids = [
-            {
-                key: 'fine',
-                helper: new window.InfiniteGridHelper(10, 100, color.clone(), settings.fineDistance, 'xyz'),
-                snap: 100,
-                baseSmallOpacity: settings.fineSmallOpacity,
-                baseLargeOpacity: settings.fineLargeOpacity
-            },
-            {
-                key: 'coarse',
-                helper: new window.InfiniteGridHelper(100, 1000, color.clone(), settings.coarseDistance, 'xyz'),
-                snap: 1000,
-                baseSmallOpacity: settings.coarseSmallOpacity,
-                baseLargeOpacity: settings.coarseLargeOpacity
-            },
-            {
-                key: 'far',
-                helper: new window.InfiniteGridHelper(1000, 10000, color.clone(), settings.farDistance, 'xyz'),
-                snap: 10000,
-                baseSmallOpacity: settings.farSmallOpacity,
-                baseLargeOpacity: settings.farLargeOpacity
-            }
-        ];
-
-        grids.forEach((grid, index) => {
-            grid.helper.visible = index === 0;
-            overlayGroup.add(grid.helper);
-        });
-
-        overlayGroup.animate = (camera) => {
-            if (!camera) return;
-
-            tmp.copy(camera.position);
-            tmp.z = 0;
-
-            grids.forEach(grid => {
-                const snappedX = Math.round(tmp.x / grid.snap) * grid.snap;
-                const snappedY = Math.round(tmp.y / grid.snap) * grid.snap;
-                grid.helper.position.set(snappedX, snappedY, 0);
-            });
-
-            const factors = getAdaptiveXYGridOpacityFactors(camera.position.z);
-            grids.forEach(grid => {
-                setInfiniteGridHelperOpacity(
-                    grid.helper,
-                    factors[grid.key] || 0,
-                    grid.baseSmallOpacity,
-                    grid.baseLargeOpacity);
-            });
-        };
-
-        return setThemeAnimationMode(overlayGroup, THEME_ANIMATION_MODE.Camera);
-    }
-
-    function createLocalSnapGridTheme(scene, options = {}) {
-        const themeGroup = new THREE.Group();
-        themeGroup.visible = false;
-        themeGroup.userData.lightweightAdaptiveGrid = true;
-        themeGroup.userData.localSnapGrid = true;
-        themeGroup.userData.localSnapGridStyle = options.localSnapGridStyle || 'line';
-        themeGroup.userData.localSnapGridRadiusPx = 250;
-        themeGroup.userData.themeAlias = options.themeAlias || 'LocalSnapGrid';
-        themeGroup.userData.localSnapGridBackgroundColor = options.backgroundColor;
-        themeGroup.animate = () => { };
-        return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.None);
-    }
-
-    // --- Theme definitions ---
+            }
+        });
+    }
+
+    function setThemeAnimationMode(themeObject, mode) {
+        if (!themeObject) return themeObject;
+        if (!themeObject.userData) {
+            themeObject.userData = {};
+        }
+        themeObject.userData.backgroundThemeAnimationMode = mode;
+        return themeObject;
+    }
+
+    function getThemeAnimationMode(themeName, themeObject) {
+        const objectMode = themeObject?.userData?.backgroundThemeAnimationMode;
+        if (objectMode) {
+            return objectMode;
+        }
+        return THEME_ANIMATION_MODE_BY_NAME[themeName] || THEME_ANIMATION_MODE.None;
+    }
+
+    function readFiniteNumber(value, fallback = 0) {
+        const number = Number(value);
+        return Number.isFinite(number) ? number : fallback;
+    }
+
+    function captureThemeCameraSignature(camera) {
+        if (!camera) return null;
+        return {
+            x: readFiniteNumber(camera.position?.x),
+            y: readFiniteNumber(camera.position?.y),
+            z: readFiniteNumber(camera.position?.z),
+            rx: readFiniteNumber(camera.rotation?.x),
+            ry: readFiniteNumber(camera.rotation?.y),
+            rz: readFiniteNumber(camera.rotation?.z),
+            zoom: readFiniteNumber(camera.zoom, 1),
+            fov: readFiniteNumber(camera.fov),
+            aspect: readFiniteNumber(camera.aspect)
+        };
+    }
+
+    function hasThemeCameraChanged(previous, next) {
+        if (!previous || !next) return true;
+        return Object.keys(next).some(key => Math.abs(next[key] - previous[key]) > THEME_CAMERA_EPSILON);
+    }
+
+    function getThemeAnimationState(themeObject) {
+        if (!themeObject) return null;
+        if (!themeObject.userData) {
+            themeObject.userData = {};
+        }
+        if (!themeObject.userData.backgroundThemeAnimationState) {
+            themeObject.userData.backgroundThemeAnimationState = {
+                lastCameraSignature: null
+            };
+        }
+        return themeObject.userData.backgroundThemeAnimationState;
+    }
+
+    function shouldAnimateTheme(themeName, themeObject, camera, options = {}) {
+        if (!themeObject || typeof themeObject.animate !== 'function') {
+            return false;
+        }
+        if (themeObject.userData?.localSnapGrid === true) {
+            return false;
+        }
+
+        const mode = getThemeAnimationMode(themeName, themeObject);
+        if (mode === THEME_ANIMATION_MODE.Continuous) {
+            return true;
+        }
+        if (mode === THEME_ANIMATION_MODE.None) {
+            return options.force === true;
+        }
+
+        const state = getThemeAnimationState(themeObject);
+        const nextSignature = captureThemeCameraSignature(camera);
+        return options.force === true || hasThemeCameraChanged(state?.lastCameraSignature, nextSignature);
+    }
+
+    function runThemeAnimationIfNeeded(themeName, themeObject, camera, options = {}) {
+        if (!shouldAnimateTheme(themeName, themeObject, camera, options)) {
+            return false;
+        }
+
+        themeObject.animate(camera, options);
+
+        const mode = getThemeAnimationMode(themeName, themeObject);
+        if (mode === THEME_ANIMATION_MODE.Camera || mode === THEME_ANIMATION_MODE.None) {
+            const state = getThemeAnimationState(themeObject);
+            if (state) {
+                state.lastCameraSignature = captureThemeCameraSignature(camera);
+            }
+        }
+
+        return true;
+    }
+
+    function resolveThemeGridColor(colorValue, fallback = THEME_GRID_COLOR) {
+        if (colorValue && colorValue.isColor) {
+            return colorValue.clone();
+        }
+
+        try {
+            return new THREE.Color(colorValue ?? fallback);
+        } catch {
+            return new THREE.Color(fallback);
+        }
+    }
+
+    function setInfiniteGridHelperOpacity(gridHelper, opacityFactor, baseSmallOpacity, baseLargeOpacity) {
+        if (!gridHelper || !gridHelper.children) return;
+
+        const visible = opacityFactor > 0.01;
+        gridHelper.visible = visible;
+        if (!visible) {
+            return;
+        }
+
+        if (gridHelper.children[0]?.material) {
+            gridHelper.children[0].material.opacity = baseSmallOpacity * opacityFactor;
+        }
+        if (gridHelper.children[1]?.material) {
+            gridHelper.children[1].material.opacity = baseLargeOpacity * opacityFactor;
+        }
+    }
+
+    function getAdaptiveXYGridOpacityFactors(cameraZ) {
+        if (cameraZ < 1800) {
+            return { fine: 1.0, coarse: 0.0, far: 0.0 };
+        }
+        if (cameraZ < 3600) {
+            const t = (cameraZ - 1800) / 1800;
+            return { fine: 1.0 - t, coarse: t, far: 0.0 };
+        }
+        if (cameraZ < 12000) {
+            return { fine: 0.0, coarse: 1.0, far: 0.0 };
+        }
+        if (cameraZ < 22000) {
+            const t = (cameraZ - 12000) / 10000;
+            return { fine: 0.0, coarse: 1.0 - t, far: t };
+        }
+        if (cameraZ < 50000) {
+            return { fine: 0.0, coarse: 0.0, far: 0.9 };
+        }
+        if (cameraZ < 80000) {
+            const t = (cameraZ - 50000) / 30000;
+            return { fine: 0.0, coarse: 0.0, far: 0.9 - (t * 0.35) };
+        }
+
+        return { fine: 0.0, coarse: 0.0, far: 0.55 };
+    }
+
+    function createAdaptiveXYGridOverlay(colorValue, options = {}) {
+        const settings = {
+            fineDistance: 45000,
+            coarseDistance: 120000,
+            farDistance: 320000,
+            fineSmallOpacity: 0.4,
+            fineLargeOpacity: 0.25,
+            coarseSmallOpacity: 0.34,
+            coarseLargeOpacity: 0.22,
+            farSmallOpacity: 0.26,
+            farLargeOpacity: 0.16,
+            ...options
+        };
+
+        if (settings.localCssOnly === true) {
+            return createLocalSnapGridTheme(null, {
+                themeAlias: settings.themeAlias || 'AdaptiveLocalSnapGrid',
+                localSnapGridStyle: settings.localSnapGridStyle || 'line'
+            });
+        }
+
+        const overlayGroup = new THREE.Group();
+        const color = resolveThemeGridColor(colorValue, THEME_GRID_COLOR);
+        const tmp = new THREE.Vector3();
+        const grids = [
+            {
+                key: 'fine',
+                helper: new window.InfiniteGridHelper(10, 100, color.clone(), settings.fineDistance, 'xyz'),
+                snap: 100,
+                baseSmallOpacity: settings.fineSmallOpacity,
+                baseLargeOpacity: settings.fineLargeOpacity
+            },
+            {
+                key: 'coarse',
+                helper: new window.InfiniteGridHelper(100, 1000, color.clone(), settings.coarseDistance, 'xyz'),
+                snap: 1000,
+                baseSmallOpacity: settings.coarseSmallOpacity,
+                baseLargeOpacity: settings.coarseLargeOpacity
+            },
+            {
+                key: 'far',
+                helper: new window.InfiniteGridHelper(1000, 10000, color.clone(), settings.farDistance, 'xyz'),
+                snap: 10000,
+                baseSmallOpacity: settings.farSmallOpacity,
+                baseLargeOpacity: settings.farLargeOpacity
+            }
+        ];
+
+        grids.forEach((grid, index) => {
+            grid.helper.visible = index === 0;
+            overlayGroup.add(grid.helper);
+        });
+
+        overlayGroup.animate = (camera) => {
+            if (!camera) return;
+
+            tmp.copy(camera.position);
+            tmp.z = 0;
+
+            grids.forEach(grid => {
+                const snappedX = Math.round(tmp.x / grid.snap) * grid.snap;
+                const snappedY = Math.round(tmp.y / grid.snap) * grid.snap;
+                grid.helper.position.set(snappedX, snappedY, 0);
+            });
+
+            const factors = getAdaptiveXYGridOpacityFactors(camera.position.z);
+            grids.forEach(grid => {
+                setInfiniteGridHelperOpacity(
+                    grid.helper,
+                    factors[grid.key] || 0,
+                    grid.baseSmallOpacity,
+                    grid.baseLargeOpacity);
+            });
+        };
+
+        return setThemeAnimationMode(overlayGroup, THEME_ANIMATION_MODE.Camera);
+    }
+
+    function createLocalSnapGridTheme(scene, options = {}) {
+        const themeGroup = new THREE.Group();
+        themeGroup.visible = false;
+        themeGroup.userData.lightweightAdaptiveGrid = true;
+        themeGroup.userData.localSnapGrid = true;
+        themeGroup.userData.localSnapGridStyle = options.localSnapGridStyle || 'line';
+        themeGroup.userData.localSnapGridRadiusPx = 250;
+        themeGroup.userData.themeAlias = options.themeAlias || 'LocalSnapGrid';
+        themeGroup.userData.localSnapGridBackgroundColor = options.backgroundColor;
+        themeGroup.animate = () => { };
+        return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.None);
+    }
+
+    // --- Theme definitions ---
     const themes = {
         // Theme 1: SpatialGrid (3D dots + '+' markers)
         'SpatialGrid3D': {
             create: (scene) => {
-                scene.background = new THREE.Color(THEME_SURFACE_BG);
+                scene.background = new THREE.Color(THEME_SURFACE_BG);
                 const gridRange = 50, gridStep = 1, markerStep = 10;
                 const markerSize = 0.5, dotSize = 0.1;
                 const dotVertices = [], markerVertices = [];
@@ -338,34 +338,34 @@
             dispose: (themeObject) => { disposeThemeObject(themeObject); }
         },
 
-        // Theme 2: SpatialGrid2D (lightweight adaptive grid on the XY plane)
-        'SpatialGrid2D': {
-            create: (scene) => {
-                return createLocalSnapGridTheme(scene, {
-                    themeAlias: 'SpatialGrid2D',
-                    localSnapGridStyle: 'dot',
-                    backgroundColor: THEME_SURFACE_BG
-                });
-            },
-            dispose: (themeObject) => { disposeThemeObject(themeObject); }
-        },
-
-        // Theme 3: GridPlane (basic 2D grid - rendered by the local CSS snap grid)
-        'GridPlane': {
-            create: (scene) => {
-                return createLocalSnapGridTheme(scene, {
-                    themeAlias: 'GridPlane',
-                    localSnapGridStyle: 'line',
-                    backgroundColor: THEME_PLAIN_BG
-                });
-            },
-            dispose: (themeObject) => { disposeThemeObject(themeObject); }
-        },
+        // Theme 2: SpatialGrid2D (lightweight adaptive grid on the XY plane)
+        'SpatialGrid2D': {
+            create: (scene) => {
+                return createLocalSnapGridTheme(scene, {
+                    themeAlias: 'SpatialGrid2D',
+                    localSnapGridStyle: 'dot',
+                    backgroundColor: THEME_SURFACE_BG
+                });
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 3: GridPlane (basic 2D grid - rendered by the local CSS snap grid)
+        'GridPlane': {
+            create: (scene) => {
+                return createLocalSnapGridTheme(scene, {
+                    themeAlias: 'GridPlane',
+                    localSnapGridStyle: 'line',
+                    backgroundColor: THEME_PLAIN_BG
+                });
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
 
         // Theme 4: SpinningBoxes (reuses 3d-model-viewer logic)
         'SpinningBoxes': {
             create: (scene) => {
-                scene.background = new THREE.Color(THEME_SURFACE_BG);
+                scene.background = new THREE.Color(THEME_SURFACE_BG);
 
                 const themeGroup = new THREE.Group();
 
@@ -407,18 +407,18 @@
                         light.position.y = Math.cos(time * 0.5) * 2000;
                         light.position.z = Math.cos(time * 0.3) * 2000 - 1000;
                     }
-                };
-                themeGroup.customDispose = () => { disposeThemeObject(themeGroup); themeGroup.userData = {}; themeGroup.animate = undefined; themeGroup.customDispose = undefined; };
-
-                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
-            },
+                };
+                themeGroup.customDispose = () => { disposeThemeObject(themeGroup); themeGroup.userData = {}; themeGroup.animate = undefined; themeGroup.customDispose = undefined; };
+
+                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
+            },
             dispose: (themeObject) => { if (typeof themeObject?.customDispose === 'function') { themeObject.customDispose(); } else { disposeThemeObject(themeObject); } }
         },
 
         // Theme 5: FloorBoxes (boxes placed on the XZ plane)
         'FloorBoxes': {
             create: (scene) => {
-                scene.background = new THREE.Color(THEME_SURFACE_BG);
+                scene.background = new THREE.Color(THEME_SURFACE_BG);
 
                 const themeGroup = new THREE.Group();
 
@@ -482,1151 +482,1151 @@
             }
         },
 
-        // Theme 6: XYGrid (distance-based auto LOD grid)
-        'XYGrid': {
-            create: (scene) => {
-                return createLocalSnapGridTheme(scene, {
-                    themeAlias: 'XYGrid',
-                    localSnapGridStyle: 'line',
-                    backgroundColor: THEME_PLAIN_BG
-                });
-            },
-            dispose: (themeObject) => { disposeThemeObject(themeObject); }
-        },
-
-        // Theme 7: Core Particles (inverted galaxy shader particles + faint XYGrid overlay)
-        'Space3D': {
-            create: (scene, renderer) => {
-                scene.background = new THREE.Color(THEME_PLAIN_BG);
-
-                const themeGroup = new THREE.Group();
-                const simSize = 64;
-                const pointCount = simSize * simSize;
-                const resolution = new THREE.Vector2(simSize, simSize);
-                const galaxyCount = 2;
-                const galaxyMass = 0.000075;
-                const galaxyHaloSize = 6;
-                const renderTargetOptions = {
-                    wrapS: THREE.ClampToEdgeWrapping,
-                    wrapT: THREE.ClampToEdgeWrapping,
-                    minFilter: THREE.NearestFilter,
-                    magFilter: THREE.NearestFilter,
-                    format: THREE.RGBAFormat,
-                    type: THREE.FloatType,
-                    depthBuffer: false,
-                    stencilBuffer: false
-                };
-
-                const createRenderTarget = () => {
-                    const target = new THREE.WebGLRenderTarget(simSize, simSize, renderTargetOptions);
-                    target.texture.generateMipmaps = false;
-                    return target;
-                };
-
-                const createInitialTextures = () => {
-                    const positionData = new Float32Array(pointCount * 4);
-                    const velocityData = new Float32Array(pointCount * 4);
-                    const randomSigned = () => Math.random() * 2 - 1;
-                    const particleCountWithoutCenters = pointCount - galaxyCount;
-                    const firstGalaxyParticleCount = Math.round(particleCountWithoutCenters / 2);
-                    const galaxyParticleCounts = [
-                        firstGalaxyParticleCount,
-                        particleCountWithoutCenters - firstGalaxyParticleCount
-                    ];
-                    const galaxySizes = [0.78 * galaxyHaloSize, 0.84 * galaxyHaloSize];
-                    const galaxyInclinations = [0.35 * Math.PI, -0.28 * Math.PI];
-                    const galaxyPositions = [
-                        new THREE.Vector3(-1.2 * galaxyHaloSize, -0.1 * galaxyHaloSize, 0),
-                        new THREE.Vector3(1.2 * galaxyHaloSize, 0.1 * galaxyHaloSize, 0)
-                    ];
-                    const galaxyVelocities = [
-                        new THREE.Vector3(0.00145, 0.00014, 0.0018),
-                        new THREE.Vector3(-0.00145, -0.00014, -0.0018)
-                    ];
-
-                    const writeParticle = (particleIndex, position, velocity) => {
-                        const offset = particleIndex * 4;
-                        positionData[offset] = position.x;
-                        positionData[offset + 1] = position.y;
-                        positionData[offset + 2] = position.z;
-                        positionData[offset + 3] = 1;
-                        velocityData[offset] = velocity.x;
-                        velocityData[offset + 1] = velocity.y;
-                        velocityData[offset + 2] = velocity.z;
-                        velocityData[offset + 3] = 1;
-                    };
-
-                    for (let i = 0; i < galaxyCount; i++) {
-                        writeParticle(i, galaxyPositions[i], galaxyVelocities[i]);
-                    }
-
-                    let startIndex = galaxyCount;
-                    for (let i = 0; i < galaxyCount; i++) {
-                        const center = galaxyPositions[i];
-                        const centerVelocity = galaxyVelocities[i];
-                        const sinInclination = Math.sin(galaxyInclinations[i]);
-                        const cosInclination = Math.cos(galaxyInclinations[i]);
-
-                        for (let j = startIndex; j < startIndex + galaxyParticleCounts[i]; j++) {
-                            const diffuseSeed = Math.random();
-                            const position = new THREE.Vector3();
-                            const velocity = new THREE.Vector3();
-
-                            if (diffuseSeed < 0.16) {
-                                const radius = galaxySizes[i] * (0.72 + Math.pow(Math.random(), 0.55) * 0.62);
-                                const angle = 2 * Math.PI * Math.random();
-
-                                position.set(
-                                    center.x + Math.cos(angle) * radius + randomSigned() * 0.75,
-                                    center.y + cosInclination * Math.sin(angle) * radius * 0.64 + randomSigned() * 0.72,
-                                    center.z - sinInclination * Math.sin(angle) * radius * 0.64 + randomSigned() * 0.95
-                                );
-                                velocity.set(
-                                    -Math.sin(angle) * 0.0034 + centerVelocity.x * 0.66,
-                                    cosInclination * Math.cos(angle) * 0.0021 + centerVelocity.y * 0.66,
-                                    -sinInclination * Math.cos(angle) * 0.0021 + randomSigned() * 0.0009 + centerVelocity.z * 0.66
-                                );
-                            } else {
-                                const distance = galaxySizes[i] * (0.18 + Math.pow(Math.random(), 0.7) * 0.82);
-                                const safeDistance = Math.max(distance, 0.08);
-                                const angle = 2 * Math.PI * Math.random();
-                                const massAtPosition = galaxyMass * Math.min(safeDistance, galaxyHaloSize) / galaxyHaloSize;
-                                const speed = Math.sqrt(massAtPosition / safeDistance);
-                                const x = distance * Math.cos(angle);
-                                const y = distance * Math.sin(angle);
-                                const vx = -speed * Math.sin(angle) * 1.75;
-                                const vy = speed * Math.cos(angle) * 1.75;
-
-                                position.set(
-                                    center.x + x,
-                                    center.y + cosInclination * y,
-                                    center.z - sinInclination * y
-                                );
-                                velocity.set(
-                                    centerVelocity.x + vx,
-                                    centerVelocity.y + cosInclination * vy,
-                                    centerVelocity.z - sinInclination * vy
-                                );
-
-                                const jitter = 0.14 + Math.pow(Math.random(), 2.0) * 0.62;
-                                position.x += randomSigned() * jitter;
-                                position.y += randomSigned() * jitter * 0.42;
-                                position.z += randomSigned() * jitter * 0.46;
-
-                                if (Math.random() < 0.16) {
-                                    const direction = i === 0 ? -1 : 1;
-                                    position.x += direction * (0.8 + Math.random() * 2.5);
-                                    position.y += randomSigned() * 0.72;
-                                    position.z += randomSigned() * 0.82;
-                                    velocity.x += direction * (0.00022 + Math.random() * 0.00035);
-                                    velocity.y += randomSigned() * 0.00018;
-                                    velocity.z += randomSigned() * 0.00022;
-                                }
-                            }
-
-                            writeParticle(j, position, velocity);
-                        }
-
-                        startIndex += galaxyParticleCounts[i];
-                    }
-
-                    const positionTexture = new THREE.DataTexture(positionData, simSize, simSize, THREE.RGBAFormat, THREE.FloatType);
-                    const velocityTexture = new THREE.DataTexture(velocityData, simSize, simSize, THREE.RGBAFormat, THREE.FloatType);
-                    positionTexture.needsUpdate = true;
-                    velocityTexture.needsUpdate = true;
-
-                    return { positionTexture, velocityTexture };
-                };
-
-                const computeVertexShader = `
-                    void main() {
-                        gl_Position = vec4(position.xy, 0.0, 1.0);
-                    }
-                `;
-
-                const copyMaterial = new THREE.ShaderMaterial({
-                    uniforms: {
-                        u_texture: { value: null },
-                        u_resolution: { value: resolution }
-                    },
-                    vertexShader: computeVertexShader,
-                    fragmentShader: `
-                        precision highp float;
-                        uniform sampler2D u_texture;
-                        uniform vec2 u_resolution;
-
-                        void main() {
-                            vec2 uv = gl_FragCoord.xy / u_resolution;
-                            gl_FragColor = texture2D(u_texture, uv);
-                        }
-                    `,
-                    depthTest: false,
-                    depthWrite: false
-                });
-
-                const positionMaterial = new THREE.ShaderMaterial({
-                    uniforms: {
-                        u_positionTexture: { value: null },
-                        u_velocityTexture: { value: null },
-                        u_resolution: { value: resolution },
-                        u_dt: { value: 0.18 }
-                    },
-                    vertexShader: computeVertexShader,
-                    fragmentShader: `
-                        precision highp float;
-                        uniform sampler2D u_positionTexture;
-                        uniform sampler2D u_velocityTexture;
-                        uniform vec2 u_resolution;
-                        uniform float u_dt;
-
-                        void main() {
-                            vec2 uv = gl_FragCoord.xy / u_resolution;
-                            vec3 position = texture2D(u_positionTexture, uv).xyz;
-                            vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
-                            float speedSeed = fract(sin(dot(uv, vec2(127.1, 311.7))) * 43758.5453);
-                            float particleDt = u_dt * mix(0.82, 1.22, speedSeed);
-                            gl_FragColor = vec4(position + particleDt * velocity, 1.0);
-                        }
-                    `,
-                    depthTest: false,
-                    depthWrite: false
-                });
-
-                const velocityMaterial = new THREE.ShaderMaterial({
-                    uniforms: {
-                        u_positionTexture: { value: null },
-                        u_velocityTexture: { value: null },
-                        u_resolution: { value: resolution },
-                        u_dt: { value: 0.18 },
-                        u_mass: { value: galaxyMass },
-                        u_haloSize: { value: galaxyHaloSize },
-                        u_softening: { value: 1.7 },
-                        u_damping: { value: 0.991 },
-                        u_maxSpeed: { value: 0.038 },
-                        u_velocityDeadzone: { value: 0.0026 },
-                        u_settleDamping: { value: 0.78 }
-                    },
-                    vertexShader: computeVertexShader,
-                    fragmentShader: `
-                        precision highp float;
-                        #define GALAXY_COUNT 2
-
-                        uniform sampler2D u_positionTexture;
-                        uniform sampler2D u_velocityTexture;
-                        uniform vec2 u_resolution;
-                        uniform float u_dt;
-                        uniform float u_mass;
-                        uniform float u_haloSize;
-                        uniform float u_softening;
-                        uniform float u_damping;
-                        uniform float u_maxSpeed;
-                        uniform float u_velocityDeadzone;
-                        uniform float u_settleDamping;
-
-                        void main() {
-                            vec2 uv = gl_FragCoord.xy / u_resolution;
-                            vec3 position = texture2D(u_positionTexture, uv).xyz;
-                            vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
-                            vec3 totalForce = vec3(0.0);
-                            vec3 centerSum = vec3(0.0);
-                            vec3 nearestCenter = vec3(0.0);
-                            float nearestDistance = 99999.0;
-
-                            for (int i = 0; i < GALAXY_COUNT; i++) {
-                                float particleIndex = float(i);
-                                vec2 particleUv = vec2(
-                                    mod(particleIndex, u_resolution.x) + 0.5,
-                                    floor(particleIndex / u_resolution.x) + 0.5
-                                ) / u_resolution;
-                                vec3 particlePosition = texture2D(u_positionTexture, particleUv).xyz;
-                                vec3 forceDirection = particlePosition - position;
-                                float distance = length(forceDirection);
-                                centerSum += particlePosition;
-
-                                if (distance > 0.0001) {
-                                    vec3 directionToCenter = forceDirection / distance;
-                                    float nearFade = smoothstep(u_haloSize * 0.45, u_haloSize * 1.05, distance);
-                                    float massAtPosition = u_mass * nearFade * min(distance, u_haloSize) / u_haloSize;
-                                    float coreRepulsion = 1.0 - smoothstep(u_haloSize * 0.42, u_haloSize * 0.88, distance);
-                                    totalForce += massAtPosition * directionToCenter / pow(distance + u_softening, 2.0);
-                                    totalForce -= directionToCenter * coreRepulsion * u_mass * 0.36 / (distance + u_softening);
-                                }
-
-                                if (distance < nearestDistance) {
-                                    nearestDistance = distance;
-                                    nearestCenter = particlePosition;
-                                }
-                            }
-
-                            vec3 barycenter = centerSum / float(GALAXY_COUNT);
-                            vec3 fromBarycenter = position - barycenter;
-                            float baryDistance = length(fromBarycenter);
-                            if (baryDistance > 0.0001) {
-                                vec3 outwardDirection = fromBarycenter / baryDistance;
-                                float compression = 1.0 - smoothstep(u_haloSize * 0.65, u_haloSize * 1.75, baryDistance);
-                                vec3 orbitDirection = vec3(-outwardDirection.y, outwardDirection.x, 0.0);
-                                float orbitLength = length(orbitDirection);
-                                totalForce += outwardDirection * compression * u_mass * 0.42 / (baryDistance + 0.75);
-                                if (orbitLength > 0.0001) {
-                                    totalForce += (orbitDirection / orbitLength) * compression * u_mass * 0.28;
-                                }
-                            }
-
-                            vec3 nextVelocity = (velocity + u_dt * totalForce) * u_damping;
-                            if (nearestDistance > 0.0001 && nearestDistance < u_haloSize * 0.72) {
-                                vec3 awayFromCore = (position - nearestCenter) / nearestDistance;
-                                float corePressure = (u_haloSize * 0.72 - nearestDistance) / (u_haloSize * 0.72);
-                                nextVelocity += awayFromCore * corePressure * 0.0018;
-                            }
-                            float settleFactor = 1.0 - smoothstep(u_velocityDeadzone, u_velocityDeadzone * 4.0, length(nextVelocity));
-                            nextVelocity *= mix(1.0, u_settleDamping, settleFactor);
-                            float speed = length(nextVelocity);
-                            if (speed > u_maxSpeed) {
-                                nextVelocity = normalize(nextVelocity) * u_maxSpeed;
-                            }
-
-                            gl_FragColor = vec4(nextVelocity, 1.0);
-                        }
-                    `,
-                    depthTest: false,
-                    depthWrite: false
-                });
-
-                const computeScene = new THREE.Scene();
-                const computeCamera = new THREE.Camera();
-                const computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), copyMaterial);
-                computeQuad.frustumCulled = false;
-                computeScene.add(computeQuad);
-
-                const initialTextures = createInitialTextures();
-                let positionTargetA = createRenderTarget();
-                let positionTargetB = createRenderTarget();
-                let velocityTargetA = createRenderTarget();
-                let velocityTargetB = createRenderTarget();
-                let currentPositionTarget = positionTargetA;
-                let nextPositionTarget = positionTargetB;
-                let currentVelocityTarget = velocityTargetA;
-                let nextVelocityTarget = velocityTargetB;
-                let simulationReady = renderer && typeof renderer.setRenderTarget === 'function';
-                let simulationWarningShown = false;
-                const simulationStepsPerTick = 16;
-
-                const renderComputePass = (material, target) => {
-                    computeQuad.material = material;
-                    renderer.setRenderTarget(target);
-                    renderer.render(computeScene, computeCamera);
-                };
-
-                const copyTextureToTarget = (texture, target) => {
-                    copyMaterial.uniforms.u_texture.value = texture;
-                    renderComputePass(copyMaterial, target);
-                };
-
-                if (simulationReady) {
-                    const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
-                    try {
-                        copyTextureToTarget(initialTextures.positionTexture, currentPositionTarget);
-                        copyTextureToTarget(initialTextures.velocityTexture, currentVelocityTarget);
-                        renderer.setRenderTarget(previousTarget);
-                    } catch (error) {
-                        simulationReady = false;
-                        console.warn('[BackgroundThemes] Galaxy particle simulation disabled.', error);
-                    }
-                }
-
-                const particleGeometry = new THREE.BufferGeometry();
-                const indices = new Float32Array(pointCount);
-                const dummyPositions = new Float32Array(pointCount * 3);
-                for (let i = 0; i < pointCount; i++) {
-                    indices[i] = i;
-                }
-                particleGeometry.setAttribute('a_index', new THREE.BufferAttribute(indices, 1));
-                particleGeometry.setAttribute('position', new THREE.BufferAttribute(dummyPositions, 3));
-
-                const particleMaterial = new THREE.ShaderMaterial({
-                    uniforms: {
-                        u_width: { value: simSize },
-                        u_height: { value: simSize },
-                        u_particleSize: { value: 64800 },
-                        u_worldScale: { value: 720 },
-                        u_depthScale: { value: 620 },
-                        u_backgroundZ: { value: -14000 },
-                        u_time: { value: 0 },
-                        u_positionTexture: { value: currentPositionTarget.texture }
-                    },
-                    vertexShader: `
-                        attribute float a_index;
-                        uniform float u_width;
-                        uniform float u_height;
-                        uniform float u_particleSize;
-                        uniform float u_worldScale;
-                        uniform float u_depthScale;
-                        uniform float u_backgroundZ;
-                        uniform float u_time;
-                        uniform sampler2D u_positionTexture;
-                        varying float vDepth;
-                        varying float vNearness;
-
-                        void main() {
-                            const float TWO_PI = 6.28318530718;
-                            vec2 uv = vec2(
-                                (mod(a_index, u_width) + 0.5) / u_width,
-                                (floor(a_index / u_width) + 0.5) / u_height
-                            );
-                            vec3 gravityPosition = texture2D(u_positionTexture, uv).xyz;
-                            float seed = fract(sin(a_index * 12.9898) * 43758.5453);
-                            float sizeSeed = fract(sin((a_index + 17.31) * 78.233) * 43758.5453);
-                            float depthSeed = fract(sin((a_index + 91.73) * 39.425) * 24634.6345);
-                            float speedSeed = fract(sin((a_index + 211.13) * 17.317) * 19542.349);
-                            float phaseSeed = fract(sin((a_index + 47.77) * 63.721) * 31571.231);
-                            float localTime = u_time * mix(0.72, 1.38, speedSeed) + phaseSeed * TWO_PI;
-                            float radius = length(gravityPosition.xy);
-                            float fieldFlow = mod(u_time * mix(0.046, 0.062, speedSeed), TWO_PI);
-                            float fc = cos(fieldFlow);
-                            float fs = sin(fieldFlow);
-                            gravityPosition.xy = mat2(fc, -fs, fs, fc) * gravityPosition.xy;
-
-                            float flow = mod(localTime * mix(0.018, 0.054, seed) * (1.0 - smoothstep(9.0, 18.0, radius)), TWO_PI);
-                            float c = cos(flow);
-                            float s = sin(flow);
-                            gravityPosition.xy = mat2(c, -s, s, c) * gravityPosition.xy;
-                            gravityPosition.xy += vec2(
-                                sin(mod(localTime * mix(0.08, 0.22, seed) + seed * TWO_PI, TWO_PI)),
-                                cos(mod(localTime * mix(0.07, 0.2, seed) + seed * 8.713, TWO_PI))
-                            ) * mix(0.055, 0.18, seed);
-                            float depthLayer = (depthSeed - 0.5) * mix(4.0, 8.4, sizeSeed);
-                            float depthDrift = sin(mod(localTime * mix(0.035, 0.1, seed) + seed * 12.421, TWO_PI)) * mix(0.1, 0.34, depthSeed);
-                            float layeredZ = clamp(gravityPosition.z + depthLayer + depthDrift, -6.8, 4.2);
-                            vec3 simPosition = vec3(
-                                gravityPosition.xy * u_worldScale,
-                                u_backgroundZ + layeredZ * u_depthScale
-                            );
-                            vec4 mvPosition = modelViewMatrix * vec4(simPosition, 1.0);
-                            float viewDepth = max(-mvPosition.z, 1.0);
-                            float seededSize = mix(0.55, 2.05, pow(sizeSeed, 1.42));
-                            gl_PointSize = clamp((u_particleSize / viewDepth) * seededSize * 2.0, 1.0, 17.0);
-                            gl_Position = projectionMatrix * mvPosition;
-                            vDepth = clamp((viewDepth - 9000.0) / 52000.0, 0.0, 1.0);
-                            vNearness = 1.0 - clamp((viewDepth - 9000.0) / 28000.0, 0.0, 1.0);
-                        }
-                    `,
-                    fragmentShader: `
-                        precision mediump float;
-                        varying float vDepth;
-                        varying float vNearness;
-
-                        void main() {
-                            vec2 uv = gl_PointCoord - vec2(0.5);
-                            float dist = length(uv);
-                            float radius = mix(0.38, 0.49, vNearness);
-                            float core = 1.0 - smoothstep(0.02, radius, dist);
-                            float halo = (1.0 - smoothstep(0.28, 0.5, dist)) * vNearness * 0.24;
-                            float alpha = (pow(max(core, 0.0), mix(1.6, 1.05, vNearness)) + halo) * mix(0.92, 0.46, vDepth);
-                            if (alpha < 0.015) discard;
-                            gl_FragColor = vec4(vec3(0.0, 0.0, 0.0), min(alpha, 0.94));
-                        }
-                    `,
-                    transparent: true,
-                    depthTest: true,
-                    depthWrite: false,
-                    blending: THREE.NormalBlending
-                });
-
-                const gravityPoints = new THREE.Points(particleGeometry, particleMaterial);
-                gravityPoints.frustumCulled = false;
-                gravityPoints.renderOrder = -40;
-                themeGroup.add(gravityPoints);
-
-                const themeStartTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001;
-
-                const syncParticleView = (camera) => {
-                    if (!camera) return;
-
-                    const cameraZ = Math.max(600, Math.abs(Number(camera.position?.z || 1200)));
-                    const cameraFar = Math.max(120000, Number(camera.far || 500000));
-                    const clipSafeDepth = Math.max(14000, cameraFar - cameraZ - 5000);
-                    const backgroundDepth = Math.min(Math.max(26000, cameraZ * 6.0), clipSafeDepth * 0.82);
-                    const viewDistance = cameraZ + backgroundDepth;
-                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
-                    const animationTime = elapsedTime * 8.0;
-                    particleMaterial.uniforms.u_worldScale.value = Math.max(820, backgroundDepth * 0.052);
-                    particleMaterial.uniforms.u_depthScale.value = Math.max(1050, backgroundDepth * 0.075);
-                    particleMaterial.uniforms.u_backgroundZ.value = -backgroundDepth;
-                    particleMaterial.uniforms.u_particleSize.value = Math.max(68000, Math.min(cameraZ * 34, viewDistance * 2.75));
-                    particleMaterial.uniforms.u_time.value = animationTime;
-                    gravityPoints.rotation.z = (animationTime * 0.085) % (Math.PI * 2);
-                    gravityPoints.rotation.x = 0;
-                    gravityPoints.position.x = 0;
-                    gravityPoints.position.y = 0;
-                    gravityPoints.updateMatrixWorld(true);
-                };
-
-                gravityPoints.onBeforeRender = (_renderer, _scene, camera) => {
-                    syncParticleView(camera);
-                };
-
-                // --- 2) XYGrid overlay (same distance-based LOD as XYGrid theme) ---
-                const adaptiveGridOverlay = createAdaptiveXYGridOverlay(new THREE.Color(THEME_GRID_COLOR_SOFT), {
-                    fineDistance: 45000,
-                    coarseDistance: 120000,
-                    farDistance: 320000,
-                    fineSmallOpacity: 0.17,
-                    fineLargeOpacity: 0.1,
-                    coarseSmallOpacity: 0.15,
-                    coarseLargeOpacity: 0.085,
-                    farSmallOpacity: 0.12,
-                    farLargeOpacity: 0.07
-                });
-                themeGroup.add(adaptiveGridOverlay);
-
-                // Animation: galaxy texture simulation and camera tracking for grid
-                themeGroup.animate = (camera, options = {}) => {
-                    if (!camera) return;
-
-                    const isInteractiveMotionFrame = options.isInteractiveFrame === true ||
-                        options.isCameraMoving === true ||
-                        options.isPanning === true ||
-                        options.isZooming === true;
-                    const targetFps = Math.max(0, Number(options.targetFps || 0) || 0);
-                    const steadySimulationStepCount = targetFps > 0
-                        ? Math.max(1, Math.round(32 / targetFps))
-                        : simulationStepsPerTick;
-                    const simulationStepCount = isInteractiveMotionFrame ? 1 : steadySimulationStepCount;
-
-                    if (simulationReady) {
-                        const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
-                        try {
-                            for (let i = 0; i < simulationStepCount; i++) {
-                                velocityMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
-                                velocityMaterial.uniforms.u_velocityTexture.value = currentVelocityTarget.texture;
-                                renderComputePass(velocityMaterial, nextVelocityTarget);
-
-                                positionMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
-                                positionMaterial.uniforms.u_velocityTexture.value = nextVelocityTarget.texture;
-                                renderComputePass(positionMaterial, nextPositionTarget);
-
-                                const oldPositionTarget = currentPositionTarget;
-                                currentPositionTarget = nextPositionTarget;
-                                nextPositionTarget = oldPositionTarget;
-
-                                const oldVelocityTarget = currentVelocityTarget;
-                                currentVelocityTarget = nextVelocityTarget;
-                                nextVelocityTarget = oldVelocityTarget;
-                            }
-
-                            renderer.setRenderTarget(previousTarget);
-
-                            particleMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
-                        } catch (error) {
-                            simulationReady = false;
-                            if (!simulationWarningShown) {
-                                simulationWarningShown = true;
-                                console.warn('[BackgroundThemes] Galaxy particle simulation stopped.', error);
-                            }
-                            if (renderer.setRenderTarget) {
-                                renderer.setRenderTarget(previousTarget);
-                            }
-                        }
-                    }
-
-                    syncParticleView(camera);
-
-                    adaptiveGridOverlay.animate(camera);
-                };
-
-                themeGroup.customDispose = () => {
-                    themeGroup.traverse(child => {
-                        if (child.geometry) child.geometry.dispose();
-                        if (child.material) {
-                            if (Array.isArray(child.material)) {
-                                child.material.forEach(material => material.dispose());
-                            } else {
-                                child.material.dispose();
-                            }
-                        }
-                    });
-                    initialTextures.positionTexture.dispose();
-                    initialTextures.velocityTexture.dispose();
-                    positionTargetA.dispose();
-                    positionTargetB.dispose();
-                    velocityTargetA.dispose();
-                    velocityTargetB.dispose();
-                    copyMaterial.dispose();
-                    positionMaterial.dispose();
-                    velocityMaterial.dispose();
-                    particleMaterial.dispose();
-                };
-
-                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
-            },
-            dispose: (themeObject) => { disposeThemeObject(themeObject); }
-        },
-
-        // Theme 8: SpiritFlow (curl-noise particle flow inspired by ref/~spirit)
-        'SpiritFlow': {
-            create: (scene, renderer) => {
-                scene.background = new THREE.Color(THEME_SURFACE_BG);
-
-                const themeGroup = new THREE.Group();
-                const textureWidth = 256;
-                const textureHeight = 256;
-                const pointCount = textureWidth * textureHeight;
-                const resolution = new THREE.Vector2(textureWidth, textureHeight);
-                const renderTargetOptions = {
-                    wrapS: THREE.ClampToEdgeWrapping,
-                    wrapT: THREE.ClampToEdgeWrapping,
-                    minFilter: THREE.NearestFilter,
-                    magFilter: THREE.NearestFilter,
-                    format: THREE.RGBAFormat,
-                    type: THREE.FloatType,
-                    depthBuffer: false,
-                    stencilBuffer: false
-                };
-
-                const createRenderTarget = () => {
-                    const target = new THREE.WebGLRenderTarget(textureWidth, textureHeight, renderTargetOptions);
-                    target.texture.generateMipmaps = false;
-                    return target;
-                };
-
-                const createDefaultPositionTexture = () => {
-                    const data = new Float32Array(pointCount * 4);
-                    for (let i = 0; i < pointCount; i++) {
-                        const offset = i * 4;
-                        const radius = (0.5 + Math.random() * 0.5) * 50;
-                        const phi = (Math.random() - 0.5) * Math.PI;
-                        const theta = Math.random() * Math.PI * 2;
-                        data[offset] = radius * Math.cos(theta) * Math.cos(phi);
-                        data[offset + 1] = radius * Math.sin(phi);
-                        data[offset + 2] = radius * Math.sin(theta) * Math.cos(phi);
-                        data[offset + 3] = Math.random();
-                    }
-
-                    const texture = new THREE.DataTexture(data, textureWidth, textureHeight, THREE.RGBAFormat, THREE.FloatType);
-                    texture.minFilter = THREE.NearestFilter;
-                    texture.magFilter = THREE.NearestFilter;
-                    texture.generateMipmaps = false;
-                    texture.flipY = false;
-                    texture.needsUpdate = true;
-                    return texture;
-                };
-
-                const computeVertexShader = `
-                    void main() {
-                        gl_Position = vec4(position.xy, 0.0, 1.0);
-                    }
-                `;
-
-                const copyMaterial = new THREE.ShaderMaterial({
-                    uniforms: {
-                        u_texture: { value: null },
-                        u_resolution: { value: resolution }
-                    },
-                    vertexShader: computeVertexShader,
-                    fragmentShader: `
-                        precision highp float;
-                        uniform sampler2D u_texture;
-                        uniform vec2 u_resolution;
-
-                        void main() {
-                            vec2 uv = gl_FragCoord.xy / u_resolution;
-                            gl_FragColor = texture2D(u_texture, uv);
-                        }
-                    `,
-                    depthTest: false,
-                    depthWrite: false
-                });
-
-                const positionMaterial = new THREE.ShaderMaterial({
-                    uniforms: {
-                        u_positionTexture: { value: null },
-                        u_defaultTexture: { value: null },
-                        u_resolution: { value: resolution },
-                        u_mouse3d: { value: new THREE.Vector3() },
-                        u_speed: { value: 0.81 },
-                        u_dieSpeed: { value: 0 },
-                        u_radius: { value: 0.6 },
-                        u_curlSize: { value: 0.018 },
-                        u_attraction: { value: 0.87 },
-                        u_time: { value: 0 },
-                        u_initAnimation: { value: 0 }
-                    },
-                    vertexShader: computeVertexShader,
-                    fragmentShader: `
-                        precision highp float;
-
-                        uniform sampler2D u_positionTexture;
-                        uniform sampler2D u_defaultTexture;
-                        uniform vec2 u_resolution;
-                        uniform vec3 u_mouse3d;
-                        uniform float u_speed;
-                        uniform float u_dieSpeed;
-                        uniform float u_radius;
-                        uniform float u_curlSize;
-                        uniform float u_attraction;
-                        uniform float u_time;
-                        uniform float u_initAnimation;
-
-                        vec4 mod289(vec4 x) {
-                            return x - floor(x * (1.0 / 289.0)) * 289.0;
-                        }
-
-                        float mod289(float x) {
-                            return x - floor(x * (1.0 / 289.0)) * 289.0;
-                        }
-
-                        vec4 permute(vec4 x) {
-                            return mod289(((x * 34.0) + 1.0) * x);
-                        }
-
-                        float permute(float x) {
-                            return mod289(((x * 34.0) + 1.0) * x);
-                        }
-
-                        vec4 taylorInvSqrt(vec4 r) {
-                            return 1.79284291400159 - 0.85373472095314 * r;
-                        }
-
-                        float taylorInvSqrt(float r) {
-                            return 1.79284291400159 - 0.85373472095314 * r;
-                        }
-
-                        vec4 grad4(float j, vec4 ip) {
-                            const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
-                            vec4 p;
-                            vec4 s;
-
-                            p.xyz = floor(fract(vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
-                            p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
-                            s = vec4(
-                                p.x < 0.0 ? 1.0 : 0.0,
-                                p.y < 0.0 ? 1.0 : 0.0,
-                                p.z < 0.0 ? 1.0 : 0.0,
-                                p.w < 0.0 ? 1.0 : 0.0
-                            );
-                            p.xyz = p.xyz + (s.xyz * 2.0 - 1.0) * s.www;
-
-                            return p;
-                        }
-
-                        #define F4 0.309016994374947451
-
-                        vec4 simplexNoiseDerivatives(vec4 v) {
-                            const vec4 C = vec4(0.138196601125011, 0.276393202250021, 0.414589803375032, -0.447213595499958);
-
-                            vec4 i = floor(v + dot(v, vec4(F4)));
-                            vec4 x0 = v - i + dot(i, C.xxxx);
-
-                            vec4 i0;
-                            vec3 isX = step(x0.yzw, x0.xxx);
-                            vec3 isYZ = step(x0.zww, x0.yyz);
-                            i0.x = isX.x + isX.y + isX.z;
-                            i0.yzw = 1.0 - isX;
-                            i0.y += isYZ.x + isYZ.y;
-                            i0.zw += 1.0 - isYZ.xy;
-                            i0.z += isYZ.z;
-                            i0.w += 1.0 - isYZ.z;
-
-                            vec4 i3 = clamp(i0, 0.0, 1.0);
-                            vec4 i2 = clamp(i0 - 1.0, 0.0, 1.0);
-                            vec4 i1 = clamp(i0 - 2.0, 0.0, 1.0);
-
-                            vec4 x1 = x0 - i1 + C.xxxx;
-                            vec4 x2 = x0 - i2 + C.yyyy;
-                            vec4 x3 = x0 - i3 + C.zzzz;
-                            vec4 x4 = x0 + C.wwww;
-
-                            i = mod289(i);
-                            float j0 = permute(permute(permute(permute(i.w) + i.z) + i.y) + i.x);
-                            vec4 j1 = permute(permute(permute(permute(
-                                      i.w + vec4(i1.w, i2.w, i3.w, 1.0))
-                                    + i.z + vec4(i1.z, i2.z, i3.z, 1.0))
-                                    + i.y + vec4(i1.y, i2.y, i3.y, 1.0))
-                                    + i.x + vec4(i1.x, i2.x, i3.x, 1.0));
-
-                            vec4 ip = vec4(1.0 / 294.0, 1.0 / 49.0, 1.0 / 7.0, 0.0);
-
-                            vec4 p0 = grad4(j0, ip);
-                            vec4 p1 = grad4(j1.x, ip);
-                            vec4 p2 = grad4(j1.y, ip);
-                            vec4 p3 = grad4(j1.z, ip);
-                            vec4 p4 = grad4(j1.w, ip);
-
-                            vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
-                            p0 *= norm.x;
-                            p1 *= norm.y;
-                            p2 *= norm.z;
-                            p3 *= norm.w;
-                            p4 *= taylorInvSqrt(dot(p4, p4));
-
-                            vec3 values0 = vec3(dot(p0, x0), dot(p1, x1), dot(p2, x2));
-                            vec2 values1 = vec2(dot(p3, x3), dot(p4, x4));
-
-                            vec3 m0 = max(0.5 - vec3(dot(x0, x0), dot(x1, x1), dot(x2, x2)), 0.0);
-                            vec2 m1 = max(0.5 - vec2(dot(x3, x3), dot(x4, x4)), 0.0);
-
-                            vec3 temp0 = -6.0 * m0 * m0 * values0;
-                            vec2 temp1 = -6.0 * m1 * m1 * values1;
-
-                            vec3 mmm0 = m0 * m0 * m0;
-                            vec2 mmm1 = m1 * m1 * m1;
-
-                            float dx = temp0[0] * x0.x + temp0[1] * x1.x + temp0[2] * x2.x + temp1[0] * x3.x + temp1[1] * x4.x + mmm0[0] * p0.x + mmm0[1] * p1.x + mmm0[2] * p2.x + mmm1[0] * p3.x + mmm1[1] * p4.x;
-                            float dy = temp0[0] * x0.y + temp0[1] * x1.y + temp0[2] * x2.y + temp1[0] * x3.y + temp1[1] * x4.y + mmm0[0] * p0.y + mmm0[1] * p1.y + mmm0[2] * p2.y + mmm1[0] * p3.y + mmm1[1] * p4.y;
-                            float dz = temp0[0] * x0.z + temp0[1] * x1.z + temp0[2] * x2.z + temp1[0] * x3.z + temp1[1] * x4.z + mmm0[0] * p0.z + mmm0[1] * p1.z + mmm0[2] * p2.z + mmm1[0] * p3.z + mmm1[1] * p4.z;
-                            float dw = temp0[0] * x0.w + temp0[1] * x1.w + temp0[2] * x2.w + temp1[0] * x3.w + temp1[1] * x4.w + mmm0[0] * p0.w + mmm0[1] * p1.w + mmm0[2] * p2.w + mmm1[0] * p3.w + mmm1[1] * p4.w;
-
-                            return vec4(dx, dy, dz, dw) * 49.0;
-                        }
-
-                        vec3 curl(vec3 p, float noiseTime, float persistence) {
-                            vec4 xNoisePotentialDerivatives = vec4(0.0);
-                            vec4 yNoisePotentialDerivatives = vec4(0.0);
-                            vec4 zNoisePotentialDerivatives = vec4(0.0);
-
-                            for (int i = 0; i < 3; ++i) {
-                                float twoPowI = pow(2.0, float(i));
-                                float scale = 0.5 * twoPowI * pow(persistence, float(i));
-
-                                xNoisePotentialDerivatives += simplexNoiseDerivatives(vec4(p * twoPowI, noiseTime)) * scale;
-                                yNoisePotentialDerivatives += simplexNoiseDerivatives(vec4((p + vec3(123.4, 129845.6, -1239.1)) * twoPowI, noiseTime)) * scale;
-                                zNoisePotentialDerivatives += simplexNoiseDerivatives(vec4((p + vec3(-9519.0, 9051.0, -123.0)) * twoPowI, noiseTime)) * scale;
-                            }
-
-                            return vec3(
-                                zNoisePotentialDerivatives[1] - yNoisePotentialDerivatives[2],
-                                xNoisePotentialDerivatives[2] - zNoisePotentialDerivatives[0],
-                                yNoisePotentialDerivatives[0] - xNoisePotentialDerivatives[1]
-                            );
-                        }
-
-                        void main() {
-                            vec2 uv = gl_FragCoord.xy / u_resolution;
-                            vec4 positionInfo = texture2D(u_positionTexture, uv);
-                            vec4 defaultInfo = texture2D(u_defaultTexture, uv);
-                            vec3 position = mix(vec3(0.0, -200.0, 0.0), positionInfo.xyz, smoothstep(0.0, 0.3, u_initAnimation));
-                            float life = positionInfo.a - u_dieSpeed;
-
-                            vec3 followPosition = mix(
-                                vec3(0.0, -(1.0 - u_initAnimation) * 200.0, 0.0),
-                                u_mouse3d,
-                                smoothstep(0.2, 0.7, u_initAnimation)
-                            );
-
-                            if (life < 0.0) {
-                                position = defaultInfo.xyz * (1.0 + sin(u_time * 15.0) * 0.2 + (1.0 - u_initAnimation)) * 0.4 * u_radius;
-                                position += followPosition;
-                                life = 0.5 + fract(defaultInfo.w * 21.4131 + u_time);
-                            } else {
-                                vec3 delta = followPosition - position;
-                                float distanceToFollow = length(delta);
-                                position += delta * (0.005 + life * 0.01) * u_attraction * (1.0 - smoothstep(50.0, 350.0, distanceToFollow)) * u_speed;
-                                position += curl(position * u_curlSize, u_time, 0.1 + (1.0 - life) * 0.1) * u_speed;
-                            }
-
-                            gl_FragColor = vec4(position, life);
-                        }
-                    `,
-                    depthTest: false,
-                    depthWrite: false,
-                    blending: THREE.NoBlending
-                });
-
-                const computeScene = new THREE.Scene();
-                const computeCamera = new THREE.Camera();
-                const computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), copyMaterial);
-                computeQuad.frustumCulled = false;
-                computeScene.add(computeQuad);
-
-                const defaultTexture = createDefaultPositionTexture();
-                let positionTargetA = createRenderTarget();
-                let positionTargetB = createRenderTarget();
-                let currentPositionTarget = positionTargetA;
-                let nextPositionTarget = positionTargetB;
-                let simulationReady = renderer && typeof renderer.setRenderTarget === 'function';
-                let simulationWarningShown = false;
-
-                const renderComputePass = (material, target) => {
-                    computeQuad.material = material;
-                    renderer.setRenderTarget(target);
-                    renderer.render(computeScene, computeCamera);
-                };
-
-                const copyTextureToTarget = (texture, target) => {
-                    copyMaterial.uniforms.u_texture.value = texture;
-                    renderComputePass(copyMaterial, target);
-                };
-
-                if (simulationReady) {
-                    const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
-                    try {
-                        copyTextureToTarget(defaultTexture, currentPositionTarget);
-                        copyTextureToTarget(defaultTexture, nextPositionTarget);
-                        renderer.setRenderTarget(previousTarget);
-                    } catch (error) {
-                        simulationReady = false;
-                        console.warn('[BackgroundThemes] Spirit particle simulation disabled.', error);
-                        if (renderer.setRenderTarget) {
-                            renderer.setRenderTarget(previousTarget);
-                        }
-                    }
-                }
-
-                const particleGeometry = new THREE.BufferGeometry();
-                const particleUvs = new Float32Array(pointCount * 3);
-                for (let i = 0; i < pointCount; i++) {
-                    const offset = i * 3;
-                    particleUvs[offset] = (i % textureWidth + 0.5) / textureWidth;
-                    particleUvs[offset + 1] = (Math.floor(i / textureWidth) + 0.5) / textureHeight;
-                    particleUvs[offset + 2] = 0;
-                }
-                particleGeometry.setAttribute('position', new THREE.BufferAttribute(particleUvs, 3));
-
-                const backdropMaterial = new THREE.ShaderMaterial({
-                    vertexShader: `
-                        varying vec2 vUv;
-
-                        void main() {
-                            vUv = uv;
-                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-                        }
-                    `,
-                    fragmentShader: `
-                        precision mediump float;
-                        varying vec2 vUv;
-
-                        void main() {
-                            vec3 topColor = vec3(0.74, 0.76, 0.75);
-                            vec3 horizonColor = vec3(0.88, 0.89, 0.86);
-                            vec3 bottomColor = vec3(0.60, 0.62, 0.61);
-                            float horizon = 1.0 - smoothstep(0.20, 0.64, abs(vUv.y - 0.53));
-                            vec3 vertical = mix(bottomColor, topColor, smoothstep(0.0, 1.0, vUv.y));
-                            vec3 color = mix(vertical, horizonColor, horizon * 0.78);
-                            gl_FragColor = vec4(color, 1.0);
-                        }
-                    `,
-                    depthTest: false,
-                    depthWrite: false
-                });
-                const backdrop = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), backdropMaterial);
-                backdrop.frustumCulled = false;
-                backdrop.renderOrder = -90;
-                themeGroup.add(backdrop);
-
-                const particleMaterial = new THREE.ShaderMaterial({
-                    uniforms: {
-                        u_positionTexture: { value: simulationReady ? currentPositionTarget.texture : defaultTexture },
-                        u_particleSize: { value: 42000 },
-                        u_worldScale: { value: 120 },
-                        u_depthScale: { value: 85 },
-                        u_backgroundZ: { value: -26000 },
-                        u_color: { value: new THREE.Color(0xffffff) }
-                    },
-                    vertexShader: `
-                        uniform sampler2D u_positionTexture;
-                        uniform float u_particleSize;
-                        uniform float u_worldScale;
-                        uniform float u_depthScale;
-                        uniform float u_backgroundZ;
-                        varying float vLife;
-                        varying float vAlpha;
-                        varying float vNearness;
-                        varying float vShade;
-
-                        void main() {
-                            vec4 positionInfo = texture2D(u_positionTexture, position.xy);
-                            float life = clamp(positionInfo.w, 0.0, 1.0);
-                            vec3 flowPosition = positionInfo.xyz;
-                            float sizeSeed = fract(sin(dot(position.xy, vec2(127.1, 311.7))) * 43758.5453);
-
-                            vec3 simPosition = vec3(
-                                flowPosition.x * u_worldScale,
-                                flowPosition.y * u_worldScale,
-                                u_backgroundZ + flowPosition.z * u_depthScale
-                            );
-
-                            vec4 mvPosition = modelViewMatrix * vec4(simPosition, 1.0);
-                            float viewDepth = max(-mvPosition.z, 1.0);
-                            float fadeOut = smoothstep(0.0, 0.28, life);
-                            float seededSize = mix(0.62, 2.15, pow(sizeSeed, 1.35));
-                            float nearness = 1.0 - clamp((viewDepth - 9000.0) / 28000.0, 0.0, 1.0);
-                            float depthBoost = mix(0.78, 1.62, nearness);
-                            gl_PointSize = clamp((u_particleSize / viewDepth) * seededSize * depthBoost * fadeOut, 0.12, 9.6);
-                            gl_Position = projectionMatrix * mvPosition;
-                            vLife = life;
-                            vAlpha = fadeOut;
-                            vNearness = nearness;
-                            float upperLight = smoothstep(-20.0, 115.0, flowPosition.y);
-                            float frontLight = smoothstep(-90.0, 85.0, flowPosition.z);
-                            vShade = mix(0.46, 1.18, clamp(upperLight * 0.72 + frontLight * 0.35, 0.0, 1.0));
-                        }
-                    `,
-                    fragmentShader: `
-                        precision mediump float;
-                        uniform vec3 u_color;
-                        varying float vLife;
-                        varying float vAlpha;
-                        varying float vNearness;
-                        varying float vShade;
-
-                        void main() {
-                            vec2 uv = gl_PointCoord - vec2(0.5);
-                            float dist = length(uv);
-                            float core = 1.0 - smoothstep(0.16, mix(0.44, 0.5, vNearness), dist);
-                            float halo = (1.0 - smoothstep(0.3, 0.5, dist)) * vNearness * 0.22;
-                            float particleAlpha = (core + halo) * vAlpha;
-                            if (particleAlpha < 0.01) discard;
-                            vec3 outgoingLight = mix(u_color * 0.58, u_color, smoothstep(0.0, 0.7, vLife));
-                            gl_FragColor = vec4(outgoingLight * vShade, min(particleAlpha, 0.96));
-                        }
-                    `,
-                    transparent: true,
-                    depthTest: true,
-                    depthWrite: false,
-                    blending: THREE.NormalBlending
-                });
-
-                const particles = new THREE.Points(particleGeometry, particleMaterial);
-                particles.frustumCulled = false;
-                particles.renderOrder = -40;
-                themeGroup.add(particles);
-
-                const themeStartTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001;
-                let lastElapsedTime = 0;
-                let followPointTime = 0;
-                const followPoint = new THREE.Vector3(0, 0, 0);
-                const autoFollowPoint = new THREE.Vector3(0, 0, 0);
-                const spiritMotion = Object.freeze({
-                    followTimeScale: 0.79,
-                    followBlend: 0.16,
-                    followX: 182,
-                    followY: 49,
-                    followZ: 132,
-                    depthTravelScale: 0.67,
-                    particleSpeed: 0.81,
-                    lifeDecay: 0.013
-                });
-
-                const syncParticleView = (camera, elapsedTime) => {
-                    if (!camera) return;
-
-                    const cameraZ = Math.max(600, Math.abs(Number(camera.position?.z || 1200)));
-                    const cameraFar = Math.max(120000, Number(camera.far || 500000));
-                    const clipSafeDepth = Math.max(14000, cameraFar - cameraZ - 5000);
-                    const backgroundDepth = Math.min(Math.max(26000, cameraZ * 6.0), clipSafeDepth * 0.82);
-                    const viewDistance = cameraZ + backgroundDepth;
-                    const fovRadians = THREE.MathUtils?.degToRad
-                        ? THREE.MathUtils.degToRad(Number(camera.fov || 45))
-                        : Number(camera.fov || 45) * Math.PI / 180;
-                    const viewportHeight = Math.max(1, Math.tan(fovRadians * 0.5) * viewDistance * 2);
-                    const viewportWidth = viewportHeight * Math.max(0.1, Number(camera.aspect || 1));
-                    particleMaterial.uniforms.u_worldScale.value = Math.max(105, backgroundDepth * 0.0043);
-                    particleMaterial.uniforms.u_depthScale.value = Math.max(56, backgroundDepth * 0.0037 * spiritMotion.depthTravelScale);
-                    particleMaterial.uniforms.u_backgroundZ.value = -backgroundDepth;
-                    particleMaterial.uniforms.u_particleSize.value = Math.max(44000, viewDistance * 1.92);
-                    particles.rotation.z = Math.sin(elapsedTime * 0.08) * 0.08;
-                    particles.rotation.x = Math.sin(elapsedTime * 0.11) * 0.05;
-                    particles.position.x = Number(camera.position?.x || 0);
-                    particles.position.y = Number(camera.position?.y || 0);
-                    particles.updateMatrixWorld(true);
-                    backdrop.position.x = Number(camera.position?.x || 0);
-                    backdrop.position.y = Number(camera.position?.y || 0);
-                    backdrop.position.z = -backgroundDepth - 1200;
-                    backdrop.scale.set(viewportWidth * 1.12, viewportHeight * 1.12, 1);
-                    backdrop.updateMatrixWorld(true);
-                };
-
-                particles.onBeforeRender = (_renderer, _scene, camera) => {
-                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
-                    syncParticleView(camera, elapsedTime);
-                };
-
-                themeGroup.animate = (camera) => {
-                    if (!camera) return;
-
-                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
-                    const deltaMs = Math.min(48, Math.max(0, (elapsedTime - lastElapsedTime) * 1000 || 16.6667));
-                    const deltaRatio = deltaMs / 16.6667;
-                    lastElapsedTime = elapsedTime;
-
-                    followPointTime += deltaMs * 0.001 * spiritMotion.followTimeScale;
-                    autoFollowPoint.set(
-                        Math.cos(followPointTime * 0.9) * spiritMotion.followX,
-                        Math.cos(followPointTime * 2.8) * spiritMotion.followY,
-                        Math.sin(followPointTime * 1.55) * spiritMotion.followZ
-                    );
-                    followPoint.lerp(autoFollowPoint, Math.min(1.0, spiritMotion.followBlend * deltaRatio));
-
-                    if (simulationReady) {
-                        const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
-                        try {
-                            positionMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
-                            positionMaterial.uniforms.u_defaultTexture.value = defaultTexture;
-                            positionMaterial.uniforms.u_mouse3d.value.copy(followPoint);
-                            positionMaterial.uniforms.u_speed.value = spiritMotion.particleSpeed * deltaRatio;
-                            positionMaterial.uniforms.u_dieSpeed.value = spiritMotion.lifeDecay * deltaRatio;
-                            positionMaterial.uniforms.u_time.value = elapsedTime;
-                            positionMaterial.uniforms.u_initAnimation.value = Math.min(1, elapsedTime * 0.25);
-                            renderComputePass(positionMaterial, nextPositionTarget);
-
-                            const oldPositionTarget = currentPositionTarget;
-                            currentPositionTarget = nextPositionTarget;
-                            nextPositionTarget = oldPositionTarget;
-                            renderer.setRenderTarget(previousTarget);
-
-                            particleMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
-                        } catch (error) {
-                            simulationReady = false;
-                            if (!simulationWarningShown) {
-                                simulationWarningShown = true;
-                                console.warn('[BackgroundThemes] Spirit particle simulation stopped.', error);
-                            }
-                            if (renderer.setRenderTarget) {
-                                renderer.setRenderTarget(previousTarget);
-                            }
-                        }
-                    }
-
-                    syncParticleView(camera, elapsedTime);
-                };
-
-                themeGroup.customDispose = () => {
-                    themeGroup.traverse(child => {
-                        if (child.geometry) child.geometry.dispose();
-                        if (child.material) {
-                            if (Array.isArray(child.material)) {
-                                child.material.forEach(material => material.dispose());
-                            } else {
-                                child.material.dispose();
-                            }
-                        }
-                    });
-                    defaultTexture.dispose();
-                    positionTargetA.dispose();
-                    positionTargetB.dispose();
-                    copyMaterial.dispose();
-                    positionMaterial.dispose();
-                    particleMaterial.dispose();
-                    backdropMaterial.dispose();
-                };
-
-                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
-            },
-            dispose: (themeObject) => { disposeThemeObject(themeObject); }
-        },
-
-        // Theme 9: None (no background)
-        'None': { create: (scene) => { scene.background = new THREE.Color(THEME_SURFACE_BG); return null; }, dispose: (themeObject) => { } }
-    };
+        // Theme 6: XYGrid (distance-based auto LOD grid)
+        'XYGrid': {
+            create: (scene) => {
+                return createLocalSnapGridTheme(scene, {
+                    themeAlias: 'XYGrid',
+                    localSnapGridStyle: 'line',
+                    backgroundColor: THEME_PLAIN_BG
+                });
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 7: Core Particles (inverted galaxy shader particles + faint XYGrid overlay)
+        'Space3D': {
+            create: (scene, renderer) => {
+                scene.background = new THREE.Color(THEME_PLAIN_BG);
+
+                const themeGroup = new THREE.Group();
+                const simSize = 64;
+                const pointCount = simSize * simSize;
+                const resolution = new THREE.Vector2(simSize, simSize);
+                const galaxyCount = 2;
+                const galaxyMass = 0.000075;
+                const galaxyHaloSize = 6;
+                const renderTargetOptions = {
+                    wrapS: THREE.ClampToEdgeWrapping,
+                    wrapT: THREE.ClampToEdgeWrapping,
+                    minFilter: THREE.NearestFilter,
+                    magFilter: THREE.NearestFilter,
+                    format: THREE.RGBAFormat,
+                    type: THREE.FloatType,
+                    depthBuffer: false,
+                    stencilBuffer: false
+                };
+
+                const createRenderTarget = () => {
+                    const target = new THREE.WebGLRenderTarget(simSize, simSize, renderTargetOptions);
+                    target.texture.generateMipmaps = false;
+                    return target;
+                };
+
+                const createInitialTextures = () => {
+                    const positionData = new Float32Array(pointCount * 4);
+                    const velocityData = new Float32Array(pointCount * 4);
+                    const randomSigned = () => Math.random() * 2 - 1;
+                    const particleCountWithoutCenters = pointCount - galaxyCount;
+                    const firstGalaxyParticleCount = Math.round(particleCountWithoutCenters / 2);
+                    const galaxyParticleCounts = [
+                        firstGalaxyParticleCount,
+                        particleCountWithoutCenters - firstGalaxyParticleCount
+                    ];
+                    const galaxySizes = [0.78 * galaxyHaloSize, 0.84 * galaxyHaloSize];
+                    const galaxyInclinations = [0.35 * Math.PI, -0.28 * Math.PI];
+                    const galaxyPositions = [
+                        new THREE.Vector3(-1.2 * galaxyHaloSize, -0.1 * galaxyHaloSize, 0),
+                        new THREE.Vector3(1.2 * galaxyHaloSize, 0.1 * galaxyHaloSize, 0)
+                    ];
+                    const galaxyVelocities = [
+                        new THREE.Vector3(0.00145, 0.00014, 0.0018),
+                        new THREE.Vector3(-0.00145, -0.00014, -0.0018)
+                    ];
+
+                    const writeParticle = (particleIndex, position, velocity) => {
+                        const offset = particleIndex * 4;
+                        positionData[offset] = position.x;
+                        positionData[offset + 1] = position.y;
+                        positionData[offset + 2] = position.z;
+                        positionData[offset + 3] = 1;
+                        velocityData[offset] = velocity.x;
+                        velocityData[offset + 1] = velocity.y;
+                        velocityData[offset + 2] = velocity.z;
+                        velocityData[offset + 3] = 1;
+                    };
+
+                    for (let i = 0; i < galaxyCount; i++) {
+                        writeParticle(i, galaxyPositions[i], galaxyVelocities[i]);
+                    }
+
+                    let startIndex = galaxyCount;
+                    for (let i = 0; i < galaxyCount; i++) {
+                        const center = galaxyPositions[i];
+                        const centerVelocity = galaxyVelocities[i];
+                        const sinInclination = Math.sin(galaxyInclinations[i]);
+                        const cosInclination = Math.cos(galaxyInclinations[i]);
+
+                        for (let j = startIndex; j < startIndex + galaxyParticleCounts[i]; j++) {
+                            const diffuseSeed = Math.random();
+                            const position = new THREE.Vector3();
+                            const velocity = new THREE.Vector3();
+
+                            if (diffuseSeed < 0.16) {
+                                const radius = galaxySizes[i] * (0.72 + Math.pow(Math.random(), 0.55) * 0.62);
+                                const angle = 2 * Math.PI * Math.random();
+
+                                position.set(
+                                    center.x + Math.cos(angle) * radius + randomSigned() * 0.75,
+                                    center.y + cosInclination * Math.sin(angle) * radius * 0.64 + randomSigned() * 0.72,
+                                    center.z - sinInclination * Math.sin(angle) * radius * 0.64 + randomSigned() * 0.95
+                                );
+                                velocity.set(
+                                    -Math.sin(angle) * 0.0034 + centerVelocity.x * 0.66,
+                                    cosInclination * Math.cos(angle) * 0.0021 + centerVelocity.y * 0.66,
+                                    -sinInclination * Math.cos(angle) * 0.0021 + randomSigned() * 0.0009 + centerVelocity.z * 0.66
+                                );
+                            } else {
+                                const distance = galaxySizes[i] * (0.18 + Math.pow(Math.random(), 0.7) * 0.82);
+                                const safeDistance = Math.max(distance, 0.08);
+                                const angle = 2 * Math.PI * Math.random();
+                                const massAtPosition = galaxyMass * Math.min(safeDistance, galaxyHaloSize) / galaxyHaloSize;
+                                const speed = Math.sqrt(massAtPosition / safeDistance);
+                                const x = distance * Math.cos(angle);
+                                const y = distance * Math.sin(angle);
+                                const vx = -speed * Math.sin(angle) * 1.75;
+                                const vy = speed * Math.cos(angle) * 1.75;
+
+                                position.set(
+                                    center.x + x,
+                                    center.y + cosInclination * y,
+                                    center.z - sinInclination * y
+                                );
+                                velocity.set(
+                                    centerVelocity.x + vx,
+                                    centerVelocity.y + cosInclination * vy,
+                                    centerVelocity.z - sinInclination * vy
+                                );
+
+                                const jitter = 0.14 + Math.pow(Math.random(), 2.0) * 0.62;
+                                position.x += randomSigned() * jitter;
+                                position.y += randomSigned() * jitter * 0.42;
+                                position.z += randomSigned() * jitter * 0.46;
+
+                                if (Math.random() < 0.16) {
+                                    const direction = i === 0 ? -1 : 1;
+                                    position.x += direction * (0.8 + Math.random() * 2.5);
+                                    position.y += randomSigned() * 0.72;
+                                    position.z += randomSigned() * 0.82;
+                                    velocity.x += direction * (0.00022 + Math.random() * 0.00035);
+                                    velocity.y += randomSigned() * 0.00018;
+                                    velocity.z += randomSigned() * 0.00022;
+                                }
+                            }
+
+                            writeParticle(j, position, velocity);
+                        }
+
+                        startIndex += galaxyParticleCounts[i];
+                    }
+
+                    const positionTexture = new THREE.DataTexture(positionData, simSize, simSize, THREE.RGBAFormat, THREE.FloatType);
+                    const velocityTexture = new THREE.DataTexture(velocityData, simSize, simSize, THREE.RGBAFormat, THREE.FloatType);
+                    positionTexture.needsUpdate = true;
+                    velocityTexture.needsUpdate = true;
+
+                    return { positionTexture, velocityTexture };
+                };
+
+                const computeVertexShader = `
+                    void main() {
+                        gl_Position = vec4(position.xy, 0.0, 1.0);
+                    }
+                `;
+
+                const copyMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_texture: { value: null },
+                        u_resolution: { value: resolution }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        uniform sampler2D u_texture;
+                        uniform vec2 u_resolution;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            gl_FragColor = texture2D(u_texture, uv);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const positionMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: null },
+                        u_velocityTexture: { value: null },
+                        u_resolution: { value: resolution },
+                        u_dt: { value: 0.18 }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        uniform sampler2D u_positionTexture;
+                        uniform sampler2D u_velocityTexture;
+                        uniform vec2 u_resolution;
+                        uniform float u_dt;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            vec3 position = texture2D(u_positionTexture, uv).xyz;
+                            vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
+                            float speedSeed = fract(sin(dot(uv, vec2(127.1, 311.7))) * 43758.5453);
+                            float particleDt = u_dt * mix(0.82, 1.22, speedSeed);
+                            gl_FragColor = vec4(position + particleDt * velocity, 1.0);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const velocityMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: null },
+                        u_velocityTexture: { value: null },
+                        u_resolution: { value: resolution },
+                        u_dt: { value: 0.18 },
+                        u_mass: { value: galaxyMass },
+                        u_haloSize: { value: galaxyHaloSize },
+                        u_softening: { value: 1.7 },
+                        u_damping: { value: 0.991 },
+                        u_maxSpeed: { value: 0.038 },
+                        u_velocityDeadzone: { value: 0.0026 },
+                        u_settleDamping: { value: 0.78 }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        #define GALAXY_COUNT 2
+
+                        uniform sampler2D u_positionTexture;
+                        uniform sampler2D u_velocityTexture;
+                        uniform vec2 u_resolution;
+                        uniform float u_dt;
+                        uniform float u_mass;
+                        uniform float u_haloSize;
+                        uniform float u_softening;
+                        uniform float u_damping;
+                        uniform float u_maxSpeed;
+                        uniform float u_velocityDeadzone;
+                        uniform float u_settleDamping;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            vec3 position = texture2D(u_positionTexture, uv).xyz;
+                            vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
+                            vec3 totalForce = vec3(0.0);
+                            vec3 centerSum = vec3(0.0);
+                            vec3 nearestCenter = vec3(0.0);
+                            float nearestDistance = 99999.0;
+
+                            for (int i = 0; i < GALAXY_COUNT; i++) {
+                                float particleIndex = float(i);
+                                vec2 particleUv = vec2(
+                                    mod(particleIndex, u_resolution.x) + 0.5,
+                                    floor(particleIndex / u_resolution.x) + 0.5
+                                ) / u_resolution;
+                                vec3 particlePosition = texture2D(u_positionTexture, particleUv).xyz;
+                                vec3 forceDirection = particlePosition - position;
+                                float distance = length(forceDirection);
+                                centerSum += particlePosition;
+
+                                if (distance > 0.0001) {
+                                    vec3 directionToCenter = forceDirection / distance;
+                                    float nearFade = smoothstep(u_haloSize * 0.45, u_haloSize * 1.05, distance);
+                                    float massAtPosition = u_mass * nearFade * min(distance, u_haloSize) / u_haloSize;
+                                    float coreRepulsion = 1.0 - smoothstep(u_haloSize * 0.42, u_haloSize * 0.88, distance);
+                                    totalForce += massAtPosition * directionToCenter / pow(distance + u_softening, 2.0);
+                                    totalForce -= directionToCenter * coreRepulsion * u_mass * 0.36 / (distance + u_softening);
+                                }
+
+                                if (distance < nearestDistance) {
+                                    nearestDistance = distance;
+                                    nearestCenter = particlePosition;
+                                }
+                            }
+
+                            vec3 barycenter = centerSum / float(GALAXY_COUNT);
+                            vec3 fromBarycenter = position - barycenter;
+                            float baryDistance = length(fromBarycenter);
+                            if (baryDistance > 0.0001) {
+                                vec3 outwardDirection = fromBarycenter / baryDistance;
+                                float compression = 1.0 - smoothstep(u_haloSize * 0.65, u_haloSize * 1.75, baryDistance);
+                                vec3 orbitDirection = vec3(-outwardDirection.y, outwardDirection.x, 0.0);
+                                float orbitLength = length(orbitDirection);
+                                totalForce += outwardDirection * compression * u_mass * 0.42 / (baryDistance + 0.75);
+                                if (orbitLength > 0.0001) {
+                                    totalForce += (orbitDirection / orbitLength) * compression * u_mass * 0.28;
+                                }
+                            }
+
+                            vec3 nextVelocity = (velocity + u_dt * totalForce) * u_damping;
+                            if (nearestDistance > 0.0001 && nearestDistance < u_haloSize * 0.72) {
+                                vec3 awayFromCore = (position - nearestCenter) / nearestDistance;
+                                float corePressure = (u_haloSize * 0.72 - nearestDistance) / (u_haloSize * 0.72);
+                                nextVelocity += awayFromCore * corePressure * 0.0018;
+                            }
+                            float settleFactor = 1.0 - smoothstep(u_velocityDeadzone, u_velocityDeadzone * 4.0, length(nextVelocity));
+                            nextVelocity *= mix(1.0, u_settleDamping, settleFactor);
+                            float speed = length(nextVelocity);
+                            if (speed > u_maxSpeed) {
+                                nextVelocity = normalize(nextVelocity) * u_maxSpeed;
+                            }
+
+                            gl_FragColor = vec4(nextVelocity, 1.0);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const computeScene = new THREE.Scene();
+                const computeCamera = new THREE.Camera();
+                const computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), copyMaterial);
+                computeQuad.frustumCulled = false;
+                computeScene.add(computeQuad);
+
+                const initialTextures = createInitialTextures();
+                let positionTargetA = createRenderTarget();
+                let positionTargetB = createRenderTarget();
+                let velocityTargetA = createRenderTarget();
+                let velocityTargetB = createRenderTarget();
+                let currentPositionTarget = positionTargetA;
+                let nextPositionTarget = positionTargetB;
+                let currentVelocityTarget = velocityTargetA;
+                let nextVelocityTarget = velocityTargetB;
+                let simulationReady = renderer && typeof renderer.setRenderTarget === 'function';
+                let simulationWarningShown = false;
+                const simulationStepsPerTick = 16;
+
+                const renderComputePass = (material, target) => {
+                    computeQuad.material = material;
+                    renderer.setRenderTarget(target);
+                    renderer.render(computeScene, computeCamera);
+                };
+
+                const copyTextureToTarget = (texture, target) => {
+                    copyMaterial.uniforms.u_texture.value = texture;
+                    renderComputePass(copyMaterial, target);
+                };
+
+                if (simulationReady) {
+                    const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                    try {
+                        copyTextureToTarget(initialTextures.positionTexture, currentPositionTarget);
+                        copyTextureToTarget(initialTextures.velocityTexture, currentVelocityTarget);
+                        renderer.setRenderTarget(previousTarget);
+                    } catch (error) {
+                        simulationReady = false;
+                        console.warn('[BackgroundThemes] Galaxy particle simulation disabled.', error);
+                    }
+                }
+
+                const particleGeometry = new THREE.BufferGeometry();
+                const indices = new Float32Array(pointCount);
+                const dummyPositions = new Float32Array(pointCount * 3);
+                for (let i = 0; i < pointCount; i++) {
+                    indices[i] = i;
+                }
+                particleGeometry.setAttribute('a_index', new THREE.BufferAttribute(indices, 1));
+                particleGeometry.setAttribute('position', new THREE.BufferAttribute(dummyPositions, 3));
+
+                const particleMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_width: { value: simSize },
+                        u_height: { value: simSize },
+                        u_particleSize: { value: 64800 },
+                        u_worldScale: { value: 720 },
+                        u_depthScale: { value: 620 },
+                        u_backgroundZ: { value: -14000 },
+                        u_time: { value: 0 },
+                        u_positionTexture: { value: currentPositionTarget.texture }
+                    },
+                    vertexShader: `
+                        attribute float a_index;
+                        uniform float u_width;
+                        uniform float u_height;
+                        uniform float u_particleSize;
+                        uniform float u_worldScale;
+                        uniform float u_depthScale;
+                        uniform float u_backgroundZ;
+                        uniform float u_time;
+                        uniform sampler2D u_positionTexture;
+                        varying float vDepth;
+                        varying float vNearness;
+
+                        void main() {
+                            const float TWO_PI = 6.28318530718;
+                            vec2 uv = vec2(
+                                (mod(a_index, u_width) + 0.5) / u_width,
+                                (floor(a_index / u_width) + 0.5) / u_height
+                            );
+                            vec3 gravityPosition = texture2D(u_positionTexture, uv).xyz;
+                            float seed = fract(sin(a_index * 12.9898) * 43758.5453);
+                            float sizeSeed = fract(sin((a_index + 17.31) * 78.233) * 43758.5453);
+                            float depthSeed = fract(sin((a_index + 91.73) * 39.425) * 24634.6345);
+                            float speedSeed = fract(sin((a_index + 211.13) * 17.317) * 19542.349);
+                            float phaseSeed = fract(sin((a_index + 47.77) * 63.721) * 31571.231);
+                            float localTime = u_time * mix(0.72, 1.38, speedSeed) + phaseSeed * TWO_PI;
+                            float radius = length(gravityPosition.xy);
+                            float fieldFlow = mod(u_time * mix(0.046, 0.062, speedSeed), TWO_PI);
+                            float fc = cos(fieldFlow);
+                            float fs = sin(fieldFlow);
+                            gravityPosition.xy = mat2(fc, -fs, fs, fc) * gravityPosition.xy;
+
+                            float flow = mod(localTime * mix(0.018, 0.054, seed) * (1.0 - smoothstep(9.0, 18.0, radius)), TWO_PI);
+                            float c = cos(flow);
+                            float s = sin(flow);
+                            gravityPosition.xy = mat2(c, -s, s, c) * gravityPosition.xy;
+                            gravityPosition.xy += vec2(
+                                sin(mod(localTime * mix(0.08, 0.22, seed) + seed * TWO_PI, TWO_PI)),
+                                cos(mod(localTime * mix(0.07, 0.2, seed) + seed * 8.713, TWO_PI))
+                            ) * mix(0.055, 0.18, seed);
+                            float depthLayer = (depthSeed - 0.5) * mix(4.0, 8.4, sizeSeed);
+                            float depthDrift = sin(mod(localTime * mix(0.035, 0.1, seed) + seed * 12.421, TWO_PI)) * mix(0.1, 0.34, depthSeed);
+                            float layeredZ = clamp(gravityPosition.z + depthLayer + depthDrift, -6.8, 4.2);
+                            vec3 simPosition = vec3(
+                                gravityPosition.xy * u_worldScale,
+                                u_backgroundZ + layeredZ * u_depthScale
+                            );
+                            vec4 mvPosition = modelViewMatrix * vec4(simPosition, 1.0);
+                            float viewDepth = max(-mvPosition.z, 1.0);
+                            float seededSize = mix(0.55, 2.05, pow(sizeSeed, 1.42));
+                            gl_PointSize = clamp((u_particleSize / viewDepth) * seededSize * 2.0, 1.0, 17.0);
+                            gl_Position = projectionMatrix * mvPosition;
+                            vDepth = clamp((viewDepth - 9000.0) / 52000.0, 0.0, 1.0);
+                            vNearness = 1.0 - clamp((viewDepth - 9000.0) / 28000.0, 0.0, 1.0);
+                        }
+                    `,
+                    fragmentShader: `
+                        precision mediump float;
+                        varying float vDepth;
+                        varying float vNearness;
+
+                        void main() {
+                            vec2 uv = gl_PointCoord - vec2(0.5);
+                            float dist = length(uv);
+                            float radius = mix(0.38, 0.49, vNearness);
+                            float core = 1.0 - smoothstep(0.02, radius, dist);
+                            float halo = (1.0 - smoothstep(0.28, 0.5, dist)) * vNearness * 0.24;
+                            float alpha = (pow(max(core, 0.0), mix(1.6, 1.05, vNearness)) + halo) * mix(0.92, 0.46, vDepth);
+                            if (alpha < 0.015) discard;
+                            gl_FragColor = vec4(vec3(0.0, 0.0, 0.0), min(alpha, 0.94));
+                        }
+                    `,
+                    transparent: true,
+                    depthTest: true,
+                    depthWrite: false,
+                    blending: THREE.NormalBlending
+                });
+
+                const gravityPoints = new THREE.Points(particleGeometry, particleMaterial);
+                gravityPoints.frustumCulled = false;
+                gravityPoints.renderOrder = -40;
+                themeGroup.add(gravityPoints);
+
+                const themeStartTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001;
+
+                const syncParticleView = (camera) => {
+                    if (!camera) return;
+
+                    const cameraZ = Math.max(600, Math.abs(Number(camera.position?.z || 1200)));
+                    const cameraFar = Math.max(120000, Number(camera.far || 500000));
+                    const clipSafeDepth = Math.max(14000, cameraFar - cameraZ - 5000);
+                    const backgroundDepth = Math.min(Math.max(26000, cameraZ * 6.0), clipSafeDepth * 0.82);
+                    const viewDistance = cameraZ + backgroundDepth;
+                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
+                    const animationTime = elapsedTime * 8.0;
+                    particleMaterial.uniforms.u_worldScale.value = Math.max(820, backgroundDepth * 0.052);
+                    particleMaterial.uniforms.u_depthScale.value = Math.max(1050, backgroundDepth * 0.075);
+                    particleMaterial.uniforms.u_backgroundZ.value = -backgroundDepth;
+                    particleMaterial.uniforms.u_particleSize.value = Math.max(68000, Math.min(cameraZ * 34, viewDistance * 2.75));
+                    particleMaterial.uniforms.u_time.value = animationTime;
+                    gravityPoints.rotation.z = (animationTime * 0.085) % (Math.PI * 2);
+                    gravityPoints.rotation.x = 0;
+                    gravityPoints.position.x = 0;
+                    gravityPoints.position.y = 0;
+                    gravityPoints.updateMatrixWorld(true);
+                };
+
+                gravityPoints.onBeforeRender = (_renderer, _scene, camera) => {
+                    syncParticleView(camera);
+                };
+
+                // --- 2) XYGrid overlay (same distance-based LOD as XYGrid theme) ---
+                const adaptiveGridOverlay = createAdaptiveXYGridOverlay(new THREE.Color(THEME_GRID_COLOR_SOFT), {
+                    fineDistance: 45000,
+                    coarseDistance: 120000,
+                    farDistance: 320000,
+                    fineSmallOpacity: 0.17,
+                    fineLargeOpacity: 0.1,
+                    coarseSmallOpacity: 0.15,
+                    coarseLargeOpacity: 0.085,
+                    farSmallOpacity: 0.12,
+                    farLargeOpacity: 0.07
+                });
+                themeGroup.add(adaptiveGridOverlay);
+
+                // Animation: galaxy texture simulation and camera tracking for grid
+                themeGroup.animate = (camera, options = {}) => {
+                    if (!camera) return;
+
+                    const isInteractiveMotionFrame = options.isInteractiveFrame === true ||
+                        options.isCameraMoving === true ||
+                        options.isPanning === true ||
+                        options.isZooming === true;
+                    const targetFps = Math.max(0, Number(options.targetFps || 0) || 0);
+                    const steadySimulationStepCount = targetFps > 0
+                        ? Math.max(1, Math.round(32 / targetFps))
+                        : simulationStepsPerTick;
+                    const simulationStepCount = isInteractiveMotionFrame ? 1 : steadySimulationStepCount;
+
+                    if (simulationReady) {
+                        const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                        try {
+                            for (let i = 0; i < simulationStepCount; i++) {
+                                velocityMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                                velocityMaterial.uniforms.u_velocityTexture.value = currentVelocityTarget.texture;
+                                renderComputePass(velocityMaterial, nextVelocityTarget);
+
+                                positionMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                                positionMaterial.uniforms.u_velocityTexture.value = nextVelocityTarget.texture;
+                                renderComputePass(positionMaterial, nextPositionTarget);
+
+                                const oldPositionTarget = currentPositionTarget;
+                                currentPositionTarget = nextPositionTarget;
+                                nextPositionTarget = oldPositionTarget;
+
+                                const oldVelocityTarget = currentVelocityTarget;
+                                currentVelocityTarget = nextVelocityTarget;
+                                nextVelocityTarget = oldVelocityTarget;
+                            }
+
+                            renderer.setRenderTarget(previousTarget);
+
+                            particleMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                        } catch (error) {
+                            simulationReady = false;
+                            if (!simulationWarningShown) {
+                                simulationWarningShown = true;
+                                console.warn('[BackgroundThemes] Galaxy particle simulation stopped.', error);
+                            }
+                            if (renderer.setRenderTarget) {
+                                renderer.setRenderTarget(previousTarget);
+                            }
+                        }
+                    }
+
+                    syncParticleView(camera);
+
+                    adaptiveGridOverlay.animate(camera);
+                };
+
+                themeGroup.customDispose = () => {
+                    themeGroup.traverse(child => {
+                        if (child.geometry) child.geometry.dispose();
+                        if (child.material) {
+                            if (Array.isArray(child.material)) {
+                                child.material.forEach(material => material.dispose());
+                            } else {
+                                child.material.dispose();
+                            }
+                        }
+                    });
+                    initialTextures.positionTexture.dispose();
+                    initialTextures.velocityTexture.dispose();
+                    positionTargetA.dispose();
+                    positionTargetB.dispose();
+                    velocityTargetA.dispose();
+                    velocityTargetB.dispose();
+                    copyMaterial.dispose();
+                    positionMaterial.dispose();
+                    velocityMaterial.dispose();
+                    particleMaterial.dispose();
+                };
+
+                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 8: SpiritFlow (curl-noise particle flow inspired by ref/~spirit)
+        'SpiritFlow': {
+            create: (scene, renderer) => {
+                scene.background = new THREE.Color(THEME_SURFACE_BG);
+
+                const themeGroup = new THREE.Group();
+                const textureWidth = 256;
+                const textureHeight = 256;
+                const pointCount = textureWidth * textureHeight;
+                const resolution = new THREE.Vector2(textureWidth, textureHeight);
+                const renderTargetOptions = {
+                    wrapS: THREE.ClampToEdgeWrapping,
+                    wrapT: THREE.ClampToEdgeWrapping,
+                    minFilter: THREE.NearestFilter,
+                    magFilter: THREE.NearestFilter,
+                    format: THREE.RGBAFormat,
+                    type: THREE.FloatType,
+                    depthBuffer: false,
+                    stencilBuffer: false
+                };
+
+                const createRenderTarget = () => {
+                    const target = new THREE.WebGLRenderTarget(textureWidth, textureHeight, renderTargetOptions);
+                    target.texture.generateMipmaps = false;
+                    return target;
+                };
+
+                const createDefaultPositionTexture = () => {
+                    const data = new Float32Array(pointCount * 4);
+                    for (let i = 0; i < pointCount; i++) {
+                        const offset = i * 4;
+                        const radius = (0.5 + Math.random() * 0.5) * 50;
+                        const phi = (Math.random() - 0.5) * Math.PI;
+                        const theta = Math.random() * Math.PI * 2;
+                        data[offset] = radius * Math.cos(theta) * Math.cos(phi);
+                        data[offset + 1] = radius * Math.sin(phi);
+                        data[offset + 2] = radius * Math.sin(theta) * Math.cos(phi);
+                        data[offset + 3] = Math.random();
+                    }
+
+                    const texture = new THREE.DataTexture(data, textureWidth, textureHeight, THREE.RGBAFormat, THREE.FloatType);
+                    texture.minFilter = THREE.NearestFilter;
+                    texture.magFilter = THREE.NearestFilter;
+                    texture.generateMipmaps = false;
+                    texture.flipY = false;
+                    texture.needsUpdate = true;
+                    return texture;
+                };
+
+                const computeVertexShader = `
+                    void main() {
+                        gl_Position = vec4(position.xy, 0.0, 1.0);
+                    }
+                `;
+
+                const copyMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_texture: { value: null },
+                        u_resolution: { value: resolution }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        uniform sampler2D u_texture;
+                        uniform vec2 u_resolution;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            gl_FragColor = texture2D(u_texture, uv);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const positionMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: null },
+                        u_defaultTexture: { value: null },
+                        u_resolution: { value: resolution },
+                        u_mouse3d: { value: new THREE.Vector3() },
+                        u_speed: { value: 0.81 },
+                        u_dieSpeed: { value: 0 },
+                        u_radius: { value: 0.6 },
+                        u_curlSize: { value: 0.018 },
+                        u_attraction: { value: 0.87 },
+                        u_time: { value: 0 },
+                        u_initAnimation: { value: 0 }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+
+                        uniform sampler2D u_positionTexture;
+                        uniform sampler2D u_defaultTexture;
+                        uniform vec2 u_resolution;
+                        uniform vec3 u_mouse3d;
+                        uniform float u_speed;
+                        uniform float u_dieSpeed;
+                        uniform float u_radius;
+                        uniform float u_curlSize;
+                        uniform float u_attraction;
+                        uniform float u_time;
+                        uniform float u_initAnimation;
+
+                        vec4 mod289(vec4 x) {
+                            return x - floor(x * (1.0 / 289.0)) * 289.0;
+                        }
+
+                        float mod289(float x) {
+                            return x - floor(x * (1.0 / 289.0)) * 289.0;
+                        }
+
+                        vec4 permute(vec4 x) {
+                            return mod289(((x * 34.0) + 1.0) * x);
+                        }
+
+                        float permute(float x) {
+                            return mod289(((x * 34.0) + 1.0) * x);
+                        }
+
+                        vec4 taylorInvSqrt(vec4 r) {
+                            return 1.79284291400159 - 0.85373472095314 * r;
+                        }
+
+                        float taylorInvSqrt(float r) {
+                            return 1.79284291400159 - 0.85373472095314 * r;
+                        }
+
+                        vec4 grad4(float j, vec4 ip) {
+                            const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
+                            vec4 p;
+                            vec4 s;
+
+                            p.xyz = floor(fract(vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
+                            p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
+                            s = vec4(
+                                p.x < 0.0 ? 1.0 : 0.0,
+                                p.y < 0.0 ? 1.0 : 0.0,
+                                p.z < 0.0 ? 1.0 : 0.0,
+                                p.w < 0.0 ? 1.0 : 0.0
+                            );
+                            p.xyz = p.xyz + (s.xyz * 2.0 - 1.0) * s.www;
+
+                            return p;
+                        }
+
+                        #define F4 0.309016994374947451
+
+                        vec4 simplexNoiseDerivatives(vec4 v) {
+                            const vec4 C = vec4(0.138196601125011, 0.276393202250021, 0.414589803375032, -0.447213595499958);
+
+                            vec4 i = floor(v + dot(v, vec4(F4)));
+                            vec4 x0 = v - i + dot(i, C.xxxx);
+
+                            vec4 i0;
+                            vec3 isX = step(x0.yzw, x0.xxx);
+                            vec3 isYZ = step(x0.zww, x0.yyz);
+                            i0.x = isX.x + isX.y + isX.z;
+                            i0.yzw = 1.0 - isX;
+                            i0.y += isYZ.x + isYZ.y;
+                            i0.zw += 1.0 - isYZ.xy;
+                            i0.z += isYZ.z;
+                            i0.w += 1.0 - isYZ.z;
+
+                            vec4 i3 = clamp(i0, 0.0, 1.0);
+                            vec4 i2 = clamp(i0 - 1.0, 0.0, 1.0);
+                            vec4 i1 = clamp(i0 - 2.0, 0.0, 1.0);
+
+                            vec4 x1 = x0 - i1 + C.xxxx;
+                            vec4 x2 = x0 - i2 + C.yyyy;
+                            vec4 x3 = x0 - i3 + C.zzzz;
+                            vec4 x4 = x0 + C.wwww;
+
+                            i = mod289(i);
+                            float j0 = permute(permute(permute(permute(i.w) + i.z) + i.y) + i.x);
+                            vec4 j1 = permute(permute(permute(permute(
+                                      i.w + vec4(i1.w, i2.w, i3.w, 1.0))
+                                    + i.z + vec4(i1.z, i2.z, i3.z, 1.0))
+                                    + i.y + vec4(i1.y, i2.y, i3.y, 1.0))
+                                    + i.x + vec4(i1.x, i2.x, i3.x, 1.0));
+
+                            vec4 ip = vec4(1.0 / 294.0, 1.0 / 49.0, 1.0 / 7.0, 0.0);
+
+                            vec4 p0 = grad4(j0, ip);
+                            vec4 p1 = grad4(j1.x, ip);
+                            vec4 p2 = grad4(j1.y, ip);
+                            vec4 p3 = grad4(j1.z, ip);
+                            vec4 p4 = grad4(j1.w, ip);
+
+                            vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+                            p0 *= norm.x;
+                            p1 *= norm.y;
+                            p2 *= norm.z;
+                            p3 *= norm.w;
+                            p4 *= taylorInvSqrt(dot(p4, p4));
+
+                            vec3 values0 = vec3(dot(p0, x0), dot(p1, x1), dot(p2, x2));
+                            vec2 values1 = vec2(dot(p3, x3), dot(p4, x4));
+
+                            vec3 m0 = max(0.5 - vec3(dot(x0, x0), dot(x1, x1), dot(x2, x2)), 0.0);
+                            vec2 m1 = max(0.5 - vec2(dot(x3, x3), dot(x4, x4)), 0.0);
+
+                            vec3 temp0 = -6.0 * m0 * m0 * values0;
+                            vec2 temp1 = -6.0 * m1 * m1 * values1;
+
+                            vec3 mmm0 = m0 * m0 * m0;
+                            vec2 mmm1 = m1 * m1 * m1;
+
+                            float dx = temp0[0] * x0.x + temp0[1] * x1.x + temp0[2] * x2.x + temp1[0] * x3.x + temp1[1] * x4.x + mmm0[0] * p0.x + mmm0[1] * p1.x + mmm0[2] * p2.x + mmm1[0] * p3.x + mmm1[1] * p4.x;
+                            float dy = temp0[0] * x0.y + temp0[1] * x1.y + temp0[2] * x2.y + temp1[0] * x3.y + temp1[1] * x4.y + mmm0[0] * p0.y + mmm0[1] * p1.y + mmm0[2] * p2.y + mmm1[0] * p3.y + mmm1[1] * p4.y;
+                            float dz = temp0[0] * x0.z + temp0[1] * x1.z + temp0[2] * x2.z + temp1[0] * x3.z + temp1[1] * x4.z + mmm0[0] * p0.z + mmm0[1] * p1.z + mmm0[2] * p2.z + mmm1[0] * p3.z + mmm1[1] * p4.z;
+                            float dw = temp0[0] * x0.w + temp0[1] * x1.w + temp0[2] * x2.w + temp1[0] * x3.w + temp1[1] * x4.w + mmm0[0] * p0.w + mmm0[1] * p1.w + mmm0[2] * p2.w + mmm1[0] * p3.w + mmm1[1] * p4.w;
+
+                            return vec4(dx, dy, dz, dw) * 49.0;
+                        }
+
+                        vec3 curl(vec3 p, float noiseTime, float persistence) {
+                            vec4 xNoisePotentialDerivatives = vec4(0.0);
+                            vec4 yNoisePotentialDerivatives = vec4(0.0);
+                            vec4 zNoisePotentialDerivatives = vec4(0.0);
+
+                            for (int i = 0; i < 3; ++i) {
+                                float twoPowI = pow(2.0, float(i));
+                                float scale = 0.5 * twoPowI * pow(persistence, float(i));
+
+                                xNoisePotentialDerivatives += simplexNoiseDerivatives(vec4(p * twoPowI, noiseTime)) * scale;
+                                yNoisePotentialDerivatives += simplexNoiseDerivatives(vec4((p + vec3(123.4, 129845.6, -1239.1)) * twoPowI, noiseTime)) * scale;
+                                zNoisePotentialDerivatives += simplexNoiseDerivatives(vec4((p + vec3(-9519.0, 9051.0, -123.0)) * twoPowI, noiseTime)) * scale;
+                            }
+
+                            return vec3(
+                                zNoisePotentialDerivatives[1] - yNoisePotentialDerivatives[2],
+                                xNoisePotentialDerivatives[2] - zNoisePotentialDerivatives[0],
+                                yNoisePotentialDerivatives[0] - xNoisePotentialDerivatives[1]
+                            );
+                        }
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            vec4 positionInfo = texture2D(u_positionTexture, uv);
+                            vec4 defaultInfo = texture2D(u_defaultTexture, uv);
+                            vec3 position = mix(vec3(0.0, -200.0, 0.0), positionInfo.xyz, smoothstep(0.0, 0.3, u_initAnimation));
+                            float life = positionInfo.a - u_dieSpeed;
+
+                            vec3 followPosition = mix(
+                                vec3(0.0, -(1.0 - u_initAnimation) * 200.0, 0.0),
+                                u_mouse3d,
+                                smoothstep(0.2, 0.7, u_initAnimation)
+                            );
+
+                            if (life < 0.0) {
+                                position = defaultInfo.xyz * (1.0 + sin(u_time * 15.0) * 0.2 + (1.0 - u_initAnimation)) * 0.4 * u_radius;
+                                position += followPosition;
+                                life = 0.5 + fract(defaultInfo.w * 21.4131 + u_time);
+                            } else {
+                                vec3 delta = followPosition - position;
+                                float distanceToFollow = length(delta);
+                                position += delta * (0.005 + life * 0.01) * u_attraction * (1.0 - smoothstep(50.0, 350.0, distanceToFollow)) * u_speed;
+                                position += curl(position * u_curlSize, u_time, 0.1 + (1.0 - life) * 0.1) * u_speed;
+                            }
+
+                            gl_FragColor = vec4(position, life);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false,
+                    blending: THREE.NoBlending
+                });
+
+                const computeScene = new THREE.Scene();
+                const computeCamera = new THREE.Camera();
+                const computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), copyMaterial);
+                computeQuad.frustumCulled = false;
+                computeScene.add(computeQuad);
+
+                const defaultTexture = createDefaultPositionTexture();
+                let positionTargetA = createRenderTarget();
+                let positionTargetB = createRenderTarget();
+                let currentPositionTarget = positionTargetA;
+                let nextPositionTarget = positionTargetB;
+                let simulationReady = renderer && typeof renderer.setRenderTarget === 'function';
+                let simulationWarningShown = false;
+
+                const renderComputePass = (material, target) => {
+                    computeQuad.material = material;
+                    renderer.setRenderTarget(target);
+                    renderer.render(computeScene, computeCamera);
+                };
+
+                const copyTextureToTarget = (texture, target) => {
+                    copyMaterial.uniforms.u_texture.value = texture;
+                    renderComputePass(copyMaterial, target);
+                };
+
+                if (simulationReady) {
+                    const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                    try {
+                        copyTextureToTarget(defaultTexture, currentPositionTarget);
+                        copyTextureToTarget(defaultTexture, nextPositionTarget);
+                        renderer.setRenderTarget(previousTarget);
+                    } catch (error) {
+                        simulationReady = false;
+                        console.warn('[BackgroundThemes] Spirit particle simulation disabled.', error);
+                        if (renderer.setRenderTarget) {
+                            renderer.setRenderTarget(previousTarget);
+                        }
+                    }
+                }
+
+                const particleGeometry = new THREE.BufferGeometry();
+                const particleUvs = new Float32Array(pointCount * 3);
+                for (let i = 0; i < pointCount; i++) {
+                    const offset = i * 3;
+                    particleUvs[offset] = (i % textureWidth + 0.5) / textureWidth;
+                    particleUvs[offset + 1] = (Math.floor(i / textureWidth) + 0.5) / textureHeight;
+                    particleUvs[offset + 2] = 0;
+                }
+                particleGeometry.setAttribute('position', new THREE.BufferAttribute(particleUvs, 3));
+
+                const backdropMaterial = new THREE.ShaderMaterial({
+                    vertexShader: `
+                        varying vec2 vUv;
+
+                        void main() {
+                            vUv = uv;
+                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                        }
+                    `,
+                    fragmentShader: `
+                        precision mediump float;
+                        varying vec2 vUv;
+
+                        void main() {
+                            vec3 topColor = vec3(0.74, 0.76, 0.75);
+                            vec3 horizonColor = vec3(0.88, 0.89, 0.86);
+                            vec3 bottomColor = vec3(0.60, 0.62, 0.61);
+                            float horizon = 1.0 - smoothstep(0.20, 0.64, abs(vUv.y - 0.53));
+                            vec3 vertical = mix(bottomColor, topColor, smoothstep(0.0, 1.0, vUv.y));
+                            vec3 color = mix(vertical, horizonColor, horizon * 0.78);
+                            gl_FragColor = vec4(color, 1.0);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+                const backdrop = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), backdropMaterial);
+                backdrop.frustumCulled = false;
+                backdrop.renderOrder = -90;
+                themeGroup.add(backdrop);
+
+                const particleMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: simulationReady ? currentPositionTarget.texture : defaultTexture },
+                        u_particleSize: { value: 42000 },
+                        u_worldScale: { value: 120 },
+                        u_depthScale: { value: 85 },
+                        u_backgroundZ: { value: -26000 },
+                        u_color: { value: new THREE.Color(0xffffff) }
+                    },
+                    vertexShader: `
+                        uniform sampler2D u_positionTexture;
+                        uniform float u_particleSize;
+                        uniform float u_worldScale;
+                        uniform float u_depthScale;
+                        uniform float u_backgroundZ;
+                        varying float vLife;
+                        varying float vAlpha;
+                        varying float vNearness;
+                        varying float vShade;
+
+                        void main() {
+                            vec4 positionInfo = texture2D(u_positionTexture, position.xy);
+                            float life = clamp(positionInfo.w, 0.0, 1.0);
+                            vec3 flowPosition = positionInfo.xyz;
+                            float sizeSeed = fract(sin(dot(position.xy, vec2(127.1, 311.7))) * 43758.5453);
+
+                            vec3 simPosition = vec3(
+                                flowPosition.x * u_worldScale,
+                                flowPosition.y * u_worldScale,
+                                u_backgroundZ + flowPosition.z * u_depthScale
+                            );
+
+                            vec4 mvPosition = modelViewMatrix * vec4(simPosition, 1.0);
+                            float viewDepth = max(-mvPosition.z, 1.0);
+                            float fadeOut = smoothstep(0.0, 0.28, life);
+                            float seededSize = mix(0.62, 2.15, pow(sizeSeed, 1.35));
+                            float nearness = 1.0 - clamp((viewDepth - 9000.0) / 28000.0, 0.0, 1.0);
+                            float depthBoost = mix(0.78, 1.62, nearness);
+                            gl_PointSize = clamp((u_particleSize / viewDepth) * seededSize * depthBoost * fadeOut, 0.12, 9.6);
+                            gl_Position = projectionMatrix * mvPosition;
+                            vLife = life;
+                            vAlpha = fadeOut;
+                            vNearness = nearness;
+                            float upperLight = smoothstep(-20.0, 115.0, flowPosition.y);
+                            float frontLight = smoothstep(-90.0, 85.0, flowPosition.z);
+                            vShade = mix(0.46, 1.18, clamp(upperLight * 0.72 + frontLight * 0.35, 0.0, 1.0));
+                        }
+                    `,
+                    fragmentShader: `
+                        precision mediump float;
+                        uniform vec3 u_color;
+                        varying float vLife;
+                        varying float vAlpha;
+                        varying float vNearness;
+                        varying float vShade;
+
+                        void main() {
+                            vec2 uv = gl_PointCoord - vec2(0.5);
+                            float dist = length(uv);
+                            float core = 1.0 - smoothstep(0.16, mix(0.44, 0.5, vNearness), dist);
+                            float halo = (1.0 - smoothstep(0.3, 0.5, dist)) * vNearness * 0.22;
+                            float particleAlpha = (core + halo) * vAlpha;
+                            if (particleAlpha < 0.01) discard;
+                            vec3 outgoingLight = mix(u_color * 0.58, u_color, smoothstep(0.0, 0.7, vLife));
+                            gl_FragColor = vec4(outgoingLight * vShade, min(particleAlpha, 0.96));
+                        }
+                    `,
+                    transparent: true,
+                    depthTest: true,
+                    depthWrite: false,
+                    blending: THREE.NormalBlending
+                });
+
+                const particles = new THREE.Points(particleGeometry, particleMaterial);
+                particles.frustumCulled = false;
+                particles.renderOrder = -40;
+                themeGroup.add(particles);
+
+                const themeStartTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001;
+                let lastElapsedTime = 0;
+                let followPointTime = 0;
+                const followPoint = new THREE.Vector3(0, 0, 0);
+                const autoFollowPoint = new THREE.Vector3(0, 0, 0);
+                const spiritMotion = Object.freeze({
+                    followTimeScale: 0.79,
+                    followBlend: 0.16,
+                    followX: 182,
+                    followY: 49,
+                    followZ: 132,
+                    depthTravelScale: 0.67,
+                    particleSpeed: 0.81,
+                    lifeDecay: 0.013
+                });
+
+                const syncParticleView = (camera, elapsedTime) => {
+                    if (!camera) return;
+
+                    const cameraZ = Math.max(600, Math.abs(Number(camera.position?.z || 1200)));
+                    const cameraFar = Math.max(120000, Number(camera.far || 500000));
+                    const clipSafeDepth = Math.max(14000, cameraFar - cameraZ - 5000);
+                    const backgroundDepth = Math.min(Math.max(26000, cameraZ * 6.0), clipSafeDepth * 0.82);
+                    const viewDistance = cameraZ + backgroundDepth;
+                    const fovRadians = THREE.MathUtils?.degToRad
+                        ? THREE.MathUtils.degToRad(Number(camera.fov || 45))
+                        : Number(camera.fov || 45) * Math.PI / 180;
+                    const viewportHeight = Math.max(1, Math.tan(fovRadians * 0.5) * viewDistance * 2);
+                    const viewportWidth = viewportHeight * Math.max(0.1, Number(camera.aspect || 1));
+                    particleMaterial.uniforms.u_worldScale.value = Math.max(105, backgroundDepth * 0.0043);
+                    particleMaterial.uniforms.u_depthScale.value = Math.max(56, backgroundDepth * 0.0037 * spiritMotion.depthTravelScale);
+                    particleMaterial.uniforms.u_backgroundZ.value = -backgroundDepth;
+                    particleMaterial.uniforms.u_particleSize.value = Math.max(44000, viewDistance * 1.92);
+                    particles.rotation.z = Math.sin(elapsedTime * 0.08) * 0.08;
+                    particles.rotation.x = Math.sin(elapsedTime * 0.11) * 0.05;
+                    particles.position.x = Number(camera.position?.x || 0);
+                    particles.position.y = Number(camera.position?.y || 0);
+                    particles.updateMatrixWorld(true);
+                    backdrop.position.x = Number(camera.position?.x || 0);
+                    backdrop.position.y = Number(camera.position?.y || 0);
+                    backdrop.position.z = -backgroundDepth - 1200;
+                    backdrop.scale.set(viewportWidth * 1.12, viewportHeight * 1.12, 1);
+                    backdrop.updateMatrixWorld(true);
+                };
+
+                particles.onBeforeRender = (_renderer, _scene, camera) => {
+                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
+                    syncParticleView(camera, elapsedTime);
+                };
+
+                themeGroup.animate = (camera) => {
+                    if (!camera) return;
+
+                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
+                    const deltaMs = Math.min(48, Math.max(0, (elapsedTime - lastElapsedTime) * 1000 || 16.6667));
+                    const deltaRatio = deltaMs / 16.6667;
+                    lastElapsedTime = elapsedTime;
+
+                    followPointTime += deltaMs * 0.001 * spiritMotion.followTimeScale;
+                    autoFollowPoint.set(
+                        Math.cos(followPointTime * 0.9) * spiritMotion.followX,
+                        Math.cos(followPointTime * 2.8) * spiritMotion.followY,
+                        Math.sin(followPointTime * 1.55) * spiritMotion.followZ
+                    );
+                    followPoint.lerp(autoFollowPoint, Math.min(1.0, spiritMotion.followBlend * deltaRatio));
+
+                    if (simulationReady) {
+                        const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                        try {
+                            positionMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                            positionMaterial.uniforms.u_defaultTexture.value = defaultTexture;
+                            positionMaterial.uniforms.u_mouse3d.value.copy(followPoint);
+                            positionMaterial.uniforms.u_speed.value = spiritMotion.particleSpeed * deltaRatio;
+                            positionMaterial.uniforms.u_dieSpeed.value = spiritMotion.lifeDecay * deltaRatio;
+                            positionMaterial.uniforms.u_time.value = elapsedTime;
+                            positionMaterial.uniforms.u_initAnimation.value = Math.min(1, elapsedTime * 0.25);
+                            renderComputePass(positionMaterial, nextPositionTarget);
+
+                            const oldPositionTarget = currentPositionTarget;
+                            currentPositionTarget = nextPositionTarget;
+                            nextPositionTarget = oldPositionTarget;
+                            renderer.setRenderTarget(previousTarget);
+
+                            particleMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                        } catch (error) {
+                            simulationReady = false;
+                            if (!simulationWarningShown) {
+                                simulationWarningShown = true;
+                                console.warn('[BackgroundThemes] Spirit particle simulation stopped.', error);
+                            }
+                            if (renderer.setRenderTarget) {
+                                renderer.setRenderTarget(previousTarget);
+                            }
+                        }
+                    }
+
+                    syncParticleView(camera, elapsedTime);
+                };
+
+                themeGroup.customDispose = () => {
+                    themeGroup.traverse(child => {
+                        if (child.geometry) child.geometry.dispose();
+                        if (child.material) {
+                            if (Array.isArray(child.material)) {
+                                child.material.forEach(material => material.dispose());
+                            } else {
+                                child.material.dispose();
+                            }
+                        }
+                    });
+                    defaultTexture.dispose();
+                    positionTargetA.dispose();
+                    positionTargetB.dispose();
+                    copyMaterial.dispose();
+                    positionMaterial.dispose();
+                    particleMaterial.dispose();
+                    backdropMaterial.dispose();
+                };
+
+                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 9: None (no background)
+        'None': { create: (scene) => { scene.background = new THREE.Color(THEME_SURFACE_BG); return null; }, dispose: (themeObject) => { } }
+    };
 
     // --- Expose theme manager on window ---
-    window.MindMapThemes = {
-        getTheme: (themeName) => themes[themeName],
-        getAnimationMode: getThemeAnimationMode,
-        shouldAnimate: shouldAnimateTheme,
-        runAnimationIfNeeded: runThemeAnimationIfNeeded,
-        disposeShared: () => { if (plusTexture) { plusTexture.dispose(); plusTexture = null; } console.log('[BackgroundThemes] Shared resources disposed.'); }
-    };
+    window.MindMapThemes = {
+        getTheme: (themeName) => themes[themeName],
+        getAnimationMode: getThemeAnimationMode,
+        shouldAnimate: shouldAnimateTheme,
+        runAnimationIfNeeded: runThemeAnimationIfNeeded,
+        disposeShared: () => { if (plusTexture) { plusTexture.dispose(); plusTexture = null; } console.log('[BackgroundThemes] Shared resources disposed.'); }
+    };
 
     console.log('✅ background-themes.js loaded (InfiniteGridHelper integrated)');
 })();