*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #f4f4f4;
  transition: background-color 0.3s ease;
}

/* Dark mode styles */
body.dark-mode {
  background: #1a1a1a;
}

body.dark-mode .glyph-row img {
  filter: invert(1) brightness(1);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--stage-pad, clamp(0.5rem, 2vmin, 1.5rem));
  gap: var(--row-gap, clamp(0.5rem, 1.5vmin, 1rem));
}

.glyph-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--glyph-gap, clamp(0.35rem, 2.5vmin, 1.75rem));
  max-width: 100%;
  max-height: 100%;
}

.glyph-row img {
  display: block;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  /* Smaller size to fit all rows on screen */
  width: var(--glyph-size, min(8vmin, 12vw));
  max-height: min(12vh, 15vmin);
}