:root {
  --ink: #101828;
  --muted: #a39f9f;
  --teal: #264653;
  --sky: #67a2b9;
  --card: #FFFFFF;
  --stroke: rgba(16, 24, 40, 0.08);
  --shadow: 0 24px 60px rgba(38, 70, 83, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #FFFFFF;
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.ready-page,
.placeholder-page {
  min-height: 100svh;
  display: grid;
  place-items: start center;
  padding:
    calc(10px + env(safe-area-inset-top))
    12px
    calc(12px + env(safe-area-inset-bottom));
  background: #FFFFFF;
}

.stage {
  position: relative;
  width: min(100%, calc((100svh - 24px) * 0.4612676056), 430px);
  aspect-ratio: 786 / 1704;
  container-type: inline-size;
  animation: stage-enter 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.greeting,
.title,
.dialogue,
.ready-button {
  position: absolute;
  margin: 0;
  text-align: center;
}

.greeting {
  left: 26.59%;
  top: 15.55%;
  width: 48%;
  color: var(--ink);
  font-size: 5.2cqw;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.greeting-name {
  color: var(--sky);
  font-style: italic;
}

.title {
  left: 5.6%;
  top: 20.66%;
  width: 89.06%;
  color: var(--ink);
  font-size: 4.08cqw;
  font-weight: 400;
  line-height: 1.25;
}

.ty-wrap {
  position: absolute;
  left: -4.58%;
  top: 29.81%;
  width: 107.36%;
  aspect-ratio: 843.891 / 431.284;
  transform: rotate(1.26deg);
}

.ty-art {
  display: block;
  width: 100%;
  height: 100%;
}

.eye-track,
.mouth-track {
  position: absolute;
}

.eye-track {
  width: 5.68%;
  height: 10.98%;
  animation: eye-drift 2.75s ease-in-out infinite;
}

.eye-track-left {
  left: 36.86%;
  top: 36.96%;
}

.eye-track-right {
  left: 53.54%;
  top: 36.96%;
}

.eye-shape {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--teal);
  transform-origin: center center;
  animation: eye-blink 4.1s linear infinite;
}

.eye-highlight {
  position: absolute;
  top: 18%;
  right: 16%;
  width: 30%;
  height: 30%;
  border-radius: 999px;
  background: #FFFFFF;
}

.mouth-track {
  left: 46.35%;
  top: 53.69%;
  width: 3.93%;
  height: 7.59%;
  animation: mouth-bob 1.2s ease-in-out infinite;
}

.mouth-shape {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--teal);
  transform-origin: center 42%;
  animation: mouth-talk 0.9s ease-in-out infinite;
}

.mouth-highlight {
  position: absolute;
  top: 16%;
  right: 20%;
  width: 32%;
  height: 32%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
}

.dialogue {
  left: 8.9%;
  top: 60.45%;
  width: 82.19%;
  color: var(--muted);
  font-size: 4.84cqw;
  font-weight: 600;
  line-height: 1.32;
}

.ready-button {
  left: 6.49%;
  top: 83.16%;
  width: 89.06%;
  min-height: 6.34%;
  display: grid;
  place-items: center;
  padding: 3.4cqw 4cqw;
  border-radius: max(16px, 3.2cqw);
  border: 0;
  background: var(--teal);
  color: #ffffff;
  font-family: "Open Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 4.58cqw;
  font-weight: 600;
  line-height: 1.15;
  box-shadow: var(--shadow);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.ready-button:hover,
.ready-button:focus-visible {
  background: #1e3a44;
  box-shadow: 0 28px 64px rgba(38, 70, 83, 0.2);
  outline: none;
  transform: translateY(-2px);
}

.ready-button:active {
  transform: translateY(0);
}

.placeholder-card {
  width: min(100%, 640px);
  padding: 32px;
  border: 1px solid var(--stroke);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: var(--shadow);
}

.placeholder-kicker {
  margin: 0 0 12px;
  color: var(--sky);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.placeholder-card h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.05;
}

.placeholder-card p {
  margin: 0 0 20px;
  color: rgba(16, 24, 40, 0.72);
  font-size: 18px;
  line-height: 1.55;
}

.placeholder-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 24, 40, 0.2);
  padding: 14px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 600;
}

@keyframes stage-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes eye-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(7%, -4%);
  }

  66% {
    transform: translate(-7%, -2%);
  }
}

@keyframes eye-blink {
  0%,
  21%,
  24%,
  52%,
  55%,
  100% {
    transform: scaleY(1);
  }

  22%,
  53% {
    transform: scaleY(0.12);
  }
}

@keyframes mouth-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(-6%);
  }

  68% {
    transform: translateY(5%);
  }
}

@keyframes mouth-talk {
  0%,
  100% {
    transform: scaleX(0.9) scaleY(0.5);
  }

  18% {
    transform: scaleX(1.15) scaleY(1.2);
  }

  36% {
    transform: scaleX(0.82) scaleY(0.38);
  }

  56% {
    transform: scaleX(1.05) scaleY(1.45);
  }

  78% {
    transform: scaleX(0.94) scaleY(0.7);
  }
}

@media (max-width: 420px) {
  .ready-page,
  .placeholder-page {
    padding: 10px;
  }

  .stage {
    width: min(100%, calc((100svh - 20px) * 0.4612676056));
  }

  .placeholder-card {
    padding: 24px;
    border-radius: 24px;
  }

  .placeholder-card p {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .ready-page,
  .placeholder-page {
    padding:
      calc(10px + env(safe-area-inset-top))
      12px
      calc(12px + env(safe-area-inset-bottom));
  }

  .stage {
    width: min(100%, calc((100svh - 24px) * 0.5), 430px);
  }

  .greeting {
    font-size: clamp(16px, 4.8cqw, 22px);
  }

  .title {
    font-size: clamp(14px, 4.2cqw, 20px);
  }

  .dialogue {
    font-size: clamp(15px, 4.5cqw, 21px);
    line-height: 1.28;
  }

  .ready-button {
    min-height: 50px;
    font-size: clamp(17px, 4.4cqw, 22px);
    border-radius: max(14px, 3cqw);
  }
}

@media (max-width: 767px) and (max-height: 760px) {
  .stage {
    width: min(100%, calc((100svh - 16px) * 0.5), 410px);
  }

  .dialogue {
    top: 59.35%;
  }

  .ready-button {
    top: 81.7%;
  }
}