@media (max-width: 1000px) {
  .home-layout { grid-template-columns: 1fr; width: min(680px, calc(100% - 36px)); gap: 16px; padding-top: 0; }
  .home-hero { min-height: 310px; padding: 45px 0 30px 280px; display: flex; flex-direction: column; justify-content: center; }
  .lab-mark { left: -10px; top: 20px; transform: scale(.82); transform-origin: left center; }
  .home-hero h1 { font-size: clamp(3.2rem, 9vw, 4.8rem); }

  .lab-layout { width: min(780px, calc(100% - 30px)); grid-template-columns: 1fr; padding-top: 18px; }
  .control-column { padding-top: 0; grid-template-columns: 1fr 1fr; align-items: start; }
  .observation-card { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .home-topbar { width: calc(100% - 28px); min-height: 60px; }
  .home-layout { width: calc(100% - 28px); }
  .home-hero { min-height: 0; padding: 205px 0 18px; text-align: center; }
  .lab-mark { left: 50%; top: -12px; transform: translateX(-50%) scale(.68); transform-origin: center; }
  .home-hero h1 { font-size: clamp(2.9rem, 14vw, 4.1rem); }
  .home-copy { font-size: .86rem; }
  .mode-panel { padding: 20px 15px; border-radius: 20px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 83px; }

  .lab-topbar { grid-template-columns: 1fr auto; min-height: 62px; gap: 6px; padding: 7px 10px; }
  .experiment-meta { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding-bottom: 3px; }
  .topbar-left { grid-column: 1; grid-row: 1; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
  .mini-brand { font-size: .8rem; }
  .lab-layout { width: calc(100% - 18px); padding-top: 12px; gap: 10px; }
  .experiment-heading { min-height: 0; align-items: flex-start; flex-direction: column; margin-bottom: 10px; }
  .experiment-heading h2 { font-size: 1.25rem; }
  .view-switch { align-self: stretch; }
  .view-switch button { flex: 1; }
  .visual-grid { grid-template-columns: 1fr; }
  .particle-card { display: none; }
  .visual-grid[data-view="both"] .particle-card { display: block; }
  .visual-grid[data-view="particles"] { grid-template-columns: minmax(0, 1fr); }
  .visual-grid[data-view="particles"] .particle-card { display: block; }
  .visual-grid[data-view="particles"] .real-card { display: none; }
  .particle-card canvas { max-height: 360px; object-fit: contain; }
  .canvas-card { border-radius: 17px; }
  .graph-card summary span { display: none; }
  .control-column { grid-template-columns: 1fr; gap: 9px; }
  .observation-card { grid-column: auto; }
  .question-topbar { width: calc(100% - 20px); min-height: 62px; grid-template-columns: auto 1fr auto; }
  .question-meta { justify-content: center; gap: 7px; }
  .question-meta strong { font-size: .75rem; }
  .question-progress-track { width: calc(100% - 20px); }
  .question-layout { width: calc(100% - 20px); padding: 24px 0 50px; }
  .question-card { padding: 24px 18px; border-radius: 21px; }
  .question-scene { width: 66px; height: 66px; margin-bottom: 15px; border-radius: 19px; font-size: 2.1rem; }
  .answer-option { min-height: 54px; }
  .classify-bins { grid-template-columns: 1fr; }
  .result-card { padding: 34px 22px; border-radius: 23px; }
  .teacher-tool-grid { grid-template-columns: 1fr 1fr; }
}

@media (orientation: landscape) and (max-width: 1000px) and (max-height: 650px) {
  .lab-topbar { min-height: 54px; position: static; }
  .lab-layout { width: calc(100% - 20px); grid-template-columns: 1.3fr .8fr; gap: 10px; padding-top: 8px; }
  .experiment-heading { min-height: 53px; margin-bottom: 6px; }
  .experiment-heading h2 { font-size: 1.05rem; }
  .visual-grid { grid-template-columns: 1fr; }
  .visual-grid[data-view="both"] .particle-card { display: none; }
  .control-column { padding-top: 59px; grid-template-columns: 1fr; gap: 6px; }
  .control-card, .observation-card { padding: 11px; }
  .prediction-question { margin: 8px 0 6px; }
  .prediction-option { min-height: 35px; }
  .graph-card { display: none; }
  .canvas-card canvas { max-height: calc(100vh - 145px); object-fit: contain; }
}

@media (max-width: 360px) {
  .temperature-badge { display: none; }
  .mode-panel { padding: 16px 12px; }
  .mini-brand { display: none; }
  .lab-topbar { padding-inline: 6px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .teacher-button { padding: 0 8px; }
  .question-meta strong { display: none; }
  .result-actions { grid-template-columns: 1fr; }
}