.screen-lock-ux{max-width:760px;margin:0 auto}.screen-lock-ux .ux-card>.ux-primary,.screen-lock-ux .ux-card>.ux-outline{margin:12px;max-width:calc(100% - 24px)}.screen-lock-ux .ux-field{display:flex;flex-direction:column;gap:8px;padding:12px 16px}.lock-pattern{padding:12px 0}.lock-pattern-grid{display:grid;grid-template-columns:repeat(3,56px);gap:22px;justify-content:center;touch-action:none;padding:12px}.lock-pattern-dot{height:56px;border-radius:50%;border:2px solid var(--line,#3a536b);background:transparent;position:relative}.lock-pattern-dot:after{content:'';display:block;width:12px;height:12px;border-radius:50%;background:#8a9bad;margin:auto}.lock-pattern-dot.is-selected{border-color:#3285f5;background:#3285f522}.lock-pattern-dot.is-selected:after{background:#3285f5}.lock-pattern-dot:focus-visible{outline:3px solid #3285f5;outline-offset:3px}
.lock-pattern-grid{position:relative;width:236px;max-width:100%;box-sizing:border-box;margin:0 auto}.lock-pattern-dot{z-index:1;padding:0;cursor:pointer}.lock-pattern-trace{position:absolute;left:12px;top:12px;width:212px;height:212px;pointer-events:none}.lock-pattern-trace path{fill:none;stroke:#3285f5;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}