.ollie-nook {
    --ollie-size: clamp(72px, 13.2vw, 90px);
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 9;
    width: var(--ollie-size);
    height: var(--ollie-size);
    pointer-events: none;
}

.playground-ollie-stage {
    --actor-scale: 1;
    --ollie-size: clamp(66px, 18vw, 96px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: var(--ollie-size);
    height: var(--ollie-size);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(calc(var(--actor-scale) * .72));
    transform-origin: 50% 72%;
    transition:
        left 360ms cubic-bezier(.2, .82, .3, 1),
        top 360ms cubic-bezier(.2, .82, .3, 1),
        opacity 150ms ease-out,
        transform 220ms cubic-bezier(.2, .82, .3, 1);
}

.playground-ollie-stage[data-visible="true"] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--actor-scale));
}

.playground-ollie-stage[data-action="walk"] {
    transition:
        left 900ms linear,
        top 900ms linear,
        opacity 150ms ease-out,
        transform 180ms ease-out;
}

.playground-ollie-stage .ollie {
    --ollie-size: inherit;
    width: 100%;
    height: 100%;
    cursor: default;
    pointer-events: none;
}

.playground-ollie-stage[data-action="deliver"] .ollie__shadow,
.playground-ollie-stage[data-action="peek"] .ollie__shadow {
    opacity: .42;
}

