.fern-reading-progress { display: none; }

@supports (animation-timeline: scroll(root block)) {

@media (prefers-reduced-motion: no-preference) {

.fern-reading-progress {
display: block;
position: fixed; top: 0; left: 0; right: 0;
height: 3px; z-index: 10001; pointer-events: none;
background: color-mix(in srgb, var(--sage) 15%, transparent);
}

.fern-reading-progress-fill {
display: block; height: 100%; background: var(--sage);
transform-origin: left;
animation: fernlight-reading-progress linear both;
animation-timeline: scroll(root block);
}
}
}

@keyframes fernlight-reading-progress {

from { transform: scaleX(0); }

to { transform: scaleX(1); }
}