.woki-stage {
    width: min(100%, 420px);
}

.woki-stage svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.woki-stage .rig-part,
.woki-stage #pupil-left,
.woki-stage #pupil-right {
    transform-box: fill-box;
}

.woki-stage #body {
    transform-origin: 50% 100%;
    animation: woki-breathe 4.8s ease-in-out infinite;
}

.woki-stage #antenna-left,
.woki-stage #antenna-right {
    transform-origin: 50% 92%;
}

.woki-stage #antenna-left {
    animation: woki-antenna-left 6.4s ease-in-out infinite;
}

.woki-stage #antenna-right {
    animation: woki-antenna-right 7.1s ease-in-out infinite;
}

.woki-stage #heart {
    transform-origin: 50% 55%;
    animation: woki-heart 3.6s ease-in-out infinite;
}

.woki-stage #spark-1,
.woki-stage #spark-2 {
    transform-origin: 50% 50%;
    animation: woki-spark 2.8s ease-in-out infinite alternate;
}

.woki-stage #spark-2 {
    animation-delay: .9s;
}

.woki-stage #eye-left,
.woki-stage #eye-right,
.woki-stage #pupil-left,
.woki-stage #pupil-right {
    transform-origin: 50% 50%;
    transition: transform 110ms ease-out;
}

.woki-stage.is-blinking #eye-left,
.woki-stage.is-blinking #eye-right,
.woki-stage.is-blinking #pupil-left,
.woki-stage.is-blinking #pupil-right {
    transform: scaleY(.06);
}

.woki-stage.is-peeking #body,
.woki-stage.is-peeking #eyes,
.woki-stage.is-peeking #pupils,
.woki-stage.is-peeking #hands {
    animation: woki-peek-main .62s cubic-bezier(.2, .86, .28, 1.18) both !important;
}

.woki-stage.is-peeking #antenna-left {
    animation: woki-peek-antenna-left .74s cubic-bezier(.2, .86, .28, 1.18) both !important;
}

.woki-stage.is-peeking #antenna-right {
    animation: woki-peek-antenna-right .78s cubic-bezier(.2, .86, .28, 1.18) both !important;
}

.woki-stage.is-thinking #body {
    animation: woki-think-body 2.7s ease-in-out infinite !important;
}

.woki-stage.is-thinking #antenna-left {
    animation: woki-think-antenna-left 2.1s ease-in-out infinite alternate !important;
}

.woki-stage.is-thinking #antenna-right {
    animation: woki-think-antenna-right 2.5s ease-in-out infinite alternate !important;
}

.woki-stage.is-thinking #hand-left {
    animation: woki-think-hand-left 2.7s ease-in-out infinite !important;
}

.woki-stage.is-thinking #hand-right {
    animation: woki-think-hand-right 2.7s ease-in-out infinite !important;
}

.woki-stage.is-thinking #pupil-left,
.woki-stage.is-thinking #pupil-right {
    transform: translate(3px, -4px) !important;
}

@keyframes woki-breathe {
    0%, 100% {
        transform: translateY(0) scaleY(1);
    }

    50% {
        transform: translateY(-1px) scaleY(1.008);
    }
}

@keyframes woki-antenna-left {
    0%, 72%, 100% {
        transform: rotate(0deg);
    }

    79% {
        transform: rotate(-2.2deg);
    }

    86% {
        transform: rotate(1.4deg);
    }

    92% {
        transform: rotate(-.6deg);
    }
}

@keyframes woki-antenna-right {
    0%, 68%, 100% {
        transform: rotate(0deg);
    }

    76% {
        transform: rotate(2deg);
    }

    84% {
        transform: rotate(-1.2deg);
    }

    91% {
        transform: rotate(.5deg);
    }
}

@keyframes woki-heart {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-2px) rotate(-1deg) scale(1.015);
    }
}

@keyframes woki-spark {
    from {
        opacity: .62;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes woki-peek-main {
    0% {
        transform: translateY(0);
    }

    28% {
        transform: translateY(15px);
    }

    62% {
        transform: translateY(-5px);
    }

    82% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes woki-peek-antenna-left {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    30% {
        transform: translateY(11px) rotate(-3deg);
    }

    66% {
        transform: translateY(-4px) rotate(2deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes woki-peek-antenna-right {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    32% {
        transform: translateY(11px) rotate(3deg);
    }

    68% {
        transform: translateY(-4px) rotate(-2deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes woki-think-body {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-1px) rotate(-.45deg);
    }
}

@keyframes woki-think-antenna-left {
    from {
        transform: rotate(-2.5deg);
    }

    to {
        transform: rotate(1deg);
    }
}

@keyframes woki-think-antenna-right {
    from {
        transform: rotate(1.5deg);
    }

    to {
        transform: rotate(-3deg);
    }
}

@keyframes woki-think-hand-left {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(3px, -2px) rotate(3deg);
    }
}

@keyframes woki-think-hand-right {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-2px, -1px) rotate(-2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .woki-stage *,
    .woki-stage *::before,
    .woki-stage *::after {
        animation: none !important;
        transition: none !important;
    }
}