:root {
  --h5-scale: 1;
  --h5-x: 0px;
  --h5-y: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #8d0b07;
  overscroll-behavior: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#nl-badge-frame {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, #c21a12 0%, #8d0b07 58%, #590402 100%);
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.h5-transition-pending::before,
html.h5-transition-leaving::before {
  opacity: 1;
  pointer-events: auto;
}

html.h5-transition-leaving {
  cursor: wait;
}

html.h5-transition-leaving .hotspot {
  pointer-events: none;
}

button {
  font: inherit;
}

.page-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, #d52a1f 0%, #9f120d 46%, #6b0805 100%);
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 1335px;
  overflow: hidden;
  background: #ffffff;
  transform: translate3d(var(--h5-x), var(--h5-y), 0) scale(var(--h5-scale));
  transform-origin: top left;
  will-change: transform;
  isolation: isolate;
}

.layer,
.hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.layer {
  position: absolute;
  pointer-events: none;
}

/* Coordinates are the exact pixel bounds from 1（750）.psd. */
.layer-background {
  z-index: 0;
  inset: 0;
  width: 750px;
  height: 1335px;
}

.layer-title {
  z-index: 2;
  top: 113px;
  left: 43px;
  width: 651px;
  height: 308px;
}

.hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition: filter 120ms ease;
}

.hotspot-read-letter {
  top: 1014px;
  left: 61px;
  width: 194px;
  height: 63px;
}

.hotspot-listen {
  top: 1014px;
  left: 282px;
  width: 194px;
  height: 63px;
}

.hotspot-write-reply {
  top: 1014px;
  left: 498px;
  width: 194px;
  height: 63px;
}

.hotspot-open-letter {
  top: 1104px;
  left: 159px;
  width: 449px;
  height: 106px;
}

.hotspot-tap-open {
  top: 1217px;
  left: 302px;
  width: 137px;
  height: 24px;
}

.hotspot-tap-open img {
  animation: tap-open-blink 1.25s ease-in-out infinite;
  transform-origin: center;
}

@keyframes tap-open-blink {
  0%,
  100% {
    opacity: 0.45;
    filter: brightness(0.9) drop-shadow(0 0 0 rgba(255, 224, 115, 0));
  }

  50% {
    opacity: 1;
    filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 224, 115, 0.9));
  }
}

.hotspot:active {
  filter: brightness(0.93) saturate(1.04);
}

.hotspot:focus-visible {
  outline: 4px solid rgba(255, 244, 184, 0.96);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  html::before {
    transition: none;
  }

  .hotspot {
    transition: none;
  }

  .hotspot-tap-open img {
    animation: none;
    opacity: 1;
    filter: none;
  }
}

.app-page {
  display: none !important;
}

.app-page.is-active {
  display: block !important;
}

.detail-campaign {
  z-index: 0;
  top: 0;
  left: 0;
  width: 750px;
  height: auto;
}

/* The replacement third page is already a complete design, so its controls show immediately. */
[data-app-page="detail"] .detail-title,
[data-app-page="detail"] .detail-click-flip,
[data-app-page="detail"] .detail-back,
[data-app-page="detail"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="liubojian"] .detail-title,
[data-app-page="liubojian"] .detail-click-flip,
[data-app-page="liubojian"] .detail-back,
[data-app-page="liubojian"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.detail-campaign9 {
  left: 0.5px;
  width: 749px;
  height: 1335px;
}

[data-app-page="wangruofei"] .detail-title,
[data-app-page="wangruofei"] .detail-click-flip,
[data-app-page="wangruofei"] .detail-back,
[data-app-page="wangruofei"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="zuoquan"] .detail-title,
[data-app-page="zuoquan"] .detail-click-flip,
[data-app-page="zuoquan"] .detail-back,
[data-app-page="zuoquan"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="chenyi"] .detail-title,
[data-app-page="chenyi"] .detail-click-flip,
[data-app-page="chenyi"] .detail-back,
[data-app-page="chenyi"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="zhaoyiman"] .detail-title,
[data-app-page="zhaoyiman"] .detail-click-flip,
[data-app-page="zhaoyiman"] .detail-back,
[data-app-page="zhaoyiman"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="liushaoqi"] .detail-title,
[data-app-page="liushaoqi"] .detail-click-flip,
[data-app-page="liushaoqi"] .detail-back,
[data-app-page="liushaoqi"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="maozedong"] .detail-title,
[data-app-page="maozedong"] .detail-click-flip,
[data-app-page="maozedong"] .detail-back,
[data-app-page="maozedong"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="yeting"] .detail-title,
[data-app-page="yeting"] .detail-click-flip,
[data-app-page="yeting"] .detail-back,
[data-app-page="yeting"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-app-page="zhouenlai"] .detail-title,
[data-app-page="zhouenlai"] .detail-click-flip,
[data-app-page="zhouenlai"] .detail-back,
[data-app-page="zhouenlai"] .detail-listen-echo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}