/* Standalone website shell: the scene fills the browser, while HUD sizes stay readable. */
html, html > body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  min-height: 100%;
  background: #f2f2ef;
}
body #office-playground {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  border-radius: 0;
}
body #office-playground .office-footer {
  flex: 0 0 auto;
  margin-top: auto;
}
@media (min-width: 651px) {
  body #office-playground {
    height: 100vh;
    height: 100dvh;
    min-height: 720px;
  }
  body #office-playground .office-layout {
    flex: 1 1 auto;
    min-height: 0;
  }
  body #office-playground .office-stage {
    height: 100%;
    min-height: 0;
  }
  body #office-playground .office-sidebar,
  body #office-playground .building-operations {
    max-height: calc(100% - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 650px) {
  body #office-playground {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}