.vanilla-scroll-debug{--height:20px;--step-level:0;--step-count:0;--trigger-count:0;--border-width:2px;--border-radius:8px;--padding:calc(var(--height)/4);--inner-border-radius:calc(var(--border-radius) - var(--border-width));--timeline-border-width:calc(var(--border-width)/2);--text-color:#000;--timeline-color:#f0f;--background-color:#ffffffb2;position:fixed;z-index:10000000;left:5vw;bottom:calc(var(--trigger-count)*var(--height));border-top:var(--timeline-border-width)solid var(--timeline-color);border-bottom:var(--timeline-border-width)solid var(--timeline-color);box-sizing:border-box;width:90vw}.vanilla-scroll-debug .indicator{position:absolute;z-index:calc(-1*var(--step-level));display:flex;height:calc(var(--step-level)*var(--height));color:var(--text-color);font-size:calc(var(--height)*.6);overflow:hidden;pointer-events:none;justify-content:space-between;align-items: flex-start;bottom:0}.vanilla-scroll-debug .indicator:before{content:attr(indicator-name);height:calc(var(--height) - var(--border-width));display:inline-flex;white-space:nowrap;padding-left:var(--padding);padding-right:var(--padding);background-color:var(--background-color);pointer-events:all;align-items: center}.vanilla-scroll-debug .indicator:hover{z-index:10000000;overflow:visible;background-color:var(--background-color)}.vanilla-scroll-debug .indicator#current-position{z-index:1;height:calc(var(--step-count)*var(--height));border:var(--border-width)solid var(--timeline-color);overflow:visible;border-radius:0 var(--border-radius)0 0;border-bottom:none;bottom:0}.vanilla-scroll-debug .indicator#current-position:before{height:calc(var(--height) - var(--border-width) - 1px);border-radius:0 var(--inner-border-radius)var(--inner-border-radius)0;pointer-events:none;background-color:var(--background-color)}.vanilla-scroll-debug .indicator#current-position:after{content:"Trigger";position:absolute;display:inline-flex;top:calc(var(--height)*-1);left:calc(var(--border-width)*-1);height:calc(var(--height) - var(--border-width));padding-left:var(--padding);padding-right:var(--padding);border-left:var(--border-width)solid var(--timeline-color);border-radius:0 var(--inner-border-radius)var(--inner-border-radius)0;background-color:var(--background-color);align-items: center}.vanilla-scroll-debug .indicator.trigger{top:var(--timeline-border-width);height:calc(var(--step-level)*var(--height));border:var(--border-width)solid;border-radius:0 0 var(--border-radius)var(--border-radius);border-top:0}.vanilla-scroll-debug .indicator.trigger:before{border-radius:0 0 var(--inner-border-radius)var(--inner-border-radius);margin-top:auto}.vanilla-scroll-debug .indicator.step{bottom:var(--timeline-border-width);border:var(--border-width)solid;border-radius:var(--border-radius)var(--border-radius)0 0;border-bottom:0}.vanilla-scroll-debug .indicator.step:before{border-radius:var(--inner-border-radius)var(--inner-border-radius)0 0}