.thunder-comparison{margin:32px 0 0;width:100%;letter-spacing:normal}
.thunder-comparison + .thunder-comparison{margin-top:80px}
.thunder-comparison .compare{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;background:var(--paper,#ecebe4)}
.thunder-comparison .compare::before{content:"";display:block;padding-top:calc((100% - 32px)*var(--image-ratio,.57456) + 32px)}
.thunder-comparison .screen{position:absolute;inset:0;background:var(--paper,#ecebe4)}
.thunder-comparison .before{clip-path:inset(0 calc(100% - var(--position) + 3px) 0 0)}
.thunder-comparison .after{clip-path:inset(0 0 0 calc(var(--position) + 3px))}
.thunder-comparison .screen img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;object-position:center;border-radius:8px;user-select:none;-webkit-user-drag:none;pointer-events:none}
.thunder-comparison .side-label{position:absolute;top:16px;z-index:2;display:flex;gap:9px;align-items:center;font-size:11px;line-height:1.2;color:#363930;pointer-events:none}
.thunder-comparison .side-label span{color:#686b62;padding-left:9px;border-left:1px solid #a5a89e}
.thunder-comparison .left{left:16px}.thunder-comparison .right{right:16px}
.thunder-comparison .divider{position:absolute;inset:0 auto 0 var(--position);width:6px;transform:translateX(-50%);background:var(--paper,#ecebe4);z-index:3;pointer-events:none}
.thunder-comparison .grip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4px;height:32px;border-radius:3px;background:linear-gradient(90deg,#9a9e91,#d0d3c7 40%,#a8ad9e 75%,#828977);box-shadow:inset 0 1px 0 #ffffffb3,0 1px 2px #303a2826}
.thunder-comparison .drag-target{position:absolute;z-index:4;top:0;bottom:0;left:clamp(22px,var(--position),calc(100% - 22px));width:44px;transform:translateX(-50%);touch-action:pan-y;outline:none;cursor:ew-resize!important}
.thunder-comparison .compare:has(.drag-target:focus-visible) .grip{outline:2px solid #48523d;outline-offset:4px}
.thunder-comparison [data-dragging] .grip{background:linear-gradient(90deg,#737b68,#b6bea9 45%,#818c73)}
.thunder-comparison figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:#686b62;font-size:11px;line-height:1.5}
.thunder-comparison .reset{font:inherit;color:inherit;background:none;border:0;padding:10px 0 10px 10px;cursor:pointer}
.thunder-comparison .reset:focus-visible{outline:2px solid #48523d;outline-offset:3px;border-radius:3px}
@media(max-width:650px){.thunder-comparison .keyboard-hint{display:none}.thunder-comparison .side-label{font-size:10px}}

.thunder-comparison .compare{user-select:none;-webkit-user-select:none;touch-action:pan-y}

.project-description + .thunder-comparison{margin-top:80px}

/* Fill the shared frame despite the call-flow screenshots’ different ratios. */
.thunder-comparison-call-flow .after img{object-fit:cover}