:root { color-scheme: light dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #232521; background: #f5f6f3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 32px 20px; }
main { width: min(100%, 520px); }
.brand { margin: 0 0 20px; font-size: 16px; font-weight: 650; }
.card { padding: clamp(24px, 6vw, 40px); border: 1px solid #d7dcd2; border-radius: 20px; background: #fff; }
.eyebrow { margin: 0 0 16px; color: #4b6140; font-size: 13px; font-weight: 650; letter-spacing: .025em; }
h1 { margin: 0 0 20px; font-size: clamp(26px, 6vw, 34px); line-height: 1.2; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
p { font-size: 16px; line-height: 1.6; }
#result-message { margin: 0; }
.notice { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #d7dcd2; color: #60675b; font-size: 14px; }
.footer { margin: 20px 0 0; color: #60675b; font-size: 13px; }
body[data-result="failure"] .eyebrow { color: #a02e20; }
@media (prefers-color-scheme: dark) {
  :root { color: #f0f1ed; background: #141613; }
  .card { background: #1d201b; border-color: #3f4639; }
  .eyebrow { color: #b0ce99; }
  .notice { color: #b2b9ab; border-color: #3f4639; }
  .footer { color: #b2b9ab; }
  body[data-result="failure"] .eyebrow { color: #ffb4a6; }
}