/* Structural rules shared by the four direction studies. Each page skins the rest. */
.v-stage{position:relative;aspect-ratio:1196/835;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.v-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.v-top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split,50%))}
.v-handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.v-handle::after{content:"\2194";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;color:#1b1b1b;display:grid;place-items:center;font:500 16px/1 system-ui,sans-serif;box-shadow:0 1px 8px rgba(0,0,0,.35)}
.v-tag{position:absolute;top:14px;pointer-events:none}
.v-tag-l{left:14px}
.v-tag-r{right:14px}
.v-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.v-controls input[type=range]{flex:1 1 160px;min-width:140px}
.v-controls button{cursor:pointer;font:inherit}
img{max-width:100%}