@media (max-width: 900px) {
  .app {
    --ri: 0px;
    --r2: 0px;
  }
  .top {
    gap: 6px;
    padding: 6px 8px 6px 10px;
  }
  .brand span {
    display: none;
  }
  .pname {
    width: 120px;
  }
  .seg button {
    padding: 6px 10px;
  }
  .ibtn span.lbl {
    display: none;
  }
  .stage[data-view='split'] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .stage[data-view='split'] .p3d {
    border-left: 0;
    border-top: 1px solid var(--edge);
  }
  .tools {
    top: auto;
    bottom: 16px;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    width: auto;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    padding: 6px;
  }
  .tool {
    flex: 0 0 auto;
    min-width: 58px;
  }
  .side {
    top: auto;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: 92px;
    width: auto;
    height: 42%;
  }
  .hint {
    left: 14px;
    top: 76px;
  }
  .p2d .chips,
  .p3d .chips,
  .stage[data-view='3d'] .p3d .chips {
    left: 14px;
    right: 14px;
    bottom: 92px;
  }
  .rmgal {
    left: 14px;
    right: 14px;
    width: auto;
    bottom: 150px;
  }
  .rooms,
  .stage[data-view='3d'] .rooms {
    left: 14px;
    right: 14px;
    top: 76px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}