:root{--gold:236,219,140;--white:248,248,244}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:rgb(var(--white)); user-select:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
#film{position:fixed;inset:0;overflow:hidden;background:#000;isolation:isolate}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.shot{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;background:#000}
.shot.active{opacity:1}
.asset{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform,filter,opacity}
.asset img{display:block;width:100%;height:auto}
#macroA .asset{width:min(calc(var(--vw,1vw) * 188),2280px)}
#macroB .asset{width:min(calc(var(--vw,1vw) * 158),1920px)}
#resolve .asset{width:clamp(150px,calc(var(--vw,1vw) * 19),320px)}
#english .asset{width:min(calc(var(--vw,1vw) * 75),1120px)}
#chinese .asset{width:min(calc(var(--vw,1vw) * 63),920px)}
#brandHold .asset{width:min(calc(var(--vw,1vw) * 72),1080px);top:45.8%}
.goldMist{position:absolute;left:50%;top:50%;width:calc(var(--vw,1vw) * 76);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--gold),.10),rgba(var(--gold),.018) 34%,transparent 68%);filter:blur(42px);opacity:.75}
.scan{position:absolute;inset:-35% -10%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.025) 47%,rgba(255,250,225,.58) 49.82%,rgba(255,255,255,.94) 50%,rgba(255,250,225,.20) 50.28%,transparent 54%);mix-blend-mode:screen;transform:translateX(-85%)}
.slice{position:absolute;left:0;width:100%;height:12.5%;overflow:hidden;background:#000;border-top:1px solid rgba(255,255,255,.012);border-bottom:1px solid rgba(255,255,255,.012)}
.slice img{position:absolute;width:min(calc(var(--vw,1vw) * 73),1120px);left:50%;transform:translateX(-50%)}
.s1{top:25%}.s2{top:37.5%}.s3{top:50%}.s4{top:62.5%}
.kicker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(10px,calc(var(--vw,1vw) * .8),13px);font-weight:720;letter-spacing:.38em;color:rgba(255,255,255,.5)}
.word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(80px,calc(var(--vw,1vw) * 14),230px);letter-spacing:-.065em;color:#fff;white-space:nowrap}
.word.ghost{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.17)}
.brandCopy{position:absolute;left:50%;top:calc(45.8% + clamp(108px,calc(var(--vw,1vw) * 11),166px));transform:translateX(-50%);text-align:center;width:min(calc(var(--vw,1vw) * 88),1050px)}
.brandCopy .zh{font-size:clamp(22px,calc(var(--vw,1vw) * 2),34px);font-weight:560;letter-spacing:.10em;white-space:nowrap}
.brandCopy .en{margin-top:13px;font-size:clamp(9px,calc(var(--vw,1vw) * .72),12px);font-weight:680;letter-spacing:.32em;color:rgba(255,255,255,.36)}
.brandCopy .line{width:0;height:1px;margin:20px auto 16px;background:linear-gradient(90deg,transparent,rgba(var(--gold),.82),transparent)}
.brandCopy .os{font-size:clamp(9px,calc(var(--vw,1vw) * .68),11px);font-weight:720;letter-spacing:.33em;color:rgba(255,255,255,.24)}
#teaser .haloCore{position:absolute;left:50%;top:47%;width:min(820px,calc(var(--vw,1vw) * 72));aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(255,248,220,.10) 0%,rgba(var(--gold),.07) 14%,rgba(var(--gold),.025) 28%,rgba(0,0,0,0) 62%);filter:blur(30px)}
#teaser .haloRing,#teaser .haloRing2{position:absolute;left:50%;top:47%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,245,210,.18);box-shadow:0 0 42px rgba(var(--gold),.12), inset 0 0 24px rgba(255,255,255,.025)}
#teaser .haloRing{width:min(520px,calc(var(--vw,1vw) * 46));aspect-ratio:1}
#teaser .haloRing2{width:min(760px,calc(var(--vw,1vw) * 64));aspect-ratio:1;border-color:rgba(255,245,210,.07)}
#teaser .orbital{position:absolute;left:50%;top:47%;width:min(860px,calc(var(--vw,1vw) * 74));aspect-ratio:1;transform:translate(-50%,-50%)}
#teaser .orbital::before,#teaser .orbital::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:rgba(255,251,234,.9);box-shadow:0 0 18px rgba(255,251,234,.9),0 0 40px rgba(var(--gold),.55)}
#teaser .orbital::before{animation:orbit 10s linear infinite}
#teaser .orbital::after{animation:orbit2 14s linear infinite}
@keyframes orbit{from{transform:translate(-50%,-50%) rotate(0deg) translateX(min(260px,calc(var(--vw,1vw) * 23)))}to{transform:translate(-50%,-50%) rotate(360deg) translateX(min(260px,calc(var(--vw,1vw) * 23)))}}
@keyframes orbit2{from{transform:translate(-50%,-50%) rotate(180deg) translateX(min(380px,calc(var(--vw,1vw) * 32))) scale(.8)}to{transform:translate(-50%,-50%) rotate(540deg) translateX(min(380px,calc(var(--vw,1vw) * 32))) scale(.8)}}
#teaser .teaserWrap{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);text-align:center;width:min(calc(var(--vw,1vw) * 86),1100px)}
#teaser .desktopMark{display:flex;justify-content:center;align-items:center;margin-bottom:28px}
#teaser .monitorIcon{width:clamp(90px,calc(var(--vw,1vw) * 8.8),152px);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 0 28px rgba(var(--gold),.14))}
#teaser .monitorScreen{width:100%;aspect-ratio:1.18/0.78;border-radius:18px;border:1px solid rgba(255,248,226,.20);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:0 0 28px rgba(var(--gold),.14), inset 0 0 36px rgba(255,255,255,.03);padding:8px}
#teaser .monitorGlow{width:100%;height:100%;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:radial-gradient(circle at 50% 38%,rgba(255,247,207,.18),rgba(255,255,255,.04) 34%,rgba(0,0,0,.20) 92%);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
#teaser .monitorGlow::before{content:"";position:absolute;left:12px;top:10px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.62);box-shadow:10px 0 0 rgba(255,255,255,.22),20px 0 0 rgba(255,255,255,.22)}
#teaser .monitorLogo{position:relative;z-index:2;width:60%;height:auto;opacity:.96;filter:drop-shadow(0 0 12px rgba(255,255,255,.12)) drop-shadow(0 0 18px rgba(var(--gold),.10))}
#teaser .monitorStand{width:20%;height:14px;margin-top:8px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.08));box-shadow:0 0 14px rgba(var(--gold),.10)}
#teaser .monitorBase{width:48%;height:7px;margin-top:6px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.05));box-shadow:0 0 18px rgba(var(--gold),.12)}
#teaser .month{font-size:clamp(44px,calc(var(--vw,1vw) * 5.4),96px);font-weight:720;letter-spacing:.03em;white-space:nowrap;text-shadow:0 0 24px rgba(255,255,255,.05),0 0 60px rgba(var(--gold),.16)}
#teaser .month .n10{letter-spacing:0}
#teaser .month .unit{margin-left:.08em}
#teaser .expect{margin-top:18px;font-size:clamp(16px,calc(var(--vw,1vw) * 1.5),28px);font-weight:560;letter-spacing:.42em;color:rgba(255,255,255,.86)}
#teaser .divider{width:0;height:1px;margin:24px auto 24px;background:linear-gradient(90deg,transparent,rgba(var(--gold),.9),transparent)}
#teaser .impact{font-size:clamp(18px,calc(var(--vw,1vw) * 2.15),40px);font-weight:560;letter-spacing:.12em;color:rgba(255,255,255,.94);white-space:nowrap;text-shadow:0 0 26px rgba(255,255,255,.045),0 0 72px rgba(var(--gold),.14)}
#teaser .impactSmall{margin-top:14px;font-size:clamp(9px,calc(var(--vw,1vw) * .72),12px);font-weight:700;letter-spacing:.35em;color:rgba(255,255,255,.28)}
#flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:22;pointer-events:none}
#shutter{position:absolute;inset:0;z-index:21;pointer-events:none;opacity:0;background:linear-gradient(90deg,#000 0 48%,transparent 48% 52%,#000 52% 100%);transform:scaleX(1.2)}
#grain{position:absolute;inset:-45%;z-index:25;pointer-events:none;opacity:.045;background-image:radial-gradient(circle,#fff .42px,transparent .55px),radial-gradient(circle,#fff .32px,transparent .50px);background-size:4px 4px,7px 7px;background-position:0 0,2px 3px;animation:grain .20s steps(2,end) infinite}
#vignette{position:absolute;inset:-3%;z-index:24;pointer-events:none;background:radial-gradient(ellipse at center,transparent 41%,rgba(0,0,0,.25) 67%,rgba(0,0,0,.9) 100%)}
#bars::before,#bars::after{content:"";position:absolute;left:0;width:100%;height:calc(var(--vh,1vh) * 5.5);background:#000;z-index:30}
#bars::before{top:0}#bars::after{bottom:0}
#muteBtn{position:absolute;right:clamp(18px,calc(var(--vw,1vw) * 2.6),34px);bottom:clamp(18px,calc(var(--vw,1vw) * 2.8),30px);z-index:60;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:rgba(255,255,255,.66);cursor:pointer;display:grid;place-items:center;transition:.28s ease;outline:none}
#muteBtn:hover{border-color:rgba(var(--gold),.28);color:#fff;background:rgba(255,255,255,.04)}
#muteBtn svg{width:18px;height:18px;display:block}
#muteBtn .offSlash{opacity:0;transition:.2s ease}
#muteBtn.muted .offSlash{opacity:1}
#muteBtn.muted .wave{opacity:.22}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(1.1%,-.8%)}50%{transform:translate(-.8%,1.1%)}75%{transform:translate(.6%,.4%)}100%{transform:translate(0,0)}}
@media(max-width:760px){
  #bars::before,#bars::after{height:calc(var(--vh,1vh) * 3.8)}
  #english .asset,#brandHold .asset{width:calc(var(--vw,1vw) * 90)}
  #chinese .asset{width:calc(var(--vw,1vw) * 83)}
  #macroA .asset{width:calc(var(--vw,1vw) * 265)}
  #macroB .asset{width:calc(var(--vw,1vw) * 225)}
  .brandCopy{top:calc(45.8% + 88px)}
  .brandCopy .zh{font-size:clamp(18px,calc(var(--vw,1vw) * 4.8),24px);letter-spacing:.055em}
  #teaser .desktopMark{margin-bottom:20px}
  #teaser .monitorIcon{width:96px}
  #teaser .month{font-size:clamp(30px,calc(var(--vw,1vw) * 10),52px);letter-spacing:.015em}
  #teaser .month .unit{margin-left:.04em}
  #teaser .impact{font-size:clamp(15px,calc(var(--vw,1vw) * 4.7),24px);white-space:normal;line-height:1.4}
  #teaser .expect{font-size:clamp(13px,calc(var(--vw,1vw) * 4),18px);letter-spacing:.22em}
  #muteBtn{width:40px;height:40px}
}

