.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'Open Sans';}body {line-height: var(--o-font-lineheight-3);font-size: var(--o-font-size-fluid-0) ;font-weight: 400;color: var(--o-text-2);}.oxy-nav-menu-hamburger-line {background-color: var(--o-text-2);}h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans Pro';font-size: calc(1.2*var(--o-font-size-fluid-3)) ;font-weight: 700;line-height: var(--o-font-lineheight-0);color: var(--o-text-1);}h2, h3, h4, h5, h6{font-size: var(--o-font-size-fluid-2) ;line-height: var(--o-font-lineheight-0);color: var(--o-text-1);}h3, h4, h5, h6{font-size: var(--o-font-size-fluid-1) ;line-height: var(--o-font-lineheight-0);color: var(--o-text-1);}h4, h5, h6{font-size: var(--o-font-size-fluid-1) ;line-height: var(--o-font-lineheight-0);color: var(--o-text-1);}h5, h6{font-size: calc(1.25*var(--o-font-size-fluid-0)) ;line-height: var(--o-font-lineheight-0);color: var(--o-text-1);}h6{font-size: var(--o-font-size-fluid-0) ;line-height: var(--o-font-lineheight-0);color: var(--o-text-1);}a {text-decoration: ;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: var(--o-size-10) ;
padding-right: var(--o-size-4) ;
padding-bottom: var(--o-size-10) ;
padding-left: var(--o-size-4) ;
}.ct-new-columns > .ct-div-block {
padding-top: var(--o-size-4);
padding-right: var(--o-size-4);
padding-bottom: var(--o-size-4);
padding-left: var(--o-size-4);
}.oxy-header-container {
padding-right: var(--o-size-4) ;
padding-left: var(--o-size-4) ;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.oxel_focus_section {
 transition-duration:0.4s;
 transition-timing-function:ease-in-out;
 overflow:hidden;
overflow-x: hidden;
}
.oxel_focus_section:not(.ct-section):not(.oxy-easy-posts),
.oxel_focus_section.oxy-easy-posts .oxy-posts,
.oxel_focus_section.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_focus_section__inner {
 transition-duration:0.4s;
 transition-timing-function:ease-in-out;
 width:100%;
 text-align:center;
 padding-top:32px;
 padding-left:32px;
 padding-right:32px;
 padding-bottom:32px;
 z-index:1001;
 position:relative;
}
.oxel_focus_section__inner:not(.ct-section):not(.oxy-easy-posts),
.oxel_focus_section__inner.oxy-easy-posts .oxy-posts,
.oxel_focus_section__inner.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.oxel_focus_section__backdrop {
 position:fixed;
 right:0px;
 left:0px;
 bottom:0px;
 background-color:var(--o-surface-1);
 z-index:1000;
 opacity:0;
 transition-duration:0.8s;
 transition-timing-function:ease-in-out;
 transition-property:top bottom;
 top:0px;
pointer-events: none;
}
.op-svg-site-logo {
}
.op-site-logo {
 text-align:left;
 gap:var(--o-size-4) ;
}
.op-site-logo:not(.ct-section):not(.oxy-easy-posts),
.op-site-logo.oxy-easy-posts .oxy-posts,
.op-site-logo.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
gap:var(--o-size-4)  ;
}
.op-nav {
}
.op-nav__ul {
}
.op-nav__li {
}
.op-nav__link {
}
.op-nav__li--icon {
}
.test {
}
.op-hero {
}
.op-card-2 {
 background-color:var(--o-surface-2);
 border-top-color:var(--o-surface-3);
 border-right-color:var(--o-surface-3);
 border-bottom-color:var(--o-surface-3);
 border-left-color:var(--o-surface-3);
 border-radius:var(--o-radius-2) ;
 padding-top:var(--o-size-fluid-2) ;
 padding-right:var(--o-size-fluid-2) ;
 padding-bottom:var(--o-size-fluid-2) ;
 padding-left:var(--o-size-fluid-2) ;
 width:100%;
box-shadow: var(--o-shadow-6);
}
.op-blockquote {
 border-top-left-radius:0px;
 border-bottom-left-radius:0px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-left-color:var(--o-accent);
 border-left-width:var(--o-border-5) ;
}
.op-hero-title {
}
.op-license-badge {
}
.op-mono {
}
.op-hero-tagline {
}
.op-card-1 {
 background-color:var(--o-surface-1);
 border-top-color:var(--o-surface-3);
 border-right-color:var(--o-surface-3);
 border-bottom-color:var(--o-surface-3);
 border-left-color:var(--o-surface-3);
 border-radius:var(--o-radius-2) ;
 padding-top:var(--o-size-fluid-2) ;
 padding-right:var(--o-size-fluid-2) ;
 padding-bottom:var(--o-size-fluid-2) ;
 padding-left:var(--o-size-fluid-2) ;
 width:100%;
box-shadow: var(--o-shadow-3);
}
@media (max-width: 991px) {
.op-card-1 {
}
}

