/* One comparison, one control row. Pose is always left of the divider. */
.measurement{--split:50%;margin:22px 0;color:inherit}
.measurement-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.measurement-species{display:flex;gap:2px;padding:2px;border:0;border-radius:999px;background:var(--control-tonal,var(--soft))}
.measurement button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 13px/20px var(--font);cursor:pointer;transition:var(--control-transition)}
.measurement-species button[aria-pressed=true]{background:var(--button-bg);color:var(--button-fg)}
.measurement-species button:not([aria-pressed=true]):hover{background:var(--control-hover)}
.measurement .measurement-play{min-width:96px;background:var(--control-tonal,var(--soft))}
.measurement .measurement-play:hover{background:var(--control-hover)}
.measurement button:active{filter:brightness(.9)}
.measurement button:focus-visible{outline:2px solid var(--ui-focus,var(--control-focus));outline-offset:3px}
.measurement-stage{position:relative;max-width:320px;aspect-ratio:1;margin:auto;overflow:hidden;border-radius:12px;background:#000}
.measurement-stage canvas{display:block;width:100%;height:100%}
.measurement-stage [hidden]{display:none}
.measurement-fallback{width:100%;height:100%;object-fit:contain}
.measurement-label{position:absolute;inset:0;pointer-events:none;color:#fff;font:500 12px/18px var(--font)}
.measurement-label--pose{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.measurement-label--footage{clip-path:inset(0 0 0 var(--split))}
.measurement-label>span{position:absolute;top:10px;white-space:nowrap;background:#101611d9;padding:5px 8px;border-radius:6px}
.measurement-label--pose>span{left:10px}
.measurement-label--footage>span{right:10px}
.measurement-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;transform:translateX(-1px);background:#e7eee5;pointer-events:none}
.measurement-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e7eee5;color:#172b1b}
.measurement-wipe{position:absolute;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y}
.measurement-stage:focus-within{outline:2px solid var(--ui-focus,var(--control-focus));outline-offset:3px}
.measurement-status{margin:0;font:400 12px/1.5 var(--font);color:var(--muted)}
.measurement-status:not(:empty){margin-top:8px}
.measurement:not(.is-ready) :is(.measurement-label,.measurement-divider,.measurement-wipe){visibility:hidden}
@media(max-width:420px){.measurement-toolbar{gap:8px}.measurement-stage{max-width:100%}}
@media(prefers-reduced-motion:reduce){.measurement button{transition:none}}
html[data-motion=reduce] .measurement button{transition:none}