:root{
  --bg:#07090c;
  --panel:rgba(255,255,255,.055);
  --panel2:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --accent:#63f2df;
  --accent2:#6aa7ff;
  --shadow:0 24px 80px rgba(0,0,0,.62);
}

.heroSwipeHint{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.0;transition:opacity .28s ease;}
.heroSlider:hover .heroSwipeHint{opacity:.0}
.heroSlider .heroSwipeHint{opacity:1;}
.heroSlider.hint-off .heroSwipeHint{opacity:0!important;animation:none}
.heroSwipeHint .hsh{position:absolute;top:0;bottom:0;width:0.90rem;opacity:.55;filter:blur(0);}
.heroSwipeHint .hsh.left{left:0;background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0));}
.heroSwipeHint .hsh.right{right:0;background:linear-gradient(270deg, rgba(0,0,0,.35), rgba(0,0,0,0));}
.heroSwipeHint .hsh:after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:0.28rem;height:0.28rem;border-top:2px solid rgba(99,242,223,.60);border-right:2px solid rgba(99,242,223,.60);opacity:.75;}
.heroSwipeHint .hsh.left:after{left:0.22rem;transform:translateY(-50%) rotate(-135deg);}
.heroSwipeHint .hsh.right:after{right:0.22rem;transform:translateY(-50%) rotate(45deg);}
.heroSwipeHint{animation:heroHintPulse 2.2s ease-in-out infinite;}
@keyframes heroHintPulse{0%,100%{opacity:.0}15%{opacity:1}55%{opacity:1}100%{opacity:.0}}

@media (max-width:420px){
  .heroSwipeHint .hsh{width:0.78rem}
  .heroSwipeHint .hsh:after{width:0.24rem;height:0.24rem}
}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{position:relative;overflow-x:hidden}
#container{overflow-x:hidden}
body:before{
  content:"";
  position:fixed;
  inset:-12vh -12vw;
  z-index:-2;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(99,242,223,.26), rgba(7,9,12,0) 60%),
    radial-gradient(860px 520px at 112% 18%, rgba(106,167,255,.22), rgba(7,9,12,0) 62%),
    radial-gradient(980px 680px at 52% 120%, rgba(99,242,223,.10), rgba(7,9,12,0) 66%),
    radial-gradient(860px 520px at 44% 42%, rgba(255,255,255,.035), rgba(7,9,12,0) 62%);
  filter:saturate(1.08) contrast(1.05);
  transform:translate3d(0,0,0);
  animation:bgShift 14s ease-in-out infinite;
  pointer-events:none;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0, rgba(255,255,255,.028) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 72px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.020) 0, rgba(255,255,255,.020) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 72px);
  opacity:.14;
  mix-blend-mode:overlay;
  transform:translate3d(0,0,0);
  animation:bgGrid 10.5s linear infinite;
  pointer-events:none;
}

@keyframes bgShift{
  0%{transform:translate3d(0,0,0) scale(1.02);filter:saturate(1.04) contrast(1.05)}
  50%{transform:translate3d(-2.2%,1.1%,0) scale(1.06);filter:saturate(1.12) contrast(1.07)}
  100%{transform:translate3d(0,0,0) scale(1.02);filter:saturate(1.04) contrast(1.05)}
}
@keyframes bgGrid{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-72px,-72px,0)}}

body.ui-enter #container{opacity:.0}
body.ui-ready #container{opacity:1;transition:opacity .42s ease}
body.ui-enter #main{transform:translate3d(0,10px,0);filter:blur(2px)}
body.ui-ready #main{transform:translate3d(0,0,0);filter:blur(0);transition:transform .42s ease, filter .42s ease}

/* App-like interaction primitives */
.ripple-host{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.ripple{
  position:absolute;
  border-radius:999px;
  background:radial-gradient(circle,rgba(106,167,255,.38),rgba(99,242,223,.22) 24%,rgba(255,255,255,0) 62%);
  transform:scale(.15);
  opacity:.0;
  animation:rip .52s ease;
  pointer-events:none;
}
@keyframes rip{0%{transform:scale(.15);opacity:.0}15%{opacity:.35}100%{transform:scale(1.05);opacity:0}}

/* Leave space for bottom navigation */
#container{padding-bottom:1.40rem}

#main{
  contain:layout paint;
}

.heroSlider{
  content-visibility:auto;
  contain-intrinsic-size:240px 300px;
}

.navi{
  content-visibility:auto;
  contain-intrinsic-size:520px 720px;
}

#container{max-width:750px;margin:0 auto;position:relative;min-height:100%}
.clearfix:after{content:"";display:block;clear:both}

