:root { color-scheme: light; font-family: system-ui, sans-serif; color: #23372f; background: #f5f6f2; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 780px; margin: 0 auto; padding: 56px 24px 28px; }
header { margin-bottom: 32px; }
.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .18em; color: #63766a; }
h1 { font-size: clamp(2.8rem, 8vw, 4rem); letter-spacing: -.065em; margin: 10px 0; line-height: 1.05; }
h1 span { color: #397b55; }
header > p:last-child { max-width: 430px; color: #607168; line-height: 1.6; }
form, #results { background: #fff; border: 1px solid #dce3d9; border-radius: 16px; padding: 28px; box-shadow: 0 5px 20px #25382b06; }
label { display: block; font-size: .86rem; font-weight: 650; margin-bottom: 9px; }
input, textarea, select, button { font: inherit; }
input, textarea, select { width: 100%; border: 1px solid #b7c5b8; border-radius: 8px; background: #fcfdfa; color: inherit; padding: 12px; }
textarea { resize: vertical; line-height: 1.5; }
textarea::placeholder, input::placeholder { color: #748079; }
:focus-visible { outline: 3px solid #7da689; outline-offset: 3px; }
input:disabled { opacity: .6; }
.hint { color: #647168; font-size: .78rem; line-height: 1.6; }
details { margin: 24px 0; padding: 18px 0; border-block: 1px solid #e3e9df; }
summary { cursor: pointer; font-size: .87rem; font-weight: 600; }
.advanced { padding-top: 24px; }
.advanced textarea, .advanced select { margin-bottom: 22px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
button { width: 100%; display: flex; justify-content: space-between; border: 0; border-radius: 8px; background: #285c40; color: white; padding: 15px 18px; font-weight: 600; cursor: pointer; margin-top: 22px; }
button:hover { background: #1d4931; }
button:disabled { opacity: .6; cursor: wait; }
#status { font-size: .86rem; line-height: 1.6; margin: 20px 0; }
#results { margin-top: 24px; }
.result-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
h2 { font-size: 1.2rem; margin: 0; letter-spacing: -.03em; }
dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; padding-block: 22px; border-block: 1px solid #e3e9df; margin: 24px 0 16px; }
dt { font-size: .7rem; color: #647168; }
dd { font-size: 1.15rem; font-weight: 650; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: 13px 8px; border-bottom: 1px solid #edf0e9; }
thead th { font-size: .7rem; color: #647168; font-weight: 500; }
tbody th { overflow-wrap: anywhere; max-width: 180px; }
th:first-child { padding-left: 0; }
td:nth-last-child(-n+2), th:nth-last-child(-n+2) { text-align: right; font-variant-numeric: tabular-nums; }
meter { width: 100%; min-width: 75px; height: 12px; border: none; border-radius: 4px; background: #e8eee5; }
meter::-webkit-meter-bar { background: #e8eee5; border: none; }
meter::-webkit-meter-optimum-value { background: #528460; }
meter::-moz-meter-bar { background: #528460; }
footer { text-align: center; color: #647168; font-size: .73rem; line-height: 1.7; padding: 24px 8px; }
[hidden] { display: none !important; }
@media (max-width: 520px) { main { padding: 32px 16px 16px; } form, #results { padding: 20px; } .options { gap: 12px; } }