#robot-cell {
  --cell-signal: #56aaff;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: #101314;
}

#robot-cell .robot-cell-art {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 800 / 640;
}

#robot-cell .cell-vision,
#robot-cell .cell-control {
  opacity: 0;
  transition: opacity 220ms ease-out;
}

#robot-cell[data-mode="vision"] .cell-vision,
#robot-cell[data-mode="control"] .cell-control {
  opacity: 1;
}

#robot-cell[data-mode="vision"] {
  --cell-signal: #75e2ff;
}

#robot-cell[data-mode="control"] {
  --cell-signal: #a3c7ff;
}

#robot-cell .cell-signal-fill {
  fill: var(--cell-signal);
}

#robot-cell .cell-signal-stroke {
  stroke: var(--cell-signal);
}

@media (prefers-reduced-motion: reduce) {
  #robot-cell .cell-vision,
  #robot-cell .cell-control {
    transition: none;
  }
}