@import url('./funnels.css');

/* Sound wave art (sound-wave-art.html). Everything comes from funnels.css except what this
   page alone has: the preview canvas, which takes the shape of the chosen picture size,
   the label rows over its sliders, and the two colour pickers. */
.tool-panel h2 { overflow-wrap:anywhere; }
/* Height follows the width and the drawing's own shape. The squares show where the picture
   is transparent. */
.art-preview { display:block; width:100%; height:auto; margin-top:14px; border-radius:14px; background:repeating-conic-gradient(#ffffff14 0 25%, transparent 0 50%) 0 0/16px 16px; }
.art-slider { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-top:18px; color:var(--snow); font-size:15px; font-weight:500; }
.art-slider output { color:var(--snow-2); font-variant-numeric:tabular-nums; }
.tool-row input[type="color"] { width:56px; min-height:44px; padding:4px; border:1px solid #ffffff24; border-radius:12px; background:#0b0c0f; cursor:pointer; }
.tool-row input[type="color"]:disabled { opacity:.4; cursor:not-allowed; }
.tool-row input[type="checkbox"] { width:20px; height:20px; margin:0; accent-color:var(--accent); }