@media (max-width: 740px) {
  .app-shell { display: block; }
  .app-shell > .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, calc(100vw - 36px));
    max-width: 320px;
    height: calc(100dvh / 1.25); /* base stylesheet applies html { zoom: 1.25 } */
    padding: 64px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
    z-index: 31;
  }
  .app-shell > .sidebar.mobile-nav-open { transform: translateX(0); }
  .sidebar .brand { font-size: 26px; padding: 0 7px 16px; }
  .sidebar .workspace-selector { display: flex; }
  .sidebar .nav-caption { display: block; margin-top: 18px; }
  .sidebar nav { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 10px 0 0; }
  .sidebar nav a { font-size: 12px; padding: 12px; gap: 10px; white-space: normal; }
  .sidebar nav a svg { width: 18px; flex-shrink: 0; }
  .sidebar .sidebar-bottom { display: block; margin-top: 18px; padding-top: 18px; }
  .sidebar .profile { min-width: 0; }
  .sidebar .profile > div { min-width: 0; }
  .sidebar .profile strong, .sidebar .profile small { overflow-wrap: anywhere; }
  .main-shell { margin: 0; width: 100%; min-width: 0; }
  .topbar { padding: 0 15px 0 62px; gap: 8px; }
  .breadcrumb { min-width: 0; gap: 5px; white-space: nowrap; overflow: hidden; }
  .breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { flex-shrink: 0; gap: 7px; }
  .topbar-right .avatar { cursor: pointer; flex-shrink: 0; }
  .topbar-right .avatar:focus-visible { outline: 3px solid #8dbb55; outline-offset: 2px; }
  .environment { white-space: nowrap; }
  #sandbox-mobile-nav-toggle {
    position: fixed;
    top: 9px;
    left: 12px;
    z-index: 35;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #12211d;
    color: white;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px #12211d33;
  }
  #sandbox-mobile-nav-toggle[hidden] { display: none !important; }
  #sandbox-mobile-nav-toggle:focus-visible { outline: 3px solid #c6f177; outline-offset: 2px; }
  #sandbox-mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: #0009;
  }
  #sandbox-mobile-nav-backdrop.mobile-nav-open { display: block; }
  @media (prefers-reduced-motion: reduce) { .app-shell > .sidebar { transition: none; } }
}
@media (min-width: 741px) {
  #sandbox-mobile-nav-toggle, #sandbox-mobile-nav-backdrop { display: none !important; }
  .app-shell > .sidebar.mobile-nav-open { transform: none; }
}