.ollie {
    --ollie-size: 260px;
    --ollie-body-color: #A96BDD;
    --ollie-body-shadow: #7D46B5;
    --ollie-accent-color: #FF769F;
    --ollie-eye-color: #17234A;
    --ollie-cheek-color: #FF7FA6;
    --ollie-mouth-color: #57243D;
    --ollie-shoe-color: #8550BC;
    --ollie-animation-speed: 3.2s;
    --ollie-look-x: 0%;
    --ollie-look-y: 0%;
    --ollie-outline: #6C3B9C;
    --ollie-cream: #C997EB;
    position: relative;
    display: block;
    width: var(--ollie-size);
    height: var(--ollie-size);
    outline: none;
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ollie-nook .ollie {
    --ollie-size: inherit;
}

.ollie:focus-visible {
    border-radius: 32%;
    box-shadow: 0 0 0 calc(var(--ollie-size) * .025) #FFFFFF,
        0 0 0 calc(var(--ollie-size) * .05) var(--ollie-accent-color);
}

.ollie__shadow,
.ollie__character,
.ollie__accessory,
.ollie__ear,
.ollie__ear-inner,
.ollie__tuft,
.ollie__arm,
.ollie__hand,
.ollie__body,
.ollie__face,
.ollie__eyebrow,
.ollie__eye,
.ollie__pupil,
.ollie__eye-shine,
.ollie__eyelid,
.ollie__cheek,
.ollie__mouth,
.ollie__tongue,
.ollie__belly,
.ollie__leg,
.ollie__foot,
.ollie__effects {
    position: absolute;
    box-sizing: border-box;
}

.ollie__shadow {
    right: 25%;
    bottom: 0;
    left: 25%;
    height: 7%;
    border-radius: 50%;
    background: rgba(74, 44, 99, .18);
    transform-origin: center;
    animation: ollie-shadow var(--ollie-animation-speed) ease-in-out infinite;
}

.ollie__character {
    inset: 0;
    transform-origin: 50% 91%;
    animation: ollie-idle var(--ollie-animation-speed) ease-in-out infinite;
}

.ollie__accessory {
    inset: 0;
    z-index: auto;
    pointer-events: none;
}

.ollie__ear {
    top: 0;
    z-index: 1;
    width: 17%;
    height: 35%;
    border: calc(var(--ollie-size) * .014) solid var(--ollie-outline);
    border-radius: 54% 54% 48% 48% / 48% 48% 58% 58%;
    background: linear-gradient(150deg, #BE8AE6, var(--ollie-body-color));
    transform-origin: 50% 100%;
    animation: ollie-ear calc(var(--ollie-animation-speed) + 1.2s) ease-in-out infinite;
}

.ollie__ear--left {
    left: 29%;
    --ollie-ear-angle: -10deg;
}

.ollie__ear--right {
    right: 29%;
    --ollie-ear-angle: 10deg;
    animation-delay: -2.2s;
}

.ollie__ear-inner {
    inset: 12% 25% 16%;
    border-radius: inherit;
    background: #FF91AD;
    opacity: .9;
}

.ollie__ear--left .ollie__ear-inner {
    background: #FFD19B;
}

.ollie__tuft {
    top: 24%;
    left: 44%;
    z-index: 5;
    width: 12%;
    height: 6%;
}

.ollie__tuft span {
    position: absolute;
    bottom: 0;
    width: 38%;
    height: 72%;
    border: 0;
    border-top: calc(var(--ollie-size) * .014) solid #8A4FBD;
    border-radius: 50%;
    background: transparent;
    transform-origin: 50% 100%;
}

.ollie__tuft span:nth-child(1) {
    left: 4%;
    transform: rotate(-30deg);
}

.ollie__tuft span:nth-child(2) {
    left: 32%;
    height: 88%;
}

.ollie__tuft span:nth-child(3) {
    right: 4%;
    transform: rotate(30deg) scaleX(-1);
}

.ollie__body {
    top: 23%;
    left: 16%;
    z-index: 3;
    width: 68%;
    height: 66%;
    border: calc(var(--ollie-size) * .016) solid var(--ollie-outline);
    border-radius: 50%;
    background:
        radial-gradient(circle at 31% 19%, rgba(255, 255, 255, .3) 0 9%, transparent 18%),
        linear-gradient(155deg, #BB83E3 0 34%, var(--ollie-body-color) 62%, var(--ollie-body-shadow) 100%);
    box-shadow:
        inset calc(var(--ollie-size) * -.025) calc(var(--ollie-size) * -.025) 0 rgba(86, 42, 128, .12),
        0 calc(var(--ollie-size) * .012) 0 rgba(84, 45, 113, .12);
    transform-origin: 50% 100%;
    animation: ollie-breathe var(--ollie-animation-speed) ease-in-out infinite;
}

.ollie__face {
    inset: 0;
}

.ollie__eyebrow {
    top: 22%;
    z-index: 5;
    width: 17%;
    height: 7%;
    border-top: calc(var(--ollie-size) * .016) solid #74419F;
    border-radius: 50%;
    transform-origin: center;
}

.ollie__eyebrow--left { left: 19%; transform: rotate(-5deg); }
.ollie__eyebrow--right { right: 19%; transform: rotate(5deg); }

.ollie__eye {
    top: 31%;
    z-index: 5;
    width: 23%;
    height: 27%;
    overflow: hidden;
    border: calc(var(--ollie-size) * .012) solid #68408F;
    border-radius: 50%;
    background: #FFFFFF;
    transform-origin: center;
}

.ollie__eye--left { left: 16%; }
.ollie__eye--right { right: 16%; }

.ollie__pupil {
    top: 22%;
    left: 24%;
    width: 54%;
    height: 59%;
    border-radius: 50%;
    background: var(--ollie-eye-color);
    transform: translate(var(--ollie-look-x), var(--ollie-look-y));
    transition: transform 120ms ease-out;
}

.ollie__pupil::after {
    position: absolute;
    right: 17%;
    bottom: 17%;
    width: 16%;
    height: 14%;
    border-radius: 50%;
    background: rgba(124, 210, 255, .72);
    content: '';
}

.ollie__eye-shine {
    top: 26%;
    left: 38%;
    z-index: 2;
    width: 14%;
    height: 15%;
    border-radius: 50%;
    background: #FFFFFF;
    pointer-events: none;
}

.ollie__eyelid {
    inset: -4%;
    z-index: 3;
    border-bottom: calc(var(--ollie-size) * .012) solid var(--ollie-outline);
    border-radius: 50%;
    background: var(--ollie-body-color);
    transform: translateY(-108%);
}

.ollie[data-blinking="true"] .ollie__eyelid {
    animation: ollie-blink 280ms ease-in-out 1;
}

.ollie__cheek {
    top: 57%;
    z-index: 4;
    width: 15%;
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #FFADBE 0 20%, var(--ollie-cheek-color) 58%);
    opacity: .9;
    transition: transform 180ms ease;
}

.ollie__cheek--left { left: 8%; transform: rotate(6deg); }
.ollie__cheek--right { right: 8%; transform: rotate(-6deg); }

.ollie__mouth {
    top: 60%;
    left: 35%;
    z-index: 5;
    width: 30%;
    height: 20%;
    overflow: hidden;
    border: calc(var(--ollie-size) * .012) solid #6C3B79;
    border-top-width: calc(var(--ollie-size) * .005);
    border-radius: 16% 16% 52% 52%;
    background: var(--ollie-mouth-color);
    transform-origin: 50% 20%;
    transition: transform 180ms ease, border-radius 180ms ease;
}

.ollie__tongue {
    right: 8%;
    bottom: -9%;
    left: 8%;
    height: 57%;
    border-radius: 50%;
    background: #F06E71;
}

.ollie__belly {
    display: none;
}

.ollie__arm {
    top: 54%;
    z-index: 2;
    width: 22%;
    height: 8%;
    border: calc(var(--ollie-size) * .014) solid var(--ollie-outline);
    border-radius: 48%;
    background: linear-gradient(180deg, #B67CE0, var(--ollie-body-shadow));
    transition: transform 180ms ease;
}

.ollie__arm--left {
    left: 3%;
    transform: rotate(-8deg);
    transform-origin: 88% 50%;
}

.ollie__arm--right {
    right: 3%;
    transform: rotate(8deg);
    transform-origin: 12% 50%;
}

.ollie__hand {
    top: -48%;
    width: 47%;
    height: 196%;
    border: calc(var(--ollie-size) * .012) solid var(--ollie-outline);
    border-radius: 50%;
    background: #9459C7;
}

.ollie__arm--left .ollie__hand { left: -25%; }
.ollie__arm--right .ollie__hand { right: -25%; }

.ollie__hand::before,
.ollie__hand::after {
    position: absolute;
    top: -24%;
    width: 38%;
    height: 55%;
    border: calc(var(--ollie-size) * .008) solid var(--ollie-outline);
    border-radius: 50%;
    background: #9459C7;
    content: '';
}

.ollie__hand::before {
    left: 4%;
    transform: rotate(-28deg);
}

.ollie__hand::after {
    right: 4%;
    transform: rotate(28deg);
}

.ollie__leg {
    bottom: 7%;
    z-index: 1;
    width: 12%;
    height: 13%;
    border: calc(var(--ollie-size) * .014) solid var(--ollie-outline);
    border-radius: 45%;
    background: var(--ollie-body-shadow);
}

.ollie__leg--left { left: 32%; }
.ollie__leg--right { right: 32%; }

.ollie__foot {
    bottom: 2%;
    z-index: 4;
    width: 22%;
    height: 11%;
    border: calc(var(--ollie-size) * .014) solid var(--ollie-outline);
    border-radius: 58% 58% 46% 46%;
    background: linear-gradient(180deg, #A66ED1, var(--ollie-shoe-color));
    transform-origin: center;
}

.ollie__foot::after {
    position: absolute;
    inset: 27% 18% 18%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    content: '';
}

.ollie__foot--left { left: 27%; transform: rotate(3deg); }
.ollie__foot--right { right: 27%; transform: rotate(-3deg); }

.ollie__effects {
    inset: 4%;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
}

.ollie__effects::before,
.ollie__effects::after {
    position: absolute;
    width: 9%;
    aspect-ratio: 1;
    background: #FFE16A;
    clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
    content: '';
}

.ollie__effects::before {
    top: 16%;
    left: 0;
    box-shadow: calc(var(--ollie-size) * .73) calc(var(--ollie-size) * .12) 0 #FFFFFF;
}

.ollie__effects::after {
    right: 3%;
    bottom: 25%;
    background: var(--ollie-accent-color);
    box-shadow: calc(var(--ollie-size) * -.73) calc(var(--ollie-size) * .08) 0 #FFFFFF;
}

/* Calm idle personality */

.ollie[data-state="idle"]:not([data-playing]) {
    animation: ollie-idle-walk 14s cubic-bezier(.45, .05, .55, .95) infinite;
}

.ollie[data-state="idle"]:not([data-playing]) .ollie__ear {
    animation: ollie-idle-ear 14s ease-in-out infinite;
    animation-delay: 0s;
}

.ollie[data-state="idle"]:not([data-playing]) .ollie__mouth {
    animation: ollie-idle-smile 14s ease-in-out infinite;
}

.ollie[data-state="idle"]:not([data-playing]) .ollie__arm--left {
    animation: ollie-idle-walk-arm-left 14s ease-in-out infinite;
}

.ollie[data-state="idle"]:not([data-playing]) .ollie__arm--right {
    animation: ollie-idle-walk-arm-right 14s ease-in-out infinite;
}

.ollie[data-state="idle"]:not([data-playing]) .ollie__foot--left {
    animation: ollie-idle-walk-foot-left 14s ease-in-out infinite;
}

.ollie[data-state="idle"]:not([data-playing]) .ollie__foot--right {
    animation: ollie-idle-walk-foot-right 14s ease-in-out infinite;
}

/* Variants */

.ollie[data-variant="cat"] .ollie__ear {
    top: 13%;
    width: 19%;
    height: 18%;
    border-radius: 60% 18% 55% 22%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ollie[data-variant="cat"] .ollie__ear--left { left: 27%; --ollie-ear-angle: -12deg; }
.ollie[data-variant="cat"] .ollie__ear--right { right: 27%; --ollie-ear-angle: 12deg; }
.ollie[data-variant="cat"] .ollie__ear-inner {
    display: block;
    inset: 34% 28% 10%;
    border-radius: 45% 12% 38% 15%;
    background: #FF8EAB;
}

.ollie[data-variant="cat"] .ollie__body::before,
.ollie[data-variant="cat"] .ollie__body::after {
    position: absolute;
    top: 57%;
    z-index: 6;
    width: 25%;
    height: 1%;
    border-top: calc(var(--ollie-size) * .008) solid var(--ollie-outline);
    content: '';
}

.ollie[data-variant="cat"] .ollie__body::before {
    left: -4%;
    transform: rotate(8deg);
    box-shadow: 0 calc(var(--ollie-size) * .045) 0 var(--ollie-outline);
}

.ollie[data-variant="cat"] .ollie__body::after {
    right: -4%;
    transform: rotate(-8deg);
    box-shadow: 0 calc(var(--ollie-size) * .045) 0 var(--ollie-outline);
}

.ollie[data-variant="alien"] .ollie__ear {
    top: 6%;
    width: 7%;
    height: 25%;
    border-radius: 48%;
    background: var(--ollie-accent-color);
}

.ollie[data-variant="alien"] .ollie__ear--left { left: 32%; --ollie-ear-angle: -17deg; }
.ollie[data-variant="alien"] .ollie__ear--right { right: 32%; --ollie-ear-angle: 17deg; }
.ollie[data-variant="alien"] .ollie__ear-inner { display: none; }

.ollie[data-variant="alien"] .ollie__ear::after {
    position: absolute;
    top: -18%;
    left: -45%;
    width: 190%;
    aspect-ratio: 1;
    border: calc(var(--ollie-size) * .014) solid var(--ollie-outline);
    border-radius: 50%;
    background: #86DCCB;
    content: '';
}

.ollie[data-variant="leaf"] {
    --ollie-accent-color: #62BE53;
}

.ollie[data-variant="leaf"] .ollie__ear {
    top: 10%;
    width: 21%;
    height: 22%;
    border-radius: 80% 18% 80% 18%;
    background: var(--ollie-accent-color);
}

.ollie[data-variant="leaf"] .ollie__ear--left { left: 27%; --ollie-ear-angle: -34deg; }
.ollie[data-variant="leaf"] .ollie__ear--right { right: 27%; --ollie-ear-angle: 34deg; }
.ollie[data-variant="leaf"] .ollie__ear-inner { background: #B8E982; opacity: .65; }

.ollie[data-variant="plain"] .ollie__ear { display: none; }

/* Persistent states and temporary plays */

.ollie[data-state="happy"] .ollie__character,
.ollie[data-playing="happy"] .ollie__character {
    animation: ollie-happy .9s ease-in-out infinite;
}

.ollie[data-state="happy"] .ollie__arm--left,
.ollie[data-playing="happy"] .ollie__arm--left { transform: rotate(42deg) translate(-4%, -4%); }
.ollie[data-state="happy"] .ollie__arm--right,
.ollie[data-playing="happy"] .ollie__arm--right { transform: rotate(-42deg) translate(4%, -4%); }
.ollie[data-state="happy"] .ollie__mouth,
.ollie[data-playing="happy"] .ollie__mouth { transform: scale(1.18, 1.12); }
.ollie[data-state="happy"] .ollie__cheek,
.ollie[data-playing="happy"] .ollie__cheek { transform: translateY(-12%) scale(1.08); }

.ollie[data-state="excited"] .ollie__character,
.ollie[data-playing="excited"] .ollie__character {
    animation: ollie-excited .58s ease-in-out infinite;
}

.ollie[data-state="excited"] .ollie__ear,
.ollie[data-playing="excited"] .ollie__ear { animation: ollie-ear-excited .42s ease-in-out infinite alternate; }
.ollie[data-state="excited"] .ollie__eye,
.ollie[data-playing="excited"] .ollie__eye { transform: scale(1.1); }
.ollie[data-state="excited"] .ollie__foot--left,
.ollie[data-playing="excited"] .ollie__foot--left { animation: ollie-foot-left .58s ease-in-out infinite; }
.ollie[data-state="excited"] .ollie__foot--right,
.ollie[data-playing="excited"] .ollie__foot--right { animation: ollie-foot-right .58s ease-in-out infinite; }

.ollie[data-state="correct"] .ollie__character,
.ollie[data-playing="correct"] .ollie__character {
    animation: ollie-correct .95s cubic-bezier(.2, .85, .3, 1) 1;
}

.ollie[data-state="correct"] .ollie__arm--left,
.ollie[data-playing="correct"] .ollie__arm--left { transform: rotate(58deg) translate(-5%, -16%); }
.ollie[data-state="correct"] .ollie__arm--right,
.ollie[data-playing="correct"] .ollie__arm--right { transform: rotate(-58deg) translate(5%, -16%); }
.ollie[data-state="correct"] .ollie__effects,
.ollie[data-playing="correct"] .ollie__effects {
    animation: ollie-sparkles .95s ease-out 1;
}

.ollie[data-state="wrong"] .ollie__character,
.ollie[data-playing="wrong"] .ollie__character {
    animation: ollie-wrong .8s ease-in-out 1;
}

.ollie[data-state="wrong"] .ollie__eyebrow--left,
.ollie[data-playing="wrong"] .ollie__eyebrow--left { animation: ollie-concern-left .8s ease-in-out 1; }
.ollie[data-state="wrong"] .ollie__eyebrow--right,
.ollie[data-playing="wrong"] .ollie__eyebrow--right { animation: ollie-concern-right .8s ease-in-out 1; }
.ollie[data-state="wrong"] .ollie__mouth,
.ollie[data-playing="wrong"] .ollie__mouth { animation: ollie-mouth-encourage .8s ease-in-out 1; }

.ollie[data-state="thinking"] .ollie__character,
.ollie[data-playing="thinking"] .ollie__character {
    animation: ollie-thinking 2s ease-in-out infinite;
}

.ollie[data-state="thinking"] .ollie__pupil,
.ollie[data-playing="thinking"] .ollie__pupil { transform: translate(8%, -22%); }
.ollie[data-state="thinking"] .ollie__arm--right,
.ollie[data-playing="thinking"] .ollie__arm--right { transform: rotate(-58deg) translate(-12%, -36%); }
.ollie[data-state="thinking"] .ollie__eyebrow--left,
.ollie[data-playing="thinking"] .ollie__eyebrow--left { transform: rotate(10deg); }
.ollie[data-state="thinking"] .ollie__eyebrow--right,
.ollie[data-playing="thinking"] .ollie__eyebrow--right { transform: rotate(-10deg); }

.ollie[data-state="sleepy"] .ollie__character,
.ollie[data-playing="sleepy"] .ollie__character {
    animation: ollie-sleepy 3.8s ease-in-out infinite;
}

.ollie[data-state="sleepy"] .ollie__eyelid,
.ollie[data-playing="sleepy"] .ollie__eyelid { transform: translateY(-43%); }
.ollie[data-state="sleepy"] .ollie__ear--left,
.ollie[data-playing="sleepy"] .ollie__ear--left { transform: rotate(-24deg); }
.ollie[data-state="sleepy"] .ollie__ear--right,
.ollie[data-playing="sleepy"] .ollie__ear--right { transform: rotate(24deg); }
.ollie[data-state="sleepy"] .ollie__effects::after,
.ollie[data-playing="sleepy"] .ollie__effects::after {
    right: 0;
    bottom: auto;
    top: 4%;
    width: auto;
    background: none;
    box-shadow: none;
    clip-path: none;
    color: var(--ollie-eye-color);
    content: 'Z';
    font: 900 calc(var(--ollie-size) * .14) / 1 Nunito, sans-serif;
    opacity: .65;
}

.ollie[data-state="sleepy"] .ollie__effects,
.ollie[data-playing="sleepy"] .ollie__effects {
    opacity: 1;
}

.ollie[data-state="sleepy"] .ollie__effects::before,
.ollie[data-playing="sleepy"] .ollie__effects::before {
    display: none;
}

.ollie[data-state="surprised"] .ollie__character,
.ollie[data-playing="surprised"] .ollie__character {
    animation: ollie-surprised .7s ease-in-out 1;
}

.ollie[data-state="surprised"] .ollie__eye,
.ollie[data-playing="surprised"] .ollie__eye { transform: scale(1.14); }
.ollie[data-state="surprised"] .ollie__mouth,
.ollie[data-playing="surprised"] .ollie__mouth {
    width: 18%;
    height: 18%;
    left: 41%;
    border-width: calc(var(--ollie-size) * .014);
    border-radius: 50%;
}
.ollie[data-state="surprised"] .ollie__tongue,
.ollie[data-playing="surprised"] .ollie__tongue { display: none; }
.ollie[data-state="surprised"] .ollie__arm--left,
.ollie[data-playing="surprised"] .ollie__arm--left { transform: rotate(38deg) translateY(-8%); }
.ollie[data-state="surprised"] .ollie__arm--right,
.ollie[data-playing="surprised"] .ollie__arm--right { transform: rotate(-38deg) translateY(-8%); }

.ollie[data-state="wave"] .ollie__character,
.ollie[data-playing="wave"] .ollie__character {
    animation: ollie-wave 1.45s ease-in-out 1;
}

.ollie[data-state="wave"] .ollie__arm--right,
.ollie[data-playing="wave"] .ollie__arm--right {
    animation: ollie-wave-arm 1.45s ease-in-out 1;
}

.ollie[data-state="jump"] .ollie__character,
.ollie[data-playing="jump"] .ollie__character {
    animation: ollie-jump .9s cubic-bezier(.2, .8, .3, 1) 1;
}

.ollie[data-state="jump"] .ollie__foot,
.ollie[data-playing="jump"] .ollie__foot {
    animation: ollie-jump-feet .9s ease-in-out 1;
}

.ollie[data-state="celebrate"] .ollie__character,
.ollie[data-playing="celebrate"] .ollie__character {
    animation: ollie-celebrate 1.4s ease-in-out 1;
}

.ollie[data-state="celebrate"] .ollie__arm--left,
.ollie[data-playing="celebrate"] .ollie__arm--left { transform: rotate(64deg) translate(-6%, -20%); }
.ollie[data-state="celebrate"] .ollie__arm--right,
.ollie[data-playing="celebrate"] .ollie__arm--right { transform: rotate(-64deg) translate(6%, -20%); }
.ollie[data-state="celebrate"] .ollie__ear,
.ollie[data-playing="celebrate"] .ollie__ear { animation: ollie-ear-excited .35s ease-in-out 4 alternate; }
.ollie[data-state="celebrate"] .ollie__effects,
.ollie[data-playing="celebrate"] .ollie__effects { animation: ollie-sparkles 1.4s ease-out 1; }

.ollie[data-state="giggle"] .ollie__character,
.ollie[data-playing="giggle"] .ollie__character {
    animation: ollie-giggle 1.05s ease-in-out infinite;
}

.ollie[data-state="giggle"] .ollie__mouth,
.ollie[data-playing="giggle"] .ollie__mouth {
    animation: ollie-giggle-mouth 1.05s ease-in-out infinite;
}

.ollie[data-state="giggle"] .ollie__eye,
.ollie[data-playing="giggle"] .ollie__eye {
    transform: scaleY(.84);
}

.ollie[data-state="giggle"] .ollie__arm--left,
.ollie[data-playing="giggle"] .ollie__arm--left { transform: rotate(28deg) translateY(-8%); }
.ollie[data-state="giggle"] .ollie__arm--right,
.ollie[data-playing="giggle"] .ollie__arm--right { transform: rotate(-28deg) translateY(-8%); }

.ollie[data-state="nod"] .ollie__character,
.ollie[data-playing="nod"] .ollie__character {
    animation: ollie-nod 1.2s cubic-bezier(.22, .61, .36, 1) infinite;
}

.ollie[data-state="nod"] .ollie__eyebrow,
.ollie[data-playing="nod"] .ollie__eyebrow {
    animation: ollie-nod-brows 1.2s ease-in-out infinite;
}

.ollie[data-state="nod"] .ollie__mouth,
.ollie[data-playing="nod"] .ollie__mouth {
    animation: ollie-nod-smile 1.2s ease-in-out infinite;
}

.ollie[data-state="dance"] .ollie__character,
.ollie[data-playing="dance"] .ollie__character {
    animation: ollie-dance 1.55s ease-in-out infinite;
}

.ollie[data-state="dance"] .ollie__arm--left,
.ollie[data-playing="dance"] .ollie__arm--left {
    animation: ollie-dance-arm-left 1.55s ease-in-out infinite;
}

.ollie[data-state="dance"] .ollie__arm--right,
.ollie[data-playing="dance"] .ollie__arm--right {
    animation: ollie-dance-arm-right 1.55s ease-in-out infinite;
}

.ollie[data-state="dance"] .ollie__foot--left,
.ollie[data-playing="dance"] .ollie__foot--left {
    animation: ollie-dance-foot-left 1.55s ease-in-out infinite;
}

.ollie[data-state="dance"] .ollie__foot--right,
.ollie[data-playing="dance"] .ollie__foot--right {
    animation: ollie-dance-foot-right 1.55s ease-in-out infinite;
}

.ollie[data-state="peek"] .ollie__character,
.ollie[data-playing="peek"] .ollie__character {
    animation: ollie-peek 1.5s ease-in-out infinite;
}

.ollie[data-state="peek"] .ollie__arm,
.ollie[data-playing="peek"] .ollie__arm {
    z-index: 7;
}

.ollie[data-state="peek"] .ollie__arm--left,
.ollie[data-playing="peek"] .ollie__arm--left {
    animation: ollie-peek-arm-left 1.5s ease-in-out infinite;
}

.ollie[data-state="peek"] .ollie__arm--right,
.ollie[data-playing="peek"] .ollie__arm--right {
    animation: ollie-peek-arm-right 1.5s ease-in-out infinite;
}

.ollie[data-state="love"] .ollie__character,
.ollie[data-playing="love"] .ollie__character {
    animation: ollie-love 1.35s ease-in-out infinite;
}

.ollie[data-state="love"] .ollie__cheek,
.ollie[data-playing="love"] .ollie__cheek {
    animation: ollie-love-cheeks 1.35s ease-in-out infinite;
}

.ollie[data-state="love"] .ollie__mouth,
.ollie[data-playing="love"] .ollie__mouth {
    animation: ollie-love-smile 1.35s ease-in-out infinite;
}

.ollie[data-state="love"] .ollie__effects,
.ollie[data-playing="love"] .ollie__effects {
    animation: ollie-love-effects 1.35s ease-out infinite;
}

.ollie[data-state="love"] .ollie__effects::before,
.ollie[data-state="love"] .ollie__effects::after,
.ollie[data-playing="love"] .ollie__effects::before,
.ollie[data-playing="love"] .ollie__effects::after {
    width: auto;
    background: none;
    box-shadow: none;
    clip-path: none;
    color: #FF6F9D;
    content: '♥';
    font: 900 calc(var(--ollie-size) * .16) / 1 Nunito, sans-serif;
}

.ollie[data-playing] .ollie__character {
    animation-iteration-count: 1;
}

@keyframes ollie-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2.2%); }
}

@keyframes ollie-idle-walk {
    0%, 60%, 100% { transform: translateX(0) translateY(0); }
    63% { transform: translateX(-8%) translateY(-1%); }
    66% { transform: translateX(-16%) translateY(0); }
    69% { transform: translateX(-24%) translateY(-1%); }
    72% { transform: translateX(-32%) translateY(0); }
    75%, 78% { transform: translateX(-40%) translateY(-1%); }
    81% { transform: translateX(-32%) translateY(0); }
    84% { transform: translateX(-24%) translateY(-1%); }
    87% { transform: translateX(-16%) translateY(0); }
    90% { transform: translateX(-8%) translateY(-1%); }
    93% { transform: translateX(0) translateY(0); }
}

@keyframes ollie-idle-walk-arm-left {
    0%, 60%, 78%, 100% { transform: rotate(-8deg); }
    63%, 69%, 75%, 84%, 90% { transform: rotate(16deg); }
    66%, 72%, 81%, 87%, 93% { transform: rotate(-26deg); }
}

@keyframes ollie-idle-walk-arm-right {
    0%, 60%, 78%, 100% { transform: rotate(8deg); }
    63%, 69%, 75%, 84%, 90% { transform: rotate(26deg); }
    66%, 72%, 81%, 87%, 93% { transform: rotate(-16deg); }
}

@keyframes ollie-idle-walk-foot-left {
    0%, 60%, 78%, 100% { transform: rotate(3deg) translateY(0); }
    63%, 69%, 75%, 84%, 90% { transform: rotate(-7deg) translateY(-16%); }
    66%, 72%, 81%, 87%, 93% { transform: rotate(3deg) translateY(0); }
}

@keyframes ollie-idle-walk-foot-right {
    0%, 60%, 78%, 100% { transform: rotate(-3deg) translateY(0); }
    63%, 69%, 75%, 84%, 90% { transform: rotate(-3deg) translateY(0); }
    66%, 72%, 81%, 87%, 93% { transform: rotate(7deg) translateY(-16%); }
}

@keyframes ollie-idle-ear {
    0%, 58%, 100% { transform: rotate(var(--ollie-ear-angle)); }
    64%, 75%, 84% { transform: rotate(calc(var(--ollie-ear-angle) - 4deg)); }
    69%, 80%, 89% { transform: rotate(calc(var(--ollie-ear-angle) + 5deg)); }
    93% { transform: rotate(calc(var(--ollie-ear-angle) - 2deg)); }
}

@keyframes ollie-idle-smile {
    0%, 58%, 100% { transform: scale(1); }
    66%, 75%, 84%, 93% { transform: scale(1.08, 1.1); }
    69%, 80%, 89% { transform: scale(1.02, .94); }
}

@keyframes ollie-shadow {
    0%, 100% { transform: scale(1); opacity: .2; }
    50% { transform: scale(.92); opacity: .15; }
}

@keyframes ollie-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02, .985); }
}

@keyframes ollie-ear {
    0%, 100% { transform: rotate(var(--ollie-ear-angle)); }
    50% { transform: rotate(calc(var(--ollie-ear-angle) + 3deg)); }
}

@keyframes ollie-blink {
    0%, 100% { transform: translateY(-108%); }
    45%, 58% { transform: translateY(0); }
}

@keyframes ollie-happy {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-4%) rotate(1deg); }
}

