:root{--background:#f5f5f7;--blue:#4483f7;--ink:#414042;--muted:#8c8c8c;--scale:1}
*{box-sizing:border-box}body{margin:0;background:var(--background);font-family:"Helvetica Neue","PingFang SC",Arial,sans-serif;color:var(--ink)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:6px}button:hover{color:var(--blue)}[hidden]{display:none!important}.viewport{height:100svh;overflow:hidden;position:relative}.canvas{position:absolute;width:1512px;height:982px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center}header{position:absolute;inset:0 0 auto;height:76px;display:flex;align-items:center;padding:0 63px;gap:30px;background:rgba(255,255,255,.2);z-index:5;font-size:16px;font-weight:500}.brand{display:flex;align-items:center;gap:17px;color:var(--blue);width:209px;text-align:left;white-space:nowrap}.logo{display:block;position:relative;width:36px;height:23px;flex-shrink:0}.logo>span{position:absolute;left:4px;top:8px;font-size:6px;line-height:6px;font-weight:600;color:white}.logo img{display:block}nav{display:flex;gap:28px}nav button:first-child{width:67px;text-align:left}.contact{margin-left:auto;display:flex;align-items:center;gap:12px;min-height:44px}.guides{pointer-events:none}.guides img{position:absolute;display:block}.vertical{top:76px;transform-origin:0 0;transform:rotate(90deg)}.vertical.left{left:64px}.vertical.right{left:1450px}.horizontal{left:-3px;transform:rotate(180deg)}.horizontal.top{top:76px}.horizontal.bottom{top:925px}.cards{position:absolute;inset:76px 0 190px}.card{position:absolute;left:var(--x);top:271px;width:var(--width);height:323px;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .3s;transform:translateX(var(--spread,0px)) translateY(0) scale(var(--zoom,1));transform-origin:center}.card > img{display:block;position:absolute;top:2.03px;left:0;pointer-events:none}.card.active{transform:translateX(var(--spread,0px)) translateY(-141px) scale(var(--zoom,1))}.card:focus-visible{outline-offset:9px;border-radius:4px}.project-info{position:absolute;left:63px;top:830px;height:95px;display:flex;align-items:flex-start;gap:21px}.project-logo{width:116px;height:95px;position:relative;display:flex;align-items:center;justify-content:center}.project-logo.faces img{width:110px;height:92px;object-fit:cover;position:absolute;left:6px;top:3px}.project-logo.xianyu{width:116px}.project-logo.xianyu>span{position:absolute;width:87px;height:87px;left:16px;top:5px;overflow:hidden;border-radius:8px}.project-logo.xianyu img{position:absolute;width:116.42%;height:115.38%;left:-8.21%;top:-7.69%}.project-logo.motion>span{position:absolute;left:16px;top:5px;width:87px;height:87px;border-radius:8px;background:var(--blue);display:grid;place-items:center}.project-logo.motion img{transform:rotate(90deg)}.project-copy{width:420px;color:#000}h1,p{margin:0}h1{font-size:20px;line-height:24px;font-weight:700}.english{font-size:16px;line-height:19px;font-weight:500}.description{font-size:14px;line-height:24px;font-weight:500;color:var(--muted)}.tags{display:flex;gap:14px;position:absolute;top:79px}.tags span{height:16px;border:.5px solid var(--muted);border-radius:99px;min-width:55px;padding:0 10px;display:grid;place-items:center;color:var(--muted);font-size:10px}.controls{position:absolute;left:1266.25px;top:834.25px;width:179px;display:grid;gap:17.8px}.controls label{display:flex;align-items:center;gap:7px;height:18.2px}.controls img{flex-shrink:0}input[type=range]{appearance:none;-webkit-appearance:none;width:153px;height:20px;margin:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--muted);border-radius:99px}input[type=range]::-webkit-slider-thumb{appearance:none;width:8px;height:8px;background:url('assets/dot.svg') center/contain no-repeat;border:0;margin-top:-3px}input[type=range]::-moz-range-track{height:2px;background:var(--muted)}input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0;background:var(--blue)}.preview{position:absolute;inset:76px 64px 158px;z-index:4}.canvas:has(.preview:not([hidden])) .card{filter:blur(8px)}.canvas:has(.preview:not([hidden])) .card.active{opacity:0}.preview-image{position:absolute;left:441px;top:126px;width:501px;height:501px;border-radius:16px;overflow:hidden;background:var(--background);display:grid;place-items:center}.open-project{position:absolute;left:625px;top:654px;width:134px;height:48px;border:1px solid var(--blue);border-radius:99px;color:var(--blue);font-size:20px;font-weight:600}.open-project:hover{background:var(--blue);color:white}.close-preview{position:absolute;left:955px;top:91px;font-size:25px;color:var(--muted);width:40px;height:40px}dialog{border:1px solid #dce2ee;border-radius:16px;padding:42px;max-width:620px;width:calc(100% - 40px);background:var(--background);color:var(--ink)}dialog::backdrop{background:rgba(30,40,60,.15);backdrop-filter:blur(8px)}dialog h2{font-size:24px;margin:0 0 20px}.dialog-body{line-height:1.8}.close-dialog{position:absolute;right:18px;top:12px;font-size:26px}.dialog-body a{color:var(--blue)}
@media(max-width:600px){.viewport{height:100svh;min-height:650px}.canvas{width:100%;height:100%;left:0;top:0;transform:none}header{height:72px;padding:0 20px;gap:16px;font-size:12px;flex-wrap:wrap;align-content:center;row-gap:8px}.brand{width:auto;gap:10px}.logo{display:none}nav{gap:16px;margin-left:auto}nav button:first-child{width:auto}.contact{margin-left:0;font-size:12px;min-height:24px}.contact img{width:14px;height:14px}.guides{position:absolute;inset:72px 20px 24px;border:1px solid #86adff}.guides img{display:none}.cards{inset:110px 42px 230px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px 10px;align-content:center}.card{position:relative;left:auto;top:auto;width:100%;height:150px;transform:translateX(0) scale(calc(var(--zoom,1) * .45));transform-origin:left top}.card.active{transform:translateY(-24px) scale(calc(var(--zoom,1) * .45))}.project-info{left:30px;top:auto;bottom:120px;gap:10px;transform:scale(.78);transform-origin:left bottom}.project-copy{width:260px}.english{font-size:13px}.controls{left:auto;right:28px;top:auto;bottom:36px;gap:7px}.preview{inset:72px 21px 210px}.preview-image{left:5%;top:14%;width:90%;height:auto;aspect-ratio:1}.open-project{left:50%;top:auto;bottom:0;transform:translateX(-50%);width:110px;height:40px;font-size:16px}.close-preview{left:auto;right:0;top:0}.canvas:has(.preview:not([hidden])) .card{opacity:.25}dialog{padding:32px 24px}}
@media(min-width:601px){
  .canvas{height:var(--canvas-height,982px);left:0;top:0;transform:scale(var(--scale));transform-origin:top left}
  .vertical{transform:rotate(90deg) scaleX(var(--guide-stretch,1))}
  .horizontal.bottom{top:auto;bottom:56px}
  .card{top:var(--card-top,271px);transform:translateX(var(--spread,0px)) scale(calc(var(--zoom,1) * var(--card-scale,1)))}
  .card.active{transform:translateX(var(--spread,0px)) translateY(var(--card-lift,-141px)) scale(calc(var(--zoom,1) * var(--card-scale,1)))}
  .project-info{top:auto;bottom:57px}
  .controls{left:auto;right:66.75px;top:auto;bottom:57.55px}
  .preview-image{left:50%;top:var(--preview-top,126px);width:var(--preview-size,501px);height:var(--preview-size,501px);transform:translateX(-50%)}
  .open-project{left:50%;top:calc(var(--preview-top,126px) + var(--preview-size,501px) + 27px);transform:translateX(-50%)}
  .close-preview{left:calc(50% + var(--preview-size,501px)/2 - 8px);top:calc(var(--preview-top,126px) - 35px)}
}
.project-logo.mystery img{position:absolute;left:11px;top:31px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.cards{transform:rotate(calc(var(--group-rotation,0deg) + var(--intro-angle,0deg)));transform-origin:737.54px var(--group-origin-y,432.5px)}
@media(max-width:600px){.cards{transform-origin:50% 50%}}

/* Counter-rotation updates with the group, without the hover transition. */
.card{rotate:calc(0deg - var(--group-rotation,0deg) - var(--intro-angle,0deg))}

@property --intro-angle{syntax:"<angle>";inherits:true;initial-value:0deg}
.cards.is-entering{animation:gallery-arrive 1500ms cubic-bezier(.22,.72,.2,1) both}
.cards.is-entering .card{animation:card-arrive 850ms cubic-bezier(.2,.72,.24,1) both;animation-delay:calc(150ms + var(--card-index,0)*70ms)}
@keyframes gallery-arrive{0%{--intro-angle:48deg}75%{--intro-angle:-2deg}100%{--intro-angle:0deg}}
@keyframes card-arrive{0%{opacity:0;translate:0 320px;scale:.78}18%{opacity:1}72%{translate:0 -14px;scale:1.025}100%{opacity:1;translate:0 0;scale:1}}
@media(max-width:600px){@keyframes gallery-arrive{0%{--intro-angle:12deg}75%{--intro-angle:-1deg}100%{--intro-angle:0deg}}}
@media(prefers-reduced-motion:reduce){.cards.is-entering,.cards.is-entering .card{animation:none}}

/* Keep the square Figma compositions intact, then project them onto the card plane. */
.card-face{position:absolute;left:0;top:0;display:block;width:732px;height:732px;transform-origin:0 0;transform:matrix3d(.15847,.063297,0,-.000165589,0,.31694,0,0,0,0,1,0,0,2,0,1);pointer-events:none}
.card-face.wide{transform:matrix3d(.15967,.063297,0,-.000165589,0,.31694,0,0,0,0,1,0,0,2,0,1)}
.cover{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:white;border-radius:4px;pointer-events:none}
.cover img{display:block;position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none}
.cover img.cover-base{width:168.24%;height:254%;left:-34.02%;top:-63.36%}
.cover-layer{position:absolute;display:block;left:-16.666667%;top:0;width:133.333333%;height:100%;overflow:hidden}
.cover-mystery .cover-layer img{width:79.5%;height:106%;left:12.07%;top:-6.06%}
.cover-knowledge .cover-layer img{width:134%;height:100.38%;left:12.64%;top:-.07%}
.cover-motion .cover-layer img{width:100%;height:133.33%;left:2.79%;top:-16.67%}
.cover-motion .cover-layer-front img{width:92.25%;height:123%;left:6.66%;top:-11.5%}
.preview-image>.cover{border-radius:0}
.project-logo.knowledge>span{position:absolute;left:34px;top:-3px;width:66px;height:94px;overflow:hidden}
.project-logo.knowledge img{position:absolute;left:2.45%;top:3.19%;width:95.09%;height:93.62%;object-fit:fill}

/* Shared desktop rails keep the frame, navigation and footer content aligned. */
@media(min-width:601px){
  .canvas{--frame-inset:63px;--frame-bottom:40px;--header-height:76px}
  header{height:var(--header-height);padding-inline:var(--frame-inset)}
  .vertical{top:var(--header-height)}
  .horizontal.top{top:var(--header-height)}
  .cards{top:var(--header-height)}
  .vertical.left{left:calc(var(--frame-inset) + 1px)}
  .vertical.right{left:calc(1512px - var(--frame-inset) + 1px)}
  .horizontal.bottom{bottom:calc(var(--frame-bottom) - 1px)}
  .project-info{left:var(--frame-inset);bottom:var(--frame-bottom)}
  .controls{right:calc(var(--frame-inset) + 3.75px);bottom:calc(var(--frame-bottom) + .55px)}
  .preview{top:var(--header-height);left:calc(var(--frame-inset) + 1px);right:calc(var(--frame-inset) + 1px)}
}

.preview-image{overflow:visible;background:transparent}
.preview-surface{width:100%;height:100%;border-radius:16px;overflow:hidden;background:var(--background);transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-origin:center;will-change:transform}
.preview-surface>.cover{border-radius:0;transform:translate(var(--parallax-x,0px),var(--parallax-y,0px)) scale(var(--depth-scale,1));transform-origin:center;will-change:transform}
.preview-surface .cover-layer{translate:calc(var(--parallax-x,0px)*.3) calc(var(--parallax-y,0px)*.3)}
@media(prefers-reduced-motion:reduce){.preview-surface,.preview-surface>.cover{transform:none;will-change:auto}.preview-surface .cover-layer{translate:none}}

/* Works navigation: the established frame inset is shared with the three-column panel. */
header{gap:26px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
/* One continuous glass surface is shared by the header and its disclosure on every page. */
header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.4);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);pointer-events:none}
header:has(.works-menu:not([hidden]))::before{bottom:calc(-1 * var(--disclosure-height,189px))}
header .brand{color:var(--blue)}
.motion-page>header{--works-nav-color:var(--blue)}
.motion-page>header .brand{color:#000}
header nav{gap:58px;align-items:center}
header nav #works{width:94px;height:37px;border-radius:8px;display:flex;align-items:center;gap:12px;padding:0 13px;text-align:left;color:var(--works-nav-color,var(--ink))}
header nav #works:hover,header nav #works[aria-expanded=true]{background:transparent;color:var(--works-nav-color,var(--ink))}
.works-chevron{display:block;flex:none;transition:transform .18s ease}
#works[aria-expanded=true] .works-chevron{transform:rotate(180deg)}
.works-menu{position:absolute;left:0;right:0;top:var(--header-height,56px);height:189px;padding:3px var(--frame-inset,44px) 11px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:transparent}
.works-category h2{margin:0;font-size:16px;line-height:30px;font-weight:400;color:#000}
.works-list{margin:11px 13px 0 -13px;display:grid;grid-auto-rows:67px;gap:0}
.works-item{display:flex;align-items:flex-start;gap:18px;text-align:left;width:100%;min-height:67px;padding:10px 13px;border-radius:16px;background:transparent;box-shadow:inset 0 0 0 1pt transparent;transition:box-shadow .15s ease}
.works-item-icon{flex:none;position:relative;display:flex;align-items:center;justify-content:center;width:39px;height:39px;border:1px solid #dbdbdb;border-radius:12px;background:white;overflow:hidden}
.works-item-icon>img{display:block;flex:none}
.works-item-icon .menu-faces{width:25px;height:21px;object-fit:cover}
.menu-easyspend{position:relative;display:block;width:27px;height:21px}
.menu-easyspend img{position:absolute;left:0;top:0;transform:scale(.238);transform-origin:top left}
.menu-xianyu{position:absolute;inset:0;overflow:hidden;border-radius:12px}
.menu-xianyu img{position:absolute;left:-8.21%;top:-7.69%;width:116.42%;height:115.38%;object-fit:fill}
.menu-knowledge{position:relative;display:block;width:21px;height:30px;overflow:hidden}
.menu-knowledge img{position:absolute;left:2.45%;top:3.19%;width:95.09%;height:93.62%}
.menu-play{transform:rotate(90deg)}
.works-item-copy{display:flex;flex-direction:column;align-items:flex-start;font-family:"PingFang SC","Helvetica Neue",sans-serif;font-size:12px;line-height:24px;margin-top:-1px}
.works-item-title{font-weight:500;color:#000;white-space:nowrap}
.works-item-description{font-weight:400;color:#000;white-space:nowrap}
.works-item:hover,.works-item:focus-visible{background:transparent;box-shadow:inset 0 0 0 1pt var(--blue)}
.works-item:focus-visible{outline:none}
@media(min-width:601px){
  .canvas.works-open .horizontal.top{top:calc(var(--header-height) + 189px)}
  .canvas.works-open .vertical{top:calc(var(--header-height) + 189px)}
}
@media(max-width:600px){
  header{gap:16px;--header-height:72px;--frame-inset:20px}
  header nav{gap:12px}
  header nav #works{width:auto;height:30px;padding:0 6px;gap:6px}
  .works-menu{height:auto;max-height:calc(100svh - 100px);overflow:auto;grid-template-columns:1fr;gap:20px;padding:16px 20px 24px}
  .works-category h2{font-size:13px;line-height:22px}
  .works-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(51px,auto);margin:6px -6px 0;gap:4px 8px}
  .works-item{min-height:51px;padding:6px;gap:9px;border-radius:12px}
  .works-item-copy{font-size:10px;line-height:18px}
  .works-item-description{white-space:normal}
}

/* Top-level navigation uses a fine underline instead of a filled hover badge. */
header .brand,header #about{position:relative;min-height:37px}
header .brand>span:last-child{position:relative}
header #about{isolation:isolate;color:var(--ink)}
header .brand>span:last-child::after,header #works::before,header #about::before{content:"";position:absolute;inset:auto 0 6px;height:1pt;background:var(--blue);opacity:0;transform:scaleX(0);transform-origin:left center;pointer-events:none;transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .15s ease}
header .brand>span:last-child::after{bottom:-3px}
header .brand:hover>span:last-child::after,header .brand:focus-visible>span:last-child::after,header #works:hover::before,header #works:focus-visible::before,header #works[aria-expanded=true]::before,header #about:hover::before,header #about:focus-visible::before{opacity:1;transform:scaleX(1)}
@media(max-width:600px){header .brand,header #about{min-height:30px}}

/* Keep the disclosure in front of the gallery, including raised/animated cards. */
header{z-index:100}
.works-menu{z-index:101}
header nav #works{position:relative}
/* The invisible bridge makes the short path from the button to the panel continuous. */
#works[aria-expanded=true]::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc((var(--header-height,76px) - 37px)/2 + 1px)}
@media(max-width:600px){#works[aria-expanded=true]::after{height:calc((72px - 30px)/2 + 1px)}}
@media(prefers-reduced-motion:reduce){.works-item,header .brand>span:last-child::after,header #works::before,header #about::before{transition:none}}

/* About occupies the former Contact position in every navigation bar. */
header .about-nav-arrow{position:relative;display:block;flex:none;width:16px;height:16px}
header .about-nav-arrow img{position:absolute;left:-.75px;top:-.75px;width:auto;height:auto;max-width:none;display:block}