:root {
  --cb-launch-navy: #031e45;
  --cb-launch-teal: #10ddd2;
  --cb-launch-teal-muted: #087d91;
  --cb-launch-white: #fcfcfd;
}

html.cb-pwa-launch-document,
html.cb-pwa-launch-document body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cb-launch-navy);
}

.cb-launch-screen,
.cb-launch-screen * {
  box-sizing: border-box;
}

.cb-launch-screen {
  position: fixed;
  z-index: 11000;
  inset: 0;
  display: grid;
  min-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100dvh;
  overflow: hidden;
  color: var(--cb-launch-white);
  background: var(--cb-launch-navy);
  isolation: isolate;
}

.cb-launch-screen--handoff {
  display: none;
  /* Contain gestures on the splash itself. Its CSS safety exit must leave the
     page scrollable even if the launch script fails to clear the pending class. */
  touch-action: none;
  overscroll-behavior: none;
}

html.cb-pwa-launch-pending .cb-launch-screen--handoff {
  display: grid;
  animation: cb-launch-safety-exit .38s ease 4s forwards;
}

html.cb-pwa-launch-pending .cb-launch-screen--handoff.is-leaving {
  pointer-events: none;
  animation: cb-launch-exit .38s cubic-bezier(.4, 0, .2, 1) forwards;
}

.cb-launch-background {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
}

.cb-launch-content {
  width: min(100%, 520px);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  padding:
    max(32px, env(safe-area-inset-top))
    22px
    max(28px, env(safe-area-inset-bottom));
  text-align: center;
}

.cb-launch-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(106px, 16.8dvh, 154px);
}

.cb-launch-mascot {
  width: clamp(220px, 65vw, 278px);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 24px rgba(0, 10, 33, .4));
  animation: cb-launch-float 3.2s ease-in-out infinite;
  user-select: none;
}

.cb-launch-title {
  margin: 18px 0 0;
  color: #fff;
  font: 900 clamp(46px, 14.5vw, 60px)/.96 Montserrat, Inter, Arial, sans-serif;
  letter-spacing: -.045em;
  text-shadow:
    0 0 18px rgba(17, 221, 210, .46),
    0 7px 22px rgba(0, 10, 33, .44);
}

.cb-launch-promise {
  margin: 8px 0 0;
  color: var(--cb-launch-teal);
  font: 750 clamp(18px, 5.2vw, 22px)/1.3 Inter, Arial, sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 4px 16px rgba(0, 20, 43, .42);
}

.cb-launch-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: clamp(46px, 6.5dvh, 65px);
}

.cb-launch-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 18px;
}

.cb-launch-dots i {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 50%;
  background: var(--cb-launch-teal-muted);
  box-shadow: 0 0 16px rgba(16, 221, 210, .15);
  animation: cb-launch-dot 1.05s ease-in-out infinite;
}

.cb-launch-dots i:nth-child(2) {
  width: 18px;
  height: 18px;
  background: var(--cb-launch-teal);
  box-shadow: 0 0 20px rgba(16, 221, 210, .54);
  animation-delay: .14s;
}

.cb-launch-dots i:nth-child(3) {
  animation-delay: .28s;
}

.cb-launch-message {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font: 700 clamp(17px, 4.7vw, 20px)/1.4 Inter, Arial, sans-serif;
  letter-spacing: -.015em;
  text-shadow: 0 4px 15px rgba(0, 15, 38, .48);
}

@keyframes cb-launch-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes cb-launch-dot {
  0%, 60%, 100% { opacity: .58; transform: translateY(0) scale(.92); }
  30% { opacity: 1; transform: translateY(-4px) scale(1.08); }
}

@keyframes cb-launch-exit {
  to { opacity: 0; visibility: hidden; transform: scale(1.012); }
}

@keyframes cb-launch-safety-exit {
  to { opacity: 0; visibility: hidden; }
}

@media (max-height: 700px) {
  .cb-launch-hero { margin-top: clamp(72px, 13dvh, 96px); }
  .cb-launch-mascot { width: clamp(180px, 49dvh, 222px); }
  .cb-launch-status { margin-top: clamp(34px, 6dvh, 48px); gap: 16px; }
}

@media (min-width: 700px) {
  .cb-launch-hero { margin-top: clamp(120px, 18dvh, 190px); }
  .cb-launch-status { margin-top: clamp(68px, 8dvh, 92px); }
}

@media (prefers-reduced-motion: reduce) {
  .cb-launch-mascot,
  .cb-launch-dots i {
    animation: none;
  }

  html.cb-pwa-launch-pending .cb-launch-screen--handoff.is-leaving {
    animation-duration: .01ms;
  }
}