:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,PingFang SC,Microsoft YaHei,sans-serif}body{color:#1f2937;background:#f6f8fa;margin:0;line-height:1.6}:root{--bg:#f6f8fa;--surface:#fff;--border:#e5e7eb;--border-strong:#d1d5db;--text:#1f2937;--text2:#6b7280;--accent:#2563eb;--accent-soft:#2563eb14;--green:#16a34a;--orange:#d97706;--k8s:#326ce5}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.topnav{z-index:100;-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#ffffffeb;justify-content:space-between;align-items:center;padding:.6rem 1.2rem;animation:.6s .1s both nav-in;display:flex;position:sticky;top:0}.scroll-progress{background:linear-gradient(90deg, var(--accent), #7c3aed, #0891b2);z-index:1;height:2px;transition:width .1s linear;position:absolute;bottom:-1px;left:0}@keyframes nav-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.topnav .brand{color:var(--text);font-size:.95rem;font-weight:700}.topnav .brand:hover{color:var(--accent);text-decoration:none}.nav-links{align-items:center;gap:.9rem;display:flex}.nav-links a{color:var(--text2);font-size:.82rem;font-weight:500}.nav-links a:hover{color:var(--accent)}.nav-links a.gh{color:var(--accent);border:1px solid var(--border-strong);border-radius:6px;padding:3px 10px}.nav-links a.gh:hover{border-color:var(--accent);background:var(--accent-soft)}@media (width<=600px){.nav-links{gap:.5rem}.nav-links a{font-size:.75rem}}.hero{text-align:center;background:var(--bg2);border-bottom:1px solid var(--border);padding:2.5rem 1rem 2rem;position:relative}.floating-backdrop{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.hero>:not(.floating-backdrop){z-index:1;position:relative}.floating-backdrop .blob{filter:blur(60px);opacity:.55;border-radius:50%;position:absolute}.floating-backdrop .blob-1{background:#2563eb29;width:340px;height:340px;animation:18s ease-in-out infinite blob-drift;top:-80px;left:-60px}.floating-backdrop .blob-2{background:#7c3aed1f;width:300px;height:300px;animation:22s ease-in-out infinite reverse blob-drift;top:40%;right:-90px}.floating-backdrop .blob-3{background:#0891b21f;width:260px;height:260px;animation:26s ease-in-out infinite blob-drift;bottom:-70px;left:32%}@keyframes blob-drift{0%,to{transform:translate(0)scale(1)}33%{transform:translate(30px,-24px)scale(1.08)}66%{transform:translate(-22px,18px)scale(.94)}}.floating-backdrop .shape{opacity:.8;border:2px solid #2563eb38;position:absolute}.floating-backdrop .ring{border-color:#2563eb2e;border-radius:50%}.floating-backdrop .ring-1{width:56px;height:56px;animation:7s ease-in-out infinite float-y;top:18%;left:12%}.floating-backdrop .ring-2{border-color:#7c3aed40;width:26px;height:26px;animation:6s ease-in-out 1s infinite float-y;bottom:26%;right:18%}.floating-backdrop .square{border-radius:6px}.floating-backdrop .square-1{border-color:#0891b240;width:30px;height:30px;animation:8s ease-in-out .5s infinite float-y;top:64%;left:8%}.floating-backdrop .square-2{border-color:#2563eb47;width:18px;height:18px;animation:5.5s ease-in-out 1.6s infinite float-y;top:30%;right:9%}.floating-backdrop .triangle{border:14px solid #0000;border-top:none;border-bottom:24px solid #7c3aed40;width:0;height:0;animation:7.5s ease-in-out .8s infinite float-y;top:12%;right:28%}.floating-backdrop.static .blob,.floating-backdrop.static .shape{animation:none}.banner{border:1px solid var(--border);background:radial-gradient(60% 90% at 20% 15%,#2563eb1f,#0000),radial-gradient(50% 70% at 85% 25%,#326ce51f,#0000),radial-gradient(70% 55% at 50% 110%,#16a34a14,#0000),linear-gradient(135deg,#f1f5f9,#fff 55%,#e8f0fe);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:720px;height:200px;margin:0 auto 1rem;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0f172a0f}.banner-text{color:var(--text);letter-spacing:.02em;flex-wrap:wrap;justify-content:center;gap:1.2rem;font-size:1.4rem;font-weight:700;display:flex}.banner-caption{color:var(--text2);margin:0 0 1.2rem;font-size:.9rem}.hero h1{color:var(--text);margin-bottom:.5rem;font-size:2.4rem;font-weight:700}.hero-name{background:linear-gradient(120deg,#2563eb,#326ce5,#7c3aed,#0891b2,#2563eb) 0 0/300% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;animation:8s ease-in-out infinite gradient-flow;display:inline-block}@keyframes gradient-flow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.hero .h-anim{opacity:0;transition:opacity .7s ease var(--d,0s), transform .7s ease var(--d,0s);transform:translateY(18px)}.hero.ready .h-anim{opacity:1;transform:translateY(0)}.hero .sub{color:var(--text2);margin-bottom:1.5rem;font-size:1.1rem}.badge-row{flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:700px;margin:.8rem auto;display:flex}.badge{color:var(--text);border:1px solid var(--border-strong);background:var(--surface);border-radius:8px;align-items:center;gap:5px;padding:4px 10px;font-size:.75rem;font-weight:600;transition:transform .2s,border-color .2s,box-shadow .2s;display:inline-flex}.badge:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 14px #2563eb1f}.badge svg{width:14px;height:14px}@media (width<=600px){.hero{padding:1.8rem 1rem}.banner{height:130px}.banner-text{gap:.8rem;font-size:1rem}.hero h1{font-size:1.6rem}.badge-row{gap:.3rem}}section{max-width:1100px;margin:0 auto;padding:2.5rem 1.2rem}.section-title{color:var(--text);align-items:center;gap:.5rem;margin-bottom:1.2rem;font-size:1.4rem;font-weight:700;display:flex}@media (width<=600px){section{padding:1.8rem .8rem}}.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .25s;position:relative}.tilt:before{content:"";border-radius:inherit;opacity:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), #2563eb1a, transparent 45%);pointer-events:none;transition:opacity .3s;position:absolute;inset:0}.tilt:hover:before{opacity:1}.skill-group-wrap.tilt{border-radius:12px}.skill-group-wrap.tilt .skill-group{height:100%}.stats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:12px;padding:1.3rem;transition:border-color .2s,box-shadow .2s,transform .2s}.stat-card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:0 2px 8px #0f172a0f}.stat-num{color:var(--text);font-size:2.2rem;font-weight:700}.stat-label{color:var(--text2);margin-top:.2rem;font-size:.85rem}.projects{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;display:grid}.project{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.3rem;transition:border-color .2s,box-shadow .2s,transform .2s}.project:hover{border-color:var(--border-strong);transform:translateY(-4px);box-shadow:0 8px 20px #0f172a14}.project-tag{text-transform:uppercase;letter-spacing:.05em;border-radius:6px;margin-bottom:.5rem;padding:2px 6px;font-size:.7rem;font-weight:600;display:inline-block}.tag-systems{background:var(--accent-soft);color:var(--orange)}.tag-networks{color:var(--green);background:#16a34a1a}.tag-clusters{color:var(--k8s);background:#326ce51a}.tag-provisioning{color:var(--text2);background:#6b72801a}.tag-ai{color:#9333ea;background:#9333ea1a}.project h3{color:var(--text);margin-bottom:.4rem}.project p{color:var(--text2);font-size:.85rem}.project .metrics{color:var(--text2);margin-top:.6rem;font-size:.75rem}.project .metrics strong{color:var(--text)}.project a{font-size:.82rem}.pill{vertical-align:2px;border:1px solid var(--border-strong);border-radius:10px;margin-left:.4rem;padding:2px 8px;font-size:.68rem;font-weight:600;display:inline-block}.pill-flagship{color:var(--accent);background:var(--accent-soft);border-color:#2563eb4d}.pill-thesis{color:var(--green);background:#16a34a14;border-color:#16a34a4d}.pill-open{color:var(--text2)}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.skill-group{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.2rem}.skill-group h4{color:var(--text);margin-bottom:.6rem;font-size:.95rem}.skill-list{list-style:none}.skill-list li{color:var(--text2);justify-content:space-between;align-items:center;padding:.2rem 0;font-size:.82rem;display:flex}.skill-item{align-items:center;display:flex;overflow:hidden}.skill-item .name{color:var(--text2);white-space:nowrap;text-overflow:ellipsis;max-width:150px;font-size:.82rem;overflow:hidden}.skill-bar{background:#eef0f3;border-radius:3px;flex-shrink:0;width:60px;height:5px;margin-left:.5rem;display:inline-block;overflow:hidden}.skill-bar i{background:var(--accent);border-radius:3px;width:0;height:100%;transition:width 1.1s cubic-bezier(.25,.8,.25,1) .2s;display:block}.skill-group.in-view .skill-bar i{width:var(--level,0%)}.principles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.principle{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:12px;padding:1rem;transition:border-color .2s,box-shadow .2s,transform .2s}.principle:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:0 8px 20px #0f172a14}.principle .icon{margin-bottom:.3rem;font-size:1.5rem}.principle h4{color:var(--text);font-size:.9rem}.principle p{color:var(--text2);margin-top:.2rem;font-size:.78rem}.contact-section{text-align:center}.contact-title{justify-content:center}.contact-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;min-width:260px;padding:1.5rem;display:inline-block}.contact-head{color:var(--text);margin-bottom:.5rem;font-size:1rem;font-weight:600}.contact-sub{color:var(--text2);margin-bottom:.8rem;font-size:.85rem}.contact-actions{flex-wrap:wrap;justify-content:center;gap:.8rem;display:flex}.contact-btn{border:1px solid var(--border-strong);color:var(--accent);border-radius:8px;padding:.5rem 1rem;font-size:.85rem;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}.contact-btn:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none;transform:translateY(-2px)}.reveal{opacity:0;transition:opacity .7s ease var(--d,0s), transform .7s ease var(--d,0s);will-change:opacity, transform;transform:translateY(24px)}.reveal-in{opacity:1;transform:translateY(0)}.contact-reveal{text-align:center}.intro-overlay{z-index:1000;background:radial-gradient(ellipse 60% 80% at 50% 30%, #2563eb1a, transparent), var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;transition:opacity .45s,visibility .45s;display:flex;position:fixed;inset:0}.intro-fade{opacity:0;visibility:hidden}.intro-brand{color:var(--text);align-items:center;gap:.7rem;font-size:1.8rem;font-weight:700;animation:.8s cubic-bezier(.2,.9,.3,1.2) both intro-pop;display:flex}.intro-icon{font-size:2rem;animation:3s linear infinite intro-spin}@keyframes intro-pop{0%{opacity:0;transform:scale(.85)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes intro-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.intro-bar{background:var(--border);border-radius:2px;width:160px;height:4px;overflow:hidden}.intro-bar i{background:var(--accent);border-radius:2px;width:0;height:100%;animation:1.4s .2s forwards intro-fill;display:block}@keyframes intro-fill{0%{width:0}to{width:100%}}.banner{animation:5s ease-in-out infinite banner-glow}@keyframes banner-glow{0%,to{box-shadow:0 4px 20px #2563eb0f}50%{box-shadow:0 10px 34px #2563eb2e}}.banner-text span{animation:4.5s ease-in-out infinite float-y;display:inline-block}.banner-text span:nth-child(2){animation-delay:.6s}.banner-text span:nth-child(3){animation-delay:1.2s}@keyframes float-y{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (prefers-reduced-motion:reduce){.topnav,.intro-brand,.intro-icon,.intro-bar i,.banner,.banner-text span,.badge,.stat-card,.project,.principle,.contact-btn,.reveal,.hero .h-anim,.skill-bar i,.hero-name,.tilt,.floating-backdrop .blob,.floating-backdrop .shape{transition-duration:.01ms!important;animation:none!important}.reveal,.hero .h-anim,.skill-group .skill-bar i{opacity:1!important;width:var(--level,100%)!important;transform:none!important}}.mouse-glow{pointer-events:none;z-index:50;mix-blend-mode:normal;background:radial-gradient(circle,#2563eb12,#2563eb08 40%,#0000 65%);border-radius:50%;width:400px;height:400px;position:fixed;top:0;left:0}.back-to-top{background:var(--accent);color:#fff;z-index:200;opacity:0;pointer-events:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;font-weight:700;text-decoration:none;transition:opacity .2s;display:flex;position:fixed;bottom:1.5rem;right:1.5rem;box-shadow:0 2px 8px #2563eb59}.back-to-top.show{opacity:1;pointer-events:auto}.back-to-top:hover{opacity:.85;color:#fff;text-decoration:none}footer{text-align:center;color:var(--text2);border-top:1px solid var(--border);background:var(--surface);margin-top:2rem;padding:2rem 1rem;font-size:.8rem}@media (width<=600px){.stat-num{font-size:1.6rem}.stats,.projects,.skills-grid,.principles{grid-template-columns:1fr}}