*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-0: #06080d;--bg-1: #0c1017;--bg-2: #141a24;--bg-3: #1c2433;--card-bg: rgba(20, 26, 36, .65);--card-border: rgba(255, 255, 255, .06);--card-hover: rgba(99, 164, 255, .25);--text-0: #f0f4f8;--text-1: #c2ccda;--text-2: #7b8ba3;--text-3: #4a5568;--accent: #4f8fff;--accent2: #38bdf8;--accent-glow: rgba(79, 143, 255, .25);--grad: linear-gradient(135deg, #4f8fff 0%, #38bdf8 100%);--green: #34d399;--amber: #fbbf24;--rose: #f87171;--purple: #a78bfa;--font: "Inter", -apple-system, sans-serif;--font-h: "Space Grotesk", "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius: 16px;--radius-s: 10px;--ease: .3s cubic-bezier(.4, 0, .2, 1)}.light-mode{--bg-0: #f2f5f9;--bg-1: #e8ecf2;--bg-2: #dde3ec;--bg-3: #cfd7e3;--card-bg: rgba(255, 255, 255, .7);--card-border: rgba(0, 0, 0, .06);--card-hover: rgba(79, 143, 255, .35);--text-0: #0f172a;--text-1: #334155;--text-2: #64748b;--text-3: #94a3b8;--accent: #2563eb;--accent2: #0891b2;--accent-glow: rgba(37, 99, 235, .15);--grad: linear-gradient(135deg, #2563eb 0%, #0891b2 100%)}html{scroll-behavior:smooth;overflow-x:hidden}body{font-family:var(--font);background:var(--bg-0);color:var(--text-0);line-height:1.6;transition:background .5s,color .5s;overflow-x:hidden}a{text-decoration:none;color:inherit}button{cursor:pointer;border:none;background:none;font-family:inherit}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.glass{background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius);transition:border-color var(--ease),box-shadow var(--ease)}.glass:hover{border-color:var(--card-hover);box-shadow:0 8px 40px var(--accent-glow)}.accent,.dot{color:var(--accent)}header{position:fixed;top:0;left:0;width:100%;padding:.8rem 5%;display:flex;justify-content:space-between;align-items:center;z-index:1000;transition:all var(--ease)}header.scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}.light-mode header.scrolled{background:#f2f5f9e0}.logo{font-family:var(--font-h);font-size:1.5rem;font-weight:700;color:var(--text-0)}.navbar{display:flex;gap:1.8rem}.navbar a{font-size:.85rem;font-weight:500;color:var(--text-2);position:relative;padding:.4rem 0;transition:color var(--ease)}.navbar a:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--grad);border-radius:2px;transition:width var(--ease)}.navbar a:hover,.navbar a.active{color:var(--text-0)}.navbar a:hover:after,.navbar a.active:after{width:100%}.header-right{display:flex;align-items:center;gap:.5rem}.theme-btn,.menu-btn{width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.1rem;color:var(--text-2);transition:all var(--ease)}.theme-btn:hover,.menu-btn:hover{color:var(--accent);background:var(--bg-2)}.menu-btn{display:none}.btn-primary{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.4rem;background:var(--grad);color:#fff;border-radius:50px;font-size:.82rem;font-weight:600;transition:all var(--ease);box-shadow:0 4px 20px var(--accent-glow);cursor:pointer;border:none;font-family:var(--font)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}.btn-ghost{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.4rem;border:1.5px solid var(--card-border);color:var(--text-1);border-radius:50px;font-size:.82rem;font-weight:600;transition:all var(--ease)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.hero-intro{height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-intro-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(79,143,255,.08) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 30% 70%,rgba(167,139,250,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 70% 30%,rgba(52,211,153,.05) 0%,transparent 70%);z-index:0;animation:heroBgPulse 8s ease-in-out infinite alternate}@keyframes heroBgPulse{0%{opacity:.6}to{opacity:1}}.hero-intro-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:540px;padding:0 1.5rem}.hero-photo-wrap{width:140px;height:140px;border-radius:50%;margin-bottom:1.5rem;position:relative;padding:3px;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;animation:photoGlow 4s ease-in-out infinite alternate}.hero-photo-wrap:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:conic-gradient(from 0deg,#00d4ff,#7c3aed,#f472b6,#fb923c,#22d3ee,#818cf8,#00d4ff);z-index:-1;animation:ringRotate 6s linear infinite;opacity:.7;transition:opacity .3s ease}.hero-photo-wrap:hover:before{animation:ringRotate 1.2s linear infinite;opacity:1}.hero-photo-wrap:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;transform:scale(.95);transition:all .3s ease;pointer-events:none}.hero-photo-wrap:hover:after{animation:ringPulseOut 1.5s ease-out infinite}@keyframes ringRotate{to{transform:rotate(360deg)}}@keyframes ringPulseOut{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}.hero-photo-wrap:hover{transform:translateY(-6px) scale(1.08);box-shadow:0 0 40px #4f8fff80,0 0 80px #a78bfa4d,0 20px 40px #0000004d}@keyframes photoGlow{0%{box-shadow:0 0 20px #4f8fff4d,0 0 60px #4f8fff1a}to{box-shadow:0 0 30px #a78bfa66,0 0 80px #a78bfa26}}.hero-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--bg-0);position:relative;z-index:1;transition:filter .4s ease}.photo-shimmer{position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:linear-gradient(105deg,transparent 40%,rgba(79,143,255,.2) 45%,rgba(167,139,250,.3) 50%,rgba(52,211,153,.2) 55%,transparent 60%);opacity:0;transform:translate(-100%);transition:opacity .3s ease;pointer-events:none;z-index:2}.hero-photo-wrap:hover .photo-shimmer{opacity:1;animation:shimmerSweep 1.5s ease-in-out infinite}@keyframes shimmerSweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}.greeting-text{font-size:.85rem;color:var(--accent);font-weight:500;letter-spacing:.05em;margin-bottom:.3rem}.hero-name{font-family:var(--font-h);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:.5rem}.hero-role{font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--text-2);font-weight:400;margin-bottom:.8rem;min-height:1.5rem}.role-static{color:var(--text-1)}.typed-text{color:var(--accent2);font-weight:600}.type-cursor{color:var(--accent);animation:cursorBlink .8s infinite;font-weight:300}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:0}}.hero-tagline{font-size:.88rem;color:var(--text-2);line-height:1.6;margin-bottom:1.4rem;max-width:420px}.hero-actions{display:flex;gap:.7rem;margin-bottom:1.2rem;flex-wrap:wrap;justify-content:center}.hero-socials{display:flex;gap:.7rem}.hero-socials a{width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--card-border);color:var(--text-2);font-size:1.05rem;transition:all var(--ease)}.hero-socials a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}.scroll-indicator{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:.5;transition:opacity .3s;cursor:pointer}.scroll-indicator:hover{opacity:.9}.scroll-mouse{width:18px;height:28px;border:2px solid var(--text-3);border-radius:10px;display:flex;justify-content:center;padding-top:5px}.scroll-dot{width:3px;height:6px;background:var(--accent);border-radius:3px;animation:scrollBounce 1.5s ease-in-out infinite}@keyframes scrollBounce{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(7px)}}.scroll-indicator span{font-size:.6rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em}.hero-graph{height:100vh;position:relative;overflow:hidden;background:var(--bg-0)}#graph-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1}.node-detail{position:fixed;z-index:100;background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius);padding:1rem 1.2rem;max-width:280px;opacity:0;pointer-events:none;transition:opacity .2s ease;box-shadow:0 12px 40px #0006}.node-detail.visible{opacity:1}.nd-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.nd-badge{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.15rem .5rem;border-radius:50px}.nd-category{font-size:.68rem;color:var(--text-3)}.nd-title{font-family:var(--font-h);font-size:.95rem;font-weight:600;margin-bottom:.3rem}.nd-desc{font-size:.75rem;color:var(--text-2);line-height:1.45;margin-bottom:.4rem}.nd-tags{display:flex;flex-wrap:wrap;gap:.25rem}.nd-tags span{font-size:.6rem;font-weight:500;padding:.1rem .4rem;border-radius:50px;background:#4f8fff1a;color:var(--accent);border:1px solid rgba(79,143,255,.15)}.graph-hint{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:.5rem;opacity:.7;transition:opacity .5s ease;pointer-events:none}.graph-hint.hidden{opacity:0}.hint-pulse{width:10px;height:10px;border-radius:50%;background:var(--accent);position:relative}.hint-pulse:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:2px solid var(--accent);animation:hintPulse 1.5s ease-out infinite}@keyframes hintPulse{0%{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}.graph-hint span{font-size:.72rem;color:var(--text-2);letter-spacing:.04em;font-weight:500}.section{padding:5rem 5%;position:relative;z-index:1}.section-alt{background:var(--bg-1)}.section-title{font-family:var(--font-h);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:700;text-align:center;margin-bottom:.4rem}.section-subtitle{text-align:center;color:var(--text-2);font-size:.92rem;margin-bottom:3rem}.projects-list{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.project-card{display:flex;flex-direction:column;padding:1rem;transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease)}.project-card:hover{border-color:var(--card-hover);box-shadow:0 8px 40px var(--accent-glow);transform:translateY(-3px)}.pc-image{position:relative;width:100%;overflow:hidden;margin:0 0 1rem;flex-shrink:0;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:#0d1117}.pc-browser{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;background:#00000059;border-bottom:1px solid rgba(255,255,255,.04)}.pc-dots{display:flex;gap:5px;flex-shrink:0}.pc-dots i{width:7px;height:7px;border-radius:50%;display:block}.pc-dots i:nth-child(1){background:#ff5f57}.pc-dots i:nth-child(2){background:#febc2e}.pc-dots i:nth-child(3){background:#28c840}.pc-url{font-size:.6rem;font-family:var(--font-mono);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7}.pc-screen{position:relative;width:100%;height:180px;overflow:hidden}.pc-screen img{width:100%;height:auto;min-height:100%;display:block;transition:transform 3s cubic-bezier(.25,.46,.45,.94)}.project-card:hover .pc-screen img{transform:translateY(calc(-100% + 180px))}.pc-screen:after{content:"";position:absolute;bottom:0;left:0;right:0;height:35px;background:linear-gradient(to top,#0d1117,transparent);pointer-events:none;opacity:.7;transition:opacity var(--ease)}.project-card:hover .pc-screen:after{opacity:0}.pc-embed .pc-screen{height:180px}.pc-iframe{width:100%;height:100%;border:none;pointer-events:none;display:block}.project-card:hover .pc-iframe{pointer-events:auto}.light-mode .pc-image{background:#e5e7eb;border-color:#00000014}.light-mode .pc-browser{background:#0000000f;border-bottom-color:#0000000f}.light-mode .pc-screen:after{background:linear-gradient(to top,#e5e7eb,transparent)}.pc-body{display:flex;flex-direction:column;flex:1;padding:0 .25rem}.pc-top{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:.6rem}.pc-status{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.18rem .55rem;border-radius:50px}.status-live{color:var(--green);background:#34d3991f}.status-building{color:var(--amber);background:#fbbf241f}.status-research{color:var(--purple);background:#a78bfa1f}.pc-gh,.pc-link{font-size:1.05rem;color:var(--text-2);transition:color var(--ease)}.pc-gh:hover,.pc-link:hover{color:var(--accent)}.pc-links{display:flex;gap:.5rem;align-items:center;margin-left:auto}.pc-closed{font-size:.58rem;font-weight:500;color:var(--text-3);display:inline-flex;align-items:center;gap:.2rem;background:#94a3b81a;padding:.18rem .5rem;border-radius:50px}.project-card h3{font-family:var(--font-h);font-size:1.05rem;font-weight:600;margin-bottom:.35rem;line-height:1.35}.project-card .pc-short{font-size:.78rem;font-weight:500;color:var(--text-1);line-height:1.5;margin-bottom:.4rem}.project-card p{font-size:.78rem;color:var(--text-2);line-height:1.65;margin-bottom:.8rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pc-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto;padding-top:.5rem}.pc-tags span{font-size:.65rem;font-weight:500;padding:.15rem .5rem;border-radius:50px;background:#4f8fff14;color:var(--accent);border:1px solid rgba(79,143,255,.12);transition:background var(--ease)}.pc-tags span:hover{background:#4f8fff2e}.journey-layout{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:start}.timeline{position:relative;padding-left:1.8rem}.timeline:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);opacity:.2}.tl-item{position:relative;padding-bottom:1.8rem}.tl-item:last-child{padding-bottom:0}.tl-dot{position:absolute;left:-1.8rem;top:1rem;width:12px;height:12px;border-radius:50%;background:var(--grad);transform:translate(-5px);box-shadow:0 0 0 4px var(--bg-1),0 0 12px var(--accent-glow)}.tl-card{padding:1.2rem}.tl-type{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.12rem .45rem;border-radius:50px;display:inline-block;margin-bottom:.4rem}.type-edu{color:var(--accent);background:#4f8fff1a}.type-work{color:var(--accent2);background:#38bdf81a}.tl-date{font-size:.68rem;color:var(--text-3);display:block;margin-bottom:.2rem}.tl-card h3{font-family:var(--font-h);font-size:1rem;font-weight:600;margin-bottom:.1rem}.tl-card h4{font-size:.82rem;color:var(--accent);font-weight:500;margin-bottom:.4rem}.tl-card p{font-size:.78rem;color:var(--text-2);line-height:1.5}.certs-heading{font-family:var(--font-h);font-size:1.05rem;font-weight:600;margin-bottom:1rem;color:var(--text-1)}.certs-col{display:flex;flex-direction:column;gap:.7rem}.cert-item{display:flex;align-items:center;gap:.7rem;padding:.9rem}.cert-item i{font-size:1.3rem;color:var(--accent);flex-shrink:0;width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;background:#4f8fff1a;border-radius:var(--radius-s)}.cert-item strong{display:block;font-size:.82rem;font-weight:600}.cert-item span{font-size:.7rem;color:var(--text-3)}.contact-layout{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;align-items:start}.contact-info{display:flex;flex-direction:column;gap:.8rem}.ci-card{display:flex;align-items:center;gap:.7rem;padding:1rem}.ci-card i{font-size:1.2rem;color:var(--accent);width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;background:#4f8fff1a;border-radius:var(--radius-s);flex-shrink:0}.ci-card strong{font-size:.82rem;display:block}.ci-card p{font-size:.78rem;color:var(--text-2);margin:0}.contact-form{padding:1.8rem;display:flex;flex-direction:column;gap:.8rem}.contact-form input,.contact-form textarea{width:100%;padding:.8rem 1rem;background:var(--bg-2);border:1px solid var(--card-border);border-radius:var(--radius-s);color:var(--text-0);font-family:var(--font);font-size:.85rem;transition:border-color var(--ease),box-shadow var(--ease);resize:none}.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-3)}.contact-form .btn-primary{align-self:flex-start}.footer{padding:2rem 5%;border-top:1px solid var(--card-border);position:relative;z-index:1}.footer-inner{max-width:900px;margin:0 auto;text-align:center}.footer-inner .logo{display:inline-block;margin-bottom:.3rem}.footer-inner>p{font-size:.78rem;color:var(--text-3);margin-bottom:.8rem}.footer-socials{display:flex;justify-content:center;gap:.6rem;margin-bottom:.8rem}.footer-socials a{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--card-border);color:var(--text-2);font-size:.95rem;transition:all var(--ease)}.footer-socials a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}.copyright{font-size:.68rem;color:var(--text-3)}.btt{position:fixed;bottom:1.5rem;right:1.5rem;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--grad);color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--accent-glow);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--ease);z-index:999}.btt.show{opacity:1;visibility:visible;transform:translateY(0)}.btt:hover{transform:translateY(-3px)}#toast-container{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);z-index:10000;display:flex;flex-direction:column;gap:.5rem;align-items:center}.toast{padding:.8rem 1.5rem;border-radius:var(--radius-s);color:#fff;font-weight:500;font-size:.85rem;display:flex;align-items:center;gap:.5rem;animation:toastIn .4s ease forwards;box-shadow:0 8px 30px #0006}.toast.success{background:#10b981}.toast.error{background:#ef4444}.toast.out{animation:toastOut .3s ease forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translateY(20px)}}.reveal{opacity:0;transform:translateY(25px);transition:opacity .6s ease,transform .6s ease}.reveal.shown{opacity:1;transform:translateY(0)}.nav-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:998;opacity:0;visibility:hidden;transition:all var(--ease)}.nav-overlay.active{opacity:1;visibility:visible}@media (max-width:768px){.menu-btn{display:flex}.navbar{position:fixed;top:0;right:-280px;width:280px;height:100vh;background:var(--bg-1);flex-direction:column;align-items:center;justify-content:center;gap:2rem;transition:right var(--ease);box-shadow:-5px 0 30px #0000004d;z-index:999}.navbar.open{right:0}.navbar a{font-size:1.05rem}.hero-photo-wrap{width:110px;height:110px;margin-bottom:1rem}.hero-name{font-size:1.8rem}.hero-tagline{font-size:.78rem;max-width:320px}.hero-graph{height:100vh}.journey-layout,.contact-layout{grid-template-columns:1fr}.projects-list{grid-template-columns:1fr;max-width:500px}.pc-screen{height:200px}.project-card:hover .pc-screen img{transform:translateY(calc(-100% + 200px))}}@media (max-width:480px){.hero-photo-wrap{width:90px;height:90px}.hero-name{font-size:1.4rem}.hero-tagline{font-size:.7rem}.greeting-text{font-size:.75rem}.section{padding:3.5rem 4%}.pc-screen{height:160px}.project-card:hover .pc-screen img{transform:translateY(calc(-100% + 160px))}.project-card{padding:.75rem}.project-card h3{font-size:.95rem}}.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}.skeleton{background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%);background-size:200% 100%;animation:skel-shimmer 1.5s infinite;border-radius:var(--radius-s)}.skeleton-card{height:320px;border-radius:var(--radius)}@keyframes skel-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scroll-dot,.hint-pulse:before{animation:none}}