/* Type9 container - unique layout properties only */
.dialog-image-demo {
  background: transparent;
  width: 1800px;
  height: 900px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
  padding: 20px;
  gap: 0;
  position: fixed;
  overflow: hidden;
}
.dialog-image-demo .video-container {
  display: block;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

/* Circle video specific to type9 */
.dialog-image-demo .circle-video {
  position: absolute;
  height: 400px;
  width: 400px;
  border: 10px solid #81e5a6;
  z-index: 5;
  top: 126px;
  left: 163px;
}

.dialog-image-demo .circle-video video {
  aspect-ratio: 1/1;
}

.dialog-dual-video .circle-video {
  height: 500px;
  width: 500px;
  border-radius: 250px;
}

#first {
  top: 216px;
  left: 230px;
}
#second {
  top: 70px;
  left: 488px;
}
#third {
  top: 130px;
  left: 370px;
}
#fourth {
  top: 130px;
  left: 370px;
}

/* Triangle connector between circle and tall video */
.dialog-image-demo .triangle {
  width: 0;
  height: 330px;
  left: 651px;
  top: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
}
.dialog-image-demo .triangle::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: #fff;
}

/* Marks (shared with type3 in your original) */
.dialog-type3 .marks-container,
.dialog-image-demo .marks-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1001;
}
.dialog-type3 .mark,
.dialog-image-demo .mark {
  position: absolute;
  width: 80px;
  height: 80px;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 10;
}
.dialog-type3 .mark.active,
.dialog-image-demo .mark.active {
  opacity: 1;
}

#dialog4-three-images {
  --mark1-top: 431px;
  --mark1-left: 384px;
  --mark2-top: 374px;
  --mark2-left: 493px;
  --mark3-top: 228px;
  --mark3-left: 259px;
}
#dialog4-single-image {
  --mark1-top: 32%;
  --mark1-left: 4%;
  --mark2-bottom: 5%;
  --mark2-right: 5%;
  --mark3-top: 50%;
  --mark3-left: 15%;
}
#dialog4-no-images {
  --mark1-top: 395px;
  --mark1-left: 448px;
}

#dialog4-three-images .mark1,
#dialog4-single-image .mark1,
#dialog4-no-images .mark1 {
  top: var(--mark1-top);
  left: var(--mark1-left);
}
#dialog4-three-images .mark2,
#dialog4-single-image .mark2,
#dialog4-no-images .mark2 {
  top: var(--mark2-top);
  left: var(--mark2-left);
}
#dialog4-three-images .mark3,
#dialog4-single-image .mark3,
#dialog4-no-images .mark3 {
  top: var(--mark3-top);
  left: var(--mark3-left);
}