.color-comparisons{max-width:1100px;margin:50px auto 0}.compare-help{font-size:13px;color:#777;margin:0 0 30px}.color-pair{margin:0 0 50px;text-align:left}.color-compare{position:relative;overflow:hidden;border-radius:12px;background:#222;isolation:isolate;touch-action:pan-y}.color-compare>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}.color-compare .compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-label{position:absolute;top:18px;z-index:2;color:#fff;background:#0008;padding:7px 10px;font-size:9px;letter-spacing:.14em;pointer-events:none}.before-label{left:18px}.after-label{right:18px}.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:#fffd;z-index:2;pointer-events:none;transform:translateX(-50%)}.compare-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border:1px solid #fff;border-radius:50%;background:#1118;color:white;display:grid;place-items:center;backdrop-filter:blur(5px)}.compare-divider svg{width:30px;height:20px}.color-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;touch-action:pan-y}.color-compare:focus-within{outline:2px solid #111;outline-offset:5px}.color-pair figcaption{padding:17px 0 0}.color-pair figcaption span{font-size:9px;letter-spacing:.1em}@media(max-width:650px){.color-pair{margin-bottom:32px}.color-compare{border-radius:8px}.compare-label{top:10px;font-size:8px;padding:5px 7px}.before-label{left:10px}.after-label{right:10px}.compare-divider>span{width:40px;height:40px}.color-pair figcaption{gap:15px}.compare-help{font-size:12px;line-height:1.6}}