/* Desktop greeting and a rocking square. Existing typography and spacing stay in place. */
@media (min-width:1001px) and (hover:hover) and (pointer:fine) {
 .hero-title .hand.hand-brush{scale:1;transform-origin:50% 60%;transition:scale .42s cubic-bezier(.2,.65,.25,1)}
 .hero-title .hand.hand-brush:hover{scale:1.045}
 .hero-title h1>.accent{position:relative;display:inline-block;color:transparent}
 .hero-title h1>.accent::after{content:"";position:absolute;width:.12em;height:.12em;left:50%;bottom:.035em;margin-left:-.06em;background:var(--red,#f33449);transform-origin:50% 100%;transform:translate(0,0) rotate(0deg);transition:transform .18s ease-out}
 .hero-title h1>.accent:hover::after{animation:oskin-dot-rock .28s ease-in-out infinite}
}
@keyframes oskin-dot-rock {
 0%,100%{transform:translate(-.012em,-.016em) rotate(-18deg)}
 25%,75%{transform:translate(0,0) rotate(0deg)}
 50%{transform:translate(.012em,-.016em) rotate(18deg)}
}
@media (prefers-reduced-motion:reduce) {
 .hero-title .hand.hand-brush{transition:none;scale:1}
 .hero-title h1>.accent:hover::after{animation:none}
}