/* Top header */
.header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.48rem 0.50rem;
  position:sticky;
  top:0;
  z-index:10;
  background:
    radial-gradient(520px 120px at 50% 0%, rgba(99,242,223,.22), rgba(0,0,0,0) 72%),
    radial-gradient(520px 140px at 90% 0%, rgba(106,167,255,.18), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(10,16,28,.96), rgba(7,9,12,.90));
  border-bottom:1px solid rgba(99,242,223,.22);
  backdrop-filter:none;
}
.header .logo,
.header .menu{display:none}
.header .headerHero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.06rem;cursor:pointer;user-select:none}
.header .headerHero:active{transform:scale(.99)}
.header:after{
  content:"";
  position:absolute;
  left:0.40rem;
  right:0.40rem;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, rgba(99,242,223,0), rgba(99,242,223,.42), rgba(106,167,255,.34), rgba(99,242,223,0));
  opacity:.95;
}

.header:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 64px);
  opacity:.20;
  pointer-events:none;
}
.header .logo img{
  height:0.86rem;
  display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.22));
}
.header .menu a{display:block}
.header .menu img{height:0.66rem;display:block;opacity:.95;filter:drop-shadow(0 10px 22px rgba(0,0,0,.20))}
.header .menu a:active{transform:scale(.98)}

.langSwitchBtn{
  position:absolute;
  right:0.40rem;
  top:50%;
  transform:translateY(-50%);
  height:0.54rem;
  padding:0 0.18rem;
  border-radius:0.18rem;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:rgba(255,255,255,.86);
  font-weight:800;
  letter-spacing:.02em;
  font-size:0.22rem;
  box-shadow:0 14px 42px rgba(0,0,0,.55);
  cursor:pointer;
  user-select:none;
}
.langSwitchBtn:active{transform:translateY(-50%) scale(.99)}

.langPanel{position:fixed;inset:0;z-index:70;opacity:0;pointer-events:none;transition:opacity .20s ease;}
.langPanel.show{opacity:1;pointer-events:auto;}
.langMask{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);}
.langSheet{position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:min(560px, calc(100vw - 0.68rem));background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.22));color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px);border-radius:0.30rem;box-shadow:0 34px 140px rgba(0,0,0,.78);transform:translate(-50%,-50%) scale(.985);transition:transform .20s ease;overflow:hidden;touch-action:pan-y;}
.langPanel.show .langSheet{transform:translate(-50%,-50%) scale(1)}
.langGrab{height:0.16rem;display:flex;align-items:center;justify-content:center;background:transparent;}
.langGrab:before{content:"";display:block;width:0.86rem;height:0.08rem;border-radius:999px;background:rgba(255,255,255,.22);}
.langBar{display:flex;align-items:center;justify-content:space-between;padding:0.26rem 0.28rem;border-bottom:1px solid rgba(255,255,255,.10);}
.langCancel,.langConfirm{appearance:none;border:0;background:transparent;font-size:0.28rem;font-weight:800;cursor:pointer;padding:0.08rem 0.06rem;}
.langCancel{color:rgba(255,255,255,.86)}
.langConfirm{color:#7ff2ff}
.langList{max-height:min(52vh, 520px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.langLoading{padding:0.34rem 0.26rem;color:rgba(255,255,255,.75);font-weight:700;font-size:0.26rem;text-align:center}
.langItem{display:block;width:100%;height:0.90rem;border:0;border-top:1px solid rgba(255,255,255,.10);background:transparent;color:rgba(255,255,255,.92);font-size:0.32rem;font-weight:800;}
.langItem.sel{background:rgba(127,242,255,.10)}

.langToast{
  position:fixed;
  left:50%;
  top:0.92rem;
  transform:translateX(-50%) translateY(-10px);
  opacity:0;
  z-index:96;
  pointer-events:none;
  padding:0.14rem 0.22rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.30));
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:0.22rem;
  box-shadow:0 18px 70px rgba(0,0,0,.62);
  transition:opacity .18s ease, transform .18s ease;
  max-width:min(560px, calc(100vw - 0.60rem));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.langToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.langAutoTrans{position:fixed;left:50%;top:0.88rem;transform:translateX(-50%) translateY(-10px);opacity:0;z-index:95;pointer-events:none;transition:opacity .18s ease, transform .18s ease;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.30));padding:0.14rem 0.22rem;color:rgba(255,255,255,.90);font-weight:800;font-size:0.22rem;box-shadow:0 18px 70px rgba(0,0,0,.62);}
.langAutoTrans.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:420px){
  .langSwitchBtn{right:0.32rem}
  .langSheet{width:calc(100vw - 0.68rem)}
  .langConfirm{color:rgba(99,242,223,.95);font-size:0.28rem}
  .langList{max-height:56vh}
  .langLoading{color:rgba(255,255,255,.72)}
  .langItem{
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.92);
    height:1.02rem;
    font-size:0.36rem;
    font-weight:900;
    letter-spacing:.01em;
    text-align:center;
  }
  .langItem.sel{background:rgba(255,255,255,.08)}
}

