.comparison {
  --comparison-position: 50%;
  --comparison-line-width: 2px;
  --comparison-thumb-size: 48px;
  --comparison-radius: 12px;
  --comparison-ratio: 16 / 9;
  --comparison-fit: cover;
  --comparison-background: #e7e9ec;
  --comparison-foreground: #202833;
  --comparison-control-background: #fff;
  --comparison-label-background: #fffffff2;
  --comparison-focus: #1960cb;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: var(--comparison-ratio);
  height: var(--comparison-height, auto);
  border-radius: var(--comparison-radius);
  background: var(--comparison-background);
  overflow: hidden;
  direction: ltr;
}
.comparison[data-comparison-theme="dark"] {
  --comparison-foreground: #fff;
  --comparison-control-background: #202833;
  --comparison-label-background: #202833f2;
  --comparison-focus: #9bcbff;
}
@media (prefers-color-scheme: dark) {
  .comparison[data-comparison-theme="auto"] {
    --comparison-foreground: #fff;
    --comparison-control-background: #202833;
    --comparison-label-background: #202833f2;
    --comparison-focus: #9bcbff;
  }
}
.comparison > [data-comparison-before],
.comparison > [data-comparison-after] { position: absolute; inset: 0; overflow: hidden; }
.comparison [data-comparison-before] { clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0); }
.comparison [data-comparison-after] { clip-path: inset(0 0 0 var(--comparison-position)); }
.comparison[data-comparison-axis="vertical"] [data-comparison-before] { clip-path: inset(0 0 calc(100% - var(--comparison-position)) 0); }
.comparison[data-comparison-axis="vertical"] [data-comparison-after] { clip-path: inset(var(--comparison-position) 0 0 0); }
.comparison > [data-comparison-before] img,
.comparison > [data-comparison-after] img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: var(--comparison-fit); object-position: var(--comparison-focal, 50% 50%);
  user-select: none; -webkit-user-drag: none;
}
.comparison > [data-comparison-before] picture,
.comparison > [data-comparison-after] picture { display: contents; }
.comparison[data-comparison-ready] { touch-action: pan-y; }
.comparison[data-comparison-ready][data-comparison-axis="vertical"] { touch-action: pan-x; }
.comparison[data-comparison-ready][data-comparison-drag="false"] { touch-action: auto; }
.comparison [data-comparison-label] {
  position: absolute; top: var(--comparison-label-offset, 16px); left: var(--comparison-label-offset, 16px);
  max-width: calc(100% - 2 * var(--comparison-label-offset, 16px));
  padding: 6px 12px; border-radius: 5px; font: 600 13px/1.5 system-ui, sans-serif;
  color: var(--comparison-foreground); background: var(--comparison-label-background);
  pointer-events: none;
}
.comparison [data-comparison-after] [data-comparison-label]:not([data-comparison-label-position]) { left: auto; right: var(--comparison-label-offset, 16px); }
.comparison[data-comparison-axis="vertical"] [data-comparison-after] [data-comparison-label]:not([data-comparison-label-position]) { top: auto; bottom: var(--comparison-label-offset, 16px); }
.comparison[data-comparison-label-position="bottom"] [data-comparison-label]:not([data-comparison-label-position]) { top: auto; bottom: var(--comparison-label-offset, 16px); }
.comparison[data-comparison-label-position="center"] [data-comparison-label]:not([data-comparison-label-position]) { top: 50%; bottom: auto; translate: 0 -50%; }
.comparison [data-comparison-label-position^="top-"] { top: var(--comparison-label-offset, 16px); bottom: auto; }
.comparison [data-comparison-label-position^="center-"] { top: 50%; bottom: auto; translate: 0 -50%; }
.comparison [data-comparison-label-position^="bottom-"] { top: auto; bottom: var(--comparison-label-offset, 16px); }
.comparison [data-comparison-label-position$="-left"] { left: var(--comparison-label-offset, 16px); right: auto; }
.comparison [data-comparison-label-position$="-center"] { left: 50%; right: auto; translate: -50% 0; }
.comparison [data-comparison-label-position="center-center"] { translate: -50% -50%; }
.comparison [data-comparison-label-position$="-right"] { left: auto; right: var(--comparison-label-offset, 16px); }
.comparison:has([data-comparison-play]:not([hidden])) [data-comparison-label-position="bottom-right"] {
  bottom: max(var(--comparison-label-offset, 16px), 68px);
}
.comparison[data-comparison-labels="hidden"] [data-comparison-label] { display: none; }
.comparison [data-comparison-control] {
  position: absolute; z-index: 4; top: 50%;
  left: var(--comparison-position);
  width: max(44px, var(--comparison-thumb-size)); height: max(44px, var(--comparison-thumb-size)); transform: translate(-50%, -50%);
  color: var(--comparison-foreground); cursor: ew-resize; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.comparison [data-comparison-divider] {
  position: absolute; z-index: 3; inset: 0 auto 0 var(--comparison-position); width: var(--comparison-line-width);
  transform: translateX(-50%); background: var(--comparison-foreground); box-shadow: 0 0 2px #0008; pointer-events: none;
}
.comparison [data-comparison-thumb] {
  box-sizing: border-box; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: var(--comparison-thumb-size); height: var(--comparison-thumb-size);
  border: 1px solid currentColor; border-radius: 50%; background: var(--comparison-control-background);
  line-height: 0; box-shadow: 0 2px 12px #0003;
}
.comparison [data-comparison-thumb] svg { display: block; width: 24px; height: 24px; pointer-events: none; }
.comparison[data-comparison-axis="vertical"] [data-comparison-control] {
  left: 50%;
  top: var(--comparison-position);
  cursor: ns-resize;
}
.comparison[data-comparison-axis="vertical"] [data-comparison-divider] {
  inset: var(--comparison-position) 0 auto; width: auto; height: var(--comparison-line-width); transform: translateY(-50%);
}
.comparison [data-comparison-control]:focus-visible [data-comparison-thumb] {
  outline: 3px solid var(--comparison-focus); outline-offset: 4px;
}
.comparison [data-comparison-instructions] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.comparison [data-comparison-overlay] {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--comparison-overlay-gradient, var(--comparison-overlay-color, rgba(0, 0, 0, .25)));
  opacity: var(--comparison-overlay-opacity, 1);
}
.comparison[data-comparison-overlay-visibility="interaction"] [data-comparison-overlay] { opacity: 0; }
.comparison[data-comparison-overlay-visibility="interaction"]:is(:hover, :focus-within) [data-comparison-overlay] { opacity: var(--comparison-overlay-opacity, 1); }
.comparison [data-comparison-content] {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  justify-content: var(--comparison-content-vertical, flex-end); align-items: var(--comparison-content-horizontal, flex-start);
  padding: var(--comparison-content-padding, 24px); pointer-events: none;
}
.comparison [data-comparison-content] > * { max-width: var(--comparison-content-width, 80%); pointer-events: auto; }
.comparison [data-comparison-play] {
  position: absolute; z-index: 5; bottom: 12px; right: 12px; width: 44px; height: 44px; padding: 10px;
  border: 1px solid currentColor; border-radius: 6px; display: grid; place-items: center;
  color: var(--comparison-foreground); background: var(--comparison-control-background); cursor: pointer;
}
.comparison [data-comparison-play] svg { display: block; width: 20px; height: 20px; pointer-events: none; }
.comparison [data-comparison-play][hidden] { display: none; }
/* Keep both icons in one fixed grid cell: switching display after reload can
   trigger a Firefox scroll adjustment even when the button size is unchanged. */
.comparison [data-comparison-play] > [data-comparison-icon] {
  grid-area: 1 / 1; width: 20px; height: 20px; visibility: hidden; pointer-events: none;
}
.comparison [data-comparison-play][data-comparison-icon="play"] > [data-comparison-icon="play"],
.comparison [data-comparison-play][data-comparison-icon="pause"] > [data-comparison-icon="pause"] { visibility: visible; }
.comparison [data-comparison-play]:focus-visible { outline: 3px solid var(--comparison-focus); outline-offset: 2px; }
@media (min-width: 640px) { .comparison { height: var(--comparison-height-tablet, var(--comparison-height, auto)); } }
@media (min-width: 960px) { .comparison { height: var(--comparison-height-desktop, var(--comparison-height-tablet, var(--comparison-height, auto))); } }
@media (forced-colors: active) { .comparison [data-comparison-thumb], .comparison [data-comparison-play] { border: 2px solid ButtonText; } }