.compare-frame{display:grid;gap:.75rem}.compare-pane{border:1px solid var(--ink);position:relative}.compare-pane img{background:#000;width:100%}.compare-label{background:rgba(23,26,32,.8);color:var(--paper);font-family:var(--mono);font-size:.7rem;left:.5rem;line-height:1.3;max-width:calc(50% - 1rem);padding:.25rem .45rem;pointer-events:none;position:absolute;top:.5rem}.compare-frame.is-live{--pos:50%;border:1px solid var(--ink);cursor:ew-resize;display:block;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}.is-live .compare-pane{border:0}.is-live .compare-pane--after{clip-path:inset(0 0 0 var(--pos));inset:0;position:absolute}.is-live .compare-pane--after .compare-label{left:auto;right:.5rem;text-align:right}.compare-divider{background:var(--paper);bottom:0;box-shadow:0 0 0 1px rgba(23,26,32,.45);left:var(--pos);margin-left:-1px;pointer-events:none;position:absolute;top:0;width:2px}.compare-handle{align-items:center;background:var(--paper);border:1px solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--ink);color:var(--ink);cursor:ew-resize;display:flex;font-family:var(--mono);font-size:.95rem;height:44px;justify-content:center;left:var(--pos);line-height:1;position:absolute;top:50%;transform:translate(-50%,-50%);width:44px}.compare-handle::before{content:"\2039\00a0\203a"}.compare-handle:focus-visible{outline:2px solid var(--paper);outline-offset:2px}.compare-frame.is-dragging,.compare-frame.is-dragging .compare-handle{cursor:grabbing}