.dots-hero{padding:40px 0}.dots-section{padding-top:30px}.dots-panel{max-width:800px;margin:20px auto}.dots-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.dots-header h2{font-size:clamp(1.5rem,4vw,2.2rem);margin-bottom:8px}.dots-header img{width:82px;height:82px;object-fit:cover;border-radius:24px}.dots-help{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0;color:#704598}.dots-help .pill{margin-left:auto}.dot-example{display:grid;place-items:center;background:#885abb;color:white;border-radius:50%;width:35px;height:35px;font-weight:900}.dots-board{position:relative;width:min(100%,580px);aspect-ratio:1;background:#fffdf8;border:2px solid #e9d9f5;border-radius:28px;margin:0 auto;isolation:isolate}.dots-board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.drawing-dot{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border:2px solid #c9b3df;border-radius:50%;background:white;color:#785895;font-weight:900;font-size:1rem;z-index:1;touch-action:manipulation}.drawing-dot.next{background:#885abb;color:white;border:3px solid white;box-shadow:0 0 0 5px #dcc3f2;animation:dot-glow 1.6s ease-in-out infinite}.drawing-dot.done{background:#e9ddf5;color:#65438a;border-color:#b895d7;opacity:1}.drawing-dot.waiting:hover{background:#f7efff}.drawing-dot:focus-visible{outline:3px solid #eea244;outline-offset:7px}.dots-board.complete{background:#fbfff5;border-color:#bed9a5}.dots-count{font-weight:900;text-align:center;color:#7a4fa8;margin:18px 0 0}.dots-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin:16px 0}.dots-trail{display:flex;justify-content:center;gap:16px;margin:25px 0 0;color:#e0d5ea}.dots-trail .current{color:#885abb}.dots-trail .visited{color:#6b9859;font-weight:900}.dots-panel .feedback{text-align:center;min-height:3em}@keyframes dot-glow{50%{box-shadow:0 0 0 9px #eadcf6}}@media(max-width:520px){.dots-header img{width:65px;height:65px}.dots-help{font-size:.9rem;gap:10px}.dots-help .pill{margin-left:0}.drawing-dot{width:44px;height:44px;font-size:.92rem}.dots-board{border-radius:20px}.dots-panel{padding:16px}.dots-hero h1{font-size:2.5rem}.dots-help strong{flex:1}.dots-help .pill{font-size:.8rem}}@media(prefers-reduced-motion:reduce){.drawing-dot.next{animation:none}}.dots-actions [hidden]{display:none!important}