#app-splash {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: #f4f7f5;
  background: #050608;
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.app-splash__lockup {
  display: flex;
  align-items: center;
  gap: 11px;
  transform: translateX(61px);
  animation: appSplashLockupSettle 500ms cubic-bezier(.2, .78, .25, 1) 260ms forwards;
}

.app-splash__mark {
  width: 54px;
  height: 54px;
  flex: none;
  opacity: 0;
  transform: scale(.78) rotate(-7deg);
  animation: appSplashMarkIn 430ms cubic-bezier(.2, .8, .25, 1) 70ms forwards;
}

.app-splash__word {
  overflow: hidden;
  color: #f4f7f5;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-7px);
  animation: appSplashWordReveal 460ms cubic-bezier(.2, .72, .23, 1) 260ms forwards;
}

.app-splash__accent { color: #4edea3; }

#app-splash.app-splash--hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes appSplashMarkIn {
  65% { opacity: 1; transform: scale(1.06) rotate(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes appSplashLockupSettle {
  to { transform: translateX(0); }
}

@keyframes appSplashWordReveal {
  to { opacity: 1; clip-path: inset(0); transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  #app-splash { transition: none; }
  .app-splash__lockup { animation: none; transform: none; }
  .app-splash__mark,
  .app-splash__word {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}