html[data-app-state="booting"] main {
  display: none;
}

html[data-app-state="booting"],
html[data-app-state="booting"] body {
  overflow: hidden;
}

html[data-app-state="ready"] main {
  display: block;
  margin-top: 200vh;
}

html[data-app-state="ready"],
html[data-app-state="ready"] body {
  overflow-x: hidden;
}

html[data-app-state="failed"] main {
  display: block;
  margin-top: 0;
  padding-top: 32px;
  min-height: 100vh;
  background: #f3ecdf;
}

#hero-backup {
  display: none;
}

html[data-app-state="failed"] #hero-backup {
  display: flex;
  position: relative;
  z-index: 2;
  width: min(680px, 92vw);
  margin: 72px auto 24px;
  color: #111;
  gap: 10px;
}

html[data-app-state="failed"] #hero-backup p {
  width: 100%;
  padding: 0;
  text-align: left;
  line-height: 1.6;
}

html[data-app-state="failed"] .webgl {
  display: none;
}

html[data-app-state="failed"] #loading {
  display: none !important;
}

html[data-app-state="booting"] #pill-nav,
html[data-app-state="booting"] #section-nav,
html[data-app-state="booting"] #brand-tag,
html[data-app-state="booting"] #scroll-progress,
html[data-app-state="booting"] #scroll-hint {
  opacity: 0 !important;
  pointer-events: none !important;
}