@layer components{.handwriting{position:relative}.handwriting__read{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.handwriting__char{animation:handwriting-ink var(--duration-fast) var(--ease-out) calc(var(--handwriting-start) + var(--handwriting-index)*var(--type-step)) both;font-weight:400}.handwriting--caret .handwriting__char{position:relative}.handwriting--caret .handwriting__char:after{content:"";opacity:0;width:2px;animation:handwriting-caret var(--type-step) steps(1) calc(var(--handwriting-start) + var(--handwriting-index)*var(--type-step));background:currentColor;position:absolute;top:.15em;bottom:.1em;right:-.08em}.handwriting--caret .handwriting__char:last-child:after{animation:handwriting-caret-blink calc(var(--duration-slow)*2) steps(1) calc(var(--handwriting-start) + var(--handwriting-index)*var(--type-step)) 3}@media (prefers-reduced-motion:reduce){.handwriting--caret .handwriting__char:after{display:none}}@keyframes handwriting-caret{0%,to{opacity:1}}@keyframes handwriting-caret-blink{0%{opacity:1}50%{opacity:0}}@keyframes handwriting-ink{0%{opacity:0;transform:translateY(-.15em)}to{opacity:1;transform:none}}}