* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  min-height: 100%;
  background: #000;
}
body {
  color: #a52a40;
  font-family: "Times New Roman", Times, serif;
  overflow-x: hidden;
}
.stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.portrait {
  position: absolute;
  z-index: -1;
  height: auto;
  image-rendering: auto;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.portrait-entry {
  width: min(49vw, 650px);
  right: max(2vw, calc((100vw - 1120px)/2));
  top: 50%;
  transform: translateY(-49%);
  opacity: .65;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 76%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse at 53% 49%, #000 29%, rgba(0,0,0,.85) 47%, transparent 75%);
}
.portrait-password {
  width: min(42vw, 520px);
  left: max(2vw, calc((100vw - 1120px)/2));
  top: 56%;
  transform: translateY(-50%);
  opacity: 0;
}
.teacup {
  filter: drop-shadow(0 0 22px rgba(130, 10, 25, .12));
  -webkit-mask-image: radial-gradient(ellipse at 50% 56%, #000 44%, rgba(0,0,0,.92) 63%, transparent 86%);
  mask-image: radial-gradient(ellipse at 50% 56%, #000 44%, rgba(0,0,0,.92) 63%, transparent 86%);
}
body.password-view .portrait-entry {
  opacity: 0;
}
body.password-view .portrait-password {
  opacity: .72;
}
.content {
  position: relative;
  width: min(800px, 90vw);
  margin-top: -3vh;
  min-height: 175px;
}
.panel {
  width: fit-content;
  max-width: 100%;
  min-width: 300px;
  text-align: center;
}
h1 {
  font: normal clamp(36px, 5vw, 50px)/1.3 Papyrus, Herculanum, fantasy;
  color: #a3243b;
  margin: 0 0 22px;
  font-weight: normal;
}
button {
  cursor: pointer;
}
.enter {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font: 19px "Times New Roman", Times, serif;
  color: #b6364c;
  background: none;
  border: 0;
  padding: 0 4px;
}
.enter .word {
  position: relative;
  z-index: 2;
}
.enter::before, .enter::after {
  content: "enter";
  position: absolute;
  top: 0;
  left: 4px;
  z-index: 1;
  color: #9a2039;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.enter::before {
  --x: -13px;
  --y: -8px;
  --alpha: .4;
  animation: ghost-a 690ms steps(1, end) infinite paused;
}
.enter::after {
  --x: 15px;
  --y: 5px;
  --alpha: .33;
  animation: ghost-b 530ms steps(1, end) -120ms infinite paused;
}
.enter:hover .word, .enter:focus-visible .word {
  color: #e14a63;
  animation: uneasy 190ms steps(2, end) infinite;
  display: inline-block;
}
.enter:hover::before, .enter:hover::after,
.enter:focus-visible::before, .enter:focus-visible::after {
  animation-play-state: running;
}
@keyframes ghost-a {
  0%,12% {
    opacity: 0;
    transform: translate(calc(var(--x) - 4px),calc(var(--y) + 2px));
  }
  13%,27% {
    opacity: var(--alpha);
    transform: translate(var(--x),var(--y));
  }
  28%,43% {
    opacity: 0;
  }
  44%,48% {
    opacity: .12;
    transform: translate(calc(var(--x) + 5px), var(--y));
  }
  49%,74% {
    opacity: 0;
  }
  75%,91% {
    opacity: var(--alpha);
    transform: translate(calc(var(--x) - 2px),calc(var(--y) + 4px));
  }
  92%,100% {
    opacity: 0;
  }
}
@keyframes ghost-b {
  0%,8% {
    opacity: var(--alpha);
    transform: translate(calc(var(--x) + 2px),calc(var(--y) - 2px));
  }
  9%,30% {
    opacity: 0;
  }
  31%,47% {
    opacity: var(--alpha);
    transform: translate(calc(var(--x) - 5px),calc(var(--y) + 3px));
  }
  48%,54% {
    opacity: .08;
  }
  55%,82% {
    opacity: 0;
  }
  83%,96% {
    opacity: var(--alpha);
    transform: translate(var(--x),calc(var(--y) - 5px));
  }
  97%,100% {
    opacity: 0;
  }
}
@keyframes uneasy {
  0% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(-1px,1px);
  }
  50% {
    transform: translate(2px,-1px);
  }
  75% {
    transform: translate(-2px,0);
  }
  100% {
    transform: translate(0,1px);
  }
}
.screen[hidden] {
  display: none;
}
.prompt {
  color: #942238;
  font: 20px Papyrus, Herculanum, fantasy;
  margin: 0 0 18px;
}
body.password-view .content {
  margin-left: min(27vw, 320px);
}
.password {
  width: 210px;
  max-width: 100%;
  background: #000;
  color: #bb3b51;
  font: 17px "Courier New", monospace;
  border: 0;
  border-bottom: 1px solid #681c2b;
  padding: 8px 6px;
  border-radius: 0;
  outline: none;
  text-align: center;
}
.password:focus {
  border-bottom-color: #b2344d;
}
.password::placeholder {
  color: #56202a;
}
.password-submit {
  display: block;
  margin: 17px auto 0;
  border: 0;
  background: transparent;
  font: 17px "Times New Roman", serif;
  color: #a52a40;
  padding: 1px 5px;
}
.password-submit:hover, .back:hover {
  color: #ed536f;
  text-shadow: -3px 1px #602132, 3px -1px #441019;
}
.back {
  display: block;
  margin: 27px auto 0;
  padding: 0;
  font: 12px "Times New Roman", serif;
  color: #6b2634;
  border: 0;
  background: transparent;
}
.error {
  min-height: 1em;
  font: 12px "Courier New",monospace;
  color: #b52c42;
  margin-top: 13px;
}
.error.shake {
  animation: uneasy 80ms steps(2,end) 5;
}
@media (max-width: 700px) {
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5vh;
  }
  .panel {
    min-width: 0;
  }
  .portrait-entry {
    width: 100vw;
    max-width: 510px;
    right: -22vw;
    opacity: .30;
  }
  .portrait-password {
    width: 84vw;
    max-width: 420px;
    left: 50%;
    top: 69%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  body.password-view .portrait-password {
    opacity: .38;
  }
  body.password-view .content {
    margin-left: 0;
  }
  h1 {
    font-size: 38px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .enter:hover .word, .enter:focus-visible .word, .error.shake {
    animation: none;
  }
  .enter:hover::before, .enter:hover::after,
  .enter:focus-visible::before, .enter:focus-visible::after {
    animation: none;
    opacity: .22;
    transform: translate(var(--x),var(--y));
  }
}