:root {
  color-scheme: light;
  font-family:
    Inter, ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  color: #3f2945;
  background: #fff8fb;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 16% 18%, rgb(255 206 231 / 65%), transparent 26%),
    radial-gradient(circle at 86% 80%, rgb(220 210 255 / 70%), transparent 28%),
    linear-gradient(145deg, #fffafc 0%, #fff3f9 45%, #f8f4ff 100%);
}

.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px 20px;
}

.hero {
  position: relative;
  width: min(680px, 100%);
  padding: 72px 44px 62px;
  overflow: hidden;
  text-align: center;
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 42px;
  box-shadow:
    0 28px 70px rgb(119 79 117 / 13%),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(20px);
}

.mascot {
  position: relative;
  width: 118px;
  height: 104px;
  margin: 0 auto 28px;
}

.face {
  position: absolute;
  inset: 14px 8px 0;
  z-index: 2;
  display: block;
  background: #ffd3e4;
  border: 3px solid #613b5f;
  border-radius: 48% 48% 46% 46%;
  box-shadow: inset 0 -10px 0 rgb(255 255 255 / 24%);
}

.ear {
  position: absolute;
  top: 2px;
  z-index: 1;
  width: 42px;
  height: 48px;
  background: #ffd3e4;
  border: 3px solid #613b5f;
  border-radius: 70% 24% 50% 36%;
}

.ear-left {
  left: 10px;
  transform: rotate(-25deg);
}

.ear-right {
  right: 10px;
  transform: scaleX(-1) rotate(-25deg);
}

.eye {
  position: absolute;
  top: 45px;
  width: 8px;
  height: 11px;
  background: #563652;
  border-radius: 50%;
}

.eye-left {
  left: 27px;
}

.eye-right {
  right: 27px;
}

.mouth {
  position: absolute;
  top: 52px;
  left: 50%;
  font-size: 18px;
  transform: translateX(-50%);
}

.eyebrow {
  margin: 0 0 12px;
  color: #a85f8e;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.24em;
}

h1 {
  margin: 0;
  color: #4c2f4b;
  font-size: clamp(3.4rem, 12vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
}

.intro {
  max-width: 480px;
  margin: 26px auto 0;
  color: #70536f;
  font-size: clamp(1rem, 3vw, 1.18rem);
  line-height: 1.8;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 11px 18px;
  color: #684760;
  font-size: 0.92rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid #f1d9e8;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgb(109 68 103 / 9%);
}

.status-dot {
  width: 9px;
  height: 9px;
  background: #70c99e;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(112 201 158 / 16%);
}

.sparkle {
  position: absolute;
  color: #d69fc5;
  font-size: 2rem;
  animation: float 4s ease-in-out infinite;
}

.sparkle-one {
  top: 54px;
  left: 12%;
}

.sparkle-two {
  right: 14%;
  bottom: 58px;
  animation-delay: -2s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-10px) rotate(8deg);
  }
}

@media (max-width: 560px) {
  .hero {
    padding: 58px 24px 48px;
    border-radius: 30px;
  }

  .sparkle-one {
    left: 8%;
  }

  .sparkle-two {
    right: 8%;
  }
}

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