Put your HTML text here<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neural Network</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.2);
    --neon-accent: #667eea;
    --text-main: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.6);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}
body {
    overflow: hidden;
    background: #050508;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
}
canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.glass-panel {
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border: 1px solid var(--glass-border);
    border-top: 1px solid var(--glass-highlight);
    border-left: 1px solid var(--glass-highlight);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    color: var(--text-main);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: absolute;
    z-index: 10;
    overflow: hidden;
}
.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    transform: skewX(-15deg);
    transition: 0.5s;
    pointer-events: none;
}
.glass-panel:hover {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}
.glass-panel:hover::before {
    left: 150%;
    transition: 0.7s ease-in-out;
}
#instructions-container {
    top: 32px;
    left: 32px;
    width: 280px;
    padding: 24px;
}
#instruction-title {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 30%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.instruction-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    font-weight: 300;
}
#theme-selector {
    top: 32px;
    right: 32px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 220px;
}
#theme-selector-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    justify-items: center;
}
.theme-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 10px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.2);
}
#theme-1 { background: radial-gradient(circle at 30% 30%, #a78bfa, #4c1d95); }
#theme-2 { background: radial-gradient(circle at 30% 30%, #fb7185, #9f1239); }
#theme-3 { background: radial-gradient(circle at 30% 30%, #38bdf8, #0c4a6e); }
.theme-button::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.3s ease;
}
.theme-button:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 2px 6px rgba(255,255,255,0.6);
}
.theme-button.active::after {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}
#density-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.density-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 300;
}
#density-value {
    color: white;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.density-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.density-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow:
        0 0 15px rgba(255,255,255,0.8),
        0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    margin-top: -6px;
    position: relative;
    z-index: 2;
}
.density-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) var(--val, 100%), rgba(255,255,255,0.05) var(--val, 100%));
    border-radius: 3px;
}
.density-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(255,255,255,1);
}
#control-buttons {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    z-index: 20;
    padding: 8px;
    background: rgba(0,0,0,0.1);
}
.control-button {
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--text-main);
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 10px rgba(255,255,255,0.02);
    overflow: hidden;
    position: relative;
    min-width: 100px;
    text-align: center;
}
.control-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.control-button:active {
    transform: translateY(-1px);
}
.control-button span {
    position: relative;
    z-index: 2;
}
@media (max-width: 640px) {
    #instructions-container {
        top: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        padding: 16px;
        background: rgba(10, 10, 15, 0.6);
    }
    #theme-selector {
        top: auto;
        bottom: 100px;
        left: 16px;
        right: 16px;
        width: auto;
        padding: 16px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .theme-grid {
        margin-top: 0;
    }
    #control-buttons {
        bottom: 24px;
        width: 100%;
        justify-content: center;
        gap: 8px;
        padding: 0 16px;
    }
    .control-button {
        padding: 10px 16px;
        min-width: auto;
        font-size: 11px;
        flex: 1;
    }
}
#instructions-container, #theme-selector, #control-buttons { display: none !important; }
#title-card {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  opacity: 0.5;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  white-space: nowrap;
}
</style>
<div id="title-card">Quantum Neural Network</div>
<div id="instructions-container" class="glass-panel">
    <div id="instruction-title">Quantum Neural Network</div>
    <div class="instruction-text">Click to send energy pulses. <br>Drag to explore the structure.</div>
</div>
<div id="theme-selector" class="glass-panel">
    <div style="flex: 1;">
        <div id="theme-selector-title"></div>
        <div class="theme-grid">
            <button class="theme-button active" id="theme-1" data-theme="0" aria-label="Purple Nebula"></button>
            <button class="theme-button" id="theme-2" data-theme="1" aria-label="Sunset Fire"></button>
            <button class="theme-button" id="theme-3" data-theme="2" aria-label="Ocean Aurora"></button>
        </div>
    </div>
    <div id="density-controls" style="flex: 1;">
        <div class="density-label"><span>Density</span><span id="density-value">100%</span></div>
        <input type="range" min="30" max="100" value="100" class="density-slider" id="density-slider"
            aria-label="Network Density" oninput="this.style.setProperty('--val', this.value + '%')">
    </div>
</div>
<div id="control-buttons">
    <button id="change-formation-btn" class="control-button"><span>Morph</span></button>
    <button id="pause-play-btn" class="control-button"><span>Freeze</span></button>
    <button id="reset-camera-btn" class="control-button"><span>Reset</span></button>