@keyframes ollie-excited {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7%) rotate(1deg); }
}

@keyframes ollie-ear-excited {
    from { transform: rotate(calc(var(--ollie-ear-angle) - 5deg)); }
    to { transform: rotate(calc(var(--ollie-ear-angle) + 7deg)); }
}

@keyframes ollie-foot-left {
    0%, 100% { transform: rotate(6deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-12%); }
}

@keyframes ollie-foot-right {
    0%, 100% { transform: rotate(-6deg) translateY(-12%); }
    50% { transform: rotate(2deg) translateY(0); }
}

@keyframes ollie-correct {
    0% { transform: translateY(0) scale(1); }
    15% { transform: translateY(2%) scale(1.08, .9); }
    48% { transform: translateY(-18%) scale(.94, 1.1); }
    72% { transform: translateY(1%) scale(1.07, .93); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes ollie-wrong {
    0%, 100% { transform: translateX(0) rotate(0); }
    22% { transform: translateX(-3%) rotate(-2deg); }
    46% { transform: translateX(3%) rotate(2deg); }
    70% { transform: translateX(-1.5%) rotate(-1deg); }
}

@keyframes ollie-concern-left {
    0%, 100% { transform: rotate(-4deg); }
    35%, 65% { transform: rotate(14deg) translateY(9%); }
}

@keyframes ollie-concern-right {
    0%, 100% { transform: rotate(4deg); }
    35%, 65% { transform: rotate(-14deg) translateY(9%); }
}

@keyframes ollie-mouth-encourage {
    0%, 100% { transform: scale(1); }
    35%, 65% { transform: scale(.88, .82); }
}

@keyframes ollie-thinking {
    0%, 100% { transform: rotate(0) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-2%); }
}

@keyframes ollie-sleepy {
    0%, 100% { transform: translateY(1%) scale(1); }
    50% { transform: translateY(2%) scale(1.015, .99); }
}

@keyframes ollie-surprised {
    0%, 100% { transform: scale(1); }
    38% { transform: translateY(-4%) scale(.94, 1.1); }
    72% { transform: scale(1.03, .98); }
}

@keyframes ollie-wave {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-3%); }
}

