:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #242724; background: #faf9f6; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 48px, 380px); margin: clamp(36px, 10vh, 100px) auto 40px; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -.8px; line-height: 1.2; margin: 0 0 36px; }
form, .results { display: grid; }
label { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
input { width: 100%; min-height: 50px; border: 1px solid #d5d6d0; border-radius: 6px; background: #fff; padding: 12px 14px; color: inherit; font: inherit; font-size: 18px; margin-bottom: 24px; }
input:focus-visible { outline: 2px solid #365b49; outline-offset: 3px; }
.results { border-top: 1px solid #d5d6d0; margin-top: 8px; padding-top: 28px; }
output { font-size: 23px; line-height: 1.3; font-variant-numeric: tabular-nums; margin-bottom: 24px; overflow-wrap: anywhere; }
#monthly { font-size: 32px; font-weight: 600; letter-spacing: -.7px; }
output:last-child { margin-bottom: 0; }