@media (max-width: 1180px) {
  .lab-topbar,
  .lab-hero,
  .lab-workbench {
    grid-template-columns: 1fr;
  }

  .lab-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero-panel,
  .scope-panel {
    min-height: auto;
  }

  .sidebar-panel {
    position: relative;
    top: auto;
  }

  .summary-grid,
  #performance-overlay,
  .live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: 100%;
    max-width: 100vw;
    padding: var(--space-2);
  }

  .lab-topbar {
    position: relative;
    top: 0;
    border-radius: var(--radius-md);
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }

  .topbar-actions,
  .hero-actions,
  .signal-row,
  .grid-header,
  .footer-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .button,
  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .summary-grid,
  #performance-overlay,
  .live-grid,
  #telemetry-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel,
  .scope-panel,
  .live-card,
  .summary-card,
  .telemetry-card,
  .overlay-card,
  .sidebar-panel,
  .grid-panel,
  #live-terminal {
    border-radius: var(--radius-md);
    width: 100%;
    max-width: calc(100vw - 1rem);
  }

  .hero-description,
  .section-copy,
  .live-detail,
  .card-description,
  .scope-copy,
  .sidebar-description,
  .footer-description {
    overflow-wrap: anywhere;
    width: min(100%, 320px);
    max-width: 320px;
  }

  .live-pair {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .hero-title,
  .hero-actions,
  .signal-row {
    max-width: 330px;
  }

  .card-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .scope-visual {
    width: min(100%, 300px);
    max-width: calc(100vw - 3rem);
  }

  .hero-title {
    font-size: clamp(2.8rem, 15vw, 4.4rem);
  }
}