/* Automotive slider – no labels, no frameworks, no trackers. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background:transparent; }
.comparison {
  --split:75%;
  width:100%; aspect-ratio:2048/1365;
  position:relative; isolation:isolate; overflow:hidden;
  background:#101115; cursor:ew-resize; touch-action:pan-y;
  -webkit-user-select:none; user-select:none; outline:none;
}
.comparison:focus-visible {outline:3px solid #f2b23b; outline-offset:-3px;}
.comparison img {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  -webkit-user-drag:none; pointer-events:none; user-select:none;
}
.comparison .original {z-index:1;}
.comparison .edited {z-index:2;clip-path:inset(0 calc(100% - var(--split)) 0 0);}
.comparison .divider {
  position:absolute;z-index:3;left:var(--split);top:0;bottom:0;
  width:2px;transform:translateX(-50%);pointer-events:none;
  background:#fff;box-shadow:0 0 9px rgba(0,0,0,.65);
}
.comparison .grip {
  position:absolute;z-index:4;top:50%;left:var(--split);
  transform:translate(-50%,-50%);width:44px;height:44px;
  border:2px solid #fff;border-radius:100%;
  background:rgba(13,17,24,.55);box-shadow:0 1px 10px rgba(0,0,0,.42);
  pointer-events:none;display:grid;place-items:center;
}
.comparison .grip svg {stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:500px){.comparison .grip{width:38px;height:38px}.comparison .grip svg{width:27px;height:18px}}
@media (prefers-reduced-motion: no-preference) {.comparison .divider,.comparison .grip {transition:left 60ms linear;}}
/* One standalone embed: fit the whole landscape image into the iframe without inner scrolling.
   Keep the iframe itself approximately 2048:1365 to avoid outer empty space. */
html.embed,html.embed body {width:100%;height:100%;overflow:hidden;}
.embed body {display:grid;place-items:center;}
.embed .comparison {
  width:min(100vw, 150.03663dvh);
  height:min(66.65039vw, 100dvh);
  aspect-ratio:2048/1365;
  flex:none;
}
/* Root index: true native responsive 1 + 6 layout; it is a full webpage, not a sized iframe. */
.gallery {width:min(100%,1200px);margin:0 auto;padding:0 12px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.gallery>.comparison:first-child {grid-column:1 / -1;}
@media (max-width:650px) {.gallery{grid-template-columns:1fr;padding:0 0 8px;gap:8px}.gallery>.comparison:first-child{grid-column:auto}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