/* Engineering additions: no changes to the original standard viewport composition. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.fallback{position:fixed;inset:35% 5% auto;text-align:center;z-index:100;color:#fff;line-height:2}
#muteBtn:focus-visible{outline:2px solid rgb(var(--gold));outline-offset:4px}
#muteBtn{right:max(clamp(18px,calc(var(--vw,1vw) * 2.6),34px),env(safe-area-inset-right));bottom:max(clamp(18px,calc(var(--vw,1vw) * 2.8),30px),env(safe-area-inset-bottom))}


#audioStatus{position:absolute;z-index:61;right:24px;bottom:76px;max-width:calc(calc(var(--vw,1vw) * 100) - 48px);font-size:13px;line-height:1.5;color:#fff;background:rgba(0,0,0,.8);border-radius:6px;padding:8px 12px;margin:0}#audioStatus:empty{display:none}

/* A viewport-sized stage follows mobile browser chrome without scrolling. */
html,body{overscroll-behavior:none}
#film{overflow:clip;inset:auto;left:0;top:0;width:100%;height:calc(var(--vh,1vh) * 100);height:100dvh}
#stage{position:absolute;inset:0;overflow:hidden}
.brandGroup{position:absolute;inset:0}
#film.compact #stage{inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#film.compact #brandHold .brandGroup{inset:auto;left:50%;top:50%;width:100%;transform:translate(-50%,-50%) scale(var(--brand-scale,1));text-align:center}
#film.compact #brandHold .asset{position:relative;left:auto;top:auto;width:min(90%,600px);margin:0 auto}
#film.compact .brandCopy{position:relative;left:auto;top:auto;width:90%;margin:24px auto 0}
#film.compact .brandCopy .zh{font-size:clamp(16px,calc(var(--vw,1vw) * 4.8),24px);letter-spacing:.055em;white-space:normal;line-height:1.5}
#film.compact .brandCopy .en{font-size:clamp(9px,calc(var(--vw,1vw) * 2),12px);letter-spacing:.22em}
#film.compact #teaser .teaserWrap,#film.compact #teaser .haloCore,#film.compact #teaser .haloRing,#film.compact #teaser .haloRing2,#film.compact #teaser .orbital{top:50%}
#film.compact #teaser .teaserWrap{width:88%;zoom:1}
#film.compact #english .asset{width:min(90%,900px)}
#film.compact #chinese .asset{width:min(83%,760px)}
#film.compact #bars::before,#film.compact #bars::after{height:3.8%}
#muteBtn{width:44px;height:44px;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));touch-action:manipulation}
#audioStatus{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 54px)}