.ruler .ticks{position:relative}
.r-fill{position:absolute;top:0;bottom:0;left:0;width:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(240,83,28,.09),rgba(240,83,28,.19));box-shadow:inset -2px 0 0 var(--brand);transition:width .08s linear,background .45s ease,box-shadow .45s ease}
.r-fill.done{background:linear-gradient(90deg,rgba(39,192,107,.10),rgba(39,192,107,.22));box-shadow:inset -2px 0 0 var(--grn)}
.r-pct{position:absolute;top:50%;left:4px;transform:translateY(-50%);z-index:3;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--brand);padding:2px 6px;border-radius:5px;white-space:nowrap;box-shadow:0 3px 8px -3px rgba(240,83,28,.6);pointer-events:none;transition:background .45s ease,left .08s linear}
.r-pct.done{background:var(--grn);box-shadow:0 3px 8px -3px rgba(39,192,107,.6);animation:rpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes rpop{0%,100%{transform:translateY(-50%) scale(1)}45%{transform:translateY(-50%) scale(1.16)}}
@media(prefers-reduced-motion:reduce){.r-fill,.r-pct{transition:none}.r-pct.done{animation:none}}