.legend{
  max-width:640px; margin:20px auto 0;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px;
}
.legend > b{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); margin-bottom:8px;
}
.legend-grid{
  display:grid; grid-template-columns:1fr; gap:6px;
}
@media (min-width:520px){
  .legend-grid{ grid-template-columns:1fr 1fr; }
}
.legend-grid div{
  display:flex; align-items:baseline; gap:6px;
  font-size:.8rem; color:var(--ink-soft); line-height:1.4;
}
.legend-grid .opt{
  flex:none; font-size:.76rem; font-weight:600;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:3px 9px; color:var(--ink);
}