:root {
  --sfondo:#14161c; --pannello:#1c1f28; --bordo:#2b3040; --testo:#e8eaf0;
  --spento:#8b91a3; --accento:#ffd479; --melodia:#ff9d5c; --basso:#5cc8ff;
  --accordi:#9d7bff; --ok:#5fd18c; --cattivo:#ff6b6b;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--sfondo); color:var(--testo);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.wrap { max-width:1120px; margin:0 auto; padding:26px 20px 60px; }
h1 { font-size:30px; margin:0 0 4px; letter-spacing:-.02em; }
h1 span { color:var(--accento); }
h2 { font-size:17px; margin:0 0 14px; font-weight:650; }
.sub { color:var(--spento); margin:0 0 24px; max-width:66ch; }
.panel {
  background:var(--pannello); border:1px solid var(--bordo);
  border-radius:12px; padding:18px; margin-bottom:18px;
}
.griglia { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:900px) { .griglia { grid-template-columns:1.25fr 1fr; } }

button {
  font:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--bordo);
  background:#252a36; color:var(--testo); padding:9px 15px;
}
button:hover { border-color:var(--accento); }
button.attivo { background:var(--accento); color:#1b1400; border-color:var(--accento); }
.trasporto { display:flex; gap:11px; align-items:center; flex-wrap:wrap;
             margin-bottom:14px; }
input[type=range] { flex:1; min-width:170px; accent-color:var(--accento); }
.tempo { color:var(--spento); font-variant-numeric:tabular-nums; min-width:82px; }
audio { width:100%; margin-top:8px; }

canvas { width:100%; display:block; border-radius:8px; background:#10131a; }
.legenda { display:flex; gap:16px; flex-wrap:wrap; margin:10px 0 0;
           font-size:13px; color:var(--spento); }
.legenda i { display:inline-block; width:11px; height:11px; border-radius:3px;
             margin-right:6px; vertical-align:-1px; }

table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--bordo); }
th { color:var(--spento); font-weight:600; font-size:12px;
     text-transform:uppercase; letter-spacing:.05em; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.ok { color:var(--ok); } .cattivo { color:var(--cattivo); }
.note { color:var(--spento); font-size:13px; margin:12px 0 0; }
.accordi { display:flex; flex-wrap:wrap; gap:6px; }
.accordi span { background:#252a36; border:1px solid var(--bordo);
                border-radius:6px; padding:3px 9px; font-size:13px;
                font-variant-numeric:tabular-nums; }
.pista { display:flex; align-items:center; gap:10px; margin:9px 0; }
.pista label { min-width:78px; font-size:14px; }
.pista input[type=range] { flex:1; }
.avviso { border-left:3px solid var(--accento); padding:9px 13px;
          background:#22252f; border-radius:0 8px 8px 0; margin:0 0 14px;
          font-size:14px; }
.avviso.critico { border-left-color:var(--cattivo); }