: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:#06060b;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s ease-in-out;display:flex;position:fixed;top:0;left:0}.loader-content{text-align:center;width:90%;max-width:400px;padding:20px}.loader-title{font-family:var(--font-mono);letter-spacing:4px;color:var(--accent-cyan);text-shadow:0 0 10px var(--accent-cyan-glow);margin-bottom:20px;font-size:1.5rem}.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);transition:width .1s ease-out}.loader-status{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:1px;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;color:var(--text-primary);transition:var(--transition-smooth);font-size:1.1rem;font-weight:700}.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;background:0 0;border:none;transition:color .2s;position:absolute;top:15px;right:15px}.close-panel-btn:hover{color:var(--accent-cyan)}.panel-header{border-bottom:1px solid var(--panel-header-border);transition:var(--transition-smooth);align-items:center;gap:12px;padding:16px 20px;display:flex}.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{flex-grow:1;padding:24px;overflow-y:auto}.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}.project-card:hover{border-color:var(--accent-cyan);background:#7878780d;transform:translateY(-2px)}.project-tags{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}.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}.contact-form{flex-direction:column;gap:16px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:1px;transition:var(--transition-smooth);font-size:.75rem}.form-group input,.form-group textarea{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-primary);font-family:var(--font-display);transition:var(--transition-smooth);border-radius:8px;outline:none;padding:10px 14px;font-size:.9rem}.form-group input:focus,.form-group textarea:focus{border-color:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan-glow);background:#78787805}.submit-btn{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));color:#fff;cursor:pointer;box-shadow:0 4px 15px var(--accent-purple-glow);transition:var(--transition-smooth);border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:.95rem;font-weight:700;display:flex}body.light-theme .submit-btn{color:#fff}.submit-btn:hover{box-shadow:0 6px 20px var(--accent-purple-glow);transform:translateY(-2px)}.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}.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{width:90%;max-height:50vh;inset:auto 5% 20px;transform:none}.overlay-panel.hidden{opacity:0;transform:translateY(100px)}.utility-bar{flex-direction:row;top:90px;bottom:auto;left:20px}.interaction-hints{padding:16px;display:none}.zoom-out-hint{display:none!important}}