:root {
    --marker-heading-color-dark: #f4f8fb;
    --marker-heading-color-light: #18212a;
    --marker-brush-image-dark-custom: var(--marker-brush-image);
    --marker-brush-image-light-custom: var(--marker-brush-image);
    --marker-highlight-height: 0.88em;
    --marker-highlight-footer-height: 0.82em;
}

html[data-theme="dark"] {
    --marker-heading-color-current: var(--marker-heading-color-dark);
    --marker-brush-active-image: var(--marker-brush-image-dark-custom);
}

html[data-theme="light"] {
    --marker-heading-color-current: var(--marker-heading-color-light);
    --marker-brush-active-image: var(--marker-brush-image-light-custom);
}

h2 .marker-highlight {
    color: var(--marker-heading-color-current, inherit);
}

.marker-highlight {
    background-image: var(--marker-brush-active-image, var(--marker-brush-image));
    background-size: var(--marker-highlight-fill, 100%) var(--marker-highlight-height);
}

.site-footer__intro .marker-highlight {
    background-size: var(--marker-highlight-fill, 100%) var(--marker-highlight-footer-height);
}

body.marker-animations-enabled h2 .marker-highlight[data-marker-animate] {
    --marker-highlight-fill: 0%;
    transition: background-size 720ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}

body.marker-animations-enabled h2 .marker-highlight[data-marker-animate].is-marker-visible {
    --marker-highlight-fill: 100%;
}

@media (max-width: 959px) {
    :root {
        --marker-highlight-height: 1.05em;
    }
}

@media (max-width: 719px) {
    :root {
        --marker-highlight-height: 1.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.marker-animations-enabled h2 .marker-highlight[data-marker-animate] {
        --marker-highlight-fill: 100%;
        transition: none;
    }
}