.a-eye-structure {
  width: 100%;
  color: #27282e;
}

.a-eye-structure__map {
  position: relative;
  width: 100%;
  aspect-ratio: 1160 / 650;
  min-height: 610px;
}

.a-eye-structure__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.a-eye-structure__wires path,
.a-eye-mobile-wire path {
  fill: none;
  stroke: #7d829b;
  stroke-width: 1.8;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.a-eye-structure__wires .a-eye-structure__source-wire,
.a-eye-mobile-wire--sources path {
  stroke: #727d70;
}

.a-eye-structure .a-eye-node {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 112px;
  padding: 18px 17px;
  border: 1px solid #d9d5cb;
  border-radius: 13px;
  background: linear-gradient(145deg, #fffdf8 3%, #f6f3eb 68%, #ede9de);
  box-shadow: 0 13px 25px -17px #27282e66, 0 4px 0 -1px #e7e2d7, inset 0 1px 0 #fff;
  transform: translateY(-50%);
}

.a-eye-structure .a-eye-node h3 {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.01em;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.a-eye-structure .a-eye-node h3 span {
  display: block;
}

.a-eye-node__mark {
  display: inline-flex;
  gap: 4px;
  align-items: flex-end;
  height: 16px;
}

.a-eye-node__mark i {
  width: 11px;
  height: 11px;
  border: 1px solid #4353a4;
  border-radius: 3px;
  background: linear-gradient(135deg, #e9ecf6, #c7cee7);
  box-shadow: inset 1px 1px 0 #fff9;
}

.a-eye-node__mark i:nth-child(2) { height: 16px; }
.a-eye-node__mark i:nth-child(3) { background: #d4dccf; border-color: #81917e; }
.a-eye-node--collector .a-eye-node__mark i { height: 5px; width: 13px; }
.a-eye-node--core .a-eye-node__mark i { border-radius: 50%; }

.a-eye-structure .a-eye-node--management { left: 1%; top: 49.2308%; width: 20%; }
.a-eye-structure .a-eye-node--model { left: 28%; top: 15.3846%; width: 23%; }
.a-eye-structure .a-eye-node--collector { left: 28%; top: 69.2308%; width: 23%; }
.a-eye-structure .a-eye-node--core { left: 58%; top: 49.2308%; width: 16%; }
.a-eye-structure .a-eye-node--user { left: 81%; top: 49.2308%; width: 18%; }

.a-eye-structure .a-eye-node--core {
  border-color: #bfc7e1;
  background: linear-gradient(145deg, #f4f5fb, #e6eaf6 78%, #d8def0);
  box-shadow: 0 13px 25px -17px #4353a480, 0 4px 0 -1px #d3daf0, inset 0 1px 0 #fff;
}

.a-eye-sources { display: contents; }
.a-eye-sources__heading {
  position: absolute;
  left: 69%;
  top: 60%;
  width: 30%;
  margin: 0;
  color: #687065;
  font-size: 14px;
  line-height: 1.5;
}
.a-eye-sources__heading span { display: block; }

.a-eye-source {
  position: absolute;
  left: 69%;
  z-index: 1;
  width: 20%;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid #d3dacd;
  border-radius: 8px;
  background: linear-gradient(140deg, #f7f9f3, #eef2e9);
  box-shadow: inset 0 1px 0 #fff;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  font-weight: 550;
  overflow-wrap: anywhere;
  transform: translateY(-50%);
}
.a-eye-source--facebook { top: 70.4615%; }
.a-eye-source--instagram { top: 82.6154%; }
.a-eye-source--twitter { top: 94.4615%; }
.a-eye-mobile-wire { display: none; }

.a-eye-structure__relations {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .a-eye-structure__map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    aspect-ratio: auto;
    min-height: 0;
  }
  .a-eye-structure__wires { display: none; }
  .a-eye-structure .a-eye-node {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 108px;
    padding: 15px 12px;
    transform: none;
  }
  .a-eye-structure .a-eye-node h3 { font-size: 14px; }
  .a-eye-structure .a-eye-node--management,
  .a-eye-structure .a-eye-node--core,
  .a-eye-structure .a-eye-node--user {
    grid-column: 1 / 3;
    justify-self: center;
    width: 72%;
  }
  .a-eye-structure .a-eye-node--management { grid-row: 1; }
  .a-eye-structure .a-eye-node--model { grid-column: 1; grid-row: 3; }
  .a-eye-structure .a-eye-node--collector { grid-column: 2; grid-row: 3; }
  .a-eye-structure .a-eye-node--core { grid-row: 5; }
  .a-eye-structure .a-eye-node--user { grid-row: 7; }
  .a-eye-mobile-wire {
    display: block;
    grid-column: 1 / 3;
    width: 100%;
    height: 48px;
    overflow: visible;
  }
  .a-eye-mobile-wire--branch { grid-row: 2; }
  .a-eye-mobile-wire--merge { grid-row: 4; }
  .a-eye-mobile-wire--service { grid-row: 6; height: 40px; }
  .a-eye-sources {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 8;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid #d9d5cb;
  }
  .a-eye-sources__heading {
    position: static;
    grid-column: 1 / 4;
    width: auto;
    font-size: 14px;
    text-align: center;
  }
  .a-eye-mobile-wire--sources { grid-column: 1 / 4; height: 40px; }
  .a-eye-source {
    position: static;
    width: auto;
    min-height: 42px;
    padding: 10px 5px;
    font-size: 14px;
    align-content: center;
    transform: none;
  }
}