/* Shared by the pre-JavaScript entry shell and React loading states. */
.oioi-loading {
  --oioi-loading-width: 192px;
  --oioi-loading-height: 108px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  color: inherit;
  font: inherit;
  text-align: center;
}
.oioi-loading--compact {
  --oioi-loading-width: 160px;
  --oioi-loading-height: 90px;
  gap: 8px;
}
.oioi-loading__art {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--oioi-loading-width);
  height: var(--oioi-loading-height);
  pointer-events: none;
}
.oioi-loading__art picture,
.oioi-loading__art img {
  display: block;
  width: 100%;
  height: 100%;
}
.oioi-loading__art picture { visibility: hidden; }
.oioi-loading__art img { object-fit: contain; }
.oioi-loading__art[data-ready="true"] picture { visibility: visible; }
.oioi-loading__fallback {
  position: absolute;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 2px solid #e2e8f0;
  border-top-color: #475569;
  border-radius: 50%;
  animation: oioi-loading-spin .7s linear infinite;
}
.oioi-loading__art[data-ready="true"] .oioi-loading__fallback { display: none; }
.oioi-loading__label { line-height: 1.5; }
@keyframes oioi-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .oioi-loading__fallback { animation: none; }
}