/* Continuous motion keeps the 40-account illustration in one place. */
.hm-window {
  position: relative;
  isolation: isolate;
}
.hm-live-status {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}
.hm-live-status i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: #1d86b8;
  box-shadow: 0 0 0 3px #1d86b813;
  animation: hm-live-pulse 1.6s ease-in-out infinite;
}
.hero-matrix[data-phase="publish"] .hm-live-status {
  color: #bf5b2d;
}
.hero-matrix[data-phase="publish"] .hm-live-status i {
  background: #eb743c;
  box-shadow: 0 0 0 3px #eb743c18;
}
.hm-tile {
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}
.hm-tile.is-restoring,
.hm-tile.is-message {
  background: #177cac;
  border-color: #177cac;
  box-shadow: 0 3px 12px #1d86b830;
}
.hm-tile.is-restoring .hm-tile-name,
.hm-tile.is-restoring .hm-tile-state,
.hm-tile.is-message .hm-tile-name,
.hm-tile.is-message .hm-tile-state {
  color: #fff;
}
.hm-tile.is-restoring .hm-tile-head,
.hm-tile.is-message .hm-tile-head {
  color: #d8f0fc;
}
.hm-tile.is-restoring .hm-tile-state:before,
.hm-tile.is-message .hm-tile-state:before {
  background: #fff;
}
.hm-tile.is-publishing {
  border-color: #e9763e;
  background: #ffdfc9;
  box-shadow:
    0 0 0 2px #eb743c16,
    0 4px 12px #eb743c20;
}
.hm-tile.is-publishing .hm-tile-state {
  color: #a2471e;
  font-weight: 600;
}
.hm-tile.is-publishing:after,
.hm-tile.is-message:after {
  display: none;
}
.hm-tile.is-published {
  background: #fff4ec;
  border-color: #efd6c5;
}
.hm-tile.is-published .hm-tile-state {
  color: #b96840;
}
.hm-tile.is-published .hm-tile-state:before {
  background: #eb743c;
}
.hm-tile-signal {
  position: absolute;
  right: -3px;
  top: -5px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #eb743c;
  opacity: 0;
  transform: scale(0.55);
  transition:
    opacity 0.2s,
    transform 0.3s;
  z-index: 2;
}
.hm-tile-signal .ic {
  width: 9px;
  height: 9px;
}
.hm-tile.is-published .hm-tile-signal {
  opacity: 1;
  transform: scale(1);
}
.hm-tile-meter {
  position: absolute;
  inset: auto 4px 2px;
  height: 2px;
  border-radius: 2px;
  background: #eb743c;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.hm-tile.is-publishing .hm-tile-meter {
  animation: hm-tile-fill 640ms linear both;
}
.hm-flow {
  gap: 10px;
  padding-block: 11px;
}
.hm-flow > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 5px;
  transition:
    color 0.3s,
    background 0.3s;
}
.hm-flow > span.is-active {
  background: #e7f3fa;
  color: #136e9a;
}
.hero-matrix[data-phase="publish"] .hm-flow > span.is-active {
  background: #fff0e5;
  color: #b65429;
}
.hm-flow > span.is-active:before {
  flex: none;
}
.hm-work > div {
  flex: 1;
}
.hm-work-progress {
  margin-top: 7px;
  background: #deebf3;
  overflow: hidden;
  height: 3px;
  border-radius: 3px;
}
.hm-work-progress > i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--hm-progress, 0));
  transform-origin: left;
  transition:
    transform 0.1s linear,
    background 0.3s;
  background: #1d86b8;
}
.hero-matrix[data-phase="publish"] .hm-work-progress > i {
  background: #eb743c;
}
.hm-inbox {
  transition:
    background 0.3s,
    border-color 0.3s;
  font-variant-numeric: tabular-nums;
}
.hm-inbox.is-receiving {
  color: #0d70a0;
  background: #e9f5fc;
  border-color: #84bfdd;
  animation: hm-inbox-receive 700ms ease-out infinite;
}
.hm-transfers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.hm-transfer-routes,
.hm-transfer-packets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hm-transfer-routes path {
  fill: none;
  stroke: #eb743c;
  stroke-width: 1.25;
  stroke-dasharray: 3 5;
  opacity: 0;
  animation: hm-route 620ms ease both;
}
.hm-transfer-routes path.is-incoming {
  stroke: #1d86b8;
}
.hm-packet {
  position: absolute;
  left: -9px;
  top: -9px;
  display: grid;
  place-items: center;
  height: 18px;
  width: 18px;
  border: 1.5px solid #fff;
  background: #eb743c;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px #bd643b30;
  opacity: 0;
  animation: hm-transfer 500ms ease-in-out both;
}
.hm-packet.is-incoming {
  background: #1d86b8;
  border-radius: 6px 6px 6px 1px;
  box-shadow: 0 2px 8px #1d86b83b;
}
.hm-packet .ic {
  height: 11px;
  width: 11px;
}
.hero-matrix:not(.is-running) *,
.hero-matrix:not(.is-running) *:before,
.hero-matrix:not(.is-running) *:after {
  animation-play-state: paused !important;
}
@keyframes hm-live-pulse {
  50% {
    opacity: 0.45;
  }
}
@keyframes hm-tile-fill {
  0% {
    opacity: 1;
    transform: scaleX(0.08);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes hm-route {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  65% {
    opacity: 0.42;
  }
  100% {
    stroke-dashoffset: -20;
  }
}
@keyframes hm-transfer {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) scale(0.6);
  }
  12% {
    opacity: 1;
  }
  50% {
    transform: translate(var(--mid-x), var(--mid-y)) scale(1);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--to-x), var(--to-y)) scale(0.7);
  }
}
@keyframes hm-inbox-receive {
  0%,
  100% {
    box-shadow: 0 0 0 0 #1d86b800;
  }
  50% {
    box-shadow: 0 0 0 3px #1d86b81c;
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .hm-header {
    gap: 8px;
  }
  .hm-live-status {
    font-size: 8px !important;
    gap: 4px;
  }
  .hm-flow {
    gap: 3px;
  }
  .hm-flow > span {
    padding-inline: 5px;
  }
}
@media (max-width: 440px) {
  .hm-header {
    gap: 7px;
  }
  .hm-live-status {
    font-size: 8px !important;
    gap: 4px;
  }
  .hm-live-status i {
    display: none;
  }
  .hm-flow {
    gap: 4px;
  }
  .hm-flow > span {
    padding-inline: 5px;
  }
  .hm-packet {
    width: 15px;
    height: 15px;
    left: -7.5px;
    top: -7.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-matrix *,
  .hero-matrix *:before,
  .hero-matrix *:after {
    animation: none !important;
    transition: none !important;
  }
  .hm-transfers {
    display: none;
  }
}