.pepvenn{position:relative}
.pepvenn .legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin: 10px 12px 14px;}
.pepvenn .legend .card{
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 6px 24px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pepvenn text.label{font-weight:700;fill:#111;text-anchor:middle;font-size:18px}
.pepvenn text.sub{fill:#666;text-anchor:middle;font-size:14px}
/* Modal */
.pepvenn .pv-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:10;}
.pepvenn .pv-modal.is-open{display:flex;}
.pepvenn .pv-modal .pv-backdrop{position:absolute;inset:8px;border-radius:14px;background:rgba(8,12,16,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(166,255,0,.12) inset;}
.pepvenn .pv-modal .pv-panel{position:relative;width:20%;min-width:260px;max-width:420px;border-radius:16px;padding:18px;background:rgba(255,255,255,.80);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 60px rgba(0,0,0,.30);transform:translateY(12px) scale(.98);opacity:0;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s;overflow:hidden;color:#111;word-wrap:break-word;overflow-wrap:break-word;}
.pepvenn .pv-modal.is-open .pv-panel{transform:translateY(0) scale(1);opacity:1;}
.pepvenn .pv-title{font-weight:800;letter-spacing:.01em;margin:0 0 6px;font-size:20px;color:#111;}
.pepvenn .pv-sub{opacity:.8;font-size:13px;margin:0 0 10px;}
.pepvenn .pv-note{font-size:13.5px;line-height:1.5;margin:10px 0 14px;color:#222;}
.pepvenn .pv-actions{display:flex;gap:10px;justify-content:flex-start;}
.pepvenn .pv-btn{appearance:none;border:1px solid rgba(166,255,0,.45);background:rgba(166,255,0,.12);padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;transition:transform .12s, box-shadow .12s; color: inherit;;outline:none;}

.pepvenn .pv-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(166,255,0,.22);}
.pepvenn .pv-close{position:absolute;top:8px;right:8px;border:none;background:transparent;color:inherit;opacity:.65;font-size:18px;cursor:pointer;}
@media (max-width: 640px){ .pepvenn .canvas{display:grid;place-items:center;padding: clamp(8px,2vw,16px);overflow:hidden;} .pepvenn .canvas svg{display:block;width:100%;height:auto;max-width:900px;margin:0 auto;transform:none;} .pepvenn text.label{ font-size:20px; } .pepvenn text.sub{ font-size:15px; } }
  .pepvenn .pv-title{font-weight:800;letter-spacing:.01em;margin:0 0 6px;font-size:20px;color:#111;}
  .pepvenn .pv-note{font-size:13.5px;line-height:1.5;margin:10px 0 14px;color:#222;}
}

.pepvenn .pv-backdrop{display:none !important;}

.pepvenn .pv-btn:focus{outline:none;box-shadow:none}

@media (max-width: 640px){ .pepvenn .canvas{display:grid;place-items:center;padding: clamp(8px,2vw,16px);overflow:hidden;} .pepvenn .canvas svg{display:block;width:100%;height:auto;max-width:900px;margin:0 auto;transform:none;} .pepvenn text.label{ font-size:20px; } .pepvenn text.sub{ font-size:15px; } } }

.pepvenn{
  position: relative;
  border-radius: 16px;
  padding: 12px;
}
.pepvenn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(166,255,0,0.50), rgba(25,227,255,0.50), rgba(255,79,216,0.50));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

.pepvenn .node{ outline: none; -webkit-tap-highlight-color: transparent; }
.pepvenn .node:focus{ outline: none; }

@media (max-width: 640px){ .pepvenn .canvas{display:grid;place-items:center;padding: clamp(8px,2vw,16px);overflow:hidden;} .pepvenn .canvas svg{display:block;width:100%;height:auto;max-width:900px;margin:0 auto;transform:none;} .pepvenn text.label{ font-size:20px; } .pepvenn text.sub{ font-size:15px; } }
  .pepvenn .canvas svg{display:block;width:100%;height:auto;max-width:900px;margin:0 auto;transform:none;}
}

/* Dark mode: make circle text white-ish */
@media (prefers-color-scheme: dark){
  .pepvenn text.label{ fill:#e8ffe8; }
  .pepvenn text.sub{ fill:#a9b3ad; }
}