.loader-container{background-color:#000;height:100vh;left:0;position:fixed;top:0;width:100%;z-index:9999}.loader-container .loader{--R:30px;--g1:#514b82 96%,#0000;--g2:#eee 96%,#0000;animation:l30 2s linear infinite;aspect-ratio:1;border-radius:50%;display:grid;mask:linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0);width:calc(var(--R)*2)}.loader-container .loader:after,.loader-container .loader:before{background:radial-gradient(farthest-side,var(--g1)) calc(var(--R) + var(--R)*.866 - var(--R)) calc(var(--R) - var(--R)*.5 - var(--R)),radial-gradient(farthest-side,var(--g1)) calc(var(--R) + var(--R)*.866 - var(--R)) calc(var(--R) - var(--R)*.5 - var(--R)),radial-gradient(farthest-side,var(--g2)) calc(var(--R) + var(--R)*.5 - var(--R)) calc(var(--R) - var(--R)*.866 - var(--R)),radial-gradient(farthest-side,var(--g1)) 0 calc(var(--R)*-1),radial-gradient(farthest-side,var(--g2)) calc(var(--R) - var(--R)*.5 - var(--R)) calc(var(--R) - var(--R)*.866 - var(--R)),radial-gradient(farthest-side,var(--g1)) calc(var(--R) - var(--R)*.866 - var(--R)) calc(var(--R) - var(--R)*.5 - var(--R)),radial-gradient(farthest-side,var(--g2)) calc(var(--R)*-1) 0,radial-gradient(farthest-side,var(--g1)) calc(var(--R) - var(--R)*.866 - var(--R)) calc(var(--R) + var(--R)*.5 - var(--R));background-repeat:no-repeat;background-size:calc(var(--R)*2) calc(var(--R)*2);content:"";grid-area:1/1;width:50%}.loader-container .loader:after{transform:rotate(180deg);transform-origin:right}@keyframes l30{to{transform:rotate(-1turn)}}.color-switcher{align-items:start;display:none;position:fixed;right:0;top:59%;transform:translate(200px,-50%);transition-duration:.5s;transition-timing-function:cubic-bezier(.785,.135,.15,.86);visibility:hidden;z-index:118}.color-switcher.opened{transform:translateY(-50%)}.color-switcher:dir(rtl){flex-direction:row-reverse;transform:translate(200px,-50%)}.color-switcher:dir(rtl).opened{transform:translateY(-50%)}.color-switcher .color-switcher-btn{align-items:center;background-color:rgb(var(--white));border:none;display:flex;height:50px;justify-content:center;transition-duration:.3s;width:50px}.color-switcher .color-switcher-btn svg{font-size:1.5rem}.color-switcher .pallets{background-color:rgb(var(--white));padding:20px;width:200px}.color-switcher .pallets .color-btn{border:none;border-radius:4px;height:40px;width:40px}.color-switcher .pallets .ltr,.color-switcher .pallets .rtl{border-radius:4px}.color-switcher .pallets .ltr.active,.color-switcher .pallets .rtl.active{background-color:rgb(var(--primary))}.demos{display:none;height:100vh;max-width:450px;position:fixed;right:0;top:0;transform:translate(100%);transition-duration:.4s;transition-timing-function:cubic-bezier(.785,.135,.15,.86);visibility:hidden;z-index:117}.demos.opened{transform:translate(0);z-index:122}.demos.opened .demo-btn{z-index:122}.demos .demo-btn{background-color:#fff;border:none;left:0;padding:12px 24px;position:fixed;top:52%;transform:translate(-99%);transition-duration:.3s;z-index:101}.demos .demo-list{background-color:#fff;display:flex;flex-direction:column;gap:20px;height:100vh;overflow-y:auto;padding:20px}.demos .demo-list a{background-color:#ffdb6726;border-radius:12px;display:block;padding:12px;transition-duration:.2s}.demos .demo-list a:hover{background-color:#ffdb6780}.demos .demo-list a img{border-radius:12px;height:auto;max-width:100%}.demos .demo-list a p{margin-top:12px;text-align:center}