.output-annotate {
  position: relative;
}

/* Annotation layer */
.annotation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  container-type: size;
}

/* Text box */
.annotation-text {
  --col: #3b82f6;

  position: absolute;
  max-width: 50%;
  padding: 0.7em 1em;
  background: white;
  border: 2px solid var(--col);
  border-left: 14px solid var(--col);
  font-size: 0.75em;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  pointer-events: auto;
}

/* Mark indicator */
.annotation-mark {
  position: absolute;
  width: 1em;
  height: 1em;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  border-radius: 0.2em;
}

/* Arrow shaft */
.annotation .annotation-arrow {
  --h: 6px;
  --ay: 50;
  --ax: 50;
  --by: 50;
  --bx: 50;
  --col: #3b82f6;
  --offset: 0;
  
  position: absolute;
  background: var(--col);
  transform-origin: left center;
  
  /* Position at starting point using percentages */
  left: calc(var(--ax) * 1% + 0.2%);
  top: calc(var(--ay) * 1% + 0.2%);
  height: var(--h);
  
  /* Calculate using container query units for accurate aspect-aware dimensions */
  --dx-pct: calc(var(--bx) - var(--ax));
  --dy-pct: calc(var(--by) - var(--ay));
  
  width: calc(hypot(calc(var(--dx-pct) * 1cqi), calc(var(--dy-pct) * 1cqb)) - var(--offset));
  rotate: atan2(calc(var(--dy-pct) * 1cqb), calc(var(--dx-pct) * 1cqi));
}

/* Arrow head */
.annotation .annotation-arrow::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 0;
  height: 0;
  border: solid var(--col);
  border-width: 0 6px 6px 0;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  display: inline-block;
  padding: 10px;
}