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}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;z-index:1}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.arrow{--diameter: 50px;--main-bg: conic-gradient( from 1deg at 50% 50%, #fff 0%, #fff 13%, #000 13%, #000 99% );position:absolute;width:var(--diameter);height:var(--diameter);border:5px solid #fff;border-radius:50%;clip-path:polygon(0 0,50% 50%,100% 0);transform:rotate(var(--angle));animation:circle 2s linear infinite}body{margin:0;width:100vw;height:100vh;width:100%}#app{margin:0 auto}.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;place-items:center}.animated-text{font-size:3rem;width:100%;display:block;position:relative}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@property --diameter{syntax: "<length>"; initial-value: 0px; inherits: true;}@keyframes text-enter{0%{--diameter: 100vh}to{--diameter: 300px}}@keyframes text-after-enter{0%{transform:translateZ(0) rotate3d(1,1,0,0)}to{transform:translate3d(calc(-50vw + 50% + 50px),calc(-50vh + 50% + 50px),0) rotate3d(1,1,0,45deg);--diameter: 200px}}@keyframes circle{0%{--angle: 0deg}to{--angle: 360deg}}.animated-text{width:var(--diameter);height:var(--diameter);margin:0 auto;transform-style:preserve-3d;animation:text-enter 1.5s ease-in forwards,text-after-enter 1.5s ease-out forwards;animation-delay:0s,1.7s}.debug .animated-text:before{content:"";position:absolute;border-radius:50%;border:2px solid #f00;width:var(--diameter);height:var(--diameter)}.animated-text>.character{--initialAngle: calc(360deg / (var(--count) + 1) * var(--i));--angleDelta: calc(var(--angle) + var(--initialAngle));position:absolute;top:50%;left:50%;transform:translate3d(calc(cos(var(--angleDelta)) * (var(--diameter) / 2) - 50%),calc(sin(var(--angleDelta)) * (var(--diameter) / 2) - 50%),calc((sin(var(--angleDelta)) * 10px * var(--i)))) rotate(calc(var(--angleDelta)));animation:circle 10s linear infinite}