.header.black .back{background:#27272a}.header.black .back span,.header.black .header__title .text-zinc-900{color:#fff}.header.black .header__title .text-zinc-500{color:#a5b4fc}.header .user{z-index:10;visibility:hidden}.header .user div,.header .user a,.header .user button,.header .user h2{opacity:0;visibility:hidden;transition:opacity .25s ease-in}.header .user:before{top:-.2rem;right:-.2rem;width:1.22rem;height:1.22rem;border-radius:50%;opacity:0;transform:scale(0);transform-origin:top right;transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .25s ease-in,border-radius .35s cubic-bezier(.2,.8,.2,1) .1s;z-index:-1;will-change:transform,opacity,border-radius}.header .user.active{visibility:visible}.header .user.active div,.header .user.active a,.header .user.active button,.header .user.active h2{opacity:1;visibility:visible}.header .user.active:before{width:calc(100% + .2rem);height:calc(100% + .2rem);transform:scale(1);border-radius:0;opacity:1}@media (prefers-reduced-motion: reduce){.header .user.active *{transition:none!important}}