html, body { 
  height: 100%; 
  margin: 0; 
}

body { 
  display: grid; 
  place-items: center; 
  background: #fff; 
  transition: background-color 0.3s ease; 
}

@media (prefers-color-scheme: dark) { 
  body { background: #000; } 
}

img { 
  max-width: 90vw; 
  max-height: 90vh; 
}

.logo { 
  margin: 0; 
  display: inline-grid; 
  gap: 0.5rem; 
  justify-items: stretch; 
}

.logo img { 
  display: block; 
}

.word { 
  display: flex; 
  justify-content: space-between; 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  font-size: clamp(18px, 8vw, 40px); 
  line-height: 1; 
  color: #000; 
  transition: color 0.3s ease; 
}

@media (prefers-color-scheme: dark) { 
  .word { color: #fff; } 
}

.word span { 
  transition: transform 0.2s ease; 
}

.word span:hover { 
  transform: translateY(-2px); 
}

figure:focus-within { 
  outline: 2px solid #0066cc; 
  outline-offset: 4px; 
}