:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:oklch(9% .03 260);--bg-deep:oklch(6% .028 260);--surface:oklch(17% .035 260/.72);--surface-strong:oklch(22% .055 260/.82);--panel:oklch(18% .04 260/.76);--ink:oklch(94% .02 245);--ink-muted:oklch(73% .035 250);--ink-soft:oklch(60% .035 250);--cyan:oklch(78% .15 210);--violet:oklch(66% .18 300);--orange:oklch(72% .19 42);--yellow:oklch(86% .15 92);--blue-deep:var(--ink);--sky:var(--cyan);--sky-soft:oklch(16% .05 240);--paper:var(--bg);--danger:oklch(66% .22 28);--line:color-mix(in oklch, var(--ink) 12%, transparent);--line-strong:color-mix(in oklch, var(--cyan) 30%, transparent);--shadow-cyan:0 20px 60px color-mix(in oklch, var(--cyan) 12%, transparent);--font-body:"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;--font-display:"Microsoft YaHei", "PingFang SC", system-ui, sans-serif;--font-mono:"Cascadia Code", "SFMono-Regular", Consolas, monospace;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:2rem;--space-xl:3rem;--space-2xl:5rem;--space-3xl:8rem;--z-canvas:0;--z-content:1;--z-ui:8;--z-overlay:10;--z-boot:20;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-out-quint:cubic-bezier(.22, 1, .36, 1);--dur-fast:.15s;--dur-normal:.3s;--dur-slow:.6s;--radius-sm:6px;--radius-md:12px;--radius-lg:20px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg-deep)}body{min-height:100vh;font-family:var(--font-body);color:var(--ink);background:linear-gradient(180deg, oklch(0% none none/.28), transparent 28%, oklch(0% none none/.22) 100%), radial-gradient(1200px 520px at 12% 0%, color-mix(in oklch, var(--violet) 22%, transparent), transparent 70%), radial-gradient(980px 520px at 88% 8%, color-mix(in oklch, var(--cyan) 18%, transparent), transparent 70%), radial-gradient(900px 480px at 50% 100%, color-mix(in oklch, var(--orange) 12%, transparent), transparent 70%), var(--bg-deep);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem;line-height:1.6}body:before{content:"";z-index:-1;pointer-events:none;background-color:#0000;background-image:linear-gradient(90deg,oklch(100% 5.96046e-8 none/.04) 1px,#0000 1px),linear-gradient(0deg,oklch(100% 5.96046e-8 none/.03) 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:96px 96px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 78%);mask-image:linear-gradient(#000,#0000 78%)}img,canvas{max-width:100%;height:auto;display:block}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:none}ul,ol{list-style:none}:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}:focus:not(:focus-visible){outline:none}::selection{background-color:color-mix(in oklch, var(--cyan) 32%, transparent);color:var(--ink)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[hidden]{display:none!important}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.site-shell{flex-direction:column;min-height:100vh;display:flex}.section{width:100%;padding:var(--space-3xl) var(--space-lg)}.section-inner{width:100%;max-width:960px;margin:0 auto}.hero{background:var(--bg-deep);justify-content:center;align-items:center;min-height:100vh;padding:0;display:flex;position:relative;overflow:hidden}.hero-content{z-index:var(--z-content);text-align:center;padding:var(--space-lg);max-width:720px;position:relative}.hero-visual{z-index:var(--z-canvas);pointer-events:none;position:absolute;inset:0}.section-profile{background:var(--bg)}.section-projects{background:var(--bg-deep)}.section-notes{background:var(--bg)}.section-contact{background:var(--bg-deep)}.site-footer{padding:var(--space-xl) var(--space-lg);text-align:center;border-top:1px solid var(--line);color:var(--ink-muted);font-size:.875rem}.action-button,.social-link,.btn{border:1px solid var(--line);min-height:44px;color:var(--ink);transition:transform var(--dur-fast) var(--ease-out-quint), border-color var(--dur-fast) var(--ease-out-quint), background var(--dur-fast) var(--ease-out-quint), color var(--dur-fast) var(--ease-out-quint);background:oklch(100% 5.96046e-8 none/.05);border-radius:999px;justify-content:center;align-items:center;gap:9px;padding:0 18px;font-weight:700;text-decoration:none;display:inline-flex}.action-button:hover,.social-link:hover,.btn:hover{border-color:color-mix(in oklch, var(--cyan) 48%, transparent);background:oklch(100% 5.96046e-8 none/.08);transform:translateY(-2px)}.action-button--primary,.btn-primary{border-color:color-mix(in oklch, var(--cyan) 54%, transparent);color:var(--bg-deep);background:linear-gradient(135deg, var(--cyan), color-mix(in oklch, var(--violet) 48%, var(--cyan)))}.action-button--primary:hover,.btn-primary:hover{color:var(--bg-deep);background:linear-gradient(135deg, color-mix(in oklch, var(--cyan) 88%, white), color-mix(in oklch, var(--violet) 54%, var(--cyan)))}.social-link__icon{background:color-mix(in oklch, var(--cyan) 18%, transparent);width:24px;height:24px;color:var(--cyan);font-size:.76rem;font-family:var(--font-mono);border-radius:50%;place-items:center;display:grid}.social-link--compact{border-radius:14px;justify-content:flex-start;width:100%}.project-card{min-height:286px;transition:transform var(--dur-normal) var(--ease-out-quint), border-color var(--dur-normal) var(--ease-out-quint), background var(--dur-normal) var(--ease-out-quint);flex-direction:column;padding:clamp(22px,3vw,30px);display:flex;overflow:hidden}.project-card:hover{border-color:color-mix(in oklch, var(--cyan) 40%, transparent);background:radial-gradient(160px 100px at 80% 12%, color-mix(in oklch, var(--cyan) 12%, transparent), transparent 64%), linear-gradient(180deg, oklch(100% 5.96046e-8 none/.08), transparent 58%), var(--surface-strong);transform:translateY(-4px)}.project-card__top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.project-stage{border:1px solid color-mix(in oklch, var(--orange) 42%, transparent);min-height:28px;color:var(--orange);background:color-mix(in oklch, var(--orange) 10%, transparent);border-radius:999px;align-items:center;padding:0 10px;font-size:.78rem;font-weight:800;display:inline-flex}.project-arrow{width:34px;height:34px;color:var(--ink-muted);background:oklch(100% 5.96046e-8 none/.06);border-radius:50%;place-items:center;display:grid}.project-name{color:var(--ink);margin-bottom:12px;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.2}.project-desc{color:var(--ink-muted);margin-bottom:18px;line-height:1.75}.project-tags{margin-top:auto;margin-bottom:16px}.tag,.tag-cloud span{border:1px solid var(--line);min-height:28px;color:var(--ink-muted);background:oklch(100% 5.96046e-8 none/.05);border-radius:999px;align-items:center;padding:0 10px;font-size:.82rem;display:inline-flex}.project-link,.project-link--pending{color:var(--cyan);font-size:.9rem;font-weight:800}.project-link--pending{color:var(--ink-soft)}.notes-list{gap:14px;display:grid}.note-item{color:var(--ink-muted);grid-template-columns:auto minmax(0,1fr);gap:16px;padding:clamp(18px,3vw,26px);display:grid}.note-icon{background:color-mix(in oklch, var(--cyan) 14%, transparent);width:34px;height:34px;color:var(--cyan);border-radius:10px;place-items:center;font-weight:900;display:grid}.note-item h3{color:var(--ink);margin-bottom:6px;font-size:1.1rem}.note-item p{line-height:1.75}.contact-link--copied{border-color:var(--yellow);color:var(--yellow)}.page-shell{min-height:100vh;overflow:clip}.texture-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:radial-gradient(120px 80px at 18% 8%, oklch(100% 5.96046e-8 none/.08), transparent 64%), radial-gradient(160px 100px at 82% 12%, color-mix(in oklch, var(--cyan) 9%, transparent), transparent 66%), linear-gradient(180deg, oklch(100% 5.96046e-8 none/.06), transparent 58%), var(--surface);-webkit-backdrop-filter:blur(18px)saturate(130%);backdrop-filter:blur(18px)saturate(130%);position:relative;box-shadow:0 24px 56px -36px oklch(0% none none/.8),inset 0 1px oklch(100% 5.96046e-8 none/.08)}.topbar{z-index:var(--z-ui);background:color-mix(in oklch, var(--bg-deep) 76%, transparent);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(20px)saturate(140%);backdrop-filter:blur(20px)saturate(140%);justify-content:space-between;align-items:center;gap:20px;padding:16px clamp(18px,5vw,72px);display:flex;position:sticky;top:0}.brand-mark{color:var(--ink);letter-spacing:0;white-space:nowrap;align-items:center;gap:10px;font-weight:800;display:inline-flex}.brand-dot{background:linear-gradient(135deg, var(--orange), var(--violet));width:16px;height:16px;box-shadow:0 0 24px color-mix(in oklch, var(--orange) 48%, transparent);border-radius:6px;transform:rotate(45deg)}.site-nav{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.site-nav a{border:1px solid var(--line);min-height:40px;color:var(--ink-muted);transition:color var(--dur-fast) var(--ease-out-quint), border-color var(--dur-fast) var(--ease-out-quint), background var(--dur-fast) var(--ease-out-quint), transform var(--dur-fast) var(--ease-out-quint);border-radius:12px;justify-content:center;align-items:center;padding:0 15px;font-size:.92rem;display:inline-flex;position:relative}.site-nav a:hover{color:var(--ink);border-color:color-mix(in oklch, var(--cyan) 46%, transparent);background:oklch(100% 5.96046e-8 none/.06);transform:translateY(-2px)}.hero-section{grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:center;gap:clamp(24px,4vw,44px);width:min(1180px,100% - 40px);min-height:calc(100svh - 73px);margin:0 auto;padding:clamp(64px,8vw,110px) 0;display:grid;position:relative}.hero-orbs{z-index:-1;pointer-events:none;position:absolute;inset:0}.orb{filter:blur(30px);opacity:.68;animation:orbFloat 16s var(--ease-out-quint) infinite alternate;border-radius:50%;position:absolute}.orb--one{background:color-mix(in oklch, var(--violet) 28%, transparent);width:280px;height:280px;top:10%;right:18%}.orb--two{background:color-mix(in oklch, var(--cyan) 22%, transparent);width:240px;height:240px;animation-delay:-4s;bottom:14%;left:6%}.orb--three{background:color-mix(in oklch, var(--orange) 18%, transparent);width:160px;height:160px;animation-delay:-8s;top:44%;right:38%}.hero-panel{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(22px,4vw,44px);padding:clamp(24px,5vw,46px);display:grid}.avatar-block{justify-items:center;gap:16px;display:grid}.avatar-ring{aspect-ratio:1;background:linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--cyan), var(--violet), var(--orange)) border-box;width:clamp(128px,16vw,172px);box-shadow:0 24px 60px -28px color-mix(in oklch, var(--cyan) 55%, transparent);border:4px solid #0000;border-radius:50%;place-items:center;display:grid}.avatar-ring span{aspect-ratio:1;background:linear-gradient(135deg, color-mix(in oklch, var(--cyan) 34%, transparent), color-mix(in oklch, var(--violet) 34%, transparent));width:76%;color:var(--ink);border-radius:50%;place-items:center;font-size:clamp(2.2rem,5vw,4rem);font-weight:900;display:grid}.status-pill{border:1px solid var(--line);color:var(--ink-muted);background:color-mix(in oklch, var(--bg-deep) 62%, transparent);border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:.85rem;display:inline-flex}.status-pill span{background:oklch(80% .2 145);border-radius:50%;width:8px;height:8px;box-shadow:0 0 14px oklch(80% .2 145)}.hero-copy{max-width:700px}.hero-kicker{color:var(--cyan);margin-bottom:12px;font-size:.95rem;font-weight:700}.hero-title{max-width:760px;color:var(--ink);letter-spacing:-.04em;text-wrap:balance;font-size:clamp(3.8rem,8vw,7.4rem);line-height:.92}.hero-motto{color:var(--ink);text-wrap:balance;margin-top:22px;font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.55}.hero-summary{max-width:62ch;color:var(--ink-muted);text-wrap:pretty;margin-top:16px;font-size:1rem;line-height:1.9}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.hero-side{gap:14px;display:grid}.mini-card{gap:6px;padding:20px;display:grid}.mini-card span{color:var(--ink-soft);font-family:var(--font-mono);font-size:.78rem}.mini-card strong{color:var(--ink);font-size:1.08rem}.social-row,.contact-list{flex-wrap:wrap;gap:10px;display:flex}.section-grid{grid-template-columns:minmax(180px,.28fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);width:min(1180px,100% - 40px);margin:0 auto;padding:clamp(50px,7vw,88px) 0;display:grid}.section-heading{align-self:start;position:sticky;top:96px}.section-heading span{color:var(--cyan);font-family:var(--font-mono);font-size:.78rem}.section-heading h2{color:var(--ink);margin-top:8px;font-size:clamp(2rem,3.4vw,3.4rem);line-height:1}.about-card,.contact-panel{color:var(--ink-muted);gap:18px;padding:clamp(22px,4vw,34px);line-height:1.9;display:grid}.skills-grid,.projects-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;display:grid}.skill-card{padding:22px}.skill-card h3{color:var(--ink);margin-bottom:16px;font-size:1.15rem}.tag-cloud,.project-tags{flex-wrap:wrap;gap:8px;display:flex}.stack-list{border:1px solid var(--line);background:var(--line);border-radius:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;display:grid;overflow:hidden}.stack-row{background:color-mix(in oklch, var(--bg-deep) 72%, transparent);gap:4px;padding:16px;display:grid}.stack-row dt{color:var(--ink);font-weight:700}.stack-row dd{color:var(--ink-muted);margin:0}.site-footer{border-top:1px solid var(--line);width:min(1180px,100% - 40px);color:var(--ink-soft);margin:0 auto;padding:32px 0 42px;font-size:.9rem}@media (width<=900px){.hero-section{grid-template-columns:1fr;min-height:auto;padding-top:72px}.hero-side{grid-template-columns:repeat(2,minmax(0,1fr))}.social-row{grid-column:1/-1}.section-grid{grid-template-columns:1fr;gap:20px}.section-heading{position:static}}@media (width<=640px){.topbar{flex-direction:column;align-items:flex-start;padding:14px 18px}.site-nav{flex-wrap:nowrap;justify-content:flex-start;width:100%;padding-bottom:4px;overflow-x:auto}.site-nav a{flex:none}.hero-section,.section-grid,.site-footer{width:min(100% - 32px,720px)}.hero-panel{grid-template-columns:1fr;justify-items:start}.avatar-block{justify-items:start}.hero-title{font-size:clamp(3.1rem,15vw,4.8rem)}.hero-side{grid-template-columns:1fr}.action-button,.social-link{width:100%}}.section--revealed{animation:sectionReveal .72s var(--ease-out-expo) both}@keyframes sectionReveal{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes orbFloat{0%{transform:translate(0,0)scale(1)}to{transform:translate(28px,-18px)scale(1.08)}}@media (prefers-reduced-motion:reduce){.section--revealed,.orb{opacity:1;animation:none;transform:none}}@media (width<=1024px){.section{padding:var(--space-2xl) var(--space-lg)}.section-inner{max-width:100%}.hero-content{padding:var(--space-lg) var(--space-md)}.profile-row{padding:var(--space-md);grid-template-columns:140px 1fr}.projects-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media (width<=760px){:root{--space-3xl:4rem;--space-2xl:3rem;--space-xl:2rem;--space-lg:1.25rem}.section{padding:var(--space-2xl) var(--space-md)}.hero-content{padding:var(--space-md);max-width:100%}.hero-title{font-size:clamp(2.25rem,9vw,4rem)}.hero-actions{align-items:stretch;gap:var(--space-sm);flex-direction:column}.btn{width:100%}.profile-row{gap:var(--space-xs);padding:var(--space-md);grid-template-columns:1fr}.profile-key{font-size:.75rem}.projects-grid{gap:var(--space-md);grid-template-columns:1fr}.project-card{padding:var(--space-md)}.note-item{padding:var(--space-md);border-radius:var(--radius-md)}.contact-list{flex-direction:column}.contact-link{justify-content:center;width:100%}.site-footer{padding:var(--space-lg) var(--space-md);font-size:.8125rem}}@media (width<=375px){.hero-title{font-size:clamp(2rem,8vw,3rem)}.hero-subtitle{font-size:.8125rem}.hero-summary{font-size:1rem}.section-title{font-size:clamp(1.25rem,5vw,1.5rem)}.project-name{font-size:1.125rem}}