* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: #ffffff;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

button {
  font: inherit;
}

.app-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #001334 url("../images/app-body.png") center top / 100% 100% no-repeat;
}

.download-pill:active {
  opacity: .72;
}

.hero {
  display: flex;
  aspect-ratio: 786 / 250;
  padding: 0 .4865rem .3784rem;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  background: #073b9e url("../images/app-hero.png") center / cover no-repeat;
}

.download-pill {
  display: flex;
  width: 7.2973rem;
  height: 2.3784rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: .5946rem;
  cursor: pointer;
}

.download-pill span {
  display: flex;
  width: 100%;
  height: 1.1892rem;
  align-items: center;
  justify-content: center;
  border-radius: .5946rem;
  background: linear-gradient(180deg, #ff303a 0%, #f01f26 100%);
}

.download-pill:focus-visible {
  outline: 0;
}

.download-pill:focus-visible span {
  box-shadow: 0 0 0 .1081rem #ffffff, 0 0 0 .2162rem #3f8cff;
}

.content {
  padding: 0 .6486rem 1.0811rem;
}

.stats {
  display: grid;
  height: 5.8378rem;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.stat {
  display: flex;
  min-width: 0;
  height: 3.8919rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.stat-label {
  margin-top: .1622rem;
  color: #89a9df;
  font-size: .5405rem;
}

.stat strong {
  margin-top: .3784rem;
  color: #ffffff;
  font-size: 1.2432rem;
  font-weight: 700;
  line-height: 1;
}

.stars {
  display: flex;
  margin-top: .4324rem;
  gap: .1081rem;
}

.stars img {
  width: .6486rem;
  height: .6486rem;
}

.stat small {
  color: #8eb0e6;
  font-size: .4865rem;
}

.age-stat small {
  margin-top: .4324rem;
}

.developer-stat > img {
  width: .8108rem;
  height: .8108rem;
  margin-top: .4865rem;
  object-fit: contain;
}

.developer-stat small {
  margin-top: .7568rem;
  white-space: nowrap;
}

.detail-card {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.detail-card h3 {
  margin: 0;
  font-size: .7568rem;
  font-weight: 700;
}

.intro-card {
  padding: .7568rem .7027rem .6486rem;
  background-image: url("../images/app-intro-card.png");
}

.intro-copy {
  margin-top: .4865rem;
  color: #c6d5ee;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: .6757rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .0081rem;
}

.intro-copy p {
  margin: 0;
}

.intro-copy p + p {
  margin-top: .1622rem;
}

.info-card {
  min-height: 12.2162rem;
  margin-top: .5405rem;
  padding: .7568rem .7027rem .6486rem;
  background-image: url("../images/app-info-card.png");
}

.info-card dl {
  margin: .5405rem 0 0;
  color: #c9d9f8;
  font-size: .5946rem;
}

.info-card dl > div {
  display: grid;
  min-height: 1.3514rem;
  grid-template-columns: 4.8649rem 1fr;
  align-items: center;
}

.info-card dt,
.info-card dd {
  margin: 0;
}

.info-card dd {
  color: #8fb1eb;
  text-align: right;
}