/* Bloom's controls, for its own page and the all-instruments page. */
.source { padding: 16px; margin-bottom: 24px; }
.scenes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; }
#track { color: var(--text); }
#time { font: 13px var(--mono); color: var(--muted); }

#deck { display: grid; gap: 16px; }
#deck[hidden] { display: none; }
.deck-panel { padding: 16px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; }
.small { font-size: 12px; color: var(--muted); }
canvas { display: block; width: 100%; border-radius: 8px; background: var(--bg); touch-action: none; }
#wave { height: 130px; cursor: pointer; }
#spectrum { height: 380px; cursor: crosshair; }
@media (max-width: 600px) { #spectrum { height: 280px; } }
.deck-panel p.small { margin: 8px 0 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.stat { background: var(--bg); border-radius: 10px; padding: 10px 12px; display: grid; }
.stat span { font-size: 12px; color: var(--muted); }
.stat b { font: 600 20px var(--mono); font-variant-numeric: tabular-nums; }
.stat i { font-style: normal; font-size: 11px; color: var(--muted); }

.controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 20px; padding: 16px; }
.control { display: grid; gap: 4px; }
.control label { font-size: 12px; color: var(--muted); }
.control input[type=range] { width: 100%; accent-color: var(--accent); }
.control output { font: 12px var(--mono); color: var(--text); }
.control select { width: 100%; }