.photo-comparison {
  --comparison: 50%;
  position: absolute;
  left: 1.439394%;
  top: 12.761506%;
  width: 97.121212%;
  height: 59.623431%;
  overflow: hidden;
  border-radius: 4.21% / 3.16%;
  isolation: isolate;
}
.camera-frame .comparison-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.comparison-before { clip-path: inset(0 calc(100% - var(--comparison)) 0 0); }
.comparison-divider { position: absolute; top: 0; bottom: 0; left: var(--comparison); width: 1px; background: #f2eee5e6; box-shadow: 0 0 3px #0009; pointer-events: none; }
.comparison-handle { position: absolute; top: 50%; left: var(--comparison); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #f2eee5c9; border-radius: 50%; background: #171916e6; color: #f2eee5; box-shadow: 0 2px 7px #0004; pointer-events: none; }
.photo-comparison input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.photo-comparison:focus-within .comparison-handle { outline: 2px solid #f2eee5; outline-offset: 3px; }
.comparison-labels { position: absolute; inset: 0; pointer-events: none; }
.comparison-labels span { position: absolute; top: 50%; transform: translateY(-50%); padding: 4px 4px; border-radius: 5px; background: #171916bf; color: #f2eee5; font-size: 12px; line-height: 16px; white-space: nowrap; }
.comparison-label-regular { right: calc(100% - var(--comparison) + 22px); text-align: right; }
.comparison-label-film { left: calc(var(--comparison) + 22px); text-align: left; }
.app-preview { min-width: 0; }
.comparison-caption { gap: 16px; width: 100%; min-width: 0; }