* { box-sizing: border-box; }

:root {
  color-scheme: light;
  --pixel: clamp(5px, 3vw, 15px);
  --ink: #be3455;
  --background: #fff5f7;
}

body {
  margin: 0;
  background: var(--background);
}

main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.message { margin: 0; }

.art {
  display: flex;
  align-items: center;
  gap: calc(var(--pixel) * 2);
}

.glyph {
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--pixel));
  grid-auto-rows: var(--pixel);
}

.glyph span { background: var(--ink); }
.glyph .empty { background: transparent; }
.heart { --ink: #ef476f; }