: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:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{overflow-x:hidden;margin:0;padding:0;width:100%}nav{background-color:#9cb8c1;padding:5px 20px;display:flex;justify-content:space-between;align-items:center;width:100%;position:fixed;z-index:3}.brand{display:flex;align-items:center;text-decoration:none;padding:5px 10px;border-radius:5px}.logo{width:40px;height:auto;margin-right:10px;transition:transform .2s}.brand h2{color:#fff;margin:0;font-size:22px;transition:color .3s}.brand:hover .logo{transform:scale(1.1)}.brand:focus,.brand:active,.brand:hover{outline:none;background:none;border:none;box-shadow:none}ul{list-style:none;display:flex;gap:20px;padding:0;margin:0 0 0 auto}li{display:inline}a{text-decoration:none;color:#fff;font-size:16px;padding:10px 15px;transition:background .3s}ul li.active a{color:#000;font-weight:700;border-bottom:1px solid black}.menu-toggle{display:none;background:none;border:none;font-size:24px;color:#fff;cursor:pointer}@media (max-width: 768px){nav{position:relative;z-index:1000}.overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:#00000080;display:none;z-index:999}.overlay.show{display:block}ul{flex-direction:column;gap:5px;width:250px;position:fixed;top:60px;left:-100%;height:calc(100vh - 60px);background-color:#000;padding:20px;transition:left .3s ease-in-out;z-index:1000}ul.show{left:0;z-index:1000}.overlay.show{z-index:999}a{display:block;padding:12px 20px;text-align:left;width:100%}.menu-toggle{display:block;position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:1100}ul li.active a{color:#000;font-weight:700;border-bottom:1px solid black;background-color:#fff}}.container{width:100vw;background-color:#fff;display:flex;flex-direction:column;align-items:center}.container-title{margin-top:20vh;width:80%;display:flex;justify-content:center}.container-title .content-title{width:60%;text-align:center;padding:10px}.content-title h1{color:#000;font-size:3rem;font-weight:700;margin:0;text-align:center}.container-button-download{margin-top:5vh;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.container-button-download .button-download,.container-button-download .button-figma{background-color:#00b7ff;color:#333;font-size:1.2rem;font-weight:700;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease-in-out;box-shadow:0 4px 8px #0000001a;outline:none;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:180px}.container-button-download .button-figma{background-color:#b1b1b1;color:#fff}.container-button-download .button-download:hover,.container-button-download .button-figma:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.container-button-download .button-download:hover{background-color:#00bcd4}.container-button-download .button-figma:hover{background-color:#bdbdbd}.container-button-download .button-download:active,.container-button-download .button-figma:active{transform:scale(.95);box-shadow:0 2px 4px #0000001a}.container-photo-background{margin-top:10vh;height:90vh;width:80%;border-radius:2em;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.img-background{width:100%;height:100%;object-fit:cover;border-radius:2em;position:absolute;z-index:1}.img-overlay{max-width:90%;max-height:90%;object-fit:contain;position:absolute;z-index:2}.container-feature{display:flex;justify-content:space-between;width:80%;margin:5vh auto;border-radius:1em;height:50vh}.container-feature.reverse{flex-direction:row-reverse}.feature-left{width:40%;padding:20px;border-radius:10px;color:#000;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left}.feature-right{width:55%;height:25em;background-color:#fff;border-radius:10px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.img-background-feature{width:100%;border-radius:1em}.container-heading{margin-top:5vh;width:80%;display:flex;justify-content:center}.container-heading .content-heading{width:50%;text-align:center;padding:10px}.content-heading h1{color:#000;font-size:2rem;font-weight:700;margin:0;text-align:center}@media screen and (max-width: 1024px){.container-title .content-title{width:70%}.content-title h1{font-size:2rem}}@media screen and (max-width: 768px){.container{padding:10px}.container-title{margin-top:0vh;padding:15px 0}.container-title .content-title{width:90%}.content-title h1{font-size:1.8rem}.container-button-download{flex-direction:column;align-items:center}.container-button-download .button-download,.container-button-download .button-figma{width:100%;max-width:250px;height:50px}.container-button-download .button-figma{font-size:1em}.container-photo-background{height:50vh;width:90%}.content-heading h1{font-size:1.8rem}.container-feature{flex-direction:column!important;align-items:center;height:auto;margin-top:10px}.container-feature.reverse{flex-direction:column!important}.feature-left{width:90%;text-align:center;align-items:center;padding:15px}.feature-right{width:100%;height:auto;margin-top:20px}}@media screen and (max-width: 480px){.container-title{width:100%}.content-title h1{font-size:1.5rem}.container-title .content-title{width:95%}.container-button-download .button-download,.container-button-download .button-figma{font-size:.9rem;padding:8px 16px}.container-photo-background{height:40vh;width:100%;border-radius:1em}.img-background{border-radius:1em}.content-heading h1{font-size:1.6rem}.container-feature{width:90%;flex-direction:column!important;align-items:center;height:auto}.container-feature.reverse{flex-direction:column!important}.feature-left{width:100%;text-align:center;align-items:center;padding:15px}.feature-left h2{font-size:1.4rem;margin-bottom:10px}.feature-left p{font-size:1rem}.feature-right{width:100%;height:auto;margin-top:20px}}.footer{background-color:#fff;color:#000;text-align:center;padding:1rem 0;font-size:.9rem;border-top:1px solid #9cb8c1;margin-top:2rem}.container-installation-guide{margin-top:3.7em;width:100%;background-color:#fff;display:flex;flex-direction:column;align-items:center}.installation{margin-top:1rem;width:80%;display:flex;flex-direction:row;justify-content:center;padding:2rem;gap:2rem}.left-column{flex:4;color:#000;text-align:justify;margin-right:250px}.tutorial-image{margin-top:1rem;margin-bottom:2rem;width:100%;max-width:600px;border-radius:8px;box-shadow:0 4px 8px #0003}.right-column{position:fixed;top:6rem;right:10rem;width:220px;color:#000;padding:1rem 1.5rem;border-radius:8px;height:fit-content;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}.right-column h3{margin:0;font-size:1.2rem;font-weight:700}.nav-links{display:flex;flex-direction:column;gap:.6rem;width:100%}.nav-links a{text-decoration:none;color:#000;transition:color .3s ease}.nav-links a:hover{color:#87cefa}@media screen and (max-width: 1124px){.installation{width:90%}.right-column{display:none}.left-column{flex:4;color:#000;text-align:justify;margin-right:0}}@media screen and (max-width: 768px){.container-installation-guide{margin-top:0}}@media screen and (max-width: 480px){.installation{width:100%}}.container-about{width:100vw;margin-top:3.8em;display:flex;flex-direction:column;align-items:center;color:#000}.container-about-title{width:80%;padding:5em;display:flex;flex-direction:column;align-items:center}.container-content-about{width:100%;display:flex;flex-direction:column;align-items:center}.border-bottom-about{width:80%;padding-top:1em;border-bottom:1px solid gray}.container-about-sub-title{width:80%;padding-top:1.5em}.container-about-paragraph{width:80%;padding-top:1em}.container-about-paragraph p{margin-bottom:1em;line-height:1.6;text-align:justify}.container-button-download-about{margin-top:1vh;display:flex;justify-content:flex-start;align-items:center;width:100%}.download-button{background-color:#00b7ff;color:#fff;font-size:1rem;font-weight:700;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease-in-out,transform .2s ease-in-out;box-shadow:0 4px 8px #0003;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:180px;margin-bottom:1em}.download-button:hover{background-color:#0096d6;transform:scale(1.05)}.download-button:active{transform:scale(.98)}@media screen and (max-width: 1024px){.container-about-title{width:100%;padding:4em;text-align:center}}@media screen and (max-width: 768px){.container-about-title{width:100%;padding:2.5em;text-align:center}.container-about-title h1{font-size:2em}.container-about-sub-title h2{font-size:1.5em}}@media screen and (max-width: 480px){.container-about-title{width:100%;padding:1em;text-align:center}.container-about-title h1{font-size:1.5em}.container-about-sub-title h2{font-size:1.3em}.container-about-paragraph p{font-size:1em}}
