:root { color-scheme: light; font-family: system-ui, sans-serif; color: #102b2a; background: #eff7f3; }
* { box-sizing: border-box; }
body { margin: 0; }
header { border-bottom: 1px solid #ccdfd6; background: #f8fcf9; }
nav, main { max-width: 960px; margin: auto; padding-inline: 24px; }
nav { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
a { color: #175e4b; text-underline-offset: .2em; }
.brand { color: #102b2a; font-weight: 800; text-decoration: none; font-size: 1.3rem; }
main { padding-block: clamp(36px, 8vw, 82px); }
.eyebrow { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: #286351; }
h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; margin: .35em 0; letter-spacing: -.04em; }
.intro, .note { color: #3c5b54; line-height: 1.6; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.card { padding: clamp(20px, 4vw, 34px); border-radius: 18px; background: white; border: 1px solid #d6e5de; }
form { display: grid; gap: 15px; }
label { display: grid; gap: 6px; font-weight: 650; }
input, button { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 8px; font: inherit; }
input { border: 1px solid #91aaa0; }
button { color: white; background: #175e4b; border: 0; cursor: pointer; font-weight: 700; }
button:hover { background: #104636; }
.result { color: #e8f6ef; background: #113b34; }
.result strong { display: block; font-size: clamp(1.65rem, 4vw, 2.7rem); font-variant-numeric: tabular-nums; }
dl { margin: 26px 0 0; }
dl div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; border-top: 1px solid #52746c; padding: 13px 0; }
dd { margin: 0; font-weight: 700; }
.guide { max-width: 720px; line-height: 1.65; margin-top: 28px; }
.guide h2 { line-height: 1.25; }
:focus-visible { outline: 3px solid #bc6900; outline-offset: 3px; }
@media (max-width: 650px) { .columns { grid-template-columns: 1fr; } }