.op-hero-icon {
}
.op-card-why {
 gap:var(--o-size-fluid-1) ;
}
.op-card-why:not(.ct-section):not(.oxy-easy-posts),
.op-card-why.oxy-easy-posts .oxy-posts,
.op-card-why.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--o-size-fluid-1)  ;
}
.op-card-why__icon {
}
.op-card-why__heading {
 text-align:center;
 font-size:var(--o-font-size-fluid-0) ;
 width:100%;
}
.op-card-why__text {
 text-align:center;
 font-size:calc(0.8*var(--o-font-size-fluid-0)) ;
}
.op-grid-3-2 {
}
.op-grid-3-2:not(.ct-section):not(.oxy-easy-posts),
.op-grid-3-2.oxy-easy-posts .oxy-posts,
.op-grid-3-2.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(1, minmax(200px, 1fr));grid-column-gap: 20px;grid-row-gap: 20px;}
.op-md-grid-1 {
}
.op-first {
}
.op-steps-card {
 background-color:var(--o-surface-2);
 gap:var(--o-size-fluid-1) ;
 padding-top:var(--o-size-fluid-2) ;
 padding-right:var(--o-size-fluid-2) ;
 padding-bottom:var(--o-size-fluid-2) ;
 padding-left:var(--o-size-fluid-2) ;
 border-radius:var(--o-radius-2) ;
 position:relative;
box-shadow: var(--o-shadow-4); isolation: isolate;
}
.op-steps-card:not(.ct-section):not(.oxy-easy-posts),
.op-steps-card.oxy-easy-posts .oxy-posts,
.op-steps-card.ct-section .ct-section-inner-wrap{
gap:var(--o-size-fluid-1)  ;
}
.op-card-link:after{
 content:"»";
 margin-left:var(--o-size-2) ;
 color:var(--o-accent);
}
.op-card-link {
 margin-left:auto;
}
.op-grid-2-3 {
}
.prop {
}
.op-btn {
}
.op-comp-table {
 gap:var(--o-size-fluid-2) ;
 padding-top:var(--o-size-fluid-4) ;
 padding-bottom:var(--o-size-fluid-4) ;
 padding-left:var(--o-size-fluid-4) ;
 padding-right:var(--o-size-fluid-4) ;
 text-align:left;
}
.op-comp-table:not(.ct-section):not(.oxy-easy-posts),
.op-comp-table.oxy-easy-posts .oxy-posts,
.op-comp-table.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--o-size-fluid-2)  ;
}
.op-list-item {
 font-size:var(--o-font-size-fluid-1) ;
}
.op-swatch {
 width:100%;
 font-size:var(--o-font-size-fluid-1) ;
}
.op-swatch:not(.ct-section):not(.oxy-easy-posts),
.op-swatch.oxy-easy-posts .oxy-posts,
.op-swatch.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(12, minmax(10px, 1fr));grid-column-gap: var(--o-size-1) ;grid-row-gap: 20px;}
.op-swatch:not(.ct-section):not(.oxy-easy-posts) > :nth-child(1),
.op-swatch.ct-section .ct-section-inner-wrap > :nth-child(1),
.op-swatch.oxy-easy-posts .oxy-posts > :nth-child(1){
grid-column: span 2;}
.op-color-sample:hover{
transform:scale(1.2,1.2) skew(-5deg,5deg);transition-delay: 0s; transition-timing-function: var(--o-ease-elastic-3); transition-duration: .1s; box-shadow: var(--o-shadow-6);
}
.op-color-sample {
 border-top-style:dashed;
 border-right-style:dashed;
 border-bottom-style:dashed;
 border-left-style:dashed;
box-shadow: var(--o-shadow-3); transition: transform 2s var(--o-ease-squish-5) 3s;
}
.op-prop {
 color:var(--o-brand);
 font-size:var(--o-font-size-fluid-0) ;
 line-height:var(--o-font-lineheight-3);
}
.op-text-group {
 gap:var(--o-size-fluid-2) ;
 max-width:var(--o-size-content-3) ;
 width:100%;
}
.op-text-group:not(.ct-section):not(.oxy-easy-posts),
.op-text-group.oxy-easy-posts .oxy-posts,
.op-text-group.ct-section .ct-section-inner-wrap{
gap:var(--o-size-fluid-2)  ;
}
.op-gradients-grid {
 width:100%;
}
.op-gradients-grid:not(.ct-section):not(.oxy-easy-posts),
.op-gradients-grid.oxy-easy-posts .oxy-posts,
.op-gradients-grid.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));grid-column-gap: var(--o-size-fluid-2) ;grid-row-gap: var(--o-size-fluid-2) ;}
.op-gradient-sample:hover{
transform:scale(1.2,1.2) skew(-5deg,5deg);transition-delay: 0s; transition-timing-function: var(--o-ease-elastic-3); transition-duration: .1s; box-shadow: var(--o-shadow-6);
}
.op-gradient-sample {
 border-top-style:dashed;
 border-right-style:dashed;
 border-bottom-style:dashed;
 border-left-style:dashed;
box-shadow: var(--o-shadow-3); transition: transform 2s var(--o-ease-squish-5) 3s; aspect-ratio: var(--o-ratio-landscape);
}
.op-noisy-gradients-grid {
 width:100%;
}
.op-noisy-gradients-grid:not(.ct-section):not(.oxy-easy-posts),
.op-noisy-gradients-grid.oxy-easy-posts .oxy-posts,
.op-noisy-gradients-grid.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));grid-column-gap: var(--o-size-fluid-2) ;grid-row-gap: var(--o-size-fluid-2) ;}
.op-shadows-grid {
 width:100%;
}
.op-shadows-grid:not(.ct-section):not(.oxy-easy-posts),
.op-shadows-grid.oxy-easy-posts .oxy-posts,
.op-shadows-grid.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));grid-column-gap: var(--o-size-fluid-6) ;grid-row-gap: var(--o-size-fluid-6) ;}
.op-ratio-sample:hover{
transform:scale(1.2,1.2) skew(-5deg,5deg);transition-delay: 0s; transition-timing-function: var(--o-ease-elastic-3); transition-duration: .1s; box-shadow: var(--o-shadow-6);
}
.op-ratio-sample {
 border-top-style:dashed;
 border-right-style:dashed;
 border-bottom-style:dashed;
 border-left-style:dashed;
box-shadow: var(--o-shadow-3); transition: transform 2s var(--o-ease-squish-5) 3s; background-color: var(--o-surface-2); box-shadow: var(--o-shadow-1); block-size: var(--o-size-13); display: grid; place-items: center;
}
.op-ratio-text {
font-family: var(--o-font-mono);
}
.op-left-sidebar {
width: 100%; display: grid; grid-template-columns: calc(var(--o-size-content-1)*1.3) auto; gap: var(--o-size-4); align-items: center;
}
.op-size-sample {
 height:var(--o-size-6) ;
 background-color:var(--o-link-visited);
}
.op-border-sample {
inline-size: var(--o-size-12); aspect-ratio: var(--o-ratio-square); border-color: var(--o-accent); border-style: solid;
}
.op-animation-sample {
 background-color:var(--o-link-visited);
 height:200px;
 width:100%;
 border-radius:var(--o-radius-2) ;
animation: jump 2s ease infinite; display: grid; place-items: center;
}
.op-animation-sample-text {
 color:var(--o-surface-1);
 font-size:var(--o-font-size-fluid-3) ;
 font-weight:100;
}
.o-scroll-x-overflow {
}
.op-left-sidebar--small {
grid-template-columns: var(--o-size-content-1) auto;
}
.op-svg-site-logo svg {	
	stroke: none;
	width: 40px;
}

