/* Shared mobile/readability refinements, included by the source builder. */
html { scroll-padding-top: 100px; }
main { overflow-wrap: anywhere; }
main img { max-width: 100%; }
main pre { max-width: 100%; overflow-x: auto; }
main table { display: block; max-width: 100%; overflow-x: auto; }
:where(a,button,input,summary):focus-visible { outline: 3px solid #63834b; outline-offset: 4px; }
.mobile-menu summary { min-width: 44px; min-height: 44px; display: grid; place-content: center; gap: 4px; }
@media (max-width: 600px) {
  .nav-shell { gap: 10px; }
  .brand { min-width: 0; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu nav { max-height: calc(100dvh - 100px); overflow: auto; }
  .mobile-menu nav a, .theme-switch, .btn { min-height: 44px; }
  .apps-hero, .apps-intro, .apps-preview, .project-copy { min-width: 0; }
  .apps-hero h1 { font-size: clamp(28px, 8vw, 42px); }
  .hero-actions { flex-wrap: wrap; }
  .site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  input,select,textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }