@media (hover: none) {
    .pointer {
        display: none;
    }
}

.pointer {
    pointer-events: none;
    /* isolation: isolate; */
}

.pointer .a {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    aspect-ratio: 1;
    background-color: #9DE756;
    border-radius: 100%;
    transition: opacity, background, background-color, background-image, transform, width, height, scale .3s cubic-bezier(1,-0.04, 0.58, 1);
    scale: 1;
    z-index: 9999;
}
/* 
.pointer .b {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    aspect-ratio: 1;
    border: 1px solid #9DE756;
    border-radius: 100%;
    transition: opacity, background, width, height, transform .3s cubic-bezier(1,-0.04, 0.58, 1);
    scale: 1;
    z-index: 9999;
    opacity: 0!important;
} */

.pointer > *.hide-pointer {
    scale: 0;
}

.pointer > *.point-pointer {
    /* width: 120px; */
    background-color: white;
    mix-blend-mode:difference;
    transform: scale(6);
    opacity: 1!important;
    transition: opacity, background, background-color, background-image, transform, width, height, scale .3s cubic-bezier(1,-0.04, 0.58, 1);
}

@keyframes bubble {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
    100% {
        scale: 1;
    }
}

.pointer > *.xl-pointer {
    width: 60px;
}

.pointer > *.green-pointer {
    background-color: limegreen;
    animation: bubble 1s ease infinite;
    mix-blend-mode: normal!important;
}