.op-svg-site-logo svg .op-svg-logo__dash,
.op-svg-site-logo svg .op-svg-logo__bubble {
	fill: var(--o-logo-dash);
}

.op-svg-site-logo > svg .op-svg-logo__ring {
	fill: var(--o-logo-ring);
}

.op-site-logo:hover .op-svg-site-logo svg .op-svg-logo__dash,
.op-site-logo:hover .op-svg-site-logo svg .op-svg-logo__bubble {
	fill: var(--o-logo-dash-hover);
}

.op-site-logo:hover .op-svg-site-logo > svg #op-svg-logo__ring {
	fill: var(--o-logo-ring-hover);
}

.op-site-logo .ct-text-block {
	color: var(--o-text-1);
}

.op-site-logo:hover .ct-text-block {
	color: var(--o-bw);
}

.op-site-logo span {
	color: var(--o-accent);
}
.op-site-logo:hover span {
	color: var(--o-accent-hover);
}

.op-link-icon {
	width: 100%;
	fill: var(--o-link);
	stroke: none;
}

.op-icon-o {
	stroke:var(--o-link-visited);
}
.op-icon-p {
	stroke:var(--o-link-visited-hover);
}html {
	/* light */
	--o-brand-light: var(--o-violet-6);
	--o-brand-light-hsl: var(--o-violet-6-hsl);
	--o-brand-hover-light: var(--o-violet-8);
	--o-accent-light: var(--o-yellow-6);
	--o-accent-light-hsl: var(--o-yellow-6-hsl);
	--o-accent-hover-light: var(--o-yellow-8);
	--o-link-light: var(--o-pink-8);
	--o-link-light-hsl: var(--o-pink-7-hsl);
	--o-link-hover-light: var(--o-pink-9);
	--o-link-visited-light: var(--o-teal-7);
	--o-link-visited-light-hsl: var(--o-teal-7-hsl);
	--o-link-visited-hover-light: var(--o-teal-9);
	--o-text-1-light: var(--o-gray-9);
	--o-text-2-light: var(--o-gray-7);
	--o-text-3-light: var(--o-gray-5);
	--o-text-1-light-hsl: var(--o-gray-9-hsl);
	--o-text-2-light-hsl: var(--o-gray-7-hsl);
	--o-text-3-light-hsl: var(--o-gray-5-hsl);
	--o-surface-1-light: var(--o-gray-0);
	--o-surface-2-light: var(--o-gray-2);
	--o-surface-3-light: var(--o-gray-3);
	--o-surface-4-light: var(--o-gray-4);
	--o-bsurface-1-light: var(--o-violet-1);
	--o-bsurface-2-light: var(--o-violet-2);
	--o-bsurface-3-light: var(--o-violet-3);
	--o-bsurface-4-light: var(--o-violet-4);
	--o-surface-1-light-hsl: var(--o-gray-0-hsl);
	--o-surface-2-light-hsl: var(--o-gray-2-hsl);
	--o-surface-3-light-hsl: var(--o-gray-3-hsl);
	--o-surface-4-light-hsl: var(--o-gray-4-hsl);
	--o-bsurface-1-light-hsl: var(--o-violet-1-hsl);
	--o-bsurface-2-light-hsl: var(--o-violet-2-hsl);
	--o-bsurface-3-light-hsl: var(--o-violet-3-hsl);
	--o-bsurface-4-light-hsl: var(--o-violet-4-hsl);
	--o-shadow-color-light: 220 3% 15%;
	--o-shadow-strength-light: 1%;
	--o-scrollbar-color-light: var(--o-gray-4);
	--o-nav-icon-light: var(--o-gray-7);
	--o-nav-icon-hover-light: var(--o-gray-9);
	--o-logo-ring-light: var(--o-violet-5);
	--o-logo-dash-light: var(--o-yellow-7);
	--o-logo-ring-light-hover: var(--o-violet-7);
	--o-logo-dash-light-hover: var(--o-yellow-9);

	/* dark */
	--o-brand-dark: var(--o-violet-4);
	--o-brand-dark-hsl: var(--o-violet-4-hsl);
	--o-brand-hover-dark: var(--o-violet-2);
	--o-accent-dark: var(--o-yellow-3);
	--o-accent-dark-hsl: var(--o-yellow-3-hsl);
	--o-accent-hover-dark: var(--o-yellow-1);
	--o-link-dark: var(--o-pink-3);
	--o-link-dark-hsl: var(--o-pink-3-hsl);
	--o-link-hover-dark: var(--o-pink-1);
	--o-link-visited-dark: var(--o-teal-3);
	--o-link-visited-dark-hsl: var(--o-teal-3-hsl);
	--o-link-visited-hover-dark: var(--o-teal-1);
	--o-text-1-dark: var(--o-gray-1);
	--o-text-2-dark: var(--o-gray-3);
	--o-text-3-dark: var(--o-gray-5);
	--o-text-1-dark-hsl: var(--o-gray-1-hsl);
	--o-text-2-dark-hsl: var(--o-gray-3-hsl);
	--o-text-3-dark-hsl: var(--o-gray-5-hsl);
	--o-surface-1-dark: var(--o-gray-9);
	--o-surface-2-dark: var(--o-gray-8);
	--o-surface-3-dark: var(--o-gray-7);
	--o-surface-4-dark: var(--o-gray-6);
	--o-bsurface-1-dark: var(--o-violet-9);
	--o-bsurface-2-dark: var(--o-violet-8);
	--o-bsurface-3-dark: var(--o-violet-7);
	--o-bsurface-4-dark: var(--o-violet-6);
	--o-surface-1-dark-hsl: var(--o-gray-9-hsl);
	--o-surface-2-dark-hsl: var(--o-gray-8-hsl);
	--o-surface-3-dark-hsl: var(--o-gray-7-hsl);
	--o-surface-4-dark-hsl: var(--o-gray-6-hsl);
	--o-bsurface-1-dark-hsl: var(--o-violet-9-hsl);
	--o-bsurface-2-dark-hsl: var(--o-violet-8-hsl);
	--o-bsurface-3-dark-hsl: var(--o-violet-7-hsl);
	--o-bsurface-4-dark-hsl: var(--o-violet-6-hsl);
	--o-shadow-color-dark: 220 40% 2%;
	--o-shadow-strength-dark: 10%;
	--o-scrollbar-color-dark: var(--o-user-canvas-7);
	--o-nav-icon-dark: var(--o-gray-5);
	--o-nav-icon-hover-dark: var(--o-gray-2);
	--o-logo-ring-dark: var(--o-violet-4);
	--o-logo-dash-dark: var(--o-yellow-3);
	--o-logo-ring-dark-hover: var(--o-violet-3);
	--o-logo-dash-dark-hover: var(--o-yellow-2);

	--o-brand-bg-gradient: linear-gradient(to bottom, var(--o-grape-3), var(--o-violet-3), var(--o-indigo-3), var(--o-cyan-3));
}

