.koi-avatar-cropper{position:fixed;inset:0;z-index:100050;display:flex;flex-direction:column;background:#050505;color:#fff;font-family:inherit;letter-spacing:0}
.koi-avatar-cropper__bar{height:60px;flex:0 0 60px;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;padding-top:env(safe-area-inset-top);box-sizing:content-box}
.koi-avatar-cropper__bar strong{text-align:center;font-size:17px;line-height:1.2;font-weight:600}
.koi-avatar-cropper button{font:inherit;letter-spacing:0}
.koi-avatar-cropper__icon,.koi-avatar-cropper__done,.koi-avatar-cropper__reset{border:0;background:transparent;color:#fff;cursor:pointer}
.koi-avatar-cropper__icon{width:44px;height:44px;margin:auto;border-radius:50%;font-size:30px;line-height:1}
.koi-avatar-cropper__done{height:44px;padding:0 16px;font-size:15px;font-weight:600}
.koi-avatar-cropper__body{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.koi-avatar-cropper__viewport{position:relative;width:min(100vw,calc(100vh - 156px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));aspect-ratio:1;touch-action:none;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.koi-avatar-cropper__viewport canvas{display:block;width:100%;height:100%}
.koi-avatar-cropper__grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.38) 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.38) 66.666%,transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.38) 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.38) 66.666%,transparent calc(66.666% + .5px))}
.koi-avatar-cropper__footer{min-height:76px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:72px 1fr 72px;align-items:center;color:rgba(255,255,255,.62);font-size:12px;text-align:center}
.koi-avatar-cropper__reset{grid-column:1;width:44px;height:44px;margin:auto;font-size:14px}
.koi-avatar-cropper__footer span{grid-column:2}
.koi-avatar-cropper button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:700px){.koi-avatar-cropper__viewport{width:min(560px,calc(100vh - 180px));border-radius:2px}.koi-avatar-cropper__bar{max-width:704px;width:100%;margin:0 auto}.koi-avatar-cropper__footer{max-width:704px;width:100%;margin:0 auto}}