/* Shared by the first HTML paint and React's loading states. No font download. */
.fw-loading {
  --fw-loading-bg: #f8f5ef;
  --fw-loading-ink: #252a32;
  --fw-loading-muted: #716b60;
  --fw-loading-track: #e5dfd3;
  --fw-loading-accent: #e6b323;
  box-sizing: border-box;
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--fw-loading-bg);
  color: var(--fw-loading-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.dark .fw-loading {
  --fw-loading-bg: #171b21;
  --fw-loading-ink: #f3f1eb;
  --fw-loading-muted: #aba79e;
  --fw-loading-track: #34373b;
  --fw-loading-accent: #f4c542;
}
.fw-loading__content { flex: none; width: min(100%, 360px); margin: auto; padding: 16px 0; }
.fw-loading__name { margin: 0; font-size: clamp(36px, 10vw, 52px); line-height: 1.2; font-weight: 800; letter-spacing: -.065em; white-space: nowrap; }
.fw-loading__wordmark { display: inline-flex; align-items: baseline; }
.fw-loading__letter { display: inline-block; animation: fw-loading-letter-in 640ms cubic-bezier(.16, 1, .3, 1) both; }
.fw-loading__letter:nth-child(2) { animation-delay: 45ms; }
.fw-loading__letter:nth-child(3) { animation-delay: 90ms; }
.fw-loading__letter:nth-child(5) { animation-delay: 135ms; }
.fw-loading__letter:nth-child(6) { animation-delay: 180ms; }
.fw-loading__letter:nth-child(7) { animation-delay: 225ms; }
.fw-loading__letter:nth-child(8) { animation-delay: 270ms; }
.fw-loading__colon { display: inline-block; margin: 0 .045em; color: var(--fw-loading-accent); animation: fw-loading-colon-in 550ms cubic-bezier(.16, 1, .3, 1) 520ms both; }
.fw-loading__colon-glyph { display: inline-block; animation: fw-loading-breathe 2.4s ease-in-out 1.1s infinite; }
.fw-loading__tagline { margin: 19px 0 0; color: var(--fw-loading-muted); font-size: 13px; line-height: 1.8; letter-spacing: -.025em; }
.fw-loading__status { margin: 40px 0 0; color: var(--fw-loading-muted); font-size: 12px; line-height: 1.8; word-break: keep-all; }
.fw-loading__recovery { margin: 22px auto 0; max-width: 290px; color: var(--fw-loading-muted); font-size: 12px; line-height: 1.8; word-break: keep-all; }
.fw-loading__recovery[hidden] { display: none; }
.fw-loading__recovery p { margin: 0; }
.fw-loading__retry { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 0 18px; border: 1px solid var(--fw-loading-track); border-radius: 10px; background: transparent; color: var(--fw-loading-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.fw-loading__retry:hover { background: var(--fw-loading-track); }
.fw-loading__retry:focus-visible { outline: 2px solid var(--fw-loading-accent); outline-offset: 4px; }
@keyframes fw-loading-letter-in {
  from { opacity: 0; transform: translateY(.32em); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes fw-loading-colon-in {
  from { opacity: 0; transform: translateY(.16em) scale(.65); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fw-loading-breathe { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .55; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .fw-loading__letter, .fw-loading__colon, .fw-loading__colon-glyph { animation: none; }
}
