.math-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.math-fields .field { margin: 0; min-width: 0; }
.math-help { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 20px; }
.math-result { min-width: 0; padding: 30px; }
.math-answer { display: block; font-size: clamp(28px, 5vw, 48px); color: var(--deep); margin: 18px 0; overflow-wrap: anywhere; }
.math-result dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; }
.math-result dt { color: var(--muted); }
.math-result dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
#mathTriangleDrawing { display: block; width: 100%; height: auto; margin-bottom: 16px; overflow: visible; }
#triangleShape { fill: var(--mint); stroke: var(--deep); stroke-width: 2; stroke-linejoin: round; }
#mathTriangleDrawing .right-angle { fill: none; stroke: var(--deep); stroke-width: 1.5; }
#mathTriangleDrawing text { fill: var(--deep); font: 16px var(--mono); }
@media (max-width: 430px) { .math-fields { grid-template-columns: 1fr; } .math-result { padding: 22px; } }

#ratioFourth { background: var(--mint); color: var(--deep); font-weight: 600; }

#triangleLabelSideA, #triangleLabelC { text-anchor: end; }
#triangleLabelSideB { text-anchor: middle; }
#saveTriangle { margin-bottom: 20px; }