@font-face{font-family:'Scene Clay';src:url('./assets/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');font-display:swap}
::view-transition{pointer-events:none}
::view-transition-group(root){animation:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-scene-arrival=portal]::view-transition-new(root){animation:scene-portal-open 340ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=settle]::view-transition-new(root){animation:scene-surface-settle 140ms ease both}
html[data-scene-preparing]::view-transition-group(*),html[data-scene-preparing]::view-transition-old(*),html[data-scene-preparing]::view-transition-new(*){animation-play-state:paused}
html[data-scene-preparing]::view-transition-new(*){visibility:hidden}
/* Both snapshots move on the same clock, keeping their edges joined throughout. */
html[data-scene-arrival=slide-left]::view-transition-old(root){animation:scene-slide-out-left 420ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=slide-left]::view-transition-new(root){animation:scene-slide-in-left 420ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=slide-right]::view-transition-old(root){animation:scene-slide-out-right 420ms cubic-bezier(.32,.72,0,1) both}
html[data-scene-arrival=slide-right]::view-transition-new(root){animation:scene-slide-in-right 420ms cubic-bezier(.32,.72,0,1) both}
::view-transition-group(scene-navigation){z-index:2;animation-duration:340ms;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(scene-navigation){animation:scene-nav-out 120ms ease both;mix-blend-mode:normal}
::view-transition-new(scene-navigation){animation:scene-surface-settle 120ms ease both;mix-blend-mode:normal}
html[data-scene-leaving] :is(.project-dropdown,.project-tooltip,.scene-menu){visibility:hidden!important}
@keyframes scene-portal-open{from{clip-path:inset(var(--scene-portal-top,30%) var(--scene-portal-right,30%) var(--scene-portal-bottom,30%) var(--scene-portal-left,30%) round 18px)}to{clip-path:inset(0 round 0)}}
@keyframes scene-surface-settle{from{opacity:0}to{opacity:1}}
@keyframes scene-nav-out{to{opacity:0}}
@keyframes scene-slide-out-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes scene-slide-in-left{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes scene-slide-out-right{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes scene-slide-in-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}
:root{--scene-body:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',sans-serif;--scene-ease:cubic-bezier(.23,1,.32,1);--scene-cap:url('./assets/island-art-04.fast.webp');--scene-cap-active:url('./assets/island-art-05.fast.webp')}
.scene-nav{position:absolute;right:4.5%;top:2%;z-index:60;display:flex;gap:8px;width:clamp(290px,32%,440px);height:clamp(48px,4.6vw,64px);isolation:isolate}
.scene-nav-button{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:3px;flex:1;min-width:0;min-height:44px;padding:0 6px 7px;border:0;border-radius:12px;background:none;color:#513522;text-decoration:none;font:400 clamp(17px,1.6vw,24px)/1 'Scene Clay','Microsoft YaHei',sans-serif;text-shadow:0 1px #fff4db;cursor:pointer;transition:transform 160ms var(--scene-ease),color 160ms ease}
.scene-nav-button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--scene-cap) center/100% 100% no-repeat;pointer-events:none}
.scene-nav-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms var(--scene-ease)}
.scene-nav-button[aria-expanded=true] svg{transform:rotate(180deg)}
.scene-nav-button:is([aria-current],[aria-expanded=true]){color:#fff3dc;text-shadow:0 1px #294859}
.scene-nav-button:is([aria-current],[aria-expanded=true])::before{background-image:var(--scene-cap-active)}
.scene-nav-button:active{transform:translateY(2px) scale(.98)}
.scene-nav-button:focus-visible,.scene-menu a:focus-visible{outline:2px solid #315e7a;outline-offset:3px}
.scene-menu{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:clamp(268px,24vw,330px);max-width:calc(100vw - 24px);padding:11px 12px;border:1px solid #dec8a3;border-radius:12px;background:#fff1d7;box-shadow:2px 9px 20px #50362338;color:#513522;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:var(--scene-menu-origin,80%) 0;transition:opacity 150ms ease,transform 220ms var(--scene-ease),display 220ms allow-discrete,overlay 220ms allow-discrete}
.scene-menu:popover-open{opacity:1;transform:none}
@starting-style{.scene-menu:popover-open{opacity:0;transform:translateY(-6px) scale(.97)}}
.scene-menu a{display:flex;align-items:center;min-height:46px;padding:9px 12px;border-radius:7px;color:#43382e;text-decoration:none;font:400 15px/1.6 var(--scene-body);transition:background 150ms ease,color 150ms ease}
.scene-menu a:first-child{margin-bottom:5px;border-bottom:1px solid #d5b990;border-radius:7px 7px 0 0;color:#715238}
.scene-menu a[aria-current=page]{color:#294859;background:#e7ddc6;text-decoration:underline;text-underline-offset:4px}
.scene-menu::backdrop{background:transparent}
.scene-menu ::selection{background:#d5bd91;color:#294859}
#bank-scene .bubble{animation:none}
.scrapbook-home .scrapbook-index .index-trigger[aria-expanded=true]{color:#fff3dc!important;text-shadow:0 1px #294859}
.scrapbook-home .scrapbook-index .index-trigger[aria-expanded=true]::before{background-image:var(--clay-cap-1)}
.atelier>.scene-nav{right:7.5%;top:3.4%;height:56px}
.dossier-page>.scene-nav{top:14px;right:22px;width:340px;height:52px}
.project-page>.back{left:5%;right:auto;top:25px}
.experience>.scene-nav{top:2%;right:3%;width:32%;height:clamp(44px,4vw,58px)}
/* Independent scale preserves the original rotation and placement of each prop. */
:where(.folder-close,.resume-close,.resume-zoom,.resume-open,.resume-download,.contact-close,.education-close,.show-overview,.chapter,.case-slip,.flow-refresh,.tool,.close-bubble,dialog .close,.return-link,.return-tab,.dossier-return){transition:scale 160ms var(--scene-ease),filter 160ms ease}
:where(.folder-close,.resume-close,.resume-zoom,.resume-open,.resume-download,.contact-close,.education-close,.show-overview,.chapter,.case-slip,.flow-refresh,.tool,.close-bubble,dialog .close,.return-link,.return-tab,.dossier-return):active{scale:.97;transition-duration:100ms}
[data-ui-input=keyboard] :is(.scene-menu,dialog,dialog::backdrop){transition:none}
@media(min-width:901px) and (max-height:790px){
 #overview .overview-poster{flex:0 0 auto;min-height:560px}
}
dialog{opacity:0;transform:translateY(6px) scale(.985);transition:opacity 160ms ease,transform 220ms var(--scene-ease),display 220ms allow-discrete,overlay 220ms allow-discrete}
dialog[open]{opacity:1;transform:none}
dialog::backdrop{opacity:0;transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(6px) scale(.985)}dialog[open]::backdrop{opacity:0}}
/* Keep the return and section controls below the common navigation on narrow pages. */
@media(max-width:700px){
 .scene-nav{left:12px;right:12px;top:-68px;width:auto;height:52px;gap:6px}
 .scene-nav-button{font-size:19px;padding-bottom:7px}
 .scene-menu{width:min(300px,calc(100vw - 24px))}
 .scene-menu a{min-height:48px;font-size:16px}
 .atelier>.scene-nav{left:9%;right:9%;top:24px;width:auto;height:52px}
 .dossier-page>.scene-nav{left:10px;right:10px;top:10px;width:auto;height:48px}
 .dossier-page>.dossier-return{display:inline-flex;align-items:center;min-height:44px;margin-top:42px}
 .dossier-page>.dossier-portrait{top:140px}
 .dossier-page>.dossier-content{margin-top:260px}
 .project-page{min-width:0;left:0;translate:none}
 .project-page>.scene-nav{top:18px}
 .project-page>.back{top:84px;left:24px}
 .project-page>.project-heading{top:145px;left:24px;right:24px}
 .customer-work .work-station{min-width:44px;min-height:44px}
 main.stage .recording{min-height:44px;transform:translateY(-6px)}
 main.stage .return-tab{min-height:44px}
 body:has(#bank-scene){display:block;overflow-x:hidden;overflow-y:auto;padding-top:max(96px,calc((100svh - 56.25vw)/2));padding-bottom:24px}
 #bank-scene .bubble{position:absolute!important;inset:auto!important;left:12px!important;top:calc(100% + 16px)!important;width:calc(100% - 24px)!important;margin:0;padding:22px 24px;box-sizing:border-box}
 #bank-scene .bubble h2{font-size:20px;line-height:1.4;max-width:calc(100% - 34px);margin-bottom:12px;padding-bottom:10px}
 #bank-scene .bubble p{font-size:16px;line-height:1.8}
 #bank-scene .bubble h3{font-size:16px;line-height:1.5}
 #bank-scene .note-detail+.note-detail,#bank-scene .note-intro+.note-detail{margin-top:12px;padding-top:12px}
 #bank-scene .close-bubble{right:8px;top:8px;width:44px;height:44px;font-size:24px}
}
@media(hover:hover) and (pointer:fine){
 .scene-nav-button:hover{transform:translateY(-2px);color:#fff3dc;text-shadow:0 1px #294859}
 .scene-nav-button:hover::before{background-image:var(--scene-cap-active)}
 .scene-menu a:hover{background:#e4d7bb;color:#294859}
}
@media(prefers-reduced-motion:reduce){
 :where(.folder-close,.resume-close,.resume-zoom,.resume-open,.resume-download,.contact-close,.education-close,.show-overview,.chapter,.case-slip,.flow-refresh,.tool,.close-bubble,dialog .close,.return-link,.return-tab,.dossier-return){transition:none!important;scale:1!important}
 .scene-nav-button,.scene-nav-button svg,.scene-menu,.scene-menu a,dialog,dialog::backdrop{transition:none}
 dialog,dialog[open]{transform:none}
 .scene-nav-button:active,.scene-nav-button:hover,.scene-menu{transform:none}
}