main{max-width:640px}
.lede{color:var(--soft);font-size:.95rem}

#viz{display:block;width:100%;height:auto;max-width:640px;margin:6px 0 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}

.playbar{display:flex;align-items:center;gap:14px;margin-bottom:var(--gap);flex-wrap:wrap}
.playbar .btn{min-width:112px}
.playbar .btn.on{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.left{color:var(--accent);font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums}
.hint,.hint2{color:var(--soft);font-size:.82rem;font-weight:400}

.lbl{display:flex;align-items:baseline;gap:10px;font-size:.95rem;color:var(--ink);
  margin-bottom:12px;font-weight:600;flex-wrap:wrap}

/* One row per track: icon, name, slider, number. A track at zero fades out.
   ⚠️ The name column is 5.6em, not the 3.2em the Chinese version uses — "Campfire"
   is eight characters where 篝火 is two. */
.trk{display:grid;grid-template-columns:26px 5.6em 1fr 2.4em;align-items:center;gap:10px;padding:7px 0}
.trk.off{opacity:.45}
.trk .ic{font-size:19px;text-align:center}
.trk .nm{font-size:.92rem;font-weight:600}
.trk .nb{font-size:.82rem;color:var(--soft);text-align:right;font-variant-numeric:tabular-nums}
.trk input[type=range]{width:100%;padding:0;accent-color:var(--accent)}

.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);
  border-radius:11px;padding:9px 16px;font-weight:600;font-size:.9rem;
  transition:border-color .15s,background .15s,transform .15s}
.chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.note code{background:rgba(0,0,0,.05);padding:1px 5px;border-radius:5px;font-size:.9em}

@media(max-width:600px){
  .trk{grid-template-columns:22px 5em 1fr 2.2em;gap:8px}
}