*{box-sizing:border-box}html,body{margin:0;background:#000;color:#f2f0ee;font-family:Arial,"PingFang SC","Microsoft Yahei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #d3ab76;outline-offset:5px}#experience{min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}#plane{position:relative;width:min(100%,177.6833svh);aspect-ratio:1672/941;container-type:inline-size;isolation:isolate;background:#000}.scene{position:absolute;inset:0;pointer-events:none}.scene[data-active=true]{pointer-events:auto}.background,.occlusion{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.background{z-index:0}.behind{z-index:1}.occlusion{z-index:2}.front{z-index:3}.layer{position:absolute;line-height:1.15;display:flex;align-items:center;justify-content:center;transform-origin:center}.layer-image{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.layer-text{font-weight:400;white-space:pre;letter-spacing:0}.layer > .hover{width:100%;height:100%;display:flex;align-items:center;justify-content:inherit;transition:scale .30s cubic-bezier(.12,1,.2,1);transform-origin:center}.layer:hover>.hover{scale:1.18}.layer.behind:hover>.hover,.layer[data-item^="welcome-title"]:hover>.hover{scale:1.24}.glass-black{mix-blend-mode:screen}.separator{background:#767675;opacity:.65}.outline{border:1px solid #c59e6b;border-radius:100px;color:#ddc19a;font-size:1.1cqw;letter-spacing:.12em;padding:0 .8em;justify-content:space-around}#page-controls{position:absolute;inset:0;z-index:9;pointer-events:none}#count,#timeline{position:absolute;pointer-events:auto;color:#d4d0c9;font-size:.96cqw;letter-spacing:.06em;white-space:nowrap;padding:0;text-align:left;line-height:1}#timeline{cursor:pointer;background:none;border:0;touch-action:none}#timeline:before,#timeline:after{content:"";position:absolute;top:50%;left:0;height:1.5px;width:100%;background:#797572}#timeline:after{width:var(--axis-fill);background:linear-gradient(90deg,#cda568,#e2dfd7)}#timeline:focus-visible{outline:1px solid #d3ab76;outline-offset:4px}.transition-video{background:#000;visibility:hidden}
.sr-only{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#mobile-copy{display:none}html[data-motion=off] .hover{transition:none}img{user-select:none;-webkit-user-drag:none}
[data-copy]:not([data-motion=visible]),#page-controls button:not([data-motion=visible]),#count:not([data-motion=visible]){opacity:0}#navigation [data-motion=hidden],#page-controls [data-motion=hidden],[data-copy][data-motion=hidden]{pointer-events:none}
#startup-fallback{position:absolute;inset:0;z-index:20;background:#050505;overflow:hidden}#startup-fallback[hidden]{display:none}#startup-fallback>img{width:100%;height:100%;object-fit:fill}.startup-copy{display:none}#startup-fallback[role=alert] .startup-copy{display:block}.startup-copy{position:absolute;left:5%;right:5%;bottom:5%;padding:24px;background:linear-gradient(90deg,#080808f0,#080808b0);color:#f1ede6}.startup-copy p{font-size:clamp(13px,1.3cqw,20px);line-height:1.5;margin:.4em 0}.startup-copy h1{font-size:clamp(24px,3cqw,48px);font-weight:400;margin:0 0 .5em}.startup-links{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:clamp(12px,1cqw,16px);line-height:1.7}.startup-links a{text-decoration:underline;text-underline-offset:4px}#startup-error{color:#edce9f}
@media(max-width:700px) and (orientation:portrait){#experience{min-height:0;padding-top:86px;align-items:flex-start}#plane{width:100vw;aspect-ratio:1672/730}#scenes{position:absolute;inset:0 0 auto;aspect-ratio:1672/941}#page-controls{inset:auto 22px 0 auto;height:40px;width:140px;background:#000a}#count{left:0!important;top:14px!important;width:60px!important;height:20px!important;font-size:12px}#timeline{left:74px!important;top:0!important;width:65px!important;height:40px!important}.scene .footer-layer{display:none}#mobile-copy{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;padding:28px 24px 50px;min-height:250px;background:#000}#mobile-copy .mobile-item{min-height:28px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px}#mobile-copy img{max-width:100%;max-height:80px;object-fit:contain}#mobile-copy button{border:1px solid #d0aa79;border-radius:40px;padding:12px 20px}.scene .layer-text{font-size:max(10px,var(--font-size))!important}}
/* The native movie covers the full browser width, independently of the copy grid. */
#experience{position:relative;isolation:isolate}#plane{background:transparent;z-index:1}#plane:before{content:"";position:absolute;top:var(--video-height,75.33%);bottom:0;left:calc((100% - 100vw)/2);width:100vw;background:#000;pointer-events:none;z-index:0}#video-stage{position:absolute;left:0;width:100%;top:0;overflow:hidden;background:#000;z-index:0}#video-stage .original-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;visibility:hidden;pointer-events:none;background:#000}.scene{z-index:1}#navigation [data-copy]{opacity:1!important}#navigation>*{transition:left .5s ease,top .5s ease,color .25s ease}#startup-fallback{background:#000}#startup-fallback:not([role=alert]){pointer-events:none}#startup-fallback:not([role=alert]):after{content:"";position:absolute;width:26px;height:26px;left:calc(50% - 13px);top:45%;border:1px solid #b2946c45;border-top-color:#e9cd9b;border-radius:50%;animation:loading-ring 1s linear infinite}@keyframes loading-ring{to{rotate:360deg}}
@media(max-width:700px) and (orientation:portrait){#plane:before{display:none}}

/* The menu owns a separate, opaque strip above every native video surface. */
:root{--media-height-reserve:clamp(72px,6vw,108px);--menu-height:clamp(72px,6vw,108px);--edge-fade:clamp(48px,6vw,120px);--copy-width:min(100vw,calc((100svh - var(--media-height-reserve))*1.776833))}
#experience{padding-top:var(--menu-height);align-items:flex-start}
#plane{width:var(--copy-width)}
#menu-bar{position:fixed;inset:0 0 auto;height:var(--menu-height);display:flex;align-items:center;justify-content:center;background:#080808;z-index:10;overflow:hidden}
#menu-bar>#navigation{position:relative;inset:auto;width:min(100%,1800px);height:auto;aspect-ratio:1672/90;container-type:inline-size}
@media(max-width:700px) and (orientation:portrait){:root{--menu-height:86px;--media-height-reserve:86px}#experience{min-height:0}#menu-bar{position:fixed}#menu-bar>#navigation{width:100%;height:var(--menu-height);aspect-ratio:auto;background:transparent}#menu-bar .brand-monogram{top:7px!important;height:22px!important;width:25px!important}#menu-bar .brand-name{top:9px!important;height:18px!important}#menu-bar .brand-mirror{top:4px!important;height:28px!important}}

/* A wider fade reaches full black at the video edge and conceals the join. */
#video-stage:after{content:"";position:absolute;inset:auto 0 0;height:var(--edge-fade);background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.36) 36%,rgba(0,0,0,.82) 76%,#000 100%);pointer-events:none;z-index:3}

/* Tighten the information band without resizing its lettering or icons. */
@media(min-width:701px),(orientation:landscape){.scene .footer-position,#page-controls #count,#page-controls #timeline{top:calc(var(--video-height) + var(--footer-offset))!important}}

/* A complete original frame has priority over all supporting information. */
#plane{aspect-ratio:auto}
#scenes{position:absolute;inset:0 0 auto;aspect-ratio:1672/941}
#plane:before{top:var(--video-height);bottom:0}
@media(max-width:700px) and (orientation:portrait){.scene .hero-signature{display:none}#mobile-copy{min-height:0;padding-top:16px}#mobile-copy .mobile-item:first-child img{max-height:80px}}

/* Each chapter fits one viewport. Footer copy overlays only the lower floor. */
html,body{min-height:100%;height:auto;overflow-x:clip;overflow-y:visible;overscroll-behavior-y:auto}
html{scrollbar-gutter:stable}
#scene-surface{position:absolute;inset:0}
#after-opening[hidden]{display:none!important}
#experience{display:block;height:100svh;min-height:0;padding:0;overflow:hidden}
#plane{position:absolute;left:50%;transform:translateX(-50%)}
#plane:before{display:block;top:var(--shade-top);bottom:0;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.48) 34%,rgba(0,0,0,.84) 72%,rgba(0,0,0,.94));}
#page-controls{inset:0;width:auto;height:auto;background:transparent}
#page-controls #count{top:auto!important;bottom:16px;height:24px!important;font-size:max(12px,.96cqw)}
#page-controls #timeline{top:auto!important;bottom:7px;height:42px!important}
@media(min-width:701px),(orientation:landscape){.scene .footer-position{top:calc(var(--footer-copy-top,var(--footer-top)) + var(--footer-offset))!important}}
@media(max-width:700px) and (orientation:portrait){
 #plane{width:100vw}
 #page-controls{inset:0 20px 0 auto;width:140px}
 #mobile-copy{position:absolute;z-index:2;top:var(--mobile-copy-top);left:18px;right:18px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 14px;padding:0;min-height:0;background:transparent}
 #mobile-copy .mobile-group{position:relative;container-type:inline-size;grid-column:span 3;align-self:start}
 #mobile-copy[data-scene=hero] .mobile-group{grid-column:span 2}
 #mobile-copy[data-scene=hero] .mobile-group:first-child,#mobile-copy[data-scene=visual] .mobile-group:first-child,#mobile-copy[data-scene=welcome] .mobile-group:first-child{grid-column:span 6}
 #mobile-copy img{width:100%;height:100%;max-height:none;max-width:none;object-fit:contain}
 #mobile-copy button{padding:0;border-width:1px;min-height:26px}
 #mobile-copy .layer-text{font-size:inherit;line-height:1.1;white-space:pre}

}
.pointer-filter-defs{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;pointer-events:none}
/* An original neutral poster paints before the native video is decoded.
   It is outside the initially zero-height copy plane and survives consent. */
#startup-fallback{top:var(--menu-height,80px);bottom:0;left:0;right:0;z-index:5;background:#000}
#startup-fallback>.startup-poster{display:block;width:100%;height:auto;max-height:calc(100svh - var(--menu-height,80px));object-fit:contain;object-position:center top}

@media(prefers-reduced-motion:reduce){#video-stage .original-video{filter:none!important}}

@media(max-width:700px) and (orientation:portrait){#menu-bar>#navigation{padding:0 16px 7px;gap:4px}#menu-bar .nav-item{flex-direction:column;justify-content:center;gap:4px;height:30px!important;font-size:14px}#menu-bar .nav-item span{font-size:8px;line-height:1}}

@media(max-width:700px) and (orientation:portrait){:root{--edge-fade:clamp(28px,8vw,48px)}}

[data-copy][data-motion=entering],[data-copy][data-motion=exiting]{will-change:opacity,translate}
[data-copy][data-motion=visible]{opacity:1!important}
#video-stage[data-settled=false] .original-video{filter:none!important}

/* Immediate hover attack, soft release. */
@media(hover:hover) and (pointer:fine){.layer:hover>.hover{transition-duration:80ms;transition-timing-function:cubic-bezier(.08,1,.14,1)}}

/* v53: fast enlarged attack, long eased release. */
.layer>.hover{transition:scale 1.52s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){.layer:hover>.hover{scale:1.28;transition-duration:90ms;transition-timing-function:cubic-bezier(.08,1,.14,1)}.layer.glass-black:hover>.hover,.layer.hero-signature:hover>.hover{scale:1.34}}

@media(prefers-reduced-motion:reduce){.layer>.hover,#navigation>a,#navigation>.brand-mirror,#navigation>.mirror-en{scale:1!important;transition:none!important}}
html[data-motion=off] :is(.layer>.hover,#navigation>a,#navigation>.brand-mirror,#navigation>.mirror-en){scale:1!important;transition:none!important}

@media(hover:hover) and (pointer:fine){.layer.behind:hover>.hover,.layer[data-item^="welcome-title"]:hover>.hover{scale:1.34}}