.comparison{min-width:0}.comparison-frame{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid rgb(var(--color-limestone));border-radius:16px;background:rgb(var(--color-ivory-dark));isolation:isolate;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:ew-resize}.comparison-frame:focus-visible{outline:3px solid rgb(var(--color-olive-dark));outline-offset:5px}.comparison-frame.is-dragging{cursor:grabbing}.comparison-image{position:absolute;inset:0;overflow:hidden;pointer-events:none}.comparison-image img{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.comparison-label{position:absolute;top:14px;z-index:1;padding:6px 10px;border-radius:4px;background:#fcfbf7;color:#201f1c;font-size:.8125rem;line-height:1.5;font-weight:600;pointer-events:none}.comparison-label-before{left:14px}.comparison-label-after{right:14px}.comparison-label[data-visible=false]{opacity:0}.comparison-divider{inset-block:0;width:2px;transform:translateX(-50%)}.comparison-divider,.comparison-handle{position:absolute;background:#fcfbf7;pointer-events:none}.comparison-handle{top:50%;display:flex;align-items:center;justify-content:center;gap:1px;width:44px;height:44px;transform:translate(-50%,-50%);border:1px solid #344327;border-radius:50%;color:#201f1c;box-shadow:0 3px 12px rgb(20 18 14/.18)}.comparison-handle svg{width:16px;height:16px}.comparison-handle>span{width:1px;height:14px;background:#535148}.comparison-frame:is(:focus-visible,.is-dragging) .comparison-handle{background:#344327;color:#fcfbf7}.comparison-frame:is(:focus-visible,.is-dragging) .comparison-handle>span{background:#fcfbf7}.comparison-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px}.comparison-project{min-width:0}.comparison-project>:is(a,p):first-child{display:flex;align-items:center;gap:12px;font-size:.9375rem;line-height:1.6;color:rgb(var(--color-charcoal));font-weight:600;overflow-wrap:anywhere}.comparison-project a{min-height:44px}.comparison-project a svg{flex:0 0 18px}.comparison-project a:hover{text-decoration:underline;text-underline-offset:4px}.comparison-navigation button:focus-visible,.comparison-project a:focus-visible{outline:2px solid rgb(var(--color-olive-dark));outline-offset:3px}.comparison-project .comparison-location{margin-top:2px;color:rgb(var(--color-charcoal-muted));font-size:.8125rem;line-height:1.6}.comparison-navigation{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.comparison-navigation button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgb(var(--color-olive-border));border-radius:8px;color:rgb(var(--color-olive-dark))}.comparison-navigation button:hover{background:rgb(var(--color-olive-tint))}.comparison-navigation>span{min-width:36px;text-align:center;color:rgb(var(--color-charcoal-muted));font-size:.8125rem;font-variant-numeric:tabular-nums}@media (min-width:640px){.comparison-frame{aspect-ratio:16/10}}@media (min-width:768px){.comparison-frame{aspect-ratio:16/9}}@media (max-width:479px){.comparison-footer{flex-wrap:wrap}}@media (prefers-reduced-motion:no-preference){.comparison-label{transition:opacity .15s ease}.comparison-handle{transition:background-color .15s ease,color .15s ease}}