*{box-sizing:border-box}:root{font-family:system-ui,sans-serif}.canvas{position:absolute;top:0;left:0;width:100dvw;height:100dvh}.controls{position:absolute;bottom:0;left:0;width:100dvw;padding:1em;display:flex;flex-direction:row;justify-content:center;gap:1em;pointer-events:none;-webkit-user-select:none;user-select:none}.controls>*{pointer-events:auto}.controlGroup{display:none;flex-direction:row;border-radius:8px;box-shadow:0 0 8px #0000007f;overflow:hidden}.visibleControlGroup{display:flex}.controlGroup>*{background-color:#fff;padding:.5em 1em;cursor:pointer}.controlGroup>:not(:last-child){border-right:1px solid gray}.controlGroup>:hover{background-color:#eee}.activeControl{background-color:#4980ff;color:#fff}.activeControl:hover{background-color:#6493ff}