/* Comparison-selector cascade from preserved report; comments removed before selector parsing. */
.compare{position:relative;aspect-ratio:var(--ratio);width:100%;background:#e3e9ee;overflow:hidden}
.compare figure{position:absolute;inset:0}
.compare figure img{display:block;width:100%;height:100%;object-fit:contain}
.compare figure:first-child{z-index:2;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.compare figcaption{position:absolute;top:12px;left:12px;background:#fffef5ed;color:#263c4d;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:750}
.compare figure:nth-child(2) figcaption{left:auto;right:12px;background:#233d50ec;color:white}
.compare input{position:absolute;inset:0;opacity:0;z-index:4;cursor:ew-resize;width:100%;height:100%;margin:0;touch-action:pan-y}
.compare:focus-within{outline:3px solid #679bc3;outline-offset:-3px}
.divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;box-shadow:0 0 5px #0005;z-index:3;pointer-events:none}
.divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;color:var(--ink);box-shadow:0 2px 12px #0003;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:25px}
.compare{isolation:isolate;background:#17202c;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.compare>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.compare>img:first-of-type{z-index:1}
.compare>img:nth-of-type(2){z-index:2;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.compare:focus-within{outline:none}
.badge{position:absolute;top:10px;padding:5px 9px;background:#2c2924ed;color:white;border-radius:7px;z-index:5;font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.07em;text-transform:uppercase;pointer-events:none}
.badge.before{left:10px}
.badge.after{right:10px}
.divider{z-index:4;transform:translateX(-1px);box-shadow:none}
.knob{position:absolute;z-index:7;left:clamp(27px,var(--split),calc(100% - 27px));top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;border:3px solid white;background:#2c2924;color:white;border-radius:50%;width:52px;height:52px;padding:8px;cursor:ew-resize;touch-action:none;min-height:0}
.knob:hover{background:#2c2924}
.knob svg{width:26px;height:26px}
.knob:disabled{cursor:wait;opacity:.75}
.knob:focus-visible{outline:3px solid #a9d1f6;outline-offset:3px}
.load-error{position:absolute;inset:0;z-index:10;background:#2c2924;color:white;display:grid;place-content:center;gap:12px;text-align:center;padding:20px}
.load-error button{color:#2c2924}
@media(prefers-reduced-motion:no-preference){.compare:not(.is-drag):not(.is-intro)>img:nth-of-type(2){transition:clip-path .1s}
.compare:not(.is-drag):not(.is-intro) .divider,.compare:not(.is-drag):not(.is-intro) .knob{transition:left .1s}}
@media(max-width:650px){.knob{width:52px;height:52px}}
.knob:focus-visible{outline-color:white;box-shadow:0 0 0 3px #2c2924}
.compare:focus-within{outline-offset:-3px}
@media(forced-colors:active){.knob{border:1px solid ButtonText!important}
.badge{background:Canvas;color:CanvasText}
.divider{background:CanvasText}}
.view-toggle{position:absolute;z-index:8;right:52px;bottom:6px;min-height:44px;padding:5px 10px;border:0;border-radius:10px;background:#2c2924e8;color:white;font-size:13px;line-height:1.3;font-weight:650;box-shadow:0 0 0 1px #ffffff70 inset;touch-action:manipulation}
.view-toggle:hover{background:#1b2b48}
.view-toggle:focus-visible{outline:3px solid white;outline-offset:2px;box-shadow:0 0 0 5px #2c2924}
.compare.is-full-view>img,.compare.is-full-view .divider,.compare.is-full-view .knob{transition:none!important}
.view-toggle{right:50px;bottom:6px;width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:white;box-shadow:none}
.view-toggle::before{content:"";position:absolute;inset:5px;background:#2c2924e8;border:1px solid #ffffffaa;border-radius:50%;z-index:-1}
.view-toggle svg{width:20px;height:20px}
.view-toggle:hover{background:transparent}
.view-toggle:hover::before{background:#1b2b48}
@media(prefers-reduced-motion:reduce){.compare *{animation:none!important;transition:none!important}}
.compare{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.compare .load-error button{font:inherit;min-height:44px;background:white;border:1px solid #ddd;border-radius:10px;padding:10px 15px;cursor:pointer}