@keyframes ollie-wave-arm {
    0%, 10%, 90%, 100% { transform: rotate(-58deg) translate(4%, -24%); }
    22%, 48%, 74% { transform: rotate(-88deg) translate(7%, -30%); }
    35%, 61% { transform: rotate(-48deg) translate(4%, -22%); }
}

@keyframes ollie-jump {
    0%, 100% { transform: translateY(0) scale(1); }
    14% { transform: translateY(2%) scale(1.08, .9); }
    48% { transform: translateY(-21%) scale(.93, 1.11); }
    76% { transform: translateY(1%) scale(1.08, .92); }
}

@keyframes ollie-jump-feet {
    0%, 100% { transform: translateY(0) scale(1); }
    42%, 58% { transform: translateY(-14%) scale(.94, 1.06); }
}

@keyframes ollie-celebrate {
    0%, 100% { transform: translateY(0) scale(1); }
    10%, 56% { transform: translateY(2%) scale(1.07, .91); }
    30%, 76% { transform: translateY(-15%) scale(.94, 1.09); }
    45%, 92% { transform: translateY(0) scale(1.05, .95); }
}

@keyframes ollie-giggle {
    0%, 100% { transform: translateY(0) rotate(0); }
    18% { transform: translateY(-3%) rotate(-2deg); }
    38% { transform: translateY(0) rotate(2deg); }
    58% { transform: translateY(-3%) rotate(-2deg); }
    78% { transform: translateY(0) rotate(2deg); }
}

