:root{--white:#fff;--black:#101010;--red:#e4002b;--line:#c9c9c9;--pad:clamp(16px,2.1vw,36px);color:var(--black);background:var(--white);font-family:Helvetica Neue,Helvetica,Arial,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html{scroll-behavior:auto;width:100%;height:100%;overflow:hidden}body{background:var(--white);overscroll-behavior:none;width:100%;height:100%;margin:0;overflow:hidden}body.intro-running{cursor:progress}body.intro-running>#app{visibility:hidden}body.intro-running.intro-handoff>#app{visibility:visible}.stack-intro{z-index:1000;pointer-events:auto;background:var(--white);position:fixed;inset:0;overflow:hidden}.stack-intro.is-playing{pointer-events:none}.stack-intro-gate{z-index:100;color:var(--black);background:var(--white);text-align:center;place-content:center;place-items:center;gap:clamp(14px,2vh,24px);padding:24px;display:grid;position:absolute;inset:0}.stack-intro-logo{color:inherit;letter-spacing:-.06em;white-space:nowrap;will-change:transform;margin:0;font-size:clamp(26px,5.5vw,87px);font-weight:700;line-height:.9}.stack-intro-start{cursor:pointer;width:auto;color:inherit;text-align:center;will-change:transform;background:0 0;border:0;outline:none;margin:0;padding:0;display:block}.stack-intro-start>span{letter-spacing:-.045em;white-space:nowrap;font-size:clamp(16px,2.4vw,41px);font-weight:600;line-height:1}.stack-intro-card{will-change:transform,opacity;backface-visibility:hidden;transform-origin:50%;background:#f7f7f8;position:absolute;top:0;left:0;overflow:hidden}.stack-intro-card img{object-fit:contain;will-change:filter;background:#f7f7f8;width:100%;height:100%;display:block}#app,main{width:100%;height:100%;overflow:hidden}button,a{color:inherit;font:inherit}button{background:0 0;border:0}.topbar{z-index:20;width:100%;height:60px;padding:0 var(--pad);mix-blend-mode:difference;color:#fff;text-transform:uppercase;border-bottom:1px solid #1010104d;grid-template-columns:1fr auto 1fr;align-items:center;font-size:12px;display:grid;position:fixed;top:0;left:0}.brand{width:max-content;color:inherit;letter-spacing:-.04em;font-size:17px;font-weight:700;text-decoration:none}.brand sup{color:var(--red);vertical-align:top;font-size:8px}.clock{font-variant-numeric:tabular-nums;gap:14px;margin:0;display:flex}.sound{cursor:pointer;text-transform:uppercase;border:1px solid;justify-self:end;align-items:center;gap:7px;padding:7px 10px;font-size:13px;font-weight:600;line-height:1;transition:opacity .2s,transform .2s;display:inline-flex}.sound:hover,.sound:focus-visible{opacity:.72;transform:scale(1.035)}.sound-icon{fill:currentColor;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:16px;height:16px}.sound-icon path{fill:none}.intro{min-height:100svh;padding:0 var(--pad) var(--pad);grid-template-rows:90px 1fr auto;grid-template-columns:repeat(12,1fr);display:grid;overflow:hidden}.eyebrow{text-transform:uppercase;grid-column:1/4;align-self:end;margin:0 0 18px;font-size:12px}.intro h1{letter-spacing:-.085em;text-transform:uppercase;grid-column:1/-1;align-self:center;margin:0;font-size:clamp(76px,15.8vw,300px);font-weight:600;line-height:.72}.intro h1 span{display:block;overflow:hidden}.intro h1 span:nth-child(2){padding-left:16.5vw}.intro h1 span:nth-child(3){text-align:right}.intro-copy{grid-column:7/11;margin:0;font-size:clamp(14px,1.2vw,20px);line-height:1.3}.scroll-note{text-transform:uppercase;grid-column:11/-1;place-self:end;margin:0;font-size:11px}.index-head{padding:16vh var(--pad) 18px;border-bottom:1px solid var(--black);justify-content:space-between;align-items:end;display:flex}.index-head h2{letter-spacing:-.07em;text-transform:uppercase;margin:0;font-size:clamp(70px,12vw,220px);line-height:.75}.index-head p{text-transform:uppercase;margin:0;font-size:12px}.work-selector{background:var(--white);height:100svh;position:relative}.work-selector-stage{width:100%;height:100svh;padding:72px var(--pad) 26px;background:var(--white);position:relative;overflow:hidden}.frame-brackets{z-index:3;pointer-events:none;position:absolute;inset:0}.frame-bracket{width:clamp(58px,6.2vw,120px);height:clamp(150px,23vh,250px);fill:var(--black);position:absolute;top:50%;transform:translateY(-50%)}.frame-bracket-left{left:calc(50% - 18.5vw)}.frame-bracket-right{right:calc(50% - 18.5vw)}.selector-rail{z-index:6;pointer-events:none;position:absolute;inset:0}.selector-label,.selector-count,.selector-hint{text-transform:uppercase;font-variant-numeric:tabular-nums;margin:0;font-size:11px}.selector-label{top:88px;left:var(--pad);position:absolute}.selector-count{bottom:30px;left:var(--pad);position:absolute}.selector-names{top:50%;left:var(--pad);flex-direction:column;gap:12px;display:flex;position:absolute;transform:translateY(-50%)}.selector-name{cursor:pointer;pointer-events:auto;color:#a6a6a6;white-space:nowrap;text-align:left;justify-content:flex-start;align-items:flex-start;transition:color .3s;display:flex}.selector-name .selector-number{display:none}.selector-name strong{letter-spacing:-.04em;white-space:nowrap;justify-content:space-between;align-items:baseline;width:clamp(340px,28vw,520px);font-size:clamp(16px,1.35vw,24px);font-weight:500;line-height:1;display:flex}.selector-name strong span{display:inline-block}.selector-name.is-active{color:var(--black)}.selector-visual{z-index:2;background:var(--white);width:100%;height:100%;position:relative;overflow:hidden}.project{pointer-events:none;position:absolute;inset:0}.project.is-active{pointer-events:auto}.project-open{text-align:left;cursor:pointer;justify-content:center;align-items:center;width:100%;height:100%;padding:4vh 3vw 8vh;display:flex}.project-image-wrap{background:#f7f7f8;max-width:16vw;max-height:42vh;display:inline-block;position:relative;overflow:hidden}.project-image-wrap img{object-fit:contain;filter:grayscale();will-change:transform,filter;width:auto;max-width:16vw;height:auto;max-height:42vh;display:block}.project.is-active .project-image-wrap img{filter:grayscale(0%)}.project-meta{z-index:4;opacity:0;text-transform:uppercase;grid-template-columns:auto auto;align-items:end;gap:24px;font-size:11px;transition:opacity .15s;display:grid;position:absolute;top:calc(50% + 14.5vh);left:50%;transform:translate(-50%)}.project.is-active .project-meta{opacity:1}.project-meta strong{letter-spacing:-.03em;text-transform:none;font-size:15px;font-weight:500;line-height:1;display:none}.selector-hint{z-index:7;right:var(--pad);color:var(--black);pointer-events:none;position:absolute;bottom:30px}.portfolio-contact{z-index:8;height:clamp(68px,9vh,80px);padding:7px var(--pad);background:#fff;border-top:1px solid #1010104d;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:clamp(10px,1.1vw,18px);display:grid;position:absolute;bottom:0;left:0;right:0}.portfolio-contact span,.portfolio-contact figcaption{color:#767676;text-transform:uppercase;font-size:9px;line-height:1}.portfolio-contact strong{letter-spacing:-.035em;white-space:nowrap;margin-top:5px;font-size:clamp(13px,1vw,17px);font-weight:500;line-height:1;display:block}.portfolio-contact-name{grid-column:1/5}.portfolio-contact-phone{grid-column:5/8}.portfolio-contact-email{grid-column:8/11}.portfolio-contact-phone,.portfolio-contact-email{color:inherit;font-variant-numeric:tabular-nums;text-decoration:none}.portfolio-contact-phone:hover strong,.portfolio-contact-phone:focus-visible strong,.portfolio-contact-email:hover strong,.portfolio-contact-email:focus-visible strong{text-underline-offset:4px;text-decoration:underline}.portfolio-contact-wechat{grid-column:11/-1;justify-self:end;align-items:center;gap:clamp(8px,.8vw,14px);margin:0;display:flex}.portfolio-contact-wechat img{aspect-ratio:1;object-fit:contain;background:#fff;width:clamp(48px,4.5vw,60px);height:auto;display:block}.selector-count,.selector-hint{bottom:calc(clamp(68px,9vh,80px) + 14px)}footer{padding:20vh var(--pad) 30px;text-transform:uppercase;justify-content:space-between;font-size:12px;display:flex}.case{z-index:100;background:var(--white);will-change:transform;width:100%;height:100%;min-height:100vh;display:none;position:fixed;inset:0;overflow:hidden}.case.case-work2{color:var(--white);background:var(--black)}.case.case-work2 .case-bar{color:var(--white);background:#101010f0;border-bottom-color:#ffffff73}.case.case-work2 .case-hero{color:var(--white);background:var(--black)}.case.case-work2 .case-images{background:var(--black)}.case.case-work2 .case-images figure{margin-bottom:clamp(10px,1.25vw,20px);overflow:hidden}.case.case-work2 .case-images figure:last-child{margin-bottom:0}.case.case-work2 .case-image-frame,.case.case-work2 .case-images img{background:#fff}.case.case-work2 .case-image-frame{clip-path:inset(100% 0 0)}.case.case-work2 .case-images img{width:100%;transform:scale(1.012)}.case.case-work2 .case-images figcaption{color:#fff;background:#000000b8;bottom:10px;right:12px}.case.case-work2 .case-end{color:var(--white)}body.case-open>#app>.topbar,body.case-open main{visibility:hidden}.case-bar{z-index:5;height:60px;padding:0 var(--pad);border-bottom:1px solid var(--black);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-transform:uppercase;background:#fffffff0;justify-content:space-between;align-items:center;font-size:12px;display:flex;position:sticky;top:0}.case-close{cursor:pointer;text-transform:uppercase;border:1px solid;padding:7px 10px;font-size:14px;font-weight:600;line-height:1;transition:opacity .2s,transform .2s}.case-close:hover,.case-close:focus-visible{opacity:.65;transform:scale(1.035)}.case-end{cursor:pointer;text-underline-offset:4px;text-decoration:underline}.case-hero{z-index:3;width:31vw;padding:clamp(28px,5vh,72px) var(--pad) var(--pad);background:var(--white);border-right:0;flex-direction:column;justify-content:space-between;align-items:flex-start;display:flex;position:fixed;top:60px;bottom:0;left:0;overflow:hidden}.case-hero p{text-transform:uppercase;margin:0 0 12px;font-size:12px}.case-title{letter-spacing:-.065em;overflow-wrap:anywhere;max-width:100%;margin:0;font-size:clamp(42px,5.7vw,108px);font-weight:600;line-height:.82}.case-images{background:var(--white);width:69vw;margin-left:31vw;padding:0;overflow:hidden}.case-images figure{width:100%;margin:0;padding:0;position:relative}.case-images .layout-left{grid-column:1/7}.case-images .layout-right{grid-column:6/-1}.case-images .layout-center{grid-column:3/11}.case-images .layout-left-wide{grid-column:1/10}.case-images .layout-right-small{grid-column:8/-1}.case-image-frame{clip-path:inset(3% 0 3% 26%);background:#f7f7f8;width:100%;position:relative;overflow:hidden}.case-images img{background:#f7f7f8;width:100%;height:auto;display:block}.case-images figcaption{z-index:2;color:#fff;font-variant-numeric:tabular-nums;opacity:.4;background:#00000073;padding:4px 6px;font-size:10px;line-height:1;position:absolute;bottom:8px;right:10px}.case-end{margin:10vh auto 14vh;font-size:clamp(30px,5vw,80px);display:block}@media (width<=720px){.topbar{grid-template-columns:1fr auto}.clock{display:none}.work-selector{height:auto;padding:76px 12px 48px}.work-selector-stage{height:auto;padding:0;overflow:visible}.frame-brackets,.selector-rail,.selector-hint{display:none}.selector-visual{height:auto;overflow:visible}.project{margin-bottom:72px;pointer-events:auto!important;position:relative!important;inset:auto!important;transform:none!important}.project-open{height:auto;padding:0;display:block}.project-image-wrap{max-width:none;max-height:none;display:block}.project-image-wrap img{width:100%;max-width:none;max-height:none;filter:none!important}.project-meta{opacity:1;grid-template-columns:1fr auto auto;padding-top:12px;display:grid;position:static;transform:none}.project-meta strong{font-size:24px;display:block}.case-hero{min-height:55vh}.case-images{gap:72px 12px;padding:12px}.case-images .layout-left,.case-images .layout-right,.case-images .layout-center,.case-images .layout-left-wide{grid-column:1/-1}.case-images .layout-right-small{grid-column:4/-1}.portfolio-contact{border-bottom:1px solid #1010104d;grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) auto 52px;gap:5px 8px;width:100%;height:auto;min-height:76px;margin-top:8px;padding:7px 0;position:relative;bottom:auto;left:auto;right:auto}.portfolio-contact-name{grid-area:1/1}.portfolio-contact-phone{grid-area:1/2}.portfolio-contact-email{grid-area:2/1/auto/3}.portfolio-contact-wechat{grid-area:1/3/3;gap:0}.portfolio-contact-wechat figcaption{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.portfolio-contact-wechat img{width:52px}.portfolio-contact strong{margin-top:4px;font-size:12px}.portfolio-contact-name strong{font-size:14px}.portfolio-contact-email strong{font-size:11px}.case-hero{border-right:0;border-bottom:1px solid var(--black);width:100%;min-height:48vh;position:relative;top:auto;bottom:auto}.case-images{width:100%;margin-left:0}.case-image-frame{clip-path:none!important;transform:none!important}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.case,.case.case-work2{color:var(--black);background:var(--white)}.case .case-bar,.case.case-work2 .case-bar{color:var(--black);background:#fffffff0;border-bottom-color:#1010104d}.case-hero{display:none}.case-images,.case.case-work2 .case-images{z-index:1;background:var(--white);width:100%;height:calc(100svh - 60px);margin:0;padding:0;position:fixed;inset:60px 0 0;overflow:hidden}.case-images-track{will-change:transform;width:min(66vw,1120px);margin:0 auto}.case-images-set{width:100%}.case-images .case-figure,.case.case-work2 .case-images figure{width:100%;margin:0 0 clamp(7px,.625vw,12px);padding:0;overflow:hidden}.case-images .case-image-frame,.case.case-work2 .case-image-frame{background:var(--white);width:100%;overflow:hidden;clip-path:none!important;transform:none!important}.case-images .case-image-frame img,.case.case-work2 .case-images img{background:var(--white);width:100%;height:auto;margin:0;display:block;transform:none!important}.case-images figcaption,.case-end{display:none}.case-reel-end{cursor:pointer;width:100%;min-height:52svh;color:var(--black);background:var(--white);text-align:left;grid-template-rows:auto auto;grid-template-columns:1fr auto;align-content:center;align-items:end;gap:12px 24px;padding:clamp(28px,4vw,64px);display:grid;position:relative;overflow:hidden}.case-reel-end-note{letter-spacing:.08em;grid-area:1/1;justify-self:start;margin:0;padding:0;font-size:11px;line-height:1}.case-reel-end-main{letter-spacing:-.065em;white-space:nowrap;grid-area:2/1;justify-self:start;margin:0;padding:0;font-size:clamp(48px,7.2vw,122px);font-weight:600;line-height:.78}.case-reel-end-arrow{border:0;border-radius:0;grid-area:1/2/3;width:clamp(82px,9vw,144px);height:auto;padding:0;transition:transform .35s cubic-bezier(.22,1,.36,1);overflow:visible}.case-reel-end-arrow path{fill:currentColor;stroke:none}.case-reel-end:hover .case-reel-end-arrow,.case-reel-end:focus-visible .case-reel-end-arrow{transform:translate(-14px)}.case-images-track{backface-visibility:hidden}.project-meta,.selector-hint{display:none!important}.case.case-masonry-view .case-images{background:#f7f7f8}.case.case-masonry-view .case-images-track{width:100%;padding:clamp(14px,2.1vw,36px)}.case.case-masonry-view .case-masonry{grid-template-columns:repeat(var(--masonry-columns),minmax(0,1fr));will-change:auto;align-items:start;gap:clamp(8px,.75vw,14px);display:grid}.case.case-masonry-view .case-masonry-column{min-width:0;overflow:hidden}.case.case-masonry-view .case-masonry-column-track{will-change:transform;backface-visibility:hidden}.case.case-masonry-view .case-masonry-column-set{flex-direction:column;gap:clamp(8px,.75vw,14px);display:flex}.case.case-masonry-view .case-masonry-column-copy{padding-top:clamp(8px,.75vw,14px)}.case.case-masonry-view .case-images .case-figure{width:100%;margin:0}.case.case-masonry-view .case-image-frame{text-align:left;background:#fff;border:0;border-radius:clamp(8px,.7vw,14px);padding:0;display:block;overflow:hidden}.case.case-masonry-view .case-image-open{cursor:zoom-in}.case.case-masonry-view .case-image-open:focus-visible{outline:2px solid var(--black);outline-offset:3px}.case.case-masonry-view .case-image-frame img{filter:grayscale(0);opacity:1;transition:filter .25s,opacity .25s}.case.case-masonry-view .case-images:has(img:hover) img:not(:hover){filter:grayscale();opacity:.46}.case.case-work6{color:#fff;background:#000}.case.case-work6 .case-bar{color:#fff;background:#000000d1;border:0}.case.case-work6 .case-close,.case.case-work6 .case-hero,.case.case-work6 .case-images{box-shadow:none;outline:0;border:0!important}.case.case-work6 .case-images,.case.case-work6 .case-image-frame,.case.case-work6 .case-images img,.case.case-work6 .case-reel-end{background:#000}.case.case-work6 .case-reel-end{color:#fff}.case-lightbox{z-index:30;visibility:hidden;cursor:zoom-out;display:none;position:fixed;inset:0;overflow:hidden}.case-lightbox-backdrop{will-change:opacity;background:#f7f7f8;position:absolute;inset:0}.case-lightbox-bar{z-index:2;width:100%;height:60px;padding:0 var(--pad);font-variant-numeric:tabular-nums;will-change:transform,opacity;background:#fff;border-bottom:1px solid #1010104d;justify-content:space-between;align-items:center;font-size:12px;display:flex;position:absolute;top:0;left:0}.case-lightbox-count{margin:0}.case-lightbox-close{cursor:pointer;text-transform:uppercase;border:1px solid;padding:7px 10px;font-size:14px;font-weight:600;line-height:1;transition:opacity .2s,transform .2s}.case-lightbox-close:hover,.case-lightbox-close:focus-visible{opacity:.65;transform:scale(1.035)}.case-lightbox-stage{z-index:1;pointer-events:none;place-items:center;padding:clamp(16px,2.1vw,36px);display:grid;position:absolute;inset:60px 0 0}.case-lightbox-image{object-fit:contain;pointer-events:auto;will-change:transform,opacity;backface-visibility:hidden;background:#fff;width:auto;max-width:calc(100vw - clamp(32px,4.2vw,72px));height:auto;max-height:calc(100svh - 60px - clamp(32px,4.2vw,72px));display:block}@media (width<=720px){.case.case-masonry-view .case-images-track,.case-lightbox-stage{padding:10px}html,body{scrollbar-width:none;height:auto;min-height:100%;overflow:hidden auto}body::-webkit-scrollbar{display:none}#app,main{height:auto;min-height:100%;overflow:visible}body.case-open{height:100%;overflow:hidden}:root{--mobile-bar-height:calc(56px + env(safe-area-inset-top));--mobile-pad:max(16px,env(safe-area-inset-left))}.topbar{height:var(--mobile-bar-height);padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 var(--mobile-pad);grid-template-columns:minmax(0,1fr) auto}.brand{font-size:16px}.sound{justify-content:center;min-width:44px;min-height:40px;padding:8px 10px;font-size:11px}.sound-icon{width:15px;height:15px}.work-selector{padding:calc(var(--mobile-bar-height) + 20px) var(--mobile-pad) max(36px,env(safe-area-inset-bottom))}.work-selector-stage{width:100%;padding:0}.selector-visual{display:block}.project{content-visibility:auto;contain-intrinsic-size:1px 560px;margin:0 0 clamp(48px,14vw,76px)}.project-open{width:100%;min-height:44px}.project-image-wrap{background:#f7f7f8;width:100%}.project-image-wrap img{object-fit:contain;will-change:auto;width:100%;height:auto}.project-meta{opacity:1;width:100%;color:var(--black);text-align:left;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:12px 0 0;position:static;transform:none;display:grid!important}.project-meta strong{overflow-wrap:anywhere;grid-column:1/-1;font-size:clamp(23px,7.6vw,36px);line-height:.96;display:block}.project-meta span{font-size:10px;line-height:1.2}.project-meta span:last-child{text-align:right;font-variant-numeric:tabular-nums}.portfolio-contact{padding:10px 0 max(10px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto 52px;margin-top:0}.portfolio-contact-phone,.portfolio-contact-email{flex-direction:column;justify-content:center;min-height:32px;display:flex}footer{padding:44px var(--mobile-pad) max(24px,env(safe-area-inset-bottom));gap:16px}.case-bar{width:100%;height:var(--mobile-bar-height);padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 var(--mobile-pad);position:fixed;top:0;left:0}.case-close,.case-lightbox-close{min-width:64px;min-height:40px;padding:8px 10px}.case-images,.case.case-work2 .case-images{inset:var(--mobile-bar-height) 0 0;width:100%;height:calc(100svh - var(--mobile-bar-height));touch-action:none;overscroll-behavior:contain;cursor:grab;padding:0}.case-images:active{cursor:grabbing}.case.case-work6 .case-images,.case.case-work6 .case-images:active{cursor:default}.case-images-track{width:100%}.case-images .case-figure,.case.case-work2 .case-images figure{margin-bottom:6px}.case-reel-end{min-height:44svh;padding:28px var(--mobile-pad) max(28px,env(safe-area-inset-bottom));gap:10px 12px}.case-reel-end-main{white-space:normal;font-size:clamp(34px,11vw,52px);line-height:.86}.case-reel-end-arrow{width:clamp(56px,18vw,78px)}.case.case-masonry-view .case-images-track{padding:7px}.case.case-masonry-view .case-masonry,.case.case-masonry-view .case-masonry-column-set{gap:7px}.case.case-masonry-view .case-masonry-column-copy{padding-top:7px}.case.case-masonry-view .case-image-frame{border-radius:8px}.case-lightbox-bar{height:var(--mobile-bar-height);padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 var(--mobile-pad)}.case-lightbox-stage{inset:var(--mobile-bar-height) 0 0;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain;padding:10px}.case-lightbox-image{max-width:calc(100vw - 20px);max-height:calc(100svh - var(--mobile-bar-height) - 20px)}}@media (hover:none){.case.case-masonry-view .case-images:has(img:hover) img:not(:hover){filter:grayscale(0);opacity:1}}
