@charset "UTF-8";
:root{--ink:#17213f;--muted:#64748b;--sky:#eaf6ff;--yellow:#ffe47c;--line:#d9e6ef;--font:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;color:var(--ink);background:#fcfdfd;font:15px/1.8 var(--font)}h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;height:auto}[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:3px solid #467ab7;outline-offset:5px}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.skip-link{position:fixed;top:-100px;left:20px;padding:12px 20px;background:var(--yellow);z-index:100}.skip-link:focus{top:12px}
.site-header{height:90px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;z-index:20;background:#fff}.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:800;white-space:nowrap}.brand img{width:38px;image-rendering:pixelated}.brand-dot{color:#dda845}.site-header nav{display:flex;align-items:center;gap:13px}.nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 12px;border:0;background:transparent;font-size:13px;font-weight:600;position:relative}.nav-link:after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:transparent}.nav-link.is-active:after,.nav-link:hover:after{background:var(--yellow)}#contact-toggle{background:var(--yellow);padding-inline:20px;border:1px solid #e6cb68}.contact-anchor{position:relative}.contact-card{position:absolute;top:56px;right:0;width:260px;padding:22px;background:#fffdf8;border:1px solid var(--line);box-shadow:0 12px 35px #17213f18}.contact-heading{display:flex;align-items:center;justify-content:space-between;font-size:19px}.contact-heading strong span{color:#dda845}.close-button{border:0;background:transparent;width:32px;height:32px;font-size:24px}.contact-label{display:block;color:var(--muted);font-size:12px;margin-top:12px}.wechat-id,.public-wechat{font:600 24px/1.8 ui-monospace,monospace;user-select:all}.copy-status,.inline-copy-status{color:#467160;font-size:12px;min-height:22px;margin-top:8px}.resume-link{display:block;margin-top:10px;border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}
.pixel-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:10px 24px;background:var(--yellow);border:1px solid #e1c45d;border-radius:2px;font-size:14px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s}.pixel-button:hover{transform:translateY(-2px);background:#ffda51;box-shadow:0 5px 14px #17213f10}.pixel-button:active{transform:translateY(0)}.pixel-button span{font-size:19px}.secondary-button{background:#ffffffc9;border-color:#adc8e0}.secondary-button:hover{background:#fff}.copy-button{margin-top:14px;width:100%;font-size:13px;padding:8px}.music-toggle{display:grid;place-items:center;flex:0 0 38px;width:38px;height:40px;padding:9px;border:1px solid var(--line);background:white}.music-toggle svg{width:20px;height:20px;fill:var(--ink)}.speaker-wave{display:none}.speaker-mute{fill:#698094}.music-toggle.is-playing{background:#fff5cb}.is-playing .speaker-wave{display:block;animation:music-wave 1.8s ease-in-out infinite}.is-playing .speaker-mute{display:none}@keyframes music-wave{50%{opacity:.4}}
.sky-world{background:#fff}.hero{height:520px;position:relative;isolation:isolate}.hero:before{content:"";position:absolute;inset:0 -32px;z-index:-2;background:#d9f1ff url('/assets/hero.webp') center 62%/cover no-repeat;image-rendering:pixelated}.hero:after{content:"";position:absolute;inset:0 -32px;z-index:-1;background:linear-gradient(90deg,#f8fcffff 0%,#edf8fff0 32%,#e9f6ff38 65%,transparent 78%)}.hero-copy{position:relative;padding:58px 0 0;max-width:690px;z-index:2}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2.5px;color:#6488b1;display:flex;align-items:center;gap:8px}.status-dot{width:6px;height:6px;background:#68b89e}.hero h1{font-size:clamp(55px,6.1vw,80px);font-weight:900;letter-spacing:1px;line-height:1.22;margin-top:20px}.identity{display:block;font-size:clamp(24px,2.6vw,34px);margin-top:15px;letter-spacing:0}.pixel-heart{display:inline-block;margin-left:18px;font-size:37px;vertical-align:middle;color:#f2a6c3;text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink);transform:rotate(-8deg)}.hero-description{font-size:18px;color:#4b647c;margin-top:24px}.hero-detail{font-size:13px;color:#536a80;margin-top:8px}.hero-actions{display:flex;gap:15px;margin-top:25px}.hero-note{font-size:11px;color:var(--muted);margin-top:18px}.hero-note span{color:#d4aa3f}.hero-bottom-note{position:absolute;inset-inline:0;bottom:0;height:36px;border-top:1px solid #ffffff90;font:8px/1.5 ui-monospace,monospace;letter-spacing:2px;color:#587983;display:flex;align-items:center;justify-content:space-between;background:#ffffff38;padding-inline:10px}.hero-bottom-note>span{opacity:.7}.cloud{position:absolute;top:46px;left:60%;width:46px;height:12px;box-shadow:9px -8px #ffffffbf,22px -16px #ffffffbf,38px -8px #ffffffbf;background:#ffffffbf;animation:cloud-drift 24s ease-in-out infinite;z-index:-1;pointer-events:none}.cloud-two{top:120px;left:75%;scale:.65;animation-delay:-12s}.smoke{position:absolute;top:35px;right:15%;width:8px;height:8px;background:#fff9;animation:smoke 5s steps(8) infinite;z-index:-1}.smoke-two{animation-delay:2.5s}@keyframes cloud-drift{50%{translate:30px 0}}@keyframes smoke{0%{opacity:0;transform:translateY(10px)}25%{opacity:.6}100%{opacity:0;transform:translate(-10px,-35px)}}
.cat-track{position:absolute;inset:18px 10px 0;overflow:hidden;pointer-events:none}.cat-peeker{position:absolute;left:calc(50% - 32px);bottom:0;width:64px;height:44px}.peeking-head{position:absolute;left:12px;bottom:2px;width:40px;height:40px;max-width:none;image-rendering:pixelated;transform:translateY(46px)}.peeking-paw{position:absolute;bottom:0;width:16px;height:16px;max-width:none;image-rendering:pixelated;transform:translateY(19px);z-index:1}.paw-left{left:2px}.paw-right{right:2px}.is-peeking .peeking-head{animation:cat-peek-head 14s ease-in-out both}.is-peeking .paw-left{animation:cat-peek-left 14s ease-in-out both}.is-peeking .paw-right{animation:cat-peek-right 14s ease-in-out both}@keyframes cat-peek-head{0%,22%{transform:translateY(46px)}44%,65%{transform:translateY(0)}84%,100%{transform:translateY(46px)}}@keyframes cat-peek-left{0%,5%{transform:translateY(19px)}17%,82%{transform:translateY(0)}93%,100%{transform:translateY(19px)}}@keyframes cat-peek-right{0%,10%{transform:translateY(19px)}22%,85%{transform:translateY(0)}97%,100%{transform:translateY(19px)}}
.cat-track{inset:0 10px}.cat-peeker{height:36px}.peeking-head{width:32px;height:32px;left:16px}.peeking-paw{width:13px;height:13px}.paw-left{left:7px}.paw-right{right:7px}
.content-world{padding-top:0;background:#fff}.panel{position:relative;padding-block:60px}.section-heading{display:flex;align-items:center;gap:24px}.section-heading:after{content:"";height:1px;flex:1;background:var(--line)}.heading-title{display:flex;align-items:center;gap:12px}.section-heading h2{font-size:28px;line-height:1.4;letter-spacing:.5px}.section-icon{color:#e5b946;font-size:22px}.section-number{order:3;font:11px/1 ui-monospace,monospace;color:#8198b0}.section-description{font-size:13px;color:var(--muted);margin-top:14px}.works{background:#f0f8ff}.works:before{content:"";position:absolute;inset:0 calc((1180px - 100vw)/2);background:#f0f8ff;z-index:0}.works>*{position:relative}.featured-work{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center;gap:72px;margin:36px 36px 0}.video-card{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;min-width:0;background:#132546;border:1px solid #cedcea;border-radius:2px;transition:transform .25s,box-shadow .25s}.video-card img{width:100%;height:100%;object-fit:contain;transition:transform .4s}.video-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #17213f16}.video-card:hover img{transform:scale(1.015)}.play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border:2px solid white;border-radius:50%;background:#17213f9c;color:white;font-size:19px;padding-left:3px;transition:background .2s,color .2s}.video-card:hover .play-icon,.video-card:focus-visible .play-icon{background:var(--yellow);color:var(--ink)}.published-label{display:inline-block;padding:3px 12px;background:#d3f1e8;color:#37665d;border-radius:18px;font-size:11px}.case-copy h3{font-size:clamp(25px,3vw,38px);line-height:1.5;margin:16px 0 22px;letter-spacing:.5px}.case-details{margin:0 0 28px}.case-details>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid #dce8f0;font-size:14px}.case-details dt{color:#73879d}.case-details dd{margin:0;color:#53657b}.section-footnote{font-size:11px;color:#7b8da0;margin-top:30px}.more-works{border-top:1px solid var(--line);margin-top:45px;padding-top:30px}.more-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px}.more-heading h3{font-size:20px}.more-heading p{font-size:12px;color:var(--muted)}
.video-stack{position:relative;padding:30px 0 15px}.stack-deck{height:370px;position:relative;max-width:920px;margin:auto}.stack-card{position:absolute;top:8px;left:50%;width:170px;display:block;padding:6px;background:#fff;border:1px solid #dce3ec;border-radius:3px;box-shadow:0 8px 20px #17213f14;transform:translateX(calc(-50% + var(--index)*12px)) rotate(var(--angle));transition:left .4s,width .4s,transform .4s,box-shadow .25s;transform-origin:50% 90%;z-index:calc(10 - var(--index))}.stack-card img{width:100%;aspect-ratio:9/16;object-fit:contain;background:#142746}.stack-caption{display:block;padding:8px 3px 3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.is-open .stack-card{left:calc(var(--index)*(100%/var(--count)));width:min(190px,calc(100%/var(--count) - 18px));transform:none}.is-open .stack-card:hover,.is-open .stack-card:focus-visible{transform:translateY(-9px);box-shadow:0 15px 28px #17213f21;z-index:20}.stack-toggle{display:block;margin:10px auto 0;background:transparent;border:0;border-bottom:1px solid #a8c7d7;min-height:44px;padding:8px 18px;font-size:13px}.single-video .stack-card{left:0;transform:none}.single-video .stack-deck{height:370px}
.projects{padding-block:54px}.project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px}.project{min-width:0;padding:20px 0;border-top:1px solid var(--line)}.project.ongoing{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:16px 0}.project-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.project h3{font-size:14px;font-weight:600}.project h3>span{color:#7897ae;margin-right:5px}.project-value{font:600 17px/1.5 ui-monospace,monospace;color:#6b839a}.project-value span{font-size:11px}.ongoing-badge{font-size:10px;color:#528873;background:#e8f7ef;padding:2px 7px;margin-left:15px}.ongoing-track{font-size:12px;color:#71859a}.ongoing-track span{margin-right:8px}.progress-track{height:42px;position:relative;margin-top:24px;background:#deeff7;border:1px solid #c7dfe7}.route-scenery{position:absolute;inset:0;background:url('/assets/hero.webp') center 76%/cover;opacity:.5}.progress-track:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ffffffb3 calc(25% - 1px),#ffffffb3 25%);pointer-events:none}.progress-fill{position:absolute;bottom:0;left:0;height:5px;width:var(--progress);background:var(--fill);z-index:2}.green{--fill:#77cda9}.pink{--fill:#eaa6c1}.yellow{--fill:#e5c565}.progress-cat-lane{position:absolute;bottom:5px;left:0;width:100%;height:26px;pointer-events:none}.progress-cat{position:absolute;bottom:0;left:0;width:24px;height:24px;animation:route-run 7s linear infinite}.progress-cat img{width:24px;height:24px;image-rendering:pixelated;animation:route-bounce .32s steps(2,end) infinite}.progress-track[aria-valuenow="100"] .progress-cat{left:auto;right:0;animation:none}.progress-track[aria-valuenow="100"] .progress-cat img{animation:none}.js .progress-fill{width:0}.js .projects.is-visible .progress-fill{width:var(--progress);transition:width 1s steps(10,end)}@keyframes route-run{0%{left:0;transform:scaleX(1)}49.999%{left:max(0px,calc(100% - 24px));transform:scaleX(1)}50%{left:max(0px,calc(100% - 24px));transform:scaleX(-1)}99.999%{left:0;transform:scaleX(-1)}100%{left:0;transform:scaleX(1)}}@keyframes route-bounce{50%{translate:0 -2px}}
.about{display:grid;grid-template-columns:.9fr 1.3fr;gap:70px;padding-block:76px;border-top:1px solid var(--line)}.journey-intro h2{font-size:clamp(42px,4.8vw,64px);line-height:1.25;letter-spacing:1px;margin-top:24px}.journey-intro>p:last-child{font-size:17px;line-height:1.9;color:#6e8298;margin-top:26px}.resume-nodes{list-style:none;margin:0;padding:0}.resume-node{display:grid;grid-template-columns:135px minmax(0,1fr);gap:25px;position:relative;padding:0 0 40px 24px;border-left:1px solid var(--line)}.resume-node:last-child{padding-bottom:0;border-left-color:transparent}.node-dot{position:absolute;left:-6px;top:6px;width:11px;height:11px;background:#a4cce8;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #a4cce8;transition:background .4s}.resume-node:first-child .node-dot{background:#8bd9c4;box-shadow:0 0 0 1px #8bd9c4}.node-date{font:11px/1.9 ui-monospace,monospace;color:#8191aa;overflow-wrap:anywhere;padding-top:2px}.node-content h3{font-size:18px;line-height:1.6}.node-content p{font-size:12px;line-height:1.9;color:#71839a;margin-top:8px}.keyword-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:13px 0 0;padding:0}.keyword-tags li{padding:3px 9px;border-radius:5px;background:#faeaf1;color:#7d6e81;font-size:10px}.resume-node.is-visible .node-dot{box-shadow:0 0 0 3px #e5f4fa}.connect{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--line);padding-block:64px}.connect h2{font-size:42px;line-height:1.4;margin:16px 0}.connect h2 span{color:#caa23f;font-size:30px}.connect>div>p:last-child{color:#71839a;font-size:14px}.connect-action{min-width:240px}.connect-action .pixel-button{margin-top:14px}.public-wechat{font-size:26px}.site-footer{background:#142033;color:#f1f5fb;padding-top:52px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:45px}.footer-brand{display:flex!important;align-items:center;gap:10px;font-size:21px;font-weight:700}.footer-brand img{image-rendering:pixelated}.footer-intro p{font-size:12px;color:#9caec5;margin-top:15px}.footer-grid h2{font-size:12px;font-weight:600;margin-bottom:17px;color:#dce6f1}.footer-grid a:not(.footer-brand),.footer-grid>div>span{display:block;font-size:12px;color:#a6b7cb;margin-top:8px}.footer-grid a:hover{color:var(--yellow)}.footer-copy{display:block;border:0;padding:8px 0;background:transparent;color:#e6d389;font-size:12px;min-height:40px}.footer-grid .inline-copy-status{color:#a6d8c6}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff15;padding-block:22px;margin-top:30px;color:#879bb4;font-size:10px}.footer-bottom a{color:#b6c7da}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:12px 22px;background:var(--ink);color:white;max-width:calc(100% - 32px);width:max-content;z-index:40;font-size:13px}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.js .reveal.is-visible{opacity:1;transform:none}.js .hero-enter{animation:hero-in .6s ease both}.hero-enter:nth-child(2){animation-delay:.08s}.hero-enter:nth-child(3){animation-delay:.16s}.hero-enter:nth-child(4){animation-delay:.24s}.hero-enter:nth-child(5){animation-delay:.32s}.hero-enter:nth-child(6){animation-delay:.4s}@keyframes hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:1259px){.works:before{inset:0 -40px}.featured-work{margin-inline:15px;gap:48px;grid-template-columns:250px minmax(0,1fr)}.about{gap:45px;grid-template-columns:.8fr 1.4fr}.resume-node{grid-template-columns:110px minmax(0,1fr);gap:16px}.site-header nav{gap:4px}.hero-copy{max-width:620px}}
@media(max-width:960px){.wrap{width:calc(100% - 48px)}.site-header{height:80px}.brand{font-size:20px}.site-header nav{gap:0}.nav-link{padding-inline:9px}.hero{height:490px}.hero:before,.hero:after{inset-inline:-24px}.hero-copy{padding-top:50px;max-width:550px}.hero h1{font-size:65px}.hero-description{font-size:15px}.hero-detail{max-width:390px;font-size:12px}.featured-work{margin-inline:0;grid-template-columns:230px minmax(0,1fr);gap:32px}.works:before{inset-inline:-24px}.case-details>div{grid-template-columns:65px minmax(0,1fr);gap:12px;font-size:12px}.case-copy h3{font-size:29px}.about{gap:30px;grid-template-columns:.75fr 1.3fr}.resume-node{grid-template-columns:1fr;gap:7px;padding-left:22px}.project-list{gap:18px}.project-top{flex-wrap:wrap}.journey-intro h2{font-size:46px}}
@media(max-width:720px){html{scroll-padding-top:16px}.wrap{width:calc(100% - 36px)}.site-header{height:auto;min-height:92px;display:flex;flex-wrap:wrap;gap:4px;padding-block:12px}.brand{font-size:18px}.brand img{width:30px}.site-header nav{width:100%;justify-content:space-between;gap:0}.nav-link{font-size:11px;padding:4px 8px;min-height:40px}.nav-link:after{left:8px;right:8px}#contact-toggle{padding-inline:12px}.music-toggle{flex-basis:32px;width:32px;height:34px;padding:7px}.contact-card{width:248px;right:-35px}.hero{height:610px}.hero:before{inset:0 -18px;background-size:auto 570px;background-position:70% bottom}.hero:after{inset:0 -18px;background:linear-gradient(#f1faff 3%,#eaf7ffed 35%,#eaf7ff20 67%,transparent)}.hero-copy{padding-top:32px;max-width:100%}.eyebrow{font-size:9px;letter-spacing:2px}.hero h1{font-size:57px;margin-top:16px}.identity{font-size:25px;line-height:1.5;margin-top:12px}.pixel-heart{font-size:28px;margin-left:14px}.hero-description{font-size:14px;max-width:300px;margin-top:17px;line-height:1.9}.hero-detail{font-size:11px;max-width:290px;margin-top:6px}.hero-actions{gap:12px;margin-top:20px}.pixel-button{font-size:12px;padding:9px 18px;gap:15px;min-height:44px}.hero-note{font-size:10px;margin-top:15px}.hero-bottom-note{font-size:7px;letter-spacing:1px}.hero-bottom-note>span:nth-child(2){display:none}.cloud{left:70%;top:24px;scale:.65}.cloud-two,.smoke{display:none}.panel{padding-block:38px}.section-heading h2{font-size:24px}.section-heading{gap:15px}.heading-title{gap:8px}.section-icon{font-size:18px}.section-description{font-size:11px;margin-top:10px}.works:before{inset-inline:-18px}.featured-work{grid-template-columns:1fr;gap:25px;margin-top:25px}.video-card{width:min(230px,75%);margin-inline:auto}.case-copy h3{font-size:28px;margin:13px 0 17px}.case-details{margin-bottom:23px}.case-details>div{grid-template-columns:65px minmax(0,1fr);gap:12px;padding:13px 0;font-size:12px}.case-copy .pixel-button{min-width:135px}.section-footnote{font-size:10px;margin-top:25px}.more-heading{display:block}.more-heading h3{font-size:18px}.more-heading p{margin-top:5px;font-size:11px}.stack-deck{height:330px}.stack-card{width:145px;top:6px}.stack-caption{font-size:10px}.is-open .stack-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;height:auto;min-height:260px}.is-open .stack-card{position:relative;left:auto;top:auto;width:100%;max-width:180px;margin-inline:auto;transform:none}.single-video .stack-deck{height:330px}.project-list{grid-template-columns:1fr;gap:0;margin-top:20px}.project.ongoing{display:block}.ongoing-track{margin-top:8px}.project{padding:18px 0}.project h3{font-size:14px}.progress-track{height:40px;margin-top:16px}.projects .section-footnote{margin-top:8px}.about{grid-template-columns:1fr;gap:36px;padding-block:45px}.journey-intro h2{font-size:40px;line-height:1.3;margin-top:15px}.journey-intro h2 br{display:none}.journey-intro>p:last-child{font-size:14px;margin-top:15px}.journey-intro>p:last-child br{display:none}.resume-nodes{margin-left:6px}.resume-node{grid-template-columns:1fr;padding-left:24px;padding-bottom:32px;gap:5px}.node-date{font-size:10px}.node-content h3{font-size:17px}.node-content p{font-size:12px}.keyword-tags li{font-size:10px;padding:3px 8px}.connect{display:block;padding-block:42px}.connect h2{font-size:35px;margin-block:12px}.connect>div>p:last-child{font-size:12px}.connect-action{margin-top:24px}.public-wechat{font-size:23px}.site-footer{padding-top:34px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}.footer-intro{grid-column:1/-1}.footer-brand{font-size:19px}.footer-intro p{font-size:11px;margin-top:12px}.footer-grid>div>span{overflow-wrap:anywhere}.footer-bottom{font-size:9px;gap:12px;margin-top:18px;padding-block:18px}.footer-bottom p{max-width:220px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.js .progress-fill{width:var(--progress)}.peeking-head,.peeking-paw{transform:none}.cloud,.smoke{display:none}.progress-cat{left:auto;right:0}}