:root{--primary-color:#2a1827;--secondary-color:#6c757d;--dark-color:#343a40;--light-color:#f4f4f4;--white:#fff;--danger-color:#dc3545;--covered:50%}html{scroll-behavior:smooth}body{color:#333;margin:0;padding:0;font-family:Arial,sans-serif;line-height:1.6;overflow-x:hidden}img{max-width:100%}.container{max-width:1200px;margin:0 auto;padding:20px}.header{background:var(--dark-color);background-blend-mode:multiply;color:#fff;text-align:center;background-image:url(bg-head.378b1f58.webp);background-position:bottom;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;padding:50px 20px}.header .container{flex-direction:column;justify-content:space-evenly;height:100%;display:flex}@media (width>=768px){.header{align-items:center;height:100vh;padding:0 0 115px;display:flex}main>section{flex:1;justify-content:center;align-items:center;height:100vh;display:flex}}.header h1{color:#0000;background-image:url(https://github.com/Katenary/katenary/raw/refs/heads/develop/doc/docs/statics/logo-vertical.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;height:265px;margin:0;font-size:3rem}.header p{margin:20px 0;font-size:1.2rem}.btn-primary{color:var(--primary-color);background:#fff;border-radius:5px;margin-top:20px;padding:10px 20px;font-weight:700;text-decoration:none;display:inline-block}.btn-primary:hover{color:#fff;background:#0056b3}.features{background:var(--light-color);text-align:center;padding:50px 20px}.features h2{margin-bottom:20px;font-size:2.5rem}.feature-grid{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}@keyframes slidingLeft{0%{filter:opacity(0)blur(10px);transform:translate(-100vw)}to{filter:opacity()blur();transform:translate(0)}}@keyframes slidingRight{0%{filter:opacity(0)blur(10px);transform:translate(100vw)}to{filter:opacity()blur();transform:translate(0)}}.feature-item{background:var(--white);border:1px solid #ddd;border-radius:8px;flex:200px;padding:20px;box-shadow:0 2px 5px #0000001a}@media (width>=768px){:root{--animation-slide:entry 0% contain 0%}.from-left{view-timeline:--reveal-blockl;view-timeline-axis:block;animation:linear forwards slidingLeft;animation-range:var(--animation-slide);animation-timeline:--reveal-blockl}.from-right{view-timeline:--reveal-blockr;view-timeline-axis:block;animation:linear forwards slidingRight;animation-range:var(--animation-slide);animation-timeline:--reveal-blockr}}.how-it-works,.how-to-use,.tutorials{text-align:center;padding:50px 20px}h2{text-align:center;margin-bottom:20px;font-size:2.5rem}.how-it-works ol{text-align:left;max-width:800px;margin:0 auto;padding:0;list-style:decimal inside}.image-placeholder{border-radius:8px;justify-content:center;align-items:center;width:100%;max-width:800px;height:200px;margin:30px auto;font-size:1.2rem;display:flex}.image-placeholder img{object-fit:cover;border-radius:8px;width:100%;height:100%;margin:10px}.get-started{background:var(--primary-color);color:var(--white);text-align:center;padding:50px 20px}.get-started pre{background:var(--white);color:#333;border-radius:5px;margin:20px 0;padding:10px}div.video{padding-top:25px}pre{text-align:left}@media (width>=768px){.example{justify-content:space-between;align-items:center;gap:20px;display:flex}iframe{width:100%;height:500px}}iframe{max-width:100%}section{width:100%}section:nth-child(2n) .example{text-align:right;flex-direction:row-reverse!important}section:nth-child(odd) .example{text-align:left;flex-direction:row}section:nth-child(2n) .example h3{text-align:right}.example>div{flex:200px;align-content:center}code.hljs{border-radius:5px;box-shadow:0 6px 15px #00000080}p code{background:var(--dark-color);color:var(--light-color);border-radius:5px;padding:1px 5px;display:inline-block}section.alternate:nth-child(odd){background:var(--light-color);color:var(--dark-color)}section.alternate:nth-child(2n){background:var(--dark-color);color:var(--light-color)}#menu-toggle{z-index:11;margin:0;position:fixed}@media (width>=768px){#menu-toggle{display:none}.navbar{background:var(--white);color:var(--dark-color);z-index:10;justify-content:space-evenly;align-items:center;width:100%;display:flex;position:fixed;top:0}.navbar .container{padding:0}nav ul{flex-wrap:wrap;list-style:none;display:flex}nav ul li{margin:0 10px}nav ul li a{color:var(--dark-color);padding:10px;text-decoration:none;display:block}nav ul li a:hover{color:var(--light-color);background:var(--dark-color)}nav ul li a.active{color:var(--light-color)!important;background:var(--dark-color)!important}}@media (width<=768px){.navbar{display:none!important}.navbar:hover,#menu-toggle:focus~.navbar{display:block!important}.navbar{opacity:.8;color:var(--white);cursor:pointer;background:var(--dark-color);border:1px solid var(--dark-color);border-radius:5px;justify-content:space-between;align-items:center;padding:10px 20px;font-size:1rem;display:flex;position:fixed;top:10px;left:0;box-shadow:0 2px 5px #0000001a}.navbar:has(a:active){display:none}nav ul{margin:0;padding:0;list-style:none;display:block}nav ul li{margin:0}nav ul li a{color:var(--white);padding:10px;text-decoration:none;display:block}}footer{color:#fff;text-align:center;background:#333;flex-wrap:wrap;padding:20px 0;font-size:.9rem;display:flex}footer section{text-align:center;padding:20px;flex:250px!important}footer section p{font-weight:700}footer ul{padding:0;list-style:none}footer ul li{margin:5px 0}footer a{color:var(--white)}footer .container{flex-wrap:wrap;flex:auto;justify-content:space-between;align-items:start;width:100%;display:flex}footer .container>p{text-align:center;flex:auto}footer section{flex:auto;align-self:normal;position:relative}@media (width>=768px){footer section:after{content:" ";filter:opacity(.5)blur(1px);background:#fff;width:1px;height:90%;display:block;position:absolute;top:5%;right:0}footer section:last-child:after{display:none}}.large-icon{font-size:3rem}@keyframes bouncing{0%{transform:translateY(0)}50%{transform:translateY(-20px)}to{transform:translateY(0)}}.down{position:relative;bottom:0}a.down{background:var(--white);color:var(--dark-color);border-radius:50%;justify-content:center;align-self:center;align-items:center;width:120px;height:120px;animation:2s infinite bouncing;display:flex}