* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; background: #f2e7d9; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
body::before { content: ""; position: fixed; inset: -24px; background: url('./img/background.png') center / cover no-repeat; filter: blur(20px); }
.landing {
  --page-height: 100vh;
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, calc((var(--page-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .5625));
  overflow: hidden;
  background: url('./img/background.png') center / 100% 100% no-repeat;
}
@supports (height: 100dvh) { .landing { --page-height: 100dvh; } }
.brand { position: absolute; top: 0; left: 26.76%; display: block; width: 45.37%; height: auto; }
.routes { position: absolute; inset: 0; pointer-events: none; }
.route:first-child { top: 43.7%; }
.route:nth-child(2) { top: 60.1%; }
.route { position: absolute; left: 3%; display: block; width: 92.8%; pointer-events: auto; border-radius: 999px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.route-art { display: block; width: 100%; height: auto; }
.route-arrow { position: absolute; right: 6.2%; top: 50%; transform: translateY(-50%); width: 10.3%; height: auto; pointer-events: none; }
.route:focus-visible { outline: 3px solid #8e521b; outline-offset: 3px; }
.route:active { filter: brightness(.97); }
.features-title { position: absolute; top: 77%; left: 18.7%; display: block; width: 61.67%; height: auto; }
.features { position: absolute; top: 83.6%; left: 7.1%; width: 86%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features li { position: relative; display: flex; justify-content: center; align-items: center; }
.features li > img { display: block; width: 67.6%; height: auto; }
.features li + li::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 75.4%; background: url('./img/divider.png') center / 100% 100% no-repeat; }