:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #322d28; background: #f5f1eb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 420px); padding: 36px; border: 1px solid #e4dcd2; border-radius: 20px; background: #fffcf7; box-shadow: 0 16px 60px #63482a12; }
.brand { color: inherit; text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.brand span { margin-left: 8px; font-size: 12px; letter-spacing: 0; font-weight: 400; }
h1 { margin-top: 32px; font-size: 28px; }
.intro, .footnote, .back { font-size: 14px; color: #776c60; line-height: 1.7; }
#status { min-height: 24px; font-size: 14px; line-height: 1.6; }
label { display: block; margin: 18px 0 8px; font-size: 14px; }
input { width: 100%; padding: 12px; border: 1px solid #cfc5b9; border-radius: 8px; background: transparent; color: inherit; font: inherit; }
button, .button { display: block; width: 100%; padding: 12px; margin-top: 24px; border: 0; border-radius: 8px; color: #fff; background: #72513a; font: inherit; text-align: center; text-decoration: none; cursor: pointer; }
.secondary { color: inherit; background: transparent; border: 1px solid #cfc5b9; margin-top: 12px; }
:focus-visible { outline: 3px solid #be874e; outline-offset: 3px; }
button:disabled { opacity: .6; cursor: wait; }
.footnote { margin-top: 28px; }
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root { color: #eae3d8; background: #1d1b18; }
  .card { background: #27231f; border-color: #494139; }
  .intro, .footnote, .back { color: #b5a99a; }
  input, .secondary { border-color: #64594c; }
}
@media (max-width: 420px) { .card { padding: 24px; } }