.comparison-slider{--position:50%;position:relative;max-width:960px;height:min(560px,60vw);min-height:420px;margin:auto;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#edf1f5;box-shadow:var(--shadow);isolation:isolate}.comparison-layer{position:absolute;inset:0;display:grid;place-items:center}.comparison-layer img{width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}.comparison-after{padding:26px}.comparison-after img{width:88%;height:88%}.comparison-before{z-index:2;background:#eef1f5;clip-path:inset(0 calc(100% - var(--position)) 0 0)}.comparison-badge{position:absolute;top:18px;padding:8px 12px;border-radius:99px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px #17202a1c;font-size:13px;font-weight:850;z-index:3}.before-badge{left:18px}.after-badge{right:18px;color:var(--green)}.comparison-divider{position:absolute;z-index:4;top:0;bottom:0;left:var(--position);width:3px;background:#fff;box-shadow:0 0 0 1px #17202a2c;transform:translateX(-50%);pointer-events:none}.comparison-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#27313d;color:#fff;border:3px solid #fff;font-size:22px;font-weight:900;box-shadow:0 8px 22px #17202a4c}.comparison-range{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.comparison-range:focus-visible{opacity:1;height:28px;top:auto;bottom:14px;left:5%;width:90%;accent-color:var(--blue)}.comparison-help{max-width:960px;margin:18px auto 0;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:14px}.comparison-help strong{color:var(--blue)}
@media(max-width:700px){.comparison-slider{height:430px;min-height:0;border-radius:22px}.comparison-layer img{object-fit:contain}.comparison-after{padding:18px}.comparison-badge{top:12px;font-size:11px}.before-badge{left:12px}.after-badge{right:12px}.comparison-divider span{width:48px;height:48px}.comparison-help{font-size:12px}.comparison-help strong{display:none}}
@media(max-width:430px){.comparison-slider{height:350px}.comparison-help{align-items:center}.comparison-help span{max-width:46%}}