:root{--bg-0:#05070f;--bg-1:#0a0f1e;--bg-2:#10182b;--border:#94a3b829;--text-0:#e8eefc;--text-1:#a9b6d0;--text-2:#6b7a99;--cyan:#22d3ee;--violet:#a78bfa;--pink:#f472b6;--grad:linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #a78bfa 100%);--glow:0 0 24px #22d3ee59;--radius:16px;--font-display:"Space Grotesk", "Noto Sans SC", system-ui, sans-serif;--font-body:"Noto Sans SC", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-0);color:var(--text-0);line-height:1.7;overflow-x:hidden}::selection{background:#22d3ee59}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-0)}::-webkit-scrollbar-thumb{background:#1c2740;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#26355a}.bg-grid{z-index:-2;background-image:linear-gradient(#6379b30f 1px,#0000 1px),linear-gradient(90deg,#6379b30f 1px,#0000 1px);background-size:44px 44px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(90% 70% at 50% 0,#000 40%,#0000 100%);mask-image:radial-gradient(90% 70% at 50% 0,#000 40%,#0000 100%)}.bg-orb{z-index:-1;filter:blur(120px);opacity:.4;pointer-events:none;border-radius:50%;position:fixed}.orb-1{background:radial-gradient(circle,#22d3ee80,#0000 70%);width:520px;height:520px;top:-180px;left:-120px}.orb-2{background:radial-gradient(circle,#a78bfa73,#0000 70%);width:460px;height:460px;top:30%;right:-160px}.orb-3{background:radial-gradient(circle,#f472b64d,#0000 70%);width:380px;height:380px;bottom:-140px;left:30%}.container{max-width:1120px;margin:0 auto;padding:0 24px}.section{padding:96px 0}.section-head{flex-direction:column;gap:10px;margin-bottom:48px;display:flex}.section-tag{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-size:13px}.section-title{font-family:var(--font-display);letter-spacing:-.02em;background:var(--grad);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(28px,4vw,40px);font-weight:700}.section-sub{color:var(--text-1);max-width:620px;font-size:15px}.btn{font-family:var(--font-display);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:8px;padding:12px 22px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--grad);color:#05070f;box-shadow:var(--glow)}.btn-primary:hover{box-shadow:0 0 36px #22d3ee80}.btn-ghost{color:var(--text-0);border:1px solid var(--border);background:0 0}.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}.reveal{opacity:0;transition:opacity .6s,transform .6s;transform:translateY(26px)}.reveal.visible{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}}.nav{z-index:100;background:0 0;border-bottom:1px solid #0000;transition:background .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;position:fixed;top:0;left:0;right:0}.nav-scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--border);background:#05070fbf}.nav-inner{justify-content:space-between;align-items:center;height:68px;display:flex}.nav-brand{font-family:var(--font-display);color:var(--text-0);letter-spacing:.04em;align-items:center;gap:10px;font-size:18px;font-weight:700;text-decoration:none;display:inline-flex}.brand-dot{background:var(--grad);border-radius:50%;width:10px;height:10px;box-shadow:0 0 12px #22d3eecc}.nav-links{gap:32px;display:flex}.nav-links a{color:var(--text-1);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s;position:relative}.nav-links a:after{content:"";background:var(--grad);border-radius:2px;width:0;height:2px;transition:width .25s;position:absolute;bottom:-6px;left:0}.nav-links a:hover{color:var(--text-0)}.nav-links a:hover:after{width:100%}.nav-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:6px;display:none}.nav-toggle span{background:var(--text-0);border-radius:2px;width:22px;height:2px;transition:transform .2s,opacity .2s}@media (width<=720px){.nav-toggle{display:flex}.nav-links{border-bottom:1px solid var(--border);opacity:0;pointer-events:none;background:#05070ff7;flex-direction:column;gap:0;padding:8px 24px 18px;transition:opacity .25s,transform .25s;position:fixed;top:68px;left:0;right:0;transform:translateY(-12px)}.nav-links.open{opacity:1;pointer-events:auto;transform:translateY(0)}.nav-links a{border-bottom:1px solid #94a3b814;padding:12px 0}.nav-links a:last-child{border-bottom:none}}.hero{justify-content:center;align-items:center;min-height:100vh;padding:120px 0 60px;display:flex}.hero-inner{text-align:center;flex-direction:column;align-items:center;display:flex}.hero-avatar{justify-content:center;align-items:center;width:96px;height:96px;margin-bottom:28px;display:flex;position:relative}.avatar-ring{background:linear-gradient(var(--bg-0), var(--bg-0)) padding-box, var(--grad) border-box;border:2px solid #0000;border-radius:50%;animation:3.2s ease-in-out infinite pulse;position:absolute;inset:0;box-shadow:0 0 30px #22d3ee59}.avatar-core{font-family:var(--font-display);background:var(--grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:40px;font-weight:700}@keyframes pulse{0%,to{box-shadow:0 0 22px #22d3ee47}50%{box-shadow:0 0 44px #22d3ee80}}.hero-hello{font-family:var(--font-mono);color:var(--text-2);margin-bottom:16px;font-size:14px}.code-line{color:var(--cyan)}.hero-title{font-family:var(--font-display);letter-spacing:-.03em;margin-bottom:10px;font-size:clamp(44px,8vw,76px);font-weight:700;line-height:1.1}.title-caret{color:var(--cyan);animation:1.1s step-end infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero-role{font-family:var(--font-display);color:var(--violet);margin-bottom:14px;font-size:clamp(18px,3vw,24px);font-weight:600}.hero-tagline{color:var(--text-1);max-width:520px;margin-bottom:36px;font-size:16px}.hero-actions{flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:56px;display:flex}.hero-stats{grid-template-columns:repeat(4,auto);gap:48px;display:grid}.stat{flex-direction:column;align-items:center;gap:2px;display:flex}.stat-value{font-family:var(--font-display);background:var(--grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:700}.stat-label{color:var(--text-2);font-size:13px}.scroll-hint{margin-top:64px;display:block}.mouse{border:2px solid var(--text-2);border-radius:14px;justify-content:center;width:24px;height:38px;padding-top:7px;display:flex}.wheel{background:var(--cyan);border-radius:3px;width:3px;height:7px;animation:1.6s ease-in-out infinite wheel}@keyframes wheel{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(10px)}to{opacity:0;transform:translateY(0)}}@media (width<=720px){.hero-stats{grid-template-columns:repeat(2,auto);gap:32px}.hero-actions{flex-direction:column}}.about-grid{grid-template-columns:1.1fr 1fr;align-items:start;gap:48px;display:grid}.about-text p{color:var(--text-1);margin-bottom:16px;font-size:15.5px}.about-chips{flex-wrap:wrap;gap:10px;margin-top:24px;list-style:none;display:flex}.about-chips li{font-family:var(--font-mono);border:1px solid var(--border);color:var(--cyan);background:#22d3ee0f;border-radius:999px;padding:6px 14px;font-size:12.5px}.about-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-1);overflow:hidden;box-shadow:0 16px 48px #00000059}.card-header{background:var(--bg-2);border-bottom:1px solid var(--border);align-items:center;gap:7px;padding:12px 16px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot.red{background:#f87171}.dot.yellow{background:#fbbf24}.dot.green{background:#34d399}.card-title{font-family:var(--font-mono);color:var(--text-2);margin-left:8px;font-size:12px}.card-body{padding:18px 20px;overflow-x:auto}.card-body pre{font-family:var(--font-mono);color:#7dd3fc;font-size:13px;line-height:1.8}@media (width<=860px){.about-grid{grid-template-columns:1fr}}.skills-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.skill-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-1);padding:26px;transition:transform .25s,border-color .25s,box-shadow .25s}.skill-card:hover{border-color:#22d3ee66;transform:translateY(-6px);box-shadow:0 0 32px #22d3ee1f}.skill-card-head{align-items:center;gap:14px;margin-bottom:22px;display:flex}.skill-card-head h3{font-family:var(--font-display);font-size:20px;font-weight:600}.skill-icon{width:48px;height:48px;color:var(--cyan);font-family:var(--font-mono);background:#22d3ee14;border:1px solid #22d3ee40;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.skill-icon small{color:var(--text-2);letter-spacing:.08em;font-size:9px}.skill-list{flex-direction:column;gap:16px;list-style:none;display:flex}.skill-row{justify-content:space-between;margin-bottom:7px;display:flex}.skill-name{color:var(--text-1);font-size:14px}.skill-level{font-family:var(--font-mono);color:var(--violet);font-size:12.5px}.bar{background:var(--bg-2);border-radius:6px;height:6px;overflow:hidden}.bar-fill{background:var(--grad);border-radius:6px;height:100%;transition:width 1.1s .2s;box-shadow:0 0 10px #22d3ee99}@media (width<=900px){.skills-grid{grid-template-columns:1fr}}.projects-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px;display:grid}.projects-grid:last-child{margin-bottom:0}.project-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-1);flex-direction:column;gap:12px;padding:24px;transition:transform .25s,border-color .25s,box-shadow .25s;display:flex}.project-card:hover{border-color:#a78bfa66;transform:translateY(-6px);box-shadow:0 0 32px #a78bfa24}.project-card.featured{border-color:#22d3ee59}.project-top{justify-content:space-between;align-items:center;display:flex}.project-folder{color:var(--cyan);font-size:20px}.project-links a{color:var(--text-2);transition:color .2s}.project-links a:hover{color:var(--text-0)}.project-name{font-family:var(--font-display);color:var(--text-0);font-size:19px;font-weight:600;transition:color .2s}.project-card:hover .project-name{color:var(--cyan)}.project-desc{color:var(--text-1);flex:1;font-size:14px}.project-tags{flex-wrap:wrap;gap:8px;list-style:none;display:flex}.project-tags li{font-family:var(--font-mono);color:var(--violet);background:#a78bfa12;border:1px solid #a78bfa40;border-radius:999px;padding:3px 10px;font-size:11.5px}.project-meta{font-family:var(--font-mono);color:var(--text-2);gap:16px;font-size:13px;display:flex}@media (width<=900px){.projects-grid{grid-template-columns:1fr}}.blog-list{flex-direction:column;gap:14px;display:flex}.post-row{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-1);grid-template-columns:48px 1fr auto 24px;align-items:center;gap:20px;padding:20px 24px;text-decoration:none;transition:border-color .25s,transform .25s,background .25s;display:grid}.post-row:hover{background:var(--bg-2);border-color:#f472b666;transform:translate(6px)}.post-index{font-family:var(--font-mono);color:var(--text-2);font-size:13px}.post-main h3{font-family:var(--font-display);color:var(--text-0);margin-bottom:4px;font-size:17px;font-weight:600;transition:color .2s}.post-row:hover .post-main h3{color:var(--pink)}.post-main p{color:var(--text-1);font-size:13.5px}.post-side{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.post-tags{gap:6px;list-style:none;display:flex}.post-tags li{font-family:var(--font-mono);color:var(--cyan);background:#22d3ee0f;border:1px solid #22d3ee40;border-radius:999px;padding:2px 9px;font-size:11px}.post-date{font-family:var(--font-mono);color:var(--text-2);font-size:12px}.post-arrow{color:var(--text-2);font-size:18px;transition:transform .25s,color .25s}.post-row:hover .post-arrow{color:var(--pink);transform:translate(4px)}@media (width<=860px){.post-row{grid-template-columns:40px 1fr 20px;gap:12px}.post-side{display:none}}.contact-grid{grid-template-columns:1fr 1.1fr;align-items:start;gap:48px;display:grid}.contact-line{color:var(--text-1);margin-bottom:28px}.contact-links{flex-direction:column;gap:10px;display:flex}.contact-item{border:1px solid var(--border);background:var(--bg-1);color:var(--text-0);border-radius:12px;align-items:center;gap:14px;padding:14px 16px;text-decoration:none;transition:border-color .25s,transform .25s;display:flex}.contact-item:hover{border-color:#22d3ee73;transform:translate(4px)}.c-icon{width:40px;height:40px;color:var(--cyan);background:#22d3ee14;border:1px solid #22d3ee40;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex}.contact-item span:last-child{font-family:var(--font-mono);flex-direction:column;font-size:13.5px;display:flex}.contact-item small{font-family:var(--font-body);color:var(--text-2);margin-bottom:2px;font-size:11.5px}.contact-form{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-1);flex-direction:column;gap:16px;padding:28px;display:flex}.field{flex-direction:column;gap:7px;display:flex}.field label{color:var(--text-1);font-size:13px;font-weight:500}.field input,.field textarea{background:var(--bg-2);border:1px solid var(--border);color:var(--text-0);font-family:var(--font-body);resize:vertical;border-radius:10px;outline:none;padding:12px 14px;font-size:14px;transition:border-color .2s,box-shadow .2s}.field input:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #22d3ee26}.field input::placeholder,.field textarea::placeholder{color:var(--text-2)}.form-note{color:var(--cyan);font-size:13px}@media (width<=860px){.contact-grid{grid-template-columns:1fr}}.footer{border-top:1px solid var(--border);background:#05070f99;padding:32px 0}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.footer-left{color:var(--text-2);font-size:13px}.footer-code{font-family:var(--font-mono);color:var(--cyan);font-size:13px}