html.working-gesture-lock,
body.working-gesture-lock {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.working-gesture-lock {
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

body.working-gesture-lock .stage,
body.working-gesture-lock .working-view {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.working-gesture-lock .fidget-dot {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  -webkit-user-drag: none;
  border: 1px solid rgba(255, 213, 205, .28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, .96) 0%, rgba(255, 239, 235, .86) 4%, rgba(255, 190, 179, .42) 10%, rgba(255, 141, 126, .12) 16%, transparent 22%),
    radial-gradient(circle at 36% 31%, #ff8d7d 0%, #f35446 23%, #dc4136 49%, #ad2a23 73%, #681713 100%);
  box-shadow:
    inset 5px 6px 11px rgba(255, 192, 181, .15),
    inset -9px -11px 15px rgba(75, 8, 7, .34),
    inset 0 -2px 5px rgba(62, 5, 5, .16),
    0 8px 18px rgba(0, 0, 0, .36),
    0 1px 2px rgba(255, 155, 145, .10);
}

body.working-gesture-lock .fidget-dot::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  pointer-events: auto;
}

body.working-gesture-lock .fidget-dot::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 13px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  filter: blur(.25px);
  transform: rotate(-28deg);
  pointer-events: none;
}

body.working-gesture-lock .fidget-dot.dragging {
  box-shadow:
    inset 5px 6px 10px rgba(255, 192, 181, .13),
    inset -8px -10px 14px rgba(75, 8, 7, .36),
    0 7px 18px rgba(0, 0, 0, .42);
}

/* Waiting-screen copy should be comfortably readable on a phone. */
body.working-gesture-lock .working-brand .chuck-tagline {
  color: #91a8b0;
  font-size: 14px;
}

body.working-gesture-lock .working-copy {
  width: min(480px, 92%);
}

body.working-gesture-lock .working-copy p {
  color: #d7e3e6;
  font-size: clamp(18px, 4.6vw, 20px);
  font-weight: 450;
  line-height: 1.45;
}

body.working-gesture-lock .working-copy small {
  margin-top: 12px;
  color: #8ea0a7;
  font-size: clamp(14px, 3.7vw, 15px);
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: .025em;
}