.equation { font-size: clamp(18px, 2vw, 24px); line-height: 1.5; padding: 18px 8px; }
.percent-visual { margin: 4px 0 20px; }
.percent-visual svg { display: block; width: 100%; height: auto; font: bold 16px 'Trebuchet MS', sans-serif; fill: #214b72; }
.percent-visual figcaption { font-size: 14px; line-height: 1.5; margin-top: 8px; }
.percent-circles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.percent-circles svg { width: 100%; height: auto; font-size: 18px; font-weight: bold; fill: #214b72; }
.percent-circles h3 { font-size: 19px; margin: 0; }
.circle-total { font-size: 20px; margin: 10px 0 0; }
.percent-fraction-fields { text-align: center; }
.percent-fraction-fields input { display: block; margin: auto; text-align: center; }
.percent-fraction-fields label:nth-of-type(2) { border-top: 3px solid #214b72; width: 150px; margin: 10px auto 4px; padding-top: 8px; }