:root {
  --ink: #4a3b35;
  --ink-soft: #8f7a6e;
  --coral: #ff8a7a;
  --coral-deep: #e8685a;
  --yellow: #ffc94d;
  --pink: #ffdbe2;
  --mint: #cdf2dc;
  --sky: #d7eaff;
  --cream: #fff8ee;
  --round: "Yuanti SC", "YouYuan", "幼圆", "PingFang SC", "Microsoft YaHei", sans-serif;
  --shadow: 0 10px 30px rgba(180, 120, 90, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; overflow-x: hidden; }

body {
  font-family: var(--round);
  color: var(--ink);
  min-height: 100vh;
  background-color: var(--cream);
  background-image: radial-gradient(#f2e2cf 1.3px, transparent 1.3px);
  background-size: 24px 24px;
}

#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.glow {
  position: fixed;
  border-radius: 50%;
  z-index: 0;
  opacity: .7;
  filter: blur(40px);
  animation: drift 16s ease-in-out infinite alternate;
}
.glow-a { width: 360px; height: 360px; background: var(--pink); top: -140px; left: -120px; }
.glow-b { width: 420px; height: 420px; background: #fff0c2; bottom: -200px; right: -140px; animation-delay: -8s; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.08); } }

.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 72px 20px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--coral-deep);
  padding: 8px 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
}

.cute-title {
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--pink);
}

.subtitle {
  color: var(--ink-soft);
  letter-spacing: 2px;
}

.mascot {
  font-size: 52px;
  line-height: 1;
  animation: hop 2.4s ease-in-out infinite;
}
@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-12px) rotate(-6deg); }
  60% { transform: translateY(-12px) rotate(6deg); }
}

.home-link {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 20;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.home-link:hover { transform: translateY(-2px); }

.rise { animation: rise .7s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: none; }
}