.bm-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .bm-grid { grid-template-columns: minmax(0, 1fr); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.v { font-family: var(--mono); color: var(--text); font-weight: 600; }
label.field.inline { display: inline-flex; }
.select.mini { min-height: 30px; height: 30px; padding: 0 28px 0 10px; font-size: 12.5px; font-weight: 600; width: auto; }

.canvas-box { aspect-ratio: 5 / 4; border-radius: 16px; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.canvas-box svg { width: 82%; height: 82%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); }
.canvas-box.wave { aspect-ratio: 16 / 10; align-items: end; }
.canvas-box.wave svg { width: 100%; height: 55%; filter: none; }

.palettes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.pal { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line-strong); transition: transform 140ms var(--ease); }
.pal:hover { transform: translateY(-2px); }
#swap { font-size: 16px; }
.code summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
#code { max-height: 220px; overflow: auto; font-size: 11.5px; }