#overview{scroll-margin-top:100px}
.overview-compare{position:relative;margin:40px -12px 0;isolation:isolate}
.overview-compare__stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#100b20;user-select:none;-webkit-user-select:none}
.overview-compare__stage img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none;-webkit-user-drag:none}
.overview-compare__client{position:absolute;inset:0}
.overview-compare__vanilla{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.overview-compare__divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.92);box-shadow:0 0 14px #0005;pointer-events:none}
.overview-compare__divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:#201c29;background:#fff;box-shadow:0 3px 22px #0005;transition:box-shadow .2s}
.overview-compare__range{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.overview-compare__stage:focus-within{outline:3px solid var(--focus);outline-offset:5px}
.overview-compare__stage:focus-within .overview-compare__divider>span,.overview-compare__stage:hover .overview-compare__divider>span{box-shadow:0 3px 26px #0007,0 0 0 5px #ffffff26}
.overview-compare__labels{display:flex;justify-content:space-between;gap:20px;padding:19px 3px 0}
.overview-compare__labels>span{display:flex;flex-direction:column;gap:4px}
.overview-compare__labels>span:last-child{text-align:right}
.overview-compare__labels strong{font-size:14px;font-weight:600;color:var(--fg)}
.overview-compare__labels small{font-size:11px;color:var(--fg2)}
.overview-compare__hint{margin:22px 0 0;text-align:center;font-size:12px;color:var(--fg2)}
@media(max-width:560px){.overview-compare{margin:30px -4px 0}.overview-compare__stage{border-radius:18px}.overview-compare__divider>span{width:38px;height:38px}.overview-compare__labels{gap:12px;padding-top:15px}.overview-compare__labels strong{font-size:12px}.overview-compare__labels small{font-size:10px}.overview-compare__hint{font-size:11px;margin-top:18px}}
@media(prefers-reduced-motion:reduce){.overview-compare__divider>span{transition:none}}
