.ours-space-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font: 600 1rem/1.5 system-ui, sans-serif;
  color: #244638;
}
.ours-space-loading[hidden] { display: none; }
.ours-space-loading::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  border: 2px solid #bbd0c7;
  border-top-color: #346a53;
  border-radius: 50%;
  animation: ours-space-spin .9s linear infinite;
}
.ours-space-loading[data-error]::before { display: none; }
.ours-space-loading.surface {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  padding: 1rem;
  flex-wrap: wrap;
  align-content: center;
  background: #f4f7f4;
}
@keyframes ours-space-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .ours-space-loading::before { animation: none; }
}

/* App and scene splash. The service supplies its own local image and colors. */
.ours-app-splash {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 0;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  overflow: auto;
  text-align: center;
  background: var(--ours-splash-background, #f4f7f4);
  color: var(--ours-splash-color, #244638);
  font: 600 1rem/1.5 system-ui, sans-serif;
}
.ours-app-splash[hidden] { display: none; }
.ours-app-splash.surface { position: absolute; flex-wrap: nowrap; }
.ours-app-splash__image {
  display: block;
  flex: 0 1 auto;
  width: min(44vw, 192px);
  max-height: 36vh;
  height: auto;
  object-fit: contain;
  border-radius: 24%;
}
.ours-app-splash .ours-space-loading { margin: 0; color: inherit; }
.ours-app-splash.ours-space-loading::before { order: 1; flex-shrink: 0; }
.ours-app-splash.ours-space-loading > span { order: 2; }
.ours-app-splash > a, .ours-app-splash > button { order: 3; }
.ours-app-splash > a, .ours-app-splash > button {
  box-sizing: border-box;
  min-height: 44px;
  padding: .65rem 1.2rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Compatibility for existing branded scene and app entry markup. */
.ours-space-loading.branded {
  box-sizing: border-box;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1.25rem;
  text-align: center;
  background: var(--ours-splash-background, #fff7f2);
}
.ours-space-loading.branded::before { order: 1; flex: 0 0 auto; }
.ours-space-loading__image {
  display: block;
  order: 0;
  width: min(44vw, 192px);
  height: auto;
  max-height: 36vh;
  object-fit: contain;
  border-radius: 24%;
}
.ours-space-loading.branded > :not(.ours-space-loading__image) { order: 2; max-width: 32rem; margin: 0; }
.ours-space-loading.branded > [hidden] { display: none; }
.ours-space-loading.branded > button, .ours-space-loading.branded > a {
  min-height: 44px;
  padding: .65rem 1.2rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ours-space-loading.splash {
  position: fixed;
  z-index: 100;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: auto;
}