.bottom-nav { display: none; }
.account-link { color: #eaf3ff; white-space: nowrap; }
#connection { margin: 0 0 .65rem; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.cloud-panel { max-width: 42rem; }
.cloud-panel label { min-width: 0; }
.diagram-viewport { touch-action: pan-x pan-y; }
@media(max-width:900px) {
  body { padding-bottom: calc(4.15rem + env(safe-area-inset-bottom)); }
  .topbar { padding-top: max(.55rem,env(safe-area-inset-top)); }
  .topbar, main { padding-left: max(1rem,env(safe-area-inset-left)); padding-right: max(1rem,env(safe-area-inset-right)); }
  .bottom-nav { position: fixed; z-index: 5; inset: auto 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 0; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 1px solid var(--line); background: var(--panel); color: var(--text); }
  .bottom-nav a { min-height: 3.9rem; display: grid; place-content: center; justify-items: center; gap: .15rem;
    padding: .3rem .1rem; text-align: center; font-size: .8rem; }
  .bottom-nav a[aria-current=page] { color: var(--link); background: var(--soft); }
  .topbar input { font-size: 16px; }
  .cloud-panel input, .cloud-panel select { font-size: 16px; }
  .diagram-toolbar button, .diagram-toolbar select { min-height: 44px; }
  #view .lesson-article { padding: .8rem; }
}
@media(max-width:390px) {
  .account-link { font-size: .8rem; }
  .topbar .brand strong { font-size: .9rem; }
  .topbar .brand { gap: .35rem; }
}