:root{--hue:223;--fg:hsl(var(--hue), 90%, 10%);--trans-dur:.3s}body{color:var(--fg);transition:background-color var(--trans-dur), color var(--trans-dur);font:1em/1.5 sans-serif}.loading-main{--primary:hsl(var(--hue), 90%, 50%);justify-content:center;align-items:center;height:100vh;padding:1.5em;display:flex}.pl1{width:8em;height:8em;display:block}.pl1__g,.pl1__rect{animation:1.5s cubic-bezier(.65,0,.35,1) infinite pl1-a}.pl1__g{transform-origin:64px 64px}.pl1__rect:first-child{animation-name:pl1-b}.pl1__rect:nth-child(2){animation-name:pl1-c}@media (prefers-color-scheme:dark){:root{--fg:hsl(var(--hue), 90%, 90%)}}@keyframes pl1-a{0%{transform:rotate(0)}80%,to{animation-timing-function:step-start;transform:rotate(90deg)}}@keyframes pl1-b{0%{width:40px;height:40px;animation-timing-function:cubic-bezier(.33,0,.67,0)}20%{width:40px;height:0;animation-timing-function:step-start}60%{width:0;height:40px;animation-timing-function:cubic-bezier(.65,0,.35,1)}80%,to{width:40px;height:40px}}@keyframes pl1-c{0%{width:40px;height:40px;animation-timing-function:cubic-bezier(.33,0,.67,0);transform:translateY(48px)}20%{width:40px;height:88px;animation-timing-function:cubic-bezier(.33,1,.67,1);transform:translate(0)}40%{width:40px;height:40px;animation-timing-function:cubic-bezier(.33,0,.67,0);transform:translate(0)}60%{width:88px;height:40px;animation-timing-function:cubic-bezier(.33,1,.67,1);transform:translate(0)}80%,to{width:40px;height:40px;transform:translate(48px)}}