:root {
	color-scheme: light;
	/* set defaults */
	--o-brand: var(--o-brand-light);
	--o-brand-hsl: var(--o-brand-light-hsl);
	--o-brand-hover: var(--o-brand-hover-light);
	--o-accent: var(--o-accent-light);
	--o-accent-hsl: var(--o-accent-light-hsl);
	--o-accent-hover: var(--o-accent-hover-light);
	--o-link: var(--o-link-light);
	--o-link-hsl: var(--o-link-light-hsl);
	--o-link-hover: var(--o-link-hover-light);
	--o-link-visited: var(--o-link-visited-light);
	--o-link-visited-hsl: var(--o-link-visited-light-hsl);
	--o-link-visited-hover: var(--o-link-visited-hover-light);
	--o-text-1: var(--o-text-1-light);
	--o-text-2: var(--o-text-2-light);
	--o-text-3: var(--o-text-3-light);
	--o-surface-1: var(--o-surface-1-light);
	--o-surface-2: var(--o-surface-2-light);
	--o-surface-3: var(--o-surface-3-light);
	--o-surface-4: var(--o-surface-4-light);
	--o-bsurface-1: var(--o-bsurface-1-light);
	--o-bsurface-2: var(--o-bsurface-2-light);
	--o-bsurface-3: var(--o-bsurface-3-light);
	--o-bsurface-4: var(--o-bsurface-4-light);
	--o-text-1-hsl: var(--o-text-1-light-hsl);
	--o-text-2-hsl: var(--o-text-2-light-hsl);
	--o-surface-1-hsl: var(--o-surface-1-light-hsl);
	--o-surface-2-hsl: var(--o-surface-2-light-hsl);
	--o-surface-3-hsl: var(--o-surface-3-light-hsl);
	--o-surface-4-hsl: var(--o-surface-4-light-hsl);
	--o-bsurface-1-hsl: var(--o-bsurface-1-light-hsl);
	--o-bsurface-2-hsl: var(--o-bsurface-2-light-hsl);
	--o-bsurface-3-hsl: var(--o-bsurface-3-light-hsl);
	--o-bsurface-4-hsl: var(--o-bsurface-4-light-hsl);
	--o-shadow-color: var(--o-shadow-color-light);
	--o-shadow-strength: var(--o-shadow-strength-light);
	--o-scrollbar-color: var(--o-scrollbar-color-light);
	--o-nav-icon: var(--o-nav-icon-light);
	--o-nav-icon-hover: var(--o-nav-icon-hover-light);
	--o-logo-ring: var(--o-logo-ring-light);
	--o-logo-dash: var(--o-logo-dash-light);
	--o-logo-ring-hover: var(--o-logo-ring-light-hover);
	--o-logo-dash-hover: var(--o-logo-dash-light-hover);
	--o-bw: black;
}

