.cursor {
    --cursor-ink: #F3F3EF;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: transform;
}

.cursor.is-visible { opacity: 1; }

.cursor-box {
    padding: 8px 11px 7px;
    background: var(--blue-pure, #0000FF);

    --dot: 12px;
    clip-path: inset(0 calc(100% - var(--dot)) calc(100% - var(--dot)) 0 round calc(var(--dot) / 2));

    transform: rotate(0deg);
    transform-origin: 6px 6px;

    transition:
        clip-path 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cursor.is-label .cursor-box {
    clip-path: inset(0 round 2px);
    transform: rotate(-4.5deg);
}

.cursor-label {
    display: block;
    font: 500 11px/1 'IBM Plex Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cursor-ink);
    opacity: 0;
    transition: opacity 0.14s ease;
}

.cursor.is-label .cursor-label { opacity: 1; transition-delay: 0.06s; }

@media (prefers-reduced-motion: reduce) {
    .cursor,
    .cursor-box,
    .cursor-label { transition: none; }

    .cursor.is-label .cursor-box { transform: none; }
}