/* ── ruler + clock ── */
.ruler{position:sticky;top:calc(env(safe-area-inset-top,0px) + 49px);z-index:48;height:40px;border-bottom:1px solid var(--line);overflow:hidden;background:var(--paper)}
.ruler .tk{position:absolute;top:0;width:1px;height:7px;background:var(--tick)}
.ruler .tk.maj{height:13px}
.ruler .num{position:absolute;top:19px;translate:-50% 0;font-family:var(--mono);font-size:10px;color:#9C9C9C;font-variant-numeric:tabular-nums}
.rmark{position:absolute;top:0;bottom:0;left:0;width:1.5px;background:var(--pink);pointer-events:none;opacity:0;transition:opacity .2s;will-change:left}
.rmark b{position:absolute;top:16px;left:5px;background:var(--pink);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rmark.flip b{left:auto;right:5px}
.clock{text-align:center;font-family:var(--mono);font-size:13px;padding-top:24px;font-variant-numeric:tabular-nums;letter-spacing:.02em}