/* Visuals, for its own page and the all-instruments page. */
.vz { padding: 0; overflow: hidden; margin-bottom: 24px; }
.vz-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
/* Transparent and square whatever else the page styles canvases as: on the
   all page Bloom gives every canvas a background, which on the HUD, laid
   over the picture, hid it completely. */
.vz-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; border-radius: 0; }
.vz-stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.vz-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #ececf3; margin: 0; padding: 16px; text-align: center; }
.vz-fallback[hidden] { display: none; }
.vz-off .vz-controls { opacity: 0.6; }
.vz-full { position: absolute; bottom: 12px; right: 12px; font-size: 18px; line-height: 1; padding: 8px 10px; background: rgb(0 0 0 / 0.5); color: #ececf3; border-color: rgb(255 255 255 / 0.25); opacity: 0.7; }
.vz-full:hover, .vz-full:focus-visible { opacity: 1; }
.vz-stage:fullscreen .vz-full { opacity: 0; }
.vz-stage:fullscreen:hover .vz-full { opacity: 0.6; }
.vz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; }
.vz-controls label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.vz-controls input[type=range] { width: 140px; accent-color: var(--accent); }
.vz-scenes { display: flex; gap: 6px; }
.vz-controls .spacer { flex: 1; }
kbd { font: 11px var(--mono); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }