Brackets UTF-8

Olá galera,voltei a estudar HTML/CSS e decidi baixar o bracktes, que eu costuma usar, pois acho o notepad++ MUITO RUIM, só que acusou o seguinte erro quando fui tentar abrir o arquivo .css : http://prntscr.com/b3xc6k

Diz que atualmente o bracktes da suporte apenas para códigos com o UTF-8,só que o css que estou tentando abrir tem o UFT-8,segue o código a baixo:

>

@charset "UTF-8";

body{

 background-color:white;
 color:blue;
}
 /* --------------------------------------------------------| DIV INTERFACE |--------------------------------------------------------------*/

div#interface{

 width:70%;
 margin:10px 10px 10px 10px;
 position:absolute;
 border:2px solid yellow;
 background-color:green;

}

div#interface hgroup{

 margin-top:90px;
}

div#interface h1{

 color:red;
 left:350px;
 position:relative;
}

p{

 color:green;
 text-indent:50px;
}

figure.teucu h1#sotroxa {

 left:-70px;

}

figure.teucu {

 border:18px solid white ;
 box-shadow:1px 1px 4px black; /*Define o sombreado das bordas*/
 position:relative;
}

figure.teucu img{

 width:100%;
 height:100%;
}

figure.teucu figcaption{

 position:absolute;
 top:0px;
 font-size:40px;
 color:white;
 background-color:rgba(10,0,0,.6);
 width:100%;
 height:100%;
 box-sizing: border-box; /*define a borda como limite*/
 opacity:0; /*define a opacidade como 0,deixando a caixa 100% trasnparente*/
 transition:opacity 1s; /*Define o tempo da transição,nesse caso da opacidade*/
 transition:color 2s; /*Define o tempo da transição,nesse caso da cor*/
}

figure.teucu figcaption h1{

 margin-left:165px;

}

figure.teucu:hover figcaption{ /hover define os atributos do item qnd O CURSOR DO MOUSE FOR PASSADO POR CIMA DESTE ITEM/

 opacity:1;
 color:red;
}

 /* --------------------------------------| ESTILIZAÇÃO DO MENU | -------------------------------------- */

nav#menu ol{
list-style:none; / Oculta os numeradores da lista//ou as bolinhas caso estaja usando uma lista 'ul'/
text-transform:uppercase; / Define deixa tds as letras maiuscolas/

 top:-6px;
 left:115px;
 position:absolute;
 background-color:red;
 height:3%;
 border-radius:5px;
 box-sizing: border-box;
}

nav#menu li{
display:inline; /deixa os itens lado a lado/

 background-color:#00fcb4;
 padding:10px;
 margin:10px;
 top:23px;
 left:-23px;
 transition:1s;
 position:relative;
 border:1px solid;
 border-radius:5px;
}

nav#menu li:hover{

 background-color:#000033;
}

nav#menu h1{

 display:none;
}

nav#menu a{
text-decoration:none; / Apaga os sublinhados /
}

Grato desde já!