body.letter-popup-open {
  overflow: hidden;
}

.letter-clean-overlay {
  position: fixed;
  z-index: 2147483647;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(63, 64, 91, 0.68);
}

.letter-clean-overlay.open {
  display: flex;
}

.letter-clean-window {
  position: relative;

  width: min(680px, 94vw);
  max-height: 88vh;

  overflow-y: auto;
  padding: 12px;

  background:
    linear-gradient(
      rgba(255,255,255,.88),
      rgba(255,255,255,.88)
    ),
    url("/images/patterns/lavender-stripe.png")
    center / 170px auto repeat;

  border: 1px solid #74bddf;

  box-shadow:
    0 0 0 3px white,
    0 0 0 5px #74bddf,
    0 0 0 7px #e29abb;
}

.letter-clean-titlebar {
  margin-bottom: 10px;
  padding: 7px 42px 7px 10px;

  color: #8e6688;

  background:
    url("/images/patterns/lavender-polka.jpg")
    center / 160px auto repeat;

  border: 1px solid #d99abb;

  font-family: monospace;
  font-weight: 900;
  text-align: center;
}

.letter-clean-close {
  position: absolute;
  z-index: 2;
  top: 17px;
  right: 17px;

  width: 27px;
  height: 25px;

  padding: 0;

  color: #915f7b;
  background: #fff4fa;

  border: 1px solid #d99abb;

  font-size: 17px;
  cursor: pointer;
}

.letter-clean-gate {
  padding: 30px 20px;

  color: #617391;
  background: rgba(255,255,255,.9);

  border: 1px solid #dfa1bf;

  text-align: center;
}

.letter-clean-envelope {
  width: 90px;
  height: 70px;

  object-fit: contain;
  background: transparent;
  border: 0;
}

.letter-clean-gate h2 {
  margin: 10px 0;

  color: #956482;
}

.letter-clean-input {
  display: block;

  width: min(320px, 90%);

  margin: 16px auto 10px;
  padding: 10px;

  color: #655b7d;
  background: #fffafd;

  border: 1px solid #9e85c2;
  border-radius: 0;

  font-family: monospace;
  font-size: 15px;
  text-align: center;
}

.letter-clean-submit {
  padding: 8px 16px;

  color: #73598d;
  background:
    repeating-linear-gradient(
      0deg,
      #fff8ff 0,
      #fff8ff 3px,
      #e9dcfa 3px,
      #e9dcfa 5px
    );

  border: 1px solid #9e85c2;

  font-family: monospace;
  font-weight: 900;
  cursor: pointer;
}

.letter-clean-error {
  min-height: 20px;
  margin-top: 9px;

  color: #c45c85;

  font-family: monospace;
  font-size: 12px;
}

.letter-clean-content {
  display: none;

  padding: 28px;

  color: #596a87;

  background:
    linear-gradient(
      rgba(255,255,255,.94),
      rgba(255,255,255,.94)
    ),
    url("/images/patterns/lavender-polka.jpg")
    center / 170px auto repeat;

  border: 1px solid #dfa1bf;

  font-size: 14px;
  line-height: 1.85;
}

.letter-clean-content.unlocked {
  display: block;
}

.letter-clean-content h1 {
  margin-top: 0;

  color: #956482;
  font-size: 1.25rem;
}

.letter-clean-content p {
  margin: 0 0 19px;
}

.letter-clean-love {
  color: #a15f82;

  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
}

.letter-clean-signature {
  text-align: right;
}