:root {
  --page-bg: rgba(0, 16, 36, 1);
  --page-copy: rgba(255, 255, 255, 1);
  --design-width: 375;
  --dock-bottom-gap: calc(env(safe-area-inset-bottom) + 12px);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  color: var(--page-copy);
  font-family: "Roboto", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    sans-serif;
}

img {
  display: block;
}

.page {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page-bg);
}

.landing {
  position: relative;
  width: min(100vw, 430px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--page-bg);
}

.landing__background {
  width: 100%;
  height: auto;
}

.floating-dock {
  position: fixed;
  right: auto;
  bottom: var(--dock-bottom-gap);
  left: 50%;
  z-index: 10;
  width: min(100vw, 430px);
  transform: translateX(-50%);
  pointer-events: none;
}

.floating-dock__download {
  display: block;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.floating-dock__download-image {
  width: 100%;
  height: auto;
}

.floating-dock__download:focus-visible,
.download-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: 4px;
  border-radius: 999px;
}

.variant-page-01 {
  --page-bg: rgba(6, 12, 19, 1);
  --dock-width: min(calc(100vw - 24px), 351px);
  --dock-height: calc(var(--dock-width) * 84 / 351);
  position: relative;
  padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom) + 32px);
  background:
    radial-gradient(circle at 78% 14%, rgba(58, 110, 255, 0.34), transparent 21%),
    radial-gradient(circle at 12% 80%, rgba(0, 174, 255, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(3, 8, 15, 1) 0%, rgba(6, 12, 19, 1) 45%, rgba(7, 15, 25, 1) 100%);
}

.variant-page-01 .hero {
  position: relative;
  width: min(100vw, 430px);
  min-height: calc(min(100vw, 430px) * 812 / 375);
  margin: 0 auto;
  overflow: hidden;
}

.variant-page-01 .hero__canvas {
  position: relative;
  width: 100%;
  min-height: calc(min(100vw, 430px) * 812 / 375);
  padding-top: max(0px, env(safe-area-inset-top));
}

.variant-page-01 .hero__title {
  position: absolute;
  z-index: 3;
  left: calc(100% * 65.4 / 375);
  top: calc(max(0px, env(safe-area-inset-top)) + min(100vw, 430px) * 53.2 / 375);
  width: calc(100% * 244.2 / 375);
  margin: 0;
  color: rgba(255, 255, 255, 1);
  font-size: calc(min(100vw, 430px) * 30 / 375);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.variant-page-01 .hero__title-break {
  display: block;
}

.variant-page-01 .hero__visual {
  position: absolute;
  z-index: 2;
  left: calc(100% * 3 / 375);
  top: calc(max(0px, env(safe-area-inset-top)) + min(100vw, 430px) * 148.6 / 375);
  width: calc(100% * 362 / 375);
  display: flex;
  justify-content: center;
}

.variant-page-01 .hero__phone {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 22px 42px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 12px rgba(64, 132, 255, 0.1));
}

.variant-page-01 .hero__glow,
.variant-page-01 .hero__orbit {
  position: absolute;
  pointer-events: none;
}

.variant-page-01 .hero__glow {
  z-index: 0;
  border-radius: 999px;
  filter: blur(18px);
}

.variant-page-01 .hero__glow--top {
  top: calc(min(100vw, 430px) * 92 / 375);
  right: calc(100% * -8 / 375);
  width: calc(100% * 186 / 375);
  height: calc(min(100vw, 430px) * 186 / 375);
  background:
    radial-gradient(circle, rgba(64, 132, 255, 0.78) 0%, rgba(64, 132, 255, 0.18) 54%, transparent 78%);
}

.variant-page-01 .hero__glow--bottom {
  left: calc(100% * -84 / 375);
  bottom: calc(min(100vw, 430px) * 116 / 375);
  width: calc(100% * 220 / 375);
  height: calc(min(100vw, 430px) * 220 / 375);
  background:
    radial-gradient(circle, rgba(0, 174, 255, 0.22) 0%, rgba(0, 113, 235, 0.12) 44%, transparent 76%);
}

