.ruler{position:relative;height:96px}.ruler-line{position:absolute;top:48px;left:0;right:0;height:1px;background:var(--ink)}.ruler-tick{position:absolute;top:44px;width:1px;height:8px;background:var(--ink-3);transform:translateX(-50%)}.ruler-tick.ruler-major{top:40px;height:16px;background:var(--ink)}.ruler-label{position:absolute;top:66px;transform:translateX(-50%);font:400 11px/1 var(--mono,var(--font-mono));color:var(--ink-3);white-space:nowrap}.ruler-label.ruler-label-first{transform:none}.ruler-label.ruler-label-last{transform:translateX(-100%)}.ruler-label.ruler-label-under{display:none}.ruler-day{position:absolute;top:66px;transform:translateX(-50%);font:500 11px/1 var(--mono,var(--font-mono));color:var(--ink);white-space:nowrap}.ruler-day-a{left:var(--a)}.ruler-day-b{left:var(--b)}.ruler-day-a.ruler-day-apart{transform:translateX(-100%)}.ruler-day-b.ruler-day-apart{transform:none}.ruler-lead{position:absolute;width:1px;background:var(--ink)}.ruler-lead-a{left:var(--a);top:0;height:36px}.ruler-lead-b{left:var(--b);top:60px;bottom:0}.ruler-dates .ruler-lead-b{top:82px}.ruler-bare .ruler-lead{display:none}.ruler-range{top:4px;right:0}.ruler-gap,.ruler-range{position:absolute;font:400 11px/1 var(--mono,var(--font-mono));color:var(--ink-3);white-space:nowrap}.ruler-gap{top:18px;left:var(--mid);transform:translateX(-50%)}.ruler-stamp{position:absolute;top:48px;z-index:2;transform:translate(-50%,-50%)}.ruler-a{left:var(--a)}.ruler-b{left:var(--b)}.ruler-played{top:47px;height:3px;background:var(--ink);transform-origin:left center}.ruler-head,.ruler-played{position:absolute;left:var(--a);width:calc(var(--b) - var(--a))}.ruler-head{top:44px;height:8px;pointer-events:none}.ruler-head:after{content:"";position:absolute;top:0;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--ink)}@media screen and (prefers-reduced-motion:no-preference){.ruler-played{animation:ruler-played 3.4s var(--ease,cubic-bezier(.2,.7,.1,1)) 1s both}.ruler-head{animation:ruler-head 3.4s var(--ease,cubic-bezier(.2,.7,.1,1)) 1s both}}@keyframes ruler-played{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes ruler-head{0%{transform:translateX(-100%)}to{transform:none}}@media (max-width:360px){.ruler-dates .ruler-gap,.ruler-label{display:none}}@media (max-width:720px){.ruler{height:104px}.ruler-label.ruler-label-odd,.ruler-label.ruler-label-under-narrow,.ruler-range{display:none}.ruler-day-a.ruler-day-apart-narrow{transform:translateX(-100%)}.ruler-day-b.ruler-day-apart-narrow{transform:none}}