/* A small optical instrument: precise tip, lightly delayed aperture. */
.sr-pointer,
.sr-pointer-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  contain: layout style;
}
.sr-pointer {
  --sr-pointer-ready: 1;
  color: #eee9da;
}
.sr-pointer-aperture {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 180ms ease, height 180ms ease, color 140ms ease,
    border-color 140ms ease, background-color 140ms ease;
  background: transparent;
}
.sr-pointer-tip::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #eee9da;
  transform: translate(-50%, -50%);
}
.sr-pointer-arrow {
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.sr-pointer-label {
  display: none;
  position: absolute;
  width: 58px;
  text-align: center;
  color: currentColor;
  font: 500 8px/1.2 "JetBrains Mono", "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sr-pointer[data-interactive="true"] { color: #ed715a; }
.sr-pointer[data-interactive="true"] .sr-pointer-aperture {
  width: 44px;
  height: 44px;
  background: #dc4f3c08;
}
.sr-pointer[data-interactive="true"] .sr-pointer-arrow { opacity: 1; }
.sr-pointer[data-label="true"] .sr-pointer-aperture {
  width: 66px;
  height: 66px;
}
.sr-pointer[data-label="true"] .sr-pointer-arrow { opacity: 0; }
.sr-pointer[data-label="true"] .sr-pointer-label { display: block; }
.sr-pointer[data-pressed="true"] .sr-pointer-aperture {
  width: 25px;
  height: 25px;
  background: #dc4f3c18;
}
.sr-pointer[data-pressed="true"] .sr-pointer-label { opacity: 0; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.sr-cursor-active:not([data-motion="off"]),
  html.sr-cursor-active:not([data-motion="off"]) body,
  html.sr-cursor-active:not([data-motion="off"]) a,
  html.sr-cursor-active:not([data-motion="off"]) button,
  html.sr-cursor-active:not([data-motion="off"]) [role="button"],
  html.sr-cursor-active:not([data-motion="off"]) [data-cursor-label] {
    cursor: none;
  }
  html.sr-cursor-active:not([data-motion="off"]) .sr-pointer,
  html.sr-cursor-active:not([data-motion="off"]) .sr-pointer-tip { opacity: 1; }
  html.sr-cursor-interactive .sr-pointer-tip { opacity: 0 !important; }
}

@media (forced-colors: active) {
  .sr-pointer, .sr-pointer-tip { display: none !important; }
  html.sr-cursor-active, html.sr-cursor-active body,
  html.sr-cursor-active a, html.sr-cursor-active button,
  html.sr-cursor-active [role="button"],
  html.sr-cursor-active [data-cursor-label] { cursor: auto !important; }
}