* { box-sizing: border-box; }
html { min-width: 320px; background: #020711; }
body { margin: 0; color: #f8e8c1; background: #020711; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.gateway-page { min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 20%, #0b1c31, #020711 72%); overflow: hidden; }
.gateway-stage { position: relative; width: 100%; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; }
.gateway-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.45); }
.gateway-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; }
.hero-translation { position: absolute; z-index: 3; left: 50%; top: 63%; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; color: #f6dca7; font-family: Georgia, "Times New Roman", serif; font-size: clamp(9px, 1.05vw, 17px); font-weight: 600; letter-spacing: .22em; line-height: 1.5; text-align: center; white-space: nowrap; text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 22px rgba(245,189,91,.22); pointer-events: none; }
.hero-translation i { display: block; width: clamp(22px, 3vw, 52px); height: 1px; background: linear-gradient(90deg, transparent, rgba(245,205,137,.72)); }
.hero-translation i:last-child { transform: scaleX(-1); }

.portal-hotspot { position: absolute; z-index: 4; top: 17%; bottom: 6%; width: 27%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 12.5%; border-radius: 45% 45% 10% 10%; outline: 0; }
.hotspot-cn { left: 1.5%; color: #ffd58d; }
.hotspot-global { right: 1.5%; color: #9beaff; }
.portal-hotspot::before { content: ""; position: absolute; inset: 4% 13% 13%; border: 1px solid transparent; border-radius: 48% 48% 12% 12%; opacity: 0; transition: opacity .3s, box-shadow .3s, transform .3s; }
.hotspot-cn::before { border-color: rgba(255,190,83,.7); box-shadow: 0 0 44px rgba(255,132,34,.35), inset 0 0 36px rgba(255,132,34,.15); }
.hotspot-global::before { border-color: rgba(103,220,255,.75); box-shadow: 0 0 44px rgba(39,154,255,.4), inset 0 0 36px rgba(39,154,255,.18); }
.portal-hotspot:hover::before, .portal-hotspot:focus-visible::before { opacity: 1; transform: scale(1.025); }
.portal-hotspot span, .portal-hotspot b { position: relative; z-index: 2; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; text-shadow: 0 2px 12px #000; }
.portal-hotspot span { font-size: clamp(12px, .9vw, 16px); font-weight: 800; letter-spacing: .15em; }
.portal-hotspot b { margin-top: 4px; font-size: 9px; letter-spacing: .2em; }
.portal-hotspot:hover span, .portal-hotspot:hover b, .portal-hotspot:focus-visible span, .portal-hotspot:focus-visible b { opacity: 1; transform: translateY(0); }
.portal-hotspot:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }

.choice-tip { position: absolute; z-index: 5; left: 50%; bottom: 3.5%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: rgba(255,241,210,.65); font-size: 8px; font-weight: 800; letter-spacing: .2em; white-space: nowrap; }
.choice-tip i { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,210,135,.7)); }
.choice-tip i:last-child { transform: scaleX(-1); }
.mobile-actions { display: none; }

footer { min-height: 42px; padding: 0 clamp(18px,4vw,60px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #526176; background: #020711; border-top: 1px solid rgba(255,255,255,.05); font-size: 8px; letter-spacing: .16em; }
footer p { margin: 0; } footer span:last-child { text-align: right; }

@media (max-aspect-ratio: 4/3), (max-width: 760px) {
  .gateway-page { overflow: auto; }
  .gateway-stage { flex: none; height: min(52svh, 510px); min-height: 370px; }
  .gateway-art { object-fit: cover; object-position: 50% 46%; }
  .hero-translation { top: 63.5%; gap: 7px; width: 100%; justify-content: center; padding: 0 8px; font-size: clamp(8px, 2.45vw, 11px); letter-spacing: .11em; }
  .hero-translation i { width: 17px; }
  .gateway-stage::after { background: linear-gradient(to bottom, transparent 65%, #020711 100%); box-shadow: inset 0 0 45px rgba(0,0,0,.3); }
  .portal-hotspot { display: none; }
  .choice-tip { display: none; }
  .mobile-actions { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr; gap: 11px; margin-top: -18px; padding: 0 13px 20px; background: linear-gradient(transparent, #07111f 24%); }
  .mobile-actions a { position: relative; overflow: hidden; min-height: 112px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.15); border-radius: 22px; display: grid; grid-template-columns: 58px 1fr 30px; align-items: center; gap: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08); }
  .mobile-actions a::before { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; top: -90px; border-radius: 50%; filter: blur(38px); opacity: .38; }
  .mobile-cn { background: linear-gradient(135deg, rgba(74,37,12,.82), rgba(10,17,29,.95)); }
  .mobile-global { background: linear-gradient(135deg, rgba(8,42,74,.9), rgba(8,17,32,.96)); }
  .mobile-cn::before { background: #ff8a27; } .mobile-global::before { background: #2caeff; }
  .mobile-actions img { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 16px; object-fit: cover; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
  .mobile-actions div, .mobile-actions i { position: relative; z-index: 1; }
  .mobile-actions div { min-width: 0; display: flex; flex-direction: column; }
  .mobile-actions small { color: #8c9bb1; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
  .mobile-actions strong { margin-top: 5px; color: #fff; font-size: 23px; line-height: 1.05; letter-spacing: -.04em; }
  .mobile-actions span { margin-top: 7px; color: #aebace; font-size: 10px; }
  .mobile-actions i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: rgba(255,255,255,.1); font-style: normal; font-size: 14px; }
  footer { display: flex; justify-content: space-between; min-height: 48px; } footer p { display: none; }
}

@media (max-height: 700px) and (max-width: 760px) {
  .gateway-stage { height: 430px; min-height: 330px; }
  .mobile-actions a { min-height: 102px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }