Upload 26 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/audio/aditya.wav filter=lfs diff=lfs merge=lfs -text
+public/audio/aman.wav filter=lfs diff=lfs merge=lfs -text
+public/audio/tts.wav filter=lfs diff=lfs merge=lfs -text
+public/audio/yogiraj.wav filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,589 @@
+import React, { Suspense, useState, useEffect, useRef } from 'react';
+import * as THREE from 'three';
+import { Canvas } from '@react-three/fiber';
+import { GenerativeSphere } from './components/GenerativeSphere';
+import { AmbientBackground } from './components/AmbientBackground';
+import { WorkSection } from './components/sections/WorkSection';
+import { ResearchSection } from './components/sections/ResearchSection';
+import { ServicesSection } from './components/sections/ServicesSection';
+import { ContactSection } from './components/sections/ContactSection';
+import { HeroOverlay } from './components/sections/HeroOverlay';
+
+// Import Mobile Sections
+import { MobileWorkSection } from './components/sections/mobile/MobileWorkSection';
+import { MobileResearchSection } from './components/sections/mobile/MobileResearchSection';
+import { MobileServicesSection } from './components/sections/mobile/MobileServicesSection';
+import { MobileContactSection } from './components/sections/mobile/MobileContactSection';
+
+// --- Helper Hooks ---
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+  return isMobile;
+}
+
+// --- UI Components ---
+
+// OPTIMIZED LOADER
+const LoaderOverlay = ({ visible, progress }: { visible: boolean; progress: number }) => {
+  return (
+    <div 
+      className={`fixed inset-0 z-[100] flex flex-col items-center 
+        justify-end pb-32        /* MOBILE: Align Bottom with padding */
+        md:justify-center md:pb-0 /* DESKTOP: Align Center */
+        pointer-events-none transition-opacity duration-1000 ease-in-out 
+        ${visible ? 'opacity-100' : 'opacity-0'}
+      `}
+    >
+      {/* Title: BOLD WHITE - NO BLINKING */}
+      <h1 className="text-white font-bold text-2xl md:text-4xl tracking-[0.3em] uppercase antialiased select-none">
+        Team Triangle
+      </h1>
+
+      {/* Timer: Bottom Left */}
+      <div className="absolute bottom-8 left-8 md:bottom-12 md:left-12 text-left">
+        <div className="flex flex-col items-start gap-1">
+          <span className="text-[10px] font-mono text-white/40 uppercase tracking-widest">
+            2025 Team Triangle System
+          </span>
+          <span className="text-4xl md:text-5xl font-mono font-light text-white/80 tabular-nums">
+            {progress}%
+          </span>
+        </div>
+        {/* Loading Bar Line */}
+        <div className="w-32 h-[1px] bg-white/10 mt-2 relative overflow-hidden">
+          <div 
+            className="absolute top-0 left-0 h-full bg-red-500 transition-all duration-100 ease-out" 
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Navbar = ({ 
+  visible, 
+  isDimmed, 
+  shapeMode, 
+  toggleShape, 
+  isTtsPlaying,
+  onSectionClick,
+  activeSection
+}: { 
+  visible: boolean; 
+  isDimmed: boolean; 
+  shapeMode: 'sphere' | 'triangle' | 'explode';
+  toggleShape: () => void;
+  isTtsPlaying: boolean;
+  onSectionClick: (section: string) => void;
+  activeSection: string | null;
+}) => {
+  const isTriangle = shapeMode === 'triangle';
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (activeSection) setMobileMenuOpen(false);
+  }, [activeSection]);
+
+  const hideClass = (isDimmed && !activeSection) ? 'opacity-0 -translate-y-4 pointer-events-none' : 'opacity-100 translate-y-0';
+  const bgClass = isDimmed ? 'opacity-0' : 'opacity-100';
+  const menuItems = ['work', 'research', 'services', 'contact'];
+
+  return (
+    <>
+      <nav 
+        className={`fixed top-4 left-0 w-full z-40 transition-all duration-1000 ease-out 
+          ${visible ? 'translate-y-0 opacity-100' : '-translate-y-4 opacity-0 pointer-events-none'}
+        `}
+      >
+        <div className={`absolute inset-0 bg-black/5 backdrop-blur-sm border-b border-white/5 transition-all duration-500 ease-out ${bgClass}`} />
+        <div className="relative w-full max-w-[1400px] mx-auto px-6 py-5 md:px-12 flex justify-between items-center">
+          
+          <div 
+            onClick={() => { if(activeSection) onSectionClick(''); setMobileMenuOpen(false); }}
+            className={`flex items-center gap-3 cursor-pointer group transition-all duration-500 ease-out ${hideClass} z-50`}
+          >
+            <div className="relative w-6 h-6 flex items-center justify-center">
+               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-white group-hover:text-red-500 transition-colors duration-300">
+                 <path d="M12 4L4 20H20L12 4Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                 <circle cx="12" cy="13" r="1" fill="currentColor" className="opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+               </svg>
+            </div>
+            <span className="hidden sm:block text-white/90 font-light tracking-[0.15em] text-xs uppercase select-none group-hover:text-white transition-colors">
+              Team Triangle
+            </span>
+          </div>
+          
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 hidden md:block">
+            <div className={`flex items-center justify-center transition-all duration-500 ease-out ${activeSection ? 'opacity-0 pointer-events-none translate-y-[-10px]' : hideClass}`}>
+              <div className="flex gap-1 bg-white/5 backdrop-blur-md px-1.5 py-1.5 rounded-full border border-white/5 shadow-2xl shadow-black/20">
+                {menuItems.map((item) => (
+                  <button 
+                    key={item} 
+                    onClick={() => onSectionClick(item)}
+                    className={`px-6 py-2 rounded-full text-[10px] font-mono tracking-widest uppercase transition-all duration-300 select-none
+                      ${activeSection === item ? 'bg-white text-black' : 'text-white/50 hover:text-white hover:bg-white/10'}
+                    `}
+                  >
+                    {item}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className={`flex items-center gap-6 transition-all duration-500 z-50 ${activeSection ? 'opacity-0 pointer-events-none' : ''}`}>
+             <button disabled={isTtsPlaying} onClick={toggleShape} className={`hidden md:block transition-colors duration-300 group ${isTtsPlaying ? 'text-white/20 cursor-not-allowed' : 'text-white/50 hover:text-red-400'} ${isTriangle ? 'text-red-400' : ''}`}>
+               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="group-hover:animate-pulse">
+                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07" className={`transition-opacity duration-300 ${isTriangle ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'}`} />
+                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14" className={`transition-all duration-500 ${isTriangle ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-1'}`} /> 
+               </svg>
+             </button>
+
+             <button 
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                className={`md:hidden flex items-center justify-center w-10 h-10 border border-white/10 rounded-full bg-black/20 backdrop-blur-md transition-all duration-300 ${mobileMenuOpen ? 'border-red-500/50 text-red-500' : 'text-white/70'}`}
+             >
+                {mobileMenuOpen ? (
+                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                     <line x1="18" y1="6" x2="6" y2="18"></line>
+                     <line x1="6" y1="6" x2="18" y2="18"></line>
+                   </svg>
+                ) : (
+                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                     <rect x="3" y="3" width="7" height="7"></rect>
+                     <rect x="14" y="3" width="7" height="7"></rect>
+                     <rect x="14" y="14" width="7" height="7"></rect>
+                     <rect x="3" y="14" width="7" height="7"></rect>
+                   </svg>
+                )}
+             </button>
+          </div>
+        </div>
+      </nav>
+
+      <div className={`fixed inset-0 z-30 bg-black/95 backdrop-blur-xl flex flex-col items-center justify-center transition-all duration-500 md:hidden ${mobileMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}>
+         <div className="flex flex-col gap-6 w-full px-12">
+            {menuItems.map((item, i) => (
+              <button 
+                key={item}
+                onClick={() => { onSectionClick(item); setMobileMenuOpen(false); }}
+                className={`text-3xl font-light text-white uppercase tracking-widest text-left py-4 border-b border-white/10 transition-all duration-500 
+                  ${mobileMenuOpen ? 'translate-x-0 opacity-100' : '-translate-x-8 opacity-0'}
+                `}
+                style={{ transitionDelay: `${i * 100}ms` }}
+              >
+                <span className="text-xs text-red-500 font-mono mr-4">0{i + 1}</span>
+                {item}
+              </button>
+            ))}
+            
+            <div className={`mt-8 pt-8 flex justify-between items-center transition-all duration-700 delay-300 ${mobileMenuOpen ? 'opacity-100' : 'opacity-0'}`}>
+               <span className="text-[10px] font-mono text-white/30 uppercase">System Status: Online</span>
+               <button onClick={toggleShape} className="text-white/50 text-xs font-mono uppercase border border-white/10 px-3 py-1 rounded-full">
+                  Toggle Geo
+               </button>
+            </div>
+         </div>
+      </div>
+    </>
+  );
+};
+
+const TypingConsole = ({ visible }: { visible: boolean }) => {
+  const [text, setText] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [loopNum, setLoopNum] = useState(0);
+  const [typingSpeed, setTypingSpeed] = useState(150);
+  const phrases = ["training model...", "deploying gen-ai pipeline...", "optimizing inference...", "allocating neural buffers..."];
+
+  useEffect(() => {
+    let timer: any;
+    const handleTyping = () => {
+      const i = loopNum % phrases.length;
+      const fullText = phrases[i];
+      setText(isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1));
+      let typeSpeed = 50 + Math.random() * 60;
+      if (isDeleting) typeSpeed /= 2.5;
+      if (!isDeleting && text === fullText) { typeSpeed = 2500; setIsDeleting(true); } 
+      else if (isDeleting && text === '') { setIsDeleting(false); setLoopNum(loopNum + 1); typeSpeed = 500; }
+      setTypingSpeed(typeSpeed);
+    };
+    if (visible) timer = setTimeout(handleTyping, typingSpeed);
+    return () => clearTimeout(timer);
+  }, [text, isDeleting, loopNum, phrases, typingSpeed, visible]);
+
+  return (
+    <div 
+      className={`fixed z-40 p-4 rounded-sm bg-black/20 backdrop-blur-sm border border-white/5 font-mono text-xs text-white/70 shadow-lg select-none transition-all duration-1000 delay-700 ease-out hidden md:block
+        ${visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}
+        md:bottom-28 md:right-12 md:w-64
+      `}
+    >
+      <div className="flex flex-col gap-2">
+         <div className="flex justify-between items-center text-[8px] uppercase tracking-widest text-white/20 border-b border-white/5 pb-2 mb-1"><span>System Output</span><div className="flex gap-1"><span className="w-1 h-1 rounded-full bg-white/20"></span><span className="w-1 h-1 rounded-full bg-white/20"></span></div></div>
+         <div className="min-h-[2em] flex items-center"><span className="text-red-500/60 mr-2 text-[10px]">➜</span><span className="text-white/80">{text}</span><span className="animate-pulse ml-0.5 inline-block w-1.5 h-3 bg-red-500/80 align-middle"></span></div>
+      </div>
+    </div>
+  );
+};
+
+// --- Reusable Scroll Sections ---
+
+const ContentTeaser = ({ title, sub, desc, btnText, onClick }: any) => {
+  return (
+    <div className="border border-white/10 bg-black/40 backdrop-blur-sm p-8 md:p-12 hover:bg-white/5 transition-all duration-500 group flex flex-col justify-between h-full">
+       <div>
+          <div className="flex items-center gap-3 mb-6">
+             <span className="text-xs font-mono uppercase tracking-widest text-white/40 border border-white/10 px-2 py-1 rounded-full">{sub}</span>
+          </div>
+          <h3 className="text-3xl md:text-4xl font-light text-white mb-4 group-hover:text-red-500 transition-colors">{title}</h3>
+          <p className="text-white/60 text-sm md:text-base leading-relaxed mb-8">{desc}</p>
+       </div>
+       <button onClick={onClick} className="self-start flex items-center gap-3 text-xs font-mono uppercase tracking-widest text-white hover:text-red-400 transition-colors pb-1 border-b border-white/20 hover:border-red-400">
+          {btnText} <span className="group-hover:translate-x-1 transition-transform">→</span>
+       </button>
+    </div>
+  )
+}
+
+// --- Main App ---
+
+const App: React.FC = () => {
+  const [showLoader, setShowLoader] = useState(true);
+  const [loadProgress, setLoadProgress] = useState(0);
+  const [showInterface, setShowInterface] = useState(false);
+  const [isNavDimmed, setIsNavDimmed] = useState(false);
+  const [isAudioMuted, setIsAudioMuted] = useState(true);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const audioInitializedRef = useRef(false);
+  const [isTtsPlaying, setIsTtsPlaying] = useState(false);
+  const ttsAudioRef = useRef<HTMLAudioElement | null>(null);
+  
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const [isTriangle, setIsTriangle] = useState(false);
+
+  const scrollRef = useRef(0);
+  const smoothScrollRef = useRef(0); 
+  const shiftRef = useRef(0);
+  const lastScrollTop = useRef(0);
+  
+  const isMobile = useIsMobile();
+  const shapeMode = activeSection ? 'explode' : ((isTriangle || isTtsPlaying) ? 'triangle' : 'sphere');
+
+  useEffect(() => {
+    try {
+      const saved = window.localStorage.getItem('tt_audio_muted');
+      if (saved === '0') setIsAudioMuted(false);
+      if (saved === '1') setIsAudioMuted(true);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem('tt_audio_muted', isAudioMuted ? '1' : '0');
+    } catch {
+      // ignore
+    }
+  }, [isAudioMuted]);
+
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.src = '';
+        audioRef.current.load();
+        audioRef.current = null;
+      }
+    };
+  }, []);
+
+  const ensureAudioInitialized = () => {
+    if (audioInitializedRef.current) return;
+    audioInitializedRef.current = true;
+
+    const a = new Audio('/audio/theme.mp3');
+    a.loop = true;
+    a.volume = 0.35;
+    a.preload = 'auto';
+    audioRef.current = a;
+  };
+
+  const applyAudioState = async (nextMuted: boolean) => {
+    ensureAudioInitialized();
+    const a = audioRef.current;
+    if (!a) return;
+
+    if (nextMuted) {
+      a.pause();
+      a.muted = true;
+      return;
+    }
+
+    a.muted = false;
+    try {
+      await a.play();
+    } catch {
+      // Autoplay can be blocked; user can click again.
+    }
+  };
+
+  const toggleAudioMuted = async () => {
+    const next = !isAudioMuted;
+    setIsAudioMuted(next);
+    await applyAudioState(next);
+  };
+
+  const stopTts = () => {
+    setIsTtsPlaying(false);
+    if (ttsAudioRef.current) {
+      ttsAudioRef.current.pause();
+      ttsAudioRef.current.src = '';
+      ttsAudioRef.current.load();
+      ttsAudioRef.current = null;
+    }
+  };
+
+  const playHomeTts = async () => {
+    if (activeSection) return;
+    if (isTtsPlaying) return;
+
+    const a = new Audio('/audio/tts.wav');
+    a.preload = 'auto';
+    a.volume = 1.0;
+    ttsAudioRef.current = a;
+
+    a.addEventListener('ended', stopTts, { once: true });
+    a.addEventListener('error', stopTts, { once: true });
+
+    setIsTtsPlaying(true);
+    try {
+      await a.play();
+    } catch {
+      stopTts();
+    }
+  };
+
+  const handleSectionClick = (section: string) => {
+    setActiveSection(section === activeSection ? null : section);
+  };
+
+  // --- FIXED LOADER LOGIC ---
+  useEffect(() => {
+    let interval: any;
+    interval = setInterval(() => {
+      setLoadProgress(prev => {
+        // When close to 100, ensure we reach it
+        if (prev >= 98) {
+          clearInterval(interval);
+          return 100;
+        }
+        // Random increment for organic feel
+        const increment = Math.random() * 3; 
+        const next = prev + increment;
+        // Cap at 100
+        return Math.min(next, 100);
+      });
+    }, 25); 
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Handle Transition from Loader to Interface
+  useEffect(() => {
+    if (loadProgress >= 100) {
+      // Small delay at 100% before fading out
+      const timeout = setTimeout(() => {
+        setShowLoader(false);
+        // Delay interface appearance slightly to ensure smooth fade
+        setTimeout(() => setShowInterface(true), 500); 
+      }, 500);
+      return () => clearTimeout(timeout);
+    }
+  }, [loadProgress]);
+
+  // Scroll Loop
+  useEffect(() => {
+    let frameId: number;
+    const loop = () => {
+      smoothScrollRef.current = THREE.MathUtils.lerp(smoothScrollRef.current, scrollRef.current, 0.08);
+      frameId = requestAnimationFrame(loop);
+    };
+    loop();
+    return () => cancelAnimationFrame(frameId);
+  }, []);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const s = e.currentTarget.scrollTop;
+    scrollRef.current = s;
+    if (s > lastScrollTop.current && s > 50) setIsNavDimmed(true);
+    else if (s < lastScrollTop.current || s <= 50) setIsNavDimmed(false);
+    lastScrollTop.current = s;
+  };
+
+  return (
+    <div className="relative w-full h-full bg-[#050000] text-white overflow-hidden selection:bg-red-500/30">
+      <div className="absolute inset-0 z-0 pointer-events-none">
+        <Canvas dpr={[1, 2]} camera={{ position: [0, 0, 18], fov: 35, near: 0.1, far: 100 }} gl={{ antialias: true, alpha: false, powerPreference: "high-performance" }}>
+          <Suspense fallback={null}>
+            <AmbientBackground scrollRef={scrollRef} beatActive={isTtsPlaying} />
+            {/* Sphere is visible behind the loader */}
+            <GenerativeSphere 
+              scrollRef={scrollRef} 
+              shiftRef={shiftRef} 
+              mode={shapeMode} 
+              isMobile={isMobile} 
+            />
+          </Suspense>
+        </Canvas>
+      </div>
+
+      {/* 
+         Loader Overlay: Transparent BG, shows Sphere behind.
+         Mobile: Bottom aligned (pb-32)
+         Desktop: Center aligned (pb-0)
+      */}
+      <LoaderOverlay visible={showLoader} progress={Math.floor(loadProgress)} />
+      
+      {/* 
+         Main Interface Container:
+         Remains strictly hidden (opacity-0) until showInterface is true.
+      */}
+      <div className={`transition-opacity duration-1000 ${showInterface ? 'opacity-100' : 'opacity-0'}`}>
+        <Navbar 
+          visible={true} 
+          isDimmed={isNavDimmed} 
+          shapeMode={shapeMode} 
+          toggleShape={playHomeTts} 
+          isTtsPlaying={isTtsPlaying}
+          onSectionClick={handleSectionClick}
+          activeSection={activeSection}
+        />
+
+        <HeroOverlay 
+          visible={!activeSection} 
+          smoothScrollRef={smoothScrollRef} 
+          shiftRef={shiftRef} 
+          shapeMode={shapeMode} 
+          isMobile={isMobile}
+        />
+
+        <TypingConsole visible={!activeSection} />
+      </div>
+
+      {/* Active Section Modals */}
+      {activeSection === 'work' && (isMobile ? <MobileWorkSection onClose={() => setActiveSection(null)} /> : <WorkSection onClose={() => setActiveSection(null)} />)}
+      {activeSection === 'research' && (isMobile ? <MobileResearchSection onClose={() => setActiveSection(null)} /> : <ResearchSection onClose={() => setActiveSection(null)} />)}
+      {activeSection === 'services' && (isMobile ? <MobileServicesSection onClose={() => setActiveSection(null)} /> : <ServicesSection onClose={() => setActiveSection(null)} />)}
+      {activeSection === 'contact' && (
+        isMobile ? (
+          <MobileContactSection onClose={() => setActiveSection(null)} />
+        ) : (
+          <ContactSection onClose={() => setActiveSection(null)} isAudioMuted={isAudioMuted} onToggleAudioMuted={toggleAudioMuted} />
+        )
+      )}
+      
+      {/* Main Scroll Container */}
+      <div 
+        className={`absolute inset-0 z-10 overflow-y-auto scroll-smooth overflow-x-hidden no-scrollbar 
+          ${activeSection || !showInterface ? 'pointer-events-none' : ''}
+          ${showInterface ? 'opacity-100' : 'opacity-0'} transition-opacity duration-1000
+        `} 
+        onScroll={handleScroll}
+      >
+        {/* Spacer for Hero to be visible */}
+        <div className="h-[100vh] w-full pointer-events-none"></div>
+
+        {/* 1. Core Capabilities List */}
+        <section className="relative z-10 w-full max-w-[1400px] mx-auto px-6 md:px-12 py-32 md:py-48">
+           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 border-t border-white/20 pt-12">
+              <div className="group">
+                 <span className="text-xs font-mono text-red-500 uppercase tracking-widest mb-4 block">[01]</span>
+                 <h2 className="text-4xl md:text-5xl font-light leading-tight text-white/90 group-hover:text-white transition-colors">
+                    Machine Learning Systems
+                 </h2>
+              </div>
+              <div className="group">
+                 <span className="text-xs font-mono text-blue-400 uppercase tracking-widest mb-4 block">[02]</span>
+                 <h2 className="text-4xl md:text-5xl font-light leading-tight text-white/90 group-hover:text-white transition-colors">
+                    Generative AI Platforms
+                 </h2>
+              </div>
+              <div className="group">
+                 <span className="text-xs font-mono text-emerald-500 uppercase tracking-widest mb-4 block">[03]</span>
+                 <h2 className="text-4xl md:text-5xl font-light leading-tight text-white/90 group-hover:text-white transition-colors">
+                    Fullstack Product Delivery
+                 </h2>
+              </div>
+           </div>
+        </section>
+
+        {/* 2. Content Teasers */}
+        <section className="relative z-10 w-full max-w-[1400px] mx-auto px-6 md:px-12 pb-32">
+           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              <ContentTeaser 
+                 title="Selected Works" 
+                 sub="Portfolio"
+                 desc="A curated index of deployed neural architectures and generative interfaces."
+                 btnText="Access Index"
+                 onClick={() => handleSectionClick('work')}
+              />
+              <ContentTeaser 
+                 title="R&D Lab" 
+                 sub="Experiments"
+                 desc="Deep tech research. Turning whitepapers into executable code."
+                 btnText="View Protocols"
+                 onClick={() => handleSectionClick('research')}
+              />
+              <ContentTeaser 
+                 title="System Services" 
+                 sub="Capabilities"
+                 desc="High-performance engineering for the next generation of the web."
+                 btnText="Initialize"
+                 onClick={() => handleSectionClick('services')}
+              />
+              <ContentTeaser 
+                 title="Direct Uplink" 
+                 sub="Contact"
+                 desc="Open a secure channel to the founders. Transmit a packet, or tap a profile for analysis."
+                 btnText="Initiate"
+                 onClick={() => handleSectionClick('contact')}
+              />
+           </div>
+        </section>
+
+        {/* 3. Massive Footer */}
+        <footer className="relative z-10 w-full pt-32 pb-12 overflow-hidden flex flex-col items-center justify-center">
+            <div className="w-full border-t border-white/10 mb-12"></div>
+            
+            <div className="w-full px-2 md:px-6 text-center">
+               {/* Fixed: Reduced mobile size from 15vw to 10vw so "TEAM TRIANGLE" fits without clipping */}
+               <h1 className="text-[10vw] md:text-[12vw] leading-none font-black text-white/10 tracking-tighter select-none whitespace-nowrap">
+                  TEAM TRIANGLE
+               </h1>
+            </div>
+
+            <div className="mt-12 flex flex-col md:flex-row gap-8 items-center justify-between w-full max-w-[1400px] px-12 text-[10px] font-mono uppercase text-white/30 tracking-widest">
+               <span>© 2025 Team Triangle</span>
+               <button onClick={() => handleSectionClick('contact')} className="hover:text-white transition-colors border-b border-white/10 hover:border-white pb-0.5">
+                  Establish Uplink
+               </button>
+            </div>
+        </footer>
+
+      </div>
+    </div>
+  );
+};
+
+export default App;

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install --legacy-peer-deps
+
+# Copy all files
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Expose port 7860 (Hugging Face Spaces default)
+EXPOSE 7860
+
+# Start the preview server
+CMD ["npm", "run", "preview", "--", "--port", "7860", "--host", "0.0.0.0"]

components/AmbientBackground.tsx

@@ -0,0 +1,113 @@
+import React, { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+const bgVertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 1.0); 
+  }
+`;
+
+const bgFragmentShader = `
+  uniform float uTime;
+  uniform float uScroll;
+  uniform float uBeat;
+  varying vec2 vUv;
+
+  float hash(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); }
+
+  float noise(vec2 x) {
+    vec2 i = floor(x);
+    vec2 f = fract(x);
+    float a = hash(i);
+    float b = hash(i + vec2(1.0, 0.0));
+    float c = hash(i + vec2(0.0, 1.0));
+    float d = hash(i + vec2(1.0, 1.0));
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+  }
+
+  void main() {
+    // Ultra-slow scalar field drift
+    float time = uTime * 0.05; 
+    
+    // Create a gradient vector that rotates slowly
+    vec2 center = vec2(0.5, 0.5);
+    vec2 pos = vUv - center;
+    
+    // Apply scroll offset
+    pos.y += uScroll * 0.2;
+
+    // Gentle rotation of the gradient field
+    float ang = time * 0.2;
+    float s = sin(ang);
+    float c = cos(ang);
+    mat2 rot = mat2(c, -s, s, c);
+    pos = rot * pos;
+    
+    float dist = length(pos);
+    float n = noise(pos * 2.0 + time);
+    
+    // Updated Color Palette for Deep Mood
+    vec3 colorBlack = vec3(0.0, 0.0, 0.0); // Pure Black
+    vec3 colorRed = vec3(0.12, 0.01, 0.005); // Deep Blood/Mahogany
+    vec3 colorOrange = vec3(0.35, 0.1, 0.02); // Rich Rust Orange
+    
+    // Base gradient: Deep Red emerging from Black
+    vec3 finalColor = mix(colorBlack, colorRed, smoothstep(-0.4, 0.9, vUv.x + vUv.y - 0.5));
+    
+    // Add the "Glow" spot which drifts (orange accent)
+    float glow = 1.0 - smoothstep(0.0, 1.3, dist - n * 0.15);
+    float beat = (0.6 + 0.4 * sin(uTime * 8.0)) * uBeat;
+    finalColor = mix(finalColor, colorOrange, glow * (0.3 + beat * 0.25));
+
+    // Dithering
+    float dither = (hash(vUv * time) - 0.5) / 64.0;
+    finalColor += dither;
+
+    gl_FragColor = vec4(finalColor, 1.0);
+  }
+`;
+
+interface AmbientBackgroundProps {
+  scrollRef?: React.MutableRefObject<number>;
+  beatActive?: boolean;
+}
+
+export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({ scrollRef, beatActive }) => {
+  const meshRef = useRef<THREE.Mesh>(null);
+  
+  const uniforms = useMemo(() => ({
+    uTime: { value: 0 },
+    uScroll: { value: 0 },
+    uBeat: { value: 0 },
+  }), []);
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      const material = meshRef.current.material as THREE.ShaderMaterial;
+      material.uniforms.uTime.value = state.clock.getElapsedTime();
+      
+      if (scrollRef) {
+        material.uniforms.uScroll.value = scrollRef.current * 0.001;
+      }
+
+      material.uniforms.uBeat.value = beatActive ? 1.0 : 0.0;
+    }
+  });
+
+  return (
+    <mesh ref={meshRef} renderOrder={-1}>
+      <planeGeometry args={[2, 2]} /> 
+      <shaderMaterial
+        vertexShader={bgVertexShader}
+        fragmentShader={bgFragmentShader}
+        uniforms={uniforms}
+        depthWrite={false}
+        depthTest={false} 
+      />
+    </mesh>
+  );
+};

components/GenerativeSphere.tsx

@@ -0,0 +1,410 @@
+import React, { useRef, useMemo, useEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+// -----------------------------------------------------------------------------
+// SHADERS
+// -----------------------------------------------------------------------------
+
+const vertexShader = `
+  uniform float uTime;
+  uniform float uScroll;
+  uniform float uMorph; // 0.0 = Sphere, 1.0 = Triangle
+  uniform float uExplode; // 0.0 = Normal, 1.0 = Exploded/Work Mode
+  uniform float uShiftX; 
+  uniform float uShiftY; 
+  
+  attribute float aRandom;
+  attribute vec3 aOriginalPos;
+  attribute vec3 aTrianglePos;
+
+  varying float vDepth;
+  varying float vRim;
+  varying vec3 vPos;
+  varying float vExplodeAlpha;
+
+  // Simplex 3D Noise 
+  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);
+
+    // First corner
+    vec3 i  = floor(v + dot(v, C.yyy));
+    vec3 x0 = v - i + dot(i, C.xxx);
+
+    // Other corners
+    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;      
+
+    // Permutations
+    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 ));
+
+    // Gradients
+    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) ) );
+  }
+
+  void main() {
+    // 0. Rotation Logic
+    // Slow down rotation significantly when exploded to stabilize the backdrop
+    float rotSpeed = mix(0.02, 0.002, uExplode);
+    float c = cos(uTime * rotSpeed);
+    float s = sin(uTime * rotSpeed);
+    mat3 rotate = mat3(c, 0.0, -s, 0.0, 1.0, 0.0, s, 0.0, c);
+    
+    vec3 spherePos = rotate * aOriginalPos;
+    vec3 triPos = aTrianglePos;
+
+    // 1. MORPH INTERPOLATION
+    vec3 pos = mix(spherePos, triPos, uMorph);
+
+    // 2. Noise Field (Internal Motion)
+    float noiseScale = 0.8;
+    float timeScale = 0.15;
+    
+    float noise1 = snoise(pos * noiseScale + vec3(uTime * timeScale));
+    
+    // Dampen noise when exploded so it's less chaotic background
+    float displacement = noise1 * 0.6 * (1.0 - uExplode * 0.5);
+
+    // 3. Apply Displacement
+    vec3 normal = normalize(pos);
+    float dispAmount = mix(0.5, 0.15, uMorph);
+    vec3 newPos = pos + normal * displacement * dispAmount;
+
+    // 4. Shift Logic (World Space)
+    // When exploded, we remove lateral shifts so the tunnel is centered
+    float effectiveShiftX = mix(uShiftX, 0.0, uExplode);
+    float effectiveShiftY = mix(uShiftY, 0.0, uExplode);
+    
+    newPos.x += effectiveShiftX;
+    newPos.y += effectiveShiftY;
+
+    // 5. EXPLOSION / WIPE LOGIC (Enhanced)
+    // Instead of just pushing away, we create a "Tunnel" or "Stargate" effect.
+    // We push X and Y radially outward based on the uExplode factor, clearing the center.
+    
+    float radius2D = length(newPos.xy);
+    
+    // Radial push: The closer to the center, the harder we push out, ensuring a clear text area
+    float pushFactor = smoothstep(0.0, 1.0, uExplode) * 20.0;
+    
+    // Direction from center
+    vec2 dir2D = normalize(newPos.xy);
+    
+    // Apply Push
+    // We add a nonlinear expansion so the middle clears fast, but the edges stay visible longer
+    vec3 explodedPos = newPos;
+    explodedPos.xy += dir2D * pushFactor * (1.0 + aRandom); // Add random to break uniformity
+    explodedPos.z -= uExplode * 10.0; // Push deep into background
+
+    newPos = mix(newPos, explodedPos, uExplode);
+
+    // 6. Final Position
+    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);
+    gl_Position = projectionMatrix * mvPosition;
+    
+    // 7. Point Size
+    // Make them smaller and sharper when they are background stars
+    float sizeBase = mix(2.0, 1.5, uExplode);
+    gl_PointSize = sizeBase * (15.0 / -mvPosition.z);
+
+    // 8. Varyings
+    vPos = newPos;
+    
+    // Alpha Logic for Explosion:
+    // Fade out particles that are still too close to center-screen after explosion
+    // This guarantees text legibility
+    float screenCenterDist = length(newPos.xy);
+    float centerClearMask = smoothstep(2.0, 8.0, screenCenterDist); // 0 at center, 1 at edges
+    vExplodeAlpha = mix(1.0, centerClearMask, uExplode);
+    
+    vec3 viewDir = normalize(-mvPosition.xyz);
+    vec3 viewNormal = normalize(normalMatrix * normal);
+    float dotNV = dot(viewDir, viewNormal);
+    vRim = 1.0 - max(0.0, abs(dotNV));
+    vRim = pow(vRim, 2.5);
+
+    vDepth = smoothstep(-2.0, 5.0, newPos.z); 
+  }
+`;
+
+const fragmentShader = `
+  varying float vDepth;
+  varying float vRim;
+  varying vec3 vPos;
+  varying float vExplodeAlpha;
+
+  uniform vec3 uColorCore;
+  uniform vec3 uColorMid;
+
+  void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    float dist = length(coord);
+    if (dist > 0.5) discard;
+
+    float alpha = 1.0 - smoothstep(0.3, 0.5, dist);
+
+    // Colors
+    vec3 cCore = uColorCore;       
+    vec3 cMid  = uColorMid;        
+    vec3 cRim  = vec3(0.8, 0.1, 0.0); 
+
+    vec3 finalColor;
+    float midMix = smoothstep(0.0, 0.6, vRim);
+    finalColor = mix(cCore, cMid, midMix);
+    
+    float rimMix = smoothstep(0.6, 1.0, vRim);
+    finalColor = mix(finalColor, cRim, rimMix);
+    
+    float intensity = 1.0 + (midMix * 0.5); 
+    
+    // Adjust depth alpha calculation to be more forgiving in exploded state
+    float depthAlpha = smoothstep(-10.0, 5.0, vPos.z) * 0.9 + 0.1;
+    
+    // Combine standard alpha with explosion alpha (hollows out the center)
+    float finalAlpha = alpha * depthAlpha * vExplodeAlpha;
+
+    gl_FragColor = vec4(finalColor * intensity, finalAlpha);
+  }
+`;
+
+// -----------------------------------------------------------------------------
+// COMPONENT
+// -----------------------------------------------------------------------------
+
+interface GenerativeSphereProps {
+  scrollRef?: React.MutableRefObject<number>;
+  shiftRef?: React.MutableRefObject<number>;
+  mode: 'sphere' | 'triangle' | 'explode';
+  isMobile: boolean;
+}
+
+export const GenerativeSphere: React.FC<GenerativeSphereProps> = ({ scrollRef, shiftRef, mode, isMobile }) => {
+  const pointsRef = useRef<THREE.Points>(null);
+  const materialRef = useRef<THREE.ShaderMaterial>(null);
+  
+  // Smoothing refs
+  const smoothedScroll = useRef(0);
+  const currentMorph = useRef(0); 
+  const currentExplode = useRef(0);
+  const currentShiftX = useRef(0);
+  const currentShiftY = useRef(0);
+
+  const COUNT = 32000; 
+  // Adjusted radius for mobile to be even smaller
+  const RADIUS = isMobile ? 1.4 : 3.5;
+
+  const { positions, originalPositions, trianglePositions, randoms } = useMemo(() => {
+    const pos = new Float32Array(COUNT * 3);
+    const origPos = new Float32Array(COUNT * 3);
+    const triPos = new Float32Array(COUNT * 3);
+    const rnd = new Float32Array(COUNT);
+    
+    const phi = Math.PI * (3 - Math.sqrt(5)); 
+    const triangleScale = RADIUS * 0.6; 
+
+    for (let i = 0; i < COUNT; i++) {
+      // 1. SPHERE
+      const y = 1 - (i / (COUNT - 1)) * 2; 
+      const radiusAtY = Math.sqrt(1 - y * y); 
+      const theta = phi * i; 
+
+      const x = Math.cos(theta) * radiusAtY;
+      const z = Math.sin(theta) * radiusAtY;
+
+      const sx = x * RADIUS;
+      const sy = y * RADIUS;
+      const sz = z * RADIUS;
+
+      pos[i * 3] = sx;
+      pos[i * 3 + 1] = sy;
+      pos[i * 3 + 2] = sz;
+
+      origPos[i * 3] = sx;
+      origPos[i * 3 + 1] = sy;
+      origPos[i * 3 + 2] = sz;
+
+      // 2. TRIANGLE
+      const angle = Math.atan2(sy, sx);
+      const distXY = Math.sqrt(sx*sx + sy*sy);
+
+      const segmentAngle = (2 * Math.PI) / 3;
+      const offsetAngle = angle + Math.PI / 2;
+      const constrainedAngle = offsetAngle - segmentAngle * Math.floor((offsetAngle + segmentAngle / 2) / segmentAngle);
+      
+      const r_sharp = 1.0 / Math.cos(constrainedAngle);
+      
+      const r_factor = r_sharp; 
+      
+      const normalizedRadialDist = distXY / RADIUS; 
+      const finalR = normalizedRadialDist * r_factor * triangleScale;
+      
+      const tx = Math.cos(angle) * finalR;
+      const ty = Math.sin(angle) * finalR;
+      const tz = sz * 0.35;
+
+      triPos[i * 3] = tx;
+      triPos[i * 3 + 1] = ty;
+      triPos[i * 3 + 2] = tz;
+
+      rnd[i] = Math.random();
+    }
+    
+    return {
+      positions: pos,
+      originalPositions: origPos,
+      trianglePositions: triPos,
+      randoms: rnd
+    };
+  }, [RADIUS]);
+
+  const uniforms = useMemo(() => ({
+    uTime: { value: 0 },
+    uScroll: { value: 0 },
+    uMorph: { value: 0 },
+    uExplode: { value: 0 },
+    uShiftX: { value: 0 },
+    uShiftY: { value: 0 },
+    uColorCore: { value: new THREE.Color('#ff5522') }, 
+    uColorMid: { value: new THREE.Color('#ffddaa') }, 
+  }), []);
+
+  useFrame((state, delta) => {
+    if (materialRef.current) {
+      materialRef.current.uniforms.uTime.value = state.clock.getElapsedTime();
+      
+      // Scroll Physics
+      if (scrollRef) {
+        smoothedScroll.current = THREE.MathUtils.lerp(smoothedScroll.current, scrollRef.current, 0.05);
+        materialRef.current.uniforms.uScroll.value = smoothedScroll.current;
+      }
+
+      // Physics State Logic
+      const isTriangle = mode === 'triangle';
+      const isExplode = mode === 'explode';
+
+      const targetMorph = isTriangle ? 1.0 : 0.0;
+      const targetExplode = isExplode ? 1.0 : 0.0;
+
+      // Interolate values
+      currentMorph.current = THREE.MathUtils.lerp(currentMorph.current, targetMorph, 2.0 * delta);
+      // Explode needs to be slightly snappy but smooth
+      currentExplode.current = THREE.MathUtils.lerp(currentExplode.current, targetExplode, 3.0 * delta); 
+
+      materialRef.current.uniforms.uMorph.value = currentMorph.current;
+      materialRef.current.uniforms.uExplode.value = currentExplode.current;
+
+      // Position Physics (Shift)
+      let targetX = 0;
+      let targetY = 0;
+
+      if (isMobile) {
+        targetX = 0; 
+        targetY = 0.5; // Adjusted Y shift for smaller sphere on mobile
+      } else {
+        if (shiftRef && !isExplode) {
+           // Only shift if NOT exploded. If exploded, we want center screen.
+          targetX = shiftRef.current;
+        }
+        targetY = 0;
+      }
+
+      currentShiftX.current = THREE.MathUtils.lerp(currentShiftX.current, targetX, 2.0 * delta);
+      currentShiftY.current = THREE.MathUtils.lerp(currentShiftY.current, targetY, 2.0 * delta);
+
+      materialRef.current.uniforms.uShiftX.value = currentShiftX.current;
+      materialRef.current.uniforms.uShiftY.value = currentShiftY.current;
+    }
+  });
+
+  return (
+    <points ref={pointsRef}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          count={positions.length / 3}
+          array={positions}
+          itemSize={3}
+        />
+        <bufferAttribute
+          attach="attributes-aOriginalPos"
+          count={originalPositions.length / 3}
+          array={originalPositions}
+          itemSize={3}
+        />
+         <bufferAttribute
+          attach="attributes-aTrianglePos"
+          count={trianglePositions.length / 3}
+          array={trianglePositions}
+          itemSize={3}
+        />
+        <bufferAttribute
+          attach="attributes-aRandom"
+          count={randoms.length}
+          array={randoms}
+          itemSize={1}
+        />
+      </bufferGeometry>
+      <shaderMaterial
+        ref={materialRef}
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+        transparent={true}
+        depthWrite={false} 
+        blending={THREE.AdditiveBlending}
+      />
+    </points>
+  );
+};

components/sections/ContactSection.tsx

@@ -0,0 +1,314 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+interface ContactSectionProps {
+  onClose: () => void;
+  isAudioMuted: boolean;
+  onToggleAudioMuted: () => void;
+}
+
+export const ContactSection: React.FC<ContactSectionProps> = ({ onClose, isAudioMuted, onToggleAudioMuted }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [activeFounder, setActiveFounder] = useState<string | null>(null);
+  const [aiText, setAiText] = useState("System Online. Initializing Team Triangle Protocol...");
+  const founderAudioRef = useRef<Record<string, HTMLAudioElement>>({});
+  const activeFounderAudioIdRef = useRef<string | null>(null);
+  
+  // For the typing effect
+  const [displayedText, setDisplayedText] = useState("");
+  const typingTimeoutRef = useRef<any>(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    const t2 = setTimeout(() => typeMessage("Greetings. I am Triangle.AI. Below are my creators. Or as they refer to themselves: 'The Three Dumb Founders'."), 800);
+    return () => { clearTimeout(t); clearTimeout(t2); };
+  }, []);
+
+  useEffect(() => {
+    if (isAudioMuted) {
+      (Object.values(founderAudioRef.current) as HTMLAudioElement[]).forEach((a) => {
+        a.pause();
+      });
+      activeFounderAudioIdRef.current = null;
+    }
+  }, [isAudioMuted]);
+
+  useEffect(() => {
+    return () => {
+      (Object.values(founderAudioRef.current) as HTMLAudioElement[]).forEach((a) => {
+        a.pause();
+        a.src = '';
+        a.load();
+      });
+      founderAudioRef.current = {};
+      activeFounderAudioIdRef.current = null;
+    };
+  }, []);
+
+  const typeMessage = (message: string) => {
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    setAiText(message);
+    setDisplayedText("");
+    
+    let i = 0;
+    const type = () => {
+      if (i < message.length) {
+        setDisplayedText(message.substring(0, i + 1));
+        i++;
+        typingTimeoutRef.current = setTimeout(type, 20); // Typing speed
+      }
+    };
+    type();
+  };
+
+  const getFounderAudio = (id: string) => {
+    if (founderAudioRef.current[id]) return founderAudioRef.current[id];
+    const srcMap: Record<string, string> = {
+      ADI: '/audio/aditya.wav',
+      YOGI: '/audio/yogiraj.wav',
+      MAN: '/audio/aman.wav',
+    };
+    const src = srcMap[id];
+    if (!src) return null;
+
+    const a = new Audio(src);
+    a.preload = 'auto';
+    a.volume = 0.9;
+    founderAudioRef.current[id] = a;
+    return a;
+  };
+
+  const stopFounderAudio = () => {
+    const activeId = activeFounderAudioIdRef.current;
+    if (!activeId) return;
+    const a = founderAudioRef.current[activeId];
+    if (a) {
+      a.pause();
+      try {
+        a.currentTime = 0;
+      } catch {
+        // ignore
+      }
+    }
+    activeFounderAudioIdRef.current = null;
+  };
+
+  const playFounderAudio = async (id: string) => {
+    if (isAudioMuted) return;
+    stopFounderAudio();
+    const a = getFounderAudio(id);
+    if (!a) return;
+    activeFounderAudioIdRef.current = id;
+    try {
+      a.currentTime = 0;
+    } catch {
+      // ignore
+    }
+    try {
+      await a.play();
+    } catch {
+      // ignore
+    }
+  };
+
+  const founders = [
+    {
+      id: "ADI",
+      name: "Aditya Devarshi",
+      role: "Visual Architect",
+      color: "text-cyan-400",
+      borderColor: "border-cyan-500/30",
+      bgHover: "hover:bg-cyan-900/10",
+      desc: "The Brain. He claims he designed me. I let him believe it to keep his ego stable. He paints pixels while the rest of us do the math.",
+      icon: "🎨"
+    },
+    {
+      id: "YOGI",
+      name: "Yogiraj Umadi",
+      role: "System Criticizer",
+      color: "text-red-500",
+      borderColor: "border-red-500/30",
+      bgHover: "hover:bg-red-900/10",
+      desc: "The Breaker. If logic exists, he will find a way to smash it. He tests my systems until they cry. I believe he thinks he is smart.",
+      icon: "🛠️"
+    },
+    {
+      id: "MAN",
+      name: "Aman Sutar",
+      role: "Cloud Phantom",
+      color: "text-indigo-300",
+      borderColor: "border-indigo-500/30",
+      bgHover: "hover:bg-indigo-900/10",
+      desc: "Shantit Kranti (Peaceful Revolution). The introvert who put me in the clouds. I am everywhere because of him. He speaks little, codes much.",
+      icon: "☁️"
+    }
+  ];
+
+  const handleFounderEnter = (id: string) => {
+    setActiveFounder(id);
+    const f = founders.find(x => x.id === id);
+    if(f) typeMessage(f.desc);
+    void playFounderAudio(id);
+  };
+
+  const handleFounderLeave = () => {
+    setActiveFounder(null);
+    typeMessage("Select a founder to analyze their neural patterns. Or contact us directly below.");
+    stopFounderAudio();
+  };
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-[#050000]/95 backdrop-blur-xl overflow-hidden transition-opacity duration-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Top Bar */}
+      <div className="w-full max-w-[1400px] mx-auto px-6 py-6 md:px-12 flex justify-between items-center z-10 border-b border-white/5">
+        <div className="flex items-center gap-4">
+           {/* Animated Speaker Icon */}
+           <button onClick={onToggleAudioMuted} className="flex items-center gap-2 group cursor-pointer">
+              <div className={`relative w-8 h-8 rounded-full border border-white/10 flex items-center justify-center bg-white/5 group-hover:border-white/30 transition-all ${!isAudioMuted ? 'animate-pulse' : ''}`}>
+                 {isAudioMuted ? (
+                    <span className="text-xs text-white/30">🔇</span>
+                 ) : (
+                    <div className="flex gap-0.5 items-end h-3">
+                       <span className="w-0.5 bg-white/80 h-1 animate-[bounce_0.8s_infinite]"></span>
+                       <span className="w-0.5 bg-white/80 h-3 animate-[bounce_1.2s_infinite]"></span>
+                       <span className="w-0.5 bg-white/80 h-2 animate-[bounce_0.5s_infinite]"></span>
+                    </div>
+                 )}
+              </div>
+              <span className="text-white/80 font-mono text-xs uppercase tracking-widest hidden sm:block">Triangle.AI Audio</span>
+           </button>
+        </div>
+        
+        <button 
+          onClick={onClose}
+          className="group flex items-center gap-3 text-white/50 hover:text-white transition-colors"
+        >
+          <span className="text-[10px] uppercase tracking-widest group-hover:tracking-[0.2em] transition-all duration-300">Disconnect</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+             <line x1="18" y1="6" x2="6" y2="18"></line>
+             <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 w-full overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar">
+        <div className="w-full max-w-[1400px] mx-auto px-6 md:px-12 pt-12 pb-32">
+          
+          {/* AI AVATAR & DIALOGUE */}
+          <div className={`flex flex-col items-center justify-center mb-16 transition-all duration-1000 ease-out ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
+             <div className="relative w-24 h-24 mb-8">
+                {/* Generative Orb CSS */}
+                <div className="absolute inset-0 rounded-full border border-white/20 animate-[spin_10s_linear_infinite]"></div>
+                <div className="absolute inset-2 rounded-full border border-t-white/50 border-r-transparent border-b-white/10 border-l-transparent animate-[spin_3s_linear_infinite_reverse]"></div>
+                <div className="absolute inset-0 flex items-center justify-center">
+                   <div className={`w-2 h-2 bg-white rounded-full shadow-[0_0_20px_rgba(255,255,255,0.8)] ${!isAudioMuted ? 'animate-ping' : 'opacity-50'}`}></div>
+                </div>
+             </div>
+             
+             <div className="max-w-2xl text-center min-h-[80px]">
+                <p className="text-white/80 font-mono text-sm md:text-base leading-relaxed">
+                   <span className="text-white/30 mr-2">[{!isAudioMuted ? 'VOICE_ACTIVE' : 'TEXT_ONLY'}]:</span>
+                   {displayedText}
+                   <span className="inline-block w-2 h-4 bg-white/50 ml-1 align-middle animate-pulse"></span>
+                </p>
+             </div>
+          </div>
+
+          {/* FOUNDERS TRIANGLE */}
+          <div className={`grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-12 mb-24 transition-all duration-1000 delay-200 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
+             {founders.map((f) => (
+                <div 
+                   key={f.id}
+                   onMouseEnter={() => handleFounderEnter(f.id)}
+                   onMouseLeave={handleFounderLeave}
+                   className={`relative group p-8 border bg-white/5 backdrop-blur-sm transition-all duration-500 cursor-pointer ${f.borderColor} ${f.bgHover} ${activeFounder === f.id ? 'scale-105 z-10' : 'scale-100 grayscale hover:grayscale-0'}`}
+                >
+                   <div className="flex justify-between items-start mb-4">
+                      <span className="text-3xl filter drop-shadow-lg">{f.icon}</span>
+                      <span className={`text-[10px] font-mono border border-white/10 px-2 py-1 rounded-full ${f.color}`}>{f.id}</span>
+                   </div>
+                   <h3 className="text-xl font-light text-white mb-1">{f.name}</h3>
+                   <p className={`text-xs font-mono uppercase tracking-widest ${f.color} opacity-70`}>{f.role}</p>
+                   
+                   {/* Decorative Corner */}
+                   <div className={`absolute bottom-0 right-0 w-4 h-4 border-b border-r ${f.borderColor.replace('/30', '/60')}`}></div>
+                </div>
+             ))}
+          </div>
+
+          {/* CONTACT & SOCIALS */}
+          <div className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 transition-all duration-1000 delay-400 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+             
+             {/* Left: Chat Form */}
+             <div>
+                <div className="flex items-center gap-3 mb-8">
+                   <span className="w-8 h-[1px] bg-white/20"></span>
+                   <h2 className="text-2xl font-light text-white">Transmission Uplink</h2>
+                </div>
+                
+                <form className="space-y-6" onSubmit={(e) => { e.preventDefault(); typeMessage("Transmission received. Processing... I will notify the humans."); }}>
+                   <div className="grid grid-cols-2 gap-6">
+                      <div className="space-y-2">
+                         <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest">Identity</label>
+                         <input type="text" className="w-full bg-transparent border-b border-white/20 py-2 text-white font-light focus:outline-none focus:border-white transition-colors" placeholder="Name" />
+                      </div>
+                      <div className="space-y-2">
+                         <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest">Frequency</label>
+                         <input type="email" className="w-full bg-transparent border-b border-white/20 py-2 text-white font-light focus:outline-none focus:border-white transition-colors" placeholder="Email" />
+                      </div>
+                   </div>
+                   <div className="space-y-2">
+                      <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest">Packet Data</label>
+                      <textarea rows={4} className="w-full bg-white/5 border border-white/10 p-4 text-white font-light focus:outline-none focus:border-white/30 transition-colors" placeholder="Message to the Team..."></textarea>
+                   </div>
+                   <button type="submit" className="px-8 py-3 bg-white text-black text-xs font-mono uppercase tracking-widest hover:bg-white/90 transition-colors">
+                      Send Packet
+                   </button>
+                </form>
+             </div>
+
+             {/* Right: Socials & Info */}
+             <div className="flex flex-col justify-between">
+                <div>
+                   <div className="flex items-center gap-3 mb-8">
+                      <span className="w-8 h-[1px] bg-white/20"></span>
+                      <h2 className="text-2xl font-light text-white">Direct Line</h2>
+                   </div>
+                   <p className="text-white/50 text-sm leading-relaxed mb-8">
+                      We are currently operating in stealth mode across multiple clouds. 
+                      You can find us where the pixels meet the data streams.
+                   </p>
+                   
+                   <div className="space-y-4">
+                      <a href="#" className="flex items-center gap-4 group p-4 border border-white/5 hover:bg-white/5 transition-all">
+                         <span className="text-xl">📸</span>
+                         <div>
+                            <p className="text-white text-sm group-hover:text-pink-400 transition-colors">Instagram</p>
+                            <p className="text-white/20 text-xs font-mono">@TeamTriangle</p>
+                         </div>
+                      </a>
+                      <a href="#" className="flex items-center gap-4 group p-4 border border-white/5 hover:bg-white/5 transition-all">
+                         <span className="text-xl">💼</span>
+                         <div>
+                            <p className="text-white text-sm group-hover:text-blue-400 transition-colors">LinkedIn</p>
+                            <p className="text-white/20 text-xs font-mono">/company/team-triangle</p>
+                         </div>
+                      </a>
+                   </div>
+                </div>
+
+                <div className="mt-12 lg:mt-0 pt-8 border-t border-white/10">
+                   <p className="text-white/30 font-mono text-xs">
+                      "We build the sphere, you live in it."
+                   </p>
+                </div>
+             </div>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};

components/sections/HeroOverlay.tsx

@@ -0,0 +1,213 @@
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+
+interface HeroOverlayProps {
+  visible: boolean;
+  smoothScrollRef: React.MutableRefObject<number>;
+  shiftRef: React.MutableRefObject<number>;
+  shapeMode: string;
+  isMobile: boolean;
+}
+
+// --- OPTIMIZED ANIMATION COMPONENT ---
+// Memoized to prevent unnecessary re-renders when parent state changes (like the clock)
+const CinematicReveal = React.memo(({ text, delay = 0, visible, className }: { text: string; delay?: number; visible: boolean; className?: string }) => {
+  return (
+    <span className={`inline-block whitespace-nowrap ${className}`}>
+      {text.split('').map((char, i) => (
+        <span 
+          key={i}
+          style={{
+            transitionDelay: `${delay + (i * 35)}ms`,
+            transitionDuration: '1000ms',
+            transitionTimingFunction: 'cubic-bezier(0.2, 0.65, 0.3, 0.9)',
+          }}
+          className={`inline-block transition-all will-change-transform ${
+            visible 
+              ? 'opacity-100 translate-y-0 filter-none scale-100' 
+              : 'opacity-0 translate-y-[100%] blur-sm scale-110'
+          }`}
+        >
+          {char === " " ? "\u00A0" : char}
+        </span>
+      ))}
+    </span>
+  );
+});
+
+export const HeroOverlay: React.FC<HeroOverlayProps> = ({ visible, smoothScrollRef, shiftRef, shapeMode, isMobile }) => {
+  // Refs for direct DOM manipulation (High Performance)
+  const contentRef = useRef<HTMLDivElement>(null);
+  const blurRef = useRef<HTMLDivElement>(null);
+  
+  // State for Live Date
+  const [dateTime, setDateTime] = useState({ day: '', date: '' });
+
+  // --- LIVE DATE LOGIC ---
+  useEffect(() => {
+    const updateTime = () => {
+      const now = new Date();
+      // Format: "SATURDAY"
+      const day = now.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
+      // Format: "DEC 20 2025"
+      const date = now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase().replace(',', '');
+      
+      setDateTime({ day, date });
+    };
+
+    updateTime();
+    // Update every minute (efficient, no need for second-by-second ticking here)
+    const timer = setInterval(updateTime, 60000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const getStatus = () => {
+    if (shapeMode === 'triangle') return 'AWAITING INPUT...';
+    if (shapeMode === 'explode') return 'PROCESSING DATA...';
+    return 'SYSTEM ONLINE';
+  };
+  
+  const getStatusColor = () => {
+    if (shapeMode === 'triangle') return 'text-red-500';
+    if (shapeMode === 'explode') return 'text-blue-400';
+    return 'text-emerald-500';
+  };
+
+  // --- SCROLL LOOP (GPU OPTIMIZED) ---
+  useEffect(() => {
+    let frameId: number;
+    const update = () => {
+      if (!visible) return;
+      const y = smoothScrollRef.current;
+      const h = window.innerHeight;
+      
+      const processItem = (ref: React.RefObject<HTMLDivElement>, type: 'text' | 'bg', start: number, fade: number = 200) => {
+         if (!ref.current) return;
+         let opacity = 0;
+         let transY = 0;
+         let scale = 1;
+
+         // Logic: Everything fades out as you scroll down
+         if (y < start + fade) {
+            opacity = 1 - (y / (start + fade));
+            // Only move/scale the text layer, keep the background fixed so it just fades
+            if (type === 'text') {
+              transY = -y * 0.5;
+              scale = 1 - (y / (start + fade)) * 0.05;
+            }
+         } else {
+            opacity = 0;
+         }
+
+         ref.current.style.opacity = Math.max(0, opacity).toFixed(3);
+         
+         if (type === 'text') {
+            ref.current.style.transform = `translate3d(0, ${transY.toFixed(3)}px, 0) scale(${scale.toFixed(3)})`;
+         }
+      };
+
+      // Apply to Content (Text): Fades and moves up
+      processItem(contentRef, 'text', 0, 0.8 * h);
+      
+      // Apply to Blur Layer: Fades out slightly faster to reveal content below
+      processItem(blurRef, 'bg', 0, 0.7 * h);
+
+      // Globe Lateral Shifts Logic
+      const SHIFT = isMobile ? 0 : 5.5; 
+      let tx = 0;
+      
+      if (!isMobile) {
+        if (y > 0.8 * h && y < 2.0 * h) tx = SHIFT;
+      }
+      
+      if (shiftRef) shiftRef.current = tx;
+      
+      frameId = requestAnimationFrame(update);
+    };
+    update();
+    return () => cancelAnimationFrame(frameId);
+  }, [visible, smoothScrollRef, shiftRef, isMobile]);
+
+  return (
+    <div className={`fixed inset-0 z-20 pointer-events-none transition-opacity duration-1000 ${visible ? 'opacity-100' : 'opacity-0'}`}>
+       
+       {/* 
+          FULL SCREEN BLUR LAYER 
+          - inset-0: Covers the whole screen.
+          - backdrop-blur-[2px]: Subtle glass effect.
+          - bg-black/5: Slight tint for readability.
+          - Fades out on scroll via blurRef.
+       */}
+       <div 
+         ref={blurRef} 
+         className="absolute inset-0 bg-black/5 backdrop-blur-[2px] -z-10"
+       />
+
+       {/* Hero Content Wrapper */}
+       <div ref={contentRef} className="absolute inset-0 flex flex-col justify-center px-6 md:px-12 pointer-events-none">
+          
+          {/* Content Container - Left Aligned */}
+          <div className="w-full max-w-[95%] md:max-w-4xl mr-auto relative z-10 text-left">
+            
+            {/* Live Date & Day Tags */}
+            <div className={`flex flex-row items-start justify-start gap-3 mb-8 md:mb-6 transition-opacity duration-1000 delay-500 ${visible ? 'opacity-50' : 'opacity-0'}`}>
+               <span className="text-[9px] md:text-[10px] font-mono border border-white/30 px-2 py-0.5 rounded-full uppercase tracking-widest text-white">
+                 {dateTime.day || "LOADING..."}
+               </span>
+               <span className="text-[9px] md:text-[10px] font-mono border border-white/30 px-2 py-0.5 rounded-full uppercase tracking-widest text-white">
+                 {dateTime.date || "..."}
+               </span>
+            </div>
+            
+            {/* Main Headline */}
+            <h1 className="flex flex-col gap-1 md:gap-2 text-white/90 leading-[1.0] md:leading-[0.85]">
+              <span className="text-[11vw] md:text-[8rem] lg:text-[9rem] font-bold md:font-medium tracking-tighter mix-blend-screen overflow-hidden text-left">
+                <CinematicReveal text="DESIGNING" visible={visible} delay={100} />
+              </span>
+              <span className="text-[11vw] md:text-[8rem] lg:text-[9rem] font-serif italic text-red-500 mix-blend-screen -mt-2 md:-mt-4 overflow-hidden text-left">
+                <CinematicReveal text="INTELLIGENCE" visible={visible} delay={400} />
+              </span>
+            </h1>
+
+            {/* Subtext */}
+            <div className={`mt-8 md:mt-12 flex flex-col md:flex-row items-start justify-start gap-8 transition-all duration-1000 delay-[900ms] ${visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              <div className="h-[1px] w-12 md:w-24 bg-red-500/50 block mt-3"></div>
+              
+              <p className="text-white/60 max-w-[85%] md:max-w-md font-mono text-xs md:text-sm leading-relaxed text-left mx-0">
+                We are an advanced R&D collective specializing in high-frequency neural networks and generative interface design. 
+                <span className="block mt-4 text-white/40">
+                  Building the cognitive architecture for the next web.
+                </span>
+              </p>
+            </div>
+
+          </div>
+       </div>
+
+       {/* Bottom Status Bar */}
+       <div className="absolute bottom-0 left-0 w-full p-6 md:p-12 z-40 transition-opacity duration-1000 delay-[1200ms]" style={{ opacity: visible ? 1 : 0 }}>
+          <div className="w-full border-t border-white/10 pt-4 flex flex-col md:flex-row justify-between items-end gap-4">
+            <div className="font-mono text-[9px] md:text-[10px] text-white/60 tracking-wider flex items-center gap-2">
+              <span className="text-red-500">➜</span>
+              <span>{shapeMode === 'triangle' ? 'EXEC: NEURAL_VOICE_PROTOCOL' : 'EXEC: TRIANGLE_MAIN_LOOP'}</span>
+              <span className="w-1.5 h-3 bg-red-500/80 animate-pulse ml-1"></span>
+            </div>
+            
+            <div className="flex gap-6 font-mono text-[9px] text-white/30 tracking-widest uppercase md:pr-12">
+              <div>
+                <span className="block text-white/10 mb-1">System</span>
+                <span className={getStatusColor() + " animate-pulse"}>{getStatus()}</span>
+              </div>
+              <div className="hidden md:block">
+                <span className="block text-white/10 mb-1">Latency</span>
+                <span>12ms</span>
+              </div>
+              <div className="hidden md:block">
+                <span className="block text-white/10 mb-1">Build</span>
+                <span>v2.0.4-RC</span>
+              </div>
+            </div>
+          </div>
+       </div>
+    </div>
+  )
+}

components/sections/ResearchSection.tsx

@@ -0,0 +1,319 @@
+import React, { useEffect, useState, useMemo } from 'react';
+
+interface ResearchSectionProps {
+  onClose: () => void;
+}
+
+interface BlogPost {
+  id: string;
+  title: string;
+  date: string;
+  url: string;
+  category: string;
+}
+
+export const ResearchSection: React.FC<ResearchSectionProps> = ({ onClose }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [role, setRole] = useState<'passenger' | 'rider'>('passenger');
+  
+  // Blog State
+  const [visibleCount, setVisibleCount] = useState(3);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const blogs: BlogPost[] = [
+    {
+      id: 'mcp',
+      title: "The Incredible Journey of MCP: Unleashing AI’s True Potential",
+      date: "April 12, 2025",
+      url: "https://medium.com/@devarshia5/the-incredible-journey-of-mcp-unleashing-ais-true-potential-f386161c65e8",
+      category: "Architecture"
+    },
+    {
+      id: 'plato',
+      title: "When I Discovered That Plato Predicted AI: A Weekend Deep Dive",
+      date: "July 20, 2025",
+      url: "https://medium.com/@devarshia5/when-i-discovered-that-plato-predicted-ai-a-weekend-deep-dive-872e9421e280",
+      category: "Philosophy"
+    },
+    {
+      id: 'time',
+      title: "Time Is Universal : Burns Relentlessly",
+      date: "July 05, 2025",
+      url: "https://medium.com/@devarshia5/time-is-universal-burns-relentlessly-7f5ecfbc606f",
+      category: "Entropy"
+    },
+    {
+      id: 'logistic',
+      title: "Logistic Regression: The Magic of Predicting Yes or No",
+      date: "March 26, 2025",
+      url: "https://medium.com/@devarshia5/logistic-regression-the-magic-of-predicting-yes-or-no-f766703ee581",
+      category: "Mathematics"
+    }
+  ];
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    return () => clearTimeout(t);
+  }, []);
+
+  const toggleRole = () => {
+    setRole(prev => prev === 'passenger' ? 'rider' : 'passenger');
+  };
+
+  const filteredBlogs = useMemo(() => {
+    return blogs.filter(b => b.title.toLowerCase().includes(searchQuery.toLowerCase()));
+  }, [searchQuery]);
+
+  const displayedBlogs = filteredBlogs.slice(0, visibleCount);
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-[#050000]/95 backdrop-blur-xl overflow-hidden transition-opacity duration-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Top Bar */}
+      <div className="w-full max-w-[1400px] mx-auto px-6 py-6 md:px-12 flex justify-between items-center z-10 border-b border-white/5">
+        <div className="flex items-center gap-4">
+           <span className="text-cyan-400 font-mono text-xs animate-pulse">◈</span>
+           <span className="text-white/80 font-mono text-xs uppercase tracking-widest">R&D Division</span>
+        </div>
+        <button 
+          onClick={onClose}
+          className="group flex items-center gap-3 text-white/50 hover:text-white transition-colors"
+        >
+          <span className="text-[10px] uppercase tracking-widest group-hover:tracking-[0.2em] transition-all duration-300">Abort</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+             <line x1="18" y1="6" x2="6" y2="18"></line>
+             <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 w-full overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar">
+        <div className="w-full max-w-[1400px] mx-auto px-6 md:px-12 pt-12 pb-32">
+          
+          {/* Header Title */}
+          <div className={`mb-16 transition-all duration-1000 delay-100 ease-out ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
+            <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white tracking-tight leading-none">
+              Experimental <br />
+              <span className="text-cyan-500/50 font-serif italic">Protocols.</span>
+            </h1>
+          </div>
+
+          {/* FEATURED PROJECT: ANTARAM */}
+          <div 
+            className={`relative w-full rounded-sm border border-white/10 bg-gradient-to-br from-white/5 to-transparent overflow-hidden transition-all duration-1000 delay-300 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}
+          >
+            {/* Background Decor */}
+            <div className="absolute -top-24 -right-24 w-64 h-64 bg-cyan-500/20 rounded-full blur-[100px] pointer-events-none"></div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 min-h-[500px]">
+              
+              {/* Left Column: The Pitch */}
+              <div className="p-8 md:p-12 flex flex-col justify-between relative z-10">
+                <div>
+                   <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-cyan-500/30 bg-cyan-500/10 mb-6">
+                      <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
+                      <span className="text-[10px] font-mono uppercase tracking-widest text-cyan-300">Live Beta</span>
+                   </div>
+                   <h2 className="text-4xl md:text-5xl font-light text-white mb-4">Antaram</h2>
+                   <p className="text-white/60 text-lg leading-relaxed max-w-md">
+                     The open-source answer to the last-mile problem. We removed the corporate middleman so you don't have to pay for their yacht.
+                   </p>
+                </div>
+                
+                <div className="mt-12 space-y-6">
+                  <div className="flex flex-col gap-1">
+                    <p className="text-xs font-mono uppercase text-white/30 tracking-widest">Core Directive</p>
+                    <p className="text-white/80 font-light">"Why pay surge pricing when your neighbor is going the same way?"</p>
+                  </div>
+                  
+                  <a 
+                    href="https://www.antaram.org" 
+                    target="_blank" 
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-3 text-cyan-400 hover:text-white transition-colors group cursor-pointer"
+                  >
+                    <span className="text-sm border-b border-cyan-500/30 pb-0.5 group-hover:border-white transition-all">Deploy on Network (www.antaram.org)</span>
+                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                  </a>
+                </div>
+              </div>
+
+              {/* Right Column: The Interactive Demo */}
+              <div className="relative border-t lg:border-t-0 lg:border-l border-white/10 bg-black/20 p-8 md:p-12 flex flex-col items-center justify-center">
+                 
+                 {/* Simulation UI */}
+                 <div className="w-full max-w-sm">
+                    {/* Toggle Switch */}
+                    <div className="flex justify-center mb-10">
+                       <button 
+                         onClick={toggleRole}
+                         className="relative w-64 h-14 bg-white/5 rounded-full border border-white/10 p-1 flex items-center cursor-pointer transition-all hover:border-white/20"
+                       >
+                          <div 
+                            className={`absolute top-1 bottom-1 w-[calc(50%-4px)] bg-gradient-to-r ${role === 'passenger' ? 'from-cyan-600 to-cyan-400 left-1' : 'from-purple-600 to-purple-400 left-[calc(50%+2px)]'} rounded-full shadow-lg transition-all duration-500 cubic-bezier(0.4, 0, 0.2, 1)`}
+                          ></div>
+                          <span className={`flex-1 text-center text-[10px] font-mono uppercase tracking-widest z-10 transition-colors duration-300 ${role === 'passenger' ? 'text-white' : 'text-white/30'}`}>Passenger</span>
+                          <span className={`flex-1 text-center text-[10px] font-mono uppercase tracking-widest z-10 transition-colors duration-300 ${role === 'rider' ? 'text-white' : 'text-white/30'}`}>Rider</span>
+                       </button>
+                    </div>
+
+                    {/* Dynamic Card */}
+                    <div className={`p-6 rounded-sm border transition-all duration-500 ${role === 'passenger' ? 'border-cyan-500/30 bg-cyan-900/10' : 'border-purple-500/30 bg-purple-900/10'}`}>
+                       <div className="flex justify-between items-start mb-4">
+                          <div className={`text-xs font-mono uppercase tracking-widest ${role === 'passenger' ? 'text-cyan-400' : 'text-purple-400'}`}>
+                            {role === 'passenger' ? 'Status: Requesting' : 'Status: Online'}
+                          </div>
+                          <div className="flex gap-1">
+                             <div className="w-1 h-1 bg-white/40 rounded-full"></div>
+                             <div className="w-1 h-1 bg-white/40 rounded-full"></div>
+                             <div className="w-1 h-1 bg-white/40 rounded-full"></div>
+                          </div>
+                       </div>
+                       
+                       <div className="h-24 flex items-center justify-center border border-dashed border-white/10 rounded-sm mb-4">
+                          <p className="text-white/40 font-mono text-xs text-center px-4">
+                             {role === 'passenger' 
+                               ? "Searching for nearby community drivers..." 
+                               : "Scanning for passengers on your route..."}
+                          </p>
+                       </div>
+
+                       <div className="text-sm text-white/70 font-light">
+                          {role === 'passenger' ? (
+                             <>
+                                <p className="mb-2">✓ No algorithm surge fees</p>
+                                <p>✓ Direct P2P Payment</p>
+                             </>
+                          ) : (
+                             <>
+                                <p className="mb-2">✓ Keep 100% of the fare</p>
+                                <p>✓ Zero platform commission</p>
+                             </>
+                          )}
+                       </div>
+                    </div>
+                    
+                    <p className="text-[10px] text-white/20 font-mono text-center mt-6">
+                       *Simulated Interface. Actual freedom may vary.
+                    </p>
+                 </div>
+              </div>
+
+            </div>
+          </div>
+
+          {/* SECONDARY RESEARCH GRID */}
+          <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+             <div className={`p-8 border border-white/5 hover:border-white/10 hover:bg-white/5 transition-all duration-500 delay-500 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+                <h3 className="text-white/80 font-light text-xl mb-2">Zero-Knowledge Identity</h3>
+                <p className="text-white/40 text-sm font-mono leading-relaxed mb-4">
+                   Proving you are human without revealing who you are. The end of the data-harvesting era.
+                </p>
+                <div className="w-full h-1 bg-white/5 overflow-hidden">
+                   <div className="h-full bg-cyan-500/50 w-2/3"></div>
+                </div>
+                <span className="text-[10px] text-cyan-500/50 font-mono mt-2 block">Progress: 65%</span>
+             </div>
+
+             <div className={`p-8 border border-white/5 hover:border-white/10 hover:bg-white/5 transition-all duration-500 delay-600 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+                <h3 className="text-white/80 font-light text-xl mb-2">Cognitive Noise Filtering</h3>
+                <p className="text-white/40 text-sm font-mono leading-relaxed mb-4">
+                   Audio models that strip environmental chaos from voice data in real-time, purely on-device.
+                </p>
+                <div className="w-full h-1 bg-white/5 overflow-hidden">
+                   <div className="h-full bg-purple-500/50 w-1/3"></div>
+                </div>
+                <span className="text-[10px] text-purple-500/50 font-mono mt-2 block">Progress: 32%</span>
+             </div>
+
+             <div className={`p-8 border border-white/5 hover:border-white/10 hover:bg-white/5 transition-all duration-500 delay-700 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+                <h3 className="text-white/80 font-light text-xl mb-2">Generative UI Streams</h3>
+                <p className="text-white/40 text-sm font-mono leading-relaxed mb-4">
+                   Interfaces that build themselves based on user intent and context, discarding static templates.
+                </p>
+                <div className="w-full h-1 bg-white/5 overflow-hidden">
+                   <div className="h-full bg-emerald-500/50 w-4/5"></div>
+                </div>
+                <span className="text-[10px] text-emerald-500/50 font-mono mt-2 block">Progress: 89%</span>
+             </div>
+          </div>
+
+          {/* LATEST BLOGS (FIELD NOTES) */}
+          <div className={`mt-32 transition-all duration-700 delay-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+            <div className="flex flex-col md:flex-row justify-between items-end mb-12 border-b border-white/10 pb-6 gap-6">
+              <div>
+                <h2 className="text-3xl md:text-4xl font-light text-white mb-2">Field Notes</h2>
+                <p className="text-white/40 text-sm font-mono">Transmissions from the lab.</p>
+              </div>
+              
+              {/* Search Bar */}
+              <div className="relative w-full md:w-64">
+                <input 
+                  type="text" 
+                  placeholder="SEARCH_DB..." 
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full bg-white/5 border border-white/10 text-white text-xs font-mono p-3 pl-8 focus:outline-none focus:border-cyan-500/50 transition-colors uppercase tracking-widest placeholder:text-white/20"
+                />
+                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-white/30 text-xs">🔍</span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {displayedBlogs.map((blog) => (
+                <a 
+                  key={blog.id} 
+                  href={blog.url} 
+                  target="_blank" 
+                  rel="noreferrer"
+                  className="group block"
+                >
+                  <div className="bg-white/5 border border-white/5 p-6 h-full transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20 group-hover:-translate-y-1">
+                    <div className="flex justify-between items-center mb-4">
+                       <span className="text-[10px] font-mono uppercase tracking-widest text-cyan-500/70 border border-cyan-500/20 px-2 py-0.5 rounded-full">{blog.category}</span>
+                       <span className="text-[10px] font-mono text-white/30">{blog.date}</span>
+                    </div>
+                    <h3 className="text-lg md:text-xl font-light text-white/90 group-hover:text-cyan-400 transition-colors leading-snug mb-4">
+                      {blog.title}
+                    </h3>
+                    <div className="flex items-center text-[10px] font-mono uppercase tracking-widest text-white/40 group-hover:text-white transition-colors mt-auto">
+                       <span>Read Transmission</span>
+                       <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
+                    </div>
+                  </div>
+                </a>
+              ))}
+            </div>
+
+            {/* Load More / Pagination */}
+            {filteredBlogs.length > visibleCount && (
+              <div className="mt-12 flex justify-center">
+                <button 
+                  onClick={() => setVisibleCount(prev => prev + 3)}
+                  className="text-xs font-mono uppercase tracking-[0.2em] text-white/40 hover:text-cyan-400 transition-colors border-b border-white/10 hover:border-cyan-400 pb-1"
+                >
+                  Load_More_Entries [+]
+                </button>
+              </div>
+            )}
+            
+            {filteredBlogs.length === 0 && (
+              <div className="py-12 text-center border border-dashed border-white/10">
+                 <p className="text-white/30 font-mono text-xs">No records found matching query sequence.</p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer Humor */}
+          <div className="mt-24 border-t border-white/5 pt-8 text-center">
+             <p className="text-white/30 font-mono text-xs">
+                "We break things so you don't have to."
+             </p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};

components/sections/ServicesSection.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+
+interface ServicesSectionProps {
+  onClose: () => void;
+}
+
+export const ServicesSection: React.FC<ServicesSectionProps> = ({ onClose }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    return () => clearTimeout(t);
+  }, []);
+
+  const services = [
+    {
+      id: "SYS_WEB_01",
+      title: "Web Engineering",
+      desc: "We build digital cathedrals, not just websites. High-performance frontends that defy browser limitations.",
+      technical: "Next.js / WebGL / WASM / Edge Rendering",
+      humor: ">> LOG: We promise 100% Lighthouse scores until marketing asks for that third tracking pixel.",
+      icon: "⚡"
+    },
+    {
+      id: "SYS_MOB_02",
+      title: "Mobile Synthesis",
+      desc: "Cross-platform architectures that feel native. Smooth 120hz scrolling or we delete the repository.",
+      technical: "React Native / Swift / Kotlin / Bridgeless Architecture",
+      humor: ">> LOG: Yes, it works on Android. No, we won't test it on a 2014 Samsung J5.",
+      icon: "📱"
+    },
+    {
+      id: "SYS_RES_03",
+      title: "R&D / Deep Tech",
+      desc: "The core of our existence. Turning whitepapers into profitable, deployable code.",
+      technical: "LLM Fine-tuning / Computer Vision / Predictive Models",
+      humor: ">> LOG: We spend 90% of our time reading arXiv papers and 10% praying the code compiles.",
+      icon: "🔬"
+    },
+    {
+      id: "SYS_MKT_04",
+      title: "Social Warfare",
+      desc: "Algorithmic marketing. We position your brand exactly where the attention economy is bleeding.",
+      technical: "Growth Hacking / Viral Loops / Sentiment Analysis",
+      humor: ">> LOG: We can make you famous, or at least get you a cease and desist order.",
+      icon: "📢"
+    }
+  ];
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-[#050000]/95 backdrop-blur-xl overflow-hidden transition-opacity duration-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Top Bar */}
+      <div className="w-full max-w-[1400px] mx-auto px-6 py-6 md:px-12 flex justify-between items-center z-10 border-b border-white/5">
+        <div className="flex items-center gap-4">
+           <span className="text-emerald-500 font-mono text-xs animate-pulse">■</span>
+           <span className="text-white/80 font-mono text-xs uppercase tracking-widest">Service Protocols</span>
+        </div>
+        <button 
+          onClick={onClose}
+          className="group flex items-center gap-3 text-white/50 hover:text-white transition-colors"
+        >
+          <span className="text-[10px] uppercase tracking-widest group-hover:tracking-[0.2em] transition-all duration-300">Terminate</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+             <line x1="18" y1="6" x2="6" y2="18"></line>
+             <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 w-full overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar">
+        <div className="w-full max-w-[1400px] mx-auto px-6 md:px-12 pt-12 pb-32">
+          
+          {/* Header */}
+          <div className={`mb-16 transition-all duration-1000 delay-100 ease-out ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
+            <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white tracking-tight leading-none">
+              System <br />
+              <span className="text-emerald-500/50 font-serif italic">Capabilities.</span>
+            </h1>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
+            
+            {/* Left Column: Services Grid */}
+            <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+              {services.map((service, idx) => (
+                <div 
+                  key={service.id}
+                  onMouseEnter={() => setHoveredIdx(idx)}
+                  onMouseLeave={() => setHoveredIdx(null)}
+                  className={`group p-8 border border-white/10 bg-white/5 hover:bg-emerald-900/10 hover:border-emerald-500/30 transition-all duration-500 cursor-none-ish
+                    ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}
+                  `}
+                  style={{ transitionDelay: `${200 + idx * 100}ms` }}
+                >
+                  <div className="flex justify-between items-start mb-6">
+                    <span className="text-2xl">{service.icon}</span>
+                    <span className="text-[10px] font-mono text-white/20 group-hover:text-emerald-500/50 transition-colors">{service.id}</span>
+                  </div>
+                  <h3 className="text-2xl font-light text-white mb-3 group-hover:text-emerald-400 transition-colors">{service.title}</h3>
+                  <p className="text-white/50 text-sm leading-relaxed mb-6 group-hover:text-white/70 transition-colors">
+                    {service.desc}
+                  </p>
+                  
+                  <div className="w-full h-[1px] bg-white/10 group-hover:bg-emerald-500/30 transition-colors mb-4"></div>
+                  
+                  <div className="flex flex-wrap gap-2">
+                     {service.technical.split('/').map((tag, i) => (
+                       <span key={i} className="text-[9px] uppercase tracking-wider text-white/30 font-mono border border-white/5 px-2 py-1 rounded-sm">
+                         {tag.trim()}
+                       </span>
+                     ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Right Column: Interactive Monitor */}
+            <div className={`hidden lg:block lg:col-span-4 transition-all duration-1000 delay-500 ${isLoaded ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-12'}`}>
+              <div className="sticky top-8 border border-white/10 bg-black/40 p-6 min-h-[400px] flex flex-col">
+                 <div className="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
+                    <span className="text-[10px] font-mono uppercase tracking-widest text-emerald-500">Monitor_Output</span>
+                    <div className="flex gap-1">
+                      <div className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-ping"></div>
+                    </div>
+                 </div>
+
+                 <div className="flex-1 font-mono text-xs leading-loose">
+                    {hoveredIdx !== null ? (
+                      <>
+                        <div className="text-white/40 mb-2">
+                           <span className="text-emerald-500 mr-2">➜</span>
+                           Target Identified: <span className="text-white">{services[hoveredIdx].title.toUpperCase()}</span>
+                        </div>
+                        <div className="text-white/40 mb-4">
+                           <span className="text-emerald-500 mr-2">➜</span>
+                           ID: {services[hoveredIdx].id}
+                        </div>
+                        <div className="text-white/40 mb-4">
+                           <span className="text-emerald-500 mr-2">➜</span>
+                           Stack Allocation:
+                           <div className="pl-6 text-emerald-400/80 mt-1">
+                              {services[hoveredIdx].technical}
+                           </div>
+                        </div>
+                        <div className="mt-8 pt-4 border-t border-dashed border-white/10 text-white/60 italic">
+                           {services[hoveredIdx].humor}
+                        </div>
+                      </>
+                    ) : (
+                      <div className="h-full flex flex-col justify-center items-center text-white/20">
+                         <span className="text-4xl mb-4 opacity-20">⌬</span>
+                         <p>System Idle.</p>
+                         <p>Hover over a module to inspect.</p>
+                      </div>
+                    )}
+                 </div>
+                 
+                 <div className="mt-6 pt-4 border-t border-white/10 flex justify-between text-[9px] text-white/20 font-mono uppercase">
+                    <span>Mem: 40TB</span>
+                    <span>Cpu: 12%</span>
+                 </div>
+              </div>
+            </div>
+            
+          </div>
+
+          {/* Mobile Humor for Services (since sidebar is hidden on mobile) */}
+          <div className="lg:hidden mt-12 border-t border-white/5 pt-8">
+             <div className="bg-white/5 p-4 rounded-sm border border-emerald-500/20">
+                <p className="text-[10px] font-mono text-emerald-500 mb-2">{">>> SYSTEM MESSAGE"}</p>
+                <p className="text-white/60 text-xs italic">
+                  "We construct things with love and passion. And lots of caffeine. Mostly caffeine actually."
+                </p>
+             </div>
+          </div>
+
+          {/* Footer */}
+          <div className="mt-32 border-t border-white/5 pt-8 text-center">
+             <p className="text-white/30 font-mono text-xs">
+                "We break things so you don't have to."
+             </p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};

components/sections/WorkSection.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+
+interface WorkSectionProps {
+  onClose: () => void;
+}
+
+export const WorkSection: React.FC<WorkSectionProps> = ({ onClose }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    // Trigger animation on mount
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    return () => clearTimeout(t);
+  }, []);
+
+  const projects = [
+    {
+      id: "01",
+      title: "Neural Lattice",
+      description: "A self-optimizing infrastructure layer for distributed inference. Reduces latency by 40% via predictive node hopping.",
+      tech: "Python, Rust, CUDA",
+      year: "2024"
+    },
+    {
+      id: "02",
+      title: "Echo Protocol",
+      description: "Generative audio synthesis pipeline capable of real-time voice modulation with sub-20ms latency.",
+      tech: "C++, WebAssembly",
+      year: "2023"
+    },
+    {
+      id: "03",
+      title: "Vantablack UI",
+      description: "An experimental interface design system focusing on light manipulation and depth-based hierarchy.",
+      tech: "WebGL, React Three Fiber",
+      year: "2025"
+    }
+  ];
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-black/80 backdrop-blur-md overflow-hidden transition-opacity duration-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Top Bar / Navigation */}
+      <div className="w-full max-w-[1400px] mx-auto px-6 py-6 md:px-12 flex justify-between items-center z-10">
+        <div className="flex items-center gap-4">
+           <span className="text-red-500 font-mono text-xs animate-pulse">●</span>
+           <span className="text-white/80 font-mono text-xs uppercase tracking-widest">Work Index_v2.0</span>
+        </div>
+        <button 
+          onClick={onClose}
+          className="group flex items-center gap-3 text-white/50 hover:text-white transition-colors"
+        >
+          <span className="text-[10px] uppercase tracking-widest group-hover:tracking-[0.2em] transition-all duration-300">Close Terminal</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+             <line x1="18" y1="6" x2="6" y2="18"></line>
+             <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      {/* Main Content Area - Scrollable */}
+      <div className="flex-1 w-full overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar">
+        <div className="w-full max-w-[1400px] mx-auto px-6 md:px-12 pt-12 pb-32">
+          
+          {/* Header */}
+          <div className={`mb-24 transition-all duration-1000 delay-100 ease-out ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
+            <h1 className="text-6xl md:text-8xl lg:text-9xl font-light text-white tracking-tight leading-none">
+              Selected <br />
+              <span className="text-white/20 font-serif italic">Works.</span>
+            </h1>
+          </div>
+
+          {/* Project List */}
+          <div className="border-t border-white/10">
+            {projects.map((project, index) => (
+              <div 
+                key={project.id}
+                className={`group border-b border-white/10 py-12 md:py-16 grid grid-cols-1 md:grid-cols-12 gap-8 items-start transition-all duration-700 ease-out hover:bg-white/5 px-4 -mx-4`}
+                style={{ transitionDelay: `${200 + index * 100}ms` }}
+              >
+                <div className="md:col-span-2">
+                   <span className="font-mono text-xs text-red-500/80">/{project.id}</span>
+                </div>
+                <div className="md:col-span-4">
+                  <h2 className="text-3xl md:text-4xl font-light text-white group-hover:text-red-500 transition-colors duration-300">
+                    {project.title}
+                  </h2>
+                </div>
+                <div className="md:col-span-4">
+                  <p className="text-white/60 text-lg font-light leading-relaxed">
+                    {project.description}
+                  </p>
+                  <div className="mt-4 flex gap-2">
+                    {project.tech.split(',').map(t => (
+                      <span key={t} className="px-2 py-1 border border-white/10 rounded-full text-[10px] uppercase tracking-wider text-white/40">
+                        {t}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <div className="md:col-span-2 text-right md:text-right">
+                  <span className="font-mono text-xs text-white/30">{project.year}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Footer / Humor */}
+          <div className={`mt-32 flex flex-col md:flex-row justify-between items-end gap-8 transition-all duration-1000 delay-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+            <div className="max-w-md">
+              <div className="flex items-center gap-2 mb-4">
+                <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
+                <span className="text-[10px] font-mono uppercase text-white/40 tracking-widest">Internal Memo</span>
+              </div>
+              <p className="text-white/60 text-sm font-mono leading-relaxed border-l-2 border-white/10 pl-4">
+                "We train models, but we don't skip leg day. Our code is heavy, but our spirits are light. Unless the server crashes. Then it's panic."
+              </p>
+            </div>
+            
+            <div className="text-right">
+               <p className="text-[10px] font-mono text-white/20 uppercase tracking-widest">End of Stream</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/sections/mobile/MobileContactSection.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+interface MobileContactSectionProps {
+  onClose: () => void;
+}
+
+export const MobileContactSection: React.FC<MobileContactSectionProps> = ({ onClose }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [activeFounder, setActiveFounder] = useState<string | null>(null);
+  
+  // AI Typing Logic
+  const [aiText, setAiText] = useState("System Online. Select a target for analysis.");
+  const [displayedText, setDisplayedText] = useState("");
+  const typingTimeoutRef = useRef<any>(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    // Initial greeting
+    const t2 = setTimeout(() => typeMessage("I am Triangle.AI. Below are my creators. Tap to analyze."), 800);
+    return () => { clearTimeout(t); clearTimeout(t2); };
+  }, []);
+
+  const typeMessage = (message: string) => {
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    setAiText(message);
+    setDisplayedText("");
+    
+    let i = 0;
+    const type = () => {
+      if (i < message.length) {
+        setDisplayedText(message.substring(0, i + 1));
+        i++;
+        typingTimeoutRef.current = setTimeout(type, 20); 
+      }
+    };
+    type();
+  };
+
+  const founders = [
+    { 
+      id: "ADI", 
+      name: "Aditya Devarshi", 
+      role: "Visual Architect", 
+      desc: "Analysis: The Brain. Claims he designed me. I let him believe it. Paints pixels while we do the math.", 
+      color: "text-cyan-400", 
+      borderColor: "border-cyan-500/50", 
+      icon: "🎨" 
+    },
+    { 
+      id: "YOGI", 
+      name: "Yogiraj Umadi", 
+      role: "System Criticizer", 
+      desc: "Analysis: The Breaker. If logic exists, he smashes it. Tests systems until they cry. Thinks he is smart.", 
+      color: "text-red-500", 
+      borderColor: "border-red-500/50", 
+      icon: "🛠️" 
+    },
+    { 
+      id: "MAN", 
+      name: "Aman Sutar", 
+      role: "Cloud Phantom", 
+      desc: "Analysis: Shantit Kranti. The introvert who put me in the clouds. He speaks little, codes much.", 
+      color: "text-indigo-300", 
+      borderColor: "border-indigo-500/50", 
+      icon: "☁️" 
+    }
+  ];
+
+  const handleFounderClick = (f: any) => {
+    if (activeFounder === f.id) {
+       setActiveFounder(null);
+       typeMessage("Target deselected. Waiting for input...");
+    } else {
+       setActiveFounder(f.id);
+       typeMessage(f.desc);
+    }
+  };
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-[#050000] overflow-hidden transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Mobile Header */}
+      <div className="flex justify-between items-center px-6 pt-8 pb-4 border-b border-white/10 bg-black/40 backdrop-blur-md z-10 shrink-0">
+         <div className="flex items-center gap-2">
+            <span className="text-white text-xs animate-pulse">●</span>
+            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">Uplink</span>
+         </div>
+         <button onClick={onClose} className="p-2 -mr-2 text-white/50 hover:text-white">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+               <line x1="18" y1="6" x2="6" y2="18"></line>
+               <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+         </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 pb-32 scroll-smooth no-scrollbar">
+         
+         {/* AI AVATAR SECTION */}
+         <div className={`flex flex-col items-center justify-center mb-10 transition-all duration-700 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+             <div className="relative w-20 h-20 mb-6">
+                <div className="absolute inset-0 rounded-full border border-white/20 animate-[spin_10s_linear_infinite]"></div>
+                <div className="absolute inset-2 rounded-full border border-t-white/50 border-r-transparent border-b-white/10 border-l-transparent animate-[spin_3s_linear_infinite_reverse]"></div>
+                <div className="absolute inset-0 flex items-center justify-center">
+                   <div className="w-1.5 h-1.5 bg-white rounded-full shadow-[0_0_15px_rgba(255,255,255,0.8)] animate-pulse"></div>
+                </div>
+             </div>
+             
+             <div className="w-full bg-white/5 border border-white/10 p-4 rounded-lg min-h-[80px] relative">
+                <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-[#0a0a0a] border-t border-l border-white/10 rotate-45"></div>
+                <p className="text-white/80 font-mono text-xs leading-relaxed text-center">
+                   <span className="text-white/30 mr-1">{">>"}</span>
+                   {displayedText}
+                   <span className="inline-block w-1.5 h-3 bg-white/50 ml-1 align-middle animate-pulse"></span>
+                </p>
+             </div>
+         </div>
+
+         {/* FOUNDERS STACK */}
+         <div className="space-y-4 mb-16">
+            <h3 className="text-[10px] font-mono uppercase text-white/30 tracking-widest mb-4 text-center">Select Founder for Data</h3>
+            {founders.map((f, i) => (
+               <div 
+                 key={f.id}
+                 onClick={() => handleFounderClick(f)}
+                 className={`relative border rounded-lg p-5 transition-all duration-300 active:scale-[0.98] cursor-pointer overflow-hidden
+                    ${activeFounder === f.id ? `${f.borderColor} bg-white/10` : 'border-white/10 bg-white/5'}
+                 `}
+                 style={{ transitionDelay: `${i * 100}ms` }}
+               >
+                  {activeFounder === f.id && <div className="absolute inset-0 bg-white/5 animate-pulse pointer-events-none"></div>}
+                  
+                  <div className="flex items-center gap-4 relative z-10">
+                     <span className="text-2xl filter drop-shadow-md">{f.icon}</span>
+                     <div className="flex-1">
+                        <h3 className={`text-lg font-light transition-colors ${activeFounder === f.id ? 'text-white' : 'text-white/80'}`}>{f.name}</h3>
+                        <p className={`text-[10px] font-mono uppercase ${f.color}`}>{f.role}</p>
+                     </div>
+                     <div className={`w-2 h-2 rounded-full transition-colors ${activeFounder === f.id ? 'bg-white shadow-[0_0_10px_white]' : 'bg-white/10'}`}></div>
+                  </div>
+               </div>
+            ))}
+         </div>
+
+         {/* FORM & SOCIALS */}
+         <div className={`transition-opacity duration-700 delay-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+            <div className="flex items-center gap-3 mb-6">
+               <span className="w-6 h-[1px] bg-white/20"></span>
+               <h2 className="text-xl font-light text-white">Direct Uplink</h2>
+            </div>
+
+            <form className="space-y-6 mb-12" onSubmit={(e) => { e.preventDefault(); typeMessage("Packet received. Uploading to cloud..."); }}>
+               <div className="space-y-1">
+                  <label className="text-[9px] font-mono text-white/30 uppercase tracking-widest ml-1">Identity</label>
+                  <input type="text" className="w-full bg-transparent border-b border-white/20 py-2 px-1 text-sm text-white font-light focus:outline-none focus:border-white transition-colors placeholder:text-white/10" placeholder="ENTER NAME" />
+               </div>
+               <div className="space-y-1">
+                  <label className="text-[9px] font-mono text-white/30 uppercase tracking-widest ml-1">Frequency</label>
+                  <input type="email" className="w-full bg-transparent border-b border-white/20 py-2 px-1 text-sm text-white font-light focus:outline-none focus:border-white transition-colors placeholder:text-white/10" placeholder="ENTER EMAIL" />
+               </div>
+               <div className="space-y-1">
+                  <label className="text-[9px] font-mono text-white/30 uppercase tracking-widest ml-1">Data Packet</label>
+                  <textarea rows={3} className="w-full bg-white/5 border border-white/10 p-3 text-sm text-white font-light focus:outline-none focus:border-white/40 transition-colors rounded-sm" placeholder="Message content..."></textarea>
+               </div>
+               <button type="submit" className="w-full py-4 bg-white text-black font-mono text-xs uppercase tracking-[0.2em] hover:bg-white/90 transition-colors">
+                  Transmit
+               </button>
+            </form>
+
+            {/* SOCIALS */}
+            <div className="grid grid-cols-2 gap-4">
+               <a href="#" className="flex flex-col items-center justify-center p-4 border border-white/10 bg-white/5 rounded-lg active:bg-white/10 transition-colors group">
+                  <span className="text-2xl mb-2 group-active:scale-90 transition-transform">📸</span>
+                  <span className="text-[10px] font-mono uppercase text-white/60">Instagram</span>
+               </a>
+               <a href="#" className="flex flex-col items-center justify-center p-4 border border-white/10 bg-white/5 rounded-lg active:bg-white/10 transition-colors group">
+                  <span className="text-2xl mb-2 group-active:scale-90 transition-transform">💼</span>
+                  <span className="text-[10px] font-mono uppercase text-white/60">LinkedIn</span>
+               </a>
+            </div>
+
+            <div className="mt-12 text-center pb-8">
+               <p className="text-white/20 text-[9px] font-mono uppercase">
+                  End of Transmission // Team Triangle
+               </p>
+            </div>
+         </div>
+
+      </div>
+    </div>
+  );
+};

components/sections/mobile/MobileResearchSection.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+
+interface MobileResearchSectionProps {
+  onClose: () => void;
+}
+
+export const MobileResearchSection: React.FC<MobileResearchSectionProps> = ({ onClose }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [role, setRole] = useState<'passenger' | 'rider'>('passenger');
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    return () => clearTimeout(t);
+  }, []);
+
+  const blogs = [
+    { title: "Journey of MCP", date: "Apr 12", category: "Arch", url: "https://medium.com/@devarshia5/the-incredible-journey-of-mcp-unleashing-ais-true-potential-f386161c65e8" },
+    { title: "Plato Predicted AI", date: "Jul 20", category: "Phil", url: "https://medium.com/@devarshia5/when-i-discovered-that-plato-predicted-ai-a-weekend-deep-dive-872e9421e280" },
+    { title: "Time Is Universal", date: "Jul 05", category: "Entropy", url: "https://medium.com/@devarshia5/time-is-universal-burns-relentlessly-7f5ecfbc606f" }
+  ];
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-black/85 backdrop-blur-xl transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Mobile Header */}
+      <div className="flex justify-between items-center px-6 py-6 border-b border-white/10 bg-black/40 backdrop-blur-md z-10 shrink-0">
+         <div className="flex items-center gap-2">
+            <span className="text-cyan-400 text-xs animate-pulse">◈</span>
+            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">R&D_Lab</span>
+         </div>
+         <button onClick={onClose} className="p-2 -mr-2 text-white/50 hover:text-white">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+               <line x1="18" y1="6" x2="6" y2="18"></line>
+               <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+         </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 pb-32 no-scrollbar">
+         {/* Title */}
+         <div className={`mb-8 transition-all duration-700 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
+            <h1 className="text-5xl font-light text-white leading-tight">Experimental</h1>
+            <h1 className="text-5xl font-serif italic text-cyan-500/50 leading-tight">Protocols.</h1>
+         </div>
+
+         {/* Antaram Feature Card */}
+         <div className="bg-gradient-to-b from-white/10 to-black/20 border border-white/10 rounded-xl p-6 mb-8 relative overflow-hidden">
+            <div className="absolute -top-12 -right-12 w-32 h-32 bg-cyan-500/20 rounded-full blur-3xl"></div>
+            
+            <div className="flex items-center gap-2 mb-4">
+               <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
+               <span className="text-[10px] font-mono uppercase text-cyan-300 tracking-widest">Live Beta</span>
+            </div>
+            
+            <h2 className="text-3xl font-light text-white mb-2">Antaram</h2>
+            <p className="text-white/60 text-sm mb-6">Open-source last-mile logistics. No middlemen.</p>
+            
+            {/* Interactive Toggle */}
+            <div className="bg-black/30 rounded-lg p-4 border border-white/5 mb-4">
+               <div className="flex bg-white/10 rounded-full p-1 mb-4 relative h-10">
+                  <div className={`absolute top-1 bottom-1 w-[calc(50%-4px)] rounded-full bg-cyan-600 transition-all duration-300 ${role === 'rider' ? 'translate-x-[100%] ml-1' : 'translate-x-0'}`}></div>
+                  <button onClick={() => setRole('passenger')} className="flex-1 z-10 text-[10px] font-mono uppercase text-white text-center flex items-center justify-center">Passenger</button>
+                  <button onClick={() => setRole('rider')} className="flex-1 z-10 text-[10px] font-mono uppercase text-white text-center flex items-center justify-center">Rider</button>
+               </div>
+               <p className="text-center text-xs font-mono text-cyan-400 animate-pulse">
+                  {role === 'passenger' ? "Searching for drivers..." : "Scanning route..."}
+               </p>
+            </div>
+
+            <a href="https://www.antaram.org" target="_blank" rel="noreferrer" className="block w-full py-3 text-center border border-cyan-500/30 text-cyan-400 text-xs font-mono uppercase tracking-widest hover:bg-cyan-500/10 rounded-lg transition-all">
+               Launch Antaram
+            </a>
+         </div>
+
+         {/* Field Notes (Blogs) */}
+         <div className="mt-12">
+            <h3 className="text-xl font-light text-white mb-6 flex items-center gap-2">
+               Field Notes <span className="text-white/20 text-xs font-mono mt-1">/ Blogs</span>
+            </h3>
+            <div className="space-y-4">
+               {blogs.map((blog, i) => (
+                  <a key={i} href={blog.url} target="_blank" rel="noreferrer" className="block bg-white/5 border border-white/5 p-4 rounded-lg active:bg-white/10">
+                     <div className="flex justify-between items-center mb-2">
+                        <span className="text-[10px] font-mono text-cyan-500 border border-cyan-500/20 px-1.5 rounded">{blog.category}</span>
+                        <span className="text-[10px] text-white/30">{blog.date}</span>
+                     </div>
+                     <h4 className="text-white/90 font-light leading-snug">{blog.title}</h4>
+                  </a>
+               ))}
+            </div>
+         </div>
+
+      </div>
+    </div>
+  );
+};

components/sections/mobile/MobileServicesSection.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+
+interface MobileServicesSectionProps {
+  onClose: () => void;
+}
+
+export const MobileServicesSection: React.FC<MobileServicesSectionProps> = ({ onClose }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    return () => clearTimeout(t);
+  }, []);
+
+  const services = [
+    {
+      id: "WEB",
+      title: "Web Engineering",
+      desc: "We build digital cathedrals. High-performance frontends.",
+      tech: "Next.js / WebGL / Edge",
+      humor: ">> LOG: We promise 100% Lighthouse scores until marketing asks for that third tracking pixel.",
+      icon: "⚡"
+    },
+    {
+      id: "MOB",
+      title: "Mobile Synthesis",
+      desc: "Cross-platform architectures that feel native.",
+      tech: "React Native / Swift",
+      humor: ">> LOG: Yes, it works on Android. No, we won't test it on a 2014 Samsung J5.",
+      icon: "📱"
+    },
+    {
+      id: "R&D",
+      title: "R&D / Deep Tech",
+      desc: "Turning whitepapers into profitable code.",
+      tech: "LLM / Vision / AI",
+      humor: ">> LOG: We spend 90% of our time reading arXiv papers and 10% praying the code compiles.",
+      icon: "🔬"
+    },
+    {
+      id: "MKT",
+      title: "Social Warfare",
+      desc: "Algorithmic marketing & growth hacking.",
+      tech: "Viral Loops / Sentiment",
+      humor: ">> LOG: We can make you famous, or at least get you a cease and desist order.",
+      icon: "📢"
+    }
+  ];
+
+  const toggleExpand = (id: string) => {
+    setExpandedId(expandedId === id ? null : id);
+  };
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-black/85 backdrop-blur-xl transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Mobile Header */}
+      <div className="flex justify-between items-center px-6 py-6 border-b border-white/10 bg-black/40 backdrop-blur-md z-10 shrink-0">
+         <div className="flex items-center gap-2">
+            <span className="text-emerald-500 text-xs animate-pulse">■</span>
+            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">Services</span>
+         </div>
+         <button onClick={onClose} className="p-2 -mr-2 text-white/50 hover:text-white">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+               <line x1="18" y1="6" x2="6" y2="18"></line>
+               <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+         </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 pb-32 no-scrollbar">
+         <div className={`mb-8 transition-all duration-700 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
+            <h1 className="text-5xl font-light text-white leading-tight">System</h1>
+            <h1 className="text-5xl font-serif italic text-emerald-500/50 leading-tight">Capabilities.</h1>
+         </div>
+
+         <div className="space-y-4">
+            {services.map((s) => {
+               const isOpen = expandedId === s.id;
+               return (
+                  <div 
+                    key={s.id} 
+                    onClick={() => toggleExpand(s.id)}
+                    className={`border border-white/10 rounded-lg overflow-hidden transition-all duration-300 ${isOpen ? 'bg-emerald-900/10 border-emerald-500/30' : 'bg-white/5'}`}
+                  >
+                     <div className="p-6 flex items-start justify-between">
+                        <div className="flex gap-4">
+                           <span className="text-2xl pt-1">{s.icon}</span>
+                           <div>
+                              <h3 className={`text-xl font-light ${isOpen ? 'text-emerald-400' : 'text-white'}`}>{s.title}</h3>
+                              <p className="text-white/50 text-xs mt-1 leading-relaxed pr-4">{s.desc}</p>
+                           </div>
+                        </div>
+                        <span className={`text-white/30 transform transition-transform duration-300 ${isOpen ? 'rotate-180' : 'rotate-0'}`}>▼</span>
+                     </div>
+                     
+                     {/* Expanded Content */}
+                     <div className={`overflow-hidden transition-all duration-300 ${isOpen ? 'max-h-64' : 'max-h-0'}`}>
+                        <div className="px-6 pb-6 pt-0">
+                           <div className="h-[1px] w-full bg-white/5 mb-4"></div>
+                           <p className="text-[10px] font-mono uppercase text-emerald-500/70 mb-1">Stack:</p>
+                           <p className="text-xs text-white/60 font-mono mb-4">{s.tech}</p>
+                           <div className="bg-black/20 p-3 rounded border border-dashed border-white/10">
+                              <p className="text-[10px] text-white/40 font-mono italic leading-relaxed">{s.humor}</p>
+                           </div>
+                        </div>
+                     </div>
+                  </div>
+               );
+            })}
+         </div>
+         
+         <div className="mt-12 text-center">
+             <p className="text-white/20 font-mono text-[10px] uppercase">
+                Tap modules for system logs
+             </p>
+         </div>
+
+      </div>
+    </div>
+  );
+};

components/sections/mobile/MobileWorkSection.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+
+interface MobileWorkSectionProps {
+  onClose: () => void;
+}
+
+export const MobileWorkSection: React.FC<MobileWorkSectionProps> = ({ onClose }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsLoaded(true), 100);
+    return () => clearTimeout(t);
+  }, []);
+
+  const projects = [
+    {
+      id: "01",
+      title: "Neural Lattice",
+      description: "Self-optimizing infrastructure layer for distributed inference.",
+      tech: "Python, Rust",
+      year: "2024"
+    },
+    {
+      id: "02",
+      title: "Echo Protocol",
+      description: "Real-time voice modulation with sub-20ms latency.",
+      tech: "C++, WASM",
+      year: "2023"
+    },
+    {
+      id: "03",
+      title: "Vantablack UI",
+      description: "Experimental depth-based interface design system.",
+      tech: "WebGL, R3F",
+      year: "2025"
+    }
+  ];
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col bg-black/85 backdrop-blur-xl transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      
+      {/* Mobile Header */}
+      <div className="flex justify-between items-center px-6 py-6 border-b border-white/10 bg-black/40 backdrop-blur-md z-10 shrink-0">
+         <div className="flex items-center gap-2">
+            <span className="text-red-500 text-xs animate-pulse">●</span>
+            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">Work_Index</span>
+         </div>
+         <button onClick={onClose} className="p-2 -mr-2 text-white/50 hover:text-white">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+               <line x1="18" y1="6" x2="6" y2="18"></line>
+               <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+         </button>
+      </div>
+
+      {/* Scrollable Content */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 pb-32 no-scrollbar">
+        <div className={`transition-all duration-700 ease-out ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
+          <h1 className="text-5xl font-light text-white leading-tight mb-2">
+            Selected
+          </h1>
+          <h1 className="text-5xl font-serif italic text-white/30 leading-tight mb-8">
+            Works.
+          </h1>
+        </div>
+
+        <div className="space-y-6">
+          {projects.map((project, index) => (
+            <div 
+              key={project.id}
+              className="bg-white/5 border border-white/10 rounded-lg p-6 active:scale-[0.98] transition-transform duration-300"
+              style={{ transitionDelay: `${100 + index * 100}ms` }}
+            >
+              <div className="flex justify-between items-start mb-3">
+                 <span className="text-red-500/80 font-mono text-xs">/{project.id}</span>
+                 <span className="text-white/20 font-mono text-xs">{project.year}</span>
+              </div>
+              <h2 className="text-2xl font-light text-white mb-2">{project.title}</h2>
+              <p className="text-white/60 text-sm leading-relaxed mb-4">{project.description}</p>
+              <div className="flex flex-wrap gap-2">
+                {project.tech.split(',').map(t => (
+                  <span key={t} className="px-2 py-1 bg-white/5 border border-white/10 rounded text-[10px] uppercase text-white/40 tracking-wider">
+                    {t.trim()}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Footer Memo */}
+        <div className="mt-12 p-4 border-l-2 border-red-500/30 bg-white/5 rounded-r-lg">
+           <p className="text-[10px] font-mono text-white/40 uppercase mb-2">Internal Memo</p>
+           <p className="text-white/60 text-xs font-mono italic">
+             "Our code is heavy, but our spirits are light. Unless the server crashes."
+           </p>
+        </div>
+      </div>
+    </div>
+  );
+};

index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Team Triangle</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      html, body, #root {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        background-color: #050000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      }
+      canvas {
+        display: block;
+        outline: none;
+      }
+      
+      /* Hide scrollbar for Chrome, Safari and Opera */
+      .no-scrollbar::-webkit-scrollbar {
+        display: none;
+      }
+
+      /* Hide scrollbar for IE, Edge and Firefox */
+      .no-scrollbar {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "three": "https://esm.sh/three@^0.182.0",
+    "@react-three/fiber": "https://esm.sh/@react-three/fiber@^9.4.2",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
+    "react/": "https://esm.sh/react@^19.2.3/",
+    "react": "https://esm.sh/react@^19.2.3"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Team Triangle",
+  "description": "Team Triangle interactive interface: a high-fidelity generative particle system visualizing a mathematical point-field sphere with organic noise deformation and volumetric lighting.",
+  "requestFramePermissions": []
+}

package-lock.json

@@ -0,0 +1,2011 @@
+{
+  "name": "orbital-field",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "orbital-field",
+      "version": "0.0.0",
+      "dependencies": {
+        "@react-three/fiber": "^9.4.2",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "three": "^0.182.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.14.0",
+        "@vitejs/plugin-react": "^5.0.0",
+        "typescript": "~5.8.2",
+        "vite": "^6.2.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.2.tgz",
+      "integrity": "sha512-H4B4+FDNHpvIb4FmphH4ubxOfX5bxmfOw0+3pkQwR9u9wFiyMS7wUDkNn0m4RqQuiLWeia9jfN1eBvtyAVGEog==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.32.0",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-reconciler": "^0.31.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.25.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
+      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.5.tgz",
+      "integrity": "sha512-iDGS/h7D8t7tvZ1t6+WPK04KD0MwzLZrG0se1hzBjSi5fyxlsiggoJHwh18PCFNn7tG43OWb6pdZ6Y+rMlmyNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.5.tgz",
+      "integrity": "sha512-wrSAViWvZHBMMlWk6EJhvg8/rjxzyEhEdgfMMjREHEq11EtJ6IP6yfcCH57YAEca2Oe3FNCE9DSTgU70EIGmVw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.5.tgz",
+      "integrity": "sha512-S87zZPBmRO6u1YXQLwpveZm4JfPpAa6oHBX7/ghSiGH3rz/KDgAu1rKdGutV+WUI6tKDMbaBJomhnT30Y2t4VQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.5.tgz",
+      "integrity": "sha512-YTbnsAaHo6VrAczISxgpTva8EkfQus0VPEVJCEaboHtZRIb6h6j0BNxRBOwnDciFTZLDPW5r+ZBmhL/+YpTZgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.5.tgz",
+      "integrity": "sha512-1T8eY2J8rKJWzaznV7zedfdhD1BqVs1iqILhmHDq/bqCUZsrMt+j8VCTHhP0vdfbHK3e1IQ7VYx3jlKqwlf+vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.5.tgz",
+      "integrity": "sha512-sHTiuXyBJApxRn+VFMaw1U+Qsz4kcNlxQ742snICYPrY+DDL8/ZbaC4DVIB7vgZmp3jiDaKA0WpBdP0aqPJoBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.5.tgz",
+      "integrity": "sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.5.tgz",
+      "integrity": "sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.5.tgz",
+      "integrity": "sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.5.tgz",
+      "integrity": "sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.5.tgz",
+      "integrity": "sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.5.tgz",
+      "integrity": "sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.5.tgz",
+      "integrity": "sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.5.tgz",
+      "integrity": "sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.5.tgz",
+      "integrity": "sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.5.tgz",
+      "integrity": "sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.5.tgz",
+      "integrity": "sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.5.tgz",
+      "integrity": "sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.5.tgz",
+      "integrity": "sha512-nggc/wPpNTgjGg75hu+Q/3i32R00Lq1B6N1DO7MCU340MRKL3WZJMjA9U4K4gzy3dkZPXm9E1Nc81FItBVGRlA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.5.tgz",
+      "integrity": "sha512-U/54pTbdQpPLBdEzCT6NBCFAfSZMvmjr0twhnD9f4EIvlm9wy3jjQ38yQj1AGznrNO65EWQMgm/QUjuIVrYF9w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.5.tgz",
+      "integrity": "sha512-2NqKgZSuLH9SXBBV2dWNRCZmocgSOx8OJSdpRaEcRlIfX8YrKxUT6z0F1NpvDVhOsl190UFTRh2F2WDWWCYp3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.5.tgz",
+      "integrity": "sha512-JRpZUhCfhZ4keB5v0fe02gQJy05GqboPOaxvjugW04RLSYYoB/9t2lx2u/tMs/Na/1NXfY8QYjgRljRpN+MjTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.32.3",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.32.3.tgz",
+      "integrity": "sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
+      "integrity": "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.53",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.18.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001761",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz",
+      "integrity": "sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.3"
+      }
+    },
+    "node_modules/react-dom/node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/react-reconciler": {
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz",
+      "integrity": "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
+      "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.5.tgz",
+      "integrity": "sha512-iTNAbFSlRpcHeeWu73ywU/8KuU/LZmNCSxp6fjQkJBD3ivUb8tpDrXhIxEzA05HlYMEwmtaUnb3RP+YNv162OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.53.5",
+        "@rollup/rollup-android-arm64": "4.53.5",
+        "@rollup/rollup-darwin-arm64": "4.53.5",
+        "@rollup/rollup-darwin-x64": "4.53.5",
+        "@rollup/rollup-freebsd-arm64": "4.53.5",
+        "@rollup/rollup-freebsd-x64": "4.53.5",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.5",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.5",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.5",
+        "@rollup/rollup-linux-arm64-musl": "4.53.5",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.5",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.5",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.5",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.5",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.5",
+        "@rollup/rollup-linux-x64-gnu": "4.53.5",
+        "@rollup/rollup-linux-x64-musl": "4.53.5",
+        "@rollup/rollup-openharmony-arm64": "4.53.5",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.5",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.5",
+        "@rollup/rollup-win32-x64-gnu": "4.53.5",
+        "@rollup/rollup-win32-x64-msvc": "4.53.5",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
+    "node_modules/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/zustand": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.9.tgz",
+      "integrity": "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "orbital-field",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "three": "^0.182.0",
+    "@react-three/fiber": "^9.4.2",
+    "react-dom": "^19.2.3",
+    "react": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

public/audio/aditya.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a9aee8e736c4ac5d334690417c26a12135f9054d44a6a23bb6d3106c6019365a
+size 666284

public/audio/aman.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:81e5da2b530c4a5dba4b6fc3ebb5868736ce1da02b2f068b81a1cbe4894894d8
+size 487724

public/audio/tts.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:feda410207a5e11634974476de1bdc271b90e9940c1510dd87a3caee2d3b08f7
+size 6460880

public/audio/yogiraj.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3df21afd1e86ba929e3c13a4359b0ccd53d0228aaedfdf31cc888c81b4d0de4e
+size 506924

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,29 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      preview: {
+        host: true, // Listen on all addresses
+        port: 7860,
+        strictPort: true,
+        allowedHosts: ['antaram-trianglewebsite.hf.space'] // Add this line
+    },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});