:root{--font-display:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"Share Tech Mono", Courier, monospace;--bg-dark:#080810;--bg-gradient:radial-gradient(circle at center, #121324 0%, #06060c 100%);--text-primary:#e2e8f0;--text-secondary:#94a3b8;--accent-cyan:#03dac6;--accent-purple:#bb86fc;--accent-purple-glow:#bb86fc66;--accent-cyan-glow:#03dac666;--glass-bg:#0f172aa6;--glass-border:#bb86fc26;--glass-shadow:#0009 0 20px 40px -10px;--card-bg:#ffffff05;--card-border:#ffffff08;--panel-header-border:#ffffff0d;--navbar-bg:linear-gradient(to bottom, #080810cc 0%, #08081000 100%);--footer-bg:linear-gradient(to top, #080810b3 0%, #08081000 100%);--transition-smooth:all .5s cubic-bezier(.16, 1, .3, 1)}body.light-theme{--bg-dark:#e2e8f0;--bg-gradient:radial-gradient(circle at center, #fff 0%, #cbd5e1 100%);--text-primary:#0f172a;--text-secondary:#475569;--accent-cyan:#0ea5e9;--accent-purple:#7c3aed;--accent-purple-glow:#7c3aed33;--accent-cyan-glow:#0ea5e933;--glass-bg:#ffffffbf;--glass-border:#7c3aed26;--glass-shadow:#0f172a14 0 20px 40px -10px, #0f172a0a 0 10px 10px -5px;--card-bg:#0f172a08;--card-border:#0f172a0d;--panel-header-border:#0f172a14;--navbar-bg:linear-gradient(to bottom, #e2e8f0cc 0%, #e2e8f000 100%);--footer-bg:linear-gradient(to top, #e2e8f0b3 0%, #e2e8f000 100%)}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background:var(--bg-dark);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-display);-webkit-font-smoothing:antialiased;transition:background .8s,color .8s;overflow:hidden}#canvas-container{z-index:1;background:var(--bg-gradient);width:100%;height:100%;transition:background .8s;position:absolute;top:0;left:0}#loader{z-index:999;background:radial-gradient(circle,#0b0b16 0%,#050509 70%);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s ease-in-out;display:flex;position:fixed;top:0;left:0;overflow:hidden}#loader:after{content:"";pointer-events:none;opacity:.6;background:repeating-linear-gradient(#03dac60a 0 1px,#0000 1px 3px);position:absolute;inset:0}.loader-content{text-align:center;z-index:1;width:90%;max-width:420px;padding:20px;position:relative}.loader-title{font-family:var(--font-mono);letter-spacing:4px;color:var(--accent-cyan);text-shadow:0 0 12px var(--accent-cyan-glow), 0 0 24px var(--accent-cyan-glow);margin-bottom:22px;font-size:1.5rem;animation:3.5s step-end infinite loaderFlicker}@keyframes loaderFlicker{0%,92%,to{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}.loader-bar-container{background:#ffffff0d;border-radius:2px;width:100%;height:4px;margin-bottom:15px;overflow:hidden;box-shadow:inset 0 1px 2px #00000080}.loader-bar{background:linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));width:0%;height:100%;box-shadow:0 0 8px var(--accent-cyan-glow), 0 0 16px var(--accent-purple-glow);transition:width .1s ease-out}.loader-meta{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.loader-status{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:1px;font-size:.75rem}.loader-percent{font-family:var(--font-mono);color:var(--accent-cyan);letter-spacing:1px;font-variant-numeric:tabular-nums;text-shadow:0 0 8px var(--accent-cyan-glow);font-size:.75rem}#ui-overlay{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}#ui-overlay .navbar,#ui-overlay .nav-btn,#ui-overlay .overlay-panel,#ui-overlay .zoom-out-hint,#ui-overlay .utility-bar,#ui-overlay .utility-btn{pointer-events:auto}.overlay-panel.hidden,.zoom-out-hint.hidden{pointer-events:none!important}.navbar{background:var(--navbar-bg);width:100%;transition:var(--transition-smooth);justify-content:space-between;align-items:center;padding:24px 40px;display:flex}.logo-container{align-items:center;gap:10px;display:flex}.logo-dot{background-color:var(--accent-cyan);width:8px;height:8px;box-shadow:0 0 8px var(--accent-cyan);transition:var(--transition-smooth);border-radius:50%}.logo-text{font-family:var(--font-mono);letter-spacing:2px;background:linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));-webkit-text-fill-color:transparent;transition:var(--transition-smooth);-webkit-background-clip:text;background-clip:text;font-size:1.1rem;font-weight:700}.logo-dot{animation:2.4s infinite pulse}.nav-links{gap:12px;display:flex}.nav-btn{color:var(--text-secondary);font-family:var(--font-display);cursor:pointer;transition:var(--transition-smooth);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172a66;border:1px solid #ffffff0d;border-radius:30px;align-items:center;gap:8px;padding:8px 18px;font-size:.9rem;font-weight:500;display:flex}body.light-theme .nav-btn{background:#fff6;border-color:#0f172a0d}.nav-btn:hover{color:var(--text-primary);border-color:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan-glow);transform:translateY(-2px)}.nav-btn.active{color:var(--accent-purple);border-color:var(--accent-purple);box-shadow:0 0 12px var(--accent-purple-glow);background:#bb86fc14}body.light-theme .nav-btn.active{background:#7c3aed14}.btn-icon{transition:transform .3s}.nav-btn:hover .btn-icon{transform:rotate(5deg)scale(1.1)}.overlay-panel{background:var(--glass-bg);border:1px solid var(--glass-border);width:420px;max-height:80vh;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:50;border-radius:16px;flex-direction:column;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s,background .8s,border-color .8s,box-shadow .8s;display:flex;position:absolute;top:50%;right:6%;overflow:hidden;transform:translateY(-50%)}.overlay-panel.hidden{opacity:0;pointer-events:none;transform:translateY(-50%)translate(100px)}.close-panel-btn{color:var(--text-secondary);cursor:pointer;z-index:10;width:40px;height:40px;transition:var(--transition-smooth);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:8px;right:8px}.close-panel-btn:hover{color:var(--accent-cyan);background:#7878781a}.panel-header{border-bottom:1px solid var(--panel-header-border);transition:var(--transition-smooth);align-items:center;gap:12px;padding:16px 20px;display:flex;position:relative}.panel-header:after{content:"";background:linear-gradient(90deg, transparent, var(--accent-cyan-glow), transparent);height:1px;position:absolute;bottom:-1px;left:20px;right:20px}.terminal-dots{gap:6px;display:flex}.terminal-dots .dot{background:#78787833;border-radius:50%;width:10px;height:10px}.terminal-dots .dot.red{background:#ff5f56}.terminal-dots .dot.yellow{background:#ffbd2e}.terminal-dots .dot.green{background:#27c93f}.panel-title{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:1px;transition:var(--transition-smooth);font-size:.8rem}.panel-body{-webkit-overflow-scrolling:touch;flex-grow:1;padding:24px;overflow-y:auto}@media (width>=769px){.panel-body::-webkit-scrollbar{width:6px}.panel-body::-webkit-scrollbar-track{background:0 0}.panel-body::-webkit-scrollbar-thumb{background:#78787833;border-radius:3px}.panel-body::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan-glow)}}.project-list{flex-direction:column;gap:16px;display:flex}.project-card{background:var(--card-bg);border:1px solid var(--card-border);transition:var(--transition-smooth);border-radius:12px;padding:16px;position:relative;overflow:hidden}.project-card:before{content:"";background:linear-gradient(to bottom, var(--accent-cyan), var(--accent-purple));transform-origin:top;width:3px;height:100%;transition:transform .4s cubic-bezier(.16,1,.3,1);position:absolute;top:0;left:0;transform:scaleY(0)}.project-card:hover{border-color:var(--accent-cyan);box-shadow:0 8px 24px -12px var(--accent-cyan-glow);background:#7878780d;transform:translateY(-2px)}.project-card:hover:before{transform:scaleY(1)}.project-tags{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.tag{font-family:var(--font-mono);border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:700}.tag-webgl{color:var(--accent-cyan);background:#03dac61a}.tag-vanilla{color:var(--accent-purple);background:#bb86fc1a}.tag-react{color:#60a5fa;background:#3b82f61a}.tag-gsap{color:#fbbf24;background:#f59e0b1a}.tag-node{color:#34d399;background:#10b9811a}.tag-websockets{color:#f472b6;background:#ec48991a}.tag-db{color:#60a5fa;background:#3b82f61a}.tag-k8s{color:#34d399;background:#10b9811a}body.light-theme .tag-webgl{color:var(--accent-cyan);background:#0ea5e91a}body.light-theme .tag-vanilla{color:var(--accent-purple);background:#7c3aed1a}.project-title{margin-bottom:6px;font-size:1.1rem;font-weight:600;transition:color .4s}.project-card:hover .project-title{color:var(--accent-cyan)}.project-desc{color:var(--text-secondary);transition:var(--transition-smooth);margin-bottom:10px;font-size:.85rem;line-height:1.4}.project-details{margin-bottom:14px;padding-left:18px;list-style-type:square}.project-details li{color:var(--text-secondary);margin-bottom:6px;font-size:.8rem;line-height:1.45}.project-links{display:flex}.project-link{color:var(--accent-cyan);transition:var(--transition-smooth);align-items:center;gap:4px;font-size:.8rem;font-weight:500;text-decoration:none;display:flex}.project-link:hover{text-decoration:underline}.about-content{flex-direction:column;gap:16px;display:flex}.about-heading{background:linear-gradient(135deg, var(--text-primary) 30%, var(--accent-cyan) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.8rem;font-weight:700}.about-subheading{color:var(--accent-purple);font-size:.95rem;font-family:var(--font-mono);letter-spacing:1px;transition:var(--transition-smooth)}.about-text{color:var(--text-secondary);transition:var(--transition-smooth);font-size:.9rem;line-height:1.6}.skills-section{margin-top:10px}.skills-title{font-family:var(--font-mono);color:var(--text-primary);letter-spacing:1px;transition:var(--transition-smooth);margin-bottom:12px;font-size:.85rem}.skills-grid{flex-wrap:wrap;gap:8px;display:flex}.skill-badge{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-secondary);transition:var(--transition-smooth);border-radius:8px;padding:6px 12px;font-size:.8rem}.skill-badge:hover{border-color:var(--accent-purple);color:var(--text-primary);background:#7878780d}.interaction-hints{background:var(--footer-bg);width:100%;transition:var(--transition-smooth);justify-content:center;padding:30px;display:flex}.hint-text{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172a66;border:1px solid #ffffff08;border-radius:20px;align-items:center;gap:8px;padding:6px 16px;display:flex}body.light-theme .hint-text{background:#ffffff80;border-color:#0f172a0d}.hint-pulse{background:var(--accent-purple);width:6px;height:6px;box-shadow:0 0 6px var(--accent-purple);transition:var(--transition-smooth);border-radius:50%;animation:1.8s infinite pulse}.hint-label{color:var(--text-secondary);font-size:.75rem;font-family:var(--font-mono);letter-spacing:.5px;transition:var(--transition-smooth)}@keyframes pulse{0%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}to{opacity:.4;transform:scale(.9)}}.utility-bar{z-index:100;flex-direction:column;gap:10px;display:flex;position:absolute;bottom:24px;left:24px}.utility-btn{width:42px;height:42px;color:var(--text-secondary);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition-smooth);background:#0f172a99;border:1px solid #ffffff0d;border-radius:50%;justify-content:center;align-items:center;display:flex}body.light-theme .utility-btn{background:#ffffffbf;border-color:#0f172a0d}.utility-btn:hover{color:var(--accent-purple);border-color:var(--accent-purple);box-shadow:0 0 10px var(--accent-purple-glow);transform:scale(1.05)}.utility-btn svg{stroke-width:2px;width:18px;height:18px}.hidden{display:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.hero-intro{z-index:40;pointer-events:none;opacity:0;visibility:hidden;justify-content:center;align-items:center;transition:opacity 1.1s,visibility 1.1s;display:flex;position:fixed;inset:0}.hero-intro.show{opacity:1;visibility:visible}.hero-intro:before{content:"";pointer-events:none;background:radial-gradient(60% 45%,#04040c8c 0%,#04040c00 70%);position:absolute;inset:0}.hero-inner{text-align:center;padding:20px;transition:transform 1.2s cubic-bezier(.16,1,.3,1);position:relative;transform:translateY(14px)}.hero-intro.show .hero-inner{transform:translateY(0)}.hero-eyebrow{font-family:var(--font-mono);letter-spacing:5px;color:var(--accent-cyan);text-shadow:0 0 12px var(--accent-cyan-glow);margin-bottom:18px;font-size:.8rem;display:block}.hero-name{font-family:var(--font-display);letter-spacing:2px;background:linear-gradient(120deg, #fff 20%, var(--accent-cyan) 55%, var(--accent-purple) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 30px #03dac640);-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:clamp(2.4rem,8vw,5.5rem);font-weight:700;line-height:1}body.light-theme .hero-name{background:linear-gradient(120deg, #0f172a 20%, var(--accent-cyan) 60%, var(--accent-purple) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-role{font-family:var(--font-mono);letter-spacing:2px;color:var(--text-primary);margin-bottom:40px;font-size:clamp(.85rem,2vw,1.15rem)}.hero-cue{font-family:var(--font-mono);letter-spacing:1px;color:var(--text-secondary);border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:30px;align-items:center;gap:10px;padding:8px 18px;font-size:.8rem;display:inline-flex}.hero-cue-dot{background:var(--accent-cyan);width:7px;height:7px;box-shadow:0 0 10px var(--accent-cyan);border-radius:50%;animation:1.6s infinite pulse}.hotspots{z-index:15;pointer-events:none;opacity:0;transition:opacity .6s;position:fixed;inset:0}.hotspots.active{opacity:1}.hotspot{cursor:pointer;will-change:transform, opacity;background:0 0;border:none;align-items:center;gap:10px;padding:0;transition:opacity .35s;display:flex;position:absolute;top:0;left:0}.hotspot-ring{flex-shrink:0;width:26px;height:26px;position:relative}.hotspot-ring:before,.hotspot-ring:after{content:"";border:1.5px solid var(--accent-cyan);border-radius:50%;position:absolute;inset:0}.hotspot-ring:before{background:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan), 0 0 20px var(--accent-cyan-glow);border:none;inset:9px}.hotspot-ring:after{animation:2.4s ease-out infinite hotspotPulse}@keyframes hotspotPulse{0%{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.6)}}.hotspot-label{font-family:var(--font-mono);letter-spacing:1px;white-space:nowrap;color:var(--text-primary);background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:.92;transition:var(--transition-smooth);border-radius:20px;padding:5px 12px;font-size:.72rem;transform:translate(-4px);box-shadow:0 4px 14px -6px #00000080}.hotspot:hover .hotspot-label{opacity:1;border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:0 0 16px var(--accent-cyan-glow);transform:translate(0)}.hotspot:hover .hotspot-ring:before{transform:scale(1.25)}.hotspot.compact .hotspot-label{opacity:0;pointer-events:none;transform:translate(-10px)}.hotspot.compact:hover .hotspot-label{opacity:1;transform:translate(0)}@media (width<=768px){.hotspot-label{padding:4px 10px;font-size:.66rem}.hotspot-ring{width:22px;height:22px}}.zoom-out-hint{z-index:100;pointer-events:auto;flex-direction:column;align-items:center;gap:8px;animation:.4s ease-out fadeIn;display:flex;position:absolute;bottom:100px;left:50%;transform:translate(-50%)}.zoom-out-btn{background:var(--glass-bg);border:1px solid var(--accent-cyan);color:var(--text-primary);font-family:var(--font-display);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:var(--transition-smooth);border-radius:30px;align-items:center;gap:8px;padding:10px 24px;font-size:.95rem;font-weight:600;display:flex;box-shadow:0 4px 15px #03dac61a}.zoom-out-btn:hover{box-shadow:0 6px 20px var(--accent-cyan-glow);border-color:var(--accent-cyan);background:#7878780d;transform:translateY(-2px)scale(1.02)}.zoom-out-text{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:.5px;text-shadow:0 1px 2px #00000080;font-size:.75rem}body.light-theme .zoom-out-text{text-shadow:none}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.education-section{flex-direction:column;gap:10px;margin-top:18px;display:flex}.education-item{background:var(--card-bg);border:1px solid var(--card-border);transition:var(--transition-smooth);border-radius:8px;padding:10px 14px}.education-item:hover{border-color:var(--accent-purple);background:#7878780d}.edu-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.edu-degree{color:var(--text-primary);font-size:.85rem;font-weight:600}.edu-date{font-family:var(--font-mono);color:var(--accent-purple);font-size:.75rem;font-weight:700}.edu-inst{color:var(--text-secondary);transition:var(--transition-smooth);font-size:.8rem}@media (width<=768px){.navbar{padding:16px 20px}.logo-text{font-size:.95rem}.nav-btn{padding:6px 12px;font-size:.8rem}.overlay-panel{border-bottom:none;border-left:none;border-right:none;border-radius:24px 24px 0 0;width:auto;height:75vh;inset:auto 0 0;transform:translateY(0)}.overlay-panel.hidden{opacity:0;transform:translateY(100%)!important}.overlay-panel:before{content:"";background:#7878784d;border-radius:2px;flex-shrink:0;width:40px;height:4px;margin:8px auto 0;display:block}.panel-header{padding:8px 16px 12px}.panel-body{padding:16px}.project-card{padding:12px}.project-desc{font-size:.8rem}.project-details li{margin-bottom:4px;font-size:.75rem}.about-heading{font-size:1.4rem}.about-text{font-size:.85rem;line-height:1.5}.skill-badge{padding:4px 8px;font-size:.75rem}.utility-bar{flex-direction:row;gap:8px;top:80px;bottom:auto;left:20px}.utility-btn{width:36px;height:36px}.utility-btn svg{width:16px;height:16px}.interaction-hints{display:none}.zoom-out-hint{display:none!important}.close-panel-btn{top:10px;right:12px}}@media (width<=576px){.logo-text{font-size:.85rem}.logo-dot{width:6px;height:6px}.nav-links{gap:8px}.nav-btn{border-radius:50%;justify-content:center;gap:0;width:36px;height:36px;padding:8px}.nav-btn-text{display:none}.navbar{padding:12px 16px}.utility-bar{top:72px;left:16px}}