/* Public layout: one margin, one header lock-up, and a small type scale. */
:root{
 --site-margin:clamp(16px,2vw,40px);--page-margin:var(--site-margin);--ui-edge:var(--site-margin);
 --type-display-size:64px;--type-display-leading:68px;--type-display-chinese:16px;--type-display-chinese-leading:24px;
 --type-title-size:22px;--type-title-leading:28px;--type-title-chinese:14px;--type-title-chinese-leading:22px;
 --type-body-size:13px;--type-body-leading:22px;--type-meta-size:12px;--type-meta-leading:18px;
 --type-caption-size:11px;--type-caption-leading:16px;
}
.topbar{left:var(--site-margin);right:var(--site-margin);top:var(--site-margin);width:auto;height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand,.brand-passive{position:relative;left:auto;top:auto;width:max-content;height:44px;display:flex;align-items:center;gap:12px;text-align:left;flex:none}
.brand img,.brand-passive img{position:static;width:22px;height:auto;object-fit:contain;flex:none}
.brand>span,.brand-passive>span{font:400 13px/20px Helvetica,'Source Han Sans';white-space:nowrap}
#scene{overflow:clip}
.topbar .ui-label{position:static!important;left:auto!important;top:auto!important;line-height:20px;font-size:13px!important;font-weight:400!important;transition:none}
.topbar .ui-label svg{display:none}
.topbar .ui-label>.sr-only{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:inherit}
#navigation{position:relative;inset:auto;left:auto;top:auto;width:auto;height:44px;display:flex;align-items:center;justify-content:flex-end;gap:24px}
.nav-item[data-preview=about],.nav-item[data-preview=catalog]{position:relative;left:auto!important;top:auto;width:auto!important;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;gap:8px}
.nav-item>.english.ui-label{font-weight:300!important}
.nav-item>.chinese.ui-label{font-family:'Source Han Sans',Helvetica,sans-serif;font-size:11px!important;font-weight:400!important}
.filter,body.is-filter-open .filter{position:relative;left:auto;top:auto;width:44px;height:44px;display:grid;place-items:center;mix-blend-mode:normal}
.filter img{width:22px;height:auto;object-fit:contain}
.nav-item,.nav-item:after,.filter,.arrow img,.dot span{transition-duration:var(--transition-secondary,160ms);transition-timing-function:var(--transition-enter-ease,cubic-bezier(.16,.8,.24,1))}
.about-back,.catalog-back,.work-back{left:var(--site-margin);top:var(--site-margin);width:44px;height:44px;display:grid;place-items:center start}
.about-back-arrow,.catalog-back img,.work-back img{width:22px;height:auto;object-fit:contain}
.about-back::before{inset:0;border-radius:0}
.about-controls{height:calc(2 * var(--site-margin) + 44px);background:rgb(249 246 231 / .94);backdrop-filter:blur(8px)}
.about-brand-link,.work-brand,.catalog-brand{font:400 13px/20px Helvetica,'Source Han Sans';}
.catalog-brand{gap:12px}
.about-brand-link,.work-brand{position:absolute;left:calc(var(--site-margin) + 56px);top:var(--site-margin);width:max-content;max-width:calc(100% - var(--site-margin) * 2 - 56px);height:44px;display:flex;align-items:center;gap:12px;text-decoration:none;pointer-events:auto}
.about-brand-link img,.work-brand img,.catalog-brand img{width:22px;height:auto;object-fit:contain;flex:none}
.about-brand-link .about-mobile-brand{display:flex;align-items:center;gap:12px;font:inherit;white-space:nowrap}
.about-brand-link:focus-visible,.work-brand:focus-visible{outline:2px solid #111;outline-offset:4px}
.browse-v08-caption{left:var(--site-margin);right:var(--site-margin);bottom:calc(var(--site-margin) + 156px);transition:opacity var(--transition-secondary,160ms) var(--transition-enter-ease),filter 320ms var(--transition-enter-ease)}
.browse-v08-ordinal{--browse-caption-font:165px;height:165px;max-width:none}
.browse-v10-number-group{max-width:none;flex:none}
.browse-v08-names{width:min(70%,720px);max-width:none}
.browse-v08-english{--browse-caption-font:var(--type-display-size);--browse-roll-distance:calc(var(--type-display-leading) * 2 + 8px);height:calc(var(--type-display-leading) * 2);font-size:var(--type-display-size);line-height:var(--type-display-leading);font-weight:400;letter-spacing:-.035em;text-wrap:balance}
.browse-v08-chinese{--browse-caption-font:var(--type-display-chinese);--browse-roll-distance:calc(var(--type-display-chinese-leading) * 2 + 8px);height:var(--type-display-chinese-leading);margin-top:8px;font-size:var(--type-display-chinese);line-height:var(--type-display-chinese-leading);font-weight:700}
.browse-v11-line{font-size:1em;line-height:inherit;max-height:100%}
#portfolio-footer{left:var(--site-margin);right:var(--site-margin);bottom:var(--site-margin);width:auto;max-width:none;height:auto;margin:0;columns:1;font:400 11px/16px Helvetica,'Source Han Sans';text-align:center;text-align-last:center}
#work-reader{bottom:calc(var(--site-margin) + 96px);height:44px}
#dot-track{top:0;height:44px;align-items:center}
.dot{width:32px;height:44px}
.dot span{width:clamp(5px,.42vw,8px);height:clamp(5px,.42vw,8px)}
#work-name{font-size:13px;line-height:20px;top:-22px}
.dynamic-filter h2{font-size:13px;line-height:20px;font-weight:400}
.dynamic-filter h2 .chinese,.dynamic-filter .filter-option .chinese{font-size:12px;line-height:18px}
.dynamic-filter .filter-option{font-size:12px;line-height:18px;min-height:44px;font-weight:400}
.filter-rule{left:var(--site-margin);right:var(--site-margin)}
.filter-copyright{font-size:11px;line-height:16px}
.filter-copyright .ui-label{font-size:11px!important;font-weight:400!important;line-height:16px;position:static!important;margin-top:calc(370px * var(--s));margin-left:var(--site-margin)}
.filter-copyright .ui-label svg{display:none}
.filter-copyright .ui-label .sr-only{position:static;clip-path:none;width:auto;height:auto;margin:0;overflow:visible}
/* The final HTML name never gets replaced by a second decoded artwork layer. */
.about-desktop-hero .about-hero-original{display:none!important}
.about-desktop-hero>.about-hero-overline,.about-desktop-hero>.about-hero-name,.about-desktop-hero>.about-hero-direction{visibility:visible!important}
.about-hero-overline{font-size:max(11px,1.35cqw);line-height:16px}
.about-hero-direction p:first-child{font-size:max(11px,1.28cqw);line-height:18px}
@media(max-width:1100px){
 :root{--site-margin:24px;--type-display-size:48px;--type-display-leading:52px}
 .browse-v08-ordinal{--browse-caption-font:110px;height:110px}
 .browse-v08-caption{bottom:88px}
 .dot{width:32px;height:44px;min-width:32px;min-height:44px}
 .arrow{min-width:44px;min-height:44px}
 html.experience-document{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto}
 .experience-document body{height:auto;min-height:100svh;overflow:visible}
 .experience-document #experience{height:100svh;min-height:100svh}
 #portfolio-footer{top:calc(100svh + 16px);bottom:auto;left:var(--site-margin);right:var(--site-margin);width:auto;height:auto;columns:1;padding-bottom:calc(var(--site-margin) + env(safe-area-inset-bottom))}
 #work-reader{bottom:max(12px,env(safe-area-inset-bottom));height:44px}
 .about-stage{width:calc(100% - 2 * var(--site-margin))}
 .about-resume.is-mobile-text{padding-left:0;padding-right:0}
}
@media(max-width:760px){
 :root{--site-margin:20px;--type-display-size:32px;--type-display-leading:36px;--type-display-chinese:12px;--type-display-chinese-leading:20px}
 .topbar{height:44px;gap:8px}
 .brand,.brand-passive{width:auto;height:44px;max-width:calc(100% - 148px);gap:8px}
 .brand>span,.brand-passive>span{max-width:120px;white-space:normal;line-height:20px}
 .brand-text-name,.brand-text-period{display:block;white-space:nowrap}
 .brand .ui-label,.brand-passive .ui-label{left:auto!important;top:auto!important;line-height:20px!important;white-space:normal}
 #navigation{top:auto;right:auto;width:140px;height:44px;gap:4px;flex:none}
 .nav-item[data-preview=about],.nav-item[data-preview=catalog]{width:44px!important;min-width:44px;height:44px;flex-direction:column;gap:0}
 .nav-item>.ui-label{font-size:11px!important;line-height:16px}
 .nav-item>.chinese.ui-label{font-size:11px!important}
 .filter,body.is-filter-open .filter{width:44px;height:44px}
 .browse-v08-ordinal{--browse-caption-font:64px;height:64px;max-width:none}
 .browse-v08-caption{bottom:88px;gap:16px}
 .browse-v08-names{width:calc(100% - 88px);max-width:none}
 .filter-panel{top:calc(var(--site-margin) + 56px);height:calc(100svh - var(--site-margin) - 56px);padding:16px var(--site-margin) 24px}
 .dynamic-filter h2{font-size:12px;line-height:18px;min-height:40px}
 .dynamic-filter h2 .chinese{font-size:11px;line-height:18px}
 .dynamic-filter .filter-option,.dynamic-filter .filter-option .chinese{font-size:11px;line-height:18px;min-height:44px}
 .filter-rule{left:0;right:0}
 .filter-copyright .ui-label{margin:12px 0 0;line-height:16px!important}
 #portfolio-footer{columns:1}
 #status-line{bottom:24px}
 .about-brand-link,.work-brand{gap:8px;font-size:13px;line-height:20px}
 .catalog-brand{gap:8px}
 .about-brand-link .about-mobile-brand{gap:8px}
}
@media(pointer:coarse){
 .dot,.nav-item,.filter,.catalog-filter-toggle,.catalog-filter-option,.work-toc-link,.work-toc-toggle{min-width:44px;min-height:44px}
}
@media(max-height:760px) and (min-width:1101px){
 :root{--type-display-size:48px;--type-display-leading:52px}
 html.experience-document{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto}
 .experience-document body{height:auto;min-height:100svh;overflow:visible}
 .experience-document #experience{height:100svh}
 .browse-v08-ordinal{--browse-caption-font:110px;height:110px}
 .browse-v08-caption{bottom:88px}
 #work-reader{bottom:max(12px,env(safe-area-inset-bottom))}
 #portfolio-footer{top:calc(100svh + 16px);bottom:auto;left:var(--site-margin);right:var(--site-margin);width:auto;height:auto;padding-bottom:var(--site-margin)}
}
@media(prefers-reduced-motion:reduce){.topbar *,.browse-v08-caption{transition:none!important}}