@property --pos{syntax:"<percentage>";inherits:true;initial-value:50%}.before-after[data-astro-cid-a5lnqzdj]{--device-h:262px;--bezel:calc(var(--device-h) * .022);--corner:calc(var(--device-h) * .085);--loop:9s;align-items:center;gap:calc(var(--device-h) * .035);-webkit-user-select:none;user-select:none;flex-direction:column;margin:0;display:flex;position:relative}.device[data-astro-cid-a5lnqzdj]{padding:var(--bezel);border-radius:var(--corner);background:linear-gradient(160deg, #2b3640, var(--ink) 55%);position:relative;box-shadow:inset 0 0 0 1px #ffffff1a,0 0 0 1px #0e1a2424,0 2px 4px #0e1a2414,0 24px 48px -18px #0e1a2461}.screen[data-astro-cid-a5lnqzdj]{height:calc(var(--device-h) - 2 * var(--bezel));aspect-ratio:390/844;border-radius:calc(var(--corner) - var(--bezel));cursor:ew-resize;touch-action:pan-y;background:#eee;position:relative;overflow:hidden;container-type:inline-size}.shot[data-astro-cid-a5lnqzdj]{pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.shot-before[data-astro-cid-a5lnqzdj]{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.status[data-astro-cid-a5lnqzdj]{top:1.9%;color:var(--ink);pointer-events:none;justify-content:space-between;align-items:center;font-size:4cqw;font-weight:600;line-height:1;display:flex;position:absolute;inset-inline:9% 7%}.status[data-astro-cid-a5lnqzdj] svg[data-astro-cid-a5lnqzdj]{fill:currentColor;width:11cqw}.island[data-astro-cid-a5lnqzdj]{aspect-ratio:126/37;pointer-events:none;background:#05090c;border-radius:999px;width:31%;position:absolute;top:1.3%;left:50%;transform:translate(-50%)}.track[data-astro-cid-a5lnqzdj]{inset:var(--bezel);pointer-events:none;position:absolute}.divider[data-astro-cid-a5lnqzdj]{inset-block:0;left:var(--pos);pointer-events:none;background:#fff;width:2px;margin-left:-1px;position:absolute;box-shadow:0 0 0 .5px #0e1a2433,0 0 12px #0e1a2440}.knob[data-astro-cid-a5lnqzdj]{width:clamp(26px, calc(var(--device-h) * .075), 42px);aspect-ratio:1;color:var(--ink);background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0e1a2414,0 4px 14px #0e1a2447}.knob[data-astro-cid-a5lnqzdj] svg[data-astro-cid-a5lnqzdj]{width:62%}.labels[data-astro-cid-a5lnqzdj]{gap:6px;width:max-content;display:flex}.label[data-astro-cid-a5lnqzdj]{letter-spacing:.01em;border:1px solid #0000;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;line-height:1.2}.label-before[data-astro-cid-a5lnqzdj]{background:var(--ink);color:#fff}.label-after[data-astro-cid-a5lnqzdj]{background:var(--teal-deep);color:#fff}.range[data-astro-cid-a5lnqzdj]{clip-path:inset(50%);opacity:0;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.before-after[data-astro-cid-a5lnqzdj]:has(.range:focus-visible) .knob[data-astro-cid-a5lnqzdj]{outline:3px solid var(--teal);outline-offset:2px}.before-after[data-astro-cid-a5lnqzdj][data-side=before] .label-after[data-astro-cid-a5lnqzdj],.before-after[data-astro-cid-a5lnqzdj][data-side=after] .label-before[data-astro-cid-a5lnqzdj]{border-color:var(--hairline-2);color:var(--slate);background:0 0}@media (prefers-reduced-motion:no-preference){.before-after[data-astro-cid-a5lnqzdj]:not([data-manual]){animation:wipe var(--loop) infinite}.before-after[data-astro-cid-a5lnqzdj]:not([data-manual]) .divider[data-astro-cid-a5lnqzdj]{animation:wipe-divider var(--loop) infinite}.before-after[data-astro-cid-a5lnqzdj]:not([data-manual]) .label-before[data-astro-cid-a5lnqzdj]{animation:wipe-label-before var(--loop) infinite}.before-after[data-astro-cid-a5lnqzdj]:not([data-manual]) .label-after[data-astro-cid-a5lnqzdj]{animation:wipe-label-after var(--loop) infinite}.before-after[data-astro-cid-a5lnqzdj][data-paused],.before-after[data-astro-cid-a5lnqzdj][data-paused] [data-astro-cid-a5lnqzdj]{animation-play-state:paused!important}}@keyframes wipe{0%,20%{--pos:100%;animation-timing-function:cubic-bezier(.65,0,.35,1)}44%,76%{--pos:0%;animation-timing-function:cubic-bezier(.65,0,.35,1)}to{--pos:100%}}@keyframes wipe-divider{0%,15%,49%,71%{opacity:0}20%,44%,76%,97%{opacity:1}to{opacity:0}}@keyframes wipe-label-before{0%,30%,90%,to{background:var(--ink);color:#fff;border-color:#0000}34%,86%{border-color:var(--hairline-2);color:var(--slate);background:0 0}}@keyframes wipe-label-after{0%,30%,90%,to{border-color:var(--hairline-2);color:var(--slate);background:0 0}34%,86%{background:var(--teal-deep);color:#fff;border-color:#0000}}@media (width>=600px){.before-after[data-astro-cid-a5lnqzdj]{--device-h:380px}.label[data-astro-cid-a5lnqzdj]{padding:5px 13px;font-size:14px}}@media (width>=900px){.before-after[data-astro-cid-a5lnqzdj]{--device-h:clamp(440px, calc(100vh - 230px), 580px)}}