:root {
  color-scheme: light;
  --splash-mauve: #b57478;
  --splash-champagne: #e9d4c3;
  --splash-ivory: #efe7e4;
  --splash-logo-shadow: rgba(209, 164, 114, 0.18);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.98) 0%,
    var(--splash-ivory) 28%,
    var(--splash-champagne) 62%,
    var(--splash-mauve) 100%
  );
}

body {
  overflow: hidden;
}

#launch-splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(
    circle at center,
    rgba(255, 239, 231, 0.98) 0%,
    var(--splash-ivory) 28%,
    var(--splash-champagne) 62%,
    var(--splash-mauve) 100%
  );
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms ease-out;
  z-index: 9999;
}

#launch-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.launch-splash__frame {
  width: min(100%, 720px);
  min-height: 220px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateY(-18px);
}

.launch-splash__logo {
  width: 250px;
  height: 150px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px var(--splash-logo-shadow));
}