@font-face{font-family:Directory Albert;src:url('../profile/fonts/albert-sans-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Directory Albert;src:url('./fonts/albert-sans-extralight.ttf') format('truetype');font-style:normal;font-weight:200;font-display:swap}
@font-face{font-family:Directory ABeeZee;src:url('../profile/fonts/abeezee-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Directory Chinese;src:url('./fonts/noto-sans-sc-directory.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.directory-section{display:block;width:100%;height:100dvh;overflow:hidden;background:#000;color:#e3e3e3;scroll-margin-top:0}
.directory-viewport{position:relative;width:100%;height:100%;overflow:hidden}
.directory-icp-footer{position:absolute;inset:auto 0 max(12px,env(safe-area-inset-bottom));text-align:center;color:#999;font:400 12px/1.4 'Directory Albert','Portfolio CJK',sans-serif;pointer-events:none}
.directory-icp-footer a{color:inherit;text-decoration:none;pointer-events:auto}
.directory-icp-footer a:is(:hover,:focus-visible){text-decoration:underline}
.directory-board{position:absolute;left:0;top:0;width:1920px;height:var(--directory-height,1080px);transform:scale(var(--directory-scale,1));transform-origin:0 0;background:#000;font-family:'Directory Albert','Directory Chinese',sans-serif;font-synthesis:none;text-rendering:geometricPrecision}
.directory-board a{display:block;position:absolute;color:inherit;text-decoration:none}
.directory-board a:focus-visible{outline:1px solid #e3e3e3;outline-offset:8px}
.directory-text{position:absolute;display:block;white-space:pre;margin:0;padding:0;border:0;font-style:normal;font-weight:400}
.directory-date,.directory-description{font-size:17px;line-height:18px;color:#3f3f3f}
.directory-date{letter-spacing:-1.7px;color:#3f3f3f}
.directory-title{font-size:25px;line-height:22px;letter-spacing:-1.25px;text-transform:uppercase}
.directory-index{font-size:50px;line-height:22px;font-weight:200;letter-spacing:-2.5px}
.directory-nav-anchor{position:absolute;left:1329px;top:97px;width:554.0010986328125px;height:45px}
.directory-nav{position:absolute;left:0;top:0;width:554.0010986328125px;height:45px;color:#fff;border-radius:84px;font-family:'Directory Albert','Directory Chinese',sans-serif;font-synthesis:none;text-rendering:geometricPrecision}
.directory-nav-follow{position:fixed;z-index:80;transform:scale(var(--directory-nav-scale,1));transform-origin:0 0}
.directory-nav a{display:block;position:absolute;color:inherit;text-decoration:none}
.directory-nav a:focus-visible{outline:1px solid #f5f5f5;outline-offset:3px}
.directory-nav-art{
  position:absolute;
  inset:0;
  border-radius:inherit;
  clip-path:inset(0 round 84px);
  pointer-events:none;
}
.directory-nav-art,
html[data-case-cover]::view-transition-group(portfolio-navigation){
  background:linear-gradient(rgb(8 8 8 / var(--nav-dark-opacity,0)),rgb(8 8 8 / var(--nav-dark-opacity,0))),linear-gradient(180deg,rgb(205 224 241 / .08),rgb(181 204 225 / .025));
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
.directory-nav-art::before{content:"";display:none;position:absolute;inset:0;background:radial-gradient(ellipse 35% 65% at 35% 100%,var(--nav-color-a,#a4f0e3),transparent 100%),radial-gradient(ellipse 38% 65% at 70% 100%,var(--nav-color-b,#6689ff),transparent 100%);opacity:.28;pointer-events:none}
@property --nav-dark-opacity{syntax:'<number>';inherits:true;initial-value:0}
html{--nav-dark-opacity:0;transition:--nav-dark-opacity 600ms cubic-bezier(.25,.65,.25,1)}
html[data-nav-dark-base=true]{--nav-dark-opacity:1}
@media(prefers-reduced-motion:reduce){html{transition:none}}
.directory-nav-art:has(canvas[data-flow-state="fallback"])::before{display:block}
.directory-nav-fluid{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.directory-nav-divider{position:absolute;left:121px;top:22.5px;width:110px;height:1px;background:#c2d6dc62;pointer-events:none}
.directory-nav .directory-nav-link{top:5px;height:35px;z-index:2;isolation:isolate;background:none;border-radius:35px;opacity:.85;transition:opacity 160ms ease}
.directory-nav-link[aria-current="page"]{opacity:1}
.directory-nav-selection{position:absolute;top:5px;height:35px;border-radius:35px;background:linear-gradient(155deg,rgb(255 255 255 / .16),rgb(255 255 255 / .035) 74%);box-shadow:0 2px 5px rgb(0 0 0 / .18),inset 0 .35px .7px #ffffff14,inset 0 -.7px 1px #ffffff1a;transform-origin:50% 50%;pointer-events:none}
.directory-nav::after,
.directory-nav-selection::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:
    radial-gradient(ellipse 30% 100% at 76% 0%,rgb(255 255 255 / .42),transparent 100%),
    radial-gradient(ellipse 25% 80% at 20% 100%,rgb(255 255 255 / .17),transparent 100%),
    linear-gradient(180deg,rgb(255 255 255 / .14),rgb(255 255 255 / .08));
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.directory-nav-link:hover,.directory-nav-link:focus-visible{opacity:1}
.directory-nav-label{position:absolute;display:block;top:7px;height:22px;text-shadow:none}
.directory-nav-en{position:absolute;left:0;top:0;height:22px;white-space:pre;font-size:12px;line-height:11px;font-weight:400;text-transform:uppercase;letter-spacing:0}
.directory-nav-zh{position:absolute;top:13px;height:9px;white-space:nowrap;font-family:'Directory ABeeZee','Directory Chinese',sans-serif;font-size:10px;line-height:9px;font-weight:400;letter-spacing:0}
@media(prefers-reduced-motion:reduce){.directory-nav .directory-nav-link{transition:none}}

.directory-nav .directory-nav-link{opacity:1}
.directory-work-toggle{
 position:absolute;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.directory-work-toggle:focus-visible{outline:1px solid #f5f5f5;outline-offset:3px}
.directory-nav[data-active-work] .directory-work-toggle .directory-nav-label{visibility:hidden}
.directory-work-arrows{
 position:absolute;top:7px;right:21px;width:13px;height:9px;display:none;background:currentColor;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M0 3.5H12L9 .5M13 5.5H1L4 8.5' fill='none' stroke='black' stroke-width='.55'/%3E%3C/svg%3E") center / contain no-repeat;
}
.directory-nav[data-active-work] .directory-work-arrows{display:block}
.directory-work-list{
 position:absolute;z-index:1;top:5px;height:35px;
 box-sizing:border-box;margin:0;padding:0;list-style:none;border-radius:20px;overflow:clip;
 pointer-events:none;transition:height 340ms cubic-bezier(.22,.72,.24,1);
}
.directory-nav[data-work-list-open] .directory-work-list{
 height:210px;pointer-events:auto;
 background:linear-gradient(165deg,#eaf7ff33,#777b7d44 40%),#0003;
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 box-shadow:inset 0 1px 1px #edf9ff8c,inset 0 0 0 1px #edf9ff17;
}
.directory-nav[data-work-list-open][data-active-work] .directory-work-list{height:181px}
.directory-nav[data-work-list-open][data-work-directory] .directory-work-list{height:166px}
.directory-work-row{
 position:absolute;left:0;top:0;width:100%;height:29px;visibility:hidden;
 translate:0 var(--work-row-y,0px);transition:translate 400ms cubic-bezier(.22,.77,.24,1);
}
.directory-nav[data-work-list-open] .directory-work-row,.directory-work-row[data-current]{visibility:visible}
.directory-work-row[data-current]{z-index:1}
.directory-work-row[data-case-family=directory]::before{
 content:"";position:absolute;top:-5px;left:22px;right:22px;height:1px;background:#fff8;
}
.directory-work-list .directory-work-row a{
 position:absolute;inset:0 10px;display:flex;align-items:flex-end;gap:7px;padding:0 10px 3px;
 box-sizing:border-box;border-radius:8px;white-space:pre;line-height:11px;
}
.directory-work-row[data-current] a{padding-top:7px;padding-bottom:0;align-items:flex-start}
.directory-work-row[data-current] a span:last-child{align-self:flex-end}
.directory-work-row a span:first-child{font-size:12px;text-transform:uppercase}
.directory-work-row a span:last-child{font:400 10px/10px 'Directory ABeeZee','Directory Chinese',sans-serif}
.directory-work-row a:is(:hover,:focus-visible){color:#080808;background:#f5f5f5df}
.directory-work-row a:is(:hover,:focus-visible) span{animation:work-label-nudge 330ms ease-out}
.directory-nav[data-work-list-open]:has(.directory-work-toggle[aria-current="page"]) .directory-nav-selection{opacity:0}
.directory-nav[data-work-list-open] .directory-nav-art::before{
 display:block;background:linear-gradient(0deg,#2abdc996,transparent 82%);opacity:.58;
}
@keyframes work-label-nudge{30%{transform:translateX(1.5px) rotate(1.25deg)}65%{transform:translateX(-1px) rotate(-.8deg)}}
@media(prefers-reduced-motion:reduce){
 .directory-work-list,.directory-work-row{transition:none}
 .directory-work-row a:is(:hover,:focus-visible) span{animation:none}
}
[data-portfolio-page][hidden]{display:none!important}
[data-portfolio-page=interfaces]{overflow-anchor:none}
html{scrollbar-gutter:stable}
html[data-home-intro-locked],html[data-home-intro-locked] body{overflow:hidden}
.directory-chapter{z-index:2}
.directory-preview{z-index:1;pointer-events:none;opacity:0;overflow:hidden;background:#070a0d26;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .24s ease}
#case-directory .figma-frame{isolation:isolate}
.directory-preview-glass{position:absolute;inset:0}
.directory-preview-glass img{opacity:.56}
.directory-board:has(.directory-chapter[data-preview="1"]:is(:hover,:focus-visible)) .directory-preview[data-preview="1"],
.directory-board:has(.directory-chapter[data-preview="2"]:is(:hover,:focus-visible)) .directory-preview[data-preview="2"],
.directory-board:has(.directory-chapter[data-preview="3"]:is(:hover,:focus-visible)) .directory-preview[data-preview="3"]{opacity:1}
@media(prefers-reduced-motion:reduce){.directory-preview{transition:none}}

html[data-case-cover]{background:#000}
html[data-case-cover] .directory-nav-follow{view-transition-name:portfolio-navigation}
html[data-case-cover] .cabin-board > [data-title-layout=exhibit]:not(:has([data-case-title-in-flight])){view-transition-name:portfolio-cabin-heading}
::view-transition-group(portfolio-cabin-heading){z-index:6;animation:none}
::view-transition-old(portfolio-cabin-heading){display:none}
::view-transition-new(portfolio-cabin-heading){mix-blend-mode:normal;animation:case-title-layer-hold 760ms linear both}
/* Sample the moving page through the transition group, outside the nav capture. */
html[data-case-cover] .directory-nav-art{
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-case-cover]::view-transition-group(root),
html[data-case-cover]::view-transition-old(root),
html[data-case-cover]::view-transition-group(portfolio-navigation),
html[data-case-cover]::view-transition-new(portfolio-navigation){animation:none}
html[data-case-cover]::view-transition-old(portfolio-navigation){display:none}
html[data-case-cover]::view-transition-group(portfolio-navigation){
 z-index:2;border-radius:84px;clip-path:inset(0 round 84px);
 top:0;left:0;width:var(--portfolio-nav-width);height:var(--portfolio-nav-height);
 transform:translate(var(--portfolio-nav-x),var(--portfolio-nav-y));
}
html[data-case-cover]::view-transition-old(root),
html[data-case-cover]::view-transition-new(root){mix-blend-mode:normal}
html[data-case-cover]::view-transition-new(root){animation:case-cover-in 720ms cubic-bezier(.22,.72,.24,1) both}
html[data-case-cover=down]::view-transition-new(root){--case-cover-offset:100%}
html[data-case-cover=up]::view-transition-new(root){--case-cover-offset:-100%}
@keyframes case-cover-in{from{transform:translateY(var(--case-cover-offset))}to{transform:translateY(0)}}
html[data-case-cover=road-preview]::view-transition-new(root){
  animation-name:road-background-in;
  transform-origin:var(--road-cover-origin,top left);
}
@keyframes road-background-in{
  from{transform:translate(var(--road-cover-x,-2%),var(--road-cover-y,100%)) rotate(var(--road-cover-angle,20deg)) scale(var(--road-cover-scale))}
  to{transform:translate(0,0) rotate(0deg) scale(1)}
}
[data-road-entry=background] [data-project-entry-part]{visibility:hidden}
/* The existing SPA grid opens sideways while the BYD space expands from the
   same gap behind it. Complete outgoing cards stay opaque throughout. */
html[data-case-cover=cabin-bridge]::view-transition-group(root){z-index:0}
html[data-case-cover=cabin-bridge]::view-transition-old(root){animation:spa-bridge-underlay 1100ms linear both}
html[data-case-cover=cabin-bridge]::view-transition-new(root){animation:spa-bridge-space 1100ms cubic-bezier(.32,.05,.18,1) both}
html[data-case-cover=cabin-bridge]::view-transition-group(spa-bridge-card-0),
html[data-case-cover=cabin-bridge]::view-transition-group(spa-bridge-card-1),
html[data-case-cover=cabin-bridge]::view-transition-group(spa-bridge-card-2),
html[data-case-cover=cabin-bridge]::view-transition-group(spa-bridge-card-3),
html[data-case-cover=cabin-bridge]::view-transition-group(spa-bridge-card-4),
html[data-case-cover=cabin-bridge]::view-transition-group(spa-bridge-card-5){z-index:2;animation:none}
html[data-case-cover=cabin-bridge]::view-transition-old(spa-bridge-card-0),
html[data-case-cover=cabin-bridge]::view-transition-old(spa-bridge-card-1),
html[data-case-cover=cabin-bridge]::view-transition-old(spa-bridge-card-3){animation:spa-bridge-left 1100ms cubic-bezier(.45,0,.22,1) both;mix-blend-mode:normal}
html[data-case-cover=cabin-bridge]::view-transition-old(spa-bridge-card-2),
html[data-case-cover=cabin-bridge]::view-transition-old(spa-bridge-card-4),
html[data-case-cover=cabin-bridge]::view-transition-old(spa-bridge-card-5){animation:spa-bridge-right 1100ms cubic-bezier(.45,0,.22,1) both;mix-blend-mode:normal}
html[data-case-cover=cabin-bridge]::view-transition-group(byd-bridge-title),
html[data-case-cover=cabin-bridge]::view-transition-group(byd-bridge-controls),
html[data-case-cover=cabin-bridge]::view-transition-group(byd-bridge-preview){z-index:3;animation:none}
html[data-case-cover=cabin-bridge]::view-transition-new(byd-bridge-title){animation:spa-bridge-label 300ms 740ms ease-out both}
html[data-case-cover=cabin-bridge]::view-transition-new(byd-bridge-controls),
html[data-case-cover=cabin-bridge]::view-transition-new(byd-bridge-preview){animation:spa-bridge-label 260ms 800ms ease-out both}
html[data-case-cover=cabin-bridge]::view-transition-group(portfolio-navigation){z-index:4}
@keyframes spa-bridge-underlay{0%,30%{opacity:1}75%,100%{opacity:0}}
@keyframes spa-bridge-space{0%{clip-path:inset(var(--spa-bridge-inset))}74%,100%{clip-path:inset(0)}}
@keyframes spa-bridge-left{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--spa-bridge-travel)))}}
@keyframes spa-bridge-right{from{transform:translateX(0)}to{transform:translateX(var(--spa-bridge-travel))}}
@keyframes spa-bridge-label{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
[data-cabin-bridge] .cabin-panel{animation:none!important}

/* Let the browser pin the canvas on the scroll compositor. The shell extends
   behind the directory while its negative margin keeps the directory in flow. */
@media(prefers-reduced-motion:no-preference){
  body:not([data-tuning-open=true]) #optical-studio .art-shell:has(.art[data-entrance-complete=true]:not(:fullscreen)){
    height:200dvh;
    margin-bottom:-100dvh;
    align-items:flex-start;
    overflow:visible;
  }
  body:not([data-tuning-open=true]) #optical-studio .art[data-entrance-complete=true]:not(:fullscreen){
    position:sticky;
    top:0;
    z-index:2;
    background:#000;
  }
  body:not([data-tuning-open=true]) #optical-studio:has(.art[data-entrance-complete=true]:not(:fullscreen)) ~ #case-directory{
    position:relative;
    z-index:3;
  }
  #optical-studio[data-home-flow=complete] .art{
    visibility:hidden;
  }
}
.art[data-drain-awaiting-frame] > #canvas{visibility:hidden}
body:not([data-tuning-open=true]) #optical-studio[data-home-flow] .art[data-entrance-complete=true]:not(:fullscreen) > :is(.portfolio-type,.fluid-style-switch){
  opacity:clamp(0,calc(1 - 3 * var(--home-flow-progress)),1);
}
body:not([data-tuning-open=true]) #optical-studio[data-home-flow=drain]:has(.art[data-entrance-complete=true]:not(:fullscreen)) ~ #case-directory{background:transparent}
body:not([data-tuning-open=true]) #optical-studio[data-home-flow=drain]:has(.art[data-entrance-complete=true]:not(:fullscreen)) ~ #case-directory :is(.directory-board,.figma-frame){
  background:transparent!important;
}