</div>
<canvas id="neural-network-canvas"></canvas>
<script type="importmap">
{
    "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.162.0/examples/jsm/"
    }
}
</script>
<script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
    import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
    import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
    const config = {
        paused: false,
        activePaletteIndex: 0,
        currentFormation: 0,
        numFormations: 3,
        densityFactor: 1
    };
    const colorPalettes = [
        [
            new THREE.Color(0x667eea),
            new THREE.Color(0x764ba2),
            new THREE.Color(0xf093fb),
            new THREE.Color(0x9d50bb),
            new THREE.Color(0x6e48aa)
        ],
        [
            new THREE.Color(0xf857a6),
            new THREE.Color(0xff5858),
            new THREE.Color(0xfeca57),
            new THREE.Color(0xff6348),
            new THREE.Color(0xff9068)
        ],
        [
            new THREE.Color(0x4facfe),
            new THREE.Color(0x00f2fe),
            new THREE.Color(0x43e97b),
            new THREE.Color(0x38f9d7),
            new THREE.Color(0x4484ce)
        ]
    ];
    const scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.002);
    const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 8, 28);
    const canvasElement = document.getElementById('neural-network-canvas');
    const renderer = new THREE.WebGLRenderer({
        canvas: canvasElement,
        antialias: true,
        powerPreference: "high-performance"
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setClearColor(0x000000);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    function createStarfield() {
        const count = 8000;
        const positions = [];
        const colors = [];
        const sizes = [];
        for (let i = 0; i < count; i++) {
            const r = THREE.MathUtils.randFloat(50, 150);
            const phi = Math.acos(THREE.MathUtils.randFloatSpread(2));
            const theta = THREE.MathUtils.randFloat(0, Math.PI * 2);
            positions.push(
                r * Math.sin(phi) * Math.cos(theta),
                r * Math.sin(phi) * Math.sin(theta),
                r * Math.cos(phi)
            );
            const colorChoice = Math.random();
            if (colorChoice < 0.7) {
                colors.push(1, 1, 1);
            } else if (colorChoice < 0.85) {
                colors.push(0.7, 0.8, 1);
            } else {
                colors.push(1, 0.9, 0.8);
            }
            sizes.push(THREE.MathUtils.randFloat(0.1, 0.3));
        }
        const geo = new THREE.BufferGeometry();
        geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
        geo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
        geo.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
        const mat = new THREE.ShaderMaterial({
            uniforms: {
                uTime: { value: 0 }
            },
            vertexShader: `
                attribute float size;
                attribute vec3 color;
                varying vec3 vColor;
                uniform float uTime;
                void main() {
                    vColor = color;
                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
                    float twinkle = sin(uTime * 2.0 + position.x * 100.0) * 0.3 + 0.7;
                    gl_PointSize = size * twinkle * (300.0 / -mvPosition.z);
                    gl_Position = projectionMatrix * mvPosition;
                }
            `,
            fragmentShader: `
                varying vec3 vColor;
                void main() {
                    vec2 center = gl_PointCoord - 0.5;
                    float dist = length(center);
                    if (dist > 0.5) discard;
                    float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
                    gl_FragColor = vec4(vColor, alpha * 0.8);
                }
            `,
            transparent: true,
            depthWrite: false,
            blending: THREE.AdditiveBlending
        });
        return new THREE.Points(geo, mat);
    }
    const starField = createStarfield();
    scene.add(starField);
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.rotateSpeed = 0.6;
    controls.minDistance = 8;
    controls.maxDistance = 80;
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.2;
    controls.enablePan = false;
    const composer = new EffectComposer(renderer);
    composer.addPass(new RenderPass(scene, camera));
    const bloomPass = new UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        1.8,
        0.6,
        0.7
    );
    composer.addPass(bloomPass);
    composer.addPass(new OutputPass());
    const pulseUniforms = {
        uTime: { value: 0.0 },
        uPulsePositions: { value: [
            new THREE.Vector3(1e3, 1e3, 1e3),
            new THREE.Vector3(1e3, 1e3, 1e3),
            new THREE.Vector3(1e3, 1e3, 1e3)
        ]},
        uPulseTimes: { value: [-1e3, -1e3, -1e3] },
        uPulseColors: { value: [
            new THREE.Color(1, 1, 1),
            new THREE.Color(1, 1, 1),
            new THREE.Color(1, 1, 1)
        ]},
        uPulseSpeed: { value: 18.0 },
        uBaseNodeSize: { value: 0.6 }
    };
    const noiseFunctions = `
    vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
    vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
    vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
    vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
    
    float snoise(vec3 v) {
        const vec2 C = vec2(1.0/6.0, 1.0/3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
        
        vec3 i = floor(v + dot(v, C.yyy));
        vec3 x0 = v - i + dot(i, C.xxx);
        
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min(g.xyz, l.zxy);
        vec3 i2 = max(g.xyz, l.zxy);
        
        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy;
        vec3 x3 = x0 - D.yyy;
        
        i = mod289(i);
        vec4 p = permute(permute(permute(
            i.z + vec4(0.0, i1.z, i2.z, 1.0))
            + i.y + vec4(0.0, i1.y, i2.y, 1.0))
            + i.x + vec4(0.0, i1.x, i2.x, 1.0));
            
        float n_ = 0.142857142857;
        vec3 ns = n_ * D.wyz - D.xzx;
        
        vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
        vec4 x_ = floor(j * ns.z);
        vec4 y_ = floor(j - 7.0 * x_);
        
        vec4 x = x_ * ns.x + ns.yyyy;
        vec4 y = y_ * ns.x + ns.yyyy;
        vec4 h = 1.0 - abs(x) - abs(y);
        
        vec4 b0 = vec4(x.xy, y.xy);
        vec4 b1 = vec4(x.zw, y.zw);
        
        vec4 s0 = floor(b0) * 2.0 + 1.0;
        vec4 s1 = floor(b1) * 2.0 + 1.0;
        vec4 sh = -step(h, vec4(0.0));
        
        vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
        vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
        
        vec3 p0 = vec3(a0.xy, h.x);
        vec3 p1 = vec3(a0.zw, h.y);
        vec3 p2 = vec3(a1.xy, h.z);
        vec3 p3 = vec3(a1.zw, h.w);
        
        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;
        
        vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
        m = m * m;
        return 42.0 * dot(m * m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
    }`;
    const nodeShader = {
        vertexShader: `${noiseFunctions}
        attribute float nodeSize;
        attribute float nodeType;
        attribute vec3 nodeColor;
        attribute float distanceFromRoot;
        
        uniform float uTime;
        uniform vec3 uPulsePositions[3];
        uniform float uPulseTimes[3];
        uniform float uPulseSpeed;
        uniform float uBaseNodeSize;
        
        varying vec3 vColor;
        varying float vNodeType;
        varying vec3 vPosition;
        varying float vPulseIntensity;
        varying float vDistanceFromRoot;
        varying float vGlow;
        float getPulseIntensity(vec3 worldPos, vec3 pulsePos, float pulseTime) {
            if (pulseTime < 0.0) return 0.0;
            float timeSinceClick = uTime - pulseTime;
            if (timeSinceClick < 0.0 || timeSinceClick > 4.0) return 0.0;
            float pulseRadius = timeSinceClick * uPulseSpeed;
            float distToClick = distance(worldPos, pulsePos);
            float pulseThickness = 3.0;
            float waveProximity = abs(distToClick - pulseRadius);
            return smoothstep(pulseThickness, 0.0, waveProximity) * smoothstep(4.0, 0.0, timeSinceClick);
        }
        void main() {
            vNodeType = nodeType;
            vColor = nodeColor;
            vDistanceFromRoot = distanceFromRoot;
            vec3 worldPos = (modelMatrix * vec4(position, 1.0)).xyz;
            vPosition = worldPos;
            float totalPulseIntensity = 0.0;
            for (int i = 0; i < 3; i++) {
                totalPulseIntensity += getPulseIntensity(worldPos, uPulsePositions[i], uPulseTimes[i]);
            }
            vPulseIntensity = min(totalPulseIntensity, 1.0);
            float breathe = sin(uTime * 0.7 + distanceFromRoot * 0.15) * 0.15 + 0.85;
            float baseSize = nodeSize * breathe;
            float pulseSize = baseSize * (1.0 + vPulseIntensity * 2.5);
            vGlow = 0.5 + 0.5 * sin(uTime * 0.5 + distanceFromRoot * 0.2);
            vec3 modifiedPosition = position;
            if (nodeType > 0.5) {
                float noise = snoise(position * 0.08 + uTime * 0.08);
                modifiedPosition += normal * noise * 0.15;
            }
            vec4 mvPosition = modelViewMatrix * vec4(modifiedPosition, 1.0);
            gl_PointSize = pulseSize * uBaseNodeSize * (1000.0 / -mvPosition.z);
            gl_Position = projectionMatrix * mvPosition;
        }`,
        fragmentShader: `
        uniform float uTime;
        uniform vec3 uPulseColors[3];
        
        varying vec3 vColor;
        varying float vNodeType;
        varying vec3 vPosition;
        varying float vPulseIntensity;
        varying float vDistanceFromRoot;
        varying float vGlow;
        void main() {
            vec2 center = 2.0 * gl_PointCoord - 1.0;
            float dist = length(center);
            if (dist > 1.0) discard;
            float glow1 = 1.0 - smoothstep(0.0, 0.5, dist);
            float glow2 = 1.0 - smoothstep(0.0, 1.0, dist);
            float glowStrength = pow(glow1, 1.2) + glow2 * 0.3;
            float breatheColor = 0.9 + 0.1 * sin(uTime * 0.6 + vDistanceFromRoot * 0.25);
            vec3 baseColor = vColor * breatheColor;
            vec3 finalColor = baseColor;
            if (vPulseIntensity > 0.0) {
                vec3 pulseColor = mix(vec3(1.0), uPulseColors[0], 0.4);
                finalColor = mix(baseColor, pulseColor, vPulseIntensity * 0.8);
                finalColor *= (1.0 + vPulseIntensity * 1.2);
                glowStrength *= (1.0 + vPulseIntensity);
            }
            float coreBrightness = smoothstep(0.4, 0.0, dist);
            finalColor += vec3(1.0) * coreBrightness * 0.3;
            float alpha = glowStrength * (0.95 - 0.3 * dist);
            float camDistance = length(vPosition - cameraPosition);
            float distanceFade = smoothstep(100.0, 15.0, camDistance);
            if (vNodeType > 0.5) {
                finalColor *= 1.1;
                alpha *= 0.9;
            }
            finalColor *= (1.0 + vGlow * 0.1);
            gl_FragColor = vec4(finalColor, alpha * distanceFade);
        }`
    };
    const connectionShader = {
        vertexShader: `${noiseFunctions}
        attribute vec3 startPoint;
        attribute vec3 endPoint;
        attribute float connectionStrength;
        attribute float pathIndex;
        attribute vec3 connectionColor;
        
        uniform float uTime;
        uniform vec3 uPulsePositions[3];
        uniform float uPulseTimes[3];
        uniform float uPulseSpeed;
        
        varying vec3 vColor;
        varying float vConnectionStrength;
        varying float vPulseIntensity;
        varying float vPathPosition;
        varying float vDistanceFromCamera;
        float getPulseIntensity(vec3 worldPos, vec3 pulsePos, float pulseTime) {
            if (pulseTime < 0.0) return 0.0;
            float timeSinceClick = uTime - pulseTime;
            if (timeSinceClick < 0.0 || timeSinceClick > 4.0) return 0.0;
            
            float pulseRadius = timeSinceClick * uPulseSpeed;
            float distToClick = distance(worldPos, pulsePos);
            float pulseThickness = 3.0;
            float waveProximity = abs(distToClick - pulseRadius);
            
            return smoothstep(pulseThickness, 0.0, waveProximity) * smoothstep(4.0, 0.0, timeSinceClick);
        }
        void main() {
            float t = position.x;
            vPathPosition = t;
            vec3 midPoint = mix(startPoint, endPoint, 0.5);
            float pathOffset = sin(t * 3.14159) * 0.15;
            vec3 perpendicular = normalize(cross(normalize(endPoint - startPoint), vec3(0.0, 1.0, 0.0)));
            if (length(perpendicular) < 0.1) perpendicular = vec3(1.0, 0.0, 0.0);
            midPoint += perpendicular * pathOffset;
            vec3 p0 = mix(startPoint, midPoint, t);
            vec3 p1 = mix(midPoint, endPoint, t);
            vec3 finalPos = mix(p0, p1, t);
            float noiseTime = uTime * 0.15;
            float noise = snoise(vec3(pathIndex * 0.08, t * 0.6, noiseTime));
            finalPos += perpendicular * noise * 0.12;
            vec3 worldPos = (modelMatrix * vec4(finalPos, 1.0)).xyz;
            float totalPulseIntensity = 0.0;
            for (int i = 0; i < 3; i++) {
                totalPulseIntensity += getPulseIntensity(worldPos, uPulsePositions[i], uPulseTimes[i]);
            }
            vPulseIntensity = min(totalPulseIntensity, 1.0);
            vColor = connectionColor;
            vConnectionStrength = connectionStrength;
            
            vDistanceFromCamera = length(worldPos - cameraPosition);
            gl_Position = projectionMatrix * modelViewMatrix * vec4(finalPos, 1.0);
        }`,
        fragmentShader: `
        uniform float uTime;
        uniform vec3 uPulseColors[3];
        
        varying vec3 vColor;
        varying float vConnectionStrength;
        varying float vPulseIntensity;
        varying float vPathPosition;
        varying float vDistanceFromCamera;
        void main() {
            float flowPattern1 = sin(vPathPosition * 25.0 - uTime * 4.0) * 0.5 + 0.5;
            float flowPattern2 = sin(vPathPosition * 15.0 - uTime * 2.5 + 1.57) * 0.5 + 0.5;
            float combinedFlow = (flowPattern1 + flowPattern2 * 0.5) / 1.5;
            
            vec3 baseColor = vColor * (0.8 + 0.2 * sin(uTime * 0.6 + vPathPosition * 12.0));
            float flowIntensity = 0.4 * combinedFlow * vConnectionStrength;
            vec3 finalColor = baseColor;
            if (vPulseIntensity > 0.0) {
                vec3 pulseColor = mix(vec3(1.0), uPulseColors[0], 0.3);
                finalColor = mix(baseColor, pulseColor * 1.2, vPulseIntensity * 0.7);
                flowIntensity += vPulseIntensity * 0.8;
            }
            finalColor *= (0.7 + flowIntensity + vConnectionStrength * 0.5);
            float baseAlpha = 0.7 * vConnectionStrength;
            float flowAlpha = combinedFlow * 0.3;
            float alpha = baseAlpha + flowAlpha;
            alpha = mix(alpha, min(1.0, alpha * 2.5), vPulseIntensity);
            float distanceFade = smoothstep(100.0, 15.0, vDistanceFromCamera);
            gl_FragColor = vec4(finalColor, alpha * distanceFade);
        }`
    };
    class Node {
        constructor(position, level = 0, type = 0) {
            this.position = position;
            this.connections = [];
            this.level = level;
            this.type = type;
            this.size = type === 0 ? THREE.MathUtils.randFloat(0.8, 1.4) : THREE.MathUtils.randFloat(0.5, 1.0);
            this.distanceFromRoot = 0;
        }
        addConnection(node, strength = 1.0) {
            if (!this.isConnectedTo(node)) {
                this.connections.push({ node, strength });
                node.connections.push({ node: this, strength });
            }
        }
        isConnectedTo(node) {
            return this.connections.some(conn => conn.node === node);
        }
    }
    function generateNeuralNetwork(formationIndex, densityFactor = 1.0) {
        let nodes = [];
        let rootNode;
        function generateCrystallineSphere() {
            rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0);
            rootNode.size = 2.0;
            nodes.push(rootNode);
            const layers = 5;
            const goldenRatio = (1 + Math.sqrt(5)) / 2;
            for (let layer = 1; layer <= layers; layer++) {
                const radius = layer * 4;
                const numPoints = Math.floor(layer * 12 * densityFactor);
                for (let i = 0; i < numPoints; i++) {
                    const phi = Math.acos(1 - 2 * (i + 0.5) / numPoints);
                    const theta = 2 * Math.PI * i / goldenRatio;
                    const pos = new THREE.Vector3(
                        radius * Math.sin(phi) * Math.cos(theta),
                        radius * Math.sin(phi) * Math.sin(theta),
                        radius * Math.cos(phi)
                    );
                    const isLeaf = layer === layers || Math.random() < 0.3;
                    const node = new Node(pos, layer, isLeaf ? 1 : 0);
                    node.distanceFromRoot = radius;
                    nodes.push(node);
                    if (layer > 1) {
                        const prevLayerNodes = nodes.filter(n => n.level === layer - 1 && n !== rootNode);
                        prevLayerNodes.sort((a, b) =>
                            pos.distanceTo(a.position) - pos.distanceTo(b.position)
                        );
                        for (let j = 0; j < Math.min(3, prevLayerNodes.length); j++) {
                            const dist = pos.distanceTo(prevLayerNodes[j].position);
                            const strength = 1.0 - (dist / (radius * 2));
                            node.addConnection(prevLayerNodes[j], Math.max(0.3, strength));
                        }
                    } else {
                        rootNode.addConnection(node, 0.9);
                    }
                }
                const layerNodes = nodes.filter(n => n.level === layer && n !== rootNode);
                for (let i = 0; i < layerNodes.length; i++) {
                    const node = layerNodes[i];
                    const nearby = layerNodes.filter(n => n !== node)
                        .sort((a, b) =>
                            node.position.distanceTo(a.position) - node.position.distanceTo(b.position)
                        ).slice(0, 5);
                    for (const nearNode of nearby) {
                        const dist = node.position.distanceTo(nearNode.position);
                        if (dist < radius * 0.8 && !node.isConnectedTo(nearNode)) {
                            node.addConnection(nearNode, 0.6);
                        }
                    }
                }
            }
            const outerNodes = nodes.filter(n => n.level >= 3);
            for (let i = 0; i < Math.min(20, outerNodes.length); i++) {
                const n1 = outerNodes[Math.floor(Math.random() * outerNodes.length)];
                const n2 = outerNodes[Math.floor(Math.random() * outerNodes.length)];
                if (n1 !== n2 && !n1.isConnectedTo(n2) &&
                    Math.abs(n1.level - n2.level) > 1) {
                    n1.addConnection(n2, 0.4);
                }
            }
        }
        function generateHelixLattice() {
            rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0);
            rootNode.size = 1.8;
            nodes.push(rootNode);
            const numHelices = 4;
            const height = 30;
            const maxRadius = 12;
            const nodesPerHelix = Math.floor(50 * densityFactor);
            const helixArrays = [];
            for (let h = 0; h < numHelices; h++) {
                const helixPhase = (h / numHelices) * Math.PI * 2;
                const helixNodes = [];
                for (let i = 0; i < nodesPerHelix; i++) {
                    const t = i / (nodesPerHelix - 1);
                    const y = (t - 0.5) * height;
                    const radiusScale = Math.sin(t * Math.PI) * 0.7 + 0.3;
                    const radius = maxRadius * radiusScale;
                    const angle = helixPhase + t * Math.PI * 6;
                    const pos = new THREE.Vector3(
                        radius * Math.cos(angle),
                        y,
                        radius * Math.sin(angle)
                    );
                    const level = Math.ceil(t * 5);
                    const isLeaf = i > nodesPerHelix - 5 || Math.random() < 0.25;
                    const node = new Node(pos, level, isLeaf ? 1 : 0);
                    node.distanceFromRoot = Math.sqrt(radius * radius + y * y);
                    node.helixIndex = h;
                    node.helixT = t;
                    nodes.push(node);
                    helixNodes.push(node);
                }
                helixArrays.push(helixNodes);
                rootNode.addConnection(helixNodes[0], 1.0);
                for (let i = 0; i < helixNodes.length - 1; i++) {
                    helixNodes[i].addConnection(helixNodes[i + 1], 0.85);
                }
            }
            for (let h = 0; h < numHelices; h++) {
                const currentHelix = helixArrays[h];
                const nextHelix = helixArrays[(h + 1) % numHelices];
                for (let i = 0; i < currentHelix.length; i += 5) {
                    const t = currentHelix[i].helixT;
                    const targetIdx = Math.round(t * (nextHelix.length - 1));
                    if (targetIdx < nextHelix.length) {
                        currentHelix[i].addConnection(nextHelix[targetIdx], 0.7);
                    }
                }
            }
            for (const helix of helixArrays) {
                for (let i = 0; i < helix.length; i += 8) {
                    const node = helix[i];
                    const innerNodes = nodes.filter(n =>
                        n !== node &&
                        n !== rootNode &&
                        n.distanceFromRoot < node.distanceFromRoot * 0.5
                    );
                    if (innerNodes.length > 0) {
                        const nearest = innerNodes.sort((a, b) =>
                            node.position.distanceTo(a.position) - node.position.distanceTo(b.position)
                        )[0];
                        node.addConnection(nearest, 0.5);
                    }
                }
            }
            const allHelixNodes = nodes.filter(n => n !== rootNode);
            for (let i = 0; i < Math.floor(30 * densityFactor); i++) {
                const n1 = allHelixNodes[Math.floor(Math.random() * allHelixNodes.length)];
                const nearby = allHelixNodes.filter(n => {
                    const dist = n.position.distanceTo(n1.position);
                    return n !== n1 && dist < 8 && dist > 3 && !n1.isConnectedTo(n);
                });
                if (nearby.length > 0) {
                    const n2 = nearby[Math.floor(Math.random() * nearby.length)];
                    n1.addConnection(n2, 0.45);
                }
            }
        }
        function generateFractalWeb() {
            rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0);
            rootNode.size = 1.6;
            nodes.push(rootNode);
            const branches = 6;
            const maxDepth = 4;
            function createBranch(startNode, direction, depth, strength, scale) {
                if (depth > maxDepth) return;
                const branchLength = 5 * scale;
                const endPos = new THREE.Vector3()
                    .copy(startNode.position)
                    .add(direction.clone().multiplyScalar(branchLength));
                const isLeaf = depth === maxDepth || Math.random() < 0.3;
                const newNode = new Node(endPos, depth, isLeaf ? 1 : 0);
                newNode.distanceFromRoot = rootNode.position.distanceTo(endPos);
                nodes.push(newNode);
                startNode.addConnection(newNode, strength);
                if (depth < maxDepth) {
                    const subBranches = 3;
                    for (let i = 0; i < subBranches; i++) {
                        const angle = (i / subBranches) * Math.PI * 2;
                        const perpDir1 = new THREE.Vector3(-direction.y, direction.x, 0).normalize();
                        const perpDir2 = direction.clone().cross(perpDir1).normalize();
                        const newDir = new THREE.Vector3()
                            .copy(direction)
                            .add(perpDir1.clone().multiplyScalar(Math.cos(angle) * 0.7))
                            .add(perpDir2.clone().multiplyScalar(Math.sin(angle) * 0.7))
                            .normalize();
                        createBranch(newNode, newDir, depth + 1, strength * 0.7, scale * 0.75);
                    }
                }
            }
            for (let i = 0; i < branches; i++) {
                const phi = Math.acos(1 - 2 * (i + 0.5) / branches);
                const theta = Math.PI * (1 + Math.sqrt(5)) * i;
                const direction = new THREE.Vector3(
                    Math.sin(phi) * Math.cos(theta),
                    Math.sin(phi) * Math.sin(theta),
                    Math.cos(phi)
                ).normalize();
                createBranch(rootNode, direction, 1, 0.9, 1.0);
            }
            const leafNodes = nodes.filter(n => n.level >= 2);
            for (let i = 0; i < leafNodes.length; i++) {
                const node = leafNodes[i];
                const nearby = leafNodes.filter(n => {
                    const dist = n.position.distanceTo(node.position);
                    return n !== node && dist < 10 && !node.isConnectedTo(n);
                }).sort((a, b) =>
                    node.position.distanceTo(a.position) - node.position.distanceTo(b.position)
                ).slice(0, 3);
                for (const nearNode of nearby) {
                    if (Math.random() < 0.5 * densityFactor) {
                        node.addConnection(nearNode, 0.5);
                    }
                }
            }
            const midLevelNodes = nodes.filter(n => n.level >= 2 && n.level <= 3);
            for (const node of midLevelNodes) {
                if (Math.random() < 0.3) {
                    const innerNodes = nodes.filter(n =>
                        n !== node &&
                        n.distanceFromRoot < node.distanceFromRoot * 0.6
                    );
                    if (innerNodes.length > 0) {
                        const target = innerNodes[Math.floor(Math.random() * innerNodes.length)];
                        if (!node.isConnectedTo(target)) {
                            node.addConnection(target, 0.4);
                        }
                    }
                }
            }
        }
        switch (formationIndex % 3) {
            case 0: generateCrystallineSphere(); break;
            case 1: generateHelixLattice(); break;
            case 2: generateFractalWeb(); break;
        }
        if (densityFactor < 1.0) {
            const targetCount = Math.ceil(nodes.length * Math.max(0.3, densityFactor));
            const toKeep = new Set([rootNode]);
            const sortedNodes = nodes.filter(n => n !== rootNode)
                .sort((a, b) => {
                    const scoreA = a.connections.length * (1 / (a.distanceFromRoot + 1));
                    const scoreB = b.connections.length * (1 / (b.distanceFromRoot + 1));
                    return scoreB - scoreA;
                });
            for (let i = 0; i < Math.min(targetCount - 1, sortedNodes.length); i++) {
                toKeep.add(sortedNodes[i]);
            }
            nodes = nodes.filter(n => toKeep.has(n));
            nodes.forEach(node => {
                node.connections = node.connections.filter(conn => toKeep.has(conn.node));
            });
            console.log(`Density: ${nodes.length} nodes`);
        }
        return { nodes, rootNode };
    }
    let neuralNetwork = null;
    let nodesMesh = null;
    let connectionsMesh = null;
    function createNetworkVisualization(formationIndex, densityFactor = 1.0) {
        console.log(`Creating formation ${formationIndex}, density ${densityFactor}`);
        if (nodesMesh) {
            scene.remove(nodesMesh);
            nodesMesh.geometry.dispose();
            nodesMesh.material.dispose();
        }
        if (connectionsMesh) {
            scene.remove(connectionsMesh);
            connectionsMesh.geometry.dispose();
            connectionsMesh.material.dispose();
        }
        neuralNetwork = generateNeuralNetwork(formationIndex, densityFactor);
        if (!neuralNetwork || neuralNetwork.nodes.length === 0) {
            console.error("Network generation failed");
            return;
        }
        const nodesGeometry = new THREE.BufferGeometry();
        const nodePositions = [];
        const nodeTypes = [];
        const nodeSizes = [];
        const nodeColors = [];
        const distancesFromRoot = [];
        const palette = colorPalettes[config.activePaletteIndex];
        neuralNetwork.nodes.forEach((node) => {
            nodePositions.push(node.position.x, node.position.y, node.position.z);
            nodeTypes.push(node.type);
            nodeSizes.push(node.size);
            distancesFromRoot.push(node.distanceFromRoot);
            const colorIndex = Math.min(node.level, palette.length - 1);
            const baseColor = palette[colorIndex % palette.length].clone();
            baseColor.offsetHSL(
                THREE.MathUtils.randFloatSpread(0.03),
                THREE.MathUtils.randFloatSpread(0.08),
                THREE.MathUtils.randFloatSpread(0.08)
            );
            nodeColors.push(baseColor.r, baseColor.g, baseColor.b);
        });
        nodesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(nodePositions, 3));
        nodesGeometry.setAttribute('nodeType', new THREE.Float32BufferAttribute(nodeTypes, 1));
        nodesGeometry.setAttribute('nodeSize', new THREE.Float32BufferAttribute(nodeSizes, 1));
        nodesGeometry.setAttribute('nodeColor', new THREE.Float32BufferAttribute(nodeColors, 3));
        nodesGeometry.setAttribute('distanceFromRoot', new THREE.Float32BufferAttribute(distancesFromRoot, 1));
        const nodesMaterial = new THREE.ShaderMaterial({
            uniforms: THREE.UniformsUtils.clone(pulseUniforms),
            vertexShader: nodeShader.vertexShader,
            fragmentShader: nodeShader.fragmentShader,
            transparent: true,
            depthWrite: false,
            blending: THREE.AdditiveBlending
        });
        nodesMesh = new THREE.Points(nodesGeometry, nodesMaterial);
        scene.add(nodesMesh);
        const connectionsGeometry = new THREE.BufferGeometry();
        const connectionColors = [];
        const connectionStrengths = [];
        const connectionPositions = [];
        const startPoints = [];
        const endPoints = [];
        const pathIndices = [];
        const processedConnections = new Set();
        let pathIndex = 0;
        neuralNetwork.nodes.forEach((node, nodeIndex) => {
            node.connections.forEach(connection => {
                const connectedNode = connection.node;
                const connectedIndex = neuralNetwork.nodes.indexOf(connectedNode);
                if (connectedIndex === -1) return;
                const key = [Math.min(nodeIndex, connectedIndex), Math.max(nodeIndex, connectedIndex)].join('-');
                if (!processedConnections.has(key)) {
                    processedConnections.add(key);
                    const startPoint = node.position;
                    const endPoint = connectedNode.position;
                    const numSegments = 20;
                    for (let i = 0; i < numSegments; i++) {
                        const t = i / (numSegments - 1);
                        connectionPositions.push(t, 0, 0);
                        startPoints.push(startPoint.x, startPoint.y, startPoint.z);
                        endPoints.push(endPoint.x, endPoint.y, endPoint.z);
                        pathIndices.push(pathIndex);
                        connectionStrengths.push(connection.strength);
                        const avgLevel = Math.min(Math.floor((node.level + connectedNode.level) / 2), palette.length - 1);
                        const baseColor = palette[avgLevel % palette.length].clone();
                        baseColor.offsetHSL(
                            THREE.MathUtils.randFloatSpread(0.03),
                            THREE.MathUtils.randFloatSpread(0.08),
                            THREE.MathUtils.randFloatSpread(0.08)
                        );
                        connectionColors.push(baseColor.r, baseColor.g, baseColor.b);
                    }
                    pathIndex++;
                }
            });
        });
        connectionsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(connectionPositions, 3));
        connectionsGeometry.setAttribute('startPoint', new THREE.Float32BufferAttribute(startPoints, 3));
        connectionsGeometry.setAttribute('endPoint', new THREE.Float32BufferAttribute(endPoints, 3));
        connectionsGeometry.setAttribute('connectionStrength', new THREE.Float32BufferAttribute(connectionStrengths, 1));
        connectionsGeometry.setAttribute('connectionColor', new THREE.Float32BufferAttribute(connectionColors, 3));
        connectionsGeometry.setAttribute('pathIndex', new THREE.Float32BufferAttribute(pathIndices, 1));
        const connectionsMaterial = new THREE.ShaderMaterial({
            uniforms: THREE.UniformsUtils.clone(pulseUniforms),
            vertexShader: connectionShader.vertexShader,
            fragmentShader: connectionShader.fragmentShader,
            transparent: true,
            depthWrite: false,
            blending: THREE.AdditiveBlending
        });
        connectionsMesh = new THREE.LineSegments(connectionsGeometry, connectionsMaterial);
        scene.add(connectionsMesh);
        palette.forEach((color, i) => {
            if (i < 3) {
                connectionsMaterial.uniforms.uPulseColors.value[i].copy(color);
                nodesMaterial.uniforms.uPulseColors.value[i].copy(color);
            }
        });
    }
    function updateTheme(paletteIndex) {
        config.activePaletteIndex = paletteIndex;
        if (!nodesMesh || !connectionsMesh || !neuralNetwork) return;
        const palette = colorPalettes[paletteIndex];
        const nodeColorsAttr = nodesMesh.geometry.attributes.nodeColor;
        for (let i = 0; i < nodeColorsAttr.count; i++) {
            const node = neuralNetwork.nodes[i];
            if (!node) continue;
            const colorIndex = Math.min(node.level, palette.length - 1);
            const baseColor = palette[colorIndex % palette.length].clone();
            baseColor.offsetHSL(
                THREE.MathUtils.randFloatSpread(0.03),
                THREE.MathUtils.randFloatSpread(0.08),
                THREE.MathUtils.randFloatSpread(0.08)
            );
            nodeColorsAttr.setXYZ(i, baseColor.r, baseColor.g, baseColor.b);
        }
        nodeColorsAttr.needsUpdate = true;
        const connectionColors = [];
        const processedConnections = new Set();
        neuralNetwork.nodes.forEach((node, nodeIndex) => {
            node.connections.forEach(connection => {
                const connectedNode = connection.node;
                const connectedIndex = neuralNetwork.nodes.indexOf(connectedNode);
                if (connectedIndex === -1) return;
                const key = [Math.min(nodeIndex, connectedIndex), Math.max(nodeIndex, connectedIndex)].join('-');
                if (!processedConnections.has(key)) {
                    processedConnections.add(key);
                    const numSegments = 20;
                    for (let i = 0; i < numSegments; i++) {
                        const avgLevel = Math.min(Math.floor((node.level + connectedNode.level) / 2), palette.length - 1);
                        const baseColor = palette[avgLevel % palette.length].clone();
                        baseColor.offsetHSL(
                            THREE.MathUtils.randFloatSpread(0.03),
                            THREE.MathUtils.randFloatSpread(0.08),
                            THREE.MathUtils.randFloatSpread(0.08)
                        );
                        connectionColors.push(baseColor.r, baseColor.g, baseColor.b);
                    }
                }
            });
        });
        
        connectionsMesh.geometry.setAttribute('connectionColor', new THREE.Float32BufferAttribute(connectionColors, 3));
        connectionsMesh.geometry.attributes.connectionColor.needsUpdate = true;
        palette.forEach((color, i) => {
            if (i < 3) {
                nodesMesh.material.uniforms.uPulseColors.value[i].copy(color);
                connectionsMesh.material.uniforms.uPulseColors.value[i].copy(color);
            }
        });
    }
    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();
    const interactionPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
    const interactionPoint = new THREE.Vector3();
    let lastPulseIndex = 0;
    function triggerPulse(clientX, clientY) {
        pointer.x = (clientX / window.innerWidth) * 2 - 1;
        pointer.y = -(clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(pointer, camera);
        interactionPlane.normal.copy(camera.position).normalize();
        interactionPlane.constant = -interactionPlane.normal.dot(camera.position) + camera.position.length() * 0.5;
        if (raycaster.ray.intersectPlane(interactionPlane, interactionPoint)) {
            const time = clock.getElapsedTime();
            if (nodesMesh && connectionsMesh) {
                lastPulseIndex = (lastPulseIndex + 1) % 3;
                nodesMesh.material.uniforms.uPulsePositions.value[lastPulseIndex].copy(interactionPoint);
                nodesMesh.material.uniforms.uPulseTimes.value[lastPulseIndex] = time;
                connectionsMesh.material.uniforms.uPulsePositions.value[lastPulseIndex].copy(interactionPoint);
                connectionsMesh.material.uniforms.uPulseTimes.value[lastPulseIndex] = time;
                const palette = colorPalettes[config.activePaletteIndex];
                const randomColor = palette[Math.floor(Math.random() * palette.length)];
                nodesMesh.material.uniforms.uPulseColors.value[lastPulseIndex].copy(randomColor);
                connectionsMesh.material.uniforms.uPulseColors.value[lastPulseIndex].copy(randomColor);
            }
        }
    }
    renderer.domElement.addEventListener('click', (e) => {
        if (e.target.closest('.glass-panel, #control-buttons')) return;
        if (!config.paused) triggerPulse(e.clientX, e.clientY);
    });
    renderer.domElement.addEventListener('touchstart', (e) => {
        if (e.target.closest('.glass-panel, #control-buttons')) return;
        e.preventDefault();
        if (e.touches.length > 0 && !config.paused) {
            triggerPulse(e.touches[0].clientX, e.touches[0].clientY);
        }
    }, { passive: false });
    const themeButtons = document.querySelectorAll('.theme-button');
    themeButtons.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const idx = parseInt(btn.dataset.theme, 10);
            updateTheme(idx);
            themeButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
        });
    });
    const densitySlider = document.getElementById('density-slider');
    const densityValue = document.getElementById('density-value');
    let densityTimeout;
    densitySlider.addEventListener('input', (e) => {
        e.stopPropagation();
        const val = parseInt(densitySlider.value, 10);
        config.densityFactor = val / 100;
        densityValue.textContent = `${val}%`;
        clearTimeout(densityTimeout);
        densityTimeout = setTimeout(() => {
            createNetworkVisualization(config.currentFormation, config.densityFactor);
        }, 400);
    });
    const changeFormationBtn = document.getElementById('change-formation-btn');
    const pausePlayBtn = document.getElementById('pause-play-btn');
    const resetCameraBtn = document.getElementById('reset-camera-btn');
    changeFormationBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        config.currentFormation = (config.currentFormation + 1) % config.numFormations;
        createNetworkVisualization(config.currentFormation, config.densityFactor);
        controls.autoRotate = false;
        setTimeout(() => { controls.autoRotate = true; }, 2500);
    });
    pausePlayBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        config.paused = !config.paused;
        pausePlayBtn.querySelector('span').textContent = config.paused ? 'Play' : 'Freeze';
        controls.autoRotate = !config.paused;
    });
    resetCameraBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        controls.reset();
        controls.autoRotate = false;
        setTimeout(() => { controls.autoRotate = true; }, 2000);
    });
    const clock = new THREE.Clock();
    function animate() {
        requestAnimationFrame(animate);
        const t = clock.getElapsedTime();
        if (!config.paused) {
            if (nodesMesh) {
                nodesMesh.material.uniforms.uTime.value = t;
                nodesMesh.rotation.y = Math.sin(t * 0.04) * 0.05;
            }
            if (connectionsMesh) {
                connectionsMesh.material.uniforms.uTime.value = t;
                connectionsMesh.rotation.y = Math.sin(t * 0.04) * 0.05;
            }
        }
        starField.rotation.y += 0.0002;
        starField.material.uniforms.uTime.value = t;
        controls.update();
        composer.render();
    }
    function init() {
        createNetworkVisualization(config.currentFormation, config.densityFactor);
        document.querySelectorAll('.theme-button').forEach(b => b.classList.remove('active'));
        document.querySelector(`.theme-button[data-theme="${config.activePaletteIndex}"]`).classList.add('active');
        animate();
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        composer.setSize(window.innerWidth, window.innerHeight);
        bloomPass.resolution.set(window.innerWidth, window.innerHeight);
    }
    
    window.addEventListener('resize', onWindowResize);
    init();
</script>