@font-face {
  font-family:'Zhuwei Sans';
  src:url('./assets/fonts/brand-sans.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
:root {
  --ink:#1d2638; --muted:#737b89; --accent:#315fbd; --green:#147a52; --orange:#a95805; --purple:#7048ad; --line:#e2e5ea; --page:#f3f4f6;
  --site-header-height:80px;
  --header-logo-width:150px; --header-slogan-size:14px; --header-padding:24px; --header-brand-gap:16px;
  --logo-rgb:49 95 189;
  --edge-rgb:49 95 189;
  --edge-wash:
    linear-gradient(90deg,rgb(var(--edge-rgb) / .22),rgb(var(--edge-rgb) / .08) 9%,transparent 27%),
    linear-gradient(270deg,rgb(var(--edge-rgb) / .22),rgb(var(--edge-rgb) / .08) 9%,transparent 27%),
    linear-gradient(180deg,rgb(var(--edge-rgb) / .18),rgb(var(--edge-rgb) / .06) 10%,transparent 29%),
    linear-gradient(0deg,rgb(var(--edge-rgb) / .20),rgb(var(--edge-rgb) / .07) 10%,transparent 29%);
  --font:'Zhuwei Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  color-scheme:light; font-family:var(--font); font-synthesis:none; scroll-padding-top:40px;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased; overflow-anchor:none; }
h1,h2,h3,p { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
a[href],button:not(:disabled),[role="button"]:not([aria-disabled="true"]),summary { cursor:pointer; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
::selection { background:#d5defd; color:#203ba6; }
:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; z-index:100; top:12px; left:24px; background:white; padding:14px 20px; transform:translateY(-160%); opacity:0; pointer-events:none; border-radius:6px; }
.skip-link:focus { transform:none; opacity:1; pointer-events:auto; }
.site-header { position:fixed; top:0; left:0; right:0; z-index:40; height:var(--site-header-height); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 var(--header-padding); }
.site-header[hidden] { display:none; }
.header-brand { display:flex; align-items:center; min-width:0; }
.header-slogan { position:relative; margin-left:var(--header-brand-gap); padding-left:calc(var(--header-brand-gap) + 1px); font-family:Arial,Helvetica,sans-serif; font-size:var(--header-slogan-size); font-weight:400; line-height:1.4; color:#687991; }
.header-slogan::before { content:''; position:absolute; left:0; top:50%; width:1px; height:18px; transform:translateY(-50%); background:#c8cfd9; }
.brand { display:flex; align-items:center; flex-shrink:0; }
.brand-logo { display:block; flex:none; width:var(--header-logo-width); height:auto; color:rgb(var(--logo-rgb)); }
.site-header nav { display:flex; align-items:center; gap:38px; flex-shrink:0; white-space:nowrap; }
.site-header nav a { font-size:14px; padding:10px 0; color:#535d6d; transition:color .2s; }
.site-header nav a:hover { color:var(--accent); }
.site-header nav a>span { padding-left:7px; color:var(--accent); }
.journey { height:480svh; position:relative; }
.journey-stage { position:sticky; top:0; height:100svh; overflow:hidden; background:var(--edge-wash),var(--page); isolation:isolate; }
#world { position:absolute; inset:0; width:100%; height:100%; display:block; mask-image:linear-gradient(to right,rgba(0,0,0,.12) 0%,rgba(0,0,0,.2) 24%,#000 46%); }
.screen-layer { position:absolute; inset:0; z-index:1; pointer-events:none; }
#screen-viewport.is-embedded { overflow:clip; background:#fff; backface-visibility:hidden; }
#screen-content { position:relative; background:#fff; }
.is-entering-screen #world { mask-image:none; }
.screen-is-open .scroll-progress { visibility:hidden; }
.story-copy { position:absolute; z-index:2; left:7.2%; top:31%; width:35%; max-width:565px; pointer-events:none; }
.story { position:absolute; inset:0 auto auto 0; width:100%; opacity:0; transform:translateY(13px); transition:opacity .24s ease,transform .38s ease; pointer-events:none; }
.story.is-active { opacity:1; transform:none; pointer-events:auto; }
.brand-culture { position:absolute; top:-12px; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:400; letter-spacing:.06em; color:#7e8ba4; }
.story h1,.story h2 { font-size:clamp(64px,5vw,76px); font-weight:560; letter-spacing:-.025em; line-height:1.38; margin:23px 0 0 -3px; white-space:nowrap; }
.story em { font-style:normal; color:var(--accent); }
.story .brand-title { margin:17px 0 0; line-height:1; }
.brand-title img { display:block; width:100%; max-width:440px; height:auto; }
.brand-statement { margin-top:27px; color:var(--accent); font-size:29px; font-weight:460; letter-spacing:.04em; }
.story[data-scene="1"] em { color:var(--green); }
.story[data-scene="2"] em { color:var(--orange); }
.story[data-scene="3"] em { color:var(--purple); }
.story-description { font-size:15px; line-height:1.9; margin-top:23px; color:#77808f; letter-spacing:.5px; }
.explore-button { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:13px; letter-spacing:1.6px; color:#687991; background:none; border:0; padding:8px 0; margin-top:23px; border-radius:0; transition:color .2s; }
.explore-button:hover,.explore-button:focus-visible { color:var(--accent); }
.explore-button>span { animation:swipe-hint 2.4s ease-in-out infinite; animation-play-state:paused; }
.story.is-active .explore-button>span { animation-play-state:running; }
@keyframes swipe-hint {
  0%,70%,100% { transform:translateY(0); filter:drop-shadow(0 0 3px rgb(49 95 189 / .14)); }
  28% { transform:translateY(-6px); filter:drop-shadow(0 0 6px rgb(49 95 189 / .45)); }
  43% { transform:translateY(0); filter:drop-shadow(0 0 4px rgb(49 95 189 / .24)); }
  55% { transform:translateY(-2px); filter:drop-shadow(0 0 5px rgb(49 95 189 / .32)); }
}
.scroll-cue { position:relative; display:block; flex:none; width:16px; height:30px; overflow:hidden; }
.scroll-cue::before { content:''; position:absolute; top:1px; bottom:1px; left:7px; width:1px; background:linear-gradient(transparent,#bdc9df 30%,#bdc9df 70%,transparent); }
.scroll-cue-trace { position:absolute; bottom:1px; left:6px; width:3px; height:12px; border-radius:2px; background:linear-gradient(to top,transparent,var(--accent)); animation:swipe-cue 2.4s cubic-bezier(.32,0,.2,1) infinite; animation-play-state:paused; }
.story.is-active .scroll-cue-trace { animation-play-state:running; }
@keyframes swipe-cue {
  0%,10% { transform:translateY(4px); opacity:0; }
  25% { opacity:1; }
  65% { transform:translateY(-18px); opacity:0; }
  100% { transform:translateY(-18px); opacity:0; }
}
.scene-status { position:absolute; left:67%; top:52%; transform:translate(-50%,-50%); font-size:11px; color:#8793aa; display:flex; align-items:center; gap:12px; white-space:nowrap; }
.scene-status[hidden] { display:none; }
.loading-orbit { display:block; width:18px; height:18px; border:1px solid #d7deec; border-top-color:var(--accent); border-radius:50%; animation:loading 1s linear infinite; }
@keyframes loading { to { transform:rotate(360deg); } }
.scroll-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:#e2e6ed; }
.scroll-progress span { display:block; height:100%; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left center; }
@media(min-width:1600px) {
  :root{--header-padding:32px}
}
@media(max-width:760px) {
  :root{--site-header-height:64px;--header-logo-width:120px;--header-slogan-size:11px;--header-padding:12px;--header-brand-gap:10px}
  .header-slogan{max-width:106px}
}
@media(max-width:760px) and (max-height:610px) {
  :root{--site-header-height:56px;--header-logo-width:112px}
}
@media(min-width:1700px) {
  .story-copy{top:32%}
}
@media(max-width:1100px) {
  .story-copy{left:6%;width:40%;top:29%}.story h1,.story h2{font-size:clamp(44px,5.25vw,58px)}.story-description{font-size:14px}
  .brand-statement{font-size:25px}
}
@media(max-width:700px) {
  .brand-culture{top:-14px;font-size:12px;letter-spacing:.04em}
  #world{mask-image:linear-gradient(to bottom,transparent 16%,rgba(0,0,0,.15) 32%,#000 51%)}
  :root{scroll-padding-top:var(--site-header-height)}.site-header{gap:10px}.site-header nav{gap:16px}.site-header nav a{font-size:12px}.site-header nav a>span{padding-left:3px}
  .journey{height:510svh}.story-copy{left:8%;top:19%;width:84%;max-width:none}
  .story h1,.story h2{font-size:clamp(38px,10vw,42px);margin-top:13px;line-height:1.38;letter-spacing:-.025em}.story-description{font-size:13px;line-height:1.9;margin-top:15px;letter-spacing:0}
  .story .brand-title{margin-top:18px}.brand-title img{max-width:320px}.brand-statement{font-size:23px;margin-top:17px}
  .explore-button{margin-top:13px;font-size:12px}.scene-status{left:50%;top:67%;font-size:12px}
}
@media(max-width:360px) {
  .site-header nav{gap:12px}.story-copy{top:17%}.story h1,.story h2{font-size:38px}
}
@media(prefers-reduced-motion:reduce) {
  .story,.explore-button{transition:none}.loading-orbit{animation:none}
  .explore-button>span{animation:none;transform:none;filter:drop-shadow(0 0 3px rgb(49 95 189 / .14))}
  .scroll-cue-trace{animation:none;transform:translateY(-8px);opacity:.7}
}