.text-button{display:block;margin:16px auto 0;border:0;background:transparent;color:#315044;font-weight:750;text-align:center;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pattern-grid{position:relative;width:260px;height:260px;margin:18px auto 8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.pattern-lines{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pattern-stroke{fill:none;stroke:#315044;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.pattern-dot{display:block;position:relative;z-index:2;width:24px;height:24px;border:3px solid #315044;border-radius:50%;background:#f5efe5;box-shadow:0 0 0 10px rgba(49,80,68,.10);transition:transform .12s,background .12s}
.pattern-dot.selected{background:#c58b5b;border-color:#22342d;transform:scale(1.2)}
.pattern-dot.error{background:#b85d5d;border-color:#7d3535}
.pattern-hint{min-height:22px;margin:4px 0 0;text-align:center;color:#7b8580;font-size:.83rem}
.pattern-hint.error{color:#b85d5d;font-weight:700}
.pattern-user-label{max-width:260px;margin:14px auto 0}
@media(max-width:360px){.pattern-grid{width:225px;height:225px}}