.faqIllustration { display: block; width: min(300px, 78%); margin: 0 auto 1.6rem; overflow: visible; color: var(--colorInk); }
.faqIllustration .bubble { fill: var(--colorBg); stroke: currentColor; stroke-width: 6; stroke-linejoin: round; }
.faqIllustration .mark { fill: currentColor; font-size: 46px; font-weight: 700; transform-box: fill-box; transform-origin: center bottom; animation: wobble calc(var(--loop) * 1.5) ease-in-out calc(var(--step) * 12) infinite; }
.faqIllustration .dot { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: dotBounce var(--loop) ease-in-out infinite; }
.faqIllustration .dotTwo { animation-delay: calc(var(--loop) * .12); }
.faqIllustration .dotThree { animation-delay: calc(var(--loop) * .24); }
.faqIllustration .sparkle { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: twinkle var(--loop) ease-in-out infinite; }
.faqIllustration .sparkleLate { animation-delay: calc(var(--loop) / 2); }
.bubbleQuestion { transform-box: fill-box; transform-origin: left bottom; animation: bubbleIn var(--dur) cubic-bezier(.34, 1.56, .64, 1) var(--step) backwards, float calc(var(--loop) * 1.5) ease-in-out var(--dur) infinite; }
.bubbleAnswer { transform-box: fill-box; transform-origin: right bottom; animation: bubbleIn var(--dur) cubic-bezier(.34, 1.56, .64, 1) calc(var(--step) * 6) backwards, float calc(var(--loop) * 1.5) ease-in-out calc(var(--loop) * .75) infinite reverse; }
@keyframes bubbleIn { from { opacity: 0; transform: scale(.4); } }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }