.compare{display:grid;gap:var(--s-3);margin-top:var(--s-4)}.compare-frame{position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:var(--sunken);overflow:hidden}.compare-stage{position:relative;width:100%;max-width:calc(60vh * var(--ar, 1.4));margin-inline:auto;touch-action:none;cursor:ew-resize;background-color:var(--surface);background-image:linear-gradient(45deg,var(--raised) 25%,transparent 25%),linear-gradient(-45deg,var(--raised) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--raised) 75%),linear-gradient(-45deg,transparent 75%,var(--raised) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.compare:not(.is-loaded) .compare-stage{display:none}.compare-canvas{display:block;width:100%;height:auto}.compare-clip{position:absolute;inset:0 auto 0 0;width:50%;overflow:hidden}.compare-clip .compare-canvas{position:absolute;inset:0 auto auto 0;width:auto;max-width:none;height:100%}.compare-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--on-accent);box-shadow:0 0 0 1px #0f172a73;pointer-events:none}.compare-grip{position:absolute;top:50%;left:50%;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;border-radius:var(--r-full);background:var(--on-accent);box-shadow:var(--shadow-2),0 0 0 1px #0f172a4d}.compare-tag{position:absolute;top:var(--s-2);padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);background:#0f172ab8;color:#fff;font-size:var(--fs-12);font-weight:600;letter-spacing:.01em;pointer-events:none;transition:opacity var(--fast) var(--ease-out)}.compare-tag-before{left:var(--s-2)}.compare-tag-after{right:var(--s-2)}.compare-tag.is-hidden{opacity:0}.compare-message{margin:0;padding:var(--s-6) var(--s-4);color:var(--faint);font-size:var(--fs-14);text-align:center}.compare-message:empty{display:none}.compare-controls{margin:0}.compare-range,.slider-range{width:100%;height:var(--target);margin:0;padding:0;background:transparent;accent-color:var(--accent);cursor:pointer}.compare-range:focus-visible,.slider-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}.compare-range:disabled,.slider-range:disabled{cursor:not-allowed;opacity:.5}@media(prefers-reduced-motion:reduce){.compare-tag{transition:none}}