.demo { max-width: 980px; margin: 0 auto; padding: 1rem; }
.controls { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.warn { background: #fff3cd; border: 1px solid #ffe69c; padding: .5rem .75rem; border-radius: 6px; margin: .5rem 0; }
.grids { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; aspect-ratio: 1; }
.cell { background: #e9ecef; transition: background .08s linear; }
.meta { font: 12px/1.4 monospace; color: #555; margin-top: .25rem; }
.summary { margin-top: 1rem; font: 14px/1.6 monospace; }
@media (max-width: 720px) { .grids { grid-template-columns: 1fr; } }