:root {
  color-scheme: light;
  --tinta: #283c35; --tinta-fraca: #686d62;
  --fundo: #f4f1e8; --papel: #fffef9; --borda: #dcded2;
  --acento: #335648; --acento-claro: #e8eee5;
  --terracota: #a44f32; --erro: #a13932; --erro-fundo: #fcf1ec;
  --aviso: #826019; --aviso-fundo: #faf3df; --ok: #335f46; --ok-fundo: #eaf1e7;
  --sombra: 0 12px 35px #283c3506; --raio: 6px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--tinta); background: var(--fundo); font: 15px/1.6 'Segoe UI', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; }
a { color: inherit; }
button, a, input, select, summary, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; }
.pular { position: fixed; top: -100px; left: 16px; padding: 12px 20px; background: var(--papel); z-index: 10; }
.pular:focus { top: 12px; }
.topo { max-width: 1384px; margin: auto; padding: 23px 42px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--borda); }
.marca { display: flex; gap: 12px; align-items: center; text-decoration: none; font: 27px/1.1 Georgia, serif; letter-spacing: -.9px; }
.simbolo-marca { width: 43px; height: 48px; border: 1px solid #9ea99a; border-radius: 50% 50% 4px 4px; display: grid; place-items: center; font: 37px 'Segoe UI Symbol', serif; }
.marca-italico { font-style: italic; }
.marca small { display: block; margin-top: 8px; font: 9px/1.2 'Segoe UI', sans-serif; letter-spacing: 2.4px; }
.topo nav { display: flex; gap: 30px; font-size: 13px; }
.topo nav a { text-decoration: none; padding: 10px 0; border-bottom: 1px solid transparent; }
.topo nav a:hover { border-color: var(--acento); }
main { max-width: 1384px; padding: 0 42px 44px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.abertura { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 60px; padding: 47px 0 32px; }
.sobretitulo { font: 600 10px/1.5 'Segoe UI', sans-serif; letter-spacing: 2px; margin: 0 0 15px; }
.ponto-verde { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #537557; margin-right: 8px; vertical-align: 1px; }
.abertura h1 { font: 400 clamp(42px, 4.6vw, 66px)/1.06 Georgia, 'Times New Roman', serif; letter-spacing: -2.8px; margin: 17px 0 20px; }
.abertura h1 em { color: var(--terracota); font-weight: 400; }
.abertura-texto > p:not(.sobretitulo) { font-size: 14px; color: var(--tinta-fraca); margin: 0 0 24px; line-height: 1.8; }
.link-compor { display: inline-flex; gap: 32px; align-items: center; font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--acento); padding-bottom: 7px; }
.link-compor span { font-size: 20px; }
.estudo-visual { transform: rotate(-3deg); padding: 25px 25px 18px; border: 1px solid #d3d8c9; background: #eeefe3; box-shadow: 8px 10px 0 #e7e7dc; position: relative; }
.estudo-topo { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 2px; padding-bottom: 12px; border-bottom: 1px solid #ccd2c2; }
.estudo-visual svg { display: block; width: 100%; margin: 9px 0; }
.estudo-base { display: flex; justify-content: space-between; align-items: center; font: italic 18px/1.4 Georgia, serif; padding: 2px 6px; }
.selo-estudo { width: 58px; height: 58px; border: 1px solid #a2af96; border-radius: 50%; text-align: center; font: 11px/1.25 Georgia, serif; padding: 12px 0; }
.selo-estudo i { font-style: normal; }
.preparacao { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--borda); background: var(--papel); border-radius: var(--raio); }
.escolher-estudo { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: center; padding: 23px 27px 19px; }
.escolher-estudo .sobretitulo { color: var(--terracota); font-size: 9px; margin-bottom: 5px; }
.escolher-estudo h2 { font: 400 23px/1.2 Georgia, serif; margin: 0; }
.seletor-exemplo { display: flex; flex-direction: column; min-width: 0; gap: 7px; font-size: 11px; font-weight: 600; color: var(--tinta-fraca); }
.status { grid-column: 1 / -1; font-size: 11px; color: var(--tinta-fraca); margin: 13px 0 0; }
.status:empty { display: none; }
.status.erro { color: var(--erro); }.status.ok { color: var(--ok); }
.foto-em-breve { border-left: 1px solid var(--borda); display: flex; gap: 18px; align-items: center; padding: 22px 27px; background: #eeefe650; }
.foto-em-breve svg { flex: 0 0 32px; color: #7b856e; }
.etiqueta { display: inline-block; font: 600 9px/1.6 'Segoe UI', sans-serif; letter-spacing: 1.3px; color: #775b30; border: 1px solid #e0d6bb; background: #f6f0df; border-radius: 3px; padding: 3px 8px; white-space: nowrap; }
.foto-em-breve h3 { font: 400 21px/1.3 Georgia, serif; margin: 7px 0 5px; }
.foto-em-breve p { font-size: 12px; line-height: 1.6; color: var(--tinta-fraca); margin: 0; max-width: 280px; }
.cartao { background: var(--papel); border: 1px solid var(--borda); padding: 28px; min-width: 0; border-radius: var(--raio); box-shadow: var(--sombra); }
.cabecalho-secao { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }
.cabecalho-secao .sobretitulo { color: var(--terracota); margin: 0 0 5px; font-size: 9px; }
.cartao h2 { font: 400 31px/1.25 Georgia, serif; letter-spacing: -.6px; margin: 0; }
.etiqueta.discreta { color: var(--tinta-fraca); background: transparent; border-color: var(--borda); }
.ajuda { font-size: 12px; color: var(--tinta-fraca); margin: 0 0 23px; max-width: 920px; }
.controles { display: flex; flex-wrap: wrap; gap: 15px; padding: 20px; background: #f2f3eb; border: 1px solid #e3e5da; border-radius: 4px; margin: 0 0 23px; }
.controles label, .campos label { display: flex; flex-direction: column; gap: 7px; color: var(--tinta-fraca); font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; min-width: 0; }
.controles label { flex: 1 1 155px; }.controles label:has(#sel-especie) { flex: 1.6 1 235px; }
select, input[type=text] { width: 100%; min-width: 0; font: 400 13px/1.4 'Segoe UI', sans-serif; color: var(--tinta); background: var(--papel); border: 1px solid #d5dacf; border-radius: 4px; padding: 11px 12px; min-height: 43px; text-transform: none; letter-spacing: 0; }
select { padding-right: 26px; cursor: pointer; }
select:hover, input[type=text]:hover { border-color: #93a28e; }
select:focus, input:focus { outline: 2px solid #79967c; outline-offset: 2px; }
.campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; margin-bottom: 24px; }
.campos input { font-family: Consolas, 'Courier New', monospace; font-size: 13px; padding: 13px; }
.titulo-pauta { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 10px; letter-spacing: 1.4px; border: 1px solid var(--borda); border-bottom: 0; border-radius: 5px 5px 0 0; background: #f8f7ef; }
.titulo-pauta > span:last-child { letter-spacing: 0; color: var(--tinta-fraca); font-size: 11px; }
.rolagem-pauta { min-width: 0; overflow-x: auto; overflow-y: hidden; background: #fffef9; border: 1px solid var(--borda); border-radius: 0 0 4px 4px; padding: 7px 0 12px; scrollbar-color: #aab5a0 #f0f1e8; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#pauta { display: block; touch-action: pan-x; user-select: none; }
.botao { font-size: 12px; padding: 9px 12px; min-height: 40px; border: 1px solid var(--borda); border-radius: 4px; background: var(--papel); color: var(--tinta); cursor: pointer; transition: background .15s, border-color .15s; }
.botao:hover:not(:disabled) { background: var(--acento-claro); border-color: #8d9f88; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.ativo, .botao.primario { color: #fff; background: var(--acento); border-color: var(--acento); }
.botao.ativo:hover { background: #263f35; }
.botao.icone { min-width: 40px; padding: 7px 10px; font-size: 16px; }
.ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 0 0; }
.ferramentas .grupo { display: flex; flex-wrap: wrap; gap: 5px; }
.nota-atual { font-size: 12px; font-weight: 600; padding: 10px 13px; min-width: 110px; text-align: center; border-radius: 4px; background: var(--acento); color: white; }
#btn-limpar { color: var(--terracota); }
#ajuda-cambiata, #ajuda-cadencia { margin-top: 15px; padding: 12px 15px; background: #f4f5ec; border-left: 2px solid #9fac8c; }
.aviso-ritmo { padding: 10px 14px; border-radius: 4px; background: var(--aviso-fundo); color: var(--aviso); font-size: 12px; }
.veredito { display: flex; gap: 18px; align-items: center; padding: 22px; border: 1px solid currentColor; border-radius: 5px; margin-bottom: 20px; }
.veredito h3 { font: 400 25px/1.3 Georgia, serif; margin: 0; }
.veredito p { font-size: 12px; margin: 5px 0 0; }
.veredito .selo { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border: 1px solid currentColor; border-radius: 50%; font-size: 22px; }
.veredito.ok { color: var(--ok); background: var(--ok-fundo); border-color: #c9d9c4; }
.veredito.ressalva { color: var(--aviso); background: var(--aviso-fundo); border-color: #e7d9b3; }
.veredito.erro { color: var(--erro); background: var(--erro-fundo); border-color: #ecd2c7; }
.veredito.neutro { background: var(--acento-claro); color: var(--acento); }
.sec { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; margin: 25px 0 12px; color: var(--tinta-fraca); }
.contador { padding: 1px 7px; border-radius: 4px; background: var(--acento-claro); color: var(--acento); font-size: 10px; }
.lista-oc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.ocorrencia { padding: 16px; border: 1px solid var(--borda); border-left-width: 3px; border-radius: 4px; cursor: pointer; transition: background .15s; }
.ocorrencia:hover { background: #f6f4ed; }.ocorrencia:focus-visible { outline: 2px solid var(--terracota); }
.ocorrencia.erro { border-left-color: var(--erro); }.ocorrencia.aviso { border-left-color: #b58a3e; }
.linha-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px; }
.ocorrencia .titulo { font-size: 13px; font-weight: 600; }
.ocorrencia .pos { font-size: 10px; white-space: nowrap; color: var(--terracota); background: #f6eee5; border-radius: 3px; padding: 2px 6px; }
.ocorrencia p { color: var(--tinta-fraca); font-size: 12px; margin: 9px 0; }
.ocorrencia .regra { color: var(--tinta-fraca); font-size: 10px; }
.parabens { color: var(--ok); font-size: 13px; }
.caixa.erro { padding: 15px; background: var(--erro-fundo); color: var(--erro); }
.legenda { padding: 22px 28px; background: transparent; box-shadow: none; }
.legenda summary { cursor: pointer; font: 22px/1.4 Georgia, serif; }
.legenda summary span { font: 12px 'Segoe UI', sans-serif; color: var(--tinta-fraca); margin-left: 16px; }
.legenda ul { padding-left: 20px; font-size: 13px; color: var(--tinta-fraca); }
.legenda li { margin: 9px 0; }.legenda strong { color: var(--tinta); }
.rodape-legenda { font-size: 12px; color: var(--tinta-fraca); }
.rodape { max-width: 1300px; margin: 0 auto; padding: 25px 0 35px; border-top: 1px solid var(--borda); display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.rodape > span { font: 21px Georgia, serif; }.rodape p, .rodape a { font-size: 11px; color: var(--tinta-fraca); }
@media (min-width: 1600px) { .abertura { padding-top: 60px; padding-bottom: 44px; } }
@media (max-width: 1000px) {
  .topo { padding: 20px 26px; } main { padding: 0 26px 30px; }
  .abertura { gap: 30px; }.abertura h1 { font-size: 50px; }
  .escolher-estudo { grid-template-columns: minmax(0, 1fr); gap: 13px; }.status { margin-top: 0; }
  .rodape { margin: 0 26px; }
}
@media (max-width: 700px) {
  .topo { padding: 18px 20px; gap: 16px; }.marca { font-size: 23px; }.marca small { font-size: 8px; letter-spacing: 1.4px; }.simbolo-marca { width: 35px; height: 43px; }
  .topo nav { gap: 18px; }.topo nav a { font-size: 12px; }.topo nav a:last-child { display: none; }
  main { padding: 0 16px 25px; gap: 22px; }.abertura { grid-template-columns: minmax(0, 1fr); padding: 32px 5px 12px; gap: 32px; }.abertura h1 { font-size: 53px; }.abertura-texto > p:not(.sobretitulo) { font-size: 13px; }
  .estudo-visual { display: none; }.preparacao { grid-template-columns: minmax(0, 1fr); }.escolher-estudo { padding: 21px; }.foto-em-breve { border-left: 0; border-top: 1px solid var(--borda); padding: 18px 21px; }.foto-em-breve h3 { font-size: 20px; }.foto-em-breve p { max-width: none; }
  .cartao { padding: 20px 16px; }.cartao h2 { font-size: 28px; }.cabecalho-secao { flex-wrap: wrap; gap: 12px; }.cabecalho-secao > .etiqueta { font-size: 8px; }
  .controles { padding: 13px; gap: 13px; }.controles label { flex-basis: 135px; }.controles label:has(#sel-especie) { flex-basis: 100%; }.campos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  select, input[type=text] { font-size: 16px; }.titulo-pauta > span:last-child { display: none; }
  .botao { min-height: 44px; }.ferramentas { gap: 8px; }.nota-atual { min-height: 44px; }.lista-oc { grid-template-columns: minmax(0, 1fr); }.veredito { padding: 16px; gap: 12px; }.veredito h3 { font-size: 22px; }
  .legenda summary span { display: block; margin: 7px 0 0; }.rodape { flex-wrap: wrap; margin: 0 20px; gap: 10px; }.rodape p { margin: 0; }.rodape a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Notação musical */
.linha-pauta { stroke: var(--tinta); stroke-width: .9; opacity: .55; }
.barra { stroke: var(--tinta); stroke-width: 1.1; opacity: .45; }
.barra.final { stroke-width: 2.6; opacity: .7; }
.num-compasso { fill: var(--tinta-fraca); font-size: 11px; font-family: inherit; }
.rotulo-voz { fill: var(--tinta-fraca); font-size: 10.5px; font-weight: 700; font-family: inherit; }
.rotulo-clave { fill: var(--tinta-fraca); font-size: 9px; font-family: inherit; opacity: .65; }
.clave { fill: var(--tinta); font-size: 46px; font-family: "Segoe UI Symbol", "Noto Music", serif; }
.formula {
  fill: var(--tinta); font-size: 23px; font-weight: 700;
  text-anchor: middle; dominant-baseline: central;
  font-family: Georgia, "Times New Roman", serif;
}

.cabeca { stroke: var(--tinta); stroke-width: 1.6; }
.cabeca.vazada { fill: none; }
.cabeca.cheia { fill: var(--tinta); }
.haste { stroke: var(--tinta); stroke-width: 1.5; }
.bandeirola { fill: var(--tinta); stroke: none; }
.ponto { fill: var(--tinta); }
.acidente { fill: var(--tinta); font-size: 15px; text-anchor: middle; font-family: "Segoe UI Symbol", serif; }
.ligadura { fill: none; stroke: var(--tinta); stroke-width: 1.4; opacity: .75; }

.nota { cursor: pointer; }
.nota:hover .cabeca { stroke: var(--acento); }
.nota.sel .cabeca { stroke: var(--acento); stroke-width: 2.6; }
.nota.sel .cabeca.cheia { fill: var(--acento); }
.nota.sel .haste, .nota.sel .bandeirola { stroke: var(--acento); fill: var(--acento); }
.nota.prob-erro .cabeca { stroke: var(--erro); }
.nota.prob-erro .cabeca.cheia { fill: var(--erro); }
.nota.prob-aviso .cabeca { stroke: var(--aviso); }
.nota.prob-aviso .cabeca.cheia { fill: var(--aviso); }

.intervalo {
  font-size: 13px; font-weight: 700; text-anchor: middle;
  font-family: inherit; fill: var(--tinta-fraca);
}
.intervalo.perfeita { fill: var(--acento); }
.intervalo.imperfeita { fill: var(--tinta-fraca); }
.intervalo.dissonancia { fill: var(--aviso); }
.intervalo.erro { fill: var(--erro); }
.figura { font-size: 9.5px; text-anchor: middle; fill: var(--tinta-fraca); font-family: inherit; }
.marca.erro { fill: var(--erro); }
.marca.aviso { fill: var(--aviso); }