/* GENERATED by okaydesign/loader/build.mjs from loader/spec.json (okay loader 1.0.0). */
/* Don't edit this copy: change okaydesign/loader/spec.json, then run npm run build and npm run sync in ~/Strange/okaydesign. */
:root {
  --okl-bg: #f0efea; --okl-ink: #141413; --okl-signal: #ff5a1f;
  --okl-width: 132px;
  --okl-ring-start: 0ms; --okl-ring-dur: 550ms; --okl-ring-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --okl-block-start: 250ms; --okl-block-dur: 450ms; --okl-block-ease: cubic-bezier(0.34, 1.56, 0.64, 1); --okl-block-from: 0.6;
  --okl-dot-start: 600ms; --okl-dot-dur: 350ms; --okl-dot-ease: cubic-bezier(0.34, 1.9, 0.64, 1); --okl-dot-from: 0.01;
  --okl-handover-at: 1300; --okl-fade: 450ms; --okl-content-from: 0.985;
  --okl-reduced-at: 500; --okl-reduced-fade: 250ms;
  --okl-max-wait: 2500ms;
}
@media (prefers-color-scheme: dark) {
  :root { --okl-bg: #141413; --okl-ink: #f0efea; }
}

/* While loading, the page waits underneath. If the script ever fails, it shows anyway after --okl-max-wait. */
html.okay-loading body > :not(.okay-loader) { opacity: 0; animation: okl-reveal 0s var(--okl-max-wait) forwards; }
html.okay-loaded body > :not(.okay-loader) {
  animation: okl-content-in var(--okl-fade) ease forwards;
}
@keyframes okl-reveal { to { opacity: 1; } }
@keyframes okl-content-in { from { opacity: 0; transform: scale(var(--okl-content-from)); } to { opacity: 1; transform: none; } }

.okay-loader {
  position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center;
  background: var(--okl-bg); color: var(--okl-ink); transition: opacity var(--okl-fade) ease;
}
.okay-loader.okl-out { opacity: 0; pointer-events: none; }
.okay-loader svg { width: var(--okl-width); height: auto; overflow: visible; }
.okl-ring { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 125.66; stroke-dashoffset: 125.66; transform: rotate(-90deg); transform-origin: 26px 26px;
  animation: okl-ring var(--okl-ring-dur) var(--okl-ring-ease) var(--okl-ring-start) forwards; }
.okl-block { fill: currentColor; opacity: 0; transform: scale(var(--okl-block-from));
  transform-origin: 82px 26px;
  animation: okl-block var(--okl-block-dur) var(--okl-block-ease) var(--okl-block-start) forwards; }
.okl-dot { fill: var(--okl-signal); transform: scale(var(--okl-dot-from)); transform-origin: 82px 26px;
  animation: okl-dot var(--okl-dot-dur) var(--okl-dot-ease) var(--okl-dot-start) forwards; }
@keyframes okl-ring { to { stroke-dashoffset: 0; } }
@keyframes okl-block { to { opacity: 1; transform: scale(1); } }
@keyframes okl-dot { to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .okl-ring, .okl-block, .okl-dot { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
  .okay-loader { transition-duration: var(--okl-reduced-fade); }
  html.okay-loaded body > :not(.okay-loader) { animation-duration: var(--okl-reduced-fade); }
  .okl-ring { transform: rotate(-90deg); }
}