.orb {
    position: relative;
    width: var(--orb-size, 360px);
    height: var(--orb-size, 360px);
    display: grid;
    place-items: center
}

.orb .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    pointer-events: none
}

.orb .ring-1 {
    border: 1px solid rgba(99, 102, 241, .35);
    border-top-color: rgba(167, 139, 250, .85);
    border-right-color: rgba(167, 139, 250, .5);
    animation: orb-spin 16s linear infinite;
    box-shadow: inset 0 0 40px rgba(99, 102, 241, .15)
}

.orb .ring-2 {
    inset: 12%;
    border: 1px dashed rgba(244, 114, 182, .4);
    animation: orb-spin 22s linear infinite reverse
}

.orb .ring-3 {
    inset: 22%;
    border: 1px solid rgba(139, 92, 246, .5);
    border-bottom-color: rgba(244, 114, 182, .8);
    animation: orb-spin 12s linear infinite
}

.orb .ring-4 {
    inset: 32%;
    border: 1px solid rgba(167, 139, 250, .3);
    animation: orb-spin 9s linear infinite reverse
}

@keyframes orb-spin {
    to {
        transform: rotate(360deg)
    }
}

.orb .core {
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(244, 114, 182, .9) 0, rgba(139, 92, 246, .85) 35%, rgba(99, 102, 241, .6) 65%, rgba(99, 102, 241, .1) 100%);
    box-shadow: 0 0 60px rgba(139, 92, 246, .7), 0 0 120px rgba(99, 102, 241, .45), inset 0 0 30px rgba(255, 255, 255, .2);
    animation: orb-pulse 4s ease-in-out infinite
}

@keyframes orb-pulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1)
    }

    50% {
        transform: scale(1.06);
        filter: brightness(1.2)
    }
}

.orb .core::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 50%);
    filter: blur(4px)
}

.orb-mini {
    --orb-size: 56px;
    flex-shrink: 0
}

.orb-mini .ring-1 {
    animation-duration: 8s
}

.orb-mini .ring-2 {
    animation-duration: 10s
}

.orb-commands {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(14, 9, 25, .85);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    padding: 14px 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    width: 220px;
    box-shadow: var(--glow-soft)
}

.orb-commands::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--purple-light), transparent)
}

.orb-commands .label {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--purple-light);
    margin-bottom: 8px
}

.orb-commands .cmd {
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px
}

.orb-commands .cmd::before {
    content: ">";
    color: var(--purple-light)
}

.orb-commands .cmd-rotator {
    position: relative;
    height: 18px;
    overflow: hidden
}

.orb-commands .cmd-rotator span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(8px);
    animation: cmd-cycle 12s infinite
}

.orb-commands .cmd-rotator span:first-child {
    animation-delay: 0s
}

.orb-commands .cmd-rotator span:nth-child(2) {
    animation-delay: 3s
}

.orb-commands .cmd-rotator span:nth-child(3) {
    animation-delay: 6s
}

.orb-commands .cmd-rotator span:nth-child(4) {
    animation-delay: 9s
}

@keyframes cmd-cycle {

    0%,
    25% {
        opacity: 1;
        transform: translateY(0)
    }

    100%,
    30% {
        opacity: 0;
        transform: translateY(-8px)
    }
}