.o-invert {
	color-scheme: dark;
	--o-brand: var(--o-brand-dark);
	--o-brand-hsl: var(--o-brand-dark-hsl);
	--o-brand-hover: var(--o-brand-hover-dark);
	--o-accent: var(--o-accent-dark);
	--o-accent-hsl: var(--o-accent-dark-hsl);
	--o-accent-hover: var(--o-accent-hover-dark);
	--o-link: var(--o-link-dark);
	--o-link-hsl: var(--o-link-dark-hsl);
	--o-link-hover: var(--o-link-hover-dark);
	--o-link-visited: var(--o-link-visited-dark);
	--o-link-visited-hsl: var(--o-link-visited-dark-hsl);
	--o-link-visited-hover: var(--o-link-visited-hover-dark);
	--o-text-1: var(--o-text-1-dark);
	--o-text-2: var(--o-text-2-dark);
	--o-text-3: var(--o-text-3-dark);
	--o-surface-1: var(--o-surface-1-dark);
	--o-surface-2: var(--o-surface-2-dark);
	--o-surface-3: var(--o-surface-3-dark);
	--o-surface-4: var(--o-surface-4-dark);
	--o-bsurface-1: var(--o-bsurface-1-dark);
	--o-bsurface-2: var(--o-bsurface-2-dark);
	--o-bsurface-3: var(--o-bsurface-3-dark);
	--o-bsurface-4: var(--o-bsurface-4-dark);
	--o-text-1-hsl: var(--o-text-1-dark-hsl);
	--o-text-2-hsl: var(--o-text-2-dark-hsl);
	--o-surface-1-hsl: var(--o-surface-1-dark-hsl);
	--o-surface-2-hsl: var(--o-surface-2-dark-hsl);
	--o-surface-3-hsl: var(--o-surface-3-dark-hsl);
	--o-surface-4-hsl: var(--o-surface-4-dark-hsl);
	--o-bsurface-1-hsl: var(--o-bsurface-1-dark-hsl);
	--o-bsurface-2-hsl: var(--o-bsurface-2-dark-hsl);
	--o-bsurface-3-hsl: var(--o-bsurface-3-dark-hsl);
	--o-bsurface-4-hsl: var(--o-bsurface-4-dark-hsl);
	--o-shadow-color: var(--o-shadow-color-dark);
	--o-shadow-strength: var(--o-shadow-strength-dark);
	--o-scrollbar-color: var(--o-scrollbar-color-dark);
	--o-nav-icon: var(--o-nav-icon-dark);
	--o-nav-icon-hover: var(--o-nav-icon-hover-dark);
	--o-logo-ring: var(--o-logo-ring-dark);
	--o-logo-dash: var(--o-logo-dash-dark);
	--o-logo-ring-hover: var(--o-logo-ring-dark-hover);
	--o-logo-dash-hover: var(--o-logo-dash-dark-hover);
	--o-bw: white;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--o-brand: var(--o-brand-dark);
		--o-brand-hsl: var(--o-brand-dark-hsl);
		--o-brand-hover: var(--o-brand-hover-dark);
		--o-accent: var(--o-accent-dark);
		--o-accent-hsl: var(--o-accent-dark-hsl);
		--o-accent-hover: var(--o-accent-hover-dark);
		--o-link: var(--o-link-dark);
		--o-link-hsl: var(--o-link-dark-hsl);
		--o-link-hover: var(--o-link-hover-dark);
		--o-link-visited: var(--o-link-visited-dark);
		--o-link-visited-hsl: var(--o-link-visited-dark-hsl);
		--o-link-visited-hover: var(--o-link-visited-hover-dark);
		--o-text-1: var(--o-text-1-dark);
		--o-text-2: var(--o-text-2-dark);
		--o-text-3: var(--o-text-3-dark);
		--o-surface-1: var(--o-surface-1-dark);
		--o-surface-2: var(--o-surface-2-dark);
		--o-surface-3: var(--o-surface-3-dark);
		--o-surface-4: var(--o-surface-4-dark);
		--o-bsurface-1: var(--o-bsurface-1-dark);
		--o-bsurface-2: var(--o-bsurface-2-dark);
		--o-bsurface-3: var(--o-bsurface-3-dark);
		--o-bsurface-4: var(--o-bsurface-4-dark);
		--o-text-1-hsl: var(--o-text-1-dark-hsl);
		--o-text-2-hsl: var(--o-text-2-dark-hsl);
		--o-surface-1-hsl: var(--o-surface-1-dark-hsl);
		--o-surface-2-hsl: var(--o-surface-2-dark-hsl);
		--o-surface-3-hsl: var(--o-surface-3-dark-hsl);
		--o-surface-4-hsl: var(--o-surface-4-dark-hsl);
		--o-bsurface-1-hsl: var(--o-bsurface-1-dark-hsl);
		--o-bsurface-2-hsl: var(--o-bsurface-2-dark-hsl);
		--o-bsurface-3-hsl: var(--o-bsurface-3-dark-hsl);
		--o-bsurface-4-hsl: var(--o-bsurface-4-dark-hsl);
		--o-shadow-color: var(--o-shadow-color-dark);
		--o-shadow-strength: var(--o-shadow-strength-dark);
		--o-scrollbar-color: var(--o-scrollbar-color-dark);
		--o-nav-icon: var(--o-nav-icon-dark);
		--o-nav-icon-hover: var(--o-nav-icon-hover-dark);
		--o-logo-ring: var(--o-logo-ring-dark);
		--o-logo-dash: var(--o-logo-dash-dark);
		--o-logo-ring-hover: var(--o-logo-ring-dark-hover);
		--o-logo-dash-hover: var(--o-logo-dash-dark-hover);
		--o-bw: white;
	}
}
.o-invert {
	color-scheme: light;
	/* set defaults */
	--o-brand: var(--o-brand-light);
	--o-brand-hsl: var(--o-brand-light-hsl);
	--o-brand-hover: var(--o-brand-hover-light);
	--o-accent: var(--o-accent-light);
	--o-accent-hsl: var(--o-accent-light-hsl);
	--o-accent-hover: var(--o-accent-hover-light);
	--o-link: var(--o-link-light);
	--o-link-hsl: var(--o-link-light-hsl);
	--o-link-hover: var(--o-link-hover-light);
	--o-link-visited: var(--o-link-visited-light);
	--o-link-visited-hsl: var(--o-link-visited-light-hsl);
	--o-link-visited-hover: var(--o-link-visited-hover-light);
	--o-text-1: var(--o-text-1-light);
	--o-text-2: var(--o-text-2-light);
	--o-text-3: var(--o-text-3-light);
	--o-surface-1: var(--o-surface-1-light);
	--o-surface-2: var(--o-surface-2-light);
	--o-surface-3: var(--o-surface-3-light);
	--o-surface-4: var(--o-surface-4-light);
	--o-bsurface-1: var(--o-bsurface-1-light);
	--o-bsurface-2: var(--o-bsurface-2-light);
	--o-bsurface-3: var(--o-bsurface-3-light);
	--o-bsurface-4: var(--o-bsurface-4-light);
	--o-text-1-hsl: var(--o-text-1-light-hsl);
	--o-text-2-hsl: var(--o-text-2-light-hsl);
	--o-surface-1-hsl: var(--o-surface-1-light-hsl);
	--o-surface-2-hsl: var(--o-surface-2-light-hsl);
	--o-surface-3-hsl: var(--o-surface-3-light-hsl);
	--o-surface-4-hsl: var(--o-surface-4-light-hsl);
	--o-bsurface-1-hsl: var(--o-bsurface-1-light-hsl);
	--o-bsurface-2-hsl: var(--o-bsurface-2-light-hsl);
	--o-bsurface-3-hsl: var(--o-bsurface-3-light-hsl);
	--o-bsurface-4-hsl: var(--o-bsurface-4-light-hsl);
	--o-shadow-color: var(--o-shadow-color-light);
	--o-shadow-strength: var(--o-shadow-strength-light);
	--o-scrollbar-color: var(--o-scrollbar-color-light);
	--o-nav-icon: var(--o-nav-icon-light);
	--o-nav-icon-hover: var(--o-nav-icon-hover-light);
	--o-logo-ring: var(--o-logo-ring-light);
	--o-logo-dash: var(--o-logo-dash-light);
	--o-logo-ring-hover: var(--o-logo-ring-light-hover);
	--o-logo-dash-hover: var(--o-logo-dash-light-hover);
	--o-bw: black;
}
[color-scheme=light],
[color-scheme=dark] .o-invert {
	color-scheme: light;
	--o-brand: var(--o-brand-light);
	--o-brand-hsl: var(--o-brand-light-hsl);
	--o-brand-hover: var(--o-brand-hover-light);
	--o-accent: var(--o-accent-light);
	--o-accent-hsl: var(--o-accent-light-hsl);
	--o-accent-hover: var(--o-accent-hover-light);
	--o-link: var(--o-link-light);
	--o-link-hsl: var(--o-link-light-hsl);
	--o-link-hover: var(--o-link-hover-light);
	--o-link-visited: var(--o-link-visited-light);
	--o-link-visited-hsl: var(--o-link-visited-light-hsl);
	--o-link-visited-hover: var(--o-link-visited-hover-light);
	--o-text-1: var(--o-text-1-light);
	--o-text-2: var(--o-text-2-light);
	--o-text-3: var(--o-text-3-light);
	--o-surface-1: var(--o-surface-1-light);
	--o-surface-2: var(--o-surface-2-light);
	--o-surface-3: var(--o-surface-3-light);
	--o-surface-4: var(--o-surface-4-light);
	--o-bsurface-1: var(--o-bsurface-1-light);
	--o-bsurface-2: var(--o-bsurface-2-light);
	--o-bsurface-3: var(--o-bsurface-3-light);
	--o-bsurface-4: var(--o-bsurface-4-light);
	--o-text-1-hsl: var(--o-text-1-light-hsl);
	--o-text-2-hsl: var(--o-text-2-light-hsl);
	--o-surface-1-hsl: var(--o-surface-1-light-hsl);
	--o-surface-2-hsl: var(--o-surface-2-light-hsl);
	--o-surface-3-hsl: var(--o-surface-3-light-hsl);
	--o-surface-4-hsl: var(--o-surface-4-light-hsl);
	--o-bsurface-1-hsl: var(--o-bsurface-1-light-hsl);
	--o-bsurface-2-hsl: var(--o-bsurface-2-light-hsl);
	--o-bsurface-3-hsl: var(--o-bsurface-3-light-hsl);
	--o-bsurface-4-hsl: var(--o-bsurface-4-light-hsl);
	--o-shadow-color: var(--o-shadow-color-light);
	--o-shadow-strength: var(--o-shadow-strength-light);
	--o-scrollbar-color: var(--o-scrollbar-color-light);
	--o-nav-icon: var(--o-nav-icon-light);
	--o-nav-icon-hover: var(--o-nav-icon-hover-light);
	--o-logo-ring: var(--o-logo-ring-light);
	--o-logo-dash: var(--o-logo-dash-light);
	--o-logo-ring-hover: var(--o-logo-ring-light-hover);
	--o-logo-dash-hover: var(--o-logo-dash-light-hover);
	--o-bw: black;
}

