.sop-explainer-cursor {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: block;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid #d3a052;
  background: #14212a;
  box-shadow: 0 8px 24px #14212a55;
  color: #fffaf0;
  font: 700 11px/1.3 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .025em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .14s ease, transform .14s ease;
}
.sop-explainer-cursor.is-visible { opacity: 1; transform: translateY(0); }
.sop-explainer-pointer {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border: 2px solid #d3a052;
  border-radius: 50%;
  background: #14212a;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.sop-explainer-pointer.is-visible { opacity: 1; }
.sop-explainer-pointer.is-updating {
  width: 18px;
  height: 18px;
  border-color: #d3a052 #d3a05255 #d3a05255;
  animation: sop-cursor-spin .7s linear infinite;
}
@keyframes sop-cursor-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .sop-build-page, .sop-build-page * { cursor: none; }
  .sop-build-page video { cursor: auto; }
  .sop-build-page label, .sop-build-page .sop-build-choice { cursor: pointer; }
  .sop-build-page input[type="text"] { cursor: text; }
}
@media (hover: none), (pointer: coarse) { .sop-explainer-cursor, .sop-explainer-pointer { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sop-explainer-cursor { transition: none; }
  .sop-explainer-pointer.is-updating { animation: none; }
}