/* 落地页 · Dimension 风格（对齐 _opt_src/site-ui） */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(15px,3.8vw,17px)}
body,button,a,[role="button"]{touch-action:manipulation}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  font-family:"Source Sans Pro","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#1b1f22;color:#fff;line-height:1.5;
  overflow-x:hidden;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}

#bg{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  transform:scale(1.04);overflow:hidden;background-color:#151515;
}
#bg .bg-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
  transform:translateZ(0);
}
#bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(27,31,34,.55);
}
@media(min-width:48em){#bg{transform:scale(1.08)}}
@media(min-width:75em){#bg{transform:scale(1.1)}}

/* 文案首屏即显，动画不挡可读性 */
#main-title{opacity:1;transform:none}

#wrapper{
  position:relative;z-index:2;
  padding:.85rem min(1rem,4vw) 1.75rem;
  min-height:100vh;min-height:100dvh;
  width:100%;max-width:100%;
  display:flex;flex-direction:column;justify-content:center;
  box-sizing:border-box;
}
@media(min-width:36em){#wrapper{padding:1.25rem min(1.5rem,5vw) 2.25rem}}
@media(min-width:62em){#wrapper{padding:2.5rem 2rem 3rem}}

@keyframes site-title-line-in{
  from{opacity:0;transform:scaleX(.35)}
  to{opacity:1;transform:scaleX(1)}
}
@keyframes site-bridge-line-in{
  from{opacity:0;transform:scaleY(.2)}
  to{opacity:1;transform:scaleY(1)}
}
@keyframes site-nav-box-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

#header{
  width:100%;max-width:min(100%,28rem);
  margin:0 auto;padding:0 .35rem;
  --title-nav-stack:1.65rem;
}
@media(min-width:36em){#header{--title-nav-stack:2.15rem}}
@media(min-width:56.25em){#header{--title-nav-stack:2.85rem}}

#header>*{margin-top:1.65rem;position:relative}
#header>:first-child{margin-top:0}
@media(min-width:36em){
  #header>*{margin-top:2.15rem}
  #header>*:before{
    content:"";position:absolute;
    top:calc(-2.15rem - 1px);left:calc(50% - 1px);
    width:1px;height:calc(2.15rem + 1px);
    background:rgba(255,255,255,.92);
  }
  #header>:first-child:before{display:none}
}
@media(min-width:56.25em){
  #header>*{margin-top:2.85rem}
  #header>*:before{top:calc(-2.85rem - 1px);height:calc(2.85rem + 1px)}
}

#header .content{position:relative;z-index:2;width:100%}
#header .content::before,
#header .content::after{
  content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 8%,rgba(255,255,255,.92) 22%,rgba(255,255,255,.92) 78%,rgba(255,255,255,.15) 92%,transparent 100%);
  transform-origin:center;opacity:0;
  animation:site-title-line-in 1.05s cubic-bezier(.22,.85,.32,1) forwards;
}
#header .content::before{top:0;animation-delay:.08s}
#header .content::after{bottom:0;animation-delay:.28s}
#header .content .inner{padding:.55rem min(1.1rem,4vw) 1.45rem;text-align:center}
@media(min-width:36em){#header .content .inner{padding:.72rem 1.5rem 1.75rem}}

#main-title{
  font-size:clamp(1.45rem,6.9vw,2.55rem);
  margin:0;line-height:1.2;letter-spacing:.1rem;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  word-break:break-word;
  animation:site-nav-box-in .75s ease .05s both;
}

#header .content>.site-axis-bridge{
  position:absolute;left:calc(50% - .5px);top:calc(100% - .5px);
  width:1px;height:calc(var(--title-nav-stack,1.65rem) + .55rem - 1px);
  background:#fff;opacity:0;transform-origin:top center;
  animation:site-bridge-line-in .95s cubic-bezier(.22,.85,.32,1) .24s forwards;
  pointer-events:none;
}

