:root {
  --announcement-height: clamp(70px, 8svh, 92px);
  --announcement-type-size: clamp(1.25rem, 0.95rem + 1vw, 2rem);
  color: #0A2540;
  background: #FFFFFF;
  font-family:
    "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #FFFFFF;
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: #FFFFFF;
  font-family:
    "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.announcement {
  display: flex;
  height: var(--announcement-height);
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.1vw, 1.2rem) max(20px, env(safe-area-inset-left));
  background: #0A2540;
  color: #FFFFFF;
  font-family:
    "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.announcement__inner {
  display: inline-flex;
  position: relative;
  max-width: 100%;
  min-height: 1.4em;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.announcement__type,
.announcement__screen-reader {
  font-family:
    "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--announcement-type-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.announcement__screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.announcement__cursor {
  position: absolute;
  top: 50%;
  left: calc(100% + 7px);
  width: 2px;
  height: 1.15em;
  border-radius: 999px;
  background: currentColor;
  font-size: var(--announcement-type-size);
  transform: translateY(-47%);
  animation: cursor-blink 0.9s steps(1) infinite;
}

.launch {
  display: flex;
  min-height: calc(100svh - var(--announcement-height));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.4svh, 30px) clamp(18px, 4vw, 64px) clamp(22px, 3.6svh, 44px);
  background: #FFFFFF;
}

.launch__visual {
  display: flex;
  width: min(92vw, 1500px);
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.launch__visual img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(54svh, 680px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.launch__domain {
  margin: clamp(14px, 2.6svh, 28px) 0 0;
  color: #0A2540;
  font-size: clamp(1.35rem, 3.3vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(0.12em, 0.65vw, 0.28em);
  text-align: center;
}

@keyframes cursor-blink {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 540px) {
  :root {
    --announcement-height: 70px;
    --announcement-type-size: clamp(1.18rem, 5.2vw, 1.42rem);
  }

  .announcement {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .announcement__type,
  .announcement__screen-reader {
    letter-spacing: 0.015em;
  }

  .launch {
    min-height: 0;
    justify-content: flex-start;
    padding: clamp(20px, 5svh, 36px) 10px 30px;
  }

  .launch__visual {
    width: 100%;
  }

  .launch__visual img {
    width: 100%;
    max-width: 1500px;
    max-height: none;
  }

  .launch__domain {
    max-width: 100%;
    min-width: 0;
    margin-top: clamp(14px, 3.5svh, 22px);
    font-size: clamp(1.04rem, 5.6vw, 1.48rem);
    letter-spacing: clamp(0.06em, 1.1vw, 0.11em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement__cursor {
    display: none;
    animation: none;
  }
}