.home-story-chart {
  margin: 42px 0 10px;
  overflow: hidden;
  border: 1px solid #d9d6ce;
  border-radius: 22px;
  background: #faf9f6;
  box-shadow: 0 20px 50px rgb(0 0 0 / 9%);
}

.home-story-chart .home-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  border-bottom: 1px solid #dfdcd5;
  background: rgb(255 255 255 / 76%);
}

.home-chart-head > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.home-chart-kicker {
  color: #e8341c;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home-chart-head strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-chart-legend {
  display: flex;
  flex: none;
  gap: 15px;
  color: #68645d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.home-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-chart-legend i {
  display: block;
  width: 20px;
  height: 2px;
  background: #181817;
}

.home-chart-legend i.is-arrow {
  position: relative;
  background: #e8341c;
}

.home-chart-legend i.is-arrow::after {
  position: absolute;
  top: -3px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #e8341c;
  content: "";
}

.home-chart-legend i.is-broken {
  background: repeating-linear-gradient(90deg, #e8341c 0 4px, transparent 4px 7px);
}

.home-story-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.home-chart-canvas {
  fill: #faf9f6;
}

.home-connection {
  fill: none;
  stroke: #191918;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: opacity .2s ease, stroke-width .2s ease;
}

.home-connection.is-red {
  stroke: #e8341c;
  stroke-width: 3;
}

.home-connection.is-broken {
  stroke: #e8341c;
  stroke-width: 2.5;
  stroke-dasharray: 7 7;
}

.home-person,
.home-relation-tag {
  transition: opacity .2s ease;
}

.home-person {
  cursor: pointer;
  outline: none;
}

.home-person .avatar {
  fill: #fff;
  stroke: #171716;
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 5px 7px rgb(0 0 0 / 10%));
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), stroke .2s ease, stroke-width .2s ease;
}

.home-person .pulse {
  fill: rgb(232 52 28 / 11%);
}

.home-person .inner-ring {
  fill: none;
  stroke: rgb(255 255 255 / 52%);
  stroke-width: 1.5;
}

.home-person .initial,
.home-person .name {
  fill: #171716;
  font-family: Archivo, Arial, sans-serif;
  font-weight: 900;
  text-anchor: middle;
  pointer-events: none;
}

.home-person .initial {
  font-size: 20px;
}

.home-person .name {
  font-size: 9px;
  letter-spacing: 1.5px;
}

.home-person.is-main .avatar {
  fill: #e8341c;
  stroke: #e8341c;
}

.home-person.is-main .initial {
  fill: #fff;
  font-size: 29px;
}

.home-relation-tag rect {
  fill: #fff;
  stroke: #d8d4cc;
  stroke-width: 1;
  rx: 12px;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 6%));
}

.home-relation-tag text {
  fill: #4e4b45;
  font-family: Archivo, Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .8px;
  text-anchor: middle;
}

.home-relation-tag.is-red rect {
  fill: #fff1ee;
  stroke: #e8341c;
}

.home-relation-tag.is-red text {
  fill: #d62f19;
}

.home-person:hover .avatar,
.home-person:focus .avatar,
.home-person.is-related .avatar {
  stroke: #e8341c;
  stroke-width: 4;
}

.home-person:hover .avatar,
.home-person:focus .avatar {
  transform: scale(1.09);
}

.home-story-chart.is-filtering .home-connection,
.home-story-chart.is-filtering .home-person,
.home-story-chart.is-filtering .home-relation-tag {
  opacity: .13;
}

.home-story-chart.is-filtering .is-related {
  opacity: 1;
}

.home-story-chart.is-pending .home-connection,
.home-story-chart.is-pending .home-person,
.home-story-chart.is-pending .home-relation-tag {
  opacity: 0;
}

.home-story-chart.is-animating .home-connection:not(.is-broken) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: home-draw-connection .72s cubic-bezier(.4, 0, .2, 1) both;
}

.home-story-chart.is-animating .home-connection:nth-of-type(2) { animation-delay: .08s; }
.home-story-chart.is-animating .home-connection:nth-of-type(3) { animation-delay: .16s; }
.home-story-chart.is-animating .home-connection:nth-of-type(4) { animation-delay: .24s; }
.home-story-chart.is-animating .home-connection:nth-of-type(5) { animation-delay: .32s; }

.home-story-chart.is-animating .home-connection.is-broken {
  animation: home-fade-in .45s .38s ease both;
}

.home-story-chart.is-animating .home-person .avatar,
.home-story-chart.is-animating .home-person .pulse,
.home-story-chart.is-animating .home-person .inner-ring {
  animation: home-node-pop .42s cubic-bezier(.2, .9, .24, 1.28) both;
}

.home-story-chart.is-animating .home-person.d1 .avatar { animation-delay: .42s; }
.home-story-chart.is-animating .home-person.d2 .avatar { animation-delay: .48s; }
.home-story-chart.is-animating .home-person.d3 .avatar { animation-delay: .54s; }
.home-story-chart.is-animating .home-person.d4 .avatar,
.home-story-chart.is-animating .home-person.d4 .pulse,
.home-story-chart.is-animating .home-person.d4 .inner-ring { animation-delay: .6s; }
.home-story-chart.is-animating .home-person.d5 .avatar { animation-delay: .66s; }
.home-story-chart.is-animating .home-person.d6 .avatar { animation-delay: .72s; }

.home-story-chart.is-animating .home-person .initial,
.home-story-chart.is-animating .home-person .name,
.home-story-chart.is-animating .home-relation-tag {
  animation: home-fade-up .34s .72s ease both;
}

.home-story-chart figcaption {
  margin: 0;
  padding: 12px 22px 14px;
  border-top: 1px solid #dfdcd5;
  background: rgb(255 255 255 / 76%);
  color: #68645d;
  font-size: 10px;
  letter-spacing: .02em;
}

@keyframes home-draw-connection {
  to { stroke-dashoffset: 0; }
}

@keyframes home-node-pop {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes home-fade-up {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes home-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 620px) {
  .home-story-chart .home-chart-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px;
  }

  .home-chart-legend {
    gap: 11px;
  }

  .home-story-chart figcaption {
    padding: 10px 16px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-story-chart * {
    animation: none !important;
    transition: none !important;
  }
}