:root { --ap-transition-bg: #f5f1ec; }
[data-theme="dark"] { --ap-transition-bg: #171a20; }
html { background: var(--ap-transition-bg); }
.ap-page-loader {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--purple, #7456a6) 13%, var(--surface, #fff)) 0 18%,
    color-mix(in srgb, var(--pink, #c36789) 9%, var(--page-bg, var(--paper, #f5f1ec))) 42%,
    color-mix(in srgb, var(--blue, #537da8) 7%, var(--page-bg, var(--paper, #f5f1ec))) 72%,
    color-mix(in srgb, var(--page-bg, var(--paper, #f5f1ec)) 94%, transparent) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: circle(0 at 50% 50%);
  backdrop-filter: blur(0);
  transition: clip-path 580ms cubic-bezier(.22,.8,.24,1), opacity 200ms ease,
    backdrop-filter 580ms ease, visibility 0s linear 580ms;
}
html.ap-is-navigating { overflow: hidden; }
.ap-page-loader.is-visible,
html.ap-transition-arrival .ap-page-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  clip-path: circle(150vmax at 50% 50%);
  backdrop-filter: blur(9px);
  transition: clip-path 580ms cubic-bezier(.22,.8,.24,1), opacity 200ms ease,
    backdrop-filter 580ms ease;
}
.ap-page-loader.is-shrinking {
  clip-path: circle(0 at 50% 50%);
  backdrop-filter: blur(0);
  pointer-events: none;
}
.ap-loader-spinner {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: conic-gradient(
    var(--pink, #c36789) 0 20%, var(--yellow, #c49b3c) 20% 40%,
    var(--purple, #7456a6) 40% 60%, var(--blue, #537da8) 60% 80%,
    var(--red, #b95559) 80% 100%);
  animation: ap-loader-spin .85s linear infinite;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--purple, #7456a6) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--surface, #fff) 65%, transparent);
  scale: .72;
  opacity: 0;
  transition: scale 300ms cubic-bezier(.2,.8,.2,1) 70ms, opacity 200ms ease 60ms;
}
.ap-loader-spinner::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: var(--surface-raised, var(--surface, #fff));
}
.ap-page-loader.is-visible .ap-loader-spinner { scale: 1; opacity: 1; }
html.ap-transition-arrival .ap-loader-spinner { scale: 1; opacity: 1; }
.ap-page-loader.is-shrinking .ap-loader-spinner {
  scale: .62;
  opacity: 0;
  transition-delay: 0s;
}
@keyframes ap-loader-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .ap-page-loader { transition-duration: 120ms; }
  .ap-loader-spinner { animation: ap-loader-pulse 1.1s ease-in-out infinite alternate; }
  @keyframes ap-loader-pulse { to { scale: .9; opacity: .72; } }
}
@media (max-width: 700px) {
  .ap-page-loader {
    clip-path: none !important;
    backdrop-filter: none !important;
    background: radial-gradient(circle at center,
      color-mix(in srgb,var(--purple, #7456a6) 12%,var(--ap-transition-bg)) 0 16%,
      color-mix(in srgb,var(--pink, #c36789) 7%,var(--ap-transition-bg)) 42%,
      var(--ap-transition-bg) 78%);
    transition: opacity 260ms ease, visibility 0s linear 260ms;
  }
  .ap-page-loader.is-visible,
  html.ap-transition-arrival .ap-page-loader {
    clip-path: none !important;
    opacity: 1;
    transition: opacity 260ms ease;
  }
  .ap-page-loader.is-shrinking { opacity: 0; }
  .ap-loader-spinner { width: 58px; height: 58px; }
}