.dots-art{background:#e6f5ef;display:grid;place-items:center}.dots-preview{color:#3b7468;font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;line-height:1.05;text-align:center;transform:rotate(-4deg)}.dots-preview i{color:#f28c62;font-size:25px;font-style:normal}.dots-preview span{font-size:58px;line-height:1.3}.dots-board{width:min(100%,500px);margin:0 auto;padding:8px;border:3px solid #f1dcc4;border-radius:24px;background:#fffef9;box-shadow:0 7px 0 #f6e9d9}.dots-board svg{display:block;width:100%;height:auto;touch-action:none;user-select:none}.dots-cat-fill{fill:#ffe2b9;opacity:0;transition:opacity .5s}.dots-board.complete .dots-cat-fill{opacity:1}.dots-cat-face{opacity:.75;transition:opacity .5s}.dots-board.complete .dots-cat-face{opacity:1}.dots-hit{fill:transparent}.dots-point{fill:#263752;stroke:#fff;stroke-width:3}.dots-marker text{font:800 18px Nunito,system-ui,sans-serif;fill:#344157;paint-order:stroke;stroke:#fffef9;stroke-width:4px;pointer-events:none}.dots-marker.next .dots-point{fill:#f28c62;stroke:#ffe1bd;stroke-width:9;animation:dotPulse 1.1s ease-in-out infinite alternate}.dots-marker.done .dots-point{fill:#f28c62}.dots-marker.done text{fill:#a49a91}.dots-marker{cursor:pointer}.dots-marker:focus-visible{outline:none}.dots-marker:focus-visible .dots-point{stroke:#426fa4;stroke-width:10}.dots-progress{margin:18px auto 0;font-weight:900;color:#52637a;font-size:14px}.dots-board.complete{border-color:#9ed9b1}@keyframes dotPulse{to{stroke-width:15}}@media(max-width:500px){.dots-board{padding:3px;border-radius:16px}.dots-marker text{font-size:19px}.dots-preview{font-size:16px}.dots-preview span{font-size:45px}}