.pattern-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e6f6ff,#a4e4f5 52%,#72d0ec);color:#294f68;isolation:isolate}.pattern-orb{position:absolute;border-radius:50%;filter:blur(25px);z-index:-1;pointer-events:none}.pattern-orb-one{width:520px;height:520px;background:radial-gradient(circle,#fff9,transparent 70%);top:-160px;left:-120px}.pattern-orb-two{width:600px;height:600px;background:radial-gradient(circle,#24b8e970,transparent 70%);right:-180px;bottom:-220px}.pattern-card{width:100%;max-width:430px;padding:30px 42px 24px;text-align:center;border:1px solid #ffffffc4;border-radius:36px;background:linear-gradient(140deg,#ffffff9c,#e9fbff40);box-shadow:0 28px 80px #237ba126,inset 0 1px 0 #fff,0 2px 5px #ffffff40;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}.pattern-brand.beam-wordmark{display:flex;align-items:center;justify-content:center;margin-bottom:24px}.pattern-card h1{font-size:22px;line-height:1.3;letter-spacing:-.5px;font-weight:500;margin:0;color:#294f68}.pattern-grid{width:280px;height:280px;margin:24px auto 8px;display:grid;grid-template-columns:repeat(3,80px);grid-template-rows:repeat(3,80px);gap:20px;position:relative}.pattern-grid svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.pattern-grid polyline{fill:none;stroke:#35a8d9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 5px #38b8e950)}.pattern-dot{display:grid;place-items:center;border-radius:50%;position:relative;-webkit-tap-highlight-color:transparent;background:transparent;border:0;cursor:pointer}.pattern-dot span{width:15px;height:15px;border-radius:50%;background:#6aa3bd;border:2px solid #ffffffd9;box-shadow:0 2px 7px #3f88a525;transition:transform .18s,box-shadow .18s,background .18s}.pattern-dot.selected span{background:#218ec4;transform:scale(1.15);box-shadow:0 0 0 10px #ffffff65,0 0 0 11px #ffffffbd,0 0 22px #5cc9ec90}.pattern-dot:not(:disabled):hover span{background:#218ec4;box-shadow:0 0 0 9px #ffffff45}.pattern-dot:focus-visible{outline:2px solid #2589c4;outline-offset:-8px}.pattern-status{min-height:20px;font-size:12px;color:#476c83;margin-bottom:12px}.pattern-status,.pattern-unlock{display:flex;justify-content:center;align-items:center}.pattern-unlock{width:100%;min-height:50px;gap:12px;border-radius:18px;border:1px solid #ffffffa3;background:linear-gradient(135deg,#a0e2f5,#71c8e8);color:#24516a;font-weight:500;font-size:14px;box-shadow:0 8px 20px #4babcb20,inset 0 1px 0 #ffffff8c;transition:opacity .2s,transform .2s}.pattern-unlock:not(:disabled):hover{transform:translateY(-1px)}.pattern-unlock:disabled{opacity:.45;cursor:default}.pattern-reset{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 18px 0;font-size:11px;color:#52788e}.pattern-reset:disabled{opacity:.4}@media(max-width:390px){.pattern-card{padding:26px 16px 20px}.pattern-grid{transform:scale(.9);margin-top:8px;margin-bottom:-8px}.pattern-card h1{font-size:22px}}@media(prefers-reduced-motion:reduce){.pattern-screen *{transition:none!important}}