@font-face {
  font-family: Manrope;
  src: url('/manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  background: #0c0c0d;
  color: #f8e9ef;
  font-family: Manrope, sans-serif;
}
body { margin: 0; overflow: hidden; }
main, .entrance { position: fixed; inset: 0; }
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 340ms ease-out;
}
video.is-playing { opacity: 1; }
.entrance { display: grid; place-items: center; }
.entrance[hidden] { display: none; }
.entrance.is-leaving { pointer-events: none; }
.launch { position: relative; }
#open {
  min-width: 144px;
  min-height: 52px;
  padding: 10px 26px;
  border: 1px solid #b57b90;
  border-radius: 999px;
  background: #1c1519;
  color: inherit;
  font: 680 17px/1 Manrope, sans-serif;
  cursor: pointer;
  animation: pulse 3.1s ease-in-out infinite;
}
#open:hover { background: #291c23; }
#open:focus-visible { outline: 2px solid #f9c7d9; outline-offset: 5px; }
.entrance.is-leaving #open {
  animation: depart 280ms ease-out both;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 12px #f0a9c329; }
  50% { box-shadow: 0 0 25px #f0a9c353; }
}
@keyframes depart {
  to { opacity: 0; transform: scale(.92); }
}
.sparks { pointer-events: none; position: absolute; inset: 0; }
.spark {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 10px #f1a7c4;
  background: #ffe4ee;
}
.status {
  position: absolute;
  top: calc(50% + 42px);
  margin: 0;
  font-size: 14px;
  color: #edb8cd;
}
@media (prefers-reduced-motion: reduce) {
  #open, .entrance.is-leaving #open { animation: none; }
  .entrance.is-leaving #open { opacity: 0; }
  video { transition: none; }
}