.cursor {
    position: absolute;
    width: var(--ctp-size, 20px);
    height: var(--ctp-size, 20px);
    background-color: var(--ctp-color, #0096ff);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
}

/* Square Shape */
.cursor.square {
    border-radius: 0;
}

/* Triangle Shape */
.cursor.triangle {
    width: 0;
    height: 0;
    border-left: calc(var(--ctp-size, 20px) / 2) solid transparent;
    border-right: calc(var(--ctp-size, 20px) / 2) solid transparent;
    border-bottom: var(--ctp-size, 20px) solid var(--ctp-color, #0096ff);
    background: none;
}

/* Donut Shape */
.cursor.donut {
    width: var(--ctp-size, 20px);
    height: var(--ctp-size, 20px);
    border-radius: 50%;
    background: none;
    border: 3px solid var(--ctp-color, #0096ff);
    box-shadow: 0 0 0 2px #fff inset;
    background-clip: padding-box;
    box-sizing: border-box;
}