.page-section-hero-compare-figure{width:min(40rem,100%);margin:0 auto}.page-section-hero-compare{--position:50%;isolation:isolate;-webkit-user-select:none;user-select:none;position:relative}.compare-pane{pointer-events:none}.compare-pane img,.compare-pane svg{width:100%;height:auto;display:block}.compare-sketch{clip-path:inset(0 calc(100% - var(--position)) 0 0);filter:drop-shadow(0 1px 2px hsl(from var(--color-primary) h s l / .12))}.compare-design{clip-path:inset(-10% 0 -10% var(--position));padding:1.7943% 2.1531%;position:absolute;inset:0;container-type:inline-size}.compare-browser{aspect-ratio:1600/1150;box-shadow:0 .9cqw 2.2cqw -.8cqw hsl(from var(--color-primary) h s l / .4);background:#202124;border-radius:1.555cqw;flex-direction:column;display:flex;overflow:hidden}.compare-browser-bar{background:#35363a;flex:0 0 6.5789cqw;align-items:center;padding-inline:2.15cqw;display:flex;position:relative}.compare-browser-dots{gap:1.075cqw;display:flex}.compare-browser-dots i{background:#ff5f57;border-radius:50%;width:1.7943cqw;height:1.7943cqw}.compare-browser-dots i:nth-child(2){background:#febc2e}.compare-browser-dots i:nth-child(3){background:#28c840}.compare-browser-url{color:#b9bcc2;width:41.87cqw;height:3.23cqw;font-family:var(--font-family-mono);letter-spacing:.02em;background:#202124;border-radius:999px;justify-content:center;align-items:center;font-size:1.62cqw;display:flex;position:absolute;left:50%;translate:-50%}.compare-browser-screen{flex:auto;min-height:0;overflow:hidden}.compare-pane .compare-browser-screen img{object-fit:cover;object-position:top center;width:100%;height:100%}.compare-divider{inset-block:-.75rem;left:var(--position);background:var(--color-primary);pointer-events:none;border-radius:999px;width:3px;position:absolute;translate:-50%}.compare-knob{background:var(--color-primary);width:2.75rem;height:2.75rem;color:var(--color-foreground-light);border-radius:50%;justify-content:center;align-items:center;gap:.125rem;display:flex;position:absolute;top:50%;left:50%;translate:-50% -50%}.compare-knob svg{width:.875rem;height:.875rem}.compare-range{appearance:none;cursor:ew-resize;opacity:0;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.compare-caption{font-size:var(--font-size-xsmall);color:var(--color-foreground-muted);text-align:center;margin-block-start:1.25rem;line-height:1.4}.compare-caption a{color:inherit;font-family:var(--font-family-mono);text-underline-offset:.2em}.compare-caption a:hover{color:var(--color-primary);text-decoration:underline}.page-section-hero-compare:has(.compare-range:focus-visible) .compare-knob{outline:2px solid var(--color-primary);outline-offset:3px}@media (prefers-reduced-motion:no-preference){.sketch-draw :is(path,rect,circle,line){stroke-dasharray:1;stroke-dashoffset:1px;animation:.9s ease-out forwards sketch-draw}.sketch-draw .sketch-g2 :is(path,rect,circle,line){animation-delay:.3s}.sketch-draw .sketch-g3 :is(path,rect,circle,line){animation-delay:.6s}.sketch-draw .sketch-red :is(path,circle){animation-delay:1.1s}.compare-knob{animation:1.6s ease-out 2s 3 compare-knob-pulse}}@keyframes sketch-draw{to{stroke-dashoffset:0}}@keyframes compare-knob-pulse{0%{box-shadow:0 0 0 0 hsl(from var(--color-primary) h s l / .4)}to{box-shadow:0 0 0 1.125rem hsl(from var(--color-primary) h s l / 0)}}