[data-sig=coffee-comparison]{padding:var(--space) 0;background:#e7ddca}[data-sig=coffee-comparison] .comparison-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:36px}[data-sig=coffee-comparison] .comparison-heading p{max-width:38ch;font-size:14px}[data-sig=coffee-comparison] .comparison-stage{position:relative;aspect-ratio:3/2;overflow:hidden;--split:50%}[data-sig=coffee-comparison] .comparison-stage img{position:absolute;inset:0;height:100%}[data-sig=coffee-comparison] .before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}[data-sig=coffee-comparison] .divider{position:absolute;left:var(--split);top:0;bottom:0;width:3px;background:var(--paper);pointer-events:none}[data-sig=coffee-comparison] .divider::after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--ink);text-align:center;line-height:48px;font-size:25px}[data-sig=coffee-comparison] .image-label{position:absolute;bottom:18px;background:var(--paper);padding:5px 14px;font-family:var(--display);font-size:20px}[data-sig=coffee-comparison] .old-label{left:18px}[data-sig=coffee-comparison] .new-label{right:18px}[data-sig=coffee-comparison] label{display:block;margin-top:24px;font-size:14px}[data-sig=coffee-comparison] input{width:100%;accent-color:var(--depot);min-height:44px;cursor:ew-resize}[data-sig=coffee-comparison] .reconstruction{font-size:12px;margin-top:8px}
@media(max-width:700px){[data-sig=coffee-comparison] .comparison-heading{flex-direction:column;align-items:start;gap:20px}[data-sig=coffee-comparison] .comparison-stage{aspect-ratio:1/1}[data-sig=coffee-comparison] .image-label{font-size:16px;padding:4px 8px}}