[color-scheme=dark],
[color-scheme=light] .o-invert {
	color-scheme: dark;
	--o-brand: var(--o-brand-dark);
	--o-brand-hsl: var(--o-brand-dark-hsl);
	--o-brand-hover: var(--o-brand-hover-dark);
	--o-accent: var(--o-accent-dark);
	--o-accent-hsl: var(--o-accent-dark-hsl);
	--o-accent-hover: var(--o-accent-hover-dark);
	--o-link: var(--o-link-dark);
	--o-link-hsl: var(--o-link-dark-hsl);
	--o-link-hover: var(--o-link-hover-dark);
	--o-link-visited: var(--o-link-visited-dark);
	--o-link-visited-hsl: var(--o-link-visited-dark-hsl);
	--o-link-visited-hover: var(--o-link-visited-hover-dark);
	--o-text-1: var(--o-text-1-dark);
	--o-text-2: var(--o-text-2-dark);
	--o-text-3: var(--o-text-3-dark);
	--o-surface-1: var(--o-surface-1-dark);
	--o-surface-2: var(--o-surface-2-dark);
	--o-surface-3: var(--o-surface-3-dark);
	--o-surface-4: var(--o-surface-4-dark);
	--o-bsurface-1: var(--o-bsurface-1-dark);
	--o-bsurface-2: var(--o-bsurface-2-dark);
	--o-bsurface-3: var(--o-bsurface-3-dark);
	--o-bsurface-4: var(--o-bsurface-4-dark);
	--o-text-1-hsl: var(--o-text-1-dark-hsl);
	--o-text-2-hsl: var(--o-text-2-dark-hsl);
	--o-surface-1-hsl: var(--o-surface-1-dark-hsl);
	--o-surface-2-hsl: var(--o-surface-2-dark-hsl);
	--o-surface-3-hsl: var(--o-surface-3-dark-hsl);
	--o-surface-4-hsl: var(--o-surface-4-dark-hsl);
	--o-bsurface-1-hsl: var(--o-bsurface-1-dark-hsl);
	--o-bsurface-2-hsl: var(--o-bsurface-2-dark-hsl);
	--o-bsurface-3-hsl: var(--o-bsurface-3-dark-hsl);
	--o-bsurface-4-hsl: var(--o-bsurface-4-dark-hsl);
	--o-shadow-color: var(--o-shadow-color-dark);
	--o-shadow-strength: var(--o-shadow-strength-dark);
	--o-scrollbar-color: var(--o-scrollbar-color-dark);
	--o-nav-icon: var(--o-nav-icon-dark);
	--o-nav-icon-hover: var(--o-nav-icon-hover-dark);
	--o-logo-ring: var(--o-logo-ring-dark);
	--o-logo-dash: var(--o-logo-dash-dark);
	--o-logo-ring-hover: var(--o-logo-ring-dark-hover);
	--o-logo-dash-hover: var(--o-logo-dash-dark-hover);
	--o-bw: white;
}

