body.si-hide-default, 
body.si-hide-default * {
    cursor: none !important;
}

#si-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    width: 0; /* Start at 0 so it's invisible until hover */
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 12px;
    color: #fff;
    transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease;
    overflow: visible;
}

/* Show when data-shape is present */
#si-cursor[data-shape] {
    width: 40px; /* Default fallback */
    height: 40px;
}

#si-cursor.si-click {
    transform: translate(-50%, -50%) scale(0.8);
}

#si-cursor .si-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#si-cursor[data-shape="circle"] .si-shape { border-radius: 50%; }
#si-cursor[data-shape="square"] .si-shape { border-radius: 2px; }
#si-cursor[data-shape="diamond"] .si-shape { transform: rotate(45deg); }
#si-cursor[data-shape="star"] .si-shape {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border: none;
    background: #fff; /* Stars work better with fill than border */
}

.si-label {
    position: relative;
    z-index: 2;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}