@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--void: #050508;--deep: #0a0a10;--surface: #12121a;--glow: #6366f1;--accent: #a855f7;--cyan: #22d3ee;--text: #e8eaed;--muted: #6b7280;--font: "Space Grotesk", -apple-system, sans-serif;--font-display: "Orbitron", sans-serif;--mono: "JetBrains Mono", monospace}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font);background:var(--void);color:var(--text);-webkit-font-smoothing:antialiased}.app{position:fixed;inset:0;overflow:hidden}.bg-deep{position:fixed;inset:0;background:var(--void)}.bg-gradient{position:fixed;inset:0;background:radial-gradient(ellipse 100% 70% at 50% 0%,rgba(99,102,241,.12) 0%,transparent 50%),radial-gradient(ellipse 80% 50% at 0% 50%,rgba(168,85,247,.08) 0%,transparent 40%),radial-gradient(ellipse 80% 50% at 100% 50%,rgba(34,211,238,.06) 0%,transparent 40%),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(99,102,241,.1) 0%,transparent 50%);animation:gradientPulse 8s ease-in-out infinite}@keyframes gradientPulse{0%,to{opacity:1}50%{opacity:.7}}.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(99,102,241,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.03) 1px,transparent 1px);background-size:60px 60px;animation:gridMove 20s linear infinite}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(60px,60px)}}.bg-particles{position:fixed;inset:0;overflow:hidden;pointer-events:none}.bg-particles:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20vw 30vh,rgba(99,102,241,.4) 50%,transparent 50%),radial-gradient(2px 2px at 40vw 70vh,rgba(168,85,247,.3) 50%,transparent 50%),radial-gradient(1px 1px at 60vw 20vh,rgba(34,211,238,.4) 50%,transparent 50%),radial-gradient(2px 2px at 80vw 50vh,rgba(99,102,241,.3) 50%,transparent 50%),radial-gradient(1px 1px at 10vw 80vh,rgba(168,85,247,.4) 50%,transparent 50%),radial-gradient(2px 2px at 90vw 10vh,rgba(34,211,238,.3) 50%,transparent 50%),radial-gradient(1px 1px at 30vw 90vh,rgba(99,102,241,.4) 50%,transparent 50%),radial-gradient(2px 2px at 70vw 40vh,rgba(168,85,247,.3) 50%,transparent 50%);animation:particleFloat 15s ease-in-out infinite}@keyframes particleFloat{0%,to{transform:translateY(0) scale(1);opacity:.8}50%{transform:translateY(-30px) scale(1.1);opacity:1}}.bg-glow{position:fixed;top:50%;left:50%;width:800px;height:800px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 60%);pointer-events:none;animation:glowPulse 4s ease-in-out infinite}@keyframes glowPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px)}.canvas-container{position:fixed;inset:0;z-index:10}.loading-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;background:var(--void);transition:opacity .8s ease,transform .8s ease}.loading-screen.exiting{opacity:0;transform:scale(1.1)}.loading-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(99,102,241,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.05) 1px,transparent 1px);background-size:40px 40px;animation:gridMove 15s linear infinite}.loading-scan{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--glow),transparent);animation:scanMove 2s ease-in-out infinite}@keyframes scanMove{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}to{top:100%;opacity:0}}.loading-content{position:relative;z-index:2;text-align:center}.loading-ring{position:relative;width:150px;height:150px;margin:0 auto 3rem}.loading-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#6366f11a;stroke-width:2}.ring-progress{fill:none;stroke:var(--glow);stroke-width:2;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset .2s ease;filter:drop-shadow(0 0 10px var(--glow))}.loading-ring .loading-percent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:2.5rem;font-weight:600;color:var(--text);text-shadow:0 0 30px var(--glow)}.loading-text{margin-bottom:2rem}.glitch-text{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.5rem);font-weight:700;letter-spacing:.3em;color:var(--text);position:relative;text-shadow:0 0 40px var(--glow);animation:glitch 3s infinite}@keyframes glitch{0%,90%,to{text-shadow:0 0 40px var(--glow)}92%{text-shadow:-2px 0 var(--cyan),2px 0 var(--accent)}94%{text-shadow:2px 0 var(--cyan),-2px 0 var(--accent)}}.loading-status{display:flex;align-items:center;justify-content:center;gap:.75rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted);margin-top:1rem}.status-dot{width:6px;height:6px;background:var(--glow);border-radius:50%;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.loading-lines{display:flex;gap:8px;justify-content:center;margin-top:2rem}.h-line{width:30px;height:2px;background:var(--glow);opacity:.3;animation:linePulse 1.5s ease-in-out infinite}@keyframes linePulse{0%,to{opacity:.2;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}.corner-decor{position:absolute;width:60px;height:60px;border:1px solid rgba(99,102,241,.3)}.corner-decor.tl{top:30px;left:30px;border-right:none;border-bottom:none}.corner-decor.tr{top:30px;right:30px;border-left:none;border-bottom:none}.corner-decor.bl{bottom:30px;left:30px;border-right:none;border-top:none}.corner-decor.br{bottom:30px;right:30px;border-left:none;border-top:none}.interface{position:fixed;inset:0;z-index:20;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;animation:interfaceFadeIn 1s ease}@keyframes interfaceFadeIn{0%{opacity:0}to{opacity:1}}.interface-header{display:flex;justify-content:space-between;align-items:flex-start;pointer-events:auto;flex-shrink:0}.logo{display:flex;align-items:center;gap:1rem}.logo-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(99,102,241,.4);background:#6366f11a;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--glow)}.logo-text{display:flex;flex-direction:column;gap:.2rem}.logo-main{font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:.2em}.logo-sub{font-size:.6rem;letter-spacing:.15em;color:var(--muted)}.nav-links{display:flex;gap:2rem}.nav-links a{display:flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text);text-decoration:none;opacity:.8;transition:all .3s ease}.nav-links a:hover{color:var(--glow);opacity:1;text-shadow:0 0 20px var(--glow)}.nav-icon{font-size:.5rem;color:var(--glow)}.center-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.tagline{display:flex;align-items:center;gap:1.5rem;font-size:.65rem;letter-spacing:.4em;color:var(--muted);animation:taglinePulse 3s ease-in-out infinite}@keyframes taglinePulse{0%,to{opacity:.4}50%{opacity:.8}}.tagline-line{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--glow),transparent)}.interface-footer{display:flex;justify-content:space-between;align-items:flex-end;pointer-events:auto;flex-shrink:0}.node-nav{display:flex;gap:1rem;flex-wrap:wrap}.node-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:#ffffff05;border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .4s ease;animation:nodeAppear .6s ease both;animation-delay:var(--delay);position:relative;min-width:100px}@keyframes nodeAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.node-btn:hover{background:rgba(var(--node-color),.1);border-color:var(--node-color);transform:translateY(-5px)}.node-btn:hover .node-ring{transform:scale(1.5);opacity:1}.node-ring{position:absolute;top:.75rem;width:20px;height:20px;border:1px solid var(--node-color);border-radius:50%;opacity:.3;transition:all .4s ease}.node-dot{width:10px;height:10px;border-radius:50%;background:var(--node-color);box-shadow:0 0 15px var(--node-color),0 0 30px var(--node-color);transition:all .3s ease}.node-btn:hover .node-dot{box-shadow:0 0 20px var(--node-color),0 0 40px var(--node-color),0 0 60px var(--node-color)}.node-name{font-family:var(--font-display);font-size:.65rem;font-weight:600;letter-spacing:.1em;color:var(--text);margin-top:.25rem}.node-category{font-size:.5rem;letter-spacing:.1em;color:var(--muted);opacity:0;transform:translateY(-5px);transition:all .3s ease}.node-btn:hover .node-category{opacity:1;transform:translateY(0)}.footer-info{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.coords{font-family:var(--mono);font-size:.55rem;color:var(--muted);opacity:.5}.portfolio-link{font-size:.7rem;letter-spacing:.15em;color:var(--glow);text-decoration:none;transition:all .3s ease}.portfolio-link:hover{text-shadow:0 0 20px var(--glow)}.interface-lines{position:fixed;inset:0;pointer-events:none;z-index:1}.v-line{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(99,102,241,.1),transparent)}.v-line.left{left:2rem}.v-line.right{right:2rem}.node-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}.modal-backdrop{position:absolute;inset:0;background:#050508f2;backdrop-filter:blur(20px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{position:relative;max-width:550px;width:90%;padding:3rem;background:#0a0a10cc;border:1px solid rgba(255,255,255,.08);animation:modalSlide .5s ease}@keyframes modalSlide{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-glow{position:absolute;top:0;left:0;right:0;height:2px;opacity:.8}.close-btn{position:absolute;top:1rem;right:1rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--text);background:#6366f11a;border:1px solid rgba(99,102,241,.3);cursor:pointer;transition:all .3s ease}.close-btn:hover{background:var(--glow);border-color:var(--glow);transform:rotate(90deg)}.modal-header{margin-bottom:2rem}.modal-icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1px solid;font-size:1.25rem;margin-bottom:1.5rem}.modal-category{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;display:block;margin-bottom:.75rem}.modal-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:600;letter-spacing:.1em;margin-bottom:1rem}.modal-desc{font-size:1rem;line-height:1.8;color:var(--muted)}.modal-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.1);color:var(--muted);background:#ffffff05}.visit-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1.25rem 1.5rem;font-family:var(--font-display);font-size:.8rem;font-weight:500;letter-spacing:.2em;color:#fff;text-decoration:none;transition:all .3s ease;box-shadow:0 0 30px #6366f14d}.visit-btn:hover{transform:translate(5px);box-shadow:0 0 50px #6366f180}.btn-arrow{font-size:1.25rem;transition:transform .3s ease}.visit-btn:hover .btn-arrow{transform:translate(5px)}.modal-links{display:flex;gap:.75rem;flex-wrap:wrap}.link-btn{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;font-size:.75rem;font-weight:500;letter-spacing:.1em;color:var(--text);text-decoration:none;border:1px solid rgba(255,255,255,.15);transition:all .3s ease}.link-btn:hover{border-color:var(--glow);color:var(--glow);background:#6366f11a}.link-btn.primary{color:#fff;border:none}.link-btn.primary:hover{opacity:.9;transform:scale(1.02)}.btn-icon{font-size:.5rem}@media (max-width: 768px){.interface{padding:1rem;z-index:5}.interface-header,.interface-footer{position:relative;z-index:25}.center-content{z-index:1}.nav-links{display:none}.node-nav{justify-content:center;gap:.5rem}.node-btn{min-width:70px;padding:.6rem}.node-name{font-size:.55rem}.node-dot{width:8px;height:8px}.node-ring{width:16px;height:16px;top:.5rem}.node-category{display:none}.modal-content{padding:2rem}.modal-links{flex-direction:column}.corner-decor{width:30px;height:30px}.corner-decor.tl,.corner-decor.tr,.corner-decor.bl,.corner-decor.br{inset:15px}.footer-info,.tagline,.center-content{display:none}}@media (max-width: 480px){.interface{padding:.75rem}.logo-icon{width:40px;height:40px;font-size:.875rem}.logo-main{font-size:.875rem}.logo-sub{font-size:.5rem}.node-nav{gap:.35rem}.node-btn{min-width:60px;padding:.5rem}.node-name{font-size:.5rem}.node-dot{width:6px;height:6px}.node-ring{width:14px;height:14px}}