@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; width: min(620px, calc(100% - 36px)); gap: 12px; padding-top: 4px; }
  .hero-copy { padding: 12px 0 150px; text-align: center; }
  .eyebrow { justify-content: center; }
  .hero-copy h1 { font-size: clamp(3.2rem, 12vw, 5.4rem); }
  .net-illustration { left: 50%; bottom: -8px; transform: translateX(-50%) rotate(-3deg) scale(.78); }

  .problem-topbar { grid-template-columns: 1fr auto; height: auto; min-height: 66px; padding: 9px 16px; }
  .problem-meta { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding-bottom: 4px; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
  .topbar-left { grid-column: 1; grid-row: 1; }
  .problem-layout { width: min(720px, calc(100% - 30px)); grid-template-columns: 1fr; gap: 16px; padding-top: 18px; }
  .question-heading { min-height: 0; margin-bottom: 13px; }
  .stage-card { height: min(52vh, 470px); min-height: 330px; }
  .answer-column { padding-top: 0; }
  .teacher-panel { width: calc(100% - 30px); }
}

@media (max-width: 600px) {
  .home-header { min-height: 58px; width: calc(100% - 28px); }
  .home-grid { width: calc(100% - 28px); padding-bottom: 34px; }
  .hero-copy { padding-bottom: 126px; }
  .hero-copy h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .subtitle { margin-top: 14px; }
  .home-lead { font-size: .9rem; line-height: 1.75; }
  .net-illustration { transform: translateX(-50%) rotate(-3deg) scale(.65); bottom: -18px; }
  .start-card { padding: 21px 17px; border-radius: 21px; }
  .difficulty-options { gap: 5px; }
  .difficulty-button span { font-size: .72rem; }

  .brand-mini { display: none; }
  .text-icon-button { width: 40px; padding: 0; font-size: 0; }
  .text-icon-button span { font-size: 1rem; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button, .text-icon-button { width: 38px; height: 38px; min-height: 38px; }
  .problem-layout { width: calc(100% - 20px); padding-top: 13px; }
  .question-heading h2 { font-size: 1.25rem; }
  .question-kicker { font-size: .77rem; }
  .stage-card { height: min(44vh, 390px); min-height: 285px; border-radius: 18px; }
  .stage-hint { bottom: 9px; font-size: .68rem; }
  .answer-card, .feedback-card { padding: 16px; border-radius: 17px; }
  .answer-options { gap: 7px; }
  .answer-option { min-height: 58px; font-size: .86rem; }
  .answer-options.face-options { grid-template-columns: repeat(3, 1fr); }
  .animation-tools { grid-template-columns: 1fr 1fr; }
  .speed-control { grid-column: 1 / -1; justify-content: flex-end; }
  .question-nav { position: sticky; bottom: 8px; z-index: 4; padding: 8px; margin: 10px -4px -6px; border-radius: 16px; background: rgba(246,249,253,.9); backdrop-filter: blur(10px); }
  .question-nav button { padding: 0 9px; font-size: .78rem; }
  .teacher-panel { width: calc(100% - 20px); gap: 10px; }

  .result-card { padding: 28px 18px; border-radius: 23px; }
  .result-actions { grid-template-columns: 1fr; }
  .score-ring { width: 132px; height: 132px; }
}

@media (max-height: 650px) and (min-width: 901px) {
  .problem-layout { padding-top: 16px; }
  .question-heading { min-height: 72px; }
  .stage-card { height: 410px; min-height: 300px; }
  .answer-column { padding-top: 74px; }
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 600px) {
  .problem-topbar { grid-template-columns: 1fr auto 1fr; min-height: 54px; padding: 6px 12px; }
  .problem-meta { grid-column: 2; grid-row: 1; padding: 0; }
  .topbar-actions { grid-column: 3; }
  .problem-layout { width: calc(100% - 24px); grid-template-columns: 1.25fr .85fr; gap: 14px; padding-top: 10px; }
  .question-heading { margin-bottom: 6px; }
  .question-heading h2 { font-size: 1.08rem; margin-top: 3px; }
  .stage-card { height: calc(100vh - 145px); min-height: 280px; }
  .answer-column { padding-top: 55px; }
  .answer-card { padding: 13px; }
  .answer-option { min-height: 48px; }
  .fold-button { min-height: 48px; }
  .feedback-card { padding: 11px; }
}