* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.4; background: #000; color: #fff; }
.container { max-width: 900px; margin: 24px auto; padding: 0 16px; }

h1 { font-size: 20px; margin: 0 0 12px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
button { padding: 8px 12px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
button:active { transform: translateY(1px); }

#result { min-height: 1em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.cell { display: grid; place-items: center; height: 70px; border: 1px solid #ccc; border-radius: 6px; font-weight: 600; color: #fff; background: #333; }