:root{
  --notte:#141312;
  --carta:#f3ead3;
  --carta-2:#ece0c2;
  --inchiostro:#17150f;
  --legno:#e2c894;
  --legno-scuro:#c8a86a;
  --blu:#1f6fd0;
  --rosso:#b3352a;
  --grigio:#a49b88;
  --linea:#2c2922;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--notte);color:var(--carta);
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.testa{max-width:1080px;margin:0 auto;padding:40px 24px 0}
.riga{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--linea);padding-bottom:10px}
.marchio{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-size:15px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--carta);
  text-decoration:none}
.marchio b{color:var(--rosso);font-weight:600}
.indietro{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grigio);text-decoration:none}
.indietro:hover{color:var(--carta)}
h1{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-weight:400;
  font-size:clamp(38px,6vw,72px);line-height:1;margin:26px 0 10px}
.sottotitolo{font-family:"Iowan Old Style",Palatino,Georgia,serif;
  font-style:italic;color:var(--grigio);font-size:clamp(16px,2.2vw,21px);
  margin:0 0 18px;max-width:720px}
.intro{color:#cfc6b2;font-size:15px;line-height:1.65;max-width:760px;
  margin:0 0 6px}
main{max-width:1080px;margin:0 auto;padding:8px 24px 40px}
/* ---- schede del repertorio ---- */
.griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;margin:26px 0 8px}
.scheda{border:1px solid var(--linea);background:#191816;padding:20px 22px;
  min-width:0;display:flex;flex-direction:column;gap:8px;
  text-decoration:none;transition:border-color .15s,transform .15s}
.scheda:hover{border-color:#5a503c;transform:translateY(-2px)}
.scheda .num{font-family:"Iowan Old Style",Palatino,Georgia,serif;
  font-size:13px;letter-spacing:.2em;color:var(--grigio)}
.scheda h2{font-family:"Iowan Old Style",Palatino,Georgia,serif;
  font-weight:400;font-size:25px;margin:0;color:var(--carta)}
.scheda p{margin:0;color:#b8ae99;font-size:14px;line-height:1.55}
.scheda .stato{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grigio);margin-top:auto;padding-top:8px}
.scheda .stato.pronta{color:#d8b45a}
.scheda[aria-disabled="true"]{cursor:default}
.scheda[aria-disabled="true"]:hover{transform:none;border-color:var(--linea)}
/* ---- nota e fonti ---- */
.nota{border-top:1px solid var(--linea);margin:34px 0 0;padding:18px 0 0;
  color:var(--grigio);font-size:13px;line-height:1.65;max-width:860px}
.nota b{color:#cfc6b2;font-weight:600}
footer{max-width:1080px;margin:0 auto;padding:26px 24px 70px;
  border-top:1px solid var(--linea);color:#7d7564;font-size:12px;line-height:1.7}
footer h3{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grigio);margin:0 0 8px;font-weight:500}
footer a{color:#b8ae99}
/* ---- piastra della mano (Malossi) ---- */
.corpo-foglio{max-width:1080px;margin:0 auto;padding:8px 24px 40px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:34px;align-items:start}
.piastra{background:var(--carta);border:1px solid #d8c9a4;padding:18px 18px 12px;
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.piastra svg{display:block;width:100%;height:auto}
.piastra .didascalia{display:flex;justify-content:space-between;gap:12px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7a6f57;margin-top:8px}
.legenda{display:flex;gap:22px;margin:0 0 18px;font-size:12px;
  color:var(--grigio);flex-wrap:wrap}
.legenda span{display:flex;align-items:center;gap:8px}
.legenda i{width:14px;height:14px;border-radius:50%;display:inline-block}
.legenda .tocca i{background:#17150f}
.legenda .pizzica i{background:var(--blu)}
.dettaglio{border:1px solid var(--linea);background:#191816;padding:18px 20px;
  min-height:104px}
.dettaglio .grande{font-family:"Iowan Old Style",Palatino,Georgia,serif;
  font-size:52px;line-height:1;color:var(--carta)}
.dettaglio .gesto{font-size:13px;color:var(--grigio);margin-top:8px;
  line-height:1.6}
.dettaglio .gesto b{color:var(--carta);font-weight:600}
.dettaglio .vuoto{color:#7d7564;font-size:13px}
.blocco{margin:22px 0 0}
.blocco h2{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grigio);font-weight:500;margin:0 0 10px}
.prova{display:flex;gap:8px}
.prova input{flex:1;min-width:0;background:#0f0e0d;border:1px solid var(--linea);
  color:var(--carta);font:inherit;font-size:16px;padding:10px 12px;
  letter-spacing:.12em;text-transform:uppercase}
.prova input:focus{outline:1px solid #5a503c}
.prova button{background:transparent;border:1px solid #5a503c;color:var(--carta);
  font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:0 16px;cursor:pointer}
.prova button:hover{border-color:var(--carta)}
.sequenza{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.passo{border:1px solid var(--linea);padding:7px 9px 6px;font-family:
  "Iowan Old Style",Palatino,Georgia,serif;font-size:22px;line-height:1;
  cursor:pointer;color:var(--carta);background:#1c1a17}
.passo.pizzica{color:#8fc0ff;border-color:#24476f}
.passo.attivo{outline:2px solid var(--carta);outline-offset:2px}
.frase{color:#b8ae99;font-size:13px;line-height:1.6;margin:10px 0 0}
.frase b{color:var(--carta);font-weight:600}
/* ---- tabella della mappa ---- */
.tab-wrap{overflow-x:auto;margin:14px 0 0}
table{border-collapse:collapse;width:100%;font-size:13px;color:#b8ae99}
th,td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--linea)}
th{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grigio);font-weight:500}
td b{color:var(--carta);font-weight:600}
td.p{color:#8fc0ff}
@media(max-width:860px){
  .griglia{grid-template-columns:1fr}
  .corpo-foglio{grid-template-columns:1fr;gap:22px}
  .testa{padding:26px 16px 0}
  main,.corpo-foglio,footer{padding-left:16px;padding-right:16px}
}

/* ---- i punti della mano ---- */
#punti .punto{cursor:pointer;outline:none}
#punti .punto circle{fill:#f7efdd;stroke:#17150f;stroke-width:2.2;
  transition:stroke-width .12s}
#punti .punto text{fill:#17150f;pointer-events:none}
#punti .punto.pizzicare circle{fill:#dfe9fb;stroke:var(--blu)}
#punti .punto.pizzicare text{fill:var(--blu)}
#punti .punto:hover circle,#punti .punto:focus circle,#punti .punto.sel circle{
  stroke-width:4.4}
#punti .punto.sel circle{stroke-dasharray:3 2.4}