.photo-compare-pattern,.photo-compare-pattern>.photo-compare-viewport{display:contents}.photo-compare-caption{display:none}
#patternStage.is-comparing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;justify-content:normal;height:auto;min-height:0;max-height:none;overflow:visible;padding:12px}
#patternStage.is-comparing>.photo-source-preview,#patternStage.is-comparing>.photo-compare-pattern{display:block;min-width:0;width:100%;margin:0}
#patternStage.is-comparing .photo-compare-caption,#patternStage.is-comparing .photo-source-preview>span{display:block;position:static;padding:6px 0;margin:0;line-height:1.5;font-size:12px;color:#665a77;background:transparent}
#patternStage.is-comparing .photo-compare-viewport{display:block;position:relative;width:100%;height:var(--photo-compare-height,280px);overflow:auto;overscroll-behavior:contain;border:1px solid #ded6e6;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 50%/12px 12px;scrollbar-gutter:stable;touch-action:pan-x pan-y}
#patternStage.is-comparing .photo-compare-viewport:focus-visible{outline:3px solid #8c69ba;outline-offset:2px}
#patternStage.is-comparing .canvas-inner{width:var(--photo-compare-content-width)!important;height:var(--photo-compare-content-height)!important;max-width:none!important;min-width:0;margin:0;box-shadow:none}
#patternStage.is-comparing canvas{max-width:none;touch-action:pan-x pan-y;pointer-events:none}
@media(max-width:760px){#patternStage.is-comparing{grid-template-columns:1fr;gap:10px;padding:8px}#patternStage.is-comparing .photo-compare-viewport{height:min(var(--photo-compare-height,280px),280px)}}