.ecosystem-master {
  min-height: 100vh;
}

.master-drop.open > div {
  display: grid;
}

@media (min-width: 901px) {
  .master-drop > div {
    top: 100%;
  }
}

.master-drop > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.eco-art {
  height: calc(100vh - 130px);
  min-height: 0;
  margin: 18px 4vw 18px 0;
  transform: scale(.88);
  transform-origin: center;
}

.hot::after {
  content: attr(data-name);
  position: absolute;
  top: 106%;
  left: 50%;
  transform: translateX(-50%);
  color: #182337;
  background: #fff;
  padding: .18rem .45rem;
  font-size: clamp(.68rem, 1vw, 1rem);
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  border-radius: 3px;
}

.h-analyse::after { color: #b30f35; }
.h-stock::after { color: #18839b; }
.h-move::after { color: #d8b900; }
.h-eat::after { color: #159878; }
.h-create::after { color: #a7b800; }

/* Keep the interactive navigation attached to the artwork. The supplied
   diagram already contains its own arrows, so duplicate paths are hidden. */
.eco-art svg,
.eco-art .follow-arrow {
  display: none;
}

.eco-art .hot {
  box-shadow: none;
  outline: 0 solid transparent;
  transition: transform .25s ease, filter .25s ease, outline-color .25s ease;
}

.eco-art .hot:hover,
.eco-art .hot:focus-visible {
  box-shadow: none;
  outline: 3px solid #a51062;
  outline-offset: 3px;
  transform: scale(1.035);
  filter: drop-shadow(0 0 10px #a5106280);
}

@media (max-width: 900px) {
  .ecosystem-master { min-height: auto; }
  .eco-art {
    width: 92vw;
    height: 86vw;
    min-height: 430px;
    margin: 0 auto 28px;
    transform: scale(.9);
  }
  .hot::after { font-size: .66rem; }
}

@media (max-width: 540px) {
  .eco-art {
    width: 96vw;
    height: 94vw;
    min-height: 390px;
    transform: scale(.86);
  }
}