.photo-compare{--reveal:50%;position:relative;min-width:0;background:#e4e7e3;isolation:isolate}.compare-frame{position:relative;width:100%;aspect-ratio:var(--compare-ratio,1.4);overflow:hidden;border-radius:12px;background:#e4e7e3}.compare-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.compare-layer svg{display:block;width:100%;height:100%;overflow:hidden}.compare-layer-a{clip-path:inset(0 calc(100% - var(--reveal)) 0 0);z-index:1}.compare-divider{position:absolute;z-index:2;left:var(--reveal);top:0;bottom:0;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px #193b2c30;pointer-events:none}.compare-grip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border:1px solid #ffffffb3;border-radius:50%;display:grid;place-content:center;background:#faf7f0e8;color:#173d2c;box-shadow:0 2px 8px #173d2c30;font-size:22px;letter-spacing:2px;padding-left:2px}.compare-range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.photo-compare:focus-within .compare-frame{outline:3px solid var(--forest,#173d2c);outline-offset:3px}.compare-labels{display:flex;justify-content:space-between;gap:16px;padding:10px 14px 5px;font-size:11px;line-height:1.6;color:var(--forest,#173d2c);background:var(--paper,#faf7f0)}.compare-labels>span{max-width:48%}.compare-labels>span:last-child{text-align:right}.compare-help{font-size:10px;line-height:1.6;color:#596f5d;padding:0 14px 10px;margin:0!important;background:var(--paper,#faf7f0)}.compare-expand{background:var(--paper,#faf7f0);border:0;border-top:1px solid #d4ddd2;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:10px 14px;text-align:left;font-size:11px;color:var(--forest,#173d2c)}.compare-expand:focus-visible{outline:2px solid var(--forest,#173d2c);outline-offset:3px}.case-view-stage>.photo-compare{width:100%;max-height:100%;align-self:center}.case-view-stage .compare-frame{max-height:calc(100svh - 180px);border-radius:0}.case-view-stage .compare-labels,.case-view-stage .compare-help{background:#172d25;color:#eff3ed}.compare-plain-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-plain-grid svg{width:100%;height:auto}.compare-unavailable{padding:24px 20px;background:#e8eee7;display:flex;flex-direction:column;gap:10px}.compare-unavailable p{font-size:12px;line-height:1.8;margin:0}.compare-unavailable a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
@media(max-width:600px){.compare-frame{border-radius:9px}.compare-labels{font-size:10px;padding:10px 12px 5px}.compare-help{font-size:10px;padding-inline:12px}.compare-grip{width:42px;height:42px}.case-view-stage .compare-frame{max-height:calc(57svh - 105px)}.case-view-stage .compare-labels{font-size:10px}.case-view-stage .compare-help{font-size:9px}}
.compare-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper,#faf7f0);padding:0 12px 7px}.compare-tools .compare-help{padding:0;flex:1}.compare-mode{font:inherit;font-size:10px;line-height:1.6;min-height:36px;background:transparent;border:0;border-bottom:1px solid #a9b8a8;color:inherit;padding:5px 0;cursor:pointer;white-space:nowrap}.compare-mode:focus-visible{outline:2px solid var(--forest,#173d2c);outline-offset:2px}.photo-compare[data-view=pair] .compare-frame{display:grid;grid-template-columns:1fr 1fr;gap:3px;aspect-ratio:calc(var(--compare-ratio,1.4)*2)}.photo-compare[data-view=pair] .compare-layer{position:relative;width:100%;height:100%;clip-path:none}.photo-compare[data-view=pair] .compare-layer-a{order:-1}.photo-compare[data-view=pair] .compare-divider,.photo-compare[data-view=pair] .compare-range,.photo-compare[data-view=pair] .compare-help{display:none}.photo-compare[data-view=pair] .compare-tools{justify-content:flex-end}.case-view-stage>.photo-compare{height:100%;display:flex;flex-direction:column;justify-content:center}.case-view-stage .compare-frame{flex:1;min-height:0;max-height:none;aspect-ratio:auto}.case-view-stage .compare-tools{background:#172d25;color:#eff3ed}
.case-compare-mount{width:100%;height:100%;min-height:0}.case-view-stage .photo-compare{height:100%;display:flex;flex-direction:column;justify-content:center}.case-slide-thumbs svg{display:block;width:100%;height:100%}.case-source-extra{margin-top:28px;border-top:1px solid #bcc9ba;padding-top:20px}.case-source-extra summary{font-size:13px;cursor:pointer;padding-block:10px}.case-source-extra ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 25px;list-style:none;padding:16px 0}.case-source-extra li{font-size:12px;line-height:1.8}.case-source-extra a{display:inline-flex;align-items:center;min-height:40px}.area-case-card>.photo-compare{background:transparent}.area-case-card .compare-labels,.area-case-card .compare-help{font-size:11px}.case-card .compare-expand{margin-top:0}.case-card .compare-labels{font-size:10px}.case-card .compare-help,.case-card .compare-mode{font-size:9px}.case-card .compare-tools{gap:8px}.case-card .compare-frame{border-radius:0}.case-view-stage .compare-range{min-height:0}.case-view-stage .compare-help{font-size:10px}
@media(max-width:800px){.case-source-extra ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.case-source-extra ul{grid-template-columns:1fr}.case-card .compare-help,.case-card .compare-mode{font-size:10px}.area-case-companion{display:block}.compare-tools{gap:8px}.compare-labels{font-size:10px}.compare-mode{font-size:10px}}
.case-track{align-items:start;overflow-y:hidden}.case-track .case-card{align-self:start;height:auto}.case-source-extra[hidden],.case-source-extra li[hidden]{display:none}.case-source-extra ul{margin-bottom:0}.area-compare-media{min-width:0}.area-depth .area-case-companion .compare-labels{font-size:9px;padding-inline:9px}.area-depth .area-case-companion .compare-help,.area-depth .area-case-companion .compare-mode{font-size:9px}.area-depth .area-case-companion .compare-tools{gap:6px;padding-inline:9px}.area-depth .area-case-companion .compare-expand{font-size:10px;padding-inline:9px}
@supports (container-type:size){.case-compare-mount{display:flex;align-items:center;justify-content:center;container-type:size}.case-view-stage .photo-compare{--modal-ratio:var(--compare-ratio);width:min(100%,calc((100cqh - 76px)*var(--modal-ratio)));height:auto;max-height:100%;flex:0 0 auto}.case-view-stage .photo-compare[data-view=pair]{--modal-ratio:calc(var(--compare-ratio)*2)}.case-view-stage .compare-frame{width:100%;height:auto;flex:0 0 auto;aspect-ratio:var(--modal-ratio);max-height:none}}
@media(min-width:601px){.case-card .compare-frame{max-height:420px;background:#172d25}}