main { max-width: 1180px; }
.site-header { padding-top: 20px; padding-bottom: 18px; }
.statement { padding: 12px; margin-bottom: 12px; }
.statement #delta { margin: 8px 0 0; text-align: center; font-weight: 750; color: var(--blue); }
.statement .statement-text { min-height: auto; font-size: 1.6rem; font-family: Georgia, serif; }
.graph-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.graph-choice { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid var(--border); }
.graph-heading { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.graph-choice > svg { display: block; width: 100%; max-width: 230px; height: auto; background: white; border-radius: 10px; }
.graph-choice.answer-correct { border-color: #25803c; background: #edf9ef; }
.graph-choice.answer-wrong { border-color: var(--red); background: #fff0f0; }
.answer-status:empty { display: none; }
.answer-status { font-weight: 750; }
.correction { padding: 16px; border: 2px solid; border-radius: 16px; }
.correction h3 { margin-top: 0; }
.correction p { margin-bottom: 0; }
@media (max-width: 900px) {
  .graph-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  main { padding: 0 12px 24px; }
  .chapter-block { padding: 12px; }
  fieldset { padding: 10px; }
  .graph-options { gap: 8px; }
  .graph-heading { font-size: .85rem; gap: 5px; }
}