.comparison-hero{margin:24px 0 0;min-width:0}
.preview-frame{position:relative}
.preview-stage{position:relative;width:100%;aspect-ratio:3/2;max-height:350px;border-radius:16px;overflow:hidden;background:#f0efe7;touch-action:pan-y pinch-zoom;user-select:none;cursor:grab}
.preview-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;opacity:1;transform:translateX(0);transition:opacity 360ms cubic-bezier(.22,.61,.36,1),transform 360ms cubic-bezier(.22,.61,.36,1)}
[data-phase=prepared]>.current{opacity:0;transform:translateX(calc(var(--preview-direction)*8%))}
[data-phase=animating]>.previous{opacity:0;transform:translateX(calc(var(--preview-direction)*-8%))}
.preview-control{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid #d7ddd4;border-radius:50%;background:#fff;color:#183b2d;font-size:26px;line-height:1;cursor:pointer}
#comparison-prev{left:12px}#comparison-next{right:12px}
.preview-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0;font-size:14px}
#comparison-color{color:#183b2d;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
#comparison-scene{font-size:12px;color:#59665c}
.preview-dots{display:flex;justify-content:center;gap:4px}
.preview-dots button{width:36px;height:32px;border:0;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center}
.preview-dots button:after{content:'';width:7px;height:7px;border-radius:4px;background:#7a857e}
.preview-dots button[aria-pressed=true]:after{width:18px;background:#183b2d}
#comparison-preview-status:empty{display:none}
.preview-note{font-size:12px;color:#59665c;margin:4px 0 0}
@media(max-width:540px){.preview-stage{max-height:none}.preview-control{width:40px;height:40px}#comparison-prev{left:8px}#comparison-next{right:8px}}
@media(prefers-reduced-motion:reduce){.preview-layer{transition:none}}