:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#2b2b2b; --muted:#7a7568;
  --accent:#3f51b5; --accent-soft:#e8ebfa; --line:#e2ded4;
  --tag:#eceff9; --ok:#2e7d32;
}
*{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:1080px; 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;
}

/* Griglia delle schede */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px; margin-top:18px;
}
.scheda{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px 14px; display:flex; flex-direction:column; gap:8px;
}
.scheda header{border:none; padding:0; margin:0;}
.scheda h2{font-size:1.12rem; margin:0; color:var(--accent);}
.scheda .nome-it{font-size:.85rem; color:var(--muted); font-style:italic; margin-top:2px;}
.scheda dl{margin:4px 0 0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:.9rem;}
.scheda dt{color:var(--muted); white-space:nowrap;}
.scheda dd{margin:0; font-weight:bold;}
.scheda .uso{font-size:.9rem; color:var(--ink); margin:0;}
.scheda .esempi{
  font-size:.9rem; border-top:1px dashed var(--line); margin-top:6px; padding-top:10px;
  display:flex; flex-direction:column; gap:4px;
}
.scheda .esempi code{
  font-family:inherit; font-style:italic; background:var(--tag);
  padding:1px 6px; border-radius:6px;
}

/* Modalità studio: nasconde formula ed esempi */
body.studio .scheda dl,
body.studio .scheda .uso,
body.studio .scheda .esempi{
  visibility:hidden;
}
body.studio .scheda{cursor:pointer; min-height:120px;}
body.studio .scheda.revealed dl,
body.studio .scheda.revealed .uso,
body.studio .scheda.revealed .esempi{visibility:visible;}
body.studio .scheda.revealed{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}

@media (max-width:640px){
  .grid{grid-template-columns:1fr;}
}