::-moz-selection {
	background-color: var(--o-brand);
	color: var(--o-surface-1);
	-webkit-text-fill-color: initial;
}

::selection {
	background-color: var(--o-brand);
	color: var(--o-surface-1);
	-webkit-text-fill-color: initial;
}body, h1, h2, h3, h4, h5, h6 {
	font-family: var(--o-font-sans);
}

.op-mono,
.op-mono pre {
	font-family: var(--o-font-mono);
}

.prop {
	color: var(--o-brand);
}.op-nav__ul {
	display: flex;
	flex-direction: row;
	gap: var(--o-size-6);
}

.op-nav__li {
	display: inline-block;
	list-style: none;
	padding: unset;
	margin: unset;
}

.op-nav__li--icon > .ct-fancy-icon > svg {
	fill: var(--o-nav-icon);
	stroke: none;
}

.op-nav__li--icon {
	line-height: 0;	
}

.op-nav__li--icon:hover > .ct-fancy-icon > svg {
	fill: var(--o-nav-icon-hover);
	stroke: none;
}	

.op-nav__link {
	color: var(--o-text-2);
}

.op-nav__link:hover {
	color: var(--o-link);
	text-underline-offset: 1px;
}
.op-hero.ct-section > .ct-section-inner-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--o-size-fluid-4);
	align-items: stretch;
}

@media (max-width: 1023px) {
	.op-hero.ct-section > .ct-section-inner-wrap {
	grid-template-columns: 1fr;
}
}

.op-hero-title {
	font-weight: var(--o-font-weight-9);
	max-inline-size: 12ch;
	background: var(--o-gradient-2) fixed;
	background-size: cover;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: var(--o-font-lineheight-00)
}
.op-hero-tagline {
	var(--o-font-size-fluid-0)
}

@media (prefers-reduced-motion: no-preference) {
	.op-hero-title {
		opacity: 0;
		animation: var(--o-animation-fade-in) forwards,
			var(--o-animation-slide-in-up) forwards;
		animation-timing-function: var(--o-ease-out-5);
		animation-delay: .5s;
	}
	.op-hero-tagline {
		opacity: 0;
		animation: var(--o-animation-fade-in) forwards;
		animation-delay: .5s;
	}
}

