@layer component{.s3Dh9W_ImageCropper{gap:var(--space-4);display:grid}.s3Dh9W_ImageCropper .s3Dh9W_toolbar{align-items:end;gap:var(--space-3);flex-wrap:wrap;display:flex}.s3Dh9W_ImageCropper .s3Dh9W_toolbar>*{min-inline-size:10rem}.s3Dh9W_ImageCropper .s3Dh9W_actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.s3Dh9W_ImageCropper .s3Dh9W_fields{align-items:start;gap:var(--space-3);border:0;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin:0;padding:0;display:grid}.s3Dh9W_ImageCropper .s3Dh9W_fields legend{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-block-end:var(--space-2);padding:0}.s3Dh9W_ImageCropper .s3Dh9W_options{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.s3Dh9W_ImageCropper .s3Dh9W_note{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.s3Dh9W_ImageCropper .s3Dh9W_stageWrap{gap:var(--space-2);justify-items:start;display:grid}.s3Dh9W_ImageCropper .s3Dh9W_stage{aspect-ratio:var(--aspect);inline-size:min(100%, calc(28rem * var(--aspect)));border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:repeating-conic-gradient(var(--color-bg-hover) 0 25%, var(--color-bg-raised) 0 50%) 0 0 / 1rem 1rem;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;max-inline-size:100%;position:relative;overflow:hidden}.s3Dh9W_ImageCropper .s3Dh9W_stage canvas{block-size:100%;inline-size:100%;display:block}.s3Dh9W_ImageCropper .s3Dh9W_box{inline-size:var(--w);block-size:var(--h);border:1px solid var(--color-text-primary);cursor:move;position:absolute;inset-block-start:var(--y);inset-inline-start:var(--x);box-shadow:0 0 0 100vmax #0009}.s3Dh9W_ImageCropper .s3Dh9W_box:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.s3Dh9W_ImageCropper .s3Dh9W_handle{border:1px solid var(--color-bg-base);background:var(--color-text-primary);block-size:.75rem;inline-size:.75rem;position:absolute;translate:-50% -50%}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=nw]{cursor:nwse-resize;inset-block-start:0;inset-inline-start:0}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=n]{cursor:ns-resize;inset-block-start:0;inset-inline-start:50%}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=ne]{cursor:nesw-resize;inset-block-start:0;inset-inline-start:100%}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=e]{cursor:ew-resize;inset-block-start:50%;inset-inline-start:100%}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=se]{cursor:nwse-resize;inset-block-start:100%;inset-inline-start:100%}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=s]{cursor:ns-resize;inset-block-start:100%;inset-inline-start:50%}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=sw]{cursor:nesw-resize;inset-block-start:100%;inset-inline-start:0}.s3Dh9W_ImageCropper .s3Dh9W_handle[data-handle=w]{cursor:ew-resize;inset-block-start:50%;inset-inline-start:0}}