.loader{background-color:var(--bg);color:var(--fg);height:100vh;transition:background-color var(--trans-dur),color var(--trans-dur);font:1em/1.5 sans-serif;display:flex}.pl{perspective:18em;width:9em;height:9em;transform-style:preserve-3d;margin:auto;position:relative}.pl__dot{border-radius:50%;width:3em;height:3em;animation-duration:3s;animation-timing-function:cubic-bezier(.37,0,.63,1);animation-iteration-count:infinite;position:absolute;top:calc(50% - 1.5em);left:calc(50% - 1.5em)}.pl__dot--a{background-color:hsl(var(--dot-a), 90%, 60%);box-shadow:-.5em -.5em 1em hsl(var(--dot-a), 90%, 30%) inset,.125em .125em .25em hsl(var(--dot-a), 90%, 60%) inset,-.25em -.25em .75em .75em hsl(var(--dot-a), 90%, 50%) inset,.75em .75em .75em hsla(var(--hue), 10%, 5%, .7);animation-name:dot-a}.pl__dot--b{background-color:hsl(var(--dot-b), 90%, 60%);box-shadow:-.5em -.5em 1em hsl(var(--dot-b), 90%, 30%) inset,.125em .125em .25em hsl(var(--dot-b), 90%, 60%) inset,-.25em -.25em .75em .75em hsl(var(--dot-b), 90%, 50%) inset,.75em .75em .75em hsla(var(--hue), 10%, 5%, .7);animation-name:dot-b}.pl__dot--c{background-color:hsl(var(--dot-c), 90%, 60%);box-shadow:-.5em -.5em 1em hsl(var(--dot-c), 90%, 30%) inset,.125em .125em .25em hsl(var(--dot-c), 90%, 60%) inset,-.25em -.25em .75em .75em hsl(var(--dot-c), 90%, 50%) inset,.75em .75em .75em hsla(var(--hue), 10%, 5%, .7);animation-name:dot-c}.pl__dot--d{background-color:hsl(var(--dot-d), 90%, 60%);box-shadow:-.5em -.5em 1em hsl(var(--dot-d), 90%, 30%) inset,.125em .125em .25em hsl(var(--dot-d), 90%, 60%) inset,-.25em -.25em .75em .75em hsl(var(--dot-d), 90%, 50%) inset,.75em .75em .75em hsla(var(--hue), 10%, 5%, .7);animation-name:dot-d}@keyframes dot-a{0%{transform:rotateY(0)rotate(0)translate(-100%)rotateY(0)rotate(0)}50%{transform:rotateY(1turn)rotate(0)translate(-100%)rotateY(-1turn)rotate(0)}to{transform:rotateY(1turn)rotate(-1turn)translate(-100%)rotateY(-1turn)rotate(1turn)}}@keyframes dot-b{0%{transform:rotateY(0)rotate(0)translate(100%)rotateY(0)rotate(0)}50%{transform:rotateY(1turn)rotate(0)translate(100%)rotateY(-1turn)rotate(0)}to{transform:rotateY(1turn)rotate(-1turn)translate(100%)rotateY(-1turn)rotate(1turn)}}@keyframes dot-c{0%{transform:rotate(0)rotateX(0)translateY(-100%)rotate(0)rotateX(0)}50%{transform:rotate(-1turn)rotateX(0)translateY(-100%)rotate(1turn)rotateX(0)}to{transform:rotate(-1turn)rotateX(1turn)translateY(-100%)rotate(1turn)rotateX(-1turn)}}@keyframes dot-d{0%{transform:rotate(0)rotateX(0)translateY(100%)rotate(0)rotateX(0)}50%{transform:rotate(-1turn)rotateX(0)translateY(100%)rotate(1turn)rotateX(0)}to{transform:rotate(-1turn)rotateX(1turn)translateY(100%)rotate(1turn)rotateX(-1turn)}}