@media (min-width:421px) and (max-width:820px){
  .langSwitchBtn{right:0.50rem}
  .langSheet{
    left:0.34rem;
    right:0.34rem;
    bottom:calc(1.18rem + env(safe-area-inset-bottom) + 0.22rem);
    border-radius:0.26rem;
    transform:translateY(18px);
  }
  .langPanel.show .langSheet{transform:translateY(0)}
}

@media (min-width:821px){
  .langSwitchBtn{right:0.70rem}
  .langMask{bottom:0}
  .langSheet{
    left:50%;
    right:auto;
    bottom:auto;
    top:50%;
    width:min(520px, calc(100vw - 1.40rem));
    border-radius:0.28rem;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    color:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 34px 140px rgba(0,0,0,.78);
    backdrop-filter:blur(14px);
    transform:translate(-50%,-50%) scale(.98);
    transition:transform .20s ease;
  }
  .langPanel.show .langSheet{transform:translate(-50%,-50%) scale(1)}
  .langGrab{display:none}
  .langBar{border-bottom:1px solid rgba(255,255,255,.10)}
  .langCancel{color:rgba(255,255,255,.74)}
  .langConfirm{color:rgba(99,242,223,.95)}
  .langItem{border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.92)}
  .langItem.sel{background:rgba(99,242,223,.10)}
}

/* Main */
#main{padding:0 0.50rem}

/* Hero image */
.photo{
  margin:0.24rem 0 0.32rem;
  border-radius:0.30rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:var(--panel);
  box-shadow:var(--shadow);
  position:relative;
}
.photo:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(740px 280px at 18% 18%,rgba(99,242,223,.10),rgba(0,0,0,0)),
             radial-gradient(620px 300px at 92% 38%,rgba(106,167,255,.06),rgba(0,0,0,0));
  pointer-events:none;
}
.photo img{width:100%;display:block;transform:translateZ(0);filter:saturate(1.05) contrast(1.05)}

.heroSlider{
  margin:0.24rem 0 0.32rem;
  border-radius:0.30rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:var(--panel);
  box-shadow:var(--shadow);
  position:relative;
  height:min(240px, 42vw);
  touch-action:pan-y;
}
.heroSlider{
  transform:translateZ(0);
}
.heroSlider:after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(from 180deg, rgba(99,242,223,.00), rgba(99,242,223,.55), rgba(106,167,255,.55), rgba(99,242,223,.00));
  filter:blur(10px);
  opacity:.28;
  animation:heroEdge 4.8s linear infinite;
  pointer-events:none;
}
.heroSlider:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(740px 280px at 18% 18%,rgba(99,242,223,.10),rgba(0,0,0,0)),
             radial-gradient(620px 300px at 92% 38%,rgba(106,167,255,.06),rgba(0,0,0,0));
  pointer-events:none;
}
.heroTrack:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px),
    radial-gradient(860px 340px at 50% 10%, rgba(99,242,223,.10), rgba(0,0,0,0));
  opacity:.10;
  mix-blend-mode:overlay;
  animation:heroScan 6.2s linear infinite;
  pointer-events:none;
}
.heroTrack:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.30), rgba(0,0,0,0) 60%),
    radial-gradient(2px 2px at 38% 62%, rgba(99,242,223,.26), rgba(0,0,0,0) 60%),
    radial-gradient(2px 2px at 78% 28%, rgba(106,167,255,.24), rgba(0,0,0,0) 60%),
    radial-gradient(2px 2px at 86% 78%, rgba(255,255,255,.22), rgba(0,0,0,0) 60%);
  opacity:.10;
  filter:blur(.2px);
  animation:heroNoise 3.4s steps(2,end) infinite;
  pointer-events:none;
}
.heroTrack{
  height:100%;
  display:flex;
  width:100%;
  transform:translate3d(0,0,0);
  will-change:transform;
  transition:transform .55s cubic-bezier(.2,.9,.2,1);
}
.heroTrack.drag{transition:none}
.heroSlide{
  min-width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.18));
}
.heroSlide{position:relative}
.heroSlide img{transition:transform .85s cubic-bezier(.16,1,.3,1), filter .85s cubic-bezier(.16,1,.3,1)}
.heroSlide.active img{transform:scale(1.03) translateZ(0);filter:saturate(1.10) contrast(1.12) drop-shadow(0 22px 50px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(99,242,223,.14))}
.heroTrack.drag .heroSlide img{transition:none}
.heroSlider.glitch .heroTrack{filter:hue-rotate(2deg) saturate(1.05)}
.heroSlider.glitch:before{opacity:.22}
.heroSlider.glitch .heroTrack:before{opacity:.18}
.heroSlider.glitch .heroTrack:after{opacity:.18}

