:root {
  color-scheme: dark;
}

html,
body.root-launch {
  min-block-size: 100%;
}

body.root-launch {
  margin: 0;
  min-block-size: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(64, 205, 195, .14), transparent 28%),
    radial-gradient(circle at 52% 50%, rgba(44, 136, 188, .11), transparent 46%),
    #06131d;
  color: #f5fbff;
}

.root-launch-main {
  position: relative;
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  isolation: isolate;
}

.root-launch-main::before,
.root-launch-main::after {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: min(72vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(117, 206, 221, .08);
  border-radius: 50%;
}

.root-launch-main::after {
  inline-size: min(52vw, 480px);
  border-color: rgba(117, 206, 221, .06);
}

.root-launch-brand {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  animation: root-launch-rise 420ms ease-out both;
}

.root-launch-logo-shell {
  inline-size: 92px;
  block-size: 92px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112, 213, 214, .22);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(19, 53, 70, .94), rgba(10, 32, 45, .92));
  box-shadow: 0 22px 68px rgba(0, 0, 0, .28), 0 0 44px rgba(65, 208, 198, .09);
}

.root-launch-logo {
  inline-size: 58px;
  block-size: 58px;
  display: block;
}

.root-launch-title {
  margin: 0;
  font: 850 clamp(2rem, 6vw, 3.35rem) / 1.05 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
}

.root-launch-status {
  margin: -8px 0 0;
  color: rgba(220, 238, 246, .68);
  font: 600 .92rem / 1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.root-launch-progress {
  inline-size: 104px;
  block-size: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(210, 239, 245, .09);
}

.root-launch-progress::after {
  content: "";
  display: block;
  inline-size: 42%;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #42cfc5, #45a7d8);
  animation: root-launch-progress 1.05s ease-in-out infinite;
}

@keyframes root-launch-rise {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes root-launch-progress {
  0% { transform: translateX(-115%); }
  55% { transform: translateX(92%); }
  100% { transform: translateX(245%); }
}

[dir="rtl"] .root-launch-title {
  letter-spacing: 0;
}

@media (max-width: 520px) {
  .root-launch-logo-shell {
    inline-size: 82px;
    block-size: 82px;
    border-radius: 24px;
  }

  .root-launch-logo {
    inline-size: 52px;
    block-size: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .root-launch-brand,
  .root-launch-progress::after {
    animation: none;
  }

  .root-launch-progress::after {
    inline-size: 100%;
    opacity: .7;
  }
}