.vg-orbit {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem calc(0.65rem + var(--vg-safe-bottom));
    background: color-mix(in srgb, var(--vg-midnight) 94%, transparent);
    border-top: 1px solid var(--vg-border);
    backdrop-filter: blur(12px);
    border-radius: var(--vg-r-xl) var(--vg-r-xl) 0 0;
}

.vg-orbit__halo {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vg-moon), transparent);
    box-shadow: 0 0 16px var(--vg-gold);
}

.vg-orbit__star {
    flex: 1;
    max-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem;
    color: var(--vg-muted);
    font-family: var(--vg-font-ui);
    font-size: 0.65rem;
    transition: var(--vg-transition);
}

.vg-orbit__glyph {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: var(--vg-transition);
}

.vg-orbit__star.is-active .vg-orbit__glyph,
.vg-orbit__star:hover .vg-orbit__glyph {
    border-color: var(--vg-gold);
    box-shadow: 0 0 20px color-mix(in srgb, var(--vg-gold) 35%, transparent);
    background: color-mix(in srgb, var(--vg-cobalt) 30%, transparent);
}

.vg-orbit__star.is-active { color: var(--vg-moon); }