@media (max-width: 390px), (max-height: 650px) {
  .menu-screen { padding: 22px 24px 18px; }
  .brand-orbit { width: 42px; height: 42px; margin-bottom: 7px; }
  .brand-orbit span { inset: 13px; }
  .brand-orbit b { left: 15px; }
  h1 { font-size: 68px; }
  .tagline { margin: 13px 0 15px; font-size: 10px; }
  .primary-button, .secondary-button { min-height: 48px; }
  .record-grid { margin-top: 9px; }
  .record-grid > div { padding: 7px; }
  .text-button { padding: 8px 4px; }
  .control-hint { display: none; }
  .panel { padding: 21px 19px 18px; }
  .panel h2 { margin-bottom: 13px; font-size: 36px; }
  .tutorial-list { margin: 12px 0; }
  .tutorial-list li { padding: 6px 0; font-size: 10px; }
  .hero-result strong { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}