.hp-cropper{gap:var(--hp-s-3);flex-direction:column;display:flex}.hp-cropper-pick{align-items:center;gap:var(--hp-s-2);padding:var(--hp-s-2) var(--hp-s-4);border:thin solid var(--hp-rule-2);border-radius:var(--hp-r);color:var(--hp-ink);cursor:pointer;align-self:flex-start;display:inline-flex}.hp-cropper-pick:focus-within{outline:2px solid var(--hp-accent);outline-offset:2px}.hp-cropper-pick-label{font-weight:600}.hp-cropper-pick input[type=file]{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hp-cropper-frame{justify-content:center;display:flex}.hp-cropper-canvas{width:calc(var(--hp-avatar-xl) * 3);height:calc(var(--hp-avatar-xl) * 3);border:thin solid var(--hp-rule-2);background:var(--hp-surface-2);touch-action:none;cursor:grab;border-radius:50%;max-width:100%}.hp-cropper-canvas:active{cursor:grabbing}.hp-cropper-controls{gap:var(--hp-s-2);flex-direction:column;display:flex}.hp-cropper-slider{grid-template-columns:minmax(0, var(--hp-measure-xs)) 1fr;align-items:center;gap:var(--hp-s-3);font-size:var(--hp-t-small);display:grid}.hp-cropper-slider input[type=range]{width:100%;accent-color:var(--hp-accent)}.hp-cropper-slider input[type=range]:focus-visible{outline:2px solid var(--hp-accent);outline-offset:2px}.hp-cropper-actions{justify-content:flex-end;gap:var(--hp-s-2);display:flex}