body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffeef2;
    font-family: sans-serif;
}

.card {
    background-color: #ffffff;
    padding: 40px 48px;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(232, 93, 137, 0.15);
    text-align: center;
}

h1 {
    margin: 0 0 28px;
    font-size: 20px;
    color: #e0527e;
}

.label {
    margin: 0;
    font-size: 16px;
    color: #999999;
}

.number {
    margin: 4px 0 0;
    font-size: 72px;
    font-weight: bold;
    color: #e0527e;
}

.unit {
    margin-left: 6px;
    font-size: 24px;
}

.since {
    margin: 20px 0 0;
    font-size: 13px;
    color: #b0a8ab;
}

.sparkle {
    position: fixed;
    font-size: 20px;
    color: #f7a8c4;
    pointer-events: none;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%   { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
    50%  { opacity: 1;   transform: scale(1.3) rotate(180deg); }
    100% { opacity: 0.2; transform: scale(0.7) rotate(360deg); }
}

.s1 { top: 12%; left: 15%; }
.s2 { top: 25%; left: 80%; animation-delay: 0.5s; }
.s3 { top: 55%; left: 8%;  animation-delay: 1s; }
.s4 { top: 70%; left: 88%; animation-delay: 1.5s; font-size: 14px; }
.s5 { top: 85%; left: 30%; animation-delay: 2s; }
.s6 { top: 8%;  left: 55%; animation-delay: 2.5s; font-size: 26px; }