.viewfinder { aspect-ratio: 3 / 2; touch-action: none; }
.scene { transform: none !important; transition: none; }
.scene img { filter: brightness(.96) saturate(.9); }
.hotspot, .started .hotspot { opacity: 0; pointer-events: none; }
.hotspot:focus-visible { opacity: 1; }
.viewfinder.tracking, .started .viewfinder.tracking { cursor: none; }
.crosshair { width: 84px; height: 84px; border: 1px solid #fff; box-shadow: 0 0 0 1px #163c2855, 0 0 0 7px #ffffff18; transition: width .2s, height .2s, opacity .2s; opacity: .6; z-index: 6; }
.crosshair:before { width: 8px; height: 1px; }
.crosshair:after { width: 1px; height: 8px; }
.crosshair span { width: 100%; height: 100%; background: #ffffff08; backdrop-filter: none; }
.crosshair b { display: none; }
.tracking .crosshair { width: 100px; height: 100px; opacity: 1; border-color: var(--mint); }
.lens-caption, .record-hud { pointer-events: none; }
@media(max-width:760px) {
  .record-hud { top: 18px; right: 18px; width: 166px; }
  .record-hud p { display: none; }
  .recording .lens-caption { opacity: 0; }
  .crosshair, .tracking .crosshair { width: 72px; height: 72px; }
}
@media(prefers-reduced-motion:reduce) { .crosshair { transition: none; } }