.blur-face-layout{grid-template-columns:minmax(0,1fr) 310px;gap:18px;margin-top:18px;display:grid}.blur-face-layout>main,.blur-face-layout>aside{background:#fff;border:1px solid #dce5f2;border-radius:14px;box-shadow:0 9px 28px #1923520d}.blur-face-layout>main{overflow:hidden}.blur-face-layout main>header{border-bottom:1px solid #e1e8f2;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.blur-face-layout main>header strong,.blur-face-layout main>header small{display:block}.blur-face-layout main>header strong{color:#172443;font-size:.76rem}.blur-face-layout main>header small{color:#71809b;margin-top:3px;font-size:.63rem}.blur-face-layout main>header button{color:#405171;cursor:pointer;background:#fff;border:1px solid #cbd8ec;border-radius:8px;padding:8px 11px;font-weight:800}.blur-face-workspace{background:#f3f6fb;place-items:center;height:clamp(500px,100vh - 315px,690px);padding:20px;display:grid;overflow:auto}.blur-face-stage{touch-action:none;width:min(100%,920px);max-height:650px;position:relative;box-shadow:0 5px 22px #14224626}.blur-face-stage canvas{object-fit:fill!important;width:100%!important;max-width:none!important;height:100%!important;display:block!important;position:static!important}.blur-box{z-index:3;cursor:move;border:1px solid #4d8cff;position:absolute}.blur-box.selected{box-shadow:0 0 0 1px #4d8cff}.blur-box:before,.blur-box:after,.blur-box i{content:"";background:#4d8cff;border:2px solid #fff;border-radius:50%;width:11px;height:11px;position:absolute}.blur-box:before{top:-7px;left:-7px}.blur-box:after{top:-7px;right:-7px}.blur-box i{cursor:nwse-resize;bottom:-7px;right:-7px}.blur-box>button{color:#d93939;cursor:pointer;background:#fff;border:1px solid #dce3ee;border-radius:7px;place-items:center;width:32px;height:32px;display:none;position:absolute;top:-39px;left:50%;transform:translate(-50%);box-shadow:0 3px 10px #14224626}.blur-box.selected>button{display:grid}.blur-detecting{z-index:5;color:#2563eb;background:#f7faffd1;place-content:center;place-items:center;gap:8px;display:grid;position:absolute;inset:0}.blur-face-layout main>footer{border-top:1px solid #e1e8f2;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.blur-face-layout main>footer button{cursor:pointer;border:0;border-radius:8px;align-items:center;gap:7px;padding:10px 13px;font-weight:850;display:flex}.blur-remove{color:#dc3e3e;background:#fff0f0}.blur-download{color:#fff;background:var(--brand-hero-gradient)}.blur-face-layout>aside{flex-direction:column;height:max-content;min-height:520px;padding:18px;display:flex;position:sticky;top:14px}.blur-mode-tabs{border-top:1px solid #e0e6ef;border-bottom:1px solid #e0e6ef;grid-template-columns:1fr 1fr;margin:18px -18px 0;display:grid}.blur-mode-tabs button{color:#8c92a2;cursor:pointer;background:#fff;border:0;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:88px;font-weight:750;display:flex}.blur-mode-tabs button+button{border-left:1px solid #e0e6ef}.blur-mode-tabs button.active{color:#172443;box-shadow:inset 0 -3px #4c8cff}.blur-sensitivity{margin:12px -18px 0;display:grid}.blur-sensitivity button{color:#4c7fff;text-transform:capitalize;cursor:pointer;background:#fff;border:0;border-bottom:1px solid #e0e6ef;justify-content:space-between;align-items:center;height:47px;padding:0 18px;display:flex}.blur-sensitivity button.active{background:#f2f4fb}.blur-sensitivity span{color:#fff;background:#46c987;border-radius:50%;place-items:center;width:22px;height:22px;display:grid}.blur-custom-note{color:#62718c;background:#f4f7fc;border-radius:9px;margin-top:16px;padding:12px;font-size:.67rem;line-height:1.55}.blur-add{color:#3d78f3;cursor:pointer;background:#fff;border:1px solid #4c85ff;border-radius:8px;align-items:center;gap:6px;margin:22px auto;padding:8px 11px;font-weight:800;display:flex}.blur-strength{border-top:1px solid #e1e8f2;padding-top:18px}.blur-strength label{color:#405171;gap:10px;font-size:.7rem;font-weight:800;display:grid}.blur-strength label span{justify-content:space-between;display:flex}.blur-face-layout aside>.image-transform-run{width:100%;margin-top:auto}@media (max-width:950px){.blur-face-layout{grid-template-columns:1fr}.blur-face-layout>aside{min-height:440px;position:static}.blur-face-workspace{height:600px}}@media (max-width:620px){.blur-face-workspace{height:440px;padding:8px}.blur-face-layout main>footer{flex-direction:column;align-items:stretch;gap:8px}.blur-face-layout main>footer button{justify-content:center}}
.blur-box{background:#4d8cff0f}.blur-box.selected{border-width:2px;box-shadow:0 0 0 1px #fff,0 0 0 3px #4d8cff}