.page-shell-letters {
  background:
    radial-gradient(circle at 50% 30%, #fffdf4 0%, #f3ecd8 52%, #d8c9a3 100%);
}

.letter-stage {
  background: #faf6e9;
}

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

.letter-title {
  z-index: 2;
  top: 96px;
  left: 236px;
  width: 282px;
  height: 46px;
}

.letter-subtitle {
  z-index: 2;
  top: 192px;
  left: 310px;
  width: 132px;
  height: 32px;
}

.letter-card {
  width: 203px;
  height: 194px;
}

.letter-01 {
  top: 273px;
  left: 62px;
}

.letter-02 {
  top: 273px;
  left: 277px;
}

.letter-03 {
  top: 273px;
  left: 492px;
}

.letter-04 {
  top: 486px;
  left: 62px;
}

.letter-05 {
  top: 486px;
  left: 277px;
}

.letter-06 {
  top: 486px;
  left: 492px;
}

.letter-07 {
  top: 699px;
  left: 62px;
}

.letter-08 {
  top: 699px;
  left: 277px;
}

.letter-09 {
  top: 699px;
  left: 492px;
}

.letter-10 {
  top: 906px;
  left: 62px;
}

.letter-decoration {
  z-index: 2;
  top: 1121px;
  left: 85px;
  width: 581px;
  height: 26px;
}

.letter-progress-count {
  z-index: 3;
  top: 1118px;
  left: 373px;
  width: 34px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("./assets/page2/background.png");
  background-repeat: no-repeat;
  background-size: 750px 1335px;
  background-position: -373px -1118px;
  color: #741b0f;
  font-family: "DIN Alternate", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.7px;
  pointer-events: none;
}

.letter-back {
  z-index: 4;
  top: 1164px;
  left: 77px;
  width: 289px;
  height: 91px;
}

.letter-enter {
  z-index: 4;
  top: 1169px;
  left: 377px;
  width: 299px;
  height: 83px;
}

.letter-finger {
  z-index: 5;
  top: 1223px;
  left: 620px;
  width: 65px;
  height: 51px;
  pointer-events: none;
  animation: finger-float 1.15s ease-in-out infinite;
  will-change: transform;
}

@keyframes finger-float {
  0%,
  100% {
    transform: translateY(-14px);
  }

  50% {
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter-finger {
    animation: none;
    transform: none;
  }
}