@keyframes ollie-giggle-mouth {
    0%, 100% { transform: scale(1); }
    22%, 62% { transform: scale(1.14, 1.18); }
    42%, 82% { transform: scale(1.03, .94); }
}

@keyframes ollie-nod {
    0%, 100% { transform: translateY(0) scale(1); }
    28%, 68% { transform: translateY(3%) scale(1.02, .96); }
    46%, 84% { transform: translateY(-2%) scale(.99, 1.03); }
}

@keyframes ollie-nod-brows {
    0%, 100% { transform: translateY(0); }
    28%, 68% { transform: translateY(12%); }
    46%, 84% { transform: translateY(-7%); }
}

@keyframes ollie-nod-smile {
    0%, 100% { transform: scale(1); }
    28%, 68% { transform: scale(1.08, .96); }
}

@keyframes ollie-dance {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0); }
    25% { transform: translateX(-6%) translateY(-4%) rotate(-4deg); }
    50% { transform: translateX(0) translateY(0) rotate(0); }
    75% { transform: translateX(6%) translateY(-4%) rotate(4deg); }
}

@keyframes ollie-dance-arm-left {
    0%, 100% { transform: rotate(-8deg); }
    25%, 75% { transform: rotate(48deg) translateY(-12%); }
    50% { transform: rotate(12deg); }
}

