/* Circle crop for profile pictures */
.crp{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center;background:#000;padding:calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 24px);opacity:0;transition:opacity .2s}
.crp.on{opacity:1}.crp.out{opacity:0}
.crp-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:560px;padding:6px 16px 0;color:#fff}
.crp-top b{font-size:16px;font-weight:650}
.crp-tx{justify-self:start;height:38px;padding:0 4px;font-size:16px;color:rgba(255,255,255,.75)}
.crp-ok{justify-self:end;padding:0 16px;border-radius:99px;background:#fff;color:#0b0b10;font-weight:700}
.crp-stage{position:relative;width:min(88vw,420px);aspect-ratio:1;margin:auto 0 0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.crp-stage:active{cursor:grabbing}
.crp-stage img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
.crp-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.62);outline:2px solid rgba(255,255,255,.9);outline-offset:-2px;pointer-events:none}
.crp-zoom{display:flex;align-items:center;gap:12px;width:min(80vw,380px);margin:28px 0 0}
.crp-zoom svg{width:20px;height:20px;flex:none;fill:none;stroke:rgba(255,255,255,.6);stroke-width:2;stroke-linecap:round}
.crp-zoom input{flex:1;accent-color:#fff}
.crp-hint{margin:14px 0 auto;font-size:13px;color:rgba(255,255,255,.45)}