.animated-highlight{position:relative;display:inline;z-index:1}.animated-highlight:after{content:"";position:absolute;left:-.15em;right:-.15em;bottom:.05em;height:.6em;z-index:-1;pointer-events:none;background:var(--highlight-color,#ffe45c);opacity:0;transform-origin:left center}.animated-highlight--marker:after{opacity:.7;border-radius:2px 6px 3px 5px}.animated-highlight--marker.animated-highlight--active:after{animation:highlightMarker var(--highlight-duration,.8s) ease-out var(--highlight-delay,0s) forwards}@keyframes highlightMarker{0%{opacity:0;transform:scaleX(0) skewY(-2deg)}50%{opacity:.9}to{opacity:.7;transform:scaleX(1) skewY(-1deg)}}.animated-highlight--pencil:after{height:3px;bottom:-2px;background:var(--highlight-color,#2c2c2c);opacity:.5;border-radius:1px}.animated-highlight--pencil.animated-highlight--active:after{animation:highlightPencil var(--highlight-duration,.8s) ease-out var(--highlight-delay,0s) forwards}@keyframes highlightPencil{0%{opacity:0;transform:scaleX(0)}to{opacity:.5;transform:scaleX(1)}}.animated-highlight--brush:after{height:1em;background:linear-gradient(90deg,transparent,var(--highlight-color,#ffe45c) 10%,var(--highlight-color,#ffe45c) 90%,transparent);opacity:.6;filter:blur(1px);border-radius:8px 3px 5px 2px}.animated-highlight--brush.animated-highlight--active:after{animation:highlightBrush var(--highlight-duration,.8s) ease-out var(--highlight-delay,0s) forwards}@keyframes highlightBrush{0%{opacity:0;transform:scaleX(0) rotate(-2deg)}30%{opacity:.8}to{opacity:.6;transform:scaleX(1) rotate(-1deg)}}