.studio-loading {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px;
  overflow: hidden;
  background: #101014;
}
.studio-loading__status { display: grid; place-items: center; }
.studio-loading__mark { display: block; width: 216px; height: 216px; overflow: visible; }
.studio-loading__halo {
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
  opacity: .7;
  animation: studio-logo-halo var(--halo-duration) ease-in-out var(--halo-delay) infinite;
}
.studio-loading__halo--1 { --halo-duration: 3.8s; --halo-delay: -.4s; --halo-small-x: .95; --halo-small-y: .96; --halo-large-x: 1.1; --halo-large-y: 1.06; --halo-start: -5deg; --halo-end: 4deg; }
.studio-loading__halo--2 { --halo-duration: 4.6s; --halo-delay: -1.8s; --halo-small-x: .94; --halo-small-y: .96; --halo-large-x: 1.06; --halo-large-y: 1.1; --halo-start: 8deg; --halo-end: -5deg; stroke-width: .8px; }
.studio-loading__halo--3 { --halo-duration: 5.2s; --halo-delay: -3.1s; --halo-small-x: .91; --halo-small-y: .95; --halo-large-x: 1.07; --halo-large-y: 1.03; --halo-start: -7deg; --halo-end: 6deg; stroke-width: .9px; }
.studio-loading__halo--4 { --halo-duration: 4.2s; --halo-delay: -2.2s; --halo-small-x: .96; --halo-small-y: .92; --halo-large-x: 1.06; --halo-large-y: 1.05; --halo-start: 5deg; --halo-end: -6deg; stroke-width: .7px; }
.studio-loading__part { transform-origin: 64px 64px; animation-duration: 2.8s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-iteration-count: infinite; }
.studio-loading__part--gold { animation-name: studio-logo-gold; }
.studio-loading__part--coral { animation-name: studio-logo-coral; }
.studio-loading__part--violet { animation-name: studio-logo-violet; }
.studio-loading__part--cyan { animation-name: studio-logo-cyan; }

/* The intact mark holds at the end of every cycle; no forced load delay. */
@keyframes studio-logo-gold {
  0%, 12%, 55%, 100% { transform: translate(0, 0); }
  24%, 34% { transform: translate(4px, -10px); }
}
@keyframes studio-logo-coral {
  0%, 18%, 61%, 100% { transform: translate(0, 0); }
  30%, 40% { transform: translate(-10px, 4px); }
}
@keyframes studio-logo-violet {
  0%, 24%, 67%, 100% { transform: translate(0, 0); }
  36%, 46% { transform: translate(0, -6px); }
}
@keyframes studio-logo-cyan {
  0%, 30%, 73%, 100% { transform: translate(0, 0); }
  42%, 52% { transform: translate(10px, 4px); }
}
@keyframes studio-logo-halo {
  0%, 100% { transform: rotate(var(--halo-start)) scale(var(--halo-small-x), var(--halo-small-y)); opacity: .45; }
  50% { transform: rotate(var(--halo-end)) scale(var(--halo-large-x), var(--halo-large-y)); opacity: .95; }
}
:root[data-studio-theme="light"] .studio-loading { background: #f5f6fa; }
:root[data-studio-theme="light"] .studio-loading__halo { stroke: #767b9959; }
@media (max-width: 480px), (max-height: 420px) { .studio-loading__mark { width: 184px; height: 184px; } }
@media (prefers-reduced-motion: reduce) { .studio-loading__part, .studio-loading__halo { animation: none; } }