#teaching { display: flex; flex-direction: column; align-items: center; }
#digital-readout { font: bold clamp(1.6rem, 5vw, 2.5rem)/1.3 ui-monospace, monospace; background: white; color: black; border: 1px solid #ccc; border-radius: 10px; padding: 0 .75rem; }
#teachingCanvas { width: min(380px, 100%, max(240px, 100svh - 28rem)); height: auto; margin: .5rem 0; }
.teaching-controls { width: min(600px, 100%); }
#manual-slider { width: 100%; height: 28px; accent-color: var(--accent); }
.teaching-controls .actions { justify-content: center; }
.teaching-controls .checks { justify-content: center; }
#test-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .6rem; margin-top: 1rem; }
.question-card { display: flex; flex-direction: column; align-items: center; background: white; color: black; border: 1px solid #bbb; border-radius: 10px; padding: .5rem; break-inside: avoid; }
.question-card canvas { width: 140px; height: 140px; }
.question-number { align-self: start; color: #555; font-size: .75rem; }
.mode-hint { font-size: .8rem; }
.time-display-area { display: flex; align-items: center; min-height: 40px; gap: .25rem; }
.answer-box { width: 35px; border: 0; border-bottom: 1px solid #333; background: transparent; color: black; border-radius: 0; text-align: center; }
.static-time { font: bold 1.3rem ui-monospace, monospace; }
@media print {
  #teaching { display: none !important; }
  #testing[hidden] { display: block !important; }
  #test-container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 1rem; }
  .question-card { padding: 8px; border-radius: 6px; }
  .question-card canvas { width: 120px; height: 120px; max-width: 100%; }
}