styles = htl.html`<style>
.viewport {
--border-color: #ddd;
--border-width: 1px;
width: ${viewportSize}px;
height: ${viewportSize}px;
background-color: var(--border-color);
overflow: auto;
border: var(--border-width) solid var(--border-color);
}
.grid {
display: grid;
grid-template-columns: repeat(${cols}, ${cellSize}px);
grid-template-rows: repeat(${cols}, ${cellSize}px);
gap: var(--border-width);
}
.cell {
background-color: white;
}
.cell {
display: grid;
place-items: center;
scroll-snap-align: start end;
}
.cell--dot::before {
content: '';
background-color: var(--dot-fill, red);
border-radius: 50%;
position: sticky;
inset: 0;
width: calc(var(--cell-size) * .333);
aspect-ratio: 1;
}
.main {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.main p {
margin-top: 0;
}
</style>`