Defina nomes e regras CSS para até oito camadas e organize a ordem de declaração. Copie a declaração e os blocos @layer para a folha de estilos.
Funciona localmente no seu navegadorO planejador mantém uma única lista de camadas da cascata. Cada item tem um nome e as regras que pertencem a ele, e a exportação escreve uma só declaração — @layer reset, tokens, base, components, utilities; — seguida de um bloco por camada nessa ordem. A pilha à direita é essa mesma lista lida de cima para baixo: o primeiro cartão é declarado antes e o último vence quando duas camadas definem a mesma propriedade.
O plano começa com cinco camadas (reset, tokens, base, components e utilities), com uma regra de exemplo cada, e a quarta está selecionada. Não existe botão de executar: a pilha, a leitura e o painel de código acompanham cada tecla, e Copiar CSS coloca esse texto na área de transferência.
As camadas da cascata são resolvidas na ordem em que são declaradas, então a camada nomeada por último no enunciado é a que vence quando as duas definem a mesma propriedade. A pilha marca os dois extremos dessa ordem — Primeira declaração · menor prioridade no primeiro cartão e Última declaração · maior prioridade no último —, e as camadas do meio trazem apenas o selo @layer.
Mover antes e Mover depois deslocam a camada selecionada uma posição por vez, e a linha de declaração no topo é reescrita na hora: as camadas que você vê na pilha são exatamente os nomes do enunciado, nessa ordem.
O nome de uma camada vira um identificador CSS: o planejador passa tudo para minúsculas, troca o que não for a-z, 0-9, _ ou - por hífen, apara os hífens das pontas e coloca x- quando o nome começa com dígito. Digitar MAIN LAYER exporta main-layer, e um campo vazio exporta layer.
O banco de trabalho impõe dois limites: um plano aceita de uma a oito camadas, e o campo de nome para nos 36 caracteres. Tentar remover a última camada ou adicionar a nona não muda o plano, e o motivo aparece acima do painel.
Renomear uma camada com um nome já usado por outra é permitido, mas a exportação repete esse nome e o navegador funde os dois blocos em uma única camada: as regras dos dois cartões acabam juntas. O banco de trabalho avisa assim que isso acontece, para o duplicado aparecer antes da cópia.
O plano não sai da página: a lista, as regras e o enunciado são montados no navegador, Copiar CSS grava direto na área de transferência e não existe envio, conta nem botão de executar. Redefinir traz de volta as cinco camadas padrão a qualquer momento.