/* Keep the learning flow usable with touch, zoom and narrow screens. */
.top { gap: 12px; flex-wrap: wrap; }
.top > div:last-child { display: flex; align-items: center; gap: 8px; }
.top a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px; }
.card, .who, .who > div, .skill { min-width: 0; }
.who { flex: 1 1 260px; width: 100%; }
.who > div:last-child { flex: 1; }
.avatar { flex: 0 0 56px; width: 56px; height: 56px; }
.xpbar { width: 100%; max-width: 430px; }
#hello, .world h3, .question, .lessonText { overflow-wrap: anywhere; }
.btn, .answer { min-height: 48px; font-size: 16px; line-height: 1.4; touch-action: manipulation; }
.answer { white-space: normal; }
.skills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skill b, .skill span { display: block; }
.worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.philosophy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mission { scroll-margin-block: 16px; }
@media (max-width: 900px) {
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); margin: 22px auto; }
  .top { padding: 10px 16px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.08; }
  .hero p { font-size: 1rem; line-height: 1.55; }
  .card { padding: 18px; }
  .worlds { grid-template-columns: 1fr; }
  .philosophy { grid-template-columns: 1fr; gap: 8px; }
  .mini { padding: 12px 16px; }
  .actions { gap: 10px; }
  .actions .btn { flex: 1 1 140px; text-align: center; }
  .actions .btn:first-child { flex-basis: 100%; }
  .login .btn { width: 100%; }
  .who { gap: 10px; }
  .question { font-size: 1.2rem; }
  .lessonText { line-height: 1.65; }
}
@media (max-width: 360px) {
  .avatar { flex-basis: 44px; width: 44px; height: 44px; font-size: 28px; }
  .profile { padding: 14px; }
}