.heroSlider.glitch .heroSlide.active:before,
.heroSlider.glitch .heroSlide.active:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(720px 280px at 50% 50%, rgba(99,242,223,.16), rgba(0,0,0,0));
  mix-blend-mode:screen;
  opacity:.0;
  pointer-events:none;
}
.heroSlider.glitch .heroSlide.active:before{animation:heroGlitchA .18s steps(2,end) 1}
.heroSlider.glitch .heroSlide.active:after{animation:heroGlitchB .18s steps(2,end) 1}

.heroSlider.glitch .heroSlide.active img{
  animation:heroGlitchImg .18s steps(2,end) 1;
}
.heroSlide img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:saturate(1.05) contrast(1.05);
  transform:translateZ(0);
  user-select:none;
}
.heroDots{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.heroDot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.30);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  padding:0;
}
.heroDot.on{
  width:18px;
  background:linear-gradient(90deg,rgba(99,242,223,.92),rgba(106,167,255,.88));
  border-color:rgba(99,242,223,.42);
}

@keyframes heroEdge{0%{transform:translateZ(0) rotate(0deg)}100%{transform:translateZ(0) rotate(360deg)}}
@keyframes heroScan{0%{transform:translateY(-8%)}100%{transform:translateY(8%)}}
@keyframes heroNoise{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-1%,.5%,0)}50%{transform:translate3d(.8%,-.6%,0)}75%{transform:translate3d(-.6%,-.4%,0)}100%{transform:translate3d(0,0,0)}}

@keyframes heroGlitchImg{
  0%{transform:scale(1.03) translate3d(0,0,0);filter:saturate(1.10) contrast(1.12)}
  30%{transform:scale(1.03) translate3d(-2px,1px,0);filter:saturate(1.15) contrast(1.18)}
  60%{transform:scale(1.03) translate3d(2px,-1px,0);filter:saturate(1.12) contrast(1.14)}
  100%{transform:scale(1.03) translate3d(0,0,0);filter:saturate(1.10) contrast(1.12)}
}
@keyframes heroGlitchA{
  0%{opacity:.0;transform:translate3d(0,0,0)}
  35%{opacity:.55;transform:translate3d(-6px,0,0)}
  70%{opacity:.18;transform:translate3d(6px,0,0)}
  100%{opacity:0;transform:translate3d(0,0,0)}
}
@keyframes heroGlitchB{
  0%{opacity:.0;transform:translate3d(0,0,0)}
  35%{opacity:.42;transform:translate3d(6px,0,0)}
  70%{opacity:.14;transform:translate3d(-6px,0,0)}
  100%{opacity:0;transform:translate3d(0,0,0)}
}

@media (prefers-reduced-motion: reduce){
  .heroTrack{transition:none}
  .heroSlide img{transition:none}
  .heroSlider:after,.heroTrack:before,.heroTrack:after{animation:none}
  .heroSlider.glitch .heroSlide.active img{animation:none}
}

@media (max-width:420px){
  .heroSlider{height:min(210px, 56vw);border-radius:0.28rem}
}

@media (min-width:821px){
  .heroSlider{height:300px;border-radius:0.34rem}
}

.heroTitle,.heroSub{position:relative;}
.heroTitle span,.heroSub span{display:inline-block;}

.heroTitle span,.heroSub span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.heroTitle{
  font-weight:900;
  font-size:0.48rem;
  letter-spacing:0.08rem;
  text-transform:uppercase;
}
.heroSub{
  font-weight:800;
  font-size:0.34rem;
  letter-spacing:0.12rem;
  opacity:.96;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.18rem;
}

.heroTitle span,.heroSub span{
  color:transparent;
  background:linear-gradient(90deg, rgba(99,242,223,.98), rgba(106,167,255,.96), rgba(99,242,223,.98));
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(99,242,223,.18));
  animation:heroShimmer 2.8s linear infinite;
}

.heroTitle:before,.heroSub:before{
  content:"";
  position:absolute;
  inset:-0.12rem -0.18rem;
  border-radius:0.28rem;
  background:radial-gradient(220px 90px at 50% 50%,rgba(99,242,223,.18),rgba(0,0,0,0)),
             radial-gradient(240px 90px at 50% 50%,rgba(106,167,255,.12),rgba(0,0,0,0));
  opacity:.55;
  mix-blend-mode:screen;
  filter:blur(10px);
  animation:heroPulse 2.6s ease-in-out infinite;
}

