/* Fine point grid inspired by the reference; transparent on the existing white page. */
.revive-cursor-dots { position: fixed; top: 0; left: 0; width: 640px; height: 640px; z-index: 20; pointer-events: none !important; opacity: 0; mix-blend-mode: multiply; contain: strict; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .revive-cursor-dots { display: none; } }

/* One 20px circle; hover changes color without increasing its size. */
.revive-pointer-dot { position: fixed; left: 0; top: 0; pointer-events: none !important; z-index: 2147483646; opacity: 0; }
.revive-pointer-dot::before { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: #a18b8e; box-shadow: 0 0 0 1px rgba(255,255,255,.65); transform: translate(-50%, -50%); transition: background-color .18s ease, transform .12s ease; }
.revive-pointer-dot.is-link::before { background: #8895a8; }
.revive-pointer-dot.is-image::before { background: #9a90a5; }
.revive-pointer-dot.is-pressed::before { transform: translate(-50%, -50%) scale(.8); }
@media (hover: hover) and (pointer: fine) {
  html.revive-pointer-active, html.revive-pointer-active * { cursor: none !important; }
  .revive-pointer-active .revive-pointer-dot { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .revive-pointer-dot::before { transition: none; } }

/* Give the embedded home document its own opaque blend backdrop. */
html:has(body[data-revive-dot-field]), body[data-revive-dot-field] { background: #fff; }