.ruler-x,.ruler-y,.ruler-corner{right:auto!important;bottom:auto!important;box-sizing:border-box;overflow:visible;pointer-events:auto;user-select:none;z-index:8;color:#365260;background:rgba(251,253,253,.96);border:1px solid #b9cbd0;box-shadow:0 3px 10px rgba(18,52,62,.08);font-variant-numeric:tabular-nums}
.ruler-x{cursor:crosshair;border-radius:6px 6px 2px 2px}
.ruler-y{cursor:crosshair;border-radius:6px 2px 2px 6px}
.ruler-corner{display:grid;place-items:center;border-radius:6px 2px 2px 2px;background:linear-gradient(145deg,#edf8f7,#d9efec);color:#08776f;font-size:7px;font-weight:950;letter-spacing:.08em;pointer-events:auto;cursor:pointer}
.ruler-corner:hover,.ruler-corner:focus-visible{background:linear-gradient(145deg,#d9f4f1,#bfe8e3);box-shadow:0 0 0 2px rgba(10,145,136,.18);outline:0}
.ruler-tick{position:absolute;display:block;background:#6f8a92;pointer-events:none}
.ruler-x .ruler-tick{left:var(--ruler-position);bottom:0;width:1px;height:5px}
.ruler-x .ruler-tick.major{height:10px;background:#1e5661}
.ruler-y .ruler-tick{top:var(--ruler-position);right:0;width:5px;height:1px}
.ruler-y .ruler-tick.major{width:10px;background:#1e5661}
.ruler-tick b{position:absolute;color:#365260;font:800 7px/1 Inter,"Segoe UI",sans-serif;white-space:nowrap;letter-spacing:-.02em}
.ruler-x .ruler-tick b{left:3px;top:-10px;transform:translateX(-2px)}
.ruler-y .ruler-tick b{right:12px;top:2px;transform:translateY(-2px);writing-mode:vertical-rl;text-orientation:mixed}
.ruler-x:hover,.ruler-y:hover{border-color:#0a9188;background:#fff;box-shadow:0 0 0 2px rgba(10,145,136,.1),0 4px 12px rgba(18,52,62,.1)}
.app-shell.preview-mode .ruler-x,.app-shell.preview-mode .ruler-y,.app-shell.preview-mode .ruler-corner{display:none!important}
@media(max-width:620px){.ruler-tick b{font-size:6px}.ruler-x,.ruler-y,.ruler-corner{opacity:.92}}