html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 600px) {
  main {
    padding: max(18px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  header .brand { min-width: 0; }
  header .outline { flex-shrink: 0; font-size: .875rem; }
  h1 { font-size: 1.375rem; }
  .brand p { font-size: .8125rem; }

  .profiles {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 5;
    margin: 20px 0;
    box-shadow: 0 3px 12px #153d500d;
  }
  .profiles button { min-width: 0; min-height: 48px; padding: 9px 12px; }
  .profiles button > span:last-child { overflow-wrap: anywhere; }
  .avatar { flex-shrink: 0; }

  .intro { gap: 10px; padding-bottom: 14px; }
  .intro > div:first-child { min-width: 0; }
  .eyebrow { font-size: .8125rem; margin-bottom: 7px; }
  .intro h2 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 7px; }
  #sourceStatus { font-size: .8125rem; overflow-wrap: anywhere; }
  .progress { min-width: 64px; flex-shrink: 0; }
  .progress strong { font-size: 1.375rem; }

  .tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 56px;
    gap: 8px;
    margin: 6px 0 16px;
  }
  .search { min-width: 0; padding: 0 9px; gap: 6px; }
  .search input { height: 48px; font-size: 1rem; }
  .speed { font-size: .8125rem; }
  .speed select { min-height: 48px; padding: 8px 0; font-size: 1rem; }
  .tools > .outline { min-height: 48px; padding: 8px; font-size: .875rem; margin: 0; }
  .list-top { font-size: .875rem; margin-bottom: 10px; }
  .list-top label { min-height: 44px; }

  .table-head, .row {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr) 48px;
    gap: 10px;
    padding: 12px;
  }
  .table-head { font-size: .8125rem; }
  .table-head > span:last-child { text-align: center; }
  .row { min-height: 96px; }
  .chinese { font-size: 1rem; line-height: 1.65; }
  .japanese { font-size: 1.125rem; line-height: 1.7; line-break: strict; }
  .speaker { width: 48px; height: 48px; min-height: 48px; }
  .learn { min-height: 44px; margin-top: 0; font-size: .8125rem; }
  .learn input { width: 17px; height: 17px; }
  footer { line-height: 1.7; font-size: .8125rem; }

  dialog {
    width: calc(100% - 24px);
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
    padding: 20px;
    overscroll-behavior: contain;
  }
  fieldset { min-width: 0; }
  fieldset input { font-size: 1rem; }
  .dialog-head h2 { font-size: 1.25rem; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .dialog-actions button { min-height: 48px; }
  #configError textarea { width: 100%; font-size: 1rem; }
}

@media (max-width: 370px) {
  .tools { grid-template-columns: minmax(0, 1fr) 56px; }
  .search { grid-column: 1 / -1; }
  .intro { align-items: flex-start; }
  .intro h2 { font-size: 1.125rem; }
}