```css
/* =========================================================
   CIFRAFÁCIL — STYLE.CSS
   =========================================================
   
   RESPONSABILIDADE DESTE ARQUIVO:
   - Layout
   - Estrutura
   - Renderização das cifras
   - Tablaturas
   - Animações
   - Responsividade
   
   AS CORES FICAM NO tema.css
   ========================================================= */


/* =========================================================
   ANIMAÇÃO CROSS-DISSOLVE
   ========================================================= */

#cifra-conteudo {
    transition:
        opacity var(--wipe-duration) var(--wipe-timing),
        transform var(--wipe-duration) var(--wipe-timing);

    will-change: opacity, transform;
}


/* Estado de saída */
.cifra-wipe-out {
    opacity: 0 !important;
    transform: scale(0.98) !important;
}


/* Estado de entrada */
.cifra-wipe-in {
    animation:
        crossDissolve
        var(--wipe-duration)
        var(--wipe-timing)
        forwards;
}


@keyframes crossDissolve {

    0% {
        opacity: 0;
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================================
   RENDERIZAÇÃO DA CIFRA
   ========================================================= */


/* ---------------------------------------------------------
   Linha tradicional de acordes
   --------------------------------------------------------- */

.cifra-linha-acordes {
    white-space: pre;
    line-height: 1.2;
    font-family: monospace, monospace;

    color: var(--color-accent) !important;
    font-weight: bold !important;

    margin-top: 0.8rem !important;
}


/* ---------------------------------------------------------
   Tokens individuais de acordes
   --------------------------------------------------------- */

.cifra-acorde-token {
    color: var(--color-accent) !important;

    font-weight: bold !important;

    cursor: pointer;
}


/* Força a cor dos acordes em qualquer contexto */

span.cifra-acorde-token,
span.cifra-acorde,
.cifra-linha-acordes .cifra-acorde-token {

    color: var(--color-accent) !important;

    font-weight: bold !important;
}


/* ---------------------------------------------------------
   Nome/identificação de acorde
   --------------------------------------------------------- */

.cifra-acorde {
    color: var(--color-accent) !important;
    font-weight: bold !important;
}


/* =========================================================
   LINHA DINÂMICA
   ========================================================= */

.cifra-linha-dinamica {

    display: flex;

    flex-wrap: wrap;

    line-height: 1.1;

    margin-bottom: 0.6rem;

    font-family: monospace, monospace;
}


/* =========================================================
   PAR ACORDE + TEXTO
   =========================================================
   
   Estrutura:
   
       C
       Meu texto
   
   O bloco é mantido unido para preservar
   o alinhamento do acorde com a palavra.
   ========================================================= */

.cifra-par-token {

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    vertical-align: bottom;

    white-space: pre;
}


/* ---------------------------------------------------------
   Acorde dentro do par
   --------------------------------------------------------- */

.cifra-par-token .cifra-acorde-token {

    color: var(--color-accent) !important;

    font-weight: bold !important;

    min-height: 1.2em;

    cursor: pointer;
}


/* ---------------------------------------------------------
   Texto dentro do par
   --------------------------------------------------------- */

.cifra-par-token .cifra-texto-token {

    color: var(--color-text) !important;
}


/* =========================================================
   LETRA DA MÚSICA
   ========================================================= */

.cifra-letra {

    white-space: pre-wrap !important;

    word-break: break-word !important;

    line-height: 1.4;

    margin-bottom: 0.4rem !important;

    font-family: monospace, monospace;

    color: var(--color-text) !important;

    font-weight: normal !important;
}


/* =========================================================
   BLOCOS DE SEÇÃO
   =========================================================
   
   Exemplos:
   
   [Intro]
   [Refrão]
   [Verso]
   [Ponte]
   ========================================================= */

.bloco-secao {

    font-size: 1.05rem;

    font-weight: normal !important;

    color: var(--color-accent) !important;
}


/* =========================================================
   TABLATURAS
   ========================================================= */

.bloco-tablatura-wrapper {

    max-width: 650px;
}


/* Botão para mostrar/ocultar tablatura */

.btn-toggle-tab {

    font-size: 0.75rem;

    border: none !important;

    opacity: 0.85;
}


/* Conteúdo da tablatura */

.cifra-tablatura-conteudo {

    white-space: pre;

    line-height: 1.15;

    font-size: 0.95rem;

    font-family: monospace, monospace;

    color: var(--color-tablatura) !important;

    font-weight: normal !important;
}


/* Espaçamento entre blocos de tablatura */

.espacador-tablatura {

    height: 0.3rem;
}


/* =========================================================
   OCULTAR TABLATURAS
   =========================================================
   
   Quando a classe "ocultar-tabs-global" estiver ativa
   no container da cifra, as tablaturas são escondidas.
   ========================================================= */

.cifra-container.ocultar-tabs-global .bloco-tablatura-completo,
.cifra-container.ocultar-tabs-global .cifra-quebra-tab {

    display: none !important;
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */


/* Impede vazamento horizontal */

html,
body {

    max-width: 100vw !important;

    overflow-x: hidden !important;
}


/* Container principal da cifra */

main.container,
#cifra-conteudo,
#container-cifra {

    max-width: 100% !important;

    overflow-x: hidden !important;
}


/* ---------------------------------------------------------
   Linhas de acordes e letras em telas pequenas
   --------------------------------------------------------- */

.cifra-linha-acordes,
.cifra-letra {

    white-space: pre-wrap !important;

    word-break: break-word !important;

    font-family: monospace, monospace;

    line-height: 1.3 !important;
}


/* =========================================================
   CURSOR / INTERAÇÃO DOS ACORDES
   ========================================================= */

.cifra-acorde-token {

    cursor: pointer;
}


/* =========================================================
   AJUSTES GERAIS DE TEXTO
   ========================================================= */

.cifra-letra,
.cifra-texto-token {

    overflow-wrap: break-word;
}

/* =========================================================
   CIFRA — ESPAÇAMENTO E TIPOGRAFIA
   ========================================================= */

.cifra-linha-acordes {
    white-space: pre !important;
    font-family: monospace, monospace;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}

.cifra-letra {
    white-space: pre-wrap !important;
    font-family: monospace, monospace;
    line-height: 1.4;
    margin: 0 0 0.4rem 0 !important;
    padding: 0 !important;
}

.cifra-tablatura-conteudo {
    white-space: pre;
    line-height: 1.15;
    font-family: monospace, monospace;
}

/* =========================================================
   FIM DO STYLE.CSS
   ========================================================= */
```