@keyframes ollie-dance-arm-right {
    0%, 100% { transform: rotate(8deg); }
    25%, 75% { transform: rotate(-48deg) translateY(-12%); }
    50% { transform: rotate(-12deg); }
}

@keyframes ollie-dance-foot-left {
    0%, 50%, 100% { transform: rotate(3deg) translateY(0); }
    25% { transform: rotate(-8deg) translateY(-18%); }
}

@keyframes ollie-dance-foot-right {
    0%, 50%, 100% { transform: rotate(-3deg) translateY(0); }
    75% { transform: rotate(8deg) translateY(-18%); }
}

@keyframes ollie-peek {
    0%, 100% { transform: scale(1); }
    24%, 62% { transform: scale(.98, 1.02); }
    78% { transform: scale(1.03, .98); }
}

@keyframes ollie-peek-arm-left {
    0%, 100% { transform: rotate(-8deg); }
    24%, 62% { transform: rotate(103deg) translate(5%, -8%); }
    78% { transform: rotate(80deg) translateY(-5%); }
}

@keyframes ollie-peek-arm-right {
    0%, 100% { transform: rotate(8deg); }
    24%, 62% { transform: rotate(-103deg) translate(-5%, -8%); }
    78% { transform: rotate(-80deg) translateY(-5%); }
}

