.demo-overlay-trigger{font-family:var(--font-mono);padding:8px;display:flex}.demo-overlay-trigger__stage{border:1px dashed #0000001f;border-radius:20px;flex:1;position:relative}.demo-overlay-trigger__trigger{color:var(--demo-ink);font:inherit;white-space:nowrap;transform:translate(var(--trigger-x,0), var(--trigger-y,0));touch-action:none;cursor:grab;background:#fff;border:1px solid #00000024;border-radius:999px;padding:3px 9px;font-size:.64rem;position:absolute;top:0;left:0}.demo-overlay-trigger__trigger:active{cursor:grabbing}.demo-overlay-trigger__overlay{--arrow-size:5px;--overlay-bg:#1a1a1a;background:var(--overlay-bg);color:#fff;white-space:nowrap;transform:translate(var(--overlay-x,0), var(--overlay-y,0));transition:transform .12s var(--demo-ease);pointer-events:none;border-radius:6px;padding:4px 10px;font-size:.64rem;line-height:1.4;position:absolute;top:0;left:0}.demo-overlay-trigger:not(.demo--active) .demo-overlay-trigger__overlay{--overlay-bg:#555}.demo-overlay-trigger__overlay:after{content:"";border:var(--arrow-size) solid transparent;position:absolute}.demo-overlay-trigger__overlay[data-side=top]:after{top:100%;left:calc(var(--arrow) - var(--arrow-size));border-top-color:var(--overlay-bg)}.demo-overlay-trigger__overlay[data-side=bottom]:after{bottom:100%;left:calc(var(--arrow) - var(--arrow-size));border-bottom-color:var(--overlay-bg)}.demo-overlay-trigger__overlay[data-side=right]:after{right:100%;top:calc(var(--arrow) - var(--arrow-size));border-right-color:var(--overlay-bg)}.demo-overlay-trigger__overlay[data-side=left]:after{left:100%;top:calc(var(--arrow) - var(--arrow-size));border-left-color:var(--overlay-bg)}@media (prefers-reduced-motion:reduce){.demo-overlay-trigger__overlay{transition:none}}