:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#111;background:#f2f2f2;font-synthesis:none;--page:#f2f2f2;--ink:#111;--muted:#777;--panel:rgba(255,255,255,.64);--gutter:5.2083vw}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--page);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #137c76;outline-offset:6px}img{display:block;max-width:100%}figure,p,h1,h2{margin:0}section{position:relative}.skip-link{position:fixed;top:-100px;left:20px;background:white;color:black;padding:12px;z-index:100}.skip-link:focus{top:10px}
.header{height:clamp(72px,4.6875vw,100px);position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:32px;padding:0 var(--gutter);color:#111}.wordmark{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:650;letter-spacing:-.6px;white-space:nowrap}.wordmark img{width:30px;height:30px}.top-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(24px,3.125vw,60px)}.top-nav a,.top-nav button{display:flex;align-items:center;gap:5px;font-size:clamp(12px,.834vw,16px);padding:8px 0;white-space:nowrap}.top-nav img{width:20px;height:20px;object-fit:contain}.top-nav a:hover,.top-nav button:not(:disabled):hover{opacity:.6}.top-nav button:disabled{opacity:.4}.theme-switch{padding:5px;display:flex;gap:4px;background:#ffffff80;border-radius:30px}.theme-switch button{padding:7px;border-radius:50%}.theme-switch button[aria-pressed=true]{background:#ffffffe6}.theme-switch img{width:20px;height:20px}
.hero{height:62.5vw;min-height:720px;max-height:1440px;isolation:isolate;color:#080808}.gradient-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.hero-scene{background:url('/media/imgBg.webp') center/cover}.glass-canvas{width:100%;height:100%;position:absolute;inset:0;opacity:0}.glass-canvas.ready{opacity:1}.glass-fallback{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff25 0px,#ffffff08 9px,#35312f15 14px,#ffffff35 23px,#29242420 27px);backdrop-filter:blur(6px)}.glass-canvas.ready+.glass-fallback{display:none}.quote{position:absolute;left:61.51%;top:16%;width:34.06%;font-size:clamp(15px,1.25vw,24px);line-height:1.75}.intro-copy{position:absolute;left:var(--gutter);bottom:8.333%;width:31.25%;max-width:680px}.eyebrow{display:inline-block;font-size:clamp(12px,.833vw,16px);line-height:1;font-weight:400;padding:16px;border:1px solid currentColor;border-radius:12px;margin-bottom:clamp(22px,2.08vw,40px)}.intro-copy>p{font-size:clamp(22px,1.77vw,34px);line-height:1.765;font-weight:600;margin-bottom:clamp(22px,2.08vw,40px)}.split-button{display:inline-flex;padding:0;gap:1px;background:none;color:var(--page);font-size:clamp(12px,.833vw,16px)}.split-button span{background:var(--ink);padding:16px;line-height:16px}.split-button span:first-child{border-radius:12px 0 0 12px}.split-button span:last-child{border-radius:0 12px 12px 0;min-width:48px}.split-button:hover span:last-child{transform:translateX(4px)}.split-button span{transition:transform .2s}.hero .split-button{color:white}.hero .split-button span{background:#111}.stickers{position:absolute;inset:0;overflow:hidden}.sticker{position:absolute;left:var(--x);top:0;width:clamp(54px,6.25vw,140px);height:clamp(54px,6.25vw,140px);animation:fall var(--duration) linear infinite;animation-delay:var(--delay);will-change:transform}.sticker img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;animation:sway var(--sway) ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes fall{from{transform:translate3d(0,-180px,0)}to{transform:translate3d(0,calc(var(--scene-height) + 180px),0)}}@keyframes sway{from{transform:translateX(-24px) rotate(-18deg)}to{transform:translateX(30px) rotate(22deg)}}
.grid-surface{background-image:url('/media/img.webp');background-size:clamp(100px,10.416vw,200px);background-repeat:repeat}.skills{height:67.7083vw;max-height:1560px}.portrait{position:absolute;right:10.36%;top:-9.375vw;width:18.75vw;height:18.75vw;object-fit:cover;border-radius:12px;z-index:2}.skill-cloud{margin:0;padding:0;list-style:none}.skill-cloud li{position:absolute;padding:2.0833vw;border-radius:50px;background:#ffffff80;font-size:3.333vw;line-height:1;white-space:nowrap;font-weight:400;letter-spacing:-.04em;text-shadow:0 10px 15px #00000018}.skill-cloud li:nth-child(1){left:16.3%;top:7%;opacity:.2}.skill-cloud li:nth-child(2){left:45.36%;top:17.7%}.skill-cloud li:nth-child(3){right:1%;top:19.3%;opacity:.5}.skill-cloud li:nth-child(4){left:2.86%;top:31.77%}.skill-cloud li:nth-child(5){left:66.3%;top:35.38%;opacity:.3}.skill-cloud li:nth-child(6){left:37.86%;top:40.77%}.skill-cloud li:nth-child(7){left:21.5%;top:57.07%;opacity:.3}.skill-cloud li:nth-child(8){right:2%;top:57.07%;opacity:.6}.skill-cloud li:nth-child(9){left:5.73%;top:76.3%;opacity:.6}.skill-cloud li:nth-child(10){left:52.76%;top:75.23%;opacity:.2}
.works{padding:0 var(--gutter) 7.8125vw}.works-grid{position:relative;height:103.4375vw}.work{position:absolute;width:44.6%;padding:0;text-align:left}.work-image{display:block;overflow:hidden;border-radius:12px;aspect-ratio:767/600;background:#e5e5e5}.work-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.65,.2,1)}.work:hover .work-image img{transform:scale(1.025)}.work-caption{display:flex;justify-content:space-between;gap:16px;font-size:clamp(11px,.833vw,16px);line-height:1.5;margin-top:16px}.work-caption span:last-child{white-space:nowrap}.work-app{top:0;left:0}.work-suplay{width:33.43%;top:0;right:5.81%}.work-book{width:33.43%;top:39.0625vw;left:5.81%}.work-badge{top:39.0625vw;right:0}.work-palace{top:70.3125vw;left:0}.more-work{position:absolute;right:5.81%;bottom:2.7vw;text-align:right}.more-work p{font-size:clamp(16px,1.25vw,24px);margin-bottom:20px}
.brands{margin:0 1.04167vw;padding:2.083vw 4.167vw 2.604vw;border-radius:20px;background:var(--panel);z-index:1}.brands h2{font-size:clamp(12px,.8333vw,16px);font-weight:400}.brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2vw 4.8vw;margin:3.5vw 2.5vw 3vw}.brand-cell{height:8vw;display:flex;align-items:center;justify-content:center}.brand-logo{position:relative;width:100%;max-width:200px;aspect-ratio:var(--ratio)}.brand-part{position:absolute}.brand-part img{width:100%;height:100%;object-fit:contain}.brand-note{font-size:clamp(10px,.625vw,12px);line-height:1.7;text-align:center;color:var(--muted);max-width:900px;margin:auto}
.footer{position:relative;isolation:isolate;min-height:420px;height:29.375vw;padding:3.125vw var(--gutter) 32px;color:#111}.footer-scene{background:url('/media/imgBg1.webp') center bottom/cover}.footer .sticker{width:clamp(52px,6.25vw,140px);height:clamp(52px,6.25vw,140px);opacity:1}.contact-row{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}.contact-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:clamp(12px,.8333vw,16px);padding-top:3px}.contact-links a{display:flex;align-items:center;gap:10px}.contact-links a:hover{text-decoration:underline}.phone-icon{width:12px;height:20px;border:1.5px solid;border-radius:3px;display:inline-block}.wechat{text-align:center}.wechat button{padding:20px;background:#ffffff80;border-radius:20px}.wechat img{width:9.375vw;height:9.375vw;min-width:110px;min-height:110px}.wechat figcaption{font-size:12px;opacity:.5;margin-top:16px}.footer-bottom{position:absolute;bottom:32px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}.credits{display:flex;gap:28px;font-size:clamp(10px,.625vw,12px)}.socials{display:flex;gap:12px;flex-wrap:wrap}.socials button{padding:10px 16px;border-radius:8px;background:#ffffff80;font-size:clamp(11px,.8333vw,16px)}
.section-nav{position:fixed;right:var(--gutter);top:40%;z-index:5;width:6.25vw;min-width:72px;display:flex;flex-direction:column;mix-blend-mode:multiply}.section-nav a{font-size:clamp(10px,.625vw,12px);text-align:right;padding:14px 0;color:#777;border-bottom:1px solid #00000015;white-space:nowrap}.section-nav .active{color:#111}.section-nav .active:before{content:'←';padding-right:6px}.dock{position:fixed;z-index:20;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(8px,1.04vw,20px);padding:10px 20px;background:#ffffffb3;backdrop-filter:blur(24px);border:1px solid #ffffff90;border-radius:26px;box-shadow:0 20px 40px #0000000f}.dock a,.dock button{position:relative;display:grid;place-items:center;width:clamp(38px,3.125vw,60px);height:clamp(38px,3.125vw,60px);padding:5px}.dock img{width:100%;height:100%;object-fit:contain;transition:transform .22s}.dock .dock-logo{width:60%;height:60%}.dock a:hover img,.dock button:not(:disabled):hover img{transform:translateY(-8px) scale(1.12)}.dock [data-label]:before{content:attr(data-label);position:absolute;bottom:calc(100% + 20px);left:50%;transform:translateX(-50%);background:#111;color:white;padding:6px 10px;font-size:12px;white-space:nowrap;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.dock [data-label]:hover:before,.dock [data-label]:focus-visible:before{opacity:1}.dock button:disabled img{opacity:.5}.dock-divider{width:1px;height:30px;background:#0002}.motion-toggle{position:fixed;bottom:24px;right:24px;z-index:21;background:var(--panel);backdrop-filter:blur(10px);border-radius:50%;width:36px;height:36px;box-shadow:0 2px 12px #0001;font-size:14px}.paused .sticker,.paused .sticker img{animation-play-state:paused!important}
dialog{width:min(1000px,92vw);max-height:90dvh;overflow:auto;border:0;border-radius:20px;padding:40px;background:var(--page);color:var(--ink)}dialog::backdrop{background:#0008;backdrop-filter:blur(8px)}.dialog-close{position:sticky;float:right;top:0;z-index:2;background:var(--panel);border-radius:50%;font-size:28px;width:40px;height:40px;line-height:1}.dialog-image{width:100%;max-height:65vh;object-fit:contain;border-radius:12px}.dialog-title{font-size:24px;margin:16px 0 8px}.dialog-text{font-size:16px;line-height:1.9;max-width:650px}.dialog-portrait{width:180px;height:180px;object-fit:cover;border-radius:12px;margin-bottom:24px}.gallery-list{display:grid;gap:32px}.gallery-list figure img{width:100%;border-radius:12px}.gallery-list figcaption{margin-top:12px;font-size:14px}
[data-mode=dark]{--page:#191b1b;--ink:#eee;--muted:#aaa;--panel:rgba(50,52,52,.8)}[data-mode=dark] .grid-surface{background-blend-mode:soft-light;background-color:#191b1b}[data-mode=dark] .skill-cloud li{background:#ffffff0c}[data-mode=dark] .brand-logo{filter:invert(1)}[data-mode=dark] .section-nav{mix-blend-mode:normal}[data-mode=dark] .section-nav a{color:#888}[data-mode=dark] .section-nav .active{color:#fff}[data-mode=dark] .dock{background:#252727cc;border-color:#ffffff25}[data-mode=dark] .dock-logo{filter:invert(1)}[data-mode=dark] .dock-divider{background:#fff3}
@media(min-width:2200px){.hero{max-height:none}.skills{max-height:none}}
@media(max-width:1100px){.header{gap:20px}.top-nav{gap:20px}.section-nav{display:none}.intro-copy{width:39%;bottom:7%}.quote{left:58%;width:36%}.hero{min-height:740px}.contact-links{gap:16px;max-width:65%}.footer-bottom{align-items:flex-start;bottom:90px}.credits{flex-direction:column;gap:8px}.socials{max-width:55%;justify-content:flex-end}.footer{min-height:450px}.work-caption{font-size:11px}}
@media(max-width:700px){:root{--gutter:24px}.header{height:76px;gap:12px}.wordmark{font-size:14px}.wordmark img{width:26px;height:26px}.top-nav{display:none}.theme-switch{margin-left:auto}.theme-switch button{padding:6px}.theme-switch img{width:18px;height:18px}.hero{height:auto;min-height:850px;padding:140px 24px 65px;display:flex;flex-direction:column;justify-content:space-between;gap:75px}.hero-scene{background-position:55% center}.quote{position:relative;left:auto;top:auto;width:72%;align-self:flex-end;font-size:14px;line-height:1.85}.intro-copy{position:relative;left:auto;bottom:auto;width:100%;max-width:450px}.eyebrow{padding:12px;font-size:12px;margin-bottom:24px}.intro-copy>p{font-size:23px;line-height:1.85;margin-bottom:24px}.split-button{font-size:13px}.split-button span{padding:14px}.sticker{width:64px;height:64px}.skills{height:610px;padding-top:80px}.portrait{right:24px;top:-40px;width:128px;height:128px;border-radius:10px}.skill-cloud li{padding:18px;font-size:24px;border-radius:30px}.skill-cloud li:nth-child(1){left:4%;top:20%}.skill-cloud li:nth-child(2){left:53%;top:30%}.skill-cloud li:nth-child(3){right:2%;top:47%;font-size:22px}.skill-cloud li:nth-child(4){left:1%;top:38%;font-size:23px}.skill-cloud li:nth-child(5){left:0;top:60%;font-size:22px}.skill-cloud li:nth-child(6){left:22%;top:72%}.skill-cloud li:nth-child(7){left:3%;top:86%;font-size:22px}.skill-cloud li:nth-child(8){right:1%;top:91%;font-size:21px}.skill-cloud li:nth-child(9){left:2%;top:9%;font-size:22px}.skill-cloud li:nth-child(10){left:12%;top:54%;font-size:22px}.works{padding-top:70px;padding-bottom:64px}.works-grid{height:auto;display:flex;flex-direction:column;gap:42px}.work{position:static;width:100%}.work:nth-child(2),.work:nth-child(3){width:88%;align-self:flex-end}.work-caption{font-size:12px;margin-top:12px;gap:10px}.work-caption span:first-child{max-width:76%}.work-image{border-radius:10px}.more-work{position:static;text-align:right;margin-top:12px}.more-work p{font-size:16px;margin-bottom:14px}.brands{margin:0 12px;padding:24px 20px 28px}.brand-grid{grid-template-columns:repeat(3,1fr);gap:26px 20px;margin:30px 4px}.brand-cell{height:70px}.brand-note{font-size:10px;line-height:1.8;text-align:left}.footer{height:auto;min-height:600px;padding:40px 24px 110px}.contact-row{gap:25px;align-items:flex-start}.contact-links{max-width:60%;display:flex;flex-direction:column;align-items:flex-start;gap:18px;font-size:12px}.contact-links a{gap:6px;overflow-wrap:anywhere}.contact-links img{width:16px;height:16px}.wechat button{padding:10px;border-radius:14px}.wechat img{min-width:85px;min-height:85px;width:85px;height:85px}.wechat figcaption{font-size:10px;margin-top:10px}.footer-bottom{position:relative;inset:auto;flex-direction:column-reverse;gap:32px;margin-top:150px}.socials{max-width:100%;justify-content:flex-start;gap:8px}.socials button{font-size:11px;padding:9px 12px}.credits{font-size:10px;gap:8px}.dock{padding:8px 12px;gap:10px;bottom:14px;border-radius:23px}.dock a,.dock button{width:38px;height:38px}.motion-toggle{right:12px;bottom:26px;width:28px;height:28px;font-size:12px}.dock-divider{height:26px}.dialog-title{font-size:20px}dialog{padding:22px}.dialog-close{width:32px;height:32px}.dialog-text{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-play-state:paused!important;transition:none!important}}
/* Keep falling artwork readable around copy and contact details. */
.hero-scene .stickers{mask-image:linear-gradient(90deg,#0002 0 35%,#000 46%),linear-gradient(180deg,#000 0 28%,transparent 48%);mask-composite:add}
.footer-scene .stickers{mask-image:linear-gradient(180deg,transparent,#000 42%)}
@media(max-width:700px){.hero-scene .stickers{mask-image:linear-gradient(180deg,#000 0 28%,#0002 48%);mask-composite:add}}
@media(max-width:370px){.motion-toggle{bottom:86px}}
/* Review pass: connected buttons, proportionate Dock, consistent mobile projects. */
.split-button{align-items:stretch;gap:0;overflow:hidden;border-radius:12px}
.split-button>span:last-child{width:48px;min-width:48px;border-left:1px solid #ffffff50;border-radius:0;padding-left:0;padding-right:0;display:grid;place-items:center;transition:width .25s ease}
.split-button>span:first-child{border-radius:0}
.split-button .button-arrow i{display:block;font-style:normal;transition:transform .25s ease}
.split-button:hover>span:last-child,.split-button:focus-visible>span:last-child{transform:none;width:66px}
.split-button:hover .button-arrow i,.split-button:focus-visible .button-arrow i{transform:translateX(5px)}
.dock button img{width:72%;height:72%}
.email-group{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;white-space:nowrap}
.email-group>a:last-child{border-left:1px solid #1114;padding-left:12px}
.skill-cloud{position:absolute;inset:0;perspective:1100px;transform-style:preserve-3d;overflow:clip}
.skill-cloud li{will-change:transform,opacity;backface-visibility:hidden;outline-offset:-3px;cursor:default}
.skill-cloud li:focus-visible{outline:1px solid #1115}
@media(max-width:700px){
 .work:nth-child(2),.work:nth-child(3){width:100%;align-self:stretch}
 .contact-row{flex-direction:column;gap:24px}
 .contact-links{max-width:none;width:100%;align-items:flex-start}
 .email-group{gap:8px;font-size:clamp(10.5px,2.7vw,12px)}
 .email-group>a:last-child{padding-left:8px}
 .email-group a{white-space:nowrap;overflow-wrap:normal}
 .email-group img{width:14px;height:14px}
 .wechat{align-self:flex-end}
 .footer-bottom{margin-top:85px}
}
.hero-scene{background:radial-gradient(ellipse at 20% 15%,#fff 0%,transparent 48%),radial-gradient(ellipse at 80% 20%,#39baa9 0%,transparent 58%),radial-gradient(ellipse at 65% 75%,#00ffcd 0%,transparent 52%),radial-gradient(ellipse at 15% 85%,#fd5b5a 0%,transparent 48%),linear-gradient(135deg,#f4ca49,#556373)}
/* Second review pass. */
.skill-cloud{perspective:none;transform-style:flat}
.skill-cloud li{transform-origin:50% 50%}
.sticker-push{display:block;width:100%;height:100%;will-change:transform}
.pixel-cursor{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.work-image{position:relative}
.cover-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.work-title{display:inline-flex;align-items:baseline;gap:8px;transition:transform .22s ease}
.work-title-arrow{font-style:normal;opacity:0;transform:translateX(-5px);transition:opacity .18s ease,transform .22s ease}
.work:hover .work-title,.work:focus-visible .work-title{transform:translateX(6px)}
.work:hover .work-title-arrow,.work:focus-visible .work-title-arrow{opacity:1;transform:translateX(0)}
.dock{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,24px);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.dock.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
@media(max-width:700px){.brand-logo{scale:.76}.wechat{align-self:flex-start;text-align:left}.wechat figcaption{text-align:left}.skill-cloud li{font-size:22px}}
/* Third visual review */
.work-image img{object-position:var(--cover-x,50%) var(--cover-y,50%);transform:scale(var(--cover-zoom,1));transform-origin:var(--cover-x,50%) var(--cover-y,50%)}
.work:hover .work-image img,.work:focus-visible .work-image img{transform:scale(var(--cover-zoom,1))}
.sticker,.footer .sticker{width:calc(clamp(54px,6.25vw,140px)*var(--sticker-w,1));height:calc(clamp(54px,6.25vw,140px)*var(--sticker-h,1))}
.fluid-scene-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.fluid-ready .fluid-scene-canvas{opacity:1}
.fluid-ready>.glass-canvas,.fluid-ready>.stickers,.fluid-ready>.glass-fallback{opacity:0}
.top-nav a,.top-nav button{font-weight:400}
.top-nav .nav-icon{width:20px;height:20px;overflow:visible}
.top-nav .nav-icon [stroke]{stroke-width:1.2;transition:stroke-width .18s}
.top-nav .outlined-fill{stroke:currentColor;stroke-width:0;transition:stroke-width .18s}
.top-nav a[aria-current],.top-nav a:hover,.top-nav button:not(:disabled):hover,.top-nav :focus-visible{font-weight:700;opacity:1}
.top-nav :is([aria-current],:hover,:focus-visible) .nav-icon [stroke]{stroke-width:2}
.top-nav :is([aria-current],:hover,:focus-visible) .outlined-fill{stroke-width:.8}
@media(max-width:700px){.skills{height:650px}.skill-cloud li{padding:16px 17px;font-size:20px}.skill-cloud li:nth-child(n){font-size:20px}}
/* Fourth visual review: distributed labels and a continuous closing background. */
.more-work{left:55.4%;right:auto;text-align:left}
.brands{position:relative}
.footer-scene{top:calc(-1 * var(--footer-rise,400px));mask-image:linear-gradient(to bottom,transparent,#000 32%,#000);background-color:#dedddd}
.footer-scene .stickers{top:var(--footer-rise,400px)}
.hero,.hero-scene{background:#efefef}
.hero-scene{background-image:none}
.hero-scene.fluid-ready>.glass-canvas.ready{opacity:1}
.hero-scene .glass-fallback{background:repeating-linear-gradient(121deg,#efefef 0,#fafafa 65px,#e6e6e6 110px,#efefef 130px);backdrop-filter:none}
@media(max-width:700px){.more-work{left:auto;align-self:flex-start;text-align:left}}
/* Restore the original flowing colour field; keep the current hero layout. */
.hero-scene{background:radial-gradient(ellipse at 80% 30%,#39baa9,transparent 55%),radial-gradient(ellipse at 25% 80%,#fd5b5a,transparent 60%),linear-gradient(115deg,#fff,#f4ca49 45%,#00ffcd 75%,#556373)}
.hero-scene .glass-fallback{background:repeating-linear-gradient(90deg,#ffffff25 0px,#ffffff08 9px,#35312f15 14px,#ffffff35 23px,#29242420 27px)}
.brand-logo{scale:.72;max-width:220px}
@media(max-width:700px){.brand-logo{scale:.65}}
.hero-scene.fluid-ready>.glass-canvas.ready{opacity:0}

/* Colorful base under the retained inclined glass and red pointer flow. */
.hero-scene.fluid-ready>.glass-canvas.ready{opacity:1}
.contact-icon{display:inline-block;width:24px;height:24px;flex:0 0 24px}
.mail-icon{position:relative}
.contact-links .mail-icon img{position:absolute;left:1.25px;top:3.25px;width:21.5px;height:17.5px;max-width:none;object-fit:contain}
.credits{font-size:16px;line-height:1;gap:40px;flex-wrap:wrap}
@media(max-width:1100px){.credits{gap:12px;line-height:1.5}}
/* Figma design navigation icon uses a 24px frame (home uses 20px). */
.top-nav a[href="/works"] .nav-icon{width:24px;height:24px;flex:0 0 24px}

/* Keep footer content above the fixed 82px Dock and its bottom offset. */
.home-page .footer{display:flex;flex-direction:column;height:auto;min-height:calc(29.375vw + 120px);padding-bottom:140px}
.home-page .footer-bottom{position:relative;inset:auto;margin-top:auto;padding-top:70px;flex-shrink:0}
.socials a{padding:10px 16px;border-radius:8px;background:#ffffff80;color:inherit;font-size:clamp(11px,.8333vw,16px);text-decoration:none}.socials a:hover{text-decoration:underline}
.works-page .socials a{font-size:14px}@media(max-width:700px){.socials a{font-size:11px;padding:9px 12px}.works-page .socials a{font-size:12px}}
@media(max-width:700px){.home-page .footer{min-height:0;padding-bottom:110px}.home-page .footer-bottom{margin-top:0;padding-top:70px}}

/* Startup fallback is only the colour field, never the retired vertical glass. */
.hero-scene .glass-fallback{display:none;background:none;backdrop-filter:none}
.hero-scene>.glass-canvas{transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.hero-scene>.glass-canvas{transition:none}}

/* Local 3D label depth must never compete with fixed navigation. */
.skills{isolation:isolate;z-index:0}

/* RGB-displaced portraits with a feathered, pointer-led original-colour reveal. */
.portrait-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.portrait-effect{display:block;overflow:hidden;isolation:isolate;box-sizing:border-box;flex:none;--reveal-x:50%;--reveal-y:50%;--reveal-size:clamp(72px,8vw,132px)}
.about-portrait.portrait-effect{position:relative}
.split-button,.hero .split-button{font-size:16px}
.portrait-effect>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit;pointer-events:none}
.portrait-effect-base{filter:url('#xcwu-chromatic-portrait')}
.portrait-effect-reveal{opacity:0;transition:opacity .22s ease;will-change:mask-image;-webkit-mask-image:radial-gradient(circle var(--reveal-size) at var(--reveal-x) var(--reveal-y),#000 0 48%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.48) 74%,transparent 100%);mask-image:radial-gradient(circle var(--reveal-size) at var(--reveal-x) var(--reveal-y),#000 0 48%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.48) 74%,transparent 100%)}
.portrait-effect.is-revealing .portrait-effect-reveal{opacity:1}
@media(max-width:700px){.portrait-effect{--reveal-size:78px}}

/* Mobile skill labels use a compact two-column field; footer navigation type is shared site-wide. */
.footer .contact-links,.footer .email-group,.footer .credits,.footer .socials :is(a,button){font-size:16px}
@media(max-width:700px){
 .footer .contact-links,.footer .email-group,.footer .credits,.footer .socials :is(a,button){font-size:16px}
}

/* Shared liquid-glass material for floating controls and translucent surfaces. */
:root{
 --liquid-glass:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.22) 48%,rgba(255,255,255,.38));
 --liquid-glass-border:rgba(255,255,255,.72);
 --liquid-glass-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.24),0 10px 30px rgba(39,47,56,.10);
}
.theme-switch,.skill-cloud li,.brands,.socials :is(a,button),.dock,.wechat button{
 background:var(--liquid-glass);
 border:1px solid var(--liquid-glass-border);
 box-shadow:var(--liquid-glass-shadow);
 -webkit-backdrop-filter:blur(22px) saturate(155%) contrast(1.04);
 backdrop-filter:blur(22px) saturate(155%) contrast(1.04);
}
.theme-switch{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.28),0 6px 20px rgba(39,47,56,.09)}
.theme-switch button[aria-pressed=true]{background:rgba(255,255,255,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(39,47,56,.08)}
.skill-cloud li{box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.22),0 12px 28px rgba(39,47,56,.08)}
.brands{background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.16) 50%,rgba(255,255,255,.32))}
.socials :is(a,button),.wechat button{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.22))}
.dock{background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.32) 55%,rgba(255,255,255,.50));box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(255,255,255,.25),0 18px 42px rgba(39,47,56,.16)}
.brands,.socials :is(a,button),.wechat button{box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.22)}