:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}.container{position:relative;height:100px;display:flex;justify-content:center;align-items:center;text-align:center}.orbit{z-index:1;position:absolute;width:100px;height:40px;border:2px solid;border-color:#2067cd #549bff #549bff #2067cd;border-radius:50%;transform:rotate(60deg)}.orbit:nth-child(1 of.orbit){transform:rotate(-60deg)}.orbit:nth-child(2 of.orbit){transform:rotate(-180deg)}.center{position:absolute;font-size:5em;color:#fff;z-index:5}.center.shadow{color:transparent;text-shadow:2px 2px 5px yellow}.electron{z-index:4;position:absolute;top:50%;left:50%;animation:rotate 5s linear infinite;font-size:1em;border-radius:50%;text-shadow:2px 2px .5em pink}.tilt{transform:rotate(45deg)}.electron:nth-child(2n of.electron){z-index:1;animation-delay:-2.5s}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0) translate(-30px) translateY(40px) rotate(0)}25%{transform:translate(-50%,-50%) rotate(90deg) translate(40px) translateY(-30px) rotate(90deg)}50%{transform:translate(-50%,-50%) rotate(180deg) translate(-30px) translateY(40px) rotate(180deg)}75%{transform:translate(-50%,-50%) rotate(270deg) translate(20px) translateY(-30px) rotate(270deg)}to{transform:translate(-50%,-50%) rotate(360deg) translate(-30px) translateY(40px) rotate(360deg)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.panel{justify-content:center}