.unlock-stage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px clamp(16px, 5vw, 40px);
}

.unlock-card {
  width: min(420px, 100%);
  padding: clamp(28px, 5vw, 40px);
  text-align: center;
  animation: unlock-in 0.5s var(--ease);
}

@keyframes unlock-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
}

.unlock-brand {
  justify-content: center;
  margin-bottom: 26px;
}

.unlock-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 4vw, 27px);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.unlock-sub {
  margin: 0 auto 26px;
  max-width: 34ch;
}

.unlock .field {
  margin-bottom: 12px;
}

.unlock input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.3em;
  padding: 16px;
}

.unlock input::placeholder {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0;
}

/* A wrong password should feel wrong before you read the message. */
.unlock-card.is-wrong {
  animation: shake 0.42s var(--ease);
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.unlock input:disabled,
.unlock .btn:disabled {
  cursor: not-allowed;
}

.unlock input:disabled {
  opacity: 0.5;
}