:root{--bg-primary:#fff;--bg-secondary:#f9fafb;--text-primary:#343434;--text-primary-invert:#f9fafb;--text-secondary:#9ca3af;--text-accent:#f97316;--footer-bg:#111827;--border-radius:.5rem;--transition-duration:.3s;--bottom-shadow:4px 4px 10px #0000001a;--smooth-shadow:0 8px 14px 0 #00000014;--red:#a33;--orange:coral;--blue:cornflowerblue;--green:#77cfa5;--grey:#aaa}html,body{scroll-behavior:smooth;color:var(--text-primary);margin:0;padding:0;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}#vanta-bg{z-index:0;background-color:#111827;width:100%;height:100%;min-height:100vh;position:absolute;top:0;left:0}pre{text-wrap:auto;background-color:var(--text-primary);border-radius:var(--border-radius);box-shadow:var(--bottom-shadow);padding:1rem;font-size:.875rem;& code{color:var(--text-primary-invert);& span{color:var(--green)}}}.hidden{display:none}.gradient-text{color:#0000;background-image:linear-gradient(90deg,#f97316,#7c3aed);background-clip:text}.button{background-color:var(--text-accent);color:var(--text-primary-invert);border-radius:var(--border-radius);cursor:pointer;transition:background-color var(--transition-duration);border:none;padding:.75rem 1.5rem;font-size:1rem;text-decoration:none;display:inline-block;& .feather{vertical-align:middle;height:1rem;margin-left:.1rem}&:hover{box-shadow:0 4px 14px #f97316b0}}.picto{border-radius:100%;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;display:flex;&.red{color:var(--red);background-color:hsl(from var(--red)h s calc(l*1.4))}&.blue{color:var(--blue);background-color:hsl(from var(--blue)h s calc(l*1.4))}&.orange{color:var(--orange);background-color:hsl(from var(--orange)h s calc(l*1.4))}&.green{color:var(--green);background-color:hsl(from var(--green)h s calc(l*1.4))}&.grey{color:var(--grey);background-color:hsl(from var(--grey)h s calc(l*1.4))}}nav{flex-direction:row;width:100%;& .nav-links{gap:1.5rem;display:none;& a,& a:visited{& .feather{vertical-align:middle;height:1rem;margin-right:.25rem}color:var(--text-primary);text-decoration:none;transition:color .2s ease-in-out&:hover{color:var(--text-accent)}}}& #navbar{justify-content:space-between;max-width:80rem;margin:0 auto;padding:1rem 0;display:flex;& img{height:40px}}}#hero{padding:6rem 1rem 8rem;position:relative;overflow:hidden;& #hero-content{text-align:center;max-width:80rem;color:var(--text-primary-invert);margin:0 auto;position:relative;& h1{margin-bottom:1rem;font-size:3.75rem}& p{font-size:2rem}}}section{padding:.5rem;&>div{max-width:80rem;margin:0 auto 4rem}&>div:first-child{text-align:center;& h2{font-size:2rem}}}.diapo{flex-wrap:wrap;display:flex;&>div{border:1px solid rgba(from var(--text-primary)/.3);background-color:var(--bg-secondary);border-radius:1rem;flex-direction:column;flex:1;min-width:15rem;padding:.2rem 1rem;transition:all .3s ease-in-out;display:flex;& p{flex-grow:1}}& .action{place-self:center;margin-bottom:1rem}}#demo{& .video-player{border-radius:1rem;width:65%;height:26rem;margin:0 auto;box-shadow:0 0 12px #00000080}}#tutorials{& .video-player{width:85%;height:16rem;margin:0 auto}& .diapo{text-align:center}}#cta{background:linear-gradient(90deg,#f97316,#7c3aed);padding:4rem 1rem;& h2{color:var(--text-primary-invert)}color:var(--text-primary-invert)& .button{background-color:var(--text-primary-invert);color:var(--text-primary);font-weight:700}}footer{background-color:var(--footer-bg);color:var(--text-primary-invert);padding-top:1rem;& ul,& li{padding:0;list-style:none}& a,& a:visited{color:var(--text-secondary);text-decoration:none;&:hover{text-decoration:underline}}& .diapo{max-width:80rem;margin:0 auto}& .diapo>div{background-color:#0000;&:hover{box-shadow:none}}& .logo img{height:3rem}& .feather{justify-self:center;height:2rem;margin-right:.5rem}& .copyright{text-align:center;color:var(--text-secondary);padding:1rem 0;font-size:.875rem}}.video-player iframe{border-radius:1rem;width:100%;height:100%}#mobile-menu-button{cursor:pointer;z-index:30;background:0 0;border:none;position:absolute;top:1rem;right:1rem;& .feather{height:2rem;color:var(--text-primary)}}#mobile-menu{background-color:var(--bg-primary);z-index:20;width:100%;position:absolute;& a,& a:hover,& a:visited{border-bottom:1px solid var(--text-secondary);color:var(--text-primary);padding:1rem;text-decoration:none;display:block}&>div{flex-direction:column;display:flex}}@media (width>=769px){#mobile-menu,#mobile-menu-button{visibility:hidden;display:none}nav{z-index:10;background-color:var(--bg-secondary);box-shadow:var(--bottom-shadow);position:fixed;top:0;& #navbar{padding:1rem 2rem 0 0}}#hero{margin-top:4rem}.nav-links{display:flex!important}section,nav{padding:0 1rem}.diapo{gap:.8em;&>div{padding:2rem}& .action{margin-bottom:0}}}