/* RULER */
.ruler{position:fixed;top:0;left:0;right:0;height:30px;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2);display:flex;align-items:stretch;font-family:var(--mono)}
.ruler .r-logo{display:flex;align-items:center;gap:7px;padding:0 14px;font-size:11px;font-weight:700;letter-spacing:.12em;border-right:1px solid var(--line-2);white-space:nowrap}
.ruler .r-logo b{width:13px;height:13px;background:var(--brand);border-radius:3px;display:inline-block}
.ruler .ticks{flex:1;position:relative;overflow:hidden}
.ruler .ticks canvas{position:absolute;inset:0;width:100%;height:100%}
.ruler .r-zoom{display:flex;align-items:center;gap:9px;padding:0 14px;font-size:11px;font-weight:700;border-left:1px solid var(--line-2);color:var(--ink-soft);white-space:nowrap}
.ruler .r-zoom .dot{width:7px;height:7px;border-radius:50%;background:#27c06b;box-shadow:0 0 0 3px #27c06b22}