/* landing.css: styles that only the landing page needs.
   Shared styles (links, fonts, background) live in shared.css */
 
.stage 
  .stage {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(100vw, 100dvh * 16 / 9);   /* as wide as fits, never taller than the window */
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);     /* centers the box */
}
 
.zoomable {
  position: absolute;
  display: block;
  cursor: crosshair;
  user-select: none;
  -webkit-user-drag: none;
}
 
.lens {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .25);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 5;
}
 
.hint {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  color: #777;
  font-size: 14px;
}
@media (orientation: portrait) {
  .stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 3 / 5;       /* tall box: the page scrolls vertically */
    transform: none;
  }
}