:root { --ink: #171717; --paper: #d9d6d2; --brown: #65483a; --green: #4e9b55; }
* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
main { min-height: 100vh; display: grid; place-items: center; padding: 48px 24px; }
form { width: min(100%, 500px); display: grid; gap: 12px; }
h1 { max-width: 100%; margin: 0 0 28px; overflow-wrap: anywhere; font-size: clamp(42px, 10vw, 68px); line-height: .88; letter-spacing: -.07em; }
h1 span { color: var(--green); }
label { margin-top: 12px; color: var(--brown); font-size: 13px; font-weight: 700; text-transform: uppercase; }
input { width: 100%; border: 0; border-bottom: 2px solid var(--brown); padding: 10px 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 20px; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--paper) inset; box-shadow: 0 0 0 1000px var(--paper) inset; }
button { width: 100%; margin-top: 20px; padding: 16px 24px; border: 2px solid #2d6a32; border-radius: 12px; background: var(--green); color: #fff; cursor: pointer; font: inherit; font-weight: 700; box-shadow: 0 5px 0 #2d6a32; }
button.is-loading { cursor: wait; opacity: .9; }
#status { min-height: 20px; margin: 8px 0 0; color: var(--brown); font-size: 14px; }
@media (max-width: 600px) { main { align-items: start; padding: 60px 24px 32px; } h1 { font-size: clamp(42px, 14vw, 62px); } }