/*
 * gestures.css (W23g-WEB): the look of gestures.js. Sizes in the reel's own
 * points; colours are the app's reel chrome (white over the picture).
 */
/* the tutorial's fingertip (TutorialHand HandTouchMark): a near-white dot of
   radius 11 with a faint dark rim and a soft halo, in a white ring of 14.5 */
.g-tip,
.g-move {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.g-tip {
  width: 29px;
  height: 29px;
  opacity: 0;
}
.g-tip-ring,
.g-tip-dot {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.g-tip-ring {
  inset: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 1.5px rgba(0, 0, 0, 0.6);
}
.g-tip-dot {
  left: 3.5px;
  top: 3.5px;
  width: 22px;
  height: 22px;
  background: rgba(253, 253, 254, 0.96);
  box-shadow: 0 0 0 0.75px rgba(0, 0, 0, 0.24), 0 0 3px rgba(0, 0, 0, 0.35);
}
/* the save's burst: a ring and ten dots at the finger */
.g-ring {
  position: absolute;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  opacity: 0;
}
.g-spark {
  position: absolute;
  display: block;
  border-radius: 50%;
}
/* the bookmark in flight: the rail's glyph, filled */
.g-fly {
  position: absolute;
  opacity: 0;
}
.g-fly svg {
  display: block;
  overflow: visible;
}
/* the 2x pill: 26 tall, a capsule, black at 0.55; the padlock in a 13 box at
   9, the words from 28 in 11 pt semibold (CV 5448-5456, 13525-13551) */
.g-2x {
  position: absolute;
  height: 26px;
  padding: 0 9px 0 28px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 600 11px/26px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
  opacity: 0;
}
.g-lock {
  position: absolute;
  left: 9px;
  top: 6.5px;
  width: 13px;
  height: 13px;
}