@layer tokens {
    @keyframes ping {
        75%, 100% {
            transform: scale(2);
            opacity: 0
        }
    }
    @keyframes pulse {
        50% {
            opacity: .5
        }
    }
    @keyframes bounce {
        0%, 100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8,0,1,1)
        }
        50% {
            transform: none;
            animation-timing-function: cubic-bezier(0,0,0.2,1)
        }
    }
    @keyframes checkAnim {
        from {
            opacity: 0;
            stroke-dashoffset: 16;
            transform: scale(0.95)
        }
        to {
            opacity: 1;
            stroke-dashoffset: 0;
            transform: scale(1)
        }
    }
    @keyframes indeterminateOpacityAnim {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    @keyframes indeterminateScaleAnim {
        from {
            transform: scaleX(0.65)
        }
        to {
            transform: scaleX(1)
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    @keyframes fadeOut {
        from {
            opacity: 1
        }
        to {
            opacity: 0
        }
    }
    @keyframes fade-in {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    @keyframes fade-out {
        from {
            opacity: 1
        }
        to {
            opacity: 0
        }
    }
    @keyframes slide-in {
        0% {
            opacity: 0;
            transform: translateY(64px)
        }
        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }
    @keyframes slide-out {
        0% {
            opacity: 1;
            transform: translateY(0)
        }
        100% {
            opacity: 0;
            transform: translateY(64px)
        }
    }
    @keyframes skeleton-bg-fade {
        from {
            border-color: var(--skeleton-start-color);
            background: var(--skeleton-start-color)
        }
        to {
            border-color: var(--skeleton-end-color);
            background: var(--skeleton-end-color)
        }
    }
    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
        0% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(360deg)
        }
    }
}