.image-comparison-showcase[data-v-1211bca9]{container-type:inline-size;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:0;height:100%;overflow:hidden;padding:1rem;border:1px solid color-mix(in oklab,var(--peach-strong) 22%,var(--border-subtle));border-bottom-color:color-mix(in oklab,var(--peach-strong) 42%,var(--border-subtle));border-radius:var(--radius-lg);background:var(--showcase-background) url(/variation/showcase-background.webp) center bottom / 100% 100% no-repeat;box-shadow:0 8px 18px color-mix(in oklab,var(--peach-strong) 14%,transparent),inset 0 -2px color-mix(in oklab,var(--peach-strong) 20%,transparent)}html.dark .image-comparison-showcase{background-image:url(/variation/showcase-background-dark.webp)}.image-comparison-showcase__head[data-v-1211bca9],.image-comparison-showcase__stage[data-v-1211bca9],.image-comparison-showcase__guide[data-v-1211bca9]{position:relative;z-index:1}.image-comparison-showcase__head[data-v-1211bca9]{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.875rem}.image-comparison-showcase__head h2[data-v-1211bca9]{margin:0;color:var(--text-primary);font-family:var(--font-display);font-size:var(--text-heading-xs);font-weight:700;line-height:1.3}.image-comparison-showcase__stage[data-v-1211bca9]{display:grid;flex:1;min-height:0;gap:.75rem}.image-comparison-showcase__example[data-v-1211bca9]{min-width:0}.image-comparison-showcase__pair[data-v-1211bca9]{display:grid;grid-template-columns:minmax(0,1fr) 1rem minmax(0,1fr);align-items:center;gap:.4rem;height:100%}.image-comparison-showcase__image[data-v-1211bca9]{position:relative;display:block;width:100%;min-width:0;aspect-ratio:1;overflow:hidden;padding:0;border:1px solid color-mix(in oklab,var(--peach-strong) 26%,var(--border-subtle));border-radius:var(--radius-lg);background:var(--bg-muted);box-shadow:0 6px 14px color-mix(in oklab,var(--peach-strong) 13%,transparent);cursor:zoom-in}.image-comparison-showcase__image--checkerboard[data-v-1211bca9]{background:conic-gradient(var(--bg-muted) 25%,var(--bg-elevated) 0 50%,var(--bg-muted) 0 75%,var(--bg-elevated) 0) 0 0 / 1.25rem 1.25rem}.image-comparison-showcase__image--text[data-v-1211bca9]{display:flex;align-items:flex-start;justify-content:flex-start;padding:2.25rem .85rem .85rem;background:color-mix(in oklab,var(--peach-wash) 42%,var(--bg-elevated));cursor:copy}.image-comparison-showcase__image--text[data-v-1211bca9] .image-comparison-showcase__text{display:-webkit-box;max-height:100%;overflow:hidden;margin:0;color:var(--text-primary);font-size:var(--text-label);line-height:1.55;overflow-wrap:anywhere;text-align:left;white-space:pre-wrap;-webkit-box-orient:vertical;-webkit-line-clamp:7}.image-comparison-showcase__image[data-v-1211bca9] img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.image-comparison-showcase__image[data-v-1211bca9]:focus-visible{outline:2px solid var(--peach-strong);outline-offset:2px}.image-comparison-showcase__image-label[data-v-1211bca9]{position:absolute;top:.55rem;left:.55rem;padding:.2rem .45rem;border-radius:4px;background:color-mix(in oklab,var(--bg-elevated) 88%,transparent);color:var(--text-primary);font-size:var(--text-caption);font-weight:700;line-height:1.2}.image-comparison-showcase__image-label--result[data-v-1211bca9]{background:color-mix(in oklab,var(--module-variation) 80%,var(--bg-elevated))}.image-comparison-showcase__arrow[data-v-1211bca9]{color:var(--peach-strong);font-size:1rem}.image-comparison-showcase__guide[data-v-1211bca9]{display:grid;grid-template-columns:repeat(var(--showcase-guide-count),minmax(0,1fr));isolation:isolate;min-height:3.5rem;margin-top:.75rem;padding:.25rem 0 .55rem}.image-comparison-showcase__guide[data-v-1211bca9]:before{content:"";position:absolute;z-index:-1;top:-.45rem;right:-1rem;bottom:-1rem;left:-1rem;background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--showcase-background-warm) 48%,var(--showcase-background)) 48%);-webkit-mask-image:linear-gradient(90deg,transparent,var(--text-primary) 13% 87%,transparent);mask-image:linear-gradient(90deg,transparent,var(--text-primary) 13% 87%,transparent);pointer-events:none}.image-comparison-showcase__guide[data-v-1211bca9]:after{content:"";position:absolute;left:-1rem;right:-1rem;bottom:-.65rem;height:.65rem;border-top:1px solid color-mix(in oklab,var(--peach-strong) 38%,var(--border-subtle));background:linear-gradient(180deg,color-mix(in oklab,var(--peach-strong) 20%,transparent),transparent);box-shadow:0 3px 5px -3px color-mix(in oklab,var(--text-primary) 18%,transparent),0 7px 12px -6px color-mix(in oklab,var(--peach-strong) 35%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--text-primary) 13% 87%,transparent);mask-image:linear-gradient(90deg,transparent,var(--text-primary) 13% 87%,transparent);pointer-events:none}.image-comparison-showcase__guide-step[data-v-1211bca9]{position:relative;display:flex;align-items:center;justify-content:center;gap:.55rem;min-width:0}.image-comparison-showcase__guide-step+.image-comparison-showcase__guide-step[data-v-1211bca9]:before{content:"";position:absolute;left:0;top:50%;width:1px;height:2.4rem;transform:translateY(-50%);background:color-mix(in oklab,var(--peach-strong) 28%,var(--border-subtle))}.image-comparison-showcase__guide-step[data-v-1211bca9] .image-comparison-showcase__guide-icon{flex:0 0 var(--showcase-guide-icon-size);width:var(--showcase-guide-icon-size);height:var(--showcase-guide-icon-size);color:var(--showcase-ink);font-size:var(--showcase-guide-icon-size)}.image-comparison-showcase__guide-step[data-v-1211bca9] strong,.image-comparison-showcase__guide-step[data-v-1211bca9] small{display:block}.image-comparison-showcase__guide-step[data-v-1211bca9] strong{color:var(--showcase-ink);font-size:var(--text-label);font-weight:700;line-height:1.2}.image-comparison-showcase__guide-step[data-v-1211bca9] small{margin-top:.05rem;color:var(--showcase-ink-muted);font-size:var(--text-overline);font-weight:600;line-height:1.25}@container (min-width: 38rem){.image-comparison-showcase__guide--three[data-v-1211bca9]{box-sizing:border-box;grid-template-columns:28fr 32fr 40fr;padding-left:3.375rem;padding-right:2.625rem}.image-comparison-showcase__guide--three .image-comparison-showcase__guide-step[data-v-1211bca9]:nth-child(-n+2){padding-left:.75rem}.image-comparison-showcase__guide--three .image-comparison-showcase__guide-step[data-v-1211bca9]:last-child{justify-content:flex-start;padding-left:2.7rem}.image-comparison-showcase__stage:not(.image-comparison-showcase__stage--single) .image-comparison-showcase__example[data-v-1211bca9]:not(.image-comparison-showcase__example--lead){position:relative;isolation:isolate}.image-comparison-showcase__stage:not(.image-comparison-showcase__stage--single) .image-comparison-showcase__example[data-v-1211bca9]:not(.image-comparison-showcase__example--lead):before{content:"";position:absolute;z-index:-1;top:-.65rem;right:-.7rem;bottom:-.7rem;left:-.7rem;border-radius:var(--radius-lg);background:radial-gradient(ellipse at 70% 75%,color-mix(in oklab,var(--showcase-background-warm) 58%,transparent),transparent 83%);box-shadow:0 9px 20px color-mix(in oklab,var(--peach-strong) 9%,transparent);pointer-events:none}.image-comparison-showcase__stage[data-v-1211bca9]:not(.image-comparison-showcase__stage--single){flex:none;-moz-column-gap:4.5rem;column-gap:4.5rem;row-gap:.85rem;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);grid-template-rows:repeat(2,auto);align-items:stretch}.image-comparison-showcase__stage:not(.image-comparison-showcase__stage--single) .image-comparison-showcase__pair[data-v-1211bca9]{height:auto}.image-comparison-showcase__stage:not(.image-comparison-showcase__stage--single) .image-comparison-showcase__image[data-v-1211bca9]{height:auto;aspect-ratio:1.05}.image-comparison-showcase__stage:not(.image-comparison-showcase__stage--single) .image-comparison-showcase__example--lead[data-v-1211bca9]{grid-row:span 2}.image-comparison-showcase__stage:not(.image-comparison-showcase__stage--single) .image-comparison-showcase__example--lead .image-comparison-showcase__pair[data-v-1211bca9]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 1rem minmax(0,1fr)}.image-comparison-showcase__stage:not(.image-comparison-showcase__stage--single) .image-comparison-showcase__example--lead .image-comparison-showcase__arrow[data-v-1211bca9]{justify-self:center;transform:rotate(90deg)}}@container (max-width: 38rem){.image-comparison-showcase__guide[data-v-1211bca9]{grid-template-columns:1fr}.image-comparison-showcase__guide-step[data-v-1211bca9]{justify-content:flex-start;padding:.35rem 0}.image-comparison-showcase__guide-step+.image-comparison-showcase__guide-step[data-v-1211bca9]:before{display:none}}
