.entity-structure{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(64px,6vw,84px) clamp(72px,7vw,96px);
}

.entity-structure::before,
.entity-structure::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:26px;
  transform:rotate(-32deg);
}

.entity-structure::before{
  width:360px;
  height:130px;
  left:-130px;
  top:-80px;
  background:linear-gradient(120deg,var(--lime),var(--green));
  opacity:.035;
}

.entity-structure::after{
  width:760px;
  height:260px;
  right:-200px;
  bottom:-160px;
  background:linear-gradient(120deg,var(--green),var(--lime));
  opacity:.045;
}

.entity-structure__inner{
  position:relative;
  z-index:1;
  width:min(calc(100% - (var(--edge) * 2)),var(--maxw));
  margin-inline:auto;
}

.entity-map{
  --entity-line:#99cdb7;
  --entity-line-dark:#85c2a8;
  --entity-line-width:1.5px;
  --entity-elbow:8px;
  --entity-junction:7px;
  --entity-root-width:416px;
  --entity-intermediate-width:376px;
  --entity-peer-width:280px;
  --entity-gap:26px;
  --entity-link-one:42px;
  --entity-trunk:45px;
  --entity-drop:35px;
  position:relative;
  z-index:1;
  max-width:1040px;
  margin:0 auto;
  font-family:var(--sans);
}

.entity-map::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:50%;
  top:0;
  width:50%;
  height:100%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,171,82,.065),transparent 68%);
  filter:blur(12px);
  opacity:.8;
}