@keyframes ollie-love {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-3%) scale(1.055); }
    52% { transform: translateY(0) scale(.99); }
    72% { transform: translateY(-2%) scale(1.035); }
}

@keyframes ollie-love-cheeks {
    0%, 100% { transform: scale(1); opacity: .9; }
    35%, 72% { transform: scale(1.2); opacity: 1; }
}

@keyframes ollie-love-smile {
    0%, 100% { transform: scale(1); }
    35%, 72% { transform: scale(1.18, 1.14); }
}

@keyframes ollie-love-effects {
    0%, 100% { opacity: 0; transform: translateY(8%) scale(.7); }
    28%, 72% { opacity: 1; transform: translateY(-5%) scale(1.05); }
}

@keyframes ollie-sparkles {
    0%, 100% { opacity: 0; transform: scale(.5) rotate(-10deg); }
    35%, 72% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}

@keyframes ollie-reduced-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

.ollie[data-reduced-motion="true"],
.ollie[data-reduced-motion="true"] .ollie__character,
.ollie[data-reduced-motion="true"] .ollie__shadow,
.ollie[data-reduced-motion="true"] .ollie__body,
.ollie[data-reduced-motion="true"] .ollie__ear,
.ollie[data-reduced-motion="true"] .ollie__foot,
.ollie[data-reduced-motion="true"] .ollie__arm,
.ollie[data-reduced-motion="true"] .ollie__tuft,
.ollie[data-reduced-motion="true"] .ollie__eyebrow,
.ollie[data-reduced-motion="true"] .ollie__mouth,
.ollie[data-reduced-motion="true"] .ollie__cheek,
.ollie[data-reduced-motion="true"] .ollie__effects {
    animation: none !important;
}

