:root { color-scheme: dark; background: #8f0904; color: #ffe5ad; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
.landing { display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.poster { position: relative; width: min(100%, 1586px); flex: none; container-type: inline-size; }
picture, picture img { display: block; width: 100%; }
picture img { height: auto; }
.download-logo-backdrop {
  position: absolute; left: 32.5%; top: 61%; width: 35%; height: 15.5%; pointer-events: none;
  background: url('./desktop-clean-v14.webp') 50% 72.18935% / 285.71429% 645.16129% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.download-app-logo {
  position: absolute; left: 46.26%; top: 62.25%; width: 7.48%; height: auto; aspect-ratio: 1;
}
.download-app-logo {
  display: block; object-fit: contain; border-radius: 12%; background: #aa0803;
  border: 1px solid rgb(255 222 157 / 55%);
  box-shadow: none;
  pointer-events: none;
}
.download-button {
  position: absolute; left: 38%; top: 78.1%; width: 24%; height: 8.5%; min-height: 44px;
  border-radius: 999px; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
@media (hover: hover) { .download-button:hover { background: rgb(255 230 149 / 12%); box-shadow: 0 0 32px rgb(255 216 109 / 65%); } }
.download-button:active { background: rgb(125 20 0 / 15%); }
.download-button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; box-shadow: 0 0 0 8px #8e1209; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mobile-closing { display: none; }
@media (max-width: 767px), (orientation: portrait) {
  .poster { width: min(100%, 600px); }
  .download-logo-backdrop { left: 27.5%; top: 61.5%; width: 45%; height: 10.8%; background-image: url('./mobile-clean-v14.webp'); background-size: 222.22222% 925.92593%; background-position: 50% 68.94619%; -webkit-mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); }
  .download-app-logo { left: 40.8625%; top: 62.34%; width: 18.275%; }
  .download-button { left: 21.7%; top: 72.77%; width: 56.7%; height: 5.76%; }
  .mobile-closing {
    display: block; position: absolute; top: 85%; left: 7%; width: 86%;
    text-align: center; pointer-events: none;
    text-shadow: 0 2px 7px rgb(91 0 0 / 80%);
  }
  .closing-title {
    margin: 0; color: #ffe4aa;
    font-family: "STXingkai", "Xingkai SC", "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif CJK SC", serif;
    font-size: clamp(20px, 6.1vw, 36px); font-size: 6.1cqw;
    font-weight: 400; line-height: 1.5; letter-spacing: .08em;
  }
  .closing-title span { opacity: .7; }
  .closing-subtitle {
    margin: .6em 0 0; color: #f4cfac;
    font-size: clamp(11px, 3vw, 18px); font-size: 3cqw;
    font-weight: 400; line-height: 1.6; letter-spacing: .12em;
  }
  .closing-thread { display: block; width: 82%; height: auto; margin: .45em auto 0; opacity: .8; }
}
@media (prefers-reduced-motion: reduce) { .download-button { transition: none; } }