/* The comparison uses one shared 0–60 mm axis at every viewport width. */
.size-ruler{margin:14px 0 8px;border:1px solid #e9ddeb;border-radius:12px;background:linear-gradient(160deg,#fff 45%,#fdf2fb);overflow:hidden;isolation:isolate}
.ruler-stage{position:relative;height:210px;overflow:hidden;--axis-left:16%;--axis-width:74%}
.ruler-axis{position:absolute;left:var(--axis-left);width:var(--axis-width);top:173px;height:32px;border-bottom:2px solid #253347}
.ruler-tick{position:absolute;bottom:0;height:8px;width:1px;background:#8c96a3}.ruler-tick.mid{height:12px}.ruler-tick.major{height:18px;background:#253347;width:1.5px}.ruler-tick span{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;color:#253347}.ruler-unit{position:absolute;right:0;top:177px;color:#65706f;font-size:10px}
.ruler-range{position:absolute;top:169px;height:36px;background:#d946b629;border-left:1px solid #bd329d;border-right:1px solid #bd329d}
.ruler-endpoint{position:absolute;top:144px;height:62px;border-left:1px dashed #bd329d;opacity:.8}.ruler-endpoint:after{content:'';position:absolute;bottom:-3px;left:-4px;width:7px;height:7px;border-radius:50%;background:#bd329d}
.ruler-zero{position:absolute;left:var(--axis-left);top:131px;height:73px;border-left:1px dashed #b1b8c2}
.ruler-locust{position:absolute;bottom:57px;max-width:none;height:auto;transform-origin:50% 80%;pointer-events:none;will-change:transform;z-index:2}
.ruler-shadow{position:absolute;top:149px;height:7px;background:#44312526;border-radius:50%;filter:blur(3px);pointer-events:none}
.ruler-readout{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 13px;background:#f9edf7;border-top:1px solid #ecd9e8;font-size:12px}.ruler-readout strong{color:#922579}.ruler-readout span{font-size:11px;color:#556074}.ruler-caption{font-size:10px;line-height:1.5;color:#667085;margin:0;padding:7px 13px 9px}
@media(prefers-reduced-motion:reduce){.ruler-locust{will-change:auto}}

.ruler-stage{height:auto;aspect-ratio:1.8;min-height:170px}.ruler-axis{top:auto;bottom:5px}.ruler-range{top:auto;bottom:5px}.ruler-endpoint{top:auto;bottom:5px}.ruler-zero{top:auto;bottom:5px}.ruler-shadow{top:auto;bottom:54px}.ruler-unit{top:auto;bottom:20px}
/* Scaling an absolutely positioned insect must never become a scroll anchor. */
.size-ruler,.size-ruler *{overflow-anchor:none}

.ruler-locust[hidden]{display:none}.ruler-adult{mix-blend-mode:multiply}.adult-photo-credit{font-size:10px;color:var(--muted)}

.size-ruler[data-empty=true] :is(.ruler-locust,.ruler-shadow,.ruler-range,.ruler-endpoint,.ruler-zero,.ruler-readout>span){visibility:hidden}
.size-ruler[data-empty=true] .ruler-stage{aspect-ratio:auto;min-height:70px;height:70px}