.fraction-visual:not([hidden]) { display: grid; grid-template-columns: repeat(var(--parts), minmax(0, 1fr)); gap: 3px; width: min(100%, 420px); height: 74px; margin: 16px auto; border: 2px solid #405356; padding: 3px; background: white; }
.fraction-visual span { background: #f4f6f6; border: 1px solid #B4C1C3; }
.fraction-visual .filled { background: #D31316; border-color: #D31316; }
.fraction-quiz .big-sum { font-size: 28px; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
.fraction-quiz .quiz-meta h2 { font-size: 26px; letter-spacing: 0; }
.fraction-answer { display: inline-grid; min-width: 60px; text-align: center; font-size: 28px; line-height: 1.1; vertical-align: middle; }
.fraction-answer > span:first-child { border-bottom: 2px solid currentColor; padding: 0 8px 5px; }
.fraction-answer > span:last-child { padding-top: 5px; }
.scratch-denominator:not([hidden]) { display: block; border-top: 2px solid #405356; text-align: center; font-size: 22px; padding-top: 4px; }
.fraction-quiz .answer-display { min-height: 100px; }
.scratch-fraction-visual { padding: 0 12px; }
.scratch-fraction-visual .fraction-visual { height: 38px; margin: 0 auto 8px; }
.scratch-answer > label { flex-shrink: 0; }
@media (max-width: 650px) {
  #quiz-screen.fraction-quiz { padding: 16px 20px 24px; }
  .fraction-quiz .quiz-meta { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 12px; }
  .fraction-quiz .quiz-meta > div { min-width: 0; }
  .fraction-quiz .quiz-meta > strong { flex-shrink: 0; padding: 8px; white-space: nowrap; }
  .fraction-quiz .quiz-meta .eyebrow { margin-bottom: 6px; }
  .fraction-quiz .progress-track { margin-bottom: 14px; }
  .fraction-quiz .quiz-card { padding: 16px; }
  .fraction-quiz .quiz-prompt { padding: 0 44px; min-height: 28px; margin: 0; }
  .fraction-quiz .big-sum { margin: 12px 0; }
  .fraction-quiz .feedback { font-size: 16px; min-height: 24px; margin: 8px 0 0; }
  .fraction-quiz .answer-display { min-height: 86px; padding: 8px; }
  .fraction-quiz .keypad { margin-top: 14px; gap: 8px; }
  .fraction-quiz .keypad button { min-height: 52px; }
  .fraction-quiz .big-sum { font-size: 22px; }
  .fraction-quiz .quiz-meta h2 { font-size: 22px; }
  .fraction-visual:not([hidden]) { height: 48px; margin: 12px auto; }
  .scratch-fraction-visual .fraction-visual { height: 38px; margin: 0 auto 8px; }
}
@media (max-height: 500px) {
  .scratch-dialog .scratch-answer { padding: 6px 12px; }
  .scratch-dialog .scratch-feedback:empty { display: none; }
  .scratch-dialog .scratch-tools { padding: 4px 12px; }
}