/* Small non-blocking status above the page content. */
.site-loading {
  position: fixed;
  z-index: 2000;
  top: calc(env(safe-area-inset-top, 0px) + 82px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 14px;
  width: min(320px, calc(100vw - 32px));
  padding: 11px 15px 10px;
  border: 1px solid rgba(106, 207, 231, .36);
  border-radius: 8px;
  background: rgba(4, 19, 33, .89);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22), inset 0 0 12px rgba(78, 193, 219, .035);
  color: #d5edf3;
  font-family: inherit;
  pointer-events: none;
  backdrop-filter: blur(12px);
}
.site-loading[hidden], .site-loading-bar[hidden] { display: none !important; }
.site-loading-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; letter-spacing: .04em; }
.site-loading-percent { color: #83d7e9; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 500; }
.site-loading-bar { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(137, 211, 230, .14); }
.site-loading-fill { display: block; height: 100%; width: 0; background: #79d3e7; box-shadow: 0 0 6px rgba(110, 213, 235, .4); transition: width .12s linear; }
.site-loading.is-error { border-color: rgba(239, 178, 139, .6); }
.site-loading.is-error .site-loading-label, .site-loading.is-error .site-loading-percent { color: #f1c0a3; }
img.loading-error { outline: 1px solid rgba(239, 178, 139, .65); outline-offset: -1px; opacity: .5; }
@media (max-width: 600px) {
  .site-loading { top: calc(env(safe-area-inset-top, 0px) + 73px); width: min(290px, calc(100vw - 32px)); padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loading, .site-loading * { animation: none !important; transition: none !important; }
}