:root[data-game=kropki]{--brand-100:#ede9fe;--brand-300:#c4b5fd;--brand-400:#8b5cf6;--brand-text:#000}.kropki-board-area{aspect-ratio:var(--kropki-ratio);min-height:calc(245px / var(--kropki-ratio));container-type:size}.kropki-board{width:min(100cqw, 100cqh * var(--kropki-ratio));flex-shrink:0}.kropki-cell{fill:#f0f0f0}.dark .kropki-cell{fill:#29313f}