/* Fixed capture coordinates keep live HTML aligned with the original hotspots. */
.sample-page-content { position: absolute; inset: 0; }
.sample-html-viewport { position: absolute; inset: 0; overflow: hidden; background: #fff; pointer-events: none; user-select: none; }
.sample-html-page { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; contain: layout style paint; background: #fff; color: #111; text-align: left; }
.sample-html-page .replica-text { position: absolute; display: block; width: max-content; max-width: none; line-height: 1 !important; white-space: pre; transform-origin: left top; margin: 0; padding: 0; letter-spacing: 0; }
.replica-line { display: contents; }
.replica-shape, .replica-icon, .replica-photo, .replica-social, .replica-scroll-arrow { position: absolute; display: block; margin: 0; padding: 0; max-width: none; }
.replica-photo { object-fit: fill; border: 0; }
.replica-social { display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #fff; font-family: Arial, sans-serif; font-weight: 700; line-height: 1; }
.replica-scroll-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #999; }
.replica-scroll-arrow.bottom { transform: rotate(180deg); }