:root {
  --oa-outline-handoff-size: 12px;
  --oa-outline-handoff-color: #d7ff00;
}

#oa-outline-handoff-layer {
  position: fixed;
  inset: 0;
  z-index: 10079;
  display: none;
  contain: strict;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

#oa-outline-handoff-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#oa-outline-handoff-head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--oa-outline-handoff-size);
  height: var(--oa-outline-handoff-size);
  box-sizing: border-box;
  border: 0 solid var(--oa-outline-handoff-color);
  border-radius: 0;
  background: var(--oa-outline-handoff-color);
  box-shadow: none;
  opacity: 1;
  transform: translate3d(-24px, -24px, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity, background-color, border-color;
  pointer-events: none;
}

#oa-outline-handoff-head.is-outline,
#oa-outline-handoff-head[data-phase="outline"] {
  border-width: 1px;
  background: transparent;
}

#oa-outline-handoff-head.is-signal,
#oa-outline-handoff-head[data-phase="signal"] {
  border-width: 1px;
  background: transparent;
}

#oa-outline-handoff-head.is-pickup,
#oa-outline-handoff-head[data-phase="pickup"] {
  border-width: 0;
  background: var(--oa-outline-handoff-color);
  animation: none;
}

@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #oa-outline-handoff-layer {
    display: block;
  }

  html.oa-outline-handoff-owning,
  html.oa-outline-handoff-owning body,
  html.oa-outline-handoff-owning a,
  html.oa-outline-handoff-owning button,
  html.oa-outline-handoff-owning [role="button"] {
    cursor: none !important;
  }

  html.oa-outline-handoff-owning #cursor,
  html.oa-outline-handoff-owning .cursor,
  html.oa-outline-handoff-owning .oa-pixel-hover-fill,
  html.oa-outline-handoff-owning .oa-cursor-pixel-trail,
  html.oa-outline-handoff-owning .oa-shared-outline-field {
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

@media (max-width: 860px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (forced-colors: active) {
  #oa-outline-handoff-layer {
    display: none !important;
  }
}
