/* A light input affordance; only the three existing screens enter the preview. */
.drag-guide-cursor {
  position:fixed; top:0; left:0; width:64px; height:64px; z-index:70;
  pointer-events:none; user-select:none; opacity:0; visibility:hidden;
  color:#e6cafa; transition:opacity 140ms ease,visibility 0s linear 140ms;
}
.drag-guide-cursor.is-visible { opacity:1; visibility:visible; transition-delay:0s; }
.drag-guide-cursor>svg { width:64px; height:64px; overflow:visible; fill:none; }
.drag-guide-track { stroke:#f3e7ff38; stroke-width:1; }
.drag-guide-progress {
  stroke:#e5bdff; stroke-width:1.65; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:32px 32px;
  filter:drop-shadow(0 0 3px #ba7de0a6);
}
.drag-guide-arrows { stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.drag-guide-cursor>span {
  position:absolute; top:66px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:5px 9px; border:1px solid #e9d4f22b; border-radius:20px; background:#211c2cc9;
  color:#f3e7fc; font:400 11px/1.5 var(--sans); letter-spacing:.025em;
}
.drag-guide-cursor.is-demonstrating .drag-guide-progress { stroke:#f4dcff; }
.drag-touch-hint {
  position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:15;
  padding:6px 11px; border:1px solid #e9d4f22b; border-radius:20px; background:#211c2cde;
  color:#eddbfa; font:400 11px/1.5 var(--sans); white-space:nowrap;
  pointer-events:none; opacity:0; visibility:hidden; transition:opacity 160ms ease,visibility 0s linear 160ms;
}
.drag-touch-hint.is-visible { opacity:1; visibility:visible; transition-delay:0s; }
@media(prefers-reduced-motion:reduce) {
  .drag-guide-cursor,.drag-touch-hint { transition:none; }
  .drag-guide-progress { display:none; }
}
@media(hover:none),(pointer:coarse) { .drag-guide-cursor { display:none; } }