/* Small accents that move only while their heading is visible. */
.punctuation-mark{display:inline-block;transform-origin:50% 80%;vertical-align:baseline}
.punctuation-mark.punctuation-visible.punctuation-dot{animation:punctuation-dot-arrive .7s cubic-bezier(.22,1,.36,1) both,punctuation-dot-breathe 4.6s ease-in-out .85s infinite}
.punctuation-mark.punctuation-visible.punctuation-question{animation:punctuation-question-arrive .8s cubic-bezier(.22,1,.36,1) both,punctuation-question-sway 5.2s ease-in-out 1s infinite}
@keyframes punctuation-dot-arrive{0%{transform:translateY(-.16em) scale(.65)}55%{transform:translateY(.025em) scale(1.12,.88)}78%{transform:translateY(-.035em) scale(.97,1.03)}100%{transform:none}}
@keyframes punctuation-dot-breathe{0%,40%,100%{transform:translateY(0) scale(1)}52%{transform:translateY(-.055em) scale(1.035)}65%{transform:translateY(0) scale(1)}}
@keyframes punctuation-question-arrive{0%{transform:translateY(.09em) rotate(-13deg) scale(.9)}65%{transform:translateY(-.02em) rotate(5deg)}100%{transform:none}}
@keyframes punctuation-question-sway{0%,35%,100%{transform:rotate(0)}48%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}72%{transform:rotate(0)}}
@media(max-width:700px){@keyframes punctuation-dot-breathe{0%,40%,100%{transform:translateY(0)}52%{transform:translateY(-.035em)}65%{transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){.punctuation-mark.punctuation-visible{animation:none!important;transform:none!important}}