:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #302d27; background: #faf6ef; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.page { min-height: 100svh; max-width: 1120px; margin: auto; padding: 36px 48px 28px; display: flex; flex-direction: column; }
a { color: inherit; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 750; letter-spacing: -.8px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; padding-bottom: 5px; color: #fffaf4; background: #ad4c30; border-radius: 12px; font: italic 700 32px Georgia, serif; }
.header-note, footer { color: #726b62; font-size: 13px; }
main { width: 100%; max-width: 420px; margin: auto; padding: 76px 0 64px; }
.eyebrow { color: #9b482f; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; margin: 0 0 20px; }
h1 { font: 400 clamp(40px, 6vw, 54px)/1.06 Georgia, serif; letter-spacing: -1.8px; margin: 0 0 22px; text-wrap: balance; }
p { line-height: 1.65; }
.description { color: #70685f; margin: 0 0 30px; font-size: 16px; }
label { display: block; margin: 22px 0 9px; font-size: 14px; font-weight: 600; }
input { width: 100%; min-height: 54px; color: #302d27; background: #fffdf9; border: 1px solid #d8cfc1; border-radius: 12px; padding: 14px 16px; font: inherit; }
input::placeholder { color: #8c8378; }
.password-field { position: relative; }
.password-field input { padding-right: 56px; }
/* Hides Edge/IE's own reveal button; the page draws one for every browser. */
.password-field input::-ms-reveal { display: none; }
button.reveal { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); justify-content: center; width: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 10px; background: transparent; color: #70685f; }
button.reveal:hover { background: #f3ece2; color: #302d27; }
.reveal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reveal .eye-off, .reveal[aria-pressed="true"] .eye { display: none; }
.reveal[aria-pressed="true"] .eye-off { display: block; }
.hint { color: #766d62; font-size: 12px; margin: 8px 0 0; }
button, .secondary { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 54px; margin-top: 24px; border: 0; border-radius: 12px; padding: 16px 20px; background: #ad4c30; color: #fff; font: 600 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; text-decoration: none; }
button:hover { background: #923c26; }
button:disabled { opacity: .65; cursor: wait; }
.secondary { background: transparent; border: 1px solid #d8cfc1; color: #704b39; justify-content: center; }
:focus-visible { outline: 3px solid #8a452f; outline-offset: 4px; }
#status:empty { display: none; }
#status { margin-top: 20px; font-size: 14px; }
.error { color: #9e3327; }
.text-link { display: inline-block; margin-top: 24px; text-underline-offset: 4px; color: #8c442c; font-size: 14px; }
.help { border-top: 1px solid #e4dcd0; display: flex; align-items: flex-start; gap: 12px; margin-top: 36px; padding-top: 22px; color: #7d7468; }
.help span { color: #b36c45; font-size: 22px; }
.help p { margin: 0; max-width: 260px; font-size: 13px; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; border-top: 1px solid #e4dcd0; }
footer nav { display: flex; gap: 24px; }
footer a { text-decoration: none; padding: 10px 0; }
footer a:hover { text-decoration: underline; }
@media (max-width: 560px) { .page { padding: 24px; } .header-note { display: none; } main { padding: 64px 0 48px; } footer { align-items: flex-start; flex-direction: column; gap: 8px; } }