/* ============================================================
   TEN Effects -- the four-stage chart (js/pedal-tools/stage-chart.js).
   Builds on ten.css; everything here is sc-.
   ============================================================ */

.sc-svg { width: 100%; height: auto; display: block; }
.sc-window { fill: var(--ink); }
.sc-gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.sc-wave { fill: none; stroke-width: 2; stroke-linejoin: round; }
.sc-axis { fill: var(--bone-3); font-family: var(--font-mono); font-size: 13px; }
.sc-key-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 13px; color: var(--bone-2); align-items: center; }
.sc-key { display: inline-flex; align-items: center; gap: 6px; }
.sc-key-note { color: var(--bone-3); flex-basis: 100%; }
.sc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.sc-compact .sc-wave { stroke-width: 2.5; }