/* The outer wrapper owns the black background and the pointer events. */
.spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
  touch-action: none;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-radius: 0px;
  --spotlight-mask: linear-gradient(transparent, transparent);
  --spotlight-size: 0px;
  --spotlight-height: 0px;
  --spotlight-left: 0px;
  --spotlight-top: 0px;
}

/* Put the original surface inside this layer. Its layout stays intact. */
.spotlight > .spotlight-content {
  -webkit-mask-image: var(--spotlight-mask);
  mask-image: var(--spotlight-mask);
  -webkit-mask-size: var(--spotlight-size) var(--spotlight-height, var(--spotlight-size));
  mask-size: var(--spotlight-size) var(--spotlight-height, var(--spotlight-size));
  -webkit-mask-position: var(--spotlight-left) var(--spotlight-top);
  mask-position: var(--spotlight-left) var(--spotlight-top);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

.spotlight:focus-visible {
  outline: 2px solid #a9a9a9;
  outline-offset: 4px;
}