/* A decorative pointer companion. The native cursor is always retained. */
#bl-cursor {
  position: fixed;
  inset: 0;
  z-index: 60;
  contain: strict;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
}

#bl-cursor[hidden],
#bl-cursor [hidden],
.motion-paused #bl-cursor,
.motion-suspended #bl-cursor,
body.dialog-open #bl-cursor,
html:has(dialog[open]) #bl-cursor {
  display: none !important;
}

#bl-cursor * {
  pointer-events: none !important;
  box-sizing: border-box;
}

.bl-cursor-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #ffb28d66;
  border-radius: 50%;
  background: #ff995e25;
  box-shadow: 0 0 0 7px #ffac7126;
}

.bl-cursor-marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange, #f2632b);
  transform: translate(-50%, -50%);
}

.bl-cursor-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 24px);
  padding: 7px 12px;
  overflow: hidden;
  border: 1px solid #fcd7c088;
  border-radius: 7px;
  background: #fffaf5f5;
  color: #b53b10;
  box-shadow: 0 7px 20px #c6672222;
  font: 600 10px/1.4 var(--sans, Arial, sans-serif);
  letter-spacing: .05px;
  white-space: nowrap;
}

@media (hover: none), (pointer: coarse), (pointer: none), (prefers-reduced-motion: reduce) {
  #bl-cursor { display: none !important; }
}