.fraction { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; text-align: center; line-height: 1.2; margin: 0 .18em; }
.fraction > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .2em .12em; }
.fraction > span:last-child { padding: .12em .2em 0; }
.equation { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-grid input { width: 100%; max-width: 135px; }
.field-grid label { font-size: 14px; }
.field-grid.fraction-fields { grid-template-columns: minmax(0, 180px); gap: 0; justify-content: center; text-align: center; }
.fraction-fields > div:first-child { border-bottom: 3px solid #214b72; padding-bottom: 8px; }
.fraction-fields > div:last-child { padding-top: 12px; }
.fraction-fields label { margin-bottom: 6px; }
.fraction-fields input { text-align: center; }
.fraction-fields .result { margin-top: 4px; }
.step-equation { line-height: 2.4; }
#fraction-visual { margin: 0 0 20px; text-align: center; }
#fraction-visual svg { width: 100%; max-width: 370px; height: 55px; }
.visual-caption { font-size: 14px; margin-bottom: 0; }
#proof:empty { display: none; }
@media (max-width: 480px) { .equation { font-size: 30px; } .field-grid { gap: 9px; } }