:root {
    --sky-1: #fff4fb;
    --sky-2: #eaf8ff;
    --sky-3: #f2edff;
    --sky-4: #eafff5;
}

body {
    margin: 0;
    min-height: 100vh;
    color: #302a45;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 180, 218, .60), transparent 20%),
        radial-gradient(circle at 92% 10%, rgba(155, 224, 255, .62), transparent 22%),
        radial-gradient(circle at 82% 82%, rgba(190, 171, 255, .48), transparent 25%),
        radial-gradient(circle at 18% 82%, rgba(155, 255, 211, .44), transparent 24%),
        linear-gradient(135deg, var(--sky-1), var(--sky-2) 35%, var(--sky-3) 68%, var(--sky-4));
    background-attachment: fixed;
    overflow-x: hidden;
}

.cute-world {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.world-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: .58;
    animation: worldFloat 9s ease-in-out infinite;
}

.blob-a { width: 230px; height: 150px; left: -50px; top: 18%; background: #ffb7dc; transform: rotate(18deg); }
.blob-b { width: 260px; height: 180px; right: -80px; top: 38%; background: #9bdcff; animation-delay: -2s; }
.blob-c { width: 190px; height: 190px; left: 42%; bottom: -70px; background: #bdaaff; animation-delay: -5s; }
.blob-d { width: 170px; height: 120px; left: 72%; bottom: 8%; background: #a9f5d0; animation-delay: -7s; }

.cloud {
    position: absolute;
    width: 105px;
    height: 36px;
    border-radius: 40px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 8px 25px rgba(94,72,125,.10);
    animation: cloudDrift 24s linear infinite;
}
.cloud::before, .cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}
.cloud::before { width: 48px; height: 48px; left: 17px; top: -23px; }
.cloud::after { width: 58px; height: 58px; right: 13px; top: -30px; }

.cloud-1 { top: 12%; left: 5%; }
.cloud-2 { top: 67%; right: 8%; transform: scale(.78); animation-delay: -10s; }
.cloud-3 { top: 28%; right: 30%; transform: scale(.56); animation-delay: -17s; }

.sparkle {
    position: absolute;
    width: 18px;
    height: 18px;
    animation: sparklePulse 2.8s ease-in-out infinite;
}
.sparkle::before, .sparkle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 10px;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 12px rgba(255,255,255,.9);
}
.sparkle::before { width: 4px; height: 22px; }
.sparkle::after { width: 22px; height: 4px; }

.s-1 { left: 24%; top: 15%; }
.s-2 { left: 67%; top: 21%; animation-delay: -1s; transform: scale(.7); }
.s-3 { left: 88%; top: 62%; animation-delay: -1.8s; transform: scale(.8); }
.s-4 { left: 9%; top: 72%; animation-delay: -.5s; transform: scale(.6); }

.bubble {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.70);
    background: rgba(255,255,255,.18);
    box-shadow: inset -5px -7px 10px rgba(255,255,255,.22), 0 8px 18px rgba(96,75,137,.08);
    animation: bubbleUp 11s ease-in-out infinite;
}
.b-1 { width: 35px; height: 35px; left: 13%; bottom: -40px; }
.b-2 { width: 22px; height: 22px; left: 55%; bottom: -25px; animation-delay: -4s; }
.b-3 { width: 48px; height: 48px; right: 18%; bottom: -55px; animation-delay: -7s; }

@keyframes worldFloat {
    0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(0,-16px,0) rotate(4deg); }
}
@keyframes cloudDrift {
    0% { margin-left: -20px; }
    50% { margin-left: 35px; }
    100% { margin-left: -20px; }
}
@keyframes sparklePulse {
    0%,100% { opacity: .45; transform: scale(.72) rotate(0); }
    50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}
@keyframes bubbleUp {
    0% { transform: translateY(0) scale(.8); opacity: 0; }
    20% { opacity: .65; }
    80% { opacity: .5; }
    100% { transform: translateY(-105vh) translateX(35px) scale(1.2); opacity: 0; }
}