@media (prefers-color-scheme: dark) {
	.op-hero-title {
		background: var(--o-gradient-12) fixed;
		background-size: 28ch 7ch;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

[color-scheme=light] .op-hero-title {
	background: var(--o-gradient-2) fixed;
	background-size: 12ch 7ch;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

[color-scheme=dark] .op-hero-title {
	background: var(--o-gradient-12) fixed;
	background-size: 28ch 7ch;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.op-license-badge {
		opacity: 0;
		transform: scale(0);
		animation:
			grow 0.5s forwards,
			var(--o-animation-fade-in) forwards;
		animation-timing-function: var(--o-ease-squish-4);
		animation-delay: 1.5s;
	}
}

@keyframes grow {
	0% { transform: scale(0); }
	100% { transform: scale(1);}
}.op-blockquote {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--o-size-fluid-2);
	
	width: 100%;
	padding: var(--o-size-fluid-2);
	background-color: var(--o-surface-2);

	border: 1px solid var(--o-surface-3);
	border-radius: var(--o-radius-3);
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;

	border-left-color: var(--o-accent);
	border-left-width: var(--o-border-size-4);

	box-shadow: var(--o-shadow-4);
	
	cursor: help;
}

.op-blockquote svg {
	width: var(--o-size-7);
	fill: var(--o-accent);
}

.op-blockquote:hover {
	box-shadow: var(--o-shadow-6);
	border-left-color: var(--o-accent-hover);
}

@media (prefers-reduced-motion: no-preference) {
	.op-blockquote {
		opacity: 0;
		animation: var(--o-animation-fade-in) forwards;
		animation-delay: .5s;
	}
}.op-opt-in-text {
	--happyforms-color-part-description: var(--o-surface-4);
	order: 4;
}

.op-first-name-field {
	order: 1;
	width: 40%!important;
}

.op-email-field {
	order: 2;
	width: 40%!important;
}

.happyforms-form__part.happyforms-part.happyforms-part--submit {
	order: 3;
	width: 20%;
	justify-content: flex-end;
	margin-bottom: 15px;
	margin-top: -4px;
}

.checkmark {
	--happyforms-color-part-border: var(--o-surface-2);
	--happyforms-color-choice-checkmark-bg: transparent;
	--happyforms-color-choice-checkmark-bg-focus: var(--o-link);
	--happyforms-color-choice-checkmark-color: var(--o-surface-1);
}

@media (max-width: 820px) {
.op-first-name-field {
	order: 1;
	width: 50%!important;
}

.op-email-field {
	order: 2;
	width: 50%!important;
}
	.happyforms-form__part.happyforms-part.happyforms-part--submit {
	width: 100%;
	justify-content: flex-end;
		order:4;
}
	.op-opt-in-text {
	order: 3;
}
}

@media (max-width: 480px) {
.op-first-name-field {
	order: 1;
	width: 100%!important;
}

.op-email-field {
	order: 2;
	width: 100%!important;
}
	.happyforms-form__part.happyforms-part.happyforms-part--submit {
	width: 100%;
	justify-content: flex-end;
		order:4;
}
	.op-opt-in-text {
	order: 3;
}
}.op-grid-2-3.ct-section > .ct-section-inner-wrap {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap:var(--o-size-fluid-4);
	padding-inline:var(--o-size-fluid-5);
}

.op-grid-3-2.ct-section > .ct-section-inner-wrap  {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap:var(--o-size-fluid-4);
	padding-inline:var(--o-size-fluid-5);
}

@media (max-width: 768px) {
	.op-first {
		order: -1;
	}
	.op-md-grid-1.ct-section > .ct-section-inner-wrap {
		grid-template-columns: 1fr;
	}
}.op-btn {
	--_bg: var(--o-surface-1);
	--_text: var(--_accent,var(--o-link));
	--_highlight: var(--_highlight-dark);
	--_ink-shadow: var(--_ink-shadow-dark);

	transition: border-color .5s var(--o-ease-3) 3s,box-shadow 145ms var(--o-ease-4);
	--_accent: initial;
	--_size: initial;
	--_bg-light: #fff;
	--_bg-dark: var(--o-surface-3);
	--_border: var(--o-surface-3);
	--_highlight-size: 0;
	--_highlight-light: rgba(174,181,188,.25);
	--_highlight-dark: rgba(11,13,14,.25);
	--_highlight: var(--_highlight-light);
	--_ink-shadow-light: 0 1px 0 var(--o-gray-3);
	--_ink-shadow-dark: 0 1px 0 var(--o-surface-1);
	--_ink-shadow: var(--_ink-shadow-light);
	--_icon-size: 2ch;
	--_icon-color: var(--_accent,var(--o-link));
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	align-items: center;
	background: var(--_bg);
	border: var(--o-border-size-2) solid var(--_border);
	border-radius: var(--o-radius-2);
	box-shadow: var(--o-shadow-2),0 1px var(--o-surface-3),0 0 0 var(--_highlight-size) var(--_highlight);
	color: var(--_text);
	display: inline-flex;
	font-size: var(--_size);
	font-weight: var(--o-font-weight-7);
	gap: var(--o-size-2);
	justify-content: center;
	padding-block: 1.5ch;
	padding-inline: 3.5ch;
	text-align: center;
	text-shadow: var(--_ink-shadow);
	transition: border-color .5s var(--o-ease-3) 3s;
	user-select: none;
	cursor: pointer;
	touch-action: manipulation;
	text-decoration: none;
}
.op-btn:hover {
	--_border: currentColor;
	--_highlight-size: var(--o-size-2);
	transition-delay: 0s;
	transition-duration: .25s;
}

@media (prefers-color-scheme: dark) {
	.op-btn {
		--_highlight: var(--_highlight-dark);
		--_bg: var(--_bg-dark);
		--_ink-shadow: var(--_ink-shadow-dark);
	}
}
[data-icon="download"] {
	--icon-cloud: url("https://api.iconify.design/mdi/cloud-download.svg") center / contain no-repeat;
	-webkit-mask: var(--icon-cloud);
	--_icon-gradient: var(--o-gradient-21);
	background: var(--_icon-gradient);
	inline-size: 2ch;
	block-size: 2ch;
	filter: drop-shadow(var(--_ink-shadow));
}
[data-icon="cart"] {
	--icon-cart: url("https://api.iconify.design/mdi/cart.svg") center / contain no-repeat;
	-webkit-mask: var(--icon-cart);
	--_icon-gradient: var(--o-gradient-21);
	background: var(--_icon-gradient);
	inline-size: 2ch;
	block-size: 2ch;
	filter: drop-shadow(var(--_ink-shadow));
}


@media (prefers-color-scheme: dark) {
	[data-icon="download"] {
		--_icon-gradient: var(--o-gradient-30);
	}
}

[color-scheme=light] .op-btn {
	--_highlight: var(--_highlight-light);
	--_bg: var(--_bg-light);
	--_ink-shadow: var(--_ink-shadow-light);
}

[color-scheme=dark] .op-btn {
	--_highlight: var(--_highlight-dark);
	--_bg: var(--_bg-dark);
	--_ink-shadow: var(--_ink-shadow-dark);
}

[color-scheme=light] [data-icon="download"],
[color-scheme=light] [data-icon="cart"]{
	--_icon-gradient: var(--o-gradient-21);
}

[color-scheme=dark] [data-icon="download"],
[color-scheme=dark] [data-icon="cart"]{
	--_icon-gradient: var(--o-gradient-30);
}.op-list-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}

[data-icon="checked"] {
	--icon-checked: url('https://api.iconify.design/mdi/checkbox-marked-outline.svg') center / contain no-repeat;
	-webkit-mask: var(--icon-checked);
	--_icon-gradient: var(--o-gradient-6);
	background: var(--_icon-gradient);
	inline-size: 2ch;
	block-size: 2ch;
	filter: drop-shadow(var(--_ink-shadow));
}

[color-scheme=light] [data-icon="checked"] {
	--_icon-gradient: var(--o-gradient-6);
}

[color-scheme=dark] [data-icon="checked"] {
	--_icon-gradient: var(--o-gradient-4);
}

[data-icon="unchecked"] {
	--icon-unchecked: url('https://api.iconify.design/mdi/checkbox-blank-off-outline.svg') center / contain no-repeat;
	-webkit-mask: var(--icon-unchecked);
	--_icon-gradient: var(--o-gradient-10);
	background: var(--_icon-gradient);
	inline-size: 2ch;
	block-size: 2ch;
	filter: drop-shadow(var(--_ink-shadow));
}

[color-scheme=light] [data-icon="unchecked"] {
	--_icon-gradient: var(--o-gradient-10);
}

[color-scheme=dark] [data-icon="unchecked"] {
	--_icon-gradient: var(--o-gradient-20);
}pre {
	overflow-x: scroll;
}@keyframes jump {
  40%,50% { transform: translateY(100%) }
	0%, 90% { transform: translateY(0%) }
}.o-scroll-x-overflow {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}