* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-block-size: 100%;
  background: #020a0f;
}

body {
  color: #fff;
}

.coming-soon-stage {
  position: relative;
  isolation: isolate;
  min-block-size: 100vh;
  min-block-size: 100svh;
  block-size: 100dvh;
  overflow: hidden;
  overflow: clip;
  background: #020a0f;
}

.coming-soon-preview,
.coming-soon-preview > img,
.coming-soon-media,
.coming-soon-media > img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.coming-soon-preview,
.coming-soon-media {
  z-index: 0;
}

.coming-soon-preview > img,
.coming-soon-media > img {
  object-fit: cover;
  object-position: 52% 48%;
}

.coming-soon-preview > img {
  filter: blur(12px);
  transform: scale(1.03);
}

.coming-soon-backdrop {
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.coming-soon-backdrop.is-loaded {
  opacity: 1;
}

.coming-soon-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(2 9 14 / 92%) 0, rgb(2 9 14 / 46%) 28%, transparent 56%),
    linear-gradient(110deg, rgb(2 9 14 / 58%) 0, transparent 38%);
}

.coming-soon-brand,
.coming-soon-login {
  position: absolute;
  z-index: 2;
}

.coming-soon-brand {
  inset-block-start: max(1rem, env(safe-area-inset-top));
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  margin: 0;
  color: #e7f4fb;
  font-family: "Segoe UI", sans-serif;
  font-size: clamp(3rem, 3.6vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.075em;
  text-shadow: 0 0 22px rgb(142 207 241 / 18%);
}

.coming-soon-login {
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  max-inline-size: 45.5rem;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgb(2 9 14 / 95%);
  box-shadow: 0 0 40px rgb(0 0 0 / 28%);
}

.coming-soon-login input,
.coming-soon-login button {
  block-size: 2.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  transition: border-color 150ms, background-color 150ms, box-shadow 150ms;
}

.coming-soon-login input {
  min-inline-size: 0;
  flex: 1;
  border: 1px solid #5c8ca5;
  border-radius: 0;
  padding: 0 1rem;
  background: rgb(2 9 14 / 88%);
  color: #eaf7ff;
  font-size: 1rem;
  letter-spacing: 0.16em;
  outline: none;
}

.coming-soon-login input:focus {
  border-color: #bde9ff;
  box-shadow: 0 0 0 1px #bde9ff;
}

.coming-soon-login button {
  flex-shrink: 0;
  border: 1px solid #8bc8e9;
  border-radius: 0;
  padding: 0 1.75rem;
  background: #8bc8e9;
  color: #06131b;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.coming-soon-login button:hover {
  border-color: #b7e5ff;
  background: #b7e5ff;
}

.coming-soon-login button:focus-visible {
  outline: 2px solid #d9f3ff;
  outline-offset: 2px;
}

.coming-soon-error {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 1rem;
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgb(2 9 14 / 95%);
  color: #fecaca;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
}

.coming-soon-noscript {
  position: absolute;
  z-index: 3;
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 6.75rem);
  margin: 0;
  border: 1px solid #8bc8e9;
  padding: 0.75rem 1rem;
  background: #02090e;
  color: #eaf7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

@media (min-width: 640px) {
  .coming-soon-login {
    inset-inline-start: auto;
    inline-size: min(78%, 45.5rem);
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 2.5rem 1rem 1.25rem;
  }

  .coming-soon-login button {
    min-inline-size: 13.6rem;
  }

  .coming-soon-error {
    inset-inline-start: 1.25rem;
  }
}

@media (min-aspect-ratio: 17/20) {
  .coming-soon-preview > img,
  .coming-soon-media > img {
    object-position: 54% 52%;
  }
}

@media (min-aspect-ratio: 9/4) {
  .coming-soon-preview > img,
  .coming-soon-media > img {
    object-position: 56% 52%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon-backdrop,
  .coming-soon-login input,
  .coming-soon-login button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .coming-soon-login,
  .coming-soon-noscript {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .coming-soon-login input {
    border: 2px solid ButtonText;
    background: Field;
    color: FieldText;
  }

  .coming-soon-login button {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .coming-soon-login input:focus,
  .coming-soon-login button:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .coming-soon-error {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}