.zoom-ruler{position:absolute;z-index:12;right:28px;top:50%;transform:translateY(-50%);width:112px;height:clamp(220px,40vh,360px);color:#171717;--zoom:0;user-select:none}
.zoom-ticks{position:absolute;inset:0 0 0 auto;width:32px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;pointer-events:none}
.zoom-ticks i{display:block;width:var(--reach,9px);height:1px;background:currentColor;opacity:.25;transition:width 180ms ease,opacity 180ms ease}
.zoom-ruler>span{position:absolute;right:42px;font-size:11px;font-weight:400;line-height:1;white-space:nowrap;opacity:0;transition:opacity 180ms ease;pointer-events:none}
.zoom-max{top:0;transform:translateY(-50%)}.zoom-mid{top:50%;transform:translateY(-50%)}.zoom-min{bottom:0;transform:translateY(50%)}
#zoom-range{position:absolute;inset:-8px -10px;width:calc(100% + 20px);height:calc(100% + 16px);margin:0;writing-mode:vertical-lr;direction:rtl;opacity:0;cursor:ns-resize;touch-action:none}
.zoom-ruler:has(input:focus-visible){outline:1px solid #8885;outline-offset:12px;border-radius:2px}
[data-theme="dark"] .zoom-ruler{color:#f2f2f2}
#experience.is-loading .zoom-ruler{visibility:hidden}
@media(max-width:1024px),(hover:none) and (pointer:coarse){.zoom-ruler{display:none}}
@media(prefers-reduced-motion:reduce){.zoom-ticks i,.zoom-ruler>span{transition:none}}