.stepframe-media-loop{aspect-ratio:4/3;border-radius:var(--radius-sm);background:var(--color-surface);width:100%;position:relative;overflow:hidden}.stepframe-media-loop__poster{object-fit:cover;width:100%;height:100%;display:block}.stepframe-media-loop__video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.stepframe-media-loop__video--buffer{opacity:0}.stepframe-media-loop__caption{inset-inline:0;padding:var(--space-2) var(--space-3);font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted-text);background:color-mix(in srgb, var(--color-bg) 70%, transparent);margin:0;position:absolute;bottom:0}.stepframe-hero-compare{aspect-ratio:4/3;width:min(var(--width-wide), calc((100svh - var(--space-9)) * 4 / 3));touch-action:none;cursor:ew-resize;max-width:100%;margin-inline:auto;position:relative}.stepframe-hero-compare__layer{position:absolute;inset:0}.stepframe-hero-compare .stepframe-media-loop{aspect-ratio:auto;width:100%;height:100%}.stepframe-hero-compare__handle{width:var(--border-width-thick);background:var(--color-accent-bright);cursor:ew-resize;position:absolute;top:0;bottom:0;transform:translate(-50%)}.stepframe-hero-compare__handle:focus-visible{outline:var(--border-width-thick) solid var(--color-accent);outline-offset:var(--focus-offset)}.stepframe-hero-compare__handle-grip{width:var(--space-3);height:var(--space-3);border-radius:var(--radius-full);background:var(--color-accent-bright);box-shadow:var(--shadow-accent);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stepframe-hero-compare__label{bottom:var(--space-2);padding:var(--space-1) var(--space-2);font-family:var(--font-ui);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text);background:color-mix(in srgb, var(--color-bg) 70%, transparent);pointer-events:none;position:absolute}.stepframe-hero-compare__label--before{left:var(--space-2)}.stepframe-hero-compare__label--after{right:var(--space-2)}.stepframe-scan-sweep{border-radius:var(--radius-sm);background:var(--color-surface);position:relative;overflow:hidden}.stepframe-scan-sweep__sheet{width:100%;display:block}.stepframe-scan-sweep__bar{background:var(--color-accent-bright);height:3px;box-shadow:var(--shadow-accent);position:absolute;left:0;right:0}.stepframe-fiducial-example{gap:var(--space-2);padding:var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);margin:0;display:grid}.stepframe-fiducial-example__image{border-radius:var(--radius-sm);width:100%;display:block}.stepframe-fiducial-example__name{font-family:var(--font-display);font-size:var(--text-sm);color:var(--color-text);margin:0}.stepframe-fiducial-example__caption{font-family:var(--font-body);font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-text-muted-text);margin:0}.stepframe-arrow{width:var(--space-6);height:var(--space-6);color:var(--color-accent);flex-shrink:0}.stepframe-arrow--down{transform:rotate(90deg)}
