body {
    position: relative;
    isolation: isolate;
}


#hb-cursor-layer {
    position: fixed;
    inset: 0;

    z-index: -1;

    width: 100%;
    height: 100%;

    overflow: hidden;
    pointer-events: none !important;

    background: transparent;
}


#hb-cursor-layer .hb-cursor-box {
    position: absolute;

    width: var(--hb-grid-size, 40px);
    height: var(--hb-grid-size, 40px);

    box-sizing: border-box;

    opacity: 0;
    pointer-events: none !important;

    border: 1px solid transparent;
    border-radius: 2px;

    transition: opacity .6s ease;
}


#hb-cursor-layer .hb-cursor-box.active {
    opacity: var(--hb-opacity, .6);
}


#hb-cursor-layer .hb-cursor-box.blue {
    background: rgba(37, 99, 235, .13);
    border-color: rgba(37, 99, 235, .20);
}


#hb-cursor-layer .hb-cursor-box.purple {
    background: rgba(139, 92, 246, .12);
    border-color: rgba(139, 92, 246, .19);
}


#hb-cursor-layer .hb-cursor-box.cyan {
    background: rgba(6, 182, 212, .11);
    border-color: rgba(6, 182, 212, .18);
}


[data-theme="dark"] #hb-cursor-layer .hb-cursor-box.blue {
    background: rgba(59, 130, 246, .22);
}

[data-theme="dark"] #hb-cursor-layer .hb-cursor-box.purple {
    background: rgba(139, 92, 246, .22);
}

[data-theme="dark"] #hb-cursor-layer .hb-cursor-box.cyan {
    background: rgba(6, 182, 212, .19);
}


@media (hover: none),
(pointer: coarse),
(prefers-reduced-motion: reduce) {
    #hb-cursor-layer {
        display: none;
    }
}