body.welcome-active { overflow: hidden; }
.welcome-screen {
  --welcome-bg: #041512;
  --welcome-ink: #eaf7ef;
  --welcome-muted: #93b7a6;
  --welcome-mint: #76dfb7;
  --welcome-cyan: #29c8ee;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  background: radial-gradient(ellipse at 50% 52%, #17624e30, transparent 58%), var(--welcome-bg);
  color: var(--welcome-ink);
  font-family: var(--font-heading, "Instagram Sans Headline", sans-serif);
  outline: 0;
  opacity: 1;
  transition: opacity 160ms ease;
}
.welcome-screen.is-leaving { opacity: 0; }
.welcome-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .27;
  background-image: linear-gradient(#6ba98c14 1px, transparent 1px), linear-gradient(90deg, #6ba98c14 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 68%);
}
.welcome-core { text-align: center; width: min(100%, 540px); animation: welcome-arrive 600ms ease both; }
.welcome-kicker { color: var(--welcome-muted); font-size: 10px; letter-spacing: 4px; line-height: 1.5; margin: 0 0 24px; }
.welcome-brand { display: block; width: min(100%, 410px); height: auto; margin: 0 auto; }
.welcome-message { font-size: clamp(14px, 1.7vw, 18px); line-height: 1.6; margin: 24px 0 30px; color: var(--welcome-muted); }
.welcome-progress { width: min(220px, 60%); height: 2px; margin: auto; background: #6bac8d26; overflow: visible; border-radius: 2px; }
.welcome-progress span { display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, var(--welcome-mint), var(--welcome-cyan)); box-shadow: 0 0 12px #36cfe855; animation: welcome-load var(--welcome-duration, 4000ms) linear both; }
.welcome-powered { position: absolute; bottom: 26px; left: 20px; right: 20px; text-align: center; font-size: 9px; line-height: 1.7; letter-spacing: .4px; margin: 0; color: var(--welcome-muted); }
.welcome-powered strong { font-weight: 400; color: var(--welcome-ink); }
[data-theme="light"] .welcome-screen { --welcome-bg: #f4f7f3; --welcome-ink: #17392e; --welcome-muted: #4f7563; --welcome-mint: #08795b; --welcome-cyan: #147baf; background: radial-gradient(ellipse at 50% 52%, #b9ddc34d, transparent 58%), var(--welcome-bg); }
[data-theme="light"] .welcome-grid { opacity: .5; }
.welcome-screen--refresh { background: radial-gradient(ellipse at 50% 52%, #1c637a24, transparent 45%), var(--welcome-bg); }
.welcome-screen--refresh .welcome-core { width: min(100%, 460px); animation-duration: 350ms; }
.welcome-screen--refresh .welcome-grid { background-image: radial-gradient(#65a5ae45 .8px, transparent .8px); background-size: 23px 23px; opacity: .34; mask-image: radial-gradient(ellipse at center, #000, transparent 58%); }
.welcome-screen--refresh .welcome-kicker { font-size: 14px; letter-spacing: .6px; color: var(--welcome-cyan); margin-bottom: 23px; }
.welcome-screen--refresh .welcome-brand { width: min(100%, 310px); }
.welcome-screen--refresh .welcome-message { font-size: 14px; margin-top: 22px; margin-bottom: 18px; }
.welcome-screen--refresh .welcome-progress { width: min(150px, 45%); }
.refresh-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 22px; }
.refresh-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--welcome-cyan); opacity: .45; animation: refresh-breathe 900ms ease-in-out infinite alternate; }
.refresh-dots i:nth-child(2) { background: var(--welcome-mint); animation-delay: 140ms; }
.refresh-dots i:nth-child(3) { animation-delay: 280ms; }
[data-theme="light"] .welcome-screen--refresh { background: radial-gradient(ellipse at 50% 52%, #c8e7ed50, transparent 45%), var(--welcome-bg); }
@keyframes welcome-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes welcome-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes refresh-breathe { to { opacity: 1; transform: translateY(-2px); } }
@media(max-width: 600px) { .welcome-brand { width: min(100%, 300px); } .welcome-kicker { font-size: 8px; margin-bottom: 20px; letter-spacing: 3px; } .welcome-message { font-size: 13px; margin-top: 20px; } .welcome-powered { bottom: 20px; font-size: 8px; } }
@media(prefers-reduced-motion: reduce) { .welcome-screen { transition: none; } .welcome-screen.is-leaving { opacity: 1; } .welcome-core, .welcome-progress span, .refresh-dots i { animation: none; } }