.ruler{--ruler-color:rgb(235,64,73)}.ruler-bubble{padding:0.5rem 2rem;border-radius:50px;background-color:color-mix(in srgb,var(--ruler-color) 10%,white);border:2px solid var(--ruler-color);color:var(--ruler-color);text-align:center;min-width:150px;font-size:1.2rem;line-height:1;z-index:1;-webkit-user-select:none;user-select:none;cursor:default}.ruler-bubble label{margin-top:0.2rem;line-height:1;font-size:0.8rem;color:inherit}.ruler-line{position:absolute;z-index:0;translate:0 -1px}.ruler{position:absolute;z-index:999;display:grid;align-content:center;justify-content:center;transition:opacity 300ms ease}.ruler.fade{opacity:0.1}.ruler.viewport{position:fixed}.ruler.horizontal{bottom:5%;left:0;right:0}.ruler.horizontal .ruler-line{border-bottom:2px solid var(--ruler-color);top:50%;left:0;right:0}.ruler.horizontal .ruler-line:before,.ruler.horizontal .ruler-line:after{content:"";position:absolute;height:20px;width:0;translate:0 -9px;border-right:2px solid var(--ruler-color)}.ruler.horizontal .ruler-line:before{left:0}.ruler.horizontal .ruler-line:after{right:0}.ruler.vertical{right:-25px;top:0;bottom:0}.ruler.vertical .ruler-bubble{transform:rotate(-90deg)}.ruler.vertical .ruler-line{border-right:2px solid var(--ruler-color);top:0;bottom:0;left:50%}.ruler.vertical .ruler-line:before,.ruler.vertical .ruler-line:after{content:"";position:absolute;width:20px;height:0;translate:-9px 1px;border-bottom:2px solid var(--ruler-color)}.ruler.vertical .ruler-line:before{top:0}.ruler.vertical .ruler-line:after{bottom:0}