.scroll-ruler{--scroll-ruler-pitch:13px;--scroll-ruler-width:1.5px;--scroll-ruler-minor:7px;--scroll-ruler-major:14px;--scroll-ruler-opacity:.6;--scroll-ruler-ramp:linear-gradient(90deg,#fe9a28 0%,#ff4a3c 60%,#f0225e 100%);pointer-events:none;width:100%;height:16px;position:relative}.scroll-ruler--fixed{z-index:60;width:auto;position:fixed;top:0;left:0;right:0}.scroll-ruler__canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.scroll-ruler:before,.scroll-ruler:after{content:"";background:var(--scroll-ruler-ramp);opacity:var(--scroll-ruler-opacity);position:absolute;left:0;right:0}.scroll-ruler:before{height:var(--scroll-ruler-minor);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--scroll-ruler-width),transparent var(--scroll-ruler-width)var(--scroll-ruler-pitch));-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--scroll-ruler-width),transparent var(--scroll-ruler-width)var(--scroll-ruler-pitch));mask-image:repeating-linear-gradient(90deg,#000 0 var(--scroll-ruler-width),transparent var(--scroll-ruler-width)var(--scroll-ruler-pitch));top:0}.scroll-ruler:after{top:var(--scroll-ruler-minor);height:calc(var(--scroll-ruler-major) - var(--scroll-ruler-minor));-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--scroll-ruler-width),transparent var(--scroll-ruler-width)calc(var(--scroll-ruler-pitch)*5));-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--scroll-ruler-width),transparent var(--scroll-ruler-width)calc(var(--scroll-ruler-pitch)*5));mask-image:repeating-linear-gradient(90deg,#000 0 var(--scroll-ruler-width),transparent var(--scroll-ruler-width)calc(var(--scroll-ruler-pitch)*5))}.scroll-ruler--live:before,.scroll-ruler--live:after{content:none}