:root {
  --green: #1E3B2F;
  --green-deep: #142A21;
  --stone: #EEEEEA;
  --brass: #A8834B;
  --mist: rgba(238, 238, 234, .18);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--green);
  color: var(--stone);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.door { width: min(340px, 100%); text-align: center; transition: opacity .4s, transform .4s; }
.open .door { opacity: 0; transform: scale(.98); }
.mark {
  font-family: 'Bodoni Moda', Didot, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(64px, 22vw, 96px);
  line-height: 1;
  letter-spacing: -.02em;
}
.mark::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--brass);
  margin: 22px auto 0;
}
.hint { margin: 22px 0 26px; font-size: 15px; opacity: .8; min-height: 1.4em; }
.dots { display: flex; justify-content: center; gap: 18px; margin-bottom: 40px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--stone); transition: background .15s; }
.dots i.on { background: var(--stone); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; }
.pad button {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--mist);
  background: transparent;
  color: var(--stone);
  font: 400 28px/1 'Bodoni Moda', Didot, serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.pad button:active { background: var(--mist); }
.pad button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.pad .del { border: 0; font: 500 14px 'Hanken Grotesk', sans-serif; opacity: .8; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } .door { transition: none; } }
.cap { display: flex; justify-content: center; margin: -18px 0 22px; min-height: 65px; }
.cap[hidden] { display: none; }