: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}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}}body{background-color:#fff3e7;color:#fff3e7;font-family:Inter,sans-serif}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2.5rem;font-weight:600}.logo{font-size:3rem;color:#535353;position:absolute;top:1.5rem;left:2.5rem;z-index:20;font-family:Inter,sans-serif;font-weight:900;cursor:pointer}.logo:focus{outline:none;box-shadow:none}.logo a{color:#535353;text-decoration:none}.logo a:focus{outline:none;box-shadow:none}.menu-btn{background-color:#f4a942;color:#fff;padding:1rem 1.5rem;border-radius:9999px;border:none;cursor:pointer;font-weight:800;position:absolute;top:3rem;right:2.5rem;z-index:10}.hero{padding:4rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:1200px;margin:0 auto;position:relative;width:100%}.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center}.hero-text{flex:1 1 50%;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.hero-text h1{font-family:Playfair Display,serif;font-size:16rem;line-height:1;margin-bottom:4rem;letter-spacing:-2px;color:#535353;text-align:left}.letter-o,.letter-o-image-anchor{position:relative;display:inline-block;z-index:1}.portrait{position:center;top:0;left:0;transform:translate(-50%,-50%);border-radius:50%;filter:grayscale(100%);z-index:2;pointer-events:none}.hero-text p{font-size:1.1rem;max-width:520px;line-height:1.7;color:#333;margin-bottom:2rem;text-align:left;transform:translateY(-50%)}.cta{background-color:#f4a942;color:#fff;padding:.75rem 1.5rem;transform:translate(60%,-50%);border:none;border-radius:9999px;cursor:pointer;font-size:1rem;box-shadow:0 5px 15px #00000014}.cta:hover{background-color:#e1942d}.hero-photo{flex:1 1 40%;position:relative;display:flex;justify-content:center}.portrait{position:absolute;top:70%;left:63%;transform:translate(-50%,-60%);width:clamp(180px,30vw,380px);border-radius:1rem;filter:grayscale(100%);z-index:3;max-width:100%}.shape-star{position:absolute;width:60px;height:auto;z-index:1;pointer-events:none}.shape-star.orange{top:12%;left:85%;width:150px}.shape-star.dark{top:10%;left:95%;width:100px}@media (max-width: 768px){.hero{flex-direction:column-reverse;text-align:center}.hero-text h1{font-size:5rem}.hero-text p{margin:0 auto;text-align:center;background-color:#fff3e7b3;padding:1rem;border-radius:.75rem;box-shadow:0 4px 12px #bb9a9a0d}.navbar{flex-direction:column;gap:1rem}.portrait{top:50%;left:50%;transform:translate(-50%,-50%);width:180px;z-index:2}.hero-text p{position:relative;z-index:3;top:20px;left:-40px}.cta{position:relative;z-index:3;padding:.5rem 4.5rem;top:10px;left:-40px;font-size:1.2rem}.shape-star.orange{top:18%;left:70%;transform:translate(-50%,-50%);width:80px}.shape-star.dark{top:15%;left:79%;transform:translate(-50%,-50%);width:60px}}.circle{display:inline-block;color:#535353;margin-right:.1rem;vertical-align:middle;font-size:3rem;line-height:1;position:relative;top:-4px;left:2px}button:focus,button:focus-visible,a:focus,a:focus-visible{outline:none;box-shadow:none}*:focus{outline:none;box-shadow:none}#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}