.nbe-two-tone {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  isolation: isolate; 
  /* Ensure text sits on top of the target image by default if they are in same context */
  z-index: 10; 
}

.nbe-two-tone__base {
  display: inline-block;
  color: inherit; /* Fallback */
}

.nbe-two-tone[data-debug="true"] {
  outline: 2px solid red;
}
.nbe-two-tone[data-debug="true"]::after {
  content: 'Debug: ' attr(data-target);
  position: absolute;
  top: -20px;
  left: 0;
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  white-space: nowrap;
  pointer-events: none;
}

.nbe-two-tone__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through to base or below */
  
  /* Usage of clip-path: inset() is handled by JS. */
  /* Default state: fully visible? No, default hidden until JS calculates intersection? 
     Actually, if no target, it just sits on top. */
  clip-path: inset(0 0 0 0); 
  
  /* Important: user colors are applied here via Bricks controls */
}