/* Drum bench: maps the bench's own variable names onto the site palette. bench.js reads --neg, --pos, --ink, --rule. */
.drumbench{--ink:var(--parchment);--muted:var(--parchment-dim);--rule:var(--line);--skin:#7fb0e0;--good:var(--moss);--bad:var(--clay);
  --neg:127,176,224;--pos:224,166,70;--f-mono:var(--mono)}
:root{--ink:#ece1cc;--rule:#4a3b28;--neg:127,176,224;--pos:224,166,70}
.drumbench section{margin-top:52px}
.drumbench .bench{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px}
.drumbench .drums{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.drumbench .drum{display:flex;flex-direction:column;gap:8px;min-width:0}
.drumbench .drum canvas{width:100%;max-width:400px;aspect-ratio:1;cursor:crosshair;display:block;margin:0 auto;touch-action:manipulation}
.drumbench .drum .cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--parchment-dim);gap:8px;flex-wrap:wrap}
.drumbench .controls{border-top:1px solid var(--line);padding-top:14px}
.drumbench label{font-family:var(--mono);font-size:12px;color:var(--parchment-dim);display:flex;gap:8px;align-items:center}
.drumbench .chart{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;overflow-x:auto;margin:14px 0}
.drumbench .chart svg{display:block;width:100%;min-width:560px;height:auto}
.drumbench .legend{display:flex;gap:18px;font-family:var(--mono);font-size:12px;color:var(--parchment-dim);flex-wrap:wrap}
.drumbench .sw{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px}
.drumbench ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.drumbench .two{gap:26px;margin-top:12px}
@media (max-width:720px){.drumbench .drums{grid-template-columns:1fr}}