:root {
  color-scheme: dark;
  font-family: 'Malgun Gothic', 'Segoe UI', sans-serif;
  color: #cdd6df;
  background: #061019;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 24px; }
.entrance { width: min(100%, 360px); border-top: 2px solid #c8aa6e; padding-top: 32px; }
h1 { margin: 0; font: 700 44px Batang, Georgia, serif; letter-spacing: 7px; color: #d9bc7d; }
.instruction { margin: 18px 0 36px; font-size: 14px; line-height: 1.7; color: #99a9b1; }
label { display: block; margin-bottom: 10px; font-size: 13px; color: #d9d2bf; }
input, button { width: 100%; min-height: 50px; border-radius: 0; font: inherit; }
input { padding: 12px 14px; border: 1px solid #72623e; color: #eee3cb; background: #0a1c28; font-size: 16px; }
input[aria-invalid='true'] { border-color: #e6a797; }
button { padding: 12px 20px; border: 1px solid #c8aa6e; color: #f0e4c6; background: #183b46; font-weight: 700; cursor: pointer; }
button:hover { background: #205167; }
button:disabled { opacity: .6; cursor: wait; }
input:focus-visible, button:focus-visible { outline: 2px solid #c8aa6e; outline-offset: 4px; }
#access-error { min-height: 40px; margin: 10px 0 12px; font-size: 13px; line-height: 1.5; color: #efb9a4; }
noscript { color: #efb9a4; font-size: 13px; }
@media (max-height: 480px) { body { place-items: start center; } }