* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: #ffd2df;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.pc-scene {
  --unit: calc(100vw / 1920);
  --vertical-unit: calc(100vh / 1080);
  background-image: url('../img/dahuanggou/pc-bg.jpg');
  background-size: cover;
}

.mobile-scene {
  --unit: calc(100vw / 750);
  --vertical-unit: calc(100vh / 1624);
  background-image: url('../img/dahuanggou/mobile-bg.png');
}

@supports (height: 100dvh) {
  .pc-scene {
    --vertical-unit: calc(100dvh / 1080);
  }

  .mobile-scene {
    --vertical-unit: calc(100dvh / 1624);
  }
}

.art,
.art-button {
  position: absolute;
  display: block;
  width: calc(var(--width) * var(--unit));
  left: calc(var(--left) * var(--unit));
  top: calc(var(--top) * var(--vertical-unit));
  height: calc(var(--height) * var(--vertical-unit));
}

.art-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.art-button > img {
  display: block;
  width: 100%;
  height: 100%;
}

.art-button:focus-visible {
  outline: 3px solid #b50051;
  outline-offset: 3px;
  border-radius: 20px;
}

.contact-strip,
.download-section {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-strip > button,
.download-section > button {
  pointer-events: auto;
}

.pc-scene .logo { --left: 60; --top: 20; --width: 349; --height: 120; }
.pc-scene .email { --left: 1235; --top: 25; --width: 205; --height: 72; }
.pc-scene .sw { --left: 1453; --top: 25; --width: 205; --height: 72; }
.pc-scene .tg { --left: 1672; --top: 25; --width: 205; --height: 72; }
.pc-scene .headline { --left: 635; --top: 78; --width: 595; --height: 450; }
.pc-scene .qr-wrapper { --left: 1300; --top: 140; --width: 339; --height: 522; }
.pc-scene .tutorial-button { --left: 1237; --top: 710; --width: 640; --height: 72; }
.pc-scene .install-tips { --left: 1237; --top: 802; --width: 640; --height: 90; }

.qr-wrapper > img {
  display: block;
  width: 100%;
  height: 100%;
}

.qrcode {
  position: absolute;
  left: 51.1%;
  top: 34.5%;
  width: min(calc(210 * var(--unit)), calc(210 * var(--vertical-unit)));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: white;
}

.qrcode > canvas,
.qrcode > img {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-scene .logo { --left: 207; --top: 30; --width: 340; --height: 140.206; }
.mobile-scene .email { --left: 81; --top: 180; --width: 184; --height: 64; }
.mobile-scene .sw { --left: 284; --top: 180; --width: 186; --height: 64; }
.mobile-scene .tg { --left: 488; --top: 180; --width: 181; --height: 64; }
.mobile-scene .headline { --left: 77; --top: 730; --width: 595; --height: 450; }
.mobile-scene .download-fast { --left: 26; --top: 1185; --width: 334; --height: 120; }
.mobile-scene .download-stable { --left: 393; --top: 1185; --width: 333; --height: 120; }
.mobile-scene .tutorial-button { --left: 95; --top: 1332; --width: 560; --height: 64; }
.mobile-scene .install-tips { --left: 95; --top: 1414; --width: 560; --height: 77; }

.dialog {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(0 0 0 / 57%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dialog.show {
  z-index: 999;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dialog .content {
  width: min(90vw, 600px);
  max-height: 85vh;
  overflow: auto;
  border-radius: 10px;
  background: white;
}

.dialog .content img {
  display: block;
  width: 100%;
}