:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: #111;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #fff; }
button, input { font: inherit; }

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #fff;
}

.entry {
  width: min(360px, 82vw);
  margin: 0;
}

.entry input {
  width: 100%;
  height: 54px;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid #c8c8c8;
  border-radius: 0;
  background: transparent;
  color: #111;
  padding: 0;
  font-size: 20px;
  letter-spacing: .01em;
  outline: 0;
  text-align: center;
  transition: border-color 140ms ease;
}

.entry input:focus { border-bottom-color: #111; }

.entry input[data-kind="password"] {
  font-size: 29px;
  letter-spacing: .34em;
  text-indent: .34em;
}

.status {
  min-height: 24px;
  margin: 12px 0 0;
  color: #9c1c1c;
  font-size: 13px;
  text-align: center;
}

.entry.shake { animation: shake 260ms ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}