:root {
  color-scheme: light;
  background: #eef2f8;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #eef2f8;
}

body {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.stage {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  min-width: 0;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  background: #eef2f8 url("static/background.png") center / cover no-repeat;
  overflow: hidden;
}

.artboard {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 750 / 1333;
  margin: 0 auto;
  overflow: hidden;
  background: #f4f7fc url("static/background.png") center / cover no-repeat;
  isolation: isolate;
}

.content-layer {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transform-origin: center top;
}

@media (max-width: 767px) {
  .artboard {
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  body {
    display: flex;
    justify-content: center;
  }

  .artboard {
    width: min(560px, calc(100dvh * 750 / 1333));
    max-width: calc(100vw - 48px);
  }

  .stage {
    background: #eef2f8;
  }
}

.asset {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.logo {
  position: absolute;
  top: 9.2%;
  left: 50%;
  width: 30.8%;
  transform: translateX(-50%);
}

.slogan {
  position: absolute;
  top: 20.8%;
  left: 10.7%;
  width: 78.1%;
}

.hero {
  position: absolute;
  top: 28.6%;
  left: 12.1%;
  width: 73.7%;
}

.service-link {
  position: absolute;
  top: 24.1%;
  right: 0.8%;
  width: 14.4%;
  z-index: 2;
  transition: transform 160ms ease;
}

.service-link:active {
  transform: scale(0.94);
}

.service {
  width: 100%;
}

.category-nav {
  position: absolute;
  top: 71.8%;
  left: 7.3%;
  width: 85%;
  height: 7.2%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  z-index: 3;
}

.category-icons {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.category-nav a {
  position: relative;
  display: block;
  min-width: 0;
  height: 100%;
}

.category-hit {
  position: absolute;
  inset: 0;
}

.category-nav a:active .category-hit {
  border-radius: 12px;
  background: rgba(86, 147, 229, 0.12);
}

.download-row {
  position: absolute;
  top: 82.9%;
  left: 4.8%;
  width: 90.4%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1%;
  align-items: center;
  z-index: 4;
}

.route-button,
.download-link {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.route-button img,
.download-link img {
  width: 100%;
  height: auto;
}

.route-button:active,
.download-link:active {
  transform: scale(0.95);
}

.route-button.is-active {
  filter: brightness(1.04) saturate(1.08);
}