:root { font: 16px/1.5 system-ui, sans-serif; color: #222620; background: #f6f5f1; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 36px, 440px); margin: 12vh auto; }
.brand { font-weight: 800; letter-spacing: -.05em; margin-bottom: 48px; }
h1 { font-size: clamp(3rem, 12vw, 4rem); letter-spacing: -.065em; line-height: 1; margin: 0 0 16px; }
p { color: #62675e; }
form { margin-top: 36px; }
label { display: block; font-weight: 700; margin-bottom: 6px; }
input { display: block; width: 100%; padding: 14px; border: 1px solid #bfc3b9; border-radius: 10px; background: white; font: inherit; }
input:focus-visible, button:focus-visible { outline: 3px solid #86a642; outline-offset: 2px; }
button { margin-top: 16px; padding: 14px 22px; border: 0; border-radius: 10px; background: #20271b; color: white; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.text-button { display: block; padding-inline: 0; background: transparent; color: #475737; }
#error { padding: 12px; border-radius: 10px; background: #fff0d4; color: #6a4600; }
[hidden] { display: none !important; }