:root {
  --bg: #fff8ec;
  --fg: #2b2a33;
  --muted: #6b6a75;
  --a: #ff6b6b;
  --b: #ffb627;
  --c: #4ecdc4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

.card { max-width: 32rem; }

.letters { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1.5rem; }
.letters span {
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 1rem;
  color: #fff;
  font-size: 2.5rem; font-weight: 800;
  animation: bounce 1.6s ease-in-out infinite;
}
.letters span:nth-child(1) { background: var(--a); }
.letters span:nth-child(2) { background: var(--b); animation-delay: .2s; }
.letters span:nth-child(3) { background: var(--c); animation-delay: .4s; }

h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 .5rem; }
p { font-size: 1.125rem; line-height: 1.5; margin: .5rem 0; }
.muted { color: var(--muted); font-size: .875rem; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .letters span { animation: none; }
}