.ollie[data-reduced-motion="true"][data-playing] .ollie__character {
    animation: ollie-reduced-pulse 360ms ease-in-out 1 !important;
}

@media (min-width: 600px) {
    .ollie-nook {
        --ollie-size: clamp(72px, 6vw, 84px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .playground-ollie-stage {
        transition: opacity 100ms linear;
    }

    .ollie:not([data-reduced-motion="false"]),
    .ollie:not([data-reduced-motion="false"]) .ollie__character,
    .ollie:not([data-reduced-motion="false"]) .ollie__shadow,
    .ollie:not([data-reduced-motion="false"]) .ollie__body,
    .ollie:not([data-reduced-motion="false"]) .ollie__ear,
    .ollie:not([data-reduced-motion="false"]) .ollie__foot,
    .ollie:not([data-reduced-motion="false"]) .ollie__arm,
    .ollie:not([data-reduced-motion="false"]) .ollie__tuft,
    .ollie:not([data-reduced-motion="false"]) .ollie__eyebrow,
    .ollie:not([data-reduced-motion="false"]) .ollie__mouth,
    .ollie:not([data-reduced-motion="false"]) .ollie__cheek,
    .ollie:not([data-reduced-motion="false"]) .ollie__effects {
        animation: none !important;
    }

    .ollie:not([data-reduced-motion="false"])[data-playing] .ollie__character {
        animation: ollie-reduced-pulse 360ms ease-in-out 1 !important;
    }

    .ollie:not([data-reduced-motion="false"]) .ollie__pupil,
    .ollie:not([data-reduced-motion="false"]) .ollie__arm,
    .ollie:not([data-reduced-motion="false"]) .ollie__cheek,
    .ollie:not([data-reduced-motion="false"]) .ollie__mouth {
        transition-duration: 0ms;
    }
}