:root {
    --chahuo-ring-overlay: rgba(244, 248, 255, .38);
    --chahuo-ring-color: #2f64ff;
}

.chahuo-ring-overlay {
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .18) 34%, transparent 58%),
        var(--chahuo-ring-overlay);
    -webkit-backdrop-filter: blur(5px) saturate(1.15);
    backdrop-filter: blur(5px) saturate(1.15);
}

.chahuo-ring-inline {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
}

.chahuo-ring {
    position: relative;
    width: var(--chahuo-ring-size);
    aspect-ratio: 1;
    display: grid;
    border: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 20deg,
            rgba(30, 41, 59, .08) 0deg,
            rgba(30, 41, 59, .18) 68deg,
            var(--chahuo-ring-color) 146deg,
            #91b7ff 206deg,
            rgba(255, 255, 255, .2) 248deg,
            rgba(30, 41, 59, .08) 360deg
        );
    box-shadow:
        0 16px 38px rgba(35, 64, 120, .22),
        0 0 0 1px rgba(255, 255, 255, .78);
    animation: chahuo-premium-spin .95s cubic-bezier(.55, .08, .35, .95) infinite;
}

.chahuo-ring::before,
.chahuo-ring::after {
    content: "";
    position: absolute;
    grid-area: auto;
    margin: 0;
    border: 0;
    border-radius: 50%;
    animation: none;
}

.chahuo-ring::before {
    inset: max(var(--chahuo-ring-border), calc(var(--chahuo-ring-size) * .15));
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .68));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .74),
        inset 0 -8px 18px rgba(52, 79, 130, .12);
}

.chahuo-ring::after {
    width: max(6px, calc(var(--chahuo-ring-size) * .14));
    height: max(6px, calc(var(--chahuo-ring-size) * .14));
    top: 7%;
    right: 14%;
    background: linear-gradient(135deg, #ffffff, #8fb4ff);
    box-shadow: 0 0 16px rgba(47, 100, 255, .68);
}

@keyframes chahuo-premium-spin {
    to {
        transform: rotate(1turn);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chahuo-ring {
        animation: none;
    }
}