.moon-orb {
    background:
        radial-gradient(ellipse 46% 26% at 43% 70%, rgba(81, 94, 100, 0.09) 0 52%, transparent 70%),
        radial-gradient(circle at 34% 28%, #fffef6 0%, #f7f3df 36%, #e1e2d8 66%, #bac4c7 84%, #96a5ae 100%);
    box-shadow:
        inset -8px -5px 12px rgba(31, 48, 62, 0.26),
        inset 5px 4px 8px rgba(255, 255, 255, 0.48),
        0 0 13px rgba(238, 249, 255, 0.94),
        0 0 38px rgba(132, 203, 255, 0.43),
        0 0 82px rgba(75, 133, 255, 0.18);
    filter: saturate(0.62);
}

.moon-orb::before {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(
        118deg,
        rgba(255, 255, 255, 0.18) 0%,
        transparent 43%,
        rgba(28, 45, 58, 0.13) 100%
    );
}

.moon-orb.is-dragging {
    box-shadow:
        inset -8px -5px 12px rgba(31, 48, 62, 0.24),
        inset 5px 4px 8px rgba(255, 255, 255, 0.5),
        0 0 16px rgba(242, 252, 255, 0.98),
        0 0 48px rgba(134, 209, 255, 0.54),
        0 0 92px rgba(75, 133, 255, 0.22);
}