html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ey {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}

.ey__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.ey__row:focus-visible {
  outline: 3px solid #2f6df6;
  outline-offset: 8px;
  border-radius: 16px;
}

.ey__face {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: clamp(88px, 23vw, 112px);
  height: clamp(72px, 19vw, 92px);
  padding: 12px;
}

.ey__face--cat {
  background: #fff7e6;
  border-radius: 50%;
  border: 3px solid #17141a;
}

.ey__face--bot {
  background: #2f6df6;
  border-radius: 16px;
  border: 3px solid #17141a;
}

.ey__ear {
  position: absolute;
  top: -14px;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 18px solid #17141a;
}

.ey__ear--l {
  left: 14%;
  transform: rotate(-16deg);
  transform-origin: 50% 100%;
}

.ey__ear--r {
  right: 14%;
  transform: rotate(16deg);
  transform-origin: 50% 100%;
}

.ey__ant {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 8px;
  height: 16px;
  margin-left: -4px;
  background: #17141a;
  border-radius: 999px;
}

.ey__eye {
  position: relative;
  overflow: hidden;
  width: clamp(26px, 7vw, 34px);
  height: clamp(26px, 7vw, 34px);
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid #17141a;
}

.ey__eye--wide {
  border-radius: 8px;
}

.ey__pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  background: #17141a;
  border-radius: 50%;
}

.ey__pupil--bar {
  width: 30%;
  margin-left: -15%;
  border-radius: 4px;
}

.ey__lid {
  position: absolute;
  inset: 0;
  background: #fff7e6;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.ey__face--bot .ey__lid {
  background: #2f6df6;
}

.ey__mouth {
  position: absolute;
  bottom: 16%;
  left: 50%;
  width: 18px;
  height: 8px;
  margin-left: -9px;
  border-bottom: 3px solid #17141a;
  border-radius: 0 0 999px 999px;
}

.ey__grill {
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 36px;
  height: 6px;
  margin-left: -18px;
  background: repeating-linear-gradient(90deg, #17141a 0 4px, transparent 4px 8px);
}

.ey__hint {
  margin: 0;
  color: #17141a;
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
}

.ey.is-demo .ey__pupil,
.ey.is-demo .ey__lid {
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

.ey.is-demo .ey__face--cat .ey__pupil {
  animation-name: eyLookCat;
}

.ey.is-demo .ey__face--bot .ey__pupil {
  animation-name: eyLookBot;
}

.ey.is-demo .ey__lid {
  animation-name: eyBlink;
  animation-timing-function: steps(1, end);
}

@keyframes eyLookCat {
  0%, 6% {
    transform: translate(-3px, 3px);
  }
  46%, 60% {
    transform: translate(7.5px, -2px);
  }
  94%, 100% {
    transform: translate(-3px, 3px);
  }
}
@keyframes eyLookBot {
  0%, 4% {
    transform: translate(-6.5px, 2.6px);
  }
  22%, 72% {
    transform: translate(6.5px, -1px);
  }
  96%, 100% {
    transform: translate(-6.5px, 2.6px);
  }
}
@keyframes eyBlink {
  0%, 50% {
    transform: scaleY(0);
  }
  54% {
    transform: scaleY(1);
  }
  58%, 100% {
    transform: scaleY(0);
  }
}
@media (max-width: 340px) {
  .ey {
    gap: 12px;
  }
  .ey__row {
    gap: 16px;
  }
  .ey__face {
    padding: 8px;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ey.is-demo .ey__pupil,
  .ey.is-demo .ey__lid {
    animation: none !important;
  }
  .ey.is-demo .ey__pupil {
    transform: translate(0, 0) !important;
  }
  .ey.is-demo .ey__lid {
    transform: scaleY(0) !important;
  }
}