.highlight-text-fdef1fc0-wrapper .highlight-target,
.highlight-text-fdef1fc0-wrapper a.highlight-target {
    --hl-bg: #ffe066;
    --hl-color-start: inherit;
    --hl-color-end: inherit;
    --hl-duration: 800ms;
    --hl-ease: ease-in-out;
    
    background-color: transparent;
    background-image: linear-gradient(to right, var(--hl-bg) 0%, var(--hl-bg) 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    color: var(--hl-color-start);
    transition: background-size var(--hl-duration) var(--hl-ease), color var(--hl-duration) var(--hl-ease);
    padding: 0 4px;
    border-radius: 2px;
    display: inline !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: none;
}

.highlight-text-fdef1fc0-wrapper.is-active .highlight-target,
.highlight-text-fdef1fc0-wrapper.is-active a.highlight-target {
    background-size: 100% 100%;
    color: var(--hl-color-end);
}

.highlight-text-fdef1fc0-wrapper a.highlight-target:hover {
    color: var(--hl-color-hover, var(--hl-color-end));
}

/* Extra Element Styles */
.highlight-text-fdef1fc0-wrapper .extra-element {
    display: inline-block;
    opacity: 0;
    transition: color var(--ex-duration, 600ms) var(--ex-ease, ease-out) var(--ex-delay, 200ms),
                transform var(--ex-duration, 600ms) var(--ex-ease, ease-out) var(--ex-delay, 200ms),
                opacity var(--ex-duration, 600ms) var(--ex-ease, ease-out) var(--ex-delay, 200ms);
}

/* Base states for different animations */
.ex-anim-fade .highlight-text-fdef1fc0-wrapper .extra-element {
    transform: none;
}

.ex-anim-slide-left .highlight-text-fdef1fc0-wrapper .extra-element {
    transform: translateX(calc(var(--ex-distance, 20px) * -1));
}

.ex-anim-slide-right .highlight-text-fdef1fc0-wrapper .extra-element {
    transform: translateX(var(--ex-distance, 20px));
}

.ex-anim-slide-up .highlight-text-fdef1fc0-wrapper .extra-element {
    transform: translateY(var(--ex-distance, 20px));
}

.ex-anim-slide-down .highlight-text-fdef1fc0-wrapper .extra-element {
    transform: translateY(calc(var(--ex-distance, 20px) * -1));
}

/* Active State */
.highlight-text-fdef1fc0-wrapper.is-active .extra-element {
    opacity: 1;
    transform: translate(0, 0);
}