@layer core,playground,project;@layer project{@media(prefers-color-scheme:dark){html{--meter-background: color-mix(in srgb, #212121, transparent 12%);--meter-font-weight: 300}}html[data-theme=dark]{--meter-background: color-mix(in srgb, #212121, transparent 12%);--meter-font-weight: 300}@media(prefers-color-scheme:light){html{--meter-background: color-mix(in srgb, #fff, transparent 12%);--meter-font-weight: 400}}html[data-theme=light]{--meter-background: color-mix(in srgb, #fff, transparent 12%);--meter-font-weight: 400}.performance-meter{left:var(--playground-ui-sidebar-width)!important;background:var(--meter-background)!important;color:var(--playground-body-color-text)!important;border:1px solid var(--playground-ui-color-border);font-weight:var(--meter-font-weight)!important}.ksi-body{line-height:120%}.ksi-body .hero-test{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;gap:120px;overflow:hidden}@media(min-width:1600px){.ksi-body .hero-test{padding:120px}}.ksi-body .hero-test .hero{position:relative;z-index:1;width:100%;max-width:1920px;overflow:hidden;aspect-ratio:3/4;background:#0a1236;color:#fff}@media(min-width:1025px){.ksi-body .hero-test .hero{aspect-ratio:1800/930}}.ksi-body .hero-test .hero:before,.ksi-body .hero-test .hero:after{content:"";position:absolute;inset:0;z-index:2;background:#00082e;opacity:.4}.ksi-body .hero-test .hero:after{background:linear-gradient(180deg,#00082e00 0% 66%,#00082e);opacity:.8}.ksi-body .hero-test .hero__images{position:absolute;inset:0 -21%;z-index:1}@media(min-width:1025px){.ksi-body .hero-test .hero__images{inset:0 -9%}}.ksi-body .hero-test .hero__image{position:absolute;inset:0;z-index:1;opacity:0}.ksi-body .hero-test .hero__image-frame,.ksi-body .hero-test .hero__image-frame-picture{position:absolute;inset:0 auto;z-index:1;overflow:hidden}.ksi-body .hero-test .hero__image-frame-picture div,.ksi-body .hero-test .hero__image-frame-picture picture,.ksi-body .hero-test .hero__image-frame-picture img{position:absolute;inset:0;z-index:1}.ksi-body .hero-test .hero__image-frame-picture img{max-width:none;width:100%;height:100%;object-fit:cover}.ksi-body .hero-test .hero__image-frame-cover{position:absolute;inset:0;z-index:2;transform:scaleX(0);background:#0041e5}.ksi-body .hero-test .hero__texts{position:absolute;inset:auto 50% 80px 30px;z-index:3;font-size:30px;line-height:130%}.ksi-body .hero-test .hero__text{display:flex;flex-flow:column nowrap;align-items:flex-start;gap:10px;position:absolute;inset:auto auto 0 0;z-index:1;opacity:0}.ksi-body .hero-test .hero__text h1{font-weight:400}.ksi-body .hero-test .hero__text button{padding:12px 18px;background:#0041e5;border-radius:20px;font-size:13px;line-height:1;cursor:pointer}.ksi-body .hero-test .hero__controls{position:absolute;inset:auto 0 0;z-index:4}.ksi-body .hero-test .hero__controls-timeline{display:flex;flex-flow:row nowrap;gap:18px;padding:20px 30px}.ksi-body .hero-test .hero__controls-timeline-button{flex:1 1 calc(33.333% - 18px);overflow:hidden;opacity:.4;font-size:14px;line-height:120%;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ksi-body .hero-test .hero__controls-timeline-button-line{position:relative;z-index:1;width:100%;height:2px;margin-bottom:17px;background:#ffffff80}.ksi-body .hero-test .hero__controls-timeline-button-line>div{position:absolute;inset:0;z-index:1;transform:scaleX(0);transform-origin:0% 50%;background:#0041e5}.ksi-body .hero-test .hero__controls-buttons{display:flex;gap:5px;position:absolute;inset:auto 30px 80px auto;z-index:1}.ksi-body .hero-test .hero__controls-buttons button{display:flex;align-items:center;justify-content:center;width:20px;aspect-ratio:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.1);border-radius:4px;font-size:11px;cursor:pointer}.ksi-body .hero-test .hero__controls-buttons button[data-action=stop] span{transform:translateY(-1px)}.ksi-body .hero-test .hero__controls-buttons button[data-action=play]{display:none}.ksi-body .hero-test .hero__controls-buttons button[data-action=play] span{transform:translateY(1px);font-size:65%}.ksi-body .hero-test [data-active-slide="1"] .hero__image[data-id="1"],.ksi-body .hero-test [data-active-slide="1"] .hero__text[data-id="1"],.ksi-body .hero-test [data-active-slide="1"] .hero__controls-timeline-button[data-id="1"],.ksi-body .hero-test [data-active-slide="2"] .hero__image[data-id="2"],.ksi-body .hero-test [data-active-slide="2"] .hero__text[data-id="2"],.ksi-body .hero-test [data-active-slide="2"] .hero__controls-timeline-button[data-id="2"],.ksi-body .hero-test [data-active-slide="3"] .hero__image[data-id="3"],.ksi-body .hero-test [data-active-slide="3"] .hero__text[data-id="3"],.ksi-body .hero-test [data-active-slide="3"] .hero__controls-timeline-button[data-id="3"],.ksi-body .hero-test [data-active-slide="4"] .hero__image[data-id="4"],.ksi-body .hero-test [data-active-slide="4"] .hero__text[data-id="4"],.ksi-body .hero-test [data-active-slide="4"] .hero__controls-timeline-button[data-id="4"],.ksi-body .hero-test [data-active-slide="5"] .hero__image[data-id="5"],.ksi-body .hero-test [data-active-slide="5"] .hero__text[data-id="5"],.ksi-body .hero-test [data-active-slide="5"] .hero__controls-timeline-button[data-id="5"]{opacity:1}.ksi-body .pictures-test{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;gap:120px;padding:120px;overflow:hidden}.ksi-body .pictures-test button{margin:10px 0 10px 100px;padding:10px;background:var(--playground-body-color-text);color:var(--playground-body-color-background);cursor:pointer}.ksi-body .pictures-test button:first-of-type{margin-top:30px}.ksi-body .pictures-test .picture-1{position:relative;z-index:1;width:1200px;aspect-ratio:16/9;overflow:hidden;clip-path:polygon(100px 15px,calc(100% - 100px) 15px,calc(100% - 100px) 100%,100px 100%)}.ksi-body .pictures-test .picture-1__inner{transform:skew(-15.6deg);width:100%;height:100%}.ksi-body .pictures-test .picture-1__frame{position:absolute;inset:0 auto;z-index:1;overflow:hidden}.ksi-body .pictures-test .picture-1__frame>div{width:100%;height:100%}.ksi-body .pictures-test .picture-1 picture,.ksi-body .pictures-test .picture-1 img{width:1200px;height:100%}.ksi-body .pictures-test .picture-1 img{transform:skew(15.6deg);object-fit:cover;object-position:0 0}.ksi-body .pictures-test .picture-2,.ksi-body .pictures-test .picture-3{position:relative;z-index:1;width:1200px;aspect-ratio:16/9;border:1px solid rgba(0,0,0,.0745098039);cursor:pointer}.ksi-body .pictures-test .picture-2__frame,.ksi-body .pictures-test .picture-3__frame{position:absolute;inset:0 auto;z-index:1;overflow:hidden}.ksi-body .pictures-test .picture-2__frame-cover,.ksi-body .pictures-test .picture-3__frame-cover{position:absolute;inset:0;z-index:1;background:#0041e5}.ksi-body .pictures-test .picture-2 picture,.ksi-body .pictures-test .picture-2 img,.ksi-body .pictures-test .picture-3 picture,.ksi-body .pictures-test .picture-3 img{transform-origin:0 0;width:1200px;height:100%}.ksi-body .pictures-test .picture-2 img,.ksi-body .pictures-test .picture-3 img{object-fit:cover;object-position:0 0}.ksi-body .pictures-test .picture-4{position:relative;z-index:1;aspect-ratio:16/9;width:1200px}.ksi-body .pictures-test .picture-4 picture{position:absolute;inset:0;z-index:1;width:100%;clip-path:polygon(20% 0%,35% 0%,19.4% 100%,4.4% 100%)}.ksi-body .pictures-test .picture-4 picture img{position:absolute}.ksi-body .pictures-test .pictures-preload{position:absolute;transform:scale(0);transform-origin:0 0}}