.ppelf-animated-illustration{max-width:540px;width:100%;margin:1.5rem auto;color:var(--ppelf-illustration-color,#118b78);overflow:visible}
.ppelf-animated-illustration svg{display:block;width:100%;height:auto;overflow:visible}
.ppelf-animated-illustration svg :is(path,circle,ellipse,line,polyline){vector-effect:non-scaling-stroke}
.ppelf-animated-illustration.ppelf-anim-draw:not(.is-visible) svg :is(path,circle,ellipse,line,polyline){stroke-dasharray:100;stroke-dashoffset:100}
.ppelf-animated-illustration.ppelf-anim-draw.is-visible svg :is(path,circle,ellipse,line,polyline){animation:ppelf-stroke-draw var(--ppelf-anim-duration,2.5s) ease-in-out var(--ppelf-anim-delay,0s) both;stroke-dasharray:100;stroke-dashoffset:100}
.ppelf-animated-illustration.ppelf-anim-fade:not(.is-visible){opacity:0}
.ppelf-animated-illustration.ppelf-anim-fade.is-visible{animation:ppelf-illustration-fade var(--ppelf-anim-duration,2.5s) ease var(--ppelf-anim-delay,0s) both}
.ppelf-animated-illustration.ppelf-anim-grow:not(.is-visible){opacity:0;transform:scale(.86)}
.ppelf-animated-illustration.ppelf-anim-grow.is-visible{animation:ppelf-illustration-grow var(--ppelf-anim-duration,2.5s) ease-out var(--ppelf-anim-delay,0s) both}
@keyframes ppelf-stroke-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ppelf-illustration-fade{from{opacity:0}to{opacity:1}}
@keyframes ppelf-illustration-grow{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
/* Keep artwork visible in the block editor, even before scroll observers run. */
.editor-styles-wrapper .ppelf-animated-illustration{opacity:1!important;transform:none!important}
.editor-styles-wrapper .ppelf-animated-illustration svg :is(path,circle,ellipse,line,polyline){animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.ppelf-animated-illustration,.ppelf-animated-illustration svg *{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}

.ppelf-svg-generic svg :is(rect,polygon){vector-effect:non-scaling-stroke}
.ppelf-animated-illustration.ppelf-anim-draw:not(.is-visible) svg :is(rect,polygon){stroke-dasharray:100;stroke-dashoffset:100}
.ppelf-animated-illustration.ppelf-anim-draw.is-visible svg :is(rect,polygon){animation:ppelf-stroke-draw var(--ppelf-anim-duration,2.5s) ease-in-out var(--ppelf-anim-delay,0s) both;stroke-dasharray:100;stroke-dashoffset:100}

/* Generic filled-SVG animations (v1.4.0). Layers never alter the source SVG colors. */
.ppelf-svg-generic.ppelf-anim-draw-fill,.ppelf-svg-generic.ppelf-anim-progressive-fill{position:relative}
.ppelf-svg-generic .ppelf-svg-fill-layer,.ppelf-svg-generic .ppelf-svg-outline-layer,.ppelf-svg-generic .ppelf-svg-progress-layer{display:block;width:100%}
.ppelf-svg-generic .ppelf-svg-outline-layer{position:absolute;inset:0;pointer-events:none}
.ppelf-svg-generic.ppelf-anim-draw-fill:not(.is-visible) .ppelf-svg-fill-layer{opacity:0}
.ppelf-svg-generic.ppelf-anim-draw-fill.is-visible .ppelf-svg-fill-layer{animation:ppelf-delayed-fill var(--ppelf-anim-duration) ease var(--ppelf-anim-delay) both}
@keyframes ppelf-delayed-fill{0%,55%{opacity:0}100%{opacity:1}}
.ppelf-svg-generic.ppelf-anim-draw-fill .ppelf-svg-outline-layer svg :is(path,circle,ellipse,line,polyline,polygon,rect){stroke-dasharray:100;stroke-dashoffset:100;fill:none;stroke:currentColor}
.ppelf-svg-generic.ppelf-anim-draw-fill.is-visible .ppelf-svg-outline-layer svg :is(path,circle,ellipse,line,polyline,polygon,rect){animation:ppelf-fill-outline var(--ppelf-anim-duration) ease var(--ppelf-anim-delay) both}
@keyframes ppelf-fill-outline{0%{stroke-dashoffset:100;opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ppelf-svg-generic.ppelf-anim-progressive-fill:not(.is-visible) .ppelf-svg-progress-layer{clip-path:inset(100% 0 0 0)}
.ppelf-svg-generic.ppelf-anim-progressive-fill.ppelf-fill-from-top:not(.is-visible) .ppelf-svg-progress-layer{clip-path:inset(0 0 100% 0)}
.ppelf-svg-generic.ppelf-anim-progressive-fill.ppelf-fill-from-left:not(.is-visible) .ppelf-svg-progress-layer{clip-path:inset(0 100% 0 0)}
.ppelf-svg-generic.ppelf-anim-progressive-fill.ppelf-fill-from-right:not(.is-visible) .ppelf-svg-progress-layer{clip-path:inset(0 0 0 100%)}
.ppelf-svg-generic.ppelf-anim-progressive-fill.is-visible .ppelf-svg-progress-layer{animation:ppelf-fill-bottom var(--ppelf-anim-duration) ease-in-out var(--ppelf-anim-delay) both}
.ppelf-svg-generic.ppelf-anim-progressive-fill.ppelf-fill-from-top.is-visible .ppelf-svg-progress-layer{animation-name:ppelf-fill-top}
.ppelf-svg-generic.ppelf-anim-progressive-fill.ppelf-fill-from-left.is-visible .ppelf-svg-progress-layer{animation-name:ppelf-fill-left}
.ppelf-svg-generic.ppelf-anim-progressive-fill.ppelf-fill-from-right.is-visible .ppelf-svg-progress-layer{animation-name:ppelf-fill-right}
@keyframes ppelf-fill-bottom{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes ppelf-fill-top{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes ppelf-fill-left{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes ppelf-fill-right{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.ppelf-svg-generic .ppelf-svg-fill-layer{opacity:1!important}.ppelf-svg-generic .ppelf-svg-progress-layer{clip-path:none!important}.ppelf-svg-generic .ppelf-svg-outline-layer{display:none!important}}
/* Artwork in defs must remain intact; it controls clips, masks and gradients. */
.ppelf-svg-generic svg defs *{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
/* The tracing pass is outlines only, never a duplicate photograph. */
.ppelf-svg-generic .ppelf-svg-outline-layer svg image{display:none!important}