.site-loading {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center;
  gap: 20px; text-align: center; color: #f8e5b3;
  background: radial-gradient(ellipse at 50% 45%, #252047, #100e25 65%);
  font: 600 12px/1.4 system-ui, sans-serif;
}
.site-loading p { margin: 0; letter-spacing: .08em; }
.site-loading-mark { display: grid; place-items: center; width: 160px; height: 160px; position: relative; }
.site-loading-mark img { display: block; width: 136px; height: 136px; border-radius: 50%; }
.site-loading-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #f2d69c33; border-top-color: #ffe2a1; border-right-color: #bdb0fb;
  animation: petverse-loading-turn 1.25s linear infinite;
}
@keyframes petverse-loading-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .site-loading-mark::before { animation: none; }
}