.heroTitle:after{
  content:"";
  position:absolute;
  left:-40%;
  top:-50%;
  width:180%;
  height:200%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.20) 50%, rgba(255,255,255,0) 65%);
  transform:rotate(8deg);
  opacity:.55;
  animation:heroSweep 3.4s ease-in-out infinite;
  mix-blend-mode:screen;
}

.header .headerHero{animation:heroFloat 3.6s ease-in-out infinite;}

@keyframes heroShimmer{0%{background-position:-30% 0}100%{background-position:210% 0}}
@keyframes heroPulse{0%,100%{opacity:.40}50%{opacity:.70}}
@keyframes heroSweep{0%{transform:translateX(-18%) rotate(8deg);opacity:.0}20%{opacity:.55}55%{opacity:.22}100%{transform:translateX(18%) rotate(8deg);opacity:0}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Grid card */
.navi{
  border-radius:0.30rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  box-shadow:var(--shadow);
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  background-clip:padding-box;
}
.navi>li{
  width:auto;
  float:none;
  min-height:2.30rem;
  height:2.30rem;
  position:relative;
  background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.06));
  opacity:0;
  transform:translateY(8px) scale(.985);
}
.naviReady .navi>li{
  animation:naviIn .46s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay:var(--d, 0ms);
}
.navi>li>a{
  height:100%;
  padding:0.44rem 0.22rem 0.44rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.16rem;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration:none;
  min-width:0;
}
.navi>li>a:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:0.30rem;
  background:radial-gradient(220px 140px at 50% 18%, rgba(99,242,223,.14), rgba(0,0,0,0) 62%),
             radial-gradient(240px 140px at 50% 18%, rgba(106,167,255,.10), rgba(0,0,0,0) 64%);
  opacity:.0;
  transform:translate3d(0,0,0);
  transition:opacity .18s ease;
  pointer-events:none;
}
.navi>li>a:after{
  content:"";
  position:absolute;
  left:-20%;
  top:-30%;
  width:140%;
  height:110%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 65%);
  transform:translate3d(-6%,0,0) rotate(12deg);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.navi>li>a:active:before{opacity:.95}
