:root{--media-max-width:34em}.image-cropper{max-width:var(--d10e171c);flex-direction:column;align-items:center;gap:1rem;width:100%;margin:0 auto;display:flex}.image-cropper__canvas-container{aspect-ratio:var(--v03f25055);background-color:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--border-radius);max-width:60svmin;max-height:60svmin;width:var(--canvas-width,100%);margin:1rem 0;position:relative;overflow:hidden}.image-cropper__canvas-container--drag-over{background-color:var(--color-primary);border-color:var(--color-secondary)}.image-cropper__canvas-container--drag-over .image-cropper__canvas-overlay{background-color:red}.image-cropper__canvas{aspect-ratio:var(--aspect-ratio);touch-action:none;width:100%;display:block}.image-cropper__controls{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.image-cropper__image-controls{background-color:color-mix(in srgb,var(--color-foreground),transparent 50%);border-radius:var(--border-radius);margin:var(--space);padding:var(--space);z-index:10;grid-template-columns:repeat(3,1fr);grid-template-areas:"zoomOut.zoomIn"".panUp.""panLeft.panRight"".panDown.";gap:0;display:grid;position:absolute;top:0;left:0}.image-cropper__control-button--zoom-out{grid-area:zoomOut}.image-cropper__control-button--zoom-in{grid-area:zoomIn}.image-cropper__control-button--pan-left{grid-area:panLeft}.image-cropper__control-button--pan-right{grid-area:panRight}.image-cropper__control-button--pan-up{grid-area:panUp}.image-cropper__control-button--pan-down{grid-area:panDown}.image-cropper__overlay{pointer-events:none;z-index:1;position:absolute;inset:0}.image-cropper__overlay--circle{box-shadow:0 0 1000px 1000px color-mix(in srgb,var(--color-background),transparent 25%);border-radius:50%}.image-cropper__file-input{width:100%;padding:1rem}.image-cropper__zoom-info{color:#666;font-size:.875rem}.image-cropper__canvas-overlay{pointer-events:none;z-index:1;background-color:#0000001a;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.image-cropper__canvas-overlay span{background-color:var(--color-background);background-color:color-mix(in srgb,var(--color-primary),var(--color-background) 80%);border-radius:var(--border-radius);color:var(--color-primary);align-items:center;gap:var(--space);padding:var(--space);display:flex}.image-cropper__canvas-overlay span .icon{font-size:2em}#fileUploadInput{opacity:0;visibility:none;position:absolute}