body {
  color: #1e293b;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
  background-attachment: fixed;
}

#foam-graphic {
  isolation: isolate;
}

#sim-interactive-cells,
#hero-cells-grid {
  pointer-events: none;
}

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

.sd-cell--good {
  background: rgba(13, 148, 136, .85);
  border: 1px solid rgba(45, 212, 191, .95);
  box-shadow: 0 0 0 1px rgba(13,148,136,.15), 0 0 12px rgba(13,148,136,.25);
}

.sd-cell--cold {
  background: rgba(217, 119, 6, .8);
  border: 1px solid rgba(251,191,36,.95);
  box-shadow: 0 0 12px rgba(217,119,6,.25);
  animation: adhesion-soft-pulse 1.25s ease-in-out infinite;
}

.sd-cell--void {
  background: rgba(220, 38, 38, .85);
  border: 1px solid rgba(248,113,113,.95);
  box-shadow: 0 0 14px rgba(239,68,68,.45);
  animation: adhesion-risk-blink .9s ease-in-out infinite;
}

.sd-cell--elongated {
  border-radius: 999px;
  transform: scaleX(1.55) scaleY(.78);
}

.sd-cell--collapsed {
  opacity: .82;
  transform: scale(.72);
}

.sd-hero-cell {
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  transition: all .28s ease;
}

.sd-hero-cell--good {
  background: rgba(20,184,166,.15);
  border: 1px solid rgba(45,212,191,.9);
}

.sd-hero-cell--cold {
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(251,191,36,.9);
  animation: adhesion-soft-pulse 1.25s ease-in-out infinite;
}

.sd-hero-cell--void {
  background: rgba(220,38,38,.26);
  border: 1px solid rgba(248,113,113,.95);
  animation: adhesion-risk-blink .9s ease-in-out infinite;
}

#foam-visual-status {
  position: absolute;
  right: 50%;
  bottom: 7px;
  z-index: 20;
  max-width: calc(100% - 20px);
  padding: 5px 12px;
  overflow: hidden;
  color: #ccfbf1;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 999px;
  transform: translateX(50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#sim-alert-box {
  min-height: 132px;
}

@keyframes adhesion-risk-blink {
  0%,
  100% {
    opacity: .95;
    transform: scale(.75);
  }

  50% {
    opacity: .52;
    transform: scale(1.05);
  }
}

@keyframes adhesion-soft-pulse {
  0%,
  100% {
    opacity: .95;
  }

  50% {
    opacity: .62;
  }
}

@media (max-width: 575.98px) {
  .sd-cell {
    width: 9px;
    height: 9px;
  }

  #foam-visual-status {
    bottom: 5px;
    font-size: 10px;
  }
}