html{margin:0;padding:0}body{margin:0;padding:0;overflow:hidden}canvas{display:block}#controls-panel{color:#eee;z-index:10;background:#000000b3;border:1px solid #ffffff26;border-radius:6px;flex-direction:column;gap:12px;max-height:calc(100vh - 32px);padding:12px 16px;font-family:sans-serif;font-size:13px;display:none;position:fixed;top:16px;right:16px;overflow-y:auto}#controls-panel.visible{display:flex}#fft-overlay{z-index:10;border-top:2px solid #0000;display:none;position:fixed;bottom:0;left:0}#fft-overlay.visible{display:block}#fft-overlay.fft-overlay--beat{border-top-color:#4ade80}.controls-panel__row{flex-direction:column;gap:4px;display:flex}.controls-panel__label-row{justify-content:space-between;gap:12px;display:flex}.controls-panel__value{color:#aaa;font-variant-numeric:tabular-nums}.controls-panel__tabs{border-bottom:1px solid #ffffff1a;gap:14px;display:flex}.controls-panel__tab{color:#888;font:inherit;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:0 4px 8px;font-size:11px}.controls-panel__tab--active{color:#eee;border-bottom-color:#eee}.controls-panel__section{flex-direction:column;gap:12px;display:none}.controls-panel__section--active{display:flex}.controls-panel__info{color:#888;cursor:help}.controls-panel__row--disabled{opacity:.4}.controls-panel__value--swatch{align-items:center;gap:6px;display:flex}.controls-panel__swatch{border:1px solid #ffffff4d;border-radius:2px;width:12px;height:12px;display:inline-block}.controls-panel__end-labels{color:#888;justify-content:space-between;font-size:11px;display:flex}.controls-panel__row--toggle .controls-panel__label-row{align-items:center}.controls-panel__subtabs{border-bottom:1px solid #ffffff1a;gap:4px;margin-bottom:4px;display:flex}.controls-panel__subtab{color:#888;font:inherit;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:0 0 6px;font-size:10px}.controls-panel__subtab--active{color:#eee;border-bottom-color:#eee}.controls-panel__subsection{flex-direction:column;gap:12px;display:none}.controls-panel__subsection--active{display:flex}.controls-panel__group{border:1px solid #ffffff26;border-radius:4px;flex-direction:column;gap:12px;padding:10px;display:flex}.controls-panel__group-header{text-transform:uppercase;letter-spacing:.04em;color:#aaa;font-size:11px}.controls-panel__button{color:#eee;font:inherit;cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:4px;padding:6px 10px;font-size:12px}.controls-panel__button:hover:not(:disabled){background:#ffffff26}.controls-panel__button:disabled{opacity:.4;cursor:default}