button.show-hide{position:absolute;z-index:100;top:2rem;right:2rem;border:2px solid black;background-color:transparent;border-radius:1.75rem;cursor:pointer;outline:none}button.show-hide:focus,button.show-hide:focus-visible{border:2px solid black;color:#fff;background-color:#000;outline:none}.container-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#2e8b5780;background-color:tomato;display:grid;place-items:center;clip-path:polygon(0 105%,100% 100%,100% 100%,0% 100%);transition:clip-path .55s cubic-bezier(.4,0,0,1)}.container-overlay.show{clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}.container-overlay.show .letters-reveal .container-letter .letter{transform:translateY(0)}.container-overlay.hide{clip-path:polygon(0 105%,100% 100%,100% 100%,0% 100%)}.container-overlay .letters-reveal{position:relative;display:flex;flex-flow:column wrap;align-items:center;cursor:pointer}.container-overlay .letters-reveal.show .container-letter .letter,.container-overlay .letters-reveal:hover .container-letter .letter{transform:translateY(0)}.container-overlay .letters-reveal .container-letter{position:relative;overflow:hidden}.container-overlay .letters-reveal .container-letter .letter{position:relative;display:inline-flex;transform:translateY(100%);transition:transform .5s cubic-bezier(.4,0,0,1);font-size:clamp(1.5rem,5vw,4rem);color:#fff;font-family:Courier New,Courier,monospace}.container-overlay .letters-reveal .container-letter:hover .letter{transform:translateY(0)}.container-overlay .letters-reveal .container-letter:nth-child(0) .letter{transition-delay:0}.container-overlay .letters-reveal .container-letter:nth-child(1) .letter{transition-delay:.15s}.container-overlay .letters-reveal .container-letter:nth-child(2) .letter{transition-delay:.2s}.container-overlay .letters-reveal .container-letter:nth-child(3) .letter{transition-delay:.25s}.container-overlay .letters-reveal .container-letter:nth-child(4) .letter{transition-delay:.3s}: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}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:calc(100vh - 2rem);border:1rem solid tomato}h1{font-size:3.2em;line-height:1.1}#app{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 rgba(100,108,255,.6666666667))}.logo.vanilla:hover{filter:drop-shadow(0 0 2em rgba(247,223,30,.6666666667))}.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}}