:root{color-scheme:light;font:100%/1.65 system-ui,sans-serif;background:#f5f3ea;color:#172a25}
*{box-sizing:border-box}
body{margin:0}
main{max-width:57rem;margin:auto;padding:clamp(1rem,5vw,4rem)}
header{margin-bottom:2rem}
header p{max-width:37rem}
.eyebrow{font-weight:750;letter-spacing:.08em;color:#355d50}
h1{font-size:clamp(2.2rem,7vw,4.3rem);line-height:1.14;margin:.4em 0}
h2{margin:0 0 1rem;font-size:1.25rem}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
section{background:#fffef9;border:1px solid #cbd0be;border-radius:1rem;padding:clamp(1rem,4vw,2rem)}
section.result{background:#173c32;color:#f8f9ed;border-color:#173c32}
label,input,textarea{display:block;width:100%}
label{font-weight:650;margin:.8rem 0 .3rem}
label span{font-size:.82rem;color:#425650}
input,textarea,button{font:inherit;border-radius:.5rem;padding:.6rem .8rem}
input,textarea{border:1px solid #6e8078;background:#fff;color:#172a25}
button{margin-top:1rem;background:#173c32;border:1px solid #173c32;color:white;cursor:pointer;font-weight:750}
:focus-visible{outline:3px solid #aa4f00;outline-offset:3px}
dd{margin:0 0 1rem;font-size:1.55rem;font-weight:750;font-variant-numeric:tabular-nums}
.notes{margin-top:1rem}
a{color:#175849;text-underline-offset:.16em}
footer{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:38rem){.grid{grid-template-columns:1fr}}