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 - 84px);padding:12px 16px;font-family:sans-serif;font-size:13px;display:none;position:fixed;top:68px;right:16px}#controls-panel.visible{display:flex}.controls-panel__body{flex-direction:column;flex:1;gap:12px;min-height:0;display:flex;overflow-y:auto}#action-bar{z-index:11;opacity:0;pointer-events:none;gap:8px;transition:opacity .3s;display:flex;position:fixed;top:16px;right:16px}#action-bar.action-bar--visible{opacity:1;pointer-events:auto}.action-bar__button{color:#eee;cursor:pointer;background:#000000b3;border:1px solid #ffffff26;border-radius:6px;width:44px;height:44px;font-size:18px;line-height:1}.action-bar__button--active{color:#fff;border-color:#fff6}#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{z-index:1;background:0 0;border-bottom:1px solid #ffffff1a;gap:14px;margin-bottom:4px;padding-top:4px;display:flex;position:sticky;top:0}.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 4px 8px;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}@media (max-width:600px){#controls-panel{width:100%;max-height:70vh;padding-bottom:calc(12px + env(safe-area-inset-bottom));box-sizing:border-box;border-radius:12px 12px 0 0;inset:auto 0 0}.controls-panel__tabs,.controls-panel__subtabs{-webkit-overflow-scrolling:touch;overflow-x:auto}.controls-panel__tab,.controls-panel__subtab{flex:none}.controls-panel__tab{padding:0 4px 12px;font-size:13px}.controls-panel__subtab{padding:0 4px 10px;font-size:12px}.controls-panel__button{padding:10px 14px}}