@media (min-width: 769px) and (pointer: fine) {
    body.is-custom-cursor,
    body.is-custom-cursor * {
        cursor: none !important;
    }

    .custom-cursor {
        --cursor-ink: var(--colorBlack);
        --cursor-ring: rgba(18, 18, 18, 0.35);
        --cursor-pill-bg: rgba(18, 18, 18, 0.52);
        --cursor-pill-border: rgba(255, 255, 255, 0.14);
        --cursor-pill-text: var(--colorWhite);
        --cursor-core-on-pill: var(--colorWhite);
        --cursor-plus-on-pill: var(--colorBlack);
        --cursor-pill-icon-left: 21px;
        --cursor-pill-label-left: 38px;

        position: fixed;
        inset: 0;
        z-index: 100000;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.25s var(--easing, ease);
    }

    .custom-cursor.is-on-dark {
        --cursor-ink: var(--colorWhite);
        --cursor-ring: rgba(255, 255, 255, 0.55);
        --cursor-pill-bg: rgba(255, 255, 255, 0.48);
        --cursor-pill-border: rgba(255, 255, 255, 0.28);
        --cursor-pill-text: var(--colorBlack);
        --cursor-core-on-pill: var(--colorBlack);
        --cursor-plus-on-pill: var(--colorWhite);
    }

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

    .custom-cursor__track {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        will-change: transform;
    }

    .custom-cursor__shape {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--cursor-ring);
        background-color: transparent;
        box-sizing: border-box;
        overflow: hidden;
        transition:
            width 0.45s var(--easing, ease),
            height 0.45s var(--easing, ease),
            border-radius 0.45s var(--easing, ease),
            background-color 0.45s var(--easing, ease),
            border-color 0.45s var(--easing, ease),
            backdrop-filter 0.45s var(--easing, ease),
            -webkit-backdrop-filter 0.45s var(--easing, ease);
    }

    .custom-cursor__core {
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        place-items: center;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--cursor-ink);
        transform: translate(-50%, -50%);
        transition:
            width 0.45s var(--easing, ease),
            height 0.45s var(--easing, ease),
            left 0.45s var(--easing, ease),
            background-color 0.35s var(--easing, ease),
            transform 0.45s var(--easing, ease);
    }

    .custom-cursor__plus,
    .custom-cursor__close {
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0;
        color: var(--cursor-plus-on-pill);
        font-size: 1rem;
        line-height: 1;
        font-weight: 400;
        transform: translate(-50%, -50%) scale(0.4);
        transition:
            opacity 0.3s var(--easing, ease) 0.08s,
            transform 0.35s var(--easing, ease) 0.08s,
            color 0.35s var(--easing, ease);
    }

    .custom-cursor__close {
        font-size: 0.95rem;
        font-weight: 400;
    }

    .custom-cursor__label {
        position: absolute;
        top: 50%;
        left: var(--cursor-pill-label-left);
        color: var(--cursor-pill-text);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(-50%) translateX(-8px);
        transition:
            opacity 0.35s var(--easing, ease) 0.12s,
            transform 0.4s var(--easing, ease) 0.12s,
            color 0.35s var(--easing, ease);
    }

    .custom-cursor.is-card-hover .custom-cursor__shape {
        width: 122px;
        height: 38px;
        border-radius: 999px;
        background-color: var(--cursor-pill-bg);
        border-color: var(--cursor-pill-border);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        justify-content: flex-start;
    }

    .custom-cursor.is-card-hover.is-article-card-hover .custom-cursor__shape {
        width: 133px;
    }

    .custom-cursor.is-close-hover .custom-cursor__shape {
        width: 94px;
        height: 38px;
        border-radius: 999px;
        background-color: var(--cursor-pill-bg);
        border-color: var(--cursor-pill-border);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        justify-content: flex-start;
    }

    .custom-cursor.is-card-hover .custom-cursor__core,
    .custom-cursor.is-close-hover .custom-cursor__core {
        left: var(--cursor-pill-icon-left);
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--cursor-core-on-pill);
        transform: translate(-50%, -50%);
    }

    .custom-cursor.is-card-hover .custom-cursor__plus {
        position: static;
        top: auto;
        left: auto;
        opacity: 1;
        transform: none;
    }

    .custom-cursor.is-card-hover .custom-cursor__close {
        display: none;
    }

    .custom-cursor.is-close-hover .custom-cursor__close {
        position: static;
        top: auto;
        left: auto;
        opacity: 1;
        transform: none;
        line-height: 1;
    }

    .custom-cursor.is-close-hover .custom-cursor__plus {
        display: none;
    }

    .custom-cursor.is-card-hover .custom-cursor__label,
    .custom-cursor.is-close-hover .custom-cursor__label {
        opacity: 1;
        left: var(--cursor-pill-label-left);
        transform: translateY(-50%) translateX(0);
    }
}