.connected-portfolio {
  --connection-cycle: 3.6s;
  background: #071a35;
  font-family: 'Poppins', sans-serif;
  isolation: isolate;
}
.connected-portfolio__scene {
  position: relative;
  aspect-ratio: 520 / 450;
  background: radial-gradient(ellipse at 50% 49%, #154e7d 0, #0b2546 38%, #071a35 75%);
}
.connected-portfolio__scene::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: linear-gradient(#7bb9dc 1px, transparent 1px), linear-gradient(90deg, #7bb9dc 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse, #000, transparent 75%);
  pointer-events: none;
}
.connected-portfolio__heading {
  position: absolute;
  inset: 5% 0 auto;
  text-align: center;
  color: #a9d7ee;
  font-size: clamp(8px, 1vw, 10px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.connected-portfolio__network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}
.connected-portfolio__route { stroke: #6dbde2; stroke-width: 1.2; opacity: .32; }
.connected-portfolio__signal {
  stroke: #a0ecff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 12 100;
  stroke-dashoffset: 112;
  opacity: 0;
  filter: drop-shadow(0 0 4px #50caff);
  animation: portfolio-connection var(--connection-cycle) linear infinite;
  animation-delay: calc(var(--order) * -.18s);
  animation-play-state: paused;
}
.connected-portfolio__halo {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 40%;
  aspect-ratio: 1;
  border: 1px solid #70c8f036;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: portfolio-halo var(--connection-cycle) ease-in-out infinite;
  animation-play-state: paused;
}
.connected-portfolio__halo--outer { width: 52%; border-style: dashed; opacity: .45; }
.connected-portfolio__hub {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 31%;
  min-height: 68px;
  padding: 16px 12px 12px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #b6e4ff;
  border-radius: 18px;
  background: #f5fbff;
  box-shadow: 0 0 35px #48bdff35, 0 14px 30px #0003;
}
.connected-portfolio .connected-portfolio__hub img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.connected-portfolio__hub span { color: #365470; font-size: clamp(7px, .9vw, 9px); font-weight: 500; }
.connected-portfolio__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 25%;
  height: 17%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid #bbdcf466;
  border-radius: 14px;
  background: #fff;
  color: #35506b;
  box-shadow: 0 8px 24px #0002;
  text-decoration: none;
  animation: portfolio-node var(--connection-cycle) ease-in-out infinite;
  animation-delay: calc(var(--order) * -.18s);
  animation-play-state: paused;
}
.connected-portfolio .connected-portfolio__node img {
  display: block;
  width: 100%;
  max-width: 106px;
  height: 32px;
  aspect-ratio: auto;
  object-fit: contain;
}
.connected-portfolio .connected-portfolio__node--1me img { height: 36px; max-width: 60px; }
.connected-portfolio .connected-portfolio__node--waypass img { max-width: 75px; }
.connected-portfolio__node span { font-size: clamp(7px, .8vw, 9px); font-weight: 500; text-align: center; }
.connected-portfolio__node:hover { border-color: #48b9f2; box-shadow: 0 0 22px #66cfff66; }
.connected-portfolio__node:focus-visible, .connected-portfolio__toggle:focus-visible { outline: 3px solid #73d8ff; outline-offset: 4px; }
.connected-portfolio__tools {
  position: absolute;
  inset: auto 4% 3%;
  display: flex;
  justify-content: center;
  gap: 12px;
  color: #b7d7ef;
  font-size: clamp(7px, .8vw, 9px);
}
.connected-portfolio__tools span { display: inline-flex; align-items: center; gap: 4px; }
.connected-portfolio__tools .icon { width: 12px; height: 12px; flex-shrink: 0; }
.connected-portfolio .connected-portfolio__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
}
.connected-portfolio__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #8cb8d666;
  border-radius: 20px;
  background: transparent;
  color: #d4e9f7;
  font: inherit;
  cursor: pointer;
}
.connected-portfolio__toggle[hidden] { display: none; }
.connected-portfolio__toggle:disabled { cursor: default; opacity: .7; }
.connected-portfolio[data-running='true'] .connected-portfolio__signal,
.connected-portfolio[data-running='true'] .connected-portfolio__halo,
.connected-portfolio[data-running='true'] .connected-portfolio__node { animation-play-state: running; }
:root[data-motion='paused'] .connected-portfolio *,
:root[data-page-hidden='true'] .connected-portfolio * { animation-play-state: paused !important; }
@keyframes portfolio-connection {
  0%, 10% { stroke-dashoffset: 112; opacity: 0; }
  18% { opacity: .9; }
  68% { stroke-dashoffset: 0; opacity: .9; }
  78%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes portfolio-halo {
  0%, 100% { opacity: .3; box-shadow: 0 0 0 #50caff00; }
  50% { opacity: .8; box-shadow: 0 0 30px #50caff18; }
}
@keyframes portfolio-node {
  0%, 35%, 100% { box-shadow: 0 8px 24px #0002; }
  60%, 75% { box-shadow: 0 0 20px #6bd5ff66, 0 8px 24px #0002; }
}
@media (max-width: 700px) {
  .connected-portfolio__hub { padding: 12px 8px 10px; min-height: 55px; border-radius: 13px; gap: 7px; }
  .connected-portfolio__node { padding: 7px; border-radius: 11px; }
  .connected-portfolio .connected-portfolio__node img { height: 26px; }
  .connected-portfolio__tools { gap: 7px; }
  .connected-portfolio__tools span { gap: 3px; }
  .connected-portfolio .connected-portfolio__caption { padding: 12px; font-size: 9px; }
}
@media (max-width: 380px) {
  .connected-portfolio__node span { font-size: 6px; }
  .connected-portfolio__tools { gap: 5px; font-size: 6px; }
  .connected-portfolio__tools .icon { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .connected-portfolio .connected-portfolio__signal,
  .connected-portfolio .connected-portfolio__halo,
  .connected-portfolio .connected-portfolio__node { animation: none !important; }
}

.editorial-band:has(.connected-portfolio) {
  background: #fff;
  border-block-color: transparent;
}
.connected-portfolio {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
.connected-portfolio__scene {
  background: #fff;
}
.connected-portfolio__scene::before {
  opacity: .16;
  background-image: linear-gradient(#dceaf5 1px, transparent 1px), linear-gradient(90deg, #dceaf5 1px, transparent 1px);
}
.connected-portfolio__heading { color: #55708a; }
.connected-portfolio__route { stroke: #9cb8d0; opacity: .54; }
.connected-portfolio__signal {
  stroke: #2b80be;
  filter: drop-shadow(0 0 3px #4c9ed366);
}
.connected-portfolio__halo { border-color: #7ab5dc55; }
.connected-portfolio__halo--outer { opacity: .5; }
.connected-portfolio__hub {
  width: 36%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.connected-portfolio .connected-portfolio__hub img { width: 88%; }
.connected-portfolio__hub span { color: #46627c; }
.connected-portfolio__node {
  width: 25%;
  height: 17%;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #35506b;
}
.connected-portfolio__node:hover {
  border: 0;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: #6aa5cc;
  text-underline-offset: 4px;
}
.connected-portfolio .connected-portfolio__node img { max-width: 140px; }
.connected-portfolio .connected-portfolio__node--1me img { max-width: 70px; }
.connected-portfolio .connected-portfolio__node--waypass img { max-width: 92px; }
.connected-portfolio__node span { color: #4e6378; }
.connected-portfolio__node:focus-visible,
.connected-portfolio__toggle:focus-visible { outline-color: #2b519f; }
.connected-portfolio__tools { color: #526a81; }
.connected-portfolio__tools .icon { color: #2b80be; }
.connected-portfolio .connected-portfolio__caption {
  color: #5b7085;
  background: #fff;
  border-top: 1px solid #e3edf5;
}
.connected-portfolio__toggle {
  border-color: #b8cee0;
  color: #2b519f;
}
@keyframes portfolio-halo {
  0%, 100% { opacity: .35; box-shadow: 0 0 0 #50caff00; }
  50% { opacity: .85; box-shadow: 0 0 24px #50caff20; }
}
@keyframes portfolio-node {
  0%, 35%, 100% { filter: none; }
  60%, 75% { filter: drop-shadow(0 2px 8px #4b94c866); }
}