.pen{position:relative;display:inline-block}.pen-mark{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:var(--primary);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:0}.pen[data-mark=underline] .pen-mark{left:-.06em;bottom:-.3em;width:calc(100% + .12em);height:.36em;stroke-width:5;transition:translate .2s var(--ease-out)}.pen[data-mark=circle]{margin-inline:.14em}.pen[data-mark=circle] .pen-mark{inset:-.2em -.38em -.24em -.36em;rotate:-2deg;stroke-width:3}.pen[data-mark=arrow]{font-size:.8125rem;font-style:italic;line-height:1.25;color:var(--muted-foreground);rotate:-4deg;padding-left:1.4em}.pen[data-mark=arrow] .pen-mark{left:-1.1em;bottom:.55em;width:2.6em;height:2.3em;stroke-width:2.25}.pen[data-mark=bridge]{font-size:.75rem;font-style:italic;line-height:1.2;text-align:center;color:var(--muted-foreground);padding:0 .25em 1.9em}.pen[data-mark=bridge] .pen-mark{left:-.35em;bottom:.1em;width:calc(100% + .7em);height:1.4em;stroke-width:2.25}@media (max-width:639px){.pen[data-mark=bridge]{display:block;padding-bottom:0}.pen[data-mark=bridge] .pen-mark{display:none}}@media (hover:hover) and (pointer:fine){.pen[data-mark=underline]:hover .pen-mark{translate:0 .08em}}@media (prefers-reduced-motion:no-preference){[data-enter] .pen[data-draw=load] path{animation:pen-draw 1.1s cubic-bezier(.45,0,.25,1) .4s both}.pen[data-state=armed] path{stroke-dashoffset:1}.pen[data-state=drawn] path{animation:pen-draw .9s cubic-bezier(.45,0,.25,1) .1s both}}@keyframes pen-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}