/* One loading appearance for page boot, data, and embedded content. */
.nf-loading-surface {
  display: grid; place-items: center; min-width: 0;
  background: var(--nf-paper, #fdfdfc); color: #888884;
  opacity: 1; visibility: visible;
  transition: opacity 160ms cubic-bezier(.23,1,.32,1), visibility 0s;
}
.nf-loading-surface[data-state="ready"] {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms cubic-bezier(.23,1,.32,1), visibility 0s 160ms;
}
.nf-loading-surface[data-state="ready"] .nf-loading-indicator,
.nf-loading-surface[data-state="ready"] .nf-loading-indicator > span { animation: none; }
.nf-loading-indicator {
  display: grid; grid-template-columns: repeat(3,4px); gap: 4px; width: 20px; height: 20px;
  opacity: 0; animation: nf-loading-show 1ms 200ms forwards;
}
.nf-loading-indicator > span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .15; animation: nf-loading-pulse 1.4s ease-in-out infinite; }
.nf-loading-indicator > span:nth-child(2) { animation-delay: .4s; animation-duration: 1.1s; }
.nf-loading-indicator > span:nth-child(3) { animation-delay: .2s; animation-duration: 1.6s; }
.nf-loading-indicator > span:nth-child(4) { animation-delay: .6s; animation-duration: 1.3s; }
.nf-loading-indicator > span:nth-child(5) { animation-delay: .1s; animation-duration: 1.8s; }
.nf-loading-indicator > span:nth-child(6) { animation-delay: .8s; animation-duration: 1s; }
.nf-loading-indicator > span:nth-child(7) { animation-delay: .3s; animation-duration: 1.5s; }
.nf-loading-indicator > span:nth-child(8) { animation-delay: .7s; animation-duration: 1.2s; }
.nf-loading-indicator > span:nth-child(9) { animation-delay: .5s; animation-duration: 1.7s; }
@keyframes nf-loading-show { to { opacity: 1; } }
@keyframes nf-loading-pulse { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
.nf-loading-page { position: fixed; inset: 0; z-index: 999; }
.nf-loading-boot { min-height: 100svh; }
.nf-loading-reader-boot { min-height: calc(100svh - 60px); margin-top: 60px; }
.nf-loading-cover { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.nf-loading-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: #72726e; font: 14px/1.6 system-ui,sans-serif; }
.nf-loading-error > span { flex-basis: 100%; text-align: center; }
.nf-loading-error button, .nf-loading-error a { border: 1px solid #deded8; border-radius: 999px; background: transparent; color: inherit; padding: 8px 14px; font: inherit; text-decoration: none; cursor: pointer; }
.nf-loading-error button:focus-visible, .nf-loading-error a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (hover:hover) and (pointer:fine) { .nf-loading-error button:hover, .nf-loading-error a:hover { background: #f0f0eb; } }
.nf-loading-content { animation: nf-loading-content-in 160ms cubic-bezier(.23,1,.32,1); }
@keyframes nf-loading-content-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion:reduce) {
  .nf-loading-indicator > span { animation-name: nf-loading-pulse-gentle; }
}
@keyframes nf-loading-pulse-gentle { 0%,100% { opacity: .35; } 50% { opacity: .7; } }