.calc { color: var(--ink); background: var(--paper); }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); margin-top: 32px; }
.calc__field { display: grid; gap: 10px; margin-bottom: 26px; }
.calc__field label { font-weight: 600; }
.calc__field input[type=number] { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--ink); border-radius: 10px; color: var(--ink); background: var(--paper); font: 500 18px/1.4 var(--mono); }
.calc__field input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--amber-ink, var(--ink)); cursor: pointer; }
.calc__field small, .calc__privacy, .calc__formula { font: 400 12px/1.6 var(--mono); }
.calc__field input[aria-invalid=true] { outline: 2px solid var(--ink); outline-offset: 2px; }
.calc__results { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--ink); border-top: 4px solid var(--amber); border-radius: 14px; align-self: start; overflow-wrap: anywhere; }
.calc__results dl { margin: 0; }
.calc__results dl div + div { margin-top: 24px; }
.calc__results dt { font-size: 15px; }
.calc__results dd { margin: 8px 0 0; font: 400 clamp(30px, 3vw, 44px)/1.1 var(--display); }
.calc__results .btn { white-space: normal; line-height: 1.4; text-align: center; }
.calc__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) { .calc__grid { grid-template-columns: minmax(0, 1fr); } }