@media (max-width: 600px) {
  html, body, .world { height: 100%; min-height: 0; overflow: hidden; }
  header { height: 44px; padding: 3px 9px; }
  main { height: calc(100dvh - 44px); min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 4px 8px calc(5px + env(safe-area-inset-bottom)); overflow: hidden; }
  .journal { flex: none; width: min(calc(100vw - 16px), calc(100dvh - 245px)); padding: 4px; border-width: 5px; }
  .journal-head { margin: 0 0 2px; }
  .instruction { min-height: 0; margin-top: 2px; font-size: 10px; }
  aside { width: min(100%, 620px); max-width: none; display: flex; flex-direction: column; gap: 5px; }
  .brand, .record, .settings { display: none; }
  .words-card { padding: 5px 7px; border-width: 3px; box-shadow: none; }
  .words-card h2 { margin: 0 0 2px; font-size: 14px; }
  #word-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .word { padding: 3px; font-size: 10px; }
  .tools { margin: 0; gap: 5px; }
  .tools button { min-height: 44px; padding: 4px; }
  .overlay { align-items: start; }
  .overlay .card { margin: auto; max-height: calc(100dvh - 16px); overflow-y: auto; }
}