.explanation-text { max-width: 68ch; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.explanation-text > :first-child { margin-top: 0; }
.explanation-text > :last-child { margin-bottom: 0; }
.explanation-text p, .feedback .explanation-text p, .sample-feedback .explanation-text p { margin: 0 0 16px; font-size: inherit; line-height: inherit; white-space: normal; }
.explanation-text strong { font-weight: 800; color: inherit; }
.explanation-text ul, .explanation-text ol { margin: 14px 0 18px; padding-left: 26px; }
.explanation-text li { padding-left: 5px; margin: 9px 0; }
.explanation-text li::marker { color: var(--purple, #7951c5); font-weight: 800; }
.explanation-text .explanation-steps { padding-left: 30px; }
.explanation-text .explanation-steps li { padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--purple, #7951c5) 6%, transparent); }
.explanation-figure { margin: 22px 0; padding: 18px; border: 1px solid #e5def4; border-radius: 16px; background: white; }
.explanation-figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%),1fr)); gap: 16px; margin: 16px 0; }
.explanation-text .explanation-figure-grid p { margin-bottom: 8px; font-weight: 800; }
.explanation-figure-grid img { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.explanation-figure-grid:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 580px) { .explanation-text { font-size: 16px; line-height: 1.65; } }