@font-face{font-family:PortfolioSerifCJK;src:url('assets/fonts/noto-serif-sc.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/dm-serif-display.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
html,body{height:100%;overflow:hidden!important;overscroll-behavior:none}
#scroll-track{display:none}
.motion-buffer{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1}
#background:not([data-ready]){opacity:0}
.frame-horizontal,.frame-vertical{display:none!important}
#viewport-frame{position:fixed;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;overflow:visible;fill:none;stroke:#fff;stroke-opacity:.21;stroke-width:1}
#viewport-frame line{stroke-dasharray:1;stroke-dashoffset:1;animation:extend-frame .9s ease-out forwards}
#viewport-frame line:nth-child(n+3){animation-delay:.14s}
@keyframes extend-frame{to{stroke-dashoffset:0}}
.scene-content{opacity:1;transition:none}
.design-scene[data-text-state="hidden"] .scene-content{visibility:hidden}
.design-scene.active.preserve-heading .continuity-heading{visibility:visible}
.is-travelling [data-menu-toggle]{pointer-events:none}
body:not(.is-travelling):not(.menu-open) .design-scene.active .project-row{pointer-events:auto}
.project-tags{background:rgba(230,216,174,.12)}
.project-details>*{animation:none}
/* One native link per card, with dust clipped independently of the copy. */
.project-row{isolation:isolate;cursor:pointer}
.project-row:focus-visible{outline:1px solid rgba(230,216,174,.65);outline-offset:-2px}
.project-title,.project-summary,.project-tags,.project-link{position:relative;z-index:1}
.project-dust{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s ease;contain:strict}
body:not(.menu-open):not(.is-travelling):not(.page-hidden) #work.active .project-row.expanded:is(.dust-hover,:focus-visible) .project-dust{opacity:1}
body:not(.menu-open):not(.is-travelling):not(.page-hidden) #work.active .project-row.expanded:is(.dust-hover,:focus-visible) .dust-mote{animation-play-state:running}
.is-travelling .project-row{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){.project-dust{display:none}}
.removed-detail-ring{display:none!important}
/* Gate the whole contact CTA, including its background, until copy has settled. */
#contact #contact-actions{opacity:0;visibility:hidden;pointer-events:none!important}
#contact:is([data-cta-state="entering"],[data-cta-state="visible"],[data-cta-state="exiting"]) #contact-actions{opacity:1;visibility:visible}
body:not(.is-travelling):not(.menu-open) #contact.active[data-cta-state="visible"] #contact-actions .design-button{pointer-events:auto!important}
/* Broad, separated haze; blur belongs to this light layer only. */
#ambient-light{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.58;transition:opacity .5s ease}
.cloud-field{display:block;width:100%;height:100%;pointer-events:none;filter:blur(18px)}
.cloud-field[hidden]{display:none}
#ambient-light[data-cloud-state="fallback"]::before,#ambient-light[data-cloud-state="fallback"]::after{--cloud-tile:1100px;content:'';position:absolute;inset:-160px;background:url('assets/cloud-light-fallback.svg?v=mist14') repeat;background-size:var(--cloud-tile) var(--cloud-tile);filter:blur(18px);animation:cloud-fallback-drift 24s linear infinite}
#ambient-light[data-cloud-state="fallback"]::after{--cloud-tile:900px;opacity:.4;animation-duration:30s;animation-direction:reverse}
@keyframes cloud-fallback-drift{to{background-position:var(--cloud-tile) calc(0px - var(--cloud-tile))}}
.is-travelling #ambient-light{opacity:.24}
.page-hidden #ambient-light::before,.page-hidden #ambient-light::after,.is-travelling #ambient-light::before,.is-travelling #ambient-light::after{animation-play-state:paused}
html:lang(en) .design-scene:not(#home) .scene-content>.scene-title{font-family:'DM Serif Display',serif!important;font-size:36px!important;font-weight:400!important;line-height:1.25!important;letter-spacing:.015em!important}
html:lang(zh-CN) .design-scene:not(#home) .scene-content>.scene-title{font-weight:700!important;font-synthesis:weight!important}
@media(max-width:759px){
 .design-scene:not(#home) .scene-content{gap:18px}
 #question .scene-content,#response .scene-content{justify-content:flex-start;padding-top:var(--question-content-top,128px)}
 /* Text keeps its reading inset; separators meet the right viewport frame. */
 .method-list>.list-divider,.project-list>.list-divider{width:calc(100% + 12px)!important;align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){#ambient-light{display:none}}
@media(min-width:760px){
 [data-node-id="5486:24508"],[data-node-id="5486:24537"]{left:auto!important;right:100px!important;transform:none!important;text-align:right!important}
}

/* Keep the full original characters; compress punctuation metrics only. */
.cjk-copy{font-family:PortfolioSerifCJK,Fauna,'Songti SC',serif!important;letter-spacing:.1em!important;line-break:strict;word-break:normal!important;overflow-wrap:normal!important;font-synthesis:none}
html:lang(zh-CN) .cjk-copy{letter-spacing:.1em!important}
.scene-content>.type-size-32.cjk-copy{line-height:1.3!important;text-wrap:balance}
.scene-content>.type-size-20.cjk-copy,.project-summary.cjk-copy,.method-list p.cjk-copy{line-height:1.5!important}
#stage,#design-menu{text-shadow:0 2px 4px rgba(0,0,0,.2)}
.cjk-pair{white-space:nowrap}
.cjk-punct{display:inline-block;inline-size:.5em;letter-spacing:0;text-align:left;font-feature-settings:'halt';vertical-align:baseline}
[data-cjk-align="right"] .terminal-punct{inline-size:0;overflow:visible}
@media(min-width:760px){
 html:lang(zh-CN) [data-node-id="5486:24441"],html:lang(zh-CN) [data-node-id="5486:24458"]{left:100px!important;transform:none!important;text-align:left!important}
}

/* Replace the opener with a drawer using its exact type size and top edge. */
#menu-layer{position:fixed;inset:0;z-index:10;pointer-events:none}
#menu-layer[hidden]{display:none}
.design-scene [data-menu-toggle]{z-index:2}
body.menu-cover [data-menu-toggle]{visibility:hidden!important}
body.menu-cover :is(.scene-content,.scene-next,[data-node-id="5486:24373"]){visibility:hidden!important}
body.menu-cover .scene-content *{visibility:hidden!important}
#design-menu{position:fixed!important;left:var(--drawer-x)!important;right:auto!important;top:var(--drawer-y)!important;width:var(--drawer-width)!important;display:flex;flex-direction:column;align-items:stretch;gap:var(--drawer-gap)!important;font-size:var(--drawer-font)!important;line-height:var(--drawer-line-height)!important;text-align:right;opacity:0;translate:22px 0;transition:opacity .24s ease,translate .28s cubic-bezier(.22,1,.36,1);pointer-events:none;will-change:opacity,translate}
#design-menu a{font-size:inherit!important;line-height:inherit!important;color:rgba(230,216,174,.65)!important;padding:0;width:100%;white-space:nowrap}
#design-menu a[aria-current],#design-menu a:hover,#design-menu a:focus-visible{color:#e6d8ae!important}
#menu-layer[data-side="left"] #design-menu{text-align:left;translate:-22px 0}
#menu-layer.drawer-open #design-menu{opacity:1;translate:0 0;pointer-events:auto}
#menu-fog{position:fixed;inset:0;background:rgba(8,19,33,.94);opacity:0;transition:opacity .28s ease;pointer-events:none}
#menu-layer.drawer-open #menu-fog{opacity:1}
#menu-rule{position:fixed!important;left:var(--drawer-rule-x)!important;right:auto!important;top:var(--drawer-rule-y)!important;width:1px!important;height:var(--drawer-height)!important;background:rgba(230,216,174,.7);opacity:0;scale:1 .6;transform-origin:50% 0;transition:opacity .24s ease,scale .28s cubic-bezier(.22,1,.36,1);pointer-events:none}
#menu-layer.drawer-open #menu-rule{opacity:1;scale:1 1}
@media(prefers-reduced-motion:reduce){
 #viewport-frame line{stroke-dashoffset:0}
 #design-menu,#menu-fog,#menu-rule,.scene-content{transition:none}
}

body.menu-open .scene-content button,body.menu-open .scene-content a{pointer-events:none!important}
@media(min-width:760px){html:lang(zh-CN) #question .scene-next,html:lang(zh-CN) #response .scene-next,html:lang(zh-CN) #ai-design .scene-next{left:100px!important;right:auto!important;transform:none!important;text-align:left!important}}
@media(max-width:759px){[data-node-id="5486:24441"],[data-node-id="5486:24458"]{text-align:left!important}}