:root {
  --design-unit: min(0.2vw, 1px);
  color-scheme: light;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: #f5f8fa;
}

* {
  box-sizing: border-box;
}

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

html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  overflow-x: hidden;
  background: #f5f8fa;
  color: #202124;
}

body.modal-open {
  overflow: hidden;
}

#page-view {
  position: relative;
  width: 100%;
  max-width: 500px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
}

.content {
  padding-bottom: calc(80 * var(--design-unit));
  background: #fff;
}

.content > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.download-footer {
  position: fixed;
  z-index: 99;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
  height: calc(80 * var(--design-unit));
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: rgb(0 0 0 / 80%);
}

.footer-button {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: calc(45.333 * var(--design-unit));
  margin: 0 calc(12.667 * var(--design-unit));
  padding: 0 calc(12.667 * var(--design-unit));
  border: 0;
  border-radius: calc(10.667 * var(--design-unit));
  color: #fff;
  font-family: inherit;
  font-size: calc(17.333 * var(--design-unit));
  line-height: 1;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.footer-button--game {
  background: #1678ff;
}

.footer-button--download {
  background: #ffaa09;
}

.footer-button:active {
  filter: brightness(0.92);
}

.footer-bubble {
  position: absolute;
  right: 0;
  bottom: calc(50.667 * var(--design-unit));
  max-width: calc(100% - 12.667 * var(--design-unit));
  min-height: calc(36 * var(--design-unit));
  padding: calc(8 * var(--design-unit)) calc(12.667 * var(--design-unit));
  overflow: hidden;
  border-radius: calc(10.667 * var(--design-unit));
  background: #ea4e3d;
  font-size: calc(14.667 * var(--design-unit));
  line-height: calc(20 * var(--design-unit));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-bubble::after {
  position: absolute;
  right: calc(9 * var(--design-unit));
  bottom: calc(-7 * var(--design-unit));
  width: 0;
  height: 0;
  border-top: calc(8 * var(--design-unit)) solid #ea4e3d;
  border-right: calc(8 * var(--design-unit)) solid transparent;
  border-left: calc(8 * var(--design-unit)) solid transparent;
  content: "";
}

.service {
  position: fixed;
  z-index: 100;
  top: calc(160 * var(--design-unit));
  right: max(calc((100vw - 500px) / 2 + 8 * var(--design-unit)), calc(8 * var(--design-unit)));
  display: block;
  width: calc(66.667 * var(--design-unit));
  height: calc(66.667 * var(--design-unit));
  margin-top: calc(12.667 * var(--design-unit));
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.service img {
  display: block;
  width: 100%;
  height: 100%;
}

.line-modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  height: 100dvh;
  margin: 0 auto;
  background: rgb(0 0 0 / 40%);
}

.line-modal.is-open {
  display: flex;
}

.line-dialog {
  position: relative;
  width: 88%;
}

.line-list {
  padding: calc(12.667 * var(--design-unit));
  overflow: hidden;
  border-radius: calc(10.667 * var(--design-unit));
  background: #fff;
}

.line-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(60 * var(--design-unit));
}

.line-signal {
  flex: 0 0 calc(40 * var(--design-unit));
  color: #04be02;
  font-size: calc(14.667 * var(--design-unit));
  line-height: calc(16 * var(--design-unit));
  text-align: left;
}

.line-signal__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(18 * var(--design-unit));
}

.line-signal__bar {
  display: block;
  width: calc(4 * var(--design-unit));
  height: calc(16 * var(--design-unit));
  margin: 0 calc(2 * var(--design-unit));
  border-radius: calc(2 * var(--design-unit));
  background: currentcolor;
}

.line-signal__bar:nth-child(1) {
  height: calc(8 * var(--design-unit));
}

.line-signal__bar:nth-child(2) {
  height: calc(12 * var(--design-unit));
}

.line-latency {
  display: block;
  height: calc(16 * var(--design-unit));
  white-space: nowrap;
}

.line-signal.is-slow {
  color: #ffaa09;
}

.line-signal.is-offline {
  color: #9ca3af;
}

.line-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 calc(25.333 * var(--design-unit));
  overflow: hidden;
  color: #000;
  font-size: calc(17.333 * var(--design-unit));
  line-height: calc(24.75 * var(--design-unit));
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-play {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: calc(40 * var(--design-unit));
  padding: 0 calc(16 * var(--design-unit));
  border: 0;
  border-radius: calc(10.667 * var(--design-unit));
  background: #1678ff;
  color: #fff;
  font-family: inherit;
  font-size: calc(14.667 * var(--design-unit));
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.line-play:active {
  filter: brightness(0.92);
}

.line-close {
  position: absolute;
  top: calc(100% + 29.333 * var(--design-unit));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50.667 * var(--design-unit));
  height: calc(50.667 * var(--design-unit));
  padding: 0 0 calc(4 * var(--design-unit));
  transform: translateX(-50%);
  border: calc(3 * var(--design-unit)) solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: calc(42 * var(--design-unit));
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
}

.line-empty {
  padding: calc(24 * var(--design-unit));
  color: #6b7280;
  font-size: calc(16 * var(--design-unit));
  text-align: center;
}

@media (min-width: 500px) {
  :root {
    --design-unit: 1px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .footer-button,
  .service,
  .line-play {
    transition: filter 120ms ease, transform 120ms ease;
  }

  .footer-button:active,
  .service:active {
    transform: scale(0.98);
  }
}