*{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;height:200vh;background:#fad8d1}.track{width:40vmin;aspect-ratio:1 / 1;position:fixed;top:50%;left:50%;translate:-50% -50%}label{position:fixed;inset:0}.runner{height:100%;aspect-ratio:38 / 1;position:absolute;left:0;top:0;z-index:-1;animation:track both linear;animation-timeline:scroll(root);opacity:.5;filter:saturate(.5)}:root:has(#stepper:checked) .runner{animation:track both steps(37);animation-timeline:scroll(root)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes track{to{translate:calc(-100% + 40vmin) 0}}img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;max-width:100%;-o-object-position:0 0;object-position:0 0;animation:stop-motion both steps(37);animation-timeline:scroll(root)}@keyframes stop-motion{0%{-o-object-position:0 0;object-position:0 0}to{-o-object-position:100% 0;object-position:100% 0}}