#header nav{
  display:flex;flex-direction:column;align-items:center;
  width:100%;padding:.55rem 0 .65rem;position:relative;z-index:1;
}
#header nav.use-middle:after{display:none!important}
#header nav ul#nav-links{
  display:flex;flex-direction:column;align-items:center;
  width:max-content;max-width:min(100%,26rem);
  margin:0 auto;padding:0;gap:.5rem;
  opacity:0;animation:site-nav-box-in .85s ease .42s forwards;
}
#header nav ul#nav-links li{
  display:flex;justify-content:center;width:auto;max-width:100%;
}
#header nav ul#nav-links li a{
  display:inline-flex;align-items:center;justify-content:center;
  width:max-content;max-width:min(100vw - 2.5rem,26rem);
  min-height:2.85rem;line-height:1.4;
  padding:.78rem 1.65rem;box-sizing:border-box;
  border:solid 1px rgba(255,255,255,.55);border-radius:10px;
  background:rgba(0,0,0,.14);
  letter-spacing:.06em;
  font-size:clamp(.82rem,3.2vw,.98rem);
  word-break:break-word;text-align:center;white-space:normal;
  transition:background-color .2s ease,border-color .2s ease;
}
#header nav ul#nav-links li a:hover,
#header nav ul#nav-links li a:focus-visible{
  background-color:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.72);
  outline:none;
}
#header nav ul#nav-links li a:active{background-color:rgba(255,255,255,.06)}
@media(min-width:36em){
  #header nav ul#nav-links{gap:.55rem}
  #header nav ul#nav-links li a{padding:.88rem 1.9rem;min-height:3rem;border-radius:11px}
}

#footer{
  margin-top:1.5rem;padding:.85rem .75rem .5rem;
  width:100%;max-width:min(100%,28rem);
  margin-left:auto;margin-right:auto;
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;z-index:2;
}
#footer .copyright{
  margin:0;font-size:clamp(.68rem,2.9vw,.78rem);line-height:1.5;
  letter-spacing:.06em;color:rgba(255,255,255,.88);text-align:center;
  word-break:break-word;
}
@media(min-width:48em){
  #footer{margin-top:2rem}
  #footer .copyright{letter-spacing:.2rem;text-transform:uppercase}
}

.fx-snow-root{
  position:fixed;left:0;right:0;top:0;
  height:min(46vh,360px);pointer-events:none;z-index:50;
  overflow:hidden;display:none;
}
.fx-snow-root.is-on{display:block}
.fx-snow-root .flake{
  position:absolute;top:-18px;display:flex;align-items:center;justify-content:center;
  line-height:0;animation:fx-snow-fall linear infinite;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.35));pointer-events:none;
}
.fx-snow-root .flake svg{display:block;overflow:visible}
@keyframes fx-snow-fall{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(var(--snow-drift,0px),min(46vh,360px),0) rotate(360deg);opacity:.15}
}

.fx-marquee-wrap{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(0,0,0,.75);color:#fff;
  font-size:clamp(.72rem,3.1vw,.95rem);
  padding:.4rem 0;border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:calc(.4rem + env(safe-area-inset-bottom,0));
  overflow:hidden;
}
.fx-marquee-inner{
  display:flex;width:max-content;white-space:nowrap;
  animation:fx-marquee-scroll 20s linear infinite;
}
.fx-marquee-inner span{flex:0 0 auto;padding-right:2.5rem}
@keyframes fx-marquee-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
body.has-marquee #wrapper{
  padding-bottom:calc(2.75rem + env(safe-area-inset-bottom,0));
}

@media(prefers-reduced-motion:reduce){
  #header .content::before,#header .content::after,
  #main-title,#header nav ul#nav-links,#header .content>.site-axis-bridge{animation:none!important;opacity:1!important;transform:none!important}
  .fx-marquee-inner{animation:none}
}