.ball{border:2px solid var(--gray-80);content:"";opacity:.3;border-radius:50%;width:2rem;height:2rem;display:block;position:absolute;top:0;left:0;transform:translate(-50%);&:first-of-type,&:last-of-type,&:nth-of-type(4n+1){opacity:1}&:first-of-type:after,&:last-of-type:after,&:nth-of-type(4n+1):after{width:2px}&:after{background:var(--gray-80);content:"";width:1px;height:.75rem;display:block;position:absolute;top:3rem;left:50%;transform:translate(-50%)}}.ball--solo:after{display:none}.ball--invisible{border:none}.ball-stop-count{font-family:Arial,sans-serif;font-size:14px;position:absolute;top:calc(100% + 2.5rem);left:50%;transform:translate(-50%)}.ball-example{width:calc(100% + 2rem);margin-left:-1rem;padding-left:1rem;padding-right:1rem;overflow:hidden}.ball-pit{width:calc(100% - 4rem);height:6rem;margin:1.25em 1rem;position:relative}.ball-pit--zero{height:0}.gradient{user-select:none;height:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem;display:flex;position:relative}.gradient-stop{flex:1}.gradient-line{border-right:3px dotted var(--gray-30);width:0;height:100%;position:absolute;top:0}.graph{border-bottom:1px solid var(--gray-80);border-left:1px solid var(--gray-80);width:100%;max-width:200px;height:auto;margin-left:auto;margin-right:auto;display:block}.graph-figure{flex:1;margin:0;padding:0}.figure--centered{flex-direction:column;justify-content:center;align-items:center;display:flex}.figure-group{background:var(--gray-15);padding:0;display:flex;&>*{box-sizing:border-box;flex:1}}.spinner{width:4rem;height:4rem;animation:1s infinite rotate;position:relative;&:before{border:.5rem solid var(--gray-20);content:"";border-radius:50%;width:100%;height:100%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}&:after{background:var(--gray-80);content:"";border-radius:50%;width:.5rem;height:.5rem;display:block;position:absolute;top:calc(100% - .5rem);left:50%}}.spinner--stutter{animation-timing-function:ease}.spinner--linear{animation-timing-function:linear}.hover{cursor:pointer;border:1px solid;border-radius:.5rem;padding:.5rem 2rem;font-family:Arial,sans-serif;font-size:14px;position:relative;&:hover .hover-tooltip{opacity:1;transform:translate(-50%)}}.hover-tooltip{background:var(--gray-30);color:var(--gray-80);opacity:0;pointer-events:none;border-radius:.25rem;padding:.5rem 1rem;font-size:14px;position:absolute;bottom:calc(100% + 1rem);left:50%;transform:translate(-50%,1.5rem);box-shadow:0 .5rem 1rem #0003}.hover.hover--ease-in .hover-tooltip{--ease-in-sine:cubic-bezier(.55, 0, 1, .55);transition:opacity .3s var(--ease-in-sine), transform .3s var(--ease-in-sine)}.hover.hover--ease-out .hover-tooltip{--ease-out-cubic:cubic-bezier(.33, 1, .68, 1);transition:opacity .3s var(--ease-out-cubic), transform .3s var(--ease-out-cubic)}.switch{cursor:pointer;width:100%;height:2rem;display:block;position:relative;overflow:hidden}.switch-input{-webkit-appearance:none;appearance:none;cursor:pointer;position:absolute;left:50%;transform:translate(-50%);&:before{background:var(--gray-10);border:1px solid var(--gray-80);content:"";z-index:2;border-radius:1rem;width:3rem;height:1.5rem;display:block;position:absolute;left:50%;transform:translate(-50%)}&:after{background:var(--gray-80);content:"";z-index:3;border-radius:1rem;width:1.125rem;height:1.125rem;display:block;position:absolute;top:4px;left:50%;transform:translate(-117%)}}.switch-input:checked:after{transform:translate(22%)}.switch--easing .switch-input:after{transition:transform .3s cubic-bezier(.33,1,.68,1)}.switch--quick .switch-input:after{transition:transform .3s cubic-bezier(.88,.09,.66,-.11)}.switch--resistance-none .switch-input:after{transition:transform 75ms linear}.switch--resistance-sm .switch-input:after{transition:transform 75ms cubic-bezier(.4,0,.5,-.1)}.switch--resistance-lg .switch-input:after{transition:transform 75ms cubic-bezier(1,.12,1,-.16)}@keyframes move-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.draggable[data-astro-cid-hhuw6fl4]{height:5rem;margin:2rem 0;position:relative;&:before{background:var(--gray-20);content:"";z-index:1;border-radius:1rem;width:100%;height:3px;margin-top:-1px;display:block;position:absolute;top:50%}}.draggable-handle[data-astro-cid-hhuw6fl4]{background:var(--gray-00);border:2px solid var(--gray-80);cursor:grab;touch-action:none;z-index:10;border-radius:50%;width:3rem;height:3rem;margin-top:-1.5rem;margin-left:-1.5rem;position:absolute;top:50%;left:50%}.draggable--easing[data-astro-cid-hhuw6fl4] .draggable-handle[data-astro-cid-hhuw6fl4]{transition:transform .2s cubic-bezier(.65,0,.35,1)}.draggable-handle[data-astro-cid-hhuw6fl4]:after{background:linear-gradient(90deg, transparent 2px, var(--gray-80) 2px, var(--gray-80) 4px, transparent 4px, transparent 7px, var(--gray-80) 7px, var(--gray-80) 9px, transparent 9px, transparent 12px, var(--gray-80) 12px, var(--gray-80) 14px, transparent 14px, transparent 18px);content:"";background-repeat:repeat-y;background-size:100% 100%;border-radius:50%;width:1rem;height:1rem;margin-top:-.5rem;margin-left:-.5rem;display:block;position:absolute;top:50%;left:50%}body.is-dragging,body.is-dragging .draggable-handle[data-astro-cid-hhuw6fl4]{cursor:grabbing!important}