.navi>li>a:active:after{opacity:.55}
.navi>li>a:active{transform:scale(.985)}
.navi>li>a{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
.navi>li.on>a{
  background:linear-gradient(180deg,rgba(240,96,96,.14),rgba(255,255,255,0));
}
.navi .img{
  width:1.08rem;
  height:1.08rem;
  border-radius:0.28rem;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(160px 90px at 30% 25%,rgba(99,242,223,.18),rgba(0,0,0,0)),
    radial-gradient(160px 90px at 78% 62%,rgba(106,167,255,.14),rgba(0,0,0,0)),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(99,242,223,.18);
  box-shadow:0 18px 46px rgba(0,0,0,.38), 0 0 0 3px rgba(99,242,223,.08);
}
.navi .img:before{
  content:"";
  position:absolute;
  left:-40%;
  top:-60%;
  width:180%;
  height:220%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 65%);
  transform:translate3d(-8%,0,0) rotate(10deg);
  opacity:0;
  pointer-events:none;
}
.naviReady .navi .img:before{
  animation:naviShimmer 1.15s ease forwards;
  animation-delay:calc(var(--d, 0ms) + 120ms);
}
.navi>li>a:active .img{
  border-color:rgba(99,242,223,.34);
  box-shadow:0 22px 60px rgba(0,0,0,.50), 0 0 0 3px rgba(99,242,223,.12), 0 0 30px rgba(99,242,223,.12);
  filter:saturate(1.06) contrast(1.05);
}
.navi .img img{
  width:0.78rem;
  height:0.78rem;
  object-fit:contain;
  padding:0.06rem;
  border-radius:0.22rem;
  filter:drop-shadow(0 12px 26px rgba(99,242,223,.12));
}
.navi .txt{
  font-size:0.30rem;
  letter-spacing:.03rem;
  text-align:center;
  line-height:1.12;
  color:rgba(255,255,255,.88);
  padding:0 0.10rem;
  max-width:100%;
  min-width:0;
  min-height:2.24em;
  display:-webkit-box;
  line-clamp:2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.navi .txt span{display:block}

@keyframes naviIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes naviShimmer{
  0%{opacity:0;transform:translate3d(-12%,0,0) rotate(10deg)}
  25%{opacity:.65}
  100%{opacity:0;transform:translate3d(12%,0,0) rotate(10deg)}
}

.navLoadingMask{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(12px);
}
.navLoadingMask.show{display:flex;animation:navMaskIn .18s ease forwards;}
.navLoadingMask.leaving{animation:navMaskIn .18s ease forwards;}
.navLoadingBox{
  width:min(520px, calc(100vw - 28px));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow:0 26px 90px rgba(0,0,0,.65);
  padding:16px 16px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  transform:translateY(10px) scale(.985);
  opacity:0;
}
.navLoadingMask.show .navLoadingBox{animation:navBoxIn .22s cubic-bezier(.2,.9,.2,1) forwards;}
.navLoadingMask.leaving .navLoadingBox{animation:navBoxOut .28s cubic-bezier(.2,.9,.2,1) forwards;}
.navLoadingSpinner{
  width:22px;
  height:22px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:rgba(127,242,255,.95);
  border-right-color:rgba(214,177,79,.72);
  animation:navSpin .75s linear infinite;
  flex:0 0 auto;
}
.navLoadingText{
  color:rgba(255,255,255,.90);
  font-weight:800;
  font-size:13px;
  letter-spacing:.02rem;
}
@keyframes navSpin{to{transform:rotate(360deg)}}
@keyframes navMaskIn{from{opacity:0}to{opacity:1}}
@keyframes navBoxIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes navBoxOut{to{opacity:1;transform:translateY(0) scale(.99)}}

/* Footer */
.footer{
  padding:0.60rem 0.55rem;
  text-align:center;
  color:var(--muted);
  font-size:0.24rem;
}

.noticeBar{
  margin:0.14rem 0 0.18rem;
  border-radius:0.22rem;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}
.noticeBar:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 120px at 18% 0%, rgba(99,242,223,.16), rgba(0,0,0,0) 70%),
    radial-gradient(560px 140px at 92% 0%, rgba(106,167,255,.14), rgba(0,0,0,0) 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 78px);
  opacity:.22;
  pointer-events:none;
}
.noticeInner{
  height:0.68rem;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:0 0.22rem;
}
.noticeInner{justify-content:center}
.noticeTrack{width:100%;justify-content:center;text-align:center}
.noticeTrack{
  display:inline-flex;
  align-items:center;
  gap:0.60rem;
  white-space:nowrap;
}
.noticeText{
  font-size:0.26rem;
  letter-spacing:.02rem;
  font-weight:700;
  background:linear-gradient(90deg, rgba(99,242,223,.98), rgba(106,167,255,.92), rgba(99,242,223,.98));
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
  text-shadow:0 0 18px rgba(99,242,223,.16), 0 0 24px rgba(106,167,255,.12);
  white-space:nowrap;
  animation:noticeShimmer 2.2s linear infinite;
}
.noticeBar.scroll .noticeText{animation:noticeShimmer 2.2s linear infinite}
.noticeBar.scroll .noticeTrack{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Start centered, hold briefly, then scroll left and restart */
.noticeBar.scroll .noticeText{
  display:inline-block;
  will-change:transform;
  animation:noticeShimmer 2.2s linear infinite, noticeMarqueeCenter var(--noticeDur,18s) linear infinite;
}
@keyframes noticeMarqueeCenter{
  0%{transform:translate3d(0,0,0)}
  18%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-120%,0,0)}
}

@keyframes noticeShimmer{0%{background-position:-20% 0}100%{background-position:120% 0}}

@media (max-width:420px){
  .noticeBar{margin:0.12rem 0 0.16rem}
  .noticeInner{height:0.70rem;padding:0 0.20rem}
  .noticeText{font-size:0.26rem}
}

