/* Writer-chosen emphasis (js/key-fx.js). */
.carousel-card mark {
    background: none;
    color: inherit;
}
.fx-card {
    position: relative;
}
.fx-card > :not(.fx-layer) {
    position: relative;
    z-index: 1;
}
.fx-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.fx-hl {
    position: absolute;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}
/* The sentence the writer puts forward stays bold once it has arrived. */
.fx-arrive {
    font-weight: 650;
    color: var(--fg);
}
.fx-w {
    display: inline-block;
    will-change: transform;
}
.fx-waiting .fx-w {
    visibility: hidden;
}
.fx-cursor {
    position: absolute;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
    transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: reduce) {
    .fx-waiting .fx-w {
        visibility: visible;
    }
    .fx-cursor {
        display: none;
    }
}
/* Inline blocks do not inherit the link underline: draw it per word. */
.prose a:has(.fx-w) {
    text-decoration: none;
}
.prose a .fx-w {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
}