.entity-map__caption{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.entity-tree,
.entity-tree ul{
  list-style:none;
  margin:0;
  padding:0;
}

.entity-tree li{
  margin:0;
  padding:0;
}

.entity-tree > li,
.entity-tree > li > ul > li{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.entity-tree > li > ul{
  width:100%;
}

.entity-node{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0 28px;
  text-align:center;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:0;
  line-height:1.25;
  text-wrap:balance;
}

.entity-node--root{
  isolation:isolate;
  overflow:hidden;
  width:min(100%,var(--entity-root-width));
  min-height:96px;
  font-size:25px;
  color:#fff;
  background:
    radial-gradient(circle at 18% 20%,rgba(0,171,82,.30),transparent 45%),
    linear-gradient(115deg,#145b34 0%,#0c331e 52%,#062818 100%);
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 38px -22px rgba(12,51,30,.55),
    0 5px 12px -8px rgba(15,24,34,.25);
}

.entity-node--root::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:-35%;
  left:-12%;
  width:48%;
  height:150%;
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 62%);
  transform:rotate(-14deg);
}

.entity-node--intermediate{
  width:min(100%,var(--entity-intermediate-width));
  min-height:83px;
  font-size:20.5px;
  color:var(--ink);
  background:
    radial-gradient(circle at 22% 10%,rgba(0,171,82,.09),transparent 52%),
    linear-gradient(135deg,#e9f7ef 0%,#f4faf7 52%,#eef8f3 100%);
  border:1px solid rgba(0,129,74,.18);
  border-radius:16px;
  box-shadow:0 14px 30px -24px rgba(0,129,74,.32);
}

.entity-node--peer{
  z-index:2;
  flex:1 1 auto;
  width:100%;
  max-width:var(--entity-peer-width);
  min-height:85px;
  margin-inline:auto;
  padding:0 24px;
  font-size:18.5px;
  color:var(--ink);
  background:linear-gradient(155deg,#fff 0%,#fbfdfc 52%,#f2f8f4 100%);
  border:1px solid rgba(15,24,34,.075);
  border-radius:15px;
  box-shadow:0 1px 2px rgba(15,24,34,.025),0 16px 34px -27px rgba(12,51,30,.24);
}

.entity-node--peer::after{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(0,171,82,.35) 28%,rgba(172,212,0,.24) 68%,transparent 100%);
}

.entity-tree > li > ul > li{
  padding-top:var(--entity-link-one);
}

.entity-tree > li > ul > li::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(50% - var(--entity-line-width) / 2);
  width:var(--entity-line-width);
  height:var(--entity-link-one);
  background:linear-gradient(var(--entity-line-dark),var(--entity-line));
}

.entity-peer-tier{
  --entity-tier-offset:var(--entity-trunk);
  position:relative;
  margin-top:var(--entity-tier-offset);
}

.entity-peer-tier::after{
  content:"";
  position:absolute;
  z-index:3;
  top:calc(var(--entity-tier-offset) * -1);
  left:calc(50% - var(--entity-line-width) / 2);
  width:var(--entity-line-width);
  height:var(--entity-trunk);
  background:linear-gradient(var(--entity-line-dark),var(--entity-line));
}

.entity-peer-tier::before{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  left:50%;
  width:var(--entity-junction);
  height:var(--entity-junction);
  transform:translate(-50%,-50%);
  background:var(--green);
  border-radius:50%;
  box-shadow:0 0 0 3.5px rgba(0,171,82,.16);
}

@media (min-width:768px){
  .entity-peer-tier{
    width:min(calc(100% + var(--entity-gap)),calc(3 * (var(--entity-peer-width) + var(--entity-gap))));
  }

  .entity-peer-rail{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .entity-peer-rail > li{
    display:flex;
    flex-direction:column;
    position:relative;
    padding:var(--entity-drop) calc(var(--entity-gap) / 2) 0;
  }

  .entity-peer-rail > li::before{
    content:"";
    position:absolute;
    z-index:1;
    box-sizing:border-box;
    top:calc(var(--entity-line-width) / -2);
    left:0;
    right:0;
    height:0;
    border-top:var(--entity-line-width) solid var(--entity-line);
  }

  .entity-peer-rail > li::after{
    content:"";
    position:absolute;
    z-index:1;
    box-sizing:border-box;
    top:0;
    left:calc(50% - var(--entity-line-width) / 2);
    width:0;
    height:var(--entity-drop);
    border-left:var(--entity-line-width) solid var(--entity-line);
  }

  .entity-peer-rail > li:first-child::before,
  .entity-peer-rail > li:last-child::before{
    top:calc(var(--entity-line-width) / -2);
    height:calc(var(--entity-drop) + var(--entity-line-width) / 2);
  }

  .entity-peer-rail > li:first-child::before{
    left:calc(50% - var(--entity-line-width) / 2);
    right:0;
    border-left:var(--entity-line-width) solid var(--entity-line);
    border-top-left-radius:var(--entity-elbow);
  }

  .entity-peer-rail > li:last-child::before{
    left:0;
    right:calc(50% - var(--entity-line-width) / 2);
    border-right:var(--entity-line-width) solid var(--entity-line);
    border-top-right-radius:var(--entity-elbow);
  }

  .entity-peer-rail > li:first-child::after,
  .entity-peer-rail > li:last-child::after{
    content:none;
  }
}

@media (min-width:768px) and (max-width:1023px){
  .entity-map{
    --entity-root-width:380px;
    --entity-intermediate-width:340px;
    --entity-gap:22px;
  }

  .entity-node--root{font-size:22px;}
  .entity-node--intermediate{font-size:19px;}
  .entity-node--peer{font-size:17px;padding-inline:18px;}

  .entity-structure{
    padding-block:clamp(48px,6vw,64px) clamp(56px,6.5vw,72px);
    background:
      radial-gradient(circle at 18% 18%,rgba(0,171,82,.11) 0%,rgba(0,171,82,.045) 30%,transparent 56%),
      radial-gradient(circle at 86% 78%,rgba(242,228,0,.09) 0%,rgba(242,228,0,.03) 30%,transparent 58%),
      linear-gradient(135deg,#eef8f2 0%,#f7fbf8 45%,#fffced 100%);
  }

  .entity-structure::after{width:560px;height:190px;right:-150px;bottom:-120px;}
  .entity-structure::before{width:260px;height:95px;left:-90px;top:-60px;}
}

@media (max-width:767px){
  .entity-structure{
    padding-block:40px 56px;
    background:
      radial-gradient(circle at 24% 14%,rgba(0,171,82,.10) 0%,rgba(0,171,82,.04) 32%,transparent 60%),
      linear-gradient(160deg,#eef8f2 0%,#f7fbf8 55%,#fbfaef 100%);
  }

  .entity-structure::after{width:280px;height:110px;right:-90px;bottom:-70px;opacity:.035;}
  .entity-structure::before{content:none;}
  .entity-map::before{width:60%;filter:blur(10px);opacity:.7;}

  .entity-map{
    --entity-link-one:30px;
    --entity-trunk:34px;
    --entity-drop:26px;
    --entity-row-gap:12px;
    --entity-indent:36px;
    --entity-spine-x:14px;
    --entity-column:400px;
  }

  .entity-node{padding-inline:22px;}

  .entity-node--root{
    width:min(100%,var(--entity-column));
    min-height:88px;
    font-size:22px;
    background:
      radial-gradient(circle at 18% 20%,rgba(0,171,82,.24),transparent 45%),
      linear-gradient(115deg,#145b34 0%,#0c331e 52%,#062818 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px -18px rgba(12,51,30,.46);
  }

  .entity-node--intermediate{
    width:min(calc(100% - 24px),calc(var(--entity-column) - 24px));
    min-height:78px;
    font-size:19px;
    box-shadow:0 8px 18px -18px rgba(0,129,74,.28);
  }

  .entity-peer-tier{
    --entity-tier-offset:calc(var(--entity-trunk) + var(--entity-drop));
    width:min(100%,var(--entity-column));
  }

  .entity-peer-tier::before{content:none;}

  .entity-peer-rail{
    display:block;
    position:relative;
    padding-left:var(--entity-indent);
  }

  .entity-peer-rail::before{
    content:"";
    position:absolute;
    z-index:1;
    box-sizing:border-box;
    top:calc(var(--entity-drop) * -1 - var(--entity-line-width) / 2);
    left:calc(var(--entity-spine-x) - var(--entity-line-width) / 2);
    right:calc(50% - var(--entity-line-width) / 2);
    height:18px;
    border-top:var(--entity-line-width) solid var(--entity-line);
    border-left:var(--entity-line-width) solid var(--entity-line);
    border-top-left-radius:var(--entity-elbow);
  }

  .entity-peer-rail > li{
    display:flex;
    flex-direction:column;
    position:relative;
    padding:0;
  }

  .entity-peer-rail > li + li{margin-top:var(--entity-row-gap);}

  .entity-node--peer{
    max-width:none;
    min-height:70px;
    margin:0;
    padding-inline:22px;
    font-size:17px;
    box-shadow:0 1px 2px rgba(15,24,34,.025),0 8px 18px -20px rgba(12,51,30,.18);
  }

  .entity-peer-rail > li::before{
    content:"";
    position:absolute;
    z-index:1;
    box-sizing:border-box;
    top:0;
    bottom:calc(var(--entity-row-gap) * -1);
    left:calc(var(--entity-spine-x) - var(--entity-indent) - var(--entity-line-width) / 2);
    width:0;
    border-left:var(--entity-line-width) solid var(--entity-line);
  }

  .entity-peer-rail > li:first-child::before{top:calc(var(--entity-drop) * -1 + 9px);}
  .entity-peer-rail > li:not(:first-child)::before{top:calc(var(--entity-row-gap) * -1);}
  .entity-peer-rail > li:last-child::before{bottom:50%;}

  .entity-peer-rail > li::after{
    content:"";
    position:absolute;
    z-index:1;
    box-sizing:border-box;
    top:calc(50% - var(--entity-line-width) / 2);
    left:calc(var(--entity-spine-x) - var(--entity-indent));
    width:calc(var(--entity-indent) - var(--entity-spine-x));
    height:0;
    border-top:var(--entity-line-width) solid var(--entity-line);
  }
}

@media (forced-colors:active){
  .entity-map{--entity-line:CanvasText;--entity-line-dark:CanvasText;}
  .entity-node{border:1px solid CanvasText;}
  .entity-peer-tier::before{background:CanvasText;}
}
