:root {
  color-scheme: light;
  --ink: #493b55;
  --purple: #8058a8;
  --pink: #f4a6a8;
  --peach: #fff4e8;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); }
.scene {
  min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden;
  padding: 36px 20px 62px;
  background: radial-gradient(ellipse at 50% 44%, #fffdf6 0 10%, transparent 50%), linear-gradient(145deg, #fff5e9, #fde9ed 55%, #f4eaff);
}
.hello-card {
  position: relative; z-index: 1; width: min(100%, 450px); min-height: 480px; padding: 42px 28px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 2px solid rgba(255,255,255,.92); border-radius: 30px;
  background: rgba(255,255,255,.72); box-shadow: 0 22px 70px rgba(117,76,124,.12), inset 0 0 0 1px rgba(239,207,213,.36);
  backdrop-filter: blur(8px); animation: card-in .8s cubic-bezier(.2,.8,.2,1) both;
}
.eyebrow { margin: 0 0 26px; color: #aa8299; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.tiny-heart { display: inline-block; margin-right: 5px; color: #e98d9b; font-size: 12px; }
.smiley-wrap { position: relative; width: 144px; height: 144px; display: grid; place-items: center; margin-bottom: 21px; animation: bob 2.4s ease-in-out infinite; }
.smiley { width: 112px; height: 112px; overflow: visible; fill: #111; filter: drop-shadow(0 5px 0 rgba(0,0,0,.1)); image-rendering: pixelated; }
.outline { fill: #111; }
.face-fill { fill: #fff; }
.feature { fill: #111; }
.closed-eyes { opacity: 0; transform-origin: center; }
.smiley-wrap.blink .open-eyes { opacity: 0; }
h1 { margin: 0; color: #5c476a; font-size: clamp(34px, 10vw, 48px); letter-spacing: -.055em; font-weight: 800; line-height: 1.08; }
h1 span:first-child { color: var(--purple); }
.period { color: #ee9a9b; }
.note { margin: 17px 0 0; color: #9a849b; font-size: 15px; font-weight: 600; }
.note span { color: #edb94e; margin-left: 3px; }
.bottom-doodle { display: flex; align-items: center; gap: 12px; margin-top: 27px; color: #e5a0aa; font-size: 13px; }
.doodle-line { width: 48px; height: 1px; background: #efd6d8; }
.footer { position: absolute; bottom: 23px; margin: 0; color: #af97ac; font-size: 9px; font-weight: 800; letter-spacing: .19em; }
.sparkle { position: absolute; color: #e5aa69; opacity: .76; animation: twinkle 2.6s ease-in-out infinite; }
.sparkle-one { top: 20%; left: calc(50% - 260px); font-size: 25px; }.sparkle-two { top: 29%; right: calc(50% - 255px); color: #dd8eaa; font-size: 30px; animation-delay: .7s; }.sparkle-three { bottom: 22%; left: calc(50% - 220px); color: #aa8dcc; font-size: 20px; animation-delay: 1.2s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes blink { 0%, 44%, 48%, 100% { opacity: 0; } 45%, 47% { opacity: 1; } }
@keyframes twinkle { 0%, 100% { transform: scale(.8) rotate(0); opacity: .45; } 50% { transform: scale(1.15) rotate(12deg); opacity: 1; } }
@keyframes card-in { from { opacity: 0; transform: translateY(15px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.smiley-wrap.blink .closed-eyes { animation: blink .22s steps(1) both; }
@media (max-width: 520px) {
  .scene { padding: 20px 18px 54px; }
  .hello-card { min-height: 430px; padding: 32px 18px 25px; border-radius: 25px; }
  .eyebrow { font-size: 9px; }
  .note { max-width: 250px; font-size: 14px; line-height: 1.5; }
  .sparkle-one { left: 8%; top: 15%; }.sparkle-two { right: 8%; top: 24%; }.sparkle-three { left: 11%; bottom: 16%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}