/* Home comparison: native keyboard control, direct dragging and a static fallback. */
.ra-before-after{--compare-lime:#cfee8b;--compare-night:#171b14;--compare-before:50%;min-width:0;margin:0;padding:13px;border:1px solid #3b4a2e;border-radius:17px;background:var(--compare-night);color:#edf5e1}
.ra-ba-heading{padding:10px 10px 19px}
.ra-ba-heading>span{display:flex;align-items:center;gap:8px;color:#c3dfa1;font:650 8px/1.8 var(--sans);letter-spacing:.065em}
.ra-ba-heading>span svg{width:15px;height:15px;flex:0 0 15px}
.ra-ba-heading>strong{display:block;font:550 20px/1.45 var(--sans);letter-spacing:-.035em;color:#edf6e0;margin-top:12px}
.ra-ba-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid #52643e;border-radius:11px;overflow:hidden;background:#26321e;isolation:isolate;user-select:none;-webkit-user-select:none}
.ra-ba-panel{position:relative;min-width:0;aspect-ratio:4/3;overflow:hidden;pointer-events:none}
.ra-ba-panel>img{display:block;width:200%;max-width:none;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.ra-ba-after>img{transform:translateX(-50%)}
.ra-ba-label{position:absolute;z-index:2;left:13px;bottom:13px;padding:8px 11px;border:1px solid #e1ecd42b;border-radius:7px;background:#182212e6;color:#f1f7e8;font:650 11px/1.7 var(--sans);letter-spacing:-.015em;box-shadow:0 3px 12px #14200b14;pointer-events:none}
.ra-ba-label>small{display:block;font:400 8px/1.8 var(--sans);color:#d0e3b6;letter-spacing:.01em;margin-top:1px}
.ra-ba-after .ra-ba-label{left:auto;right:13px;background:#d7f09ce8;border-color:#e8f7c3;color:#26351a}
.ra-ba-after .ra-ba-label>small{color:#415c29}
.ra-before-after [hidden]{display:none!important}
.ra-before-after.is-enhanced .ra-ba-stage{display:block;aspect-ratio:4/3;touch-action:pan-y;cursor:ew-resize}
.ra-before-after.is-enhanced .ra-ba-panel{position:absolute;inset:0;aspect-ratio:auto}
.ra-before-after.is-enhanced .ra-ba-after{z-index:0}
.ra-before-after.is-enhanced .ra-ba-before{z-index:1;clip-path:inset(0 calc(100% - var(--compare-before)) 0 0)}
.ra-ba-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--compare-before);width:2px;margin-left:-1px;background:#e4f6bd;box-shadow:0 0 0 1px #25371945;pointer-events:none;transition:none}
.ra-ba-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:1px solid #e3f3c2;border-radius:50%;background:var(--compare-lime);color:#30471d;box-shadow:0 4px 15px #12200640}
.ra-ba-divider svg{width:14px;height:18px;flex:0 0 14px}
.ra-ba-divider svg:first-child{transform:rotate(180deg)}
.ra-before-after.is-dragging .ra-ba-divider>span{background:#e7fac5;box-shadow:0 0 0 5px #cfee8b29,0 4px 15px #12200640}
.ra-ba-controls{padding:16px 9px 3px}
.ra-ba-controls>label{display:flex;align-items:center;justify-content:space-between;gap:15px;font:500 10px/1.8 var(--sans);color:#c9e0ac;margin:0 0 5px}
.ra-ba-controls>label>span{display:flex;align-items:center}
.ra-ba-controls>label svg{width:19px;height:19px;color:#d8efb5}
.ra-ba-controls>div{display:grid;grid-template-columns:auto minmax(55px,1fr) auto;gap:13px;align-items:center}
.ra-ba-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:66px;min-height:40px;padding:9px 12px;border:1px solid #566e40;border-radius:7px;background:#2c3b22;color:#d9edbc;font:600 10px/1.8 var(--sans);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ra-ba-controls button:hover{background:#3c522b;border-color:#89aa61;color:#edfad9}
.ra-ba-controls button.is-selected{background:#cfee8b;border-color:#cfee8b;color:#2b3d1d}
.ra-ba-controls input[type="range"]{display:block;width:100%;min-width:0;height:44px;margin:0;padding:0;appearance:none;-webkit-appearance:none;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:ew-resize;accent-color:#cfee8b;touch-action:pan-y}
.ra-ba-controls input[type="range"]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:4px;background:linear-gradient(to right,#cfee8b 0 var(--compare-before),#617749 var(--compare-before) 100%)}
.ra-ba-controls input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border:3px solid #171b14;border-radius:50%;background:#dcf4ac;box-shadow:0 0 0 1px #a9c680}
.ra-ba-controls input[type="range"]::-moz-range-track{height:4px;border:0;border-radius:4px;background:#617749}
.ra-ba-controls input[type="range"]::-moz-range-progress{height:4px;border-radius:4px;background:#cfee8b}
.ra-ba-controls input[type="range"]::-moz-range-thumb{width:15px;height:15px;border:3px solid #171b14;border-radius:50%;background:#dcf4ac;box-shadow:0 0 0 1px #a9c680}
.ra-ba-controls button:focus-visible,.ra-ba-controls input[type="range"]:focus-visible{outline:3px solid #cfee8b;outline-offset:4px}
.ra-before-after>figcaption{display:flex;align-items:flex-start;gap:8px;padding:14px 10px 7px;color:#bfcfae;font:400 10px/1.95 var(--sans)}
.ra-before-after>figcaption>svg{width:14px;height:14px;flex:0 0 14px;margin-top:3px;color:#c7e4a1}
@media(max-width:1120px){.ra-before-after{padding:11px}.ra-ba-heading{padding:9px 9px 17px}.ra-ba-heading>strong{font-size:19px}.ra-ba-label{padding:7px 9px;left:11px;bottom:11px}.ra-ba-after .ra-ba-label{right:11px}.ra-ba-controls{padding-inline:8px}.ra-ba-controls>div{gap:10px}.ra-ba-controls button{min-width:61px;padding-inline:10px}}
@media(max-width:700px){.ra-before-after{padding:12px;border-radius:14px}.ra-ba-heading{padding:10px 10px 18px}.ra-ba-heading>span{font-size:8px;letter-spacing:.045em}.ra-ba-heading>strong{font-size:20px;margin-top:11px}.ra-ba-stage{border-radius:10px}.ra-ba-divider>span{width:42px;height:42px;padding:9px}.ra-ba-label{font-size:11px}.ra-ba-label>small{font-size:8px}.ra-ba-controls{padding:15px 8px 2px}.ra-ba-controls>label{font-size:10px}.ra-ba-controls>div{gap:12px}.ra-ba-controls button{min-height:42px;min-width:62px;font-size:10px;padding:10px}.ra-before-after>figcaption{font-size:10px;line-height:1.95;padding:13px 9px 7px}}
@media(max-width:370px){.ra-before-after{padding:10px}.ra-ba-heading{padding:9px 8px 16px}.ra-ba-heading>span{font-size:7px;letter-spacing:.035em}.ra-ba-heading>strong{font-size:18px}.ra-ba-label{left:9px;bottom:9px;padding:6px 8px;font-size:10px}.ra-ba-after .ra-ba-label{right:9px}.ra-ba-label>small{font-size:7px}.ra-ba-controls{padding-inline:7px}.ra-ba-controls>div{gap:9px}.ra-ba-controls button{min-width:58px;padding-inline:8px;font-size:9px}.ra-before-after>figcaption{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.ra-before-after *{animation:none!important;transition:none!important}}
