* { box-sizing: border-box; }
html { background: #f4f7f6; color: #152522; }
body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; }
main { width: min(100% - 2rem, 39rem); margin: clamp(2rem, 12vh, 8rem) auto; padding: clamp(1.25rem, 5vw, 2.75rem); border: 1px solid #c9d8d5; border-top: .25rem solid #176050; background: #fff; }
h1 { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.18; letter-spacing: -.03em; }
label { display: block; margin-bottom: .45rem; font-weight: 600; }
input, button { display: block; min-height: 2.75rem; font: inherit; border-radius: .25rem; }
input { width: 100%; padding: .6rem .75rem; background: #f4f7f6; color: #152522; border: 1px solid #7a9390; }
button { margin-top: .8rem; padding: .6rem 1rem; color: #fff; background: #176050; border: 1px solid #176050; font-weight: 600; cursor: pointer; }
button:hover { background: #125245; }
[hidden] { display: none; }
:focus-visible { outline: 2px solid #176050; outline-offset: 3px; }
p { margin: .6rem 0 0; }
#status { min-height: 1.5em; color: #314e48; }