.nav__menu{inset-block:0;background-color:var(--container-color);z-index:10;width:100%;padding:60px 30px;transition:all .5s cubic-bezier(.77,.2,.05,1);position:fixed;left:-100%}.show-menu{left:0}.nav__link{-moz-column-gap:24px;border-bottom:1px solid var(--border-color);align-items:center;column-gap:24px;padding-block:12px;display:flex}.nav__icon,.nav__name{color:var(--title-color);font-size:var(--h3-font-size)}.nav__name{font-weight:var(--weight-500)}.active-nav .nav__icon,.active-nav .nav__name{color:var(--first-color)}.nav__item{position:relative}.nav__tooltip{background:var(--first-color);color:var(--text-white);font-size:var(--small-font-size);font-weight:var(--weight-500);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:20;border-radius:8px;padding:8px 16px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:50%;left:100%;transform:translateY(-50%)translate(10px);box-shadow:0 8px 24px #6c63ff4d}.nav__tooltip:before{content:"";border:6px solid #0000;border-right-color:var(--first-color);position:absolute;top:50%;right:100%;transform:translateY(-50%)}.nav__item:hover .nav__tooltip{opacity:1;visibility:visible;transform:translateY(-50%)translate(0)}.active-nav{border-bottom-color:#0000;border-left:3px solid var(--first-color);background-color:color-mix(in srgb, var(--first-color) 8%, transparent);border-radius:0 8px 8px 0;padding-left:16px}@media screen and (min-width:1024px){.active-nav{background-color:#0000;border-bottom:none;border-left:none;border-radius:50%;padding-left:0}.nav__tooltip{top:50%;left:60px;transform:translateY(-50%)translate(10px)}.nav__item:hover .nav__tooltip{transform:translateY(-50%)translate(0)}.nav__tooltip:before{border:6px solid #0000;border-right-color:var(--first-color);top:50%;right:100%;transform:translateY(-50%)}}.nav__toggle{background-color:var(--container-color);z-index:15;border-radius:5px 0 0 5px;width:50px;height:50px;padding:12px 10px;position:fixed;top:25px;right:0}.skeleton__toggle{background:linear-gradient(90deg, var(--container-color) 25%, var(--border-color) 50%, var(--container-color) 75%);background-size:200% 100%;border-radius:5px 0 0 5px;width:50px;height:50px;animation:1.5s infinite skeleton-loading;position:fixed;top:25px;right:0}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton__icon{background:linear-gradient(90deg, var(--container-color) 25%, var(--border-color) 50%, var(--container-color) 75%);background-size:200% 100%;border-radius:50%;width:24px;height:24px;animation:1.5s infinite skeleton-loading}.skeleton__text{background:linear-gradient(90deg, var(--container-color) 25%, var(--border-color) 50%, var(--container-color) 75%);background-size:200% 100%;border-radius:4px;flex:1;height:20px;animation:1.5s infinite skeleton-loading}.nav__link.skeleton{pointer-events:none}.nav__toggle span{background-color:var(--title-color);border-radius:2px;width:30px;height:2px;margin-bottom:10px;display:block}.animate-toggle span:first-child{transform:rotate(45deg)translate(11px,8px)}.animate-toggle span:nth-child(2){display:none}.animate-toggle span:last-child{transform:translate(1px,1px)rotate(-45deg)}@media screen and (min-width:1024px){.nav__menu{all:unset}.nav__toggle{display:none}.nav{inset-block:0;z-index:10;align-items:center;display:flex;position:fixed;left:30px}.nav__item{margin-block:20px}.nav__link{background-color:var(--container-color);border-bottom:none;border-radius:50%;width:50px;height:50px;padding:0;position:relative}.nav__icon{margin-inline:auto;font-size:20px}.nav__name{background-color:var(--first-color);height:100%;line-height:50px;font-size:var(--h3-font-size);color:var(--text-white);opacity:0;visibility:hidden;z-index:-1;border-radius:0 25px 25px 0;padding-inline:25px 30px;transition:all .3s;position:absolute;top:0;left:0}.nav__link:hover .nav__name{color:var(--text-white);opacity:1;visibility:visible;border-radius:0 30px 30px 0;left:27px}.nav__link:hover,.active-nav{background-color:var(--first-color)}.nav__link:hover .nav__icon,.active-nav .nav__icon,.active-nav .nav__name{color:var(--text-white)}}