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