.pmx-typing-scene{position:relative;width:100%;max-width:640px;margin-inline:auto;isolation:isolate;line-height:0}
.pmx-home-brand .pmx-typing-scene img.hero-image{display:block;width:100%;height:auto;margin:0;animation:none!important;transform:none!important}
.pmx-typing-hand{position:absolute;inset:0;pointer-events:none;background-image:var(--typing-image);background-position:center;background-size:100% 100%;background-repeat:no-repeat;transform-origin:46% 50%;-webkit-mask-image:radial-gradient(ellipse 6.6% 3.5% at 47.3% 49.3%,#000 65%,transparent 100%);mask-image:radial-gradient(ellipse 6.6% 3.5% at 47.3% 49.3%,#000 65%,transparent 100%);animation:pmxTypingHands .72s ease-in-out infinite}
.pmx-typing-hand--woman{transform-origin:59% 49%;-webkit-mask-image:radial-gradient(ellipse 6.2% 3.1% at 60.3% 48.7%,#000 65%,transparent 100%);mask-image:radial-gradient(ellipse 6.2% 3.1% at 60.3% 48.7%,#000 65%,transparent 100%);animation-duration:.84s;animation-delay:-.35s}
@keyframes pmxTypingHands{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-1.5px) rotate(-.15deg)}60%{transform:translateY(.5px) rotate(.1deg)}}
@supports not (mask-image:radial-gradient(black,transparent)){.pmx-typing-hand{display:none}}
@media(prefers-reduced-motion:reduce){.pmx-typing-hand{display:none;animation:none}}
/* Canvas deforms only the eyes, smiles and typing hands; the scene stays still. */
.pmx-typing-scene .pmx-typing-hand{display:none!important}
.pmx-typing-scene canvas.pmx-typing-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.pmx-typing-scene.is-animated canvas.pmx-typing-canvas{display:block}
.pmx-home-brand .pmx-typing-scene.is-animated img.hero-image{opacity:0!important}
@media(prefers-reduced-motion:reduce){.pmx-typing-scene.is-animated canvas.pmx-typing-canvas{display:none}.pmx-home-brand .pmx-typing-scene.is-animated img.hero-image{opacity:1!important}}