@scope([data-example]){[data-slot=image-cropper]{gap:var(--space-3);flex-direction:column;width:24rem;max-width:100%;display:flex}[data-slot=image-cropper][data-mode=frame]{width:18rem}[data-slot=image-cropper]>[data-slot=row]{gap:var(--space-2);flex-wrap:nowrap}[data-slot=image-cropper-viewport]{aspect-ratio:var(--image-cropper-aspect-ratio,32 / 21);border-radius:var(--radius-surface);background:var(--tint);max-height:24rem;box-shadow:inset 0 0 0 1px var(--line-faint)}[data-slot=image-cropper-viewport][data-mode=frame]{aspect-ratio:1;padding:var(--space-6);background:#0a0a0a}[data-slot=image-cropper-viewport][data-disabled]{opacity:.5}[data-slot=image-cropper-image]{object-fit:contain;width:100%;height:100%;display:block}[data-slot=image-cropper-selection]{outline:1px solid #fff;box-shadow:0 0 0 100vmax #00000080}[data-slot=image-cropper-selection][data-shape=circle]{border-radius:50%}[data-slot=image-cropper-selection]:focus-visible{outline:3px solid #fff}[data-slot=image-cropper-grid]{--grid-line:#fff9;border-radius:inherit;background:linear-gradient(to right, transparent calc(100% / 3 - .5px), var(--grid-line) 0 calc(100% / 3 + .5px), transparent 0 calc(200% / 3 - .5px), var(--grid-line) 0 calc(200% / 3 + .5px), transparent 0), linear-gradient(to bottom, transparent calc(100% / 3 - .5px), var(--grid-line) 0 calc(100% / 3 + .5px), transparent 0 calc(200% / 3 - .5px), var(--grid-line) 0 calc(200% / 3 + .5px), transparent 0);opacity:0}[data-slot=image-cropper-grid][data-dragging]{opacity:1}[data-slot=image-cropper-handle]{background:#fff;border-radius:2px;width:10px;height:10px;position:absolute;translate:-50% -50%;box-shadow:0 0 0 1px #0006}[data-slot=image-cropper-handle]:after{content:"";position:absolute;inset:-12px}[data-slot=image-cropper-handle][data-position*=n]{top:0}[data-slot=image-cropper-handle][data-position*=s]{top:100%}[data-slot=image-cropper-handle][data-position*=w]{left:0}[data-slot=image-cropper-handle][data-position*=e]{left:100%}[data-slot=image-cropper-handle]:is([data-position=n],[data-position=s]){left:50%}[data-slot=image-cropper-handle]:is([data-position=e],[data-position=w]){top:50%}[data-slot=image-cropper-handle]:focus-visible{outline:3px solid var(--halo);outline-offset:2px}[data-slot=image-cropper-zoom]{flex:1;min-width:0}[data-slot=image-cropper-result]{width:24rem;max-width:100%;height:7rem;padding:var(--space-2);border-radius:var(--radius-surface);background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-faint);justify-content:center;align-items:center;display:flex}[data-slot=image-cropper-result]>img{border-radius:var(--radius-row);max-width:100%;max-height:100%}[data-slot=image-cropper-avatar]{width:var(--size-lg);height:var(--size-lg);box-shadow:0 0 0 1px var(--line-faint);border-radius:50%}}