:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#2b2b2b; --muted:#7a7568;
  --accent:#3f51b5; --accent-soft:#e8ebfa; --line:#e2ded4;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Georgia,'Times New Roman',serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  padding:28px 18px 64px;
}
.wrap{max-width:980px; margin:0 auto;}
header h1{font-size:1.7rem; margin:0 0 6px;}
header p{color:var(--muted); margin:0; font-size:.95rem;}
header a{color:var(--accent);}

/* Controlli */
.controls{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:22px 0 8px;
}
#filtro{display:inline-flex; gap:6px; flex-wrap:wrap;}
.chip, button#studio{
  font-family:inherit; font-size:.85rem; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:6px 14px;
}
.chip[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
#studio[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent);
  font-weight:bold;
}
.hint{
  font-size:.8rem; color:var(--muted); margin:6px 2px 0; font-style:italic;
}

/* Tabella */
.tablewrap{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:auto; margin-top:14px;
}
table{border-collapse:collapse; width:100%; min-width:520px;}
thead th{
  position:sticky; top:0; background:#efeadf; z-index:2;
  text-align:left; padding:12px 12px; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em; color:#5b5648;
  border-bottom:2px solid var(--line); white-space:nowrap;
}
tbody td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:hover{background:#faf8f2;}
td.letter{
  font-size:1.6rem; text-align:center; width:74px;
}
td.nome{font-style:italic; min-width:90px;}
td.suono{font-size:.92rem;}
footer{margin-top:16px; color:var(--muted); font-size:.82rem;}

/* Modalità studio: nasconde nome e suono */
body.studio td.nome,
body.studio td.suono{visibility:hidden;}
body.studio tbody tr{cursor:pointer;}
body.studio tbody tr.revealed{background:var(--accent-soft);}
body.studio tbody tr.revealed td.nome,
body.studio tbody tr.revealed td.suono{visibility:visible;}
body.studio td.suono{font-weight:bold;}