.h5-orbital-host {
    --h5-orbital-primary: #53dcff;
    --h5-orbital-secondary: #5c91ff;
    --h5-orbital-accent: #f2c75c;
    --h5-orbital-core-start: #245f80;
    --h5-orbital-core-end: #172f5e;
    --h5-orbital-glow: #45bfd6;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Page styles may size the host, but the rotating ring envelope must paint outside it. */
    contain: layout !important;
    flex: 0 0 auto;
    min-height: 96px;
    min-width: 112px;
    overflow: visible;
    pointer-events: none;
    position: relative;
}

.h5-orbital-host::before,
.h5-orbital-host::after {
    content: none !important;
}

.h5-orbital-host.h5-orbital-full-rotation {
    contain: layout;
}

.h5-sheriff-header-title {
    align-items: center;
    display: flex;
    gap: 12px;
}

.h5-sheriff-header-title-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.h5-sheriff-header-orbital {
    flex: 0 0 144px;
    height: 114px;
    margin: -8px 0;
    width: 144px;
}

@media (max-width: 760px), (max-height: 500px) and (max-width: 900px) {
    .h5-sheriff-header-title {
        gap: 6px;
    }

    .h5-sheriff-header-orbital {
        flex-basis: 106px;
        height: 88px;
        margin: -4px -4px -4px 0;
        width: 106px;
    }
}

.h5-orbital-canvas {
    display: block;
    height: 100%;
    inset: 0;
    overflow: visible;
    position: absolute;
    width: 100%;
}

.h5-orbital-canvas::before,
.h5-orbital-canvas::after {
    border-radius: 50%;
    content: "";
    position: absolute;
}

.h5-orbital-canvas::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--h5-orbital-glow) 30%, transparent), color-mix(in srgb, var(--h5-orbital-primary) 10%, transparent) 46%, transparent 72%);
    filter: blur(2px);
    inset: 12% 14%;
}

.h5-orbital-canvas::after {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.76) 0 1px, transparent 1.4px);
    background-size: 17px 19px;
    inset: 8% 10%;
    opacity: 0.34;
}

.h5-orbital-ring {
    border: 1px solid color-mix(in srgb, var(--h5-orbital-primary) 52%, transparent);
    border-radius: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-16deg);
}

.h5-orbital-ring::before {
    border: 1px dotted color-mix(in srgb, var(--h5-orbital-primary) 18%, transparent);
    border-radius: inherit;
    content: "";
    inset: 7%;
    position: absolute;
}

.h5-orbital-ring > i {
    background: var(--h5-orbital-primary);
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--h5-orbital-glow);
    height: clamp(5px, 3.2%, 8px);
    left: 50%;
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    width: clamp(5px, 3.2%, 8px);
}

.h5-orbital-ring--one {
    animation: h5-orbital-one 15s linear infinite;
    height: 42%;
    width: 78%;
}

.h5-orbital-ring--two {
    animation: h5-orbital-two 19s linear infinite reverse;
    border-color: color-mix(in srgb, var(--h5-orbital-secondary) 56%, transparent);
    height: 80%;
    width: 47%;
}

.h5-orbital-ring--two > i {
    background: var(--h5-orbital-secondary);
    box-shadow: 0 0 14px var(--h5-orbital-secondary);
}

.h5-orbital-ring--three {
    animation: h5-orbital-three 23s linear infinite;
    border-color: color-mix(in srgb, var(--h5-orbital-accent) 50%, transparent);
    height: 66%;
    width: 93%;
}

.h5-orbital-ring--three > i {
    background: var(--h5-orbital-accent);
    box-shadow: 0 0 14px var(--h5-orbital-accent);
}

.h5-orbital-core {
    align-items: center;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.24), transparent 29%),
        linear-gradient(145deg, var(--h5-orbital-core-start), var(--h5-orbital-core-end) 72%);
    border: 1px solid color-mix(in srgb, var(--h5-orbital-accent) 72%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 7px color-mix(in srgb, var(--h5-orbital-accent) 7%, transparent),
        0 0 34px color-mix(in srgb, var(--h5-orbital-glow) 42%, transparent),
        inset 0 1px 7px rgba(255, 255, 255, 0.18);
    display: flex;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(50px, 38%, 92px);
    z-index: 3;
}

.h5-orbital-core::after {
    border: 1px solid color-mix(in srgb, var(--h5-orbital-accent) 28%, transparent);
    border-radius: 50%;
    content: "";
    inset: -16%;
    position: absolute;
}

.h5-orbital-mark {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--h5-orbital-glow) 66%, transparent));
    height: 72%;
    object-fit: contain;
    width: 72%;
}

.h5-orbital-host[data-h5-orbital-image-source="profile-picture"] .h5-orbital-mark--portrait {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    width: 100%;
}

.h5-orbital-host[data-h5-orbital-image-source="page-exception"] .h5-orbital-mark {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.h5-orbital-host[data-h5-orbital-image-source="page-exception"] .h5-orbital-mark--portrait {
    opacity: 1;
}

.h5-orbital-host[data-h5-orbital-image-source="sheriff-profile"] .h5-orbital-mark {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.h5-orbital-host[data-h5-orbital-image-source="sheriff-profile"] .h5-orbital-mark--portrait {
    opacity: 1;
}

.h5-orbital-star {
    animation: h5-orbital-star-pulse 2.8s ease-in-out infinite;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px var(--h5-orbital-primary);
    height: 3px;
    position: absolute;
    width: 3px;
}

.h5-orbital-star--one { left: 9%; top: 21%; }
.h5-orbital-star--two { animation-delay: -0.7s; right: 7%; top: 30%; }
.h5-orbital-star--three { animation-delay: -1.3s; bottom: 13%; left: 23%; }
.h5-orbital-star--four { animation-delay: -2s; bottom: 21%; right: 14%; }

@keyframes h5-orbital-one {
    to { transform: translate(-50%, -50%) rotate(344deg); }
}

@keyframes h5-orbital-two {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes h5-orbital-three {
    to { transform: translate(-50%, -50%) rotate(-376deg); }
}

@keyframes h5-orbital-star-pulse {
    0%, 100% { opacity: 0.28; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
    .h5-orbital-ring,
    .h5-orbital-star {
        animation: none !important;
    }
}