/* A conservative compatibility layer for the standalone TESOL artifacts.
   It normalizes type and usability without flattening their individual layouts. */
html { overflow-wrap: anywhere; }
html body,
html body input,
html body button,
html body select,
html body textarea,
html body table { font-family: var(--font-body) !important; }
html body h1,
html body h2,
html body h3,
html body .handwritten { font-family: var(--font-display) !important; }
html body code,
html body pre,
html body kbd,
html body samp,
html body tt,
html body time { font-family: var(--font-mono) !important; }
html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible { outline: 3px dashed #e6c27a !important; outline-offset: 3px; }
html body img { max-width: 100%; height: auto; }
html body pre { max-width: 100%; overflow-x: auto; }
html body table { max-width: 100%; }
html body summary,
html body button,
html body [role="button"] { min-height: 44px; }
@media (max-width: 640px) {
  html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  html body { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; overflow-x: hidden; }
  html body *, html body *::before, html body *::after { box-sizing: border-box; min-width: 0; max-width: 100%; }
  html body table { display: block; overflow-x: auto; }
  html body iframe, html body canvas, html body svg { max-width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}