/* Desenho de colorir. */
.co-board{position:absolute;left:2%;right:27%;top:14%;bottom:4%;display:grid;place-items:center}
.co-paper{position:relative;height:100%;max-width:100%;aspect-ratio:1;border-radius:24px;background:#fffdf8;box-shadow:0 10px 22px #4b373926,inset 0 0 0 6px #fff;padding:4%}
.co-svg{display:block;width:100%;height:100%;overflow:visible}
.co-r{cursor:pointer;transition:fill .25s;outline:none;-webkit-tap-highlight-color:transparent}
.co-r:focus-visible{outline:none;stroke:#3fa0e0;stroke-width:6}
.co-under,.co-over{pointer-events:none}
.co-hint{animation:co-hint 1.1s ease-in-out infinite alternate}
@keyframes co-hint{to{fill:#fff1b8}}
.co-palette{position:absolute;right:2%;top:14%;bottom:4%;width:23%;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:2cqh 1.5cqw;align-items:center;justify-items:center}
.ap .co-pot{position:relative;width:100%;max-width:min(11cqw,17cqh);aspect-ratio:60/64;padding:0;border:0;background:none;box-shadow:none;transition:translate .2s,scale .2s}
.co-pot-art{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px #4b373924)}
.ap .co-pot.on{translate:0 -10%;scale:1.12}
.co-pot.on::before{content:'';position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 32%,transparent) 0 58%,transparent 62%);z-index:-1}
.co-brush{position:absolute;right:-22%;top:-30%;width:42%;aspect-ratio:.5;rotate:24deg;pointer-events:none;--c:inherit}
.co-brush svg{display:block;width:100%;height:100%}
.co-alive{animation:co-glow 1s ease-in-out 3 alternate}
@keyframes co-glow{to{box-shadow:0 10px 22px #4b373926,inset 0 0 0 6px #fff,0 0 0 10px #fff3a0}}
@container (max-aspect-ratio:3/4){
  .co-board{left:3%;right:3%;top:9%;bottom:28%}
  .co-paper{height:auto;width:100%;max-height:100%}
  .co-palette{left:3%;right:3%;top:auto;bottom:3%;width:auto;height:23%;grid-template-columns:repeat(4,1fr)}
  .ap .co-pot{max-width:min(18cqw,10cqh)}
}
@media(prefers-reduced-motion:reduce){.co-hint,.co-alive{animation:none}}