body {
  color: #0f172a;
  background: linear-gradient(135deg, #f8fafc 0%, #eef6f5 45%, #e2e8f0 100%);
  background-attachment: fixed;
}

.cell {
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: 999px;
  transition:
    transform .25s ease,
    opacity .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

.cell.good {
  background: #14b8a6;
  box-shadow: 0 0 12px rgba(20,184,166,.32);
}

.cell.warn {
  background: #f59e0b;
  transform: scaleX(1.35) scaleY(.85);
  animation: density-soft-pulse 1.15s infinite;
}

.cell.risk {
  background: #dc2626;
  animation: density-risk-blink .8s infinite;
}

.cell.flat {
  transform: scale(.72);
}

@keyframes density-soft-pulse {
  50% {
    opacity: .55;
  }
}

@keyframes density-risk-blink {
  50% {
    opacity: .45;
    transform: scale(1.12);
  }
}

@media (min-width: 1024px) {
  .soft-card strong {
    font-size: .88rem;
  }

  .soft-card p {
    line-height: 1.65;
  }

  .cell {
    width: 10px;
    height: 10px;
  }
}