@import url('/fx-design.css');
.loading-screen[hidden] { display: none; }
.loading-screen {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 24px; color: #e7f5f3; background: radial-gradient(ellipse at 50% 25%, #173b3c 0, #0a171b 40%, #050b0e 100%);
  font-family: system-ui, sans-serif; opacity: 1; transition: opacity .22s ease;
}
.loading-screen.is-ready { opacity: 0; pointer-events: none; }
.loading-screen.soft { transition: none; }
.loading-screen.soft .loading-bar::after { animation: none; width: 100%; }
.loading-screen::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .24; background: repeating-linear-gradient(115deg, transparent 0 75px, #64f4c5 76px, transparent 77px 150px); }
.loading-content { position: relative; width: min(100%, 440px); }
.loading-brand { color: #83ffcc; font-size: 14px; font-weight: 900; letter-spacing: .24em; }
.loading-kicker { margin: 54px 0 10px; color: #83ffcc; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.loading-content h1 { margin: 0; font-size: clamp(32px, 8vw, 56px); line-height: 1; font-style: italic; letter-spacing: -.04em; }
.loading-content p { margin: 16px 0 0; color: #9cb7b4; font-size: 14px; line-height: 1.5; }
.loading-bar { height: 3px; margin-top: 28px; overflow: hidden; background: #284442; }
.loading-bar::after { content: ''; display: block; width: 36%; height: 100%; background: #83ffcc; animation: loading-sweep 1.3s ease-in-out infinite alternate; }
.loading-retry { margin-top: 22px; padding: 12px 18px; border: 1px solid #83ffcc; background: transparent; color: #83ffcc; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .12em; cursor: pointer; }
@keyframes loading-sweep { to { transform: translateX(178%); } }
@media (prefers-reduced-motion: reduce) { .loading-bar::after { animation: none; width: 100%; } }

.loading-screen{background:radial-gradient(ellipse at 50% 25%,#1c2a29,var(--fx-bg) 70%);font-family:var(--fx-mono)}
.loading-brand,.loading-kicker,.loading-retry{color:var(--fx-brand)}
.loading-content h1{font-family:var(--fx-display);font-weight:900}
.loading-bar::after{background:var(--fx-brand)}
.loading-retry{border-color:var(--fx-brand)}