:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #ecece7; background: #141615; }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; display: grid; place-items: center; padding: 64px 24px 100px; }
main { width: min(100%, 380px); }
.mark { font-size: 24px; font-weight: 700; margin-bottom: 64px; }
.mark span { color: #a5b98e; }
.eyebrow { font-size: 10px; letter-spacing: .2em; color: #b0b6af; margin: 0 0 20px; }
h1 { font-size: clamp(32px, 7vw, 42px); font-weight: 400; letter-spacing: -.04em; margin: 0 0 14px; }
.intro { font-size: 14px; color: #a4aaa3; margin-bottom: 40px; line-height: 1.6; }
label { display: block; font-size: 12px; margin-bottom: 10px; }
input { width: 100%; border: 1px solid #454a44; border-radius: 0; background: #1b1e1b; color: #fff; padding: 14px; font: inherit; margin-bottom: 24px; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #bcd5a3; outline-offset: 4px; }
button { width: 100%; border: 0; border-radius: 0; background: #c3d4b1; color: #192116; padding: 16px; font: inherit; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; }
button:hover { background: #d5e4c6; }
button:disabled { opacity: .6; cursor: wait; }
#error { color: #f2b6a9; font-size: 13px; line-height: 1.5; margin: -8px 0 20px; }
#error:empty { display: none; }
.footnote { color: #a4aaa3; font-size: 11px; line-height: 1.6; margin-top: 22px; }
footer { position: absolute; bottom: 28px; left: 32px; right: 32px; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .14em; color: #929b90; }
a { color: #c3d4b1; }
@media (max-height: 700px) { body { position: relative; } .mark { margin-bottom: 32px; } }