:root{font-family:Inter,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}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}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}body{background:#242424}.gallery{--size: 600px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #242424,0 20px 40px -20px #242424;width:var(--size);height:var(--size);background:#242424;border:6px solid #242424;display:grid;grid-template-rows:50% 50%;grid-template-columns:1fr 1fr;overflow:hidden;gap:6px}.gallery img{width:100%;height:100%;object-fit:cover}@keyframes moveHorizontal{to{object-position:100% 0}}@keyframes moveVertical{to{object-position:0 100%}}@keyframes shrinkVertical{to{height:0}}@keyframes shrinkHorizontal{to{width:0}}@keyframes growHorizontal{to{width:100%}}@keyframes growHorizontal2{to{width:70%}}@keyframes growVertical{to{height:100%}}@keyframes growAll{to{width:100%;height:100%}}.gallery.animate img:nth-child(1){grid-column:1;grid-row:1;justify-self:end;animation:moveHorizontal 8.5s .5s 1,shrinkHorizontal 2s 9s ease-in 1;animation-fill-mode:forwards}.gallery.animate img:nth-child(2){grid-column:2;grid-row:1;justify-self:end;animation:shrinkHorizontal 2s 11s 1;animation-fill-mode:forwards}.gallery.animate img:nth-child(3){grid-row:2;grid-column:1 / 3;align-self:end;object-position:0 0;animation:moveVertical 5s 1s 1,shrinkVertical 3s 5s 1;animation-fill-mode:forwards}.gallery.animate img:nth-child(4){grid-column:1 / 3;grid-row:1;width:0;justify-self:center;align-self:start;animation:growHorizontal 2.25s 11s 1,moveHorizontal 4s 14s 1,shrinkVertical 2s 18s 1;animation-fill-mode:forwards}.gallery.animate img:nth-child(5){grid-column:1;grid-row:2;width:0;justify-self:start;align-self:end;animation:growHorizontal 2.5s 7.5s 1,moveVertical 4s 12.5s 1,shrinkHorizontal 2s 17s 1;animation-fill-mode:forwards}.gallery.animate img:nth-child(6){grid-column:2;grid-row:2;width:0;justify-self:end;align-self:end;animation:growHorizontal 2s 8s 1,shrinkHorizontal 2s 17s 1;animation-fill-mode:forwards}.gallery.animate img:nth-child(7){grid-column:1/3;grid-row:1/3;width:0;justify-self:end;align-self:end;object-position:0 0;animation:growHorizontal 2s 20s 1,moveHorizontal 16s 21.5s 1;animation-fill-mode:forwards}