:root {
  --index-cursor-x: 50vw;
  --index-cursor-y: 50vh;
  --index-cursor-gap: 9px;
}

.index-crosshair {
  position: fixed;
  inset: 0;
  z-index: 9998;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
}

.index-crosshair.is-visible {
  opacity: 1;
}

.index-crosshair__line {
  position: fixed;
  display: block;
  background: currentColor;
  pointer-events: none;
  z-index: 9998;
}

.cursor-line-left,
.cursor-line-right {
  top: var(--index-cursor-y);
  height: 1px;
  transform: translateY(-0.5px);
}

.cursor-line-left {
  right: calc(100vw - var(--index-cursor-x) + var(--index-cursor-gap));
  left: 0;
}

.cursor-line-right {
  right: 0;
  left: calc(var(--index-cursor-x) + var(--index-cursor-gap));
}

.cursor-line-top,
.cursor-line-bottom {
  left: var(--index-cursor-x);
  width: 1px;
  transform: translateX(-0.5px);
}

.cursor-line-top {
  top: 0;
  bottom: calc(100vh - var(--index-cursor-y) + var(--index-cursor-gap));
}

.cursor-line-bottom {
  top: calc(var(--index-cursor-y) + var(--index-cursor-gap));
  bottom: 0;
}

.index-crosshair__center {
  position: fixed;
  top: var(--index-cursor-y);
  left: var(--index-cursor-x);
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width 100ms ease, height 100ms ease;
}

.index-crosshair.is-clickable .index-crosshair__center {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .index-page,
  .index-page * {
    cursor: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .index-crosshair {
    display: none;
  }
}