@media (max-width: 950px) {
  body {
    padding-bottom: 0;
  }

  .bottom-nav {
    display: none !important;
  }

  .dot-menu-button {
    position: relative;
    z-index: 61;
    flex: 0 0 auto;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .quick-mode-menu {
    z-index: 60;
    pointer-events: auto;
  }

  .quick-mode-menu button {
    pointer-events: auto;
    touch-action: manipulation;
  }

  .transport {
    bottom: 0;
  }

  .transport .btn,
  .landscape-settings-btn,
  .input-method,
  .task-card,
  .drag-handle,
  .piano-key,
  .grid-cell {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    touch-action: manipulation;
  }

  canvas,
  .making-mascot,
  .readouts {
    pointer-events: none;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  :root {
    --land-nav-w: 0px;
  }

  body {
    padding-left: 0;
  }

  .app {
    width: 100vw;
  }

  .desktop-grid {
    grid-template-columns: 190px minmax(0, 1fr);
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .quick-mode-menu {
    top: calc(max(7px, env(safe-area-inset-top)) + 46px);
    right: max(10px, env(safe-area-inset-right));
  }

  .trainer {
    isolation: isolate;
  }

  .visual {
    z-index: 0;
  }

  .task-info,
  .route,
  .transport {
    position: relative;
    z-index: 2;
  }

  .transport {
    bottom: auto;
  }

  .controls {
    z-index: 40;
    right: max(12px, env(safe-area-inset-right));
  }

  .landscape-settings-btn {
    z-index: 41;
    right: max(12px, env(safe-area-inset-right));
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  .desktop-grid {
    grid-template-columns: 148px minmax(0, 1fr);
  }
}