/* Mobile-first responsive */
@media (max-width:420px){
  #container{max-width:none;padding-bottom:1.46rem}
  #main{padding:0 0.40rem}
  .header{padding:0.44rem 0.40rem}
  .header:after{left:0.32rem;right:0.32rem}
  .photo{margin:0.22rem 0 0.32rem;border-radius:0.28rem}
  .navi{border-radius:0.28rem}
  .navi{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .navi>li{min-height:1.92rem;height:1.92rem}
  .navi>li>a{padding:0.22rem 0.10rem 0.20rem;gap:0.10rem}
  .navi .img{width:0.78rem;height:0.78rem;border-radius:0.20rem}
  .navi .txt{font-size:0.24rem;letter-spacing:.01rem}
  .footer{padding:0.52rem 0.40rem}

  /* Popovers -> bottom sheet style on phones */
  .jsBox,.jsBox02,.saBox{
    position:fixed;
    left:0.34rem;
    right:0.34rem;
    top:auto;
    bottom:0.36rem;
    margin-top:0;
    border-radius:0.30rem;
    max-height:62vh;
    box-shadow:0 34px 140px rgba(0,0,0,.78);
  }
  .navi>li.on .jsBox,.navi>li.on .jsBox02{animation:sheetin .20s ease}
  @keyframes sheetin{from{transform:translateY(10px);opacity:.0}to{transform:translateY(0);opacity:1}}

  .jsBox .ulList li,.jsBox02 .list li{padding:0.26rem 0}
  .jsBox .ms{min-width:1.00rem}
  .thcom{padding:0.16rem 0.22rem;border-radius:0.20rem}

  /* Side menu width on phones */
  .menuBox{width:86vw;right:-86vw;padding:0.50rem}
  .menuBox.show{transform:translateX(-86vw)}
}

@media (min-width:421px) and (max-width:820px){
  /* Tablet: keep 3 columns but more compact than desktop */
  #container{max-width:720px}
  #main{padding:0 0.50rem}
  .photo{margin:0.26rem 0 0.36rem}
  .navi{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .navi>li{min-height:2.24rem;height:2.24rem}
  .navi .img{width:1.06rem;height:1.06rem}
}

@media (min-width:821px){
  /* Desktop: wider canvas + richer hover interactions */
  #container{max-width:980px}
  #main{padding:0 0.70rem}
  .header{padding:0.52rem 0.70rem}
  .header:after{left:0.62rem;right:0.62rem}
  .photo{margin:0.34rem 0 0.52rem;border-radius:0.34rem}
  .navi{border-radius:0.34rem}
  .navi{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .navi>li{min-height:2.26rem;height:2.26rem}
  .navi>li>a{padding:0.52rem 0.22rem 0.48rem;gap:0.18rem}
  .navi .img{width:1.18rem;height:1.18rem;border-radius:0.30rem}
  .navi .txt{font-size:0.30rem;letter-spacing:.035rem}

  .navi>li>a:hover{transform:translateY(-2px);filter:saturate(1.06)}
  .navi>li:hover{z-index:2}
  .navi>li:hover>a{background:linear-gradient(180deg,rgba(99,242,223,.10),rgba(255,255,255,0))}
  .navi>li:hover .img{box-shadow:0 22px 64px rgba(0,0,0,.42)}

  .menuBox{width:6.8rem;right:-6.8rem}
  .menuBox.show{transform:translateX(-6.8rem)}
}

/* Side menu */
.menuBg{
  position:fixed;inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px);
  z-index:50;
  display:none;
}
.menuBox{
  position:fixed;
  top:0;
  right:-7.2rem;
  width:7.2rem;
  height:100%;
  z-index:60;
  padding:0.55rem;
  background:linear-gradient(180deg,rgba(16,16,18,.98),rgba(8,8,10,.98));
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-22px 0 80px rgba(0,0,0,.65);
  transition:transform .28s cubic-bezier(.2,.9,.2,1);
  transform:translateX(0);
}
.menuBox.show{transform:translateX(-7.2rem)}
.menuBox{
  content-visibility:auto;
  contain:layout paint;
}
.menuBox .close{text-align:right}
.menuBox .close img{width:0.66rem;height:0.66rem;opacity:.9}
.menuBox ul{margin-top:0.45rem}
.menuBox li a{
  display:flex;
  align-items:center;
  padding:0.34rem 0.26rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  font-size:0.32rem;
  letter-spacing:.02rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.menuBox li a:active{opacity:.82}

/* Bottom navigation (app style) */
.bottomNav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:1.18rem;
  padding:0.12rem 0.18rem env(safe-area-inset-bottom);
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:0.12rem;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  z-index:90;
}
.bottomNav{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.bottomNav::-webkit-scrollbar{display:none}
.bottomNav:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:1.15rem;
  background:
    radial-gradient(120px 120px at 65% 50%, rgba(99,242,223,.22), rgba(0,0,0,0) 62%),
    radial-gradient(120px 120px at 78% 50%, rgba(106,167,255,.18), rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,0), rgba(7,9,12,.78));
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.bottomNav:after{
  content:"»";
  position:absolute;
  right:0.22rem;
  top:50%;
  transform:translateY(-50%);
  width:0.58rem;
  height:0.58rem;
  border-radius:0.22rem;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.92);
  background:
    radial-gradient(120px 80px at 30% 20%, rgba(99,242,223,.22), rgba(0,0,0,0) 60%),
    radial-gradient(120px 80px at 70% 65%, rgba(106,167,255,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(99,242,223,.26);
  box-shadow:0 16px 46px rgba(0,0,0,.62), 0 0 0 3px rgba(99,242,223,.07), 0 0 34px rgba(99,242,223,.10);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
  animation:bnHint 1.1s ease-in-out infinite;
}
.bottomNav:after{
  text-shadow:0 0 14px rgba(99,242,223,.28), 0 0 22px rgba(106,167,255,.22);
}
.bottomNav.has-overflow:not(.at-end):after{
  background-size:220% 100%;
  animation:bnHint 1.1s ease-in-out infinite, bnShimmer 1.65s linear infinite;
}
.bottomNav.has-overflow:not(.at-end):before{
  animation:bnGlow 1.65s ease-in-out infinite;
}
.bottomNav.has-overflow:not(.at-end):before,
.bottomNav.has-overflow:not(.at-end):after{opacity:1}

@keyframes bnHint{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(5px)}}
@keyframes bnShimmer{0%{background-position:-20% 0}100%{background-position:120% 0}}
@keyframes bnGlow{0%,100%{opacity:.0}50%{opacity:.22}}
.bottomNav .bnItem{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:0.96rem;
  border-radius:0.26rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-size:0.26rem;
  letter-spacing:.02rem;
  transition:transform .16s ease, background .16s ease;
}
.bottomNav .bnItem{
  flex:0 0 calc((100% - (0.12rem * 3)) / 4);
  min-width:calc((100% - (0.12rem * 3)) / 4);
  scroll-snap-align:start;
}
.bottomNav,
.bottomNav *{
  user-select:none;
  -webkit-user-select:none;
}
.bottomNav .bnItem{
  -webkit-user-drag:none;
  touch-action:manipulation;
}
.bottomNav .bnItem:focus{outline:none}
.bottomNav .bnItem:active{transform:scale(.985)}
.bottomNav .bnTxt{opacity:.92}
.bottomNav .bnTxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Panels (li01/li02) - make them feel like floating glass popovers */
.jsBox,.jsBox02{
  display:none;
  position:absolute;
  left:0.18rem;
  right:0.18rem;
  top:100%;
  margin-top:0.16rem;
  z-index:30;
  border-radius:0.26rem;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(20,20,24,.96),rgba(10,10,12,.96));
  box-shadow:0 28px 100px rgba(0,0,0,.70);
  padding:0.26rem;
  max-height:5.8rem;
  overflow:auto;
}
.jsBox,.jsBox02,.saBox{
  contain:layout paint;
}
.navi>li.on .jsBox,.navi>li.on .jsBox02{display:block;animation:popin .18s ease}
@keyframes popin{from{transform:translateY(-6px);opacity:.0}to{transform:translateY(0);opacity:1}}

.jsBox .arrow,.jsBox02 .arrow{display:none}

.jsBox .ulList li,
.jsBox02 .list li{
  display:flex;
  align-items:center;
  gap:0.20rem;
  padding:0.24rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.jsBox .ulList li:last-child,
.jsBox02 .list li:last-child{border-bottom:0}

.jsBox .ms{
  font-size:0.22rem;
  color:rgba(99,242,223,.88);
  min-width:1.08rem;
}
.jsBox .url{
  font-size:0.24rem;
  color:rgba(255,255,255,.78);
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.jsBox img{width:0.38rem;height:0.38rem;opacity:.90;filter:drop-shadow(0 10px 18px rgba(99,242,223,.14))}

.thcom{
  font-size:0.24rem;
  color:#0a0a0a;
  background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.88));
  border-radius:0.18rem;
  padding:0.14rem 0.20rem;
  white-space:nowrap;
  box-shadow:0 14px 34px rgba(99,242,223,.14);
}
.thcom:active{transform:scale(.98)}

.jsBox02 .list a{
  display:flex;
  align-items:center;
  gap:0.20rem;
  color:rgba(255,255,255,.92);
  font-size:0.30rem;
  width:100%;
}
.jsBox02 .list img{
  width:0.56rem;
  height:0.56rem;
  border-radius:0.18rem;
  object-fit:contain;
  padding:0.06rem;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(99,242,223,.16);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 3px rgba(99,242,223,.06);
  filter:drop-shadow(0 12px 22px rgba(99,242,223,.10));
}

/* Browser panel */
.saBox{
  position:absolute;
  left:0.18rem;
  right:0.18rem;
  top:100%;
  margin-top:0.16rem;
  z-index:30;
  border-radius:0.26rem;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(20,20,24,.96),rgba(10,10,12,.96));
  box-shadow:0 28px 100px rgba(0,0,0,.70);
  padding:0.26rem;
}
.saBox .saimg{display:none}
.saBox .saul{display:flex;gap:0.18rem;align-items:center;justify-content:center;flex-wrap:wrap}
.saBox .saul a{
  width:1.34rem;
  height:1.10rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.16rem;
  border-radius:0.24rem;
  border:1px solid rgba(99,242,223,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 3px rgba(99,242,223,.06);
  transition:transform .16s ease, filter .16s ease, border-color .16s ease;
}
.saBox .saul a:active{transform:scale(.985)}
.saBox .saul img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 12px 22px rgba(99,242,223,.10))}

@media (max-width:420px){
  .saBox .saul a{width:1.44rem;height:1.14rem}
}