.variant-page-01 .hero__orbit {
  z-index: 1;
  border-radius: 999px;
  border: 1px solid rgba(113, 54, 255, 0.55);
  opacity: 0.75;
}

.variant-page-01 .hero__orbit--one {
  top: calc(min(100vw, 430px) * 187 / 375);
  right: calc(100% * -14 / 375);
  width: calc(100% * 180 / 375);
  height: calc(min(100vw, 430px) * 58 / 375);
  transform: rotate(-6deg);
}

.variant-page-01 .hero__orbit--two {
  left: calc(100% * -36 / 375);
  bottom: calc(min(100vw, 430px) * 132 / 375);
  width: calc(100% * 178 / 375);
  height: calc(min(100vw, 430px) * 74 / 375);
  border-color: rgba(0, 175, 255, 0.5);
  transform: rotate(-37deg);
}

.download-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding:
    0 12px
    calc(env(safe-area-inset-bottom) + 12px);
  pointer-events: none;
}

.download-button {
  display: block;
  position: relative;
  width: min(calc(100vw - 24px), 351px);
  border-radius: 999px;
  overflow: hidden;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.download-button::before {
  content: "";
  position: absolute;
  left: 3.4188034188%;
  top: 7.1428571429%;
  width: 68.3760683761%;
  height: 85.7142857143%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(40, 134, 255, 1) 0%,
    rgba(21, 184, 210, 1) 62%,
    rgba(14, 203, 154, 1) 100%
  );
  z-index: 1;
}

.download-button__image {
  width: 100%;
  height: auto;
}

.download-button__text-wrap {
  position: absolute;
  left: 10.6552706553%;
  top: 16.4285714286%;
  width: 60.9686609687%;
  height: 64.2857142857%;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  pointer-events: none;
}

.download-button__text {
  display: inline-block;
  color: rgba(255, 255, 255, 1);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform-origin: center center;
}

.variant-page-02 {
  --design-height: 934;
}

.variant-page-02 + .floating-dock .floating-dock__benefits,
.variant-page-02 + .floating-dock .floating-dock__download {
  width: calc(100% * var(--asset-width) / var(--design-width));
  margin-right: auto;
  margin-left: auto;
}

.variant-page-02 + .floating-dock .floating-dock__benefits {
  --asset-width: 338;
  pointer-events: none;
}

.variant-page-02 + .floating-dock .floating-dock__download {
  --asset-width: 343;
  margin-top: calc(100vw * 16 / 375);
}

.variant-page-02 + .floating-dock .floating-dock__benefits,
.variant-page-02 + .floating-dock .floating-dock__download-image {
  height: auto;
}

.variant-page-03 {
  --design-height: 943;
}

.variant-page-03 + .floating-dock .floating-dock__download {
  width: calc(100% * 350 / var(--design-width));
  margin-right: 0;
  margin-left: auto;
}

.variant-page-04 {
  --design-height: 908;
}

.variant-page-04 .landing {
  height: calc(min(100vw, 430px) * var(--design-height) / var(--design-width));
}

.variant-page-04 .landing__background {
  position: absolute;
  right: 0;
  left: 0;
}

.variant-page-04 .landing__background--top {
  top: 0;
  z-index: 1;
}

.variant-page-04 .landing__background--bottom {
  top: calc(100% * 550 / var(--design-height));
  z-index: 2;
}

.variant-page-04 + .floating-dock .floating-dock__download {
  width: calc(100% * 351 / var(--design-width));
  margin-right: auto;
  margin-left: calc(100% * 12 / var(--design-width));
}

@media (min-width: 431px) {
  .variant-page-02,
  .variant-page-03,
  .variant-page-04 {
    display: flex;
    justify-content: center;
  }

  .variant-page-02 + .floating-dock .floating-dock__download {
    margin-top: calc(430px * 16 / 375);
  }
}